@ttoss/forms 0.17.14 → 0.18.0

package/README.md

@@ -9,7 +9,7 @@ pnpm i @ttoss/forms @ttoss/react-i18n
 pnpm i --save-dev @ttoss/i18n-cli
 ```
 
-## Quick Start
+## Quickstart
 
 ```tsx
 import { Button } from '@ttoss/ui';

package/dist/esm/index.js

@@ -97,6 +97,7 @@ import * as React2 from "react";
 import { useFormContext } from "react-hook-form";
 import { FormattedMessage } from "@ttoss/react-i18n";
 import { HelpText } from "@ttoss/ui";
+import { ErrorMessage as HookformErrorMessage } from "@hookform/error-message";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var isMessageDescriptor = possibleMessageDescriptor => {
   return possibleMessageDescriptor !== void 0 && possibleMessageDescriptor.defaultMessage !== void 0;
@@ -110,17 +111,24 @@ var ErrorMessage = ({
       errors
     }
   } = useFormContext();
-  const error = errors[name];
-  if (!error) return null;
-  const {
-    message
-  } = error;
-  return error && /* @__PURE__ */jsx2(HelpText, {
-    negative: true,
-    disabled,
-    children: isMessageDescriptor(message) ? /* @__PURE__ */jsx2(FormattedMessage, {
-      ...message
-    }) : message
+  return /* @__PURE__ */jsx2(HookformErrorMessage, {
+    name,
+    errors,
+    render: ({
+      message
+    }) => {
+      return /* @__PURE__ */jsx2(HelpText, {
+        negative: true,
+        disabled,
+        children: (() => {
+          if (typeof message === "string") return message;
+          if (isMessageDescriptor(message)) return /* @__PURE__ */jsx2(FormattedMessage, {
+            ...message
+          });
+          return JSON.stringify(message);
+        })()
+      });
+    }
   });
 };
 

package/dist/index.js

@@ -133,6 +133,7 @@ var React2 = __toESM(require("react"));
 var import_react_hook_form2 = require("react-hook-form");
 var import_react_i18n2 = require("@ttoss/react-i18n");
 var import_ui2 = require("@ttoss/ui");
+var import_error_message = require("@hookform/error-message");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var isMessageDescriptor = possibleMessageDescriptor => {
   return possibleMessageDescriptor !== void 0 && possibleMessageDescriptor.defaultMessage !== void 0;
@@ -146,17 +147,24 @@ var ErrorMessage = ({
       errors
     }
   } = (0, import_react_hook_form2.useFormContext)();
-  const error = errors[name];
-  if (!error) return null;
-  const {
-    message
-  } = error;
-  return error && /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui2.HelpText, {
-    negative: true,
-    disabled,
-    children: isMessageDescriptor(message) ? /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_react_i18n2.FormattedMessage, {
-      ...message
-    }) : message
+  return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_error_message.ErrorMessage, {
+    name,
+    errors,
+    render: ({
+      message
+    }) => {
+      return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui2.HelpText, {
+        negative: true,
+        disabled,
+        children: (() => {
+          if (typeof message === "string") return message;
+          if (isMessageDescriptor(message)) return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_react_i18n2.FormattedMessage, {
+            ...message
+          });
+          return JSON.stringify(message);
+        })()
+      });
+    }
   });
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.17.14",
+  "version": "0.18.0",
   "license": "UNLICENSED",
   "author": "ttoss",
   "contributors": [
@@ -15,6 +15,7 @@
   "sideEffects": true,
   "typings": "dist/index.d.ts",
   "dependencies": {
+    "@hookform/error-message": "^2.0.1",
     "@hookform/resolvers": "^3.1.0",
     "react-hook-form": "^7.44.3",
     "yup": "^1.2.0"
@@ -22,7 +23,7 @@
   "peerDependencies": {
     "react": ">=16.8.0",
     "@ttoss/react-i18n": "^1.23.1",
-    "@ttoss/ui": "^1.36.12"
+    "@ttoss/ui": "^1.37.0"
   },
   "devDependencies": {
     "@types/jest": "^29.5.2",
@@ -35,10 +36,10 @@
     "tsup": "^6.7.0",
     "yup": "^1.2.0",
     "@ttoss/config": "^1.30.1",
-    "@ttoss/react-i18n": "^1.23.1",
     "@ttoss/i18n-cli": "^0.6.0",
+    "@ttoss/react-i18n": "^1.23.1",
     "@ttoss/test-utils": "^1.23.2",
-    "@ttoss/ui": "^1.36.12"
+    "@ttoss/ui": "^1.37.0"
   },
   "publishConfig": {
     "access": "public"

package/src/ErrorMessage.tsx

@@ -1,6 +1,13 @@
-import { FieldName, FieldValues, useFormContext } from 'react-hook-form';
+import {
+  FieldError,
+  FieldErrors,
+  FieldName,
+  FieldValues,
+  useFormContext,
+} from 'react-hook-form';
 import { FormattedMessage, MessageDescriptor } from '@ttoss/react-i18n';
 import { HelpText } from '@ttoss/ui';
+import { ErrorMessage as HookformErrorMessage } from '@hookform/error-message';
 
 type ModifiedDescriptor = MessageDescriptor & { values?: any };
 
@@ -25,21 +32,24 @@ export const ErrorMessage = <TFieldValues extends FieldValues = FieldValues>({
     formState: { errors },
   } = useFormContext<TFieldValues>();
 
-  const error = errors[name];
-
-  if (!error) return null;
+  return (
+    <HookformErrorMessage
+      name={name as any}
+      errors={errors}
+      render={({ message }: { message: FieldError | string }) => {
+        return (
+          <HelpText negative disabled={disabled}>
+            {(() => {
+              if (typeof message === 'string') return message;
 
-  const { message } = error;
+              if (isMessageDescriptor(message))
+                return <FormattedMessage {...message} />;
 
-  return (
-    error && (
-      <HelpText negative disabled={disabled}>
-        {isMessageDescriptor(message) ? (
-          <FormattedMessage {...message} />
-        ) : (
-          (message as string)
-        )}
-      </HelpText>
-    )
+              return JSON.stringify(message);
+            })()}
+          </HelpText>
+        );
+      }}
+    />
   );
 };