@alaarab/ogrid-react-material 2.0.14 → 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
@@ -187,7 +202,7 @@ 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, freezeRows, freezeCols, suppressHorizontalScroll, isLoading, loadingMessage, ariaLabel, ariaLabelledBy, columnReorder, density, rowNumberOffset, headerRows, allowOverflowX, fitToContent, editCallbacks, interactionHandlers, cellDescriptorInputRef, pendingEditorValueRef, popoverAnchorElRef, handleSingleRowClick, handlePasteVoid, visibleCols, hasCheckboxCol, hasRowNumbersCol, colOffset, minTableWidth, columnSizingOverrides, 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, freezeRows, freezeCols, 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;
     // Density-aware cell padding
     const densityPadding = useMemo(() => getDensityPadding(density), [density]);
     const _cellSx = useMemo(() => ({ ...CELL_CONTENT_BASE_SX, ...densityPadding }), [densityPadding]);
@@ -206,8 +221,13 @@ function DataGridTableInner(props) {
                 ? { ...baseTdSx, right: pinning.rightOffsets[col.columnId] }
                 : baseTdSx;
         const hasResizeOverride = !!columnSizingOverrides[col.columnId];
-        return { col, tdSx, minWidth: hasResizeOverride ? columnWidth : (col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH), width: columnWidth, maxWidth: columnWidth };
-    }), [visibleCols, freezeCols, getColumnWidth, columnSizingOverrides, pinning.pinnedColumns, pinning.leftOffsets, pinning.rightOffsets]);
+        // Use previously-measured DOM width as a minWidth floor to prevent columns
+        // from shrinking when new data loads (e.g. server-side pagination).
+        const measuredW = measuredColumnWidths[col.columnId];
+        const baseMinWidth = col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
+        const effectiveMinWidth = hasResizeOverride ? columnWidth : Math.max(baseMinWidth, measuredW ?? 0);
+        return { col, tdSx, minWidth: effectiveMinWidth, width: columnWidth, maxWidth: columnWidth };
+    }), [visibleCols, freezeCols, getColumnWidth, columnSizingOverrides, measuredColumnWidths, pinning.pinnedColumns, pinning.leftOffsets, pinning.rightOffsets]);
     // Wrapper sx (depends on dynamic values — memoize to avoid recreation)
     const wrapperSx = useMemo(() => ({
         position: 'relative',
@@ -227,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);
@@ -313,7 +333,7 @@ function DataGridTableInner(props) {
                                                                     sx: {
                                                                         ...headerSx,
                                                                         ...headerCellSx,
-                                                                        minWidth: col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH,
+                                                                        minWidth: Math.max(col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH, measuredColumnWidths[col.columnId] ?? 0),
                                                                         width: columnWidth,
                                                                         maxWidth: columnWidth,
                                                                         ...(columnReorder ? { cursor: isReorderDragging ? 'grabbing' : 'grab' } : {}),

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.14",
+  "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",
@@ -39,7 +39,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-react": "2.0.14"
+    "@alaarab/ogrid-react": "2.0.15"
   },
   "peerDependencies": {
     "@emotion/react": "^11.0.0",