@alaarab/ogrid-react-material 2.0.18 → 2.0.21

package/dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { Popover, Tooltip, IconButton, Box, Typography } from '@mui/material';
-import { ArrowUpward as ArrowUpwardIcon, ArrowDownward as ArrowDownwardIcon, SwapVert as SwapVertIcon, FilterList as FilterListIcon, } from '@mui/icons-material';
+import { FilterList as FilterListIcon, } from '@mui/icons-material';
 import { useColumnHeaderFilterState, getColumnHeaderFilterStateParams, renderFilterContent, } from '@alaarab/ogrid-react';
 import { TextFilterPopover } from './TextFilterPopover';
 import { MultiSelectFilterPopover } from './MultiSelectFilterPopover';
@@ -13,18 +13,18 @@ const materialRenderers = {
     renderDate: (p) => (_jsxs(Box, { sx: { p: 1.5, display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Typography, { variant: "caption", sx: { minWidth: 36 }, children: "From:" }), _jsx("input", { type: "date", value: p.tempDateFrom, onChange: (e) => p.setTempDateFrom(e.target.value), style: { flex: 1, padding: '4px 6px' } })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Typography, { variant: "caption", sx: { minWidth: 36 }, children: "To:" }), _jsx("input", { type: "date", value: p.tempDateTo, onChange: (e) => p.setTempDateTo(e.target.value), style: { flex: 1, padding: '4px 6px' } })] }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end', gap: 1, mt: 0.5 }, children: [_jsx("button", { onClick: p.onClear, disabled: !p.tempDateFrom && !p.tempDateTo, style: { padding: '4px 12px', cursor: 'pointer' }, children: "Clear" }), _jsx("button", { onClick: p.onApply, style: { padding: '4px 12px', cursor: 'pointer' }, children: "Apply" })] })] })),
 };
 export const ColumnHeaderFilter = React.memo((props) => {
-    const { columnName, filterType, isSorted = false, isSortedDescending = false, onSort, options = [], isLoadingOptions = false, selectedUser, } = props;
+    const { columnName, filterType, options = [], isLoadingOptions = false, selectedUser, } = props;
     const state = useColumnHeaderFilterState(getColumnHeaderFilterStateParams(props));
     const { headerRef, isFilterOpen, setFilterOpen, hasActiveFilter, popoverPosition, handlers, } = state;
-    return (_jsxs(Box, { ref: headerRef, sx: { display: 'flex', alignItems: 'center', width: '100%', minWidth: 0 }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0, overflow: 'hidden' }, children: _jsx(Tooltip, { title: columnName, arrow: true, children: _jsx(Typography, { variant: "body2", fontWeight: 600, noWrap: true, "data-header-label": true, sx: { lineHeight: 1.4 }, children: columnName }) }) }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', ml: 0.5, flexShrink: 0 }, children: [onSort && (_jsx(IconButton, { size: "small", onClick: handlers.handleSortClick, "aria-label": `Sort by ${columnName}`, title: isSorted ? (isSortedDescending ? 'Sorted descending' : 'Sorted ascending') : 'Sort', color: isSorted ? 'primary' : 'default', sx: { p: 0.25 }, children: isSorted ? (isSortedDescending ? (_jsx(ArrowDownwardIcon, { sx: { fontSize: 16 } })) : (_jsx(ArrowUpwardIcon, { sx: { fontSize: 16 } }))) : (_jsx(SwapVertIcon, { sx: { fontSize: 16 } })) })), filterType !== 'none' && (_jsxs(IconButton, { size: "small", onClick: handlers.handleFilterIconClick, "aria-label": `Filter ${columnName}`, title: `Filter ${columnName}`, color: hasActiveFilter || isFilterOpen ? 'primary' : 'default', sx: { p: 0.25, position: 'relative' }, children: [_jsx(FilterListIcon, { sx: { fontSize: 16 } }), hasActiveFilter && (_jsx(Box, { sx: {
-                                    position: 'absolute',
-                                    top: 2,
-                                    right: 2,
-                                    width: 6,
-                                    height: 6,
-                                    borderRadius: '50%',
-                                    bgcolor: 'primary.main',
-                                } }))] }))] }), _jsxs(Popover, { open: isFilterOpen && filterType !== 'none', onClose: () => setFilterOpen(false), anchorReference: "anchorPosition", anchorPosition: popoverPosition ?? { top: 0, left: 0 }, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, transformOrigin: { vertical: 'top', horizontal: 'left' }, slotProps: {
+    return (_jsxs(Box, { ref: headerRef, sx: { display: 'flex', alignItems: 'center', width: '100%', minWidth: 0 }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0, overflow: 'hidden' }, children: _jsx(Tooltip, { title: columnName, arrow: true, children: _jsx(Typography, { variant: "body2", fontWeight: 600, noWrap: true, "data-header-label": true, sx: { lineHeight: 1.4 }, children: columnName }) }) }), _jsx(Box, { sx: { display: 'flex', alignItems: 'center', ml: 0.5, flexShrink: 0 }, children: filterType !== 'none' && (_jsxs(IconButton, { size: "small", onClick: handlers.handleFilterIconClick, "aria-label": `Filter ${columnName}`, title: `Filter ${columnName}`, color: hasActiveFilter || isFilterOpen ? 'primary' : 'default', sx: { p: 0.25, position: 'relative' }, children: [_jsx(FilterListIcon, { sx: { fontSize: 16 } }), hasActiveFilter && (_jsx(Box, { sx: {
+                                position: 'absolute',
+                                top: 2,
+                                right: 2,
+                                width: 6,
+                                height: 6,
+                                borderRadius: '50%',
+                                bgcolor: 'primary.main',
+                            } }))] })) }), _jsxs(Popover, { open: isFilterOpen && filterType !== 'none', onClose: () => setFilterOpen(false), anchorReference: "anchorPosition", anchorPosition: popoverPosition ?? { top: 0, left: 0 }, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, transformOrigin: { vertical: 'top', horizontal: 'left' }, slotProps: {
                     paper: {
                         sx: { mt: 0.5, overflow: 'visible' },
                         onClick: (e) => e.stopPropagation(),

package/dist/esm/ColumnHeaderFilter/MultiSelectFilterPopover.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TextField, Checkbox, CircularProgress, Button, Box, Typography, InputAdornment, FormControlLabel, } from '@mui/material';
 import { Search as SearchIcon } from '@mui/icons-material';
 import { useListVirtualizer } from '@alaarab/ogrid-react';
-const ITEM_HEIGHT = 36;
+const ITEM_HEIGHT = 40;
 export const MultiSelectFilterPopover = ({ searchText, onSearchChange, options, filteredOptions, selected, onOptionToggle, onSelectAll, onClearSelection, onApply, isLoading, }) => {
     const virt = useListVirtualizer({ count: filteredOptions.length, itemHeight: ITEM_HEIGHT, containerHeight: 240 });
     return (_jsxs(Box, { sx: { width: 280 }, children: [_jsxs(Box, { sx: { p: 1.5, pb: 0.5 }, children: [_jsx(TextField, { placeholder: "Search...", value: searchText, onChange: (e) => onSearchChange(e.target.value), onKeyDown: (e) => e.stopPropagation(), autoComplete: "off", size: "small", fullWidth: true, slotProps: {
@@ -11,7 +11,7 @@ export const MultiSelectFilterPopover = ({ searchText, onSearchChange, options,
                             },
                         } }), _jsxs(Typography, { variant: "caption", color: "text.secondary", sx: { mt: 0.5, display: 'block' }, children: [filteredOptions.length, " of ", options.length, " options"] })] }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'space-between', px: 1.5, py: 0.5 }, children: [_jsxs(Button, { size: "small", onClick: onSelectAll, children: ["Select All (", filteredOptions.length, ")"] }), _jsx(Button, { size: "small", onClick: onClearSelection, children: "Clear" })] }), _jsx(Box, { ref: virt.containerRef, onScroll: virt.onScroll, sx: { maxHeight: 240, overflowY: 'auto', px: 0.5 }, children: isLoading ? (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 2 }, children: _jsx(CircularProgress, { size: 24 }) })) : filteredOptions.length === 0 ? (_jsx(Typography, { variant: "body2", color: "text.secondary", sx: { py: 2, textAlign: 'center' }, children: "No options found" })) : (_jsx(Box, { sx: { height: virt.totalHeight, position: 'relative' }, children: virt.visibleItems.map(({ index, offsetTop }) => {
                         const option = filteredOptions[index];
-                        return (_jsx(FormControlLabel, { control: _jsx(Checkbox, { size: "small", checked: selected.has(option), onChange: (e) => onOptionToggle(option, e.target.checked) }), label: _jsx(Typography, { variant: "body2", children: option }), sx: { position: 'absolute', top: offsetTop, width: '100%', boxSizing: 'border-box', display: 'flex', mx: 0, '& .MuiFormControlLabel-label': { flex: 1, minWidth: 0 } } }, option));
+                        return (_jsx(FormControlLabel, { control: _jsx(Checkbox, { size: "small", checked: selected.has(option), onChange: (e) => onOptionToggle(option, e.target.checked) }), label: _jsx(Typography, { variant: "body2", children: option }), sx: { position: 'absolute', top: offsetTop, width: '100%', height: ITEM_HEIGHT, boxSizing: 'border-box', display: 'flex', alignItems: 'center', mx: 0, '& .MuiFormControlLabel-label': { flex: 1, minWidth: 0 } } }, option));
                     }) })) }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end', gap: 1, p: 1.5, pt: 1, borderTop: 1, borderColor: 'divider' }, children: [_jsx(Button, { size: "small", onClick: onClearSelection, children: "Clear" }), _jsx(Button, { size: "small", variant: "contained", onClick: onApply, children: "Apply" })] })] }));
 };
 MultiSelectFilterPopover.displayName = 'MultiSelectFilterPopover';

package/dist/esm/ColumnHeaderMenu/ColumnHeaderMenu.js

@@ -30,7 +30,7 @@ export function ColumnHeaderMenu(props) {
         isResizable,
     }), [canPinLeft, canPinRight, canUnpin, currentSort, isSortable, isResizable]);
     const items = useMemo(() => getColumnHeaderMenuItems(menuInput), [menuInput]);
-    const handlers = {
+    const handlers = useMemo(() => ({
         pinLeft: onPinLeft,
         pinRight: onPinRight,
         unpin: onUnpin,
@@ -39,7 +39,7 @@ export function ColumnHeaderMenu(props) {
         clearSort: onClearSort,
         autosizeThis: onAutosizeThis,
         autosizeAll: onAutosizeAll,
-    };
+    }), [onPinLeft, onPinRight, onUnpin, onSortAsc, onSortDesc, onClearSort, onAutosizeThis, onAutosizeAll]);
     return (_jsx(Menu, { open: isOpen && !!anchorPosition, onClose: onClose, anchorReference: "anchorPosition", anchorPosition: anchorPosition, slotProps: {
             paper: {
                 sx: {

package/dist/esm/DataGridTable/DataGridTable.js

@@ -177,6 +177,29 @@ const POPOVER_ANCHOR_SX = { minHeight: '100%', minWidth: 40 };
 const POPOVER_CONTENT_SX = { p: 1 };
 // Wrapper
 const WRAPPER_SCROLL_SX = { display: 'flex', flexDirection: 'column', minHeight: '100%' };
+// Header cell content wrapper
+const HEADER_CONTENT_FLEX_SX = { display: 'flex', alignItems: 'center', gap: 0.5 };
+// Column options button
+const COLUMN_OPTIONS_BUTTON_SX = {
+    background: 'transparent',
+    border: 'none',
+    cursor: 'pointer',
+    padding: '2px 4px',
+    fontSize: '16px',
+    lineHeight: 1,
+    color: 'text.secondary',
+    opacity: 1,
+    transition: 'background-color 0.15s',
+    borderRadius: '3px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minWidth: '20px',
+    height: '20px',
+    '&:hover': {
+        bgcolor: 'action.hover',
+    },
+};
 // Table wrapper
 const TABLE_WRAPPER_SX = { position: 'relative', opacity: 1 };
 const TABLE_WRAPPER_LOADING_SX = { position: 'relative', opacity: 0.6 };
@@ -202,10 +225,9 @@ function GridRowInner(props) {
 const GridRow = React.memo(GridRowInner, areGridRowPropsEqual);
 function DataGridTableInner(props) {
     const o = useDataGridTableOrchestration({ props });
-    const { wrapperRef, tableContainerRef, lastMouseShiftRef, interaction, pinning, handleResizeStart, getColumnWidth, isReorderDragging, dropIndicatorX, handleHeaderMouseDown, virtualScrollEnabled, visibleRange, items, getRowId, emptyState, suppressHorizontalScroll, isLoading, loadingMessage, ariaLabel, ariaLabelledBy, columnReorder, density, rowNumberOffset, headerRows, allowOverflowX, fitToContent, editCallbacks, interactionHandlers, cellDescriptorInputRef, pendingEditorValueRef, popoverAnchorElRef, handleSingleRowClick, handlePasteVoid, visibleCols, hasCheckboxCol, hasRowNumbersCol, colOffset, minTableWidth, columnSizingOverrides, measuredColumnWidths, selectedRowIds, handleRowCheckboxChange, handleSelectAll, allSelected, someSelected, editingCell, setPopoverAnchorEl, cancelPopoverEdit, setActiveCell, selectionRange, hasCellSelection, handleGridKeyDown, handleFillHandleMouseDown, handleCopy, handleCut, cutRange, copyRange, canUndo, canRedo, onUndo, onRedo, isDragging, menuPosition, closeContextMenu, headerFilterInput, statusBarConfig, showEmptyInGrid, onCellError, } = o;
+    const { wrapperRef, tableContainerRef, lastMouseShiftRef, interaction, pinning, handleResizeStart, getColumnWidth, isReorderDragging, dropIndicatorX, handleHeaderMouseDown, virtualScrollEnabled, visibleRange, items, getRowId, emptyState, suppressHorizontalScroll, isLoading, loadingMessage, ariaLabel, ariaLabelledBy, columnReorder, density, rowHeight, rowNumberOffset, headerRows, allowOverflowX, fitToContent, editCallbacks, interactionHandlers, cellDescriptorInputRef, pendingEditorValueRef, popoverAnchorElRef, handleSingleRowClick, handlePasteVoid, visibleCols, hasCheckboxCol, hasRowNumbersCol, colOffset, minTableWidth, columnSizingOverrides, measuredColumnWidths, selectedRowIds, handleRowCheckboxChange, handleSelectAll, allSelected, someSelected, editingCell, setPopoverAnchorEl, cancelPopoverEdit, setActiveCell, selectionRange, hasCellSelection, handleGridKeyDown, handleFillHandleMouseDown, handleCopy, handleCut, cutRange, copyRange, canUndo, canRedo, onUndo, onRedo, isDragging, menuPosition, closeContextMenu, headerFilterInput, statusBarConfig, showEmptyInGrid, onCellError, headerMenu, } = o;
     // Density-aware cell padding
     const densityPadding = useMemo(() => getDensityPadding(density), [density]);
-    const _cellSx = useMemo(() => ({ ...CELL_CONTENT_BASE_SX, ...densityPadding }), [densityPadding]);
     const headerCellSx = useMemo(() => ({ px: densityPadding.px, py: densityPadding.py }), [densityPadding]);
     // Pre-compute per-column layout (tdSx, widths) so GridRow doesn't recalculate per-cell
     const columnLayouts = useMemo(() => visibleCols.map((col) => {
@@ -240,7 +262,8 @@ function DataGridTableInner(props) {
         willChange: 'scroll-position',
         '& [data-drag-range]': { bgcolor: 'rgba(33, 115, 70, 0.12) !important' },
         '& [data-drag-anchor]': { bgcolor: 'background.paper !important' },
-    }), [fitToContent, suppressHorizontalScroll, allowOverflowX, isLoading, items.length]);
+        ...(rowHeight ? { '& tbody tr': { height: rowHeight } } : {}),
+    }), [fitToContent, suppressHorizontalScroll, allowOverflowX, isLoading, items.length, rowHeight]);
     const renderCellContent = useCallback((item, col, rowIndex, colIdx) => {
         const descriptor = getCellRenderDescriptor(item, col, rowIndex, colIdx, cellDescriptorInputRef.current);
         const rowId = getRowId(item);
@@ -342,29 +365,10 @@ function DataGridTableInner(props) {
                                                                         },
                                                                     },
                                                                     onMouseDown: columnReorder ? (e) => handleHeaderMouseDown(col.columnId, e) : undefined
-                                                                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5 }, children: [_jsx(ColumnHeaderFilter, { ...getHeaderFilterConfig(col, headerFilterInput) }), _jsx(Box, { component: "button", onClick: (e) => {
+                                                                }, children: [_jsxs(Box, { sx: HEADER_CONTENT_FLEX_SX, children: [_jsx(ColumnHeaderFilter, { ...getHeaderFilterConfig(col, headerFilterInput) }), _jsx(Box, { component: "button", onClick: (e) => {
                                                                                     e.stopPropagation();
-                                                                                    pinning.headerMenu.open(col.columnId, e.currentTarget);
-                                                                                }, "aria-label": "Column options", title: "Column options", sx: {
-                                                                                    background: 'transparent',
-                                                                                    border: 'none',
-                                                                                    cursor: 'pointer',
-                                                                                    padding: '2px 4px',
-                                                                                    fontSize: '16px',
-                                                                                    lineHeight: 1,
-                                                                                    color: 'text.secondary',
-                                                                                    opacity: 1,
-                                                                                    transition: 'background-color 0.15s',
-                                                                                    borderRadius: '3px',
-                                                                                    display: 'flex',
-                                                                                    alignItems: 'center',
-                                                                                    justifyContent: 'center',
-                                                                                    minWidth: '20px',
-                                                                                    height: '20px',
-                                                                                    '&:hover': {
-                                                                                        bgcolor: 'action.hover',
-                                                                                    },
-                                                                                }, children: "\u22EE" })] }), _jsx(Box, { onMouseDown: (e) => {
+                                                                                    headerMenu.open(col.columnId, e.currentTarget);
+                                                                                }, "aria-label": "Column options", title: "Column options", sx: COLUMN_OPTIONS_BUTTON_SX, children: "\u22EE" })] }), _jsx(Box, { onMouseDown: (e) => {
                                                                             setActiveCell(null);
                                                                             interaction.setSelectionRange(null);
                                                                             wrapperRef.current?.focus({ preventScroll: true });
@@ -380,6 +384,6 @@ function DataGridTableInner(props) {
                                                             const rowIdStr = getRowId(item);
                                                             return (_jsx(GridRow, { item: item, rowIndex: rowIndex, rowId: rowIdStr, isSelected: selectedRowIds.has(rowIdStr), columnLayouts: columnLayouts, renderCellContent: renderCellContent, handleSingleRowClick: handleSingleRowClick, handleRowCheckboxChange: handleRowCheckboxChange, lastMouseShiftRef: lastMouseShiftRef, hasCheckboxCol: hasCheckboxCol, hasRowNumbersCol: hasRowNumbersCol, rowNumberOffset: rowNumberOffset, selectionRange: selectionRange, activeCell: interaction.activeCell, cutRange: cutRange, copyRange: copyRange, isDragging: isDragging, editingRowId: editingCell?.rowId ?? null }, rowIdStr));
                                                         })), virtualScrollEnabled && visibleRange.offsetBottom > 0 && (_jsx(TableRow, { style: { height: visibleRange.offsetBottom }, "aria-hidden": true }))] }))] }), isReorderDragging && dropIndicatorX != null && (_jsx(DropIndicator, { dropIndicatorX: dropIndicatorX, wrapperLeft: wrapperRef.current?.getBoundingClientRect().left ?? 0 })), _jsx(MarchingAntsOverlay, { containerRef: tableContainerRef, selectionRange: selectionRange, copyRange: copyRange, cutRange: cutRange, colOffset: colOffset, items: items, visibleColumns: props.visibleColumns, columnSizingOverrides: columnSizingOverrides, columnOrder: props.columnOrder }), showEmptyInGrid && emptyState && (_jsx(EmptyState, { emptyState: emptyState }))] }) }) }), menuPosition &&
