@conform-to/react 1.17.0 → 1.18.0

package/dist/future/hooks.mjs

@@ -1,16 +1,20 @@
 'use client';
 import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties } 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, useRef, useId, useEffect, useSyncExternalStore, useCallback, useLayoutEffect, useState } from 'react';
+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 { deserializeIntent, applyIntent, intentHandlers, resolveIntent } from './intent.mjs';
-import { cleanupPreservedInputs, preserveInputs, focusFirstInvalidField, getFormElement, createIntentDispatcher, createDefaultSnapshot, getRadioGroupValue, getCheckboxGroupValue, getInputSnapshot, makeInputFocusable, initializeField, resetFormValue, updateFormValue, getSubmitEvent } from './dom.mjs';
+import { cleanupPreservedInputs, preserveInputs, focusFirstInvalidField, getFormElement, createIntentDispatcher, deriveDefaultPayload, resolveControlPayload, initializeField, resetFormValue, updateFormValue, getSubmitEvent } from './dom.mjs';
+import { flushSync } from 'react-dom';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["children"];
-// Static reset key for consistent hydration during Next.js prerendering
-// See: https://nextjs.org/docs/messages/next-prerender-current-time-client
+var _excluded = ["children"],
+  _excluded2 = ["name", "form", "defaultValue", "hidden"],
+  _excluded3 = ["defaultValue", "multiple", "hidden"],
+  _excluded4 = ["defaultValue", "hidden"],
+  _excluded5 = ["defaultValue", "value", "hidden"],
+  _excluded6 = ["defaultValue", "hidden"];
 var INITIAL_KEY = 'INITIAL_KEY';
 var GlobalFormOptionsContext = /*#__PURE__*/createContext({
   intentName: DEFAULT_INTENT_NAME,
@@ -146,6 +150,10 @@ function useConform(formRef, options) {
     var finalResult = applyIntent(result, intent, {
       handlers: intentHandlers
     });
+    var formElement = getFormElement(formRef);
+    if (formElement && (finalResult.reset || typeof finalResult.targetValue !== 'undefined')) {
+      dispatchInternalUpdateEvent(formElement);
+    }
     setState(state => updateState(state, _objectSpread2(_objectSpread2({}, finalResult), {}, {
       type,
       intent,
@@ -161,7 +169,6 @@ function useConform(formRef, options) {
     })));
 
     // TODO: move on error handler to a new effect
-    var formElement = getFormElement(formRef);
     if (formElement && result.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, {
@@ -174,6 +181,10 @@ function useConform(formRef, options) {
   }, [formRef, optionsRef]);
   if (options.key !== keyRef.current) {
     keyRef.current = options.key;
+    var formElement = getFormElement(formRef);
+    if (formElement) {
+      dispatchInternalUpdateEvent(formElement);
+    }
     setState(initializeState({
       defaultValue: options.defaultValue
     }));
@@ -200,52 +211,56 @@ function useConform(formRef, options) {
   }, [formRef, state.resetKey, state.defaultValue, optionsRef]);
   useSafeLayoutEffect(() => {
     if (state.targetValue) {
-      var formElement = getFormElement(formRef);
-      if (!formElement) {
+      var _formElement = getFormElement(formRef);
+      if (!_formElement) {
         // eslint-disable-next-line no-console
         console.error('Failed to update form value; No form element found');
         return;
       }
-      updateFormValue(formElement, state.targetValue, optionsRef.current.serialize);
+      updateFormValue(_formElement, state.targetValue, optionsRef.current.serialize);
     }
     pendingValueRef.current = undefined;
   }, [formRef, state.targetValue, optionsRef]);
   var handleSubmit = useCallback(event => {
-    var _abortControllerRef$c2, _lastAsyncResultRef$c;
+    var _abortControllerRef$c2;
     var abortController = new AbortController();
 
     // Keep track of the abort controller so we can cancel the previous request if a new one is made
     (_abortControllerRef$c2 = abortControllerRef.current) === null || _abortControllerRef$c2 === void 0 || _abortControllerRef$c2.abort('A new submission is made');
     abortControllerRef.current = abortController;
-    var formData;
     var result;
     var resolvedValue;
+    var formElement = event.currentTarget;
+    var submitEvent = getSubmitEvent(event);
+    var formData = getFormData(formElement, submitEvent.submitter);
+    var submission = parseSubmission(formData, {
+      intentName: optionsRef.current.intentName
+    });
 
-    // The form might be re-submitted manually if there was an async validation
-    if (event.nativeEvent === ((_lastAsyncResultRef$c = lastAsyncResultRef.current) === null || _lastAsyncResultRef$c === void 0 ? void 0 : _lastAsyncResultRef$c.event)) {
-      formData = lastAsyncResultRef.current.formData;
-      result = lastAsyncResultRef.current.result;
-      resolvedValue = lastAsyncResultRef.current.resolvedValue;
-    } else {
-      var _optionsRef$current$o2, _optionsRef$current2;
-      var formElement = event.currentTarget;
-      var submitEvent = getSubmitEvent(event);
-      formData = getFormData(formElement, submitEvent.submitter);
-      var submission = parseSubmission(formData, {
-        intentName: optionsRef.current.intentName
-      });
-
-      // Patch missing fields in the submission object
-      for (var element of formElement.elements) {
-        if (isFieldElement(element) && element.name) {
-          submission.fields = appendUniqueItem(submission.fields, element.name);
-        }
+    // Patch missing fields in the submission object
+    for (var element of formElement.elements) {
+      if (isFieldElement(element) && element.name) {
+        submission.fields = appendUniqueItem(submission.fields, element.name);
       }
+    }
 
-      // Override submission value if the pending value is not applied yet (i.e. batch updates)
-      if (pendingValueRef.current !== undefined) {
-        submission.payload = pendingValueRef.current;
-      }
+    // Override submission value if the pending value is not applied yet (i.e. batch updates)
+    if (pendingValueRef.current !== undefined) {
+      submission.payload = pendingValueRef.current;
+    }
+    var lastAsyncResult = lastAsyncResultRef.current;
+
+    // Clear the last async result so it won't affect the next submission
+    lastAsyncResultRef.current = null;
+    if (lastAsyncResult &&
+    // Only default submission will be re-submitted after async validation
+    !submission.intent &&
+    // Ensure the submission payload is the same as the one being validated
+    deepEqual(submission.payload, lastAsyncResult.result.submission.payload)) {
+      result = lastAsyncResult.result;
+      resolvedValue = lastAsyncResult.resolvedValue;
+    } else {
+      var _optionsRef$current$o2, _optionsRef$current2;
       var value = resolveIntent(submission);
       var submissionResult = report(submission, {
         keepFiles: true,
@@ -290,16 +305,20 @@ function useConform(formRef, options) {
 
             // If the form is meant to be submitted and there is no error
             if (submissionResult.error === null && !submission.intent) {
-              var _event = createSubmitEvent(submitEvent.submitter);
-
-              // Keep track of the submit event so we can skip validation on the next submit
-              lastAsyncResultRef.current = {
-                event: _event,
-                formData,
-                resolvedValue: value,
-                result: submissionResult
-              };
-              formElement.dispatchEvent(_event);
+              // Keep track of the validated payload and resume submission on the next task.
+              // Calling requestSubmit() directly from the async callback, or from a
+              // microtask, can still be ignored before the native submission lifecycle
+              // has fully settled.
+              setTimeout(() => {
+                if (abortController.signal.aborted) {
+                  return;
+                }
+                lastAsyncResultRef.current = {
+                  resolvedValue: value,
+                  result: submissionResult
+                };
+                requestSubmit(formElement, submitEvent.submitter);
+              }, 0);
             }
           }
         });
@@ -614,7 +633,7 @@ function useIntent(formRef) {
 
 /**
  * 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 input
+ * This is useful when emulating native input behavior — typically by rendering a hidden base control
  * and syncing it with a custom input.
  *
  * @example
@@ -622,7 +641,9 @@ function useIntent(formRef) {
  * const control = useControl(options);
  * ```
  */
-function useControl(options) {
+
+function useControl() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var {
     observer
   } = useContext(GlobalFormOptionsContext);
@@ -637,29 +658,40 @@ function useControl(options) {
       return Array.isArray(input) ? (_input$0$form = (_input$ = input[0]) === null || _input$ === void 0 ? void 0 : _input$.form) !== null && _input$0$form !== void 0 ? _input$0$form : null : input.form;
     }
   }), []);
+  var [defaultValue, setDefaultValue] = useState(() => deriveDefaultPayload(options));
+  var pendingDefaultValueSyncRef = useRef(false);
+
+  /**
+   * Keep defaultValue in sync with external option updates during render.
+   * This is required for structural controls where hidden descendants must be
+   * rendered in the same cycle as form state updates (e.g. update intents).
+   */
+  if (pendingDefaultValueSyncRef.current && inputRef.current && isGlobalInstance(inputRef.current, 'HTMLFieldSetElement')) {
+    pendingDefaultValueSyncRef.current = false;
+    setDefaultValue(() => deriveDefaultPayload(options));
+  }
   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);
-  var snapshotRef = useRef(defaultSnapshot);
+  var snapshotRef = useRef(defaultValue);
   var optionsRef = useRef(options);
   useEffect(() => {
     optionsRef.current = options;
   });
-
-  // This is necessary to ensure that input is re-registered
-  // if the onFocus handler changes
-  var shouldHandleFocus = typeof (options === null || options === void 0 ? void 0 : options.onFocus) === 'function';
-  var snapshot = useSyncExternalStore(useCallback(callback => observer.onFieldUpdate(event => {
+  useEffect(() => observer.onInternalUpdate(event => {
+    var input = inputRef.current;
+    if (input && input instanceof HTMLFieldSetElement && event.target === input.form) {
+      pendingDefaultValueSyncRef.current = true;
+    }
+  }), [observer]);
+  var payloadSnapshot = useSyncExternalStore(useCallback(callback => observer.onFieldUpdate(event => {
+    var _inputRef$current;
     var input = event.target;
-    if (Array.isArray(inputRef.current) ? inputRef.current.some(item => item === input) : inputRef.current === input) {
+    if (Array.isArray(inputRef.current) ? inputRef.current.some(item => item === input) : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.contains(input)) {
       callback();
     }
   }), [observer]), () => {
     var input = inputRef.current;
     var prev = snapshotRef.current;
-    var next = !input ? defaultSnapshot : Array.isArray(input) ? {
-      value: getRadioGroupValue(input),
-      options: getCheckboxGroupValue(input)
-    } : getInputSnapshot(input);
+    var next = input ? resolveControlPayload(input) : defaultValue;
     if (deepEqual(prev, next)) {
       return prev;
     }
@@ -669,7 +701,8 @@ function useControl(options) {
   useEffect(() => {
     var createEventListener = listener => {
       return event => {
-        if (Array.isArray(inputRef.current) ? inputRef.current.some(item => item === event.target) : inputRef.current === event.target) {
+        var _inputRef$current2;
+        if (Array.isArray(inputRef.current) ? inputRef.current.some(item => item === event.target) : event.target instanceof Node && ((_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.contains(event.target))) {
           var timer = eventDispatched.current[listener];
           if (timer) {
             clearTimeout(timer);
@@ -697,10 +730,62 @@ function useControl(options) {
     };
   }, []);
   return {
-    value: snapshot.value,
-    checked: snapshot.checked,
-    options: snapshot.options,
-    files: snapshot.files,
+    defaultValue,
+    get payload() {
+      if (payloadSnapshot != null && 'parse' in options) {
+        try {
+          return options.parse(payloadSnapshot);
+        } catch (error) {
+          var payloadText = '';
+          try {
+            payloadText = JSON.stringify(payloadSnapshot, null, 2);
+          } catch (_unused) {
+            payloadText = '<unserializable payload>';
+          }
+          throw new Error("Failed to parse the payload. Received ".concat(payloadText, "."), {
+            cause: error
+          });
+        }
+      }
+      return payloadSnapshot;
+    },
+    get value() {
+      if (payloadSnapshot === null) {
+        return '';
+      }
+      if (typeof payloadSnapshot === 'string') {
+        return payloadSnapshot;
+      }
+      return undefined;
+    },
+    get checked() {
+      if (payloadSnapshot === null) {
+        return false;
+      }
+      var value = 'value' in options && options.value ? options.value : 'on';
+      if (payloadSnapshot === value) {
+        return true;
+      }
+      return undefined;
+    },
+    get options() {
+      if (payloadSnapshot === null) {
+        return [];
+      }
+      if (Array.isArray(payloadSnapshot) && payloadSnapshot.every(item => typeof item === 'string')) {
+        return payloadSnapshot;
+      }
+      return undefined;
+    },
+    get files() {
+      if (payloadSnapshot === null) {
+        return [];
+      }
+      if (Array.isArray(payloadSnapshot) && payloadSnapshot.every(item => isGlobalInstance(item, 'File'))) {
+        return payloadSnapshot;
+      }
+      return undefined;
+    },
     formRef,
     register: useCallback(element => {
       if (!element) {
@@ -714,17 +799,16 @@ function useControl(options) {
           element.hidden = true;
           element.removeAttribute('type');
         }
-        if (shouldHandleFocus) {
-          makeInputFocusable(element);
-        }
         if (element.type === 'checkbox' || element.type === 'radio') {
-          var _optionsRef$current$v, _optionsRef$current7;
           // 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
-          element.value = (_optionsRef$current$v = (_optionsRef$current7 = optionsRef.current) === null || _optionsRef$current7 === void 0 ? void 0 : _optionsRef$current7.value) !== null && _optionsRef$current$v !== void 0 ? _optionsRef$current$v : 'on';
+          var value = 'value' in optionsRef.current && optionsRef.current.value ? optionsRef.current.value : 'on';
+          element.value = value;
         }
         initializeField(element, optionsRef.current);
+      } else if (element instanceof HTMLFieldSetElement) {
+        inputRef.current = element;
       } else {
         var _inputs$0$name, _inputs$, _inputs$0$type, _inputs$2;
         var inputs = Array.from(element);
@@ -734,39 +818,36 @@ function useControl(options) {
           throw new Error('You can only register a checkbox or radio group with the same name');
         }
         inputRef.current = inputs;
-        for (var input of inputs) {
-          var _optionsRef$current8;
-          if (shouldHandleFocus) {
-            makeInputFocusable(input);
+        if ('defaultValue' in optionsRef.current) {
+          for (var input of inputs) {
+            var _optionsRef$current7;
+            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
+            });
           }
-          initializeField(input, {
-            // We will not be uitlizing defaultChecked / value on checkbox / radio group
-            defaultValue: (_optionsRef$current8 = optionsRef.current) === null || _optionsRef$current8 === void 0 ? void 0 : _optionsRef$current8.defaultValue
-          });
         }
       }
-    }, [shouldHandleFocus]),
+    }, []),
     change: useCallback(value => {
       if (!eventDispatched.current.change) {
-        var _inputRef$current;
-        var element = Array.isArray(inputRef.current) ? (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.find(input => {
-          var wasChecked = input.checked;
-          var isChecked = Array.isArray(value) ? value.some(item => item === input.value) : input.value === value;
-          switch (input.type) {
-            case 'checkbox':
-              // We assume that only one checkbox can be checked at a time
-              // So we will pick the first element with checked state changed
-              return wasChecked !== isChecked;
-            case 'radio':
-              // We cannot uncheck a radio button
-              // So we will pick the first element that should be checked
-              return isChecked;
-            default:
-              return false;
-          }
-        }) : inputRef.current;
+        var element = inputRef.current;
+        var isFieldset = element instanceof HTMLFieldSetElement;
+        var serializedValue = value == null ? value : 'serialize' in optionsRef.current && optionsRef.current.serialize ? optionsRef.current.serialize(value) : value;
+        if (isFieldset) {
+          // Fieldset mode renders hidden descendant inputs from defaultValue.
+          // Flush this update before dispatching events so listeners see the
+          // latest form structure in the same input/change cycle.
+          flushSync(() => {
+            setDefaultValue(serializedValue);
+          });
+        }
         if (element) {
-          change(element, typeof value === 'boolean' ? value ? element.value : null : value);
+          change(element, serializedValue, {
+            // Sometimes no change is made on the inputs but done through DOM mutation.
+            // But we still want to dispatch the event to notify listeners.
+            forceDispatch: isFieldset
+          });
         }
       }
       if (eventDispatched.current.change) {
@@ -877,4 +958,146 @@ function useLatest(value) {
   return ref;
 }
 
-export { FormContextContext, FormOptionsProvider, FormProvider, GlobalFormOptionsContext, INITIAL_KEY, PreserveBoundary, useConform, useControl, useField, useForm, useFormContext, useFormData, useFormMetadata, useIntent, useLatest, useSafeLayoutEffect };
+/**
+ * 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
+ * ```tsx
+ * const control = useControl<{ street: string; city: string }>({
+ *   defaultValue: { street: '123 Main St', city: 'Anytown' },
+ *   parse(payload) {
+ * 	   if (
+ *       typeof payload === 'object' &&
+ *       payload !== null &&
+ *       'street' in payload &&
+ *       'city' in payload &&
+ *       typeof payload.street === 'string' &&
+ *       typeof payload.city === 'string'
+ *     ) {
+ *       return payload;
+ *     }
+ *
+ *     throw new Error('Unexpected payload shape');
+ *   },
+ * });
+ *
+ * <BaseControl
+ *   type="fieldset"
+ *   name="address"
+ *   ref={control.register}
+ *   defaultValue={control.defaultValue}
+ * />
+ * ```
+ */
+var BaseControl = /*#__PURE__*/forwardRef(function BaseControl(props, ref) {
+  function formatValue(value) {
+    var serialized = serialize(value);
+    if (typeof serialized === 'string') {
+      return serialized;
+    }
+
+    // null, undefined, File, or array - fallback to empty string
+    return '';
+  }
+  function renderInput(name, value, form) {
+    if (Array.isArray(value)) {
+      return value.map((item, index) => renderInput("".concat(name, "[").concat(index, "]"), item, form));
+    }
+    if (isPlainObject(value)) {
+      return Object.entries(value).map(_ref5 => {
+        var [key, val] = _ref5;
+        return renderInput("".concat(name, ".").concat(key), val, form);
+      });
+    }
+    return /*#__PURE__*/jsx("input", {
+      name: name,
+      defaultValue: formatValue(value),
+      form: form
+    }, name);
+  }
+  if (props.type === 'fieldset') {
+    var {
+        name,
+        form,
+        defaultValue: _defaultValue,
+        hidden: _hidden = true
+      } = props,
+      fieldsetProps = _objectWithoutProperties(props, _excluded2);
+    return /*#__PURE__*/jsx("fieldset", _objectSpread2(_objectSpread2({}, fieldsetProps), {}, {
+      ref: ref,
+      name: name,
+      form: form,
+      hidden: _hidden,
+      children: _defaultValue != null ? renderInput(name, _defaultValue, form) : null
+    }));
+  }
+  if (props.type === 'select') {
+    var {
+        defaultValue: _defaultValue2,
+        multiple = Array.isArray(_defaultValue2),
+        hidden: _hidden2 = true
+      } = props,
+      selectProps = _objectWithoutProperties(props, _excluded3);
+    if (multiple) {
+      var defaultOptions = Array.isArray(_defaultValue2) ? _defaultValue2.map(formatValue) : [formatValue(_defaultValue2)];
+      return /*#__PURE__*/jsx("select", _objectSpread2(_objectSpread2({}, selectProps), {}, {
+        ref: ref,
+        defaultValue: defaultOptions,
+        hidden: _hidden2,
+        multiple: true,
+        children: defaultOptions.map((option, index) => /*#__PURE__*/jsx("option", {
+          value: option,
+          children: option
+        }, index))
+      }));
+    }
+    var defaultOption = formatValue(_defaultValue2);
+    return /*#__PURE__*/jsx("select", _objectSpread2(_objectSpread2({}, selectProps), {}, {
+      ref: ref,
+      defaultValue: defaultOption,
+      hidden: _hidden2,
+      children: [defaultOption].map((option, index) => /*#__PURE__*/jsx("option", {
+        value: option,
+        children: option
+      }, index))
+    }));
+  }
+  if (props.type === 'textarea') {
+    var {
+        defaultValue: _defaultValue3,
+        hidden: _hidden3 = true
+      } = props,
+      textareaProps = _objectWithoutProperties(props, _excluded4);
+    return /*#__PURE__*/jsx("textarea", _objectSpread2(_objectSpread2({}, textareaProps), {}, {
+      defaultValue: formatValue(_defaultValue3),
+      ref: ref,
+      hidden: _hidden3
+    }));
+  }
+  if (props.type === 'checkbox' || props.type === 'radio') {
+    var {
+        defaultValue: _defaultValue4 = 'on',
+        value = _defaultValue4,
+        hidden: _hidden4 = true
+      } = props,
+      _inputProps = _objectWithoutProperties(props, _excluded5);
+    return /*#__PURE__*/jsx("input", _objectSpread2(_objectSpread2({}, _inputProps), {}, {
+      ref: ref,
+      value: value,
+      hidden: _hidden4
+    }));
+  }
+  var {
+      defaultValue,
+      hidden = true
+    } = props,
+    inputProps = _objectWithoutProperties(props, _excluded6);
+  return /*#__PURE__*/jsx("input", _objectSpread2(_objectSpread2({}, inputProps), {}, {
+    ref: ref,
+    defaultValue: defaultValue !== undefined ? formatValue(defaultValue) : undefined,
+    hidden: hidden
+  }));
+});
+
+export { BaseControl, FormContextContext, FormOptionsProvider, FormProvider, GlobalFormOptionsContext, INITIAL_KEY, PreserveBoundary, useConform, useControl, useField, useForm, useFormContext, useFormData, useFormMetadata, useIntent, 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, DefaultValue, BaseMetadata, BaseFieldMetadata, CustomMetadata, CustomMetadataDefinition, BaseErrorShape, CustomTypes, CustomSchemaTypes, FormsConfig, FormContext, FormMetadata, FormOptions, FormRef, FieldMetadata, Fieldset, IntentDispatcher, InferBaseErrorShape, InferCustomFormMetadata, InferCustomFieldMetadata, } from './types';
+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 { PreserveBoundary, FormProvider, FormOptionsProvider, useControl, useField, useForm, useFormData, useFormMetadata, useIntent, } from './hooks';
+export { BaseControl, PreserveBoundary, FormProvider, FormOptionsProvider, useControl, useField, useForm, useFormData, useFormMetadata, useIntent, } from './hooks';
 export { shape } from './util';
 export { memoize } from './memoize';
 //# sourceMappingURL=index.d.ts.map

package/dist/future/index.js

@@ -27,6 +27,7 @@ Object.defineProperty(exports, 'report', {
 	get: function () { return future.report; }
 });
 exports.configureForms = forms.configureForms;
+exports.BaseControl = hooks.BaseControl;
 exports.FormOptionsProvider = hooks.FormOptionsProvider;
 exports.FormProvider = hooks.FormProvider;
 exports.PreserveBoundary = hooks.PreserveBoundary;

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 { FormOptionsProvider, FormProvider, PreserveBoundary, useControl, useField, useForm, useFormData, useFormMetadata, useIntent } from './hooks.mjs';
+export { BaseControl, FormOptionsProvider, FormProvider, PreserveBoundary, useControl, useField, useForm, useFormData, useFormMetadata, useIntent } from './hooks.mjs';
 export { shape } from './util.mjs';
 export { memoize } from './memoize.mjs';