@conform-to/react 0.4.0 → 0.5.0-pre.0

package/README.md

@@ -324,7 +324,7 @@ function ExampleForm() {
 
 ### useFieldList
 
-It returns a list of key and config, with helpers to configure command buttons with [list command](/docs/submission.md#list-command).
+It returns a list of key, config and error, with helpers to configure [list command](/docs/submission.md#list-command) button.
 
 ```tsx
 import { useFieldset, useFieldList } from '@conform-to/react';
@@ -333,33 +333,24 @@ import { useRef } from 'react';
 /**
  * Consider the schema as follow:
  */
-type Book = {
-  name: string;
-  isbn: string;
-};
-
-type Collection = {
-  books: Book[];
+type Schema = {
+  list: string[];
 };
 
 function CollectionFieldset() {
-  const ref = useRef();
-  const { books } = useFieldset<Collection>(ref);
-  const [bookList, command] = useFieldList(ref, books.config);
+  const ref = useRef<HTMLFieldsetElement>(null);
+  const fieldset = useFieldset<Collection>(ref);
+  const [list, command] = useFieldList(ref, fieldset.list.config);
 
   return (
     <fieldset ref={ref}>
-      {bookList.map((book, index) => (
-        <div key={book.key}>
-          {/* To setup the fields */}
-          <input
-            name={`${book.config.name}.name`}
-            defaultValue={book.config.defaultValue.name}
-          />
-          <input
-            name={`${book.config.name}.isbn`}
-            defaultValue={book.config.defaultValue.isbn}
-          />
+      {list.map((item, index) => (
+        <div key={item.key}>
+          {/* Setup an input per item */}
+          <input {...conform.input(item.config)} />
+
+          {/* Error of each book */}
+          <span>{item.error}</span>
 
           {/* To setup a delete button */}
           <button {...command.remove({ index })}>Delete</button>
@@ -367,79 +358,86 @@ function CollectionFieldset() {
       ))}
 
       {/* To setup a button that can append a new row with optional default value */}
-      <button {...command.append({ defaultValue: { name: '', isbn: '' } })}>
-        add
-      </button>
+      <button {...command.append({ defaultValue: '' })}>add</button>
     </fieldset>
   );
 }
 ```
 
-This hook can also be used in combination with `useFieldset` to distribute the config:
+This hook can also be used in combination with `useFieldset` for nested list:
 
 ```tsx
-import { useForm, useFieldset, useFieldList } from '@conform-to/react';
+import {
+  type FieldConfig,
+  useForm,
+  useFieldset,
+  useFieldList,
+} from '@conform-to/react';
 import { useRef } from 'react';
 
+/**
+ * Consider the schema as follow:
+ */
+type Schema = {
+  list: Array<Item>;
+};
+
+type Item = {
+  title: string;
+  description: string;
+};
+
 function CollectionFieldset() {
-  const ref = useRef();
-  const { books } = useFieldset<Collection>(ref);
-  const [bookList, command] = useFieldList(ref, books.config);
+  const ref = useRef<HTMLFieldsetElement>(null);
+  const fieldset = useFieldset<Collection>(ref);
+  const [list, command] = useFieldList(ref, fieldset.list.config);
 
   return (
     <fieldset ref={ref}>
-      {bookList.map((book, index) => (
-        <div key={book.key}>
-          {/* `book.config` is a FieldConfig object similar to `books` */}
-          <BookFieldset {...book.config} />
-
-          {/* To setup a delete button */}
-          <button {...command.remove({ index })}>Delete</button>
+      {list.map((item, index) => (
+        <div key={item.key}>
+          {/* Pass the item config to another fieldset*/}
+          <ItemFieldset {...item.config} />
         </div>
       ))}
-
-      {/* To setup a button that can append a new row */}
-      <button {...command.append()}>add</button>
     </fieldset>
   );
 }
 
-/**
- * This is basically the BookFieldset component from
- * the `useFieldset` example, but setting all the
- * options with the component props instead
- */
-function BookFieldset({ name, form, defaultValue, error }) {
-  const ref = useRef();
-  const { name, isbn } = useFieldset(ref, {
-    name,
-    form,
-    defaultValue,
-    error,
-  });
+function ItemFieldset(config: FieldConfig<Item>) {
+  const ref = useRef<HTMLFieldsetElement>(null);
+  const { title, description } = useFieldset(ref, config);
 
-  return <fieldset ref={ref}>{/* ... */}</fieldset>;
+  return (
+    <fieldset ref={ref}>
+      <input {...conform.input(title.config)} />
+      <span>{title.error}</span>
+
+      <input {...conform.input(description.config)} />
+      <span>{description.error}</span>
+    </fieldset>
+  );
 }
 ```
 
 <details>
-  <summary>What can I do with `controls`?</summary>
+  <summary>What can I do with `command`?</summary>
 
 ```tsx
 // To append a new row with optional defaultValue
-<button {...controls.append({ defaultValue })}>Append</button>;
+<button {...command.append({ defaultValue })}>Append</button>;
 
 // To prepend a new row with optional defaultValue
-<button {...controls.prepend({ defaultValue })}>Prepend</button>;
+<button {...command.prepend({ defaultValue })}>Prepend</button>;
 
 // To remove a row by index
-<button {...controls.remove({ index })}>Remove</button>;
+<button {...command.remove({ index })}>Remove</button>;
 
 // To replace a row with another defaultValue
-<button {...controls.replace({ index, defaultValue })}>Replace</button>;
+<button {...command.replace({ index, defaultValue })}>Replace</button>;
 
 // To reorder a particular row to an another index
-<button {...controls.reorder({ from, to })}>Reorder</button>;
+<button {...command.reorder({ from, to })}>Reorder</button>;
 ```
 
 </details>

package/base.d.ts

@@ -0,0 +1,17 @@
+import { type InputHTMLAttributes, type RefObject } from 'react';
+declare type EventLikeOrString = {
+    target: {
+        value: string;
+    };
+} | string;
+declare type InputControl = {
+    onChange: (eventLikeOrString: EventLikeOrString) => void;
+    onInput: (eventLikeOrString: EventLikeOrString) => void;
+    onFocus: () => void;
+    onBlur: () => void;
+};
+export declare function useInputControl(ref: RefObject<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>): InputControl;
+export declare const BaseInput: import("react").ForwardRefExoticComponent<{
+    name: string;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "name" | "type" | "value" | "defaultValue"> & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/base.js

@@ -0,0 +1,112 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
+var react = require('react');
+
+var _excluded = ["hidden", "className", "style"];
+/**
+ * Triggering react custom change event
+ * Solution based on dom-testing-library
+ * @see https://github.com/facebook/react/issues/10135#issuecomment-401496776
+ * @see https://github.com/testing-library/dom-testing-library/blob/main/src/events.js#L104-L123
+ */
+function setNativeValue(element, value) {
+  var {
+    set: valueSetter
+  } = Object.getOwnPropertyDescriptor(element, 'value') || {};
+  var prototype = Object.getPrototypeOf(element);
+  var {
+    set: prototypeValueSetter
+  } = Object.getOwnPropertyDescriptor(prototype, 'value') || {};
+  if (prototypeValueSetter && valueSetter !== prototypeValueSetter) {
+    prototypeValueSetter.call(element, value);
+  } else {
+    if (valueSetter) {
+      valueSetter.call(element, value);
+    } else {
+      throw new Error('The given element does not have a value setter');
+    }
+  }
+}
+function useInputControl(ref) {
+  function getInputElement() {
+    var $input = ref.current;
+    if (!$input) {
+      console.warn('input ref is not available; Maybe you forget to setup the ref?');
+    }
+    return $input;
+  }
+  return {
+    onChange(eventLikeOrString) {
+      var $input = getInputElement();
+      var value = typeof eventLikeOrString === 'string' ? eventLikeOrString : eventLikeOrString.target.value;
+      if ($input && $input.value !== value) {
+        $input.dispatchEvent(new InputEvent('beforeinput', {
+          bubbles: true,
+          cancelable: true
+        }));
+        setNativeValue($input, value);
+        $input.dispatchEvent(new InputEvent('input', {
+          bubbles: true,
+          cancelable: true
+        }));
+      }
+    },
+    onInput(eventLikeOrString) {
+      this.onChange(eventLikeOrString);
+    },
+    onFocus() {
+      var $input = getInputElement();
+      if ($input) {
+        $input.dispatchEvent(new FocusEvent('focusin', {
+          bubbles: true,
+          cancelable: true
+        }));
+        $input.dispatchEvent(new FocusEvent('focus', {
+          cancelable: true
+        }));
+      }
+    },
+    onBlur() {
+      var $input = getInputElement();
+      if ($input) {
+        $input.dispatchEvent(new FocusEvent('focusout', {
+          bubbles: true,
+          cancelable: true
+        }));
+        $input.dispatchEvent(new FocusEvent('blur', {
+          cancelable: true
+        }));
+      }
+    }
+  };
+}
+function BaseInputImpl(_ref, ref) {
+  var {
+      hidden = true,
+      className,
+      style
+    } = _ref,
+    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/react.createElement('input', _rollupPluginBabelHelpers.objectSpread2({
+    ref,
+    className: hidden ? '' : className,
+    style: hidden ? {
+      position: 'absolute',
+      width: '1px',
+      height: '1px',
+      padding: 0,
+      margin: '-1px',
+      overflow: 'hidden',
+      clip: 'rect(0,0,0,0)',
+      whiteSpace: 'nowrap',
+      borderWidth: 0
+    } : style
+  }, props));
+}
+var BaseInput = /*#__PURE__*/react.forwardRef(BaseInputImpl);
+
+exports.BaseInput = BaseInput;
+exports.useInputControl = useInputControl;

package/helpers.d.ts

@@ -1,8 +1,47 @@
-import { type FieldConfig, type Primitive } from '@conform-to/dom';
-import { type InputHTMLAttributes, type SelectHTMLAttributes, type TextareaHTMLAttributes } from 'react';
-export declare function input<Schema extends Primitive>(config: FieldConfig<Schema>, { type, value }?: {
-    type?: string;
+import type { FieldConfig } from '@conform-to/dom';
+import type { HTMLInputTypeAttribute } from 'react';
+interface FieldProps {
+    name: string;
+    form?: string;
+    required?: boolean;
+    autoFocus?: boolean;
+}
+interface InputProps<Schema> extends FieldProps {
+    type?: HTMLInputTypeAttribute;
+    minLength?: number;
+    maxLength?: number;
+    min?: Schema extends number ? number : string | number;
+    max?: Schema extends number ? number : string | number;
+    step?: Schema extends number ? number : string | number;
+    pattern?: string;
+    multiple?: boolean;
     value?: string;
-}): InputHTMLAttributes<HTMLInputElement>;
-export declare function select<Schema extends Primitive | Array<Primitive>>(config: FieldConfig<Schema>): SelectHTMLAttributes<HTMLSelectElement>;
-export declare function textarea<Schema extends Primitive>(config: FieldConfig<Schema>): TextareaHTMLAttributes<HTMLTextAreaElement>;
+    defaultChecked?: boolean;
+    defaultValue?: string;
+}
+interface SelectProps extends FieldProps {
+    defaultValue?: string | number | readonly string[] | undefined;
+    multiple?: boolean;
+}
+interface TextareaProps extends FieldProps {
+    minLength?: number;
+    maxLength?: number;
+    defaultValue?: string;
+}
+declare type InputOptions = {
+    type: 'checkbox' | 'radio';
+    value?: string;
+} | {
+    type: 'file';
+    value?: never;
+} | {
+    type?: Exclude<HTMLInputTypeAttribute, 'button' | 'submit' | 'hidden' | 'file'>;
+    value?: never;
+};
+export declare function input<Schema extends File | File[]>(config: FieldConfig<Schema>, options: {
+    type: 'file';
+}): InputProps<Schema>;
+export declare function input<Schema extends any>(config: FieldConfig<Schema>, options?: InputOptions): InputProps<Schema>;
+export declare function select<Schema>(config: FieldConfig<Schema>): SelectProps;
+export declare function textarea<Schema>(config: FieldConfig<Schema>): TextareaProps;
+export {};

package/helpers.js

@@ -3,13 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 function input(config) {
-  var {
-    type,
-    value
-  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var isCheckboxOrRadio = type === 'checkbox' || type === 'radio';
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var attributes = {
-    type,
+    type: options.type,
     name: config.name,
     form: config.form,
     required: config.required,
@@ -24,10 +20,11 @@ function input(config) {
   if (config.initialError && config.initialError.length > 0) {
     attributes.autoFocus = true;
   }
-  if (isCheckboxOrRadio) {
-    attributes.value = value !== null && value !== void 0 ? value : 'on';
+  if (options.type === 'checkbox' || options.type === 'radio') {
+    var _options$value;
+    attributes.value = (_options$value = options.value) !== null && _options$value !== void 0 ? _options$value : 'on';
     attributes.defaultChecked = config.defaultValue === attributes.value;
-  } else {
+  } else if (options.type !== 'file') {
     attributes.defaultValue = config.defaultValue;
   }
   return attributes;

package/hooks.d.ts

@@ -66,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.3/packages/conform-react/README.md#useform
+ * @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#useform
  */
 export declare function useForm<Schema extends Record<string, any>>(config?: FormConfig<Schema>): Form<Schema>;
 /**
@@ -107,7 +107,7 @@ 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.3/packages/conform-react/README.md#usefieldset
+ * @see https://github.com/edmundhung/conform/tree/v0.4.1/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>;
@@ -124,11 +124,12 @@ declare type ListCommandPayload<Schema, Type extends ListCommand<FieldValue<Sche
  * 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.3/packages/conform-react/README.md#usefieldlist
+ * @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#usefieldlist
  */
 export declare function useFieldList<Payload = any>(ref: RefObject<HTMLFormElement | HTMLFieldSetElement>, config: FieldConfig<Array<Payload>>): [
     Array<{
         key: string;
+        error: string | undefined;
         config: FieldConfig<Payload>;
     }>,
     {
@@ -160,7 +161,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.3/packages/conform-react/README.md#usecontrolledinput
+ * @see https://github.com/edmundhung/conform/tree/v0.4.1/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.3/packages/conform-react/README.md#useform
+ * @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#useform
  */
 function useForm() {
   var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -48,11 +48,7 @@ function useForm() {
     if (!form || !config.state) {
       return;
     }
-    dom.setFormError(form, config.state);
-    if (!form.reportValidity()) {
-      dom.focusFirstInvalidField(form);
-    }
-    dom.requestSubmit(form);
+    dom.reportSubmission(form, config.state);
   }, [config.state]);
   react.useEffect(() => {
     // Revalidate the form when input value is changed
@@ -85,7 +81,7 @@ function useForm() {
     var handleInvalid = event => {
       var form = dom.getFormElement(ref.current);
       var field = event.target;
-      if (!form || !dom.isFieldElement(field) || field.form !== form || field.name !== '') {
+      if (!form || !dom.isFieldElement(field) || field.form !== form || field.name !== '__form__') {
         return;
       }
       event.preventDefault();
@@ -141,12 +137,6 @@ function useForm() {
         var form = event.currentTarget;
         var nativeEvent = event.nativeEvent;
         var submitter = nativeEvent.submitter;
-        for (var element of form.elements) {
-          if (dom.isFieldElement(element) && element.name === '') {
-            setError(element.validationMessage);
-            break;
-          }
-        }
 
         /**
          * It checks defaultPrevented to confirm if the submission is intentional
@@ -154,8 +144,7 @@ function useForm() {
          * event is captured and revalidate the form with new fields without triggering
          * a form submission at the same time.
          */
-        if (!submitter || event.defaultPrevented) {
-          event.preventDefault();
+        if (event.defaultPrevented) {
           return;
         }
         try {
@@ -176,14 +165,10 @@ function useForm() {
                *
                * This is mainly used to showcase the constraint validation API.
                */
-              dom.setFormError(form, {
-                type: 'submit',
-                value: {},
-                error: []
-              });
-              for (var _element of form.elements) {
-                if (dom.isFieldElement(_element) && _element.willValidate) {
-                  submission.error.push([_element.name, _element.validationMessage]);
+              for (var element of form.elements) {
+                if (dom.isFieldElement(element) && element.willValidate) {
+                  element.setCustomValidity('');
+                  submission.error.push([element.name, element.validationMessage]);
                 }
               }
             }
@@ -198,7 +183,7 @@ function useForm() {
               }
             }
           }
-          if (!config.noValidate && !submitter.formNoValidate && dom.hasError(submission.error) || submission.type === 'validate' && config.mode !== 'server-validation') {
+          if (!config.noValidate && !(submitter !== null && submitter !== void 0 && submitter.formNoValidate) && dom.hasError(submission.error) || submission.type === 'validate' && config.mode !== 'server-validation') {
             event.preventDefault();
           } else {
             var _config$onSubmit;
@@ -208,10 +193,7 @@ function useForm() {
             });
           }
           if (event.defaultPrevented) {
-            dom.setFormError(form, submission);
-            if (!form.reportValidity()) {
-              dom.focusFirstInvalidField(form);
-            }
+            dom.reportSubmission(form, submission);
           }
         } catch (e) {
           console.warn(e);
@@ -294,38 +276,6 @@ function useFieldset(ref, config) {
         event.preventDefault();
       }
     };
-    var submitHandler = event => {
-      var form = dom.getFormElement(ref.current);
-      if (!form || event.target !== form) {
-        return;
-      }
-
-      /**
-       * Reset the error state of each field if its validity is changed.
-       *
-       * This is a workaround as no official way is provided to notify
-       * when the validity of the field is changed from `invalid` to `valid`.
-       */
-      setError(prev => {
-        var _configRef$current$na2;
-        var next = prev;
-        var fieldsetName = (_configRef$current$na2 = configRef.current.name) !== null && _configRef$current$na2 !== void 0 ? _configRef$current$na2 : '';
-        for (var field of form.elements) {
-          if (dom.isFieldElement(field) && field.name.startsWith(fieldsetName)) {
-            var _next$key, _next;
-            var key = fieldsetName ? field.name.slice(fieldsetName.length + 1) : field.name;
-            var prevMessage = (_next$key = (_next = next) === null || _next === void 0 ? void 0 : _next[key]) !== null && _next$key !== void 0 ? _next$key : '';
-            var nextMessage = field.validationMessage;
-            if (prevMessage !== '' && nextMessage === '') {
-              next = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, next), {}, {
-                [key]: ''
-              });
-            }
-          }
-        }
-        return next;
-      });
-    };
     var resetHandler = event => {
       var _fieldsetConfig$defau;
       var form = dom.getFormElement(ref.current);
@@ -343,11 +293,9 @@ function useFieldset(ref, config) {
 
     // The invalid event does not bubble and so listening on the capturing pharse is needed
     document.addEventListener('invalid', invalidHandler, true);
-    document.addEventListener('submit', submitHandler);
     document.addEventListener('reset', resetHandler);
     return () => {
       document.removeEventListener('invalid', invalidHandler, true);
-      document.removeEventListener('submit', submitHandler);
       document.removeEventListener('reset', resetHandler);
     };
   }, [ref]);
@@ -382,7 +330,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.3/packages/conform-react/README.md#usefieldlist
+ * @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#usefieldlist
  */
 function useFieldList(ref, config) {
   var configRef = react.useRef(config);
@@ -408,6 +356,7 @@ function useFieldList(ref, config) {
       initialError
     };
   });
+  var [error, setError] = react.useState(() => uncontrolledState.initialError.map(error => error === null || error === void 0 ? void 0 : error[0][1]));
   var [entries, setEntries] = react.useState(() => {
     var _config$defaultValue3;
     return Object.entries((_config$defaultValue3 = config.defaultValue) !== null && _config$defaultValue3 !== void 0 ? _config$defaultValue3 : [undefined]);
@@ -416,6 +365,7 @@ function useFieldList(ref, config) {
     var [key, defaultValue] = _ref3;
     return {
       key,
+      error: error[index],
       config: {
         name: "".concat(config.name, "[").concat(index, "]"),
         form: config.form,
@@ -450,6 +400,31 @@ function useFieldList(ref, config) {
     configRef.current = config;
   });
   react.useEffect(() => {
+    var invalidHandler = event => {
+      var _configRef$current$na2;
+      var form = dom.getFormElement(ref.current);
+      var field = event.target;
+      var prefix = (_configRef$current$na2 = configRef.current.name) !== null && _configRef$current$na2 !== void 0 ? _configRef$current$na2 : '';
+      if (!form || !dom.isFieldElement(field) || field.form !== form || !field.name.startsWith(prefix)) {
+        return;
+      }
+      var [index, ...paths] = dom.getPaths(prefix.length > 0 ? field.name.slice(prefix.length) : field.name);
+
+      // Update the error only if the field belongs to the fieldset
+      if (typeof index === 'number' && paths.length === 0) {
+        if (field.dataset.conformTouched) {
+          setError(prev => {
+            var _prev$index;
+            var prevMessage = (_prev$index = prev === null || prev === void 0 ? void 0 : prev[index]) !== null && _prev$index !== void 0 ? _prev$index : '';
+            if (prevMessage === field.validationMessage) {
+              return prev;
+            }
+            return [...prev.slice(0, index), field.validationMessage, ...prev.slice(index + 1)];
+          });
+        }
+        event.preventDefault();
+      }
+    };
     var submitHandler = event => {
       var form = dom.getFormElement(ref.current);
       if (!form || event.target !== form || !(event.submitter instanceof HTMLButtonElement) || event.submitter.name !== 'conform/list') {
@@ -476,6 +451,22 @@ function useFieldList(ref, config) {
             }
         }
       });
+      setError(error => {
+        switch (command.type) {
+          case 'append':
+          case 'prepend':
+          case 'replace':
+            return dom.updateList([...error], _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, command), {}, {
+              payload: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, command.payload), {}, {
+                defaultValue: undefined
+              })
+            }));
+          default:
+            {
+              return dom.updateList([...error], command);
+            }
+        }
+      });
       event.preventDefault();
     };
     var resetHandler = event => {
@@ -490,11 +481,14 @@ function useFieldList(ref, config) {
         initialError: []
       });
       setEntries(Object.entries((_fieldConfig$defaultV2 = fieldConfig.defaultValue) !== null && _fieldConfig$defaultV2 !== void 0 ? _fieldConfig$defaultV2 : [undefined]));
+      setError([]);
     };
     document.addEventListener('submit', submitHandler, true);
+    document.addEventListener('invalid', invalidHandler, true);
     document.addEventListener('reset', resetHandler);
     return () => {
       document.removeEventListener('submit', submitHandler, true);
+      document.removeEventListener('invalid', invalidHandler, true);
       document.removeEventListener('reset', resetHandler);
     };
   }, [ref]);
@@ -507,7 +501,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.3/packages/conform-react/README.md#usecontrolledinput
+ * @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#usecontrolledinput
  */
 function useControlledInput(config) {
   var _config$defaultValue4;
@@ -573,13 +567,13 @@ function useControlledInput(config) {
       whiteSpace: 'nowrap',
       borderWidth: 0
     },
+    tabIndex: -1,
+    'aria-hidden': true,
     onFocus() {
       var _inputRef$current;
       (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
     }
-  }, helpers.input(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, config), uncontrolledState), {
-    type: 'text'
-  })), {
+  }, helpers.input(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, config), uncontrolledState))), {
     ref: inputRef,
     value,
     onChange: handleChange,

package/index.d.ts

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

package/module/base.js

@@ -0,0 +1,107 @@
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.js';
+import { forwardRef, createElement } from 'react';
+
+var _excluded = ["hidden", "className", "style"];
+/**
+ * Triggering react custom change event
+ * Solution based on dom-testing-library
+ * @see https://github.com/facebook/react/issues/10135#issuecomment-401496776
+ * @see https://github.com/testing-library/dom-testing-library/blob/main/src/events.js#L104-L123
+ */
+function setNativeValue(element, value) {
+  var {
+    set: valueSetter
+  } = Object.getOwnPropertyDescriptor(element, 'value') || {};
+  var prototype = Object.getPrototypeOf(element);
+  var {
+    set: prototypeValueSetter
+  } = Object.getOwnPropertyDescriptor(prototype, 'value') || {};
+  if (prototypeValueSetter && valueSetter !== prototypeValueSetter) {
+    prototypeValueSetter.call(element, value);
+  } else {
+    if (valueSetter) {
+      valueSetter.call(element, value);
+    } else {
+      throw new Error('The given element does not have a value setter');
+    }
+  }
+}
+function useInputControl(ref) {
+  function getInputElement() {
+    var $input = ref.current;
+    if (!$input) {
+      console.warn('input ref is not available; Maybe you forget to setup the ref?');
+    }
+    return $input;
+  }
+  return {
+    onChange(eventLikeOrString) {
+      var $input = getInputElement();
+      var value = typeof eventLikeOrString === 'string' ? eventLikeOrString : eventLikeOrString.target.value;
+      if ($input && $input.value !== value) {
+        $input.dispatchEvent(new InputEvent('beforeinput', {
+          bubbles: true,
+          cancelable: true
+        }));
+        setNativeValue($input, value);
+        $input.dispatchEvent(new InputEvent('input', {
+          bubbles: true,
+          cancelable: true
+        }));
+      }
+    },
+    onInput(eventLikeOrString) {
+      this.onChange(eventLikeOrString);
+    },
+    onFocus() {
+      var $input = getInputElement();
+      if ($input) {
+        $input.dispatchEvent(new FocusEvent('focusin', {
+          bubbles: true,
+          cancelable: true
+        }));
+        $input.dispatchEvent(new FocusEvent('focus', {
+          cancelable: true
+        }));
+      }
+    },
+    onBlur() {
+      var $input = getInputElement();
+      if ($input) {
+        $input.dispatchEvent(new FocusEvent('focusout', {
+          bubbles: true,
+          cancelable: true
+        }));
+        $input.dispatchEvent(new FocusEvent('blur', {
+          cancelable: true
+        }));
+      }
+    }
+  };
+}
+function BaseInputImpl(_ref, ref) {
+  var {
+      hidden = true,
+      className,
+      style
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/createElement('input', _objectSpread2({
+    ref,
+    className: hidden ? '' : className,
+    style: hidden ? {
+      position: 'absolute',
+      width: '1px',
+      height: '1px',
+      padding: 0,
+      margin: '-1px',
+      overflow: 'hidden',
+      clip: 'rect(0,0,0,0)',
+      whiteSpace: 'nowrap',
+      borderWidth: 0
+    } : style
+  }, props));
+}
+var BaseInput = /*#__PURE__*/forwardRef(BaseInputImpl);
+
+export { BaseInput, useInputControl };

package/module/helpers.js

@@ -1,11 +1,7 @@
 function input(config) {
-  var {
-    type,
-    value
-  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var isCheckboxOrRadio = type === 'checkbox' || type === 'radio';
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var attributes = {
-    type,
+    type: options.type,
     name: config.name,
     form: config.form,
     required: config.required,
@@ -20,10 +16,11 @@ function input(config) {
   if (config.initialError && config.initialError.length > 0) {
     attributes.autoFocus = true;
   }
-  if (isCheckboxOrRadio) {
-    attributes.value = value !== null && value !== void 0 ? value : 'on';
+  if (options.type === 'checkbox' || options.type === 'radio') {
+    var _options$value;
+    attributes.value = (_options$value = options.value) !== null && _options$value !== void 0 ? _options$value : 'on';
     attributes.defaultChecked = config.defaultValue === attributes.value;
-  } else {
+  } else if (options.type !== 'file') {
     attributes.defaultValue = config.defaultValue;
   }
   return attributes;

package/module/hooks.js

@@ -1,5 +1,5 @@
 import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.js';
-import { getSubmissionType, setFormError, focusFirstInvalidField, requestSubmit, isFieldElement, getFormData, parse, hasError, getPaths, getName, requestValidate, getFormElement, parseListCommand, updateList } from '@conform-to/dom';
+import { getSubmissionType, reportSubmission, getFormData, parse, isFieldElement, 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.3/packages/conform-react/README.md#useform
+ * @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#useform
  */
 function useForm() {
   var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -44,11 +44,7 @@ function useForm() {
     if (!form || !config.state) {
       return;
     }
-    setFormError(form, config.state);
-    if (!form.reportValidity()) {
-      focusFirstInvalidField(form);
-    }
-    requestSubmit(form);
+    reportSubmission(form, config.state);
   }, [config.state]);
   useEffect(() => {
     // Revalidate the form when input value is changed
@@ -81,7 +77,7 @@ function useForm() {
     var handleInvalid = event => {
       var form = getFormElement(ref.current);
       var field = event.target;
-      if (!form || !isFieldElement(field) || field.form !== form || field.name !== '') {
+      if (!form || !isFieldElement(field) || field.form !== form || field.name !== '__form__') {
         return;
       }
       event.preventDefault();
@@ -137,12 +133,6 @@ function useForm() {
         var form = event.currentTarget;
         var nativeEvent = event.nativeEvent;
         var submitter = nativeEvent.submitter;
-        for (var element of form.elements) {
-          if (isFieldElement(element) && element.name === '') {
-            setError(element.validationMessage);
-            break;
-          }
-        }
 
         /**
          * It checks defaultPrevented to confirm if the submission is intentional
@@ -150,8 +140,7 @@ function useForm() {
          * event is captured and revalidate the form with new fields without triggering
          * a form submission at the same time.
          */
-        if (!submitter || event.defaultPrevented) {
-          event.preventDefault();
+        if (event.defaultPrevented) {
           return;
         }
         try {
@@ -172,14 +161,10 @@ function useForm() {
                *
                * This is mainly used to showcase the constraint validation API.
                */
-              setFormError(form, {
-                type: 'submit',
-                value: {},
-                error: []
-              });
-              for (var _element of form.elements) {
-                if (isFieldElement(_element) && _element.willValidate) {
-                  submission.error.push([_element.name, _element.validationMessage]);
+              for (var element of form.elements) {
+                if (isFieldElement(element) && element.willValidate) {
+                  element.setCustomValidity('');
+                  submission.error.push([element.name, element.validationMessage]);
                 }
               }
             }
@@ -194,7 +179,7 @@ function useForm() {
               }
             }
           }
-          if (!config.noValidate && !submitter.formNoValidate && hasError(submission.error) || submission.type === 'validate' && config.mode !== 'server-validation') {
+          if (!config.noValidate && !(submitter !== null && submitter !== void 0 && submitter.formNoValidate) && hasError(submission.error) || submission.type === 'validate' && config.mode !== 'server-validation') {
             event.preventDefault();
           } else {
             var _config$onSubmit;
@@ -204,10 +189,7 @@ function useForm() {
             });
           }
           if (event.defaultPrevented) {
-            setFormError(form, submission);
-            if (!form.reportValidity()) {
-              focusFirstInvalidField(form);
-            }
+            reportSubmission(form, submission);
           }
         } catch (e) {
           console.warn(e);
@@ -290,38 +272,6 @@ function useFieldset(ref, config) {
         event.preventDefault();
       }
     };
-    var submitHandler = event => {
-      var form = getFormElement(ref.current);
-      if (!form || event.target !== form) {
-        return;
-      }
-
-      /**
-       * Reset the error state of each field if its validity is changed.
-       *
-       * This is a workaround as no official way is provided to notify
-       * when the validity of the field is changed from `invalid` to `valid`.
-       */
-      setError(prev => {
-        var _configRef$current$na2;
-        var next = prev;
-        var fieldsetName = (_configRef$current$na2 = configRef.current.name) !== null && _configRef$current$na2 !== void 0 ? _configRef$current$na2 : '';
-        for (var field of form.elements) {
-          if (isFieldElement(field) && field.name.startsWith(fieldsetName)) {
-            var _next$key, _next;
-            var key = fieldsetName ? field.name.slice(fieldsetName.length + 1) : field.name;
-            var prevMessage = (_next$key = (_next = next) === null || _next === void 0 ? void 0 : _next[key]) !== null && _next$key !== void 0 ? _next$key : '';
-            var nextMessage = field.validationMessage;
-            if (prevMessage !== '' && nextMessage === '') {
-              next = _objectSpread2(_objectSpread2({}, next), {}, {
-                [key]: ''
-              });
-            }
-          }
-        }
-        return next;
-      });
-    };
     var resetHandler = event => {
       var _fieldsetConfig$defau;
       var form = getFormElement(ref.current);
@@ -339,11 +289,9 @@ function useFieldset(ref, config) {
 
     // The invalid event does not bubble and so listening on the capturing pharse is needed
     document.addEventListener('invalid', invalidHandler, true);
-    document.addEventListener('submit', submitHandler);
     document.addEventListener('reset', resetHandler);
     return () => {
       document.removeEventListener('invalid', invalidHandler, true);
-      document.removeEventListener('submit', submitHandler);
       document.removeEventListener('reset', resetHandler);
     };
   }, [ref]);
@@ -378,7 +326,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.3/packages/conform-react/README.md#usefieldlist
+ * @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#usefieldlist
  */
 function useFieldList(ref, config) {
   var configRef = useRef(config);
@@ -404,6 +352,7 @@ function useFieldList(ref, config) {
       initialError
     };
   });
+  var [error, setError] = useState(() => uncontrolledState.initialError.map(error => error === null || error === void 0 ? void 0 : error[0][1]));
   var [entries, setEntries] = useState(() => {
     var _config$defaultValue3;
     return Object.entries((_config$defaultValue3 = config.defaultValue) !== null && _config$defaultValue3 !== void 0 ? _config$defaultValue3 : [undefined]);
@@ -412,6 +361,7 @@ function useFieldList(ref, config) {
     var [key, defaultValue] = _ref3;
     return {
       key,
+      error: error[index],
       config: {
         name: "".concat(config.name, "[").concat(index, "]"),
         form: config.form,
@@ -446,6 +396,31 @@ function useFieldList(ref, config) {
     configRef.current = config;
   });
   useEffect(() => {
+    var invalidHandler = event => {
+      var _configRef$current$na2;
+      var form = 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 || !isFieldElement(field) || field.form !== form || !field.name.startsWith(prefix)) {
+        return;
+      }
+      var [index, ...paths] = getPaths(prefix.length > 0 ? field.name.slice(prefix.length) : field.name);
+
+      // Update the error only if the field belongs to the fieldset
+      if (typeof index === 'number' && paths.length === 0) {
+        if (field.dataset.conformTouched) {
+          setError(prev => {
+            var _prev$index;
+            var prevMessage = (_prev$index = prev === null || prev === void 0 ? void 0 : prev[index]) !== null && _prev$index !== void 0 ? _prev$index : '';
+            if (prevMessage === field.validationMessage) {
+              return prev;
+            }
+            return [...prev.slice(0, index), field.validationMessage, ...prev.slice(index + 1)];
+          });
+        }
+        event.preventDefault();
+      }
+    };
     var submitHandler = event => {
       var form = getFormElement(ref.current);
       if (!form || event.target !== form || !(event.submitter instanceof HTMLButtonElement) || event.submitter.name !== 'conform/list') {
@@ -472,6 +447,22 @@ function useFieldList(ref, config) {
             }
         }
       });
+      setError(error => {
+        switch (command.type) {
+          case 'append':
+          case 'prepend':
+          case 'replace':
+            return updateList([...error], _objectSpread2(_objectSpread2({}, command), {}, {
+              payload: _objectSpread2(_objectSpread2({}, command.payload), {}, {
+                defaultValue: undefined
+              })
+            }));
+          default:
+            {
+              return updateList([...error], command);
+            }
+        }
+      });
       event.preventDefault();
     };
     var resetHandler = event => {
@@ -486,11 +477,14 @@ function useFieldList(ref, config) {
         initialError: []
       });
       setEntries(Object.entries((_fieldConfig$defaultV2 = fieldConfig.defaultValue) !== null && _fieldConfig$defaultV2 !== void 0 ? _fieldConfig$defaultV2 : [undefined]));
+      setError([]);
     };
     document.addEventListener('submit', submitHandler, true);
+    document.addEventListener('invalid', invalidHandler, true);
     document.addEventListener('reset', resetHandler);
     return () => {
       document.removeEventListener('submit', submitHandler, true);
+      document.removeEventListener('invalid', invalidHandler, true);
       document.removeEventListener('reset', resetHandler);
     };
   }, [ref]);
@@ -503,7 +497,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.3/packages/conform-react/README.md#usecontrolledinput
+ * @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#usecontrolledinput
  */
 function useControlledInput(config) {
   var _config$defaultValue4;
@@ -569,13 +563,13 @@ function useControlledInput(config) {
       whiteSpace: 'nowrap',
       borderWidth: 0
     },
+    tabIndex: -1,
+    'aria-hidden': true,
     onFocus() {
       var _inputRef$current;
       (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
     }
-  }, input(_objectSpread2(_objectSpread2({}, config), uncontrolledState), {
-    type: 'text'
-  })), {
+  }, input(_objectSpread2(_objectSpread2({}, config), uncontrolledState))), {
     ref: inputRef,
     value,
     onChange: handleChange,

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@conform-to/react",
 	"description": "Conform view adapter for react",
 	"license": "MIT",
-	"version": "0.4.0",
+	"version": "0.5.0-pre.0",
 	"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"
+		"@conform-to/dom": "0.5.0-pre.0"
 	},
 	"peerDependencies": {
 		"react": ">=16.8"