@conform-to/react 1.13.2 → 1.14.0

package/dist/future/hooks.mjs

@@ -5,10 +5,12 @@ import { createContext, useContext, useMemo, useId, useRef, useEffect, useSyncEx
 import { resolveStandardSchemaResult, resolveValidateResult, appendUniqueItem } from './util.mjs';
 import { isTouched, getFormMetadata, getFieldset, getField, initializeState, updateState } from './state.mjs';
 import { deserializeIntent, actionHandlers, applyIntent } from './intent.mjs';
-import { focusFirstInvalidField, getFormElement, createIntentDispatcher, createDefaultSnapshot, getRadioGroupValue, getCheckboxGroupValue, getInputSnapshot, makeInputFocusable, initializeField, updateFormValue, getSubmitEvent } from './dom.mjs';
+import { focusFirstInvalidField, getFormElement, createIntentDispatcher, createDefaultSnapshot, getRadioGroupValue, getCheckboxGroupValue, getInputSnapshot, makeInputFocusable, initializeField, resetFormValue, updateFormValue, getSubmitEvent } from './dom.mjs';
 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 INITIAL_KEY = 'INITIAL_KEY';
 var GlobalFormOptionsContext = /*#__PURE__*/createContext({
   intentName: DEFAULT_INTENT_NAME,
@@ -62,14 +64,20 @@ function useConform(formRef, options) {
     lastResult
   } = options;
   var [state, setState] = useState(() => {
-    var state = initializeState(INITIAL_KEY);
+    var state = initializeState({
+      defaultValue: options.defaultValue,
+      resetKey: INITIAL_KEY
+    });
     if (lastResult) {
       state = updateState(state, _objectSpread2(_objectSpread2({}, lastResult), {}, {
         type: 'initialize',
         intent: lastResult.submission.intent ? deserializeIntent(lastResult.submission.intent) : null,
         ctx: {
           handlers: actionHandlers,
-          reset: () => state
+          reset: defaultValue => initializeState({
+            defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : options.defaultValue,
+            resetKey: INITIAL_KEY
+          })
         }
       }));
     }
@@ -79,22 +87,27 @@ function useConform(formRef, options) {
   var resetKeyRef = useRef(state.resetKey);
   var optionsRef = useLatest(options);
   var lastResultRef = useRef(lastResult);
-  var lastIntentedValueRef = useRef();
+  var pendingValueRef = useRef();
   var lastAsyncResultRef = useRef(null);
   var abortControllerRef = useRef(null);
-  var handleSubmission = useCallback((type, result) => {
+  var handleSubmission = useCallback(function (type, result) {
     var _optionsRef$current$o, _optionsRef$current;
+    var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : optionsRef.current;
     var intent = result.submission.intent ? deserializeIntent(result.submission.intent) : null;
     setState(state => updateState(state, _objectSpread2(_objectSpread2({}, result), {}, {
       type,
       intent,
       ctx: {
         handlers: actionHandlers,
-        reset() {
-          return initializeState();
+        reset(defaultValue) {
+          return initializeState({
+            defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : options.defaultValue
+          });
         }
       }
     })));
+
+    // TODO: move on error handler to a new effect
     var formElement = getFormElement(formRef);
     if (!formElement || !result.error) {
       return;
@@ -105,6 +118,15 @@ function useConform(formRef, options) {
       intent
     });
   }, [formRef, optionsRef]);
+  if (options.key !== keyRef.current) {
+    keyRef.current = options.key;
+    setState(initializeState({
+      defaultValue: options.defaultValue
+    }));
+  } else if (lastResult && lastResult !== lastResultRef.current) {
+    lastResultRef.current = lastResult;
+    handleSubmission('server', lastResult, options);
+  }
   useEffect(() => {
     return () => {
       var _abortControllerRef$c;
@@ -112,42 +134,28 @@ function useConform(formRef, options) {
       (_abortControllerRef$c = abortControllerRef.current) === null || _abortControllerRef$c === void 0 || _abortControllerRef$c.abort('The component is unmounted');
     };
   }, []);
-  useEffect(() => {
-    // To avoid re-applying the same result twice
-    if (lastResult && lastResult !== lastResultRef.current) {
-      handleSubmission('server', lastResult);
-      lastResultRef.current = lastResult;
-    }
-  }, [lastResult, handleSubmission]);
-  useEffect(() => {
-    // Reset the form state if the form key changes
-    if (options.key !== keyRef.current) {
-      keyRef.current = options.key;
-      setState(initializeState());
-    }
-  }, [options.key]);
-  useEffect(() => {
+  useSafeLayoutEffect(() => {
     var formElement = getFormElement(formRef);
 
     // Reset the form values if the reset key changes
     if (formElement && state.resetKey !== resetKeyRef.current) {
       resetKeyRef.current = state.resetKey;
-      formElement.reset();
-    }
-  }, [formRef, state.resetKey]);
-  useEffect(() => {
-    if (!state.clientIntendedValue) {
-      return;
+      resetFormValue(formElement, state.defaultValue, optionsRef.current.serialize);
+      pendingValueRef.current = undefined;
     }
-    var formElement = getFormElement(formRef);
-    if (!formElement) {
-      // eslint-disable-next-line no-console
-      console.error('Failed to update form value; No form element found');
-      return;
+  }, [formRef, state.resetKey, state.defaultValue, optionsRef]);
+  useSafeLayoutEffect(() => {
+    if (state.targetValue) {
+      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.clientIntendedValue, optionsRef.current.serialize);
-    lastIntentedValueRef.current = undefined;
-  }, [formRef, state.clientIntendedValue, optionsRef]);
+    pendingValueRef.current = undefined;
+  }, [formRef, state.targetValue, optionsRef]);
   var handleSubmit = useCallback(event => {
     var _abortControllerRef$c2, _lastAsyncResultRef$c;
     var abortController = new AbortController();
@@ -180,22 +188,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 = applyIntent(submission);
-
-      // Update the last intended value in case there will be another intent dispatched
-      lastIntentedValueRef.current = intendedValue === submission.payload ? undefined : intendedValue;
+      var value = applyIntent(submission);
       var submissionResult = 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: {}
@@ -218,11 +229,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) {
@@ -286,11 +297,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'];
  *     }
@@ -306,11 +338,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 = useContext(GlobalFormOptionsContext);
@@ -321,11 +367,11 @@ function useForm(options) {
   var [state, handleSubmit] = useConform(formId, _objectSpread2(_objectSpread2({}, options), {}, {
     serialize: globalOptions.serialize,
     intentName: globalOptions.intentName,
-    onError: (_optionsRef$current$o4 = optionsRef.current.onError) !== null && _optionsRef$current$o4 !== void 0 ? _optionsRef$current$o4 : focusFirstInvalidField,
+    onError: (_options$onError = options.onError) !== null && _options$onError !== void 0 ? _options$onError : 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') {
@@ -358,7 +404,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
@@ -370,15 +416,14 @@ function useForm(options) {
   var context = useMemo(() => ({
     formId,
     state,
-    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 (!isFieldElement(event.target) || event.target.name === '' || event.target.form === null || event.target.form !== getFormElement(formId)) {
         return;
       }
-      (_optionsRef$current$o5 = (_optionsRef$current4 = optionsRef.current).onInput) === null || _optionsRef$current$o5 === void 0 || _optionsRef$current$o5.call(_optionsRef$current4, _objectSpread2(_objectSpread2({}, event), {}, {
+      (_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
       }));
@@ -394,11 +439,11 @@ function useForm(options) {
       }
     },
     handleBlur(event) {
-      var _optionsRef$current$o6, _optionsRef$current5, _globalOptionsRef$cur2;
+      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$o6 = (_optionsRef$current5 = optionsRef.current).onBlur) === null || _optionsRef$current$o6 === void 0 || _optionsRef$current$o6.call(_optionsRef$current5, _objectSpread2(_objectSpread2({}, event), {}, {
+      (_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
       }));
@@ -413,7 +458,7 @@ function useForm(options) {
         intent.validate(event.target.name);
       }
     }
-  }), [formId, state, defaultValue, constraint, handleSubmit, intent, optionsRef, globalOptionsRef]);
+  }), [formId, state, constraint, handleSubmit, intent, optionsRef, globalOptionsRef]);
   var form = useMemo(() => getFormMetadata(context, {
     serialize: globalOptions.serialize,
     customize: globalOptions.defineCustomMetadata
@@ -610,6 +655,13 @@ function useControl(options) {
         inputRef.current = null;
       } else if (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) {
           makeInputFocusable(element);
         }
@@ -718,16 +770,16 @@ function useFormData(formRef, select, options) {
     var formElement = getFormElement(formRef);
     if (formElement) {
       var formData = 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 === getFormElement(formRef)) {
         var _formData = 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();

package/dist/future/intent.d.ts

@@ -14,7 +14,7 @@ export declare function deserializeIntent(value: string): UnknownIntent;
  */
 export declare function applyIntent(submission: Submission, options?: {
     handlers?: Record<string, ActionHandler>;
-}): Record<string, FormValue> | null;
+}): Record<string, FormValue> | undefined;
 export declare function insertItem<Item>(list: Array<Item>, item: Item, index: number): void;
 export declare function removeItem(list: Array<unknown>, index: number): void;
 export declare function reorderItems(list: Array<unknown>, fromIndex: number, toIndex: number): void;

package/dist/future/intent.js

@@ -96,20 +96,17 @@ var actionHandlers = {
       return util.isOptional(options, future.isPlainObject) && (util.isUndefined(options === null || options === void 0 ? void 0 : options.defaultValue) || util.isNullable(options === null || options === void 0 ? void 0 : options.defaultValue, future.isPlainObject));
     },
     onApply(_, options) {
-      var {
-        defaultValue
-      } = options !== null && options !== void 0 ? options : {};
-      return defaultValue !== null && defaultValue !== void 0 ? defaultValue : defaultValue === null ? {} : null;
+      if ((options === null || options === void 0 ? void 0 : options.defaultValue) === null) {
+        return {};
+      }
+      return options === null || options === void 0 ? void 0 : options.defaultValue;
     },
     onUpdate(_, _ref) {
-      var _intent$payload;
       var {
-        intent
+        targetValue,
+        ctx
       } = _ref;
-      var defaultValue = (_intent$payload = intent.payload) === null || _intent$payload === void 0 ? void 0 : _intent$payload.defaultValue;
-      return util.merge(state.initializeState(), {
-        serverIntendedValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : defaultValue === null ? {} : null
-      });
+      return ctx.reset(targetValue);
     }
   },
   validate: {
@@ -117,13 +114,13 @@ var actionHandlers = {
       return util.isOptional(name, util.isString);
     },
     onUpdate(state, _ref2) {
-      var _intent$payload2;
+      var _intent$payload;
       var {
         submission,
         intent,
         error
       } = _ref2;
-      var name = (_intent$payload2 = intent.payload) !== null && _intent$payload2 !== void 0 ? _intent$payload2 : '';
+      var name = (_intent$payload = intent.payload) !== null && _intent$payload !== void 0 ? _intent$payload : '';
       var basePath = future.getPathSegments(name);
       var allFields = error ?
       // Consider fields / fieldset with errors as touched too
@@ -147,8 +144,7 @@ var actionHandlers = {
     onApply(value, options) {
       var _options$value;
       var name = future.appendPathSegment(options.name, options.index);
-      var newValue = (_options$value = options.value) !== null && _options$value !== void 0 ? _options$value : name === '' ? {} : null;
-      return util.updateValueAtPath(value, name, newValue);
+      return util.updateValueAtPath(value, name, (_options$value = options.value) !== null && _options$value !== void 0 ? _options$value : name === '' ? {} : null);
     },
     onUpdate(state, _ref3) {
       var {

package/dist/future/intent.mjs

@@ -1,7 +1,7 @@
 import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.mjs';
 import { getPathSegments, getRelativePath, isPlainObject, appendPathSegment } from '@conform-to/dom/future';
-import { isOptional, isUndefined, isNullable, merge, appendUniqueItem, updateValueAtPath, isString, getArrayAtPath, createPathIndexUpdater, compactMap, generateUniqueKey, isNumber, transformKeys } from './util.mjs';
-import { initializeState, getDefaultListKey } from './state.mjs';
+import { isOptional, isUndefined, isNullable, appendUniqueItem, merge, updateValueAtPath, isString, getArrayAtPath, createPathIndexUpdater, compactMap, generateUniqueKey, isNumber, transformKeys } from './util.mjs';
+import { getDefaultListKey } from './state.mjs';
 
 /**
  * Serializes intent to string format: "type" or "type(payload)".
@@ -92,20 +92,17 @@ var actionHandlers = {
       return isOptional(options, isPlainObject) && (isUndefined(options === null || options === void 0 ? void 0 : options.defaultValue) || isNullable(options === null || options === void 0 ? void 0 : options.defaultValue, isPlainObject));
     },
     onApply(_, options) {
-      var {
-        defaultValue
-      } = options !== null && options !== void 0 ? options : {};
-      return defaultValue !== null && defaultValue !== void 0 ? defaultValue : defaultValue === null ? {} : null;
+      if ((options === null || options === void 0 ? void 0 : options.defaultValue) === null) {
+        return {};
+      }
+      return options === null || options === void 0 ? void 0 : options.defaultValue;
     },
     onUpdate(_, _ref) {
-      var _intent$payload;
       var {
-        intent
+        targetValue,
+        ctx
       } = _ref;
-      var defaultValue = (_intent$payload = intent.payload) === null || _intent$payload === void 0 ? void 0 : _intent$payload.defaultValue;
-      return merge(initializeState(), {
-        serverIntendedValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : defaultValue === null ? {} : null
-      });
+      return ctx.reset(targetValue);
     }
   },
   validate: {
@@ -113,13 +110,13 @@ var actionHandlers = {
       return isOptional(name, isString);
     },
     onUpdate(state, _ref2) {
-      var _intent$payload2;
+      var _intent$payload;
       var {
         submission,
         intent,
         error
       } = _ref2;
-      var name = (_intent$payload2 = intent.payload) !== null && _intent$payload2 !== void 0 ? _intent$payload2 : '';
+      var name = (_intent$payload = intent.payload) !== null && _intent$payload !== void 0 ? _intent$payload : '';
       var basePath = getPathSegments(name);
       var allFields = error ?
       // Consider fields / fieldset with errors as touched too
@@ -143,8 +140,7 @@ var actionHandlers = {
     onApply(value, options) {
       var _options$value;
       var name = appendPathSegment(options.name, options.index);
-      var newValue = (_options$value = options.value) !== null && _options$value !== void 0 ? _options$value : name === '' ? {} : null;
-      return updateValueAtPath(value, name, newValue);
+      return updateValueAtPath(value, name, (_options$value = options.value) !== null && _options$value !== void 0 ? _options$value : name === '' ? {} : null);
     },
     onUpdate(state, _ref3) {
       var {

package/dist/future/state.d.ts

@@ -1,16 +1,24 @@
 import { type ValidationAttributes, type Serialize } from '@conform-to/dom/future';
 import type { FieldMetadata, FieldName, Fieldset, FormContext, FormMetadata, FormState, FormAction, UnknownIntent, ActionHandler, CustomMetadataDefinition } from './types';
-export declare function initializeState<ErrorShape>(resetKey?: string): FormState<ErrorShape>;
+export declare function initializeState<ErrorShape>(options?: {
+    defaultValue?: Record<string, unknown> | null | undefined;
+    resetKey?: string | undefined;
+}): FormState<ErrorShape>;
 /**
  * Updates form state based on action type:
- * - Client actions: update intended value and client errors
- * - Server actions: update server errors and clear client errors
- * - Initialize: set initial intended value
+ * - Client actions: update target value and client errors
+ * - Server actions: update server errors and clear client errors, with optional target value
+ * - Initialize: set initial server value
  */
 export declare function updateState<ErrorShape>(state: FormState<ErrorShape>, action: FormAction<ErrorShape, UnknownIntent | null, {
     handlers: Record<string, ActionHandler>;
-    reset: () => FormState<ErrorShape>;
+    reset: (defaultValue?: Record<string, unknown> | null | undefined) => FormState<ErrorShape>;
 }>): FormState<ErrorShape>;
+/**
+ * Removes list keys where array length has changed to force regeneration.
+ * Minimizes UI state loss by only invalidating keys when necessary.
+ */
+export declare function pruneListKeys(listKeys: Record<string, string[]>, targetValue: Record<string, unknown>): Record<string, string[]>;
 export declare function getDefaultValue(context: FormContext<any>, name: string, serialize?: Serialize): string;
 export declare function getDefaultOptions(context: FormContext<any>, name: string, serialize?: Serialize): string[];
 export declare function isDefaultChecked(context: FormContext<any>, name: string, serialize?: Serialize): boolean;
@@ -32,30 +40,30 @@ export declare function isValid(state: FormState<any>, name?: string): boolean;
  */
 export declare function getConstraint(context: FormContext<any>, name: string): ValidationAttributes | undefined;
 export declare function getFormMetadata<ErrorShape>(context: FormContext<ErrorShape>, options?: {
-    serialize?: Serialize;
-    customize?: CustomMetadataDefinition;
+    serialize?: Serialize | undefined;
+    customize?: CustomMetadataDefinition | undefined;
 }): FormMetadata<ErrorShape>;
 export declare function getField<FieldShape, ErrorShape = string>(context: FormContext<ErrorShape>, options: {
     name: FieldName<FieldShape>;
-    serialize?: Serialize;
-    customize?: CustomMetadataDefinition;
-    key?: string;
+    serialize?: Serialize | undefined;
+    customize?: CustomMetadataDefinition | undefined;
+    key?: string | undefined;
 }): FieldMetadata<FieldShape, ErrorShape>;
 /**
  * Creates a proxy that dynamically generates field objects when properties are accessed.
  */
 export declare function getFieldset<FieldShape = Record<string, any>, ErrorShape = string>(context: FormContext<ErrorShape>, options: {
-    name?: FieldName<FieldShape>;
-    serialize?: Serialize;
-    customize?: CustomMetadataDefinition;
+    name?: FieldName<FieldShape> | undefined;
+    serialize?: Serialize | undefined;
+    customize?: CustomMetadataDefinition | undefined;
 }): Fieldset<FieldShape, ErrorShape>;
 /**
  * Creates an array of field objects for list/array inputs
  */
 export declare function getFieldList<FieldShape = Array<any>, ErrorShape = string>(context: FormContext<ErrorShape>, options: {
     name: FieldName<FieldShape>;
-    serialize?: Serialize;
-    customize?: CustomMetadataDefinition;
+    serialize?: Serialize | undefined;
+    customize?: CustomMetadataDefinition | undefined;
 }): FieldMetadata<[
     FieldShape
 ] extends [Array<infer ItemShape> | null | undefined] ? ItemShape : unknown, ErrorShape>[];