@infinite-table/infinite-react 6.2.9 → 6.2.11

package/index.dev.mjs

@@ -1394,7 +1394,7 @@ var internalProps = {
 };
 
 // src/components/InfiniteTable/internalVars.css.ts
-var InternalVars = { currentColumnTransformX: "var(--_16hkbkc0)", y: "var(--_16hkbkc1)", currentFlashingBackground: "var(--_16hkbkc2)", currentFlashingDuration: "var(--_16hkbkc3)", activeCellRowOffset: "var(--_16hkbkc4)", activeCellRowOffsetX: "var(--_16hkbkc5)", activeCellRowHeight: "var(--_16hkbkc6)", activeCellOffsetX: "var(--_16hkbkc7)", activeCellOffsetY: "var(--_16hkbkc8)", scrollTopForActiveRow: "var(--_16hkbkc9)", scrollLeftForActiveRowWhenHorizontalLayout: "var(--_16hkbkca)", activeCellColWidth: "var(--_16hkbkcb)", activeCellColOffset: "var(--_16hkbkcc)", columnReorderEffectDurationAtIndex: "var(--_16hkbkcd)", columnWidthAtIndex: "var(--_16hkbkce)", columnOffsetAtIndex: "var(--_16hkbkcf)", columnOffsetAtIndexWhileReordering: "var(--_16hkbkcg)", columnZIndexAtIndex: "var(--_16hkbkch)", pinnedStartWidth: "var(--_16hkbkci)", pinnedEndWidth: "var(--_16hkbkcj)", pinnedEndOffset: "var(--_16hkbkck)", computedVisibleColumnsCount: "var(--_16hkbkcl)", baseZIndexForCells: "var(--_16hkbkcm)", bodyWidth: "var(--_16hkbkcn)", bodyHeight: "var(--_16hkbkco)", scrollbarWidthHorizontal: "var(--_16hkbkcp)", scrollbarWidthVertical: "var(--_16hkbkcq)", scrollLeft: "var(--_16hkbkcr)", scrollTop: "var(--_16hkbkcs)", virtualScrollLeftOffset: "var(--_16hkbkct)", virtualScrollTopOffset: "var(--_16hkbkcu)" };
+var InternalVars = { currentColumnTransformX: "var(--_16hkbkc0)", y: "var(--_16hkbkc1)", currentFlashingBackground: "var(--_16hkbkc2)", currentFlashingDuration: "var(--_16hkbkc3)", activeCellRowOffset: "var(--_16hkbkc4)", activeCellRowOffsetX: "var(--_16hkbkc5)", activeCellRowHeight: "var(--_16hkbkc6)", activeCellOffsetX: "var(--_16hkbkc7)", activeCellOffsetY: "var(--_16hkbkc8)", scrollTopForActiveRow: "var(--_16hkbkc9)", scrollLeftForActiveRowWhenHorizontalLayout: "var(--_16hkbkca)", activeCellColWidth: "var(--_16hkbkcb)", activeCellColOffset: "var(--_16hkbkcc)", columnReorderEffectDurationAtIndex: "var(--_16hkbkcd)", columnWidthAtIndex: "var(--_16hkbkce)", columnOffsetAtIndex: "var(--_16hkbkcf)", columnOffsetAtIndexWhileReordering: "var(--_16hkbkcg)", columnZIndexAtIndex: "var(--_16hkbkch)", pinnedStartWidth: "var(--_16hkbkci)", pinnedEndWidth: "var(--_16hkbkcj)", pinnedEndOffset: "var(--_16hkbkck)", computedVisibleColumnsCount: "var(--_16hkbkcl)", baseZIndexForCells: "var(--_16hkbkcm)", bodyWidth: "var(--_16hkbkcn)", bodyHeight: "var(--_16hkbkco)", scrollbarWidthHorizontal: "var(--_16hkbkcp)", scrollbarWidthVertical: "var(--_16hkbkcq)", scrollLeft: "var(--_16hkbkcr)", scrollTop: "var(--_16hkbkcs)" };
 
 // src/components/InfiniteTable/vars.css.ts
 var CSS_LOADED_VALUE = "true";
@@ -5348,8 +5348,6 @@ var CELL_DETACHED_CLASSNAMES = [
 ];
 
 // src/components/HeadlessTable/index.tsx
