@ztwoint/z-ui 0.1.65 → 0.1.66

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

@@ -32,12 +32,13 @@ import "../../table-provider.js";
 import { Avatar as p } from "../../../avatar/avatar.js";
 import "../../table.context.js";
 import "../../../tooltip/tooltip.js";
+import "../../../table-filter/index.js";
 import "../../../badge/badge.js";
 import "../../../text-preset/text-preset.js";
 import "react-dom";
 import "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/util/changing-window/count-events-for-safari.js";
 import "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/ledger/dispatch-consumer-event.js";
-const _ = ({
+const $ = ({
   avatar: m,
   value: a,
   rightIcon: o,
@@ -75,5 +76,5 @@ const _ = ({
   }
 );
 export {
-  _ as AvatarCell
+  $ as AvatarCell
 };

package/dist/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/components/table/table-provider.d.ts

@@ -1,6 +1,5 @@
 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/components/table/table-provider.js

@@ -2,11 +2,10 @@ import { jsx as p } from "react/jsx-runtime";
 import * as e from "react";
 import { TableContext as a } from "./table.context.js";
 import { TableBody as n } from "./table.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 { TableSearch as f } from "./components/table-search/table-search.js";
+import { Pagination as l } from "./components/pagination/pagination.js";
+import { PaginationInfo as c } from "./components/pagination/components/pagination-info.js";
+import { PaginationQuickJumper as d } from "./components/pagination/components/pagination-quick-jumper.js";
 import "clsx";
 import "tailwind-merge";
 /* empty css                        */
@@ -37,22 +36,21 @@ import "../stepper/stepper.js";
 import "../stepper-item/stepper-item.js";
 import "@radix-ui/react-tabs";
 import "../tooltip/tooltip.js";
+import "../table-filter/index.js";
 import "../badge/badge.js";
 import "../avatar/avatar.js";
 import "../text-preset/text-preset.js";
 import "react-dom";
 import "../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/util/changing-window/count-events-for-safari.js";
 import "../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/ledger/dispatch-consumer-event.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";
+import { TableHeaderWrapper as T } from "./components/table-header-wrapper.js";
+import { TableHeaderContent as b } from "./components/table-header-content.js";
+import { TableFooter as s } from "./components/table-footer.js";
+import { TableFooterContent as u } from "./components/table-footer-content.js";
 const t = ({
   children: i,
-  pagination: C,
-  sort: F,
-  filter: v,
-  filterComponents: x,
+  pagination: P,
+  sort: C,
   ...r
 }) => {
   const m = e.useMemo(
@@ -62,18 +60,17 @@ const t = ({
     [r]
   );
   return /* @__PURE__ */ p(a.Provider, { value: m, children: i });
-}, P = t, o = P;
+}, g = t, o = g;
 o.Body = n;
-o.Filter = f;
-o.Search = l;
-o.Pagination = s;
-o.PaginationInfo = T;
-o.PaginationQuickJumper = b;
+o.Search = f;
+o.Pagination = l;
+o.PaginationInfo = c;
+o.PaginationQuickJumper = d;
 o.Provider = t;
-o.Header = c;
-o.HeaderContent = d;
-o.Footer = u;
-o.FooterContent = g;
+o.Header = T;
+o.HeaderContent = b;
+o.Footer = s;
+o.FooterContent = u;
 export {
   o as Table,
   t as TableProvider,

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

@@ -1,5 +1,4 @@
 import { FC } from 'react';
-import { FilterComponentType } from './components/table-filter/table-filter.type';
 import { NumberCellProps } from './components/cell/number-cell';
 import { BooleanCellProps } from './components/cell/boolean-cell';
 import { LinkCellProps } from './components/cell/link-cell';
@@ -14,21 +13,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/components/table-card/table-card.js

@@ -1,5 +1,5 @@
-import { jsx as t, jsxs as a } from "react/jsx-runtime";
-import { Table as e } from "../table/table-provider.js";
+import { jsx as t, jsxs as m } from "react/jsx-runtime";
+import { Table as r } from "../table/table-provider.js";
 import "react";
 import { cn as i } from "../../lib/utils.js";
 /* empty css                        */
@@ -30,7 +30,8 @@ import "../stepper/stepper.js";
 import "../stepper-item/stepper-item.js";
 import "@radix-ui/react-tabs";
 import "../tooltip/tooltip.js";
-import f from "../assets/icons/octagon-warning-Copy.js";
+import { Filter as P } from "../table-filter/index.js";
+import S from "../assets/icons/octagon-warning-Copy.js";
 import "../badge/badge.js";
 import "../avatar/avatar.js";
 import "../text-preset/text-preset.js";
@@ -38,18 +39,18 @@ import "react-dom";
 import "../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/util/changing-window/count-events-for-safari.js";
 import "../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/ledger/dispatch-consumer-event.js";
 import "../table/table.context.js";
-const Ct = ({
+const vt = ({
   dataSource: w,
-  schema: P,
-  loading: H,
-  emptyMessage: k,
-  className: T,
+  schema: H,
+  loading: k,
+  emptyMessage: T,
+  className: _,
   rounded: d = !0,
   bordered: n = !0,
-  showHeader: g = !0,
-  headerClassName: _,
-  search: m,
-  filter: r,
+  showHeader: p = !0,
+  headerClassName: f,
+  search: a,
+  filter: e,
   headerLeftContent: h,
   headerActions: u,
   body: l = {
@@ -57,79 +58,79 @@ const Ct = ({
     className: "",
     stickyHeader: !0
   },
-  showFooter: p = !0,
+  showFooter: g = !0,
   footerClassName: j,
   pagination: o,
   paginationInfo: c,
   paginationQuickJumper: s,
   error: x = !1
 }) => {
-  var v;
+  var F;
   if (x)
-    return /* @__PURE__ */ t("div", { className: "flex flex-col items-center justify-center h-64 bg-background-error-subtle rounded-lg text-text-warning-secondary", children: /* @__PURE__ */ a("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ t(f, { className: "mt-1.5" }),
-      /* @__PURE__ */ a("div", { className: "flex flex-col gap-2", children: [
+    return /* @__PURE__ */ t("div", { className: "flex flex-col items-center justify-center h-64 bg-background-error-subtle rounded-lg text-text-warning-secondary", children: /* @__PURE__ */ m("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ t(S, { className: "mt-1.5" }),
+      /* @__PURE__ */ m("div", { className: "flex flex-col gap-2", children: [
         /* @__PURE__ */ t("div", { className: "text-text-error-primary text-lg font-medium", children: "Error loading data" }),
         /* @__PURE__ */ t("div", { className: "text-sm", children: "Please try again later" }),
         typeof x == "string" && /* @__PURE__ */ t("div", { className: "text-text-warning-secondary text-sm", children: x })
       ] })
     ] }) });
-  const C = s && s.totalPage && s.totalPage >= 2, N = o && o.totalPage && o.totalPage >= 2 || !!c || C, F = m || r || h || u, R = typeof (r == null ? void 0 : r.showFilterButton) > "u" ? !0 : r == null ? void 0 : r.showFilterButton;
-  return /* @__PURE__ */ t("div", { className: i("flex flex-col overflow-hidden", T), children: /* @__PURE__ */ a(e, { dataSource: w, schema: P, loading: H, emptyMessage: k, children: [
-    g && F && /* @__PURE__ */ a(
-      e.Header,
+  const C = s && s.totalPage && s.totalPage >= 2, N = o && o.totalPage && o.totalPage >= 2 || !!c || C, v = a || e || h || u, R = typeof (e == null ? void 0 : e.showFilterButton) > "u" ? !0 : e == null ? void 0 : e.showFilterButton;
+  return /* @__PURE__ */ t("div", { className: i("flex flex-col overflow-hidden", _), children: /* @__PURE__ */ m(r, { dataSource: w, schema: H, loading: k, emptyMessage: T, children: [
+    p && v && /* @__PURE__ */ m(
+      r.Header,
       {
         className: i(
           "flex-shrink-0",
           n && "border-stroke-solid-medium border-1 border-b-0",
           d && "rounded-t-xl",
-          _
+          f
         ),
         children: [
-          /* @__PURE__ */ a(e.HeaderContent, { children: [
+          /* @__PURE__ */ m(r.HeaderContent, { children: [
             h && h,
-            m && /* @__PURE__ */ t(
-              e.Search,
+            a && /* @__PURE__ */ t(
+              r.Search,
               {
                 search: {
-                  value: m.value || "",
-                  onChange: m.onChange || (() => {
+                  value: a.value || "",
+                  onChange: a.onChange || (() => {
                   }),
-                  placeholder: m.placeholder
+                  placeholder: a.placeholder
                 },
-                className: m.className
+                className: a.className
               }
             ),
-            r && /* @__PURE__ */ a(
-              e.Filter,
+            e && /* @__PURE__ */ m(
+              P,
               {
-                schema: P,
+                filterSchema: e.filterSchema,
                 filter: {
-                  value: r.value || [],
-                  onChange: r.onChange || (() => {
+                  value: e.value || [],
+                  onChange: e.onChange || (() => {
                   })
                 },
                 children: [
-                  R && /* @__PURE__ */ t(e.Filter.FilterButton, {}),
-                  (v = r == null ? void 0 : r.quickFilters) == null ? void 0 : v.map((B) => /* @__PURE__ */ t(e.Filter.FilterColumnButton, { filterName: B }, B))
+                  R && /* @__PURE__ */ t(P.FilterButton, {}),
+                  (F = e == null ? void 0 : e.quickFilters) == null ? void 0 : F.map((B) => /* @__PURE__ */ t(P.FilterColumnButton, { filterName: B }, B))
                 ]
               }
             )
           ] }),
-          u && /* @__PURE__ */ t(e.HeaderContent, { children: u })
+          u && /* @__PURE__ */ t(r.HeaderContent, { children: u })
         ]
       }
     ),
     /* @__PURE__ */ t(
-      e.Body,
+      r.Body,
       {
         cell: l == null ? void 0 : l.cell,
         sort: l == null ? void 0 : l.sort,
         className: i(
           "flex-1 min-h-0",
           n && "border-stroke-solid-light border-1",
-          d && !(g && F) && "rounded-t-xl",
-          d && !(p && N) && "rounded-b-xl",
+          d && !(p && v) && "rounded-t-xl",
+          d && !(g && N) && "rounded-b-xl",
           n && "[&_td:first-child]:border-l-0 [&_td:last-child]:border-r-0",
           n && "[&_th:first-child]:border-l-0 [&_th:last-child]:border-r-0",
           l == null ? void 0 : l.className
@@ -137,8 +138,8 @@ const Ct = ({
         stickyHeader: l == null ? void 0 : l.stickyHeader
       }
     ),
-    p && N && /* @__PURE__ */ a(
-      e.Footer,
+    g && N && /* @__PURE__ */ m(
+      r.Footer,
       {
         className: i(
           "flex-shrink-0 border-stroke-solid-light border-t-[0.5px] mt-[-2px]",
@@ -147,18 +148,18 @@ const Ct = ({
           j
         ),
         children: [
-          c ? /* @__PURE__ */ t(e.FooterContent, { children: /* @__PURE__ */ t(
-            e.PaginationInfo,
+          c ? /* @__PURE__ */ t(r.FooterContent, { children: /* @__PURE__ */ t(
+            r.PaginationInfo,
             {
               showTotal: c.showTotal,
               totalItems: c.totalItems,
               currentPage: c.currentPage,
               itemsPerPage: c.itemsPerPage
             }
-          ) }) : s || o ? /* @__PURE__ */ t(e.FooterContent, { children: null }) : null,
-          (s || o) && /* @__PURE__ */ a(e.FooterContent, { children: [
+          ) }) : s || o ? /* @__PURE__ */ t(r.FooterContent, { children: null }) : null,
+          (s || o) && /* @__PURE__ */ m(r.FooterContent, { children: [
             C && /* @__PURE__ */ t(
-              e.PaginationQuickJumper,
+              r.PaginationQuickJumper,
               {
                 currentPage: s.currentPage,
                 totalPage: s.totalPage,
@@ -168,7 +169,7 @@ const Ct = ({
               }
             ),
             o && /* @__PURE__ */ t(
-              e.Pagination,
+              r.Pagination,
               {
                 currentPage: o.currentPage,
                 totalPage: o.totalPage,
@@ -184,5 +185,5 @@ const Ct = ({
   ] }) });
 };
 export {
-  Ct as default
+  vt as default
 };

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

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

package/dist/components/{table/components/table-filter → table-filter}/close-filter-confirm/filter-confirmation-dialog.js

@@ -1,6 +1,6 @@
 import { jsx as e, jsxs as n } from "react/jsx-runtime";
-import { Button as l } from "../../../../button/button.js";
-import { Z2Dialog as s, Z2DialogContent as d, Z2DialogHeader as h, Z2DialogTitle as c, Z2DialogDescription as g, Z2DialogFooter as m } from "../../../../dialog/dialog.js";
+import { Button as l } from "../../button/button.js";
+import { Z2Dialog as s, Z2DialogContent as d, Z2DialogHeader as h, Z2DialogTitle as c, Z2DialogDescription as g, Z2DialogFooter as m } from "../../dialog/dialog.js";
 const v = ({
   onClose: r,
   onKeepChanges: i,

package/dist/{types/components/table/components → 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/components/{table/components/table-filter → table-filter}/filters/checkbox.js

@@ -1,7 +1,7 @@
 import { jsx as t, jsxs as s } from "react/jsx-runtime";
 import { useState as i, useEffect as h } from "react";
-import { MagnifierIcon as y } from "../../../../assets/icons/magnifier-icon.js";
-import C from "../../../../assets/icons/x.js";
+import { MagnifierIcon as y } from "../../assets/icons/magnifier-icon.js";
+import C from "../../assets/icons/x.js";
 const k = ["includesAny", "includesAll", "excludes"], j = ({ value: r, onChange: d, filterOptions: c = [] }) => {
   const [n, o] = i([]), [u, m] = i(""), [x, f] = i(c), p = (e) => {
     m(e.target.value);

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

@@ -1,5 +1,5 @@
 import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import i from "../../../../../assets/icons/x.js";
+import i from "../../../assets/icons/x.js";
 const d = ({
   label: l,
   operator: n,

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

@@ -1,8 +1,8 @@
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import { useEffect as c } from "react";
-import s from "../../../../assets/icons/x.js";
-import { MagnifierIcon as u } from "../../../../assets/icons/magnifier-icon.js";
-import { Input as d } from "../../../../input/input.js";
+import s from "../../assets/icons/x.js";
+import { MagnifierIcon as u } from "../../assets/icons/magnifier-icon.js";
+import { Input as d } from "../../input/input.js";
 const o = [
   { label: "Contains", value: "contains" },
   { label: "Does not equal", value: "notEqual" },

package/dist/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-filter/index.js

@@ -0,0 +1,11 @@
+import { TableFilterProvider as o } from "./table-filter-provider.js";
+import { TableFilterButton as r } from "./table-filter-button.js";
+import { TableFilterColumnButton as e } from "./table-filter-column-button.js";
+import { useTableFilterContext as F } from "./table-filter.context.js";
+const t = o;
+t.FilterButton = r;
+t.FilterColumnButton = e;
+export {
+  t as Filter,
+  F as useTableFilterContext
+};

package/dist/{types/components/table/components → 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/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/components/table-filter/selected-filters-display/selected-filters-display.utils.js

@@ -0,0 +1,30 @@
+const c = (n, o) => {
+  if (!o || o.length === 0) return n.value !== "" ? 1 : 0;
+  if (Array.isArray(n.value)) {
+    const t = o.filter(
+      (r) => n.value.includes(r.value)
+    ).reduce((r, a) => r + (a.total || 0), 0);
+    return t > 0 ? t : void 0;
+  } else {
+    const e = o.find((t) => t.value === n.value);
+    return e == null ? void 0 : e.total;
+  }
+}, s = (n, o) => n.filter((e) => Array.isArray(e.value) ? e.value.length > 0 : e.value !== "").map((e) => {
+  const t = o.find((u) => u.filterKey === e.field), r = t != null && t.options ? Object.entries(t.options).map(([u, l]) => ({
+    label: u,
+    value: u,
+    total: l
+  })) : void 0, a = c(e, r);
+  return {
+    field: e.field,
+    fieldTitle: (t == null ? void 0 : t.title) || e.field,
+    value: e.value,
+    condition: e.condition,
+    count: a
+  };
+}), d = (n) => n.reduce((o, e) => o + (e.count || 1), 0);
+export {
+  d as calculateTotalCount,
+  s as createFilterDisplayItems,
+  c as getFilterCount
+};