@alaarab/ogrid-react-material 2.1.1 → 2.1.3

package/dist/esm/ColumnHeaderMenu/ColumnHeaderMenu.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useMemo, useEffect, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useEffect, useState } from 'react';
 import { Menu, MenuItem, Divider } from '@mui/material';
 import { getColumnHeaderMenuItems } from '@alaarab/ogrid-react';
 /**
@@ -46,8 +46,16 @@ export function ColumnHeaderMenu(props) {
                     minWidth: 140,
                 },
             },
-        }, children: items.map((item, idx) => (_jsxs(React.Fragment, { children: [_jsx(MenuItem, { disabled: item.disabled, onClick: () => {
+        }, children: items.flatMap((item, idx) => {
+            const elements = [
+                _jsx(MenuItem, { disabled: item.disabled, onClick: () => {
                         handlers[item.id]();
                         onClose();
-                    }, children: item.label }), item.divider && idx < items.length - 1 && _jsx(Divider, {})] }, item.id))) }));
+                    }, children: item.label }, item.id),
+            ];
+            if (item.divider && idx < items.length - 1) {
+                elements.push(_jsx(Divider, {}, `${item.id}-divider`));
+            }
+            return elements;
+        }) }));
 }

package/dist/esm/DataGridTable/DataGridTable.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import * as React from 'react';
 import { useCallback, useMemo } from 'react';
 import { createPortal } from 'react-dom';
-import { Box, Popover, Checkbox, Table, TableHead, TableBody, TableRow, TableCell, TableContainer, } from '@mui/material';
+import { Box, Popover, Checkbox, Table, TableHead, TableBody, TableRow, TableCell, } from '@mui/material';
 import { ColumnHeaderFilter } from '../ColumnHeaderFilter';
 import { ColumnHeaderMenu } from '../ColumnHeaderMenu';
 import { InlineCellEditor } from './InlineCellEditor';
@@ -35,15 +35,18 @@ const ROW_HOVER_SX = { '&:hover': { bgcolor: 'action.hover' } };
 const CHECKBOX_CELL_SX = { width: CHECKBOX_COLUMN_WIDTH, minWidth: CHECKBOX_COLUMN_WIDTH, maxWidth: CHECKBOX_COLUMN_WIDTH, textAlign: 'center' };
 const CHECKBOX_WRAPPER_SX = { display: 'flex', alignItems: 'center', justifyContent: 'center' };
 const CHECKBOX_PLACEHOLDER_SX = { width: CHECKBOX_COLUMN_WIDTH, minWidth: CHECKBOX_COLUMN_WIDTH, p: 0 };
-// Header
+// Header — use opaque var(--ogrid-header-bg) (not semi-transparent action.hover) so sticky
+// headers fully occlude pinned-column content scrolling beneath them.
+// The CSS variable is theme-aware: light=#f5f5f5, dark=#2c2c2c (set by each UI package).
+const HEADER_BG = 'var(--ogrid-header-bg, #f5f5f5)';
 const STICKY_HEADER_SX = {
     /* Removed position: 'sticky', top: 0 - breaks horizontal sticky on pinned columns.
        Instead, apply sticky to individual header cells (HEADER_BASE_SX). */
     zIndex: 8,
-    bgcolor: 'action.hover',
-    '& th': { bgcolor: 'action.hover' }
+    bgcolor: HEADER_BG,
+    '& th': { bgcolor: HEADER_BG }
 };
