@ztwoint/z-ui 0.1.65 → 0.1.66

package/dist/components/{table/components/table-filter → table-filter}/table-filter-button.js

@@ -1,111 +1,115 @@
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import * as h from "react";
-import { Button as u } from "../../../button/button.js";
-import { useTableFilterContext as P } 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 { useClickOutside as J } from "../../../../hooks/useClickOutside.js";
-import { createFilterDisplayItems as L, 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 y } from "./close-filter-confirm/filter-confirmation-dialog.utils.js";
-const ie = () => {
-  const [i, o] = h.useState(!1), [C, a] = h.useState(!1), x = h.useRef(null), {
+import * as u from "react";
+import { Button as x } 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 { 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";
+const ne = () => {
+  const [m, a] = u.useState(!1), [F, n] = u.useState(!1), g = u.useRef(null), {
     selectedColumn: r,
-    setSelectedColumn: F,
+    setSelectedColumn: N,
     getFilterForColumn: k,
-    hasFilterForColumn: N,
-    updateColumnFilter: w,
-    clearAllFilters: T,
+    hasFilterForColumn: w,
+    updateColumnFilter: K,
+    clearAllFilters: j,
     resetToAppliedFilters: A,
     applyFilters: D,
-    hasActiveFilters: c,
-    filterableFields: j,
-    tempFilters: n,
-    schema: m,
-    filter: d,
-    filterComponents: p = {}
-  } = P();
-  J(x, () => {
-    y(n, d.value) && i ? a(!0) : o(!1);
+    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(), o(!1);
+    D(), a(!1);
   }, S = () => {
-    a(!1), o(!1);
+    n(!1), a(!1);
   }, O = () => {
-    A(), a(!1), o(!1);
+    A(), n(!1), a(!1);
   }, R = () => {
-    a(!1);
-  }, $ = L(n, m), b = M($), z = () => {
+    n(!1);
+  }, T = J(i, c), b = L(T), $ = () => {
     if (!r) return null;
-    const e = m.find((f) => f.key === r), B = {
-      boolean: V,
-      text: U,
-      number: q,
-      checkbox: E
-    }, g = (e == null ? void 0 : e.cellType) && (p == null ? void 0 : p[e.cellType]) || B[(e == null ? void 0 : e.cellType) ?? "text"];
-    if (!g)
+    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)
       return console.warn(
-        `No filter component found for column "${e == null ? void 0 : e.key}" with cellType "${e == null ? void 0 : e.cellType}". Provide a custom filter component or use supported types: "text", "number", "boolean", "checkbox".`
+        `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 = {
+    const s = k(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(
-      g,
+      y,
       {
-        value: I,
-        onChange: ({ condition: f, value: K }) => w(r, f, K),
-        filterOptions: e == null ? void 0 : e.filterOptions
-      }
+        value: B,
+        onChange: ({ condition: o, value: h }) => K(r, o, h),
+        filterOptions: e != null && e.options ? Object.entries(e.options).map(([o, h]) => ({
+          label: o,
+          value: o,
+          total: h
+        })) : void 0
+      },
+      r
     ) }) }) });
   };
-  return /* @__PURE__ */ l("div", { className: "relative", ref: x, children: [
+  return /* @__PURE__ */ l("div", { className: "relative", ref: g, children: [
     /* @__PURE__ */ l(
-      u,
+      x,
       {
         onClick: (e) => {
-          e.stopPropagation(), o(!i);
+          e.stopPropagation(), a(!m);
         },
-        variant: c ? "filled" : "stroke",
-        shade: c ? "brand" : "neutral",
+        variant: d ? "filled" : "stroke",
+        shade: d ? "brand" : "neutral",
         size: "small",
         children: [
           "Filter ",
-          c && `(${d.value.length})`
+          d && `(${p.value.length})`
         ]
       }
     ),
-    i && /* @__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: [
+    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" }) }),
-          j.map((e) => /* @__PURE__ */ l(
+          c.map((e) => /* @__PURE__ */ l(
             "button",
             {
-              onClick: () => F(e.key),
-              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.key ? "bg-surface-neutral-focused text-text-brand-primary" : "text-text-neutral-primary"}`,
+              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 }),
-                N(e.key) && /* @__PURE__ */ t(G, { className: "w-4 h-4 text-text-brand-secondary flex-shrink-0 ml-2" })
+                w(e.filterKey) && /* @__PURE__ */ t(E, { className: "w-4 h-4 text-text-brand-secondary flex-shrink-0 ml-2" })
               ]
             },
-            e.key
+            e.filterKey
           ))
         ] }),
