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