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

package/_virtual/_rollupPluginBabelHelpers.js

@@ -2,26 +2,26 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
+function ownKeys(e, r) {
+  var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
   }
-  return keys;
+  return t;
 }
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
     });
   }
-  return target;
+  return e;
 }
 function _defineProperty(obj, key, value) {
   key = _toPropertyKey(key);

package/_virtual/_rollupPluginBabelHelpers.mjs

@@ -1,23 +1,23 @@
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
+function ownKeys(e, r) {
+  var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
   }
-  return keys;
+  return t;
 }
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
     });
   }
-  return target;
+  return e;
 }
 function _defineProperty(obj, key, value) {
   key = _toPropertyKey(key);

package/context.d.ts

@@ -1,4 +1,4 @@
-import { type Constraint, type FormId, type FieldName, type Form, type FormValue, type FormState, type SubscriptionScope, type SubscriptionSubject, type UnionKeyof, type UnionKeyType } from '@conform-to/dom';
+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 ReactElement, type ReactNode, type MutableRefObject } from 'react';
 export type Pretty<T> = {
     [K in keyof T]: T[K];
@@ -18,20 +18,20 @@ export type Metadata<Schema, Error> = {
     descriptionId: string;
     initialValue: FormValue<Schema>;
     value: FormValue<Schema>;
-    error: Error | undefined;
-    allError: Record<string, Error>;
+    errors: Error | undefined;
+    allErrors: Record<string, Error>;
     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: Form<Schema, Error>;
+    context: FormContext<Schema, Error>;
     status?: 'success' | 'error';
     getFieldset: () => {
         [Key in UnionKeyof<Schema>]: FieldMetadata<UnionKeyType<Schema, Key>, Error, Schema>;
     };
-    onSubmit: (event: React.FormEvent<HTMLFormElement>) => ReturnType<Form<Schema>['submit']>;
+    onSubmit: (event: React.FormEvent<HTMLFormElement>) => ReturnType<FormContext<Schema>['submit']>;
     onReset: (event: React.FormEvent<HTMLFormElement>) => void;
     noValidate: boolean;
 };
@@ -44,11 +44,11 @@ export type FieldMetadata<Schema = unknown, Error = unknown, FormSchema extends
     };
     getFieldList: unknown extends Schema ? () => unknown : Schema extends Array<infer Item> ? () => Array<FieldMetadata<Item, Error>> : never;
 };