-                        createPortal(_jsx(GridContextMenu, { x: menuPosition.x, y: menuPosition.y, hasSelection: hasCellSelection, canUndo: canUndo, canRedo: canRedo, onUndo: onUndo ?? NOOP, onRedo: onRedo ?? NOOP, onCopy: handleCopy, onCut: handleCut, onPaste: handlePasteVoid, onSelectAll: o.interaction.handleSelectAllCells, onClose: closeContextMenu }), document.body), _jsx(ColumnHeaderMenu, { columnId: pinning.headerMenu.openForColumn || '', isOpen: pinning.headerMenu.isOpen, anchorElement: pinning.headerMenu.anchorElement, onClose: pinning.headerMenu.close, onPinLeft: pinning.headerMenu.handlePinLeft, onPinRight: pinning.headerMenu.handlePinRight, onUnpin: pinning.headerMenu.handleUnpin, onSortAsc: pinning.headerMenu.handleSortAsc, onSortDesc: pinning.headerMenu.handleSortDesc, onClearSort: pinning.headerMenu.handleClearSort, onAutosizeThis: pinning.headerMenu.handleAutosizeThis, onAutosizeAll: pinning.headerMenu.handleAutosizeAll, canPinLeft: pinning.headerMenu.canPinLeft, canPinRight: pinning.headerMenu.canPinRight, canUnpin: pinning.headerMenu.canUnpin, currentSort: pinning.headerMenu.currentSort, isSortable: pinning.headerMenu.isSortable, isResizable: pinning.headerMenu.isResizable })] }), statusBarConfig && (_jsx(StatusBar, { totalCount: statusBarConfig.totalCount, filteredCount: statusBarConfig.filteredCount, selectedCount: statusBarConfig.selectedCount ?? selectedRowIds.size, selectedCellCount: selectionRange ? (Math.abs(selectionRange.endRow - selectionRange.startRow) + 1) * (Math.abs(selectionRange.endCol - selectionRange.startCol) + 1) : undefined, aggregation: statusBarConfig.aggregation, suppressRowCount: statusBarConfig.suppressRowCount })), isLoading && (_jsx(LoadingOverlay, { message: loadingMessage }))] }));
+                        createPortal(_jsx(GridContextMenu, { x: menuPosition.x, y: menuPosition.y, hasSelection: hasCellSelection, canUndo: canUndo, canRedo: canRedo, onUndo: onUndo ?? NOOP, onRedo: onRedo ?? NOOP, onCopy: handleCopy, onCut: handleCut, onPaste: handlePasteVoid, onSelectAll: o.interaction.handleSelectAllCells, onClose: closeContextMenu }), document.body), _jsx(ColumnHeaderMenu, { isOpen: headerMenu.isOpen, anchorElement: headerMenu.anchorElement, onClose: headerMenu.close, onPinLeft: headerMenu.handlePinLeft, onPinRight: headerMenu.handlePinRight, onUnpin: headerMenu.handleUnpin, onSortAsc: headerMenu.handleSortAsc, onSortDesc: headerMenu.handleSortDesc, onClearSort: headerMenu.handleClearSort, onAutosizeThis: headerMenu.handleAutosizeThis, onAutosizeAll: headerMenu.handleAutosizeAll, canPinLeft: headerMenu.canPinLeft, canPinRight: headerMenu.canPinRight, canUnpin: headerMenu.canUnpin, currentSort: headerMenu.currentSort, isSortable: headerMenu.isSortable, isResizable: headerMenu.isResizable })] }), statusBarConfig && (_jsx(StatusBar, { totalCount: statusBarConfig.totalCount, filteredCount: statusBarConfig.filteredCount, selectedCount: statusBarConfig.selectedCount ?? selectedRowIds.size, selectedCellCount: selectionRange ? (Math.abs(selectionRange.endRow - selectionRange.startRow) + 1) * (Math.abs(selectionRange.endCol - selectionRange.startCol) + 1) : undefined, aggregation: statusBarConfig.aggregation, suppressRowCount: statusBarConfig.suppressRowCount })), isLoading && (_jsx(LoadingOverlay, { message: loadingMessage }))] }));
 }
 export const DataGridTable = React.memo(DataGridTableInner);

