@ackplus/react-tanstack-data-table 1.1.16 → 1.1.18

package/README.md

@@ -131,7 +131,6 @@ function MyDataTable() {
 | `initialLoadData` | `boolean` | `true` | Load data on component mount |
 | `onFetchData` | `(filters, meta?) => Promise<{data, total}>` | - | Server-side data fetching with optional refresh metadata (`reason`, `force`) |
 | `onRefreshData` | `(context) => void \| Promise<void>` | - | External refresh handler for controlled data sources (React Query, SWR, etc.) |
-| `onDataChange` | `(nextData, context) => void` | - | Receives mutations from `apiRef.data.*` when data is controlled by props |
 | `onDataStateChange` | `(state) => void` | - | Called when table state changes |
 | `totalRow` | `number` | `0` | Total rows for server-side pagination |
 
@@ -616,13 +615,6 @@ function ReactQueryTable() {
           refetchType: options.force ? 'all' : 'active',
         })
       }
-      // Row mutation sync stays outside DataTable
-      onDataChange={(nextData) => {
-        queryClient.setQueryData(queryKey, (prev: any) => {
-          if (!prev) return prev;
-          return { ...prev, data: nextData };
-        });
-      }}
     />
   );
 }

package/dist/index.d.ts

@@ -18,6 +18,10 @@
  * - Loading states and empty data handling
  */
 export { DataTable } from './lib/data-table';
+export { DataTableView } from './lib/components/data-table-view';
+export type { DataTableViewProps } from './lib/components/data-table-view';
+export { useDataTableEngine } from './lib/hooks';
+export type { EngineResult } from './lib/hooks';
 export * from './lib/components/headers';
 export * from './lib/components/rows';
 export * from './lib/components/filters';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAGH,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAG7C,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0CAA0C,CAAC;AAGzD,OAAO,EACH,uBAAuB,EACvB,oBAAoB,EACpB,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,GACnB,MAAM,0BAA0B,CAAC;AAGlC,YAAY,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AAGxE,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AAGnC,cAAc,aAAa,CAAC;AAG5B,YAAY,EACR,MAAM,EACN,SAAS,EACT,GAAG,EACH,KAAK,EACL,MAAM,EACN,IAAI,EACJ,YAAY,EACZ,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,GAClB,MAAM,uBAAuB,CAAC;AAG/B,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAGH,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,YAAY,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,YAAY,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGhD,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0CAA0C,CAAC;AAGzD,OAAO,EACH,uBAAuB,EACvB,oBAAoB,EACpB,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,GACnB,MAAM,0BAA0B,CAAC;AAGlC,YAAY,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AAGxE,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AAGnC,cAAc,aAAa,CAAC;AAG5B,YAAY,EACR,MAAM,EACN,SAAS,EACT,GAAG,EACH,KAAK,EACL,MAAM,EACN,IAAI,EACJ,YAAY,EACZ,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,GAClB,MAAM,uBAAuB,CAAC;AAG/B,cAAc,gBAAgB,CAAC"}

package/dist/index.js

@@ -33,10 +33,14 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataTableToolbar = exports.BulkActionsToolbar = exports.TableSizeControl = exports.TableExportControl = exports.ColumnResetControl = exports.ColumnPinningControl = exports.ColumnVisibilityControl = exports.DataTable = void 0;
+exports.DataTableToolbar = exports.BulkActionsToolbar = exports.TableSizeControl = exports.TableExportControl = exports.ColumnResetControl = exports.ColumnPinningControl = exports.ColumnVisibilityControl = exports.useDataTableEngine = exports.DataTableView = exports.DataTable = void 0;
 // Main components - be specific to avoid conflicts
 var data_table_1 = require("./lib/data-table");
 Object.defineProperty(exports, "DataTable", { enumerable: true, get: function () { return data_table_1.DataTable; } });
+var data_table_view_1 = require("./lib/components/data-table-view");
+Object.defineProperty(exports, "DataTableView", { enumerable: true, get: function () { return data_table_view_1.DataTableView; } });
+var hooks_1 = require("./lib/hooks");
+Object.defineProperty(exports, "useDataTableEngine", { enumerable: true, get: function () { return hooks_1.useDataTableEngine; } });
 // Other component exports
 __exportStar(require("./lib/components/headers"), exports);
 __exportStar(require("./lib/components/rows"), exports);

package/dist/lib/components/data-table-view.d.ts

@@ -0,0 +1,7 @@
+import type { DataTableProps } from '../types/data-table.types';
+import type { EngineResult } from '../hooks/use-data-table-engine';
+export interface DataTableViewProps<T = any> extends DataTableProps<T> {
+    engine: EngineResult<T>;
+}
+export declare function DataTableView<T extends Record<string, any>>({ engine, extraFilter, footerFilter, enableGlobalFilter, enableColumnVisibility, enableColumnFilter, enableExport, enableReset, enableTableSizeControl, enableColumnPinning, enableRefresh, enableBulkActions, bulkActions, enableRowSelection, enableColumnDragging, enableColumnResizing, enableStickyHeaderOrFooter, maxHeight, enableVirtualization, enablePagination, tableProps, enableHover, enableStripes, emptyMessage, skeletonRows, onRowClick, selectOnRowClick, renderSubComponent, slots, slotProps, }: DataTableViewProps<T>): any;
+//# sourceMappingURL=data-table-view.d.ts.map

package/dist/lib/components/data-table-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-view.d.ts","sourceRoot":"","sources":["../../../src/lib/components/data-table-view.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAEnE,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;IAClE,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;CAC3B;AAED,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,EACzD,MAAM,EACN,WAAkB,EAClB,YAAmB,EACnB,kBAAyB,EACzB,sBAA6B,EAC7B,kBAA0B,EAC1B,YAAoB,EACpB,WAAkB,EAClB,sBAA6B,EAC7B,mBAA2B,EAC3B,aAAqB,EACrB,iBAAyB,EACzB,WAAW,EACX,kBAA0B,EAC1B,oBAA4B,EAC5B,oBAA4B,EAC5B,0BAAkC,EAClC,SAAmB,EACnB,oBAA4B,EAC5B,gBAAwB,EACxB,UAAe,EACf,WAAkB,EAClB,aAAqB,EACrB,YAAkC,EAClC,YAAgB,EAChB,UAAU,EACV,gBAAwB,EACxB,kBAAkB,EAClB,KAAU,EACV,SAAc,GACjB,EAAE,kBAAkB,CAAC,CAAC,CAAC,OA+UvB"}