-const HEADER_ROW_SX = { bgcolor: 'action.hover' };
+const HEADER_ROW_SX = { bgcolor: HEADER_BG };
 const GROUP_HEADER_CELL_SX = { textAlign: 'center', fontWeight: 600, borderBottom: 2, borderColor: 'divider', py: 0.75 };
 // Density padding helper
 function getDensityPadding(density) {
@@ -127,42 +130,53 @@ const CELL_TD_BASE_SX = { position: 'relative', p: 0, height: '1px' };
 const CELL_TD_PINNED_LEFT_SX = {
     ...CELL_TD_BASE_SX, position: 'sticky', left: 0, zIndex: 6,
     bgcolor: 'background.paper', willChange: 'transform',
-    '&::after': {
-        content: '""', position: 'absolute', top: '-1px', right: '-4px', bottom: '-1px',
-        width: '4px', background: 'linear-gradient(to right, rgba(0,0,0,0.12), transparent)', pointerEvents: 'none',
-    },
+    borderRight: '1px solid', borderRightColor: 'divider',
+    boxShadow: '2px 0 4px -1px rgba(0,0,0,0.1)',
 };
 const CELL_TD_PINNED_RIGHT_SX = {
     ...CELL_TD_BASE_SX, position: 'sticky', right: 0, zIndex: 6,
     bgcolor: 'background.paper', willChange: 'transform',
-    '&::before': {
-        content: '""', position: 'absolute', top: '-1px', left: '-4px', bottom: '-1px',
-        width: '4px', background: 'linear-gradient(to left, rgba(0,0,0,0.12), transparent)', pointerEvents: 'none',
-    },
+    borderLeft: '1px solid', borderLeftColor: 'divider',
+    boxShadow: '-2px 0 4px -1px rgba(0,0,0,0.1)',
 };
-// Header cell positioning variants
+// Header cell positioning variants (sticky)
+// Use opaque HEADER_BG so headers fully occlude content scrolling beneath them.
 const HEADER_BASE_SX = {
     fontWeight: 600,
     position: 'sticky', /* Enables vertical sticky for all headers */
     top: 0, /* Sticky vertically */
     zIndex: 8, /* Stack above body cells */
-    bgcolor: 'action.hover' /* Required for sticky overlap */
+    bgcolor: HEADER_BG /* Opaque — required for sticky overlap */
 };
 const HEADER_PINNED_LEFT_SX = {
     ...HEADER_BASE_SX, position: 'sticky', left: 0, top: 0,
-    zIndex: 10, bgcolor: 'action.hover', willChange: 'transform',
-    '&::after': {
-        content: '""', position: 'absolute', top: '-1px', right: '-4px', bottom: '-1px',
-        width: '4px', background: 'linear-gradient(to right, rgba(0,0,0,0.12), transparent)', pointerEvents: 'none',
-    },
+    zIndex: 10, bgcolor: HEADER_BG, willChange: 'transform',
+    borderRight: '1px solid', borderRightColor: 'divider',
+    boxShadow: '2px 0 4px -1px rgba(0,0,0,0.1)',
 };
 const HEADER_PINNED_RIGHT_SX = {
     ...HEADER_BASE_SX, position: 'sticky', right: 0, top: 0,
-    zIndex: 10, bgcolor: 'action.hover', willChange: 'transform',
-    '&::before': {
-        content: '""', position: 'absolute', top: '-1px', left: '-4px', bottom: '-1px',
-        width: '4px', background: 'linear-gradient(to left, rgba(0,0,0,0.12), transparent)', pointerEvents: 'none',
-    },
+    zIndex: 10, bgcolor: HEADER_BG, willChange: 'transform',
+    borderLeft: '1px solid', borderLeftColor: 'divider',
+    boxShadow: '-2px 0 4px -1px rgba(0,0,0,0.1)',
+};
+// Header cell variants (non-sticky — stickyHeader=false)
+const HEADER_BASE_NO_STICKY_SX = {
+    fontWeight: 600,
+    zIndex: 8,
+    bgcolor: HEADER_BG,
+};
+const HEADER_PINNED_LEFT_NO_STICKY_SX = {
+    ...HEADER_BASE_NO_STICKY_SX, position: 'sticky', left: 0,
+    zIndex: 10, bgcolor: HEADER_BG, willChange: 'transform',
+    borderRight: '1px solid', borderRightColor: 'divider',
+    boxShadow: '2px 0 4px -1px rgba(0,0,0,0.1)',
+};
+const HEADER_PINNED_RIGHT_NO_STICKY_SX = {
+    ...HEADER_BASE_NO_STICKY_SX, position: 'sticky', right: 0,
+    zIndex: 10, bgcolor: HEADER_BG, willChange: 'transform',
+    borderLeft: '1px solid', borderLeftColor: 'divider',
+    boxShadow: '-2px 0 4px -1px rgba(0,0,0,0.1)',
 };
 // Resize handle
 const RESIZE_HANDLE_SX = {
@@ -300,7 +314,7 @@ function DataGridTableInner(props) {
         }
         return (_jsx(CellErrorBoundary, { onError: onCellError, children: cellContent }, `${rowId}-${col.columnId}`));
     }, [editCallbacks, interactionHandlers, handleFillHandleMouseDown, setPopoverAnchorEl, cancelPopoverEdit, getRowId, onCellError, cellDescriptorInputRef, densityPadding, pendingEditorValueRef, popoverAnchorElRef]);
