@ztwoint/z-ui 0.1.33 → 0.1.34

package/dist/components/table/components/table-cell.js

@@ -1,42 +1,43 @@
 import { jsx as l } from "react/jsx-runtime";
 import { TABLE_CSS_CLASSES as r } from "../table.const.js";
-import { TextCell as p } from "./cell/text-cell.js";
+import { TextCell as m } from "./cell/text-cell.js";
 import { NumberCell as h } from "./cell/number-cell.js";
-import { BooleanCell as S } from "./cell/boolean-cell.js";
+import { BooleanCell as b } from "./cell/boolean-cell.js";
 import "react";
-import { cn as b } from "../../../lib/utils.js";
+import { cn as S } from "../../../lib/utils.js";
 const E = ({
-  value: o,
-  cellType: m,
-  cellRenderer: n,
-  record: f,
-  index: i,
+  value: t,
+  cellType: n,
+  cellRenderer: f,
+  record: i,
+  index: C,
   customCells: e,
-  cell: C
+  cell: s
 }) => {
-  const c = {
-    text: p,
+  const p = {
+    text: m,
     number: h,
-    boolean: S
-  }, s = e == null ? void 0 : e[m];
-  let t;
-  if (n)
-    t = n({ value: o, record: f, index: i });
-  else if (s)
-    t = /* @__PURE__ */ l(s, { value: o, record: f, index: i });
+    boolean: b,
+    checkbox: m
+  }, a = e == null ? void 0 : e[n];
+  let o;
+  if (f)
+    o = f({ value: t, record: i, index: C });
+  else if (a)
+    o = /* @__PURE__ */ l(a, { value: t, record: i, index: C });
   else {
-    const a = c[m] ?? p;
-    t = /* @__PURE__ */ l(a, { value: o });
+    const c = p[n] ?? m;
+    o = /* @__PURE__ */ l(c, { value: t });
   }
   return /* @__PURE__ */ l(
     "td",
     {
-      className: b(
+      className: S(
         r.cell.default,
-        r.cell.cellHeight[C.cellHeight],
-        r.cell.hasBorder[C.hasBorder ? "true" : "false"]
+        r.cell.cellHeight[s.cellHeight],
+        r.cell.hasBorder[s.hasBorder ? "true" : "false"]
       ),
-      children: t
+      children: o
     }
   );
 };

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

@@ -1,31 +1,63 @@
-import { jsxs as a, Fragment as n, jsx as t } from "react/jsx-runtime";
-import { useEffect as u } from "react";
-const o = ["equals", "notEqual"], s = ({ value: r, onChange: l }) => (u(() => {
-  r.condition || l({ condition: o[0] });
-}, []), /* @__PURE__ */ a(n, { children: [
-  /* @__PURE__ */ t(
-    "select",
-    {
-      value: r.condition,
-      onChange: (e) => l({ condition: e.target.value }),
-      className: "border border-stroke-solid-medium bg-surface-neutral-default text-text-neutral-primary rounded px-2 py-1 text-sm",
-      children: o.map((e) => /* @__PURE__ */ t("option", { value: e, children: e }, e))
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
+import { useEffect as i } from "react";
+const c = ["equals", "notEqual"], m = ({ value: r, onChange: l }) => {
+  i(() => {
+    r.condition || l({ condition: c[0] });
+  }, []);
+  const s = (e, u) => {
+    l(u ? { value: e } : { value: "" });
+  }, n = (e) => {
+    switch (e) {
+      case "equals":
+        return "Equals";
+      case "notEqual":
+        return "Not equal to";
+      default:
+        return e;
     }
-  ),
-  /* @__PURE__ */ a(
-    "select",
-    {
-      value: r.value,
-      onChange: (e) => l({ value: e.target.value }),
-      className: "border border-stroke-solid-medium bg-surface-neutral-default text-text-neutral-primary rounded px-2 py-1 text-sm flex-1",
-      children: [
-        /* @__PURE__ */ t("option", { value: "", children: "Select value" }),
-        /* @__PURE__ */ t("option", { value: "true", children: "True" }),
-        /* @__PURE__ */ t("option", { value: "false", children: "False" })
-      ]
-    }
-  )
-] }));
+  };
+  return /* @__PURE__ */ t("div", { className: "flex flex-col", children: /* @__PURE__ */ a("div", { className: "flex flex-col gap-2 p-3", children: [
+    /* @__PURE__ */ a("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ a("label", { className: "flex items-center space-x-2 cursor-pointer", children: [
+        /* @__PURE__ */ t(
+          "input",
+          {
+            type: "checkbox",
+            checked: r.value === "true",
+            onChange: (e) => s("true", e.target.checked),
+            className: "rounded border-stroke-solid-medium text-text-neutral-primary focus:ring-2 focus:ring-blue-500"
+          }
+        ),
+        /* @__PURE__ */ t("span", { className: "text-text-neutral-primary text-sm", children: "True" })
+      ] }),
+      /* @__PURE__ */ a("label", { className: "flex items-center space-x-2 cursor-pointer", children: [
+        /* @__PURE__ */ t(
+          "input",
+          {
+            type: "checkbox",
+            checked: r.value === "false",
+            onChange: (e) => s("false", e.target.checked),
+            className: "rounded border-stroke-solid-medium text-text-neutral-primary focus:ring-2 focus:ring-blue-500"
+          }
+        ),
+        /* @__PURE__ */ t("span", { className: "text-text-neutral-primary text-sm", children: "False" })
+      ] })
+    ] }),
+    /* @__PURE__ */ t(
+      "select",
+      {
+        value: r.condition,
+        onChange: (e) => l({ condition: e.target.value }),
+        className: "border border-stroke-solid-medium bg-surface-neutral-default text-text-neutral-primary rounded px-2 py-1 text-sm mb-3",
+        children: c.map((e) => /* @__PURE__ */ t("option", { value: e, children: n(e) }, e))
+      }
+    ),
+    r.value && /* @__PURE__ */ a("div", { className: "mt-3 p-2 bg-surface-neutral-muted rounded text-sm", children: [
+      /* @__PURE__ */ t("div", { className: "text-text-neutral-muted mb-1", children: "Selected:" }),
+      /* @__PURE__ */ t("div", { className: "text-text-neutral-primary", children: r.value === "true" ? "True" : "False" })
+    ] })
+  ] }) });
+};
 export {
-  s as default
+  m as default
 };

