npm - @infinite-table/infinite-react - Versions diffs - 4.0.0 → 4.1.1 - Mend

@infinite-table/infinite-react 4.0.0 → 4.1.1

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

Files changed (7) hide show

package/index.dev.mjs CHANGED Viewed

@@ -1176,9 +1176,10 @@ var useOnScroll = (domRef, onScroll) => {
 };
 // src/components/VirtualScrollContainer/VirtualScrollContainer.css.ts
-var ScrollableCls = { true: "VirtualScrollContainer_getOverflowFor_true__1ueijco1", false: "VirtualScrollContainer_getOverflowFor_false__1ueijco2", visible: "VirtualScrollContainer_getOverflowFor_visible__1ueijco3", auto: "VirtualScrollContainer_getOverflowFor_auto__1ueijco4", hidden: "VirtualScrollContainer_getOverflowFor_hidden__1ueijco5" };
-var ScrollableHorizontalCls = { true: "VirtualScrollContainer_getOverflowFor_true__1ueijco6", false: "VirtualScrollContainer_getOverflowFor_false__1ueijco7", visible: "VirtualScrollContainer_getOverflowFor_visible__1ueijco8", auto: "VirtualScrollContainer_getOverflowFor_auto__1ueijco9", hidden: "VirtualScrollContainer_getOverflowFor_hidden__1ueijcoa" };
-var ScrollableVerticalCls = { true: "VirtualScrollContainer_getOverflowFor_true__1ueijcob", false: "VirtualScrollContainer_getOverflowFor_false__1ueijcoc", visible: "VirtualScrollContainer_getOverflowFor_visible__1ueijcod", auto: "VirtualScrollContainer_getOverflowFor_auto__1ueijcoe", hidden: "VirtualScrollContainer_getOverflowFor_hidden__1ueijcof" };
+var ScrollableCls = { true: "VirtualScrollContainer_getOverflowFor_true__1ueijco2", false: "VirtualScrollContainer_getOverflowFor_false__1ueijco3", visible: "VirtualScrollContainer_getOverflowFor_visible__1ueijco4", auto: "VirtualScrollContainer_getOverflowFor_auto__1ueijco5", hidden: "VirtualScrollContainer_getOverflowFor_hidden__1ueijco6" };
+var ScrollableHorizontalCls = { true: "VirtualScrollContainer_getOverflowFor_true__1ueijco7", false: "VirtualScrollContainer_getOverflowFor_false__1ueijco8", visible: "VirtualScrollContainer_getOverflowFor_visible__1ueijco9", auto: "VirtualScrollContainer_getOverflowFor_auto__1ueijcoa", hidden: "VirtualScrollContainer_getOverflowFor_hidden__1ueijcob" };
+var ScrollableVerticalCls = { true: "VirtualScrollContainer_getOverflowFor_true__1ueijcoc", false: "VirtualScrollContainer_getOverflowFor_false__1ueijcod", visible: "VirtualScrollContainer_getOverflowFor_visible__1ueijcoe", auto: "VirtualScrollContainer_getOverflowFor_auto__1ueijcof", hidden: "VirtualScrollContainer_getOverflowFor_hidden__1ueijcog" };
+var VirtualScrollContainerChildToScrollCls = "VirtualScrollContainer_VirtualScrollContainerChildToScrollCls__1ueijco1";
 var VirtualScrollContainerCls = "VirtualScrollContainer_VirtualScrollContainerCls__1ueijco0 utilities_boxSizingBorderBox__16lm1iw0";
 // src/components/VirtualScrollContainer/getScrollableClassName.ts
@@ -1387,7 +1388,7 @@ var internalProps = {
 };
 // src/components/InfiniteTable/vars.css.ts
-var ThemeVars = { color: { accent: "var(--infinite-accent-color)", error: "var(--infinite-error-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)", iconSize: "var(--infinite-icon-size)", 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)", columnHeaderHeight: "var(--infinite-column-header-height)" }, HeaderCell: { background: "var(--infinite-header-cell-background)", hoverBackground: "var(--infinite-header-cell-hover-background)", border: "var(--infinite-header-cell-border)", padding: "var(--infinite-header-cell-padding)", paddingX: "var(--infinite-header-cell-padding-x)", paddingY: "var(--infinite-header-cell-padding-y)", iconSize: "var(--infinite-header-cell-icon-size)", menuIconLineWidth: "var(--infinite-header-cell-menu-icon-line-width)", sortIconMargin: "var(--infinite-header-cell-sort-icon-margin)", borderRight: "var(--infinite-header-cell-border-right)", resizeHandleActiveAreaWidth: "var(--infinite-resize-handle-active-area-width)", resizeHandleWidth: "var(--infinite-resize-handle-width)", resizeHandleHoverBackground: "var(--infinite-resize-handle-hover-background)", resizeHandleConstrainedHoverBackground: "var(--infinite-resize-handle-constrained-hover-background)", filterOperatorPaddingX: "var(--infinite-filter-operator-padding-x)", filterEditorPaddingX: "var(--infinite-filter-editor-padding-x)", filterEditorMarginX: "var(--infinite-filter-editor-margin-x)", filterOperatorPaddingY: "var(--infinite-filter-operator-padding-y)", filterEditorPaddingY: "var(--infinite-filter-editor-padding-y)", filterEditorMarginY: "var(--infinite-filter-editor-margin-y)", filterEditorBackground: "var(--infinite-filter-editor-background)", filterEditorBorder: "var(--infinite-filter-editor-border)", filterEditorFocusBorderColor: "var(--infinite-filter-editor-focus-border-color)", filterEditorBorderRadius: "var(--infinite-filter-editor-border-radius)", filterEditorColor: "var(--infinite-filter-editor-color)" }, Cell: { padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", borderLeft: "var(--infinite-cell-border-left)", borderRight: "var(--infinite-cell-border-right)", borderTop: "var(--infinite-cell-border-top)", borderInvisible: "var(--infinite-cell-border-invisible)", borderRadius: "var(--infinite-cell-border-radius)", reorderEffectDuration: "var(--infinite-column-reorder-effect-duration)", pinnedBorder: "var(--infinite-pinned-cell-border)", color: "var(--infinite-cell-color)", selectedBackground: "var(--infinite-selected-cell-background)", selectedBackgroundDefault: "var(--infinite-selected-cell-background-default)", selectedBackgroundAlpha: "var(--infinite-selected-cell-background-alpha)", selectedBackgroundAlphaWhenTableUnfocused: "var(--infinite-selected-cell-background-alpha--table-unfocused)", selectedBorderColor: "var(--infinite-selected-cell-border-color)", selectedBorderWidth: "var(--infinite-selected-cell-border-width)", selectedBorderStyle: "var(--infinite-selected-cell-border-style)", selectedBorder: "var(--infinite-selected-cell-border)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBackground: "var(--infinite-active-cell-background)", activeBackgroundDefault: "var(--infinite-active-cell-background-default)", activeBorderColor: "var(--infinite-active-cell-border-color)", activeBorderWidth: "var(--infinite-active-cell-border-width)", activeBorderStyle: "var(--infinite-active-cell-border-style)", activeBorder: "var(--infinite-active-cell-border)" }, SelectionCheckBox: { marginInline: "var(--infinite-selection-checkbox-margin-inline)" }, Menu: { background: "var(--infinite-menu-background)", color: "var(--infinite-menu-color)", separatorColor: "var(--infinite-menu-separator-color)", padding: "var(--infinite-menu-padding)", cellPaddingVertical: "var(--infinite-menu-cell-padding-vertical)", cellPaddingHorizontal: "var(--infinite-menu-cell-padding-horizontal)", cellMarginVertical: "var(--infinite-menu-cell-margin-vertical)", itemDisabledBackground: "var(--infinite-menu-item-disabled-background)", itemActiveBackground: "var(--infinite-menu-item-active-background)", itemActiveOpacity: "var(--infinite-menu-item-active-opacity)", itemPressedOpacity: "var(--infinite-menu-item-pressed-opacity)", itemPressedBackground: "var(--infinite-menu-item-pressed-background)", itemDisabledOpacity: "var(--infinite-menu-item-disabled-opacity)", borderRadius: "var(--infinite-menu-border-radius)", shadowColor: "var(--infinite-menu-shadow-color)" }, RowDetail: { background: "var(--infinite-rowdetail-background)", padding: "var(--infinite-rowdetail-padding)", gridHeight: "var(--infinite-rowdetail-grid-height)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", selectedBackground: "var(--infinite-row-selected-background)", activeBackground: "var(--infinite-active-row-background)", activeBorderColor: "var(--infinite-active-row-border-color)", activeBorderWidth: "var(--infinite-active-row-border-width)", activeBorderStyle: "var(--infinite-active-row-border-style)", activeBorder: "var(--infinite-active-row-border)", activeBackgroundAlpha: "var(--infinite-active-row-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-row-background-alpha--table-unfocused)", hoverBackground: "var(--infinite-row-hover-background)", selectedHoverBackground: "var(--infinite-row-selected-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)" } } };
+var ThemeVars = { color: { accent: "var(--infinite-accent-color)", error: "var(--infinite-error-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)", iconSize: "var(--infinite-icon-size)", runtime: { bodyWidth: "var(--infinite-runtime-body-content-width)", totalVisibleColumnsWidth: "var(--infinite-runtime-total-visible-columns-width)", visibleColumnsCount: "var(--infinite-runtime-visible-columns-count)" }, 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)", columnHeaderHeight: "var(--infinite-column-header-height)" }, HeaderCell: { background: "var(--infinite-header-cell-background)", hoverBackground: "var(--infinite-header-cell-hover-background)", border: "var(--infinite-header-cell-border)", padding: "var(--infinite-header-cell-padding)", paddingX: "var(--infinite-header-cell-padding-x)", paddingY: "var(--infinite-header-cell-padding-y)", iconSize: "var(--infinite-header-cell-icon-size)", menuIconLineWidth: "var(--infinite-header-cell-menu-icon-line-width)", sortIconMargin: "var(--infinite-header-cell-sort-icon-margin)", borderRight: "var(--infinite-header-cell-border-right)", resizeHandleActiveAreaWidth: "var(--infinite-resize-handle-active-area-width)", resizeHandleWidth: "var(--infinite-resize-handle-width)", resizeHandleHoverBackground: "var(--infinite-resize-handle-hover-background)", resizeHandleConstrainedHoverBackground: "var(--infinite-resize-handle-constrained-hover-background)", filterOperatorPaddingX: "var(--infinite-filter-operator-padding-x)", filterEditorPaddingX: "var(--infinite-filter-editor-padding-x)", filterEditorMarginX: "var(--infinite-filter-editor-margin-x)", filterOperatorPaddingY: "var(--infinite-filter-operator-padding-y)", filterEditorPaddingY: "var(--infinite-filter-editor-padding-y)", filterEditorMarginY: "var(--infinite-filter-editor-margin-y)", filterEditorBackground: "var(--infinite-filter-editor-background)", filterEditorBorder: "var(--infinite-filter-editor-border)", filterEditorFocusBorderColor: "var(--infinite-filter-editor-focus-border-color)", filterEditorBorderRadius: "var(--infinite-filter-editor-border-radius)", filterEditorColor: "var(--infinite-filter-editor-color)" }, ActiveCellIndicator: { inset: "var(--infinite-active-cell-indicator-inset)" }, Cell: { padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", borderLeft: "var(--infinite-cell-border-left)", borderRight: "var(--infinite-cell-border-right)", borderTop: "var(--infinite-cell-border-top)", borderInvisible: "var(--infinite-cell-border-invisible)", borderRadius: "var(--infinite-cell-border-radius)", reorderEffectDuration: "var(--infinite-column-reorder-effect-duration)", pinnedBorder: "var(--infinite-pinned-cell-border)", color: "var(--infinite-cell-color)", selectedBackground: "var(--infinite-selected-cell-background)", selectedBackgroundDefault: "var(--infinite-selected-cell-background-default)", selectedBackgroundAlpha: "var(--infinite-selected-cell-background-alpha)", selectedBackgroundAlphaWhenTableUnfocused: "var(--infinite-selected-cell-background-alpha--table-unfocused)", selectedBorderColor: "var(--infinite-selected-cell-border-color)", selectedBorderWidth: "var(--infinite-selected-cell-border-width)", selectedBorderStyle: "var(--infinite-selected-cell-border-style)", selectedBorder: "var(--infinite-selected-cell-border)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBackground: "var(--infinite-active-cell-background)", activeBackgroundDefault: "var(--infinite-active-cell-background-default)", activeBorderColor: "var(--infinite-active-cell-border-color)", activeBorderWidth: "var(--infinite-active-cell-border-width)", activeBorderStyle: "var(--infinite-active-cell-border-style)", activeBorder: "var(--infinite-active-cell-border)" }, SelectionCheckBox: { marginInline: "var(--infinite-selection-checkbox-margin-inline)" }, Menu: { background: "var(--infinite-menu-background)", color: "var(--infinite-menu-color)", separatorColor: "var(--infinite-menu-separator-color)", padding: "var(--infinite-menu-padding)", cellPaddingVertical: "var(--infinite-menu-cell-padding-vertical)", cellPaddingHorizontal: "var(--infinite-menu-cell-padding-horizontal)", cellMarginVertical: "var(--infinite-menu-cell-margin-vertical)", itemDisabledBackground: "var(--infinite-menu-item-disabled-background)", itemActiveBackground: "var(--infinite-menu-item-active-background)", itemActiveOpacity: "var(--infinite-menu-item-active-opacity)", itemPressedOpacity: "var(--infinite-menu-item-pressed-opacity)", itemPressedBackground: "var(--infinite-menu-item-pressed-background)", itemDisabledOpacity: "var(--infinite-menu-item-disabled-opacity)", borderRadius: "var(--infinite-menu-border-radius)", shadowColor: "var(--infinite-menu-shadow-color)" }, RowDetail: { background: "var(--infinite-rowdetail-background)", padding: "var(--infinite-rowdetail-padding)", gridHeight: "var(--infinite-rowdetail-grid-height)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", selectedBackground: "var(--infinite-row-selected-background)", activeBackground: "var(--infinite-active-row-background)", activeBorderColor: "var(--infinite-active-row-border-color)", activeBorderWidth: "var(--infinite-active-row-border-width)", activeBorderStyle: "var(--infinite-active-row-border-style)", activeBorder: "var(--infinite-active-row-border)", activeBackgroundAlpha: "var(--infinite-active-row-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-row-background-alpha--table-unfocused)", hoverBackground: "var(--infinite-row-hover-background)", selectedHoverBackground: "var(--infinite-row-selected-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)" } } };
 var columnHeaderHeightName = "column-header-height";
 // src/components/InfiniteTable/utils/infiniteDOMUtils.ts
@@ -4096,8 +4097,8 @@ var useRerender = () => {
 };
 // src/components/InfiniteTable/components/ActiveCellIndicator.css.ts
-var ActiveCellIndicatorCls = { visible: "ActiveCellIndicator_ActiveCellIndicatorCls_visible__nxbq1c2 ActiveCellIndicator_ActiveCellIndicator__nxbq1c1 utilities_pointerEvents_none__16lm1iwl utilities_position_sticky__16lm1iw4 utilities_left_0__16lm1iw1e utilities_top_0__16lm1iw1c", hidden: "ActiveCellIndicator_ActiveCellIndicatorCls_hidden__nxbq1c3 ActiveCellIndicator_ActiveCellIndicator__nxbq1c1 utilities_pointerEvents_none__16lm1iwl utilities_position_sticky__16lm1iw4 utilities_left_0__16lm1iw1e utilities_top_0__16lm1iw1c" };
-var ActiveIndicatorWrapperCls = "utilities_pointerEvents_none__16lm1iwl utilities_position_sticky__16lm1iw4 utilities_left_0__16lm1iw1e utilities_top_0__16lm1iw1c utilities_height_0__16lm1iw18 utilities_zIndex_1000000__16lm1iwu";
+var ActiveCellIndicatorCls = { visible: "ActiveCellIndicator_ActiveCellIndicatorCls_visible__nxbq1c2 ActiveCellIndicator_ActiveCellIndicator__nxbq1c1 utilities_pointerEvents_none__16lm1iwl utilities_position_absolute__16lm1iw2", hidden: "ActiveCellIndicator_ActiveCellIndicatorCls_hidden__nxbq1c3 ActiveCellIndicator_ActiveCellIndicator__nxbq1c1 utilities_pointerEvents_none__16lm1iwl utilities_position_absolute__16lm1iw2" };
+var ActiveIndicatorWrapperCls = "ActiveCellIndicator_ActiveIndicatorWrapperCls__nxbq1c0 utilities_pointerEvents_none__16lm1iwl utilities_position_sticky__16lm1iw4 utilities_left_0__16lm1iw1e utilities_top_0__16lm1iw1c utilities_height_0__16lm1iw18 utilities_zIndex_1000000__16lm1iwu";
 // src/components/InfiniteTable/components/ActiveRowIndicator.css.ts
 var ActiveRowIndicatorCls = { visible: "ActiveRowIndicator_ActiveRowIndicatorCls_visible__j26lrx1 ActiveRowIndicator_ActiveRowIndicator__j26lrx0 utilities_pointerEvents_none__16lm1iwl utilities_position_sticky__16lm1iw4 utilities_width_100%__16lm1iw1b utilities_top_0__16lm1iw1c utilities_left_0__16lm1iw1e", hidden: "ActiveRowIndicator_ActiveRowIndicatorCls_hidden__j26lrx2 ActiveRowIndicator_ActiveRowIndicator__j26lrx0 utilities_pointerEvents_none__16lm1iwl utilities_position_sticky__16lm1iw4 utilities_width_100%__16lm1iw1b utilities_top_0__16lm1iw1c utilities_left_0__16lm1iw1e" };
@@ -4167,13 +4168,6 @@ import { useEffect as useEffect6, useLayoutEffect as useLayoutEffect5, useRef as
 var { rootClassName: rootClassName4 } = internalProps;
 var baseCls2 = `${rootClassName4}-ActiveCellIndicator`;
 var columnZIndexAtIndex2 = stripVar(InternalVars.columnZIndexAtIndex);
-var ActiveStyle2 = {
-  [stripVar(InternalVars.activeCellOffsetX)]: InternalVars.activeCellColOffset,
-  [stripVar(InternalVars.activeCellOffsetY)]: InternalVars.activeCellRowOffset,
-  transform: `translate3d(${InternalVars.activeCellOffsetX}, ${InternalVars.activeCellOffsetY}, 0px)`,
-  width: InternalVars.activeCellColWidth,
-  height: InternalVars.activeCellRowHeight
-};
 var reposition = (brain, activeCellIndex, rowHeight, domRef) => {
   if (activeCellIndex == null) {
     return;
@@ -4212,6 +4206,7 @@ var ActiveCellIndicatorFn = (props) => {
       "div",
       {
         className: ActiveIndicatorWrapperCls,
+        ref: domRef,
         "data-name": "active-cell",
         style: active ? {
           zIndex: `var(${columnZIndexAtIndex2}-${props.activeCellIndex[1]})`
@@ -4220,10 +4215,8 @@ var ActiveCellIndicatorFn = (props) => {
       /* @__PURE__ */ React12.createElement(
         "div",
         {
-          ref: domRef,
           "data-name": "active-cell-indicator",
-          className: `${baseCls2} ${active ? ActiveCellIndicatorCls.visible : ActiveCellIndicatorCls.hidden}`,
-          style: active ? ActiveStyle2 : void 0
+          className: `${baseCls2} ${active ? ActiveCellIndicatorCls.visible : ActiveCellIndicatorCls.hidden}`
         }
       )
     )
@@ -4254,6 +4247,10 @@ function useMatrixBrain(brain, brainOptions, fixedCellsInfo) {
     colspan: brainOptions.colspan
   });
 }
+var CHILD_TO_SCROLL_CLS = join(
+  scrollTransformTargetCls,
+  VirtualScrollContainerChildToScrollCls
+);
 function HeadlessTable(props) {
   const _a = props, {
     brain,
@@ -4332,7 +4329,7 @@ function HeadlessTable(props) {
       "div",
       {
         ref: domRef,
-        className: scrollTransformTargetCls,
+        className: CHILD_TO_SCROLL_CLS,
         "data-name": "scroll-transform-target"
       },
       /* @__PURE__ */ React13.createElement(
@@ -4768,7 +4765,7 @@ function useComponentState() {
   return React14.useContext(Context);
 }
-// src/components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBody.tsx
+// src/components/InfiniteTable/components/InfiniteTableFooter/InfiniteTableFooter.tsx
 import * as React15 from "react";
 // src/components/InfiniteTable/hooks/useInternalProps.ts
@@ -4795,49 +4792,25 @@ var userSelect = { none: "utilities_userSelect_none__16lm1iw17" };
 var visibility = { visible: "utilities_visibility_visible__16lm1iw20", hidden: "utilities_visibility_hidden__16lm1iw21" };
 var zIndex = { "1": "utilities_zIndex_1__16lm1iwo", "10": "utilities_zIndex_10__16lm1iwp", "100": "utilities_zIndex_100__16lm1iwq", "1000": "utilities_zIndex_1000__16lm1iwr", "10000": "utilities_zIndex_10000__16lm1iws", "100000": "utilities_zIndex_100000__16lm1iwt", "1000000": "utilities_zIndex_1000000__16lm1iwu", "10000000": "utilities_zIndex_10000000__16lm1iwv", "1k": "utilities_zIndex_1k__16lm1iww", "10k": "utilities_zIndex_10k__16lm1iwx", "100k": "utilities_zIndex_100k__16lm1iwy" };
-// src/components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBody.tsx
-var InfiniteTableBody = React15.forwardRef(function InfiniteTableBody2(props, ref) {
+// src/components/InfiniteTable/components/InfiniteTableFooter/InfiniteTableFooter.tsx
+function InfiniteTableFooter(props) {
   const { rootClassName: rootClassName12 } = useInternalProps();
   return /* @__PURE__ */ React15.createElement(
     "div",
-    __spreadProps(__spreadValues({
-      ref
-    }, props), {
+    __spreadProps(__spreadValues({}, props), {
       className: join(
-        `${rootClassName12}Body`,
+        `${rootClassName12}Footer`,
         position.relative,
-        flex["1"],
-        transformTranslateZero,
+        display.flex,
+        flexFlow.row,
         props.className
       )
     })
   );
-});
-// src/components/InfiniteTable/components/InfiniteTableFooter/InfiniteTableFooter.tsx
-import * as React16 from "react";
-var InfiniteTableFooter = React16.forwardRef(
-  function InfiniteTableFooter2(props, ref) {
-    const { rootClassName: rootClassName12 } = useInternalProps();
-    return /* @__PURE__ */ React16.createElement(
-      "div",
-      __spreadProps(__spreadValues({
-        ref
-      }, props), {
-        className: join(
-          `${rootClassName12}Footer`,
-          position.relative,
-          display.flex,
-          flexFlow.row,
-          props.className
-        )
-      })
-    );
-  }
-);
+}
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
-import * as React43 from "react";
+import * as React42 from "react";
 import { useCallback as useCallback14, useContext as useContext7, useEffect as useEffect15, useRef as useRef16 } from "react";
 import { createPortal } from "react-dom";
@@ -4851,7 +4824,7 @@ function keyMirror(obj) {
 }
 // src/components/InfiniteTable/components/icons/Icon.tsx
-import * as React17 from "react";
+import * as React16 from "react";
 var Icon = (props) => {
   var _a;
   const size = (_a = props.size) != null ? _a : `var(--infinite-icon-size)`;
@@ -4863,69 +4836,69 @@ var Icon = (props) => {
   }, props.style);
   return (
     //@ts-ignore
-    /* @__PURE__ */ React17.createElement("svg", __spreadProps(__spreadValues({ viewBox: "0 0 24 24" }, props), { style: style2 }), props.children)
+    /* @__PURE__ */ React16.createElement("svg", __spreadProps(__spreadValues({ viewBox: "0 0 24 24" }, props), { style: style2 }), props.children)
   );
 };
 // src/components/InfiniteTable/components/icons/IncludesOperatorIcon.tsx
-import * as React18 from "react";
+import * as React17 from "react";
 var IncludesOperatorIcon = (props) => {
-  return /* @__PURE__ */ React18.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React18.createElement("path", { d: "M5,4V7H10.5V19H13.5V7H19V4H5Z" }));
+  return /* @__PURE__ */ React17.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React17.createElement("path", { d: "M5,4V7H10.5V19H13.5V7H19V4H5Z" }));
 };
 // src/components/InfiniteTable/components/icons/EndsWithOperatorIcon.tsx
-import * as React19 from "react";
+import * as React18 from "react";
 var EndsWithOperatorIcon = (props) => {
-  return /* @__PURE__ */ React19.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React19.createElement("path", { d: "M11.14 4L6.43 16H8.36L9.32 13.43H14.67L15.64 16H17.57L12.86 4M12 6.29L14.03 11.71H9.96M20 14V18H2V20H22V14Z" }));
+  return /* @__PURE__ */ React18.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React18.createElement("path", { d: "M11.14 4L6.43 16H8.36L9.32 13.43H14.67L15.64 16H17.57L12.86 4M12 6.29L14.03 11.71H9.96M20 14V18H2V20H22V14Z" }));
 };
 // src/components/InfiniteTable/components/icons/EqualOperatorIcon.tsx
-import * as React20 from "react";
+import * as React19 from "react";
 var EqualOperatorIcon = (props) => {
-  return /* @__PURE__ */ React20.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React20.createElement("path", { d: "M19,10H5V8H19V10M19,16H5V14H19V16Z" }));
+  return /* @__PURE__ */ React19.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React19.createElement("path", { d: "M19,10H5V8H19V10M19,16H5V14H19V16Z" }));
 };
 // src/components/InfiniteTable/components/icons/GTEOperatorIcon.tsx
-import * as React21 from "react";
+import * as React20 from "react";
 var GTEOperatorIcon = (props) => {
-  return /* @__PURE__ */ React21.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React21.createElement("path", { d: "M6.5,2.27L20,10.14L6.5,18L5.5,16.27L16.03,10.14L5.5,4L6.5,2.27M20,20V22H5V20H20Z" }));
+  return /* @__PURE__ */ React20.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React20.createElement("path", { d: "M6.5,2.27L20,10.14L6.5,18L5.5,16.27L16.03,10.14L5.5,4L6.5,2.27M20,20V22H5V20H20Z" }));
 };
 // src/components/InfiniteTable/components/icons/GTOperatorIcon.tsx
-import * as React22 from "react";
+import * as React21 from "react";
 var GTOperatorIcon = (props) => {
-  return /* @__PURE__ */ React22.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React22.createElement("path", { d: "M5.5,4.14L4.5,5.86L15,12L4.5,18.14L5.5,19.86L19,12L5.5,4.14Z" }));
+  return /* @__PURE__ */ React21.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React21.createElement("path", { d: "M5.5,4.14L4.5,5.86L15,12L4.5,18.14L5.5,19.86L19,12L5.5,4.14Z" }));
 };
 // src/components/InfiniteTable/components/icons/LTEOperatorIcon.tsx
-import * as React23 from "react";
+import * as React22 from "react";
 var LTEOperatorIcon = (props) => {
-  return /* @__PURE__ */ React23.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React23.createElement("path", { d: "M18.5,2.27L5,10.14L18.5,18L19.5,16.27L8.97,10.14L19.5,4L18.5,2.27M5,20V22H20V20H5Z" }));
+  return /* @__PURE__ */ React22.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React22.createElement("path", { d: "M18.5,2.27L5,10.14L18.5,18L19.5,16.27L8.97,10.14L19.5,4L18.5,2.27M5,20V22H20V20H5Z" }));
 };
 // src/components/InfiniteTable/components/icons/LTOperatorIcon.tsx
