@ackplus/react-tanstack-data-table 1.0.35 → 1.1.1

package/{src → dist}/lib/components/toolbar/column-filter-control.js

@@ -1,10 +1,43 @@
 "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.ColumnFilterControl = ColumnFilterControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_material_1 = require("@mui/icons-material");
 const material_1 = require("@mui/material");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const menu_dropdown_1 = require("../droupdown/menu-dropdown");
 const data_table_context_1 = require("../../contexts/data-table-context");
 const icons_1 = require("../../icons");
@@ -15,22 +48,28 @@ const filter_value_input_1 = require("../filters/filter-value-input");
 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 filterState = ((_a = table === null || table === void 0 ? void 0 : table.getColumnFilterState) === null || _a === void 0 ? void 0 : _a.call(table)) || {
         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 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));
     }, [table]);
     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 || '';
         if (columnId && !operator) {
             const column = filterableColumns === null || filterableColumns === void 0 ? void 0 : filterableColumns.find(col => col.id === columnId);
@@ -53,23 +92,29 @@ function ColumnFilterControl(props = {}) {
     }, [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)
         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();
             }
         }, 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();
@@ -79,40 +124,53 @@ function ColumnFilterControl(props = {}) {
         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 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) || '';
         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 = (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,
         });
     }, [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 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
     (0, react_1.useEffect)(() => {
         var _a;
         if (filters.length === 0 && filterableColumns && (filterableColumns === null || filterableColumns === void 0 ? void 0 : filterableColumns.length) > 0 && activeFiltersCount === 0) {
@@ -120,19 +178,30 @@ function ColumnFilterControl(props = {}) {
             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);
         }
     }, [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, Object.assign({ badgeContent: activeFiltersCount > 0 ? activeFiltersCount : 0, color: "primary", invisible: activeFiltersCount === 0 }, mergedProps.badgeProps, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({}, mergedProps, { children: (0, jsx_runtime_1.jsx)(FilterIconSlot, Object.assign({}, iconSlotProps)) })) }))), children: ({ handleClose }) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: Object.assign({ p: 2, minWidth: 400, maxWidth: 600 }, mergedProps.menuSx), children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", sx: Object.assign({ 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, Object.assign({ 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, index) => {
+    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: {
+                p: 2,
+                minWidth: 400,
+                maxWidth: 600,
+                ...mergedProps.menuSx,
+            }, 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);
                         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'
                                                     ? 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, Object.assign({ 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, Object.assign({ 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, Object.assign({ variant: "outlined", size: "small", onClick: () => clearAllFilters(handleClose), color: "error" }, mergedProps.clearButtonProps, { children: "Clear All" }))), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ 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: () => 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" })] })] })) }));
 }

package/{src → dist}/lib/components/toolbar/column-pinning-control.d.ts

@@ -9,4 +9,5 @@ export interface ColumnPinningControlProps {
     clearButtonProps?: any;
     [key: string]: any;
 }
-export declare function ColumnPinningControl(props?: ColumnPinningControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function ColumnPinningControl(props?: ColumnPinningControlProps): any;
+//# sourceMappingURL=column-pinning-control.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"column-pinning-control.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/toolbar/column-pinning-control.tsx"],"names":[],"mappings":"AACA,OAAO,EASH,eAAe,EACf,OAAO,EACV,MAAM,eAAe,CAAC;AAWvB,MAAM,WAAW,yBAAyB;IAEtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,gBAAgB,CAAC,EAAE,GAAG,CAAC;IACvB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,wBAAgB,oBAAoB,CAAC,KAAK,GAAE,yBAA8B,OA+OzE"}

package/{src → dist}/lib/components/toolbar/column-pinning-control.js

@@ -1,17 +1,52 @@
 "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.ColumnPinningControl = ColumnPinningControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_material_1 = require("@mui/icons-material");
 const material_1 = require("@mui/material");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const menu_dropdown_1 = require("../droupdown/menu-dropdown");
 const data_table_context_1 = require("../../contexts/data-table-context");
 const icons_1 = require("../../icons");
 const slot_helpers_1 = require("../../utils/slot-helpers");
 function ColumnPinningControl(props = {}) {
     var _a, _b, _c;
+    // Use context if no props provided (MUI DataGrid style)
     const { table, slots, slotProps } = (0, data_table_context_1.useDataTableContext)();
+    // Extract slot-specific props with enhanced merging
     const pinIconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'pinIcon');
     const unpinIconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'unpinIcon');
     const leftIconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'leftIcon');
