@ztwoint/z-ui 0.1.87 → 0.1.88

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

@@ -1,124 +1,141 @@
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import * as F from "react";
-import * as d from "@radix-ui/react-popover";
-import { Button as x } from "../button/button.js";
-import { useTableFilterContext as H } from "./table-filter.context.js";
-import L 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 { createFilterDisplayItems as J, calculateTotalCount as M } from "./selected-filters-display/selected-filters-display.utils.js";
-import { FilterConfirmationDialog as Q } from "./close-filter-confirm/filter-confirmation-dialog.js";
-import { hasUnsavedFilterChanges as N } from "./close-filter-confirm/filter-confirmation-dialog.utils.js";
-const ne = () => {
-  const [w, a] = F.useState(!1), [g, n] = F.useState(!1), {
-    selectedColumn: r,
-    setSelectedColumn: k,
-    getFilterForColumn: K,
-    hasFilterForColumn: S,
-    updateColumnFilter: j,
-    clearAllFilters: A,
-    resetToAppliedFilters: D,
-    applyFilters: O,
-    hasActiveFilters: h,
-    tempFilters: i,
-    filterSchema: c,
-    filter: p,
-    filterComponents: f = {}
-  } = H(), P = (e) => {
-    !e && g ? N(i, p.value) ? a(!0) : n(!1) : n(e);
-  }, v = () => {
-    O(), a(!1), n(!1);
-  }, T = () => {
-    a(!1), n(!1);
-  }, $ = () => {
-    D(), a(!1), n(!1);
-  }, R = () => {
-    a(!1);
-  }, b = N(i, p.value), z = J(i, c), m = M(z), B = () => {
-    if (!r) return null;
-    const e = c.find((o) => o.filterKey === r), y = {
-      boolean: U,
-      string: L,
-      number: V,
-      checkbox: q
-    }, C = (e == null ? void 0 : e.type) && (f == null ? void 0 : f[e.type]) || y[(e == null ? void 0 : e.type) ?? "string"];
-    if (!C)
+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 { 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);
+  }, 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)
       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), I = {
-      condition: (s == null ? void 0 : s.condition) || "",
-      value: (s == null ? void 0 : s.value) || ""
+    const q = {
+      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(
-      C,
+      S,
       {
-        value: I,
-        onChange: ({ condition: o, value: u }) => j(r, o, u),
-        filterOptions: e != null && e.options ? Object.entries(e.options).map(([o, u]) => ({
+        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: u
+          total: x
         })) : void 0
       },
-      r
+      a
     ) }) });
