@react-aria/form 3.0.17 → 3.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/types.d.ts.map +1 -1
- package/dist/useFormValidation.main.js +15 -1
- package/dist/useFormValidation.main.js.map +1 -1
- package/dist/useFormValidation.mjs +16 -2
- package/dist/useFormValidation.module.js +16 -2
- package/dist/useFormValidation.module.js.map +1 -1
- package/package.json +6 -6
- package/src/useFormValidation.ts +24 -2
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;AAkBA,0BAA0B,gBAAgB,GAAG,mBAAmB,GAAG,iBAAiB,CAAC;AAErF,8BAA8B,CAAC,CAAE,SAAQ,WAAW,CAAC,CAAC;IACpD,KAAK,CAAC,EAAE,MAAM,IAAI,CAAA;CACnB;AAED,kCAAkC,CAAC,EAAE,KAAK,EAAE,oBAAoB,CAAC,CAAC,EAAE,KAAK,EAAE,mBAAmB,EAAE,GAAG,EAAE,UAAU,kBAAkB,GAAG,IAAI,CAAC,GAAG,SAAS,GAAG,IAAI,
|
|
1
|
+
{"mappings":";;AAkBA,0BAA0B,gBAAgB,GAAG,mBAAmB,GAAG,iBAAiB,CAAC;AAErF,8BAA8B,CAAC,CAAE,SAAQ,WAAW,CAAC,CAAC;IACpD,KAAK,CAAC,EAAE,MAAM,IAAI,CAAA;CACnB;AAED,kCAAkC,CAAC,EAAE,KAAK,EAAE,oBAAoB,CAAC,CAAC,EAAE,KAAK,EAAE,mBAAmB,EAAE,GAAG,EAAE,UAAU,kBAAkB,GAAG,IAAI,CAAC,GAAG,SAAS,GAAG,IAAI,CA2F3J","sources":["packages/@react-aria/form/src/packages/@react-aria/form/src/useFormValidation.ts","packages/@react-aria/form/src/packages/@react-aria/form/src/index.ts","packages/@react-aria/form/src/index.ts"],"sourcesContent":[null,null,"/*\n * Copyright 2023 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport {useFormValidation} from './useFormValidation';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
|
|
@@ -34,8 +34,9 @@ function $9da8e3f192aba981$export$b8473d3665f3a75a(props, state, ref) {
|
|
|
34
34
|
if (!state.realtimeValidation.isInvalid) state.updateValidation($9da8e3f192aba981$var$getNativeValidity(ref.current));
|
|
35
35
|
}
|
|
36
36
|
});
|
|
37
|
+
let isIgnoredReset = (0, $j3sn1$react.useRef)(false);
|
|
37
38
|
let onReset = (0, $j3sn1$reactariautils.useEffectEvent)(()=>{
|
|
38
|
-
state.resetValidation();
|
|
39
|
+
if (!isIgnoredReset.current) state.resetValidation();
|
|
39
40
|
});
|
|
40
41
|
let onInvalid = (0, $j3sn1$reactariautils.useEffectEvent)((e)=>{
|
|
41
42
|
var _ref_current;
|
|
@@ -61,6 +62,17 @@ function $9da8e3f192aba981$export$b8473d3665f3a75a(props, state, ref) {
|
|
|
61
62
|
let input = ref === null || ref === void 0 ? void 0 : ref.current;
|
|
62
63
|
if (!input) return;
|
|
63
64
|
let form = input.form;
|
|
65
|
+
let reset = form === null || form === void 0 ? void 0 : form.reset;
|
|
66
|
+
if (form) // Try to detect React's automatic form reset behavior so we don't clear
|
|
67
|
+
// validation errors that are returned by server actions.
|
|
68
|
+
// To do this, we ignore programmatic form resets that occur outside a user event.
|
|
69
|
+
// This is best-effort. There may be false positives, e.g. setTimeout.
|
|
70
|
+
form.reset = ()=>{
|
|
71
|
+
// React uses MessageChannel for scheduling, so ignore 'message' events.
|
|
72
|
+
isIgnoredReset.current = !window.event || window.event.type === 'message' && window.event.target instanceof MessagePort;
|
|
73
|
+
reset === null || reset === void 0 ? void 0 : reset.call(form);
|
|
74
|
+
isIgnoredReset.current = false;
|
|
75
|
+
};
|
|
64
76
|
input.addEventListener('invalid', onInvalid);
|
|
65
77
|
input.addEventListener('change', onChange);
|
|
66
78
|
form === null || form === void 0 ? void 0 : form.addEventListener('reset', onReset);
|
|
@@ -68,6 +80,8 @@ function $9da8e3f192aba981$export$b8473d3665f3a75a(props, state, ref) {
|
|
|
68
80
|
input.removeEventListener('invalid', onInvalid);
|
|
69
81
|
input.removeEventListener('change', onChange);
|
|
70
82
|
form === null || form === void 0 ? void 0 : form.removeEventListener('reset', onReset);
|
|
83
|
+
if (form) // @ts-ignore
|
|
84
|
+
form.reset = reset;
|
|
71
85
|
};
|
|
72
86
|
}, [
|
|
73
87
|
ref,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;AAcM,SAAS,0CAAqB,KAA6B,EAAE,KAA0B,EAAE,GAAqD;IACnJ,IAAI,sBAAC,kBAAkB,SAAE,KAAK,EAAC,GAAG;IAElC,iIAAiI;IACjI,CAAA,GAAA,qCAAc,EAAE;QACd,IAAI,uBAAuB,aAAY,gBAAA,0BAAA,IAAK,OAAO,KAAI,CAAC,IAAI,OAAO,CAAC,QAAQ,EAAE;YAC5E,IAAI,eAAe,MAAM,kBAAkB,CAAC,SAAS,GAAG,MAAM,kBAAkB,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,mBAAmB;YAClI,IAAI,OAAO,CAAC,iBAAiB,CAAC;YAE9B,kDAAkD;YAClD,sDAAsD;YACtD,IAAI,CAAC,IAAI,OAAO,CAAC,YAAY,CAAC,UAC5B,IAAI,OAAO,CAAC,KAAK,GAAG;YAGtB,IAAI,CAAC,MAAM,kBAAkB,CAAC,SAAS,EACrC,MAAM,gBAAgB,CAAC,wCAAkB,IAAI,OAAO;QAExD;IACF;IAEA,IAAI,UAAU,CAAA,GAAA,oCAAa,EAAE;QAC3B,MAAM,eAAe;
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-aria/form/src/useFormValidation.ts"],"sourcesContent":["/*\n * Copyright 2023 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {FormValidationState} from '@react-stately/form';\nimport {RefObject, Validation, ValidationResult} from '@react-types/shared';\nimport {setInteractionModality} from '@react-aria/interactions';\nimport {useEffect, useRef} from 'react';\nimport {useEffectEvent, useLayoutEffect} from '@react-aria/utils';\n\ntype ValidatableElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;\n\ninterface FormValidationProps<T> extends Validation<T> {\n focus?: () => void\n}\n\nexport function useFormValidation<T>(props: FormValidationProps<T>, state: FormValidationState, ref: RefObject<ValidatableElement | null> | undefined): void {\n let {validationBehavior, focus} = props;\n\n // This is a useLayoutEffect so that it runs before the useEffect in useFormValidationState, which commits the validation change.\n useLayoutEffect(() => {\n if (validationBehavior === 'native' && ref?.current && !ref.current.disabled) {\n let errorMessage = state.realtimeValidation.isInvalid ? state.realtimeValidation.validationErrors.join(' ') || 'Invalid value.' : '';\n ref.current.setCustomValidity(errorMessage);\n\n // Prevent default tooltip for validation message.\n // https://bugzilla.mozilla.org/show_bug.cgi?id=605277\n if (!ref.current.hasAttribute('title')) {\n ref.current.title = '';\n }\n\n if (!state.realtimeValidation.isInvalid) {\n state.updateValidation(getNativeValidity(ref.current));\n }\n }\n });\n\n let isIgnoredReset = useRef(false);\n let onReset = useEffectEvent(() => {\n if (!isIgnoredReset.current) {\n state.resetValidation();\n }\n });\n\n let onInvalid = useEffectEvent((e: Event) => {\n // Only commit validation if we are not already displaying one.\n // This avoids clearing server errors that the user didn't actually fix.\n if (!state.displayValidation.isInvalid) {\n state.commitValidation();\n }\n\n // Auto focus the first invalid input in a form, unless the error already had its default prevented.\n let form = ref?.current?.form;\n if (!e.defaultPrevented && ref && form && getFirstInvalidInput(form) === ref.current) {\n if (focus) {\n focus();\n } else {\n ref.current?.focus();\n }\n\n // Always show focus ring.\n setInteractionModality('keyboard');\n }\n\n // Prevent default browser error UI from appearing.\n e.preventDefault();\n });\n\n let onChange = useEffectEvent(() => {\n state.commitValidation();\n });\n\n useEffect(() => {\n let input = ref?.current;\n if (!input) {\n return;\n }\n\n let form = input.form;\n\n let reset = form?.reset;\n if (form) {\n // Try to detect React's automatic form reset behavior so we don't clear\n // validation errors that are returned by server actions.\n // To do this, we ignore programmatic form resets that occur outside a user event.\n // This is best-effort. There may be false positives, e.g. setTimeout.\n form.reset = () => {\n // React uses MessageChannel for scheduling, so ignore 'message' events.\n isIgnoredReset.current = !window.event || (window.event.type === 'message' && window.event.target instanceof MessagePort);\n reset?.call(form);\n isIgnoredReset.current = false;\n };\n }\n\n input.addEventListener('invalid', onInvalid);\n input.addEventListener('change', onChange);\n form?.addEventListener('reset', onReset);\n return () => {\n input!.removeEventListener('invalid', onInvalid);\n input!.removeEventListener('change', onChange);\n form?.removeEventListener('reset', onReset);\n if (form) {\n // @ts-ignore\n form.reset = reset;\n }\n };\n }, [ref, onInvalid, onChange, onReset, validationBehavior]);\n}\n\nfunction getValidity(input: ValidatableElement) {\n // The native ValidityState object is live, meaning each property is a getter that returns the current state.\n // We need to create a snapshot of the validity state at the time this function is called to avoid unpredictable React renders.\n let validity = input.validity;\n return {\n badInput: validity.badInput,\n customError: validity.customError,\n patternMismatch: validity.patternMismatch,\n rangeOverflow: validity.rangeOverflow,\n rangeUnderflow: validity.rangeUnderflow,\n stepMismatch: validity.stepMismatch,\n tooLong: validity.tooLong,\n tooShort: validity.tooShort,\n typeMismatch: validity.typeMismatch,\n valueMissing: validity.valueMissing,\n valid: validity.valid\n };\n}\n\nfunction getNativeValidity(input: ValidatableElement): ValidationResult {\n return {\n isInvalid: !input.validity.valid,\n validationDetails: getValidity(input),\n validationErrors: input.validationMessage ? [input.validationMessage] : []\n };\n}\n\nfunction getFirstInvalidInput(form: HTMLFormElement): ValidatableElement | null {\n for (let i = 0; i < form.elements.length; i++) {\n let element = form.elements[i] as ValidatableElement;\n if (!element.validity.valid) {\n return element;\n }\n }\n\n return null;\n}\n"],"names":[],"version":3,"file":"useFormValidation.main.js.map"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {setInteractionModality as $9Gacy$setInteractionModality} from "@react-aria/interactions";
|
|
2
|
-
import {useEffect as $9Gacy$useEffect} from "react";
|
|
2
|
+
import {useRef as $9Gacy$useRef, useEffect as $9Gacy$useEffect} from "react";
|
|
3
3
|
import {useLayoutEffect as $9Gacy$useLayoutEffect, useEffectEvent as $9Gacy$useEffectEvent} from "@react-aria/utils";
|
|
4
4
|
|
|
5
5
|
/*
|
|
@@ -28,8 +28,9 @@ function $e93e671b31057976$export$b8473d3665f3a75a(props, state, ref) {
|
|
|
28
28
|
if (!state.realtimeValidation.isInvalid) state.updateValidation($e93e671b31057976$var$getNativeValidity(ref.current));
|
|
29
29
|
}
|
|
30
30
|
});
|
|
31
|
+
let isIgnoredReset = (0, $9Gacy$useRef)(false);
|
|
31
32
|
let onReset = (0, $9Gacy$useEffectEvent)(()=>{
|
|
32
|
-
state.resetValidation();
|
|
33
|
+
if (!isIgnoredReset.current) state.resetValidation();
|
|
33
34
|
});
|
|
34
35
|
let onInvalid = (0, $9Gacy$useEffectEvent)((e)=>{
|
|
35
36
|
var _ref_current;
|
|
@@ -55,6 +56,17 @@ function $e93e671b31057976$export$b8473d3665f3a75a(props, state, ref) {
|
|
|
55
56
|
let input = ref === null || ref === void 0 ? void 0 : ref.current;
|
|
56
57
|
if (!input) return;
|
|
57
58
|
let form = input.form;
|
|
59
|
+
let reset = form === null || form === void 0 ? void 0 : form.reset;
|
|
60
|
+
if (form) // Try to detect React's automatic form reset behavior so we don't clear
|
|
61
|
+
// validation errors that are returned by server actions.
|
|
62
|
+
// To do this, we ignore programmatic form resets that occur outside a user event.
|
|
63
|
+
// This is best-effort. There may be false positives, e.g. setTimeout.
|
|
64
|
+
form.reset = ()=>{
|
|
65
|
+
// React uses MessageChannel for scheduling, so ignore 'message' events.
|
|
66
|
+
isIgnoredReset.current = !window.event || window.event.type === 'message' && window.event.target instanceof MessagePort;
|
|
67
|
+
reset === null || reset === void 0 ? void 0 : reset.call(form);
|
|
68
|
+
isIgnoredReset.current = false;
|
|
69
|
+
};
|
|
58
70
|
input.addEventListener('invalid', onInvalid);
|
|
59
71
|
input.addEventListener('change', onChange);
|
|
60
72
|
form === null || form === void 0 ? void 0 : form.addEventListener('reset', onReset);
|
|
@@ -62,6 +74,8 @@ function $e93e671b31057976$export$b8473d3665f3a75a(props, state, ref) {
|
|
|
62
74
|
input.removeEventListener('invalid', onInvalid);
|
|
63
75
|
input.removeEventListener('change', onChange);
|
|
64
76
|
form === null || form === void 0 ? void 0 : form.removeEventListener('reset', onReset);
|
|
77
|
+
if (form) // @ts-ignore
|
|
78
|
+
form.reset = reset;
|
|
65
79
|
};
|
|
66
80
|
}, [
|
|
67
81
|
ref,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {setInteractionModality as $9Gacy$setInteractionModality} from "@react-aria/interactions";
|
|
2
|
-
import {useEffect as $9Gacy$useEffect} from "react";
|
|
2
|
+
import {useRef as $9Gacy$useRef, useEffect as $9Gacy$useEffect} from "react";
|
|
3
3
|
import {useLayoutEffect as $9Gacy$useLayoutEffect, useEffectEvent as $9Gacy$useEffectEvent} from "@react-aria/utils";
|
|
4
4
|
|
|
5
5
|
/*
|
|
@@ -28,8 +28,9 @@ function $e93e671b31057976$export$b8473d3665f3a75a(props, state, ref) {
|
|
|
28
28
|
if (!state.realtimeValidation.isInvalid) state.updateValidation($e93e671b31057976$var$getNativeValidity(ref.current));
|
|
29
29
|
}
|
|
30
30
|
});
|
|
31
|
+
let isIgnoredReset = (0, $9Gacy$useRef)(false);
|
|
31
32
|
let onReset = (0, $9Gacy$useEffectEvent)(()=>{
|
|
32
|
-
state.resetValidation();
|
|
33
|
+
if (!isIgnoredReset.current) state.resetValidation();
|
|
33
34
|
});
|
|
34
35
|
let onInvalid = (0, $9Gacy$useEffectEvent)((e)=>{
|
|
35
36
|
var _ref_current;
|
|
@@ -55,6 +56,17 @@ function $e93e671b31057976$export$b8473d3665f3a75a(props, state, ref) {
|
|
|
55
56
|
let input = ref === null || ref === void 0 ? void 0 : ref.current;
|
|
56
57
|
if (!input) return;
|
|
57
58
|
let form = input.form;
|
|
59
|
+
let reset = form === null || form === void 0 ? void 0 : form.reset;
|
|
60
|
+
if (form) // Try to detect React's automatic form reset behavior so we don't clear
|
|
61
|
+
// validation errors that are returned by server actions.
|
|
62
|
+
// To do this, we ignore programmatic form resets that occur outside a user event.
|
|
63
|
+
// This is best-effort. There may be false positives, e.g. setTimeout.
|
|
64
|
+
form.reset = ()=>{
|
|
65
|
+
// React uses MessageChannel for scheduling, so ignore 'message' events.
|
|
66
|
+
isIgnoredReset.current = !window.event || window.event.type === 'message' && window.event.target instanceof MessagePort;
|
|
67
|
+
reset === null || reset === void 0 ? void 0 : reset.call(form);
|
|
68
|
+
isIgnoredReset.current = false;
|
|
69
|
+
};
|
|
58
70
|
input.addEventListener('invalid', onInvalid);
|
|
59
71
|
input.addEventListener('change', onChange);
|
|
60
72
|
form === null || form === void 0 ? void 0 : form.addEventListener('reset', onReset);
|
|
@@ -62,6 +74,8 @@ function $e93e671b31057976$export$b8473d3665f3a75a(props, state, ref) {
|
|
|
62
74
|
input.removeEventListener('invalid', onInvalid);
|
|
63
75
|
input.removeEventListener('change', onChange);
|
|
64
76
|
form === null || form === void 0 ? void 0 : form.removeEventListener('reset', onReset);
|
|
77
|
+
if (form) // @ts-ignore
|
|
78
|
+
form.reset = reset;
|
|
65
79
|
};
|
|
66
80
|
}, [
|
|
67
81
|
ref,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;AAAA;;;;;;;;;;CAUC;;;AAcM,SAAS,0CAAqB,KAA6B,EAAE,KAA0B,EAAE,GAAqD;IACnJ,IAAI,sBAAC,kBAAkB,SAAE,KAAK,EAAC,GAAG;IAElC,iIAAiI;IACjI,CAAA,GAAA,sBAAc,EAAE;QACd,IAAI,uBAAuB,aAAY,gBAAA,0BAAA,IAAK,OAAO,KAAI,CAAC,IAAI,OAAO,CAAC,QAAQ,EAAE;YAC5E,IAAI,eAAe,MAAM,kBAAkB,CAAC,SAAS,GAAG,MAAM,kBAAkB,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,mBAAmB;YAClI,IAAI,OAAO,CAAC,iBAAiB,CAAC;YAE9B,kDAAkD;YAClD,sDAAsD;YACtD,IAAI,CAAC,IAAI,OAAO,CAAC,YAAY,CAAC,UAC5B,IAAI,OAAO,CAAC,KAAK,GAAG;YAGtB,IAAI,CAAC,MAAM,kBAAkB,CAAC,SAAS,EACrC,MAAM,gBAAgB,CAAC,wCAAkB,IAAI,OAAO;QAExD;IACF;IAEA,IAAI,UAAU,CAAA,GAAA,qBAAa,EAAE;QAC3B,MAAM,eAAe;
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-aria/form/src/useFormValidation.ts"],"sourcesContent":["/*\n * Copyright 2023 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {FormValidationState} from '@react-stately/form';\nimport {RefObject, Validation, ValidationResult} from '@react-types/shared';\nimport {setInteractionModality} from '@react-aria/interactions';\nimport {useEffect, useRef} from 'react';\nimport {useEffectEvent, useLayoutEffect} from '@react-aria/utils';\n\ntype ValidatableElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;\n\ninterface FormValidationProps<T> extends Validation<T> {\n focus?: () => void\n}\n\nexport function useFormValidation<T>(props: FormValidationProps<T>, state: FormValidationState, ref: RefObject<ValidatableElement | null> | undefined): void {\n let {validationBehavior, focus} = props;\n\n // This is a useLayoutEffect so that it runs before the useEffect in useFormValidationState, which commits the validation change.\n useLayoutEffect(() => {\n if (validationBehavior === 'native' && ref?.current && !ref.current.disabled) {\n let errorMessage = state.realtimeValidation.isInvalid ? state.realtimeValidation.validationErrors.join(' ') || 'Invalid value.' : '';\n ref.current.setCustomValidity(errorMessage);\n\n // Prevent default tooltip for validation message.\n // https://bugzilla.mozilla.org/show_bug.cgi?id=605277\n if (!ref.current.hasAttribute('title')) {\n ref.current.title = '';\n }\n\n if (!state.realtimeValidation.isInvalid) {\n state.updateValidation(getNativeValidity(ref.current));\n }\n }\n });\n\n let isIgnoredReset = useRef(false);\n let onReset = useEffectEvent(() => {\n if (!isIgnoredReset.current) {\n state.resetValidation();\n }\n });\n\n let onInvalid = useEffectEvent((e: Event) => {\n // Only commit validation if we are not already displaying one.\n // This avoids clearing server errors that the user didn't actually fix.\n if (!state.displayValidation.isInvalid) {\n state.commitValidation();\n }\n\n // Auto focus the first invalid input in a form, unless the error already had its default prevented.\n let form = ref?.current?.form;\n if (!e.defaultPrevented && ref && form && getFirstInvalidInput(form) === ref.current) {\n if (focus) {\n focus();\n } else {\n ref.current?.focus();\n }\n\n // Always show focus ring.\n setInteractionModality('keyboard');\n }\n\n // Prevent default browser error UI from appearing.\n e.preventDefault();\n });\n\n let onChange = useEffectEvent(() => {\n state.commitValidation();\n });\n\n useEffect(() => {\n let input = ref?.current;\n if (!input) {\n return;\n }\n\n let form = input.form;\n\n let reset = form?.reset;\n if (form) {\n // Try to detect React's automatic form reset behavior so we don't clear\n // validation errors that are returned by server actions.\n // To do this, we ignore programmatic form resets that occur outside a user event.\n // This is best-effort. There may be false positives, e.g. setTimeout.\n form.reset = () => {\n // React uses MessageChannel for scheduling, so ignore 'message' events.\n isIgnoredReset.current = !window.event || (window.event.type === 'message' && window.event.target instanceof MessagePort);\n reset?.call(form);\n isIgnoredReset.current = false;\n };\n }\n\n input.addEventListener('invalid', onInvalid);\n input.addEventListener('change', onChange);\n form?.addEventListener('reset', onReset);\n return () => {\n input!.removeEventListener('invalid', onInvalid);\n input!.removeEventListener('change', onChange);\n form?.removeEventListener('reset', onReset);\n if (form) {\n // @ts-ignore\n form.reset = reset;\n }\n };\n }, [ref, onInvalid, onChange, onReset, validationBehavior]);\n}\n\nfunction getValidity(input: ValidatableElement) {\n // The native ValidityState object is live, meaning each property is a getter that returns the current state.\n // We need to create a snapshot of the validity state at the time this function is called to avoid unpredictable React renders.\n let validity = input.validity;\n return {\n badInput: validity.badInput,\n customError: validity.customError,\n patternMismatch: validity.patternMismatch,\n rangeOverflow: validity.rangeOverflow,\n rangeUnderflow: validity.rangeUnderflow,\n stepMismatch: validity.stepMismatch,\n tooLong: validity.tooLong,\n tooShort: validity.tooShort,\n typeMismatch: validity.typeMismatch,\n valueMissing: validity.valueMissing,\n valid: validity.valid\n };\n}\n\nfunction getNativeValidity(input: ValidatableElement): ValidationResult {\n return {\n isInvalid: !input.validity.valid,\n validationDetails: getValidity(input),\n validationErrors: input.validationMessage ? [input.validationMessage] : []\n };\n}\n\nfunction getFirstInvalidInput(form: HTMLFormElement): ValidatableElement | null {\n for (let i = 0; i < form.elements.length; i++) {\n let element = form.elements[i] as ValidatableElement;\n if (!element.validity.valid) {\n return element;\n }\n }\n\n return null;\n}\n"],"names":[],"version":3,"file":"useFormValidation.module.js.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-aria/form",
|
|
3
|
-
"version": "3.0
|
|
3
|
+
"version": "3.1.0",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -26,10 +26,10 @@
|
|
|
26
26
|
"url": "https://github.com/adobe/react-spectrum"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@react-aria/interactions": "^3.25.
|
|
30
|
-
"@react-aria/utils": "^3.
|
|
31
|
-
"@react-stately/form": "^3.
|
|
32
|
-
"@react-types/shared": "^3.
|
|
29
|
+
"@react-aria/interactions": "^3.25.4",
|
|
30
|
+
"@react-aria/utils": "^3.30.0",
|
|
31
|
+
"@react-stately/form": "^3.2.0",
|
|
32
|
+
"@react-types/shared": "^3.31.0",
|
|
33
33
|
"@swc/helpers": "^0.5.0"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
@@ -39,5 +39,5 @@
|
|
|
39
39
|
"publishConfig": {
|
|
40
40
|
"access": "public"
|
|
41
41
|
},
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "8b9348ff255e018b2dd9b27e2a45507cadfa1d35"
|
|
43
43
|
}
|
package/src/useFormValidation.ts
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
import {FormValidationState} from '@react-stately/form';
|
|
14
14
|
import {RefObject, Validation, ValidationResult} from '@react-types/shared';
|
|
15
15
|
import {setInteractionModality} from '@react-aria/interactions';
|
|
16
|
-
import {useEffect} from 'react';
|
|
16
|
+
import {useEffect, useRef} from 'react';
|
|
17
17
|
import {useEffectEvent, useLayoutEffect} from '@react-aria/utils';
|
|
18
18
|
|
|
19
19
|
type ValidatableElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
|
|
@@ -43,8 +43,11 @@ export function useFormValidation<T>(props: FormValidationProps<T>, state: FormV
|
|
|
43
43
|
}
|
|
44
44
|
});
|
|
45
45
|
|
|
46
|
+
let isIgnoredReset = useRef(false);
|
|
46
47
|
let onReset = useEffectEvent(() => {
|
|
47
|
-
|
|
48
|
+
if (!isIgnoredReset.current) {
|
|
49
|
+
state.resetValidation();
|
|
50
|
+
}
|
|
48
51
|
});
|
|
49
52
|
|
|
50
53
|
let onInvalid = useEffectEvent((e: Event) => {
|
|
@@ -82,6 +85,21 @@ export function useFormValidation<T>(props: FormValidationProps<T>, state: FormV
|
|
|
82
85
|
}
|
|
83
86
|
|
|
84
87
|
let form = input.form;
|
|
88
|
+
|
|
89
|
+
let reset = form?.reset;
|
|
90
|
+
if (form) {
|
|
91
|
+
// Try to detect React's automatic form reset behavior so we don't clear
|
|
92
|
+
// validation errors that are returned by server actions.
|
|
93
|
+
// To do this, we ignore programmatic form resets that occur outside a user event.
|
|
94
|
+
// This is best-effort. There may be false positives, e.g. setTimeout.
|
|
95
|
+
form.reset = () => {
|
|
96
|
+
// React uses MessageChannel for scheduling, so ignore 'message' events.
|
|
97
|
+
isIgnoredReset.current = !window.event || (window.event.type === 'message' && window.event.target instanceof MessagePort);
|
|
98
|
+
reset?.call(form);
|
|
99
|
+
isIgnoredReset.current = false;
|
|
100
|
+
};
|
|
101
|
+
}
|
|
102
|
+
|
|
85
103
|
input.addEventListener('invalid', onInvalid);
|
|
86
104
|
input.addEventListener('change', onChange);
|
|
87
105
|
form?.addEventListener('reset', onReset);
|
|
@@ -89,6 +107,10 @@ export function useFormValidation<T>(props: FormValidationProps<T>, state: FormV
|
|
|
89
107
|
input!.removeEventListener('invalid', onInvalid);
|
|
90
108
|
input!.removeEventListener('change', onChange);
|
|
91
109
|
form?.removeEventListener('reset', onReset);
|
|
110
|
+
if (form) {
|
|
111
|
+
// @ts-ignore
|
|
112
|
+
form.reset = reset;
|
|
113
|
+
}
|
|
92
114
|
};
|
|
93
115
|
}, [ref, onInvalid, onChange, onReset, validationBehavior]);
|
|
94
116
|
}
|