@ackplus/react-tanstack-data-table 1.0.19-beta-0.6 → 1.0.19-beta-0.8

package/src/lib/components/toolbar/column-custom-filter-control.js

@@ -0,0 +1,137 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnCustomFilterControl = ColumnCustomFilterControl;
+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 menu_dropdown_1 = require("../droupdown/menu-dropdown");
+const data_table_context_1 = require("../../contexts/data-table-context");
+const icons_1 = require("../../icons");
+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");
+function ColumnCustomFilterControl() {
+    var _a, _b, _c;
+    const { table, slots, slotProps } = (0, data_table_context_1.useDataTableContext)();
+    const FilterIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'filterIcon', icons_material_1.FilterList);
+    const customFilterState = ((_a = table.getCustomColumnFilterState) === null || _a === void 0 ? void 0 : _a.call(table)) || {
+        filters: [],
+        logic: 'AND',
+        pendingFilters: [],
+        pendingLogic: 'AND'
+    };
+    const filters = customFilterState.pendingFilters;
+    const filterLogic = customFilterState.pendingLogic;
+    const activeFiltersCount = ((_c = (_b = 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.getAllLeafColumns()
+            .filter(column => (0, column_helpers_1.isColumnFilterable)(column));
+    }, [table]);
+    const addFilter = (0, react_1.useCallback)((columnId, operator) => {
+        var _a, _b;
+        let defaultOperator = operator || '';
+        if (columnId && !operator) {
+            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';
+        }
+        (_b = 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.updatePendingColumnFilter) === null || _a === void 0 ? void 0 : _a.call(table, filterId, updates);
+    }, [table]);
+    const removeFilter = (0, react_1.useCallback)((filterId) => {
+        var _a;
+        (_a = table.removePendingColumnFilter) === null || _a === void 0 ? void 0 : _a.call(table, filterId);
+    }, [table]);
+    const clearAllFilters = (0, react_1.useCallback)((closeDialog) => {
+        var _a;
+        (_a = table.clearAllPendingColumnFilters) === null || _a === void 0 ? void 0 : _a.call(table);
+        setTimeout(() => {
+            var _a;
+            (_a = table.applyPendingColumnFilters) === null || _a === void 0 ? void 0 : _a.call(table);
+            if (closeDialog) {
+                closeDialog();
+            }
+        }, 0);
+    }, [table]);
+    const handleLogicChange = (0, react_1.useCallback)((newLogic) => {
+        var _a;
+        (_a = table.setPendingFilterLogic) === null || _a === void 0 ? void 0 : _a.call(table, newLogic);
+    }, [table]);
+    const applyFilters = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = table.applyPendingColumnFilters) === null || _a === void 0 ? void 0 : _a.call(table);
+    }, [table]);
+    const handleApplyFilters = (0, react_1.useCallback)((closeDialog) => {
+        applyFilters();
+        closeDialog();
+    }, [applyFilters]);
+    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 handleColumnChange = (0, react_1.useCallback)((filterId, newColumnId, currentFilter) => {
+        var _a;
+        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;
+        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,
+            value: ['isEmpty', 'isNotEmpty'].includes(newOperator) ? '' : currentFilter.value,
+        });
+    }, [filterableColumns, updateFilter]);
+    const handleOperatorChange = (0, react_1.useCallback)((filterId, newOperator, currentFilter) => {
+        updateFilter(filterId, {
+            operator: newOperator,
+            value: ['isEmpty', 'isNotEmpty'].includes(newOperator) ? '' : currentFilter.value,
+        });
+    }, [updateFilter]);
+    const handleFilterValueChange = (0, react_1.useCallback)((filterId, value) => {
+        updateFilter(filterId, { value });
+    }, [updateFilter]);
+    const handleRemoveFilter = (0, react_1.useCallback)((filterId) => {
+        removeFilter(filterId);
+    }, [removeFilter]);
+    const pendingFiltersCount = filters.filter(f => {
+        if (!f.columnId || !f.operator)
+            return false;
+        if (['isEmpty', 'isNotEmpty'].includes(f.operator))
+            return true;
+        return f.value && f.value.toString().trim() !== '';
+    }).length;
+    const hasAppliedFilters = activeFiltersCount > 0;
+    const hasPendingChanges = pendingFiltersCount > 0 || (filters.length === 0 && hasAppliedFilters);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (filters.length === 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';
+            addFilter(firstColumn.id, defaultOperator);
+        }
+    }, [filters.length, filterableColumns, addFilter, activeFiltersCount]);
+    return ((0, jsx_runtime_1.jsx)(menu_dropdown_1.MenuDropdown, { anchor: ((0, jsx_runtime_1.jsx)(material_1.Badge, { variant: "dot", color: "primary", invisible: activeFiltersCount === 0, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", color: activeFiltersCount > 0 ? 'primary' : 'default', sx: {
+                    flexShrink: 0,
+                }, children: (0, jsx_runtime_1.jsx)(FilterIconSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.filterIcon)) }) })), children: ({ handleClose }) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                p: 2,
+                minWidth: 500,
+                maxWidth: 650,
+            }, children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: 2 }, children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", spacing: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle1", sx: { fontWeight: 'bold' }, children: "Column Filters" }), activeFiltersCount > 0 && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", label: `${activeFiltersCount} active`, color: "primary", variant: "outlined" }))] }), (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", spacing: 1, children: (0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: "outlined", startIcon: (0, jsx_runtime_1.jsx)(icons_1.AddIcon, {}), onClick: handleAddFilter, children: "Add Filter" }) })] }), filters.length > 1 && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { mb: 2 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", sx: { mb: 1 }, children: "Filter Logic:" }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: filterLogic === 'AND' ? 'contained' : 'outlined', onClick: () => handleLogicChange('AND'), children: "AND (All conditions)" }), (0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: filterLogic === 'OR' ? 'contained' : 'outlined', onClick: () => handleLogicChange('OR'), children: "OR (Any condition)" })] })] })), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { mb: 2 } }), filters.length === 0 ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", sx: {
+                        textAlign: 'center',
+                        py: 2,
+                    }, children: "No filters applied. Click \"Add Filter\" to start." })) : ((0, jsx_runtime_1.jsx)(material_1.Stack, { spacing: 2, children: filters.map((filter) => ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (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: 140 }, 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: 160 }, disabled: !filter.columnId, 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), children: getOperatorsForColumn(filter.columnId).map(op => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: op.value, children: op.label }, op.value))) })] }), !['isEmpty', 'isNotEmpty'].includes(filter.operator) ? ((0, jsx_runtime_1.jsx)(filter_value_input_1.FilterValueInput, { filter: filter, column: filterableColumns.find(col => col.id === filter.columnId), onValueChange: (value) => handleFilterValueChange(filter.id, value) })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { flex: 1 } })), (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: () => handleRemoveFilter(filter.id), color: "error", children: (0, jsx_runtime_1.jsx)(icons_1.DeleteIcon, {}) })] }) }, filter.id))) })), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { my: 2 } }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 1, children: [(hasAppliedFilters || filters.length > 0) && ((0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: "text", color: "warning", onClick: () => clearAllFilters(handleClose), startIcon: (0, jsx_runtime_1.jsx)(icons_1.DeleteIcon, {}), children: "Reset" })), !(hasAppliedFilters || filters.length > 0) && (0, jsx_runtime_1.jsx)(material_1.Box, {}), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", onClick: handleClose, children: "Close" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => handleApplyFilters(handleClose), disabled: !hasPendingChanges, children: pendingFiltersCount === 0 && hasAppliedFilters ? 'Clear All Filters' :
+                                        `Apply ${pendingFiltersCount} Filter${pendingFiltersCount !== 1 ? 's' : ''}${pendingFiltersCount > 1 ? ` (${filterLogic})` : ''}` })] })] })] })) }));
+}

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

