@conform-to/react 0.4.1 → 0.5.0

package/helpers.d.ts

@@ -1,10 +1,13 @@
-import { type FieldConfig, type Primitive } from '@conform-to/dom';
-import { type HTMLInputTypeAttribute } from 'react';
+import type { FieldConfig } from '@conform-to/dom';
+import type { HTMLInputTypeAttribute } from 'react';
 interface FieldProps {
+    id?: string;
     name: string;
     form?: string;
     required?: boolean;
     autoFocus?: boolean;
+    'aria-invalid': boolean;
+    'aria-describedby'?: string;
 }
 interface InputProps<Schema> extends FieldProps {
     type?: HTMLInputTypeAttribute;
@@ -28,10 +31,20 @@ interface TextareaProps extends FieldProps {
     maxLength?: number;
     defaultValue?: string;
 }
-export declare function input<Schema extends Primitive>(config: FieldConfig<Schema>, { type, value }?: {
-    type?: HTMLInputTypeAttribute;
+declare type InputOptions = {
+    type: 'checkbox' | 'radio';
     value?: string;
+} | {
+    type: 'file';
+    value?: never;
+} | {
+    type?: Exclude<HTMLInputTypeAttribute, 'button' | 'submit' | 'hidden' | 'file'>;
+    value?: never;
+};
+export declare function input<Schema extends File | File[]>(config: FieldConfig<Schema>, options: {
+    type: 'file';
 }): InputProps<Schema>;
-export declare function select<Schema extends Primitive | Array<Primitive>>(config: FieldConfig<Schema>): SelectProps;
-export declare function textarea<Schema extends Primitive>(config: FieldConfig<Schema>): TextareaProps;
+export declare function input<Schema extends any>(config: FieldConfig<Schema>, options?: InputOptions): InputProps<Schema>;
+export declare function select<Schema>(config: FieldConfig<Schema>): SelectProps;
+export declare function textarea<Schema>(config: FieldConfig<Schema>): TextareaProps;
 export {};

package/helpers.js

@@ -3,13 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 function input(config) {
-  var {
-    type,
-    value
-  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var isCheckboxOrRadio = type === 'checkbox' || type === 'radio';
+  var _config$initialError;
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var attributes = {
-    type,
+    id: config.id,
+    type: options.type,
     name: config.name,
     form: config.form,
     required: config.required,
@@ -19,27 +17,33 @@ function input(config) {
     max: config.max,
     step: config.step,
     pattern: config.pattern,
-    multiple: config.multiple
+    multiple: config.multiple,
+    'aria-invalid': Boolean((_config$initialError = config.initialError) === null || _config$initialError === void 0 ? void 0 : _config$initialError.length),
+    'aria-describedby': config.errorId
   };
   if (config.initialError && config.initialError.length > 0) {
     attributes.autoFocus = true;
   }
-  if (isCheckboxOrRadio) {
-    attributes.value = value !== null && value !== void 0 ? value : 'on';
+  if (options.type === 'checkbox' || options.type === 'radio') {
+    var _options$value;
+    attributes.value = (_options$value = options.value) !== null && _options$value !== void 0 ? _options$value : 'on';
     attributes.defaultChecked = config.defaultValue === attributes.value;
-  } else {
+  } else if (options.type !== 'file') {
     attributes.defaultValue = config.defaultValue;
   }
   return attributes;
 }
 function select(config) {
-  var _config$defaultValue;
+  var _config$defaultValue, _config$initialError2;
   var attributes = {
+    id: config.id,
     name: config.name,
     form: config.form,
     defaultValue: config.multiple ? Array.isArray(config.defaultValue) ? config.defaultValue : [] : "".concat((_config$defaultValue = config.defaultValue) !== null && _config$defaultValue !== void 0 ? _config$defaultValue : ''),
     required: config.required,
-    multiple: config.multiple
+    multiple: config.multiple,
+    'aria-invalid': Boolean((_config$initialError2 = config.initialError) === null || _config$initialError2 === void 0 ? void 0 : _config$initialError2.length),
+    'aria-describedby': config.errorId
   };
   if (config.initialError && config.initialError.length > 0) {
     attributes.autoFocus = true;
@@ -47,15 +51,18 @@ function select(config) {
   return attributes;
 }
 function textarea(config) {
-  var _config$defaultValue2;
+  var _config$defaultValue2, _config$initialError3;
   var attributes = {
+    id: config.id,
     name: config.name,
     form: config.form,
     defaultValue: "".concat((_config$defaultValue2 = config.defaultValue) !== null && _config$defaultValue2 !== void 0 ? _config$defaultValue2 : ''),
     required: config.required,
     minLength: config.minLength,
     maxLength: config.maxLength,
-    autoFocus: Boolean(config.initialError)
+    autoFocus: Boolean(config.initialError),
+    'aria-invalid': Boolean((_config$initialError3 = config.initialError) === null || _config$initialError3 === void 0 ? void 0 : _config$initialError3.length),
+    'aria-describedby': config.errorId
   };
   if (config.initialError && config.initialError.length > 0) {
     attributes.autoFocus = true;

package/hooks.d.ts

@@ -1,6 +1,11 @@
-import { type FieldConfig, type FieldElement, type FieldValue, type FieldsetConstraint, type ListCommand, type Primitive, type Submission } from '@conform-to/dom';
+import { type FieldConfig, type FieldElement, type FieldValue, type FieldsetConstraint, type Primitive, type Submission } from '@conform-to/dom';
 import { type InputHTMLAttributes, type FormEvent, type RefObject } from 'react';
 export interface FormConfig<Schema extends Record<string, any>> {
+    /**
+     * If the form id is provided, Id for label,
+     * input and error elements will be derived.
+     */
+    id?: string;
     /**
      * Validation mode. Default to `client-only`.
      */
@@ -20,6 +25,10 @@ export interface FormConfig<Schema extends Record<string, any>> {
      * An object describing the state from the last submission
      */
     state?: Submission<Schema>;
+    /**
+     * An object describing the constraint of each field
+     */
+    constraint?: FieldsetConstraint<Schema>;
     /**
      * Enable native validation before hydation.
      *
@@ -53,10 +62,12 @@ export interface FormConfig<Schema extends Record<string, any>> {
  */
 interface FormProps {
     ref: RefObject<HTMLFormElement>;
+    id?: string;
     onSubmit: (event: FormEvent<HTMLFormElement>) => void;
     noValidate: boolean;
 }
 interface Form<Schema extends Record<string, any>> {
+    id?: string;
     ref: RefObject<HTMLFormElement>;
     error: string;
     props: FormProps;
@@ -66,9 +77,9 @@ interface Form<Schema extends Record<string, any>> {
  * Returns properties required to hook into form events.
  * Applied custom validation and define when error should be reported.
  *
- * @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#useform
+ * @see https://conform.guide/api/react#useform
  */
-export declare function useForm<Schema extends Record<string, any>>(config?: FormConfig<Schema>): Form<Schema>;
+export declare function useForm<Schema extends Record<string, any>>(config?: FormConfig<Schema>): [Form<Schema>, Fieldset<Schema>];
 /**
  * All the information of the field, including state and config.
  */
@@ -107,38 +118,21 @@ export interface FieldsetConfig<Schema extends Record<string, any>> {
 /**
  * Returns all the information about the fieldset.
  *
- * @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#usefieldset
+ * @see https://conform.guide/api/react#usefieldset
  */
 export declare function useFieldset<Schema extends Record<string, any>>(ref: RefObject<HTMLFormElement | HTMLFieldSetElement>, config: FieldsetConfig<Schema>): Fieldset<Schema>;
 export declare function useFieldset<Schema extends Record<string, any>>(ref: RefObject<HTMLFormElement | HTMLFieldSetElement>, config: FieldConfig<Schema>): Fieldset<Schema>;
-interface CommandButtonProps {
-    name?: string;
-    value?: string;
-    form?: string;
-    formNoValidate: true;
-}
-declare type ListCommandPayload<Schema, Type extends ListCommand<FieldValue<Schema>>['type']> = Extract<ListCommand<FieldValue<Schema>>, {
-    type: Type;
-}>['payload'];
 /**
  * Returns a list of key and config, with a group of helpers
  * configuring buttons for list manipulation
  *
- * @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#usefieldlist
+ * @see https://conform.guide/api/react#usefieldlist
  */
-export declare function useFieldList<Payload = any>(ref: RefObject<HTMLFormElement | HTMLFieldSetElement>, config: FieldConfig<Array<Payload>>): [
-    Array<{
-        key: string;
-        config: FieldConfig<Payload>;
-    }>,
-    {
-        prepend(payload?: ListCommandPayload<Payload, 'prepend'>): CommandButtonProps;
-        append(payload?: ListCommandPayload<Payload, 'append'>): CommandButtonProps;
-        replace(payload: ListCommandPayload<Payload, 'replace'>): CommandButtonProps;
-        remove(payload: ListCommandPayload<Payload, 'remove'>): CommandButtonProps;
-        reorder(payload: ListCommandPayload<Payload, 'reorder'>): CommandButtonProps;
-    }
-];
+export declare function useFieldList<Payload = any>(ref: RefObject<HTMLFormElement | HTMLFieldSetElement>, config: FieldConfig<Array<Payload>>): Array<{
+    key: string;
+    error: string | undefined;
+    config: FieldConfig<Payload>;
+}>;
 interface ShadowInputProps extends InputHTMLAttributes<HTMLInputElement> {
     ref: RefObject<HTMLInputElement>;
 }
@@ -160,7 +154,7 @@ interface InputControl<Element extends {
  * This is particular useful when integrating dropdown and datepicker whichs
  * introduces custom input mode.
  *
- * @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#usecontrolledinput
+ * @see https://conform.guide/api/react#usecontrolledinput
  */
 export declare function useControlledInput<Element extends {
     focus: () => void;

package/hooks.js

@@ -11,7 +11,7 @@ var helpers = require('./helpers.js');
  * Returns properties required to hook into form events.
  * Applied custom validation and define when error should be reported.
  *
- * @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#useform
+ * @see https://conform.guide/api/react#useform
  */
 function useForm() {
   var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -25,17 +25,26 @@ function useForm() {
     })) !== null && _config$state$error$f !== void 0 ? _config$state$error$f : [];
     return message !== null && message !== void 0 ? message : '';
   });
-  var [fieldsetConfig, setFieldsetConfig] = react.useState(() => {
-    var _config$state$error2, _config$state2, _config$state$value, _config$state3;
-    var error = (_config$state$error2 = (_config$state2 = config.state) === null || _config$state2 === void 0 ? void 0 : _config$state2.error) !== null && _config$state$error2 !== void 0 ? _config$state$error2 : [];
+  var [uncontrolledState, setUncontrolledState] = react.useState(() => {
+    var submission = config.state;
+    if (!submission) {
+      return {
+        defaultValue: config.defaultValue
+      };
+    }
     return {
-      defaultValue: (_config$state$value = (_config$state3 = config.state) === null || _config$state3 === void 0 ? void 0 : _config$state3.value) !== null && _config$state$value !== void 0 ? _config$state$value : config.defaultValue,
-      initialError: error.filter(_ref2 => {
+      defaultValue: submission.value,
+      initialError: submission.error.filter(_ref2 => {
         var [name] = _ref2;
-        return name !== '' && dom.getSubmissionType(name) === null;
+        return name !== '' && dom.shouldValidate(submission, name);
       })
     };
   });
+  var fieldsetConfig = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, uncontrolledState), {}, {
+    constraint: config.constraint,
+    form: config.id
+  });
+  var fieldset = useFieldset(ref, fieldsetConfig);
   var [noValidate, setNoValidate] = react.useState(config.noValidate || !config.fallbackNative);
   react.useEffect(() => {
     configRef.current = config;
@@ -48,11 +57,7 @@ function useForm() {
     if (!form || !config.state) {
       return;
     }
-    dom.setFormError(form, config.state);
-    if (!form.reportValidity()) {
-      dom.focusFirstInvalidField(form);
-    }
-    dom.requestSubmit(form);
+    dom.reportSubmission(form, config.state);
   }, [config.state]);
   react.useEffect(() => {
     // Revalidate the form when input value is changed
@@ -63,11 +68,8 @@ function useForm() {
       if (!form || !dom.isFieldElement(field) || field.form !== form) {
         return;
       }
-      if (formConfig.initialReport === 'onChange') {
-        field.dataset.conformTouched = 'true';
-      }
-      if (field.dataset.conformTouched) {
-        dom.requestValidate(form, field.name);
+      if (field.dataset.conformTouched || formConfig.initialReport === 'onChange') {
+        dom.requestCommand(form, dom.validate(field.name));
       }
     };
     var handleBlur = event => {
@@ -78,14 +80,13 @@ function useForm() {
         return;
       }
       if (formConfig.initialReport === 'onBlur' && !field.dataset.conformTouched) {
-        field.dataset.conformTouched = 'true';
-        dom.requestValidate(form, field.name);
+        dom.requestCommand(form, dom.validate(field.name));
       }
     };
     var handleInvalid = event => {
       var form = dom.getFormElement(ref.current);
       var field = event.target;
-      if (!form || !dom.isFieldElement(field) || field.form !== form || field.name !== '') {
+      if (!form || !dom.isFieldElement(field) || field.form !== form || field.name !== '__form__') {
         return;
       }
       event.preventDefault();
@@ -104,11 +105,12 @@ function useForm() {
       for (var field of form.elements) {
         if (dom.isFieldElement(field)) {
           delete field.dataset.conformTouched;
+          field.setAttribute('aria-invalid', 'false');
           field.setCustomValidity('');
         }
       }
       setError('');
-      setFieldsetConfig({
+      setUncontrolledState({
         defaultValue: formConfig.defaultValue,
         initialError: []
       });
@@ -131,22 +133,18 @@ function useForm() {
       document.removeEventListener('reset', handleReset);
     };
   }, []);
-  return {
+  var form = {
+    id: config.id,
     ref,
     error,
     props: {
       ref,
+      id: config.id,
       noValidate,
       onSubmit(event) {
         var form = event.currentTarget;
         var nativeEvent = event.nativeEvent;
         var submitter = nativeEvent.submitter;
-        for (var element of form.elements) {
-          if (dom.isFieldElement(element) && element.name === '' && element.willValidate) {
-            setError(element.validationMessage);
-            break;
-          }
-        }
 
         /**
          * It checks defaultPrevented to confirm if the submission is intentional
@@ -154,8 +152,7 @@ function useForm() {
          * event is captured and revalidate the form with new fields without triggering
          * a form submission at the same time.
          */
-        if (!submitter || event.defaultPrevented) {
-          event.preventDefault();
+        if (event.defaultPrevented) {
           return;
         }
         try {
@@ -176,29 +173,15 @@ function useForm() {
                *
                * This is mainly used to showcase the constraint validation API.
                */
-              dom.setFormError(form, {
-                type: 'submit',
-                value: {},
-                error: []
-              });
-              for (var _element of form.elements) {
-                if (dom.isFieldElement(_element) && _element.willValidate) {
-                  submission.error.push([_element.name, _element.validationMessage]);
+              for (var element of form.elements) {
+                if (dom.isFieldElement(element) && element.willValidate) {
+                  element.setCustomValidity('');
+                  submission.error.push([element.name, element.validationMessage]);
                 }
               }
             }
           }
-
-          // Touch all fields only if the submitter is not a command button
-          if (submission.type === 'submit') {
-            for (var field of form.elements) {
-              if (dom.isFieldElement(field)) {
-                // Mark the field as touched
-                field.dataset.conformTouched = 'true';
-              }
-            }
-          }
-          if (!config.noValidate && !submitter.formNoValidate && dom.hasError(submission.error) || submission.type === 'validate' && config.mode !== 'server-validation') {
+          if (!config.noValidate && !(submitter !== null && submitter !== void 0 && submitter.formNoValidate) && dom.hasError(submission.error) || submission.type === 'validate' && config.mode !== 'server-validation') {
             event.preventDefault();
           } else {
             var _config$onSubmit;
@@ -208,10 +191,7 @@ function useForm() {
             });
           }
           if (event.defaultPrevented) {
-            dom.setFormError(form, submission);
-            if (!form.reportValidity()) {
-              dom.focusFirstInvalidField(form);
-            }
+            dom.reportSubmission(form, submission);
           }
         } catch (e) {
           console.warn(e);
@@ -220,6 +200,7 @@ function useForm() {
     },
     config: fieldsetConfig
   };
+  return [form, fieldset];
 }
 
 /**
@@ -280,6 +261,10 @@ function useFieldset(ref, config) {
       // Update the error only if the field belongs to the fieldset
       if (typeof key === 'string' && paths.length === 0) {
         if (field.dataset.conformTouched) {
+          // Update the aria attribute only if it is set
+          if (field.getAttribute('aria-invalid')) {
+            field.setAttribute('aria-invalid', field.validationMessage !== '' ? 'true' : 'false');
+          }
           setError(prev => {
             var _prev$key;
             var prevMessage = (_prev$key = prev === null || prev === void 0 ? void 0 : prev[key]) !== null && _prev$key !== void 0 ? _prev$key : '';
@@ -294,38 +279,6 @@ function useFieldset(ref, config) {
         event.preventDefault();
       }
     };
-    var submitHandler = event => {
-      var form = dom.getFormElement(ref.current);
-      if (!form || event.target !== form) {
-        return;
-      }
-
-      /**
-       * Reset the error state of each field if its validity is changed.
-       *
-       * This is a workaround as no official way is provided to notify
-       * when the validity of the field is changed from `invalid` to `valid`.
-       */
-      setError(prev => {
-        var _configRef$current$na2;
-        var next = prev;
-        var fieldsetName = (_configRef$current$na2 = configRef.current.name) !== null && _configRef$current$na2 !== void 0 ? _configRef$current$na2 : '';
-        for (var field of form.elements) {
-          if (dom.isFieldElement(field) && field.name.startsWith(fieldsetName)) {
-            var _next$key, _next;
-            var key = fieldsetName ? field.name.slice(fieldsetName.length + 1) : field.name;
-            var prevMessage = (_next$key = (_next = next) === null || _next === void 0 ? void 0 : _next[key]) !== null && _next$key !== void 0 ? _next$key : '';
-            var nextMessage = field.validationMessage;
-            if (prevMessage !== '' && nextMessage === '') {
-              next = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, next), {}, {
-                [key]: ''
-              });
-            }
-          }
-        }
-        return next;
-      });
-    };
     var resetHandler = event => {
       var _fieldsetConfig$defau;
       var form = dom.getFormElement(ref.current);
@@ -343,11 +296,9 @@ function useFieldset(ref, config) {
 
     // The invalid event does not bubble and so listening on the capturing pharse is needed
     document.addEventListener('invalid', invalidHandler, true);
-    document.addEventListener('submit', submitHandler);
     document.addEventListener('reset', resetHandler);
     return () => {
       document.removeEventListener('invalid', invalidHandler, true);
-      document.removeEventListener('submit', submitHandler);
       document.removeEventListener('reset', resetHandler);
     };
   }, [ref]);
@@ -368,21 +319,26 @@ function useFieldset(ref, config) {
       var field = {
         config: _rollupPluginBabelHelpers.objectSpread2({
           name: fieldsetConfig.name ? "".concat(fieldsetConfig.name, ".").concat(key) : key,
-          form: fieldsetConfig.form,
           defaultValue: uncontrolledState.defaultValue[key],
           initialError: uncontrolledState.initialError[key]
         }, constraint),
         error: (_error$key = error === null || error === void 0 ? void 0 : error[key]) !== null && _error$key !== void 0 ? _error$key : ''
       };
+      if (fieldsetConfig.form) {
+        field.config.form = fieldsetConfig.form;
+        field.config.id = "".concat(fieldsetConfig.form, "-").concat(field.config.name);
+        field.config.errorId = "".concat(field.config.id, "-error");
+      }
       return field;
     }
   });
 }
+
 /**
  * Returns a list of key and config, with a group of helpers
  * configuring buttons for list manipulation
  *
- * @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#usefieldlist
+ * @see https://conform.guide/api/react#usefieldlist
  */
 function useFieldList(ref, config) {
   var configRef = react.useRef(config);
@@ -408,48 +364,40 @@ function useFieldList(ref, config) {
       initialError
     };
   });
+  var [error, setError] = react.useState(() => uncontrolledState.initialError.map(error => error === null || error === void 0 ? void 0 : error[0][1]));
   var [entries, setEntries] = react.useState(() => {
     var _config$defaultValue3;
     return Object.entries((_config$defaultValue3 = config.defaultValue) !== null && _config$defaultValue3 !== void 0 ? _config$defaultValue3 : [undefined]);
   });
-  var list = entries.map((_ref3, index) => {
-    var [key, defaultValue] = _ref3;
-    return {
-      key,
-      config: {
-        name: "".concat(config.name, "[").concat(index, "]"),
-        form: config.form,
-        defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : uncontrolledState.defaultValue[index],
-        initialError: uncontrolledState.initialError[index]
-      }
-    };
-  });
-
-  /***
-   * This use proxy to capture all information about the command and
-   * have it encoded in the value.
-   */
-  var command = new Proxy({}, {
-    get(_target, type) {
-      return function () {
-        var payload = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-        return {
-          name: 'conform/list',
-          value: JSON.stringify({
-            type,
-            scope: config.name,
-            payload
-          }),
-          form: config.form,
-          formNoValidate: true
-        };
-      };
-    }
-  });
   react.useEffect(() => {
     configRef.current = config;
   });
   react.useEffect(() => {
+    var invalidHandler = event => {
+      var _configRef$current$na2;
+      var form = dom.getFormElement(ref.current);
+      var field = event.target;
+      var prefix = (_configRef$current$na2 = configRef.current.name) !== null && _configRef$current$na2 !== void 0 ? _configRef$current$na2 : '';
+      if (!form || !dom.isFieldElement(field) || field.form !== form || !field.name.startsWith(prefix)) {
+        return;
+      }
+      var [index, ...paths] = dom.getPaths(prefix.length > 0 ? field.name.slice(prefix.length) : field.name);
+
+      // Update the error only if the field belongs to the fieldset
+      if (typeof index === 'number' && paths.length === 0) {
+        if (field.dataset.conformTouched) {
+          setError(prev => {
+            var _prev$index;
+            var prevMessage = (_prev$index = prev === null || prev === void 0 ? void 0 : prev[index]) !== null && _prev$index !== void 0 ? _prev$index : '';
+            if (prevMessage === field.validationMessage) {
+              return prev;
+            }
+            return [...prev.slice(0, index), field.validationMessage, ...prev.slice(index + 1)];
+          });
+        }
+        event.preventDefault();
+      }
+    };
     var submitHandler = event => {
       var form = dom.getFormElement(ref.current);
       if (!form || event.target !== form || !(event.submitter instanceof HTMLButtonElement) || event.submitter.name !== 'conform/list') {
@@ -476,6 +424,22 @@ function useFieldList(ref, config) {
             }
         }
       });
+      setError(error => {
+        switch (command.type) {
+          case 'append':
+          case 'prepend':
+          case 'replace':
+            return dom.updateList([...error], _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, command), {}, {
+              payload: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, command.payload), {}, {
+                defaultValue: undefined
+              })
+            }));
+          default:
+            {
+              return dom.updateList([...error], command);
+            }
+        }
+      });
       event.preventDefault();
     };
     var resetHandler = event => {
@@ -490,24 +454,42 @@ function useFieldList(ref, config) {
         initialError: []
       });
       setEntries(Object.entries((_fieldConfig$defaultV2 = fieldConfig.defaultValue) !== null && _fieldConfig$defaultV2 !== void 0 ? _fieldConfig$defaultV2 : [undefined]));
+      setError([]);
     };
     document.addEventListener('submit', submitHandler, true);
+    document.addEventListener('invalid', invalidHandler, true);
     document.addEventListener('reset', resetHandler);
     return () => {
       document.removeEventListener('submit', submitHandler, true);
+      document.removeEventListener('invalid', invalidHandler, true);
       document.removeEventListener('reset', resetHandler);
     };
   }, [ref]);
-  return [list,
-  // @ts-expect-error proxy type
-  command];
+  return entries.map((_ref3, index) => {
+    var [key, defaultValue] = _ref3;
+    var fieldConfig = {
+      name: "".concat(config.name, "[").concat(index, "]"),
+      defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : uncontrolledState.defaultValue[index],
+      initialError: uncontrolledState.initialError[index]
+    };
+    if (config.form) {
+      fieldConfig.form = config.form;
+      fieldConfig.id = "".concat(config.form, "-").concat(config.name);
+      fieldConfig.errorId = "".concat(fieldConfig.id, "-error");
+    }
+    return {
+      key,
+      error: error[index],
+      config: fieldConfig
+    };
+  });
 }
 /**
  * Returns the properties required to configure a shadow input for validation.
  * This is particular useful when integrating dropdown and datepicker whichs
  * introduces custom input mode.
  *
- * @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#usecontrolledinput
+ * @see https://conform.guide/api/react#usecontrolledinput
  */
 function useControlledInput(config) {
   var _config$defaultValue4;

package/index.d.ts

@@ -1,3 +1,3 @@
-export { type FieldConfig, type FieldsetConstraint, type Submission, getFormElements, hasError, parse, shouldValidate, } from '@conform-to/dom';
+export { type FieldConfig, type FieldsetConstraint, type Submission, getFormElements, hasError, list, validate, requestCommand, requestSubmit, parse, shouldValidate, } from '@conform-to/dom';
 export * from './hooks';
 export * as conform from './helpers';