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

package/lib/components/table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/table/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC"}

package/lib/components/table/index.js

@@ -0,0 +1,5 @@
+/**
+ * Main table components
+ */
+export * from './data-table.types';
+export * from './data-table';

package/lib/components/toolbar/bulk-actions-toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bulk-actions-toolbar.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/toolbar/bulk-actions-toolbar.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAI3C,OAAO,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAC;AAGzE,MAAM,WAAW,uBAAuB,CAAC,CAAC,GAAG,GAAG;IAC5C,cAAc,EAAE,cAAc,CAAC;IAC/B,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,CAAC,cAAc,EAAE,cAAc,KAAK,SAAS,CAAC;IAC5D,EAAE,CAAC,EAAE,GAAG,CAAC;CACZ;AAED,wBAAgB,kBAAkB,CAAC,CAAC,GAAG,GAAG,EAAE,EACxC,cAAc,EACd,gBAAgB,EAChB,WAAW,EACX,EAAE,GACL,EAAE,uBAAuB,CAAC,CAAC,CAAC,2CAwD5B"}

package/lib/components/toolbar/bulk-actions-toolbar.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Toolbar, Typography, Chip, Fade, alpha, } from '@mui/material';
+import { useMemo } from 'react';
+import { useDataTableContext } from '../../contexts/data-table-context';
+import { getSlotComponent } from '../../utils/slot-helpers';
+export function BulkActionsToolbar({ selectionState, selectedRowCount, bulkActions, sx, }) {
+    const { slots, slotProps } = useDataTableContext();
+    const ToolbarSlot = getSlotComponent(slots, 'toolbar', Toolbar);
+    // Memoize the bulk actions rendering to prevent infinite re-renders
+    const renderedBulkActions = useMemo(() => {
+        if (!bulkActions)
+            return null;
+        return bulkActions(selectionState);
+    }, [bulkActions, selectionState]);
+    return (_jsx(Fade, { in: selectedRowCount > 0, children: _jsxs(ToolbarSlot, { sx: {
+                pl: { sm: 2 },
+                pr: {
+                    xs: 1,
+                    sm: 1,
+                },
+                bgcolor: (theme) => alpha(theme.palette.primary.main, 0.05),
+                mb: 1,
+                position: 'relative',
+                zIndex: 1,
+                ...sx,
+            }, ...slotProps?.bulkActionsToolbar, children: [_jsx(Box, { sx: { flex: '1 1 100%' }, children: _jsx(Typography, { color: "inherit", variant: "subtitle1", component: "div", children: _jsx(Chip, { label: `${selectedRowCount} selected`, size: "small", color: "primary", variant: "outlined" }) }) }), _jsx(Box, { sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 1,
+                    }, children: renderedBulkActions })] }) }));
+}

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

@@ -0,0 +1 @@
+{"version":3,"file":"column-custom-filter-control.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/toolbar/column-custom-filter-control.tsx"],"names":[],"mappings":"AA8BA,wBAAgB,yBAAyB,4CAwYxC"}

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

