@ztwoint/z-ui 0.1.127 → 0.1.128

package/dist/components/table-filter/selected-filters-display/selected-filters-display.js

@@ -0,0 +1,31 @@
+import { jsxs as e, jsx as a, Fragment as c } from "react/jsx-runtime";
+import * as d from "react";
+import { getAppliedOptions as i } from "./selected-filters-display.utils.js";
+const p = ({
+  totalCount: l,
+  tempFilters: r,
+  filterSchema: s
+}) => {
+  const n = i(r, s);
+  return /* @__PURE__ */ e("div", { className: "flex flex-col gap-2.5 max-w-md", children: [
+    l > 0 && /* @__PURE__ */ e("span", { className: "text-text-neutral-primary leading-none-medium-sm", children: [
+      l.toLocaleString(),
+      " total"
+    ] }),
+    /* @__PURE__ */ a("div", { className: "flex flex-wrap items-center gap-2.5 max-w-md", children: n.map((t, m) => /* @__PURE__ */ e(d.Fragment, { children: [
+      /* @__PURE__ */ a("div", { className: "inline-flex items-center text-text-neutral-secondary rounded-md leading-none-regular-sm", children: /* @__PURE__ */ e("span", { className: "text-text-neutral-muted", children: [
+        t.name,
+        " ",
+        t.total !== void 0 && /* @__PURE__ */ e(c, { children: [
+          "[",
+          /* @__PURE__ */ a("span", { className: "text-text-neutral-secondary", children: t.total.toLocaleString() }),
+          "]"
+        ] })
+      ] }) }),
+      m < n.length - 1 && /* @__PURE__ */ a("span", { className: "text-text-neutral-muted", children: "•" })
+    ] }, t.name)) })
+  ] });
+};
+export {
+  p as SelectedFiltersDisplay
+};

package/dist/components/table-filter/selected-filters-display/selected-filters-display.utils.js

@@ -0,0 +1,23 @@
+const u = (e, n) => e.map(({ field: r, value: t }) => {
+  var o;
+  const a = (o = n.find(({ filterKey: s }) => s === r)) == null ? void 0 : o.options;
+  return !a || !Array.isArray(t) ? [] : t.map((s) => ({
+    name: s,
+    total: a[s]
+  }));
+}).flat(), l = (e, n) => {
+  if (!n || n.length === 0) return e.value !== "" ? 1 : 0;
+  if (Array.isArray(e.value)) {
+    const t = n.filter(
+      (a) => e.value.includes(a.value)
+    ).reduce((a, o) => a + (o.total || 0), 0);
+    return t > 0 ? t : void 0;
+  } else {
+    const r = n.find((t) => t.value === e.value);
+    return r == null ? void 0 : r.total;
+  }
+};
+export {
+  u as getAppliedOptions,
+  l as getFilterCount
+};

package/dist/components/table-filter/table-filter-button.js

