@conform-to/react 1.10.1 → 1.12.0

package/README.md

@@ -7,7 +7,7 @@
  ╚══════╝  ╚═════╝  ╚═╝  ╚══╝ ╚═╝        ╚═════╝  ╚═╝   ╚═╝ ╚═╝   ╚═╝
 ```
 
-Version 1.10.1 / License MIT / Copyright (c) 2025 Edmund Hung
+Version 1.12.0 / License MIT / Copyright (c) 2025 Edmund Hung
 
 Progressively enhance HTML forms with React. Build resilient, type-safe forms with no hassle using web standards.
 

package/dist/future/hooks.d.ts

@@ -1,24 +1,11 @@
-import { type Serialize, type SubmissionResult, serialize } from '@conform-to/dom/future';
+import { type Serialize, type SubmissionResult, createGlobalFormsObserver } from '@conform-to/dom/future';
 import { useEffect } from 'react';
-import type { FormContext, DefaultMetadata, IntentDispatcher, FormMetadata, Fieldset, FormOptions, FieldName, FieldMetadata, Control, Selector, UseFormDataOptions, ValidateHandler, ErrorHandler, SubmitHandler, FormState, FormRef } from './types';
+import type { FormContext, IntentDispatcher, FormMetadata, Fieldset, GlobalFormOptions, FormOptions, FieldName, FieldMetadata, Control, Selector, UseFormDataOptions, ValidateHandler, ErrorHandler, SubmitHandler, FormState, FormRef, BaseErrorShape, DefaultErrorShape } from './types';
 export declare const INITIAL_KEY = "INITIAL_KEY";
-export declare const FormConfig: import("react").Context<{
-    intentName: string;
-    observer: {
-        onFieldUpdate(callback: (event: {
-            type: "input" | "reset" | "mutation";
-            target: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-        }) => void): () => void;
-        onFormUpdate(callback: (event: {
-            type: "submit" | "input" | "reset" | "mutation";
-            target: HTMLFormElement;
-            submitter?: HTMLInputElement | HTMLButtonElement | null;
-        }) => void): () => void;
-        dispose(): void;
-    };
-    serialize: typeof serialize;
+export declare const GlobalFormOptionsContext: import("react").Context<GlobalFormOptions & {
+    observer: ReturnType<typeof createGlobalFormsObserver>;
 }>;
-export declare const Form: import("react").Context<FormContext<string>[]>;
+export declare const FormContextContext: import("react").Context<FormContext<string>[]>;
 /**
  * Provides form context to child components.
  * Stacks contexts to support nested forms, with latest context taking priority.
@@ -27,7 +14,10 @@ export declare function FormProvider(props: {
     context: FormContext;
     children: React.ReactNode;
 }): React.ReactElement;
-export declare function useFormContext(formId?: string): FormContext<any>;
+export declare function FormOptionsProvider(props: Partial<GlobalFormOptions> & {
+    children: React.ReactNode;
+}): React.ReactElement;
+export declare function useFormContext(formId?: string): FormContext;
 /**
  * Core form hook that manages form state, validation, and submission.
  * Handles both sync and async validation, intent dispatching, and DOM updates.
@@ -65,9 +55,9 @@ export declare function useConform<ErrorShape, Value = undefined>(formRef: FormR
  * );
  * ```
  */