package/dist/lib/components/data-table-view.js

@@ -0,0 +1,151 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataTableView = DataTableView;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * DataTableView – presentational layer for DataTable.
+ * Renders based on engine result; no fetch, export, or API logic.
+ */
+const material_1 = require("@mui/material");
+const react_1 = __importStar(require("react"));
+const slot_helpers_1 = require("../utils/slot-helpers");
+const headers_1 = require("./headers");
+const pagination_1 = require("./pagination");
+const rows_1 = require("./rows");
+const toolbar_1 = require("./toolbar");
+function DataTableView({ engine, extraFilter = null, footerFilter = null, enableGlobalFilter = true, enableColumnVisibility = true, enableColumnFilter = false, enableExport = false, enableReset = true, enableTableSizeControl = true, enableColumnPinning = false, enableRefresh = false, enableBulkActions = false, bulkActions, enableRowSelection = false, enableColumnDragging = false, enableColumnResizing = false, enableStickyHeaderOrFooter = false, maxHeight = '400px', enableVirtualization = false, enablePagination = false, tableProps = {}, enableHover = true, enableStripes = false, emptyMessage = 'No data available', skeletonRows = 5, onRowClick, selectOnRowClick = false, renderSubComponent, slots = {}, slotProps = {}, }) {
+    const { table, refs, derived, state, actions, } = engine;
+    const { tableContainerRef, apiRef, } = refs;
+    const { tableLoading, rows, visibleLeafColumns, useFixedLayout, tableStyle, isSomeRowsSelected, selectedRowCount, tableTotalRow, } = derived;
+    const { pagination, selectionState, tableSize, } = state;
+    const { handleColumnReorder, renderRowModel, } = actions;
+    const rowVirtualizer = renderRowModel.rowVirtualizer;
+    const renderTableRows = (0, react_1.useCallback)(() => {
+        var _a, _b, _c, _d;
+        if (tableLoading) {
+            const { component: LoadingRowComponent, props: loadingRowProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'loadingRow', rows_1.LoadingRows, {});
+            return ((0, jsx_runtime_1.jsx)(LoadingRowComponent, { rowCount: enablePagination ? Math.min(pagination.pageSize, skeletonRows) : skeletonRows, colSpan: table.getAllColumns().length, slots: slots, slotProps: slotProps, ...loadingRowProps }));
+        }
+        if (rows.length === 0) {
+            const { component: EmptyRowComponent, props: emptyRowProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'emptyRow', rows_1.EmptyDataRow, {});
+            return ((0, jsx_runtime_1.jsx)(EmptyRowComponent, { colSpan: table.getAllColumns().length, message: emptyMessage, slots: slots, slotProps: slotProps, ...emptyRowProps }));
+        }
+        if (enableVirtualization && !enablePagination && rows.length > 0) {
+            const virtualItems = rowVirtualizer.getVirtualItems();
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [virtualItems.length > 0 && ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { colSpan: table.getAllColumns().length, style: {
+                                height: `${(_b = (_a = virtualItems[0]) === null || _a === void 0 ? void 0 : _a.start) !== null && _b !== void 0 ? _b : 0}px`,
+                                padding: 0,
+                                border: 0,
+                            } }) })), virtualItems.map((virtualRow) => {
+                        const row = rows[virtualRow.index];
+                        if (!row)
+                            return null;
+                        return ((0, jsx_runtime_1.jsx)(rows_1.DataTableRow, { row: row, enableHover: enableHover, enableStripes: enableStripes, isOdd: virtualRow.index % 2 === 1, renderSubComponent: renderSubComponent, disableStickyHeader: enableStickyHeaderOrFooter, onRowClick: onRowClick, selectOnRowClick: selectOnRowClick, slots: slots, slotProps: slotProps }, row.id));
+                    }), virtualItems.length > 0 && ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { colSpan: table.getAllColumns().length, style: {
+                                height: `${rowVirtualizer.getTotalSize() -
+                                    ((_d = (_c = virtualItems[virtualItems.length - 1]) === null || _c === void 0 ? void 0 : _c.end) !== null && _d !== void 0 ? _d : 0)}px`,
+                                padding: 0,
+                                border: 0,
+                            } }) }))] }));
+        }
+        return rows.map((row, index) => ((0, jsx_runtime_1.jsx)(rows_1.DataTableRow, { row: row, enableHover: enableHover, enableStripes: enableStripes, isOdd: index % 2 === 1, renderSubComponent: renderSubComponent, disableStickyHeader: enableStickyHeaderOrFooter, onRowClick: onRowClick, selectOnRowClick: selectOnRowClick, slots: slots, slotProps: slotProps }, row.id)));
+    }, [
+        tableLoading,
+        rows,
+        enableVirtualization,
+        enablePagination,
+        pagination.pageSize,
+        skeletonRows,
+        table,
+        slotProps,
+        emptyMessage,
+        rowVirtualizer,
+        enableHover,
+        enableStripes,
+        renderSubComponent,
+        enableStickyHeaderOrFooter,
+        onRowClick,
+        selectOnRowClick,
+        slots,
+    ]);
+    const { component: RootComponent, props: rootSlotProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'root', material_1.Box, {});
+    const { component: ToolbarComponent, props: toolbarSlotProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'toolbar', toolbar_1.DataTableToolbar, {});
+    const { component: BulkActionsComponent, props: bulkActionsSlotProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'bulkActionsToolbar', toolbar_1.BulkActionsToolbar, {});
+    const { component: TableContainerComponent, props: tableContainerSlotProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'tableContainer', material_1.TableContainer, {});
+    const { component: TableComponent, props: tableComponentSlotProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'table', material_1.Table, {});
+    const { component: BodyComponent, props: bodySlotProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'body', material_1.TableBody, {});
+    const { component: FooterComponent, props: footerSlotProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'footer', material_1.Box, {});
+    const { component: PaginationComponent, props: paginationSlotProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'pagination', pagination_1.DataTablePagination, {});
+    return ((0, jsx_runtime_1.jsxs)(RootComponent, { ...rootSlotProps, children: [(enableGlobalFilter || extraFilter) ? ((0, jsx_runtime_1.jsx)(ToolbarComponent, { extraFilter: extraFilter, enableGlobalFilter: enableGlobalFilter, enableColumnVisibility: enableColumnVisibility, enableColumnFilter: enableColumnFilter, enableExport: enableExport, enableReset: enableReset, enableTableSizeControl: enableTableSizeControl, enableColumnPinning: enableColumnPinning, enableRefresh: enableRefresh, ...toolbarSlotProps, refreshButtonProps: {
+                    loading: tableLoading,
+                    showSpinnerWhileLoading: false,
+                    onRefresh: () => { var _a, _b, _c; return (_c = (_b = (_a = apiRef.current) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.refresh) === null || _c === void 0 ? void 0 : _c.call(_b, true); },
+                    ...toolbarSlotProps.refreshButtonProps,
+                } })) : null, enableBulkActions && enableRowSelection && isSomeRowsSelected ? ((0, jsx_runtime_1.jsx)(BulkActionsComponent, { selectionState: selectionState, selectedRowCount: selectedRowCount, bulkActions: bulkActions, sx: {
+                    position: 'relative',
+                    zIndex: 2,
+                    ...bulkActionsSlotProps.sx,
+                }, ...bulkActionsSlotProps })) : null, (0, jsx_runtime_1.jsx)(TableContainerComponent, { component: material_1.Paper, ref: tableContainerRef, sx: {
+                    width: '100%',
+                    overflowX: 'auto',
+                    ...(enableStickyHeaderOrFooter && {
+                        maxHeight,
+                        overflowY: 'auto',
+                    }),
+                    ...(enableVirtualization && {
+                        maxHeight,
+                        overflowY: 'auto',
+                    }),
+                    ...tableContainerSlotProps === null || tableContainerSlotProps === void 0 ? void 0 : tableContainerSlotProps.sx,
+                }, ...tableContainerSlotProps, children: (0, jsx_runtime_1.jsxs)(TableComponent, { size: tableSize, stickyHeader: enableStickyHeaderOrFooter, style: {
+                        ...tableStyle,
+                        ...tableProps === null || tableProps === void 0 ? void 0 : tableProps.style,
+                    }, ...(0, slot_helpers_1.mergeSlotProps)(tableProps || {}, tableComponentSlotProps), children: [useFixedLayout ? ((0, jsx_runtime_1.jsx)("colgroup", { children: visibleLeafColumns().map((column) => ((0, jsx_runtime_1.jsx)("col", { style: {
+                                    width: column.getSize(),
+                                    minWidth: column.columnDef.minSize,
+                                    maxWidth: column.columnDef.maxSize,
+                                } }, column.id))) })) : null, (0, jsx_runtime_1.jsx)(headers_1.TableHeader, { draggable: enableColumnDragging, enableColumnResizing: enableColumnResizing, enableStickyHeader: enableStickyHeaderOrFooter, onColumnReorder: handleColumnReorder, slots: slots, slotProps: slotProps }), (0, jsx_runtime_1.jsx)(BodyComponent, { ...bodySlotProps, children: renderTableRows() })] }) }), enablePagination ? ((0, jsx_runtime_1.jsx)(FooterComponent, { sx: {
+                    ...(enableStickyHeaderOrFooter && {
+                        position: 'sticky',
+                        bottom: 0,
+                        backgroundColor: 'background.paper',
+                        borderTop: '1px solid',
+                        borderColor: 'divider',
+                        zIndex: 1,
+                    }),
+                    ...footerSlotProps.sx,
+                }, ...footerSlotProps, children: (0, jsx_runtime_1.jsx)(PaginationComponent, { footerFilter: footerFilter, pagination: pagination, totalRow: tableTotalRow, ...paginationSlotProps }) })) : null] }));
+}

