@hortiview/shared-components 2.8.8 → 2.9.0

package/dist/components/EmptyView/EmptyView.test.js

@@ -1,54 +1,50 @@
 import { jsx as n } from "react/jsx-runtime";
-import { a as s, s as o, w as r, f as l } from "../../react.esm-CX1WJ2Pp.js";
-import { EmptyView as c } from "./EmptyView.js";
-import { d as h, t as T, g as e, a } from "../../vi.CjhMlMwf-CKxPQtd6.js";
-h("EmptyView", () => {
-  T("should render", () => {
-    s(/* @__PURE__ */ n(c, {})), e(o.getByText("dashbord")).toBeInTheDocument();
-  }), T("should render with custom icon", () => {
-    s(/* @__PURE__ */ n(c, { icon: "add" })), e(o.getByText("add")).toBeInTheDocument();
-  }), T("should render with title", () => {
-    s(/* @__PURE__ */ n(c, { icon: "add", title: "TITLE" }));
-    const t = o.getByText("TITLE");
-    e(t).toBeInTheDocument(), e(t).toHaveClass(/headline2/);
-  }), T("should render with subtitle", () => {
-    s(/* @__PURE__ */ n(c, { icon: "add", subtitle: "SUB_TITLE" }));
-    const t = o.getByText("SUB_TITLE");
-    e(t).toBeInTheDocument(), e(t).toHaveClass(/headline6/);
-  }), T("should render with an action", async () => {
-    const t = a.fn();
-    s(/* @__PURE__ */ n(c, { icon: "add", action: /* @__PURE__ */ n("button", { onClick: t, children: "BUTTON" }) }));
-    const i = o.getByText("BUTTON");
-    e(i).toBeInTheDocument(), await r(() => l.click(i)), e(t).toHaveBeenCalledTimes(1);
-  }), T("should render with a text and a button", async () => {
-    const t = a.fn();
-    s(
+import { a as i, s as o, w as r, f as l } from "../../react.esm-CX1WJ2Pp.js";
+import { EmptyView as T } from "./EmptyView.js";
+import { d as m, t as s, g as t, a } from "../../vi.CjhMlMwf-CKxPQtd6.js";
+m("EmptyView", () => {
+  s("should render", () => {
+    i(/* @__PURE__ */ n(T, {})), t(o.getByTestId("empty-view-container")).toBeInTheDocument();
+  }), s("should render with custom icon", () => {
+    i(/* @__PURE__ */ n(T, { icon: "add" })), t(o.getByText("add")).toBeInTheDocument();
+  }), s("should render with title", () => {
+    i(/* @__PURE__ */ n(T, { icon: "add", title: "TITLE" }));
+    const e = o.getByText("TITLE");
+    t(e).toBeInTheDocument();
+  }), s("should render with an action", async () => {
+    const e = a.fn();
+    i(/* @__PURE__ */ n(T, { icon: "add", action: /* @__PURE__ */ n("button", { onClick: e, children: "BUTTON" }) }));
+    const c = o.getByText("BUTTON");
+    t(c).toBeInTheDocument(), await r(() => l.click(c)), t(e).toHaveBeenCalledTimes(1);
+  }), s("should render with a title and a button", async () => {
+    const e = a.fn();
+    i(
       /* @__PURE__ */ n(
-        c,
+        T,
         {
           icon: "add",
-          action: /* @__PURE__ */ n("button", { onClick: t, children: "BUTTON" }),
-          text: "MY_TEXT"
+          action: /* @__PURE__ */ n("button", { onClick: e, children: "BUTTON" }),
+          title: "MY_TEXT"
         }
       )
     );
-    const i = o.getByText("BUTTON");
-    e(i).toBeInTheDocument();
+    const c = o.getByText("BUTTON");
+    t(c).toBeInTheDocument();
     const d = o.getByText("MY_TEXT");
-    e(d).toBeInTheDocument();
-  }), T("should render with text only", async () => {
-    s(
+    t(d).toBeInTheDocument();
+  }), s("should render with title only", async () => {
+    i(
       /* @__PURE__ */ n(
-        c,
+        T,
         {
           icon: "add",
-          text: "MY_TEXT"
+          title: "MY_TEXT"
         }
       )
     );
-    const t = o.queryByText("BUTTON");
-    e(t).not.toBeInTheDocument();
-    const i = o.getByText("MY_TEXT");
-    e(i).toBeInTheDocument();
+    const e = o.queryByText("BUTTON");
+    t(e).not.toBeInTheDocument();
+    const c = o.getByText("MY_TEXT");
+    t(c).toBeInTheDocument();
   });
 });

package/dist/components/Filter/Filter.d.ts

@@ -13,6 +13,8 @@ type FilterProps = {
     useModal?: boolean;
     selectAllLabel?: string;
     'data-testid'?: string;
+    filterButtonSize?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+    filterButtonClassName?: string;
 };
 /**
  * Filter component that allows the user to filter the data provided
@@ -23,11 +25,13 @@ type FilterProps = {
  * @param filterButtonText - the text for the filter button
  * @param filterModalTitle - the title for the filter modal
  * @param filters - the filter data
+ * @param filterButtonSize - the size of the filter button and filter button as icon 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'
+ * @param filterButtonClassName the className of the FilterButton
  * @param modalCancelButtonText - the text for the cancel button in the modal
  * @param modalConfirmButtonText - the text for the confirm button in the modal
  * @param useModal - if the filter should use a modal and a filter button, default is true,
  *                   if false the filters will be displayed directly in the page, be aware that the filters will be displayed in a row and there needs to be enough space for them
  * @returns
  */
-export declare const Filter: ({ clearFilterText, closeCallback, currentFilter, filterButtonAsIcon, filterButtonText, filterModalTitle, filters, modalCancelButtonText, modalConfirmButtonText, useModal, selectAllLabel, "data-testid": dataTestId, }: FilterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Filter: ({ clearFilterText, closeCallback, currentFilter, filterButtonAsIcon, filterButtonText, filterModalTitle, filters, modalCancelButtonText, modalConfirmButtonText, useModal, selectAllLabel, filterButtonSize, filterButtonClassName, "data-testid": dataTestId, }: FilterProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Filter/Filter.js

@@ -1,181 +1,196 @@
-import { jsx as e, jsxs as b, Fragment as D } from "react/jsx-runtime";
-import { N as F } from "../../index.es-B6ZgiW2s.js";
-import { B as h } from "../../index.es-0QJC9VS2.js";
-import { G as _ } from "../../index.es-DDYCugj-.js";
-import { I as W } from "../../index.es-IXyb5F6n.js";
-import { S as j } from "../../index.es-45NOgWlB.js";
-import { useState as v } from "react";
-import { Iconify as z } from "../Iconify/Iconify.js";
-import { u as k } from "../../useBreakpoints-MzTZ0tCT.js";
+import { jsx as e, jsxs as B, Fragment as D } from "react/jsx-runtime";
+import { N as z } from "../../index.es-D_hWWij3.js";
+import { B as _ } from "../../index.es-DUcI2Zyr.js";
+import { G as v } from "../../index.es-DsGuBR0Z.js";
+import { I as W } from "../../index.es-BzdG6flH.js";
+import { S as j } from "../../index.es-CijDQQVg.js";
+import { c as G } from "../../index-Cpb-8cAN.js";
+import { useState as b } from "react";
+import { Iconify as H } from "../Iconify/Iconify.js";
+import { u as F } from "../../useBreakpoints-MzTZ0tCT.js";
 import "../../react-tooltip.min-DSY6KDqS.js";
 import "../../orderBy-BXxEvUw6.js";
-import { SearchBar as G } from "../SearchBar/SearchBar.js";
+import { SearchBar as I } from "../SearchBar/SearchBar.js";
 import "../../uniqueId-NU3-C36A.js";
-import { Modal as H } from "../Modal/Modal.js";
-import { Select as I } from "../Select/Select.js";
+import { Modal as K } from "../Modal/Modal.js";
+import { Select as M } from "../Select/Select.js";
 import "react-hook-form";
 import "../../get-DuK51wnj.js";
 import "../../omit-uTAyrUTm.js";
 import "../../isArray-Dub1wGJM.js";
 import "../../isString-BNaBRq3S.js";
 import "../../types/Time.js";
-import '../../assets/Filter.css';const K = "_filterButton_qtl7a_1", T = "_relativeParent_qtl7a_6", V = "_filterBadge_qtl7a_10", E = "_dense_qtl7a_17", u = {
-  filterButton: K,
-  relativeParent: T,
-  filterBadge: V,
-  dense: E
-}, ut = ({
-  clearFilterText: m,
-  closeCallback: s,
-  currentFilter: r,
-  filterButtonAsIcon: d = !1,
-  filterButtonText: a,
+import '../../assets/Filter.css';const T = "_filterButton_1qtzn_1", V = "_relativeParent_1qtzn_21", E = "_iconColor_1qtzn_25", J = "_filterBadge_1qtzn_29", Q = "_dense_1qtzn_36", U = "_filterModal_1qtzn_41", X = "_borderRadius_1qtzn_45", s = {
+  filterButton: T,
+  relativeParent: V,
+  iconColor: E,
+  filterBadge: J,
+  dense: Q,
+  filterModal: U,
+  borderRadius: X
+}, Bt = ({
+  clearFilterText: u,
+  closeCallback: d,
+  currentFilter: i,
+  filterButtonAsIcon: c = !1,
+  filterButtonText: f,
   filterModalTitle: t,
-  filters: f,
-  modalCancelButtonText: g,
-  modalConfirmButtonText: p,
+  filters: a,
+  modalCancelButtonText: m,
+  modalConfirmButtonText: h,
   useModal: o = !0,
-  selectAllLabel: i,
-  "data-testid": w
+  selectAllLabel: r,
+  filterButtonSize: q = "medium",
+  filterButtonClassName: $,
+  "data-testid": k
 }) => {
-  const { isDesktop: A } = k(), [$, B] = v(!1), [c, C] = v(r), [q, x] = v(0), y = () => {
-    B(!1), s(c), x(
-      c.reduce((l, { filterValue: n }) => n === void 0 ? l : typeof n == "boolean" ? n ? l + 1 : l : Array.isArray(n) ? l + n.length : typeof n == "string" && n.length ? l + 1 : l, 0)
+  const { isDesktop: w } = F(), [A, g] = b(!1), [p, C] = b(i), [R, S] = b(0), x = () => {
+    g(!1), d(p), S(
+      p.reduce((l, { filterValue: n }) => n === void 0 ? l : typeof n == "boolean" ? n ? l + 1 : l : Array.isArray(n) ? l + n.length : typeof n == "string" && n.length ? l + 1 : l, 0)
     );
   }, O = () => {
-    C([]), x(0);
-  }, S = (l) => {
+    C([]), S(0);
+  }, y = (l) => {
     const n = [
-      ...c.filter((P) => P.id !== l.id),
+      ...p.filter((P) => P.id !== l.id),
       l
     ];
-    C(n), o || s(n);
+    C(n), o || d(n);
   };
-  return o ? /* @__PURE__ */ b(D, { children: [
+  return o ? /* @__PURE__ */ B(D, { children: [
     /* @__PURE__ */ e(
-      J,
+      Y,
       {
-        filterButtonText: a,
-        filterButtonAsIcon: d,
-        count: q,
-        onClick: () => B(!0),
-        "data-testid": w
+        filterButtonText: f,
+        filterButtonAsIcon: c,
+        count: R,
+        onClick: () => g(!0),
+        "data-testid": k,
+        filterButtonSize: q,
+        filterButtonClassName: $
       }
     ),
     /* @__PURE__ */ e(
-      H,
+      K,
       {
-        open: $,
-        onClose: y,
+        open: A,
+        className: s.filterModal,
+        onClose: x,
         title: t,
-        modalSize: A ? "small" : "fullscreen",
-        headerActions: /* @__PURE__ */ e(h, { "data-testid": "filter-clear-button", variant: "text", onClick: O, children: m }),
-        dismissiveButton: /* @__PURE__ */ e(
-          h,
+        modalSize: w ? "small" : "fullscreen",
+        headerActions: /* @__PURE__ */ e(_, { "data-testid": "filter-clear-button", variant: "text", onClick: O, children: u }),
+        footerSupplemental: /* @__PURE__ */ e(
+          _,
           {
             "data-testid": "filter-cancel-button",
             variant: "outlined",
-            onClick: () => B(!1),
-            children: g
+            onClick: () => g(!1),
+            children: m
           }
         ),
-        actionButton: /* @__PURE__ */ e(h, { "data-testid": "filter-confirm-button", variant: "filled", onClick: y, children: p }),
-        children: /* @__PURE__ */ e(_, { direction: "vertical", "data-testid": "filter-map-filters", children: N(f, c, S, i) })
+        actionButton: /* @__PURE__ */ e(_, { "data-testid": "filter-confirm-button", variant: "filled", onClick: x, children: h }),
+        children: /* @__PURE__ */ e(v, { direction: "vertical", "data-testid": "filter-map-filters", children: N(a, p, y, r) })
       }
     )
-  ] }) : /* @__PURE__ */ e(_, { secondaryAlign: "center", fullWidth: !0, children: N(f, c, S, i, !1) });
-}, N = (m, s, r, d, a = !0) => m.map(({ id: t, title: f, availableOptions: g, icon: p, type: o }) => /* @__PURE__ */ b(_, { fullWidth: !0, secondaryAlign: "center", "data-testid": `filter-${o}-group-${t}`, children: [
-  p ? /* @__PURE__ */ e(z, { icon: p, iconSize: "medium" }) : null,
+  ] }) : /* @__PURE__ */ e(v, { secondaryAlign: "center", fullWidth: !0, children: N(a, p, y, r, !1) });
+}, N = (u, d, i, c, f = !0) => u.map(({ id: t, title: a, availableOptions: m, icon: h, type: o }) => /* @__PURE__ */ B(v, { fullWidth: !0, secondaryAlign: "center", "data-testid": `filter-${o}-group-${t}`, children: [
+  h ? /* @__PURE__ */ e(H, { icon: h, iconSize: "medium" }) : null,
   o === "select" && /* @__PURE__ */ e(
-    I,
+    M,
     {
       "data-testid": `filter-select-${t}`,
-      selectAllLabel: d,
-      className: a ? void 0 : u.dense,
+      selectAllLabel: c,
+      className: `${f ? void 0 : s.dense} ${s.borderRadius}`,
       variant: "outlined",
-      options: g,
-      label: f,
+      options: m,
+      label: a,
       multiSelect: !0,
       textKey: "text",
       valueKey: "id",
-      value: s.find((i) => i.id === t)?.filterValue ?? [],
-      onChange: (i) => r({ id: t, type: o, filterValue: i }),
+      value: d.find((r) => r.id === t)?.filterValue ?? [],
+      onChange: (r) => i({ id: t, type: o, filterValue: r }),
       hoisted: !0,
       menuMaxHeight: "300px",
       disabled: t === "location",
       showOptionFilter: !1,
-      dense: !a,
-      fixedHeightInput: !a,
-      multiDisplayType: a ? "pills" : "text"
+      dense: !f,
+      fixedHeightInput: !f,
+      multiDisplayType: f ? "pills" : "text"
     }
   ),
   o === "toggle" && /* @__PURE__ */ e(
     j,
     {
       "data-testid": `filter-switch-${t}`,
-      label: f,
-      onChange: (i) => r({ id: t, type: o, filterValue: i }),
-      checked: !!s.find((i) => i.id === t)?.filterValue
+      label: a,
+      onChange: (r) => i({ id: t, type: o, filterValue: r }),
+      checked: !!d.find((r) => r.id === t)?.filterValue
     }
   ),
   o === "search" && /* @__PURE__ */ e(
-    G,
+    I,
     {
       "data-testid": `filter-search-${t}`,
-      placeholder: f,
-      searchTerm: s.find((i) => i.id === t)?.filterValue,
-      setSearchTerm: (i) => r({ id: t, type: o, filterValue: i })
+      placeholder: a,
+      searchTerm: d.find((r) => r.id === t)?.filterValue,
+      className: s.borderRadius,
+      setSearchTerm: (r) => i({ id: t, type: o, filterValue: r })
     }
   )
-] }, t)), J = ({
-  filterButtonText: m,
-  filterButtonAsIcon: s,
-  count: r,
-  "data-testid": d,
+] }, t)), Y = ({
+  filterButtonText: u,
+  filterButtonAsIcon: d,
+  count: i,
+  filterButtonSize: c,
+  filterButtonClassName: f,
+  "data-testid": t,
   onClick: a
 }) => {
-  const { isDesktop: t } = k();
-  return s ? /* @__PURE__ */ e(
+  const { isDesktop: m } = F();
+  return d ? /* @__PURE__ */ e(
     W,
     {
-      "data-testid": d ?? "filter-icon-button",
+      className: s.iconColor,
+      "data-testid": t ?? "filter-icon-button",
       icon: "filter_list_alt",
       onClick: a,
-      badge: r !== 0 && /* @__PURE__ */ e(
-        F,
+      iconSize: c,
+      badge: i !== 0 && /* @__PURE__ */ e(
+        z,
         {
-          counter: r,
-          className: u.filterBadge,
+          counter: i,
+          className: s.filterBadge,
           themeColor: "secondary",
           "data-testid": "filter-badge"
         }
       )
     }
-  ) : /* @__PURE__ */ b(
+  ) : /* @__PURE__ */ B(
     "div",
     {
-      "data-testid": d ?? "filter-button-container",
-      className: u.relativeParent,
-      style: { height: "100%", width: t ? void 0 : "100%" },
+      "data-testid": t ?? "filter-button-container",
+      className: s.relativeParent,
+      style: { height: "100%", width: m ? void 0 : "100%" },
       children: [
         /* @__PURE__ */ e(
-          h,
+          _,
           {
             "data-testid": "filter-button",
             variant: "outlined",
             themeColor: "primary",
             leadingIcon: "filter_list_alt",
             onClick: a,
-            className: u.filterButton,
-            fullWidth: !t,
-            children: m
+            className: G(f, s.filterButton),
+            fullWidth: !m,
+            buttonSize: c,
+            children: u
           }
         ),
-        r !== 0 && /* @__PURE__ */ e(
-          F,
+        i !== 0 && /* @__PURE__ */ e(
+          z,
           {
-            counter: r,
-            className: u.filterBadge,
+            counter: i,
+            className: s.filterBadge,
             themeColor: "secondary",
             "data-testid": "filter-badge"
           }
@@ -185,5 +200,5 @@ import '../../assets/Filter.css';const K = "_filterButton_qtl7a_1", T = "_relati
   );
 };
 export {
-  ut as Filter
+  Bt as Filter
 };

package/dist/components/FormComponents/FormCheckBox/FormCheckBox.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import { C as m } from "../../../index.es-DObVvepK.js";
+import { C as m } from "../../../index.es-BLIkMu0q.js";
 import { useFormContext as k, Controller as C } from "react-hook-form";
 import '../../../assets/FormCheckBox.css';const b = "_invalid_1l2r2_1", d = "_checkbox_1l2r2_5", c = {
   invalid: b,

package/dist/components/FormComponents/FormDatePicker/FormDatePicker.js

@@ -1,7 +1,7 @@
 import { jsx as C, jsxs as pa } from "react/jsx-runtime";
-import { B as ba } from "../../../index.es-0QJC9VS2.js";
-import { b as u, a as o, c as d, d as s, r as wa, s as be, t as M, m as j, l as D, f as z, e as N, g as ya, D as Pa } from "../../../index.es-DqSY-ePE.js";
-import { D as ka } from "../../../index.es-Dfju71Pi.js";
+import { B as ba } from "../../../index.es-DUcI2Zyr.js";
+import { b as u, a as o, c as d, d as s, r as wa, s as be, t as M, m as j, l as D, f as z, e as N, g as ya, D as Pa } from "../../../index.es-CXq42ihP.js";
+import { D as ka } from "../../../index.es-Bus5gEri.js";
 import { P as Ma } from "../../../index.es-Bo1Rhtyb.js";
 import { useMemo as V, useState as $a } from "react";
 import { useFormContext as Wa, Controller as ja } from "react-hook-form";
@@ -28520,7 +28520,7 @@ const FO = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   zhCN: NR,
   zhHK: dO,
   zhTW: EO
-}, Symbol.toStringTag, { value: "Module" })), AO = "_datePickerContainer_73m8g_1", LO = "_invalid_73m8g_5", IO = "_fromPickerText_73m8g_9", RO = "_datePickerCalendar_73m8g_13", OO = "_trailingContent_73m8g_17", I = {
+}, Symbol.toStringTag, { value: "Module" })), AO = "_datePickerContainer_1m1xz_1", LO = "_invalid_1m1xz_13", IO = "_fromPickerText_1m1xz_17", RO = "_datePickerCalendar_1m1xz_21", OO = "_trailingContent_1m1xz_25", I = {
   datePickerContainer: AO,
   invalid: LO,
   fromPickerText: IO,

package/dist/components/FormComponents/FormNumber/CustomTextField.js

@@ -1,39 +1,40 @@
 import { jsx as m } from "react/jsx-runtime";
-import { T as d } from "../../../index.es-DENZVv7_.js";
-import { g as u } from "../../../get-DuK51wnj.js";
-import { o as g } from "../../../omit-uTAyrUTm.js";
-import { useMemo as f } from "react";
-import { useFormContext as v } from "react-hook-form";
-import '../../../assets/CustomTextField.css';const c = "_invalid_1dsbr_1", s = {
-  invalid: c
+import { T as u } from "../../../index.es-BLolvOHO.js";
+import { g } from "../../../get-DuK51wnj.js";
+import { o as f } from "../../../omit-uTAyrUTm.js";
+import { useMemo as v } from "react";
+import { useFormContext as s } from "react-hook-form";
+import '../../../assets/CustomTextField.css';const c = "_invalid_142hx_1", h = "_borderRadius_142hx_5", o = {
+  invalid: c,
+  borderRadius: h
 }, C = ({ ...e }) => {
   const {
-    getFieldState: r,
+    getFieldState: t,
     formState: { errors: n },
     trigger: i,
-    watch: o
-  } = v(), a = o(e.propertyName), l = f(() => {
+    watch: l
+  } = s(), a = l(e.propertyName), d = v(() => {
     if (!(!a || e.value === null))
       return e.value;
   }, [a, e.value]);
   return /* @__PURE__ */ m(
-    d,
+    u,
     {
-      ...g(e, ["propertyName", "formOnBlur", "additionalTrigger"]),
-      value: l,
+      ...f(e, ["propertyName", "formOnBlur", "additionalTrigger"]),
+      value: d,
       "data-testid": `numeric-field-${e.propertyName}`,
       fullWidth: !0,
       inputMode: "decimal",
       variant: "outlined",
-      onBlur: (t) => {
-        e.onBlur?.(t), e.formOnBlur(), e.additionalTrigger === "onBlur" && i(e.propertyName);
+      onBlur: (r) => {
+        e.onBlur?.(r), e.formOnBlur(), e.additionalTrigger === "onBlur" && i(e.propertyName);
       },
-      onChange: (t) => {
-        e.onChange?.(t), e.additionalTrigger === "onChange" && i(e.propertyName);
+      onChange: (r) => {
+        e.onChange?.(r), e.additionalTrigger === "onChange" && i(e.propertyName);
       },
-      valid: !r(e.propertyName).invalid,
-      helperTextPersistent: u(n, e.propertyName) !== void 0 || e.helperTextPersistent,
-      className: r(e.propertyName).invalid ? s.invalid : ""
+      valid: !t(e.propertyName).invalid,
+      helperTextPersistent: g(n, e.propertyName) !== void 0 || e.helperTextPersistent,
+      className: `${t(e.propertyName).invalid ? o.invalid : ""} ${o.borderRadius}`
     }
   );
 };

package/dist/components/FormComponents/FormRadio/FormRadio.js

@@ -1,5 +1,5 @@
 import { jsx as r, Fragment as m } from "react/jsx-runtime";
-import { R as d } from "../../../index.es-D1IpdMde.js";
+import { R as d } from "../../../index.es-DDRyb2df.js";
 import { useFormContext as s, Controller as c } from "react-hook-form";
 const g = ({ propertyName: l, options: t }) => {
   const { control: n, setValue: o } = s(), u = (a) => {