@conform-to/react 1.0.0-pre.4 → 1.0.0-pre.6

package/README.md

@@ -430,7 +430,7 @@ import { Form } from 'react-router-dom';
 export default function SignupForm() {
     const [form, { email, password, confirmPassword }] = useForm({
         onValidate(context) {
-            // This enables validating each field based on the validity state and custom cosntraint if defined
+            // This enables validating each field based on the validity state and custom constraint if defined
             return validateConstraint(
               ...context,
               constraint: {

package/_virtual/_rollupPluginBabelHelpers.js

@@ -37,6 +37,33 @@ function _defineProperty(obj, key, value) {
   }
   return obj;
 }
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
 function _toPrimitive(input, hint) {
   if (typeof input !== "object" || input === null) return input;
   var prim = input[Symbol.toPrimitive];
@@ -54,5 +81,7 @@ function _toPropertyKey(arg) {
 
 exports.defineProperty = _defineProperty;
 exports.objectSpread2 = _objectSpread2;
+exports.objectWithoutProperties = _objectWithoutProperties;
+exports.objectWithoutPropertiesLoose = _objectWithoutPropertiesLoose;
 exports.toPrimitive = _toPrimitive;
 exports.toPropertyKey = _toPropertyKey;

package/_virtual/_rollupPluginBabelHelpers.mjs

@@ -33,6 +33,33 @@ function _defineProperty(obj, key, value) {
   }
   return obj;
 }
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
 function _toPrimitive(input, hint) {
   if (typeof input !== "object" || input === null) return input;
   var prim = input[Symbol.toPrimitive];
@@ -48,4 +75,4 @@ function _toPropertyKey(arg) {
   return typeof key === "symbol" ? key : String(key);
 }
 
-export { _defineProperty as defineProperty, _objectSpread2 as objectSpread2, _toPrimitive as toPrimitive, _toPropertyKey as toPropertyKey };
+export { _defineProperty as defineProperty, _objectSpread2 as objectSpread2, _objectWithoutProperties as objectWithoutProperties, _objectWithoutPropertiesLoose as objectWithoutPropertiesLoose, _toPrimitive as toPrimitive, _toPropertyKey as toPropertyKey };

package/context.d.ts

@@ -1,65 +1,56 @@
-import { type Constraint, type FormId, type FieldName, type FormContext, type FormValue, type FormState, type SubscriptionScope, type SubscriptionSubject, type UnionKeyof, type UnionKeyType } from '@conform-to/dom';
+import { type Constraint, type ControlButtonProps, type FormId, type FieldName, type FormContext, type FormControl, type FormValue, type FormState, type SubscriptionScope, type SubscriptionSubject, type UnionKeyof, type UnionKeyType } from '@conform-to/dom';
 import { 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 FieldProps<FieldSchema, Error = unknown, FormSchema extends Record<string, unknown> = Record<string, unknown>> = {
-    formId: FormId<FormSchema, Error>;
-    name: FieldName<FieldSchema>;
-} | {
-    formId: FieldSchema extends Record<string, unknown> ? FormId<FieldSchema, Error> : never;
-    name?: undefined;
-};
-export type Metadata<Schema, Error> = {
-    key?: string;
+export type Metadata<Schema, FormError, FormSchema extends Record<string, unknown>> = {
+    key: string | undefined;
     id: string;
     errorId: string;
     descriptionId: string;
+    name: FieldName<Schema, FormError, FormSchema>;
     initialValue: FormValue<Schema>;
     value: FormValue<Schema>;
-    errors: Error | undefined;
-    allErrors: Record<string, Error>;
+    errors: FormError | undefined;
+    allErrors: Record<string, FormError>;
     allValid: boolean;
     valid: boolean;
     dirty: boolean;
 };
-export type FormMetadata<Schema extends Record<string, unknown> = Record<string, unknown>, Error = unknown> = Omit<Metadata<Schema, Error>, 'id'> & {
-    id: FormId<Schema, Error>;
-    context: FormContext<Schema, Error>;
+export type FormMetadata<Schema extends Record<string, unknown> = Record<string, unknown>, FormError = string[]> = Omit<Metadata<Schema, FormError, Schema>, 'id'> & {
+    id: FormId<Schema, FormError>;
+    context: FormContext<Schema, FormError>;
     status?: 'success' | 'error';
+    dispatch(control: FormControl): void;
+    getControlButtonProps(control: FormControl): ControlButtonProps;
     getFieldset: () => {
-        [Key in UnionKeyof<Schema>]: FieldMetadata<UnionKeyType<Schema, Key>, Error, Schema>;
+        [Key in UnionKeyof<Schema>]: FieldMetadata<UnionKeyType<Schema, Key>, FormError, Schema>;
     };
     onSubmit: (event: React.FormEvent<HTMLFormElement>) => ReturnType<FormContext<Schema>['submit']>;
     onReset: (event: React.FormEvent<HTMLFormElement>) => void;
     noValidate: boolean;
 };
-export type FieldMetadata<Schema = unknown, Error = unknown, FormSchema extends Record<string, any> = Record<string, unknown>> = Metadata<Schema, Error> & {
-    formId: FormId<FormSchema, Error>;
-    name: FieldName<Schema>;
+export type FieldMetadata<Schema = unknown, FormError = string[], FormSchema extends Record<string, any> = Record<string, unknown>> = Metadata<Schema, FormError, FormSchema> & {
+    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>, Error>;
+        [Key in UnionKeyof<Schema>]: FieldMetadata<UnionKeyType<Schema, Key>, FormError>;
     };
-    getFieldList: unknown extends Schema ? () => unknown : Schema extends Array<infer Item> ? () => Array<FieldMetadata<Item, Error>> : never;
+    getFieldList: unknown extends Schema ? () => unknown : Schema extends Array<infer Item> ? () => Array<FieldMetadata<Item, FormError>> : never;
 };
-export declare const Registry: import("react").Context<Record<string, FormContext>>;
-export declare function useFormContext<Schema extends Record<string, any>, Error, Value = Schema>(formId: FormId<Schema, Error>, context?: FormContext<Schema, Error, Value>): FormContext<Schema, Error, Value>;
-export declare function useFormState<Error>(form: FormContext<any, Error>, subjectRef?: MutableRefObject<SubscriptionSubject>): FormState<Error>;
+export declare const Form: import("react").Context<FormContext[]>;
+export declare function useFormContext<Schema extends Record<string, any>, FormError>(formId?: FormId<Schema, FormError>): FormContext<Schema, FormError, unknown>;
+export declare function useFormState<FormError>(form: FormContext<any, FormError>, subjectRef?: MutableRefObject<SubscriptionSubject>): FormState<FormError>;
 export declare function FormProvider(props: {
     context: FormContext<any, any, any>;
     children: ReactNode;
 }): ReactElement;
 export declare function FormStateInput(props: {
-    formId: string;
-    context?: undefined;
-} | {
-    formId?: undefined;
-    context: FormContext;
+    formId?: string;
 }): React.ReactElement;
 export declare function useSubjectRef(initialSubject?: SubscriptionSubject): MutableRefObject<SubscriptionSubject>;
 export declare function updateSubjectRef(ref: MutableRefObject<SubscriptionSubject>, name: string, subject: keyof SubscriptionSubject, scope: keyof SubscriptionScope): void;
-export declare function getMetadata<Schema, Error, FormSchema extends Record<string, any>>(formId: FormId<FormSchema, Error>, state: FormState<Error>, subjectRef: MutableRefObject<SubscriptionSubject>, name?: FieldName<Schema>): Metadata<Schema, Error>;
-export declare function getFieldMetadata<Schema, Error, FormSchema extends Record<string, any>>(formId: FormId<FormSchema, Error>, state: FormState<Error>, subjectRef: MutableRefObject<SubscriptionSubject>, prefix?: string, key?: string | number): FieldMetadata<Schema, Error, FormSchema>;
-export declare function getFormMetadata<Schema extends Record<string, any>, Error>(formId: FormId<Schema, Error>, state: FormState<Error>, subjectRef: MutableRefObject<SubscriptionSubject>, context: FormContext<Schema, Error, any>, noValidate: boolean): FormMetadata<Schema, Error>;
+export declare function getMetadata<Schema, FormError, FormSchema extends Record<string, any>>(formId: FormId<FormSchema, FormError>, state: FormState<FormError>, subjectRef: MutableRefObject<SubscriptionSubject>, name?: FieldName<Schema, FormError, FormSchema>): Metadata<Schema, FormError, FormSchema>;
+export declare function getFieldMetadata<Schema, FormError, FormSchema extends Record<string, any>>(formId: FormId<FormSchema, FormError>, state: FormState<FormError>, subjectRef: MutableRefObject<SubscriptionSubject>, prefix?: string, key?: string | number): FieldMetadata<Schema, FormError, FormSchema>;
+export declare function getFormMetadata<Schema extends Record<string, any>, FormError = string[]>(formId: FormId<Schema, FormError>, state: FormState<FormError>, subjectRef: MutableRefObject<SubscriptionSubject>, context: FormContext<Schema, FormError, any>, noValidate: boolean): FormMetadata<Schema, FormError>;

package/context.js

@@ -7,10 +7,10 @@ var dom = require('@conform-to/dom');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
-var Registry = /*#__PURE__*/react.createContext({});
-function useFormContext(formId, context) {
-  var registry = react.useContext(Registry);
-  var form = context !== null && context !== void 0 ? context : registry[formId];
+var Form = /*#__PURE__*/react.createContext([]);
+function useFormContext(formId) {
+  var contexts = react.useContext(Form);
+  var form = formId ? contexts.find(context => context.formId === formId) : contexts[0];
   if (!form) {
     throw new Error('Form context is not available');
   }
@@ -21,18 +21,17 @@ function useFormState(form, subjectRef) {
   return react.useSyncExternalStore(subscribe, form.getState, form.getState);
 }
 function FormProvider(props) {
-  var registry = react.useContext(Registry);
-  var value = react.useMemo(() => _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, registry), {}, {
-    [props.context.formId]: props.context
-  }), [registry, props.context]);
-  return /*#__PURE__*/jsxRuntime.jsx(Registry.Provider, {
+  var forms = react.useContext(Form);
+  var value = react.useMemo(() => [props.context].concat(forms),
+  // Put the latest form context first
+  [forms, props.context]);
+  return /*#__PURE__*/jsxRuntime.jsx(Form.Provider, {
     value: value,
     children: props.children
   });
 }
 function FormStateInput(props) {
-  var _props$formId;
-  var context = useFormContext((_props$formId = props.formId) !== null && _props$formId !== void 0 ? _props$formId : props.context.formId, props.context);
+  var context = useFormContext(props.formId);
   return /*#__PURE__*/jsxRuntime.jsx("input", {
     type: "hidden",
     name: dom.STATE,
@@ -64,6 +63,7 @@ function getMetadata(formId, state, subjectRef) {
   var id = name ? "".concat(formId, "-").concat(name) : formId;
   return new Proxy({
     id,
+    name,
     errorId: "".concat(id, "-error"),
     descriptionId: "".concat(id, "-description"),
     initialValue: state.initialValue[name],
@@ -139,13 +139,11 @@ function getFieldMetadata(formId, state, subjectRef) {
   var key = arguments.length > 4 ? arguments[4] : undefined;
   var name = typeof key === 'undefined' ? prefix : dom.formatPaths([...dom.getPaths(prefix), key]);
   var metadata = getMetadata(formId, state, subjectRef, name);
-  return new Proxy(metadata, {
-    get(target, key, receiver) {
+  return new Proxy({}, {
+    get(_, key, receiver) {
       switch (key) {
         case 'formId':
           return formId;
-        case 'name':
-          return name;
         case 'constraint':
           return state.constraint[name];
         case 'getFieldList':
@@ -161,19 +159,22 @@ function getFieldMetadata(formId, state, subjectRef) {
             };
           }
       }
-      return Reflect.get(target, key, receiver);
+      return Reflect.get(metadata, key, receiver);
     }
   });
 }
 function getFormMetadata(formId, state, subjectRef, context, noValidate) {
   var metadata = getMetadata(formId, state, subjectRef);
-  return new Proxy(metadata, {
-    get(target, key, receiver) {
+  return new Proxy({}, {
+    get(_, key, receiver) {
       switch (key) {
         case 'context':
           return context;
         case 'status':
           return state.submissionStatus;
+        case 'dispatch':
+        case 'getControlButtonProps':
+          return context[key];
         case 'onSubmit':
           return event => {
             var submitEvent = event.nativeEvent;
@@ -185,14 +186,14 @@ function getFormMetadata(formId, state, subjectRef, context, noValidate) {
         case 'noValidate':
           return noValidate;
       }
-      return Reflect.get(target, key, receiver);
+      return Reflect.get(metadata, key, receiver);
     }
   });
 }
 
+exports.Form = Form;
 exports.FormProvider = FormProvider;
 exports.FormStateInput = FormStateInput;
-exports.Registry = Registry;
 exports.getFieldMetadata = getFieldMetadata;
 exports.getFormMetadata = getFormMetadata;
 exports.getMetadata = getMetadata;

package/context.mjs

@@ -3,10 +3,10 @@ import { STATE, formatPaths, getPaths, isPrefix } from '@conform-to/dom';
 import { useContext, useMemo, createContext, useCallback, useSyncExternalStore, useRef } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
-var Registry = /*#__PURE__*/createContext({});
-function useFormContext(formId, context) {
-  var registry = useContext(Registry);
-  var form = context !== null && context !== void 0 ? context : registry[formId];
+var Form = /*#__PURE__*/createContext([]);
+function useFormContext(formId) {
+  var contexts = useContext(Form);
+  var form = formId ? contexts.find(context => context.formId === formId) : contexts[0];
   if (!form) {
     throw new Error('Form context is not available');
   }
@@ -17,18 +17,17 @@ function useFormState(form, subjectRef) {
   return useSyncExternalStore(subscribe, form.getState, form.getState);
 }
 function FormProvider(props) {
-  var registry = useContext(Registry);
-  var value = useMemo(() => _objectSpread2(_objectSpread2({}, registry), {}, {
-    [props.context.formId]: props.context
-  }), [registry, props.context]);
-  return /*#__PURE__*/jsx(Registry.Provider, {
+  var forms = useContext(Form);
+  var value = useMemo(() => [props.context].concat(forms),
+  // Put the latest form context first
+  [forms, props.context]);
+  return /*#__PURE__*/jsx(Form.Provider, {
     value: value,
     children: props.children
   });
 }
 function FormStateInput(props) {
-  var _props$formId;
-  var context = useFormContext((_props$formId = props.formId) !== null && _props$formId !== void 0 ? _props$formId : props.context.formId, props.context);
+  var context = useFormContext(props.formId);
   return /*#__PURE__*/jsx("input", {
     type: "hidden",
     name: STATE,
@@ -60,6 +59,7 @@ function getMetadata(formId, state, subjectRef) {
   var id = name ? "".concat(formId, "-").concat(name) : formId;
   return new Proxy({
     id,
+    name,
     errorId: "".concat(id, "-error"),
     descriptionId: "".concat(id, "-description"),
     initialValue: state.initialValue[name],
@@ -135,13 +135,11 @@ function getFieldMetadata(formId, state, subjectRef) {
   var key = arguments.length > 4 ? arguments[4] : undefined;
   var name = typeof key === 'undefined' ? prefix : formatPaths([...getPaths(prefix), key]);
   var metadata = getMetadata(formId, state, subjectRef, name);
-  return new Proxy(metadata, {
-    get(target, key, receiver) {
+  return new Proxy({}, {
+    get(_, key, receiver) {
       switch (key) {
         case 'formId':
           return formId;
-        case 'name':
-          return name;
         case 'constraint':
           return state.constraint[name];
         case 'getFieldList':
@@ -157,19 +155,22 @@ function getFieldMetadata(formId, state, subjectRef) {
             };
           }
       }
-      return Reflect.get(target, key, receiver);
+      return Reflect.get(metadata, key, receiver);
     }
   });
 }
 function getFormMetadata(formId, state, subjectRef, context, noValidate) {
   var metadata = getMetadata(formId, state, subjectRef);
-  return new Proxy(metadata, {
-    get(target, key, receiver) {
+  return new Proxy({}, {
+    get(_, key, receiver) {
       switch (key) {
         case 'context':
           return context;
         case 'status':
           return state.submissionStatus;
+        case 'dispatch':
+        case 'getControlButtonProps':
+          return context[key];
         case 'onSubmit':
           return event => {
             var submitEvent = event.nativeEvent;
@@ -181,9 +182,9 @@ function getFormMetadata(formId, state, subjectRef, context, noValidate) {
         case 'noValidate':
           return noValidate;
       }
-      return Reflect.get(target, key, receiver);
+      return Reflect.get(metadata, key, receiver);
     }
   });
 }
 
-export { FormProvider, FormStateInput, Registry, getFieldMetadata, getFormMetadata, getMetadata, updateSubjectRef, useFormContext, useFormState, useSubjectRef };
+export { Form, FormProvider, FormStateInput, getFieldMetadata, getFormMetadata, getMetadata, updateSubjectRef, useFormContext, useFormState, useSubjectRef };

package/helpers.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { type Intent } from '@conform-to/dom';
 import type { FormMetadata, FieldMetadata, Metadata, Pretty, Primitive } from './context';
 type FormControlProps = {
     key: string | undefined;
@@ -79,7 +78,7 @@ type TextareaOptions = Pretty<FormControlOptions & {
 /**
  * Derives aria attributes of a form control based on the field metadata.
  */
-export declare function getAriaAttributes<Schema, Error>(metadata: Metadata<Schema, Error>, options?: FormControlOptions): {
+export declare function getAriaAttributes(metadata: Metadata<any, any, any>, options?: FormControlOptions): {
     'aria-invalid'?: boolean;
     'aria-describedby'?: string;
 };
@@ -92,10 +91,10 @@ export declare function getAriaAttributes<Schema, Error>(metadata: Metadata<Sche
  * <form {...getFormProps(metadata)} />
  * ```
  */
-export declare function getFormProps<Schema extends Record<string, any>, Error>(metadata: FormMetadata<Schema, Error>, options?: FormControlOptions): {
+export declare function getFormProps<Schema extends Record<string, any>, FormError>(metadata: FormMetadata<Schema, FormError>, options?: FormControlOptions): {
     'aria-invalid'?: boolean | undefined;
     'aria-describedby'?: string | undefined;
-    id: import("@conform-to/dom").FormId<Schema, Error>;
+    id: import("@conform-to/dom").FormId<Schema, FormError>;
     onSubmit: (event: import("react").FormEvent<HTMLFormElement>) => void;
     noValidate: boolean;
 };
@@ -108,18 +107,18 @@ export declare function getFormProps<Schema extends Record<string, any>, Error>(
  * <fieldset {...getFieldsetProps(metadata)} />
  * ```
  */
-export declare function getFieldsetProps<Schema extends Record<string, any> | undefined | unknown, Error>(metadata: FieldMetadata<Schema, Error, any>, options?: FormControlOptions): {
+export declare function getFieldsetProps<Schema extends Record<string, any> | undefined | unknown>(metadata: FieldMetadata<Schema, any, any>, options?: FormControlOptions): {
     'aria-invalid'?: boolean | undefined;
     'aria-describedby'?: string | undefined;
     id: string;
-    name: import("@conform-to/dom").FieldName<Schema>;
-    form: import("@conform-to/dom").FormId<any, Error>;
+    name: import("@conform-to/dom").FieldName<Schema, any, any>;
+    form: import("@conform-to/dom").FormId<any, any>;
 };
 /**
  * Derives common properties of a form control based on the field metadata,
  * including `key`, `id`, `name`, `form`, `required`, `autoFocus`, `aria-invalid` and `aria-describedby`.
  */
-export declare function getFormControlProps<Schema, Error>(metadata: FieldMetadata<Schema, Error, any>, options?: FormControlOptions): FormControlProps;
+export declare function getFormControlProps<Schema>(metadata: FieldMetadata<Schema, any, any>, options?: FormControlOptions): FormControlProps;
 /**
  * Derives the properties of an input element based on the field metadata,
  * including common form control attributes like `key`, `id`, `name`, `form`, `autoFocus`, `aria-invalid`, `aria-describedby`
@@ -210,10 +209,4 @@ export declare function getCollectionProps<Schema extends Array<string | boolean
      */
     value?: boolean;
 }>): Array<InputProps & Pick<Required<InputProps>, 'type' | 'value'>>;
-export declare function getControlButtonProps(formId: string, intent: Intent): {
-    name: string;
-    value: string;
-    form: string;
-    formNoValidate: boolean;
-};
 export {};

package/helpers.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
-var dom = require('@conform-to/dom');
 
 /**
  * Cleanup `undefined` from the result.
@@ -217,18 +216,9 @@ function getCollectionProps(metadata, options) {
     }));
   });
 }
-function getControlButtonProps(formId, intent) {
-  return {
-    name: dom.INTENT,
-    value: dom.serializeIntent(intent),
-    form: formId,
-    formNoValidate: true
-  };
-}
 
 exports.getAriaAttributes = getAriaAttributes;
 exports.getCollectionProps = getCollectionProps;
-exports.getControlButtonProps = getControlButtonProps;
 exports.getFieldsetProps = getFieldsetProps;
 exports.getFormControlProps = getFormControlProps;
 exports.getFormProps = getFormProps;

package/helpers.mjs

@@ -1,5 +1,4 @@
 import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
-import { INTENT, serializeIntent } from '@conform-to/dom';
 
 /**
  * Cleanup `undefined` from the result.
@@ -213,13 +212,5 @@ function getCollectionProps(metadata, options) {
     }));
   });
 }
-function getControlButtonProps(formId, intent) {
-  return {
-    name: INTENT,
-    value: serializeIntent(intent),
-    form: formId,
-    formNoValidate: true
-  };
-}
 
-export { getAriaAttributes, getCollectionProps, getControlButtonProps, getFieldsetProps, getFormControlProps, getFormProps, getInputProps, getSelectProps, getTextareaProps };
+export { getAriaAttributes, getCollectionProps, getFieldsetProps, getFormControlProps, getFormProps, getInputProps, getSelectProps, getTextareaProps };

package/hooks.d.ts

@@ -6,12 +6,11 @@ import { type FormMetadata, type FieldMetadata, type Pretty } from './context';
  * This basically makes it a no-op on server
  */
 export declare const useSafeLayoutEffect: typeof useEffect;
-export declare function useFormId<Schema extends Record<string, unknown>, Error>(preferredId?: string): FormId<Schema, Error>;
+export declare function useFormId<Schema extends Record<string, unknown>, FormError>(preferredId?: string): FormId<Schema, FormError>;
 export declare function useNoValidate(defaultNoValidate?: boolean): boolean;
-export declare function useForm<Schema extends Record<string, any>, Error = string[], Value = Schema>(options: Pretty<FormOptions<Schema, Error, Value> & {
+export declare function useForm<Schema extends Record<string, any>, FormError = string[], FormValue = Schema>(options: Pretty<Omit<FormOptions<Schema, FormError, FormValue>, 'formId'> & {
     /**
-     * If the form id is provided, Id for label,
-     * input and error elements will be derived.
+     * The form id. If not provided, a random id will be generated.
      */
     id?: string;
     /**
@@ -20,23 +19,16 @@ export declare function useForm<Schema extends Record<string, any>, Error = stri
      * Default to `true`.
      */
     defaultNoValidate?: boolean;
-}>): {
-    meta: FormMetadata<Schema, Error>;
-    fields: ReturnType<FormMetadata<Schema, Error>['getFieldset']>;
-};
-export declare function useFormMetadata<Schema extends Record<string, any>, Error>(options: {
-    formId: FormId<Schema, Error>;
+}>): [
+    FormMetadata<Schema, FormError>,
+    ReturnType<FormMetadata<Schema, FormError>['getFieldset']>
+];
+export declare function useFormMetadata<Schema extends Record<string, any>, FormError>(formId: FormId<Schema, FormError>, options?: {
     defaultNoValidate?: boolean;
-}): FormMetadata<Schema, Error>;
-export declare function useField<FormSchema extends Record<string, unknown>, FieldSchema = FormSchema, Error = unknown>(options: {
-    formId: FormId<FormSchema, Error>;
-    name: FieldName<FieldSchema>;
-} | {
-    formId: FormId<FormSchema, Error>;
-    name?: undefined;
-}): {
-    meta: FieldMetadata<FieldSchema, Error, FormSchema>;
-    fields: FieldMetadata<FieldSchema, Error, FormSchema>['getFieldset'] extends Function ? ReturnType<FieldMetadata<FieldSchema, Error, FormSchema>['getFieldset']> : never;
-    list: FieldMetadata<FieldSchema, Error, FormSchema>['getFieldList'] extends Function ? ReturnType<FieldMetadata<FieldSchema, Error, FormSchema>['getFieldList']> : never;
-    form: FormMetadata<FormSchema, Error>;
-};
+}): FormMetadata<Schema, FormError>;
+export declare function useField<FieldSchema, FormError = string[], FormSchema extends Record<string, unknown> = Record<string, unknown>>(name: FieldName<FieldSchema, FormError, FormSchema>, options?: {
+    formId?: FormId<FormSchema, FormError>;
+}): [
+    FieldMetadata<FieldSchema, FormError, FormSchema>,
+    FormMetadata<FormSchema, FormError>
+];

package/hooks.js

@@ -2,10 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
 var dom = require('@conform-to/dom');
 var react = require('react');
 var context = require('./context.js');
 
+var _excluded = ["id"];
+
 /**
  * useLayoutEffect is client-only.
  * This basically makes it a no-op on server
@@ -29,15 +32,14 @@ function useNoValidate() {
   return noValidate;
 }
 function useForm(options) {
-  var formId = useFormId(options.id);
-  var initializeContext = () => dom.createFormContext(formId, options);
-  var [context$1, setFormContext] = react.useState(initializeContext);
-
-  // If id changes, reinitialize the form immediately
-  if (formId !== context$1.formId) {
-    setFormContext(initializeContext);
-  }
-  var optionsRef = react.useRef(options);
+  var {
+      id
+    } = options,
+    formConfig = _rollupPluginBabelHelpers.objectWithoutProperties(options, _excluded);
+  var formId = useFormId(id);
+  var [context$1] = react.useState(() => dom.createFormContext(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, formConfig), {}, {
+    formId
+  })));
   useSafeLayoutEffect(() => {
     document.addEventListener('input', context$1.input);
     document.addEventListener('focusout', context$1.blur);
@@ -49,55 +51,32 @@ function useForm(options) {
     };
   }, [context$1]);
   useSafeLayoutEffect(() => {
-    if (options.lastResult === optionsRef.current.lastResult) {
-      // If there is no change, do nothing
-      return;
-    }
-    if (options.lastResult) {
-      context$1.report(options.lastResult);
-    } else {
-      var _document$forms$named;
-      (_document$forms$named = document.forms.namedItem(context$1.formId)) === null || _document$forms$named === void 0 || _document$forms$named.reset();
-    }
-  }, [context$1, options.lastResult]);
-  useSafeLayoutEffect(() => {
-    optionsRef.current = options;
-    context$1.update(options);
+    context$1.update(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, formConfig), {}, {
+      formId
+    }));
   });
   var subjectRef = context.useSubjectRef();
   var state = context.useFormState(context$1, subjectRef);
   var noValidate = useNoValidate(options.defaultNoValidate);
-  var meta = context.getFormMetadata(formId, state, subjectRef, context$1, noValidate);
-  return {
-    meta,
-    fields: meta.getFieldset()
-  };
+  var form = context.getFormMetadata(formId, state, subjectRef, context$1, noValidate);
+  return [form, form.getFieldset()];
 }
-function useFormMetadata(options) {
+function useFormMetadata(formId) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var subjectRef = context.useSubjectRef();
-  var context$1 = context.useFormContext(options.formId);
+  var context$1 = context.useFormContext(formId);
   var state = context.useFormState(context$1, subjectRef);
   var noValidate = useNoValidate(options.defaultNoValidate);
-  return context.getFormMetadata(options.formId, state, subjectRef, context$1, noValidate);
+  return context.getFormMetadata(context$1.formId, state, subjectRef, context$1, noValidate);
 }
-function useField(options) {
+function useField(name) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var subjectRef = context.useSubjectRef();
   var context$1 = context.useFormContext(options.formId);
   var state = context.useFormState(context$1, subjectRef);
-  var meta = context.getFieldMetadata(options.formId, state, subjectRef, options.name);
-  var form = context.getFormMetadata(options.formId, state, subjectRef, context$1, false);
-  return {
-    meta,
-    // @ts-expect-error The types is used as a hint only
-    get fields() {
-      return meta.getFieldset();
-    },
-    // @ts-expect-error The types is used as a hint only
-    get list() {
-      return meta.getFieldList();
-    },
-    form
-  };
+  var field = context.getFieldMetadata(context$1.formId, state, subjectRef, name);
+  var form = context.getFormMetadata(context$1.formId, state, subjectRef, context$1, false);
+  return [field, form];
 }
 
 exports.useField = useField;

package/hooks.mjs

@@ -1,7 +1,10 @@
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
 import { createFormContext } from '@conform-to/dom';
-import { useState, useRef, useEffect, useLayoutEffect, useId } from 'react';
+import { useState, useEffect, useLayoutEffect, useId } from 'react';
 import { useSubjectRef, useFormState, getFormMetadata, useFormContext, getFieldMetadata } from './context.mjs';
 
+var _excluded = ["id"];
+
 /**
  * useLayoutEffect is client-only.
  * This basically makes it a no-op on server
@@ -25,15 +28,14 @@ function useNoValidate() {
   return noValidate;
 }
 function useForm(options) {
-  var formId = useFormId(options.id);
-  var initializeContext = () => createFormContext(formId, options);
-  var [context, setFormContext] = useState(initializeContext);
-
-  // If id changes, reinitialize the form immediately
-  if (formId !== context.formId) {
-    setFormContext(initializeContext);
-  }
-  var optionsRef = useRef(options);
+  var {
+      id
+    } = options,
+    formConfig = _objectWithoutProperties(options, _excluded);
+  var formId = useFormId(id);
+  var [context] = useState(() => createFormContext(_objectSpread2(_objectSpread2({}, formConfig), {}, {
+    formId
+  })));
   useSafeLayoutEffect(() => {
     document.addEventListener('input', context.input);
     document.addEventListener('focusout', context.blur);
@@ -45,55 +47,32 @@ function useForm(options) {
     };
   }, [context]);
   useSafeLayoutEffect(() => {
-    if (options.lastResult === optionsRef.current.lastResult) {
-      // If there is no change, do nothing
-      return;
-    }
-    if (options.lastResult) {
-      context.report(options.lastResult);
-    } else {
-      var _document$forms$named;
-      (_document$forms$named = document.forms.namedItem(context.formId)) === null || _document$forms$named === void 0 || _document$forms$named.reset();
-    }
-  }, [context, options.lastResult]);
-  useSafeLayoutEffect(() => {
-    optionsRef.current = options;
-    context.update(options);
+    context.update(_objectSpread2(_objectSpread2({}, formConfig), {}, {
+      formId
+    }));
   });
   var subjectRef = useSubjectRef();
   var state = useFormState(context, subjectRef);
   var noValidate = useNoValidate(options.defaultNoValidate);
-  var meta = getFormMetadata(formId, state, subjectRef, context, noValidate);
-  return {
-    meta,
-    fields: meta.getFieldset()
-  };
+  var form = getFormMetadata(formId, state, subjectRef, context, noValidate);
+  return [form, form.getFieldset()];
 }
-function useFormMetadata(options) {
+function useFormMetadata(formId) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var subjectRef = useSubjectRef();
-  var context = useFormContext(options.formId);
+  var context = useFormContext(formId);
   var state = useFormState(context, subjectRef);
   var noValidate = useNoValidate(options.defaultNoValidate);
-  return getFormMetadata(options.formId, state, subjectRef, context, noValidate);
+  return getFormMetadata(context.formId, state, subjectRef, context, noValidate);
 }
-function useField(options) {
+function useField(name) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var subjectRef = useSubjectRef();
   var context = useFormContext(options.formId);
   var state = useFormState(context, subjectRef);
-  var meta = getFieldMetadata(options.formId, state, subjectRef, options.name);
-  var form = getFormMetadata(options.formId, state, subjectRef, context, false);
-  return {
-    meta,
-    // @ts-expect-error The types is used as a hint only
-    get fields() {
-      return meta.getFieldset();
-    },
-    // @ts-expect-error The types is used as a hint only
-    get list() {
-      return meta.getFieldList();
-    },
-    form
-  };
+  var field = getFieldMetadata(context.formId, state, subjectRef, name);
+  var form = getFormMetadata(context.formId, state, subjectRef, context, false);
+  return [field, form];
 }
 
 export { useField, useForm, useFormId, useFormMetadata, useNoValidate, useSafeLayoutEffect };

package/index.d.ts

@@ -1,6 +1,6 @@
-export { type Submission, type SubmissionResult, type Intent, type FormId, type FieldName, requestIntent, requestSubmit, isFieldElement, intent, } from '@conform-to/dom';
-export { type FieldProps, type FieldMetadata, type FormMetadata, FormProvider, FormStateInput, } from './context';
+export { type Submission, type SubmissionResult, type DefaultValue, type FormControl, type FormId, type FieldName, requestSubmit, isFieldElement, control, } from '@conform-to/dom';
+export { type FieldMetadata, type FormMetadata, FormProvider, FormStateInput, } from './context';
 export { useForm, useFormMetadata, useField } from './hooks';
 export { useInputControl } from './integrations';
 export { validateConstraint } from './validitystate';
-export { getFormProps, getFieldsetProps, getInputProps, getSelectProps, getTextareaProps, getCollectionProps, getControlButtonProps, } from './helpers';
+export { getFormProps, getFieldsetProps, getInputProps, getSelectProps, getTextareaProps, getCollectionProps, } from './helpers';

package/index.js

@@ -11,18 +11,14 @@ var helpers = require('./helpers.js');
 
 
 
-Object.defineProperty(exports, 'intent', {
+Object.defineProperty(exports, 'control', {
 	enumerable: true,
-	get: function () { return dom.intent; }
+	get: function () { return dom.control; }
 });
 Object.defineProperty(exports, 'isFieldElement', {
 	enumerable: true,
 	get: function () { return dom.isFieldElement; }
 });
-Object.defineProperty(exports, 'requestIntent', {
-	enumerable: true,
-	get: function () { return dom.requestIntent; }
-});
 Object.defineProperty(exports, 'requestSubmit', {
 	enumerable: true,
 	get: function () { return dom.requestSubmit; }
@@ -35,7 +31,6 @@ exports.useFormMetadata = hooks.useFormMetadata;
 exports.useInputControl = integrations.useInputControl;
 exports.validateConstraint = validitystate.validateConstraint;
 exports.getCollectionProps = helpers.getCollectionProps;
-exports.getControlButtonProps = helpers.getControlButtonProps;
 exports.getFieldsetProps = helpers.getFieldsetProps;
 exports.getFormProps = helpers.getFormProps;
 exports.getInputProps = helpers.getInputProps;

package/index.mjs

@@ -1,6 +1,6 @@
-export { intent, isFieldElement, requestIntent, requestSubmit } from '@conform-to/dom';
+export { control, isFieldElement, requestSubmit } from '@conform-to/dom';
 export { FormProvider, FormStateInput } from './context.mjs';
 export { useField, useForm, useFormMetadata } from './hooks.mjs';
 export { useInputControl } from './integrations.mjs';
 export { validateConstraint } from './validitystate.mjs';
-export { getCollectionProps, getControlButtonProps, getFieldsetProps, getFormProps, getInputProps, getSelectProps, getTextareaProps } from './helpers.mjs';
+export { getCollectionProps, getFieldsetProps, getFormProps, getInputProps, getSelectProps, getTextareaProps } from './helpers.mjs';

package/integrations.d.ts

@@ -1,34 +1,15 @@
-import { type FieldElement, type FormValue, FieldName, FormId } from '@conform-to/dom';
-import { type FieldMetadata } from './context';
-export type InputControl<Value> = {
-    value: Value;
-    change: (value: Value) => void;
+import { type FieldElement } from '@conform-to/dom';
+export type InputControl = {
+    value: string | undefined;
+    change: (value: 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 declare function useInputControl<Schema>(metadata: FieldMetadata<Schema, any, any>, options?: {
-    onFocus?: (event: Event) => void;
-}): InputControl<string | undefined>;
-export declare function useInputControl<Schema>(options: {
-    key?: string;
-    name: FieldName<Schema>;
-    formId: FormId<any, any>;
-    initialValue: FormValue<Schema>;
-    onFocus?: (event: Event) => void;
-}): InputControl<string | undefined>;
-export declare function useInputControl<Schema, Value>(metadata: FieldMetadata<Schema, any, any>, options: {
-    initialize: (value: FormValue<Schema> | undefined) => Value;
-    serialize?: (value: Value) => string;
-    onFocus?: (event: Event) => void;
-}): InputControl<Value>;
-export declare function useInputControl<Schema, Value>(options: {
-    key?: string;
-    name: FieldName<Schema>;
-    formId: FormId<any, any>;
-    initialValue: FormValue<Schema>;
-    initialize: (value: FormValue<Schema> | undefined) => Value;
-    serialize?: (value: Value) => string;
-    onFocus?: (event: Event) => void;
-}): InputControl<Value>;
+export declare function useInputControl(options: {
+    key?: string | undefined;
+    name: string;
+    formId: string;
+    initialValue: string | undefined;
+}): InputControl;

package/integrations.js

@@ -32,43 +32,23 @@ function getEventTarget(formId, name) {
   form === null || form === void 0 || form.appendChild(input);
   return input;
 }
-function useInputControl(metadata, options) {
-  var _options$initialize, _options$serialize, _options$onFocus;
+function useInputControl(options) {
   var eventDispatched = react.useRef({
     change: false,
     focus: false,
     blur: false
   });
-  var [key, setKey] = react.useState(metadata.key);
-  var initialize = (_options$initialize = options === null || options === void 0 ? void 0 : options.initialize) !== null && _options$initialize !== void 0 ? _options$initialize : 'initialize' in metadata && metadata.initialize ? metadata.initialize : value => value === null || value === void 0 ? void 0 : value.toString();
-  var serialize = (_options$serialize = options === null || options === void 0 ? void 0 : options.serialize) !== null && _options$serialize !== void 0 ? _options$serialize : 'serialize' in metadata && metadata.serialize ? metadata.serialize : undefined;
-  var onFocus = (_options$onFocus = options === null || options === void 0 ? void 0 : options.onFocus) !== null && _options$onFocus !== void 0 ? _options$onFocus : 'onFocus' in metadata ? metadata.onFocus : undefined;
-  var optionsRef = react.useRef({
-    initialize,
-    serialize,
-    onFocus
-  });
-  var [value, setValue] = react.useState(() => initialize(metadata.initialValue));
-  if (key !== metadata.key) {
-    setValue(initialize(metadata.initialValue));
-    setKey(metadata.key);
+  var [key, setKey] = react.useState(options.key);
+  var [value, setValue] = react.useState(() => options.initialValue);
+  if (key !== options.key) {
+    setValue(options.initialValue);
+    setKey(options.key);
   }
-  react.useEffect(() => {
-    optionsRef.current = {
-      initialize,
-      serialize,
-      onFocus
-    };
-  });
   react.useEffect(() => {
     var createEventListener = listener => {
       return event => {
-        var element = getFieldElement(metadata.formId, metadata.name, element => element === event.target);
+        var element = getFieldElement(options.formId, options.name, element => element === event.target);
         if (element) {
-          if (listener === 'focus') {
-            var _optionsRef$current, _optionsRef$current$o;
-            (_optionsRef$current = optionsRef.current) === null || _optionsRef$current === void 0 || (_optionsRef$current$o = _optionsRef$current.onFocus) === null || _optionsRef$current$o === void 0 || _optionsRef$current$o.call(_optionsRef$current, event);
-          }
           eventDispatched.current[listener] = true;
         }
       };
@@ -84,62 +64,57 @@ function useInputControl(metadata, options) {
       document.removeEventListener('focusin', focusHandler, true);
       document.removeEventListener('focusout', blurHandler, true);
     };
-  }, [metadata.formId, metadata.name]);
+  }, [options.formId, options.name]);
   var handlers = react.useMemo(() => {
     return {
       change(value) {
         if (!eventDispatched.current.change) {
-          var _ref, _optionsRef$current$s, _optionsRef$current$s2, _optionsRef$current2;
-          var _element = getEventTarget(metadata.formId, metadata.name);
-          var serializedValue = (_ref = (_optionsRef$current$s = (_optionsRef$current$s2 = (_optionsRef$current2 = optionsRef.current).serialize) === null || _optionsRef$current$s2 === void 0 ? void 0 : _optionsRef$current$s2.call(_optionsRef$current2, value)) !== null && _optionsRef$current$s !== void 0 ? _optionsRef$current$s : value === null || value === void 0 ? void 0 : value.toString()) !== null && _ref !== void 0 ? _ref : '';
+          var _element = getEventTarget(options.formId, options.name);
           eventDispatched.current.change = true;
           if (_element instanceof HTMLInputElement && (_element.type === 'checkbox' || _element.type === 'radio')) {
-            if (_element.checked ? _element.value !== serializedValue : _element.value === serializedValue) {
-              _element.click();
-            }
-          } else {
+            _element.checked = _element.value === value;
+          } else if (_element.value !== value) {
             // No change event will be triggered on React if `element.value` is already updated
-            if (_element.value !== serializedValue) {
-              /**
-               * 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);
+
+            /**
+             * 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 {
-                if (valueSetter) {
-                  valueSetter.call(_element, value);
-                } else {
-                  throw new Error('The given element does not have a value setter');
-                }
+                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(metadata.formId, metadata.name);
+          var _element2 = getEventTarget(options.formId, options.name);
           eventDispatched.current.focus = true;
           _element2.dispatchEvent(new FocusEvent('focusin', {
             bubbles: true
@@ -150,7 +125,7 @@ function useInputControl(metadata, options) {
       },
       blur() {
         if (!eventDispatched.current.blur) {
-          var _element3 = getEventTarget(metadata.formId, metadata.name);
+          var _element3 = getEventTarget(options.formId, options.name);
           eventDispatched.current.blur = true;
           _element3.dispatchEvent(new FocusEvent('focusout', {
             bubbles: true
@@ -160,7 +135,7 @@ function useInputControl(metadata, options) {
         eventDispatched.current.blur = false;
       }
     };
-  }, [metadata.formId, metadata.name]);
+  }, [options.formId, options.name]);
   return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, handlers), {}, {
     value
   });

package/integrations.mjs

@@ -28,43 +28,23 @@ function getEventTarget(formId, name) {
   form === null || form === void 0 || form.appendChild(input);
   return input;
 }
-function useInputControl(metadata, options) {
-  var _options$initialize, _options$serialize, _options$onFocus;
+function useInputControl(options) {
   var eventDispatched = useRef({
     change: false,
     focus: false,
     blur: false
   });
-  var [key, setKey] = useState(metadata.key);
-  var initialize = (_options$initialize = options === null || options === void 0 ? void 0 : options.initialize) !== null && _options$initialize !== void 0 ? _options$initialize : 'initialize' in metadata && metadata.initialize ? metadata.initialize : value => value === null || value === void 0 ? void 0 : value.toString();
-  var serialize = (_options$serialize = options === null || options === void 0 ? void 0 : options.serialize) !== null && _options$serialize !== void 0 ? _options$serialize : 'serialize' in metadata && metadata.serialize ? metadata.serialize : undefined;
-  var onFocus = (_options$onFocus = options === null || options === void 0 ? void 0 : options.onFocus) !== null && _options$onFocus !== void 0 ? _options$onFocus : 'onFocus' in metadata ? metadata.onFocus : undefined;
-  var optionsRef = useRef({
-    initialize,
-    serialize,
-    onFocus
-  });
-  var [value, setValue] = useState(() => initialize(metadata.initialValue));
-  if (key !== metadata.key) {
-    setValue(initialize(metadata.initialValue));
-    setKey(metadata.key);
+  var [key, setKey] = useState(options.key);
+  var [value, setValue] = useState(() => options.initialValue);
+  if (key !== options.key) {
+    setValue(options.initialValue);
+    setKey(options.key);
   }
-  useEffect(() => {
-    optionsRef.current = {
-      initialize,
-      serialize,
-      onFocus
-    };
-  });
   useEffect(() => {
     var createEventListener = listener => {
       return event => {
-        var element = getFieldElement(metadata.formId, metadata.name, element => element === event.target);
+        var element = getFieldElement(options.formId, options.name, element => element === event.target);
         if (element) {
-          if (listener === 'focus') {
-            var _optionsRef$current, _optionsRef$current$o;
-            (_optionsRef$current = optionsRef.current) === null || _optionsRef$current === void 0 || (_optionsRef$current$o = _optionsRef$current.onFocus) === null || _optionsRef$current$o === void 0 || _optionsRef$current$o.call(_optionsRef$current, event);
-          }
           eventDispatched.current[listener] = true;
         }
       };
@@ -80,62 +60,57 @@ function useInputControl(metadata, options) {
       document.removeEventListener('focusin', focusHandler, true);
       document.removeEventListener('focusout', blurHandler, true);
     };
-  }, [metadata.formId, metadata.name]);
+  }, [options.formId, options.name]);
   var handlers = useMemo(() => {
     return {
       change(value) {
         if (!eventDispatched.current.change) {
-          var _ref, _optionsRef$current$s, _optionsRef$current$s2, _optionsRef$current2;
-          var _element = getEventTarget(metadata.formId, metadata.name);
-          var serializedValue = (_ref = (_optionsRef$current$s = (_optionsRef$current$s2 = (_optionsRef$current2 = optionsRef.current).serialize) === null || _optionsRef$current$s2 === void 0 ? void 0 : _optionsRef$current$s2.call(_optionsRef$current2, value)) !== null && _optionsRef$current$s !== void 0 ? _optionsRef$current$s : value === null || value === void 0 ? void 0 : value.toString()) !== null && _ref !== void 0 ? _ref : '';
+          var _element = getEventTarget(options.formId, options.name);
           eventDispatched.current.change = true;
           if (_element instanceof HTMLInputElement && (_element.type === 'checkbox' || _element.type === 'radio')) {
-            if (_element.checked ? _element.value !== serializedValue : _element.value === serializedValue) {
-              _element.click();
-            }
-          } else {
+            _element.checked = _element.value === value;
+          } else if (_element.value !== value) {
             // No change event will be triggered on React if `element.value` is already updated
-            if (_element.value !== serializedValue) {
-              /**
-               * 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);
+
+            /**
+             * 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 {
-                if (valueSetter) {
-                  valueSetter.call(_element, value);
-                } else {
-                  throw new Error('The given element does not have a value setter');
-                }
+                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(metadata.formId, metadata.name);
+          var _element2 = getEventTarget(options.formId, options.name);
           eventDispatched.current.focus = true;
           _element2.dispatchEvent(new FocusEvent('focusin', {
             bubbles: true
@@ -146,7 +121,7 @@ function useInputControl(metadata, options) {
       },
       blur() {
         if (!eventDispatched.current.blur) {
-          var _element3 = getEventTarget(metadata.formId, metadata.name);
+          var _element3 = getEventTarget(options.formId, options.name);
           eventDispatched.current.blur = true;
           _element3.dispatchEvent(new FocusEvent('focusout', {
             bubbles: true
@@ -156,7 +131,7 @@ function useInputControl(metadata, options) {
         eventDispatched.current.blur = false;
       }
     };
-  }, [metadata.formId, metadata.name]);
+  }, [options.formId, options.name]);
   return _objectSpread2(_objectSpread2({}, handlers), {}, {
     value
   });

package/package.json

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