@radix-ui/react-form 0.0.4-rc.7 → 0.1.0-rc.1
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/index.d.mts +52 -40
- package/dist/index.d.ts +52 -40
- package/dist/index.js +427 -545
- package/dist/index.js.map +7 -1
- package/dist/index.mjs +399 -511
- package/dist/index.mjs.map +7 -1
- package/package.json +7 -8
- package/dist/index.d.ts.map +0 -1
package/dist/index.mjs
CHANGED
|
@@ -1,561 +1,449 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import {composeEventHandlers
|
|
4
|
-
import {useComposedRefs
|
|
5
|
-
import {createContextScope
|
|
6
|
-
import {useId
|
|
7
|
-
import {Label as
|
|
8
|
-
import {Primitive
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
const
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
const
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
return {
|
|
36
|
-
...prevValidityMap,
|
|
37
|
-
[fieldName]: {
|
|
38
|
-
...(_prevValidityMap$fiel = prevValidityMap[fieldName]) !== null && _prevValidityMap$fiel !== void 0 ? _prevValidityMap$fiel : {},
|
|
39
|
-
...validity
|
|
40
|
-
}
|
|
41
|
-
};
|
|
42
|
-
})
|
|
43
|
-
, []);
|
|
44
|
-
const handleFieldValiditionClear = $RRrwT$useCallback((fieldName)=>{
|
|
45
|
-
setValidityMap((prevValidityMap)=>({
|
|
46
|
-
...prevValidityMap,
|
|
47
|
-
[fieldName]: undefined
|
|
48
|
-
})
|
|
49
|
-
);
|
|
50
|
-
setCustomErrorsMap((prevCustomErrorsMap)=>({
|
|
51
|
-
...prevCustomErrorsMap,
|
|
52
|
-
[fieldName]: {}
|
|
53
|
-
})
|
|
54
|
-
);
|
|
55
|
-
}, []); // custom matcher entries per field
|
|
56
|
-
const [customMatcherEntriesMap, setCustomMatcherEntriesMap] = $RRrwT$useState({});
|
|
57
|
-
const getFieldCustomMatcherEntries = $RRrwT$useCallback((fieldName)=>{
|
|
58
|
-
var _customMatcherEntries;
|
|
59
|
-
return (_customMatcherEntries = customMatcherEntriesMap[fieldName]) !== null && _customMatcherEntries !== void 0 ? _customMatcherEntries : [];
|
|
60
|
-
}, [
|
|
61
|
-
customMatcherEntriesMap
|
|
62
|
-
]);
|
|
63
|
-
const handleFieldCustomMatcherAdd = $RRrwT$useCallback((fieldName, matcherEntry)=>{
|
|
64
|
-
setCustomMatcherEntriesMap((prevCustomMatcherEntriesMap)=>{
|
|
65
|
-
var _prevCustomMatcherEnt;
|
|
66
|
-
return {
|
|
67
|
-
...prevCustomMatcherEntriesMap,
|
|
68
|
-
[fieldName]: [
|
|
69
|
-
...(_prevCustomMatcherEnt = prevCustomMatcherEntriesMap[fieldName]) !== null && _prevCustomMatcherEnt !== void 0 ? _prevCustomMatcherEnt : [],
|
|
70
|
-
matcherEntry
|
|
71
|
-
]
|
|
72
|
-
};
|
|
73
|
-
});
|
|
1
|
+
// packages/react/form/src/Form.tsx
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { composeEventHandlers } from "@radix-ui/primitive";
|
|
4
|
+
import { useComposedRefs } from "@radix-ui/react-compose-refs";
|
|
5
|
+
import { createContextScope } from "@radix-ui/react-context";
|
|
6
|
+
import { useId } from "@radix-ui/react-id";
|
|
7
|
+
import { Label as LabelPrimitive } from "@radix-ui/react-label";
|
|
8
|
+
import { Primitive } from "@radix-ui/react-primitive";
|
|
9
|
+
import { Fragment, jsx } from "react/jsx-runtime";
|
|
10
|
+
var [createFormContext, createFormScope] = createContextScope("Form");
|
|
11
|
+
var FORM_NAME = "Form";
|
|
12
|
+
var [ValidationProvider, useValidationContext] = createFormContext(FORM_NAME);
|
|
13
|
+
var [AriaDescriptionProvider, useAriaDescriptionContext] = createFormContext(FORM_NAME);
|
|
14
|
+
var Form = React.forwardRef(
|
|
15
|
+
(props, forwardedRef) => {
|
|
16
|
+
const { __scopeForm, onClearServerErrors = () => {
|
|
17
|
+
}, ...rootProps } = props;
|
|
18
|
+
const formRef = React.useRef(null);
|
|
19
|
+
const composedFormRef = useComposedRefs(forwardedRef, formRef);
|
|
20
|
+
const [validityMap, setValidityMap] = React.useState({});
|
|
21
|
+
const getFieldValidity = React.useCallback(
|
|
22
|
+
(fieldName) => validityMap[fieldName],
|
|
23
|
+
[validityMap]
|
|
24
|
+
);
|
|
25
|
+
const handleFieldValidityChange = React.useCallback(
|
|
26
|
+
(fieldName, validity) => setValidityMap((prevValidityMap) => ({
|
|
27
|
+
...prevValidityMap,
|
|
28
|
+
[fieldName]: { ...prevValidityMap[fieldName] ?? {}, ...validity }
|
|
29
|
+
})),
|
|
30
|
+
[]
|
|
31
|
+
);
|
|
32
|
+
const handleFieldValiditionClear = React.useCallback((fieldName) => {
|
|
33
|
+
setValidityMap((prevValidityMap) => ({ ...prevValidityMap, [fieldName]: void 0 }));
|
|
34
|
+
setCustomErrorsMap((prevCustomErrorsMap) => ({ ...prevCustomErrorsMap, [fieldName]: {} }));
|
|
74
35
|
}, []);
|
|
75
|
-
const
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
const [customErrorsMap, setCustomErrorsMap] = $RRrwT$useState({});
|
|
86
|
-
const getFieldCustomErrors = $RRrwT$useCallback((fieldName)=>{
|
|
87
|
-
var _customErrorsMap$fiel;
|
|
88
|
-
return (_customErrorsMap$fiel = customErrorsMap[fieldName]) !== null && _customErrorsMap$fiel !== void 0 ? _customErrorsMap$fiel : {};
|
|
89
|
-
}, [
|
|
90
|
-
customErrorsMap
|
|
91
|
-
]);
|
|
92
|
-
const handleFieldCustomErrorsChange = $RRrwT$useCallback((fieldName, customErrors)=>{
|
|
93
|
-
setCustomErrorsMap((prevCustomErrorsMap)=>{
|
|
94
|
-
var _prevCustomErrorsMap$;
|
|
95
|
-
return {
|
|
96
|
-
...prevCustomErrorsMap,
|
|
97
|
-
[fieldName]: {
|
|
98
|
-
...(_prevCustomErrorsMap$ = prevCustomErrorsMap[fieldName]) !== null && _prevCustomErrorsMap$ !== void 0 ? _prevCustomErrorsMap$ : {},
|
|
99
|
-
...customErrors
|
|
100
|
-
}
|
|
101
|
-
};
|
|
102
|
-
});
|
|
103
|
-
}, []); // messageIds per field
|
|
104
|
-
const [messageIdsMap, setMessageIdsMap] = $RRrwT$useState({});
|
|
105
|
-
const handleFieldMessageIdAdd = $RRrwT$useCallback((fieldName, id)=>{
|
|
106
|
-
setMessageIdsMap((prevMessageIdsMap)=>{
|
|
107
|
-
const fieldDescriptionIds = new Set(prevMessageIdsMap[fieldName]).add(id);
|
|
108
|
-
return {
|
|
109
|
-
...prevMessageIdsMap,
|
|
110
|
-
[fieldName]: fieldDescriptionIds
|
|
111
|
-
};
|
|
112
|
-
});
|
|
36
|
+
const [customMatcherEntriesMap, setCustomMatcherEntriesMap] = React.useState({});
|
|
37
|
+
const getFieldCustomMatcherEntries = React.useCallback(
|
|
38
|
+
(fieldName) => customMatcherEntriesMap[fieldName] ?? [],
|
|
39
|
+
[customMatcherEntriesMap]
|
|
40
|
+
);
|
|
41
|
+
const handleFieldCustomMatcherAdd = React.useCallback((fieldName, matcherEntry) => {
|
|
42
|
+
setCustomMatcherEntriesMap((prevCustomMatcherEntriesMap) => ({
|
|
43
|
+
...prevCustomMatcherEntriesMap,
|
|
44
|
+
[fieldName]: [...prevCustomMatcherEntriesMap[fieldName] ?? [], matcherEntry]
|
|
45
|
+
}));
|
|
113
46
|
}, []);
|
|
114
|
-
const
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
47
|
+
const handleFieldCustomMatcherRemove = React.useCallback((fieldName, matcherEntryId) => {
|
|
48
|
+
setCustomMatcherEntriesMap((prevCustomMatcherEntriesMap) => ({
|
|
49
|
+
...prevCustomMatcherEntriesMap,
|
|
50
|
+
[fieldName]: (prevCustomMatcherEntriesMap[fieldName] ?? []).filter(
|
|
51
|
+
(matcherEntry) => matcherEntry.id !== matcherEntryId
|
|
52
|
+
)
|
|
53
|
+
}));
|
|
54
|
+
}, []);
|
|
55
|
+
const [customErrorsMap, setCustomErrorsMap] = React.useState({});
|
|
56
|
+
const getFieldCustomErrors = React.useCallback(
|
|
57
|
+
(fieldName) => customErrorsMap[fieldName] ?? {},
|
|
58
|
+
[customErrorsMap]
|
|
59
|
+
);
|
|
60
|
+
const handleFieldCustomErrorsChange = React.useCallback((fieldName, customErrors) => {
|
|
61
|
+
setCustomErrorsMap((prevCustomErrorsMap) => ({
|
|
62
|
+
...prevCustomErrorsMap,
|
|
63
|
+
[fieldName]: { ...prevCustomErrorsMap[fieldName] ?? {}, ...customErrors }
|
|
64
|
+
}));
|
|
65
|
+
}, []);
|
|
66
|
+
const [messageIdsMap, setMessageIdsMap] = React.useState({});
|
|
67
|
+
const handleFieldMessageIdAdd = React.useCallback((fieldName, id) => {
|
|
68
|
+
setMessageIdsMap((prevMessageIdsMap) => {
|
|
69
|
+
const fieldDescriptionIds = new Set(prevMessageIdsMap[fieldName]).add(id);
|
|
70
|
+
return { ...prevMessageIdsMap, [fieldName]: fieldDescriptionIds };
|
|
71
|
+
});
|
|
123
72
|
}, []);
|
|
124
|
-
const
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
73
|
+
const handleFieldMessageIdRemove = React.useCallback((fieldName, id) => {
|
|
74
|
+
setMessageIdsMap((prevMessageIdsMap) => {
|
|
75
|
+
const fieldDescriptionIds = new Set(prevMessageIdsMap[fieldName]);
|
|
76
|
+
fieldDescriptionIds.delete(id);
|
|
77
|
+
return { ...prevMessageIdsMap, [fieldName]: fieldDescriptionIds };
|
|
78
|
+
});
|
|
79
|
+
}, []);
|
|
80
|
+
const getFieldDescription = React.useCallback(
|
|
81
|
+
(fieldName) => Array.from(messageIdsMap[fieldName] ?? []).join(" ") || void 0,
|
|
82
|
+
[messageIdsMap]
|
|
83
|
+
);
|
|
84
|
+
return /* @__PURE__ */ jsx(
|
|
85
|
+
ValidationProvider,
|
|
86
|
+
{
|
|
131
87
|
scope: __scopeForm,
|
|
132
|
-
getFieldValidity
|
|
88
|
+
getFieldValidity,
|
|
133
89
|
onFieldValidityChange: handleFieldValidityChange,
|
|
134
|
-
getFieldCustomMatcherEntries
|
|
90
|
+
getFieldCustomMatcherEntries,
|
|
135
91
|
onFieldCustomMatcherEntryAdd: handleFieldCustomMatcherAdd,
|
|
136
92
|
onFieldCustomMatcherEntryRemove: handleFieldCustomMatcherRemove,
|
|
137
|
-
getFieldCustomErrors
|
|
93
|
+
getFieldCustomErrors,
|
|
138
94
|
onFieldCustomErrorsChange: handleFieldCustomErrorsChange,
|
|
139
|
-
onFieldValiditionClear: handleFieldValiditionClear
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
95
|
+
onFieldValiditionClear: handleFieldValiditionClear,
|
|
96
|
+
children: /* @__PURE__ */ jsx(
|
|
97
|
+
AriaDescriptionProvider,
|
|
98
|
+
{
|
|
99
|
+
scope: __scopeForm,
|
|
100
|
+
onFieldMessageIdAdd: handleFieldMessageIdAdd,
|
|
101
|
+
onFieldMessageIdRemove: handleFieldMessageIdRemove,
|
|
102
|
+
getFieldDescription,
|
|
103
|
+
children: /* @__PURE__ */ jsx(
|
|
104
|
+
Primitive.form,
|
|
105
|
+
{
|
|
106
|
+
...rootProps,
|
|
107
|
+
ref: composedFormRef,
|
|
108
|
+
onInvalid: composeEventHandlers(props.onInvalid, (event) => {
|
|
109
|
+
const firstInvalidControl = getFirstInvalidControl(event.currentTarget);
|
|
110
|
+
if (firstInvalidControl === event.target) firstInvalidControl.focus();
|
|
111
|
+
event.preventDefault();
|
|
112
|
+
}),
|
|
113
|
+
onSubmit: composeEventHandlers(props.onSubmit, onClearServerErrors, {
|
|
114
|
+
checkForDefaultPrevented: false
|
|
115
|
+
}),
|
|
116
|
+
onReset: composeEventHandlers(props.onReset, onClearServerErrors)
|
|
117
|
+
}
|
|
118
|
+
)
|
|
119
|
+
}
|
|
120
|
+
)
|
|
121
|
+
}
|
|
122
|
+
);
|
|
123
|
+
}
|
|
124
|
+
);
|
|
125
|
+
Form.displayName = FORM_NAME;
|
|
126
|
+
var FIELD_NAME = "FormField";
|
|
127
|
+
var [FormFieldProvider, useFormFieldContext] = createFormContext(FIELD_NAME);
|
|
128
|
+
var FormField = React.forwardRef(
|
|
129
|
+
(props, forwardedRef) => {
|
|
130
|
+
const { __scopeForm, name, serverInvalid = false, ...fieldProps } = props;
|
|
131
|
+
const validationContext = useValidationContext(FIELD_NAME, __scopeForm);
|
|
171
132
|
const validity = validationContext.getFieldValidity(name);
|
|
172
|
-
const id =
|
|
173
|
-
return
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
"data-valid": $d94698215c4408a7$var$getValidAttribute(validity, serverInvalid),
|
|
180
|
-
"data-invalid": $d94698215c4408a7$var$getInvalidAttribute(validity, serverInvalid)
|
|
181
|
-
}, fieldProps, {
|
|
133
|
+
const id = useId();
|
|
134
|
+
return /* @__PURE__ */ jsx(FormFieldProvider, { scope: __scopeForm, id, name, serverInvalid, children: /* @__PURE__ */ jsx(
|
|
135
|
+
Primitive.div,
|
|
136
|
+
{
|
|
137
|
+
"data-valid": getValidAttribute(validity, serverInvalid),
|
|
138
|
+
"data-invalid": getInvalidAttribute(validity, serverInvalid),
|
|
139
|
+
...fieldProps,
|
|
182
140
|
ref: forwardedRef
|
|
183
|
-
|
|
184
|
-
});
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
const
|
|
192
|
-
const
|
|
193
|
-
const
|
|
194
|
-
const fieldContext = $d94698215c4408a7$var$useFormFieldContext($d94698215c4408a7$var$LABEL_NAME, __scopeForm);
|
|
141
|
+
}
|
|
142
|
+
) });
|
|
143
|
+
}
|
|
144
|
+
);
|
|
145
|
+
FormField.displayName = FIELD_NAME;
|
|
146
|
+
var LABEL_NAME = "FormLabel";
|
|
147
|
+
var FormLabel = React.forwardRef(
|
|
148
|
+
(props, forwardedRef) => {
|
|
149
|
+
const { __scopeForm, ...labelProps } = props;
|
|
150
|
+
const validationContext = useValidationContext(LABEL_NAME, __scopeForm);
|
|
151
|
+
const fieldContext = useFormFieldContext(LABEL_NAME, __scopeForm);
|
|
195
152
|
const htmlFor = labelProps.htmlFor || fieldContext.id;
|
|
196
153
|
const validity = validationContext.getFieldValidity(fieldContext.name);
|
|
197
|
-
return
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
154
|
+
return /* @__PURE__ */ jsx(
|
|
155
|
+
LabelPrimitive,
|
|
156
|
+
{
|
|
157
|
+
"data-valid": getValidAttribute(validity, fieldContext.serverInvalid),
|
|
158
|
+
"data-invalid": getInvalidAttribute(validity, fieldContext.serverInvalid),
|
|
159
|
+
...labelProps,
|
|
201
160
|
ref: forwardedRef,
|
|
202
|
-
htmlFor
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
const
|
|
212
|
-
const
|
|
213
|
-
const
|
|
214
|
-
const
|
|
215
|
-
const
|
|
216
|
-
const
|
|
217
|
-
const composedRef = $RRrwT$useComposedRefs(forwardedRef, ref);
|
|
161
|
+
htmlFor
|
|
162
|
+
}
|
|
163
|
+
);
|
|
164
|
+
}
|
|
165
|
+
);
|
|
166
|
+
FormLabel.displayName = LABEL_NAME;
|
|
167
|
+
var CONTROL_NAME = "FormControl";
|
|
168
|
+
var FormControl = React.forwardRef(
|
|
169
|
+
(props, forwardedRef) => {
|
|
170
|
+
const { __scopeForm, ...controlProps } = props;
|
|
171
|
+
const validationContext = useValidationContext(CONTROL_NAME, __scopeForm);
|
|
172
|
+
const fieldContext = useFormFieldContext(CONTROL_NAME, __scopeForm);
|
|
173
|
+
const ariaDescriptionContext = useAriaDescriptionContext(CONTROL_NAME, __scopeForm);
|
|
174
|
+
const ref = React.useRef(null);
|
|
175
|
+
const composedRef = useComposedRefs(forwardedRef, ref);
|
|
218
176
|
const name = controlProps.name || fieldContext.name;
|
|
219
|
-
const
|
|
177
|
+
const id = controlProps.id || fieldContext.id;
|
|
220
178
|
const customMatcherEntries = validationContext.getFieldCustomMatcherEntries(name);
|
|
221
|
-
const { onFieldValidityChange
|
|
222
|
-
const updateControlValidity =
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
} //------------------------------------------------------------------------------------------
|
|
230
|
-
// 2. then gather the form data to give to custom matchers for cross-comparisons
|
|
179
|
+
const { onFieldValidityChange, onFieldCustomErrorsChange, onFieldValiditionClear } = validationContext;
|
|
180
|
+
const updateControlValidity = React.useCallback(
|
|
181
|
+
async (control) => {
|
|
182
|
+
if (hasBuiltInError(control.validity)) {
|
|
183
|
+
const controlValidity2 = validityStateToObject(control.validity);
|
|
184
|
+
onFieldValidityChange(name, controlValidity2);
|
|
185
|
+
return;
|
|
186
|
+
}
|
|
231
187
|
const formData = control.form ? new FormData(control.form) : new FormData();
|
|
232
|
-
const matcherArgs = [
|
|
233
|
-
control.value,
|
|
234
|
-
formData
|
|
235
|
-
]; //------------------------------------------------------------------------------------------
|
|
236
|
-
// 3. split sync and async custom matcher entries
|
|
188
|
+
const matcherArgs = [control.value, formData];
|
|
237
189
|
const syncCustomMatcherEntries = [];
|
|
238
190
|
const ayncCustomMatcherEntries = [];
|
|
239
|
-
customMatcherEntries.forEach((customMatcherEntry)=>{
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
];
|
|
191
|
+
customMatcherEntries.forEach((customMatcherEntry) => {
|
|
192
|
+
if (isAsyncCustomMatcherEntry(customMatcherEntry, matcherArgs)) {
|
|
193
|
+
ayncCustomMatcherEntries.push(customMatcherEntry);
|
|
194
|
+
} else if (isSyncCustomMatcherEntry(customMatcherEntry)) {
|
|
195
|
+
syncCustomMatcherEntries.push(customMatcherEntry);
|
|
196
|
+
}
|
|
197
|
+
});
|
|
198
|
+
const syncCustomErrors = syncCustomMatcherEntries.map(({ id: id2, match }) => {
|
|
199
|
+
return [id2, match(...matcherArgs)];
|
|
249
200
|
});
|
|
250
201
|
const syncCustomErrorsById = Object.fromEntries(syncCustomErrors);
|
|
251
202
|
const hasSyncCustomErrors = Object.values(syncCustomErrorsById).some(Boolean);
|
|
252
203
|
const hasCustomError = hasSyncCustomErrors;
|
|
253
|
-
control.setCustomValidity(hasCustomError ?
|
|
254
|
-
const controlValidity =
|
|
204
|
+
control.setCustomValidity(hasCustomError ? DEFAULT_INVALID_MESSAGE : "");
|
|
205
|
+
const controlValidity = validityStateToObject(control.validity);
|
|
255
206
|
onFieldValidityChange(name, controlValidity);
|
|
256
|
-
onFieldCustomErrorsChange(name, syncCustomErrorsById);
|
|
257
|
-
// 5. run async custom matchers and update control validity / internal validity + errors
|
|
207
|
+
onFieldCustomErrorsChange(name, syncCustomErrorsById);
|
|
258
208
|
if (!hasSyncCustomErrors && ayncCustomMatcherEntries.length > 0) {
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
const controlValidity = $d94698215c4408a7$var$validityStateToObject(control.validity);
|
|
271
|
-
onFieldValidityChange(name, controlValidity);
|
|
272
|
-
onFieldCustomErrorsChange(name, asyncCustomErrorsById);
|
|
273
|
-
}
|
|
274
|
-
}, [
|
|
275
|
-
customMatcherEntries,
|
|
276
|
-
name,
|
|
277
|
-
onFieldCustomErrorsChange,
|
|
278
|
-
onFieldValidityChange
|
|
279
|
-
]);
|
|
280
|
-
$RRrwT$useEffect(()=>{
|
|
281
|
-
const control = ref.current;
|
|
282
|
-
if (control) {
|
|
283
|
-
// We only want validate on change (native `change` event, not React's `onChange`). This is primarily
|
|
284
|
-
// a UX decision, we don't want to validate on every keystroke and React's `onChange` is the `input` event.
|
|
285
|
-
const handleChange = ()=>updateControlValidity(control)
|
|
286
|
-
;
|
|
287
|
-
control.addEventListener('change', handleChange);
|
|
288
|
-
return ()=>control.removeEventListener('change', handleChange)
|
|
289
|
-
;
|
|
290
|
-
}
|
|
291
|
-
}, [
|
|
292
|
-
updateControlValidity
|
|
293
|
-
]);
|
|
294
|
-
const resetControlValidity = $RRrwT$useCallback(()=>{
|
|
295
|
-
const control = ref.current;
|
|
296
|
-
if (control) {
|
|
297
|
-
control.setCustomValidity('');
|
|
298
|
-
onFieldValiditionClear(name);
|
|
299
|
-
}
|
|
300
|
-
}, [
|
|
301
|
-
name,
|
|
302
|
-
onFieldValiditionClear
|
|
303
|
-
]); // reset validity and errors when the form is reset
|
|
304
|
-
$RRrwT$useEffect(()=>{
|
|
305
|
-
var _ref$current;
|
|
306
|
-
const form = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.form;
|
|
307
|
-
if (form) {
|
|
308
|
-
form.addEventListener('reset', resetControlValidity);
|
|
309
|
-
return ()=>form.removeEventListener('reset', resetControlValidity)
|
|
310
|
-
;
|
|
311
|
-
}
|
|
312
|
-
}, [
|
|
313
|
-
resetControlValidity
|
|
314
|
-
]); // focus first invalid control when fields are set as invalid by server
|
|
315
|
-
$RRrwT$useEffect(()=>{
|
|
316
|
-
const control = ref.current;
|
|
317
|
-
const form = control === null || control === void 0 ? void 0 : control.closest('form');
|
|
318
|
-
if (form && fieldContext.serverInvalid) {
|
|
319
|
-
const firstInvalidControl = $d94698215c4408a7$var$getFirstInvalidControl(form);
|
|
320
|
-
if (firstInvalidControl === control) firstInvalidControl.focus();
|
|
209
|
+
const promisedCustomErrors = ayncCustomMatcherEntries.map(
|
|
210
|
+
({ id: id2, match }) => match(...matcherArgs).then((matches) => [id2, matches])
|
|
211
|
+
);
|
|
212
|
+
const asyncCustomErrors = await Promise.all(promisedCustomErrors);
|
|
213
|
+
const asyncCustomErrorsById = Object.fromEntries(asyncCustomErrors);
|
|
214
|
+
const hasAsyncCustomErrors = Object.values(asyncCustomErrorsById).some(Boolean);
|
|
215
|
+
const hasCustomError2 = hasAsyncCustomErrors;
|
|
216
|
+
control.setCustomValidity(hasCustomError2 ? DEFAULT_INVALID_MESSAGE : "");
|
|
217
|
+
const controlValidity2 = validityStateToObject(control.validity);
|
|
218
|
+
onFieldValidityChange(name, controlValidity2);
|
|
219
|
+
onFieldCustomErrorsChange(name, asyncCustomErrorsById);
|
|
321
220
|
}
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
221
|
+
},
|
|
222
|
+
[customMatcherEntries, name, onFieldCustomErrorsChange, onFieldValidityChange]
|
|
223
|
+
);
|
|
224
|
+
React.useEffect(() => {
|
|
225
|
+
const control = ref.current;
|
|
226
|
+
if (control) {
|
|
227
|
+
const handleChange = () => updateControlValidity(control);
|
|
228
|
+
control.addEventListener("change", handleChange);
|
|
229
|
+
return () => control.removeEventListener("change", handleChange);
|
|
230
|
+
}
|
|
231
|
+
}, [updateControlValidity]);
|
|
232
|
+
const resetControlValidity = React.useCallback(() => {
|
|
233
|
+
const control = ref.current;
|
|
234
|
+
if (control) {
|
|
235
|
+
control.setCustomValidity("");
|
|
236
|
+
onFieldValiditionClear(name);
|
|
237
|
+
}
|
|
238
|
+
}, [name, onFieldValiditionClear]);
|
|
239
|
+
React.useEffect(() => {
|
|
240
|
+
const form = ref.current?.form;
|
|
241
|
+
if (form) {
|
|
242
|
+
form.addEventListener("reset", resetControlValidity);
|
|
243
|
+
return () => form.removeEventListener("reset", resetControlValidity);
|
|
244
|
+
}
|
|
245
|
+
}, [resetControlValidity]);
|
|
246
|
+
React.useEffect(() => {
|
|
247
|
+
const control = ref.current;
|
|
248
|
+
const form = control?.closest("form");
|
|
249
|
+
if (form && fieldContext.serverInvalid) {
|
|
250
|
+
const firstInvalidControl = getFirstInvalidControl(form);
|
|
251
|
+
if (firstInvalidControl === control) firstInvalidControl.focus();
|
|
252
|
+
}
|
|
253
|
+
}, [fieldContext.serverInvalid]);
|
|
325
254
|
const validity = validationContext.getFieldValidity(name);
|
|
326
|
-
return
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
"
|
|
330
|
-
"
|
|
331
|
-
,
|
|
332
|
-
|
|
333
|
-
|
|
255
|
+
return /* @__PURE__ */ jsx(
|
|
256
|
+
Primitive.input,
|
|
257
|
+
{
|
|
258
|
+
"data-valid": getValidAttribute(validity, fieldContext.serverInvalid),
|
|
259
|
+
"data-invalid": getInvalidAttribute(validity, fieldContext.serverInvalid),
|
|
260
|
+
"aria-invalid": fieldContext.serverInvalid ? true : void 0,
|
|
261
|
+
"aria-describedby": ariaDescriptionContext.getFieldDescription(name),
|
|
262
|
+
title: "",
|
|
263
|
+
...controlProps,
|
|
334
264
|
ref: composedRef,
|
|
335
|
-
id
|
|
336
|
-
name
|
|
337
|
-
onInvalid:
|
|
338
|
-
|
|
339
|
-
|
|
265
|
+
id,
|
|
266
|
+
name,
|
|
267
|
+
onInvalid: composeEventHandlers(props.onInvalid, (event) => {
|
|
268
|
+
const control = event.currentTarget;
|
|
269
|
+
updateControlValidity(control);
|
|
340
270
|
}),
|
|
341
|
-
onChange:
|
|
342
|
-
|
|
343
|
-
resetControlValidity();
|
|
271
|
+
onChange: composeEventHandlers(props.onChange, (event) => {
|
|
272
|
+
resetControlValidity();
|
|
344
273
|
})
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
'valueMissing'
|
|
363
|
-
];
|
|
364
|
-
const $d94698215c4408a7$var$DEFAULT_INVALID_MESSAGE = 'This value is not valid';
|
|
365
|
-
const $d94698215c4408a7$var$DEFAULT_BUILT_IN_MESSAGES = {
|
|
366
|
-
badInput: $d94698215c4408a7$var$DEFAULT_INVALID_MESSAGE,
|
|
367
|
-
patternMismatch: 'This value does not match the required pattern',
|
|
368
|
-
rangeOverflow: 'This value is too large',
|
|
369
|
-
rangeUnderflow: 'This value is too small',
|
|
370
|
-
stepMismatch: 'This value does not match the required step',
|
|
371
|
-
tooLong: 'This value is too long',
|
|
372
|
-
tooShort: 'This value is too short',
|
|
373
|
-
typeMismatch: 'This value does not match the required type',
|
|
374
|
-
valid: undefined,
|
|
375
|
-
valueMissing: 'This value is missing'
|
|
274
|
+
}
|
|
275
|
+
);
|
|
276
|
+
}
|
|
277
|
+
);
|
|
278
|
+
FormControl.displayName = CONTROL_NAME;
|
|
279
|
+
var DEFAULT_INVALID_MESSAGE = "This value is not valid";
|
|
280
|
+
var DEFAULT_BUILT_IN_MESSAGES = {
|
|
281
|
+
badInput: DEFAULT_INVALID_MESSAGE,
|
|
282
|
+
patternMismatch: "This value does not match the required pattern",
|
|
283
|
+
rangeOverflow: "This value is too large",
|
|
284
|
+
rangeUnderflow: "This value is too small",
|
|
285
|
+
stepMismatch: "This value does not match the required step",
|
|
286
|
+
tooLong: "This value is too long",
|
|
287
|
+
tooShort: "This value is too short",
|
|
288
|
+
typeMismatch: "This value does not match the required type",
|
|
289
|
+
valid: void 0,
|
|
290
|
+
valueMissing: "This value is missing"
|
|
376
291
|
};
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
const
|
|
381
|
-
const
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
}
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
}));
|
|
398
|
-
});
|
|
399
|
-
/*#__PURE__*/ Object.assign($d94698215c4408a7$export$2e8ae7a1a126169a, {
|
|
400
|
-
displayName: $d94698215c4408a7$var$MESSAGE_NAME
|
|
401
|
-
});
|
|
402
|
-
const $d94698215c4408a7$var$FormBuiltInMessage = /*#__PURE__*/ $RRrwT$forwardRef((props, forwardedRef)=>{
|
|
403
|
-
const { match: match , forceMatch: forceMatch = false , name: name , children: children , ...messageProps } = props;
|
|
404
|
-
const validationContext = $d94698215c4408a7$var$useValidationContext($d94698215c4408a7$var$MESSAGE_NAME, messageProps.__scopeForm);
|
|
292
|
+
var MESSAGE_NAME = "FormMessage";
|
|
293
|
+
var FormMessage = React.forwardRef(
|
|
294
|
+
(props, forwardedRef) => {
|
|
295
|
+
const { match, name: nameProp, ...messageProps } = props;
|
|
296
|
+
const fieldContext = useFormFieldContext(MESSAGE_NAME, props.__scopeForm);
|
|
297
|
+
const name = nameProp ?? fieldContext.name;
|
|
298
|
+
if (match === void 0) {
|
|
299
|
+
return /* @__PURE__ */ jsx(FormMessageImpl, { ...messageProps, ref: forwardedRef, name, children: props.children || DEFAULT_INVALID_MESSAGE });
|
|
300
|
+
} else if (typeof match === "function") {
|
|
301
|
+
return /* @__PURE__ */ jsx(FormCustomMessage, { match, ...messageProps, ref: forwardedRef, name });
|
|
302
|
+
} else {
|
|
303
|
+
return /* @__PURE__ */ jsx(FormBuiltInMessage, { match, ...messageProps, ref: forwardedRef, name });
|
|
304
|
+
}
|
|
305
|
+
}
|
|
306
|
+
);
|
|
307
|
+
FormMessage.displayName = MESSAGE_NAME;
|
|
308
|
+
var FormBuiltInMessage = React.forwardRef(
|
|
309
|
+
(props, forwardedRef) => {
|
|
310
|
+
const { match, forceMatch = false, name, children, ...messageProps } = props;
|
|
311
|
+
const validationContext = useValidationContext(MESSAGE_NAME, messageProps.__scopeForm);
|
|
405
312
|
const validity = validationContext.getFieldValidity(name);
|
|
406
|
-
const matches = forceMatch ||
|
|
407
|
-
if (matches)
|
|
408
|
-
|
|
409
|
-
}
|
|
410
|
-
name: name
|
|
411
|
-
}), children !== null && children !== void 0 ? children : $d94698215c4408a7$var$DEFAULT_BUILT_IN_MESSAGES[match]);
|
|
313
|
+
const matches = forceMatch || validity?.[match];
|
|
314
|
+
if (matches) {
|
|
315
|
+
return /* @__PURE__ */ jsx(FormMessageImpl, { ref: forwardedRef, ...messageProps, name, children: children ?? DEFAULT_BUILT_IN_MESSAGES[match] });
|
|
316
|
+
}
|
|
412
317
|
return null;
|
|
413
|
-
}
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
const
|
|
418
|
-
const
|
|
419
|
-
const
|
|
420
|
-
const
|
|
421
|
-
const
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
]);
|
|
429
|
-
const { onFieldCustomMatcherEntryAdd: onFieldCustomMatcherEntryAdd , onFieldCustomMatcherEntryRemove: onFieldCustomMatcherEntryRemove } = validationContext;
|
|
430
|
-
$RRrwT$useEffect(()=>{
|
|
431
|
-
onFieldCustomMatcherEntryAdd(name, customMatcherEntry);
|
|
432
|
-
return ()=>onFieldCustomMatcherEntryRemove(name, customMatcherEntry.id)
|
|
433
|
-
;
|
|
434
|
-
}, [
|
|
435
|
-
customMatcherEntry,
|
|
436
|
-
name,
|
|
437
|
-
onFieldCustomMatcherEntryAdd,
|
|
438
|
-
onFieldCustomMatcherEntryRemove
|
|
439
|
-
]);
|
|
318
|
+
}
|
|
319
|
+
);
|
|
320
|
+
var FormCustomMessage = React.forwardRef(
|
|
321
|
+
(props, forwardedRef) => {
|
|
322
|
+
const { match, forceMatch = false, name, id: idProp, children, ...messageProps } = props;
|
|
323
|
+
const validationContext = useValidationContext(MESSAGE_NAME, messageProps.__scopeForm);
|
|
324
|
+
const ref = React.useRef(null);
|
|
325
|
+
const composedRef = useComposedRefs(forwardedRef, ref);
|
|
326
|
+
const _id = useId();
|
|
327
|
+
const id = idProp ?? _id;
|
|
328
|
+
const customMatcherEntry = React.useMemo(() => ({ id, match }), [id, match]);
|
|
329
|
+
const { onFieldCustomMatcherEntryAdd, onFieldCustomMatcherEntryRemove } = validationContext;
|
|
330
|
+
React.useEffect(() => {
|
|
331
|
+
onFieldCustomMatcherEntryAdd(name, customMatcherEntry);
|
|
332
|
+
return () => onFieldCustomMatcherEntryRemove(name, customMatcherEntry.id);
|
|
333
|
+
}, [customMatcherEntry, name, onFieldCustomMatcherEntryAdd, onFieldCustomMatcherEntryRemove]);
|
|
440
334
|
const validity = validationContext.getFieldValidity(name);
|
|
441
335
|
const customErrors = validationContext.getFieldCustomErrors(name);
|
|
442
336
|
const hasMatchingCustomError = customErrors[id];
|
|
443
|
-
const matches = forceMatch || validity &&
|
|
444
|
-
if (matches)
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
}, messageProps, {
|
|
448
|
-
name: name
|
|
449
|
-
}), children !== null && children !== void 0 ? children : $d94698215c4408a7$var$DEFAULT_INVALID_MESSAGE);
|
|
337
|
+
const matches = forceMatch || validity && !hasBuiltInError(validity) && hasMatchingCustomError;
|
|
338
|
+
if (matches) {
|
|
339
|
+
return /* @__PURE__ */ jsx(FormMessageImpl, { id, ref: composedRef, ...messageProps, name, children: children ?? DEFAULT_INVALID_MESSAGE });
|
|
340
|
+
}
|
|
450
341
|
return null;
|
|
451
|
-
}
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
const
|
|
456
|
-
const
|
|
457
|
-
const
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
/*
|
|
475
|
-
* FormValidityState
|
|
476
|
-
* -----------------------------------------------------------------------------------------------*/ const $d94698215c4408a7$var$VALIDITY_STATE_NAME = 'FormValidityState';
|
|
477
|
-
const $d94698215c4408a7$export$7a93102810e06862 = (props)=>{
|
|
478
|
-
const { __scopeForm: __scopeForm , name: nameProp , children: children } = props;
|
|
479
|
-
const validationContext = $d94698215c4408a7$var$useValidationContext($d94698215c4408a7$var$VALIDITY_STATE_NAME, __scopeForm);
|
|
480
|
-
const fieldContext = $d94698215c4408a7$var$useFormFieldContext($d94698215c4408a7$var$VALIDITY_STATE_NAME, __scopeForm);
|
|
481
|
-
const name = nameProp !== null && nameProp !== void 0 ? nameProp : fieldContext.name;
|
|
482
|
-
const validity = validationContext.getFieldValidity(name);
|
|
483
|
-
return /*#__PURE__*/ $RRrwT$createElement($RRrwT$Fragment, null, children(validity));
|
|
342
|
+
}
|
|
343
|
+
);
|
|
344
|
+
var FormMessageImpl = React.forwardRef(
|
|
345
|
+
(props, forwardedRef) => {
|
|
346
|
+
const { __scopeForm, id: idProp, name, ...messageProps } = props;
|
|
347
|
+
const ariaDescriptionContext = useAriaDescriptionContext(MESSAGE_NAME, __scopeForm);
|
|
348
|
+
const _id = useId();
|
|
349
|
+
const id = idProp ?? _id;
|
|
350
|
+
const { onFieldMessageIdAdd, onFieldMessageIdRemove } = ariaDescriptionContext;
|
|
351
|
+
React.useEffect(() => {
|
|
352
|
+
onFieldMessageIdAdd(name, id);
|
|
353
|
+
return () => onFieldMessageIdRemove(name, id);
|
|
354
|
+
}, [name, id, onFieldMessageIdAdd, onFieldMessageIdRemove]);
|
|
355
|
+
return /* @__PURE__ */ jsx(Primitive.span, { id, ...messageProps, ref: forwardedRef });
|
|
356
|
+
}
|
|
357
|
+
);
|
|
358
|
+
var VALIDITY_STATE_NAME = "FormValidityState";
|
|
359
|
+
var FormValidityState = (props) => {
|
|
360
|
+
const { __scopeForm, name: nameProp, children } = props;
|
|
361
|
+
const validationContext = useValidationContext(VALIDITY_STATE_NAME, __scopeForm);
|
|
362
|
+
const fieldContext = useFormFieldContext(VALIDITY_STATE_NAME, __scopeForm);
|
|
363
|
+
const name = nameProp ?? fieldContext.name;
|
|
364
|
+
const validity = validationContext.getFieldValidity(name);
|
|
365
|
+
return /* @__PURE__ */ jsx(Fragment, { children: children(validity) });
|
|
484
366
|
};
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
}
|
|
499
|
-
|
|
500
|
-
displayName: $d94698215c4408a7$var$SUBMIT_NAME
|
|
501
|
-
});
|
|
502
|
-
/* -----------------------------------------------------------------------------------------------*/ function $d94698215c4408a7$var$validityStateToObject(validity) {
|
|
503
|
-
const object = {};
|
|
504
|
-
for(const key in validity)object[key] = validity[key];
|
|
505
|
-
return object;
|
|
367
|
+
FormValidityState.displayName = VALIDITY_STATE_NAME;
|
|
368
|
+
var SUBMIT_NAME = "FormSubmit";
|
|
369
|
+
var FormSubmit = React.forwardRef(
|
|
370
|
+
(props, forwardedRef) => {
|
|
371
|
+
const { __scopeForm, ...submitProps } = props;
|
|
372
|
+
return /* @__PURE__ */ jsx(Primitive.button, { type: "submit", ...submitProps, ref: forwardedRef });
|
|
373
|
+
}
|
|
374
|
+
);
|
|
375
|
+
FormSubmit.displayName = SUBMIT_NAME;
|
|
376
|
+
function validityStateToObject(validity) {
|
|
377
|
+
const object = {};
|
|
378
|
+
for (const key in validity) {
|
|
379
|
+
object[key] = validity[key];
|
|
380
|
+
}
|
|
381
|
+
return object;
|
|
506
382
|
}
|
|
507
|
-
function
|
|
508
|
-
|
|
383
|
+
function isHTMLElement(element) {
|
|
384
|
+
return element instanceof HTMLElement;
|
|
509
385
|
}
|
|
510
|
-
function
|
|
511
|
-
|
|
386
|
+
function isFormControl(element) {
|
|
387
|
+
return "validity" in element;
|
|
512
388
|
}
|
|
513
|
-
function
|
|
514
|
-
|
|
389
|
+
function isInvalid(control) {
|
|
390
|
+
return isFormControl(control) && (control.validity.valid === false || control.getAttribute("aria-invalid") === "true");
|
|
515
391
|
}
|
|
516
|
-
function
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
392
|
+
function getFirstInvalidControl(form) {
|
|
393
|
+
const elements = form.elements;
|
|
394
|
+
const [firstInvalidControl] = Array.from(elements).filter(isHTMLElement).filter(isInvalid);
|
|
395
|
+
return firstInvalidControl;
|
|
520
396
|
}
|
|
521
|
-
function
|
|
522
|
-
|
|
397
|
+
function isAsyncCustomMatcherEntry(entry, args) {
|
|
398
|
+
return entry.match.constructor.name === "AsyncFunction" || returnsPromise(entry.match, args);
|
|
523
399
|
}
|
|
524
|
-
function
|
|
525
|
-
|
|
400
|
+
function isSyncCustomMatcherEntry(entry) {
|
|
401
|
+
return entry.match.constructor.name === "Function";
|
|
526
402
|
}
|
|
527
|
-
function
|
|
528
|
-
|
|
403
|
+
function returnsPromise(func, args) {
|
|
404
|
+
return func(...args) instanceof Promise;
|
|
529
405
|
}
|
|
530
|
-
function
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
}
|
|
406
|
+
function hasBuiltInError(validity) {
|
|
407
|
+
let error = false;
|
|
408
|
+
for (const validityKey in validity) {
|
|
409
|
+
const key = validityKey;
|
|
410
|
+
if (key !== "valid" && key !== "customError" && validity[key]) {
|
|
411
|
+
error = true;
|
|
412
|
+
break;
|
|
538
413
|
}
|
|
539
|
-
|
|
414
|
+
}
|
|
415
|
+
return error;
|
|
540
416
|
}
|
|
541
|
-
function
|
|
542
|
-
|
|
543
|
-
|
|
417
|
+
function getValidAttribute(validity, serverInvalid) {
|
|
418
|
+
if (validity?.valid === true && !serverInvalid) return true;
|
|
419
|
+
return void 0;
|
|
544
420
|
}
|
|
545
|
-
function
|
|
546
|
-
|
|
547
|
-
|
|
421
|
+
function getInvalidAttribute(validity, serverInvalid) {
|
|
422
|
+
if (validity?.valid === false || serverInvalid) return true;
|
|
423
|
+
return void 0;
|
|
548
424
|
}
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
425
|
+
var Root = Form;
|
|
426
|
+
var Field = FormField;
|
|
427
|
+
var Label = FormLabel;
|
|
428
|
+
var Control = FormControl;
|
|
429
|
+
var Message = FormMessage;
|
|
430
|
+
var ValidityState = FormValidityState;
|
|
431
|
+
var Submit = FormSubmit;
|
|
432
|
+
export {
|
|
433
|
+
Control,
|
|
434
|
+
Field,
|
|
435
|
+
Form,
|
|
436
|
+
FormControl,
|
|
437
|
+
FormField,
|
|
438
|
+
FormLabel,
|
|
439
|
+
FormMessage,
|
|
440
|
+
FormSubmit,
|
|
441
|
+
FormValidityState,
|
|
442
|
+
Label,
|
|
443
|
+
Message,
|
|
444
|
+
Root,
|
|
445
|
+
Submit,
|
|
446
|
+
ValidityState,
|
|
447
|
+
createFormScope
|
|
448
|
+
};
|
|
561
449
|
//# sourceMappingURL=index.mjs.map
|