npm - @infinite-table/infinite-react - Versions diffs - 0.2.16 → 0.2.19 - Mend

@infinite-table/infinite-react 0.2.16 → 0.2.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/index.js CHANGED Viewed

@@ -657,7 +657,7 @@ function debounce(fn, { wait }) {
 }
 // src/components/InfiniteTable/index.tsx
-var React35 = __toModule(require("react"));
+var React34 = __toModule(require("react"));
 // src/components/InfiniteTable/internalProps.ts
 var rootClassName = "Infinite";
@@ -1309,7 +1309,7 @@ var forwardProps = (setupState) => {
     pivotColumnGroups: 1,
     onScrollbarsChange: 1,
     autoSizeColumnsKey: 1,
-    scrollStopDelay: (scrollStopDelay) => scrollStopDelay != null ? scrollStopDelay : 100,
+    scrollStopDelay: (scrollStopDelay) => scrollStopDelay != null ? scrollStopDelay : 250,
     viewportReservedWidth: (viewportReservedWidth) => viewportReservedWidth != null ? viewportReservedWidth : 0,
     activeIndex: (activeIndex) => activeIndex != null ? activeIndex : 0,
     columnMinWidth: (columnMinWidth) => columnMinWidth != null ? columnMinWidth : 30,
@@ -1321,6 +1321,7 @@ var forwardProps = (setupState) => {
     sortable: (sortable) => sortable != null ? sortable : true,
     hideEmptyGroupColumns: (hideEmptyGroupColumns) => hideEmptyGroupColumns != null ? hideEmptyGroupColumns : false,
     pivotTotalColumnPosition: (pivotTotalColumnPosition) => pivotTotalColumnPosition != null ? pivotTotalColumnPosition : "end",
+    pivotGrandTotalColumnPosition: 1,
     licenseKey: (licenseKey) => licenseKey || "",
     columnOrder: (columnOrder) => columnOrder != null ? columnOrder : true,
     header: (header) => header != null ? header : true,
@@ -2155,7 +2156,7 @@ var useComputedVisibleColumns = ({
 var sortAscending = (a, b) => a - b;
 // src/components/InfiniteTable/hooks/useComputed.ts
-var import_react18 = __toModule(require("react"));
+var import_react19 = __toModule(require("react"));
 // src/components/hooks/useComponentState/index.tsx
 var React2 = __toModule(require("react"));
@@ -2539,10 +2540,10 @@ function useColumnGroups() {
 }
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
-var import_react17 = __toModule(require("react"));
+var import_react18 = __toModule(require("react"));
 // src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
-var React7 = __toModule(require("react"));
+var React6 = __toModule(require("react"));
 // src/utils/join.ts
 var join = (...args) => args.filter((x) => !!`${x}`).join(" ");
@@ -2614,9 +2615,8 @@ var willChange = { transform: "_16lm1iw19" };
 var zIndex = { "1": "_16lm1iwe", "10": "_16lm1iwf", "1000": "_16lm1iwg", "10000": "_16lm1iwh", "100000": "_16lm1iwi" };
 // src/components/InfiniteTable/utils/RenderHookComponent.tsx
-var React6 = __toModule(require("react"));
 function RenderHookComponent(props) {
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, props.render(props.renderParam));
+  return props.render(props.renderParam);
 }
 // src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
@@ -2629,7 +2629,7 @@ function getGroupColumnRender({
     var _a, _b, _c;
     let { value, rowInfo, column, groupBy, pivotBy } = renderOptions;
     if (column.renderValue) {
-      value = /* @__PURE__ */ React7.createElement(RenderHookComponent, {
+      value = /* @__PURE__ */ React6.createElement(RenderHookComponent, {
         render: column.renderValue,
         renderParam: renderOptions
       });
@@ -2658,20 +2658,20 @@ function getGroupColumnRender({
     let icon = null;
     const showExpanderIcon = pivotBy ? (((_b = groupRowInfo.groupKeys) == null ? void 0 : _b.length) || 0) < (groupBy == null ? void 0 : groupBy.length) : (((_c = groupRowInfo.groupKeys) == null ? void 0 : _c.length) || 0) <= (groupBy == null ? void 0 : groupBy.length);
     if (showExpanderIcon) {
-      const defaultIcon = /* @__PURE__ */ React7.createElement(ExpanderIcon, {
+      const defaultIcon = /* @__PURE__ */ React6.createElement(ExpanderIcon, {
         expanded: !collapsed,
         onChange: () => {
           toggleGroupRow(groupKeys);
         }
       });
-      icon = column.renderGroupIcon ? /* @__PURE__ */ React7.createElement(RenderHookComponent, {
+      icon = column.renderGroupIcon ? /* @__PURE__ */ React6.createElement(RenderHookComponent, {
         render: column.renderGroupIcon,
         renderParam: Object.assign({ collapsed, groupIcon: defaultIcon }, renderOptions)
       }) : defaultIcon;
     }
-    return /* @__PURE__ */ React7.createElement("div", {
+    return /* @__PURE__ */ React6.createElement("div", {
       className: join(display.flex, alignItems.center)
-    }, icon, /* @__PURE__ */ React7.createElement("div", {
+    }, icon, /* @__PURE__ */ React6.createElement("div", {
       className: cssEllipsisClassName
     }, value != null ? value : null));
   };
@@ -2719,7 +2719,7 @@ function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
       let icon = null;
       const showExpanderIcon = pivotBy ? (((_a = rowInfo.groupKeys) == null ? void 0 : _a.length) || 0) < (groupBy == null ? void 0 : groupBy.length) : (((_b = rowInfo.groupKeys) == null ? void 0 : _b.length) || 0) <= (groupBy == null ? void 0 : groupBy.length);
       if (showExpanderIcon) {
-        const defaultIcon = /* @__PURE__ */ React7.createElement(ExpanderIcon, {
+        const defaultIcon = /* @__PURE__ */ React6.createElement(ExpanderIcon, {
           expanded: !collapsed,
           onChange: () => {
             toggleGroupRow(rowInfo.groupKeys);
@@ -2727,9 +2727,9 @@ function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
         });
         icon = column.renderGroupIcon ? column.renderGroupIcon(Object.assign({ collapsed, groupIcon: defaultIcon }, renderOptions)) : defaultIcon;
       }
-      return /* @__PURE__ */ React7.createElement("div", {
+      return /* @__PURE__ */ React6.createElement("div", {
         className: join(display.flex, alignItems.center, GroupRowExpanderCls)
-      }, icon, /* @__PURE__ */ React7.createElement("div", {
+      }, icon, /* @__PURE__ */ React6.createElement("div", {
         className: cssEllipsisClassName
       }, value != null ? value : null));
     }
@@ -2744,11 +2744,32 @@ function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
   return generatedGroupColumn;
 }
+// src/components/InfiniteTable/hooks/useEffectWithRaf.ts
+var import_react14 = __toModule(require("react"));
+function useEffectWithRaf(fn, deps) {
+  const rafId = (0, import_react14.useRef)(0);
+  const removeFnRaf = (0, import_react14.useRef)();
+  (0, import_react14.useEffect)(() => {
+    rafId.current = requestAnimationFrame(() => {
+      removeFnRaf.current = fn();
+    });
+    return () => {
+      if (rafId.current) {
+        cancelAnimationFrame(rafId.current);
+      }
+      if (typeof removeFnRaf.current === "function") {
+        removeFnRaf.current();
+        removeFnRaf.current = void 0;
+      }
+    };
+  }, deps);
+}
 // src/components/InfiniteTable/hooks/useToggleGroupRow.ts
-var import_react16 = __toModule(require("react"));
+var import_react17 = __toModule(require("react"));
 // src/components/DataSource/index.tsx
-var React8 = __toModule(require("react"));
+var React7 = __toModule(require("react"));
 // src/utils/multisort/sortTypes.ts
 var numberComparator = function(first, second) {
@@ -2825,7 +2846,7 @@ var getMultisortFunction = (sortInfo, get) => {
 };
 // src/components/DataSource/privateHooks/useLoadData.ts
-var import_react15 = __toModule(require("react"));
+var import_react16 = __toModule(require("react"));
 // src/utils/DeepMap/once.ts
 function once(fn) {
@@ -2911,14 +2932,13 @@ var DeepMap = class {
     for (let i = 0, len = keys.length; i < len; i++) {
       const key = keys[i];
       const last = i === len - 1;
+      const pair = currentMap.get(key) || {};
       if (last) {
-        const pair = currentMap.has(key) ? currentMap.get(key) : {};
         pair.revision = this.revision++;
         pair.value = value;
         currentMap.set(key, pair);
         this.length++;
       } else {
-        const pair = currentMap.has(key) ? currentMap.get(key) : {};
         if (!pair.map) {
           pair.map = new Map();
           currentMap.set(key, pair);
@@ -2929,7 +2949,6 @@ var DeepMap = class {
     return this;
   }
   get(keys) {
-    var _a;
     let currentMap = this.map;
     if (!keys.length) {
       keys = [this.emptyKey];
@@ -2937,10 +2956,10 @@ var DeepMap = class {
     for (let i = 0, len = keys.length; i < len; i++) {
       const key = keys[i];
       const last = i === len - 1;
+      const pair = currentMap.get(key);
       if (last) {
-        return (_a = currentMap.get(key)) == null ? void 0 : _a.value;
+        return pair ? pair.value : void 0;
       } else {
-        const pair = currentMap.get(key);
         if (!pair || !pair.map) {
           return;
         }
@@ -2978,8 +2997,8 @@ var DeepMap = class {
     for (let i = 0, len = keys.length; i < len; i++) {
       const key = keys[i];
       const last = i === len - 1;
+      const pair = currentMap.get(key);
       if (last) {
-        const pair = currentMap.get(key);
         if (pair) {
           if (pair.hasOwnProperty("value")) {
             delete pair.value;
@@ -2996,7 +3015,6 @@ var DeepMap = class {
         }
         break;
       } else {
-        const pair = currentMap.get(key);
         if (!pair || !pair.map) {
           result = false;
           break;
@@ -3006,11 +3024,11 @@ var DeepMap = class {
       }
     }
     while (maps.length) {
-      let map2 = maps.pop();
-      let key = keys.pop();
+      const map2 = maps.pop();
+      const key = keys.pop();
       if (key && (map2 == null ? void 0 : map2.size) === 0) {
-        let parentMap = maps[maps.length - 1];
-        let pair = parentMap == null ? void 0 : parentMap.get(key);
+        const parentMap = maps[maps.length - 1];
+        const pair = parentMap == null ? void 0 : parentMap.get(key);
         if (pair) {
           delete pair.map;
           if (!pair.hasOwnProperty("value")) {
@@ -3029,11 +3047,10 @@ var DeepMap = class {
     for (let i = 0, len = keys.length; i < len; i++) {
       const key = keys[i];
       const last = i === len - 1;
+      const pair = currentMap.get(key);
       if (last) {
-        const pair = currentMap.get(key);
-        return !!pair && pair.hasOwnProperty("value");
+        return pair ? pair.hasOwnProperty("value") : false;
       } else {
-        const pair = currentMap.get(key);
         if (!pair || !pair.map) {
           return false;
         }
@@ -3501,12 +3518,12 @@ function enhancedFlatten(param) {
 }
 // src/components/hooks/useEffectWithChanges.ts
-var import_react14 = __toModule(require("react"));
+var import_react15 = __toModule(require("react"));
 function useEffectWithChanges(fn, deps) {
-  const prevRef = (0, import_react14.useRef)({});
-  const oldValuesRef = (0, import_react14.useRef)({});
+  const prevRef = (0, import_react15.useRef)({});
+  const oldValuesRef = (0, import_react15.useRef)({});
   const oldValues = oldValuesRef.current;
-  const changesRef = (0, import_react14.useRef)({});
+  const changesRef = (0, import_react15.useRef)({});
   const changes = changesRef.current;
   const useEffectDeps = [];
   for (let k in deps) {
@@ -3519,7 +3536,7 @@ function useEffectWithChanges(fn, deps) {
     }
   }
   prevRef.current = deps;
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     const changes2 = changesRef.current;
     const result = fn(changes2, oldValues);
     changesRef.current = {};
@@ -3687,12 +3704,12 @@ function useLoadData() {
     livePaginationCursor,
     cursorId: stateCursorId
   } = componentState;
-  const [scrollbars, setScrollbars] = (0, import_react15.useState)({
+  const [scrollbars, setScrollbars] = (0, import_react16.useState)({
     vertical: false,
     horizontal: false
   });
-  const scrollbarsRef = (0, import_react15.useRef)(scrollbars);
-  (0, import_react15.useEffect)(() => {
+  const scrollbarsRef = (0, import_react16.useRef)(scrollbars);
+  (0, import_react16.useEffect)(() => {
     notifyScrollbarsChange.onChange((scrollbars2) => {
       if (!scrollbars2) {
         return;
@@ -3702,7 +3719,7 @@ function useLoadData() {
     });
     return () => notifyScrollbarsChange.destroy();
   }, [notifyScrollbarsChange]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     const frameId = requestAnimationFrame(() => {
       var _a;
       if (!((_a = scrollbarsRef.current) == null ? void 0 : _a.vertical) && livePaginationCursor) {
@@ -3711,7 +3728,7 @@ function useLoadData() {
     });
     return () => cancelAnimationFrame(frameId);
   }, [livePaginationCursor]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     const { livePaginationCursor: livePaginationCursor2, livePagination: livePagination2 } = getComponentState();
     if (!scrollbars.vertical && livePagination2) {
       if (livePaginationCursor2) {
@@ -3725,7 +3742,7 @@ function useLoadData() {
     pivotBy,
     cursorId: livePagination ? stateCursorId : null
   };
-  const initialRef = (0, import_react15.useRef)(true);
+  const initialRef = (0, import_react16.useRef)(true);
   useLazyLoadRange();
   useEffectWithChanges(() => {
     const componentState2 = getComponentState();
@@ -3754,7 +3771,7 @@ function useLazyLoadRange() {
     componentActions: actions,
     componentState
   } = useComponentState();
-  const loadingCache = (0, import_react15.useMemo)(() => {
+  const loadingCache = (0, import_react16.useMemo)(() => {
     return new Map();
   }, [componentState.data]);
   const {
@@ -3763,7 +3780,7 @@ function useLazyLoadRange() {
     dataArray,
     scrollStopDelayUpdatedByTable
   } = componentState;
-  const latestRenderRangeRef = (0, import_react15.useRef)(null);
+  const latestRenderRangeRef = (0, import_react16.useRef)(null);
   const loadRange = (renderRange, cache = loadingCache) => {
     const componentState2 = getComponentState();
     renderRange = renderRange || latestRenderRangeRef.current;
@@ -3782,8 +3799,8 @@ function useLazyLoadRange() {
       componentActions: actions
     }, cache);
   };
-  const debouncedLoadRange = (0, import_react15.useMemo)(() => debounce(loadRange, { wait: scrollStopDelayUpdatedByTable }), [scrollStopDelayUpdatedByTable]);
-  (0, import_react15.useEffect)(() => {
+  const debouncedLoadRange = (0, import_react16.useMemo)(() => debounce(loadRange, { wait: scrollStopDelayUpdatedByTable }), [scrollStopDelayUpdatedByTable]);
+  (0, import_react16.useEffect)(() => {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
       return notifyRenderRangeChange.onChange((renderRange) => {
         latestRenderRangeRef.current = renderRange;
@@ -3792,7 +3809,7 @@ function useLazyLoadRange() {
     }
     return;
   }, [lazyLoadBatchSize, loadingCache]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
       debouncedLoadRange();
     }
@@ -3860,11 +3877,7 @@ function lazyLoadRange(options, cache) {
     }
     cache == null ? void 0 : cache.set(cacheKey, true);
     const args = [componentState.data, componentState, componentActions, fnCall];
-    return promise.then(() => getRafPromise()).then(() => loadData(...args)).then(() => {
-      requestAnimationFrame(() => {
-        cache == null ? void 0 : cache.delete(cacheKey);
-      });
-    });
+    return promise.then(() => getRafPromise()).then(() => loadData(...args));
   }, initialPromise);
 }
@@ -4068,6 +4081,7 @@ function initSetupState2() {
     notifyScrollStop: buildSubscriptionCallback(),
     notifyRenderRangeChange: buildSubscriptionCallback(),
     pivotTotalColumnPosition: "end",
+    pivotGrandTotalColumnPosition: false,
     scrollStopDelayUpdatedByTable: 100,
     originalLazyGroupData,
     originalLazyGroupDataChangeDetect: 0,
@@ -4255,6 +4269,7 @@ function getPivotColumnsAndColumnGroups({
   deepMap,
   pivotBy,
   pivotTotalColumnPosition,
+  pivotGrandTotalColumnPosition,
   reducers = {},
   showSeparatePivotColumnForSingleAggregation = false
 }) {
@@ -4264,6 +4279,28 @@ function getPivotColumnsAndColumnGroups({
   });
   const columns = new Map([]);
   const columnGroups = new Map();
+  const addGrandTotalColumns = once(function() {
+    aggregationReducers.forEach((reducer, index) => {
+      columns.set(`total:${reducer.id}`, prepareColumn({
+        header: `${reducer.name || reducer.id} total`,
+        pivotBy,
+        pivotColumn: true,
+        pivotTotalColumn: true,
+        pivotAggregator: reducer,
+        pivotAggregatorIndex: index,
+        pivotGroupKeys: [],
+        pivotGroupKey: "",
+        pivotIndex: -1,
+        valueGetter: ({ rowInfo }) => {
+          var _a;
+          return (_a = rowInfo.reducerResults) == null ? void 0 : _a[reducer.id];
+        }
+      }));
+    });
+  });
+  if (!pivotLength && pivotTotalColumnPosition === "start" || pivotGrandTotalColumnPosition === "start") {
+    addGrandTotalColumns();
+  }
   const isSingleAggregationColumn = !showSeparatePivotColumnForSingleAggregation && aggregationReducers.length === 1;
   deepMap.visitDepthFirst((_value, keys, _indexInGroup, next) => {
     keys = [...keys];
@@ -4368,24 +4405,8 @@ function getPivotColumnsAndColumnGroups({
       next == null ? void 0 : next();
     }
   });
-  if (!pivotLength) {
-    aggregationReducers.forEach((reducer, index) => {
-      columns.set(`total:${reducer.id}`, prepareColumn({
-        header: `${reducer.name || reducer.id} total`,
-        pivotBy,
-        pivotColumn: true,
-        pivotTotalColumn: true,
-        pivotAggregator: reducer,
-        pivotAggregatorIndex: index,
-        pivotGroupKeys: [],
-        pivotGroupKey: "",
-        pivotIndex: -1,
-        valueGetter: ({ rowInfo }) => {
-          var _a;
-          return (_a = rowInfo.reducerResults) == null ? void 0 : _a[reducer.id];
-        }
-      }));
-    });
+  if (!pivotLength && pivotTotalColumnPosition === "end" || pivotGrandTotalColumnPosition === "end") {
+    addGrandTotalColumns();
   }
   const result = {
     columns,
@@ -4417,7 +4438,7 @@ function toRowInfo(data, id, index) {
   };
 }
 function concludeReducer(params) {
-  var _a;
+  var _a, _b;
   const { state, previousState } = params;
   const sortInfo = state.sortInfo;
   let shouldSort = !!(sortInfo == null ? void 0 : sortInfo.length) && !state.controlledSort;
@@ -4452,6 +4473,7 @@ function concludeReducer(params) {
     "pivotBy",
     "aggregationReducers",
     "pivotTotalColumnPosition",
+    "pivotGrandTotalColumnPosition",
     "showSeparatePivotColumnForSingleAggregation",
     "sortInfo"
   ]);
@@ -4498,6 +4520,7 @@ function concludeReducer(params) {
         deepMap: groupResult.topLevelPivotColumns,
         pivotBy,
         pivotTotalColumnPosition: (_a = state.pivotTotalColumnPosition) != null ? _a : "end",
+        pivotGrandTotalColumnPosition: (_b = state.pivotGrandTotalColumnPosition) != null ? _b : false,
         reducers: state.aggregationReducers,
         showSeparatePivotColumnForSingleAggregation: state.showSeparatePivotColumnForSingleAggregation
       }) : void 0;
@@ -4541,7 +4564,7 @@ function DataSourceWithContext(props) {
   if (typeof children === "function") {
     children = children(computedValues);
   }
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, children);
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, children);
 }
 var DataSourceRoot = getComponentStateRoot({
   initSetupState: initSetupState2,
@@ -4564,14 +4587,14 @@ function DataSourceCmp({ children }) {
     globalThis.getDataSourceState = getState;
   }
   useLoadData();
-  return /* @__PURE__ */ React8.createElement(DataSourceContext.Provider, {
+  return /* @__PURE__ */ React7.createElement(DataSourceContext.Provider, {
     value: contextValue
-  }, /* @__PURE__ */ React8.createElement(DataSourceWithContext, {
+  }, /* @__PURE__ */ React7.createElement(DataSourceWithContext, {
     children
   }));
 }
 function DataSource(props) {
-  return /* @__PURE__ */ React8.createElement(DataSourceRoot, __spreadValues({}, props), /* @__PURE__ */ React8.createElement(DataSourceCmp, {
+  return /* @__PURE__ */ React7.createElement(DataSourceRoot, __spreadValues({}, props), /* @__PURE__ */ React7.createElement(DataSourceCmp, {
     children: props.children
   }));
 }
@@ -4579,7 +4602,7 @@ function DataSource(props) {
 // src/components/InfiniteTable/hooks/useToggleGroupRow.ts
 function useToggleGroupRow() {
   const { getState: getDataSourceState, componentActions: dataSourceActions } = useDataSourceContextValue();
-  const toggleGroupRow = (0, import_react16.useCallback)((groupKeys) => {
+  const toggleGroupRow = (0, import_react17.useCallback)((groupKeys) => {
     const state = getDataSourceState();
     const newState = new GroupRowsState(state.groupRowsState);
     newState.toggleGroupRow(groupKeys);
@@ -4595,7 +4618,7 @@ function useToggleGroupRow() {
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
 function useGroupByMap(groupBy) {
-  const groupByMap = (0, import_react17.useMemo)(() => {
+  const groupByMap = (0, import_react18.useMemo)(() => {
     return groupBy.reduce((acc, groupBy2, index) => {
       acc.set(groupBy2.field, {
         groupBy: groupBy2,
@@ -4612,15 +4635,24 @@ function useColumnsWhen() {
     componentActions: dataSourceActions
   } = useDataSourceContextValue();
   const {
-    componentState: { groupRenderStrategy, pivotTotalColumnPosition }
+    componentState: {
+      groupRenderStrategy,
+      pivotTotalColumnPosition,
+      pivotGrandTotalColumnPosition
+    }
   } = useComponentState();
   const groupByMap = useGroupByMap(groupBy);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     dataSourceActions.generateGroupRows = groupRenderStrategy !== "inline";
   }, [groupRenderStrategy]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     dataSourceActions.pivotTotalColumnPosition = pivotTotalColumnPosition;
   }, [pivotTotalColumnPosition]);
+  (0, import_react18.useEffect)(() => {
+    if (pivotGrandTotalColumnPosition != void 0) {
+      dataSourceActions.pivotGrandTotalColumnPosition = pivotGrandTotalColumnPosition;
+    }
+  }, [pivotGrandTotalColumnPosition]);
   useColumnsWhenInlineGroupRenderStrategy(groupByMap);
   const { toggleGroupRow } = useColumnsWhenGrouping();
   useHideColumns(groupByMap);
@@ -4684,7 +4716,7 @@ function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
     });
     return computedColumns.size === 0 ? void 0 : computedColumns;
   }
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const update = () => {
       componentActions.columnsWhenInlineGroupRenderStrategy = computeColumnsWhenInlineGroupRenderStrategy(columns, groupByMap, groupRenderStrategy, toggleGroupRow);
     };
@@ -4708,17 +4740,19 @@ function useColumnsWhenGrouping() {
       groupRenderStrategy,
       pivotColumns,
       pivotColumn,
-      pivotTotalColumnPosition
+      pivotTotalColumnPosition,
+      pivotGrandTotalColumnPosition
     }
   } = useComponentState();
   const toggleGroupRow = useToggleGroupRow();
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const update = () => {
       const columnsWhenGrouping = getColumnsWhenGrouping({
         columns,
         groupColumn,
         pivotColumn,
         pivotTotalColumnPosition,
+        pivotGrandTotalColumnPosition,
         groupRenderStrategy: groupRenderStrategy === "inline" ? "single-column" : groupRenderStrategy,
         groupBy,
         pivotBy,
@@ -4766,7 +4800,7 @@ function useHideColumns(groupByMap) {
     }
   } = useComponentState();
   const prevHideEmptyGroupColumns = usePrevious(hideEmptyGroupColumns);
-  (0, import_react17.useEffect)(() => {
+  useEffectWithRaf(() => {
     if (groupRenderStrategy !== "multi-column") {
       return;
     }
@@ -4844,7 +4878,7 @@ function useHideColumns(groupByMap) {
     hideEmptyGroupColumns ? groupRowsState : null,
     hideEmptyGroupColumns
   ]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     const isGrouped = groupBy.length > 0;
     const currentState = getComponentState();
     const { controlledColumnVisibility, columnVisibility } = currentState;
@@ -4879,6 +4913,7 @@ function getColumnsWhenGrouping(params) {
     pivotBy,
     groupColumn,
     pivotTotalColumnPosition,
+    pivotGrandTotalColumnPosition,
     pivotColumn,
     groupRenderStrategy,
     toggleGroupRow,
@@ -4918,7 +4953,12 @@ function getColumnsWhenGrouping(params) {
     });
     pivotColumns.forEach((col, key) => {
       var _a, _b;
-      if (col.pivotTotalColumn && pivotTotalColumnPosition === false) {
+      const isSimpleTotalColumn = col.pivotTotalColumn && col.columnGroup;
+      const isGrandTotalColumn = col.pivotTotalColumn && !col.columnGroup;
+      if (isSimpleTotalColumn && pivotTotalColumnPosition === false) {
+        return;
+      }
+      if (isGrandTotalColumn && pivotGrandTotalColumnPosition === false) {
         return;
       }
       let column = __spreadValues({}, col);
@@ -4970,7 +5010,7 @@ function useComputed() {
     bodySize,
     showSeparatePivotColumnForSingleAggregation
   } = componentState;
-  (0, import_react18.useState)(() => {
+  (0, import_react19.useState)(() => {
     componentState.onRowHeightCSSVarChange.onChange((rowHeight) => {
       if (rowHeight) {
         componentActions.rowHeight = rowHeight;
@@ -4982,13 +5022,13 @@ function useComputed() {
       }
     });
   });
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     dataSourceActions.showSeparatePivotColumnForSingleAggregation = showSeparatePivotColumnForSingleAggregation;
   }, [showSeparatePivotColumnForSingleAggregation]);
   const { multiSort } = dataSourceState;
   useColumnGroups();
   const { toggleGroupRow } = useColumnsWhen();
-  const setSortInfo = (0, import_react18.useCallback)((sortInfo) => {
+  const setSortInfo = (0, import_react19.useCallback)((sortInfo) => {
     var _a2;
     const newSortInfo = multiSort ? sortInfo : (_a2 = sortInfo[0]) != null ? _a2 : null;
     dataSourceActions.sortInfo = newSortInfo;
@@ -5032,7 +5072,7 @@ function useComputed() {
     columnSizing,
     columnTypes
   });
-  const rowSpan = (0, import_react18.useMemo)(() => {
+  const rowSpan = (0, import_react19.useMemo)(() => {
     const colsWithRowspan = computedVisibleColumns.filter((col) => typeof col.rowspan === "function");
     return colsWithRowspan.length ? ({ itemIndex }) => {
       let maxSpan = 1;
@@ -5108,7 +5148,7 @@ function useComputed() {
 }
 // src/components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBody.tsx
-var React9 = __toModule(require("react"));
+var React8 = __toModule(require("react"));
 // src/components/InfiniteTable/hooks/useInternalProps.ts
 var useInternalProps = () => {
@@ -5116,9 +5156,9 @@ var useInternalProps = () => {
 };
 // src/components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBody.tsx
-var InfiniteTableBody = React9.forwardRef(function InfiniteTableBody2(props, ref) {
+var InfiniteTableBody = React8.forwardRef(function InfiniteTableBody2(props, ref) {
   const { rootClassName: rootClassName12 } = useInternalProps();
-  return /* @__PURE__ */ React9.createElement("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React8.createElement("div", __spreadProps(__spreadValues({
     ref
   }, props), {
     className: join(`${rootClassName12}Body`, position.relative, flex["1"], transformTranslateZero, props.className)
@@ -5126,16 +5166,16 @@ var InfiniteTableBody = React9.forwardRef(function InfiniteTableBody2(props, ref
 });
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderWrapper.tsx
-var React21 = __toModule(require("react"));
+var React20 = __toModule(require("react"));
 // src/components/InfiniteTable/components/ScrollbarPlaceholder.tsx
-var React10 = __toModule(require("react"));
+var React9 = __toModule(require("react"));
 function HorizontalScrollbarPlaceholderFn(props) {
   const scrollbarWidth2 = getScrollbarWidth();
   if (!scrollbarWidth2) {
     return null;
   }
-  return /* @__PURE__ */ React10.createElement("div", {
+  return /* @__PURE__ */ React9.createElement("div", {
     "data-name": "horizontal-scrollbar-placeholder",
     style: __spreadValues({
       position: "absolute",
@@ -5145,13 +5185,13 @@ function HorizontalScrollbarPlaceholderFn(props) {
     }, props.style)
   });
 }
-var HorizontalScrollbarPlaceholder = React10.memo(HorizontalScrollbarPlaceholderFn);
+var HorizontalScrollbarPlaceholder = React9.memo(HorizontalScrollbarPlaceholderFn);
 function VerticalScrollbarPlaceholderFn(props) {
   const scrollbarWidth2 = getScrollbarWidth();
   if (!scrollbarWidth2) {
     return null;
   }
-  return /* @__PURE__ */ React10.createElement("div", {
+  return /* @__PURE__ */ React9.createElement("div", {
     "data-name": "vertical-scrollbar-placeholder",
     style: __spreadValues({
       position: "absolute",
@@ -5161,7 +5201,7 @@ function VerticalScrollbarPlaceholderFn(props) {
     }, props.style)
   });
 }
-var VerticalScrollbarPlaceholder = React10.memo(VerticalScrollbarPlaceholderFn);
+var VerticalScrollbarPlaceholder = React9.memo(VerticalScrollbarPlaceholderFn);
 // src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts
 var import_createRuntimeFn3 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
@@ -5176,21 +5216,21 @@ var HeaderSortIconCls = "_12zfob11 _16lm1iw1";
 var HeaderWrapperCls = "_12zfob1v _16lm1iw16 _16lm1iw1 _16lm1iwj _16lm1iw10";
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
-var React17 = __toModule(require("react"));
-var import_react26 = __toModule(require("react"));
+var React16 = __toModule(require("react"));
+var import_react27 = __toModule(require("react"));
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
-var React13 = __toModule(require("react"));
-var import_react22 = __toModule(require("react"));
+var React12 = __toModule(require("react"));
+var import_react23 = __toModule(require("react"));
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
-var React11 = __toModule(require("react"));
+var React10 = __toModule(require("react"));
 // src/components/InfiniteTable/hooks/useInfiniteTableState.ts
-var import_react19 = __toModule(require("react"));
+var import_react20 = __toModule(require("react"));
 var useInfiniteTableState = () => {
   const TableContext2 = getInfiniteTableContext();
-  const { componentState } = (0, import_react19.useContext)(TableContext2);
+  const { componentState } = (0, import_react20.useContext)(TableContext2);
   return componentState;
 };
@@ -5253,23 +5293,23 @@ function InfiniteTableCellFn(props) {
     style,
     "data-name": "Cell",
     className: join(domProps.className, columnAlignCellStyle[(_b = column.align) != null ? _b : "start"], justifyContent[(_c = column.align) != null ? _c : "start"], InfiniteTableCellClassName, ColumnCellCls, shifting ? `${InfiniteTableCellClassName}--shifting ${CellClsVariants.shifting}` : ""),
-    children: /* @__PURE__ */ React11.createElement(React11.Fragment, null, beforeChildren, /* @__PURE__ */ React11.createElement("div", {
+    children: /* @__PURE__ */ React10.createElement(React10.Fragment, null, beforeChildren, /* @__PURE__ */ React10.createElement("div", {
       className: `${InfiniteTableCellContentClassName} ${cssEllipsis ? cssEllipsisClassName : overflow.hidden}`
     }, children), afterChildren)
   });
   const RenderComponent = cellType === "body" ? (_d = column.components) == null ? void 0 : _d.ColumnCell : (_e = column.components) == null ? void 0 : _e.HeaderCell;
   if (RenderComponent) {
-    return /* @__PURE__ */ React11.createElement(RenderComponent, __spreadValues({}, finalDOMProps));
+    return /* @__PURE__ */ React10.createElement(RenderComponent, __spreadValues({}, finalDOMProps));
   }
-  return /* @__PURE__ */ React11.createElement("div", __spreadProps(__spreadValues({}, finalDOMProps), {
+  return /* @__PURE__ */ React10.createElement("div", __spreadProps(__spreadValues({}, finalDOMProps), {
     ref: domRef
   }));
 }
-var InfiniteTableCell = React11.memo(InfiniteTableCellFn);
+var InfiniteTableCell = React10.memo(InfiniteTableCellFn);
 // src/components/InfiniteTable/hooks/useColumnPointerEvents.ts
 var import_binary_search2 = __toModule(require_binary_search());
-var import_react20 = __toModule(require("react"));
+var import_react21 = __toModule(require("react"));
 // src/components/InfiniteTable/utils/moveXatY.ts
 var moveXatY = (arr, dragIndex, dropIndex) => {
@@ -5303,18 +5343,18 @@ var useColumnPointerEvents = ({
   columns,
   computedRemainingSpace
 }) => {
-  const [draggingDiff, setDraggingDiff] = (0, import_react20.useState)(null);
-  const [proxyOffset, setProxyOffset] = (0, import_react20.useState)(null);
-  const breakpointsRef = (0, import_react20.useRef)([]);
-  const pointerMoveRef = (0, import_react20.useRef)(null);
-  const didDragRef = (0, import_react20.useRef)(false);
-  const initialClientPos = (0, import_react20.useRef)(null);
-  const currentDropIndexRef = (0, import_react20.useRef)(null);
+  const [draggingDiff, setDraggingDiff] = (0, import_react21.useState)(null);
+  const [proxyOffset, setProxyOffset] = (0, import_react21.useState)(null);
+  const breakpointsRef = (0, import_react21.useRef)([]);
+  const pointerMoveRef = (0, import_react21.useRef)(null);
+  const didDragRef = (0, import_react21.useRef)(false);
+  const initialClientPos = (0, import_react21.useRef)(null);
+  const currentDropIndexRef = (0, import_react21.useRef)(null);
   const dragging = draggingDiff != null;
   const { componentActions, computed } = useInfiniteTable();
   const { computedColumnOrder } = computed;
-  const column = (0, import_react20.useMemo)(() => columns.get(columnId), [columnId, columns]);
-  const { columnIndex, columnWidth, columnsArray } = (0, import_react20.useMemo)(() => {
+  const column = (0, import_react21.useMemo)(() => columns.get(columnId), [columnId, columns]);
+  const { columnIndex, columnWidth, columnsArray } = (0, import_react21.useMemo)(() => {
     const columnsArray2 = Array.from(columns.values());
     return {
       columnsArray: columnsArray2,
@@ -5322,8 +5362,8 @@ var useColumnPointerEvents = ({
       columnWidth: column.computedWidth
     };
   }, [columns, columnId, column]);
-  let cursorRef = (0, import_react20.useRef)("auto");
-  const onPointerDown = (0, import_react20.useCallback)((e) => {
+  let cursorRef = (0, import_react21.useRef)("auto");
+  const onPointerDown = (0, import_react21.useCallback)((e) => {
     const target = domRef.current;
     cursorRef.current = target.style.cursor;
     didDragRef.current = false;
@@ -5386,7 +5426,7 @@ var useColumnPointerEvents = ({
     target.addEventListener("pointermove", onPointerMove);
     target.setPointerCapture(e.pointerId);
   }, [columns, column, columnIndex, columnsArray, computedRemainingSpace]);
-  const onPointerUp = (0, import_react20.useCallback)((e) => {
+  const onPointerUp = (0, import_react21.useCallback)((e) => {
     const target = domRef.current;
     target.style.cursor = cursorRef.current;
     target.releasePointerCapture(e.pointerId);
@@ -5460,8 +5500,8 @@ function useCellClassName(column, baseClasses, variants, extraFlags) {
 var import_react_dom = __toModule(require("react-dom"));
 // src/components/InfiniteTable/components/icons/SortIcon.tsx
-var React12 = __toModule(require("react"));
-var import_react21 = __toModule(require("react"));
+var React11 = __toModule(require("react"));
+var import_react22 = __toModule(require("react"));
 var defaultLineStyle = {
   marginTop: 2,
   marginBottom: 2,
@@ -5470,8 +5510,8 @@ var defaultLineStyle = {
 var InfiniteTableIconClassName = "InfiniteTableIcon";
 function SortIcon(props) {
   var _a;
-  const [rendered, setRendered] = (0, import_react21.useState)(true);
-  const [opacity, setOpacity] = (0, import_react21.useState)(0);
+  const [rendered, setRendered] = (0, import_react22.useState)(true);
+  const [opacity, setOpacity] = (0, import_react22.useState)(0);
   const { direction, lineWidth = 1, style, className, index } = props;
   const showIndex = index != null && index > 0;
   const size = (_a = props.size) != null ? _a : 16;
@@ -5485,7 +5525,7 @@ function SortIcon(props) {
   }), props.lineStyle), {
     opacity
   });
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     const newOpacity = direction != 0 ? 1 : 0;
     if (!rendered && newOpacity) {
       setRendered(true);
@@ -5515,24 +5555,24 @@ function SortIcon(props) {
   if (direction === -1) {
     indexStyle.top = "100%";
   }
-  return /* @__PURE__ */ React12.createElement("div", {
+  return /* @__PURE__ */ React11.createElement("div", {
     style: __spreadProps(__spreadValues({}, style), { width: size }),
     className: join(className, InfiniteTableIconClassName, `${InfiniteTableIconClassName}-sort`)
-  }, showIndex ? /* @__PURE__ */ React12.createElement("div", {
+  }, showIndex ? /* @__PURE__ */ React11.createElement("div", {
     "data-name": "index",
     style: indexStyle
-  }, index) : null, /* @__PURE__ */ React12.createElement("div", {
+  }, index) : null, /* @__PURE__ */ React11.createElement("div", {
     style: __spreadValues({ width: sizes[0] }, lineStyle),
     onTransitionEnd
-  }), /* @__PURE__ */ React12.createElement("div", {
+  }), /* @__PURE__ */ React11.createElement("div", {
     style: __spreadValues({ width: sizes[1] }, lineStyle)
-  }), /* @__PURE__ */ React12.createElement("div", {
+  }), /* @__PURE__ */ React11.createElement("div", {
     style: __spreadValues({ width: sizes[2] }, lineStyle)
   }));
 }
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
-var InfiniteTableHeaderCellContext = React13.createContext(null);
+var InfiniteTableHeaderCellContext = React12.createContext(null);
 var defaultStyle = {
   position: "absolute",
   top: 0
@@ -5551,12 +5591,12 @@ function InfiniteTableHeaderCell(props) {
   }
   const sortInfo = column.computedSortInfo;
   let header = column.header;
-  const ref = (0, import_react22.useCallback)((node) => {
+  const ref = (0, import_react23.useCallback)((node) => {
     var _a2;
     domRef.current = node;
     (_a2 = props.domRef) == null ? void 0 : _a2.call(props, node);
   }, [props.domRef]);
-  const sortTool = /* @__PURE__ */ React13.createElement(SortIcon, {
+  const sortTool = /* @__PURE__ */ React12.createElement(SortIcon, {
     index: column.computedMultiSort ? column.computedSortIndex + 1 : void 0,
     className: `${InfiniteTableHeaderCellClassName}__sort-icon ${HeaderSortIconCls}`,
     direction: column.computedSorted ? column.computedSortedAsc ? 1 : -1 : 0
@@ -5569,7 +5609,7 @@ function InfiniteTableHeaderCell(props) {
   };
   const renderChildren = () => {
     if (header instanceof Function) {
-      header = /* @__PURE__ */ React13.createElement(RenderHookComponent, {
+      header = /* @__PURE__ */ React12.createElement(RenderHookComponent, {
         render: header,
         renderParam
       });
@@ -5577,12 +5617,12 @@ function InfiniteTableHeaderCell(props) {
     header = header != null ? header : column.name;
     return header;
   };
-  const domRef = (0, import_react22.useRef)(null);
+  const domRef = (0, import_react23.useRef)(null);
   const {
     computed: { computedRemainingSpace },
     componentState: { portalDOMRef }
   } = useInfiniteTable();
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     let clearOnResize = null;
     const node = domRef.current;
     if (onResize && node) {
@@ -5605,7 +5645,7 @@ function InfiniteTableHeaderCell(props) {
   let offset = offsetFromProps != null ? offsetFromProps : virtualized ? 0 : column.computedPinningOffset;
   let draggingProxy = null;
   if (dragging) {
-    draggingProxy = /* @__PURE__ */ React13.createElement("div", {
+    draggingProxy = /* @__PURE__ */ React12.createElement("div", {
       className: `${InfiniteTableHeaderCellClassName}Proxy ${HeaderCellProxy}`,
       style: {
         position: "absolute",
@@ -5619,9 +5659,9 @@ function InfiniteTableHeaderCell(props) {
     draggingProxy = (0, import_react_dom.createPortal)(draggingProxy, portalDOMRef.current);
   }
   const ContextProvider = InfiniteTableHeaderCellContext.Provider;
-  return /* @__PURE__ */ React13.createElement(ContextProvider, {
+  return /* @__PURE__ */ React12.createElement(ContextProvider, {
     value: renderParam
-  }, /* @__PURE__ */ React13.createElement(InfiniteTableCell, {
+  }, /* @__PURE__ */ React12.createElement(InfiniteTableCell, {
     domRef: ref,
     cellType: "header",
     column,
@@ -5638,34 +5678,34 @@ function InfiniteTableHeaderCell(props) {
   }), draggingProxy);
 }
 function useInfiniteHeaderCell() {
-  const result = (0, import_react22.useContext)(InfiniteTableHeaderCellContext);
+  const result = (0, import_react23.useContext)(InfiniteTableHeaderCellContext);
   return result;
 }
 // src/components/RawList/index.tsx
-var React16 = __toModule(require("react"));
-var import_react25 = __toModule(require("react"));
+var React15 = __toModule(require("react"));
+var import_react26 = __toModule(require("react"));
 // src/components/RawList/AvoidReactDiff.tsx
-var React14 = __toModule(require("react"));
-var import_react23 = __toModule(require("react"));
+var React13 = __toModule(require("react"));
+var import_react24 = __toModule(require("react"));
 function AvoidReactDiffFn(props) {
-  const [children, setChildren] = (0, import_react23.useState)(props.updater.get());
-  (0, import_react23.useLayoutEffect)(() => {
+  const [children, setChildren] = (0, import_react24.useState)(props.updater.get());
+  (0, import_react24.useLayoutEffect)(() => {
     const remove = props.updater.onChange((children2) => {
       setChildren(children2);
     });
     return remove;
   }, [props.updater]);
-  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, children);
+  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, children);
 }
-var AvoidReactDiff = React14.memo(AvoidReactDiffFn);
+var AvoidReactDiff = React13.memo(AvoidReactDiffFn);
 // src/components/RawList/useVirtualRenderer.ts
-var import_react24 = __toModule(require("react"));
+var import_react25 = __toModule(require("react"));
 // src/components/RawList/ReactVirtualRenderer.tsx
-var React15 = __toModule(require("react"));
+var React14 = __toModule(require("react"));
 // src/components/RawList/MappedItems.ts
 var MappedItems = class extends Logger {
@@ -5910,7 +5950,7 @@ var ReactVirtualRenderer = class extends Logger {
     };
     this.itemDOMRefs[elementIndex] = domRef;
     this.updaters[elementIndex] = buildSubscriptionCallback();
-    const item = /* @__PURE__ */ React15.createElement(AvoidReactDiff, {
+    const item = /* @__PURE__ */ React14.createElement(AvoidReactDiff, {
       key: elementIndex,
       name: `${elementIndex}`,
       updater: this.updaters[elementIndex]
@@ -5946,7 +5986,7 @@ var ReactVirtualRenderer = class extends Logger {
     }
     this.mappedItems.renderItemAtElement(itemIndex, elementIndex, renderedNode);
     if (true) {
-      this.debug(`Render item ${itemIndex} at element ${elementIndex}`);
+      dbg(`ReactVirtualRenderer:${this.brain.getOptions().mainAxis}`)(`Render item ${itemIndex} at element ${elementIndex}`);
     }
     itemUpdater(renderedNode);
     this.updateElementPosition(elementIndex);
@@ -5976,7 +6016,7 @@ function createRenderer(brain) {
 function useVirtualRenderer({
   brain
 }) {
-  return (0, import_react24.useMemo)(() => {
+  return (0, import_react25.useMemo)(() => {
     return createRenderer(brain);
   }, [brain]);
 }
@@ -5989,7 +6029,7 @@ function RawListFn(props) {
     debugChannel
   });
   const getRenderItem = useLatest(renderItem);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     const renderRange = brain.getRenderRange();
     renderer.renderRange(renderRange, {
       renderItem,
@@ -5997,7 +6037,7 @@ function RawListFn(props) {
       onRender: onRenderUpdater
     });
   }, [brain, renderItem, onRenderUpdater]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     const remove = brain.onRenderRangeChange((renderRange) => {
       renderer.renderRange(renderRange, {
         force: false,
@@ -6007,11 +6047,11 @@ function RawListFn(props) {
     });
     return remove;
   }, [brain, onRenderUpdater]);
-  return /* @__PURE__ */ React16.createElement(AvoidReactDiff, {
+  return /* @__PURE__ */ React15.createElement(AvoidReactDiff, {
     updater: onRenderUpdater
   });
 }
-var RawList = React16.memo(RawListFn);
+var RawList = React15.memo(RawListFn);
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
 var debug3 = dbg("Header");
@@ -6024,7 +6064,7 @@ function InfiniteTableHeaderFn(props) {
     componentState: { headerHeight }
   } = useInfiniteTable();
   const { computedVisibleColumnsMap } = computed;
-  const renderColumn = (0, import_react26.useCallback)(({ domRef: domRef2, itemIndex: columnIndex }) => {
+  const renderColumn = (0, import_react27.useCallback)(({ domRef: domRef2, itemIndex: columnIndex }) => {
     const column = columns[columnIndex];
     if (!column) {
       if (true) {
@@ -6032,14 +6072,14 @@ function InfiniteTableHeaderFn(props) {
       }
       return null;
     }
-    return /* @__PURE__ */ React17.createElement(InfiniteTableHeaderCell, {
+    return /* @__PURE__ */ React16.createElement(InfiniteTableHeaderCell, {
       domRef: domRef2,
       column,
       headerHeight,
       columns: computedVisibleColumnsMap
     });
   }, [computedVisibleColumnsMap, columns, repaintId, headerHeight]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     const onScroll = (scrollPosition) => {
       if (domRef.current) {
         domRef.current.style.transform = `translate3d(-${scrollPosition.scrollLeft}px, 0px, 0px)`;
@@ -6048,7 +6088,7 @@ function InfiniteTableHeaderFn(props) {
     const removeOnScroll = brain.onScroll(onScroll);
     return removeOnScroll;
   }, [brain]);
-  const domRef = (0, import_react26.useRef)(null);
+  const domRef = (0, import_react27.useRef)(null);
   const headerCls = HeaderClsRecipe({
     pinned: pinning,
     overflow: false,
@@ -6059,18 +6099,18 @@ function InfiniteTableHeaderFn(props) {
     className: join(TableHeaderClassName, `${TableHeaderClassName}--virtualized`, className, headerCls),
     style
   };
-  return /* @__PURE__ */ React17.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React17.createElement(RawList, {
+  return /* @__PURE__ */ React16.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React16.createElement(RawList, {
     brain,
     renderItem: renderColumn
   }));
 }
-var InfiniteTableHeader = React17.memo(InfiniteTableHeaderFn);
+var InfiniteTableHeader = React16.memo(InfiniteTableHeaderFn);
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderUnvirtualized.tsx
-var React20 = __toModule(require("react"));
+var React19 = __toModule(require("react"));
 // src/components/InfiniteTable/components/InfiniteTableHeader/renderColumnHeaderGroups.tsx
-var React19 = __toModule(require("react"));
+var React18 = __toModule(require("react"));
 // src/components/InfiniteTable/components/InfiniteTableHeader/buildColumnAndGroupTree.ts
 function buildColumnAndGroupTree(columns, columnGroups, columnGroupsDepthsMap) {
@@ -6160,7 +6200,7 @@ function assignGroupOffsetsAndComputedWidths(items, groupOffset = 0) {
 }
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup.tsx
-var React18 = __toModule(require("react"));
+var React17 = __toModule(require("react"));
 var TableHeaderGroupClassName = `${rootClassName}HeaderGroup`;
 function InfiniteTableHeaderGroup(props) {
   const { columnGroup, height, headerHeight } = props;
@@ -6174,16 +6214,16 @@ function InfiniteTableHeaderGroup(props) {
     width: columnGroup.computedWidth,
     height
   };
-  return /* @__PURE__ */ React18.createElement("div", {
+  return /* @__PURE__ */ React17.createElement("div", {
     "data-group-id": columnGroup.id,
     className: join(HeaderGroupCls, TableHeaderGroupClassName, `${TableHeaderGroupClassName}--unvirtualized`),
     style
-  }, /* @__PURE__ */ React18.createElement("div", {
+  }, /* @__PURE__ */ React17.createElement("div", {
     className: join(`${TableHeaderGroupClassName}__header`, HeaderGroup_Header),
     style: { height: headerHeight }
-  }, /* @__PURE__ */ React18.createElement("div", {
+  }, /* @__PURE__ */ React17.createElement("div", {
     className: join(`${TableHeaderGroupClassName}__header-content`, cssEllipsisClassName)
-  }, header)), /* @__PURE__ */ React18.createElement("div", {
+  }, header)), /* @__PURE__ */ React17.createElement("div", {
     className: join(`${TableHeaderGroupClassName}__children`, HeaderGroup_Children)
   }, props.children));
 }
@@ -6206,7 +6246,7 @@ function renderColumnHeaderGroups(config) {
     return items2.map((colGroupItem) => {
       if (colGroupItem.type === "column") {
         const col = colGroupItem.ref;
-        return /* @__PURE__ */ React19.createElement(InfiniteTableHeaderCell, {
+        return /* @__PURE__ */ React18.createElement(InfiniteTableHeaderCell, {
           key: col.id,
           headerHeight: (columnGroupsMaxDepth - colGroupItem.depth + 2) * headerHeight,
           column: col,
@@ -6220,7 +6260,7 @@ function renderColumnHeaderGroups(config) {
         colIds.push(col.id);
         return col;
       });
-      return /* @__PURE__ */ React19.createElement(InfiniteTableHeaderGroup, {
+      return /* @__PURE__ */ React18.createElement(InfiniteTableHeaderGroup, {
         key: `${colGroupItem.uniqueGroupId.join("/")}`,
         columns: columns2,
         height: (columnGroupsMaxDepth - colGroupItem.depth + 2) * headerHeight,
@@ -6240,7 +6280,7 @@ function renderColumnHeaderGroups(config) {
 }
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderUnvirtualized.tsx
-var import_react27 = __toModule(require("react"));
+var import_react28 = __toModule(require("react"));
 var { rootClassName: rootClassName5 } = internalProps;
 var TableHeaderClassName2 = `${rootClassName5}Header`;
 var UPDATE_SCROLL = (node, scrollPosition) => {
@@ -6273,9 +6313,9 @@ function InfiniteTableHeaderUnvirtualizedFn(props) {
     },
     computed: { computedVisibleColumnsMap: columnsMap }
   } = useInfiniteTable();
-  const domRef = React20.useRef(null);
+  const domRef = React19.useRef(null);
   const hasColumnGroups = computedColumnGroups.size > 0;
-  const columnHeaderGroups = React20.useMemo(() => {
+  const columnHeaderGroups = React19.useMemo(() => {
     return hasColumnGroups ? renderColumnHeaderGroups({
       columnGroups: computedColumnGroups,
       columnGroupsDepthsMap,
@@ -6294,7 +6334,7 @@ function InfiniteTableHeaderUnvirtualizedFn(props) {
     columnGroupsMaxDepth
   ]);
   const children = hasColumnGroups ? columnHeaderGroups : columns.map((c) => {
-    return /* @__PURE__ */ React20.createElement(InfiniteTableHeaderCell, {
+    return /* @__PURE__ */ React19.createElement(InfiniteTableHeaderCell, {
       key: c.id,
       headerHeight,
       column: c,
@@ -6306,7 +6346,7 @@ function InfiniteTableHeaderUnvirtualizedFn(props) {
   if (totalWidth != null) {
     style.width = availableWidth;
   }
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     const scroller = brain || scrollListener;
     if (!scroller || !scrollable) {
       return;
@@ -6319,20 +6359,20 @@ function InfiniteTableHeaderUnvirtualizedFn(props) {
     const removeOnScroll = scroller.onScroll(onScroll);
     return removeOnScroll;
   }, [brain, scrollListener]);
-  return /* @__PURE__ */ React20.createElement("div", __spreadProps(__spreadValues({}, domProps), {
+  return /* @__PURE__ */ React19.createElement("div", __spreadProps(__spreadValues({}, domProps), {
     className: join(TableHeaderClassName2, `${TableHeaderClassName2}--unvirtualized`, pinning ? `${TableHeaderClassName2}--pinned ${TableHeaderClassName2}-${pinning}` : "", scrollable ? `${TableHeaderClassName2}--overflow` : "", domProps.className, HeaderClsRecipe({
       pinned: pinning,
       virtualized: false,
       overflow: scrollable
     })),
     style
-  }), /* @__PURE__ */ React20.createElement("div", {
+  }), /* @__PURE__ */ React19.createElement("div", {
     style: { width: totalWidth },
     className: join(flexFlow.row, display.flex),
     ref: domRef
   }, children));
 }
-var InfiniteTableHeaderUnvirtualized = React20.memo(InfiniteTableHeaderUnvirtualizedFn);
+var InfiniteTableHeaderUnvirtualized = React19.memo(InfiniteTableHeaderUnvirtualizedFn);
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderWrapper.tsx
 function TableHeaderWrapper(props) {
@@ -6365,7 +6405,7 @@ function TableHeaderWrapper(props) {
   const unvirtualizedStyle = !virtualizeHeader && computedPinnedStartColumnsWidth ? {
     left: computedPinnedStartWidth
   } : void 0;
-  const header = virtualizeHeader ? /* @__PURE__ */ React21.createElement(InfiniteTableHeader, {
+  const header = virtualizeHeader ? /* @__PURE__ */ React20.createElement(InfiniteTableHeader, {
     columns: computedUnpinnedColumns,
     repaintId: virtualizeHeader ? repaintId : void 0,
     brain,
@@ -6378,7 +6418,7 @@ function TableHeaderWrapper(props) {
     },
     availableWidth: computedUnpinnedColumnsWidth,
     totalWidth: computedUnpinnedColumnsWidth
-  }) : /* @__PURE__ */ React21.createElement(InfiniteTableHeaderUnvirtualized, {
+  }) : /* @__PURE__ */ React20.createElement(InfiniteTableHeaderUnvirtualized, {
     style: unvirtualizedStyle,
     brain,
     scrollable: true,
@@ -6387,12 +6427,12 @@ function TableHeaderWrapper(props) {
     availableWidth: computedUnpinnedColumnsWidth,
     totalWidth: computedUnpinnedColumnsWidth
   });
-  return /* @__PURE__ */ React21.createElement("div", {
+  return /* @__PURE__ */ React20.createElement("div", {
     className: HeaderWrapperCls,
     style: {
       height: virtualizeHeader ? height : void 0
     }
-  }, hasPinnedStart ? /* @__PURE__ */ React21.createElement(InfiniteTableHeaderUnvirtualized, {
+  }, hasPinnedStart ? /* @__PURE__ */ React20.createElement(InfiniteTableHeaderUnvirtualized, {
     style: {
       left: 0,
       position: "absolute",
@@ -6404,7 +6444,7 @@ function TableHeaderWrapper(props) {
     scrollable: computedPinnedStartOverflow,
     pinning: "start",
     scrollListener: computedPinnedStartOverflow ? pinnedStartScrollListener : void 0
-  }) : null, header, hasPinnedEnd ? /* @__PURE__ */ React21.createElement(InfiniteTableHeaderUnvirtualized, {
+  }) : null, header, hasPinnedEnd ? /* @__PURE__ */ React20.createElement(InfiniteTableHeaderUnvirtualized, {
     style: {
       right: scrollbars.vertical ? getScrollbarWidth() : 0,
       position: "absolute",
@@ -6416,7 +6456,7 @@ function TableHeaderWrapper(props) {
     scrollable: computedPinnedEndOverflow,
     pinning: "end",
     scrollListener: computedPinnedEndOverflow ? pinnedEndScrollListener : void 0
-  }) : null, scrollbars.vertical ? /* @__PURE__ */ React21.createElement(VerticalScrollbarPlaceholder, {
+  }) : null, scrollbars.vertical ? /* @__PURE__ */ React20.createElement(VerticalScrollbarPlaceholder, {
     style: {
       height: "100%",
       right: 0
@@ -6425,13 +6465,13 @@ function TableHeaderWrapper(props) {
 }
 // src/components/VirtualScrollContainer/index.tsx
-var React22 = __toModule(require("react"));
-var import_react29 = __toModule(require("react"));
+var React21 = __toModule(require("react"));
+var import_react30 = __toModule(require("react"));
 // src/components/hooks/useOnScroll.ts
-var import_react28 = __toModule(require("react"));
+var import_react29 = __toModule(require("react"));
 var useOnScroll = (domRef, onScroll) => {
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     const domNode = domRef == null ? void 0 : domRef.current;
     const scrollFn = (event) => {
       const node = event.target;
@@ -6469,7 +6509,7 @@ var getScrollableClassName = (scrollable) => {
 // src/components/VirtualScrollContainer/index.tsx
 var rootClassName6 = "InfiniteVirtualScrollContainer";
-var VirtualScrollContainer = React22.forwardRef(function VirtualScrollContainer2(props, ref) {
+var VirtualScrollContainer = React21.forwardRef(function VirtualScrollContainer2(props, ref) {
   const {
     children,
     scrollable = true,
@@ -6477,9 +6517,9 @@ var VirtualScrollContainer = React22.forwardRef(function VirtualScrollContainer2
     className,
     style
   } = props;
-  const domRef = ref != null ? ref : (0, import_react29.useRef)(null);
+  const domRef = ref != null ? ref : (0, import_react30.useRef)(null);
   useOnScroll(domRef, onContainerScroll);
-  return /* @__PURE__ */ React22.createElement("div", {
+  return /* @__PURE__ */ React21.createElement("div", {
     ref: domRef,
     style,
     className: join(className, rootClassName6, VirtualScrollContainerCls, getScrollableClassName(scrollable))
@@ -6487,7 +6527,7 @@ var VirtualScrollContainer = React22.forwardRef(function VirtualScrollContainer2
 });
 // src/components/VirtualList/SpacePlaceholder.tsx
-var React23 = __toModule(require("react"));
+var React22 = __toModule(require("react"));
 function SpacePlaceholderFn(props) {
   const { height, width, count } = props;
   const style = {
@@ -6497,7 +6537,7 @@ function SpacePlaceholderFn(props) {
     opacity: 0,
     pointerEvents: "none"
   };
-  return /* @__PURE__ */ React23.createElement("div", {
+  return /* @__PURE__ */ React22.createElement("div", {
     "data-count": count,
     "data-placeholder-width": true ? width : void 0,
     "data-placeholder-height": true ? height : void 0,
@@ -6505,21 +6545,21 @@ function SpacePlaceholderFn(props) {
     style
   });
 }
-var SpacePlaceholder = React23.memo(SpacePlaceholderFn);
+var SpacePlaceholder = React22.memo(SpacePlaceholderFn);
 // src/components/InfiniteTable/hooks/useListRendering.tsx
-var import_react41 = __toModule(require("react"));
+var import_react42 = __toModule(require("react"));
 // src/components/InfiniteTable/hooks/useUnpinnedRendering.tsx
-var React29 = __toModule(require("react"));
-var import_react34 = __toModule(require("react"));
+var React28 = __toModule(require("react"));
+var import_react35 = __toModule(require("react"));
 // src/components/VirtualList/VirtualRowList.tsx
-var React25 = __toModule(require("react"));
+var React24 = __toModule(require("react"));
 // src/components/VirtualList/VirtualList.tsx
-var React24 = __toModule(require("react"));
-var import_react30 = __toModule(require("react"));
+var React23 = __toModule(require("react"));
+var import_react31 = __toModule(require("react"));
 // src/components/VirtualList/VirtualList.css.ts
 var VirtualListCls = "_16lm1iw1 _16lm1iw8 _16lm1iw0";
@@ -6562,11 +6602,11 @@ var VirtualList = (props) => {
     "onContainerScroll",
     "children"
   ]);
-  const domRef = (0, import_react30.useRef)(null);
+  const domRef = (0, import_react31.useRef)(null);
   const [, rerender] = useRerender();
-  const [totalSize, setTotalSize] = (0, import_react30.useState)(0);
-  const renderCountRef = (0, import_react30.useRef)(0);
-  (0, import_react30.useEffect)(() => {
+  const [totalSize, setTotalSize] = (0, import_react31.useState)(0);
+  const renderCountRef = (0, import_react31.useRef)(0);
+  (0, import_react31.useEffect)(() => {
     const removeOnRenderCount = virtualBrain.onRenderCountChange((renderCount) => {
       renderCountRef.current = renderCount;
       if (true) {
@@ -6585,7 +6625,7 @@ var VirtualList = (props) => {
       removeOnTotalSizeChange();
     };
   }, [virtualBrain]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     const onScroll = (scrollPosition) => {
       UPDATE_SCROLL2(domRef.current, scrollPosition);
     };
@@ -6600,19 +6640,19 @@ var VirtualList = (props) => {
   if (true) {
     domProps["data-cmp-name"] = `VirtualList`;
   }
-  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React24.createElement(VirtualScrollContainer, {
+  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React23.createElement(VirtualScrollContainer, {
     scrollable,
     onContainerScroll
-  }, /* @__PURE__ */ React24.createElement("div", {
+  }, /* @__PURE__ */ React23.createElement("div", {
     ref: domRef,
     className: scrollTransformTargetCls,
     "data-name": "scroll-transform-target"
-  }, /* @__PURE__ */ React24.createElement(RawList, {
+  }, /* @__PURE__ */ React23.createElement(RawList, {
     brain: virtualBrain,
     renderItem,
     repaintId,
     debugChannel: "VirtualList-" + mainAxis
-  })), children, /* @__PURE__ */ React24.createElement(SpacePlaceholder, {
+  })), children, /* @__PURE__ */ React23.createElement(SpacePlaceholder, {
     count,
     width,
     height
@@ -6622,14 +6662,14 @@ var VirtualList = (props) => {
 // src/components/VirtualList/VirtualRowList.tsx
 var VirtualRowList = (props) => {
   const _a = props, { rowWidth, rowHeight, renderRow } = _a, listProps = __objRest(_a, ["rowWidth", "rowHeight", "renderRow"]);
-  const renderItem = React25.useCallback((renderProps) => {
+  const renderItem = React24.useCallback((renderProps) => {
     return renderRow({
       domRef: renderProps.domRef,
       rowHeight: renderProps.itemSize,
       rowIndex: renderProps.itemIndex
     });
   }, [renderRow]);
-  return /* @__PURE__ */ React25.createElement(VirtualList, __spreadProps(__spreadValues({}, listProps), {
+  return /* @__PURE__ */ React24.createElement(VirtualList, __spreadProps(__spreadValues({}, listProps), {
     renderItem,
     mainAxis: "vertical",
     itemMainAxisSize: rowHeight,
@@ -6638,14 +6678,14 @@ var VirtualRowList = (props) => {
 };
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableRow.tsx
-var React27 = __toModule(require("react"));
-var import_react33 = __toModule(require("react"));
+var React26 = __toModule(require("react"));
+var import_react34 = __toModule(require("react"));
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx
-var React26 = __toModule(require("react"));
-var import_react31 = __toModule(require("react"));
+var React25 = __toModule(require("react"));
+var import_react32 = __toModule(require("react"));
 var { rootClassName: rootClassName8 } = internalProps;
-var InfiniteTableColumnCellContext = React26.createContext(null);
+var InfiniteTableColumnCellContext = React25.createContext(null);
 var InfiniteTableColumnCellClassName = `${rootClassName8}ColumnCell`;
 function isColumnWithField(c) {
   return typeof c.field === "string";
@@ -6710,7 +6750,7 @@ function InfiniteTableColumnCellFn(props) {
     }
     const renderFn = column.render || column.renderValue;
     if (renderFn) {
-      return /* @__PURE__ */ React26.createElement(RenderHookComponent, {
+      return /* @__PURE__ */ React25.createElement(RenderHookComponent, {
         render: renderFn,
         renderParam
       });
@@ -6757,18 +6797,18 @@ function InfiniteTableColumnCellFn(props) {
     renderChildren
   });
   const ContextProvider = InfiniteTableColumnCellContext.Provider;
-  return /* @__PURE__ */ React26.createElement(ContextProvider, {
+  return /* @__PURE__ */ React25.createElement(ContextProvider, {
     value: renderParam
-  }, /* @__PURE__ */ React26.createElement(InfiniteTableCell, __spreadValues({}, cellProps)));
+  }, /* @__PURE__ */ React25.createElement(InfiniteTableCell, __spreadValues({}, cellProps)));
 }
-var InfiniteTableColumnCell = React26.memo(InfiniteTableColumnCellFn);
+var InfiniteTableColumnCell = React25.memo(InfiniteTableColumnCellFn);
 function useInfiniteColumnCell() {
-  const result = (0, import_react31.useContext)(InfiniteTableColumnCellContext);
+  const result = (0, import_react32.useContext)(InfiniteTableColumnCellContext);
   return result;
 }
 // src/components/InfiniteTable/components/InfiniteTableRow/useRowDOMProps.ts
-var import_react32 = __toModule(require("react"));
+var import_react33 = __toModule(require("react"));
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableRowClassName.ts
 var { rootClassName: rootClassName9 } = internalProps;
@@ -6794,8 +6834,8 @@ function useRowDOMProps(props, rowProps, rowStyle, rowClassName, groupRenderStra
     rowInfo,
     rowSpan
   } = props;
-  const domRef = (0, import_react32.useRef)(null);
-  const rowDOMRef = (0, import_react32.useCallback)((node) => {
+  const domRef = (0, import_react33.useRef)(null);
+  const rowDOMRef = (0, import_react33.useCallback)((node) => {
     domRefFromProps(node);
     domRef.current = node;
   }, []);
@@ -6826,7 +6866,7 @@ function useRowDOMProps(props, rowProps, rowStyle, rowClassName, groupRenderStra
   }), `${InfiniteTableRowClassName}--${rowInfo.isGroupRow ? "group" : "normal"}-row`, inlineGroupRoot ? `${InfiniteTableRowClassName}--inline-group-row` : "", showZebraRows ? `${InfiniteTableRowClassName}--${odd ? "odd" : "even"}` : null, showHoverRows ? `${InfiniteTableRowClassName}--show-hover` : null, domProps == null ? void 0 : domProps.className, rowProps == null ? void 0 : rowProps.className, rowComputedClassName);
   const initialMouseEnter = rowProps == null ? void 0 : rowProps.onMouseEnter;
   const initialMouseLeave = rowProps == null ? void 0 : rowProps.onMouseLeave;
-  const onMouseEnter = (0, import_react32.useCallback)((event) => {
+  const onMouseEnter = (0, import_react33.useCallback)((event) => {
     var _a;
     initialMouseEnter == null ? void 0 : initialMouseEnter(event);
     const rowIndex2 = ((_a = event.currentTarget) == null ? void 0 : _a.dataset.rowIndex) * 1;
@@ -6840,7 +6880,7 @@ function useRowDOMProps(props, rowProps, rowStyle, rowClassName, groupRenderStra
     const rows = parentNode.querySelectorAll(hoverSelector.join(","));
     rows.forEach((row) => row.classList.add(InfiniteTableRowClassName__hover, RowHoverCls));
   }, [initialMouseEnter, showHoverRows]);
-  const onMouseLeave = (0, import_react32.useCallback)((event) => {
+  const onMouseLeave = (0, import_react33.useCallback)((event) => {
     var _a;
     initialMouseLeave == null ? void 0 : initialMouseLeave(event);
     const rowIndex2 = (_a = event.currentTarget) == null ? void 0 : _a.dataset.rowIndex;
@@ -6896,13 +6936,13 @@ function InfiniteTableRowFn(props) {
     width: rowWidth,
     height: rowHeight
   }, domProps.style);
-  const renderCellRef = (0, import_react33.useRef)(null);
-  const renderCell = React27.useCallback(({ domRef, itemIndex }) => {
+  const renderCellRef = (0, import_react34.useRef)(null);
+  const renderCell = React26.useCallback(({ domRef, itemIndex }) => {
     const column = columns[itemIndex];
     if (!column) {
     }
     const hidden = false;
-    return /* @__PURE__ */ React27.createElement(InfiniteTableColumnCell, {
+    return /* @__PURE__ */ React26.createElement(InfiniteTableColumnCell, {
       getData,
       rowInfo,
       groupRenderStrategy,
@@ -6929,18 +6969,18 @@ function InfiniteTableRowFn(props) {
   if (true) {
     domProps["data-cmp-name"] = "ITableRow";
   }
-  return /* @__PURE__ */ React27.createElement("div", __spreadProps(__spreadValues({}, domProps), {
+  return /* @__PURE__ */ React26.createElement("div", __spreadProps(__spreadValues({}, domProps), {
     style
-  }), /* @__PURE__ */ React27.createElement(RawList, {
+  }), /* @__PURE__ */ React26.createElement(RawList, {
     brain,
     renderItem: renderCell,
     debugChannel: `${rowIndex}`
   }));
 }
-var InfiniteTableRow = React27.memo(InfiniteTableRowFn);
+var InfiniteTableRow = React26.memo(InfiniteTableRowFn);
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableRowUnvirtualized.tsx
-var React28 = __toModule(require("react"));
+var React27 = __toModule(require("react"));
 function TableRowUnvirtualizedFn(props) {
   const {
     rowHeight,
@@ -6961,7 +7001,7 @@ function TableRowUnvirtualizedFn(props) {
   }, domProps.style);
   const children = columns.map((col) => {
     const hidden = false;
-    return /* @__PURE__ */ React28.createElement(InfiniteTableColumnCell, {
+    return /* @__PURE__ */ React27.createElement(InfiniteTableColumnCell, {
       key: col.id,
       virtualized: false,
       rowHeight,
@@ -6974,11 +7014,11 @@ function TableRowUnvirtualizedFn(props) {
       column: col
     });
   });
-  return /* @__PURE__ */ React28.createElement("div", __spreadProps(__spreadValues({}, domProps), {
+  return /* @__PURE__ */ React27.createElement("div", __spreadProps(__spreadValues({}, domProps), {
     style
   }), children);
 }
-var TableRowUnvirtualized = React28.memo(TableRowUnvirtualizedFn);
+var TableRowUnvirtualized = React27.memo(TableRowUnvirtualizedFn);
 // src/components/InfiniteTable/hooks/useUnpinnedRendering.tsx
 function useUnpinnedRendering(params) {
@@ -7001,7 +7041,7 @@ function useUnpinnedRendering(params) {
   } = params;
   const { virtualizeColumns } = getState();
   const shouldVirtualizeColumns = typeof virtualizeColumns === "function" ? virtualizeColumns(computedUnpinnedColumns) : virtualizeColumns != null ? virtualizeColumns : true;
-  const renderRowUnpinned = (0, import_react34.useCallback)((rowParams) => {
+  const renderRowUnpinned = (0, import_react35.useCallback)((rowParams) => {
     const dataArray = getData();
     const rowInfo = dataArray[rowParams.rowIndex];
     const { showZebraRows, showHoverRows } = getState();
@@ -7023,7 +7063,7 @@ function useUnpinnedRendering(params) {
       rowProps.repaintId = repaintId;
     }
     const TableRowComponent = shouldVirtualizeColumns ? InfiniteTableRow : TableRowUnvirtualized;
-    return /* @__PURE__ */ React29.createElement(TableRowComponent, __spreadValues({}, rowProps));
+    return /* @__PURE__ */ React28.createElement(TableRowComponent, __spreadValues({}, rowProps));
   }, [
     repaintId,
     rowHeight,
@@ -7034,7 +7074,7 @@ function useUnpinnedRendering(params) {
     horizontalVirtualBrain,
     verticalVirtualBrain
   ]);
-  const fakeScrollbar = getScrollbarWidth() ? /* @__PURE__ */ React29.createElement("div", {
+  const fakeScrollbar = getScrollbarWidth() ? /* @__PURE__ */ React28.createElement("div", {
     "data-name": "horizontal-scrollbar-placeholder--fake",
     style: {
       position: "absolute",
@@ -7045,10 +7085,10 @@ function useUnpinnedRendering(params) {
       overflow: "auto",
       visibility: columnShifts ? "visible" : "hidden"
     }
-  }, /* @__PURE__ */ React29.createElement("div", {
+  }, /* @__PURE__ */ React28.createElement("div", {
     style: { height: "100%", width: computedUnpinnedColumnsWidth }
   })) : null;
-  return rowHeight != 0 ? /* @__PURE__ */ React29.createElement(VirtualRowList, {
+  return rowHeight != 0 ? /* @__PURE__ */ React28.createElement(VirtualRowList, {
     repaintId: `${repaintId}-unpinned-`,
     brain: verticalVirtualBrain,
     onContainerScroll: applyScrollHorizontal,
@@ -7069,7 +7109,7 @@ function useUnpinnedRendering(params) {
 }
 // src/components/InfiniteTable/hooks/useOnContainerScroll.ts
-var import_react35 = __toModule(require("react"));
+var import_react36 = __toModule(require("react"));
 // src/components/InfiniteTable/InfiniteCls.css.ts
 var import_createRuntimeFn5 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
@@ -7094,7 +7134,6 @@ var useOnContainerScroll = ({
     componentState: {
       scrollStopDelay,
       scrollerDOMRef,
-      domRef,
       scrollToBottomOffset,
       onScrollToBottom,
       onScrollToTop,
@@ -7107,18 +7146,18 @@ var useOnContainerScroll = ({
     getState: getDataSourceState,
     componentState: { notifyScrollStop }
   } = useDataSourceContextValue();
-  const onScrollStop = (0, import_react35.useCallback)((param) => {
+  const onScrollStop = (0, import_react36.useCallback)((param) => {
     onScrollStopFromProps == null ? void 0 : onScrollStopFromProps(param);
     notifyScrollStop(param);
   }, [onScrollStopFromProps, notifyScrollStop]);
-  const timeoutIdRef = (0, import_react35.useRef)(0);
-  const scrollingRef = (0, import_react35.useRef)(false);
-  const scrollTopMaxRef = (0, import_react35.useRef)(0);
-  (0, import_react35.useEffect)(() => {
+  const timeoutIdRef = (0, import_react36.useRef)(0);
+  const scrollingRef = (0, import_react36.useRef)(false);
+  const scrollTopMaxRef = (0, import_react36.useRef)(0);
+  (0, import_react36.useEffect)(() => {
     const { current: node } = scrollerDOMRef;
     scrollTopMaxRef.current = node.scrollHeight - node.clientHeight;
   }, [reservedContentHeight, bodySize.height]);
-  const setScrolling = (0, import_react35.useCallback)((scrolling) => {
+  const setScrolling = (0, import_react36.useCallback)((scrolling) => {
     var _a;
     const prevScrolling = scrollingRef.current;
     scrollingRef.current = scrolling;
@@ -7140,7 +7179,7 @@ var useOnContainerScroll = ({
           lastVisibleRowIndex: range.renderEndIndex
         });
       }
-      const classList = (_a = domRef.current) == null ? void 0 : _a.classList;
+      const classList = (_a = scrollerDOMRef.current) == null ? void 0 : _a.classList;
       if (!classList) {
         return;
       }
@@ -7151,25 +7190,25 @@ var useOnContainerScroll = ({
       }
     }
   }, [scrollStopDelay, onScrollStop]);
-  const onContainerScroll = (0, import_react35.useCallback)((scrollInfo) => {
+  const onContainerScroll = (0, import_react36.useCallback)((scrollInfo) => {
     verticalVirtualBrain.setScrollPosition(scrollInfo);
     horizontalVirtualBrain.setScrollPosition(scrollInfo);
     setScrolling(true);
   }, [
     horizontalVirtualBrain,
     verticalVirtualBrain,
-    domRef.current,
+    scrollerDOMRef.current,
     setScrolling
   ]);
-  const scrollPositionRef = (0, import_react35.useRef)({
+  const scrollPositionRef = (0, import_react36.useRef)({
     scrollLeft: 0,
     scrollTop: 0
   });
-  const applyScrollHorizontal = (0, import_react35.useCallback)(({ scrollLeft }) => {
+  const applyScrollHorizontal = (0, import_react36.useCallback)(({ scrollLeft }) => {
     scrollPositionRef.current.scrollLeft = scrollLeft;
     onContainerScroll(scrollPositionRef.current);
   }, [onContainerScroll]);
-  const applyScrollVertical = (0, import_react35.useCallback)(({ scrollTop }) => {
+  const applyScrollVertical = (0, import_react36.useCallback)(({ scrollTop }) => {
     scrollPositionRef.current.scrollTop = scrollTop;
     onContainerScroll(scrollPositionRef.current);
     if (scrollTop === 0) {
@@ -7191,17 +7230,17 @@ var useOnContainerScroll = ({
 };
 // src/components/InfiniteTable/hooks/usePinnedRendering.tsx
-var React31 = __toModule(require("react"));
-var import_react38 = __toModule(require("react"));
+var React30 = __toModule(require("react"));
+var import_react39 = __toModule(require("react"));
 // src/components/VirtualList/RowListWithExternalScrolling.tsx
-var React30 = __toModule(require("react"));
-var import_react37 = __toModule(require("react"));
+var React29 = __toModule(require("react"));
+var import_react38 = __toModule(require("react"));
 // src/components/hooks/useOnMount.ts
-var import_react36 = __toModule(require("react"));
+var import_react37 = __toModule(require("react"));
 function useOnMount(domRef, props) {
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     const { onMount, onUnmount } = props;
     const node = domRef == null ? void 0 : domRef.current;
     onMount == null ? void 0 : onMount(node);
@@ -7232,8 +7271,8 @@ var RowListWithExternalScrolling = (props) => {
     onMount,
     onUnmount
   } = props;
-  const domRef = (0, import_react37.useRef)(null);
-  const renderItem = (0, import_react37.useCallback)((renderProps) => renderRow({
+  const domRef = (0, import_react38.useRef)(null);
+  const renderItem = (0, import_react38.useCallback)((renderProps) => renderRow({
     domRef: renderProps.domRef,
     rowHeight: renderProps.itemSize,
     rowIndex: renderProps.itemIndex
@@ -7242,7 +7281,7 @@ var RowListWithExternalScrolling = (props) => {
     onMount,
     onUnmount
   });
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     const onScroll = (scrollPosition) => {
       const node = domRef.current;
       if (node) {
@@ -7271,7 +7310,7 @@ var RowListWithExternalScrolling = (props) => {
   if (true) {
     domProps["data-cmp-name"] = "RowListWithExternalScrolling";
   }
-  return /* @__PURE__ */ React30.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React30.createElement(RawList, {
+  return /* @__PURE__ */ React29.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React29.createElement(RawList, {
     brain,
     renderItem,
     repaintId
@@ -7294,7 +7333,7 @@ function PinnedRowsContainer(props) {
     brain,
     renderRow
   } = props;
-  const style = React31.useMemo(() => {
+  const style = React30.useMemo(() => {
     const result = pinning === "end" ? {
       width: rowWidth,
       height,
@@ -7309,7 +7348,7 @@ function PinnedRowsContainer(props) {
     }
     return result;
   }, [height, rowWidth, pinning, hasOverflow]);
-  const updateScroll = (0, import_react38.useCallback)((node, scrollPosition) => {
+  const updateScroll = (0, import_react39.useCallback)((node, scrollPosition) => {
     UPDATE_SCROLL3(node, scrollPosition, hasOverflow ? pinnedScrollListener.getScrollPosition() : void 0);
   }, [hasOverflow, pinnedScrollListener]);
   const rowListProps = {
@@ -7320,7 +7359,7 @@ function PinnedRowsContainer(props) {
     className: join(`${PinnedRowsContainerClassName}`, PinnedRowsClsVariants[pinning === "start" ? "pinnedStart" : "pinnedEnd"], `${PinnedRowsContainerClassName}--pinned-${pinning}`, `${PinnedRowsContainerClassName}--overflow`, PinnedRowsClsVariants.overflow)
   };
   if (hasOverflow) {
-    return /* @__PURE__ */ React31.createElement(VirtualScrollContainer, {
+    return /* @__PURE__ */ React30.createElement(VirtualScrollContainer, {
       scrollable: {
         horizontal: true,
         vertical: false
@@ -7336,23 +7375,23 @@ function PinnedRowsContainer(props) {
       className: join(PinnedRowsContainerClsVariants({
         pinned: pinning
       }), `${PinnedRowsContainerClassName}Container`, `${PinnedRowsContainerClassName}Container--pinned-${pinning}`)
-    }, /* @__PURE__ */ React31.createElement(RowListWithExternalScrolling, __spreadProps(__spreadValues({}, rowListProps), {
+    }, /* @__PURE__ */ React30.createElement(RowListWithExternalScrolling, __spreadProps(__spreadValues({}, rowListProps), {
       onMount: (node) => {
         pinnedScrollListener == null ? void 0 : pinnedScrollListener.onScroll((scrollPosition) => {
           updateScroll(node, brain.getScrollPosition(), scrollPosition);
         });
       }
-    })), /* @__PURE__ */ React31.createElement(SpacePlaceholder, {
+    })), /* @__PURE__ */ React30.createElement(SpacePlaceholder, {
       width: rowWidth,
       height: 1
     }));
   }
-  return /* @__PURE__ */ React31.createElement(RowListWithExternalScrolling, __spreadValues({}, rowListProps));
+  return /* @__PURE__ */ React30.createElement(RowListWithExternalScrolling, __spreadValues({}, rowListProps));
 }
 function useRenderPinnedRow(params) {
   const { getData, getState, columnsWidth, columns, rowSpan, verticalBrain } = params;
   const dataArray = getData();
-  const renderPinnedRow = (0, import_react38.useCallback)((rowParams) => {
+  const renderPinnedRow = (0, import_react39.useCallback)((rowParams) => {
     const rowInfo = dataArray[rowParams.rowIndex];
     const { showZebraRows, showHoverRows } = getState();
     const rowProps = __spreadValues({
@@ -7368,7 +7407,7 @@ function useRenderPinnedRow(params) {
       rowWidth: columnsWidth,
       columns
     }, rowParams);
-    return /* @__PURE__ */ React31.createElement(TableRowUnvirtualized, __spreadValues({}, rowProps));
+    return /* @__PURE__ */ React30.createElement(TableRowUnvirtualized, __spreadValues({}, rowProps));
   }, [columnsWidth, columns, verticalBrain, dataArray]);
   return renderPinnedRow;
 }
@@ -7414,7 +7453,7 @@ function usePinnedRenderingForSide(side, params) {
     columns,
     columnsWidth
   });
-  const pinnedList = columns.length && rowHeight !== 0 ? /* @__PURE__ */ React31.createElement(PinnedRowsContainer, {
+  const pinnedList = columns.length && rowHeight !== 0 ? /* @__PURE__ */ React30.createElement(PinnedRowsContainer, {
     pinning: side,
     pinnedScrollListener,
     hasOverflow,
@@ -7427,7 +7466,7 @@ function usePinnedRenderingForSide(side, params) {
     brain: verticalVirtualBrain,
     renderRow: renderRowPinned
   }) : null;
-  const pinnedScrollbarPlaceholder = pinnedList && hasHorizontalScrollbar && !hasOverflow ? /* @__PURE__ */ React31.createElement(HorizontalScrollbarPlaceholder, {
+  const pinnedScrollbarPlaceholder = pinnedList && hasHorizontalScrollbar && !hasOverflow ? /* @__PURE__ */ React30.createElement(HorizontalScrollbarPlaceholder, {
     style: side === "end" ? {
       width: columnsWidth,
       right: hasVerticalScrollbar ? getScrollbarWidth() : 0
@@ -7469,13 +7508,13 @@ function usePinnedStartRendering(params) {
 }
 // src/components/InfiniteTable/hooks/useYourBrain.ts
-var import_react40 = __toModule(require("react"));
+var import_react41 = __toModule(require("react"));
 // src/components/InfiniteTable/hooks/useColumnSizeFn.ts
-var import_react39 = __toModule(require("react"));
+var import_react40 = __toModule(require("react"));
 var debug5 = dbg("useColumnSizeFn");
 function useColumnSizeFn(computedUnpinnedColumns) {
-  const columnSize = (0, import_react39.useCallback)((index) => {
+  const columnSize = (0, import_react40.useCallback)((index) => {
     const column = computedUnpinnedColumns[index];
     if (!column) {
       debug5("cannot find column at index", index, computedUnpinnedColumns);
@@ -7505,13 +7544,13 @@ function useYourBrain(param) {
     globalThis.verticalVirtualBrain = verticalVirtualBrain;
     globalThis.horizontalVirtualBrain = horizontalVirtualBrain;
   }
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     verticalVirtualBrain.setAvailableSize({
       height: bodySize.height,
       width: 0
     });
   }, [bodySize, verticalVirtualBrain]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     horizontalVirtualBrain.setAvailableSize({
       height: 0,
       width: Math.max(bodySize.width - computedPinnedStartWidth - computedPinnedEndWidth, 0)
@@ -7552,7 +7591,7 @@ function useListRendering(param) {
     horizontalVirtualBrain
   } = componentState;
   const prevDataSourceTimestamp = usePrevious(dataSourceState.updatedAt);
-  const repaintIdRef = (0, import_react41.useRef)(0);
+  const repaintIdRef = (0, import_react42.useRef)(0);
   if (prevDataSourceTimestamp !== dataSourceState.updatedAt || !shallowEqualObjects(prevComputed, computed)) {
     repaintIdRef.current++;
   }
@@ -7571,11 +7610,11 @@ function useListRendering(param) {
   const hasHorizontalScrollbar = computedUnpinnedColumnsWidth > bodySize.width - computedPinnedStartColumnsWidth - computedPinnedEndColumnsWidth;
   const reservedContentHeight = verticalVirtualBrain.getTotalSize() + (hasHorizontalScrollbar ? getScrollbarWidth() : 0);
   const hasVerticalScrollbar = bodySize.height > 0 && bodySize.height < reservedContentHeight;
-  const scrollbars = (0, import_react41.useMemo)(() => ({
+  const scrollbars = (0, import_react42.useMemo)(() => ({
     vertical: hasVerticalScrollbar,
     horizontal: hasHorizontalScrollbar
   }), [hasVerticalScrollbar, hasHorizontalScrollbar]);
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (!bodySize.height) {
       return;
     }
@@ -7631,7 +7670,7 @@ function useListRendering(param) {
     computedUnpinnedColumns
   });
   const [, rerender] = useRerender();
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     rerender();
   }, [dataSourceState]);
   const { pinnedStartList, pinnedStartScrollbarPlaceholder } = usePinnedStartRendering(pinnedRenderingParams);
@@ -7654,8 +7693,8 @@ function useListRendering(param) {
 }
 // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
-var React32 = __toModule(require("react"));
-var import_react42 = __toModule(require("react"));
+var React31 = __toModule(require("react"));
+var import_react43 = __toModule(require("react"));
 // src/components/utils/decamelize.ts
 function decamelize(str, options) {
@@ -7690,10 +7729,10 @@ var enforceStyle = (node, style) => {
     node.style.setProperty(decamelize(propertyName), propertyValue, "important");
   }
 };
-var InfiniteTableLicenseFooter = React32.forwardRef(function InfiniteTableLicenseFooter2(props, ref) {
+var InfiniteTableLicenseFooter = React31.forwardRef(function InfiniteTableLicenseFooter2(props, ref) {
   const { rootClassName: rootClassName12 } = useInternalProps();
-  const domRef = React32.useRef(null);
-  const domCallback = React32.useCallback((node) => {
+  const domRef = React31.useRef(null);
+  const domCallback = React31.useCallback((node) => {
     domRef.current = node;
     if (!ref) {
       return;
@@ -7704,7 +7743,7 @@ var InfiniteTableLicenseFooter = React32.forwardRef(function InfiniteTableLicens
       ref.current = node;
     }
   }, []);
-  (0, import_react42.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     const forceStyle = () => {
       requestAnimationFrame(() => {
         var _a;
@@ -7718,12 +7757,12 @@ var InfiniteTableLicenseFooter = React32.forwardRef(function InfiniteTableLicens
       clearInterval(intervalId);
     };
   }, []);
-  return /* @__PURE__ */ React32.createElement("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React31.createElement("div", __spreadProps(__spreadValues({
     ref: domCallback
   }, props), {
     className: join(`${rootClassName12}-Footer`, FooterCls, props.className),
     style: defaultStyle2
-  }), "Powered by", " ", /* @__PURE__ */ React32.createElement("a", {
+  }), "Powered by", " ", /* @__PURE__ */ React31.createElement("a", {
     href: "https://infinite-table.com",
     rel: "noopener noreferrer",
     role: "link",
@@ -7732,7 +7771,7 @@ var InfiniteTableLicenseFooter = React32.forwardRef(function InfiniteTableLicens
 });
 // src/components/InfiniteTable/hooks/useLicense/useLicense.ts
-var import_react43 = __toModule(require("react"));
+var import_react44 = __toModule(require("react"));
 // src/components/InfiniteTable/hooks/useLicense/crc32.ts
 var DEFAULT_ReversedPolynomial = 3988292384;
@@ -7890,10 +7929,10 @@ var isInsideSandbox = () => {
 };
 var isInsidePlayground = isInsideSandbox() || isInsideSandpack();
 var useLicense = (licenseKey = "") => {
-  const valid = (0, import_react43.useMemo)(() => {
+  const valid = (0, import_react44.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.2.16"
+      version: "0.2.19"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -7904,8 +7943,8 @@ var useLicense = (licenseKey = "") => {
 };
 // src/components/CSSVariableWatch.tsx
-var React33 = __toModule(require("react"));
-var import_react44 = __toModule(require("react"));
+var React32 = __toModule(require("react"));
+var import_react45 = __toModule(require("react"));
 var error = err("CSSVariableWatch");
 var debug6 = dbg("CSSVariableWatch");
 var WRAPPER_STYLE = {
@@ -7918,15 +7957,15 @@ var WRAPPER_STYLE = {
   overflow: "hidden"
 };
 var useCSSVariableWatch = (params) => {
-  const lastValueRef = (0, import_react44.useRef)(0);
-  const onResize = React33.useCallback(({ height }) => {
+  const lastValueRef = (0, import_react45.useRef)(0);
+  const onResize = React32.useCallback(({ height }) => {
     if (height && height !== lastValueRef.current) {
       lastValueRef.current = height;
       params.onChange(height);
     }
   }, [params.onChange]);
   useResizeObserver(params.ref, onResize, { earlyAttach: true });
-  React33.useLayoutEffect(() => {
+  React32.useLayoutEffect(() => {
     const value = params.ref.current.getBoundingClientRect().height;
     if (value) {
       lastValueRef.current = value;
@@ -7938,15 +7977,15 @@ var useCSSVariableWatch = (params) => {
   }, []);
 };
 var CSSVariableWatch = (props) => {
-  const domRef = (0, import_react44.useRef)(null);
+  const domRef = (0, import_react45.useRef)(null);
   useCSSVariableWatch(__spreadProps(__spreadValues({}, props), {
     ref: domRef
   }));
-  return /* @__PURE__ */ React33.createElement("div", {
+  return /* @__PURE__ */ React32.createElement("div", {
     "data-name": "css-variable-watcher",
     "data-var": props.varName,
     style: WRAPPER_STYLE
-  }, /* @__PURE__ */ React33.createElement("div", {
+  }, /* @__PURE__ */ React32.createElement("div", {
     ref: domRef,
     style: {
       height: props.varName.startsWith("var(") ? props.varName : `var(${props.varName})`
@@ -8039,7 +8078,7 @@ function useDOMProps(initialDOMProps) {
 }
 // src/components/InfiniteTable/components/LoadMask.tsx
-var React34 = __toModule(require("react"));
+var React33 = __toModule(require("react"));
 // src/components/InfiniteTable/components/LoadMask.css.ts
 var LoadMaskCls = { visible: "qy58ya1 qy58ya0 _16lm1iw2 _16lm1iwr _16lm1iwt _16lm1iwx _16lm1iwv", hidden: "qy58ya2 qy58ya0 _16lm1iw2 _16lm1iwr _16lm1iwt _16lm1iwx _16lm1iwv" };
@@ -8051,18 +8090,18 @@ var { rootClassName: rootClassName11 } = internalProps;
 var baseCls = `${rootClassName11}-LoadMask`;
 function LoadMaskFn(props) {
   const { visible, children = "Loading" } = props;
-  return /* @__PURE__ */ React34.createElement("div", {
+  return /* @__PURE__ */ React33.createElement("div", {
     className: `${LoadMaskCls[visible ? "visible" : "hidden"]} ${baseCls}`
-  }, /* @__PURE__ */ React34.createElement("div", {
+  }, /* @__PURE__ */ React33.createElement("div", {
     className: `${LoadMaskOverlayCls} ${baseCls}-Overlay`
-  }), /* @__PURE__ */ React34.createElement("div", {
+  }), /* @__PURE__ */ React33.createElement("div", {
     className: `${LoadMaskTextCls} ${baseCls}-Text`
   }, children));
 }
-var LoadMask = React34.memo(LoadMaskFn);
+var LoadMask = React33.memo(LoadMaskFn);
 // src/components/InfiniteTable/hooks/useAutoSizeColumns.ts
-var import_react45 = __toModule(require("react"));
+var import_react46 = __toModule(require("react"));
 var OFFSET = 10;
 function getColumnContentMaxWidths(domRef, options) {
   var _a;
@@ -8127,11 +8166,11 @@ function useAutoSizeColumns() {
       horizontalVirtualBrain
     }
   } = useComponentState();
-  const [refreshId, setRefreshId] = (0, import_react45.useState)(0);
+  const [refreshId, setRefreshId] = (0, import_react46.useState)(0);
   const theKey = typeof autoSizeColumnsKey === "object" ? autoSizeColumnsKey.key : autoSizeColumnsKey;
   const getTheKey = useLatest(theKey);
-  const lastExecutedIdentifierRef = (0, import_react45.useRef)(null);
-  (0, import_react45.useEffect)(() => {
+  const lastExecutedIdentifierRef = (0, import_react46.useRef)(null);
+  (0, import_react46.useEffect)(() => {
     const key = getTheKey();
     if (key == null) {
       return;
@@ -8149,7 +8188,7 @@ function useAutoSizeColumns() {
       removeHorizontal();
     };
   }, [verticalVirtualBrain, horizontalVirtualBrain]);
-  (0, import_react45.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     var _a;
     if (theKey == null) {
       return;
@@ -8210,7 +8249,7 @@ var InfiniteTableRoot = getComponentStateRoot({
   getParentState: () => useDataSource(),
   debugName: "InfiniteTable"
 });
-var InfiniteTableComponent = React35.memo(function InfiniteTableComponent2() {
+var InfiniteTableComponent = React34.memo(function InfiniteTableComponent2() {
   var _a;
   const {
     componentState,
@@ -8257,7 +8296,7 @@ var InfiniteTableComponent = React35.memo(function InfiniteTableComponent2() {
     bodySize,
     computed
   });
-  React35.useEffect(() => {
+  React34.useEffect(() => {
     const dataSourceState = getDataSourceState();
     const onChange = debounce((renderRange) => {
       dataSourceState.notifyRenderRangeChange(renderRange);
@@ -8267,7 +8306,7 @@ var InfiniteTableComponent = React35.memo(function InfiniteTableComponent2() {
   const licenseValid = useLicense(licenseKey);
   const domProps = useDOMProps(componentState.domProps);
   const LoadMaskCmp = (_a = components == null ? void 0 : components.LoadMask) != null ? _a : LoadMask;
-  React35.useLayoutEffect(() => {
+  React34.useLayoutEffect(() => {
     const dataSourceState = getDataSourceState();
     const { onScrollbarsChange } = getInfiniteTableState();
     const { notifyScrollbarsChange } = dataSourceState;
@@ -8276,35 +8315,35 @@ var InfiniteTableComponent = React35.memo(function InfiniteTableComponent2() {
     }
     notifyScrollbarsChange(scrollbars);
   }, [scrollbars]);
-  React35.useEffect(() => {
+  React34.useEffect(() => {
     dataSourceActions.scrollStopDelayUpdatedByTable = scrollStopDelay;
   }, [scrollStopDelay]);
   useAutoSizeColumns();
-  return /* @__PURE__ */ React35.createElement("div", __spreadValues({
+  return /* @__PURE__ */ React34.createElement("div", __spreadValues({
     ref: domRef
-  }, domProps), header ? /* @__PURE__ */ React35.createElement(TableHeaderWrapper, {
+  }, domProps), header ? /* @__PURE__ */ React34.createElement(TableHeaderWrapper, {
     brain: horizontalVirtualBrain,
     repaintId,
     scrollbars
-  }) : null, /* @__PURE__ */ React35.createElement(InfiniteTableBody, null, /* @__PURE__ */ React35.createElement(VirtualScrollContainer, {
+  }) : null, /* @__PURE__ */ React34.createElement(InfiniteTableBody, null, /* @__PURE__ */ React34.createElement(VirtualScrollContainer, {
     ref: scrollerDOMRef,
     onContainerScroll: applyScrollVertical,
     scrollable: ONLY_VERTICAL_SCROLLBAR
-  }, /* @__PURE__ */ React35.createElement("div", {
+  }, /* @__PURE__ */ React34.createElement("div", {
     className: display.flex
-  }, pinnedStartList, centerList, pinnedEndList), /* @__PURE__ */ React35.createElement(SpacePlaceholder, {
+  }, pinnedStartList, centerList, pinnedEndList), /* @__PURE__ */ React34.createElement(SpacePlaceholder, {
     count: dataArray.length,
     width: 0,
     height: reservedContentHeight
-  })), pinnedStartScrollbarPlaceholder, pinnedEndScrollbarPlaceholder, /* @__PURE__ */ React35.createElement(LoadMaskCmp, {
+  })), pinnedStartScrollbarPlaceholder, pinnedEndScrollbarPlaceholder, /* @__PURE__ */ React34.createElement(LoadMaskCmp, {
     visible: loading
-  }, loadingText)), licenseValid ? null : /* @__PURE__ */ React35.createElement(InfiniteTableLicenseFooter, null), /* @__PURE__ */ React35.createElement("div", {
+  }, loadingText)), licenseValid ? null : /* @__PURE__ */ React34.createElement(InfiniteTableLicenseFooter, null), /* @__PURE__ */ React34.createElement("div", {
     ref: portalDOMRef,
     className: join(`${rootClassName}Portal`, zIndex[1e3], position.absolute, top[0], left[0])
-  }), rowHeightCSSVar ? /* @__PURE__ */ React35.createElement(CSSVariableWatch, {
+  }), rowHeightCSSVar ? /* @__PURE__ */ React34.createElement(CSSVariableWatch, {
     varName: rowHeightCSSVar,
     onChange: onRowHeightCSSVarChange
-  }) : null, headerHeightCSSVar ? /* @__PURE__ */ React35.createElement(CSSVariableWatch, {
+  }) : null, headerHeightCSSVar ? /* @__PURE__ */ React34.createElement(CSSVariableWatch, {
     varName: headerHeightCSSVar,
     onChange: onHeaderHeightCSSVarChange
   }) : null);
@@ -8340,25 +8379,25 @@ function InfiniteTableContextProvider() {
     }
     componentActions.bodySize = bodySize;
   }, { earlyAttach: true });
-  React35.useEffect(() => {
+  React34.useEffect(() => {
     return () => {
       componentState.onRowHeightCSSVarChange.destroy();
       componentState.onHeaderHeightCSSVarChange.destroy();
     };
   }, []);
-  React35.useEffect(() => {
+  React34.useEffect(() => {
     if (scrollerDOMRef.current) {
       scrollerDOMRef.current.scrollTop = 0;
     }
   }, [scrollTopKey, scrollerDOMRef]);
   const TableContext2 = getInfiniteTableContext();
-  return /* @__PURE__ */ React35.createElement(TableContext2.Provider, {
+  return /* @__PURE__ */ React34.createElement(TableContext2.Provider, {
     value: contextValue
-  }, /* @__PURE__ */ React35.createElement(InfiniteTableComponent, null));
+  }, /* @__PURE__ */ React34.createElement(InfiniteTableComponent, null));
 }
 function InfiniteTable(props) {
-  const table = /* @__PURE__ */ React35.createElement(InfiniteTableRoot, __spreadValues({}, props), /* @__PURE__ */ React35.createElement(InfiniteTableContextProvider, null));
-  return /* @__PURE__ */ React35.createElement(React35.StrictMode, null, table);
+  const table = /* @__PURE__ */ React34.createElement(InfiniteTableRoot, __spreadValues({}, props), /* @__PURE__ */ React34.createElement(InfiniteTableContextProvider, null));
+  return /* @__PURE__ */ React34.createElement(React34.StrictMode, null, table);
 }
 InfiniteTable.defaultProps = {
   rowHeight: 40,