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

package/index.mjs

@@ -73,7 +73,7 @@ function debounce(fn, { wait }) {
 }
 
 // src/components/InfiniteTable/index.tsx
-import * as React69 from "react";
+import * as React70 from "react";
 
 // src/utils/join.ts
 var join = (...args) => args.filter((x) => !!`${x}`).join(" ");
@@ -109,12 +109,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;
       }
@@ -141,22 +144,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);
   }
@@ -244,6 +258,7 @@ var DeepMap = class {
       (_value, keys2, _i, _next, pair2) => {
         fn({ ...pair2, keys: keys2 });
       },
+      false,
       currentMap,
       depthLimit,
       excludeSelf
@@ -296,6 +311,7 @@ var DeepMap = class {
         fn(keys2, value);
         next?.();
       },
+      false,
       currentMap,
       depthLimit,
       excludeSelf
@@ -497,7 +513,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;
@@ -506,15 +522,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 = [];
@@ -528,6 +552,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) {
@@ -1121,7 +1152,7 @@ function useMasterDetailContext() {
 }
 
 // src/components/HeadlessTable/index.tsx
-import * as React13 from "react";
+import * as React14 from "react";
 import {
   useCallback as useCallback4,
   useEffect as useEffect7,
@@ -1239,7 +1270,7 @@ var VirtualScrollContainer = React7.forwardRef(
 );
 
 // src/components/HeadlessTable/RawTable.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 import { useEffect as useEffect4, useLayoutEffect as useLayoutEffect3, useMemo as useMemo2 } from "react";
 
 // src/components/RawList/AvoidReactDiff.tsx
@@ -1488,29 +1519,6 @@ function setInfiniteScrollPosition(scrollPosition, node) {
   );
 }
 
-// src/components/HeadlessTable/ReactHeadlessTableRenderer.tsx
-import * as React9 from "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);
@@ -2778,300 +2786,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
+import * as React9 from "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
+import * as React10 from "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 = () => {
+    };
   }
 };
 
@@ -3083,7 +3652,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);
@@ -3091,14 +3660,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();
@@ -3324,12 +3885,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);
@@ -3395,8 +3957,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;
@@ -3539,11 +4100,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);
           });
         }
       });
@@ -3559,11 +4120,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);
           });
         }
       });
@@ -3596,19 +4157,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;
@@ -3640,15 +4198,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;
       }
@@ -3688,21 +4246,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
@@ -3713,10 +4272,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({
@@ -3729,16 +4289,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);
         }
       }
@@ -3899,15 +4456,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(() => {
@@ -3935,7 +4488,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
@@ -3950,7 +4503,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();
@@ -3979,86 +4532,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;
@@ -4072,14 +4572,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;
             }
@@ -4087,37 +4584,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;
@@ -4126,20 +4605,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]) => {
@@ -4149,84 +4623,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;
     }
@@ -4243,27 +4674,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) {
@@ -4272,7 +4694,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
       colIndex
     };
   }
