@alaarab/ogrid-react-fluent 2.1.10 → 2.1.11

package/dist/esm/index.css

@@ -426,14 +426,15 @@
 .ogrid-fluent__DataGridTable-module__tableWidthAnchor {
   position: relative;
   width: max-content;
-  min-width: var(--data-table-min-width, max-content);
+  min-width: 100%;
+  overflow: clip;
   background: var(--ogrid-bg, #fff);
 }
 .ogrid-fluent__DataGridTable-module__tableWrapper {
   position: relative;
   flex: 1;
   min-height: 0;
-  overflow-x: hidden;
+  overflow-x: auto;
   overflow-y: auto;
   width: 100%;
   min-width: 0;
@@ -442,8 +443,8 @@
   background: var(--ogrid-bg, #fff);
   will-change: scroll-position;
 }
-.ogrid-fluent__DataGridTable-module__tableWrapper[data-overflow-x=true] {
-  overflow-x: auto;
+.ogrid-fluent__DataGridTable-module__tableWrapper[data-suppress-scroll=true] {
+  overflow-x: hidden;
 }
 .ogrid-fluent__DataGridTable-module__tableWrapper[data-empty=true] {
   overflow-x: hidden;
@@ -452,9 +453,8 @@
   min-height: 200px;
 }
 .ogrid-fluent__DataGridTable-module__dataTable {
-  width: var(--data-table-width, fit-content);
-  max-width: 100%;
-  min-width: var(--data-table-min-width, max-content);
+  width: var(--data-table-width, 100%);
+  min-width: max-content;
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -469,7 +469,7 @@
   text-align: center;
   font-weight: 600;
   border-bottom: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
-  padding: 6px 10px;
+  padding: var(--ogrid-cell-padding, 6px 10px);
   background: var(--ogrid-header-bg, #f5f5f5);
 }
 .ogrid-fluent__DataGridTable-module__headerCellContent {
@@ -511,7 +511,7 @@
   width: 3px;
   background: var(--ogrid-selection-color, #217346);
   pointer-events: none;
-  z-index: 100;
+  z-index: var(--ogrid-z-drop-indicator, 100);
   transition: left 0.05s;
 }
 .ogrid-fluent__DataGridTable-module__resizeHandle {
@@ -522,7 +522,7 @@
   width: 8px;
   cursor: col-resize;
   user-select: none;
-  z-index: 1;
+  z-index: var(--ogrid-z-resize-handle, 1);
 }
 .ogrid-fluent__DataGridTable-module__resizeHandle::after {
   content: "";
@@ -540,7 +540,7 @@
 }
 .ogrid-fluent__DataGridTable-module__pinnedColLeft {
   position: sticky;
-  z-index: 6;
+  z-index: var(--ogrid-z-pinned, 6);
   background: var(--ogrid-bg, #ffffff);
 }
 .ogrid-fluent__DataGridTable-module__pinnedColLeft::after {
@@ -559,7 +559,7 @@
 }
 .ogrid-fluent__DataGridTable-module__pinnedColRight {
   position: sticky;
-  z-index: 6;
+  z-index: var(--ogrid-z-pinned, 6);
   background: var(--ogrid-bg, #ffffff);
 }
 .ogrid-fluent__DataGridTable-module__pinnedColRight::before {
@@ -595,7 +595,7 @@
 .ogrid-fluent__DataGridTable-module__activeCellContent {
   outline: 2px solid var(--ogrid-selection-color, #217346);
   outline-offset: -1px;
-  z-index: 2;
+  z-index: var(--ogrid-z-active-cell, 2);
   position: relative;
   overflow: visible;
   background: var(--ogrid-active-cell-bg, rgba(0, 0, 0, 0.02));
@@ -608,27 +608,27 @@
   box-sizing: border-box;
   outline: 2px solid var(--ogrid-selection-color, #217346);
   outline-offset: -1px;
-  z-index: 2;
+  z-index: var(--ogrid-z-active-cell, 2);
   position: relative;
   background: var(--ogrid-bg, #fff);
   overflow: visible;
   padding: 0;
 }
-.ogrid-fluent__DataGridTable-module__cellInRange {
-  background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)) !important;
+.ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__cellInRange {
+  background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12));
 }
-[data-drag-range] {
-  background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)) !important;
+.ogrid-fluent__DataGridTable-module__tableWrapper [data-drag-range] {
+  background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12));
 }
-[data-drag-anchor] {
-  background: var(--ogrid-bg, #fff) !important;
+.ogrid-fluent__DataGridTable-module__tableWrapper [data-drag-anchor] {
+  background: var(--ogrid-bg, #fff);
 }
 .ogrid-fluent__DataGridTable-module__activeCellContent[data-drag-anchor],
 .ogrid-fluent__DataGridTable-module__activeCellContent[data-drag-range] {
   outline: none;
 }
-.ogrid-fluent__DataGridTable-module__cellCut {
-  background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)) !important;
+.ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__cellCut {
+  background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
   opacity: 0.7;
 }
 .ogrid-fluent__DataGridTable-module__fillHandle {
@@ -642,7 +642,7 @@
   border-radius: 1px;
   cursor: crosshair;
   pointer-events: auto;
-  z-index: 3;
+  z-index: var(--ogrid-z-fill-handle, 3);
 }
 .ogrid-fluent__DataGridTable-module__selectionHeaderCellInner,
 .ogrid-fluent__DataGridTable-module__selectionCellInner {
@@ -693,7 +693,7 @@
 }
 .ogrid-fluent__DataGridTable-module__contextMenu {
   position: fixed;
-  z-index: 10000;
+  z-index: var(--ogrid-z-context-menu, 10000);
   min-width: 160px;
   padding: 4px 0;
   background: var(--ogrid-bg, #fff);
@@ -737,7 +737,7 @@
 .ogrid-fluent__DataGridTable-module__loadingOverlay {
   position: absolute;
   inset: 0;
-  z-index: 2;
+  z-index: var(--ogrid-z-loading, 2);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -816,6 +816,26 @@
   }
 }
 :where(:root) {
+  --ogrid-cell-padding: 6px 10px;
+  --ogrid-cell-padding-vertical: 6px;
+  --ogrid-cell-padding-horizontal: 10px;
+  --ogrid-z-resize-handle: 1;
+  --ogrid-z-active-cell: 2;
+  --ogrid-z-fill-handle: 3;
+  --ogrid-z-row-number: 5;
+  --ogrid-z-pinned: 6;
+  --ogrid-z-selection-cell: 7;
+  --ogrid-z-thead: 8;
+  --ogrid-z-pinned-header: 10;
+  --ogrid-z-header-focus: 11;
+  --ogrid-z-selection-header-pinned: 12;
+  --ogrid-z-checkbox: 12;
+  --ogrid-z-loading: 2;
+  --ogrid-z-drop-indicator: 100;
+  --ogrid-z-filter-popover: 1000;
+  --ogrid-z-popover: 1000;
+  --ogrid-z-fullscreen: 9999;
+  --ogrid-z-context-menu: 10000;
   --ogrid-bg: #ffffff;
   --ogrid-fg: rgba(0, 0, 0, 0.87);
   --ogrid-fg-secondary: rgba(0, 0, 0, 0.6);
@@ -944,8 +964,10 @@
   -webkit-overflow-scrolling: touch;
   outline: none;
 }
+.ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__dataTable {
+  table-layout: auto;
+}
 .ogrid-fluent__DataGridTable-module__dataTable {
-  table-layout: auto !important;
   background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));
 }
 .ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeaderCell,
@@ -963,16 +985,16 @@
   color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
   white-space: nowrap;
   background-color: var(--colorSubtleBackgroundSelected, var(--ogrid-header-bg, #f3f2f1));
-  z-index: 8;
+  z-index: var(--ogrid-z-thead, 8);
   border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
 }
 .ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeaderCell > .fui-TableHeaderCell__button {
-  position: static !important;
+  position: static;
 }
 .ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeaderCell:focus-visible {
   outline: 2px solid var(--colorBrandStroke1, var(--ogrid-accent, #0078d4));
   outline-offset: -2px;
-  z-index: 11;
+  z-index: var(--ogrid-z-header-focus, 11);
 }
 .ogrid-fluent__DataGridTable-module__dataTable .fui-TableCell {
   padding: 0;
@@ -1006,36 +1028,36 @@
   padding: 6px 10px;
   background: var(--ogrid-header-bg, #f3f2f1);
 }
-.ogrid-fluent__DataGridTable-module__selectionHeaderCellWrapper {
+.ogrid-fluent__DataGridTable-module__dataTable .ogrid-fluent__DataGridTable-module__selectionHeaderCellWrapper {
   width: 48px;
   min-width: 48px;
   max-width: 48px;
-  padding: 4px !important;
+  padding: 4px;
   text-align: center;
 }
-.ogrid-fluent__DataGridTable-module__selectionCellWrapper {
+.ogrid-fluent__DataGridTable-module__dataTable .ogrid-fluent__DataGridTable-module__selectionCellWrapper {
   width: 48px;
   min-width: 48px;
   max-width: 48px;
-  padding: 4px !important;
+  padding: 4px;
   text-align: center;
 }
-.ogrid-fluent__DataGridTable-module__rowNumberHeaderCellWrapper {
+.ogrid-fluent__DataGridTable-module__dataTable .ogrid-fluent__DataGridTable-module__rowNumberHeaderCellWrapper {
   width: 50px;
   min-width: 50px;
   max-width: 50px;
-  padding: 4px 8px !important;
+  padding: 4px 8px;
   text-align: center;
   background: var(--ogrid-header-bg, #f5f5f5);
   font-weight: 600;
   color: var(--colorNeutralForeground3, #666);
   border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
 }
-.ogrid-fluent__DataGridTable-module__rowNumberCellWrapper {
+.ogrid-fluent__DataGridTable-module__dataTable .ogrid-fluent__DataGridTable-module__rowNumberCellWrapper {
   width: 50px;
   min-width: 50px;
   max-width: 50px;
-  padding: 4px 8px !important;
+  padding: 4px 8px;
   text-align: center;
   background: var(--colorNeutralBackground3, #f5f5f5);
   font-weight: 600;
@@ -1056,26 +1078,26 @@
   cursor: pointer;
 }
 .ogrid-fluent__DataGridTable-module__cellContent {
-  padding: 4px 8px;
+  padding: var(--ogrid-cell-padding, 4px 8px);
 }
-.ogrid-fluent__DataGridTable-module__activeCellContent {
-  outline: 2px solid var(--ogrid-selection-color, #217346) !important;
-  background-color: var(--ogrid-active-cell-bg, rgba(0, 0, 0, 0.02)) !important;
+.ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__activeCellContent {
+  outline: 2px solid var(--ogrid-selection-color, #217346);
+  background-color: var(--ogrid-active-cell-bg, rgba(0, 0, 0, 0.02));
 }
-.ogrid-fluent__DataGridTable-module__cellInRange {
-  background-color: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)) !important;
+.ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__cellInRange {
+  background-color: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12));
 }
-[data-drag-range] {
-  background-color: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)) !important;
+.ogrid-fluent__DataGridTable-module__tableWrapper [data-drag-range] {
+  background-color: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12));
 }
-[data-drag-anchor] {
-  background-color: var(--ogrid-bg, #ffffff) !important;
+.ogrid-fluent__DataGridTable-module__tableWrapper [data-drag-anchor] {
+  background-color: var(--ogrid-bg, #ffffff);
 }
-.ogrid-fluent__DataGridTable-module__cellCut {
-  background-color: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)) !important;
+.ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__cellCut {
+  background-color: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
 }
 .ogrid-fluent__DataGridTable-module__stickyHeader {
-  z-index: 8;
+  z-index: var(--ogrid-z-thead, 8);
   background-color: var(--colorSubtleBackgroundSelected, var(--ogrid-header-bg, #f3f2f1));
 }
 .ogrid-fluent__DataGridTable-module__stickyHeader .fui-TableHeaderCell {
@@ -1085,7 +1107,7 @@
 .ogrid-fluent__DataGridTable-module__stickyHeader .ogrid-fluent__DataGridTable-module__pinnedColLeft,
 .ogrid-fluent__DataGridTable-module__stickyHeader .ogrid-fluent__DataGridTable-module__pinnedColRight {
   top: 0;
-  z-index: 10;
+  z-index: var(--ogrid-z-pinned-header, 10);
 }
 .ogrid-fluent__DataGridTable-module__dataTable .ogrid-fluent__DataGridTable-module__pinnedColLeft {
   background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));

package/dist/esm/index.js

@@ -364,6 +364,8 @@ var ColumnHeaderFilter = React.memo((props) => {
           className: `${ColumnHeaderFilter_module_default.filterIcon} ${hasActiveFilter ? ColumnHeaderFilter_module_default.filterActive : ""} ${isFilterOpen ? ColumnHeaderFilter_module_default.filterOpen : ""}`,
           onClick: handlers.handleFilterIconClick,
           "aria-label": `Filter ${columnName}`,
+          "aria-expanded": isFilterOpen,
+          "aria-haspopup": "dialog",
           title: `Filter ${columnName}`,
           children: [
             /* @__PURE__ */ jsx(FilterRegular, {}),
@@ -556,6 +558,7 @@ function GridRowInner(props) {
       className: isSelected ? DataGridTable_module_default.selectedRow : void 0,
       "data-row-id": rowId,
       onClick: handleSingleRowClick,
+      "aria-selected": isSelected || void 0,
       children: [
         hasCheckboxCol && /* @__PURE__ */ jsx(TableCell, { className: DataGridTable_module_default.selectionCellWrapper, children: /* @__PURE__ */ jsx(
           "div",
@@ -622,11 +625,12 @@ function DataGridTableInner(props) {
     rowHeight,
     rowNumberOffset,
     headerRows,
-    allowOverflowX,
+    allowOverflowX: _allowOverflowX,
     fitToContent,
     editCallbacks,
     interactionHandlers,
     cellDescriptorInputRef,
+    cellDescriptorCacheRef,
     pendingEditorValueRef,
     popoverAnchorElRef,
     handleSingleRowClick,
@@ -684,7 +688,7 @@ function DataGridTableInner(props) {
   });
   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 content;
       if (descriptor.mode === "editing-inline") {
@@ -743,7 +747,7 @@ function DataGridTableInner(props) {
       }
       return /* @__PURE__ */ jsx(CellErrorBoundary, { onError: onCellError, children: content }, `${rowId}-${col.columnId}`);
     },
-    [editCallbacks, interactionHandlers, handleFillHandleMouseDown, setPopoverAnchorEl, cancelPopoverEdit, getRowId, onCellError, cellDescriptorInputRef, pendingEditorValueRef, popoverAnchorElRef]
+    [editCallbacks, interactionHandlers, handleFillHandleMouseDown, setPopoverAnchorEl, cancelPopoverEdit, getRowId, onCellError, cellDescriptorInputRef, cellDescriptorCacheRef, pendingEditorValueRef, popoverAnchorElRef]
   );
   return /* @__PURE__ */ jsxs("div", { style: GRID_ROOT_STYLE, children: [
     /* @__PURE__ */ jsxs(
@@ -761,7 +765,7 @@ function DataGridTableInner(props) {
         "data-empty": showEmptyInGrid ? "true" : void 0,
         "data-loading": isLoading && items.length === 0 ? "true" : void 0,
         "data-column-count": totalColCount,
-        "data-overflow-x": allowOverflowX ? "true" : "false",
+        "data-suppress-scroll": o.suppressHorizontalScroll ? "true" : void 0,
         "data-container-width": containerWidth,
         "data-min-table-width": Math.round(minTableWidth),
         "data-has-selection": rowSelection !== "none" ? "true" : void 0,
@@ -769,9 +773,7 @@ function DataGridTableInner(props) {
         onKeyDown: handleGridKeyDown,
         style: {
           ["--data-table-column-count"]: totalColCount,
-          ["--data-table-width"]: showEmptyInGrid ? "100%" : allowOverflowX ? "fit-content" : fitToContent ? "fit-content" : "100%",
-          ["--data-table-min-width"]: showEmptyInGrid ? "100%" : allowOverflowX ? "max-content" : fitToContent ? "max-content" : "100%",
-          ["--data-table-total-min-width"]: `${minTableWidth}px`,
+          ["--data-table-width"]: showEmptyInGrid ? "100%" : fitToContent ? "fit-content" : "100%",
           ...rowHeight ? { ["--ogrid-row-height"]: `${rowHeight}px` } : {}
         },
         children: [
@@ -804,6 +806,7 @@ function DataGridTableInner(props) {
                       return /* @__PURE__ */ jsxs(
                         TableHeaderCell,
                         {
+                          scope: "col",
                           "data-column-id": col.columnId,
                           className: columnMeta.hdrClasses[col.columnId] || void 0,
                           style: {
@@ -833,6 +836,8 @@ function DataGridTableInner(props) {
                               "div",
                               {
                                 className: DataGridTable_module_default.resizeHandle,
+                                role: "separator",
+                                "aria-orientation": "vertical",
                                 onMouseDown: (e) => {
                                   setActiveCell(null);
                                   interaction.setSelectionRange(null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react-fluent",
-  "version": "2.1.10",
+  "version": "2.1.11",
   "description": "OGrid React Fluent implementation – DataGrid-powered data table with sorting, filtering, pagination, column chooser, and CSV export.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -41,7 +41,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-react": "2.1.10"
+    "@alaarab/ogrid-react": "2.1.11"
   },
   "peerDependencies": {
     "@fluentui/react-components": "^9.0.0",