@react-aria/form 3.0.0-nightly.4256 → 3.0.0-nightly.4266
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/import.mjs +22 -3
- package/dist/main.js +22 -3
- package/dist/main.js.map +1 -1
- package/dist/module.js +22 -3
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +4 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +6 -5
- package/src/useFormValidation.ts +34 -5
package/dist/import.mjs
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import {useEffect as $2tWuM$useEffect} from "react";
|
|
2
|
+
import {setInteractionModality as $2tWuM$setInteractionModality} from "@react-aria/interactions";
|
|
2
3
|
import {useLayoutEffect as $2tWuM$useLayoutEffect, useEffectEvent as $2tWuM$useEffectEvent} from "@react-aria/utils";
|
|
3
4
|
|
|
4
5
|
/*
|
|
@@ -23,8 +24,9 @@ import {useLayoutEffect as $2tWuM$useLayoutEffect, useEffectEvent as $2tWuM$useE
|
|
|
23
24
|
* governing permissions and limitations under the License.
|
|
24
25
|
*/
|
|
25
26
|
|
|
27
|
+
|
|
26
28
|
function $e93e671b31057976$export$b8473d3665f3a75a(props, state, ref) {
|
|
27
|
-
let { validationBehavior: validationBehavior } = props;
|
|
29
|
+
let { validationBehavior: validationBehavior, focus: focus } = props;
|
|
28
30
|
// This is a useLayoutEffect so that it runs before the useEffect in useFormValidationState, which commits the validation change.
|
|
29
31
|
(0, $2tWuM$useLayoutEffect)(()=>{
|
|
30
32
|
if (validationBehavior === "native" && ref.current) {
|
|
@@ -40,11 +42,21 @@ function $e93e671b31057976$export$b8473d3665f3a75a(props, state, ref) {
|
|
|
40
42
|
state.resetValidation();
|
|
41
43
|
});
|
|
42
44
|
let onInvalid = (0, $2tWuM$useEffectEvent)((e)=>{
|
|
43
|
-
|
|
44
|
-
e.preventDefault();
|
|
45
|
+
var _ref_current;
|
|
45
46
|
// Only commit validation if we are not already displaying one.
|
|
46
47
|
// This avoids clearing server errors that the user didn't actually fix.
|
|
47
48
|
if (!state.displayValidation.isInvalid) state.commitValidation();
|
|
49
|
+
// Auto focus the first invalid input in a form, unless the error already had its default prevented.
|
|
50
|
+
let form = (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.form;
|
|
51
|
+
if (!e.defaultPrevented && form && $e93e671b31057976$var$getFirstInvalidInput(form) === ref.current) {
|
|
52
|
+
var _ref_current1;
|
|
53
|
+
if (focus) focus();
|
|
54
|
+
else (_ref_current1 = ref.current) === null || _ref_current1 === void 0 ? void 0 : _ref_current1.focus();
|
|
55
|
+
// Always show focus ring.
|
|
56
|
+
(0, $2tWuM$setInteractionModality)("keyboard");
|
|
57
|
+
}
|
|
58
|
+
// Prevent default browser error UI from appearing.
|
|
59
|
+
e.preventDefault();
|
|
48
60
|
});
|
|
49
61
|
let onChange = (0, $2tWuM$useEffectEvent)(()=>{
|
|
50
62
|
state.commitValidation();
|
|
@@ -96,6 +108,13 @@ function $e93e671b31057976$var$getNativeValidity(input) {
|
|
|
96
108
|
] : []
|
|
97
109
|
};
|
|
98
110
|
}
|
|
111
|
+
function $e93e671b31057976$var$getFirstInvalidInput(form) {
|
|
112
|
+
for(let i = 0; i < form.elements.length; i++){
|
|
113
|
+
let element = form.elements[i];
|
|
114
|
+
if (!element.validity.valid) return element;
|
|
115
|
+
}
|
|
116
|
+
return null;
|
|
117
|
+
}
|
|
99
118
|
|
|
100
119
|
|
|
101
120
|
|
package/dist/main.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
var $4IpGD$react = require("react");
|
|
2
|
+
var $4IpGD$reactariainteractions = require("@react-aria/interactions");
|
|
2
3
|
var $4IpGD$reactariautils = require("@react-aria/utils");
|
|
3
4
|
|
|
4
5
|
|
|
@@ -29,8 +30,9 @@ $parcel$export(module.exports, "useFormValidation", () => $9da8e3f192aba981$expo
|
|
|
29
30
|
* governing permissions and limitations under the License.
|
|
30
31
|
*/
|
|
31
32
|
|
|
33
|
+
|
|
32
34
|
function $9da8e3f192aba981$export$b8473d3665f3a75a(props, state, ref) {
|
|
33
|
-
let { validationBehavior: validationBehavior } = props;
|
|
35
|
+
let { validationBehavior: validationBehavior, focus: focus } = props;
|
|
34
36
|
// This is a useLayoutEffect so that it runs before the useEffect in useFormValidationState, which commits the validation change.
|
|
35
37
|
(0, $4IpGD$reactariautils.useLayoutEffect)(()=>{
|
|
36
38
|
if (validationBehavior === "native" && ref.current) {
|
|
@@ -46,11 +48,21 @@ function $9da8e3f192aba981$export$b8473d3665f3a75a(props, state, ref) {
|
|
|
46
48
|
state.resetValidation();
|
|
47
49
|
});
|
|
48
50
|
let onInvalid = (0, $4IpGD$reactariautils.useEffectEvent)((e)=>{
|
|
49
|
-
|
|
50
|
-
e.preventDefault();
|
|
51
|
+
var _ref_current;
|
|
51
52
|
// Only commit validation if we are not already displaying one.
|
|
52
53
|
// This avoids clearing server errors that the user didn't actually fix.
|
|
53
54
|
if (!state.displayValidation.isInvalid) state.commitValidation();
|
|
55
|
+
// Auto focus the first invalid input in a form, unless the error already had its default prevented.
|
|
56
|
+
let form = (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.form;
|
|
57
|
+
if (!e.defaultPrevented && form && $9da8e3f192aba981$var$getFirstInvalidInput(form) === ref.current) {
|
|
58
|
+
var _ref_current1;
|
|
59
|
+
if (focus) focus();
|
|
60
|
+
else (_ref_current1 = ref.current) === null || _ref_current1 === void 0 ? void 0 : _ref_current1.focus();
|
|
61
|
+
// Always show focus ring.
|
|
62
|
+
(0, $4IpGD$reactariainteractions.setInteractionModality)("keyboard");
|
|
63
|
+
}
|
|
64
|
+
// Prevent default browser error UI from appearing.
|
|
65
|
+
e.preventDefault();
|
|
54
66
|
});
|
|
55
67
|
let onChange = (0, $4IpGD$reactariautils.useEffectEvent)(()=>{
|
|
56
68
|
state.commitValidation();
|
|
@@ -102,6 +114,13 @@ function $9da8e3f192aba981$var$getNativeValidity(input) {
|
|
|
102
114
|
] : []
|
|
103
115
|
};
|
|
104
116
|
}
|
|
117
|
+
function $9da8e3f192aba981$var$getFirstInvalidInput(form) {
|
|
118
|
+
for(let i = 0; i < form.elements.length; i++){
|
|
119
|
+
let element = form.elements[i];
|
|
120
|
+
if (!element.validity.valid) return element;
|
|
121
|
+
}
|
|
122
|
+
return null;
|
|
123
|
+
}
|
|
105
124
|
|
|
106
125
|
|
|
107
126
|
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-aria/form/src/index.ts","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\nexport {useFormValidation} from './useFormValidation';\n","/*\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, useEffect} from 'react';\nimport {setInteractionModality} from '@react-aria/interactions';\nimport {useEffectEvent, useLayoutEffect} from '@react-aria/utils';\nimport {Validation, ValidationResult} from '@react-types/shared';\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>) {\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) {\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 onReset = useEffectEvent(() => {\n state.resetValidation();\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 && 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 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 };\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":"main.js.map"}
|
package/dist/module.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import {useEffect as $2tWuM$useEffect} from "react";
|
|
2
|
+
import {setInteractionModality as $2tWuM$setInteractionModality} from "@react-aria/interactions";
|
|
2
3
|
import {useLayoutEffect as $2tWuM$useLayoutEffect, useEffectEvent as $2tWuM$useEffectEvent} from "@react-aria/utils";
|
|
3
4
|
|
|
4
5
|
/*
|
|
@@ -23,8 +24,9 @@ import {useLayoutEffect as $2tWuM$useLayoutEffect, useEffectEvent as $2tWuM$useE
|
|
|
23
24
|
* governing permissions and limitations under the License.
|
|
24
25
|
*/
|
|
25
26
|
|
|
27
|
+
|
|
26
28
|
function $e93e671b31057976$export$b8473d3665f3a75a(props, state, ref) {
|
|
27
|
-
let { validationBehavior: validationBehavior } = props;
|
|
29
|
+
let { validationBehavior: validationBehavior, focus: focus } = props;
|
|
28
30
|
// This is a useLayoutEffect so that it runs before the useEffect in useFormValidationState, which commits the validation change.
|
|
29
31
|
(0, $2tWuM$useLayoutEffect)(()=>{
|
|
30
32
|
if (validationBehavior === "native" && ref.current) {
|
|
@@ -40,11 +42,21 @@ function $e93e671b31057976$export$b8473d3665f3a75a(props, state, ref) {
|
|
|
40
42
|
state.resetValidation();
|
|
41
43
|
});
|
|
42
44
|
let onInvalid = (0, $2tWuM$useEffectEvent)((e)=>{
|
|
43
|
-
|
|
44
|
-
e.preventDefault();
|
|
45
|
+
var _ref_current;
|
|
45
46
|
// Only commit validation if we are not already displaying one.
|
|
46
47
|
// This avoids clearing server errors that the user didn't actually fix.
|
|
47
48
|
if (!state.displayValidation.isInvalid) state.commitValidation();
|
|
49
|
+
// Auto focus the first invalid input in a form, unless the error already had its default prevented.
|
|
50
|
+
let form = (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.form;
|
|
51
|
+
if (!e.defaultPrevented && form && $e93e671b31057976$var$getFirstInvalidInput(form) === ref.current) {
|
|
52
|
+
var _ref_current1;
|
|
53
|
+
if (focus) focus();
|
|
54
|
+
else (_ref_current1 = ref.current) === null || _ref_current1 === void 0 ? void 0 : _ref_current1.focus();
|
|
55
|
+
// Always show focus ring.
|
|
56
|
+
(0, $2tWuM$setInteractionModality)("keyboard");
|
|
57
|
+
}
|
|
58
|
+
// Prevent default browser error UI from appearing.
|
|
59
|
+
e.preventDefault();
|
|
48
60
|
});
|
|
49
61
|
let onChange = (0, $2tWuM$useEffectEvent)(()=>{
|
|
50
62
|
state.commitValidation();
|
|
@@ -96,6 +108,13 @@ function $e93e671b31057976$var$getNativeValidity(input) {
|
|
|
96
108
|
] : []
|
|
97
109
|
};
|
|
98
110
|
}
|
|
111
|
+
function $e93e671b31057976$var$getFirstInvalidInput(form) {
|
|
112
|
+
for(let i = 0; i < form.elements.length; i++){
|
|
113
|
+
let element = form.elements[i];
|
|
114
|
+
if (!element.validity.valid) return element;
|
|
115
|
+
}
|
|
116
|
+
return null;
|
|
117
|
+
}
|
|
99
118
|
|
|
100
119
|
|
|
101
120
|
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-aria/form/src/index.ts","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\nexport {useFormValidation} from './useFormValidation';\n","/*\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, useEffect} from 'react';\nimport {setInteractionModality} from '@react-aria/interactions';\nimport {useEffectEvent, useLayoutEffect} from '@react-aria/utils';\nimport {Validation, ValidationResult} from '@react-types/shared';\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>) {\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) {\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 onReset = useEffectEvent(() => {\n state.resetValidation();\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 && 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 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 };\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":"module.js.map"}
|
package/dist/types.d.ts
CHANGED
|
@@ -2,6 +2,9 @@ import { FormValidationState } from "@react-stately/form";
|
|
|
2
2
|
import { RefObject } from "react";
|
|
3
3
|
import { Validation } from "@react-types/shared";
|
|
4
4
|
type ValidatableElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
|
|
5
|
-
|
|
5
|
+
interface FormValidationProps<T> extends Validation<T> {
|
|
6
|
+
focus?: () => void;
|
|
7
|
+
}
|
|
8
|
+
export function useFormValidation<T>(props: FormValidationProps<T>, state: FormValidationState, ref: RefObject<ValidatableElement>): void;
|
|
6
9
|
|
|
7
10
|
//# sourceMappingURL=types.d.ts.map
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;
|
|
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,CAAC,QAqEjI","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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-aria/form",
|
|
3
|
-
"version": "3.0.0-nightly.
|
|
3
|
+
"version": "3.0.0-nightly.4266+0b541f488",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -22,9 +22,10 @@
|
|
|
22
22
|
"url": "https://github.com/adobe/react-spectrum"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@react-aria/
|
|
26
|
-
"@react-
|
|
27
|
-
"@react-
|
|
25
|
+
"@react-aria/interactions": "3.0.0-nightly.2555+0b541f488",
|
|
26
|
+
"@react-aria/utils": "3.0.0-nightly.2555+0b541f488",
|
|
27
|
+
"@react-stately/form": "3.0.0-nightly.4266+0b541f488",
|
|
28
|
+
"@react-types/shared": "3.0.0-nightly.2555+0b541f488",
|
|
28
29
|
"@swc/helpers": "^0.5.0"
|
|
29
30
|
},
|
|
30
31
|
"peerDependencies": {
|
|
@@ -33,5 +34,5 @@
|
|
|
33
34
|
"publishConfig": {
|
|
34
35
|
"access": "public"
|
|
35
36
|
},
|
|
36
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "0b541f48848eb43f74ae57e8b21dc4455d95040b"
|
|
37
38
|
}
|
package/src/useFormValidation.ts
CHANGED
|
@@ -12,13 +12,18 @@
|
|
|
12
12
|
|
|
13
13
|
import {FormValidationState} from '@react-stately/form';
|
|
14
14
|
import {RefObject, useEffect} from 'react';
|
|
15
|
+
import {setInteractionModality} from '@react-aria/interactions';
|
|
15
16
|
import {useEffectEvent, useLayoutEffect} from '@react-aria/utils';
|
|
16
17
|
import {Validation, ValidationResult} from '@react-types/shared';
|
|
17
18
|
|
|
18
19
|
type ValidatableElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
|
|
19
20
|
|
|
20
|
-
|
|
21
|
-
|
|
21
|
+
interface FormValidationProps<T> extends Validation<T> {
|
|
22
|
+
focus?: () => void
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
export function useFormValidation<T>(props: FormValidationProps<T>, state: FormValidationState, ref: RefObject<ValidatableElement>) {
|
|
26
|
+
let {validationBehavior, focus} = props;
|
|
22
27
|
|
|
23
28
|
// This is a useLayoutEffect so that it runs before the useEffect in useFormValidationState, which commits the validation change.
|
|
24
29
|
useLayoutEffect(() => {
|
|
@@ -43,14 +48,27 @@ export function useFormValidation<T>(props: Validation<T>, state: FormValidation
|
|
|
43
48
|
});
|
|
44
49
|
|
|
45
50
|
let onInvalid = useEffectEvent((e: Event) => {
|
|
46
|
-
// Prevent default browser error UI from appearing.
|
|
47
|
-
e.preventDefault();
|
|
48
|
-
|
|
49
51
|
// Only commit validation if we are not already displaying one.
|
|
50
52
|
// This avoids clearing server errors that the user didn't actually fix.
|
|
51
53
|
if (!state.displayValidation.isInvalid) {
|
|
52
54
|
state.commitValidation();
|
|
53
55
|
}
|
|
56
|
+
|
|
57
|
+
// Auto focus the first invalid input in a form, unless the error already had its default prevented.
|
|
58
|
+
let form = ref.current?.form;
|
|
59
|
+
if (!e.defaultPrevented && form && getFirstInvalidInput(form) === ref.current) {
|
|
60
|
+
if (focus) {
|
|
61
|
+
focus();
|
|
62
|
+
} else {
|
|
63
|
+
ref.current?.focus();
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
// Always show focus ring.
|
|
67
|
+
setInteractionModality('keyboard');
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
// Prevent default browser error UI from appearing.
|
|
71
|
+
e.preventDefault();
|
|
54
72
|
});
|
|
55
73
|
|
|
56
74
|
let onChange = useEffectEvent(() => {
|
|
@@ -101,3 +119,14 @@ function getNativeValidity(input: ValidatableElement): ValidationResult {
|
|
|
101
119
|
validationErrors: input.validationMessage ? [input.validationMessage] : []
|
|
102
120
|
};
|
|
103
121
|
}
|
|
122
|
+
|
|
123
|
+
function getFirstInvalidInput(form: HTMLFormElement): ValidatableElement | null {
|
|
124
|
+
for (let i = 0; i < form.elements.length; i++) {
|
|
125
|
+
let element = form.elements[i] as ValidatableElement;
|
|
126
|
+
if (!element.validity.valid) {
|
|
127
|
+
return element;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
return null;
|
|
132
|
+
}
|