@fluidattacks/design 8.1.0 → 8.2.0

package/dist/components/filters/filters-menu/index.js

@@ -1,9 +1,202 @@
-import "react/jsx-runtime";
-import "../../../vendor-i-lggy4V.mjs";
-import "react";
-import "styled-components";
-import { cm as s } from "../../../components-LCJjFofC.mjs";
+import { jsxs as a, jsx as o } from "react/jsx-runtime";
+import I from "../../../_virtual/snakeCase.js";
+import { forwardRef as O, useContext as $, useMemo as B, useCallback as p, Fragment as L } from "react";
+import { useTheme as R } from "styled-components";
+import { FiltersContext as A } from "../context/index.js";
+import { NoMatches as P } from "../search/no-matches/index.js";
+import { StyledModalContainer as W, StyledHeader as D, StyledActionButton as H, StyledContent as k, StyledItem as N } from "../styles.js";
+import { filterMenu as q } from "../utils.js";
+import { Container as x } from "../../container/index.js";
+import { Icon as T } from "../../icon/index.js";
+import { ComboBox as J } from "../../inputs/fields/combobox/index.js";
+import "../../../_virtual/lodash.js";
+import "../../button/index.js";
 import "react-dom";
+import "../../typography/heading/index.js";
+import "../../typography/span/index.js";
+import { Text as M } from "../../typography/text/index.js";
+import "../../inputs/styles.js";
+import { Tag as K } from "../../tag/index.js";
+import "../../../_virtual/dayjs.min.js";
+import "../../icon-button/index.js";
+import "../../layout/categories/buttons/index.js";
+import "../../inputs/utils/action-button/index.js";
+import "../../../node_modules/react-international-phone/dist/index.js";
+import { Search as Q } from "../../search/index.js";
+import { parseTextFilterValue as U, parseCheckboxesFilterValue as X, parseIncludeExcludeFilterValue as Y } from "../../../utils/filters.js";
+const Z = (c, d) => {
+  if (d?.some((t) => t.type === "text") ?? !1)
+    return U(c ?? "").text ? "1" : "0";
+  const i = new Set(d?.map((t) => t.type) ?? []);
+  if (i.size === 1 && i.has("checkboxes"))
+    return X(
+      c ?? ""
+    ).values.length.toString();
+  if (d?.some((t) => t.type === "includeExclude") ?? !1) {
+    const { include: t, exclude: f } = Y(
+      c ?? ""
+    );
+    return (t.length + f.length).toString();
+  }
+  return (c ?? "").split(",").filter((t) => t && t !== "-").length.toString();
+}, Te = O(function({
+  includeSearch: d = !1,
+  groupedFilters: g,
+  handleChangeId: i,
+  pinnedFilters: h
+}, b) {
+  const t = R(), {
+    id: f,
+    searchValues: { searchGlobal: y },
+    setSearchValues: m,
+    values: s,
+    updateSearch: v,
+    setValues: u
+  } = $(A), C = q(g, y), w = B(() => Object.values(s).filter(Boolean).length > 0, [s]), S = h.length > 0, V = p(
+    (e) => () => {
+      i(e), v({ previousValue: s[e] ?? "" }), m({ searchFilter: "", searchGlobal: "" });
+    },
+    [i, v, m, s]
+  ), j = p(() => {
+    u(
+      (e) => Object.keys(e).reduce((n, r) => ({ ...n, [r]: "" }), {})
+    ), i("");
+  }, [u, i]), z = p(
+    (e) => {
+      m((n) => ({
+        ...n,
+        searchGlobal: e.target.value
+      }));
+    },
+    [m]
+  ), E = p(
+    (e) => (n) => {
+      u((r) => ({ ...r, [e]: n }));
+    },
+    [u]
+  );
+  return /* @__PURE__ */ a(W, { "data-testid": "filters-menu", ref: b, children: [
+    /* @__PURE__ */ a(D, { children: [
+      /* @__PURE__ */ a(x, { display: "flex", justify: "space-between", width: "100%", children: [
+        /* @__PURE__ */ o(M, { color: t.palette.gray[800], fontWeight: "bold", size: "md", children: "Filters menu" }),
+        w ? /* @__PURE__ */ o(
+          H,
+          {
+            $variant: "lowRelevance",
+            onClick: j,
+            type: "button",
+            children: "Reset all"
+          }
+        ) : void 0
+      ] }),
+      d ? /* @__PURE__ */ o(
+        Q,
+        {
+          name: "filters-search",
+          onChange: z,
+          placeholder: "Search filter...",
+          value: y
+        }
+      ) : void 0
+    ] }),
+    /* @__PURE__ */ a(
+      x,
+      {
+        alignItems: "flex-start",
+        display: "flex",
+        flexDirection: "column",
+        scroll: "y",
+        width: "100%",
+        children: [
+          S ? /* @__PURE__ */ o(k, { "data-testid": "menu-pinned", children: h.map((e) => {
+            const n = e.options?.[0]?.items?.map((r) => ({
+              name: r.label ?? r.value,
+              value: r.value
+            })) ?? [];
+            return /* @__PURE__ */ o(
+              J,
+              {
+                items: n,
+                name: e.id,
+                onChange: E(e.id),
+                placeholder: e.label,
+                value: s[e.id] ?? ""
+              },
+              e.id
+            );
+          }) }) : void 0,
+          C.length > 0 ? C.map(({ group: e, filters: n }, r) => n.length > 0 ? /* @__PURE__ */ a(
+            k,
+            {
+              $border: (r > 0 || S) && e !== "default",
+              "data-testid": `${e ? `menu-${I(e)}` : "menu-content"}`,
+              children: [
+                e !== "default" ? /* @__PURE__ */ o(
+                  M,
+                  {
+                    color: t.palette.gray[400],
+                    fontWeight: "bold",
+                    mb: 0.5,
+                    size: "md",
+                    children: e
+                  }
+                ) : void 0,
+                n.map((l) => {
+                  const G = s[l.id], F = Z(
+                    G,
+                    l.options
+                  );
+                  return /* @__PURE__ */ o(L, { children: /* @__PURE__ */ a(
+                    N,
+                    {
+                      as: "button",
+                      "data-testid": l.id,
+                      onClick: V(l.id),
+                      children: [
+                        /* @__PURE__ */ o(
+                          T,
+                          {
+                            icon: "filter",
+                            iconClass: "filter-item",
+                            iconSize: "md",
+                            iconType: "fa-light"
+                          }
+                        ),
+                        l.label,
+                        /* @__PURE__ */ a(
+                          x,
+                          {
+                            alignItems: "center",
+                            display: "flex",
+                            gap: 0.5,
+                            style: { marginLeft: "auto" },
+                            children: [
+                              f === l.id ? /* @__PURE__ */ o(
+                                T,
+                                {
+                                  icon: "chevron-right",
+                                  iconClass: "selected",
+                                  iconSize: "lg",
+                                  iconType: "fa-light"
+                                }
+                              ) : void 0,
+                              F !== "0" ? /* @__PURE__ */ o(K, { tagLabel: F, variant: "default" }) : void 0
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  ) }, l.id);
+                })
+              ]
+            },
+            e
+          ) : void 0) : /* @__PURE__ */ o(P, {})
+        ]
+      }
+    )
+  ] });
+});
 export {
-  s as FiltersMenu
+  Te as FiltersMenu
 };

package/dist/components/filters/hooks.js

@@ -0,0 +1,25 @@
+import { useState as s, useCallback as l, useRef as n, useMemo as o } from "react";
+const u = () => {
+  const [e, t] = s({
+    previousValue: ""
+  }), a = l(
+    (r) => {
+      t((c) => ({ ...c, ...r }));
+    },
+    []
+  );
+  return { searchState: e, updateSearch: a };
+}, d = () => {
+  const e = n(null);
+  return { scrollState: o(() => ({ ref: e }), []) };
+}, i = () => {
+  const [e, t] = s(!1), a = l((r) => {
+    t(r);
+  }, []);
+  return { calendarState: { isOpen: e, updateCalendarState: a } };
+};
+export {
+  i as useFilterCalendarState,
+  d as useFilterScrollState,
+  u as useFilterSearchState
+};

package/dist/components/filters/index.js

@@ -1,9 +1,221 @@
-import "react/jsx-runtime";
-import "react";
-import "../../vendor-i-lggy4V.mjs";
-import { a, Q as e, bx as p } from "../../components-LCJjFofC.mjs";
+import { jsx as u, jsxs as te } from "react/jsx-runtime";
+import { forwardRef as oe, useState as F, useMemo as w, useCallback as m, useImperativeHandle as ne, createElement as le, useContext as se } from "react";
+import { useFloating as j } from "../../node_modules/@floating-ui/react/dist/floating-ui.react.js";
+import re from "../../_virtual/isEmpty.js";
+import ie from "../../_virtual/lowerFirst.js";
+import { ActiveFilters as Je } from "./active-filters/index.js";
+import { FiltersContext as H } from "./context/index.js";
+import { FiltersMenu as ae } from "./filters-menu/index.js";
+import { useFilterCalendarState as ce, useFilterSearchState as me, useFilterScrollState as pe } from "./hooks.js";
+import { OptionsMenu as ue } from "./options-menu/index.js";
+import { partitionFilters as fe, getSelectedFilter as de, getGroupedFilters as he, MAX_FILTERS_LENGTH as ge } from "./utils.js";
+import { useClickOutside as Fe } from "../../hooks/use-click-outside.js";
+import { useFiltersValues as ve } from "../../hooks/use-filters.js";
+import { useModal as Ce } from "../../hooks/use-modal.js";
+import { getPathname as be, clearStorage as V } from "../../utils/storage.js";
+import { Button as Oe } from "../button/index.js";
+import { Container as Se } from "../container/index.js";
+import { Toggle as ke } from "../toggle/index.js";
+const R = "y", Te = ({
+  disabled: p,
+  id: t,
+  label: f,
+  tooltip: i
+}) => {
+  const { values: d, setValues: e } = se(H), a = d[t] === R, l = m(() => {
+    e((s) => ({
+      ...s,
+      [t]: s[t] === R ? "" : R
+    }));
+  }, [t, e]);
+  return /* @__PURE__ */ u(
+    ke,
+    {
+      defaultChecked: a,
+      disabled: p,
+      leftText: f,
+      name: t,
+      onChange: l,
+      tooltip: i,
+      variant: "inline"
+    }
+  );
+}, xe = ({
+  disabled: p,
+  filters: t,
+  tooltip: f,
+  filterState: i,
+  searchValues: d,
+  setSearchValues: e,
+  filterId: a,
+  setFilterId: l,
+  onButtonClick: s,
+  onOutsideClick: c,
+  width: h,
+  justify: O,
+  imperativeRef: S,
+  hideMenuSearch: k = !1
+}) => {
+  const o = Ce("filters"), { calendarState: r } = ce(), { searchState: v, updateSearch: g } = me(), { scrollState: C } = pe(), [T, x] = F(""), [P, G] = F(null), { refs: M } = j({ placement: "bottom-start" }), { refs: y } = j({ placement: "right-end" }), { setFloating: B, setReference: U } = M, { setFloating: X } = y, { activeFilters: q, values: E, setValues: z } = i, { previousValue: D } = v, {
+    menu: L,
+    inline: J,
+    pinned: Q
+  } = w(() => fe(t), [t]), { hideMenuTitle: W, label: A, options: _ } = de(
+    L,
+    T,
+    D
+  ), Y = he(L), Z = re(a) || a === null || T !== a, $ = !k && L.length > ge, b = m(
+    (n, N) => {
+      x(n), l(n), G(N);
+    },
+    [l]
+  ), I = m(
+    (n) => {
+      b(n, null);
+    },
+    [b]
+  ), K = m(() => {
+    o.isOpen || s(), o.toggle(), x(""), l(null), G(null), e({ searchGlobal: "", searchFilter: "" });
+  }, [o, l, e, s]), ee = m(() => {
+    r.isOpen || (o.close(), x(""), l(null), G(null), e({ searchGlobal: "", searchFilter: "" }), c());
+  }, [
+    r.isOpen,
+    o,
+    l,
+    e,
+    c
+  ]);
+  return ne(
+    S,
+    () => ({
+      openAndNavigate: (n, N) => {
+        o.isOpen || (s(), o.open()), e({ searchGlobal: "", searchFilter: "" }), g({ previousValue: E[n] ?? "" }), b(n, N ?? null);
+      }
+    }),
+    [o, s, e, g, E, b]
+  ), Fe(
+    M.floating,
+    ee,
+    [M.reference, y.floating],
+    "[id^='popover-']"
+  ), /* @__PURE__ */ u(
+    H.Provider,
+    {
+      value: {
+        id: T,
+        calendarState: r,
+        searchState: v,
+        values: E,
+        scrollState: C,
+        searchValues: d,
+        setSearchValues: e,
+        setValues: z,
+        updateSearch: g,
+        navMode: P
+      },
+      children: /* @__PURE__ */ te(
+        Se,
+        {
+          alignItems: "center",
+          display: "flex",
+          justify: O,
+          position: "relative",
+          width: h,
+          wrap: "wrap",
+          children: [
+            /* @__PURE__ */ u(
+              Oe,
+              {
+                "data-testid": "filter-btn",
+                disabled: p,
+                icon: "filter",
+                id: "filter-btn",
+                onClick: K,
+                ref: U,
+                tag: q.toString(),
+                tooltip: f,
+                variant: "ghost"
+              }
+            ),
+            o.isOpen ? /* @__PURE__ */ u(
+              ae,
+              {
+                groupedFilters: Y,
+                handleChangeId: I,
+                includeSearch: $,
+                pinnedFilters: Q,
+                ref: B
+              }
+            ) : void 0,
+            Z ? void 0 : /* @__PURE__ */ u(
+              ue,
+              {
+                hideTitle: W,
+                label: _?.[0]?.formatLabel ?? !0 ? ie(A) : A,
+                options: _,
+                ref: X
+              }
+            ),
+            J.map((n) => /* @__PURE__ */ le(
+              Te,
+              {
+                ...n,
+                disabled: p || n.disabled,
+                key: n.id
+              }
+            ))
+          ]
+        }
+      )
+    }
+  );
+}, Ge = oe(
+  ({
+    disabled: p = !1,
+    filters: t,
+    tooltip: f,
+    storageKey: i,
+    width: d,
+    justify: e,
+    hideMenuSearch: a = !1
+  }, l) => {
+    const [s] = F(be), c = w(() => i ?? s, [i, s]), h = ve({ filters: t, storageKey: i }), [O, S] = F(null), [k, o] = F({
+      searchGlobal: "",
+      searchFilter: ""
+    }), r = w(
+      () => Object.values(h.values).some(
+        (C) => !!C && C !== "undefined"
+      ),
+      [h.values]
+    ), v = m(() => {
+      r || V(c);
+    }, [r, c]), g = m(() => {
+      r || V(c);
+    }, [r, c]);
+    return /* @__PURE__ */ u(
+      xe,
+      {
+        disabled: p,
+        filterId: O,
+        filterState: h,
+        filters: t,
+        hideMenuSearch: a,
+        imperativeRef: l,
+        justify: e,
+        onButtonClick: v,
+        onOutsideClick: g,
+        searchValues: k,
+        setFilterId: S,
+        setSearchValues: o,
+        tooltip: f,
+        width: d
+      }
+    );
+  }
+);
+Ge.displayName = "Filters";
 export {
-  a as ActiveFilters,
-  e as Filters,
-  p as partitionFilters
+  Je as ActiveFilters,
+  Ge as Filters,
+  fe as partitionFilters
 };

package/dist/components/filters/options-menu/include-exclude/index.js

@@ -1,7 +1,137 @@
-import "react/jsx-runtime";
-import "react";
-import "styled-components";
-import { cn as t } from "../../../../components-LCJjFofC.mjs";
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { forwardRef as j, useContext as v, useMemo as x, useCallback as b } from "react";
+import { useTheme as O } from "styled-components";
+import { MultiSelectSearch as $ } from "./multi-select.js";
+import { StyledSection as y, StyledSectionHeader as I } from "./styles.js";
+import { FiltersContext as k } from "../../context/index.js";
+import { StyledModalContainer as z, StyledHeader as D } from "../../styles.js";
+import { Container as g } from "../../../container/index.js";
+import { Tag as C } from "../../../tag/index.js";
+import "../../../typography/heading/index.js";
+import "../../../typography/span/index.js";
+import { Text as W } from "../../../typography/text/index.js";
+import { parseIncludeExcludeFilterValue as h, formatIncludeExcludeFilterValue as T } from "../../../../utils/filters.js";
+const E = (d, e) => d.includes(e) ? d.filter((r) => r !== e) : [...d, e], _ = j(function({ id: e, label: r, option: i }, L) {
+  const f = O(), { values: S, setValues: u, navMode: a } = v(k), s = x(
+    () => i.items ?? [],
+    [i.items]
+  ), M = i.includeLabel ?? "Include", w = i.excludeLabel ?? "Exclude", { include: m, exclude: p } = x(
+    () => h(S[e] ?? ""),
+    [S, e]
+  ), F = x(
+    () => s.filter((l) => !p.includes(l.value)),
+    [s, p]
+  ), H = x(
+    () => s.filter((l) => !m.includes(l.value)),
+    [s, m]
+  ), R = b(
+    (l) => {
+      u((o) => {
+        const c = h(o[e] ?? "");
+        return {
+          ...o,
+          [e]: T({
+            ...c,
+            include: E(c.include, l)
+          })
+        };
+      });
+    },
+    [e, u]
+  ), V = b(
+    (l) => {
+      u((o) => {
+        const c = h(o[e] ?? "");
+        return {
+          ...o,
+          [e]: T({
+            ...c,
+            exclude: E(c.exclude, l)
+          })
+        };
+      });
+    },
+    [e, u]
+  );
+  return /* @__PURE__ */ n(
+    z,
+    {
+      $left: "346px",
+      "data-testid": "options-menu",
+      ref: L,
+      children: [
+        /* @__PURE__ */ t(D, { children: /* @__PURE__ */ t(W, { color: f.palette.gray[800], fontWeight: "bold", size: "md", children: `Select ${r}` }) }),
+        /* @__PURE__ */ n(
+          g,
+          {
+            display: "flex",
+            flexDirection: "column",
+            gap: 0.875,
+            px: 0.875,
+            py: 0.875,
+            width: "100%",
+            children: [
+              /* @__PURE__ */ t(
+                g,
+                {
+                  border: "1px solid",
+                  borderColor: f.palette.gray[300],
+                  borderRadius: "8px",
+                  padding: [0.5, 1, 1, 1],
+                  children: /* @__PURE__ */ n(y, { "data-testid": "include-section", children: [
+                    /* @__PURE__ */ n(I, { children: [
+                      /* @__PURE__ */ t("span", { children: `${M} (Show)` }),
+                      /* @__PURE__ */ t(C, { tagLabel: m.length.toString(), variant: "default" })
+                    ] }),
+                    /* @__PURE__ */ t(
+                      $,
+                      {
+                        autoOpen: a === "include",
+                        items: F,
+                        name: `${e}-include`,
+                        onToggle: R,
+                        placeholder: `Search ${r} to include`,
+                        selected: m
+                      },
+                      `${e}-include-${a}`
+                    )
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ t(
+                g,
+                {
+                  border: "1px solid",
+                  borderColor: f.palette.gray[300],
+                  borderRadius: "8px",
+                  padding: [0.5, 1, 1, 1],
+                  children: /* @__PURE__ */ n(y, { "data-testid": "exclude-section", children: [
+                    /* @__PURE__ */ n(I, { children: [
+                      /* @__PURE__ */ t("span", { children: `${w} (Hide)` }),
+                      /* @__PURE__ */ t(C, { tagLabel: p.length.toString(), variant: "default" })
+                    ] }),
+                    /* @__PURE__ */ t(
+                      $,
+                      {
+                        autoOpen: a === "exclude",
+                        items: H,
+                        name: `${e}-exclude`,
+                        onToggle: V,
+                        placeholder: `Search ${r} to exclude`,
+                        selected: p
+                      },
+                      `${e}-exclude-${a}`
+                    )
+                  ] })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
 export {
-  t as IncludeExcludeMenu
+  _ as IncludeExcludeMenu
 };