package/dist/lib/components/toolbar/column-filter-control.d.ts

@@ -1,5 +1,5 @@
-import { IconButtonProps, SxProps } from '@mui/material';
-import { ReactElement } from 'react';
+import { type IconButtonProps, type SxProps } from "@mui/material";
+import { type ReactElement } from "react";
 export interface ColumnFilterControlProps {
     title?: string;
     titleSx?: SxProps;
@@ -9,6 +9,7 @@ export interface ColumnFilterControlProps {
     clearButtonProps?: any;
     applyButtonProps?: any;
     addButtonProps?: any;
+    deleteButtonProps?: any;
     logicSelectProps?: any;
     [key: string]: any;
 }

package/dist/lib/components/toolbar/column-filter-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"column-filter-control.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/toolbar/column-filter-control.tsx"],"names":[],"mappings":"AACA,OAAO,EAYH,eAAe,EACf,OAAO,EACV,MAAM,eAAe,CAAC;AACvB,OAAc,EAAmC,YAAY,EAAE,MAAM,OAAO,CAAC;AAc7E,MAAM,WAAW,wBAAwB;IAErC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,gBAAgB,CAAC,EAAE,GAAG,CAAC;IACvB,gBAAgB,CAAC,EAAE,GAAG,CAAC;IACvB,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,gBAAgB,CAAC,EAAE,GAAG,CAAC;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,wBAAgB,mBAAmB,CAAC,KAAK,GAAE,wBAA6B,GAAG,YAAY,CAyUtF"}
+{"version":3,"file":"column-filter-control.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/toolbar/column-filter-control.tsx"],"names":[],"mappings":"AACA,OAAO,EAYH,KAAK,eAAe,EACpB,KAAK,OAAO,EACf,MAAM,eAAe,CAAC;AACvB,OAAc,EAMV,KAAK,YAAY,EACpB,MAAM,OAAO,CAAC;AAWf,MAAM,WAAW,wBAAwB;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,UAAU,CAAC,EAAE,GAAG,CAAC;IAEjB,gBAAgB,CAAC,EAAE,GAAG,CAAC;IACvB,gBAAgB,CAAC,EAAE,GAAG,CAAC;IACvB,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,iBAAiB,CAAC,EAAE,GAAG,CAAC;IACxB,gBAAgB,CAAC,EAAE,GAAG,CAAC;IAEvB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAiBD,wBAAgB,mBAAmB,CAAC,KAAK,GAAE,wBAA6B,GAAG,YAAY,CA6WtF"}

