@conform-to/react 1.13.3 → 1.14.0

package/README.md

@@ -7,7 +7,7 @@
  ╚══════╝  ╚═════╝  ╚═╝  ╚══╝ ╚═╝        ╚═════╝  ╚═╝   ╚═╝ ╚═╝   ╚═╝
 ```
 
-Version 1.13.3 / License MIT / Copyright (c) 2025 Edmund Hung
+Version 1.14.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/dom.d.ts

@@ -3,9 +3,9 @@ import type { ErrorContext, FormRef, InputSnapshot, IntentDispatcher } from './t
 export declare function getFormElement(formRef: FormRef | undefined): HTMLFormElement | null;
 export declare function getSubmitEvent(event: React.FormEvent<HTMLFormElement>): SubmitEvent;
 export declare function initializeField(element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, options: {
-    defaultValue?: string | string[] | File | File[] | null;
-    defaultChecked?: boolean;
-    value?: string;
+    defaultValue?: string | string[] | File | File[] | null | undefined;
+    defaultChecked?: boolean | undefined;
+    value?: string | undefined;
 } | undefined): void;
 /**
  * Makes hidden form inputs focusable with visually hidden styles
@@ -27,7 +27,8 @@ export declare function createDefaultSnapshot(defaultValue: string | string[] |
  * Does nothing if the submission was triggered with a specific intent (e.g. validate / insert)
  */
 export declare function focusFirstInvalidField<ErrorShape>(ctx: ErrorContext<ErrorShape>): void;
-export declare function updateFormValue(form: HTMLFormElement, intendedValue: Record<string, unknown>, serialize: Serialize): void;
+export declare function updateFormValue(form: HTMLFormElement, targetValue: Record<string, unknown>, serialize: Serialize): void;
+export declare function resetFormValue(form: HTMLFormElement, defaultValue: Record<string, unknown>, serialize: Serialize): void;
 /**
  * Creates a proxy that dynamically generates intent dispatch functions.
  * Each property access returns a function that submits the intent to the form.

package/dist/future/dom.js

@@ -173,22 +173,35 @@ function focusFirstInvalidField(ctx) {
     }
   }
 }
-function updateFormValue(form, intendedValue, serialize) {
+function updateFormValue(form, targetValue, serialize) {
   for (var element of form.elements) {
-    if (future.isFieldElement(element) && element.name) {
-      var fieldValue = future.getValueAtPath(intendedValue, element.name);
-      if (element.type === 'file' && typeof fieldValue === 'undefined') {
-        // Do not update file inputs unless there's an intended value
+    if (future.isFieldElement(element) && element.name && element.type !== 'hidden') {
+      var fieldValue = future.getValueAtPath(targetValue, element.name);
+      if (element.type === 'file' && fieldValue === undefined) {
+        // Do not update file inputs unless there's a target value
         continue;
       }
-      var serializedValue = serialize(fieldValue);
-      var value = typeof serializedValue !== 'undefined' ? serializedValue : future.getFieldDefaultValue(element);
-      future.change(element, value, {
+      var value = serialize(fieldValue);
+
+      // Treat undefined as null to clear the field value
+      future.change(element, value !== undefined ? value : null, {
         preventDefault: true
       });
     }
   }
 }
+function resetFormValue(form, defaultValue, serialize) {
+  for (var element of form.elements) {
+    if (future.isFieldElement(element) && element.name && element.type !== 'hidden' && element.type !== 'file') {
+      var fieldValue = future.getValueAtPath(defaultValue, element.name);
+      var value = serialize(fieldValue);
+      future.updateField(element, {
+        defaultValue: value !== undefined ? value : null
+      });
+    }
+  }
+  form.reset();
+}
 
 /**
  * Creates a proxy that dynamically generates intent dispatch functions.
@@ -226,4 +239,5 @@ exports.getRadioGroupValue = getRadioGroupValue;
 exports.getSubmitEvent = getSubmitEvent;
 exports.initializeField = initializeField;
 exports.makeInputFocusable = makeInputFocusable;
+exports.resetFormValue = resetFormValue;
 exports.updateFormValue = updateFormValue;

package/dist/future/dom.mjs

@@ -1,4 +1,4 @@
-import { updateField, isGlobalInstance, isFieldElement, requestIntent, getValueAtPath, getFieldDefaultValue, change } from '@conform-to/dom/future';
+import { updateField, isGlobalInstance, isFieldElement, requestIntent, getValueAtPath, change } from '@conform-to/dom/future';
 import { serializeIntent } from './intent.mjs';
 
 function getFormElement(formRef) {
@@ -169,22 +169,35 @@ function focusFirstInvalidField(ctx) {
     }
   }
 }
-function updateFormValue(form, intendedValue, serialize) {
+function updateFormValue(form, targetValue, serialize) {
   for (var element of form.elements) {
-    if (isFieldElement(element) && element.name) {
-      var fieldValue = getValueAtPath(intendedValue, element.name);
-      if (element.type === 'file' && typeof fieldValue === 'undefined') {
-        // Do not update file inputs unless there's an intended value
+    if (isFieldElement(element) && element.name && element.type !== 'hidden') {
+      var fieldValue = getValueAtPath(targetValue, element.name);
+      if (element.type === 'file' && fieldValue === undefined) {
+        // Do not update file inputs unless there's a target value
         continue;
       }
-      var serializedValue = serialize(fieldValue);
-      var value = typeof serializedValue !== 'undefined' ? serializedValue : getFieldDefaultValue(element);
-      change(element, value, {
+      var value = serialize(fieldValue);
+
+      // Treat undefined as null to clear the field value
+      change(element, value !== undefined ? value : null, {
         preventDefault: true
       });
     }
   }
 }
+function resetFormValue(form, defaultValue, serialize) {
+  for (var element of form.elements) {
+    if (isFieldElement(element) && element.name && element.type !== 'hidden' && element.type !== 'file') {
+      var fieldValue = getValueAtPath(defaultValue, element.name);
+      var value = serialize(fieldValue);
+      updateField(element, {
+        defaultValue: value !== undefined ? value : null
+      });
+    }
+  }
+  form.reset();
+}
 
 /**
  * Creates a proxy that dynamically generates intent dispatch functions.
@@ -212,4 +225,4 @@ function createIntentDispatcher(formElement, intentName) {
   });
 }
 
-export { createDefaultSnapshot, createIntentDispatcher, focusFirstInvalidField, getCheckboxGroupValue, getFormElement, getInputSnapshot, getRadioGroupValue, getSubmitEvent, initializeField, makeInputFocusable, updateFormValue };
+export { createDefaultSnapshot, createIntentDispatcher, focusFirstInvalidField, getCheckboxGroupValue, getFormElement, getInputSnapshot, getRadioGroupValue, getSubmitEvent, initializeField, makeInputFocusable, resetFormValue, updateFormValue };

package/dist/future/hooks.d.ts

@@ -1,6 +1,7 @@
-import { type Serialize, type SubmissionResult, createGlobalFormsObserver } from '@conform-to/dom/future';
+import { type FormValue, type Serialize, type SubmissionResult, createGlobalFormsObserver } from '@conform-to/dom/future';
 import { useEffect } from 'react';
-import type { FormContext, IntentDispatcher, FormMetadata, Fieldset, GlobalFormOptions, FormOptions, FieldName, FieldMetadata, Control, Selector, UseFormDataOptions, ValidateHandler, ErrorHandler, SubmitHandler, FormState, FormRef, BaseErrorShape, DefaultErrorShape } from './types';
+import type { FormContext, IntentDispatcher, FormMetadata, Fieldset, GlobalFormOptions, FormOptions, FieldName, FieldMetadata, Control, Selector, UseFormDataOptions, ValidateHandler, ErrorHandler, SubmitHandler, FormState, FormRef, BaseErrorShape, DefaultErrorShape, BaseSchemaType, InferInput, InferOutput } from './types';
+import { StandardSchemaV1 } from './standard-schema';
 export declare const INITIAL_KEY = "INITIAL_KEY";
 export declare const GlobalFormOptionsContext: import("react").Context<GlobalFormOptions & {
     observer: ReturnType<typeof createGlobalFormsObserver>;
@@ -22,24 +23,46 @@ 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.
  */
-export declare function useConform<ErrorShape, Value = undefined>(formRef: FormRef, options: {
-    key?: string;
+export declare function useConform<FormShape extends Record<string, any>, ErrorShape, Value = undefined, SchemaValue = undefined>(formRef: FormRef, options: {
+    key?: string | undefined;
+    defaultValue?: Record<string, FormValue> | null | undefined;
     serialize: Serialize;
     intentName: string;
-    lastResult?: SubmissionResult<NoInfer<ErrorShape>> | null;
-    onValidate?: ValidateHandler<ErrorShape, Value>;
-    onError?: ErrorHandler<ErrorShape>;
-    onSubmit?: SubmitHandler<NoInfer<ErrorShape>, NoInfer<Value>>;
+    lastResult?: SubmissionResult<NoInfer<ErrorShape>> | null | undefined;
+    onValidate?: ValidateHandler<ErrorShape, Value, SchemaValue> | undefined;
+    onError?: ErrorHandler<ErrorShape> | undefined;
+    onSubmit?: SubmitHandler<FormShape, NoInfer<ErrorShape>, NoInfer<Value>> | undefined;
 }): [FormState<ErrorShape>, (event: React.FormEvent<HTMLFormElement>) => void];
 /**
  * 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
+ * @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 }) {
+ *    onValidate({ payload, error }) {
  *     if (!payload.email) {
  * 		 error.fieldErrors.email = ['Required'];
  *     }
@@ -55,7 +78,29 @@ export declare function useConform<ErrorShape, Value = undefined>(formRef: FormR
  * );
  * ```
  */
