@conform-to/react 1.0.1 → 1.0.2

package/README

@@ -8,7 +8,7 @@
  ╚══════╝  ╚═════╝  ╚═╝  ╚══╝ ╚═╝        ╚═════╝  ╚═╝   ╚═╝ ╚═╝   ╚═╝
 
 
-Version 1.0.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.
 

package/context.d.ts

@@ -1,4 +1,4 @@
-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];
@@ -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,19 +1,45 @@
-import { type Key } from 'react';
-export type InputControl<Value> = {
-    value: Value | undefined;
-    change: (value: Value) => void;
-    focus: () => void;
-    blur: () => void;
-};
-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;
+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 useInputControl<Value>(metaOrOptions: {
+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 useInputControl<Value extends string | string[] | Array<string | undefined>>(meta: {
     key?: Key | null | undefined;
     name: string;
     formId: string;
     initialValue?: Value | undefined;
-}): InputControl<Value extends string ? string : string | string[]>;
+}): {
+    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 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,24 +2,28 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
 var react = require('react');
 
 function getFormElement(formId) {
-  var element = document.forms.namedItem(formId);
-  if (!element) {
-    throw new Error('Form not found');
-  }
-  return element;
+  return document.forms.namedItem(formId);
 }
 function getFieldElements(form, name) {
-  var field = form.elements.namedItem(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) {
+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 (_elements$ = elements[0]) !== null && _elements$ !== void 0 ? _elements$ : null;
 }
 function createDummySelect(form, name, value) {
@@ -52,7 +56,7 @@ function isDummySelect(element) {
 }
 function updateFieldValue(element, value) {
   if (element instanceof HTMLInputElement && (element.type === 'checkbox' || element.type === 'radio')) {
-    element.checked = element.value === value;
+    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) {
@@ -100,44 +104,18 @@ function updateFieldValue(element, value) {
     }
   }
 }
-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;
+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 [initialValue, setInitialValue] = react.useState(inputInitialValue);
-  var [value, setValue] = react.useState(inputInitialValue);
-  if (key !== metaOrOptions.key) {
-    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$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) {
+        var element = ref.current;
+        if (element && event.target === element) {
           eventDispatched.current[listener] = true;
         }
       };
@@ -153,14 +131,13 @@ 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) {
           eventDispatched.current.change = true;
-          var form = getFormElement(metaOrOptions.formId);
-          var element = getEventTarget(form, metaOrOptions.name);
+          var element = ref.current;
           if (element) {
             updateFieldValue(element, value);
 
@@ -174,14 +151,12 @@ function useInputControl(metaOrOptions) {
             }));
           }
         }
-        setValue(value);
         eventDispatched.current.change = false;
       },
       focus() {
         if (!eventDispatched.current.focus) {
           eventDispatched.current.focus = true;
-          var form = getFormElement(metaOrOptions.formId);
-          var element = getEventTarget(form, metaOrOptions.name);
+          var element = ref.current;
           if (element) {
             element.dispatchEvent(new FocusEvent('focusin', {
               bubbles: true
@@ -194,8 +169,7 @@ function useInputControl(metaOrOptions) {
       blur() {
         if (!eventDispatched.current.blur) {
           eventDispatched.current.blur = true;
-          var form = getFormElement(metaOrOptions.formId);
-          var element = getEventTarget(form, metaOrOptions.name);
+          var element = ref.current;
           if (element) {
             element.dispatchEvent(new FocusEvent('focusout', {
               bubbles: true
@@ -204,18 +178,108 @@ function useInputControl(metaOrOptions) {
           }
         }
         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.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,21 +1,25 @@
-import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
-import { useRef, useState, useEffect, useMemo } from 'react';
+import { useRef, useEffect, useMemo, useState } from 'react';
 
 function getFormElement(formId) {
-  var element = document.forms.namedItem(formId);
-  if (!element) {
-    throw new Error('Form not found');
-  }
-  return element;
+  return document.forms.namedItem(formId);
 }
 function getFieldElements(form, name) {
-  var field = form.elements.namedItem(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) {
+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 (_elements$ = elements[0]) !== null && _elements$ !== void 0 ? _elements$ : null;
 }
 function createDummySelect(form, name, value) {
@@ -48,7 +52,7 @@ function isDummySelect(element) {
 }
 function updateFieldValue(element, value) {
   if (element instanceof HTMLInputElement && (element.type === 'checkbox' || element.type === 'radio')) {
-    element.checked = element.value === value;
+    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) {
@@ -96,44 +100,18 @@ function updateFieldValue(element, value) {
     }
   }
 }
-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;
+function useInputEvent() {
+  var ref = useRef(null);
   var eventDispatched = useRef({
     change: false,
     focus: false,
     blur: false
   });
-  var [key, setKey] = useState(metaOrOptions.key);
-  var [initialValue, setInitialValue] = useState(inputInitialValue);
-  var [value, setValue] = useState(inputInitialValue);
-  if (key !== metaOrOptions.key) {
-    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$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) {
+        var element = ref.current;
+        if (element && event.target === element) {
           eventDispatched.current[listener] = true;
         }
       };
@@ -149,14 +127,13 @@ 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) {
           eventDispatched.current.change = true;
-          var form = getFormElement(metaOrOptions.formId);
-          var element = getEventTarget(form, metaOrOptions.name);
+          var element = ref.current;
           if (element) {
             updateFieldValue(element, value);
 
@@ -170,14 +147,12 @@ function useInputControl(metaOrOptions) {
             }));
           }
         }
-        setValue(value);
         eventDispatched.current.change = false;
       },
       focus() {
         if (!eventDispatched.current.focus) {
           eventDispatched.current.focus = true;
-          var form = getFormElement(metaOrOptions.formId);
-          var element = getEventTarget(form, metaOrOptions.name);
+          var element = ref.current;
           if (element) {
             element.dispatchEvent(new FocusEvent('focusin', {
               bubbles: true
@@ -190,8 +165,7 @@ function useInputControl(metaOrOptions) {
       blur() {
         if (!eventDispatched.current.blur) {
           eventDispatched.current.blur = true;
-          var form = getFormElement(metaOrOptions.formId);
-          var element = getEventTarget(form, metaOrOptions.name);
+          var element = ref.current;
           if (element) {
             element.dispatchEvent(new FocusEvent('focusout', {
               bubbles: true
@@ -200,12 +174,98 @@ function useInputControl(metaOrOptions) {
           }
         }
         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 { createDummySelect, getEventTarget, getFieldElements, getFormElement, isDummySelect, updateFieldValue, 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.1",
+	"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.1"
+		"@conform-to/dom": "1.0.2"
 	},
 	"devDependencies": {
 		"@types/react": "^18.2.43",