@conform-to/react 1.15.0 → 1.16.0

package/dist/future/forms.mjs

@@ -0,0 +1,318 @@
+import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.mjs';
+import { isFieldElement } from '@conform-to/dom';
+import { DEFAULT_INTENT_NAME, serialize } from '@conform-to/dom/future';
+import { useContext, useMemo, useId, createContext } from 'react';
+import { focusFirstInvalidField, getFormElement, createIntentDispatcher } from './dom.mjs';
+import { useLatest, useConform } from './hooks.mjs';
+import { isTouched, getFormMetadata, getFieldset, getField } from './state.mjs';
+import { isStandardSchemaV1, validateStandardSchemaV1, resolveValidateResult } from './util.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+function configureForms() {
+  var _config$intentName, _config$serialize, _config$shouldValidat, _ref, _config$shouldRevalid, _config$isSchema, _config$validateSchem;
+  var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  /**
+   * Global configuration with defaults applied
+   */
+  var globalConfig = _objectSpread2(_objectSpread2({}, config), {}, {
+    intentName: (_config$intentName = config.intentName) !== null && _config$intentName !== void 0 ? _config$intentName : DEFAULT_INTENT_NAME,
+    serialize: (_config$serialize = config.serialize) !== null && _config$serialize !== void 0 ? _config$serialize : serialize,
+    shouldValidate: (_config$shouldValidat = config.shouldValidate) !== null && _config$shouldValidat !== void 0 ? _config$shouldValidat : 'onSubmit',
+    shouldRevalidate: (_ref = (_config$shouldRevalid = config.shouldRevalidate) !== null && _config$shouldRevalid !== void 0 ? _config$shouldRevalid : config.shouldValidate) !== null && _ref !== void 0 ? _ref : 'onSubmit',
+    isSchema: (_config$isSchema = config.isSchema) !== null && _config$isSchema !== void 0 ? _config$isSchema : isStandardSchemaV1,
+    validateSchema: (_config$validateSchem = config.validateSchema) !== null && _config$validateSchem !== void 0 ? _config$validateSchem : validateStandardSchemaV1
+  });
+
+  /**
+   * React context
+   */
+  var ReactFormContext = /*#__PURE__*/createContext([]);
+
+  /**
+   * Provides form context to child components.
+   * Stacks contexts to support nested forms, with latest context taking priority.
+   */
+  function FormProvider(props) {
+    var stack = useContext(ReactFormContext);
+    var value = useMemo(
+    // Put the latest form context first to ensure that to be the first one found
+    () => [props.context].concat(stack), [stack, props.context]);
+    return /*#__PURE__*/jsx(ReactFormContext.Provider, {
+      value: value,
+      children: props.children
+    });
+  }
+  function useFormContext(formId) {
+    var contexts = useContext(ReactFormContext);
+    var context = formId ? contexts.find(context => formId === context.formId) : contexts[0];
+    if (!context) {
+      throw new Error('No form context found. ' + 'Wrap your component with <FormProvider context={form.context}> ' + 'where `form` is returned from useForm().');
+    }
+    return context;
+  }
+
+  /**
+   * The main React hook for form management. Handles form state, validation, and submission
+   * while providing access to form metadata, field objects, and form actions.
+   *
+   * It can be called in two ways:
+   * - **Schema first**: Pass a schema as the first argument for automatic validation with type inference
+   * - **Manual configuration**: Pass options with custom `onValidate` handler for manual validation
+   *
+   * @see https://conform.guide/api/react/future/useForm
+   * @example Schema first setup with zod:
+   *
+   * ```tsx
+   * const { form, fields } = useForm(zodSchema, {
+   *   lastResult,
+   *   shouldValidate: 'onBlur',
+   * });
+   *
+   * return (
+   *   <form {...form.props}>
+   *     <input name={fields.email.name} defaultValue={fields.email.defaultValue} />
+   *     <div>{fields.email.errors}</div>
+   *   </form>
+   * );
+   * ```
+   *
+   * @example Manual configuration setup with custom validation:
+   *
+   * ```tsx
+   * const { form, fields } = useForm({
+   *    onValidate({ payload, error }) {
+   *     if (!payload.email) {
+   * 		 error.fieldErrors.email = ['Required'];
+   *     }
+   *     return error;
+   *   }
+   * });
+   *
+   * return (
+   *   <form {...form.props}>
+   *     <input name={fields.email.name} defaultValue={fields.email.defaultValue} />
+   *     <div>{fields.email.errors}</div>
+   *   </form>
+   * );
+   * ```
+   */
+
+  /**
+   * @deprecated Use `useForm(schema, options)` instead for better type inference.
+   */
+
+  function useForm(schemaOrOptions, maybeOptions) {
+    var _options$constraint, _globalConfig$getCons, _options$id, _options$onError;
+    var schema;
+    var options;
+    if (globalConfig.isSchema(schemaOrOptions)) {
+      schema = schemaOrOptions;
+      options = maybeOptions !== null && maybeOptions !== void 0 ? maybeOptions : {};
+    } else {
+      options = schemaOrOptions;
+    }
+    var constraint = (_options$constraint = options.constraint) !== null && _options$constraint !== void 0 ? _options$constraint : schema ? (_globalConfig$getCons = globalConfig.getConstraints) === null || _globalConfig$getCons === void 0 ? void 0 : _globalConfig$getCons.call(globalConfig, schema) : undefined;
+    var optionsRef = useLatest(options);
+    var fallbackId = useId();
+    var formId = (_options$id = options.id) !== null && _options$id !== void 0 ? _options$id : "form-".concat(fallbackId);
+    var [state, handleSubmit] = useConform(formId, _objectSpread2(_objectSpread2({}, options), {}, {
+      serialize: globalConfig.serialize,
+      intentName: globalConfig.intentName,
+      onError: (_options$onError = options.onError) !== null && _options$onError !== void 0 ? _options$onError : focusFirstInvalidField,
+      onValidate(ctx) {
+        var _options$onValidate, _options$onValidate2, _options;
+        if (schema) {
+          var schemaResult = globalConfig.validateSchema(schema, ctx.payload, options.schemaOptions);
+          if (schemaResult instanceof Promise) {
+            return schemaResult.then(resolvedResult => {
+              if (typeof options.onValidate === 'function') {
+                throw new Error('The "onValidate" handler is not supported when used with asynchronous schema validation.');
+              }
+              return resolvedResult;
+            });
+          }
+          if (!options.onValidate) {
+            return schemaResult;
+          }
+
+          // Update the schema error in the context
+          if (schemaResult.error) {
+            ctx.error = schemaResult.error;
+          }
+          var schemaValue = schemaResult.value;
+          ctx.schemaValue = schemaValue;
+          var validateResult = resolveValidateResult(options.onValidate(ctx));
+          if (validateResult.syncResult) {
+            var _validateResult$syncR, _validateResult$syncR2;
+            (_validateResult$syncR2 = (_validateResult$syncR = validateResult.syncResult).value) !== null && _validateResult$syncR2 !== void 0 ? _validateResult$syncR2 : _validateResult$syncR.value = schemaValue;
+          }
+          if (validateResult.asyncResult) {
+            validateResult.asyncResult = validateResult.asyncResult.then(result => {
+              var _result$value;
+              (_result$value = result.value) !== null && _result$value !== void 0 ? _result$value : result.value = schemaValue;
+              return result;
+            });
+          }
+          return [validateResult.syncResult, validateResult.asyncResult];
+        }
+        return (_options$onValidate = (_options$onValidate2 = (_options = options).onValidate) === null || _options$onValidate2 === void 0 ? void 0 : _options$onValidate2.call(_options, ctx)) !== null && _options$onValidate !== void 0 ? _options$onValidate : {
+          // To avoid conform falling back to server validation,
+          // if neither schema nor validation handler is provided,
+          // we just treat it as a valid client submission
+          error: null
+        };
+      }
+    }));
+    var intent = useIntent(formId);
+    var context = useMemo(() => ({
+      formId,
+      state,
+      constraint: constraint !== null && constraint !== void 0 ? constraint : null,
+      handleSubmit,
+      handleInput(event) {
+        var _optionsRef$current$o, _optionsRef$current, _optionsRef$current$s, _ref2, _optionsRef$current$s2;
+        if (!isFieldElement(event.target) || event.target.name === '' || event.target.form === null || event.target.form !== getFormElement(formId)) {
+          return;
+        }
+        (_optionsRef$current$o = (_optionsRef$current = optionsRef.current).onInput) === null || _optionsRef$current$o === void 0 || _optionsRef$current$o.call(_optionsRef$current, _objectSpread2(_objectSpread2({}, event), {}, {
+          target: event.target,
+          currentTarget: event.target.form
+        }));
+        if (event.defaultPrevented) {
+          return;
+        }
+        var shouldValidate = (_optionsRef$current$s = optionsRef.current.shouldValidate) !== null && _optionsRef$current$s !== void 0 ? _optionsRef$current$s : globalConfig.shouldValidate;
+        var shouldRevalidate = (_ref2 = (_optionsRef$current$s2 = optionsRef.current.shouldRevalidate) !== null && _optionsRef$current$s2 !== void 0 ? _optionsRef$current$s2 : optionsRef.current.shouldValidate) !== null && _ref2 !== void 0 ? _ref2 : globalConfig.shouldRevalidate;
+        if (isTouched(state, event.target.name) ? shouldRevalidate === 'onInput' : shouldValidate === 'onInput') {
+          intent.validate(event.target.name);
+        }
+      },
+      handleBlur(event) {
+        var _optionsRef$current$o2, _optionsRef$current2, _optionsRef$current$s3, _ref3, _optionsRef$current$s4;
+        if (!isFieldElement(event.target) || event.target.name === '' || event.target.form === null || event.target.form !== getFormElement(formId)) {
+          return;
+        }
+        (_optionsRef$current$o2 = (_optionsRef$current2 = optionsRef.current).onBlur) === null || _optionsRef$current$o2 === void 0 || _optionsRef$current$o2.call(_optionsRef$current2, _objectSpread2(_objectSpread2({}, event), {}, {
+          target: event.target,
+          currentTarget: event.target.form
+        }));
+        if (event.defaultPrevented) {
+          return;
+        }
+        var shouldValidate = (_optionsRef$current$s3 = optionsRef.current.shouldValidate) !== null && _optionsRef$current$s3 !== void 0 ? _optionsRef$current$s3 : globalConfig.shouldValidate;
+        var shouldRevalidate = (_ref3 = (_optionsRef$current$s4 = optionsRef.current.shouldRevalidate) !== null && _optionsRef$current$s4 !== void 0 ? _optionsRef$current$s4 : optionsRef.current.shouldValidate) !== null && _ref3 !== void 0 ? _ref3 : globalConfig.shouldRevalidate;
+        if (isTouched(state, event.target.name) ? shouldRevalidate === 'onBlur' : shouldValidate === 'onBlur') {
+          intent.validate(event.target.name);
+        }
+      }
+    }), [formId, state, constraint, handleSubmit, intent, optionsRef]);
+    var form = useMemo(() => getFormMetadata(context, {
+      serialize: globalConfig.serialize,
+      extendFormMetadata: globalConfig.extendFormMetadata,
+      extendFieldMetadata: globalConfig.extendFieldMetadata
+    }), [context]);
+    var fields = useMemo(() => getFieldset(context, {
+      serialize: globalConfig.serialize,
+      extendFieldMetadata: globalConfig.extendFieldMetadata
+    }), [context]);
+    return {
+      form,
+      fields,
+      intent
+    };
+  }
+
+  /**
+   * A React hook that provides access to form-level metadata and state.
+   * Requires `FormProvider` context when used in child components.
+   *
+   * @see https://conform.guide/api/react/future/useFormMetadata
+   * @example
+   * ```tsx
+   * function ErrorSummary() {
+   *   const form = useFormMetadata();
+   *
+   *   if (form.valid) return null;
+   *
+   *   return (
+   *     <div>Please fix {Object.keys(form.fieldErrors).length} errors</div>
+   *   );
+   * }
+   * ```
+   */
+  function useFormMetadata() {
+    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var context = useFormContext(options.formId);
+    var formMetadata = useMemo(() => getFormMetadata(context, {
+      serialize: globalConfig.serialize,
+      extendFormMetadata: globalConfig.extendFormMetadata,
+      extendFieldMetadata: globalConfig.extendFieldMetadata
+    }), [context]);
+    return formMetadata;
+  }
+
+  /**
+   * A React hook that provides access to a specific field's metadata and state.
+   * Requires `FormProvider` context when used in child components.
+   *
+   * @see https://conform.guide/api/react/future/useField
+   * @example
+   * ```tsx
+   * function FormField({ name, label }) {
+   *   const field = useField(name);
+   *
+   *   return (
+   *     <div>
+   *       <label htmlFor={field.id}>{label}</label>
+   *       <input id={field.id} name={field.name} defaultValue={field.defaultValue} />
+   *       {field.errors && <div>{field.errors.join(', ')}</div>}
+   *     </div>
+   *   );
+   * }
+   * ```
+   */
+  function useField(name) {
+    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var context = useFormContext(options.formId);
+    var field = useMemo(() => getField(context, {
+      name,
+      serialize: globalConfig.serialize,
+      extendFieldMetadata: globalConfig.extendFieldMetadata
+    }), [context, name]);
+    return field;
+  }
+
+  /**
+   * A React hook that provides an intent dispatcher for programmatic form actions.
+   * Intent dispatchers allow you to trigger form operations like validation, field updates,
+   * and array manipulations without manual form submission.
+   *
+   * @see https://conform.guide/api/react/future/useIntent
+   * @example
+   * ```tsx
+   * function ResetButton() {
+   *   const buttonRef = useRef<HTMLButtonElement>(null);
+   *   const intent = useIntent(buttonRef);
+   *
+   *   return (
+   *     <button type="button" ref={buttonRef} onClick={() => intent.reset()}>
+   *       Reset Form
+   *     </button>
+   *   );
+   * }
+   * ```
+   */
+  function useIntent(formRef) {
+    return useMemo(() => createIntentDispatcher(() => getFormElement(formRef), globalConfig.intentName), [formRef]);
+  }
+  return {
+    FormProvider,
+    useForm,
+    useFormMetadata,
+    useField,
+    useIntent,
+    config: globalConfig
+  };
+}
+
+export { configureForms };