-export declare function useForm<FormShape extends Record<string, any> = Record<string, any>, ErrorShape extends BaseErrorShape = DefaultErrorShape, Value = undefined>(options: FormOptions<FormShape, ErrorShape, Value>): {
+export declare function useForm<Schema extends BaseSchemaType, ErrorShape extends BaseErrorShape = DefaultErrorShape, Value = InferOutput<Schema>>(schema: Schema, options: FormOptions<InferInput<Schema>, ErrorShape, Value, Schema, string extends ErrorShape ? never : 'onValidate'>): {
+    form: FormMetadata<ErrorShape>;
+    fields: Fieldset<InferInput<Schema>, ErrorShape>;
+    intent: IntentDispatcher<InferInput<Schema>>;
+};
+/**
+ * @deprecated Use `useForm(schema, options)` instead for better type inference.
+ */
+export declare function useForm<FormShape extends Record<string, any> = Record<string, any>, ErrorShape extends BaseErrorShape = DefaultErrorShape, Value = undefined>(options: FormOptions<FormShape, ErrorShape, Value, undefined, undefined extends Value ? 'onValidate' : never> & {
+    /**
+     * @deprecated Use `useForm(schema, options)` instead for better type inference.
+     *
+     * Optional standard schema for validation (e.g., Zod, Valibot, Yup).
+     * Removes the need for manual onValidate setup.
+     *
+     */
+    schema: StandardSchemaV1<FormShape, Value>;
+}): {
+    form: FormMetadata<ErrorShape>;
+    fields: Fieldset<FormShape, ErrorShape>;
+    intent: IntentDispatcher<FormShape>;
+};
+export declare function useForm<FormShape extends Record<string, any> = Record<string, any>, ErrorShape extends BaseErrorShape = DefaultErrorShape, Value = undefined>(options: FormOptions<FormShape, ErrorShape, Value, undefined, 'onValidate'>): {
     form: FormMetadata<ErrorShape>;
     fields: Fieldset<FormShape, ErrorShape>;
     intent: IntentDispatcher<FormShape>;

package/dist/future/hooks.js

@@ -13,6 +13,8 @@ var dom = require('./dom.js');
 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 INITIAL_KEY = 'INITIAL_KEY';
 var GlobalFormOptionsContext = /*#__PURE__*/react.createContext({
   intentName: future.DEFAULT_INTENT_NAME,
@@ -66,14 +68,20 @@ function useConform(formRef, options) {
     lastResult
   } = options;
   var [state$1, setState] = react.useState(() => {
-    var state$1 = state.initializeState(INITIAL_KEY);
+    var state$1 = state.initializeState({
+      defaultValue: options.defaultValue,
+      resetKey: INITIAL_KEY
+    });
     if (lastResult) {
       state$1 = state.updateState(state$1, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, lastResult), {}, {
         type: 'initialize',
         intent: lastResult.submission.intent ? intent.deserializeIntent(lastResult.submission.intent) : null,
         ctx: {
           handlers: intent.actionHandlers,
-          reset: () => state$1
+          reset: defaultValue => state.initializeState({
+            defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : options.defaultValue,
+            resetKey: INITIAL_KEY
+          })
         }
       }));
     }
@@ -83,22 +91,27 @@ function useConform(formRef, options) {
   var resetKeyRef = react.useRef(state$1.resetKey);
   var optionsRef = useLatest(options);
   var lastResultRef = react.useRef(lastResult);
-  var lastIntentedValueRef = react.useRef();
+  var pendingValueRef = react.useRef();
   var lastAsyncResultRef = react.useRef(null);
   var abortControllerRef = react.useRef(null);
-  var handleSubmission = react.useCallback((type, result) => {
+  var handleSubmission = react.useCallback(function (type, result) {
     var _optionsRef$current$o, _optionsRef$current;
+    var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 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,
       intent: intent$1,
       ctx: {
         handlers: intent.actionHandlers,
-        reset() {
-          return state.initializeState();
+        reset(defaultValue) {
+          return state.initializeState({
+            defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : options.defaultValue
+          });
         }
       }
     })));
+
+    // TODO: move on error handler to a new effect
     var formElement = dom.getFormElement(formRef);
     if (!formElement || !result.error) {
       return;
@@ -109,6 +122,15 @@ function useConform(formRef, options) {
       intent: intent$1
     });
   }, [formRef, optionsRef]);
+  if (options.key !== keyRef.current) {
+    keyRef.current = options.key;
+    setState(state.initializeState({
+      defaultValue: options.defaultValue
+    }));
+  } else if (lastResult && lastResult !== lastResultRef.current) {
+    lastResultRef.current = lastResult;
+    handleSubmission('server', lastResult, options);
+  }
   react.useEffect(() => {
     return () => {
       var _abortControllerRef$c;
@@ -116,42 +138,28 @@ function useConform(formRef, options) {
       (_abortControllerRef$c = abortControllerRef.current) === null || _abortControllerRef$c === void 0 || _abortControllerRef$c.abort('The component is unmounted');
     };
   }, []);
-  react.useEffect(() => {
-    // To avoid re-applying the same result twice
-    if (lastResult && lastResult !== lastResultRef.current) {
-      handleSubmission('server', lastResult);
-      lastResultRef.current = lastResult;
-    }
-  }, [lastResult, handleSubmission]);
-  react.useEffect(() => {
-    // Reset the form state if the form key changes
-    if (options.key !== keyRef.current) {
-      keyRef.current = options.key;
-      setState(state.initializeState());
-    }
-  }, [options.key]);
-  react.useEffect(() => {
+  useSafeLayoutEffect(() => {
     var formElement = dom.getFormElement(formRef);
 
     // Reset the form values if the reset key changes
     if (formElement && state$1.resetKey !== resetKeyRef.current) {
       resetKeyRef.current = state$1.resetKey;
-      formElement.reset();
-    }
-  }, [formRef, state$1.resetKey]);
-  react.useEffect(() => {
-    if (!state$1.clientIntendedValue) {
-      return;
+      dom.resetFormValue(formElement, state$1.defaultValue, optionsRef.current.serialize);
+      pendingValueRef.current = undefined;
     }
-    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;
+  }, [formRef, state$1.resetKey, state$1.defaultValue, optionsRef]);
+  useSafeLayoutEffect(() => {
+    if (state$1.targetValue) {
+      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.clientIntendedValue, optionsRef.current.serialize);
-    lastIntentedValueRef.current = undefined;
-  }, [formRef, state$1.clientIntendedValue, optionsRef]);
+    pendingValueRef.current = undefined;
+  }, [formRef, state$1.targetValue, optionsRef]);
   var handleSubmit = react.useCallback(event => {
     var _abortControllerRef$c2, _lastAsyncResultRef$c;
     var abortController = new AbortController();
@@ -184,22 +192,25 @@ function useConform(formRef, options) {
         }
       }
 
-      // Override submission value if the last intended value is not applied yet (i.e. batch updates)
-      if (lastIntentedValueRef.current != null) {
-        submission.payload = lastIntentedValueRef.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 intendedValue = intent.applyIntent(submission);
-
-      // Update the last intended value in case there will be another intent dispatched
-      lastIntentedValueRef.current = intendedValue === submission.payload ? undefined : intendedValue;
+      var value = intent.applyIntent(submission);
       var submissionResult = future.report(submission, {
         keepFiles: true,
-        intendedValue
+        value
       });
+
+      // If there is target value, keep track of it as pending value
+      if (submission.payload !== value) {
+        var _ref;
+        pendingValueRef.current = (_ref = value !== null && value !== void 0 ? value : optionsRef.current.defaultValue) !== null && _ref !== void 0 ? _ref : {};
+      }
       var validateResult =
       // Skip validation on form reset
-      intendedValue !== null ? (_optionsRef$current$o2 = (_optionsRef$current2 = optionsRef.current).onValidate) === null || _optionsRef$current$o2 === void 0 ? void 0 : _optionsRef$current$o2.call(_optionsRef$current2, {
-        payload: intendedValue,
+      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: [],
           fieldErrors: {}
@@ -222,11 +233,11 @@ function useConform(formRef, options) {
       }
       if (typeof asyncResult !== 'undefined') {
         // Update the form when the validation result is resolved
-        asyncResult.then(_ref => {
+        asyncResult.then(_ref2 => {
           var {
             error,
             value
-          } = _ref;
+          } = _ref2;
           // Update the form with the validation result
           // There is no need to flush the update in this case
           if (!abortController.signal.aborted) {
@@ -290,11 +301,32 @@ function useConform(formRef, options) {
  * 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
+ * @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 }) {
+ *    onValidate({ payload, error }) {
  *     if (!payload.email) {
  * 		 error.fieldErrors.email = ['Required'];
  *     }
@@ -310,11 +342,25 @@ function useConform(formRef, options) {
  * );
  * ```
  */
-function useForm(options) {
-  var _optionsRef$current$o4;
+
+/**
+ * @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,
-    defaultValue,
     constraint
   } = options;
   var globalOptions = react.useContext(GlobalFormOptionsContext);
@@ -325,11 +371,11 @@ function useForm(options) {
   var [state$1, handleSubmit] = useConform(formId, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, options), {}, {
     serialize: globalOptions.serialize,
     intentName: globalOptions.intentName,
-    onError: (_optionsRef$current$o4 = optionsRef.current.onError) !== null && _optionsRef$current$o4 !== void 0 ? _optionsRef$current$o4 : dom.focusFirstInvalidField,
+    onError: (_options$onError = options.onError) !== null && _options$onError !== void 0 ? _options$onError : dom.focusFirstInvalidField,
     onValidate(ctx) {
-      var _options$onValidate, _options$onValidate2;
-      if (options.schema) {
-        var standardResult = options.schema['~standard'].validate(ctx.payload);
+      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') {
@@ -362,7 +408,7 @@ function useForm(options) {
         }
         return [validateResult.syncResult, validateResult.asyncResult];
       }
-      return (_options$onValidate = (_options$onValidate2 = options.onValidate) === null || _options$onValidate2 === void 0 ? void 0 : _options$onValidate2.call(options, ctx)) !== null && _options$onValidate !== void 0 ? _options$onValidate : {
+      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
@@ -374,15 +420,14 @@ function useForm(options) {
   var context = react.useMemo(() => ({
     formId,
     state: state$1,
-    defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : null,
     constraint: constraint !== null && constraint !== void 0 ? constraint : null,
-    handleSubmit: handleSubmit,
+    handleSubmit,
     handleInput(event) {
-      var _optionsRef$current$o5, _optionsRef$current4, _globalOptionsRef$cur;
+      var _optionsRef$current$o4, _optionsRef$current4, _globalOptionsRef$cur;
       if (!future.isFieldElement(event.target) || event.target.name === '' || event.target.form === null || event.target.form !== dom.getFormElement(formId)) {
         return;
       }
-      (_optionsRef$current$o5 = (_optionsRef$current4 = optionsRef.current).onInput) === null || _optionsRef$current$o5 === void 0 || _optionsRef$current$o5.call(_optionsRef$current4, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, event), {}, {
+      (_optionsRef$current$o4 = (_optionsRef$current4 = optionsRef.current).onInput) === null || _optionsRef$current$o4 === void 0 || _optionsRef$current$o4.call(_optionsRef$current4, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, event), {}, {
         target: event.target,
         currentTarget: event.target.form
       }));
@@ -398,11 +443,11 @@ function useForm(options) {
       }
     },
     handleBlur(event) {
-      var _optionsRef$current$o6, _optionsRef$current5, _globalOptionsRef$cur2;
+      var _optionsRef$current$o5, _optionsRef$current5, _globalOptionsRef$cur2;
       if (!future.isFieldElement(event.target) || event.target.name === '' || event.target.form === null || event.target.form !== dom.getFormElement(formId)) {
         return;
       }
-      (_optionsRef$current$o6 = (_optionsRef$current5 = optionsRef.current).onBlur) === null || _optionsRef$current$o6 === void 0 || _optionsRef$current$o6.call(_optionsRef$current5, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, event), {}, {
+      (_optionsRef$current$o5 = (_optionsRef$current5 = optionsRef.current).onBlur) === null || _optionsRef$current$o5 === void 0 || _optionsRef$current$o5.call(_optionsRef$current5, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, event), {}, {
         target: event.target,
         currentTarget: event.target.form
       }));
@@ -417,7 +462,7 @@ function useForm(options) {
         intent.validate(event.target.name);
       }
     }
-  }), [formId, state$1, defaultValue, constraint, handleSubmit, intent, optionsRef, globalOptionsRef]);
+  }), [formId, state$1, constraint, handleSubmit, intent, optionsRef, globalOptionsRef]);
   var form = react.useMemo(() => state.getFormMetadata(context, {
     serialize: globalOptions.serialize,
     customize: globalOptions.defineCustomMetadata
@@ -614,6 +659,13 @@ function useControl(options) {
         inputRef.current = null;
       } else if (future.isFieldElement(element)) {
         inputRef.current = element;
+
+        // Conform excludes hidden type inputs by default when updating form values
+        // Fix that by using the hidden attribute instead
+        if (element.type === 'hidden') {
+          element.hidden = true;
+          element.removeAttribute('type');
+        }
         if (shouldHandleFocus) {
           dom.makeInputFocusable(element);
         }
@@ -722,16 +774,16 @@ function useFormData(formRef, select, options) {
     var formElement = dom.getFormElement(formRef);
     if (formElement) {
       var formData = future.getFormData(formElement);
-      formDataRef.current = options !== null && options !== void 0 && options.acceptFiles ? formData : new URLSearchParams(Array.from(formData).map(_ref2 => {
-        var [key, value] = _ref2;
+      formDataRef.current = options !== null && options !== void 0 && options.acceptFiles ? formData : new URLSearchParams(Array.from(formData).map(_ref3 => {
+        var [key, value] = _ref3;
         return [key, value.toString()];
       }));
     }
     var unsubscribe = observer.onFormUpdate(event => {
       if (event.target === dom.getFormElement(formRef)) {
         var _formData = future.getFormData(event.target, event.submitter);
-        formDataRef.current = options !== null && options !== void 0 && options.acceptFiles ? _formData : new URLSearchParams(Array.from(_formData).map(_ref3 => {
-          var [key, value] = _ref3;
+        formDataRef.current = options !== null && options !== void 0 && options.acceptFiles ? _formData : new URLSearchParams(Array.from(_formData).map(_ref4 => {
+          var [key, value] = _ref4;
           return [key, value.toString()];
         }));
         callback();