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

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/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/features/column-filter.feature.d.ts

@@ -28,13 +28,14 @@ declare module '@tanstack/react-table' {
         onColumnFilterApply?: (state: ColumnFilterState) => void;
     }
     interface Table<TData extends RowData> {
-        setColumnFilterState: (updater: Updater<ColumnFilterState>) => void;
+        setColumnFilterState: (updater: Updater<ColumnFilterState> | ColumnFilterState) => void;
         addPendingColumnFilter: (columnId: string, operator: string, value: any) => void;
         updatePendingColumnFilter: (filterId: string, updates: Partial<ColumnFilterRule>) => void;
         removePendingColumnFilter: (filterId: string) => void;
         clearAllPendingColumnFilters: () => void;
         setPendingFilterLogic: (logic: 'AND' | 'OR') => void;
         applyPendingColumnFilters: () => void;
+        resetColumnFilter: () => void;
         addColumnFilter: (columnId: string, operator: string, value: any) => void;
         updateColumnFilter: (filterId: string, updates: Partial<ColumnFilterRule>) => void;
         removeColumnFilter: (filterId: string) => void;

package/dist/lib/features/column-filter.feature.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"column-filter.feature.d.ts","sourceRoot":"","sources":["../../../src/lib/features/column-filter.feature.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EACH,KAAK,EACL,YAAY,EACZ,OAAO,EACP,OAAO,EAGP,QAAQ,EAGX,MAAM,uBAAuB,CAAC;AAG/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAI9D,MAAM,WAAW,gBAAgB;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,mBAAmB;IAChC,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAErE,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC5D;AAGD,OAAO,QAAQ,uBAAuB,CAAC;IACnC,UAAU,UAAU;QAChB,YAAY,EAAE,iBAAiB,CAAC;KACnC;IAED,UAAU,oBAAoB,CAAC,KAAK,SAAS,OAAO;QAChD,yBAAyB,CAAC,EAAE,OAAO,CAAC;QACpC,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;QACrE,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;KAC5D;IAED,UAAU,KAAK,CAAC,KAAK,SAAS,OAAO;QACjC,oBAAoB,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;QAGpE,sBAAsB,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;QACjF,yBAAyB,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;QAC1F,yBAAyB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;QACtD,4BAA4B,EAAE,MAAM,IAAI,CAAC;QACzC,qBAAqB,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,KAAK,IAAI,CAAC;QAGrD,yBAAyB,EAAE,MAAM,IAAI,CAAC;QAGtC,eAAe,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;QAC1E,kBAAkB,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;QACnF,kBAAkB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;QAC/C,qBAAqB,EAAE,MAAM,IAAI,CAAC;QAClC,cAAc,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,KAAK,IAAI,CAAC;QAG9C,sBAAsB,EAAE,MAAM,gBAAgB,EAAE,CAAC;QACjD,uBAAuB,EAAE,MAAM,gBAAgB,EAAE,CAAC;QAClD,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;KACjD;CACJ;AA8BD,eAAO,MAAM,mBAAmB,EAAE,YAAY,CAAC,GAAG,CAqLjD,CAAC;AAEF;;;GAGG;AACH,wBAAgB,0BAA0B,CACtC,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,gBAAgB,EAAE,EAC3B,KAAK,GAAE,KAAK,GAAG,IAAY,GAC5B,OAAO,CA2BT;AAED,eAAO,MAAM,2BAA2B,GAAI,KAAK,QACrC,OAAO,KAAK,CAAC,KAAK,CAAC,WAAS,QAAQ,CAAC,KAAK,CAwCrD,CAAC"}
+{"version":3,"file":"column-filter.feature.d.ts","sourceRoot":"","sources":["../../../src/lib/features/column-filter.feature.ts"],"names":[],"mappings":"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"}

package/dist/lib/features/column-filter.feature.js

@@ -115,6 +115,20 @@ exports.ColumnFilterFeature = {
                 pendingFilters: [],
             }));
         };
