@conform-to/react 1.0.6 → 1.1.0

package/README

@@ -8,7 +8,7 @@
  ╚══════╝  ╚═════╝  ╚═╝  ╚══╝ ╚═╝        ╚═════╝  ╚═╝   ╚═╝ ╚═╝   ╚═╝
 
 
-Version 1.0.6 / License MIT / Copyright (c) 2024 Edmund Hung
+Version 1.1.0 / 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

@@ -53,10 +53,11 @@ export declare function FormStateInput(props: {
     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, FormError, FormSchema extends Record<string, any>>(formId: FormId<FormSchema, FormError>, state: FormState<FormError>, subjectRef: MutableRefObject<SubscriptionSubject>, name?: FieldName<Schema, FormSchema, FormError>): Metadata<Schema, FormSchema, FormError>;
-export declare function getFieldMetadata<Schema, FormSchema extends Record<string, any>, FormError>(formId: FormId<FormSchema, FormError>, state: FormState<FormError>, subjectRef: MutableRefObject<SubscriptionSubject>, prefix?: string, key?: string | number): FieldMetadata<Schema, FormSchema, FormError>;
-export declare function getFormMetadata<Schema extends Record<string, any>, FormError = string[], FormValue = Schema>(formId: FormId<Schema, FormError>, state: FormState<FormError>, subjectRef: MutableRefObject<SubscriptionSubject>, context: FormContext<Schema, FormError, FormValue>, noValidate: boolean): FormMetadata<Schema, FormError>;
+export declare function updateSubjectRef(ref: MutableRefObject<SubscriptionSubject>, subject: 'status' | 'formId'): void;
+export declare function updateSubjectRef(ref: MutableRefObject<SubscriptionSubject>, subject: Exclude<keyof SubscriptionSubject, 'status' | 'formId'>, scope: keyof SubscriptionScope, name: string): void;
+export declare function getMetadata<Schema, FormError, FormSchema extends Record<string, any>>(context: FormContext<FormSchema, FormError, any>, subjectRef: MutableRefObject<SubscriptionSubject>, stateSnapshot: FormState<FormError>, name?: FieldName<Schema, FormSchema, FormError>): Metadata<Schema, FormSchema, FormError>;
+export declare function getFieldMetadata<Schema, FormSchema extends Record<string, any>, FormError>(context: FormContext<FormSchema, FormError, any>, subjectRef: MutableRefObject<SubscriptionSubject>, stateSnapshot: FormState<FormError>, prefix?: string, key?: string | number): FieldMetadata<Schema, FormSchema, FormError>;
+export declare function getFormMetadata<Schema extends Record<string, any>, FormError = string[], FormValue = Schema>(context: FormContext<Schema, FormError, FormValue>, subjectRef: MutableRefObject<SubscriptionSubject>, stateSnapshot: FormState<FormError>, noValidate: boolean): FormMetadata<Schema, FormError>;
 export type FormOptions<Schema extends Record<string, any> = any, FormError = string[], FormValue = Schema> = BaseFormOptions<Schema, FormError, FormValue> & {
     /**
      * A function to be called before the form is submitted.

package/context.js

@@ -17,7 +17,7 @@ function getWrappedFormContext(context) {
 }
 function useFormContext(formId) {
   var contexts = react.useContext(Form);
-  var form = formId ? contexts.find(context => context.formId === formId) : contexts[0];
+  var form = formId ? contexts.find(context => formId === context.getFormId()) : contexts[0];
   if (!form) {
     throw new Error('Form context is not available');
   }
@@ -56,19 +56,20 @@ function useSubjectRef() {
   subjectRef.current = initialSubject;
   return subjectRef;
 }
-function updateSubjectRef(ref, name, subject, scope) {
-  if (subject === 'status') {
+function updateSubjectRef(ref, subject, scope, name) {
+  if (subject === 'status' || subject === 'formId') {
     ref.current[subject] = true;
-  } else {
+  } else if (typeof scope !== 'undefined' && typeof name !== 'undefined') {
     var _ref$current$subject$, _ref$current$subject;
     ref.current[subject] = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, ref.current[subject]), {}, {
       [scope]: ((_ref$current$subject$ = (_ref$current$subject = ref.current[subject]) === null || _ref$current$subject === void 0 ? void 0 : _ref$current$subject[scope]) !== null && _ref$current$subject$ !== void 0 ? _ref$current$subject$ : []).concat(name)
     });
   }
 }
-function getMetadata(formId, state, subjectRef) {
+function getMetadata(context, subjectRef, stateSnapshot) {
   var name = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
-  var id = name ? "".concat(formId, "-").concat(name) : formId;
+  var id = name ? "".concat(context.getFormId(), "-").concat(name) : context.getFormId();
+  var state = context.getState();
   return new Proxy({
     id,
     name,
@@ -108,7 +109,7 @@ function getMetadata(formId, state, subjectRef) {
       return () => new Proxy({}, {
         get(target, key, receiver) {
           if (typeof key === 'string') {
-            return getFieldMetadata(formId, state, subjectRef, name, key);
+            return getFieldMetadata(context, subjectRef, stateSnapshot, name, key);
           }
           return Reflect.get(target, key, receiver);
         }
@@ -116,34 +117,48 @@ function getMetadata(formId, state, subjectRef) {
     }
   }, {
     get(target, key, receiver) {
-      switch (key) {
-        case 'key':
-        case 'initialValue':
-        case 'value':
-        case 'valid':
-        case 'dirty':
-          updateSubjectRef(subjectRef, name, key, 'name');
-          break;
-        case 'errors':
-        case 'allErrors':
-          updateSubjectRef(subjectRef, name, 'error', key === 'errors' ? 'name' : 'prefix');
-          break;
+      // We want to minize re-render by identifying whether the field is used in a callback only
+      // but there is no clear way to know if it is accessed during render or not
+      // if the stateSnapshot is not the latest, then it must be accessed in a callback
+      if (state === stateSnapshot) {
+        switch (key) {
+          case 'id':
+          case 'errorId':
+          case 'descriptionId':
+            updateSubjectRef(subjectRef, 'formId');
+            break;
+          case 'key':
+          case 'initialValue':
+          case 'value':
+          case 'valid':
+          case 'dirty':
+            updateSubjectRef(subjectRef, key, 'name', name);
+            break;
+          case 'errors':
+          case 'allErrors':
+            updateSubjectRef(subjectRef, 'error', key === 'errors' ? 'name' : 'prefix', name);
+            break;
+        }
       }
       return Reflect.get(target, key, receiver);
     }
   });
 }
-function getFieldMetadata(formId, state, subjectRef) {
+function getFieldMetadata(context, subjectRef, stateSnapshot) {
   var prefix = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
   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({}, {
     get(_, key, receiver) {
       var _state$constraint$nam;
+      var metadata = getMetadata(context, subjectRef, stateSnapshot, name);
+      var state = context.getState();
       switch (key) {
         case 'formId':
-          return formId;
+          if (state === stateSnapshot) {
+            updateSubjectRef(subjectRef, 'formId');
+          }
+          return context.getFormId();
         case 'required':
         case 'minLength':
         case 'maxLength':
@@ -158,11 +173,13 @@ function getFieldMetadata(formId, state, subjectRef) {
             return () => {
               var _state$initialValue$n;
               var initialValue = (_state$initialValue$n = state.initialValue[name]) !== null && _state$initialValue$n !== void 0 ? _state$initialValue$n : [];
-              updateSubjectRef(subjectRef, name, 'initialValue', 'name');
+              if (state === stateSnapshot) {
+                updateSubjectRef(subjectRef, 'initialValue', 'name', name);
+              }
               if (!Array.isArray(initialValue)) {
                 throw new Error('The initial value at the given name is not a list');
               }
-              return Array(initialValue.length).fill(0).map((_, index) => getFieldMetadata(formId, state, subjectRef, name, index));
+              return Array(initialValue.length).fill(0).map((_, index) => getFieldMetadata(context, subjectRef, stateSnapshot, name, index));
             };
           }
       }
@@ -170,16 +187,20 @@ function getFieldMetadata(formId, state, subjectRef) {
     }
   });
 }
-function getFormMetadata(formId, state, subjectRef, context, noValidate) {
-  var metadata = getMetadata(formId, state, subjectRef);
+function getFormMetadata(context, subjectRef, stateSnapshot, noValidate) {
   return new Proxy({}, {
     get(_, key, receiver) {
+      var metadata = getMetadata(context, subjectRef, stateSnapshot);
+      var state = context.getState();
       switch (key) {
         case 'context':
           return {
             [wrappedSymbol]: context
           };
         case 'status':
+          if (state === stateSnapshot) {
+            updateSubjectRef(subjectRef, 'status');
+          }
           return state.submissionStatus;
         case 'validate':
         case 'update':
@@ -207,11 +228,13 @@ function createFormContext(options) {
     submit(event) {
       var submitEvent = event.nativeEvent;
       var result = context.submit(submitEvent);
-      if (result.submission && result.submission.status !== 'success' && result.submission.error !== null) {
-        event.preventDefault();
+      if (!result.submission || result.submission.status === 'success' || result.submission.error === null) {
+        if (!result.formData.has(dom.INTENT)) {
+          var _onSubmit;
+          (_onSubmit = onSubmit) === null || _onSubmit === void 0 || _onSubmit(event, result);
+        }
       } else {
-        var _onSubmit;
-        (_onSubmit = onSubmit) === null || _onSubmit === void 0 || _onSubmit(event, result);
+        event.preventDefault();
       }
     },
     onUpdate(options) {

package/context.mjs

@@ -1,5 +1,5 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
-import { STATE, formatPaths, getPaths, unstable_createFormContext, isPrefix } from '@conform-to/dom';
+import { STATE, formatPaths, getPaths, unstable_createFormContext, INTENT, isPrefix } from '@conform-to/dom';
 import { useContext, useMemo, createContext, useCallback, useSyncExternalStore, useRef } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
@@ -13,7 +13,7 @@ function getWrappedFormContext(context) {
 }
 function useFormContext(formId) {
   var contexts = useContext(Form);
-  var form = formId ? contexts.find(context => context.formId === formId) : contexts[0];
+  var form = formId ? contexts.find(context => formId === context.getFormId()) : contexts[0];
   if (!form) {
     throw new Error('Form context is not available');
   }
@@ -52,19 +52,20 @@ function useSubjectRef() {
   subjectRef.current = initialSubject;
   return subjectRef;
 }
-function updateSubjectRef(ref, name, subject, scope) {
-  if (subject === 'status') {
+function updateSubjectRef(ref, subject, scope, name) {
+  if (subject === 'status' || subject === 'formId') {
     ref.current[subject] = true;
-  } else {
+  } else if (typeof scope !== 'undefined' && typeof name !== 'undefined') {
     var _ref$current$subject$, _ref$current$subject;
     ref.current[subject] = _objectSpread2(_objectSpread2({}, ref.current[subject]), {}, {
       [scope]: ((_ref$current$subject$ = (_ref$current$subject = ref.current[subject]) === null || _ref$current$subject === void 0 ? void 0 : _ref$current$subject[scope]) !== null && _ref$current$subject$ !== void 0 ? _ref$current$subject$ : []).concat(name)
     });
   }
 }
-function getMetadata(formId, state, subjectRef) {
+function getMetadata(context, subjectRef, stateSnapshot) {
   var name = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
-  var id = name ? "".concat(formId, "-").concat(name) : formId;
+  var id = name ? "".concat(context.getFormId(), "-").concat(name) : context.getFormId();
+  var state = context.getState();
   return new Proxy({
     id,
     name,
@@ -104,7 +105,7 @@ function getMetadata(formId, state, subjectRef) {
       return () => new Proxy({}, {
         get(target, key, receiver) {
           if (typeof key === 'string') {
-            return getFieldMetadata(formId, state, subjectRef, name, key);
+            return getFieldMetadata(context, subjectRef, stateSnapshot, name, key);
           }
           return Reflect.get(target, key, receiver);
         }
@@ -112,34 +113,48 @@ function getMetadata(formId, state, subjectRef) {
     }
   }, {
     get(target, key, receiver) {
-      switch (key) {
-        case 'key':
-        case 'initialValue':
-        case 'value':
-        case 'valid':
-        case 'dirty':
-          updateSubjectRef(subjectRef, name, key, 'name');
-          break;
-        case 'errors':
-        case 'allErrors':
-          updateSubjectRef(subjectRef, name, 'error', key === 'errors' ? 'name' : 'prefix');
-          break;
+      // We want to minize re-render by identifying whether the field is used in a callback only
+      // but there is no clear way to know if it is accessed during render or not
+      // if the stateSnapshot is not the latest, then it must be accessed in a callback
+      if (state === stateSnapshot) {
+        switch (key) {
+          case 'id':
+          case 'errorId':
+          case 'descriptionId':
+            updateSubjectRef(subjectRef, 'formId');
+            break;
+          case 'key':
+          case 'initialValue':
+          case 'value':
+          case 'valid':
+          case 'dirty':
+            updateSubjectRef(subjectRef, key, 'name', name);
+            break;
+          case 'errors':
+          case 'allErrors':
+            updateSubjectRef(subjectRef, 'error', key === 'errors' ? 'name' : 'prefix', name);
+            break;
+        }
       }
       return Reflect.get(target, key, receiver);
     }
   });
 }
-function getFieldMetadata(formId, state, subjectRef) {
+function getFieldMetadata(context, subjectRef, stateSnapshot) {
   var prefix = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
   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({}, {
     get(_, key, receiver) {
       var _state$constraint$nam;
+      var metadata = getMetadata(context, subjectRef, stateSnapshot, name);
+      var state = context.getState();
       switch (key) {
         case 'formId':
-          return formId;
+          if (state === stateSnapshot) {
+            updateSubjectRef(subjectRef, 'formId');
+          }
+          return context.getFormId();
         case 'required':
         case 'minLength':
         case 'maxLength':
@@ -154,11 +169,13 @@ function getFieldMetadata(formId, state, subjectRef) {
             return () => {
               var _state$initialValue$n;
               var initialValue = (_state$initialValue$n = state.initialValue[name]) !== null && _state$initialValue$n !== void 0 ? _state$initialValue$n : [];
-              updateSubjectRef(subjectRef, name, 'initialValue', 'name');
+              if (state === stateSnapshot) {
+                updateSubjectRef(subjectRef, 'initialValue', 'name', name);
+              }
               if (!Array.isArray(initialValue)) {
                 throw new Error('The initial value at the given name is not a list');
               }
-              return Array(initialValue.length).fill(0).map((_, index) => getFieldMetadata(formId, state, subjectRef, name, index));
+              return Array(initialValue.length).fill(0).map((_, index) => getFieldMetadata(context, subjectRef, stateSnapshot, name, index));
             };
           }
       }
@@ -166,16 +183,20 @@ function getFieldMetadata(formId, state, subjectRef) {
     }
   });
 }
-function getFormMetadata(formId, state, subjectRef, context, noValidate) {
-  var metadata = getMetadata(formId, state, subjectRef);
+function getFormMetadata(context, subjectRef, stateSnapshot, noValidate) {
   return new Proxy({}, {
     get(_, key, receiver) {
+      var metadata = getMetadata(context, subjectRef, stateSnapshot);
+      var state = context.getState();
       switch (key) {
         case 'context':
           return {
             [wrappedSymbol]: context
           };
         case 'status':
+          if (state === stateSnapshot) {
+            updateSubjectRef(subjectRef, 'status');
+          }
           return state.submissionStatus;
         case 'validate':
         case 'update':
@@ -203,11 +224,13 @@ function createFormContext(options) {
     submit(event) {
       var submitEvent = event.nativeEvent;
       var result = context.submit(submitEvent);
-      if (result.submission && result.submission.status !== 'success' && result.submission.error !== null) {
-        event.preventDefault();
+      if (!result.submission || result.submission.status === 'success' || result.submission.error === null) {
+        if (!result.formData.has(INTENT)) {
+          var _onSubmit;
+          (_onSubmit = onSubmit) === null || _onSubmit === void 0 || _onSubmit(event, result);
+        }
       } else {
-        var _onSubmit;
-        (_onSubmit = onSubmit) === null || _onSubmit === void 0 || _onSubmit(event, result);
+        event.preventDefault();
       }
     },
     onUpdate(options) {

package/helpers.d.ts

@@ -175,7 +175,7 @@ export declare function getTextareaProps<Schema>(metadata: FieldMetadata<Schema,
  * 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`.
  *
- * @see https://conform.guide/api/react/getTextareaProps
+ * @see https://conform.guide/api/react/getCollectionProps
  * @example
  * ```tsx
  * <fieldset>
@@ -191,7 +191,7 @@ export declare function getTextareaProps<Schema>(metadata: FieldMetadata<Schema,
  * </fieldset>
  * ```
  */
-export declare function getCollectionProps<Schema extends Array<string | boolean> | string | boolean | undefined | unknown>(metadata: FieldMetadata<Schema, any, any>, options: Pretty<FormControlOptions & {
+export declare function getCollectionProps<Schema extends Array<string | boolean> | string | boolean | undefined | unknown, Options extends Pretty<FormControlOptions & {
     /**
      * The input type. Use `checkbox` for multiple selection or `radio` for single selection.
      */
@@ -204,5 +204,5 @@ export declare function getCollectionProps<Schema extends Array<string | boolean
      * Decide whether defaultValue should be returned. Pass `false` if you want to manage the value yourself.
      */
     value?: boolean;
-}>): Array<InputProps & Pick<Required<InputProps>, 'type' | 'value'>>;
+}>>(metadata: FieldMetadata<Schema, any, any>, options: Options): Array<InputProps & Pick<Options, 'type'> & Pick<Required<InputProps>, 'value'>>;
 export {};

package/helpers.js

@@ -179,7 +179,7 @@ function getTextareaProps(metadata) {
  * 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`.
  *
- * @see https://conform.guide/api/react/getTextareaProps
+ * @see https://conform.guide/api/react/getCollectionProps
  * @example
  * ```tsx
  * <fieldset>

package/helpers.mjs

@@ -175,7 +175,7 @@ function getTextareaProps(metadata) {
  * 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`.
  *
- * @see https://conform.guide/api/react/getTextareaProps
+ * @see https://conform.guide/api/react/getCollectionProps
  * @example
  * ```tsx
  * <fieldset>

package/hooks.d.ts

@@ -23,7 +23,7 @@ export declare function useForm<Schema extends Record<string, any>, FormValue =
     FormMetadata<Schema, FormError>,
     ReturnType<FormMetadata<Schema, FormError>['getFieldset']>
 ];
-export declare function useFormMetadata<Schema extends Record<string, any>, FormError = string[]>(formId: FormId<Schema, FormError>, options?: {
+export declare function useFormMetadata<Schema extends Record<string, any>, FormError = string[]>(formId?: FormId<Schema, FormError>, options?: {
     defaultNoValidate?: boolean;
 }): FormMetadata<Schema, FormError>;
 export declare function useField<FieldSchema, FormSchema extends Record<string, unknown> = Record<string, unknown>, FormError = string[]>(name: FieldName<FieldSchema, FormSchema, FormError>, options?: {

package/hooks.js

@@ -40,10 +40,12 @@ function useForm(options) {
     formId
   })));
   useSafeLayoutEffect(() => {
+    var disconnect = context$1.observe();
     document.addEventListener('input', context$1.onInput);
     document.addEventListener('focusout', context$1.onBlur);
     document.addEventListener('reset', context$1.onReset);
     return () => {
+      disconnect();
       document.removeEventListener('input', context$1.onInput);
       document.removeEventListener('focusout', context$1.onBlur);
       document.removeEventListener('reset', context$1.onReset);
@@ -55,26 +57,26 @@ function useForm(options) {
     }));
   });
   var subjectRef = context.useSubjectRef();
-  var state = context.useFormState(context$1, subjectRef);
+  var stateSnapshot = context.useFormState(context$1, subjectRef);
   var noValidate = useNoValidate(options.defaultNoValidate);
-  var form = context.getFormMetadata(formId, state, subjectRef, context$1, noValidate);
+  var form = context.getFormMetadata(context$1, subjectRef, stateSnapshot, noValidate);
   return [form, form.getFieldset()];
 }
 function useFormMetadata(formId) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var subjectRef = context.useSubjectRef();
   var context$1 = context.useFormContext(formId);
-  var state = context.useFormState(context$1, subjectRef);
+  var stateSnapshot = context.useFormState(context$1, subjectRef);
   var noValidate = useNoValidate(options.defaultNoValidate);
-  return context.getFormMetadata(context$1.formId, state, subjectRef, context$1, noValidate);
+  return context.getFormMetadata(context$1, subjectRef, stateSnapshot, noValidate);
 }
 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 field = context.getFieldMetadata(context$1.formId, state, subjectRef, name);
-  var form = context.getFormMetadata(context$1.formId, state, subjectRef, context$1, false);
+  var stateSnapshot = context.useFormState(context$1, subjectRef);
+  var field = context.getFieldMetadata(context$1, subjectRef, stateSnapshot, name);
+  var form = context.getFormMetadata(context$1, subjectRef, stateSnapshot, false);
   return [field, form];
 }
 

package/hooks.mjs

@@ -36,10 +36,12 @@ function useForm(options) {
     formId
   })));
   useSafeLayoutEffect(() => {
+    var disconnect = context.observe();
     document.addEventListener('input', context.onInput);
     document.addEventListener('focusout', context.onBlur);
     document.addEventListener('reset', context.onReset);
     return () => {
+      disconnect();
       document.removeEventListener('input', context.onInput);
       document.removeEventListener('focusout', context.onBlur);
       document.removeEventListener('reset', context.onReset);
@@ -51,26 +53,26 @@ function useForm(options) {
     }));
   });
   var subjectRef = useSubjectRef();
-  var state = useFormState(context, subjectRef);
+  var stateSnapshot = useFormState(context, subjectRef);
   var noValidate = useNoValidate(options.defaultNoValidate);
-  var form = getFormMetadata(formId, state, subjectRef, context, noValidate);
+  var form = getFormMetadata(context, subjectRef, stateSnapshot, noValidate);
   return [form, form.getFieldset()];
 }
 function useFormMetadata(formId) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var subjectRef = useSubjectRef();
   var context = useFormContext(formId);
-  var state = useFormState(context, subjectRef);
+  var stateSnapshot = useFormState(context, subjectRef);
   var noValidate = useNoValidate(options.defaultNoValidate);
-  return getFormMetadata(context.formId, state, subjectRef, context, noValidate);
+  return getFormMetadata(context, subjectRef, stateSnapshot, noValidate);
 }
 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 field = getFieldMetadata(context.formId, state, subjectRef, name);
-  var form = getFormMetadata(context.formId, state, subjectRef, context, false);
+  var stateSnapshot = useFormState(context, subjectRef);
+  var field = getFieldMetadata(context, subjectRef, stateSnapshot, name);
+  var form = getFormMetadata(context, subjectRef, stateSnapshot, false);
   return [field, form];
 }
 

package/package.json

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