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