@hortiview/shared-components 0.0.9195 → 0.0.9233

package/dist/components/FormComponents/FormSelect/FormSelect.js

@@ -1,4 +1,4 @@
-import { jsx as e, Fragment as $, jsxs as b } from "react/jsx-runtime";
+import { jsx as r, Fragment as M, jsxs as b } from "react/jsx-runtime";
 import { Select as k } from "@element/react-components";
 import { g as h } from "../../../get-DAwLfiRB.js";
 import { i as z } from "../../../isArray-thIeLpc5.js";
@@ -8,104 +8,113 @@ import { H as G } from "../../../react-tooltip.min-BzHiZW8k.js";
 import { SelectTooltipText as J } from "./SelectTooltipText.js";
 import { s as n } from "../../../formSelect.module-DMHh1bp8.js";
 const N = ({
-  propertyName: r,
-  label: d,
+  propertyName: e,
+  label: f,
   options: o,
-  multi: m = !1,
+  multi: d = !1,
   disabled: T = !1,
   hoisted: F = !1,
   hidden: I = !1,
   valueKey: i = "value",
-  textKey: p = "text",
+  textKey: H = "text",
   clearable: j = !1,
   searchable: v = !0,
   noOptionsMessage: w = "",
-  rules: l,
-  ...s
+  rules: s,
+  ...l
 }) => {
   const {
-    control: H,
-    formState: { errors: a, isValidating: q }
+    control: $,
+    formState: { errors: a, isValidating: p }
   } = B(), c = S(
-    () => !q && h(a, r) !== void 0,
-    [a, r, q]
+    () => !p && h(a, e) !== void 0,
+    [a, e, p]
   ), A = S(
-    () => l?.required?.value,
-    [l]
+    () => s?.required?.value,
+    [s]
   ), D = S(
-    () => l?.required?.message,
-    [l]
+    () => s?.required?.message,
+    [s]
   ), E = () => {
-    if (a && a[r]) {
-      const u = a[r]?.message;
+    if (a && a[e]) {
+      const u = a[e]?.message;
       return u || "Invalid input";
     }
     return D;
   };
-  return I ? /* @__PURE__ */ e(C, { name: r, control: H, render: () => /* @__PURE__ */ e($, {}) }) : /* @__PURE__ */ e("div", { className: n.formSelectContainer, "data-tooltip-id": d, children: /* @__PURE__ */ e(
-    C,
+  return I ? /* @__PURE__ */ r(C, { name: e, control: $, render: () => /* @__PURE__ */ r(M, {}) }) : /* @__PURE__ */ r(
+    "div",
     {
-      name: r,
-      rules: l,
-      control: H,
-      render: ({ field: { ref: u, onChange: x, value: M, ...O } }) => {
-        let g = o;
-        z(o) && h(o[0], "options") !== void 0 && (g = o.flatMap((t) => h(t, "options") ?? []));
-        const f = m ? g?.filter(
-          (t) => M?.includes(t[i])
-        ) : g?.find((t) => t[i] === M), P = m && s.multiDisplayType === "text" && s.fixedHeightInput;
-        return /* @__PURE__ */ b($, { children: [
-          /* @__PURE__ */ e(
-            k,
-            {
-              ...O,
-              ...s,
-              value: f ?? [],
-              label: d,
-              variant: "outlined",
-              helperText: E(),
-              helperTextPersistent: A || c,
-              options: o,
-              valid: !c,
-              multiSelect: m,
-              className: `${n.formSelect} ${c ? n.invalid : ""} ${P ? n.multiText : ""} ${T ? n.disabled : ""}`,
-              disabled: T,
-              valueKey: i,
-              textKey: p,
-              onChange: (t) => {
-                if (t == null) {
-                  x(t);
-                  return;
+      "data-testid": "form-select-container",
+      className: n.formSelectContainer,
+      "data-tooltip-id": f,
+      children: /* @__PURE__ */ r(
+        C,
+        {
+          name: e,
+          rules: s,
+          control: $,
+          render: ({ field: { ref: u, onChange: x, value: q, ...O } }) => {
+            let g = o;
+            z(o) && h(o[0], "options") !== void 0 && (g = o.flatMap((t) => h(t, "options") ?? []));
+            const m = d ? g?.filter(
+              (t) => q?.includes(t[i])
+            ) : g?.find((t) => t[i] === q), P = d && l.multiDisplayType === "text" && l.fixedHeightInput;
+            return /* @__PURE__ */ b(M, { children: [
+              /* @__PURE__ */ r(
+                k,
+                {
+                  ...O,
+                  ...l,
+                  value: m ?? [],
+                  label: f,
+                  variant: "outlined",
+                  helperText: E(),
+                  helperTextPersistent: A || c,
+                  options: o,
+                  valid: !c,
+                  "data-testid": `select-${e}`,
+                  multiSelect: d,
+                  className: `${n.formSelect} ${c ? n.invalid : ""} ${P ? n.multiText : ""} ${T ? n.disabled : ""}`,
+                  disabled: T,
+                  valueKey: i,
+                  textKey: H,
+                  onChange: (t) => {
+                    if (t == null) {
+                      x(t);
+                      return;
+                    }
+                    if (d) {
+                      x(t.map((V) => V[i]));
+                      return;
+                    }
+                    x(t[i]), l?.onChange?.(t);
+                  },
+                  hoisted: F,
+                  noOptionsMessage: w,
+                  searchable: v,
+                  clearable: j,
+                  menuMaxHeight: "15rem"
                 }
-                if (m) {
-                  x(t.map((V) => V[i]));
-                  return;
+              ),
+              /* @__PURE__ */ r(
+                G,
+                {
+                  id: f,
+                  noArrow: !0,
+                  place: "bottom",
+                  delayShow: 420,
+                  className: n.tooltip,
+                  hidden: !m || m.length === 0 || !l.fixedHeightInput,
+                  children: /* @__PURE__ */ r(J, { value: m, textKey: H, valueKey: i })
                 }
-                x(t[i]), s?.onChange?.(t);
-              },
-              hoisted: F,
-              noOptionsMessage: w,
-              searchable: v,
-              clearable: j,
-              menuMaxHeight: "15rem"
-            }
-          ),
-          /* @__PURE__ */ e(
-            G,
-            {
-              id: d,
-              noArrow: !0,
-              place: "bottom",
-              delayShow: 420,
-              className: n.tooltip,
-              hidden: !f || f.length === 0 || !s.fixedHeightInput,
-              children: /* @__PURE__ */ e(J, { value: f, textKey: p, valueKey: i })
-            }
-          )
-        ] });
-      }
+              )
+            ] });
+          }
+        }
+      )
     }
-  ) });
+  );
 };
 export {
   N as FormSelect

package/dist/components/FormComponents/FormSlider/FormSlider.js

@@ -1,29 +1,30 @@
 import { jsx as o } from "react/jsx-runtime";
-import { Slider as s } from "@element/react-components";
-import { useFormContext as u, Controller as x } from "react-hook-form";
+import { Slider as d } from "@element/react-components";
+import { useFormContext as p, Controller as u } from "react-hook-form";
 const f = ({
-  propertyName: n,
-  label: e,
-  minValue: t,
+  propertyName: e,
+  label: t,
+  minValue: n,
   maxValue: m,
   step: a,
   disabled: i
 }) => {
-  const { control: l } = u();
+  const { control: l } = p();
   return /* @__PURE__ */ o(
-    x,
+    u,
     {
-      name: n,
+      name: e,
       control: l,
       render: ({ field: r }) => /* @__PURE__ */ o(
-        s,
+        d,
         {
+          "data-testid": "slider",
           ...r,
-          onChange: (p) => {
-            r.onChange(p.value);
+          onChange: (s) => {
+            r.onChange(s.value);
           },
-          label: e,
-          min: t,
+          label: t,
+          min: n,
           max: m,
           step: a,
           disabled: i

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

@@ -6,53 +6,55 @@ import { useFormContext as X, Controller as j } from "react-hook-form";
 import { s as i } from "../../../formText.module-C0by6_DK.js";
 const Y = ({
   count: e,
-  maxCount: d,
-  invalid: m = !1,
+  maxCount: u,
+  invalid: f = !1,
   hasRequiredText: r = !1
 }) => /* @__PURE__ */ t(
   "div",
   {
-    className: `${i.formTextAreaHelperText} ${m ? i.invalid : ""} ${r ? i.required : ""}`,
-    children: /* @__PURE__ */ t(O, { children: `${e}/${d}` })
+    "data-testid": "character-counter-container",
+    className: `${i.formTextAreaHelperText} ${f ? i.invalid : ""} ${r ? i.required : ""}`,
+    children: /* @__PURE__ */ t(O, { children: `${e}/${u}` })
   }
-), re = (e) => e.textarea ? /* @__PURE__ */ t(Z, { ...e }) : /* @__PURE__ */ t(_, { ...e }), Z = (e) => /* @__PURE__ */ t("div", { className: i.formTextArea, children: /* @__PURE__ */ t(k, { ...e }) }), _ = (e) => /* @__PURE__ */ t(
+), re = (e) => e.textarea ? /* @__PURE__ */ t(Z, { ...e }) : /* @__PURE__ */ t(_, { ...e }), Z = (e) => /* @__PURE__ */ t("div", { "data-testid": "form-text-area", className: i.formTextArea, children: /* @__PURE__ */ t(k, { ...e }) }), _ = (e) => /* @__PURE__ */ t(
   "div",
   {
+    "data-testid": "form-text-field",
     className: `${e.hasCharacterCount ? i.characterCount : i.withoutCharacterCount}`,
     children: /* @__PURE__ */ t(k, { ...e })
   }
 ), k = ({
   propertyName: e,
-  label: d,
-  disabled: m = !1,
+  label: u,
+  disabled: f = !1,
   textarea: r = !1,
-  hasCharacterCount: u = !1,
+  hasCharacterCount: d = !1,
   hidden: H = !1,
   placeholder: R,
   type: b,
   prefixText: w,
   inputMode: z,
   trailingIcon: E,
-  trigger: v = "likeForm",
+  trigger: h = "likeForm",
   rules: n,
-  ...x
+  ...v
 }) => {
   const {
     control: T,
-    getFieldState: f,
+    getFieldState: m,
     formState: { errors: C },
-    trigger: F
-  } = X(), [I, g] = A(0), [o, M] = A(), h = Q(
+    trigger: $
+  } = X(), [I, x] = A(0), [o, M] = A(), g = Q(
     (l) => {
       if (o != null) {
-        g(o.length);
+        x(o.length);
         return;
       }
       if (l) {
-        g(l.length);
+        x(l.length);
         return;
       }
-      g(0);
+      x(0);
     },
     [o]
   ), P = () => {
@@ -61,7 +63,7 @@ const Y = ({
       const s = l.message;
       return s || "Invalid input";
     }
-    return $;
+    return F;
   }, a = c(
     () => n?.maxLength?.value,
     [n]
@@ -71,13 +73,13 @@ const Y = ({
   ), W = c(
     () => n?.required?.value,
     [n]
-  ), $ = c(
+  ), F = c(
     () => n?.required?.message,
     [n]
   );
   return U(() => {
-    (r || u) && a !== void 0 && o != null && h();
-  }, [o, r, u, a, h]), H ? /* @__PURE__ */ t(j, { name: e, control: T, render: () => /* @__PURE__ */ t(S, {}) }) : /* @__PURE__ */ t(
+    (r || d) && a !== void 0 && o != null && g();
+  }, [o, r, d, a, g]), H ? /* @__PURE__ */ t(j, { name: e, control: T, render: () => /* @__PURE__ */ t(S, {}) }) : /* @__PURE__ */ t(
     j,
     {
       name: e,
@@ -85,47 +87,48 @@ const Y = ({
       control: T,
       render: ({ field: { ref: l, ...s }, formState: { defaultValues: D } }) => {
         const q = B(D, e);
-        return !o && q && (u || r) && h(q), /* @__PURE__ */ J(S, { children: [
+        return !o && q && (d || r) && g(q), /* @__PURE__ */ J(S, { children: [
           /* @__PURE__ */ t(
             K,
             {
-              ...x,
+              ...v,
               ...s,
               value: s.value ?? "",
               type: b,
               fullWidth: !0,
+              "data-testid": `textfield-${e}`,
               inputMode: z,
               placeholder: R,
               prefixText: w,
-              disabled: m,
+              disabled: f,
               helperText: P(),
-              helperTextPersistent: C !== void 0 || W || a !== void 0 && (r || u),
-              label: d,
+              helperTextPersistent: C !== void 0 || W || a !== void 0 && (r || d),
+              label: u,
               variant: "outlined",
               maxlength: a,
               minLength: V,
               textarea: r,
               noResize: !1,
               onBlur: () => {
-                v === "onBlur" && F(e), x.onBlur?.();
+                h === "onBlur" && $(e), v.onBlur?.();
               },
               onChange: (L) => {
                 s.onChange(L);
                 const G = L?.target?.value;
-                M(G), v === "onChange" && F(e);
+                M(G), h === "onChange" && $(e);
               },
-              valid: !f(e).invalid,
-              className: `${i.formText} ${f(e).invalid ? i.invalid : ""}`,
+              valid: !m(e).invalid,
+              className: `${i.formText} ${m(e).invalid ? i.invalid : ""}`,
               trailingIcon: E
             }
           ),
-          a !== void 0 && (u || r) && /* @__PURE__ */ t(
+          a !== void 0 && (d || r) && /* @__PURE__ */ t(
             Y,
             {
               count: I,
               maxCount: a,
-              invalid: f(e).invalid,
-              hasRequiredText: !!$
+              invalid: m(e).invalid,
+              hasRequiredText: !!F
             }
           )
         ] });

package/dist/components/HashTabView/HashTabView.js

@@ -1,73 +1,84 @@
-import { jsx as i, jsxs as m, Fragment as y } from "react/jsx-runtime";
-import { Elevation as I, Group as o, TabBar as N, Tab as $, Padding as b } from "@element/react-components";
+import { jsx as i, jsxs as m, Fragment as B } from "react/jsx-runtime";
+import { Elevation as $, Group as o, TabBar as y, Tab as I, Padding as N } from "@element/react-components";
 import { useState as k, useEffect as w } from "react";
 import { u as x } from "../../useBreakpoints-MzTZ0tCT.js";
-import { s as r } from "../../HashTabView.module-DUekkiTC.js";
-const u = (n, t) => !t || !n ? 0 : n.findIndex((a) => a.hash === t.replace("#", "")) ?? 0, z = ({
-  tabs: n,
-  hasHash: t = !0,
-  hash: a = "",
+import { s as a } from "../../HashTabView.module-DUekkiTC.js";
+const u = (t, n) => !n || !t ? 0 : t.findIndex((r) => r.hash === n.replace("#", "")) ?? 0, z = ({
+  tabs: t,
+  hasHash: n = !0,
+  hash: r = "",
   clusterAlign: f = "start",
-  hasClusteredTabs: g,
+  hasClusteredTabs: h,
   children: s,
-  verticalGap: v = "none",
-  elevation: h = 0,
+  verticalGap: g = "none",
+  elevation: v = 0,
   backgroundColor: T = "themeBackground",
-  onChange: A
+  onChange: b
 }) => {
-  const [l, p] = k(u(n, a)), { isDesktop: d } = x();
+  const [l, p] = k(u(t, r)), { isDesktop: d } = x();
   w(() => {
-    if (!t || !a)
+    if (!n || !r)
       return;
-    const e = u(n, a);
+    const e = u(t, r);
     p(e);
-  }, [n, a, t]);
-  const B = (e) => {
-    const c = n[e].hash;
-    c != null && t && window.history.replaceState(null, "", `#${c}`), p(e), A?.(e);
+  }, [t, r, n]);
+  const A = (e) => {
+    const c = t[e].hash;
+    c != null && n && window.history.replaceState(null, "", `#${c}`), p(e), b?.(e);
   };
   return /* @__PURE__ */ i(
-    I,
+    $,
     {
-      elevation: h,
-      className: `${r.elevation} ${T === "none" ? "" : r.themeBackground}`,
-      children: /* @__PURE__ */ m(o, { direction: "vertical", gap: v, secondaryAlign: "stretch", children: [
-        /* @__PURE__ */ m(o, { direction: d ? "horizontal" : "vertical", className: r.tabWrapper, children: [
-          /* @__PURE__ */ i(
-            N,
-            {
-              className: r.tabBar,
-              clustered: d ? g : !1,
-              clusterAlign: f,
-              variant: "surface",
-              activeTabIndex: l,
-              onTabActivated: B,
-              children: n.map((e, c) => /* @__PURE__ */ i(
-                $,
+      elevation: v,
+      className: `${a.elevation} ${T === "none" ? "" : a.themeBackground}`,
+      children: /* @__PURE__ */ m(
+        o,
+        {
+          "data-testid": "hash-tab-container",
+          direction: "vertical",
+          gap: g,
+          secondaryAlign: "stretch",
+          children: [
+            /* @__PURE__ */ m(o, { direction: d ? "horizontal" : "vertical", className: a.tabWrapper, children: [
+              /* @__PURE__ */ i(
+                y,
                 {
-                  icon: e.leadingIcon,
-                  className: s ? r.tabButton : "",
-                  active: l === c,
-                  children: /* @__PURE__ */ m(o, { gap: "dense", children: [
-                    e.title,
-                    e.trailingIcon
-                  ] })
-                },
-                `${c}_${e.hash}`
-              ))
-            }
-          ),
-          s ? /* @__PURE__ */ i(
-            b,
-            {
-              variant: "dense",
-              className: d ? r.childContainer : r.childContainerPhone,
-              children: /* @__PURE__ */ i(o, { gap: "dense", primaryAlign: "center", secondaryAlign: "center", children: s })
-            }
-          ) : /* @__PURE__ */ i(y, {})
-        ] }),
-        n[l]?.component
-      ] })
+                  "data-testid": "tab-bar",
+                  className: a.tabBar,
+                  clustered: d ? h : !1,
+                  clusterAlign: f,
+                  variant: "surface",
+                  activeTabIndex: l,
+                  onTabActivated: A,
+                  children: t.map((e, c) => /* @__PURE__ */ i(
+                    I,
+                    {
+                      "data-testid": `tab-${e.title}`,
+                      icon: e.leadingIcon,
+                      className: s ? a.tabButton : "",
+                      active: l === c,
+                      children: /* @__PURE__ */ m(o, { gap: "dense", children: [
+                        e.title,
+                        e.trailingIcon
+                      ] })
+                    },
+                    `${c}_${e.hash}`
+                  ))
+                }
+              ),
+              s ? /* @__PURE__ */ i(
+                N,
+                {
+                  variant: "dense",
+                  className: d ? a.childContainer : a.childContainerPhone,
+                  children: /* @__PURE__ */ i(o, { gap: "dense", primaryAlign: "center", secondaryAlign: "center", children: s })
+                }
+              ) : /* @__PURE__ */ i(B, {})
+            ] }),
+            t[l]?.component
+          ]
+        }
+      )
     }
   );
 };