@infinite-table/infinite-react 0.0.2-canary.2 → 0.0.2-canary.3

package/index.esm.js

@@ -465,14 +465,14 @@ var require_browser = __commonJS({
         } else {
           exports.storage.removeItem("debug");
         }
-      } catch (error2) {
+      } catch (error3) {
       }
     }
     function load() {
       let r;
       try {
         r = exports.storage.getItem("debug");
-      } catch (error2) {
+      } catch (error3) {
       }
       if (!r && typeof process !== "undefined" && "env" in process) {
         r = process.env.DEBUG;
@@ -482,7 +482,7 @@ var require_browser = __commonJS({
     function localstorage() {
       try {
         return localStorage;
-      } catch (error2) {
+      } catch (error3) {
       }
     }
     module.exports = require_common()(exports);
@@ -490,8 +490,8 @@ var require_browser = __commonJS({
     formatters.j = function(v) {
       try {
         return JSON.stringify(v);
-      } catch (error2) {
-        return "[UnexpectedJSONParseError]: " + error2.message;
+      } catch (error3) {
+        return "[UnexpectedJSONParseError]: " + error3.message;
       }
     };
   }
@@ -566,16 +566,13 @@ var require_decamelize = __commonJS({
 // src/components/InfiniteTable/index.tsx
 import {
   StrictMode,
-  createElement as createElement32,
-  memo as memo12,
-  useEffect as useEffect21
+  createElement as createElement33,
+  memo as memo13,
+  useEffect as useEffect22
 } from "react";
 
-// src/utils/join.ts
-var join = (...args) => args.filter((x) => !!`${x}`).join(" ");
-
 // src/components/InfiniteTable/internalProps.ts
-var rootClassName = "ITable";
+var rootClassName = "Infinite";
 var internalProps = {
   rootClassName
 };
@@ -617,19 +614,6 @@ function buildSubscriptionCallback() {
   return updater;
 }
 
-// src/components/utils/isControlledValue.ts
-function isControlledValue(value) {
-  const controlled = value !== void 0;
-  return controlled;
-}
-
-// src/components/utils/isControlled.ts
-function isControlled(propName, props) {
-  const propValue = props[propName];
-  const controlled = isControlledValue(propValue);
-  return controlled;
-}
-
 // src/components/VirtualBrain/ScrollListener.ts
 var initialScrollPosition = {
   scrollLeft: 0,
@@ -688,25 +672,15 @@ function computeColumnGroupsDepths(columnGroups) {
 }
 
 // src/components/InfiniteTable/state/getInitialState.ts
-function getInitialState(params) {
-  var _a, _b, _c, _d, _e, _f;
-  const { props } = params;
-  const columnGroups = (_a = isControlled("columnGroups", props) ? props.columnGroups : props.defaultColumnGroups) != null ? _a : new Map();
-  const pivotColumnGroups = props.pivotColumnGroups;
-  const collapsedColumnGroups = (_b = isControlled("collapsedColumnGroups", props) ? props.collapsedColumnGroups : props.defaultCollapsedColumnGroups) != null ? _b : new Map();
-  const computedColumnGroups = pivotColumnGroups || columnGroups;
-  const columnGroupsDepthsMap = computeColumnGroupsDepths(computedColumnGroups);
-  const generatedColumns = new Map();
-  const pivotColumns = props.pivotColumns;
+function initSetupState() {
+  const columnsGeneratedForGrouping = new Map();
   return {
-    rowHeightComputed: typeof props.rowHeight === "number" ? props.rowHeight : 0,
-    headerHeight: typeof props.headerHeight === "number" ? props.headerHeight : 0,
+    columnShifts: null,
     domRef: createRef(),
-    bodyDOMRef: createRef(),
+    scrollerDOMRef: createRef(),
     portalDOMRef: createRef(),
-    bodySizeRef: createRef(),
-    onRowHeightChange: buildSubscriptionCallback(),
-    onHeaderHeightChange: buildSubscriptionCallback(),
+    onRowHeightCSSVarChange: buildSubscriptionCallback(),
+    onHeaderHeightCSSVarChange: buildSubscriptionCallback(),
     bodySize: {
       width: 0,
       height: 0
@@ -715,65 +689,105 @@ function getInitialState(params) {
       scrollTop: 0,
       scrollLeft: 0
     },
+    focused: false,
+    focusedWithin: false,
+    columnsWhenGrouping: columnsGeneratedForGrouping,
     draggingColumnId: null,
-    columns: props.columns,
-    pivotColumns,
-    pivotColumnGroups,
-    generatedColumns,
-    columnOrder: (_c = isControlled("columnOrder", props) ? props.columnOrder : props.defaultColumnOrder) != null ? _c : true,
-    computedColumnGroups,
     pinnedStartScrollListener: new ScrollListener(),
     pinnedEndScrollListener: new ScrollListener(),
-    columnGroups,
-    collapsedColumnGroups,
-    columnGroupsDepthsMap,
-    columnGroupsMaxDepth: Math.max(...columnGroupsDepthsMap.values(), 0),
-    columnVisibility: (_d = isControlled("columnVisibility", props) ? props.columnVisibility : props.defaultColumnVisibility) != null ? _d : new Map(),
-    columnPinning: (_e = isControlled("columnPinning", props) ? props.columnPinning : props.defaultColumnPinning) != null ? _e : new Map(),
-    columnAggregations: (_f = isControlled("columnAggregations", props) ? props.columnAggregations : props.defaultColumnAggregations) != null ? _f : new Map(),
-    columnShifts: null,
-    computedPivotColumns: void 0
+    computedPivotColumns: void 0,
+    columnsWhenInlineGroupRenderStrategy: void 0
+  };
+}
+var forwardProps = () => {
+  return {
+    columns: 1,
+    components: 1,
+    loadingText: 1,
+    pivotColumns: 1,
+    groupColumn: 1,
+    onReady: 1,
+    domProps: 1,
+    focusedClassName: 1,
+    focusedWithinClassName: 1,
+    focusedStyle: 1,
+    focusedWithinStyle: 1,
+    onSelfFocus: 1,
+    onFocusWithin: 1,
+    onSelfBlur: 1,
+    onBlurWithin: 1,
+    onScrollToTop: 1,
+    onScrollToBottom: 1,
+    scrollToBottomOffset: 1,
+    rowStyle: 1,
+    rowProps: 1,
+    rowClassName: 1,
+    pinnedStartMaxWidth: 1,
+    pinnedEndMaxWidth: 1,
+    pivotColumn: 1,
+    pivotRowLabelsColumn: 1,
+    pivotColumnGroups: 1,
+    activeIndex: (activeIndex) => activeIndex != null ? activeIndex : 0,
+    columnMinWidth: (columnMinWidth) => columnMinWidth != null ? columnMinWidth : 30,
+    columnMaxWidth: (columnMaxWidth) => columnMaxWidth != null ? columnMaxWidth : 2e3,
+    columnDefaultWidth: (columnDefaultWidth) => columnDefaultWidth != null ? columnDefaultWidth : 300,
+    draggableColumns: (draggableColumns) => draggableColumns != null ? draggableColumns : true,
+    sortable: (sortable) => sortable != null ? sortable : true,
+    hideEmptyGroupColumns: (hideEmptyGroupColumns) => hideEmptyGroupColumns != null ? hideEmptyGroupColumns : false,
+    pivotTotalColumnPosition: (pivotTotalColumnPosition) => pivotTotalColumnPosition != null ? pivotTotalColumnPosition : "end",
+    licenseKey: (licenseKey) => licenseKey || globalThis.InfiniteTableLicenseKey || "",
+    columnOrder: (columnOrder) => columnOrder != null ? columnOrder : true,
+    header: (header) => header != null ? header : true,
+    showZebraRows: (showZebraRows) => showZebraRows != null ? showZebraRows : true,
+    showHoverRows: (showHoverRows) => showHoverRows != null ? showHoverRows : true,
+    virtualizeColumns: (virtualizeColumns) => virtualizeColumns != null ? virtualizeColumns : true,
+    rowHeight: (rowHeight) => typeof rowHeight === "number" ? rowHeight : 0,
+    headerHeight: (headerHeight) => typeof headerHeight === "number" ? headerHeight : 0,
+    columnVisibility: (columnVisibility) => columnVisibility != null ? columnVisibility : new Map(),
+    columnPinning: (columnPinning) => columnPinning != null ? columnPinning : new Map(),
+    columnAggregations: (columnAggregations) => columnAggregations != null ? columnAggregations : new Map(),
+    collapsedColumnGroups: (collapsedColumnGroups) => collapsedColumnGroups != null ? collapsedColumnGroups : new Map(),
+    columnGroups: (columnGroups) => columnGroups != null ? columnGroups : new Map()
   };
+};
+function getGroupRenderStrategy(options) {
+  const { groupRowsBy, groupColumn, groupRenderStrategy } = options;
+  if (groupRenderStrategy) {
+    return groupRenderStrategy;
+  }
+  if (groupColumn != null && typeof groupColumn === "object") {
+    return "single-column";
+  }
+  const columnsInGroupRowsBy = groupRowsBy.filter((g) => g.column);
+  if (columnsInGroupRowsBy.length) {
+    return "multi-column";
+  }
+  return "multi-column";
 }
-function deriveReadOnlyState(params) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-  const { props, state, updated } = params;
-  const virtualizeColumns = (_a = props.virtualizeColumns) != null ? _a : true;
-  const header = (_b = props.header) != null ? _b : true;
+var mapPropsToState = (params) => {
+  const { props, state, oldState, parentState } = params;
+  const { virtualizeColumns, header } = state;
   const computedColumnGroups = state.pivotColumnGroups || state.columnGroups;
   const virtualizeHeader = header && virtualizeColumns && (!computedColumnGroups || (computedColumnGroups == null ? void 0 : computedColumnGroups.size) === 0);
-  const columnGroupsDepthsMap = (updated == null ? void 0 : updated.columnGroups) || (updated == null ? void 0 : updated.pivotColumnGroups) ? computeColumnGroupsDepths(computedColumnGroups) : state.columnGroupsDepthsMap;
-  const pivotTotalColumnPosition = (_c = props.pivotTotalColumnPosition) != null ? _c : "end";
+  const columnGroupsDepthsMap = state.columnGroups && state.columnGroups != (oldState == null ? void 0 : oldState.columnGroups) || state.pivotColumnGroups && state.pivotColumnGroups != (oldState == null ? void 0 : oldState.pivotColumnGroups) ? computeColumnGroupsDepths(computedColumnGroups) : state.columnGroupsDepthsMap;
+  const groupRowsBy = parentState == null ? void 0 : parentState.groupRowsBy;
+  const groupRenderStrategy = getGroupRenderStrategy({
+    groupRenderStrategy: props.groupRenderStrategy,
+    groupRowsBy,
+    groupColumn: props.groupColumn
+  });
   return {
-    groupColumn: props.groupColumn,
-    onReady: props.onReady,
-    domProps: props.domProps,
-    showZebraRows: (_d = props.showZebraRows) != null ? _d : true,
-    virtualizeColumns,
+    groupRenderStrategy,
+    groupRowsBy,
+    computedColumns: state.computedPivotColumns || state.columnsWhenGrouping || state.columnsWhenInlineGroupRenderStrategy || props.columns,
     virtualizeHeader,
-    header,
-    rowStyle: props.rowStyle,
-    rowProps: props.rowProps,
-    rowClassName: props.rowClassName,
-    pinnedStartMaxWidth: props.pinnedStartMaxWidth,
-    pinnedEndMaxWidth: props.pinnedEndMaxWidth,
-    groupRenderStrategy: (_e = props.groupRenderStrategy) != null ? _e : "multi-column",
-    pivotTotalColumnPosition,
-    columnMinWidth: (_f = props.columnMinWidth) != null ? _f : 30,
-    columnMaxWidth: (_g = props.columnMaxWidth) != null ? _g : 2e3,
-    columnDefaultWidth: (_h = props.columnDefaultWidth) != null ? _h : 300,
-    draggableColumns: (_i = props.draggableColumns) != null ? _i : true,
-    pivotColumn: props.pivotColumn,
-    pivotRowLabelsColumn: props.pivotRowLabelsColumn,
-    sortable: (_j = props.sortable) != null ? _j : true,
     columnGroupsDepthsMap,
-    columnGroupsMaxDepth: Math.max(...columnGroupsDepthsMap.values(), 0),
+    columnGroupsMaxDepth: columnGroupsDepthsMap != state.columnGroupsDepthsMap ? Math.max(...columnGroupsDepthsMap.values(), 0) : state.columnGroupsMaxDepth,
     computedColumnGroups,
-    licenseKey: props.licenseKey || globalThis.InfiniteTableLicenseKey || "",
     rowHeightCSSVar: typeof props.rowHeight === "string" ? props.rowHeight : "",
-    headerHeightCSSVar: typeof props.headerHeight === "string" ? props.headerHeight : ""
+    headerHeightCSSVar: typeof props.headerHeight === "string" ? props.headerHeight || "--ITableHeader__height" : ""
   };
-}
+};
 
 // src/components/ResizeObserver/index.tsx
 import {
@@ -1042,10 +1056,34 @@ var adjustColumnOrderForPinning = (columnOrder, columnPinning) => {
   return columnOrder;
 };
 
-// src/components/InfiniteTable/utils/getComputedVisibleColumns.ts
-var IS_GROUP_COLUMN_ID = (columnId) => {
-  return columnId.startsWith("group-by");
+// src/utils/debug.ts
+var debug = require_browser();
+var debugTable = debug(`InfiniteTable`);
+var dbg = (channelName) => {
+  const result = debugTable.extend(channelName);
+  result.log = console.log.bind(console);
+  return result;
+};
+var err = (channelName) => {
+  const result = debugTable.extend(`${channelName}:error`);
+  result.log = console.error.bind(console);
+  return result;
+};
+var emptyLogFn = () => emptyLogFn;
+emptyLogFn.extend = () => emptyLogFn;
+var Logger = class {
+  constructor(channelName) {
+    this.debug = emptyLogFn;
+    this.error = emptyLogFn;
+    if (false) {
+      this.debug = dbg(channelName);
+      this.error = err(channelName);
+    }
+  }
 };
+
+// src/components/InfiniteTable/utils/getComputedVisibleColumns.ts
+var error = err("getComputedVisibleColumns");
 var isColumnVisible = (columnVisibility, _columnVisibilityAssumeVisible, colId) => {
   return !columnVisibility.has(colId) || columnVisibility.get(colId) !== false;
 };
@@ -1056,7 +1094,6 @@ var getComputedPinned = (colId, columnPinning) => {
 };
 var getComputedVisibleColumns = ({
   columns,
-  generatedColumns,
   bodySize,
   columnMinWidth,
   columnMaxWidth,
@@ -1074,15 +1111,12 @@ var getComputedVisibleColumns = ({
   columnVisibilityAssumeVisible
 }) => {
   let computedOffset = 0;
-  const normalizedColumnOrder = adjustColumnOrderForPinning(columnOrder === true ? Array.from(generatedColumns.keys()).concat(...columns.keys()) : columnOrder, columnPinning);
+  const normalizedColumnOrder = adjustColumnOrderForPinning(columnOrder === true ? [...columns.keys()] : columnOrder, columnPinning);
   const visibleColumnOrder = normalizedColumnOrder.filter(isColumnVisible.bind(null, columnVisibility, columnVisibilityAssumeVisible));
   const columnsArray = visibleColumnOrder.map((columnId) => {
     let col = columns.get(columnId);
     if (!col) {
-      col = generatedColumns.get(columnId);
-      if (!col && !IS_GROUP_COLUMN_ID(columnId)) {
-        throw `Column with id "${columnId}" specified in columnOrder array cannot be found in the columns map.`;
-      }
+      error(`Column with id "${columnId}" specified in columnOrder array cannot be found in the columns map.`);
     }
     return col;
   }).filter(Boolean);
@@ -1326,13 +1360,13 @@ function interceptMap(map, fns) {
 // src/components/InfiniteTable/utils/rafFn.ts
 var rafFn = (fn) => {
   let rafId = 0;
-  return () => {
+  return (...args) => {
     if (rafId) {
       cancelAnimationFrame(rafId);
     }
     rafId = requestAnimationFrame(() => {
       rafId = 0;
-      fn();
+      fn(...args);
     });
   };
 };
@@ -1354,7 +1388,6 @@ var useRerenderOnKeyChange = (map) => {
 // src/components/InfiniteTable/hooks/useComputedVisibleColumns.ts
 var useComputedVisibleColumns = ({
   columns,
-  generatedColumns,
   bodySize,
   columnMinWidth,
   columnMaxWidth,
@@ -1392,7 +1425,6 @@ var useComputedVisibleColumns = ({
   } = useMemo2(() => {
     return getComputedVisibleColumns({
       columns,
-      generatedColumns,
       bodySize,
       columnMinWidth,
       columnMaxWidth,
@@ -1411,7 +1443,6 @@ var useComputedVisibleColumns = ({
     });
   }, [
     columns,
-    generatedColumns,
     bodySize.width,
     columnMinWidth,
     columnMaxWidth,
@@ -1493,46 +1524,62 @@ import {
   memo,
   useContext as useContext3
 } from "react";
-import { useReducer, createContext as createContext3, useMemo as useMemo3, useEffect as useEffect4, useState as useState2 } from "react";
+import {
+  useReducer,
+  createContext as createContext3,
+  useMemo as useMemo3,
+  useEffect as useEffect4,
+  useState as useState2,
+  useRef as useRef4
+} from "react";
 
-// src/utils/debug.ts
-var debug = require_browser();
-var debugTable = debug(`InfiniteTable`);
-var dbg = (channelName) => {
-  const result = debugTable.extend(channelName);
-  result.log = console.log.bind(console);
-  return result;
-};
-var err = (channelName) => {
-  const result = debugTable.extend(`${channelName}:error`);
-  result.log = console.error.bind(console);
-  return result;
-};
-var emptyLogFn = () => emptyLogFn;
-emptyLogFn.extend = () => emptyLogFn;
-var Logger = class {
-  constructor(channelName) {
-    this.debug = emptyLogFn;
-    this.error = emptyLogFn;
-    if (false) {
-      this.debug = dbg(channelName);
-      this.error = err(channelName);
-    }
+// src/utils/proxyFnCall.ts
+function proxyFn(fn, config) {
+  const propertyReads = new Set();
+  function proxiedFn(...params) {
+    const paramToProxy = config ? config.getProxyTargetFromArgs(...params) : params[0];
+    propertyReads.clear();
+    const handler = {
+      get: function(obj, prop) {
+        propertyReads.add(prop);
+        return obj[prop];
+      }
+    };
+    const proxy = new Proxy(paramToProxy, handler);
+    const newParams = config ? config.putProxyToArgs(proxy, ...params) : [proxy];
+    return fn.apply(this, newParams);
   }
-};
+  return {
+    fn: proxiedFn,
+    propertyReads
+  };
+}
 
 // src/utils/toUpperFirst.ts
 var toUpperFirst = (s) => {
   return s ? s.substr(0, 1).toUpperCase() + s.substr(1) : s;
 };
 
-// src/components/hooks/useLatest.ts
+// src/components/utils/isControlledValue.ts
+function isControlledValue(value) {
+  const controlled = value !== void 0;
+  return controlled;
+}
+
+// src/components/utils/isControlled.ts
+function isControlled(propName, props) {
+  const propValue = props[propName];
+  const controlled = isControlledValue(propValue);
+  return controlled;
+}
+
+// src/components/hooks/useLatest.tsx
 import { useCallback as useCallback3, useRef as useRef2 } from "react";
-var useLatest = (value) => {
+function useLatest(value) {
   const ref = useRef2(value);
   ref.current = value;
   return useCallback3(() => ref.current, []);
-};
+}
 
 // src/components/hooks/usePrevious.ts
 import { useRef as useRef3, useLayoutEffect as useLayoutEffect2 } from "react";
@@ -1561,18 +1608,33 @@ function getComponentStateContext() {
   }
   return ComponentContext = createContext3(null);
 }
-function getReducerActions(dispatch, state, getProps) {
+function getReducerActions(dispatch, getState, getProps, propsToForward, allowedControlledPropOverrides) {
+  const state = getState();
   return Object.keys(state).reduce((actions, stateKey) => {
     const key = stateKey;
     const setter = (value) => {
       const props = getProps();
+      const state2 = getState();
+      const currentValue = state2[key];
+      if (currentValue === value) {
+        return;
+      }
       notifyChange(props, stateKey, value);
-      if (isControlled(stateKey, props)) {
+      const forwardFn = propsToForward[key];
+      if (typeof forwardFn === "function") {
+        value = forwardFn(value);
+      }
+      const allowControlled = !!(allowedControlledPropOverrides == null ? void 0 : allowedControlledPropOverrides[key]);
+      if (isControlled(stateKey, props) && !allowControlled) {
         return;
       }
       dispatch({
-        propertyName: stateKey,
-        payload: value
+        payload: {
+          updatedProps: null,
+          mappedState: {
+            [stateKey]: value
+          }
+        }
       });
     };
     Object.defineProperty(actions, stateKey, {
@@ -1581,116 +1643,152 @@ function getReducerActions(dispatch, state, getProps) {
     return actions;
   }, {});
 }
+function forwardProps2(propsToForward, props) {
+  const mappedState = {};
+  for (let k in propsToForward)
+    if (propsToForward.hasOwnProperty(k)) {
+      const forwardFn = propsToForward[k];
+      let propValue = isControlled(k, props) ? props[k] : props[`default${toUpperFirst(k)}`];
+      if (typeof forwardFn === "function") {
+        propValue = forwardFn(propValue);
+      }
+      mappedState[k] = propValue;
+    }
+  return mappedState;
+}
 function getComponentStateRoot(config) {
   return memo(function ComponentStateRoot(props) {
-    var _a;
-    const getParentState = config.getParentState;
-    const parentState = (_a = getParentState == null ? void 0 : getParentState()) != null ? _a : null;
-    const [{ state: wholeState, initialState }] = useState2(() => {
-      let initialState2 = config.getInitialState({
-        props,
-        parentState
-      });
-      if (config.deriveReadOnlyState) {
-        const readOnlyState = config.deriveReadOnlyState({
+    var _a, _b;
+    const propsToStateSetRef = useRef4(new Set());
+    const propsToForward = useMemo3(() => config.forwardProps ? config.forwardProps() : {}, []);
+    const parentState = (_b = (_a = config.getParentState) == null ? void 0 : _a.call(config)) != null ? _b : null;
+    const getParentState = useLatest(parentState);
+    const [wholeState] = useState2(() => {
+      const initialSetupState = config.initSetupState ? config.initSetupState() : {};
+      let mappedState = {};
+      if (propsToForward) {
+        mappedState = forwardProps2(propsToForward, props);
+      }
+      const state2 = __spreadValues(__spreadValues({}, initialSetupState), mappedState);
+      if (config.mapPropsToState) {
+        const { fn: mapPropsToState3, propertyReads } = proxyFn(config.mapPropsToState, {
+          getProxyTargetFromArgs: (initialArg) => initialArg.props,
+          putProxyToArgs: (props2, initialArg) => {
+            return [__spreadProps(__spreadValues({}, initialArg), { props: props2 })];
+          }
+        });
+        propsToStateSetRef.current = new Set([
+          ...propsToStateSetRef.current,
+          ...propertyReads
+        ]);
+        const stateFromProps = mapPropsToState3({
           props,
-          state: initialState2,
-          updated: null,
+          state: state2,
+          oldState: null,
           parentState
         });
-        return {
-          state: __spreadValues(__spreadValues({}, initialState2), readOnlyState),
-          initialState: initialState2,
-          readOnlyState
-        };
+        return __spreadValues(__spreadValues({}, state2), stateFromProps);
       }
-      return {
-        initialState: initialState2,
-        readOnlyState: {},
-        state: initialState2
-      };
+      return state2;
     });
     const getProps = useLatest(props);
-    const theReducer = (state2, action) => {
-      const previousState = state2;
-      let newState = null;
-      if (action.propertyName) {
-        newState = {
-          [action.propertyName]: action.payload
-        };
-      }
-      if (action.newControlledProps) {
-        newState = action.payload;
-      }
-      if (newState !== null) {
-        state2 = __spreadValues(__spreadValues({}, state2), newState);
-      }
-      if (config.deriveReadOnlyState) {
-        const derivedState = config.deriveReadOnlyState({
+    const theReducer = (previousState, action) => {
+      var _a2;
+      const parentState2 = (_a2 = getParentState == null ? void 0 : getParentState()) != null ? _a2 : null;
+      const mappedState = action.payload.mappedState;
+      const updatedProps = action.payload.updatedProps;
+      const newState = Object.assign({}, previousState);
+      if (mappedState) {
+        Object.assign(newState, mappedState);
+      }
+      if (config.mapPropsToState) {
+        const { fn: mapPropsToState3, propertyReads } = proxyFn(config.mapPropsToState, {
+          getProxyTargetFromArgs: (initialArg) => initialArg.props,
+          putProxyToArgs: (props2, initialArg) => {
+            return [__spreadProps(__spreadValues({}, initialArg), { props: props2 })];
+          }
+        });
+        propsToStateSetRef.current = new Set([
+          ...propsToStateSetRef.current,
+          ...propertyReads
+        ]);
+        const stateFromProps = mapPropsToState3({
           props: getProps(),
-          state: state2,
-          updated: newState,
-          parentState
+          state: newState,
+          oldState: previousState,
+          parentState: parentState2
         });
-        state2 = __spreadValues(__spreadValues({}, state2), derivedState);
+        Object.assign(newState, stateFromProps);
       }
       const result = config.concludeReducer ? config.concludeReducer({
         previousState,
-        state: state2,
-        updated: newState,
-        parentState
-      }) : state2;
+        state: newState,
+        updatedProps,
+        parentState: parentState2
+      }) : newState;
       return result;
     };
     const [state, dispatch] = useReducer(theReducer, wholeState);
-    const userDefinedActions = useMemo3(() => {
-      var _a2, _b;
-      return (_b = (_a2 = config.getReducerActions) == null ? void 0 : _a2.call(config, dispatch)) != null ? _b : {};
-    }, [dispatch]);
+    const getComponentState = useLatest(state);
+    const { allowedControlledPropOverrides } = config;
     const actions = useMemo3(() => {
-      const generatedActions = getReducerActions(dispatch, initialState, getProps);
-      return Object.assign(generatedActions, userDefinedActions);
-    }, [dispatch, userDefinedActions]);
+      const generatedActions = getReducerActions(dispatch, getComponentState, getProps, propsToForward, allowedControlledPropOverrides);
+      return generatedActions;
+    }, [
+      dispatch,
+      propsToForward,
+      allowedControlledPropOverrides
+    ]);
     const Context = getComponentStateContext();
-    const getComponentState = useLatest(state);
     const contextValue = useMemo3(() => ({
       componentState: state,
       componentActions: actions,
-      getComponentState,
-      updateStateProperty: (propertyName, propertyValue) => {
-        dispatch({
-          propertyName,
-          payload: propertyValue
-        });
-      }
+      getComponentState
     }), [state, actions, getComponentState]);
     const prevProps = usePrevious(props);
     useEffect4(() => {
       const currentProps = props;
-      const updatedStateFromProps = {};
-      let updatedCount = 0;
-      for (var k in wholeState) {
+      const newMappedState = {};
+      let newMappedStateCount = 0;
+      const updatedProps = {};
+      let updatedPropsCount = 0;
+      for (var k in props) {
         const key = k;
-        if (wholeState.hasOwnProperty(k) && isControlled(key, props)) {
-          const oldValue = prevProps[key];
-          let newValue = currentProps[key];
-          if (oldValue !== newValue) {
-            if (config.onControlledPropertyChange) {
-              const modifier = config.onControlledPropertyChange(k, newValue, oldValue);
-              if (typeof modifier === "function") {
-                newValue = modifier(newValue, oldValue);
-              }
+        const oldValue = prevProps[key];
+        const newValue = currentProps[key];
+        if (key === "children") {
+          continue;
+        }
+        if (oldValue === newValue) {
+          continue;
+        }
+        if (isControlled(key, props)) {
+          if (propsToForward.hasOwnProperty(k)) {
+            let valueToSet = newValue;
+            const forwardFn = propsToForward[k];
+            if (typeof forwardFn === "function") {
+              valueToSet = forwardFn(newValue);
             }
-            updatedStateFromProps[key] = newValue;
-            updatedCount++;
+            if (state[key] !== valueToSet) {
+              newMappedState[key] = valueToSet;
+              newMappedStateCount++;
+            }
+          } else if (propsToStateSetRef.current.has(k)) {
+            updatedProps[key] = currentProps[key];
+            updatedPropsCount++;
           }
         }
       }
-      if (updatedCount > 0) {
-        debug2("Triggered by new values for the following props", updatedStateFromProps);
+      if (updatedPropsCount > 0 || newMappedStateCount > 0) {
+        debug2("Triggered by new values for the following props", ...[
+          ...Object.keys(newMappedState != null ? newMappedState : {}),
+          ...Object.keys(updatedProps != null ? updatedProps : {})
+        ]);
         dispatch({
-          newControlledProps: true,
-          payload: updatedStateFromProps
+          payload: {
+            mappedState: newMappedStateCount ? newMappedState : null,
+            updatedProps: updatedPropsCount ? updatedProps : null
+          }
         });
       }
     });
@@ -1717,7 +1815,7 @@ function useColumnAggregations() {
       const componentState = getComponentState();
       columnAggregations.forEach((aggregator, key) => {
         var _a;
-        const colField = (_a = componentState.columns.get(key)) == null ? void 0 : _a.field;
+        const colField = (_a = componentState.computedColumns.get(key)) == null ? void 0 : _a.field;
         const newAggregator = __spreadValues({
           getter: (data) => colField ? data[colField] : data
         }, aggregator);
@@ -1802,62 +1900,352 @@ function useColumnGroups() {
   }, [collapsedColumnGroups]);
 }
 
-// src/components/InfiniteTable/hooks/useGeneratedGroupAndPivotColumns.ts
-import { useCallback as useCallback4, useEffect as useEffect8 } from "react";
+// src/components/InfiniteTable/hooks/useColumnsWhen.ts
+import { useEffect as useEffect8, useMemo as useMemo5 } from "react";
 
-// src/components/DataSource/index.tsx
+// src/components/InfiniteTable/state/getComputedPivotColumnsFromDataSourcePivotColumns.tsx
 import {
-  Fragment,
-  createElement as createElement3
+  createElement as createElement4
 } from "react";
 
-// src/components/DataSource/privateHooks/useLoadData.ts
-import { useLayoutEffect as useLayoutEffect3 } from "react";
+// src/utils/join.ts
+var join = (...args) => args.filter((x) => !!`${x}`).join(" ");
 
-// src/components/DataSource/privateHooks/buildDataSourceDataInfo.ts
-function buildDataSourceDataInfo(dataParam) {
-  let dataArray = [];
-  if (Array.isArray(dataParam.data)) {
-    dataArray = dataParam.data;
-  } else {
-    dataArray = dataParam;
+// src/components/InfiniteTable/components/icons/ExpanderIcon.tsx
+import {
+  createElement as createElement3,
+  useEffect as useEffect7
+} from "react";
+import { useState as useState3 } from "react";
+
+// src/components/InfiniteTable/utilities.css.ts
+var alignItems = { center: "_16lm1iwz", stretch: "_16lm1iw10" };
+var cssEllipsisClassName = "_16lm1iw18 _16lm1iw19 _16lm1iw14";
+var cursor = { pointer: "_16lm1iw9" };
+var display = { flex: "_16lm1iwh", block: "_16lm1iwi", inlineBlock: "_16lm1iwj" };
+var fill = { currentColor: "_16lm1iw5", accentColor: "_16lm1iw6" };
+var flex = { "1": "_16lm1iwa", none: "_16lm1iwb" };
+var flexFlow = { column: "_16lm1iwx", row: "_16lm1iwy" };
+var justifyContent = { center: "_16lm1iw11", start: "_16lm1iw12", end: "_16lm1iw13" };
+var left = { "0": "_16lm1iwr", "100%": "_16lm1iws" };
+var position = { relative: "_16lm1iw1", absolute: "_16lm1iw2", sticky: "_16lm1iw3", fixed: "_16lm1iw4" };
+var top = { "0": "_16lm1iwp", "100%": "_16lm1iwq" };
+var transformTranslateZero = "_16lm1iw8";
+var userSelect = { none: "_16lm1iwk" };
+var willChange = { transform: "_16lm1iw17" };
+var zIndex = { "1": "_16lm1iwc", "10": "_16lm1iwd", "1000": "_16lm1iwe", "10000": "_16lm1iwf", "100000": "_16lm1iwg" };
+
+// src/components/InfiniteTable/components/icons/ExpanderIcon.tsx
+function ExpanderIcon(props) {
+  var _a;
+  const { size = 24 } = props;
+  const style = __spreadValues({}, props.style);
+  const [expanded, setExpanded] = useState3((_a = props.expanded) != null ? _a : props.defaultExpanded);
+  if (expanded) {
+    style.transform = `rotate(90deg)`;
   }
-  return {
-    originalDataArray: dataArray
+  const onClick = () => {
+    var _a2;
+    (_a2 = props.onChange) == null ? void 0 : _a2.call(props, !expanded);
+    if (!isControlled("expanded", props)) {
+      setExpanded(!expanded);
+    }
   };
-}
-
-// src/components/DataSource/privateHooks/loadDataAsync.ts
-function loadDataAsync(data) {
-  return __async(this, null, function* () {
-    if (typeof data === "function") {
-      data = data();
+  useEffect7(() => {
+    if (isControlled("expanded", props)) {
+      setExpanded(props.expanded);
     }
-    return buildDataSourceDataInfo(yield data);
-  });
+  }, [props.expanded]);
+  return /* @__PURE__ */ createElement3("svg", {
+    "data-name": "expander-icon",
+    xmlns: "http://www.w3.org/2000/svg",
+    height: `${size}px`,
+    viewBox: "0 0 24 24",
+    width: `${size}px`,
+    style,
+    onClick,
+    className: join(props.className, fill.currentColor, flex.none, cursor.pointer, expanded ? fill.accentColor : "", "InfiniteIcon", "InfiniteIcon-expander", `InfiniteIcon-expander--${expanded ? "expanded" : "collapsed"}`)
+  }, /* @__PURE__ */ createElement3("path", {
+    d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+  }));
 }
 
-// src/components/DataSource/privateHooks/useLoadData.ts
-function buildDataSourceInfo(data) {
-  return { originalDataArray: data };
-}
-function useLoadData() {
+// src/components/InfiniteTable/state/getComputedPivotColumnsFromDataSourcePivotColumns.tsx
+function getComputedPivotColumnsFromDataSourcePivotColumns(pivotColumns, params) {
+  if (!pivotColumns) {
+    return void 0;
+  }
   const {
-    componentActions: actions,
-    componentState: { data }
-  } = useComponentState();
-  const loadData = (data2) => {
-    let dataSourceInfo = {
-      originalDataArray: []
-    };
-    if (typeof data2 === "function") {
-      data2 = data2();
+    pivotColumn,
+    pivotRowLabelsColumn,
+    pivotBy,
+    groupRowsBy,
+    pivotTotalColumnPosition,
+    toggleGroupRow
+  } = params;
+  const computedPivotColumns = new Map();
+  pivotColumns.forEach((col, key) => {
+    if (col.pivotTotalColumn && pivotTotalColumnPosition === false) {
+      return;
     }
-    if (Array.isArray(data2)) {
-      dataSourceInfo = buildDataSourceInfo(data2);
-      actions.originalDataArray = dataSourceInfo.originalDataArray;
-    } else {
-      actions.loading = true;
+    let column = __spreadValues({}, col);
+    if (pivotColumn) {
+      if (typeof pivotColumn === "function") {
+        column = __spreadValues(__spreadValues({}, column), pivotColumn({
+          column,
+          pivotBy,
+          groupRowsBy
+        }));
+      } else {
+        column = __spreadValues(__spreadValues({}, column), pivotColumn);
+      }
+    }
+    const isPivotRowLabelsColumn = !column.pivotColumn && !column.pivotTotalColumn;
+    if (pivotRowLabelsColumn && isPivotRowLabelsColumn) {
+      if (typeof pivotRowLabelsColumn === "function") {
+        column = __spreadValues(__spreadValues({}, column), pivotRowLabelsColumn({
+          column,
+          pivotBy,
+          groupRowsBy
+        }));
+      } else {
+        column = __spreadValues(__spreadValues({}, column), pivotRowLabelsColumn);
+      }
+    }
+    if (isPivotRowLabelsColumn && !column.render) {
+      column.render = (renderOptions) => {
+        var _a;
+        let { value, rowInfo, column: column2, groupRowsBy: groupRowsBy2 } = renderOptions;
+        if (column2.renderValue) {
+          value = column2.renderValue(renderOptions);
+        }
+        const showExpanderIcon = (((_a = rowInfo.groupKeys) == null ? void 0 : _a.length) || 0) < groupRowsBy2.length;
+        return /* @__PURE__ */ createElement4("div", {
+          className: join(display.flex, alignItems.center),
+          style: {
+            paddingInlineStart: `calc(${rowInfo.groupNesting - 1} * var(--ITableRow-group-column-nesting))`
+          }
+        }, showExpanderIcon ? /* @__PURE__ */ createElement4(ExpanderIcon, {
+          expanded: !rowInfo.collapsed,
+          onChange: () => {
+            toggleGroupRow(rowInfo.groupKeys);
+          }
+        }) : null, /* @__PURE__ */ createElement4("div", {
+          className: cssEllipsisClassName
+        }, value != null ? value : null));
+      };
+    }
+    if (!column.render && column.renderValue) {
+      column.render = (renderOptions) => {
+        return column.renderValue(renderOptions);
+      };
+    }
+    computedPivotColumns.set(key, column);
+  });
+  return computedPivotColumns;
+}
+
+// src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
+import {
+  createElement as createElement5
+} from "react";
+
+// node_modules/@vanilla-extract/recipes/createRuntimeFn/dist/vanilla-extract-recipes-createRuntimeFn.esm.js
+var shouldApplyCompound = (compoundCheck, selections) => {
+  for (const key of Object.keys(compoundCheck)) {
+    if (compoundCheck[key] !== selections[key]) {
+      return false;
+    }
+  }
+  return true;
+};
+var createRuntimeFn = (config) => (options) => {
+  let className = config.defaultClassName;
+  const selections = {
+    ...config.defaultVariants,
+    ...options
+  };
+  for (const variantName in selections) {
+    var _selections$variantNa;
+    const variantSelection = (_selections$variantNa = selections[variantName]) !== null && _selections$variantNa !== void 0 ? _selections$variantNa : config.defaultVariants[variantName];
+    if (variantSelection != null) {
+      let selection = variantSelection;
+      if (typeof selection === "boolean") {
+        selection = selection === true ? "true" : "false";
+      }
+      className += " " + config.variantClassNames[variantName][selection];
+    }
+  }
+  for (const [compoundCheck, compoundClassName] of config.compoundVariants) {
+    if (shouldApplyCompound(compoundCheck, selections)) {
+      className += " " + compoundClassName;
+    }
+  }
+  return className;
+};
+
+// src/components/InfiniteTable/components/InfiniteTableRow/row.css.ts
+var GroupRowExpanderCls = "_7pupv0b";
+var RowClsRecipe = createRuntimeFn({ defaultClassName: "_7pupv00", variantClassNames: { zebra: { false: "_7pupv02", even: "_7pupv03", odd: "_7pupv04" }, groupRow: { true: "_7pupv05", false: "_7pupv06" }, inlineGroupRow: { true: "_7pupv07", false: "_7pupv08" }, showHoverRows: { true: "_7pupv09", false: "_7pupv0a" } }, defaultVariants: {}, compoundVariants: [] });
+var RowHoverCls = "_7pupv01";
+
+// src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
+function getGroupColumnRender({
+  groupIndex,
+  groupRenderStrategy,
+  toggleGroupRow
+}) {
+  return (renderOptions) => {
+    var _a;
+    let { value, rowInfo, column } = renderOptions;
+    if (column.renderValue) {
+      value = column.renderValue(renderOptions);
+    }
+    let groupRowInfo = groupRenderStrategy !== "inline" ? rowInfo : ((_a = rowInfo.parents) == null ? void 0 : _a[groupIndex]) || rowInfo;
+    if (!groupRowInfo) {
+      return null;
+    }
+    const collapsed = groupRowInfo.collapsed;
+    const groupKeys = groupRowInfo.groupKeys;
+    if (groupRenderStrategy === "inline") {
+      if (groupRowInfo.groupCount === 1) {
+        return value;
+      }
+      if (groupRowInfo.groupNesting === groupIndex && collapsed) {
+        return null;
+      }
+    } else {
+      if (!groupRowInfo.isGroupRow) {
+        return null;
+      }
+      if (groupIndex + 1 !== groupRowInfo.groupNesting) {
+        return null;
+      }
+    }
+    return /* @__PURE__ */ createElement5("div", {
+      className: join(display.flex, alignItems.center)
+    }, /* @__PURE__ */ createElement5(ExpanderIcon, {
+      expanded: !collapsed,
+      onChange: () => {
+        toggleGroupRow(groupKeys);
+      }
+    }), /* @__PURE__ */ createElement5("div", {
+      className: cssEllipsisClassName
+    }, value != null ? value : null));
+  };
+}
+function getColumnForGroupBy(options, toggleGroupRow, groupColumnFromProps) {
+  const { groupBy, groupIndex, groupRenderStrategy } = options;
+  let generatedGroupColumn = __spreadValues({
+    header: `Group by ${groupBy.field}`,
+    groupByField: groupBy.field,
+    sortable: false,
+    render: getGroupColumnRender({
+      groupIndex,
+      toggleGroupRow,
+      groupRenderStrategy
+    })
+  }, groupBy.column);
+  if (groupColumnFromProps) {
+    if (typeof groupColumnFromProps === "function") {
+      generatedGroupColumn = __spreadValues(__spreadValues({}, generatedGroupColumn), groupColumnFromProps(options, toggleGroupRow));
+    } else {
+      generatedGroupColumn = __spreadValues(__spreadValues({}, generatedGroupColumn), groupColumnFromProps);
+    }
+  }
+  return generatedGroupColumn;
+}
+function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
+  let generatedGroupColumn = {
+    header: `Group`,
+    groupByField: options.groupRowsBy.map((g) => g.field),
+    sortable: false,
+    render: (renderOptions) => {
+      let { value, rowInfo, column } = renderOptions;
+      if (!rowInfo.isGroupRow) {
+        return null;
+      }
+      if (column.renderValue) {
+        value = column.renderValue(renderOptions);
+      }
+      return /* @__PURE__ */ createElement5("div", {
+        className: join(display.flex, alignItems.center, GroupRowExpanderCls)
+      }, /* @__PURE__ */ createElement5(ExpanderIcon, {
+        expanded: !rowInfo.collapsed,
+        onChange: () => {
+          toggleGroupRow(rowInfo.groupKeys);
+        }
+      }), /* @__PURE__ */ createElement5("div", {
+        className: cssEllipsisClassName
+      }, value != null ? value : null));
+    }
+  };
+  if (groupColumnFromProps) {
+    if (typeof groupColumnFromProps === "function") {
+      generatedGroupColumn = __spreadValues(__spreadValues({}, generatedGroupColumn), groupColumnFromProps(options, toggleGroupRow));
+    } else {
+      generatedGroupColumn = __spreadValues(__spreadValues({}, generatedGroupColumn), groupColumnFromProps);
+    }
+  }
+  return generatedGroupColumn;
+}
+
+// src/components/InfiniteTable/hooks/useToggleGroupRow.ts
+import { useCallback as useCallback4 } from "react";
+
+// src/components/DataSource/index.tsx
+import {
+  Fragment,
+  createElement as createElement6
+} from "react";
+
+// src/components/DataSource/privateHooks/useLoadData.ts
+import { useLayoutEffect as useLayoutEffect3 } from "react";
+
+// src/components/DataSource/privateHooks/buildDataSourceDataInfo.ts
+function buildDataSourceDataInfo(dataParam) {
+  let dataArray = [];
+  if (Array.isArray(dataParam.data)) {
+    dataArray = dataParam.data;
+  } else {
+    dataArray = dataParam;
+  }
+  return {
+    originalDataArray: dataArray
+  };
+}
+
+// src/components/DataSource/privateHooks/loadDataAsync.ts
+function loadDataAsync(data) {
+  return __async(this, null, function* () {
+    if (typeof data === "function") {
+      data = data();
+    }
+    return buildDataSourceDataInfo(yield data);
+  });
+}
+
+// src/components/DataSource/privateHooks/useLoadData.ts
+function buildDataSourceInfo(data) {
+  return { originalDataArray: data };
+}
+function useLoadData() {
+  const {
+    componentActions: actions,
+    componentState: { data }
+  } = useComponentState();
+  const loadData = (data2) => {
+    let dataSourceInfo = {
+      originalDataArray: []
+    };
+    if (typeof data2 === "function") {
+      data2 = data2();
+    }
+    if (Array.isArray(data2)) {
+      dataSourceInfo = buildDataSourceInfo(data2);
+      actions.originalDataArray = dataSourceInfo.originalDataArray;
+    } else {
+      actions.loading = true;
       loadDataAsync(data2).then((dataSourceInfo2) => {
         actions.originalDataArray = dataSourceInfo2.originalDataArray;
         actions.loading = false;
@@ -2253,47 +2641,51 @@ var GroupRowsState = class {
 };
 
 // src/components/DataSource/state/getInitialState.ts
-function getInitialState2(params) {
-  var _a, _b, _c, _d, _e;
-  const { props: initialProps } = params;
-  const dataArray = [];
-  const originalDataArray = [];
-  const sortInfo = normalizeSortInfo(isControlled("sortInfo", initialProps) ? initialProps.sortInfo : initialProps.defaultSortInfo);
-  const groupRowsState = initialProps.groupRowsState || initialProps.defaultGroupRowsState || new GroupRowsState({
-    expandedRows: true,
-    collapsedRows: []
-  });
+function initSetupState2() {
   const now = Date.now();
+  const originalDataArray = [];
+  const dataArray = [];
   return {
-    data: initialProps.data,
-    loading: (_b = (_a = initialProps.loading) != null ? _a : initialProps.defaultLoading) != null ? _b : false,
-    dataArray,
+    pivotTotalColumnPosition: "end",
     originalDataArray,
-    sortInfo,
-    groupRowsState,
+    pivotColumns: void 0,
+    pivotColumnGroups: void 0,
+    dataArray,
     updatedAt: now,
     groupedAt: 0,
     sortedAt: 0,
     reducedAt: now,
-    pivotColumns: void 0,
-    pivotColumnGroups: void 0,
-    groupRowsBy: isControlled("groupRowsBy", initialProps) ? (_c = initialProps.groupRowsBy) != null ? _c : [] : (_d = initialProps.defaultGroupRowsBy) != null ? _d : [],
-    pivotBy: isControlled("pivotBy", initialProps) ? (_e = initialProps.pivotBy) != null ? _e : [] : initialProps.defaultPivotBy,
+    generateGroupRows: true,
     aggregationReducers: void 0,
-    pivotTotalColumnPosition: "end"
+    groupDeepMap: void 0,
+    postSortDataArray: void 0,
+    postGroupDataArray: void 0,
+    lastSortDataArray: void 0,
+    lastGroupDataArray: void 0
   };
 }
-function deriveReadOnlyState2(params) {
+var forwardProps3 = () => {
+  return {
+    remoteCount: 1,
+    data: 1,
+    pivotBy: 1,
+    primaryKey: 1,
+    loading: (loading) => loading != null ? loading : false,
+    sortInfo: (sortInfo) => normalizeSortInfo(sortInfo),
+    groupRowsBy: (groupRowsBy) => groupRowsBy != null ? groupRowsBy : [],
+    groupRowsState: (groupRowsState) => {
+      return groupRowsState || new GroupRowsState({
+        expandedRows: true,
+        collapsedRows: []
+      });
+    }
+  };
+};
+function mapPropsToState2(params) {
   var _a;
-  const { props, state } = params;
-  const sortInfo = isControlled("sortInfo", props) ? props.sortInfo : (_a = props.defaultSortInfo) != null ? _a : null;
+  const { props } = params;
   return {
-    multiSort: Array.isArray(sortInfo),
-    sortInfo: normalizeSortInfo(state.sortInfo),
-    primaryKey: props.primaryKey,
-    groupDeepMap: void 0,
-    postSortDataArray: void 0,
-    postGroupDataArray: void 0
+    multiSort: Array.isArray((_a = props.sortInfo) != null ? _a : props.defaultSortInfo)
   };
 }
 
@@ -2497,7 +2889,7 @@ function flatten(groupResult) {
   return result;
 }
 function getEnhancedGroupData(options, deepMapValue) {
-  const { groupBy, groupKeys, collapsed } = options;
+  const { groupBy, groupKeys, collapsed, parents } = options;
   const groupNesting = groupKeys.length;
   const { items: groupItems, reducerResults, pivotDeepMap } = deepMapValue;
   const enhancedGroupData = {
@@ -2507,6 +2899,10 @@ function getEnhancedGroupData(options, deepMapValue) {
     groupKeys,
     id: groupKeys,
     collapsed,
+    parents,
+    collapsedChildrenCount: 0,
+    collapsedGroupsCount: 0,
+    indexInParentGroups: options.indexInParentGroups,
     indexInGroup: options.indexInGroup,
     indexInAll: options.indexInAll,
     value: groupKeys[groupKeys.length - 1],
@@ -2528,12 +2924,14 @@ function completeReducers(reducers, reducerResults, items) {
   }
   return reducerResults;
 }
-function enhancedFlatten(groupResult, toPrimaryKey, groupRowsState) {
+function enhancedFlatten(param) {
+  const { groupResult, toPrimaryKey, groupRowsState, generateGroupRows } = param;
   const { groupParams, deepMap, pivot } = groupResult;
   const { groupBy } = groupParams;
   const groupByStrings = groupBy.map((g) => g.field);
   const result = [];
   const parents = [];
+  const indexInParentGroups = [];
   deepMap.visitDepthFirst((deepMapValue, groupKeys, indexInGroup, next) => {
     var _a;
     const items = deepMapValue.items;
@@ -2541,12 +2939,24 @@ function enhancedFlatten(groupResult, toPrimaryKey, groupRowsState) {
     const collapsed = (_a = groupRowsState == null ? void 0 : groupRowsState.isGroupRowCollapsed(groupKeys)) != null ? _a : false;
     const enhancedGroupData = getEnhancedGroupData({
       groupBy: groupByStrings,
+      parents: Array.from(parents),
       indexInGroup,
+      indexInParentGroups: Array.from(indexInParentGroups),
       indexInAll: result.length,
       groupKeys,
       collapsed
     }, deepMapValue);
-    result.push(enhancedGroupData);
+    const include = generateGroupRows || collapsed;
+    if (include) {
+      result.push(enhancedGroupData);
+    }
+    if (collapsed) {
+      parents.forEach((parent) => {
+        parent.collapsedChildrenCount += enhancedGroupData.groupCount;
+        parent.collapsedGroupsCount += 1;
+      });
+    }
+    indexInParentGroups.push(indexInGroup);
     parents.push(enhancedGroupData);
     if (!collapsed) {
       if (!next) {
@@ -2558,11 +2968,14 @@ function enhancedFlatten(groupResult, toPrimaryKey, groupRowsState) {
               data: item,
               isGroupRow: false,
               collapsed: false,
-              parentGroupKeys: groupKeys,
+              groupKeys,
+              parents: Array.from(parents),
+              indexInParentGroups: [...indexInParentGroups, index],
               indexInGroup: index,
               indexInAll: startIndex + index,
               groupBy: groupByStrings,
-              groupNesting
+              groupNesting,
+              groupCount: enhancedGroupData.groupCount
             };
           }));
         }
@@ -2571,6 +2984,7 @@ function enhancedFlatten(groupResult, toPrimaryKey, groupRowsState) {
       }
     }
     parents.pop();
+    indexInParentGroups.pop();
   });
   return {
     data: result
@@ -2585,8 +2999,8 @@ function getPivotColumnsAndColumnGroups(deepMap, pivotBy, pivotTotalColumnPositi
         header: "Row labels",
         valueGetter: (params) => {
           var _a;
-          const { enhancedData } = params;
-          return enhancedData.groupKeys ? enhancedData.groupKeys[((_a = enhancedData.groupKeys) == null ? void 0 : _a.length) - 1] : null;
+          const { rowInfo } = params;
+          return rowInfo.groupKeys ? rowInfo.groupKeys[((_a = rowInfo.groupKeys) == null ? void 0 : _a.length) - 1] : null;
         }
       }
     ]
@@ -2607,9 +3021,9 @@ function getPivotColumnsAndColumnGroups(deepMap, pivotBy, pivotTotalColumnPositi
         sortable: false,
         columnGroup: parentKeys.length ? `${columnGroupId}` : void 0,
         header: keys[keys.length - 1],
-        valueGetter: ({ enhancedData }) => {
+        valueGetter: ({ rowInfo }) => {
           var _a, _b, _c;
-          const value = (_c = (_b = (_a = enhancedData.pivotValuesMap) == null ? void 0 : _a.get(keys)) == null ? void 0 : _b.reducerResults[0]) != null ? _c : null;
+          const value = (_c = (_b = (_a = rowInfo.pivotValuesMap) == null ? void 0 : _a.get(keys)) == null ? void 0 : _b.reducerResults[0]) != null ? _c : null;
           return value;
         }
       });
@@ -2628,9 +3042,9 @@ function getPivotColumnsAndColumnGroups(deepMap, pivotBy, pivotTotalColumnPositi
           pivotGroupKeys: keys,
           pivotBy,
           sortable: false,
-          valueGetter: ({ enhancedData }) => {
+          valueGetter: ({ rowInfo }) => {
             var _a, _b, _c;
-            const value = (_c = (_b = (_a = enhancedData.pivotValuesMap) == null ? void 0 : _a.get(keys)) == null ? void 0 : _b.reducerResults[0]) != null ? _c : null;
+            const value = (_c = (_b = (_a = rowInfo.pivotValuesMap) == null ? void 0 : _a.get(keys)) == null ? void 0 : _b.reducerResults[0]) != null ? _c : null;
             return value;
           }
         });
@@ -2643,9 +3057,9 @@ function getPivotColumnsAndColumnGroups(deepMap, pivotBy, pivotTotalColumnPositi
   if (columns.size === 1) {
     columns.set("single", {
       header: "Reduced",
-      valueGetter: ({ enhancedData }) => {
+      valueGetter: ({ rowInfo }) => {
         var _a;
-        return (_a = enhancedData.reducerResults) == null ? void 0 : _a[0];
+        return (_a = rowInfo.reducerResults) == null ? void 0 : _a[0];
       }
     });
   }
@@ -2657,26 +3071,26 @@ function getPivotColumnsAndColumnGroups(deepMap, pivotBy, pivotTotalColumnPositi
 }
 
 // src/components/DataSource/state/reducer.ts
-var haveDepsChanged = (updated, deps) => {
-  if (!updated) {
-    return false;
-  }
-  for (var i = 0, len = deps.length; i < len; i++) {
-    if (updated.hasOwnProperty(deps[i])) {
+var haveDepsChanged = (state1, state2, deps) => {
+  for (let i = 0, len = deps.length; i < len; i++) {
+    const k = deps[i];
+    const oldValue = state1[k];
+    const newValue = state2[k];
+    if (oldValue !== newValue) {
       return true;
     }
   }
   return false;
 };
-function toEnhancedData(data, id, index) {
+function toRowInfo(data, id, index) {
   return { data, collapsed: true, id, indexInAll: index, indexInGroup: index };
 }
 function concludeReducer(params) {
   var _a;
-  const { state, previousState, updated } = params;
+  const { state, previousState } = params;
   const sortInfo = state.sortInfo;
-  const shouldSort = sortInfo == null ? void 0 : sortInfo.length;
-  const sortDepsChanged = haveDepsChanged(updated, [
+  const shouldSort = !!(sortInfo == null ? void 0 : sortInfo.length);
+  const sortDepsChanged = haveDepsChanged(previousState, state, [
     "originalDataArray",
     "sortInfo"
   ]);
@@ -2684,7 +3098,8 @@ function concludeReducer(params) {
   const groupBy = state.groupRowsBy;
   const pivotBy = state.pivotBy;
   const shouldGroup = groupBy.length || pivotBy;
-  const groupsDepsChanged = haveDepsChanged(updated, [
+  const groupsDepsChanged = haveDepsChanged(previousState, state, [
+    "generateGroupRows",
     "originalDataArray",
     "groupRowsBy",
     "groupRowsState",
@@ -2696,7 +3111,7 @@ function concludeReducer(params) {
   const shouldGroupAgain = shouldGroup && (groupsDepsChanged || !state.lastGroupDataArray);
   const now = Date.now();
   let dataArray = state.originalDataArray;
-  let enhancedDataArray = state.dataArray;
+  let rowInfoDataArray = state.dataArray;
   if (shouldSort) {
     dataArray = shouldSortAgain ? multisort(sortInfo, [...dataArray]) : state.lastSortDataArray;
     state.lastSortDataArray = dataArray;
@@ -2714,30 +3129,35 @@ function concludeReducer(params) {
         pivot: pivotBy,
         reducers: state.aggregationReducers
       }, dataArray);
-      const flattenResult = enhancedFlatten(groupResult, toPrimaryKey, state.groupRowsState);
-      enhancedDataArray = flattenResult.data;
+      const flattenResult = enhancedFlatten({
+        groupResult,
+        toPrimaryKey,
+        groupRowsState: state.groupRowsState,
+        generateGroupRows: state.generateGroupRows
+      });
+      rowInfoDataArray = flattenResult.data;
       state.groupDeepMap = groupResult.deepMap;
       const pivotGroupsAndCols = pivotBy ? getPivotColumnsAndColumnGroups(groupResult.topLevelPivotColumns, pivotBy, (_a = state.pivotTotalColumnPosition) != null ? _a : "end") : void 0;
       state.pivotColumns = pivotGroupsAndCols == null ? void 0 : pivotGroupsAndCols.columns;
       state.pivotColumnGroups = pivotGroupsAndCols == null ? void 0 : pivotGroupsAndCols.columnGroups;
     } else {
-      enhancedDataArray = state.lastGroupDataArray;
+      rowInfoDataArray = state.lastGroupDataArray;
     }
-    state.lastGroupDataArray = enhancedDataArray;
+    state.lastGroupDataArray = rowInfoDataArray;
     state.groupedAt = now;
   } else {
     state.groupDeepMap = void 0;
     state.pivotColumns = void 0;
     const arrayDifferentAfterSortStep = previousState.postSortDataArray != state.postSortDataArray;
     if (arrayDifferentAfterSortStep) {
-      enhancedDataArray = dataArray.map((data, index) => toEnhancedData(data, toPrimaryKey(data), index));
+      rowInfoDataArray = dataArray.map((data, index) => toRowInfo(data, toPrimaryKey(data), index));
     }
   }
-  state.postGroupDataArray = enhancedDataArray;
-  if (enhancedDataArray !== state.dataArray) {
+  state.postGroupDataArray = rowInfoDataArray;
+  if (rowInfoDataArray !== state.dataArray) {
     state.updatedAt = now;
   }
-  state.dataArray = enhancedDataArray;
+  state.dataArray = rowInfoDataArray;
   state.reducedAt = now;
   globalThis.state = state;
   return state;
@@ -2756,12 +3176,13 @@ function DataSourceWithContext(props) {
   if (typeof children === "function") {
     children = children(computedValues);
   }
-  return /* @__PURE__ */ createElement3(Fragment, null, children);
+  return /* @__PURE__ */ createElement6(Fragment, null, children);
 }
 var DataSourceRoot = getComponentStateRoot({
-  getInitialState: getInitialState2,
+  initSetupState: initSetupState2,
+  forwardProps: forwardProps3,
   concludeReducer,
-  deriveReadOnlyState: deriveReadOnlyState2
+  mapPropsToState: mapPropsToState2
 });
 function DataSourceCmp({ children }) {
   const DataSourceContext = getDataSourceContext();
@@ -2772,382 +3193,147 @@ function DataSourceCmp({ children }) {
     componentActions,
     getState
   };
+  if (false) {
+    globalThis.getDataSourceState = getState;
+  }
   useLoadData();
-  return /* @__PURE__ */ createElement3(DataSourceContext.Provider, {
+  return /* @__PURE__ */ createElement6(DataSourceContext.Provider, {
     value: contextValue
-  }, /* @__PURE__ */ createElement3(DataSourceWithContext, {
+  }, /* @__PURE__ */ createElement6(DataSourceWithContext, {
     children
   }));
 }
 function DataSource(props) {
-  return /* @__PURE__ */ createElement3(DataSourceRoot, __spreadValues({}, props), /* @__PURE__ */ createElement3(DataSourceCmp, {
+  return /* @__PURE__ */ createElement6(DataSourceRoot, __spreadValues({}, props), /* @__PURE__ */ createElement6(DataSourceCmp, {
     children: props.children
   }));
 }
 
-// src/components/InfiniteTable/state/getComputedPivotColumnsFromDataSourcePivotColumns.tsx
-import {
-  createElement as createElement5
-} from "react";
-
-// src/style/utilities.ts
-var rule = (name, value) => `it__${name}=${value}`;
-var ICSS = {
-  variables: {
-    space: [
-      "--it-space-0",
-      "--it-space-1",
-      "--it-space-2",
-      "--it-space-3",
-      "--it-space-4",
-      "--it-space-5",
-      "--it-space-6",
-      "--it-space-7",
-      "--it-space-8",
-      "--it-space-9",
-      "--it-space-10"
-    ],
-    borderRadius: "--it__border-radius",
-    fontSize: [
-      "--it-font-size-0",
-      "--it-font-size-1",
-      "--it-font-size-2",
-      "--it-font-size-3",
-      "--it-font-size-4",
-      "--it-font-size-5",
-      "--it-font-size-6",
-      "--it-font-size-7"
-    ]
-  },
-  alignItems: {
-    center: rule("align-items", "center"),
-    stretch: rule("align-items", "stretch")
-  },
-  justifyContent: {
-    center: rule("justify-content", "center"),
-    "flex-start": rule("justify-content", "flex-start"),
-    flexStart: rule("justify-content", "flex-start"),
-    "flex-end": rule("justify-content", "flex-end"),
-    flexEnd: rule("justify-content", "flex-end")
-  },
-  overflow: {
-    hidden: rule("overflow", "hidden"),
-    visible: rule("overflow", "visible"),
-    auto: rule("overflow", "auto")
-  },
-  overflowX: {
-    hidden: rule("overflow-x", "hidden"),
-    visible: rule("overflow-x", "visible"),
-    auto: rule("overflow-x", "auto")
-  },
-  overflowY: {
-    hidden: rule("overflow-y", "hidden"),
-    visible: rule("overflow-y", "visible"),
-    auto: rule("overflow-y", "auto")
-  },
-  cursor: {
-    pointer: rule("cursor", "pointer")
-  },
-  height: {
-    0: rule("height", "0"),
-    "100%": rule("height", "100%")
-  },
-  width: {
-    0: rule("width", "0"),
-    "100%": rule("width", "100%")
-  },
-  top: {
-    0: rule("top", "0"),
-    "100%": rule("top", "100%")
-  },
-  left: {
-    0: rule("left", "0"),
-    "100%": rule("left", "100%")
-  },
-  transform: {
-    translate3D000: rule("transform", "translate3D000")
-  },
-  willChange: {
-    transform: rule("will-change", "transform")
-  },
-  position: {
-    relative: rule("position", "relative"),
-    absolute: rule("position", "absolute"),
-    fixed: rule("position", "fixed")
-  },
-  display: {
-    flex: rule("display", "flex")
-  },
-  flexFlow: {
-    row: rule("flex-flow", "row"),
-    column: rule("flex-flow", "column")
-  },
-  whiteSpace: {
-    nowrap: rule("white-space", "nowrap")
-  },
-  textOverflow: {
-    ellipsis: rule("text-overflow", "ellipsis")
-  },
-  userSelect: {
-    none: rule("user-select", "none")
-  }
-};
-
-// src/style/css.ts
-var cssEllipsisClassName = `${ICSS.whiteSpace.nowrap} ${ICSS.textOverflow.ellipsis} ${ICSS.overflow.hidden}`;
-
-// src/components/InfiniteTable/components/icons/ExpanderIcon.tsx
-import {
-  createElement as createElement4,
-  useEffect as useEffect7
-} from "react";
-import { useState as useState3 } from "react";
-function ExpanderIcon(props) {
-  var _a;
-  const { size = 24 } = props;
-  const style = __spreadValues({}, props.style);
-  const [expanded, setExpanded] = useState3((_a = props.expanded) != null ? _a : props.defaultExpanded);
-  if (expanded) {
-    style.transform = `rotate(90deg)`;
-  }
-  const onClick = () => {
-    var _a2;
-    (_a2 = props.onChange) == null ? void 0 : _a2.call(props, !expanded);
-    if (!isControlled("expanded", props)) {
-      setExpanded(!expanded);
-    }
-  };
-  useEffect7(() => {
-    if (isControlled("expanded", props)) {
-      setExpanded(props.expanded);
-    }
-  }, [props.expanded]);
-  return /* @__PURE__ */ createElement4("svg", {
-    "data-name": "expander-icon",
-    xmlns: "http://www.w3.org/2000/svg",
-    height: `${size}px`,
-    viewBox: "0 0 24 24",
-    width: `${size}px`,
-    style,
-    onClick,
-    className: join(props.className, "ITableIcon", "ITableIcon-expander", `ITableIcon-expander--${expanded ? "expanded" : "collapsed"}`)
-  }, /* @__PURE__ */ createElement4("path", {
-    d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
-  }));
+// src/components/InfiniteTable/hooks/useToggleGroupRow.ts
+function useToggleGroupRow() {
+  const { getState: getDataSourceState, componentActions: dataSourceActions } = useDataSourceContextValue();
+  const toggleGroupRow = useCallback4((groupKeys) => {
+    const newState = new GroupRowsState(getDataSourceState().groupRowsState);
+    newState.toggleGroupRow(groupKeys);
+    dataSourceActions.groupRowsState = newState;
+  }, []);
+  return toggleGroupRow;
 }
 
-// src/components/InfiniteTable/state/getComputedPivotColumnsFromDataSourcePivotColumns.tsx
-function getComputedPivotColumnsFromDataSourcePivotColumns(pivotColumns, params) {
-  if (!pivotColumns) {
-    return void 0;
-  }
-  const {
-    pivotColumn,
-    pivotRowLabelsColumn,
-    pivotBy,
-    groupRowsBy,
-    pivotTotalColumnPosition,
-    toggleGroupRow
-  } = params;
-  const computedPivotColumns = new Map();
-  pivotColumns.forEach((col, key) => {
-    if (col.pivotTotalColumn && pivotTotalColumnPosition === false) {
-      return;
-    }
-    let column = __spreadValues({}, col);
-    if (pivotColumn) {
-      if (typeof pivotColumn === "function") {
-        column = __spreadValues(__spreadValues({}, column), pivotColumn({
-          column,
-          pivotBy,
-          groupRowsBy
-        }));
-      } else {
-        column = __spreadValues(__spreadValues({}, column), pivotColumn);
-      }
-    }
-    const isPivotRowLabelsColumn = !column.pivotColumn && !column.pivotTotalColumn;
-    if (pivotRowLabelsColumn && isPivotRowLabelsColumn) {
-      if (typeof pivotRowLabelsColumn === "function") {
-        column = __spreadValues(__spreadValues({}, column), pivotRowLabelsColumn({
-          column,
-          pivotBy,
-          groupRowsBy
-        }));
-      } else {
-        column = __spreadValues(__spreadValues({}, column), pivotRowLabelsColumn);
-      }
-    }
-    if (isPivotRowLabelsColumn && !column.render) {
-      column.render = (renderOptions) => {
-        var _a;
-        let { value, enhancedData, column: column2, groupRowsBy: groupRowsBy2 } = renderOptions;
-        if (column2.renderValue) {
-          value = column2.renderValue(renderOptions);
-        }
-        const showExpanderIcon = (((_a = enhancedData.groupKeys) == null ? void 0 : _a.length) || 0) < groupRowsBy2.length;
-        return /* @__PURE__ */ createElement5("div", {
-          className: join(ICSS.display.flex, ICSS.alignItems.center),
-          style: {
-            paddingInlineStart: `calc(${enhancedData.groupNesting - 1} * var(--ITableRow-group-column-nesting))`
-          }
-        }, showExpanderIcon ? /* @__PURE__ */ createElement5(ExpanderIcon, {
-          expanded: !enhancedData.collapsed,
-          onChange: () => {
-            toggleGroupRow(enhancedData.groupKeys);
-          }
-        }) : null, /* @__PURE__ */ createElement5("div", {
-          className: cssEllipsisClassName
-        }, value != null ? value : null));
-      };
-    }
-    if (!column.render && column.renderValue) {
-      column.render = (renderOptions) => {
-        return column.renderValue(renderOptions);
-      };
-    }
-    computedPivotColumns.set(key, column);
-  });
-  return computedPivotColumns;
+// src/components/InfiniteTable/hooks/useColumnsWhen.ts
+function useGroupRowsMap(groupRowsBy) {
+  const groupRowsMap = useMemo5(() => {
+    return groupRowsBy.reduce((acc, groupBy, index) => {
+      acc.set(groupBy.field, {
+        groupBy,
+        groupIndex: index
+      });
+      return acc;
+    }, new Map());
+  }, [groupRowsBy]);
+  return groupRowsMap;
 }
-
-// src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
-import {
-  createElement as createElement6
-} from "react";
-function getColumnForGroupBy(options, toggleGroupRow, groupColumnFromProps) {
-  const { groupBy, groupIndex } = options;
-  let generatedGroupColumn = __spreadValues({
-    header: `Group by ${groupBy.field}`,
-    groupByField: groupBy.field,
-    sortable: false,
-    render: (renderOptions) => {
-      let { value, enhancedData, column } = renderOptions;
-      if (!enhancedData.isGroupRow) {
-        return null;
-      }
-      if (groupIndex + 1 !== enhancedData.groupNesting) {
-        return null;
-      }
-      if (column.renderValue) {
-        value = column.renderValue(renderOptions);
-      }
-      return /* @__PURE__ */ createElement6("div", {
-        className: join(ICSS.display.flex, ICSS.alignItems.center)
-      }, /* @__PURE__ */ createElement6(ExpanderIcon, {
-        expanded: !enhancedData.collapsed,
-        onChange: () => {
-          toggleGroupRow(enhancedData.groupKeys);
-        }
-      }), /* @__PURE__ */ createElement6("div", {
-        className: cssEllipsisClassName
-      }, value != null ? value : null));
-    }
-  }, groupBy.column);
-  if (groupColumnFromProps) {
-    if (typeof groupColumnFromProps === "function") {
-      generatedGroupColumn = __spreadValues(__spreadValues({}, generatedGroupColumn), groupColumnFromProps(options, toggleGroupRow));
-    } else {
-      generatedGroupColumn = __spreadValues(__spreadValues({}, generatedGroupColumn), groupColumnFromProps);
-    }
-  }
-  return generatedGroupColumn;
+function useColumnsWhen() {
+  const {
+    componentState: { groupRowsBy },
+    componentActions: dataSourceActions
+  } = useDataSourceContextValue();
+  const {
+    componentState: { groupRenderStrategy, pivotTotalColumnPosition }
+  } = useComponentState();
+  const groupRowsMap = useGroupRowsMap(groupRowsBy);
+  useEffect8(() => {
+    dataSourceActions.generateGroupRows = groupRenderStrategy !== "inline";
+  }, [groupRenderStrategy]);
+  useEffect8(() => {
+    dataSourceActions.pivotTotalColumnPosition = pivotTotalColumnPosition;
+  }, [pivotTotalColumnPosition]);
+  useColumnsWhenInlineGroupRenderStrategy(groupRowsMap);
+  useColumnsWhenPivoting();
+  useColumnsWhenGrouping();
+  useHideEmptyGroupColumns(groupRowsMap);
 }
-function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
-  let generatedGroupColumn = {
-    header: `Group`,
-    groupByField: options.groupRowsBy.map((g) => g.field),
-    sortable: false,
-    render: (renderOptions) => {
-      let { value, enhancedData, column } = renderOptions;
-      if (!enhancedData.isGroupRow) {
-        return null;
-      }
-      if (column.renderValue) {
-        value = column.renderValue(renderOptions);
+function useColumnsWhenInlineGroupRenderStrategy(groupRowsMap) {
+  const toggleGroupRow = useToggleGroupRow();
+  const {
+    componentActions,
+    componentState: { columns, groupRenderStrategy }
+  } = useComponentState();
+  function computeColumnsWhenInlineGroupRenderStrategy(columns2, groupRowsMap2, groupRenderStrategy2, toggleGroupRow2) {
+    const computedColumns = new Map();
+    columns2.forEach((column, id) => {
+      let base = {};
+      const groupByForColumn = groupRowsMap2.get(column.field);
+      if (groupByForColumn && groupRenderStrategy2 === "inline") {
+        const { groupIndex } = groupByForColumn;
+        const field = groupByForColumn.groupBy.field;
+        base = {
+          groupByField: field,
+          field,
+          valueGetter: ({ rowInfo }) => {
+            var _a;
+            return (_a = rowInfo.groupKeys) == null ? void 0 : _a[groupIndex];
+          },
+          rowspan: ({ rowInfo, dataArray }) => {
+            const prevRowInfo = dataArray[rowInfo.indexInAll - 1] || {
+              indexInParentGroups: []
+            };
+            const prevIndexes = prevRowInfo.indexInParentGroups || [];
+            const currentIndexes = rowInfo.indexInParentGroups || [];
+            let computeSpan = false;
+            for (let i = 0; i <= groupIndex; i++) {
+              const prev = prevIndexes[i];
+              const current = currentIndexes[i];
+              if (current !== prev) {
+                computeSpan = true;
+                break;
+              }
+            }
+            if (!computeSpan) {
+              return 1;
+            }
+            const parentGroup = rowInfo.parents[groupIndex];
+            const rowspan = parentGroup ? parentGroup.groupCount - (parentGroup.collapsedChildrenCount || 0) + (parentGroup.collapsedGroupsCount || 0) : 1;
+            return rowspan;
+          },
+          render: getGroupColumnRender({
+            groupIndex,
+            groupRenderStrategy: groupRenderStrategy2,
+            toggleGroupRow: toggleGroupRow2
+          })
+        };
       }
-      return /* @__PURE__ */ createElement6("div", {
-        className: join(ICSS.display.flex, ICSS.alignItems.center),
-        style: {
-          paddingInlineStart: `calc(${enhancedData.groupNesting - 1} * var(--ITableRow-group-column-nesting))`
-        }
-      }, /* @__PURE__ */ createElement6(ExpanderIcon, {
-        expanded: !enhancedData.collapsed,
-        onChange: () => {
-          toggleGroupRow(enhancedData.groupKeys);
-        }
-      }), /* @__PURE__ */ createElement6("div", {
-        className: cssEllipsisClassName
-      }, value != null ? value : null));
-    }
-  };
-  if (groupColumnFromProps) {
-    if (typeof groupColumnFromProps === "function") {
-      generatedGroupColumn = __spreadValues(__spreadValues({}, generatedGroupColumn), groupColumnFromProps(options, toggleGroupRow));
-    } else {
-      generatedGroupColumn = __spreadValues(__spreadValues({}, generatedGroupColumn), groupColumnFromProps);
-    }
-  }
-  return generatedGroupColumn;
-}
-
-// src/components/InfiniteTable/hooks/useGeneratedGroupAndPivotColumns.ts
-function getGroupRenderStrategy(options) {
-  const { groupRowsBy, groupColumn, groupRenderStrategy } = options;
-  if (groupRenderStrategy) {
-    return groupRenderStrategy;
-  }
-  if (groupColumn != null && typeof groupColumn === "object") {
-    return "single-column";
-  }
-  const columnsInGroupRowsBy = groupRowsBy.filter((g) => g.column);
-  if (columnsInGroupRowsBy.length) {
-    return "multi-column";
+      const clone = __spreadValues(__spreadValues({}, base), column);
+      computedColumns.set(id, clone);
+    });
+    return computedColumns.size === 0 ? void 0 : computedColumns;
   }
-  return "multi-column";
+  useEffect8(() => {
+    const update = () => {
+      componentActions.columnsWhenInlineGroupRenderStrategy = computeColumnsWhenInlineGroupRenderStrategy(columns, groupRowsMap, groupRenderStrategy, toggleGroupRow);
+    };
+    update();
+    return interceptMap(columns, {
+      set: update,
+      delete: update,
+      clear: update
+    });
+  }, [columns, groupRowsMap, groupRenderStrategy, toggleGroupRow]);
 }
-function useGeneratedGroupAndPivotColumns() {
+function useColumnsWhenPivoting() {
   const {
-    componentState: { groupRowsBy, pivotBy },
-    getState: getDataSourceState,
-    componentActions: dataSourceActions
+    componentState: { groupRowsBy, pivotBy }
   } = useDataSourceContextValue();
   const {
-    getComponentState,
     componentActions,
     componentState: {
-      groupColumn,
-      groupRenderStrategy,
+      pivotColumns,
       pivotColumn,
       pivotRowLabelsColumn,
-      pivotColumns,
       pivotTotalColumnPosition
     }
   } = useComponentState();
-  const toggleGroupRow = useCallback4((groupKeys) => {
-    const newState = new GroupRowsState(getDataSourceState().groupRowsState);
-    newState.toggleGroupRow(groupKeys);
-    dataSourceActions.groupRowsState = newState;
-  }, []);
-  useEffect8(() => {
-    const currentState = getComponentState();
-    if (pivotColumns) {
-      if (currentState.generatedColumns.size) {
-        componentActions.generatedColumns = new Map();
-      }
-      return;
-    }
-    componentActions.generatedColumns = getGeneratedGroupColumns({
-      groupColumn,
-      groupRenderStrategy,
-      groupRowsBy,
-      pivotColumns,
-      toggleGroupRow
-    });
-  }, [groupRowsBy, groupColumn, groupRenderStrategy, pivotColumns]);
-  useEffect8(() => {
-    dataSourceActions.pivotTotalColumnPosition = pivotTotalColumnPosition;
-  }, [pivotTotalColumnPosition]);
+  const toggleGroupRow = useToggleGroupRow();
   useEffect8(() => {
     const computedPivotColumns = getComputedPivotColumnsFromDataSourcePivotColumns(pivotColumns, {
       pivotColumn,
@@ -3160,64 +3346,166 @@ function useGeneratedGroupAndPivotColumns() {
     componentActions.computedPivotColumns = computedPivotColumns;
   }, [pivotColumns, pivotColumn, pivotRowLabelsColumn]);
 }
-function getGeneratedGroupColumns(params) {
+function useColumnsWhenGrouping() {
+  const {
+    componentState: { groupRowsBy }
+  } = useDataSourceContextValue();
+  const {
+    componentActions,
+    componentState: { columns, groupColumn, groupRenderStrategy, pivotColumns }
+  } = useComponentState();
+  const toggleGroupRow = useToggleGroupRow();
+  useEffect8(() => {
+    if (pivotColumns) {
+      return;
+    }
+    const update = () => {
+      componentActions.columnsWhenGrouping = getColumnsWhenGrouping({
+        columns,
+        groupColumn,
+        groupRenderStrategy,
+        groupRowsBy,
+        pivotColumns,
+        toggleGroupRow
+      });
+    };
+    update();
+    return interceptMap(columns, {
+      set: update,
+      delete: update,
+      clear: update
+    });
+  }, [groupRowsBy, groupColumn, groupRenderStrategy, pivotColumns]);
+}
+function useHideEmptyGroupColumns(groupRowsMap) {
+  const {
+    componentState: { groupRowsBy, groupRowsState },
+    getState: getDataSourceState
+  } = useDataSourceContextValue();
+  const {
+    getComponentState,
+    componentActions,
+    componentState: {
+      columnsWhenGrouping: generatedColumns,
+      hideEmptyGroupColumns,
+      groupRenderStrategy
+    }
+  } = useComponentState();
+  useEffect8(() => {
+    if (groupRenderStrategy === "single-column") {
+      return;
+    }
+    const groupsLength = groupRowsBy.length;
+    let expandedGroupsLevel = 0;
+    const { dataArray } = getDataSourceState();
+    const len = dataArray.length;
+    for (let i = 0; i < len; i++) {
+      const data = dataArray[i];
+      expandedGroupsLevel = Math.max(expandedGroupsLevel, data.groupNesting - 1);
+      if (expandedGroupsLevel === groupsLength - 1) {
+        break;
+      }
+    }
+    const currentState = getComponentState();
+    const { computedColumns } = currentState;
+    let updated = false;
+    const columnVisibility = new Map(currentState.columnVisibility);
+    const cols = computedColumns;
+    groupRowsBy.forEach(({ field }, index) => {
+      const colId = groupRenderStrategy === "multi-column" ? `group-by-${field}` : field;
+      const col = cols.get(colId);
+      if (!col) {
+        return;
+      }
+      const shouldBeHidden = index > expandedGroupsLevel;
+      updated = true;
+      if (shouldBeHidden && hideEmptyGroupColumns) {
+        columnVisibility.set(colId, false);
+      } else {
+        columnVisibility.delete(colId);
+      }
+    });
+    if (updated) {
+      componentActions.columnVisibility = columnVisibility;
+    }
+  }, [
+    getDataSourceState,
+    groupRenderStrategy,
+    generatedColumns,
+    groupRowsBy,
+    groupRowsMap,
+    hideEmptyGroupColumns ? groupRowsState : null,
+    hideEmptyGroupColumns
+  ]);
+}
+function getColumnsWhenGrouping(params) {
   const {
     pivotColumns,
     groupRowsBy,
     groupColumn,
     groupRenderStrategy,
-    toggleGroupRow
+    toggleGroupRow,
+    columns
   } = params;
-  const generatedColumns = new Map();
   if (pivotColumns) {
-    return generatedColumns;
+    return void 0;
   }
-  const strategy = getGroupRenderStrategy({
-    groupRowsBy,
-    groupColumn,
-    groupRenderStrategy
-  });
+  if (groupRenderStrategy === "inline") {
+    return void 0;
+  }
+  const computedColumns = new Map();
   if (groupRenderStrategy === "multi-column") {
     groupRowsBy.forEach((groupBy, index, arr) => {
-      generatedColumns.set(`group-by-${groupBy.field}`, getColumnForGroupBy({ groupBy, groupRowsBy, groupIndex: index, groupCount: arr.length }, toggleGroupRow, groupColumn));
+      computedColumns.set(`group-by-${groupBy.field}`, getColumnForGroupBy({
+        groupBy,
+        groupRowsBy,
+        groupIndex: index,
+        groupCount: arr.length,
+        groupRenderStrategy
+      }, toggleGroupRow, groupColumn));
     });
-  } else if (strategy === "single-column") {
-    generatedColumns.set("group-by", getSingleGroupColumn({
+  } else if (groupRenderStrategy === "single-column") {
+    computedColumns.set("group-by", getSingleGroupColumn({
       groupCount: groupRowsBy.length,
       groupRowsBy
     }, toggleGroupRow, groupColumn));
   }
-  return generatedColumns;
+  columns.forEach((col, colId) => {
+    computedColumns.set(colId, col);
+  });
+  return computedColumns;
 }
 
 // src/components/InfiniteTable/hooks/useComputed.ts
 function useComputed() {
-  const { componentActions, componentState, updateStateProperty } = useComponentState();
+  var _a;
+  const { componentActions, componentState } = useComponentState();
   const {
     componentActions: dataSourceActions,
     componentState: dataSourceState
   } = useDataSourceContextValue();
   const { columnOrder, columnVisibility, columnPinning, bodySize } = componentState;
   useState4(() => {
-    componentState.onRowHeightChange.onChange((rowHeight) => {
+    componentState.onRowHeightCSSVarChange.onChange((rowHeight) => {
       if (rowHeight) {
-        componentActions.rowHeightComputed = rowHeight;
+        componentActions.rowHeight = rowHeight;
       }
     });
-    componentState.onHeaderHeightChange.onChange((headerHeight) => {
+    componentState.onHeaderHeightCSSVarChange.onChange((headerHeight) => {
       if (headerHeight) {
-        updateStateProperty("headerHeight", headerHeight);
+        componentActions.headerHeight = headerHeight;
       }
     });
   });
   useColumnAggregations();
   const { multiSort } = dataSourceState;
   useColumnGroups();
-  useGeneratedGroupAndPivotColumns();
+  useColumnsWhen();
   const setSortInfo = useCallback5((sortInfo) => {
-    var _a;
-    dataSourceActions.sortInfo = multiSort ? sortInfo : (_a = sortInfo[0]) != null ? _a : null;
-  }, [multiSort]);
+    var _a2;
+    dataSourceActions.sortInfo = multiSort ? sortInfo : (_a2 = sortInfo[0]) != null ? _a2 : null;
+  }, []);
+  const columns = componentState.computedColumns;
   const {
     computedColumnOrder,
     computedVisibleColumns,
@@ -3234,8 +3522,7 @@ function useComputed() {
     computedPinnedStartWidth,
     computedPinnedEndWidth
   } = useComputedVisibleColumns({
-    columns: componentState.computedPivotColumns || componentState.columns,
-    generatedColumns: componentState.generatedColumns,
+    columns,
     columnMinWidth: componentState.columnMinWidth,
     columnMaxWidth: componentState.columnMaxWidth,
     columnDefaultWidth: componentState.columnDefaultWidth,
@@ -3244,7 +3531,7 @@ function useComputed() {
     bodySize,
     sortable: componentState.sortable,
     draggableColumns: componentState.draggableColumns,
-    sortInfo: dataSourceState.sortInfo,
+    sortInfo: (_a = dataSourceState.sortInfo) != null ? _a : void 0,
     multiSort,
     setSortInfo,
     columnOrder,
@@ -3313,11 +3600,11 @@ var useInternalProps = () => {
 
 // src/components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBody.tsx
 var InfiniteTableBody = forwardRef(function InfiniteTableBody2(props, ref) {
-  const { rootClassName: rootClassName11 } = useInternalProps();
+  const { rootClassName: rootClassName12 } = useInternalProps();
   return /* @__PURE__ */ createElement7("div", __spreadProps(__spreadValues({
     ref
   }, props), {
-    className: join(`${rootClassName11}Body`, ICSS.position.relative, ICSS.transform.translate3D000, props.className)
+    className: join(`${rootClassName12}Body`, position.relative, flex["1"], transformTranslateZero, props.className)
   }));
 });
 
@@ -3391,19 +3678,30 @@ function VerticalScrollbarPlaceholderFn(props) {
 }
 var VerticalScrollbarPlaceholder = memo2(VerticalScrollbarPlaceholderFn);
 
+// src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts
+var CellCls = "_1eexc2a5 _16lm1iwh _16lm1iwy _16lm1iwz _16lm1iw2 _16lm1iw17 _16lm1iw18";
+var HeaderCellProxy = "_12zfob10";
+var HeaderCellRecipe = createRuntimeFn({ defaultClassName: "_12zfob1c", variantClassNames: { dragging: { true: "_12zfob1d", false: "_12zfob1e" }, first: { true: "_12zfob1f", false: "_12zfob1g" }, last: { true: "_12zfob1h", false: "_12zfob1i" }, groupByField: { true: "_12zfob1j", false: "_12zfob1k" }, firstInCategory: { true: "_12zfob1l", false: "_12zfob1m" }, lastInCategory: { true: "_12zfob1n", false: "_12zfob1o" }, pinned: { start: "_12zfob1p", end: "_12zfob1q", false: "_12zfob1r" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_12zfob1s"], [{ pinned: "end", firstInCategory: true }, "_12zfob1t"], [{ pinned: false, lastInCategory: true }, "_12zfob1u"]] });
+var HeaderClsRecipe = createRuntimeFn({ defaultClassName: "_12zfob12 _16lm1iwy", variantClassNames: { pinned: { start: "_12zfob13", end: "_12zfob14", false: "_12zfob15" }, virtualized: { true: "_12zfob16", false: "_12zfob17" }, overflow: { true: "_12zfob18", false: "_12zfob19" } }, defaultVariants: {}, compoundVariants: [[{ overflow: true, pinned: "start" }, "_12zfob1a"], [{ overflow: true, pinned: "end" }, "_12zfob1b"]] });
+var HeaderGroupCls = "_16lm1iwx _16lm1iwh";
+var HeaderGroup_Children = "_16lm1iwh _16lm1iwy _16lm1iw10 _16lm1iwa";
+var HeaderGroup_Header = "_12zfob1x _16lm1iwh _16lm1iwy _16lm1iwz";
+var HeaderSortIconCls = "_12zfob11 _16lm1iw1";
+var HeaderWrapperCls = "_12zfob1v _16lm1iw14 _16lm1iw1 _16lm1iwh _16lm1iwy";
+
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
 import {
   createElement as createElement15,
   memo as memo6
 } from "react";
-import { useCallback as useCallback8, useEffect as useEffect12, useRef as useRef6 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect12, useRef as useRef7 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
 import {
   Fragment as Fragment2,
   createElement as createElement11
 } from "react";
-import { useCallback as useCallback7, useEffect as useEffect10, useRef as useRef5 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect10, useRef as useRef6 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
 import {
@@ -3419,10 +3717,17 @@ var useInfiniteTableState = () => {
   return componentState;
 };
 
+// src/components/InfiniteTable/components/cell.css.ts
+var CellCls2 = "_1eexc2a5 _16lm1iwh _16lm1iwy _16lm1iwz _16lm1iw2 _16lm1iw17 _16lm1iw18";
+var CellClsVariants = { shifting: "_1eexc2a3", dragging: "_1eexc2a4" };
+var ColumnCellRecipe = createRuntimeFn({ defaultClassName: "_16lm1iw2 _16lm1iwm _16lm1iw7 _16lm1iwp", variantClassNames: { dragging: { false: "_1eexc2a7" }, first: { true: "_1eexc2a8", false: "_1eexc2a9" }, last: { true: "_1eexc2aa", false: "_1eexc2ab" }, groupByField: { true: "_1eexc2ac", false: "_1eexc2ad" }, firstInCategory: { true: "_1eexc2ae", false: "_1eexc2af" }, lastInCategory: { true: "_1eexc2ag", false: "_1eexc2ah" }, pinned: { start: "_1eexc2ai", end: "_1eexc2aj", false: "_1eexc2ak" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_1eexc2al"], [{ pinned: "end", firstInCategory: true }, "_1eexc2am"]] });
+var columnAlignCellStyle = { center: "_1eexc2a0", start: "_1eexc2a1", end: "_1eexc2a2" };
+
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
 var { rootClassName: rootClassName2 } = internalProps;
 var InfiniteTableCellClassName = `${rootClassName2}Cell`;
 function InfiniteTableCellFn(props) {
+  var _b, _c;
   const _a = props, {
     cssEllipsis = true,
     virtualized = true,
@@ -3464,7 +3769,7 @@ function InfiniteTableCellFn(props) {
     ref: domRef,
     style,
     "data-name": `Cell`,
-    className: join(domProps.className, ICSS.display.flex, ICSS.flexFlow.row, ICSS.alignItems.center, ICSS.justifyContent[column.align === "center" ? column.align : `flex-${column.align}`], InfiniteTableCellClassName, shifting ? `${InfiniteTableCellClassName}--shifting` : "")
+    className: join(domProps.className, columnAlignCellStyle[(_b = column.align) != null ? _b : "start"], justifyContent[(_c = column.align) != null ? _c : "start"], InfiniteTableCellClassName, CellCls2, shifting ? `${InfiniteTableCellClassName}--shifting ${CellClsVariants.shifting}` : "")
   }), beforeChildren, cssEllipsis ? /* @__PURE__ */ createElement9("div", {
     className: `${rootClassName2}Cell_content ${cssEllipsisClassName}`
   }, children) : children, afterChildren);
@@ -3475,8 +3780,8 @@ var InfiniteTableCell = memo3(InfiniteTableCellFn);
 var import_binary_search = __toModule(require_binary_search());
 import {
   useCallback as useCallback6,
-  useMemo as useMemo5,
-  useRef as useRef4,
+  useMemo as useMemo6,
+  useRef as useRef5,
   useState as useState5
 } from "react";
 
@@ -3514,16 +3819,16 @@ var useColumnPointerEvents = ({
 }) => {
   const [draggingDiff, setDraggingDiff] = useState5(null);
   const [proxyOffset, setProxyOffset] = useState5(null);
-  const breakpointsRef = useRef4([]);
-  const pointerMoveRef = useRef4(null);
-  const didDragRef = useRef4(false);
-  const initialClientPos = useRef4(null);
-  const currentDropIndexRef = useRef4(null);
+  const breakpointsRef = useRef5([]);
+  const pointerMoveRef = useRef5(null);
+  const didDragRef = useRef5(false);
+  const initialClientPos = useRef5(null);
+  const currentDropIndexRef = useRef5(null);
   const dragging = draggingDiff != null;
   const { componentActions, computed } = useInfiniteTable();
   const { computedColumnOrder } = computed;
-  const column = useMemo5(() => columns.get(columnId), [columnId, columns]);
-  const { columnIndex, columnWidth, columnsArray } = useMemo5(() => {
+  const column = useMemo6(() => columns.get(columnId), [columnId, columns]);
+  const { columnIndex, columnWidth, columnsArray } = useMemo6(() => {
     const columnsArray2 = Array.from(columns.values());
     return {
       columnsArray: columnsArray2,
@@ -3531,7 +3836,7 @@ var useColumnPointerEvents = ({
       columnWidth: column.computedWidth
     };
   }, [columns, columnId, column]);
-  let cursorRef = useRef4("auto");
+  let cursorRef = useRef5("auto");
   const onPointerDown = useCallback6((e) => {
     const target = domRef.current;
     cursorRef.current = target.style.cursor;
@@ -3629,11 +3934,25 @@ var useColumnPointerEvents = ({
 };
 
 // src/components/InfiniteTable/hooks/useCellClassName.ts
-function useCellClassName(column, baseClasses) {
+function useCellClassName(column, baseClasses, variants, extraFlags) {
   const result = [...baseClasses];
+  const variantObject = {
+    first: column.computedFirst,
+    last: column.computedLast,
+    groupByField: !!column.groupByField,
+    firstInCategory: column.computedFirstInCategory,
+    lastInCategory: column.computedLastInCategory,
+    pinned: column.computedPinned || false,
+    dragging: extraFlags.dragging
+  };
+  const theVariant = variants(variantObject);
+  result.push(theVariant);
   if (column.computedFirst) {
     result.push(...baseClasses.map((c) => `${c}--first`));
   }
+  if (column.groupByField) {
+    result.push(...baseClasses.map((c) => `${c}--group-column`));
+  }
   if (column.computedLast) {
     result.push(...baseClasses.map((c) => `${c}--last`));
   }
@@ -3648,7 +3967,7 @@ function useCellClassName(column, baseClasses) {
   } else {
     result.push(...baseClasses.map((c) => `${c}--unpinned`));
   }
-  return result.join(" ");
+  return result.filter(Boolean).join(" ");
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
@@ -3755,10 +4074,10 @@ function InfiniteTableHeaderCell(props) {
   header = header != null ? header : column.name;
   const sortTool = /* @__PURE__ */ createElement11(SortIcon, {
     index: column.computedMultiSort ? column.computedSortIndex + 1 : void 0,
-    className: `${baseCls}__sort-icon`,
+    className: `${baseCls}__sort-icon ${HeaderSortIconCls}`,
     direction: column.computedSorted ? column.computedSortedAsc ? 1 : -1 : 0
   });
-  const domRef = useRef5(null);
+  const domRef = useRef6(null);
   const ref = useCallback7((node) => {
     var _a2;
     domRef.current = node;
@@ -3792,7 +4111,7 @@ function InfiniteTableHeaderCell(props) {
   let draggingProxy = null;
   if (dragging) {
     draggingProxy = /* @__PURE__ */ createElement11("div", {
-      className: `${baseCls}Proxy`,
+      className: `${baseCls}Proxy ${HeaderCellProxy}`,
       style: {
         position: "absolute",
         height: headerHeight,
@@ -3813,7 +4132,7 @@ function InfiniteTableHeaderCell(props) {
     offset,
     onPointerDown,
     onPointerUp,
-    className: join(baseCls, ICSS.userSelect.none, column.computedSortable ? ICSS.cursor.pointer : "", useCellClassName(column, [baseCls, InfiniteTableCellClassName]), dragging ? `${InfiniteTableCellClassName}--dragging ${baseCls}--dragging` : ""),
+    className: join(baseCls, userSelect.none, column.computedSortable ? cursor.pointer : "", useCellClassName(column, [baseCls, InfiniteTableCellClassName], HeaderCellRecipe, { dragging }), CellCls),
     cssEllipsis: (_d = (_c = column.headerCssEllipsis) != null ? _c : column.cssEllipsis) != null ? _d : true,
     afterChildren: sortTool
   }, header), draggingProxy);
@@ -3824,7 +4143,7 @@ import {
   createElement as createElement14,
   memo as memo5
 } from "react";
-import { useMemo as useMemo6, useEffect as useEffect11 } from "react";
+import { useMemo as useMemo7, useEffect as useEffect11 } from "react";
 
 // src/components/RawList/ReactVirtualRenderer.tsx
 import {
@@ -4104,9 +4423,21 @@ var ReactVirtualRenderer = class extends Logger {
     if (this.destroyed) {
       return;
     }
+    const spanParent = this.brain.getItemSpanParent(itemIndex);
+    let covered = false;
+    if (spanParent !== itemIndex) {
+      covered = true;
+    }
+    const itemSize = this.brain.getItemSize(itemIndex);
+    const itemSpan = this.brain.getItemSpan(itemIndex);
+    const itemSizeWithSpan = itemSpan === 1 ? itemSize : this.brain.getItemSizeWithSpan(itemIndex, itemSpan);
     const renderedNode = renderItem({
+      spanParent,
       itemIndex,
-      itemSize: this.brain.getItemSize(itemIndex),
+      itemSize,
+      itemSizeWithSpan,
+      itemSpan,
+      covered,
       domRef: this.itemDOMRefs[elementIndex]
     });
     const itemUpdater = this.updaters[elementIndex];
@@ -4126,7 +4457,7 @@ var ReactVirtualRenderer = class extends Logger {
 // src/components/RawList/index.tsx
 function RawListFn(props) {
   const { renderItem, brain, debugChannel } = props;
-  const { onRenderUpdater, renderer } = useMemo6(() => {
+  const { onRenderUpdater, renderer } = useMemo7(() => {
     const onRenderUpdater2 = buildSubscriptionCallback();
     const renderer2 = new ReactVirtualRenderer(brain, {
       channel: debugChannel
@@ -4169,7 +4500,7 @@ var debug3 = dbg("Header");
 var { rootClassName: rootClassName4 } = internalProps;
 var TableHeaderClassName = `${rootClassName4}Header`;
 function InfiniteTableHeaderFn(props) {
-  const { repaintId, brain, columns, style, className } = props;
+  const { repaintId, brain, columns, style, className, pinning } = props;
   const {
     computed,
     componentState: { headerHeight }
@@ -4197,10 +4528,15 @@ function InfiniteTableHeaderFn(props) {
     const removeOnScroll = brain.onScroll(onScroll);
     return removeOnScroll;
   }, [brain]);
-  const domRef = useRef6(null);
+  const domRef = useRef7(null);
+  const headerCls = HeaderClsRecipe({
+    pinned: pinning,
+    overflow: false,
+    virtualized: true
+  });
   const domProps = {
     ref: domRef,
-    className: join(ICSS.flexFlow.row, TableHeaderClassName, `${TableHeaderClassName}--virtualized`, className),
+    className: join(TableHeaderClassName, `${TableHeaderClassName}--virtualized`, className, headerCls),
     style
   };
   return /* @__PURE__ */ createElement15("div", __spreadValues({}, domProps), /* @__PURE__ */ createElement15(RawList, {
@@ -4214,8 +4550,8 @@ var InfiniteTableHeader = memo6(InfiniteTableHeaderFn);
 import {
   createElement as createElement18,
   memo as memo7,
-  useMemo as useMemo7,
-  useRef as useRef7
+  useMemo as useMemo8,
+  useRef as useRef8
 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/renderColumnHeaderGroups.tsx
@@ -4329,15 +4665,15 @@ function InfiniteTableHeaderGroup(props) {
   };
   return /* @__PURE__ */ createElement16("div", {
     "data-group-id": columnGroup.id,
-    className: join(ICSS.flexFlow.column, ICSS.display.flex, TableHeaderGroupClassName, `${TableHeaderGroupClassName}--unvirtualized`),
+    className: join(HeaderGroupCls, TableHeaderGroupClassName, `${TableHeaderGroupClassName}--unvirtualized`),
     style
   }, /* @__PURE__ */ createElement16("div", {
-    className: join(`${TableHeaderGroupClassName}__header`, ICSS.flexFlow.row, ICSS.display.flex, ICSS.alignItems.center),
+    className: join(`${TableHeaderGroupClassName}__header`, HeaderGroup_Header),
     style: { height: headerHeight }
   }, /* @__PURE__ */ createElement16("div", {
     className: join(`${TableHeaderGroupClassName}__header-content`, cssEllipsisClassName)
   }, header)), /* @__PURE__ */ createElement16("div", {
-    className: join(`${TableHeaderGroupClassName}__children`, ICSS.display.flex, ICSS.flexFlow.row, ICSS.alignItems.stretch)
+    className: join(`${TableHeaderGroupClassName}__children`, HeaderGroup_Children)
   }, props.children));
 }
 
@@ -4403,17 +4739,17 @@ function InfiniteTableHeaderUnvirtualizedFn(props) {
   const _a = props, {
     columns,
     scrollable,
-    classNameModifiers,
     brain,
     scrollListener,
+    pinning,
     totalWidth,
     availableWidth
   } = _a, domProps = __objRest(_a, [
     "columns",
     "scrollable",
-    "classNameModifiers",
     "brain",
     "scrollListener",
+    "pinning",
     "totalWidth",
     "availableWidth"
   ]);
@@ -4426,9 +4762,9 @@ function InfiniteTableHeaderUnvirtualizedFn(props) {
     },
     computed: { computedVisibleColumnsMap: columnsMap }
   } = useInfiniteTable();
-  const domRef = useRef7(null);
+  const domRef = useRef8(null);
   const hasColumnGroups = computedColumnGroups.size > 0;
-  const columnHeaderGroups = useMemo7(() => {
+  const columnHeaderGroups = useMemo8(() => {
     return hasColumnGroups ? renderColumnHeaderGroups({
       columnGroups: computedColumnGroups,
       columnGroupsDepthsMap,
@@ -4471,11 +4807,15 @@ function InfiniteTableHeaderUnvirtualizedFn(props) {
     return removeOnScroll;
   }, [brain, scrollListener]);
   return /* @__PURE__ */ createElement18("div", __spreadProps(__spreadValues({}, domProps), {
-    className: join(TableHeaderClassName2, `${TableHeaderClassName2}--unvirtualized`, domProps.className, ...(classNameModifiers || []).filter(Boolean).map((modifier) => `${TableHeaderClassName2}--${modifier}`)),
+    className: join(TableHeaderClassName2, `${TableHeaderClassName2}--unvirtualized`, pinning ? `${TableHeaderClassName2}--pinned ${TableHeaderClassName2}-${pinning}` : "", scrollable ? `${TableHeaderClassName2}--overflow` : "", domProps.className, HeaderClsRecipe({
+      pinned: pinning,
+      virtualized: false,
+      overflow: scrollable
+    })),
     style
   }), /* @__PURE__ */ createElement18("div", {
     style: { width: totalWidth },
-    className: join(ICSS.flexFlow.row, ICSS.display.flex),
+    className: join(flexFlow.row, display.flex),
     ref: domRef
   }, children));
 }
@@ -4513,6 +4853,7 @@ function TableHeaderWrapper(props) {
     columns: computedUnpinnedColumns,
     repaintId: virtualizeHeader ? repaintId : void 0,
     brain,
+    pinning: false,
     style: {
       position: "absolute",
       left: computedPinnedStartWidth,
@@ -4524,14 +4865,14 @@ function TableHeaderWrapper(props) {
   }) : /* @__PURE__ */ createElement19(InfiniteTableHeaderUnvirtualized, {
     brain,
     scrollable: true,
+    pinning: false,
     columns: computedUnpinnedColumns,
     availableWidth: computedUnpinnedColumnsWidth,
     totalWidth: computedUnpinnedColumnsWidth
   });
   return /* @__PURE__ */ createElement19("div", {
-    className: join(ICSS.overflow.hidden, ICSS.position.relative, ICSS.display.flex, ICSS.flexFlow.row),
+    className: HeaderWrapperCls,
     style: {
-      background: "var(--ITableHeader__background)",
       height: virtualizeHeader ? height : void 0
     }
   }, hasPinnedStart ? /* @__PURE__ */ createElement19(InfiniteTableHeaderUnvirtualized, {
@@ -4544,11 +4885,7 @@ function TableHeaderWrapper(props) {
     totalWidth: computedPinnedStartColumnsWidth,
     columns: computedPinnedStartColumns,
     scrollable: computedPinnedStartOverflow,
-    classNameModifiers: [
-      "pinned",
-      "pinned-start",
-      computedPinnedStartOverflow ? "overflow" : ""
-    ],
+    pinning: "start",
     scrollListener: computedPinnedStartOverflow ? pinnedStartScrollListener : void 0
   }) : null, header, hasPinnedEnd ? /* @__PURE__ */ createElement19(InfiniteTableHeaderUnvirtualized, {
     style: {
@@ -4560,11 +4897,7 @@ function TableHeaderWrapper(props) {
     availableWidth: computedPinnedEndWidth,
     totalWidth: computedPinnedEndColumnsWidth,
     scrollable: computedPinnedEndOverflow,
-    classNameModifiers: [
-      "pinned",
-      "pinned-end",
-      computedPinnedEndOverflow ? "overflow" : ""
-    ],
+    pinning: "end",
     scrollListener: computedPinnedEndOverflow ? pinnedEndScrollListener : void 0
   }) : null, scrollbars.vertical ? /* @__PURE__ */ createElement19(VerticalScrollbarPlaceholder, {
     style: {
@@ -4579,7 +4912,7 @@ import {
   createElement as createElement20,
   forwardRef as forwardRef2
 } from "react";
-import { useRef as useRef8 } from "react";
+import { useRef as useRef9 } from "react";
 
 // src/components/hooks/useOnScroll.ts
 import { useEffect as useEffect14 } from "react";
@@ -4603,21 +4936,25 @@ var useOnScroll = (domRef, onScroll) => {
   }, [onScroll, domRef == null ? void 0 : domRef.current]);
 };
 
+// src/components/VirtualScrollContainer/VirtualScrollContainer.css.ts
+var ScrollableCls = { true: "_1ueijco1", false: "_1ueijco2", visible: "_1ueijco3", auto: "_1ueijco4", hidden: "_1ueijco5" };
+var ScrollableHorizontalCls = { true: "_1ueijco6", false: "_1ueijco7", visible: "_1ueijco8", auto: "_1ueijco9", hidden: "_1ueijcoa" };
+var ScrollableVerticalCls = { true: "_1ueijcob", false: "_1ueijcoc", visible: "_1ueijcod", auto: "_1ueijcoe", hidden: "_1ueijcof" };
+var VirtualScrollContainerCls = "_1ueijco0 _16lm1iw0";
+
 // src/components/VirtualScrollContainer/getScrollableClassName.ts
 var getScrollableClassName = (scrollable) => {
   let scrollableClassName = "";
-  if (typeof scrollable === "boolean") {
-    scrollableClassName = scrollable ? ICSS.overflow.auto : ICSS.overflow.hidden;
-  } else if (typeof scrollable === "string") {
-    scrollableClassName = ICSS.overflow[scrollable];
+  if (typeof scrollable === "boolean" || typeof scrollable === "string") {
+    scrollableClassName = ScrollableCls[`${scrollable}`];
   } else {
-    scrollableClassName = join(typeof scrollable.horizontal === "boolean" ? scrollable.horizontal ? ICSS.overflowX.auto : ICSS.overflowX.hidden : ICSS.overflowX[scrollable.horizontal], typeof scrollable.vertical === "boolean" ? scrollable.vertical ? ICSS.overflowY.auto : ICSS.overflowY.hidden : ICSS.overflowY[scrollable.vertical]);
+    scrollableClassName = join(ScrollableHorizontalCls[`${scrollable.horizontal}`], ScrollableVerticalCls[`${scrollable.vertical}`]);
   }
   return scrollableClassName;
 };
 
 // src/components/VirtualScrollContainer/index.tsx
-var rootClassName6 = "IT-VirtualScrollContainer";
+var rootClassName6 = "Infinite-VirtualScrollContainer";
 var VirtualScrollContainer = forwardRef2(function VirtualScrollContainer2(props, ref) {
   const {
     children,
@@ -4626,16 +4963,12 @@ var VirtualScrollContainer = forwardRef2(function VirtualScrollContainer2(props,
     className,
     style
   } = props;
-  const domRef = ref != null ? ref : useRef8(null);
+  const domRef = ref != null ? ref : useRef9(null);
   useOnScroll(domRef, onContainerScroll);
   return /* @__PURE__ */ createElement20("div", {
     ref: domRef,
     style,
-    className: [
-      className,
-      rootClassName6,
-      getScrollableClassName(scrollable)
-    ].join(" ")
+    className: join(className, rootClassName6, VirtualScrollContainerCls, getScrollableClassName(scrollable))
   }, children);
 });
 
@@ -4664,7 +4997,7 @@ function SpacePlaceholderFn(props) {
 var SpacePlaceholder = memo8(SpacePlaceholderFn);
 
 // src/components/InfiniteTable/hooks/useListRendering.tsx
-import { useCallback as useCallback17, useEffect as useEffect19, useMemo as useMemo9, useRef as useRef14 } from "react";
+import { useCallback as useCallback17, useEffect as useEffect20, useMemo as useMemo10, useRef as useRef15 } from "react";
 
 // src/components/InfiniteTable/hooks/useUnpinnedRendering.tsx
 import {
@@ -4683,13 +5016,19 @@ import {
   Fragment as Fragment4,
   createElement as createElement22
 } from "react";
-import { useRef as useRef9, useEffect as useEffect15, useState as useState8 } from "react";
+import { useRef as useRef10, useEffect as useEffect15, useState as useState8 } from "react";
+
+// src/components/VirtualList/VirtualList.css.ts
+var VirtualListCls = "mlx2t0 _16lm1iw0";
+var VirtualListClsOrientation = { horizontal: "mlx2t1", vertical: "mlx2t2" };
+var scrollTransformTargetCls = "mlx2t3";
+
+// src/components/VirtualList/VirtualList.tsx
 var UPDATE_SCROLL2 = (node, scrollPosition) => {
   node.style.transform = `translate3d(${-scrollPosition.scrollLeft}px, ${-scrollPosition.scrollTop}px, 0px)`;
 };
-var CLASSES = join(ICSS.height["0"], ICSS.width["0"], ICSS.willChange.transform);
 var debug4 = dbg("VirtuaList");
-var rootClassName7 = "IList";
+var rootClassName7 = "InfiniteList";
 var VirtualList = (props) => {
   const _a = props, {
     scrollable,
@@ -4720,10 +5059,10 @@ var VirtualList = (props) => {
     "onContainerScroll",
     "children"
   ]);
-  const domRef = useRef9(null);
+  const domRef = useRef10(null);
   const [, rerender] = useRerender();
   const [totalSize, setTotalSize] = useState8(0);
-  const renderCountRef = useRef9(0);
+  const renderCountRef = useRef10(0);
   useEffect15(() => {
     const removeOnRenderCount = virtualBrain.onRenderCountChange((renderCount) => {
       renderCountRef.current = renderCount;
@@ -4753,7 +5092,7 @@ var VirtualList = (props) => {
   const width = mainAxis === "horizontal" ? totalSize : itemCrossAxisSize != null ? itemCrossAxisSize : 0;
   const height = mainAxis === "vertical" ? totalSize : itemCrossAxisSize != null ? itemCrossAxisSize : 0;
   const domProps = __spreadProps(__spreadValues({}, restDOMProps), {
-    className: join(props.className, rootClassName7, `${rootClassName7}--${mainAxis}`, ICSS.transform.translate3D000)
+    className: join(props.className, rootClassName7, `${rootClassName7}--${mainAxis}`, VirtualListCls, VirtualListClsOrientation[mainAxis])
   });
   if (false) {
     domProps["data-cmp-name"] = `VirtualList`;
@@ -4763,7 +5102,7 @@ var VirtualList = (props) => {
     onContainerScroll
   }, /* @__PURE__ */ createElement22("div", {
     ref: domRef,
-    className: CLASSES,
+    className: scrollTransformTargetCls,
     "data-name": "scroll-transform-target"
   }, /* @__PURE__ */ createElement22(RawList, {
     brain: virtualBrain,
@@ -4801,7 +5140,7 @@ import {
   memo as memo10,
   useCallback as useCallback11
 } from "react";
-import { useRef as useRef11 } from "react";
+import { useRef as useRef12 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx
 import {
@@ -4809,140 +5148,206 @@ import {
   memo as memo9
 } from "react";
 var { rootClassName: rootClassName8 } = internalProps;
-var baseCls2 = `${rootClassName8}ColumnCell`;
+var InfiniteTableColumnCellClassName = `${rootClassName8}ColumnCell`;
 function isColumnWithField(c) {
   return typeof c.field === "string";
 }
-function isColumnWithRender(c) {
-  return c.render instanceof Function;
-}
 function InfiniteTableColumnCellFn(props) {
   var _a;
   const {
-    enhancedData,
+    rowInfo,
+    getData,
     column,
     offsetProperty,
     toggleGroupRow,
     virtualized,
     rowIndex,
-    domRef
+    rowHeight,
+    domRef,
+    hidden
   } = props;
-  const { data, isGroupRow, groupBy } = enhancedData;
-  let value = isGroupRow && groupBy && column.groupByField ? enhancedData.value : isColumnWithField(column) ? data == null ? void 0 : data[column.field] : null;
+  if (!column) {
+    return null;
+  }
+  const { data, isGroupRow, groupBy } = rowInfo;
+  const groupRowInfo = null;
+  let value = isGroupRow && groupBy && column.groupByField ? rowInfo.value : isColumnWithField(column) ? data == null ? void 0 : data[column.field] : null;
   if (column.valueGetter) {
-    value = column.valueGetter({ data, enhancedData });
+    value = column.valueGetter({
+      data,
+      rowInfo,
+      groupRowInfo
+    });
   }
   const { componentState: computedDataSource } = useDataSourceContextValue();
-  const renderParam = {
+  const stylingRenderParam = {
     value,
     column,
-    enhancedData,
+    rowInfo,
     data
   };
-  let renderValue = isColumnWithRender(column) ? column.render({
-    value,
-    column,
-    enhancedData,
-    data,
-    rowIndex,
-    toggleGroupRow,
-    toggleCurrentGroupRow: () => toggleGroupRow(enhancedData.groupKeys),
-    groupRowsBy: computedDataSource.groupRowsBy
-  }) : value;
-  const colClassName = column.className ? typeof column.className === "function" ? column.className(renderParam) : column.className : void 0;
-  const colStyle = column.style ? typeof column.style === "function" ? column.style(renderParam) : column.style : void 0;
+  let renderValue = value;
+  if (column.render || column.renderValue) {
+    const renderParam = {
+      value,
+      column,
+      rowInfo,
+      groupRowInfo,
+      data,
+      rowIndex,
+      toggleGroupRow,
+      toggleCurrentGroupRow: () => toggleGroupRow(rowInfo.groupKeys),
+      groupRowsBy: computedDataSource.groupRowsBy
+    };
+    if (column.render) {
+      renderValue = column.render(renderParam);
+    } else if (column.renderValue) {
+      renderValue = column.renderValue(renderParam);
+    }
+  }
+  const colClassName = column.className ? typeof column.className === "function" ? column.className(stylingRenderParam) : column.className : void 0;
+  const colStyle = column.style ? typeof column.style === "function" ? column.style(stylingRenderParam) : column.style : void 0;
   const style = colStyle ? __spreadProps(__spreadValues({}, colStyle), {
     width: column.computedWidth
   }) : {
     width: column.computedWidth
   };
-  return /* @__PURE__ */ createElement24(InfiniteTableCell, {
-    domRef,
-    offsetProperty,
+  const dataset = {
     "data-name": `Cell`,
     "data-column-id": column.id,
-    "data-column-index": column.computedVisibleIndex,
+    "data-column-index": column.computedVisibleIndex
+  };
+  if (typeof column.rowspan === "function") {
+    const rowspan = column.rowspan({
+      dataArray: getData(),
+      column,
+      rowInfo,
+      groupRowInfo,
+      rowIndex,
+      data: rowInfo.data
+    });
+    if (rowspan > 1) {
+      style.height = rowspan * rowHeight;
+      for (let i = 0; i < rowspan; i++) {
+        dataset[`data-hover-${rowIndex + i}`] = true;
+      }
+    }
+  }
+  return /* @__PURE__ */ createElement24(InfiniteTableCell, __spreadProps(__spreadValues({
+    domRef,
+    offsetProperty
+  }, dataset), {
     column,
     offset: virtualized ? 0 : column.computedPinningOffset,
     style,
     cssEllipsis: (_a = column.cssEllipsis) != null ? _a : true,
-    className: join(ICSS.position.absolute, ICSS.height["100%"], ICSS.top[0], useCellClassName(column, [baseCls2, InfiniteTableCellClassName]), colClassName)
-  }, renderValue);
+    className: join(useCellClassName(column, [InfiniteTableColumnCellClassName, InfiniteTableCellClassName], ColumnCellRecipe, { dragging: false }), colClassName)
+  }), hidden ? null : renderValue);
 }
 var InfiniteTableColumnCell = memo9(InfiniteTableColumnCellFn);
 
 // src/components/InfiniteTable/components/InfiniteTableRow/useRowDOMProps.ts
 import {
   useCallback as useCallback10,
-  useRef as useRef10
+  useRef as useRef11
 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableRowClassName.ts
 var { rootClassName: rootClassName9 } = internalProps;
 var InfiniteTableRowClassName = `${rootClassName9}Row`;
-var InfiniteTableRowClassName__hover = `${InfiniteTableRowClassName}--hover`;
+var InfiniteTableRowClassName__hover = `${rootClassName9}Element--hover`;
+
+// src/components/InfiniteTable/theme.css.ts
+var ThemeVars = { theme: "var(--infinite-theme)", color: { accent: "var(--infinite-accent-color)", color: "var(--infinite-color)" }, spacing: { "0": "var(--infinite-space-0)", "1": "var(--infinite-space-1)", "2": "var(--infinite-space-2)", "3": "var(--infinite-space-3)", "4": "var(--infinite-space-4)", "5": "var(--infinite-space-5)", "6": "var(--infinite-space-6)", "7": "var(--infinite-space-7)", "8": "var(--infinite-space-8)", "9": "var(--infinite-space-9)", "10": "var(--infinite-space-10)" }, fontSize: { "0": "var(--infinite-font-size-0)", "1": "var(--infinite-font-size-1)", "2": "var(--infinite-font-size-2)", "3": "var(--infinite-font-size-3)", "4": "var(--infinite-font-size-4)", "5": "var(--infinite-font-size-5)", "6": "var(--infinite-font-size-6)", "7": "var(--infinite-font-size-7)" }, fontFamily: "var(--infinite-font-family)", minHeight: "var(--infinite-min-height)", borderRadius: "var(--infinite-border-radius)", background: "var(--infinite-background)", components: { LoadMask: { padding: "var(--infinite-load-mask-padding)", color: "var(--infinite-load-mask-color)", textBackground: "var(--infinite-load-mask-text-background)", overlayBackground: "var(--infinite-load-mask-overlay-background)", overlayOpacity: "var(--infinite-load-mask-overlay-opacity)", borderRadius: "var(--infinite-load-mask-border-radius)" }, Header: { background: "var(--infinite-header-background)", color: "var(--infinite-header-color)", height: "var(--infinite-header-height)" }, HeaderCell: { draggingBackground: "var(--infinite-header-cell-dragging-background)", background: "var(--infinite-header-cell-background)", padding: "var(--infinite-header-cell-padding)", iconSize: "var(--infinite-header-cell-icon-size)" }, Cell: { padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", borderInvisible: "var(--infinite-cell-border-invisible)", borderRadius: "var(--infinite-cell-border-radius)" }, Row: { color: "var(--infinite-row-color)", background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", hoverBackground: "var(--infinite-row-hover-background)", groupRowBackground: "var(--infinite-group-row-background)", groupRowColumnNesting: "var(--infinite-group-row-column-nesting)", groupNesting: "var(--infinite-dont-override-group-row-nesting-length)", pointerEventsWhileScrolling: "var(--infinite-row-pointer-events-while-scrolling)" }, ColumnCell: { background: "var(--infinite-column-cell-bg-dont-override)" } } };
+
+// src/utils/stripVar.ts
+function stripVar(cssVariableWithVarString) {
+  return cssVariableWithVarString.slice(4, -1);
+}
 
 // src/components/InfiniteTable/components/InfiniteTableRow/useRowDOMProps.ts
-function useRowDOMProps(props, rowProps, rowStyle, rowClassName, tableDOMRef) {
+function useRowDOMProps(props, rowProps, rowStyle, rowClassName, groupRenderStrategy, tableDOMRef) {
   const domProps = props.domProps;
   const {
     showZebraRows = false,
+    showHoverRows = false,
     rowIndex,
     domRef: domRefFromProps,
-    enhancedData
+    rowInfo
   } = props;
-  const domRef = useRef10(null);
+  const domRef = useRef11(null);
   const rowDOMRef = useCallback10((node) => {
     domRefFromProps(node);
     domRef.current = node;
   }, []);
   const rowPropsAndStyleArgs = {
-    data: enhancedData.data,
-    enhancedData,
+    data: rowInfo.data,
+    rowInfo,
     rowIndex,
-    groupRowsBy: enhancedData.groupBy
+    groupRowsBy: rowInfo.groupBy
   };
   if (typeof rowProps === "function") {
     rowProps = rowProps(rowPropsAndStyleArgs);
   }
   let style = rowProps ? rowProps.style : void 0;
+  const inlineGroupRoot = groupRenderStrategy === "inline" && rowInfo.indexInGroup === 0;
   if (rowStyle) {
     style = typeof rowStyle === "function" ? __spreadValues(__spreadValues({}, style), rowStyle(rowPropsAndStyleArgs)) : __spreadValues(__spreadValues({}, style), rowStyle);
   }
-  const odd = (enhancedData.indexInAll != null ? enhancedData.indexInAll : rowIndex) % 2 === 1;
+  if (inlineGroupRoot) {
+    style = style || {};
+    style.zIndex = 2e6 - rowInfo.indexInAll;
+  }
+  const odd = (rowInfo.indexInAll != null ? rowInfo.indexInAll : rowIndex) % 2 === 1;
   let rowComputedClassName = typeof rowClassName === "function" ? rowClassName(rowPropsAndStyleArgs) : rowClassName;
-  const className = join(ICSS.position.absolute, ICSS.top[0], ICSS.left[0], InfiniteTableRowClassName, `${InfiniteTableRowClassName}--${enhancedData.isGroupRow ? "group" : "normal"}-row`, showZebraRows ? `${InfiniteTableRowClassName}--${odd ? "odd" : "even"}` : null, domProps == null ? void 0 : domProps.className, rowProps == null ? void 0 : rowProps.className, rowComputedClassName);
+  const className = join(InfiniteTableRowClassName, RowClsRecipe({
+    groupRow: rowInfo.isGroupRow,
+    inlineGroupRow: inlineGroupRoot,
+    zebra: showHoverRows ? odd ? "odd" : "even" : false,
+    showHoverRows
+  }), `${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 = useCallback10((event) => {
     var _a;
     initialMouseEnter == null ? void 0 : initialMouseEnter(event);
-    const rowIndex2 = (_a = event.currentTarget) == null ? void 0 : _a.dataset.rowIndex;
+    const rowIndex2 = ((_a = event.currentTarget) == null ? void 0 : _a.dataset.rowIndex) * 1;
     const parentNode = tableDOMRef.current;
-    if (!parentNode) {
+    if (!parentNode || !showHoverRows) {
       return;
     }
-    const rows = parentNode.querySelectorAll(`.${InfiniteTableRowClassName}[data-row-index="${rowIndex2}"]`);
-    rows.forEach((row) => row.classList.add(InfiniteTableRowClassName__hover));
-  }, [initialMouseEnter]);
+    const hoverSelector = [
+      `.${InfiniteTableRowClassName}[data-hover-index="${rowIndex2}"]`
+    ];
+    const rows = parentNode.querySelectorAll(hoverSelector.join(","));
+    rows.forEach((row) => row.classList.add(InfiniteTableRowClassName__hover, RowHoverCls));
+  }, [initialMouseEnter, showHoverRows]);
   const onMouseLeave = useCallback10((event) => {
     var _a;
     initialMouseLeave == null ? void 0 : initialMouseLeave(event);
     const rowIndex2 = (_a = event.currentTarget) == null ? void 0 : _a.dataset.rowIndex;
     const parentNode = tableDOMRef.current;
-    if (!parentNode) {
+    if (!parentNode || !showHoverRows) {
       return;
     }
-    const rows = parentNode.querySelectorAll(`.${InfiniteTableRowClassName}[data-row-index="${rowIndex2}"]`);
-    rows.forEach((row) => row.classList.remove(InfiniteTableRowClassName__hover));
-  }, [initialMouseLeave]);
+    const hoverSelector = [
+      `.${InfiniteTableRowClassName}[data-hover-index="${rowIndex2}"]`
+    ];
+    const rows = parentNode.querySelectorAll(hoverSelector.join(","));
+    rows.forEach((row) => row.classList.remove(InfiniteTableRowClassName__hover, RowHoverCls));
+  }, [initialMouseLeave, showHoverRows]);
+  if (rowInfo.isGroupRow && groupRenderStrategy === "single-column") {
+    style = style || {};
+    style[stripVar(ThemeVars.components.Row.groupNesting)] = rowInfo.groupNesting - 1;
+  }
   return {
     domRef,
     domProps: __spreadProps(__spreadValues(__spreadValues({}, rowProps), domProps), {
       style,
       "data-virtualize-columns": props.virtualizeColumns ? "on" : "off",
       "data-row-index": rowIndex,
-      "data-row-id": `${enhancedData.id}`,
+      "data-hover-index": rowIndex,
+      "data-row-id": `${rowInfo.id}`,
       className,
       onMouseEnter,
       onMouseLeave,
@@ -4956,34 +5361,50 @@ function InfiniteTableRowFn(props) {
   const {
     rowWidth,
     rowHeight,
-    enhancedData,
+    getData,
+    rowInfo,
     toggleGroupRow,
     rowIndex,
     brain,
+    verticalBrain,
     columns
   } = props;
   const tableContextValue = useInfiniteTable();
   const { componentState } = tableContextValue;
   const { domRef: tableDOMRef } = componentState;
-  const { domProps } = useRowDOMProps(props, componentState.rowProps, componentState.rowStyle, componentState.rowClassName, tableDOMRef);
+  const { groupRenderStrategy } = componentState;
+  const { domProps } = useRowDOMProps(props, componentState.rowProps, componentState.rowStyle, componentState.rowClassName, groupRenderStrategy, tableDOMRef);
   const style = __spreadValues({
     width: rowWidth,
     height: rowHeight
   }, domProps.style);
-  const renderCellRef = useRef11(null);
+  const renderCellRef = useRef12(null);
   const renderCell = useCallback11(({ domRef, itemIndex }) => {
     const column = columns[itemIndex];
     if (!column) {
     }
+    const hidden = false;
     return /* @__PURE__ */ createElement25(InfiniteTableColumnCell, {
-      enhancedData,
+      getData,
+      rowInfo,
+      groupRenderStrategy,
       virtualized: true,
+      hidden,
+      rowHeight,
       toggleGroupRow,
       rowIndex,
       domRef,
       column
     });
-  }, [columns, rowIndex, enhancedData]);
+  }, [
+    columns,
+    rowIndex,
+    rowInfo,
+    rowHeight,
+    groupRenderStrategy,
+    getData,
+    verticalBrain
+  ]);
   if (renderCellRef.current !== renderCell) {
     renderCellRef.current = renderCell;
   }
@@ -5009,7 +5430,8 @@ function TableRowUnvirtualizedFn(props) {
   const {
     rowHeight,
     rowWidth,
-    enhancedData,
+    getData,
+    rowInfo,
     rowIndex,
     columns,
     toggleGroupRow
@@ -5017,17 +5439,22 @@ function TableRowUnvirtualizedFn(props) {
   const tableContextValue = useInfiniteTable();
   const { componentState } = tableContextValue;
   const { domRef: tableDOMRef } = componentState;
-  const { domProps } = useRowDOMProps(props, componentState.rowProps, componentState.rowStyle, componentState.rowClassName, tableDOMRef);
+  const { domProps } = useRowDOMProps(props, componentState.rowProps, componentState.rowStyle, componentState.rowClassName, componentState.groupRenderStrategy, tableDOMRef);
   const style = __spreadValues({
     width: rowWidth,
     height: rowHeight
   }, domProps.style);
   const children = columns.map((col) => {
+    const hidden = false;
     return /* @__PURE__ */ createElement26(InfiniteTableColumnCell, {
       key: col.id,
       virtualized: false,
+      rowHeight,
+      getData,
+      hidden,
+      groupRenderStrategy: componentState.groupRenderStrategy,
       toggleGroupRow,
-      enhancedData,
+      rowInfo,
       rowIndex,
       column: col
     });
@@ -5058,19 +5485,22 @@ function useUnpinnedRendering(params) {
   } = params;
   const { virtualizeColumns } = getState();
   const shouldVirtualizeColumns = typeof virtualizeColumns === "function" ? virtualizeColumns(computedUnpinnedColumns) : virtualizeColumns != null ? virtualizeColumns : true;
-  const renderRowUnpinned = useCallback12((rowInfo) => {
+  const renderRowUnpinned = useCallback12((rowParams) => {
     const dataArray = getData();
-    const enhancedData = dataArray[rowInfo.rowIndex];
-    const { showZebraRows } = getState();
+    const rowInfo = dataArray[rowParams.rowIndex];
+    const { showZebraRows, showHoverRows } = getState();
     const rowProps = __spreadValues({
-      enhancedData,
+      rowInfo,
       showZebraRows,
+      showHoverRows,
+      getData,
       toggleGroupRow,
       virtualizeColumns: shouldVirtualizeColumns,
       brain: null,
+      verticalBrain: verticalVirtualBrain,
       columns: computedUnpinnedColumns,
       rowWidth: computedUnpinnedColumnsWidth
-    }, rowInfo);
+    }, rowParams);
     if (shouldVirtualizeColumns) {
       rowProps.brain = horizontalVirtualBrain;
       rowProps.repaintId = repaintId;
@@ -5079,10 +5509,12 @@ function useUnpinnedRendering(params) {
     return /* @__PURE__ */ createElement27(TableRowComponent, __spreadValues({}, rowProps));
   }, [
     repaintId,
+    rowHeight,
     computedUnpinnedColumns,
     computedUnpinnedColumnsWidth,
     shouldVirtualizeColumns,
-    horizontalVirtualBrain
+    horizontalVirtualBrain,
+    verticalVirtualBrain
   ]);
   const fakeScrollbar = getScrollbarWidth() ? /* @__PURE__ */ createElement27("div", {
     "data-name": "horizontal-scrollbar-placeholder--fake",
@@ -5119,17 +5551,44 @@ function useUnpinnedRendering(params) {
 }
 
 // src/components/InfiniteTable/hooks/useOnContainerScroll.ts
-import { useCallback as useCallback13, useRef as useRef12 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect16, useRef as useRef13 } from "react";
+
+// src/components/InfiniteTable/InfiniteCls.css.ts
+var FooterCls = "_16lm1iw1";
+var InfiniteCls = "_1yeub2v0 _16lm1iw1 _16lm1iwh _16lm1iwx _16lm1iw0";
+var InfiniteClsRecipe = createRuntimeFn({ defaultClassName: "", variantClassNames: { focused: { true: "_1yeub2v2", false: "_1yeub2v3" }, focusedWithin: { true: "_1yeub2v4", false: "_1yeub2v5" }, hasPinnedStart: { true: "_1yeub2v6", false: "_1yeub2v7" }, hasPinnedEnd: { true: "_1yeub2v8", false: "_1yeub2v9" }, hasPinnedStartOverflow: { true: "_1yeub2va", false: "_1yeub2vb" }, hasPinnedEndOverflow: { true: "_1yeub2vc", false: "_1yeub2vd" } }, defaultVariants: {}, compoundVariants: [] });
+var InfiniteClsScrolling = "_1yeub2v1";
+var InfiniteClsShiftingColumns = "_16lm1iwk";
+var PinnedRowsClsVariants = { pinnedStart: "_1yeub2ve", pinnedEnd: "_1yeub2vf", overflow: "_1yeub2vg" };
+var PinnedRowsContainerClsVariants = createRuntimeFn({ defaultClassName: "", variantClassNames: { pinned: { start: "_1yeub2vh", end: "_1yeub2vi", false: "_1yeub2vj" } }, defaultVariants: {}, compoundVariants: [] });
+
+// src/components/InfiniteTable/hooks/useOnContainerScroll.ts
 var DELAY = 200;
 var TableClassName = internalProps.rootClassName;
 var TableClassName__Scrolling = `${TableClassName}--scrolling`;
+var SCROLL_BOTTOM_OFFSET = 0;
 var useOnContainerScroll = ({
   verticalVirtualBrain,
   horizontalVirtualBrain,
-  domRef
+  reservedContentHeight
 }) => {
-  const timeoutIdRef = useRef12(0);
-  const scrollingRef = useRef12(false);
+  const {
+    componentState: {
+      scrollerDOMRef,
+      domRef,
+      scrollToBottomOffset,
+      onScrollToBottom,
+      onScrollToTop,
+      bodySize
+    }
+  } = useInfiniteTable();
+  const timeoutIdRef = useRef13(0);
+  const scrollingRef = useRef13(false);
+  const scrollTopMaxRef = useRef13(0);
+  useEffect16(() => {
+    const { current: node } = scrollerDOMRef;
+    scrollTopMaxRef.current = node.scrollHeight - node.clientHeight;
+  }, [reservedContentHeight, bodySize.height]);
   const setScrolling = useCallback13((scrolling) => {
     var _a;
     const prevScrolling = scrollingRef.current;
@@ -5149,9 +5608,9 @@ var useOnContainerScroll = ({
         return;
       }
       if (scrolling) {
-        classList.add(TableClassName__Scrolling);
+        classList.add(InfiniteClsScrolling, TableClassName__Scrolling);
       } else {
-        classList.remove(TableClassName__Scrolling);
+        classList.remove(InfiniteClsScrolling, TableClassName__Scrolling);
       }
     }
   }, []);
@@ -5165,7 +5624,7 @@ var useOnContainerScroll = ({
     domRef.current,
     setScrolling
   ]);
-  const scrollPositionRef = useRef12({
+  const scrollPositionRef = useRef13({
     scrollLeft: 0,
     scrollTop: 0
   });
@@ -5176,18 +5635,25 @@ var useOnContainerScroll = ({
   const applyScrollVertical = useCallback13(({ scrollTop }) => {
     scrollPositionRef.current.scrollTop = scrollTop;
     onContainerScroll(scrollPositionRef.current);
-  }, [onContainerScroll]);
+    if (scrollTop === 0) {
+      onScrollToTop == null ? void 0 : onScrollToTop();
+    }
+    const offset = scrollToBottomOffset != null ? scrollToBottomOffset : SCROLL_BOTTOM_OFFSET;
+    const isScrollBottom = scrollTop + offset >= scrollTopMaxRef.current;
+    if (isScrollBottom) {
+      onScrollToBottom == null ? void 0 : onScrollToBottom();
+    }
+  }, [onContainerScroll, scrollToBottomOffset, onScrollToBottom, onScrollToTop]);
   return {
     applyScrollHorizontal,
-    applyScrollVertical,
-    scrollPositionRef
+    applyScrollVertical
   };
 };
 
 // src/components/InfiniteTable/hooks/usePinnedRendering.tsx
 import {
   createElement as createElement29,
-  useMemo as useMemo8
+  useMemo as useMemo9
 } from "react";
 import { useCallback as useCallback15 } from "react";
 
@@ -5195,12 +5661,12 @@ import { useCallback as useCallback15 } from "react";
 import {
   createElement as createElement28
 } from "react";
-import { useEffect as useEffect17, useCallback as useCallback14, useRef as useRef13 } from "react";
+import { useEffect as useEffect18, useCallback as useCallback14, useRef as useRef14 } from "react";
 
 // src/components/hooks/useOnMount.ts
-import { useEffect as useEffect16 } from "react";
+import { useEffect as useEffect17 } from "react";
 function useOnMount(domRef, props) {
-  useEffect16(() => {
+  useEffect17(() => {
     const { onMount, onUnmount } = props;
     const node = domRef == null ? void 0 : domRef.current;
     onMount == null ? void 0 : onMount(node);
@@ -5210,12 +5676,15 @@ function useOnMount(domRef, props) {
   }, []);
 }
 
+// src/components/VirtualList/InfiniteListRootClassName.ts
+var InfiniteListRootClassName = "InfiniteList";
+
 // src/components/VirtualList/RowListWithExternalScrolling.tsx
-var rootClassName10 = "IList";
+var rootClassName10 = InfiniteListRootClassName;
 var defaultClasses = [
-  ICSS.willChange.transform,
-  ICSS.position.relative,
-  ICSS.transform.translate3D000
+  willChange.transform,
+  position.relative,
+  transformTranslateZero
 ];
 var RowListWithExternalScrolling = (props) => {
   const {
@@ -5228,7 +5697,7 @@ var RowListWithExternalScrolling = (props) => {
     onMount,
     onUnmount
   } = props;
-  const domRef = useRef13(null);
+  const domRef = useRef14(null);
   const renderItem = useCallback14((renderProps) => renderRow({
     domRef: renderProps.domRef,
     rowHeight: renderProps.itemSize,
@@ -5238,7 +5707,7 @@ var RowListWithExternalScrolling = (props) => {
     onMount,
     onUnmount
   });
-  useEffect17(() => {
+  useEffect18(() => {
     const onScroll = (scrollPosition) => {
       const node = domRef.current;
       if (node) {
@@ -5262,7 +5731,7 @@ var RowListWithExternalScrolling = (props) => {
   const domProps = {
     ref: domRef,
     style,
-    className: join(className, rootClassName10, `${rootClassName10}--vertical`, ...defaultClasses)
+    className: join(className, rootClassName10, `${rootClassName10}--vertical`, VirtualListCls, VirtualListClsOrientation.vertical, ...defaultClasses)
   };
   if (false) {
     domProps["data-cmp-name"] = "RowListWithExternalScrolling";
@@ -5278,7 +5747,7 @@ var RowListWithExternalScrolling = (props) => {
 var UPDATE_SCROLL3 = (node, brainScrollPosition, horizontalPinnedScrollPosition) => {
   node.style.transform = `translate3d(${horizontalPinnedScrollPosition ? -horizontalPinnedScrollPosition.scrollLeft : 0}px, ${-brainScrollPosition.scrollTop}px, 0px)`;
 };
-var PinnedRowsContainerClassName = `ITablePinnedRows`;
+var PinnedRowsContainerClassName = `InfinitePinnedRows`;
 function PinnedRowsContainer(props) {
   const {
     maxWidth,
@@ -5290,7 +5759,7 @@ function PinnedRowsContainer(props) {
     brain,
     renderRow
   } = props;
-  const style = useMemo8(() => {
+  const style = useMemo9(() => {
     const result = pinning === "end" ? {
       width: rowWidth,
       height,
@@ -5313,7 +5782,7 @@ function PinnedRowsContainer(props) {
     brain,
     renderRow,
     updateScroll,
-    className: join(`${PinnedRowsContainerClassName}`, `${PinnedRowsContainerClassName}--pinned-${pinning}`, `${PinnedRowsContainerClassName}--overflow`)
+    className: join(`${PinnedRowsContainerClassName}`, PinnedRowsClsVariants[pinning === "start" ? "pinnedStart" : "pinnedEnd"], `${PinnedRowsContainerClassName}--pinned-${pinning}`, `${PinnedRowsContainerClassName}--overflow`, PinnedRowsClsVariants.overflow)
   };
   if (hasOverflow) {
     return /* @__PURE__ */ createElement29(VirtualScrollContainer, {
@@ -5329,7 +5798,9 @@ function PinnedRowsContainer(props) {
         [pinning === "start" ? "right" : "left"]: "unset"
       },
       onContainerScroll: pinnedScrollListener == null ? void 0 : pinnedScrollListener.setScrollPosition,
-      className: join(`${PinnedRowsContainerClassName}Container`, `${PinnedRowsContainerClassName}Container--pinned-${pinning}`)
+      className: join(PinnedRowsContainerClsVariants({
+        pinned: pinning
+      }), `${PinnedRowsContainerClassName}Container`, `${PinnedRowsContainerClassName}Container--pinned-${pinning}`)
     }, /* @__PURE__ */ createElement29(RowListWithExternalScrolling, __spreadProps(__spreadValues({}, rowListProps), {
       onMount: (node) => {
         pinnedScrollListener == null ? void 0 : pinnedScrollListener.onScroll((scrollPosition) => {
@@ -5344,22 +5815,25 @@ function PinnedRowsContainer(props) {
   return /* @__PURE__ */ createElement29(RowListWithExternalScrolling, __spreadValues({}, rowListProps));
 }
 function useRenderPinnedRow(params) {
-  const { getData, getState, columnsWidth, columns } = params;
-  const renderPinnedRow = useCallback15((rowInfo) => {
+  const { getData, getState, columnsWidth, columns, verticalBrain } = params;
+  const renderPinnedRow = useCallback15((rowParams) => {
     const dataArray = getData();
-    const enhancedData = dataArray[rowInfo.rowIndex];
-    const { showZebraRows } = getState();
+    const rowInfo = dataArray[rowParams.rowIndex];
+    const { showZebraRows, showHoverRows } = getState();
     const rowProps = __spreadValues({
-      enhancedData,
+      rowInfo,
+      getData,
       showZebraRows,
+      showHoverRows,
       toggleGroupRow: params.toggleGroupRow,
       virtualizeColumns: false,
+      verticalBrain,
       brain: null,
       rowWidth: columnsWidth,
       columns
-    }, rowInfo);
+    }, rowParams);
     return /* @__PURE__ */ createElement29(TableRowUnvirtualized, __spreadValues({}, rowProps));
-  }, [columnsWidth, columns]);
+  }, [columnsWidth, columns, verticalBrain]);
   return renderPinnedRow;
 }
 function usePinnedRenderingForSide(side, params) {
@@ -5397,6 +5871,7 @@ function usePinnedRenderingForSide(side, params) {
     getData,
     getState,
     toggleGroupRow,
+    verticalBrain: verticalVirtualBrain,
     columns,
     columnsWidth
   });
@@ -5455,7 +5930,7 @@ function usePinnedStartRendering(params) {
 }
 
 // src/components/InfiniteTable/hooks/useYourBrain.ts
-import { useEffect as useEffect18 } from "react";
+import { useEffect as useEffect19 } from "react";
 
 // src/components/VirtualBrain/index.ts
 var import_binary_search2 = __toModule(require_binary_search());
@@ -5464,6 +5939,7 @@ var initialScrollPosition2 = {
   scrollTop: 0
 };
 var raf = typeof window !== "undefined" ? requestAnimationFrame : (fn) => setTimeout(fn, 0);
+var ItemIndexBag = Object.seal({ itemIndex: 0 });
 var SORT_ASC = (a, b) => a - b;
 var VirtualBrain = class extends Logger {
   constructor(options) {
@@ -5571,22 +6047,24 @@ var VirtualBrain = class extends Logger {
         this.onRenderRangeChangeFns = this.onRenderRangeChangeFns.filter((f) => f !== fn);
       };
     };
-    this.update = (newCount, newItemSize) => {
-      const { itemSize, count } = this.options;
+    this.update = (newCount, newItemSize, newItemSpan) => {
+      const { itemSize, count, itemSpan } = this.options;
       const countChange = count !== newCount;
       const itemSizeChange = itemSize !== newItemSize;
-      if (!countChange && !itemSizeChange) {
+      const itemSpanChange = itemSpan !== newItemSpan;
+      if (!countChange && !itemSizeChange && !itemSpanChange) {
         return;
       }
       this.options.count = newCount;
       this.options.itemSize = newItemSize;
+      this.options.itemSpan = newItemSpan;
       const size = this.availableSize[this.options.mainAxis === "vertical" ? "height" : "width"];
       const newRenderCount = this.computeRenderCount({
         itemSize: newItemSize,
         count: newCount,
         size
       });
-      if (!itemSizeChange && countChange && newCount > count) {
+      if (!itemSizeChange && !itemSpanChange && countChange && newCount > count) {
         const currentRenderCount = this.getRenderCount();
         if (currentRenderCount > newRenderCount) {
           return;
@@ -5611,11 +6089,43 @@ var VirtualBrain = class extends Logger {
       this.updateRenderCount(newRenderCount);
     };
     this.reset = () => {
+      this.itemSpanParent = [];
+      this.itemSpanValue = [];
       this.itemSizeCache = [];
       this.itemOffsetCache = [0];
       this.renderCount = -1;
       this.totalSize = 0;
     };
+    this.computeItemSpanUpTo = (itemIndex) => {
+      const { count, itemSpan } = this.options;
+      if (!itemSpan) {
+        return;
+      }
+      const cache = this.itemSpanParent;
+      const spanResultArr = this.itemSpanValue;
+      if (cache[itemIndex] === void 0) {
+        let i = cache.length;
+        let lastIndex = Math.min(itemIndex, count - 1);
+        for (; i <= lastIndex; i++) {
+          if (cache[i] === void 0) {
+            ItemIndexBag.itemIndex = i;
+            let spanValue = itemSpan(ItemIndexBag);
+            if (false) {
+              this.debug("itemSpan cannot be less than 1 - got %d for index %d", spanValue, i);
+            }
+            cache[i] = i;
+            spanResultArr[i] = spanValue;
+            let spannedItemIndex = i;
+            while (spanValue > 1) {
+              spannedItemIndex += 1;
+              cache[spannedItemIndex] = i;
+              spanResultArr[spannedItemIndex] = 0;
+              spanValue -= 1;
+            }
+          }
+        }
+      }
+    };
     this.computeCacheFor = (itemIndex) => {
       if (typeof this.options.itemSize !== "function") {
         return;
@@ -5635,6 +6145,33 @@ var VirtualBrain = class extends Logger {
         this.itemOffsetCache[itemIndex] = offset;
       }
     };
+    this.getItemSpan = (itemIndex) => {
+      if (!this.options.itemSpan) {
+        return 1;
+      }
+      if (this.itemSpanValue[itemIndex] === void 0) {
+        this.computeItemSpanUpTo(itemIndex);
+      }
+      return this.itemSpanValue[itemIndex] || 1;
+    };
+    this.getItemSpanParent = (itemIndex) => {
+      if (!this.options.itemSpan) {
+        return itemIndex;
+      }
+      if (this.itemSpanParent[itemIndex] === void 0) {
+        this.computeItemSpanUpTo(itemIndex);
+      }
+      return this.itemSpanParent[itemIndex];
+    };
+    this.getItemSizeWithSpan = (itemIndex, itemSpan) => {
+      let itemSize = this.getItemSize(itemIndex);
+      while (itemSpan > 1) {
+        itemIndex += 1;
+        itemSpan -= 1;
+        itemSize += this.getItemSize(itemIndex);
+      }
+      return itemSize;
+    };
     this.getItemSize = (itemIndex) => {
       const { itemSize, count } = this.options;
       if (typeof itemSize !== "function") {
@@ -5781,7 +6318,7 @@ var VirtualBrain = class extends Logger {
   }
   computeRenderRange() {
     const count = this.getOptions().count;
-    const renderCount = this.getRenderCount();
+    let renderCount = this.getRenderCount();
     if (renderCount === 0) {
       return {
         renderStartIndex: -1,
@@ -5794,6 +6331,12 @@ var VirtualBrain = class extends Logger {
       renderEndIndex = count - 1;
       renderStartIndex = renderEndIndex - renderCount + 1;
     }
+    if (this.options.itemSpan) {
+      this.computeItemSpanUpTo(renderStartIndex);
+      while (this.itemSpanParent[renderStartIndex] != renderStartIndex) {
+        renderStartIndex--;
+      }
+    }
     return {
       renderStartIndex,
       renderEndIndex
@@ -5825,7 +6368,8 @@ function useYourBrain(param) {
     computedPinnedStartWidth,
     computedPinnedEndWidth,
     rowHeight,
-    bodySize
+    bodySize,
+    rowSpan
   } = param;
   const columnSize = useColumnSizeFn(computedUnpinnedColumns);
   const horizontalVirtualBrain = useOnce(() => {
@@ -5840,20 +6384,21 @@ function useYourBrain(param) {
     const brain = new VirtualBrain({
       count: dataArray.length,
       itemSize: rowHeight,
-      mainAxis: "vertical"
+      mainAxis: "vertical",
+      itemSpan: rowSpan
     });
     return brain;
   });
   horizontalVirtualBrain.update(computedUnpinnedColumns.length, columnSize);
-  verticalVirtualBrain.update(dataArray.length, rowHeight);
+  verticalVirtualBrain.update(dataArray.length, rowHeight, rowSpan);
   globalThis.verticalVirtualBrain = verticalVirtualBrain;
-  useEffect18(() => {
+  useEffect19(() => {
     verticalVirtualBrain.setAvailableSize({
       height: bodySize.height,
       width: 0
     });
   }, [bodySize, verticalVirtualBrain]);
-  useEffect18(() => {
+  useEffect19(() => {
     horizontalVirtualBrain.setAvailableSize({
       height: 0,
       width: Math.max(bodySize.width - computedPinnedStartWidth - computedPinnedEndWidth, 0)
@@ -5887,7 +6432,7 @@ function shallowEqualObjects(objA, objB) {
 
 // src/components/InfiniteTable/hooks/useListRendering.tsx
 function useListRendering(param) {
-  const { computed, domRef, bodySize, columnShifts } = param;
+  const { computed, bodySize, columnShifts } = param;
   const { componentActions, componentState, getState } = useInfiniteTable();
   const prevComputed = usePrevious(computed, null);
   const {
@@ -5900,40 +6445,68 @@ function useListRendering(param) {
     computedUnpinnedColumns,
     computedUnpinnedColumnsWidth,
     computedPinnedStartOverflow,
-    computedPinnedEndOverflow
+    computedPinnedEndOverflow,
+    computedVisibleColumns
   } = computed;
   const { componentState: dataSourceState, getState: getDataSourceState } = useDataSourceContextValue();
   const { dataArray } = dataSourceState;
   const getData = useLatest(dataArray);
   const {
-    rowHeightComputed: rowHeight,
+    rowHeight,
     pinnedStartMaxWidth,
     pinnedEndMaxWidth,
     pinnedStartScrollListener,
     pinnedEndScrollListener
   } = componentState;
   const prevDataSourceTimestamp = usePrevious(dataSourceState.updatedAt);
-  const repaintIdRef = useRef14(0);
+  const repaintIdRef = useRef15(0);
   if (!shallowEqualObjects(prevComputed, computed) || prevDataSourceTimestamp !== dataSourceState.updatedAt) {
     repaintIdRef.current++;
   }
   const repaintId = repaintIdRef.current;
+  const rowSpan = useMemo10(() => {
+    const colsWithRowspan = computedVisibleColumns.filter((col) => typeof col.rowspan === "function");
+    return colsWithRowspan.length ? ({ itemIndex }) => {
+      let maxSpan = 1;
+      const dataArray2 = getData();
+      const rowInfo = dataArray2[itemIndex];
+      const data = rowInfo.data;
+      colsWithRowspan.forEach((column) => {
+        if (!column.rowspan) {
+          return;
+        }
+        const span = column.rowspan({
+          column,
+          data,
+          dataArray: dataArray2,
+          groupRowInfo: null,
+          rowInfo,
+          rowIndex: itemIndex
+        });
+        if (span > maxSpan) {
+          maxSpan = span;
+        }
+      });
+      return maxSpan;
+    } : void 0;
+  }, [computedVisibleColumns]);
   const { horizontalVirtualBrain, verticalVirtualBrain } = useYourBrain({
     computedPinnedStartWidth: computed.computedPinnedStartWidth,
     computedPinnedEndWidth: computed.computedPinnedEndWidth,
     computedUnpinnedColumns: computed.computedUnpinnedColumns,
     rowHeight,
     dataArray,
-    bodySize
+    bodySize,
+    rowSpan
   });
   const hasHorizontalScrollbar = computedUnpinnedColumnsWidth > bodySize.width - computedPinnedStartColumnsWidth - computedPinnedEndColumnsWidth;
   const reservedContentHeight = verticalVirtualBrain.getTotalSize() + (hasHorizontalScrollbar ? getScrollbarWidth() : 0);
   const hasVerticalScrollbar = bodySize.height < reservedContentHeight;
-  const scrollbars = useMemo9(() => ({
+  const scrollbars = useMemo10(() => ({
     vertical: hasVerticalScrollbar,
     horizontal: hasHorizontalScrollbar
   }), [hasVerticalScrollbar, hasHorizontalScrollbar]);
-  useEffect19(() => {
+  useEffect20(() => {
     if (!bodySize.height) {
       return;
     }
@@ -5956,7 +6529,7 @@ function useListRendering(param) {
   const { applyScrollHorizontal, applyScrollVertical } = useOnContainerScroll({
     verticalVirtualBrain,
     horizontalVirtualBrain,
-    domRef
+    reservedContentHeight
   });
   const { componentActions: dataSourceActions } = useDataSourceContextValue();
   const toggleGroupRow = useCallback17((groupKeys) => {
@@ -5994,7 +6567,7 @@ function useListRendering(param) {
     computedUnpinnedColumns
   });
   const [, rerender] = useRerender();
-  useEffect19(() => {
+  useEffect20(() => {
     rerender();
   }, [dataSourceState]);
   const { pinnedStartList, pinnedStartScrollbarPlaceholder } = usePinnedStartRendering(pinnedRenderingParams);
@@ -6021,9 +6594,9 @@ import {
   createElement as createElement30,
   forwardRef as forwardRef3,
   useCallback as useCallback18,
-  useRef as useRef15
+  useRef as useRef16
 } from "react";
-import { useEffect as useEffect20 } from "react";
+import { useEffect as useEffect21 } from "react";
 
 // src/components/utils/decamelize.ts
 var import_decamelize = __toModule(require_decamelize());
@@ -6034,7 +6607,7 @@ var decamelize = (input, options) => {
 
 // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
 var defaultStyle2 = {
-  padding: "var(--it-space-2)",
+  padding: ThemeVars.spacing[2],
   textAlign: "end",
   opacity: "1",
   visibility: "visible",
@@ -6060,8 +6633,8 @@ var enforceStyle = (node, style) => {
   }
 };
 var InfiniteTableLicenseFooter = forwardRef3(function InfiniteTableLicenseFooter2(props, ref) {
-  const { rootClassName: rootClassName11 } = useInternalProps();
-  const domRef = useRef15(null);
+  const { rootClassName: rootClassName12 } = useInternalProps();
+  const domRef = useRef16(null);
   const domCallback = useCallback18((node) => {
     domRef.current = node;
     if (!ref) {
@@ -6073,7 +6646,7 @@ var InfiniteTableLicenseFooter = forwardRef3(function InfiniteTableLicenseFooter
       ref.current = node;
     }
   }, []);
-  useEffect20(() => {
+  useEffect21(() => {
     const forceStyle = () => {
       requestAnimationFrame(() => {
         var _a;
@@ -6090,7 +6663,7 @@ var InfiniteTableLicenseFooter = forwardRef3(function InfiniteTableLicenseFooter
   return /* @__PURE__ */ createElement30("div", __spreadProps(__spreadValues({
     ref: domCallback
   }, props), {
-    className: join(`${rootClassName11}Footer`, ICSS.position.relative, props.className),
+    className: join(`${rootClassName12}-Footer`, FooterCls, props.className),
     style: defaultStyle2
   }), "Powered by", " ", /* @__PURE__ */ createElement30("a", {
     href: "https://infinite-table.com",
@@ -6101,7 +6674,7 @@ var InfiniteTableLicenseFooter = forwardRef3(function InfiniteTableLicenseFooter
 });
 
 // src/components/InfiniteTable/hooks/useLicense/useLicense.ts
-import { useMemo as useMemo10 } from "react";
+import { useMemo as useMemo11 } from "react";
 
 // src/components/InfiniteTable/hooks/useLicense/crc32.ts
 var DEFAULT_ReversedPolynomial = 3988292384;
@@ -6246,12 +6819,20 @@ var decode = (licenseKey) => {
 };
 
 // src/components/InfiniteTable/hooks/useLicense/useLicense.ts
+var SANDBOX_REGEX = /(https):\/\/\d+\-\d+\-\d\-(sandpack\.codesandbox\.io)/g;
+var origin = typeof window !== "undefined" ? window.location.origin : "";
+var [_fullUrl, protocol, sandboxUrl] = Array.from(SANDBOX_REGEX.exec(origin) || []);
+var isInsideSandbox = protocol === "https" && sandboxUrl === "sandpack.codesandbox.io";
 var useLicense = (licenseKey) => {
-  const valid = useMemo10(() => {
-    return isValidLicense(licenseKey, {
+  const valid = useMemo11(() => {
+    let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.0.2-canary.2"
+      version: "0.0.2-canary.3"
     });
+    if (!valid2 && isInsideSandbox) {
+      return true;
+    }
+    return valid2;
   }, [licenseKey]);
   return valid;
 };
@@ -6262,8 +6843,8 @@ import {
   useCallback as useCallback19,
   useLayoutEffect as useLayoutEffect5
 } from "react";
-import { useRef as useRef16 } from "react";
-var error = err("CSSVariableWatch");
+import { useRef as useRef17 } from "react";
+var error2 = err("CSSVariableWatch");
 var debug5 = dbg("CSSVariableWatch");
 var WRAPPER_STYLE = {
   position: "absolute",
@@ -6275,7 +6856,7 @@ var WRAPPER_STYLE = {
   overflow: "hidden"
 };
 var useCSSVariableWatch = (params) => {
-  const lastValueRef = useRef16(0);
+  const lastValueRef = useRef17(0);
   const onResize = useCallback19(({ height }) => {
     if (height && height !== lastValueRef.current) {
       lastValueRef.current = height;
@@ -6290,12 +6871,12 @@ var useCSSVariableWatch = (params) => {
       debug5(`Variable ${params.varName} found and equals ${value}.`);
       params.onChange(value);
     } else {
-      error(`Specified variable ${params.varName} not found or does not have a numeric value.`);
+      error2(`Specified variable ${params.varName} not found or does not have a numeric value.`);
     }
   }, []);
 };
 var CSSVariableWatch = (props) => {
-  const domRef = useRef16(null);
+  const domRef = useRef17(null);
   useCSSVariableWatch(__spreadProps(__spreadValues({}, props), {
     ref: domRef
   }));
@@ -6306,11 +6887,121 @@ var CSSVariableWatch = (props) => {
   }, /* @__PURE__ */ createElement31("div", {
     ref: domRef,
     style: {
-      height: `var(${props.varName})`
+      height: props.varName.startsWith("var(") ? props.varName : `var(${props.varName})`
     }
   }));
 };
 
+// src/components/InfiniteTable/hooks/useDOMProps.ts
+function useDOMProps(initialDOMProps) {
+  const { computed, componentState, componentActions } = useInfiniteTable();
+  const {
+    columnShifts,
+    focused,
+    focusedWithin,
+    domRef,
+    onBlurWithin,
+    onFocusWithin,
+    onSelfFocus,
+    onSelfBlur
+  } = componentState;
+  const { computedPinnedStartColumnsWidth, computedPinnedEndColumnsWidth } = computed;
+  const setFocused = rafFn((focused2) => {
+    componentActions.focused = focused2;
+  });
+  const setFocusedWithin = rafFn((focused2) => {
+    componentActions.focusedWithin = focused2;
+  });
+  const onFocus = (event) => {
+    var _a;
+    (_a = initialDOMProps == null ? void 0 : initialDOMProps.onFocus) == null ? void 0 : _a.call(initialDOMProps, event);
+    if (event.target === domRef.current) {
+      setFocused(true);
+      onSelfFocus == null ? void 0 : onSelfFocus(event);
+      if (focusedWithin) {
+        setFocusedWithin(false);
+        onBlurWithin == null ? void 0 : onBlurWithin(event);
+      }
+    } else {
+      if (!focusedWithin) {
+        setFocusedWithin(true);
+        onFocusWithin == null ? void 0 : onFocusWithin(event);
+      }
+    }
+  };
+  const onBlur = (event) => {
+    var _a, _b;
+    (_a = initialDOMProps == null ? void 0 : initialDOMProps.onBlur) == null ? void 0 : _a.call(initialDOMProps, event);
+    if (event.target === domRef.current) {
+      setFocused(false);
+      onSelfBlur == null ? void 0 : onSelfBlur(event);
+      if (focusedWithin) {
+        setFocusedWithin(false);
+        onBlurWithin == null ? void 0 : onBlurWithin(event);
+      }
+    } else {
+      const contained = (_b = domRef.current) == null ? void 0 : _b.contains(event.relatedTarget);
+      if (!contained) {
+        setFocusedWithin(false);
+        onBlurWithin == null ? void 0 : onBlurWithin(event);
+      }
+    }
+  };
+  const domProps = __spreadProps(__spreadValues({
+    tabIndex: 0
+  }, initialDOMProps), {
+    onFocus,
+    onBlur
+  });
+  const className = join(InfiniteTableClassName, InfiniteCls, columnShifts ? `${InfiniteClsShiftingColumns} ${InfiniteTableClassName}--shifting` : "", domProps == null ? void 0 : domProps.className, computedPinnedStartColumnsWidth ? `${InfiniteTableClassName}--has-pinned-start` : null, computedPinnedEndColumnsWidth ? `${InfiniteTableClassName}--has-pinned-end` : null, focused ? `${InfiniteTableClassName}--focused` : null, focusedWithin ? `${InfiniteTableClassName}--focused-within` : null, focused && componentState.focusedClassName ? componentState.focusedClassName : null, focusedWithin && componentState.focusedWithinClassName ? componentState.focusedWithinClassName : null, computed.computedPinnedStartOverflow ? `${InfiniteTableClassName}--has-pinned-start-overflow` : null, computed.computedPinnedEndOverflow ? `${InfiniteTableClassName}--has-pinned-end-overflow` : null, InfiniteClsRecipe({
+    hasPinnedStart: !!computedPinnedStartColumnsWidth,
+    hasPinnedEnd: !!computedPinnedEndColumnsWidth,
+    hasPinnedStartOverflow: !!computed.computedPinnedStartOverflow,
+    hasPinnedEndOverflow: !!computed.computedPinnedEndOverflow,
+    focused,
+    focusedWithin
+  }));
+  domProps.className = className;
+  domProps.style = __spreadValues({}, initialDOMProps == null ? void 0 : initialDOMProps.style);
+  if (focused) {
+    if (componentState.focusedStyle) {
+      Object.assign(domProps.style, componentState.focusedStyle);
+    }
+  }
+  if (focusedWithin) {
+    if (componentState.focusedWithinStyle) {
+      Object.assign(domProps.style, componentState.focusedWithinStyle);
+    }
+  }
+  return domProps;
+}
+
+// src/components/InfiniteTable/components/LoadMask.tsx
+import {
+  createElement as createElement32,
+  memo as memo12
+} from "react";
+
+// src/components/InfiniteTable/components/LoadMask.css.ts
+var LoadMaskCls = { visible: "qy58ya1 qy58ya0 _16lm1iw2 _16lm1iwp _16lm1iwr _16lm1iwv _16lm1iwt", hidden: "qy58ya2 qy58ya0 _16lm1iw2 _16lm1iwp _16lm1iwr _16lm1iwv _16lm1iwt" };
+var LoadMaskOverlayCls = "qy58ya3 _16lm1iw2 _16lm1iwp _16lm1iwr _16lm1iwv _16lm1iwt";
+var LoadMaskTextCls = "qy58ya4";
+
+// src/components/InfiniteTable/components/LoadMask.tsx
+var { rootClassName: rootClassName11 } = internalProps;
+var baseCls2 = `${rootClassName11}-LoadMask`;
+function LoadMaskFn(props) {
+  const { visible, children = "Loading" } = props;
+  return /* @__PURE__ */ createElement32("div", {
+    className: `${LoadMaskCls[visible ? "visible" : "hidden"]} ${baseCls2}`
+  }, /* @__PURE__ */ createElement32("div", {
+    className: `${LoadMaskOverlayCls} ${baseCls2}-Overlay`
+  }), /* @__PURE__ */ createElement32("div", {
+    className: `${LoadMaskTextCls} ${baseCls2}-Text`
+  }, children));
+}
+var LoadMask = memo12(LoadMaskFn);
+
 // src/components/InfiniteTable/index.tsx
 var InfiniteTableClassName = internalProps.rootClassName;
 var ONLY_VERTICAL_SCROLLBAR = {
@@ -6318,26 +7009,33 @@ var ONLY_VERTICAL_SCROLLBAR = {
   vertical: true
 };
 var InfiniteTableRoot = getComponentStateRoot({
-  getInitialState,
-  deriveReadOnlyState,
+  initSetupState,
+  forwardProps,
+  mapPropsToState,
+  allowedControlledPropOverrides: {
+    rowHeight: true,
+    headerHeight: true
+  },
   getParentState: () => useDataSource()
 });
-var InfiniteTableComponent = memo12(function InfiniteTableComponent2() {
+var InfiniteTableComponent = memo13(function InfiniteTableComponent2() {
+  var _a;
   const { componentState, getComputed, computed } = useInfiniteTable();
   const {
-    componentState: { dataArray }
+    componentState: { dataArray, loading }
   } = useDataSourceContextValue();
   const {
     domRef,
-    bodyDOMRef,
+    scrollerDOMRef,
     portalDOMRef,
-    domProps,
     licenseKey,
+    loadingText,
     header,
-    onRowHeightChange,
-    onHeaderHeightChange,
+    onRowHeightCSSVarChange,
+    onHeaderHeightCSSVarChange,
     rowHeightCSSVar,
-    headerHeightCSSVar
+    headerHeightCSSVar,
+    components
   } = componentState;
   const { columnShifts, bodySize } = componentState;
   const {
@@ -6359,39 +7057,40 @@ var InfiniteTableComponent = memo12(function InfiniteTableComponent2() {
     computed
   });
   const licenseValid = useLicense(licenseKey);
-  const className = join(InfiniteTableClassName, columnShifts ? `${InfiniteTableClassName}--shifting` : "", domProps == null ? void 0 : domProps.className, pinnedStartList ? `${InfiniteTableClassName}--has-pinned-start` : null, pinnedEndList ? `${InfiniteTableClassName}--has-pinned-end` : null, computed.computedPinnedStartOverflow ? `${InfiniteTableClassName}--has-pinned-start-overflow` : null, computed.computedPinnedEndOverflow ? `${InfiniteTableClassName}--has-pinned-end-overflow` : null);
-  return /* @__PURE__ */ createElement32("div", __spreadProps(__spreadValues({
+  const domProps = useDOMProps(componentState.domProps);
+  const LoadMaskCmp = (_a = components == null ? void 0 : components.LoadMask) != null ? _a : LoadMask;
+  return /* @__PURE__ */ createElement33("div", __spreadValues({
     ref: domRef
-  }, domProps), {
-    className
-  }), header ? /* @__PURE__ */ createElement32(TableHeaderWrapper, {
+  }, domProps), header ? /* @__PURE__ */ createElement33(TableHeaderWrapper, {
     brain: horizontalVirtualBrain,
     repaintId,
     scrollbars
-  }) : null, /* @__PURE__ */ createElement32(InfiniteTableBody, null, /* @__PURE__ */ createElement32(VirtualScrollContainer, {
-    ref: bodyDOMRef,
+  }) : null, /* @__PURE__ */ createElement33(InfiniteTableBody, null, /* @__PURE__ */ createElement33(VirtualScrollContainer, {
+    ref: scrollerDOMRef,
     onContainerScroll: applyScrollVertical,
     scrollable: ONLY_VERTICAL_SCROLLBAR
-  }, /* @__PURE__ */ createElement32("div", {
-    className: ICSS.display.flex
-  }, pinnedStartList, centerList, pinnedEndList), /* @__PURE__ */ createElement32(SpacePlaceholder, {
+  }, /* @__PURE__ */ createElement33("div", {
+    className: display.flex
+  }, pinnedStartList, centerList, pinnedEndList), /* @__PURE__ */ createElement33(SpacePlaceholder, {
     count: dataArray.length,
     width: 0,
     height: reservedContentHeight
-  })), pinnedStartScrollbarPlaceholder, pinnedEndScrollbarPlaceholder), licenseValid ? null : /* @__PURE__ */ createElement32(InfiniteTableLicenseFooter, null), /* @__PURE__ */ createElement32("div", {
+  })), pinnedStartScrollbarPlaceholder, pinnedEndScrollbarPlaceholder, /* @__PURE__ */ createElement33(LoadMaskCmp, {
+    visible: loading
+  }, loadingText)), licenseValid ? null : /* @__PURE__ */ createElement33(InfiniteTableLicenseFooter, null), /* @__PURE__ */ createElement33("div", {
     ref: portalDOMRef,
-    className: "ITable-Portal"
-  }), rowHeightCSSVar ? /* @__PURE__ */ createElement32(CSSVariableWatch, {
+    className: join(`${rootClassName}Portal`, zIndex[1e3], position.absolute, top[0], left[0])
+  }), rowHeightCSSVar ? /* @__PURE__ */ createElement33(CSSVariableWatch, {
     varName: rowHeightCSSVar,
-    onChange: onRowHeightChange
-  }) : null, headerHeightCSSVar ? /* @__PURE__ */ createElement32(CSSVariableWatch, {
+    onChange: onRowHeightCSSVarChange
+  }) : null, headerHeightCSSVar ? /* @__PURE__ */ createElement33(CSSVariableWatch, {
     varName: headerHeightCSSVar,
-    onChange: onHeaderHeightChange
+    onChange: onHeaderHeightCSSVarChange
   }) : null);
 });
 function InfiniteTableContextProvider() {
   const { componentActions, componentState } = useComponentState();
-  const { bodyDOMRef, bodySizeRef } = componentState;
+  const { scrollerDOMRef } = componentState;
   const computed = useComputed();
   const getComputed = useLatest(computed);
   const getState = useLatest(componentState);
@@ -6406,14 +7105,13 @@ function InfiniteTableContextProvider() {
     getComputed,
     getState
   };
-  useResizeObserver(bodyDOMRef, (size) => {
+  useResizeObserver(scrollerDOMRef, (size) => {
     var _a, _b;
     const bodySize = {
       width: size.width,
       height: size.height
     };
-    bodySize.width = (_b = (_a = bodyDOMRef.current) == null ? void 0 : _a.scrollWidth) != null ? _b : bodySize.width;
-    bodySizeRef.current = bodySize;
+    bodySize.width = (_b = (_a = scrollerDOMRef.current) == null ? void 0 : _a.scrollWidth) != null ? _b : bodySize.width;
     const state = getState();
     if (!state.virtualizeHeader) {
       componentActions.bodySize = bodySize;
@@ -6421,23 +7119,24 @@ function InfiniteTableContextProvider() {
     }
     componentActions.bodySize = bodySize;
   }, { earlyAttach: true });
-  useEffect21(() => {
+  useEffect22(() => {
     return () => {
-      componentState.onRowHeightChange.destroy();
-      componentState.onHeaderHeightChange.destroy();
+      componentState.onRowHeightCSSVarChange.destroy();
+      componentState.onHeaderHeightCSSVarChange.destroy();
     };
   }, []);
   const TableContext2 = getInfiniteTableContext();
-  return /* @__PURE__ */ createElement32(TableContext2.Provider, {
+  return /* @__PURE__ */ createElement33(TableContext2.Provider, {
     value: contextValue
-  }, /* @__PURE__ */ createElement32(InfiniteTableComponent, null));
+  }, /* @__PURE__ */ createElement33(InfiniteTableComponent, null));
 }
 function InfiniteTable(props) {
-  return /* @__PURE__ */ createElement32(StrictMode, null, /* @__PURE__ */ createElement32(InfiniteTableRoot, __spreadValues({}, props), /* @__PURE__ */ createElement32(InfiniteTableContextProvider, null)));
+  const table = /* @__PURE__ */ createElement33(InfiniteTableRoot, __spreadValues({}, props), /* @__PURE__ */ createElement33(InfiniteTableContextProvider, null));
+  return /* @__PURE__ */ createElement33(StrictMode, null, table);
 }
 InfiniteTable.defaultProps = {
   rowHeight: 40,
-  headerHeight: "--ITableHeader__height"
+  headerHeight: ThemeVars.components.Header.height
 };
 export {
   DataSource,