package/dist/lib/components/toolbar/column-filter-control.js

@@ -45,43 +45,49 @@ const column_helpers_1 = require("../../utils/column-helpers");
 const slot_helpers_1 = require("../../utils/slot-helpers");
 const filters_1 = require("../filters");
 const filter_value_input_1 = require("../filters/filter-value-input");
+/**
+ * Small helper component to sync MenuDropdown open state to parent state
+ * WITHOUT calling hooks inside render-prop callback.
+ */
+function OpenStateSync({ open, onChange, }) {
+    (0, react_1.useEffect)(() => onChange(open), [open, onChange]);
+    return null;
+}
 function ColumnFilterControl(props = {}) {
     var _a, _b, _c;
     const { table, slots, slotProps } = (0, data_table_context_1.useDataTableContext)();
-    // Extract slot-specific props with enhanced merging
-    const iconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'filterIcon');
-    const FilterIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'filterIcon', icons_material_1.FilterList);
-    // Use the custom feature state from the table - now using pending filters for UI
+    const iconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, "filterIcon");
+    const FilterIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, "filterIcon", icons_material_1.FilterList);
+    const [isMenuOpen, setIsMenuOpen] = (0, react_1.useState)(false);
+    const didAutoAddRef = (0, react_1.useRef)(false);
     const filterState = ((_a = table === null || table === void 0 ? void 0 : table.getColumnFilterState) === null || _a === void 0 ? void 0 : _a.call(table)) || {
         filters: [],
-        logic: 'AND',
+        logic: "AND",
         pendingFilters: [],
-        pendingLogic: 'AND'
+        pendingLogic: "AND",
     };
-    // Use pending filters for the UI (draft state)
-    const filters = filterState.pendingFilters;
-    const filterLogic = filterState.pendingLogic;
-    // Active filters are the actual applied filters
+    const filters = filterState.pendingFilters || [];
+    const filterLogic = (filterState.pendingLogic || "AND");
     const activeFiltersCount = ((_c = (_b = table === null || table === void 0 ? void 0 : table.getActiveColumnFilters) === null || _b === void 0 ? void 0 : _b.call(table)) === null || _c === void 0 ? void 0 : _c.length) || 0;
     const filterableColumns = (0, react_1.useMemo)(() => {
-        return table === null || table === void 0 ? void 0 : table.getAllLeafColumns().filter(column => (0, column_helpers_1.isColumnFilterable)(column));
+        return (table === null || table === void 0 ? void 0 : table.getAllLeafColumns().filter((column) => (0, column_helpers_1.isColumnFilterable)(column))) || [];
     }, [table]);
+    const getOperatorsForColumn = (0, react_1.useCallback)((columnId) => {
+        const column = filterableColumns.find((col) => col.id === columnId);
+        const type = (0, column_helpers_1.getColumnType)(column);
+        return filters_1.FILTER_OPERATORS[type] || filters_1.FILTER_OPERATORS.text;
+    }, [filterableColumns]);
     const addFilter = (0, react_1.useCallback)((columnId, operator) => {
         var _a, _b;
-        // If no column specified, use empty (user will select)
-        // If column specified, get its appropriate default operator
-        let defaultOperator = operator || '';
+        let defaultOperator = operator || "";
         if (columnId && !operator) {
-            const column = filterableColumns === null || filterableColumns === void 0 ? void 0 : filterableColumns.find(col => col.id === columnId);
+            const column = filterableColumns.find((col) => col.id === columnId);
             const columnType = (0, column_helpers_1.getColumnType)(column);
             const operators = filters_1.FILTER_OPERATORS[columnType] || filters_1.FILTER_OPERATORS.text;
-            defaultOperator = ((_a = operators[0]) === null || _a === void 0 ? void 0 : _a.value) || 'contains';
+            defaultOperator = ((_a = operators[0]) === null || _a === void 0 ? void 0 : _a.value) || "contains";
         }
-        (_b = table === null || table === void 0 ? void 0 : table.addPendingColumnFilter) === null || _b === void 0 ? void 0 : _b.call(table, columnId || '', defaultOperator, '');
+        (_b = table === null || table === void 0 ? void 0 : table.addPendingColumnFilter) === null || _b === void 0 ? void 0 : _b.call(table, columnId || "", defaultOperator, "");
     }, [table, filterableColumns]);
