@ztwoint/z-ui 0.1.44 → 0.1.46

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

@@ -0,0 +1,103 @@
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import * as f from "react";
+import { Button as c } from "../../../button/button.js";
+import { useTableFilterContext as O } from "./table-filter.context.js";
+import z from "./filters/text.js";
+import S from "./filters/boolean.js";
+import $ from "./filters/number/number.js";
+import B from "./filters/checkbox.js";
+import R from "../../../assets/icons/circle-check-filled.js";
+import { SelectedFiltersDisplay as P } from "./selected-filters-display/selected-filters-display.js";
+import { useClickOutside as D } from "../../../../hooks/useClickOutside.js";
+const Q = () => {
+  const [d, o] = f.useState(!1), m = f.useRef(null), {
+    selectedColumn: r,
+    setSelectedColumn: h,
+    getFilterForColumn: x,
+    hasFilterForColumn: b,
+    updateColumnFilter: v,
+    clearAllFilters: y,
+    applyFilters: F,
+    hasActiveFilters: i,
+    filterableFields: k,
+    tempFilters: N,
+    schema: p,
+    filter: g,
+    filterComponents: n = {}
+  } = O();
+  D(m, () => o(!1));
+  const w = () => {
+    F(), o(!1);
+  }, C = () => {
+    if (!r) return null;
+    const e = p.find((a) => a.key === r), T = {
+      boolean: S,
+      text: z,
+      number: $,
+      checkbox: B
+    }, u = (n == null ? void 0 : n[(e == null ? void 0 : e.cellType) || ""]) || T[(e == null ? void 0 : e.cellType) || "text"];
+    if (!u)
+      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".`
+      ), null;
+    const s = x(r), j = {
+      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(
+      u,
+      {
+        value: j,
+        onChange: ({ condition: a, value: A }) => v(r, a, A),
+        filterOptions: e == null ? void 0 : e.filterOptions
+      }
+    ) }) }) });
+  };
+  return /* @__PURE__ */ l("div", { className: "relative", ref: m, children: [
+    /* @__PURE__ */ l(
+      c,
+      {
+        onClick: (e) => {
+          e.stopPropagation(), o(!d);
+        },
+        variant: i ? "filled" : "stroke",
+        shade: i ? "brand" : "neutral",
+        size: "small",
+        children: [
+          "Filter ",
+          i && `(${g.value.length})`
+        ]
+      }
+    ),
+    d && /* @__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" }) }),
+          k.map((e) => /* @__PURE__ */ l(
+            "button",
+            {
+              onClick: () => h(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"}`,
+              children: [
+                /* @__PURE__ */ t("span", { className: "truncate", children: e.title }),
+                b(e.key) && /* @__PURE__ */ t(R, { className: "w-4 h-4 text-text-brand-secondary flex-shrink-0 ml-2" })
+              ]
+            },
+            e.key
+          ))
+        ] }),
+        /* @__PURE__ */ t("div", { className: "flex-1 flex flex-col", children: r ? C() : /* @__PURE__ */ t("div", { className: "flex-1 flex items-center justify-center text-text-neutral-muted", children: "Select a column to configure its filter" }) })
+      ] }),
+      /* @__PURE__ */ l("div", { className: "flex justify-between items-end p-4 border-t border-stroke-solid-medium", children: [
+        /* @__PURE__ */ t(P, { selectedFilters: N, schema: p }),
+        /* @__PURE__ */ l("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ t(c, { onClick: y, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
+          /* @__PURE__ */ t(c, { onClick: w, variant: "filled", shade: "neutral", size: "small", children: "Apply" })
+        ] })
+      ] })
+    ] })
+  ] });
+};
+export {
+  Q as TableFilterButton
+};

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

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

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

