@conform-to/react 0.4.0-pre.2 → 0.4.0-pre.3

package/README.md

@@ -11,10 +11,9 @@
 - [useFieldList](#usefieldlist)
 - [useControlledInput](#usecontrolledinput)
 - [conform](#conform)
+- [getFormElements](#getformelements)
 - [hasError](#haserror)
-- [isFieldElement](#isfieldelement)
 - [parse](#parse)
-- [setFormError](#setformerror)
 - [shouldValidate](#shouldvalidate)
 
 <!-- /aside -->
@@ -295,33 +294,6 @@ function Fieldset() {
 }
 ```
 
-<details>
-<summary>Is it required to provide the FieldsetConfig to `useFieldset`?</summary>
-
-No. The only thing required is the ref object. All the config is optional. You can always pass them to each fields manually.
-
-```tsx
-import { useForm, useFieldset } from '@conform-to/react';
-
-function SubscriptionForm() {
-  const formProps = useForm();
-  const { email } = useFieldset(formProps.ref);
-
-  return (
-    <form {...formProps}>
-      <input
-        type="email"
-        name={email.config.name}
-        defaultValue="support@conform.dev"
-        required
-      />
-    </form>
-  );
-}
-```
-
-</details>
-
 <details>
 <summary>Why does `useFieldset` require a ref object of the form or fieldset?</summary>
 
@@ -352,7 +324,7 @@ function ExampleForm() {
 
 ### useFieldList
 
-It returns a list of key and config, with a group of helpers configuring buttons for list manipulation
+It returns a list of key and config, with helpers to configure command buttons with [list command](/docs/submission.md#list-command).
 
 ```tsx
 import { useFieldset, useFieldList } from '@conform-to/react';
@@ -373,7 +345,7 @@ type Collection = {
 function CollectionFieldset() {
   const ref = useRef();
   const { books } = useFieldset<Collection>(ref);
-  const [bookList, control] = useFieldList(ref, books.config);
+  const [bookList, command] = useFieldList(ref, books.config);
 
   return (
     <fieldset ref={ref}>
@@ -390,12 +362,12 @@ function CollectionFieldset() {
           />
 
           {/* To setup a delete button */}
-          <button {...control.remove({ index })}>Delete</button>
+          <button {...command.remove({ index })}>Delete</button>
         </div>
       ))}
 
       {/* To setup a button that can append a new row with optional default value */}
-      <button {...control.append({ defaultValue: { name: '', isbn: '' } })}>
+      <button {...command.append({ defaultValue: { name: '', isbn: '' } })}>
         add
       </button>
     </fieldset>
@@ -412,7 +384,7 @@ import { useRef } from 'react';
 function CollectionFieldset() {
   const ref = useRef();
   const { books } = useFieldset<Collection>(ref);
-  const [bookList, control] = useFieldList(ref, books.config);
+  const [bookList, command] = useFieldList(ref, books.config);
 
   return (
     <fieldset ref={ref}>
@@ -422,12 +394,12 @@ function CollectionFieldset() {
           <BookFieldset {...book.config} />
 
           {/* To setup a delete button */}
-          <button {...control.remove({ index })}>Delete</button>
+          <button {...command.remove({ index })}>Delete</button>
         </div>
       ))}
 
       {/* To setup a button that can append a new row */}
-      <button {...control.append()}>add</button>
+      <button {...command.append()}>add</button>
     </fieldset>
   );
 }
@@ -582,74 +554,43 @@ function RandomForm() {
 }
 ```
 
-### hasError
-
-This helper checks if there is any message defined in error array with the provided name.
-
-```ts
-import { hasError } from '@conform-to/react';
-
-/**
- * Assume the error looks like this:
- */
-const error = [['email', 'Email is required']];
-
-// This will log `true`
-console.log(hasError(error, 'email'));
-
-// This will log `false`
-console.log(hasError(error, 'password'));
-```
-
 ---
 
-### isFieldElement
+### getFormElements
 
-This checks if the provided element is an `input` / `select` / `textarea` or `button` HTML element with type guard. Useful when you need to access the validityState of the fields and modify the validation message manually.
+It returns all _input_ / _select_ / _textarea_ or _button_ in the forms. Useful when looping through the form elements to validate each field.
 
 ```tsx
-import { isFieldElement } from '@conform-to/react';
+import { useForm, parse, getFormElements } from '@conform-to/react';
 
-export default function SignupForm() {
+export default function LoginForm() {
   const form = useForm({
-    onValidate({ form }) {
-      for (const element of form.elements) {
-        if (isFieldElement(element)) {
-          switch (field.name) {
-            case 'email':
-              if (field.validity.valueMissing) {
-                field.setCustomValidity('Email is required');
-              } else if (field.validity.typeMismatch) {
-                field.setCustomValidity('Please enter a valid email');
-              } else {
-                field.setCustomValidity('');
-              }
-              break;
-            case 'password':
-              if (field.validity.valueMissing) {
-                field.setCustomValidity('Password is required');
-              } else if (field.validity.tooShort) {
-                field.setCustomValidity(
-                  'The password should be at least 10 characters long',
-                );
-              } else {
-                field.setCustomValidity('');
-              }
-              break;
-            case 'confirm-password': {
-              if (field.validity.valueMissing) {
-                field.setCustomValidity('Confirm Password is required');
-              } else if (field.value !== formData.get('password')) {
-                field.setCustomValidity('The password does not match');
-              } else {
-                field.setCustomValidity('');
-              }
-              break;
+    onValidate({ form, formData }) {
+      const submission = parse(formData);
+
+      for (const element of getFormElements(form)) {
+        switch (element.name) {
+          case 'email': {
+            if (element.validity.valueMissing) {
+              submission.error.push([element.name, 'Email is required']);
+            } else if (element.validity.typeMismatch) {
+              submission.error.push([element.name, 'Email is invalid']);
+            }
+            break;
+          }
+          case 'password': {
+            if (element.validity.valueMissing) {
+              submission.error.push([element.name, 'Password is required']);
             }
+            break;
           }
         }
       }
+
+      return submission;
     },
+
+    // ....
   });
 
   // ...
@@ -658,42 +599,38 @@ export default function SignupForm() {
 
 ---
 
-### parse
+### hasError
 
-It parses the formData based on the [naming convention](/docs/submission).
+This helper checks if there is any message defined in error array with the provided name.
 
-```tsx
-import { parse } from '@conform-to/react';
+```ts
+import { hasError } from '@conform-to/react';
 
-const formData = new FormData(formElement);
-const submission = parse(formData);
+/**
+ * Assume the error looks like this:
+ */
+const error = [['email', 'Email is required']];
 
-console.log(submission);
+// This will log `true`
+console.log(hasError(error, 'email'));
+
+// This will log `false`
+console.log(hasError(error, 'password'));
 ```
 
 ---
 
-### setFormError
+### parse
 
-This helpers updates the form error based on the submission result by looping through all elements in the form and update the error with the [setCustomValidity](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity) API.
+It parses the formData based on the [naming convention](/docs/submission).
 
 ```tsx
-import { setFormError } from '@conform-to/react';
-
-function ExampleForm() {
-  const form = useForm({
-    onValidate({ form, submission }) {
-      const error = validate(submission);
+import { parse } from '@conform-to/react';
 
-      setFormError(form, {
-        ...submission,
-        error,
-      });
-    },
-  });
+const formData = new FormData();
+const submission = parse(formData);
 
-  // ...
-}
+console.log(submission);
 ```
 
 ---
@@ -706,14 +643,13 @@ This helper checks if the scope of validation includes a specific field by check
 import { shouldValidate } from '@conform-to/react';
 
 /**
- * The submission type and metadata give us hint on what should be valdiated.
+ * The submission type and intent give us hint on what should be valdiated.
  * If the type is 'validate', only the field with name matching the metadata must be validated.
- *
- * However, if the type is `undefined`, both will log true (Default submission)
+ * If the type is 'submit', everything should be validated (Default submission)
  */
 const submission = {
-  type: 'validate',
-  metadata: 'email',
+  context: 'validate',
+  intent: 'email',
   value: {},
   error: [],
 };

package/hooks.d.ts

@@ -1,10 +1,5 @@
 import { type FieldConfig, type FieldElement, type FieldValue, type FieldsetConstraint, type ListCommand, type Primitive, type Submission } from '@conform-to/dom';
 import { type InputHTMLAttributes, type FormEvent, type RefObject } from 'react';
-interface FormContext<Schema extends Record<string, any>> {
-    form: HTMLFormElement;
-    formData: FormData;
-    submission: Submission<Schema>;
-}
 export interface FormConfig<Schema extends Record<string, any>> {
     /**
      * Validation mode. Default to `client-only`.
@@ -40,12 +35,18 @@ export interface FormConfig<Schema extends Record<string, any>> {
     /**
      * A function to be called when the form should be (re)validated.
      */
-    onValidate?: (context: FormContext<Schema>) => Array<[string, string]>;
+    onValidate?: ({ form, formData, }: {
+        form: HTMLFormElement;
+        formData: FormData;
+    }) => Submission<Schema>;
     /**
      * The submit event handler of the form. It will be called
      * only when the form is considered valid.
      */
-    onSubmit?: (event: FormEvent<HTMLFormElement>, context: FormContext<Schema>) => void;
+    onSubmit?: (event: FormEvent<HTMLFormElement>, context: {
+        formData: FormData;
+        submission: Submission<Schema>;
+    }) => void;
 }
 /**
  * Properties to be applied to the form element
@@ -65,7 +66,7 @@ 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.0-pre.2/packages/conform-react/README.md#useform
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.3/packages/conform-react/README.md#useform
  */
 export declare function useForm<Schema extends Record<string, any>>(config?: FormConfig<Schema>): Form<Schema>;
 /**
@@ -106,41 +107,37 @@ export interface FieldsetConfig<Schema extends Record<string, any>> {
 /**
  * Returns all the information about the fieldset.
  *
- * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.2/packages/conform-react/README.md#usefieldset
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.3/packages/conform-react/README.md#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 ControlButtonProps {
+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 CommandPayload<Schema, Type extends ListCommand<FieldValue<Schema>>['type']> = Extract<ListCommand<FieldValue<Schema>>, {
+declare type ListCommandPayload<Schema, Type extends ListCommand<FieldValue<Schema>>['type']> = Extract<ListCommand<FieldValue<Schema>>, {
     type: Type;
 }>['payload'];
-/**
- * A group of helpers for configuring a list control button
- */
-interface ListControl<Schema> {
-    prepend(payload?: CommandPayload<Schema, 'prepend'>): ControlButtonProps;
-    append(payload?: CommandPayload<Schema, 'append'>): ControlButtonProps;
-    replace(payload: CommandPayload<Schema, 'replace'>): ControlButtonProps;
-    remove(payload: CommandPayload<Schema, 'remove'>): ControlButtonProps;
-    reorder(payload: CommandPayload<Schema, 'reorder'>): ControlButtonProps;
-}
 /**
  * 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.0-pre.2/packages/conform-react/README.md#usefieldlist
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.3/packages/conform-react/README.md#usefieldlist
  */
 export declare function useFieldList<Payload = any>(ref: RefObject<HTMLFormElement | HTMLFieldSetElement>, config: FieldConfig<Array<Payload>>): [
     Array<{
         key: string;
         config: FieldConfig<Payload>;
     }>,
-    ListControl<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;
+    }
 ];
 interface ShadowInputProps extends InputHTMLAttributes<HTMLInputElement> {
     ref: RefObject<HTMLInputElement>;
@@ -163,7 +160,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.0-pre.2/packages/conform-react/README.md#usecontrolledinput
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.3/packages/conform-react/README.md#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.0-pre.2/packages/conform-react/README.md#useform
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.3/packages/conform-react/README.md#useform
  */
 function useForm() {
   var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -183,50 +183,58 @@ function useForm() {
         }
 
         try {
+          var submission;
           var formData = dom.getFormData(form, submitter);
-          var submission = dom.parse(formData);
-          var _context = {
-            form,
-            formData,
-            submission
-          }; // Touch all fields only if the submitter is not a command button
-
-          if (submission.context === 'submit') {
-            for (var field of form.elements) {
-              if (dom.isFieldElement(field)) {
-                // Mark the field as touched
-                field.dataset.conformTouched = 'true';
-              }
-            }
-          }
-
-          var _error;
 
           if (typeof config.onValidate === 'function') {
-            _error = config.onValidate(_context);
+            submission = config.onValidate({
+              form,
+              formData
+            });
           } else {
+            submission = dom.parse(formData);
+
             if (config.mode !== 'server-validation') {
-              // Clear previous result
+              /**
+               * As there is no custom logic defined,
+               * removing the custom validity state will allow us
+               * finding the latest validation message.
+               *
+               * This is mainly used to showcase the constraint validation API.
+               */
               dom.setFormError(form, {
-                context: 'submit',
+                type: 'submit',
                 value: {},
                 error: []
               });
+
+              for (var _element of form.elements) {
+                if (dom.isFieldElement(_element) && _element.willValidate) {
+                  submission.error.push([_element.name, _element.validationMessage]);
+                }
+              }
             }
+          } // Touch all fields only if the submitter is not a command button
 
-            _error = dom.getFormError(form);
-          }
 
-          if (_error.length > 0) {
-            submission.error.push(..._error);
+          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.context === 'validate' && config.mode !== 'server-validation') {
+          if (!config.noValidate && !submitter.formNoValidate && dom.hasError(submission.error) || submission.type === 'validate' && config.mode !== 'server-validation') {
             event.preventDefault();
           } else {
             var _config$onSubmit;
 
-            (_config$onSubmit = config.onSubmit) === null || _config$onSubmit === void 0 ? void 0 : _config$onSubmit.call(config, event, _context);
+            (_config$onSubmit = config.onSubmit) === null || _config$onSubmit === void 0 ? void 0 : _config$onSubmit.call(config, event, {
+              formData,
+              submission
+            });
           }
 
           if (event.defaultPrevented) {
@@ -301,11 +309,11 @@ function useFieldset(ref, config) {
   });
   react.useEffect(() => {
     var invalidHandler = event => {
-      var _configRef$current$na, _configRef$current;
+      var _configRef$current$na;
 
       var form = dom.getFormElement(ref.current);
       var field = event.target;
-      var fieldsetName = (_configRef$current$na = (_configRef$current = configRef.current) === null || _configRef$current === void 0 ? void 0 : _configRef$current.name) !== null && _configRef$current$na !== void 0 ? _configRef$current$na : '';
+      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;
@@ -349,10 +357,10 @@ function useFieldset(ref, config) {
 
 
       setError(prev => {
-        var _configRef$current$na2, _configRef$current2;
+        var _configRef$current$na2;
 
         var next = prev;
-        var fieldsetName = (_configRef$current$na2 = (_configRef$current2 = configRef.current) === null || _configRef$current2 === void 0 ? void 0 : _configRef$current2.name) !== null && _configRef$current$na2 !== void 0 ? _configRef$current$na2 : '';
+        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)) {
@@ -437,7 +445,7 @@ function useFieldset(ref, config) {
  * 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.0-pre.2/packages/conform-react/README.md#usefieldlist
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.3/packages/conform-react/README.md#usefieldlist
  */
 function useFieldList(ref, config) {
   var configRef = react.useRef(config);
@@ -493,7 +501,7 @@ function useFieldList(ref, config) {
    * have it encoded in the value.
    */
 
-  var control = new Proxy({}, {
+  var command = new Proxy({}, {
     get(_target, type) {
       return function () {
         var payload = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -573,7 +581,8 @@ function useFieldList(ref, config) {
       document.removeEventListener('reset', resetHandler);
     };
   }, [ref]);
-  return [list, control];
+  return [list, // @ts-expect-error proxy type
+  command];
 }
 
 /**
@@ -581,7 +590,7 @@ function useFieldList(ref, config) {
  * This is particular useful when integrating dropdown and datepicker whichs
  * introduces custom input mode.
  *
- * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.2/packages/conform-react/README.md#usecontrolledinput
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.3/packages/conform-react/README.md#usecontrolledinput
  */
 function useControlledInput(config) {
   var _config$defaultValue4;

package/index.d.ts

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

package/index.js

@@ -8,18 +8,14 @@ var helpers = require('./helpers.js');
 
 
 
-Object.defineProperty(exports, 'getFormError', {
+Object.defineProperty(exports, 'getFormElements', {
 	enumerable: true,
-	get: function () { return dom.getFormError; }
+	get: function () { return dom.getFormElements; }
 });
 Object.defineProperty(exports, 'hasError', {
 	enumerable: true,
 	get: function () { return dom.hasError; }
 });
-Object.defineProperty(exports, 'isFieldElement', {
-	enumerable: true,
-	get: function () { return dom.isFieldElement; }
-});
 Object.defineProperty(exports, 'parse', {
 	enumerable: true,
 	get: function () { return dom.parse; }

package/module/hooks.js

@@ -1,5 +1,5 @@
 import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.js';
-import { getSubmissionType, setFormError, focusFirstInvalidField, requestSubmit, isFieldElement, getFormData, parse, getFormError, hasError, getPaths, getName, requestValidate, getFormElement, parseListCommand, updateList } from '@conform-to/dom';
+import { getSubmissionType, setFormError, focusFirstInvalidField, requestSubmit, isFieldElement, getFormData, parse, hasError, getPaths, getName, requestValidate, getFormElement, parseListCommand, updateList } from '@conform-to/dom';
 import { useRef, useState, useEffect } from 'react';
 import { input } from './helpers.js';
 
@@ -7,7 +7,7 @@ import { input } from './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.0-pre.2/packages/conform-react/README.md#useform
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.3/packages/conform-react/README.md#useform
  */
 function useForm() {
   var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -179,50 +179,58 @@ function useForm() {
         }
 
         try {
+          var submission;
           var formData = getFormData(form, submitter);
-          var submission = parse(formData);
-          var _context = {
-            form,
-            formData,
-            submission
-          }; // Touch all fields only if the submitter is not a command button
-
-          if (submission.context === 'submit') {
-            for (var field of form.elements) {
-              if (isFieldElement(field)) {
-                // Mark the field as touched
-                field.dataset.conformTouched = 'true';
-              }
-            }
-          }
-
-          var _error;
 
           if (typeof config.onValidate === 'function') {
-            _error = config.onValidate(_context);
+            submission = config.onValidate({
+              form,
+              formData
+            });
           } else {
+            submission = parse(formData);
+
             if (config.mode !== 'server-validation') {
-              // Clear previous result
+              /**
+               * As there is no custom logic defined,
+               * removing the custom validity state will allow us
+               * finding the latest validation message.
+               *
+               * This is mainly used to showcase the constraint validation API.
+               */
               setFormError(form, {
-                context: 'submit',
+                type: 'submit',
                 value: {},
                 error: []
               });
+
+              for (var _element of form.elements) {
+                if (isFieldElement(_element) && _element.willValidate) {
+                  submission.error.push([_element.name, _element.validationMessage]);
+                }
+              }
             }
+          } // Touch all fields only if the submitter is not a command button
 
-            _error = getFormError(form);
-          }
 
-          if (_error.length > 0) {
-            submission.error.push(..._error);
+          if (submission.type === 'submit') {
+            for (var field of form.elements) {
+              if (isFieldElement(field)) {
+                // Mark the field as touched
+                field.dataset.conformTouched = 'true';
+              }
+            }
           }
 
-          if (!config.noValidate && !submitter.formNoValidate && hasError(submission.error) || submission.context === 'validate' && config.mode !== 'server-validation') {
+          if (!config.noValidate && !submitter.formNoValidate && hasError(submission.error) || submission.type === 'validate' && config.mode !== 'server-validation') {
             event.preventDefault();
           } else {
             var _config$onSubmit;
 
-            (_config$onSubmit = config.onSubmit) === null || _config$onSubmit === void 0 ? void 0 : _config$onSubmit.call(config, event, _context);
+            (_config$onSubmit = config.onSubmit) === null || _config$onSubmit === void 0 ? void 0 : _config$onSubmit.call(config, event, {
+              formData,
+              submission
+            });
           }
 
           if (event.defaultPrevented) {
@@ -297,11 +305,11 @@ function useFieldset(ref, config) {
   });
   useEffect(() => {
     var invalidHandler = event => {
-      var _configRef$current$na, _configRef$current;
+      var _configRef$current$na;
 
       var form = getFormElement(ref.current);
       var field = event.target;
-      var fieldsetName = (_configRef$current$na = (_configRef$current = configRef.current) === null || _configRef$current === void 0 ? void 0 : _configRef$current.name) !== null && _configRef$current$na !== void 0 ? _configRef$current$na : '';
+      var fieldsetName = (_configRef$current$na = configRef.current.name) !== null && _configRef$current$na !== void 0 ? _configRef$current$na : '';
 
       if (!form || !isFieldElement(field) || field.form !== form || !field.name.startsWith(fieldsetName)) {
         return;
@@ -345,10 +353,10 @@ function useFieldset(ref, config) {
 
 
       setError(prev => {
-        var _configRef$current$na2, _configRef$current2;
+        var _configRef$current$na2;
 
         var next = prev;
-        var fieldsetName = (_configRef$current$na2 = (_configRef$current2 = configRef.current) === null || _configRef$current2 === void 0 ? void 0 : _configRef$current2.name) !== null && _configRef$current$na2 !== void 0 ? _configRef$current$na2 : '';
+        var fieldsetName = (_configRef$current$na2 = configRef.current.name) !== null && _configRef$current$na2 !== void 0 ? _configRef$current$na2 : '';
 
         for (var field of form.elements) {
           if (isFieldElement(field) && field.name.startsWith(fieldsetName)) {
@@ -433,7 +441,7 @@ function useFieldset(ref, config) {
  * 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.0-pre.2/packages/conform-react/README.md#usefieldlist
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.3/packages/conform-react/README.md#usefieldlist
  */
 function useFieldList(ref, config) {
   var configRef = useRef(config);
@@ -489,7 +497,7 @@ function useFieldList(ref, config) {
    * have it encoded in the value.
    */
 
-  var control = new Proxy({}, {
+  var command = new Proxy({}, {
     get(_target, type) {
       return function () {
         var payload = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -569,7 +577,8 @@ function useFieldList(ref, config) {
       document.removeEventListener('reset', resetHandler);
     };
   }, [ref]);
-  return [list, control];
+  return [list, // @ts-expect-error proxy type
+  command];
 }
 
 /**
@@ -577,7 +586,7 @@ function useFieldList(ref, config) {
  * This is particular useful when integrating dropdown and datepicker whichs
  * introduces custom input mode.
  *
- * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.2/packages/conform-react/README.md#usecontrolledinput
+ * @see https://github.com/edmundhung/conform/tree/v0.4.0-pre.3/packages/conform-react/README.md#usecontrolledinput
  */
 function useControlledInput(config) {
   var _config$defaultValue4;

package/module/index.js

@@ -1,4 +1,4 @@
-export { getFormError, hasError, isFieldElement, parse, shouldValidate } from '@conform-to/dom';
+export { getFormElements, hasError, parse, shouldValidate } from '@conform-to/dom';
 export { useControlledInput, useFieldList, useFieldset, useForm } from './hooks.js';
 import * as helpers from './helpers.js';
 export { helpers as conform };

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@conform-to/react",
 	"description": "Conform view adapter for react",
 	"license": "MIT",
-	"version": "0.4.0-pre.2",
+	"version": "0.4.0-pre.3",
 	"main": "index.js",
 	"module": "module/index.js",
 	"repository": {
@@ -19,7 +19,7 @@
 		"url": "https://github.com/edmundhung/conform/issues"
 	},
 	"dependencies": {
-		"@conform-to/dom": "0.4.0-pre.2"
+		"@conform-to/dom": "0.4.0-pre.3"
 	},
 	"peerDependencies": {
 		"react": ">=16.8"