-  renderCellAtElement(rowIndex, colIndex, elementIndex, renderCell) {
+  renderCellAt(rowIndex, colIndex, cell, renderCell) {
     if (this.destroyed) {
       return;
     }
@@ -4303,42 +4725,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) => {
@@ -4378,14 +4796,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,
@@ -4403,10 +4822,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}`
   );
@@ -4470,12 +4886,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
-import * as React11 from "react";
+import * as React12 from "react";
 import { useEffect as useEffect5, useLayoutEffect as useLayoutEffect4, useRef as useRef5 } from "react";
 
 // src/components/hooks/useRerender.ts
@@ -4665,7 +5081,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,
@@ -4678,12 +5094,12 @@ var ActiveRowIndicatorFn = (props) => {
     ))
   );
 };
-var ActiveRowIndicator = React11.memo(
+var ActiveRowIndicator = React12.memo(
   ActiveRowIndicatorFn
 );
 
 // src/components/InfiniteTable/components/ActiveCellIndicator.tsx
-import * as React12 from "react";
+import * as React13 from "react";
 import { useEffect as useEffect6, useLayoutEffect as useLayoutEffect5, useRef as useRef6 } from "react";
 var { rootClassName: rootClassName4 } = internalProps;
 var baseCls2 = `${rootClassName4}-ActiveCellIndicator`;
@@ -4725,7 +5141,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,
@@ -4735,7 +5151,7 @@ var ActiveCellIndicatorFn = (props) => {
           zIndex: `var(${columnZIndexAtIndex2}-${props.activeCellIndex[1]})`
         } : void 0
       },
-      /* @__PURE__ */ React12.createElement(
+      /* @__PURE__ */ React13.createElement(
         "div",
         {
           "data-name": "active-cell-indicator",
@@ -4747,7 +5163,7 @@ var ActiveCellIndicatorFn = (props) => {
     )
   );
 };
-var ActiveCellIndicator = React12.memo(
+var ActiveCellIndicator = React13.memo(
   ActiveCellIndicatorFn
 );
 
@@ -4841,21 +5257,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,
@@ -4867,7 +5283,7 @@ function HeadlessTable(props) {
           cellHoverClassNames
         }
       ),
-      activeCellIndex != null ? /* @__PURE__ */ React13.createElement(
+      activeCellIndex != null ? /* @__PURE__ */ React14.createElement(
         ActiveCellIndicator,
         {
           brain,
@@ -4876,8 +5292,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,
@@ -4888,7 +5304,7 @@ function HeadlessTable(props) {
 }
 
 // src/components/hooks/useComponentState/index.tsx
-import * as React14 from "react";
+import * as React15 from "react";
 import {
   useReducer,
   createContext as createContext3,
@@ -5295,9 +5711,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,
@@ -5306,11 +5722,11 @@ function buildManagedComponent(config) {
 }
 function useManagedComponentState() {
   const Context = getComponentStateContext();
-  return React14.useContext(Context);
+  return React15.useContext(Context);
 }
 
 // src/components/InfiniteTable/components/InfiniteTableFooter/InfiniteTableFooter.tsx
-import * as React15 from "react";
+import * as React16 from "react";
 
 // src/components/InfiniteTable/hooks/useInternalProps.ts
 var useInternalProps = () => {
@@ -5340,7 +5756,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,
@@ -5356,7 +5772,7 @@ function InfiniteTableFooter(props) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
-import * as React42 from "react";
+import * as React43 from "react";
 import { useCallback as useCallback14, useContext as useContext7, useEffect as useEffect15, useRef as useRef16 } from "react";
 import { createPortal } from "react-dom";
 
@@ -5370,7 +5786,7 @@ function keyMirror(obj) {
 }
 
 // src/components/InfiniteTable/components/icons/Icon.tsx
-import * as React16 from "react";
+import * as React17 from "react";
 var Icon = (props) => {
   const size = props.size ?? `var(--infinite-icon-size)`;
   const style2 = {
@@ -5382,69 +5798,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
-import * as React17 from "react";
+import * as React18 from "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
-import * as React18 from "react";
+import * as React19 from "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
-import * as React19 from "react";
+import * as React20 from "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
-import * as React20 from "react";
+import * as React21 from "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
-import * as React21 from "react";
+import * as React22 from "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
-import * as React22 from "react";
+import * as React23 from "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
-import * as React23 from "react";
+import * as React24 from "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
-import * as React24 from "react";
+import * as React25 from "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
-import * as React25 from "react";
+import * as React26 from "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
-import * as React29 from "react";
+import * as React30 from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableColumnHeaderFilter.tsx
-import * as React28 from "react";
+import * as React29 from "react";
 import { useEffect as useEffect11, useState as useState6 } from "react";
 
 // src/components/InfiniteTable/hooks/useInfiniteTable.ts
@@ -5477,7 +5893,7 @@ var useInfiniteTableState = () => {
 };
 
 // src/components/InfiniteTable/components/icons/FilterIcon.tsx
-import * as React26 from "react";
+import * as React27 from "react";
 import { useEffect as useEffect10, useLayoutEffect as useLayoutEffect8, useState as useState5 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts
@@ -5543,7 +5959,7 @@ function FilterIcon(props) {
     return null;
   }
   const indexStyle = {};
-  return /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React27.createElement(
     "div",
     {
       "data-name": "filter-icon",
@@ -5555,7 +5971,7 @@ function FilterIcon(props) {
         `${InfiniteIconClassName}-filter`
       )
     },
-    showIndex ? /* @__PURE__ */ React26.createElement(
+    showIndex ? /* @__PURE__ */ React27.createElement(
       "div",
       {
         "data-name": "index",
@@ -5564,9 +5980,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 } })
   );
 }
 
@@ -6613,10 +7029,10 @@ function getColumnLabel(colIdOrCol, context) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableColumnHeaderFilterContext.ts
-import React27 from "react";
+import React28 from "react";
 var InfiniteTableColumnHeaderFilterClassName = `${rootClassName2}HeaderCell__filter`;
 var InfiniteTableColumnHeaderFilterOperatorClassName = `${rootClassName2}HeaderCell__filterOperator`;
-var InfiniteTableColumnHeaderFilterContext = React27.createContext(null);
+var InfiniteTableColumnHeaderFilterContext = React28.createContext(null);
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableColumnHeaderFilter.tsx
 var InfiniteTableColumnHeaderFilterInputClassName = `${InfiniteTableColumnHeaderFilterClassName}__input`;
@@ -6627,14 +7043,14 @@ function InfiniteTableColumnHeaderFilter(props) {
   const FilterEditor = props.filterEditor;
   const FilterOperatorSwitch = props.filterOperatorSwitch;
   const [focused, setFocused] = useState6(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,
@@ -6648,13 +7064,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",
@@ -6672,7 +7088,7 @@ function InfiniteTableFilterOperatorSwitch() {
         disabled ? `${InfiniteTableColumnHeaderFilterOperatorClassName}--disabled` : ""
       )
     },
-    /* @__PURE__ */ React28.createElement(
+    /* @__PURE__ */ React29.createElement(
       Icon2,
       {
         size: 20,
@@ -6684,7 +7100,7 @@ function InfiniteTableFilterOperatorSwitch() {
   );
 }
 function InfiniteTableColumnHeaderFilterEmpty() {
-  return /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React29.createElement(
     "div",
     {
       onPointerUp: stopPropagation,
@@ -6699,7 +7115,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;
@@ -6707,17 +7123,17 @@ function useInfiniteColumnFilterEditor() {
   const [theValue, setTheValue] = useState6(
     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]);
   useEffect11(() => {
@@ -6760,7 +7176,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,
@@ -6777,7 +7193,7 @@ function StringFilterEditor() {
 }
 function NumberFilterEditor() {
   const { ariaLabel, value, setValue, className, disabled } = useInfiniteColumnFilterEditor();
-  return /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React30.createElement(
     "input",
     {
       "aria-label": ariaLabel,
@@ -7260,7 +7676,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) {
@@ -7694,7 +8110,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) => {
@@ -8035,14 +8451,14 @@ var useColumnPointerEvents = ({
 };
 
 // src/components/InfiniteTable/utils/RenderHookComponentForInfinite.tsx
-import * as React37 from "react";
+import * as React38 from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx
-import * as React36 from "react";
+import * as React37 from "react";
 import { useCallback as useCallback12, useContext as useContext6, useMemo as useMemo4 } from "react";
 
 // src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
-import * as React32 from "react";
+import * as React33 from "react";
 
 // src/components/DataSource/state/rowInfoStatus.ts
 var showLoadingIcon = (rowInfo) => {
@@ -8053,7 +8469,7 @@ var showLoadingIcon = (rowInfo) => {
 };
 
 // src/components/InfiniteTable/components/icons/ExpandCollapseIcon.tsx
-import * as React30 from "react";
+import * as React31 from "react";
 import { useState as useState8 } from "react";
 
 // src/components/InfiniteTable/components/icons/ExpandCollapseIcon.css.ts
@@ -8073,13 +8489,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",
@@ -8106,19 +8522,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
-import * as React31 from "react";
+import * as React32 from "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",
@@ -8138,7 +8554,7 @@ var LoadingIcon = (props) => {
         "InfiniteIcon-loading"
       )
     },
-    /* @__PURE__ */ React31.createElement(
+    /* @__PURE__ */ React32.createElement(
       "circle",
       {
         cx: "50",
@@ -8148,7 +8564,7 @@ var LoadingIcon = (props) => {
         r: "35",
         strokeDasharray: "164.93361431346415 56.97787143782138"
       },
-      /* @__PURE__ */ React31.createElement(
+      /* @__PURE__ */ React32.createElement(
         "animateTransform",
         {
           attributeName: "transform",
@@ -8193,11 +8609,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({
@@ -8245,9 +8661,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,
@@ -8261,7 +8677,7 @@ function getGroupColumnRenderGroupIcon({
     }
     if (initialRenderGroupIcon) {
       renderOptions.renderBag.groupIcon = icon;
-      icon = /* @__PURE__ */ React32.createElement(
+      icon = /* @__PURE__ */ React33.createElement(
         RenderCellHookComponent,
         {
           render: initialRenderGroupIcon,
@@ -8349,7 +8765,7 @@ var FlashingColumnCellRecipe = createRuntimeFn({ defaultClassName: "cell_Flashin
 var SelectionCheckboxCls = "cell_SelectionCheckboxCls__1eexc2a7";
 
 // src/components/InfiniteTable/components/CheckBox.tsx
-import * as React33 from "react";
+import * as React34 from "react";
 import { useEffect as useEffect13, useRef as useRef12 } from "react";
 
 // src/components/InfiniteTable/components/CheckBox.css.ts
@@ -8388,7 +8804,7 @@ function InfiniteCheckBoxComponent() {
   useEffect13(() => {
     inputRef.current.indeterminate = checked == null;
   }, [checked]);
-  return /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React34.createElement(
     "input",
     {
       ...domProps,
@@ -8407,7 +8823,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
@@ -8831,7 +9247,7 @@ function getFormattedValueContextForCell(options) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
-import * as React34 from "react";
+import * as React35 from "react";
 var { rootClassName: rootClassName5 } = internalProps;
 var InfiniteTableCellClassName = `${rootClassName5}Cell`;
 var InfiniteTableCellContentClassName = `${rootClassName5}Cell_content`;
@@ -8878,7 +9294,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(
@@ -8896,21 +9312,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
-import * as React35 from "react";
+import * as React36 from "react";
 import { useCallback as useCallback10, useRef as useRef13 } from "react";
 function InfiniteTableColumnEditor() {
   const { initialValue, setValue, confirmEdit, cancelEdit, readOnly } = useInfiniteColumnEditor();
   const domRef = useRef13();
-  const refCallback = React35.useCallback((node) => {
+  const refCallback = React36.useCallback((node) => {
     domRef.current = node;
     if (node) {
       node.focus();
@@ -8926,7 +9342,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,
@@ -8953,11 +9369,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: {
@@ -8975,7 +9391,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,
@@ -9000,7 +9416,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: {
@@ -9060,7 +9476,7 @@ function InfiniteTableColumnCellFn(props) {
     hidden,
     showZebraRows
   } = props;
-  const htmlElementRef = React36.useRef(null);
+  const htmlElementRef = React37.useRef(null);
   const domRef = useCallback12(
     (node) => {
       htmlElementRef.current = node;
@@ -9071,7 +9487,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 {
@@ -9121,7 +9537,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 = useCallback12(
     (event) => {
       const colIndex = column.computedVisibleIndex;
@@ -9186,7 +9602,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 = useCallback12(
     once(() => {
       if (hidden) {
@@ -9197,7 +9613,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,
@@ -9209,7 +9625,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,
@@ -9217,7 +9633,7 @@ function InfiniteTableColumnCellFn(props) {
           }
         );
         if (renderFunctions.renderSelectionCheckBox !== true) {
-          renderParam.renderBag.selectionCheckBox = /* @__PURE__ */ React36.createElement(
+          renderParam.renderBag.selectionCheckBox = /* @__PURE__ */ React37.createElement(
             RenderCellHookComponent,
             {
               render: renderFunctions.renderSelectionCheckBox,
@@ -9238,7 +9654,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,
@@ -9247,7 +9663,7 @@ function InfiniteTableColumnCellFn(props) {
           );
         }
         if (fn) {
-          renderParam.renderBag.treeIcon = /* @__PURE__ */ React36.createElement(
+          renderParam.renderBag.treeIcon = /* @__PURE__ */ React37.createElement(
             RenderCellHookComponent,
             {
               render: fn,
@@ -9260,7 +9676,7 @@ function InfiniteTableColumnCellFn(props) {
         }
       }
       if (renderFunctions.renderRowDetailIcon) {
-        renderParam.renderBag.rowDetailsIcon = /* @__PURE__ */ React36.createElement(
+        renderParam.renderBag.rowDetailsIcon = /* @__PURE__ */ React37.createElement(
           RenderCellHookComponent,
           {
             render: defaultRenderRowDetailIcon,
@@ -9273,7 +9689,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,
@@ -9286,7 +9702,7 @@ function InfiniteTableColumnCellFn(props) {
         }
       }
       if (renderFunctions.renderValue) {
-        renderParam.renderBag.value = /* @__PURE__ */ React36.createElement(
+        renderParam.renderBag.value = /* @__PURE__ */ React37.createElement(
           RenderCellHookComponent,
           {
             render: renderFunctions.renderValue,
@@ -9298,7 +9714,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,
@@ -9310,7 +9726,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,
@@ -9326,9 +9742,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,
@@ -9514,16 +9930,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() {
@@ -9538,14 +9954,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;
@@ -9573,7 +9989,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,
@@ -9583,11 +9999,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,
@@ -9597,7 +10013,7 @@ function RenderHeaderCellHookComponent(props) {
 }
 
 // src/components/InfiniteTable/components/icons/MenuIcon.tsx
-import * as React38 from "react";
+import * as React39 from "react";
 var defaultLineStyle2 = {
   width: "100%",
   pointerEvents: "none"
@@ -9623,7 +10039,7 @@ function MenuIcon(props) {
     borderTop: `${ThemeVars.components.HeaderCell.menuIconLineWidth} solid currentColor`,
     ...props.lineStyle
   };
-  return /* @__PURE__ */ React38.createElement(
+  return /* @__PURE__ */ React39.createElement(
     "div",
     {
       ...domProps,
@@ -9640,12 +10056,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
-import * as React39 from "react";
+import * as React40 from "react";
 import { useEffect as useEffect14, useState as useState10 } from "react";
 
 // src/components/InfiniteTable/components/icons/SortIcon.css.ts
@@ -9704,7 +10120,7 @@ function SortIcon(props) {
   if (direction === -1) {
     indexStyle.top = "100%";
   }
-  return /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React40.createElement(
     "div",
     {
       "data-name": "sort-icon",
@@ -9716,7 +10132,7 @@ function SortIcon(props) {
         `${InfiniteIconClassName}-sort`
       )
     },
-    showIndex ? /* @__PURE__ */ React39.createElement(
+    showIndex ? /* @__PURE__ */ React40.createElement(
       "div",
       {
         "data-name": "index",
@@ -9725,25 +10141,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
-import * as React41 from "react";
+import * as React42 from "react";
 import { useCallback as useCallback13 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/index.tsx
 import { useRef as useRef15, useState as useState11 } from "react";
-import * as React40 from "react";
+import * as React41 from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/columnResizer.ts
 function getColumnResizer(colIndex, {
@@ -9959,7 +10375,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,
@@ -9972,7 +10388,7 @@ function ResizeHandleFn(props) {
       )}`,
       onPointerDown
     },
