@conform-to/react 1.17.1 → 1.19.0

package/dist/future/util.d.ts

@@ -1,4 +1,4 @@
-import type { FormError } from '@conform-to/dom/future';
+import type { CustomSerialize, FormError, Serialize } from '@conform-to/dom/future';
 import type { StandardSchemaV1 } from './standard-schema';
 import { ValidateHandler, ValidateResult, BaseFieldMetadata, ConditionalFieldMetadata } from './types';
 export declare function isUndefined(value: unknown): value is undefined;
@@ -6,22 +6,18 @@ export declare function isString(value: unknown): value is string;
 export declare function isNumber(value: unknown): value is number;
 export declare function isNullable<T>(value: unknown, typeGuard: (value: unknown) => value is T): value is T | null;
 export declare function isOptional<T>(value: unknown, typeGuard: (value: unknown) => value is T): value is T | undefined;
-export declare function getArrayAtPath<Type>(formValue: Record<string, Type> | null, name: string): Array<Type>;
+export declare function getPathArray<Type>(formValue: Record<string, Type> | null, name: string): Array<Type>;
 /**
  * Immutably updates a value at the specified path.
  * Empty path replaces the entire object.
  */
-export declare function updateValueAtPath<Data>(data: Record<string, Data>, name: string, value: Data | Record<string, Data>): Record<string, Data>;
+export declare function updatePathValue<Data>(data: Record<string, Data>, name: string, value: Data | Record<string, Data>): Record<string, Data>;
 /**
  * Creates a function that updates array indices in field paths.
  * Returns null to remove fields, or updated path with new index.
  */
 export declare function createPathIndexUpdater(listName: string, update: (index: number) => number | null): (name: string) => string | null;
