@hortiview/shared-components 1.3.5 → 1.4.1

package/dist/components/Filter/Filter.js

@@ -1,162 +1,179 @@
-import { jsx as t, jsxs as y, Fragment as D } from "react/jsx-runtime";
-import { N } from "../../index.es-d5xhUpJZ.js";
+import { jsx as e, jsxs as b, Fragment as D } from "react/jsx-runtime";
+import { N as F } from "../../index.es-d5xhUpJZ.js";
 import { B as h } from "../../index.es-CiqbARoC.js";
 import { G as _ } from "../../index.es-DntoATwO.js";
-import { I } from "../../index.es-0lQcz8m1.js";
-import { S as T } from "../../index.es-8GOVkuo-.js";
+import { I as W } from "../../index.es-0lQcz8m1.js";
+import { S as j } from "../../index.es-8GOVkuo-.js";
 import { useState as v } from "react";
 import '../../assets/main.css';import '../../assets/Filter.css';/* empty css                  */
-import { u as b } from "../../useBreakpoints-MzTZ0tCT.js";
-import { Iconify as W } from "../Iconify/Iconify.js";
+import { u as k } from "../../useBreakpoints-MzTZ0tCT.js";
+import { Iconify as z } from "../Iconify/Iconify.js";
 import "../../react-tooltip.min-DSY6KDqS.js";
 import "../../orderBy-Bd48bw88.js";
-import { SearchBar as j } from "../SearchBar/SearchBar.js";
+import { SearchBar as G } from "../SearchBar/SearchBar.js";
 import "../../uniqueId-NU3-C36A.js";
-import { Modal as z } from "../Modal/Modal.js";
-import { Select as G } from "../Select/Select.js";
+import { Modal as H } from "../Modal/Modal.js";
+import { Select as I } from "../Select/Select.js";
 import "react-hook-form";
 import "../../get-DFv1gXfq.js";
 import "../../isArray-Dub1wGJM.js";
 import "../../isString-BW9UHONv.js";