-export declare const Registry: import("react").Context<Record<string, Form>>;
-export declare function useRegistry<Schema extends Record<string, any>, Error, Value = Schema>(formId: FormId<Schema, Error>, context?: Form<Schema, Error, Value>): Form<Schema, Error, Value>;
-export declare function useFormState<Error>(form: Form<any, Error>, subjectRef?: MutableRefObject<SubscriptionSubject>): FormState<Error>;
+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 function FormProvider(props: {
-    context: Form<any, any, any>;
+    context: FormContext<any, any, any>;
     children: ReactNode;
 }): ReactElement;
 export declare function FormStateInput(props: {
@@ -56,10 +56,10 @@ export declare function FormStateInput(props: {
     context?: undefined;
 } | {
     formId?: undefined;
-    context: Form;
+    context: FormContext;
 }): 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>, form: Form<Schema, Error, any>, noValidate: boolean): FormMetadata<Schema, Error>;
+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>;

package/context.js

@@ -8,7 +8,7 @@ var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
 var Registry = /*#__PURE__*/react.createContext({});
-function useRegistry(formId, context) {
+function useFormContext(formId, context) {
   var registry = react.useContext(Registry);
   var form = context !== null && context !== void 0 ? context : registry[formId];
   if (!form) {
@@ -23,7 +23,7 @@ function useFormState(form, subjectRef) {
 function FormProvider(props) {
   var registry = react.useContext(Registry);
   var value = react.useMemo(() => _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, registry), {}, {
-    [props.context.id]: props.context
+    [props.context.formId]: props.context
   }), [registry, props.context]);
   return /*#__PURE__*/jsxRuntime.jsx(Registry.Provider, {
     value: value,
@@ -32,11 +32,11 @@ function FormProvider(props) {
 }
 function FormStateInput(props) {
   var _props$formId;
-  var form = useRegistry((_props$formId = props.formId) !== null && _props$formId !== void 0 ? _props$formId : props.context.id, props.context);
+  var context = useFormContext((_props$formId = props.formId) !== null && _props$formId !== void 0 ? _props$formId : props.context.formId, props.context);
   return /*#__PURE__*/jsxRuntime.jsx("input", {
     type: "hidden",
     name: dom.STATE,
-    value: form.getSerializedState(),
+    value: context.getSerializedState(),
     form: props.formId
   });
 }
@@ -68,7 +68,7 @@ function getMetadata(formId, state, subjectRef) {
     descriptionId: "".concat(id, "-description"),
     initialValue: state.initialValue[name],
     value: state.value[name],
-    error: state.error[name],
+    errors: state.error[name],
     get key() {
       return state.key[name];
     },
@@ -90,7 +90,7 @@ function getMetadata(formId, state, subjectRef) {
       }
       return true;
     },
-    get allError() {
+    get allErrors() {
       if (name === '') {
         return state.error;
       }
@@ -116,14 +116,14 @@ function getMetadata(formId, state, subjectRef) {
     get(target, key, receiver) {
       switch (key) {
         case 'key':
-        case 'error':
+        case 'errors':
         case 'initialValue':
         case 'value':
         case 'valid':
         case 'dirty':
-          updateSubjectRef(subjectRef, name, key, 'name');
+          updateSubjectRef(subjectRef, name, key === 'errors' ? 'error' : key, 'name');
           break;
-        case 'allError':
+        case 'allErrors':
           updateSubjectRef(subjectRef, name, 'error', 'prefix');
           break;
         case 'allValid':
@@ -165,19 +165,19 @@ function getFieldMetadata(formId, state, subjectRef) {
     }
   });
 }
-function getFormMetadata(formId, state, subjectRef, form, noValidate) {
+function getFormMetadata(formId, state, subjectRef, context, noValidate) {
   var metadata = getMetadata(formId, state, subjectRef);
   return new Proxy(metadata, {
     get(target, key, receiver) {
       switch (key) {
         case 'context':
-          return form;
+          return context;
         case 'status':
           return state.submissionStatus;
         case 'onSubmit':
           return event => {
             var submitEvent = event.nativeEvent;
-            form.submit(submitEvent);
+            context.submit(submitEvent);
             if (submitEvent.defaultPrevented) {
               event.preventDefault();
             }
@@ -197,6 +197,6 @@ exports.getFieldMetadata = getFieldMetadata;
 exports.getFormMetadata = getFormMetadata;
 exports.getMetadata = getMetadata;
 exports.updateSubjectRef = updateSubjectRef;
+exports.useFormContext = useFormContext;
 exports.useFormState = useFormState;
-exports.useRegistry = useRegistry;
 exports.useSubjectRef = useSubjectRef;

package/context.mjs

@@ -4,7 +4,7 @@ import { useContext, useMemo, createContext, useCallback, useSyncExternalStore,
 import { jsx } from 'react/jsx-runtime';
 
 var Registry = /*#__PURE__*/createContext({});
-function useRegistry(formId, context) {
+function useFormContext(formId, context) {
   var registry = useContext(Registry);
   var form = context !== null && context !== void 0 ? context : registry[formId];
   if (!form) {
@@ -19,7 +19,7 @@ function useFormState(form, subjectRef) {
 function FormProvider(props) {
   var registry = useContext(Registry);
   var value = useMemo(() => _objectSpread2(_objectSpread2({}, registry), {}, {
-    [props.context.id]: props.context
+    [props.context.formId]: props.context
   }), [registry, props.context]);
   return /*#__PURE__*/jsx(Registry.Provider, {
     value: value,
@@ -28,11 +28,11 @@ function FormProvider(props) {
 }
 function FormStateInput(props) {
   var _props$formId;
-  var form = useRegistry((_props$formId = props.formId) !== null && _props$formId !== void 0 ? _props$formId : props.context.id, props.context);
+  var context = useFormContext((_props$formId = props.formId) !== null && _props$formId !== void 0 ? _props$formId : props.context.formId, props.context);
   return /*#__PURE__*/jsx("input", {
     type: "hidden",
     name: STATE,
-    value: form.getSerializedState(),
+    value: context.getSerializedState(),
     form: props.formId
   });
 }
@@ -64,7 +64,7 @@ function getMetadata(formId, state, subjectRef) {
     descriptionId: "".concat(id, "-description"),
     initialValue: state.initialValue[name],
     value: state.value[name],
-    error: state.error[name],
+    errors: state.error[name],
     get key() {
       return state.key[name];
     },
@@ -86,7 +86,7 @@ function getMetadata(formId, state, subjectRef) {
       }
       return true;
     },
-    get allError() {
+    get allErrors() {
       if (name === '') {
         return state.error;
       }
@@ -112,14 +112,14 @@ function getMetadata(formId, state, subjectRef) {
     get(target, key, receiver) {
       switch (key) {
         case 'key':
-        case 'error':
+        case 'errors':
         case 'initialValue':
         case 'value':
         case 'valid':
         case 'dirty':
-          updateSubjectRef(subjectRef, name, key, 'name');
+          updateSubjectRef(subjectRef, name, key === 'errors' ? 'error' : key, 'name');
           break;
-        case 'allError':
+        case 'allErrors':
           updateSubjectRef(subjectRef, name, 'error', 'prefix');
           break;
         case 'allValid':
@@ -161,19 +161,19 @@ function getFieldMetadata(formId, state, subjectRef) {
     }
   });
 }
-function getFormMetadata(formId, state, subjectRef, form, noValidate) {
+function getFormMetadata(formId, state, subjectRef, context, noValidate) {
   var metadata = getMetadata(formId, state, subjectRef);
   return new Proxy(metadata, {
     get(target, key, receiver) {
       switch (key) {
         case 'context':
-          return form;
+          return context;
         case 'status':
           return state.submissionStatus;
         case 'onSubmit':
           return event => {
             var submitEvent = event.nativeEvent;
-            form.submit(submitEvent);
+            context.submit(submitEvent);
             if (submitEvent.defaultPrevented) {
               event.preventDefault();
             }
@@ -186,4 +186,4 @@ function getFormMetadata(formId, state, subjectRef, form, noValidate) {
   });
 }
 
-export { FormProvider, FormStateInput, Registry, getFieldMetadata, getFormMetadata, getMetadata, updateSubjectRef, useFormState, useRegistry, useSubjectRef };
+export { FormProvider, FormStateInput, Registry, getFieldMetadata, getFormMetadata, getMetadata, updateSubjectRef, useFormContext, useFormState, useSubjectRef };

package/helpers.d.ts

@@ -2,12 +2,12 @@
 import { type Intent } from '@conform-to/dom';
 import type { FormMetadata, FieldMetadata, Metadata, Pretty, Primitive } from './context';
 type FormControlProps = {
+    key: string | undefined;
     id: string;
     name: string;
     form: string;
     required?: boolean;
     autoFocus?: boolean;
-    tabIndex?: number;
     'aria-describedby'?: string;
     'aria-invalid'?: boolean;
 };
@@ -119,16 +119,7 @@ export declare function getFieldsetProps<Schema extends Record<string, any> | un
  * 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): {
-    '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>;
-    key: string | undefined;
-    required: true | undefined;
-    autoFocus: true | undefined;
-};
+export declare function getFormControlProps<Schema, Error>(metadata: FieldMetadata<Schema, Error, 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`
@@ -219,7 +210,7 @@ export declare function getCollectionProps<Schema extends Array<string | boolean
      */
     value?: boolean;
 }>): Array<InputProps & Pick<Required<InputProps>, 'type' | 'value'>>;
-export declare function getControlButtonProps(formId: string, intents: Array<Intent>): {
+export declare function getControlButtonProps(formId: string, intent: Intent): {
     name: string;
     value: string;
     form: string;

package/helpers.js

@@ -217,10 +217,10 @@ function getCollectionProps(metadata, options) {
     }));
   });
 }
-function getControlButtonProps(formId, intents) {
+function getControlButtonProps(formId, intent) {
   return {
     name: dom.INTENT,
-    value: dom.serializeIntents(intents),
+    value: dom.serializeIntent(intent),
     form: formId,
     formNoValidate: true
   };

package/helpers.mjs

@@ -1,5 +1,5 @@
 import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
-import { INTENT, serializeIntents } from '@conform-to/dom';
+import { INTENT, serializeIntent } from '@conform-to/dom';
 
 /**
  * Cleanup `undefined` from the result.
@@ -213,10 +213,10 @@ function getCollectionProps(metadata, options) {
     }));
   });
 }
-function getControlButtonProps(formId, intents) {
+function getControlButtonProps(formId, intent) {
   return {
     name: INTENT,
-    value: serializeIntents(intents),
+    value: serializeIntent(intent),
     form: formId,
     formNoValidate: true
   };

package/hooks.js

@@ -30,44 +30,44 @@ function useNoValidate() {
 }
 function useForm(options) {
   var formId = useFormId(options.id);
-  var initializeContext = () => dom.createForm(formId, options);
-  var [form, setForm] = react.useState(initializeContext);
+  var initializeContext = () => dom.createFormContext(formId, options);
+  var [context$1, setFormContext] = react.useState(initializeContext);
 
   // If id changes, reinitialize the form immediately
-  if (formId !== form.id) {
-    setForm(initializeContext);
+  if (formId !== context$1.formId) {
+    setFormContext(initializeContext);
   }
   var optionsRef = react.useRef(options);
   useSafeLayoutEffect(() => {
-    document.addEventListener('input', form.input);
-    document.addEventListener('focusout', form.blur);
-    document.addEventListener('reset', form.reset);
+    document.addEventListener('input', context$1.input);
+    document.addEventListener('focusout', context$1.blur);
+    document.addEventListener('reset', context$1.reset);
     return () => {
-      document.removeEventListener('input', form.input);
-      document.removeEventListener('focusout', form.blur);
-      document.removeEventListener('reset', form.reset);
+      document.removeEventListener('input', context$1.input);
+      document.removeEventListener('focusout', context$1.blur);
+      document.removeEventListener('reset', context$1.reset);
     };
-  }, [form]);
+  }, [context$1]);
   useSafeLayoutEffect(() => {
     if (options.lastResult === optionsRef.current.lastResult) {
       // If there is no change, do nothing
       return;
     }
     if (options.lastResult) {
-      form.report(options.lastResult);
+      context$1.report(options.lastResult);
     } else {
       var _document$forms$named;
-      (_document$forms$named = document.forms.namedItem(form.id)) === null || _document$forms$named === void 0 ? void 0 : _document$forms$named.reset();
+      (_document$forms$named = document.forms.namedItem(context$1.formId)) === null || _document$forms$named === void 0 || _document$forms$named.reset();
     }
-  }, [form, options.lastResult]);
+  }, [context$1, options.lastResult]);
   useSafeLayoutEffect(() => {
     optionsRef.current = options;
-    form.update(options);
+    context$1.update(options);
   });
   var subjectRef = context.useSubjectRef();
-  var state = context.useFormState(form, subjectRef);
+  var state = context.useFormState(context$1, subjectRef);
   var noValidate = useNoValidate(options.defaultNoValidate);
-  var meta = context.getFormMetadata(formId, state, subjectRef, form, noValidate);
+  var meta = context.getFormMetadata(formId, state, subjectRef, context$1, noValidate);
   return {
     meta,
     fields: meta.getFieldset()
@@ -75,14 +75,14 @@ function useForm(options) {
 }
 function useFormMetadata(options) {
   var subjectRef = context.useSubjectRef();
-  var form = context.useRegistry(options.formId);
-  var state = context.useFormState(form, subjectRef);
+  var context$1 = context.useFormContext(options.formId);
+  var state = context.useFormState(context$1, subjectRef);
   var noValidate = useNoValidate(options.defaultNoValidate);
-  return context.getFormMetadata(options.formId, state, subjectRef, form, noValidate);
+  return context.getFormMetadata(options.formId, state, subjectRef, context$1, noValidate);
 }
 function useField(options) {
   var subjectRef = context.useSubjectRef();
-  var context$1 = context.useRegistry(options.formId);
+  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);

package/hooks.mjs

@@ -1,6 +1,6 @@
-import { createForm } from '@conform-to/dom';
+import { createFormContext } from '@conform-to/dom';
 import { useState, useRef, useEffect, useLayoutEffect, useId } from 'react';
-import { useSubjectRef, useFormState, getFormMetadata, useRegistry, getFieldMetadata } from './context.mjs';
+import { useSubjectRef, useFormState, getFormMetadata, useFormContext, getFieldMetadata } from './context.mjs';
 
 /**
  * useLayoutEffect is client-only.
@@ -26,44 +26,44 @@ function useNoValidate() {
 }
 function useForm(options) {
   var formId = useFormId(options.id);
-  var initializeContext = () => createForm(formId, options);
-  var [form, setForm] = useState(initializeContext);
+  var initializeContext = () => createFormContext(formId, options);
+  var [context, setFormContext] = useState(initializeContext);
 
   // If id changes, reinitialize the form immediately
-  if (formId !== form.id) {
-    setForm(initializeContext);
+  if (formId !== context.formId) {
+    setFormContext(initializeContext);
   }
   var optionsRef = useRef(options);
   useSafeLayoutEffect(() => {
-    document.addEventListener('input', form.input);
-    document.addEventListener('focusout', form.blur);
-    document.addEventListener('reset', form.reset);
+    document.addEventListener('input', context.input);
+    document.addEventListener('focusout', context.blur);
+    document.addEventListener('reset', context.reset);
     return () => {
-      document.removeEventListener('input', form.input);
-      document.removeEventListener('focusout', form.blur);
-      document.removeEventListener('reset', form.reset);
+      document.removeEventListener('input', context.input);
+      document.removeEventListener('focusout', context.blur);
+      document.removeEventListener('reset', context.reset);
     };
-  }, [form]);
+  }, [context]);
   useSafeLayoutEffect(() => {
     if (options.lastResult === optionsRef.current.lastResult) {
       // If there is no change, do nothing
       return;
     }
     if (options.lastResult) {
-      form.report(options.lastResult);
+      context.report(options.lastResult);
     } else {
       var _document$forms$named;
-      (_document$forms$named = document.forms.namedItem(form.id)) === null || _document$forms$named === void 0 ? void 0 : _document$forms$named.reset();
+      (_document$forms$named = document.forms.namedItem(context.formId)) === null || _document$forms$named === void 0 || _document$forms$named.reset();
     }
-  }, [form, options.lastResult]);
+  }, [context, options.lastResult]);
   useSafeLayoutEffect(() => {
     optionsRef.current = options;
-    form.update(options);
+    context.update(options);
   });
   var subjectRef = useSubjectRef();
-  var state = useFormState(form, subjectRef);
+  var state = useFormState(context, subjectRef);
   var noValidate = useNoValidate(options.defaultNoValidate);
-  var meta = getFormMetadata(formId, state, subjectRef, form, noValidate);
+  var meta = getFormMetadata(formId, state, subjectRef, context, noValidate);
   return {
     meta,
     fields: meta.getFieldset()
@@ -71,14 +71,14 @@ function useForm(options) {
 }
 function useFormMetadata(options) {
   var subjectRef = useSubjectRef();
-  var form = useRegistry(options.formId);
-  var state = useFormState(form, subjectRef);
+  var context = useFormContext(options.formId);
+  var state = useFormState(context, subjectRef);
   var noValidate = useNoValidate(options.defaultNoValidate);
-  return getFormMetadata(options.formId, state, subjectRef, form, noValidate);
+  return getFormMetadata(options.formId, state, subjectRef, context, noValidate);
 }
 function useField(options) {
   var subjectRef = useSubjectRef();
-  var context = useRegistry(options.formId);
+  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);

package/integrations.js

@@ -29,7 +29,7 @@ function getEventTarget(formId, name) {
   var input = document.createElement('input');
   input.type = 'hidden';
   input.name = name;
-  form === null || form === void 0 ? void 0 : form.appendChild(input);
+  form === null || form === void 0 || form.appendChild(input);
   return input;
 }
 function useInputControl(metadata, options) {
@@ -67,7 +67,7 @@ function useInputControl(metadata, options) {
         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 ? void 0 : _optionsRef$current$o.call(_optionsRef$current, event);
+            (_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;
         }

package/integrations.mjs

@@ -25,7 +25,7 @@ function getEventTarget(formId, name) {
   var input = document.createElement('input');
   input.type = 'hidden';
   input.name = name;
-  form === null || form === void 0 ? void 0 : form.appendChild(input);
+  form === null || form === void 0 || form.appendChild(input);
   return input;
 }
 function useInputControl(metadata, options) {
@@ -63,7 +63,7 @@ function useInputControl(metadata, options) {
         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 ? void 0 : _optionsRef$current$o.call(_optionsRef$current, event);
+            (_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;
         }

package/package.json

@@ -3,7 +3,7 @@
 	"description": "Conform view adapter for react",
 	"homepage": "https://conform.guide",
 	"license": "MIT",
-	"version": "1.0.0-pre.2",
+	"version": "1.0.0-pre.4",
 	"main": "index.js",
 	"module": "index.mjs",
 	"types": "index.d.ts",
@@ -30,7 +30,11 @@
 		"url": "https://github.com/edmundhung/conform/issues"
 	},
 	"dependencies": {
-		"@conform-to/dom": "1.0.0-pre.2"
+		"@conform-to/dom": "1.0.0-pre.4"
+	},
+	"devDependencies": {
+		"@types/react": "^18.2.43",
+		"react": "^18.2.0"
 	},
 	"peerDependencies": {
 		"react": ">=18"