@alaarab/ogrid-react-material 2.4.0 → 2.4.1

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 import * as React4 from 'react';
 import { useMemo, useCallback, useState, useRef, useEffect } from 'react';
 import { Box, Tooltip, Typography, IconButton, Popover, useTheme, TextField, InputAdornment, Button, CircularProgress, FormControlLabel, Checkbox, Avatar, Table, TableHead, TableRow, TableCell, Select, MenuItem, Menu, Divider } from '@mui/material';
-import { createBaseFilterRenderers, useColumnHeaderFilterState, getColumnHeaderFilterStateParams, renderFilterContent, areGridRowPropsEqual, PaginationControlsBase, createOGrid, useListVirtualizer, CHECKBOX_COLUMN_WIDTH, STOP_PROPAGATION, ROW_NUMBER_COLUMN_WIDTH, useDataGridTableOrchestration, useColumnMeta, getCellRenderDescriptor, buildInlineEditorProps, buildPopoverEditorProps, resolveCellDisplayContent, resolveCellStyle, getCellInteractionProps, CellErrorBoundary, PREVENT_DEFAULT, indexToColumnLetter, getHeaderFilterConfig, MarchingAntsOverlay, FormulaRefOverlay, NOOP, getColumnHeaderMenuProps, useColumnChooserState, ColumnChooserContent, BaseInlineCellEditor, partitionColumnsForVirtualization, getContextMenuHandlers, GRID_CONTEXT_MENU_ITEMS, formatShortcut, getColumnHeaderMenuItems, getStatusBarParts } from '@alaarab/ogrid-react';
+import { createBaseFilterRenderers, useColumnHeaderFilterState, getColumnHeaderFilterStateParams, renderFilterContent, areGridRowPropsEqual, PaginationControlsBase, createOGrid, useListVirtualizer, CHECKBOX_COLUMN_WIDTH, STOP_PROPAGATION, ROW_NUMBER_COLUMN_WIDTH, useDataGridTableOrchestration, useColumnMeta, getCellRenderDescriptor, buildInlineEditorProps, buildPopoverEditorProps, resolveCellDisplayContent, resolveCellStyle, getCellInteractionProps, CellErrorBoundary, PREVENT_DEFAULT, indexToColumnLetter, ROW_NUMBER_COLUMN_ID, getHeaderFilterConfig, MarchingAntsOverlay, FormulaRefOverlay, NOOP, getColumnHeaderMenuProps, useColumnChooserState, ColumnChooserContent, BaseInlineCellEditor, partitionColumnsForVirtualization, getContextMenuHandlers, GRID_CONTEXT_MENU_ITEMS, formatShortcut, getColumnHeaderMenuItems, getStatusBarParts } from '@alaarab/ogrid-react';
 export { BaseColumnHeaderMenu, BaseDropIndicator, BaseEmptyState, BaseInlineCellEditor, BaseLoadingOverlay, CELL_PADDING, CHECKBOX_COLUMN_WIDTH, COLUMN_HEADER_MENU_ITEMS, CURSOR_CELL_STYLE, CellErrorBoundary, DEFAULT_MIN_COLUMN_WIDTH, DateFilterContent, EmptyState, GRID_BORDER_RADIUS, GRID_CONTEXT_MENU_ITEMS, GRID_ROOT_STYLE, GridContextMenu, MAX_PAGE_BUTTONS, MarchingAntsOverlay, NOOP, OGridLayout, PAGE_SIZE_OPTIONS, POPOVER_ANCHOR_STYLE, PREVENT_DEFAULT, ROW_NUMBER_COLUMN_WIDTH, STOP_PROPAGATION, SideBar, StatusBar, UndoRedoStack, areGridRowPropsEqual, booleanParser, buildCsvHeader, buildCsvRows, buildHeaderRows, buildInlineEditorProps, buildPopoverEditorProps, clampSelectionToBounds, computeAggregations, computeAutoScrollSpeed, computeTabNavigation, createOGrid, currencyParser, dateParser, deriveFilterOptionsFromData, editorInputStyle, editorWrapperStyle, emailParser, escapeCsvValue, exportToCsv, findCtrlArrowTarget, flattenColumns, formatCellValueForTsv, formatSelectionAsTsv, formatShortcut, getCellInteractionProps, getCellRenderDescriptor, getCellValue, getColumnHeaderFilterStateParams, getColumnHeaderMenuItems, getContextMenuHandlers, getDataGridStatusBarConfig, getDateFilterContentProps, getFilterField, getHeaderFilterConfig, getMultiSelectFilterFields, getPaginationViewModel, getStatusBarParts, isInSelectionRange, isRowInRange, mergeFilter, normalizeSelectionRange, numberParser, parseTsvClipboard, parseValue, processClientSideData, rangesEqual, renderFilterContent, resolveCellDisplayContent, resolveCellStyle, richSelectDropdownStyle, richSelectNoMatchesStyle, richSelectOptionHighlightedStyle, richSelectOptionStyle, richSelectWrapperStyle, selectChevronStyle, selectDisplayStyle, selectEditorStyle, toUserLike, triggerCsvDownload, useActiveCell, useCellEditing, useCellSelection, useClipboard, useColumnChooserState, useColumnHeaderFilterState, useColumnMeta, useColumnReorder, useColumnResize, useContextMenu, useDataGridState, useDataGridTableOrchestration, useDateFilterState, useDebounce, useFillHandle, useFilterOptions, useInlineCellEditorState, useKeyboardNavigation, useLatestRef, useListVirtualizer, useMultiSelectFilterState, useOGrid, usePaginationControls, usePeopleFilterState, useRichSelectState, useRowSelection, useSelectState, useSideBarState, useTableLayout, useTextFilterState, useUndoRedo, useVirtualScroll } from '@alaarab/ogrid-react';
 import { createPortal } from 'react-dom';
 import { FilterList, Search, Clear, ExpandLess, ExpandMore, ViewColumn, LastPage, ChevronRight, ChevronLeft, FirstPage } from '@mui/icons-material';