@@ -30,13 +65,18 @@ function ColumnPinningControl(props = {}) {
     }, [slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnsPanel, table]);
     const handlePinColumn = (columnId, position) => {
         const currentPinning = (table === null || table === void 0 ? void 0 : table.getState().columnPinning) || {};
-        const newPinning = Object.assign({}, currentPinning);
+        const newPinning = { ...currentPinning };
+        // Remove from current position
         newPinning.left = (newPinning.left || []).filter(id => id !== columnId);
         newPinning.right = (newPinning.right || []).filter(id => id !== columnId);
+        // Add to new position
         if (position === 'left') {
+            // Left-pinned: append to end (appears leftmost to rightmost)
             newPinning.left = [...(newPinning.left || []), columnId];
         }
         else if (position === 'right') {
+            // Right-pinned: prepend to beginning (appears rightmost to leftmost)
+            // First column pinned appears rightmost, second appears to its left, etc.
             newPinning.right = [columnId, ...(newPinning.right || [])];
         }
         table === null || table === void 0 ? void 0 : table.setColumnPinning(newPinning);
@@ -59,20 +99,44 @@ function ColumnPinningControl(props = {}) {
         var _a;
         table === null || table === void 0 ? void 0 : table.setColumnPinning(((_a = table === null || table === void 0 ? void 0 : table.initialState) === null || _a === void 0 ? void 0 : _a.columnPinning) || {});
     }, [table]);
+    // Count only user-pinned columns (exclude system columns like select and action)
     const userPinnedLeft = (((_a = columnPinning.left) === null || _a === void 0 ? void 0 : _a.filter((id) => allColumns.some((column) => column.id === id))) || []);
     const userPinnedRight = (((_b = columnPinning.right) === null || _b === void 0 ? void 0 : _b.filter((id) => allColumns.some((column) => column.id === id))) || []);
     const totalPinned = userPinnedLeft.length + userPinnedRight.length;
+    // Merge all props for maximum flexibility
     const mergedIconButtonProps = (0, slot_helpers_1.mergeSlotProps)({
         size: 'small',
         sx: { flexShrink: 0 },
     }, pinIconSlotProps, props.iconButtonProps || {});