@@ -0,0 +1,78 @@
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import * as h from "react";
+import { Button as c } from "../../../button/button.js";
+import { useTableFilterContext as g } from "./table-filter.context.js";
+import T from "./filters/text.js";
+import A from "./filters/boolean.js";
+import O from "./filters/number/number.js";
+import z from "./filters/checkbox.js";
+import $ from "../../../assets/icons/circle-check-filled.js";
+import { useClickOutside as j } from "../../../../hooks/useClickOutside.js";
+const E = ({ filterName: l }) => {
+  const [d, n] = h.useState(!1), u = h.useRef(null);
+  j(u, () => n(!1));
+  const {
+    getFilterForColumn: b,
+    hasAppliedFilterForColumn: C,
+    updateColumnFilter: m,
+    applyFilters: p,
+    schema: x,
+    filterComponents: i = {}
+  } = g(), e = x.find((a) => a.key === l);
+  if (!e)
+    return console.warn(`Column "${l}" not found in schema`), null;
+  if (e.filterable === !1)
+    return console.warn(`Column "${l}" is not filterable`), null;
+  const k = {
+    boolean: A,
+    text: T,
+    number: O,
+    checkbox: z
+  }, f = (i == null ? void 0 : i[e.cellType || ""]) || k[e.cellType || "text"];
+  if (!f)
+    return console.warn(
+      `No filter component found for column "${e.key}" with cellType "${e.cellType}". Provide a custom filter component or use supported types: "text", "number", "boolean", "checkbox".`
+    ), null;
+  const o = b(l), s = C(l), F = {
+    condition: (o == null ? void 0 : o.condition) || "",
+    value: (o == null ? void 0 : o.value) || ""
+  }, v = () => {
+    m(l, "", ""), p(), n(!1);
+  }, w = () => {
+    p(), n(!1);
+  };
+  return /* @__PURE__ */ r("div", { className: "relative", ref: u, children: [
+    /* @__PURE__ */ t(
+      c,
+      {
+        onClick: () => {
+          n(!d);
+        },
+        variant: s ? "filled" : "stroke",
+        shade: s ? "brand" : "neutral",
+        size: "small",
+        children: /* @__PURE__ */ r("span", { className: "flex items-center gap-2", children: [
+          e.title,
+          s && /* @__PURE__ */ t($, { className: "w-4 h-4 text-white flex-shrink-0" })
+        ] })
+      }
+    ),
+    d && /* @__PURE__ */ r("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__ */ t(
+        f,
+        {
+          value: F,
+          onChange: ({ condition: a, value: y }) => m(l, a, y),
+          filterOptions: e.filterOptions
+        }
+      ),
+      /* @__PURE__ */ r("div", { className: "flex justify-between gap-2 p-3 border-t border-stroke-solid-medium", children: [
+        /* @__PURE__ */ t(c, { onClick: v, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
+        /* @__PURE__ */ t(c, { onClick: w, variant: "filled", shade: "neutral", size: "small", children: "Apply" })
+      ] })
+    ] })
+  ] });
+};
+export {
+  E as TableFilterColumnButton
+};

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

@@ -0,0 +1,3 @@
+export interface TableFilterColumnButtonProps {
+    filterName: string;
+}

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

@@ -0,0 +1,14 @@
+import { TableFilterProps } from './table-filter.type';
+import { TableFilterButton } from './table-filter-button';
+import { TableFilterColumnButton } from './table-filter-column-button';
+import * as React from 'react';
+export interface TableFilterProviderProps extends TableFilterProps {
+    children: React.ReactNode;
+}
+export declare const TableFilterProvider: React.FC<TableFilterProviderProps>;
+interface TableFilterCompoundComponent extends React.FC<TableFilterProviderProps> {
+    FilterButton: typeof TableFilterButton;
+    FilterColumnButton: typeof TableFilterColumnButton;
+}
+export declare const TableFilter: TableFilterCompoundComponent;
+export {};

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

@@ -0,0 +1,32 @@
+import { jsx as u } from "react/jsx-runtime";
+import m from "./table-filter.hook.js";
+import { TableFilterContext as a } from "./table-filter.context.js";
+import { TableFilterButton as F } from "./table-filter-button.js";
+import { TableFilterColumnButton as b } from "./table-filter-column-button.js";
+const p = ({
+  children: e,
+  filterComponents: l = {},
+  schema: o,
+  filter: t
+}) => {
+  const n = m({
+    schema: o,
+    filter: t || { value: [], onChange: () => {
+    } }
+  });
+  if (!t)
+    return null;
+  const i = {
+    ...n,
+    schema: o,
+    filter: t,
+    filterComponents: l
+  };
+  return /* @__PURE__ */ u(a.Provider, { value: i, children: e });
+}, r = p;
+r.FilterButton = F;
+r.FilterColumnButton = b;
+export {
+  r as TableFilter,
+  p as TableFilterProvider
+};

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

@@ -0,0 +1,21 @@
+import { TableSchema, TableFilter as TableFilterType, FilterRule } from '../../table.type';
+import { FilterComponentType } from './table-filter.type';
+import * as React from 'react';
+export interface TableFilterContextValue {
+    selectedColumn: string | null;
+    setSelectedColumn: (column: string | null) => void;
+    getFilterForColumn: (columnKey: string) => FilterRule | undefined;
+    hasFilterForColumn: (columnKey: string) => boolean;
+    hasAppliedFilterForColumn: (columnKey: string) => boolean;
+    updateColumnFilter: (columnKey: string, condition?: string, value?: string | string[]) => void;
+    clearAllFilters: () => void;
+    applyFilters: () => void;
+    hasActiveFilters: boolean;
+    filterableFields: TableSchema;
+    tempFilters: FilterRule[];
+    schema: TableSchema;
+    filter: TableFilterType;
+    filterComponents?: Record<string, FilterComponentType>;
+}
+export declare const TableFilterContext: React.Context<TableFilterContextValue | undefined>;
+export declare const useTableFilterContext: () => TableFilterContextValue;

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

@@ -0,0 +1,13 @@
+import * as e from "react";
+const o = e.createContext(
+  void 0
+), r = () => {
+  const t = e.useContext(o);
+  if (t === void 0)
+    throw new Error("useTableFilterContext must be used within a TableFilterProvider");
+  return t;
+};
+export {
+  o as TableFilterContext,
+  r as useTableFilterContext
+};

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

