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