-export declare function useForm<FormShape extends Record<string, any> = Record<string, any>, ErrorShape = string, Value = undefined>(options: FormOptions<FormShape, ErrorShape, Value>): {
+export declare function useForm<FormShape extends Record<string, any> = Record<string, any>, ErrorShape extends BaseErrorShape = DefaultErrorShape, Value = undefined>(options: FormOptions<FormShape, ErrorShape, Value>): {
     form: FormMetadata<ErrorShape>;
-    fields: Fieldset<FormShape, DefaultMetadata<ErrorShape>>;
+    fields: Fieldset<FormShape, ErrorShape>;
     intent: IntentDispatcher;
 };
 /**
@@ -88,9 +78,9 @@ export declare function useForm<FormShape extends Record<string, any> = Record<s
  * }
  * ```
  */
-export declare function useFormMetadata<ErrorShape = string[]>(options?: {
+export declare function useFormMetadata(options?: {
     formId?: string;
-}): FormMetadata<ErrorShape>;
+}): FormMetadata;
 /**
  * A React hook that provides access to a specific field's metadata and state.
  * Requires `FormProvider` context when used in child components.

package/dist/future/hooks.js

@@ -12,30 +12,44 @@ var intent = require('./intent.js');
 var dom = require('./dom.js');
 var jsxRuntime = require('react/jsx-runtime');
 
+var _excluded = ["children"];
 var INITIAL_KEY = 'INITIAL_KEY';
-var FormConfig = /*#__PURE__*/react.createContext({
+var GlobalFormOptionsContext = /*#__PURE__*/react.createContext({
   intentName: future.DEFAULT_INTENT_NAME,
   observer: future.createGlobalFormsObserver(),
-  serialize: future.serialize
+  serialize: future.serialize,
+  shouldValidate: 'onSubmit'
 });
-var Form = /*#__PURE__*/react.createContext([]);
+var FormContextContext = /*#__PURE__*/react.createContext([]);
 
 /**
  * Provides form context to child components.
  * Stacks contexts to support nested forms, with latest context taking priority.
  */
 function FormProvider(props) {
-  var stack = react.useContext(Form);
+  var stack = react.useContext(FormContextContext);
   var value = react.useMemo(
   // Put the latest form context first to ensure that to be the first one found
   () => [props.context].concat(stack), [stack, props.context]);
-  return /*#__PURE__*/jsxRuntime.jsx(Form.Provider, {
+  return /*#__PURE__*/jsxRuntime.jsx(FormContextContext.Provider, {
     value: value,
     children: props.children
   });
 }
+function FormOptionsProvider(props) {
+  var {
+      children
+    } = props,
+    providedOptions = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
+  var defaultOptions = react.useContext(GlobalFormOptionsContext);
+  var options = react.useMemo(() => _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, defaultOptions), providedOptions), [defaultOptions, providedOptions]);
+  return /*#__PURE__*/jsxRuntime.jsx(GlobalFormOptionsContext.Provider, {
+    value: options,
+    children: children
+  });
+}
 function useFormContext(formId) {
-  var contexts = react.useContext(Form);
+  var contexts = react.useContext(FormContextContext);
   var context = formId ? contexts.find(context => formId === context.formId) : contexts[0];
   if (!context) {
     throw new Error('No form context found; Have you render a <FormProvider /> with the corresponding form context?');
@@ -72,11 +86,11 @@ function useConform(formRef, options) {
   var lastIntentedValueRef = react.useRef();
   var lastAsyncResultRef = react.useRef(null);
   var abortControllerRef = react.useRef(null);
-  var handleSubmission = react.useCallback((result, options) => {
+  var handleSubmission = react.useCallback((type, result) => {
     var _optionsRef$current$o, _optionsRef$current;
     var intent$1 = result.submission.intent ? intent.deserializeIntent(result.submission.intent) : null;
     setState(state$1 => state.updateState(state$1, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, result), {}, {
-      type: options.type,
+      type,
       intent: intent$1,
       ctx: {
         handlers: intent.actionHandlers,
@@ -105,9 +119,7 @@ function useConform(formRef, options) {
   react.useEffect(() => {
     // To avoid re-applying the same result twice
     if (lastResult && lastResult !== lastResultRef.current) {
-      handleSubmission(lastResult, {
-        type: 'server'
-      });
+      handleSubmission('server', lastResult);
       lastResultRef.current = lastResult;
     }
   }, [lastResult, handleSubmission]);
@@ -168,7 +180,7 @@ function useConform(formRef, options) {
       // Patch missing fields in the submission object
       for (var element of formElement.elements) {
         if (future.isFieldElement(element) && element.name) {
-          util.appendUniqueItem(submission.fields, element.name);
+          submission.fields = util.appendUniqueItem(submission.fields, element.name);
         }
       }
 
@@ -195,7 +207,8 @@ function useConform(formRef, options) {
         intent: submission.intent ? intent.deserializeIntent(submission.intent) : null,
         formElement,
         submitter: submitEvent.submitter,
-        formData
+        formData,
+        schemaValue: undefined
       }) : {
         error: null
       };
@@ -218,9 +231,7 @@ function useConform(formRef, options) {
           // There is no need to flush the update in this case
           if (!abortController.signal.aborted) {
             submissionResult.error = error;
-            handleSubmission(submissionResult, {
-              type: 'server'
-            });
+            handleSubmission('server', submissionResult);
 
             // If the form is meant to be submitted and there is no error
             if (error === null && !submission.intent) {
@@ -238,9 +249,7 @@ function useConform(formRef, options) {
           }
         });
       }
-      handleSubmission(submissionResult, {
-        type: 'client'
-      });
+      handleSubmission('client', submissionResult);
       if (
       // If client validation happens
       (typeof syncResult !== 'undefined' || typeof asyncResult !== 'undefined') && (
@@ -268,9 +277,7 @@ function useConform(formRef, options) {
             var _submissionResult = future.report(result.submission, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, options), {}, {
               keepFiles: true
             }));
-            handleSubmission(_submissionResult, {
-              type: 'server'
-            });
+            handleSubmission('server', _submissionResult);
           }
         }
       });
@@ -310,13 +317,14 @@ function useForm(options) {
     defaultValue,
     constraint
   } = options;
-  var config = react.useContext(FormConfig);
+  var globalOptions = react.useContext(GlobalFormOptionsContext);
   var optionsRef = useLatest(options);
+  var globalOptionsRef = useLatest(globalOptions);
   var fallbackId = react.useId();
   var formId = id !== null && id !== void 0 ? id : "form-".concat(fallbackId);
   var [state$1, handleSubmit] = useConform(formId, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, options), {}, {
-    serialize: config.serialize,
-    intentName: config.intentName,
+    serialize: globalOptions.serialize,
+    intentName: globalOptions.intentName,
     onError: (_optionsRef$current$o4 = optionsRef.current.onError) !== null && _optionsRef$current$o4 !== void 0 ? _optionsRef$current$o4 : dom.focusFirstInvalidField,
     onValidate(ctx) {
       var _options$onValidate, _options$onValidate2;
@@ -339,6 +347,7 @@ function useForm(options) {
         if (resolvedResult.error) {
           ctx.error = resolvedResult.error;
         }
+        ctx.schemaValue = resolvedResult.value;
         var validateResult = util.resolveValidateResult(options.onValidate(ctx));
         if (validateResult.syncResult) {
           var _validateResult$syncR, _validateResult$syncR2;
@@ -369,7 +378,7 @@ function useForm(options) {
     constraint: constraint !== null && constraint !== void 0 ? constraint : null,
     handleSubmit: handleSubmit,
     handleInput(event) {
-      var _optionsRef$current$o5, _optionsRef$current4;
+      var _optionsRef$current$o5, _optionsRef$current4, _globalOptionsRef$cur;
       if (!future.isFieldElement(event.target) || event.target.name === '' || event.target.form === null || event.target.form !== dom.getFormElement(formId)) {
         return;
       }
@@ -381,15 +390,15 @@ function useForm(options) {
         return;
       }
       var {
-        shouldValidate = 'onSubmit',
-        shouldRevalidate = shouldValidate
+        shouldValidate = globalOptionsRef.current.shouldValidate,
+        shouldRevalidate = (_globalOptionsRef$cur = globalOptionsRef.current.shouldRevalidate) !== null && _globalOptionsRef$cur !== void 0 ? _globalOptionsRef$cur : shouldValidate
       } = optionsRef.current;
       if (state.isTouched(state$1, event.target.name) ? shouldRevalidate === 'onInput' : shouldValidate === 'onInput') {
         intent.validate(event.target.name);
       }
     },
     handleBlur(event) {
-      var _optionsRef$current$o6, _optionsRef$current5;
+      var _optionsRef$current$o6, _optionsRef$current5, _globalOptionsRef$cur2;
       if (!future.isFieldElement(event.target) || event.target.name === '' || event.target.form === null || event.target.form !== dom.getFormElement(formId)) {
         return;
       }
@@ -401,20 +410,22 @@ function useForm(options) {
         return;
       }
       var {
-        shouldValidate = 'onSubmit',
-        shouldRevalidate = shouldValidate
+        shouldValidate = globalOptionsRef.current.shouldValidate,
+        shouldRevalidate = (_globalOptionsRef$cur2 = globalOptionsRef.current.shouldRevalidate) !== null && _globalOptionsRef$cur2 !== void 0 ? _globalOptionsRef$cur2 : shouldValidate
       } = optionsRef.current;
       if (state.isTouched(state$1, event.target.name) ? shouldRevalidate === 'onBlur' : shouldValidate === 'onBlur') {
         intent.validate(event.target.name);
       }
     }
-  }), [formId, state$1, defaultValue, constraint, handleSubmit, intent, optionsRef]);
+  }), [formId, state$1, defaultValue, constraint, handleSubmit, intent, optionsRef, globalOptionsRef]);
   var form = react.useMemo(() => state.getFormMetadata(context, {
-    serialize: config.serialize
-  }), [context, config.serialize]);
+    serialize: globalOptions.serialize,
+    customize: globalOptions.defineCustomMetadata
+  }), [context, globalOptions.serialize, globalOptions.defineCustomMetadata]);
   var fields = react.useMemo(() => state.getFieldset(context, {
-    serialize: config.serialize
-  }), [context, config.serialize]);
+    serialize: globalOptions.serialize,
+    customize: globalOptions.defineCustomMetadata
+  }), [context, globalOptions.serialize, globalOptions.defineCustomMetadata]);
   return {
     form,
     fields,
@@ -442,11 +453,12 @@ function useForm(options) {
  */
 function useFormMetadata() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var config = react.useContext(FormConfig);
+  var globalOptions = react.useContext(GlobalFormOptionsContext);
   var context = useFormContext(options.formId);
   var formMetadata = react.useMemo(() => state.getFormMetadata(context, {
-    serialize: config.serialize
-  }), [context, config.serialize]);
+    serialize: globalOptions.serialize,
+    customize: globalOptions.defineCustomMetadata
+  }), [context, globalOptions.serialize, globalOptions.defineCustomMetadata]);
   return formMetadata;
 }
 
@@ -472,12 +484,13 @@ function useFormMetadata() {
  */
 function useField(name) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var config = react.useContext(FormConfig);
+  var globalOptions = react.useContext(GlobalFormOptionsContext);
   var context = useFormContext(options.formId);
   var field = react.useMemo(() => state.getField(context, {
     name,
-    serialize: config.serialize
-  }), [context, name, config.serialize]);
+    serialize: globalOptions.serialize,
+    customize: globalOptions.defineCustomMetadata
+  }), [context, name, globalOptions.serialize, globalOptions.defineCustomMetadata]);
   return field;
 }
 