@@ -0,0 +1,149 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FilterList } from '@mui/icons-material';
+import { Box, MenuItem, Select, FormControl, InputLabel, Button, Stack, Typography, Chip, IconButton, Divider, Badge, } from '@mui/material';
+import { useMemo, useCallback, useEffect } from 'react';
+import { MenuDropdown } from '../droupdown/menu-dropdown';
+import { useDataTableContext } from '../../contexts/data-table-context';
+import { AddIcon, DeleteIcon, } from '../../icons';
+import { getColumnType, isColumnFilterable } from '../../utils/column-helpers';
+import { getSlotComponent } from '../../utils/slot-helpers';
+import { FILTER_OPERATORS } from '../filters';
+import { FilterValueInput } from '../filters/filter-value-input';
+export function ColumnCustomFilterControl() {
+    const { table, slots, slotProps } = useDataTableContext();
+    const FilterIconSlot = getSlotComponent(slots, 'filterIcon', FilterList);
+    // Use the custom feature state from the table - now using pending filters for UI
+    const customFilterState = table.getCustomColumnFilterState?.() || {
+        filters: [],
+        logic: 'AND',
+        pendingFilters: [],
+        pendingLogic: 'AND'
+    };
+    // Use pending filters for the UI (draft state)
+    const filters = customFilterState.pendingFilters;
+    const filterLogic = customFilterState.pendingLogic;
+    // Active filters are the actual applied filters
+    const activeFiltersCount = table.getActiveColumnFilters?.()?.length || 0;
+    const filterableColumns = useMemo(() => {
+        return table.getAllLeafColumns()
+            .filter(column => isColumnFilterable(column));
+    }, [table]);
+    const addFilter = useCallback((columnId, operator) => {
+        // 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.find(col => col.id === columnId);
+            const columnType = getColumnType(column);
+            const operators = FILTER_OPERATORS[columnType] || FILTER_OPERATORS.text;
+            defaultOperator = operators[0]?.value || 'contains';
+        }
+        table.addPendingColumnFilter?.(columnId || '', defaultOperator, '');
+    }, [table, filterableColumns]);
+    const handleAddFilter = useCallback(() => {
+        addFilter();
+    }, [addFilter]);
+    const updateFilter = useCallback((filterId, updates) => {
+        table.updatePendingColumnFilter?.(filterId, updates);
+    }, [table]);
+    const removeFilter = useCallback((filterId) => {
+        table.removePendingColumnFilter?.(filterId);
+    }, [table]);
+    const clearAllFilters = useCallback((closeDialog) => {
+        // Clear all pending filters
+        table.clearAllPendingColumnFilters?.();
+        // Immediately apply the clear (which will clear active filters too)
+        setTimeout(() => {
+            table.applyPendingColumnFilters?.();
+            // Close dialog if callback provided
+            if (closeDialog) {
+                closeDialog();
+            }
+        }, 0);
+    }, [table]);
+    // Handle filter logic change (AND/OR)
+    const handleLogicChange = useCallback((newLogic) => {
+        table.setPendingFilterLogic?.(newLogic);
+    }, [table]);
+    // Apply all pending filters
+    const applyFilters = useCallback(() => {
+        table.applyPendingColumnFilters?.();
+    }, [table]);
+    // Handle apply button click
+    const handleApplyFilters = useCallback((closeDialog) => {
+        applyFilters();
+        closeDialog();
+    }, [applyFilters]);
+    const getOperatorsForColumn = useCallback((columnId) => {
+        const column = filterableColumns.find(col => col.id === columnId);
+        const type = getColumnType(column);
+        return FILTER_OPERATORS[type] || FILTER_OPERATORS.text;
+    }, [filterableColumns]);
+    // Handle column selection change
+    const handleColumnChange = useCallback((filterId, newColumnId, currentFilter) => {
+        const newColumn = filterableColumns.find(col => col.id === newColumnId);
+        const columnType = getColumnType(newColumn);
+        const operators = FILTER_OPERATORS[columnType] || FILTER_OPERATORS.text;
+        // Only reset operator if current operator is not valid for new column type
+        const currentOperatorValid = operators.some(op => op.value === currentFilter.operator);
+        const newOperator = currentOperatorValid ? currentFilter.operator : operators[0]?.value || '';
+        updateFilter(filterId, {
+            columnId: newColumnId,
+            operator: newOperator,
+            // Keep the current value unless operator is empty/notEmpty
+            value: ['isEmpty', 'isNotEmpty'].includes(newOperator) ? '' : currentFilter.value,
+        });
+    }, [filterableColumns, updateFilter]);
+    // Handle operator selection change
+    const handleOperatorChange = useCallback((filterId, 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 = useCallback((filterId, value) => {
+        updateFilter(filterId, { value });
+    }, [updateFilter]);
+    // Handle filter removal
+    const handleRemoveFilter = 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
+    useEffect(() => {
+        if (filters.length === 0 && filterableColumns.length > 0 && activeFiltersCount === 0) {
+            const firstColumn = filterableColumns[0];
+            const columnType = getColumnType(firstColumn);
+            const operators = FILTER_OPERATORS[columnType] || FILTER_OPERATORS.text;
+            const defaultOperator = operators[0]?.value || 'contains';
+            // Add default filter with first column and its first operator
+            addFilter(firstColumn.id, defaultOperator);
+        }
+    }, [filters.length, filterableColumns, addFilter, activeFiltersCount]);
+    return (_jsx(MenuDropdown, { anchor: (_jsx(Badge, { variant: "dot", color: "primary", invisible: activeFiltersCount === 0, children: _jsx(IconButton, { size: "small", color: activeFiltersCount > 0 ? 'primary' : 'default', sx: {
+                    flexShrink: 0,
+                }, children: _jsx(FilterIconSlot, { ...slotProps?.filterIcon }) }) })), children: ({ handleClose }) => (_jsxs(Box, { sx: {
+                p: 2,
+                minWidth: 500,
+                maxWidth: 650,
+            }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: 2 }, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Typography, { variant: "subtitle1", sx: { fontWeight: 'bold' }, children: "Column Filters" }), activeFiltersCount > 0 && (_jsx(Chip, { size: "small", label: `${activeFiltersCount} active`, color: "primary", variant: "outlined" }))] }), _jsx(Stack, { direction: "row", spacing: 1, children: _jsx(Button, { size: "small", variant: "outlined", startIcon: _jsx(AddIcon, {}), onClick: handleAddFilter, children: "Add Filter" }) })] }), filters.length > 1 && (_jsxs(Box, { sx: { mb: 2 }, children: [_jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 1 }, children: "Filter Logic:" }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Button, { size: "small", variant: filterLogic === 'AND' ? 'contained' : 'outlined', onClick: () => handleLogicChange('AND'), children: "AND (All conditions)" }), _jsx(Button, { size: "small", variant: filterLogic === 'OR' ? 'contained' : 'outlined', onClick: () => handleLogicChange('OR'), children: "OR (Any condition)" })] })] })), _jsx(Divider, { sx: { mb: 2 } }), filters.length === 0 ? (_jsx(Typography, { variant: "body2", color: "text.secondary", sx: {
+                        textAlign: 'center',
+                        py: 2,
+                    }, children: "No filters applied. Click \"Add Filter\" to start." })) : (_jsx(Stack, { spacing: 2, children: filters.map((filter) => (_jsx(Box, { children: _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsxs(FormControl, { size: "small", sx: { minWidth: 140 }, children: [_jsx(InputLabel, { children: "Column" }), _jsx(Select, { value: filter.columnId, label: "Column", onChange: (e) => handleColumnChange(filter.id, e.target.value, filter), children: filterableColumns.map(column => (_jsx(MenuItem, { value: column.id, children: typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id }, column.id))) })] }), _jsxs(FormControl, { size: "small", sx: { minWidth: 160 }, disabled: !filter.columnId, children: [_jsx(InputLabel, { children: "Operator" }), _jsx(Select, { value: filter.operator, label: "Operator", onChange: (e) => handleOperatorChange(filter.id, e.target.value, filter), children: getOperatorsForColumn(filter.columnId).map(op => (_jsx(MenuItem, { value: op.value, children: op.label }, op.value))) })] }), !['isEmpty', 'isNotEmpty'].includes(filter.operator) ? (_jsx(FilterValueInput, { filter: filter, column: filterableColumns.find(col => col.id === filter.columnId), onValueChange: (value) => handleFilterValueChange(filter.id, value) })) : (_jsx(Box, { sx: { flex: 1 } }) /* Spacer when no value input needed */), _jsx(IconButton, { size: "small", onClick: () => handleRemoveFilter(filter.id), color: "error", children: _jsx(DeleteIcon, {}) })] }) }, filter.id))) })), _jsx(Divider, { sx: { my: 2 } }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 1, children: [(hasAppliedFilters || filters.length > 0) && (_jsx(Button, { size: "small", variant: "text", color: "warning", onClick: () => clearAllFilters(handleClose), startIcon: _jsx(DeleteIcon, {}), children: "Reset" })), !(hasAppliedFilters || filters.length > 0) && _jsx(Box, {}), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Button, { variant: "outlined", onClick: handleClose, children: "Close" }), _jsx(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/lib/components/toolbar/column-custum-filter-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-custum-filter-control.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/toolbar/column-custum-filter-control.tsx"],"names":[],"mappings":"AA8BA,wBAAgB,yBAAyB,4CAyYxC"}

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

@@ -0,0 +1,150 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FilterList } from '@mui/icons-material';
+import { Box, MenuItem, Select, FormControl, InputLabel, Button, Stack, Typography, Chip, IconButton, Divider, Badge, } from '@mui/material';
+import { useMemo, useCallback, useEffect } from 'react';
+import { MenuDropdown } from '../droupdown/menu-dropdown';
+import { useDataTableContext } from '../../contexts/data-table-context';
+import { AddIcon, DeleteIcon, } from '../../icons';
+import { getColumnType, isColumnFilterable } from '../../utils/column-helpers';
+import { getSlotComponent } from '../../utils/slot-helpers';
+import { FILTER_OPERATORS } from '../filters';
+import { FilterValueInput } from '../filters/filter-value-input';
+export function ColumnCustomFilterControl() {
+    const { table, slots, slotProps } = useDataTableContext();
+    const FilterIconSlot = getSlotComponent(slots, 'filterIcon', FilterList);
+    // Use the custom feature state from the table - now using pending filters for UI
+    const customFilterState = table.getCustomColumnFilterState?.() || {
+        filters: [],
+        logic: 'AND',
+        pendingFilters: [],
+        pendingLogic: 'AND'
+    };
+    // Use pending filters for the UI (draft state)
+    const filters = customFilterState.pendingFilters;
+    const filterLogic = customFilterState.pendingLogic;
+    // Active filters are the actual applied filters
+    const activeFiltersCount = table.getActiveColumnFilters?.()?.length || 0;
+    const filterableColumns = useMemo(() => {
+        return table.getAllLeafColumns()
+            .filter(column => isColumnFilterable(column));
+    }, [table]);
+    const addFilter = useCallback((columnId, operator) => {
+        // 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.find(col => col.id === columnId);
+            const columnType = getColumnType(column);
+            const operators = FILTER_OPERATORS[columnType] || FILTER_OPERATORS.text;
+            defaultOperator = operators[0]?.value || 'contains';
+        }
+        table.addPendingColumnFilter?.(columnId || '', defaultOperator, '');
+    }, [table, filterableColumns]);
+    const handleAddFilter = useCallback(() => {
+        addFilter();
+    }, [addFilter]);
+    const updateFilter = useCallback((filterId, updates) => {
+        table.updatePendingColumnFilter?.(filterId, updates);
+    }, [table]);
+    const removeFilter = useCallback((filterId) => {
+        table.removePendingColumnFilter?.(filterId);
+    }, [table]);
+    const clearAllFilters = useCallback((closeDialog) => {
+        // Clear all pending filters
+        table.clearAllPendingColumnFilters?.();
+        // Immediately apply the clear (which will clear active filters too)
+        setTimeout(() => {
+            table.applyPendingColumnFilters?.();
+            // Close dialog if callback provided
+            if (closeDialog) {
+                closeDialog();
+            }
+        }, 0);
+    }, [table]);
+    // Handle filter logic change (AND/OR)
+    const handleLogicChange = useCallback((newLogic) => {
+        table.setPendingFilterLogic?.(newLogic);
+    }, [table]);
+    // Apply all pending filters
+    const applyFilters = useCallback(() => {
+        table.applyPendingColumnFilters?.();
+    }, [table]);
+    // Handle apply button click
+    const handleApplyFilters = useCallback((closeDialog) => {
+        applyFilters();
+        closeDialog();
+    }, [applyFilters]);
+    const getOperatorsForColumn = useCallback((columnId) => {
+        const column = filterableColumns.find(col => col.id === columnId);
+        const type = getColumnType(column);
+        return FILTER_OPERATORS[type] || FILTER_OPERATORS.text;
+    }, [filterableColumns]);
+    // Handle column selection change
+    const handleColumnChange = useCallback((filterId, newColumnId, currentFilter) => {
+        const newColumn = filterableColumns.find(col => col.id === newColumnId);
+        const columnType = getColumnType(newColumn);
+        const operators = FILTER_OPERATORS[columnType] || FILTER_OPERATORS.text;
+        // Only reset operator if current operator is not valid for new column type
+        const currentOperatorValid = operators.some(op => op.value === currentFilter.operator);
+        const newOperator = currentOperatorValid ? currentFilter.operator : operators[0]?.value || '';
+        updateFilter(filterId, {
+            columnId: newColumnId,
+            operator: newOperator,
+            // Keep the current value unless operator is empty/notEmpty
+            value: ['isEmpty', 'isNotEmpty'].includes(newOperator) ? '' : currentFilter.value,
+        });
+    }, [filterableColumns, updateFilter]);
+    // Handle operator selection change
+    const handleOperatorChange = useCallback((filterId, 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 = useCallback((filterId, value) => {
+        updateFilter(filterId, { value });
+    }, [updateFilter]);
+    // Handle filter removal
+    const handleRemoveFilter = 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
+    useEffect(() => {
+        console.log('🔍 filters', filters);
+        if (filters.length === 0 && filterableColumns.length > 0 && activeFiltersCount === 0) {
+            const firstColumn = filterableColumns[0];
+            const columnType = getColumnType(firstColumn);
+            const operators = FILTER_OPERATORS[columnType] || FILTER_OPERATORS.text;
+            const defaultOperator = operators[0]?.value || 'contains';
+            // Add default filter with first column and its first operator
+            addFilter(firstColumn.id, defaultOperator);
+        }
+    }, [filters.length, filterableColumns, addFilter, activeFiltersCount]);
+    return (_jsx(MenuDropdown, { anchor: (_jsx(Badge, { variant: "dot", color: "primary", invisible: activeFiltersCount === 0, children: _jsx(IconButton, { size: "small", color: activeFiltersCount > 0 ? 'primary' : 'default', sx: {
+                    flexShrink: 0,
+                }, children: _jsx(FilterIconSlot, { ...slotProps?.filterIcon }) }) })), children: ({ handleClose }) => (_jsxs(Box, { sx: {
+                p: 2,
+                minWidth: 500,
+                maxWidth: 650,
+            }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: 2 }, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsx(Typography, { variant: "subtitle1", sx: { fontWeight: 'bold' }, children: "Column Filters" }), activeFiltersCount > 0 && (_jsx(Chip, { size: "small", label: `${activeFiltersCount} active`, color: "primary", variant: "outlined" }))] }), _jsx(Stack, { direction: "row", spacing: 1, children: _jsx(Button, { size: "small", variant: "outlined", startIcon: _jsx(AddIcon, {}), onClick: handleAddFilter, children: "Add Filter" }) })] }), filters.length > 1 && (_jsxs(Box, { sx: { mb: 2 }, children: [_jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 1 }, children: "Filter Logic:" }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Button, { size: "small", variant: filterLogic === 'AND' ? 'contained' : 'outlined', onClick: () => handleLogicChange('AND'), children: "AND (All conditions)" }), _jsx(Button, { size: "small", variant: filterLogic === 'OR' ? 'contained' : 'outlined', onClick: () => handleLogicChange('OR'), children: "OR (Any condition)" })] })] })), _jsx(Divider, { sx: { mb: 2 } }), filters.length === 0 ? (_jsx(Typography, { variant: "body2", color: "text.secondary", sx: {
+                        textAlign: 'center',
+                        py: 2,
+                    }, children: "No filters applied. Click \"Add Filter\" to start." })) : (_jsx(Stack, { spacing: 2, children: filters.map((filter) => (_jsx(Box, { children: _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsxs(FormControl, { size: "small", sx: { minWidth: 140 }, children: [_jsx(InputLabel, { children: "Column" }), _jsx(Select, { value: filter.columnId, label: "Column", onChange: (e) => handleColumnChange(filter.id, e.target.value, filter), children: filterableColumns.map(column => (_jsx(MenuItem, { value: column.id, children: typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id }, column.id))) })] }), _jsxs(FormControl, { size: "small", sx: { minWidth: 160 }, disabled: !filter.columnId, children: [_jsx(InputLabel, { children: "Operator" }), _jsx(Select, { value: filter.operator, label: "Operator", onChange: (e) => handleOperatorChange(filter.id, e.target.value, filter), children: getOperatorsForColumn(filter.columnId).map(op => (_jsx(MenuItem, { value: op.value, children: op.label }, op.value))) })] }), !['isEmpty', 'isNotEmpty'].includes(filter.operator) ? (_jsx(FilterValueInput, { filter: filter, column: filterableColumns.find(col => col.id === filter.columnId), onValueChange: (value) => handleFilterValueChange(filter.id, value) })) : (_jsx(Box, { sx: { flex: 1 } }) /* Spacer when no value input needed */), _jsx(IconButton, { size: "small", onClick: () => handleRemoveFilter(filter.id), color: "error", children: _jsx(DeleteIcon, {}) })] }) }, filter.id))) })), _jsx(Divider, { sx: { my: 2 } }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 1, children: [(hasAppliedFilters || filters.length > 0) && (_jsx(Button, { size: "small", variant: "text", color: "warning", onClick: () => clearAllFilters(handleClose), startIcon: _jsx(DeleteIcon, {}), children: "Reset" })), !(hasAppliedFilters || filters.length > 0) && _jsx(Box, {}), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Button, { variant: "outlined", onClick: handleClose, children: "Close" }), _jsx(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/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":"AAsBA,wBAAgB,oBAAoB,4CA6QnC"}

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

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowLeftOutlined, ArrowRightOutlined, PushPinOutlined } from '@mui/icons-material';
+import { Box, Typography, Divider, IconButton, Tooltip, List, ListItem, ListItemText, } from '@mui/material';
+import { useCallback, useMemo } from 'react';
+import { MenuDropdown } from '../droupdown/menu-dropdown';
+import { useDataTableContext } from '../../contexts/data-table-context';
+import { UnpinIcon, } from '../../icons';
+import { getSlotComponent } from '../../utils/slot-helpers';
+export function ColumnPinningControl() {
+    // Use context if no props provided (MUI DataGrid style)
+    const { table, slots, slotProps } = useDataTableContext();
+    const PinIconSlot = getSlotComponent(slots, 'pinIcon', PushPinOutlined);
+    const UnpinIconSlot = getSlotComponent(slots, 'unpinIcon', UnpinIcon);
+    const LeftIconSlot = getSlotComponent(slots, 'leftIcon', ArrowLeftOutlined);
+    const RightIconSlot = getSlotComponent(slots, 'rightIcon', ArrowRightOutlined);
+    const columnPinning = table.getState().columnPinning;
+    const allColumns = useMemo(() => {
+        if (slotProps?.columnsPanel?.getPinnableColumns) {
+            return slotProps?.columnsPanel?.getPinnableColumns(table.getAllLeafColumns());
+        }
+        return table.getAllLeafColumns().filter(column => column.getCanPin());
+    }, [slotProps?.columnsPanel, table]);
+    const handlePinColumn = (columnId, position) => {
+        const currentPinning = table.getState().columnPinning;
+        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') {
+            newPinning.left = [...(newPinning.left || []), columnId];
+        }
+        else if (position === 'right') {
+            newPinning.right = [...(newPinning.right || []), columnId];
+        }
+        table.setColumnPinning(newPinning);
+    };
+    const getColumnPinStatus = (columnId) => {
+        if (columnPinning.left?.includes(columnId))
+            return 'left';
+        if (columnPinning.right?.includes(columnId))
+            return 'right';
+        return 'none';
+    };
+    const getColumnDisplayName = (column) => {
+        if (typeof column.columnDef.header === 'string') {
+            return column.columnDef.header;
+        }
+        return column.id;
+    };
+    const handleUnpinAll = useCallback(() => {
+        table.setColumnPinning(table.initialState.columnPinning || {});
+    }, [table]);
+    // Count only user-pinned columns (exclude system columns like select and action)
+    const userPinnedLeft = (columnPinning.left?.filter((id) => allColumns.some((column) => column.id === id)) || []);
+    const userPinnedRight = (columnPinning.right?.filter((id) => allColumns.some((column) => column.id === id)) || []);
+    const totalPinned = userPinnedLeft.length + userPinnedRight.length;
+    return (_jsx(MenuDropdown, { anchor: (_jsx(Tooltip, { title: "Pin columns", children: _jsxs(IconButton, { size: "small", sx: {
+                    flexShrink: 0,
+                }, children: [_jsx(PinIconSlot, { ...slotProps?.pinIcon }), totalPinned > 0 && (_jsx(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 }) => (_jsxs(Box, { sx: {
+                minWidth: 300,
+                maxHeight: 400,
+                overflow: 'auto',
+            }, children: [_jsxs(Box, { sx: {
+                        p: 2,
+                        pb: 1,
+                    }, children: [_jsx(Typography, { variant: "subtitle2", sx: { mb: 1 }, children: "Pin Columns" }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: "Pin columns to keep them visible while scrolling" })] }), _jsx(Divider, {}), _jsx(List, { dense: true, sx: { py: 0 }, children: allColumns.map((column) => {
+                        const pinStatus = getColumnPinStatus(column.id);
+                        const displayName = getColumnDisplayName(column);
+                        return (_jsx(ListItem, { sx: { py: 0.5 }, secondaryAction: (_jsxs(Box, { sx: {
+                                    display: 'flex',
+                                    gap: 0.5,
+                                }, children: [_jsx(Tooltip, { title: "Pin left", children: _jsx(IconButton, { size: "small", onClick: () => handlePinColumn(column.id, pinStatus === 'left' ? 'none' : 'left'), color: pinStatus === 'left' ? 'primary' : 'default', children: _jsx(LeftIconSlot, { fontSize: "small", ...slotProps?.leftIcon }) }) }), _jsx(Tooltip, { title: "Pin right", children: _jsx(IconButton, { size: "small", onClick: () => handlePinColumn(column.id, pinStatus === 'right' ? 'none' : 'right'), color: pinStatus === 'right' ? 'secondary' : 'default', children: _jsx(RightIconSlot, { fontSize: "small", ...slotProps?.rightIcon }) }) }), pinStatus !== 'none' && (_jsx(Tooltip, { title: "Unpin", children: _jsx(IconButton, { size: "small", onClick: () => handlePinColumn(column.id, 'none'), children: _jsx(UnpinIconSlot, { fontSize: "small", ...slotProps?.unpinIcon }) }) }))] })), children: _jsx(ListItemText, { primary: displayName, secondary: pinStatus !== 'none' ? (_jsxs(Box, { sx: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        gap: 0.5,
+                                        mt: 0.5,
+                                    }, children: [pinStatus === 'left' ? (_jsx(LeftIconSlot, { fontSize: "small", ...slotProps?.leftIcon })) : (_jsx(RightIconSlot, { fontSize: "small", ...slotProps?.rightIcon })), _jsxs(Typography, { variant: "caption", color: pinStatus === 'left' ? 'primary' : 'secondary', children: ["Pinned", ' ', pinStatus] })] })) : null }) }, column.id));
+                    }) }), _jsx(Divider, {}), _jsx(Box, { sx: {
+                        p: 2,
+                        pt: 1,
+                    }, children: _jsxs(Box, { sx: {
+                            display: 'flex',
+                            gap: 1,
+                            justifyContent: 'space-between',
+                        }, children: [_jsx(Typography, { variant: "caption", color: "text.secondary", children: "Quick actions:" }), _jsx(Box, { sx: {
+                                    display: 'flex',
+                                    gap: 1,
+                                }, children: _jsx(Tooltip, { title: "Unpin all user columns", children: _jsx(IconButton, { size: "small", onClick: handleUnpinAll, disabled: totalPinned === 0, children: _jsx(UnpinIcon, { fontSize: "small" }) }) }) })] }) })] })) }));
+}

package/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":"AAMA,wBAAgB,kBAAkB,4CAmBjC"}

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Autorenew } from '@mui/icons-material';
+import { IconButton, Tooltip } from '@mui/material';
+import { useDataTableContext } from '../../contexts/data-table-context';
+export function ColumnResetControl() {
+    const { table } = useDataTableContext();
+    const handleResetLayout = () => {
+        table.resetColumnOrder();
+        table.resetColumnPinning();
+        table.resetColumnSizing();
+    };
+    return (_jsx(Tooltip, { title: "Reset layout", children: _jsx(IconButton, { size: "small", onClick: handleResetLayout, children: _jsx(Autorenew, {}) }) }));
+}

package/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":"AASA,wBAAgB,uBAAuB,4CAqEtC"}

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ViewColumnOutlined } from '@mui/icons-material';
+import { Box, Checkbox, Divider, FormControlLabel, FormGroup, IconButton, Tooltip, Typography } from '@mui/material';
+import { useMemo } from 'react';
+import { MenuDropdown } from '../droupdown/menu-dropdown';
+import { useDataTableContext } from '../../contexts/data-table-context';
+import { getSlotComponent } from '../../utils/slot-helpers';
+export function ColumnVisibilityControl() {
+    // Use context if no props provided (MUI DataGrid style)
+    const { table, slots, slotProps } = useDataTableContext();
+    const ColumnIconSlot = getSlotComponent(slots, 'columnIcon', ViewColumnOutlined);
+    const columns = useMemo(() => {
+        if (slotProps?.columnsPanel?.getTogglableColumns) {
+            return slotProps?.columnsPanel?.getTogglableColumns(table.getAllLeafColumns());
+        }
+        return table.getAllLeafColumns().filter(column => column.getCanHide());
+    }, [slotProps?.columnsPanel, table]);
+    const handleColumnVisibilityChange = ((columnId, visible) => {
+        table.getColumn(columnId)?.toggleVisibility(visible);
+    });
+    return (_jsx(MenuDropdown, { anchor: (_jsx(Tooltip, { title: "Column visibility", children: _jsx(IconButton, { size: "small", sx: {
+                    flexShrink: 0,
+                }, children: _jsx(ColumnIconSlot, { ...slotProps?.columnIcon }) }) })), children: ({ handleClose }) => (_jsxs(Box, { sx: {
+                p: 2,
+                minWidth: 200,
+            }, children: [_jsx(Typography, { variant: "subtitle2", sx: { mb: 1 }, children: "Show/Hide Columns" }), _jsx(Divider, { sx: { mb: 1 } }), _jsx(FormGroup, { children: columns.map((column) => (_jsx(FormControlLabel, { control: (_jsx(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/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":"AAMA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAalC,MAAM,WAAW,qBAAqB;IAClC,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;CAEjC;AAED,wBAAgB,gBAAgB,CAAC,EAC7B,WAAkB,EAClB,kBAAyB,EACzB,KAAK,EACL,QAAQ,EACR,sBAA6B,EAC7B,YAAmB,EACnB,WAAkB,EAClB,kBAAyB,EACzB,sBAA6B,EAC7B,mBAA0B,GAC7B,EAAE,qBAAqB,2CAqFvB"}

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack, Toolbar, Typography, Box, } from '@mui/material';
+import { ColumnCustomFilterControl } from './column-custom-filter-control';
+import { ColumnPinningControl } from './column-pinning-control';
+import { ColumnResetControl } from './column-reset-control';
+import { ColumnVisibilityControl } from './column-visibility-control';
+import { TableExportControl } from './table-export-control';
+import { TableSearchControl } from './table-search-control';
+import { TableSizeControl } from './table-size-control';
+import { useDataTableContext } from '../../contexts/data-table-context';
+import { getSlotComponent } from '../../utils/slot-helpers';
+export function DataTableToolbar({ extraFilter = null, enableGlobalFilter = true, title, subtitle, enableColumnVisibility = true, enableExport = true, enableReset = true, enableColumnFilter = true, enableTableSizeControl = true, enableColumnPinning = true, }) {
+    const { table, slots, slotProps = {} } = useDataTableContext();
+    const ToolbarSlot = getSlotComponent(slots, 'toolbar', Toolbar);
+    const TableSearchControlSlot = getSlotComponent(slots, 'searchInput', TableSearchControl);
+    const TableSizeControlSlot = getSlotComponent(slots, 'tableSizeControl', TableSizeControl);
+    const ColumnCustomFilterControlSlot = getSlotComponent(slots, 'columnCustomFilterControl', ColumnCustomFilterControl);
+    const ColumnPinningControlSlot = getSlotComponent(slots, 'columnPinningControl', ColumnPinningControl);
+    const ColumnVisibilityControlSlot = getSlotComponent(slots, 'columnVisibilityControl', ColumnVisibilityControl);
+    const ColumnResetControlSlot = getSlotComponent(slots, 'resetButton', ColumnResetControl);
+    const TableExportControlSlot = getSlotComponent(slots, 'exportButton', TableExportControl);
+    return (_jsx(ToolbarSlot, { table: table, ...slotProps.toolbar, children: _jsxs(Box, { sx: { width: '100%' }, children: [(title || subtitle) ? (_jsxs(Box, { sx: { mb: 2 }, children: [title ? (_jsx(Typography, { variant: "h6", component: "div", children: title })) : null, subtitle ? (_jsx(Typography, { variant: "body2", color: "text.secondary", children: subtitle })) : null] })) : null, _jsxs(Stack, { direction: "row", spacing: 2, justifyContent: "space-between", alignItems: "center", children: [_jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", sx: { flex: 1 }, children: [enableGlobalFilter ? _jsx(TableSearchControlSlot, { ...slotProps.searchInput }) : null, enableTableSizeControl ? _jsx(TableSizeControlSlot, { ...slotProps.tableSizeControl }) : null, enableColumnFilter ? _jsx(ColumnCustomFilterControlSlot, { ...slotProps.columnCustomFilterControl }) : null, enableColumnPinning ? _jsx(ColumnPinningControlSlot, { ...slotProps.columnPinningControl }) : null, enableColumnVisibility ? _jsx(ColumnVisibilityControlSlot, { ...slotProps.columnVisibilityControl }) : null, enableReset ? _jsx(ColumnResetControlSlot, { ...slotProps.resetButton }) : null, enableExport ? _jsx(TableExportControlSlot, { ...slotProps.exportButton }) : null] }), _jsx(Stack, { direction: "row", spacing: 1, alignItems: "center", children: extraFilter })] })] }) }));
+}

package/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;AAGxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,YAAY,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC"}

package/lib/components/toolbar/index.js

@@ -0,0 +1,13 @@
+/**
+ * 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';

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-export-control.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/toolbar/table-export-control.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAG,YAAY,EAAE,MAAM,aAAa,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAC;AAEzE,UAAU,uBAAuB;IAE7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,EAAE,SAAS,CAAC,EAAE,cAAc,KAAK,OAAO,CAAC;QAAE,IAAI,EAAE,GAAG,EAAE,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC1H,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE;QAAE,aAAa,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACxG,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/F,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACtE;AAED,wBAAgB,kBAAkB,CAAC,EAC/B,cAAc,EAAE,mBAAmB,EACnC,cAAc,EAAE,mBAAmB,EACnC,gBAAgB,EAAE,qBAAqB,EACvC,gBAAgB,EAAE,qBAAqB,EACvC,aAAa,EAAE,kBAAkB,GACpC,GAAE,uBAA4B,2CA+M9B"}