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

package/index.dev.mjs

@@ -1394,7 +1394,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";
@@ -1614,6 +1614,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 = {
@@ -2294,6 +2296,9 @@ var MatrixBrain = class extends Logger {
       }
     };
     this.getRenderRangeCellCount = getRenderRangeCellCount;
+    this.getMaxCellCount = () => {
+      return this.maxHorizontalRenderCount * this.maxVerticalRenderCount;
+    };
     this.getExtraCells = () => {
       return this.extraSpanCells;
     };
@@ -2655,6 +2660,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;
   }
@@ -2823,6 +2833,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}`;
@@ -2834,10 +2845,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) {
@@ -2868,10 +2885,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();
@@ -2887,11 +2906,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;
@@ -2936,16 +2966,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.
@@ -3002,14 +3047,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;
@@ -3044,11 +3091,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;
@@ -3057,47 +3102,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);
@@ -3139,34 +3210,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();
   }
@@ -3207,12 +3260,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);
@@ -3234,17 +3287,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;
     }
@@ -3253,7 +3309,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;
     }
@@ -3272,9 +3328,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) => {
@@ -3295,7 +3354,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 = () => {
     };
@@ -3305,6 +3365,9 @@ var GridCellManager = class extends Logger {
       cell.update(null);
     });
   }
+  withDetachedCells(fn) {
+    this.pool.getDetachedCells().forEach(fn);
+  }
 };
 
 // src/components/HeadlessTable/ListRowManager.ts
@@ -3318,6 +3381,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}`;
@@ -3335,10 +3399,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) {
@@ -3369,6 +3439,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();
@@ -3384,11 +3455,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;
@@ -3433,16 +3515,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.
@@ -3499,7 +3596,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 {
@@ -3613,14 +3710,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);
@@ -3632,6 +3723,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();
   }
