@hortiview/shared-components 2.25.0 → 2.26.1

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

@@ -1,128 +1,133 @@
-import { jsx as l, Fragment as g, jsxs as J } from "react/jsx-runtime";
-import { g as u } from "../../../get-CBFiuc3f.js";
-import { i as L } from "../../../isArray-olhCpv2e.js";
-import { useMemo as z } from "react";
-import { useFormContext as O, Controller as C } from "react-hook-form";
-import { M as Q } from "../../../react-tooltip.min-Dkz5ltCC.js";
-import { useHelperText as R } from "../../../hooks/useHelperText.js";
-import { Select as U } from "../../Select/Select.js";
-import { SelectTooltipText as W } from "./SelectTooltipText.js";
-import { useBreakpoints as X } from "../../../hooks/useBreakpoints.js";
-import '../../../assets/FormSelect.css';const Y = "_invalidHelperText_zh2wu_1", Z = "_invalidBorder_zh2wu_5", N = "_invalidPlaceholder_zh2wu_9", y = "_invalidDropdownIcon_zh2wu_13", K = "_formSelectContainer_zh2wu_18", ee = "_formSelect_zh2wu_18", te = "_multiText_zh2wu_53", ie = "_tooltip_zh2wu_62", oe = "_disabled_zh2wu_67", t = {
-  invalidHelperText: Y,
-  invalidBorder: Z,
-  invalidPlaceholder: N,
-  invalidDropdownIcon: y,
-  formSelectContainer: K,
-  formSelect: ee,
-  multiText: te,
-  tooltip: ie,
-  disabled: oe
-}, _e = ({
-  propertyName: i,
-  label: c,
-  options: r,
-  multi: a = !1,
-  disabled: _ = !1,
-  hoisted: $ = !1,
-  hidden: H = !1,
-  valueKey: n = "value",
-  textKey: x = "text",
-  clearable: I = !1,
-  searchable: D,
-  noOptionsMessage: S = "",
+import { jsx as i, Fragment as D, jsxs as Q } from "react/jsx-runtime";
+import { c as R } from "../../../index-_-9ybP20.js";
+import { g as M } from "../../../get-CBFiuc3f.js";
+import { useMemo as B } from "react";
+import { useFormContext as U, Controller as H } from "react-hook-form";
+import { M as X } from "../../../react-tooltip.min-Dkz5ltCC.js";
+import { useBreakpoints as Y } from "../../../hooks/useBreakpoints.js";
+import { useHelperText as Z } from "../../../hooks/useHelperText.js";
+import { Select as N } from "../../Select/Select.js";
+import { useNormalizedOptions as y, isGroupedOptions as K } from "./FormSelectService.js";
+import { SelectTooltipText as ee } from "./SelectTooltipText.js";
+import '../../../assets/FormSelect.css';const te = "_invalidHelperText_qt5tp_1", oe = "_invalidBorder_qt5tp_5", ie = "_invalidPlaceholder_qt5tp_9", le = "_invalidDropdownIcon_qt5tp_13", ne = "_formSelectContainer_qt5tp_18", re = "_formSelect_qt5tp_18", ae = "_isSearchable_qt5tp_44", se = "_isMultiSelect_qt5tp_49", ce = "_hasSelection_qt5tp_49", de = "_tooltip_qt5tp_64", fe = "_disabled_qt5tp_69", t = {
+  invalidHelperText: te,
+  invalidBorder: oe,
+  invalidPlaceholder: ie,
+  invalidDropdownIcon: le,
+  formSelectContainer: ne,
+  formSelect: re,
+  isSearchable: ae,
+  isMultiSelect: se,
+  hasSelection: ce,
+  tooltip: de,
+  disabled: fe
+}, ge = ({
+  propertyName: o,
+  label: d,
+  options: f,
+  multi: r = !1,
+  disabled: S = !1,
+  hoisted: I = !1,
+  hidden: P = !1,
+  valueKey: l = "value",
+  textKey: h = "text",
+  clearable: F = !1,
+  searchable: O,
+  noOptionsMessage: x = "",
   rules: m,
-  menuPosition: b = "auto",
-  ...o
+  menuPosition: k = "auto",
+  ...a
 }) => {
-  const { isDesktop: B } = X(), {
-    control: T,
-    getFieldState: P,
-    formState: { errors: v, isValidating: w }
-  } = O(), F = z(
-    () => !w && u(v, i) !== void 0,
-    [v, i, w]
-  ), M = z(
+  const { isDesktop: A } = Y(), {
+    control: u,
+    getFieldState: j,
+    formState: { errors: v, isValidating: T }
+  } = U(), z = B(
+    () => !T && M(v, o) !== void 0,
+    [v, o, T]
+  ), V = B(
     () => m?.required?.message,
     [m]
-  ), { helperText: j, helperTextPersistent: k } = R({
-    propertyName: i,
-    helperText: o.helperText,
-    requiredText: M,
+  ), { helperText: E, helperTextPersistent: G } = Z({
+    propertyName: o,
+    helperText: a.helperText,
+    requiredText: V,
     hasCharacterCount: !1
-  });
-  return H ? /* @__PURE__ */ l(C, { name: i, control: T, render: () => /* @__PURE__ */ l(g, {}) }) : /* @__PURE__ */ l(
+  }), q = r && a.multiDisplayType === "text" && h === "value", W = y(f), s = q ? W : f, b = q ? "text" : h;
+  return P ? /* @__PURE__ */ i(H, { name: o, control: u, render: () => /* @__PURE__ */ i(D, {}) }) : /* @__PURE__ */ i(
     "div",
     {
       "data-testid": "form-select-container",
       className: t.formSelectContainer,
-      "data-tooltip-id": c,
-      children: /* @__PURE__ */ l(
-        C,
+      "data-tooltip-id": d,
+      children: /* @__PURE__ */ i(
+        H,
         {
-          name: i,
+          name: o,
           rules: m,
-          control: T,
-          render: ({ field: { ref: le, onChange: f, value: p, ...q } }) => {
-            let h = r;
-            L(r) && u(r[0], "options") !== void 0 && (h = r.flatMap((e) => u(e, "options") ?? []));
-            const d = a ? h?.filter(
-              (e) => p?.includes(e[n])
-            ) : h?.find((e) => e[n] === p), A = a && o.multiDisplayType === "text" && o.fixedHeightInput, s = P(i).invalid, E = D ?? B, V = `
-          ${t.formSelect} 
-          ${s ? t.invalidHelperText : ""} 
-          ${s ? t.invalidDropdownIcon : ""}  
-          ${s ? t.invalidBorder : ""} 
-          ${s ? t.invalidPlaceholder : ""}  
-          ${A ? t.multiText : ""} 
-          ${_ ? t.disabled : ""}`;
-            return /* @__PURE__ */ J(g, { children: [
-              /* @__PURE__ */ l(
-                U,
+          control: u,
+          render: ({ field: { ref: me, onChange: p, value: C, ...$ } }) => {
+            let _ = s;
+            s && K(s) && (_ = s.flatMap((e) => M(e, "options") ?? []));
+            const n = r ? _?.filter(
+              (e) => C?.includes(e[l])
+            ) : _?.find((e) => e[l] === C), g = Array.isArray(n) ? n.length > 0 : n != null, c = j(o).invalid, w = O ?? A, J = R(t.formSelect, {
+              [t.invalidHelperText]: c,
+              [t.invalidDropdownIcon]: c,
+              [t.invalidBorder]: c,
+              [t.invalidPlaceholder]: c,
+              [t.disabled]: S,
+              [t.isSearchable]: w,
+              [t.isMultiSelect]: r,
+              [t.hasSelection]: g
+            });
+            return /* @__PURE__ */ Q(D, { children: [
+              /* @__PURE__ */ i(
+                N,
                 {
-                  ...q,
-                  ...o,
-                  value: d ?? [],
-                  label: c,
+                  ...$,
+                  ...a,
+                  value: n ?? [],
+                  label: d,
                   variant: "outlined",
-                  helperText: j,
-                  helperTextPersistent: k,
-                  options: r,
-                  valid: !F,
-                  "data-testid": o["data-testid"] ?? `select-${i}`,
-                  multiSelect: !r?.length && S ? !1 : a,
-                  className: V,
-                  disabled: _,
-                  valueKey: n,
-                  textKey: x,
+                  helperText: E,
+                  helperTextPersistent: G,
+                  options: s,
+                  valid: !z,
+                  "data-testid": a["data-testid"] ?? `select-${o}`,
+                  multiSelect: !f?.length && x ? !1 : r,
+                  className: J,
+                  disabled: S,
+                  valueKey: l,
+                  textKey: b,
                   onChange: (e) => {
                     if (e == null) {
-                      f(e);
+                      p(e);
                       return;
                     }
-                    if (a) {
-                      f(e.map((G) => G[n]));
+                    if (r) {
+                      p(e.map((L) => L[l]));
                       return;
                     }
-                    f(e[n]), o?.onChange?.(e);
+                    p(e[l]), a?.onChange?.(e);
                   },
-                  hoisted: $,
-                  noOptionsMessage: S,
-                  searchable: E,
-                  clearable: I,
-                  menuPosition: b
+                  hoisted: I,
+                  noOptionsMessage: x,
+                  searchable: w,
+                  clearable: F,
+                  menuPosition: k
                 }
               ),
-              /* @__PURE__ */ l(
-                Q,
+              /* @__PURE__ */ i(
+                X,
                 {
-                  id: c,
+                  id: d,
                   noArrow: !0,
                   place: "bottom",
                   delayShow: 420,
                   className: t.tooltip,
-                  hidden: !d || d.length === 0 || !o.fixedHeightInput,
-                  children: /* @__PURE__ */ l(W, { value: d, textKey: x, valueKey: n })
+                  hidden: !g,
+                  children: /* @__PURE__ */ i(ee, { value: n, textKey: b, valueKey: l })
                 }
               )
             ] });
@@ -133,5 +138,5 @@ import '../../../assets/FormSelect.css';const Y = "_invalidHelperText_zh2wu_1",
   );
 };
 export {
-  _e as FormSelect
+  ge as FormSelect
 };

package/dist/components/FormComponents/FormSelect/FormSelectService.d.ts

@@ -0,0 +1,34 @@
+import { FieldValues } from 'react-hook-form';
+import { FormSelectProps } from './FormSelect';
+
+/**
+ * If grouped, the options have a prop named options which is an array of objects:
+ *
+ * @example [{
+      "groupName": "Group a",
+      "groupId": "101",
+      "options": [
+          {
+              "id": "1",
+              "value": "Group a Option 1"
+          },
+          {
+              "id": "2",
+              "value": "Group a Option 2"
+          }
+      ]
+    }, ... ]
+ */
+export declare const isGroupedOptions: <T extends FieldValues>(options: FormSelectProps<T>["options"]) => boolean;
+/**
+ * Workaround for element bug:
+ * When multi select is enabled, multiDisplayType is "text" and textKey is "value", selected labels render the valueKey.
+ * Internally map "value" -> "text" and use textKey "text" for rendering to fix this issue.
+ */
+export declare const useNormalizedOptions: <T extends FieldValues>(options: FormSelectProps<T>["options"]) => {
+    text: string;
+}[] | {
+    options: {
+        text: string;
+    }[];
+}[] | undefined;

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

@@ -0,0 +1,20 @@
+import { g as m } from "../../../get-CBFiuc3f.js";
+import { i } from "../../../isArray-olhCpv2e.js";
+import { useMemo as o } from "react";
+const s = (r) => i(r) && m(r[0], "options") !== void 0, f = (r) => o(() => {
+  if (!r) return r;
+  const t = (e) => ({
+    ...e,
+    text: e.value
+  });
+  return s(r) ? r.map((e) => ({
+    ...e,
+    options: (m(e, "options") ?? []).map(
+      (a) => t(a)
+    )
+  })) : r.map((e) => t(e));
+}, [r]);
+export {
+  s as isGroupedOptions,
+  f as useNormalizedOptions
+};

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

@@ -1,6 +1,6 @@
 import { jsx as i } from "react/jsx-runtime";
-import { G as p } from "../../../index.es-Z0aF-7Cn.js";
-import { T as d } from "../../../index.es-DUrjyxNI.js";
+import { G as p } from "../../../index.es-BE1XL1dD.js";
+import { T as d } from "../../../index.es-EXzC8zuP.js";
 const m = ({ value: r, textKey: t, valueKey: e }) => {
   if (!(!r || r.length === 0))
     return Array.isArray(r) ? /* @__PURE__ */ i(p, { "data-testid": "select-tooltip", direction: "vertical", gap: "dense", children: r?.map((o) => /* @__PURE__ */ i(d, { level: 2, children: o[t] }, o[e])) }) : r?.[t];

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

@@ -1,11 +1,11 @@
 import { jsx as ye } from "react/jsx-runtime";
-import { _ as Ze, a as W, c as X, b as Ae, d as Je, P as d } from "../../../index-Df2FYN-K.js";
-import { _ as Qe, a as Ce, b as Ye, c as et, d as Oe, e as _e, f as tt } from "../../../defineProperty-B7N9EBBI.js";
-import { _ as Re } from "../../../parse-int-CGpIXMGa.js";
+import { _ as Ze, a as W, c as X, b as Ae, d as Je, P as d } from "../../../index-_-9ybP20.js";
+import { _ as Qe, a as Ce, b as Ye, c as et, d as Oe, e as _e, f as tt } from "../../../defineProperty-SoB5opr-.js";
+import { _ as Re } from "../../../parse-int-BYd7r_4n.js";
 import p, { forwardRef as rt, useRef as De, useImperativeHandle as Ne, useCallback as x, useEffect as V, useMemo as ke } from "react";
-import { I as Be } from "../../../index.es-DEBGoIKX.js";
-import { T as Pe } from "../../../index.es-B9BUXRQn.js";
-import { c as Me } from "../../../index.es-C6I3L4U4.js";
+import { I as Be } from "../../../index.es-LckFzDz-.js";
+import { T as Pe } from "../../../index.es-DsOSfaF5.js";
+import { c as Me } from "../../../index.es-DRC-9PLs.js";
 import { b as Fe, c as j } from "../../../tslib.es6-BDCynO9F.js";
 import { M as nt, a as it } from "../../../component-By6nyiBU.js";
 import { M as Le, a as at, m as st, b as ut } from "../../../component-DYpB_4EP.js";

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

@@ -1,6 +1,6 @@
 import { jsx as t, Fragment as _, jsxs as z } from "react/jsx-runtime";
-import { T as M } from "../../../index.es-B9BUXRQn.js";
-import { a as P } from "../../../index.es-DUrjyxNI.js";
+import { T as M } from "../../../index.es-DsOSfaF5.js";
+import { a as P } from "../../../index.es-EXzC8zuP.js";
 import { useState as V, useCallback as W, useMemo as d } from "react";
 import { useFormContext as D, Controller as v } from "react-hook-form";
 import { useHelperText as E } from "../../../hooks/useHelperText.js";

package/dist/components/FormComponents/FormToggle/FormToggle.js

@@ -1,7 +1,7 @@
 import { jsx as t, jsxs as p } from "react/jsx-runtime";
-import { G as d } from "../../../index.es-Z0aF-7Cn.js";
-import { S as f } from "../../../index.es-Ci3O23C_.js";
-import { a as h } from "../../../index.es-DUrjyxNI.js";
+import { G as d } from "../../../index.es-BE1XL1dD.js";
+import { S as f } from "../../../index.es-BVW2k-5y.js";
+import { a as h } from "../../../index.es-EXzC8zuP.js";
 import { u as C } from "../../../uniqueId-CJo-XRQb.js";
 import { useEffect as x } from "react";
 import { useFormContext as T, Controller as y } from "react-hook-form";