@alaarab/ogrid-react-material 2.1.2 → 2.1.3

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) {
@@ -137,22 +140,23 @@ const CELL_TD_PINNED_RIGHT_SX = {
     boxShadow: '-2px 0 4px -1px rgba(0,0,0,0.1)',
 };
 // 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',
+    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',
+    zIndex: 10, bgcolor: HEADER_BG, willChange: 'transform',
     borderLeft: '1px solid', borderLeftColor: 'divider',
     boxShadow: '-2px 0 4px -1px rgba(0,0,0,0.1)',
 };
@@ -160,17 +164,17 @@ const HEADER_PINNED_RIGHT_SX = {
 const HEADER_BASE_NO_STICKY_SX = {
     fontWeight: 600,
     zIndex: 8,
-    bgcolor: 'action.hover',
+    bgcolor: HEADER_BG,
 };
 const HEADER_PINNED_LEFT_NO_STICKY_SX = {
     ...HEADER_BASE_NO_STICKY_SX, position: 'sticky', left: 0,
-    zIndex: 10, willChange: 'transform',
+    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, willChange: 'transform',
+    zIndex: 10, bgcolor: HEADER_BG, willChange: 'transform',
     borderLeft: '1px solid', borderLeftColor: 'divider',
     boxShadow: '-2px 0 4px -1px rgba(0,0,0,0.1)',
 };
@@ -310,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,
@@ -320,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,

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, fullScreen: layout.fullScreen, 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.2",
+  "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.2"
+    "@alaarab/ogrid-react": "2.1.3"
   },
   "peerDependencies": {
     "@emotion/react": "^11.0.0",