-import * as React24 from "react";
+import * as React23 from "react";
 var LTOperatorIcon = (props) => {
-  return /* @__PURE__ */ React24.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React24.createElement("path", { d: "M18.5,4.14L19.5,5.86L8.97,12L19.5,18.14L18.5,19.86L5,12L18.5,4.14Z" }));
+  return /* @__PURE__ */ React23.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React23.createElement("path", { d: "M18.5,4.14L19.5,5.86L8.97,12L19.5,18.14L18.5,19.86L5,12L18.5,4.14Z" }));
 };
 // src/components/InfiniteTable/components/icons/NotEqualOperatorIcon.tsx
-import * as React25 from "react";
+import * as React24 from "react";
 var NotEqualOperatorIcon = (props) => {
-  return /* @__PURE__ */ React25.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React25.createElement("path", { d: "M21,10H9V8H21V10M21,16H9V14H21V16M4,5H6V16H4V5M6,18V20H4V18H6Z" }));
+  return /* @__PURE__ */ React24.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React24.createElement("path", { d: "M21,10H9V8H21V10M21,16H9V14H21V16M4,5H6V16H4V5M6,18V20H4V18H6Z" }));
 };
 // src/components/InfiniteTable/components/icons/StartsWithOperatorIcon.tsx
-import * as React26 from "react";
+import * as React25 from "react";
 var StartsWithOperatorIcon = (props) => {
-  return /* @__PURE__ */ React26.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React26.createElement("path", { d: "M11.14 4L6.43 16H8.36L9.32 13.43H14.67L15.64 16H17.57L12.86 4M12 6.29L14.03 11.71H9.96M4 18V15H2V20H22V18Z" }));
+  return /* @__PURE__ */ React25.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React25.createElement("path", { d: "M11.14 4L6.43 16H8.36L9.32 13.43H14.67L15.64 16H17.57L12.86 4M12 6.29L14.03 11.71H9.96M4 18V15H2V20H22V18Z" }));
 };
 // src/components/InfiniteTable/components/FilterEditors.tsx
-import * as React30 from "react";
+import * as React29 from "react";
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableColumnHeaderFilter.tsx
-import * as React29 from "react";
+import * as React28 from "react";
 import { useEffect as useEffect11, useState as useState6 } from "react";
 // src/components/InfiniteTable/hooks/useInfiniteTable.ts
@@ -4958,7 +4931,7 @@ var useInfiniteTableState = () => {
 };
 // src/components/InfiniteTable/components/icons/FilterIcon.tsx
-import * as React27 from "react";
+import * as React26 from "react";
 import { useEffect as useEffect10, useLayoutEffect as useLayoutEffect8, useState as useState5 } from "react";
 // ../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js
@@ -5132,7 +5105,7 @@ function FilterIcon(props) {
     return null;
   }
   const indexStyle = {};
