@conform-to/react 1.0.0 → 1.0.2

package/README

@@ -8,25 +8,30 @@
  ╚══════╝  ╚═════╝  ╚═╝  ╚══╝ ╚═╝        ╚═════╝  ╚═╝   ╚═╝ ╚═╝   ╚═╝
 
 
-Version 1.0.0-rc.1 / License MIT / Copyright (c) 2024 Edmund Hung
+Version 1.0.2 / 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

@@ -1,9 +1,9 @@
-import { type Constraint, type FormId, type FieldName, type FormContext as BaseFormContext, type FormValue, type FormState, type Intent, type SubscriptionScope, type SubscriptionSubject, type UnionKeyof, type UnionKeyType, type FormOptions as BaseFormOptions } from '@conform-to/dom';
+import { type Constraint, type Combine, type FormId, type FieldName, type FormContext as BaseFormContext, type FormValue, type FormState, type Intent, type SubscriptionScope, type SubscriptionSubject, type FormOptions as BaseFormOptions } from '@conform-to/dom';
 import { type FormEvent, type ReactElement, type ReactNode, type MutableRefObject } from 'react';
 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;
@@ -21,19 +21,22 @@ export type FormMetadata<Schema extends Record<string, unknown> = Record<string,
     id: FormId<Schema, FormError>;
     context: Wrapped<FormContext<Schema, FormError>>;
     status?: 'success' | 'error';
-    getFieldset: () => {
-        [Key in UnionKeyof<Schema>]: FieldMetadata<UnionKeyType<Schema, Key>, Schema, FormError>;
-    };
+    getFieldset: () => Required<{
+        [Key in keyof Combine<Schema>]: FieldMetadata<Combine<Schema>[Key], Schema, FormError>;
+    }>;
     onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
     noValidate: boolean;
 };
