@hortiview/shared-components 0.0.5962 → 0.0.6044

package/dist/assets/FormText.css

@@ -1 +1 @@
-._formTextAreaHelperText_7ae2c_1{display:flex;justify-content:space-between}._invalid_7ae2c_6+*[class*=mdc-text-field-helper-line] *[class*=mdc-text-field-helper-text]{color:var(--lmnt-theme-danger)!important}._formText_7ae2c_1+*[class*=mdc-text-field-helper-line] *[class*=mdc-text-field-helper-text]{margin-bottom:-19.33px!important}._formTextArea_7ae2c_1,._formTextArea_7ae2c_1 *[class*=mdc-text-field-helper-text]{width:100%}._formTextArea_7ae2c_1 *[class*=mdc-text-field-helper-text]:before{display:block;height:6px}
+._formTextAreaHelperText_1n0bk_1{align-self:flex-end;color:var(--lmnt-helper-text-color);padding-right:1rem}._invalid_1n0bk_6._formTextAreaHelperText_1n0bk_1{color:var(--lmnt-theme-danger)}._required_1n0bk_9._formTextAreaHelperText_1n0bk_1{margin-top:-1.125rem}._invalid_1n0bk_6+*[class*=mdc-text-field-helper-line] *[class*=mdc-text-field-helper-text]{color:var(--lmnt-theme-danger)!important}._formTextArea_1n0bk_1{width:100%;display:flex;flex-flow:column}

package/dist/components/FormComponents/FormText/FormText.js

@@ -1,109 +1,115 @@
 import "../../../assets/FormText.css";
