@conform-to/react 1.0.0-rc.1 → 1.0.1

package/README

@@ -8,25 +8,30 @@
  ╚══════╝  ╚═════╝  ╚═╝  ╚══╝ ╚═╝        ╚═════╝  ╚═╝   ╚═╝ ╚═╝   ╚═╝
 
 
-Version 1.0.0-rc.0 / License MIT / Copyright (c) 2024 Edmund Hung
+Version 1.0.1 / License MIT / Copyright (c) 2024 Edmund Hung
 
 A type-safe form validation library utilizing web fundamentals to progressively enhance HTML Forms with full support for server frameworks like Remix and Next.js.
 
-> Getting Started
+# Getting Started
 
 Check out the overview and tutorial at our website https://conform.guide
 
-> Documentation
+# Features
 
-The documentation is divided into several sections:
+- Progressive enhancement first APIs
+- Type-safe field inference
+- Fine-grained subscription
+- Built-in accessibility helpers
+- Automatic type coercion with Zod
 
-* Overview: https://conform.guide/overview
-* Examples: https://conform.guide/examples
-* Complex structures: https://conform.guide/complex-structures
-* UI Integrations: https://conform.guide/integrations
-* Accessibility Guide: https://conform.guide/accessibility
-* API Reference: https://conform.guide/references
+# Documentation
 
-> Support
+- Validation: https://conform.guide/validation
+- Nested object and Array: https://conform.guide/complex-structures
+- UI Integrations: https://conform.guide/integration/ui-libraries
+- Intent button: https://conform.guide/intent-button
+- Accessibility Guide: https://conform.guide/accessibility
+
+# Support
 
 To report a bug, please open an issue on the repository at https://github.com/edmundhung/conform. For feature requests and questions, you can post them in the Discussions section.

package/context.d.ts