package/dist/components/table/components/table-filter/filters/checkbox.d.ts

@@ -0,0 +1,3 @@
+import { FilterComponentType } from '../table-filter.type';
+declare const CheckboxFilter: FilterComponentType;
+export default CheckboxFilter;

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

@@ -0,0 +1,76 @@
+import { jsx as t, jsxs as r } from "react/jsx-runtime";
+import { useState as o, useEffect as f } from "react";
+import { MagnifierIcon as k } from "../../../../assets/icons/magnifier-icon.js";
+import C from "../../../../assets/icons/x.js";
+const h = ["includesAny", "includesAll", "excludes"], j = ({ value: s, onChange: d, filterOptions: c = [] }) => {
+  const [n, u] = o([]), [i, m] = o(""), [p, x] = o(c), b = (e) => {
+    m(e.target.value);
+    const l = c.filter(
+      (a) => a.label.toLowerCase().includes(e.target.value.toLowerCase())
+    );
+    x(l);
+  };
+  f(() => {
+    s.condition || d({ condition: h[0] });
+  }, []), f(() => {
+    Array.isArray(s.value) ? u(s.value.filter(Boolean)) : u([]);
+  }, [s.value]);
+  const v = (e, l) => {
+    let a;
+    l ? a = [...n, e] : a = n.filter((y) => y !== e), u(a), d({ value: a });
+  }, g = () => {
+    m(""), x(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__ */ r("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ r("div", { className: "relative border-b border-stroke-solid-medium", children: [
+      /* @__PURE__ */ t(k, { className: "absolute left-3 top-3.5 text-text-neutral-muted" }),
+      /* @__PURE__ */ t(
+        "input",
+        {
+          placeholder: "Search options",
+          value: i,
+          onChange: b,
+          className: "border-none outline-none bg-surface-neutral-default text-text-neutral-primary rounded p-3 pl-10 text-sm w-full"
+        }
+      ),
+      i && /* @__PURE__ */ t("span", { className: "absolute right-3 top-3.5", onClick: g, children: /* @__PURE__ */ t(C, {}) })
+    ] }),
+    /* @__PURE__ */ r("div", { className: "flex flex-col gap-2 p-3", children: [
+      /* @__PURE__ */ t(
+        "select",
+        {
+          value: s.condition,
+          onChange: (e) => d({ condition: e.target.value }),
+          className: "border border-stroke-solid-medium bg-surface-neutral-default text-text-neutral-primary rounded px-2 py-1 text-sm mb-3",
+          children: h.map((e) => /* @__PURE__ */ r("option", { value: e, children: [
+            e === "includesAny" && "Includes any of",
+            e === "includesAll" && "Includes all of",
+            e === "excludes" && "Excludes"
+          ] }, e))
+        }
+      ),
+      /* @__PURE__ */ t("div", { className: "space-y-2 max-h-48 overflow-y-auto", children: p.map((e) => /* @__PURE__ */ r("label", { className: "flex items-center space-x-2 cursor-pointer", children: [
+        /* @__PURE__ */ t(
+          "input",
+          {
+            type: "checkbox",
+            checked: N(e.value),
+            onChange: (l) => v(e.value, l.target.checked),
+            className: "rounded border-stroke-solid-medium text-text-neutral-primary focus:ring-2 focus:ring-blue-500"
+          }
+        ),
+        /* @__PURE__ */ t("span", { className: "text-text-neutral-primary text-sm", children: e.label })
+      ] }, e.value)) }),
+      n.length > 0 && /* @__PURE__ */ r("div", { className: "mt-3 p-2 bg-surface-neutral-muted rounded text-sm", children: [
+        /* @__PURE__ */ t("div", { className: "text-text-neutral-muted mb-1", children: "Selected:" }),
+        /* @__PURE__ */ t("div", { className: "text-text-neutral-primary", children: n.map((e) => {
+          const l = c.find((a) => a.value === e);
+          return (l == null ? void 0 : l.label) || e;
+        }).join(", ") })
+      ] })
+    ] })
+  ] });
+};
+export {
+  j as default
+};

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