-    return ((0, jsx_runtime_1.jsx)(menu_dropdown_1.MenuDropdown, { anchor: ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: "Pin columns" }, props.tooltipProps, { children: (0, jsx_runtime_1.jsxs)(material_1.IconButton, Object.assign({}, mergedIconButtonProps, { children: [(0, jsx_runtime_1.jsx)(PinIconSlot, Object.assign({}, pinIconSlotProps)), totalPinned > 0 && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: Object.assign({ position: 'absolute', top: -2, right: -2, backgroundColor: 'primary.main', color: 'white', borderRadius: '50%', width: 16, height: 16, fontSize: 10, display: 'flex', alignItems: 'center', justifyContent: 'center' }, (_c = props.badgeProps) === null || _c === void 0 ? void 0 : _c.sx) }, props.badgeProps, { children: totalPinned })))] })) }))), children: ({ handleClose }) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: Object.assign({ p: 2, minWidth: 300, maxWidth: 400 }, props.menuSx), children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", sx: Object.assign({ mb: 1 }, props.titleSx), children: props.title || 'Pin Columns' }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { mb: 2 } }), totalPinned > 0 && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { mb: 2 }, children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "small", onClick: handleUnpinAll, color: "warning" }, props.clearButtonProps, { children: (0, jsx_runtime_1.jsx)(UnpinIconSlot, Object.assign({}, unpinIconSlotProps)) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", sx: { ml: 1 }, children: "Unpin all columns" })] })), (0, jsx_runtime_1.jsx)(material_1.List, { dense: true, sx: { py: 0 }, children: allColumns.map((column) => {
+    return ((0, jsx_runtime_1.jsx)(menu_dropdown_1.MenuDropdown, { anchor: ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Pin columns", ...props.tooltipProps, children: (0, jsx_runtime_1.jsxs)(material_1.IconButton, { ...mergedIconButtonProps, children: [(0, jsx_runtime_1.jsx)(PinIconSlot, { ...pinIconSlotProps }), totalPinned > 0 && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                            position: 'absolute',
+                            top: -2,
+                            right: -2,
+                            backgroundColor: 'primary.main',
+                            color: 'white',
+                            borderRadius: '50%',
+                            width: 16,
+                            height: 16,
+                            fontSize: 10,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            ...(_c = props.badgeProps) === null || _c === void 0 ? void 0 : _c.sx,
+                        }, ...props.badgeProps, children: totalPinned }))] }) })), children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                p: 2,
+                minWidth: 300,
+                maxWidth: 400,
+                ...props.menuSx,
+            }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", sx: {
+                        mb: 1,
+                        ...props.titleSx,
+                    }, children: props.title || 'Pin Columns' }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { mb: 2 } }), totalPinned > 0 && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { mb: 2 }, children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: handleUnpinAll, color: "warning", ...props.clearButtonProps, children: (0, jsx_runtime_1.jsx)(UnpinIconSlot, { ...unpinIconSlotProps }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", sx: { ml: 1 }, children: "Unpin all columns" })] })), (0, jsx_runtime_1.jsx)(material_1.List, { dense: true, sx: { py: 0 }, children: allColumns.map((column) => {
                         const pinStatus = getColumnPinStatus(column.id);
                         const displayName = getColumnDisplayName(column);
-                        return ((0, jsx_runtime_1.jsx)(material_1.ListItem, { sx: { py: 0.5 }, secondaryAction: ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                        return ((0, jsx_runtime_1.jsx)(material_1.ListItem, { sx: { py: 0.25 }, secondaryAction: ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
                                     display: 'flex',
                                     gap: 0.5,
-                                }, children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Pin left", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: () => handlePinColumn(column.id, pinStatus === 'left' ? 'none' : 'left'), color: pinStatus === 'left' ? 'primary' : 'default', children: (0, jsx_runtime_1.jsx)(LeftIconSlot, Object.assign({ fontSize: "small" }, leftIconSlotProps)) }) }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Pin right", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: () => handlePinColumn(column.id, pinStatus === 'right' ? 'none' : 'right'), color: pinStatus === 'right' ? 'secondary' : 'default', children: (0, jsx_runtime_1.jsx)(RightIconSlot, Object.assign({ fontSize: "small" }, rightIconSlotProps)) }) }), pinStatus !== 'none' && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Unpin", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: () => handlePinColumn(column.id, 'none'), children: (0, jsx_runtime_1.jsx)(UnpinIconSlot, Object.assign({ fontSize: "small" }, unpinIconSlotProps)) }) }))] })), children: (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: displayName, secondary: pinStatus === 'left' ? 'Pinned left' :
+                                }, children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Pin left", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: () => handlePinColumn(column.id, pinStatus === 'left' ? 'none' : 'left'), color: pinStatus === 'left' ? 'primary' : 'default', children: (0, jsx_runtime_1.jsx)(LeftIconSlot, { fontSize: "small", ...leftIconSlotProps }) }) }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Pin right", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: () => handlePinColumn(column.id, pinStatus === 'right' ? 'none' : 'right'), color: pinStatus === 'right' ? 'secondary' : 'default', children: (0, jsx_runtime_1.jsx)(RightIconSlot, { fontSize: "small", ...rightIconSlotProps }) }) }), pinStatus !== 'none' && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Unpin", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: () => handlePinColumn(column.id, 'none'), children: (0, jsx_runtime_1.jsx)(UnpinIconSlot, { fontSize: "small", ...unpinIconSlotProps }) }) }))] })), children: (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: displayName, secondary: pinStatus === 'left' ? 'Pinned left' :
                                     pinStatus === 'right' ? 'Pinned right' :
                                         'Not pinned', slotProps: {
                                     primary: {
@@ -84,5 +148,5 @@ function ColumnPinningControl(props = {}) {
                                         color: pinStatus !== 'none' ? 'primary.main' : 'text.secondary',
                                     },
                                 } }) }, column.id));
-                    }) })] })) }));
+                    }) })] }) }));
 }

package/{src → dist}/lib/components/toolbar/column-reset-control.d.ts

