@alaarab/ogrid-react-material 2.1.10 → 2.1.11

package/dist/esm/index.js

@@ -15,8 +15,8 @@ var STYLES = `
 .ogrid-mat-row--selected > td { background-color: var(--ogrid-selection-bg, rgba(25, 118, 210, 0.08)); }
 
 .ogrid-mat-td { position: relative; padding: 0; height: 1px; border-bottom: 1px solid var(--ogrid-border, rgba(224,224,224,1)); }
-.ogrid-mat-td--pinned-left { position: sticky; left: 0; z-index: 6; background-color: var(--ogrid-paper-bg, #fff); will-change: transform; border-right: 1px solid var(--ogrid-border, rgba(224,224,224,1)); box-shadow: 2px 0 4px -1px rgba(0,0,0,0.1); }
-.ogrid-mat-td--pinned-right { position: sticky; right: 0; z-index: 6; background-color: var(--ogrid-paper-bg, #fff); will-change: transform; border-left: 1px solid var(--ogrid-border, rgba(224,224,224,1)); box-shadow: -2px 0 4px -1px rgba(0,0,0,0.1); }
+.ogrid-mat-td--pinned-left { position: sticky; left: 0; z-index: var(--ogrid-z-pinned, 6); background-color: var(--ogrid-paper-bg, #fff); will-change: transform; border-right: 1px solid var(--ogrid-border, rgba(224,224,224,1)); box-shadow: 2px 0 4px -1px rgba(0,0,0,0.1); }
+.ogrid-mat-td--pinned-right { position: sticky; right: 0; z-index: var(--ogrid-z-pinned, 6); background-color: var(--ogrid-paper-bg, #fff); will-change: transform; border-left: 1px solid var(--ogrid-border, rgba(224,224,224,1)); box-shadow: -2px 0 4px -1px rgba(0,0,0,0.1); }
 
 .ogrid-mat-cell { width: 100%; height: 100%; display: flex; align-items: center; min-width: 0; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: none; outline: none; }
 .ogrid-mat-cell:focus-visible { outline: 2px solid var(--ogrid-primary, #1976d2); outline-offset: -2px; z-index: 3; }
@@ -25,22 +25,22 @@ var STYLES = `
 .ogrid-mat-cell--boolean { justify-content: center; text-align: center; }
 .ogrid-mat-cell--editable { cursor: cell; }
 
