@infinite-table/infinite-react 6.1.0-canary.0 → 6.1.1-canary.0

package/index.dev.js

@@ -143,7 +143,7 @@ function debounce(fn, { wait }) {
 }
 
 // src/components/InfiniteTable/index.tsx
-var React70 = __toESM(require("react"));
+var React71 = __toESM(require("react"));
 
 // src/utils/join.ts
 var join = (...args) => args.filter((x) => !!`${x}`).join(" ");
@@ -1453,7 +1453,7 @@ var internalProps = {
 };
 
 // src/components/InfiniteTable/internalVars.css.ts
-var InternalVars = { currentColumnTransformX: "var(--currentColumnTransformX__16hkbkc0)", y: "var(--y__16hkbkc1)", currentFlashingBackground: "var(--currentFlashingBackground__16hkbkc2)", currentFlashingDuration: "var(--currentFlashingDuration__16hkbkc3)", activeCellRowOffset: "var(--activeCellRowOffset__16hkbkc4)", activeCellRowOffsetX: "var(--activeCellRowOffsetX__16hkbkc5)", activeCellRowHeight: "var(--activeCellRowHeight__16hkbkc6)", activeCellOffsetX: "var(--activeCellOffsetX__16hkbkc7)", activeCellOffsetY: "var(--activeCellOffsetY__16hkbkc8)", scrollTopForActiveRow: "var(--scrollTopForActiveRow__16hkbkc9)", scrollLeftForActiveRowWhenHorizontalLayout: "var(--scrollLeftForActiveRowWhenHorizontalLayout__16hkbkca)", activeCellColWidth: "var(--activeCellColWidth__16hkbkcb)", activeCellColOffset: "var(--activeCellColOffset__16hkbkcc)", columnReorderEffectDurationAtIndex: "var(--columnReorderEffectDurationAtIndex__16hkbkcd)", columnWidthAtIndex: "var(--columnWidthAtIndex__16hkbkce)", columnOffsetAtIndex: "var(--columnOffsetAtIndex__16hkbkcf)", columnOffsetAtIndexWhileReordering: "var(--columnOffsetAtIndexWhileReordering__16hkbkcg)", columnZIndexAtIndex: "var(--columnZIndexAtIndex__16hkbkch)", pinnedStartWidth: "var(--pinnedStartWidth__16hkbkci)", pinnedEndWidth: "var(--pinnedEndWidth__16hkbkcj)", pinnedEndOffset: "var(--pinnedEndOffset__16hkbkck)", computedVisibleColumnsCount: "var(--computedVisibleColumnsCount__16hkbkcl)", baseZIndexForCells: "var(--baseZIndexForCells__16hkbkcm)", bodyWidth: "var(--bodyWidth__16hkbkcn)", bodyHeight: "var(--bodyHeight__16hkbkco)", scrollbarWidthHorizontal: "var(--scrollbarWidthHorizontal__16hkbkcp)", scrollbarWidthVertical: "var(--scrollbarWidthVertical__16hkbkcq)", scrollLeft: "var(--scrollLeft__16hkbkcr)", scrollTop: "var(--scrollTop__16hkbkcs)" };
+var InternalVars = { currentColumnTransformX: "var(--currentColumnTransformX__16hkbkc0)", y: "var(--y__16hkbkc1)", currentFlashingBackground: "var(--currentFlashingBackground__16hkbkc2)", currentFlashingDuration: "var(--currentFlashingDuration__16hkbkc3)", activeCellRowOffset: "var(--activeCellRowOffset__16hkbkc4)", activeCellRowOffsetX: "var(--activeCellRowOffsetX__16hkbkc5)", activeCellRowHeight: "var(--activeCellRowHeight__16hkbkc6)", activeCellOffsetX: "var(--activeCellOffsetX__16hkbkc7)", activeCellOffsetY: "var(--activeCellOffsetY__16hkbkc8)", scrollTopForActiveRow: "var(--scrollTopForActiveRow__16hkbkc9)", scrollLeftForActiveRowWhenHorizontalLayout: "var(--scrollLeftForActiveRowWhenHorizontalLayout__16hkbkca)", activeCellColWidth: "var(--activeCellColWidth__16hkbkcb)", activeCellColOffset: "var(--activeCellColOffset__16hkbkcc)", columnReorderEffectDurationAtIndex: "var(--columnReorderEffectDurationAtIndex__16hkbkcd)", columnWidthAtIndex: "var(--columnWidthAtIndex__16hkbkce)", columnOffsetAtIndex: "var(--columnOffsetAtIndex__16hkbkcf)", columnOffsetAtIndexWhileReordering: "var(--columnOffsetAtIndexWhileReordering__16hkbkcg)", columnZIndexAtIndex: "var(--columnZIndexAtIndex__16hkbkch)", pinnedStartWidth: "var(--pinnedStartWidth__16hkbkci)", pinnedEndWidth: "var(--pinnedEndWidth__16hkbkcj)", pinnedEndOffset: "var(--pinnedEndOffset__16hkbkck)", computedVisibleColumnsCount: "var(--computedVisibleColumnsCount__16hkbkcl)", baseZIndexForCells: "var(--baseZIndexForCells__16hkbkcm)", bodyWidth: "var(--bodyWidth__16hkbkcn)", bodyHeight: "var(--bodyHeight__16hkbkco)", scrollbarWidthHorizontal: "var(--scrollbarWidthHorizontal__16hkbkcp)", scrollbarWidthVertical: "var(--scrollbarWidthVertical__16hkbkcq)", scrollLeft: "var(--scrollLeft__16hkbkcr)", scrollTop: "var(--scrollTop__16hkbkcs)", virtualScrollLeftOffset: "var(--virtualScrollLeftOffset__16hkbkct)", virtualScrollTopOffset: "var(--virtualScrollTopOffset__16hkbkcu)" };
 
 // src/components/InfiniteTable/vars.css.ts
 var CSS_LOADED_VALUE = "true";
@@ -1673,6 +1673,8 @@ var MatrixBrain = class extends Logger {
     this.horizontalTotalSize = 0;
     this.horizontalRenderCount = void 0;
     this.verticalRenderCount = void 0;
+    this.maxHorizontalRenderCount = 0;
+    this.maxVerticalRenderCount = 0;
     this.horizontalExtendRangeBy = DEFAULT_EXTEND_BY;
     this.verticalExtendRangeBy = DEFAULT_EXTEND_BY;
     this.horizontalRenderRange = {
@@ -2353,6 +2355,9 @@ var MatrixBrain = class extends Logger {
       }
     };
     this.getRenderRangeCellCount = getRenderRangeCellCount;
+    this.getMaxCellCount = () => {
+      return this.maxHorizontalRenderCount * this.maxVerticalRenderCount;
+    };
     this.getExtraCells = () => {
       return this.extraSpanCells;
     };
@@ -2714,6 +2719,11 @@ var MatrixBrain = class extends Logger {
       renderCount = (itemSize ? Math.ceil(size / itemSize) : 0) + 1;
     }
     renderCount += fixedStart + fixedEnd;
+    if (direction === "horizontal") {
+      this.maxHorizontalRenderCount = renderCount;
+    } else {
+      this.maxVerticalRenderCount = renderCount;
+    }
     renderCount = Math.min(count, renderCount);
     return renderCount;
   }
