@conform-to/react 0.7.3 → 0.8.0-pre.0

package/README.md

@@ -156,7 +156,7 @@ function LoginForm() {
 
 ### useFieldset
 
-This hook enables you to work with [nested object](/docs/configuration.md#nested-object) by monitoring the state of each nested field and prepraing the config required.
+This hook enables you to work with [nested object](/docs/complex-structures.md#nested-object) by monitoring the state of each nested field and prepraing the config required.
 
 ```tsx
 import { useForm, useFieldset } from '@conform-to/react';
@@ -238,7 +238,7 @@ function ExampleForm() {
 
 ### useFieldList
 
-This hook enables you to work with [array](/docs/configuration.md#array) and support the [list](#list) intent button builder to modify a list. It can also be used with [useFieldset](#usefieldset) for [nested list](/docs/configuration.md#nested-list) at the same time.
+This hook enables you to work with [array](/docs/complex-structures.md#array) and support the [list](#list) intent button builder to modify a list. It can also be used with [useFieldset](#usefieldset) for [nested list](/docs/complex-structures.md#nested-list) at the same time.
 
 ```tsx
 import { useForm, useFieldList, list } from '@conform-to/react';
@@ -373,7 +373,6 @@ function Example() {
       <input
         {...conform.input(title, {
           type: 'text',
-          ariaAttributes: true,
         })}
       />
     </form>
@@ -385,7 +384,7 @@ function Example() {
 
 ### parse
 
-It parses the formData based on the [naming convention](/docs/configuration.md#naming-convention) with the validation result from the resolver.
+It parses the formData based on the [naming convention](/docs/complex-structures.md#naming-convention) with the validation result from the resolver.
 
 ```tsx
 import { parse } from '@conform-to/react';
@@ -393,16 +392,16 @@ import { parse } from '@conform-to/react';
 const formData = new FormData();
 const submission = parse(formData, {
   resolve({ email, password }) {
-    const error: Record<string, string> = {};
+    const error: Record<string, string[]> = {};
 
     if (typeof email !== 'string') {
-      error.email = 'Email is required';
+      error.email = ['Email is required'];
     } else if (!/^[^@]+@[^@]+$/.test(email)) {
-      error.email = 'Email is invalid';
+      error.email = ['Email is invalid'];
     }
 
     if (typeof password !== 'string') {
-      error.password = 'Password is required';
+      error.password = ['Password is required'];
     }
 
     if (error.email || error.password) {

package/helpers.d.ts

@@ -1,16 +1,18 @@
 import { INTENT, VALIDATION_UNDEFINED, VALIDATION_SKIPPED } from '@conform-to/dom';
 import type { FieldConfig, Primitive } from './hooks.js';
 import type { CSSProperties, HTMLInputTypeAttribute } from 'react';
-interface FormControlProps {
+interface FormElementProps {
     id?: string;
     name: string;
     form?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean;
+}
+interface FormControlProps extends FormElementProps {
     required?: boolean;
     autoFocus?: boolean;
     tabIndex?: number;
     style?: CSSProperties;
-    'aria-describedby'?: string;
-    'aria-invalid'?: boolean;
     'aria-hidden'?: boolean;
 }
 interface InputProps<Schema> extends FormControlProps {
@@ -36,14 +38,15 @@ interface TextareaProps extends FormControlProps {
     defaultValue?: string;
 }
 type BaseOptions = {
-    ariaAttributes?: false;
-    hidden?: boolean;
-} | {
-    ariaAttributes: true;
+    ariaAttributes?: true;
     description?: boolean;
+} | {
+    ariaAttributes: false;
+};
+type ControlOptions = BaseOptions & {
     hidden?: boolean;
 };
-type InputOptions = BaseOptions & ({
+type InputOptions = ControlOptions & ({
     type: 'checkbox' | 'radio';
     value?: string;
 } | {
@@ -59,6 +62,7 @@ export declare function input<Schema extends Primitive | unknown>(config: FieldC
 export declare function input<Schema extends File | File[]>(config: FieldConfig<Schema>, options: InputOptions & {
     type: 'file';
 }): InputProps<Schema>;
-export declare function select<Schema extends Primitive | Primitive[] | undefined | unknown>(config: FieldConfig<Schema>, options?: BaseOptions): SelectProps;
-export declare function textarea<Schema extends Primitive | undefined | unknown>(config: FieldConfig<Schema>, options?: BaseOptions): TextareaProps;
+export declare function select<Schema extends Primitive | Primitive[] | undefined | unknown>(config: FieldConfig<Schema>, options?: ControlOptions): SelectProps;
+export declare function textarea<Schema extends Primitive | undefined | unknown>(config: FieldConfig<Schema>, options?: ControlOptions): TextareaProps;
+export declare function fieldset<Schema extends Record<string, unknown> | undefined | unknown>(config: FieldConfig<Schema>, options?: BaseOptions): FormControlProps;
 export { INTENT, VALIDATION_UNDEFINED, VALIDATION_SKIPPED };

package/helpers.js

@@ -5,26 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
 var dom = require('@conform-to/dom');
 
-function getFormControlProps(config, options) {
-  var props = {
-    id: config.id,
-    name: config.name,
-    form: config.form,
-    required: config.required,
-    autoFocus: config.initialError && Object.entries(config.initialError).length > 0 ? true : undefined
-  };
-  if (options !== null && options !== void 0 && options.ariaAttributes) {
-    var _config$error;
-    if (config.descriptionId && options !== null && options !== void 0 && options.description) {
-      props['aria-describedby'] = config.descriptionId;
-    }
-    if (config.errorId && (_config$error = config.error) !== null && _config$error !== void 0 && _config$error.length) {
-      props['aria-invalid'] = true;
-      props['aria-describedby'] = config.descriptionId && options !== null && options !== void 0 && options.description ? "".concat(config.errorId, " ").concat(config.descriptionId) : config.errorId;
-    }
-  }
-  return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, props), options !== null && options !== void 0 && options.hidden ? hiddenProps : {});
-}
+/**
+ * Cleanup `undefined` from the dervied props
+ * To minimize conflicts when merging with user defined props
+ */
 function cleanup(props) {
   for (var key in props) {
     if (props[key] === undefined) {
@@ -33,6 +17,32 @@ function cleanup(props) {
   }
   return props;
 }
+function getFormElementProps(config) {
+  var _options$ariaAttribut, _config$error, _config$error2;
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var hasAriaAttributes = (_options$ariaAttribut = options.ariaAttributes) !== null && _options$ariaAttribut !== void 0 ? _options$ariaAttribut : true;
+  return cleanup({
+    id: config.id,
+    name: config.name,
+    form: config.form,
+    'aria-invalid': hasAriaAttributes && config.errorId && (_config$error = config.error) !== null && _config$error !== void 0 && _config$error.length ? true : undefined,
+    'aria-describedby': hasAriaAttributes ? [config.errorId && (_config$error2 = config.error) !== null && _config$error2 !== void 0 && _config$error2.length ? config.errorId : undefined, config.descriptionId && options.ariaAttributes !== false && options.description ? config.descriptionId : undefined].reduce((result, id) => {
+      if (!result) {
+        return id;
+      }
+      if (!id) {
+        return result;
+      }
+      return "".concat(result, " ").concat(id);
+    }) : undefined
+  });
+}
+function getFormControlProps(config, options) {
+  return cleanup(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormElementProps(config, options)), {}, {
+    required: config.required,
+    autoFocus: config.initialError && Object.entries(config.initialError).length > 0 ? true : undefined
+  }, options !== null && options !== void 0 && options.hidden ? hiddenProps : undefined));
+}
 var hiddenProps = {
   /**
    * Style to make the input element visually hidden
@@ -74,19 +84,20 @@ function input(config) {
   return cleanup(props);
 }
 function select(config, options) {
-  var props = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(config, options)), {}, {
+  return cleanup(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(config, options)), {}, {
     defaultValue: config.defaultValue,
     multiple: config.multiple
-  });
-  return cleanup(props);
+  }));
 }
 function textarea(config, options) {
-  var props = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(config, options)), {}, {
+  return cleanup(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(config, options)), {}, {
     defaultValue: config.defaultValue,
     minLength: config.minLength,
     maxLength: config.maxLength
-  });
-  return cleanup(props);
+  }));
+}
+function fieldset(config, options) {
+  return getFormElementProps(config, options);
 }
 
 Object.defineProperty(exports, 'INTENT', {
@@ -101,6 +112,7 @@ Object.defineProperty(exports, 'VALIDATION_UNDEFINED', {
 	enumerable: true,
 	get: function () { return dom.VALIDATION_UNDEFINED; }
 });
+exports.fieldset = fieldset;
 exports.hiddenProps = hiddenProps;
 exports.input = input;
 exports.select = select;

package/helpers.mjs

@@ -1,26 +1,10 @@
 import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
 export { INTENT, VALIDATION_SKIPPED, VALIDATION_UNDEFINED } from '@conform-to/dom';
 
-function getFormControlProps(config, options) {
-  var props = {
-    id: config.id,
-    name: config.name,
-    form: config.form,
-    required: config.required,
-    autoFocus: config.initialError && Object.entries(config.initialError).length > 0 ? true : undefined
-  };
-  if (options !== null && options !== void 0 && options.ariaAttributes) {
-    var _config$error;
-    if (config.descriptionId && options !== null && options !== void 0 && options.description) {
-      props['aria-describedby'] = config.descriptionId;
-    }
-    if (config.errorId && (_config$error = config.error) !== null && _config$error !== void 0 && _config$error.length) {
-      props['aria-invalid'] = true;
-      props['aria-describedby'] = config.descriptionId && options !== null && options !== void 0 && options.description ? "".concat(config.errorId, " ").concat(config.descriptionId) : config.errorId;
-    }
-  }
-  return _objectSpread2(_objectSpread2({}, props), options !== null && options !== void 0 && options.hidden ? hiddenProps : {});
-}
+/**
+ * Cleanup `undefined` from the dervied props
+ * To minimize conflicts when merging with user defined props
+ */
 function cleanup(props) {
   for (var key in props) {
     if (props[key] === undefined) {
@@ -29,6 +13,32 @@ function cleanup(props) {
   }
   return props;
 }
+function getFormElementProps(config) {
+  var _options$ariaAttribut, _config$error, _config$error2;
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var hasAriaAttributes = (_options$ariaAttribut = options.ariaAttributes) !== null && _options$ariaAttribut !== void 0 ? _options$ariaAttribut : true;
+  return cleanup({
+    id: config.id,
+    name: config.name,
+    form: config.form,
+    'aria-invalid': hasAriaAttributes && config.errorId && (_config$error = config.error) !== null && _config$error !== void 0 && _config$error.length ? true : undefined,
+    'aria-describedby': hasAriaAttributes ? [config.errorId && (_config$error2 = config.error) !== null && _config$error2 !== void 0 && _config$error2.length ? config.errorId : undefined, config.descriptionId && options.ariaAttributes !== false && options.description ? config.descriptionId : undefined].reduce((result, id) => {
+      if (!result) {
+        return id;
+      }
+      if (!id) {
+        return result;
+      }
+      return "".concat(result, " ").concat(id);
+    }) : undefined
+  });
+}
+function getFormControlProps(config, options) {
+  return cleanup(_objectSpread2(_objectSpread2({}, getFormElementProps(config, options)), {}, {
+    required: config.required,
+    autoFocus: config.initialError && Object.entries(config.initialError).length > 0 ? true : undefined
+  }, options !== null && options !== void 0 && options.hidden ? hiddenProps : undefined));
+}
 var hiddenProps = {
   /**
    * Style to make the input element visually hidden
@@ -70,19 +80,20 @@ function input(config) {
   return cleanup(props);
 }
 function select(config, options) {
-  var props = _objectSpread2(_objectSpread2({}, getFormControlProps(config, options)), {}, {
+  return cleanup(_objectSpread2(_objectSpread2({}, getFormControlProps(config, options)), {}, {
     defaultValue: config.defaultValue,
     multiple: config.multiple
-  });
-  return cleanup(props);
+  }));
 }
 function textarea(config, options) {
-  var props = _objectSpread2(_objectSpread2({}, getFormControlProps(config, options)), {}, {
+  return cleanup(_objectSpread2(_objectSpread2({}, getFormControlProps(config, options)), {}, {
     defaultValue: config.defaultValue,
     minLength: config.minLength,
     maxLength: config.maxLength
-  });
-  return cleanup(props);
+  }));
+}
+function fieldset(config, options) {
+  return getFormElementProps(config, options);
 }
 
-export { hiddenProps, input, select, textarea };
+export { fieldset, hiddenProps, input, select, textarea };

package/hooks.d.ts

@@ -5,7 +5,7 @@ export interface FieldConfig<Schema> extends FieldConstraint<Schema> {
     id?: string;
     name: string;
     defaultValue?: FieldValue<Schema>;
-    initialError?: Record<string, string | string[]>;
+    initialError?: Record<string, string[]>;
     form?: string;
     descriptionId?: string;
     errorId?: string;
@@ -26,6 +26,11 @@ type SubmissionResult = {
     payload: Submission['payload'] | null;
     error: Submission['error'];
 };
+interface ReportOptions {
+    formError?: string[];
+    resetForm?: boolean;
+}
+export declare function report(submission: Submission, options?: ReportOptions): SubmissionResult;
 export interface FormConfig<Output extends Record<string, any>, Input extends Record<string, any> = Output> {
     /**
      * If the form id is provided, Id for label,
@@ -107,7 +112,7 @@ interface FormProps {
 interface Form {
     id?: string;
     errorId?: string;
-    error: string;
+    error: string | undefined;
     errors: string[];
     ref: RefObject<HTMLFormElement>;
     props: FormProps;
@@ -137,7 +142,7 @@ export interface FieldsetConfig<Schema extends Record<string, any> | undefined>
     /**
      * An object describing the initial error of each field
      */
-    initialError?: Record<string, string | string[]>;
+    initialError?: Record<string, string[]>;
     /**
      * An object describing the constraint of each field
      */
@@ -171,7 +176,6 @@ interface InputControl {
     focus: () => void;
     blur: () => void;
 }
-export declare function useEventListeners(type: string, ref: RefObject<FieldElement>): void;
 /**
  * Returns a ref object and a set of helpers that dispatch corresponding dom event.
  *
@@ -196,11 +200,6 @@ export declare function validateConstraint(options: {
         formData: FormData;
         attributeValue: string;
     }) => boolean>;
-    acceptMultipleErrors?: ({ name, intent, payload, }: {
-        name: string;
-        intent: string;
-        payload: Record<string, any>;
-    }) => boolean;
     formatMessages?: ({ name, validity, constraint, defaultErrors, }: {
         name: string;
         validity: ValidityState;
@@ -208,6 +207,7 @@ export declare function validateConstraint(options: {
         defaultErrors: string[];
     }) => string[];
 }): Submission;
+export declare function getUniqueKey(): string;
 export declare function reportSubmission(form: HTMLFormElement, submission: SubmissionResult): void;
 export declare function getScope(intent: ReturnType<typeof parseIntent>): string | null;
 export {};

package/hooks.js

@@ -6,16 +6,21 @@ var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js
 var dom = require('@conform-to/dom');
 var react = require('react');
 
+function report(submission, options) {
+  var _submission$error$;
+  return {
+    intent: submission.intent,
+    payload: options !== null && options !== void 0 && options.resetForm ? null : submission.payload,
+    error: options !== null && options !== void 0 && options.formError ? _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, submission.error), {}, {
+      '': options.formError.concat((_submission$error$ = submission.error['']) !== null && _submission$error$ !== void 0 ? _submission$error$ : [])
+    }) : submission.error
+  };
+}
+
 /**
- * Normalize error to an array of string.
+ * Properties to be applied to the form element
  */
-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(() => {
@@ -74,42 +79,33 @@ function useFormError(ref, config) {
     }
     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);
+      var [path, ...restPaths] = dom.getPaths(name);
+      if (typeof path !== 'undefined' && restPaths.length === 0) {
+        result[path] = message;
       }
     }
     return result;
   });
   react.useEffect(() => {
     var handleInvalid = event => {
+      var _config$name;
       var form = dom.getFormElement(ref.current);
       var element = event.target;
-      if (!dom.isFieldElement(element) || element.form !== form || !element.dataset.conformTouched) {
+      var prefix = (_config$name = config.name) !== null && _config$name !== void 0 ? _config$name : '';
+      if (!dom.isFieldElement(element) || element.form !== form || !element.name.startsWith(prefix) || !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;
-          }
-        }
+      var name = element.name.slice(prefix.length);
+      var [path, ...restPaths] = dom.getPaths(name);
+      if (typeof path === 'undefined' || restPaths.length > 0) {
+        return;
       }
       setError(prev => {
-        if (element.validationMessage === dom.getValidationMessage(prev[key])) {
+        if (element.validationMessage === dom.getValidationMessage(prev[path])) {
           return prev;
         }
         return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prev), {}, {
-          [key]: dom.getErrors(element.validationMessage)
+          [path]: dom.getErrors(element.validationMessage)
         });
       });
       event.preventDefault();
@@ -137,31 +133,35 @@ function useFormError(ref, config) {
  * @see https://conform.guide/api/react#useform
  */
 function useForm() {
-  var _config$lastSubmissio2, _config$lastSubmissio3;
+  var _config$lastSubmissio3, _config$lastSubmissio4;
   var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   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(() => {
-    var _config$lastSubmissio;
-    return normalizeError((_config$lastSubmissio = config.lastSubmission) === null || _config$lastSubmissio === void 0 ? void 0 : _config$lastSubmissio.error['']);
+    var _config$lastSubmissio, _config$lastSubmissio2;
+    return (_config$lastSubmissio = (_config$lastSubmissio2 = config.lastSubmission) === null || _config$lastSubmissio2 === void 0 ? void 0 : _config$lastSubmissio2.error['']) !== null && _config$lastSubmissio !== void 0 ? _config$lastSubmissio : [];
   });
   var initialError = react.useMemo(() => {
+    var _submission$error$sco;
     var submission = config.lastSubmission;
     if (!submission) {
       return {};
     }
     var intent = dom.parseIntent(submission.intent);
     var scope = getScope(intent);
-    return scope === null ? submission.error : {
-      [scope]: submission.error[scope]
+    if (typeof scope !== 'string') {
+      return submission.error;
+    }
+    return {
+      [scope]: (_submission$error$sco = submission.error[scope]) !== null && _submission$error$sco !== void 0 ? _submission$error$sco : []
     };
   }, [config.lastSubmission]);
   // This payload from lastSubmission is only useful before hydration
   // After hydration, any new payload on lastSubmission will be ignored
   var [defaultValueFromLastSubmission, setDefaultValueFromLastSubmission] = react.useState( // @ts-expect-error defaultValue is not in Submission type
-  (_config$lastSubmissio2 = (_config$lastSubmissio3 = config.lastSubmission) === null || _config$lastSubmissio3 === void 0 ? void 0 : _config$lastSubmissio3.payload) !== null && _config$lastSubmissio2 !== void 0 ? _config$lastSubmissio2 : null);
+  (_config$lastSubmissio3 = (_config$lastSubmissio4 = config.lastSubmission) === null || _config$lastSubmissio4 === void 0 ? void 0 : _config$lastSubmissio4.payload) !== null && _config$lastSubmissio3 !== void 0 ? _config$lastSubmissio3 : null);
   var fieldset = useFieldset(ref, {
     defaultValue: defaultValueFromLastSubmission !== null && defaultValueFromLastSubmission !== void 0 ? defaultValueFromLastSubmission : config.defaultValue,
     initialError,
@@ -248,7 +248,7 @@ function useForm() {
             shouldServerValidate
           } = Object.entries(submission.error).reduce((result, _ref) => {
             var [, error] = _ref;
-            for (var message of normalizeError(error)) {
+            for (var message of error) {
               if (message === dom.VALIDATION_UNDEFINED) {
                 result.shouldServerValidate = true;
               } else if (message !== dom.VALIDATION_SKIPPED) {
@@ -302,6 +302,12 @@ function useForm() {
  * A set of field configuration
  */
 
+/**
+ * Returns all the information about the fieldset.
+ *
+ * @see https://conform.guide/api/react#usefieldset
+ */
+
 function useFieldset(ref, config) {
   var [error] = useFormError(ref, {
     initialError: config.initialError,
@@ -383,7 +389,7 @@ function useFieldList(ref, config) {
             return dom.updateList(list, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, intent.payload), {}, {
               defaultValue: [
               // Generate a random key to avoid conflicts
-              crypto.getRandomValues(new Uint32Array(1))[0].toString(36), intent.payload.defaultValue]
+              getUniqueKey(), intent.payload.defaultValue]
             }));
           default:
             return dom.updateList(list, intent.payload);
@@ -465,7 +471,6 @@ function useFieldList(ref, config) {
  * This basically makes it a no-op on server
  */
 var useSafeLayoutEffect = typeof document === 'undefined' ? react.useEffect : react.useLayoutEffect;
-
 /**
  * Returns a ref object and a set of helpers that dispatch corresponding dom event.
  *
@@ -488,7 +493,7 @@ function useInputEvent(options) {
           if (listener !== 'onReset') {
             eventDispatched.current[listener] = true;
           }
-          (_optionsRef$current4 = optionsRef.current) === null || _optionsRef$current4 === void 0 ? void 0 : (_optionsRef$current4$ = _optionsRef$current4[listener]) === null || _optionsRef$current4$ === void 0 ? void 0 : _optionsRef$current4$.call(_optionsRef$current4, event);
+          (_optionsRef$current4 = optionsRef.current) === null || _optionsRef$current4 === void 0 || (_optionsRef$current4$ = _optionsRef$current4[listener]) === null || _optionsRef$current4$ === void 0 ? void 0 : _optionsRef$current4$.call(_optionsRef$current4, event);
         }
       };
     };
@@ -631,12 +636,11 @@ function validateConstraint(options) {
     return defaultErrors;
   };
   return dom.parse(formData, {
-    resolve(payload, intent) {
+    resolve() {
       var error = {};
       var constraintPattern = /^constraint[A-Z][^A-Z]*$/;
       var _loop = function _loop(_element3) {
         if (dom.isFieldElement(_element3)) {
-          var _options$acceptMultip, _options$acceptMultip2;
           var name = _element3.name !== FORM_ERROR_ELEMENT_NAME ? _element3.name : '';
           var constraint = Object.entries(_element3.dataset).reduce((result, _ref6) => {
             var [name, attributeValue = ''] = _ref6;
@@ -662,13 +666,8 @@ function validateConstraint(options) {
             constraint,
             defaultErrors: getDefaultErrors(_element3.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];
+            error[name] = errors;
           }
         }
       };
@@ -681,10 +680,17 @@ function validateConstraint(options) {
     }
   });
 }
+function getUniqueKey() {
+  var [value] = crypto.getRandomValues(new Uint32Array(1));
+  if (!value) {
+    throw new Error('Fail to generate an unique key');
+  }
+  return value.toString(36);
+}
 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 === '') {
+    if (message.length === 0) {
       continue;
     }
 
@@ -713,8 +719,9 @@ function reportSubmission(form, submission) {
   var intent = dom.parseIntent(submission.intent);
   var scope = getScope(intent);
   for (var _element4 of dom.getFormControls(form)) {
+    var _submission$error$_el;
     var _elementName = _element4.name !== FORM_ERROR_ELEMENT_NAME ? _element4.name : '';
-    var messages = normalizeError(submission.error[_elementName]);
+    var messages = (_submission$error$_el = submission.error[_elementName]) !== null && _submission$error$_el !== void 0 ? _submission$error$_el : [];
     if (scope === null || scope === _elementName) {
       _element4.dataset.conformTouched = 'true';
     }
@@ -742,6 +749,8 @@ function getScope(intent) {
 
 exports.FORM_ERROR_ELEMENT_NAME = FORM_ERROR_ELEMENT_NAME;
 exports.getScope = getScope;
+exports.getUniqueKey = getUniqueKey;
+exports.report = report;
 exports.reportSubmission = reportSubmission;
 exports.useFieldList = useFieldList;
 exports.useFieldset = useFieldset;

package/hooks.mjs

@@ -2,16 +2,21 @@ import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHe
 import { parseIntent, getFormData, parse, VALIDATION_UNDEFINED, VALIDATION_SKIPPED, getFormAction, getFormEncType, getFormMethod, getPaths, getName, isFieldElement, getErrors, getFormControls, getFormElement, updateList, getValidationMessage, focusFirstInvalidControl, isFocusableFormControl, requestIntent, validate } from '@conform-to/dom';
 import { useState, useMemo, useEffect, useRef, useCallback, useLayoutEffect } from 'react';
 
+function report(submission, options) {
+  var _submission$error$;
+  return {
+    intent: submission.intent,
+    payload: options !== null && options !== void 0 && options.resetForm ? null : submission.payload,
+    error: options !== null && options !== void 0 && options.formError ? _objectSpread2(_objectSpread2({}, submission.error), {}, {
+      '': options.formError.concat((_submission$error$ = submission.error['']) !== null && _submission$error$ !== void 0 ? _submission$error$ : [])
+    }) : submission.error
+  };
+}
+
 /**
- * Normalize error to an array of string.
+ * Properties to be applied to the form element
  */
-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] = useState(defaultNoValidate || !validateBeforeHydrate);
   useEffect(() => {
@@ -70,42 +75,33 @@ function useFormError(ref, config) {
     }
     var result = {};
     for (var [name, message] of Object.entries(config.initialError)) {
-      var paths = getPaths(name);
-      if (paths.length === 1) {
-        result[paths[0]] = normalizeError(message);
+      var [path, ...restPaths] = getPaths(name);
+      if (typeof path !== 'undefined' && restPaths.length === 0) {
+        result[path] = message;
       }
     }
     return result;
   });
   useEffect(() => {
     var handleInvalid = event => {
+      var _config$name;
       var form = getFormElement(ref.current);
       var element = event.target;
-      if (!isFieldElement(element) || element.form !== form || !element.dataset.conformTouched) {
+      var prefix = (_config$name = config.name) !== null && _config$name !== void 0 ? _config$name : '';
+      if (!isFieldElement(element) || element.form !== form || !element.name.startsWith(prefix) || !element.dataset.conformTouched) {
         return;
       }
-      var key = element.name;
-      if (config.name) {
-        var scopePaths = getPaths(config.name);
-        var fieldPaths = 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;
-          }
-        }
+      var name = element.name.slice(prefix.length);
+      var [path, ...restPaths] = getPaths(name);
+      if (typeof path === 'undefined' || restPaths.length > 0) {
+        return;
       }
       setError(prev => {
-        if (element.validationMessage === getValidationMessage(prev[key])) {
+        if (element.validationMessage === getValidationMessage(prev[path])) {
           return prev;
         }
         return _objectSpread2(_objectSpread2({}, prev), {}, {
-          [key]: getErrors(element.validationMessage)
+          [path]: getErrors(element.validationMessage)
         });
       });
       event.preventDefault();
@@ -133,31 +129,35 @@ function useFormError(ref, config) {
  * @see https://conform.guide/api/react#useform
  */
 function useForm() {
-  var _config$lastSubmissio2, _config$lastSubmissio3;
+  var _config$lastSubmissio3, _config$lastSubmissio4;
   var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   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] = useState(() => {
-    var _config$lastSubmissio;
-    return normalizeError((_config$lastSubmissio = config.lastSubmission) === null || _config$lastSubmissio === void 0 ? void 0 : _config$lastSubmissio.error['']);
+    var _config$lastSubmissio, _config$lastSubmissio2;
+    return (_config$lastSubmissio = (_config$lastSubmissio2 = config.lastSubmission) === null || _config$lastSubmissio2 === void 0 ? void 0 : _config$lastSubmissio2.error['']) !== null && _config$lastSubmissio !== void 0 ? _config$lastSubmissio : [];
   });
   var initialError = useMemo(() => {
+    var _submission$error$sco;
     var submission = config.lastSubmission;
     if (!submission) {
       return {};
     }
     var intent = parseIntent(submission.intent);
     var scope = getScope(intent);
-    return scope === null ? submission.error : {
-      [scope]: submission.error[scope]
+    if (typeof scope !== 'string') {
+      return submission.error;
+    }
+    return {
+      [scope]: (_submission$error$sco = submission.error[scope]) !== null && _submission$error$sco !== void 0 ? _submission$error$sco : []
     };
   }, [config.lastSubmission]);
   // This payload from lastSubmission is only useful before hydration
   // After hydration, any new payload on lastSubmission will be ignored
   var [defaultValueFromLastSubmission, setDefaultValueFromLastSubmission] = useState( // @ts-expect-error defaultValue is not in Submission type
-  (_config$lastSubmissio2 = (_config$lastSubmissio3 = config.lastSubmission) === null || _config$lastSubmissio3 === void 0 ? void 0 : _config$lastSubmissio3.payload) !== null && _config$lastSubmissio2 !== void 0 ? _config$lastSubmissio2 : null);
+  (_config$lastSubmissio3 = (_config$lastSubmissio4 = config.lastSubmission) === null || _config$lastSubmissio4 === void 0 ? void 0 : _config$lastSubmissio4.payload) !== null && _config$lastSubmissio3 !== void 0 ? _config$lastSubmissio3 : null);
   var fieldset = useFieldset(ref, {
     defaultValue: defaultValueFromLastSubmission !== null && defaultValueFromLastSubmission !== void 0 ? defaultValueFromLastSubmission : config.defaultValue,
     initialError,
@@ -244,7 +244,7 @@ function useForm() {
             shouldServerValidate
           } = Object.entries(submission.error).reduce((result, _ref) => {
             var [, error] = _ref;
-            for (var message of normalizeError(error)) {
+            for (var message of error) {
               if (message === VALIDATION_UNDEFINED) {
                 result.shouldServerValidate = true;
               } else if (message !== VALIDATION_SKIPPED) {
@@ -298,6 +298,12 @@ function useForm() {
  * A set of field configuration
  */
 
+/**
+ * Returns all the information about the fieldset.
+ *
+ * @see https://conform.guide/api/react#usefieldset
+ */
+
 function useFieldset(ref, config) {
   var [error] = useFormError(ref, {
     initialError: config.initialError,
@@ -379,7 +385,7 @@ function useFieldList(ref, config) {
             return updateList(list, _objectSpread2(_objectSpread2({}, intent.payload), {}, {
               defaultValue: [
               // Generate a random key to avoid conflicts
-              crypto.getRandomValues(new Uint32Array(1))[0].toString(36), intent.payload.defaultValue]
+              getUniqueKey(), intent.payload.defaultValue]
             }));
           default:
             return updateList(list, intent.payload);
@@ -461,7 +467,6 @@ function useFieldList(ref, config) {
  * This basically makes it a no-op on server
  */
 var useSafeLayoutEffect = typeof document === 'undefined' ? useEffect : useLayoutEffect;
-
 /**
  * Returns a ref object and a set of helpers that dispatch corresponding dom event.
  *
@@ -484,7 +489,7 @@ function useInputEvent(options) {
           if (listener !== 'onReset') {
             eventDispatched.current[listener] = true;
           }
-          (_optionsRef$current4 = optionsRef.current) === null || _optionsRef$current4 === void 0 ? void 0 : (_optionsRef$current4$ = _optionsRef$current4[listener]) === null || _optionsRef$current4$ === void 0 ? void 0 : _optionsRef$current4$.call(_optionsRef$current4, event);
+          (_optionsRef$current4 = optionsRef.current) === null || _optionsRef$current4 === void 0 || (_optionsRef$current4$ = _optionsRef$current4[listener]) === null || _optionsRef$current4$ === void 0 ? void 0 : _optionsRef$current4$.call(_optionsRef$current4, event);
         }
       };
     };
@@ -627,12 +632,11 @@ function validateConstraint(options) {
     return defaultErrors;
   };
   return parse(formData, {
-    resolve(payload, intent) {
+    resolve() {
       var error = {};
       var constraintPattern = /^constraint[A-Z][^A-Z]*$/;
       var _loop = function _loop(_element3) {
         if (isFieldElement(_element3)) {
-          var _options$acceptMultip, _options$acceptMultip2;
           var name = _element3.name !== FORM_ERROR_ELEMENT_NAME ? _element3.name : '';
           var constraint = Object.entries(_element3.dataset).reduce((result, _ref6) => {
             var [name, attributeValue = ''] = _ref6;
@@ -658,13 +662,8 @@ function validateConstraint(options) {
             constraint,
             defaultErrors: getDefaultErrors(_element3.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];
+            error[name] = errors;
           }
         }
       };
@@ -677,10 +676,17 @@ function validateConstraint(options) {
     }
   });
 }
+function getUniqueKey() {
+  var [value] = crypto.getRandomValues(new Uint32Array(1));
+  if (!value) {
+    throw new Error('Fail to generate an unique key');
+  }
+  return value.toString(36);
+}
 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 === '') {
+    if (message.length === 0) {
       continue;
     }
 
@@ -709,8 +715,9 @@ function reportSubmission(form, submission) {
   var intent = parseIntent(submission.intent);
   var scope = getScope(intent);
   for (var _element4 of getFormControls(form)) {
+    var _submission$error$_el;
     var _elementName = _element4.name !== FORM_ERROR_ELEMENT_NAME ? _element4.name : '';
-    var messages = normalizeError(submission.error[_elementName]);
+    var messages = (_submission$error$_el = submission.error[_elementName]) !== null && _submission$error$_el !== void 0 ? _submission$error$_el : [];
     if (scope === null || scope === _elementName) {
       _element4.dataset.conformTouched = 'true';
     }
@@ -736,4 +743,4 @@ function getScope(intent) {
   return null;
 }
 
-export { FORM_ERROR_ELEMENT_NAME, getScope, reportSubmission, useFieldList, useFieldset, useForm, useInputEvent, validateConstraint };
+export { FORM_ERROR_ELEMENT_NAME, getScope, getUniqueKey, report, reportSubmission, useFieldList, useFieldset, useForm, useInputEvent, validateConstraint };

package/index.d.ts

@@ -1,3 +1,3 @@
 export { type FieldsetConstraint, type Submission, parse, list, validate, requestIntent, isFieldElement, } from '@conform-to/dom';
-export { type Fieldset, type FieldConfig, type FieldsetConfig, type FormConfig, useForm, useFieldset, useFieldList, useInputEvent, validateConstraint, } from './hooks.js';
+export { type Fieldset, type FieldConfig, type FieldsetConfig, type FormConfig, useForm, useFieldset, useFieldList, useInputEvent, validateConstraint, report, } from './hooks.js';
 export * as conform from './helpers.js';

package/index.js

@@ -28,6 +28,7 @@ Object.defineProperty(exports, 'validate', {
 	enumerable: true,
 	get: function () { return dom.validate; }
 });
+exports.report = hooks.report;
 exports.useFieldList = hooks.useFieldList;
 exports.useFieldset = hooks.useFieldset;
 exports.useForm = hooks.useForm;

package/index.mjs

@@ -1,4 +1,4 @@
 export { isFieldElement, list, parse, requestIntent, validate } from '@conform-to/dom';
-export { useFieldList, useFieldset, useForm, useInputEvent, validateConstraint } from './hooks.mjs';
+export { report, useFieldList, useFieldset, useForm, useInputEvent, validateConstraint } from './hooks.mjs';
 import * as helpers from './helpers.mjs';
 export { helpers as conform };

package/package.json

@@ -3,7 +3,7 @@
 	"description": "Conform view adapter for react",
 	"homepage": "https://conform.guide",
 	"license": "MIT",
-	"version": "0.7.3",
+	"version": "0.8.0-pre.0",
 	"main": "index.js",
 	"module": "index.mjs",
 	"types": "index.d.ts",
@@ -30,7 +30,7 @@
 		"url": "https://github.com/edmundhung/conform/issues"
 	},
 	"dependencies": {
-		"@conform-to/dom": "0.7.3"
+		"@conform-to/dom": "0.8.0-pre.0"
 	},
 	"peerDependencies": {
 		"react": ">=16.8"