-  return /* @__PURE__ */ React27.createElement(
+  return /* @__PURE__ */ React26.createElement(
     "div",
     {
       "data-name": "filter-icon",
@@ -5144,7 +5117,7 @@ function FilterIcon(props) {
         `${InfiniteTableIconClassName}-sort`
       )
     },
-    showIndex ? /* @__PURE__ */ React27.createElement(
+    showIndex ? /* @__PURE__ */ React26.createElement(
       "div",
       {
         "data-name": "index",
@@ -5153,9 +5126,9 @@ function FilterIcon(props) {
       },
       index
     ) : null,
-    /* @__PURE__ */ React27.createElement("div", { style: __spreadValues({ width: sizes[0] }, lineStyle) }),
-    /* @__PURE__ */ React27.createElement("div", { style: __spreadValues({ width: sizes[1] }, lineStyle) }),
-    /* @__PURE__ */ React27.createElement("div", { style: __spreadValues({ width: sizes[2] }, lineStyle) })
+    /* @__PURE__ */ React26.createElement("div", { style: __spreadValues({ width: sizes[0] }, lineStyle) }),
+    /* @__PURE__ */ React26.createElement("div", { style: __spreadValues({ width: sizes[1] }, lineStyle) }),
+    /* @__PURE__ */ React26.createElement("div", { style: __spreadValues({ width: sizes[2] }, lineStyle) })
   );
 }
@@ -6200,10 +6173,10 @@ function getColumnLabel(colIdOrCol, context) {
 }
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableColumnHeaderFilterContext.ts
-import React28 from "react";
+import React27 from "react";
 var InfiniteTableColumnHeaderFilterClassName = `${rootClassName2}HeaderCell__filter`;
 var InfiniteTableColumnHeaderFilterOperatorClassName = `${rootClassName2}HeaderCell__filterOperator`;
-var InfiniteTableColumnHeaderFilterContext = React28.createContext(null);
+var InfiniteTableColumnHeaderFilterContext = React27.createContext(null);
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableColumnHeaderFilter.tsx
 var InfiniteTableColumnHeaderFilterInputClassName = `${InfiniteTableColumnHeaderFilterClassName}__input`;
@@ -6214,14 +6187,14 @@ function InfiniteTableColumnHeaderFilter(props) {
   const FilterEditor = props.filterEditor;
   const FilterOperatorSwitch = props.filterOperatorSwitch;
   const [focused, setFocused] = useState6(false);
-  const onFocus = React29.useCallback(() => {
+  const onFocus = React28.useCallback(() => {
     setFocused(true);
   }, []);
-  const onBlur = React29.useCallback(() => {
+  const onBlur = React28.useCallback(() => {
     setFocused(false);
   }, []);
   const active = filterOperatorMenuVisibleForColumnId === column.id || focused;
-  return /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React28.createElement(
     "div",
     {
       onPointerUp: stopPropagation,
@@ -6235,14 +6208,14 @@ function InfiniteTableColumnHeaderFilter(props) {
       )}`,
       style: { height: props.columnHeaderHeight }
     },
-    /* @__PURE__ */ React29.createElement(InfiniteTableColumnHeaderFilterContext.Provider, { value: props }, /* @__PURE__ */ React29.createElement(FilterOperatorSwitch, null), /* @__PURE__ */ React29.createElement(FilterEditor, null))
+    /* @__PURE__ */ React28.createElement(InfiniteTableColumnHeaderFilterContext.Provider, { value: props }, /* @__PURE__ */ React28.createElement(FilterOperatorSwitch, null), /* @__PURE__ */ React28.createElement(FilterEditor, null))
   );
 }
 function InfiniteTableFilterOperatorSwitch() {
   var _a, _b;
   const { columnApi, disabled, operator } = useInfiniteColumnFilterEditor();
   const Icon2 = (_b = (_a = operator == null ? void 0 : operator.components) == null ? void 0 : _a.Icon) != null ? _b : FilterIcon;
-  return /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React28.createElement(
     "div",
     {
       "data-name": "filter-operator",
@@ -6260,7 +6233,7 @@ function InfiniteTableFilterOperatorSwitch() {
         disabled ? `${InfiniteTableColumnHeaderFilterOperatorClassName}--disabled` : ""
       )
     },
-    /* @__PURE__ */ React29.createElement(
+    /* @__PURE__ */ React28.createElement(
       Icon2,
       {
         size: 20,
@@ -6272,7 +6245,7 @@ function InfiniteTableFilterOperatorSwitch() {
   );
 }
 function InfiniteTableColumnHeaderFilterEmpty() {
-  return /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React28.createElement(
     "div",
     {
       onPointerUp: stopPropagation,
@@ -6289,7 +6262,7 @@ function useInfiniteColumnFilterEditor() {
   const context = useInfiniteTable();
   const { column, columnApi } = useInfiniteHeaderCell();
   const columnLabel = getColumnLabel(column, context);
-  const filterContextValue = React29.useContext(
+  const filterContextValue = React28.useContext(
     InfiniteTableColumnHeaderFilterContext
   );
   const { columnFilterType, filterTypes, columnFilterValue } = filterContextValue;
@@ -6297,17 +6270,17 @@ function useInfiniteColumnFilterEditor() {
   const [theValue, setTheValue] = useState6(
     (_a = columnFilterValue == null ? void 0 : columnFilterValue.filter.value) != null ? _a : ""
   );
-  const onInputChange = React29.useCallback(
+  const onInputChange = React28.useCallback(
     (filterValue) => {
       setTheValue(filterValue);
       filterContextValue.onChange(filterValue);
     },
     [filterContextValue.onChange]
   );
-  const clearValue = React29.useCallback(() => {
+  const clearValue = React28.useCallback(() => {
     context.api.clearColumnFilter(column.id);
   }, [column.id]);
-  const removeColumnFilter = React29.useCallback(() => {
+  const removeColumnFilter = React28.useCallback(() => {
     context.api.removeColumnFilter(column.id);
   }, [column.id]);
   useEffect11(() => {
@@ -6350,7 +6323,7 @@ function useInfiniteColumnFilterEditor() {
 // src/components/InfiniteTable/components/FilterEditors.tsx
 function StringFilterEditor() {
   const { ariaLabel, value, setValue, className, disabled } = useInfiniteColumnFilterEditor();
-  return /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React29.createElement(
     "input",
     {
       "data-xxx": true,
@@ -6367,7 +6340,7 @@ function StringFilterEditor() {
 }
 function NumberFilterEditor() {
   const { ariaLabel, value, setValue, className, disabled } = useInfiniteColumnFilterEditor();
-  return /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React29.createElement(
     "input",
     {
       "aria-label": ariaLabel,
@@ -6608,6 +6581,17 @@ var rafFn = (fn) => {
 };
 // src/components/InfiniteTable/hooks/useDOMProps.ts
+var publicRuntimeVars = {
+  bodyWidth: { name: stripVar(ThemeVars.runtime.bodyWidth), value: "" },
+  totalVisibleColumnsWidth: {
+    name: stripVar(ThemeVars.runtime.totalVisibleColumnsWidth),
+    value: ""
+  },
+  visibleColumnsCount: {
+    name: stripVar(ThemeVars.runtime.visibleColumnsCount),
+    value: ""
+  }
+};
 var scrollbarWidthHorizontal = stripVar(
   InternalVars.scrollbarWidthHorizontal
 );
@@ -6663,6 +6647,7 @@ function useDOMProps(initialDOMProps) {
     computedPinnedStartColumns,
     computedPinnedEndColumns,
     computedVisibleColumns,
+    computedUnpinnedColumnsWidth,
     scrollbars
   } = computed;
   const prevPinnedEndCols = [];
@@ -6688,6 +6673,9 @@ function useDOMProps(initialDOMProps) {
     },
     {}
   );
+  cssVars[publicRuntimeVars.bodyWidth.name] = `calc(${InternalVars.bodyWidth} - ${InternalVars.scrollbarWidthVertical})`;
+  cssVars[publicRuntimeVars.totalVisibleColumnsWidth.name] = `${computedPinnedStartColumnsWidth + computedPinnedEndColumnsWidth + computedUnpinnedColumnsWidth}px`;
+  cssVars[publicRuntimeVars.visibleColumnsCount.name] = computedVisibleColumns.length;
   if (activeCellIndex != null) {
     cssVars[activeCellColWidth] = `var(${getCSSVarNameForColWidth(
       activeCellIndex[1]
@@ -7427,14 +7415,14 @@ var useColumnPointerEvents = ({
 };
 // src/components/InfiniteTable/utils/RenderHookComponentForInfinite.tsx
-import * as React38 from "react";
+import * as React37 from "react";
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx
-import * as React37 from "react";
+import * as React36 from "react";
 import { useCallback as useCallback12, useContext as useContext6, useMemo as useMemo4 } from "react";
 // src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
-import * as React33 from "react";
+import * as React32 from "react";
 // src/components/DataSource/state/rowInfoStatus.ts
 var showLoadingIcon = (rowInfo) => {
@@ -7445,7 +7433,7 @@ var showLoadingIcon = (rowInfo) => {
 };
 // src/components/InfiniteTable/components/icons/ExpanderIcon.tsx
-import * as React31 from "react";
+import * as React30 from "react";
 import { useState as useState8 } from "react";
 // src/components/InfiniteTable/components/icons/ExpanderIcon.css.ts
@@ -7466,12 +7454,12 @@ function ExpanderIcon(props) {
       setExpanded(!expanded);
     }
   };
-  React31.useEffect(() => {
+  React30.useEffect(() => {
     if (isControlled("expanded", props)) {
       setExpanded(props.expanded);
     }
   }, [props.expanded]);
-  return /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React30.createElement(
     "svg",
     {
       "data-name": "expander-icon",
@@ -7494,19 +7482,19 @@ function ExpanderIcon(props) {
         `InfiniteIcon-expander--${direction === "end" ? "end" : "start"}`
       )
     },
-    /* @__PURE__ */ React31.createElement("path", { d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" })
+    /* @__PURE__ */ React30.createElement("path", { d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" })
   );
 }
 // src/components/InfiniteTable/components/icons/LoadingIcon.tsx
-import * as React32 from "react";
+import * as React31 from "react";
 // src/components/InfiniteTable/components/icons/LoadingIcon.css.ts
 var LoadingIconCls = "utilities_stroke_accentColor__16lm1iwb utilities_flex_none__16lm1iwn utilities_cursor_pointer__16lm1iwi";
 // src/components/InfiniteTable/components/icons/LoadingIcon.tsx
 var LoadingIcon = (props) => {
-  return /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React31.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -7526,7 +7514,7 @@ var LoadingIcon = (props) => {
         "InfiniteIcon-loading"
       )
     },
-    /* @__PURE__ */ React32.createElement(
+    /* @__PURE__ */ React31.createElement(
       "circle",
       {
         cx: "50",
@@ -7536,7 +7524,7 @@ var LoadingIcon = (props) => {
         r: "35",
         strokeDasharray: "164.93361431346415 56.97787143782138"
       },
-      /* @__PURE__ */ React32.createElement(
+      /* @__PURE__ */ React31.createElement(
         "animateTransform",
         {
           attributeName: "transform",
@@ -7581,11 +7569,11 @@ function getGroupColumnRender({
     );
     if (groupRenderStrategy === "multi-column") {
       if (groupIndexForColumn + 1 !== groupRowInfo.groupNesting && groupRowInfo.isGroupRow) {
-        return selectionCheckBox ? /* @__PURE__ */ React33.createElement("div", { className }, selectionCheckBox) : null;
+        return selectionCheckBox ? /* @__PURE__ */ React32.createElement("div", { className }, selectionCheckBox) : null;
       }
     } else if (groupRenderStrategy === "single-column" && !groupRowInfo.isGroupRow) {
     }
-    return /* @__PURE__ */ React33.createElement("div", { className }, groupIcon, selectionCheckBox, /* @__PURE__ */ React33.createElement("div", { className: cssEllipsisClassName }, valueToRender != null ? valueToRender : null));
+    return /* @__PURE__ */ React32.createElement("div", { className }, groupIcon, selectionCheckBox, /* @__PURE__ */ React32.createElement("div", { className: cssEllipsisClassName }, valueToRender != null ? valueToRender : null));
   };
 }
 function getGroupColumnRenderGroupIcon({
@@ -7634,9 +7622,9 @@ function getGroupColumnRenderGroupIcon({
     const showExpanderIcon = pivotBy ? (((_b = groupRowInfo.groupKeys) == null ? void 0 : _b.length) || 0) < (groupBy == null ? void 0 : groupBy.length) : (((_c = groupRowInfo.groupKeys) == null ? void 0 : _c.length) || 0) <= (groupBy == null ? void 0 : groupBy.length);
     const isLoading = showLoadingIcon(groupRowInfo);
     if (isLoading) {
-      icon = /* @__PURE__ */ React33.createElement(LoadingIcon, null);
+      icon = /* @__PURE__ */ React32.createElement(LoadingIcon, null);
     } else if (showExpanderIcon) {
-      const defaultIcon = /* @__PURE__ */ React33.createElement(
+      const defaultIcon = /* @__PURE__ */ React32.createElement(
         ExpanderIcon,
         {
           expanded: !collapsed,
@@ -7650,7 +7638,7 @@ function getGroupColumnRenderGroupIcon({
     }
     if (initialRenderGroupIcon) {
       renderOptions.renderBag.groupIcon = icon;
-      icon = /* @__PURE__ */ React33.createElement(
+      icon = /* @__PURE__ */ React32.createElement(
         RenderCellHookComponent,
         {
           render: initialRenderGroupIcon,
@@ -7730,7 +7718,7 @@ var ColumnCellSelectionIndicatorRecipe = createRuntimeFn({ defaultClassName: "ce
 var SelectionCheckboxCls = "cell_SelectionCheckboxCls__1eexc2a7";
 // src/components/InfiniteTable/components/CheckBox.tsx
-import * as React34 from "react";
+import * as React33 from "react";
 import { useEffect as useEffect13, useRef as useRef12 } from "react";
 // src/components/InfiniteTable/components/CheckBox.css.ts
@@ -7769,7 +7757,7 @@ function InfiniteCheckBoxComponent() {
   useEffect13(() => {
     inputRef.current.indeterminate = checked == null;
   }, [checked]);
-  return /* @__PURE__ */ React34.createElement(
+  return /* @__PURE__ */ React33.createElement(
     "input",
     __spreadProps(__spreadValues({}, domProps), {
       className: join("InfiniteCheckBox", CheckBoxCls, domProps == null ? void 0 : domProps.className),
@@ -7787,7 +7775,7 @@ function InfiniteCheckBoxComponent() {
   );
 }
 function InfiniteCheckBox(props) {
-  return /* @__PURE__ */ React34.createElement(InfiniteCheckBoxRoot, __spreadValues({}, props), /* @__PURE__ */ React34.createElement(InfiniteCheckBoxComponent, null));
+  return /* @__PURE__ */ React33.createElement(InfiniteCheckBoxRoot, __spreadValues({}, props), /* @__PURE__ */ React33.createElement(InfiniteCheckBoxComponent, null));
 }
 // src/components/InfiniteTable/components/InfiniteTableRow/columnRendering.tsx
@@ -8098,7 +8086,7 @@ function getFormattedValueContextForCell(options) {
 }
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
-import * as React35 from "react";
+import * as React34 from "react";
 var { rootClassName: rootClassName5 } = internalProps;
 var InfiniteTableCellClassName = `${rootClassName5}Cell`;
 var InfiniteTableCellContentClassName = `${rootClassName5}Cell_content`;
@@ -8157,7 +8145,7 @@ function InfiniteTableCellFn(props) {
       //   ? `${InfiniteTableCellClassName}--shifting ${CellClsVariants.shifting}`
       //   : '',
     ),
-    children: /* @__PURE__ */ React35.createElement(React35.Fragment, null, beforeChildren, /* @__PURE__ */ React35.createElement(
+    children: /* @__PURE__ */ React34.createElement(React34.Fragment, null, beforeChildren, /* @__PURE__ */ React34.createElement(
       "div",
       {
         className: join(
@@ -8175,21 +8163,21 @@ function InfiniteTableCellFn(props) {
   }
   const RenderComponent = cellType === "body" ? (_b = column.components) == null ? void 0 : _b.ColumnCell : (_c = column.components) == null ? void 0 : _c.HeaderCell;
   if (RenderComponent) {
-    return /* @__PURE__ */ React35.createElement(RenderComponent, __spreadValues({}, finalDOMProps));
+    return /* @__PURE__ */ React34.createElement(RenderComponent, __spreadValues({}, finalDOMProps));
   }
-  return /* @__PURE__ */ React35.createElement("div", __spreadProps(__spreadValues({}, finalDOMProps), { ref: domRef }));
+  return /* @__PURE__ */ React34.createElement("div", __spreadProps(__spreadValues({}, finalDOMProps), { ref: domRef }));
 }
-var InfiniteTableCell = React35.memo(
+var InfiniteTableCell = React34.memo(
   InfiniteTableCellFn
 );
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnEditor.tsx
-import * as React36 from "react";
+import * as React35 from "react";
 import { useCallback as useCallback10, useRef as useRef13 } from "react";
 function InfiniteTableColumnEditor() {
   const { initialValue, setValue, confirmEdit, cancelEdit, readOnly } = useInfiniteColumnEditor();
   const domRef = useRef13();
-  const refCallback = React36.useCallback((node) => {
+  const refCallback = React35.useCallback((node) => {
     domRef.current = node;
     if (node) {
       node.focus();
@@ -8205,7 +8193,7 @@ function InfiniteTableColumnEditor() {
       event.stopPropagation();
     }
   }, []);
-  return /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement(
     "input",
     {
       readOnly,
@@ -8225,11 +8213,11 @@ function InfiniteTableColumnEditor() {
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx
 var { rootClassName: rootClassName6 } = internalProps;
 var columnZIndexAtIndex4 = stripVar(InternalVars.columnZIndexAtIndex);
-var InfiniteTableColumnCellContext = React37.createContext(null);
+var InfiniteTableColumnCellContext = React36.createContext(null);
 var InfiniteTableColumnCellClassName = `${rootClassName6}ColumnCell`;
 var defaultRenderRowDetailIcon = (params) => {
   const { toggleCurrentRowDetails, rowDetailState } = params;
-  return /* @__PURE__ */ React37.createElement(
+  return /* @__PURE__ */ React36.createElement(
     ExpanderIcon,
     {
       style: {
@@ -8250,7 +8238,7 @@ var defaultRenderSelectionCheckBox = (params) => {
   } = params;
   if (rowInfo.isGroupRow && !column.groupByForColumn) {
   }
-  return /* @__PURE__ */ React37.createElement(
+  return /* @__PURE__ */ React36.createElement(
     InfiniteCheckBox,
     {
       domProps: {
@@ -8302,7 +8290,7 @@ function InfiniteTableColumnCellFn(props) {
     showZebraRows
   } = props;
   if (!column) {
-    return /* @__PURE__ */ React37.createElement("div", { ref: domRef }, "no column");
+    return /* @__PURE__ */ React36.createElement("div", { ref: domRef }, "no column");
   }
   const { rowSelected } = rowInfo;
   const {
@@ -8349,7 +8337,7 @@ function InfiniteTableColumnCellFn(props) {
   } = colRenderingParams;
   const { align: align2, verticalAlign } = renderParams;
   const renderParam = renderParams;
-  const renderParamRef = React37.useRef(renderParam);
+  const renderParamRef = React36.useRef(renderParam);
   const onClick = useCallback12(
     (event) => {
       const colIndex = column.computedVisibleIndex;
@@ -8403,7 +8391,7 @@ function InfiniteTableColumnCellFn(props) {
     [rowInfo]
   );
   const EditorComponent = (_b = (_a = column.components) == null ? void 0 : _a.Editor) != null ? _b : InfiniteTableColumnEditor;
-  const editor = inEdit ? /* @__PURE__ */ React37.createElement(CellEditorContextComponent, { contextValue: renderParam }, /* @__PURE__ */ React37.createElement(EditorComponent, null)) : null;
+  const editor = inEdit ? /* @__PURE__ */ React36.createElement(CellEditorContextComponent, { contextValue: renderParam }, /* @__PURE__ */ React36.createElement(EditorComponent, null)) : null;
   const renderChildren = useCallback12(
     once(() => {
       if (hidden) {
@@ -8413,7 +8401,7 @@ function InfiniteTableColumnCellFn(props) {
         return null;
       }
       if (renderFunctions.renderGroupIcon) {
-        renderParam.renderBag.groupIcon = /* @__PURE__ */ React37.createElement(
+        renderParam.renderBag.groupIcon = /* @__PURE__ */ React36.createElement(
           RenderCellHookComponent,
           {
             render: renderFunctions.renderGroupIcon,
@@ -8424,7 +8412,7 @@ function InfiniteTableColumnCellFn(props) {
         );
       }
       if (renderFunctions.renderSelectionCheckBox && selectionMode == "multi-row") {
-        renderParam.renderBag.selectionCheckBox = /* @__PURE__ */ React37.createElement(
+        renderParam.renderBag.selectionCheckBox = /* @__PURE__ */ React36.createElement(
           RenderCellHookComponent,
           {
             render: defaultRenderSelectionCheckBox,
@@ -8432,7 +8420,7 @@ function InfiniteTableColumnCellFn(props) {
           }
         );
         if (renderFunctions.renderSelectionCheckBox !== true) {
-          renderParam.renderBag.selectionCheckBox = /* @__PURE__ */ React37.createElement(
+          renderParam.renderBag.selectionCheckBox = /* @__PURE__ */ React36.createElement(
             RenderCellHookComponent,
             {
               render: renderFunctions.renderSelectionCheckBox,
@@ -8444,7 +8432,7 @@ function InfiniteTableColumnCellFn(props) {
         }
       }
       if (renderFunctions.renderRowDetailIcon) {
-        renderParam.renderBag.rowDetailsIcon = /* @__PURE__ */ React37.createElement(
+        renderParam.renderBag.rowDetailsIcon = /* @__PURE__ */ React36.createElement(
           RenderCellHookComponent,
           {
             render: defaultRenderRowDetailIcon,
@@ -8454,7 +8442,7 @@ function InfiniteTableColumnCellFn(props) {
           }
         );
         if (typeof renderFunctions.renderRowDetailIcon === "function") {
-          renderParam.renderBag.rowDetailsIcon = /* @__PURE__ */ React37.createElement(
+          renderParam.renderBag.rowDetailsIcon = /* @__PURE__ */ React36.createElement(
             RenderCellHookComponent,
             {
               render: renderFunctions.renderRowDetailIcon,
@@ -8466,7 +8454,7 @@ function InfiniteTableColumnCellFn(props) {
         }
       }
       if (renderFunctions.renderValue) {
-        renderParam.renderBag.value = /* @__PURE__ */ React37.createElement(
+        renderParam.renderBag.value = /* @__PURE__ */ React36.createElement(
           RenderCellHookComponent,
           {
             render: renderFunctions.renderValue,
@@ -8477,7 +8465,7 @@ function InfiniteTableColumnCellFn(props) {
         );
       }
       if (rowInfo.isGroupRow && renderFunctions.renderGroupValue) {
-        renderParam.renderBag.value = /* @__PURE__ */ React37.createElement(
+        renderParam.renderBag.value = /* @__PURE__ */ React36.createElement(
           RenderCellHookComponent,
           {
             render: renderFunctions.renderGroupValue,
@@ -8488,7 +8476,7 @@ function InfiniteTableColumnCellFn(props) {
         );
       }
       if (!rowInfo.isGroupRow && renderFunctions.renderLeafValue) {
-        renderParam.renderBag.value = /* @__PURE__ */ React37.createElement(
+        renderParam.renderBag.value = /* @__PURE__ */ React36.createElement(
           RenderCellHookComponent,
           {
             render: renderFunctions.renderLeafValue,
@@ -8503,9 +8491,9 @@ function InfiniteTableColumnCellFn(props) {
       if (valueToRender instanceof Date) {
         valueToRender = valueToRender.toLocaleDateString();
       }
-      const all = /* @__PURE__ */ React37.createElement(React37.Fragment, null, align2 !== "end" ? renderParam.renderBag.groupIcon : null, align2 !== "end" ? renderParam.renderBag.rowDetailsIcon : null, align2 !== "end" ? renderParam.renderBag.selectionCheckBox : null, valueToRender, align2 === "end" ? renderParam.renderBag.selectionCheckBox : null, align2 === "end" ? renderParam.renderBag.rowDetailsIcon : null, align2 === "end" ? renderParam.renderBag.groupIcon : null);
+      const all = /* @__PURE__ */ React36.createElement(React36.Fragment, null, align2 !== "end" ? renderParam.renderBag.groupIcon : null, align2 !== "end" ? renderParam.renderBag.rowDetailsIcon : null, align2 !== "end" ? renderParam.renderBag.selectionCheckBox : null, valueToRender, align2 === "end" ? renderParam.renderBag.selectionCheckBox : null, align2 === "end" ? renderParam.renderBag.rowDetailsIcon : null, align2 === "end" ? renderParam.renderBag.groupIcon : null);
       if (column.render) {
-        return /* @__PURE__ */ React37.createElement(
+        return /* @__PURE__ */ React36.createElement(
           RenderCellHookComponent,
           {
             render: column.render,
@@ -8667,16 +8655,16 @@ function InfiniteTableColumnCellFn(props) {
   return (
     // this context is here for supporting useInfiniteColumnCell to be used
     // with a custom column component, specified via column.components.ColumnCell
-    /* @__PURE__ */ React37.createElement(
+    /* @__PURE__ */ React36.createElement(
       ContextProvider,
       {
         value: renderParamRef.current
       },
-      /* @__PURE__ */ React37.createElement(InfiniteTableCell, __spreadValues({}, cellProps))
+      /* @__PURE__ */ React36.createElement(InfiniteTableCell, __spreadValues({}, cellProps))
     )
   );
 }
-var InfiniteTableColumnCell = React37.memo(
+var InfiniteTableColumnCell = React36.memo(
   InfiniteTableColumnCellFn
 );
 function useInfiniteColumnCell() {
@@ -8691,14 +8679,14 @@ function useInfiniteColumnEditor() {
     state: { editingValueRef, editingCell }
   } = useInfiniteTable();
   const { column, rowInfo } = useInfiniteColumnCell();
-  const [initialValue] = React37.useState(() => editingCell == null ? void 0 : editingCell.value);
-  const [currentValue, setCurrentValue] = React37.useState(initialValue);
+  const [initialValue] = React36.useState(() => editingCell == null ? void 0 : editingCell.value);
+  const [currentValue, setCurrentValue] = React36.useState(initialValue);
   const readOnly = editingCell ? !editingCell.active && !!editingCell.waiting : false;
-  const setValue = React37.useCallback((value) => {
+  const setValue = React36.useCallback((value) => {
     editingValueRef.current = value;
     setCurrentValue(value);
   }, []);
-  React37.useLayoutEffect(() => {
+  React36.useLayoutEffect(() => {
     editingValueRef.current = initialValue;
   }, []);
   const confirmEdit = api.confirmEdit;
@@ -8727,7 +8715,7 @@ function RenderHookComponent(props) {
 // src/components/InfiniteTable/utils/RenderHookComponentForInfinite.tsx
 function RenderCellHookComponent(props) {
   const ContextProvider = InfiniteTableColumnCellContext.Provider;
-  return /* @__PURE__ */ React38.createElement(ContextProvider, { value: props.renderParam }, /* @__PURE__ */ React38.createElement(
+  return /* @__PURE__ */ React37.createElement(ContextProvider, { value: props.renderParam }, /* @__PURE__ */ React37.createElement(
     RenderHookComponent,
     {
       render: props.render,
@@ -8737,11 +8725,11 @@ function RenderCellHookComponent(props) {
 }
 function CellEditorContextComponent(props) {
   const ContextProvider = InfiniteTableColumnCellContext.Provider;
-  return /* @__PURE__ */ React38.createElement(ContextProvider, { value: props.contextValue }, props.children);
+  return /* @__PURE__ */ React37.createElement(ContextProvider, { value: props.contextValue }, props.children);
 }
 function RenderHeaderCellHookComponent(props) {
   const ContextProvider = InfiniteTableHeaderCellContext.Provider;
-  return /* @__PURE__ */ React38.createElement(ContextProvider, { value: props.renderParam }, /* @__PURE__ */ React38.createElement(
+  return /* @__PURE__ */ React37.createElement(ContextProvider, { value: props.renderParam }, /* @__PURE__ */ React37.createElement(
     RenderHookComponent,
     {
       render: props.render,
@@ -8751,7 +8739,7 @@ function RenderHeaderCellHookComponent(props) {
 }
 // src/components/InfiniteTable/components/icons/MenuIcon.tsx
-import * as React39 from "react";
+import * as React38 from "react";
 var defaultLineStyle2 = {
   width: "100%",
   pointerEvents: "none"
@@ -8775,7 +8763,7 @@ function MenuIcon(props) {
   const lineStyle = __spreadValues(__spreadProps(__spreadValues({}, defaultLineStyle2), {
     borderTop: `${ThemeVars.components.HeaderCell.menuIconLineWidth} solid currentColor`
   }), props.lineStyle);
-  return /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React38.createElement(
     "div",
     __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, domProps), {
       style: style2
@@ -8791,12 +8779,12 @@ function MenuIcon(props) {
         `${InfiniteTableIconClassName}-menu`
       )
     }),
-    children != null ? children : /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement("div", { className: lineClassName, style: lineStyle }), /* @__PURE__ */ React39.createElement("div", { className: lineClassName, style: lineStyle }), /* @__PURE__ */ React39.createElement("div", { className: lineClassName, style: lineStyle }))
+    children != null ? children : /* @__PURE__ */ React38.createElement(React38.Fragment, null, /* @__PURE__ */ React38.createElement("div", { className: lineClassName, style: lineStyle }), /* @__PURE__ */ React38.createElement("div", { className: lineClassName, style: lineStyle }), /* @__PURE__ */ React38.createElement("div", { className: lineClassName, style: lineStyle }))
   );
 }
 // src/components/InfiniteTable/components/icons/SortIcon.tsx
-import * as React40 from "react";
+import * as React39 from "react";
 import { useEffect as useEffect14, useState as useState10 } from "react";
 // src/components/InfiniteTable/components/icons/SortIcon.css.ts
@@ -8855,7 +8843,7 @@ function SortIcon(props) {
   if (direction === -1) {
     indexStyle.top = "100%";
   }
-  return /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React39.createElement(
     "div",
     {
       "data-name": "sort-icon",
@@ -8867,7 +8855,7 @@ function SortIcon(props) {
         `${InfiniteTableIconClassName}-sort`
       )
     },
-    showIndex ? /* @__PURE__ */ React40.createElement(
+    showIndex ? /* @__PURE__ */ React39.createElement(
       "div",
       {
         "data-name": "index",
@@ -8876,25 +8864,25 @@ function SortIcon(props) {
       },
       index
     ) : null,
-    /* @__PURE__ */ React40.createElement(
+    /* @__PURE__ */ React39.createElement(
       "div",
       {
         style: __spreadValues({ width: sizes[0] }, lineStyle),
         onTransitionEnd
       }
     ),
-    /* @__PURE__ */ React40.createElement("div", { style: __spreadValues({ width: sizes[1] }, lineStyle) }),
-    /* @__PURE__ */ React40.createElement("div", { style: __spreadValues({ width: sizes[2] }, lineStyle) })
+    /* @__PURE__ */ React39.createElement("div", { style: __spreadValues({ width: sizes[1] }, lineStyle) }),
+    /* @__PURE__ */ React39.createElement("div", { style: __spreadValues({ width: sizes[2] }, lineStyle) })
   );
 }
 // src/components/InfiniteTable/components/InfiniteTableHeader/useColumnResizeHandle.tsx
-import * as React42 from "react";
+import * as React41 from "react";
 import { useCallback as useCallback13 } from "react";
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/index.tsx
 import { useRef as useRef15, useState as useState11 } from "react";
-import * as React41 from "react";
+import * as React40 from "react";
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/columnResizer.ts
 function getColumnResizer(colIndex, {
@@ -9069,7 +9057,7 @@ function ResizeHandleFn(props) {
     right: computedPinned === "start" ? void 0 : 0
     //ThemeVars.components.HeaderCell.resizeHandleWidth,
   } : computedPinned === "end" && computedFirstInCategory ? { right: void 0 } : void 0;
-  return /* @__PURE__ */ React41.createElement(
+  return /* @__PURE__ */ React40.createElement(
     "div",
     {
       ref: domRef,
@@ -9082,7 +9070,7 @@ function ResizeHandleFn(props) {
       )}`,
       onPointerDown
     },
-    /* @__PURE__ */ React41.createElement(
+    /* @__PURE__ */ React40.createElement(
       "div",
       {
         style: style2,
@@ -9096,7 +9084,7 @@ function ResizeHandleFn(props) {
     )
   );
 }
-var ResizeHandle = React41.memo(ResizeHandleFn);
+var ResizeHandle = React40.memo(ResizeHandleFn);
 // src/components/InfiniteTable/components/InfiniteTableHeader/useColumnResizeHandle.tsx
 function useColumnResizeHandle(column) {
@@ -9160,7 +9148,7 @@ function useColumnResizeHandle(column) {
     },
     [computeResizeForDiff]
   );
-  const resizeHandle = column.computedResizable ? /* @__PURE__ */ React42.createElement(
+  const resizeHandle = column.computedResizable ? /* @__PURE__ */ React41.createElement(
     ResizeHandle,
     {
       columns: computedVisibleColumns,
@@ -9179,7 +9167,7 @@ var InfiniteTableHeaderCellClassName = `${rootClassName2}HeaderCell`;
 var defaultRenderSelectionCheckBox2 = (params) => {
   const { allRowsSelected, someRowsSelected, api } = params;
   const selected = allRowsSelected ? true : someRowsSelected ? null : false;
-  return /* @__PURE__ */ React43.createElement(
+  return /* @__PURE__ */ React42.createElement(
     InfiniteCheckBox,
     {
       domProps: {
@@ -9196,9 +9184,9 @@ var defaultRenderSelectionCheckBox2 = (params) => {
     }
   );
 };
-var InfiniteTableHeaderCellContext = React43.createContext(null);
+var InfiniteTableHeaderCellContext = React42.createContext(null);
 var columnZIndexAtIndex5 = stripVar(InternalVars.columnZIndexAtIndex);
-var spacer = /* @__PURE__ */ React43.createElement("div", { className: flex["1"] });
+var spacer = /* @__PURE__ */ React42.createElement("div", { className: flex["1"] });
 var InfiniteHeaderCellDataAttributes = keyMirror({
   "data-name": ``,
   "data-field": ``,
@@ -9235,7 +9223,7 @@ function InfiniteTableHeaderCell(props) {
   const dragging = columnReorderDragColumnId === column.id;
   const { onResize, height, width, headerOptions, columnsMap } = props;
   const sortInfo = column.computedSortInfo;
-  let header = column.header;
+  const header = column.header;
   const ref = useCallback14(
     (node) => {
       var _a2;
@@ -9259,7 +9247,7 @@ function InfiniteTableHeaderCell(props) {
     getState
   });
   const computedSortable = columnApi.isSortable();
-  const sortIcon = computedSortable && (column.computedSorted || alwaysShow) ? /* @__PURE__ */ React43.createElement(
+  const sortIcon = computedSortable && (column.computedSorted || alwaysShow) ? /* @__PURE__ */ React42.createElement(
     SortIcon,
     {
       index: column.computedMultiSort ? column.computedSortIndex + 1 : void 0,
@@ -9276,7 +9264,7 @@ function InfiniteTableHeaderCell(props) {
     }
   ) : null;
   const filtered = column.computedFilterable && column.computedFiltered;
-  const filterIcon = filtered ? /* @__PURE__ */ React43.createElement(FilterIcon, null) : null;
+  const filterIcon = filtered ? /* @__PURE__ */ React42.createElement(FilterIcon, null) : null;
   const headerCSSEllipsis = (_e = (_d = column.headerCssEllipsis) != null ? _d : column.cssEllipsis) != null ? _e : true;
   const menuIconProps = {
     reserveSpaceWhenHidden: align2 === "center",
@@ -9296,7 +9284,7 @@ function InfiniteTableHeaderCell(props) {
     }
   };
   const MenuIconCmp = ((_f = column.components) == null ? void 0 : _f.MenuIcon) || (components2 == null ? void 0 : components2.MenuIcon) || MenuIcon;
-  const menuIcon = /* @__PURE__ */ React43.createElement(MenuIconCmp, __spreadValues({}, menuIconProps));
+  const menuIcon = /* @__PURE__ */ React42.createElement(MenuIconCmp, __spreadValues({}, menuIconProps));
   const initialRenderParam = {
     dragging,
     domRef: ref,
@@ -9327,7 +9315,7 @@ function InfiniteTableHeaderCell(props) {
       renderBag: __spreadValues({}, initialRenderParam.renderBag)
     });
     if (column.renderSortIcon) {
-      renderParam2.renderBag.sortIcon = /* @__PURE__ */ React43.createElement(
+      renderParam2.renderBag.sortIcon = /* @__PURE__ */ React42.createElement(
         RenderHeaderCellHookComponent,
         {
           render: column.renderSortIcon,
@@ -9338,7 +9326,7 @@ function InfiniteTableHeaderCell(props) {
       );
     }
     if (column.renderFilterIcon) {
-      renderParam2.renderBag.filterIcon = /* @__PURE__ */ React43.createElement(
+      renderParam2.renderBag.filterIcon = /* @__PURE__ */ React42.createElement(
         RenderHeaderCellHookComponent,
         {
           render: column.renderFilterIcon,
@@ -9349,7 +9337,7 @@ function InfiniteTableHeaderCell(props) {
       );
     }
     if (typeof column.renderMenuIcon === "function") {
-      renderParam2.renderBag.menuIcon = /* @__PURE__ */ React43.createElement(
+      renderParam2.renderBag.menuIcon = /* @__PURE__ */ React42.createElement(
         RenderHeaderCellHookComponent,
         {
           render: (param) => {
@@ -9361,7 +9349,7 @@ function InfiniteTableHeaderCell(props) {
               if (result.type === MenuIconCmp || result.type === MenuIcon) {
                 return result;
               }
-              return /* @__PURE__ */ React43.createElement(MenuIconCmp, __spreadValues({}, menuIconProps), result);
+              return /* @__PURE__ */ React42.createElement(MenuIconCmp, __spreadValues({}, menuIconProps), result);
             }
             return null;
           },
@@ -9372,7 +9360,7 @@ function InfiniteTableHeaderCell(props) {
       );
     }
     if (column.renderSelectionCheckBox && selectionMode === "multi-row") {
-      renderParam2.renderBag.selectionCheckBox = /* @__PURE__ */ React43.createElement(
+      renderParam2.renderBag.selectionCheckBox = /* @__PURE__ */ React42.createElement(
         RenderHeaderCellHookComponent,
         {
           render: defaultRenderSelectionCheckBox2,
@@ -9383,7 +9371,7 @@ function InfiniteTableHeaderCell(props) {
       );
       const renderHeaderSelectionCheckBox = (_a2 = column.renderHeaderSelectionCheckBox) != null ? _a2 : column.renderSelectionCheckBox;
       if (renderHeaderSelectionCheckBox && renderHeaderSelectionCheckBox !== true) {
-        renderParam2.renderBag.selectionCheckBox = /* @__PURE__ */ React43.createElement(
+        renderParam2.renderBag.selectionCheckBox = /* @__PURE__ */ React42.createElement(
           RenderHeaderCellHookComponent,
           {
             render: renderHeaderSelectionCheckBox,
@@ -9395,7 +9383,7 @@ function InfiniteTableHeaderCell(props) {
       }
     }
     if (header instanceof Function) {
-      renderParam2.renderBag.header = /* @__PURE__ */ React43.createElement(
+      renderParam2.renderBag.header = /* @__PURE__ */ React42.createElement(
         RenderHeaderCellHookComponent,
         {
           render: header,
@@ -9406,10 +9394,10 @@ function InfiniteTableHeaderCell(props) {
       );
     }
     const theMenuIcon = column.renderMenuIcon === false ? null : renderParam2.renderBag.menuIcon;
-    const headerContent = headerCSSEllipsis ? /* @__PURE__ */ React43.createElement("div", { className: cssEllipsisClassName }, renderParam2.renderBag.header) : renderParam2.renderBag.header;
-    const all = /* @__PURE__ */ React43.createElement(React43.Fragment, null, align2 === "center" ? spacer : null, renderParam2.renderBag.selectionCheckBox, headerContent, renderParam2.renderBag.sortIcon, renderParam2.renderBag.filterIcon, align2 === "center" ? spacer : null, align2 !== "center" ? spacer : null, theMenuIcon);
+    const headerContent = headerCSSEllipsis ? /* @__PURE__ */ React42.createElement("div", { className: cssEllipsisClassName }, renderParam2.renderBag.header) : renderParam2.renderBag.header;
+    const all = /* @__PURE__ */ React42.createElement(React42.Fragment, null, align2 === "center" ? spacer : null, renderParam2.renderBag.selectionCheckBox, headerContent, renderParam2.renderBag.sortIcon, renderParam2.renderBag.filterIcon, align2 === "center" ? spacer : null, align2 !== "center" ? spacer : null, theMenuIcon);
     if (column.renderHeader) {
-      return /* @__PURE__ */ React43.createElement(
+      return /* @__PURE__ */ React42.createElement(
         RenderHeaderCellHookComponent,
         {
           render: column.renderHeader,
@@ -9446,7 +9434,7 @@ function InfiniteTableHeaderCell(props) {
   });
   let draggingProxy = null;
   if (dragging && proxyPosition) {
-    draggingProxy = /* @__PURE__ */ React43.createElement(
+    draggingProxy = /* @__PURE__ */ React42.createElement(
       "div",
       {
         key: column.id,
@@ -9470,7 +9458,7 @@ function InfiniteTableHeaderCell(props) {
     verticalAlign,
     align: align2
   };
-  const debouncedOnFilterValueChange = React43.useMemo(() => {
+  const debouncedOnFilterValueChange = React42.useMemo(() => {
     const fn = (filterValue) => {
       api.setColumnFilter(column.id, filterValue);
     };
@@ -9496,7 +9484,7 @@ function InfiniteTableHeaderCell(props) {
     "data-sort": column.computedSortedAsc ? "asc" : column.computedSortedDesc ? "desc" : "none",
     "data-sort-index": `${(_p = column.computedSortIndex) != null ? _p : -1}`
   };
-  return /* @__PURE__ */ React43.createElement(ContextProvider, { value: renderParam }, /* @__PURE__ */ React43.createElement(
+  return /* @__PURE__ */ React42.createElement(ContextProvider, { value: renderParam }, /* @__PURE__ */ React42.createElement(
     InfiniteTableCell,
     __spreadProps(__spreadValues({
       domRef: ref,
@@ -9538,7 +9526,7 @@ function InfiniteTableHeaderCell(props) {
         CellCls
       ),
       cssEllipsis: headerCSSEllipsis,
-      afterChildren: /* @__PURE__ */ React43.createElement(React43.Fragment, null, showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ React43.createElement(
+      afterChildren: /* @__PURE__ */ React42.createElement(React42.Fragment, null, showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ React42.createElement(
         InfiniteTableColumnHeaderFilter,
         {
           filterEditor: FilterEditor,
@@ -9551,7 +9539,7 @@ function InfiniteTableHeaderCell(props) {
           columnFilterValue: column.computedFilterValue,
           columnHeaderHeight
         }
-      ) : /* @__PURE__ */ React43.createElement(InfiniteTableColumnHeaderFilterEmpty, null) : null, resizeHandle),
+      ) : /* @__PURE__ */ React42.createElement(InfiniteTableColumnHeaderFilterEmpty, null) : null, resizeHandle),
       renderChildren
     })
   ), draggingProxy);
@@ -9564,7 +9552,7 @@ function useInfiniteHeaderCell() {
 }
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderWrapper.tsx
-import * as React48 from "react";
+import * as React47 from "react";
 // src/components/InfiniteTable/components/InfiniteTableHeader/buildColumnAndGroupTree.ts
 function buildColumnAndGroupTree(columns, columnGroups, columnGroupsDepthsMap, columnGroupsMaxDepth) {
@@ -9670,19 +9658,19 @@ function assignGroupOffsetsAndComputedWidths(items, groupOffset = 0) {
 }
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
-import * as React47 from "react";
+import * as React46 from "react";
 import { useCallback as useCallback16, useEffect as useEffect16, useRef as useRef18 } from "react";
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup.tsx
-import * as React46 from "react";
+import * as React45 from "react";
 // src/components/InfiniteTable/components/InfiniteTableHeader/useColumnGroupResizeHandle.tsx
-import * as React45 from "react";
+import * as React44 from "react";
 import { useCallback as useCallback15 } from "react";
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/GroupResizeHandle.tsx
 import { useRef as useRef17, useState as useState12 } from "react";
-import * as React44 from "react";
+import * as React43 from "react";
 var { rootClassName: rootClassName8 } = internalProps;
 var InfiniteTableHeaderCellResizeHandleCls2 = `${rootClassName8}HeaderCell_ResizeHandle`;
 function GroupResizeHandleFn(props) {
@@ -9751,7 +9739,7 @@ function GroupResizeHandleFn(props) {
   const style2 = (computedPinned === false || computedPinned === "start") && computedLastInCategory ? {
     right: computedPinned === "start" ? void 0 : ThemeVars.components.HeaderCell.resizeHandleWidth
   } : computedPinned === "end" && computedFirstInCategory ? { right: void 0 } : void 0;
-  return /* @__PURE__ */ React44.createElement(
+  return /* @__PURE__ */ React43.createElement(
     "div",
     {
       ref: domRef,
@@ -9764,7 +9752,7 @@ function GroupResizeHandleFn(props) {
       )}`,
       onPointerDown
     },
-    /* @__PURE__ */ React44.createElement(
+    /* @__PURE__ */ React43.createElement(
       "div",
       {
         style: __spreadValues(__spreadValues({}, style2), props.style),
@@ -9775,7 +9763,7 @@ function GroupResizeHandleFn(props) {
     )
   );
 }
-var GroupResizeHandle = React44.memo(
+var GroupResizeHandle = React43.memo(
   GroupResizeHandleFn
 );
@@ -9834,7 +9822,7 @@ function useColumnGroupResizeHandle(groupColumns, config) {
     [computeResizeForDiff]
   );
   const groupResizable = groupColumns.some((c) => c.computedResizable);
-  const resizeHandle = groupResizable ? /* @__PURE__ */ React45.createElement(
+  const resizeHandle = groupResizable ? /* @__PURE__ */ React44.createElement(
     GroupResizeHandle,
     {
       brain: bodyBrain,
@@ -9874,7 +9862,7 @@ function InfiniteTableHeaderGroup(props) {
     (col) => `var(${columnWidthAtIndex5}-${col.computedVisibleIndex})`
   ).join(" + ") + " )" : `var(${columnWidthAtIndex5}-${firstColumn.computedVisibleIndex})`;
   const zIndex2 = `calc(var(${columnZIndexAtIndex6}-${firstColumn.computedVisibleIndex}) + ${columnGroupsMaxDepth - columnGroup.depth})`;
-  return /* @__PURE__ */ React46.createElement(
+  return /* @__PURE__ */ React45.createElement(
     "div",
     {
       ref: props.domRef,
@@ -9883,7 +9871,7 @@ function InfiniteTableHeaderGroup(props) {
       style: { width, height },
       "data-z-index": zIndex2
     },
-    /* @__PURE__ */ React46.createElement(
+    /* @__PURE__ */ React45.createElement(
       "div",
       {
         className: join(
@@ -9965,7 +9953,7 @@ function InfiniteTableHeaderFn(props) {
           computedWidth: colGroupItem.computedWidth,
           groupOffset: colGroupItem.groupOffset
         });
-        return /* @__PURE__ */ React47.createElement(
+        return /* @__PURE__ */ React46.createElement(
           InfiniteTableHeaderGroup,
           {
             bodyBrain,
@@ -9978,7 +9966,7 @@ function InfiniteTableHeaderFn(props) {
           }
         );
       }
-      return /* @__PURE__ */ React47.createElement(
+      return /* @__PURE__ */ React46.createElement(
         InfiniteTableHeaderCell,
         {
           domRef: domRef2,
@@ -10002,7 +9990,7 @@ function InfiniteTableHeaderFn(props) {
       showColumnFilters
     ]
   );
-  return /* @__PURE__ */ React47.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React47.createElement(
+  return /* @__PURE__ */ React46.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React46.createElement(
     RawTable,
     {
       name: "header",
@@ -10012,7 +10000,7 @@ function InfiniteTableHeaderFn(props) {
     }
   ));
 }
-var InfiniteTableHeader = React47.memo(
+var InfiniteTableHeader = React46.memo(
   InfiniteTableHeaderFn
 );
@@ -10037,7 +10025,7 @@ function TableHeaderWrapper(props) {
   } = tableContextValue;
   const rows = !computedColumnGroups || !Object.keys(computedColumnGroups).length ? 1 : columnGroupsMaxDepth + 2;
   const height = rows * columnHeaderHeight + (showColumnFilters ? columnHeaderHeight : 0);
-  const columnAndGroupTreeInfo = React48.useMemo(() => {
+  const columnAndGroupTreeInfo = React47.useMemo(() => {
     if (!computedColumnGroups || !Object.keys(computedColumnGroups).length) {
       return void 0;
     }
@@ -10048,7 +10036,7 @@ function TableHeaderWrapper(props) {
       columnGroupsMaxDepth
     );
   }, [computedVisibleColumns, computedColumnGroups, columnGroupsDepthsMap]);
-  const cellspan = React48.useCallback(
+  const cellspan = React47.useCallback(
     ({ rowIndex, colIndex }) => {
       const column = computedVisibleColumns[colIndex];
       const rowspan2 = 1;
@@ -10086,15 +10074,15 @@ function TableHeaderWrapper(props) {
       columnGroupsDepthsMap
     ]
   );
-  const rowspan = React48.useCallback(
+  const rowspan = React47.useCallback(
     ({ rowIndex, colIndex }) => cellspan({ rowIndex, colIndex }).rowspan,
     [cellspan]
   );
-  const colspan = React48.useCallback(
+  const colspan = React47.useCallback(
     ({ rowIndex, colIndex }) => cellspan({ rowIndex, colIndex }).colspan,
     [cellspan]
   );
-  const rowHeight = React48.useCallback(
+  const rowHeight = React47.useCallback(
     (index) => {
       return showColumnFilters ? index < rows - 1 ? columnHeaderHeight : 2 * columnHeaderHeight : columnHeaderHeight;
     },
@@ -10116,7 +10104,7 @@ function TableHeaderWrapper(props) {
       fixedColsStart: computedPinnedStartColumns.length
     }
   );
-  const header = /* @__PURE__ */ React48.createElement(
+  const header = /* @__PURE__ */ React47.createElement(
     InfiniteTableHeader,
     {
       columns: computedVisibleColumns,
@@ -10127,7 +10115,7 @@ function TableHeaderWrapper(props) {
       columnAndGroupTreeInfo
     }
   );
-  const verticalScrollbarPlaceholder = scrollbars.vertical && getScrollbarWidth() ? /* @__PURE__ */ React48.createElement(
+  const verticalScrollbarPlaceholder = scrollbars.vertical && getScrollbarWidth() ? /* @__PURE__ */ React47.createElement(
     "div",
     {
       className: HeaderScrollbarPlaceholderCls,
@@ -10137,7 +10125,7 @@ function TableHeaderWrapper(props) {
       }
     }
   ) : null;
-  return /* @__PURE__ */ React48.createElement(
+  return /* @__PURE__ */ React47.createElement(
     "div",
     {
       className: HeaderWrapperCls,
@@ -10151,7 +10139,7 @@ function TableHeaderWrapper(props) {
 }
 // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
-import * as React49 from "react";
+import * as React48 from "react";
 import { useEffect as useEffect17 } from "react";
 // src/components/utils/decamelize.ts
@@ -10194,11 +10182,11 @@ var enforceStyle = (node, style2) => {
     );
   }
 };
-var InfiniteTableLicenseFooter = React49.forwardRef(
+var InfiniteTableLicenseFooter = React48.forwardRef(
   function InfiniteTableLicenseFooter2(props, ref) {
     const { rootClassName: rootClassName12 } = useInternalProps();
-    const domRef = React49.useRef(null);
-    const domCallback = React49.useCallback((node) => {
+    const domRef = React48.useRef(null);
+    const domCallback = React48.useCallback((node) => {
       domRef.current = node;
       if (!ref) {
         return;
@@ -10226,7 +10214,7 @@ var InfiniteTableLicenseFooter = React49.forwardRef(
         clearInterval(intervalId);
       };
     }, []);
-    return /* @__PURE__ */ React49.createElement(
+    return /* @__PURE__ */ React48.createElement(
       "div",
       __spreadProps(__spreadValues({
         ref: domCallback
@@ -10240,7 +10228,7 @@ var InfiniteTableLicenseFooter = React49.forwardRef(
       }),
       "Powered by",
       " ",
-      /* @__PURE__ */ React49.createElement(
+      /* @__PURE__ */ React48.createElement(
         "a",
         {
           href: "https://infinite-table.com",
@@ -10255,7 +10243,7 @@ var InfiniteTableLicenseFooter = React49.forwardRef(
 );
 // src/components/InfiniteTable/components/LoadMask.tsx
-import * as React50 from "react";
+import * as React49 from "react";
 // src/components/InfiniteTable/components/LoadMask.css.ts
 var LoadMaskCls = { visible: "LoadMask_LoadMaskCls_visible__qy58ya1 LoadMask_LoadMaskBaseCls__qy58ya0 utilities_position_absolute__16lm1iw2 utilities_top_0__16lm1iw1c utilities_left_0__16lm1iw1e utilities_right_0__16lm1iw1j utilities_bottom_0__16lm1iw1h", hidden: "LoadMask_LoadMaskCls_hidden__qy58ya2 LoadMask_LoadMaskBaseCls__qy58ya0 utilities_position_absolute__16lm1iw2 utilities_top_0__16lm1iw1c utilities_left_0__16lm1iw1e utilities_right_0__16lm1iw1j utilities_bottom_0__16lm1iw1h" };
@@ -10267,16 +10255,16 @@ var { rootClassName: rootClassName10 } = internalProps;
 var baseCls3 = `${rootClassName10}-LoadMask`;
 function LoadMaskFn(props) {
   const { visible, children = "Loading" } = props;
-  return /* @__PURE__ */ React50.createElement(
+  return /* @__PURE__ */ React49.createElement(
     "div",
     {
       className: `${LoadMaskCls[visible ? "visible" : "hidden"]} ${baseCls3}`
     },
-    /* @__PURE__ */ React50.createElement("div", { className: `${LoadMaskOverlayCls} ${baseCls3}-Overlay` }),
-    /* @__PURE__ */ React50.createElement("div", { className: `${LoadMaskTextCls} ${baseCls3}-Text` }, children)
+    /* @__PURE__ */ React49.createElement("div", { className: `${LoadMaskOverlayCls} ${baseCls3}-Overlay` }),
+    /* @__PURE__ */ React49.createElement("div", { className: `${LoadMaskTextCls} ${baseCls3}-Text` }, children)
   );
 }
-var LoadMask = React50.memo(LoadMaskFn);
+var LoadMask = React49.memo(LoadMaskFn);
 // src/utils/deepClone.ts
 function cloneArray(arr) {
@@ -10948,7 +10936,7 @@ function enhancedFlatten(param) {
 }
 // src/components/DataSource/index.tsx
-import * as React51 from "react";
+import * as React50 from "react";
 import { useEffect as useEffect20, useLayoutEffect as useLayoutEffect10 } from "react";
 // src/utils/multisort/sortTypes.ts
@@ -13759,6 +13747,7 @@ function useLoadData() {
     refetchKey,
     sortInfo,
     sortMode,
+    groupMode,
     groupBy,
     pivotBy,
     filterValue,
@@ -13830,7 +13819,7 @@ function useLoadData() {
   }, [filterValue, filterMode, filterTypes]);
   const depsObject = {
     sortInfo: sortMode === "remote" ? sortInfo : null,
-    groupBy,
+    groupBy: groupMode === "remote" ? groupBy : null,
     pivotBy,
     refetchKey,
     filterValue: computedFilterValue,
@@ -14313,7 +14302,7 @@ function getLivePaginationCursorValue(livePaginationCursorProp, state) {
 }
 var weakMap = /* @__PURE__ */ new WeakMap();
 function deriveStateFromProps(params) {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const { props, state, oldState } = params;
   const controlledSort = isControlledValue(props.sortInfo);
   const controlledFilter = isControlledValue(props.filterValue);
@@ -14411,8 +14400,9 @@ function deriveStateFromProps(params) {
     operatorsByFilterType,
     controlledSort,
     controlledFilter,
-    sortMode: props.sortFunction ? "local" : (_b = props.sortMode) != null ? _b : controlledSort ? "remote" : "local",
-    filterMode: typeof props.filterFunction === "function" ? "local" : (_c = props.filterMode) != null ? _c : typeof props.data === "function" ? "remote" : "local",
+    groupMode: typeof props.data === "function" ? (_b = props.groupMode) != null ? _b : "local" : "local",
+    sortMode: props.sortFunction ? "local" : (_c = props.sortMode) != null ? _c : controlledSort ? "remote" : "local",
+    filterMode: typeof props.filterFunction === "function" ? "local" : (_d = props.filterMode) != null ? _d : typeof props.data === "function" ? "remote" : "local",
     multiSort: Array.isArray(
       controlledSort ? props.sortInfo : props.defaultSortInfo
     ),
@@ -14945,7 +14935,7 @@ function DataSourceWithContext(props) {
     var _a;
     (_a = componentState.onReady) == null ? void 0 : _a.call(componentState, api);
   }, []);
-  return /* @__PURE__ */ React51.createElement(React51.Fragment, null, children);
+  return /* @__PURE__ */ React50.createElement(React50.Fragment, null, children);
 }
 var DataSourceRoot = getComponentStateRoot({
   //@ts-ignore
@@ -14975,7 +14965,7 @@ function DataSourceCmp({
   const { componentState, componentActions, assignState } = useComponentState();
   componentState.getDataSourceMasterContextRef.current = getDataSourceMasterContext;
   const getState = useLatest(componentState);
-  const [api] = React51.useState(() => {
+  const [api] = React50.useState(() => {
     return getDataSourceApi({ getState, actions: componentActions });
   });
   const contextValue = {
@@ -15027,13 +15017,13 @@ function DataSourceCmp({
       });
     }
   }, [componentState.originalDataArrayChangedInfo]);
-  return /* @__PURE__ */ React51.createElement(DataSourceContext.Provider, { value: contextValue }, /* @__PURE__ */ React51.createElement(DataSourceWithContext, { children }));
+  return /* @__PURE__ */ React50.createElement(DataSourceContext.Provider, { value: contextValue }, /* @__PURE__ */ React50.createElement(DataSourceWithContext, { children }));
 }
 function DataSource(props) {
   const masterContext = useMasterDetailContext();
   const isDetail = !!masterContext;
   const key = isDetail ? masterContext.masterRowInfo.id : "master";
-  return /* @__PURE__ */ React51.createElement(DataSourceRoot, __spreadProps(__spreadValues({}, props), { key }), /* @__PURE__ */ React51.createElement(DataSourceCmp, { children: props.children, isDetail }));
+  return /* @__PURE__ */ React50.createElement(DataSourceRoot, __spreadProps(__spreadValues({}, props), { key }), /* @__PURE__ */ React50.createElement(DataSourceCmp, { children: props.children, isDetail }));
 }
 function useRowInfoReducers() {
   const { rowInfoReducerResults } = useDataSource();
@@ -15355,7 +15345,8 @@ function getRowDetailApi(param) {
       return !rowDetailApi.isRowDetailCollapsed(pk);
     },
     collapseRowDetail(pk) {
-      const currentState = getState().rowDetailState;
+      const componentState = getState();
+      const currentState = componentState.rowDetailState;
       if (!currentState) {
         console.error(
           `Cannot collapse row details via rowDetailState, as no props.rowDetailState is provided.`
@@ -15364,10 +15355,13 @@ function getRowDetailApi(param) {
       }
       const state = new RowDetailState(currentState);
       state.collapseRowDetails(pk);
+      componentState.lastRowToExpandRef.current = null;
+      componentState.lastRowToCollapseRef.current = pk;
       actions.rowDetailState = state;
     },
     expandRowDetail(pk) {
-      const currentState = getState().rowDetailState;
+      const componentState = getState();
+      const currentState = componentState.rowDetailState;
       if (!currentState) {
         console.error(
           `Cannot expand row details via rowDetailState, as no props.rowDetailState is provided.`
@@ -15376,6 +15370,8 @@ function getRowDetailApi(param) {
       }
       const state = new RowDetailState(currentState);
       state.expandRowDetails(pk);
+      componentState.lastRowToCollapseRef.current = null;
+      componentState.lastRowToExpandRef.current = pk;
       actions.rowDetailState = state;
     },
     toggleRowDetail(pk) {
@@ -16408,7 +16404,7 @@ function useAutoSizeColumns() {
 // src/components/InfiniteTable/hooks/useCellRendering.tsx
 import { useMemo as useMemo9 } from "react";
 import { useCallback as useCallback19, useEffect as useEffect22, useRef as useRef24 } from "react";
-import * as React53 from "react";
+import * as React52 from "react";
 // src/components/InfiniteTable/hooks/useYourBrain.ts
 function useYourBrain(param) {
@@ -16445,7 +16441,7 @@ function useYourBrain(param) {
 }
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableDetailRow.tsx
-import * as React52 from "react";
+import * as React51 from "react";
 // src/components/InfiniteTable/components/rowDetail.css.ts
 var RowDetailRecipe = createRuntimeFn({ defaultClassName: "rowDetail_RowDetailRecipe__evqes20", variantClassNames: {}, defaultVariants: {}, compoundVariants: [] });
@@ -16582,7 +16578,7 @@ function InfiniteTableDetailRowFn(props) {
     rowDetailsCache,
     rowInfo
   });
-  return /* @__PURE__ */ React52.createElement(DataSourceMasterDetailContext.Provider, { value: masterDetailContextValue }, /* @__PURE__ */ React52.createElement(
+  return /* @__PURE__ */ React51.createElement(DataSourceMasterDetailContext.Provider, { value: masterDetailContextValue }, /* @__PURE__ */ React51.createElement(
     "div",
     {
       ref: domRef,
@@ -16591,6 +16587,7 @@ function InfiniteTableDetailRowFn(props) {
         position: "absolute",
         top: `${detailOffset}px`,
         left: 0,
+        // TODO see #rowDetailWidth
         width: `calc(${InternalVars.bodyWidth} - ${InternalVars.scrollbarWidthVertical})`,
         height: rowDetailHeight
       }
@@ -16598,7 +16595,7 @@ function InfiniteTableDetailRowFn(props) {
     rowDetailRenderer(rowInfo, currentRowCache)
   ));
 }
-var InfiniteTableDetailRow = React52.memo(
+var InfiniteTableDetailRow = React51.memo(
   InfiniteTableDetailRowFn
 );
@@ -16757,7 +16754,7 @@ function useCellRendering(param) {
         cellStyle,
         cellClassName
       };
-      return /* @__PURE__ */ React53.createElement(InfiniteTableColumnCell, __spreadValues({}, cellProps));
+      return /* @__PURE__ */ React52.createElement(InfiniteTableColumnCell, __spreadValues({}, cellProps));
     },
     [
       rowHeight,
@@ -16788,10 +16785,10 @@ function useCellRendering(param) {
       const dataArray2 = getData();
       const rowInfo = dataArray2[rowIndex];
       if (!rowInfo || !isRowDetailsExpanded(rowInfo) || !computedRowSizeCacheForDetails) {
-        return /* @__PURE__ */ React53.createElement("div", { ref: domRef, className: visibility.hidden });
+        return /* @__PURE__ */ React52.createElement("div", { ref: domRef, className: visibility.hidden });
       }
       const { rowDetailHeight: rowDetailHeight2, rowHeight: rowHeight2 } = computedRowSizeCacheForDetails.getSize(rowIndex);
-      return /* @__PURE__ */ React53.createElement(
+      return /* @__PURE__ */ React52.createElement(
         InfiniteTableDetailRow,
         {
           rowInfo,
@@ -17124,10 +17121,10 @@ function computeColumnGroupsDepths(columnGroups) {
 }
 // src/components/InfiniteTable/state/rowDetailRendererFromComponent.tsx
-import * as React54 from "react";
+import * as React53 from "react";
 function getRowDetailRendererFromComponent(RowDetail) {
   return (rowInfo, cache) => {
-    return /* @__PURE__ */ React54.createElement(RowDetail, { key: rowInfo.id, rowInfo, cache });
+    return /* @__PURE__ */ React53.createElement(RowDetail, { key: rowInfo.id, rowInfo, cache });
   };
 }
@@ -17176,6 +17173,8 @@ function initSetupState2({
     renderer,
     onRenderUpdater,
     propsCache: /* @__PURE__ */ new Map([]),
+    lastRowToCollapseRef: { current: null },
+    lastRowToExpandRef: { current: null },
     cellContextMenuVisibleFor: null,
     contextMenuVisibleFor: null,
     columnMenuVisibleForColumnId: null,
@@ -17376,6 +17375,21 @@ function getGroupByMap(groupBy) {
   }, /* @__PURE__ */ new Map());
 }
 var weakMap2 = /* @__PURE__ */ new WeakMap();
+function getMappedCallbacks2() {
+  return {
+    rowDetailState: (rowDetailState, state) => {
+      return {
+        callbackParams: [
+          rowDetailState,
+          {
+            expandRow: state.lastRowToExpandRef.current,
+            collapseRow: state.lastRowToCollapseRef.current
+          }
+        ]
+      };
+    }
+  };
+}
 var mapPropsToState = (params) => {
   var _a, _b, _c, _d, _e;
   const { props, state, oldState, parentState } = params;
@@ -18593,7 +18607,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "4.0.0"
+      version: "4.1.1"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -19632,7 +19646,7 @@ function useDOMEventHandlers() {
 import { useEffect as useEffect32 } from "react";
 // src/components/hooks/useOverlay/index.tsx
-import * as React55 from "react";
+import * as React54 from "react";
 import {
   useCallback as useCallback23,
   useEffect as useEffect30,
@@ -20023,10 +20037,10 @@ function retrieveElement(elementGetter) {
   });
 }
 function DefaultOverlayPortal(props) {
-  return /* @__PURE__ */ React55.createElement("div", { style: { position: "fixed", top: 0, left: 0 } }, props.children);
+  return /* @__PURE__ */ React54.createElement("div", { style: { position: "fixed", top: 0, left: 0 } }, props.children);
 }
 function OverlayContent(props) {
-  const nodeRef = React55.useRef(null);
+  const nodeRef = React54.useRef(null);
   useEffect30(() => {
     return props.realign.onChange((handle) => {
       if (nodeRef.current && handle) {
@@ -20034,7 +20048,7 @@ function OverlayContent(props) {
       }
     });
   }, [props.realign]);
-  return /* @__PURE__ */ React55.createElement(
+  return /* @__PURE__ */ React54.createElement(
     "div",
     {
       style: { position: "absolute", top: 0, left: 0 },
@@ -20105,22 +20119,22 @@ function useOverlayPortal(content, portalContainer) {
   }, [portalContainer]);
   return portalContainer ? container ? createPortal2(content, container) : (
     // we're probably still fetching the container
-    /* @__PURE__ */ React55.createElement(React55.Fragment, null)
-  ) : portalContainer === null || portalContainer === false ? content : /* @__PURE__ */ React55.createElement(DefaultOverlayPortal, null, content);
+    /* @__PURE__ */ React54.createElement(React54.Fragment, null)
+  ) : portalContainer === null || portalContainer === false ? content : /* @__PURE__ */ React54.createElement(DefaultOverlayPortal, null, content);
 }
 function getIdForReactOnlyChild(children) {
-  if (React55.Children.count(children) === 1) {
-    const child = React55.Children.only(children);
-    if (React55.isValidElement(child)) {
+  if (React54.Children.count(children) === 1) {
+    const child = React54.Children.only(children);
+    if (React54.isValidElement(child)) {
       return child.props.id || child.key;
     }
   }
   return null;
 }
 function injectPortalContainerAndConstrainInMenuChild(children, portalContainer, constrainTo) {
-  if (React55.Children.count(children) === 1) {
-    const child = React55.Children.only(children);
-    if (React55.isValidElement(child) && child.type[propToIdentifyMenu]) {
+  if (React54.Children.count(children) === 1) {
+    const child = React54.Children.only(children);
+    if (React54.isValidElement(child) && child.type[propToIdentifyMenu]) {
       const newProps = {};
       if (child.props.portalContainer === void 0) {
         newProps.portalContainer = portalContainer;
@@ -20128,7 +20142,7 @@ function injectPortalContainerAndConstrainInMenuChild(children, portalContainer,
       if (child.props.constrainTo === void 0) {
         newProps.constrainTo = constrainTo;
       }
-      return React55.cloneElement(child, newProps);
+      return React54.cloneElement(child, newProps);
     }
   }
   return children;
@@ -20144,7 +20158,7 @@ function useOverlay(params) {
     const contentForPortal = [];
     for (const [_2, handle] of handles) {
       contentForPortal.push(
-        /* @__PURE__ */ React55.createElement(OverlayContent, __spreadProps(__spreadValues({}, handle), { key: handle.key }))
+        /* @__PURE__ */ React54.createElement(OverlayContent, __spreadProps(__spreadValues({}, handle), { key: handle.key }))
       );
     }
     return contentForPortal;
@@ -20189,7 +20203,7 @@ function useOverlay(params) {
     },
     [handles, rootParams.portalContainer, updateContent]
   );
-  React55.useEffect(() => {
+  React54.useEffect(() => {
     if (handleToRealign) {
       const handle = handles.get(handleToRealign);
       if (handle) {
@@ -20208,7 +20222,7 @@ function useOverlay(params) {
     handles.clear();
     updateContent();
   };
-  React55.useEffect(() => {
+  React54.useEffect(() => {
   }, []);
   return {
     portal,
@@ -20220,16 +20234,16 @@ function useOverlay(params) {
 }
 // src/components/InfiniteTable/utils/getMenuForColumn.tsx
-import * as React61 from "react";
+import * as React60 from "react";
 // src/components/Menu/index.tsx
-import * as React59 from "react";
+import * as React58 from "react";
 // src/components/Menu/getMenuState.tsx
-import * as React57 from "react";
+import * as React56 from "react";
 // src/components/Menu/childrenToRuntimeItems.tsx
-import * as React56 from "react";
+import * as React55 from "react";
 // src/components/Menu/MenuItem.tsx
 function MenuItem(_props) {
@@ -20248,7 +20262,7 @@ var MenuSeparatorCls = "MenuCls_MenuSeparatorCls__db3arfd";
 // src/components/Menu/childrenToRuntimeItems.tsx
 var SEPARATOR = "-";
 function MenuSeparator() {
-  return /* @__PURE__ */ React56.createElement("hr", { className: MenuSeparatorCls });
+  return /* @__PURE__ */ React55.createElement("hr", { className: MenuSeparatorCls });
 }
 var toRuntimeItem = ({
   columns,
@@ -20257,7 +20271,7 @@ var toRuntimeItem = ({
   menuId
 }, item) => {
   const menuItem = item && (item.key != null || item.label != null) ? item : null;
-  const menuDecoration = menuItem === null ? item === SEPARATOR ? /* @__PURE__ */ React56.createElement(MenuSeparator, null) : item : null;
+  const menuDecoration = menuItem === null ? item === SEPARATOR ? /* @__PURE__ */ React55.createElement(MenuSeparator, null) : item : null;
   const runtimeItem = menuItem != null ? {
     type: "item",
     parentMenuId: menuId,
@@ -20285,7 +20299,7 @@ var toRuntimeItem = ({
   return runtimeItem;
 };
 function childrenToRuntimeItems(context, children) {
-  return React56.Children.map(children, (child) => {
+  return React55.Children.map(children, (child) => {
     if (child) {
       if (child.props.__is_menu_item || child.type === MenuItem) {
         const itemProps = __spreadValues({}, child.props);
@@ -20308,7 +20322,7 @@ function childrenToRuntimeItems(context, children) {
 // src/components/Menu/getMenuState.tsx
 var SUBMENU_COL_NAME = "submenu";
 function getInitialMenuState() {
-  const domRef = React57.createRef();
+  const domRef = React56.createRef();
   return {
     keyboardActiveItemKey: null,
     activeItemKey: null,
@@ -20363,7 +20377,7 @@ var deriveStateFromProps2 = (params) => {
       columns.push({
         name: SUBMENU_COL_NAME,
         render: ({ domProps, item }) => {
-          return item.menu ? /* @__PURE__ */ React57.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React57.createElement(ExpanderIcon, { expanded: false })) : /* @__PURE__ */ React57.createElement("div", __spreadValues({}, domProps));
+          return item.menu ? /* @__PURE__ */ React56.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React56.createElement(ExpanderIcon, { expanded: false })) : /* @__PURE__ */ React56.createElement("div", __spreadValues({}, domProps));
         }
       });
     }
@@ -20380,7 +20394,7 @@ var deriveStateFromProps2 = (params) => {
 };
 // src/components/Menu/Menu.tsx
-import * as React58 from "react";
+import * as React57 from "react";
 import {
   useCallback as useCallback25,
   useLayoutEffect as useLayoutEffect14,
@@ -20645,7 +20659,7 @@ function renderSubmenuForItem(item, config) {
   if (typeof itemMenu === "function") {
     itemMenu = itemMenu();
   }
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React57.createElement(
     Menu,
     __spreadProps(__spreadValues({
       key: overlayId,
@@ -20858,7 +20872,7 @@ function MenuComponent(props) {
       setActiveItemKey(key);
     }
   });
-  renderedChildren = runtimeItems.map((runtimeItem, index) => /* @__PURE__ */ React58.createElement(
+  renderedChildren = runtimeItems.map((runtimeItem, index) => /* @__PURE__ */ React57.createElement(
     RuntimeItemRenderer,
     {
       key: runtimeItem.type === "item" ? runtimeItem.key : index,
@@ -21043,7 +21057,7 @@ function MenuComponent(props) {
       domRef.current = node;
     }
   }, []);
-  const result = /* @__PURE__ */ React58.createElement("div", { className: display.contents }, /* @__PURE__ */ React58.createElement(
+  const result = /* @__PURE__ */ React57.createElement("div", { className: display.contents }, /* @__PURE__ */ React57.createElement(
     "div",
     __spreadProps(__spreadValues({}, domProps), {
       "data-menu-id": menuId,
@@ -21075,12 +21089,12 @@ function MenuComponent(props) {
   return destroyed ? null : result;
 }
 function RuntimeItemRenderer(props) {
-  const [pressed, setPressed] = React58.useState(false);
+  const [pressed, setPressed] = React57.useState(false);
   const { columns, item, index, active, keyboardActive } = props;
   const key = item.type === "item" ? item.value.key : index;
   let content = null;
   if (item.type === "decoration") {
-    content = /* @__PURE__ */ React58.createElement("div", { style: item.style }, item.value);
+    content = /* @__PURE__ */ React57.createElement("div", { style: item.style }, item.value);
   } else {
     let spanIndex = 0;
     content = columns.map((col, i) => {
@@ -21141,7 +21155,7 @@ function RuntimeItemRenderer(props) {
           }
         }
       };
-      return col.render ? /* @__PURE__ */ React58.createElement(
+      return col.render ? /* @__PURE__ */ React57.createElement(
         RenderHookComponent,
         {
           key: `${key}-${field}`,
@@ -21153,10 +21167,10 @@ function RuntimeItemRenderer(props) {
             domProps
           }
         }
-      ) : /* @__PURE__ */ React58.createElement("div", __spreadValues({ key: `${key}-${field}` }, domProps), target[field]);
+      ) : /* @__PURE__ */ React57.createElement("div", __spreadValues({ key: `${key}-${field}` }, domProps), target[field]);
     }).filter(Boolean);
   }
-  return /* @__PURE__ */ React58.createElement("div", { className: MenuRowCls }, content);
+  return /* @__PURE__ */ React57.createElement("div", { className: MenuRowCls }, content);
 }
 // src/components/Menu/index.tsx
@@ -21170,12 +21184,12 @@ var MenuRoot = getComponentStateRoot({
 function MenuContextProvider(props) {
   const { componentActions, componentState } = useComponentState();
   const getState = useLatest(componentState);
-  return /* @__PURE__ */ React59.createElement(
+  return /* @__PURE__ */ React58.createElement(
     MenuContext.Provider,
     {
       value: { componentActions, componentState, getState }
     },
-    /* @__PURE__ */ React59.createElement(MenuComponent, { domProps: props.domProps })
+    /* @__PURE__ */ React58.createElement(MenuComponent, { domProps: props.domProps })
   );
 }
 function Menu(props) {
@@ -21217,24 +21231,24 @@ function Menu(props) {
     //@ts-ignore
     "__is_infinite_menu_component"
   ]);
-  const menu = /* @__PURE__ */ React59.createElement(
+  const menu = /* @__PURE__ */ React58.createElement(
     MenuRoot,
     __spreadValues({
       addSubmenuColumnIfNeeded,
       bubbleActionsFromSubmenus,
       wrapLabels
     }, props),
-    /* @__PURE__ */ React59.createElement(MenuContextProvider, { domProps })
+    /* @__PURE__ */ React58.createElement(MenuContextProvider, { domProps })
   );
   if (false) {
-    return /* @__PURE__ */ React59.createElement(React59.StrictMode, null, menu);
+    return /* @__PURE__ */ React58.createElement(React58.StrictMode, null, menu);
   }
   return menu;
 }
 Menu[propToIdentifyMenu] = true;
 // src/components/InfiniteTable/utils/defaultGetColumnMenuItems.tsx
-import * as React60 from "react";
+import * as React59 from "react";
 function defaultGetColumnMenuItems(_items, params) {
   const { columnApi, column, getComputed, api } = params;
   const sortable = columnApi.isSortable();
@@ -21321,7 +21335,7 @@ function defaultGetColumnMenuItems(_items, params) {
           colItems.push({
             key: id,
             label,
-            check: /* @__PURE__ */ React60.createElement(
+            check: /* @__PURE__ */ React59.createElement(
               InfiniteCheckBox,
               {
                 key: col.id,
@@ -21384,7 +21398,7 @@ function getMenuForColumn(columnId, context, onHideIntent) {
   if (!items || !items.length) {
     return null;
   }
-  return /* @__PURE__ */ React61.createElement(
+  return /* @__PURE__ */ React60.createElement(
     MenuCmp,
     {
       autoFocus: true,
@@ -21504,7 +21518,7 @@ function useColumnMenu() {
 }
 // src/components/InfiniteTable/components/FocusDetect.tsx
-import * as React62 from "react";
+import * as React61 from "react";
 import { useCallback as useCallback26 } from "react";
 var style = {
   width: 0,
@@ -21538,7 +21552,7 @@ function FocusDetect() {
     };
     focusLastFocusableCell(context);
   }), []);
-  return /* @__PURE__ */ React62.createElement(
+  return /* @__PURE__ */ React61.createElement(
     "div",
     {
       onFocus,
@@ -21669,18 +21683,18 @@ function useEditingCallbackProps() {
 import { useEffect as useEffect34 } from "react";
 // src/components/InfiniteTable/utils/getFilterOperatorMenuForColumn.tsx
-import * as React65 from "react";
+import * as React64 from "react";
 // src/components/InfiniteTable/components/icons/ClearIcon.tsx
-import * as React63 from "react";
+import * as React62 from "react";
 var ClearIcon = (props) => {
-  return /* @__PURE__ */ React63.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React63.createElement("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }));
+  return /* @__PURE__ */ React62.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React62.createElement("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }));
 };
 // src/components/InfiniteTable/components/icons/DoneIcon.tsx
-import * as React64 from "react";
+import * as React63 from "react";
 var DoneIcon = (props) => {
-  return /* @__PURE__ */ React64.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React64.createElement("path", { d: "m9.55 19-6.725-6.725L5.25 9.85l4.3 4.325 9.225-9.225 2.425 2.4Z" }));
+  return /* @__PURE__ */ React63.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React63.createElement("path", { d: "m9.55 19-6.725-6.725L5.25 9.85l4.3 4.325 9.225-9.225 2.425 2.4Z" }));
 };
 // src/components/InfiniteTable/utils/getFilterOperatorMenuForColumn.tsx
@@ -21726,12 +21740,12 @@ function getFilterOperatorMenuForColumn(columnId, context, onHideIntent) {
     const IconCmp = (_b = (_a2 = operator.components) == null ? void 0 : _a2.Icon) != null ? _b : FilterIcon;
     return {
       key,
-      icon: /* @__PURE__ */ React65.createElement(IconCmp, null),
-      label: /* @__PURE__ */ React65.createElement(React65.Fragment, null, (_c = operator.label) != null ? _c : operator.name),
+      icon: /* @__PURE__ */ React64.createElement(IconCmp, null),
+      label: /* @__PURE__ */ React64.createElement(React64.Fragment, null, (_c = operator.label) != null ? _c : operator.name),
       onAction: () => {
         api.setColumnFilterOperator(columnId, key);
       },
-      checked: checked ? /* @__PURE__ */ React65.createElement(DoneIcon, { size: 16 }) : null
+      checked: checked ? /* @__PURE__ */ React64.createElement(DoneIcon, { size: 16 }) : null
     };
   });
   const firstItems = [
@@ -21746,7 +21760,7 @@ function getFilterOperatorMenuForColumn(columnId, context, onHideIntent) {
     {
       key: "reset",
       label: "Reset",
-      icon: /* @__PURE__ */ React65.createElement(ClearIcon, null),
+      icon: /* @__PURE__ */ React64.createElement(ClearIcon, null),
       disabled: !column.computedFiltered,
       onAction: () => {
         api.clearColumnFilter(columnId);
@@ -21768,7 +21782,7 @@ function getFilterOperatorMenuForColumn(columnId, context, onHideIntent) {
     filterTypes
   };
   const items = getFilterOperatorMenuItems ? getFilterOperatorMenuItems(defaultItems, param) : defaultItems;
-  return /* @__PURE__ */ React65.createElement(
+  return /* @__PURE__ */ React64.createElement(
     MenuCmp,
     {
       autoFocus: true,
@@ -21875,7 +21889,7 @@ function useColumnFilterOperatorMenu() {
 import { useEffect as useEffect35 } from "react";
 // src/components/InfiniteTable/utils/getCellContextMenu.tsx
-import * as React66 from "react";
+import * as React65 from "react";
 function getCellContextMenu(cellLocation, context, onHideIntent) {
   var _a;
   const { columnId, rowIndex, event } = cellLocation;
@@ -21915,7 +21929,7 @@ function getCellContextMenu(cellLocation, context, onHideIntent) {
   }
   return {
     preventDefault: true,
-    menu: /* @__PURE__ */ React66.createElement(
+    menu: /* @__PURE__ */ React65.createElement(
       MenuCmp,
       {
         columns: menuColumns,
@@ -21970,7 +21984,7 @@ function getTableContextMenu(menuLocation, context, onHideIntent) {
   }
   return {
     preventDefault: true,
-    menu: /* @__PURE__ */ React66.createElement(
+    menu: /* @__PURE__ */ React65.createElement(
       MenuCmp,
       {
         columns: menuColumns,
@@ -22174,6 +22188,83 @@ function useTableContextMenu() {
   return { menuPortal };
 }
+// src/components/InfiniteTable/components/HScrollSyncContent.tsx
+import { useRef as useRef30 } from "react";
+import * as React66 from "react";
+// src/components/InfiniteTable/hooks/useGridScroll.ts
+import { useCallback as useCallback27, useEffect as useEffect36 } from "react";
+function useGridScroll(onScroll, deps) {
+  const {
+    state: { brain }
+  } = useInfiniteTable();
+  const memoizedOnScroll = useCallback27(onScroll, deps);
+  useEffect36(() => {
+    const removeOnScroll = brain.onScroll(memoizedOnScroll);
+    return removeOnScroll;
+  }, [brain, memoizedOnScroll]);
+}
+// src/components/InfiniteTable/components/HScrollSyncContent.css.ts
+var HScrollSyncContentCls = "HScrollSyncContent_HScrollSyncContentCls__yzx0vj0";
+// src/components/InfiniteTable/components/HScrollSyncContent.tsx
+function HScrollSyncContent(props) {
+  const _a = props, { width, maxWidth, minWidth, scrollable } = _a, domProps = __objRest(_a, ["width", "maxWidth", "minWidth", "scrollable"]);
+  const domRef = useRef30(null);
+  useGridScroll(
+    (scrollPos) => {
+      if (domRef.current && scrollable !== false) {
+        domRef.current.style.transform = `translate3d(${-scrollPos.scrollLeft}px, 0px, 0px)`;
+      }
+    },
+    [scrollable]
+  );
+  const style2 = __spreadValues({}, domProps.style);
+  if (width === "column") {
+    style2.width = ThemeVars.runtime.totalVisibleColumnsWidth;
+  } else if (width === "viewport") {
+    style2.width = ThemeVars.runtime.bodyWidth;
+  }
+  if (minWidth === "column") {
+    style2.minWidth = ThemeVars.runtime.totalVisibleColumnsWidth;
+  } else if (minWidth === "viewport") {
+    style2.minWidth = ThemeVars.runtime.bodyWidth;
+  }
+  if (maxWidth === "column") {
+    style2.maxWidth = ThemeVars.runtime.totalVisibleColumnsWidth;
+  } else if (maxWidth === "viewport") {
+    style2.maxWidth = ThemeVars.runtime.bodyWidth;
+  }
+  return /* @__PURE__ */ React66.createElement(
+    "div",
+    __spreadProps(__spreadValues({
+      ref: domRef
+    }, domProps), {
+      className: domProps.className ? join(domProps.className, HScrollSyncContentCls) : HScrollSyncContentCls,
+      style: style2
+    }),
+    domProps.children
+  );
+}
+// src/components/InfiniteTable/hooks/useVisibleColumnSizes.ts
+var columnWidthAtIndex6 = stripVar(InternalVars.columnWidthAtIndex);
+var columnOffsetAtIndex5 = stripVar(InternalVars.columnOffsetAtIndex);
+function useVisibleColumnSizes() {
+  const context = useInfiniteTable();
+  return context.computed.computedVisibleColumns.map((column) => {
+    return {
+      id: column.id,
+      width: column.computedWidth,
+      cssVarForWidth: `var(${columnWidthAtIndex6}-${column.computedVisibleIndex})`,
+      offset: column.computedOffset,
+      cssVarForOffset: `var(${columnOffsetAtIndex5}-${column.computedVisibleIndex})`,
+      pinned: column.computedPinned
+    };
+  });
+}
 // src/components/InfiniteTable/index.tsx
 var InfiniteTableClassName = internalProps.rootClassName;
 var HOVERED_CLASS_NAMES = [RowHoverCls, "InfiniteColumnCell--hovered"];
@@ -22191,44 +22282,154 @@ var InfiniteTableRoot = getComponentStateRoot({
     rowHeight: true,
     columnHeaderHeight: true
   },
+  //@ts-ignore
+  mappedCallbacks: getMappedCallbacks2(),
   // @ts-ignore
   getParentState: () => useDataSource(),
   debugName: "InfiniteTable"
 });
+function InfiniteTableHeader2() {
+  const context = useInfiniteTable();
+  const { state: componentState, getComputed } = context;
+  const { header, brain, headerBrain } = componentState;
+  const { scrollbars } = getComputed();
+  return header ? /* @__PURE__ */ React67.createElement(
+    TableHeaderWrapper,
+    {
+      bodyBrain: brain,
+      headerBrain,
+      scrollbars
+    }
+  ) : null;
+}
+var InfiniteTableBodyCls = join(
+  `${rootClassName2}Body`,
+  position.relative,
+  flex["1"],
+  transformTranslateZero
+);
+function InfiniteTableBodyContainer(props) {
+  return /* @__PURE__ */ React67.createElement(
+    "div",
+    __spreadProps(__spreadValues({}, props), {
+      className: props.className ? join(InfiniteTableBodyCls, props.className) : InfiniteTableBodyCls
+    })
+  );
+}
+function InfiniteTableBody() {
+  var _a;
+  const context = useInfiniteTable();
+  const masterContext = useMasterDetailContext();
+  const { state: componentState, getComputed, api } = context;
+  const {
+    renderer,
+    onRenderUpdater,
+    debugId,
+    keyboardNavigation,
+    activeRowIndex,
+    loadingText,
+    scrollStopDelay,
+    brain,
+    scrollerDOMRef,
+    components: components2,
+    bodySize,
+    activeCellIndex,
+    rowDetailRenderer
+  } = componentState;
+  const LoadMaskCmp = (_a = components2 == null ? void 0 : components2.LoadMask) != null ? _a : LoadMask;
+  const computed = getComputed();
+  const { computedRowHeight, computedRowSizeCacheForDetails } = computed;
+  const activeCellRowHeight = (computedRowSizeCacheForDetails == null ? void 0 : computedRowSizeCacheForDetails.getRowHeight) || computedRowHeight;
+  const {
+    componentState: { loading }
+  } = useDataSourceContextValue();
+  const onContextMenu = React67.useCallback((event) => {
+    const state = context.getState();
+    const target = event.target;
+    if (!masterContext && event._from_row_detail) {
+      return;
+    }
+    if (masterContext) {
+      event._from_row_detail = true;
+    }
+    const cell = selectParentUntil(
+      target,
+      getCellSelector(),
+      state.domRef.current
+    );
+    let columnId;
+    let colIndex;
+    let rowId;
+    let rowIndex;
+    if (cell) {
+      colIndex = Number(cell.dataset.colIndex);
+      rowIndex = Number(cell.dataset.rowIndex);
+      columnId = context.getComputed().computedVisibleColumns[colIndex].id;
+      rowId = context.dataSourceApi.getRowInfoArray()[rowIndex].id;
+    }
+    const param = {
+      columnId,
+      colIndex,
+      rowId,
+      rowIndex,
+      event,
+      target: cell != null ? cell : event.target
+    };
+    if (cell) {
+      state.cellContextMenu(param);
+    }
+    state.contextMenu(param);
+  }, []);
+  const { renderCell, renderDetailRow } = useCellRendering({
+    imperativeApi: api,
+    getComputed,
+    domRef: componentState.domRef,
+    bodySize,
+    computed
+  });
+  return /* @__PURE__ */ React67.createElement(InfiniteTableBodyContainer, { onContextMenu }, /* @__PURE__ */ React67.createElement(
+    HeadlessTable,
+    {
+      debugId,
+      tabIndex: 0,
+      activeRowIndex: componentState.ready && keyboardNavigation === "row" ? activeRowIndex : null,
+      activeCellIndex: componentState.ready && keyboardNavigation === "cell" && // we want to hide the active cell indicator while column reodering is happening
+      !componentState.columnReorderDragColumnId ? activeCellIndex : null,
+      scrollStopDelay,
+      renderer,
+      onRenderUpdater,
+      brain,
+      activeCellRowHeight,
+      renderCell,
+      renderDetailRow: rowDetailRenderer ? renderDetailRow : void 0,
+      cellHoverClassNames: HOVERED_CLASS_NAMES,
+      scrollerDOMRef
+    }
+  ), /* @__PURE__ */ React67.createElement(LoadMaskCmp, { visible: loading }, loadingText));
+}
 var InfiniteTableComponent = React67.memo(
   function InfiniteTableComponent2() {
-    var _a;
     const context = useInfiniteTable();
     const masterContext = useMasterDetailContext();
-    const { state: componentState, getComputed, computed, api } = context;
+    const { state: componentState, api, children: initialChildren } = context;
     const {
-      componentState: { loading, dataArray },
+      componentState: { dataArray },
       getState: getDataSourceState,
       componentActions: dataSourceActions
     } = useDataSourceContextValue();
     const {
       domRef,
-      scrollerDOMRef,
       portalDOMRef,
-      loadingText,
-      rowDetailRenderer,
-      header,
       onRowHeightCSSVarChange,
       onRowDetailHeightCSSVarChange,
       onColumnHeaderHeightCSSVarChange,
       rowHeightCSSVar,
       rowDetailHeightCSSVar,
       columnHeaderHeightCSSVar,
-      components: components2,
       scrollStopDelay,
       brain,
-      headerBrain,
-      renderer,
-      keyboardNavigation,
       activeRowIndex,
-      activeCellIndex,
-      onRenderUpdater,
-      debugId
+      activeCellIndex
     } = componentState;
     let { licenseKey } = componentState;
     if (!licenseKey && InfiniteTable.licenseKey) {
@@ -22237,16 +22438,6 @@ var InfiniteTableComponent = React67.memo(
     useScrollToActiveRow(activeRowIndex, dataArray.length, api);
     useScrollToActiveCell(activeCellIndex, dataArray.length, api);
     const { onKeyDown: onKeyDown2 } = useDOMEventHandlers();
-    const { bodySize } = componentState;
-    const { scrollbars, computedRowHeight, computedRowSizeCacheForDetails } = computed;
-    const activeCellRowHeight = (computedRowSizeCacheForDetails == null ? void 0 : computedRowSizeCacheForDetails.getRowHeight) || computedRowHeight;
-    const { renderCell, renderDetailRow } = useCellRendering({
-      imperativeApi: api,
-      getComputed,
-      domRef: componentState.domRef,
-      bodySize,
-      computed
-    });
     React67.useEffect(() => {
       const dataSourceState = getDataSourceState();
       const onChange = debounce(
@@ -22262,7 +22453,6 @@ var InfiniteTableComponent = React67.memo(
     }, [brain, scrollStopDelay]);
     const licenseValid = useLicense(licenseKey);
     const domProps = useDOMProps(componentState.domProps);
-    const LoadMaskCmp = (_a = components2 == null ? void 0 : components2.LoadMask) != null ? _a : LoadMask;
     React67.useEffect(() => {
       brain.setScrollStopDelay(scrollStopDelay);
       dataSourceActions.scrollStopDelayUpdatedByTable = scrollStopDelay;
@@ -22286,74 +22476,13 @@ var InfiniteTableComponent = React67.memo(
         globalThis.infiniteApi = context.api;
       }
     }, [componentState.ready]);
-    const onContextMenu = React67.useCallback((event) => {
-      const state = context.getState();
-      const target = event.target;
-      if (!masterContext && event._from_row_detail) {
-        return;
-      }
-      if (masterContext) {
-        event._from_row_detail = true;
-      }
-      const cell = selectParentUntil(
-        target,
-        getCellSelector(),
-        state.domRef.current
-      );
-      let columnId;
-      let colIndex;
-      let rowId;
-      let rowIndex;
-      if (cell) {
-        colIndex = Number(cell.dataset.colIndex);
-        rowIndex = Number(cell.dataset.rowIndex);
-        columnId = context.getComputed().computedVisibleColumns[colIndex].id;
-        rowId = context.dataSourceApi.getRowInfoArray()[rowIndex].id;
-      }
-      const param = {
-        columnId,
-        colIndex,
-        rowId,
-        rowIndex,
-        event,
-        target: cell != null ? cell : event.target
-      };
-      if (cell) {
-        state.cellContextMenu(param);
-      }
-      state.contextMenu(param);
-    }, []);
     React67.useEffect(() => {
       if (masterContext) {
         portalDOMRef.current = masterContext.getMasterState().portalDOMRef.current;
       }
     }, []);
-    return /* @__PURE__ */ React67.createElement("div", __spreadValues({ onKeyDown: onKeyDown2, ref: domRef }, domProps), header ? /* @__PURE__ */ React67.createElement(
-      TableHeaderWrapper,
-      {
-        bodyBrain: brain,
-        headerBrain,
-        scrollbars
-      }
-    ) : null, /* @__PURE__ */ React67.createElement(InfiniteTableBody, { onContextMenu }, /* @__PURE__ */ React67.createElement(
-      HeadlessTable,
-      {
-        debugId,
-        tabIndex: 0,
-        activeRowIndex: componentState.ready && keyboardNavigation === "row" ? activeRowIndex : null,
-        activeCellIndex: componentState.ready && keyboardNavigation === "cell" && // we want to hide the active cell indicator while column reodering is happening
-        !componentState.columnReorderDragColumnId ? activeCellIndex : null,
-        scrollStopDelay,
-        renderer,
-        onRenderUpdater,
-        brain,
-        activeCellRowHeight,
-        renderCell,
-        renderDetailRow: rowDetailRenderer ? renderDetailRow : void 0,
-        cellHoverClassNames: HOVERED_CLASS_NAMES,
-        scrollerDOMRef
-      }
-    ), /* @__PURE__ */ React67.createElement(LoadMaskCmp, { visible: loading }, loadingText)), /* @__PURE__ */ React67.createElement(
+    const children = initialChildren != null ? initialChildren : /* @__PURE__ */ React67.createElement(React67.Fragment, null, /* @__PURE__ */ React67.createElement(InfiniteTableHeader2, null), /* @__PURE__ */ React67.createElement(InfiniteTableBody, null));
+    return /* @__PURE__ */ React67.createElement("div", __spreadValues({ onKeyDown: onKeyDown2, ref: domRef }, domProps), children, /* @__PURE__ */ React67.createElement(
       "div",
       {
         ref: portalDOMRef,
@@ -22387,10 +22516,12 @@ var InfiniteTableComponent = React67.memo(
         varName: columnHeaderHeightCSSVar,
         onChange: onColumnHeaderHeightCSSVarChange
       }
-    ) : null, /* @__PURE__ */ React67.createElement(InfiniteTableFooter, null), licenseValid ? null : /* @__PURE__ */ React67.createElement(InfiniteTableLicenseFooter, null), /* @__PURE__ */ React67.createElement(FocusDetect, null));
+    ) : null, licenseValid ? null : /* @__PURE__ */ React67.createElement(InfiniteTableLicenseFooter, null), /* @__PURE__ */ React67.createElement(FocusDetect, null));
   }
 );
-function InfiniteTableContextProvider() {
+function InfiniteTableContextProvider({
+  children
+}) {
   const { componentActions, componentState } = useComponentState();
   const { scrollerDOMRef, scrollTopKey } = componentState;
   const computed = useComputed();
@@ -22430,7 +22561,8 @@ function InfiniteTableContextProvider() {
     getComputed,
     getState,
     api: imperativeApi,
-    dataSourceApi
+    dataSourceApi,
+    children
   };
   useResizeObserver(
     scrollerDOMRef,
@@ -22463,7 +22595,7 @@ var InfiniteTable = function(props) {
         rowHeight: DEFAULT_ROW_HEIGHT,
         columnHeaderHeight: DEFAULT_COLUMN_HEADER_HEIGHT
       }, props),
-      /* @__PURE__ */ React67.createElement(InfiniteTableContextProvider, null)
+      /* @__PURE__ */ React67.createElement(InfiniteTableContextProvider, { children: props.children })
     )
   );
   if (false) {
@@ -22471,6 +22603,10 @@ var InfiniteTable = function(props) {
   }
   return table;
 };
+InfiniteTable.Header = InfiniteTableHeader2;
+InfiniteTable.Body = InfiniteTableBody;
+InfiniteTable.HScrollSyncContent = HScrollSyncContent;
+InfiniteTable.Footer = () => /* @__PURE__ */ React67.createElement(InfiniteTableFooter, null);
 // src/components/InfiniteTable/eventHandlers/keyboardShortcuts.ts
 var instantEdit = {
@@ -22517,7 +22653,7 @@ var keyboardShortcuts = {
 };
 // src/components/hooks/useInterceptedMap.ts
-import { useEffect as useEffect37 } from "react";
+import { useEffect as useEffect38 } from "react";
 function interceptMap(map2, fns) {
   const { set, delete: deleteKey, clear } = map2;
   if (fns.set) {
@@ -22717,6 +22853,7 @@ export {
   useDataSource,
   useEffectWithChanges,
   useEffectWithObject,
+  useGridScroll,
   useInfiniteColumnCell,
   useInfiniteColumnEditor,
   useInfiniteColumnFilterEditor,
@@ -22724,6 +22861,7 @@ export {
   useMasterRowInfo,
   useOverlay,
   useOverlayPortal,
-  useRowInfoReducers
+  useRowInfoReducers,
+  useVisibleColumnSizes
 };
 //!collapsed || lazyLoad;