@ztwoint/z-ui 0.1.67 → 0.1.69

package/dist/components/table-filter/filters/checkbox.js

@@ -1,29 +1,47 @@
 import { jsx as t, jsxs as s } from "react/jsx-runtime";
-import { useState as i, useEffect as h } from "react";
-import { MagnifierIcon as y } from "../../assets/icons/magnifier-icon.js";
-import C from "../../assets/icons/x.js";
-const k = ["includesAny", "includesAll", "excludes"], j = ({ value: r, onChange: d, filterOptions: c = [] }) => {
-  const [n, o] = i([]), [u, m] = i(""), [x, f] = i(c), p = (e) => {
-    m(e.target.value);
-    const a = c.filter(
-      (l) => l.label.toLowerCase().includes(e.target.value.toLowerCase())
+import { useState as i, useEffect as f } from "react";
+import { Virtuoso as y } from "react-virtuoso";
+import { MagnifierIcon as k } from "../../assets/icons/magnifier-icon.js";
+import S from "../../assets/icons/x.js";
+const w = ["includesAny", "includesAll", "excludes"], B = ({ value: r, onChange: d, filterOptions: n = [] }) => {
+  const [c, o] = i([]), [u, m] = i(""), [x, h] = i(n), p = (l) => {
+    m(l.target.value);
+    const e = n.filter(
+      (a) => a.label.toLowerCase().includes(l.target.value.toLowerCase())
     );
-    f(a);
+    h(e);
   };
-  h(() => {
-    r.condition || d({ condition: k[0] });
-  }, []), h(() => {
+  f(() => {
+    r.condition || d({ condition: w[0] });
+  }, []), f(() => {
     Array.isArray(r.value) ? o(r.value.filter(Boolean)) : o([]);
   }, [r.value]);
-  const v = (e, a) => {
-    let l;
-    a ? l = [...n, e] : l = n.filter((g) => g !== e), o(l), d({ value: l });
-  }, b = () => {
-    m(""), f(c);
-  }, N = (e) => n.includes(e);
-  return c.length === 0 ? /* @__PURE__ */ t("div", { className: "text-text-neutral-muted text-sm", children: "No filter options available for this column" }) : /* @__PURE__ */ s("div", { className: "flex flex-col", children: [
+  const b = (l, e) => {
+    let a;
+    e ? a = [...c, l] : a = c.filter((C) => C !== l), o(a), d({ value: a });
+  }, v = () => {
+    m(""), h(n);
+  }, g = (l) => c.includes(l), N = (l, e) => /* @__PURE__ */ s("div", { className: "flex justify-between items-center py-2 px-3", children: [
+    /* @__PURE__ */ s("label", { className: "flex items-center space-x-2 cursor-pointer", children: [
+      /* @__PURE__ */ t(
+        "input",
+        {
+          type: "checkbox",
+          checked: g(e.value),
+          onChange: (a) => b(e.value, a.target.checked)
+        }
+      ),
+      /* @__PURE__ */ t("span", { className: "text-text-neutral-primary leading-none-medium-sm", children: e.label })
+    ] }),
+    e.total && /* @__PURE__ */ s("span", { className: "text-text-neutral-muted text-sm", children: [
+      "[",
+      e.total,
+      "]"
+    ] })
+  ] });
+  return n.length === 0 ? /* @__PURE__ */ t("div", { className: "text-text-neutral-muted text-sm p-4", children: "No filter options available for this column" }) : /* @__PURE__ */ s("div", { className: "flex flex-col h-full", children: [
     /* @__PURE__ */ s("div", { className: "relative border-b border-stroke-solid-medium", children: [
-      /* @__PURE__ */ t(y, { className: "absolute left-3 top-3.5 text-text-neutral-muted" }),
+      /* @__PURE__ */ t(k, { className: "absolute left-3 top-3.5 text-text-neutral-muted" }),
       /* @__PURE__ */ t(
         "input",
         {
@@ -33,28 +51,20 @@ const k = ["includesAny", "includesAll", "excludes"], j = ({ value: r, onChange:
           className: "border-none outline-none bg-surface-neutral-default text-text-neutral-primary rounded p-3 pl-8 leading-none-medium-sm w-full"
         }
       ),
-      u && /* @__PURE__ */ t("span", { className: "absolute right-3 top-3.5", onClick: b, children: /* @__PURE__ */ t(C, {}) })
+      u && /* @__PURE__ */ t("span", { className: "absolute right-3 top-3.5", onClick: v, children: /* @__PURE__ */ t(S, {}) })
     ] }),
-    /* @__PURE__ */ t("div", { className: "flex flex-col p-3", children: /* @__PURE__ */ t("div", { className: "space-y-5 h-full overflow-y-auto", children: x.map((e) => /* @__PURE__ */ s("div", { className: "flex justify-between items-center", children: [
-      /* @__PURE__ */ s("label", { className: "flex items-center space-x-2 cursor-pointer", children: [
-        /* @__PURE__ */ t(
-          "input",
-          {
-            type: "checkbox",
-            checked: N(e.value),
-            onChange: (a) => v(e.value, a.target.checked)
-          }
-        ),
-        /* @__PURE__ */ t("span", { className: "text-text-neutral-primary leading-none-medium-sm", children: e.label })
-      ] }),
-      e.total && /* @__PURE__ */ s("span", { className: "text-text-neutral-muted text-sm", children: [
-        "[",
-        e.total,
-        "]"
-      ] })
-    ] }, e.value)) }) })
+    /* @__PURE__ */ t("div", { className: "flex-1", children: /* @__PURE__ */ t(
+      y,
+      {
+        data: x,
+        itemContent: N,
+        className: "h-full",
+        style: { height: "100%" },
+        overscan: 5
+      }
+    ) })
   ] });
 };
 export {
-  j as default
+  B as default
 };

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

@@ -1,81 +1,76 @@
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import * as u from "react";
-import { Button as x } from "../button/button.js";
+import * as y from "react";
+import * as m from "@radix-ui/react-popover";
+import { Button as u } from "../button/button.js";
 import { useTableFilterContext as I } from "./table-filter.context.js";
-import P from "./filters/text.js";
-import U from "./filters/boolean.js";
-import V from "./filters/number/number.js";
-import q from "./filters/checkbox.js";
-import E from "../assets/icons/circle-check-filled.js";
-import { SelectedFiltersDisplay as G } from "./selected-filters-display/selected-filters-display.js";
-import { useClickOutside as H } from "../../hooks/useClickOutside.js";
+import U from "./filters/text.js";
+import V from "./filters/boolean.js";
+import q from "./filters/number/number.js";
+import E from "./filters/checkbox.js";
+import G from "../assets/icons/circle-check-filled.js";
+import { SelectedFiltersDisplay as H } from "./selected-filters-display/selected-filters-display.js";
 import { createFilterDisplayItems as J, calculateTotalCount as L } from "./selected-filters-display/selected-filters-display.utils.js";
 import { FilterConfirmationDialog as M } from "./close-filter-confirm/filter-confirmation-dialog.js";
-import { hasUnsavedFilterChanges as C } from "./close-filter-confirm/filter-confirmation-dialog.utils.js";
+import { hasUnsavedFilterChanges as F } from "./close-filter-confirm/filter-confirmation-dialog.utils.js";
 const ne = () => {
-  const [m, a] = u.useState(!1), [F, n] = u.useState(!1), g = u.useRef(null), {
+  const [N, a] = y.useState(!1), [x, n] = y.useState(!1), {
     selectedColumn: r,
-    setSelectedColumn: N,
-    getFilterForColumn: k,
-    hasFilterForColumn: w,
-    updateColumnFilter: K,
-    clearAllFilters: j,
-    resetToAppliedFilters: A,
-    applyFilters: D,
+    setSelectedColumn: k,
+    getFilterForColumn: w,
+    hasFilterForColumn: K,
+    updateColumnFilter: j,
+    clearAllFilters: A,
+    resetToAppliedFilters: D,
+    applyFilters: O,
     hasActiveFilters: d,
     tempFilters: i,
     filterSchema: c,
     filter: p,
-    filterComponents: f = {}
-  } = I();
-  H(g, () => {
-    C(i, p.value) && m ? n(!0) : a(!1);
-  });
-  const v = () => {
-    D(), a(!1);
+    filterComponents: h = {}
+  } = I(), P = (e) => {
+    !e && x ? F(i, p.value) ? a(!0) : n(!1) : n(e);
+  }, g = () => {
+    O(), n(!1);
   }, S = () => {
-    n(!1), a(!1);
-  }, O = () => {
-    A(), n(!1), a(!1);
-  }, R = () => {
-    n(!1);
-  }, T = J(i, c), b = L(T), $ = () => {
+    a(!1), n(!1);
+  }, T = () => {
+    D(), a(!1), n(!1);
+  }, $ = () => {
+    a(!1);
+  }, z = J(i, c), v = L(z), R = () => {
     if (!r) return null;
-    const e = c.find((o) => o.filterKey === r), z = {
-      boolean: U,
-      string: P,
-      number: V,
-      checkbox: q
-    }, y = (e == null ? void 0 : e.type) && (f == null ? void 0 : f[e.type]) || z[(e == null ? void 0 : e.type) ?? "string"];
-    if (!y)
+    const e = c.find((o) => o.filterKey === r), b = {
+      boolean: V,
+      string: U,
+      number: q,
+      checkbox: E
+    }, C = (e == null ? void 0 : e.type) && (h == null ? void 0 : h[e.type]) || b[(e == null ? void 0 : e.type) ?? "string"];
+    if (!C)
       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 s = k(r), B = {
+    const s = w(r), B = {
       condition: (s == null ? void 0 : s.condition) || "",
       value: (s == null ? void 0 : s.value) || ""
     };
-    return /* @__PURE__ */ t("div", { className: "flex-1", children: /* @__PURE__ */ t("div", { className: "mb-4", children: /* @__PURE__ */ t("div", { className: "", children: /* @__PURE__ */ t(
-      y,
+    return /* @__PURE__ */ t("div", { className: "flex-1 h-full", children: /* @__PURE__ */ t("div", { className: "mb-4 h-full", children: /* @__PURE__ */ t(
+      C,
       {
         value: B,
-        onChange: ({ condition: o, value: h }) => K(r, o, h),
-        filterOptions: e != null && e.options ? Object.entries(e.options).map(([o, h]) => ({
+        onChange: ({ condition: o, value: f }) => j(r, o, f),
+        filterOptions: e != null && e.options ? Object.entries(e.options).map(([o, f]) => ({
           label: o,
           value: o,
-          total: h
+          total: f
         })) : void 0
       },
       r
-    ) }) }) });
+    ) }) });
   };
-  return /* @__PURE__ */ l("div", { className: "relative", ref: g, children: [
-    /* @__PURE__ */ l(
-      x,
+  return /* @__PURE__ */ l(m.Root, { open: x, onOpenChange: P, children: [
+    /* @__PURE__ */ t(m.Trigger, { asChild: !0, children: /* @__PURE__ */ l(
+      u,
       {
-        onClick: (e) => {
-          e.stopPropagation(), a(!m);
-        },
         variant: d ? "filled" : "stroke",
         shade: d ? "brand" : "neutral",
         size: "small",
@@ -84,51 +79,59 @@ const ne = () => {
           d && `(${p.value.length})`
         ]
       }
-    ),
-    m && /* @__PURE__ */ l("div", { className: "absolute top-full left-0 mt-2 w-[512px] bg-surface-neutral-default border border-stroke-solid-light rounded-2xl z-10 overflow-hidden shadow-lg", children: [
-      /* @__PURE__ */ l("div", { className: "flex min-h-[442px]", children: [
-        /* @__PURE__ */ l("div", { className: "w-48 border-r border-stroke-solid-light p-2 flex flex-col gap-1.5", children: [
-          /* @__PURE__ */ t("div", { className: "p-2 pb-1", children: /* @__PURE__ */ t("h3", { className: "leading-none-medium-sm text-text-neutral-secondary", children: "Filters" }) }),
-          c.map((e) => /* @__PURE__ */ l(
-            "button",
-            {
-              onClick: () => N(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 ${r === e.filterKey ? "bg-surface-neutral-focused text-text-brand-primary" : "text-text-neutral-primary"}`,
-              children: [
-                /* @__PURE__ */ t("span", { className: "truncate", children: e.title }),
-                w(e.filterKey) && /* @__PURE__ */ t(E, { className: "w-4 h-4 text-text-brand-secondary flex-shrink-0 ml-2" })
-              ]
-            },
-            e.filterKey
-          ))
-        ] }),
-        /* @__PURE__ */ t("div", { className: "flex-1 flex flex-col", children: r ? $() : /* @__PURE__ */ t("div", { className: "flex-1 flex items-center justify-center text-text-neutral-muted", children: "Select a column to configure its filter" }) })
-      ] }),
-      !!b && /* @__PURE__ */ l("div", { className: "flex justify-between items-end p-4 border-t border-stroke-solid-medium min-h-[71px]", children: [
-        /* @__PURE__ */ t(G, { selectedFilters: i, schema: c }),
-        /* @__PURE__ */ l("div", { className: "flex justify-end gap-2", children: [
-          /* @__PURE__ */ t(x, { onClick: j, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
-          /* @__PURE__ */ t(
-            x,
-            {
-              onClick: v,
-              variant: "filled",
-              shade: "neutral",
-              size: "small",
-              children: `Apply ${b || ""}`
-            }
-          )
-        ] })
-      ] })
-    ] }),
-    F && /* @__PURE__ */ t(
+    ) }),
+    /* @__PURE__ */ t(m.Portal, { children: /* @__PURE__ */ l(
+      m.Content,
+      {
+        className: "z-10 w-[512px] bg-surface-neutral-default border border-stroke-solid-light rounded-2xl overflow-hidden shadow-lg",
+        sideOffset: 8,
+        align: "start",
+        children: [
+          /* @__PURE__ */ l("div", { className: "flex h-[442px]", children: [
+            /* @__PURE__ */ l("div", { className: "w-48 border-r border-stroke-solid-light p-2 flex flex-col gap-1.5", children: [
+              /* @__PURE__ */ t("div", { className: "p-2 pb-1", children: /* @__PURE__ */ t("h3", { className: "leading-none-medium-sm text-text-neutral-secondary", children: "Filters" }) }),
+              c.map((e) => /* @__PURE__ */ l(
+                "button",
+                {
+                  onClick: () => k(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 ${r === e.filterKey ? "bg-surface-neutral-focused text-text-brand-primary" : "text-text-neutral-primary"}`,
+                  children: [
+                    /* @__PURE__ */ t("span", { className: "truncate", children: e.title }),
+                    K(e.filterKey) && /* @__PURE__ */ t(G, { className: "w-4 h-4 text-text-brand-secondary flex-shrink-0 ml-2" })
+                  ]
+                },
+                e.filterKey
+              ))
+            ] }),
+            /* @__PURE__ */ t("div", { className: "flex-1 flex flex-col", children: r ? R() : /* @__PURE__ */ t("div", { className: "flex-1 flex items-center justify-center text-text-neutral-muted", children: "Select a column to configure its filter" }) })
+          ] }),
+          !!v && /* @__PURE__ */ l("div", { className: "flex justify-between items-end p-4 border-t border-stroke-solid-medium min-h-[71px]", children: [
+            /* @__PURE__ */ t(H, { selectedFilters: i, schema: c }),
+            /* @__PURE__ */ l("div", { className: "flex justify-end gap-2", children: [
+              /* @__PURE__ */ t(u, { onClick: A, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
+              /* @__PURE__ */ t(
+                u,
+                {
+                  onClick: g,
+                  variant: "filled",
+                  shade: "neutral",
+                  size: "small",
+                  children: `Apply ${v || ""}`
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ) }),
+    N && /* @__PURE__ */ t(
       M,
       {
-        onClose: R,
+        onClose: $,
         onKeepChanges: S,
-        onRevertChanges: O,
-        onApplyChanges: v,
-        hasUnsavedChanges: C(i, p.value)
+        onRevertChanges: T,
+        onApplyChanges: g,
+        hasUnsavedChanges: F(i, p.value)
       }
     )
   ] });

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

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