@@ -1,3 +1,4 @@
+import { ReactElement } from 'react';
 import { IconButtonProps } from '@mui/material';
 export interface ColumnResetControlProps {
     iconButtonProps?: IconButtonProps;
@@ -5,4 +6,5 @@ export interface ColumnResetControlProps {
     resetActions?: ('columnOrder' | 'columnPinning' | 'columnSizing' | 'columnVisibility' | 'filters' | 'sorting' | 'pagination')[];
     [key: string]: any;
 }
-export declare function ColumnResetControl(props?: ColumnResetControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function ColumnResetControl(props?: ColumnResetControlProps): ReactElement;
+//# sourceMappingURL=column-reset-control.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"column-reset-control.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/toolbar/column-reset-control.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAuB,eAAe,EAAE,MAAM,eAAe,CAAC;AAKrE,MAAM,WAAW,uBAAuB;IAEpC,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,aAAa,GAAG,eAAe,GAAG,cAAc,GAAG,kBAAkB,GAAG,SAAS,GAAG,SAAS,GAAG,YAAY,CAAC,EAAE,CAAC;IAChI,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,KAAK,GAAE,uBAA4B,GAAG,YAAY,CA0DpF"}

package/{src → dist}/lib/components/toolbar/column-reset-control.js

@@ -1,13 +1,18 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColumnResetControl = ColumnResetControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
 const icons_material_1 = require("@mui/icons-material");
 const material_1 = require("@mui/material");
 const data_table_context_1 = require("../../contexts/data-table-context");
 const slot_helpers_1 = require("../../utils/slot-helpers");
 function ColumnResetControl(props = {}) {
-    const { apiRef, table, slots, slotProps } = (0, data_table_context_1.useDataTableContext)();
+    const { apiRef, slots, slotProps } = (0, data_table_context_1.useDataTableContext)();
+    // Extract slot-specific props with enhanced merging
     const resetIconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'resetIcon');
     const ResetIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'resetIcon', icons_material_1.Autorenew);
     const handleResetLayout = () => {
@@ -15,6 +20,7 @@ function ColumnResetControl(props = {}) {
         const actions = props.resetActions || ['columnOrder', 'columnPinning', 'columnSizing'];
         if (!(apiRef === null || apiRef === void 0 ? void 0 : apiRef.current))
             return;
+        // Reset based on specified actions
         if (actions.includes('columnOrder')) {
             (_b = (_a = apiRef === null || apiRef === void 0 ? void 0 : apiRef.current) === null || _a === void 0 ? void 0 : _a.columnOrdering) === null || _b === void 0 ? void 0 : _b.resetColumnOrder();
         }
@@ -37,10 +43,11 @@ function ColumnResetControl(props = {}) {
             (_p = (_o = apiRef === null || apiRef === void 0 ? void 0 : apiRef.current) === null || _o === void 0 ? void 0 : _o.pagination) === null || _p === void 0 ? void 0 : _p.resetPagination();
         }
     };
+    // Merge all props for maximum flexibility
     const mergedIconButtonProps = (0, slot_helpers_1.mergeSlotProps)({
         size: 'small',
         onClick: handleResetLayout,
         sx: { flexShrink: 0 },
     }, resetIconSlotProps, props.iconButtonProps || {});
-    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: "Reset layout" }, props.tooltipProps, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({}, mergedIconButtonProps, { children: (0, jsx_runtime_1.jsx)(ResetIconSlot, Object.assign({}, resetIconSlotProps)) })) })));
+    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Reset layout", ...props.tooltipProps, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { ...mergedIconButtonProps, children: (0, jsx_runtime_1.jsx)(ResetIconSlot, { ...resetIconSlotProps }) }) }));
 }

package/{src → dist}/lib/components/toolbar/column-visibility-control.d.ts

@@ -7,4 +7,5 @@ export interface ColumnVisibilityControlProps {
     labelProps?: FormControlLabelProps;
     [key: string]: any;
 }
