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

package/index.js

@@ -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"
+      version: "6.1.1-canary.0"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -26996,7 +27184,8 @@ function InfiniteTableBody() {
     rowDetailRenderer,
     showHoverRows,
     wrapRowsHorizontally,
-    domProps
+    domProps,
+    domRef
   } = componentState;
   const LoadMaskCmp = components2?.LoadMask ?? LoadMask;
   const computed = getComputed();
@@ -27045,7 +27234,7 @@ function InfiniteTableBody() {
   const { renderCell, renderDetailRow } = useCellRendering({
     imperativeApi: api,
     getComputed,
-    domRef: componentState.domRef,
+    domRef,
     bodySize,
     computed
   });
@@ -27070,7 +27259,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));
 }