@@ -1,3 +1,4 @@
 export * from './text';
 export * from './boolean';
 export * from './number';
+export * from './checkbox';

package/dist/components/table/components/table-filter/filters/number/filter-input-field.d.ts

@@ -0,0 +1,11 @@
+interface FilterInputFieldProps {
+    label: string;
+    operator: string;
+    value: string;
+    onChange: (value: string) => void;
+    onReset: () => void;
+    disabled: boolean;
+    placeholder?: string;
+}
+export declare const FilterInputField: React.FC<FilterInputFieldProps>;
+export {};

package/dist/components/table/components/table-filter/filters/number/filter-input-field.js

@@ -0,0 +1,38 @@
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import i from "../../../../../assets/icons/x.js";
+const d = ({
+  label: l,
+  operator: n,
+  value: e,
+  onChange: o,
+  onReset: s,
+  disabled: r,
+  placeholder: m = "0.00"
+}) => /* @__PURE__ */ a("div", { className: "flex flex-col gap-2", children: [
+  /* @__PURE__ */ t("label", { className: "text-sm font-medium text-text-neutral-primary", children: l }),
+  /* @__PURE__ */ a("div", { className: "relative", children: [
+    /* @__PURE__ */ t("span", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-text-neutral-muted", children: n }),
+    /* @__PURE__ */ t(
+      "input",
+      {
+        type: "number",
+        value: e,
+        onChange: (u) => o(u.target.value),
+        placeholder: m,
+        disabled: r,
+        className: `border border-stroke-solid-medium bg-surface-neutral-default text-text-neutral-primary placeholder:text-text-neutral-muted rounded px-2 py-2 pl-10 pr-8 text-sm w-full ${r ? "opacity-50 cursor-not-allowed" : ""}`
+      }
+    ),
+    e && /* @__PURE__ */ t(
+      "button",
+      {
+        onClick: s,
+        className: "absolute right-2 top-1/2 transform -translate-y-1/2 text-text-neutral-muted hover:text-text-neutral-primary",
+        children: /* @__PURE__ */ t(i, {})
+      }
+    )
+  ] })
+] });
+export {
+  d as FilterInputField
+};

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

@@ -0,0 +1 @@
+export { default } from './number';

package/dist/components/table/components/table-filter/filters/{number.d.ts → number/number.d.ts}

@@ -1,3 +1,3 @@
-import { FilterComponentType } from '../table-filter.type';
+import { FilterComponentType } from '../../table-filter.type';
 declare const NumberFilter: FilterComponentType;
 export default NumberFilter;

package/dist/components/table/components/table-filter/filters/number/number.hook.d.ts

@@ -0,0 +1,23 @@
+interface UseNumberFilterProps {
+    value: {
+        condition: string;
+        value: string;
+    };
+    onChange: (update: {
+        condition?: string;
+        value?: string;
+    }) => void;
+}
+export declare const useNumberFilter: ({ value, onChange }: UseNumberFilterProps) => {
+    specificAmount: string;
+    atLeast: string;
+    noMoreThan: string;
+    activeField: string | null;
+    handleSpecificAmountChange: (newValue: string) => void;
+    handleAtLeastChange: (newValue: string) => void;
+    handleNoMoreThanChange: (newValue: string) => void;
+    resetSpecificAmount: () => void;
+    resetAtLeast: () => void;
+    resetNoMoreThan: () => void;
+};
+export {};

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

@@ -0,0 +1,33 @@
+import { useState as s, useEffect as l } from "react";
+const T = ({ value: t, onChange: i }) => {
+  const [r, o] = s(""), [d, n] = s(""), [a, c] = s(""), f = r ? "specific" : d ? "atLeast" : a ? "noMoreThan" : null;
+  return l(() => {
+    t.condition === "=" && t.value ? (o(t.value), n(""), c("")) : t.condition === ">" && t.value ? (n(t.value), o(""), c("")) : t.condition === "<" && t.value && (c(t.value), o(""), n(""));
+  }, [t.condition, t.value]), {
+    specificAmount: r,
+    atLeast: d,
+    noMoreThan: a,
+    activeField: f,
+    handleSpecificAmountChange: (e) => {
+      o(e), e ? (n(""), c(""), i({ condition: "=", value: e })) : i({ condition: "", value: "" });
+    },
+    handleAtLeastChange: (e) => {
+      n(e), e ? (o(""), c(""), i({ condition: ">", value: e })) : i({ condition: "", value: "" });
+    },
+    handleNoMoreThanChange: (e) => {
+      c(e), e ? (o(""), n(""), i({ condition: "<", value: e })) : i({ condition: "", value: "" });
+    },
+    resetSpecificAmount: () => {
+      o(""), i({ condition: "", value: "" });
+    },
+    resetAtLeast: () => {
+      n(""), i({ condition: "", value: "" });
+    },
+    resetNoMoreThan: () => {
+      c(""), i({ condition: "", value: "" });
+    }
+  };
+};
+export {
+  T as useNumberFilter
+};

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

@@ -0,0 +1,55 @@
+import { jsxs as m, jsx as a } from "react/jsx-runtime";
+import { useNumberFilter as f } from "./number.hook.js";
+import { FilterInputField as t } from "./filter-input-field.js";
+const C = ({ value: o, onChange: l }) => {
+  const {
+    specificAmount: n,
+    atLeast: r,
+    noMoreThan: s,
+    activeField: e,
+    handleSpecificAmountChange: i,
+    handleAtLeastChange: c,
+    handleNoMoreThanChange: h,
+    resetSpecificAmount: p,
+    resetAtLeast: u,
+    resetNoMoreThan: d
+  } = f({ value: o, onChange: l });
+  return /* @__PURE__ */ m("div", { className: "flex flex-col gap-4 p-4", children: [
+    /* @__PURE__ */ a(
+      t,
+      {
+        label: "Specific",
+        operator: "=",
+        value: n,
+        onChange: i,
+        onReset: p,
+        disabled: e !== null && e !== "specific"
+      }
+    ),
+    /* @__PURE__ */ a(
+      t,
+      {
+        label: "At least...",
+        operator: "≥",
+        value: r,
+        onChange: c,
+        onReset: u,
+        disabled: e !== null && e !== "atLeast"
+      }
+    ),
+    /* @__PURE__ */ a(
+      t,
+      {
+        label: "No more than...",
+        operator: "≤",
+        value: s,
+        onChange: h,
+        onReset: d,
+        disabled: e !== null && e !== "noMoreThan"
+      }
+    )
+  ] });
+};
+export {
+  C as default
+};

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

@@ -1,28 +1,51 @@
-import { jsxs as o, Fragment as u, jsx as a } from "react/jsx-runtime";
-import { useEffect as n } from "react";
-const l = ["contains", "notEqual", "equals"], i = ({ value: t, onChange: r }) => (n(() => {
-  t.condition || r({ condition: l[0] });
-}, []), /* @__PURE__ */ o(u, { children: [
-  /* @__PURE__ */ a(
-    "select",
-    {
-      value: t.condition,
-      onChange: (e) => r({ condition: e.target.value }),
-      className: "border border-stroke-solid-medium bg-surface-neutral-default text-text-neutral-primary rounded px-2 py-1 text-sm",
-      children: l.map((e) => /* @__PURE__ */ a("option", { value: e, children: e }, e))
-    }
-  ),
-  /* @__PURE__ */ a(
-    "input",
-    {
-      type: "text",
-      value: t.value,
-      onChange: (e) => r({ value: e.target.value }),
-      placeholder: "Value",
-      className: "border border-stroke-solid-medium bg-surface-neutral-default text-text-neutral-primary placeholder:text-text-neutral-muted rounded px-2 py-1 text-sm flex-1"
-    }
-  )
-] }));
+import { jsxs as r, jsx as l } from "react/jsx-runtime";
+import { useEffect as s } from "react";
+import u from "../../../../assets/icons/x.js";
+import { MagnifierIcon as c } from "../../../../assets/icons/magnifier-icon.js";
+const o = [
+  { label: "Contains", value: "contains" },
+  { label: "Does not equal", value: "notEqual" },
+  { label: "Equals", value: "equals" }
+], f = ({ value: t, onChange: a }) => {
+  var n;
+  const i = () => {
+    a({ value: "" });
+  };
+  return s(() => {
+    t.condition || a({ condition: o[0].value });
+  }, []), /* @__PURE__ */ r("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ r("div", { className: "relative border-b border-stroke-solid-medium", children: [
+      /* @__PURE__ */ l(c, { className: "absolute left-3 top-3.5 text-text-neutral-muted" }),
+      /* @__PURE__ */ l(
+        "input",
+        {
+          placeholder: "Search options",
+          value: t.value,
+          onChange: (e) => a({ value: e.target.value }),
+          className: "border-none outline-none bg-surface-neutral-default text-text-neutral-primary rounded p-3 pl-10 text-sm w-full"
+        }
+      ),
+      t.value && /* @__PURE__ */ l("span", { className: "absolute right-3 top-3.5", onClick: i, children: /* @__PURE__ */ l(u, {}) })
+    ] }),
+    /* @__PURE__ */ r("div", { className: "flex flex-col gap-2 p-3", children: [
+      /* @__PURE__ */ l(
+        "select",
+        {
+          value: t.condition,
+          onChange: (e) => a({ condition: e.target.value }),
+          className: "border border-stroke-solid-medium bg-surface-neutral-default text-text-neutral-primary rounded px-2 py-1 text-sm",
+          children: o.map((e) => /* @__PURE__ */ l("option", { value: e.value, children: e.label }, e.value))
+        }
+      ),
+      t.value && /* @__PURE__ */ r("div", { className: "text-text-neutral-primary text-sm text-center", children: [
+        (n = o.find((e) => e.value === t.condition)) == null ? void 0 : n.label,
+        ":",
+        " ",
+        t.value
+      ] })
+    ] })
+  ] });
+};
 export {
-  i as default
+  f as default
 };