-export declare function ColumnVisibilityControl(props?: ColumnVisibilityControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function ColumnVisibilityControl(props?: ColumnVisibilityControlProps): any;
+//# sourceMappingURL=column-visibility-control.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"column-visibility-control.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/toolbar/column-visibility-control.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,aAAa,EAA6B,OAAO,EAA8C,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAOpK,MAAM,WAAW,4BAA4B;IAEzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,wBAAgB,uBAAuB,CAAC,KAAK,GAAE,4BAAiC,OAsF/E"}

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

@@ -0,0 +1,77 @@
+"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.ColumnVisibilityControl = ColumnVisibilityControl;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const react_1 = __importStar(require("react"));
+const menu_dropdown_1 = require("../droupdown/menu-dropdown");
+const data_table_context_1 = require("../../contexts/data-table-context");
+const slot_helpers_1 = require("../../utils/slot-helpers");
+function ColumnVisibilityControl(props = {}) {
+    // Use context if no props provided (MUI DataGrid style)
+    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, 'columnIcon');
+    const ColumnIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'columnIcon', icons_material_1.ViewColumnOutlined);
+    const columns = (0, react_1.useMemo)(() => {
+        var _a, _b, _c;
+        if ((_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnsPanel) === null || _a === void 0 ? void 0 : _a.getTogglableColumns) {
+            return (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnsPanel) === null || _b === void 0 ? void 0 : _b.getTogglableColumns((table === null || table === void 0 ? void 0 : table.getAllLeafColumns()) || []);
+        }
+        return ((_c = table === null || table === void 0 ? void 0 : table.getAllLeafColumns()) === null || _c === void 0 ? void 0 : _c.filter(column => column.getCanHide())) || [];
+    }, [slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnsPanel, table]);
+    const handleColumnVisibilityChange = ((columnId, visible) => {
+        var _a;
+        (_a = table === null || table === void 0 ? void 0 : table.getColumn(columnId)) === null || _a === void 0 ? void 0 : _a.toggleVisibility(visible);
+    });
+    // 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.columnVisibilityControl) || {}, props);
+    return ((0, jsx_runtime_1.jsx)(menu_dropdown_1.MenuDropdown, { anchor: ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Column visibility", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { ...mergedProps, children: (0, jsx_runtime_1.jsx)(ColumnIconSlot, { ...iconSlotProps }) }) })), children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                p: 2,
+                minWidth: 200,
+                // Allow user to override these styles
+                ...mergedProps.menuSx,
+            }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", sx: {
+                        mb: 1,
+                        // Allow user to override title styles
+                        ...mergedProps.titleSx,
+                    }, children: mergedProps.title || 'Show/Hide Columns' }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { mb: 1 } }), (0, jsx_runtime_1.jsx)(material_1.FormGroup, { children: columns.map((column) => ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: ((0, jsx_runtime_1.jsx)(material_1.Checkbox, { disabled: !column.getCanHide(), checked: column.getIsVisible(), onChange: (e) => handleColumnVisibilityChange(column.id, e.target.checked), size: "small", ...mergedProps.checkboxProps })), label: typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id, ...mergedProps.labelProps }, column.id))) })] }) }));
+}

package/{src → dist}/lib/components/toolbar/data-table-toolbar.d.ts

@@ -1,5 +1,5 @@
 import { ToolbarProps, SxProps } from '@mui/material';
-import { ReactNode } from 'react';
+import { ReactNode, ReactElement } from 'react';
 export interface DataTableToolbarProps extends ToolbarProps {
     extraFilter?: ReactNode;
     enableGlobalFilter?: boolean;
@@ -18,4 +18,5 @@ export interface DataTableToolbarProps extends ToolbarProps {
     rightSectionSx?: SxProps;
     [key: string]: any;
 }
-export declare function DataTableToolbar(props?: DataTableToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableToolbar(props?: DataTableToolbarProps): ReactElement;
+//# sourceMappingURL=data-table-toolbar.d.ts.map

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

@@ -0,0 +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;AAYvD,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,CA2LhF"}

package/{src → dist}/lib/components/toolbar/data-table-toolbar.js

@@ -1,9 +1,12 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataTableToolbar = DataTableToolbar;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
 const column_filter_control_1 = require("./column-filter-control");
 const column_pinning_control_1 = require("./column-pinning-control");
 const column_reset_control_1 = require("./column-reset-control");
@@ -14,8 +17,9 @@ const table_size_control_1 = require("./table-size-control");
 const data_table_context_1 = require("../../contexts/data-table-context");
 const slot_helpers_1 = require("../../utils/slot-helpers");
 function DataTableToolbar(props = {}) {
-    const { extraFilter = null, enableGlobalFilter = true, title, subtitle, enableColumnVisibility = true, enableExport = true, enableReset = true, enableColumnFilter = true, enableTableSizeControl = true, enableColumnPinning = true, titleSx, subtitleSx, containerSx, leftSectionSx, rightSectionSx } = props, otherProps = tslib_1.__rest(props, ["extraFilter", "enableGlobalFilter", "title", "subtitle", "enableColumnVisibility", "enableExport", "enableReset", "enableColumnFilter", "enableTableSizeControl", "enableColumnPinning", "titleSx", "subtitleSx", "containerSx", "leftSectionSx", "rightSectionSx"]);
+    const { extraFilter = null, enableGlobalFilter = true, title, subtitle, enableColumnVisibility = true, enableExport = true, enableReset = true, enableColumnFilter = true, enableTableSizeControl = true, enableColumnPinning = true, titleSx, subtitleSx, containerSx, leftSectionSx, rightSectionSx, ...otherProps } = props;
     const { table, slots, slotProps = {} } = (0, data_table_context_1.useDataTableContext)();
+    // Extract slot-specific props with enhanced merging
     const toolbarSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'toolbar');
     const searchInputSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'searchInput');
     const tableSizeControlSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'tableSizeControl');