package/dist/future/hooks.d.ts

@@ -15,6 +15,9 @@ export declare function FormProvider(props: {
     context: FormContext;
     children: React.ReactNode;
 }): React.ReactElement;
+/**
+ * @deprecated Replaced by the `configureForms` factory API. This will be removed in the next minor version. If you are not ready to migrate, please pin to `v1.16.0`.
+ */
 export declare function FormOptionsProvider(props: Partial<GlobalFormOptions> & {
     children: React.ReactNode;
 }): React.ReactElement;
@@ -206,18 +209,36 @@ export declare function useControl(options?: {
  * 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.
  *
+ * Returns `undefined` when the form element is not available (e.g., on SSR or initial client render),
+ * unless a `fallback` is provided.
+ *
  * @see https://conform.guide/api/react/future/useFormData
  * @example
  * ```ts
- * const value = useFormData(formRef, formData => formData?.get('fieldName') ?? '');
+ * const value = useFormData(
+ *   formRef,
+ *   formData => formData.get('fieldName') ?? '',
+ * );
  * ```
  */
-export declare function useFormData<Value = any>(formRef: FormRef, select: Selector<FormData, Value>, options: UseFormDataOptions & {
+export declare function useFormData<Value>(formRef: FormRef, select: Selector<FormData, Value>, options: UseFormDataOptions<Value> & {
     acceptFiles: true;
+    fallback: Value;
 }): Value;
-export declare function useFormData<Value = any>(formRef: FormRef, select: Selector<URLSearchParams, Value>, options?: UseFormDataOptions & {
-    acceptFiles?: boolean;
+export declare function useFormData<Value>(formRef: FormRef, select: Selector<FormData, Value>, options: UseFormDataOptions & {
+    acceptFiles: true;
+}): Value | undefined;
+export declare function useFormData<Value>(formRef: FormRef, select: Selector<URLSearchParams, Value>, options: UseFormDataOptions<Value> & {
+    acceptFiles?: false;
+    fallback: Value;
 }): Value;
+export declare function useFormData<Value>(formRef: FormRef, select: Selector<URLSearchParams, Value>, options?: UseFormDataOptions & {
+    acceptFiles?: false;
+}): Value | undefined;
+export declare function useFormData<Value>(formRef: FormRef, select: Selector<FormData, Value> | Selector<URLSearchParams, Value>, options?: UseFormDataOptions & {
+    acceptFiles?: boolean;
+    fallback?: Value;
+}): Value | undefined;
 /**
  * useLayoutEffect is client-only.
  * This basically makes it a no-op on server

package/dist/future/hooks.js

@@ -38,6 +38,10 @@ function FormProvider(props) {
     children: props.children
   });
 }
+
+/**
+ * @deprecated Replaced by the `configureForms` factory API. This will be removed in the next minor version. If you are not ready to migrate, please pin to `v1.16.0`.
+ */
 function FormOptionsProvider(props) {
   var {
       children
@@ -465,11 +469,11 @@ function useForm(schemaOrOptions, maybeOptions) {
   }), [formId, state$1, constraint, handleSubmit, intent, optionsRef, globalOptionsRef]);
   var form = react.useMemo(() => state.getFormMetadata(context, {
     serialize: globalOptions.serialize,
-    customize: globalOptions.defineCustomMetadata
+    extendFieldMetadata: globalOptions.defineCustomMetadata
   }), [context, globalOptions.serialize, globalOptions.defineCustomMetadata]);
   var fields = react.useMemo(() => state.getFieldset(context, {
     serialize: globalOptions.serialize,
-    customize: globalOptions.defineCustomMetadata
+    extendFieldMetadata: globalOptions.defineCustomMetadata
   }), [context, globalOptions.serialize, globalOptions.defineCustomMetadata]);
   return {
     form,
@@ -502,7 +506,7 @@ function useFormMetadata() {
   var context = useFormContext(options.formId);
   var formMetadata = react.useMemo(() => state.getFormMetadata(context, {
     serialize: globalOptions.serialize,
-    customize: globalOptions.defineCustomMetadata
+    extendFieldMetadata: globalOptions.defineCustomMetadata
   }), [context, globalOptions.serialize, globalOptions.defineCustomMetadata]);
   return formMetadata;
 }
@@ -534,7 +538,7 @@ function useField(name) {
   var field = react.useMemo(() => state.getField(context, {
     name,
     serialize: globalOptions.serialize,
-    customize: globalOptions.defineCustomMetadata
+    extendFieldMetadata: globalOptions.defineCustomMetadata
   }), [context, name, globalOptions.serialize, globalOptions.defineCustomMetadata]);
   return field;
 }
@@ -757,10 +761,16 @@ function useControl(options) {
  * 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.
  *
+ * Returns `undefined` when the form element is not available (e.g., on SSR or initial client render),
+ * unless a `fallback` is provided.
+ *
  * @see https://conform.guide/api/react/future/useFormData
  * @example
  * ```ts
- * const value = useFormData(formRef, formData => formData?.get('fieldName') ?? '');
+ * const value = useFormData(
+ *   formRef,
+ *   formData => formData.get('fieldName') ?? '',
+ * );
  * ```
  */
 
@@ -769,7 +779,7 @@ function useFormData(formRef, select, options) {
     observer
   } = react.useContext(GlobalFormOptionsContext);
   var valueRef = react.useRef();
-  var formDataRef = react.useRef(null);
+  var formDataRef = react.useRef();
   var value = react.useSyncExternalStore(react.useCallback(callback => {
     var formElement = dom.getFormElement(formRef);
     if (formElement) {
@@ -791,14 +801,17 @@ function useFormData(formRef, select, options) {
     });
     return unsubscribe;
   }, [observer, formRef, options === null || options === void 0 ? void 0 : options.acceptFiles]), () => {
-    // @ts-expect-error FIXME
+    // Return fallback if form is not available
+    if (formDataRef.current === undefined) {
+      return options === null || options === void 0 ? void 0 : options.fallback;
+    }
     var result = select(formDataRef.current, valueRef.current);
     if (typeof valueRef.current !== 'undefined' && future.deepEqual(result, valueRef.current)) {
       return valueRef.current;
     }
     valueRef.current = result;
     return result;
-  }, () => select(null, undefined));
+  }, () => options === null || options === void 0 ? void 0 : options.fallback);
   return value;
 }
 

package/dist/future/hooks.mjs

@@ -34,6 +34,10 @@ function FormProvider(props) {
     children: props.children
   });
 }
+
+/**
+ * @deprecated Replaced by the `configureForms` factory API. This will be removed in the next minor version. If you are not ready to migrate, please pin to `v1.16.0`.
+ */
 function FormOptionsProvider(props) {
   var {
       children
@@ -461,11 +465,11 @@ function useForm(schemaOrOptions, maybeOptions) {
   }), [formId, state, constraint, handleSubmit, intent, optionsRef, globalOptionsRef]);
   var form = useMemo(() => getFormMetadata(context, {
     serialize: globalOptions.serialize,
-    customize: globalOptions.defineCustomMetadata
+    extendFieldMetadata: globalOptions.defineCustomMetadata
   }), [context, globalOptions.serialize, globalOptions.defineCustomMetadata]);
   var fields = useMemo(() => getFieldset(context, {
     serialize: globalOptions.serialize,
-    customize: globalOptions.defineCustomMetadata
+    extendFieldMetadata: globalOptions.defineCustomMetadata
   }), [context, globalOptions.serialize, globalOptions.defineCustomMetadata]);
   return {
     form,
@@ -498,7 +502,7 @@ function useFormMetadata() {
   var context = useFormContext(options.formId);
   var formMetadata = useMemo(() => getFormMetadata(context, {
     serialize: globalOptions.serialize,
-    customize: globalOptions.defineCustomMetadata
+    extendFieldMetadata: globalOptions.defineCustomMetadata
   }), [context, globalOptions.serialize, globalOptions.defineCustomMetadata]);
   return formMetadata;
 }
@@ -530,7 +534,7 @@ function useField(name) {
   var field = useMemo(() => getField(context, {
     name,
     serialize: globalOptions.serialize,
-    customize: globalOptions.defineCustomMetadata
+    extendFieldMetadata: globalOptions.defineCustomMetadata
   }), [context, name, globalOptions.serialize, globalOptions.defineCustomMetadata]);
   return field;
 }
@@ -753,10 +757,16 @@ function useControl(options) {
  * 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.
  *
+ * Returns `undefined` when the form element is not available (e.g., on SSR or initial client render),
+ * unless a `fallback` is provided.
+ *
  * @see https://conform.guide/api/react/future/useFormData
  * @example
  * ```ts
- * const value = useFormData(formRef, formData => formData?.get('fieldName') ?? '');
+ * const value = useFormData(
+ *   formRef,
+ *   formData => formData.get('fieldName') ?? '',
+ * );
  * ```
  */
 
@@ -765,7 +775,7 @@ function useFormData(formRef, select, options) {
     observer
   } = useContext(GlobalFormOptionsContext);
   var valueRef = useRef();
-  var formDataRef = useRef(null);
+  var formDataRef = useRef();
   var value = useSyncExternalStore(useCallback(callback => {
     var formElement = getFormElement(formRef);
     if (formElement) {
@@ -787,14 +797,17 @@ function useFormData(formRef, select, options) {
     });
     return unsubscribe;
   }, [observer, formRef, options === null || options === void 0 ? void 0 : options.acceptFiles]), () => {
-    // @ts-expect-error FIXME
+    // Return fallback if form is not available
+    if (formDataRef.current === undefined) {
+      return options === null || options === void 0 ? void 0 : options.fallback;
+    }
     var result = select(formDataRef.current, valueRef.current);
     if (typeof valueRef.current !== 'undefined' && deepEqual(result, valueRef.current)) {
       return valueRef.current;
     }
     valueRef.current = result;
     return result;
-  }, () => select(null, undefined));
+  }, () => options === null || options === void 0 ? void 0 : options.fallback);
   return value;
 }
 

package/dist/future/index.d.ts

@@ -1,6 +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, CustomMetadata, CustomMetadataDefinition, BaseErrorShape, CustomTypes, FormContext, FormMetadata, FormOptions, FormRef, FieldMetadata, Fieldset, IntentDispatcher, } from './types';
+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 { configureForms } from './forms';
 export { 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

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var future = require('@conform-to/dom/future');
+var forms = require('./forms.js');
 var hooks = require('./hooks.js');
+var util = require('./util.js');
 var memoize = require('./memoize.js');
 
 
@@ -24,6 +26,7 @@ Object.defineProperty(exports, 'report', {
 	enumerable: true,
 	get: function () { return future.report; }
 });
+exports.configureForms = forms.configureForms;
 exports.FormOptionsProvider = hooks.FormOptionsProvider;
 exports.FormProvider = hooks.FormProvider;
 exports.useControl = hooks.useControl;
@@ -32,4 +35,5 @@ exports.useForm = hooks.useForm;
 exports.useFormData = hooks.useFormData;
 exports.useFormMetadata = hooks.useFormMetadata;
 exports.useIntent = hooks.useIntent;
+exports.shape = util.shape;
 exports.memoize = memoize.memoize;

package/dist/future/index.mjs

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

package/dist/future/state.d.ts

@@ -1,5 +1,5 @@
 import { type FieldName, type ValidationAttributes, type Serialize } from '@conform-to/dom/future';
-import type { FieldMetadata, Fieldset, FormContext, FormMetadata, FormState, FormAction, UnknownIntent, ActionHandler, CustomMetadataDefinition } from './types';
+import type { FieldMetadata, Fieldset, FormContext, FormMetadata, FormState, FormAction, UnknownIntent, ActionHandler, BaseFieldMetadata, BaseFormMetadata, DefineConditionalField } from './types';
 export declare function initializeState<ErrorShape>(options?: {
     defaultValue?: Record<string, unknown> | null | undefined;
     resetKey?: string | undefined;
@@ -39,32 +39,47 @@ export declare function isValid(state: FormState<any>, name?: string): boolean;
  * e.g. "array[0].key" falls back to "array[].key" if specific constraint not found.
  */
 export declare function getConstraint(context: FormContext<any>, name: string): ValidationAttributes | undefined;
-export declare function getFormMetadata<ErrorShape>(context: FormContext<ErrorShape>, options?: {
+export declare function getFormMetadata<ErrorShape, CustomFormMetadata extends Record<string, unknown> = {}, CustomFieldMetadata extends Record<string, unknown> = {}>(context: FormContext<ErrorShape>, options?: {
     serialize?: Serialize | undefined;
-    customize?: CustomMetadataDefinition | undefined;
-}): FormMetadata<ErrorShape>;
-export declare function getField<FieldShape, ErrorShape = string>(context: FormContext<ErrorShape>, options: {
+    extendFormMetadata?: ((metadata: BaseFormMetadata<ErrorShape>) => CustomFormMetadata) | undefined;
+    extendFieldMetadata?: (<FieldShape>(metadata: BaseFieldMetadata<FieldShape, ErrorShape>, ctx: {
+        form: BaseFormMetadata<ErrorShape>;
+        when: DefineConditionalField;
+    }) => CustomFieldMetadata) | undefined;
+}): FormMetadata<ErrorShape, CustomFormMetadata, CustomFieldMetadata>;
+export declare function getField<FieldShape, ErrorShape = string, CustomFieldMetadata extends Record<string, unknown> = {}>(context: FormContext<ErrorShape>, options: {
     name: FieldName<FieldShape>;
     serialize?: Serialize | undefined;
-    customize?: CustomMetadataDefinition | undefined;
+    extendFieldMetadata?: (<F>(metadata: BaseFieldMetadata<F, ErrorShape>, ctx: {
+        form: BaseFormMetadata<ErrorShape>;
+        when: DefineConditionalField;
+    }) => CustomFieldMetadata) | undefined;
+    form?: BaseFormMetadata<ErrorShape, CustomFieldMetadata> | undefined;
     key?: string | undefined;
-}): FieldMetadata<FieldShape, ErrorShape>;
+}): FieldMetadata<FieldShape, ErrorShape, CustomFieldMetadata>;
 /**
  * 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: {
+export declare function getFieldset<FieldShape = Record<string, any>, ErrorShape = string, CustomFieldMetadata extends Record<string, unknown> = {}>(context: FormContext<ErrorShape>, options: {
     name?: FieldName<FieldShape> | undefined;
     serialize?: Serialize | undefined;
-    customize?: CustomMetadataDefinition | undefined;
-}): Fieldset<FieldShape, ErrorShape>;
+    extendFieldMetadata?: (<F>(metadata: BaseFieldMetadata<F, ErrorShape>, ctx: {
+        form: BaseFormMetadata<ErrorShape>;
+        when: DefineConditionalField;
+    }) => CustomFieldMetadata) | undefined;
+    form?: BaseFormMetadata<ErrorShape, CustomFieldMetadata> | undefined;
+}): Fieldset<FieldShape, ErrorShape, CustomFieldMetadata>;
 /**
  * Creates an array of field objects for list/array inputs
  */
-export declare function getFieldList<FieldShape = Array<any>, ErrorShape = string>(context: FormContext<ErrorShape>, options: {
+export declare function getFieldList<FieldShape = Array<any>, ErrorShape = string, CustomFieldMetadata extends Record<string, unknown> = {}>(context: FormContext<ErrorShape>, options: {
     name: FieldName<FieldShape>;
     serialize?: Serialize | undefined;
-    customize?: CustomMetadataDefinition | undefined;
+    extendFieldMetadata?: (<F>(metadata: BaseFieldMetadata<F, ErrorShape>, ctx: {
+        form: BaseFormMetadata<ErrorShape>;
+        when: DefineConditionalField;
+    }) => CustomFieldMetadata) | undefined;
 }): FieldMetadata<[
     FieldShape
-] extends [Array<infer ItemShape> | null | undefined] ? ItemShape : unknown, ErrorShape>[];
+] extends [Array<infer ItemShape> | null | undefined] ? ItemShape : unknown, ErrorShape, CustomFieldMetadata>[];
 //# sourceMappingURL=state.d.ts.map