-    const handleAddFilter = (0, react_1.useCallback)(() => {
-        addFilter();
-    }, [addFilter]);
     const updateFilter = (0, react_1.useCallback)((filterId, updates) => {
         var _a;
         (_a = table === null || table === void 0 ? void 0 : table.updatePendingColumnFilter) === null || _a === void 0 ? void 0 : _a.call(table, filterId, updates);
@@ -91,117 +97,110 @@ function ColumnFilterControl(props = {}) {
         (_a = table === null || table === void 0 ? void 0 : table.removePendingColumnFilter) === null || _a === void 0 ? void 0 : _a.call(table, filterId);
     }, [table]);
     const clearAllFilters = (0, react_1.useCallback)((closeDialog) => {
-        var _a;
-        // Clear all pending filters
-        (_a = table === null || table === void 0 ? void 0 : table.clearAllPendingColumnFilters) === null || _a === void 0 ? void 0 : _a.call(table);
-        // Immediately apply the clear (which will clear active filters too)
+        // Defer all work to avoid long-running click handler (prevents "[Violation] 'click' handler took Xms")
         setTimeout(() => {
             var _a;
-            (_a = table === null || table === void 0 ? void 0 : table.applyPendingColumnFilters) === null || _a === void 0 ? void 0 : _a.call(table);
-            // Close dialog if callback provided
-            if (closeDialog) {
-                closeDialog();
-            }
+            (_a = table === null || table === void 0 ? void 0 : table.resetColumnFilter) === null || _a === void 0 ? void 0 : _a.call(table);
+            // Prevent auto-add effect from adding a row when it sees empty state after clear
+            didAutoAddRef.current = true;
+            closeDialog === null || closeDialog === void 0 ? void 0 : closeDialog();
         }, 0);
     }, [table]);
-    // Handle filter logic change (AND/OR)
     const handleLogicChange = (0, react_1.useCallback)((newLogic) => {
         var _a;
         (_a = table === null || table === void 0 ? void 0 : table.setPendingFilterLogic) === null || _a === void 0 ? void 0 : _a.call(table, newLogic);
     }, [table]);
-    // Apply all pending filters
     const applyFilters = (0, react_1.useCallback)(() => {
         var _a;
         (_a = table === null || table === void 0 ? void 0 : table.applyPendingColumnFilters) === null || _a === void 0 ? void 0 : _a.call(table);
     }, [table]);
-    // Handle apply button click
     const handleApplyFilters = (0, react_1.useCallback)((closeDialog) => {
-        applyFilters();
-        closeDialog();
+        // Defer so click handler returns immediately (prevents "[Violation] 'click' handler took Xms")
+        setTimeout(() => {
+            applyFilters();
+            closeDialog();
+        }, 0);
     }, [applyFilters]);
-    const getOperatorsForColumn = (0, react_1.useCallback)((columnId) => {
-        const column = filterableColumns === null || filterableColumns === void 0 ? void 0 : filterableColumns.find(col => col.id === columnId);
-        const type = (0, column_helpers_1.getColumnType)(column);
-        return filters_1.FILTER_OPERATORS[type] || filters_1.FILTER_OPERATORS.text;
-    }, [filterableColumns]);
-    // Handle column selection change
     const handleColumnChange = (0, react_1.useCallback)((filterId, newColumnId, currentFilter) => {
         var _a;
-        const newColumn = filterableColumns === null || filterableColumns === void 0 ? void 0 : filterableColumns.find(col => col.id === newColumnId);
+        const newColumn = filterableColumns.find((col) => col.id === newColumnId);
         const columnType = (0, column_helpers_1.getColumnType)(newColumn);
         const operators = filters_1.FILTER_OPERATORS[columnType] || filters_1.FILTER_OPERATORS.text;
-        // Only reset operator if current operator is not valid for new column type
-        const currentOperatorValid = operators.some(op => op.value === currentFilter.operator);
-        const newOperator = currentOperatorValid ? currentFilter.operator : ((_a = operators[0]) === null || _a === void 0 ? void 0 : _a.value) || '';
+        const currentOperatorValid = operators.some((op) => op.value === currentFilter.operator);
+        const newOperator = currentOperatorValid ? currentFilter.operator : ((_a = operators[0]) === null || _a === void 0 ? void 0 : _a.value) || "";
         updateFilter(filterId, {
             columnId: newColumnId,
             operator: newOperator,
-            // Keep the current value unless operator is empty/notEmpty
-            value: ['isEmpty', 'isNotEmpty'].includes(newOperator) ? '' : currentFilter.value,
+            value: ["isEmpty", "isNotEmpty"].includes(newOperator) ? "" : currentFilter.value,
         });
     }, [filterableColumns, updateFilter]);
-    // Handle operator selection change
     const handleOperatorChange = (0, react_1.useCallback)((filterId, newOperator, currentFilter) => {
         updateFilter(filterId, {
             operator: newOperator,
-            // Only reset value if operator is empty/notEmpty, otherwise preserve it
-            value: ['isEmpty', 'isNotEmpty'].includes(newOperator) ? '' : currentFilter.value,
+            value: ["isEmpty", "isNotEmpty"].includes(newOperator) ? "" : currentFilter.value,
         });
     }, [updateFilter]);
-    // Handle filter value change
     const handleFilterValueChange = (0, react_1.useCallback)((filterId, value) => {
         updateFilter(filterId, { value });
     }, [updateFilter]);
-    // Handle filter removal
-    const handleRemoveFilter = (0, react_1.useCallback)((filterId) => {
-        removeFilter(filterId);
-    }, [removeFilter]);
-    // Count pending filters that are ready to apply (have column, operator, and value OR are empty/notEmpty operators)
-    const pendingFiltersCount = filters.filter(f => {
-        if (!f.columnId || !f.operator)
-            return false;
-        // For empty/notEmpty operators, no value is needed
-        if (['isEmpty', 'isNotEmpty'].includes(f.operator))
-            return true;
-        // For other operators, value is required
-        return f.value && f.value.toString().trim() !== '';
-    }).length;
-    // Check if we need to show "Clear Applied Filters" button
+    const pendingReadyCount = (0, react_1.useMemo)(() => {
+        return filters.filter((f) => {
+            if (!f.columnId || !f.operator)
+                return false;
+            if (["isEmpty", "isNotEmpty"].includes(f.operator))
+                return true;
+            return f.value != null && String(f.value).trim() !== "";
+        }).length;
+    }, [filters]);
     const hasAppliedFilters = activeFiltersCount > 0;
-    // Determine if there are pending changes that can be applied
-    const hasPendingChanges = pendingFiltersCount > 0 || (filters.length === 0 && hasAppliedFilters);
-    // Auto-add default filter when opening if no filters exist AND no applied filters
+    const hasPendingChanges = pendingReadyCount > 0 || (filters.length === 0 && hasAppliedFilters);
+    // Auto-add only once per open. If menu opened with existing filters, mark as processed so
+    // "Clear All" doesn't cause a new row to be auto-added when state becomes empty.
     (0, react_1.useEffect)(() => {
         var _a;
-        if (filters.length === 0 && filterableColumns && (filterableColumns === null || filterableColumns === void 0 ? void 0 : filterableColumns.length) > 0 && activeFiltersCount === 0) {
-            const firstColumn = filterableColumns[0];
-            const columnType = (0, column_helpers_1.getColumnType)(firstColumn);
-            const operators = filters_1.FILTER_OPERATORS[columnType] || filters_1.FILTER_OPERATORS.text;
-            const defaultOperator = ((_a = operators[0]) === null || _a === void 0 ? void 0 : _a.value) || 'contains';
-            // Add default filter with first column and its first operator
-            addFilter(firstColumn === null || firstColumn === void 0 ? void 0 : firstColumn.id, defaultOperator);
+        if (!isMenuOpen) {
+            didAutoAddRef.current = false;
+            return;
+        }
+        if (didAutoAddRef.current)
+            return;
+        if (!filterableColumns.length) {
+            didAutoAddRef.current = true;
+            return;
         }
-    }, [filters.length, filterableColumns, addFilter, activeFiltersCount]);
-    // Merge all props for maximum flexibility
-    const mergedProps = (0, slot_helpers_1.mergeSlotProps)({
-        // Default props
-        size: 'small',
-        sx: { flexShrink: 0 },
-    }, (slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnFilterControl) || {}, props);
-    return ((0, jsx_runtime_1.jsx)(menu_dropdown_1.MenuDropdown, { anchor: ((0, jsx_runtime_1.jsx)(material_1.Badge, { badgeContent: activeFiltersCount > 0 ? activeFiltersCount : 0, color: "primary", invisible: activeFiltersCount === 0, ...mergedProps.badgeProps, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { ...mergedProps, children: (0, jsx_runtime_1.jsx)(FilterIconSlot, { ...iconSlotProps }) }) })), children: ({ handleClose }) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+        if (filters.length > 0 || activeFiltersCount > 0) {
+            // Already have filters this session; mark processed so clear won't re-trigger auto-add
+            didAutoAddRef.current = true;
+            return;
+        }
+        const firstColumn = filterableColumns[0];
+        const columnType = (0, column_helpers_1.getColumnType)(firstColumn);
+        const operators = filters_1.FILTER_OPERATORS[columnType] || filters_1.FILTER_OPERATORS.text;
+        const defaultOperator = ((_a = operators[0]) === null || _a === void 0 ? void 0 : _a.value) || "contains";
+        didAutoAddRef.current = true;
+        addFilter(firstColumn.id, defaultOperator);
+    }, [isMenuOpen, filterableColumns, filters.length, activeFiltersCount, addFilter]);
+    // Merge props but do NOT spread non-icon props onto IconButton
+    const mergedProps = (0, slot_helpers_1.mergeSlotProps)({ size: "small", sx: { flexShrink: 0 } }, (slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnFilterControl) || {}, props);
+    const { badgeProps, menuSx, title, titleSx, logicSelectProps, clearButtonProps, applyButtonProps, addButtonProps, deleteButtonProps, iconButtonProps, ...iconButtonRestProps } = mergedProps;
+    return ((0, jsx_runtime_1.jsx)(menu_dropdown_1.MenuDropdown, { anchor: ({ isOpen }) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: "inline-flex" }, children: [(0, jsx_runtime_1.jsx)(OpenStateSync, { open: isOpen, onChange: setIsMenuOpen }), (0, jsx_runtime_1.jsx)(material_1.Badge, { badgeContent: activeFiltersCount > 0 ? activeFiltersCount : 0, color: "primary", invisible: activeFiltersCount === 0, ...badgeProps, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { ...iconButtonRestProps, ...iconButtonProps, children: (0, jsx_runtime_1.jsx)(FilterIconSlot, { ...iconSlotProps }) }) })] })), children: ({ handleClose }) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                 p: 2,
                 minWidth: 400,
                 maxWidth: 600,
