@ztwoint/z-ui 0.1.64 → 0.1.66

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>;

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { TableSchema, TableFilter as TableFilterType, FilterRule } from '../../table.type';
+import { FilterRule } from './table-filter.type';
+import type { TableFilter as TableFilterType, FilterSchema } from './table-filter.type';
 import { FilterComponentType } from './table-filter.type';
 export interface TableFilterContextValue {
     selectedColumn: string | null;
@@ -12,9 +13,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/types/components/{table/components/table-filter → table-filter}/table-filter.hook.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TableFilterProps } from './table-filter.type';
-import { FilterRule } from '../../table.type';
-declare const useTableFilter: ({ filter, schema }: TableFilterProps) => {
+import { 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 +13,5 @@ declare const useTableFilter: ({ filter, schema }: TableFilterProps) => {
     applyFilters: () => void;
     hasActiveFilters: boolean;
     tempFilters: FilterRule[];
-    filterableFields: import("../../table.type").TableSchemaColumn[];
 };
 export default useTableFilter;

package/dist/types/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/types/routes/table.d.ts

@@ -1,2 +1,5 @@
+import { TableSchema } from '../components/table';
+import type { 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ztwoint/z-ui",
-  "version": "0.1.64",
+  "version": "0.1.66",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

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

@@ -1,4 +0,0 @@
-export { TableFilterProvider, TableFilter } from './table-filter-provider';
-export { TableFilterButton } from './table-filter-button';
-export { TableFilterColumnButton } from './table-filter-column-button';
-export { useTableFilterContext } from './table-filter.context';

package/dist/components/table/components/table-filter/selected-filters-display/selected-filters-display.utils.js

@@ -1,26 +0,0 @@
-const o = (n, u) => {
-  if (!u || u.length === 0) return n.value !== "" ? 1 : 0;
-  if (Array.isArray(n.value)) {
-    const t = u.filter(
-      (r) => n.value.includes(r.value)
-    ).reduce((r, a) => r + (a.total || 0), 0);
-    return t > 0 ? t : void 0;
-  } else {
-    const e = u.find((t) => t.value === n.value);
-    return e == null ? void 0 : e.total;
-  }
-}, l = (n, u) => n.filter((e) => Array.isArray(e.value) ? e.value.length > 0 : e.value !== "").map((e) => {
-  const t = u.find((a) => a.key === e.field), r = o(e, t == null ? void 0 : t.filterOptions);
-  return {
-    field: e.field,
-    fieldTitle: (t == null ? void 0 : t.title) || e.field,
-    value: e.value,
-    condition: e.condition,
-    count: r
-  };
-}), c = (n) => n.reduce((u, e) => u + (e.count || 1), 0);
-export {
-  c as calculateTotalCount,
-  l as createFilterDisplayItems,
-  o as getFilterCount
-};

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

@@ -1,108 +0,0 @@
-import { jsxs as i, jsx as n } from "react/jsx-runtime";
-import * as m from "react";
-import { Button as u } from "../../../button/button.js";
-import { useTableFilterContext as K } from "./table-filter.context.js";
-import U from "./filters/text.js";
-import I from "./filters/boolean.js";
-import P from "./filters/number/number.js";
-import V from "./filters/checkbox.js";
-import q from "../../../assets/icons/circle-check-filled.js";
-import { useClickOutside as E } from "../../../../hooks/useClickOutside.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 b } from "./close-filter-confirm/filter-confirmation-dialog.utils.js";
-const oe = ({ filterName: l }) => {
-  const [a, t] = m.useState(!1), [x, s] = m.useState(!1), h = m.useRef(null), {
-    getFilterForColumn: k,
-    hasAppliedFilterForColumn: y,
-    updateColumnFilter: C,
-    applyFilters: c,
-    resetToAppliedFilters: w,
-    schema: T,
-    filterComponents: d = {},
-    tempFilters: F,
-    filter: g
-  } = K();
-  E(h, () => {
-    b(l, F, g.value) && a ? s(!0) : t(!1);
-  });
-  const A = () => {
-    c(), t(!1);
-  }, O = () => {
-    s(!1), t(!1);
-  }, $ = () => {
-    w(), s(!1), t(!1);
-  }, R = () => {
-    s(!1);
-  }, e = T.find((r) => r.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 z = {
-    boolean: I,
-    text: U,
-    number: P,
-    checkbox: V
-  }, v = e.cellType && (d == null ? void 0 : d[e.cellType]) || z[e.cellType ?? "text"];
-  if (!v)
-    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 = k(l), f = y(l), p = o ? G(o, e.filterOptions) : void 0, D = {
-    condition: (o == null ? void 0 : o.condition) || "",
-    value: (o == null ? void 0 : o.value) || ""
-  }, j = () => {
-    C(l, "", ""), c(), t(!1);
-  }, B = () => {
-    c(), t(!1);
-  };
-  return /* @__PURE__ */ i("div", { className: "relative", ref: h, children: [
-    /* @__PURE__ */ n(
-      u,
-      {
-        onClick: () => {
-          t(!a);
-        },
-        variant: f ? "filled" : "stroke",
-        shade: f ? "brand" : "neutral",
-        size: "small",
-        children: /* @__PURE__ */ i("span", { className: "flex items-center gap-2", children: [
-          e.title,
-          f && /* @__PURE__ */ n(q, { 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__ */ n(
-        v,
-        {
-          value: D,
-          onChange: ({ condition: r, value: S }) => C(l, r, S),
-          filterOptions: e.filterOptions
-        }
-      ),
-      !!p && /* @__PURE__ */ i("div", { className: "flex justify-between gap-2 p-3 border-t border-stroke-solid-medium", children: [
-        /* @__PURE__ */ n(u, { onClick: j, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
-        /* @__PURE__ */ n(u, { onClick: B, variant: "filled", shade: "neutral", size: "small", children: `Apply${p !== void 0 ? ` ${p}` : ""}` })
-      ] })
-    ] }),
-    x && /* @__PURE__ */ n(
-      H,
-      {
-        onClose: R,
-        onKeepChanges: O,
-        onRevertChanges: $,
-        onApplyChanges: A,
-        hasUnsavedChanges: b(
-          l,
-          F,
-          g.value
-        )
-      }
-    )
-  ] });
-};
-export {
-  oe as TableFilterColumnButton
-};

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

@@ -1,14 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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.type.d.ts

@@ -1,19 +0,0 @@
-import { FC } from 'react';
-import { TableFilter, TableSchema, FilterOption } from '../../table.type';
-export interface TableFilterProps {
-    schema: TableSchema;
-    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 type FilterComponentType = FC<FilterComponentProps>;

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

@@ -1,4 +0,0 @@
-export { TableFilterProvider, TableFilter } from './table-filter-provider';
-export { TableFilterButton } from './table-filter-button';
-export { TableFilterColumnButton } from './table-filter-column-button';
-export { useTableFilterContext } from './table-filter.context';

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

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import { TableFilterProps } from './table-filter.type';
-import { TableFilterButton } from './table-filter-button';
-import { TableFilterColumnButton } from './table-filter-column-button';
-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/types/components/table/components/table-filter/table-filter.type.d.ts

@@ -1,19 +0,0 @@
-import { FC } from 'react';
-import { TableFilter, TableSchema, FilterOption } from '../../table.type';
-export interface TableFilterProps {
-    schema: TableSchema;
-    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 type FilterComponentType = FC<FilterComponentProps>;