@cedarjs/forms 7.0.0-canary.3198 → 7.0.0-canary.3200

package/dist/FieldError.d.ts

@@ -1,9 +1,35 @@
 import React from 'react';
+export interface FieldErrorRenderProps {
+    /**
+     * The error message. When the failed validation rule has no message of its
+     * own this is the default message for the error's `type`.
+     */
+    message: string;
+    /**
+     * The message of every failed validation rule, keyed by rule. Only set when
+     * the form collects all errors: `<Form config={{ criteriaMode: 'all' }}>`.
+     */
+    messages?: Record<string, string | string[]>;
+    /**
+     * What caused the error: the name of the validation rule (`required`,
+     * `minLength`, ...), the key of the failing function in a `validate`
+     * object, `server` for errors from the API side, or whatever `type`
+     * `setError` was called with.
+     */
+    type?: string | number;
+}
 export interface FieldErrorProps extends React.ComponentPropsWithoutRef<'span'> {
     /**
      * The name of the field the `<FieldError>`'s associated with.
+     * Use `root.<key>` for a form-level error set with
+     * `setError('root.<key>', ...)`.
      */
     name: string;
+    /**
+     * Render something other than a `<span>` with the message in it. Only
+     * called when there's an error.
+     */
+    render?: (props: FieldErrorRenderProps) => React.ReactNode;
 }
 /**
  * Renders a `<span>` with an error message if there's a validation error on the corresponding field.
@@ -25,6 +51,22 @@ export interface FieldErrorProps extends React.ComponentPropsWithoutRef<'span'>
  * <FieldError name="name" className="error" />
  * ```
  *
+ * @example Rendering every failed rule's message with `render`
+ *
+ * ```jsx
+ * <Form config={{ criteriaMode: 'all' }}>
+ *   <FieldError
+ *     name="password"
+ *     render={({ messages }) => (
+ *       <ul>
+ *         {Object.entries(messages).map(([type, message]) => (
+ *           <li key={type}>{message}</li>
+ *         ))}
+ *       </ul>
+ *     )}
+ *   />
+ * ```
+ *
  * @see {@link https://cedarjs.com/docs/tutorial/chapter3/forms#fielderror}
  *
  * @privateRemarks
@@ -39,5 +81,5 @@ export interface FieldErrorProps extends React.ComponentPropsWithoutRef<'span'>
  *
  * @see {@link https://react-hook-form.com/get-started#Handleerrors}
  */
-export declare const FieldError: ({ name, ...rest }: FieldErrorProps) => React.JSX.Element | null;
+export declare const FieldError: ({ name, render, ...rest }: FieldErrorProps) => string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
 //# sourceMappingURL=FieldError.d.ts.map

package/dist/FieldError.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldError.d.ts","sourceRoot":"","sources":["../src/FieldError.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC;IAC7E;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;CACb;AAYD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,UAAU,GAAI,mBAAmB,eAAe,6BAe5D,CAAA"}
+{"version":3,"file":"FieldError.d.ts","sourceRoot":"","sources":["../src/FieldError.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAA;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC,CAAA;IAC5C;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACvB;AAED,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC;IAC7E;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,KAAK,CAAC,SAAS,CAAA;CAC3D;AAYD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,eAAO,MAAM,UAAU,GAAI,2BAA2B,eAAe,oSAsDpE,CAAA"}

package/dist/FieldError.js

@@ -9,13 +9,41 @@ const DEFAULT_MESSAGES = {
   max: "is too high",
   validate: "is not valid"
 };
-const FieldError = ({ name, ...rest }) => {
+const FieldError = ({ name, render, ...rest }) => {
   const {
     formState: { errors }
   } = useFormContext();
   const validationError = get(errors, name);
-  const errorMessage = validationError && (validationError.message || `${name} ${DEFAULT_MESSAGES[validationError.type]}`);
-  return validationError ? /* @__PURE__ */ React.createElement("span", { ...rest }, errorMessage) : null;
+  if (!validationError) {
+    return null;
+  }
+  const isRootError = name === "root" || name.startsWith("root.");
+  const defaultMessages = DEFAULT_MESSAGES;
+  const getDefaultMessage = (type) => {
+    if (isRootError) {
+      return "";
+    }
+    return `${name} ${defaultMessages[String(type)] ?? DEFAULT_MESSAGES.validate}`;
+  };
+  const message = validationError.message || getDefaultMessage(validationError.type);
+  if (render) {
+    const toMessage = (type, result) => {
+      if (Array.isArray(result) || typeof result === "string" && result) {
+        return result;
+      }
+      return getDefaultMessage(type);
+    };
+    const messages = validationError.types && Object.fromEntries(
+      Object.entries(validationError.types).map(
+        ([type, result]) => [
+          type,
+          toMessage(type, result)
+        ]
+      )
+    );
+    return render({ message, messages, type: validationError.type });
+  }
+  return message ? /* @__PURE__ */ React.createElement("span", { ...rest }, message) : null;
 };
 export {
   FieldError

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cedarjs/forms",
-  "version": "7.0.0-canary.3198",
+  "version": "7.0.0-canary.3200",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/cedarjs/cedar.git",
@@ -36,7 +36,7 @@
     "react-hook-form": "7.88.0"
   },
   "devDependencies": {
-    "@cedarjs/framework-tools": "7.0.0-canary.3198",
+    "@cedarjs/framework-tools": "7.0.0-canary.3200",
     "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.3",