@ztwoint/z-ui 0.1.66 → 0.1.68

package/dist/components/assets/icons/sitemap.d.ts

@@ -0,0 +1,6 @@
+import { SVGProps } from 'react';
+type IconProps = SVGProps<SVGSVGElement> & {
+    title?: string;
+};
+declare function Sitemap({ fill, width, height, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+export default Sitemap;

package/dist/components/assets/icons/z2data.d.ts

@@ -0,0 +1,6 @@
+import { SVGProps } from 'react';
+type IconProps = SVGProps<SVGSVGElement> & {
+    title?: string;
+};
+declare function Z2Data({ fill, width, height, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+export default Z2Data;

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", 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

@@ -25,13 +25,13 @@ const ne = () => {
     hasActiveFilters: d,
     tempFilters: i,
     filterSchema: c,
-    filter: p,
-    filterComponents: f = {}
+    filter: f,
+    filterComponents: p = {}
   } = I();
   H(g, () => {
-    C(i, p.value) && m ? n(!0) : a(!1);
+    C(i, f.value) && m ? n(!0) : a(!1);
   });
-  const v = () => {
+  const b = () => {
     D(), a(!1);
   }, S = () => {
     n(!1), a(!1);
@@ -39,14 +39,14 @@ const ne = () => {
     A(), n(!1), a(!1);
   }, R = () => {
     n(!1);
-  }, T = J(i, c), b = L(T), $ = () => {
+  }, T = J(i, c), v = L(T), $ = () => {
     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"];
+    }, y = (e == null ? void 0 : e.type) && (p == null ? void 0 : p[e.type]) || z[(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".`
@@ -55,7 +55,7 @@ const ne = () => {
       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(
+    return /* @__PURE__ */ t("div", { className: "flex-1 h-full", children: /* @__PURE__ */ t("div", { className: "mb-4 h-full", children: /* @__PURE__ */ t(
       y,
       {
         value: B,
@@ -67,7 +67,7 @@ const ne = () => {
         })) : void 0
       },
       r
-    ) }) }) });
+    ) }) });
   };
   return /* @__PURE__ */ l("div", { className: "relative", ref: g, children: [
     /* @__PURE__ */ l(
@@ -81,12 +81,12 @@ const ne = () => {
         size: "small",
         children: [
           "Filter ",
-          d && `(${p.value.length})`
+          d && `(${f.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: "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(
@@ -104,18 +104,18 @@ const ne = () => {
         ] }),
         /* @__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: [
+      !!v && /* @__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,
+              onClick: b,
               variant: "filled",
               shade: "neutral",
               size: "small",
-              children: `Apply ${b || ""}`
+              children: `Apply ${v || ""}`
             }
           )
         ] })
@@ -127,8 +127,8 @@ const ne = () => {
         onClose: R,
         onKeepChanges: S,
         onRevertChanges: O,
-        onApplyChanges: v,
-        hasUnsavedChanges: C(i, p.value)
+        onApplyChanges: b,
+        hasUnsavedChanges: C(i, f.value)
       }
     )
   ] });