@hortiview/shared-components 0.0.11587 → 0.0.11747

package/README.md

@@ -1,6 +1,6 @@
 # HortiView Shared Components
 
-This is a shared component library. It should used in the HortiView platform and its modules.
+This is a shared components library. It should be used in the HortiView platform and its modules.
 
 ## Install
 
@@ -10,10 +10,9 @@ This is a shared component library. It should used in the HortiView platform and
 
 ## Prerequisites
 
-This library is based in Bayers element component library. To use it properly you need to install this package first.
-To get access to this restricted package please contact your Bayer contact person.
+This library is based on a public version of Bayer's Element component library.
 
-After you gain access use `yarn add @element-public/react-components @element-public/themes` or `npm i @element-public/react-components @element-public/themes` to add the package to your solution.
+Use `yarn add @element-public/react-components @element-public/themes` or `npm i @element-public/react-components @element-public/themes` to add the packages to your solution.
 
 ## Remarks
 
@@ -63,6 +62,7 @@ Additionally the library provides form components using [react-hook-form](https:
 1. [useBreakpoints](#usebreakpoints)
 1. [capitalizeFirstLetters](#capitalizefirstletters)
 1. [trimLeadingAndTrailingSpaces](#trimleadingandtrailingspaces)
+1. [getNumberAsLocaleString](#getnumberaslocalestring)
 
 ## Available Components:
 

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

@@ -1,140 +1,130 @@
-import { jsx as t, Fragment as F, jsxs as D } from "react/jsx-runtime";
-import { T as G } from "../../../index.es-25EARqhH.js";
-import { a as I } from "../../../index.es-CF_xy2ns.js";
-import { g as J } from "../../../get-DFv1gXfq.js";
-import { useState as q, useCallback as K, useMemo as T, useEffect as O } from "react";
-import { useFormContext as Q, Controller as H } from "react-hook-form";
-import { useHelperText as U } from "../../../hooks/useHelperText.js";
-import '../../../assets/FormText.css';const X = "_formTextAreaHelperText_168p8_1", Y = "_invalid_168p8_7", Z = "_required_168p8_11", N = "_formTextArea_168p8_1", y = "_characterCount_168p8_25", p = "_withoutCharacterCount_168p8_31", n = {
-  formTextAreaHelperText: X,
-  invalid: Y,
-  required: Z,
-  formTextArea: N,
-  characterCount: y,
-  withoutCharacterCount: p
-}, ee = ({
+import { jsx as t, Fragment as v, jsxs as z } from "react/jsx-runtime";
+import { T as M } from "../../../index.es-25EARqhH.js";
+import { a as P } from "../../../index.es-CF_xy2ns.js";
+import { useState as V, useCallback as W, useMemo as m } from "react";
+import { useFormContext as D, Controller as _ } from "react-hook-form";
+import { useHelperText as E } from "../../../hooks/useHelperText.js";
+import '../../../assets/FormText.css';const G = "_formTextAreaHelperText_168p8_1", I = "_invalid_168p8_7", J = "_required_168p8_11", K = "_formTextArea_168p8_1", O = "_characterCount_168p8_25", Q = "_withoutCharacterCount_168p8_31", r = {
+  formTextAreaHelperText: G,
+  invalid: I,
+  required: J,
+  formTextArea: K,
+  characterCount: O,
+  withoutCharacterCount: Q
+}, U = ({
   count: e,
-  maxCount: s,
-  invalid: u = !1,
-  hasRequiredText: r = !1
+  maxCount: u,
+  invalid: s = !1,
+  hasRequiredText: n = !1
 }) => /* @__PURE__ */ t(
   "div",
   {
     "data-testid": "character-counter-container",
-    className: `${n.formTextAreaHelperText} ${u ? n.invalid : ""} ${r ? n.required : ""}`,
-    children: /* @__PURE__ */ t(I, { children: `${e}/${s}` })
+    className: `${r.formTextAreaHelperText} ${s ? r.invalid : ""} ${n ? r.required : ""}`,
+    children: /* @__PURE__ */ t(P, { children: `${e}/${u}` })
   }
-), ue = (e) => e.textarea ? /* @__PURE__ */ t(te, { ...e }) : /* @__PURE__ */ t(re, { ...e }), te = (e) => /* @__PURE__ */ t("div", { "data-testid": "form-text-area", className: n.formTextArea, children: /* @__PURE__ */ t(L, { ...e }) }), re = (e) => /* @__PURE__ */ t(
+), re = (e) => e.textarea ? /* @__PURE__ */ t(X, { ...e }) : /* @__PURE__ */ t(Y, { ...e }), X = (e) => /* @__PURE__ */ t("div", { "data-testid": "form-text-area", className: r.formTextArea, children: /* @__PURE__ */ t(A, { ...e }) }), Y = (e) => /* @__PURE__ */ t(
   "div",
   {
     "data-testid": "form-text-field",
-    className: `${e.hasCharacterCount ? n.characterCount : n.withoutCharacterCount}`,
-    children: /* @__PURE__ */ t(L, { ...e })
+    className: `${e.hasCharacterCount ? r.characterCount : r.withoutCharacterCount}`,
+    children: /* @__PURE__ */ t(A, { ...e })
   }
-), L = ({
+), A = ({
   propertyName: e,
-  label: s,
-  disabled: u = !1,
-  textarea: r = !1,
-  hasCharacterCount: c = !1,
-  hidden: w = !1,
-  placeholder: B,
-  type: S,
-  prefixText: j,
-  inputMode: k,
-  trailingIcon: R,
-  trigger: C = "likeForm",
+  label: u,
+  disabled: s = !1,
+  textarea: n = !1,
+  hasCharacterCount: o = !1,
+  hidden: $ = !1,
+  placeholder: F,
+  type: q,
+  prefixText: H,
+  inputMode: L,
+  trailingIcon: w,
+  trigger: x = "likeForm",
   rules: a,
   ...i
 }) => {
-  const { control: g, getFieldState: d, trigger: v } = Q(), [b, m] = q(0), [o, z] = q(), f = K(
+  const { control: f, getFieldState: d, trigger: T } = D(), [B, C] = V(0), S = W(
     (h) => {
-      if (o != null) {
-        m(o.length);
-        return;
+      if (!(!n && !o)) {
+        if (h) {
+          C(h.length);
+          return;
+        }
+        C(0);
       }
-      if (h) {
-        m(h.length);
-        return;
-      }
-      m(0);
     },
-    [o]
-  ), l = T(
-    () => i.maxlength ?? a?.maxLength?.value,
+    [o, n]
+  ), l = m(
+    () => i.maxlength ? i.maxlength : a?.maxLength?.value,
     [a, i.maxlength]
-  ), E = T(
+  ), j = m(
     () => a?.minLength?.value,
     [a]
-  ), _ = T(
+  ), g = m(
     () => a?.required?.message,
     [a]
-  ), { helperText: M, helperTextPersistent: P } = U({
+  ), { helperText: k, helperTextPersistent: R } = E({
     propertyName: e,
     helperText: i.helperText,
-    requiredText: _,
+    requiredText: g,
     maxLength: l,
-    hasCharacterCount: r || c
+    hasCharacterCount: n || o
   });
-  return O(() => {
-    (r || c) && l !== void 0 && o != null && f();
-  }, [o, r, c, l, f]), w ? /* @__PURE__ */ t(H, { name: e, control: g, render: () => /* @__PURE__ */ t(F, {}) }) : /* @__PURE__ */ t(
-    H,
+  return $ ? /* @__PURE__ */ t(_, { name: e, control: f, render: () => /* @__PURE__ */ t(v, {}) }) : /* @__PURE__ */ t(
+    _,
     {
       name: e,
       rules: a,
-      control: g,
-      render: ({ field: { ref: h, ...x }, formState: { defaultValues: V } }) => {
-        const A = J(V, e);
-        return !o && A && (c || r) && f(A), /* @__PURE__ */ D(F, { children: [
-          /* @__PURE__ */ t(
-            G,
-            {
-              ...i,
-              ...x,
-              value: x.value ?? "",
-              type: S,
-              fullWidth: !0,
-              "data-testid": `textfield-${e}`,
-              inputMode: k,
-              placeholder: B,
-              prefixText: j,
-              disabled: u,
-              helperText: M,
-              helperTextPersistent: P,
-              label: s,
-              variant: "outlined",
-              maxlength: l,
-              minLength: E,
-              textarea: r,
-              noResize: !1,
-              onBlur: () => {
-                C === "onBlur" && v(e), i.onBlur?.();
-              },
-              onChange: ($) => {
-                x.onChange($);
-                const W = $?.target?.value;
-                z(W), C === "onChange" && v(e);
-              },
-              valid: !d(e).invalid,
-              className: `${n.formText} ${d(e).invalid ? n.invalid : ""}`,
-              trailingIcon: R
-            }
-          ),
-          l !== void 0 && (c || r) && /* @__PURE__ */ t(
-            ee,
-            {
-              count: b,
-              maxCount: l,
-              invalid: d(e).invalid,
-              hasRequiredText: !!i.helperText || !!_
-            }
-          )
-        ] });
-      }
+      control: f,
+      render: ({ field: { ref: h, ...c } }) => (S(c.value), /* @__PURE__ */ z(v, { children: [
+        /* @__PURE__ */ t(
+          M,
+          {
+            ...i,
+            ...c,
+            value: c.value ?? "",
+            type: q,
+            fullWidth: !0,
+            "data-testid": `textfield-${e}`,
+            inputMode: L,
+            placeholder: F,
+            prefixText: H,
+            disabled: s,
+            helperText: k,
+            helperTextPersistent: R,
+            label: u,
+            variant: "outlined",
+            maxlength: l,
+            minLength: j,
+            textarea: n,
+            noResize: !1,
+            onBlur: () => {
+              x === "onBlur" && T(e), i.onBlur?.();
+            },
+            onChange: (b) => {
+              c.onChange(b), x === "onChange" && T(e);
+            },
+            valid: !d(e).invalid,
+            className: `${r.formText} ${d(e).invalid ? r.invalid : ""}`,
+            trailingIcon: w
+          }
+        ),
+        l !== void 0 && (o || n) && /* @__PURE__ */ t(
+          U,
+          {
+            count: B,
+            maxCount: l,
+            invalid: d(e).invalid,
+            hasRequiredText: !!i.helperText || !!g
+          }
+        )
+      ] }))
     }
   );
 };
 export {
-  ue as FormText
+  re as FormText
 };

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

@@ -1,8 +1,8 @@
 import { jsx as n } from "react/jsx-runtime";
-import { a as s, s as r, f as d } from "../../../react.esm-DNwojocF.js";
+import { a as s, s as r, f as i } from "../../../react.esm-DNwojocF.js";
 import { FormText as o } from "./FormText.js";
 import { v as a, d as u, t as l, g as e } from "../../../vi.CjhMlMwf-BCJNwXvu.js";
-const m = a.fn();
+const d = a.fn();
 a.mock("react-hook-form", () => ({
   ...a.importActual("react-hook-form"),
   Controller: ({
@@ -10,7 +10,7 @@ a.mock("react-hook-form", () => ({
   }) => t({
     field: {
       ref: void 0,
-      onChange: m,
+      onChange: d,
       value: "test"
     },
     formState: { defaultValue: {} }
@@ -62,23 +62,9 @@ u("FormText Test", () => {
     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(
-        o,
-        {
-          rules: {
-            maxLength: {
-              value: 100,
-              message: "max length is 100"
-            }
-          },
-          label: "address.line2",
-          propertyName: "addressLine2"
-        }
-      )
-    );
+    s(/* @__PURE__ */ n(o, { label: "address.line2", propertyName: "addressLine2" }));
     const t = r.getByRole("textbox");
-    e(t).toHaveValue("test"), d.change(t, { target: { value: "test-change" } }), e(m).toHaveBeenCalled();
+    e(t).toHaveValue("test"), i.change(t, { target: { value: "test-change" } }), e(d).toHaveBeenCalled();
   }), l("render FormText and return text area", () => {
     s(
       /* @__PURE__ */ n(
@@ -103,22 +89,7 @@ u("FormText Test", () => {
     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(
-        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();
+    s(/* @__PURE__ */ n(o, { maxlength: 200, label: "address.line1", propertyName: "addressLine1", textarea: !0 })), e(r.getByText("address.line1")).toBeInTheDocument(), e(r.queryByText("required")).not.toBeInTheDocument(), e(r.getByText("4/200")).toBeInTheDocument();
   }), l("change value of text area", () => {
     s(
       /* @__PURE__ */ n(
@@ -128,10 +99,6 @@ u("FormText Test", () => {
             required: {
               value: !0,
               message: "required"
-            },
-            maxLength: {
-              value: 200,
-              message: "max length is 200"
             }
           },
           label: "address.line1",
@@ -141,6 +108,6 @@ u("FormText Test", () => {
       )
     );
     const t = r.getByRole("textbox");
-    d.change(t, { target: { value: "test-change" } }), e(m).toHaveBeenCalled();
+    i.change(t, { target: { value: "test-change" } }), e(d).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.11587",
+  "version": "0.0.11747",
   "type": "module",
   "repository": "https://dev.azure.com/sdundc/HV%20Platform/_git/HortiView-Frontend-Shared",
   "author": "Falk Menge <falk.menge.ext@bayer.com>",