@conform-to/react 1.9.0 → 1.9.1

package/README.md

@@ -7,23 +7,23 @@
  ╚══════╝  ╚═════╝  ╚═╝  ╚══╝ ╚═╝        ╚═════╝  ╚═╝   ╚═╝ ╚═╝   ╚═╝
 ```
 
-Version 1.9.0 / License MIT / Copyright (c) 2024 Edmund Hung
+Version 1.9.1 / License MIT / Copyright (c) 2025 Edmund Hung
 
-A type-safe form validation library utilizing web fundamentals to progressively enhance HTML Forms with full support for server frameworks like Remix and Next.js.
+Progressively enhance HTML forms with React. Build resilient, type-safe forms with no hassle using web standards.
 
-# Getting Started
+## Getting Started
 
 Check out the overview and tutorial at our website https://conform.guide
 
-# Features
+## Features
 
-- Progressive enhancement first APIs
-- Type-safe field inference
-- Fine-grained subscription
-- Built-in accessibility helpers
-- Automatic type coercion with Zod
+- Full type safety with schema field inference
+- Standard Schema support with enhanced Zod and Valibot integration
+- Progressive enhancement first design with built-in accessibility features
+- Native Server Actions support for Remix and Next.js
+- Built on web standards for flexible composition with other tools
 
-# Documentation
+## Documentation
 
 - Validation: https://conform.guide/validation
 - Nested object and Array: https://conform.guide/complex-structures
@@ -31,6 +31,6 @@ Check out the overview and tutorial at our website https://conform.guide
 - Intent button: https://conform.guide/intent-button
 - Accessibility Guide: https://conform.guide/accessibility
 
-# Support
+## Support
 
 To report a bug, please open an issue on the repository at https://github.com/edmundhung/conform. For feature requests and questions, you can post them in the Discussions section.

package/dist/future/state.d.ts

@@ -23,7 +23,8 @@ export declare function isDefaultChecked(context: FormContext<any>, name: string
 export declare function isTouched(state: FormState<any>, name?: string): boolean;
 export declare function getDefaultListKey(prefix: string, initialValue: Record<string, unknown> | null, name: string): string[];
 export declare function getListKey(context: FormContext<any>, name: string): string[];
-export declare function getError<ErrorShape>(state: FormState<ErrorShape>, name?: string): ErrorShape[] | undefined;
+export declare function getErrors<ErrorShape>(state: FormState<ErrorShape>, name?: string): ErrorShape[] | undefined;
+export declare function getFieldErrors<ErrorShape>(state: FormState<ErrorShape>, name?: string): Record<string, ErrorShape[]>;
 /**
  * Gets validation constraint for a field, with fallback to parent array patterns.
  * e.g. "array[0].key" falls back to "array[].key" if specific constraint not found.

package/dist/future/state.js

@@ -119,7 +119,7 @@ function getListKey(context, name) {
   var _context$state$listKe, _context$state$listKe2, _context$state$intend4;
   return (_context$state$listKe = (_context$state$listKe2 = context.state.listKeys) === null || _context$state$listKe2 === void 0 ? void 0 : _context$state$listKe2[name]) !== null && _context$state$listKe !== void 0 ? _context$state$listKe : getDefaultListKey(context.state.resetKey, (_context$state$intend4 = context.state.intendedValue) !== null && _context$state$intend4 !== void 0 ? _context$state$intend4 : context.defaultValue, name);
 }
-function getError(state, name) {
+function getErrors(state, name) {
   var _state$serverError;
   var error = (_state$serverError = state.serverError) !== null && _state$serverError !== void 0 ? _state$serverError : state.clientError;
   if (!error || !isTouched(state, name)) {
@@ -130,6 +130,21 @@ function getError(state, name) {
     return errors;
   }
 }
+function getFieldErrors(state, name) {
+  var result = {};
+  var basePath = future.getPathSegments(name);
+  for (var field of state.touchedFields) {
+    var relativePath = future.getRelativePath(field, basePath);
+    if (!relativePath || relativePath.length === 0) {
+      continue;
+    }
+    var error = getErrors(state, field);
+    if (typeof error !== 'undefined') {
+      result[future.formatPathSegments(relativePath)] = error;
+    }
+  }
+  return result;
+}
 
 /**
  * Gets validation constraint for a field, with fallback to parent array patterns.
@@ -160,29 +175,24 @@ function getConstraint(context, name) {
 }
 function getFormMetadata(context, options) {
   return {
+    key: context.state.resetKey,
     id: context.formId,
+    errorId: "".concat(context.formId, "-form-error"),
+    descriptionId: "".concat(context.formId, "-form-description"),
     get errors() {
-      return getError(context.state);
+      return getErrors(context.state);
     },
     get fieldErrors() {
-      var result = {};
-      for (var name of context.state.touchedFields) {
-        if (!name) {
-          // Skip form-level errors
-          continue;
-        }
-        var error = getError(context.state, name);
-        if (typeof error !== 'undefined') {
-          result[name] = error;
-        }
-      }
-      return result;
+      return getFieldErrors(context.state);
     },
     get touched() {
       return isTouched(context.state);
     },
+    get valid() {
+      return typeof getErrors(context.state) === 'undefined';
+    },
     get invalid() {
-      return typeof getError(context.state) !== 'undefined';
+      return !this.valid;
     },
     props: {
       id: context.formId,
@@ -210,12 +220,13 @@ function getFormMetadata(context, options) {
   };
 }
 function getField(context, options) {
-  var id = "".concat(context.formId, "-").concat(options.name);
+  var id = "".concat(context.formId, "-field-").concat(options.name.replace(/[^a-zA-Z0-9._-]/g, '_'));
   var constraint = getConstraint(context, options.name);
   var metadata = {
     id: id,
     descriptionId: "".concat(id, "-description"),
     errorId: "".concat(id, "-error"),
+    formId: context.formId,
     required: constraint === null || constraint === void 0 ? void 0 : constraint.required,
     minLength: constraint === null || constraint === void 0 ? void 0 : constraint.minLength,
     maxLength: constraint === null || constraint === void 0 ? void 0 : constraint.maxLength,
@@ -236,11 +247,17 @@ function getField(context, options) {
     get touched() {
       return isTouched(context.state, options.name);
     },
+    get valid() {
+      return typeof getErrors(context.state, options.name) === 'undefined';
+    },
     get invalid() {
-      return typeof getError(context.state, options.name) !== 'undefined';
+      return !this.valid;
     },
     get errors() {
-      return getError(context.state, options.name);
+      return getErrors(context.state, options.name);
+    },
+    get fieldErrors() {
+      return getFieldErrors(context.state, options.name);
     }
   };
   return Object.assign(metadata, {
@@ -288,8 +305,9 @@ exports.getConstraint = getConstraint;
 exports.getDefaultListKey = getDefaultListKey;
 exports.getDefaultOptions = getDefaultOptions;
 exports.getDefaultValue = getDefaultValue;
-exports.getError = getError;
+exports.getErrors = getErrors;
 exports.getField = getField;
+exports.getFieldErrors = getFieldErrors;
 exports.getFieldList = getFieldList;
 exports.getFieldset = getFieldset;
 exports.getFormMetadata = getFormMetadata;

package/dist/future/state.mjs

@@ -115,7 +115,7 @@ function getListKey(context, name) {
   var _context$state$listKe, _context$state$listKe2, _context$state$intend4;
   return (_context$state$listKe = (_context$state$listKe2 = context.state.listKeys) === null || _context$state$listKe2 === void 0 ? void 0 : _context$state$listKe2[name]) !== null && _context$state$listKe !== void 0 ? _context$state$listKe : getDefaultListKey(context.state.resetKey, (_context$state$intend4 = context.state.intendedValue) !== null && _context$state$intend4 !== void 0 ? _context$state$intend4 : context.defaultValue, name);
 }
-function getError(state, name) {
+function getErrors(state, name) {
   var _state$serverError;
   var error = (_state$serverError = state.serverError) !== null && _state$serverError !== void 0 ? _state$serverError : state.clientError;
   if (!error || !isTouched(state, name)) {
@@ -126,6 +126,21 @@ function getError(state, name) {
     return errors;
   }
 }
+function getFieldErrors(state, name) {
+  var result = {};
+  var basePath = getPathSegments(name);
+  for (var field of state.touchedFields) {
+    var relativePath = getRelativePath(field, basePath);
+    if (!relativePath || relativePath.length === 0) {
+      continue;
+    }
+    var error = getErrors(state, field);
+    if (typeof error !== 'undefined') {
+      result[formatPathSegments(relativePath)] = error;
+    }
+  }
+  return result;
+}
 
 /**
  * Gets validation constraint for a field, with fallback to parent array patterns.
@@ -156,29 +171,24 @@ function getConstraint(context, name) {
 }
 function getFormMetadata(context, options) {
   return {
+    key: context.state.resetKey,
     id: context.formId,
+    errorId: "".concat(context.formId, "-form-error"),
+    descriptionId: "".concat(context.formId, "-form-description"),
     get errors() {
-      return getError(context.state);
+      return getErrors(context.state);
     },
     get fieldErrors() {
-      var result = {};
-      for (var name of context.state.touchedFields) {
-        if (!name) {
-          // Skip form-level errors
-          continue;
-        }
-        var error = getError(context.state, name);
-        if (typeof error !== 'undefined') {
-          result[name] = error;
-        }
-      }
-      return result;
+      return getFieldErrors(context.state);
     },
     get touched() {
       return isTouched(context.state);
     },
+    get valid() {
+      return typeof getErrors(context.state) === 'undefined';
+    },
     get invalid() {
-      return typeof getError(context.state) !== 'undefined';
+      return !this.valid;
     },
     props: {
       id: context.formId,
@@ -206,12 +216,13 @@ function getFormMetadata(context, options) {
   };
 }
 function getField(context, options) {
-  var id = "".concat(context.formId, "-").concat(options.name);
+  var id = "".concat(context.formId, "-field-").concat(options.name.replace(/[^a-zA-Z0-9._-]/g, '_'));
   var constraint = getConstraint(context, options.name);
   var metadata = {
     id: id,
     descriptionId: "".concat(id, "-description"),
     errorId: "".concat(id, "-error"),
+    formId: context.formId,
     required: constraint === null || constraint === void 0 ? void 0 : constraint.required,
     minLength: constraint === null || constraint === void 0 ? void 0 : constraint.minLength,
     maxLength: constraint === null || constraint === void 0 ? void 0 : constraint.maxLength,
@@ -232,11 +243,17 @@ function getField(context, options) {
     get touched() {
       return isTouched(context.state, options.name);
     },
+    get valid() {
+      return typeof getErrors(context.state, options.name) === 'undefined';
+    },
     get invalid() {
-      return typeof getError(context.state, options.name) !== 'undefined';
+      return !this.valid;
     },
     get errors() {
-      return getError(context.state, options.name);
+      return getErrors(context.state, options.name);
+    },
+    get fieldErrors() {
+      return getFieldErrors(context.state, options.name);
     }
   };
   return Object.assign(metadata, {
@@ -280,4 +297,4 @@ function getFieldList(context, options) {
   });
 }
 
-export { getConstraint, getDefaultListKey, getDefaultOptions, getDefaultValue, getError, getField, getFieldList, getFieldset, getFormMetadata, getListKey, initializeState, isDefaultChecked, isTouched, updateState };
+export { getConstraint, getDefaultListKey, getDefaultOptions, getDefaultValue, getErrors, getField, getFieldErrors, getFieldList, getFieldset, getFormMetadata, getListKey, initializeState, isDefaultChecked, isTouched, updateState };

package/dist/future/types.d.ts

@@ -262,15 +262,23 @@ FieldMetadata extends Record<string, unknown>> = {
 };
 /** Form-level metadata and state object containing validation status, errors, and field access methods. */
 export type FormMetadata<ErrorShape, FieldMetadata extends Record<string, unknown> = DefaultFieldMetadata<ErrorShape>> = Readonly<{
+    /** Unique identifier that changes on form reset */
+    key: string;
     /** The form's unique identifier. */
     id: string;
+    /** Auto-generated ID for associating form descriptions via aria-describedby. */
+    descriptionId: string;
+    /** Auto-generated ID for associating form errors via aria-describedby. */
+    errorId: string;
     /** Whether any field in the form has been touched (through intent.validate() or the shouldValidate option). */
     touched: boolean;
-    /** Whether the form currently has any validation errors. */
+    /** 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  */
     invalid: boolean;
     /** Form-level validation errors, if any exist. */
     errors: ErrorShape[] | undefined;
-    /** Object containing field-specific validation errors for all validated fields. */
+    /** Object containing errors for all touched fields. */
     fieldErrors: Record<string, ErrorShape[]>;
     /** Form props object for spreading onto the <form> element. */
     props: Readonly<{
@@ -295,12 +303,14 @@ export type FormMetadata<ErrorShape, FieldMetadata extends Record<string, unknow
 }>;
 /** Default field metadata object containing field state, validation attributes, and accessibility IDs. */
 export type DefaultFieldMetadata<ErrorShape> = Readonly<ValidationAttributes & {
-    /** The field's unique identifier, automatically generated as {formId}-{fieldName}. */
+    /** The field's unique identifier, automatically generated as {formId}-field-{fieldName}. */
     id: string;
     /** Auto-generated ID for associating field descriptions via aria-describedby. */
     descriptionId: string;
     /** Auto-generated ID for associating field errors via aria-describedby. */
     errorId: string;
+    /** The form's unique identifier for associating field via the `form` attribute. */
+    formId: string;
     /** The field's default value as a string. */
     defaultValue: string | undefined;
     /** Default selected options for multi-select fields or checkbox group. */
@@ -309,10 +319,14 @@ export type DefaultFieldMetadata<ErrorShape> = Readonly<ValidationAttributes & {
     defaultChecked: boolean | undefined;
     /** Whether this field has been touched (through intent.validate() or the shouldValidate option). */
     touched: boolean;
-    /** Whether this field currently has validation errors. */
+    /** Whether this field 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  */
     invalid: boolean;
     /** Array of validation error messages for this field. */
     errors: ErrorShape[] | undefined;
+    /** Object containing errors for all touched subfields. */
+    fieldErrors: Record<string, ErrorShape[]>;
 }>;
 export type ValidateResult<ErrorShape, Value> = FormError<ErrorShape> | null | {
     error: FormError<ErrorShape> | null;

package/package.json

@@ -3,7 +3,7 @@
   "description": "Conform view adapter for react",
   "homepage": "https://conform.guide",
   "license": "MIT",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "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.9.0"
+    "@conform-to/dom": "1.9.1"
   },
   "devDependencies": {
     "@babel/core": "^7.17.8",