@@ -3,7 +3,7 @@ import { type FormEvent, type ReactElement, type ReactNode, type MutableRefObjec
 export type Pretty<T> = {
     [K in keyof T]: T[K];
 } & {};
-export type Primitive = string | number | boolean | Date | File | null | undefined;
+export type Primitive = string | number | bigint | boolean | Date | File | null | undefined;
 export type Metadata<Schema, FormSchema extends Record<string, unknown>, FormError = string[]> = {
     key: string | undefined;
     id: string;
@@ -27,9 +27,8 @@ export type FormMetadata<Schema extends Record<string, unknown> = Record<string,
     onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
     noValidate: boolean;
 };
-export type FieldMetadata<Schema = unknown, FormSchema extends Record<string, any> = Record<string, unknown>, FormError = string[]> = Metadata<Schema, FormSchema, FormError> & {
+export type FieldMetadata<Schema = unknown, FormSchema extends Record<string, any> = Record<string, unknown>, FormError = string[]> = Metadata<Schema, FormSchema, FormError> & Constraint & {
     formId: FormId<FormSchema, FormError>;
-    constraint?: Constraint;
     getFieldset: unknown extends Schema ? () => unknown : Schema extends Primitive | Array<any> ? never : () => {
         [Key in UnionKeyof<Schema>]: FieldMetadata<UnionKeyType<Schema, Key>, FormSchema, FormError>;
     };

package/context.js

@@ -74,9 +74,15 @@ function getMetadata(formId, state, subjectRef) {
     name,
     errorId: "".concat(id, "-error"),
     descriptionId: "".concat(id, "-description"),
-    initialValue: state.initialValue[name],
-    value: state.value[name],
-    errors: state.error[name],
+    get initialValue() {
+      return state.initialValue[name];
+    },
+    get value() {
+      return state.value[name];
+    },
+    get errors() {
+      return state.error[name];
+    },
     get key() {
       return state.key[name];
     },
@@ -134,11 +140,19 @@ function getFieldMetadata(formId, state, subjectRef) {
   var metadata = getMetadata(formId, state, subjectRef, name);
   return new Proxy({}, {
     get(_, key, receiver) {
+      var _state$constraint$nam;
       switch (key) {
         case 'formId':
           return formId;
-        case 'constraint':
-          return state.constraint[name];
+        case 'required':
+        case 'minLength':
+        case 'maxLength':
+        case 'min':
+        case 'max':
+        case 'pattern':
+        case 'step':
+        case 'multiple':
+          return (_state$constraint$nam = state.constraint[name]) === null || _state$constraint$nam === void 0 ? void 0 : _state$constraint$nam[key];
         case 'getFieldList':
           {
             return () => {

package/context.mjs

@@ -70,9 +70,15 @@ function getMetadata(formId, state, subjectRef) {
     name,
     errorId: "".concat(id, "-error"),
     descriptionId: "".concat(id, "-description"),
-    initialValue: state.initialValue[name],
-    value: state.value[name],
-    errors: state.error[name],
+    get initialValue() {
+      return state.initialValue[name];
+    },
+    get value() {
+      return state.value[name];
+    },
+    get errors() {
+      return state.error[name];
+    },
     get key() {
       return state.key[name];
     },
@@ -130,11 +136,19 @@ function getFieldMetadata(formId, state, subjectRef) {
   var metadata = getMetadata(formId, state, subjectRef, name);
   return new Proxy({}, {
     get(_, key, receiver) {
+      var _state$constraint$nam;
       switch (key) {
         case 'formId':
           return formId;
-        case 'constraint':
-          return state.constraint[name];
+        case 'required':
+        case 'minLength':
+        case 'maxLength':
+        case 'min':
+        case 'max':
+        case 'pattern':
+        case 'step':
+        case 'multiple':
+          return (_state$constraint$nam = state.constraint[name]) === null || _state$constraint$nam === void 0 ? void 0 : _state$constraint$nam[key];
         case 'getFieldList':
           {
             return () => {

package/helpers.js

@@ -72,10 +72,9 @@ function getFieldsetProps(metadata, options) {
  * including `key`, `id`, `name`, `form`, `required`, `autoFocus`, `aria-invalid` and `aria-describedby`.
  */
 function getFormControlProps(metadata, options) {
-  var _metadata$constraint;
   return simplify(_rollupPluginBabelHelpers.objectSpread2({
     key: metadata.key,
-    required: ((_metadata$constraint = metadata.constraint) === null || _metadata$constraint === void 0 ? void 0 : _metadata$constraint.required) || undefined
+    required: metadata.required || undefined
   }, getFieldsetProps(metadata, options)));
 }
 
@@ -100,16 +99,15 @@ function getFormControlProps(metadata, options) {
  * ```
  */
 function getInputProps(metadata, options) {
-  var _metadata$constraint2, _metadata$constraint3, _metadata$constraint4, _metadata$constraint5, _metadata$constraint6, _metadata$constraint7, _metadata$constraint8;
   var props = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(metadata, options)), {}, {
     type: options.type,
-    minLength: (_metadata$constraint2 = metadata.constraint) === null || _metadata$constraint2 === void 0 ? void 0 : _metadata$constraint2.minLength,
-    maxLength: (_metadata$constraint3 = metadata.constraint) === null || _metadata$constraint3 === void 0 ? void 0 : _metadata$constraint3.maxLength,
-    min: (_metadata$constraint4 = metadata.constraint) === null || _metadata$constraint4 === void 0 ? void 0 : _metadata$constraint4.min,
-    max: (_metadata$constraint5 = metadata.constraint) === null || _metadata$constraint5 === void 0 ? void 0 : _metadata$constraint5.max,
-    step: (_metadata$constraint6 = metadata.constraint) === null || _metadata$constraint6 === void 0 ? void 0 : _metadata$constraint6.step,
-    pattern: (_metadata$constraint7 = metadata.constraint) === null || _metadata$constraint7 === void 0 ? void 0 : _metadata$constraint7.pattern,
-    multiple: (_metadata$constraint8 = metadata.constraint) === null || _metadata$constraint8 === void 0 ? void 0 : _metadata$constraint8.multiple
+    minLength: metadata.minLength,
+    maxLength: metadata.maxLength,
+    min: metadata.min,
+    max: metadata.max,
+    step: metadata.step,
+    pattern: metadata.pattern,
+    multiple: metadata.multiple
   });
   if (typeof options.value === 'undefined' || options.value) {
     if (options.type === 'checkbox' || options.type === 'radio') {
@@ -138,10 +136,9 @@ function getInputProps(metadata, options) {
  * ```
  */
 function getSelectProps(metadata) {
-  var _metadata$constraint9;
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var props = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(metadata, options)), {}, {
-    multiple: (_metadata$constraint9 = metadata.constraint) === null || _metadata$constraint9 === void 0 ? void 0 : _metadata$constraint9.multiple
+    multiple: metadata.multiple
   });
   if (typeof options.value === 'undefined' || options.value) {
     props.defaultValue = Array.isArray(metadata.initialValue) ? metadata.initialValue.map(item => "".concat(item !== null && item !== void 0 ? item : '')) : metadata.initialValue;
@@ -165,11 +162,10 @@ function getSelectProps(metadata) {
  * ```
  */
 function getTextareaProps(metadata) {
-  var _metadata$constraint10, _metadata$constraint11;
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var props = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(metadata, options)), {}, {
-    minLength: (_metadata$constraint10 = metadata.constraint) === null || _metadata$constraint10 === void 0 ? void 0 : _metadata$constraint10.minLength,
-    maxLength: (_metadata$constraint11 = metadata.constraint) === null || _metadata$constraint11 === void 0 ? void 0 : _metadata$constraint11.maxLength
+    minLength: metadata.minLength,
+    maxLength: metadata.maxLength
   });
   if (typeof options.value === 'undefined' || options.value) {
     props.defaultValue = metadata.initialValue;
@@ -199,7 +195,7 @@ function getTextareaProps(metadata) {
  */
 function getCollectionProps(metadata, options) {
   return options.options.map(value => {
-    var _metadata$key, _metadata$constraint12;
+    var _metadata$key;
     return simplify(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(metadata, options)), {}, {
       key: "".concat((_metadata$key = metadata.key) !== null && _metadata$key !== void 0 ? _metadata$key : '').concat(value),
       id: "".concat(metadata.id, "-").concat(value),
@@ -209,7 +205,7 @@ function getCollectionProps(metadata, options) {
       // The required attribute doesn't make sense for checkbox group
       // As it would require all checkboxes to be checked instead of at least one
       // It is overriden with `undefiend` so it could be cleaned up properly
-      required: options.type === 'checkbox' ? undefined : (_metadata$constraint12 = metadata.constraint) === null || _metadata$constraint12 === void 0 ? void 0 : _metadata$constraint12.required
+      required: options.type === 'checkbox' ? undefined : metadata.required
     }));
   });
 }

package/helpers.mjs

@@ -68,10 +68,9 @@ function getFieldsetProps(metadata, options) {
  * including `key`, `id`, `name`, `form`, `required`, `autoFocus`, `aria-invalid` and `aria-describedby`.
  */
 function getFormControlProps(metadata, options) {
-  var _metadata$constraint;
   return simplify(_objectSpread2({
     key: metadata.key,
-    required: ((_metadata$constraint = metadata.constraint) === null || _metadata$constraint === void 0 ? void 0 : _metadata$constraint.required) || undefined
+    required: metadata.required || undefined
   }, getFieldsetProps(metadata, options)));
 }
 
@@ -96,16 +95,15 @@ function getFormControlProps(metadata, options) {
  * ```
  */
 function getInputProps(metadata, options) {
-  var _metadata$constraint2, _metadata$constraint3, _metadata$constraint4, _metadata$constraint5, _metadata$constraint6, _metadata$constraint7, _metadata$constraint8;
   var props = _objectSpread2(_objectSpread2({}, getFormControlProps(metadata, options)), {}, {
     type: options.type,
-    minLength: (_metadata$constraint2 = metadata.constraint) === null || _metadata$constraint2 === void 0 ? void 0 : _metadata$constraint2.minLength,
-    maxLength: (_metadata$constraint3 = metadata.constraint) === null || _metadata$constraint3 === void 0 ? void 0 : _metadata$constraint3.maxLength,
-    min: (_metadata$constraint4 = metadata.constraint) === null || _metadata$constraint4 === void 0 ? void 0 : _metadata$constraint4.min,
-    max: (_metadata$constraint5 = metadata.constraint) === null || _metadata$constraint5 === void 0 ? void 0 : _metadata$constraint5.max,
-    step: (_metadata$constraint6 = metadata.constraint) === null || _metadata$constraint6 === void 0 ? void 0 : _metadata$constraint6.step,
-    pattern: (_metadata$constraint7 = metadata.constraint) === null || _metadata$constraint7 === void 0 ? void 0 : _metadata$constraint7.pattern,
-    multiple: (_metadata$constraint8 = metadata.constraint) === null || _metadata$constraint8 === void 0 ? void 0 : _metadata$constraint8.multiple
+    minLength: metadata.minLength,
+    maxLength: metadata.maxLength,
+    min: metadata.min,
+    max: metadata.max,
+    step: metadata.step,
+    pattern: metadata.pattern,
+    multiple: metadata.multiple
   });
   if (typeof options.value === 'undefined' || options.value) {
     if (options.type === 'checkbox' || options.type === 'radio') {
@@ -134,10 +132,9 @@ function getInputProps(metadata, options) {
  * ```
  */
 function getSelectProps(metadata) {
-  var _metadata$constraint9;
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var props = _objectSpread2(_objectSpread2({}, getFormControlProps(metadata, options)), {}, {
-    multiple: (_metadata$constraint9 = metadata.constraint) === null || _metadata$constraint9 === void 0 ? void 0 : _metadata$constraint9.multiple
+    multiple: metadata.multiple
   });
   if (typeof options.value === 'undefined' || options.value) {
     props.defaultValue = Array.isArray(metadata.initialValue) ? metadata.initialValue.map(item => "".concat(item !== null && item !== void 0 ? item : '')) : metadata.initialValue;
@@ -161,11 +158,10 @@ function getSelectProps(metadata) {
  * ```
  */
 function getTextareaProps(metadata) {
-  var _metadata$constraint10, _metadata$constraint11;
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var props = _objectSpread2(_objectSpread2({}, getFormControlProps(metadata, options)), {}, {
-    minLength: (_metadata$constraint10 = metadata.constraint) === null || _metadata$constraint10 === void 0 ? void 0 : _metadata$constraint10.minLength,
-    maxLength: (_metadata$constraint11 = metadata.constraint) === null || _metadata$constraint11 === void 0 ? void 0 : _metadata$constraint11.maxLength
+    minLength: metadata.minLength,
+    maxLength: metadata.maxLength
   });
   if (typeof options.value === 'undefined' || options.value) {
     props.defaultValue = metadata.initialValue;
@@ -195,7 +191,7 @@ function getTextareaProps(metadata) {
  */
 function getCollectionProps(metadata, options) {
   return options.options.map(value => {
-    var _metadata$key, _metadata$constraint12;
+    var _metadata$key;
     return simplify(_objectSpread2(_objectSpread2({}, getFormControlProps(metadata, options)), {}, {
       key: "".concat((_metadata$key = metadata.key) !== null && _metadata$key !== void 0 ? _metadata$key : '').concat(value),
       id: "".concat(metadata.id, "-").concat(value),
@@ -205,7 +201,7 @@ function getCollectionProps(metadata, options) {
       // The required attribute doesn't make sense for checkbox group
       // As it would require all checkboxes to be checked instead of at least one
       // It is overriden with `undefiend` so it could be cleaned up properly
-      required: options.type === 'checkbox' ? undefined : (_metadata$constraint12 = metadata.constraint) === null || _metadata$constraint12 === void 0 ? void 0 : _metadata$constraint12.required
+      required: options.type === 'checkbox' ? undefined : metadata.required
     }));
   });
 }

package/integrations.d.ts

@@ -1,17 +1,19 @@
-import { type FieldElement } from '@conform-to/dom';
 import { type Key } from 'react';
-export type InputControl = {
-    value: string | undefined;
-    change: (value: string) => void;
+export type InputControl<Value> = {
+    value: Value | undefined;
+    change: (value: Value) => void;
     focus: () => void;
     blur: () => void;
 };
-export declare function getFieldElement(formId: string, name: string, match?: (element: FieldElement) => boolean): FieldElement | null;
-export declare function getEventTarget(formId: string, name: string): FieldElement;
-export type InputControlOptions = {
+export declare function getFormElement(formId: string): HTMLFormElement;
+export declare function getFieldElements(form: HTMLFormElement, name: string): Array<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>;
+export declare function getEventTarget(form: HTMLFormElement, name: string): HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | null;
+export declare function createDummySelect(form: HTMLFormElement, name: string, value?: string | string[] | undefined): HTMLSelectElement;
+export declare function isDummySelect(element: HTMLElement): element is HTMLSelectElement;
+export declare function updateFieldValue(element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, value: string | string[]): void;
+export declare function useInputControl<Value>(metaOrOptions: {
     key?: Key | null | undefined;
     name: string;
     formId: string;
-    initialValue?: string | undefined;
-};
-export declare function useInputControl(metaOrOptions: InputControlOptions): InputControl;
+    initialValue?: Value | undefined;
+}): InputControl<Value extends string ? string : string | string[]>;

package/integrations.js

@@ -3,52 +3,141 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
-var dom = require('@conform-to/dom');
 var react = require('react');
 
-function getFieldElement(formId, name) {
-  var _document$forms$named;
-  var match = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : () => true;
-  var element = (_document$forms$named = document.forms.namedItem(formId)) === null || _document$forms$named === void 0 ? void 0 : _document$forms$named.elements.namedItem(name);
-  if (element) {
-    var items = element instanceof Element ? [element] : Array.from(element.values());
-    for (var item of items) {
-      if (dom.isFieldElement(item) && match(item)) {
-        return item;
-      }
-    }
+function getFormElement(formId) {
+  var element = document.forms.namedItem(formId);
+  if (!element) {
+    throw new Error('Form not found');
+  }
+  return element;
+}
+function getFieldElements(form, name) {
+  var field = form.elements.namedItem(name);
+  var elements = !field ? [] : field instanceof Element ? [field] : Array.from(field.values());
+  return elements.filter(element => element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement);
+}
+function getEventTarget(form, name) {
+  var _elements$;
+  var elements = getFieldElements(form, name);
+  return (_elements$ = elements[0]) !== null && _elements$ !== void 0 ? _elements$ : null;
+}
+function createDummySelect(form, name, value) {
+  var select = document.createElement('select');
+  var options = typeof value === 'string' ? [value] : value !== null && value !== void 0 ? value : [];
+  select.name = name;
+  select.multiple = true;
+  select.dataset.conform = 'true';
+
+  // To make sure the input is hidden but still focusable
+  select.setAttribute('aria-hidden', 'true');
+  select.tabIndex = -1;
+  select.style.position = 'absolute';
+  select.style.width = '1px';
+  select.style.height = '1px';
+  select.style.padding = '0';
+  select.style.margin = '-1px';
+  select.style.overflow = 'hidden';
+  select.style.clip = 'rect(0,0,0,0)';
+  select.style.whiteSpace = 'nowrap';
+  select.style.border = '0';
+  for (var option of options) {
+    select.options.add(new Option(option, option, true, true));
   }
-  return null;
+  form.appendChild(select);
+  return select;
 }
-function getEventTarget(formId, name) {
-  var element = getFieldElement(formId, name);
-  if (element) {
-    return element;
+function isDummySelect(element) {
+  return element.dataset.conform === 'true';
+}
+function updateFieldValue(element, value) {
+  if (element instanceof HTMLInputElement && (element.type === 'checkbox' || element.type === 'radio')) {
+    element.checked = element.value === value;
+  } else if (element instanceof HTMLSelectElement && element.multiple) {
+    var selectedValue = Array.isArray(value) ? [...value] : [value];
+    for (var option of element.options) {
+      var index = selectedValue.indexOf(option.value);
+      var selected = index > -1;
+
+      // Update the selected state of the option
+      option.selected = selected;
+      // Remove the option from the selected array
+      if (selected) {
+        selectedValue.splice(index, 1);
+      }
+    }
+
+    // Add the remaining options to the select element only if it's a dummy element managed by conform
+    if (isDummySelect(element)) {
+      for (var _option of selectedValue) {
+        element.options.add(new Option(_option, _option, false, true));
+      }
+    }
+  } else if (element.value !== value) {
+    // No `change` event will be triggered on React if `element.value` is already updated
+
+    /**
+     * 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
+     */
+    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');
+      }
+    }
   }
-  var form = document.forms.namedItem(formId);
-  var input = document.createElement('input');
-  input.type = 'hidden';
-  input.name = name;
-  form === null || form === void 0 || form.appendChild(input);
-  return input;
 }
 function useInputControl(metaOrOptions) {
+  // If the initialValue is an array, it must be a string array without undefined values
+  // as there is no way to skip an entry in a multiple select when they all share the same name
+  var inputInitialValue = metaOrOptions.initialValue;
   var eventDispatched = react.useRef({
     change: false,
     focus: false,
     blur: false
   });
   var [key, setKey] = react.useState(metaOrOptions.key);
-  var [value, setValue] = react.useState(() => metaOrOptions.initialValue);
+  var [initialValue, setInitialValue] = react.useState(inputInitialValue);
+  var [value, setValue] = react.useState(inputInitialValue);
   if (key !== metaOrOptions.key) {
-    setValue(metaOrOptions.initialValue);
+    setValue(inputInitialValue);
+    setInitialValue(inputInitialValue);
     setKey(metaOrOptions.key);
   }
+  react.useEffect(() => {
+    var form = getFormElement(metaOrOptions.formId);
+    if (getEventTarget(form, metaOrOptions.name)) {
+      return;
+    }
+    createDummySelect(form, metaOrOptions.name, initialValue);
+    return () => {
+      var elements = getFieldElements(form, metaOrOptions.name);
+      for (var element of elements) {
+        if (isDummySelect(element)) {
+          element.remove();
+        }
+      }
+    };
+  }, [metaOrOptions.formId, metaOrOptions.name, initialValue]);
   react.useEffect(() => {
     var createEventListener = listener => {
       return event => {
-        var element = getFieldElement(metaOrOptions.formId, metaOrOptions.name, element => element === event.target);
-        if (element) {
+        var _element$form;
+        var element = event.target;
+        if ((element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement) && element.name === metaOrOptions.name && ((_element$form = element.form) === null || _element$form === void 0 ? void 0 : _element$form.id) === metaOrOptions.formId) {
           eventDispatched.current[listener] = true;
         }
       };
@@ -69,68 +158,50 @@ function useInputControl(metaOrOptions) {
     return {
       change(value) {
         if (!eventDispatched.current.change) {
-          var _element = getEventTarget(metaOrOptions.formId, metaOrOptions.name);
           eventDispatched.current.change = true;
-          if (_element instanceof HTMLInputElement && (_element.type === 'checkbox' || _element.type === 'radio')) {
-            _element.checked = _element.value === value;
-          } else if (_element.value !== value) {
-            // No change event will be triggered on React if `element.value` is already updated
+          var form = getFormElement(metaOrOptions.formId);
+          var element = getEventTarget(form, metaOrOptions.name);
+          if (element) {
+            updateFieldValue(element, value);
 
-            /**
-             * 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
-             */
-            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');
-              }
-            }
+            // Dispatch input event with the updated input value
+            element.dispatchEvent(new InputEvent('input', {
+              bubbles: true
+            }));
+            // Dispatch change event (necessary for select to update the selected option)
+            element.dispatchEvent(new Event('change', {
+              bubbles: true
+            }));
           }
-
-          // Dispatch input event with the updated input value
-          _element.dispatchEvent(new InputEvent('input', {
-            bubbles: true
-          }));
-          // Dispatch change event (necessary for select to update the selected option)
-          _element.dispatchEvent(new Event('change', {
-            bubbles: true
-          }));
         }
         setValue(value);
         eventDispatched.current.change = false;
       },
       focus() {
         if (!eventDispatched.current.focus) {
-          var _element2 = getEventTarget(metaOrOptions.formId, metaOrOptions.name);
           eventDispatched.current.focus = true;
-          _element2.dispatchEvent(new FocusEvent('focusin', {
-            bubbles: true
-          }));
-          _element2.dispatchEvent(new FocusEvent('focus'));
+          var form = getFormElement(metaOrOptions.formId);
+          var element = getEventTarget(form, metaOrOptions.name);
+          if (element) {
+            element.dispatchEvent(new FocusEvent('focusin', {
+              bubbles: true
+            }));
+            element.dispatchEvent(new FocusEvent('focus'));
+          }
         }
         eventDispatched.current.focus = false;
       },
       blur() {
         if (!eventDispatched.current.blur) {
-          var _element3 = getEventTarget(metaOrOptions.formId, metaOrOptions.name);
           eventDispatched.current.blur = true;
-          _element3.dispatchEvent(new FocusEvent('focusout', {
-            bubbles: true
-          }));
-          _element3.dispatchEvent(new FocusEvent('blur'));
+          var form = getFormElement(metaOrOptions.formId);
+          var element = getEventTarget(form, metaOrOptions.name);
+          if (element) {
+            element.dispatchEvent(new FocusEvent('focusout', {
+              bubbles: true
+            }));
+            element.dispatchEvent(new FocusEvent('blur'));
+          }
         }
         eventDispatched.current.blur = false;
       }
@@ -141,6 +212,10 @@ function useInputControl(metaOrOptions) {
   });
 }
 
+exports.createDummySelect = createDummySelect;
 exports.getEventTarget = getEventTarget;
-exports.getFieldElement = getFieldElement;
+exports.getFieldElements = getFieldElements;
+exports.getFormElement = getFormElement;
+exports.isDummySelect = isDummySelect;
+exports.updateFieldValue = updateFieldValue;
 exports.useInputControl = useInputControl;

package/integrations.mjs

@@ -1,50 +1,139 @@
 import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
-import { isFieldElement } from '@conform-to/dom';
 import { useRef, useState, useEffect, useMemo } from 'react';
 
-function getFieldElement(formId, name) {
-  var _document$forms$named;
-  var match = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : () => true;
-  var element = (_document$forms$named = document.forms.namedItem(formId)) === null || _document$forms$named === void 0 ? void 0 : _document$forms$named.elements.namedItem(name);
-  if (element) {
-    var items = element instanceof Element ? [element] : Array.from(element.values());
-    for (var item of items) {
-      if (isFieldElement(item) && match(item)) {
-        return item;
-      }
-    }
+function getFormElement(formId) {
+  var element = document.forms.namedItem(formId);
+  if (!element) {
+    throw new Error('Form not found');
+  }
+  return element;
+}
+function getFieldElements(form, name) {
+  var field = form.elements.namedItem(name);
+  var elements = !field ? [] : field instanceof Element ? [field] : Array.from(field.values());
+  return elements.filter(element => element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement);
+}
+function getEventTarget(form, name) {
+  var _elements$;
+  var elements = getFieldElements(form, name);
+  return (_elements$ = elements[0]) !== null && _elements$ !== void 0 ? _elements$ : null;
+}
+function createDummySelect(form, name, value) {
+  var select = document.createElement('select');
+  var options = typeof value === 'string' ? [value] : value !== null && value !== void 0 ? value : [];
+  select.name = name;
+  select.multiple = true;
+  select.dataset.conform = 'true';
+
+  // To make sure the input is hidden but still focusable
+  select.setAttribute('aria-hidden', 'true');
+  select.tabIndex = -1;
+  select.style.position = 'absolute';
+  select.style.width = '1px';
+  select.style.height = '1px';
+  select.style.padding = '0';
+  select.style.margin = '-1px';
+  select.style.overflow = 'hidden';
+  select.style.clip = 'rect(0,0,0,0)';
+  select.style.whiteSpace = 'nowrap';
+  select.style.border = '0';
+  for (var option of options) {
+    select.options.add(new Option(option, option, true, true));
   }
-  return null;
+  form.appendChild(select);
+  return select;
 }
-function getEventTarget(formId, name) {
-  var element = getFieldElement(formId, name);
-  if (element) {
-    return element;
+function isDummySelect(element) {
+  return element.dataset.conform === 'true';
+}
+function updateFieldValue(element, value) {
+  if (element instanceof HTMLInputElement && (element.type === 'checkbox' || element.type === 'radio')) {
+    element.checked = element.value === value;
+  } else if (element instanceof HTMLSelectElement && element.multiple) {
+    var selectedValue = Array.isArray(value) ? [...value] : [value];
+    for (var option of element.options) {
+      var index = selectedValue.indexOf(option.value);
+      var selected = index > -1;
+
+      // Update the selected state of the option
+      option.selected = selected;
+      // Remove the option from the selected array
+      if (selected) {
+        selectedValue.splice(index, 1);
+      }
+    }
+
+    // Add the remaining options to the select element only if it's a dummy element managed by conform
+    if (isDummySelect(element)) {
+      for (var _option of selectedValue) {
+        element.options.add(new Option(_option, _option, false, true));
+      }
+    }
+  } else if (element.value !== value) {
+    // No `change` event will be triggered on React if `element.value` is already updated
+
+    /**
+     * 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
+     */
+    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');
+      }
+    }
   }
-  var form = document.forms.namedItem(formId);
-  var input = document.createElement('input');
-  input.type = 'hidden';
-  input.name = name;
-  form === null || form === void 0 || form.appendChild(input);
-  return input;
 }
 function useInputControl(metaOrOptions) {
+  // If the initialValue is an array, it must be a string array without undefined values
+  // as there is no way to skip an entry in a multiple select when they all share the same name
+  var inputInitialValue = metaOrOptions.initialValue;
   var eventDispatched = useRef({
     change: false,
     focus: false,
     blur: false
   });
   var [key, setKey] = useState(metaOrOptions.key);
-  var [value, setValue] = useState(() => metaOrOptions.initialValue);
+  var [initialValue, setInitialValue] = useState(inputInitialValue);
+  var [value, setValue] = useState(inputInitialValue);
   if (key !== metaOrOptions.key) {
-    setValue(metaOrOptions.initialValue);
+    setValue(inputInitialValue);
+    setInitialValue(inputInitialValue);
     setKey(metaOrOptions.key);
   }
+  useEffect(() => {
+    var form = getFormElement(metaOrOptions.formId);
+    if (getEventTarget(form, metaOrOptions.name)) {
+      return;
+    }
+    createDummySelect(form, metaOrOptions.name, initialValue);
+    return () => {
+      var elements = getFieldElements(form, metaOrOptions.name);
+      for (var element of elements) {
+        if (isDummySelect(element)) {
+          element.remove();
+        }
+      }
+    };
+  }, [metaOrOptions.formId, metaOrOptions.name, initialValue]);
   useEffect(() => {
     var createEventListener = listener => {
       return event => {
-        var element = getFieldElement(metaOrOptions.formId, metaOrOptions.name, element => element === event.target);
-        if (element) {
+        var _element$form;
+        var element = event.target;
+        if ((element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement) && element.name === metaOrOptions.name && ((_element$form = element.form) === null || _element$form === void 0 ? void 0 : _element$form.id) === metaOrOptions.formId) {
           eventDispatched.current[listener] = true;
         }
       };
@@ -65,68 +154,50 @@ function useInputControl(metaOrOptions) {
     return {
       change(value) {
         if (!eventDispatched.current.change) {
-          var _element = getEventTarget(metaOrOptions.formId, metaOrOptions.name);
           eventDispatched.current.change = true;
-          if (_element instanceof HTMLInputElement && (_element.type === 'checkbox' || _element.type === 'radio')) {
-            _element.checked = _element.value === value;
-          } else if (_element.value !== value) {
-            // No change event will be triggered on React if `element.value` is already updated
+          var form = getFormElement(metaOrOptions.formId);
+          var element = getEventTarget(form, metaOrOptions.name);
+          if (element) {
+            updateFieldValue(element, value);
 
-            /**
-             * 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
-             */
-            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');
-              }
-            }
+            // Dispatch input event with the updated input value
+            element.dispatchEvent(new InputEvent('input', {
+              bubbles: true
+            }));
+            // Dispatch change event (necessary for select to update the selected option)
+            element.dispatchEvent(new Event('change', {
+              bubbles: true
+            }));
           }
-
-          // Dispatch input event with the updated input value
-          _element.dispatchEvent(new InputEvent('input', {
-            bubbles: true
-          }));
-          // Dispatch change event (necessary for select to update the selected option)
-          _element.dispatchEvent(new Event('change', {
-            bubbles: true
-          }));
         }
         setValue(value);
         eventDispatched.current.change = false;
       },
       focus() {
         if (!eventDispatched.current.focus) {
-          var _element2 = getEventTarget(metaOrOptions.formId, metaOrOptions.name);
           eventDispatched.current.focus = true;
-          _element2.dispatchEvent(new FocusEvent('focusin', {
-            bubbles: true
-          }));
-          _element2.dispatchEvent(new FocusEvent('focus'));
+          var form = getFormElement(metaOrOptions.formId);
+          var element = getEventTarget(form, metaOrOptions.name);
+          if (element) {
+            element.dispatchEvent(new FocusEvent('focusin', {
+              bubbles: true
+            }));
+            element.dispatchEvent(new FocusEvent('focus'));
+          }
         }
         eventDispatched.current.focus = false;
       },
       blur() {
         if (!eventDispatched.current.blur) {
-          var _element3 = getEventTarget(metaOrOptions.formId, metaOrOptions.name);
           eventDispatched.current.blur = true;
-          _element3.dispatchEvent(new FocusEvent('focusout', {
-            bubbles: true
-          }));
-          _element3.dispatchEvent(new FocusEvent('blur'));
+          var form = getFormElement(metaOrOptions.formId);
+          var element = getEventTarget(form, metaOrOptions.name);
+          if (element) {
+            element.dispatchEvent(new FocusEvent('focusout', {
+              bubbles: true
+            }));
+            element.dispatchEvent(new FocusEvent('blur'));
+          }
         }
         eventDispatched.current.blur = false;
       }
@@ -137,4 +208,4 @@ function useInputControl(metaOrOptions) {
   });
 }
 
-export { getEventTarget, getFieldElement, useInputControl };
+export { createDummySelect, getEventTarget, getFieldElements, getFormElement, isDummySelect, updateFieldValue, useInputControl };

package/package.json

@@ -3,7 +3,7 @@
 	"description": "Conform view adapter for react",
 	"homepage": "https://conform.guide",
 	"license": "MIT",
-	"version": "1.0.0-rc.1",
+	"version": "1.0.1",
 	"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": "1.0.0-rc.1"
+		"@conform-to/dom": "1.0.1"
 	},
 	"devDependencies": {
 		"@types/react": "^18.2.43",