-    /* @__PURE__ */ React40.createElement(
+    /* @__PURE__ */ React41.createElement(
       "div",
       {
         style: style2,
@@ -9986,7 +10402,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) {
@@ -10056,7 +10472,7 @@ function useColumnResizeHandle(column, opts) {
     },
     [computeResizeForDiff]
   );
-  const resizeHandle = column.computedResizable ? /* @__PURE__ */ React41.createElement(
+  const resizeHandle = column.computedResizable ? /* @__PURE__ */ React42.createElement(
     ResizeHandle,
     {
       horizontalLayoutPageIndex: opts.horizontalLayoutPageIndex,
@@ -10079,7 +10495,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: {
@@ -10104,9 +10520,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": ``,
@@ -10168,7 +10584,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,
@@ -10185,7 +10601,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",
@@ -10205,7 +10621,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 = useRef16(null);
   const initialRenderParam = {
     horizontalLayoutPageIndex,
@@ -10240,7 +10656,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,
@@ -10258,7 +10674,7 @@ function InfiniteTableHeaderCell(props) {
       );
     }
     if (column.renderFilterIcon) {
-      renderParam2.renderBag.filterIcon = /* @__PURE__ */ React42.createElement(
+      renderParam2.renderBag.filterIcon = /* @__PURE__ */ React43.createElement(
         RenderHeaderCellHookComponent,
         {
           render: column.renderFilterIcon,
@@ -10270,7 +10686,7 @@ function InfiniteTableHeaderCell(props) {
       );
     }
     if (typeof column.renderMenuIcon === "function") {
-      renderParam2.renderBag.menuIcon = /* @__PURE__ */ React42.createElement(
+      renderParam2.renderBag.menuIcon = /* @__PURE__ */ React43.createElement(
         RenderHeaderCellHookComponent,
         {
           render: (param) => {
@@ -10282,7 +10698,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;
           },
@@ -10296,7 +10712,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,
@@ -10310,7 +10726,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,
@@ -10325,7 +10741,7 @@ function InfiniteTableHeaderCell(props) {
       }
     }
     if (header instanceof Function) {
-      renderParam2.renderBag.header = /* @__PURE__ */ React42.createElement(
+      renderParam2.renderBag.header = /* @__PURE__ */ React43.createElement(
         RenderHeaderCellHookComponent,
         {
           render: header,
@@ -10337,10 +10753,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,
@@ -10378,7 +10794,7 @@ function InfiniteTableHeaderCell(props) {
   });
   let draggingProxy = null;
   if (dragging && proxyPosition) {
-    draggingProxy = /* @__PURE__ */ React42.createElement(
+    draggingProxy = /* @__PURE__ */ React43.createElement(
       "div",
       {
         key: column.id,
@@ -10402,7 +10818,7 @@ function InfiniteTableHeaderCell(props) {
     verticalAlign,
     align: align2
   };
-  const debouncedOnFilterValueChange = React42.useMemo(() => {
+  const debouncedOnFilterValueChange = React43.useMemo(() => {
     const fn = (filterValue) => {
       api.setColumnFilter(column.id, filterValue);
     };
@@ -10430,7 +10846,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,
@@ -10444,9 +10860,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,
@@ -10493,7 +10909,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);
@@ -10506,7 +10922,7 @@ function useInfiniteHeaderCell() {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderWrapper.tsx
-import * as React47 from "react";
+import * as React48 from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/buildColumnAndGroupTree.ts
 function buildColumnAndGroupTree(columns, columnGroups, columnGroupsDepthsMap, columnGroupsMaxDepth) {
@@ -10611,19 +11027,19 @@ function assignGroupOffsetsAndComputedWidths(items, groupOffset = 0) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
-import * as React46 from "react";
+import * as React47 from "react";
 import { useCallback as useCallback16, useEffect as useEffect16, useRef as useRef18 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup.tsx
-import * as React45 from "react";
+import * as React46 from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/useColumnGroupResizeHandle.tsx
-import * as React44 from "react";
+import * as React45 from "react";
 import { useCallback as useCallback15 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/GroupResizeHandle.tsx
 import { useRef as useRef17, useState as useState12 } from "react";
-import * as React43 from "react";
+import * as React44 from "react";
 var { rootClassName: rootClassName8 } = internalProps;
 var InfiniteTableHeaderCellResizeHandleCls2 = `${rootClassName8}HeaderCell_ResizeHandle`;
 function GroupResizeHandleFn(props) {
@@ -10692,7 +11108,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,
@@ -10705,7 +11121,7 @@ function GroupResizeHandleFn(props) {
       )}`,
       onPointerDown
     },
-    /* @__PURE__ */ React43.createElement(
+    /* @__PURE__ */ React44.createElement(
       "div",
       {
         style: { ...style2, ...props.style },
@@ -10716,7 +11132,7 @@ function GroupResizeHandleFn(props) {
     )
   );
 }
-var GroupResizeHandle = React43.memo(
+var GroupResizeHandle = React44.memo(
   GroupResizeHandleFn
 );
 
@@ -10781,7 +11197,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,
@@ -10829,7 +11245,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,
@@ -10838,7 +11254,7 @@ function InfiniteTableHeaderGroup(props) {
       style: style2,
       "data-z-index": zIndex2
     },
-    /* @__PURE__ */ React45.createElement(
+    /* @__PURE__ */ React46.createElement(
       "div",
       {
         className: join(
@@ -10927,7 +11343,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,
@@ -10941,7 +11357,7 @@ function InfiniteTableHeaderFn(props) {
           }
         ) : null;
       }
-      return /* @__PURE__ */ React46.createElement(
+      return /* @__PURE__ */ React47.createElement(
         InfiniteTableHeaderCell,
         {
           domRef: domRef2,
@@ -10967,7 +11383,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",
@@ -10977,7 +11393,7 @@ function InfiniteTableHeaderFn(props) {
     }
   ));
 }
-var InfiniteTableHeader = React46.memo(
+var InfiniteTableHeader = React47.memo(
   InfiniteTableHeaderFn
 );
 
@@ -11002,7 +11418,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;
     }
@@ -11013,7 +11429,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;
@@ -11051,15 +11467,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;
     },
@@ -11081,7 +11497,7 @@ function TableHeaderWrapper(props) {
       fixedColsStart: computedPinnedStartColumns.length
     }
   );
-  const header = /* @__PURE__ */ React47.createElement(
+  const header = /* @__PURE__ */ React48.createElement(
     InfiniteTableHeader,
     {
       columns: computedVisibleColumns,
@@ -11092,7 +11508,7 @@ function TableHeaderWrapper(props) {
       columnAndGroupTreeInfo
     }
   );
-  const verticalScrollbarPlaceholder = scrollbars.vertical && getScrollbarWidth() ? /* @__PURE__ */ React47.createElement(
+  const verticalScrollbarPlaceholder = scrollbars.vertical && getScrollbarWidth() ? /* @__PURE__ */ React48.createElement(
     "div",
     {
       className: HeaderScrollbarPlaceholderCls,
@@ -11102,7 +11518,7 @@ function TableHeaderWrapper(props) {
       }
     }
   ) : null;
-  return /* @__PURE__ */ React47.createElement(
+  return /* @__PURE__ */ React48.createElement(
     "div",
     {
       className: `${InfiniteTableHeaderWrapperClassName} ${HeaderWrapperCls}`,
@@ -11116,7 +11532,7 @@ function TableHeaderWrapper(props) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
-import * as React48 from "react";
+import * as React49 from "react";
 import { useEffect as useEffect17 } from "react";
 
 // src/components/utils/decamelize.ts
@@ -11159,11 +11575,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;
@@ -11190,7 +11606,7 @@ var InfiniteTableLicenseFooter = React48.forwardRef(
         clearInterval(intervalId);
       };
     }, []);
-    return /* @__PURE__ */ React48.createElement(
+    return /* @__PURE__ */ React49.createElement(
       "div",
       {
         ref: domCallback,
@@ -11204,7 +11620,7 @@ var InfiniteTableLicenseFooter = React48.forwardRef(
       },
       "Powered by",
       " ",
-      /* @__PURE__ */ React48.createElement(
+      /* @__PURE__ */ React49.createElement(
         "a",
         {
           href: "https://infinite-table.com",
@@ -11219,7 +11635,7 @@ var InfiniteTableLicenseFooter = React48.forwardRef(
 );
 
 // src/components/InfiniteTable/components/LoadMask.tsx
-import * as React49 from "react";
+import * as React50 from "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" };
@@ -11231,16 +11647,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) {
@@ -12252,10 +12668,10 @@ function enhancedFlatten(param) {
 }
 
 // src/components/DataSource/index.tsx
-import * as React51 from "react";
+import * as React52 from "react";
 
 // src/utils/groupAndPivot/treeUtils.ts
-var emptyFn = () => {
+var emptyFn3 = () => {
 };
 function toTreeDataArray(data, options) {
   const treeMap = new DeepMap();
@@ -12309,7 +12725,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);
@@ -18192,7 +18608,7 @@ function getDataSourceStateRestoreForDetails(state) {
 }
 
 // src/components/DataSource/privateHooks/useDataSource.tsx
-import React50, {
+import React51, {
   useCallback as useCallback19,
   useEffect as useEffect20,
   useLayoutEffect as useLayoutEffect10,
@@ -18226,13 +18642,13 @@ function useDataSourceInternal(props) {
       if (typeof children === "function") {
         children = children(getState());
       }
-      return /* @__PURE__ */ React50.createElement(
+      return /* @__PURE__ */ React51.createElement(
         ContextComponent.Provider,
         {
           key,
           value: getLatestManagedContextValue()
         },
-        /* @__PURE__ */ React50.createElement(DataSourceContext.Provider, { value: getLatestContextValue() }, children)
+        /* @__PURE__ */ React51.createElement(DataSourceContext.Provider, { value: getLatestContextValue() }, children)
       );
     },
     [ContextComponent, isDetail, key]
@@ -18509,7 +18925,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();
@@ -19982,7 +20398,7 @@ function useAutoSizeColumns() {
 // src/components/InfiniteTable/hooks/useCellRendering.tsx
 import { useMemo as useMemo9 } from "react";
 import { useCallback as useCallback20, useEffect as useEffect22, useRef as useRef24 } from "react";
-import * as React53 from "react";
+import * as React54 from "react";
 
 // src/components/InfiniteTable/hooks/useYourBrain.ts
 function useYourBrain(param) {
@@ -20019,7 +20435,7 @@ function useYourBrain(param) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableDetailRow.tsx
-import * as React52 from "react";
+import * as React53 from "react";
 
 // src/components/InfiniteTable/components/rowDetail.css.ts
 var RowDetailRecipe = createRuntimeFn({ defaultClassName: "rowDetail_RowDetailRecipe__evqes20", variantClassNames: {}, defaultVariants: {}, compoundVariants: [] });
@@ -20156,7 +20572,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,
@@ -20173,7 +20589,7 @@ function InfiniteTableDetailRowFn(props) {
     rowDetailRenderer(rowInfo, currentRowCache)
   ));
 }
-var InfiniteTableDetailRow = React52.memo(
+var InfiniteTableDetailRow = React53.memo(
   InfiniteTableDetailRowFn
 );
 
@@ -20356,7 +20772,7 @@ function useCellRendering(param) {
         cellStyle,
         cellClassName
       };
-      return /* @__PURE__ */ React53.createElement(InfiniteTableColumnCell, { ...cellProps });
+      return /* @__PURE__ */ React54.createElement(InfiniteTableColumnCell, { ...cellProps });
     },
     [
       rowHeight,
@@ -20390,10 +20806,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,
@@ -20767,10 +21183,10 @@ function computeColumnGroupsDepths(columnGroups, columnGroupVisibility) {
 }
 
 // src/components/InfiniteTable/state/rowDetailRendererFromComponent.tsx
-import * as React54 from "react";
+import * as React55 from "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 });
   };
 }
 
@@ -22568,7 +22984,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "6.0.20"
+      version: "6.1.0-canary.0"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -23216,7 +23632,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) {
@@ -23294,7 +23710,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) {
@@ -23729,7 +24145,7 @@ function useDOMEventHandlers() {
 import { useEffect as useEffect32 } from "react";
 
 // src/components/hooks/useOverlay/index.tsx
-import * as React55 from "react";
+import * as React56 from "react";
 import {
   useCallback as useCallback24,
   useEffect as useEffect30,
@@ -24119,10 +24535,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);
   useEffect30(() => {
     return props.realign.onChange((handle) => {
       if (nodeRef.current && handle) {
@@ -24130,7 +24546,7 @@ function OverlayContent(props) {
       }
     });
   }, [props.realign]);
-  return /* @__PURE__ */ React55.createElement(
+  return /* @__PURE__ */ React56.createElement(
     "div",
     {
       style: { position: "absolute", top: 0, left: 0 },
@@ -24198,22 +24614,22 @@ function useOverlayPortal(content, portalContainer) {
   }, [portalContainer]);
   return portalContainer ? container ? createPortal2(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;
@@ -24221,7 +24637,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;
@@ -24237,7 +24653,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;
@@ -24296,7 +24712,7 @@ function useOverlay(params) {
     },
     [handles, rootParams.portalContainer, updateContent]
   );
-  React55.useEffect(() => {
+  React56.useEffect(() => {
     if (handleToRealign) {
       const handle = handles.get(handleToRealign);
       if (handle) {
@@ -24315,7 +24731,7 @@ function useOverlay(params) {
     handles.clear();
     updateContent();
   };
-  React55.useEffect(() => {
+  React56.useEffect(() => {
   }, []);
   return {
     portal,
@@ -24327,16 +24743,16 @@ function useOverlay(params) {
 }
 
 // src/components/InfiniteTable/utils/getMenuForColumn.tsx
-import * as React61 from "react";
+import * as React62 from "react";
 
 // src/components/Menu/index.tsx
-import * as React59 from "react";
+import * as React60 from "react";
 
 // src/components/Menu/getMenuState.tsx
-import * as React57 from "react";
+import * as React58 from "react";
 
 // src/components/Menu/childrenToRuntimeItems.tsx
-import * as React56 from "react";
+import * as React57 from "react";
 
 // src/components/Menu/MenuItem.tsx
 function MenuItem(_props) {
@@ -24355,7 +24771,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,
@@ -24364,7 +24780,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,
@@ -24392,7 +24808,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 };
@@ -24415,7 +24831,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,
@@ -24470,7 +24886,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 });
         }
       });
     }
@@ -24487,7 +24903,7 @@ var deriveStateFromProps2 = (params) => {
 };
 
 // src/components/Menu/Menu.tsx
-import * as React58 from "react";
+import * as React59 from "react";
 import {
   useCallback as useCallback26,
   useLayoutEffect as useLayoutEffect14,
@@ -24752,7 +25168,7 @@ function renderSubmenuForItem(item, config) {
   if (typeof itemMenu === "function") {
     itemMenu = itemMenu();
   }
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React59.createElement(
     Menu,
     {
       key: overlayId,
@@ -24962,7 +25378,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,
@@ -25144,7 +25560,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,
@@ -25174,12 +25590,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) => {
@@ -25240,7 +25656,7 @@ function RuntimeItemRenderer(props) {
           }
         }
       };
-      return col.render ? /* @__PURE__ */ React58.createElement(
+      return col.render ? /* @__PURE__ */ React59.createElement(
         RenderHookComponent,
         {
           key: `${key}-${field}`,
@@ -25252,10 +25668,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
@@ -25269,12 +25685,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) {
@@ -25299,7 +25715,7 @@ function Menu(props) {
     __is_infinite_menu_component,
     ...domProps
   } = props;
-  const menu = /* @__PURE__ */ React59.createElement(
+  const menu = /* @__PURE__ */ React60.createElement(
     MenuRoot,
     {
       addSubmenuColumnIfNeeded,
@@ -25307,17 +25723,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
-import * as React60 from "react";
+import * as React61 from "react";
 function defaultGetColumnMenuItems(_items, params) {
   const { columnApi, column, getComputed, api } = params;
   const sortable = columnApi.isSortable();
@@ -25404,7 +25820,7 @@ function defaultGetColumnMenuItems(_items, params) {
           colItems.push({
             key: id,
             label,
-            check: /* @__PURE__ */ React60.createElement(
+            check: /* @__PURE__ */ React61.createElement(
               InfiniteCheckBox,
               {
                 key: col.id,
@@ -25466,7 +25882,7 @@ function getMenuForColumn(columnId, context, onHideIntent) {
   if (!items || !items.length) {
     return null;
   }
-  return /* @__PURE__ */ React61.createElement(
+  return /* @__PURE__ */ React62.createElement(
     MenuCmp,
     {
       autoFocus: true,
@@ -25584,7 +26000,7 @@ function useColumnMenu() {
 }
 
 // src/components/InfiniteTable/components/FocusDetect.tsx
-import * as React62 from "react";
+import * as React63 from "react";
 import { useCallback as useCallback27 } from "react";
 var style = {
   width: 0,
@@ -25618,7 +26034,7 @@ function FocusDetect() {
     };
     focusLastFocusableCell(context);
   }, []);
-  return /* @__PURE__ */ React62.createElement(
+  return /* @__PURE__ */ React63.createElement(
     "div",
     {
       onFocus,
@@ -25756,18 +26172,18 @@ function useEditingCallbackProps() {
 import { useEffect as useEffect34 } from "react";
 
 // src/components/InfiniteTable/utils/getFilterOperatorMenuForColumn.tsx
-import * as React65 from "react";
+import * as React66 from "react";
 
 // src/components/InfiniteTable/components/icons/ClearIcon.tsx
-import * as React63 from "react";
+import * as React64 from "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
-import * as React64 from "react";
+import * as React65 from "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
@@ -25810,12 +26226,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 = [
@@ -25830,7 +26246,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);
@@ -25852,7 +26268,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,
@@ -25958,7 +26374,7 @@ function useColumnFilterOperatorMenu() {
 import { useEffect as useEffect35 } from "react";
 
 // src/components/InfiniteTable/utils/getCellContextMenu.tsx
-import * as React66 from "react";
+import * as React67 from "react";
 function getCellContextMenu(cellLocation, context, onHideIntent) {
   const { columnId, rowIndex, event } = cellLocation;
   const { getComputed, getState } = context;
@@ -25998,7 +26414,7 @@ function getCellContextMenu(cellLocation, context, onHideIntent) {
   }
   return {
     preventDefault: true,
-    menu: /* @__PURE__ */ React66.createElement(
+    menu: /* @__PURE__ */ React67.createElement(
       MenuCmp,
       {
         columns: menuColumns,
@@ -26054,7 +26470,7 @@ function getTableContextMenu(menuLocation, context, onHideIntent) {
   }
   return {
     preventDefault: true,
-    menu: /* @__PURE__ */ React66.createElement(
+    menu: /* @__PURE__ */ React67.createElement(
       MenuCmp,
       {
         columns: menuColumns,
@@ -26264,7 +26680,7 @@ function useTableContextMenu() {
 
 // src/components/InfiniteTable/components/HScrollSyncContent.tsx
 import { useRef as useRef30 } from "react";
-import * as React67 from "react";
+import * as React68 from "react";
 
 // src/components/InfiniteTable/hooks/useGridScroll.ts
 import { useCallback as useCallback28, useEffect as useEffect36 } from "react";
@@ -26310,7 +26726,7 @@ function HScrollSyncContent(props) {
   } else if (maxWidth === "viewport") {
     style2.maxWidth = ThemeVars.runtime.bodyWidth;
   }
-  return /* @__PURE__ */ React67.createElement(
+  return /* @__PURE__ */ React68.createElement(
     "div",
     {
       ref: domRef,
@@ -26411,7 +26827,7 @@ function useHorizontalLayout() {
 }
 
 // src/components/InfiniteTable/hooks/useDebugMode.ts
-import * as React68 from "react";
+import * as React69 from "react";
 var logWarning = once(() => {
   console.warn(
     `It appears you have not loaded the CSS file for InfiniteTable.
@@ -26425,7 +26841,7 @@ import '@infinite-table/infinite-react/index.css'
 var cssFileLoadedVarName = stripVar(ThemeVars.loaded);
 function useDebugMode() {
   const { getState } = useInfiniteTable();
-  React68.useEffect(() => {
+  React69.useEffect(() => {
     runDebugMode(getState);
   }, []);
 }
@@ -26481,7 +26897,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,
@@ -26498,7 +26914,7 @@ var InfiniteTableBodyCls = join(
   transformTranslateZero
 );
 function InfiniteTableBodyContainer(props) {
-  return /* @__PURE__ */ React69.createElement(
+  return /* @__PURE__ */ React70.createElement(
     "div",
     {
       ...props,
@@ -26535,7 +26951,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) {
@@ -26581,7 +26997,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,
@@ -26602,9 +27018,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();
@@ -26636,7 +27052,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) => {
@@ -26659,7 +27075,7 @@ var InfiniteTableComponent = React69.memo(
       ...initialDOMProps
     } = componentState.domProps ?? {};
     const domProps = useDOMProps(initialDOMProps);
-    React69.useEffect(() => {
+    React70.useEffect(() => {
       brain.setScrollStopDelay(scrollStopDelay);
       dataSourceActions.scrollStopDelayUpdatedByTable = scrollStopDelay;
     }, [scrollStopDelay]);
@@ -26670,7 +27086,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,
@@ -26684,13 +27100,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,
@@ -26706,14 +27122,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",
@@ -26721,21 +27137,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({
@@ -26759,7 +27175,7 @@ function InfiniteTableContextProvider({
     getDataSourceMasterContext,
     api: dataSourceApi
   } = useDataSourceContextValue();
-  const [imperativeApi] = React69.useState(() => {
+  const [imperativeApi] = React70.useState(() => {
     return getImperativeApi({
       getComputed,
       getState,
@@ -26795,20 +27211,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,
@@ -26816,30 +27232,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
-import * as React70 from "react";
+import * as React71 from "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
-import * as React71 from "react";
+import * as React72 from "react";
 function TreeGrid(props) {
-  return /* @__PURE__ */ React71.createElement(InfiniteTable, { ...props });
+  return /* @__PURE__ */ React72.createElement(InfiniteTable, { ...props });
 }
 
 // src/components/DataSource/DataLoader/DataQuery.ts
@@ -27306,12 +27722,12 @@ var useEffectWhen = (callback, options) => {
 };
 
 // src/components/InfiniteTable/components/InfiniteTableRow/FlashingColumnCell.tsx
-import * as React72 from "react";
+import * as React73 from "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 = {
@@ -27333,7 +27749,7 @@ var createFlashingColumnCellComponent = (options = {}) => {
     // fadeClassName,
     render = defaultRender
   } = options;
-  const FlashingColumnCell2 = React72.forwardRef(
+  const FlashingColumnCell2 = React73.forwardRef(
     (props, _ref) => {
       const cellContext = useInfiniteColumnCell();
       const {
@@ -27343,13 +27759,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) {
@@ -27396,7 +27812,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;