@@ -0,0 +1 @@
+export declare function ColumnPinningControl(): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/toolbar/column-pinning-control.js

@@ -0,0 +1,105 @@
+"use strict";
+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 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() {
+    var _a, _b;
+    const { table, slots, slotProps } = (0, data_table_context_1.useDataTableContext)();
+    const PinIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'pinIcon', icons_material_1.PushPinOutlined);
+    const UnpinIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'unpinIcon', icons_1.UnpinIcon);
+    const LeftIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'leftIcon', icons_material_1.ArrowLeftOutlined);
+    const RightIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'rightIcon', icons_material_1.ArrowRightOutlined);
+    const columnPinning = table.getState().columnPinning;
+    const allColumns = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        if ((_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnsPanel) === null || _a === void 0 ? void 0 : _a.getPinnableColumns) {
+            return (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnsPanel) === null || _b === void 0 ? void 0 : _b.getPinnableColumns(table.getAllLeafColumns());
+        }
+        return table.getAllLeafColumns().filter(column => column.getCanPin());
+    }, [slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnsPanel, table]);
+    const handlePinColumn = (columnId, position) => {
+        const currentPinning = table.getState().columnPinning;
+        const newPinning = Object.assign({}, currentPinning);
+        newPinning.left = (newPinning.left || []).filter(id => id !== columnId);
+        newPinning.right = (newPinning.right || []).filter(id => id !== columnId);
+        if (position === 'left') {
+            newPinning.left = [...(newPinning.left || []), columnId];
+        }
+        else if (position === 'right') {
+            newPinning.right = [...(newPinning.right || []), columnId];
+        }
+        table.setColumnPinning(newPinning);
+    };
+    const getColumnPinStatus = (columnId) => {
+        var _a, _b;
+        if ((_a = columnPinning.left) === null || _a === void 0 ? void 0 : _a.includes(columnId))
+            return 'left';
+        if ((_b = columnPinning.right) === null || _b === void 0 ? void 0 : _b.includes(columnId))
+            return 'right';
+        return 'none';
+    };
+    const getColumnDisplayName = (column) => {
+        if (typeof column.columnDef.header === 'string') {
+            return column.columnDef.header;
+        }
+        return column.id;
+    };
+    const handleUnpinAll = (0, react_1.useCallback)(() => {
+        table.setColumnPinning(table.initialState.columnPinning || {});
+    }, [table]);
+    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;
+    return ((0, jsx_runtime_1.jsx)(menu_dropdown_1.MenuDropdown, { anchor: ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Pin columns", children: (0, jsx_runtime_1.jsxs)(material_1.IconButton, { size: "small", sx: {
+                    flexShrink: 0,
+                }, children: [(0, jsx_runtime_1.jsx)(PinIconSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.pinIcon)), 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',
+                        }, children: totalPinned }))] }) })), children: ({ handleClose }) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                minWidth: 300,
+                maxHeight: 400,
+                overflow: 'auto',
+            }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                        p: 2,
+                        pb: 1,
+                    }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", sx: { mb: 1 }, children: "Pin Columns" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", color: "text.secondary", children: "Pin columns to keep them visible while scrolling" })] }), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (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: {
+                                    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" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.leftIcon)) }) }), (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" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.rightIcon)) }) }), 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" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.unpinIcon)) }) }))] })), children: (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: displayName, secondary: pinStatus !== 'none' ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        gap: 0.5,
+                                        mt: 0.5,
+                                    }, children: [pinStatus === 'left' ? ((0, jsx_runtime_1.jsx)(LeftIconSlot, Object.assign({ fontSize: "small" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.leftIcon))) : ((0, jsx_runtime_1.jsx)(RightIconSlot, Object.assign({ fontSize: "small" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.rightIcon))), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "caption", color: pinStatus === 'left' ? 'primary' : 'secondary', children: ["Pinned", ' ', pinStatus] })] })) : null }) }, column.id));
+                    }) }), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                        p: 2,
+                        pt: 1,
+                    }, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                            display: 'flex',
+                            gap: 1,
+                            justifyContent: 'space-between',
+                        }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", color: "text.secondary", children: "Quick actions:" }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                                    display: 'flex',
+                                    gap: 1,
+                                }, children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Unpin all user columns", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: handleUnpinAll, disabled: totalPinned === 0, children: (0, jsx_runtime_1.jsx)(icons_1.UnpinIcon, { fontSize: "small" }) }) }) })] }) })] })) }));
+}

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