@@ -725,7 +725,8 @@ function GridRowInner(props) {
     rowHeight,
     leftSpacerWidth,
     rightSpacerWidth,
-    globalColIndexMap
+    globalColIndexMap,
+    rowNumWidth
   } = props;
   return /* @__PURE__ */ jsxs(
     "tr",
@@ -754,20 +755,23 @@ function GridRowInner(props) {
             )
           }
         ) }),
-        hasRowNumbersCol && /* @__PURE__ */ jsx(
-          "td",
-          {
-            className: "ogrid-mat-td ogrid-mat-row-number",
-            style: {
-              width: ROW_NUMBER_COLUMN_WIDTH,
-              minWidth: ROW_NUMBER_COLUMN_WIDTH,
-              maxWidth: ROW_NUMBER_COLUMN_WIDTH,
-              left: hasCheckboxCol ? CHECKBOX_COLUMN_WIDTH : 0,
-              borderBottom: "1px solid var(--ogrid-border, rgba(224,224,224,1))"
-            },
-            children: rowNumberOffset + rowIndex + 1
-          }
-        ),
+        hasRowNumbersCol && (() => {
+          const rnw = rowNumWidth ?? ROW_NUMBER_COLUMN_WIDTH;
+          return /* @__PURE__ */ jsx(
+            "td",
+            {
+              className: "ogrid-mat-td ogrid-mat-row-number",
+              style: {
+                width: rnw,
+                minWidth: rnw,
+                maxWidth: rnw,
+                left: hasCheckboxCol ? CHECKBOX_COLUMN_WIDTH : 0,
+                borderBottom: "1px solid var(--ogrid-border, rgba(224,224,224,1))"
+              },
+              children: rowNumberOffset + rowIndex + 1
+            }
+          );
+        })(),
         leftSpacerWidth != null && leftSpacerWidth > 0 && /* @__PURE__ */ jsx("td", { style: { ...SPACER_TD_STYLE, width: leftSpacerWidth, minWidth: leftSpacerWidth }, "aria-hidden": true }),
         columnLayouts.map((cl, colIdx) => {
           const globalIdx = globalColIndexMap ? globalColIndexMap[colIdx] : colIdx;
@@ -813,7 +817,8 @@ function MaterialTableBody(props) {
     copyRange,
     isDragging,
     editingCell,
-    pinnedColumns
+    pinnedColumns,
+    rowNumWidth
   } = props;
   const { rowLayouts, globalColIndexMap, leftSpacerWidth, rightSpacerWidth } = React4.useMemo(() => {
     if (!columnRange) {
@@ -868,7 +873,8 @@ function MaterialTableBody(props) {
         editingRowId: editingCell?.rowId ?? null,
         leftSpacerWidth,
         rightSpacerWidth,
-        globalColIndexMap
+        globalColIndexMap,
+        rowNumWidth
       },
       rowIdStr
     );
@@ -1037,9 +1043,14 @@ function DataGridTableInner(props) {
           )
         ] });
       } else {
-        const content = resolveCellDisplayContent(col, item, descriptor.displayValue);
-        const cellStyle = resolveCellStyle(col, item, descriptor.displayValue);
-        const styledContent = cellStyle ? /* @__PURE__ */ jsx("span", { style: cellStyle, children: content }) : content;
+        let displayNode;
+        if (descriptor.columnType === "boolean") {
+          displayNode = /* @__PURE__ */ jsx("input", { type: "checkbox", checked: !!descriptor.displayValue, disabled: true, style: { margin: 0, pointerEvents: "none" }, "aria-label": descriptor.displayValue ? "True" : "False" });
+        } else {
+          const content = resolveCellDisplayContent(col, item, descriptor.displayValue);
+          const cellStyle = resolveCellStyle(col, item, descriptor.displayValue);
+          displayNode = cellStyle ? /* @__PURE__ */ jsx("span", { style: cellStyle, children: content }) : content;
+        }
         let cls = "ogrid-mat-cell";
         if (col.type === "numeric") cls += " ogrid-mat-cell--numeric";
         else if (col.type === "boolean") cls += " ogrid-mat-cell--boolean";
@@ -1056,7 +1067,7 @@ function DataGridTableInner(props) {
             ...interactionProps,
             style: cellDensityStyle,
             children: [
-              styledContent,
+              displayNode,
               descriptor.canEditAny && descriptor.isSelectionEndCell && /* @__PURE__ */ jsx("div", { className: "ogrid-mat-fill-handle", onMouseDown: handleFillHandleMouseDown, "aria-label": "Fill handle" })
             ]
           }
@@ -1137,45 +1148,59 @@ function DataGridTableInner(props) {
                         }
                       ),
                       rowIdx === 0 && rowIdx < headerRows.length - 1 && hasCheckboxCol && /* @__PURE__ */ jsx(TableCell, { ...{ rowSpan: headerRows.length - 1, sx: CHECKBOX_PLACEHOLDER_SX } }),