-                ...mergedProps.menuSx,
-            }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", sx: {
+                ...(menuSx || {}),
+            }, onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", sx: {
                         mb: 1,
-                        ...mergedProps.titleSx,
-                    }, children: mergedProps.title || 'Column Filters' }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { mb: 2 } }), filters.length > 1 && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { mb: 2 }, children: (0, jsx_runtime_1.jsxs)(material_1.FormControl, { size: "small", sx: { minWidth: 120 }, children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: "Logic" }), (0, jsx_runtime_1.jsxs)(material_1.Select, { value: filterLogic, label: "Logic", onChange: (e) => handleLogicChange(e.target.value), ...mergedProps.logicSelectProps, children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "AND", children: "AND" }), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "OR", children: "OR" })] })] }) })), (0, jsx_runtime_1.jsx)(material_1.Stack, { spacing: 2, sx: { mb: 2 }, children: filters.map((filter) => {
-                        const selectedColumn = filterableColumns === null || filterableColumns === void 0 ? void 0 : filterableColumns.find(col => col.id === filter.columnId);
+                        ...(titleSx || {}),
+                    }, children: title || "Column Filters" }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { mb: 2 } }), filters.length > 1 && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { mb: 2 }, children: (0, jsx_runtime_1.jsxs)(material_1.FormControl, { size: "small", sx: { minWidth: 120 }, children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: "Logic" }), (0, jsx_runtime_1.jsxs)(material_1.Select, { value: filterLogic, label: "Logic", onChange: (e) => handleLogicChange(e.target.value), ...logicSelectProps, children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "AND", children: "AND" }), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "OR", children: "OR" })] })] }) })), (0, jsx_runtime_1.jsx)(material_1.Stack, { spacing: 2, sx: { mb: 2 }, children: filters.map((filter) => {
+                        const selectedColumn = filterableColumns.find((col) => col.id === filter.columnId);
                         const operators = filter.columnId ? getOperatorsForColumn(filter.columnId) : [];
-                        const needsValue = !['isEmpty', 'isNotEmpty'].includes(filter.operator);
-                        return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 1, alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(material_1.FormControl, { size: "small", sx: { minWidth: 120 }, children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: "Column" }), (0, jsx_runtime_1.jsx)(material_1.Select, { value: filter.columnId || '', label: "Column", onChange: (e) => handleColumnChange(filter.id, e.target.value, filter), children: filterableColumns === null || filterableColumns === void 0 ? void 0 : filterableColumns.map(column => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: column.id, children: typeof column.columnDef.header === 'string'
+                        const needsValue = !["isEmpty", "isNotEmpty"].includes(filter.operator);
+                        return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 1, alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(material_1.FormControl, { size: "small", sx: { minWidth: 120 }, children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: "Column" }), (0, jsx_runtime_1.jsx)(material_1.Select, { value: filter.columnId || "", label: "Column", onChange: (e) => handleColumnChange(filter.id, e.target.value, filter), children: filterableColumns.map((column) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: column.id, children: typeof column.columnDef.header === "string"
                                                     ? column.columnDef.header
-                                                    : column.id }, column.id))) })] }), (0, jsx_runtime_1.jsxs)(material_1.FormControl, { size: "small", sx: { minWidth: 120 }, children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: "Operator" }), (0, jsx_runtime_1.jsx)(material_1.Select, { value: filter.operator || '', label: "Operator", onChange: (e) => handleOperatorChange(filter.id, e.target.value, filter), disabled: !filter.columnId, children: operators.map(op => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: op.value, children: op.label }, op.value))) })] }), needsValue && selectedColumn && ((0, jsx_runtime_1.jsx)(filter_value_input_1.FilterValueInput, { filter: filter, column: selectedColumn, onValueChange: (value) => handleFilterValueChange(filter.id, value) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: () => handleRemoveFilter(filter.id), color: "error", ...mergedProps.deleteButtonProps, children: (0, jsx_runtime_1.jsx)(icons_1.DeleteIcon, { fontSize: "small" }) })] }, filter.id));
-                    }) }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", size: "small", startIcon: (0, jsx_runtime_1.jsx)(icons_1.AddIcon, {}), onClick: handleAddFilter, disabled: !filterableColumns || filterableColumns.length === 0, sx: { mb: 2 }, ...mergedProps.addButtonProps, children: "Add Filter" }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 1, justifyContent: "flex-end", children: [hasAppliedFilters && ((0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", size: "small", onClick: () => clearAllFilters(handleClose), color: "error", ...mergedProps.clearButtonProps, children: "Clear All" })), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", size: "small", onClick: () => handleApplyFilters(handleClose), disabled: !hasPendingChanges, ...mergedProps.applyButtonProps, children: "Apply" })] })] })) }));
+                                                    : column.id }, column.id))) })] }), (0, jsx_runtime_1.jsxs)(material_1.FormControl, { size: "small", sx: { minWidth: 120 }, children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: "Operator" }), (0, jsx_runtime_1.jsx)(material_1.Select, { value: filter.operator || "", label: "Operator", onChange: (e) => handleOperatorChange(filter.id, e.target.value, filter), disabled: !filter.columnId, children: operators.map((op) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: op.value, children: op.label }, op.value))) })] }), needsValue && selectedColumn && ((0, jsx_runtime_1.jsx)(filter_value_input_1.FilterValueInput, { filter: filter, column: selectedColumn, onValueChange: (value) => handleFilterValueChange(filter.id, value) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: () => removeFilter(filter.id), color: "error", ...deleteButtonProps, children: (0, jsx_runtime_1.jsx)(icons_1.DeleteIcon, { fontSize: "small" }) })] }, filter.id));
+                    }) }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", size: "small", startIcon: (0, jsx_runtime_1.jsx)(icons_1.AddIcon, {}), onClick: () => addFilter(), disabled: filterableColumns.length === 0, sx: { mb: 2 }, ...addButtonProps, children: "Add Filter" }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 1, justifyContent: "flex-end", children: [hasAppliedFilters && ((0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", size: "small", onClick: (e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                clearAllFilters(handleClose);
+                            }, color: "error", ...clearButtonProps, children: "Clear All" })), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", size: "small", onClick: () => handleApplyFilters(() => handleClose === null || handleClose === void 0 ? void 0 : handleClose()), disabled: !hasPendingChanges, ...applyButtonProps, children: "Apply" })] })] })) }));
 }

