@conform-to/react 1.18.0 → 1.19.0

package/dist/future/hooks.mjs

@@ -1,49 +1,27 @@
 'use client';
 import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties } from '../_virtual/_rollupPluginBabelHelpers.mjs';
-import { DEFAULT_INTENT_NAME, createGlobalFormsObserver, serialize, isFieldElement, isGlobalInstance, deepEqual, change, focus, blur, getFormData, dispatchInternalUpdateEvent, parseSubmission, report, requestSubmit, isPlainObject } from '@conform-to/dom/future';
-import { createContext, useContext, useMemo, useRef, useId, useState, useEffect, useSyncExternalStore, useCallback, useLayoutEffect, forwardRef } from 'react';
-import { resolveStandardSchemaResult, resolveValidateResult, appendUniqueItem } from './util.mjs';
-import { isTouched, getFormMetadata, getFieldset, getField, initializeState, updateState } from './state.mjs';
+import { createGlobalFormsObserver, isGlobalInstance, deepEqual, isFieldElement, change, focus, blur, getFormData, defaultSerialize, isPlainObject, normalizeFormError, dispatchInternalUpdateEvent, parseSubmission, report, requestSubmit } from '@conform-to/dom/future';
+import { createContext, useRef, useContext, useMemo, useState, useEffect, useSyncExternalStore, useCallback, useLayoutEffect, forwardRef } from 'react';
+import { appendUniqueItem, resolveValidateResult } from './util.mjs';
+import { initializeState, updateState } from './state.mjs';
 import { deserializeIntent, applyIntent, intentHandlers, resolveIntent } from './intent.mjs';
-import { cleanupPreservedInputs, preserveInputs, focusFirstInvalidField, getFormElement, createIntentDispatcher, deriveDefaultPayload, resolveControlPayload, initializeField, resetFormValue, updateFormValue, getSubmitEvent } from './dom.mjs';
+import { cleanupPreservedInputs, preserveInputs, deriveDefaultPayload, resolveControlPayload, initializeField, getFormElement, resetFormValue, updateFormValue, getSubmitEvent } from './dom.mjs';
 import { flushSync } from 'react-dom';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["children"],
-  _excluded2 = ["name", "form", "defaultValue", "hidden"],
-  _excluded3 = ["defaultValue", "multiple", "hidden"],
-  _excluded4 = ["defaultValue", "hidden"],
-  _excluded5 = ["defaultValue", "value", "hidden"],
-  _excluded6 = ["defaultValue", "hidden"];
+var _excluded = ["name", "form", "defaultValue", "hidden"],
+  _excluded2 = ["defaultValue", "multiple", "hidden"],
+  _excluded3 = ["defaultValue", "hidden"],
+  _excluded4 = ["defaultValue", "value", "hidden"],
+  _excluded5 = ["defaultValue", "hidden"];
 var INITIAL_KEY = 'INITIAL_KEY';
-var GlobalFormOptionsContext = /*#__PURE__*/createContext({
-  intentName: DEFAULT_INTENT_NAME,
-  observer: createGlobalFormsObserver(),
-  serialize,
-  shouldValidate: 'onSubmit'
-});
-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(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(FormContextContext.Provider, {
-    value: value,
-    children: props.children
-  });
-}
+var GlobalFormsObserverContext = /*#__PURE__*/createContext(createGlobalFormsObserver());
 
 /**
  * Preserves form field values when its contents are unmounted.
  * Useful for multi-step forms and virtualized lists.
  *
- * @see https://conform.guide/api/react/future/PreserveBoundary
+ * See https://conform.guide/api/react/future/PreserveBoundary
  */
 function PreserveBoundary(props) {
   // name is used as key so React properly unmounts/remounts when switching
@@ -80,30 +58,6 @@ function PreserveBoundaryImpl(props) {
   });
 }
 