@@ -502,8 +515,8 @@ function useField(name) {
  * ```
  */
 function useIntent(formRef) {
-  var config = react.useContext(FormConfig);
-  return react.useMemo(() => dom.createIntentDispatcher(() => dom.getFormElement(formRef), config.intentName), [formRef, config.intentName]);
+  var globalOptions = react.useContext(GlobalFormOptionsContext);
+  return react.useMemo(() => dom.createIntentDispatcher(() => dom.getFormElement(formRef), globalOptions.intentName), [formRef, globalOptions.intentName]);
 }
 
 /**
@@ -519,7 +532,7 @@ function useIntent(formRef) {
 function useControl(options) {
   var {
     observer
-  } = react.useContext(FormConfig);
+  } = react.useContext(GlobalFormOptionsContext);
   var inputRef = react.useRef(null);
   var eventDispatched = react.useRef({});
   var defaultSnapshot = dom.createDefaultSnapshot(options === null || options === void 0 ? void 0 : options.defaultValue, options === null || options === void 0 ? void 0 : options.defaultChecked, options === null || options === void 0 ? void 0 : options.value);
@@ -691,7 +704,7 @@ function useControl(options) {
 function useFormData(formRef, select, options) {
   var {
     observer
-  } = react.useContext(FormConfig);
+  } = react.useContext(GlobalFormOptionsContext);
   var valueRef = react.useRef();
   var formDataRef = react.useRef(null);
   var value = react.useSyncExternalStore(react.useCallback(callback => {
@@ -744,9 +757,10 @@ function useLatest(value) {
   return ref;
 }
 
-exports.Form = Form;
-exports.FormConfig = FormConfig;
+exports.FormContextContext = FormContextContext;
+exports.FormOptionsProvider = FormOptionsProvider;
 exports.FormProvider = FormProvider;
+exports.GlobalFormOptionsContext = GlobalFormOptionsContext;
 exports.INITIAL_KEY = INITIAL_KEY;
 exports.useConform = useConform;
 exports.useControl = useControl;

package/dist/future/hooks.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.mjs';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.mjs';
 import { DEFAULT_INTENT_NAME, createGlobalFormsObserver, serialize, isFieldElement, deepEqual, change, focus, blur, getFormData, parseSubmission, report, createSubmitEvent } from '@conform-to/dom/future';
 import { createContext, useContext, useMemo, useId, useRef, useEffect, useSyncExternalStore, useCallback, useState, useLayoutEffect } from 'react';
 import { resolveStandardSchemaResult, resolveValidateResult, appendUniqueItem } from './util.mjs';
@@ -8,30 +8,44 @@ import { deserializeIntent, actionHandlers, applyIntent } from './intent.mjs';
 import { focusFirstInvalidField, getFormElement, createIntentDispatcher, createDefaultSnapshot, getRadioGroupValue, getCheckboxGroupValue, getInputSnapshot, makeInputFocusable, initializeField, updateFormValue, getSubmitEvent } from './dom.mjs';
 import { jsx } from 'react/jsx-runtime';
 
+var _excluded = ["children"];
 var INITIAL_KEY = 'INITIAL_KEY';
-var FormConfig = /*#__PURE__*/createContext({
+var GlobalFormOptionsContext = /*#__PURE__*/createContext({
   intentName: DEFAULT_INTENT_NAME,
   observer: createGlobalFormsObserver(),
-  serialize
+  serialize,
+  shouldValidate: 'onSubmit'
 });
-var Form = /*#__PURE__*/createContext([]);
+var FormContextContext = /*#__PURE__*/createContext([]);
 
 /**
  * Provides form context to child components.
  * Stacks contexts to support nested forms, with latest context taking priority.
  */
 function FormProvider(props) {
-  var stack = useContext(Form);
+  var stack = useContext(FormContextContext);
   var value = useMemo(
   // Put the latest form context first to ensure that to be the first one found
   () => [props.context].concat(stack), [stack, props.context]);
-  return /*#__PURE__*/jsx(Form.Provider, {
+  return /*#__PURE__*/jsx(FormContextContext.Provider, {
     value: value,
     children: props.children
   });
 }
+function FormOptionsProvider(props) {
+  var {
+      children
+    } = props,
+    providedOptions = _objectWithoutProperties(props, _excluded);
+  var defaultOptions = useContext(GlobalFormOptionsContext);
+  var options = useMemo(() => _objectSpread2(_objectSpread2({}, defaultOptions), providedOptions), [defaultOptions, providedOptions]);
+  return /*#__PURE__*/jsx(GlobalFormOptionsContext.Provider, {
+    value: options,
+    children: children
+  });
+}
 function useFormContext(formId) {
-  var contexts = useContext(Form);
+  var contexts = useContext(FormContextContext);
   var context = formId ? contexts.find(context => formId === context.formId) : contexts[0];
   if (!context) {
     throw new Error('No form context found; Have you render a <FormProvider /> with the corresponding form context?');
@@ -68,11 +82,11 @@ function useConform(formRef, options) {
   var lastIntentedValueRef = useRef();
   var lastAsyncResultRef = useRef(null);
   var abortControllerRef = useRef(null);
-  var handleSubmission = useCallback((result, options) => {
+  var handleSubmission = useCallback((type, result) => {
     var _optionsRef$current$o, _optionsRef$current;
     var intent = result.submission.intent ? deserializeIntent(result.submission.intent) : null;
     setState(state => updateState(state, _objectSpread2(_objectSpread2({}, result), {}, {
-      type: options.type,
+      type,
       intent,
       ctx: {
         handlers: actionHandlers,
@@ -101,9 +115,7 @@ function useConform(formRef, options) {
   useEffect(() => {
     // To avoid re-applying the same result twice
     if (lastResult && lastResult !== lastResultRef.current) {
-      handleSubmission(lastResult, {
-        type: 'server'
-      });
+      handleSubmission('server', lastResult);
       lastResultRef.current = lastResult;
     }
   }, [lastResult, handleSubmission]);
@@ -164,7 +176,7 @@ function useConform(formRef, options) {
       // Patch missing fields in the submission object
       for (var element of formElement.elements) {
         if (isFieldElement(element) && element.name) {
-          appendUniqueItem(submission.fields, element.name);
+          submission.fields = appendUniqueItem(submission.fields, element.name);
         }
       }
 
@@ -191,7 +203,8 @@ function useConform(formRef, options) {
         intent: submission.intent ? deserializeIntent(submission.intent) : null,
         formElement,
         submitter: submitEvent.submitter,
-        formData
+        formData,
+        schemaValue: undefined
       }) : {
         error: null
       };
@@ -214,9 +227,7 @@ function useConform(formRef, options) {
           // There is no need to flush the update in this case
           if (!abortController.signal.aborted) {
             submissionResult.error = error;
-            handleSubmission(submissionResult, {
-              type: 'server'
-            });
+            handleSubmission('server', submissionResult);
 
             // If the form is meant to be submitted and there is no error
             if (error === null && !submission.intent) {
@@ -234,9 +245,7 @@ function useConform(formRef, options) {
           }
         });
       }
-      handleSubmission(submissionResult, {
-        type: 'client'
-      });
+      handleSubmission('client', submissionResult);
       if (
       // If client validation happens
       (typeof syncResult !== 'undefined' || typeof asyncResult !== 'undefined') && (
@@ -264,9 +273,7 @@ function useConform(formRef, options) {
             var _submissionResult = report(result.submission, _objectSpread2(_objectSpread2({}, options), {}, {
               keepFiles: true
             }));
-            handleSubmission(_submissionResult, {
-              type: 'server'
-            });
+            handleSubmission('server', _submissionResult);
           }
         }
       });
@@ -306,13 +313,14 @@ function useForm(options) {
     defaultValue,
     constraint
   } = options;
-  var config = useContext(FormConfig);
+  var globalOptions = useContext(GlobalFormOptionsContext);
   var optionsRef = useLatest(options);
+  var globalOptionsRef = useLatest(globalOptions);
   var fallbackId = useId();
   var formId = id !== null && id !== void 0 ? id : "form-".concat(fallbackId);
   var [state, handleSubmit] = useConform(formId, _objectSpread2(_objectSpread2({}, options), {}, {
-    serialize: config.serialize,
-    intentName: config.intentName,
+    serialize: globalOptions.serialize,
+    intentName: globalOptions.intentName,
     onError: (_optionsRef$current$o4 = optionsRef.current.onError) !== null && _optionsRef$current$o4 !== void 0 ? _optionsRef$current$o4 : focusFirstInvalidField,
     onValidate(ctx) {
       var _options$onValidate, _options$onValidate2;
@@ -335,6 +343,7 @@ function useForm(options) {
         if (resolvedResult.error) {
           ctx.error = resolvedResult.error;
         }
+        ctx.schemaValue = resolvedResult.value;
         var validateResult = resolveValidateResult(options.onValidate(ctx));
         if (validateResult.syncResult) {
           var _validateResult$syncR, _validateResult$syncR2;
@@ -365,7 +374,7 @@ function useForm(options) {
     constraint: constraint !== null && constraint !== void 0 ? constraint : null,
     handleSubmit: handleSubmit,
     handleInput(event) {
-      var _optionsRef$current$o5, _optionsRef$current4;
+      var _optionsRef$current$o5, _optionsRef$current4, _globalOptionsRef$cur;
       if (!isFieldElement(event.target) || event.target.name === '' || event.target.form === null || event.target.form !== getFormElement(formId)) {
         return;
       }
@@ -377,15 +386,15 @@ function useForm(options) {
         return;
       }
       var {
-        shouldValidate = 'onSubmit',
-        shouldRevalidate = shouldValidate
+        shouldValidate = globalOptionsRef.current.shouldValidate,
+        shouldRevalidate = (_globalOptionsRef$cur = globalOptionsRef.current.shouldRevalidate) !== null && _globalOptionsRef$cur !== void 0 ? _globalOptionsRef$cur : shouldValidate
       } = optionsRef.current;
       if (isTouched(state, event.target.name) ? shouldRevalidate === 'onInput' : shouldValidate === 'onInput') {
         intent.validate(event.target.name);
       }
     },
     handleBlur(event) {
-      var _optionsRef$current$o6, _optionsRef$current5;
+      var _optionsRef$current$o6, _optionsRef$current5, _globalOptionsRef$cur2;
       if (!isFieldElement(event.target) || event.target.name === '' || event.target.form === null || event.target.form !== getFormElement(formId)) {
         return;
       }
@@ -397,20 +406,22 @@ function useForm(options) {
         return;
       }
       var {
-        shouldValidate = 'onSubmit',
-        shouldRevalidate = shouldValidate
+        shouldValidate = globalOptionsRef.current.shouldValidate,
+        shouldRevalidate = (_globalOptionsRef$cur2 = globalOptionsRef.current.shouldRevalidate) !== null && _globalOptionsRef$cur2 !== void 0 ? _globalOptionsRef$cur2 : shouldValidate
       } = optionsRef.current;
       if (isTouched(state, event.target.name) ? shouldRevalidate === 'onBlur' : shouldValidate === 'onBlur') {
         intent.validate(event.target.name);
       }
     }
-  }), [formId, state, defaultValue, constraint, handleSubmit, intent, optionsRef]);
+  }), [formId, state, defaultValue, constraint, handleSubmit, intent, optionsRef, globalOptionsRef]);
   var form = useMemo(() => getFormMetadata(context, {
-    serialize: config.serialize
-  }), [context, config.serialize]);
+    serialize: globalOptions.serialize,
+    customize: globalOptions.defineCustomMetadata
+  }), [context, globalOptions.serialize, globalOptions.defineCustomMetadata]);
   var fields = useMemo(() => getFieldset(context, {
-    serialize: config.serialize
-  }), [context, config.serialize]);
+    serialize: globalOptions.serialize,
+    customize: globalOptions.defineCustomMetadata
+  }), [context, globalOptions.serialize, globalOptions.defineCustomMetadata]);
   return {
     form,
     fields,
@@ -438,11 +449,12 @@ function useForm(options) {
  */
 function useFormMetadata() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var config = useContext(FormConfig);
+  var globalOptions = useContext(GlobalFormOptionsContext);
   var context = useFormContext(options.formId);
   var formMetadata = useMemo(() => getFormMetadata(context, {
-    serialize: config.serialize
-  }), [context, config.serialize]);
+    serialize: globalOptions.serialize,
+    customize: globalOptions.defineCustomMetadata
+  }), [context, globalOptions.serialize, globalOptions.defineCustomMetadata]);
   return formMetadata;
 }
 
@@ -468,12 +480,13 @@ function useFormMetadata() {
  */
 function useField(name) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var config = useContext(FormConfig);
+  var globalOptions = useContext(GlobalFormOptionsContext);
   var context = useFormContext(options.formId);
   var field = useMemo(() => getField(context, {
     name,
-    serialize: config.serialize
-  }), [context, name, config.serialize]);
+    serialize: globalOptions.serialize,
+    customize: globalOptions.defineCustomMetadata
+  }), [context, name, globalOptions.serialize, globalOptions.defineCustomMetadata]);
   return field;
 }
 
@@ -498,8 +511,8 @@ function useField(name) {
  * ```
  */
 function useIntent(formRef) {
-  var config = useContext(FormConfig);
-  return useMemo(() => createIntentDispatcher(() => getFormElement(formRef), config.intentName), [formRef, config.intentName]);
+  var globalOptions = useContext(GlobalFormOptionsContext);
+  return useMemo(() => createIntentDispatcher(() => getFormElement(formRef), globalOptions.intentName), [formRef, globalOptions.intentName]);
 }
 
 /**
@@ -515,7 +528,7 @@ function useIntent(formRef) {
 function useControl(options) {
   var {
     observer
-  } = useContext(FormConfig);
+  } = useContext(GlobalFormOptionsContext);
   var inputRef = useRef(null);
   var eventDispatched = useRef({});
   var defaultSnapshot = createDefaultSnapshot(options === null || options === void 0 ? void 0 : options.defaultValue, options === null || options === void 0 ? void 0 : options.defaultChecked, options === null || options === void 0 ? void 0 : options.value);
@@ -687,7 +700,7 @@ function useControl(options) {
 function useFormData(formRef, select, options) {
   var {
     observer
-  } = useContext(FormConfig);
+  } = useContext(GlobalFormOptionsContext);
   var valueRef = useRef();
   var formDataRef = useRef(null);
   var value = useSyncExternalStore(useCallback(callback => {
@@ -740,4 +753,4 @@ function useLatest(value) {
   return ref;
 }
 
-export { Form, FormConfig, FormProvider, INITIAL_KEY, useConform, useControl, useField, useForm, useFormContext, useFormData, useFormMetadata, useIntent, useLatest, useSafeLayoutEffect };
+export { FormContextContext, FormOptionsProvider, FormProvider, GlobalFormOptionsContext, INITIAL_KEY, useConform, useControl, useField, useForm, useFormContext, useFormData, useFormMetadata, useIntent, useLatest, useSafeLayoutEffect };

package/dist/future/index.d.ts

@@ -1,6 +1,6 @@
 export type { FormError, FormValue, Submission, SubmissionResult, } from '@conform-to/dom/future';
 export { parseSubmission, report, isDirty } from '@conform-to/dom/future';
-export type { Control, DefaultValue, FormContext, FormMetadata, FormOptions, FormRef, FieldMetadata, FieldName, Fieldset, IntentDispatcher, } from './types';
-export { FormProvider, useControl, useField, useForm, useFormData, useFormMetadata, useIntent, } from './hooks';
+export type { Control, DefaultValue, BaseMetadata, CustomMetadata, CustomMetadataDefinition, BaseErrorShape, CustomTypes, FormContext, FormMetadata, FormOptions, FormRef, FieldMetadata, FieldName, Fieldset, IntentDispatcher, } from './types';
+export { FormProvider, FormOptionsProvider, useControl, useField, useForm, useFormData, useFormMetadata, useIntent, } from './hooks';
 export { memoize } from './memoize';
 //# sourceMappingURL=index.d.ts.map

package/dist/future/index.js

@@ -20,6 +20,7 @@ Object.defineProperty(exports, 'report', {
 	enumerable: true,
 	get: function () { return future.report; }
 });
+exports.FormOptionsProvider = hooks.FormOptionsProvider;
 exports.FormProvider = hooks.FormProvider;
 exports.useControl = hooks.useControl;
 exports.useField = hooks.useField;

package/dist/future/index.mjs

@@ -1,3 +1,3 @@
 export { isDirty, parseSubmission, report } from '@conform-to/dom/future';
-export { FormProvider, useControl, useField, useForm, useFormData, useFormMetadata, useIntent } from './hooks.mjs';
+export { FormOptionsProvider, FormProvider, useControl, useField, useForm, useFormData, useFormMetadata, useIntent } from './hooks.mjs';
 export { memoize } from './memoize.mjs';