@@ -2882,6 +2892,7 @@ var emptyFn = () => {
 var GridCellForReact = class {
   constructor(debugId, cellInfo) {
     this.element = null;
+    this.mounted = false;
     this.mountSubscription = buildSubscriptionCallback();
     const count = CELL_COUNT_BY_DEBUG_ID.get(debugId) ?? 0;
     const key = `${debugId}:GridCellReact:${count}`;
@@ -2893,10 +2904,16 @@ var GridCellForReact = class {
     this.ref = (htmlElement) => {
       this.element = htmlElement;
       if (htmlElement) {
+        this.mounted = true;
         this.mountSubscription(this);
+      } else {
+        this.mounted = false;
       }
     };
   }
+  isMounted() {
+    return this.mounted;
+  }
   onMount(callback) {
     const off = this.mountSubscription.onChange((cell) => {
       if (cell != null) {
@@ -2927,10 +2944,12 @@ var GridCellForReact = class {
   }
 };
 var _GridCellPoolForReact = class extends Logger {
+  // for now, making this larger will create the cells, but on fast scrolling, those extra cells can tend to lag behind the scroll position as they are not updated
   constructor(debugId) {
     super(`${debugId}:GridCellPoolForReact`);
     this.debugId = debugId;
     this.cellRemoveSubscription = buildSubscriptionCallback();
+    this.cellAttachmentChangeSubscription = buildSubscriptionCallback();
     this.attachedCells = /* @__PURE__ */ new Set();
     this.detachedCells = /* @__PURE__ */ new Set();
     this.allCellsOrdered = /* @__PURE__ */ new Set();
@@ -2946,11 +2965,22 @@ var _GridCellPoolForReact = class extends Logger {
     });
     return off;
   }
+  onCellAttachmentChange(callback) {
+    const off = this.cellAttachmentChangeSubscription.onChange((res) => {
+      if (res == null) {
+        return;
+      }
+      const { cell, attached } = res;
+      callback(cell, attached);
+    });
+    return off;
+  }
   reset() {
     this.attachedCells.clear();
     this.detachedCells.clear();
     this.allCellsOrdered.clear();
     this.cellRemoveSubscription.destroy();
+    this.cellAttachmentChangeSubscription.destroy();
   }
   getAttachedCells() {
     return this.attachedCells;
@@ -2995,16 +3025,31 @@ var _GridCellPoolForReact = class extends Logger {
    * If a cell is provided, it's moved to the attached set as well.
    */
   attachCell(cell) {
+    if (cell && this.attachedCells.has(cell)) {
+      return cell;
+    }
     if (!cell) {
       cell = this.getDetachedCell();
     }
     this.detachedCells.delete(cell);
     this.attachedCells.add(cell);
+    this.cellAttachmentChangeSubscription({
+      cell,
+      attached: true
+    });
     return cell;
   }
   detachCell(cell) {
+    if (this.detachedCells.has(cell)) {
+      return false;
+    }
     this.attachedCells.delete(cell);
     this.detachedCells.add(cell);
+    this.cellAttachmentChangeSubscription({
+      cell,
+      attached: false
+    });
+    return true;
   }
   /**
    * This gets a detached cell from the pool.
@@ -3061,14 +3106,16 @@ var _GridCellPoolForReact = class extends Logger {
 };
 var GridCellPoolForReact = _GridCellPoolForReact;
 // we'll grow the pool by this amount at a time
-GridCellPoolForReact.POOL_SIZE_INCREMENT = 5;
+GridCellPoolForReact.POOL_SIZE_INCREMENT = 1;
 
 // src/components/HeadlessTable/GridCellManager.ts
+var ASC_SORT = (a, b) => a - b;
 var GridCellManager = class extends Logger {
   constructor(debugId) {
     super(`${debugId}:GridCellManager`);
     this.matrix = new DeepMap();
-    this.matrixWithHistory = new DeepMap();
+    this.rowsWithCellsHistory = /* @__PURE__ */ new Map();
+    this.columnsWithCellsHistory = /* @__PURE__ */ new Map();
     this.cellToMatrixPosition = /* @__PURE__ */ new WeakMap();
     this.getCellsOutsideRenderRange = (range) => {
       const { start, end } = range;
@@ -3103,11 +3150,9 @@ var GridCellManager = class extends Logger {
     if (!cellPos) {
       return;
     }
-    this.matrix.delete(cellPos);
-    let cellsAtPos = this.matrixWithHistory.get(cellPos);
-    if (cellsAtPos) {
-      cellsAtPos.delete(cell);
-    }
+    this.clearCellFromMatrix(cell, cellPos, {
+      skipHistory: false
+    });
   }
   set poolSize(cellCount) {
     this.pool.poolSize = cellCount;
@@ -3116,47 +3161,73 @@ var GridCellManager = class extends Logger {
     return this.pool.poolSize;
   }
   getDetachedCell() {
-    console.warn("getting detached cell");
     return this.pool.getDetachedCell();
   }
+  clearCellFromMatrix(cell, cellPos, config) {
+    this.matrix.delete(cellPos);
+    if (config.skipHistory) {
+      return;
+    }
+    const [rowIndex, colIndex] = cellPos;
+    const cellsAtRow = this.rowsWithCellsHistory.get(rowIndex);
+    const cellsAtCol = this.columnsWithCellsHistory.get(colIndex);
+    if (cellsAtRow) {
+      cellsAtRow.delete(cell);
+      if (cellsAtRow.size === 0) {
+        this.rowsWithCellsHistory.delete(rowIndex);
+      }
+    }
+    if (cellsAtCol) {
+      cellsAtCol.delete(cell);
+      if (cellsAtCol.size === 0) {
+        this.columnsWithCellsHistory.delete(colIndex);
+      }
+    }
+  }
+  addCellToMatrix(cell, cellPos) {
+    const [rowIndex, colIndex] = cellPos;
+    this.matrix.set(cellPos, cell);
+    this.cellToMatrixPosition.set(cell, cellPos);
+    let cellsAtRow = this.rowsWithCellsHistory.get(rowIndex);
+    let cellsAtColumn = this.columnsWithCellsHistory.get(colIndex);
+    if (!cellsAtRow) {
+      cellsAtRow = /* @__PURE__ */ new Set();
+      cellsAtRow.add(cell);
+      this.rowsWithCellsHistory.set(rowIndex, cellsAtRow);
+    } else {
+      cellsAtRow.add(cell);
+    }
+    if (!cellsAtColumn) {
+      cellsAtColumn = /* @__PURE__ */ new Set();
+      cellsAtColumn.add(cell);
+      this.columnsWithCellsHistory.set(colIndex, cellsAtColumn);
+    } else {
+      cellsAtColumn.add(cell);
+    }
+  }
   setCellPositionInMatrix(cell, cellPos) {
+    const currentCellPos = this.cellToMatrixPosition.get(cell);
     if (cellPos == null) {
-      const currentCellPos = this.cellToMatrixPosition.get(cell);
       if (currentCellPos) {
-        this.matrix.delete(currentCellPos);
-      }
-    } else {
-      let prevCellPos = this.cellToMatrixPosition.get(cell);
-      const samePos = prevCellPos && prevCellPos[0] === cellPos[0] && prevCellPos[1] === cellPos[1];
-      this.matrix.set(cellPos, cell);
-      this.cellToMatrixPosition.set(cell, cellPos);
-      let cellsAtPos = this.matrixWithHistory.get(cellPos);
-      if (!cellsAtPos) {
-        cellsAtPos = /* @__PURE__ */ new Set();
-        cellsAtPos.add(cell);
-        this.matrixWithHistory.set(cellPos, cellsAtPos);
-      } else {
-        cellsAtPos.add(cell);
-      }
-      if (prevCellPos && !samePos) {
-        this.matrix.delete(prevCellPos);
-        let cellsAtPrevPos = this.matrixWithHistory.get(prevCellPos);
-        if (cellsAtPrevPos) {
-          cellsAtPrevPos.delete(cell);
-        }
+        this.clearCellFromMatrix(cell, currentCellPos, {
+          skipHistory: true
+        });
       }
+      return;
+    }
+    const [rowIndex, colIndex] = cellPos;
+    const samePos = currentCellPos && currentCellPos[0] === rowIndex && currentCellPos[1] === colIndex;
+    if (currentCellPos && !samePos) {
+      this.clearCellFromMatrix(cell, currentCellPos, {
+        skipHistory: false
+      });
     }
+    this.addCellToMatrix(cell, cellPos);
   }
   renderNodeAtCell(node, cell, cellPos, additionalInfo) {
     const currentCellAtPos = this.getCellAt(cellPos);
-    if (currentCellAtPos) {
-      if (currentCellAtPos !== cell) {
-        this.detachCellAt(cellPos);
-        this.detachCell(cell);
-      } else {
-      }
-    } else {
-      this.detachCell(cell);
+    if (currentCellAtPos && currentCellAtPos !== cell) {
+      this.detachCellAt(cellPos);
     }
     this.pool.attachCell(cell);
     this.setCellPositionInMatrix(cell, cellPos);
@@ -3198,34 +3269,16 @@ var GridCellManager = class extends Logger {
     }
     const [rowIndex, colIndex] = cellPos;
     if (optimise === "row") {
-      this.matrixWithHistory.visitSome((cellsForPos, [row], __, next) => {
-        if (cell) {
-          return true;
-        }
-        if (row === rowIndex) {
-          cell = setFind(cellsForPos, (c) => !this.isCellAttached(c));
-          if (cell) {
-            return true;
-          }
-        }
-        next?.();
-        return false;
-      });
+      const cellsAtRow = this.rowsWithCellsHistory.get(rowIndex);
+      if (cellsAtRow) {
+        cell = setFind(cellsAtRow, (c) => !this.isCellAttached(c));
+      }
     }
     if (optimise === "column") {
-      this.matrixWithHistory.visitSome((cellsForPos, [_row, col], __, next) => {
-        if (cell) {
-          return true;
-        }
-        if (col === colIndex) {
-          cell = setFind(cellsForPos, (c) => !this.isCellAttached(c));
-          if (cell) {
-            return true;
-          }
-        }
-        next?.();
-        return false;
-      });
+      const cellsAtColumn = this.columnsWithCellsHistory.get(colIndex);
+      if (cellsAtColumn) {
+        cell = setFind(cellsAtColumn, (c) => !this.isCellAttached(c));
+      }
     }
     return cell ?? this.getDetachedCell();
   }
@@ -3266,12 +3319,12 @@ var GridCellManager = class extends Logger {
     return cell;
   }
   getRowsWithCells() {
-    return this.matrix.rawKeysAt([]).sort();
+    return this.matrix.rawKeysAt([]).sort(ASC_SORT);
   }
   getColumnsWithCells() {
     const positions = this.matrix.getUnnestedKeysStartingWith([], true);
     const columns = new Set(positions.map((pos) => pos[1]));
-    return [...columns.values()].sort();
+    return [...columns.values()].sort(ASC_SORT);
   }
   isRowAttached(rowIndex) {
     return this.getRowsWithCells().includes(rowIndex);
@@ -3293,17 +3346,20 @@ var GridCellManager = class extends Logger {
     });
   }
   detachCell(cell) {
-    const cellPos = this.getCellPosition(cell);
-    if (cellPos) {
-      this.detachCellAt(cellPos);
+    if (!cell) {
+      return false;
     }
+    if (this.pool.detachCell(cell)) {
+      this.setCellPositionInMatrix(cell, null);
+    }
+    return true;
   }
   detachCells(cells) {
     cells.forEach((cell) => this.detachCell(cell));
   }
   detachRowsStartingWith(rowIndex) {
     const rows = this.getRowsWithCells().sort();
-    let idx = (0, import_binary_search2.default)(rows, rowIndex, (a, b) => a - b);
+    let idx = (0, import_binary_search2.default)(rows, rowIndex, ASC_SORT);
     if (idx < 0) {
       idx = ~idx;
     }
@@ -3312,7 +3368,7 @@ var GridCellManager = class extends Logger {
   }
   detachColsStartingWith(colIndex) {
     const cols = this.getColumnsWithCells().sort();
-    let idx = (0, import_binary_search2.default)(cols, colIndex, (a, b) => a - b);
+    let idx = (0, import_binary_search2.default)(cols, colIndex, ASC_SORT);
     if (idx < 0) {
       idx = ~idx;
     }
@@ -3331,9 +3387,12 @@ var GridCellManager = class extends Logger {
   detachCellAt(cellPos) {
     const cell = this.getCellAt(cellPos);
     if (cell) {
-      this.setCellPositionInMatrix(cell, null);
-      this.pool.detachCell(cell);
+      return this.detachCell(cell);
     }
+    return false;
+  }
+  onCellAttachmentChange(callback) {
+    return this.pool.onCellAttachmentChange(callback);
   }
   getCellFromListForRow(cells, rowIndex) {
     return setFind(cells, (cell) => {
@@ -3354,7 +3413,8 @@ var GridCellManager = class extends Logger {
   reset() {
     this.pool.reset();
     this.matrix.clear();
-    this.matrixWithHistory.clear();
+    this.rowsWithCellsHistory.clear();
+    this.columnsWithCellsHistory.clear();
     this.offRemoveCell();
     this.offRemoveCell = () => {
     };
@@ -3364,6 +3424,9 @@ var GridCellManager = class extends Logger {
       cell.update(null);
     });
   }
+  withDetachedCells(fn) {
+    this.pool.getDetachedCells().forEach(fn);
+  }
 };
 
 // src/components/HeadlessTable/ListRowManager.ts
@@ -3377,6 +3440,7 @@ var emptyFn2 = () => {
 var ListRowForReact = class {
   constructor(debugId) {
     this.element = null;
+    this.mounted = false;
     this.mountSubscription = buildSubscriptionCallback();
     const count = ROW_COUNT_BY_DEBUG_ID.get(debugId) ?? 0;
     const key = `${debugId}:ListRowReact:${count}`;
@@ -3394,10 +3458,16 @@ var ListRowForReact = class {
     this.ref = (htmlElement) => {
       this.element = htmlElement;
       if (htmlElement) {
+        this.mounted = true;
         this.mountSubscription(this);
+      } else {
+        this.mounted = false;
       }
     };
   }
+  isMounted() {
+    return this.mounted;
+  }
   onMount(callback) {
     const off = this.mountSubscription.onChange((row) => {
       if (row != null) {
@@ -3428,6 +3498,7 @@ var _ListRowPoolForReact = class extends Logger {
     super(`${debugId}:ListRowPoolForReact`);
     this.debugId = debugId;
     this.rowRemoveSubscription = buildSubscriptionCallback();
+    this.rowAttachmentChangeSubscription = buildSubscriptionCallback();
     this.attachedRows = /* @__PURE__ */ new Set();
     this.detachedRows = /* @__PURE__ */ new Set();
     this.allRowsOrdered = /* @__PURE__ */ new Set();
@@ -3443,11 +3514,22 @@ var _ListRowPoolForReact = class extends Logger {
     });
     return off;
   }
+  onRowAttachmentChange(callback) {
+    const off = this.rowAttachmentChangeSubscription.onChange((res) => {
+      if (res == null) {
+        return;
+      }
+      const { row, attached } = res;
+      callback(row, attached);
+    });
+    return off;
+  }
   reset() {
     this.attachedRows.clear();
     this.detachedRows.clear();
     this.allRowsOrdered.clear();
     this.rowRemoveSubscription.destroy();
+    this.rowAttachmentChangeSubscription.destroy();
   }
   getAttachedRows() {
     return this.attachedRows;
@@ -3492,16 +3574,31 @@ var _ListRowPoolForReact = class extends Logger {
    * If a row is provided, it's moved to the attached set as well.
    */
   attachRow(row) {
+    if (row && this.attachedRows.has(row)) {
+      return row;
+    }
     if (!row) {
       row = this.getDetachedRow();
     }
     this.detachedRows.delete(row);
     this.attachedRows.add(row);
+    this.rowAttachmentChangeSubscription({
+      row,
+      attached: true
+    });
     return row;
   }
   detachRow(row) {
+    if (this.detachedRows.has(row)) {
+      return false;
+    }
     this.attachedRows.delete(row);
     this.detachedRows.add(row);
+    this.rowAttachmentChangeSubscription({
+      row,
+      attached: false
+    });
+    return true;
   }
   /**
    * This gets a detached row from the pool.
@@ -3558,7 +3655,7 @@ var _ListRowPoolForReact = class extends Logger {
 };
 var ListRowPoolForReact = _ListRowPoolForReact;
 // we'll grow the pool by this amount at a time
-ListRowPoolForReact.POOL_SIZE_INCREMENT = 5;
+ListRowPoolForReact.POOL_SIZE_INCREMENT = 1;
 
 // src/components/HeadlessTable/ListRowManager.ts
 var ListRowManager = class extends Logger {
@@ -3672,14 +3769,8 @@ var ListRowManager = class extends Logger {
   }
   renderNodeAtRow(node, row, rowIndex) {
     const currentRowAtPos = this.getRowAt(rowIndex);
-    if (currentRowAtPos) {
-      if (currentRowAtPos !== row) {
-        this.detachRowAt(rowIndex);
-        this.detachRow(row);
-      } else {
-      }
-    } else {
-      this.detachRow(row);
+    if (currentRowAtPos && currentRowAtPos !== row) {
+      this.detachRowAt(rowIndex);
     }
     this.pool.attachRow(row);
     this.setRowIndexInList(row, rowIndex);
@@ -3691,6 +3782,12 @@ var ListRowManager = class extends Logger {
       row.update(null);
     });
   }
+  onRowAttachmentChange(callback) {
+    return this.pool.onRowAttachmentChange(callback);
+  }
+  withDetachedRows(fn) {
+    this.pool.getDetachedRows().forEach(fn);
+  }
   destroy() {
     this.reset();
   }
@@ -3719,6 +3816,7 @@ var GridRenderer = class extends Logger {
     this.destroyed = false;
     this.scrolling = false;
     this.cellHoverClassNames = [];
+    this.cellDetachedClassNames = [];
     this.lastEnteredRow = -1;
     this.lastExitedRow = -1;
     this.hoverRowUpdatesInProgress = /* @__PURE__ */ new Map();
@@ -4519,7 +4617,21 @@ var GridRenderer = class extends Logger {
     this.brain = brain;
     this.debugId = debugId;
     this.cellManager = new GridCellManager(debugId);
+    this.cellManager.onCellAttachmentChange((cell, attached) => {
+      if (attached) {
+        this.onCellAttached(cell);
+      } else {
+        this.onCellDetached(cell);
+      }
+    });
     this.rowManager = new ListRowManager(debugId);
+    this.rowManager.onRowAttachmentChange((row, attached) => {
+      if (attached) {
+        this.onRowAttached(row);
+      } else {
+        this.onRowDetached(row);
+      }
+    });
     this.renderRange = this.renderRange.bind(this);
     const removeOnScroll = brain.onScroll(this.adjustFixedElementsOnScroll);
     const removeOnSizeChange = brain.onAvailableSizeChange(() => {
@@ -4546,6 +4658,46 @@ var GridRenderer = class extends Logger {
     }
     return this.infiniteNode;
   }
+  onCellAttached(cell) {
+    if (this.cellDetachedClassNames.length) {
+      const el = cell.getElement();
+      if (el) {
+        this.cellDetachedClassNames.forEach((className) => {
+          el.classList.remove(className);
+        });
+      }
+    }
+  }
+  onCellDetached(cell) {
+    if (this.cellDetachedClassNames.length) {
+      const el = cell.getElement();
+      if (el) {
+        this.cellDetachedClassNames.forEach((className) => {
+          el.classList.add(className);
+        });
+      }
+    }
+  }
+  onRowAttached(row) {
+    if (this.cellDetachedClassNames.length) {
+      const el = row.getElement();
+      if (el) {
+        this.cellDetachedClassNames.forEach((className) => {
+          el.classList.remove(className);
+        });
+      }
+    }
+  }
+  onRowDetached(row) {
+    if (this.cellDetachedClassNames.length) {
+      const el = row.getElement();
+      if (el) {
+        this.cellDetachedClassNames.forEach((className) => {
+          el.classList.add(className);
+        });
+      }
+    }
+  }
   isCellRenderedAndMappedCorrectly(row, col) {
     const rendered = !!this.cellManager.getCellAt([row, col]);
     return {
@@ -4591,13 +4743,10 @@ var GridRenderer = class extends Logger {
       0
     );
     const renderRowCount = renderDetailRow ? ranges.reduce((sum2, range2) => sum2 + getRenderRangeRowCount(range2), 0) : 0;
-    cellManager.detachCellsStartingAt([
-      this.brain.getRowCount(),
-      this.brain.getColCount()
-    ]);
-    if (cellManager.poolSize > renderCount) {
-      cellManager.poolSize = renderCount;
-    }
+    const rowCount = this.brain.getRowCount();
+    const colCount = this.brain.getColCount();
+    cellManager.detachCellsStartingAt([rowCount, colCount]);
+    const maxCount = Math.min(rowCount * colCount, renderCount);
     if (renderDetailRow) {
       rowManager.detachStartingWith(this.brain.getRowCount());
       if (rowManager.poolSize > renderRowCount) {
@@ -4615,7 +4764,7 @@ var GridRenderer = class extends Logger {
       return true;
     });
     cellManager.detachCells(cellsOutsideRanges);
-    cellManager.poolSize = renderCount;
+    cellManager.poolSize = maxCount;
     const visitedCells = /* @__PURE__ */ new Map();
     const visitedRows = /* @__PURE__ */ new Map();
     ranges.forEach((range2) => {
@@ -4700,9 +4849,7 @@ var GridRenderer = class extends Logger {
       }
       this.renderCellAt(rowIndex, colIndex, cell, renderCell);
     });
-    cellManager.makeDetachedCellsEmpty();
     if (renderDetailRow) {
-      rowManager.makeDetachedRowsEmpty();
     }
     let result = cellManager.getAllCells().map((cell) => cell.getNode());
     if (renderDetailRow) {
@@ -4735,14 +4882,20 @@ var GridRenderer = class extends Logger {
       },
       domRef: row.ref
     });
-    row.onMount((row2) => {
-      const element = row2.getElement();
-      if (element) {
-        element.style.position = "absolute";
-        element.style.left = "0px";
-      }
-      this.updateDetailElementPosition(row2);
-    });
+    if (!row.isMounted()) {
+      row.onMount((row2) => {
+        const element = row2.getElement();
+        if (element) {
+          element.style.position = "absolute";
+          element.style.left = "0px";
+        }
+        this.updateDetailElementPosition(row2);
+      });
+    }
+    if (!renderedDetailNode) {
+      this.rowManager.detachRow(row);
+      return;
+    }
     this.rowManager.renderNodeAtRow(renderedDetailNode, row, rowIndex);
     this.updateDetailElementPosition(row);
     return;
@@ -4786,19 +4939,29 @@ var GridRenderer = class extends Logger {
       onMouseLeave: this.onMouseLeave.bind(null, rowIndex),
       domRef: cell.ref
     });
-    cell.onMount((cell2) => {
-      const element = cell2.getElement();
-      if (element) {
-        element.style.position = "absolute";
-        element.style.left = "0px";
-        element.style.top = "0px";
-      }
-      this.updateElementPosition(cell2);
-    });
+    if (!cell.isMounted()) {
+      cell.onMount((cell2) => {
+        const element = cell2.getElement();
+        if (element) {
+          element.style.position = "absolute";
+          element.style.left = "0px";
+          element.style.top = "0px";
+        }
+        this.updateElementPosition(cell2);
+      });
+    }
     const cellAdditionalInfo = this.brain.isHorizontalLayoutBrain ? {
       renderRowIndex,
       renderColIndex
     } : void 0;
+    if (!renderedNode) {
+      if (this.brain.isHorizontalLayoutBrain) {
+        this.cellManager.detachCell(cell);
+      } else {
+        this.cellManager.detachCell(cell);
+      }
+      return;
+    }
     this.cellManager.renderNodeAtCell(
       renderedNode,
       cell,
@@ -4911,6 +5074,9 @@ function RawTableFn(props) {
   (0, import_react6.useEffect)(() => {
     renderer.cellHoverClassNames = props.cellHoverClassNames || [];
   }, [renderer, props.cellHoverClassNames]);
+  (0, import_react6.useEffect)(() => {
+    renderer.cellDetachedClassNames = props.cellDetachedClassNames || [];
+  }, [renderer, props.cellDetachedClassNames]);
   (0, import_react6.useLayoutEffect)(() => {
     const renderRange = brain.getRenderRange();
     renderer.renderRange(renderRange, {
@@ -5226,7 +5392,23 @@ var ActiveCellIndicator = React13.memo(
   ActiveCellIndicatorFn
 );
 
+// src/components/InfiniteTable/components/cell.css.ts
+var ColumnCellCls = "cell_ColumnCellCls__1eexc2a7 cell_CellCls__1eexc2a6";
+var ColumnCellRecipe = createRuntimeFn({ defaultClassName: "cell_ColumnCellRecipe__1eexc2an", variantClassNames: { dragging: { false: "cell_ColumnCellRecipe_dragging_false__1eexc2ao", true: "cell_ColumnCellRecipe_dragging_true__1eexc2ap" }, insideDisabledDraggingPage: { true: "cell_ColumnCellRecipe_insideDisabledDraggingPage_true__1eexc2aq", false: "cell_ColumnCellRecipe_insideDisabledDraggingPage_false__1eexc2ar" }, cellSelected: { false: "cell_ColumnCellRecipe_cellSelected_false__1eexc2as", true: "cell_ColumnCellRecipe_cellSelected_true__1eexc2at" }, treeNode: { parent: "cell_ColumnCellRecipe_treeNode_parent__1eexc2au", leaf: "cell_ColumnCellRecipe_treeNode_leaf__1eexc2av", false: "cell_ColumnCellRecipe_treeNode_false__1eexc2aw" }, align: { start: "cell_ColumnCellRecipe_align_start__1eexc2ax", end: "cell_ColumnCellRecipe_align_end__1eexc2ay", center: "cell_ColumnCellRecipe_align_center__1eexc2az" }, verticalAlign: { start: "cell_ColumnCellRecipe_verticalAlign_start__1eexc2a10", end: "cell_ColumnCellRecipe_verticalAlign_end__1eexc2a11", center: "cell_ColumnCellRecipe_verticalAlign_center__1eexc2a12" }, rowActive: { false: "cell_ColumnCellRecipe_rowActive_false__1eexc2a13", true: "cell_ColumnCellRecipe_rowActive_true__1eexc2a14" }, groupRow: { false: "cell_ColumnCellRecipe_groupRow_false__1eexc2a15", true: "cell_ColumnCellRecipe_groupRow_true__1eexc2a16" }, groupCell: { false: "cell_ColumnCellRecipe_groupCell_false__1eexc2a17", true: "cell_ColumnCellRecipe_groupCell_true__1eexc2a18" }, rowDisabled: { false: "cell_ColumnCellRecipe_rowDisabled_false__1eexc2a19", true: "cell_ColumnCellRecipe_rowDisabled_true__1eexc2a1a" }, zebra: { false: "cell_ColumnCellRecipe_zebra_false__1eexc2a1b", even: "cell_ColumnCellRecipe_zebra_even__1eexc2a1c", odd: "cell_ColumnCellRecipe_zebra_odd__1eexc2a1d" }, rowSelected: { true: "cell_ColumnCellRecipe_rowSelected_true__1eexc2a1e", false: "cell_ColumnCellRecipe_rowSelected_false__1eexc2a1f", null: "cell_ColumnCellRecipe_rowSelected_null__1eexc2a1g" }, first: { true: "cell_ColumnCellRecipe_first_true__1eexc2a1h", false: "cell_ColumnCellRecipe_first_false__1eexc2a1i" }, last: { true: "cell_ColumnCellRecipe_last_true__1eexc2a1j", false: "cell_ColumnCellRecipe_last_false__1eexc2a1k" }, groupByField: { true: "cell_ColumnCellRecipe_groupByField_true__1eexc2a1l", false: "cell_ColumnCellRecipe_groupByField_false__1eexc2a1m" }, firstInCategory: { true: "cell_ColumnCellRecipe_firstInCategory_true__1eexc2a1n", false: "cell_ColumnCellRecipe_firstInCategory_false__1eexc2a1o" }, firstRow: { true: "cell_ColumnCellRecipe_firstRow_true__1eexc2a1p", false: "cell_ColumnCellRecipe_firstRow_false__1eexc2a1q" }, firstRowInHorizontalLayoutPage: { true: "cell_ColumnCellRecipe_firstRowInHorizontalLayoutPage_true__1eexc2a1r", false: "cell_ColumnCellRecipe_firstRowInHorizontalLayoutPage_false__1eexc2a1s" }, lastInCategory: { true: "cell_ColumnCellRecipe_lastInCategory_true__1eexc2a1t", false: "cell_ColumnCellRecipe_lastInCategory_false__1eexc2a1u" }, pinned: { start: "cell_ColumnCellRecipe_pinned_start__1eexc2a1v", end: "cell_ColumnCellRecipe_pinned_end__1eexc2a1w", false: "cell_ColumnCellRecipe_pinned_false__1eexc2a1x" }, filtered: { true: "cell_ColumnCellRecipe_filtered_true__1eexc2a1y", false: "cell_ColumnCellRecipe_filtered_false__1eexc2a1z" } }, defaultVariants: {}, compoundVariants: [[{ firstRowInHorizontalLayoutPage: true, firstRow: false }, "cell_ColumnCellRecipe_compound_0__1eexc2a20"], [{ pinned: "start", lastInCategory: true }, "cell_ColumnCellRecipe_compound_1__1eexc2a21"], [{ pinned: "start", firstInCategory: true }, "cell_ColumnCellRecipe_compound_2__1eexc2a22"], [{ pinned: "end", firstInCategory: true }, "cell_ColumnCellRecipe_compound_3__1eexc2a23"], [{ pinned: "end", lastInCategory: true }, "cell_ColumnCellRecipe_compound_4__1eexc2a24"], [{ align: "center", groupCell: false }, "cell_ColumnCellRecipe_compound_5__1eexc2a25"], [{ rowDisabled: true, zebra: "odd" }, "cell_ColumnCellRecipe_compound_6__1eexc2a26"]] });
+var ColumnCellSelectionIndicatorRecipe = createRuntimeFn({ defaultClassName: "cell_ColumnCellSelectionIndicatorRecipe__1eexc2ae", variantClassNames: { right: { true: "cell_ColumnCellSelectionIndicatorRecipe_right_true__1eexc2af", false: "cell_ColumnCellSelectionIndicatorRecipe_right_false__1eexc2ag" }, left: { true: "cell_ColumnCellSelectionIndicatorRecipe_left_true__1eexc2ah", false: "cell_ColumnCellSelectionIndicatorRecipe_left_false__1eexc2ai" }, top: { true: "cell_ColumnCellSelectionIndicatorRecipe_top_true__1eexc2aj", false: "cell_ColumnCellSelectionIndicatorRecipe_top_false__1eexc2ak" }, bottom: { true: "cell_ColumnCellSelectionIndicatorRecipe_bottom_true__1eexc2al", false: "cell_ColumnCellSelectionIndicatorRecipe_bottom_false__1eexc2am" } }, defaultVariants: {}, compoundVariants: [] });
+var DetachedCellCls = "cell_DetachedCellCls__1eexc2a5";
+var FlashingColumnCellRecipe = createRuntimeFn({ defaultClassName: "cell_FlashingColumnCellRecipe__1eexc2aa", variantClassNames: { direction: { up: "cell_FlashingColumnCellRecipe_direction_up__1eexc2ab", down: "cell_FlashingColumnCellRecipe_direction_down__1eexc2ac", neutral: "cell_FlashingColumnCellRecipe_direction_neutral__1eexc2ad" } }, defaultVariants: {}, compoundVariants: [] });
+var SelectionCheckboxCls = "cell_SelectionCheckboxCls__1eexc2a8";
+
+// src/components/InfiniteTable/components/cellDetachedCls.ts
+var CELL_DETACHED_CLASSNAMES = [
+  DetachedCellCls,
+  `${rootClassName2}DetachedCell`
+];
+
 // src/components/HeadlessTable/index.tsx
+var virtualScrollLeftOffset = stripVar(InternalVars.virtualScrollLeftOffset);
+var virtualScrollTopOffset = stripVar(InternalVars.virtualScrollTopOffset);
 function useMatrixBrain(brain, brainOptions, fixedCellsInfo) {
   if (fixedCellsInfo && (fixedCellsInfo.fixedColsStart || fixedCellsInfo.fixedColsEnd || fixedCellsInfo.fixedRowsStart || fixedCellsInfo.fixedRowsEnd)) {
     brain.updateFixedCells({
@@ -5266,6 +5448,7 @@ function HeadlessTable(props) {
     onRenderUpdater,
     wrapRowsHorizontally,
     forceRerenderTimestamp,
+    scrollVarHostRef,
     ...domProps
   } = props;
   const { autoFocus } = domProps;
@@ -5298,7 +5481,24 @@ function HeadlessTable(props) {
     return remove;
   }, [wrapRowsHorizontally, brain]);
   const updateDOMTransform = (0, import_react10.useCallback)((scrollPos) => {
-    domRef.current.style.transform = `translate3d(${-scrollPos.scrollLeft}px, ${-scrollPos.scrollTop}px, 0px)`;
+    requestAnimationFrame(() => {
+      const scrollVarHost = scrollVarHostRef?.current;
+      if (!scrollVarHost) {
+        domRef.current.style.setProperty(
+          "transform",
+          `translate3d(${-scrollPos.scrollLeft}px, ${-scrollPos.scrollTop}px, 0px)`
+        );
+        return;
+      }
+      scrollVarHost.style.setProperty(
+        virtualScrollLeftOffset,
+        `-${scrollPos.scrollLeft}px`
+      );
+      scrollVarHost.style.setProperty(
+        virtualScrollTopOffset,
+        `-${scrollPos.scrollTop}px`
+      );
+    });
   }, []);
   const onContainerScroll = (0, import_react10.useCallback)(
     (scrollPos) => {
@@ -5339,7 +5539,8 @@ function HeadlessTable(props) {
           renderCell,
           renderDetailRow,
           brain,
-          cellHoverClassNames
+          cellHoverClassNames,
+          cellDetachedClassNames: CELL_DETACHED_CLASSNAMES
         }
       ),
       activeCellIndex != null ? /* @__PURE__ */ React14.createElement(
@@ -5948,10 +6149,10 @@ var React27 = __toESM(require("react"));
 var import_react18 = require("react");
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts
-var CellCls = "cell_CellCls__1eexc2a5 utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1p utilities_alignItems_center__16lm1iw1r utilities_position_absolute__16lm1iw2 utilities_willChange_transform__16lm1iw23 utilities_whiteSpace_nowrap__16lm1iw24 utilities_userSelect_none__16lm1iw17";
+var CellCls = "cell_CellCls__1eexc2a6";
 var HeaderCellContentRecipe = createRuntimeFn({ defaultClassName: "header_HeaderCellContentRecipe__12zfob129 utilities_height_100%__16lm1iw19 utilities_width_100%__16lm1iw1c utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1p utilities_alignItems_center__16lm1iw1r utilities_justifyContent_start__16lm1iw1w", variantClassNames: { filtered: { false: "header_HeaderCellContentRecipe_filtered_false__12zfob12a", true: "header_HeaderCellContentRecipe_filtered_true__12zfob12b" }, verticalAlign: { start: "header_HeaderCellContentRecipe_verticalAlign_start__12zfob12c", end: "header_HeaderCellContentRecipe_verticalAlign_end__12zfob12d", center: "header_HeaderCellContentRecipe_verticalAlign_center__12zfob12e" }, align: { start: "header_HeaderCellContentRecipe_align_start__12zfob12f", end: "header_HeaderCellContentRecipe_align_end__12zfob12g", center: "header_HeaderCellContentRecipe_align_center__12zfob12h" } }, defaultVariants: {}, compoundVariants: [] });
 var HeaderCellProxy = "header_HeaderCellProxy__12zfob1n utilities_whiteSpace_nowrap__16lm1iw24 utilities_textOverflow_ellipsis__16lm1iw25 utilities_overflow_hidden__16lm1iw1y";
-var HeaderCellRecipe = createRuntimeFn({ defaultClassName: "header_HeaderCellRecipe__12zfob1o utilities_display_block__16lm1iw12", variantClassNames: { rowActive: { false: "header_HeaderCellRecipe_rowActive_false__12zfob1p", true: "header_HeaderCellRecipe_rowActive_true__12zfob1q" }, cellSelected: { false: "header_HeaderCellRecipe_cellSelected_false__12zfob1r", true: "header_HeaderCellRecipe_cellSelected_true__12zfob1s" }, rowSelected: { false: "header_HeaderCellRecipe_rowSelected_false__12zfob1t", true: "header_HeaderCellRecipe_rowSelected_true__12zfob1u", null: "header_HeaderCellRecipe_rowSelected_null__12zfob1v" }, rowDisabled: { false: "header_HeaderCellRecipe_rowDisabled_false__12zfob1w", true: "header_HeaderCellRecipe_rowDisabled_true__12zfob1x" }, firstRow: { false: "header_HeaderCellRecipe_firstRow_false__12zfob1y", true: "header_HeaderCellRecipe_firstRow_true__12zfob1z" }, treeNode: { parent: "header_HeaderCellRecipe_treeNode_parent__12zfob110", leaf: "header_HeaderCellRecipe_treeNode_leaf__12zfob111", false: "header_HeaderCellRecipe_treeNode_false__12zfob112" }, firstRowInHorizontalLayoutPage: { false: "header_HeaderCellRecipe_firstRowInHorizontalLayoutPage_false__12zfob113", true: "header_HeaderCellRecipe_firstRowInHorizontalLayoutPage_true__12zfob114" }, groupRow: { false: "header_HeaderCellRecipe_groupRow_false__12zfob115", true: "header_HeaderCellRecipe_groupRow_true__12zfob116" }, groupCell: { false: "header_HeaderCellRecipe_groupCell_false__12zfob117", true: "header_HeaderCellRecipe_groupCell_true__12zfob118" }, align: { start: "header_HeaderCellRecipe_align_start__12zfob119", end: "header_HeaderCellRecipe_align_end__12zfob11a", center: "header_HeaderCellRecipe_align_center__12zfob11b" }, verticalAlign: { start: "header_HeaderCellRecipe_verticalAlign_start__12zfob11c", end: "header_HeaderCellRecipe_verticalAlign_end__12zfob11d", center: "header_HeaderCellRecipe_verticalAlign_center__12zfob11e" }, zebra: { false: "header_HeaderCellRecipe_zebra_false__12zfob11f", even: "header_HeaderCellRecipe_zebra_even__12zfob11g", odd: "header_HeaderCellRecipe_zebra_odd__12zfob11h" }, dragging: { true: "header_HeaderCellRecipe_dragging_true__12zfob11i", false: "header_HeaderCellRecipe_dragging_false__12zfob11j" }, insideDisabledDraggingPage: { true: "header_HeaderCellRecipe_insideDisabledDraggingPage_true__12zfob11k", false: "header_HeaderCellRecipe_insideDisabledDraggingPage_false__12zfob11l" }, first: { true: "header_HeaderCellRecipe_first_true__12zfob11m", false: "header_HeaderCellRecipe_first_false__12zfob11n" }, last: { true: "header_HeaderCellRecipe_last_true__12zfob11o", false: "header_HeaderCellRecipe_last_false__12zfob11p" }, groupByField: { true: "header_HeaderCellRecipe_groupByField_true__12zfob11q", false: "header_HeaderCellRecipe_groupByField_false__12zfob11r" }, firstInCategory: { true: "header_HeaderCellRecipe_firstInCategory_true__12zfob11s", false: "header_HeaderCellRecipe_firstInCategory_false__12zfob11t" }, lastInCategory: { true: "header_HeaderCellRecipe_lastInCategory_true__12zfob11u", false: "header_HeaderCellRecipe_lastInCategory_false__12zfob11v" }, pinned: { start: "header_HeaderCellRecipe_pinned_start__12zfob11w", end: "header_HeaderCellRecipe_pinned_end__12zfob11x", false: "header_HeaderCellRecipe_pinned_false__12zfob11y" }, filtered: { true: "header_HeaderCellRecipe_filtered_true__12zfob11z", false: "header_HeaderCellRecipe_filtered_false__12zfob120" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "header_HeaderCellRecipe_compound_0__12zfob121"], [{ pinned: "end", firstInCategory: true }, "header_HeaderCellRecipe_compound_1__12zfob122"], [{ pinned: false, lastInCategory: true }, "header_HeaderCellRecipe_compound_2__12zfob123"]] });
+var HeaderCellRecipe = createRuntimeFn({ defaultClassName: "header_HeaderCellRecipe__12zfob1o", variantClassNames: { rowActive: { false: "header_HeaderCellRecipe_rowActive_false__12zfob1p", true: "header_HeaderCellRecipe_rowActive_true__12zfob1q" }, cellSelected: { false: "header_HeaderCellRecipe_cellSelected_false__12zfob1r", true: "header_HeaderCellRecipe_cellSelected_true__12zfob1s" }, rowSelected: { false: "header_HeaderCellRecipe_rowSelected_false__12zfob1t", true: "header_HeaderCellRecipe_rowSelected_true__12zfob1u", null: "header_HeaderCellRecipe_rowSelected_null__12zfob1v" }, rowDisabled: { false: "header_HeaderCellRecipe_rowDisabled_false__12zfob1w", true: "header_HeaderCellRecipe_rowDisabled_true__12zfob1x" }, firstRow: { false: "header_HeaderCellRecipe_firstRow_false__12zfob1y", true: "header_HeaderCellRecipe_firstRow_true__12zfob1z" }, treeNode: { parent: "header_HeaderCellRecipe_treeNode_parent__12zfob110", leaf: "header_HeaderCellRecipe_treeNode_leaf__12zfob111", false: "header_HeaderCellRecipe_treeNode_false__12zfob112" }, firstRowInHorizontalLayoutPage: { false: "header_HeaderCellRecipe_firstRowInHorizontalLayoutPage_false__12zfob113", true: "header_HeaderCellRecipe_firstRowInHorizontalLayoutPage_true__12zfob114" }, groupRow: { false: "header_HeaderCellRecipe_groupRow_false__12zfob115", true: "header_HeaderCellRecipe_groupRow_true__12zfob116" }, groupCell: { false: "header_HeaderCellRecipe_groupCell_false__12zfob117", true: "header_HeaderCellRecipe_groupCell_true__12zfob118" }, align: { start: "header_HeaderCellRecipe_align_start__12zfob119", end: "header_HeaderCellRecipe_align_end__12zfob11a", center: "header_HeaderCellRecipe_align_center__12zfob11b" }, verticalAlign: { start: "header_HeaderCellRecipe_verticalAlign_start__12zfob11c", end: "header_HeaderCellRecipe_verticalAlign_end__12zfob11d", center: "header_HeaderCellRecipe_verticalAlign_center__12zfob11e" }, zebra: { false: "header_HeaderCellRecipe_zebra_false__12zfob11f", even: "header_HeaderCellRecipe_zebra_even__12zfob11g", odd: "header_HeaderCellRecipe_zebra_odd__12zfob11h" }, dragging: { true: "header_HeaderCellRecipe_dragging_true__12zfob11i", false: "header_HeaderCellRecipe_dragging_false__12zfob11j" }, insideDisabledDraggingPage: { true: "header_HeaderCellRecipe_insideDisabledDraggingPage_true__12zfob11k", false: "header_HeaderCellRecipe_insideDisabledDraggingPage_false__12zfob11l" }, first: { true: "header_HeaderCellRecipe_first_true__12zfob11m", false: "header_HeaderCellRecipe_first_false__12zfob11n" }, last: { true: "header_HeaderCellRecipe_last_true__12zfob11o", false: "header_HeaderCellRecipe_last_false__12zfob11p" }, groupByField: { true: "header_HeaderCellRecipe_groupByField_true__12zfob11q", false: "header_HeaderCellRecipe_groupByField_false__12zfob11r" }, firstInCategory: { true: "header_HeaderCellRecipe_firstInCategory_true__12zfob11s", false: "header_HeaderCellRecipe_firstInCategory_false__12zfob11t" }, lastInCategory: { true: "header_HeaderCellRecipe_lastInCategory_true__12zfob11u", false: "header_HeaderCellRecipe_lastInCategory_false__12zfob11v" }, pinned: { start: "header_HeaderCellRecipe_pinned_start__12zfob11w", end: "header_HeaderCellRecipe_pinned_end__12zfob11x", false: "header_HeaderCellRecipe_pinned_false__12zfob11y" }, filtered: { true: "header_HeaderCellRecipe_filtered_true__12zfob11z", false: "header_HeaderCellRecipe_filtered_false__12zfob120" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "header_HeaderCellRecipe_compound_0__12zfob121"], [{ pinned: "end", firstInCategory: true }, "header_HeaderCellRecipe_compound_1__12zfob122"], [{ pinned: false, lastInCategory: true }, "header_HeaderCellRecipe_compound_2__12zfob123"]] });
 var HeaderClsRecipe = createRuntimeFn({ defaultClassName: "header_HeaderClsRecipe__12zfob19 utilities_display_block__16lm1iw12 utilities_position_absolute__16lm1iw2", variantClassNames: { pinned: { start: "header_HeaderClsRecipe_pinned_start__12zfob1a", end: "header_HeaderClsRecipe_pinned_end__12zfob1b", false: "header_HeaderClsRecipe_pinned_false__12zfob1c" }, firstInCategory: { true: "header_HeaderClsRecipe_firstInCategory_true__12zfob1d", false: "header_HeaderClsRecipe_firstInCategory_false__12zfob1e" }, lastInCategory: { true: "header_HeaderClsRecipe_lastInCategory_true__12zfob1f", false: "header_HeaderClsRecipe_lastInCategory_false__12zfob1g" }, overflow: { true: "header_HeaderClsRecipe_overflow_true__12zfob1h", false: "header_HeaderClsRecipe_overflow_false__12zfob1i" } }, defaultVariants: {}, compoundVariants: [[{ overflow: true, pinned: "start" }, "header_HeaderClsRecipe_compound_0__12zfob1j"], [{ pinned: "start", firstInCategory: true }, "header_HeaderClsRecipe_compound_1__12zfob1k"], [{ overflow: true, pinned: "end" }, "header_HeaderClsRecipe_compound_2__12zfob1l"], [{ pinned: "end", lastInCategory: true }, "header_HeaderClsRecipe_compound_3__12zfob1m"]] });
 var HeaderFilterEditorCls = "header_HeaderFilterEditorCls__12zfob12r utilities_width_100%__16lm1iw1c utilities_height_100%__16lm1iw19";
 var HeaderFilterIconIndexCls = "header_HeaderFilterIconIndexCls__12zfob17";
@@ -8808,13 +9009,6 @@ function objectValuesExcept(obj, exceptList) {
   return result;
 }
 
-// src/components/InfiniteTable/components/cell.css.ts
-var ColumnCellCls = "cell_ColumnCellCls__1eexc2a6 cell_CellCls__1eexc2a5 utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1p utilities_alignItems_center__16lm1iw1r utilities_position_absolute__16lm1iw2 utilities_willChange_transform__16lm1iw23 utilities_whiteSpace_nowrap__16lm1iw24 utilities_userSelect_none__16lm1iw17";
-var ColumnCellRecipe = createRuntimeFn({ defaultClassName: "cell_ColumnCellRecipe__1eexc2am", variantClassNames: { dragging: { false: "cell_ColumnCellRecipe_dragging_false__1eexc2an", true: "cell_ColumnCellRecipe_dragging_true__1eexc2ao" }, insideDisabledDraggingPage: { true: "cell_ColumnCellRecipe_insideDisabledDraggingPage_true__1eexc2ap", false: "cell_ColumnCellRecipe_insideDisabledDraggingPage_false__1eexc2aq" }, cellSelected: { false: "cell_ColumnCellRecipe_cellSelected_false__1eexc2ar", true: "cell_ColumnCellRecipe_cellSelected_true__1eexc2as" }, treeNode: { parent: "cell_ColumnCellRecipe_treeNode_parent__1eexc2at", leaf: "cell_ColumnCellRecipe_treeNode_leaf__1eexc2au", false: "cell_ColumnCellRecipe_treeNode_false__1eexc2av" }, align: { start: "cell_ColumnCellRecipe_align_start__1eexc2aw", end: "cell_ColumnCellRecipe_align_end__1eexc2ax", center: "cell_ColumnCellRecipe_align_center__1eexc2ay" }, verticalAlign: { start: "cell_ColumnCellRecipe_verticalAlign_start__1eexc2az", end: "cell_ColumnCellRecipe_verticalAlign_end__1eexc2a10", center: "cell_ColumnCellRecipe_verticalAlign_center__1eexc2a11" }, rowActive: { false: "cell_ColumnCellRecipe_rowActive_false__1eexc2a12", true: "cell_ColumnCellRecipe_rowActive_true__1eexc2a13" }, groupRow: { false: "cell_ColumnCellRecipe_groupRow_false__1eexc2a14", true: "cell_ColumnCellRecipe_groupRow_true__1eexc2a15" }, groupCell: { false: "cell_ColumnCellRecipe_groupCell_false__1eexc2a16", true: "cell_ColumnCellRecipe_groupCell_true__1eexc2a17" }, rowDisabled: { false: "cell_ColumnCellRecipe_rowDisabled_false__1eexc2a18", true: "cell_ColumnCellRecipe_rowDisabled_true__1eexc2a19" }, zebra: { false: "cell_ColumnCellRecipe_zebra_false__1eexc2a1a", even: "cell_ColumnCellRecipe_zebra_even__1eexc2a1b", odd: "cell_ColumnCellRecipe_zebra_odd__1eexc2a1c" }, rowSelected: { true: "cell_ColumnCellRecipe_rowSelected_true__1eexc2a1d", false: "cell_ColumnCellRecipe_rowSelected_false__1eexc2a1e", null: "cell_ColumnCellRecipe_rowSelected_null__1eexc2a1f" }, first: { true: "cell_ColumnCellRecipe_first_true__1eexc2a1g", false: "cell_ColumnCellRecipe_first_false__1eexc2a1h" }, last: { true: "cell_ColumnCellRecipe_last_true__1eexc2a1i", false: "cell_ColumnCellRecipe_last_false__1eexc2a1j" }, groupByField: { true: "cell_ColumnCellRecipe_groupByField_true__1eexc2a1k", false: "cell_ColumnCellRecipe_groupByField_false__1eexc2a1l" }, firstInCategory: { true: "cell_ColumnCellRecipe_firstInCategory_true__1eexc2a1m", false: "cell_ColumnCellRecipe_firstInCategory_false__1eexc2a1n" }, firstRow: { true: "cell_ColumnCellRecipe_firstRow_true__1eexc2a1o", false: "cell_ColumnCellRecipe_firstRow_false__1eexc2a1p" }, firstRowInHorizontalLayoutPage: { true: "cell_ColumnCellRecipe_firstRowInHorizontalLayoutPage_true__1eexc2a1q", false: "cell_ColumnCellRecipe_firstRowInHorizontalLayoutPage_false__1eexc2a1r" }, lastInCategory: { true: "cell_ColumnCellRecipe_lastInCategory_true__1eexc2a1s", false: "cell_ColumnCellRecipe_lastInCategory_false__1eexc2a1t" }, pinned: { start: "cell_ColumnCellRecipe_pinned_start__1eexc2a1u", end: "cell_ColumnCellRecipe_pinned_end__1eexc2a1v", false: "cell_ColumnCellRecipe_pinned_false__1eexc2a1w" }, filtered: { true: "cell_ColumnCellRecipe_filtered_true__1eexc2a1x", false: "cell_ColumnCellRecipe_filtered_false__1eexc2a1y" } }, defaultVariants: {}, compoundVariants: [[{ firstRowInHorizontalLayoutPage: true, firstRow: false }, "cell_ColumnCellRecipe_compound_0__1eexc2a1z"], [{ pinned: "start", lastInCategory: true }, "cell_ColumnCellRecipe_compound_1__1eexc2a20"], [{ pinned: "start", firstInCategory: true }, "cell_ColumnCellRecipe_compound_2__1eexc2a21"], [{ pinned: "end", firstInCategory: true }, "cell_ColumnCellRecipe_compound_3__1eexc2a22"], [{ pinned: "end", lastInCategory: true }, "cell_ColumnCellRecipe_compound_4__1eexc2a23"], [{ align: "center", groupCell: false }, "cell_ColumnCellRecipe_compound_5__1eexc2a24"], [{ rowDisabled: true, zebra: "odd" }, "cell_ColumnCellRecipe_compound_6__1eexc2a25"]] });
-var ColumnCellSelectionIndicatorRecipe = createRuntimeFn({ defaultClassName: "cell_ColumnCellSelectionIndicatorRecipe__1eexc2ad", variantClassNames: { right: { true: "cell_ColumnCellSelectionIndicatorRecipe_right_true__1eexc2ae", false: "cell_ColumnCellSelectionIndicatorRecipe_right_false__1eexc2af" }, left: { true: "cell_ColumnCellSelectionIndicatorRecipe_left_true__1eexc2ag", false: "cell_ColumnCellSelectionIndicatorRecipe_left_false__1eexc2ah" }, top: { true: "cell_ColumnCellSelectionIndicatorRecipe_top_true__1eexc2ai", false: "cell_ColumnCellSelectionIndicatorRecipe_top_false__1eexc2aj" }, bottom: { true: "cell_ColumnCellSelectionIndicatorRecipe_bottom_true__1eexc2ak", false: "cell_ColumnCellSelectionIndicatorRecipe_bottom_false__1eexc2al" } }, defaultVariants: {}, compoundVariants: [] });
-var FlashingColumnCellRecipe = createRuntimeFn({ defaultClassName: "cell_FlashingColumnCellRecipe__1eexc2a9", variantClassNames: { direction: { up: "cell_FlashingColumnCellRecipe_direction_up__1eexc2aa", down: "cell_FlashingColumnCellRecipe_direction_down__1eexc2ab", neutral: "cell_FlashingColumnCellRecipe_direction_neutral__1eexc2ac" } }, defaultVariants: {}, compoundVariants: [] });
-var SelectionCheckboxCls = "cell_SelectionCheckboxCls__1eexc2a7";
-
 // src/components/InfiniteTable/components/CheckBox.tsx
 var React34 = __toESM(require("react"));
 var import_react23 = require("react");
@@ -11321,11 +11515,14 @@ function InfiniteTableHeaderGroup(props) {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
 var { rootClassName: rootClassName9 } = internalProps;
+var EMPTY_ARR = [];
 var TableHeaderClassName = `${rootClassName9}Header`;
+var headerCls = HeaderClsRecipe({
+  overflow: false
+});
 function InfiniteTableHeaderFn(props) {
   const {
     bodyBrain,
-    headerBrain: brain,
     columns,
     style: style2,
     className,
@@ -11340,21 +11537,6 @@ function InfiniteTableHeaderFn(props) {
   } = useInfiniteTable();
   const { computedColumnsMap } = computed;
   const domRef = (0, import_react32.useRef)(null);
-  const updateDOMTransform = (0, import_react32.useCallback)((scrollPosition) => {
-    if (domRef.current) {
-      domRef.current.style.transform = `translate3d(-${scrollPosition.scrollLeft}px, 0px, 0px)`;
-    }
-  }, []);
-  (0, import_react32.useEffect)(() => {
-    const removeOnScroll = brain.onScroll(updateDOMTransform);
-    updateDOMTransform(
-      brain.getScrollPosition() || { scrollLeft: 0, scrollTop: 0 }
-    );
-    return removeOnScroll;
-  }, [brain]);
-  const headerCls = HeaderClsRecipe({
-    overflow: false
-  });
   const domProps = {
     ref: domRef,
     className: join(
@@ -11440,7 +11622,8 @@ function InfiniteTableHeaderFn(props) {
       name: "header",
       renderCell,
       brain: headerBrain,
-      cellHoverClassNames: []
+      cellHoverClassNames: EMPTY_ARR,
+      cellDetachedClassNames: CELL_DETACHED_CLASSNAMES
     }
   ));
 }
@@ -21286,6 +21469,11 @@ var HorizontalLayoutMatrixBrain = class extends MatrixBrain {
       remainingSize,
       sizes.concat(sizes)
     );
+    if (direction === "horizontal") {
+      this.maxHorizontalRenderCount = renderCount;
+    } else {
+      this.maxVerticalRenderCount = renderCount;
+    }
     renderCount = Math.min(count, renderCount);
     return renderCount;
   }
@@ -23026,7 +23214,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "6.1.0-canary.0"
+      version: "6.1.1-canary.0"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -26406,7 +26594,63 @@ function useColumnFilterOperatorMenu() {
 var import_react62 = require("react");
 
 // src/components/InfiniteTable/utils/getCellContextMenu.tsx
+var React68 = __toESM(require("react"));
+
+// src/components/InfiniteTable/utils/contextMenuUtils.tsx
 var React67 = __toESM(require("react"));
+function getMenuItemsAndColumns(menuDefinition) {
+  let items = menuDefinition ? Array.isArray(menuDefinition) ? menuDefinition : menuDefinition.items : null;
+  const columns = menuDefinition && !Array.isArray(menuDefinition) ? menuDefinition.columns : void 0;
+  return {
+    items,
+    columns
+  };
+}
+function getMenuDefaultProps(config) {
+  const onRootMouseDown = (event) => {
+    event.__insideMenu = true;
+  };
+  const onHide = (state) => {
+    state.domRef.current?.parentNode?.removeEventListener(
+      "mousedown",
+      onRootMouseDown
+    );
+  };
+  const menuDefaultProps = {
+    columns: [],
+    items: [],
+    autoFocus: true,
+    onShow: (state) => {
+      state.domRef.current?.parentNode?.addEventListener(
+        "mousedown",
+        onRootMouseDown
+      );
+    },
+    onHide,
+    onHideIntent: (state) => {
+      onHide(state);
+      config.onHideIntent?.();
+    }
+  };
+  return menuDefaultProps;
+}
+function getLazyMenu(menuDefinition, menuDefaultProps, MenuCmp) {
+  if (!menuDefinition) {
+    return null;
+  }
+  const updater = buildSubscriptionCallback();
+  menuDefinition.then((menuDefinition2) => {
+    const { items, columns } = getMenuItemsAndColumns(menuDefinition2);
+    if (items && items.length) {
+      updater(
+        /* @__PURE__ */ React67.createElement(MenuCmp, { ...menuDefaultProps, items: items || [], columns })
+      );
+    }
+  });
+  return /* @__PURE__ */ React67.createElement(AvoidReactDiff, { updater });
+}
+
+// src/components/InfiniteTable/utils/getCellContextMenu.tsx
 function getCellContextMenu(cellLocation, context, onHideIntent) {
   const { columnId, rowIndex, event } = cellLocation;
   const { getComputed, getState } = context;
@@ -26429,42 +26673,25 @@ function getCellContextMenu(cellLocation, context, onHideIntent) {
       preventDefault: false
     };
   }
+  const menuDefaultProps = getMenuDefaultProps({
+    onHideIntent
+  });
   const menuDefinition = getCellContextMenuItems(cellContext, context);
-  let items = menuDefinition ? Array.isArray(menuDefinition) ? menuDefinition : menuDefinition.items : null;
-  const menuColumns = menuDefinition && !Array.isArray(menuDefinition) ? menuDefinition.columns : void 0;
-  const onRootMouseDown = (event2) => {
-    event2.__insideMenu = true;
-  };
-  const onHide = (state) => {
-    state.domRef.current?.parentNode?.removeEventListener(
-      "mousedown",
-      onRootMouseDown
-    );
-  };
+  const preventDefault = menuDefinition instanceof Promise ? true : Array.isArray(menuDefinition) ? true : !!(menuDefinition && Array.isArray(menuDefinition.items));
+  if (menuDefinition instanceof Promise) {
+    return {
+      cellContext,
+      menu: getLazyMenu(menuDefinition, menuDefaultProps, MenuCmp),
+      preventDefault
+    };
+  }
+  const { items, columns } = getMenuItemsAndColumns(menuDefinition);
   if (!items || !items.length) {
     return { cellContext, menu: null, preventDefault: Array.isArray(items) };
   }
   return {
-    preventDefault: true,
-    menu: /* @__PURE__ */ React67.createElement(
-      MenuCmp,
-      {
-        columns: menuColumns,
-        autoFocus: true,
-        items,
-        onShow: (state) => {
-          state.domRef.current?.parentNode?.addEventListener(
-            "mousedown",
-            onRootMouseDown
-          );
-        },
-        onHide,
-        onHideIntent: (state) => {
-          onHide(state);
-          onHideIntent?.();
-        }
-      }
-    ),
+    preventDefault,
+    menu: /* @__PURE__ */ React68.createElement(MenuCmp, { ...menuDefaultProps, columns, items }),
     cellContext
   };
 }
@@ -26485,42 +26712,25 @@ function getTableContextMenu(menuLocation, context, onHideIntent) {
   if (!getContextMenuItems) {
     return { cellContext, menu: null, preventDefault: false };
   }
-  let menuDefinition = getContextMenuItems(cellContext, context);
-  let items = menuDefinition ? Array.isArray(menuDefinition) ? menuDefinition : menuDefinition.items : null;
-  const menuColumns = menuDefinition && !Array.isArray(menuDefinition) ? menuDefinition.columns : void 0;
-  const onRootMouseDown = (event) => {
-    event.__insideMenu = true;
-  };
-  const onHide = (state) => {
-    state.domRef.current?.parentNode?.removeEventListener(
-      "mousedown",
-      onRootMouseDown
-    );
-  };
+  const menuDefaultProps = getMenuDefaultProps({
+    onHideIntent
+  });
+  const menuDefinition = getContextMenuItems(cellContext, context);
+  const preventDefault = menuDefinition instanceof Promise ? true : Array.isArray(menuDefinition) ? true : !!(menuDefinition && Array.isArray(menuDefinition.items));
+  if (menuDefinition instanceof Promise) {
+    return {
+      cellContext,
+      menu: getLazyMenu(menuDefinition, menuDefaultProps, MenuCmp),
+      preventDefault
+    };
+  }
+  const { items, columns } = getMenuItemsAndColumns(menuDefinition);
   if (!items || !items.length) {
     return { cellContext, menu: null, preventDefault: Array.isArray(items) };
   }
   return {
-    preventDefault: true,
-    menu: /* @__PURE__ */ React67.createElement(
-      MenuCmp,
-      {
-        columns: menuColumns,
-        autoFocus: true,
-        items,
-        onShow: (state) => {
-          state.domRef.current?.parentNode?.addEventListener(
-            "mousedown",
-            onRootMouseDown
-          );
-        },
-        onHide,
-        onHideIntent: (state) => {
-          onHide(state);
-          onHideIntent?.();
-        }
-      }
-    ),
+    preventDefault,
+    menu: /* @__PURE__ */ React68.createElement(MenuCmp, { ...menuDefaultProps, columns, items }),
     cellContext
   };
 }
@@ -26712,7 +26922,7 @@ function useTableContextMenu() {
 
 // src/components/InfiniteTable/components/HScrollSyncContent.tsx
 var import_react64 = require("react");
-var React68 = __toESM(require("react"));
+var React69 = __toESM(require("react"));
 
 // src/components/InfiniteTable/hooks/useGridScroll.ts
 var import_react63 = require("react");
@@ -26758,7 +26968,7 @@ function HScrollSyncContent(props) {
   } else if (maxWidth === "viewport") {
     style2.maxWidth = ThemeVars.runtime.bodyWidth;
   }
-  return /* @__PURE__ */ React68.createElement(
+  return /* @__PURE__ */ React69.createElement(
     "div",
     {
       ref: domRef,
@@ -26859,7 +27069,7 @@ function useHorizontalLayout() {
 }
 
 // src/components/InfiniteTable/hooks/useDebugMode.ts
-var React69 = __toESM(require("react"));
+var React70 = __toESM(require("react"));
 var logWarning = once(() => {
   console.warn(
     `It appears you have not loaded the CSS file for InfiniteTable.
@@ -26873,7 +27083,7 @@ import '@infinite-table/infinite-react/index.css'
 var cssFileLoadedVarName = stripVar(ThemeVars.loaded);
 function useDebugMode() {
   const { getState } = useInfiniteTable();
-  React69.useEffect(() => {
+  React70.useEffect(() => {
     runDebugMode(getState);
   }, []);
 }
@@ -26929,7 +27139,7 @@ function InfiniteTableHeader2() {
   const { state: componentState, getComputed } = context;
   const { header, brain, headerBrain, wrapRowsHorizontally } = componentState;
   const { scrollbars } = getComputed();
-  return header ? /* @__PURE__ */ React70.createElement(
+  return header ? /* @__PURE__ */ React71.createElement(
     TableHeaderWrapper,
     {
       wrapRowsHorizontally: !!wrapRowsHorizontally,
@@ -26946,7 +27156,7 @@ var InfiniteTableBodyCls = join(
   transformTranslateZero
 );
 function InfiniteTableBodyContainer(props) {
-  return /* @__PURE__ */ React70.createElement(
+  return /* @__PURE__ */ React71.createElement(
     "div",
     {
       ...props,
@@ -26974,7 +27184,8 @@ function InfiniteTableBody() {
     rowDetailRenderer,
     showHoverRows,
     wrapRowsHorizontally,
-    domProps
+    domProps,
+    domRef
   } = componentState;
   const LoadMaskCmp = components2?.LoadMask ?? LoadMask;
   const computed = getComputed();
@@ -26983,7 +27194,7 @@ function InfiniteTableBody() {
   const {
     componentState: { loading }
   } = useDataSourceContextValue();
-  const onContextMenu = React70.useCallback((event) => {
+  const onContextMenu = React71.useCallback((event) => {
     const state = context.getState();
     const target = event.target;
     if (!masterContext && event._from_row_detail) {
@@ -27023,13 +27234,13 @@ function InfiniteTableBody() {
   const { renderCell, renderDetailRow } = useCellRendering({
     imperativeApi: api,
     getComputed,
-    domRef: componentState.domRef,
+    domRef,
     bodySize,
     computed
   });
   const { autoFocus, tabIndex } = domProps ?? {};
   useToggleWrapRowsHorizontally();
-  return /* @__PURE__ */ React70.createElement(InfiniteTableBodyContainer, { onContextMenu }, /* @__PURE__ */ React70.createElement(
+  return /* @__PURE__ */ React71.createElement(InfiniteTableBodyContainer, { onContextMenu }, /* @__PURE__ */ React71.createElement(
     HeadlessTable,
     {
       forceRerenderTimestamp: componentState.forceBodyRerenderTimestamp,
@@ -27048,11 +27259,12 @@ function InfiniteTableBody() {
       renderCell,
       renderDetailRow: rowDetailRenderer ? renderDetailRow : void 0,
       cellHoverClassNames: showHoverRows ? HOVERED_CLASS_NAMES : void 0,
-      scrollerDOMRef
+      scrollerDOMRef,
+      scrollVarHostRef: domRef
     }
-  ), /* @__PURE__ */ React70.createElement(LoadMaskCmp, { visible: loading }, loadingText));
+  ), /* @__PURE__ */ React71.createElement(LoadMaskCmp, { visible: loading }, loadingText));
 }
-var InfiniteTableComponent = React70.memo(
+var InfiniteTableComponent = React71.memo(
   function InfiniteTableComponent2() {
     const context = useInfiniteTable();
     const masterContext = useMasterDetailContext();
@@ -27084,7 +27296,7 @@ var InfiniteTableComponent = React70.memo(
     useScrollToActiveRow(activeRowIndex, dataArray.length, api);
     useScrollToActiveCell(activeCellIndex, dataArray.length, api);
     const { onKeyDown: onKeyDown2 } = useDOMEventHandlers();
-    React70.useEffect(() => {
+    React71.useEffect(() => {
       const dataSourceState = getDataSourceState();
       const onChange = debounce(
         (renderRange) => {
@@ -27107,7 +27319,7 @@ var InfiniteTableComponent = React70.memo(
       ...initialDOMProps
     } = componentState.domProps ?? {};
     const domProps = useDOMProps(initialDOMProps);
-    React70.useEffect(() => {
+    React71.useEffect(() => {
       brain.setScrollStopDelay(scrollStopDelay);
       dataSourceActions.scrollStopDelayUpdatedByTable = scrollStopDelay;
     }, [scrollStopDelay]);
@@ -27118,7 +27330,7 @@ var InfiniteTableComponent = React70.memo(
     const { menuPortal: cellContextMenuPortal } = useCellContextMenu();
     const { menuPortal: tableContextMenuPortal } = useTableContextMenu();
     const { menuPortal: filterOperatorMenuPortal } = useColumnFilterOperatorMenu();
-    React70.useEffect(() => {
+    React71.useEffect(() => {
       if (typeof globalThis.__DO_NOT_USE_UNLESS_YOU_KNOW_WHAT_YOURE_DOING_IS_READY === "function") {
         globalThis.__DO_NOT_USE_UNLESS_YOU_KNOW_WHAT_YOURE_DOING_IS_READY(
           componentState.id,
@@ -27132,13 +27344,13 @@ var InfiniteTableComponent = React70.memo(
       }
     }, [componentState.ready]);
     useDebugMode();
-    React70.useEffect(() => {
+    React71.useEffect(() => {
       if (masterContext) {
         portalDOMRef.current = masterContext.getMasterState().portalDOMRef.current;
       }
     }, []);
-    const children = initialChildren ?? /* @__PURE__ */ React70.createElement(React70.Fragment, null, /* @__PURE__ */ React70.createElement(InfiniteTableHeader2, null), /* @__PURE__ */ React70.createElement(InfiniteTableBody, null));
-    return /* @__PURE__ */ React70.createElement("div", { onKeyDown: onKeyDown2, ref: domRef, ...domProps }, children, /* @__PURE__ */ React70.createElement(
+    const children = initialChildren ?? /* @__PURE__ */ React71.createElement(React71.Fragment, null, /* @__PURE__ */ React71.createElement(InfiniteTableHeader2, null), /* @__PURE__ */ React71.createElement(InfiniteTableBody, null));
+    return /* @__PURE__ */ React71.createElement("div", { onKeyDown: onKeyDown2, ref: domRef, ...domProps }, children, /* @__PURE__ */ React71.createElement(
       "div",
       {
         ref: portalDOMRef,
@@ -27154,14 +27366,14 @@ var InfiniteTableComponent = React70.memo(
       cellContextMenuPortal,
       tableContextMenuPortal,
       filterOperatorMenuPortal
-    ), rowHeightCSSVar ? /* @__PURE__ */ React70.createElement(
+    ), rowHeightCSSVar ? /* @__PURE__ */ React71.createElement(
       CSSNumericVariableWatch,
       {
         key: "row-height",
         varName: rowHeightCSSVar,
         onChange: onRowHeightCSSVarChange
       }
-    ) : null, /* @__PURE__ */ React70.createElement(
+    ) : null, /* @__PURE__ */ React71.createElement(
       CSSNumericVariableWatch,
       {
         key: "flashing-duration",
@@ -27169,21 +27381,21 @@ var InfiniteTableComponent = React70.memo(
         varName: ThemeVars.components.Cell.flashingDuration,
         onChange: onFlashingDurationCSSVarChange
       }
-    ), rowDetailHeightCSSVar ? /* @__PURE__ */ React70.createElement(
+    ), rowDetailHeightCSSVar ? /* @__PURE__ */ React71.createElement(
       CSSNumericVariableWatch,
       {
         key: "row-detail-height",
         varName: rowDetailHeightCSSVar,
         onChange: onRowDetailHeightCSSVarChange
       }
-    ) : null, columnHeaderHeightCSSVar ? /* @__PURE__ */ React70.createElement(
+    ) : null, columnHeaderHeightCSSVar ? /* @__PURE__ */ React71.createElement(
       CSSNumericVariableWatch,
       {
         key: "column-header-height",
         varName: columnHeaderHeightCSSVar,
         onChange: onColumnHeaderHeightCSSVarChange
       }
-    ) : null, licenseValid ? null : /* @__PURE__ */ React70.createElement(InfiniteTableLicenseFooter, null), /* @__PURE__ */ React70.createElement(FocusDetect, null));
+    ) : null, licenseValid ? null : /* @__PURE__ */ React71.createElement(InfiniteTableLicenseFooter, null), /* @__PURE__ */ React71.createElement(FocusDetect, null));
   }
 );
 function InfiniteTableContextProvider({
@@ -27207,7 +27419,7 @@ function InfiniteTableContextProvider({
     getDataSourceMasterContext,
     api: dataSourceApi
   } = useDataSourceContextValue();
-  const [imperativeApi] = React70.useState(() => {
+  const [imperativeApi] = React71.useState(() => {
     return getImperativeApi({
       getComputed,
       getState,
@@ -27243,20 +27455,20 @@ function InfiniteTableContextProvider({
     },
     { earlyAttach: true, debounce: 50 }
   );
-  React70.useEffect(() => {
+  React71.useEffect(() => {
     if (scrollerDOMRef.current) {
       scrollerDOMRef.current.scrollTop = 0;
     }
   }, [scrollTopKey, scrollerDOMRef]);
   const TableContext2 = getInfiniteTableContext();
-  return /* @__PURE__ */ React70.createElement(TableContext2.Provider, { value: contextValue }, /* @__PURE__ */ React70.createElement(InfiniteTableComponent, null));
+  return /* @__PURE__ */ React71.createElement(TableContext2.Provider, { value: contextValue }, /* @__PURE__ */ React71.createElement(InfiniteTableComponent, null));
 }
 var DEFAULT_ROW_HEIGHT = 40;
 var DEFAULT_COLUMN_HEADER_HEIGHT = toCSSVarName(columnHeaderHeightName);
 var InfiniteTable = function(props) {
   const table = (
     //@ts-ignore
-    /* @__PURE__ */ React70.createElement(
+    /* @__PURE__ */ React71.createElement(
       InfiniteTableRoot,
       {
         repeatWrappedGroupRows: !!props.wrapRowsHorizontally,
@@ -27264,30 +27476,30 @@ var InfiniteTable = function(props) {
         columnHeaderHeight: DEFAULT_COLUMN_HEADER_HEIGHT,
         ...props
       },
-      /* @__PURE__ */ React70.createElement(InfiniteTableContextProvider, { children: props.children })
+      /* @__PURE__ */ React71.createElement(InfiniteTableContextProvider, { children: props.children })
     )
   );
   if (false) {
-    return /* @__PURE__ */ React70.createElement(React70.StrictMode, null, table);
+    return /* @__PURE__ */ React71.createElement(React71.StrictMode, null, table);
   }
   return table;
 };
 InfiniteTable.Header = InfiniteTableHeader2;
 InfiniteTable.Body = InfiniteTableBody;
 InfiniteTable.HScrollSyncContent = HScrollSyncContent;
-InfiniteTable.Footer = () => /* @__PURE__ */ React70.createElement(InfiniteTableFooter, null);
+InfiniteTable.Footer = () => /* @__PURE__ */ React71.createElement(InfiniteTableFooter, null);
 
 // src/components/TreeGrid/TreeDataSource.tsx
-var React71 = __toESM(require("react"));
+var React72 = __toESM(require("react"));
 function TreeDataSource(props) {
   const { DataSource: DataSourceComponent } = useDataSourceInternal({ nodesKey: "children", ...props });
-  return /* @__PURE__ */ React71.createElement(DataSourceComponent, null, props.children ?? null);
+  return /* @__PURE__ */ React72.createElement(DataSourceComponent, null, props.children ?? null);
 }
 
 // src/components/TreeGrid/TreeGrid.tsx
-var React72 = __toESM(require("react"));
+var React73 = __toESM(require("react"));
 function TreeGrid(props) {
-  return /* @__PURE__ */ React72.createElement(InfiniteTable, { ...props });
+  return /* @__PURE__ */ React73.createElement(InfiniteTable, { ...props });
 }
 
 // src/components/DataSource/DataLoader/DataQuery.ts
@@ -27754,12 +27966,12 @@ var useEffectWhen = (callback, options) => {
 };
 
 // src/components/InfiniteTable/components/InfiniteTableRow/FlashingColumnCell.tsx
-var React73 = __toESM(require("react"));
+var React74 = __toESM(require("react"));
 var currentFlashingDurationVar = stripVar(
   InternalVars.currentFlashingDuration
 );
 var defaultRender = ({ children }) => {
-  return /* @__PURE__ */ React73.createElement(React73.Fragment, null, children);
+  return /* @__PURE__ */ React74.createElement(React74.Fragment, null, children);
 };
 var DEFAULT_FLASH_DURATION = 1e3;
 var INTERNAL_FLASH_CLS_FOR_DIRECTION = {
@@ -27781,7 +27993,7 @@ var createFlashingColumnCellComponent = (options = {}) => {
     // fadeClassName,
     render = defaultRender
   } = options;
-  const FlashingColumnCell2 = React73.forwardRef(
+  const FlashingColumnCell2 = React74.forwardRef(
     (props, _ref) => {
       const cellContext = useInfiniteColumnCell();
       const {
@@ -27791,13 +28003,13 @@ var createFlashingColumnCellComponent = (options = {}) => {
       const { domRef, value, column, rowInfo, htmlElementRef } = cellContext;
       const rowId = rowInfo.id;
       const columnId = column.id;
-      const initialRef = React73.useRef(true);
-      const oldValueRef = React73.useRef(value);
+      const initialRef = React74.useRef(true);
+      const oldValueRef = React74.useRef(value);
       const oldValue = initialRef.current ? null : oldValueRef.current;
       initialRef.current = false;
-      const flashTimeoutIdRef = React73.useRef();
-      const flashDirectionRef = React73.useRef();
-      const fadeTimeoutIdRef = React73.useRef();
+      const flashTimeoutIdRef = React74.useRef();
+      const flashDirectionRef = React74.useRef();
+      const fadeTimeoutIdRef = React74.useRef();
       useEffectWhen(
         () => {
           if (value === oldValueRef.current) {
@@ -27844,7 +28056,7 @@ var createFlashingColumnCellComponent = (options = {}) => {
           different: [value]
         }
       );
-      return /* @__PURE__ */ React73.createElement("div", { ref: domRef, ...props, className: join(props.className) }, render({ children: props.children, oldValue }));
+      return /* @__PURE__ */ React74.createElement("div", { ref: domRef, ...props, className: join(props.className) }, render({ children: props.children, oldValue }));
     }
   );
   return FlashingColumnCell2;