@@ -32,8 +36,17 @@ function DataTableToolbar(props = {}) {
     const ColumnVisibilityControlSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'columnVisibilityControl', column_visibility_control_1.ColumnVisibilityControl);
     const ColumnResetControlSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'resetButton', column_reset_control_1.ColumnResetControl);
     const TableExportControlSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'exportButton', table_export_control_1.TableExportControl);
+    // Merge all props for maximum flexibility
     const mergedToolbarProps = (0, slot_helpers_1.mergeSlotProps)({
+        // Default toolbar props
         table,
-    }, toolbarSlotProps, otherProps);
-    return ((0, jsx_runtime_1.jsx)(ToolbarSlot, Object.assign({}, mergedToolbarProps, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: Object.assign({ 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: Object.assign({ flex: 1 }, leftSectionSx), children: [enableTableSizeControl ? ((0, jsx_runtime_1.jsx)(TableSizeControlSlot, Object.assign({}, (0, slot_helpers_1.mergeSlotProps)({}, tableSizeControlSlotProps, props.tableSizeControlProps || {})))) : null, enableColumnFilter ? ((0, jsx_runtime_1.jsx)(ColumnCustomFilterControlSlot, Object.assign({}, (0, slot_helpers_1.mergeSlotProps)({}, columnCustomFilterControlSlotProps, props.columnFilterProps || {})))) : null, enableColumnPinning ? ((0, jsx_runtime_1.jsx)(ColumnPinningControlSlot, Object.assign({}, (0, slot_helpers_1.mergeSlotProps)({}, columnPinningControlSlotProps, props.columnPinningProps || {})))) : null, enableColumnVisibility ? ((0, jsx_runtime_1.jsx)(ColumnVisibilityControlSlot, Object.assign({}, (0, slot_helpers_1.mergeSlotProps)({}, columnVisibilityControlSlotProps, props.columnVisibilityProps || {})))) : null, enableReset ? ((0, jsx_runtime_1.jsx)(ColumnResetControlSlot, Object.assign({}, (0, slot_helpers_1.mergeSlotProps)({}, resetButtonSlotProps, props.resetButtonProps || {})))) : null, enableExport ? ((0, jsx_runtime_1.jsx)(TableExportControlSlot, Object.assign({}, (0, slot_helpers_1.mergeSlotProps)({}, exportButtonSlotProps, props.exportButtonProps || {})))) : null, enableGlobalFilter ? ((0, jsx_runtime_1.jsx)(TableSearchControlSlot, Object.assign({}, (0, slot_helpers_1.mergeSlotProps)({}, searchInputSlotProps, props.searchInputProps || {})))) : null] }), (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", spacing: 1, alignItems: "center", sx: rightSectionSx, children: extraFilter })] })] }) })));
+        ...otherProps,
+    }, toolbarSlotProps);
+    return ((0, jsx_runtime_1.jsx)(ToolbarSlot, { ...mergedToolbarProps, 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: {
+                                flex: 1,
+                                ...leftSectionSx,
+                            }, children: [enableTableSizeControl ? ((0, jsx_runtime_1.jsx)(TableSizeControlSlot, { ...(0, slot_helpers_1.mergeSlotProps)({}, tableSizeControlSlotProps, props.tableSizeControlProps || {}) })) : null, enableColumnFilter ? ((0, jsx_runtime_1.jsx)(ColumnCustomFilterControlSlot, { ...(0, slot_helpers_1.mergeSlotProps)({}, columnCustomFilterControlSlotProps, props.columnFilterProps || {}) })) : null, enableColumnPinning ? ((0, jsx_runtime_1.jsx)(ColumnPinningControlSlot, { ...(0, slot_helpers_1.mergeSlotProps)({}, columnPinningControlSlotProps, props.columnPinningProps || {}) })) : null, enableColumnVisibility ? ((0, jsx_runtime_1.jsx)(ColumnVisibilityControlSlot, { ...(0, slot_helpers_1.mergeSlotProps)({}, columnVisibilityControlSlotProps, props.columnVisibilityProps || {}) })) : null, enableReset ? ((0, jsx_runtime_1.jsx)(ColumnResetControlSlot, { ...(0, slot_helpers_1.mergeSlotProps)({}, resetButtonSlotProps, props.resetButtonProps || {}) })) : null, enableExport ? ((0, jsx_runtime_1.jsx)(TableExportControlSlot, { ...(0, slot_helpers_1.mergeSlotProps)({}, exportButtonSlotProps, props.exportButtonProps || {}) })) : null, enableGlobalFilter ? ((0, jsx_runtime_1.jsx)(TableSearchControlSlot, { ...(0, slot_helpers_1.mergeSlotProps)({}, searchInputSlotProps, props.searchInputProps || {}) })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", spacing: 1, alignItems: "center", sx: rightSectionSx, children: extraFilter })] })] }) }));
 }

package/{src → dist}/lib/components/toolbar/index.d.ts

@@ -1,3 +1,6 @@
+/**
+ * Toolbar components for DataTable
+ */
 export { DataTableToolbar } from './data-table-toolbar';
 export { ColumnVisibilityControl } from './column-visibility-control';
 export { ColumnPinningControl } from './column-pinning-control';
@@ -7,3 +10,4 @@ export { TableSizeControl } from './table-size-control';
 export { ColumnFilterControl } from './column-filter-control';
 export { BulkActionsToolbar } from './bulk-actions-toolbar';
 export type { BulkActionsToolbarProps } from './bulk-actions-toolbar';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/components/toolbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/toolbar/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAGxD,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAE9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,YAAY,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC"}

package/{src → dist}/lib/components/toolbar/index.js

@@ -1,8 +1,13 @@
 "use strict";
+/**
+ * Toolbar components for DataTable
+ */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BulkActionsToolbar = exports.ColumnFilterControl = exports.TableSizeControl = exports.TableExportControl = exports.ColumnResetControl = exports.ColumnPinningControl = exports.ColumnVisibilityControl = exports.DataTableToolbar = void 0;
+// Main toolbar component
 var data_table_toolbar_1 = require("./data-table-toolbar");
 Object.defineProperty(exports, "DataTableToolbar", { enumerable: true, get: function () { return data_table_toolbar_1.DataTableToolbar; } });
+// Individual toolbar building blocks - export for custom toolbars
 var column_visibility_control_1 = require("./column-visibility-control");
 Object.defineProperty(exports, "ColumnVisibilityControl", { enumerable: true, get: function () { return column_visibility_control_1.ColumnVisibilityControl; } });
 var column_pinning_control_1 = require("./column-pinning-control");
@@ -15,5 +20,6 @@ var table_size_control_1 = require("./table-size-control");
 Object.defineProperty(exports, "TableSizeControl", { enumerable: true, get: function () { return table_size_control_1.TableSizeControl; } });
 var column_filter_control_1 = require("./column-filter-control");
 Object.defineProperty(exports, "ColumnFilterControl", { enumerable: true, get: function () { return column_filter_control_1.ColumnFilterControl; } });
+// Bulk actions
 var bulk_actions_toolbar_1 = require("./bulk-actions-toolbar");
 Object.defineProperty(exports, "BulkActionsToolbar", { enumerable: true, get: function () { return bulk_actions_toolbar_1.BulkActionsToolbar; } });