@@ -3660,6 +3757,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();
@@ -4460,7 +4558,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(() => {
@@ -4487,6 +4599,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 {
@@ -4532,13 +4684,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) {
@@ -4556,7 +4705,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) => {
@@ -4641,9 +4790,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) {
@@ -4676,14 +4823,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;
@@ -4727,19 +4880,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,
@@ -4852,6 +5015,9 @@ function RawTableFn(props) {
   useEffect4(() => {
     renderer.cellHoverClassNames = props.cellHoverClassNames || [];
   }, [renderer, props.cellHoverClassNames]);
+  useEffect4(() => {
+    renderer.cellDetachedClassNames = props.cellDetachedClassNames || [];
+  }, [renderer, props.cellDetachedClassNames]);
   useLayoutEffect3(() => {
     const renderRange = brain.getRenderRange();
     renderer.renderRange(renderRange, {
@@ -5167,7 +5333,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({
@@ -5207,6 +5389,7 @@ function HeadlessTable(props) {
     onRenderUpdater,
     wrapRowsHorizontally,
     forceRerenderTimestamp,
+    scrollVarHostRef,
     ...domProps
   } = props;
   const { autoFocus } = domProps;
@@ -5239,7 +5422,24 @@ function HeadlessTable(props) {
     return remove;
   }, [wrapRowsHorizontally, brain]);
   const updateDOMTransform = useCallback4((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 = useCallback4(
     (scrollPos) => {
@@ -5280,7 +5480,8 @@ function HeadlessTable(props) {
           renderCell,
           renderDetailRow,
           brain,
-          cellHoverClassNames
+          cellHoverClassNames,
+          cellDetachedClassNames: CELL_DETACHED_CLASSNAMES
         }
       ),
       activeCellIndex != null ? /* @__PURE__ */ React14.createElement(
@@ -5897,10 +6098,10 @@ import * as React27 from "react";
 import { useEffect as useEffect10, useLayoutEffect as useLayoutEffect8, useState as useState5 } from "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";
@@ -8757,13 +8958,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
 import * as React34 from "react";
 import { useEffect as useEffect13, useRef as useRef12 } from "react";
@@ -11028,7 +11222,7 @@ function assignGroupOffsetsAndComputedWidths(items, groupOffset = 0) {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
 import * as React47 from "react";
-import { useCallback as useCallback16, useEffect as useEffect16, useRef as useRef18 } from "react";
+import { useCallback as useCallback16, useRef as useRef18 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup.tsx
 import * as React46 from "react";
@@ -11270,11 +11464,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,
@@ -11289,21 +11486,6 @@ function InfiniteTableHeaderFn(props) {
   } = useInfiniteTable();
   const { computedColumnsMap } = computed;
   const domRef = useRef18(null);
-  const updateDOMTransform = useCallback16((scrollPosition) => {
-    if (domRef.current) {
-      domRef.current.style.transform = `translate3d(-${scrollPosition.scrollLeft}px, 0px, 0px)`;
-    }
-  }, []);
-  useEffect16(() => {
-    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(
@@ -11389,7 +11571,8 @@ function InfiniteTableHeaderFn(props) {
       name: "header",
       renderCell,
       brain: headerBrain,
-      cellHoverClassNames: []
+      cellHoverClassNames: EMPTY_ARR,
+      cellDetachedClassNames: CELL_DETACHED_CLASSNAMES
     }
   ));
 }
@@ -11533,7 +11716,7 @@ function TableHeaderWrapper(props) {
 
 // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
 import * as React49 from "react";
-import { useEffect as useEffect17 } from "react";
+import { useEffect as useEffect16 } from "react";
 
 // src/components/utils/decamelize.ts
 function decamelize(str, options) {
@@ -11590,7 +11773,7 @@ var InfiniteTableLicenseFooter = React49.forwardRef(
         ref.current = node;
       }
     }, []);
-    useEffect17(() => {
+    useEffect16(() => {
       const forceStyle = () => {
         setTimeout(() => {
           enforceStyle(domRef.current, defaultStyle);
@@ -14418,10 +14601,10 @@ var Indexer = class {
 };
 
 // src/components/DataSource/privateHooks/useLoadData.ts
-import { useEffect as useEffect19, useMemo as useMemo7, useRef as useRef21, useState as useState13 } from "react";
+import { useEffect as useEffect18, useMemo as useMemo7, useRef as useRef21, useState as useState13 } from "react";
 
 // src/components/hooks/useEffectWithChanges.ts
-import { useEffect as useEffect18, useRef as useRef20 } from "react";
+import { useEffect as useEffect17, useRef as useRef20 } from "react";
 function useEffectWithChanges(fn, deps) {
   const prevRef = useRef20({});
   const oldValuesRef = useRef20({});
@@ -14439,7 +14622,7 @@ function useEffectWithChanges(fn, deps) {
     }
   }
   prevRef.current = deps;
-  useEffect18(() => {
+  useEffect17(() => {
     const changes2 = changesRef.current;
     let result = void 0;
     if (Object.keys(changes2).length !== 0) {
@@ -14457,7 +14640,7 @@ function useEffectWithObject(fn, deps) {
       useEffectDeps.push(deps[k]);
     }
   }
-  useEffect18(fn, useEffectDeps);
+  useEffect17(fn, useEffectDeps);
 }
 
 // src/utils/composeFunctions.ts
@@ -17555,7 +17738,7 @@ function useLoadData(options) {
     horizontal: false
   });
   const scrollbarsRef = useRef21(scrollbars);
-  useEffect19(() => {
+  useEffect18(() => {
     notifyScrollbarsChange.onChange((scrollbars2) => {
       if (!scrollbars2) {
         return;
@@ -17565,7 +17748,7 @@ function useLoadData(options) {
     });
     return () => notifyScrollbarsChange.destroy();
   }, [notifyScrollbarsChange]);
-  useEffect19(() => {
+  useEffect18(() => {
     if (!livePagination) {
       return;
     }
@@ -17578,7 +17761,7 @@ function useLoadData(options) {
     });
     return () => cancelAnimationFrame(frameId);
   }, [livePaginationCursor]);
-  useEffect19(() => {
+  useEffect18(() => {
     if (!livePagination || livePaginationCursor !== void 0) {
       return;
     }
@@ -17591,7 +17774,7 @@ function useLoadData(options) {
     });
     return () => cancelAnimationFrame(frameId);
   }, [dataArray.length, livePaginationCursor]);
-  useEffect19(() => {
+  useEffect18(() => {
     const state = getComponentState();
     const { livePaginationCursor: livePaginationCursor2, livePagination: livePagination2, dataArray: dataArray2 } = state;
     if (!scrollbars.vertical && livePagination2) {
@@ -17722,7 +17905,7 @@ function useLazyLoadRange(options, dependencies) {
     componentActions: actions,
     componentState
   } = options;
-  useEffect19(() => {
+  useEffect18(() => {
     actions.lazyLoadCacheOfLoadedBatches = new DeepMap();
   }, [componentState.data, componentState.dataParams]);
   const {
@@ -17803,7 +17986,7 @@ function useLazyLoadRange(options, dependencies) {
       groupRowsState
     }
   );
-  useEffect19(() => {
+  useEffect18(() => {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
       debouncedLoadRange();
     }
@@ -18610,7 +18793,7 @@ function getDataSourceStateRestoreForDetails(state) {
 // src/components/DataSource/privateHooks/useDataSource.tsx
 import React51, {
   useCallback as useCallback19,
-  useEffect as useEffect20,
+  useEffect as useEffect19,
   useLayoutEffect as useLayoutEffect10,
   useState as useState14
 } from "react";
@@ -18682,7 +18865,7 @@ function useDataSourceInternal(props) {
     componentActions,
     getComponentState: getState
   });
-  useEffect20(() => {
+  useEffect19(() => {
     componentState.onDataArrayChange?.(
       componentState.originalDataArray,
       componentState.originalDataArrayChangedInfo
@@ -18704,7 +18887,7 @@ function useDataSourceInternal(props) {
       });
     }
   }, [componentState.originalDataArrayChangedInfo]);
-  useEffect20(() => {
+  useEffect19(() => {
     componentState.onReady?.(api);
   }, []);
   return {
@@ -20260,7 +20443,7 @@ function getImperativeApi(context) {
 
 // src/components/InfiniteTable/hooks/useAutoSizeColumns.ts
 import {
-  useEffect as useEffect21,
+  useEffect as useEffect20,
   useRef as useRef22,
   useState as useState15
 } from "react";
@@ -20338,7 +20521,7 @@ function useAutoSizeColumns() {
   const theKey = typeof autoSizeColumnsKey === "object" ? autoSizeColumnsKey.key : autoSizeColumnsKey;
   const getTheKey = useLatest(theKey);
   const lastExecutedIdentifierRef = useRef22(null);
-  useEffect21(() => {
+  useEffect20(() => {
     const key = getTheKey();
     if (key == null) {
       return;
@@ -20351,7 +20534,7 @@ function useAutoSizeColumns() {
     };
     return brain.onRenderRangeChange(onChange);
   }, [brain]);
-  useEffect21(() => {
+  useEffect20(() => {
     if (theKey == null) {
       return;
     }
@@ -20397,7 +20580,7 @@ function useAutoSizeColumns() {
 
 // src/components/InfiniteTable/hooks/useCellRendering.tsx
 import { useMemo as useMemo9 } from "react";
-import { useCallback as useCallback20, useEffect as useEffect22, useRef as useRef24 } from "react";
+import { useCallback as useCallback20, useEffect as useEffect21, useRef as useRef24 } from "react";
 import * as React54 from "react";
 
 // src/components/InfiniteTable/hooks/useYourBrain.ts
@@ -20652,17 +20835,17 @@ function useCellRendering(param) {
     rowspan
   });
   const scrollTopMaxRef = useRef24(0);
-  useEffect22(() => {
+  useEffect21(() => {
     return brain.onRenderCountChange(() => {
       scrollTopMaxRef.current = brain.scrollTopMax;
     });
   }, [brain]);
-  useEffect22(() => {
+  useEffect21(() => {
     return brain.onRenderRangeChange((range) => {
       getState().onRenderRangeChange?.(range);
     });
   }, [brain]);
-  useEffect22(() => {
+  useEffect21(() => {
     return brain.onScrollStop((scrollPosition) => {
       const { scrollTop: scrollTop2, scrollLeft: scrollLeft2 } = scrollPosition;
       if (scrollTop2 === 0) {
@@ -20702,13 +20885,13 @@ function useCellRendering(param) {
       }
     });
   }, [brain, onScrollToTop, onScrollToBottom, onScrollStop]);
-  useEffect22(() => {
+  useEffect21(() => {
     if (!bodySize.height) {
       return;
     }
     actions.ready = true;
   }, [!!bodySize.height]);
-  useEffect22(() => {
+  useEffect21(() => {
     if (!ready) {
     }
     const { onReady } = getState();
@@ -20717,7 +20900,7 @@ function useCellRendering(param) {
     }
   }, [ready]);
   const [, rerender] = useRerender();
-  useEffect22(() => {
+  useEffect21(() => {
     rerender();
   }, [dataSourceState]);
   const renderCell = useCallback20(
@@ -20838,7 +21021,7 @@ function useCellRendering(param) {
 }
 
 // src/components/InfiniteTable/hooks/useComputed.ts
-import { useEffect as useEffect25, useState as useState17 } from "react";
+import { useEffect as useEffect24, useState as useState17 } from "react";
 
 // src/components/InfiniteTable/utils/MultiCellSelector.ts
 var MultiCellSelector = class {
@@ -21111,7 +21294,7 @@ function useColumnSizeFn(columns) {
 }
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
-import { useEffect as useEffect23, useLayoutEffect as useLayoutEffect11, useMemo as useMemo11 } from "react";
+import { useEffect as useEffect22, useLayoutEffect as useLayoutEffect11, useMemo as useMemo11 } from "react";
 
 // src/components/InfiniteTable/state/getInitialState.ts
 import { createRef } from "react";
@@ -21244,6 +21427,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;
   }
@@ -21957,13 +22145,13 @@ function useColumnsWhen() {
       pivotGrandTotalColumnPosition
     }
   } = useManagedComponentState();
-  useEffect23(() => {
+  useEffect22(() => {
     dataSourceActions.generateGroupRows = groupRenderStrategy !== "inline";
   }, [groupRenderStrategy]);
-  useEffect23(() => {
+  useEffect22(() => {
     dataSourceActions.pivotTotalColumnPosition = pivotTotalColumnPosition;
   }, [pivotTotalColumnPosition]);
-  useEffect23(() => {
+  useEffect22(() => {
     if (pivotGrandTotalColumnPosition != void 0) {
       dataSourceActions.pivotGrandTotalColumnPosition = pivotGrandTotalColumnPosition;
     }
@@ -22046,7 +22234,7 @@ function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
     });
     return Object.keys(computedColumns).length === 0 ? void 0 : computedColumns;
   }
-  useEffect23(() => {
+  useEffect22(() => {
     const update = () => {
       componentActions.columnsWhenInlineGroupRenderStrategy = isTree ? void 0 : computeColumnsWhenInlineGroupRenderStrategy(
         columns,
@@ -22077,7 +22265,7 @@ function useColumnsWhenGrouping() {
     getComponentState
   } = useManagedComponentState();
   const toggleGroupRow = useToggleGroupRow();
-  useEffect23(() => {
+  useEffect22(() => {
     const update = () => {
       const { columns: columnsWhenGrouping, groupColumnIds } = getColumnsWhenGrouping({
         columns,
@@ -22181,7 +22369,7 @@ function useHideColumns(groupByMap) {
     hideEmptyGroupColumns ? groupRowsIndexesInDataArray : null,
     hideEmptyGroupColumns
   ]);
-  useEffect23(() => {
+  useEffect22(() => {
     const isGrouped = groupBy.length > 0;
     const currentState = getComponentState();
     const {
@@ -22592,7 +22780,7 @@ function useComputedRowHeight(param) {
 }
 
 // src/components/InfiniteTable/hooks/useScrollbars.ts
-import { useState as useState16, useEffect as useEffect24, useLayoutEffect as useLayoutEffect12 } from "react";
+import { useState as useState16, useEffect as useEffect23, useLayoutEffect as useLayoutEffect12 } from "react";
 var INITIAL_SCROLLBARS = {
   vertical: false,
   horizontal: false
@@ -22601,7 +22789,7 @@ function useScrollbars(brain) {
   const { getComponentState: getInfiniteTableState } = useManagedComponentState();
   const { getState: getDataSourceState } = useDataSourceContextValue();
   const [scrollbars, setScrollbars] = useState16(INITIAL_SCROLLBARS);
-  useEffect24(() => {
+  useEffect23(() => {
     return brain.onRenderCountChange(() => {
       const { scrollTopMax, scrollLeftMax } = brain;
       setScrollbars({
@@ -22676,7 +22864,7 @@ function useComputed() {
       }
     );
   });
-  useEffect25(() => {
+  useEffect24(() => {
     dataSourceActions.showSeparatePivotColumnForSingleAggregation = showSeparatePivotColumnForSingleAggregation;
   }, [showSeparatePivotColumnForSingleAggregation]);
   const { multiSort, filterValue, filterTypes } = dataSourceState;
@@ -22984,7 +23172,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "6.1.0"
+      version: "6.1.1-canary.0"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -22995,18 +23183,18 @@ var useLicense = (licenseKey = "") => {
 };
 
 // src/components/InfiniteTable/hooks/useScrollToActiveCell.ts
-import { useRef as useRef25, useEffect as useEffect26 } from "react";
+import { useRef as useRef25, useEffect as useEffect25 } from "react";
 var RETRIES = 10;
 function useScrollToActiveCell(activeCellIndex, dataCount, imperativeApi) {
   const didScrollRef = useRef25(false);
   const rafId = useRef25(null);
-  useEffect26(() => {
+  useEffect25(() => {
     if (activeCellIndex != null) {
       didScrollRef.current = false;
       cancelRaf(rafId.current);
     }
   }, [activeCellIndex]);
-  useEffect26(() => {
+  useEffect25(() => {
     if (activeCellIndex != null && !didScrollRef.current) {
       let tryScroll2 = function(times = 0) {
         times++;
@@ -23034,18 +23222,18 @@ function useScrollToActiveCell(activeCellIndex, dataCount, imperativeApi) {
 }
 
 // src/components/InfiniteTable/hooks/useScrollToActiveRow.ts
-import { useRef as useRef26, useEffect as useEffect27 } from "react";
+import { useRef as useRef26, useEffect as useEffect26 } from "react";
 var RETRIES2 = 10;
 function useScrollToActiveRow(activeRowIndex, dataCount, imperativeApi) {
   const didScrollRef = useRef26(false);
   const rafId = useRef26(null);
-  useEffect27(() => {
+  useEffect26(() => {
     if (activeRowIndex != null) {
       didScrollRef.current = false;
       cancelAnimationFrame(rafId.current);
     }
   }, [activeRowIndex]);
-  useEffect27(() => {
+  useEffect26(() => {
     if (activeRowIndex != null && !didScrollRef.current) {
       let tryScroll2 = function(times = 0) {
         times++;
@@ -23074,7 +23262,7 @@ function useScrollToActiveRow(activeRowIndex, dataCount, imperativeApi) {
 var toCSSVarName = (value) => `--infinite-${value}`;
 
 // src/components/InfiniteTable/eventHandlers/index.ts
-import { useCallback as useCallback23, useMemo as useMemo15, useEffect as useEffect28 } from "react";
+import { useCallback as useCallback23, useMemo as useMemo15, useEffect as useEffect27 } from "react";
 
 // src/components/InfiniteTable/eventHandlers/onCellClick.ts
 function onCellClick(context, event) {
@@ -24086,7 +24274,7 @@ function useEventHandlersContext() {
 }
 function handleDOMEvents() {
   const context = useEventHandlersContext();
-  useEffect28(() => {
+  useEffect27(() => {
     const removeOnKeyDown = context.getState().keyDown.onChange((event) => {
       onKeyDown(context, event);
     });
@@ -24142,13 +24330,13 @@ function useDOMEventHandlers() {
 }
 
 // src/components/InfiniteTable/hooks/useColumnMenu.ts
-import { useEffect as useEffect32 } from "react";
+import { useEffect as useEffect31 } from "react";
 
 // src/components/hooks/useOverlay/index.tsx
 import * as React56 from "react";
 import {
   useCallback as useCallback24,
-  useEffect as useEffect30,
+  useEffect as useEffect29,
   useLayoutEffect as useLayoutEffect13,
   useState as useState18
 } from "react";
@@ -24539,7 +24727,7 @@ function DefaultOverlayPortal(props) {
 }
 function OverlayContent(props) {
   const nodeRef = React56.useRef(null);
-  useEffect30(() => {
+  useEffect29(() => {
     return props.realign.onChange((handle) => {
       if (nodeRef.current && handle) {
         alignNode(nodeRef.current, handle);
@@ -25136,10 +25324,10 @@ function useMenuContext() {
 }
 
 // src/components/hooks/useMounted.ts
-import { useCallback as useCallback25, useEffect as useEffect31, useRef as useRef28 } from "react";
+import { useCallback as useCallback25, useEffect as useEffect30, useRef as useRef28 } from "react";
 function useMounted() {
   let mountedRef = useRef28(true);
-  useEffect31(() => {
+  useEffect30(() => {
     mountedRef.current = true;
     return () => {
       mountedRef.current = false;
@@ -25951,7 +26139,7 @@ function useColumnMenu() {
   } = useOverlay({
     portalContainer: masterContext ? masterContext.getMasterState().portalDOMRef.current : false
   });
-  useEffect32(() => {
+  useEffect31(() => {
     const { actions: actions2, getState: getState2 } = context;
     const state = getState2();
     return state.onColumnMenuClick.onChange((info) => {
@@ -25966,7 +26154,7 @@ function useColumnMenu() {
     });
   }, []);
   const { columnMenuVisibleForColumnId, columnMenuVisibleKey } = getState();
-  useEffect32(() => {
+  useEffect31(() => {
     const { columnMenuVisibleForColumnId: columnMenuVisibleForColumnId2, columnMenuTargetRef } = getState();
     if (columnMenuVisibleForColumnId2) {
       let handleMouseDown2 = function(event) {
@@ -26046,13 +26234,13 @@ function FocusDetect() {
 }
 
 // src/components/InfiniteTable/hooks/useEditingCallbackProps.ts
-import { useEffect as useEffect33 } from "react";
+import { useEffect as useEffect32 } from "react";
 function useOnEditCancelled() {
   const context = useInfiniteTable();
   const { getState } = context;
   const { editingCell } = getState();
   const cancelled = editingCell && !editingCell.active ? editingCell.cancelled : void 0;
-  useEffect33(() => {
+  useEffect32(() => {
     if (cancelled) {
       const { rowIndex, columnId, initialValue } = getState().editingCell;
       const { onEditCancelled } = getState();
@@ -26074,7 +26262,7 @@ function useOnEditRejected() {
     state: { editingCell }
   } = context;
   const rejected = editingCell && !editingCell.active && editingCell.accepted instanceof Error ? editingCell.accepted : void 0;
-  useEffect33(() => {
+  useEffect32(() => {
     if (rejected) {
       const { rowIndex, columnId, value, initialValue } = getState().editingCell;
       const { onEditRejected } = getState();
@@ -26098,7 +26286,7 @@ function useFocusOnEditStop() {
   } = context;
   const active = editingCell?.active;
   const prevActive = usePrevious(active);
-  useEffect33(() => {
+  useEffect32(() => {
     if (!active && prevActive) {
       context.api.focus();
     }
@@ -26111,7 +26299,7 @@ function useOnEditAccepted() {
     getState
   } = context;
   const accepted = editingCell && !editingCell.active && !editingCell.cancelled && editingCell.accepted === true;
-  useEffect33(() => {
+  useEffect32(() => {
     if (accepted) {
       const { editingCell: editingCell2 } = getState();
       const { value, rowIndex, columnId, initialValue } = editingCell2;
@@ -26136,7 +26324,7 @@ function useOnEditPersisted() {
     getState
   } = context;
   const persisted = editingCell ? editingCell.persisted : void 0;
-  useEffect33(() => {
+  useEffect32(() => {
     if (persisted) {
       const { editingCell: editingCell2, onEditPersistError, onEditPersistSuccess } = getState();
       if (!editingCell2) {
@@ -26169,7 +26357,7 @@ function useEditingCallbackProps() {
 }
 
 // src/components/InfiniteTable/hooks/useColumnFilterOperatorMenu.ts
-import { useEffect as useEffect34 } from "react";
+import { useEffect as useEffect33 } from "react";
 
 // src/components/InfiniteTable/utils/getFilterOperatorMenuForColumn.tsx
 import * as React66 from "react";
@@ -26308,7 +26496,7 @@ function useColumnFilterOperatorMenu() {
   } = useOverlay({
     portalContainer: masterContext ? masterContext.getMasterState().portalDOMRef.current : false
   });
-  useEffect34(() => {
+  useEffect33(() => {
     const { actions: actions2, getState: getState2 } = context;
     const state = getState2();
     return state.onFilterOperatorMenuClick.onChange((info) => {
@@ -26344,7 +26532,7 @@ function useColumnFilterOperatorMenu() {
       actions2.filterOperatorMenuVisibleForColumnId = column.id;
     });
   }, []);
-  useEffect34(() => {
+  useEffect33(() => {
     const { filterOperatorMenuVisibleForColumnId } = getState();
     if (filterOperatorMenuVisibleForColumnId) {
       let handleMouseDown2 = function(event) {
@@ -26371,7 +26559,7 @@ function useColumnFilterOperatorMenu() {
 }
 
 // src/components/InfiniteTable/hooks/useContextMenu.ts
-import { useEffect as useEffect35 } from "react";
+import { useEffect as useEffect34 } from "react";
 
 // src/components/InfiniteTable/utils/getCellContextMenu.tsx
 import * as React68 from "react";
@@ -26538,7 +26726,7 @@ function useCellContextMenu() {
   } = useOverlay({
     portalContainer: masterContext ? masterContext.getMasterState().portalDOMRef.current : false
   });
-  useEffect35(() => {
+  useEffect34(() => {
     const { actions: actions2, getState: getState2, getDataSourceState } = context;
     const state = getState2();
     return state.cellContextMenu.onChange((info) => {
@@ -26589,7 +26777,7 @@ function useCellContextMenu() {
       }
     });
   }, []);
-  useEffect35(() => {
+  useEffect34(() => {
     const { cellContextMenuVisibleFor } = getState();
     if (cellContextMenuVisibleFor) {
       let handleMouseDown2 = function(event) {
@@ -26625,7 +26813,7 @@ function useTableContextMenu() {
   } = useOverlay({
     portalContainer: masterContext ? masterContext.getMasterState().portalDOMRef.current : false
   });
-  useEffect35(() => {
+  useEffect34(() => {
     const { actions: actions2, getState: getState2 } = context;
     const state = getState2();
     return state.contextMenu.onChange((info) => {
@@ -26674,7 +26862,7 @@ function useTableContextMenu() {
       }
     });
   }, []);
-  useEffect35(() => {
+  useEffect34(() => {
     const { contextMenuVisibleFor } = getState();
     if (contextMenuVisibleFor) {
       let handleMouseDown2 = function(event) {
@@ -26705,13 +26893,13 @@ import { useRef as useRef30 } from "react";
 import * as React69 from "react";
 
 // src/components/InfiniteTable/hooks/useGridScroll.ts
-import { useCallback as useCallback28, useEffect as useEffect36 } from "react";
+import { useCallback as useCallback28, useEffect as useEffect35 } from "react";
 function useGridScroll(onScroll, deps) {
   const {
     state: { brain }
   } = useInfiniteTable();
   const memoizedOnScroll = useCallback28(onScroll, deps);
-  useEffect36(() => {
+  useEffect35(() => {
     const removeOnScroll = brain.onScroll(memoizedOnScroll);
     return removeOnScroll;
   }, [brain, memoizedOnScroll]);
@@ -26781,12 +26969,12 @@ function useVisibleColumnSizes() {
 var DEBUG_NAME = "InfiniteTable";
 
 // src/components/InfiniteTable/hooks/useToggleWrapRowsHorizontally.ts
-import { useEffect as useEffect37 } from "react";
+import { useEffect as useEffect36 } from "react";
 function useToggleWrapRowsHorizontally() {
   const { state, getState, actions } = useInfiniteTable();
   const { wrapRowsHorizontally } = state;
   const oldWrapRowsHorizontally = usePrevious(wrapRowsHorizontally);
-  useEffect37(() => {
+  useEffect36(() => {
     if (oldWrapRowsHorizontally !== wrapRowsHorizontally) {
       const { brain, headerBrain, renderer, onRenderUpdater } = getState();
       brain.destroy();
@@ -26803,12 +26991,12 @@ function useToggleWrapRowsHorizontally() {
 }
 
 // src/components/InfiniteTable/hooks/useHorizontalLayout.ts
-import { useEffect as useEffect38 } from "react";
+import { useEffect as useEffect37 } from "react";
 function useHorizontalLayout() {
   const { getState, actions, dataSourceActions, getDataSourceState } = useInfiniteTable();
   const { groupBy, isTree } = getDataSourceState();
   const { brain, wrapRowsHorizontally, repeatWrappedGroupRows } = getState();
-  useEffect38(() => {
+  useEffect37(() => {
     if (!wrapRowsHorizontally) {
       return;
     }
@@ -26964,7 +27152,8 @@ function InfiniteTableBody() {
     rowDetailRenderer,
     showHoverRows,
     wrapRowsHorizontally,
-    domProps
+    domProps,
+    domRef
   } = componentState;
   const LoadMaskCmp = components2?.LoadMask ?? LoadMask;
   const computed = getComputed();
@@ -27013,7 +27202,7 @@ function InfiniteTableBody() {
   const { renderCell, renderDetailRow } = useCellRendering({
     imperativeApi: api,
     getComputed,
-    domRef: componentState.domRef,
+    domRef,
     bodySize,
     computed
   });
@@ -27038,7 +27227,8 @@ function InfiniteTableBody() {
       renderCell,
       renderDetailRow: rowDetailRenderer ? renderDetailRow : void 0,
       cellHoverClassNames: showHoverRows ? HOVERED_CLASS_NAMES : void 0,
-      scrollerDOMRef
+      scrollerDOMRef,
+      scrollVarHostRef: domRef
     }
   ), /* @__PURE__ */ React71.createElement(LoadMaskCmp, { visible: loading }, loadingText));
 }
@@ -27519,7 +27709,7 @@ var keyboardShortcuts = {
 };
 
 // src/components/hooks/useInterceptedMap.ts
-import { useEffect as useEffect41 } from "react";
+import { useEffect as useEffect40 } from "react";
 function interceptMap(map2, fns) {
   const { set, delete: deleteKey, clear } = map2;
   if (fns.set) {
@@ -27681,7 +27871,7 @@ var WeakFixedSizeSet = _WeakFixedSizeSet;
 WeakFixedSizeSet.DEFAULT_SIZE = 10;
 
 // src/components/hooks/useEffectWhenSameDeps.ts
-import { useEffect as useEffect42, useRef as useRef31 } from "react";
+import { useEffect as useEffect41, useRef as useRef31 } from "react";
 var isSameDeps = (deps, prevDeps) => {
   return deps.every((dep, index) => dep === prevDeps[index]);
 };
@@ -27695,7 +27885,7 @@ var useEffectWhenSameDeps = (callback, deps) => {
   effectDepsRef.current = effectDeps;
   const callbackRef = useRef31(callback);
   callbackRef.current = callback;
-  useEffect42(() => {
+  useEffect41(() => {
     if (isInitialRef.current) {
       isInitialRef.current = false;
       return;
@@ -27705,7 +27895,7 @@ var useEffectWhenSameDeps = (callback, deps) => {
 };
 
 // src/components/hooks/useEffectWhen.ts
-import { useEffect as useEffect43, useRef as useRef32 } from "react";
+import { useEffect as useEffect42, useRef as useRef32 } from "react";
 var isSameDeps2 = (deps, prevDeps, compare) => {
   return deps.every((dep, index) => {
     if (compare) {
@@ -27735,7 +27925,7 @@ var useEffectWhen = (callback, options) => {
   if (sameRespected && differentRespected) {
     isInitialRef.current = false;
   }
-  useEffect43(() => {
+  useEffect42(() => {
     if (isInitialRef.current) {
       return;
     }