-                      rowIdx === headerRows.length - 1 && hasRowNumbersCol && /* @__PURE__ */ jsx(
-                        TableCell,
-                        {
-                          ...{
-                            component: "th",
-                            scope: "col",
-                            rowSpan: headerRows.length > 1 ? 1 : void 0,
-                            sx: {
-                              width: ROW_NUMBER_COLUMN_WIDTH,
-                              minWidth: ROW_NUMBER_COLUMN_WIDTH,
-                              maxWidth: ROW_NUMBER_COLUMN_WIDTH,
-                              textAlign: "center",
-                              fontWeight: 600,
-                              backgroundColor: HEADER_BG,
-                              position: "sticky",
-                              left: hasCheckboxCol ? CHECKBOX_COLUMN_WIDTH : 0,
-                              zIndex: 4,
-                              ...headerCellSx
-                            }
-                          },
-                          children: "#"
-                        }
-                      ),
-                      rowIdx === 0 && rowIdx < headerRows.length - 1 && hasRowNumbersCol && /* @__PURE__ */ jsx(
-                        TableCell,
-                        {
-                          ...{
-                            rowSpan: headerRows.length - 1,
-                            sx: {
-                              width: ROW_NUMBER_COLUMN_WIDTH,
-                              minWidth: ROW_NUMBER_COLUMN_WIDTH,
-                              position: "sticky",
-                              left: hasCheckboxCol ? CHECKBOX_COLUMN_WIDTH : 0,
-                              zIndex: 4,
-                              backgroundColor: "background.paper"
+                      rowIdx === headerRows.length - 1 && hasRowNumbersCol && (() => {
+                        const rnw = columnSizingOverrides?.[ROW_NUMBER_COLUMN_ID]?.widthPx ?? ROW_NUMBER_COLUMN_WIDTH;
+                        return /* @__PURE__ */ jsxs(
+                          TableCell,
+                          {
+                            ...{
+                              component: "th",
+                              scope: "col",
+                              rowSpan: headerRows.length > 1 ? 1 : void 0,
+                              sx: {
+                                width: rnw,
+                                minWidth: rnw,
+                                maxWidth: rnw,
+                                textAlign: "center",
+                                fontWeight: 600,
+                                backgroundColor: HEADER_BG,
+                                position: "sticky",
+                                left: hasCheckboxCol ? CHECKBOX_COLUMN_WIDTH : 0,
+                                zIndex: 4,
+                                ...headerCellSx
+                              }
+                            },
+                            children: [
+                              "#",
+                              /* @__PURE__ */ jsx(Box, { onMouseDown: (e) => {
+                                setActiveCell(null);
+                                interaction.setSelectionRange(null);
+                                wrapperRef.current?.focus({ preventScroll: true });
+                                handleResizeStart(e, { columnId: ROW_NUMBER_COLUMN_ID, name: "#" });
+                              }, sx: RESIZE_HANDLE_SX })
+                            ]
+                          }
+                        );
+                      })(),
+                      rowIdx === 0 && rowIdx < headerRows.length - 1 && hasRowNumbersCol && (() => {
+                        const spacerRnw = columnSizingOverrides?.[ROW_NUMBER_COLUMN_ID]?.widthPx ?? ROW_NUMBER_COLUMN_WIDTH;
+                        return /* @__PURE__ */ jsx(
+                          TableCell,
+                          {
+                            ...{
+                              rowSpan: headerRows.length - 1,
+                              sx: {
+                                width: spacerRnw,
+                                minWidth: spacerRnw,
+                                position: "sticky",
+                                left: hasCheckboxCol ? CHECKBOX_COLUMN_WIDTH : 0,
+                                zIndex: 4,
+                                backgroundColor: "background.paper"
+                              }
                             }
                           }
-                        }
-                      ),
+                        );
+                      })(),
                       row.map((cell, cellIdx) => {
                         if (cell.isGroup) {
                           return /* @__PURE__ */ jsx(
@@ -1235,7 +1260,11 @@ function DataGridTableInner(props) {
                                     component: "button",
                                     onClick: (e) => {
                                       e.stopPropagation();
-                                      headerMenu.open(col.columnId, e.currentTarget);
+                                      if (headerMenu.isOpen && headerMenu.openForColumn === col.columnId) {
+                                        headerMenu.close();
+                                      } else {
+                                        headerMenu.open(col.columnId, e.currentTarget);
+                                      }
                                     },
                                     "aria-label": "Column options",
                                     title: "Column options",
@@ -1282,7 +1311,8 @@ function DataGridTableInner(props) {
                       copyRange,
                       isDragging,
                       editingCell,
-                      pinnedColumns: pinning.pinnedColumns
+                      pinnedColumns: pinning.pinnedColumns,
+                      rowNumWidth: hasRowNumbersCol ? columnSizingOverrides?.[ROW_NUMBER_COLUMN_ID]?.widthPx ?? ROW_NUMBER_COLUMN_WIDTH : void 0
                     }
                   )
                 ]

package/package.json

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