@@ -0,0 +1 @@
+export declare function ColumnResetControl(): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/toolbar/column-reset-control.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnResetControl = ColumnResetControl;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const data_table_context_1 = require("../../contexts/data-table-context");
+function ColumnResetControl() {
+    const { table } = (0, data_table_context_1.useDataTableContext)();
+    const handleResetLayout = () => {
+        table.resetColumnOrder();
+        table.resetColumnPinning();
+        table.resetColumnSizing();
+    };
+    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Reset layout", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: handleResetLayout, children: (0, jsx_runtime_1.jsx)(icons_material_1.Autorenew, {}) }) }));
+}

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

@@ -0,0 +1 @@
+export declare function ColumnVisibilityControl(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,31 @@
+"use strict";
+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 = 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() {
+    const { table, slots, slotProps } = (0, data_table_context_1.useDataTableContext)();
+    const ColumnIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'columnIcon', icons_material_1.ViewColumnOutlined);
+    const columns = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        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.getAllLeafColumns());
+        }
+        return table.getAllLeafColumns().filter(column => column.getCanHide());
+    }, [slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnsPanel, table]);
+    const handleColumnVisibilityChange = ((columnId, visible) => {
+        var _a;
+        (_a = table.getColumn(columnId)) === null || _a === void 0 ? void 0 : _a.toggleVisibility(visible);
+    });
+    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, { size: "small", sx: {
+                    flexShrink: 0,
+                }, children: (0, jsx_runtime_1.jsx)(ColumnIconSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnIcon)) }) })), children: ({ handleClose }) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                p: 2,
+                minWidth: 200,
+            }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", sx: { mb: 1 }, children: "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" })), label: typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id }, column.id))) })] })) }));
+}

