@alaarab/ogrid-react-material 2.0.15 → 2.0.16

package/dist/esm/ColumnHeaderMenu/ColumnHeaderMenu.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useMemo, useEffect, useState } from 'react';
 import { Menu, MenuItem, Divider } from '@mui/material';
-import { getColumnHeaderMenuItems } from '@alaarab/ogrid-core';
+import { getColumnHeaderMenuItems } from '@alaarab/ogrid-react';
 /**
  * Column header dropdown menu for pin/sort/autosize actions.
  * Uses Material UI Menu component with anchor position.

package/dist/esm/DataGridTable/DataGridTable.js

@@ -14,6 +14,21 @@ import { DropIndicator } from './DropIndicator';
 import { useDataGridTableOrchestration, getHeaderFilterConfig, getCellRenderDescriptor, MarchingAntsOverlay, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, areGridRowPropsEqual, CellErrorBoundary, CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, PREVENT_DEFAULT, NOOP, STOP_PROPAGATION, } from '@alaarab/ogrid-react';
 // ── Module-scope stable styles (avoid per-render Emotion resolutions) ──
 const gridRootSx = { position: 'relative', flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' };
+// Editing cell wrapper (plain div, not MUI)
+const EDITING_CELL_STYLE = {
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    outline: '2px solid var(--ogrid-selection-color, #217346)',
+    outlineOffset: '-1px',
+    zIndex: 2,
+    position: 'relative',
+    background: 'var(--ogrid-bg, #fff)',
+    overflow: 'visible',
+    padding: 0,
+};
 // Row
 const ROW_HOVER_SX = { '&:hover': { bgcolor: 'action.hover' } };
 // Checkbox column
@@ -232,7 +247,7 @@ function DataGridTableInner(props) {
         const rowId = getRowId(item);
         let cellContent;
         if (descriptor.mode === 'editing-inline') {
-            cellContent = _jsx(InlineCellEditor, { ...buildInlineEditorProps(item, col, descriptor, editCallbacks) });
+            cellContent = (_jsx("div", { style: EDITING_CELL_STYLE, children: _jsx(InlineCellEditor, { ...buildInlineEditorProps(item, col, descriptor, editCallbacks) }) }));
         }
         else if (descriptor.mode === 'editing-popover' && typeof col.cellEditor === 'function') {
             const editorProps = buildPopoverEditorProps(item, col, descriptor, pendingEditorValueRef.current, editCallbacks);

package/dist/esm/DataGridTable/InlineCellEditor.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Checkbox, Select, MenuItem } from '@mui/material';
-import { BaseInlineCellEditor, editorWrapperStyle } from '@alaarab/ogrid-react';
+import { Checkbox } from '@mui/material';
+import { BaseInlineCellEditor } from '@alaarab/ogrid-react';
 export function InlineCellEditor(props) {
-    return (_jsx(BaseInlineCellEditor, { ...props, renderCheckbox: (checked, onCommit, onCancel) => (_jsx(Checkbox, { checked: checked, onChange: (_, c) => onCommit(c), onKeyDown: (e) => e.key === 'Escape' && (e.preventDefault(), onCancel()), size: "small" })), renderSelect: (value, values, onCommit, onCancel) => (_jsx("div", { style: editorWrapperStyle, children: _jsx(Select, { size: "small", value: value !== null && value !== undefined ? String(value) : '', onChange: (e) => onCommit(e.target.value), onKeyDown: (e) => e.key === 'Escape' && (e.preventDefault(), onCancel()), autoFocus: true, sx: { minWidth: 0, flex: 1 }, children: values.map((v) => (_jsx(MenuItem, { value: String(v), children: String(v) }, String(v)))) }) })) }));
+    return (_jsx(BaseInlineCellEditor, { ...props, renderCheckbox: (checked, onCommit, onCancel) => (_jsx(Checkbox, { checked: checked, onChange: (_, c) => onCommit(c), onKeyDown: (e) => e.key === 'Escape' && (e.preventDefault(), onCancel()), size: "small" })) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react-material",
-  "version": "2.0.15",
+  "version": "2.0.16",
   "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",