@conform-to/react 1.10.0 → 1.11.0

package/README.md

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

@@ -1,6 +1,7 @@
 import { type Serialize, type SubmissionResult, serialize } from '@conform-to/dom/future';
 import { useEffect } from 'react';
-import type { FormContext, DefaultMetadata, IntentDispatcher, FormMetadata, Fieldset, FormOptions, FieldName, FieldMetadata, Control, Selector, UseFormDataOptions, ValidateHandler, ErrorHandler, SubmitHandler, FormState, FormRef } from './types';
+import type { FormContext, IntentDispatcher, FormMetadata, Fieldset, FormOptions, FieldName, FieldMetadata, Control, Selector, UseFormDataOptions, ValidateHandler, ErrorHandler, SubmitHandler, FormState, FormRef } from './types';
+export declare const INITIAL_KEY = "INITIAL_KEY";
 export declare const FormConfig: import("react").Context<{
     intentName: string;
     observer: {
@@ -66,7 +67,7 @@ export declare function useConform<ErrorShape, Value = undefined>(formRef: FormR
  */
 export declare function useForm<FormShape extends Record<string, any> = Record<string, any>, ErrorShape = string, Value = undefined>(options: FormOptions<FormShape, ErrorShape, Value>): {
     form: FormMetadata<ErrorShape>;
-    fields: Fieldset<FormShape, DefaultMetadata<ErrorShape>>;
+    fields: Fieldset<FormShape, ErrorShape>;
     intent: IntentDispatcher;
 };
 /**
@@ -110,9 +111,9 @@ export declare function useFormMetadata<ErrorShape = string[]>(options?: {
  * }
  * ```
  */
-export declare function useField<FieldShape = any>(name: FieldName<FieldShape>, options?: {
+export declare function useField<FieldShape = any, ErrorShape = string>(name: FieldName<FieldShape>, options?: {
     formId?: string;
-}): FieldMetadata<FieldShape>;
+}): FieldMetadata<FieldShape, ErrorShape>;
 /**
  * A React hook that provides an intent dispatcher for programmatic form actions.
  * Intent dispatchers allow you to trigger form operations like validation, field updates,

package/dist/future/hooks.js

@@ -12,6 +12,7 @@ var intent = require('./intent.js');
 var dom = require('./dom.js');
 var jsxRuntime = require('react/jsx-runtime');
 
+var INITIAL_KEY = 'INITIAL_KEY';
 var FormConfig = /*#__PURE__*/react.createContext({
   intentName: future.DEFAULT_INTENT_NAME,
   observer: future.createGlobalFormsObserver(),
@@ -51,7 +52,7 @@ function useConform(formRef, options) {
     lastResult
   } = options;
   var [state$1, setState] = react.useState(() => {
-    var state$1 = state.initializeState();
+    var state$1 = state.initializeState(INITIAL_KEY);
     if (lastResult) {
       state$1 = state.updateState(state$1, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, lastResult), {}, {
         type: 'initialize',
@@ -194,7 +195,8 @@ function useConform(formRef, options) {
         intent: submission.intent ? intent.deserializeIntent(submission.intent) : null,
         formElement,
         submitter: submitEvent.submitter,
-        formData
+        formData,
+        schemaValue: undefined
       }) : {
         error: null
       };
@@ -338,6 +340,7 @@ function useForm(options) {
         if (resolvedResult.error) {
           ctx.error = resolvedResult.error;
         }
+        ctx.schemaValue = resolvedResult.value;
         var validateResult = util.resolveValidateResult(options.onValidate(ctx));
         if (validateResult.syncResult) {
           var _validateResult$syncR, _validateResult$syncR2;
@@ -746,6 +749,7 @@ function useLatest(value) {
 exports.Form = Form;
 exports.FormConfig = FormConfig;
 exports.FormProvider = FormProvider;
+exports.INITIAL_KEY = INITIAL_KEY;
 exports.useConform = useConform;
 exports.useControl = useControl;
 exports.useField = useField;

package/dist/future/hooks.mjs

@@ -8,6 +8,7 @@ import { deserializeIntent, actionHandlers, applyIntent } from './intent.mjs';
 import { focusFirstInvalidField, getFormElement, createIntentDispatcher, createDefaultSnapshot, getRadioGroupValue, getCheckboxGroupValue, getInputSnapshot, makeInputFocusable, initializeField, updateFormValue, getSubmitEvent } from './dom.mjs';
 import { jsx } from 'react/jsx-runtime';
 
+var INITIAL_KEY = 'INITIAL_KEY';
 var FormConfig = /*#__PURE__*/createContext({
   intentName: DEFAULT_INTENT_NAME,
   observer: createGlobalFormsObserver(),
@@ -47,7 +48,7 @@ function useConform(formRef, options) {
     lastResult
   } = options;
   var [state, setState] = useState(() => {
-    var state = initializeState();
+    var state = initializeState(INITIAL_KEY);
     if (lastResult) {
       state = updateState(state, _objectSpread2(_objectSpread2({}, lastResult), {}, {
         type: 'initialize',
@@ -190,7 +191,8 @@ function useConform(formRef, options) {
         intent: submission.intent ? deserializeIntent(submission.intent) : null,
         formElement,
         submitter: submitEvent.submitter,
-        formData
+        formData,
+        schemaValue: undefined
       }) : {
         error: null
       };
@@ -334,6 +336,7 @@ function useForm(options) {
         if (resolvedResult.error) {
           ctx.error = resolvedResult.error;
         }
+        ctx.schemaValue = resolvedResult.value;
         var validateResult = resolveValidateResult(options.onValidate(ctx));
         if (validateResult.syncResult) {
           var _validateResult$syncR, _validateResult$syncR2;
@@ -739,4 +742,4 @@ function useLatest(value) {
   return ref;
 }
 
-export { Form, FormConfig, FormProvider, useConform, useControl, useField, useForm, useFormContext, useFormData, useFormMetadata, useIntent, useLatest, useSafeLayoutEffect };
+export { Form, FormConfig, FormProvider, INITIAL_KEY, useConform, useControl, useField, useForm, useFormContext, useFormData, useFormMetadata, useIntent, useLatest, useSafeLayoutEffect };

package/dist/future/state.d.ts

@@ -1,6 +1,6 @@
 import { type ValidationAttributes, type Serialize } from '@conform-to/dom/future';
-import type { DefaultMetadata, FieldMetadata, FieldName, Fieldset, FormContext, FormMetadata, FormState, FormAction, UnknownIntent, ActionHandler } from './types';
-export declare function initializeState<ErrorShape>(): FormState<ErrorShape>;
+import type { FieldMetadata, FieldName, Fieldset, FormContext, FormMetadata, FormState, FormAction, UnknownIntent, ActionHandler } from './types';
+export declare function initializeState<ErrorShape>(resetKey?: string): FormState<ErrorShape>;
 /**
  * Updates form state based on action type:
  * - Client actions: update intended value and client errors
@@ -33,19 +33,19 @@ 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;
-}): FormMetadata<ErrorShape, DefaultMetadata<ErrorShape>>;
+}): FormMetadata<ErrorShape>;
 export declare function getField<FieldShape, ErrorShape = string>(context: FormContext<ErrorShape>, options: {
     name: FieldName<FieldShape>;
     serialize: Serialize;
     key?: string;
-}): FieldMetadata<FieldShape, DefaultMetadata<ErrorShape>>;
+}): 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;
-}): Fieldset<FieldShape, DefaultMetadata<ErrorShape>>;
+}): Fieldset<FieldShape, ErrorShape>;
 /**
  * Creates an array of field objects for list/array inputs
  */
@@ -54,5 +54,5 @@ export declare function getFieldList<FieldShape = Array<any>, ErrorShape = strin
     serialize: Serialize;
 }): FieldMetadata<[
     FieldShape
-] extends [Array<infer ItemShape> | null | undefined] ? ItemShape : unknown, DefaultMetadata<ErrorShape>>[];
+] extends [Array<infer ItemShape> | null | undefined] ? ItemShape : unknown, ErrorShape>[];
 //# sourceMappingURL=state.d.ts.map

package/dist/future/state.js

@@ -6,9 +6,9 @@ var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.j
 var future = require('@conform-to/dom/future');
 var util = require('./util.js');
 
-function initializeState() {
+function initializeState(resetKey) {
   return {
-    resetKey: util.generateUniqueKey(),
+    resetKey: resetKey !== null && resetKey !== void 0 ? resetKey : util.generateUniqueKey(),
     listKeys: {},
     clientIntendedValue: null,
     serverIntendedValue: null,

package/dist/future/state.mjs

@@ -2,9 +2,9 @@ import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelH
 import { getPathSegments, getRelativePath, appendPathSegment, deepEqual, getValueAtPath, formatPathSegments, serialize } from '@conform-to/dom/future';
 import { generateUniqueKey, merge, getArrayAtPath } from './util.mjs';
 
-function initializeState() {
+function initializeState(resetKey) {
   return {
-    resetKey: generateUniqueKey(),
+    resetKey: resetKey !== null && resetKey !== void 0 ? resetKey : generateUniqueKey(),
     listKeys: {},
     clientIntendedValue: null,
     serverIntendedValue: null,

package/dist/future/types.d.ts

@@ -241,7 +241,7 @@ export type Combine<T> = {
     [K in keyof BaseCombine<T>]: BaseCombine<T>[K];
 };
 /** Field metadata object containing field state, validation attributes, and nested field access methods. */
-export type FieldMetadata<FieldShape, Metadata extends Record<string, unknown> = DefaultMetadata<unknown>> = Readonly<Metadata & {
+export type FieldMetadata<FieldShape, ErrorShape = string> = Readonly<DefaultMetadata<ErrorShape> & {
     /** Unique key for React list rendering (for array fields). */
     key: string | undefined;
     /** The field name path exactly as provided. */
@@ -249,19 +249,18 @@ export type FieldMetadata<FieldShape, Metadata extends Record<string, unknown> =
     /** Method to get nested fieldset for object fields under this field. */
     getFieldset(): Fieldset<[
         FieldShape
-    ] extends [Record<string, unknown> | null | undefined] ? FieldShape : unknown, Metadata>;
+    ] extends [Record<string, unknown> | null | undefined] ? FieldShape : unknown, ErrorShape>;
     /** Method to get array of fields for list/array fields under this field. */
     getFieldList(): Array<FieldMetadata<[
         FieldShape
-    ] extends [Array<infer ItemShape> | null | undefined] ? ItemShape : unknown, Metadata>>;
+    ] extends [Array<infer ItemShape> | null | undefined] ? ItemShape : unknown, ErrorShape>>;
 }>;
 /** Fieldset object containing all form fields as properties with their respective field metadata. */
-export type Fieldset<FieldShape, // extends Record<string, unknown>,
-Metadata extends Record<string, unknown>> = {
-    [Key in keyof Combine<FieldShape>]-?: FieldMetadata<Combine<FieldShape>[Key], Metadata>;
+export type Fieldset<FieldShape, ErrorShape = string> = {
+    [Key in keyof Combine<FieldShape>]-?: FieldMetadata<Combine<FieldShape>[Key], ErrorShape>;
 };
 /** Form-level metadata and state object containing validation status, errors, and field access methods. */
-export type FormMetadata<ErrorShape, Metadata extends Record<string, unknown> = DefaultMetadata<ErrorShape>> = Readonly<{
+export type FormMetadata<ErrorShape = string> = Readonly<{
     /** Unique identifier that changes on form reset */
     key: string;
     /** The form's unique identifier. */
@@ -274,7 +273,7 @@ export type FormMetadata<ErrorShape, Metadata extends Record<string, unknown> =
     touched: boolean;
     /** Whether the form currently has no validation errors. */
     valid: boolean;
-    /** @deprecated Use `.valid` instead. This was not an intentionl breaking change and would be removed in the next minor version soon  */
+    /** @deprecated Use `.valid` instead. This was not an intentional breaking change and would be removed in the next minor version soon  */
     invalid: boolean;
     /** Form-level validation errors, if any exist. */
     errors: ErrorShape[] | undefined;
@@ -291,15 +290,15 @@ export type FormMetadata<ErrorShape, Metadata extends Record<string, unknown> =
     /** The current state of the form */
     context: FormContext<ErrorShape>;
     /** Method to get metadata for a specific field by name. */
-    getField<FieldShape>(name: FieldName<FieldShape>): FieldMetadata<FieldShape, Metadata>;
+    getField<FieldShape>(name: FieldName<FieldShape>): FieldMetadata<FieldShape, ErrorShape>;
     /** Method to get a fieldset object for nested object fields. */
-    getFieldset<FieldShape>(name: FieldName<FieldShape>): Fieldset<[
+    getFieldset<FieldShape>(name?: FieldName<FieldShape>): Fieldset<[
         FieldShape
-    ] extends [Record<string, unknown> | null | undefined] ? FieldShape : unknown, Metadata>;
+    ] extends [Record<string, unknown> | null | undefined] ? FieldShape : unknown, ErrorShape>;
     /** Method to get an array of field objects for array fields. */
     getFieldList<FieldShape>(name: FieldName<FieldShape>): Array<FieldMetadata<[
         FieldShape
-    ] extends [Array<infer ItemShape> | null | undefined] ? ItemShape : unknown, Metadata>>;
+    ] extends [Array<infer ItemShape> | null | undefined] ? ItemShape : unknown, ErrorShape>>;
 }>;
 /** Default field metadata object containing field state, validation attributes, and accessibility IDs. */
 export type DefaultMetadata<ErrorShape> = Readonly<ValidationAttributes & {
@@ -332,15 +331,40 @@ export type ValidateResult<ErrorShape, Value> = FormError<ErrorShape> | null | {
     error: FormError<ErrorShape> | null;
     value?: Value;
 };
-export type ValidateContext = {
+export type ValidateContext<Value> = {
+    /**
+     * The submitted values mapped by field name.
+     * Supports nested names like `user.email` and indexed names like `items[0].id`.
+     */
     payload: Record<string, FormValue>;
+    /**
+     * Form error object. Initially empty, but populated with schema validation
+     * errors when a schema is provided and validation fails.
+     */
     error: FormError<string>;
+    /**
+     * The submission intent derived from the button that triggered the form submission.
+     */
     intent: UnknownIntent | null;
+    /**
+     * The raw FormData object of the submission.
+     */
     formData: FormData;
+    /**
+     * Reference to the HTML form element that triggered the submission.
+     */
     formElement: HTMLFormElement;
+    /**
+     * The specific element (button/input) that triggered the form submission.
+     */
     submitter: HTMLElement | null;
+    /**
+     * The validated value from schema validation. Only defined when a schema is provided
+     * and the validation succeeds. Undefined if no schema is provided or validation fails.
+     */
+    schemaValue: Value | undefined;
 };
-export type ValidateHandler<ErrorShape, Value> = (ctx: ValidateContext) => ValidateResult<ErrorShape, Value> | Promise<ValidateResult<ErrorShape, Value>> | [
+export type ValidateHandler<ErrorShape, Value> = (ctx: ValidateContext<Value>) => ValidateResult<ErrorShape, Value> | Promise<ValidateResult<ErrorShape, Value>> | [
     ValidateResult<ErrorShape, Value> | undefined,
     Promise<ValidateResult<ErrorShape, Value>> | undefined
 ] | undefined;

package/dist/future/util.d.ts

@@ -41,7 +41,6 @@ export declare function resolveValidateResult<ErrorShape, Value>(result: ReturnT
         value?: Value | undefined;
     }> | undefined;
 };
-export declare function resolveStandardSchemaPath(issue: StandardSchemaV1.Issue): Array<string | number>;
 export declare function resolveStandardSchemaResult<Value>(result: StandardSchemaV1.Result<Value>): {
     error: FormError<string> | null;
     value?: Value;

package/dist/future/util.js

@@ -2,10 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
 var future = require('@conform-to/dom/future');
 
-var _excluded = [""];
 function isUndefined(value) {
   return value === undefined;
 }
@@ -117,16 +115,6 @@ function resolveValidateResult(result) {
     asyncResult: asyncResult ? asyncResult.then(normalizeValidateResult) : undefined
   };
 }
-function resolveStandardSchemaPath(issue) {
-  if (!issue.path) {
-    return [];
-  }
-  var segments = issue.path.map(segment => typeof segment === 'object' && 'key' in segment ? segment.key : segment);
-  if (!segments.every(segment => typeof segment !== 'symbol')) {
-    throw new Error('Path segments must not contain symbols. Use strings or numbers instead.');
-  }
-  return segments;
-}
 function resolveStandardSchemaResult(result) {
   if (!result.issues) {
     return {
@@ -134,23 +122,8 @@ function resolveStandardSchemaResult(result) {
       value: result.value
     };
   }
-  var errorByName = {};
-  for (var issue of result.issues) {
-    var _errorByName$_name;
-    var path = resolveStandardSchemaPath(issue);
-    var _name = future.formatPathSegments(path);
-    (_errorByName$_name = errorByName[_name]) !== null && _errorByName$_name !== void 0 ? _errorByName$_name : errorByName[_name] = [];
-    errorByName[_name].push(issue.message);
-  }
-  var {
-      '': formErrors = []
-    } = errorByName,
-    fieldErrors = _rollupPluginBabelHelpers.objectWithoutProperties(errorByName, _excluded);
   return {
-    error: {
-      formErrors,
-      fieldErrors
-    }
+    error: future.formatIssues(result.issues)
   };
 }
 
@@ -174,9 +147,9 @@ function merge(obj, update) {
 function transformKeys(obj, fn) {
   var result = {};
   for (var [_key, _value] of Object.entries(obj)) {
-    var _name2 = fn(_key);
-    if (_name2 !== null) {
-      result[_name2] = _value;
+    var _name = fn(_key);
+    if (_name !== null) {
+      result[_name] = _value;
     }
   }
   return result;
@@ -222,7 +195,6 @@ exports.isUndefined = isUndefined;
 exports.merge = merge;
 exports.normalizeFormError = normalizeFormError;
 exports.normalizeValidateResult = normalizeValidateResult;
-exports.resolveStandardSchemaPath = resolveStandardSchemaPath;
 exports.resolveStandardSchemaResult = resolveStandardSchemaResult;
 exports.resolveValidateResult = resolveValidateResult;
 exports.transformKeys = transformKeys;

package/dist/future/util.mjs

@@ -1,7 +1,5 @@
-import { objectWithoutProperties as _objectWithoutProperties } from '../_virtual/_rollupPluginBabelHelpers.mjs';
-import { formatPathSegments, getValueAtPath, isPlainObject, setValueAtPath, getPathSegments } from '@conform-to/dom/future';
+import { formatIssues, getValueAtPath, isPlainObject, setValueAtPath, getPathSegments, formatPathSegments } from '@conform-to/dom/future';
 
-var _excluded = [""];
 function isUndefined(value) {
   return value === undefined;
 }
@@ -113,16 +111,6 @@ function resolveValidateResult(result) {
     asyncResult: asyncResult ? asyncResult.then(normalizeValidateResult) : undefined
   };
 }
-function resolveStandardSchemaPath(issue) {
-  if (!issue.path) {
-    return [];
-  }
-  var segments = issue.path.map(segment => typeof segment === 'object' && 'key' in segment ? segment.key : segment);
-  if (!segments.every(segment => typeof segment !== 'symbol')) {
-    throw new Error('Path segments must not contain symbols. Use strings or numbers instead.');
-  }
-  return segments;
-}
 function resolveStandardSchemaResult(result) {
   if (!result.issues) {
     return {
@@ -130,23 +118,8 @@ function resolveStandardSchemaResult(result) {
       value: result.value
     };
   }
-  var errorByName = {};
-  for (var issue of result.issues) {
-    var _errorByName$_name;
-    var path = resolveStandardSchemaPath(issue);
-    var _name = formatPathSegments(path);
-    (_errorByName$_name = errorByName[_name]) !== null && _errorByName$_name !== void 0 ? _errorByName$_name : errorByName[_name] = [];
-    errorByName[_name].push(issue.message);
-  }
-  var {
-      '': formErrors = []
-    } = errorByName,
-    fieldErrors = _objectWithoutProperties(errorByName, _excluded);
   return {
-    error: {
-      formErrors,
-      fieldErrors
-    }
+    error: formatIssues(result.issues)
   };
 }
 
@@ -170,9 +143,9 @@ function merge(obj, update) {
 function transformKeys(obj, fn) {
   var result = {};
   for (var [_key, _value] of Object.entries(obj)) {
-    var _name2 = fn(_key);
-    if (_name2 !== null) {
-      result[_name2] = _value;
+    var _name = fn(_key);
+    if (_name !== null) {
+      result[_name] = _value;
     }
   }
   return result;
@@ -206,4 +179,4 @@ function generateUniqueKey() {
   return Math.trunc(Date.now() * Math.random()).toString(36);
 }
 
-export { appendUniqueItem, compactMap, createPathIndexUpdater, generateUniqueKey, getArrayAtPath, isNumber, isOptional, isString, isUndefined, merge, normalizeFormError, normalizeValidateResult, resolveStandardSchemaPath, resolveStandardSchemaResult, resolveValidateResult, transformKeys, updateValueAtPath };
+export { appendUniqueItem, compactMap, createPathIndexUpdater, generateUniqueKey, getArrayAtPath, isNumber, isOptional, isString, isUndefined, merge, normalizeFormError, normalizeValidateResult, resolveStandardSchemaResult, resolveValidateResult, transformKeys, updateValueAtPath };

package/package.json

@@ -3,7 +3,7 @@
   "description": "Conform view adapter for react",
   "homepage": "https://conform.guide",
   "license": "MIT",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -41,7 +41,7 @@
     "url": "https://github.com/edmundhung/conform/issues"
   },
   "dependencies": {
-    "@conform-to/dom": "1.10.0"
+    "@conform-to/dom": "1.11.0"
   },
   "devDependencies": {
     "@babel/core": "^7.17.8",