package/src/lib/components/toolbar/data-table-toolbar.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+export interface DataTableToolbarProps {
+    extraFilter?: ReactNode;
+    enableGlobalFilter?: boolean;
+    title?: string;
+    subtitle?: string;
+    enableColumnVisibility?: boolean;
+    enableExport?: boolean;
+    enableReset?: boolean;
+    enableColumnFilter?: boolean;
+    enableTableSizeControl?: boolean;
+    enableColumnPinning?: boolean;
+}
+export declare function DataTableToolbar({ extraFilter, enableGlobalFilter, title, subtitle, enableColumnVisibility, enableExport, enableReset, enableColumnFilter, enableTableSizeControl, enableColumnPinning, }: DataTableToolbarProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataTableToolbar = DataTableToolbar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const column_custom_filter_control_1 = require("./column-custom-filter-control");
+const column_pinning_control_1 = require("./column-pinning-control");
+const column_reset_control_1 = require("./column-reset-control");
+const column_visibility_control_1 = require("./column-visibility-control");
+const table_export_control_1 = require("./table-export-control");
+const table_search_control_1 = require("./table-search-control");
+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({ extraFilter = null, enableGlobalFilter = true, title, subtitle, enableColumnVisibility = true, enableExport = true, enableReset = true, enableColumnFilter = true, enableTableSizeControl = true, enableColumnPinning = true, }) {
+    const { table, slots, slotProps = {} } = (0, data_table_context_1.useDataTableContext)();
+    const ToolbarSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'toolbar', material_1.Toolbar);
+    const TableSearchControlSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'searchInput', table_search_control_1.TableSearchControl);
+    const TableSizeControlSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'tableSizeControl', table_size_control_1.TableSizeControl);
+    const ColumnCustomFilterControlSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'columnCustomFilterControl', column_custom_filter_control_1.ColumnCustomFilterControl);
+    const ColumnPinningControlSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'columnPinningControl', column_pinning_control_1.ColumnPinningControl);
+    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);
+    return ((0, jsx_runtime_1.jsx)(ToolbarSlot, Object.assign({ table: table }, slotProps.toolbar, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { width: '100%' }, 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", children: title })) : null, subtitle ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", 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 }, children: [enableGlobalFilter ? (0, jsx_runtime_1.jsx)(TableSearchControlSlot, Object.assign({}, slotProps.searchInput)) : null, enableTableSizeControl ? (0, jsx_runtime_1.jsx)(TableSizeControlSlot, Object.assign({}, slotProps.tableSizeControl)) : null, enableColumnFilter ? (0, jsx_runtime_1.jsx)(ColumnCustomFilterControlSlot, Object.assign({}, slotProps.columnCustomFilterControl)) : null, enableColumnPinning ? (0, jsx_runtime_1.jsx)(ColumnPinningControlSlot, Object.assign({}, slotProps.columnPinningControl)) : null, enableColumnVisibility ? (0, jsx_runtime_1.jsx)(ColumnVisibilityControlSlot, Object.assign({}, slotProps.columnVisibilityControl)) : null, enableReset ? (0, jsx_runtime_1.jsx)(ColumnResetControlSlot, Object.assign({}, slotProps.resetButton)) : null, enableExport ? (0, jsx_runtime_1.jsx)(TableExportControlSlot, Object.assign({}, slotProps.exportButton)) : null] }), (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", spacing: 1, alignItems: "center", children: extraFilter })] })] }) })));
+}

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