package/dist/esm/OGrid/OGrid.js

@@ -10,7 +10,7 @@ const OGridInner = forwardRef(function OGridInner(props, ref) {
     const { dataGridProps, pagination, columnChooser, layout } = useOGrid(props, ref);
     const theme = useTheme();
     // Set --ogrid-* CSS variables so the shared OGridLayout adapts to MUI theme (both modes)
-    const containerSx = {
+    const containerSx = React.useMemo(() => ({
         display: 'flex', flexDirection: 'column', gap: 1,
         '--ogrid-bg': theme.palette.background.default,
         '--ogrid-border': theme.palette.divider,
@@ -19,7 +19,7 @@ const OGridInner = forwardRef(function OGridInner(props, ref) {
         '--ogrid-fg-secondary': theme.palette.text.secondary,
         '--ogrid-fg-muted': theme.palette.text.disabled,
         '--ogrid-hover-bg': theme.palette.action.hover,
-    };
+    }), [theme]);
     return (_jsx(OGridLayout, { containerComponent: Box, containerProps: { sx: containerSx }, className: layout.className, sideBar: layout.sideBarProps, toolbar: layout.toolbar, toolbarBelow: layout.toolbarBelow, toolbarEnd: columnChooser.placement === 'toolbar' ? (_jsx(ColumnChooser, { columns: columnChooser.columns, visibleColumns: columnChooser.visibleColumns, onVisibilityChange: columnChooser.onVisibilityChange })) : undefined, pagination: _jsx(PaginationControls, { currentPage: pagination.page, pageSize: pagination.pageSize, totalCount: pagination.displayTotalCount, onPageChange: pagination.setPage, onPageSizeChange: (size) => {
                 pagination.setPageSize(size);
                 pagination.setPage(1);

package/dist/esm/index.js

@@ -5,5 +5,7 @@ export { ColumnChooser } from './ColumnChooser/ColumnChooser';
 export { ColumnHeaderFilter } from './ColumnHeaderFilter/ColumnHeaderFilter';
 export { PaginationControls } from './PaginationControls/PaginationControls';
 export { ColumnHeaderMenu } from './ColumnHeaderMenu/ColumnHeaderMenu';
-// Re-export everything from core
+// Re-export all from base package for consumer convenience.
+// Note: This prevents tree-shaking of unused utilities.
+// Consider explicit named exports in a future major version.
 export * from '@alaarab/ogrid-react';

package/dist/types/ColumnHeaderMenu/ColumnHeaderMenu.d.ts

@@ -1,5 +1,4 @@
 export interface ColumnHeaderMenuProps {
-    columnId: string;
     isOpen: boolean;
     anchorElement: HTMLElement | null;
     onClose: () => void;

package/dist/types/DataGridTable/InlineCellEditor.d.ts

@@ -1,12 +1,4 @@
 import * as React from 'react';
-import type { IColumnDef } from '@alaarab/ogrid-react';
-export interface InlineCellEditorProps<T> {
-    value: unknown;
-    item: T;
-    column: IColumnDef<T>;
-    rowIndex: number;
-    editorType: 'text' | 'select' | 'checkbox' | 'richSelect' | 'date';
-    onCommit: (value: unknown) => void;
-    onCancel: () => void;
-}
+import type { InlineCellEditorProps } from '@alaarab/ogrid-react';
+export type { InlineCellEditorProps } from '@alaarab/ogrid-react';
 export declare function InlineCellEditor<T>(props: InlineCellEditorProps<T>): React.ReactElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react-material",
-  "version": "2.0.18",
+  "version": "2.0.21",
   "description": "OGrid React Material implementation – MUI Table–based data grid with sorting, filtering, pagination, column chooser, spreadsheet selection, and CSV export.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -39,7 +39,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-react": "2.0.18"
+    "@alaarab/ogrid-react": "2.0.21"
   },
   "peerDependencies": {
     "@emotion/react": "^11.0.0",