Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@react-stately/form

Package Overview
Dependencies
Maintainers
2
Versions
255
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@react-stately/form - npm Package Compare versions

Comparing version 3.0.0-nightly.4276 to 3.0.0-nightly-086ad3115-240911

dist/useFormValidationState.main.js
dist/useFormValidationState.main.js.map
dist/useFormValidationState.mjs
dist/useFormValidationState.module.js
dist/useFormValidationState.module.js.map

197

dist/main.js

@@ -1,2 +0,2 @@

var $dlKOn$react = require("react");
var $5d10129a174740d4$exports = require("./useFormValidationState.main.js");

@@ -8,8 +8,8 @@

$parcel$export(module.exports, "FormValidationContext", () => $5d10129a174740d4$export$571b5131b7e65c11);
$parcel$export(module.exports, "useFormValidationState", () => $5d10129a174740d4$export$fc1a364ae1f3ff10);
$parcel$export(module.exports, "DEFAULT_VALIDATION_RESULT", () => $5d10129a174740d4$export$dad6ae84456c676a);
$parcel$export(module.exports, "VALID_VALIDITY_STATE", () => $5d10129a174740d4$export$aca958c65c314e6c);
$parcel$export(module.exports, "privateValidationStateProp", () => $5d10129a174740d4$export$a763b9476acd3eb);
$parcel$export(module.exports, "mergeValidation", () => $5d10129a174740d4$export$75ee7c75d68f5b0e);
$parcel$export(module.exports, "FormValidationContext", () => $5d10129a174740d4$exports.FormValidationContext);
$parcel$export(module.exports, "useFormValidationState", () => $5d10129a174740d4$exports.useFormValidationState);
$parcel$export(module.exports, "DEFAULT_VALIDATION_RESULT", () => $5d10129a174740d4$exports.DEFAULT_VALIDATION_RESULT);
$parcel$export(module.exports, "VALID_VALIDITY_STATE", () => $5d10129a174740d4$exports.VALID_VALIDITY_STATE);
$parcel$export(module.exports, "privateValidationStateProp", () => $5d10129a174740d4$exports.privateValidationStateProp);
$parcel$export(module.exports, "mergeValidation", () => $5d10129a174740d4$exports.mergeValidation);
/*

@@ -25,188 +25,5 @@ * Copyright 2023 Adobe. All rights reserved.

* governing permissions and limitations under the License.
*/ /*
* Copyright 2023 Adobe. All rights reserved.
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
const $5d10129a174740d4$export$aca958c65c314e6c = {
badInput: false,
customError: false,
patternMismatch: false,
rangeOverflow: false,
rangeUnderflow: false,
stepMismatch: false,
tooLong: false,
tooShort: false,
typeMismatch: false,
valueMissing: false,
valid: true
};
const $5d10129a174740d4$var$CUSTOM_VALIDITY_STATE = {
...$5d10129a174740d4$export$aca958c65c314e6c,
customError: true,
valid: false
};
const $5d10129a174740d4$export$dad6ae84456c676a = {
isInvalid: false,
validationDetails: $5d10129a174740d4$export$aca958c65c314e6c,
validationErrors: []
};
const $5d10129a174740d4$export$571b5131b7e65c11 = (0, $dlKOn$react.createContext)({});
const $5d10129a174740d4$export$a763b9476acd3eb = "__formValidationState" + Date.now();
function $5d10129a174740d4$export$fc1a364ae1f3ff10(props) {
// Private prop for parent components to pass state to children.
if (props[$5d10129a174740d4$export$a763b9476acd3eb]) {
let { realtimeValidation: realtimeValidation, displayValidation: displayValidation, updateValidation: updateValidation, resetValidation: resetValidation, commitValidation: commitValidation } = props[$5d10129a174740d4$export$a763b9476acd3eb];
return {
realtimeValidation: realtimeValidation,
displayValidation: displayValidation,
updateValidation: updateValidation,
resetValidation: resetValidation,
commitValidation: commitValidation
};
}
// eslint-disable-next-line react-hooks/rules-of-hooks
return $5d10129a174740d4$var$useFormValidationStateImpl(props);
}
function $5d10129a174740d4$var$useFormValidationStateImpl(props) {
let { isInvalid: isInvalid, validationState: validationState, name: name, value: value, builtinValidation: builtinValidation, validate: validate, validationBehavior: validationBehavior = "aria" } = props;
// backward compatibility.
if (validationState) isInvalid || (isInvalid = validationState === "invalid");
// If the isInvalid prop is true, update validation result in realtime (controlled).
let controlledError = isInvalid ? {
isInvalid: true,
validationErrors: [],
validationDetails: $5d10129a174740d4$var$CUSTOM_VALIDITY_STATE
} : null;
// Perform custom client side validation.
let clientError = (0, $dlKOn$react.useMemo)(()=>$5d10129a174740d4$var$getValidationResult($5d10129a174740d4$var$runValidate(validate, value)), [
validate,
value
]);
if (builtinValidation === null || builtinValidation === void 0 ? void 0 : builtinValidation.validationDetails.valid) builtinValidation = null;
// Get relevant server errors from the form.
let serverErrors = (0, $dlKOn$react.useContext)($5d10129a174740d4$export$571b5131b7e65c11);
let serverErrorMessages = (0, $dlKOn$react.useMemo)(()=>{
if (name) return Array.isArray(name) ? name.flatMap((name)=>$5d10129a174740d4$var$asArray(serverErrors[name])) : $5d10129a174740d4$var$asArray(serverErrors[name]);
return [];
}, [
serverErrors,
name
]);
// Show server errors when the form gets a new value, and clear when the user changes the value.
let [lastServerErrors, setLastServerErrors] = (0, $dlKOn$react.useState)(serverErrors);
let [isServerErrorCleared, setServerErrorCleared] = (0, $dlKOn$react.useState)(false);
if (serverErrors !== lastServerErrors) {
setLastServerErrors(serverErrors);
setServerErrorCleared(false);
}
let serverError = (0, $dlKOn$react.useMemo)(()=>$5d10129a174740d4$var$getValidationResult(isServerErrorCleared ? [] : serverErrorMessages), [
isServerErrorCleared,
serverErrorMessages
]);
// Track the next validation state in a ref until commitValidation is called.
let nextValidation = (0, $dlKOn$react.useRef)($5d10129a174740d4$export$dad6ae84456c676a);
let [currentValidity, setCurrentValidity] = (0, $dlKOn$react.useState)($5d10129a174740d4$export$dad6ae84456c676a);
let lastError = (0, $dlKOn$react.useRef)($5d10129a174740d4$export$dad6ae84456c676a);
let commitValidation = ()=>{
if (!commitQueued) return;
setCommitQueued(false);
let error = clientError || builtinValidation || nextValidation.current;
if (!$5d10129a174740d4$var$isEqualValidation(error, lastError.current)) {
lastError.current = error;
setCurrentValidity(error);
}
};
let [commitQueued, setCommitQueued] = (0, $dlKOn$react.useState)(false);
(0, $dlKOn$react.useEffect)(commitValidation);
// realtimeValidation is used to update the native input element's state based on custom validation logic.
// displayValidation is the currently displayed validation state that the user sees (e.g. on input change/form submit).
// With validationBehavior="aria", all errors are displayed in realtime rather than on submit.
let realtimeValidation = controlledError || serverError || clientError || builtinValidation || $5d10129a174740d4$export$dad6ae84456c676a;
let displayValidation = validationBehavior === "native" ? controlledError || serverError || currentValidity : controlledError || serverError || clientError || builtinValidation || currentValidity;
return {
realtimeValidation: realtimeValidation,
displayValidation: displayValidation,
updateValidation (value) {
// If validationBehavior is 'aria', update in realtime. Otherwise, store in a ref until commit.
if (validationBehavior === "aria" && !$5d10129a174740d4$var$isEqualValidation(currentValidity, value)) setCurrentValidity(value);
else nextValidation.current = value;
},
resetValidation () {
// Update the currently displayed validation state to valid on form reset,
// even if the native validity says it isn't. It'll show again on the next form submit.
let error = $5d10129a174740d4$export$dad6ae84456c676a;
if (!$5d10129a174740d4$var$isEqualValidation(error, lastError.current)) {
lastError.current = error;
setCurrentValidity(error);
}
// Do not commit validation after the next render. This avoids a condition where
// useSelect calls commitValidation inside an onReset handler.
if (validationBehavior === "native") setCommitQueued(false);
setServerErrorCleared(true);
},
commitValidation () {
// Commit validation state so the user sees it on blur/change/submit. Also clear any server errors.
// Wait until after the next render to commit so that the latest value has been validated.
if (validationBehavior === "native") setCommitQueued(true);
setServerErrorCleared(true);
}
};
}
function $5d10129a174740d4$var$asArray(v) {
if (!v) return [];
return Array.isArray(v) ? v : [
v
];
}
function $5d10129a174740d4$var$runValidate(validate, value) {
if (typeof validate === "function") {
let e = validate(value);
if (e && typeof e !== "boolean") return $5d10129a174740d4$var$asArray(e);
}
return [];
}
function $5d10129a174740d4$var$getValidationResult(errors) {
return errors.length ? {
isInvalid: true,
validationErrors: errors,
validationDetails: $5d10129a174740d4$var$CUSTOM_VALIDITY_STATE
} : null;
}
function $5d10129a174740d4$var$isEqualValidation(a, b) {
if (a === b) return true;
return a && b && a.isInvalid === b.isInvalid && a.validationErrors.length === b.validationErrors.length && a.validationErrors.every((a, i)=>a === b.validationErrors[i]) && Object.entries(a.validationDetails).every(([k, v])=>b.validationDetails[k] === v);
}
function $5d10129a174740d4$export$75ee7c75d68f5b0e(...results) {
let errors = new Set();
let isInvalid = false;
let validationDetails = {
...$5d10129a174740d4$export$aca958c65c314e6c
};
for (let v of results){
var _validationDetails, _key;
for (let e of v.validationErrors)errors.add(e);
// Only these properties apply for checkboxes.
isInvalid || (isInvalid = v.isInvalid);
for(let key in validationDetails)(_validationDetails = validationDetails)[_key = key] || (_validationDetails[_key] = v.validationDetails[key]);
}
validationDetails.valid = !isInvalid;
return {
isInvalid: isInvalid,
validationErrors: [
...errors
],
validationDetails: validationDetails
};
}
//# sourceMappingURL=main.js.map

185

dist/module.js

@@ -1,2 +0,2 @@

import {createContext as $jcIOw$createContext, useMemo as $jcIOw$useMemo, useContext as $jcIOw$useContext, useState as $jcIOw$useState, useRef as $jcIOw$useRef, useEffect as $jcIOw$useEffect} from "react";
import {DEFAULT_VALIDATION_RESULT as $e5be200c675c3b3a$export$dad6ae84456c676a, FormValidationContext as $e5be200c675c3b3a$export$571b5131b7e65c11, mergeValidation as $e5be200c675c3b3a$export$75ee7c75d68f5b0e, privateValidationStateProp as $e5be200c675c3b3a$export$a763b9476acd3eb, useFormValidationState as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, VALID_VALIDITY_STATE as $e5be200c675c3b3a$export$aca958c65c314e6c} from "./useFormValidationState.module.js";

@@ -13,189 +13,6 @@ /*

* governing permissions and limitations under the License.
*/ /*
* Copyright 2023 Adobe. All rights reserved.
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
const $e5be200c675c3b3a$export$aca958c65c314e6c = {
badInput: false,
customError: false,
patternMismatch: false,
rangeOverflow: false,
rangeUnderflow: false,
stepMismatch: false,
tooLong: false,
tooShort: false,
typeMismatch: false,
valueMissing: false,
valid: true
};
const $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE = {
...$e5be200c675c3b3a$export$aca958c65c314e6c,
customError: true,
valid: false
};
const $e5be200c675c3b3a$export$dad6ae84456c676a = {
isInvalid: false,
validationDetails: $e5be200c675c3b3a$export$aca958c65c314e6c,
validationErrors: []
};
const $e5be200c675c3b3a$export$571b5131b7e65c11 = (0, $jcIOw$createContext)({});
const $e5be200c675c3b3a$export$a763b9476acd3eb = "__formValidationState" + Date.now();
function $e5be200c675c3b3a$export$fc1a364ae1f3ff10(props) {
// Private prop for parent components to pass state to children.
if (props[$e5be200c675c3b3a$export$a763b9476acd3eb]) {
let { realtimeValidation: realtimeValidation, displayValidation: displayValidation, updateValidation: updateValidation, resetValidation: resetValidation, commitValidation: commitValidation } = props[$e5be200c675c3b3a$export$a763b9476acd3eb];
return {
realtimeValidation: realtimeValidation,
displayValidation: displayValidation,
updateValidation: updateValidation,
resetValidation: resetValidation,
commitValidation: commitValidation
};
}
// eslint-disable-next-line react-hooks/rules-of-hooks
return $e5be200c675c3b3a$var$useFormValidationStateImpl(props);
}
function $e5be200c675c3b3a$var$useFormValidationStateImpl(props) {
let { isInvalid: isInvalid, validationState: validationState, name: name, value: value, builtinValidation: builtinValidation, validate: validate, validationBehavior: validationBehavior = "aria" } = props;
// backward compatibility.
if (validationState) isInvalid || (isInvalid = validationState === "invalid");
// If the isInvalid prop is true, update validation result in realtime (controlled).
let controlledError = isInvalid ? {
isInvalid: true,
validationErrors: [],
validationDetails: $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE
} : null;
// Perform custom client side validation.
let clientError = (0, $jcIOw$useMemo)(()=>$e5be200c675c3b3a$var$getValidationResult($e5be200c675c3b3a$var$runValidate(validate, value)), [
validate,
value
]);
if (builtinValidation === null || builtinValidation === void 0 ? void 0 : builtinValidation.validationDetails.valid) builtinValidation = null;
// Get relevant server errors from the form.
let serverErrors = (0, $jcIOw$useContext)($e5be200c675c3b3a$export$571b5131b7e65c11);
let serverErrorMessages = (0, $jcIOw$useMemo)(()=>{
if (name) return Array.isArray(name) ? name.flatMap((name)=>$e5be200c675c3b3a$var$asArray(serverErrors[name])) : $e5be200c675c3b3a$var$asArray(serverErrors[name]);
return [];
}, [
serverErrors,
name
]);
// Show server errors when the form gets a new value, and clear when the user changes the value.
let [lastServerErrors, setLastServerErrors] = (0, $jcIOw$useState)(serverErrors);
let [isServerErrorCleared, setServerErrorCleared] = (0, $jcIOw$useState)(false);
if (serverErrors !== lastServerErrors) {
setLastServerErrors(serverErrors);
setServerErrorCleared(false);
}
let serverError = (0, $jcIOw$useMemo)(()=>$e5be200c675c3b3a$var$getValidationResult(isServerErrorCleared ? [] : serverErrorMessages), [
isServerErrorCleared,
serverErrorMessages
]);
// Track the next validation state in a ref until commitValidation is called.
let nextValidation = (0, $jcIOw$useRef)($e5be200c675c3b3a$export$dad6ae84456c676a);
let [currentValidity, setCurrentValidity] = (0, $jcIOw$useState)($e5be200c675c3b3a$export$dad6ae84456c676a);
let lastError = (0, $jcIOw$useRef)($e5be200c675c3b3a$export$dad6ae84456c676a);
let commitValidation = ()=>{
if (!commitQueued) return;
setCommitQueued(false);
let error = clientError || builtinValidation || nextValidation.current;
if (!$e5be200c675c3b3a$var$isEqualValidation(error, lastError.current)) {
lastError.current = error;
setCurrentValidity(error);
}
};
let [commitQueued, setCommitQueued] = (0, $jcIOw$useState)(false);
(0, $jcIOw$useEffect)(commitValidation);
// realtimeValidation is used to update the native input element's state based on custom validation logic.
// displayValidation is the currently displayed validation state that the user sees (e.g. on input change/form submit).
// With validationBehavior="aria", all errors are displayed in realtime rather than on submit.
let realtimeValidation = controlledError || serverError || clientError || builtinValidation || $e5be200c675c3b3a$export$dad6ae84456c676a;
let displayValidation = validationBehavior === "native" ? controlledError || serverError || currentValidity : controlledError || serverError || clientError || builtinValidation || currentValidity;
return {
realtimeValidation: realtimeValidation,
displayValidation: displayValidation,
updateValidation (value) {
// If validationBehavior is 'aria', update in realtime. Otherwise, store in a ref until commit.
if (validationBehavior === "aria" && !$e5be200c675c3b3a$var$isEqualValidation(currentValidity, value)) setCurrentValidity(value);
else nextValidation.current = value;
},
resetValidation () {
// Update the currently displayed validation state to valid on form reset,
// even if the native validity says it isn't. It'll show again on the next form submit.
let error = $e5be200c675c3b3a$export$dad6ae84456c676a;
if (!$e5be200c675c3b3a$var$isEqualValidation(error, lastError.current)) {
lastError.current = error;
setCurrentValidity(error);
}
// Do not commit validation after the next render. This avoids a condition where
// useSelect calls commitValidation inside an onReset handler.
if (validationBehavior === "native") setCommitQueued(false);
setServerErrorCleared(true);
},
commitValidation () {
// Commit validation state so the user sees it on blur/change/submit. Also clear any server errors.
// Wait until after the next render to commit so that the latest value has been validated.
if (validationBehavior === "native") setCommitQueued(true);
setServerErrorCleared(true);
}
};
}
function $e5be200c675c3b3a$var$asArray(v) {
if (!v) return [];
return Array.isArray(v) ? v : [
v
];
}
function $e5be200c675c3b3a$var$runValidate(validate, value) {
if (typeof validate === "function") {
let e = validate(value);
if (e && typeof e !== "boolean") return $e5be200c675c3b3a$var$asArray(e);
}
return [];
}
function $e5be200c675c3b3a$var$getValidationResult(errors) {
return errors.length ? {
isInvalid: true,
validationErrors: errors,
validationDetails: $e5be200c675c3b3a$var$CUSTOM_VALIDITY_STATE
} : null;
}
function $e5be200c675c3b3a$var$isEqualValidation(a, b) {
if (a === b) return true;
return a && b && a.isInvalid === b.isInvalid && a.validationErrors.length === b.validationErrors.length && a.validationErrors.every((a, i)=>a === b.validationErrors[i]) && Object.entries(a.validationDetails).every(([k, v])=>b.validationDetails[k] === v);
}
function $e5be200c675c3b3a$export$75ee7c75d68f5b0e(...results) {
let errors = new Set();
let isInvalid = false;
let validationDetails = {
...$e5be200c675c3b3a$export$aca958c65c314e6c
};
for (let v of results){
var _validationDetails, _key;
for (let e of v.validationErrors)errors.add(e);
// Only these properties apply for checkboxes.
isInvalid || (isInvalid = v.isInvalid);
for(let key in validationDetails)(_validationDetails = validationDetails)[_key = key] || (_validationDetails[_key] = v.validationDetails[key]);
}
validationDetails.valid = !isInvalid;
return {
isInvalid: isInvalid,
validationErrors: [
...errors
],
validationDetails: validationDetails
};
}
export {$e5be200c675c3b3a$export$571b5131b7e65c11 as FormValidationContext, $e5be200c675c3b3a$export$fc1a364ae1f3ff10 as useFormValidationState, $e5be200c675c3b3a$export$dad6ae84456c676a as DEFAULT_VALIDATION_RESULT, $e5be200c675c3b3a$export$aca958c65c314e6c as VALID_VALIDITY_STATE, $e5be200c675c3b3a$export$a763b9476acd3eb as privateValidationStateProp, $e5be200c675c3b3a$export$75ee7c75d68f5b0e as mergeValidation};
//# sourceMappingURL=module.js.map

3

dist/types.d.ts
import { Validation, ValidationErrors, ValidationResult } from "@react-types/shared";
import { Context } from "react";
export const VALID_VALIDITY_STATE: ValidityState;
export const DEFAULT_VALIDATION_RESULT: ValidationResult;
export const FormValidationContext: import("react").Context<ValidationErrors>;
export const FormValidationContext: Context<ValidationErrors>;
export const privateValidationStateProp: string;

@@ -6,0 +7,0 @@ interface FormValidationProps<T> extends Validation<T> {

10

package.json
{
"name": "@react-stately/form",
"version": "3.0.0-nightly.4276+fa107af51",
"version": "3.0.0-nightly-086ad3115-240911",
"description": "Spectrum UI components in React",

@@ -25,7 +25,7 @@ "license": "Apache-2.0",

"dependencies": {
"@react-types/shared": "3.0.0-nightly.2565+fa107af51",
"@react-types/shared": "^3.0.0-nightly-086ad3115-240911",
"@swc/helpers": "^0.5.0"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
},

@@ -35,3 +35,3 @@ "publishConfig": {

},
"gitHead": "fa107af514b0c790a9d8b894de9ecbad376ddcfa"
}
"stableVersion": "3.0.5"
}

6

src/useFormValidationState.ts

@@ -84,5 +84,5 @@ /*

// If the isInvalid prop is true, update validation result in realtime (controlled).
let controlledError: ValidationResult | null = isInvalid ? {
isInvalid: true,
// If the isInvalid prop is controlled, update validation result in realtime.
let controlledError: ValidationResult | null = isInvalid !== undefined ? {
isInvalid,
validationErrors: [],

@@ -89,0 +89,0 @@ validationDetails: CUSTOM_VALIDITY_STATE

LICENSE
dist/import.mjs

Sorry, the diff of this file is not supported yet

dist/main.js.map

Sorry, the diff of this file is not supported yet

dist/module.js.map

Sorry, the diff of this file is not supported yet

dist/types.d.ts.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc