@infinite-table/infinite-react 7.0.0 → 7.1.0

package/index.dev.mjs

@@ -27,6 +27,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 // ../node_modules/binary-search/index.js
 var require_binary_search = __commonJS({
   "../node_modules/binary-search/index.js"(exports, module) {
+    "use strict";
     module.exports = function(haystack, needle, comparator, low, high) {
       var mid, cmp;
       if (low === void 0)
@@ -145,7 +146,7 @@ var sortAscending = (a, b) => a - b;
 
 // src/utils/DeepMap/index.ts
 var SORT_ASC_REVISION = (p1, p2) => sortAscending(p1.revision, p2.revision);
-var DeepMap = class {
+var DeepMap = class _DeepMap {
   constructor(initial) {
     this.map = /* @__PURE__ */ new Map();
     this.length = 0;
@@ -218,7 +219,7 @@ var DeepMap = class {
     this.fill(initial);
   }
   static clone(map2) {
-    const clone = new DeepMap();
+    const clone = new _DeepMap();
     map2.visit((pair, keys) => {
       clone.set(keys, pair.value);
     });
@@ -1235,12 +1236,7 @@ function useMasterDetailContext() {
 
 // src/components/HeadlessTable/index.tsx
 import * as React14 from "react";
-import {
-  useCallback as useCallback4,
-  useEffect as useEffect7,
-  useRef as useRef7,
-  useState as useState3
-} from "react";
+import { useCallback as useCallback4, useEffect as useEffect5, useRef as useRef7, useState as useState3 } from "react";
 
 // src/components/VirtualList/SpacePlaceholder.tsx
 import * as React6 from "react";
@@ -1353,15 +1349,15 @@ var VirtualScrollContainer = React7.forwardRef(
 
 // src/components/HeadlessTable/RawTable.tsx
 import * as React11 from "react";
-import { useEffect as useEffect4, useLayoutEffect as useLayoutEffect3, useMemo as useMemo2 } from "react";
+import { useLayoutEffect as useLayoutEffect4, useMemo as useMemo2 } from "react";
 
 // src/components/RawList/AvoidReactDiff.tsx
 import * as React8 from "react";
-import { useEffect as useEffect3, useRef as useRef4, useState } from "react";
+import { useLayoutEffect as useLayoutEffect3, useRef as useRef4, useState } from "react";
 function AvoidReactDiffFn(props) {
   const [children, setChildren] = useState(props.updater.get);
   const rafId = useRef4(null);
-  useEffect3(() => {
+  useLayoutEffect3(() => {
     function onChange(children2) {
       if (props.useraf) {
         if (rafId.current != null) {
@@ -2465,6 +2461,10 @@ var MatrixBrain = class extends Logger {
     this.rowOffsetCache = [0];
     this.verticalRenderCount = void 0;
     this.verticalTotalSize = 0;
+    this.verticalRenderRange = {
+      startIndex: 0,
+      endIndex: 0
+    };
   }
   resetHorizontal() {
     this.colspanParent = /* @__PURE__ */ new Map();
@@ -2473,6 +2473,10 @@ var MatrixBrain = class extends Logger {
     this.colOffsetCache = [0];
     this.horizontalRenderCount = void 0;
     this.horizontalTotalSize = 0;
+    this.horizontalRenderRange = {
+      startIndex: 0,
+      endIndex: 0
+    };
   }
   getVirtualColIndex(colIndex, _opts) {
     return colIndex;
@@ -2932,7 +2936,7 @@ var GridCellForReact = class {
     return this.element;
   }
 };
-var _GridCellPoolForReact = class extends Logger {
+var _GridCellPoolForReact = class _GridCellPoolForReact extends Logger {
   // for now, making this larger will create the cells, but on fast scrolling, those extra cells can tend to lag behind the scroll position as they are not updated
   constructor(debugId) {
     super(`${debugId}:GridCellPoolForReact`);
@@ -3049,8 +3053,8 @@ var _GridCellPoolForReact = class extends Logger {
     let cell = detachedCells.values().next().value;
     if (!cell) {
       this.poolSize += _GridCellPoolForReact.POOL_SIZE_INCREMENT;
+      cell = detachedCells.values().next().value;
     }
-    cell = detachedCells.values().next().value;
     if (!cell) {
       this.error("No cells available in the pool!");
     }
@@ -3093,9 +3097,9 @@ var _GridCellPoolForReact = class extends Logger {
     }
   }
 };
-var GridCellPoolForReact = _GridCellPoolForReact;
 // we'll grow the pool by this amount at a time
-GridCellPoolForReact.POOL_SIZE_INCREMENT = 1;
+_GridCellPoolForReact.POOL_SIZE_INCREMENT = 1;
+var GridCellPoolForReact = _GridCellPoolForReact;
 
 // src/components/HeadlessTable/GridCellManager.ts
 var ASC_SORT = (a, b) => a - b;
@@ -3368,7 +3372,10 @@ var GridCellManager = class extends Logger {
     const [rowIndex, colIndex] = cellPos;
     this.matrix.visit((_, cellPos2) => {
       const [row, col] = cellPos2;
-      if (row >= rowIndex || col >= colIndex) {
+      if (row > rowIndex) {
+        this.detachCellAt(cellPos2);
+      }
+      if (row === rowIndex && col >= colIndex) {
         this.detachCellAt(cellPos2);
       }
     });
@@ -3482,7 +3489,7 @@ var ListRowForReact = class {
     return this.element;
   }
 };
-var _ListRowPoolForReact = class extends Logger {
+var _ListRowPoolForReact = class _ListRowPoolForReact extends Logger {
   constructor(debugId) {
     super(`${debugId}:ListRowPoolForReact`);
     this.debugId = debugId;
@@ -3642,9 +3649,9 @@ var _ListRowPoolForReact = class extends Logger {
     }
   }
 };
-var ListRowPoolForReact = _ListRowPoolForReact;
 // we'll grow the pool by this amount at a time
-ListRowPoolForReact.POOL_SIZE_INCREMENT = 1;
+_ListRowPoolForReact.POOL_SIZE_INCREMENT = 1;
+var ListRowPoolForReact = _ListRowPoolForReact;
 
 // src/components/HeadlessTable/ListRowManager.ts
 var ListRowManager = class extends Logger {
@@ -5060,13 +5067,13 @@ function RawTableFn(props) {
       onRenderUpdater: props.onRenderUpdater
     } : createRenderer(brain);
   }, [brain, props.onRenderUpdater, props.renderer]);
-  useEffect4(() => {
+  useLayoutEffect4(() => {
     renderer.cellHoverClassNames = props.cellHoverClassNames || [];
   }, [renderer, props.cellHoverClassNames]);
-  useEffect4(() => {
+  useLayoutEffect4(() => {
     renderer.cellDetachedClassNames = props.cellDetachedClassNames || [];
   }, [renderer, props.cellDetachedClassNames]);
-  useLayoutEffect3(() => {
+  useLayoutEffect4(() => {
     const renderRange = brain.getRenderRange();
     renderer.renderRange(renderRange, {
       onRender: onRenderUpdater,
@@ -5074,17 +5081,8 @@ function RawTableFn(props) {
       renderCell,
       renderDetailRow
     });
-  }, [
-    renderer,
-    brain,
-    renderCell,
-    renderDetailRow,
-    onRenderUpdater,
-    forceRerenderTimestamp
-  ]);
-  useEffect4(() => {
-    const remove = brain.onRenderRangeChange((renderRange) => {
-      renderer.renderRange(renderRange, {
+    const remove = brain.onRenderRangeChange((renderRange2) => {
+      renderer.renderRange(renderRange2, {
         force: false,
         // TODO should be false
         onRender: (items) => {
@@ -5099,14 +5097,21 @@ function RawTableFn(props) {
       });
     });
     return remove;
-  }, [renderCell, renderDetailRow, brain, onRenderUpdater]);
+  }, [
+    renderer,
+    brain,
+    renderCell,
+    renderDetailRow,
+    onRenderUpdater,
+    forceRerenderTimestamp
+  ]);
   return /* @__PURE__ */ React11.createElement(AvoidReactDiff, { updater: onRenderUpdater });
 }
 var RawTable = React11.memo(RawTableFn);
 
 // src/components/InfiniteTable/components/ActiveRowIndicator.tsx
 import * as React12 from "react";
-import { useEffect as useEffect5, useLayoutEffect as useLayoutEffect4, useRef as useRef5 } from "react";
+import { useEffect as useEffect3, useLayoutEffect as useLayoutEffect5, useRef as useRef5 } from "react";
 
 // src/components/hooks/useRerender.ts
 import { useCallback as useCallback3, useState as useState2 } from "react";
@@ -5122,13 +5127,11 @@ var useRerender = () => {
 
 // ../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js
 function toPrimitive(t, r) {
-  if ("object" != typeof t || !t)
-    return t;
+  if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
     var i = e.call(t, r || "default");
-    if ("object" != typeof i)
-      return i;
+    if ("object" != typeof i) return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
   return ("string" === r ? String : Number)(t);
@@ -5252,7 +5255,7 @@ var ActiveRowIndicatorFn = (props) => {
   const domRef = useRef5(null);
   const active = props.activeRowIndex != null && brain.getInitialRows() > props.activeRowIndex;
   const [_rerenderId, rerender] = useRerender();
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     if (props.activeRowIndex == null) {
       return;
     }
@@ -5275,7 +5278,7 @@ var ActiveRowIndicatorFn = (props) => {
     };
     setInfiniteVarsOnNode(vars, node);
   }, [props.activeRowIndex, brain]);
-  useEffect5(() => {
+  useEffect3(() => {
     const updateVars = (scrollPosition) => {
       setInfiniteVarsOnNode(
         {
@@ -5314,7 +5317,7 @@ var ActiveRowIndicator = React12.memo(
 
 // src/components/InfiniteTable/components/ActiveCellIndicator.tsx
 import * as React13 from "react";
-import { useEffect as useEffect6, useLayoutEffect as useLayoutEffect5, useRef as useRef6 } from "react";
+import { useEffect as useEffect4, useLayoutEffect as useLayoutEffect6, useRef as useRef6 } from "react";
 var { rootClassName: rootClassName4 } = internalProps;
 var baseCls2 = `${rootClassName4}-ActiveCellIndicator`;
 var columnZIndexAtIndex2 = stripVar(InternalVars.columnZIndexAtIndex);
@@ -5342,10 +5345,10 @@ var ActiveCellIndicatorFn = (props) => {
   const [_rerenderId, rerender] = useRerender();
   const domRef = useRef6(null);
   const active = props.activeCellIndex != null && brain.getInitialRows() > props.activeCellIndex[0];
-  useLayoutEffect5(() => {
+  useLayoutEffect6(() => {
     reposition(brain, props.activeCellIndex, props.rowHeight, domRef);
   }, [props.activeCellIndex, props.rowHeight, brain]);
-  useEffect6(() => {
+  useEffect4(() => {
     const removeOnRenderCountChange = brain.onRenderCountChange(() => {
       rerender();
     });
@@ -5444,12 +5447,12 @@ function HeadlessTable(props) {
     width: 0,
     height: 0
   });
-  useEffect7(() => {
+  useEffect5(() => {
     if (scrollStopDelay != null) {
       brain.setScrollStopDelay(scrollStopDelay);
     }
   }, [scrollStopDelay, brain]);
-  useEffect7(() => {
+  useEffect5(() => {
     const node = domRef.current?.parentNode;
     if (!node) {
       return;
@@ -5485,7 +5488,7 @@ function HeadlessTable(props) {
     },
     [brain, updateDOMTransform]
   );
-  useEffect7(() => {
+  useEffect5(() => {
     const removeOnRenderCount = brain.onRenderCountChange(() => {
       setTotalScrollSize(brain.getVirtualizedContentSize());
     });
@@ -5548,10 +5551,10 @@ import {
   useReducer,
   createContext as createContext3,
   useMemo as useMemo3,
-  useEffect as useEffect9,
+  useEffect as useEffect7,
   useState as useState4,
   useRef as useRef11,
-  useLayoutEffect as useLayoutEffect7
+  useLayoutEffect as useLayoutEffect8
 } from "react";
 
 // src/utils/proxyFnCall.ts
@@ -5598,17 +5601,17 @@ function isControlled(propName, props) {
 }
 
 // src/components/hooks/useEffectOnceWithProperUnmount.ts
-import { useCallback as useCallback5, useEffect as useEffect8, useRef as useRef8 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect6, useRef as useRef8 } from "react";
 var useEffectOnce = (effectCallback) => {
   const effectFunction = useCallback5(effectCallback, []);
   const effectCalled = useRef8(false);
   const componentRendered = useRef8(false);
-  const destroyFn = useRef8();
+  const destroyFn = useRef8(void 0);
   const [_, rerender] = useRerender();
   if (effectCalled.current) {
     componentRendered.current = true;
   }
-  useEffect8(() => {
+  useEffect6(() => {
     if (!effectCalled.current) {
       destroyFn.current = effectFunction;
       effectCalled.current = true;
@@ -5634,10 +5637,10 @@ function useLatest(value) {
 }
 
 // src/components/hooks/usePrevious.ts
-import { useRef as useRef10, useLayoutEffect as useLayoutEffect6 } from "react";
+import { useRef as useRef10, useLayoutEffect as useLayoutEffect7 } from "react";
 var usePrevious = (value, initialValue) => {
   const ref = useRef10(initialValue === void 0 ? value : initialValue);
-  useLayoutEffect6(() => {
+  useLayoutEffect7(() => {
     ref.current = value;
   });
   return ref.current;
@@ -5813,10 +5816,7 @@ function buildManagedComponent(config) {
       }) : newState;
       return result;
     };
-    const [state, dispatch] = useReducer(
-      theReducer,
-      wholeState
-    );
+    const [state, dispatch] = useReducer(theReducer, wholeState);
     const getComponentState = useLatest(state);
     const { allowedControlledPropOverrides } = config;
     const actions = useMemo3(() => {
@@ -5859,7 +5859,7 @@ function buildManagedComponent(config) {
     const prevProps = usePrevious(props);
     const skipTriggerParentStateChangeRef = useRef11(false);
     skipTriggerParentStateChangeRef.current = false;
-    const effectFn = config.layoutEffect ? useLayoutEffect7 : useEffect9;
+    const effectFn = config.layoutEffect ? useLayoutEffect8 : useEffect7;
     effectFn(() => {
       const currentProps = props;
       const newMappedState = {};
@@ -6014,7 +6014,7 @@ function InfiniteTableFooter(props) {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
 import * as React43 from "react";
-import { useCallback as useCallback14, useContext as useContext7, useEffect as useEffect15, useRef as useRef16 } from "react";
+import { useCallback as useCallback14, useContext as useContext7, useEffect as useEffect13, useRef as useRef16 } from "react";
 import { createPortal } from "react-dom";
 
 // src/utils/keyMirror.ts
@@ -6102,7 +6102,7 @@ import * as React30 from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableColumnHeaderFilter.tsx
 import * as React29 from "react";
-import { useEffect as useEffect11, useState as useState6 } from "react";
+import { useEffect as useEffect9, useState as useState6 } from "react";
 
 // src/components/InfiniteTable/hooks/useInfiniteTable.ts
 import { useContext as useContext3 } from "react";
@@ -6135,7 +6135,7 @@ var useInfiniteTableState = () => {
 
 // src/components/InfiniteTable/components/icons/FilterIcon.tsx
 import * as React27 from "react";
-import { useEffect as useEffect10, useLayoutEffect as useLayoutEffect8, useState as useState5 } from "react";
+import { useEffect as useEffect8, useLayoutEffect as useLayoutEffect9, useState as useState5 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts
 var CellCls = "_1eexc2a6";
@@ -6182,7 +6182,7 @@ function FilterIcon(props) {
     ...props.lineStyle,
     opacity
   };
-  useEffect10(() => {
+  useEffect8(() => {
     if (!rendered) {
       return;
     }
@@ -6193,7 +6193,7 @@ function FilterIcon(props) {
       cancelAnimationFrame(rafId);
     };
   }, [rendered]);
-  useLayoutEffect8(() => {
+  useLayoutEffect9(() => {
     setRendered(true);
   }, []);
   if (!rendered) {
@@ -7377,7 +7377,7 @@ function useInfiniteColumnFilterEditor() {
   const removeColumnFilter = React29.useCallback(() => {
     context.api.removeColumnFilter(column.id);
   }, [column.id]);
-  useEffect11(() => {
+  useEffect9(() => {
     if (columnFilterValue) {
       if (theValue !== columnFilterValue.filter.value) {
         setTheValue(columnFilterValue.filter.value);
@@ -7925,7 +7925,7 @@ function mapToContinuation(args) {
     (arg) => arg instanceof CssContinuation ? arg : new CssContinuation(null, [arg])
   );
 }
-var CssContinuation = class {
+var CssContinuation = class _CssContinuation {
   constructor(operation, operands = []) {
     this.__operands = [];
     this.__operation = null;
@@ -7933,19 +7933,19 @@ var CssContinuation = class {
     this.__operation = operation;
   }
   add(...args) {
-    return new CssContinuation("+", [this, ...args]);
+    return new _CssContinuation("+", [this, ...args]);
   }
   subtract(...args) {
-    return new CssContinuation("-", [this, ...args]);
+    return new _CssContinuation("-", [this, ...args]);
   }
   minus(...args) {
     return this.subtract(...args);
   }
   multiply(...args) {
-    return new CssContinuation("*", [this, ...args]);
+    return new _CssContinuation("*", [this, ...args]);
   }
   divide(...args) {
-    return new CssContinuation("/", [this, ...args]);
+    return new _CssContinuation("/", [this, ...args]);
   }
   __get(parent) {
     const { __operation, __operands } = this;
@@ -9000,7 +9000,7 @@ function objectValuesExcept(obj, exceptList) {
 
 // src/components/InfiniteTable/components/CheckBox.tsx
 import * as React34 from "react";
-import { useEffect as useEffect13, useRef as useRef12 } from "react";
+import { useEffect as useEffect11, useRef as useRef12 } from "react";
 
 // src/components/InfiniteTable/components/CheckBox.css.ts
 var CheckBoxCls = "qz8ht90 _16lm1iwi";
@@ -9035,7 +9035,7 @@ function InfiniteCheckBoxComponent() {
   const { componentState, componentActions } = useManagedComponentState();
   const { checked, domProps, disabled } = componentState;
   const inputRef = useRef12(null);
-  useEffect13(() => {
+  useEffect11(() => {
     inputRef.current.indeterminate = checked == null;
   }, [checked]);
   return /* @__PURE__ */ React34.createElement(
@@ -9562,7 +9562,7 @@ 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 domRef = useRef13(null);
   const refCallback = React36.useCallback((node) => {
     domRef.current = node;
     if (node) {
@@ -10319,7 +10319,7 @@ function MenuIcon(props) {
 
 // src/components/InfiniteTable/components/icons/SortIcon.tsx
 import * as React40 from "react";
-import { useEffect as useEffect14, useState as useState10 } from "react";
+import { useEffect as useEffect12, useState as useState10 } from "react";
 
 // src/components/InfiniteTable/components/icons/SortIcon.css.ts
 var SortIconCls = "_1ek6mqy0 _16lm1iwz _16lm1iw1n _16lm1iw1 _16lm1iw1v";
@@ -10347,7 +10347,7 @@ function SortIcon(props) {
     ...props.lineStyle,
     opacity
   };
-  useEffect14(() => {
+  useEffect12(() => {
     const newOpacity = direction != 0 ? 1 : 0;
     if (!rendered && newOpacity) {
       setRendered(true);
@@ -11026,7 +11026,7 @@ function InfiniteTableHeaderCell(props) {
     }
     return all;
   };
-  useEffect15(() => {
+  useEffect13(() => {
     let clearOnResize = null;
     const node = domRef.current;
     if (onResize && node) {
@@ -11285,7 +11285,7 @@ function assignGroupOffsetsAndComputedWidths(items, groupOffset = 0) {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
 import * as React47 from "react";
-import { useCallback as useCallback16, useEffect as useEffect16, useRef as useRef18 } from "react";
+import { useCallback as useCallback16, useEffect as useEffect14, useRef as useRef18 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup.tsx
 import * as React46 from "react";
@@ -11545,7 +11545,13 @@ function InfiniteTableHeaderFn(props) {
   const {
     computed,
     getState,
-    state: { headerBrain, headerOptions, showColumnFilters }
+    state: {
+      headerBrain,
+      headerOptions,
+      showColumnFilters,
+      headerRenderer,
+      headerOnRenderUpdater
+    }
   } = useInfiniteTable();
   const { computedColumnsMap } = computed;
   const domRef = useRef18(null);
@@ -11554,7 +11560,7 @@ function InfiniteTableHeaderFn(props) {
       domRef.current.style.transform = `translate3d(-${scrollPosition.scrollLeft}px, 0px, 0px)`;
     }
   }, []);
-  useEffect16(() => {
+  useEffect14(() => {
     const removeOnScroll = headerBrain.onScroll(updateDOMTransform);
     updateDOMTransform(
       headerBrain.getScrollPosition() || { scrollLeft: 0, scrollTop: 0 }
@@ -11646,6 +11652,8 @@ function InfiniteTableHeaderFn(props) {
       name: "header",
       renderCell,
       brain: headerBrain,
+      renderer: headerRenderer,
+      onRenderUpdater: headerOnRenderUpdater,
       cellHoverClassNames: EMPTY_ARR,
       cellDetachedClassNames: CELL_DETACHED_CLASSNAMES
     }
@@ -11791,7 +11799,7 @@ function TableHeaderWrapper(props) {
 
 // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
 import * as React49 from "react";
-import { useEffect as useEffect17 } from "react";
+import { useEffect as useEffect15 } from "react";
 
 // src/components/utils/decamelize.ts
 function decamelize(str, options) {
@@ -11848,7 +11856,7 @@ var InfiniteTableLicenseFooter = React49.forwardRef(
         ref.current = node;
       }
     }, []);
-    useEffect17(() => {
+    useEffect15(() => {
       const forceStyle = () => {
         setTimeout(() => {
           enforceStyle(domRef.current, defaultStyle);
@@ -13368,7 +13376,7 @@ function getGroupKeysForDataItem(data, groupBy) {
 }
 
 // src/components/DataSource/RowSelectionState.ts
-var RowSelectionState = class {
+var RowSelectionState = class _RowSelectionState {
   constructor(state, getConfig, _forTestingOnly) {
     this.selectedRows = null;
     this.deselectedRows = null;
@@ -13447,7 +13455,7 @@ var RowSelectionState = class {
     return this.getConfig().groupBy.length;
   }
   static from(rowSeleStateObject, getConfig, overrides) {
-    return new RowSelectionState(rowSeleStateObject, getConfig, overrides);
+    return new _RowSelectionState(rowSeleStateObject, getConfig, overrides);
   }
   update(stateObject) {
     this.selectedRows = stateObject.selectedRows || null;
@@ -14697,10 +14705,10 @@ var Indexer = class {
 };
 
 // src/components/DataSource/privateHooks/useLoadData.ts
-import { useEffect as useEffect19, useMemo as useMemo7, useRef as useRef21, useState as useState13 } from "react";
+import { useEffect as useEffect17, useMemo as useMemo7, useRef as useRef21, useState as useState13 } from "react";
 
 // src/components/hooks/useEffectWithChanges.ts
-import { useEffect as useEffect18, useRef as useRef20 } from "react";
+import { useEffect as useEffect16, useLayoutEffect as useLayoutEffect11, useRef as useRef20 } from "react";
 function useEffectWithChanges(fn, deps) {
   const prevRef = useRef20({});
   const oldValuesRef = useRef20({});
@@ -14718,7 +14726,35 @@ function useEffectWithChanges(fn, deps) {
     }
   }
   prevRef.current = deps;
-  useEffect18(() => {
+  useEffect16(() => {
+    const changes2 = changesRef.current;
+    let result = void 0;
+    if (Object.keys(changes2).length !== 0) {
+      result = fn(changes2, oldValues);
+    }
+    changesRef.current = {};
+    oldValuesRef.current = {};
+    return result;
+  }, useEffectDeps);
+}
+function useLayoutEffectWithChanges(fn, deps) {
+  const prevRef = useRef20({});
+  const oldValuesRef = useRef20({});
+  const oldValues = oldValuesRef.current;
+  const changesRef = useRef20({});
+  const changes = changesRef.current;
+  const useEffectDeps = [];
+  for (const k in deps) {
+    if (deps.hasOwnProperty(k)) {
+      if (deps[k] !== prevRef.current[k]) {
+        changes[k] = deps[k];
+        oldValues[k] = prevRef.current[k];
+      }
+      useEffectDeps.push(deps[k]);
+    }
+  }
+  prevRef.current = deps;
+  useLayoutEffect11(() => {
     const changes2 = changesRef.current;
     let result = void 0;
     if (Object.keys(changes2).length !== 0) {
@@ -14736,7 +14772,7 @@ function useEffectWithObject(fn, deps) {
       useEffectDeps.push(deps[k]);
     }
   }
-  useEffect18(fn, useEffectDeps);
+  useEffect16(fn, useEffectDeps);
 }
 
 // src/utils/composeFunctions.ts
@@ -14952,7 +14988,7 @@ function getPivotColumnsAndColumnGroups({
 
 // src/components/DataSource/DataSourceCache.ts
 var CLEAR_SYMBOL = Symbol("CLEAR");
-var DataSourceCache = class {
+var DataSourceCache = class _DataSourceCache {
   constructor(options) {
     this.affectedFields = /* @__PURE__ */ new Set();
     this.allFieldsAffected = false;
@@ -15120,7 +15156,7 @@ var DataSourceCache = class {
     this.nodesKey = options.nodesKey;
   }
   static clone(cache, { light = false } = {}) {
-    const clone = new DataSourceCache({
+    const clone = new _DataSourceCache({
       nodesKey: cache.nodesKey
     });
     clone.allFieldsAffected = cache.allFieldsAffected;
@@ -15318,7 +15354,7 @@ var TreeExpandState = class {
 
 // src/components/DataSource/TreeSelectionState.ts
 var shortestToLongest = (a, b) => a.length - b.length;
-var TreeSelectionState = class {
+var TreeSelectionState = class _TreeSelectionState {
   constructor(state, getConfig) {
     this.selectedPaths = null;
     this.deselectedPaths = null;
@@ -15347,7 +15383,7 @@ var TreeSelectionState = class {
     return deepMapValue.items.length;
   }
   static from(treeSelectionState, getConfig) {
-    return new TreeSelectionState(treeSelectionState, getConfig);
+    return new _TreeSelectionState(treeSelectionState, getConfig);
   }
   setConfigFn(getConfig) {
     this.getConfig = getConfig;
@@ -16980,7 +17016,7 @@ function filterTreeDataSource(params) {
   }
   return treeDataArray;
 }
-function filterDataSource(params) {
+function filterDataArray(params) {
   const {
     filterTypes,
     operatorsByFilterType,
@@ -17206,7 +17242,7 @@ function concludeReducer(params) {
       if (state.devToolsDetected) {
         filterTimestamp = Date.now();
       }
-      dataArray = filterDataSource({
+      dataArray = filterDataArray({
         // tree-related stuff
         getNodeChildren,
         isLeafNode,
@@ -18020,7 +18056,7 @@ function useLoadData(options) {
     horizontal: false
   });
   const scrollbarsRef = useRef21(scrollbars);
-  useEffect19(() => {
+  useEffect17(() => {
     notifyScrollbarsChange.onChange((scrollbars2) => {
       if (!scrollbars2) {
         return;
@@ -18030,7 +18066,7 @@ function useLoadData(options) {
     });
     return () => notifyScrollbarsChange.destroy();
   }, [notifyScrollbarsChange]);
-  useEffect19(() => {
+  useEffect17(() => {
     if (!livePagination) {
       return;
     }
@@ -18043,7 +18079,7 @@ function useLoadData(options) {
     });
     return () => cancelAnimationFrame(frameId);
   }, [livePaginationCursor]);
-  useEffect19(() => {
+  useEffect17(() => {
     if (!livePagination || livePaginationCursor !== void 0) {
       return;
     }
@@ -18056,7 +18092,7 @@ function useLoadData(options) {
     });
     return () => cancelAnimationFrame(frameId);
   }, [dataArray.length, livePaginationCursor]);
-  useEffect19(() => {
+  useEffect17(() => {
     const state = getComponentState();
     const { livePaginationCursor: livePaginationCursor2, livePagination: livePagination2, dataArray: dataArray2 } = state;
     if (!scrollbars.vertical && livePagination2) {
@@ -18186,7 +18222,7 @@ function useLazyLoadRange(options, dependencies) {
     componentActions: actions,
     componentState
   } = options;
-  useEffect19(() => {
+  useEffect17(() => {
     actions.lazyLoadCacheOfLoadedBatches = new DeepMap();
   }, [componentState.data, componentState.dataParams]);
   const {
@@ -18267,7 +18303,7 @@ function useLazyLoadRange(options, dependencies) {
       groupRowsState
     }
   );
-  useEffect19(() => {
+  useEffect17(() => {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
       debouncedLoadRange();
     }
@@ -19091,8 +19127,8 @@ function getDataSourceStateRestoreForDetails(state) {
 // src/components/DataSource/privateHooks/useDataSource.tsx
 import React51, {
   useCallback as useCallback19,
-  useEffect as useEffect20,
-  useLayoutEffect as useLayoutEffect10,
+  useEffect as useEffect18,
+  useLayoutEffect as useLayoutEffect12,
   useState as useState14
 } from "react";
 function useDataSourceInternal(props) {
@@ -19134,12 +19170,12 @@ function useDataSourceInternal(props) {
     },
     [ContextComponent, isDetail, key]
   );
-  useLayoutEffect10(() => {
+  useLayoutEffect12(() => {
     if (masterContext) {
       masterContext.registerDetail(contextValue);
     }
   }, []);
-  useLayoutEffect10(() => {
+  useLayoutEffect12(() => {
     return () => {
       const state = getState();
       state.onCleanup(state);
@@ -19163,7 +19199,7 @@ function useDataSourceInternal(props) {
     componentActions,
     getComponentState: getState
   });
-  useEffect20(() => {
+  useEffect18(() => {
     componentState.onDataArrayChange?.(
       componentState.originalDataArray,
       componentState.originalDataArrayChangedInfo
@@ -19185,7 +19221,7 @@ function useDataSourceInternal(props) {
       });
     }
   }, [componentState.originalDataArrayChangedInfo]);
-  useEffect20(() => {
+  useEffect18(() => {
     componentState.onReady?.(api);
   }, []);
   return {
@@ -19246,7 +19282,7 @@ var RowDetailState = class extends BooleanCollectionState {
 };
 
 // src/utils/FixedSizeMap.ts
-var _FixedSizeMap = class {
+var _FixedSizeMap = class _FixedSizeMap {
   constructor(clone, size) {
     this.keysInOrder = [];
     if (typeof clone === "number") {
@@ -19304,8 +19340,8 @@ var _FixedSizeMap = class {
     return this;
   }
 };
+_FixedSizeMap.DEFAULT_SIZE = 10;
 var FixedSizeMap = _FixedSizeMap;
-FixedSizeMap.DEFAULT_SIZE = 10;
 
 // src/components/DataSource/RowDetailCache.ts
 var RowDetailNoCacheStorage = class {
@@ -19465,8 +19501,7 @@ function realignColumnContextMenu(param) {
 
 // src/components/InfiniteTable/types/Utility.ts
 function notNullable(value) {
-  if (value === null || value === void 0)
-    return false;
+  if (value === null || value === void 0) return false;
   const testDummyForCompileError = value;
   return true;
 }
@@ -21134,7 +21169,7 @@ function getImperativeApi(context) {
 
 // src/components/InfiniteTable/hooks/useAutoSizeColumns.ts
 import {
-  useEffect as useEffect21,
+  useEffect as useEffect19,
   useRef as useRef22,
   useState as useState15
 } from "react";
@@ -21212,7 +21247,7 @@ function useAutoSizeColumns() {
   const theKey = typeof autoSizeColumnsKey === "object" ? autoSizeColumnsKey.key : autoSizeColumnsKey;
   const getTheKey = useLatest(theKey);
   const lastExecutedIdentifierRef = useRef22(null);
-  useEffect21(() => {
+  useEffect19(() => {
     const key = getTheKey();
     if (key == null) {
       return;
@@ -21225,7 +21260,7 @@ function useAutoSizeColumns() {
     };
     return brain.onRenderRangeChange(onChange);
   }, [brain]);
-  useEffect21(() => {
+  useEffect19(() => {
     if (theKey == null) {
       return;
     }
@@ -21271,7 +21306,7 @@ function useAutoSizeColumns() {
 
 // src/components/InfiniteTable/hooks/useCellRendering.tsx
 import { useMemo as useMemo9 } from "react";
-import { useCallback as useCallback20, useEffect as useEffect22, useRef as useRef24 } from "react";
+import { useCallback as useCallback20, useEffect as useEffect20, useRef as useRef24 } from "react";
 import * as React54 from "react";
 
 // src/components/InfiniteTable/hooks/useYourBrain.ts
@@ -21528,17 +21563,17 @@ function useCellRendering(param) {
     rowspan
   });
   const scrollTopMaxRef = useRef24(0);
-  useEffect22(() => {
+  useEffect20(() => {
     return brain.onRenderCountChange(() => {
       scrollTopMaxRef.current = brain.scrollTopMax;
     });
   }, [brain]);
-  useEffect22(() => {
+  useEffect20(() => {
     return brain.onRenderRangeChange((range) => {
       getState().onRenderRangeChange?.(range);
     });
   }, [brain]);
-  useEffect22(() => {
+  useEffect20(() => {
     return brain.onScrollStop((scrollPosition) => {
       const { scrollTop: scrollTop2, scrollLeft: scrollLeft2 } = scrollPosition;
       if (scrollTop2 === 0) {
@@ -21578,13 +21613,13 @@ function useCellRendering(param) {
       }
     });
   }, [brain, onScrollToTop, onScrollToBottom, onScrollStop]);
-  useEffect22(() => {
+  useEffect20(() => {
     if (!bodySize.height) {
       return;
     }
     actions.ready = true;
   }, [!!bodySize.height]);
-  useEffect22(() => {
+  useEffect20(() => {
     if (!ready) {
     }
     const { onReady } = getState();
@@ -21593,7 +21628,7 @@ function useCellRendering(param) {
     }
   }, [ready]);
   const [, rerender] = useRerender();
-  useEffect22(() => {
+  useEffect20(() => {
     rerender();
   }, [dataSourceState]);
   const renderCell = useCallback20(
@@ -21718,7 +21753,7 @@ function useCellRendering(param) {
 }
 
 // src/components/InfiniteTable/hooks/useComputed.ts
-import { useEffect as useEffect25, useState as useState17 } from "react";
+import { useEffect as useEffect23, useState as useState17 } from "react";
 
 // src/components/InfiniteTable/utils/MultiCellSelector.ts
 var MultiCellSelector = class {
@@ -21991,7 +22026,7 @@ function useColumnSizeFn(columns) {
 }
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
-import { useEffect as useEffect23, useLayoutEffect as useLayoutEffect11, useMemo as useMemo11 } from "react";
+import { useEffect as useEffect21, useLayoutEffect as useLayoutEffect13, useMemo as useMemo11 } from "react";
 
 // src/components/InfiniteTable/state/getInitialState.ts
 import { createRef } from "react";
@@ -22356,7 +22391,8 @@ function createBrains(debugId, wrapRowsHorizontally) {
   const brain = !wrapRowsHorizontally ? new MatrixBrain(debugChannel) : new HorizontalLayoutMatrixBrain(debugChannel, {
     isHeader: false
   });
-  const headerBrain = !wrapRowsHorizontally ? new MatrixBrain(debugChannel) : new HorizontalLayoutMatrixBrain(debugChannel, {
+  const headerBrainChannel = `${debugChannel}:header`;
+  const headerBrain = !wrapRowsHorizontally ? new MatrixBrain(headerBrainChannel) : new HorizontalLayoutMatrixBrain(headerBrainChannel, {
     isHeader: true,
     masterBrain: brain
   });
@@ -22366,30 +22402,40 @@ function createBrains(debugId, wrapRowsHorizontally) {
       scrollTop: 0
     });
   });
-  if (false) {
-    globalThis.brain = brain;
-    globalThis.headerBrain = headerBrain;
-  }
   const { renderer, onRenderUpdater } = createRenderer(brain);
+  const { renderer: headerRenderer, onRenderUpdater: headerOnRenderUpdater } = createRenderer(headerBrain);
   brain.onAvailableSizeChange((size) => {
     headerBrain.update({ width: size.width });
   });
-  return { brain, headerBrain, renderer, onRenderUpdater };
+  return {
+    brain,
+    headerBrain,
+    renderer,
+    onRenderUpdater,
+    headerRenderer,
+    headerOnRenderUpdater
+  };
 }
 function initSetupState2({
   debugId,
   wrapRowsHorizontally
 }) {
   const columnsGeneratedForGrouping = {};
-  const { brain, headerBrain, renderer, onRenderUpdater } = createBrains(
-    debugId,
-    !!wrapRowsHorizontally
-  );
+  const {
+    brain,
+    headerBrain,
+    renderer,
+    onRenderUpdater,
+    headerRenderer,
+    headerOnRenderUpdater
+  } = createBrains(debugId, !!wrapRowsHorizontally);
   const domRef = createRef();
   return {
     debugWarnings: /* @__PURE__ */ new Map(),
     renderer,
     onRenderUpdater,
+    headerRenderer,
+    headerOnRenderUpdater,
     devToolsDetected: !!globalThis.__INFINITE_TABLE_DEVTOOLS_HOOK__,
     propsCache: /* @__PURE__ */ new Map([]),
     lastRowToCollapseRef: { current: null },
@@ -22580,7 +22626,9 @@ var cleanupState = (state) => {
   state.brain.destroy();
   state.headerBrain.destroy();
   state.renderer.destroy();
+  state.headerRenderer.destroy();
   state.onRenderUpdater.destroy();
+  state.headerOnRenderUpdater.destroy();
   state.onFlashingDurationCSSVarChange.destroy();
   state.onRowHeightCSSVarChange.destroy();
   state.onColumnHeaderHeightCSSVarChange.destroy();
@@ -22856,13 +22904,13 @@ function useColumnsWhen() {
       pivotGrandTotalColumnPosition
     }
   } = useManagedComponentState();
-  useEffect23(() => {
+  useEffect21(() => {
     dataSourceActions.generateGroupRows = groupRenderStrategy !== "inline";
   }, [groupRenderStrategy]);
-  useEffect23(() => {
+  useEffect21(() => {
     dataSourceActions.pivotTotalColumnPosition = pivotTotalColumnPosition;
   }, [pivotTotalColumnPosition]);
-  useEffect23(() => {
+  useEffect21(() => {
     if (pivotGrandTotalColumnPosition != void 0) {
       dataSourceActions.pivotGrandTotalColumnPosition = pivotGrandTotalColumnPosition;
     }
@@ -22945,7 +22993,7 @@ function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
     });
     return Object.keys(computedColumns).length === 0 ? void 0 : computedColumns;
   }
-  useEffect23(() => {
+  useEffect21(() => {
     const update = () => {
       componentActions.columnsWhenInlineGroupRenderStrategy = isTree ? void 0 : computeColumnsWhenInlineGroupRenderStrategy(
         columns,
@@ -22976,7 +23024,7 @@ function useColumnsWhenGrouping() {
     getComponentState
   } = useManagedComponentState();
   const toggleGroupRow = useToggleGroupRow();
-  useEffect23(() => {
+  useEffect21(() => {
     const update = () => {
       const { columns: columnsWhenGrouping, groupColumnIds } = getColumnsWhenGrouping({
         columns,
@@ -23047,7 +23095,7 @@ function useHideColumns(groupByMap) {
       groupRenderStrategy
     }
   } = useManagedComponentState();
-  useLayoutEffect11(() => {
+  useLayoutEffect13(() => {
     if (groupRenderStrategy !== "multi-column") {
       return;
     }
@@ -23080,7 +23128,7 @@ function useHideColumns(groupByMap) {
     hideEmptyGroupColumns ? groupRowsIndexesInDataArray : null,
     hideEmptyGroupColumns
   ]);
-  useEffect23(() => {
+  useEffect21(() => {
     const isGrouped = groupBy.length > 0;
     const currentState = getComponentState();
     const {
@@ -23491,7 +23539,7 @@ function useComputedRowHeight(param) {
 }
 
 // src/components/InfiniteTable/hooks/useScrollbars.ts
-import { useState as useState16, useEffect as useEffect24, useLayoutEffect as useLayoutEffect12 } from "react";
+import { useState as useState16, useEffect as useEffect22, useLayoutEffect as useLayoutEffect14 } from "react";
 var INITIAL_SCROLLBARS = {
   vertical: false,
   horizontal: false
@@ -23500,7 +23548,7 @@ function useScrollbars(brain) {
   const { getComponentState: getInfiniteTableState } = useManagedComponentState();
   const { getState: getDataSourceState } = useDataSourceContextValue();
   const [scrollbars, setScrollbars] = useState16(INITIAL_SCROLLBARS);
-  useEffect24(() => {
+  useEffect22(() => {
     return brain.onRenderCountChange(() => {
       const { scrollTopMax, scrollLeftMax } = brain;
       setScrollbars({
@@ -23509,7 +23557,7 @@ function useScrollbars(brain) {
       });
     });
   }, [brain]);
-  useLayoutEffect12(() => {
+  useLayoutEffect14(() => {
     const dataSourceState = getDataSourceState();
     const { onScrollbarsChange } = getInfiniteTableState();
     const { notifyScrollbarsChange } = dataSourceState;
@@ -23575,7 +23623,7 @@ function useComputed() {
       }
     );
   });
-  useEffect25(() => {
+  useEffect23(() => {
     dataSourceActions.showSeparatePivotColumnForSingleAggregation = showSeparatePivotColumnForSingleAggregation;
   }, [showSeparatePivotColumnForSingleAggregation]);
   const { multiSort, filterValue, filterTypes } = dataSourceState;
@@ -23883,7 +23931,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "7.0.0"
+      version: "7.1.0"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -23894,18 +23942,18 @@ var useLicense = (licenseKey = "") => {
 };
 
 // src/components/InfiniteTable/hooks/useScrollToActiveCell.ts
-import { useRef as useRef25, useEffect as useEffect26 } from "react";
+import { useRef as useRef25, useEffect as useEffect24 } from "react";
 var RETRIES = 10;
 function useScrollToActiveCell(activeCellIndex, dataCount, imperativeApi) {
   const didScrollRef = useRef25(false);
   const rafId = useRef25(null);
-  useEffect26(() => {
+  useEffect24(() => {
     if (activeCellIndex != null) {
       didScrollRef.current = false;
       cancelRaf(rafId.current);
     }
   }, [activeCellIndex]);
-  useEffect26(() => {
+  useEffect24(() => {
     if (activeCellIndex != null && !didScrollRef.current) {
       let tryScroll2 = function(times = 0) {
         times++;
@@ -23933,18 +23981,18 @@ function useScrollToActiveCell(activeCellIndex, dataCount, imperativeApi) {
 }
 
 // src/components/InfiniteTable/hooks/useScrollToActiveRow.ts
-import { useRef as useRef26, useEffect as useEffect27 } from "react";
+import { useRef as useRef26, useEffect as useEffect25 } from "react";
 var RETRIES2 = 10;
 function useScrollToActiveRow(activeRowIndex, dataCount, imperativeApi) {
   const didScrollRef = useRef26(false);
   const rafId = useRef26(null);
-  useEffect27(() => {
+  useEffect25(() => {
     if (activeRowIndex != null) {
       didScrollRef.current = false;
       cancelAnimationFrame(rafId.current);
     }
   }, [activeRowIndex]);
-  useEffect27(() => {
+  useEffect25(() => {
     if (activeRowIndex != null && !didScrollRef.current) {
       let tryScroll2 = function(times = 0) {
         times++;
@@ -23973,7 +24021,7 @@ function useScrollToActiveRow(activeRowIndex, dataCount, imperativeApi) {
 var toCSSVarName = (value) => `--infinite-${value}`;
 
 // src/components/InfiniteTable/eventHandlers/index.ts
-import { useCallback as useCallback23, useMemo as useMemo15, useEffect as useEffect28 } from "react";
+import { useCallback as useCallback23, useMemo as useMemo15, useEffect as useEffect26 } from "react";
 
 // src/components/InfiniteTable/eventHandlers/onCellClick.ts
 function onCellClick(context, event) {
@@ -24685,7 +24733,7 @@ function useEventHandlersContext() {
 }
 function handleDOMEvents() {
   const context = useEventHandlersContext();
-  useEffect28(() => {
+  useEffect26(() => {
     const removeOnKeyDown = context.getState().keyDown.onChange((event) => {
       onKeyDown(context, event);
     });
@@ -24741,20 +24789,20 @@ function useDOMEventHandlers() {
 }
 
 // src/components/InfiniteTable/hooks/useColumnMenu.ts
-import { useEffect as useEffect32 } from "react";
+import { useEffect as useEffect30 } from "react";
 
 // src/components/hooks/useOverlay/index.tsx
 import * as React56 from "react";
 import {
   useCallback as useCallback24,
-  useEffect as useEffect30,
-  useLayoutEffect as useLayoutEffect13,
+  useEffect as useEffect28,
+  useLayoutEffect as useLayoutEffect15,
   useState as useState18
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
 // src/utils/pageGeometry/Point.ts
-var Point = class {
+var Point = class _Point {
   constructor(point) {
     this.top = 0;
     this.left = 0;
@@ -24762,10 +24810,10 @@ var Point = class {
     this.top = point.top;
   }
   static clone(point) {
-    return new Point(point);
+    return new _Point(point);
   }
   static from(point) {
-    return new Point(point);
+    return new _Point(point);
   }
   shift(shiftOptions) {
     if (shiftOptions.top != null) {
@@ -24871,14 +24919,14 @@ var PolyWithPoints = class {
 };
 
 // src/utils/pageGeometry/ConvexPoly.ts
-var ConvexPoly = class extends PolyWithPoints {
+var ConvexPoly = class _ConvexPoly extends PolyWithPoints {
+  static clone(points) {
+    return new _ConvexPoly(points);
+  }
   constructor(points) {
     super();
     this.points = points.map(Point.clone);
   }
-  static clone(points) {
-    return new ConvexPoly(points);
-  }
   getPoints() {
     return this.points;
   }
@@ -24891,7 +24939,7 @@ var ConvexPoly = class extends PolyWithPoints {
 };
 
 // src/utils/pageGeometry/Rectangle.ts
-var Rectangle = class extends PolyWithPoints {
+var Rectangle = class _Rectangle extends PolyWithPoints {
   constructor(coordsAndSize) {
     super();
     this.top = 0;
@@ -24911,16 +24959,16 @@ var Rectangle = class extends PolyWithPoints {
     }
   }
   static fromDOMRect(rect) {
-    return new Rectangle(rect);
+    return new _Rectangle(rect);
   }
   static clone(rect) {
-    return new Rectangle(rect);
+    return new _Rectangle(rect);
   }
   static from(rect) {
-    return Rectangle.clone(rect);
+    return _Rectangle.clone(rect);
   }
   static fromPoint(point) {
-    return Rectangle.from({
+    return _Rectangle.from({
       top: point.top,
       left: point.left,
       width: 0,
@@ -25138,7 +25186,7 @@ function DefaultOverlayPortal(props) {
 }
 function OverlayContent(props) {
   const nodeRef = React56.useRef(null);
-  useEffect30(() => {
+  useEffect28(() => {
     return props.realign.onChange((handle) => {
       if (nodeRef.current && handle) {
         alignNode(nodeRef.current, handle);
@@ -25199,7 +25247,7 @@ async function alignNode(node, params) {
 }
 function useOverlayPortal(content, portalContainer) {
   const [container, setContainer] = useState18(null);
-  useLayoutEffect13(() => {
+  useLayoutEffect15(() => {
     async function getContainer() {
       const container2 = portalContainer ? await retrieveElement(portalContainer) : null;
       if (container2 != null) {
@@ -25505,7 +25553,7 @@ var deriveStateFromProps2 = (params) => {
 import * as React59 from "react";
 import {
   useCallback as useCallback26,
-  useLayoutEffect as useLayoutEffect14,
+  useLayoutEffect as useLayoutEffect16,
   useRef as useRef29,
   useState as useState20
 } from "react";
@@ -25735,10 +25783,10 @@ function useMenuContext() {
 }
 
 // src/components/hooks/useMounted.ts
-import { useCallback as useCallback25, useEffect as useEffect31, useRef as useRef28 } from "react";
+import { useCallback as useCallback25, useEffect as useEffect29, useRef as useRef28 } from "react";
 function useMounted() {
   let mountedRef = useRef28(true);
-  useEffect31(() => {
+  useEffect29(() => {
     mountedRef.current = true;
     return () => {
       mountedRef.current = false;
@@ -25903,7 +25951,7 @@ function MenuComponent(props) {
   const isMounted = useMounted();
   const [submenuApi, setSubmenuApi] = useState20(null);
   let renderedChildren = null;
-  useLayoutEffect14(() => {
+  useLayoutEffect16(() => {
     const { runtimeItems: runtimeItems2 } = getState();
     const activeItem = runtimeItems2.filter(
       (item) => item.type === "item" && activeItemKey === item.key
@@ -26550,7 +26598,7 @@ function useColumnMenu() {
   } = useOverlay({
     portalContainer: masterContext ? masterContext.getMasterState().portalDOMRef.current : false
   });
-  useEffect32(() => {
+  useEffect30(() => {
     const { actions: actions2, getState: getState2 } = context;
     const state = getState2();
     return state.onColumnMenuClick.onChange((info) => {
@@ -26565,7 +26613,7 @@ function useColumnMenu() {
     });
   }, []);
   const { columnMenuVisibleForColumnId, columnMenuVisibleKey } = getState();
-  useEffect32(() => {
+  useEffect30(() => {
     const { columnMenuVisibleForColumnId: columnMenuVisibleForColumnId2, columnMenuTargetRef } = getState();
     if (columnMenuVisibleForColumnId2) {
       let handleMouseDown2 = function(event) {
@@ -26645,13 +26693,13 @@ function FocusDetect() {
 }
 
 // src/components/InfiniteTable/hooks/useEditingCallbackProps.ts
-import { useEffect as useEffect33 } from "react";
+import { useEffect as useEffect31 } from "react";
 function useOnEditCancelled() {
   const context = useInfiniteTable();
   const { getState } = context;
   const { editingCell } = getState();
   const cancelled = editingCell && !editingCell.active ? editingCell.cancelled : void 0;
-  useEffect33(() => {
+  useEffect31(() => {
     if (cancelled) {
       const { rowIndex, columnId, initialValue } = getState().editingCell;
       const { onEditCancelled } = getState();
@@ -26673,7 +26721,7 @@ function useOnEditRejected() {
     state: { editingCell }
   } = context;
   const rejected = editingCell && !editingCell.active && editingCell.accepted instanceof Error ? editingCell.accepted : void 0;
-  useEffect33(() => {
+  useEffect31(() => {
     if (rejected) {
       const { rowIndex, columnId, value, initialValue } = getState().editingCell;
       const { onEditRejected } = getState();
@@ -26697,7 +26745,7 @@ function useFocusOnEditStop() {
   } = context;
   const active = editingCell?.active;
   const prevActive = usePrevious(active);
-  useEffect33(() => {
+  useEffect31(() => {
     if (!active && prevActive) {
       context.api.focus();
     }
@@ -26710,7 +26758,7 @@ function useOnEditAccepted() {
     getState
   } = context;
   const accepted = editingCell && !editingCell.active && !editingCell.cancelled && editingCell.accepted === true;
-  useEffect33(() => {
+  useEffect31(() => {
     if (accepted) {
       const { editingCell: editingCell2 } = getState();
       const { value, rowIndex, columnId, initialValue } = editingCell2;
@@ -26735,7 +26783,7 @@ function useOnEditPersisted() {
     getState
   } = context;
   const persisted = editingCell ? editingCell.persisted : void 0;
-  useEffect33(() => {
+  useEffect31(() => {
     if (persisted) {
       const { editingCell: editingCell2, onEditPersistError, onEditPersistSuccess } = getState();
       if (!editingCell2) {
@@ -26768,7 +26816,7 @@ function useEditingCallbackProps() {
 }
 
 // src/components/InfiniteTable/hooks/useColumnFilterOperatorMenu.ts
-import { useEffect as useEffect34 } from "react";
+import { useEffect as useEffect32 } from "react";
 
 // src/components/InfiniteTable/utils/getFilterOperatorMenuForColumn.tsx
 import * as React66 from "react";
@@ -26907,7 +26955,7 @@ function useColumnFilterOperatorMenu() {
   } = useOverlay({
     portalContainer: masterContext ? masterContext.getMasterState().portalDOMRef.current : false
   });
-  useEffect34(() => {
+  useEffect32(() => {
     const { actions: actions2, getState: getState2 } = context;
     const state = getState2();
     return state.onFilterOperatorMenuClick.onChange((info) => {
@@ -26943,7 +26991,7 @@ function useColumnFilterOperatorMenu() {
       actions2.filterOperatorMenuVisibleForColumnId = column.id;
     });
   }, []);
-  useEffect34(() => {
+  useEffect32(() => {
     const { filterOperatorMenuVisibleForColumnId } = getState();
     if (filterOperatorMenuVisibleForColumnId) {
       let handleMouseDown2 = function(event) {
@@ -26970,7 +27018,7 @@ function useColumnFilterOperatorMenu() {
 }
 
 // src/components/InfiniteTable/hooks/useContextMenu.ts
-import { useEffect as useEffect35 } from "react";
+import { useEffect as useEffect33 } from "react";
 
 // src/components/InfiniteTable/utils/getCellContextMenu.tsx
 import * as React68 from "react";
@@ -27137,7 +27185,7 @@ function useCellContextMenu() {
   } = useOverlay({
     portalContainer: masterContext ? masterContext.getMasterState().portalDOMRef.current : false
   });
-  useEffect35(() => {
+  useEffect33(() => {
     const { actions: actions2, getState: getState2, getDataSourceState } = context;
     const state = getState2();
     return state.cellContextMenu.onChange((info) => {
@@ -27188,7 +27236,7 @@ function useCellContextMenu() {
       }
     });
   }, []);
-  useEffect35(() => {
+  useEffect33(() => {
     const { cellContextMenuVisibleFor } = getState();
     if (cellContextMenuVisibleFor) {
       let handleMouseDown2 = function(event) {
@@ -27224,7 +27272,7 @@ function useTableContextMenu() {
   } = useOverlay({
     portalContainer: masterContext ? masterContext.getMasterState().portalDOMRef.current : false
   });
-  useEffect35(() => {
+  useEffect33(() => {
     const { actions: actions2, getState: getState2 } = context;
     const state = getState2();
     return state.contextMenu.onChange((info) => {
@@ -27273,7 +27321,7 @@ function useTableContextMenu() {
       }
     });
   }, []);
-  useEffect35(() => {
+  useEffect33(() => {
     const { contextMenuVisibleFor } = getState();
     if (contextMenuVisibleFor) {
       let handleMouseDown2 = function(event) {
@@ -27304,13 +27352,13 @@ import { useRef as useRef30 } from "react";
 import * as React69 from "react";
 
 // src/components/InfiniteTable/hooks/useGridScroll.ts
-import { useCallback as useCallback28, useEffect as useEffect36 } from "react";
+import { useCallback as useCallback28, useEffect as useEffect34 } from "react";
 function useGridScroll(onScroll, deps) {
   const {
     state: { brain }
   } = useInfiniteTable();
   const memoizedOnScroll = useCallback28(onScroll, deps);
-  useEffect36(() => {
+  useEffect34(() => {
     const removeOnScroll = brain.onScroll(memoizedOnScroll);
     return removeOnScroll;
   }, [brain, memoizedOnScroll]);
@@ -27380,12 +27428,12 @@ function useVisibleColumnSizes() {
 var DEBUG_NAME = "InfiniteTable";
 
 // src/components/InfiniteTable/hooks/useToggleWrapRowsHorizontally.ts
-import { useEffect as useEffect37 } from "react";
+import { useEffect as useEffect35 } from "react";
 function useToggleWrapRowsHorizontally() {
   const { state, getState, actions } = useInfiniteTable();
   const { wrapRowsHorizontally } = state;
   const oldWrapRowsHorizontally = usePrevious(wrapRowsHorizontally);
-  useEffect37(() => {
+  useEffect35(() => {
     if (oldWrapRowsHorizontally !== wrapRowsHorizontally) {
       const { brain, headerBrain, renderer, onRenderUpdater } = getState();
       brain.destroy();
@@ -27397,12 +27445,14 @@ function useToggleWrapRowsHorizontally() {
       actions.headerBrain = newBrains.headerBrain;
       actions.renderer = newBrains.renderer;
       actions.onRenderUpdater = newBrains.onRenderUpdater;
+      actions.headerRenderer = newBrains.headerRenderer;
+      actions.headerOnRenderUpdater = newBrains.headerOnRenderUpdater;
     }
   }, [oldWrapRowsHorizontally, wrapRowsHorizontally]);
 }
 
 // src/components/InfiniteTable/hooks/useHorizontalLayout.ts
-import { useEffect as useEffect38 } from "react";
+import { useEffect as useEffect36 } from "react";
 function useHorizontalLayout() {
   const { getState, actions, dataSourceActions, getDataSourceState } = useInfiniteTable();
   const { groupBy, isTree } = getDataSourceState();
@@ -27412,7 +27462,7 @@ function useHorizontalLayout() {
   if (!wrapRowsHorizontally) {
     repeatWrappedGroupRows = false;
   }
-  useEffect38(() => {
+  useEffect36(() => {
     if (!wrapRowsHorizontally) {
       if (getDataSourceState().repeatWrappedGroupRows) {
         dataSourceActions.repeatWrappedGroupRows = false;
@@ -27456,7 +27506,7 @@ function useHorizontalLayout() {
 }
 
 // src/components/InfiniteTable/hooks/useDebugMode.ts
-import { useEffect as useEffect39, useRef as useRef31 } from "react";
+import { useEffect as useEffect37, useRef as useRef31 } from "react";
 
 // src/components/InfiniteTable/hooks/debugModeDevToolsOverlay.css.ts
 var DevToolsOverlay = createRuntimeFn({ defaultClassName: "_143ofgf0", variantClassNames: { active: { true: "_143ofgf1", false: "_143ofgf2" } }, defaultVariants: {}, compoundVariants: [] });
@@ -27602,7 +27652,7 @@ function useDebugMode() {
       }
     }
   }
-  useEffect39(() => {
+  useEffect37(() => {
     const dataSourceState = getDataSourceState();
     if (dataSourceState.debugId !== debugId) {
       dataSourceActions.debugId = debugId;
@@ -27773,7 +27823,7 @@ var DEVTOOLS_MESSAGES = {
 function listenForDevTools() {
   if (typeof window !== "undefined") {
     window.addEventListener("message", (event) => {
-      if (event.data.source.startsWith("infinite-table-devtools-contentscript") && event.data.target === "infinite-table-page") {
+      if (event && event.data && typeof event.data.source === "string" && typeof event.data.target === "string" && event.data.target === "infinite-table-page" && event.data.source.startsWith("infinite-table-devtools-contentscript")) {
         if (!window.__INFINITE_TABLE_DEVTOOLS_HOOK__) {
           setupHook();
           HOOK_FN_SETUP_CALLBACK(
@@ -27806,7 +27856,7 @@ function useDevTools() {
   const debugId = state.debugId;
   const debugIdRef = useRef31(debugId);
   debugIdRef.current = debugId;
-  useEffect39(() => {
+  useEffect37(() => {
     const debugId2 = debugIdRef.current;
     if (!debugId2) {
       return;
@@ -27834,7 +27884,7 @@ function useDevTools() {
       withHookFn(hookFn2);
     });
   }, []);
-  useEffect39(() => {
+  useEffect37(() => {
     const debugId2 = debugIdRef.current;
     if (!debugId2) {
       return;
@@ -27852,7 +27902,7 @@ function useDevTools() {
       });
     }
   });
-  useEffect39(() => {
+  useEffect37(() => {
     if (!debugId) {
       return;
     }
@@ -28391,7 +28441,7 @@ function queryKeyToCacheKey(key) {
   }
   return key;
 }
-var _DataClient = class {
+var _DataClient = class _DataClient {
   constructor(options) {
     this.queryCache = new DeepMap();
     this.removeQueryIfErrored = (query, stringifiedQueryKey) => {
@@ -28485,8 +28535,8 @@ var _DataClient = class {
     _DataClient.clients.delete(this.options.name);
   }
 };
+_DataClient.clients = /* @__PURE__ */ new Map();
 var DataClient = _DataClient;
-DataClient.clients = /* @__PURE__ */ new Map();
 
 // src/components/InfiniteTable/eventHandlers/keyboardShortcuts.ts
 var instantEdit = {
@@ -28533,7 +28583,7 @@ var keyboardShortcuts = {
 };
 
 // src/components/hooks/useInterceptedMap.ts
-import { useEffect as useEffect41 } from "react";
+import { useEffect as useEffect39 } from "react";
 function interceptMap(map2, fns) {
   const { set, delete: deleteKey, clear } = map2;
   if (fns.set) {
@@ -28576,7 +28626,7 @@ function interceptMap(map2, fns) {
 }
 
 // src/utils/FixedSizeSet.ts
-var _FixedSizeSet = class {
+var _FixedSizeSet = class _FixedSizeSet {
   constructor(clone, size) {
     this.orderRefs = [];
     if (typeof clone === "number") {
@@ -28631,11 +28681,11 @@ var _FixedSizeSet = class {
     return this;
   }
 };
+_FixedSizeSet.DEFAULT_SIZE = 10;
 var FixedSizeSet = _FixedSizeSet;
-FixedSizeSet.DEFAULT_SIZE = 10;
 
 // src/utils/WeakFixedSizeSet.ts
-var _WeakFixedSizeSet = class {
+var _WeakFixedSizeSet = class _WeakFixedSizeSet {
   constructor(clone, size) {
     this.orderRefs = [];
     if (typeof clone === "number") {
@@ -28691,11 +28741,11 @@ var _WeakFixedSizeSet = class {
     return this;
   }
 };
+_WeakFixedSizeSet.DEFAULT_SIZE = 10;
 var WeakFixedSizeSet = _WeakFixedSizeSet;
-WeakFixedSizeSet.DEFAULT_SIZE = 10;
 
 // src/components/hooks/useEffectWhenSameDeps.ts
-import { useEffect as useEffect42, useRef as useRef32 } from "react";
+import { useEffect as useEffect40, useRef as useRef32 } from "react";
 var isSameDeps = (deps, prevDeps) => {
   return deps.every((dep, index) => dep === prevDeps[index]);
 };
@@ -28709,7 +28759,7 @@ var useEffectWhenSameDeps = (callback, deps) => {
   effectDepsRef.current = effectDeps;
   const callbackRef = useRef32(callback);
   callbackRef.current = callback;
-  useEffect42(() => {
+  useEffect40(() => {
     if (isInitialRef.current) {
       isInitialRef.current = false;
       return;
@@ -28719,7 +28769,7 @@ var useEffectWhenSameDeps = (callback, deps) => {
 };
 
 // src/components/hooks/useEffectWhen.ts
-import { useEffect as useEffect43, useRef as useRef33 } from "react";
+import { useEffect as useEffect41, useRef as useRef33 } from "react";
 var isSameDeps2 = (deps, prevDeps, compare) => {
   return deps.every((dep, index) => {
     if (compare) {
@@ -28749,7 +28799,7 @@ var useEffectWhen = (callback, options) => {
   if (sameRespected && differentRespected) {
     isInitialRef.current = false;
   }
-  useEffect43(() => {
+  useEffect41(() => {
     if (isInitialRef.current) {
       return;
     }
@@ -28799,9 +28849,11 @@ var createFlashingColumnCellComponent = (options = {}) => {
       const oldValueRef = React73.useRef(value);
       const oldValue = initialRef.current ? null : oldValueRef.current;
       initialRef.current = false;
-      const flashTimeoutIdRef = React73.useRef();
-      const flashDirectionRef = React73.useRef();
-      const fadeTimeoutIdRef = React73.useRef();
+      const flashTimeoutIdRef = React73.useRef(void 0);
+      const flashDirectionRef = React73.useRef(
+        void 0
+      );
+      const fadeTimeoutIdRef = React73.useRef(void 0);
       useEffectWhen(
         () => {
           if (value === oldValueRef.current) {
@@ -28892,6 +28944,7 @@ export {
   debug,
   defaultFilterTypes2 as defaultFilterTypes,
   eventMatchesKeyboardShortcut,
+  filterDataArray,
   defaultFilterTypes2 as filterTypes,
   flatten,
   buildManagedComponent as getComponentStateRoot,
@@ -28915,6 +28968,7 @@ export {
   useInfiniteColumnFilterEditor,
   useInfiniteHeaderCell,
   useInfinitePortalContainer,
+  useLayoutEffectWithChanges,
   useManagedDataSource,
   useMasterRowInfo,
   useOverlay,