@react-aria/form 3.0.4-nightly.4555 → 3.0.4-nightly.4558
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 +1 -107
- package/dist/main.js +2 -108
- package/dist/main.js.map +1 -1
- package/dist/module.js +1 -107
- package/dist/module.js.map +1 -1
- package/dist/useFormValidation.main.js +116 -0
- package/dist/useFormValidation.main.js.map +1 -0
- package/dist/useFormValidation.mjs +111 -0
- package/dist/useFormValidation.module.js +111 -0
- package/dist/useFormValidation.module.js.map +1 -0
- package/package.json +6 -6
package/dist/import.mjs
CHANGED
|
@@ -1,18 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {setInteractionModality as $2tWuM$setInteractionModality} from "@react-aria/interactions";
|
|
3
|
-
import {useLayoutEffect as $2tWuM$useLayoutEffect, useEffectEvent as $2tWuM$useEffectEvent} from "@react-aria/utils";
|
|
1
|
+
import {useFormValidation as $e93e671b31057976$export$b8473d3665f3a75a} from "./useFormValidation.mjs";
|
|
4
2
|
|
|
5
3
|
/*
|
|
6
|
-
* Copyright 2023 Adobe. All rights reserved.
|
|
7
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
8
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
9
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
10
|
-
*
|
|
11
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
12
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
13
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
14
|
-
* governing permissions and limitations under the License.
|
|
15
|
-
*/ /*
|
|
16
4
|
* Copyright 2023 Adobe. All rights reserved.
|
|
17
5
|
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
18
6
|
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
@@ -25,99 +13,5 @@ import {useLayoutEffect as $2tWuM$useLayoutEffect, useEffectEvent as $2tWuM$useE
|
|
|
25
13
|
*/
|
|
26
14
|
|
|
27
15
|
|
|
28
|
-
function $e93e671b31057976$export$b8473d3665f3a75a(props, state, ref) {
|
|
29
|
-
let { validationBehavior: validationBehavior, focus: focus } = props;
|
|
30
|
-
// This is a useLayoutEffect so that it runs before the useEffect in useFormValidationState, which commits the validation change.
|
|
31
|
-
(0, $2tWuM$useLayoutEffect)(()=>{
|
|
32
|
-
if (validationBehavior === "native" && (ref === null || ref === void 0 ? void 0 : ref.current)) {
|
|
33
|
-
let errorMessage = state.realtimeValidation.isInvalid ? state.realtimeValidation.validationErrors.join(" ") || "Invalid value." : "";
|
|
34
|
-
ref.current.setCustomValidity(errorMessage);
|
|
35
|
-
// Prevent default tooltip for validation message.
|
|
36
|
-
// https://bugzilla.mozilla.org/show_bug.cgi?id=605277
|
|
37
|
-
if (!ref.current.hasAttribute("title")) ref.current.title = "";
|
|
38
|
-
if (!state.realtimeValidation.isInvalid) state.updateValidation($e93e671b31057976$var$getNativeValidity(ref.current));
|
|
39
|
-
}
|
|
40
|
-
});
|
|
41
|
-
let onReset = (0, $2tWuM$useEffectEvent)(()=>{
|
|
42
|
-
state.resetValidation();
|
|
43
|
-
});
|
|
44
|
-
let onInvalid = (0, $2tWuM$useEffectEvent)((e)=>{
|
|
45
|
-
var _ref_current;
|
|
46
|
-
// Only commit validation if we are not already displaying one.
|
|
47
|
-
// This avoids clearing server errors that the user didn't actually fix.
|
|
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 === null || ref === void 0 ? void 0 : (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.form;
|
|
51
|
-
if (!e.defaultPrevented && ref && 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();
|
|
60
|
-
});
|
|
61
|
-
let onChange = (0, $2tWuM$useEffectEvent)(()=>{
|
|
62
|
-
state.commitValidation();
|
|
63
|
-
});
|
|
64
|
-
(0, $2tWuM$useEffect)(()=>{
|
|
65
|
-
let input = ref === null || ref === void 0 ? void 0 : ref.current;
|
|
66
|
-
if (!input) return;
|
|
67
|
-
let form = input.form;
|
|
68
|
-
input.addEventListener("invalid", onInvalid);
|
|
69
|
-
input.addEventListener("change", onChange);
|
|
70
|
-
form === null || form === void 0 ? void 0 : form.addEventListener("reset", onReset);
|
|
71
|
-
return ()=>{
|
|
72
|
-
input.removeEventListener("invalid", onInvalid);
|
|
73
|
-
input.removeEventListener("change", onChange);
|
|
74
|
-
form === null || form === void 0 ? void 0 : form.removeEventListener("reset", onReset);
|
|
75
|
-
};
|
|
76
|
-
}, [
|
|
77
|
-
ref,
|
|
78
|
-
onInvalid,
|
|
79
|
-
onChange,
|
|
80
|
-
onReset,
|
|
81
|
-
validationBehavior
|
|
82
|
-
]);
|
|
83
|
-
}
|
|
84
|
-
function $e93e671b31057976$var$getValidity(input) {
|
|
85
|
-
// The native ValidityState object is live, meaning each property is a getter that returns the current state.
|
|
86
|
-
// We need to create a snapshot of the validity state at the time this function is called to avoid unpredictable React renders.
|
|
87
|
-
let validity = input.validity;
|
|
88
|
-
return {
|
|
89
|
-
badInput: validity.badInput,
|
|
90
|
-
customError: validity.customError,
|
|
91
|
-
patternMismatch: validity.patternMismatch,
|
|
92
|
-
rangeOverflow: validity.rangeOverflow,
|
|
93
|
-
rangeUnderflow: validity.rangeUnderflow,
|
|
94
|
-
stepMismatch: validity.stepMismatch,
|
|
95
|
-
tooLong: validity.tooLong,
|
|
96
|
-
tooShort: validity.tooShort,
|
|
97
|
-
typeMismatch: validity.typeMismatch,
|
|
98
|
-
valueMissing: validity.valueMissing,
|
|
99
|
-
valid: validity.valid
|
|
100
|
-
};
|
|
101
|
-
}
|
|
102
|
-
function $e93e671b31057976$var$getNativeValidity(input) {
|
|
103
|
-
return {
|
|
104
|
-
isInvalid: !input.validity.valid,
|
|
105
|
-
validationDetails: $e93e671b31057976$var$getValidity(input),
|
|
106
|
-
validationErrors: input.validationMessage ? [
|
|
107
|
-
input.validationMessage
|
|
108
|
-
] : []
|
|
109
|
-
};
|
|
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
|
-
}
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
16
|
export {$e93e671b31057976$export$b8473d3665f3a75a as useFormValidation};
|
|
123
17
|
//# sourceMappingURL=module.js.map
|
package/dist/main.js
CHANGED
|
@@ -1,24 +1,12 @@
|
|
|
1
|
-
var $
|
|
2
|
-
var $4IpGD$reactariainteractions = require("@react-aria/interactions");
|
|
3
|
-
var $4IpGD$reactariautils = require("@react-aria/utils");
|
|
1
|
+
var $9da8e3f192aba981$exports = require("./useFormValidation.main.js");
|
|
4
2
|
|
|
5
3
|
|
|
6
4
|
function $parcel$export(e, n, v, s) {
|
|
7
5
|
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
8
6
|
}
|
|
9
7
|
|
|
10
|
-
$parcel$export(module.exports, "useFormValidation", () => $9da8e3f192aba981$
|
|
8
|
+
$parcel$export(module.exports, "useFormValidation", () => $9da8e3f192aba981$exports.useFormValidation);
|
|
11
9
|
/*
|
|
12
|
-
* Copyright 2023 Adobe. All rights reserved.
|
|
13
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
14
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
15
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
16
|
-
*
|
|
17
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
18
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
19
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
20
|
-
* governing permissions and limitations under the License.
|
|
21
|
-
*/ /*
|
|
22
10
|
* Copyright 2023 Adobe. All rights reserved.
|
|
23
11
|
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
24
12
|
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
@@ -31,98 +19,4 @@ $parcel$export(module.exports, "useFormValidation", () => $9da8e3f192aba981$expo
|
|
|
31
19
|
*/
|
|
32
20
|
|
|
33
21
|
|
|
34
|
-
function $9da8e3f192aba981$export$b8473d3665f3a75a(props, state, ref) {
|
|
35
|
-
let { validationBehavior: validationBehavior, focus: focus } = props;
|
|
36
|
-
// This is a useLayoutEffect so that it runs before the useEffect in useFormValidationState, which commits the validation change.
|
|
37
|
-
(0, $4IpGD$reactariautils.useLayoutEffect)(()=>{
|
|
38
|
-
if (validationBehavior === "native" && (ref === null || ref === void 0 ? void 0 : ref.current)) {
|
|
39
|
-
let errorMessage = state.realtimeValidation.isInvalid ? state.realtimeValidation.validationErrors.join(" ") || "Invalid value." : "";
|
|
40
|
-
ref.current.setCustomValidity(errorMessage);
|
|
41
|
-
// Prevent default tooltip for validation message.
|
|
42
|
-
// https://bugzilla.mozilla.org/show_bug.cgi?id=605277
|
|
43
|
-
if (!ref.current.hasAttribute("title")) ref.current.title = "";
|
|
44
|
-
if (!state.realtimeValidation.isInvalid) state.updateValidation($9da8e3f192aba981$var$getNativeValidity(ref.current));
|
|
45
|
-
}
|
|
46
|
-
});
|
|
47
|
-
let onReset = (0, $4IpGD$reactariautils.useEffectEvent)(()=>{
|
|
48
|
-
state.resetValidation();
|
|
49
|
-
});
|
|
50
|
-
let onInvalid = (0, $4IpGD$reactariautils.useEffectEvent)((e)=>{
|
|
51
|
-
var _ref_current;
|
|
52
|
-
// Only commit validation if we are not already displaying one.
|
|
53
|
-
// This avoids clearing server errors that the user didn't actually fix.
|
|
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 === null || ref === void 0 ? void 0 : (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.form;
|
|
57
|
-
if (!e.defaultPrevented && ref && 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();
|
|
66
|
-
});
|
|
67
|
-
let onChange = (0, $4IpGD$reactariautils.useEffectEvent)(()=>{
|
|
68
|
-
state.commitValidation();
|
|
69
|
-
});
|
|
70
|
-
(0, $4IpGD$react.useEffect)(()=>{
|
|
71
|
-
let input = ref === null || ref === void 0 ? void 0 : ref.current;
|
|
72
|
-
if (!input) return;
|
|
73
|
-
let form = input.form;
|
|
74
|
-
input.addEventListener("invalid", onInvalid);
|
|
75
|
-
input.addEventListener("change", onChange);
|
|
76
|
-
form === null || form === void 0 ? void 0 : form.addEventListener("reset", onReset);
|
|
77
|
-
return ()=>{
|
|
78
|
-
input.removeEventListener("invalid", onInvalid);
|
|
79
|
-
input.removeEventListener("change", onChange);
|
|
80
|
-
form === null || form === void 0 ? void 0 : form.removeEventListener("reset", onReset);
|
|
81
|
-
};
|
|
82
|
-
}, [
|
|
83
|
-
ref,
|
|
84
|
-
onInvalid,
|
|
85
|
-
onChange,
|
|
86
|
-
onReset,
|
|
87
|
-
validationBehavior
|
|
88
|
-
]);
|
|
89
|
-
}
|
|
90
|
-
function $9da8e3f192aba981$var$getValidity(input) {
|
|
91
|
-
// The native ValidityState object is live, meaning each property is a getter that returns the current state.
|
|
92
|
-
// We need to create a snapshot of the validity state at the time this function is called to avoid unpredictable React renders.
|
|
93
|
-
let validity = input.validity;
|
|
94
|
-
return {
|
|
95
|
-
badInput: validity.badInput,
|
|
96
|
-
customError: validity.customError,
|
|
97
|
-
patternMismatch: validity.patternMismatch,
|
|
98
|
-
rangeOverflow: validity.rangeOverflow,
|
|
99
|
-
rangeUnderflow: validity.rangeUnderflow,
|
|
100
|
-
stepMismatch: validity.stepMismatch,
|
|
101
|
-
tooLong: validity.tooLong,
|
|
102
|
-
tooShort: validity.tooShort,
|
|
103
|
-
typeMismatch: validity.typeMismatch,
|
|
104
|
-
valueMissing: validity.valueMissing,
|
|
105
|
-
valid: validity.valid
|
|
106
|
-
};
|
|
107
|
-
}
|
|
108
|
-
function $9da8e3f192aba981$var$getNativeValidity(input) {
|
|
109
|
-
return {
|
|
110
|
-
isInvalid: !input.validity.valid,
|
|
111
|
-
validationDetails: $9da8e3f192aba981$var$getValidity(input),
|
|
112
|
-
validationErrors: input.validationMessage ? [
|
|
113
|
-
input.validationMessage
|
|
114
|
-
] : []
|
|
115
|
-
};
|
|
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
|
-
}
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
22
|
//# sourceMappingURL=main.js.map
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC","sources":["packages/@react-aria/form/src/index.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"],"names":[],"version":3,"file":"main.js.map"}
|
package/dist/module.js
CHANGED
|
@@ -1,18 +1,6 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {setInteractionModality as $2tWuM$setInteractionModality} from "@react-aria/interactions";
|
|
3
|
-
import {useLayoutEffect as $2tWuM$useLayoutEffect, useEffectEvent as $2tWuM$useEffectEvent} from "@react-aria/utils";
|
|
1
|
+
import {useFormValidation as $e93e671b31057976$export$b8473d3665f3a75a} from "./useFormValidation.module.js";
|
|
4
2
|
|
|
5
3
|
/*
|
|
6
|
-
* Copyright 2023 Adobe. All rights reserved.
|
|
7
|
-
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
8
|
-
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
9
|
-
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
10
|
-
*
|
|
11
|
-
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
12
|
-
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
13
|
-
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
14
|
-
* governing permissions and limitations under the License.
|
|
15
|
-
*/ /*
|
|
16
4
|
* Copyright 2023 Adobe. All rights reserved.
|
|
17
5
|
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
18
6
|
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
@@ -25,99 +13,5 @@ import {useLayoutEffect as $2tWuM$useLayoutEffect, useEffectEvent as $2tWuM$useE
|
|
|
25
13
|
*/
|
|
26
14
|
|
|
27
15
|
|
|
28
|
-
function $e93e671b31057976$export$b8473d3665f3a75a(props, state, ref) {
|
|
29
|
-
let { validationBehavior: validationBehavior, focus: focus } = props;
|
|
30
|
-
// This is a useLayoutEffect so that it runs before the useEffect in useFormValidationState, which commits the validation change.
|
|
31
|
-
(0, $2tWuM$useLayoutEffect)(()=>{
|
|
32
|
-
if (validationBehavior === "native" && (ref === null || ref === void 0 ? void 0 : ref.current)) {
|
|
33
|
-
let errorMessage = state.realtimeValidation.isInvalid ? state.realtimeValidation.validationErrors.join(" ") || "Invalid value." : "";
|
|
34
|
-
ref.current.setCustomValidity(errorMessage);
|
|
35
|
-
// Prevent default tooltip for validation message.
|
|
36
|
-
// https://bugzilla.mozilla.org/show_bug.cgi?id=605277
|
|
37
|
-
if (!ref.current.hasAttribute("title")) ref.current.title = "";
|
|
38
|
-
if (!state.realtimeValidation.isInvalid) state.updateValidation($e93e671b31057976$var$getNativeValidity(ref.current));
|
|
39
|
-
}
|
|
40
|
-
});
|
|
41
|
-
let onReset = (0, $2tWuM$useEffectEvent)(()=>{
|
|
42
|
-
state.resetValidation();
|
|
43
|
-
});
|
|
44
|
-
let onInvalid = (0, $2tWuM$useEffectEvent)((e)=>{
|
|
45
|
-
var _ref_current;
|
|
46
|
-
// Only commit validation if we are not already displaying one.
|
|
47
|
-
// This avoids clearing server errors that the user didn't actually fix.
|
|
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 === null || ref === void 0 ? void 0 : (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.form;
|
|
51
|
-
if (!e.defaultPrevented && ref && 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();
|
|
60
|
-
});
|
|
61
|
-
let onChange = (0, $2tWuM$useEffectEvent)(()=>{
|
|
62
|
-
state.commitValidation();
|
|
63
|
-
});
|
|
64
|
-
(0, $2tWuM$useEffect)(()=>{
|
|
65
|
-
let input = ref === null || ref === void 0 ? void 0 : ref.current;
|
|
66
|
-
if (!input) return;
|
|
67
|
-
let form = input.form;
|
|
68
|
-
input.addEventListener("invalid", onInvalid);
|
|
69
|
-
input.addEventListener("change", onChange);
|
|
70
|
-
form === null || form === void 0 ? void 0 : form.addEventListener("reset", onReset);
|
|
71
|
-
return ()=>{
|
|
72
|
-
input.removeEventListener("invalid", onInvalid);
|
|
73
|
-
input.removeEventListener("change", onChange);
|
|
74
|
-
form === null || form === void 0 ? void 0 : form.removeEventListener("reset", onReset);
|
|
75
|
-
};
|
|
76
|
-
}, [
|
|
77
|
-
ref,
|
|
78
|
-
onInvalid,
|
|
79
|
-
onChange,
|
|
80
|
-
onReset,
|
|
81
|
-
validationBehavior
|
|
82
|
-
]);
|
|
83
|
-
}
|
|
84
|
-
function $e93e671b31057976$var$getValidity(input) {
|
|
85
|
-
// The native ValidityState object is live, meaning each property is a getter that returns the current state.
|
|
86
|
-
// We need to create a snapshot of the validity state at the time this function is called to avoid unpredictable React renders.
|
|
87
|
-
let validity = input.validity;
|
|
88
|
-
return {
|
|
89
|
-
badInput: validity.badInput,
|
|
90
|
-
customError: validity.customError,
|
|
91
|
-
patternMismatch: validity.patternMismatch,
|
|
92
|
-
rangeOverflow: validity.rangeOverflow,
|
|
93
|
-
rangeUnderflow: validity.rangeUnderflow,
|
|
94
|
-
stepMismatch: validity.stepMismatch,
|
|
95
|
-
tooLong: validity.tooLong,
|
|
96
|
-
tooShort: validity.tooShort,
|
|
97
|
-
typeMismatch: validity.typeMismatch,
|
|
98
|
-
valueMissing: validity.valueMissing,
|
|
99
|
-
valid: validity.valid
|
|
100
|
-
};
|
|
101
|
-
}
|
|
102
|
-
function $e93e671b31057976$var$getNativeValidity(input) {
|
|
103
|
-
return {
|
|
104
|
-
isInvalid: !input.validity.valid,
|
|
105
|
-
validationDetails: $e93e671b31057976$var$getValidity(input),
|
|
106
|
-
validationErrors: input.validationMessage ? [
|
|
107
|
-
input.validationMessage
|
|
108
|
-
] : []
|
|
109
|
-
};
|
|
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
|
-
}
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
16
|
export {$e93e671b31057976$export$b8473d3665f3a75a as useFormValidation};
|
|
123
17
|
//# sourceMappingURL=module.js.map
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":";;AAAA;;;;;;;;;;CAUC","sources":["packages/@react-aria/form/src/index.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"],"names":[],"version":3,"file":"module.js.map"}
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
var $j3sn1$react = require("react");
|
|
2
|
+
var $j3sn1$reactariainteractions = require("@react-aria/interactions");
|
|
3
|
+
var $j3sn1$reactariautils = require("@react-aria/utils");
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
function $parcel$export(e, n, v, s) {
|
|
7
|
+
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
$parcel$export(module.exports, "useFormValidation", () => $9da8e3f192aba981$export$b8473d3665f3a75a);
|
|
11
|
+
/*
|
|
12
|
+
* Copyright 2023 Adobe. All rights reserved.
|
|
13
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
14
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
15
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
16
|
+
*
|
|
17
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
18
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
19
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
20
|
+
* governing permissions and limitations under the License.
|
|
21
|
+
*/
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
function $9da8e3f192aba981$export$b8473d3665f3a75a(props, state, ref) {
|
|
25
|
+
let { validationBehavior: validationBehavior, focus: focus } = props;
|
|
26
|
+
// This is a useLayoutEffect so that it runs before the useEffect in useFormValidationState, which commits the validation change.
|
|
27
|
+
(0, $j3sn1$reactariautils.useLayoutEffect)(()=>{
|
|
28
|
+
if (validationBehavior === "native" && (ref === null || ref === void 0 ? void 0 : ref.current)) {
|
|
29
|
+
let errorMessage = state.realtimeValidation.isInvalid ? state.realtimeValidation.validationErrors.join(" ") || "Invalid value." : "";
|
|
30
|
+
ref.current.setCustomValidity(errorMessage);
|
|
31
|
+
// Prevent default tooltip for validation message.
|
|
32
|
+
// https://bugzilla.mozilla.org/show_bug.cgi?id=605277
|
|
33
|
+
if (!ref.current.hasAttribute("title")) ref.current.title = "";
|
|
34
|
+
if (!state.realtimeValidation.isInvalid) state.updateValidation($9da8e3f192aba981$var$getNativeValidity(ref.current));
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
let onReset = (0, $j3sn1$reactariautils.useEffectEvent)(()=>{
|
|
38
|
+
state.resetValidation();
|
|
39
|
+
});
|
|
40
|
+
let onInvalid = (0, $j3sn1$reactariautils.useEffectEvent)((e)=>{
|
|
41
|
+
var _ref_current;
|
|
42
|
+
// Only commit validation if we are not already displaying one.
|
|
43
|
+
// This avoids clearing server errors that the user didn't actually fix.
|
|
44
|
+
if (!state.displayValidation.isInvalid) state.commitValidation();
|
|
45
|
+
// Auto focus the first invalid input in a form, unless the error already had its default prevented.
|
|
46
|
+
let form = ref === null || ref === void 0 ? void 0 : (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.form;
|
|
47
|
+
if (!e.defaultPrevented && ref && form && $9da8e3f192aba981$var$getFirstInvalidInput(form) === ref.current) {
|
|
48
|
+
var _ref_current1;
|
|
49
|
+
if (focus) focus();
|
|
50
|
+
else (_ref_current1 = ref.current) === null || _ref_current1 === void 0 ? void 0 : _ref_current1.focus();
|
|
51
|
+
// Always show focus ring.
|
|
52
|
+
(0, $j3sn1$reactariainteractions.setInteractionModality)("keyboard");
|
|
53
|
+
}
|
|
54
|
+
// Prevent default browser error UI from appearing.
|
|
55
|
+
e.preventDefault();
|
|
56
|
+
});
|
|
57
|
+
let onChange = (0, $j3sn1$reactariautils.useEffectEvent)(()=>{
|
|
58
|
+
state.commitValidation();
|
|
59
|
+
});
|
|
60
|
+
(0, $j3sn1$react.useEffect)(()=>{
|
|
61
|
+
let input = ref === null || ref === void 0 ? void 0 : ref.current;
|
|
62
|
+
if (!input) return;
|
|
63
|
+
let form = input.form;
|
|
64
|
+
input.addEventListener("invalid", onInvalid);
|
|
65
|
+
input.addEventListener("change", onChange);
|
|
66
|
+
form === null || form === void 0 ? void 0 : form.addEventListener("reset", onReset);
|
|
67
|
+
return ()=>{
|
|
68
|
+
input.removeEventListener("invalid", onInvalid);
|
|
69
|
+
input.removeEventListener("change", onChange);
|
|
70
|
+
form === null || form === void 0 ? void 0 : form.removeEventListener("reset", onReset);
|
|
71
|
+
};
|
|
72
|
+
}, [
|
|
73
|
+
ref,
|
|
74
|
+
onInvalid,
|
|
75
|
+
onChange,
|
|
76
|
+
onReset,
|
|
77
|
+
validationBehavior
|
|
78
|
+
]);
|
|
79
|
+
}
|
|
80
|
+
function $9da8e3f192aba981$var$getValidity(input) {
|
|
81
|
+
// The native ValidityState object is live, meaning each property is a getter that returns the current state.
|
|
82
|
+
// We need to create a snapshot of the validity state at the time this function is called to avoid unpredictable React renders.
|
|
83
|
+
let validity = input.validity;
|
|
84
|
+
return {
|
|
85
|
+
badInput: validity.badInput,
|
|
86
|
+
customError: validity.customError,
|
|
87
|
+
patternMismatch: validity.patternMismatch,
|
|
88
|
+
rangeOverflow: validity.rangeOverflow,
|
|
89
|
+
rangeUnderflow: validity.rangeUnderflow,
|
|
90
|
+
stepMismatch: validity.stepMismatch,
|
|
91
|
+
tooLong: validity.tooLong,
|
|
92
|
+
tooShort: validity.tooShort,
|
|
93
|
+
typeMismatch: validity.typeMismatch,
|
|
94
|
+
valueMissing: validity.valueMissing,
|
|
95
|
+
valid: validity.valid
|
|
96
|
+
};
|
|
97
|
+
}
|
|
98
|
+
function $9da8e3f192aba981$var$getNativeValidity(input) {
|
|
99
|
+
return {
|
|
100
|
+
isInvalid: !input.validity.valid,
|
|
101
|
+
validationDetails: $9da8e3f192aba981$var$getValidity(input),
|
|
102
|
+
validationErrors: input.validationMessage ? [
|
|
103
|
+
input.validationMessage
|
|
104
|
+
] : []
|
|
105
|
+
};
|
|
106
|
+
}
|
|
107
|
+
function $9da8e3f192aba981$var$getFirstInvalidInput(form) {
|
|
108
|
+
for(let i = 0; i < form.elements.length; i++){
|
|
109
|
+
let element = form.elements[i];
|
|
110
|
+
if (!element.validity.valid) return element;
|
|
111
|
+
}
|
|
112
|
+
return null;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
//# sourceMappingURL=useFormValidation.main.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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, 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> | undefined) {\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 && 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 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":"useFormValidation.main.js.map"}
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
import {useEffect as $9Gacy$useEffect} from "react";
|
|
2
|
+
import {setInteractionModality as $9Gacy$setInteractionModality} from "@react-aria/interactions";
|
|
3
|
+
import {useLayoutEffect as $9Gacy$useLayoutEffect, useEffectEvent as $9Gacy$useEffectEvent} from "@react-aria/utils";
|
|
4
|
+
|
|
5
|
+
/*
|
|
6
|
+
* Copyright 2023 Adobe. All rights reserved.
|
|
7
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
8
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
9
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
10
|
+
*
|
|
11
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
12
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
13
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
14
|
+
* governing permissions and limitations under the License.
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
function $e93e671b31057976$export$b8473d3665f3a75a(props, state, ref) {
|
|
19
|
+
let { validationBehavior: validationBehavior, focus: focus } = props;
|
|
20
|
+
// This is a useLayoutEffect so that it runs before the useEffect in useFormValidationState, which commits the validation change.
|
|
21
|
+
(0, $9Gacy$useLayoutEffect)(()=>{
|
|
22
|
+
if (validationBehavior === "native" && (ref === null || ref === void 0 ? void 0 : ref.current)) {
|
|
23
|
+
let errorMessage = state.realtimeValidation.isInvalid ? state.realtimeValidation.validationErrors.join(" ") || "Invalid value." : "";
|
|
24
|
+
ref.current.setCustomValidity(errorMessage);
|
|
25
|
+
// Prevent default tooltip for validation message.
|
|
26
|
+
// https://bugzilla.mozilla.org/show_bug.cgi?id=605277
|
|
27
|
+
if (!ref.current.hasAttribute("title")) ref.current.title = "";
|
|
28
|
+
if (!state.realtimeValidation.isInvalid) state.updateValidation($e93e671b31057976$var$getNativeValidity(ref.current));
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
let onReset = (0, $9Gacy$useEffectEvent)(()=>{
|
|
32
|
+
state.resetValidation();
|
|
33
|
+
});
|
|
34
|
+
let onInvalid = (0, $9Gacy$useEffectEvent)((e)=>{
|
|
35
|
+
var _ref_current;
|
|
36
|
+
// Only commit validation if we are not already displaying one.
|
|
37
|
+
// This avoids clearing server errors that the user didn't actually fix.
|
|
38
|
+
if (!state.displayValidation.isInvalid) state.commitValidation();
|
|
39
|
+
// Auto focus the first invalid input in a form, unless the error already had its default prevented.
|
|
40
|
+
let form = ref === null || ref === void 0 ? void 0 : (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.form;
|
|
41
|
+
if (!e.defaultPrevented && ref && form && $e93e671b31057976$var$getFirstInvalidInput(form) === ref.current) {
|
|
42
|
+
var _ref_current1;
|
|
43
|
+
if (focus) focus();
|
|
44
|
+
else (_ref_current1 = ref.current) === null || _ref_current1 === void 0 ? void 0 : _ref_current1.focus();
|
|
45
|
+
// Always show focus ring.
|
|
46
|
+
(0, $9Gacy$setInteractionModality)("keyboard");
|
|
47
|
+
}
|
|
48
|
+
// Prevent default browser error UI from appearing.
|
|
49
|
+
e.preventDefault();
|
|
50
|
+
});
|
|
51
|
+
let onChange = (0, $9Gacy$useEffectEvent)(()=>{
|
|
52
|
+
state.commitValidation();
|
|
53
|
+
});
|
|
54
|
+
(0, $9Gacy$useEffect)(()=>{
|
|
55
|
+
let input = ref === null || ref === void 0 ? void 0 : ref.current;
|
|
56
|
+
if (!input) return;
|
|
57
|
+
let form = input.form;
|
|
58
|
+
input.addEventListener("invalid", onInvalid);
|
|
59
|
+
input.addEventListener("change", onChange);
|
|
60
|
+
form === null || form === void 0 ? void 0 : form.addEventListener("reset", onReset);
|
|
61
|
+
return ()=>{
|
|
62
|
+
input.removeEventListener("invalid", onInvalid);
|
|
63
|
+
input.removeEventListener("change", onChange);
|
|
64
|
+
form === null || form === void 0 ? void 0 : form.removeEventListener("reset", onReset);
|
|
65
|
+
};
|
|
66
|
+
}, [
|
|
67
|
+
ref,
|
|
68
|
+
onInvalid,
|
|
69
|
+
onChange,
|
|
70
|
+
onReset,
|
|
71
|
+
validationBehavior
|
|
72
|
+
]);
|
|
73
|
+
}
|
|
74
|
+
function $e93e671b31057976$var$getValidity(input) {
|
|
75
|
+
// The native ValidityState object is live, meaning each property is a getter that returns the current state.
|
|
76
|
+
// We need to create a snapshot of the validity state at the time this function is called to avoid unpredictable React renders.
|
|
77
|
+
let validity = input.validity;
|
|
78
|
+
return {
|
|
79
|
+
badInput: validity.badInput,
|
|
80
|
+
customError: validity.customError,
|
|
81
|
+
patternMismatch: validity.patternMismatch,
|
|
82
|
+
rangeOverflow: validity.rangeOverflow,
|
|
83
|
+
rangeUnderflow: validity.rangeUnderflow,
|
|
84
|
+
stepMismatch: validity.stepMismatch,
|
|
85
|
+
tooLong: validity.tooLong,
|
|
86
|
+
tooShort: validity.tooShort,
|
|
87
|
+
typeMismatch: validity.typeMismatch,
|
|
88
|
+
valueMissing: validity.valueMissing,
|
|
89
|
+
valid: validity.valid
|
|
90
|
+
};
|
|
91
|
+
}
|
|
92
|
+
function $e93e671b31057976$var$getNativeValidity(input) {
|
|
93
|
+
return {
|
|
94
|
+
isInvalid: !input.validity.valid,
|
|
95
|
+
validationDetails: $e93e671b31057976$var$getValidity(input),
|
|
96
|
+
validationErrors: input.validationMessage ? [
|
|
97
|
+
input.validationMessage
|
|
98
|
+
] : []
|
|
99
|
+
};
|
|
100
|
+
}
|
|
101
|
+
function $e93e671b31057976$var$getFirstInvalidInput(form) {
|
|
102
|
+
for(let i = 0; i < form.elements.length; i++){
|
|
103
|
+
let element = form.elements[i];
|
|
104
|
+
if (!element.validity.valid) return element;
|
|
105
|
+
}
|
|
106
|
+
return null;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
export {$e93e671b31057976$export$b8473d3665f3a75a as useFormValidation};
|
|
111
|
+
//# sourceMappingURL=useFormValidation.mjs.map
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
import {useEffect as $9Gacy$useEffect} from "react";
|
|
2
|
+
import {setInteractionModality as $9Gacy$setInteractionModality} from "@react-aria/interactions";
|
|
3
|
+
import {useLayoutEffect as $9Gacy$useLayoutEffect, useEffectEvent as $9Gacy$useEffectEvent} from "@react-aria/utils";
|
|
4
|
+
|
|
5
|
+
/*
|
|
6
|
+
* Copyright 2023 Adobe. All rights reserved.
|
|
7
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
8
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
9
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
10
|
+
*
|
|
11
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
12
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
13
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
14
|
+
* governing permissions and limitations under the License.
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
function $e93e671b31057976$export$b8473d3665f3a75a(props, state, ref) {
|
|
19
|
+
let { validationBehavior: validationBehavior, focus: focus } = props;
|
|
20
|
+
// This is a useLayoutEffect so that it runs before the useEffect in useFormValidationState, which commits the validation change.
|
|
21
|
+
(0, $9Gacy$useLayoutEffect)(()=>{
|
|
22
|
+
if (validationBehavior === "native" && (ref === null || ref === void 0 ? void 0 : ref.current)) {
|
|
23
|
+
let errorMessage = state.realtimeValidation.isInvalid ? state.realtimeValidation.validationErrors.join(" ") || "Invalid value." : "";
|
|
24
|
+
ref.current.setCustomValidity(errorMessage);
|
|
25
|
+
// Prevent default tooltip for validation message.
|
|
26
|
+
// https://bugzilla.mozilla.org/show_bug.cgi?id=605277
|
|
27
|
+
if (!ref.current.hasAttribute("title")) ref.current.title = "";
|
|
28
|
+
if (!state.realtimeValidation.isInvalid) state.updateValidation($e93e671b31057976$var$getNativeValidity(ref.current));
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
let onReset = (0, $9Gacy$useEffectEvent)(()=>{
|
|
32
|
+
state.resetValidation();
|
|
33
|
+
});
|
|
34
|
+
let onInvalid = (0, $9Gacy$useEffectEvent)((e)=>{
|
|
35
|
+
var _ref_current;
|
|
36
|
+
// Only commit validation if we are not already displaying one.
|
|
37
|
+
// This avoids clearing server errors that the user didn't actually fix.
|
|
38
|
+
if (!state.displayValidation.isInvalid) state.commitValidation();
|
|
39
|
+
// Auto focus the first invalid input in a form, unless the error already had its default prevented.
|
|
40
|
+
let form = ref === null || ref === void 0 ? void 0 : (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.form;
|
|
41
|
+
if (!e.defaultPrevented && ref && form && $e93e671b31057976$var$getFirstInvalidInput(form) === ref.current) {
|
|
42
|
+
var _ref_current1;
|
|
43
|
+
if (focus) focus();
|
|
44
|
+
else (_ref_current1 = ref.current) === null || _ref_current1 === void 0 ? void 0 : _ref_current1.focus();
|
|
45
|
+
// Always show focus ring.
|
|
46
|
+
(0, $9Gacy$setInteractionModality)("keyboard");
|
|
47
|
+
}
|
|
48
|
+
// Prevent default browser error UI from appearing.
|
|
49
|
+
e.preventDefault();
|
|
50
|
+
});
|
|
51
|
+
let onChange = (0, $9Gacy$useEffectEvent)(()=>{
|
|
52
|
+
state.commitValidation();
|
|
53
|
+
});
|
|
54
|
+
(0, $9Gacy$useEffect)(()=>{
|
|
55
|
+
let input = ref === null || ref === void 0 ? void 0 : ref.current;
|
|
56
|
+
if (!input) return;
|
|
57
|
+
let form = input.form;
|
|
58
|
+
input.addEventListener("invalid", onInvalid);
|
|
59
|
+
input.addEventListener("change", onChange);
|
|
60
|
+
form === null || form === void 0 ? void 0 : form.addEventListener("reset", onReset);
|
|
61
|
+
return ()=>{
|
|
62
|
+
input.removeEventListener("invalid", onInvalid);
|
|
63
|
+
input.removeEventListener("change", onChange);
|
|
64
|
+
form === null || form === void 0 ? void 0 : form.removeEventListener("reset", onReset);
|
|
65
|
+
};
|
|
66
|
+
}, [
|
|
67
|
+
ref,
|
|
68
|
+
onInvalid,
|
|
69
|
+
onChange,
|
|
70
|
+
onReset,
|
|
71
|
+
validationBehavior
|
|
72
|
+
]);
|
|
73
|
+
}
|
|
74
|
+
function $e93e671b31057976$var$getValidity(input) {
|
|
75
|
+
// The native ValidityState object is live, meaning each property is a getter that returns the current state.
|
|
76
|
+
// We need to create a snapshot of the validity state at the time this function is called to avoid unpredictable React renders.
|
|
77
|
+
let validity = input.validity;
|
|
78
|
+
return {
|
|
79
|
+
badInput: validity.badInput,
|
|
80
|
+
customError: validity.customError,
|
|
81
|
+
patternMismatch: validity.patternMismatch,
|
|
82
|
+
rangeOverflow: validity.rangeOverflow,
|
|
83
|
+
rangeUnderflow: validity.rangeUnderflow,
|
|
84
|
+
stepMismatch: validity.stepMismatch,
|
|
85
|
+
tooLong: validity.tooLong,
|
|
86
|
+
tooShort: validity.tooShort,
|
|
87
|
+
typeMismatch: validity.typeMismatch,
|
|
88
|
+
valueMissing: validity.valueMissing,
|
|
89
|
+
valid: validity.valid
|
|
90
|
+
};
|
|
91
|
+
}
|
|
92
|
+
function $e93e671b31057976$var$getNativeValidity(input) {
|
|
93
|
+
return {
|
|
94
|
+
isInvalid: !input.validity.valid,
|
|
95
|
+
validationDetails: $e93e671b31057976$var$getValidity(input),
|
|
96
|
+
validationErrors: input.validationMessage ? [
|
|
97
|
+
input.validationMessage
|
|
98
|
+
] : []
|
|
99
|
+
};
|
|
100
|
+
}
|
|
101
|
+
function $e93e671b31057976$var$getFirstInvalidInput(form) {
|
|
102
|
+
for(let i = 0; i < form.elements.length; i++){
|
|
103
|
+
let element = form.elements[i];
|
|
104
|
+
if (!element.validity.valid) return element;
|
|
105
|
+
}
|
|
106
|
+
return null;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
export {$e93e671b31057976$export$b8473d3665f3a75a as useFormValidation};
|
|
111
|
+
//# sourceMappingURL=useFormValidation.module.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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, 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> | undefined) {\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 && 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 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":"useFormValidation.module.js.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-aria/form",
|
|
3
|
-
"version": "3.0.4-nightly.
|
|
3
|
+
"version": "3.0.4-nightly.4558+c5e4b3701",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -22,10 +22,10 @@
|
|
|
22
22
|
"url": "https://github.com/adobe/react-spectrum"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@react-aria/interactions": "3.0.0-nightly.
|
|
26
|
-
"@react-aria/utils": "3.0.0-nightly.
|
|
27
|
-
"@react-stately/form": "3.0.2-nightly.
|
|
28
|
-
"@react-types/shared": "3.0.0-nightly.
|
|
25
|
+
"@react-aria/interactions": "3.0.0-nightly.2846+c5e4b3701",
|
|
26
|
+
"@react-aria/utils": "3.0.0-nightly.2846+c5e4b3701",
|
|
27
|
+
"@react-stately/form": "3.0.2-nightly.4558+c5e4b3701",
|
|
28
|
+
"@react-types/shared": "3.0.0-nightly.2846+c5e4b3701",
|
|
29
29
|
"@swc/helpers": "^0.5.0"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
@@ -34,5 +34,5 @@
|
|
|
34
34
|
"publishConfig": {
|
|
35
35
|
"access": "public"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "c5e4b3701fdb89eb551f1b3697ac253f06ef68fa"
|
|
38
38
|
}
|