@infinite-table/infinite-react 6.1.0 → 6.1.1

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
     }
   ));
 }
@@ -19380,57 +19563,428 @@ function getRowDetailApi(param) {
   return rowDetailApi;
 }
 
-// src/components/InfiniteTable/api/getImperativeApi.ts
-function isSortInfoForColumn(sortInfo, col) {
-  if (sortInfo.id) {
-    if (sortInfo.id === col.id) {
-      return true;
+// src/components/utils/clamp.ts
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+
+// src/components/InfiniteTable/eventHandlers/keyboardNavigation.ts
+function getNextEnabledRowIndex(getDataSourceState, activeRowIndex, direction) {
+  const dataArray = getDataSourceState().dataArray;
+  const min = 0;
+  const max = dataArray.length - 1;
+  let i = activeRowIndex;
+  do {
+    i += direction;
+    const rowInfo = dataArray[i];
+    if (!rowInfo) {
+      return i < min ? min : max;
     }
-    return false;
-  }
-  if (sortInfo.field) {
-    if (sortInfo.field === col.field) {
-      return true;
+    if (!rowInfo.rowDisabled) {
+      return i;
     }
-  }
-  return false;
+  } while (i >= min && i <= max);
+  return clamp(i, min, max);
 }
-var InfiniteTableApiImpl = class {
-  constructor(context) {
-    this.hideFilterOperatorMenu = () => {
-      this.actions.filterOperatorMenuVisibleForColumnId = null;
-    };
-    this.getColumnOrder = () => {
-      return this.getComputed().computedColumnOrder;
-    };
-    this.getComputedColumnById = (columnId) => {
-      return this.getComputed().computedColumnsMap.get(columnId);
-    };
-    this.getVisibleColumnOrder = () => {
-      const order2 = this.getColumnOrder();
-      const visibleColumns = this.getComputed().computedVisibleColumnsMap;
-      return order2.filter((id) => visibleColumns.has(id));
-    };
-    this.persistEdit = async (arg) => {
-      arg = arg ?? {};
-      const { editingCell, editingValueRef } = this.getState();
-      if (!editingCell) {
-        return Promise.resolve(new Error("no edit in progress"));
-      }
-      await new Promise((resolve) => requestAnimationFrame(resolve));
-      const column = this.getComputed().computedColumnsMap.get(
-        editingCell.columnId
+function handleRowNavigation(options, event) {
+  const { getState, getDataSourceState, actions, api, dataSourceApi } = options;
+  const { key } = event;
+  const dataArray = getDataSourceState().dataArray;
+  const arrLength = dataArray.length;
+  const state = getState();
+  const { brain } = state;
+  let { activeRowIndex } = state;
+  if (activeRowIndex == null) {
+    return false;
+  }
+  const {
+    start: [startRow],
+    end: [endRow]
+  } = brain.getRenderRange();
+  const initialActiveRowIndex = activeRowIndex;
+  const renderRowCount = endRow - startRow - 1;
+  const min = 0;
+  const max = arrLength - 1;
+  const KeyToFunction = {
+    ArrowDown: () => {
+      activeRowIndex = getNextEnabledRowIndex(
+        getDataSourceState,
+        activeRowIndex,
+        1
       );
-      const value = arg.value ?? editingCell.value;
-      if (!editingCell.active && editingCell.waiting !== "persist") {
-        this.actions.editingCell = {
-          ...editingCell,
-          active: false,
-          waiting: "persist"
-        };
-      }
-      const params = {
-        ...getCellContext({
+    },
+    ArrowUp: () => {
+      activeRowIndex = getNextEnabledRowIndex(
+        getDataSourceState,
+        activeRowIndex,
+        -1
+      );
+    },
+    ArrowLeft: () => {
+      const rowInfo = dataArray[activeRowIndex];
+      if (brain.isHorizontalLayoutBrain) {
+        const rowsPerPage = brain.rowsPerPage;
+        if (activeRowIndex - rowsPerPage >= min) {
+          activeRowIndex = activeRowIndex - rowsPerPage;
+        } else {
+          KeyToFunction.ArrowUp();
+        }
+        return;
+      }
+      if (rowInfo && rowInfo.isGroupRow) {
+        return api.collapseGroupRow(rowInfo.groupKeys);
+      }
+      if (rowInfo && api.rowDetailApi.isRowDetailEnabledForRow(rowInfo.id)) {
+        return api.rowDetailApi.collapseRowDetail(rowInfo.id);
+      }
+      return false;
+    },
+    ArrowRight: () => {
+      const rowInfo = dataArray[activeRowIndex];
+      if (brain.isHorizontalLayoutBrain) {
+        const rowsPerPage = brain.rowsPerPage;
+        if (activeRowIndex + rowsPerPage <= max) {
+          activeRowIndex = activeRowIndex + rowsPerPage;
+        } else {
+          KeyToFunction.ArrowDown();
+        }
+        return;
+      }
+      if (rowInfo && rowInfo.isGroupRow) {
+        return api.expandGroupRow(rowInfo.groupKeys);
+      }
+      if (rowInfo && api.rowDetailApi.isRowDetailEnabledForRow(rowInfo.id)) {
+        return api.rowDetailApi.expandRowDetail(rowInfo.id);
+      }
+      return false;
+    },
+    Enter: () => {
+      const rowInfo = dataArray[activeRowIndex];
+      if (rowInfo && rowInfo.isGroupRow) {
+        return api.toggleGroupRow(rowInfo.groupKeys);
+      }
+      if (rowInfo && rowInfo.isTreeNode && rowInfo.isParentNode) {
+        return dataSourceApi.treeApi.toggleNode(rowInfo.nodePath);
+      }
+      const hasRowDetail = api.rowDetailApi.isRowDetailEnabledForRow(
+        rowInfo.id
+      );
+      if (hasRowDetail) {
+        return api.rowDetailApi.toggleRowDetail(rowInfo.id);
+      }
+      return false;
+    },
+    PageDown: () => {
+      activeRowIndex = Math.min(
+        activeRowIndex + renderRowCount,
+        arrLength - 1
+      );
+    },
+    PageUp: () => {
+      activeRowIndex = Math.max(activeRowIndex - renderRowCount, min);
+    },
+    End: () => {
+      activeRowIndex = max;
+    },
+    Home: () => {
+      activeRowIndex = min;
+    }
+  };
+  const Fn = KeyToFunction[key];
+  if (!Fn) {
+    return false;
+  }
+  Fn();
+  if (initialActiveRowIndex !== activeRowIndex) {
+    actions.activeRowIndex = activeRowIndex;
+    return true;
+  }
+  return false;
+}
+function computeNextActiveCellIndex(options, event) {
+  const {
+    api,
+    getState,
+    getComputed,
+    getDataSourceState,
+    dataSourceApi
+  } = options;
+  const { key, shiftKey } = event;
+  const dataArray = getDataSourceState().dataArray;
+  const state = getState();
+  const { activeCellIndex, brain } = state;
+  if (!activeCellIndex) {
+    return false;
+  }
+  let [rowIndex, colIndex] = activeCellIndex;
+  const {
+    start: [startRow, startCol],
+    end: [endRow, endCol]
+  } = brain.getRenderRange();
+  const renderRowCount = endRow - startRow - 1;
+  const renderColCount = endCol - startCol - 1;
+  const maxRow = getDataSourceState().dataArray.length - 1;
+  const maxCol = getComputed().computedVisibleColumns.length - 1;
+  const minRow = 0;
+  const minCol = 0;
+  rowIndex = clamp(rowIndex, 0, maxRow);
+  colIndex = clamp(colIndex, 0, maxCol);
+  const KeyToFunction = {
+    ArrowDown: () => {
+      rowIndex = clamp(rowIndex + 1, minRow, maxRow);
+    },
+    ArrowUp: () => {
+      rowIndex = clamp(rowIndex - 1, minRow, maxRow);
+    },
+    ArrowLeft: () => {
+      if (colIndex === minCol) {
+        if (rowIndex !== minRow) {
+          colIndex = maxCol;
+        }
+        if (brain.isHorizontalLayoutBrain) {
+          const rowsPerPage = brain.rowsPerPage;
+          if (rowIndex - rowsPerPage >= minRow) {
+            rowIndex = rowIndex - rowsPerPage;
+          } else {
+            KeyToFunction.ArrowUp();
+          }
+        } else {
+          KeyToFunction.ArrowUp();
+        }
+      } else {
+        colIndex = clamp(colIndex - 1, minCol, maxCol);
+      }
+    },
+    ArrowRight: () => {
+      if (colIndex === maxCol) {
+        if (rowIndex !== maxRow) {
+          colIndex = minCol;
+        }
+        if (brain.isHorizontalLayoutBrain) {
+          const rowsPerPage = brain.rowsPerPage;
+          if (rowIndex + rowsPerPage <= maxRow) {
+            rowIndex = rowIndex + rowsPerPage;
+          } else {
+            KeyToFunction.ArrowDown();
+          }
+        } else {
+          KeyToFunction.ArrowDown();
+        }
+      } else {
+        colIndex = clamp(colIndex + 1, minCol, maxCol);
+      }
+    },
+    Enter: () => {
+      const rowInfo = dataArray[rowIndex];
+      if (rowInfo && rowInfo.isGroupRow) {
+        return api.toggleGroupRow(rowInfo.groupKeys);
+      }
+      if (rowInfo && rowInfo.isTreeNode && rowInfo.isParentNode) {
+        return dataSourceApi.treeApi.toggleNode(rowInfo.nodePath);
+      }
+      if (rowInfo && api.rowDetailApi.isRowDetailEnabledForRow(rowInfo.id)) {
+        return api.rowDetailApi.toggleRowDetail(rowInfo.id);
+      }
+      return false;
+    },
+    PageDown: () => {
+      if (!shiftKey) {
+        rowIndex = Math.min(rowIndex + renderRowCount, maxRow);
+      } else {
+        colIndex = Math.min(colIndex + renderColCount, maxCol);
+      }
+    },
+    PageUp: () => {
+      if (!shiftKey) {
+        rowIndex = Math.max(rowIndex - renderRowCount, minRow);
+      } else {
+        colIndex = Math.max(colIndex - renderColCount, minCol);
+      }
+    },
+    End: () => {
+      if (!shiftKey) {
+        rowIndex = maxRow;
+      } else {
+        colIndex = maxCol;
+      }
+    },
+    Home: () => {
+      if (!shiftKey) {
+        rowIndex = minRow;
+      } else {
+        colIndex = minCol;
+      }
+    }
+  };
+  const Fn = KeyToFunction[key];
+  if (!Fn) {
+    return false;
+  }
+  Fn();
+  return [rowIndex, colIndex];
+}
+function handleCellNavigation(options, event) {
+  const result = computeNextActiveCellIndex(
+    options,
+    event
+  );
+  if (result) {
+    options.actions.activeCellIndex = result;
+    return true;
+  }
+  return false;
+}
+var validKeys = {
+  ArrowUp: true,
+  ArrowDown: true,
+  ArrowLeft: true,
+  ArrowRight: true,
+  PageUp: true,
+  PageDown: true,
+  Home: true,
+  End: true,
+  Enter: true,
+  " ": true
+};
+function handleKeyboardNavigation(options, event) {
+  const { key } = event;
+  const { getState } = options;
+  const state = getState();
+  const {
+    activeRowIndex,
+    activeCellIndex,
+    keyboardNavigation,
+    cellContextMenuVisibleFor,
+    contextMenuVisibleFor
+  } = state;
+  if (cellContextMenuVisibleFor || contextMenuVisibleFor) {
+    return false;
+  }
+  if (!validKeys[key]) {
+    return false;
+  }
+  if (activeRowIndex != null && keyboardNavigation === "row") {
+    return handleRowNavigation(options, event);
+  }
+  if (activeCellIndex != null && keyboardNavigation === "cell") {
+    return handleCellNavigation(options, event);
+  }
+  return false;
+}
+
+// src/components/InfiniteTable/api/getKeyboardNavigationApi.ts
+var KeyboardNavigationApi = class {
+  constructor(param) {
+    this.param = param;
+  }
+  setKeyboardNavigation(keyboardNavigation) {
+    this.param.actions.keyboardNavigation = keyboardNavigation;
+  }
+  setActiveCellIndex(activeCellIndex) {
+    this.param.actions.activeCellIndex = activeCellIndex;
+  }
+  setActiveRowIndex(activeRowIndex) {
+    this.param.actions.activeRowIndex = activeRowIndex;
+  }
+  gotoRowWithDirection(direction) {
+    const { getDataSourceState, getState } = this.param;
+    const { activeRowIndex, keyboardNavigation } = getState();
+    if (keyboardNavigation !== "row") {
+      console.error("Keyboard navigation is not enabled for rows");
+      return false;
+    }
+    if (activeRowIndex == null) {
+      return false;
+    }
+    const newActiveRowIndex = getNextEnabledRowIndex(
+      getDataSourceState,
+      activeRowIndex,
+      direction
+    );
+    if (newActiveRowIndex !== activeRowIndex) {
+      this.param.actions.activeRowIndex = newActiveRowIndex;
+      return newActiveRowIndex;
+    }
+    return false;
+  }
+  gotoRow(direction) {
+    return this.gotoRowWithDirection(direction);
+  }
+  gotoNextRow() {
+    return this.gotoRow(1);
+  }
+  gotoPreviousRow() {
+    return this.gotoRow(-1);
+  }
+  gotoCell(config) {
+    const { direction } = config;
+    const key = direction == "top" ? "ArrowUp" : direction == "bottom" ? "ArrowDown" : direction == "left" ? "ArrowLeft" : "ArrowRight";
+    const activeCellIndex = computeNextActiveCellIndex(this.param, {
+      key,
+      shiftKey: false
+    });
+    if (activeCellIndex === false) {
+      return false;
+    }
+    this.param.actions.activeCellIndex = activeCellIndex;
+    return activeCellIndex;
+  }
+};
+function getKeyboardNavigationApi(param) {
+  return new KeyboardNavigationApi(param);
+}
+
+// src/components/InfiniteTable/api/getImperativeApi.ts
+function isSortInfoForColumn(sortInfo, col) {
+  if (sortInfo.id) {
+    if (sortInfo.id === col.id) {
+      return true;
+    }
+    return false;
+  }
+  if (sortInfo.field) {
+    if (sortInfo.field === col.field) {
+      return true;
+    }
+  }
+  return false;
+}
+var InfiniteTableApiImpl = class {
+  constructor(context) {
+    this.hideFilterOperatorMenu = () => {
+      this.actions.filterOperatorMenuVisibleForColumnId = null;
+    };
+    this.getColumnOrder = () => {
+      return this.getComputed().computedColumnOrder;
+    };
+    this.getComputedColumnById = (columnId) => {
+      return this.getComputed().computedColumnsMap.get(columnId);
+    };
+    this.getVisibleColumnOrder = () => {
+      const order2 = this.getColumnOrder();
+      const visibleColumns = this.getComputed().computedVisibleColumnsMap;
+      return order2.filter((id) => visibleColumns.has(id));
+    };
+    this.persistEdit = async (arg) => {
+      arg = arg ?? {};
+      const { editingCell, editingValueRef } = this.getState();
+      if (!editingCell) {
+        return Promise.resolve(new Error("no edit in progress"));
+      }
+      await new Promise((resolve) => requestAnimationFrame(resolve));
+      const column = this.getComputed().computedColumnsMap.get(
+        editingCell.columnId
+      );
+      const value = arg.value ?? editingCell.value;
+      if (!editingCell.active && editingCell.waiting !== "persist") {
+        this.actions.editingCell = {
+          ...editingCell,
+          active: false,
+          waiting: "persist"
+        };
+      }
+      const params = {
+        ...getCellContext({
           rowIndex: editingCell.rowIndex,
           columnId: editingCell.columnId,
           ...this.context,
@@ -19814,6 +20368,14 @@ var InfiniteTableApiImpl = class {
       dataSourceActions: context.dataSourceActions,
       getDataSourceState: context.getDataSourceState
     });
+    this.keyboardNavigationApi = getKeyboardNavigationApi({
+      getState: context.getState,
+      getDataSourceState: context.getDataSourceState,
+      actions: context.actions,
+      getComputed: context.getComputed,
+      api: this,
+      dataSourceApi: context.dataSourceApi
+    });
     this.rowDetailApi = getRowDetailApi({
       getState: context.getState,
       actions: context.actions,
@@ -21286,6 +21848,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 +23593,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "6.1.0"
+      version: "6.1.1"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -23134,431 +23701,130 @@ function onCellDoubleClick(context, event) {
   };
   if (onCellDoubleClick2) {
     const result = onCellDoubleClick2(context, event);
-    if (result && typeof result === "object") {
-      dblClickResult = { ...dblClickResult, ...result };
-    }
-  }
-  if (dblClickResult.preventEdit) {
-    return;
-  }
-  const computed = context.getComputed();
-  const column = computed.computedVisibleColumns[context.colIndex];
-  context.api.startEdit({
-    rowIndex: context.rowIndex,
-    columnId: column.id
-  });
-}
-function updateCellSelectionOnCellClick(context, event) {
-  const {
-    getDataSourceState,
-    getState,
-    getComputed,
-    rowIndex,
-    colIndex,
-    dataSourceActions
-  } = context;
-  const dataSourceState = getDataSourceState();
-  const { selectionMode, cellSelection: existingCellSelection } = dataSourceState;
-  if (!existingCellSelection) {
-    return;
-  }
-  if (selectionMode !== "multi-cell") {
-    return;
-  }
-  const { multiCellSelector, computedVisibleColumns } = getComputed();
-  const { brain } = getState();
-  const { rowsPerPage } = brain;
-  const columnsPerSet = computedVisibleColumns.length;
-  const cellSelection = new CellSelectionState(existingCellSelection);
-  multiCellSelector.cellSelectionState = cellSelection;
-  const position2 = {
-    rowIndex,
-    colIndex
-  };
-  if (event.metaKey || event.ctrlKey) {
-    multiCellSelector.singleAddClick(position2);
-  } else if (event.shiftKey) {
-    const horizontalLayout = !!getState().wrapRowsHorizontally;
-    multiCellSelector.multiSelectClick(
-      position2,
-      horizontalLayout ? {
-        horizontalLayout,
-        rowsPerPage,
-        columnsPerSet
-      } : {
-        horizontalLayout
-      }
-    );
-  } else {
-    multiCellSelector.resetClick(position2);
-  }
-  dataSourceActions.cellSelection = cellSelection;
-}
-function updateRowSelectionOnCellClick(context, event) {
-  const {
-    rowIndex,
-    getDataSourceState,
-    getComputed,
-    dataSourceActions,
-    api,
-    cloneRowSelection: cloneRowSelection2
-  } = context;
-  const { multiRowSelector, renderSelectionCheckBox } = getComputed();
-  const dataSourceState = getDataSourceState();
-  const { selectionMode, groupBy, dataArray, isTree } = dataSourceState;
-  if (groupBy.length) {
-    return false;
-  }
-  if (isTree) {
-    return false;
-  }
-  const rowInfo = dataArray[rowIndex];
-  if (rowInfo?.rowDisabled) {
-    return false;
-  }
-  if (selectionMode === "multi-row") {
-    if (renderSelectionCheckBox && !event.key) {
-      return false;
-    }
-    let { rowSelection: rowSelectionState } = dataSourceState;
-    rowSelectionState = cloneRowSelection2(
-      rowSelectionState
-    );
-    multiRowSelector.rowSelectionState = rowSelectionState;
-    if (rowSelectionState && typeof rowSelectionState === "object") {
-      if (event.shiftKey) {
-        multiRowSelector.multiSelectClick(rowIndex);
-      } else if (event.metaKey || event.ctrlKey) {
-        multiRowSelector.singleAddClick(rowIndex);
-      } else {
-        multiRowSelector.resetClick(rowIndex);
-      }
-      dataSourceActions.rowSelection = rowSelectionState;
-      return true;
-    }
-  } else if (selectionMode === "single-row") {
-    const rowInfo2 = dataArray[rowIndex];
-    const id = rowInfo2.id;
-    if (event.metaKey || event.ctrlKey) {
-      api.rowSelectionApi.toggleRowSelection(id);
-    } else {
-      api.rowSelectionApi.selectRow(id);
-    }
-  }
-  return false;
-}
-
-// src/components/InfiniteTable/eventHandlers/onCellMouseDown.ts
-function onCellMouseDown(context, event) {
-  if (event.detail === 2) {
-    return;
-  }
-  updateCellSelectionOnCellMouseDown(context);
-}
-function updateCellSelectionOnCellMouseDown(_context) {
-}
-
-// src/components/utils/clamp.ts
-function clamp(value, min, max) {
-  return Math.min(Math.max(value, min), max);
-}
-
-// src/components/InfiniteTable/eventHandlers/keyboardNavigation.ts
-function getNextEnabledRowIndex(getDataSourceState, activeRowIndex, direction) {
-  const dataArray = getDataSourceState().dataArray;
-  const min = 0;
-  const max = dataArray.length - 1;
-  let i = activeRowIndex;
-  do {
-    i += direction;
-    const rowInfo = dataArray[i];
-    if (!rowInfo) {
-      return i < min ? min : max;
-    }
-    if (!rowInfo.rowDisabled) {
-      return i;
-    }
-  } while (i >= min && i <= max);
-  return clamp(i, min, max);
-}
-function handleRowNavigation(options, event) {
-  const { getState, getDataSourceState, actions, api, dataSourceApi } = options;
-  const { key } = event;
-  const dataArray = getDataSourceState().dataArray;
-  const arrLength = dataArray.length;
-  const state = getState();
-  const { brain } = state;
-  let { activeRowIndex } = state;
-  if (activeRowIndex == null) {
-    return false;
-  }
-  const {
-    start: [startRow],
-    end: [endRow]
-  } = brain.getRenderRange();
-  const initialActiveRowIndex = activeRowIndex;
-  const renderRowCount = endRow - startRow - 1;
-  const min = 0;
-  const max = arrLength - 1;
-  const KeyToFunction = {
-    ArrowDown: () => {
-      activeRowIndex = getNextEnabledRowIndex(
-        getDataSourceState,
-        activeRowIndex,
-        1
-      );
-    },
-    ArrowUp: () => {
-      activeRowIndex = getNextEnabledRowIndex(
-        getDataSourceState,
-        activeRowIndex,
-        -1
-      );
-    },
-    ArrowLeft: () => {
-      const rowInfo = dataArray[activeRowIndex];
-      if (brain.isHorizontalLayoutBrain) {
-        const rowsPerPage = brain.rowsPerPage;
-        if (activeRowIndex - rowsPerPage >= min) {
-          activeRowIndex = activeRowIndex - rowsPerPage;
-        } else {
-          KeyToFunction.ArrowUp();
-        }
-        return;
-      }
-      if (rowInfo && rowInfo.isGroupRow) {
-        return api.collapseGroupRow(rowInfo.groupKeys);
-      }
-      if (rowInfo && api.rowDetailApi.isRowDetailEnabledForRow(rowInfo.id)) {
-        return api.rowDetailApi.collapseRowDetail(rowInfo.id);
-      }
-      return false;
-    },
-    ArrowRight: () => {
-      const rowInfo = dataArray[activeRowIndex];
-      if (brain.isHorizontalLayoutBrain) {
-        const rowsPerPage = brain.rowsPerPage;
-        if (activeRowIndex + rowsPerPage <= max) {
-          activeRowIndex = activeRowIndex + rowsPerPage;
-        } else {
-          KeyToFunction.ArrowDown();
-        }
-        return;
-      }
-      if (rowInfo && rowInfo.isGroupRow) {
-        return api.expandGroupRow(rowInfo.groupKeys);
-      }
-      if (rowInfo && api.rowDetailApi.isRowDetailEnabledForRow(rowInfo.id)) {
-        return api.rowDetailApi.expandRowDetail(rowInfo.id);
-      }
-      return false;
-    },
-    Enter: () => {
-      const rowInfo = dataArray[activeRowIndex];
-      if (rowInfo && rowInfo.isGroupRow) {
-        return api.toggleGroupRow(rowInfo.groupKeys);
-      }
-      if (rowInfo && rowInfo.isTreeNode && rowInfo.isParentNode) {
-        return dataSourceApi.treeApi.toggleNode(rowInfo.nodePath);
-      }
-      const hasRowDetail = api.rowDetailApi.isRowDetailEnabledForRow(
-        rowInfo.id
-      );
-      if (hasRowDetail) {
-        return api.rowDetailApi.toggleRowDetail(rowInfo.id);
-      }
-      return false;
-    },
-    PageDown: () => {
-      activeRowIndex = Math.min(
-        activeRowIndex + renderRowCount,
-        arrLength - 1
-      );
-    },
-    PageUp: () => {
-      activeRowIndex = Math.max(activeRowIndex - renderRowCount, min);
-    },
-    End: () => {
-      activeRowIndex = max;
-    },
-    Home: () => {
-      activeRowIndex = min;
-    }
-  };
-  const Fn = KeyToFunction[key];
-  if (!Fn) {
-    return false;
+    if (result && typeof result === "object") {
+      dblClickResult = { ...dblClickResult, ...result };
+    }
   }
-  Fn();
-  if (initialActiveRowIndex !== activeRowIndex) {
-    actions.activeRowIndex = activeRowIndex;
-    return true;
+  if (dblClickResult.preventEdit) {
+    return;
   }
-  return false;
+  const computed = context.getComputed();
+  const column = computed.computedVisibleColumns[context.colIndex];
+  context.api.startEdit({
+    rowIndex: context.rowIndex,
+    columnId: column.id
+  });
 }
-function handleCellNavigation(options, event) {
+function updateCellSelectionOnCellClick(context, event) {
   const {
-    api,
+    getDataSourceState,
     getState,
     getComputed,
-    getDataSourceState,
-    dataSourceApi,
-    actions
-  } = options;
-  const { key, shiftKey } = event;
-  const dataArray = getDataSourceState().dataArray;
-  const state = getState();
-  const { activeCellIndex, brain } = state;
-  if (!activeCellIndex) {
-    return false;
+    rowIndex,
+    colIndex,
+    dataSourceActions
+  } = context;
+  const dataSourceState = getDataSourceState();
+  const { selectionMode, cellSelection: existingCellSelection } = dataSourceState;
+  if (!existingCellSelection) {
+    return;
   }
-  let [rowIndex, colIndex] = activeCellIndex;
-  const {
-    start: [startRow, startCol],
-    end: [endRow, endCol]
-  } = brain.getRenderRange();
-  const renderRowCount = endRow - startRow - 1;
-  const renderColCount = endCol - startCol - 1;
-  const maxRow = getDataSourceState().dataArray.length - 1;
-  const maxCol = getComputed().computedVisibleColumns.length - 1;
-  const minRow = 0;
-  const minCol = 0;
-  rowIndex = clamp(rowIndex, 0, maxRow);
-  colIndex = clamp(colIndex, 0, maxCol);
-  actions.activeCellIndex = [rowIndex, colIndex];
-  const KeyToFunction = {
-    ArrowDown: () => {
-      rowIndex = clamp(rowIndex + 1, minRow, maxRow);
-    },
-    ArrowUp: () => {
-      rowIndex = clamp(rowIndex - 1, minRow, maxRow);
-    },
-    ArrowLeft: () => {
-      if (colIndex === minCol) {
-        if (rowIndex !== minRow) {
-          colIndex = maxCol;
-        }
-        if (brain.isHorizontalLayoutBrain) {
-          const rowsPerPage = brain.rowsPerPage;
-          if (rowIndex - rowsPerPage >= minRow) {
-            rowIndex = rowIndex - rowsPerPage;
-          } else {
-            KeyToFunction.ArrowUp();
-          }
-        } else {
-          KeyToFunction.ArrowUp();
-        }
-      } else {
-        colIndex = clamp(colIndex - 1, minCol, maxCol);
-      }
-    },
-    ArrowRight: () => {
-      if (colIndex === maxCol) {
-        if (rowIndex !== maxRow) {
-          colIndex = minCol;
-        }
-        if (brain.isHorizontalLayoutBrain) {
-          const rowsPerPage = brain.rowsPerPage;
-          if (rowIndex + rowsPerPage <= maxRow) {
-            rowIndex = rowIndex + rowsPerPage;
-          } else {
-            KeyToFunction.ArrowDown();
-          }
-        } else {
-          KeyToFunction.ArrowDown();
-        }
-      } else {
-        colIndex = clamp(colIndex + 1, minCol, maxCol);
-      }
-    },
-    Enter: () => {
-      const rowInfo = dataArray[rowIndex];
-      if (rowInfo && rowInfo.isGroupRow) {
-        return api.toggleGroupRow(rowInfo.groupKeys);
-      }
-      if (rowInfo && rowInfo.isTreeNode && rowInfo.isParentNode) {
-        return dataSourceApi.treeApi.toggleNode(rowInfo.nodePath);
-      }
-      if (rowInfo && api.rowDetailApi.isRowDetailEnabledForRow(rowInfo.id)) {
-        return api.rowDetailApi.toggleRowDetail(rowInfo.id);
-      }
-      return false;
-    },
-    PageDown: () => {
-      if (!shiftKey) {
-        rowIndex = Math.min(rowIndex + renderRowCount, maxRow);
-      } else {
-        colIndex = Math.min(colIndex + renderColCount, maxCol);
-      }
-    },
-    PageUp: () => {
-      if (!shiftKey) {
-        rowIndex = Math.max(rowIndex - renderRowCount, minRow);
-      } else {
-        colIndex = Math.max(colIndex - renderColCount, minCol);
-      }
-    },
-    End: () => {
-      if (!shiftKey) {
-        rowIndex = maxRow;
-      } else {
-        colIndex = maxCol;
-      }
-    },
-    Home: () => {
-      if (!shiftKey) {
-        rowIndex = minRow;
-      } else {
-        colIndex = minCol;
-      }
-    }
+  if (selectionMode !== "multi-cell") {
+    return;
+  }
+  const { multiCellSelector, computedVisibleColumns } = getComputed();
+  const { brain } = getState();
+  const { rowsPerPage } = brain;
+  const columnsPerSet = computedVisibleColumns.length;
+  const cellSelection = new CellSelectionState(existingCellSelection);
+  multiCellSelector.cellSelectionState = cellSelection;
+  const position2 = {
+    rowIndex,
+    colIndex
   };
-  const Fn = KeyToFunction[key];
-  if (!Fn) {
-    return false;
+  if (event.metaKey || event.ctrlKey) {
+    multiCellSelector.singleAddClick(position2);
+  } else if (event.shiftKey) {
+    const horizontalLayout = !!getState().wrapRowsHorizontally;
+    multiCellSelector.multiSelectClick(
+      position2,
+      horizontalLayout ? {
+        horizontalLayout,
+        rowsPerPage,
+        columnsPerSet
+      } : {
+        horizontalLayout
+      }
+    );
+  } else {
+    multiCellSelector.resetClick(position2);
   }
-  Fn();
-  actions.activeCellIndex = [rowIndex, colIndex];
-  return true;
+  dataSourceActions.cellSelection = cellSelection;
 }
-var validKeys = {
-  ArrowUp: true,
-  ArrowDown: true,
-  ArrowLeft: true,
-  ArrowRight: true,
-  PageUp: true,
-  PageDown: true,
-  Home: true,
-  End: true,
-  Enter: true,
-  " ": true
-};
-function handleKeyboardNavigation(options, event) {
-  const { key } = event;
-  const { getState } = options;
-  const state = getState();
+function updateRowSelectionOnCellClick(context, event) {
   const {
-    activeRowIndex,
-    activeCellIndex,
-    keyboardNavigation,
-    cellContextMenuVisibleFor,
-    contextMenuVisibleFor
-  } = state;
-  if (cellContextMenuVisibleFor || contextMenuVisibleFor) {
+    rowIndex,
+    getDataSourceState,
+    getComputed,
+    dataSourceActions,
+    api,
+    cloneRowSelection: cloneRowSelection2
+  } = context;
+  const { multiRowSelector, renderSelectionCheckBox } = getComputed();
+  const dataSourceState = getDataSourceState();
+  const { selectionMode, groupBy, dataArray, isTree } = dataSourceState;
+  if (groupBy.length) {
     return false;
   }
-  if (!validKeys[key]) {
+  if (isTree) {
     return false;
   }
-  if (activeRowIndex != null && keyboardNavigation === "row") {
-    return handleRowNavigation(options, event);
+  const rowInfo = dataArray[rowIndex];
+  if (rowInfo?.rowDisabled) {
+    return false;
   }
-  if (activeCellIndex != null && keyboardNavigation === "cell") {
-    return handleCellNavigation(options, event);
+  if (selectionMode === "multi-row") {
+    if (renderSelectionCheckBox && !event.key) {
+      return false;
+    }
+    let { rowSelection: rowSelectionState } = dataSourceState;
+    rowSelectionState = cloneRowSelection2(
+      rowSelectionState
+    );
+    multiRowSelector.rowSelectionState = rowSelectionState;
+    if (rowSelectionState && typeof rowSelectionState === "object") {
+      if (event.shiftKey) {
+        multiRowSelector.multiSelectClick(rowIndex);
+      } else if (event.metaKey || event.ctrlKey) {
+        multiRowSelector.singleAddClick(rowIndex);
+      } else {
+        multiRowSelector.resetClick(rowIndex);
+      }
+      dataSourceActions.rowSelection = rowSelectionState;
+      return true;
+    }
+  } else if (selectionMode === "single-row") {
+    const rowInfo2 = dataArray[rowIndex];
+    const id = rowInfo2.id;
+    if (event.metaKey || event.ctrlKey) {
+      api.rowSelectionApi.toggleRowSelection(id);
+    } else {
+      api.rowSelectionApi.selectRow(id);
+    }
   }
   return false;
 }
 
+// src/components/InfiniteTable/eventHandlers/onCellMouseDown.ts
+function onCellMouseDown(context, event) {
+  if (event.detail === 2) {
+    return;
+  }
+  updateCellSelectionOnCellMouseDown(context);
+}
+function updateCellSelectionOnCellMouseDown(_context) {
+}
+
 // src/components/InfiniteTable/eventHandlers/keyboardSelection.ts
 var validKeys2 = {
   Enter: true,
@@ -26996,7 +27262,8 @@ function InfiniteTableBody() {
     rowDetailRenderer,
     showHoverRows,
     wrapRowsHorizontally,
-    domProps
+    domProps,
+    domRef
   } = componentState;
   const LoadMaskCmp = components2?.LoadMask ?? LoadMask;
   const computed = getComputed();
@@ -27045,7 +27312,7 @@ function InfiniteTableBody() {
   const { renderCell, renderDetailRow } = useCellRendering({
     imperativeApi: api,
     getComputed,
-    domRef: componentState.domRef,
+    domRef,
     bodySize,
     computed
   });
@@ -27070,7 +27337,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));
 }