@alaarab/ogrid-react-material 2.0.23 → 2.1.1

package/dist/esm/ColumnChooser/ColumnChooser.js

@@ -4,10 +4,10 @@ import { Button, Popover, Checkbox, Box, Typography, FormControlLabel, } from '@
 import { ViewColumn as ViewColumnIcon, ExpandMore as ExpandMoreIcon, ExpandLess as ExpandLessIcon, } from '@mui/icons-material';
 import { useColumnChooserState } from '@alaarab/ogrid-react';
 export const ColumnChooser = (props) => {
-    const { columns, visibleColumns, onVisibilityChange, className } = props;
+    const { columns, visibleColumns, onVisibilityChange, onSetVisibleColumns, className } = props;
     const [anchorEl, setAnchorEl] = useState(null);
     const buttonRef = useRef(null);
-    const { open: isOpen, setOpen, handleClose, handleCheckboxChange: setColumnVisible, handleSelectAll, handleClearAll, visibleCount, totalCount, } = useColumnChooserState({ columns, visibleColumns, onVisibilityChange });
+    const { open: isOpen, setOpen, handleClose, handleCheckboxChange: setColumnVisible, handleSelectAll, handleClearAll, visibleCount, totalCount, } = useColumnChooserState({ columns, visibleColumns, onVisibilityChange, onSetVisibleColumns });
     const handleToggle = (e) => {
         if (isOpen) {
             handleClose();
@@ -40,7 +40,7 @@ export const ColumnChooser = (props) => {
                             borderBottom: 1,
                             borderColor: 'divider',
                             bgcolor: 'action.hover',
-                        }, children: _jsxs(Typography, { variant: "subtitle2", fontWeight: 600, children: ["Select Columns (", visibleCount, " of ", totalCount, ")"] }) }), _jsx(Box, { sx: { maxHeight: 320, overflowY: 'auto', py: 0.5 }, children: columns.map((column) => (_jsx(Box, { sx: { px: 1.5, minHeight: 32, display: 'flex', alignItems: 'center' }, children: _jsx(FormControlLabel, { control: _jsx(Checkbox, { size: "small", checked: visibleColumns.has(column.columnId), onChange: handleCheckboxChange(column.columnId) }), label: _jsx(Typography, { variant: "body2", children: column.name }), sx: { m: 0 } }) }, column.columnId))) }), _jsxs(Box, { sx: {
+                        }, children: _jsxs(Typography, { variant: "subtitle2", fontWeight: 600, children: ["Select Columns (", visibleCount, " of ", totalCount, ")"] }) }), _jsx(Box, { sx: { maxHeight: 320, overflowY: 'auto', py: 0.5 }, children: columns.map((column) => (_jsx(Box, { sx: { px: 1.5, minHeight: 32, display: 'flex', alignItems: 'center' }, children: _jsx(FormControlLabel, { control: _jsx(Checkbox, { size: "small", checked: visibleColumns.has(column.columnId), onChange: handleCheckboxChange(column.columnId), disabled: column.required === true }), label: _jsx(Typography, { variant: "body2", children: column.name }), sx: { m: 0 } }) }, column.columnId))) }), _jsxs(Box, { sx: {
                             display: 'flex',
                             justifyContent: 'flex-end',
                             gap: 1,

package/dist/esm/DataGridTable/DataGridTable.js

@@ -11,7 +11,7 @@ import { GridContextMenu } from './GridContextMenu';
 import { EmptyState } from './EmptyState';
 import { LoadingOverlay } from './LoadingOverlay';
 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';
+import { useDataGridTableOrchestration, useColumnMeta, getHeaderFilterConfig, getCellRenderDescriptor, MarchingAntsOverlay, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, areGridRowPropsEqual, CellErrorBoundary, CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_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)
@@ -229,11 +229,22 @@ function DataGridTableInner(props) {
     // Density-aware cell padding
     const densityPadding = useMemo(() => getDensityPadding(density), [density]);
     const headerCellSx = useMemo(() => ({ px: densityPadding.px, py: densityPadding.py }), [densityPadding]);
-    // Pre-compute per-column layout (tdSx, widths) so GridRow doesn't recalculate per-cell
+    // Shared width/minWidth computation (deduped with Radix/Fluent via useColumnMeta)
+    const columnMeta = useColumnMeta({
+        visibleCols,
+        getColumnWidth,
+        columnSizingOverrides,
+        measuredColumnWidths,
+        pinnedColumns: pinning.pinnedColumns,
+        leftOffsets: pinning.leftOffsets,
+        rightOffsets: pinning.rightOffsets,
+        pinnedColLeftClass: '',
+        pinnedColRightClass: '',
+    });
+    // Pre-compute per-column layout (tdSx + widths from columnMeta) so GridRow doesn't recalculate per-cell
     const columnLayouts = useMemo(() => visibleCols.map((col) => {
         const isPinnedLeft = pinning.pinnedColumns[col.columnId] === 'left';
         const isPinnedRight = pinning.pinnedColumns[col.columnId] === 'right';
-        const columnWidth = getColumnWidth(col);
         const baseTdSx = isPinnedLeft ? CELL_TD_PINNED_LEFT_SX : isPinnedRight ? CELL_TD_PINNED_RIGHT_SX : CELL_TD_BASE_SX;
         // Override sticky offset for pinned columns (supports multiple pinned columns)
         const tdSx = isPinnedLeft && pinning.leftOffsets[col.columnId] != null
@@ -241,14 +252,15 @@ function DataGridTableInner(props) {
             : isPinnedRight && pinning.rightOffsets[col.columnId] != null
                 ? { ...baseTdSx, right: pinning.rightOffsets[col.columnId] }
                 : baseTdSx;
-        const hasResizeOverride = !!columnSizingOverrides[col.columnId];
-        // 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, getColumnWidth, columnSizingOverrides, measuredColumnWidths, pinning.pinnedColumns, pinning.leftOffsets, pinning.rightOffsets]);
+        const cellStyle = columnMeta.cellStyles[col.columnId];
+        return {
+            col,
+            tdSx,
+            minWidth: cellStyle?.minWidth ?? 0,
+            width: cellStyle?.width ?? getColumnWidth(col),
+            maxWidth: cellStyle?.maxWidth ?? getColumnWidth(col),
+        };
+    }), [visibleCols, columnMeta, pinning.pinnedColumns, pinning.leftOffsets, pinning.rightOffsets, getColumnWidth]);
     // Wrapper sx (depends on dynamic values — memoize to avoid recreation)
     const wrapperSx = useMemo(() => ({
         position: 'relative',
@@ -284,14 +296,10 @@ function DataGridTableInner(props) {
             // Select pre-computed sx variant (module-scope = no per-cell allocation)
             const cellSx = getCellSx(col.type, descriptor.canEditAny, descriptor.isActive && !descriptor.isInRange, descriptor.isInRange, descriptor.isInCutRange);
             const interactionProps = getCellInteractionProps(descriptor, col.columnId, interactionHandlers);
-            cellContent = (_jsxs(Box, { component: "div", ...interactionProps, 
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                sx: Array.isArray(cellSx) ? [...cellSx, densityPadding] : { ...cellSx, ...densityPadding }, children: [styledContent, descriptor.canEditAny && descriptor.isSelectionEndCell && (_jsx(Box, { component: "div", onMouseDown: handleFillHandleMouseDown, "aria-label": "Fill handle", sx: FILL_HANDLE_SX }))] }));
+            cellContent = (_jsxs(Box, { component: "div", ...interactionProps, sx: Array.isArray(cellSx) ? [...cellSx, densityPadding] : { ...cellSx, ...densityPadding }, children: [styledContent, descriptor.canEditAny && descriptor.isSelectionEndCell && (_jsx(Box, { component: "div", onMouseDown: handleFillHandleMouseDown, "aria-label": "Fill handle", sx: FILL_HANDLE_SX }))] }));
         }
         return (_jsx(CellErrorBoundary, { onError: onCellError, children: cellContent }, `${rowId}-${col.columnId}`));
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- *Ref vars are stable refs from useLatestRef
-    [editCallbacks, interactionHandlers, handleFillHandleMouseDown, setPopoverAnchorEl, cancelPopoverEdit, getRowId, onCellError]);
+    }, [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, { ...{
                                                                 component: "th",
                                                                 scope: "col",
@@ -328,10 +336,11 @@ function DataGridTableInner(props) {
                                                                     }, children: cell.label }, cellIdx));
                                                             }
                                                             // Leaf cell
+                                                            if (!cell.columnDef)
+                                                                return null;
                                                             const col = cell.columnDef;
                                                             const isPinnedLeft = pinning.pinnedColumns[col.columnId] === 'left';
                                                             const isPinnedRight = pinning.pinnedColumns[col.columnId] === 'right';
-                                                            const columnWidth = getColumnWidth(col);
                                                             const baseHeaderSx = isPinnedLeft ? HEADER_PINNED_LEFT_SX : isPinnedRight ? HEADER_PINNED_RIGHT_SX : HEADER_BASE_SX;
                                                             // Override sticky offset for pinned columns (supports multiple pinned columns)
                                                             const headerSx = isPinnedLeft && pinning.leftOffsets[col.columnId] != null
@@ -339,6 +348,8 @@ function DataGridTableInner(props) {
                                                                 : isPinnedRight && pinning.rightOffsets[col.columnId] != null
                                                                     ? { ...baseHeaderSx, right: pinning.rightOffsets[col.columnId] }
                                                                     : baseHeaderSx;
+                                                            // Width/minWidth from shared useColumnMeta (avoids duplicate calculation)
+                                                            const hdrStyle = columnMeta.hdrStyles[col.columnId];
                                                             // Determine aria-sort value for sorted columns
                                                             const isSorted = props.sortBy === col.columnId;
                                                             const ariaSort = isSorted
@@ -353,9 +364,9 @@ function DataGridTableInner(props) {
                                                                     sx: {
                                                                         ...headerSx,
                                                                         ...headerCellSx,
-                                                                        minWidth: Math.max(col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH, measuredColumnWidths[col.columnId] ?? 0),
-                                                                        width: columnWidth,
-                                                                        maxWidth: columnWidth,
+                                                                        minWidth: hdrStyle?.minWidth,
+                                                                        width: hdrStyle?.width,
+                                                                        maxWidth: hdrStyle?.maxWidth,
                                                                         ...(columnReorder ? { cursor: isReorderDragging ? 'grabbing' : 'grab' } : {}),
                                                                         '&:focus-visible': {
                                                                             outline: '2px solid',

package/dist/esm/OGrid/OGrid.js

@@ -22,7 +22,6 @@ const OGridInner = forwardRef(function OGridInner(props, ref) {
     }), [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);
-                pagination.setPage(1);
             }, pageSizeOptions: pagination.pageSizeOptions, entityLabelPlural: pagination.entityLabelPlural }), children: _jsx(DataGridTable, { ...dataGridProps }) }));
 });
 OGridInner.displayName = 'OGrid';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react-material",
-  "version": "2.0.23",
+  "version": "2.1.1",
   "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.23"
+    "@alaarab/ogrid-react": "2.1.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.0.0",
@@ -68,5 +68,12 @@
   },
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/alaarab/ogrid.git",
+    "directory": "packages/react-material"
+  },
+  "homepage": "https://ogrid.dev",
+  "bugs": "https://github.com/alaarab/ogrid/issues"
 }