+        table.resetColumnFilter = () => {
+            var _a, _b;
+            if (!table.options.enableAdvanceColumnFilter)
+                return;
+            const newState = {
+                pendingFilters: [],
+                pendingLogic: 'AND',
+                filters: [],
+                logic: 'AND',
+            };
+            table.setColumnFilterState(newState);
+            // Notify engine so it can reset pagination and refetch (server mode)
+            (_b = (_a = table.options).onColumnFilterApply) === null || _b === void 0 ? void 0 : _b.call(_a, newState);
+        };
         table.setPendingFilterLogic = (logic) => {
             if (!table.options.enableAdvanceColumnFilter)
                 return;

package/dist/lib/hooks/use-data-table-engine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-data-table-engine.d.ts","sourceRoot":"","sources":["../../../src/lib/hooks/use-data-table-engine.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"use-data-table-engine.d.ts","sourceRoot":"","sources":["../../../src/lib/hooks/use-data-table-engine.ts"],"names":[],"mappings":"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"}

package/dist/lib/hooks/use-data-table-engine.js

@@ -381,7 +381,10 @@ function useDataTableEngine(props) {
         lastServerKeyRef.current = serverKey;
         const delay = (_a = nextFetchDelayRef.current) !== null && _a !== void 0 ? _a : 0;
         nextFetchDelayRef.current = 0; // reset after using
-        void fetchData({}, { delay, meta: { reason: "stateChange" } });
+        const timeoutId = setTimeout(() => {
+            void fetchData({}, { delay, meta: { reason: "stateChange" } });
+        }, 0);
+        return () => clearTimeout(timeoutId);
     }, [serverKey, fetchData]);
     // columnFilter apply handler stays explicit (button), but you can also auto-fetch on change if needed
     const handleColumnFilterChangeHandler = (0, react_1.useCallback)((updater, isApply = false) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ackplus/react-tanstack-data-table",
   "type": "commonjs",
-  "version": "1.1.17",
+  "version": "1.1.18",
   "description": "A powerful React data table component built with MUI and TanStack Table",
   "keywords": [
     "react",

package/src/lib/components/toolbar/column-filter-control.tsx

@@ -1,4 +1,4 @@
-import { FilterList } from '@mui/icons-material';
+import { FilterList } from "@mui/icons-material";
 import {
     Box,
     MenuItem,
@@ -11,242 +11,298 @@ import {
     IconButton,
     Divider,
     Badge,
-    IconButtonProps,
-    SxProps,
-} from '@mui/material';
-import React, { useMemo, useCallback, useEffect, ReactElement } from 'react';
-
-import { MenuDropdown } from '../droupdown/menu-dropdown';
-import { useDataTableContext } from '../../contexts/data-table-context';
-import {
-    AddIcon,
-    DeleteIcon,
-} from '../../icons';
-import { getColumnType, isColumnFilterable } from '../../utils/column-helpers';
-import { getSlotComponent, mergeSlotProps, extractSlotProps } from '../../utils/slot-helpers';
-import { FILTER_OPERATORS } from '../filters';
-import { FilterValueInput } from '../filters/filter-value-input';
-import { ColumnFilterRule } from '../../features';
+    type IconButtonProps,
+    type SxProps,
+} from "@mui/material";
+import React, {
+    useMemo,
+    useCallback,
+    useEffect,
+    useRef,
+    useState,
+    type ReactElement,
+} from "react";
+
+import { MenuDropdown } from "../droupdown/menu-dropdown";
+import { useDataTableContext } from "../../contexts/data-table-context";
+import { AddIcon, DeleteIcon } from "../../icons";
+import { getColumnType, isColumnFilterable } from "../../utils/column-helpers";
+import { getSlotComponent, mergeSlotProps, extractSlotProps } from "../../utils/slot-helpers";
+import { FILTER_OPERATORS } from "../filters";
+import { FilterValueInput } from "../filters/filter-value-input";
+import type { ColumnFilterRule } from "../../features";
 
 export interface ColumnFilterControlProps {
-    // Allow full customization of any prop
     title?: string;
     titleSx?: SxProps;
     menuSx?: SxProps;
+
     iconButtonProps?: IconButtonProps;
     badgeProps?: any;
+
     clearButtonProps?: any;
     applyButtonProps?: any;
     addButtonProps?: any;
+    deleteButtonProps?: any;
     logicSelectProps?: any;
+
     [key: string]: any;
 }
 
+/**
+ * Small helper component to sync MenuDropdown open state to parent state
+ * WITHOUT calling hooks inside render-prop callback.
+ */
+function OpenStateSync({
+    open,
+    onChange,
+}: {
+    open: boolean;
+    onChange: (open: boolean) => void;
+}) {
+    useEffect(() => onChange(open), [open, onChange]);
+    return null;
+}
+
 export function ColumnFilterControl(props: ColumnFilterControlProps = {}): ReactElement {
     const { table, slots, slotProps } = useDataTableContext();
-    
-    // Extract slot-specific props with enhanced merging
-    const iconSlotProps = extractSlotProps(slotProps, 'filterIcon');
-    
-    const FilterIconSlot = getSlotComponent(slots, 'filterIcon', FilterList);
-
-    // Use the custom feature state from the table - now using pending filters for UI
-    const filterState = table?.getColumnFilterState?.() || {
-        filters: [],
-        logic: 'AND',
-        pendingFilters: [],
-        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 iconSlotProps = extractSlotProps(slotProps, "filterIcon");
+    const FilterIconSlot = getSlotComponent(slots, "filterIcon", FilterList);
+
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const didAutoAddRef = useRef(false);
+
+    const filterState =
+        table?.getColumnFilterState?.() || ({
+            filters: [],
+            logic: "AND",
+            pendingFilters: [],
+            pendingLogic: "AND",
+        } as any);
+
+    const filters: ColumnFilterRule[] = filterState.pendingFilters || [];
+    const filterLogic: "AND" | "OR" = (filterState.pendingLogic || "AND") as any;
+
     const activeFiltersCount = table?.getActiveColumnFilters?.()?.length || 0;
 
     const filterableColumns = useMemo(() => {
-        return table?.getAllLeafColumns()
-            .filter(column => isColumnFilterable(column));
+        return table?.getAllLeafColumns().filter((column: any) => isColumnFilterable(column)) || [];
     }, [table]);
 
-    const addFilter = useCallback((columnId?: string, operator?: string) => {
-        // If no column specified, use empty (user will select)
-        // If column specified, get its appropriate default operator
-        let defaultOperator = operator || '';
+    const getOperatorsForColumn = useCallback(
+        (columnId: string) => {
+            const column = filterableColumns.find((col: any) => col.id === columnId);
+            const type = getColumnType(column as any);
+            return FILTER_OPERATORS[type as keyof typeof FILTER_OPERATORS] || FILTER_OPERATORS.text;
+        },
+        [filterableColumns]
+    );
 
-        if (columnId && !operator) {
-            const column = filterableColumns?.find(col => col.id === columnId);
-            const columnType = getColumnType(column as any);
-            const operators = FILTER_OPERATORS[columnType as keyof typeof FILTER_OPERATORS] || FILTER_OPERATORS.text;
-            defaultOperator = operators[0]?.value || 'contains';
-        }
+    const addFilter = useCallback(
+        (columnId?: string, operator?: string) => {
+            let defaultOperator = operator || "";
 
-        table?.addPendingColumnFilter?.(columnId || '', defaultOperator, '');
-    }, [table, filterableColumns]);
+            if (columnId && !operator) {
+                const column = filterableColumns.find((col: any) => col.id === columnId);
+                const columnType = getColumnType(column as any);
+                const operators =
+                    FILTER_OPERATORS[columnType as keyof typeof FILTER_OPERATORS] || FILTER_OPERATORS.text;
+                defaultOperator = operators[0]?.value || "contains";
+            }
 
-    const handleAddFilter = useCallback(() => {
-        addFilter();
-    }, [addFilter]);
+            table?.addPendingColumnFilter?.(columnId || "", defaultOperator, "");
+        },
+        [table, filterableColumns]
+    );
 
-    const updateFilter = useCallback((filterId: string, updates: Partial<ColumnFilterRule>) => {
-        table?.updatePendingColumnFilter?.(filterId, updates);
-    }, [table]);
+    const updateFilter = useCallback(
+        (filterId: string, updates: Partial<ColumnFilterRule>) => {
+            table?.updatePendingColumnFilter?.(filterId, updates);
+        },
+        [table]
+    );
 
-    const removeFilter = useCallback((filterId: string) => {
-        table?.removePendingColumnFilter?.(filterId);
-    }, [table]);
+    const removeFilter = useCallback(
+        (filterId: string) => {
+            table?.removePendingColumnFilter?.(filterId);
+        },
+        [table]
+    );
 
     const clearAllFilters = useCallback((closeDialog?: () => void) => {
-        // Clear all pending filters
-        table?.clearAllPendingColumnFilters?.();
-        // 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(() => {
-            table?.applyPendingColumnFilters?.();
-            // Close dialog if callback provided
-            if (closeDialog) {
-                closeDialog();
-            }
+            table?.resetColumnFilter?.();
+            // Prevent auto-add effect from adding a row when it sees empty state after clear
+            didAutoAddRef.current = true;
+            closeDialog?.();
         }, 0);
     }, [table]);
 
-    // Handle filter logic change (AND/OR)
-    const handleLogicChange = useCallback((newLogic: 'AND' | 'OR') => {
-        table?.setPendingFilterLogic?.(newLogic);
-    }, [table]);
+    const handleLogicChange = useCallback(
+        (newLogic: "AND" | "OR") => {
+            table?.setPendingFilterLogic?.(newLogic);
+        },
+        [table]
+    );
 
-    // Apply all pending filters
     const applyFilters = useCallback(() => {
         table?.applyPendingColumnFilters?.();
     }, [table]);
 
-    // Handle apply button click
-    const handleApplyFilters = useCallback((closeDialog: () => void) => {
-        applyFilters();
-        closeDialog();
-    }, [applyFilters]);
-
-    const getOperatorsForColumn = useCallback((columnId: string) => {
-        const column = filterableColumns?.find(col => col.id === columnId);
-        const type = getColumnType(column as any);
-        return FILTER_OPERATORS[type as keyof typeof FILTER_OPERATORS] || FILTER_OPERATORS.text;
-    }, [filterableColumns]);
-
-    // Handle column selection change
-    const handleColumnChange = useCallback((filterId: string, newColumnId: string, currentFilter: ColumnFilterRule) => {
-        const newColumn = filterableColumns?.find(col => col.id === newColumnId);
-        const columnType = getColumnType(newColumn as any);
-        const operators = FILTER_OPERATORS[columnType as keyof typeof FILTER_OPERATORS] || 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 : operators[0]?.value || '';
-
-        updateFilter(filterId, {
-            columnId: newColumnId,
-            operator: newOperator,
-            // Keep the current value unless operator is empty/notEmpty
-            value: ['isEmpty', 'isNotEmpty'].includes(newOperator) ? '' : currentFilter.value,
-        });
-    }, [filterableColumns, updateFilter]);
-
-    // Handle operator selection change
-    const handleOperatorChange = useCallback((filterId: string, newOperator: string, currentFilter: ColumnFilterRule) => {
-        updateFilter(filterId, {
-            operator: newOperator,
-            // Only reset value if operator is empty/notEmpty, otherwise preserve it
-            value: ['isEmpty', 'isNotEmpty'].includes(newOperator) ? '' : currentFilter.value,
-        });
-    }, [updateFilter]);
-
-    // Handle filter value change
-    const handleFilterValueChange = useCallback((filterId: string, value: any) => {
-        updateFilter(filterId, { value });
-    }, [updateFilter]);
-
-    // Handle filter removal
-    const handleRemoveFilter = useCallback((filterId: string) => {
-        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 hasAppliedFilters = activeFiltersCount > 0;
+    const handleApplyFilters = useCallback(
+        (closeDialog: () => void) => {
+            // Defer so click handler returns immediately (prevents "[Violation] 'click' handler took Xms")
+            setTimeout(() => {
+                applyFilters();
+                closeDialog();
+            }, 0);
+        },
+        [applyFilters]
+    );
 
-    // Determine if there are pending changes that can be applied
-    const hasPendingChanges = pendingFiltersCount > 0 || (filters.length === 0 && hasAppliedFilters);
+    const handleColumnChange = useCallback(
+        (filterId: string, newColumnId: string, currentFilter: ColumnFilterRule) => {
+            const newColumn = filterableColumns.find((col: any) => col.id === newColumnId);
+            const columnType = getColumnType(newColumn as any);
+            const operators =
+                FILTER_OPERATORS[columnType as keyof typeof FILTER_OPERATORS] || FILTER_OPERATORS.text;
+
+            const currentOperatorValid = operators.some((op) => op.value === currentFilter.operator);
+            const newOperator = currentOperatorValid ? currentFilter.operator : operators[0]?.value || "";
+
+            updateFilter(filterId, {
+                columnId: newColumnId,
+                operator: newOperator,
+                value: ["isEmpty", "isNotEmpty"].includes(newOperator) ? "" : currentFilter.value,
+            });
+        },
+        [filterableColumns, updateFilter]
+    );
+
+    const handleOperatorChange = useCallback(
+        (filterId: string, newOperator: string, currentFilter: ColumnFilterRule) => {
+            updateFilter(filterId, {
+                operator: newOperator,
+                value: ["isEmpty", "isNotEmpty"].includes(newOperator) ? "" : currentFilter.value,
+            });
+        },
+        [updateFilter]
+    );
+
+    const handleFilterValueChange = useCallback(
+        (filterId: string, value: any) => {
+            updateFilter(filterId, { value });
+        },
+        [updateFilter]
+    );
+
+    const pendingReadyCount = 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;
+    const hasPendingChanges = pendingReadyCount > 0 || (filters.length === 0 && hasAppliedFilters);
 
-    // Auto-add default filter when opening if no filters exist AND no applied filters
+    // 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.
     useEffect(() => {
-        if (filters.length === 0 && filterableColumns && filterableColumns?.length > 0 && activeFiltersCount === 0) {
-            const firstColumn = filterableColumns[0];
-            const columnType = getColumnType(firstColumn as any);
-            const operators = FILTER_OPERATORS[columnType as keyof typeof FILTER_OPERATORS] || FILTER_OPERATORS.text;
-            const defaultOperator = operators[0]?.value || 'contains';
-            // Add default filter with first column and its first operator
-            addFilter(firstColumn?.id, defaultOperator);
+        if (!isMenuOpen) {
+            didAutoAddRef.current = false;
+            return;
         }
-    }, [filters.length, filterableColumns, addFilter, activeFiltersCount]);
+        if (didAutoAddRef.current) return;
+        if (!filterableColumns.length) {
+            didAutoAddRef.current = true;
+            return;
+        }
+        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 = getColumnType(firstColumn as any);
+        const operators =
+            FILTER_OPERATORS[columnType as keyof typeof FILTER_OPERATORS] || FILTER_OPERATORS.text;
+        const defaultOperator = operators[0]?.value || "contains";
+
+        didAutoAddRef.current = true;
+        addFilter(firstColumn.id, defaultOperator);
+    }, [isMenuOpen, filterableColumns, filters.length, activeFiltersCount, addFilter]);
 
-    // Merge all props for maximum flexibility
+    // Merge props but do NOT spread non-icon props onto IconButton
     const mergedProps = mergeSlotProps(
-        {
-            // Default props
-            size: 'small',
-            sx: { flexShrink: 0 },
-        },
+        { size: "small", sx: { flexShrink: 0 } },
         slotProps?.columnFilterControl || {},
         props
     );
 
+    const {
+        badgeProps,
+        menuSx,
+        title,
+        titleSx,
+        logicSelectProps,
+        clearButtonProps,
+        applyButtonProps,
+        addButtonProps,
+        deleteButtonProps,
+        iconButtonProps,
+        ...iconButtonRestProps
+    } = mergedProps;
+
     return (
         <MenuDropdown
-            anchor={(
-                <Badge
-                    badgeContent={activeFiltersCount > 0 ? activeFiltersCount : 0}
-                    color="primary"
-                    invisible={activeFiltersCount === 0}
-                    {...mergedProps.badgeProps}
-                >
-                    <IconButton
-                        {...mergedProps}
+            anchor={({ isOpen }) => (
+                <Box sx={{ display: "inline-flex" }}>
+                    {/* sync dropdown open state to our local state */}
+                    <OpenStateSync open={isOpen} onChange={setIsMenuOpen} />
+
+                    <Badge
+                        badgeContent={activeFiltersCount > 0 ? activeFiltersCount : 0}
+                        color="primary"
+                        invisible={activeFiltersCount === 0}
+                        {...badgeProps}
                     >
-                        <FilterIconSlot
-                            {...iconSlotProps}
-                        />
-                    </IconButton>
-                </Badge>
+                        <IconButton
+                            {...(iconButtonRestProps as IconButtonProps)}
+                            {...(iconButtonProps as IconButtonProps)}
+                        >
+                            <FilterIconSlot {...iconSlotProps} />
+                        </IconButton>
+                    </Badge>
+                </Box>
             )}
         >
-            {({ handleClose }: { handleClose: () => void }) => (
+            {({ handleClose }: { handleClose: (event?: any) => void }) => (
                 <Box
                     sx={{
                         p: 2,
                         minWidth: 400,
                         maxWidth: 600,
-                        ...mergedProps.menuSx,
+                        ...(menuSx || {}),
                     }}
+                    onClick={(e) => e.stopPropagation()}
                 >
                     <Typography
                         variant="subtitle2"
                         sx={{
                             mb: 1,
-                            ...mergedProps.titleSx,
+                            ...(titleSx || {}),
                         }}
                     >
-                        {mergedProps.title || 'Column Filters'}
+                        {title || "Column Filters"}
                     </Typography>
+
                     <Divider sx={{ mb: 2 }} />
 
-                    {/* Filter Logic Selection */}
                     {filters.length > 1 && (
                         <Box sx={{ mb: 2 }}>
                             <FormControl size="small" sx={{ minWidth: 120 }}>
@@ -254,8 +310,8 @@ export function ColumnFilterControl(props: ColumnFilterControlProps = {}): React
                                 <Select
                                     value={filterLogic}
                                     label="Logic"
-                                    onChange={(e) => handleLogicChange(e.target.value as 'AND' | 'OR')}
-                                    {...mergedProps.logicSelectProps}
+                                    onChange={(e) => handleLogicChange(e.target.value as "AND" | "OR")}
+                                    {...logicSelectProps}
                                 >
                                     <MenuItem value="AND">AND</MenuItem>
                                     <MenuItem value="OR">OR</MenuItem>
@@ -264,26 +320,26 @@ export function ColumnFilterControl(props: ColumnFilterControlProps = {}): React
                         </Box>
                     )}
 
-                    {/* Filter Rules */}
                     <Stack spacing={2} sx={{ mb: 2 }}>
                         {filters.map((filter) => {
-                            const selectedColumn = filterableColumns?.find(col => col.id === filter.columnId);
+                            const selectedColumn = filterableColumns.find((col: any) => col.id === filter.columnId);
                             const operators = filter.columnId ? getOperatorsForColumn(filter.columnId) : [];
-                            const needsValue = !['isEmpty', 'isNotEmpty'].includes(filter.operator);
+                            const needsValue = !["isEmpty", "isNotEmpty"].includes(filter.operator);
 
                             return (
                                 <Stack key={filter.id} direction="row" spacing={1} alignItems="center">
-                                    {/* Column Selection */}
                                     <FormControl size="small" sx={{ minWidth: 120 }}>
                                         <InputLabel>Column</InputLabel>
                                         <Select
-                                            value={filter.columnId || ''}
+                                            value={filter.columnId || ""}
                                             label="Column"
-                                            onChange={(e) => handleColumnChange(filter.id, e.target.value, filter)}
+                                            onChange={(e) =>
+                                                handleColumnChange(filter.id, e.target.value as string, filter)
+                                            }
                                         >
-                                            {filterableColumns?.map(column => (
+                                            {filterableColumns.map((column: any) => (
                                                 <MenuItem key={column.id} value={column.id}>
-                                                    {typeof column.columnDef.header === 'string'
+                                                    {typeof column.columnDef.header === "string"
                                                         ? column.columnDef.header
                                                         : column.id}
                                                 </MenuItem>
@@ -291,16 +347,17 @@ export function ColumnFilterControl(props: ColumnFilterControlProps = {}): React
                                         </Select>
                                     </FormControl>
 
-                                    {/* Operator Selection */}
                                     <FormControl size="small" sx={{ minWidth: 120 }}>
                                         <InputLabel>Operator</InputLabel>
                                         <Select
-                                            value={filter.operator || ''}
+                                            value={filter.operator || ""}
                                             label="Operator"
-                                            onChange={(e) => handleOperatorChange(filter.id, e.target.value, filter)}
+                                            onChange={(e) =>
+                                                handleOperatorChange(filter.id, e.target.value as string, filter)
+                                            }
                                             disabled={!filter.columnId}
                                         >
-                                            {operators.map(op => (
+                                            {operators.map((op: any) => (
                                                 <MenuItem key={op.value} value={op.value}>
                                                     {op.label}
                                                 </MenuItem>
@@ -308,7 +365,6 @@ export function ColumnFilterControl(props: ColumnFilterControlProps = {}): React
                                         </Select>
                                     </FormControl>
 
-                                    {/* Value Input */}
                                     {needsValue && selectedColumn && (
                                         <FilterValueInput
                                             filter={filter}
@@ -317,52 +373,54 @@ export function ColumnFilterControl(props: ColumnFilterControlProps = {}): React
                                         />
                                     )}
 
-                                                                         {/* Remove Filter Button */}
-                                     <IconButton
-                                         size="small"
-                                         onClick={() => handleRemoveFilter(filter.id)}
-                                         color="error"
-                                         {...mergedProps.deleteButtonProps}
-                                     >
-                                         <DeleteIcon fontSize="small" />
-                                     </IconButton>
+                                    <IconButton
+                                        size="small"
+                                        onClick={() => removeFilter(filter.id)}
+                                        color="error"
+                                        {...deleteButtonProps}
+                                    >
+                                        <DeleteIcon fontSize="small" />
+                                    </IconButton>
                                 </Stack>
                             );
                         })}
                     </Stack>
 
-                                         {/* Add Filter Button */}
-                     <Button
-                         variant="outlined"
-                         size="small"
-                         startIcon={<AddIcon />}
-                         onClick={handleAddFilter}
-                         disabled={!filterableColumns || filterableColumns.length === 0}
-                         sx={{ mb: 2 }}
-                         {...mergedProps.addButtonProps}
-                     >
-                         Add Filter
-                     </Button>
-
-                    {/* Action Buttons */}
+                    <Button
+                        variant="outlined"
+                        size="small"
+                        startIcon={<AddIcon />}
+                        onClick={() => addFilter()}
+                        disabled={filterableColumns.length === 0}
+                        sx={{ mb: 2 }}
+                        {...addButtonProps}
+                    >
+                        Add Filter
+                    </Button>
+
                     <Stack direction="row" spacing={1} justifyContent="flex-end">
                         {hasAppliedFilters && (
                             <Button
                                 variant="outlined"
                                 size="small"
-                                onClick={() => clearAllFilters(handleClose)}
+                                onClick={(e) => {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    clearAllFilters(handleClose);
+                                }}
                                 color="error"
-                                {...mergedProps.clearButtonProps}
+                                {...clearButtonProps}
                             >
                                 Clear All
                             </Button>
                         )}
+
                         <Button
                             variant="contained"
                             size="small"
-                            onClick={() => handleApplyFilters(handleClose)}
+                            onClick={() => handleApplyFilters(() => handleClose?.())}
                             disabled={!hasPendingChanges}
-                            {...mergedProps.applyButtonProps}
+                            {...applyButtonProps}
                         >
                             Apply
                         </Button>
@@ -371,4 +429,4 @@ export function ColumnFilterControl(props: ColumnFilterControlProps = {}): React
             )}
         </MenuDropdown>
     );
-}
+}

package/src/lib/components/toolbar/table-refresh-control.tsx

@@ -44,15 +44,19 @@ export function TableRefreshControl(props: TableRefreshControlProps = {}): React
         props.iconButtonProps || {}
     );
 
+    // 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 (
         <Tooltip title="Refresh data" {...props.tooltipProps}>
-            <IconButton {...mergedIconButtonProps}>
-                {props.loading && props.showSpinnerWhileLoading ? (
-                    <CircularProgress size={16} />
-                ) : (
-                    <RefreshIconSlot {...refreshIconSlotProps} />
-                )}
-            </IconButton>
+            <span style={{ display: 'inline-flex' }}>
+                <IconButton {...mergedIconButtonProps}>
+                    {props.loading && props.showSpinnerWhileLoading ? (
+                        <CircularProgress size={16} />
+                    ) : (
+                        <RefreshIconSlot {...refreshIconSlotProps} />
+                    )}
+                </IconButton>
+            </span>
         </Tooltip>
     );
 }

package/src/lib/features/column-filter.feature.ts

@@ -49,7 +49,7 @@ declare module '@tanstack/react-table' {
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     interface Table<TData extends RowData> {
-        setColumnFilterState: (updater: Updater<ColumnFilterState>) => void;
+        setColumnFilterState: (updater: Updater<ColumnFilterState> | ColumnFilterState) => void;
 
         // Pending filter methods (for draft state)
         addPendingColumnFilter: (columnId: string, operator: string, value: any) => void;
@@ -60,6 +60,7 @@ declare module '@tanstack/react-table' {
 
         // Apply pending filters to active filters
         applyPendingColumnFilters: () => void;
+        resetColumnFilter: () => void;
 
         // Legacy methods (for backward compatibility)
         addColumnFilter: (columnId: string, operator: string, value: any) => void;
@@ -187,6 +188,19 @@ export const ColumnFilterFeature: TableFeature<any> = {
             }));
         };
 
+        table.resetColumnFilter = () => {
+            if (!table.options.enableAdvanceColumnFilter) return;
+            const newState: ColumnFilterState = {
+                pendingFilters: [],
+                pendingLogic: 'AND',
+                filters: [],
+                logic: 'AND',
+            };
+            table.setColumnFilterState(newState);
+            // Notify engine so it can reset pagination and refetch (server mode)
+            table.options.onColumnFilterApply?.(newState);
+        };
+
         table.setPendingFilterLogic = (logic: 'AND' | 'OR') => {
             if (!table.options.enableAdvanceColumnFilter) return;
             table.setColumnFilterState((old) => ({

package/src/lib/hooks/use-data-table-engine.ts

@@ -628,7 +628,10 @@ export function useDataTableEngine<T extends Record<string, any>>(
         const delay = nextFetchDelayRef.current ?? 0;
         nextFetchDelayRef.current = 0; // reset after using
 
-        void fetchData({}, { delay, meta: { reason: "stateChange" } });
+        const timeoutId = setTimeout(() => {
+            void fetchData({}, { delay, meta: { reason: "stateChange" } });
+        }, 0);
+        return () => clearTimeout(timeoutId);
     }, [serverKey, fetchData]);
 
     // columnFilter apply handler stays explicit (button), but you can also auto-fetch on change if needed