-import { jsx as t, Fragment as z, jsxs as I } from "react/jsx-runtime";
-import { Textfield as P } from "@element/react-components";
-import { useState as R, useMemo as s } from "react";
-import { useFormContext as V, Controller as _ } from "react-hook-form";
-const W = "_formTextAreaHelperText_7ae2c_1", b = "_invalid_7ae2c_6", w = "_formText_7ae2c_1", D = "_formTextArea_7ae2c_1", m = {
+import { jsx as n, Fragment as h, jsxs as I } from "react/jsx-runtime";
+import { Textfield as M, TypoCaption as P } from "@element/react-components";
+import { useState as R, useMemo as d } from "react";
+import { useFormContext as V, Controller as C } from "react-hook-form";
+const W = "_formTextAreaHelperText_1n0bk_1", w = "_invalid_1n0bk_6", D = "_required_1n0bk_9", E = "_formTextArea_1n0bk_1", i = {
   formTextAreaHelperText: W,
-  invalid: b,
-  formText: w,
-  formTextArea: D
-}, E = ({
+  invalid: w,
+  required: D,
+  formTextArea: E
+}, G = ({
   count: e,
   maxCount: c,
-  required: x = !1,
-  requiredText: r = ""
-}) => /* @__PURE__ */ I("div", { className: m.formTextAreaHelperText, children: [
-  x ? /* @__PURE__ */ t("div", { children: r }) : /* @__PURE__ */ t("div", {}),
-  /* @__PURE__ */ t("div", { children: `${e}/${c}` })
-] }), Y = (e) => e.textarea ? /* @__PURE__ */ t(G, { ...e }) : /* @__PURE__ */ t(J, { ...e }), G = (e) => /* @__PURE__ */ t("div", { className: m.formTextArea, children: /* @__PURE__ */ t(C, { ...e }) }), J = (e) => /* @__PURE__ */ t(C, { ...e }), C = ({
+  invalid: m = !1,
+  required: r = !1
+}) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: `${i.formTextAreaHelperText} ${m ? i.invalid : ""} ${r ? i.required : ""}`,
+    children: /* @__PURE__ */ n(P, { children: `${e}/${c}` })
+  }
+), Z = (e) => e.textarea ? /* @__PURE__ */ n(J, { ...e }) : /* @__PURE__ */ n(K, { ...e }), J = (e) => /* @__PURE__ */ n("div", { className: i.formTextArea, children: /* @__PURE__ */ n(_, { ...e }) }), K = (e) => /* @__PURE__ */ n(_, { ...e }), _ = ({
   propertyName: e,
   label: c,
-  disabled: x = !1,
+  disabled: m = !1,
   textarea: r = !1,
   hidden: A = !1,
-  placeholder: F,
-  type: L,
-  prefixText: H,
-  inputMode: q,
-  trailingIcon: S,
-  trigger: d = "likeForm",
-  rules: n
+  placeholder: q,
+  type: F,
+  prefixText: $,
+  inputMode: L,
+  trailingIcon: k,
+  trigger: x = "likeForm",
+  rules: t
 }) => {
   const {
     control: f,
     getFieldState: u,
-    formState: { errors: l },
+    formState: { errors: s },
     trigger: T
-  } = V(), [$, B] = R(0), j = (i) => {
-    const a = i.target.value;
-    B(a?.length ?? 0);
-  }, M = () => {
-    if (l && l[e]) {
-      const i = l[e]?.message;
-      return i || "Invalid input";
+  } = V(), [H, b] = R(0), S = (a) => {
+    const l = a.target.value;
+    b(l?.length ?? 0);
+  }, B = () => {
+    if (s && s[e]) {
+      const a = s[e]?.message;
+      return a || "Invalid input";
     }
-    return o && r ? /* @__PURE__ */ t(
-      E,
-      {
-        count: $,
-        maxCount: o,
-        required: v,
-        requiredText: g
-      }
-    ) : g;
-  }, o = s(
-    () => n?.maxLength?.value,
-    [n]
-  ), k = s(
-    () => n?.minLength?.value,
-    [n]
-  ), v = s(
-    () => n?.required?.value,
-    [n]
-  ), g = s(
-    () => n?.required?.message,
-    [n]
+    return z;
+  }, o = d(
+    () => t?.maxLength?.value,
+    [t]
+  ), j = d(
+    () => t?.minLength?.value,
+    [t]
+  ), v = d(
+    () => t?.required?.value,
+    [t]
+  ), z = d(
+    () => t?.required?.message,
+    [t]
   );
-  return A ? /* @__PURE__ */ t(_, { name: e, control: f, render: () => /* @__PURE__ */ t(z, {}) }) : /* @__PURE__ */ t(
-    _,
+  return A ? /* @__PURE__ */ n(C, { name: e, control: f, render: () => /* @__PURE__ */ n(h, {}) }) : /* @__PURE__ */ n(
+    C,
     {
       name: e,
-      rules: n,
+      rules: t,
       control: f,
-      render: ({ field: { ref: i, ...a } }) => /* @__PURE__ */ t(
-        P,
-        {
-          ...a,
-          value: a.value ?? "",
-          type: L,
-          fullWidth: !0,
-          inputMode: q,
-          placeholder: F,
-          prefixText: H,
-          disabled: x,
-          helperText: M(),
-          helperTextPersistent: l !== void 0 || v || o !== void 0 && r,
-          label: c,
-          variant: "outlined",
-          maxlength: o,
-          minLength: k,
-          textarea: r,
-          noResize: !1,
-          onBlur: () => {
-            d === "onBlur" && T(e);
-          },
-          onChange: (h) => {
-            a.onChange(h), r && o !== void 0 && j(h), d === "onChange" && T(e);
-          },
-          valid: !u(e).invalid,
-          className: `${m.formText} ${u(e).invalid ? m.invalid : ""}`,
-          trailingIcon: S
-        }
-      )
+      render: ({ field: { ref: a, ...l } }) => /* @__PURE__ */ I(h, { children: [
+        /* @__PURE__ */ n(
+          M,
+          {
+            ...l,
+            value: l.value ?? "",
+            type: F,
+            fullWidth: !0,
+            inputMode: L,
+            placeholder: q,
+            prefixText: $,
+            disabled: m,
+            helperText: B(),
+            helperTextPersistent: s !== void 0 || v || o !== void 0 && r,
+            label: c,
+            variant: "outlined",
+            maxlength: o,
+            minLength: j,
+            textarea: r,
+            noResize: !1,
+            onBlur: () => {
+              x === "onBlur" && T(e);
+            },
+            onChange: (g) => {
+              l.onChange(g), r && o !== void 0 && S(g), x === "onChange" && T(e);
+            },
+            valid: !u(e).invalid,
+            className: `${i.formText} ${u(e).invalid ? i.invalid : ""}`,
+            trailingIcon: k
+          }
+        ),
+        o && r && /* @__PURE__ */ n(
+          G,
+          {
+            count: H,
+            maxCount: o,
+            invalid: u(e).invalid,
+            required: v
+          }
+        )
+      ] })
     }
   );
 };
 export {
-  Y as FormText
+  Z as FormText
 };

package/dist/components/FormComponents/FormText/FormText.test.js

@@ -1,13 +1,13 @@
 import { jsx as n } from "react/jsx-runtime";
 import { r as s, s as r, f as d } from "../../../react.esm-C0LtovhP.js";
-import { FormText as l } from "./FormText.js";
-import { v as a, d as i, t as o, g as t } from "../../../vi.JYQecGiw-BbUbJcT8.js";
+import { FormText as o } from "./FormText.js";
+import { v as a, d as i, t as l, g as e } from "../../../vi.JYQecGiw-BbUbJcT8.js";
 const m = a.fn();
 a.mock("react-hook-form", () => ({
   ...a.importActual("react-hook-form"),
   Controller: ({
-    render: e
-  }) => e({
+    render: t
+  }) => t({
     field: {
       ref: void 0,
       onChange: m,
@@ -42,10 +42,10 @@ a.mock("react-hook-form", () => ({
   })
 }));
 i("FormText Test", () => {
-  o("render FormText and return single line text field", () => {
+  l("render FormText and return single line text field", () => {
     s(
       /* @__PURE__ */ n(
-        l,
+        o,
         {
           rules: {
             maxLength: {
@@ -58,12 +58,12 @@ i("FormText Test", () => {
         }
       )
     );
-    const e = r.getByRole("textbox");
-    t(e).toBeInTheDocument(), t(e).toBeInstanceOf(HTMLInputElement), t(e).toHaveAttribute("maxlength", "100"), t(r.getByText("address.line2")).toBeInTheDocument();
-  }), o("change value of single line text field", () => {
+    const t = r.getByRole("textbox");
+    e(t).toBeInTheDocument(), e(t).toBeInstanceOf(HTMLInputElement), e(t).toHaveAttribute("maxlength", "100"), e(r.getByText("address.line2")).toBeInTheDocument();
+  }), l("change value of single line text field", () => {
     s(
       /* @__PURE__ */ n(
-        l,
+        o,
         {
           rules: {
             maxLength: {
@@ -76,12 +76,12 @@ i("FormText Test", () => {
         }
       )
     );
-    const e = r.getByRole("textbox");
-    t(e).toHaveValue("test"), d.change(e, { target: { value: "test-change" } }), t(m).toHaveBeenCalled();
-  }), o("render FormText and return text area", () => {
+    const t = r.getByRole("textbox");
+    e(t).toHaveValue("test"), d.change(t, { target: { value: "test-change" } }), e(m).toHaveBeenCalled();
+  }), l("render FormText and return text area", () => {
     s(
       /* @__PURE__ */ n(
-        l,
+        o,
         {
           rules: {
             required: {
@@ -99,12 +99,29 @@ i("FormText Test", () => {
         }
       )
     );
-    const e = r.getByRole("textbox");
-    t(e).toBeInTheDocument(), t(e).toBeInstanceOf(HTMLTextAreaElement), t(e).toHaveAttribute("maxlength", "200"), t(r.getByText("address.line1")).toBeInTheDocument(), t(r.getByText("required")).toBeInTheDocument();
-  }), o("change value of text area", () => {
+    const t = r.getByRole("textbox");
+    e(t).toBeInTheDocument(), e(t).toBeInstanceOf(HTMLTextAreaElement), e(t).toHaveAttribute("maxlength", "200"), e(r.getByText("address.line1")).toBeInTheDocument(), e(r.getByText("required")).toBeInTheDocument();
+  }), l("render FormText with maxLength indicator", () => {
     s(
       /* @__PURE__ */ n(
-        l,
+        o,
+        {
+          rules: {
+            maxLength: {
+              value: 200,
+              message: "max length is 200"
+            }
+          },
+          label: "address.line1",
+          propertyName: "addressLine1",
+          textarea: !0
+        }
+      )
+    ), e(r.getByText("address.line1")).toBeInTheDocument(), e(r.queryByText("required")).not.toBeInTheDocument(), e(r.getByText("0/200")).toBeInTheDocument();
+  }), l("change value of text area", () => {
+    s(
+      /* @__PURE__ */ n(
+        o,
         {
           rules: {
             required: {
@@ -122,7 +139,7 @@ i("FormText Test", () => {
         }
       )
     );
-    const e = r.getByRole("textbox");
-    d.change(e, { target: { value: "test-change" } }), t(m).toHaveBeenCalled();
+    const t = r.getByRole("textbox");
+    d.change(t, { target: { value: "test-change" } }), e(m).toHaveBeenCalled();
   });
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hortiview/shared-components",
   "description": "This is a shared component library. It should used in the HortiView platform and its modules.",
-  "version": "0.0.5962",
+  "version": "0.0.6044",
   "type": "module",
   "repository": "https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared",
   "author": "Falk Menge <falk.menge.ext@bayer.com>",