@@ -1,13 +1,8 @@
-/**
- * Toolbar components for DataTable
- */
-// Main toolbar component
 export { DataTableToolbar } from './data-table-toolbar';
-// Individual toolbar building blocks - export for custom toolbars
 export { ColumnVisibilityControl } from './column-visibility-control';
 export { ColumnPinningControl } from './column-pinning-control';
 export { ColumnResetControl } from './column-reset-control';
 export { TableExportControl } from './table-export-control';
 export { TableSizeControl } from './table-size-control';
-// Bulk actions
 export { BulkActionsToolbar } from './bulk-actions-toolbar';
+export type { BulkActionsToolbarProps } from './bulk-actions-toolbar';

package/src/lib/components/toolbar/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BulkActionsToolbar = exports.TableSizeControl = exports.TableExportControl = exports.ColumnResetControl = exports.ColumnPinningControl = exports.ColumnVisibilityControl = exports.DataTableToolbar = void 0;
+var data_table_toolbar_1 = require("./data-table-toolbar");
+Object.defineProperty(exports, "DataTableToolbar", { enumerable: true, get: function () { return data_table_toolbar_1.DataTableToolbar; } });
+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");
+Object.defineProperty(exports, "ColumnPinningControl", { enumerable: true, get: function () { return column_pinning_control_1.ColumnPinningControl; } });
+var column_reset_control_1 = require("./column-reset-control");
+Object.defineProperty(exports, "ColumnResetControl", { enumerable: true, get: function () { return column_reset_control_1.ColumnResetControl; } });
+var table_export_control_1 = require("./table-export-control");
+Object.defineProperty(exports, "TableExportControl", { enumerable: true, get: function () { return table_export_control_1.TableExportControl; } });
+var table_size_control_1 = require("./table-size-control");
+Object.defineProperty(exports, "TableSizeControl", { enumerable: true, get: function () { return table_size_control_1.TableSizeControl; } });
+var bulk_actions_toolbar_1 = require("./bulk-actions-toolbar");
+Object.defineProperty(exports, "BulkActionsToolbar", { enumerable: true, get: function () { return bulk_actions_toolbar_1.BulkActionsToolbar; } });

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

