@conform-to/react 1.17.0 → 1.18.0

package/dist/future/hooks.d.ts

@@ -1,6 +1,6 @@
 import { type FieldName, type FormValue, type Serialize, type SubmissionResult, createGlobalFormsObserver } from '@conform-to/dom/future';
 import { useEffect } from 'react';
-import type { FormContext, IntentDispatcher, FormMetadata, Fieldset, GlobalFormOptions, FormOptions, FieldMetadata, Control, Selector, UseFormDataOptions, ValidateHandler, ErrorHandler, SubmitHandler, FormState, FormRef, BaseErrorShape, DefaultErrorShape, BaseSchemaType, InferInput, InferOutput } from './types';
+import type { FormContext, IntentDispatcher, FormMetadata, Fieldset, GlobalFormOptions, FormOptions, FieldMetadata, Control, Selector, UseFormDataOptions, ValidateHandler, ErrorHandler, SubmitHandler, FormState, FormRef, BaseErrorShape, DefaultErrorShape, BaseSchemaType, InferInput, InferOutput, BaseControlProps, StandardControlOptions, DefaultControlValue, CheckedControlOptions, CustomControlOptions } from './types';
 import { StandardSchemaV1 } from './standard-schema';
 export declare const INITIAL_KEY = "INITIAL_KEY";
 export declare const GlobalFormOptionsContext: import("react").Context<GlobalFormOptions & {
@@ -194,7 +194,7 @@ export declare function useField<FieldShape = any>(name: FieldName<FieldShape>,
 export declare function useIntent<FormShape extends Record<string, any>>(formRef: FormRef): IntentDispatcher<FormShape>;
 /**
  * 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
@@ -202,28 +202,9 @@ export declare function useIntent<FormShape extends Record<string, any>>(formRef
  * const control = useControl(options);
  * ```
  */
-export declare function useControl(options?: {
-    /**
-     * The initial value of the base input. It will be used to set the value
-     * when the input is first registered.
-     */
-    defaultValue?: string | string[] | File | File[] | null | undefined;
-    /**
-     * Whether the base input should be checked by default. It will be applied
-     * when the input is first registered.
-     */
-    defaultChecked?: boolean | undefined;
-    /**
-     * The value of a checkbox or radio input when checked. This sets the
-     * value attribute of the base input.
-     */
-    value?: string;
-    /**
-     * A callback function that is triggered when the base input is focused.
-     * Use this to delegate focus to a custom input.
-     */
-    onFocus?: () => void;
-}): Control;
+export declare function useControl<Value, DefaultValue>(options: CustomControlOptions<Value, DefaultValue>): Control<Value, DefaultValue, Value>;
+export declare function useControl<Value extends DefaultControlValue>(options?: StandardControlOptions<Value>): Control<Value>;
+export declare function useControl(options: CheckedControlOptions): Control<boolean, string>;
 /**
  * A React hook that lets you subscribe to the current `FormData` of a form and derive a custom value from it.
  * The selector runs whenever the form's structure or data changes, and the hook re-renders only when the result is deeply different.
@@ -268,4 +249,37 @@ export declare const useSafeLayoutEffect: typeof useEffect;
  * Useful to avoid stale closures in event handlers or async callbacks.
  */
 export declare function useLatest<Value>(value: Value): import("react").MutableRefObject<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
+ * ```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}
+ * />
+ * ```
+ */
+export declare const BaseControl: import("react").ForwardRefExoticComponent<BaseControlProps & import("react").RefAttributes<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | HTMLFieldSetElement>>;
 //# sourceMappingURL=hooks.d.ts.map

package/dist/future/hooks.js

@@ -10,11 +10,15 @@ var util = require('./util.js');
 var state = require('./state.js');
 var intent = require('./intent.js');
 var dom = require('./dom.js');
+var reactDom = require('react-dom');
 var jsxRuntime = require('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__*/react.createContext({
   intentName: future.DEFAULT_INTENT_NAME,
@@ -150,6 +154,10 @@ function useConform(formRef, options) {
     var finalResult = intent.applyIntent(result, intent$1, {
       handlers: intent.intentHandlers
     });
+    var formElement = dom.getFormElement(formRef);
+    if (formElement && (finalResult.reset || typeof finalResult.targetValue !== 'undefined')) {
+      future.dispatchInternalUpdateEvent(formElement);
+    }
     setState(state$1 => state.updateState(state$1, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, finalResult), {}, {
       type,
       intent: intent$1,
@@ -165,7 +173,6 @@ function useConform(formRef, options) {
     })));
 
     // TODO: move on error handler to a new effect
-    var formElement = dom.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, {
@@ -178,6 +185,10 @@ function useConform(formRef, options) {
   }, [formRef, optionsRef]);
   if (options.key !== keyRef.current) {
     keyRef.current = options.key;
+    var formElement = dom.getFormElement(formRef);
+    if (formElement) {
+      future.dispatchInternalUpdateEvent(formElement);
+    }
     setState(state.initializeState({
       defaultValue: options.defaultValue
     }));
@@ -204,52 +215,56 @@ function useConform(formRef, options) {
   }, [formRef, state$1.resetKey, state$1.defaultValue, optionsRef]);
   useSafeLayoutEffect(() => {
     if (state$1.targetValue) {
-      var formElement = dom.getFormElement(formRef);
-      if (!formElement) {
+      var _formElement = dom.getFormElement(formRef);
+      if (!_formElement) {
         // eslint-disable-next-line no-console
         console.error('Failed to update form value; No form element found');
         return;
       }
-      dom.updateFormValue(formElement, state$1.targetValue, optionsRef.current.serialize);
+      dom.updateFormValue(_formElement, state$1.targetValue, optionsRef.current.serialize);
     }
     pendingValueRef.current = undefined;
   }, [formRef, state$1.targetValue, optionsRef]);
   var handleSubmit = react.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 = dom.getSubmitEvent(event);
+    var formData = future.getFormData(formElement, submitEvent.submitter);
+    var submission = future.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 = dom.getSubmitEvent(event);
-      formData = future.getFormData(formElement, submitEvent.submitter);
-      var submission = future.parseSubmission(formData, {
-        intentName: optionsRef.current.intentName
-      });
-
-      // Patch missing fields in the submission object
-      for (var element of formElement.elements) {
-        if (future.isFieldElement(element) && element.name) {
-          submission.fields = util.appendUniqueItem(submission.fields, element.name);
-        }
+    // Patch missing fields in the submission object
+    for (var element of formElement.elements) {
+      if (future.isFieldElement(element) && element.name) {
+        submission.fields = util.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
+    future.deepEqual(submission.payload, lastAsyncResult.result.submission.payload)) {
+      result = lastAsyncResult.result;
+      resolvedValue = lastAsyncResult.resolvedValue;
+    } else {
+      var _optionsRef$current$o2, _optionsRef$current2;
       var value = intent.resolveIntent(submission);
       var submissionResult = future.report(submission, {
         keepFiles: true,
@@ -294,16 +309,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 = future.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
+                };
+                future.requestSubmit(formElement, submitEvent.submitter);
+              }, 0);
             }
           }
         });
@@ -618,7 +637,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
@@ -626,7 +645,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
   } = react.useContext(GlobalFormOptionsContext);
@@ -641,29 +662,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] = react.useState(() => dom.deriveDefaultPayload(options));
+  var pendingDefaultValueSyncRef = react.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 && future.isGlobalInstance(inputRef.current, 'HTMLFieldSetElement')) {
+    pendingDefaultValueSyncRef.current = false;
+    setDefaultValue(() => dom.deriveDefaultPayload(options));
+  }
   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);