-const H = "_filterButton_qtl7a_1", K = "_relativeParent_qtl7a_6", V = "_filterBadge_qtl7a_10", E = "_dense_qtl7a_17", u = {
-  filterButton: H,
-  relativeParent: K,
+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
-}, dt = ({
-  clearFilterText: d,
+}, ct = ({
+  clearFilterText: m,
   closeCallback: s,
-  currentFilter: r,
-  filterButtonAsIcon: f = !1,
-  filterButtonText: n,
-  filterModalTitle: i,
-  filters: m,
+  currentFilter: i,
+  filterButtonAsIcon: d = !1,
+  filterButtonText: a,
+  filterModalTitle: t,
+  filters: f,
   modalCancelButtonText: g,
   modalConfirmButtonText: p,
-  useModal: l = !0,
-  selectAllLabel: e
+  useModal: o = !0,
+  selectAllLabel: r,
+  "data-testid": w
 }) => {
-  const { isDesktop: A } = b(), [q, B] = v(!1), [c, C] = v(r), [w, x] = v(0), S = () => {
-    B(!1), s(c), x(
-      c.reduce((a, { filterValue: o }) => o === void 0 ? a : typeof o == "boolean" ? o ? a + 1 : a : Array.isArray(o) ? a + o.length : typeof o == "string" && o.length ? a + 1 : a, 0)
+  const { isDesktop: A } = k(), [$, B] = v(!1), [c, y] = v(i), [q, C] = v(0), x = () => {
+    B(!1), s(c), C(
+      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)
     );
   }, O = () => {
-    C([]), x(0);
-  }, F = (a) => {
-    const o = [
-      ...c.filter((P) => P.id !== a.id),
-      a
+    y([]), C(0);
+  }, S = (l) => {
+    const n = [
+      ...c.filter((P) => P.id !== l.id),
+      l
     ];
-    C(o), l || s(o);
+    y(n), o || s(n);
   };
-  return l ? /* @__PURE__ */ y(D, { children: [
-    /* @__PURE__ */ t(
+  return o ? /* @__PURE__ */ b(D, { children: [
+    /* @__PURE__ */ e(
       J,
       {
-        filterButtonText: n,
-        filterButtonAsIcon: f,
-        count: w,
-        onClick: () => B(!0)
+        filterButtonText: a,
+        filterButtonAsIcon: d,
+        count: q,
+        onClick: () => B(!0),
+        "data-testid": w
       }
     ),
-    /* @__PURE__ */ t(
-      z,
+    /* @__PURE__ */ e(
+      H,
       {
-        open: q,
-        onClose: S,
-        title: i,
+        open: $,
+        onClose: x,
+        title: t,
         modalSize: A ? "small" : "fullscreen",
-        headerActions: /* @__PURE__ */ t(h, { variant: "text", onClick: O, children: d }),
-        dismissiveButton: /* @__PURE__ */ t(h, { variant: "outlined", onClick: () => B(!1), children: g }),
-        primaryButton: /* @__PURE__ */ t(h, { variant: "filled", onClick: S, children: p }),
-        children: /* @__PURE__ */ t(_, { direction: "vertical", children: k(m, c, F, e) })
+        headerActions: /* @__PURE__ */ e(h, { "data-testid": "filter-clear-button", variant: "text", onClick: O, children: m }),
+        dismissiveButton: /* @__PURE__ */ e(
+          h,
+          {
+            "data-testid": "filter-cancel-button",
+            variant: "outlined",
+            onClick: () => B(!1),
+            children: g
+          }
+        ),
+        primaryButton: /* @__PURE__ */ e(h, { "data-testid": "filter-confirm-button", variant: "filled", onClick: x, children: p }),
+        children: /* @__PURE__ */ e(_, { direction: "vertical", "data-testid": "filter-map-filters", children: N(f, c, S, r) })
       }
     )
-  ] }) : /* @__PURE__ */ t(_, { secondaryAlign: "center", fullWidth: !0, children: k(m, c, F, e, !1) });
-}, k = (d, s, r, f, n = !0) => d.map(({ id: i, title: m, availableOptions: g, icon: p, type: l }) => /* @__PURE__ */ y(_, { fullWidth: !0, secondaryAlign: "center", children: [
-  p ? /* @__PURE__ */ t(W, { icon: p, iconSize: "medium" }) : null,
-  l === "select" && /* @__PURE__ */ t(
-    G,
+  ] }) : /* @__PURE__ */ e(_, { secondaryAlign: "center", fullWidth: !0, children: N(f, c, S, r, !1) });
+}, N = (m, s, i, 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,
+  o === "select" && /* @__PURE__ */ e(
+    I,
     {
-      selectAllLabel: f,
-      className: n ? void 0 : u.dense,
+      "data-testid": `filter-select-${t}`,
+      selectAllLabel: d,
+      className: a ? void 0 : u.dense,
       variant: "outlined",
       options: g,
-      label: m,
+      label: f,
       multiSelect: !0,
       textKey: "text",
       valueKey: "id",
-      value: s.find((e) => e.id === i)?.filterValue ?? [],
-      onChange: (e) => r({ id: i, type: l, filterValue: e }),
+      value: s.find((r) => r.id === t)?.filterValue ?? [],
+      onChange: (r) => i({ id: t, type: o, filterValue: r }),
       hoisted: !0,
       menuMaxHeight: "300px",
-      disabled: i === "location",
+      disabled: t === "location",
       showOptionFilter: !1,
-      dense: !n,
-      fixedHeightInput: !n,
-      multiDisplayType: n ? "pills" : "text"
+      dense: !a,
+      fixedHeightInput: !a,
+      multiDisplayType: a ? "pills" : "text"
     }
   ),
-  l === "toggle" && /* @__PURE__ */ t(
-    T,
+  o === "toggle" && /* @__PURE__ */ e(
+    j,
     {
-      label: m,
-      onChange: (e) => r({ id: i, type: l, filterValue: e }),
-      checked: !!s.find((e) => e.id === i)?.filterValue
+      "data-testid": `filter-switch-${t}`,
+      label: f,
+      onChange: (r) => i({ id: t, type: o, filterValue: r }),
+      checked: !!s.find((r) => r.id === t)?.filterValue
     }
   ),
-  l === "search" && /* @__PURE__ */ t(
-    j,
+  o === "search" && /* @__PURE__ */ e(
+    G,
     {
-      placeholder: m,
-      searchTerm: s.find((e) => e.id === i)?.filterValue,
-      setSearchTerm: (e) => r({ id: i, type: l, filterValue: e })
+      "data-testid": `filter-search-${t}`,
+      placeholder: f,
+      searchTerm: s.find((r) => r.id === t)?.filterValue,
+      setSearchTerm: (r) => i({ id: t, type: o, filterValue: r })
     }
   )
-] }, i)), J = ({
-  filterButtonText: d,
+] }, t)), J = ({
+  filterButtonText: m,
   filterButtonAsIcon: s,
-  count: r,
-  onClick: f
+  count: i,
+  "data-testid": d,
+  onClick: a
 }) => {
-  const { isDesktop: n } = b();
-  return s ? /* @__PURE__ */ t(
-    I,
+  const { isDesktop: t } = k();
+  return s ? /* @__PURE__ */ e(
+    W,
     {
+      "data-testid": d ?? "filter-icon-button",
       icon: "filter_list_alt",
-      onClick: f,
-      badge: r !== 0 && /* @__PURE__ */ t(
-        N,
+      onClick: a,
+      badge: i !== 0 && /* @__PURE__ */ e(
+        F,
         {
-          counter: r,
+          counter: i,
           className: u.filterBadge,
           themeColor: "secondary",
           "data-testid": "filter-badge"
         }
       )
     }
-  ) : /* @__PURE__ */ y(
+  ) : /* @__PURE__ */ b(
     "div",
     {
+      "data-testid": d ?? "filter-button-container",
       className: u.relativeParent,
-      style: { height: "100%", width: n ? void 0 : "100%" },
+      style: { height: "100%", width: t ? void 0 : "100%" },
       children: [
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ e(
           h,
           {
+            "data-testid": "filter-button",
             variant: "outlined",
             themeColor: "primary",
             leadingIcon: "filter_list_alt",
-            onClick: f,
+            onClick: a,
             className: u.filterButton,
-            fullWidth: !n,
-            children: d
+            fullWidth: !t,
+            children: m
           }
         ),
-        r !== 0 && /* @__PURE__ */ t(
-          N,
+        i !== 0 && /* @__PURE__ */ e(
+          F,
           {
-            counter: r,
+            counter: i,
             className: u.filterBadge,
             themeColor: "secondary",
             "data-testid": "filter-badge"
@@ -167,5 +184,5 @@ const H = "_filterButton_qtl7a_1", K = "_relativeParent_qtl7a_6", V = "_filterBa
   );
 };
 export {
-  dt as Filter
+  ct as Filter
 };