+type SubfieldMetadata<Schema, FormSchema extends Record<string, any>, FormError, CombinedSchema = Combine<Schema>> = Exclude<Schema, undefined> extends Array<infer Item> ? {
+    getFieldList: () => Array<FieldMetadata<Item, FormSchema, FormError>>;
+} : Exclude<Schema, undefined> extends Record<string, unknown> ? {
+    getFieldset: () => Required<{
+        [Key in keyof CombinedSchema]: FieldMetadata<CombinedSchema[Key], 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>;
-    getFieldset: unknown extends Schema ? () => unknown : Schema extends Primitive | Array<any> ? never : () => {
-        [Key in UnionKeyof<Schema>]: FieldMetadata<UnionKeyType<Schema, Key>, FormSchema, FormError>;
-    };
-    getFieldList: unknown extends Schema ? () => unknown : Schema extends Array<infer Item> ? () => Array<FieldMetadata<Item, FormSchema, FormError>> : never;
-};
+} & SubfieldMetadata<Schema, FormSchema, FormError>;
 export declare const Form: import("react").Context<FormContext<any, string[], any>[]>;
 declare const wrappedSymbol: unique symbol;
 export type Wrapped<Type> = {

package/helpers.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { FormMetadata, FieldMetadata, Metadata, Pretty, Primitive } from './context';
+import type { FormMetadata, FieldMetadata, Metadata, Pretty } from './context';
 type FormControlProps = {
     key: string | undefined;
     id: string;
@@ -138,7 +138,7 @@ export declare function getFormControlProps<Schema>(metadata: FieldMetadata<Sche
  * <input {...getInputProps(metadata, { type: 'radio', value: false })} />
  * ```
  */
-export declare function getInputProps<Schema extends Primitive | File[]>(metadata: FieldMetadata<Schema, any, any>, options: InputOptions): InputProps;
+export declare function getInputProps<Schema>(metadata: FieldMetadata<Schema, any, any>, options: InputOptions): InputProps;
 /**
  * Derives the properties of a select element based on the field metadata,
  * including common form control attributes like `key`, `id`, `name`, `form`, `autoFocus`, `aria-invalid`, `aria-describedby`
@@ -154,7 +154,7 @@ export declare function getInputProps<Schema extends Primitive | File[]>(metadat
  * <select {...getSelectProps(metadata, { value: false })} />
  * ```
  */
-export declare function getSelectProps<Schema extends Exclude<Primitive, File> | Array<Exclude<Primitive, File>> | undefined>(metadata: FieldMetadata<Schema, any, any>, options?: SelectOptions): SelectProps;
+export declare function getSelectProps<Schema>(metadata: FieldMetadata<Schema, any, any>, options?: SelectOptions): SelectProps;
 /**
  * Derives the properties of a textarea element based on the field metadata,
  * including common form control attributes like `key`, `id`, `name`, `form`, `autoFocus`, `aria-invalid`, `aria-describedby`
@@ -170,7 +170,7 @@ export declare function getSelectProps<Schema extends Exclude<Primitive, File> |
  * <textarea {...getTextareaProps(metadata, { value: false })} />
  * ```
  */
-export declare function getTextareaProps<Schema extends Exclude<Primitive, File> | undefined>(metadata: FieldMetadata<Schema, any, any>, options?: TextareaOptions): TextareaProps;
+export declare function getTextareaProps<Schema>(metadata: FieldMetadata<Schema, any, any>, options?: TextareaOptions): TextareaProps;
 /**
  * Derives the properties of a collection of checkboxes or radio buttons based on the field metadata,
  * including common form control attributes like `key`, `id`, `name`, `form`, `autoFocus`, `aria-invalid`, `aria-describedby` and `required`.

package/helpers.js

@@ -141,7 +141,8 @@ function getSelectProps(metadata) {
     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;
+    var _metadata$initialValu;
+    props.defaultValue = Array.isArray(metadata.initialValue) ? metadata.initialValue.map(item => "".concat(item !== null && item !== void 0 ? item : '')) : (_metadata$initialValu = metadata.initialValue) === null || _metadata$initialValu === void 0 ? void 0 : _metadata$initialValu.toString();
   }
   return simplify(props);
 }
@@ -168,7 +169,8 @@ function getTextareaProps(metadata) {
     maxLength: metadata.maxLength
   });
   if (typeof options.value === 'undefined' || options.value) {
-    props.defaultValue = metadata.initialValue;
+    var _metadata$initialValu2;
+    props.defaultValue = (_metadata$initialValu2 = metadata.initialValue) === null || _metadata$initialValu2 === void 0 ? void 0 : _metadata$initialValu2.toString();
   }
   return simplify(props);
 }

package/helpers.mjs

@@ -137,7 +137,8 @@ function getSelectProps(metadata) {
     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;
+    var _metadata$initialValu;
+    props.defaultValue = Array.isArray(metadata.initialValue) ? metadata.initialValue.map(item => "".concat(item !== null && item !== void 0 ? item : '')) : (_metadata$initialValu = metadata.initialValue) === null || _metadata$initialValu === void 0 ? void 0 : _metadata$initialValu.toString();
   }
   return simplify(props);
 }
@@ -164,7 +165,8 @@ function getTextareaProps(metadata) {
     maxLength: metadata.maxLength
   });
   if (typeof options.value === 'undefined' || options.value) {
-    props.defaultValue = metadata.initialValue;
+    var _metadata$initialValu2;
+    props.defaultValue = (_metadata$initialValu2 = metadata.initialValue) === null || _metadata$initialValu2 === void 0 ? void 0 : _metadata$initialValu2.toString();
   }
   return simplify(props);
 }

package/index.d.ts

@@ -1,5 +1,5 @@
 export { type Submission, type SubmissionResult, type DefaultValue, type Intent, type FormId, type FieldName, parse, } from '@conform-to/dom';
 export { type FieldMetadata, type FormMetadata, FormProvider, FormStateInput, } from './context';
 export { useForm, useFormMetadata, useField } from './hooks';
-export { useInputControl } from './integrations';
+export { Control as unstable_Control, useControl as unstable_useControl, useInputControl, } from './integrations';
 export { getFormProps, getFieldsetProps, getInputProps, getSelectProps, getTextareaProps, getCollectionProps, } from './helpers';

package/index.js

@@ -19,6 +19,8 @@ exports.FormStateInput = context.FormStateInput;
 exports.useField = hooks.useField;
 exports.useForm = hooks.useForm;
 exports.useFormMetadata = hooks.useFormMetadata;
+exports.unstable_Control = integrations.Control;
+exports.unstable_useControl = integrations.useControl;
 exports.useInputControl = integrations.useInputControl;
 exports.getCollectionProps = helpers.getCollectionProps;
 exports.getFieldsetProps = helpers.getFieldsetProps;

package/index.mjs

@@ -1,5 +1,5 @@
 export { parse } from '@conform-to/dom';
 export { FormProvider, FormStateInput } from './context.mjs';
 export { useField, useForm, useFormMetadata } from './hooks.mjs';
-export { useInputControl } from './integrations.mjs';
+export { Control as unstable_Control, useControl as unstable_useControl, useInputControl } from './integrations.mjs';
 export { getCollectionProps, getFieldsetProps, getFormProps, getInputProps, getSelectProps, getTextareaProps } from './helpers.mjs';

package/integrations.d.ts

@@ -1,17 +1,45 @@
-import { type FieldElement } from '@conform-to/dom';
-import { type Key } from 'react';
-export type InputControl = {
-    value: string | undefined;
-    change: (value: string) => void;
+import { type Key, type RefCallback } from 'react';
+export declare function getFormElement(formId: string): HTMLFormElement | null;
+export declare function getFieldElements(form: HTMLFormElement | null, name: string): Array<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>;
+export declare function getEventTarget(form: HTMLFormElement | null, name: string, value?: string | 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 useInputEvent(): {
+    change(value: string | string[]): void;
+    focus(): void;
+    blur(): void;
+    register: RefCallback<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | undefined>;
+};
+export declare function useInputValue<Value extends string | string[] | Array<string | undefined>>(options: {
+    key?: Key | null | undefined;
+    initialValue?: Value | undefined;
+}): readonly [(Value extends string ? Value : string | string[]) | undefined, import("react").Dispatch<import("react").SetStateAction<(Value extends string ? Value : string | string[]) | undefined>>];
+export declare function useControl<Value extends string | string[] | Array<string | undefined>>(meta: {
+    key?: Key | null | undefined;
+    initialValue?: Value | undefined;
+}): {
+    register: RefCallback<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | undefined>;
+    value: (Value extends string ? Value : string | string[]) | undefined;
+    change: (value: Value extends string ? Value : string | string[]) => 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 useInputControl<Value extends string | string[] | Array<string | undefined>>(meta: {
     key?: Key | null | undefined;
     name: string;
     formId: string;
-    initialValue?: string | undefined;
+    initialValue?: Value | undefined;
+}): {
+    value: (Value extends string ? Value : string | string[]) | undefined;
+    change: import("react").Dispatch<import("react").SetStateAction<(Value extends string ? Value : string | string[]) | undefined>>;
+    focus: () => void;
+    blur: () => void;
 };
-export declare function useInputControl(metaOrOptions: InputControlOptions): InputControl;
+export declare function Control<Value extends string | string[] | Array<string | undefined>>(props: {
+    meta: {
+        key?: Key | null | undefined;
+        initialValue?: Value | undefined;
+    };
+    render: (control: ReturnType<typeof useControl<Value>>) => React.ReactNode;
+}): import("react").ReactNode;

package/integrations.js

@@ -2,53 +2,120 @@
 
 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) {
+  return document.forms.namedItem(formId);
+}
+function getFieldElements(form, name) {
+  var field = form === null || form === void 0 ? void 0 : 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, value) {
+  var _elements$;
+  var elements = getFieldElements(form, name);
+  if (elements.length > 1) {
+    var options = typeof value === 'string' ? [value] : value;
+    for (var element of elements) {
+      if (typeof options !== 'undefined' && element instanceof HTMLInputElement && element.type === 'checkbox' && (element.checked ? options.includes(element.value) : !options.includes(element.value))) {
+        continue;
       }
+      return element;
     }
   }
-  return null;
+  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));
+  }
+  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 = Array.isArray(value) ? value.includes(element.value) : 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) {
+function useInputEvent() {
+  var ref = react.useRef(null);
   var eventDispatched = react.useRef({
     change: false,
     focus: false,
     blur: false
   });
-  var [key, setKey] = react.useState(metaOrOptions.key);
-  var [value, setValue] = react.useState(() => metaOrOptions.initialValue);
-  if (key !== metaOrOptions.key) {
-    setValue(metaOrOptions.initialValue);
-    setKey(metaOrOptions.key);
-  }
   react.useEffect(() => {
     var createEventListener = listener => {
       return event => {
-        var element = getFieldElement(metaOrOptions.formId, metaOrOptions.name, element => element === event.target);
-        if (element) {
+        var element = ref.current;
+        if (element && event.target === element) {
           eventDispatched.current[listener] = true;
         }
       };
@@ -64,83 +131,155 @@ function useInputControl(metaOrOptions) {
       document.removeEventListener('focusin', focusHandler, true);
       document.removeEventListener('focusout', blurHandler, true);
     };
-  }, [metaOrOptions.formId, metaOrOptions.name]);
-  var handlers = react.useMemo(() => {
+  }, [ref]);
+  return react.useMemo(() => {
     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 element = ref.current;
+          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 element = ref.current;
+          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 element = ref.current;
+          if (element) {
+            element.dispatchEvent(new FocusEvent('focusout', {
+              bubbles: true
+            }));
+            element.dispatchEvent(new FocusEvent('blur'));
+          }
         }
         eventDispatched.current.blur = false;
+      },
+      register(element) {
+        ref.current = element;
       }
     };
-  }, [metaOrOptions.formId, metaOrOptions.name]);
-  return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, handlers), {}, {
-    value
-  });
+  }, []);
+}
+function useInputValue(options) {
+  var initializeValue = () => {
+    var _options$initialValue;
+    if (typeof options.initialValue === 'string') {
+      // @ts-expect-error FIXME: To ensure that the type of value is also `string | undefined` if initialValue is not an array
+      return options.initialValue;
+    }
+
+    // @ts-expect-error Same as above
+    return (_options$initialValue = options.initialValue) === null || _options$initialValue === void 0 ? void 0 : _options$initialValue.map(value => value !== null && value !== void 0 ? value : '');
+  };
+  var [key, setKey] = react.useState(options.key);
+  var [value, setValue] = react.useState(initializeValue);
+  if (key !== options.key) {
+    setValue(initializeValue);
+    setKey(options.key);
+  }
+  return [value, setValue];
+}
+function useControl(meta) {
+  var [value, setValue] = useInputValue(meta);
+  var {
+    register,
+    change,
+    focus,
+    blur
+  } = useInputEvent();
+  var handleChange = value => {
+    setValue(value);
+    change(value);
+  };
+  return {
+    register,
+    value,
+    change: handleChange,
+    focus,
+    blur
+  };
+}
+function useInputControl(meta) {
+  var [value, setValue] = useInputValue(meta);
+  var initializedRef = react.useRef(false);
+  var {
+    register,
+    change,
+    focus,
+    blur
+  } = useInputEvent();
+  react.useEffect(() => {
+    var form = getFormElement(meta.formId);
+    if (!form) {
+      // eslint-disable-next-line no-console
+      console.warn("useInputControl is unable to find form#".concat(meta.formId, " and identify if a dummy input is required"));
+      return;
+    }
+    var element = getEventTarget(form, meta.name);
+    if (!element && typeof value !== 'undefined' && (!Array.isArray(value) || value.length > 0)) {
+      element = createDummySelect(form, meta.name, value);
+    }
+    register(element);
+    if (!initializedRef.current) {
+      initializedRef.current = true;
+    } else {
+      change(value !== null && value !== void 0 ? value : '');
+    }
+    return () => {
+      register(null);
+      var elements = getFieldElements(form, meta.name);
+      for (var _element of elements) {
+        if (isDummySelect(_element)) {
+          _element.remove();
+        }
+      }
+    };
+  }, [meta.formId, meta.name, value, change, register]);
+  return {
+    value,
+    change: setValue,
+    focus,
+    blur
+  };
+}
+function Control(props) {
+  var control = useControl(props.meta);
+  return props.render(control);
 }
 
+exports.Control = Control;
+exports.createDummySelect = createDummySelect;
 exports.getEventTarget = getEventTarget;
-exports.getFieldElement = getFieldElement;
+exports.getFieldElements = getFieldElements;
+exports.getFormElement = getFormElement;
+exports.isDummySelect = isDummySelect;
+exports.updateFieldValue = updateFieldValue;
+exports.useControl = useControl;
 exports.useInputControl = useInputControl;
+exports.useInputEvent = useInputEvent;
+exports.useInputValue = useInputValue;

package/integrations.mjs

@@ -1,50 +1,117 @@
-import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
-import { isFieldElement } from '@conform-to/dom';
-import { useRef, useState, useEffect, useMemo } from 'react';
+import { useRef, useEffect, useMemo, useState } 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) {
+  return document.forms.namedItem(formId);
+}
+function getFieldElements(form, name) {
+  var field = form === null || form === void 0 ? void 0 : 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, value) {
+  var _elements$;
+  var elements = getFieldElements(form, name);
+  if (elements.length > 1) {
+    var options = typeof value === 'string' ? [value] : value;
+    for (var element of elements) {
+      if (typeof options !== 'undefined' && element instanceof HTMLInputElement && element.type === 'checkbox' && (element.checked ? options.includes(element.value) : !options.includes(element.value))) {
+        continue;
       }
+      return element;
     }
   }
-  return null;
+  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));
+  }
+  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 = Array.isArray(value) ? value.includes(element.value) : 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) {
+function useInputEvent() {
+  var ref = useRef(null);
   var eventDispatched = useRef({
     change: false,
     focus: false,
     blur: false
   });
-  var [key, setKey] = useState(metaOrOptions.key);
-  var [value, setValue] = useState(() => metaOrOptions.initialValue);
-  if (key !== metaOrOptions.key) {
-    setValue(metaOrOptions.initialValue);
-    setKey(metaOrOptions.key);
-  }
   useEffect(() => {
     var createEventListener = listener => {
       return event => {
-        var element = getFieldElement(metaOrOptions.formId, metaOrOptions.name, element => element === event.target);
-        if (element) {
+        var element = ref.current;
+        if (element && event.target === element) {
           eventDispatched.current[listener] = true;
         }
       };
@@ -60,81 +127,145 @@ function useInputControl(metaOrOptions) {
       document.removeEventListener('focusin', focusHandler, true);
       document.removeEventListener('focusout', blurHandler, true);
     };
-  }, [metaOrOptions.formId, metaOrOptions.name]);
-  var handlers = useMemo(() => {
+  }, [ref]);
+  return useMemo(() => {
     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 element = ref.current;
+          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 element = ref.current;
+          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 element = ref.current;
+          if (element) {
+            element.dispatchEvent(new FocusEvent('focusout', {
+              bubbles: true
+            }));
+            element.dispatchEvent(new FocusEvent('blur'));
+          }
         }
         eventDispatched.current.blur = false;
+      },
+      register(element) {
+        ref.current = element;
       }
     };
-  }, [metaOrOptions.formId, metaOrOptions.name]);
-  return _objectSpread2(_objectSpread2({}, handlers), {}, {
-    value
-  });
+  }, []);
+}
+function useInputValue(options) {
+  var initializeValue = () => {
+    var _options$initialValue;
+    if (typeof options.initialValue === 'string') {
+      // @ts-expect-error FIXME: To ensure that the type of value is also `string | undefined` if initialValue is not an array
+      return options.initialValue;
+    }
+
+    // @ts-expect-error Same as above
+    return (_options$initialValue = options.initialValue) === null || _options$initialValue === void 0 ? void 0 : _options$initialValue.map(value => value !== null && value !== void 0 ? value : '');
+  };
+  var [key, setKey] = useState(options.key);
+  var [value, setValue] = useState(initializeValue);
+  if (key !== options.key) {
+    setValue(initializeValue);
+    setKey(options.key);
+  }
+  return [value, setValue];
+}
+function useControl(meta) {
+  var [value, setValue] = useInputValue(meta);
+  var {
+    register,
+    change,
+    focus,
+    blur
+  } = useInputEvent();
+  var handleChange = value => {
+    setValue(value);
+    change(value);
+  };
+  return {
+    register,
+    value,
+    change: handleChange,
+    focus,
+    blur
+  };
+}
+function useInputControl(meta) {
+  var [value, setValue] = useInputValue(meta);
+  var initializedRef = useRef(false);
+  var {
+    register,
+    change,
+    focus,
+    blur
+  } = useInputEvent();
+  useEffect(() => {
+    var form = getFormElement(meta.formId);
+    if (!form) {
+      // eslint-disable-next-line no-console
+      console.warn("useInputControl is unable to find form#".concat(meta.formId, " and identify if a dummy input is required"));
+      return;
+    }
+    var element = getEventTarget(form, meta.name);
+    if (!element && typeof value !== 'undefined' && (!Array.isArray(value) || value.length > 0)) {
+      element = createDummySelect(form, meta.name, value);
+    }
+    register(element);
+    if (!initializedRef.current) {
+      initializedRef.current = true;
+    } else {
+      change(value !== null && value !== void 0 ? value : '');
+    }
+    return () => {
+      register(null);
+      var elements = getFieldElements(form, meta.name);
+      for (var _element of elements) {
+        if (isDummySelect(_element)) {
+          _element.remove();
+        }
+      }
+    };
+  }, [meta.formId, meta.name, value, change, register]);
+  return {
+    value,
+    change: setValue,
+    focus,
+    blur
+  };
+}
+function Control(props) {
+  var control = useControl(props.meta);
+  return props.render(control);
 }
 
-export { getEventTarget, getFieldElement, useInputControl };
+export { Control, createDummySelect, getEventTarget, getFieldElements, getFormElement, isDummySelect, updateFieldValue, useControl, useInputControl, useInputEvent, useInputValue };

package/package.json

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