@@ -0,0 +1,25 @@
+import { TableFilters } from '../../types';
+import { SelectionState } from '../../features/custom-selection.feature';
+interface TableExportControlProps {
+    exportFilename?: string;
+    onServerExport?: (filters?: Partial<TableFilters>, selection?: SelectionState) => Promise<{
+        data: any[];
+        total: number;
+    }>;
+    onExportProgress?: (progress: {
+        processedRows: number;
+        totalRows: number;
+        percentage: number;
+    }) => void;
+    onExportComplete?: (result: {
+        success: boolean;
+        filename: string;
+        totalRows: number;
+    }) => void;
+    onExportError?: (error: {
+        message: string;
+        code: string;
+    }) => void;
+}
+export declare function TableExportControl({ exportFilename: propsExportFilename, onServerExport: propsOnServerExport, onExportProgress: propsOnExportProgress, onExportComplete: propsOnExportComplete, onExportError: propsOnExportError, }?: TableExportControlProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableExportControl = TableExportControl;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const menu_dropdown_1 = require("../droupdown/menu-dropdown");
+const data_table_context_1 = require("../../contexts/data-table-context");
+const icons_1 = require("../../icons");
+const export_utils_1 = require("../../utils/export-utils");
+const slot_helpers_1 = require("../../utils/slot-helpers");
+function TableExportControl({ exportFilename: propsExportFilename, onServerExport: propsOnServerExport, onExportProgress: propsOnExportProgress, onExportComplete: propsOnExportComplete, onExportError: propsOnExportError, } = {}) {
+    const { table, apiRef, slots, slotProps, dataMode, isExporting, onCancelExport, exportFilename: contextExportFilename, onServerExport: contextOnServerExport, onExportProgress: contextOnExportProgress, onExportComplete: contextOnExportComplete, onExportError: contextOnExportError, } = (0, data_table_context_1.useDataTableContext)();
+    const exportFilename = propsExportFilename || contextExportFilename || 'export';
+    const onServerExport = propsOnServerExport || contextOnServerExport;
+    const onExportProgress = propsOnExportProgress || contextOnExportProgress;
+    const onExportComplete = propsOnExportComplete || contextOnExportComplete;
+    const onExportError = propsOnExportError || contextOnExportError;
+    const ExportIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'exportIcon', icons_material_1.CloudDownloadOutlined);
+    const CsvIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'csvIcon', icons_1.CsvIcon);
+    const ExcelIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'excelIcon', icons_1.ExcelIcon);
+    const handleExport = (format) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+        var _a, _b;
+        try {
+            if (dataMode === 'server' && onServerExport) {
+                const currentState = table.getState();
+                const currentFilters = {
+                    globalFilter: currentState.globalFilter,
+                    sorting: currentState.sorting,
+                    columnFilters: currentState.columnFilters,
+                };
+                const selectionData = (_b = (_a = apiRef === null || apiRef === void 0 ? void 0 : apiRef.current) === null || _a === void 0 ? void 0 : _a.selection) === null || _b === void 0 ? void 0 : _b.getSelectionState();
+                yield (0, export_utils_1.exportServerData)(table, {
+                    format,
+                    filename: exportFilename,
+                    fetchData: (filters, selection) => onServerExport(filters || currentFilters, selection),
+                    currentFilters,
+                    selection: selectionData,
+                    onProgress: onExportProgress,
+                    onComplete: onExportComplete,
+                    onError: onExportError,
+                });
+            }
+            else {
+                yield (0, export_utils_1.exportClientData)(table, {
+                    format,
+                    filename: exportFilename,
+                    onProgress: onExportProgress,
+                    onComplete: onExportComplete,
+                    onError: onExportError,
+                });
+            }
+        }
+        catch (error) {
+            console.error('Export failed:', error);
+            onExportError === null || onExportError === void 0 ? void 0 : onExportError({
+                message: error instanceof Error ? error.message : 'Export failed',
+                code: 'PROCESSING_ERROR',
+            });
+        }
+    });
+    const selectedRowCount = Object.keys(table.getState().rowSelection).filter(key => table.getState().rowSelection[key]).length;
+    const summary = {
+        filteredRows: table.getFilteredRowModel().rows.length,
+        totalColumns: table.getVisibleLeafColumns().filter(col => col.getIsVisible()).length,
+        selectedRows: selectedRowCount,
+        hasSelection: selectedRowCount > 0,
+    };
+    return ((0, jsx_runtime_1.jsx)(menu_dropdown_1.MenuDropdown, { anchor: ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Export data", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", disabled: isExporting, sx: {
+                    flexShrink: 0,
+                    color: isExporting ? 'warning.main' : 'text.secondary',
+                }, children: (0, jsx_runtime_1.jsx)(ExportIconSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.exportIcon)) }) })), children: ({ handleClose }) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                p: 1,
+                minWidth: 280,
+            }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                        mb: 2,
+                        p: 1,
+                        bgcolor: 'grey.50',
+                        borderRadius: 1,
+                    }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", gutterBottom: true, children: "Export Summary" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", children: summary.hasSelection
+                                ? `${summary.selectedRows} selected • ${summary.totalColumns} visible columns`
+                                : `${summary.filteredRows} filtered • ${summary.totalColumns} visible columns` }), summary.hasSelection ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", color: "primary.main", sx: { fontWeight: 'medium' }, children: "Will export selected rows only" })) : null] }), isExporting ? ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, { onClick: () => {
+                        onCancelExport === null || onCancelExport === void 0 ? void 0 : onCancelExport();
+                        handleClose();
+                    }, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(ExportIconSlot, Object.assign({ fontSize: "small", color: "warning" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.exportIcon)) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: "Cancel Export", secondary: "Stop current export" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.MenuItem, { onClick: () => tslib_1.__awaiter(this, void 0, void 0, function* () {
+                                yield handleExport('csv');
+                                handleClose();
+                            }), disabled: isExporting, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(CsvIconSlot, Object.assign({ fontSize: "small" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.csvIcon)) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: "Export as CSV", secondary: ".csv format" })] }), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, { onClick: () => tslib_1.__awaiter(this, void 0, void 0, function* () {
+                                yield handleExport('excel');
+                                handleClose();
+                            }), disabled: isExporting, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(ExcelIconSlot, Object.assign({ fontSize: "small" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.excelIcon)) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: "Export as Excel", secondary: ".xlsx format" })] })] }))] })) }));
+}