-var virtualScrollLeftOffset = stripVar(InternalVars.virtualScrollLeftOffset);
-var virtualScrollTopOffset = stripVar(InternalVars.virtualScrollTopOffset);
 function useMatrixBrain(brain, brainOptions, fixedCellsInfo) {
   if (fixedCellsInfo && (fixedCellsInfo.fixedColsStart || fixedCellsInfo.fixedColsEnd || fixedCellsInfo.fixedRowsStart || fixedCellsInfo.fixedRowsEnd)) {
     brain.updateFixedCells({
@@ -5423,25 +5421,14 @@ function HeadlessTable(props) {
   }, [wrapRowsHorizontally, brain]);
   const updateDOMTransform = useCallback4((scrollPos) => {
     requestAnimationFrame(() => {
-      const scrollVarHost = scrollVarHostRef?.current;
-      if (!scrollVarHost) {
-        if (!domRef.current) {
-          return;
-        }
-        domRef.current.style.setProperty(
-          "transform",
-          `translate3d(${-scrollPos.scrollLeft}px, ${-scrollPos.scrollTop}px, 0px)`
-        );
+      if (!domRef.current) {
         return;
       }
-      scrollVarHost.style.setProperty(
-        virtualScrollLeftOffset,
-        `-${scrollPos.scrollLeft}px`
-      );
-      scrollVarHost.style.setProperty(
-        virtualScrollTopOffset,
-        `-${scrollPos.scrollTop}px`
+      domRef.current.style.setProperty(
+        "transform",
+        `translate3d(${-scrollPos.scrollLeft}px, ${-scrollPos.scrollTop}px, 0px)`
       );
+      return;
     });
   }, []);
   const onContainerScroll = useCallback4(
@@ -9358,7 +9345,10 @@ function getRawValueForCell(column, rowInfo) {
   const groupBy = dataSourceHasGrouping ? rowInfo.groupBy : void 0;
   let value = isGroupRow && groupBy && column.groupByForColumn && // if this is a multi-group column we're good
   (Array.isArray(column.groupByForColumn) || // or it has to be a group column for the current group row
-  column.groupByForColumn === groupBy[groupBy.length - 1]) ? rowInfo.value : isColumnWithField(column) ? data?.[column.field] : null;
+  column.groupByForColumn === groupBy[groupBy.length - 1]) ? rowInfo.value : isColumnWithField(column) ? (
+    // @ts-ignore
+    data?.[column.field]
+  ) : null;
   if (column.field && rowInfo.isGroupRow && rowInfo.reducerData && rowInfo.reducerData[column.field] != null) {
     value = rowInfo.reducerData[column.field];
   }
@@ -11225,7 +11215,7 @@ function assignGroupOffsetsAndComputedWidths(items, groupOffset = 0) {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
 import * as React47 from "react";
-import { useCallback as useCallback16, useRef as useRef18 } from "react";
+import { useCallback as useCallback16, useEffect as useEffect16, useRef as useRef18 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup.tsx
 import * as React46 from "react";
@@ -11489,6 +11479,18 @@ function InfiniteTableHeaderFn(props) {
   } = useInfiniteTable();
   const { computedColumnsMap } = computed;
   const domRef = useRef18(null);
+  const updateDOMTransform = useCallback16((scrollPosition) => {
+    if (domRef.current) {
+      domRef.current.style.transform = `translate3d(-${scrollPosition.scrollLeft}px, 0px, 0px)`;
+    }
+  }, []);
+  useEffect16(() => {
+    const removeOnScroll = headerBrain.onScroll(updateDOMTransform);
+    updateDOMTransform(
+      headerBrain.getScrollPosition() || { scrollLeft: 0, scrollTop: 0 }
+    );
+    return removeOnScroll;
+  }, [headerBrain]);
   const domProps = {
     ref: domRef,
     className: join(
@@ -11719,7 +11721,7 @@ function TableHeaderWrapper(props) {
 
 // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
 import * as React49 from "react";
-import { useEffect as useEffect16 } from "react";
+import { useEffect as useEffect17 } from "react";
 
 // src/components/utils/decamelize.ts
 function decamelize(str, options) {
@@ -11776,7 +11778,7 @@ var InfiniteTableLicenseFooter = React49.forwardRef(
         ref.current = node;
       }
     }, []);
-    useEffect16(() => {
+    useEffect17(() => {
       const forceStyle = () => {
         setTimeout(() => {
           enforceStyle(domRef.current, defaultStyle);
@@ -14607,10 +14609,10 @@ var Indexer = class {
 };
 
 // src/components/DataSource/privateHooks/useLoadData.ts
-import { useEffect as useEffect18, useMemo as useMemo7, useRef as useRef21, useState as useState13 } from "react";
+import { useEffect as useEffect19, useMemo as useMemo7, useRef as useRef21, useState as useState13 } from "react";
 
 // src/components/hooks/useEffectWithChanges.ts
-import { useEffect as useEffect17, useRef as useRef20 } from "react";
+import { useEffect as useEffect18, useRef as useRef20 } from "react";
 function useEffectWithChanges(fn, deps) {
   const prevRef = useRef20({});
   const oldValuesRef = useRef20({});
@@ -14628,7 +14630,7 @@ function useEffectWithChanges(fn, deps) {
     }
   }
   prevRef.current = deps;
-  useEffect17(() => {
+  useEffect18(() => {
     const changes2 = changesRef.current;
     let result = void 0;
     if (Object.keys(changes2).length !== 0) {
@@ -14646,7 +14648,7 @@ function useEffectWithObject(fn, deps) {
       useEffectDeps.push(deps[k]);
     }
   }
-  useEffect17(fn, useEffectDeps);
+  useEffect18(fn, useEffectDeps);
 }
 
 // src/utils/composeFunctions.ts
@@ -17745,7 +17747,7 @@ function useLoadData(options) {
     horizontal: false
   });
   const scrollbarsRef = useRef21(scrollbars);
-  useEffect18(() => {
+  useEffect19(() => {
     notifyScrollbarsChange.onChange((scrollbars2) => {
       if (!scrollbars2) {
         return;
@@ -17755,7 +17757,7 @@ function useLoadData(options) {
     });
     return () => notifyScrollbarsChange.destroy();
   }, [notifyScrollbarsChange]);
-  useEffect18(() => {
+  useEffect19(() => {
     if (!livePagination) {
       return;
     }
@@ -17768,7 +17770,7 @@ function useLoadData(options) {
     });
     return () => cancelAnimationFrame(frameId);
   }, [livePaginationCursor]);
-  useEffect18(() => {
+  useEffect19(() => {
     if (!livePagination || livePaginationCursor !== void 0) {
       return;
     }
@@ -17781,7 +17783,7 @@ function useLoadData(options) {
     });
     return () => cancelAnimationFrame(frameId);
   }, [dataArray.length, livePaginationCursor]);
-  useEffect18(() => {
+  useEffect19(() => {
     const state = getComponentState();
     const { livePaginationCursor: livePaginationCursor2, livePagination: livePagination2, dataArray: dataArray2 } = state;
     if (!scrollbars.vertical && livePagination2) {
@@ -17912,7 +17914,7 @@ function useLazyLoadRange(options, dependencies) {
     componentActions: actions,
     componentState
   } = options;
-  useEffect18(() => {
+  useEffect19(() => {
     actions.lazyLoadCacheOfLoadedBatches = new DeepMap();
   }, [componentState.data, componentState.dataParams]);
   const {
@@ -17993,7 +17995,7 @@ function useLazyLoadRange(options, dependencies) {
       groupRowsState
     }
   );
-  useEffect18(() => {
+  useEffect19(() => {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
       debouncedLoadRange();
     }
@@ -18800,7 +18802,7 @@ function getDataSourceStateRestoreForDetails(state) {
 // src/components/DataSource/privateHooks/useDataSource.tsx
 import React51, {
   useCallback as useCallback19,
-  useEffect as useEffect19,
+  useEffect as useEffect20,
   useLayoutEffect as useLayoutEffect10,
   useState as useState14
 } from "react";
@@ -18872,7 +18874,7 @@ function useDataSourceInternal(props) {
     componentActions,
     getComponentState: getState
   });
-  useEffect19(() => {
+  useEffect20(() => {
     componentState.onDataArrayChange?.(
       componentState.originalDataArray,
       componentState.originalDataArrayChangedInfo
@@ -18894,7 +18896,7 @@ function useDataSourceInternal(props) {
       });
     }
   }, [componentState.originalDataArrayChangedInfo]);
-  useEffect19(() => {
+  useEffect20(() => {
     componentState.onReady?.(api);
   }, []);
   return {
@@ -20829,7 +20831,7 @@ function getImperativeApi(context) {
 
 // src/components/InfiniteTable/hooks/useAutoSizeColumns.ts
 import {
-  useEffect as useEffect20,
+  useEffect as useEffect21,
   useRef as useRef22,
   useState as useState15
 } from "react";
@@ -20907,7 +20909,7 @@ function useAutoSizeColumns() {
   const theKey = typeof autoSizeColumnsKey === "object" ? autoSizeColumnsKey.key : autoSizeColumnsKey;
   const getTheKey = useLatest(theKey);
   const lastExecutedIdentifierRef = useRef22(null);
-  useEffect20(() => {
+  useEffect21(() => {
     const key = getTheKey();
     if (key == null) {
       return;
@@ -20920,7 +20922,7 @@ function useAutoSizeColumns() {
     };
     return brain.onRenderRangeChange(onChange);
   }, [brain]);
-  useEffect20(() => {
+  useEffect21(() => {
     if (theKey == null) {
       return;
     }
@@ -20966,7 +20968,7 @@ function useAutoSizeColumns() {
 
 // src/components/InfiniteTable/hooks/useCellRendering.tsx
 import { useMemo as useMemo9 } from "react";
-import { useCallback as useCallback20, useEffect as useEffect21, useRef as useRef24 } from "react";
+import { useCallback as useCallback20, useEffect as useEffect22, useRef as useRef24 } from "react";
 import * as React54 from "react";
 
 // src/components/InfiniteTable/hooks/useYourBrain.ts
@@ -21221,17 +21223,17 @@ function useCellRendering(param) {
     rowspan
   });
   const scrollTopMaxRef = useRef24(0);
-  useEffect21(() => {
+  useEffect22(() => {
     return brain.onRenderCountChange(() => {
       scrollTopMaxRef.current = brain.scrollTopMax;
     });
   }, [brain]);
-  useEffect21(() => {
+  useEffect22(() => {
     return brain.onRenderRangeChange((range) => {
       getState().onRenderRangeChange?.(range);
     });
   }, [brain]);
-  useEffect21(() => {
+  useEffect22(() => {
     return brain.onScrollStop((scrollPosition) => {
       const { scrollTop: scrollTop2, scrollLeft: scrollLeft2 } = scrollPosition;
       if (scrollTop2 === 0) {
@@ -21271,13 +21273,13 @@ function useCellRendering(param) {
       }
     });
   }, [brain, onScrollToTop, onScrollToBottom, onScrollStop]);
-  useEffect21(() => {
+  useEffect22(() => {
     if (!bodySize.height) {
       return;
     }
     actions.ready = true;
   }, [!!bodySize.height]);
-  useEffect21(() => {
+  useEffect22(() => {
     if (!ready) {
     }
     const { onReady } = getState();
@@ -21286,7 +21288,7 @@ function useCellRendering(param) {
     }
   }, [ready]);
   const [, rerender] = useRerender();
-  useEffect21(() => {
+  useEffect22(() => {
     rerender();
   }, [dataSourceState]);
   const renderCell = useCallback20(
@@ -21407,7 +21409,7 @@ function useCellRendering(param) {
 }
 
 // src/components/InfiniteTable/hooks/useComputed.ts
-import { useEffect as useEffect24, useState as useState17 } from "react";
+import { useEffect as useEffect25, useState as useState17 } from "react";
 
 // src/components/InfiniteTable/utils/MultiCellSelector.ts
 var MultiCellSelector = class {
@@ -21680,7 +21682,7 @@ function useColumnSizeFn(columns) {
 }
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
-import { useEffect as useEffect22, useLayoutEffect as useLayoutEffect11, useMemo as useMemo11 } from "react";
+import { useEffect as useEffect23, useLayoutEffect as useLayoutEffect11, useMemo as useMemo11 } from "react";
 
 // src/components/InfiniteTable/state/getInitialState.ts
 import { createRef } from "react";
@@ -22531,13 +22533,13 @@ function useColumnsWhen() {
       pivotGrandTotalColumnPosition
     }
   } = useManagedComponentState();
-  useEffect22(() => {
+  useEffect23(() => {
     dataSourceActions.generateGroupRows = groupRenderStrategy !== "inline";
   }, [groupRenderStrategy]);
-  useEffect22(() => {
+  useEffect23(() => {
     dataSourceActions.pivotTotalColumnPosition = pivotTotalColumnPosition;
   }, [pivotTotalColumnPosition]);
-  useEffect22(() => {
+  useEffect23(() => {
     if (pivotGrandTotalColumnPosition != void 0) {
       dataSourceActions.pivotGrandTotalColumnPosition = pivotGrandTotalColumnPosition;
     }
@@ -22620,7 +22622,7 @@ function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
     });
     return Object.keys(computedColumns).length === 0 ? void 0 : computedColumns;
   }
-  useEffect22(() => {
+  useEffect23(() => {
     const update = () => {
       componentActions.columnsWhenInlineGroupRenderStrategy = isTree ? void 0 : computeColumnsWhenInlineGroupRenderStrategy(
         columns,
@@ -22651,7 +22653,7 @@ function useColumnsWhenGrouping() {
     getComponentState
   } = useManagedComponentState();
   const toggleGroupRow = useToggleGroupRow();
-  useEffect22(() => {
+  useEffect23(() => {
     const update = () => {
       const { columns: columnsWhenGrouping, groupColumnIds } = getColumnsWhenGrouping({
         columns,
@@ -22755,7 +22757,7 @@ function useHideColumns(groupByMap) {
     hideEmptyGroupColumns ? groupRowsIndexesInDataArray : null,
     hideEmptyGroupColumns
   ]);
-  useEffect22(() => {
+  useEffect23(() => {
     const isGrouped = groupBy.length > 0;
     const currentState = getComponentState();
     const {
@@ -23166,7 +23168,7 @@ function useComputedRowHeight(param) {
 }
 
 // src/components/InfiniteTable/hooks/useScrollbars.ts
-import { useState as useState16, useEffect as useEffect23, useLayoutEffect as useLayoutEffect12 } from "react";
+import { useState as useState16, useEffect as useEffect24, useLayoutEffect as useLayoutEffect12 } from "react";
 var INITIAL_SCROLLBARS = {
   vertical: false,
   horizontal: false
@@ -23175,7 +23177,7 @@ function useScrollbars(brain) {
   const { getComponentState: getInfiniteTableState } = useManagedComponentState();
   const { getState: getDataSourceState } = useDataSourceContextValue();
   const [scrollbars, setScrollbars] = useState16(INITIAL_SCROLLBARS);
-  useEffect23(() => {
+  useEffect24(() => {
     return brain.onRenderCountChange(() => {
       const { scrollTopMax, scrollLeftMax } = brain;
       setScrollbars({
@@ -23250,7 +23252,7 @@ function useComputed() {
       }
     );
   });
-  useEffect24(() => {
+  useEffect25(() => {
     dataSourceActions.showSeparatePivotColumnForSingleAggregation = showSeparatePivotColumnForSingleAggregation;
   }, [showSeparatePivotColumnForSingleAggregation]);
   const { multiSort, filterValue, filterTypes } = dataSourceState;
@@ -23558,7 +23560,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "6.2.9"
+      version: "6.2.11"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -23569,18 +23571,18 @@ var useLicense = (licenseKey = "") => {
 };
 
 // src/components/InfiniteTable/hooks/useScrollToActiveCell.ts
-import { useRef as useRef25, useEffect as useEffect25 } from "react";
+import { useRef as useRef25, useEffect as useEffect26 } from "react";
 var RETRIES = 10;
 function useScrollToActiveCell(activeCellIndex, dataCount, imperativeApi) {
   const didScrollRef = useRef25(false);
   const rafId = useRef25(null);
-  useEffect25(() => {
+  useEffect26(() => {
     if (activeCellIndex != null) {
       didScrollRef.current = false;
       cancelRaf(rafId.current);
     }
   }, [activeCellIndex]);
-  useEffect25(() => {
+  useEffect26(() => {
     if (activeCellIndex != null && !didScrollRef.current) {
       let tryScroll2 = function(times = 0) {
         times++;
@@ -23608,18 +23610,18 @@ function useScrollToActiveCell(activeCellIndex, dataCount, imperativeApi) {
 }
 
 // src/components/InfiniteTable/hooks/useScrollToActiveRow.ts
-import { useRef as useRef26, useEffect as useEffect26 } from "react";
+import { useRef as useRef26, useEffect as useEffect27 } from "react";
 var RETRIES2 = 10;
 function useScrollToActiveRow(activeRowIndex, dataCount, imperativeApi) {
   const didScrollRef = useRef26(false);
   const rafId = useRef26(null);
-  useEffect26(() => {
+  useEffect27(() => {
     if (activeRowIndex != null) {
       didScrollRef.current = false;
       cancelAnimationFrame(rafId.current);
     }
   }, [activeRowIndex]);
-  useEffect26(() => {
+  useEffect27(() => {
     if (activeRowIndex != null && !didScrollRef.current) {
       let tryScroll2 = function(times = 0) {
         times++;
@@ -23648,7 +23650,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 useEffect27 } from "react";
+import { useCallback as useCallback23, useMemo as useMemo15, useEffect as useEffect28 } from "react";
 
 // src/components/InfiniteTable/eventHandlers/onCellClick.ts
 function onCellClick(context, event) {
@@ -24359,7 +24361,7 @@ function useEventHandlersContext() {
 }
 function handleDOMEvents() {
   const context = useEventHandlersContext();
-  useEffect27(() => {
+  useEffect28(() => {
     const removeOnKeyDown = context.getState().keyDown.onChange((event) => {
       onKeyDown(context, event);
     });
@@ -24415,13 +24417,13 @@ function useDOMEventHandlers() {
 }
 
 // src/components/InfiniteTable/hooks/useColumnMenu.ts
-import { useEffect as useEffect31 } from "react";
+import { useEffect as useEffect32 } from "react";
 
 // src/components/hooks/useOverlay/index.tsx
 import * as React56 from "react";
 import {
   useCallback as useCallback24,
-  useEffect as useEffect29,
+  useEffect as useEffect30,
   useLayoutEffect as useLayoutEffect13,
   useState as useState18
 } from "react";
@@ -24812,7 +24814,7 @@ function DefaultOverlayPortal(props) {
 }
 function OverlayContent(props) {
   const nodeRef = React56.useRef(null);
-  useEffect29(() => {
+  useEffect30(() => {
     return props.realign.onChange((handle) => {
       if (nodeRef.current && handle) {
         alignNode(nodeRef.current, handle);
@@ -25409,10 +25411,10 @@ function useMenuContext() {
 }
 
 // src/components/hooks/useMounted.ts
-import { useCallback as useCallback25, useEffect as useEffect30, useRef as useRef28 } from "react";
+import { useCallback as useCallback25, useEffect as useEffect31, useRef as useRef28 } from "react";
 function useMounted() {
   let mountedRef = useRef28(true);
-  useEffect30(() => {
+  useEffect31(() => {
     mountedRef.current = true;
     return () => {
       mountedRef.current = false;
@@ -26224,7 +26226,7 @@ function useColumnMenu() {
   } = useOverlay({
     portalContainer: masterContext ? masterContext.getMasterState().portalDOMRef.current : false
   });
-  useEffect31(() => {
+  useEffect32(() => {
     const { actions: actions2, getState: getState2 } = context;
     const state = getState2();
     return state.onColumnMenuClick.onChange((info) => {
@@ -26239,7 +26241,7 @@ function useColumnMenu() {
     });
   }, []);
   const { columnMenuVisibleForColumnId, columnMenuVisibleKey } = getState();
-  useEffect31(() => {
+  useEffect32(() => {
     const { columnMenuVisibleForColumnId: columnMenuVisibleForColumnId2, columnMenuTargetRef } = getState();
     if (columnMenuVisibleForColumnId2) {
       let handleMouseDown2 = function(event) {
@@ -26319,13 +26321,13 @@ function FocusDetect() {
 }
 
 // src/components/InfiniteTable/hooks/useEditingCallbackProps.ts
-import { useEffect as useEffect32 } from "react";
+import { useEffect as useEffect33 } from "react";
 function useOnEditCancelled() {
   const context = useInfiniteTable();
   const { getState } = context;
   const { editingCell } = getState();
   const cancelled = editingCell && !editingCell.active ? editingCell.cancelled : void 0;
-  useEffect32(() => {
+  useEffect33(() => {
     if (cancelled) {
       const { rowIndex, columnId, initialValue } = getState().editingCell;
       const { onEditCancelled } = getState();
@@ -26347,7 +26349,7 @@ function useOnEditRejected() {
     state: { editingCell }
   } = context;
   const rejected = editingCell && !editingCell.active && editingCell.accepted instanceof Error ? editingCell.accepted : void 0;
-  useEffect32(() => {
+  useEffect33(() => {
     if (rejected) {
       const { rowIndex, columnId, value, initialValue } = getState().editingCell;
       const { onEditRejected } = getState();
@@ -26371,7 +26373,7 @@ function useFocusOnEditStop() {
   } = context;
   const active = editingCell?.active;
   const prevActive = usePrevious(active);
-  useEffect32(() => {
+  useEffect33(() => {
     if (!active && prevActive) {
       context.api.focus();
     }
@@ -26384,7 +26386,7 @@ function useOnEditAccepted() {
     getState
   } = context;
   const accepted = editingCell && !editingCell.active && !editingCell.cancelled && editingCell.accepted === true;
-  useEffect32(() => {
+  useEffect33(() => {
     if (accepted) {
       const { editingCell: editingCell2 } = getState();
       const { value, rowIndex, columnId, initialValue } = editingCell2;
@@ -26409,7 +26411,7 @@ function useOnEditPersisted() {
     getState
   } = context;
   const persisted = editingCell ? editingCell.persisted : void 0;
-  useEffect32(() => {
+  useEffect33(() => {
     if (persisted) {
       const { editingCell: editingCell2, onEditPersistError, onEditPersistSuccess } = getState();
       if (!editingCell2) {
@@ -26442,7 +26444,7 @@ function useEditingCallbackProps() {
 }
 
 // src/components/InfiniteTable/hooks/useColumnFilterOperatorMenu.ts
-import { useEffect as useEffect33 } from "react";
+import { useEffect as useEffect34 } from "react";
 
 // src/components/InfiniteTable/utils/getFilterOperatorMenuForColumn.tsx
 import * as React66 from "react";
@@ -26581,7 +26583,7 @@ function useColumnFilterOperatorMenu() {
   } = useOverlay({
     portalContainer: masterContext ? masterContext.getMasterState().portalDOMRef.current : false
   });
-  useEffect33(() => {
+  useEffect34(() => {
     const { actions: actions2, getState: getState2 } = context;
     const state = getState2();
     return state.onFilterOperatorMenuClick.onChange((info) => {
@@ -26617,7 +26619,7 @@ function useColumnFilterOperatorMenu() {
       actions2.filterOperatorMenuVisibleForColumnId = column.id;
     });
   }, []);
-  useEffect33(() => {
+  useEffect34(() => {
     const { filterOperatorMenuVisibleForColumnId } = getState();
     if (filterOperatorMenuVisibleForColumnId) {
       let handleMouseDown2 = function(event) {
@@ -26644,7 +26646,7 @@ function useColumnFilterOperatorMenu() {
 }
 
 // src/components/InfiniteTable/hooks/useContextMenu.ts
-import { useEffect as useEffect34 } from "react";
+import { useEffect as useEffect35 } from "react";
 
 // src/components/InfiniteTable/utils/getCellContextMenu.tsx
 import * as React68 from "react";
@@ -26811,7 +26813,7 @@ function useCellContextMenu() {
   } = useOverlay({
     portalContainer: masterContext ? masterContext.getMasterState().portalDOMRef.current : false
   });
-  useEffect34(() => {
+  useEffect35(() => {
     const { actions: actions2, getState: getState2, getDataSourceState } = context;
     const state = getState2();
     return state.cellContextMenu.onChange((info) => {
@@ -26862,7 +26864,7 @@ function useCellContextMenu() {
       }
     });
   }, []);
-  useEffect34(() => {
+  useEffect35(() => {
     const { cellContextMenuVisibleFor } = getState();
     if (cellContextMenuVisibleFor) {
       let handleMouseDown2 = function(event) {
@@ -26898,7 +26900,7 @@ function useTableContextMenu() {
   } = useOverlay({
     portalContainer: masterContext ? masterContext.getMasterState().portalDOMRef.current : false
   });
-  useEffect34(() => {
+  useEffect35(() => {
     const { actions: actions2, getState: getState2 } = context;
     const state = getState2();
     return state.contextMenu.onChange((info) => {
@@ -26947,7 +26949,7 @@ function useTableContextMenu() {
       }
     });
   }, []);
-  useEffect34(() => {
+  useEffect35(() => {
     const { contextMenuVisibleFor } = getState();
     if (contextMenuVisibleFor) {
       let handleMouseDown2 = function(event) {
@@ -26978,13 +26980,13 @@ import { useRef as useRef30 } from "react";
 import * as React69 from "react";
 
 // src/components/InfiniteTable/hooks/useGridScroll.ts
-import { useCallback as useCallback28, useEffect as useEffect35 } from "react";
+import { useCallback as useCallback28, useEffect as useEffect36 } from "react";
 function useGridScroll(onScroll, deps) {
   const {
     state: { brain }
   } = useInfiniteTable();
   const memoizedOnScroll = useCallback28(onScroll, deps);
-  useEffect35(() => {
+  useEffect36(() => {
     const removeOnScroll = brain.onScroll(memoizedOnScroll);
     return removeOnScroll;
   }, [brain, memoizedOnScroll]);
@@ -27054,12 +27056,12 @@ function useVisibleColumnSizes() {
 var DEBUG_NAME = "InfiniteTable";
 
 // src/components/InfiniteTable/hooks/useToggleWrapRowsHorizontally.ts
-import { useEffect as useEffect36 } from "react";
+import { useEffect as useEffect37 } from "react";
 function useToggleWrapRowsHorizontally() {
   const { state, getState, actions } = useInfiniteTable();
   const { wrapRowsHorizontally } = state;
   const oldWrapRowsHorizontally = usePrevious(wrapRowsHorizontally);
-  useEffect36(() => {
+  useEffect37(() => {
     if (oldWrapRowsHorizontally !== wrapRowsHorizontally) {
       const { brain, headerBrain, renderer, onRenderUpdater } = getState();
       brain.destroy();
@@ -27076,13 +27078,21 @@ function useToggleWrapRowsHorizontally() {
 }
 
 // src/components/InfiniteTable/hooks/useHorizontalLayout.ts
-import { useEffect as useEffect37 } from "react";
+import { useEffect as useEffect38 } from "react";
 function useHorizontalLayout() {
   const { getState, actions, dataSourceActions, getDataSourceState } = useInfiniteTable();
   const { groupBy, isTree } = getDataSourceState();
-  const { brain, wrapRowsHorizontally, repeatWrappedGroupRows } = getState();
-  useEffect37(() => {
+  const state = getState();
+  const { brain, wrapRowsHorizontally } = state;
+  let repeatWrappedGroupRows = state.repeatWrappedGroupRows;
+  if (!wrapRowsHorizontally) {
+    repeatWrappedGroupRows = false;
+  }
+  useEffect38(() => {
     if (!wrapRowsHorizontally) {
+      if (getDataSourceState().repeatWrappedGroupRows) {
+        dataSourceActions.repeatWrappedGroupRows = false;
+      }
       return;
     }
     const onVerticalRenderRangeChange = () => {
@@ -27794,7 +27804,7 @@ var keyboardShortcuts = {
 };
 
 // src/components/hooks/useInterceptedMap.ts
-import { useEffect as useEffect40 } from "react";
+import { useEffect as useEffect41 } from "react";
 function interceptMap(map2, fns) {
   const { set, delete: deleteKey, clear } = map2;
   if (fns.set) {
@@ -27956,7 +27966,7 @@ var WeakFixedSizeSet = _WeakFixedSizeSet;
 WeakFixedSizeSet.DEFAULT_SIZE = 10;
 
 // src/components/hooks/useEffectWhenSameDeps.ts
-import { useEffect as useEffect41, useRef as useRef31 } from "react";
+import { useEffect as useEffect42, useRef as useRef31 } from "react";
 var isSameDeps = (deps, prevDeps) => {
   return deps.every((dep, index) => dep === prevDeps[index]);
 };
@@ -27970,7 +27980,7 @@ var useEffectWhenSameDeps = (callback, deps) => {
   effectDepsRef.current = effectDeps;
   const callbackRef = useRef31(callback);
   callbackRef.current = callback;
-  useEffect41(() => {
+  useEffect42(() => {
     if (isInitialRef.current) {
       isInitialRef.current = false;
       return;
@@ -27980,7 +27990,7 @@ var useEffectWhenSameDeps = (callback, deps) => {
 };
 
 // src/components/hooks/useEffectWhen.ts
-import { useEffect as useEffect42, useRef as useRef32 } from "react";
+import { useEffect as useEffect43, useRef as useRef32 } from "react";
 var isSameDeps2 = (deps, prevDeps, compare) => {
   return deps.every((dep, index) => {
     if (compare) {
@@ -28010,7 +28020,7 @@ var useEffectWhen = (callback, options) => {
   if (sameRespected && differentRespected) {
     isInitialRef.current = false;
   }
-  useEffect42(() => {
+  useEffect43(() => {
     if (isInitialRef.current) {
       return;
     }