package/dist/lib/components/toolbar/data-table-toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-toolbar.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/toolbar/data-table-toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKH,YAAY,EACZ,OAAO,EACV,MAAM,eAAe,CAAC;AACvB,OAAc,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAavD,MAAM,WAAW,qBAAsB,SAAQ,YAAY;IACvD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,wBAAgB,gBAAgB,CAAC,KAAK,GAAE,qBAA0B,GAAG,YAAY,CAwMhF"}
+{"version":3,"file":"data-table-toolbar.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/toolbar/data-table-toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKH,YAAY,EACZ,OAAO,EACV,MAAM,eAAe,CAAC;AACvB,OAAc,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAavD,MAAM,WAAW,qBAAsB,SAAQ,YAAY;IACvD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,wBAAgB,gBAAgB,CAAC,KAAK,GAAE,qBAA0B,GAAG,YAAY,CAsNhF"}

package/dist/lib/components/toolbar/data-table-toolbar.js

@@ -45,7 +45,20 @@ function DataTableToolbar(props = {}) {
         table,
         ...otherProps,
     }, toolbarSlotProps);
-    return ((0, jsx_runtime_1.jsx)(ToolbarSlot, { ...mergedToolbarProps, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+    // Omit child-slot props so they are not spread onto the Toolbar DOM element (React warning)
+    const TOOLBAR_CHILD_SLOT_KEYS = [
+        'refreshButtonProps',
+        'searchInputProps',
+        'tableSizeControlProps',
+        'columnFilterProps',
+        'columnPinningProps',
+        'columnVisibilityProps',
+        'resetButtonProps',
+        'exportButtonProps',
+    ];
+    const toolbarDomProps = { ...mergedToolbarProps };
+    TOOLBAR_CHILD_SLOT_KEYS.forEach((key) => delete toolbarDomProps[key]);
+    return ((0, jsx_runtime_1.jsx)(ToolbarSlot, { ...toolbarDomProps, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                 width: '100%',
                 ...containerSx,
             }, children: [(title || subtitle) ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { mb: 2 }, children: [title ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", component: "div", sx: titleSx, children: title })) : null, subtitle ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", sx: subtitleSx, children: subtitle })) : null] })) : null, (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 2, justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 0.5, alignItems: "center", sx: {

package/dist/lib/components/toolbar/table-export-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-export-control.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/toolbar/table-export-control.tsx"],"names":[],"mappings":"AAEA,OAAO,EAQH,eAAe,EACf,OAAO,EAGV,MAAM,eAAe,CAAC;AAOvB,UAAU,uBAAuB;IAE7B,cAAc,CAAC,EAAE,MAAM,CAAC;IAMxB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,KAAK,GAAE,uBAA4B,OAsMrE"}
+{"version":3,"file":"table-export-control.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/toolbar/table-export-control.tsx"],"names":[],"mappings":"AAEA,OAAO,EAQH,eAAe,EACf,OAAO,EAGV,MAAM,eAAe,CAAC;AAOvB,UAAU,uBAAuB;IAE7B,cAAc,CAAC,EAAE,MAAM,CAAC;IAMxB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,KAAK,GAAE,uBAA4B,OAoMrE"}

package/dist/lib/components/toolbar/table-export-control.js

@@ -85,10 +85,8 @@ function TableExportControl(props = {}) {
                     ...menuSx,
                 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", sx: { p: 2, pb: 1 }, children: "Export Format" }), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, { onClick: () => {
                             handleExport('csv');
-                            handleClose();
                         }, disabled: isExporting, ...mergedMenuItemProps, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(CsvIconSlot, { ...csvIconSlotProps }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: "CSV", secondary: "Comma-separated values" })] }), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, { onClick: () => {
                             handleExport('excel');
-                            handleClose();
                         }, disabled: isExporting, ...mergedMenuItemProps, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(ExcelIconSlot, { ...excelIconSlotProps }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: "Excel", secondary: "Microsoft Excel format" })] }), isExporting && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { px: 2, pb: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", color: "text.secondary", sx: { display: 'block', mb: 0.75 }, children: getPhaseLabel() }), (0, jsx_runtime_1.jsx)(material_1.LinearProgress, { variant: progressPercentage !== undefined ? 'determinate' : 'indeterminate', value: progressPercentage !== undefined ? progressPercentage : 0 }), ((exportProgress === null || exportProgress === void 0 ? void 0 : exportProgress.processedRows) !== undefined || (exportProgress === null || exportProgress === void 0 ? void 0 : exportProgress.totalRows) !== undefined) && ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", color: "text.secondary", sx: { display: 'block', mt: 0.75 }, children: `${(_a = exportProgress === null || exportProgress === void 0 ? void 0 : exportProgress.processedRows) !== null && _a !== void 0 ? _a : 0}${(exportProgress === null || exportProgress === void 0 ? void 0 : exportProgress.totalRows) !== undefined ? ` / ${exportProgress.totalRows}` : ''}${progressPercentage !== undefined ? ` (${progressPercentage}%)` : ''}` }))] }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { my: 1 } }), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { onClick: () => {
                                     handleCancelExport();
                                     handleClose();

package/dist/lib/components/toolbar/table-refresh-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-refresh-control.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/toolbar/table-refresh-control.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAe,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAuB,eAAe,EAAoB,MAAM,eAAe,CAAC;AAKvF,MAAM,WAAW,wBAAwB;IACrC,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,YAAY,CAAC,EAAE,GAAG,CAAC;IAEnB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAEvC,qCAAqC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,gDAAgD;IAChD,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAElC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,wBAAgB,mBAAmB,CAAC,KAAK,GAAE,wBAA6B,GAAG,YAAY,CAkCtF"}
+{"version":3,"file":"table-refresh-control.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/toolbar/table-refresh-control.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAe,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAuB,eAAe,EAAoB,MAAM,eAAe,CAAC;AAKvF,MAAM,WAAW,wBAAwB;IACrC,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,YAAY,CAAC,EAAE,GAAG,CAAC;IAEnB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAEvC,qCAAqC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,gDAAgD;IAChD,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAElC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,wBAAgB,mBAAmB,CAAC,KAAK,GAAE,wBAA6B,GAAG,YAAY,CAsCtF"}

package/dist/lib/components/toolbar/table-refresh-control.js

@@ -57,5 +57,7 @@ function TableRefreshControl(props = {}) {
         disabled: !!props.loading,
         sx: { flexShrink: 0 },
     }, refreshIconSlotProps, props.iconButtonProps || {});
-    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Refresh data", ...props.tooltipProps, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { ...mergedIconButtonProps, children: props.loading && props.showSpinnerWhileLoading ? ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 16 })) : ((0, jsx_runtime_1.jsx)(RefreshIconSlot, { ...refreshIconSlotProps })) }) }));
+    // Wrap in span so when IconButton is disabled (loading), the tooltip still
+    // receives pointer events and closes on mouse leave (disabled elements don't fire them).
+    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Refresh data", ...props.tooltipProps, children: (0, jsx_runtime_1.jsx)("span", { style: { display: 'inline-flex' }, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { ...mergedIconButtonProps, children: props.loading && props.showSpinnerWhileLoading ? ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 16 })) : ((0, jsx_runtime_1.jsx)(RefreshIconSlot, { ...refreshIconSlotProps })) }) }) }));
 }

package/dist/lib/data-table.d.ts

@@ -1,5 +1,2 @@
-/**
- * Main DataTable component with all features
- */
 export declare const DataTable: any;
 //# sourceMappingURL=data-table.d.ts.map