@ztwoint/z-ui 0.1.69 → 0.1.70

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

@@ -58,7 +58,7 @@ const w = ["includesAny", "includesAll", "excludes"], B = ({ value: r, onChange:
       {
         data: x,
         itemContent: N,
-        className: "h-full",
+        className: "h-full min-h-60",
         style: { height: "100%" },
         overscan: 5
       }

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

@@ -1,19 +1,19 @@
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import * as y from "react";
+import * as C 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 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 H 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 { 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 F } from "./close-filter-confirm/filter-confirmation-dialog.utils.js";
 const ne = () => {
-  const [N, a] = y.useState(!1), [x, n] = y.useState(!1), {
+  const [N, a] = C.useState(!1), [x, n] = C.useState(!1), {
     selectedColumn: r,
     setSelectedColumn: k,
     getFilterForColumn: w,
@@ -25,10 +25,10 @@ const ne = () => {
     hasActiveFilters: d,
     tempFilters: i,
     filterSchema: c,
-    filter: p,
-    filterComponents: h = {}
+    filter: h,
+    filterComponents: p = {}
   } = I(), P = (e) => {
-    !e && x ? F(i, p.value) ? a(!0) : n(!1) : n(e);
+    !e && x ? F(i, h.value) ? a(!0) : n(!1) : n(e);
   }, g = () => {
     O(), n(!1);
   }, S = () => {
@@ -37,30 +37,30 @@ const ne = () => {
     D(), a(!1), n(!1);
   }, $ = () => {
     a(!1);
-  }, z = J(i, c), v = L(z), R = () => {
+  }, R = J(i, c), v = L(R), z = () => {
     if (!r) return null;
-    const e = c.find((o) => o.filterKey === r), b = {
-      boolean: V,
+    const e = c.find((s) => s.filterKey === r), b = {
+      boolean: H,
       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)
+      number: V,
+      checkbox: q
+    }, y = (e == null ? void 0 : e.type) && (p == null ? void 0 : p[e.type]) || b[(e == null ? void 0 : e.type) ?? "string"];
+    if (!y)
       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 = w(r), B = {
-      condition: (s == null ? void 0 : s.condition) || "",
-      value: (s == null ? void 0 : s.value) || ""
+    const o = w(r), B = {
+      condition: (o == null ? void 0 : o.condition) || "",
+      value: (o == null ? void 0 : o.value) || ""
     };
     return /* @__PURE__ */ t("div", { className: "flex-1 h-full", children: /* @__PURE__ */ t("div", { className: "mb-4 h-full", children: /* @__PURE__ */ t(
-      C,
+      y,
       {
         value: B,
-        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,
+        onChange: ({ condition: s, value: f }) => j(r, s, f),
+        filterOptions: e != null && e.options ? Object.entries(e.options).map(([s, f]) => ({
+          label: s,
+          value: s,
           total: f
         })) : void 0
       },
@@ -76,19 +76,19 @@ const ne = () => {
         size: "small",
         children: [
           "Filter ",
-          d && `(${p.value.length})`
+          d && `(${h.value.length})`
         ]
       }
     ) }),
     /* @__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",
+        className: "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__ */ l("div", { className: "flex h-[422px]", style: { maxHeight: "calc(100vh - 8rem)" }, children: [
+            /* @__PURE__ */ l("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" }) }),
               c.map((e) => /* @__PURE__ */ l(
                 "button",
@@ -97,16 +97,16 @@ const ne = () => {
                   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" })
+                    K(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 ? R() : /* @__PURE__ */ t("div", { className: "flex-1 flex items-center justify-center text-text-neutral-muted", children: "Select a column to configure its filter" }) })
+            /* @__PURE__ */ t("div", { className: "flex-1 flex flex-col", children: r ? z() : /* @__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__ */ t(G, { 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(
@@ -131,7 +131,7 @@ const ne = () => {
         onKeepChanges: S,
         onRevertChanges: T,
         onApplyChanges: g,
-        hasUnsavedChanges: F(i, p.value)
+        hasUnsavedChanges: F(i, h.value)
       }
     )
   ] });

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

@@ -28,19 +28,19 @@ const te = ({ filterName: t }) => {
     d(), s(!1);
   }, j = () => {
     r(!1), s(!1);
-  }, z = () => {
-    O(), r(!1), s(!1);
   }, D = () => {
+    O(), r(!1), s(!1);
+  }, K = () => {
     r(!1);
   }, e = P.find((o) => o.filterKey === t);
   if (!e)
     return console.warn(`Column "${t}" not found in schema`), null;
-  const K = {
+  const R = {
     boolean: V,
     string: I,
     number: q,
     checkbox: E
-  }, F = e.type && (c == null ? void 0 : c[e.type]) || K[e.type ?? "string"];
+  }, F = e.type && (c == null ? void 0 : c[e.type]) || R[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".`
@@ -49,10 +49,10 @@ const te = ({ filterName: t }) => {
     label: o,
     value: o,
     total: i
-  })) : void 0, h = n ? H(n, b) : void 0, R = {
+  })) : void 0, h = n ? H(n, b) : void 0, S = {
     condition: (n == null ? void 0 : n.condition) || "",
     value: (n == null ? void 0 : n.value) || ""
-  }, S = () => {
+  }, z = () => {
     C(t, "", ""), d(), s(!1);
   }, B = () => {
     d(), s(!1);
@@ -73,20 +73,20 @@ const te = ({ filterName: t }) => {
     /* @__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",
+        className: "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,
+              value: S,
               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: z, 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}` : ""}` })
           ] })
         ]
@@ -95,9 +95,9 @@ const te = ({ filterName: t }) => {
     k && /* @__PURE__ */ l(
       J,
       {
-        onClose: D,
+        onClose: K,
         onKeepChanges: j,
-        onRevertChanges: z,
+        onRevertChanges: D,
         onApplyChanges: $,
         hasUnsavedChanges: x(
           t,