@ztwoint/z-ui 0.1.88 → 0.1.89

package/dist/components/table/table.js

@@ -1,47 +1,47 @@
 import { jsxs as n, jsx as e } from "react/jsx-runtime";
 import * as S from "react";
-import { DEFAULT_EMPTY_MESSAGE as T, TABLE_CSS_CLASSES as o } from "./table.const.js";
-import { TableHeader as N } from "./components/table-header/table-header.js";
-import { TableRow as v } from "./components/table-row.js";
+import { DEFAULT_EMPTY_MESSAGE as T, TABLE_CSS_CLASSES as l } from "./table.const.js";
+import { TableHeader as w } from "./components/table-header/table-header.js";
+import { TableRow as N } from "./components/table-row.js";
 import { TableMessageState as i } from "./components/table-message-state.js";
-import { TableContext as w } from "./table.context.js";
+import { TableContext as v } from "./table.context.js";
 import { cn as d } from "../../lib/utils.js";
 const j = ({
-  cell: s = { hasBorder: !0 },
+  cell: o = { hasBorder: !0 },
   sort: c,
   className: f,
   stickyHeader: p = !1,
-  dataSourceError: l,
-  ...u
+  dataSourceError: s,
+  ...h
 }) => {
-  const h = S.useContext(w), {
+  const u = S.useContext(v), {
     dataSource: t = [],
     schema: a = [],
     loading: r = !1,
     emptyMessage: b = T,
     customCells: g
-  } = h || u, x = () => l ? /* @__PURE__ */ e(
+  } = u || h, x = () => s ? /* @__PURE__ */ e(
     i,
     {
       colSpan: a.length,
-      message: typeof l == "string" ? l : "Error loading data",
-      className: o.dataErrorState
+      message: typeof s == "string" ? s : "Error loading data",
+      className: l.dataErrorState
     }
   ) : !t || t.length === 0 && !r ? /* @__PURE__ */ e(
     i,
     {
       colSpan: a.length,
       message: b,
-      className: o.emptyState
+      className: l.emptyState
     }
   ) : /* @__PURE__ */ e("tbody", { children: t.map((y, m) => /* @__PURE__ */ e(
-    v,
+    N,
     {
       record: y,
       index: m,
       schema: a,
       customCells: g,
-      cell: s
+      cell: o
     },
     m
   )) });
@@ -49,14 +49,14 @@ const j = ({
     "div",
     {
       className: d(
-        r ? "overflow-y-hidden relative" : "overflow-y-auto",
-        o.bordered[s.hasBorder && !r && t.length > 0 ? "true" : "false"],
+        r ? "overflow-y-hidden relative" : "overflow-y-auto will-change-transform",
+        l.bordered[o.hasBorder && !r && t.length > 0 ? "true" : "false"],
         f
       ),
       children: [
-        /* @__PURE__ */ n("table", { className: d(o.table, "w-full"), children: [
+        /* @__PURE__ */ n("table", { className: d(l.table, "w-full"), children: [
           x(),
-          /* @__PURE__ */ e(N, { schema: a, sort: c, cell: s, stickyHeader: p })
+          /* @__PURE__ */ e(w, { schema: a, sort: c, cell: o, stickyHeader: p })
         ] }),
         r && /* @__PURE__ */ e("div", { className: "absolute top-0 inset-0 w-full h-full bg-white/80 flex items-center justify-center", children: /* @__PURE__ */ n("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" }),

package/dist/components/table-filter/selected-filters-display/index.d.ts

@@ -1,2 +1,3 @@
 export { SelectedFiltersDisplay } from './selected-filters-display';
+export { getAppliedOptions } from './selected-filters-display.utils';
 export type { SelectedFilterDisplayProps, FilterDisplayItem, } from './selected-filters-display.type';

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

@@ -1,26 +1,31 @@
-import { jsxs as e, jsx as t, Fragment as s } from "react/jsx-runtime";
-import * as m from "react";
-const d = ({
-  selectedItems: n,
-  totalCount: l
-}) => /* @__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__ */ t("div", { className: "flex flex-wrap items-center gap-2.5 max-w-md", children: n.map((a, r) => /* @__PURE__ */ e(m.Fragment, { children: [
-    /* @__PURE__ */ t("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: [
-      a.name,
-      " ",
-      a.total !== void 0 && /* @__PURE__ */ e(s, { children: [
-        "[",
-        /* @__PURE__ */ t("span", { className: "text-text-neutral-secondary", children: a.total.toLocaleString() }),
-        "]"
-      ] })
-    ] }) }),
-    r < n.length - 1 && /* @__PURE__ */ t("span", { className: "text-text-neutral-muted", children: "•" })
-  ] }, a.name)) })
-] });
+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 {
-  d as SelectedFiltersDisplay
+  p as SelectedFiltersDisplay
 };

package/dist/components/table-filter/selected-filters-display/selected-filters-display.type.d.ts

@@ -1,9 +1,8 @@
+import { FilterRule, FilterSchema } from '../table-filter.type';
 export interface SelectedFilterDisplayProps {
-    selectedItems: {
-        name: string;
-        total: number;
-    }[];
     totalCount: number;
+    tempFilters: FilterRule[];
+    filterSchema: FilterSchema;
 }
 export interface FilterDisplayItem {
     field: string;

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

@@ -1,3 +1,6 @@
-import { FilterRule, FilterOption } from '../table-filter.type';
-export declare const formatFilterValue: (value: string | string[]) => string;
+import { FilterRule, FilterSchema, FilterOption } from '../table-filter.type';
+export declare const getAppliedOptions: (tempFilters: FilterRule[], filterSchema: FilterSchema) => {
+    name: string;
+    total: number;
+}[];
 export declare const getFilterCount: (filterRule: FilterRule, filterOptions?: FilterOption[]) => number | undefined;

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

@@ -1,15 +1,23 @@
-const r = (e, t) => {
-  if (!t || t.length === 0) return e.value !== "" ? 1 : 0;
+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 u = t.filter(
-      (n) => e.value.includes(n.value)
-    ).reduce((n, o) => n + (o.total || 0), 0);
-    return u > 0 ? u : void 0;
+    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 a = t.find((u) => u.value === e.value);
-    return a == null ? void 0 : a.total;
+    const r = n.find((t) => t.value === e.value);
+    return r == null ? void 0 : r.total;
   }
 };
 export {
-  r as getFilterCount
+  u as getAppliedOptions,
+  l as getFilterCount
 };

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

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