-/**
- * @deprecated Replaced by the `configureForms` factory API. This will be removed in the next minor version. If you are not ready to migrate, please pin to `v1.16.0`.
- */
-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(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?');
-  }
-  return context;
-}
-
 /**
  * Core form hook that manages form state, validation, and submission.
  * Handles both sync and async validation, intent dispatching, and DOM updates.
@@ -146,8 +100,11 @@ function useConform(formRef, options) {
   var abortControllerRef = useRef(null);
   var handleSubmission = useCallback(function (type, result) {
     var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : optionsRef.current;
+    var normalizedResult = !result.error ? result : _objectSpread2(_objectSpread2({}, result), {}, {
+      error: normalizeFormError(result.error)
+    });
     var intent = result.submission.intent ? deserializeIntent(result.submission.intent) : null;
-    var finalResult = applyIntent(result, intent, {
+    var finalResult = applyIntent(normalizedResult, intent, {
       handlers: intentHandlers
     });
     var formElement = getFormElement(formRef);
@@ -159,7 +116,7 @@ function useConform(formRef, options) {
       intent,
       ctx: {
         handlers: intentHandlers,
-        cancelled: finalResult !== result,
+        cancelled: finalResult !== normalizedResult,
         reset(defaultValue) {
           return initializeState({
             defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : options.defaultValue
@@ -169,11 +126,11 @@ function useConform(formRef, options) {
     })));
 
     // TODO: move on error handler to a new effect
-    if (formElement && result.error) {
+    if (formElement && finalResult.error) {
       var _optionsRef$current$o, _optionsRef$current;
       (_optionsRef$current$o = (_optionsRef$current = optionsRef.current).onError) === null || _optionsRef$current$o === void 0 || _optionsRef$current$o.call(_optionsRef$current, {
         formElement,
-        error: result.error,
+        error: finalResult.error,
         intent
       });
     }
@@ -271,7 +228,7 @@ function useConform(formRef, options) {
       value !== undefined ? (_optionsRef$current$o2 = (_optionsRef$current2 = optionsRef.current).onValidate) === null || _optionsRef$current$o2 === void 0 ? void 0 : _optionsRef$current$o2.call(_optionsRef$current2, {
         payload: value,
         error: {
-          formErrors: [],
+          formErrors: null,
           fieldErrors: {}
         },
         intent: submission.intent ? deserializeIntent(submission.intent) : null,
@@ -364,279 +321,12 @@ function useConform(formRef, options) {
   return [state, handleSubmit];
 }
 
-/**
- * The main React hook for form management. Handles form state, validation, and submission
- * while providing access to form metadata, field objects, and form actions.
- *
- * It can be called in two ways:
- * - **Schema first**: Pass a schema as the first argument for automatic validation with type inference
- * - **Manual configuration**: Pass options with custom `onValidate` handler for manual validation
- *
- * @see https://conform.guide/api/react/future/useForm
- * @example Schema first setup with zod:
- *
- * ```tsx
- * const { form, fields } = useForm(zodSchema, {
- *   lastResult,
- *   shouldValidate: 'onBlur',
- * });
- *
- * return (
- *   <form {...form.props}>
- *     <input name={fields.email.name} defaultValue={fields.email.defaultValue} />
- *     <div>{fields.email.errors}</div>
- *   </form>
- * );
- * ```
- *
- * @example Manual configuration setup with custom validation:
- *
- * ```tsx
- * const { form, fields } = useForm({
- *    onValidate({ payload, error }) {
- *     if (!payload.email) {
- * 		 error.fieldErrors.email = ['Required'];
- *     }
- *     return error;
- *   }
- * });
- *
- * return (
- *   <form {...form.props}>
- *     <input name={fields.email.name} defaultValue={fields.email.defaultValue} />
- *     <div>{fields.email.errors}</div>
- *   </form>
- * );
- * ```
- */
-
-/**
- * @deprecated Use `useForm(schema, options)` instead for better type inference.
- */
-
-function useForm(schemaOrOptions, maybeOptions) {
-  var _options$onError;
-  var schema;
-  var options;
-  if (maybeOptions) {
-    schema = schemaOrOptions;
-    options = maybeOptions;
-  } else {
-    var fullOptions = schemaOrOptions;
-    options = fullOptions;
-    schema = fullOptions.schema;
-  }
-  var {
-    id,
-    constraint
-  } = options;
-  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: globalOptions.serialize,
-    intentName: globalOptions.intentName,
-    onError: (_options$onError = options.onError) !== null && _options$onError !== void 0 ? _options$onError : focusFirstInvalidField,
-    onValidate(ctx) {
-      var _options$onValidate, _options$onValidate2, _options;
-      if (schema) {
-        var standardResult = schema['~standard'].validate(ctx.payload);
-        if (standardResult instanceof Promise) {
-          return standardResult.then(actualStandardResult => {
-            if (typeof options.onValidate === 'function') {
-              throw new Error('The "onValidate" handler is not supported when used with asynchronous schema validation.');
-            }
-            return resolveStandardSchemaResult(actualStandardResult);
-          });
-        }
-        var resolvedResult = resolveStandardSchemaResult(standardResult);
-        if (!options.onValidate) {
-          return resolvedResult;
-        }
-
-        // Update the schema error in the context
-        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;
-          (_validateResult$syncR2 = (_validateResult$syncR = validateResult.syncResult).value) !== null && _validateResult$syncR2 !== void 0 ? _validateResult$syncR2 : _validateResult$syncR.value = resolvedResult.value;
-        }
-        if (validateResult.asyncResult) {
-          validateResult.asyncResult = validateResult.asyncResult.then(result => {
-            var _result$value;
-            (_result$value = result.value) !== null && _result$value !== void 0 ? _result$value : result.value = resolvedResult.value;
-            return result;
-          });
-        }
-        return [validateResult.syncResult, validateResult.asyncResult];
-      }
-      return (_options$onValidate = (_options$onValidate2 = (_options = options).onValidate) === null || _options$onValidate2 === void 0 ? void 0 : _options$onValidate2.call(_options, ctx)) !== null && _options$onValidate !== void 0 ? _options$onValidate : {
-        // To avoid conform falling back to server validation,
-        // if neither schema nor validation handler is provided,
-        // we just treat it as a valid client submission
-        error: null
-      };
-    }
-  }));
-  var intent = useIntent(formId);
-  var context = useMemo(() => ({
-    formId,
-    state,
-    constraint: constraint !== null && constraint !== void 0 ? constraint : null,
-    handleSubmit,
-    handleInput(event) {
-      var _optionsRef$current$o4, _optionsRef$current4, _globalOptionsRef$cur;
-      if (!isFieldElement(event.target) || event.target.name === '' || event.target.form === null || event.target.form !== getFormElement(formId)) {
-        return;
-      }
-      (_optionsRef$current$o4 = (_optionsRef$current4 = optionsRef.current).onInput) === null || _optionsRef$current$o4 === void 0 || _optionsRef$current$o4.call(_optionsRef$current4, _objectSpread2(_objectSpread2({}, event), {}, {
-        target: event.target,
-        currentTarget: event.target.form
-      }));
-      if (event.defaultPrevented) {
-        return;
-      }
-      var {
-        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$o5, _optionsRef$current5, _globalOptionsRef$cur2;
-      if (!isFieldElement(event.target) || event.target.name === '' || event.target.form === null || event.target.form !== getFormElement(formId)) {
-        return;
-      }
-      (_optionsRef$current$o5 = (_optionsRef$current5 = optionsRef.current).onBlur) === null || _optionsRef$current$o5 === void 0 || _optionsRef$current$o5.call(_optionsRef$current5, _objectSpread2(_objectSpread2({}, event), {}, {
-        target: event.target,
-        currentTarget: event.target.form
-      }));
-      if (event.defaultPrevented) {
-        return;
-      }
-      var {
-        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, constraint, handleSubmit, intent, optionsRef, globalOptionsRef]);
-  var form = useMemo(() => getFormMetadata(context, {
-    serialize: globalOptions.serialize,
-    extendFieldMetadata: globalOptions.defineCustomMetadata
-  }), [context, globalOptions.serialize, globalOptions.defineCustomMetadata]);
-  var fields = useMemo(() => getFieldset(context, {
-    serialize: globalOptions.serialize,
-    extendFieldMetadata: globalOptions.defineCustomMetadata
-  }), [context, globalOptions.serialize, globalOptions.defineCustomMetadata]);
-  return {
-    form,
-    fields,
-    intent
-  };
-}
-
-/**
- * A React hook that provides access to form-level metadata and state.
- * Requires `FormProvider` context when used in child components.
- *
- * @see https://conform.guide/api/react/future/useFormMetadata
- * @example
- * ```tsx
- * function ErrorSummary() {
- *   const form = useFormMetadata();
- *
- *   if (form.valid) return null;
- *
- *   return (
- *     <div>Please fix {Object.keys(form.fieldErrors).length} errors</div>
- *   );
- * }
- * ```
- */
-function useFormMetadata() {
-  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var globalOptions = useContext(GlobalFormOptionsContext);
-  var context = useFormContext(options.formId);
-  var formMetadata = useMemo(() => getFormMetadata(context, {
-    serialize: globalOptions.serialize,
-    extendFieldMetadata: globalOptions.defineCustomMetadata
-  }), [context, globalOptions.serialize, globalOptions.defineCustomMetadata]);
-  return formMetadata;
-}
-
-/**
- * A React hook that provides access to a specific field's metadata and state.
- * Requires `FormProvider` context when used in child components.
- *
- * @see https://conform.guide/api/react/future/useField
- * @example
- * ```tsx
- * function FormField({ name, label }) {
- *   const field = useField(name);
- *
- *   return (
- *     <div>
- *       <label htmlFor={field.id}>{label}</label>
- *       <input id={field.id} name={field.name} defaultValue={field.defaultValue} />
- *       {field.errors && <div>{field.errors.join(', ')}</div>}
- *     </div>
- *   );
- * }
- * ```
- */
-function useField(name) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var globalOptions = useContext(GlobalFormOptionsContext);
-  var context = useFormContext(options.formId);
-  var field = useMemo(() => getField(context, {
-    name,
-    serialize: globalOptions.serialize,
-    extendFieldMetadata: globalOptions.defineCustomMetadata
-  }), [context, name, globalOptions.serialize, globalOptions.defineCustomMetadata]);
-  return field;
-}
-
-/**
- * A React hook that provides an intent dispatcher for programmatic form actions.
- * Intent dispatchers allow you to trigger form operations like validation, field updates,
- * and array manipulations without manual form submission.
- *
- * @see https://conform.guide/api/react/future/useIntent
- * @example
- * ```tsx
- * function ResetButton() {
- *   const buttonRef = useRef<HTMLButtonElement>(null);
- *   const intent = useIntent(buttonRef);
- *
- *   return (
- *     <button type="button" ref={buttonRef} onClick={() => intent.reset()}>
- *       Reset Form
- *     </button>
- *   );
- * }
- * ```
- */
-function useIntent(formRef) {
-  var globalOptions = useContext(GlobalFormOptionsContext);
-  return useMemo(() => createIntentDispatcher(() => getFormElement(formRef), globalOptions.intentName), [formRef, globalOptions.intentName]);
-}
-
 /**
  * A React hook that lets you sync the state of an input and dispatch native form events from it.
  * This is useful when emulating native input behavior — typically by rendering a hidden base control
  * and syncing it with a custom input.
  *
- * @example
+ * **Example:**
  * ```ts
  * const control = useControl(options);
  * ```
@@ -644,9 +334,7 @@ function useIntent(formRef) {
 
 function useControl() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var {
-    observer
-  } = useContext(GlobalFormOptionsContext);
+  var observer = useContext(GlobalFormsObserverContext);
   var inputRef = useRef(null);
   var formRef = useMemo(() => ({
     get current() {
@@ -711,8 +399,8 @@ function useControl() {
             eventDispatched.current[listener] = undefined;
           });
           if (listener === 'focus') {
-            var _optionsRef$current6, _optionsRef$current6$;
-            (_optionsRef$current6 = optionsRef.current) === null || _optionsRef$current6 === void 0 || (_optionsRef$current6$ = _optionsRef$current6.onFocus) === null || _optionsRef$current6$ === void 0 || _optionsRef$current6$.call(_optionsRef$current6);
+            var _optionsRef$current4, _optionsRef$current4$;
+            (_optionsRef$current4 = optionsRef.current) === null || _optionsRef$current4 === void 0 || (_optionsRef$current4$ = _optionsRef$current4.onFocus) === null || _optionsRef$current4$ === void 0 || _optionsRef$current4$.call(_optionsRef$current4);
           }
         }
       };
@@ -802,7 +490,7 @@ function useControl() {
         if (element.type === 'checkbox' || element.type === 'radio') {
           // React set the value as empty string incorrectly when the value is undefined
           // This make sure the checkbox value falls back to the default value "on" properly
-          // @see https://github.com/facebook/react/issues/17590
+          // See https://github.com/facebook/react/issues/17590
           var value = 'value' in optionsRef.current && optionsRef.current.value ? optionsRef.current.value : 'on';
           element.value = value;
         }
@@ -820,10 +508,10 @@ function useControl() {
         inputRef.current = inputs;
         if ('defaultValue' in optionsRef.current) {
           for (var input of inputs) {
-            var _optionsRef$current7;
+            var _optionsRef$current5;
             initializeField(input, {
               // We will not be uitlizing defaultChecked / value on checkbox / radio group
-              defaultValue: (_optionsRef$current7 = optionsRef.current) === null || _optionsRef$current7 === void 0 ? void 0 : _optionsRef$current7.defaultValue
+              defaultValue: (_optionsRef$current5 = optionsRef.current) === null || _optionsRef$current5 === void 0 ? void 0 : _optionsRef$current5.defaultValue
             });
           }
         }
@@ -889,8 +577,9 @@ function useControl() {
  * Returns `undefined` when the form element is not available (e.g., on SSR or initial client render),
  * unless a `fallback` is provided.
  *
- * @see https://conform.guide/api/react/future/useFormData
- * @example
+ * See https://conform.guide/api/react/future/useFormData
+ *
+ * **Example:**
  * ```ts
  * const value = useFormData(
  *   formRef,
@@ -900,9 +589,7 @@ function useControl() {
  */
 
 function useFormData(formRef, select, options) {
-  var {
-    observer
-  } = useContext(GlobalFormOptionsContext);
+  var observer = useContext(GlobalFormsObserverContext);
   var valueRef = useRef();
   var formDataRef = useRef();
   var value = useSyncExternalStore(useCallback(callback => {
@@ -962,7 +649,7 @@ function useLatest(value) {
  * A component that renders hidden base control(s) based on the shape of defaultValue.
  * Used with useControl to sync complex values with form data.
  *
- * @example
+ * **Example:**
  * ```tsx
  * const control = useControl<{ street: string; city: string }>({
  *   defaultValue: { street: '123 Main St', city: 'Anytown' },
@@ -992,7 +679,7 @@ function useLatest(value) {
  */
 var BaseControl = /*#__PURE__*/forwardRef(function BaseControl(props, ref) {
   function formatValue(value) {
-    var serialized = serialize(value);
+    var serialized = defaultSerialize(value);
     if (typeof serialized === 'string') {
       return serialized;
     }
@@ -1023,7 +710,7 @@ var BaseControl = /*#__PURE__*/forwardRef(function BaseControl(props, ref) {
         defaultValue: _defaultValue,
         hidden: _hidden = true
       } = props,
-      fieldsetProps = _objectWithoutProperties(props, _excluded2);
+      fieldsetProps = _objectWithoutProperties(props, _excluded);
     return /*#__PURE__*/jsx("fieldset", _objectSpread2(_objectSpread2({}, fieldsetProps), {}, {
       ref: ref,
       name: name,
@@ -1038,7 +725,7 @@ var BaseControl = /*#__PURE__*/forwardRef(function BaseControl(props, ref) {
         multiple = Array.isArray(_defaultValue2),
         hidden: _hidden2 = true
       } = props,
-      selectProps = _objectWithoutProperties(props, _excluded3);
+      selectProps = _objectWithoutProperties(props, _excluded2);
     if (multiple) {
       var defaultOptions = Array.isArray(_defaultValue2) ? _defaultValue2.map(formatValue) : [formatValue(_defaultValue2)];
       return /*#__PURE__*/jsx("select", _objectSpread2(_objectSpread2({}, selectProps), {}, {
@@ -1068,7 +755,7 @@ var BaseControl = /*#__PURE__*/forwardRef(function BaseControl(props, ref) {
         defaultValue: _defaultValue3,
         hidden: _hidden3 = true
       } = props,
-      textareaProps = _objectWithoutProperties(props, _excluded4);
+      textareaProps = _objectWithoutProperties(props, _excluded3);
     return /*#__PURE__*/jsx("textarea", _objectSpread2(_objectSpread2({}, textareaProps), {}, {
       defaultValue: formatValue(_defaultValue3),
       ref: ref,
@@ -1081,7 +768,7 @@ var BaseControl = /*#__PURE__*/forwardRef(function BaseControl(props, ref) {
         value = _defaultValue4,
         hidden: _hidden4 = true
       } = props,
-      _inputProps = _objectWithoutProperties(props, _excluded5);
+      _inputProps = _objectWithoutProperties(props, _excluded4);
     return /*#__PURE__*/jsx("input", _objectSpread2(_objectSpread2({}, _inputProps), {}, {
       ref: ref,
       value: value,
@@ -1092,7 +779,7 @@ var BaseControl = /*#__PURE__*/forwardRef(function BaseControl(props, ref) {
       defaultValue,
       hidden = true
     } = props,
-    inputProps = _objectWithoutProperties(props, _excluded6);
+    inputProps = _objectWithoutProperties(props, _excluded5);
   return /*#__PURE__*/jsx("input", _objectSpread2(_objectSpread2({}, inputProps), {}, {
     ref: ref,
     defaultValue: defaultValue !== undefined ? formatValue(defaultValue) : undefined,
@@ -1100,4 +787,4 @@ var BaseControl = /*#__PURE__*/forwardRef(function BaseControl(props, ref) {
   }));
 });
 
-export { BaseControl, FormContextContext, FormOptionsProvider, FormProvider, GlobalFormOptionsContext, INITIAL_KEY, PreserveBoundary, useConform, useControl, useField, useForm, useFormContext, useFormData, useFormMetadata, useIntent, useLatest, useSafeLayoutEffect };
+export { BaseControl, GlobalFormsObserverContext, INITIAL_KEY, PreserveBoundary, useConform, useControl, useFormData, useLatest, useSafeLayoutEffect };

package/dist/future/index.d.ts

@@ -1,8 +1,8 @@
 export type { FieldName, FormError, FormValue, Submission, SubmissionResult, } from '@conform-to/dom/future';
 export { getFieldValue, parseSubmission, report, isDirty, } from '@conform-to/dom/future';
-export type { Control, ControlOptions, BaseControlProps, DefaultValue, BaseMetadata, BaseFieldMetadata, CustomMetadata, CustomMetadataDefinition, BaseErrorShape, CustomTypes, CustomSchemaTypes, FormsConfig, FormContext, FormMetadata, FormOptions, FormRef, FieldMetadata, Fieldset, IntentDispatcher, InferBaseErrorShape, InferCustomFormMetadata, InferCustomFieldMetadata, } from './types';
-export { configureForms } from './forms';
-export { BaseControl, PreserveBoundary, FormProvider, FormOptionsProvider, useControl, useField, useForm, useFormData, useFormMetadata, useIntent, } from './hooks';
+export type { Control, ControlOptions, BaseControlProps, DefaultValue, BaseFieldMetadata, CustomSchemaTypes, FormsConfig, FormContext, FormMetadata, FormOptions, FormRef, FieldMetadata, Fieldset, IntentDispatcher, InferBaseErrorShape, InferCustomFormMetadata, InferCustomFieldMetadata, } from './types';
+export { configureForms, FormProvider, useForm, useFormMetadata, useField, useIntent, } from './forms';
+export { BaseControl, PreserveBoundary, useControl, useFormData, } from './hooks';
 export { shape } from './util';
 export { memoize } from './memoize';
 //# sourceMappingURL=index.d.ts.map

package/dist/future/index.js

@@ -26,16 +26,15 @@ Object.defineProperty(exports, 'report', {
 	enumerable: true,
 	get: function () { return future.report; }
 });
+exports.FormProvider = forms.FormProvider;
 exports.configureForms = forms.configureForms;
+exports.useField = forms.useField;
+exports.useForm = forms.useForm;
+exports.useFormMetadata = forms.useFormMetadata;
+exports.useIntent = forms.useIntent;
 exports.BaseControl = hooks.BaseControl;
-exports.FormOptionsProvider = hooks.FormOptionsProvider;
-exports.FormProvider = hooks.FormProvider;
 exports.PreserveBoundary = hooks.PreserveBoundary;
 exports.useControl = hooks.useControl;
-exports.useField = hooks.useField;
-exports.useForm = hooks.useForm;
 exports.useFormData = hooks.useFormData;
-exports.useFormMetadata = hooks.useFormMetadata;
-exports.useIntent = hooks.useIntent;
 exports.shape = util.shape;
 exports.memoize = memoize.memoize;

package/dist/future/index.mjs

@@ -1,5 +1,5 @@
 export { getFieldValue, isDirty, parseSubmission, report } from '@conform-to/dom/future';
-export { configureForms } from './forms.mjs';
-export { BaseControl, FormOptionsProvider, FormProvider, PreserveBoundary, useControl, useField, useForm, useFormData, useFormMetadata, useIntent } from './hooks.mjs';
+export { FormProvider, configureForms, useField, useForm, useFormMetadata, useIntent } from './forms.mjs';
+export { BaseControl, PreserveBoundary, useControl, useFormData } from './hooks.mjs';
 export { shape } from './util.mjs';
 export { memoize } from './memoize.mjs';

package/dist/future/intent.js

@@ -215,27 +215,39 @@ var intentHandlers = {
         console.warn('intent.insert() with `onInvalid` or `from` requires the validation result to be available synchronously. ' + 'These options are ignored because the error is not yet known.');
         return result;
       }
-      var arrayErrors = (_result$error = result.error) === null || _result$error === void 0 ? void 0 : _result$error.fieldErrors[options.name];
-      if (options.onInvalid === 'revert' && arrayErrors !== null && arrayErrors !== void 0 && arrayErrors.length) {
+      var listError = (_result$error = result.error) === null || _result$error === void 0 ? void 0 : _result$error.fieldErrors[options.name];
+      if (options.onInvalid === 'revert' && listError != null) {
         return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, result), {}, {
           targetValue: undefined
         });
       }
       if (options.from !== undefined) {
-        var _options$index2, _result$error2;
+        var _options$index2, _result$error2, _result$error3;
         var index = (_options$index2 = options.index) !== null && _options$index2 !== void 0 ? _options$index2 : util.getPathArray(result.submission.payload, options.name).length;
         var insertedItemPath = future.appendPath(options.name, index);
-        var insertedItemErrors = (_result$error2 = result.error) === null || _result$error2 === void 0 ? void 0 : _result$error2.fieldErrors[insertedItemPath];
-        if (insertedItemErrors !== null && insertedItemErrors !== void 0 && insertedItemErrors.length) {
-          var _result$error$fieldEr, _result$error3, _result$error$formErr, _result$error4, _result$error5;
-          var fromErrors = (_result$error$fieldEr = (_result$error3 = result.error) === null || _result$error3 === void 0 ? void 0 : _result$error3.fieldErrors[options.from]) !== null && _result$error$fieldEr !== void 0 ? _result$error$fieldEr : [];
+        var insertedItemError = (_result$error2 = result.error) === null || _result$error2 === void 0 ? void 0 : _result$error2.fieldErrors[insertedItemPath];
+        var fromFieldError = (_result$error3 = result.error) === null || _result$error3 === void 0 ? void 0 : _result$error3.fieldErrors[options.from];
+        if (fromFieldError != null) {
+          var _result$error$formErr, _result$error4, _result$error5;
           return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, result), {}, {
             targetValue: undefined,
             error: {
-              formErrors: (_result$error$formErr = (_result$error4 = result.error) === null || _result$error4 === void 0 ? void 0 : _result$error4.formErrors) !== null && _result$error$formErr !== void 0 ? _result$error$formErr : [],
+              formErrors: (_result$error$formErr = (_result$error4 = result.error) === null || _result$error4 === void 0 ? void 0 : _result$error4.formErrors) !== null && _result$error$formErr !== void 0 ? _result$error$formErr : null,
               fieldErrors: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, (_result$error5 = result.error) === null || _result$error5 === void 0 ? void 0 : _result$error5.fieldErrors), {}, {
-                [options.from]: [...fromErrors, ...insertedItemErrors],
-                [insertedItemPath]: []
+                [insertedItemPath]: null
+              })
+            }
+          });
+        }
+        if (insertedItemError != null) {
+          var _result$error$formErr2, _result$error6, _result$error7;
+          return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, result), {}, {
+            targetValue: undefined,
+            error: {
+              formErrors: (_result$error$formErr2 = (_result$error6 = result.error) === null || _result$error6 === void 0 ? void 0 : _result$error6.formErrors) !== null && _result$error$formErr2 !== void 0 ? _result$error$formErr2 : null,
+              fieldErrors: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, (_result$error7 = result.error) === null || _result$error7 === void 0 ? void 0 : _result$error7.fieldErrors), {}, {
+                [options.from]: insertedItemError,
+                [insertedItemPath]: null
               })
             }
           });
@@ -293,7 +305,7 @@ var intentHandlers = {
       return util.updatePathValue(value, options.name, list);
     },
     apply(result, options) {
-      var _result$error6;
+      var _result$error8;
       // Warn if validation result is not yet available
       if (typeof result.error === 'undefined' && options.onInvalid) {
         if (process.env.NODE_ENV !== 'production') {
@@ -302,7 +314,7 @@ var intentHandlers = {
         }
         return result;
       }
-      if (result.targetValue && (_result$error6 = result.error) !== null && _result$error6 !== void 0 && _result$error6.fieldErrors[options.name]) {
+      if (result.targetValue && (_result$error8 = result.error) !== null && _result$error8 !== void 0 && _result$error8.fieldErrors[options.name]) {
         switch (options.onInvalid) {
           case 'revert':
             return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, result), {}, {