-    return (_jsxs(Box, { sx: gridRootSx, children: [_jsxs(Box, { ref: wrapperRef, tabIndex: 0, role: "region", "aria-label": ariaLabel ?? (ariaLabelledBy ? undefined : 'Data grid'), "aria-labelledby": ariaLabelledBy, onMouseDown: (e) => { lastMouseShiftRef.current = e.shiftKey; }, onKeyDown: handleGridKeyDown, onContextMenu: PREVENT_DEFAULT, "data-overflow-x": allowOverflowX ? 'true' : 'false', "data-density": density, sx: wrapperSx, children: [_jsx(Box, { sx: WRAPPER_SCROLL_SX, children: _jsx(TableContainer, { sx: { minWidth: allowOverflowX ? minTableWidth : undefined }, children: _jsxs(Box, { ref: tableContainerRef, sx: isLoading && items.length > 0 ? TABLE_WRAPPER_LOADING_SX : TABLE_WRAPPER_SX, children: [_jsxs(Table, { size: "small", sx: { minWidth: minTableWidth, borderCollapse: 'separate', borderSpacing: 0 }, children: [_jsx(TableHead, { sx: STICKY_HEADER_SX, children: headerRows.map((row, rowIdx) => (_jsxs(TableRow, { sx: HEADER_ROW_SX, children: [rowIdx === headerRows.length - 1 && hasCheckboxCol && (_jsx(TableCell, { ...{ padding: "checkbox", rowSpan: headerRows.length > 1 ? 1 : undefined, sx: CHECKBOX_CELL_SX }, children: _jsx(Checkbox, { checked: allSelected, indeterminate: someSelected, onChange: (_, c) => handleSelectAll(!!c), size: "small", "aria-label": "Select all rows" }) })), rowIdx === 0 && rowIdx < headerRows.length - 1 && hasCheckboxCol && (_jsx(TableCell, { ...{ rowSpan: headerRows.length - 1, sx: CHECKBOX_PLACEHOLDER_SX } })), rowIdx === headerRows.length - 1 && hasRowNumbersCol && (_jsx(TableCell, { ...{
+    return (_jsxs(Box, { sx: gridRootSx, children: [_jsxs(Box, { ref: wrapperRef, tabIndex: 0, role: "region", "aria-label": ariaLabel ?? (ariaLabelledBy ? undefined : 'Data grid'), "aria-labelledby": ariaLabelledBy, onMouseDown: (e) => { lastMouseShiftRef.current = e.shiftKey; }, onKeyDown: handleGridKeyDown, onContextMenu: PREVENT_DEFAULT, "data-overflow-x": allowOverflowX ? 'true' : 'false', "data-density": density, sx: wrapperSx, children: [_jsx(Box, { sx: WRAPPER_SCROLL_SX, children: _jsx("div", { style: { minWidth: allowOverflowX ? minTableWidth : undefined }, children: _jsxs(Box, { ref: tableContainerRef, sx: isLoading && items.length > 0 ? TABLE_WRAPPER_LOADING_SX : TABLE_WRAPPER_SX, children: [_jsxs(Table, { size: "small", sx: { minWidth: minTableWidth, borderCollapse: 'separate', borderSpacing: 0 }, children: [_jsx(TableHead, { sx: STICKY_HEADER_SX, children: headerRows.map((row, rowIdx) => (_jsxs(TableRow, { sx: HEADER_ROW_SX, children: [rowIdx === headerRows.length - 1 && hasCheckboxCol && (_jsx(TableCell, { ...{ padding: "checkbox", rowSpan: headerRows.length > 1 ? 1 : undefined, sx: CHECKBOX_CELL_SX }, children: _jsx(Checkbox, { checked: allSelected, indeterminate: someSelected, onChange: (_, c) => handleSelectAll(!!c), size: "small", "aria-label": "Select all rows" }) })), rowIdx === 0 && rowIdx < headerRows.length - 1 && hasCheckboxCol && (_jsx(TableCell, { ...{ rowSpan: headerRows.length - 1, sx: CHECKBOX_PLACEHOLDER_SX } })), rowIdx === headerRows.length - 1 && hasRowNumbersCol && (_jsx(TableCell, { ...{
                                                                 component: "th",
                                                                 scope: "col",
                                                                 rowSpan: headerRows.length > 1 ? 1 : undefined,
@@ -310,7 +324,7 @@ function DataGridTableInner(props) {
                                                                     maxWidth: ROW_NUMBER_COLUMN_WIDTH,
                                                                     textAlign: 'center',
                                                                     fontWeight: 600,
-                                                                    backgroundColor: 'action.hover',
+                                                                    backgroundColor: HEADER_BG,
                                                                     position: 'sticky',
                                                                     left: hasCheckboxCol ? CHECKBOX_COLUMN_WIDTH : 0,
                                                                     zIndex: 4,
@@ -341,7 +355,9 @@ function DataGridTableInner(props) {
                                                             const col = cell.columnDef;
                                                             const isPinnedLeft = pinning.pinnedColumns[col.columnId] === 'left';
                                                             const isPinnedRight = pinning.pinnedColumns[col.columnId] === 'right';
-                                                            const baseHeaderSx = isPinnedLeft ? HEADER_PINNED_LEFT_SX : isPinnedRight ? HEADER_PINNED_RIGHT_SX : HEADER_BASE_SX;
+                                                            const baseHeaderSx = o.stickyHeader
+                                                                ? (isPinnedLeft ? HEADER_PINNED_LEFT_SX : isPinnedRight ? HEADER_PINNED_RIGHT_SX : HEADER_BASE_SX)
+                                                                : (isPinnedLeft ? HEADER_PINNED_LEFT_NO_STICKY_SX : isPinnedRight ? HEADER_PINNED_RIGHT_NO_STICKY_SX : HEADER_BASE_NO_STICKY_SX);
                                                             // Override sticky offset for pinned columns (supports multiple pinned columns)
                                                             const headerSx = isPinnedLeft && pinning.leftOffsets[col.columnId] != null
                                                                 ? { ...baseHeaderSx, left: pinning.leftOffsets[col.columnId] }

package/dist/esm/DataGridTable/GridContextMenu.js

@@ -14,5 +14,12 @@ export function GridContextMenu(props) {
             return true;
         return false;
     }, [hasSelection, canUndo, canRedo]);
-    return (_jsx(Menu, { open: true, onClose: onClose, anchorReference: "anchorPosition", anchorPosition: { top: y, left: x }, MenuListProps: { dense: true, 'aria-label': 'Grid context menu' }, children: GRID_CONTEXT_MENU_ITEMS.map((item) => (_jsxs(React.Fragment, { children: [item.dividerBefore && _jsx(Divider, {}), _jsxs(MenuItem, { onClick: handlers[item.id], disabled: isDisabled(item), children: [_jsx("span", { style: { flex: 1 }, children: item.label }), item.shortcut && (_jsx("span", { style: { marginLeft: 24, color: 'var(--ogrid-fg-muted, rgba(0,0,0,0.4))', fontSize: '0.8em' }, children: formatShortcut(item.shortcut) }))] })] }, item.id))) }));
+    return (_jsx(Menu, { open: true, onClose: onClose, anchorReference: "anchorPosition", anchorPosition: { top: y, left: x }, MenuListProps: { dense: true, 'aria-label': 'Grid context menu' }, children: GRID_CONTEXT_MENU_ITEMS.flatMap((item) => {
+            const elements = [];
+            if (item.dividerBefore) {
+                elements.push(_jsx(Divider, {}, `${item.id}-divider`));
+            }
+            elements.push(_jsxs(MenuItem, { onClick: handlers[item.id], disabled: isDisabled(item), children: [_jsx("span", { style: { flex: 1 }, children: item.label }), item.shortcut && (_jsx("span", { style: { marginLeft: 24, color: 'var(--ogrid-fg-muted, rgba(0,0,0,0.4))', fontSize: '0.8em' }, children: formatShortcut(item.shortcut) }))] }, item.id));
+            return elements;
+        }) }));
 }

package/dist/esm/OGrid/OGrid.js

@@ -1,28 +1,31 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
-import { forwardRef } from 'react';
 import { Box, useTheme } from '@mui/material';
+import { createOGrid } from '@alaarab/ogrid-react';
 import { DataGridTable } from '../DataGridTable/DataGridTable';
 import { ColumnChooser } from '../ColumnChooser/ColumnChooser';
 import { PaginationControls } from '../PaginationControls/PaginationControls';
-import { useOGrid, OGridLayout, } from '@alaarab/ogrid-react';
-const OGridInner = forwardRef(function OGridInner(props, ref) {
-    const { dataGridProps, pagination, columnChooser, layout } = useOGrid(props, ref);
+/**
+ * MUI theme bridge: reads the MUI palette and sets --ogrid-* CSS variables
+ * so the shared OGridLayout and DataGridTable styles adapt to the MUI theme.
+ */
+const MuiThemeContainer = React.forwardRef(function MuiThemeContainer(props, ref) {
     const theme = useTheme();
-    // Set --ogrid-* CSS variables so the shared OGridLayout adapts to MUI theme (both modes)
-    const containerSx = React.useMemo(() => ({
+    const sx = React.useMemo(() => ({
         display: 'flex', flexDirection: 'column', gap: 1,
         '--ogrid-bg': theme.palette.background.default,
         '--ogrid-border': theme.palette.divider,
-        '--ogrid-header-bg': theme.palette.action.hover,
+        '--ogrid-header-bg': theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[100],
         '--ogrid-fg': theme.palette.text.primary,
         '--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);
-            }, pageSizeOptions: pagination.pageSizeOptions, entityLabelPlural: pagination.entityLabelPlural }), children: _jsx(DataGridTable, { ...dataGridProps }) }));
+    return _jsx(Box, { ref: ref, sx: sx, ...props });
+});
+export const OGrid = createOGrid({
+    DataGridTable: DataGridTable,
+    ColumnChooser: ColumnChooser,
+    PaginationControls,
+    containerComponent: MuiThemeContainer,
 });
-OGridInner.displayName = 'OGrid';
-export const OGrid = React.memo(OGridInner);

package/dist/types/OGrid/OGrid.d.ts

@@ -1,5 +1,3 @@
 import * as React from 'react';
-import { type IOGridProps, type IOGridApi } from '@alaarab/ogrid-react';
 export type { IOGridProps } from '@alaarab/ogrid-react';
-declare const OGridInner: React.ForwardRefExoticComponent<IOGridProps<unknown> & React.RefAttributes<IOGridApi<unknown>>>;
-export declare const OGrid: typeof OGridInner;
+export declare const OGrid: React.ForwardRefExoticComponent<import("@alaarab/ogrid-react").IOGridProps<unknown> & React.RefAttributes<import("@alaarab/ogrid-react").IOGridApi<unknown>>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react-material",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "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.1.1"
+    "@alaarab/ogrid-react": "2.1.3"
   },
   "peerDependencies": {
     "@emotion/react": "^11.0.0",