-  var snapshotRef = react.useRef(defaultSnapshot);
+  var snapshotRef = react.useRef(defaultValue);
   var optionsRef = react.useRef(options);
   react.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 = react.useSyncExternalStore(react.useCallback(callback => observer.onFieldUpdate(event => {
+  react.useEffect(() => observer.onInternalUpdate(event => {
+    var input = inputRef.current;
+    if (input && input instanceof HTMLFieldSetElement && event.target === input.form) {
+      pendingDefaultValueSyncRef.current = true;
+    }
+  }), [observer]);
+  var payloadSnapshot = react.useSyncExternalStore(react.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: dom.getRadioGroupValue(input),
-      options: dom.getCheckboxGroupValue(input)
-    } : dom.getInputSnapshot(input);
+    var next = input ? dom.resolveControlPayload(input) : defaultValue;
     if (future.deepEqual(prev, next)) {
       return prev;
     }
@@ -673,7 +705,8 @@ function useControl(options) {
   react.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);
@@ -701,10 +734,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 => future.isGlobalInstance(item, 'File'))) {
+        return payloadSnapshot;
+      }
+      return undefined;
+    },
     formRef,
     register: react.useCallback(element => {
       if (!element) {
@@ -718,17 +803,16 @@ function useControl(options) {
           element.hidden = true;
           element.removeAttribute('type');
         }
-        if (shouldHandleFocus) {
-          dom.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;
         }
         dom.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);
@@ -738,39 +822,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) {
-            dom.makeInputFocusable(input);
+        if ('defaultValue' in optionsRef.current) {
+          for (var input of inputs) {
+            var _optionsRef$current7;
+            dom.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
+            });
           }
-          dom.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: react.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.
+          reactDom.flushSync(() => {
+            setDefaultValue(serializedValue);
+          });
+        }
         if (element) {
-          future.change(element, typeof value === 'boolean' ? value ? element.value : null : value);
+          future.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) {
@@ -881,6 +962,149 @@ function useLatest(value) {
   return ref;
 }
 
+/**
+ * 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__*/react.forwardRef(function BaseControl(props, ref) {
+  function formatValue(value) {
+    var serialized = future.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 (future.isPlainObject(value)) {
+      return Object.entries(value).map(_ref5 => {
+        var [key, val] = _ref5;
+        return renderInput("".concat(name, ".").concat(key), val, form);
+      });
+    }
+    return /*#__PURE__*/jsxRuntime.jsx("input", {
+      name: name,
+      defaultValue: formatValue(value),
+      form: form
+    }, name);
+  }
+  if (props.type === 'fieldset') {
+    var {
+        name,
+        form,
+        defaultValue: _defaultValue,
+        hidden: _hidden = true
+      } = props,
+      fieldsetProps = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded2);
+    return /*#__PURE__*/jsxRuntime.jsx("fieldset", _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.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 = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded3);
+    if (multiple) {
+      var defaultOptions = Array.isArray(_defaultValue2) ? _defaultValue2.map(formatValue) : [formatValue(_defaultValue2)];
+      return /*#__PURE__*/jsxRuntime.jsx("select", _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, selectProps), {}, {
+        ref: ref,
+        defaultValue: defaultOptions,
+        hidden: _hidden2,
+        multiple: true,
+        children: defaultOptions.map((option, index) => /*#__PURE__*/jsxRuntime.jsx("option", {
+          value: option,
+          children: option
+        }, index))
+      }));
+    }
+    var defaultOption = formatValue(_defaultValue2);
+    return /*#__PURE__*/jsxRuntime.jsx("select", _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, selectProps), {}, {
+      ref: ref,
+      defaultValue: defaultOption,
+      hidden: _hidden2,
+      children: [defaultOption].map((option, index) => /*#__PURE__*/jsxRuntime.jsx("option", {
+        value: option,
+        children: option
+      }, index))
+    }));
+  }
+  if (props.type === 'textarea') {
+    var {
+        defaultValue: _defaultValue3,
+        hidden: _hidden3 = true
+      } = props,
+      textareaProps = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded4);
+    return /*#__PURE__*/jsxRuntime.jsx("textarea", _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.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 = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded5);
+    return /*#__PURE__*/jsxRuntime.jsx("input", _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, _inputProps), {}, {
+      ref: ref,
+      value: value,
+      hidden: _hidden4
+    }));
+  }
+  var {
+      defaultValue,
+      hidden = true
+    } = props,
+    inputProps = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded6);
+  return /*#__PURE__*/jsxRuntime.jsx("input", _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, inputProps), {}, {
+    ref: ref,
+    defaultValue: defaultValue !== undefined ? formatValue(defaultValue) : undefined,
+    hidden: hidden
+  }));
+});
+
+exports.BaseControl = BaseControl;
 exports.FormContextContext = FormContextContext;
 exports.FormOptionsProvider = FormOptionsProvider;
 exports.FormProvider = FormProvider;