-  };
-  return /* @__PURE__ */ l(d.Root, { open: g, onOpenChange: P, children: [
-    /* @__PURE__ */ t(d.Trigger, { asChild: !0, children: /* @__PURE__ */ l(
-      x,
+  }, 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(
+    (e) => {
+      var r;
+      return e.filterKey == ((r = n.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(
+      y,
       {
-        variant: h ? "filled" : "stroke",
-        shade: h ? "brand" : "neutral",
+        variant: p ? "filled" : "stroke",
+        shade: p ? "brand" : "neutral",
         size: "small",
         children: [
           "Filters ",
-          h && `(${p.value.length})`
+          p && `(${m.value.length})`
         ]
       }
     ) }),
-    /* @__PURE__ */ t(d.Portal, { children: /* @__PURE__ */ l(
-      d.Content,
+    /* @__PURE__ */ t(f.Portal, { children: /* @__PURE__ */ s(
+      f.Content,
       {
         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-[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__ */ 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" }) }),
-              c.map((e) => /* @__PURE__ */ l(
+              u.map((e) => /* @__PURE__ */ s(
                 "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"}`,
+                  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"}`,
                   children: [
                     /* @__PURE__ */ t("span", { className: "truncate", children: e.title }),
-                    S(e.filterKey) && /* @__PURE__ */ t(E, { className: "w-4 h-4 text-text-brand-secondary flex-shrink-0 ml-2" })
+                    R(e.filterKey) && /* @__PURE__ */ t(W, { 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 ? B() : /* @__PURE__ */ t("div", { className: "flex-1 flex items-center justify-center text-text-neutral-muted", children: "Select a column to configure its filter" }) })
+            /* @__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: [
+                /* @__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..." })
+              ] }) })
+            ] })
           ] }),
-          (!!m || b) && /* @__PURE__ */ l("div", { className: "flex justify-between items-end p-4 border-t border-stroke-solid-medium min-h-[73px]", children: [
-            /* @__PURE__ */ t(G, { selectedFilters: i, schema: c }),
-            /* @__PURE__ */ l("div", { className: "flex justify-end gap-2", children: [
-              !!m && /* @__PURE__ */ t(x, { onClick: A, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
+          (!!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" }),
+            /* @__PURE__ */ s("div", { className: "flex justify-end gap-2", children: [
+              !!i && /* @__PURE__ */ t(y, { onClick: $, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
               /* @__PURE__ */ t(
-                x,
+                y,
                 {
-                  onClick: v,
+                  onClick: F,
                   variant: "filled",
                   shade: "neutral",
                   size: "small",
                   className: "min-w-20",
-                  disabled: !b,
-                  children: `Apply ${m ? m.toLocaleString() : ""}`
+                  disabled: !w,
+                  children: `Apply ${i ? i.toLocaleString() : ""}`
                 }
               )
             ] })
@@ -126,17 +143,16 @@ const ne = () => {
         ]
       }
     ) }),
-    w && /* @__PURE__ */ t(
-      Q,
+    O && /* @__PURE__ */ t(
+      Y,
       {
-        onClose: R,
-        onKeepChanges: T,
-        onRevertChanges: $,
-        onApplyChanges: v
+        onClose: V,
+        onRevertChanges: I,
+        onApplyChanges: F
       }
     )
   ] });
 };
 export {
-  ne as TableFilterButton
+  ce as TableFilterButton
 };

package/dist/components/table-filter/table-filter-column-button.d.ts

@@ -1,3 +1,3 @@
+import { default as React } from 'react';
 import { TableFilterColumnButtonProps } from './table-filter-column-button.type';
-import * as React from 'react';
 export declare const TableFilterColumnButton: React.FC<TableFilterColumnButtonProps>;

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

@@ -1,106 +1,107 @@
-import { jsxs as a, jsx as l } from "react/jsx-runtime";
-import * as x from "react";
-import * as p from "@radix-ui/react-popover";
-import { Button as d } from "../button/button.js";
-import { useTableFilterContext as U } from "./table-filter.context.js";
-import q from "./filters/text.js";
-import E from "./filters/boolean.js";
-import G from "./filters/number/number.js";
-import H from "./filters/checkbox.js";
-import J from "../assets/icons/circle-check-filled.js";
-import { getFilterCount as L } from "./selected-filters-display/selected-filters-display.utils.js";
-import { FilterConfirmationDialog as M } from "./close-filter-confirm/filter-confirmation-dialog.js";
-import { hasUnsavedFilterChangesForColumn as w } from "./close-filter-confirm/filter-confirmation-dialog.utils.js";
-const ne = ({ filterName: t }) => {
-  const [k, s] = x.useState(!1), [f, r] = x.useState(!1), {
-    getFilterForColumn: A,
-    hasAppliedFilterForColumn: O,
-    updateColumnFilter: u,
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import k, { useMemo as K } from "react";
+import * as d from "@radix-ui/react-popover";
+import { Button as f } from "../button/button.js";
+import { useTableFilterContext as L } from "./table-filter.context.js";
+import _ from "./filters/text.js";
+import M from "./filters/boolean.js";
+import U from "./filters/number/number.js";
+import q from "./filters/checkbox.js";
+import E from "../assets/icons/circle-check-filled.js";
+import { getFilterCount as G } from "./selected-filters-display/selected-filters-display.utils.js";
+import { FilterConfirmationDialog as H } from "./close-filter-confirm/filter-confirmation-dialog.js";
+import { hasUnsavedFilterChangesForColumn as A } from "./close-filter-confirm/filter-confirmation-dialog.utils.js";
+const re = ({ filterName: t }) => {
+  const [O, i] = k.useState(!1), [u, r] = k.useState(!1), {
+    getFilterForColumn: C,
+    hasAppliedFilterForColumn: P,
+    updateColumnFilter: g,
     applyFilters: c,
-    resetToAppliedFilters: P,
-    filterSchema: T,
+    resetToAppliedFilters: T,
+    filterSchema: j,
     filterComponents: m = {},
-    tempFilters: C,
-    filter: g
-  } = U(), $ = (e) => {
-    !e && f ? w(t, C, g.value) ? s(!0) : r(!1) : r(e);
-  }, j = () => {
-    c(), s(!1), r(!1);
+    tempFilters: v,
+    filter: p
+  } = L(), $ = (o) => {
+    !o && u ? A(t, v, p.value) ? i(!0) : r(!1) : r(o);
   }, D = () => {
-    s(!1), r(!1);
-  }, K = () => {
-    P(), s(!1), r(!1);
+    c(), i(!1), r(!1);
   }, R = () => {
-    s(!1);
-  }, F = w(t, C, g.value), o = T.find((e) => e.filterKey === t);
-  if (!o)
+    T(), i(!1), r(!1);
+  }, S = () => {
+    i(!1);
+  }, b = A(t, v, p.value), n = j.find((o) => o.filterKey === t), l = K(
+    () => C(t),
+    [t, C]
+  );
+  if (!n)
     return console.warn(`Column "${t}" not found in schema`), null;
-  const S = {
-    boolean: E,
-    string: q,
-    number: G,
-    checkbox: H
-  }, v = o.type && (m == null ? void 0 : m[o.type]) || S[o.type ?? "string"];
-  if (!v)
-    return console.warn(
-      `No filter component found for column "${o.filterKey}" with type "${o.type}". Provide a custom filter component or use supported types: "string", "number", "boolean", "checkbox".`
-    ), null;
-  const n = A(t), h = O(t), b = o.options ? Object.entries(o.options).map(([e, i]) => ({
-    label: e,
-    value: e,
-    total: i
-  })) : void 0, y = n ? L(n, b) : void 0, z = n != null && n.value ? Array.isArray(n.value) ? n.value.length : 1 : 0, B = () => {
-    const e = u(t, "", "");
-    c(e), r(!1);
+  const z = {
+    boolean: M,
+    string: _,
+    number: U,
+    checkbox: q
+  }, F = n.type && (m == null ? void 0 : m[n.type]) || z[n.type ?? "string"], h = P(t), x = p.loading || !1, y = n.options ? Object.entries(n.options).map(([o, a]) => ({
+    label: o,
+    value: o,
+    total: a
+  })) : void 0, w = l ? G(l, y) : void 0, B = l != null && l.value ? Array.isArray(l.value) ? l.value.length : 1 : 0, N = () => {
+    const o = g(t, "", "");
+    c(o), r(!1);
   }, I = () => {
     c(), r(!1);
   };
-  return /* @__PURE__ */ a(p.Root, { open: f, onOpenChange: $, children: [
-    /* @__PURE__ */ l(p.Trigger, { asChild: !0, children: /* @__PURE__ */ l(
-      d,
+  return F ? /* @__PURE__ */ s(d.Root, { open: u, onOpenChange: $, children: [
+    /* @__PURE__ */ e(d.Trigger, { asChild: !0, children: /* @__PURE__ */ e(
+      f,
       {
         variant: h ? "filled" : "stroke",
         shade: h ? "brand" : "neutral",
         size: "small",
-        children: /* @__PURE__ */ a("span", { className: "flex items-center gap-2", children: [
-          o.title,
-          h && /* @__PURE__ */ l(J, { className: "w-4 h-4 text-white flex-shrink-0" })
+        children: /* @__PURE__ */ s("span", { className: "flex items-center gap-2", children: [
+          n.title,
+          h && /* @__PURE__ */ e(E, { className: "w-4 h-4 text-white flex-shrink-0" }),
+          x && /* @__PURE__ */ e("div", { className: "w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin flex-shrink-0" })
         ] })
       }
     ) }),
-    /* @__PURE__ */ l(p.Portal, { children: /* @__PURE__ */ a(
-      p.Content,
+    /* @__PURE__ */ e(d.Portal, { children: /* @__PURE__ */ s(
+      d.Content,
       {
         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(
-            v,
+          x ? /* @__PURE__ */ e("div", { className: "flex items-center justify-center p-8", children: /* @__PURE__ */ s("div", { className: "flex flex-col items-center gap-3", children: [
+            /* @__PURE__ */ e("div", { className: "w-8 h-8 border-2 border-stroke-solid-medium border-t-stroke-solid-strong rounded-full animate-spin" }),
+            /* @__PURE__ */ e("span", { className: "text-text-neutral-muted text-sm", children: "Loading options..." })
+          ] }) }) : /* @__PURE__ */ e(
+            F,
             {
-              value: n,
-              onChange: ({ condition: e, value: i }) => u(t, e, i),
-              filterOptions: b
+              value: l,
+              onChange: ({ condition: o, value: a }) => g(t, o, a),
+              filterOptions: y
             }
           ),
-          (F || !!z) && /* @__PURE__ */ a("div", { className: "flex justify-between gap-2 p-3 border-t border-stroke-solid-medium", children: [
-            /* @__PURE__ */ l(d, { onClick: B, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
-            F && /* @__PURE__ */ l(d, { onClick: I, variant: "filled", shade: "neutral", size: "small", children: `Apply${y !== void 0 ? ` ${y}` : ""}` })
+          (b || !!B) && /* @__PURE__ */ s("div", { className: "flex justify-between gap-2 p-3 border-t border-stroke-solid-medium", children: [
+            /* @__PURE__ */ e(f, { onClick: N, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
+            b && /* @__PURE__ */ e(f, { onClick: I, variant: "filled", shade: "neutral", size: "small", children: `Apply${w !== void 0 ? ` ${w}` : ""}` })
           ] })
         ]
       }
     ) }),
-    k && /* @__PURE__ */ l(
-      M,
+    O && /* @__PURE__ */ e(
+      H,
       {
-        onClose: R,
-        onKeepChanges: D,
-        onRevertChanges: K,
-        onApplyChanges: j
+        onClose: S,
+        onRevertChanges: R,
+        onApplyChanges: D
       }
     )
-  ] });
+  ] }) : (console.warn(
+    `No filter component found for column "${n.filterKey}" with type "${n.type}". Provide a custom filter component or use supported types: "string", "number", "boolean", "checkbox".`
+  ), null);
 };
 export {
-  ne as TableFilterColumnButton
+  re as TableFilterColumnButton
 };

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

@@ -7,20 +7,25 @@ const c = ({
   filterSchema: e,
   filter: o
 }) => {
-  const n = a({
+  const l = a({
     filterSchema: e,
-    filter: o || { value: [], onChange: () => {
-    }, onDynamicChange: void 0 }
+    filter: o || {
+      value: [],
+      onChange: () => {
+      },
+      onFilterClick: void 0,
+      loading: !1
+    }
   });
   if (!o)
     return null;
-  const l = {
-    ...n,
+  const n = {
+    ...l,
     filterSchema: e,
     filter: o,
     filterComponents: t
   };
-  return /* @__PURE__ */ i(u.Provider, { value: l, children: r });
+  return /* @__PURE__ */ i(u.Provider, { value: n, children: r });
 };
 export {
   c as TableFilterProvider

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

@@ -1,8 +1,7 @@
-import { default as React } from 'react';
 import { TableFilterProps, FilterRule } from './table-filter.type';
 declare const useTableFilter: ({ filter, filterSchema }: TableFilterProps) => {
     selectedColumn: string | null;
-    setSelectedColumn: React.Dispatch<React.SetStateAction<string | null>>;
+    setSelectedColumn: (column: string | null) => void;
     getFilterForColumn: (columnKey: string) => FilterRule | undefined;
     hasFilterForColumn: (columnKey: string) => boolean;
     hasAppliedFilterForColumn: (columnKey: string) => boolean;

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

@@ -1,61 +1,70 @@
-import o from "react";
-const w = ({ filter: n, filterSchema: c }) => {
-  const [v, d] = o.useState(null), [l, i] = o.useState(n.value);
-  o.useEffect(() => {
-    !v && c.length > 0 && d(c[0].filterKey);
-  }, [v, c]);
-  const F = (t) => l.find((e) => e.field === t), p = (t) => {
-    const e = F(t);
+import i, { useEffect as k } from "react";
+import { removeInvalidFilterOptions as E } from "./table-filter.utils.js";
+const w = ({ filter: r, filterSchema: a }) => {
+  const [v, F] = i.useState(null), [n, u] = i.useState(r.value);
+  k(() => {
+    u((t) => E(t, a));
+  }, [a]);
+  const f = i.useCallback(
+    (t) => {
+      if (F(t), t && r.onFilterClick) {
+        const e = n.filter((l) => Array.isArray(l.value) ? l.value.length > 0 : l.value !== "");
+        r.onFilterClick(e, t);
+      }
+    },
+    [r, n]
+  );
+  i.useEffect(() => {
+    !v && a.length > 0 && F(a[0].filterKey);
+  }, [v, a]);
+  const c = (t) => n.find((e) => e.field === t), p = (t) => {
+    const e = c(t);
     return e ? Array.isArray(e.value) ? e.value.length > 0 : e.value !== "" : !1;
-  }, g = (t) => n.value.find((e) => e.field === t), m = (t) => {
-    const e = g(t);
+  }, A = (t) => r.value.find((e) => e.field === t), C = (t) => {
+    const e = A(t);
     return e ? Array.isArray(e.value) ? e.value.length > 0 : e.value !== "" : !1;
-  }, y = (t, e, a) => {
-    const f = l.findIndex((r) => r.field === t);
-    let u = [];
-    if (f >= 0)
-      u = l.map(
-        (s, x) => x === f ? {
+  }, g = (t, e, l) => {
+    const d = n.findIndex((s) => s.field === t);
+    let o = [];
+    if (d >= 0)
+      o = n.map(
+        (s, T) => T === d ? {
           ...s,
           ...e !== void 0 ? { condition: e } : {},
-          ...a !== void 0 ? { value: a } : {}
+          ...l !== void 0 ? { value: l } : {}
         } : s
       );
     else {
-      const r = {
+      const s = {
         field: t,
         ...e ? { condition: e } : {},
-        value: a || ""
+        value: l || ""
       };
-      u = [...l, r];
+      o = [...n, s];
     }
-    if (i(u), n.onDynamicChange) {
-      const r = u.filter((s) => Array.isArray(s.value) ? s.value.length > 0 : s.value !== "");
-      n.onDynamicChange(r);
-    }
-    return u;
-  }, h = () => {
-    i([]), n.onDynamicChange && n.onDynamicChange([]);
-  }, C = () => {
-    i(n.value), n.onDynamicChange && n.onDynamicChange(n.value);
-  }, A = (t) => {
-    const e = (t || l).filter((a) => Array.isArray(a.value) ? a.value.length > 0 : a.value !== "");
-    n.onChange(e);
-  }, D = n.value.length > 0;
-  return o.useEffect(() => {
-    i(n.value);
-  }, [n.value]), {
+    return u(o), o;
+  }, m = () => {
+    u([]);
+  }, y = () => {
+    u(r.value);
+  }, h = (t) => {
+    const e = (t || n).filter((l) => Array.isArray(l.value) ? l.value.length > 0 : l.value !== "");
+    r.onChange(e);
+  }, x = r.value.length > 0;
+  return i.useEffect(() => {
+    u(r.value);
+  }, [r.value]), {
     selectedColumn: v,
-    setSelectedColumn: d,
-    getFilterForColumn: F,
+    setSelectedColumn: f,
+    getFilterForColumn: c,
     hasFilterForColumn: p,
-    hasAppliedFilterForColumn: m,
-    updateColumnFilter: y,
-    clearAllFilters: h,
-    resetToAppliedFilters: C,
-    applyFilters: A,
-    hasActiveFilters: D,
-    tempFilters: l
+    hasAppliedFilterForColumn: C,
+    updateColumnFilter: g,
+    clearAllFilters: m,
+    resetToAppliedFilters: y,
+    applyFilters: h,
+    hasActiveFilters: x,
+    tempFilters: n
   };
 };
 export {

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

@@ -21,7 +21,8 @@ export type FilterSchema = FilterSchemaField[];
 export type TableFilter = {
     value: FilterRule[];
     onChange: (filters: FilterRule[]) => void;
-    onDynamicChange?: (filters: FilterRule[]) => void;
+    onFilterClick?: (filters: FilterRule[], selectedColumn: string) => void;
+    loading?: boolean;
 };
 export interface TableFilterProps {
     filterSchema: FilterSchema;

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

@@ -0,0 +1,2 @@
+import { FilterRule, FilterSchema } from './table-filter.type';
+export declare const removeInvalidFilterOptions: (filters: FilterRule[], filterSchema: FilterSchema) => FilterRule[];

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

@@ -0,0 +1,12 @@
+const l = (t, i) => {
+  const s = i.map((e) => e.filterKey);
+  return t.filter((e) => {
+    const n = i.find((r) => r.filterKey === e.field);
+    return n ? (Array.isArray(e.value) && (e.value = e.value.filter(
+      (r) => Object.entries(n.options || {}).some(([a]) => a === r)
+    )), s.includes(e.field)) : !1;
+  });
+};
+export {
+  l as removeInvalidFilterOptions
+};