-.ogrid-mat-cell--active { outline: 2px solid var(--ogrid-selection, #217346); outline-offset: -1px; z-index: 2; position: relative; overflow: visible; background-color: var(--ogrid-hover-bg); }
+.ogrid-mat-cell--active { outline: 2px solid var(--ogrid-selection, #217346); outline-offset: -1px; z-index: var(--ogrid-z-active-cell, 2); position: relative; overflow: visible; background-color: var(--ogrid-hover-bg); }
 .ogrid-mat-cell--active:focus-visible { outline: 2px solid var(--ogrid-selection, #217346); outline-offset: -1px; }
 .ogrid-mat-cell--range { background-color: var(--ogrid-bg-range, rgba(33,115,70,0.12)); }
 .ogrid-mat-cell--range:focus-visible { outline: none; }
 .ogrid-mat-cell--cut { background-color: var(--ogrid-hover-bg); opacity: 0.7; }
 
-.ogrid-mat-fill-handle { position: absolute; right: -3px; bottom: -3px; width: 7px; height: 7px; background-color: var(--ogrid-selection, #217346); border: 1px solid var(--ogrid-bg, #fff); border-radius: 1px; cursor: crosshair; pointer-events: auto; z-index: 3; }
+.ogrid-mat-fill-handle { position: absolute; right: -3px; bottom: -3px; width: 7px; height: 7px; background-color: var(--ogrid-selection, #217346); border: 1px solid var(--ogrid-bg, #fff); border-radius: 1px; cursor: crosshair; pointer-events: auto; z-index: var(--ogrid-z-fill-handle, 3); }
 
 .ogrid-mat-checkbox-wrapper { display: flex; align-items: center; justify-content: center; }
 
-.ogrid-mat-row-number { text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ogrid-fg-secondary); background-color: var(--ogrid-hover-bg); position: sticky; z-index: 3; }
+.ogrid-mat-row-number { text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ogrid-fg-secondary); background-color: var(--ogrid-hover-bg); position: sticky; z-index: var(--ogrid-z-row-number, 5); }
 
 .ogrid-mat-tbody tr:last-child > td { border-bottom: none; }
 
-.ogrid-mat-wrapper [data-drag-range] { background-color: rgba(33,115,70,0.12) !important; }
-.ogrid-mat-wrapper [data-drag-anchor] { background-color: var(--ogrid-paper-bg, #fff) !important; }
+.ogrid-mat-wrapper [data-drag-range] { background-color: rgba(33,115,70,0.12); }
+.ogrid-mat-wrapper [data-drag-anchor] { background-color: var(--ogrid-paper-bg, #fff); }
 `;
 var injected = false;
 function injectDataGridStyles() {
@@ -310,6 +310,8 @@ var ColumnHeaderFilter = React3.memo((props) => {
         size: "small",
         onClick: handlers.handleFilterIconClick,
         "aria-label": `Filter ${columnName}`,
+        "aria-expanded": isFilterOpen,
+        "aria-haspopup": "dialog",
         title: `Filter ${columnName}`,
         color: hasActiveFilter || isFilterOpen ? "primary" : "default",
         sx: { p: 0.25, position: "relative" },
@@ -837,11 +839,12 @@ function DataGridTableInner(props) {
     rowHeight,
     rowNumberOffset,
     headerRows,
-    allowOverflowX,
+    allowOverflowX: _allowOverflowX,
     fitToContent,
     editCallbacks,
     interactionHandlers,
     cellDescriptorInputRef,
+    cellDescriptorCacheRef,
     pendingEditorValueRef,
     popoverAnchorElRef,
     handleSingleRowClick,
@@ -850,7 +853,7 @@ function DataGridTableInner(props) {
     hasCheckboxCol,
     hasRowNumbersCol,
     colOffset,
-    minTableWidth,
+    minTableWidth: _minTableWidth,
     columnSizingOverrides,
     measuredColumnWidths,
     selectedRowIds,
@@ -927,15 +930,15 @@ function DataGridTableInner(props) {
     minHeight: isLoading && items.length === 0 ? 200 : 0,
     width: fitToContent ? "fit-content" : "100%",
     maxWidth: "100%",
-    overflowX: suppressHorizontalScroll ? "hidden" : allowOverflowX ? "auto" : "hidden",
+    overflowX: suppressHorizontalScroll ? "hidden" : "auto",
     overflowY: "auto",
     bgcolor: "background.paper",
     willChange: "scroll-position"
-  }), [fitToContent, suppressHorizontalScroll, allowOverflowX, isLoading, items.length]);
+  }), [fitToContent, suppressHorizontalScroll, isLoading, items.length]);
   const cellDensityStyle = DENSITY_CELL_STYLES[density] ?? DENSITY_CELL_STYLES.normal;
   const renderCellContent = useCallback(
     (item, col, rowIndex, colIdx) => {
-      const descriptor = getCellRenderDescriptor(item, col, rowIndex, colIdx, cellDescriptorInputRef.current);
+      const descriptor = getCellRenderDescriptor(item, col, rowIndex, colIdx, cellDescriptorInputRef.current, cellDescriptorCacheRef.current);
       const rowId = getRowId(item);
       let cellContent;
       if (descriptor.mode === "editing-inline") {
@@ -986,7 +989,7 @@ function DataGridTableInner(props) {
       }
       return /* @__PURE__ */ jsx(CellErrorBoundary, { onError: onCellError, children: cellContent }, `${rowId}-${col.columnId}`);
     },
-    [editCallbacks, interactionHandlers, handleFillHandleMouseDown, setPopoverAnchorEl, cancelPopoverEdit, getRowId, onCellError, cellDescriptorInputRef, cellDensityStyle, pendingEditorValueRef, popoverAnchorElRef]
+    [editCallbacks, interactionHandlers, handleFillHandleMouseDown, setPopoverAnchorEl, cancelPopoverEdit, getRowId, onCellError, cellDescriptorInputRef, cellDescriptorCacheRef, cellDensityStyle, pendingEditorValueRef, popoverAnchorElRef]
   );
   return /* @__PURE__ */ jsxs(Box, { sx: gridRootSx, children: [
     /* @__PURE__ */ jsxs(
@@ -1002,17 +1005,18 @@ function DataGridTableInner(props) {
         },
         onKeyDown: handleGridKeyDown,
         onContextMenu: PREVENT_DEFAULT,
-        "data-overflow-x": allowOverflowX ? "true" : "false",
         "data-density": density,
+        "data-suppress-scroll": o.suppressHorizontalScroll ? "true" : void 0,
         className: "ogrid-mat-wrapper",
         sx: wrapperSx,
         children: [
-          /* @__PURE__ */ jsx(Box, { sx: WRAPPER_SCROLL_SX, children: /* @__PURE__ */ jsx("div", { style: { minWidth: allowOverflowX ? minTableWidth : void 0 }, children: /* @__PURE__ */ jsxs(Box, { ref: tableContainerRef, sx: isLoading && items.length > 0 ? TABLE_WRAPPER_LOADING_SX : TABLE_WRAPPER_SX, children: [
+          /* @__PURE__ */ jsx(Box, { sx: WRAPPER_SCROLL_SX, children: /* @__PURE__ */ jsx("div", { style: { minWidth: "100%" }, children: /* @__PURE__ */ jsxs(Box, { ref: tableContainerRef, sx: isLoading && items.length > 0 ? TABLE_WRAPPER_LOADING_SX : TABLE_WRAPPER_SX, style: { width: "max-content", minWidth: "100%", overflow: "clip" }, children: [
             /* @__PURE__ */ jsxs(
               Table,
               {
                 size: "small",
-                sx: { minWidth: minTableWidth, borderCollapse: "separate", borderSpacing: 0 },
+                role: "grid",
+                sx: { minWidth: "max-content", width: "100%", borderCollapse: "separate", borderSpacing: 0 },
                 children: [
                   /* @__PURE__ */ jsx(TableHead, { sx: STICKY_HEADER_SX, children: headerRows.map((row, rowIdx) => /* @__PURE__ */ jsxs(TableRow, { sx: HEADER_ROW_SX, children: [
                     rowIdx === headerRows.length - 1 && hasCheckboxCol && /* @__PURE__ */ jsx(

package/package.json

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