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

package/index.dev.js

@@ -143,7 +143,7 @@ function debounce(fn, { wait }) {
 }
 
 // src/components/InfiniteTable/index.tsx
-var React69 = __toESM(require("react"));
+var React70 = __toESM(require("react"));
 
 // src/utils/join.ts
 var join = (...args) => args.filter((x) => !!`${x}`).join(" ");
@@ -179,12 +179,15 @@ var DeepMap = class {
     this.revision = 0;
     this.emptyKey = Symbol("emptyKey");
     this.visit = (fn) => {
-      this.map.forEach((_, k) => this.visitKey(k, this.map, [], fn));
+      this.map.forEach((_, k) => this.visitKey(k, this.map, [], fn, false));
+    };
+    this.visitSome = (fn) => {
+      this.visitWithNext([], fn, true);
     };
     this.visitDepthFirst = (fn) => {
-      this.visitWithNext([], fn);
+      this.visitWithNext([], fn, false);
     };
-    this.visitWithNext = (parentKeys, fn, currentMap = this.map, depthLimit, skipSelfValue) => {
+    this.visitWithNext = (parentKeys, fn, earlyReturn, currentMap = this.map, depthLimit, skipSelfValue) => {
       if (!currentMap) {
         return;
       }
@@ -211,22 +214,33 @@ var DeepMap = class {
         let next = map2 ? () => this.visitWithNext(
           keys,
           fn,
+          earlyReturn,
           map2,
           depthLimit !== void 0 ? depthLimit - 1 : void 0
         ) : void 0;
         if (pair.hasOwnProperty("value")) {
-          fn(pair.value, keys, i, next, pair);
+          const res = fn(pair.value, keys, i, next, pair);
+          if (earlyReturn && res === true) {
+            return true;
+          }
           i++;
         } else {
           next?.();
         }
+        return;
       };
       if (hasEmptyKey) {
         iterator(void 0, this.emptyKey);
         allowEmptyKey = false;
         i = 0;
       }
-      currentMap.forEach(iterator);
+      for (const [key, pair] of currentMap) {
+        const res = iterator(pair, key);
+        if (earlyReturn && res === true) {
+          return res;
+        }
+      }
+      return;
     };
     this.fill(initial);
   }
@@ -314,6 +328,7 @@ var DeepMap = class {
       (_value, keys2, _i, _next, pair2) => {
         fn({ ...pair2, keys: keys2 });
       },
+      false,
       currentMap,
       depthLimit,
       excludeSelf
@@ -366,6 +381,7 @@ var DeepMap = class {
         fn(keys2, value);
         next?.();
       },
+      false,
       currentMap,
       depthLimit,
       excludeSelf
@@ -567,7 +583,7 @@ var DeepMap = class {
     }
     return false;
   }
-  visitKey(key, currentMap, parentKeys, fn) {
+  visitKey(key, currentMap, parentKeys, fn, earlyReturn) {
     const pair = currentMap.get(key);
     if (!pair) {
       return;
@@ -576,15 +592,23 @@ var DeepMap = class {
     const keys = key === this.emptyKey ? [] : [...parentKeys, key];
     const next = once(() => {
       if (map2) {
-        map2.forEach((_, k) => {
-          this.visitKey(k, map2, keys, fn);
-        });
+        for (const [k] of map2) {
+          const res = this.visitKey(k, map2, keys, fn, earlyReturn);
+          if (earlyReturn && res === true) {
+            return true;
+          }
+        }
       }
+      return false;
     });
     if (pair.hasOwnProperty("value")) {
-      fn(pair, keys, next);
+      const res = fn(pair, keys, next);
+      if (earlyReturn && res === true) {
+        return true;
+      }
     }
     next();
+    return;
   }
   getArray(fn) {
     const result = [];
@@ -598,6 +622,13 @@ var DeepMap = class {
     });
     return result;
   }
+  rawKeysAt(keys) {
+    const map2 = this.getMapAt(keys);
+    if (!map2) {
+      return [];
+    }
+    return [...map2.keys()];
+  }
   valuesAt(keys) {
     const map2 = this.getMapAt(keys);
     if (!map2) {
@@ -1185,7 +1216,7 @@ function useMasterDetailContext() {
 }
 
 // src/components/HeadlessTable/index.tsx
-var React13 = __toESM(require("react"));
+var React14 = __toESM(require("react"));
 var import_react10 = require("react");
 
 // src/components/VirtualList/SpacePlaceholder.tsx
@@ -1298,7 +1329,7 @@ var VirtualScrollContainer = React7.forwardRef(
 );
 
 // src/components/HeadlessTable/RawTable.tsx
-var React10 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 var import_react6 = require("react");
 
 // src/components/RawList/AvoidReactDiff.tsx
@@ -1547,29 +1578,6 @@ function setInfiniteScrollPosition(scrollPosition, node) {
   );
 }
 
-// src/components/HeadlessTable/ReactHeadlessTableRenderer.tsx
-var React9 = __toESM(require("react"));
-
-// src/utils/mathIntersection.ts
-function arrayIntersection(...arrays) {
-  if (!arrays.length) {
-    return [];
-  }
-  const map2 = /* @__PURE__ */ new Map();
-  arrays.forEach((arr) => {
-    for (let i = 0, len2 = arr.length; i < len2; i++) {
-      const item = arr[i];
-      const count = map2.get(item) ?? 0;
-      map2.set(item, count + 1);
-    }
-    return map2;
-  });
-  const len = arrays.length;
-  return arrays[0].filter((x) => {
-    return map2.get(x) === len;
-  });
-}
-
 // src/utils/raf.ts
 var raf = getGlobal().requestAnimationFrame || ((fn) => {
   return setTimeout(fn, 16);
@@ -2837,300 +2845,861 @@ var MatrixBrain = class extends Logger {
   }
 };
 
-// src/components/HeadlessTable/MappedCells.ts
-var MappedCells = class extends Logger {
-  constructor(opts) {
-    super(`MappedCells`);
-    this.withCellAdditionalInfo = false;
-    this.getElementFromListForColumn = (elementsOutsideItemRange, colIndex) => {
-      const { elementIndexToCell } = this;
-      const last = elementsOutsideItemRange.length - 1;
-      for (let i = last; i >= 0; i--) {
-        const elementIndex = elementsOutsideItemRange[i];
-        const cell = elementIndexToCell[elementIndex];
-        if (cell && cell[1] === colIndex) {
-          if (i === last) {
-            return elementsOutsideItemRange.pop();
-          }
-          elementsOutsideItemRange.splice(i, 1);
-          return elementIndex;
-        }
+// src/components/HeadlessTable/GridCellManager.ts
+var import_binary_search2 = __toESM(require_binary_search());
+
+// src/utils/setUtils.ts
+function setIntersection(...sets) {
+  if (!sets.length) {
+    return /* @__PURE__ */ new Set();
+  }
+  const [first, ...rest] = sets;
+  return new Set([...first].filter((x) => rest.every((set) => set.has(x))));
+}
+function setFilter(set, filter) {
+  const result = /* @__PURE__ */ new Set();
+  for (const x of set) {
+    if (filter(x)) {
+      result.add(x);
+    }
+  }
+  return result;
+}
+function setFind(set, find) {
+  for (const x of set) {
+    if (find(x)) {
+      return x;
+    }
+  }
+  return void 0;
+}
+
+// src/components/HeadlessTable/GridCellPoolForReact.tsx
+var React9 = __toESM(require("react"));
+var CELL_COUNT_BY_DEBUG_ID = /* @__PURE__ */ new Map();
+var emptyFn = () => {
+};
+var GridCellForReact = class {
+  constructor(debugId, cellInfo) {
+    this.element = null;
+    this.mountSubscription = buildSubscriptionCallback();
+    const count = CELL_COUNT_BY_DEBUG_ID.get(debugId) ?? 0;
+    const key = `${debugId}:GridCellReact:${count}`;
+    CELL_COUNT_BY_DEBUG_ID.set(debugId, count + 1);
+    this.debugId = key;
+    this.cellInfo = cellInfo;
+    this.updater = buildSubscriptionCallback();
+    this.node = /* @__PURE__ */ React9.createElement(AvoidReactDiff, { key, name: key, updater: this.updater });
+    this.ref = (htmlElement) => {
+      this.element = htmlElement;
+      if (htmlElement) {
+        this.mountSubscription(this);
+      }
+    };
+  }
+  onMount(callback) {
+    const off = this.mountSubscription.onChange((cell) => {
+      if (cell != null) {
+        callback(cell);
       }
-      return elementsOutsideItemRange.pop();
-    };
-    this.getElementFromListForRow = (elementsOutsideItemRange, _rowIndex) => {
-      return elementsOutsideItemRange.pop();
-    };
-    /**
-     * Retrieves the elements that contain rendered cells that are outside
-     * of the specified range
-     *
-     * @param start in [rowIndex, colIndex] format - represents the topmost-leftmost cell visible of the render range
-     * @param end in [rowIndex, colIndex] format - represents the bottom-right corner of the visible range. The end is not inclusive,
-     * so the last visible cell will be [rowIndex-1, colIndex-1]
-     *
-     * @returns an array of element indexes that are outside the specified range
-     */
-    this.getElementsOutsideRenderRange = (range) => {
+    });
+    return off;
+  }
+  destroy() {
+    this.mountSubscription.destroy();
+    this.updater.destroy();
+    this.ref = emptyFn;
+    this.element = null;
+    this.node = null;
+  }
+  getNode() {
+    return this.node;
+  }
+  update(content, additionalInfo) {
+    this.updater(content);
+    this.cellInfo = additionalInfo;
+  }
+  getAdditionalInfo() {
+    return this.cellInfo;
+  }
+  getElement() {
+    return this.element;
+  }
+};
+var _GridCellPoolForReact = class extends Logger {
+  constructor(debugId) {
+    super(`${debugId}:GridCellPoolForReact`);
+    this.debugId = debugId;
+    this.cellRemoveSubscription = buildSubscriptionCallback();
+    this.attachedCells = /* @__PURE__ */ new Set();
+    this.detachedCells = /* @__PURE__ */ new Set();
+    this.allCellsOrdered = /* @__PURE__ */ new Set();
+  }
+  destroy() {
+    this.reset();
+  }
+  onRemoveCell(callback) {
+    const off = this.cellRemoveSubscription.onChange((cell) => {
+      if (cell != null) {
+        callback(cell);
+      }
+    });
+    return off;
+  }
+  reset() {
+    this.attachedCells.clear();
+    this.detachedCells.clear();
+    this.allCellsOrdered.clear();
+    this.cellRemoveSubscription.destroy();
+  }
+  getAttachedCells() {
+    return this.attachedCells;
+  }
+  getDetachedCells() {
+    return this.detachedCells;
+  }
+  getAllCells() {
+    return this.allCellsOrdered;
+  }
+  /**
+   * This should be the only place where we create a new cell.
+   */
+  createCell() {
+    const cell = new GridCellForReact(this.debugId);
+    this.detachedCells.add(cell);
+    this.allCellsOrdered.add(cell);
+    return cell;
+  }
+  /**
+   * This really removes the cell, not only makes it detached,
+   * but removes it from the render tree and from the pool.
+   */
+  removeCell(cell) {
+    if (false) {
+      if (!this.detachedCells.has(cell)) {
+        this.error(
+          `You want to remove the cell, but it's not in the detached cells set!`
+        );
+      }
+    }
+    this.detachedCells.delete(cell);
+    this.attachedCells.delete(cell);
+    this.allCellsOrdered.delete(cell);
+    cell.destroy();
+    this.cellRemoveSubscription(cell);
+  }
+  /**
+   * This attaches a cell to the table.
+   * If no cell is provided, it will get a detached one from the pool
+   * and move that cell to the attached set.
+   * If a cell is provided, it's moved to the attached set as well.
+   */
+  attachCell(cell) {
+    if (!cell) {
+      cell = this.getDetachedCell();
+    }
+    this.detachedCells.delete(cell);
+    this.attachedCells.add(cell);
+    return cell;
+  }
+  detachCell(cell) {
+    this.attachedCells.delete(cell);
+    this.detachedCells.add(cell);
+  }
+  /**
+   * This gets a detached cell from the pool.
+   * If no detached cell is available, it will create a new one and return that.
+   */
+  getDetachedCell() {
+    const { detachedCells } = this;
+    let cell = detachedCells.values().next().value;
+    if (!cell) {
+      this.poolSize += _GridCellPoolForReact.POOL_SIZE_INCREMENT;
+    }
+    cell = detachedCells.values().next().value;
+    if (!cell) {
+      this.error("No cells available in the pool!");
+    }
+    return cell;
+  }
+  get attachedSize() {
+    return this.attachedCells.size;
+  }
+  get detachedSize() {
+    return this.detachedCells.size;
+  }
+  get poolSize() {
+    return this.allCellsOrdered.size;
+  }
+  set poolSize(value) {
+    value = Math.ceil(value / _GridCellPoolForReact.POOL_SIZE_INCREMENT) * _GridCellPoolForReact.POOL_SIZE_INCREMENT;
+    const currentSize = this.poolSize;
+    if (value === currentSize) {
+      return;
+    }
+    const { detachedCells } = this;
+    let diff = currentSize - value;
+    if (diff > 0) {
+      if (diff > detachedCells.size) {
+        diff = detachedCells.size;
+        this.debug("Trying to destroy more cells than are currently detached!");
+      }
+      const iterator = detachedCells.values();
+      while (diff > 0) {
+        const cell = iterator.next().value;
+        this.removeCell(cell);
+        diff--;
+      }
+    } else {
+      diff = -diff;
+      while (diff > 0) {
+        this.createCell();
+        diff--;
+      }
+    }
+  }
+};
+var GridCellPoolForReact = _GridCellPoolForReact;
+// we'll grow the pool by this amount at a time
+GridCellPoolForReact.POOL_SIZE_INCREMENT = 5;
+
+// src/components/HeadlessTable/GridCellManager.ts
+var GridCellManager = class extends Logger {
+  constructor(debugId) {
+    super(`${debugId}:GridCellManager`);
+    this.matrix = new DeepMap();
+    this.matrixWithHistory = new DeepMap();
+    this.cellToMatrixPosition = /* @__PURE__ */ new WeakMap();
+    this.getCellsOutsideRenderRange = (range) => {
       const { start, end } = range;
       const [startRow, startCol] = start;
       const [endRow, endCol] = end;
-      const result = [];
-      for (let elementIndex = 0, len = this.elementIndexToCell.length; elementIndex < len; elementIndex++) {
-        const entry = this.elementIndexToCell[elementIndex];
-        if (!entry) {
-          continue;
+      const cells = /* @__PURE__ */ new Set();
+      this.matrix.visit(({ value: cell }, cellPos) => {
+        if (!cell) {
+          return;
         }
-        const [rowIndex, colIndex] = entry;
+        const [rowIndex, colIndex] = cellPos;
         const rowBefore = rowIndex < startRow;
         const rowAfter = rowIndex >= endRow;
         const colBefore = colIndex < startCol;
         const colAfter = colIndex >= endCol;
         const outsideRenderRange = rowBefore || rowAfter || colBefore || colAfter;
         if (outsideRenderRange) {
-          result.push(elementIndex);
+          cells.add(cell);
         }
-      }
-      return result;
-    };
-    this.isCellRendered = (rowIndex, columnIndex) => {
-      return this.cellToElementIndex.has([rowIndex, columnIndex]);
-    };
-    this.getCellAdditionalInfo = (rowIndex, columnIndex) => {
-      return this.cellAdditionalInfo.get([rowIndex, columnIndex]);
-    };
-    this.isElementRendered = (elementIndex) => {
-      return !!this.elementIndexToCell[elementIndex];
-    };
-    this.getElementsForRowIndex = (rowIndex) => {
-      return this.cellToElementIndex.getValuesStartingWith([rowIndex]);
-    };
-    this.getAdditionalInfoForRowIndex = (rowIndex) => {
-      return this.cellAdditionalInfo.getValuesStartingWith([rowIndex]);
-    };
-    this.getRenderedNodeAtElement = (elementIndex) => {
-      return this.renderedElements[elementIndex] || null;
-    };
-    this.getRenderedCellAtElement = (elementIndex) => {
-      const cell = this.elementIndexToCell[elementIndex];
-      return cell || null;
-    };
-    this.getRenderedNodeForCell = (rowIndex, columnIndex) => {
-      const elementIndex = this.cellToElementIndex.get([rowIndex, columnIndex]);
-      return elementIndex != null ? this.renderedElements[elementIndex] || null : null;
-    };
-    this.getElementIndexForCell = (rowIndex, columnIndex) => {
-      const elementIndex = this.cellToElementIndex.get([rowIndex, columnIndex]);
-      return elementIndex ?? null;
+      });
+      return cells;
     };
-    this.renderCellAtElement = (rowIndex, colIndex, elementIndex, renderNode, cellAdditionalInfo) => {
-      if (false) {
-        this.debug(
-          `Render cell ${rowIndex},${colIndex} at element ${elementIndex}`
-        );
-      }
-      const key = [rowIndex, colIndex];
-      const currentCell = this.elementIndexToCell[elementIndex];
-      if (currentCell) {
-        const currentCellKey = [currentCell[0], currentCell[1]];
-        this.cellToElementIndex.delete(currentCellKey);
-        if (this.withCellAdditionalInfo) {
-          this.cellAdditionalInfo.delete(currentCellKey);
-        }
-      }
-      if (renderNode) {
-        this.renderedElements[elementIndex] = renderNode;
+    this.debugId = debugId;
+    this.pool = new GridCellPoolForReact(debugId);
+    this.offRemoveCell = this.pool.onRemoveCell(
+      (cell) => this.onRemoveCell(cell)
+    );
+  }
+  onRemoveCell(cell) {
+    const cellPos = this.cellToMatrixPosition.get(cell);
+    this.cellToMatrixPosition.delete(cell);
+    if (!cellPos) {
+      return;
+    }
+    this.matrix.delete(cellPos);
+    let cellsAtPos = this.matrixWithHistory.get(cellPos);
+    if (cellsAtPos) {
+      cellsAtPos.delete(cell);
+    }
+  }
+  set poolSize(cellCount) {
+    this.pool.poolSize = cellCount;
+  }
+  get poolSize() {
+    return this.pool.poolSize;
+  }
+  getDetachedCell() {
+    console.warn("getting detached cell");
+    return this.pool.getDetachedCell();
+  }
+  setCellPositionInMatrix(cell, cellPos) {
+    if (cellPos == null) {
+      const currentCellPos = this.cellToMatrixPosition.get(cell);
+      if (currentCellPos) {
+        this.matrix.delete(currentCellPos);
       }
-      this.elementIndexToCell[elementIndex] = [rowIndex, colIndex];
-      this.cellToElementIndex.set(key, elementIndex);
-      if (this.withCellAdditionalInfo && cellAdditionalInfo !== void 0) {
-        this.cellAdditionalInfo.set(key, cellAdditionalInfo);
+    } 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);
       }
-    };
-    this.discardCell = (rowIndex, colIndex) => {
-      const key = [rowIndex, colIndex];
-      const elementIndex = this.cellToElementIndex.get(key);
-      if (elementIndex != null) {
-        this.renderedElements[elementIndex] = null;
-        this.elementIndexToCell[elementIndex] = null;
-        this.cellToElementIndex.delete(key);
-        if (this.withCellAdditionalInfo) {
-          this.cellAdditionalInfo.delete(key);
+      if (prevCellPos && !samePos) {
+        this.matrix.delete(prevCellPos);
+        let cellsAtPrevPos = this.matrixWithHistory.get(prevCellPos);
+        if (cellsAtPrevPos) {
+          cellsAtPrevPos.delete(cell);
         }
       }
-    };
-    this.discardElement = (elementIndex) => {
-      const cell = this.elementIndexToCell[elementIndex];
-      if (cell) {
-        const key = [cell[0], cell[1]];
-        this.renderedElements[elementIndex] = null;
-        this.elementIndexToCell[elementIndex] = null;
-        this.cellToElementIndex.delete(key);
-        if (this.withCellAdditionalInfo) {
-          this.cellAdditionalInfo.delete(key);
-        }
-        return cell;
+    }
+  }
+  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);
+    }
+    this.pool.attachCell(cell);
+    this.setCellPositionInMatrix(cell, cellPos);
+    cell.update(node, additionalInfo);
+    return cell;
+  }
+  getCellPosition(cell) {
+    const cellPos = this.cellToMatrixPosition.get(cell);
+    if (!cellPos) {
       return null;
-    };
-    this.discardElementsStartingWith = (elIndex, callback) => {
-      let discardedCell = null;
-      let oneDiscarded = false;
-      if (elIndex < this.elementIndexToCell.length) {
-        for (let elementIndex = elIndex, len = this.elementIndexToCell.length; elementIndex < len; elementIndex++) {
-          discardedCell = this.discardElement(elementIndex);
-          if (discardedCell) {
-            oneDiscarded = true;
+    }
+    const cellAtPos = this.getCellAt(cellPos);
+    if (cellAtPos != cell) {
+      return null;
+    }
+    return cellPos;
+  }
+  getCellAt(cellPos) {
+    return this.matrix.get(cellPos);
+  }
+  /**
+   * This gets a cell for a given position.
+   * If there's already a cell currently attached at that position, it will be returned.
+   *
+   * Otherwise, we try to return the most optimal cell to use for that position.
+   * If the optimise parameter is set to 'row', we will try to return a detached cell
+   * that was last rendered in that row.
+   *
+   * If the optimise parameter is set to 'column', we will try to return a detached cell
+   * that was last rendered in that column.
+   *
+   * @param cellPos [rowIndex, colIndex]
+   * @param optimise 'row' | 'column'
+   */
+  getCellFor(cellPos, optimise) {
+    let cell = this.getCellAt(cellPos);
+    if (cell) {
+      return cell;
+    }
+    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;
           }
-          if (callback) {
-            callback(elementIndex, discardedCell);
+        }
+        next?.();
+        return false;
+      });
+    }
+    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;
           }
         }
-        this.elementIndexToCell.length = elIndex;
-        this.renderedElements.length = elIndex;
+        next?.();
+        return false;
+      });
+    }
+    return cell ?? this.getDetachedCell();
+  }
+  isCellAttached(cell) {
+    return this.getCellPosition(cell) !== null;
+  }
+  isCellAttachedAt(cellPos) {
+    const cell = this.getCellAt(cellPos);
+    if (!cell) {
+      return false;
+    }
+    return this.isCellAttached(cell);
+  }
+  getMatrix() {
+    const lastRow = this.getRowsWithCells().pop() ?? -1;
+    const lastColumn = this.getColumnsWithCells().pop() ?? -1;
+    const matrix = Array.from({ length: lastRow + 1 }, (_, rowIndex) => {
+      const row = Array.from({ length: lastColumn + 1 }, (_2, colIndex) => {
+        const cellPos = [rowIndex, colIndex];
+        const cell = this.getCellAt(cellPos);
+        return cell ? cell.getNode() : null;
+      });
+      return row;
+    });
+    return matrix;
+  }
+  getAllCells() {
+    return [...this.pool.getAllCells()];
+  }
+  getCellsForRow(rowIndex) {
+    return this.matrix.getKeysStartingWith([rowIndex]).map((cellPos) => {
+      return this.getCellAt(cellPos);
+    }).filter(Boolean);
+  }
+  getOneAttachedCell() {
+    const cells = this.pool.getAttachedCells();
+    const cell = cells.values().next().value;
+    return cell;
+  }
+  getRowsWithCells() {
+    return this.matrix.rawKeysAt([]).sort();
+  }
+  getColumnsWithCells() {
+    const positions = this.matrix.getUnnestedKeysStartingWith([], true);
+    const columns = new Set(positions.map((pos) => pos[1]));
+    return [...columns.values()].sort();
+  }
+  isRowAttached(rowIndex) {
+    return this.getRowsWithCells().includes(rowIndex);
+  }
+  isColumnAttached(colIndex) {
+    return this.getColumnsWithCells().includes(colIndex);
+  }
+  detachRow(rowIndex) {
+    const cellPositions = this.matrix.getKeysStartingWith([
+      rowIndex
+    ]);
+    cellPositions.forEach((cellPos) => this.detachCellAt(cellPos));
+  }
+  detachCol(colIndex) {
+    this.matrix.visit((_, cellPos) => {
+      if (cellPos[1] === colIndex) {
+        this.detachCellAt(cellPos);
       }
-      return oneDiscarded;
-    };
-    this.init();
-    if (opts?.withCellAdditionalInfo) {
-      this.withCellAdditionalInfo = opts.withCellAdditionalInfo;
+    });
+  }
+  detachCell(cell) {
+    const cellPos = this.getCellPosition(cell);
+    if (cellPos) {
+      this.detachCellAt(cellPos);
     }
   }
-  init() {
-    this.elementIndexToCell = [];
-    this.cellToElementIndex = new DeepMap();
-    this.cellAdditionalInfo = new DeepMap();
-    this.renderedElements = [];
+  detachCells(cells) {
+    cells.forEach((cell) => this.detachCell(cell));
   }
-  reset() {
-    this.init();
+  detachRowsStartingWith(rowIndex) {
+    const rows = this.getRowsWithCells().sort();
+    let idx = (0, import_binary_search2.default)(rows, rowIndex, (a, b) => a - b);
+    if (idx < 0) {
+      idx = ~idx;
+    }
+    const rowsToDiscard = rows.slice(idx);
+    rowsToDiscard.forEach((row) => this.detachRow(row));
+  }
+  detachColsStartingWith(colIndex) {
+    const cols = this.getColumnsWithCells().sort();
+    let idx = (0, import_binary_search2.default)(cols, colIndex, (a, b) => a - b);
+    if (idx < 0) {
+      idx = ~idx;
+    }
+    const colsToDiscard = cols.slice(idx);
+    colsToDiscard.forEach((col) => this.detachCol(col));
+  }
+  detachCellsStartingAt(cellPos) {
+    const [rowIndex, colIndex] = cellPos;
+    this.matrix.visit((_, cellPos2) => {
+      const [row, col] = cellPos2;
+      if (row >= rowIndex || col >= colIndex) {
+        this.detachCellAt(cellPos2);
+      }
+    });
+  }
+  detachCellAt(cellPos) {
+    const cell = this.getCellAt(cellPos);
+    if (cell) {
+      this.setCellPositionInMatrix(cell, null);
+      this.pool.detachCell(cell);
+    }
+  }
+  getCellFromListForRow(cells, rowIndex) {
+    return setFind(cells, (cell) => {
+      return this.getCellPosition(cell)?.[0] === rowIndex;
+    });
+  }
+  getCellFromListForColumn(cells, colIndex) {
+    return setFind(cells, (cell) => {
+      return this.getCellPosition(cell)?.[1] === colIndex;
+    });
+  }
+  getCellCountInMatrix() {
+    return this.matrix.size;
   }
   destroy() {
-    this.elementIndexToCell = [];
-    this.cellToElementIndex.clear();
-    this.cellAdditionalInfo.clear();
-    this.renderedElements = [];
+    this.reset();
+  }
+  reset() {
+    this.pool.reset();
+    this.matrix.clear();
+    this.matrixWithHistory.clear();
+    this.offRemoveCell();
+    this.offRemoveCell = () => {
+    };
+  }
+  makeDetachedCellsEmpty() {
+    this.pool.getDetachedCells().forEach((cell) => {
+      cell.update(null);
+    });
   }
 };
 
-// src/components/HeadlessTable/MappedVirtualRows.ts
-var MappedVirtualRows = class extends Logger {
-  constructor() {
-    super(`MappedVirtualRows`);
-    /**
-     * Retrieves the elements that contain rendered rows that are outside
-     * of the specified range
-     *
-     * @param start in [rowIndex, colIndex] format - represents the topmost-leftmost cell visible of the render range
-     * @param end in [rowIndex, colIndex] format - represents the bottom-right corner of the visible range. The end is not inclusive,
-     * so the last visible cell will be [rowIndex-1, colIndex-1]
-     *
-     * @returns an array of element indexes that are outside the specified range
-     */
-    this.getElementsOutsideRenderRange = (range) => {
-      const { start, end } = range;
-      const [startRow] = start;
-      const [endRow] = end;
-      const result = [];
-      for (let elementIndex = 0, len = this.elementIndexToRowIndex.length; elementIndex < len; elementIndex++) {
-        const currentRowIndex = this.elementIndexToRowIndex[elementIndex];
-        if (currentRowIndex == null) {
-          continue;
-        }
-        const rowBefore = currentRowIndex < startRow;
-        const rowAfter = currentRowIndex >= endRow;
-        const outsideRenderRange = rowBefore || rowAfter;
-        if (outsideRenderRange) {
-          result.push(elementIndex);
-        }
+// src/components/HeadlessTable/ListRowManager.ts
+var import_binary_search3 = __toESM(require_binary_search());
+
+// src/components/HeadlessTable/ListRowPoolForReact.tsx
+var React10 = __toESM(require("react"));
+var ROW_COUNT_BY_DEBUG_ID = /* @__PURE__ */ new Map();
+var emptyFn2 = () => {
+};
+var ListRowForReact = class {
+  constructor(debugId) {
+    this.element = null;
+    this.mountSubscription = buildSubscriptionCallback();
+    const count = ROW_COUNT_BY_DEBUG_ID.get(debugId) ?? 0;
+    const key = `${debugId}:ListRowReact:${count}`;
+    ROW_COUNT_BY_DEBUG_ID.set(debugId, count + 1);
+    this.debugId = key;
+    this.updater = buildSubscriptionCallback();
+    this.node = /* @__PURE__ */ React10.createElement(
+      AvoidReactDiff,
+      {
+        key: `detail-row-${key}`,
+        name: `detail-row-${key}`,
+        updater: this.updater
+      }
+    );
+    this.ref = (htmlElement) => {
+      this.element = htmlElement;
+      if (htmlElement) {
+        this.mountSubscription(this);
       }
-      return result;
-    };
-    this.isRowRendered = (rowIndex) => {
-      return this.rowToElementIndex[rowIndex] != null;
-    };
-    this.isElementRendered = (elementIndex) => {
-      return this.elementIndexToRowIndex[elementIndex] != null;
-    };
-    this.getRenderedNodeAtElement = (elementIndex) => {
-      return this.renderedElements[elementIndex] || null;
-    };
-    this.getRenderedRowAtElement = (elementIndex) => {
-      const row = this.elementIndexToRowIndex[elementIndex];
-      return row ?? null;
-    };
-    this.getRenderedNodeForRow = (rowIndex) => {
-      const elementIndex = this.rowToElementIndex[rowIndex];
-      return elementIndex != null ? this.renderedElements[elementIndex] ?? null : null;
-    };
-    this.getElementIndexForRow = (rowIndex) => {
-      const elementIndex = this.rowToElementIndex[rowIndex];
-      return elementIndex ?? null;
     };
-    this.renderRowAtElement = (rowIndex, elementIndex, renderNode) => {
-      if (false) {
-        this.debug(`Render row ${rowIndex} at element ${elementIndex}`);
+  }
+  onMount(callback) {
+    const off = this.mountSubscription.onChange((row) => {
+      if (row != null) {
+        callback(row);
       }
-      const currentRow = this.elementIndexToRowIndex[elementIndex];
-      if (currentRow != null) {
-        this.rowToElementIndex[currentRow] = null;
+    });
+    return off;
+  }
+  destroy() {
+    this.mountSubscription.destroy();
+    this.updater.destroy();
+    this.ref = emptyFn2;
+    this.element = null;
+    this.node = null;
+  }
+  getNode() {
+    return this.node;
+  }
+  update(content) {
+    this.updater(content);
+  }
+  getElement() {
+    return this.element;
+  }
+};
+var _ListRowPoolForReact = class extends Logger {
+  constructor(debugId) {
+    super(`${debugId}:ListRowPoolForReact`);
+    this.debugId = debugId;
+    this.rowRemoveSubscription = buildSubscriptionCallback();
+    this.attachedRows = /* @__PURE__ */ new Set();
+    this.detachedRows = /* @__PURE__ */ new Set();
+    this.allRowsOrdered = /* @__PURE__ */ new Set();
+  }
+  destroy() {
+    this.reset();
+  }
+  onRemoveRow(callback) {
+    const off = this.rowRemoveSubscription.onChange((row) => {
+      if (row != null) {
+        callback(row);
       }
-      if (renderNode !== void 0) {
-        this.renderedElements[elementIndex] = renderNode;
+    });
+    return off;
+  }
+  reset() {
+    this.attachedRows.clear();
+    this.detachedRows.clear();
+    this.allRowsOrdered.clear();
+    this.rowRemoveSubscription.destroy();
+  }
+  getAttachedRows() {
+    return this.attachedRows;
+  }
+  getDetachedRows() {
+    return this.detachedRows;
+  }
+  getAllRows() {
+    return this.allRowsOrdered;
+  }
+  /**
+   * This should be the only place where we create a new cell.
+   */
+  createRow() {
+    const row = new ListRowForReact(this.debugId);
+    this.detachedRows.add(row);
+    this.allRowsOrdered.add(row);
+    return row;
+  }
+  /**
+   * This really removes the cell, not only makes it detached,
+   * but removes it from the render tree and from the pool.
+   */
+  removeRow(row) {
+    if (false) {
+      if (!this.detachedRows.has(row)) {
+        this.error(
+          `You want to remove the row, but it's not in the detached rows set!`
+        );
       }
-      this.elementIndexToRowIndex[elementIndex] = rowIndex;
-      this.rowToElementIndex[rowIndex] = elementIndex;
-    };
-    this.discardRow = (rowIndex) => {
-      const elementIndex = this.rowToElementIndex[rowIndex];
-      if (elementIndex != null) {
-        this.renderedElements[elementIndex] = null;
-        this.elementIndexToRowIndex[elementIndex] = null;
-        this.rowToElementIndex[rowIndex] = null;
+    }
+    this.detachedRows.delete(row);
+    this.attachedRows.delete(row);
+    this.allRowsOrdered.delete(row);
+    row.destroy();
+    this.rowRemoveSubscription(row);
+  }
+  /**
+   * This attaches a row to the list.
+   * If no row is provided, it will get a detached one from the pool
+   * and move that row to the attached set.
+   * If a row is provided, it's moved to the attached set as well.
+   */
+  attachRow(row) {
+    if (!row) {
+      row = this.getDetachedRow();
+    }
+    this.detachedRows.delete(row);
+    this.attachedRows.add(row);
+    return row;
+  }
+  detachRow(row) {
+    this.attachedRows.delete(row);
+    this.detachedRows.add(row);
+  }
+  /**
+   * This gets a detached row from the pool.
+   * If no detached row is available, it will create a new one and return that.
+   */
+  getDetachedRow() {
+    const { detachedRows } = this;
+    let row = detachedRows.values().next().value;
+    if (!row) {
+      this.poolSize += _ListRowPoolForReact.POOL_SIZE_INCREMENT;
+    }
+    row = detachedRows.values().next().value;
+    if (!row) {
+      this.error("No rows available in the pool!");
+    }
+    return row;
+  }
+  get attachedSize() {
+    return this.attachedRows.size;
+  }
+  get detachedSize() {
+    return this.detachedRows.size;
+  }
+  get poolSize() {
+    return this.allRowsOrdered.size;
+  }
+  set poolSize(value) {
+    value = Math.ceil(value / _ListRowPoolForReact.POOL_SIZE_INCREMENT) * _ListRowPoolForReact.POOL_SIZE_INCREMENT;
+    const currentSize = this.poolSize;
+    if (value === currentSize) {
+      return;
+    }
+    const { detachedRows } = this;
+    let diff = currentSize - value;
+    if (diff > 0) {
+      if (diff > detachedRows.size) {
+        diff = detachedRows.size;
+        this.debug("Trying to destroy more rows than are currently detached!");
       }
-    };
-    this.discardElement = (elementIndex) => {
-      const rowIndex = this.elementIndexToRowIndex[elementIndex];
-      if (rowIndex != null) {
-        this.renderedElements[elementIndex] = null;
-        this.elementIndexToRowIndex[elementIndex] = null;
-        this.rowToElementIndex[rowIndex] = null;
-        return rowIndex;
+      const iterator = detachedRows.values();
+      while (diff > 0) {
+        const row = iterator.next().value;
+        this.removeRow(row);
+        diff--;
       }
-      return null;
-    };
-    this.discardElementsStartingWith = (elIndex, callback) => {
-      let discardedRow = null;
-      let oneDiscarded = false;
-      if (elIndex < this.elementIndexToRowIndex.length) {
-        for (let elementIndex = elIndex, len = this.elementIndexToRowIndex.length; elementIndex < len; elementIndex++) {
-          discardedRow = this.discardElement(elementIndex);
-          if (discardedRow) {
-            oneDiscarded = true;
-          }
-          if (callback) {
-            callback(elementIndex, discardedRow);
-          }
-        }
-        this.elementIndexToRowIndex.length = elIndex;
-        this.renderedElements.length = elIndex;
+    } else {
+      diff = -diff;
+      while (diff > 0) {
+        this.createRow();
+        diff--;
       }
-      return oneDiscarded;
-    };
-    this.init();
+    }
+  }
+};
+var ListRowPoolForReact = _ListRowPoolForReact;
+// we'll grow the pool by this amount at a time
+ListRowPoolForReact.POOL_SIZE_INCREMENT = 5;
+
+// src/components/HeadlessTable/ListRowManager.ts
+var ListRowManager = class extends Logger {
+  constructor(debugId) {
+    super(`${debugId}:ListRowManager`);
+    this.indexToRow = /* @__PURE__ */ new Map();
+    this.rowToIndex = /* @__PURE__ */ new WeakMap();
+    this.debugId = debugId;
+    this.pool = new ListRowPoolForReact(debugId);
+    this.offRemoveRow = this.pool.onRemoveRow((row) => this.onRemoveRow(row));
+  }
+  onRemoveRow(row) {
+    const rowIndex = this.rowToIndex.get(row);
+    if (rowIndex == null) {
+      return;
+    }
+    this.rowToIndex.delete(row);
+    this.indexToRow.delete(rowIndex);
+  }
+  set poolSize(rowCount) {
+    this.pool.poolSize = rowCount;
+  }
+  get poolSize() {
+    return this.pool.poolSize;
+  }
+  getDetachedRow() {
+    return this.pool.getDetachedRow();
+  }
+  /**
+   * This gets a row for a given position.
+   * If there's already a row currently attached at that position, it will be returned.
+   *
+   * Otherwise, we return another row.
+   * @param rowIndex
+   */
+  getRowFor(rowIndex) {
+    return this.getRowAt(rowIndex) ?? this.getDetachedRow();
+  }
+  setRowIndexInList(row, rowIndex) {
+    const currentIndex = this.rowToIndex.get(row);
+    if (currentIndex != null) {
+      this.indexToRow.delete(currentIndex);
+    }
+    if (rowIndex == null) {
+      this.rowToIndex.delete(row);
+    } else {
+      this.rowToIndex.set(row, rowIndex);
+      this.indexToRow.set(rowIndex, row);
+    }
+  }
+  detachStartingWith(rowIndex) {
+    const rows = this.getAttachedIndexes();
+    let idx = (0, import_binary_search3.default)(rows, rowIndex, (a, b) => a - b);
+    if (idx < 0) {
+      idx = ~idx;
+    }
+    const rowsToDiscard = rows.slice(idx);
+    rowsToDiscard.forEach((rowIndex2) => this.detachRowAt(rowIndex2));
+  }
+  getRowAt(rowPos) {
+    return this.indexToRow.get(rowPos);
+  }
+  getRowIndex(row) {
+    return this.rowToIndex.get(row);
+  }
+  isRowAttached(row) {
+    const rowIndex = this.getRowIndex(row);
+    return rowIndex != null;
+  }
+  isRowAttachedAt(rowIndex) {
+    const row = this.getRowAt(rowIndex);
+    return !!row;
+  }
+  getList() {
+    const max = Math.max(...this.indexToRow.keys());
+    const list = Array.from({ length: max + 1 }, (_, index) => {
+      const row = this.indexToRow.get(index);
+      if (!row) {
+        return null;
+      }
+      return row.getNode();
+    });
+    return list;
+  }
+  getAttachedCount() {
+    return this.indexToRow.size;
+  }
+  forEachAttachedRow(fn) {
+    this.indexToRow.forEach(fn);
+  }
+  getAttachedIndexes() {
+    return Array.from(this.indexToRow.keys()).sort();
+  }
+  getAllRows() {
+    return [...this.pool.getAllRows()];
+  }
+  detachRowAt(rowIndex) {
+    const row = this.getRowAt(rowIndex);
+    if (!row) {
+      return;
+    }
+    this.setRowIndexInList(row, null);
+    this.pool.detachRow(row);
+  }
+  detachRow(row) {
+    const rowIndex = this.getRowIndex(row);
+    if (rowIndex == null) {
+      return;
+    }
+    this.detachRowAt(rowIndex);
   }
-  init() {
-    this.elementIndexToRowIndex = [];
-    this.rowToElementIndex = [];
-    this.renderedElements = [];
+  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);
+    }
+    this.pool.attachRow(row);
+    this.setRowIndexInList(row, rowIndex);
+    row.update(node);
+    return row;
   }
-  reset() {
-    this.init();
+  makeDetachedRowsEmpty() {
+    this.pool.getDetachedRows().forEach((row) => {
+      row.update(null);
+    });
   }
   destroy() {
-    this.elementIndexToRowIndex = [];
-    this.rowToElementIndex = [];
-    this.renderedElements = [];
+    this.reset();
+  }
+  reset() {
+    this.pool.reset();
+    this.indexToRow.clear();
+    this.offRemoveRow();
+    this.offRemoveRow = () => {
+    };
   }
 };
 
@@ -3142,7 +3711,7 @@ var columnOffsetAtIndex2 = stripVar(InternalVars.columnOffsetAtIndex);
 var columnOffsetAtIndexWhileReordering2 = stripVar(
   InternalVars.columnOffsetAtIndexWhileReordering
 );
-var ReactHeadlessTableRenderer = class extends Logger {
+var GridRenderer = class extends Logger {
   constructor(brain, debugId) {
     debugId = debugId || "ReactHeadlessTableRenderer";
     super(debugId);
@@ -3150,14 +3719,6 @@ var ReactHeadlessTableRenderer = class extends Logger {
     this.destroyed = false;
     this.scrolling = false;
     this.cellHoverClassNames = [];
-    this.itemDOMElements = [];
-    this.itemDOMRefs = [];
-    this.updaters = [];
-    this.detailRowDOMElements = [];
-    this.detailRowDOMRefs = [];
-    this.detailRowUpdaters = [];
-    this.items = [];
-    this.detailItems = [];
     this.lastEnteredRow = -1;
     this.lastExitedRow = -1;
     this.hoverRowUpdatesInProgress = /* @__PURE__ */ new Map();
@@ -3383,12 +3944,13 @@ var ReactHeadlessTableRenderer = class extends Logger {
     };
     this.isRowRendered = (rowIndex) => {
       if (!this.brain.isHorizontalLayoutBrain) {
-        const elements = this.mappedCells.getElementsForRowIndex(rowIndex);
-        return elements.length > 0;
+        return this.cellManager.isRowAttached(rowIndex);
       }
       const initialRowIndex = rowIndex;
       rowIndex = this.brain.rowsPerPage ? rowIndex % this.brain.rowsPerPage : rowIndex;
-      return this.mappedCells.getAdditionalInfoForRowIndex(rowIndex).filter((info) => info.renderRowIndex === initialRowIndex).length > 0;
+      return this.cellManager.getCellsForRow(rowIndex).filter(
+        (cell) => cell.getAdditionalInfo()?.renderRowIndex === initialRowIndex
+      ).length > 0;
     };
     this.isCellVisible = (rowIndex, colIndex) => {
       return this.isRowVisible(rowIndex) && this.isColumnVisible(colIndex);
@@ -3454,8 +4016,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
         const colsCount = this.brain.getInitialCols();
         colIndex = colsCount * opts.horizontalLayoutPageIndex + colIndex;
       }
-      const nodeRendered = this.mappedCells.getRenderedNodeForCell(startRow, colIndex) !== null;
-      return nodeRendered;
+      return this.cellManager.isCellAttachedAt([startRow, colIndex]);
     };
     this.getExtraSpanCellsForRange = (range) => {
       const { start, end } = range;
@@ -3598,11 +4159,11 @@ var ReactHeadlessTableRenderer = class extends Logger {
       }
     };
     this.addHoverClass = (rowIndex) => {
-      this.mappedCells.getElementsForRowIndex(rowIndex).forEach((elIndex) => {
-        const node = this.itemDOMElements[elIndex];
-        if (node) {
+      this.cellManager.getCellsForRow(rowIndex).forEach((cell) => {
+        const element = cell.getElement();
+        if (element) {
           this.cellHoverClassNames.forEach((cls) => {
-            node.classList.add(cls);
+            element.classList.add(cls);
           });
         }
       });
@@ -3618,11 +4179,11 @@ var ReactHeadlessTableRenderer = class extends Logger {
       }
     };
     this.removeHoverClass = (rowIndex) => {
-      this.mappedCells.getElementsForRowIndex(rowIndex).forEach((elIndex) => {
-        const node = this.itemDOMElements[elIndex];
-        if (node) {
+      this.cellManager.getCellsForRow(rowIndex).forEach((cell) => {
+        const element = cell.getElement();
+        if (element) {
           this.cellHoverClassNames.forEach((cls) => {
-            node.classList.remove(cls);
+            element.classList.remove(cls);
           });
         }
       });
@@ -3655,19 +4216,16 @@ var ReactHeadlessTableRenderer = class extends Logger {
         this.hoverRowUpdatesInProgress.delete(rowIndex);
       });
     };
-    this.updateElementPosition = (elementIndex, options) => {
+    this.updateElementPosition = (cell, options) => {
       if (this.destroyed) {
         return;
       }
-      const itemElement = this.itemDOMElements[elementIndex];
-      const cell = this.mappedCells.getRenderedCellAtElement(elementIndex);
-      if (cell == null) {
-        if (false) {
-          this.error(`Cannot find item for element ${elementIndex}`);
-        }
+      const itemElement = cell.getElement();
+      const cellPos = this.cellManager.getCellPosition(cell);
+      if (!cellPos) {
         return;
       }
-      const [rowIndex, colIndex] = cell;
+      const [rowIndex, colIndex] = cellPos;
       const itemPosition = this.brain.getCellOffset(rowIndex, colIndex);
       if (itemPosition == null) {
         return;
@@ -3699,15 +4257,15 @@ var ReactHeadlessTableRenderer = class extends Logger {
         }
       }
     };
-    this.updateDetailElementPosition = (elementIndex) => {
+    this.updateDetailElementPosition = (row) => {
       if (this.destroyed) {
         return;
       }
-      const itemElement = this.detailRowDOMElements[elementIndex];
-      const rowIndex = this.mappedDetailRows.getRenderedRowAtElement(elementIndex);
+      const itemElement = row.getElement();
+      const rowIndex = this.rowManager.getRowIndex(row);
       if (rowIndex == null) {
         if (false) {
-          this.error(`Cannot find row for detail element ${elementIndex}`);
+          this.error(`Cannot find row for detail element ${rowIndex}`);
         }
         return;
       }
@@ -3747,21 +4305,22 @@ var ReactHeadlessTableRenderer = class extends Logger {
       }
     };
     this.adjustFixedElementsOnScroll = (scrollPosition = this.brain.getScrollPosition()) => {
-      const { mappedCells, brain, itemDOMElements, detailRowDOMElements } = this;
+      const { brain, cellManager, rowManager } = this;
       const cols = this.brain.getColCount();
       const rows = this.brain.getRowCount();
       const { fixedColsStart, fixedColsEnd, fixedRowsStart, fixedRowsEnd } = this.brain.getFixedCellInfo();
-      if (detailRowDOMElements.length) {
-        this.detailRowDOMElements.forEach((node, index) => {
-          if (!node) {
-            return;
-          }
-          const rowIndex = this.mappedDetailRows.getRenderedRowAtElement(index);
+      if (rowManager.getAttachedCount()) {
+        rowManager.forEachAttachedRow((row) => {
+          const rowIndex = rowManager.getRowIndex(row);
           if (rowIndex != null) {
             const y = this.brain.getItemOffsetFor(rowIndex, "vertical");
             if (y == null) {
               return;
             }
+            const node = row.getElement();
+            if (!node) {
+              return;
+            }
             this.setDetailTransform(node, rowIndex, {
               y,
               scrollLeft: scrollPosition.scrollLeft
@@ -3772,10 +4331,11 @@ var ReactHeadlessTableRenderer = class extends Logger {
       if (!fixedColsStart && !fixedColsEnd && !fixedRowsStart && !fixedRowsEnd) {
         return;
       }
-      if (itemDOMElements[0]) {
+      const attachedCell = this.cellManager.getOneAttachedCell();
+      if (attachedCell) {
         setInfiniteScrollPosition(
           scrollPosition,
-          this.getInfiniteNode(itemDOMElements[0])
+          this.getInfiniteNode(attachedCell.getElement())
         );
       }
       const fixedEndColsOffsets = this.brain.getFixedEndColsOffsets({
@@ -3788,16 +4348,13 @@ var ReactHeadlessTableRenderer = class extends Logger {
       const [startRow, startCol] = start;
       const [endRow, endCol] = end;
       function adjustElementPosition(rowIndex, colIndex, fn) {
-        const elementIndex = mappedCells.getElementIndexForCell(
-          rowIndex,
-          colIndex
-        );
-        if (elementIndex === null) {
+        const cell = cellManager.getCellAt([rowIndex, colIndex]);
+        if (cell == null) {
           return;
         }
         const itemPosition = brain.getCellOffset(rowIndex, colIndex);
-        const node = itemDOMElements[elementIndex];
-        if (elementIndex != null && node && itemPosition) {
+        const node = cell.getElement();
+        if (node && itemPosition) {
           fn(rowIndex, colIndex, node, itemPosition);
         }
       }
@@ -3958,15 +4515,11 @@ var ReactHeadlessTableRenderer = class extends Logger {
       this.hoverRowUpdatesInProgress.clear();
       this.hoverRowUpdatesInProgress = null;
       this.brain = null;
-      this.mappedCells = null;
-      this.mappedDetailRows = null;
     };
     this.brain = brain;
     this.debugId = debugId;
-    this.mappedCells = new MappedCells({
-      withCellAdditionalInfo: brain.isHorizontalLayoutBrain
-    });
-    this.mappedDetailRows = new MappedVirtualRows();
+    this.cellManager = new GridCellManager(debugId);
+    this.rowManager = new ListRowManager(debugId);
     this.renderRange = this.renderRange.bind(this);
     const removeOnScroll = brain.onScroll(this.adjustFixedElementsOnScroll);
     const removeOnSizeChange = brain.onAvailableSizeChange(() => {
@@ -3994,7 +4547,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
     return this.infiniteNode;
   }
   isCellRenderedAndMappedCorrectly(row, col) {
-    const rendered = this.mappedCells.isCellRendered(row, col);
+    const rendered = !!this.cellManager.getCellAt([row, col]);
     return {
       rendered,
       mapped: rendered
@@ -4009,7 +4562,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
     if (false) {
       this.debug(`Render range ${start}-${end}. Force ${force}`);
     }
-    const { mappedCells, mappedDetailRows } = this;
+    const { rowManager, cellManager } = this;
     const fixedRanges = this.getFixedRanges(range);
     const ranges = [range, ...fixedRanges];
     const alwaysRenderedColumns = this.brain.getAlwaysRenderedColumns();
@@ -4038,86 +4591,33 @@ var ReactHeadlessTableRenderer = class extends Logger {
       0
     );
     const renderRowCount = renderDetailRow ? ranges.reduce((sum2, range2) => sum2 + getRenderRangeRowCount(range2), 0) : 0;
-    if (this.itemDOMElements.length >= renderCount) {
-      mappedCells.discardElementsStartingWith(renderCount, (elementIndex) => {
-        if (this.updaters[elementIndex]) {
-          this.updaters[elementIndex].destroy();
-        }
-        if (false) {
-          this.debug(`Discard element ${elementIndex}`);
-        }
-      });
-      this.itemDOMElements.length = Math.min(
-        this.itemDOMElements.length,
-        renderCount
-      );
-      this.itemDOMRefs.length = Math.min(this.itemDOMRefs.length, renderCount);
-      this.updaters.length = Math.min(this.updaters.length, renderCount);
-      this.items.length = Math.min(this.items.length, renderCount);
-    }
-    if (renderDetailRow && this.detailRowDOMElements.length && this.detailRowDOMElements.length >= renderRowCount) {
-      mappedDetailRows.discardElementsStartingWith(
-        renderRowCount,
-        (elementIndex) => {
-          if (this.detailRowUpdaters[elementIndex]) {
-            this.detailRowUpdaters[elementIndex].destroy();
-          }
-          if (false) {
-            this.debug(`Discard detail row element ${elementIndex}`);
-          }
-        }
-      );
-      this.detailRowDOMElements.length = Math.min(
-        this.detailRowDOMElements.length,
-        renderRowCount
-      );
-      this.detailRowDOMRefs.length = Math.min(
-        this.detailRowDOMRefs.length,
-        renderRowCount
-      );
-      this.detailRowUpdaters.length = Math.min(
-        this.detailRowUpdaters.length,
-        renderRowCount
-      );
-      this.detailItems.length = Math.min(
-        this.detailItems.length,
-        renderRowCount
-      );
-    }
-    const elementsOutsideRanges = arrayIntersection(
-      ...ranges.map(mappedCells.getElementsOutsideRenderRange)
-    );
-    const detailElementsOutsideRanges = renderDetailRow ? arrayIntersection(
-      ...ranges.map(mappedDetailRows.getElementsOutsideRenderRange)
-    ) : [];
-    const elementsOutsideItemRange = elementsOutsideRanges.filter(
-      (elementIndex) => {
-        const cell = this.mappedCells.getRenderedCellAtElement(elementIndex);
-        if (cell && extraCellsMap.has(`${cell[0]}:${cell[1]}`)) {
-          return false;
-        }
-        return true;
-      }
-    );
-    if (this.items.length > renderCount) {
-      this.items.length = renderCount;
-    }
-    if (renderDetailRow && this.detailItems.length > renderRowCount) {
-      this.detailItems.length = renderRowCount;
-    }
-    for (let i = this.items.length; i < renderCount; i++) {
-      this.renderElement(i);
-      elementsOutsideItemRange.splice(0, 0, i);
+    cellManager.detachCellsStartingAt([
+      this.brain.getRowCount(),
+      this.brain.getColCount()
+    ]);
+    if (cellManager.poolSize > renderCount) {
+      cellManager.poolSize = renderCount;
     }
     if (renderDetailRow) {
-      for (let i = this.detailItems.length; i < renderRowCount; i++) {
-        this.renderDetailElement(i);
-        detailElementsOutsideRanges.splice(0, 0, i);
+      rowManager.detachStartingWith(this.brain.getRowCount());
+      if (rowManager.poolSize > renderRowCount) {
+        rowManager.poolSize = renderRowCount;
       }
     }
+    let cellsOutsideRanges = setIntersection(
+      ...ranges.map((range2) => cellManager.getCellsOutsideRenderRange(range2))
+    );
+    cellsOutsideRanges = setFilter(cellsOutsideRanges, (cell) => {
+      const cellPos = cellManager.getCellPosition(cell);
+      if (cellPos && extraCellsMap.has(`${cellPos[0]}:${cellPos[1]}`)) {
+        return false;
+      }
+      return true;
+    });
+    cellManager.detachCells(cellsOutsideRanges);
+    cellManager.poolSize = renderCount;
     const visitedCells = /* @__PURE__ */ new Map();
     const visitedRows = /* @__PURE__ */ new Map();
-    const elementsRenderedOnTheFly = /* @__PURE__ */ new Set();
     ranges.forEach((range2) => {
       const { start: start2, end: end2 } = range2;
       const [startRow, startCol] = start2;
@@ -4131,14 +4631,11 @@ var ReactHeadlessTableRenderer = class extends Logger {
           visitedCells.set(key, true);
           const { rendered: cellRendered, mapped: cellMappedCorrectly } = this.isCellRenderedAndMappedCorrectly(row, col);
           if (row === startRow || col === startCol) {
-            const parentCell = this.isCellCovered(row, col);
-            if (parentCell && extraCellsMap.has(`${parentCell[0]}:${parentCell[1]}`)) {
-              const elIndexForCoveredCell = mappedCells.getElementIndexForCell(
-                row,
-                col
-              );
-              if (elIndexForCoveredCell != null) {
-                elementsOutsideItemRange.push(elIndexForCoveredCell);
+            const parentCellPos = this.isCellCovered(row, col);
+            if (parentCellPos && extraCellsMap.has(`${parentCellPos[0]}:${parentCellPos[1]}`)) {
+              const coveredCell = cellManager.getCellAt([row, col]);
+              if (coveredCell != null) {
+                cellManager.detachCell(coveredCell);
               }
               continue;
             }
@@ -4146,37 +4643,19 @@ var ReactHeadlessTableRenderer = class extends Logger {
           if (cellRendered && !force && cellMappedCorrectly) {
             continue;
           }
-          let elementIndex = cellRendered ? mappedCells.getElementIndexForCell(row, col) : (
-            // TODO when horizontal layout, just do elementsOutsideItemRange.pop()
-            horizontalLayout ? mappedCells.getElementFromListForRow(
-              elementsOutsideItemRange,
-              row
-            ) : mappedCells.getElementFromListForColumn(
-              elementsOutsideItemRange,
-              col
-            )
-          );
-          if (elementIndex == null) {
-            for (let i = this.itemDOMElements.length; i <= this.itemDOMRefs.length; i++) {
-              if (!this.itemDOMElements[i] && this.itemDOMRefs[i] && !elementsRenderedOnTheFly.has(i)) {
-                elementIndex = i;
-                elementsRenderedOnTheFly.add(i);
-                if (false) {
-                  this.debug(
-                    `Last-moment recovery of element ${elementIndex} to render cell ${row}:${col}`
-                  );
-                }
-                break;
-              }
-            }
+          let theCell;
+          if (cellRendered) {
+            theCell = cellManager.getCellAt([row, col]);
+          } else {
+            theCell = cellManager.getCellFor(
+              [row, col],
+              horizontalLayout ? "row" : "column"
+            );
           }
-          if (elementIndex == null) {
-            if (false) {
-              this.error(`Cannot find element to render cell ${row}:${col}`);
-            }
-            continue;
+          if (theCell == null) {
+            theCell = cellManager.getDetachedCell();
           }
-          this.renderCellAtElement(row, col, elementIndex, renderCell);
+          this.renderCellAt(row, col, theCell, renderCell);
         }
         if (!renderDetailRow) {
           continue;
@@ -4185,20 +4664,15 @@ var ReactHeadlessTableRenderer = class extends Logger {
           continue;
         }
         visitedRows.set(row, true);
-        const rowRendered = mappedDetailRows.isRowRendered(row);
+        const rowRendered = rowManager.isRowAttachedAt(row);
         if (rowRendered && !force) {
           continue;
         }
-        const detailElementIndex = rowRendered ? mappedDetailRows.getElementIndexForRow(row) : detailElementsOutsideRanges.pop();
-        if (detailElementIndex == null) {
-          if (false) {
-            this.error(
-              `Cannot find detail element to render detail row ${row}`
-            );
-          }
-          continue;
-        }
-        this.renderDetailRowAtElement(row, detailElementIndex, renderDetailRow);
+        this.renderDetailRowAtElement(
+          row,
+          this.rowManager.getRowFor(row),
+          renderDetailRow
+        );
       }
     });
     extraCells.forEach(([rowIndex, colIndex]) => {
@@ -4208,84 +4682,41 @@ var ReactHeadlessTableRenderer = class extends Logger {
       );
       if (rendered) {
         if (force || !mapped) {
-          const elementIndex2 = mappedCells.getElementIndexForCell(
-            rowIndex,
-            colIndex
-          );
-          this.renderCellAtElement(
-            rowIndex,
-            colIndex,
-            elementIndex2,
-            renderCell
-          );
+          const cellPos = [rowIndex, colIndex];
+          const cell2 = cellManager.getCellAt(cellPos);
+          this.renderCellAt(rowIndex, colIndex, cell2, renderCell);
         }
         return;
       }
-      const elementIndex = elementsOutsideItemRange.pop();
-      if (elementIndex == null) {
+      const cell = cellManager.getCellFor(
+        [rowIndex, colIndex],
+        horizontalLayout ? "row" : "column"
+      );
+      if (cell == null) {
         if (false) {
-          this.error(
-            `Cannot find element to render cell ${rowIndex}-${colIndex}`
-          );
+          this.error(`Cannot find cell to render ${rowIndex}-${colIndex}`);
         }
         return;
       }
-      this.renderCellAtElement(rowIndex, colIndex, elementIndex, renderCell);
+      this.renderCellAt(rowIndex, colIndex, cell, renderCell);
     });
-    let result = this.items;
-    result = [...this.items, ...this.detailItems];
+    cellManager.makeDetachedCellsEmpty();
+    if (renderDetailRow) {
+      rowManager.makeDetachedRowsEmpty();
+    }
+    let result = cellManager.getAllCells().map((cell) => cell.getNode());
+    if (renderDetailRow) {
+      rowManager.getAllRows().forEach((row) => {
+        result.push(row.getNode());
+      });
+    }
     this.adjustFixedElementsOnScroll();
     if (onRender) {
       onRender(result);
     }
     return result;
   }
-  renderElement(elementIndex) {
-    const domRef = (node) => {
-      if (node) {
-        this.itemDOMElements[elementIndex] = node;
-        node.style.position = "absolute";
-        node.style.left = "0px";
-        node.style.top = "0px";
-        this.updateElementPosition(elementIndex);
-      }
-    };
-    this.itemDOMRefs[elementIndex] = domRef;
-    this.updaters[elementIndex] = buildSubscriptionCallback();
-    const item = /* @__PURE__ */ React9.createElement(
-      AvoidReactDiff,
-      {
-        key: elementIndex,
-        name: `${elementIndex}`,
-        updater: this.updaters[elementIndex]
-      }
-    );
-    this.items[elementIndex] = item;
-    return item;
-  }
-  renderDetailElement(elementIndex) {
-    const domRef = (node) => {
-      if (node) {
-        this.detailRowDOMElements[elementIndex] = node;
-        node.style.position = "absolute";
-        node.style.left = "0px";
-        this.updateDetailElementPosition(elementIndex);
-      }
-    };
-    this.detailRowDOMRefs[elementIndex] = domRef;
-    this.detailRowUpdaters[elementIndex] = buildSubscriptionCallback();
-    const detailItem = /* @__PURE__ */ React9.createElement(
-      AvoidReactDiff,
-      {
-        key: `detail-${elementIndex}`,
-        name: `detail-${elementIndex}`,
-        updater: this.detailRowUpdaters[elementIndex]
-      }
-    );
-    this.detailItems[elementIndex] = detailItem;
-    return detailItem;
-  }
-  renderDetailRowAtElement(rowIndex, detailElementIndex, renderDetailRow) {
+  renderDetailRowAtElement(rowIndex, row, renderDetailRow) {
     if (this.destroyed) {
       return;
     }
@@ -4302,27 +4733,18 @@ var ReactHeadlessTableRenderer = class extends Logger {
       },
       onMouseLeave: () => {
       },
-      domRef: this.detailRowDOMRefs[detailElementIndex]
+      domRef: row.ref
     });
-    const itemUpdater = this.detailRowUpdaters[detailElementIndex];
-    if (!itemUpdater) {
-      this.error(
-        `Cannot find detail item updater for item ${rowIndex} at this time... sorry.`
-      );
-      return;
-    }
-    this.mappedDetailRows.renderRowAtElement(
-      rowIndex,
-      detailElementIndex,
-      renderedDetailNode
-    );
-    if (false) {
-      this.debug(
-        `Render detail row ${rowIndex} at element ${detailElementIndex}`
-      );
-    }
-    itemUpdater(renderedDetailNode);
-    this.updateDetailElementPosition(detailElementIndex);
+    row.onMount((row2) => {
+      const element = row2.getElement();
+      if (element) {
+        element.style.position = "absolute";
+        element.style.left = "0px";
+      }
+      this.updateDetailElementPosition(row2);
+    });
+    this.rowManager.renderNodeAtRow(renderedDetailNode, row, rowIndex);
+    this.updateDetailElementPosition(row);
     return;
   }
   getCellRealCoordinates(rowIndex, colIndex) {
@@ -4331,7 +4753,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
       colIndex
     };
   }
-  renderCellAtElement(rowIndex, colIndex, elementIndex, renderCell) {
+  renderCellAt(rowIndex, colIndex, cell, renderCell) {
     if (this.destroyed) {
       return;
     }
@@ -4362,42 +4784,38 @@ var ReactHeadlessTableRenderer = class extends Logger {
       widthWithColspan,
       onMouseEnter: this.onMouseEnter.bind(null, rowIndex),
       onMouseLeave: this.onMouseLeave.bind(null, rowIndex),
-      domRef: this.itemDOMRefs[elementIndex]
+      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);
     });
-    const itemUpdater = this.updaters[elementIndex];
-    if (!itemUpdater) {
-      this.error(
-        `Cannot find item updater for item ${rowIndex},${colIndex} at this time... sorry.`
-      );
-      return;
-    }
     const cellAdditionalInfo = this.brain.isHorizontalLayoutBrain ? {
       renderRowIndex,
       renderColIndex
     } : void 0;
-    this.mappedCells.renderCellAtElement(
-      rowIndex,
-      colIndex,
-      elementIndex,
+    this.cellManager.renderNodeAtCell(
       renderedNode,
+      cell,
+      [rowIndex, colIndex],
       cellAdditionalInfo
     );
-    itemUpdater(renderedNode);
-    this.updateElementPosition(elementIndex, { hidden, rowspan, colspan });
+    this.updateElementPosition(cell, { hidden, rowspan, colspan });
     return;
   }
   reset() {
-    this.itemDOMElements = [];
-    this.itemDOMRefs = [];
-    this.updaters = [];
-    this.items = [];
-    this.mappedCells.reset();
-    this.mappedDetailRows.reset();
+    this.cellManager.reset();
+    this.rowManager.reset();
   }
 };
 
 // src/components/HeadlessTable/HorizontalLayoutTableRenderer.tsx
-var HorizontalLayoutTableRenderer = class extends ReactHeadlessTableRenderer {
+var HorizontalLayoutTableRenderer = class extends GridRenderer {
   constructor(brain, debugId) {
     super(brain, debugId);
     this.setTransform = (element, rowIndex, colIndex, options, _zIndex) => {
@@ -4437,14 +4855,15 @@ var HorizontalLayoutTableRenderer = class extends ReactHeadlessTableRenderer {
     });
   }
   isCellRenderedAndMappedCorrectly(row, col) {
-    const rendered = this.mappedCells.isCellRendered(row, col);
+    const cell = this.cellManager.getCellAt([row, col]);
+    const rendered = !!cell;
     if (!rendered) {
       return {
         rendered,
         mapped: false
       };
     }
-    const cellAdditionalInfo = this.mappedCells.getCellAdditionalInfo(row, col);
+    const cellAdditionalInfo = cell.getAdditionalInfo();
     if (!cellAdditionalInfo) {
       return {
         rendered,
@@ -4462,10 +4881,7 @@ var HorizontalLayoutTableRenderer = class extends ReactHeadlessTableRenderer {
 
 // src/components/HeadlessTable/createRenderer.ts
 function createRenderer(brain) {
-  const renderer = !brain.isHorizontalLayoutBrain ? new ReactHeadlessTableRenderer(
-    brain,
-    `ReactHeadlessTableRenderer:${brain.name}`
-  ) : new HorizontalLayoutTableRenderer(
+  const renderer = !brain.isHorizontalLayoutBrain ? new GridRenderer(brain, `ReactHeadlessTableRenderer:${brain.name}`) : new HorizontalLayoutTableRenderer(
     brain,
     `HorizontalLayoutTableRenderer:${brain.name}`
   );
@@ -4529,12 +4945,12 @@ function RawTableFn(props) {
     });
     return remove;
   }, [renderCell, renderDetailRow, brain, onRenderUpdater]);
-  return /* @__PURE__ */ React10.createElement(AvoidReactDiff, { updater: onRenderUpdater });
+  return /* @__PURE__ */ React11.createElement(AvoidReactDiff, { updater: onRenderUpdater });
 }
-var RawTable = React10.memo(RawTableFn);
+var RawTable = React11.memo(RawTableFn);
 
 // src/components/InfiniteTable/components/ActiveRowIndicator.tsx
-var React11 = __toESM(require("react"));
+var React12 = __toESM(require("react"));
 var import_react8 = require("react");
 
 // src/components/hooks/useRerender.ts
@@ -4724,7 +5140,7 @@ var ActiveRowIndicatorFn = (props) => {
   }, [brain]);
   return (
     // #correct-scroll-size this wrapper is here in order to make the indicator not take up space in the scroll container - to reproduce: remove this and click on a row, you will see that if you scroll at the bottom, there is extra space
-    /* @__PURE__ */ React11.createElement("div", { className: ActiveIndicatorWrapperCls, "data-name": "active-row" }, /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React12.createElement("div", { className: ActiveIndicatorWrapperCls, "data-name": "active-row" }, /* @__PURE__ */ React12.createElement(
       "div",
       {
         ref: domRef,
@@ -4737,12 +5153,12 @@ var ActiveRowIndicatorFn = (props) => {
     ))
   );
 };
-var ActiveRowIndicator = React11.memo(
+var ActiveRowIndicator = React12.memo(
   ActiveRowIndicatorFn
 );
 
 // src/components/InfiniteTable/components/ActiveCellIndicator.tsx
-var React12 = __toESM(require("react"));
+var React13 = __toESM(require("react"));
 var import_react9 = require("react");
 var { rootClassName: rootClassName4 } = internalProps;
 var baseCls2 = `${rootClassName4}-ActiveCellIndicator`;
@@ -4784,7 +5200,7 @@ var ActiveCellIndicatorFn = (props) => {
   }, [brain]);
   return (
     // #correct-scroll-size this wrapper is here in order to make the indicator not take up space in the scroll container - to reproduce: remove this and click on a row, you will see that if you scroll at the bottom, there is extra space
-    /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React13.createElement(
       "div",
       {
         className: ActiveIndicatorWrapperCls,
@@ -4794,7 +5210,7 @@ var ActiveCellIndicatorFn = (props) => {
           zIndex: `var(${columnZIndexAtIndex2}-${props.activeCellIndex[1]})`
         } : void 0
       },
-      /* @__PURE__ */ React12.createElement(
+      /* @__PURE__ */ React13.createElement(
         "div",
         {
           "data-name": "active-cell-indicator",
@@ -4806,7 +5222,7 @@ var ActiveCellIndicatorFn = (props) => {
     )
   );
 };
-var ActiveCellIndicator = React12.memo(
+var ActiveCellIndicator = React13.memo(
   ActiveCellIndicatorFn
 );
 
@@ -4900,21 +5316,21 @@ function HeadlessTable(props) {
     );
     return removeOnRenderCount;
   }, [brain]);
-  return /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React14.createElement(
     VirtualScrollContainer,
     {
       onContainerScroll,
       ...domProps,
       ref: scrollerDOMRef
     },
-    /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React14.createElement(
       "div",
       {
         ref: domRef,
         className: CHILD_TO_SCROLL_CLS,
         "data-name": "scroll-transform-target"
       },
-      /* @__PURE__ */ React13.createElement(
+      /* @__PURE__ */ React14.createElement(
         RawTable,
         {
           forceRerenderTimestamp,
@@ -4926,7 +5342,7 @@ function HeadlessTable(props) {
           cellHoverClassNames
         }
       ),
-      activeCellIndex != null ? /* @__PURE__ */ React13.createElement(
+      activeCellIndex != null ? /* @__PURE__ */ React14.createElement(
         ActiveCellIndicator,
         {
           brain,
@@ -4935,8 +5351,8 @@ function HeadlessTable(props) {
         }
       ) : null
     ),
-    activeRowIndex != null ? /* @__PURE__ */ React13.createElement(ActiveRowIndicator, { brain, activeRowIndex }) : null,
-    /* @__PURE__ */ React13.createElement(
+    activeRowIndex != null ? /* @__PURE__ */ React14.createElement(ActiveRowIndicator, { brain, activeRowIndex }) : null,
+    /* @__PURE__ */ React14.createElement(
       SpacePlaceholder,
       {
         width: scrollSize.width,
@@ -4947,7 +5363,7 @@ function HeadlessTable(props) {
 }
 
 // src/components/hooks/useComponentState/index.tsx
-var React14 = __toESM(require("react"));
+var React15 = __toESM(require("react"));
 var import_react14 = require("react");
 
 // src/utils/proxyFnCall.ts
@@ -5346,9 +5762,9 @@ function buildManagedComponent(config) {
     });
     return { contextValue, ContextComponent: Context };
   }
-  const ManagedComponentContextProvider = React14.memo(function CSR(props) {
+  const ManagedComponentContextProvider = React15.memo(function CSR(props) {
     const { contextValue, ContextComponent } = useManagedComponent(props);
-    return /* @__PURE__ */ React14.createElement(ContextComponent.Provider, { value: contextValue }, props.children);
+    return /* @__PURE__ */ React15.createElement(ContextComponent.Provider, { value: contextValue }, props.children);
   });
   return {
     ManagedComponentContextProvider,
@@ -5357,11 +5773,11 @@ function buildManagedComponent(config) {
 }
 function useManagedComponentState() {
   const Context = getComponentStateContext();
-  return React14.useContext(Context);
+  return React15.useContext(Context);
 }
 
 // src/components/InfiniteTable/components/InfiniteTableFooter/InfiniteTableFooter.tsx
-var React15 = __toESM(require("react"));
+var React16 = __toESM(require("react"));
 
 // src/components/InfiniteTable/hooks/useInternalProps.ts
 var useInternalProps = () => {
@@ -5391,7 +5807,7 @@ var zIndex = { "1": "utilities_zIndex_1__16lm1iwo", "10": "utilities_zIndex_10__
 // src/components/InfiniteTable/components/InfiniteTableFooter/InfiniteTableFooter.tsx
 function InfiniteTableFooter(props) {
   const { rootClassName: rootClassName12 } = useInternalProps();
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(
     "div",
     {
       ...props,
@@ -5407,7 +5823,7 @@ function InfiniteTableFooter(props) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
-var React42 = __toESM(require("react"));
+var React43 = __toESM(require("react"));
 var import_react29 = require("react");
 var import_react_dom = require("react-dom");
 
@@ -5421,7 +5837,7 @@ function keyMirror(obj) {
 }
 
 // src/components/InfiniteTable/components/icons/Icon.tsx
-var React16 = __toESM(require("react"));
+var React17 = __toESM(require("react"));
 var Icon = (props) => {
   const size = props.size ?? `var(--infinite-icon-size)`;
   const style2 = {
@@ -5433,69 +5849,69 @@ var Icon = (props) => {
   };
   return (
     //@ts-ignore
-    /* @__PURE__ */ React16.createElement("svg", { viewBox: "0 0 24 24", ...props, style: style2 }, props.children)
+    /* @__PURE__ */ React17.createElement("svg", { viewBox: "0 0 24 24", ...props, style: style2 }, props.children)
   );
 };
 
 // src/components/InfiniteTable/components/icons/IncludesOperatorIcon.tsx
-var React17 = __toESM(require("react"));
+var React18 = __toESM(require("react"));
 var IncludesOperatorIcon = (props) => {
-  return /* @__PURE__ */ React17.createElement(Icon, { ...props }, /* @__PURE__ */ React17.createElement("path", { d: "M11.14 4L6.43 16H8.36L9.32 13.43H14.67L15.64 16H17.57L12.86 4H11.14M12 6.29L14.03 11.71H9.96L12 6.29" }), /* @__PURE__ */ React17.createElement("path", { d: "M4 18V15H2V20H22V18Z" }), /* @__PURE__ */ React17.createElement("path", { d: "M20 14V18H2V20H22V14Z" }));
+  return /* @__PURE__ */ React18.createElement(Icon, { ...props }, /* @__PURE__ */ React18.createElement("path", { d: "M11.14 4L6.43 16H8.36L9.32 13.43H14.67L15.64 16H17.57L12.86 4H11.14M12 6.29L14.03 11.71H9.96L12 6.29" }), /* @__PURE__ */ React18.createElement("path", { d: "M4 18V15H2V20H22V18Z" }), /* @__PURE__ */ React18.createElement("path", { d: "M20 14V18H2V20H22V14Z" }));
 };
 
 // src/components/InfiniteTable/components/icons/EndsWithOperatorIcon.tsx
-var React18 = __toESM(require("react"));
+var React19 = __toESM(require("react"));
 var EndsWithOperatorIcon = (props) => {
-  return /* @__PURE__ */ React18.createElement(Icon, { ...props }, /* @__PURE__ */ React18.createElement("path", { d: "M11.14 4L6.43 16H8.36L9.32 13.43H14.67L15.64 16H17.57L12.86 4M12 6.29L14.03 11.71H9.96M20 14V18H2V20H22V14Z" }));
+  return /* @__PURE__ */ React19.createElement(Icon, { ...props }, /* @__PURE__ */ React19.createElement("path", { d: "M11.14 4L6.43 16H8.36L9.32 13.43H14.67L15.64 16H17.57L12.86 4M12 6.29L14.03 11.71H9.96M20 14V18H2V20H22V14Z" }));
 };
 
 // src/components/InfiniteTable/components/icons/EqualOperatorIcon.tsx
-var React19 = __toESM(require("react"));
+var React20 = __toESM(require("react"));
 var EqualOperatorIcon = (props) => {
-  return /* @__PURE__ */ React19.createElement(Icon, { ...props }, /* @__PURE__ */ React19.createElement("path", { d: "M19,10H5V8H19V10M19,16H5V14H19V16Z" }));
+  return /* @__PURE__ */ React20.createElement(Icon, { ...props }, /* @__PURE__ */ React20.createElement("path", { d: "M19,10H5V8H19V10M19,16H5V14H19V16Z" }));
 };
 
 // src/components/InfiniteTable/components/icons/GTEOperatorIcon.tsx
-var React20 = __toESM(require("react"));
+var React21 = __toESM(require("react"));
 var GTEOperatorIcon = (props) => {
-  return /* @__PURE__ */ React20.createElement(Icon, { ...props }, /* @__PURE__ */ React20.createElement("path", { d: "M6.5,2.27L20,10.14L6.5,18L5.5,16.27L16.03,10.14L5.5,4L6.5,2.27M20,20V22H5V20H20Z" }));
+  return /* @__PURE__ */ React21.createElement(Icon, { ...props }, /* @__PURE__ */ React21.createElement("path", { d: "M6.5,2.27L20,10.14L6.5,18L5.5,16.27L16.03,10.14L5.5,4L6.5,2.27M20,20V22H5V20H20Z" }));
 };
 
 // src/components/InfiniteTable/components/icons/GTOperatorIcon.tsx
-var React21 = __toESM(require("react"));
+var React22 = __toESM(require("react"));
 var GTOperatorIcon = (props) => {
-  return /* @__PURE__ */ React21.createElement(Icon, { ...props }, /* @__PURE__ */ React21.createElement("path", { d: "M5.5,4.14L4.5,5.86L15,12L4.5,18.14L5.5,19.86L19,12L5.5,4.14Z" }));
+  return /* @__PURE__ */ React22.createElement(Icon, { ...props }, /* @__PURE__ */ React22.createElement("path", { d: "M5.5,4.14L4.5,5.86L15,12L4.5,18.14L5.5,19.86L19,12L5.5,4.14Z" }));
 };
 
 // src/components/InfiniteTable/components/icons/LTEOperatorIcon.tsx
-var React22 = __toESM(require("react"));
+var React23 = __toESM(require("react"));
 var LTEOperatorIcon = (props) => {
-  return /* @__PURE__ */ React22.createElement(Icon, { ...props }, /* @__PURE__ */ React22.createElement("path", { d: "M18.5,2.27L5,10.14L18.5,18L19.5,16.27L8.97,10.14L19.5,4L18.5,2.27M5,20V22H20V20H5Z" }));
+  return /* @__PURE__ */ React23.createElement(Icon, { ...props }, /* @__PURE__ */ React23.createElement("path", { d: "M18.5,2.27L5,10.14L18.5,18L19.5,16.27L8.97,10.14L19.5,4L18.5,2.27M5,20V22H20V20H5Z" }));
 };
 
 // src/components/InfiniteTable/components/icons/LTOperatorIcon.tsx
-var React23 = __toESM(require("react"));
+var React24 = __toESM(require("react"));
 var LTOperatorIcon = (props) => {
-  return /* @__PURE__ */ React23.createElement(Icon, { ...props }, /* @__PURE__ */ React23.createElement("path", { d: "M18.5,4.14L19.5,5.86L8.97,12L19.5,18.14L18.5,19.86L5,12L18.5,4.14Z" }));
+  return /* @__PURE__ */ React24.createElement(Icon, { ...props }, /* @__PURE__ */ React24.createElement("path", { d: "M18.5,4.14L19.5,5.86L8.97,12L19.5,18.14L18.5,19.86L5,12L18.5,4.14Z" }));
 };
 
 // src/components/InfiniteTable/components/icons/NotEqualOperatorIcon.tsx
-var React24 = __toESM(require("react"));
+var React25 = __toESM(require("react"));
 var NotEqualOperatorIcon = (props) => {
-  return /* @__PURE__ */ React24.createElement(Icon, { ...props }, /* @__PURE__ */ React24.createElement("path", { d: "M21,10H9V8H21V10M21,16H9V14H21V16M4,5H6V16H4V5M6,18V20H4V18H6Z" }));
+  return /* @__PURE__ */ React25.createElement(Icon, { ...props }, /* @__PURE__ */ React25.createElement("path", { d: "M21,10H9V8H21V10M21,16H9V14H21V16M4,5H6V16H4V5M6,18V20H4V18H6Z" }));
 };
 
 // src/components/InfiniteTable/components/icons/StartsWithOperatorIcon.tsx
-var React25 = __toESM(require("react"));
+var React26 = __toESM(require("react"));
 var StartsWithOperatorIcon = (props) => {
-  return /* @__PURE__ */ React25.createElement(Icon, { ...props }, /* @__PURE__ */ React25.createElement("path", { d: "M11.14 4L6.43 16H8.36L9.32 13.43H14.67L15.64 16H17.57L12.86 4M12 6.29L14.03 11.71H9.96M4 18V15H2V20H22V18Z" }));
+  return /* @__PURE__ */ React26.createElement(Icon, { ...props }, /* @__PURE__ */ React26.createElement("path", { d: "M11.14 4L6.43 16H8.36L9.32 13.43H14.67L15.64 16H17.57L12.86 4M12 6.29L14.03 11.71H9.96M4 18V15H2V20H22V18Z" }));
 };
 
 // src/components/InfiniteTable/components/FilterEditors.tsx
-var React29 = __toESM(require("react"));
+var React30 = __toESM(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableColumnHeaderFilter.tsx
-var React28 = __toESM(require("react"));
+var React29 = __toESM(require("react"));
 var import_react20 = require("react");
 
 // src/components/InfiniteTable/hooks/useInfiniteTable.ts
@@ -5528,7 +5944,7 @@ var useInfiniteTableState = () => {
 };
 
 // src/components/InfiniteTable/components/icons/FilterIcon.tsx
-var React26 = __toESM(require("react"));
+var React27 = __toESM(require("react"));
 var import_react18 = require("react");
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts
@@ -5594,7 +6010,7 @@ function FilterIcon(props) {
     return null;
   }
   const indexStyle = {};
-  return /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React27.createElement(
     "div",
     {
       "data-name": "filter-icon",
@@ -5606,7 +6022,7 @@ function FilterIcon(props) {
         `${InfiniteIconClassName}-filter`
       )
     },
-    showIndex ? /* @__PURE__ */ React26.createElement(
+    showIndex ? /* @__PURE__ */ React27.createElement(
       "div",
       {
         "data-name": "index",
@@ -5615,9 +6031,9 @@ function FilterIcon(props) {
       },
       index
     ) : null,
-    /* @__PURE__ */ React26.createElement("div", { style: { width: sizes[0], ...lineStyle } }),
-    /* @__PURE__ */ React26.createElement("div", { style: { width: sizes[1], ...lineStyle } }),
-    /* @__PURE__ */ React26.createElement("div", { style: { width: sizes[2], ...lineStyle } })
+    /* @__PURE__ */ React27.createElement("div", { style: { width: sizes[0], ...lineStyle } }),
+    /* @__PURE__ */ React27.createElement("div", { style: { width: sizes[1], ...lineStyle } }),
+    /* @__PURE__ */ React27.createElement("div", { style: { width: sizes[2], ...lineStyle } })
   );
 }
 
@@ -6678,14 +7094,14 @@ function InfiniteTableColumnHeaderFilter(props) {
   const FilterEditor = props.filterEditor;
   const FilterOperatorSwitch = props.filterOperatorSwitch;
   const [focused, setFocused] = (0, import_react20.useState)(false);
-  const onFocus = React28.useCallback(() => {
+  const onFocus = React29.useCallback(() => {
     setFocused(true);
   }, []);
-  const onBlur = React28.useCallback(() => {
+  const onBlur = React29.useCallback(() => {
     setFocused(false);
   }, []);
   const active = filterOperatorMenuVisibleForColumnId === column.id || focused;
-  return /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React29.createElement(
     "div",
     {
       onPointerUp: stopPropagation,
@@ -6699,13 +7115,13 @@ function InfiniteTableColumnHeaderFilter(props) {
       )}`,
       style: { height: props.columnHeaderHeight }
     },
-    /* @__PURE__ */ React28.createElement(InfiniteTableColumnHeaderFilterContext.Provider, { value: props }, /* @__PURE__ */ React28.createElement(FilterOperatorSwitch, null), /* @__PURE__ */ React28.createElement(FilterEditor, null))
+    /* @__PURE__ */ React29.createElement(InfiniteTableColumnHeaderFilterContext.Provider, { value: props }, /* @__PURE__ */ React29.createElement(FilterOperatorSwitch, null), /* @__PURE__ */ React29.createElement(FilterEditor, null))
   );
 }
 function InfiniteTableFilterOperatorSwitch() {
   const { columnApi, disabled, operator } = useInfiniteColumnFilterEditor();
   const Icon2 = operator?.components?.Icon ?? FilterIcon;
-  return /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React29.createElement(
     "div",
     {
       "data-name": "filter-operator",
@@ -6723,7 +7139,7 @@ function InfiniteTableFilterOperatorSwitch() {
         disabled ? `${InfiniteTableColumnHeaderFilterOperatorClassName}--disabled` : ""
       )
     },
-    /* @__PURE__ */ React28.createElement(
+    /* @__PURE__ */ React29.createElement(
       Icon2,
       {
         size: 20,
@@ -6735,7 +7151,7 @@ function InfiniteTableFilterOperatorSwitch() {
   );
 }
 function InfiniteTableColumnHeaderFilterEmpty() {
-  return /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React29.createElement(
     "div",
     {
       onPointerUp: stopPropagation,
@@ -6750,7 +7166,7 @@ function useInfiniteColumnFilterEditor() {
   const context = useInfiniteTable();
   const { column, columnApi } = useInfiniteHeaderCell();
   const columnLabel = getColumnLabel(column, context);
-  const filterContextValue = React28.useContext(
+  const filterContextValue = React29.useContext(
     InfiniteTableColumnHeaderFilterContext
   );
   const { columnFilterType, filterTypes, columnFilterValue } = filterContextValue;
@@ -6758,17 +7174,17 @@ function useInfiniteColumnFilterEditor() {
   const [theValue, setTheValue] = (0, import_react20.useState)(
     columnFilterValue?.filter.value ?? ""
   );
-  const onInputChange = React28.useCallback(
+  const onInputChange = React29.useCallback(
     (filterValue) => {
       setTheValue(filterValue);
       filterContextValue.onChange(filterValue);
     },
     [filterContextValue.onChange]
   );
-  const clearValue = React28.useCallback(() => {
+  const clearValue = React29.useCallback(() => {
     context.api.clearColumnFilter(column.id);
   }, [column.id]);
-  const removeColumnFilter = React28.useCallback(() => {
+  const removeColumnFilter = React29.useCallback(() => {
     context.api.removeColumnFilter(column.id);
   }, [column.id]);
   (0, import_react20.useEffect)(() => {
@@ -6811,7 +7227,7 @@ function useInfiniteColumnFilterEditor() {
 // src/components/InfiniteTable/components/FilterEditors.tsx
 function StringFilterEditor() {
   const { ariaLabel, value, setValue, className, disabled } = useInfiniteColumnFilterEditor();
-  return /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React30.createElement(
     "input",
     {
       "data-xxx": true,
@@ -6828,7 +7244,7 @@ function StringFilterEditor() {
 }
 function NumberFilterEditor() {
   const { ariaLabel, value, setValue, className, disabled } = useInfiniteColumnFilterEditor();
-  return /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React30.createElement(
     "input",
     {
       "aria-label": ariaLabel,
@@ -7311,7 +7727,7 @@ function useDOMProps(initialDOMProps) {
 }
 
 // src/components/InfiniteTable/hooks/reorderColumnsOnDrag.ts
-var import_binary_search2 = __toESM(require_binary_search());
+var import_binary_search4 = __toESM(require_binary_search());
 
 // src/components/InfiniteTable/utils/CSSCalc.ts
 function mapToContinuation(args) {
@@ -7745,7 +8161,7 @@ function reorderColumnsOnDrag(params) {
         restrictToParentGroup: draggableColumnsRestrictTo === "group"
       });
       let currentPos = dir === -1 ? dragColumn.computedOffset + diffX : dragColumn.computedOffset + dragColumn.computedWidth + diffX;
-      let idx = (0, import_binary_search2.default)(
+      let idx = (0, import_binary_search4.default)(
         breakpoints,
         currentPos,
         ({ offsetX }, value) => {
@@ -8086,14 +8502,14 @@ var useColumnPointerEvents = ({
 };
 
 // src/components/InfiniteTable/utils/RenderHookComponentForInfinite.tsx
-var React37 = __toESM(require("react"));
+var React38 = __toESM(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx
-var React36 = __toESM(require("react"));
+var React37 = __toESM(require("react"));
 var import_react25 = require("react");
 
 // src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
-var React32 = __toESM(require("react"));
+var React33 = __toESM(require("react"));
 
 // src/components/DataSource/state/rowInfoStatus.ts
 var showLoadingIcon = (rowInfo) => {
@@ -8104,7 +8520,7 @@ var showLoadingIcon = (rowInfo) => {
 };
 
 // src/components/InfiniteTable/components/icons/ExpandCollapseIcon.tsx
-var React30 = __toESM(require("react"));
+var React31 = __toESM(require("react"));
 var import_react22 = require("react");
 
 // src/components/InfiniteTable/components/icons/ExpandCollapseIcon.css.ts
@@ -8124,13 +8540,13 @@ function ExpandCollapseIcon(props) {
       setExpanded(!expanded);
     }
   };
-  React30.useEffect(() => {
+  React31.useEffect(() => {
     if (isControlled("expanded", props)) {
       setExpanded(props.expanded);
     }
   }, [props.expanded]);
   const currentState = expanded ? "expanded" : "collapsed";
-  return /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React31.createElement(
     "svg",
     {
       "data-name": "expand-collapse-icon",
@@ -8157,19 +8573,19 @@ function ExpandCollapseIcon(props) {
         disabled ? `${THIS_ICON}--disabled` : ""
       )
     },
-    /* @__PURE__ */ React30.createElement("path", { d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" })
+    /* @__PURE__ */ React31.createElement("path", { d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" })
   );
 }
 
 // src/components/InfiniteTable/components/icons/LoadingIcon.tsx
-var React31 = __toESM(require("react"));
+var React32 = __toESM(require("react"));
 
 // src/components/InfiniteTable/components/icons/LoadingIcon.css.ts
 var LoadingIconCls = "utilities_stroke_accentColor__16lm1iwb utilities_flex_none__16lm1iwn utilities_cursor_pointer__16lm1iwi";
 
 // src/components/InfiniteTable/components/icons/LoadingIcon.tsx
 var LoadingIcon = (props) => {
-  return /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React32.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -8189,7 +8605,7 @@ var LoadingIcon = (props) => {
         "InfiniteIcon-loading"
       )
     },
-    /* @__PURE__ */ React31.createElement(
+    /* @__PURE__ */ React32.createElement(
       "circle",
       {
         cx: "50",
@@ -8199,7 +8615,7 @@ var LoadingIcon = (props) => {
         r: "35",
         strokeDasharray: "164.93361431346415 56.97787143782138"
       },
-      /* @__PURE__ */ React31.createElement(
+      /* @__PURE__ */ React32.createElement(
         "animateTransform",
         {
           attributeName: "transform",
@@ -8244,11 +8660,11 @@ function getGroupColumnRender({
     );
     if (groupRenderStrategy === "multi-column") {
       if (groupIndexForColumn + 1 !== groupRowInfo.groupNesting && groupRowInfo.isGroupRow) {
-        return selectionCheckBox ? /* @__PURE__ */ React32.createElement("div", { className }, selectionCheckBox) : null;
+        return selectionCheckBox ? /* @__PURE__ */ React33.createElement("div", { className }, selectionCheckBox) : null;
       }
     } else if (groupRenderStrategy === "single-column" && !groupRowInfo.isGroupRow) {
     }
-    return /* @__PURE__ */ React32.createElement("div", { className }, groupIcon, selectionCheckBox, /* @__PURE__ */ React32.createElement("div", { className: cssEllipsisClassName }, valueToRender ?? null));
+    return /* @__PURE__ */ React33.createElement("div", { className }, groupIcon, selectionCheckBox, /* @__PURE__ */ React33.createElement("div", { className: cssEllipsisClassName }, valueToRender ?? null));
   };
 }
 function getGroupColumnRenderGroupIcon({
@@ -8296,9 +8712,9 @@ function getGroupColumnRenderGroupIcon({
     const showExpanderIcon = pivotBy ? (groupRowInfo.groupKeys?.length || 0) < groupBy?.length : (groupRowInfo.groupKeys?.length || 0) <= groupBy?.length;
     const isLoading = showLoadingIcon(groupRowInfo);
     if (isLoading) {
-      icon = /* @__PURE__ */ React32.createElement(LoadingIcon, null);
+      icon = /* @__PURE__ */ React33.createElement(LoadingIcon, null);
     } else if (showExpanderIcon) {
-      const defaultIcon = /* @__PURE__ */ React32.createElement(
+      const defaultIcon = /* @__PURE__ */ React33.createElement(
         ExpandCollapseIcon,
         {
           expanded: !collapsed,
@@ -8312,7 +8728,7 @@ function getGroupColumnRenderGroupIcon({
     }
     if (initialRenderGroupIcon) {
       renderOptions.renderBag.groupIcon = icon;
-      icon = /* @__PURE__ */ React32.createElement(
+      icon = /* @__PURE__ */ React33.createElement(
         RenderCellHookComponent,
         {
           render: initialRenderGroupIcon,
@@ -8400,7 +8816,7 @@ var FlashingColumnCellRecipe = createRuntimeFn({ defaultClassName: "cell_Flashin
 var SelectionCheckboxCls = "cell_SelectionCheckboxCls__1eexc2a7";
 
 // src/components/InfiniteTable/components/CheckBox.tsx
-var React33 = __toESM(require("react"));
+var React34 = __toESM(require("react"));
 var import_react23 = require("react");
 
 // src/components/InfiniteTable/components/CheckBox.css.ts
@@ -8439,7 +8855,7 @@ function InfiniteCheckBoxComponent() {
   (0, import_react23.useEffect)(() => {
     inputRef.current.indeterminate = checked == null;
   }, [checked]);
-  return /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React34.createElement(
     "input",
     {
       ...domProps,
@@ -8458,7 +8874,7 @@ function InfiniteCheckBoxComponent() {
   );
 }
 function InfiniteCheckBox(props) {
-  return /* @__PURE__ */ React33.createElement(InfiniteCheckBoxRoot, { ...props }, /* @__PURE__ */ React33.createElement(InfiniteCheckBoxComponent, null));
+  return /* @__PURE__ */ React34.createElement(InfiniteCheckBoxRoot, { ...props }, /* @__PURE__ */ React34.createElement(InfiniteCheckBoxComponent, null));
 }
 
 // src/components/InfiniteTable/components/InfiniteTableRow/columnRendering.tsx
@@ -8882,7 +9298,7 @@ function getFormattedValueContextForCell(options) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
-var React34 = __toESM(require("react"));
+var React35 = __toESM(require("react"));
 var { rootClassName: rootClassName5 } = internalProps;
 var InfiniteTableCellClassName = `${rootClassName5}Cell`;
 var InfiniteTableCellContentClassName = `${rootClassName5}Cell_content`;
@@ -8929,7 +9345,7 @@ function InfiniteTableCellFn(props) {
       //   ? `${InfiniteTableCellClassName}--shifting ${CellClsVariants.shifting}`
       //   : '',
     ),
-    children: /* @__PURE__ */ React34.createElement(React34.Fragment, null, beforeChildren, /* @__PURE__ */ React34.createElement(
+    children: /* @__PURE__ */ React35.createElement(React35.Fragment, null, beforeChildren, /* @__PURE__ */ React35.createElement(
       "div",
       {
         className: join(
@@ -8947,21 +9363,21 @@ function InfiniteTableCellFn(props) {
   }
   const RenderComponent = cellType === "body" ? column.components?.ColumnCell : column.components?.HeaderCell;
   if (RenderComponent) {
-    return /* @__PURE__ */ React34.createElement(RenderComponent, { ...finalDOMProps, ref: domRef });
+    return /* @__PURE__ */ React35.createElement(RenderComponent, { ...finalDOMProps, ref: domRef });
   }
-  return /* @__PURE__ */ React34.createElement("div", { ...finalDOMProps, ref: domRef });
+  return /* @__PURE__ */ React35.createElement("div", { ...finalDOMProps, ref: domRef });
 }
-var InfiniteTableCell = React34.memo(
+var InfiniteTableCell = React35.memo(
   InfiniteTableCellFn
 );
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnEditor.tsx
-var React35 = __toESM(require("react"));
+var React36 = __toESM(require("react"));
 var import_react24 = require("react");
 function InfiniteTableColumnEditor() {
   const { initialValue, setValue, confirmEdit, cancelEdit, readOnly } = useInfiniteColumnEditor();
   const domRef = (0, import_react24.useRef)();
-  const refCallback = React35.useCallback((node) => {
+  const refCallback = React36.useCallback((node) => {
     domRef.current = node;
     if (node) {
       node.focus();
@@ -8977,7 +9393,7 @@ function InfiniteTableColumnEditor() {
       event.stopPropagation();
     }
   }, []);
-  return /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(
     "input",
     {
       readOnly,
@@ -9004,11 +9420,11 @@ function styleForTreeColumn({
     [stripVar(ThemeVars.components.Row.groupNesting)]: rowInfo.isTreeNode ? rowInfo.isParentNode ? rowInfo.treeNesting : rowInfo.treeNesting + 1 : 0
   };
 }
-var InfiniteTableColumnCellContext = React36.createContext(null);
+var InfiniteTableColumnCellContext = React37.createContext(null);
 var InfiniteTableColumnCellClassName = `${rootClassName6}ColumnCell`;
 var defaultRenderRowDetailIcon = (params) => {
   const { toggleCurrentRowDetails, rowDetailState } = params;
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React37.createElement(
     ExpandCollapseIcon,
     {
       style: {
@@ -9026,7 +9442,7 @@ var EXPANDER_STYLE = {
 var defaultRenderTreeIcon = (params) => {
   const { rowInfo, toggleCurrentTreeNode, nodeExpanded, api } = params;
   const isNodeReadOnly2 = api.getDataSourceState().isNodeReadOnly;
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React37.createElement(
     ExpandCollapseIcon,
     {
       disabled: rowInfo.isTreeNode && rowInfo.isParentNode ? isNodeReadOnly2(rowInfo) : false,
@@ -9051,7 +9467,7 @@ var defaultRenderSelectionCheckBox = (params) => {
   const { components: components2 } = api.getState();
   const isNodeSelectable2 = api.getDataSourceState().isNodeSelectable;
   const CheckBoxCmp = components2?.CheckBox || InfiniteCheckBox;
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React37.createElement(
     CheckBoxCmp,
     {
       domProps: {
@@ -9111,7 +9527,7 @@ function InfiniteTableColumnCellFn(props) {
     hidden,
     showZebraRows
   } = props;
-  const htmlElementRef = React36.useRef(null);
+  const htmlElementRef = React37.useRef(null);
   const domRef = (0, import_react25.useCallback)(
     (node) => {
       htmlElementRef.current = node;
@@ -9122,7 +9538,7 @@ function InfiniteTableColumnCellFn(props) {
     [initialDomRef]
   );
   if (!column) {
-    return /* @__PURE__ */ React36.createElement("div", { ref: domRef }, "no column");
+    return /* @__PURE__ */ React37.createElement("div", { ref: domRef }, "no column");
   }
   const { rowSelected } = rowInfo;
   const {
@@ -9172,7 +9588,7 @@ function InfiniteTableColumnCellFn(props) {
   } = colRenderingParams;
   const { align: align2, verticalAlign } = renderParams;
   const renderParam = renderParams;
-  const renderParamRef = React36.useRef(renderParam);
+  const renderParamRef = React37.useRef(renderParam);
   const onClick = (0, import_react25.useCallback)(
     (event) => {
       const colIndex = column.computedVisibleIndex;
@@ -9237,7 +9653,7 @@ function InfiniteTableColumnCellFn(props) {
     [rowInfo]
   );
   const EditorComponent = column.components?.Editor ?? InfiniteTableColumnEditor;
-  const editor = inEdit ? /* @__PURE__ */ React36.createElement(CellEditorContextComponent, { contextValue: renderParam }, /* @__PURE__ */ React36.createElement(EditorComponent, null)) : null;
+  const editor = inEdit ? /* @__PURE__ */ React37.createElement(CellEditorContextComponent, { contextValue: renderParam }, /* @__PURE__ */ React37.createElement(EditorComponent, null)) : null;
   const renderChildren = (0, import_react25.useCallback)(
     once(() => {
       if (hidden) {
@@ -9248,7 +9664,7 @@ function InfiniteTableColumnCellFn(props) {
       }
       renderParamRef.current = renderParam;
       if (renderFunctions.renderGroupIcon) {
-        renderParam.renderBag.groupIcon = /* @__PURE__ */ React36.createElement(
+        renderParam.renderBag.groupIcon = /* @__PURE__ */ React37.createElement(
           RenderCellHookComponent,
           {
             render: renderFunctions.renderGroupIcon,
@@ -9260,7 +9676,7 @@ function InfiniteTableColumnCellFn(props) {
         );
       }
       if (renderFunctions.renderSelectionCheckBox && selectionMode == "multi-row") {
-        renderParam.renderBag.selectionCheckBox = /* @__PURE__ */ React36.createElement(
+        renderParam.renderBag.selectionCheckBox = /* @__PURE__ */ React37.createElement(
           RenderCellHookComponent,
           {
             render: defaultRenderSelectionCheckBox,
@@ -9268,7 +9684,7 @@ function InfiniteTableColumnCellFn(props) {
           }
         );
         if (renderFunctions.renderSelectionCheckBox !== true) {
-          renderParam.renderBag.selectionCheckBox = /* @__PURE__ */ React36.createElement(
+          renderParam.renderBag.selectionCheckBox = /* @__PURE__ */ React37.createElement(
             RenderCellHookComponent,
             {
               render: renderFunctions.renderSelectionCheckBox,
@@ -9289,7 +9705,7 @@ function InfiniteTableColumnCellFn(props) {
         if (fn === true) {
           fn = defaultRenderTreeIcon;
         } else if (fn) {
-          renderParam.renderBag.treeIcon = /* @__PURE__ */ React36.createElement(
+          renderParam.renderBag.treeIcon = /* @__PURE__ */ React37.createElement(
             RenderCellHookComponent,
             {
               render: defaultRenderTreeIcon,
@@ -9298,7 +9714,7 @@ function InfiniteTableColumnCellFn(props) {
           );
         }
         if (fn) {
-          renderParam.renderBag.treeIcon = /* @__PURE__ */ React36.createElement(
+          renderParam.renderBag.treeIcon = /* @__PURE__ */ React37.createElement(
             RenderCellHookComponent,
             {
               render: fn,
@@ -9311,7 +9727,7 @@ function InfiniteTableColumnCellFn(props) {
         }
       }
       if (renderFunctions.renderRowDetailIcon) {
-        renderParam.renderBag.rowDetailsIcon = /* @__PURE__ */ React36.createElement(
+        renderParam.renderBag.rowDetailsIcon = /* @__PURE__ */ React37.createElement(
           RenderCellHookComponent,
           {
             render: defaultRenderRowDetailIcon,
@@ -9324,7 +9740,7 @@ function InfiniteTableColumnCellFn(props) {
           }
         );
         if (typeof renderFunctions.renderRowDetailIcon === "function") {
-          renderParam.renderBag.rowDetailsIcon = /* @__PURE__ */ React36.createElement(
+          renderParam.renderBag.rowDetailsIcon = /* @__PURE__ */ React37.createElement(
             RenderCellHookComponent,
             {
               render: renderFunctions.renderRowDetailIcon,
@@ -9337,7 +9753,7 @@ function InfiniteTableColumnCellFn(props) {
         }
       }
       if (renderFunctions.renderValue) {
-        renderParam.renderBag.value = /* @__PURE__ */ React36.createElement(
+        renderParam.renderBag.value = /* @__PURE__ */ React37.createElement(
           RenderCellHookComponent,
           {
             render: renderFunctions.renderValue,
@@ -9349,7 +9765,7 @@ function InfiniteTableColumnCellFn(props) {
         );
       }
       if (rowInfo.isGroupRow && renderFunctions.renderGroupValue) {
-        renderParam.renderBag.value = /* @__PURE__ */ React36.createElement(
+        renderParam.renderBag.value = /* @__PURE__ */ React37.createElement(
           RenderCellHookComponent,
           {
             render: renderFunctions.renderGroupValue,
@@ -9361,7 +9777,7 @@ function InfiniteTableColumnCellFn(props) {
         );
       }
       if (!rowInfo.isGroupRow && renderFunctions.renderLeafValue) {
-        renderParam.renderBag.value = /* @__PURE__ */ React36.createElement(
+        renderParam.renderBag.value = /* @__PURE__ */ React37.createElement(
           RenderCellHookComponent,
           {
             render: renderFunctions.renderLeafValue,
@@ -9377,9 +9793,9 @@ function InfiniteTableColumnCellFn(props) {
       if (valueToRender instanceof Date) {
         valueToRender = valueToRender.toLocaleDateString();
       }
-      const all = /* @__PURE__ */ React36.createElement(React36.Fragment, null, align2 !== "end" ? renderParam.renderBag.treeIcon : null, align2 !== "end" ? renderParam.renderBag.groupIcon : null, align2 !== "end" ? renderParam.renderBag.rowDetailsIcon : null, align2 !== "end" ? renderParam.renderBag.selectionCheckBox : null, valueToRender, align2 === "end" ? renderParam.renderBag.selectionCheckBox : null, align2 === "end" ? renderParam.renderBag.rowDetailsIcon : null, align2 === "end" ? renderParam.renderBag.groupIcon : null, align2 === "end" ? renderParam.renderBag.treeIcon : null);
+      const all = /* @__PURE__ */ React37.createElement(React37.Fragment, null, align2 !== "end" ? renderParam.renderBag.treeIcon : null, align2 !== "end" ? renderParam.renderBag.groupIcon : null, align2 !== "end" ? renderParam.renderBag.rowDetailsIcon : null, align2 !== "end" ? renderParam.renderBag.selectionCheckBox : null, valueToRender, align2 === "end" ? renderParam.renderBag.selectionCheckBox : null, align2 === "end" ? renderParam.renderBag.rowDetailsIcon : null, align2 === "end" ? renderParam.renderBag.groupIcon : null, align2 === "end" ? renderParam.renderBag.treeIcon : null);
       if (column.render) {
-        return /* @__PURE__ */ React36.createElement(
+        return /* @__PURE__ */ React37.createElement(
           RenderCellHookComponent,
           {
             render: column.render,
@@ -9565,16 +9981,16 @@ function InfiniteTableColumnCellFn(props) {
   return (
     // this context is here for supporting useInfiniteColumnCell to be used
     // with a custom column component, specified via column.components.ColumnCell
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React37.createElement(
       ContextProvider,
       {
         value: renderParamRef.current
       },
-      /* @__PURE__ */ React36.createElement(InfiniteTableCell, { ...cellProps })
+      /* @__PURE__ */ React37.createElement(InfiniteTableCell, { ...cellProps })
     )
   );
 }
-var InfiniteTableColumnCell = React36.memo(
+var InfiniteTableColumnCell = React37.memo(
   InfiniteTableColumnCellFn
 );
 function useInfiniteColumnCell() {
@@ -9589,14 +10005,14 @@ function useInfiniteColumnEditor() {
     state: { editingValueRef, editingCell }
   } = useInfiniteTable();
   const { column, rowInfo } = useInfiniteColumnCell();
-  const [initialValue] = React36.useState(() => editingCell?.value);
-  const [currentValue, setCurrentValue] = React36.useState(initialValue);
+  const [initialValue] = React37.useState(() => editingCell?.value);
+  const [currentValue, setCurrentValue] = React37.useState(initialValue);
   const readOnly = editingCell ? !editingCell.active && !!editingCell.waiting : false;
-  const setValue = React36.useCallback((value) => {
+  const setValue = React37.useCallback((value) => {
     editingValueRef.current = value;
     setCurrentValue(value);
   }, []);
-  React36.useLayoutEffect(() => {
+  React37.useLayoutEffect(() => {
     editingValueRef.current = initialValue;
   }, []);
   const confirmEdit = api.confirmEdit;
@@ -9624,7 +10040,7 @@ function RenderHookComponent(props) {
 // src/components/InfiniteTable/utils/RenderHookComponentForInfinite.tsx
 function RenderCellHookComponent(props) {
   const ContextProvider = InfiniteTableColumnCellContext.Provider;
-  return /* @__PURE__ */ React37.createElement(ContextProvider, { value: props.renderParam }, /* @__PURE__ */ React37.createElement(
+  return /* @__PURE__ */ React38.createElement(ContextProvider, { value: props.renderParam }, /* @__PURE__ */ React38.createElement(
     RenderHookComponent,
     {
       render: props.render,
@@ -9634,11 +10050,11 @@ function RenderCellHookComponent(props) {
 }
 function CellEditorContextComponent(props) {
   const ContextProvider = InfiniteTableColumnCellContext.Provider;
-  return /* @__PURE__ */ React37.createElement(ContextProvider, { value: props.contextValue }, props.children);
+  return /* @__PURE__ */ React38.createElement(ContextProvider, { value: props.contextValue }, props.children);
 }
 function RenderHeaderCellHookComponent(props) {
   const ContextProvider = InfiniteTableHeaderCellContext.Provider;
-  return /* @__PURE__ */ React37.createElement(ContextProvider, { value: props.renderParam }, /* @__PURE__ */ React37.createElement(
+  return /* @__PURE__ */ React38.createElement(ContextProvider, { value: props.renderParam }, /* @__PURE__ */ React38.createElement(
     RenderHookComponent,
     {
       render: props.render,
@@ -9648,7 +10064,7 @@ function RenderHeaderCellHookComponent(props) {
 }
 
 // src/components/InfiniteTable/components/icons/MenuIcon.tsx
-var React38 = __toESM(require("react"));
+var React39 = __toESM(require("react"));
 var defaultLineStyle2 = {
   width: "100%",
   pointerEvents: "none"
@@ -9674,7 +10090,7 @@ function MenuIcon(props) {
     borderTop: `${ThemeVars.components.HeaderCell.menuIconLineWidth} solid currentColor`,
     ...props.lineStyle
   };
-  return /* @__PURE__ */ React38.createElement(
+  return /* @__PURE__ */ React39.createElement(
     "div",
     {
       ...domProps,
@@ -9691,12 +10107,12 @@ function MenuIcon(props) {
         `${InfiniteIconClassName}-menu`
       )
     },
-    children ?? /* @__PURE__ */ React38.createElement(React38.Fragment, null, /* @__PURE__ */ React38.createElement("div", { className: lineClassName, style: lineStyle }), /* @__PURE__ */ React38.createElement("div", { className: lineClassName, style: lineStyle }), /* @__PURE__ */ React38.createElement("div", { className: lineClassName, style: lineStyle }))
+    children ?? /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement("div", { className: lineClassName, style: lineStyle }), /* @__PURE__ */ React39.createElement("div", { className: lineClassName, style: lineStyle }), /* @__PURE__ */ React39.createElement("div", { className: lineClassName, style: lineStyle }))
   );
 }
 
 // src/components/InfiniteTable/components/icons/SortIcon.tsx
-var React39 = __toESM(require("react"));
+var React40 = __toESM(require("react"));
 var import_react26 = require("react");
 
 // src/components/InfiniteTable/components/icons/SortIcon.css.ts
@@ -9755,7 +10171,7 @@ function SortIcon(props) {
   if (direction === -1) {
     indexStyle.top = "100%";
   }
-  return /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React40.createElement(
     "div",
     {
       "data-name": "sort-icon",
@@ -9767,7 +10183,7 @@ function SortIcon(props) {
         `${InfiniteIconClassName}-sort`
       )
     },
-    showIndex ? /* @__PURE__ */ React39.createElement(
+    showIndex ? /* @__PURE__ */ React40.createElement(
       "div",
       {
         "data-name": "index",
@@ -9776,25 +10192,25 @@ function SortIcon(props) {
       },
       index
     ) : null,
-    /* @__PURE__ */ React39.createElement(
+    /* @__PURE__ */ React40.createElement(
       "div",
       {
         style: { width: sizes[0], ...lineStyle },
         onTransitionEnd
       }
     ),
-    /* @__PURE__ */ React39.createElement("div", { style: { width: sizes[1], ...lineStyle } }),
-    /* @__PURE__ */ React39.createElement("div", { style: { width: sizes[2], ...lineStyle } })
+    /* @__PURE__ */ React40.createElement("div", { style: { width: sizes[1], ...lineStyle } }),
+    /* @__PURE__ */ React40.createElement("div", { style: { width: sizes[2], ...lineStyle } })
   );
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/useColumnResizeHandle.tsx
-var React41 = __toESM(require("react"));
+var React42 = __toESM(require("react"));
 var import_react28 = require("react");
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/index.tsx
 var import_react27 = require("react");
-var React40 = __toESM(require("react"));
+var React41 = __toESM(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/columnResizer.ts
 function getColumnResizer(colIndex, {
@@ -10010,7 +10426,7 @@ function ResizeHandleFn(props) {
     right: computedPinned === "start" ? void 0 : 0
     //ThemeVars.components.HeaderCell.resizeHandleWidth,
   } : computedPinned === "end" && computedFirstInCategory ? { right: void 0 } : void 0;
-  return /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React41.createElement(
     "div",
     {
       ref: domRef,
@@ -10023,7 +10439,7 @@ function ResizeHandleFn(props) {
       )}`,
       onPointerDown
     },
-    /* @__PURE__ */ React40.createElement(
+    /* @__PURE__ */ React41.createElement(
       "div",
       {
         style: style2,
@@ -10037,7 +10453,7 @@ function ResizeHandleFn(props) {
     )
   );
 }
-var ResizeHandle = React40.memo(ResizeHandleFn);
+var ResizeHandle = React41.memo(ResizeHandleFn);
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/useColumnResizeHandle.tsx
 function useColumnResizeHandle(column, opts) {
@@ -10107,7 +10523,7 @@ function useColumnResizeHandle(column, opts) {
     },
     [computeResizeForDiff]
   );
-  const resizeHandle = column.computedResizable ? /* @__PURE__ */ React41.createElement(
+  const resizeHandle = column.computedResizable ? /* @__PURE__ */ React42.createElement(
     ResizeHandle,
     {
       horizontalLayoutPageIndex: opts.horizontalLayoutPageIndex,
@@ -10130,7 +10546,7 @@ var defaultRenderSelectionCheckBox2 = (params) => {
   const selected = allRowsSelected ? true : someRowsSelected ? null : false;
   const { components: components2, isTree } = api.getState();
   const CheckBoxCmp = components2?.CheckBox || InfiniteCheckBox;
-  return /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React43.createElement(
     CheckBoxCmp,
     {
       domProps: {
@@ -10155,9 +10571,9 @@ var defaultRenderSelectionCheckBox2 = (params) => {
     }
   );
 };
-var InfiniteTableHeaderCellContext = React42.createContext(null);
+var InfiniteTableHeaderCellContext = React43.createContext(null);
 var columnZIndexAtIndex5 = stripVar(InternalVars.columnZIndexAtIndex);
-var spacer = /* @__PURE__ */ React42.createElement("div", { className: flex["1"] });
+var spacer = /* @__PURE__ */ React43.createElement("div", { className: flex["1"] });
 var InfiniteHeaderCellDataAttributes = keyMirror({
   "data-name": ``,
   "data-field": ``,
@@ -10219,7 +10635,7 @@ function InfiniteTableHeaderCell(props) {
     getState
   });
   const computedSortable = columnApi.isSortable();
-  const sortIcon = computedSortable && (column.computedSorted || alwaysShow) ? /* @__PURE__ */ React42.createElement(
+  const sortIcon = computedSortable && (column.computedSorted || alwaysShow) ? /* @__PURE__ */ React43.createElement(
     SortIcon,
     {
       index: column.computedMultiSort ? column.computedSortIndex + 1 : void 0,
@@ -10236,7 +10652,7 @@ function InfiniteTableHeaderCell(props) {
     }
   ) : null;
   const filtered = column.computedFilterable && column.computedFiltered;
-  const filterIcon = filtered ? /* @__PURE__ */ React42.createElement(FilterIcon, null) : null;
+  const filterIcon = filtered ? /* @__PURE__ */ React43.createElement(FilterIcon, null) : null;
   const headerCSSEllipsis = column.headerCssEllipsis ?? column.cssEllipsis ?? true;
   const menuIconProps = {
     reserveSpaceWhenHidden: align2 === "center",
@@ -10256,7 +10672,7 @@ function InfiniteTableHeaderCell(props) {
     }
   };
   const MenuIconCmp = column.components?.MenuIcon || components2?.MenuIcon || MenuIcon;
-  const menuIcon = /* @__PURE__ */ React42.createElement(MenuIconCmp, { ...menuIconProps });
+  const menuIcon = /* @__PURE__ */ React43.createElement(MenuIconCmp, { ...menuIconProps });
   const domRef = (0, import_react29.useRef)(null);
   const initialRenderParam = {
     horizontalLayoutPageIndex,
@@ -10291,7 +10707,7 @@ function InfiniteTableHeaderCell(props) {
       renderBag: { ...initialRenderParam.renderBag }
     };
     if (column.renderSortIcon) {
-      renderParam2.renderBag.sortIcon = /* @__PURE__ */ React42.createElement(
+      renderParam2.renderBag.sortIcon = /* @__PURE__ */ React43.createElement(
         RenderHeaderCellHookComponent,
         {
           render: column.renderSortIcon,
@@ -10309,7 +10725,7 @@ function InfiniteTableHeaderCell(props) {
       );
     }
     if (column.renderFilterIcon) {
-      renderParam2.renderBag.filterIcon = /* @__PURE__ */ React42.createElement(
+      renderParam2.renderBag.filterIcon = /* @__PURE__ */ React43.createElement(
         RenderHeaderCellHookComponent,
         {
           render: column.renderFilterIcon,
@@ -10321,7 +10737,7 @@ function InfiniteTableHeaderCell(props) {
       );
     }
     if (typeof column.renderMenuIcon === "function") {
-      renderParam2.renderBag.menuIcon = /* @__PURE__ */ React42.createElement(
+      renderParam2.renderBag.menuIcon = /* @__PURE__ */ React43.createElement(
         RenderHeaderCellHookComponent,
         {
           render: (param) => {
@@ -10333,7 +10749,7 @@ function InfiniteTableHeaderCell(props) {
               if (result.type === MenuIconCmp || result.type === MenuIcon) {
                 return result;
               }
-              return /* @__PURE__ */ React42.createElement(MenuIconCmp, { ...menuIconProps }, result);
+              return /* @__PURE__ */ React43.createElement(MenuIconCmp, { ...menuIconProps }, result);
             }
             return null;
           },
@@ -10347,7 +10763,7 @@ function InfiniteTableHeaderCell(props) {
       );
     }
     if (column.renderSelectionCheckBox && selectionMode === "multi-row") {
-      renderParam2.renderBag.selectionCheckBox = /* @__PURE__ */ React42.createElement(
+      renderParam2.renderBag.selectionCheckBox = /* @__PURE__ */ React43.createElement(
         RenderHeaderCellHookComponent,
         {
           render: defaultRenderSelectionCheckBox2,
@@ -10361,7 +10777,7 @@ function InfiniteTableHeaderCell(props) {
       );
       const renderHeaderSelectionCheckBox = column.renderHeaderSelectionCheckBox ?? column.renderSelectionCheckBox;
       if (renderHeaderSelectionCheckBox && renderHeaderSelectionCheckBox !== true) {
-        renderParam2.renderBag.selectionCheckBox = /* @__PURE__ */ React42.createElement(
+        renderParam2.renderBag.selectionCheckBox = /* @__PURE__ */ React43.createElement(
           RenderHeaderCellHookComponent,
           {
             render: renderHeaderSelectionCheckBox,
@@ -10376,7 +10792,7 @@ function InfiniteTableHeaderCell(props) {
       }
     }
     if (header instanceof Function) {
-      renderParam2.renderBag.header = /* @__PURE__ */ React42.createElement(
+      renderParam2.renderBag.header = /* @__PURE__ */ React43.createElement(
         RenderHeaderCellHookComponent,
         {
           render: header,
@@ -10388,10 +10804,10 @@ function InfiniteTableHeaderCell(props) {
       );
     }
     const theMenuIcon = column.renderMenuIcon === false ? null : renderParam2.renderBag.menuIcon;
-    const headerContent = headerCSSEllipsis ? /* @__PURE__ */ React42.createElement("div", { className: cssEllipsisClassName }, renderParam2.renderBag.header) : renderParam2.renderBag.header;
-    const all = /* @__PURE__ */ React42.createElement(React42.Fragment, null, align2 === "center" ? spacer : null, renderParam2.renderBag.selectionCheckBox, headerContent, renderParam2.renderBag.sortIcon, renderParam2.renderBag.filterIcon, align2 === "center" ? spacer : null, align2 !== "center" ? spacer : null, theMenuIcon);
+    const headerContent = headerCSSEllipsis ? /* @__PURE__ */ React43.createElement("div", { className: cssEllipsisClassName }, renderParam2.renderBag.header) : renderParam2.renderBag.header;
+    const all = /* @__PURE__ */ React43.createElement(React43.Fragment, null, align2 === "center" ? spacer : null, renderParam2.renderBag.selectionCheckBox, headerContent, renderParam2.renderBag.sortIcon, renderParam2.renderBag.filterIcon, align2 === "center" ? spacer : null, align2 !== "center" ? spacer : null, theMenuIcon);
     if (column.renderHeader) {
-      return /* @__PURE__ */ React42.createElement(
+      return /* @__PURE__ */ React43.createElement(
         RenderHeaderCellHookComponent,
         {
           render: column.renderHeader,
@@ -10429,7 +10845,7 @@ function InfiniteTableHeaderCell(props) {
   });
   let draggingProxy = null;
   if (dragging && proxyPosition) {
-    draggingProxy = /* @__PURE__ */ React42.createElement(
+    draggingProxy = /* @__PURE__ */ React43.createElement(
       "div",
       {
         key: column.id,
@@ -10453,7 +10869,7 @@ function InfiniteTableHeaderCell(props) {
     verticalAlign,
     align: align2
   };
-  const debouncedOnFilterValueChange = React42.useMemo(() => {
+  const debouncedOnFilterValueChange = React43.useMemo(() => {
     const fn = (filterValue) => {
       api.setColumnFilter(column.id, filterValue);
     };
@@ -10481,7 +10897,7 @@ function InfiniteTableHeaderCell(props) {
     "data-sort": column.computedSortedAsc ? "asc" : column.computedSortedDesc ? "desc" : "none",
     "data-sort-index": `${column.computedSortIndex ?? -1}`
   };
-  const columnFilterEditor = column.computedFilterable ? /* @__PURE__ */ React42.createElement(
+  const columnFilterEditor = column.computedFilterable ? /* @__PURE__ */ React43.createElement(
     InfiniteTableColumnHeaderFilter,
     {
       horizontalLayoutPageIndex,
@@ -10495,9 +10911,9 @@ function InfiniteTableHeaderCell(props) {
       columnFilterValue: column.computedFilterValue,
       columnHeaderHeight
     }
-  ) : /* @__PURE__ */ React42.createElement(InfiniteTableColumnHeaderFilterEmpty, null);
+  ) : /* @__PURE__ */ React43.createElement(InfiniteTableColumnHeaderFilterEmpty, null);
   renderParam.renderBag.filterEditor = columnFilterEditor;
-  return /* @__PURE__ */ React42.createElement(ContextProvider, { value: renderParam }, /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React43.createElement(ContextProvider, { value: renderParam }, /* @__PURE__ */ React43.createElement(
     InfiniteTableCell,
     {
       domRef: ref,
@@ -10544,7 +10960,7 @@ function InfiniteTableHeaderCell(props) {
         CellCls
       ),
       cssEllipsis: headerCSSEllipsis,
-      afterChildren: /* @__PURE__ */ React42.createElement(React42.Fragment, null, showColumnFilters ? columnFilterEditor : null, resizeHandle),
+      afterChildren: /* @__PURE__ */ React43.createElement(React43.Fragment, null, showColumnFilters ? columnFilterEditor : null, resizeHandle),
       renderChildren
     }
   ), draggingProxy);
@@ -10557,7 +10973,7 @@ function useInfiniteHeaderCell() {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderWrapper.tsx
-var React47 = __toESM(require("react"));
+var React48 = __toESM(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/buildColumnAndGroupTree.ts
 function buildColumnAndGroupTree(columns, columnGroups, columnGroupsDepthsMap, columnGroupsMaxDepth) {
@@ -10662,19 +11078,19 @@ function assignGroupOffsetsAndComputedWidths(items, groupOffset = 0) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
-var React46 = __toESM(require("react"));
+var React47 = __toESM(require("react"));
 var import_react32 = require("react");
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup.tsx
-var React45 = __toESM(require("react"));
+var React46 = __toESM(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/useColumnGroupResizeHandle.tsx
-var React44 = __toESM(require("react"));
+var React45 = __toESM(require("react"));
 var import_react31 = require("react");
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/GroupResizeHandle.tsx
 var import_react30 = require("react");
-var React43 = __toESM(require("react"));
+var React44 = __toESM(require("react"));
 var { rootClassName: rootClassName8 } = internalProps;
 var InfiniteTableHeaderCellResizeHandleCls2 = `${rootClassName8}HeaderCell_ResizeHandle`;
 function GroupResizeHandleFn(props) {
@@ -10743,7 +11159,7 @@ function GroupResizeHandleFn(props) {
   const style2 = (computedPinned === false || computedPinned === "start") && computedLastInCategory ? {
     right: computedPinned === "start" ? void 0 : ThemeVars.components.HeaderCell.resizeHandleWidth
   } : computedPinned === "end" && computedFirstInCategory ? { right: void 0 } : void 0;
-  return /* @__PURE__ */ React43.createElement(
+  return /* @__PURE__ */ React44.createElement(
     "div",
     {
       ref: domRef,
@@ -10756,7 +11172,7 @@ function GroupResizeHandleFn(props) {
       )}`,
       onPointerDown
     },
-    /* @__PURE__ */ React43.createElement(
+    /* @__PURE__ */ React44.createElement(
       "div",
       {
         style: { ...style2, ...props.style },
@@ -10767,7 +11183,7 @@ function GroupResizeHandleFn(props) {
     )
   );
 }
-var GroupResizeHandle = React43.memo(
+var GroupResizeHandle = React44.memo(
   GroupResizeHandleFn
 );
 
@@ -10832,7 +11248,7 @@ function useColumnGroupResizeHandle(groupColumns, config) {
     [computeResizeForDiff]
   );
   const groupResizable = groupColumns.some((c) => c.computedResizable);
-  const resizeHandle = groupResizable ? /* @__PURE__ */ React44.createElement(
+  const resizeHandle = groupResizable ? /* @__PURE__ */ React45.createElement(
     GroupResizeHandle,
     {
       brain: bodyBrain,
@@ -10880,7 +11296,7 @@ function InfiniteTableHeaderGroup(props) {
   style2 = style2 && typeof style2 === "object" ? style2 : {};
   style2.width = width;
   style2.height = height2;
-  return /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React46.createElement(
     "div",
     {
       ref: props.domRef,
@@ -10889,7 +11305,7 @@ function InfiniteTableHeaderGroup(props) {
       style: style2,
       "data-z-index": zIndex2
     },
-    /* @__PURE__ */ React45.createElement(
+    /* @__PURE__ */ React46.createElement(
       "div",
       {
         className: join(
@@ -10978,7 +11394,7 @@ function InfiniteTableHeaderFn(props) {
           groupOffset: colGroupItem.groupOffset
         };
         const visible = getState().columnGroupVisibility[colGroupItem.id] !== false;
-        return visible ? /* @__PURE__ */ React46.createElement(
+        return visible ? /* @__PURE__ */ React47.createElement(
           InfiniteTableHeaderGroup,
           {
             horizontalLayoutPageIndex,
@@ -10992,7 +11408,7 @@ function InfiniteTableHeaderFn(props) {
           }
         ) : null;
       }
-      return /* @__PURE__ */ React46.createElement(
+      return /* @__PURE__ */ React47.createElement(
         InfiniteTableHeaderCell,
         {
           domRef: domRef2,
@@ -11018,7 +11434,7 @@ function InfiniteTableHeaderFn(props) {
       headerBrain
     ]
   );
-  return /* @__PURE__ */ React46.createElement("div", { ...domProps }, /* @__PURE__ */ React46.createElement(
+  return /* @__PURE__ */ React47.createElement("div", { ...domProps }, /* @__PURE__ */ React47.createElement(
     RawTable,
     {
       name: "header",
@@ -11028,7 +11444,7 @@ function InfiniteTableHeaderFn(props) {
     }
   ));
 }
-var InfiniteTableHeader = React46.memo(
+var InfiniteTableHeader = React47.memo(
   InfiniteTableHeaderFn
 );
 
@@ -11053,7 +11469,7 @@ function TableHeaderWrapper(props) {
   } = tableContextValue;
   const rows = !computedColumnGroups || !Object.keys(computedColumnGroups).length ? 1 : columnGroupsMaxDepth + 2;
   const height2 = rows * columnHeaderHeight + (showColumnFilters ? columnHeaderHeight : 0);
-  const columnAndGroupTreeInfo = React47.useMemo(() => {
+  const columnAndGroupTreeInfo = React48.useMemo(() => {
     if (!computedColumnGroups || !Object.keys(computedColumnGroups).length) {
       return void 0;
     }
@@ -11064,7 +11480,7 @@ function TableHeaderWrapper(props) {
       columnGroupsMaxDepth
     );
   }, [computedVisibleColumns, computedColumnGroups, columnGroupsDepthsMap]);
-  const cellspan = React47.useCallback(
+  const cellspan = React48.useCallback(
     ({ rowIndex, colIndex }) => {
       const column = computedVisibleColumns[colIndex];
       const rowspan2 = 1;
@@ -11102,15 +11518,15 @@ function TableHeaderWrapper(props) {
       columnGroupsDepthsMap
     ]
   );
-  const rowspan = React47.useCallback(
+  const rowspan = React48.useCallback(
     ({ rowIndex, colIndex }) => cellspan({ rowIndex, colIndex }).rowspan,
     [cellspan]
   );
-  const colspan = React47.useCallback(
+  const colspan = React48.useCallback(
     ({ rowIndex, colIndex }) => cellspan({ rowIndex, colIndex }).colspan,
     [cellspan]
   );
-  const rowHeight = React47.useCallback(
+  const rowHeight = React48.useCallback(
     (index) => {
       return showColumnFilters ? index < rows - 1 ? columnHeaderHeight : 2 * columnHeaderHeight : columnHeaderHeight;
     },
@@ -11132,7 +11548,7 @@ function TableHeaderWrapper(props) {
       fixedColsStart: computedPinnedStartColumns.length
     }
   );
-  const header = /* @__PURE__ */ React47.createElement(
+  const header = /* @__PURE__ */ React48.createElement(
     InfiniteTableHeader,
     {
       columns: computedVisibleColumns,
@@ -11143,7 +11559,7 @@ function TableHeaderWrapper(props) {
       columnAndGroupTreeInfo
     }
   );
-  const verticalScrollbarPlaceholder = scrollbars.vertical && getScrollbarWidth() ? /* @__PURE__ */ React47.createElement(
+  const verticalScrollbarPlaceholder = scrollbars.vertical && getScrollbarWidth() ? /* @__PURE__ */ React48.createElement(
     "div",
     {
       className: HeaderScrollbarPlaceholderCls,
@@ -11153,7 +11569,7 @@ function TableHeaderWrapper(props) {
       }
     }
   ) : null;
-  return /* @__PURE__ */ React47.createElement(
+  return /* @__PURE__ */ React48.createElement(
     "div",
     {
       className: `${InfiniteTableHeaderWrapperClassName} ${HeaderWrapperCls}`,
@@ -11167,7 +11583,7 @@ function TableHeaderWrapper(props) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
-var React48 = __toESM(require("react"));
+var React49 = __toESM(require("react"));
 var import_react33 = require("react");
 
 // src/components/utils/decamelize.ts
@@ -11210,11 +11626,11 @@ var enforceStyle = (node, style2) => {
     );
   }
 };
-var InfiniteTableLicenseFooter = React48.forwardRef(
+var InfiniteTableLicenseFooter = React49.forwardRef(
   function InfiniteTableLicenseFooter2(props, ref) {
     const { rootClassName: rootClassName12 } = useInternalProps();
-    const domRef = React48.useRef(null);
-    const domCallback = React48.useCallback((node) => {
+    const domRef = React49.useRef(null);
+    const domCallback = React49.useCallback((node) => {
       domRef.current = node;
       if (!ref) {
         return;
@@ -11241,7 +11657,7 @@ var InfiniteTableLicenseFooter = React48.forwardRef(
         clearInterval(intervalId);
       };
     }, []);
-    return /* @__PURE__ */ React48.createElement(
+    return /* @__PURE__ */ React49.createElement(
       "div",
       {
         ref: domCallback,
@@ -11255,7 +11671,7 @@ var InfiniteTableLicenseFooter = React48.forwardRef(
       },
       "Powered by",
       " ",
-      /* @__PURE__ */ React48.createElement(
+      /* @__PURE__ */ React49.createElement(
         "a",
         {
           href: "https://infinite-table.com",
@@ -11270,7 +11686,7 @@ var InfiniteTableLicenseFooter = React48.forwardRef(
 );
 
 // src/components/InfiniteTable/components/LoadMask.tsx
-var React49 = __toESM(require("react"));
+var React50 = __toESM(require("react"));
 
 // src/components/InfiniteTable/components/LoadMask.css.ts
 var LoadMaskCls = { visible: "LoadMask_LoadMaskCls_visible__qy58ya1 LoadMask_LoadMaskBaseCls__qy58ya0 utilities_position_absolute__16lm1iw2 utilities_top_0__16lm1iw1d utilities_left_0__16lm1iw1f utilities_right_0__16lm1iw1k utilities_bottom_0__16lm1iw1i", hidden: "LoadMask_LoadMaskCls_hidden__qy58ya2 LoadMask_LoadMaskBaseCls__qy58ya0 utilities_position_absolute__16lm1iw2 utilities_top_0__16lm1iw1d utilities_left_0__16lm1iw1f utilities_right_0__16lm1iw1k utilities_bottom_0__16lm1iw1i" };
@@ -11282,16 +11698,16 @@ var { rootClassName: rootClassName10 } = internalProps;
 var baseCls3 = `${rootClassName10}-LoadMask`;
 function LoadMaskFn(props) {
   const { visible, children = "Loading" } = props;
-  return /* @__PURE__ */ React49.createElement(
+  return /* @__PURE__ */ React50.createElement(
     "div",
     {
       className: `${LoadMaskCls[visible ? "visible" : "hidden"]} ${baseCls3}`
     },
-    /* @__PURE__ */ React49.createElement("div", { className: `${LoadMaskOverlayCls} ${baseCls3}-Overlay` }),
-    /* @__PURE__ */ React49.createElement("div", { className: `${LoadMaskTextCls} ${baseCls3}-Text` }, children)
+    /* @__PURE__ */ React50.createElement("div", { className: `${LoadMaskOverlayCls} ${baseCls3}-Overlay` }),
+    /* @__PURE__ */ React50.createElement("div", { className: `${LoadMaskTextCls} ${baseCls3}-Text` }, children)
   );
 }
-var LoadMask = React49.memo(LoadMaskFn);
+var LoadMask = React50.memo(LoadMaskFn);
 
 // src/utils/deepClone.ts
 function cloneArray(arr) {
@@ -12303,10 +12719,10 @@ function enhancedFlatten(param) {
 }
 
 // src/components/DataSource/index.tsx
-var React51 = __toESM(require("react"));
+var React52 = __toESM(require("react"));
 
 // src/utils/groupAndPivot/treeUtils.ts
-var emptyFn = () => {
+var emptyFn3 = () => {
 };
 function toTreeDataArray(data, options) {
   const treeMap = new DeepMap();
@@ -12360,7 +12776,7 @@ function traverseTreeNode(traverseParams, treeTraverseOptions, parentPath, item)
   });
   if (isLeaf) {
     onLeafNode?.(item);
-    onNode?.(item, emptyFn);
+    onNode?.(item, emptyFn3);
   } else {
     onParentNode?.(item, next, getNodeChildren(item));
     onNode?.(item, next);
@@ -18555,7 +18971,7 @@ var {
 });
 function DataSource(props) {
   const { DataSource: DataSourceComponent } = useDataSourceInternal(props);
-  return /* @__PURE__ */ React51.createElement(DataSourceComponent, null, props.children ?? null);
+  return /* @__PURE__ */ React52.createElement(DataSourceComponent, null, props.children ?? null);
 }
 function useRowInfoReducers() {
   const { rowInfoReducerResults } = useDataSourceState();
@@ -20024,7 +20440,7 @@ function useAutoSizeColumns() {
 // src/components/InfiniteTable/hooks/useCellRendering.tsx
 var import_react39 = require("react");
 var import_react40 = require("react");
-var React53 = __toESM(require("react"));
+var React54 = __toESM(require("react"));
 
 // src/components/InfiniteTable/hooks/useYourBrain.ts
 function useYourBrain(param) {
@@ -20061,7 +20477,7 @@ function useYourBrain(param) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableDetailRow.tsx
-var React52 = __toESM(require("react"));
+var React53 = __toESM(require("react"));
 
 // src/components/InfiniteTable/components/rowDetail.css.ts
 var RowDetailRecipe = createRuntimeFn({ defaultClassName: "rowDetail_RowDetailRecipe__evqes20", variantClassNames: {}, defaultVariants: {}, compoundVariants: [] });
@@ -20198,7 +20614,7 @@ function InfiniteTableDetailRowFn(props) {
     rowDetailsCache,
     rowInfo
   });
-  return /* @__PURE__ */ React52.createElement(DataSourceMasterDetailContext.Provider, { value: masterDetailContextValue }, /* @__PURE__ */ React52.createElement(
+  return /* @__PURE__ */ React53.createElement(DataSourceMasterDetailContext.Provider, { value: masterDetailContextValue }, /* @__PURE__ */ React53.createElement(
     "div",
     {
       ref: domRef,
@@ -20215,7 +20631,7 @@ function InfiniteTableDetailRowFn(props) {
     rowDetailRenderer(rowInfo, currentRowCache)
   ));
 }
-var InfiniteTableDetailRow = React52.memo(
+var InfiniteTableDetailRow = React53.memo(
   InfiniteTableDetailRowFn
 );
 
@@ -20398,7 +20814,7 @@ function useCellRendering(param) {
         cellStyle,
         cellClassName
       };
-      return /* @__PURE__ */ React53.createElement(InfiniteTableColumnCell, { ...cellProps });
+      return /* @__PURE__ */ React54.createElement(InfiniteTableColumnCell, { ...cellProps });
     },
     [
       rowHeight,
@@ -20432,10 +20848,10 @@ function useCellRendering(param) {
       const dataArray2 = getData();
       const rowInfo = dataArray2[rowIndex];
       if (!rowInfo || !isRowDetailsExpanded(rowInfo) || !computedRowSizeCacheForDetails) {
-        return /* @__PURE__ */ React53.createElement("div", { ref: domRef, className: visibility.hidden });
+        return /* @__PURE__ */ React54.createElement("div", { ref: domRef, className: visibility.hidden });
       }
       const { rowDetailHeight: rowDetailHeight2, rowHeight: rowHeight2 } = computedRowSizeCacheForDetails.getSize(rowIndex);
-      return /* @__PURE__ */ React53.createElement(
+      return /* @__PURE__ */ React54.createElement(
         InfiniteTableDetailRow,
         {
           rowInfo,
@@ -20809,10 +21225,10 @@ function computeColumnGroupsDepths(columnGroups, columnGroupVisibility) {
 }
 
 // src/components/InfiniteTable/state/rowDetailRendererFromComponent.tsx
-var React54 = __toESM(require("react"));
+var React55 = __toESM(require("react"));
 function getRowDetailRendererFromComponent(RowDetail) {
   return (rowInfo, cache) => {
-    return /* @__PURE__ */ React54.createElement(RowDetail, { key: rowInfo.id, rowInfo, cache });
+    return /* @__PURE__ */ React55.createElement(RowDetail, { key: rowInfo.id, rowInfo, cache });
   };
 }
 
@@ -22610,7 +23026,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "6.0.19"
+      version: "6.1.0-canary.0"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -23258,7 +23674,7 @@ var getFirstFocusableChildForNode = (node) => {
 };
 
 // src/components/InfiniteTable/utils/cellFocusUtils.ts
-var import_binary_search3 = __toESM(require_binary_search());
+var import_binary_search5 = __toESM(require_binary_search());
 
 // src/components/InfiniteTable/utils/waitForFunction.ts
 async function waitForFunction(fn, tickTimeout = 10, maxTimeout = 300) {
@@ -23336,7 +23752,7 @@ function getFollowingFocusableCell(cellPos, direction, context) {
   return nextCellPos;
 }
 function getNextCol(colIndex, direction, validColIndexes) {
-  let index = (0, import_binary_search3.default)(validColIndexes, colIndex + direction, SORT_ASC2);
+  let index = (0, import_binary_search5.default)(validColIndexes, colIndex + direction, SORT_ASC2);
   if (index < 0) {
     index = ~index;
     if (direction > 0 && index >= validColIndexes.length) {
@@ -23622,7 +24038,7 @@ async function onKeyDown(context, event) {
   if (handleBrowserFocusChangeOnKeyboardNavigation(keyboardHandlerContext, event)) {
     event.preventDefault();
   } else {
-    if (!context.getState().focusedWithin && handleKeyboardNavigation(keyboardHandlerContext, event)) {
+    if (!context.getState().focusedWithin && !keyDownResult.preventNavigation && handleKeyboardNavigation(keyboardHandlerContext, event)) {
       event.preventDefault();
     }
   }
@@ -23771,7 +24187,7 @@ function useDOMEventHandlers() {
 var import_react58 = require("react");
 
 // src/components/hooks/useOverlay/index.tsx
-var React55 = __toESM(require("react"));
+var React56 = __toESM(require("react"));
 var import_react54 = require("react");
 var import_react_dom2 = require("react-dom");
 
@@ -24156,10 +24572,10 @@ async function retrieveElement(elementGetter) {
   return queryForElement(await result);
 }
 function DefaultOverlayPortal(props) {
-  return /* @__PURE__ */ React55.createElement("div", { style: { position: "fixed", top: 0, left: 0 } }, props.children);
+  return /* @__PURE__ */ React56.createElement("div", { style: { position: "fixed", top: 0, left: 0 } }, props.children);
 }
 function OverlayContent(props) {
-  const nodeRef = React55.useRef(null);
+  const nodeRef = React56.useRef(null);
   (0, import_react54.useEffect)(() => {
     return props.realign.onChange((handle) => {
       if (nodeRef.current && handle) {
@@ -24167,7 +24583,7 @@ function OverlayContent(props) {
       }
     });
   }, [props.realign]);
-  return /* @__PURE__ */ React55.createElement(
+  return /* @__PURE__ */ React56.createElement(
     "div",
     {
       style: { position: "absolute", top: 0, left: 0 },
@@ -24235,22 +24651,22 @@ function useOverlayPortal(content, portalContainer) {
   }, [portalContainer]);
   return portalContainer ? container ? (0, import_react_dom2.createPortal)(content, container) : (
     // we're probably still fetching the container
-    /* @__PURE__ */ React55.createElement(React55.Fragment, null)
-  ) : portalContainer === null || portalContainer === false ? content : /* @__PURE__ */ React55.createElement(DefaultOverlayPortal, null, content);
+    /* @__PURE__ */ React56.createElement(React56.Fragment, null)
+  ) : portalContainer === null || portalContainer === false ? content : /* @__PURE__ */ React56.createElement(DefaultOverlayPortal, null, content);
 }
 function getIdForReactOnlyChild(children) {
-  if (React55.Children.count(children) === 1) {
-    const child = React55.Children.only(children);
-    if (React55.isValidElement(child)) {
+  if (React56.Children.count(children) === 1) {
+    const child = React56.Children.only(children);
+    if (React56.isValidElement(child)) {
       return child.props.id || child.key;
     }
   }
   return null;
 }
 function injectPortalContainerAndConstrainInMenuChild(children, portalContainer, constrainTo) {
-  if (React55.Children.count(children) === 1) {
-    const child = React55.Children.only(children);
-    if (React55.isValidElement(child) && child.type[propToIdentifyMenu]) {
+  if (React56.Children.count(children) === 1) {
+    const child = React56.Children.only(children);
+    if (React56.isValidElement(child) && child.type[propToIdentifyMenu]) {
       const newProps = {};
       if (child.props.portalContainer === void 0) {
         newProps.portalContainer = portalContainer;
@@ -24258,7 +24674,7 @@ function injectPortalContainerAndConstrainInMenuChild(children, portalContainer,
       if (child.props.constrainTo === void 0) {
         newProps.constrainTo = constrainTo;
       }
-      return React55.cloneElement(child, newProps);
+      return React56.cloneElement(child, newProps);
     }
   }
   return children;
@@ -24274,7 +24690,7 @@ function useOverlay(params) {
     const contentForPortal = [];
     for (const [_2, handle] of handles) {
       contentForPortal.push(
-        /* @__PURE__ */ React55.createElement(OverlayContent, { ...handle, key: handle.key })
+        /* @__PURE__ */ React56.createElement(OverlayContent, { ...handle, key: handle.key })
       );
     }
     return contentForPortal;
@@ -24333,7 +24749,7 @@ function useOverlay(params) {
     },
     [handles, rootParams.portalContainer, updateContent]
   );
-  React55.useEffect(() => {
+  React56.useEffect(() => {
     if (handleToRealign) {
       const handle = handles.get(handleToRealign);
       if (handle) {
@@ -24352,7 +24768,7 @@ function useOverlay(params) {
     handles.clear();
     updateContent();
   };
-  React55.useEffect(() => {
+  React56.useEffect(() => {
   }, []);
   return {
     portal,
@@ -24364,16 +24780,16 @@ function useOverlay(params) {
 }
 
 // src/components/InfiniteTable/utils/getMenuForColumn.tsx
-var React61 = __toESM(require("react"));
+var React62 = __toESM(require("react"));
 
 // src/components/Menu/index.tsx
-var React59 = __toESM(require("react"));
+var React60 = __toESM(require("react"));
 
 // src/components/Menu/getMenuState.tsx
-var React57 = __toESM(require("react"));
+var React58 = __toESM(require("react"));
 
 // src/components/Menu/childrenToRuntimeItems.tsx
-var React56 = __toESM(require("react"));
+var React57 = __toESM(require("react"));
 
 // src/components/Menu/MenuItem.tsx
 function MenuItem(_props) {
@@ -24392,7 +24808,7 @@ var MenuSeparatorCls = "MenuCls_MenuSeparatorCls__db3arfd";
 // src/components/Menu/childrenToRuntimeItems.tsx
 var SEPARATOR = "-";
 function MenuSeparator() {
-  return /* @__PURE__ */ React56.createElement("hr", { className: MenuSeparatorCls });
+  return /* @__PURE__ */ React57.createElement("hr", { className: MenuSeparatorCls });
 }
 var toRuntimeItem = ({
   columns,
@@ -24401,7 +24817,7 @@ var toRuntimeItem = ({
   menuId
 }, item) => {
   const menuItem = item && (item.key != null || item.label != null) ? item : null;
-  const menuDecoration = menuItem === null ? item === SEPARATOR ? /* @__PURE__ */ React56.createElement(MenuSeparator, null) : item : null;
+  const menuDecoration = menuItem === null ? item === SEPARATOR ? /* @__PURE__ */ React57.createElement(MenuSeparator, null) : item : null;
   const runtimeItem = menuItem != null ? {
     type: "item",
     parentMenuId: menuId,
@@ -24429,7 +24845,7 @@ var toRuntimeItem = ({
   return runtimeItem;
 };
 function childrenToRuntimeItems(context, children) {
-  return React56.Children.map(children, (child) => {
+  return React57.Children.map(children, (child) => {
     if (child) {
       if (child.props.__is_menu_item || child.type === MenuItem) {
         const itemProps = { ...child.props };
@@ -24452,7 +24868,7 @@ function childrenToRuntimeItems(context, children) {
 // src/components/Menu/getMenuState.tsx
 var SUBMENU_COL_NAME = "submenu";
 function getInitialMenuState() {
-  const domRef = React57.createRef();
+  const domRef = React58.createRef();
   return {
     keyboardActiveItemKey: null,
     activeItemKey: null,
@@ -24507,7 +24923,7 @@ var deriveStateFromProps2 = (params) => {
       columns.push({
         name: SUBMENU_COL_NAME,
         render: ({ domProps, item }) => {
-          return item.menu ? /* @__PURE__ */ React57.createElement("div", { ...domProps }, /* @__PURE__ */ React57.createElement(ExpandCollapseIcon, { expanded: false })) : /* @__PURE__ */ React57.createElement("div", { ...domProps });
+          return item.menu ? /* @__PURE__ */ React58.createElement("div", { ...domProps }, /* @__PURE__ */ React58.createElement(ExpandCollapseIcon, { expanded: false })) : /* @__PURE__ */ React58.createElement("div", { ...domProps });
         }
       });
     }
@@ -24524,7 +24940,7 @@ var deriveStateFromProps2 = (params) => {
 };
 
 // src/components/Menu/Menu.tsx
-var React58 = __toESM(require("react"));
+var React59 = __toESM(require("react"));
 var import_react57 = require("react");
 
 // src/utils/pageGeometry/Triangle.ts
@@ -24784,7 +25200,7 @@ function renderSubmenuForItem(item, config) {
   if (typeof itemMenu === "function") {
     itemMenu = itemMenu();
   }
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React59.createElement(
     Menu,
     {
       key: overlayId,
@@ -24994,7 +25410,7 @@ function MenuComponent(props) {
       setActiveItemKey(key);
     }
   });
-  renderedChildren = runtimeItems.map((runtimeItem, index) => /* @__PURE__ */ React58.createElement(
+  renderedChildren = runtimeItems.map((runtimeItem, index) => /* @__PURE__ */ React59.createElement(
     RuntimeItemRenderer,
     {
       key: runtimeItem.type === "item" ? runtimeItem.key : index,
@@ -25176,7 +25592,7 @@ function MenuComponent(props) {
       domRef.current = node;
     }
   }, []);
-  const result = /* @__PURE__ */ React58.createElement("div", { className: display.contents }, /* @__PURE__ */ React58.createElement(
+  const result = /* @__PURE__ */ React59.createElement("div", { className: display.contents }, /* @__PURE__ */ React59.createElement(
     "div",
     {
       ...domProps,
@@ -25206,12 +25622,12 @@ function MenuComponent(props) {
   return destroyed ? null : result;
 }
 function RuntimeItemRenderer(props) {
-  const [pressed, setPressed] = React58.useState(false);
+  const [pressed, setPressed] = React59.useState(false);
   const { columns, item, index, active, keyboardActive } = props;
   const key = item.type === "item" ? item.value.key : index;
   let content = null;
   if (item.type === "decoration") {
-    content = /* @__PURE__ */ React58.createElement("div", { style: item.style }, item.value);
+    content = /* @__PURE__ */ React59.createElement("div", { style: item.style }, item.value);
   } else {
     let spanIndex = 0;
     content = columns.map((col, i) => {
@@ -25272,7 +25688,7 @@ function RuntimeItemRenderer(props) {
           }
         }
       };
-      return col.render ? /* @__PURE__ */ React58.createElement(
+      return col.render ? /* @__PURE__ */ React59.createElement(
         RenderHookComponent,
         {
           key: `${key}-${field}`,
@@ -25284,10 +25700,10 @@ function RuntimeItemRenderer(props) {
             domProps
           }
         }
-      ) : /* @__PURE__ */ React58.createElement("div", { key: `${key}-${field}`, ...domProps }, target[field]);
+      ) : /* @__PURE__ */ React59.createElement("div", { key: `${key}-${field}`, ...domProps }, target[field]);
     }).filter(Boolean);
   }
-  return /* @__PURE__ */ React58.createElement("div", { className: MenuRowCls }, content);
+  return /* @__PURE__ */ React59.createElement("div", { className: MenuRowCls }, content);
 }
 
 // src/components/Menu/index.tsx
@@ -25301,12 +25717,12 @@ var { ManagedComponentContextProvider: MenuRoot } = buildManagedComponent({
 function MenuContextProvider(props) {
   const { componentActions, componentState } = useManagedComponentState();
   const getState = useLatest(componentState);
-  return /* @__PURE__ */ React59.createElement(
+  return /* @__PURE__ */ React60.createElement(
     MenuContext.Provider,
     {
       value: { componentActions, componentState, getState }
     },
-    /* @__PURE__ */ React59.createElement(MenuComponent, { domProps: props.domProps })
+    /* @__PURE__ */ React60.createElement(MenuComponent, { domProps: props.domProps })
   );
 }
 function Menu(props) {
@@ -25331,7 +25747,7 @@ function Menu(props) {
     __is_infinite_menu_component,
     ...domProps
   } = props;
-  const menu = /* @__PURE__ */ React59.createElement(
+  const menu = /* @__PURE__ */ React60.createElement(
     MenuRoot,
     {
       addSubmenuColumnIfNeeded,
@@ -25339,17 +25755,17 @@ function Menu(props) {
       wrapLabels,
       ...props
     },
-    /* @__PURE__ */ React59.createElement(MenuContextProvider, { domProps })
+    /* @__PURE__ */ React60.createElement(MenuContextProvider, { domProps })
   );
   if (false) {
-    return /* @__PURE__ */ React59.createElement(React59.StrictMode, null, menu);
+    return /* @__PURE__ */ React60.createElement(React60.StrictMode, null, menu);
   }
   return menu;
 }
 Menu[propToIdentifyMenu] = true;
 
 // src/components/InfiniteTable/utils/defaultGetColumnMenuItems.tsx
-var React60 = __toESM(require("react"));
+var React61 = __toESM(require("react"));
 function defaultGetColumnMenuItems(_items, params) {
   const { columnApi, column, getComputed, api } = params;
   const sortable = columnApi.isSortable();
@@ -25436,7 +25852,7 @@ function defaultGetColumnMenuItems(_items, params) {
           colItems.push({
             key: id,
             label,
-            check: /* @__PURE__ */ React60.createElement(
+            check: /* @__PURE__ */ React61.createElement(
               InfiniteCheckBox,
               {
                 key: col.id,
@@ -25498,7 +25914,7 @@ function getMenuForColumn(columnId, context, onHideIntent) {
   if (!items || !items.length) {
     return null;
   }
-  return /* @__PURE__ */ React61.createElement(
+  return /* @__PURE__ */ React62.createElement(
     MenuCmp,
     {
       autoFocus: true,
@@ -25616,7 +26032,7 @@ function useColumnMenu() {
 }
 
 // src/components/InfiniteTable/components/FocusDetect.tsx
-var React62 = __toESM(require("react"));
+var React63 = __toESM(require("react"));
 var import_react59 = require("react");
 var style = {
   width: 0,
@@ -25650,7 +26066,7 @@ function FocusDetect() {
     };
     focusLastFocusableCell(context);
   }, []);
-  return /* @__PURE__ */ React62.createElement(
+  return /* @__PURE__ */ React63.createElement(
     "div",
     {
       onFocus,
@@ -25788,18 +26204,18 @@ function useEditingCallbackProps() {
 var import_react61 = require("react");
 
 // src/components/InfiniteTable/utils/getFilterOperatorMenuForColumn.tsx
-var React65 = __toESM(require("react"));
+var React66 = __toESM(require("react"));
 
 // src/components/InfiniteTable/components/icons/ClearIcon.tsx
-var React63 = __toESM(require("react"));
+var React64 = __toESM(require("react"));
 var ClearIcon = (props) => {
-  return /* @__PURE__ */ React63.createElement(Icon, { ...props }, /* @__PURE__ */ React63.createElement("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }));
+  return /* @__PURE__ */ React64.createElement(Icon, { ...props }, /* @__PURE__ */ React64.createElement("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }));
 };
 
 // src/components/InfiniteTable/components/icons/DoneIcon.tsx
-var React64 = __toESM(require("react"));
+var React65 = __toESM(require("react"));
 var DoneIcon = (props) => {
-  return /* @__PURE__ */ React64.createElement(Icon, { ...props }, /* @__PURE__ */ React64.createElement("path", { d: "m9.55 19-6.725-6.725L5.25 9.85l4.3 4.325 9.225-9.225 2.425 2.4Z" }));
+  return /* @__PURE__ */ React65.createElement(Icon, { ...props }, /* @__PURE__ */ React65.createElement("path", { d: "m9.55 19-6.725-6.725L5.25 9.85l4.3 4.325 9.225-9.225 2.425 2.4Z" }));
 };
 
 // src/components/InfiniteTable/utils/getFilterOperatorMenuForColumn.tsx
@@ -25842,12 +26258,12 @@ function getFilterOperatorMenuForColumn(columnId, context, onHideIntent) {
     const IconCmp = operator.components?.Icon ?? FilterIcon;
     return {
       key,
-      icon: /* @__PURE__ */ React65.createElement(IconCmp, null),
-      label: /* @__PURE__ */ React65.createElement(React65.Fragment, null, operator.label ?? operator.name),
+      icon: /* @__PURE__ */ React66.createElement(IconCmp, null),
+      label: /* @__PURE__ */ React66.createElement(React66.Fragment, null, operator.label ?? operator.name),
       onAction: () => {
         api.setColumnFilterOperator(columnId, key);
       },
-      checked: checked ? /* @__PURE__ */ React65.createElement(DoneIcon, { size: 16 }) : null
+      checked: checked ? /* @__PURE__ */ React66.createElement(DoneIcon, { size: 16 }) : null
     };
   });
   const firstItems = [
@@ -25862,7 +26278,7 @@ function getFilterOperatorMenuForColumn(columnId, context, onHideIntent) {
     {
       key: "reset",
       label: "Reset",
-      icon: /* @__PURE__ */ React65.createElement(ClearIcon, null),
+      icon: /* @__PURE__ */ React66.createElement(ClearIcon, null),
       disabled: !column.computedFiltered,
       onAction: () => {
         api.clearColumnFilter(columnId);
@@ -25884,7 +26300,7 @@ function getFilterOperatorMenuForColumn(columnId, context, onHideIntent) {
     filterTypes
   };
   const items = getFilterOperatorMenuItems ? getFilterOperatorMenuItems(defaultItems, param) : defaultItems;
-  return /* @__PURE__ */ React65.createElement(
+  return /* @__PURE__ */ React66.createElement(
     MenuCmp,
     {
       autoFocus: true,
@@ -25990,7 +26406,7 @@ function useColumnFilterOperatorMenu() {
 var import_react62 = require("react");
 
 // src/components/InfiniteTable/utils/getCellContextMenu.tsx
-var React66 = __toESM(require("react"));
+var React67 = __toESM(require("react"));
 function getCellContextMenu(cellLocation, context, onHideIntent) {
   const { columnId, rowIndex, event } = cellLocation;
   const { getComputed, getState } = context;
@@ -26030,7 +26446,7 @@ function getCellContextMenu(cellLocation, context, onHideIntent) {
   }
   return {
     preventDefault: true,
-    menu: /* @__PURE__ */ React66.createElement(
+    menu: /* @__PURE__ */ React67.createElement(
       MenuCmp,
       {
         columns: menuColumns,
@@ -26086,7 +26502,7 @@ function getTableContextMenu(menuLocation, context, onHideIntent) {
   }
   return {
     preventDefault: true,
-    menu: /* @__PURE__ */ React66.createElement(
+    menu: /* @__PURE__ */ React67.createElement(
       MenuCmp,
       {
         columns: menuColumns,
@@ -26296,7 +26712,7 @@ function useTableContextMenu() {
 
 // src/components/InfiniteTable/components/HScrollSyncContent.tsx
 var import_react64 = require("react");
-var React67 = __toESM(require("react"));
+var React68 = __toESM(require("react"));
 
 // src/components/InfiniteTable/hooks/useGridScroll.ts
 var import_react63 = require("react");
@@ -26342,7 +26758,7 @@ function HScrollSyncContent(props) {
   } else if (maxWidth === "viewport") {
     style2.maxWidth = ThemeVars.runtime.bodyWidth;
   }
-  return /* @__PURE__ */ React67.createElement(
+  return /* @__PURE__ */ React68.createElement(
     "div",
     {
       ref: domRef,
@@ -26443,7 +26859,7 @@ function useHorizontalLayout() {
 }
 
 // src/components/InfiniteTable/hooks/useDebugMode.ts
-var React68 = __toESM(require("react"));
+var React69 = __toESM(require("react"));
 var logWarning = once(() => {
   console.warn(
     `It appears you have not loaded the CSS file for InfiniteTable.
@@ -26457,7 +26873,7 @@ import '@infinite-table/infinite-react/index.css'
 var cssFileLoadedVarName = stripVar(ThemeVars.loaded);
 function useDebugMode() {
   const { getState } = useInfiniteTable();
-  React68.useEffect(() => {
+  React69.useEffect(() => {
     runDebugMode(getState);
   }, []);
 }
@@ -26513,7 +26929,7 @@ function InfiniteTableHeader2() {
   const { state: componentState, getComputed } = context;
   const { header, brain, headerBrain, wrapRowsHorizontally } = componentState;
   const { scrollbars } = getComputed();
-  return header ? /* @__PURE__ */ React69.createElement(
+  return header ? /* @__PURE__ */ React70.createElement(
     TableHeaderWrapper,
     {
       wrapRowsHorizontally: !!wrapRowsHorizontally,
@@ -26530,7 +26946,7 @@ var InfiniteTableBodyCls = join(
   transformTranslateZero
 );
 function InfiniteTableBodyContainer(props) {
-  return /* @__PURE__ */ React69.createElement(
+  return /* @__PURE__ */ React70.createElement(
     "div",
     {
       ...props,
@@ -26567,7 +26983,7 @@ function InfiniteTableBody() {
   const {
     componentState: { loading }
   } = useDataSourceContextValue();
-  const onContextMenu = React69.useCallback((event) => {
+  const onContextMenu = React70.useCallback((event) => {
     const state = context.getState();
     const target = event.target;
     if (!masterContext && event._from_row_detail) {
@@ -26613,7 +27029,7 @@ function InfiniteTableBody() {
   });
   const { autoFocus, tabIndex } = domProps ?? {};
   useToggleWrapRowsHorizontally();
-  return /* @__PURE__ */ React69.createElement(InfiniteTableBodyContainer, { onContextMenu }, /* @__PURE__ */ React69.createElement(
+  return /* @__PURE__ */ React70.createElement(InfiniteTableBodyContainer, { onContextMenu }, /* @__PURE__ */ React70.createElement(
     HeadlessTable,
     {
       forceRerenderTimestamp: componentState.forceBodyRerenderTimestamp,
@@ -26634,9 +27050,9 @@ function InfiniteTableBody() {
       cellHoverClassNames: showHoverRows ? HOVERED_CLASS_NAMES : void 0,
       scrollerDOMRef
     }
-  ), /* @__PURE__ */ React69.createElement(LoadMaskCmp, { visible: loading }, loadingText));
+  ), /* @__PURE__ */ React70.createElement(LoadMaskCmp, { visible: loading }, loadingText));
 }
-var InfiniteTableComponent = React69.memo(
+var InfiniteTableComponent = React70.memo(
   function InfiniteTableComponent2() {
     const context = useInfiniteTable();
     const masterContext = useMasterDetailContext();
@@ -26668,7 +27084,7 @@ var InfiniteTableComponent = React69.memo(
     useScrollToActiveRow(activeRowIndex, dataArray.length, api);
     useScrollToActiveCell(activeCellIndex, dataArray.length, api);
     const { onKeyDown: onKeyDown2 } = useDOMEventHandlers();
-    React69.useEffect(() => {
+    React70.useEffect(() => {
       const dataSourceState = getDataSourceState();
       const onChange = debounce(
         (renderRange) => {
@@ -26691,7 +27107,7 @@ var InfiniteTableComponent = React69.memo(
       ...initialDOMProps
     } = componentState.domProps ?? {};
     const domProps = useDOMProps(initialDOMProps);
-    React69.useEffect(() => {
+    React70.useEffect(() => {
       brain.setScrollStopDelay(scrollStopDelay);
       dataSourceActions.scrollStopDelayUpdatedByTable = scrollStopDelay;
     }, [scrollStopDelay]);
@@ -26702,7 +27118,7 @@ var InfiniteTableComponent = React69.memo(
     const { menuPortal: cellContextMenuPortal } = useCellContextMenu();
     const { menuPortal: tableContextMenuPortal } = useTableContextMenu();
     const { menuPortal: filterOperatorMenuPortal } = useColumnFilterOperatorMenu();
-    React69.useEffect(() => {
+    React70.useEffect(() => {
       if (typeof globalThis.__DO_NOT_USE_UNLESS_YOU_KNOW_WHAT_YOURE_DOING_IS_READY === "function") {
         globalThis.__DO_NOT_USE_UNLESS_YOU_KNOW_WHAT_YOURE_DOING_IS_READY(
           componentState.id,
@@ -26716,13 +27132,13 @@ var InfiniteTableComponent = React69.memo(
       }
     }, [componentState.ready]);
     useDebugMode();
-    React69.useEffect(() => {
+    React70.useEffect(() => {
       if (masterContext) {
         portalDOMRef.current = masterContext.getMasterState().portalDOMRef.current;
       }
     }, []);
-    const children = initialChildren ?? /* @__PURE__ */ React69.createElement(React69.Fragment, null, /* @__PURE__ */ React69.createElement(InfiniteTableHeader2, null), /* @__PURE__ */ React69.createElement(InfiniteTableBody, null));
-    return /* @__PURE__ */ React69.createElement("div", { onKeyDown: onKeyDown2, ref: domRef, ...domProps }, children, /* @__PURE__ */ React69.createElement(
+    const children = initialChildren ?? /* @__PURE__ */ React70.createElement(React70.Fragment, null, /* @__PURE__ */ React70.createElement(InfiniteTableHeader2, null), /* @__PURE__ */ React70.createElement(InfiniteTableBody, null));
+    return /* @__PURE__ */ React70.createElement("div", { onKeyDown: onKeyDown2, ref: domRef, ...domProps }, children, /* @__PURE__ */ React70.createElement(
       "div",
       {
         ref: portalDOMRef,
@@ -26738,14 +27154,14 @@ var InfiniteTableComponent = React69.memo(
       cellContextMenuPortal,
       tableContextMenuPortal,
       filterOperatorMenuPortal
-    ), rowHeightCSSVar ? /* @__PURE__ */ React69.createElement(
+    ), rowHeightCSSVar ? /* @__PURE__ */ React70.createElement(
       CSSNumericVariableWatch,
       {
         key: "row-height",
         varName: rowHeightCSSVar,
         onChange: onRowHeightCSSVarChange
       }
-    ) : null, /* @__PURE__ */ React69.createElement(
+    ) : null, /* @__PURE__ */ React70.createElement(
       CSSNumericVariableWatch,
       {
         key: "flashing-duration",
@@ -26753,21 +27169,21 @@ var InfiniteTableComponent = React69.memo(
         varName: ThemeVars.components.Cell.flashingDuration,
         onChange: onFlashingDurationCSSVarChange
       }
-    ), rowDetailHeightCSSVar ? /* @__PURE__ */ React69.createElement(
+    ), rowDetailHeightCSSVar ? /* @__PURE__ */ React70.createElement(
       CSSNumericVariableWatch,
       {
         key: "row-detail-height",
         varName: rowDetailHeightCSSVar,
         onChange: onRowDetailHeightCSSVarChange
       }
-    ) : null, columnHeaderHeightCSSVar ? /* @__PURE__ */ React69.createElement(
+    ) : null, columnHeaderHeightCSSVar ? /* @__PURE__ */ React70.createElement(
       CSSNumericVariableWatch,
       {
         key: "column-header-height",
         varName: columnHeaderHeightCSSVar,
         onChange: onColumnHeaderHeightCSSVarChange
       }
-    ) : null, licenseValid ? null : /* @__PURE__ */ React69.createElement(InfiniteTableLicenseFooter, null), /* @__PURE__ */ React69.createElement(FocusDetect, null));
+    ) : null, licenseValid ? null : /* @__PURE__ */ React70.createElement(InfiniteTableLicenseFooter, null), /* @__PURE__ */ React70.createElement(FocusDetect, null));
   }
 );
 function InfiniteTableContextProvider({
@@ -26791,7 +27207,7 @@ function InfiniteTableContextProvider({
     getDataSourceMasterContext,
     api: dataSourceApi
   } = useDataSourceContextValue();
-  const [imperativeApi] = React69.useState(() => {
+  const [imperativeApi] = React70.useState(() => {
     return getImperativeApi({
       getComputed,
       getState,
@@ -26827,20 +27243,20 @@ function InfiniteTableContextProvider({
     },
     { earlyAttach: true, debounce: 50 }
   );
-  React69.useEffect(() => {
+  React70.useEffect(() => {
     if (scrollerDOMRef.current) {
       scrollerDOMRef.current.scrollTop = 0;
     }
   }, [scrollTopKey, scrollerDOMRef]);
   const TableContext2 = getInfiniteTableContext();
-  return /* @__PURE__ */ React69.createElement(TableContext2.Provider, { value: contextValue }, /* @__PURE__ */ React69.createElement(InfiniteTableComponent, null));
+  return /* @__PURE__ */ React70.createElement(TableContext2.Provider, { value: contextValue }, /* @__PURE__ */ React70.createElement(InfiniteTableComponent, null));
 }
 var DEFAULT_ROW_HEIGHT = 40;
 var DEFAULT_COLUMN_HEADER_HEIGHT = toCSSVarName(columnHeaderHeightName);
 var InfiniteTable = function(props) {
   const table = (
     //@ts-ignore
-    /* @__PURE__ */ React69.createElement(
+    /* @__PURE__ */ React70.createElement(
       InfiniteTableRoot,
       {
         repeatWrappedGroupRows: !!props.wrapRowsHorizontally,
@@ -26848,30 +27264,30 @@ var InfiniteTable = function(props) {
         columnHeaderHeight: DEFAULT_COLUMN_HEADER_HEIGHT,
         ...props
       },
-      /* @__PURE__ */ React69.createElement(InfiniteTableContextProvider, { children: props.children })
+      /* @__PURE__ */ React70.createElement(InfiniteTableContextProvider, { children: props.children })
     )
   );
   if (false) {
-    return /* @__PURE__ */ React69.createElement(React69.StrictMode, null, table);
+    return /* @__PURE__ */ React70.createElement(React70.StrictMode, null, table);
   }
   return table;
 };
 InfiniteTable.Header = InfiniteTableHeader2;
 InfiniteTable.Body = InfiniteTableBody;
 InfiniteTable.HScrollSyncContent = HScrollSyncContent;
-InfiniteTable.Footer = () => /* @__PURE__ */ React69.createElement(InfiniteTableFooter, null);
+InfiniteTable.Footer = () => /* @__PURE__ */ React70.createElement(InfiniteTableFooter, null);
 
 // src/components/TreeGrid/TreeDataSource.tsx
-var React70 = __toESM(require("react"));
+var React71 = __toESM(require("react"));
 function TreeDataSource(props) {
   const { DataSource: DataSourceComponent } = useDataSourceInternal({ nodesKey: "children", ...props });
-  return /* @__PURE__ */ React70.createElement(DataSourceComponent, null, props.children ?? null);
+  return /* @__PURE__ */ React71.createElement(DataSourceComponent, null, props.children ?? null);
 }
 
 // src/components/TreeGrid/TreeGrid.tsx
-var React71 = __toESM(require("react"));
+var React72 = __toESM(require("react"));
 function TreeGrid(props) {
-  return /* @__PURE__ */ React71.createElement(InfiniteTable, { ...props });
+  return /* @__PURE__ */ React72.createElement(InfiniteTable, { ...props });
 }
 
 // src/components/DataSource/DataLoader/DataQuery.ts
@@ -27338,12 +27754,12 @@ var useEffectWhen = (callback, options) => {
 };
 
 // src/components/InfiniteTable/components/InfiniteTableRow/FlashingColumnCell.tsx
-var React72 = __toESM(require("react"));
+var React73 = __toESM(require("react"));
 var currentFlashingDurationVar = stripVar(
   InternalVars.currentFlashingDuration
 );
 var defaultRender = ({ children }) => {
-  return /* @__PURE__ */ React72.createElement(React72.Fragment, null, children);
+  return /* @__PURE__ */ React73.createElement(React73.Fragment, null, children);
 };
 var DEFAULT_FLASH_DURATION = 1e3;
 var INTERNAL_FLASH_CLS_FOR_DIRECTION = {
@@ -27365,7 +27781,7 @@ var createFlashingColumnCellComponent = (options = {}) => {
     // fadeClassName,
     render = defaultRender
   } = options;
-  const FlashingColumnCell2 = React72.forwardRef(
+  const FlashingColumnCell2 = React73.forwardRef(
     (props, _ref) => {
       const cellContext = useInfiniteColumnCell();
       const {
@@ -27375,13 +27791,13 @@ var createFlashingColumnCellComponent = (options = {}) => {
       const { domRef, value, column, rowInfo, htmlElementRef } = cellContext;
       const rowId = rowInfo.id;
       const columnId = column.id;
-      const initialRef = React72.useRef(true);
-      const oldValueRef = React72.useRef(value);
+      const initialRef = React73.useRef(true);
+      const oldValueRef = React73.useRef(value);
       const oldValue = initialRef.current ? null : oldValueRef.current;
       initialRef.current = false;
-      const flashTimeoutIdRef = React72.useRef();
-      const flashDirectionRef = React72.useRef();
-      const fadeTimeoutIdRef = React72.useRef();
+      const flashTimeoutIdRef = React73.useRef();
+      const flashDirectionRef = React73.useRef();
+      const fadeTimeoutIdRef = React73.useRef();
       useEffectWhen(
         () => {
           if (value === oldValueRef.current) {
@@ -27428,7 +27844,7 @@ var createFlashingColumnCellComponent = (options = {}) => {
           different: [value]
         }
       );
-      return /* @__PURE__ */ React72.createElement("div", { ref: domRef, ...props, className: join(props.className) }, render({ children: props.children, oldValue }));
+      return /* @__PURE__ */ React73.createElement("div", { ref: domRef, ...props, className: join(props.className) }, render({ children: props.children, oldValue }));
     }
   );
   return FlashingColumnCell2;