-/**
- * Returns null if error object has no actual error messages,
- * otherwise returns the error as-is.
- */
-export declare function normalizeFormError<ErrorShape>(error: FormError<ErrorShape> | null): FormError<ErrorShape> | null;
+export declare function resolveSerialize(customSerialize: CustomSerialize | undefined, defaultSerialize: Serialize): Serialize;
 export declare function normalizeValidateResult<ErrorShape, Value>(result: ValidateResult<ErrorShape, Value>): {
     error: FormError<ErrorShape> | null;
     value?: Value;
@@ -46,7 +42,7 @@ export declare function resolveValidateResult<ErrorShape, Value>(result: ReturnT
  * Resolves a StandardSchema validation result to conform's format.
  */
 export declare function resolveStandardSchemaResult<Value>(result: StandardSchemaV1.Result<Value>): {
-    error: FormError<string> | null;
+    error: FormError<string[]> | null;
     value?: Value;
 };
 /**
@@ -79,14 +75,14 @@ export declare function generateUniqueKey(): string;
  * - `isError`: Specify the error shape for type inference
  * - `when`: Narrow field metadata to specific shapes for conditional props
  *
- * @example Specify error shape
+ * **Example: Specify error shape**
  * ```ts
  * configureForms({
- *   isError: shape<string>(),  // errors are strings
+ *   isError: shape<string[]>(),  // errors are string arrays
  * });
  * ```
  *
- * @example Conditional field metadata
+ * **Example: Conditional field metadata**
  * ```ts
  * extendFieldMetadata(metadata, { when }) {
  *   return {

package/dist/future/util.js

@@ -19,9 +19,9 @@ function isNullable(value, typeGuard) {
 function isOptional(value, typeGuard) {
   return isUndefined(value) || typeGuard(value);
 }
-function getArrayAtPath(formValue, name) {
-  var _getValueAtPath;
-  var value = (_getValueAtPath = future.getValueAtPath(formValue, name)) !== null && _getValueAtPath !== void 0 ? _getValueAtPath : [];
+function getPathArray(formValue, name) {
+  var _getPathValue;
+  var value = (_getPathValue = future.getPathValue(formValue, name)) !== null && _getPathValue !== void 0 ? _getPathValue : [];
   if (!Array.isArray(value)) {
     throw new Error("The value of \"".concat(name, "\" is not an array"));
   }
@@ -32,14 +32,14 @@ function getArrayAtPath(formValue, name) {
  * Immutably updates a value at the specified path.
  * Empty path replaces the entire object.
  */
-function updateValueAtPath(data, name, value) {
+function updatePathValue(data, name, value) {
   if (name === '') {
     if (!future.isPlainObject(value)) {
       throw new Error('The value must be an object');
     }
     return value;
   }
-  return future.setValueAtPath(data, future.getPathSegments(name), value, {
+  return future.setPathValue(data, future.parsePath(name), value, {
     clone: true
   });
 }
@@ -49,9 +49,9 @@ function updateValueAtPath(data, name, value) {
  * Returns null to remove fields, or updated path with new index.
  */
 function createPathIndexUpdater(listName, update) {
-  var listPaths = future.getPathSegments(listName);
+  var listPaths = future.parsePath(listName);
   return name => {
-    var paths = future.getPathSegments(name);
+    var paths = future.parsePath(name);
     if (paths.length > listPaths.length && listPaths.every((path, index) => paths[index] === path)) {
       var currentIndex = paths[listPaths.length];
       if (typeof currentIndex === 'number') {
@@ -63,36 +63,33 @@ function createPathIndexUpdater(listName, update) {
         if (newIndex !== currentIndex) {
           // Replace the index
           paths.splice(listPaths.length, 1, newIndex);
-          return future.formatPathSegments(paths);
+          return future.formatPath(paths);
         }
       }
     }
     return name;
   };
 }
-
-/**
- * Returns null if error object has no actual error messages,
- * otherwise returns the error as-is.
- */
-function normalizeFormError(error) {
-  if (error && error.formErrors.length === 0 && Object.entries(error.fieldErrors).every(_ref => {
-    var [, messages] = _ref;
-    return Array.isArray(messages) ? messages.length === 0 : !messages;
-  })) {
-    return null;
+function resolveSerialize(customSerialize, _defaultSerialize) {
+  if (typeof customSerialize === 'undefined') {
+    return _defaultSerialize;
   }
-  return error;
+  return function serializeValue(value, context) {
+    return customSerialize(value, {
+      name: context.name,
+      defaultSerialize: value => _defaultSerialize(value, context)
+    });
+  };
 }
 function normalizeValidateResult(result) {
   if (result !== null && 'error' in result) {
     return {
-      error: normalizeFormError(result.error),
+      error: future.normalizeFormError(result.error),
       value: result.value
     };
   }
   return {
-    error: normalizeFormError(result)
+    error: future.normalizeFormError(result)
   };
 }
 
@@ -138,8 +135,8 @@ function resolveStandardSchemaResult(result) {
  * Create a copy of the object with the updated properties if there is any change
  */
 function merge(obj, update) {
-  if (obj === update || Object.entries(update).every(_ref2 => {
-    var [key, value] = _ref2;
+  if (obj === update || Object.entries(update).every(_ref => {
+    var [key, value] = _ref;
     return obj[key] === value;
   })) {
     return obj;
@@ -201,14 +198,14 @@ function generateUniqueKey() {
  * - `isError`: Specify the error shape for type inference
  * - `when`: Narrow field metadata to specific shapes for conditional props
  *
- * @example Specify error shape
+ * **Example: Specify error shape**
  * ```ts
  * configureForms({
- *   isError: shape<string>(),  // errors are strings
+ *   isError: shape<string[]>(),  // errors are string arrays
  * });
  * ```
  *
- * @example Conditional field metadata
+ * **Example: Conditional field metadata**
  * ```ts
  * extendFieldMetadata(metadata, { when }) {
  *   return {
@@ -248,7 +245,7 @@ exports.appendUniqueItem = appendUniqueItem;
 exports.compactMap = compactMap;
 exports.createPathIndexUpdater = createPathIndexUpdater;
 exports.generateUniqueKey = generateUniqueKey;
-exports.getArrayAtPath = getArrayAtPath;
+exports.getPathArray = getPathArray;
 exports.isNullable = isNullable;
 exports.isNumber = isNumber;
 exports.isOptional = isOptional;
@@ -256,12 +253,12 @@ exports.isStandardSchemaV1 = isStandardSchemaV1;
 exports.isString = isString;
 exports.isUndefined = isUndefined;
 exports.merge = merge;
-exports.normalizeFormError = normalizeFormError;
 exports.normalizeValidateResult = normalizeValidateResult;
+exports.resolveSerialize = resolveSerialize;
 exports.resolveStandardSchemaResult = resolveStandardSchemaResult;
 exports.resolveValidateResult = resolveValidateResult;
 exports.shape = shape;
 exports.transformKeys = transformKeys;
-exports.updateValueAtPath = updateValueAtPath;
+exports.updatePathValue = updatePathValue;
 exports.validateStandardSchemaV1 = validateStandardSchemaV1;
 exports.when = when;

package/dist/future/util.mjs

@@ -1,4 +1,4 @@
-import { formatIssues, getValueAtPath, isPlainObject, setValueAtPath, getPathSegments, formatPathSegments } from '@conform-to/dom/future';
+import { formatIssues, normalizeFormError, getPathValue, isPlainObject, setPathValue, parsePath, formatPath } from '@conform-to/dom/future';
 
 function isUndefined(value) {
   return value === undefined;
@@ -15,9 +15,9 @@ function isNullable(value, typeGuard) {
 function isOptional(value, typeGuard) {
   return isUndefined(value) || typeGuard(value);
 }
-function getArrayAtPath(formValue, name) {
-  var _getValueAtPath;
-  var value = (_getValueAtPath = getValueAtPath(formValue, name)) !== null && _getValueAtPath !== void 0 ? _getValueAtPath : [];
+function getPathArray(formValue, name) {
+  var _getPathValue;
+  var value = (_getPathValue = getPathValue(formValue, name)) !== null && _getPathValue !== void 0 ? _getPathValue : [];
   if (!Array.isArray(value)) {
     throw new Error("The value of \"".concat(name, "\" is not an array"));
   }
@@ -28,14 +28,14 @@ function getArrayAtPath(formValue, name) {
  * Immutably updates a value at the specified path.
  * Empty path replaces the entire object.
  */
-function updateValueAtPath(data, name, value) {
+function updatePathValue(data, name, value) {
   if (name === '') {
     if (!isPlainObject(value)) {
       throw new Error('The value must be an object');
     }
     return value;
   }
-  return setValueAtPath(data, getPathSegments(name), value, {
+  return setPathValue(data, parsePath(name), value, {
     clone: true
   });
 }
@@ -45,9 +45,9 @@ function updateValueAtPath(data, name, value) {
  * Returns null to remove fields, or updated path with new index.
  */
 function createPathIndexUpdater(listName, update) {
-  var listPaths = getPathSegments(listName);
+  var listPaths = parsePath(listName);
   return name => {
-    var paths = getPathSegments(name);
+    var paths = parsePath(name);
     if (paths.length > listPaths.length && listPaths.every((path, index) => paths[index] === path)) {
       var currentIndex = paths[listPaths.length];
       if (typeof currentIndex === 'number') {
@@ -59,26 +59,23 @@ function createPathIndexUpdater(listName, update) {
         if (newIndex !== currentIndex) {
           // Replace the index
           paths.splice(listPaths.length, 1, newIndex);
-          return formatPathSegments(paths);
+          return formatPath(paths);
         }
       }
     }
     return name;
   };
 }
-
-/**
- * Returns null if error object has no actual error messages,
- * otherwise returns the error as-is.
- */
-function normalizeFormError(error) {
-  if (error && error.formErrors.length === 0 && Object.entries(error.fieldErrors).every(_ref => {
-    var [, messages] = _ref;
-    return Array.isArray(messages) ? messages.length === 0 : !messages;
-  })) {
-    return null;
+function resolveSerialize(customSerialize, _defaultSerialize) {
+  if (typeof customSerialize === 'undefined') {
+    return _defaultSerialize;
   }
-  return error;
+  return function serializeValue(value, context) {
+    return customSerialize(value, {
+      name: context.name,
+      defaultSerialize: value => _defaultSerialize(value, context)
+    });
+  };
 }
 function normalizeValidateResult(result) {
   if (result !== null && 'error' in result) {
@@ -134,8 +131,8 @@ function resolveStandardSchemaResult(result) {
  * Create a copy of the object with the updated properties if there is any change
  */
 function merge(obj, update) {
-  if (obj === update || Object.entries(update).every(_ref2 => {
-    var [key, value] = _ref2;
+  if (obj === update || Object.entries(update).every(_ref => {
+    var [key, value] = _ref;
     return obj[key] === value;
   })) {
     return obj;
@@ -197,14 +194,14 @@ function generateUniqueKey() {
  * - `isError`: Specify the error shape for type inference
  * - `when`: Narrow field metadata to specific shapes for conditional props
  *
- * @example Specify error shape
+ * **Example: Specify error shape**
  * ```ts
  * configureForms({
- *   isError: shape<string>(),  // errors are strings
+ *   isError: shape<string[]>(),  // errors are string arrays
  * });
  * ```
  *
- * @example Conditional field metadata
+ * **Example: Conditional field metadata**
  * ```ts
  * extendFieldMetadata(metadata, { when }) {
  *   return {
@@ -240,4 +237,4 @@ function validateStandardSchemaV1(schema, payload) {
   return resolveStandardSchemaResult(result);
 }
 
-export { appendUniqueItem, compactMap, createPathIndexUpdater, generateUniqueKey, getArrayAtPath, isNullable, isNumber, isOptional, isStandardSchemaV1, isString, isUndefined, merge, normalizeFormError, normalizeValidateResult, resolveStandardSchemaResult, resolveValidateResult, shape, transformKeys, updateValueAtPath, validateStandardSchemaV1, when };
+export { appendUniqueItem, compactMap, createPathIndexUpdater, generateUniqueKey, getPathArray, isNullable, isNumber, isOptional, isStandardSchemaV1, isString, isUndefined, merge, normalizeValidateResult, resolveSerialize, resolveStandardSchemaResult, resolveValidateResult, shape, transformKeys, updatePathValue, validateStandardSchemaV1, when };

package/dist/helpers.d.ts

@@ -85,7 +85,7 @@ export declare function getAriaAttributes(metadata: Metadata<any, any, any>, opt
  * Derives the properties of a form element based on the form metadata,
  * including `id`, `onSubmit`, `noValidate`, and `aria-describedby`.
  *
- * @example
+ * **Example:**
  * ```tsx
  * <form {...getFormProps(metadata)} />
  * ```
@@ -101,7 +101,7 @@ export declare function getFormProps<Schema extends Record<string, any>, FormErr
  * Derives the properties of a fieldset element based on the field metadata,
  * including `id`, `name`, `form`, and `aria-describedby`.
  *
- * @example
+ * **Example:**
  * ```tsx
  * <fieldset {...getFieldsetProps(metadata)} />
  * ```
@@ -125,8 +125,9 @@ export declare function getFormControlProps<Schema>(metadata: FieldMetadata<Sche
  * Depends on the provided options, it will also set `defaultChecked` / `checked` if it is a checkbox or radio button,
  * or otherwise `defaultValue` / `value`.
  *
- * @see https://conform.guide/api/react/getInputProps
- * @example
+ * See https://conform.guide/api/react/getInputProps
+ *
+ * **Example:**
  * ```tsx
  * // To setup an uncontrolled input
  * <input {...getInputProps(metadata, { type: 'text' })} />
@@ -145,8 +146,9 @@ export declare function getInputProps<Schema, Options extends InputOptions>(meta
  * and constraint attributes such as `required` or `multiple`.
  * Depends on the provided options, it will also set `defaultValue` / `value`.
  *
- * @see https://conform.guide/api/react/getSelectProps
- * @example
+ * See https://conform.guide/api/react/getSelectProps
+ *
+ * **Example:**
  * ```tsx
  * // To setup an uncontrolled select
  * <select {...getSelectProps(metadata)} />
@@ -161,8 +163,9 @@ export declare function getSelectProps<Schema>(metadata: FieldMetadata<Schema, a
  * and constraint attributes such as `required`, `minLength` or `maxLength`.
  * Depends on the provided options, it will also set `defaultValue` / `value`.
  *
- * @see https://conform.guide/api/react/getTextareaProps
- * @example
+ * See https://conform.guide/api/react/getTextareaProps
+ *
+ * **Example:**
  * ```tsx
  * // To setup an uncontrolled textarea
  * <textarea {...getTextareaProps(metadata)} />
@@ -175,8 +178,9 @@ export declare function getTextareaProps<Schema>(metadata: FieldMetadata<Schema,
  * Derives the properties of a collection of checkboxes or radio buttons based on the field metadata,
  * including common form control attributes like `key`, `id`, `name`, `form`, `autoFocus`, `aria-invalid`, `aria-describedby` and `required`.
  *
- * @see https://conform.guide/api/react/getCollectionProps
- * @example
+ * See https://conform.guide/api/react/getCollectionProps
+ *
+ * **Example:**
  * ```tsx
  * <fieldset>
  *   {getCollectionProps(metadata, {

package/dist/helpers.js

@@ -38,7 +38,7 @@ function getAriaAttributes(metadata) {
  * Derives the properties of a form element based on the form metadata,
  * including `id`, `onSubmit`, `noValidate`, and `aria-describedby`.
  *
- * @example
+ * **Example:**
  * ```tsx
  * <form {...getFormProps(metadata)} />
  * ```
@@ -55,7 +55,7 @@ function getFormProps(metadata, options) {
  * Derives the properties of a fieldset element based on the field metadata,
  * including `id`, `name`, `form`, and `aria-describedby`.
  *
- * @example
+ * **Example:**
  * ```tsx
  * <fieldset {...getFieldsetProps(metadata)} />
  * ```
@@ -87,8 +87,9 @@ function getFormControlProps(metadata, options) {
  * Depends on the provided options, it will also set `defaultChecked` / `checked` if it is a checkbox or radio button,
  * or otherwise `defaultValue` / `value`.
  *
- * @see https://conform.guide/api/react/getInputProps
- * @example
+ * See https://conform.guide/api/react/getInputProps
+ *
+ * **Example:**
  * ```tsx
  * // To setup an uncontrolled input
  * <input {...getInputProps(metadata, { type: 'text' })} />
@@ -129,8 +130,9 @@ function getInputProps(metadata, options) {
  * and constraint attributes such as `required` or `multiple`.
  * Depends on the provided options, it will also set `defaultValue` / `value`.
  *
- * @see https://conform.guide/api/react/getSelectProps
- * @example
+ * See https://conform.guide/api/react/getSelectProps
+ *
+ * **Example:**
  * ```tsx
  * // To setup an uncontrolled select
  * <select {...getSelectProps(metadata)} />
@@ -156,8 +158,9 @@ function getSelectProps(metadata) {
  * and constraint attributes such as `required`, `minLength` or `maxLength`.
  * Depends on the provided options, it will also set `defaultValue` / `value`.
  *
- * @see https://conform.guide/api/react/getTextareaProps
- * @example
+ * See https://conform.guide/api/react/getTextareaProps
+ *
+ * **Example:**
  * ```tsx
  * // To setup an uncontrolled textarea
  * <textarea {...getTextareaProps(metadata)} />
@@ -182,8 +185,9 @@ function getTextareaProps(metadata) {
  * Derives the properties of a collection of checkboxes or radio buttons based on the field metadata,
  * including common form control attributes like `key`, `id`, `name`, `form`, `autoFocus`, `aria-invalid`, `aria-describedby` and `required`.
  *
- * @see https://conform.guide/api/react/getCollectionProps
- * @example
+ * See https://conform.guide/api/react/getCollectionProps
+ *
+ * **Example:**
  * ```tsx
  * <fieldset>
  *   {getCollectionProps(metadata, {

package/dist/helpers.mjs

@@ -34,7 +34,7 @@ function getAriaAttributes(metadata) {
  * Derives the properties of a form element based on the form metadata,
  * including `id`, `onSubmit`, `noValidate`, and `aria-describedby`.
  *
- * @example
+ * **Example:**
  * ```tsx
  * <form {...getFormProps(metadata)} />
  * ```
@@ -51,7 +51,7 @@ function getFormProps(metadata, options) {
  * Derives the properties of a fieldset element based on the field metadata,
  * including `id`, `name`, `form`, and `aria-describedby`.
  *
- * @example
+ * **Example:**
  * ```tsx
  * <fieldset {...getFieldsetProps(metadata)} />
  * ```
@@ -83,8 +83,9 @@ function getFormControlProps(metadata, options) {
  * Depends on the provided options, it will also set `defaultChecked` / `checked` if it is a checkbox or radio button,
  * or otherwise `defaultValue` / `value`.
  *
- * @see https://conform.guide/api/react/getInputProps
- * @example
+ * See https://conform.guide/api/react/getInputProps
+ *
+ * **Example:**
  * ```tsx
  * // To setup an uncontrolled input
  * <input {...getInputProps(metadata, { type: 'text' })} />
@@ -125,8 +126,9 @@ function getInputProps(metadata, options) {
  * and constraint attributes such as `required` or `multiple`.
  * Depends on the provided options, it will also set `defaultValue` / `value`.
  *
- * @see https://conform.guide/api/react/getSelectProps
- * @example
+ * See https://conform.guide/api/react/getSelectProps
+ *
+ * **Example:**
  * ```tsx
  * // To setup an uncontrolled select
  * <select {...getSelectProps(metadata)} />
@@ -152,8 +154,9 @@ function getSelectProps(metadata) {
  * and constraint attributes such as `required`, `minLength` or `maxLength`.
  * Depends on the provided options, it will also set `defaultValue` / `value`.
  *
- * @see https://conform.guide/api/react/getTextareaProps
- * @example
+ * See https://conform.guide/api/react/getTextareaProps
+ *
+ * **Example:**
  * ```tsx
  * // To setup an uncontrolled textarea
  * <textarea {...getTextareaProps(metadata)} />
@@ -178,8 +181,9 @@ function getTextareaProps(metadata) {
  * Derives the properties of a collection of checkboxes or radio buttons based on the field metadata,
  * including common form control attributes like `key`, `id`, `name`, `form`, `autoFocus`, `aria-invalid`, `aria-describedby` and `required`.
  *
- * @see https://conform.guide/api/react/getCollectionProps
- * @example
+ * See https://conform.guide/api/react/getCollectionProps
+ *
+ * **Example:**
  * ```tsx
  * <fieldset>
  *   {getCollectionProps(metadata, {

package/package.json

@@ -3,7 +3,7 @@
   "description": "Conform view adapter for react",
   "homepage": "https://conform.guide",
   "license": "MIT",
-  "version": "1.17.1",
+  "version": "1.19.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.17.1"
+    "@conform-to/dom": "1.19.0"
   },
   "devDependencies": {
     "@babel/core": "^7.17.8",
@@ -60,7 +60,8 @@
     "vitest-browser-react": "^1.0.1"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "keywords": [
     "constraint-validation",