@@ -0,0 +1,181 @@
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import * as b from "react";
+import * as f from "@radix-ui/react-popover";
+import { Button as y } from "../button/button.js";
+import { useTableFilterContext as q } from "./table-filter.context.js";
+import E from "./filters/text.js";
+import G from "./filters/boolean.js";
+import J from "./filters/number/number.js";
+import M from "./filters/checkbox.js";
+import Q from "../assets/icons/circle-check-filled.js";
+import { SelectedFiltersDisplay as W } from "./selected-filters-display/selected-filters-display.js";
+import { FilterConfirmationDialog as X } from "./close-filter-confirm/filter-confirmation-dialog.js";
+import { hasUnsavedFilterChanges as S } from "./close-filter-confirm/filter-confirmation-dialog.utils.js";
+const ie = () => {
+  var k, A;
+  const [K, i] = b.useState(!1), n = b.useRef(null), [C, c] = b.useState(!1), {
+    selectedColumn: a,
+    setSelectedColumn: O,
+    getFilterForColumn: P,
+    hasFilterForColumn: T,
+    updateColumnFilter: D,
+    clearAllFilters: R,
+    resetToAppliedFilters: $,
+    applyFilters: z,
+    hasActiveFilters: h,
+    tempFilters: u,
+    filterSchema: d,
+    filter: m,
+    filterComponents: x = {}
+  } = q(), B = (e) => {
+    !e && C ? S(u, m.value) ? i(!0) : c(!1) : c(e);
+  }, N = () => {
+    z(), i(!1), c(!1);
+  }, L = () => {
+    $(), i(!1), c(!1);
+  }, I = () => {
+    i(!1);
+  }, F = S(u, m.value), l = P(a || ""), V = () => {
+    if (!a) return null;
+    const e = d.find((o) => o.filterKey === a), s = {
+      boolean: G,
+      string: E,
+      number: J,
+      checkbox: M
+    }, j = (e == null ? void 0 : e.type) && (x == null ? void 0 : x[e.type]) || s[(e == null ? void 0 : e.type) ?? "string"];
+    if (!j)
+      return console.warn(
+        `No filter component found for column "${e == null ? void 0 : e.filterKey}" with type "${e == null ? void 0 : e.type}". Provide a custom filter component or use supported types: "string", "number", "boolean", "checkbox".`
+      ), null;
+    const U = {
+      condition: (l == null ? void 0 : l.condition) || "",
+      value: (l == null ? void 0 : l.value) || ""
+    };
+    return /* @__PURE__ */ t("div", { className: "flex-1 h-full", children: /* @__PURE__ */ t("div", { className: "mb-4 h-full", children: /* @__PURE__ */ t(
+      j,
+      {
+        value: U,
+        onChange: ({ condition: o, value: v }) => D(a, o, v),
+        filterOptions: e != null && e.options ? Object.entries(e.options).map(([o, v]) => ({
+          label: o,
+          value: o,
+          total: v
+        })) : void 0
+      },
+      a
+    ) }) });
+  }, H = m.loading || !1;
+  l && (Array.isArray(l.value) && l.value.length > 0 || (l == null ? void 0 : l.value) !== "") && (n.current = l);
+  const g = d.find(
+    (e) => {
+      var s;
+      return e.filterKey == ((s = n.current) == null ? void 0 : s.field);
+    }
+  ), w = Array.isArray((k = n.current) == null ? void 0 : k.value) ? (A = n.current) == null ? void 0 : A.value.map(
+    (e) => {
+      var s;
+      return ((s = g == null ? void 0 : g.options) == null ? void 0 : s[e]) || 1;
+    }
+  ) : [], p = w.reduce((e, s) => e + s, 0);
+  return /* @__PURE__ */ r(f.Root, { open: C, onOpenChange: B, children: [
+    /* @__PURE__ */ t(f.Trigger, { asChild: !0, children: /* @__PURE__ */ r(
+      y,
+      {
+        variant: h ? "filled" : "stroke",
+        shade: h ? "brand" : "neutral",
+        size: "small",
+        children: [
+          "Filters ",
+          h && `(${m.value.length})`
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ t(f.Portal, { children: /* @__PURE__ */ r(
+      f.Content,
+      {
+        className: "w-[512px] bg-surface-neutral-default border border-stroke-solid-light rounded-2xl overflow-hidden shadow-lg",
+        sideOffset: 8,
+        align: "start",
+        children: [
+          /* @__PURE__ */ r("div", { className: "flex h-[422px]", style: { maxHeight: "calc(100vh - 8rem)" }, children: [
+            /* @__PURE__ */ r("div", { className: "w-48 border-r border-stroke-solid-light p-2 flex flex-col gap-1.5 overflow-y-auto", children: [
+              /* @__PURE__ */ t("div", { className: "p-2 pb-1", children: /* @__PURE__ */ t("h3", { className: "leading-none-medium-sm text-text-neutral-secondary", children: "Filters" }) }),
+              d.map((e) => /* @__PURE__ */ r(
+                "button",
+                {
+                  onClick: () => O(e.filterKey),
+                  className: `w-full text-left p-2 text-sm flex items-center justify-between hover:bg-surface-neutral-hover transition-colors rounded-lg ${a === e.filterKey ? "bg-surface-neutral-focused text-text-brand-primary" : "text-text-neutral-primary"}`,
+                  children: [
+                    /* @__PURE__ */ r("span", { className: "flex items-center gap-1", children: [
+                      e.helperText && /* @__PURE__ */ r("span", { className: "leading-normal-regular-xs text-neutral-muted", children: [
+                        e.helperText,
+                        ": "
+                      ] }),
+                      /* @__PURE__ */ t("span", { className: "truncate", children: e.title })
+                    ] }),
+                    T(e.filterKey) && /* @__PURE__ */ t(Q, { className: "w-4 h-4 text-text-brand-secondary flex-shrink-0 ml-2" })
+                  ]
+                },
+                e.filterKey
+              ))
+            ] }),
+            /* @__PURE__ */ r("div", { className: "flex-1 flex flex-col relative", children: [
+              a ? V() : /* @__PURE__ */ t("div", { className: "flex-1 flex items-center justify-center text-text-neutral-muted", children: "Select a column to configure its filter" }),
+              H && /* @__PURE__ */ t("div", { className: "flex items-center justify-center p-8 absolute top-0 left-0 right-0 bottom-0 bg-background-neutral-default/80", children: /* @__PURE__ */ r("div", { className: "flex flex-col items-center gap-3", children: [
+                /* @__PURE__ */ t("div", { className: "w-8 h-8 border-2 border-stroke-solid-medium border-t-transparent rounded-full animate-spin" }),
+                /* @__PURE__ */ t("span", { className: "text-text-body-primary text-sm", children: "Loading options..." })
+              ] }) })
+            ] })
+          ] }),
+          (!!p || F) && /* @__PURE__ */ r("div", { className: "flex justify-between items-end p-4 border-t border-stroke-solid-medium min-h-[73px]", children: [
+            w.length > 0 ? /* @__PURE__ */ t(
+              W,
+              {
+                tempFilters: u,
+                filterSchema: d,
+                totalCount: p
+              }
+            ) : /* @__PURE__ */ t("div", { className: "w-full" }),
+            /* @__PURE__ */ r("div", { className: "flex justify-end gap-2", children: [
+              /* @__PURE__ */ t(
+                y,
+                {
+                  onClick: () => {
+                    n.current = void 0, R();
+                  },
+                  variant: "stroke",
+                  shade: "neutral",
+                  size: "small",
+                  children: "Clear All"
+                }
+              ),
+              /* @__PURE__ */ t(
+                y,
+                {
+                  onClick: N,
+                  variant: "filled",
+                  shade: "neutral",
+                  size: "small",
+                  className: "min-w-20",
+                  disabled: !F,
+                  children: `Apply ${p ? p.toLocaleString() : ""}`
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ) }),
+    K && /* @__PURE__ */ t(
+      X,
+      {
+        onClose: I,
+        onRevertChanges: L,
+        onApplyChanges: N
+      }
+    )
+  ] });
+};
+export {
+  ie as TableFilterButton
+};

package/dist/components/table-filter/table-filter-column-button.js

@@ -0,0 +1,113 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import k, { useMemo as K } from "react";
+import * as d from "@radix-ui/react-popover";
+import { Button as u } from "../button/button.js";
+import { useTableFilterContext as L } from "./table-filter.context.js";
+import _ from "./filters/text.js";
+import M from "./filters/boolean.js";
+import U from "./filters/number/number.js";
+import q from "./filters/checkbox.js";
+import E from "../assets/icons/circle-check-filled.js";
+import { getFilterCount as G } from "./selected-filters-display/selected-filters-display.utils.js";
+import { FilterConfirmationDialog as H } from "./close-filter-confirm/filter-confirmation-dialog.js";
+import { hasUnsavedFilterChangesForColumn as A } from "./close-filter-confirm/filter-confirmation-dialog.utils.js";
+const re = ({ filterName: n }) => {
+  const [T, a] = k.useState(!1), [f, s] = k.useState(!1), {
+    getFilterForColumn: C,
+    hasAppliedFilterForColumn: O,
+    updateColumnFilter: g,
+    applyFilters: c,
+    resetToAppliedFilters: P,
+    filterSchema: j,
+    filterComponents: m = {},
+    tempFilters: v,
+    filter: p
+  } = L(), N = (o) => {
+    !o && f ? A(n, v, p.value) ? a(!0) : s(!1) : s(o);
+  }, $ = () => {
+    c(), a(!1), s(!1);
+  }, D = () => {
+    P(), a(!1), s(!1);
+  }, R = () => {
+    a(!1);
+  }, x = A(n, v, p.value), t = j.find((o) => o.filterKey === n), l = K(
+    () => C(n),
+    [n, C]
+  );
+  if (!t)
+    return console.warn(`Column "${n}" not found in schema`), null;
+  const S = {
+    boolean: M,
+    string: _,
+    number: U,
+    checkbox: q
+  }, b = t.type && (m == null ? void 0 : m[t.type]) || S[t.type ?? "string"], h = O(n), F = p.loading || !1, y = t.options ? Object.entries(t.options).map(([o, i]) => ({
+    label: o,
+    value: o,
+    total: i
+  })) : void 0, w = l ? G(l, y) : void 0, z = l != null && l.value ? Array.isArray(l.value) ? l.value.length : 1 : 0, B = () => {
+    const o = g(n, "", "");
+    c(o), s(!1);
+  }, I = () => {
+    c(), s(!1);
+  };
+  return b ? /* @__PURE__ */ r(d.Root, { open: f, onOpenChange: N, children: [
+    /* @__PURE__ */ e(d.Trigger, { asChild: !0, children: /* @__PURE__ */ e(
+      u,
+      {
+        variant: h ? "filled" : "stroke",
+        shade: h ? "brand" : "neutral",
+        size: "small",
+        children: /* @__PURE__ */ r("span", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ r("span", { className: "flex items-center gap-1", children: [
+            t.helperText && /* @__PURE__ */ r("span", { className: "leading-normal-regular-xs text-neutral-muted", children: [
+              t.helperText,
+              ": "
+            ] }),
+            t.title
+          ] }),
+          h && /* @__PURE__ */ e(E, { className: "w-4 h-4 text-white flex-shrink-0" }),
+          F && /* @__PURE__ */ e("div", { className: "w-4 h-4 border-2 border-text-brand-secondary rounded-full animate-spin flex-shrink-0" })
+        ] })
+      }
+    ) }),
+    /* @__PURE__ */ e(d.Portal, { children: /* @__PURE__ */ r(
+      d.Content,
+      {
+        className: "w-80 bg-surface-neutral-default border border-stroke-solid-light rounded-2xl overflow-hidden shadow-lg",
+        sideOffset: 8,
+        align: "start",
+        children: [
+          F ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center p-8", children: /* @__PURE__ */ r("div", { className: "flex flex-col items-center gap-3", children: [
+            /* @__PURE__ */ e("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-text-brand-secondary" }),
+            /* @__PURE__ */ e("span", { className: "text-text-neutral-muted text-sm", children: "Loading options..." })
+          ] }) }) : /* @__PURE__ */ e(
+            b,
+            {
+              value: l,
+              onChange: ({ condition: o, value: i }) => g(n, o, i),
+              filterOptions: y
+            }
+          ),
+          (x || !!z) && /* @__PURE__ */ r("div", { className: "flex justify-between gap-2 p-3 border-t border-stroke-solid-medium", children: [
+            /* @__PURE__ */ e(u, { onClick: B, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
+            x && /* @__PURE__ */ e(u, { onClick: I, variant: "filled", shade: "neutral", size: "small", children: `Apply${w !== void 0 ? ` ${w}` : ""}` })
+          ] })
+        ]
+      }
+    ) }),
+    T && /* @__PURE__ */ e(
+      H,
+      {
+        onClose: R,
+        onRevertChanges: D,
+        onApplyChanges: $
+      }
+    )
+  ] }) : (console.warn(
+    `No filter component found for column "${t.filterKey}" with type "${t.type}". Provide a custom filter component or use supported types: "string", "number", "boolean", "checkbox".`
+  ), null);
+};
+export {
+  re as TableFilterColumnButton
+};

package/dist/components/table-filter/table-filter-provider.js

@@ -0,0 +1,32 @@
+import { jsx as i } from "react/jsx-runtime";
+import a from "./table-filter.hook.js";
+import { TableFilterContext as u } from "./table-filter.context.js";
+const c = ({
+  children: r,
+  filterComponents: t = {},
+  filterSchema: e,
+  filter: o
+}) => {
+  const l = a({
+    filterSchema: e,
+    filter: o || {
+      value: [],
+      onChange: () => {
+      },
+      onFilterClick: void 0,
+      loading: !1
+    }
+  });
+  if (!o)
+    return null;
+  const n = {
+    ...l,
+    filterSchema: e,
+    filter: o,
+    filterComponents: t
+  };
+  return /* @__PURE__ */ i(u.Provider, { value: n, children: r });
+};
+export {
+  c as TableFilterProvider
+};

package/dist/components/table-filter/table-filter.context.js

@@ -1,4 +1,13 @@
-import * as t from "react";
-t.createContext(
+import * as e from "react";
+const o = e.createContext(
   void 0
-);
+), r = () => {
+  const t = e.useContext(o);
+  if (t === void 0)
+    throw new Error("useTableFilterContext must be used within a TableFilterProvider");
+  return t;
+};
+export {
+  o as TableFilterContext,
+  r as useTableFilterContext
+};

package/dist/components/table-filter/table-filter.hook.js

@@ -0,0 +1,72 @@
+import i, { useEffect as k } from "react";
+import { removeInvalidFilterOptions as E } from "./table-filter.utils.js";
+const w = ({ filter: r, filterSchema: a }) => {
+  const [v, F] = i.useState(null), [n, u] = i.useState(r.value);
+  k(() => {
+    u((t) => E(t, a));
+  }, [a]);
+  const f = i.useCallback(
+    (t) => {
+      if (F(t), t && r.onFilterClick) {
+        const e = n.filter((l) => Array.isArray(l.value) ? l.value.length > 0 : l.value !== "");
+        r.onFilterClick(e, t);
+      }
+    },
+    [r, n]
+  );
+  i.useEffect(() => {
+    !v && a.length > 0 && F(a[0].filterKey);
+  }, [v, a]);
+  const c = (t) => n.find((e) => e.field === t), p = (t) => {
+    const e = c(t);
+    return e ? Array.isArray(e.value) ? e.value.length > 0 : e.value !== "" : !1;
+  }, A = (t) => r.value.find((e) => e.field === t), C = (t) => {
+    const e = A(t);
+    return e ? Array.isArray(e.value) ? e.value.length > 0 : e.value !== "" : !1;
+  }, g = (t, e, l) => {
+    const d = n.findIndex((s) => s.field === t);
+    let o = [];
+    if (d >= 0)
+      o = n.map(
+        (s, T) => T === d ? {
+          ...s,
+          ...e !== void 0 ? { condition: e } : {},
+          ...l !== void 0 ? { value: l } : {}
+        } : s
+      );
+    else {
+      const s = {
+        field: t,
+        ...e ? { condition: e } : {},
+        value: l || ""
+      };
+      o = [...n, s];
+    }
+    return u(o), o;
+  }, m = () => {
+    u([]);
+  }, y = () => {
+    u(r.value);
+  }, h = (t) => {
+    const e = (t || n).filter((l) => Array.isArray(l.value) ? l.value.length > 0 : l.value !== "");
+    r.onChange(e);
+  }, x = r.value.length > 0;
+  return i.useEffect(() => {
+    u(r.value);
+  }, [r.value]), {
+    selectedColumn: v,
+    setSelectedColumn: f,
+    getFilterForColumn: c,
+    hasFilterForColumn: p,
+    hasAppliedFilterForColumn: C,
+    updateColumnFilter: g,
+    clearAllFilters: m,
+    resetToAppliedFilters: y,
+    applyFilters: h,
+    hasActiveFilters: x,
+    tempFilters: n
+  };
+};
+export {
+  w as default
+};

package/dist/components/table-filter/table-filter.utils.js

@@ -0,0 +1,12 @@
+const l = (t, i) => {
+  const s = i.map((e) => e.filterKey);
+  return t.filter((e) => {
+    const n = i.find((r) => r.filterKey === e.field);
+    return n ? (Array.isArray(e.value) && (e.value = e.value.filter(
+      (r) => Object.entries(n.options || {}).some(([a]) => a === r)
+    )), s.includes(e.field)) : !1;
+  });
+};
+export {
+  l as removeInvalidFilterOptions
+};