@alaarab/ogrid-react-material 2.1.0 → 2.1.2

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

@@ -127,20 +127,16 @@ 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)
 const HEADER_BASE_SX = {
     fontWeight: 600,
     position: 'sticky', /* Enables vertical sticky for all headers */
@@ -151,18 +147,32 @@ const HEADER_BASE_SX = {
 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',
-    },
+    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',
-    },
+    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: 'action.hover',
+};
+const HEADER_PINNED_LEFT_NO_STICKY_SX = {
+    ...HEADER_BASE_NO_STICKY_SX, position: 'sticky', left: 0,
+    zIndex: 10, 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',
+    borderLeft: '1px solid', borderLeftColor: 'divider',
+    boxShadow: '-2px 0 4px -1px rgba(0,0,0,0.1)',
 };
 // Resize handle
 const RESIZE_HANDLE_SX = {
@@ -341,7 +351,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

@@ -20,7 +20,7 @@ const OGridInner = forwardRef(function OGridInner(props, ref) {
         '--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) => {
+    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 }) }));
 });

package/package.json

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