-        /* @__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" }) })
+        /* @__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(H, { selectedFilters: n, schema: m }),
+        /* @__PURE__ */ t(G, { selectedFilters: i, schema: c }),
         /* @__PURE__ */ l("div", { className: "flex justify-end gap-2", children: [
-          /* @__PURE__ */ t(u, { onClick: T, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
+          /* @__PURE__ */ t(x, { onClick: j, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
           /* @__PURE__ */ t(
-            u,
+            x,
             {
               onClick: v,
               variant: "filled",
@@ -117,18 +121,18 @@ const ie = () => {
         ] })
       ] })
     ] }),
-    C && /* @__PURE__ */ t(
-      Q,
+    F && /* @__PURE__ */ t(
+      M,
       {
         onClose: R,
         onKeepChanges: S,
         onRevertChanges: O,
         onApplyChanges: v,
-        hasUnsavedChanges: y(n, d.value)
+        hasUnsavedChanges: C(i, p.value)
       }
     )
   ] });
 };
 export {
-  ie as TableFilterButton
+  ne as TableFilterButton
 };

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

@@ -0,0 +1,110 @@
+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 { 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 { 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), {
+    getFilterForColumn: w,
+    hasAppliedFilterForColumn: A,
+    updateColumnFilter: g,
+    applyFilters: d,
+    resetToAppliedFilters: O,
+    filterSchema: R,
+    filterComponents: c = {},
+    tempFilters: F,
+    filter: v
+  } = U();
+  G(C, () => {
+    k(o, F, v.value) && a ? r(!0) : l(!1);
+  });
+  const $ = () => {
+    d(), l(!1);
+  }, j = () => {
+    r(!1), l(!1);
+  }, z = () => {
+    O(), r(!1), l(!1);
+  }, D = () => {
+    r(!1);
+  }, e = R.find((n) => n.filterKey === o);
+  if (!e)
+    return console.warn(`Column "${o}" not found in schema`), null;
+  const K = {
+    boolean: P,
+    string: I,
+    number: V,
+    checkbox: q
+  }, b = e.type && (c == null ? void 0 : c[e.type]) || K[e.type ?? "string"];
+  if (!b)
+    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);
+  }, B = () => {
+    d(), l(!1);
+  };
+  return /* @__PURE__ */ i("div", { className: "relative", ref: C, children: [
+    /* @__PURE__ */ s(
+      h,
+      {
+        onClick: () => {
+          l(!a);
+        },
+        variant: p ? "filled" : "stroke",
+        shade: p ? "brand" : "neutral",
+        size: "small",
+        children: /* @__PURE__ */ i("span", { className: "flex items-center gap-2", children: [
+          e.title,
+          p && /* @__PURE__ */ s(E, { 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(
+      J,
+      {
+        onClose: D,
+        onKeepChanges: j,
+        onRevertChanges: z,
+        onApplyChanges: $,
+        hasUnsavedChanges: k(
+          o,
+          F,
+          v.value
+        )
+      }
+    )
+  ] });
+};
+export {
+  le as TableFilterColumnButton
+};

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

@@ -0,0 +1,3 @@
+import { TableFilterProviderProps } from './table-filter.type';
+import * as React from 'react';
+export declare const TableFilterProvider: React.FC<TableFilterProviderProps>;

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

@@ -0,0 +1,27 @@
+import { jsx as u } from "react/jsx-runtime";
+import i from "./table-filter.hook.js";
+import { TableFilterContext as a } from "./table-filter.context.js";
+const v = ({
+  children: r,
+  filterComponents: t = {},
+  filterSchema: e,
+  filter: o
+}) => {
+  const l = i({
+    filterSchema: e,
+    filter: o || { value: [], onChange: () => {
+    } }
+  });
+  if (!o)
+    return null;
+  const n = {
+    ...l,
+    filterSchema: e,
+    filter: o,
+    filterComponents: t
+  };
+  return /* @__PURE__ */ u(a.Provider, { value: n, children: r });
+};
+export {
+  v as TableFilterProvider
+};

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

@@ -1,5 +1,4 @@
-import { TableSchema, TableFilter as TableFilterType, FilterRule } from '../../table.type';
-import { FilterComponentType } from './table-filter.type';
+import { FilterRule, TableFilter as TableFilterType, FilterSchema, FilterComponentType } from './table-filter.type';
 import * as React from 'react';
 export interface TableFilterContextValue {
     selectedColumn: string | null;
@@ -12,9 +11,8 @@ export interface TableFilterContextValue {
     resetToAppliedFilters: () => void;
     applyFilters: () => void;
     hasActiveFilters: boolean;
-    filterableFields: TableSchema;
     tempFilters: FilterRule[];
-    schema: TableSchema;
+    filterSchema: FilterSchema;
     filter: TableFilterType;
     filterComponents?: Record<string, FilterComponentType>;
 }

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

@@ -1,7 +1,6 @@
 import { default as React } from 'react';
-import { TableFilterProps } from './table-filter.type';
-import { FilterRule } from '../../table.type';
-declare const useTableFilter: ({ filter, schema }: TableFilterProps) => {
+import { TableFilterProps, FilterRule } from './table-filter.type';
+declare const useTableFilter: ({ filter, filterSchema }: TableFilterProps) => {
     selectedColumn: string | null;
     setSelectedColumn: React.Dispatch<React.SetStateAction<string | null>>;
     getFilterForColumn: (columnKey: string) => FilterRule | undefined;
@@ -13,6 +12,5 @@ declare const useTableFilter: ({ filter, schema }: TableFilterProps) => {
     applyFilters: () => void;
     hasActiveFilters: boolean;
     tempFilters: FilterRule[];
-    filterableFields: import('../../table.type').TableSchemaColumn[];
 };
 export default useTableFilter;

package/dist/components/{table/components/table-filter → table-filter}/table-filter.hook.js

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

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

@@ -0,0 +1,44 @@
+import { FC } from 'react';
+export type FilterCondition = 'contains' | 'notEqual' | 'equal' | '>' | '<' | '=' | '!=';
+export type FilterRule = {
+    field: string;
+    condition?: string;
+    value: string | string[];
+};
+export type FilterOption = {
+    label: string;
+    value: string;
+    total?: number;
+};
+export type FilterFieldType = 'string' | 'number' | 'boolean' | 'checkbox';
+export type FilterSchemaField = {
+    filterKey: string;
+    title: string;
+    type: FilterFieldType;
+    options?: Record<string, number>;
+};
+export type FilterSchema = FilterSchemaField[];
+export type TableFilter = {
+    value: FilterRule[];
+    onChange: (filters: FilterRule[]) => void;
+};
+export interface TableFilterProps {
+    filterSchema: FilterSchema;
+    filter: TableFilter;
+    filterComponents?: Record<string, FilterComponentType>;
+}
+export type FilterComponentProps = {
+    onChange: (input: {
+        condition?: string;
+        value?: string | string[];
+    }) => void;
+    value: {
+        condition?: string;
+        value: string | string[];
+    };
+    filterOptions?: FilterOption[];
+};
+export interface TableFilterProviderProps extends TableFilterProps {
+    children: React.ReactNode;
+}
+export type FilterComponentType = FC<FilterComponentProps>;

package/dist/routes/table.d.ts

@@ -1,2 +1,5 @@
+import { TableSchema } from '../components/table';
+import { FilterSchema } from '../components/table-filter/table-filter.type';
+export declare const createFilterSchemaFromTableSchema: (tableSchema: TableSchema) => FilterSchema;
 declare const TablePage: () => import("react/jsx-runtime").JSX.Element;
 export default TablePage;

package/dist/types/components/table/index.d.ts

@@ -1,6 +1,6 @@
 export { Table as default, Table, TableProvider } from './table-provider';
 export { TableBody } from './table';
-export type { TableProps, TableSchema, TableSchemaColumn, CellType, CellValue, CellRenderer, CellRendererProps, FilterRule, FilterCondition, FilterOption, TableFilter as TableFilterType, TablePaginationConfig, SortDirection, SortColumn, TableSort, } from './table.type';
+export type { TableProps, TableSchema, TableSchemaColumn, CellType, CellValue, CellRenderer, CellRendererProps, TablePaginationConfig, SortDirection, SortColumn, TableSort, } from './table.type';
 export { extractCellValue } from './table.utils';
 export { DEFAULT_EMPTY_MESSAGE, TABLE_CSS_CLASSES } from './table.const';
 export { TableContext, useTableContext } from './table.context';

package/dist/types/components/table/table-provider.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { TableProps } from './table.type';
 import { TableBody } from './table';
-import { TableFilter } from './components/table-filter/table-filter-provider';
 import { TableSearch } from './components/table-search';
 import { Pagination } from './components/pagination';
 import { TableHeaderWrapper, TableHeaderContent, TableFooter, TableFooterContent } from './components';
@@ -12,7 +11,6 @@ export interface TableProviderProps extends TableProps {
 declare const TableProvider: React.FC<TableProviderProps>;
 interface TableCompoundComponent extends React.FC<TableProviderProps> {
     Body: typeof TableBody;
-    Filter: typeof TableFilter;
     Search: typeof TableSearch;
     Pagination: typeof Pagination;
     PaginationInfo: typeof PaginationInfo;

package/dist/types/components/table/table.type.d.ts

@@ -1,5 +1,4 @@
 import { FC } from 'react';
-import { FilterComponentType } from './components/table-filter/table-filter.type';
 export type CellType = 'number' | 'boolean' | 'checkbox' | 'link' | 'avatar' | 'label' | 'description' | 'text';
 export type CellValue = string | number | boolean | null | undefined;
 export type CellRendererProps = {
@@ -8,21 +7,6 @@ export type CellRendererProps = {
     index: number;
 };
 export type CellRenderer = FC<CellRendererProps>;
-export type FilterCondition = 'contains' | 'notEqual' | 'equal' | '>' | '<' | '=' | '!=';
-export type FilterRule = {
-    field: string;
-    condition?: string;
-    value: string | string[];
-};
-export type FilterOption = {
-    label: string;
-    value: string;
-    total?: number;
-};
-export type TableFilter = {
-    value: FilterRule[];
-    onChange: (filters: FilterRule[]) => void;
-};
 export type TableSearch = {
     value: string;
     onChange: (searchValue: string) => void;
@@ -68,10 +52,8 @@ type ColumnBase<T extends CellType> = {
     title: string;
     cellType: T;
     cellRenderer?: CellRenderer;
-    filterable?: boolean;
     hideable?: boolean;
     sortable?: boolean;
-    filterOptions?: FilterOption[];
 };
 export type TableSchemaColumn = (ColumnBase<'number'> & {
     valueGetter?: (record: Record<string, unknown>) => CellValue | CellPropsByType['number'];
@@ -97,8 +79,6 @@ export type TableProps = {
     schema: TableSchema;
     loading?: boolean;
     emptyMessage?: string;
-    filter?: TableFilter;
-    filterComponents?: Record<string, FilterComponentType>;
     pagination?: TablePaginationConfig;
     sort?: TableSort;
     customCells?: Record<string, CellRenderer>;

package/dist/types/components/table-card/table-card.type.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
-import { TableProps, TableSchema, TableFilter, TableSearch, TableSort } from '../table/table.type';
+import { TableProps, TableSchema, TableSearch, TableSort } from '../table/table.type';
+import { TableFilter } from '../table-filter/table-filter.type';
 import { PaginationProps, PaginationInfoProps, PaginationQuickJumperProps } from '../table/components/pagination/pagination.type';
+import { FilterSchema } from '../table-filter/table-filter.type';
 export interface TableCardProps {
     dataSource: Record<string, unknown>[];
     schema: TableSchema;
@@ -15,6 +17,7 @@ export interface TableCardProps {
     filter?: Partial<TableFilter> & {
         quickFilters?: string[];
         showFilterButton?: boolean;
+        filterSchema: FilterSchema;
     };
     headerLeftContent?: React.ReactNode;
     headerActions?: React.ReactNode;

package/dist/{components/table → types}/components/table-filter/close-filter-confirm/filter-confirmation-dialog.utils.d.ts

@@ -1,4 +1,4 @@
-import { FilterRule } from '../../../table.type';
+import { FilterRule } from '../table-filter.type';
 /**
  * Compares two filter arrays to determine if they are different
  */

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

@@ -0,0 +1,9 @@
+import { TableFilterProviderProps } from './table-filter.type';
+import { TableFilterButton } from './table-filter-button';
+import { TableFilterColumnButton } from './table-filter-column-button';
+export { useTableFilterContext } from './table-filter.context';
+export interface FilterCompoundComponent extends React.FC<TableFilterProviderProps> {
+    FilterButton: typeof TableFilterButton;
+    FilterColumnButton: typeof TableFilterColumnButton;
+}
+export declare const Filter: FilterCompoundComponent;

package/dist/{components/table → types}/components/table-filter/selected-filters-display/selected-filters-display.type.d.ts

@@ -1,7 +1,7 @@
-import { FilterRule, TableSchema } from '../../../table.type';
+import { FilterRule, FilterSchema } from '../table-filter.type';
 export interface SelectedFilterDisplayProps {
     selectedFilters: FilterRule[];
-    schema: TableSchema;
+    schema: FilterSchema;
 }
 export interface FilterDisplayItem {
     field: string;

package/dist/types/components/{table/components/table-filter → table-filter}/selected-filters-display/selected-filters-display.utils.d.ts

@@ -1,6 +1,6 @@
-import { FilterRule, TableSchema, FilterOption } from '../../../table.type';
+import { FilterRule, FilterSchema, FilterOption } from '../table-filter.type';
 import { FilterDisplayItem } from './selected-filters-display.type';
 export declare const formatFilterValue: (value: string | string[]) => string;
 export declare const getFilterCount: (filterRule: FilterRule, filterOptions?: FilterOption[]) => number | undefined;
-export declare const createFilterDisplayItems: (selectedFilters: FilterRule[], schema: TableSchema) => FilterDisplayItem[];
+export declare const createFilterDisplayItems: (selectedFilters: FilterRule[], schema: FilterSchema) => FilterDisplayItem[];
 export declare const calculateTotalCount: (filterDisplayItems: FilterDisplayItem[]) => number;

package/dist/types/components/table-filter/table-filter-provider.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { TableFilterProviderProps } from './table-filter.type';
+export declare const TableFilterProvider: React.FC<TableFilterProviderProps>;