package/dist/components/table/components/table-filter/table-filter.hook.d.ts

@@ -3,9 +3,12 @@ import { TableFilterProps } from './table-filter.type';
 import { FilterRule } from '../../table.type';
 declare const useTableFilter: ({ filter, schema }: TableFilterProps) => {
     isOpen: boolean;
-    addFilterRule: () => void;
-    updateFilterRule: (index: number, updates: Partial<FilterRule>) => void;
-    removeFilterRule: (index: number) => void;
+    selectedColumn: string | null;
+    setSelectedColumn: React.Dispatch<React.SetStateAction<string | null>>;
+    getFilterForColumn: (columnKey: string) => FilterRule | undefined;
+    hasFilterForColumn: (columnKey: string) => boolean;
+    updateColumnFilter: (columnKey: string, condition?: string, value?: string | string[]) => void;
+    clearAllFilters: () => void;
     applyFilters: () => void;
     hasActiveFilters: boolean;
     setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;

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

@@ -1,34 +1,54 @@
-import u from "react";
-const h = ({ filter: t, schema: r }) => {
-  const [p, o] = u.useState(!1), [s, a] = u.useState(t.value), c = r.filter((e) => e.filterable !== !1), d = () => {
-    var l;
-    const e = {
-      field: ((l = c[0]) == null ? void 0 : l.key) || "",
-      value: ""
-    };
-    a([...s, e]);
-  }, f = (e, l) => {
-    const n = s.map((i, R) => R === e ? { ...i, ...l } : i);
-    a(n);
-  }, F = (e) => {
-    a(s.filter((l, n) => n !== e));
-  }, v = () => {
-    t.onChange(s), o(!1);
-  }, m = t.value.length > 0;
-  return u.useEffect(() => {
-    a(t.value);
-  }, [t.value]), {
-    isOpen: p,
-    addFilterRule: d,
-    updateFilterRule: f,
-    removeFilterRule: F,
-    applyFilters: v,
-    hasActiveFilters: m,
+import a from "react";
+const b = ({ filter: s, schema: p }) => {
+  const [m, o] = a.useState(!1), [i, c] = a.useState(null), [l, n] = a.useState(s.value), u = p.filter((t) => t.filterable !== !1);
+  a.useEffect(() => {
+    !i && u.length > 0 && c(u[0].key);
+  }, [i, u]);
+  const d = (t) => l.find((e) => e.field === t), g = (t) => {
+    const e = d(t);
+    return e ? Array.isArray(e.value) ? e.value.length > 0 : e.value !== "" : !1;
+  }, h = (t, e, f) => {
+    const F = l.findIndex((r) => r.field === t);
+    if (F >= 0) {
+      const r = l.map(
+        (v, x) => x === F ? {
+          ...v,
+          ...e !== void 0 ? { condition: e } : {},
+          ...f !== void 0 ? { value: f } : {}
+        } : v
+      );
+      n(r);
+    } else {
+      const r = {
+        field: t,
+        ...e ? { condition: e } : {},
+        value: f || ""
+      };
+      n([...l, r]);
+    }
+  }, A = () => {
+    n([]);
+  }, C = () => {
+    const t = l.filter((e) => Array.isArray(e.value) ? e.value.length > 0 : e.value !== "");
+    s.onChange(t), o(!1);
+  }, y = s.value.length > 0;
+  return a.useEffect(() => {
+    n(s.value);
+  }, [s.value]), {
+    isOpen: m,
+    selectedColumn: i,
+    setSelectedColumn: c,
+    getFilterForColumn: d,
+    hasFilterForColumn: g,
+    updateColumnFilter: h,
+    clearAllFilters: A,
+    applyFilters: C,
+    hasActiveFilters: y,
     setIsOpen: o,
-    tempFilters: s,
-    filterableFields: c
+    tempFilters: l,
+    filterableFields: u
   };
 };
 export {
-  h as default
+  b as default
 };