@@ -2,16 +2,15 @@ import { default as React } from 'react';
 import { TableFilterProps } from './table-filter.type';
 import { FilterRule } from '../../table.type';
 declare const useTableFilter: ({ filter, schema }: TableFilterProps) => {
-    isOpen: boolean;
     selectedColumn: string | null;
     setSelectedColumn: React.Dispatch<React.SetStateAction<string | null>>;
     getFilterForColumn: (columnKey: string) => FilterRule | undefined;
     hasFilterForColumn: (columnKey: string) => boolean;
+    hasAppliedFilterForColumn: (columnKey: string) => boolean;
     updateColumnFilter: (columnKey: string, condition?: string, value?: string | string[]) => void;
     clearAllFilters: () => void;
     applyFilters: () => void;
     hasActiveFilters: boolean;
-    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
     tempFilters: FilterRule[];
     filterableFields: import('../../table.type').TableSchemaColumn[];
 };

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

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

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

@@ -1,9 +1,8 @@
 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 { getNestedValue, extractCellValue } from './table.utils';
+export { extractCellValue } from './table.utils';
 export { DEFAULT_EMPTY_MESSAGE, TABLE_CSS_CLASSES } from './table.const';
 export { TableContext, useTableContext } from './table.context';
 export { TableCell, TableHeader, TableRow, TableEmptyState, TableLoadingState, TablePagination, TextCell, NumberCell, BooleanCell, TableHeaderWrapper, TableHeaderContent, TableFooter, TableFooterContent, } from './components';
-export { TableFilter } from './components/table-filter';
 export { PaginationInfo, PaginationQuickJumper } from './components/pagination/components';

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

@@ -1,6 +1,6 @@
 import { TableProps } from './table.type';
 import { TableBody } from './table';
-import { TableFilter } from './components/table-filter';
+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';

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

@@ -2,17 +2,17 @@ import { jsx as a } from "react/jsx-runtime";
 import * as n from "react";
 import { TableContext as m } from "./table.context.js";
 import { TableBody as p } from "./table.js";
-import { TableFilter as f } from "./components/table-filter/table-filter.js";
+import { TableFilter as f } from "./components/table-filter/table-filter-provider.js";
 import { TableSearch as l } from "./components/table-search/table-search.js";
 import { Pagination as s } from "./components/pagination/pagination.js";
+import { PaginationInfo as T } from "./components/pagination/components/pagination-info.js";
+import { PaginationQuickJumper as b } from "./components/pagination/components/pagination-quick-jumper.js";
 import "clsx";
 import "tailwind-merge";
-import { TableHeaderWrapper as T } from "./components/table-header-wrapper.js";
-import { TableHeaderContent as b } from "./components/table-header-content.js";
-import { TableFooter as c } from "./components/table-footer.js";
-import { TableFooterContent as d } from "./components/table-footer-content.js";
-import { PaginationInfo as u } from "./components/pagination/components/pagination-info.js";
-import { PaginationQuickJumper as g } from "./components/pagination/components/pagination-quick-jumper.js";
+import { TableHeaderWrapper as c } from "./components/table-header-wrapper.js";
+import { TableHeaderContent as d } from "./components/table-header-content.js";
+import { TableFooter as u } from "./components/table-footer.js";
+import { TableFooterContent as g } from "./components/table-footer-content.js";
 const t = ({
   children: e,
   pagination: C,
@@ -33,13 +33,13 @@ o.Body = p;
 o.Filter = f;
 o.Search = l;
 o.Pagination = s;
-o.PaginationInfo = u;
-o.PaginationQuickJumper = g;
+o.PaginationInfo = T;
+o.PaginationQuickJumper = b;
 o.Provider = t;
-o.Header = T;
-o.HeaderContent = b;
-o.Footer = c;
-o.FooterContent = d;
+o.Header = c;
+o.HeaderContent = d;
+o.Footer = u;
+o.FooterContent = g;
 export {
   o as Table,
   t as TableProvider,

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

@@ -17,6 +17,7 @@ export type FilterRule = {
 export type FilterOption = {
     label: string;
     value: string;
+    total?: number;
 };
 export type TableFilter = {
     value: FilterRule[];
@@ -47,6 +48,7 @@ export type TableSort = {
 };
 export type TableSchemaColumn = {
     key: string;
+    valueGetter?: (record: Record<string, any>) => string | number | boolean | null | undefined;
     title: string;
     cellType: CellType;
     cellRenderer?: CellRenderer;

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

@@ -1,3 +1,2 @@
 import { CellValue, TableSchemaColumn } from './table.type';
-export declare const getNestedValue: (object: Record<string, unknown>, path: string) => CellValue;
 export declare const extractCellValue: (record: Record<string, unknown>, column: TableSchemaColumn) => CellValue;

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

@@ -1,5 +1,7 @@
-const s = (t, l) => l.split(".").reduce((e, o) => e && typeof e == "object" && o in e ? e[o] : void 0, t), u = (t, l) => s(t, l.key);
+const a = (t, e) => {
+  var r;
+  return e.valueGetter ? e.valueGetter(t) : (r = t[e.key]) == null ? void 0 : r.toString();
+};
 export {
-  u as extractCellValue,
-  s as getNestedValue
+  a as extractCellValue
 };