package/src/lib/components/toolbar/table-search-control.d.ts

@@ -0,0 +1 @@
+export declare function TableSearchControl(): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/toolbar/table-search-control.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableSearchControl = TableSearchControl;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const material_2 = require("@mui/material");
+const material_3 = require("@mui/material");
+const material_4 = require("@mui/material");
+const material_5 = require("@mui/material");
+const react_1 = require("react");
+const data_table_context_1 = require("../../contexts/data-table-context");
+const slot_helpers_1 = require("../../utils/slot-helpers");
+function TableSearchControl() {
+    const { table, slots, slotProps } = (0, data_table_context_1.useDataTableContext)();
+    const [searchVisible, setSearchVisible] = (0, react_1.useState)(false);
+    const searchInputRef = (0, react_1.useRef)(null);
+    const globalFilter = table.getState().globalFilter || '';
+    const hasSearch = globalFilter.length > 0;
+    const SearchIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'searchIcon', icons_material_1.Search);
+    const ClearIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'clearIcon', icons_material_1.Clear);
+    const handleChange = (0, react_1.useCallback)((e) => {
+        table.setGlobalFilter(e.target.value);
+    }, [table]);
+    const handleSearchToggle = () => {
+        if (searchVisible || hasSearch) {
+            setSearchVisible(false);
+            table.setGlobalFilter('');
+        }
+        else {
+            setSearchVisible(true);
+        }
+    };
+    const handleSearchClear = () => {
+        table.setGlobalFilter('');
+        if (searchInputRef.current) {
+            searchInputRef.current.focus();
+        }
+    };
+    const handleSearchBlur = () => {
+        if (searchVisible && !hasSearch) {
+            setSearchVisible(false);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (searchVisible && searchInputRef.current) {
+            const timer = setTimeout(() => {
+                var _a;
+                (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 200);
+            return () => clearTimeout(timer);
+        }
+        return undefined;
+    }, [searchVisible]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+            display: 'flex',
+            alignItems: 'center',
+        }, children: [!(searchVisible || hasSearch) && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Search", children: (0, jsx_runtime_1.jsx)(material_2.IconButton, { size: "small", onClick: handleSearchToggle, color: hasSearch ? 'primary' : 'default', sx: {
+                        flexShrink: 0,
+                    }, children: (0, jsx_runtime_1.jsx)(SearchIconSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.searchIcon)) }) })), (0, jsx_runtime_1.jsx)(material_3.Collapse, { in: searchVisible || hasSearch, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(material_4.OutlinedInput, { inputRef: searchInputRef, placeholder: "Search...", value: globalFilter, onChange: handleChange, size: "small", onBlur: handleSearchBlur, sx: { minWidth: 200 }, endAdornment: hasSearch ? ((0, jsx_runtime_1.jsx)(material_5.InputAdornment, { position: "end", children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Clear search", children: (0, jsx_runtime_1.jsx)(material_2.IconButton, { size: "small", onClick: handleSearchClear, edge: "end", children: (0, jsx_runtime_1.jsx)(ClearIconSlot, Object.assign({ size: "small" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.clearIcon)) }) }) })) : null, startAdornment: searchVisible || hasSearch ? ((0, jsx_runtime_1.jsx)(material_5.InputAdornment, { position: "start", children: (0, jsx_runtime_1.jsx)(SearchIconSlot, Object.assign({ size: "small" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.searchIcon)) })) : null }) })] }));
+}

package/src/lib/components/toolbar/table-size-control.d.ts

@@ -0,0 +1 @@
+export declare function TableSizeControl(): import("react/jsx-runtime").JSX.Element;