@conform-to/react 0.6.0 → 0.6.2

package/hooks.js

@@ -6,6 +6,122 @@ var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js
 var dom = require('@conform-to/dom');
 var react = require('react');
 
+/**
+ * Normalize error to an array of string.
+ */
+function normalizeError(error) {
+  if (!error) {
+    // This treat both empty string and undefined as no error.
+    return [];
+  }
+  return [].concat(error);
+}
+function useNoValidate(defaultNoValidate, validateBeforeHydrate) {
+  var [noValidate, setNoValidate] = react.useState(defaultNoValidate || !validateBeforeHydrate);
+  react.useEffect(() => {
+    setNoValidate(true);
+  }, []);
+  return noValidate;
+}
+function useFormRef(userProvidedRef) {
+  var formRef = react.useRef(null);
+  return userProvidedRef !== null && userProvidedRef !== void 0 ? userProvidedRef : formRef;
+}
+function useConfigRef(config) {
+  var ref = react.useRef(config);
+  useSafeLayoutEffect(() => {
+    ref.current = config;
+  });
+  return ref;
+}
+function useFormReporter(ref, lastSubmission) {
+  var [submission, setSubmission] = react.useState(lastSubmission);
+  var report = react.useCallback((form, submission) => {
+    var event = new CustomEvent('conform', {
+      detail: submission.intent
+    });
+    form.dispatchEvent(event);
+    setSubmission(submission);
+  }, []);
+  react.useEffect(() => {
+    var form = ref.current;
+    if (!form || !lastSubmission) {
+      return;
+    }
+    report(form, lastSubmission);
+  }, [ref, lastSubmission, report]);
+  react.useEffect(() => {
+    var form = ref.current;
+    if (!form || !submission) {
+      return;
+    }
+    reportSubmission(form, submission);
+  }, [ref, submission]);
+  return report;
+}
+function useFormError(ref, config) {
+  var [error, setError] = react.useState(() => {
+    if (!config.initialError) {
+      return {};
+    }
+    var result = {};
+    for (var [name, message] of Object.entries(config.initialError)) {
+      var paths = dom.getPaths(name);
+      if (paths.length === 1) {
+        result[paths[0]] = normalizeError(message);
+      }
+    }
+    return result;
+  });
+  react.useEffect(() => {
+    var handleInvalid = event => {
+      var form = dom.getFormElement(ref.current);
+      var element = event.target;
+      if (!dom.isFieldElement(element) || element.form !== form || !element.dataset.conformTouched) {
+        return;
+      }
+      var key = element.name;
+      if (config.name) {
+        var scopePaths = dom.getPaths(config.name);
+        var fieldPaths = dom.getPaths(element.name);
+        for (var i = 0; i <= scopePaths.length; i++) {
+          var path = fieldPaths[i];
+          if (i < scopePaths.length) {
+            // Skip if the field is not in the scope
+            if (path !== scopePaths[i]) {
+              return;
+            }
+          } else {
+            key = path;
+          }
+        }
+      }
+      setError(prev => {
+        if (element.validationMessage === dom.getValidationMessage(prev[key])) {
+          return prev;
+        }
+        return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, {
+          [key]: dom.getErrors(element.validationMessage)
+        });
+      });
+      event.preventDefault();
+    };
+    var handleReset = event => {
+      var form = dom.getFormElement(ref.current);
+      if (form && event.target === form) {
+        setError({});
+      }
+    };
+    document.addEventListener('reset', handleReset);
+    document.addEventListener('invalid', handleInvalid, true);
+    return () => {
+      document.removeEventListener('reset', handleReset);
+      document.removeEventListener('invalid', handleInvalid, true);
+    };
+  }, [ref, config.name]);
+  return [error, setError];
+}
+
 /**
  * Returns properties required to hook into form events.
  * Applied custom validation and define when error should be reported.
@@ -13,97 +129,53 @@ var react = require('react');
  * @see https://conform.guide/api/react#useform
  */
 function useForm() {
-  var _config$lastSubmissio;
+  var _ref, _config$lastSubmissio2;
   var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var configRef = react.useRef(config);
-  var ref = react.useRef(null);
-  var [lastSubmission, setLastSubmission] = react.useState((_config$lastSubmissio = config.lastSubmission) !== null && _config$lastSubmissio !== void 0 ? _config$lastSubmissio : null);
+  var configRef = useConfigRef(config);
+  var ref = useFormRef(config.ref);
+  var noValidate = useNoValidate(config.noValidate, config.fallbackNative);
+  var report = useFormReporter(ref, config.lastSubmission);
   var [errors, setErrors] = react.useState(() => {
-    if (!config.lastSubmission) {
-      return [];
-    }
-    return [].concat(config.lastSubmission.error['']);
+    var _config$lastSubmissio;
+    return normalizeError((_config$lastSubmissio = config.lastSubmission) === null || _config$lastSubmissio === void 0 ? void 0 : _config$lastSubmissio.error['']);
   });
-  var [uncontrolledState, setUncontrolledState] = react.useState(() => {
+  var initialError = react.useMemo(() => {
     var submission = config.lastSubmission;
     if (!submission) {
-      return {
-        defaultValue: config.defaultValue
-      };
+      return {};
     }
     var scope = dom.getScope(submission.intent);
-    return {
-      defaultValue: submission.payload,
-      initialError: Object.entries(submission.error).reduce((result, _ref) => {
-        var [name, message] = _ref;
-        if (name !== '' && (scope === null || scope === name)) {
-          result[name] = message;
-        }
-        return result;
-      }, {})
+    return scope === null ? submission.error : {
+      [scope]: submission.error[scope]
     };
-  });
-  var fieldsetConfig = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, uncontrolledState), {}, {
+  }, [config.lastSubmission]);
+  var fieldset = useFieldset(ref, {
+    defaultValue: (_ref = (_config$lastSubmissio2 = config.lastSubmission) === null || _config$lastSubmissio2 === void 0 ? void 0 : _config$lastSubmissio2.payload) !== null && _ref !== void 0 ? _ref : config.defaultValue,
+    initialError,
     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;
-  });
-  react.useEffect(() => {
-    setNoValidate(true);
-  }, []);
-  react.useEffect(() => {
-    var form = ref.current;
-    var submission = config.lastSubmission;
-    if (!form || !submission) {
-      return;
-    }
-    var listCommand = dom.parseListCommand(submission.intent);
-    if (listCommand) {
-      form.dispatchEvent(new CustomEvent('conform/list', {
-        detail: submission.intent
-      }));
-    }
-    setLastSubmission(submission);
-  }, [config.lastSubmission]);
-  react.useEffect(() => {
-    var form = ref.current;
-    if (!form || !lastSubmission) {
-      return;
-    }
-    dom.reportSubmission(ref.current, lastSubmission);
-  }, [lastSubmission]);
-  react.useEffect(() => {
-    // Revalidate the form when input value is changed
-    var handleInput = event => {
+    // custom validate handler
+    var createValidateHandler = name => event => {
       var field = event.target;
       var form = ref.current;
-      var formConfig = configRef.current;
-      if (!form || !dom.isFieldElement(field) || field.form !== form) {
+      var {
+        initialReport = 'onSubmit',
+        shouldValidate = initialReport === 'onChange' ? 'onInput' : initialReport,
+        shouldRevalidate = 'onInput'
+      } = configRef.current;
+      if (!form || !dom.isFocusableFormControl(field) || field.form !== form) {
         return;
       }
-      if (field.dataset.conformTouched || formConfig.initialReport === 'onChange') {
-        dom.requestIntent(form, dom.validate(field.name));
-      }
-    };
-    var handleBlur = event => {
-      var field = event.target;
-      var form = ref.current;
-      var formConfig = configRef.current;
-      if (!form || !dom.isFieldElement(field) || field.form !== form) {
-        return;
-      }
-      if (formConfig.initialReport === 'onBlur' && !field.dataset.conformTouched) {
+      if (field.dataset.conformTouched ? shouldRevalidate === name : shouldValidate === name) {
         dom.requestIntent(form, dom.validate(field.name));
       }
     };
     var handleInvalid = event => {
-      var form = dom.getFormElement(ref.current);
+      var form = ref.current;
       var field = event.target;
-      if (!form || !dom.isFieldElement(field) || field.form !== form || field.name !== dom.FORM_ERROR_ELEMENT_NAME) {
+      if (!form || !dom.isFieldElement(field) || field.form !== form || field.name !== FORM_ERROR_ELEMENT_NAME) {
         return;
       }
       event.preventDefault();
@@ -113,30 +185,19 @@ function useForm() {
     };
     var handleReset = event => {
       var form = ref.current;
-      var formConfig = configRef.current;
       if (!form || event.target !== form) {
         return;
       }
 
       // Reset all field state
-      for (var field of form.elements) {
-        if (dom.isFieldElement(field)) {
-          delete field.dataset.conformTouched;
-          field.setCustomValidity('');
-        }
+      for (var element of dom.getFormControls(form)) {
+        delete element.dataset.conformTouched;
+        element.setCustomValidity('');
       }
       setErrors([]);
-      setUncontrolledState({
-        defaultValue: formConfig.defaultValue
-      });
     };
-
-    /**
-     * The input event handler will be triggered in capturing phase in order to
-     * allow follow-up action in the bubble phase based on the latest validity
-    	 * E.g. `useFieldset` reset the error of valid field after checking the
-     * validity in the bubble phase.
-     */
+    var handleInput = createValidateHandler('onInput');
+    var handleBlur = createValidateHandler('onBlur');
     document.addEventListener('input', handleInput, true);
     document.addEventListener('blur', handleBlur, true);
     document.addEventListener('invalid', handleInvalid, true);
@@ -147,7 +208,7 @@ function useForm() {
       document.removeEventListener('invalid', handleInvalid, true);
       document.removeEventListener('reset', handleReset);
     };
-  }, []);
+  }, [ref, configRef]);
   var form = {
     ref,
     error: errors[0],
@@ -163,34 +224,32 @@ function useForm() {
           return;
         }
         try {
-          var _config$onValidate;
+          var _config$onValidate, _config$onValidate2;
           var formData = dom.getFormData(form, submitter);
-          var getSubmission = (_config$onValidate = config.onValidate) !== null && _config$onValidate !== void 0 ? _config$onValidate : context => dom.parse(context.formData);
-          var submission = getSubmission({
+          var submission = (_config$onValidate = (_config$onValidate2 = config.onValidate) === null || _config$onValidate2 === void 0 ? void 0 : _config$onValidate2.call(config, {
             form,
             formData
-          });
-          if (!config.noValidate && !(submitter !== null && submitter !== void 0 && submitter.formNoValidate) && Object.entries(submission.error).some(_ref2 => {
+          })) !== null && _config$onValidate !== void 0 ? _config$onValidate : dom.parse(formData);
+          var messages = Object.entries(submission.error).reduce((messages, _ref2) => {
             var [, message] = _ref2;
-            return message !== '' && ![].concat(message).includes(dom.VALIDATION_UNDEFINED);
-          }) || typeof config.onValidate !== 'undefined' && (submission.intent.startsWith('validate') || submission.intent.startsWith('list')) && Object.entries(submission.error).every(_ref3 => {
-            var [, message] = _ref3;
-            return ![].concat(message).includes(dom.VALIDATION_UNDEFINED);
-          })) {
-            var listCommand = dom.parseListCommand(submission.intent);
-            if (listCommand) {
-              form.dispatchEvent(new CustomEvent('conform/list', {
-                detail: submission.intent
-              }));
-            }
-            setLastSubmission(submission);
+            return messages.concat(normalizeError(message));
+          }, []);
+          var shouldValidate = !config.noValidate && !(submitter !== null && submitter !== void 0 && submitter.formNoValidate);
+          var shouldFallbackToServer = messages.includes(VALIDATION_UNDEFINED);
+          var hasClientValidation = typeof config.onValidate !== 'undefined';
+          var isValid = messages.length === 0;
+          if (hasClientValidation && (dom.isSubmitting(submission.intent) ? shouldValidate && !isValid : !shouldFallbackToServer)) {
+            report(form, submission);
             event.preventDefault();
           } else {
             var _config$onSubmit;
-            (_config$onSubmit = config.onSubmit) === null || _config$onSubmit === void 0 ? void 0 : _config$onSubmit.call(config, event, _rollupPluginBabelHelpers.objectSpread2({
+            (_config$onSubmit = config.onSubmit) === null || _config$onSubmit === void 0 ? void 0 : _config$onSubmit.call(config, event, {
               formData,
-              submission
-            }, dom.getFormAttributes(form, submitter)));
+              submission,
+              action: dom.getFormAction(nativeEvent),
+              encType: dom.getFormEncType(nativeEvent),
+              method: dom.getFormMethod(nativeEvent)
+            });
           }
         } catch (e) {
           console.warn(e);
@@ -202,10 +261,10 @@ function useForm() {
     form.id = config.id;
     form.errorId = "".concat(config.id, "-error");
     form.props.id = form.id;
-    form.props['aria-describedby'] = form.errorId;
   }
   if (form.errorId && form.errors.length > 0) {
     form.props['aria-invalid'] = 'true';
+    form.props['aria-describedby'] = form.errorId;
   }
   return [form, fieldset];
 }
@@ -215,88 +274,10 @@ function useForm() {
  */
 
 function useFieldset(ref, config) {
-  var configRef = react.useRef(config);
-  var [uncontrolledState, setUncontrolledState] = react.useState(
-  // @ts-expect-error
-  () => {
-    var _config$defaultValue;
-    var initialError = {};
-    for (var [name, message] of Object.entries((_config$initialError = config === null || config === void 0 ? void 0 : config.initialError) !== null && _config$initialError !== void 0 ? _config$initialError : {})) {
-      var _config$initialError;
-      var [key, ...paths] = dom.getPaths(name);
-      if (typeof key === 'string') {
-        var scopedName = dom.getName(paths);
-        initialError[key] = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, initialError[key]), {}, {
-          [scopedName]: message
-        });
-      }
-    }
-    return {
-      defaultValue: (_config$defaultValue = config === null || config === void 0 ? void 0 : config.defaultValue) !== null && _config$defaultValue !== void 0 ? _config$defaultValue : {},
-      initialError
-    };
-  });
-  var [error, setError] = react.useState(() => {
-    var result = {};
-    for (var [key, _error] of Object.entries(uncontrolledState.initialError)) {
-      var _error$;
-      result[key] = [].concat((_error$ = _error === null || _error === void 0 ? void 0 : _error['']) !== null && _error$ !== void 0 ? _error$ : []);
-    }
-    return result;
-  });
-  react.useEffect(() => {
-    configRef.current = config;
+  var [error] = useFormError(ref, {
+    initialError: config.initialError,
+    name: config.name
   });
-  react.useEffect(() => {
-    var invalidHandler = event => {
-      var _configRef$current$na;
-      var form = dom.getFormElement(ref.current);
-      var field = event.target;
-      var fieldsetName = (_configRef$current$na = configRef.current.name) !== null && _configRef$current$na !== void 0 ? _configRef$current$na : '';
-      if (!form || !dom.isFieldElement(field) || field.form !== form || !field.name.startsWith(fieldsetName)) {
-        return;
-      }
-      var [key, ...paths] = dom.getPaths(fieldsetName.length > 0 ? field.name.slice(fieldsetName.length + 1) : field.name);
-
-      // Update the error only if the field belongs to the fieldset
-      if (typeof key === 'string' && paths.length === 0) {
-        if (field.dataset.conformTouched) {
-          setError(prev => {
-            var prevMessage = dom.getValidationMessage(prev === null || prev === void 0 ? void 0 : prev[key]);
-            if (prevMessage === field.validationMessage) {
-              return prev;
-            }
-            return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, {
-              [key]: dom.getErrors(field.validationMessage)
-            });
-          });
-        }
-        event.preventDefault();
-      }
-    };
-    var resetHandler = event => {
-      var _fieldsetConfig$defau;
-      var form = dom.getFormElement(ref.current);
-      if (!form || event.target !== form) {
-        return;
-      }
-      var fieldsetConfig = configRef.current;
-      setUncontrolledState({
-        // @ts-expect-error
-        defaultValue: (_fieldsetConfig$defau = fieldsetConfig === null || fieldsetConfig === void 0 ? void 0 : fieldsetConfig.defaultValue) !== null && _fieldsetConfig$defau !== void 0 ? _fieldsetConfig$defau : {},
-        initialError: {}
-      });
-      setError({});
-    };
-
-    // The invalid event does not bubble and so listening on the capturing pharse is needed
-    document.addEventListener('invalid', invalidHandler, true);
-    document.addEventListener('reset', resetHandler);
-    return () => {
-      document.removeEventListener('invalid', invalidHandler, true);
-      document.removeEventListener('reset', resetHandler);
-    };
-  }, [ref]);
 
   /**
    * This allows us constructing the field at runtime as we have no information
@@ -305,17 +286,25 @@ function useFieldset(ref, config) {
    */
   return new Proxy({}, {
     get(_target, key) {
-      var _fieldsetConfig$const;
+      var _fieldsetConfig$const, _fieldsetConfig$initi, _fieldsetConfig$defau;
       if (typeof key !== 'string') {
         return;
       }
-      var fieldsetConfig = config !== null && config !== void 0 ? config : {};
+      var fieldsetConfig = config;
       var constraint = (_fieldsetConfig$const = fieldsetConfig.constraint) === null || _fieldsetConfig$const === void 0 ? void 0 : _fieldsetConfig$const[key];
       var errors = error === null || error === void 0 ? void 0 : error[key];
+      var initialError = Object.entries((_fieldsetConfig$initi = fieldsetConfig.initialError) !== null && _fieldsetConfig$initi !== void 0 ? _fieldsetConfig$initi : {}).reduce((result, _ref3) => {
+        var [name, message] = _ref3;
+        var [field, ...paths] = dom.getPaths(name);
+        if (field === key) {
+          result[dom.getName(paths)] = message;
+        }
+        return result;
+      }, {});
       var field = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, constraint), {}, {
         name: fieldsetConfig.name ? "".concat(fieldsetConfig.name, ".").concat(key) : key,
-        defaultValue: uncontrolledState.defaultValue[key],
-        initialError: uncontrolledState.initialError[key],
+        defaultValue: (_fieldsetConfig$defau = fieldsetConfig.defaultValue) === null || _fieldsetConfig$defau === void 0 ? void 0 : _fieldsetConfig$defau[key],
+        initialError,
         error: errors === null || errors === void 0 ? void 0 : errors[0],
         errors
       });
@@ -323,6 +312,7 @@ function useFieldset(ref, config) {
         field.form = fieldsetConfig.form;
         field.id = "".concat(fieldsetConfig.form, "-").concat(field.name);
         field.errorId = "".concat(field.id, "-error");
+        field.descriptionId = "".concat(field.id, "-description");
       }
       return field;
     }
@@ -330,68 +320,22 @@ function useFieldset(ref, config) {
 }
 
 /**
- * Returns a list of key and config, with a group of helpers
- * configuring buttons for list manipulation
+ * Returns a list of key and field config.
  *
  * @see https://conform.guide/api/react#usefieldlist
  */
 function useFieldList(ref, config) {
-  var configRef = react.useRef(config);
-  var [uncontrolledState, setUncontrolledState] = react.useState(() => {
-    var _config$defaultValue2;
-    var initialError = [];
-    for (var [name, message] of Object.entries((_config$initialError2 = config === null || config === void 0 ? void 0 : config.initialError) !== null && _config$initialError2 !== void 0 ? _config$initialError2 : {})) {
-      var _config$initialError2;
-      var [index, ...paths] = dom.getPaths(name);
-      if (typeof index === 'number') {
-        var scopedName = dom.getName(paths);
-        initialError[index] = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, initialError[index]), {}, {
-          [scopedName]: message
-        });
-      }
-    }
-    return {
-      defaultValue: (_config$defaultValue2 = config.defaultValue) !== null && _config$defaultValue2 !== void 0 ? _config$defaultValue2 : [],
-      initialError
-    };
+  var configRef = useConfigRef(config);
+  var [error, setError] = useFormError(ref, {
+    initialError: config.initialError,
+    name: config.name
   });
-  var [error, setError] = react.useState(() => uncontrolledState.initialError.map(error => {
-    var _error$2;
-    return [].concat((_error$2 = error === null || error === void 0 ? void 0 : error['']) !== null && _error$2 !== void 0 ? _error$2 : []);
-  }));
   var [entries, setEntries] = react.useState(() => {
-    var _config$defaultValue3;
-    return Object.entries((_config$defaultValue3 = config.defaultValue) !== null && _config$defaultValue3 !== void 0 ? _config$defaultValue3 : [undefined]);
-  });
-  react.useEffect(() => {
-    configRef.current = config;
+    var _config$defaultValue;
+    return Object.entries((_config$defaultValue = config.defaultValue) !== null && _config$defaultValue !== void 0 ? _config$defaultValue : [undefined]);
   });
   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 prevMessage = dom.getValidationMessage(prev === null || prev === void 0 ? void 0 : prev[index]);
-            if (prevMessage === field.validationMessage) {
-              return prev;
-            }
-            return [...prev.slice(0, index), dom.getErrors(field.validationMessage), ...prev.slice(index + 1)];
-          });
-        }
-        event.preventDefault();
-      }
-    };
-    var listHandler = event => {
+    var conformHandler = event => {
       var form = dom.getFormElement(ref.current);
       if (!form || event.target !== form) {
         return;
@@ -420,55 +364,65 @@ function useFieldList(ref, config) {
         }
       });
       setError(error => {
+        var errorList = [];
+        for (var [key, messages] of Object.entries(error)) {
+          if (typeof key === 'number') {
+            errorList[key] = messages;
+          }
+        }
         switch (command.type) {
           case 'append':
           case 'prepend':
           case 'replace':
-            return dom.updateList([...error], _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, command), {}, {
+            errorList = dom.updateList(errorList, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, command), {}, {
               payload: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, command.payload), {}, {
                 defaultValue: undefined
               })
             }));
+            break;
           default:
             {
-              return dom.updateList([...error], command);
+              errorList = dom.updateList(errorList, command);
+              break;
             }
         }
+        return Object.assign({}, errorList);
       });
     };
     var resetHandler = event => {
-      var _fieldConfig$defaultV, _fieldConfig$defaultV2;
+      var _configRef$current$de;
       var form = dom.getFormElement(ref.current);
       if (!form || event.target !== form) {
         return;
       }
-      var fieldConfig = configRef.current;
-      setUncontrolledState({
-        defaultValue: (_fieldConfig$defaultV = fieldConfig.defaultValue) !== null && _fieldConfig$defaultV !== void 0 ? _fieldConfig$defaultV : [],
-        initialError: []
-      });
-      setEntries(Object.entries((_fieldConfig$defaultV2 = fieldConfig.defaultValue) !== null && _fieldConfig$defaultV2 !== void 0 ? _fieldConfig$defaultV2 : [undefined]));
-      setError([]);
+      setEntries(Object.entries((_configRef$current$de = configRef.current.defaultValue) !== null && _configRef$current$de !== void 0 ? _configRef$current$de : [undefined]));
     };
 
-    // @ts-expect-error Custom event: conform/list
-    document.addEventListener('conform/list', listHandler, true);
-    document.addEventListener('invalid', invalidHandler, true);
+    // @ts-expect-error Custom event: conform
+    document.addEventListener('conform', conformHandler, true);
     document.addEventListener('reset', resetHandler);
     return () => {
-      // @ts-expect-error Custom event: conform/list
-      document.removeEventListener('conform/list', listHandler, true);
-      document.removeEventListener('invalid', invalidHandler, true);
+      // @ts-expect-error Custom event: conform
+      document.removeEventListener('conform', conformHandler, true);
       document.removeEventListener('reset', resetHandler);
     };
-  }, [ref]);
+  }, [ref, configRef, setError]);
   return entries.map((_ref4, index) => {
+    var _config$initialError, _config$defaultValue2;
     var [key, defaultValue] = _ref4;
     var errors = error[index];
+    var initialError = Object.entries((_config$initialError = config.initialError) !== null && _config$initialError !== void 0 ? _config$initialError : {}).reduce((result, _ref5) => {
+      var [name, message] = _ref5;
+      var [field, ...paths] = dom.getPaths(name);
+      if (field === index) {
+        result[dom.getName(paths)] = message;
+      }
+      return result;
+    }, {});
     var fieldConfig = {
       name: "".concat(config.name, "[").concat(index, "]"),
-      defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : uncontrolledState.defaultValue[index],
-      initialError: uncontrolledState.initialError[index],
+      defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : (_config$defaultValue2 = config.defaultValue) === null || _config$defaultValue2 === void 0 ? void 0 : _config$defaultValue2[index],
+      initialError,
       error: errors === null || errors === void 0 ? void 0 : errors[0],
       errors
     };
@@ -476,6 +430,7 @@ function useFieldList(ref, config) {
       fieldConfig.form = config.form;
       fieldConfig.id = "".concat(config.form, "-").concat(config.name);
       fieldConfig.errorId = "".concat(fieldConfig.id, "-error");
+      fieldConfig.descriptionId = "".concat(fieldConfig.id, "-description");
     }
     return _rollupPluginBabelHelpers.objectSpread2({
       key
@@ -519,13 +474,10 @@ function setNativeValue(element, value) {
 var useSafeLayoutEffect = typeof document === 'undefined' ? react.useEffect : react.useLayoutEffect;
 function useInputEvent(options) {
   var ref = react.useRef(null);
-  var optionsRef = react.useRef(options);
+  var optionsRef = useConfigRef(options);
   var changeDispatched = react.useRef(false);
   var focusDispatched = react.useRef(false);
   var blurDispatched = react.useRef(false);
-  useSafeLayoutEffect(() => {
-    optionsRef.current = options;
-  });
   useSafeLayoutEffect(() => {
     var getInputElement = () => {
       var _optionsRef$current$g, _optionsRef$current, _optionsRef$current$g2;
@@ -654,11 +606,160 @@ function useInputEvent(options) {
         blurDispatched.current = false;
       }
     };
-  }, []);
+  }, [optionsRef]);
   return [ref, control];
 }
+var VALIDATION_UNDEFINED = '__undefined__';
+var VALIDATION_SKIPPED = '__skipped__';
+var FORM_ERROR_ELEMENT_NAME = '__form__';
+
+/**
+ * Validate the form with the Constraint Validation API
+ * @see https://conform.guide/api/react#validateconstraint
+ */
+function validateConstraint(options) {
+  var _options$formData, _options$formatMessag;
+  var formData = (_options$formData = options === null || options === void 0 ? void 0 : options.formData) !== null && _options$formData !== void 0 ? _options$formData : new FormData(options.form);
+  var getDefaultErrors = (validity, result) => {
+    var errors = [];
+    if (validity.valueMissing) errors.push('required');
+    if (validity.typeMismatch || validity.badInput) errors.push('type');
+    if (validity.tooShort) errors.push('minLength');
+    if (validity.rangeUnderflow) errors.push('min');
+    if (validity.stepMismatch) errors.push('step');
+    if (validity.tooLong) errors.push('maxLength');
+    if (validity.rangeOverflow) errors.push('max');
+    if (validity.patternMismatch) errors.push('pattern');
+    for (var [constraintName, valid] of Object.entries(result)) {
+      if (!valid) {
+        errors.push(constraintName);
+      }
+    }
+    return errors;
+  };
+  var formatMessages = (_options$formatMessag = options === null || options === void 0 ? void 0 : options.formatMessages) !== null && _options$formatMessag !== void 0 ? _options$formatMessag : _ref6 => {
+    var {
+      defaultErrors
+    } = _ref6;
+    return defaultErrors;
+  };
+  return dom.parse(formData, {
+    resolve(payload, intent) {
+      var error = {};
+      var constraintPattern = /^constraint[A-Z][^A-Z]*$/;
+      var _loop = function _loop(element) {
+        if (dom.isFieldElement(element)) {
+          var _options$acceptMultip, _options$acceptMultip2;
+          var name = element.name !== FORM_ERROR_ELEMENT_NAME ? element.name : '';
+          var constraint = Object.entries(element.dataset).reduce((result, _ref7) => {
+            var [name, attributeValue = ''] = _ref7;
+            if (constraintPattern.test(name)) {
+              var _options$constraint;
+              var constraintName = name.slice(10).toLowerCase();
+              var _validate = (_options$constraint = options.constraint) === null || _options$constraint === void 0 ? void 0 : _options$constraint[constraintName];
+              if (typeof _validate === 'function') {
+                result[constraintName] = _validate(element.value, {
+                  formData,
+                  attributeValue
+                });
+              } else {
+                console.warn("Found an \"".concat(constraintName, "\" constraint with undefined definition; Please specify it on the validateConstraint API."));
+              }
+            }
+            return result;
+          }, {});
+          var errors = formatMessages({
+            name,
+            validity: element.validity,
+            constraint,
+            defaultErrors: getDefaultErrors(element.validity, constraint)
+          });
+          var shouldAcceptMultipleErrors = (_options$acceptMultip = options === null || options === void 0 ? void 0 : (_options$acceptMultip2 = options.acceptMultipleErrors) === null || _options$acceptMultip2 === void 0 ? void 0 : _options$acceptMultip2.call(options, {
+            name,
+            payload,
+            intent
+          })) !== null && _options$acceptMultip !== void 0 ? _options$acceptMultip : false;
+          if (errors.length > 0) {
+            error[name] = shouldAcceptMultipleErrors ? errors : errors[0];
+          }
+        }
+      };
+      for (var element of options.form.elements) {
+        _loop(element);
+      }
+      return {
+        error
+      };
+    }
+  });
+}
+function reportSubmission(form, submission) {
+  for (var [name, message] of Object.entries(submission.error)) {
+    // There is no need to create a placeholder button if all we want is to reset the error
+    if (message === '') {
+      continue;
+    }
+
+    // We can't use empty string as button name
+    // As `form.element.namedItem('')` will always returns null
+    var elementName = name ? name : FORM_ERROR_ELEMENT_NAME;
+    var item = form.elements.namedItem(elementName);
+    if (item instanceof RadioNodeList) {
+      for (var field of item) {
+        if (field.type !== 'radio') {
+          console.warn('Repeated field name is not supported.');
+          continue;
+        }
+      }
+    }
+    if (item === null) {
+      // Create placeholder button to keep the error without contributing to the form data
+      var button = document.createElement('button');
+      button.name = elementName;
+      button.hidden = true;
+      button.dataset.conformTouched = 'true';
+      form.appendChild(button);
+    }
+  }
+  var scope = dom.getScope(submission.intent);
+  for (var element of dom.getFormControls(form)) {
+    var _elementName = element.name !== FORM_ERROR_ELEMENT_NAME ? element.name : '';
+    var messages = normalizeError(submission.error[_elementName]);
+    if (scope === null || scope === _elementName) {
+      element.dataset.conformTouched = 'true';
+    }
+    if (!messages.includes(VALIDATION_SKIPPED) && !messages.includes(VALIDATION_UNDEFINED)) {
+      var invalidEvent = new Event('invalid', {
+        cancelable: true
+      });
+      element.setCustomValidity(dom.getValidationMessage(messages));
+      element.dispatchEvent(invalidEvent);
+    }
+  }
+  if (dom.isSubmitting(submission.intent) || isFocusedOnIntentButton(form, submission.intent)) {
+    if (scope) {
+      dom.focusFormControl(form, scope);
+    } else {
+      dom.focusFirstInvalidControl(form);
+    }
+  }
+}
+
+/**
+ * Check if the current focus is on a intent button.
+ */
+function isFocusedOnIntentButton(form, intent) {
+  var element = document.activeElement;
+  return dom.isFieldElement(element) && element.type === 'submit' && element.form === form && element.name === dom.INTENT && element.value === intent;
+}
 
+exports.FORM_ERROR_ELEMENT_NAME = FORM_ERROR_ELEMENT_NAME;
+exports.VALIDATION_SKIPPED = VALIDATION_SKIPPED;
+exports.VALIDATION_UNDEFINED = VALIDATION_UNDEFINED;
+exports.isFocusedOnIntentButton = isFocusedOnIntentButton;
+exports.reportSubmission = reportSubmission;
 exports.useFieldList = useFieldList;
 exports.useFieldset = useFieldset;
 exports.useForm = useForm;
 exports.useInputEvent = useInputEvent;
+exports.validateConstraint = validateConstraint;