@infinite-table/infinite-react 3.3.4 → 4.1.0

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
  1. package/index.css +1 -1
  2. package/index.d.ts +54 -28
  3. package/index.dev.js +809 -808
  4. package/index.dev.mjs +756 -757
  5. package/index.js +2 -2
  6. package/index.mjs +2 -2
  7. package/package.json +2 -2
package/index.dev.mjs CHANGED
@@ -1176,9 +1176,10 @@ var useOnScroll = (domRef, onScroll) => {
1176
1176
  };
1177
1177
 
1178
1178
  // src/components/VirtualScrollContainer/VirtualScrollContainer.css.ts
1179
- 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" };
1180
- 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" };
1181
- 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" };
1179
+ 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" };
1180
+ 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" };
1181
+ 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" };
1182
+ var VirtualScrollContainerChildToScrollCls = "VirtualScrollContainer_VirtualScrollContainerChildToScrollCls__1ueijco1";
1182
1183
  var VirtualScrollContainerCls = "VirtualScrollContainer_VirtualScrollContainerCls__1ueijco0 utilities_boxSizingBorderBox__16lm1iw0";
1183
1184
 
1184
1185
  // src/components/VirtualScrollContainer/getScrollableClassName.ts
@@ -1387,7 +1388,7 @@ var internalProps = {
1387
1388
  };
1388
1389
 
1389
1390
  // src/components/InfiniteTable/vars.css.ts
1390
- 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)" } } };
1391
+ 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)" } } };
1391
1392
  var columnHeaderHeightName = "column-header-height";
1392
1393
 
1393
1394
  // src/components/InfiniteTable/utils/infiniteDOMUtils.ts
@@ -4096,8 +4097,8 @@ var useRerender = () => {
4096
4097
  };
4097
4098
 
4098
4099
  // src/components/InfiniteTable/components/ActiveCellIndicator.css.ts
4099
- 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" };
4100
- 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";
4100
+ 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" };
4101
+ 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";
4101
4102
 
4102
4103
  // src/components/InfiniteTable/components/ActiveRowIndicator.css.ts
4103
4104
  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
4167
4168
  var { rootClassName: rootClassName4 } = internalProps;
4168
4169
  var baseCls2 = `${rootClassName4}-ActiveCellIndicator`;
4169
4170
  var columnZIndexAtIndex2 = stripVar(InternalVars.columnZIndexAtIndex);
4170
- var ActiveStyle2 = {
4171
- [stripVar(InternalVars.activeCellOffsetX)]: InternalVars.activeCellColOffset,
4172
- [stripVar(InternalVars.activeCellOffsetY)]: InternalVars.activeCellRowOffset,
4173
- transform: `translate3d(${InternalVars.activeCellOffsetX}, ${InternalVars.activeCellOffsetY}, 0px)`,
4174
- width: InternalVars.activeCellColWidth,
4175
- height: InternalVars.activeCellRowHeight
4176
- };
4177
4171
  var reposition = (brain, activeCellIndex, rowHeight, domRef) => {
4178
4172
  if (activeCellIndex == null) {
4179
4173
  return;
@@ -4212,6 +4206,7 @@ var ActiveCellIndicatorFn = (props) => {
4212
4206
  "div",
4213
4207
  {
4214
4208
  className: ActiveIndicatorWrapperCls,
4209
+ ref: domRef,
4215
4210
  "data-name": "active-cell",
4216
4211
  style: active ? {
4217
4212
  zIndex: `var(${columnZIndexAtIndex2}-${props.activeCellIndex[1]})`
@@ -4220,10 +4215,8 @@ var ActiveCellIndicatorFn = (props) => {
4220
4215
  /* @__PURE__ */ React12.createElement(
4221
4216
  "div",
4222
4217
  {
4223
- ref: domRef,
4224
4218
  "data-name": "active-cell-indicator",
4225
- className: `${baseCls2} ${active ? ActiveCellIndicatorCls.visible : ActiveCellIndicatorCls.hidden}`,
4226
- style: active ? ActiveStyle2 : void 0
4219
+ className: `${baseCls2} ${active ? ActiveCellIndicatorCls.visible : ActiveCellIndicatorCls.hidden}`
4227
4220
  }
4228
4221
  )
4229
4222
  )
@@ -4254,6 +4247,10 @@ function useMatrixBrain(brain, brainOptions, fixedCellsInfo) {
4254
4247
  colspan: brainOptions.colspan
4255
4248
  });
4256
4249
  }
4250
+ var CHILD_TO_SCROLL_CLS = join(
4251
+ scrollTransformTargetCls,
4252
+ VirtualScrollContainerChildToScrollCls
4253
+ );
4257
4254
  function HeadlessTable(props) {
4258
4255
  const _a = props, {
4259
4256
  brain,
@@ -4332,7 +4329,7 @@ function HeadlessTable(props) {
4332
4329
  "div",
4333
4330
  {
4334
4331
  ref: domRef,
4335
- className: scrollTransformTargetCls,
4332
+ className: CHILD_TO_SCROLL_CLS,
4336
4333
  "data-name": "scroll-transform-target"
4337
4334
  },
4338
4335
  /* @__PURE__ */ React13.createElement(
@@ -4768,7 +4765,7 @@ function useComponentState() {
4768
4765
  return React14.useContext(Context);
4769
4766
  }
4770
4767
 
4771
- // src/components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBody.tsx
4768
+ // src/components/InfiniteTable/components/InfiniteTableFooter/InfiniteTableFooter.tsx
4772
4769
  import * as React15 from "react";
4773
4770
 
4774
4771
  // src/components/InfiniteTable/hooks/useInternalProps.ts
@@ -4795,49 +4792,25 @@ var userSelect = { none: "utilities_userSelect_none__16lm1iw17" };
4795
4792
  var visibility = { visible: "utilities_visibility_visible__16lm1iw20", hidden: "utilities_visibility_hidden__16lm1iw21" };
4796
4793
  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" };
4797
4794
 
4798
- // src/components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBody.tsx
4799
- var InfiniteTableBody = React15.forwardRef(function InfiniteTableBody2(props, ref) {
4795
+ // src/components/InfiniteTable/components/InfiniteTableFooter/InfiniteTableFooter.tsx
4796
+ function InfiniteTableFooter(props) {
4800
4797
  const { rootClassName: rootClassName12 } = useInternalProps();
4801
4798
  return /* @__PURE__ */ React15.createElement(
4802
4799
  "div",
4803
- __spreadProps(__spreadValues({
4804
- ref
4805
- }, props), {
4800
+ __spreadProps(__spreadValues({}, props), {
4806
4801
  className: join(
4807
- `${rootClassName12}Body`,
4802
+ `${rootClassName12}Footer`,
4808
4803
  position.relative,
4809
- flex["1"],
4810
- transformTranslateZero,
4804
+ display.flex,
4805
+ flexFlow.row,
4811
4806
  props.className
4812
4807
  )
4813
4808
  })
4814
4809
  );
4815
- });
4816
-
4817
- // src/components/InfiniteTable/components/InfiniteTableFooter/InfiniteTableFooter.tsx
4818
- import * as React16 from "react";
4819
- var InfiniteTableFooter = React16.forwardRef(
4820
- function InfiniteTableFooter2(props, ref) {
4821
- const { rootClassName: rootClassName12 } = useInternalProps();
4822
- return /* @__PURE__ */ React16.createElement(
4823
- "div",
4824
- __spreadProps(__spreadValues({
4825
- ref
4826
- }, props), {
4827
- className: join(
4828
- `${rootClassName12}Footer`,
4829
- position.relative,
4830
- display.flex,
4831
- flexFlow.row,
4832
- props.className
4833
- )
4834
- })
4835
- );
4836
- }
4837
- );
4810
+ }
4838
4811
 
4839
4812
  // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
4840
- import * as React43 from "react";
4813
+ import * as React42 from "react";
4841
4814
  import { useCallback as useCallback14, useContext as useContext7, useEffect as useEffect15, useRef as useRef16 } from "react";
4842
4815
  import { createPortal } from "react-dom";
4843
4816
 
@@ -4851,7 +4824,7 @@ function keyMirror(obj) {
4851
4824
  }
4852
4825
 
4853
4826
  // src/components/InfiniteTable/components/icons/Icon.tsx
4854
- import * as React17 from "react";
4827
+ import * as React16 from "react";
4855
4828
  var Icon = (props) => {
4856
4829
  var _a;
4857
4830
  const size = (_a = props.size) != null ? _a : `var(--infinite-icon-size)`;
@@ -4863,69 +4836,69 @@ var Icon = (props) => {
4863
4836
  }, props.style);
4864
4837
  return (
4865
4838
  //@ts-ignore
4866
- /* @__PURE__ */ React17.createElement("svg", __spreadProps(__spreadValues({ viewBox: "0 0 24 24" }, props), { style: style2 }), props.children)
4839
+ /* @__PURE__ */ React16.createElement("svg", __spreadProps(__spreadValues({ viewBox: "0 0 24 24" }, props), { style: style2 }), props.children)
4867
4840
  );
4868
4841
  };
4869
4842
 
4870
4843
  // src/components/InfiniteTable/components/icons/IncludesOperatorIcon.tsx
4871
- import * as React18 from "react";
4844
+ import * as React17 from "react";
4872
4845
  var IncludesOperatorIcon = (props) => {
4873
- return /* @__PURE__ */ React18.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React18.createElement("path", { d: "M5,4V7H10.5V19H13.5V7H19V4H5Z" }));
4846
+ return /* @__PURE__ */ React17.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React17.createElement("path", { d: "M5,4V7H10.5V19H13.5V7H19V4H5Z" }));
4874
4847
  };
4875
4848
 
4876
4849
  // src/components/InfiniteTable/components/icons/EndsWithOperatorIcon.tsx
4877
- import * as React19 from "react";
4850
+ import * as React18 from "react";
4878
4851
  var EndsWithOperatorIcon = (props) => {
4879
- 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" }));
4852
+ 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" }));
4880
4853
  };
4881
4854
 
4882
4855
  // src/components/InfiniteTable/components/icons/EqualOperatorIcon.tsx
4883
- import * as React20 from "react";
4856
+ import * as React19 from "react";
4884
4857
  var EqualOperatorIcon = (props) => {
4885
- return /* @__PURE__ */ React20.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React20.createElement("path", { d: "M19,10H5V8H19V10M19,16H5V14H19V16Z" }));
4858
+ return /* @__PURE__ */ React19.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React19.createElement("path", { d: "M19,10H5V8H19V10M19,16H5V14H19V16Z" }));
4886
4859
  };
4887
4860
 
4888
4861
  // src/components/InfiniteTable/components/icons/GTEOperatorIcon.tsx
4889
- import * as React21 from "react";
4862
+ import * as React20 from "react";
4890
4863
  var GTEOperatorIcon = (props) => {
4891
- 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" }));
4864
+ 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" }));
4892
4865
  };
4893
4866
 
4894
4867
  // src/components/InfiniteTable/components/icons/GTOperatorIcon.tsx
4895
- import * as React22 from "react";
4868
+ import * as React21 from "react";
4896
4869
  var GTOperatorIcon = (props) => {
4897
- 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" }));
4870
+ 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" }));
4898
4871
  };
4899
4872
 
4900
4873
  // src/components/InfiniteTable/components/icons/LTEOperatorIcon.tsx
4901
- import * as React23 from "react";
4874
+ import * as React22 from "react";
4902
4875
  var LTEOperatorIcon = (props) => {
4903
- 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" }));
4876
+ 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" }));
4904
4877
  };
4905
4878
 
4906
4879
  // src/components/InfiniteTable/components/icons/LTOperatorIcon.tsx
4907
- import * as React24 from "react";
4880
+ import * as React23 from "react";
4908
4881
  var LTOperatorIcon = (props) => {
4909
- 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" }));
4882
+ 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" }));
4910
4883
  };
4911
4884
 
4912
4885
  // src/components/InfiniteTable/components/icons/NotEqualOperatorIcon.tsx
4913
- import * as React25 from "react";
4886
+ import * as React24 from "react";
4914
4887
  var NotEqualOperatorIcon = (props) => {
4915
- return /* @__PURE__ */ React25.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React25.createElement("path", { d: "M21,10H9V8H21V10M21,16H9V14H21V16M4,5H6V16H4V5M6,18V20H4V18H6Z" }));
4888
+ return /* @__PURE__ */ React24.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React24.createElement("path", { d: "M21,10H9V8H21V10M21,16H9V14H21V16M4,5H6V16H4V5M6,18V20H4V18H6Z" }));
4916
4889
  };
4917
4890
 
4918
4891
  // src/components/InfiniteTable/components/icons/StartsWithOperatorIcon.tsx
4919
- import * as React26 from "react";
4892
+ import * as React25 from "react";
4920
4893
  var StartsWithOperatorIcon = (props) => {
4921
- 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" }));
4894
+ 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" }));
4922
4895
  };
4923
4896
 
4924
4897
  // src/components/InfiniteTable/components/FilterEditors.tsx
4925
- import * as React30 from "react";
4898
+ import * as React29 from "react";
4926
4899
 
4927
4900
  // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableColumnHeaderFilter.tsx
4928
- import * as React29 from "react";
4901
+ import * as React28 from "react";
4929
4902
  import { useEffect as useEffect11, useState as useState6 } from "react";
4930
4903
 
4931
4904
  // src/components/InfiniteTable/hooks/useInfiniteTable.ts
@@ -4958,7 +4931,7 @@ var useInfiniteTableState = () => {
4958
4931
  };
4959
4932
 
4960
4933
  // src/components/InfiniteTable/components/icons/FilterIcon.tsx
4961
- import * as React27 from "react";
4934
+ import * as React26 from "react";
4962
4935
  import { useEffect as useEffect10, useLayoutEffect as useLayoutEffect8, useState as useState5 } from "react";
4963
4936
 
4964
4937
  // ../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js
@@ -5132,7 +5105,7 @@ function FilterIcon(props) {
5132
5105
  return null;
5133
5106
  }
5134
5107
  const indexStyle = {};
5135
- return /* @__PURE__ */ React27.createElement(
5108
+ return /* @__PURE__ */ React26.createElement(
5136
5109
  "div",
5137
5110
  {
5138
5111
  "data-name": "filter-icon",
@@ -5144,7 +5117,7 @@ function FilterIcon(props) {
5144
5117
  `${InfiniteTableIconClassName}-sort`
5145
5118
  )
5146
5119
  },
5147
- showIndex ? /* @__PURE__ */ React27.createElement(
5120
+ showIndex ? /* @__PURE__ */ React26.createElement(
5148
5121
  "div",
5149
5122
  {
5150
5123
  "data-name": "index",
@@ -5153,9 +5126,9 @@ function FilterIcon(props) {
5153
5126
  },
5154
5127
  index
5155
5128
  ) : null,
5156
- /* @__PURE__ */ React27.createElement("div", { style: __spreadValues({ width: sizes[0] }, lineStyle) }),
5157
- /* @__PURE__ */ React27.createElement("div", { style: __spreadValues({ width: sizes[1] }, lineStyle) }),
5158
- /* @__PURE__ */ React27.createElement("div", { style: __spreadValues({ width: sizes[2] }, lineStyle) })
5129
+ /* @__PURE__ */ React26.createElement("div", { style: __spreadValues({ width: sizes[0] }, lineStyle) }),
5130
+ /* @__PURE__ */ React26.createElement("div", { style: __spreadValues({ width: sizes[1] }, lineStyle) }),
5131
+ /* @__PURE__ */ React26.createElement("div", { style: __spreadValues({ width: sizes[2] }, lineStyle) })
5159
5132
  );
5160
5133
  }
5161
5134
 
@@ -5680,11 +5653,11 @@ var getComputedColumns = ({
5680
5653
  {}
5681
5654
  );
5682
5655
  const normalizedColumnOrder = adjustColumnOrderForPinning(
5683
- columnOrder === true ? [...columns.keys()] : columnOrder,
5656
+ columnOrder === true ? Object.keys(columns) : columnOrder,
5684
5657
  columnPinning
5685
5658
  );
5686
5659
  const visibleColumnOrder = normalizedColumnOrder.filter((colId) => {
5687
- const col = columns.get(colId);
5660
+ const col = columns[colId];
5688
5661
  if (!col) {
5689
5662
  logError(
5690
5663
  `Column with id "${colId}" specified in columnOrder array cannot be found in the columns map.`
@@ -5701,7 +5674,7 @@ var getComputedColumns = ({
5701
5674
  const columnIdsToVisibleIndex = /* @__PURE__ */ new Map();
5702
5675
  const visibleColumnsArray = visibleColumnOrder.map(
5703
5676
  (columnId, index) => {
5704
- const col = columns.get(columnId);
5677
+ const col = columns[columnId];
5705
5678
  columnIdsToVisibleIndex.set(columnId, index);
5706
5679
  return col;
5707
5680
  }
@@ -5722,7 +5695,7 @@ var getComputedColumns = ({
5722
5695
  );
5723
5696
  function getColSize(colId) {
5724
5697
  var _a, _b, _c, _d, _e, _f;
5725
- const column = columns.get(colId);
5698
+ const column = columns[colId];
5726
5699
  const colType = getColumnComputedType(column, columnTypes);
5727
5700
  const colTypeSizing = {
5728
5701
  minWidth: colType == null ? void 0 : colType.minWidth,
@@ -5813,7 +5786,8 @@ var getComputedColumns = ({
5813
5786
  orderedColumns.set(id, c);
5814
5787
  });
5815
5788
  const columnIdsInitialColumnOrder = [];
5816
- columns.forEach((c, key) => {
5789
+ Object.keys(columns).forEach((key) => {
5790
+ const c = columns[key];
5817
5791
  columnIdsInitialColumnOrder.push(key);
5818
5792
  if (!orderedColumns.has(key)) {
5819
5793
  orderedColumns.set(key, c);
@@ -6199,10 +6173,10 @@ function getColumnLabel(colIdOrCol, context) {
6199
6173
  }
6200
6174
 
6201
6175
  // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableColumnHeaderFilterContext.ts
6202
- import React28 from "react";
6176
+ import React27 from "react";
6203
6177
  var InfiniteTableColumnHeaderFilterClassName = `${rootClassName2}HeaderCell__filter`;
6204
6178
  var InfiniteTableColumnHeaderFilterOperatorClassName = `${rootClassName2}HeaderCell__filterOperator`;
6205
- var InfiniteTableColumnHeaderFilterContext = React28.createContext(null);
6179
+ var InfiniteTableColumnHeaderFilterContext = React27.createContext(null);
6206
6180
 
6207
6181
  // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableColumnHeaderFilter.tsx
6208
6182
  var InfiniteTableColumnHeaderFilterInputClassName = `${InfiniteTableColumnHeaderFilterClassName}__input`;
@@ -6213,14 +6187,14 @@ function InfiniteTableColumnHeaderFilter(props) {
6213
6187
  const FilterEditor = props.filterEditor;
6214
6188
  const FilterOperatorSwitch = props.filterOperatorSwitch;
6215
6189
  const [focused, setFocused] = useState6(false);
6216
- const onFocus = React29.useCallback(() => {
6190
+ const onFocus = React28.useCallback(() => {
6217
6191
  setFocused(true);
6218
6192
  }, []);
6219
- const onBlur = React29.useCallback(() => {
6193
+ const onBlur = React28.useCallback(() => {
6220
6194
  setFocused(false);
6221
6195
  }, []);
6222
6196
  const active = filterOperatorMenuVisibleForColumnId === column.id || focused;
6223
- return /* @__PURE__ */ React29.createElement(
6197
+ return /* @__PURE__ */ React28.createElement(
6224
6198
  "div",
6225
6199
  {
6226
6200
  onPointerUp: stopPropagation,
@@ -6234,14 +6208,14 @@ function InfiniteTableColumnHeaderFilter(props) {
6234
6208
  )}`,
6235
6209
  style: { height: props.columnHeaderHeight }
6236
6210
  },
6237
- /* @__PURE__ */ React29.createElement(InfiniteTableColumnHeaderFilterContext.Provider, { value: props }, /* @__PURE__ */ React29.createElement(FilterOperatorSwitch, null), /* @__PURE__ */ React29.createElement(FilterEditor, null))
6211
+ /* @__PURE__ */ React28.createElement(InfiniteTableColumnHeaderFilterContext.Provider, { value: props }, /* @__PURE__ */ React28.createElement(FilterOperatorSwitch, null), /* @__PURE__ */ React28.createElement(FilterEditor, null))
6238
6212
  );
6239
6213
  }
6240
6214
  function InfiniteTableFilterOperatorSwitch() {
6241
6215
  var _a, _b;
6242
6216
  const { columnApi, disabled, operator } = useInfiniteColumnFilterEditor();
6243
6217
  const Icon2 = (_b = (_a = operator == null ? void 0 : operator.components) == null ? void 0 : _a.Icon) != null ? _b : FilterIcon;
6244
- return /* @__PURE__ */ React29.createElement(
6218
+ return /* @__PURE__ */ React28.createElement(
6245
6219
  "div",
6246
6220
  {
6247
6221
  "data-name": "filter-operator",
@@ -6259,7 +6233,7 @@ function InfiniteTableFilterOperatorSwitch() {
6259
6233
  disabled ? `${InfiniteTableColumnHeaderFilterOperatorClassName}--disabled` : ""
6260
6234
  )
6261
6235
  },
6262
- /* @__PURE__ */ React29.createElement(
6236
+ /* @__PURE__ */ React28.createElement(
6263
6237
  Icon2,
6264
6238
  {
6265
6239
  size: 20,
@@ -6271,7 +6245,7 @@ function InfiniteTableFilterOperatorSwitch() {
6271
6245
  );
6272
6246
  }
6273
6247
  function InfiniteTableColumnHeaderFilterEmpty() {
6274
- return /* @__PURE__ */ React29.createElement(
6248
+ return /* @__PURE__ */ React28.createElement(
6275
6249
  "div",
6276
6250
  {
6277
6251
  onPointerUp: stopPropagation,
@@ -6288,7 +6262,7 @@ function useInfiniteColumnFilterEditor() {
6288
6262
  const context = useInfiniteTable();
6289
6263
  const { column, columnApi } = useInfiniteHeaderCell();
6290
6264
  const columnLabel = getColumnLabel(column, context);
6291
- const filterContextValue = React29.useContext(
6265
+ const filterContextValue = React28.useContext(
6292
6266
  InfiniteTableColumnHeaderFilterContext
6293
6267
  );
6294
6268
  const { columnFilterType, filterTypes, columnFilterValue } = filterContextValue;
@@ -6296,17 +6270,17 @@ function useInfiniteColumnFilterEditor() {
6296
6270
  const [theValue, setTheValue] = useState6(
6297
6271
  (_a = columnFilterValue == null ? void 0 : columnFilterValue.filter.value) != null ? _a : ""
6298
6272
  );
6299
- const onInputChange = React29.useCallback(
6273
+ const onInputChange = React28.useCallback(
6300
6274
  (filterValue) => {
6301
6275
  setTheValue(filterValue);
6302
6276
  filterContextValue.onChange(filterValue);
6303
6277
  },
6304
6278
  [filterContextValue.onChange]
6305
6279
  );
6306
- const clearValue = React29.useCallback(() => {
6280
+ const clearValue = React28.useCallback(() => {
6307
6281
  context.api.clearColumnFilter(column.id);
6308
6282
  }, [column.id]);
6309
- const removeColumnFilter = React29.useCallback(() => {
6283
+ const removeColumnFilter = React28.useCallback(() => {
6310
6284
  context.api.removeColumnFilter(column.id);
6311
6285
  }, [column.id]);
6312
6286
  useEffect11(() => {
@@ -6349,7 +6323,7 @@ function useInfiniteColumnFilterEditor() {
6349
6323
  // src/components/InfiniteTable/components/FilterEditors.tsx
6350
6324
  function StringFilterEditor() {
6351
6325
  const { ariaLabel, value, setValue, className, disabled } = useInfiniteColumnFilterEditor();
6352
- return /* @__PURE__ */ React30.createElement(
6326
+ return /* @__PURE__ */ React29.createElement(
6353
6327
  "input",
6354
6328
  {
6355
6329
  "data-xxx": true,
@@ -6366,7 +6340,7 @@ function StringFilterEditor() {
6366
6340
  }
6367
6341
  function NumberFilterEditor() {
6368
6342
  const { ariaLabel, value, setValue, className, disabled } = useInfiniteColumnFilterEditor();
6369
- return /* @__PURE__ */ React30.createElement(
6343
+ return /* @__PURE__ */ React29.createElement(
6370
6344
  "input",
6371
6345
  {
6372
6346
  "aria-label": ariaLabel,
@@ -6607,6 +6581,17 @@ var rafFn = (fn) => {
6607
6581
  };
6608
6582
 
6609
6583
  // src/components/InfiniteTable/hooks/useDOMProps.ts
6584
+ var publicRuntimeVars = {
6585
+ bodyWidth: { name: stripVar(ThemeVars.runtime.bodyWidth), value: "" },
6586
+ totalVisibleColumnsWidth: {
6587
+ name: stripVar(ThemeVars.runtime.totalVisibleColumnsWidth),
6588
+ value: ""
6589
+ },
6590
+ visibleColumnsCount: {
6591
+ name: stripVar(ThemeVars.runtime.visibleColumnsCount),
6592
+ value: ""
6593
+ }
6594
+ };
6610
6595
  var scrollbarWidthHorizontal = stripVar(
6611
6596
  InternalVars.scrollbarWidthHorizontal
6612
6597
  );
@@ -6662,6 +6647,7 @@ function useDOMProps(initialDOMProps) {
6662
6647
  computedPinnedStartColumns,
6663
6648
  computedPinnedEndColumns,
6664
6649
  computedVisibleColumns,
6650
+ computedUnpinnedColumnsWidth,
6665
6651
  scrollbars
6666
6652
  } = computed;
6667
6653
  const prevPinnedEndCols = [];
@@ -6687,6 +6673,9 @@ function useDOMProps(initialDOMProps) {
6687
6673
  },
6688
6674
  {}
6689
6675
  );
6676
+ cssVars[publicRuntimeVars.bodyWidth.name] = `calc(${InternalVars.bodyWidth} - ${InternalVars.scrollbarWidthVertical})`;
6677
+ cssVars[publicRuntimeVars.totalVisibleColumnsWidth.name] = `${computedPinnedStartColumnsWidth + computedPinnedEndColumnsWidth + computedUnpinnedColumnsWidth}px`;
6678
+ cssVars[publicRuntimeVars.visibleColumnsCount.name] = computedVisibleColumns.length;
6690
6679
  if (activeCellIndex != null) {
6691
6680
  cssVars[activeCellColWidth] = `var(${getCSSVarNameForColWidth(
6692
6681
  activeCellIndex[1]
@@ -7426,14 +7415,14 @@ var useColumnPointerEvents = ({
7426
7415
  };
7427
7416
 
7428
7417
  // src/components/InfiniteTable/utils/RenderHookComponentForInfinite.tsx
7429
- import * as React38 from "react";
7418
+ import * as React37 from "react";
7430
7419
 
7431
7420
  // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx
7432
- import * as React37 from "react";
7421
+ import * as React36 from "react";
7433
7422
  import { useCallback as useCallback12, useContext as useContext6, useMemo as useMemo4 } from "react";
7434
7423
 
7435
7424
  // src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
7436
- import * as React33 from "react";
7425
+ import * as React32 from "react";
7437
7426
 
7438
7427
  // src/components/DataSource/state/rowInfoStatus.ts
7439
7428
  var showLoadingIcon = (rowInfo) => {
@@ -7444,7 +7433,7 @@ var showLoadingIcon = (rowInfo) => {
7444
7433
  };
7445
7434
 
7446
7435
  // src/components/InfiniteTable/components/icons/ExpanderIcon.tsx
7447
- import * as React31 from "react";
7436
+ import * as React30 from "react";
7448
7437
  import { useState as useState8 } from "react";
7449
7438
 
7450
7439
  // src/components/InfiniteTable/components/icons/ExpanderIcon.css.ts
@@ -7465,12 +7454,12 @@ function ExpanderIcon(props) {
7465
7454
  setExpanded(!expanded);
7466
7455
  }
7467
7456
  };
7468
- React31.useEffect(() => {
7457
+ React30.useEffect(() => {
7469
7458
  if (isControlled("expanded", props)) {
7470
7459
  setExpanded(props.expanded);
7471
7460
  }
7472
7461
  }, [props.expanded]);
7473
- return /* @__PURE__ */ React31.createElement(
7462
+ return /* @__PURE__ */ React30.createElement(
7474
7463
  "svg",
7475
7464
  {
7476
7465
  "data-name": "expander-icon",
@@ -7493,19 +7482,19 @@ function ExpanderIcon(props) {
7493
7482
  `InfiniteIcon-expander--${direction === "end" ? "end" : "start"}`
7494
7483
  )
7495
7484
  },
7496
- /* @__PURE__ */ React31.createElement("path", { d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" })
7485
+ /* @__PURE__ */ React30.createElement("path", { d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" })
7497
7486
  );
7498
7487
  }
7499
7488
 
7500
7489
  // src/components/InfiniteTable/components/icons/LoadingIcon.tsx
7501
- import * as React32 from "react";
7490
+ import * as React31 from "react";
7502
7491
 
7503
7492
  // src/components/InfiniteTable/components/icons/LoadingIcon.css.ts
7504
7493
  var LoadingIconCls = "utilities_stroke_accentColor__16lm1iwb utilities_flex_none__16lm1iwn utilities_cursor_pointer__16lm1iwi";
7505
7494
 
7506
7495
  // src/components/InfiniteTable/components/icons/LoadingIcon.tsx
7507
7496
  var LoadingIcon = (props) => {
7508
- return /* @__PURE__ */ React32.createElement(
7497
+ return /* @__PURE__ */ React31.createElement(
7509
7498
  "svg",
7510
7499
  {
7511
7500
  xmlns: "http://www.w3.org/2000/svg",
@@ -7525,7 +7514,7 @@ var LoadingIcon = (props) => {
7525
7514
  "InfiniteIcon-loading"
7526
7515
  )
7527
7516
  },
7528
- /* @__PURE__ */ React32.createElement(
7517
+ /* @__PURE__ */ React31.createElement(
7529
7518
  "circle",
7530
7519
  {
7531
7520
  cx: "50",
@@ -7535,7 +7524,7 @@ var LoadingIcon = (props) => {
7535
7524
  r: "35",
7536
7525
  strokeDasharray: "164.93361431346415 56.97787143782138"
7537
7526
  },
7538
- /* @__PURE__ */ React32.createElement(
7527
+ /* @__PURE__ */ React31.createElement(
7539
7528
  "animateTransform",
7540
7529
  {
7541
7530
  attributeName: "transform",
@@ -7580,11 +7569,11 @@ function getGroupColumnRender({
7580
7569
  );
7581
7570
  if (groupRenderStrategy === "multi-column") {
7582
7571
  if (groupIndexForColumn + 1 !== groupRowInfo.groupNesting && groupRowInfo.isGroupRow) {
7583
- return selectionCheckBox ? /* @__PURE__ */ React33.createElement("div", { className }, selectionCheckBox) : null;
7572
+ return selectionCheckBox ? /* @__PURE__ */ React32.createElement("div", { className }, selectionCheckBox) : null;
7584
7573
  }
7585
7574
  } else if (groupRenderStrategy === "single-column" && !groupRowInfo.isGroupRow) {
7586
7575
  }
7587
- return /* @__PURE__ */ React33.createElement("div", { className }, groupIcon, selectionCheckBox, /* @__PURE__ */ React33.createElement("div", { className: cssEllipsisClassName }, valueToRender != null ? valueToRender : null));
7576
+ return /* @__PURE__ */ React32.createElement("div", { className }, groupIcon, selectionCheckBox, /* @__PURE__ */ React32.createElement("div", { className: cssEllipsisClassName }, valueToRender != null ? valueToRender : null));
7588
7577
  };
7589
7578
  }
7590
7579
  function getGroupColumnRenderGroupIcon({
@@ -7633,9 +7622,9 @@ function getGroupColumnRenderGroupIcon({
7633
7622
  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);
7634
7623
  const isLoading = showLoadingIcon(groupRowInfo);
7635
7624
  if (isLoading) {
7636
- icon = /* @__PURE__ */ React33.createElement(LoadingIcon, null);
7625
+ icon = /* @__PURE__ */ React32.createElement(LoadingIcon, null);
7637
7626
  } else if (showExpanderIcon) {
7638
- const defaultIcon = /* @__PURE__ */ React33.createElement(
7627
+ const defaultIcon = /* @__PURE__ */ React32.createElement(
7639
7628
  ExpanderIcon,
7640
7629
  {
7641
7630
  expanded: !collapsed,
@@ -7649,7 +7638,7 @@ function getGroupColumnRenderGroupIcon({
7649
7638
  }
7650
7639
  if (initialRenderGroupIcon) {
7651
7640
  renderOptions.renderBag.groupIcon = icon;
7652
- icon = /* @__PURE__ */ React33.createElement(
7641
+ icon = /* @__PURE__ */ React32.createElement(
7653
7642
  RenderCellHookComponent,
7654
7643
  {
7655
7644
  render: initialRenderGroupIcon,
@@ -7729,7 +7718,7 @@ var ColumnCellSelectionIndicatorRecipe = createRuntimeFn({ defaultClassName: "ce
7729
7718
  var SelectionCheckboxCls = "cell_SelectionCheckboxCls__1eexc2a7";
7730
7719
 
7731
7720
  // src/components/InfiniteTable/components/CheckBox.tsx
7732
- import * as React34 from "react";
7721
+ import * as React33 from "react";
7733
7722
  import { useEffect as useEffect13, useRef as useRef12 } from "react";
7734
7723
 
7735
7724
  // src/components/InfiniteTable/components/CheckBox.css.ts
@@ -7768,7 +7757,7 @@ function InfiniteCheckBoxComponent() {
7768
7757
  useEffect13(() => {
7769
7758
  inputRef.current.indeterminate = checked == null;
7770
7759
  }, [checked]);
7771
- return /* @__PURE__ */ React34.createElement(
7760
+ return /* @__PURE__ */ React33.createElement(
7772
7761
  "input",
7773
7762
  __spreadProps(__spreadValues({}, domProps), {
7774
7763
  className: join("InfiniteCheckBox", CheckBoxCls, domProps == null ? void 0 : domProps.className),
@@ -7786,7 +7775,7 @@ function InfiniteCheckBoxComponent() {
7786
7775
  );
7787
7776
  }
7788
7777
  function InfiniteCheckBox(props) {
7789
- return /* @__PURE__ */ React34.createElement(InfiniteCheckBoxRoot, __spreadValues({}, props), /* @__PURE__ */ React34.createElement(InfiniteCheckBoxComponent, null));
7778
+ return /* @__PURE__ */ React33.createElement(InfiniteCheckBoxRoot, __spreadValues({}, props), /* @__PURE__ */ React33.createElement(InfiniteCheckBoxComponent, null));
7790
7779
  }
7791
7780
 
7792
7781
  // src/components/InfiniteTable/components/InfiniteTableRow/columnRendering.tsx
@@ -8097,7 +8086,7 @@ function getFormattedValueContextForCell(options) {
8097
8086
  }
8098
8087
 
8099
8088
  // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
8100
- import * as React35 from "react";
8089
+ import * as React34 from "react";
8101
8090
  var { rootClassName: rootClassName5 } = internalProps;
8102
8091
  var InfiniteTableCellClassName = `${rootClassName5}Cell`;
8103
8092
  var InfiniteTableCellContentClassName = `${rootClassName5}Cell_content`;
@@ -8156,7 +8145,7 @@ function InfiniteTableCellFn(props) {
8156
8145
  // ? `${InfiniteTableCellClassName}--shifting ${CellClsVariants.shifting}`
8157
8146
  // : '',
8158
8147
  ),
8159
- children: /* @__PURE__ */ React35.createElement(React35.Fragment, null, beforeChildren, /* @__PURE__ */ React35.createElement(
8148
+ children: /* @__PURE__ */ React34.createElement(React34.Fragment, null, beforeChildren, /* @__PURE__ */ React34.createElement(
8160
8149
  "div",
8161
8150
  {
8162
8151
  className: join(
@@ -8174,21 +8163,21 @@ function InfiniteTableCellFn(props) {
8174
8163
  }
8175
8164
  const RenderComponent = cellType === "body" ? (_b = column.components) == null ? void 0 : _b.ColumnCell : (_c = column.components) == null ? void 0 : _c.HeaderCell;
8176
8165
  if (RenderComponent) {
8177
- return /* @__PURE__ */ React35.createElement(RenderComponent, __spreadValues({}, finalDOMProps));
8166
+ return /* @__PURE__ */ React34.createElement(RenderComponent, __spreadValues({}, finalDOMProps));
8178
8167
  }
8179
- return /* @__PURE__ */ React35.createElement("div", __spreadProps(__spreadValues({}, finalDOMProps), { ref: domRef }));
8168
+ return /* @__PURE__ */ React34.createElement("div", __spreadProps(__spreadValues({}, finalDOMProps), { ref: domRef }));
8180
8169
  }
8181
- var InfiniteTableCell = React35.memo(
8170
+ var InfiniteTableCell = React34.memo(
8182
8171
  InfiniteTableCellFn
8183
8172
  );
8184
8173
 
8185
8174
  // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnEditor.tsx
8186
- import * as React36 from "react";
8175
+ import * as React35 from "react";
8187
8176
  import { useCallback as useCallback10, useRef as useRef13 } from "react";
8188
8177
  function InfiniteTableColumnEditor() {
8189
8178
  const { initialValue, setValue, confirmEdit, cancelEdit, readOnly } = useInfiniteColumnEditor();
8190
8179
  const domRef = useRef13();
8191
- const refCallback = React36.useCallback((node) => {
8180
+ const refCallback = React35.useCallback((node) => {
8192
8181
  domRef.current = node;
8193
8182
  if (node) {
8194
8183
  node.focus();
@@ -8204,7 +8193,7 @@ function InfiniteTableColumnEditor() {
8204
8193
  event.stopPropagation();
8205
8194
  }
8206
8195
  }, []);
8207
- return /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(
8196
+ return /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement(
8208
8197
  "input",
8209
8198
  {
8210
8199
  readOnly,
@@ -8224,11 +8213,11 @@ function InfiniteTableColumnEditor() {
8224
8213
  // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx
8225
8214
  var { rootClassName: rootClassName6 } = internalProps;
8226
8215
  var columnZIndexAtIndex4 = stripVar(InternalVars.columnZIndexAtIndex);
8227
- var InfiniteTableColumnCellContext = React37.createContext(null);
8216
+ var InfiniteTableColumnCellContext = React36.createContext(null);
8228
8217
  var InfiniteTableColumnCellClassName = `${rootClassName6}ColumnCell`;
8229
8218
  var defaultRenderRowDetailIcon = (params) => {
8230
8219
  const { toggleCurrentRowDetails, rowDetailState } = params;
8231
- return /* @__PURE__ */ React37.createElement(
8220
+ return /* @__PURE__ */ React36.createElement(
8232
8221
  ExpanderIcon,
8233
8222
  {
8234
8223
  style: {
@@ -8249,7 +8238,7 @@ var defaultRenderSelectionCheckBox = (params) => {
8249
8238
  } = params;
8250
8239
  if (rowInfo.isGroupRow && !column.groupByForColumn) {
8251
8240
  }
8252
- return /* @__PURE__ */ React37.createElement(
8241
+ return /* @__PURE__ */ React36.createElement(
8253
8242
  InfiniteCheckBox,
8254
8243
  {
8255
8244
  domProps: {
@@ -8301,7 +8290,7 @@ function InfiniteTableColumnCellFn(props) {
8301
8290
  showZebraRows
8302
8291
  } = props;
8303
8292
  if (!column) {
8304
- return /* @__PURE__ */ React37.createElement("div", { ref: domRef }, "no column");
8293
+ return /* @__PURE__ */ React36.createElement("div", { ref: domRef }, "no column");
8305
8294
  }
8306
8295
  const { rowSelected } = rowInfo;
8307
8296
  const {
@@ -8348,7 +8337,7 @@ function InfiniteTableColumnCellFn(props) {
8348
8337
  } = colRenderingParams;
8349
8338
  const { align: align2, verticalAlign } = renderParams;
8350
8339
  const renderParam = renderParams;
8351
- const renderParamRef = React37.useRef(renderParam);
8340
+ const renderParamRef = React36.useRef(renderParam);
8352
8341
  const onClick = useCallback12(
8353
8342
  (event) => {
8354
8343
  const colIndex = column.computedVisibleIndex;
@@ -8402,7 +8391,7 @@ function InfiniteTableColumnCellFn(props) {
8402
8391
  [rowInfo]
8403
8392
  );
8404
8393
  const EditorComponent = (_b = (_a = column.components) == null ? void 0 : _a.Editor) != null ? _b : InfiniteTableColumnEditor;
8405
- const editor = inEdit ? /* @__PURE__ */ React37.createElement(CellEditorContextComponent, { contextValue: renderParam }, /* @__PURE__ */ React37.createElement(EditorComponent, null)) : null;
8394
+ const editor = inEdit ? /* @__PURE__ */ React36.createElement(CellEditorContextComponent, { contextValue: renderParam }, /* @__PURE__ */ React36.createElement(EditorComponent, null)) : null;
8406
8395
  const renderChildren = useCallback12(
8407
8396
  once(() => {
8408
8397
  if (hidden) {
@@ -8412,7 +8401,7 @@ function InfiniteTableColumnCellFn(props) {
8412
8401
  return null;
8413
8402
  }
8414
8403
  if (renderFunctions.renderGroupIcon) {
8415
- renderParam.renderBag.groupIcon = /* @__PURE__ */ React37.createElement(
8404
+ renderParam.renderBag.groupIcon = /* @__PURE__ */ React36.createElement(
8416
8405
  RenderCellHookComponent,
8417
8406
  {
8418
8407
  render: renderFunctions.renderGroupIcon,
@@ -8423,7 +8412,7 @@ function InfiniteTableColumnCellFn(props) {
8423
8412
  );
8424
8413
  }
8425
8414
  if (renderFunctions.renderSelectionCheckBox && selectionMode == "multi-row") {
8426
- renderParam.renderBag.selectionCheckBox = /* @__PURE__ */ React37.createElement(
8415
+ renderParam.renderBag.selectionCheckBox = /* @__PURE__ */ React36.createElement(
8427
8416
  RenderCellHookComponent,
8428
8417
  {
8429
8418
  render: defaultRenderSelectionCheckBox,
@@ -8431,7 +8420,7 @@ function InfiniteTableColumnCellFn(props) {
8431
8420
  }
8432
8421
  );
8433
8422
  if (renderFunctions.renderSelectionCheckBox !== true) {
8434
- renderParam.renderBag.selectionCheckBox = /* @__PURE__ */ React37.createElement(
8423
+ renderParam.renderBag.selectionCheckBox = /* @__PURE__ */ React36.createElement(
8435
8424
  RenderCellHookComponent,
8436
8425
  {
8437
8426
  render: renderFunctions.renderSelectionCheckBox,
@@ -8443,7 +8432,7 @@ function InfiniteTableColumnCellFn(props) {
8443
8432
  }
8444
8433
  }
8445
8434
  if (renderFunctions.renderRowDetailIcon) {
8446
- renderParam.renderBag.rowDetailsIcon = /* @__PURE__ */ React37.createElement(
8435
+ renderParam.renderBag.rowDetailsIcon = /* @__PURE__ */ React36.createElement(
8447
8436
  RenderCellHookComponent,
8448
8437
  {
8449
8438
  render: defaultRenderRowDetailIcon,
@@ -8453,7 +8442,7 @@ function InfiniteTableColumnCellFn(props) {
8453
8442
  }
8454
8443
  );
8455
8444
  if (typeof renderFunctions.renderRowDetailIcon === "function") {
8456
- renderParam.renderBag.rowDetailsIcon = /* @__PURE__ */ React37.createElement(
8445
+ renderParam.renderBag.rowDetailsIcon = /* @__PURE__ */ React36.createElement(
8457
8446
  RenderCellHookComponent,
8458
8447
  {
8459
8448
  render: renderFunctions.renderRowDetailIcon,
@@ -8465,7 +8454,7 @@ function InfiniteTableColumnCellFn(props) {
8465
8454
  }
8466
8455
  }
8467
8456
  if (renderFunctions.renderValue) {
8468
- renderParam.renderBag.value = /* @__PURE__ */ React37.createElement(
8457
+ renderParam.renderBag.value = /* @__PURE__ */ React36.createElement(
8469
8458
  RenderCellHookComponent,
8470
8459
  {
8471
8460
  render: renderFunctions.renderValue,
@@ -8476,7 +8465,7 @@ function InfiniteTableColumnCellFn(props) {
8476
8465
  );
8477
8466
  }
8478
8467
  if (rowInfo.isGroupRow && renderFunctions.renderGroupValue) {
8479
- renderParam.renderBag.value = /* @__PURE__ */ React37.createElement(
8468
+ renderParam.renderBag.value = /* @__PURE__ */ React36.createElement(
8480
8469
  RenderCellHookComponent,
8481
8470
  {
8482
8471
  render: renderFunctions.renderGroupValue,
@@ -8487,7 +8476,7 @@ function InfiniteTableColumnCellFn(props) {
8487
8476
  );
8488
8477
  }
8489
8478
  if (!rowInfo.isGroupRow && renderFunctions.renderLeafValue) {
8490
- renderParam.renderBag.value = /* @__PURE__ */ React37.createElement(
8479
+ renderParam.renderBag.value = /* @__PURE__ */ React36.createElement(
8491
8480
  RenderCellHookComponent,
8492
8481
  {
8493
8482
  render: renderFunctions.renderLeafValue,
@@ -8502,9 +8491,9 @@ function InfiniteTableColumnCellFn(props) {
8502
8491
  if (valueToRender instanceof Date) {
8503
8492
  valueToRender = valueToRender.toLocaleDateString();
8504
8493
  }
8505
- 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);
8494
+ 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);
8506
8495
  if (column.render) {
8507
- return /* @__PURE__ */ React37.createElement(
8496
+ return /* @__PURE__ */ React36.createElement(
8508
8497
  RenderCellHookComponent,
8509
8498
  {
8510
8499
  render: column.render,
@@ -8666,16 +8655,16 @@ function InfiniteTableColumnCellFn(props) {
8666
8655
  return (
8667
8656
  // this context is here for supporting useInfiniteColumnCell to be used
8668
8657
  // with a custom column component, specified via column.components.ColumnCell
8669
- /* @__PURE__ */ React37.createElement(
8658
+ /* @__PURE__ */ React36.createElement(
8670
8659
  ContextProvider,
8671
8660
  {
8672
8661
  value: renderParamRef.current
8673
8662
  },
8674
- /* @__PURE__ */ React37.createElement(InfiniteTableCell, __spreadValues({}, cellProps))
8663
+ /* @__PURE__ */ React36.createElement(InfiniteTableCell, __spreadValues({}, cellProps))
8675
8664
  )
8676
8665
  );
8677
8666
  }
8678
- var InfiniteTableColumnCell = React37.memo(
8667
+ var InfiniteTableColumnCell = React36.memo(
8679
8668
  InfiniteTableColumnCellFn
8680
8669
  );
8681
8670
  function useInfiniteColumnCell() {
@@ -8690,14 +8679,14 @@ function useInfiniteColumnEditor() {
8690
8679
  state: { editingValueRef, editingCell }
8691
8680
  } = useInfiniteTable();
8692
8681
  const { column, rowInfo } = useInfiniteColumnCell();
8693
- const [initialValue] = React37.useState(() => editingCell == null ? void 0 : editingCell.value);
8694
- const [currentValue, setCurrentValue] = React37.useState(initialValue);
8682
+ const [initialValue] = React36.useState(() => editingCell == null ? void 0 : editingCell.value);
8683
+ const [currentValue, setCurrentValue] = React36.useState(initialValue);
8695
8684
  const readOnly = editingCell ? !editingCell.active && !!editingCell.waiting : false;
8696
- const setValue = React37.useCallback((value) => {
8685
+ const setValue = React36.useCallback((value) => {
8697
8686
  editingValueRef.current = value;
8698
8687
  setCurrentValue(value);
8699
8688
  }, []);
8700
- React37.useLayoutEffect(() => {
8689
+ React36.useLayoutEffect(() => {
8701
8690
  editingValueRef.current = initialValue;
8702
8691
  }, []);
8703
8692
  const confirmEdit = api.confirmEdit;
@@ -8726,7 +8715,7 @@ function RenderHookComponent(props) {
8726
8715
  // src/components/InfiniteTable/utils/RenderHookComponentForInfinite.tsx
8727
8716
  function RenderCellHookComponent(props) {
8728
8717
  const ContextProvider = InfiniteTableColumnCellContext.Provider;
8729
- return /* @__PURE__ */ React38.createElement(ContextProvider, { value: props.renderParam }, /* @__PURE__ */ React38.createElement(
8718
+ return /* @__PURE__ */ React37.createElement(ContextProvider, { value: props.renderParam }, /* @__PURE__ */ React37.createElement(
8730
8719
  RenderHookComponent,
8731
8720
  {
8732
8721
  render: props.render,
@@ -8736,11 +8725,11 @@ function RenderCellHookComponent(props) {
8736
8725
  }
8737
8726
  function CellEditorContextComponent(props) {
8738
8727
  const ContextProvider = InfiniteTableColumnCellContext.Provider;
8739
- return /* @__PURE__ */ React38.createElement(ContextProvider, { value: props.contextValue }, props.children);
8728
+ return /* @__PURE__ */ React37.createElement(ContextProvider, { value: props.contextValue }, props.children);
8740
8729
  }
8741
8730
  function RenderHeaderCellHookComponent(props) {
8742
8731
  const ContextProvider = InfiniteTableHeaderCellContext.Provider;
8743
- return /* @__PURE__ */ React38.createElement(ContextProvider, { value: props.renderParam }, /* @__PURE__ */ React38.createElement(
8732
+ return /* @__PURE__ */ React37.createElement(ContextProvider, { value: props.renderParam }, /* @__PURE__ */ React37.createElement(
8744
8733
  RenderHookComponent,
8745
8734
  {
8746
8735
  render: props.render,
@@ -8750,7 +8739,7 @@ function RenderHeaderCellHookComponent(props) {
8750
8739
  }
8751
8740
 
8752
8741
  // src/components/InfiniteTable/components/icons/MenuIcon.tsx
8753
- import * as React39 from "react";
8742
+ import * as React38 from "react";
8754
8743
  var defaultLineStyle2 = {
8755
8744
  width: "100%",
8756
8745
  pointerEvents: "none"
@@ -8774,7 +8763,7 @@ function MenuIcon(props) {
8774
8763
  const lineStyle = __spreadValues(__spreadProps(__spreadValues({}, defaultLineStyle2), {
8775
8764
  borderTop: `${ThemeVars.components.HeaderCell.menuIconLineWidth} solid currentColor`
8776
8765
  }), props.lineStyle);
8777
- return /* @__PURE__ */ React39.createElement(
8766
+ return /* @__PURE__ */ React38.createElement(
8778
8767
  "div",
8779
8768
  __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, domProps), {
8780
8769
  style: style2
@@ -8790,12 +8779,12 @@ function MenuIcon(props) {
8790
8779
  `${InfiniteTableIconClassName}-menu`
8791
8780
  )
8792
8781
  }),
8793
- 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 }))
8782
+ 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 }))
8794
8783
  );
8795
8784
  }
8796
8785
 
8797
8786
  // src/components/InfiniteTable/components/icons/SortIcon.tsx
8798
- import * as React40 from "react";
8787
+ import * as React39 from "react";
8799
8788
  import { useEffect as useEffect14, useState as useState10 } from "react";
8800
8789
 
8801
8790
  // src/components/InfiniteTable/components/icons/SortIcon.css.ts
@@ -8854,7 +8843,7 @@ function SortIcon(props) {
8854
8843
  if (direction === -1) {
8855
8844
  indexStyle.top = "100%";
8856
8845
  }
8857
- return /* @__PURE__ */ React40.createElement(
8846
+ return /* @__PURE__ */ React39.createElement(
8858
8847
  "div",
8859
8848
  {
8860
8849
  "data-name": "sort-icon",
@@ -8866,7 +8855,7 @@ function SortIcon(props) {
8866
8855
  `${InfiniteTableIconClassName}-sort`
8867
8856
  )
8868
8857
  },
8869
- showIndex ? /* @__PURE__ */ React40.createElement(
8858
+ showIndex ? /* @__PURE__ */ React39.createElement(
8870
8859
  "div",
8871
8860
  {
8872
8861
  "data-name": "index",
@@ -8875,25 +8864,25 @@ function SortIcon(props) {
8875
8864
  },
8876
8865
  index
8877
8866
  ) : null,
8878
- /* @__PURE__ */ React40.createElement(
8867
+ /* @__PURE__ */ React39.createElement(
8879
8868
  "div",
8880
8869
  {
8881
8870
  style: __spreadValues({ width: sizes[0] }, lineStyle),
8882
8871
  onTransitionEnd
8883
8872
  }
8884
8873
  ),
8885
- /* @__PURE__ */ React40.createElement("div", { style: __spreadValues({ width: sizes[1] }, lineStyle) }),
8886
- /* @__PURE__ */ React40.createElement("div", { style: __spreadValues({ width: sizes[2] }, lineStyle) })
8874
+ /* @__PURE__ */ React39.createElement("div", { style: __spreadValues({ width: sizes[1] }, lineStyle) }),
8875
+ /* @__PURE__ */ React39.createElement("div", { style: __spreadValues({ width: sizes[2] }, lineStyle) })
8887
8876
  );
8888
8877
  }
8889
8878
 
8890
8879
  // src/components/InfiniteTable/components/InfiniteTableHeader/useColumnResizeHandle.tsx
8891
- import * as React42 from "react";
8880
+ import * as React41 from "react";
8892
8881
  import { useCallback as useCallback13 } from "react";
8893
8882
 
8894
8883
  // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/index.tsx
8895
8884
  import { useRef as useRef15, useState as useState11 } from "react";
8896
- import * as React41 from "react";
8885
+ import * as React40 from "react";
8897
8886
 
8898
8887
  // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/columnResizer.ts
8899
8888
  function getColumnResizer(colIndex, {
@@ -9068,7 +9057,7 @@ function ResizeHandleFn(props) {
9068
9057
  right: computedPinned === "start" ? void 0 : 0
9069
9058
  //ThemeVars.components.HeaderCell.resizeHandleWidth,
9070
9059
  } : computedPinned === "end" && computedFirstInCategory ? { right: void 0 } : void 0;
9071
- return /* @__PURE__ */ React41.createElement(
9060
+ return /* @__PURE__ */ React40.createElement(
9072
9061
  "div",
9073
9062
  {
9074
9063
  ref: domRef,
@@ -9081,7 +9070,7 @@ function ResizeHandleFn(props) {
9081
9070
  )}`,
9082
9071
  onPointerDown
9083
9072
  },
9084
- /* @__PURE__ */ React41.createElement(
9073
+ /* @__PURE__ */ React40.createElement(
9085
9074
  "div",
9086
9075
  {
9087
9076
  style: style2,
@@ -9095,7 +9084,7 @@ function ResizeHandleFn(props) {
9095
9084
  )
9096
9085
  );
9097
9086
  }
9098
- var ResizeHandle = React41.memo(ResizeHandleFn);
9087
+ var ResizeHandle = React40.memo(ResizeHandleFn);
9099
9088
 
9100
9089
  // src/components/InfiniteTable/components/InfiniteTableHeader/useColumnResizeHandle.tsx
9101
9090
  function useColumnResizeHandle(column) {
@@ -9159,7 +9148,7 @@ function useColumnResizeHandle(column) {
9159
9148
  },
9160
9149
  [computeResizeForDiff]
9161
9150
  );
9162
- const resizeHandle = column.computedResizable ? /* @__PURE__ */ React42.createElement(
9151
+ const resizeHandle = column.computedResizable ? /* @__PURE__ */ React41.createElement(
9163
9152
  ResizeHandle,
9164
9153
  {
9165
9154
  columns: computedVisibleColumns,
@@ -9178,7 +9167,7 @@ var InfiniteTableHeaderCellClassName = `${rootClassName2}HeaderCell`;
9178
9167
  var defaultRenderSelectionCheckBox2 = (params) => {
9179
9168
  const { allRowsSelected, someRowsSelected, api } = params;
9180
9169
  const selected = allRowsSelected ? true : someRowsSelected ? null : false;
9181
- return /* @__PURE__ */ React43.createElement(
9170
+ return /* @__PURE__ */ React42.createElement(
9182
9171
  InfiniteCheckBox,
9183
9172
  {
9184
9173
  domProps: {
@@ -9195,9 +9184,9 @@ var defaultRenderSelectionCheckBox2 = (params) => {
9195
9184
  }
9196
9185
  );
9197
9186
  };
9198
- var InfiniteTableHeaderCellContext = React43.createContext(null);
9187
+ var InfiniteTableHeaderCellContext = React42.createContext(null);
9199
9188
  var columnZIndexAtIndex5 = stripVar(InternalVars.columnZIndexAtIndex);
9200
- var spacer = /* @__PURE__ */ React43.createElement("div", { className: flex["1"] });
9189
+ var spacer = /* @__PURE__ */ React42.createElement("div", { className: flex["1"] });
9201
9190
  var InfiniteHeaderCellDataAttributes = keyMirror({
9202
9191
  "data-name": ``,
9203
9192
  "data-field": ``,
@@ -9234,7 +9223,7 @@ function InfiniteTableHeaderCell(props) {
9234
9223
  const dragging = columnReorderDragColumnId === column.id;
9235
9224
  const { onResize, height, width, headerOptions, columnsMap } = props;
9236
9225
  const sortInfo = column.computedSortInfo;
9237
- let header = column.header;
9226
+ const header = column.header;
9238
9227
  const ref = useCallback14(
9239
9228
  (node) => {
9240
9229
  var _a2;
@@ -9258,7 +9247,7 @@ function InfiniteTableHeaderCell(props) {
9258
9247
  getState
9259
9248
  });
9260
9249
  const computedSortable = columnApi.isSortable();
9261
- const sortIcon = computedSortable && (column.computedSorted || alwaysShow) ? /* @__PURE__ */ React43.createElement(
9250
+ const sortIcon = computedSortable && (column.computedSorted || alwaysShow) ? /* @__PURE__ */ React42.createElement(
9262
9251
  SortIcon,
9263
9252
  {
9264
9253
  index: column.computedMultiSort ? column.computedSortIndex + 1 : void 0,
@@ -9275,7 +9264,7 @@ function InfiniteTableHeaderCell(props) {
9275
9264
  }
9276
9265
  ) : null;
9277
9266
  const filtered = column.computedFilterable && column.computedFiltered;
9278
- const filterIcon = filtered ? /* @__PURE__ */ React43.createElement(FilterIcon, null) : null;
9267
+ const filterIcon = filtered ? /* @__PURE__ */ React42.createElement(FilterIcon, null) : null;
9279
9268
  const headerCSSEllipsis = (_e = (_d = column.headerCssEllipsis) != null ? _d : column.cssEllipsis) != null ? _e : true;
9280
9269
  const menuIconProps = {
9281
9270
  reserveSpaceWhenHidden: align2 === "center",
@@ -9295,7 +9284,7 @@ function InfiniteTableHeaderCell(props) {
9295
9284
  }
9296
9285
  };
9297
9286
  const MenuIconCmp = ((_f = column.components) == null ? void 0 : _f.MenuIcon) || (components2 == null ? void 0 : components2.MenuIcon) || MenuIcon;
9298
- const menuIcon = /* @__PURE__ */ React43.createElement(MenuIconCmp, __spreadValues({}, menuIconProps));
9287
+ const menuIcon = /* @__PURE__ */ React42.createElement(MenuIconCmp, __spreadValues({}, menuIconProps));
9299
9288
  const initialRenderParam = {
9300
9289
  dragging,
9301
9290
  domRef: ref,
@@ -9326,7 +9315,7 @@ function InfiniteTableHeaderCell(props) {
9326
9315
  renderBag: __spreadValues({}, initialRenderParam.renderBag)
9327
9316
  });
9328
9317
  if (column.renderSortIcon) {
9329
- renderParam2.renderBag.sortIcon = /* @__PURE__ */ React43.createElement(
9318
+ renderParam2.renderBag.sortIcon = /* @__PURE__ */ React42.createElement(
9330
9319
  RenderHeaderCellHookComponent,
9331
9320
  {
9332
9321
  render: column.renderSortIcon,
@@ -9337,7 +9326,7 @@ function InfiniteTableHeaderCell(props) {
9337
9326
  );
9338
9327
  }
9339
9328
  if (column.renderFilterIcon) {
9340
- renderParam2.renderBag.filterIcon = /* @__PURE__ */ React43.createElement(
9329
+ renderParam2.renderBag.filterIcon = /* @__PURE__ */ React42.createElement(
9341
9330
  RenderHeaderCellHookComponent,
9342
9331
  {
9343
9332
  render: column.renderFilterIcon,
@@ -9348,7 +9337,7 @@ function InfiniteTableHeaderCell(props) {
9348
9337
  );
9349
9338
  }
9350
9339
  if (typeof column.renderMenuIcon === "function") {
9351
- renderParam2.renderBag.menuIcon = /* @__PURE__ */ React43.createElement(
9340
+ renderParam2.renderBag.menuIcon = /* @__PURE__ */ React42.createElement(
9352
9341
  RenderHeaderCellHookComponent,
9353
9342
  {
9354
9343
  render: (param) => {
@@ -9360,7 +9349,7 @@ function InfiniteTableHeaderCell(props) {
9360
9349
  if (result.type === MenuIconCmp || result.type === MenuIcon) {
9361
9350
  return result;
9362
9351
  }
9363
- return /* @__PURE__ */ React43.createElement(MenuIconCmp, __spreadValues({}, menuIconProps), result);
9352
+ return /* @__PURE__ */ React42.createElement(MenuIconCmp, __spreadValues({}, menuIconProps), result);
9364
9353
  }
9365
9354
  return null;
9366
9355
  },
@@ -9371,7 +9360,7 @@ function InfiniteTableHeaderCell(props) {
9371
9360
  );
9372
9361
  }
9373
9362
  if (column.renderSelectionCheckBox && selectionMode === "multi-row") {
9374
- renderParam2.renderBag.selectionCheckBox = /* @__PURE__ */ React43.createElement(
9363
+ renderParam2.renderBag.selectionCheckBox = /* @__PURE__ */ React42.createElement(
9375
9364
  RenderHeaderCellHookComponent,
9376
9365
  {
9377
9366
  render: defaultRenderSelectionCheckBox2,
@@ -9382,7 +9371,7 @@ function InfiniteTableHeaderCell(props) {
9382
9371
  );
9383
9372
  const renderHeaderSelectionCheckBox = (_a2 = column.renderHeaderSelectionCheckBox) != null ? _a2 : column.renderSelectionCheckBox;
9384
9373
  if (renderHeaderSelectionCheckBox && renderHeaderSelectionCheckBox !== true) {
9385
- renderParam2.renderBag.selectionCheckBox = /* @__PURE__ */ React43.createElement(
9374
+ renderParam2.renderBag.selectionCheckBox = /* @__PURE__ */ React42.createElement(
9386
9375
  RenderHeaderCellHookComponent,
9387
9376
  {
9388
9377
  render: renderHeaderSelectionCheckBox,
@@ -9394,7 +9383,7 @@ function InfiniteTableHeaderCell(props) {
9394
9383
  }
9395
9384
  }
9396
9385
  if (header instanceof Function) {
9397
- renderParam2.renderBag.header = /* @__PURE__ */ React43.createElement(
9386
+ renderParam2.renderBag.header = /* @__PURE__ */ React42.createElement(
9398
9387
  RenderHeaderCellHookComponent,
9399
9388
  {
9400
9389
  render: header,
@@ -9405,10 +9394,10 @@ function InfiniteTableHeaderCell(props) {
9405
9394
  );
9406
9395
  }
9407
9396
  const theMenuIcon = column.renderMenuIcon === false ? null : renderParam2.renderBag.menuIcon;
9408
- const headerContent = headerCSSEllipsis ? /* @__PURE__ */ React43.createElement("div", { className: cssEllipsisClassName }, renderParam2.renderBag.header) : renderParam2.renderBag.header;
9409
- 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);
9397
+ const headerContent = headerCSSEllipsis ? /* @__PURE__ */ React42.createElement("div", { className: cssEllipsisClassName }, renderParam2.renderBag.header) : renderParam2.renderBag.header;
9398
+ 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);
9410
9399
  if (column.renderHeader) {
9411
- return /* @__PURE__ */ React43.createElement(
9400
+ return /* @__PURE__ */ React42.createElement(
9412
9401
  RenderHeaderCellHookComponent,
9413
9402
  {
9414
9403
  render: column.renderHeader,
@@ -9445,7 +9434,7 @@ function InfiniteTableHeaderCell(props) {
9445
9434
  });
9446
9435
  let draggingProxy = null;
9447
9436
  if (dragging && proxyPosition) {
9448
- draggingProxy = /* @__PURE__ */ React43.createElement(
9437
+ draggingProxy = /* @__PURE__ */ React42.createElement(
9449
9438
  "div",
9450
9439
  {
9451
9440
  key: column.id,
@@ -9469,7 +9458,7 @@ function InfiniteTableHeaderCell(props) {
9469
9458
  verticalAlign,
9470
9459
  align: align2
9471
9460
  };
9472
- const debouncedOnFilterValueChange = React43.useMemo(() => {
9461
+ const debouncedOnFilterValueChange = React42.useMemo(() => {
9473
9462
  const fn = (filterValue) => {
9474
9463
  api.setColumnFilter(column.id, filterValue);
9475
9464
  };
@@ -9495,7 +9484,7 @@ function InfiniteTableHeaderCell(props) {
9495
9484
  "data-sort": column.computedSortedAsc ? "asc" : column.computedSortedDesc ? "desc" : "none",
9496
9485
  "data-sort-index": `${(_p = column.computedSortIndex) != null ? _p : -1}`
9497
9486
  };
9498
- return /* @__PURE__ */ React43.createElement(ContextProvider, { value: renderParam }, /* @__PURE__ */ React43.createElement(
9487
+ return /* @__PURE__ */ React42.createElement(ContextProvider, { value: renderParam }, /* @__PURE__ */ React42.createElement(
9499
9488
  InfiniteTableCell,
9500
9489
  __spreadProps(__spreadValues({
9501
9490
  domRef: ref,
@@ -9537,7 +9526,7 @@ function InfiniteTableHeaderCell(props) {
9537
9526
  CellCls
9538
9527
  ),
9539
9528
  cssEllipsis: headerCSSEllipsis,
9540
- afterChildren: /* @__PURE__ */ React43.createElement(React43.Fragment, null, showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ React43.createElement(
9529
+ afterChildren: /* @__PURE__ */ React42.createElement(React42.Fragment, null, showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ React42.createElement(
9541
9530
  InfiniteTableColumnHeaderFilter,
9542
9531
  {
9543
9532
  filterEditor: FilterEditor,
@@ -9550,7 +9539,7 @@ function InfiniteTableHeaderCell(props) {
9550
9539
  columnFilterValue: column.computedFilterValue,
9551
9540
  columnHeaderHeight
9552
9541
  }
9553
- ) : /* @__PURE__ */ React43.createElement(InfiniteTableColumnHeaderFilterEmpty, null) : null, resizeHandle),
9542
+ ) : /* @__PURE__ */ React42.createElement(InfiniteTableColumnHeaderFilterEmpty, null) : null, resizeHandle),
9554
9543
  renderChildren
9555
9544
  })
9556
9545
  ), draggingProxy);
@@ -9563,7 +9552,7 @@ function useInfiniteHeaderCell() {
9563
9552
  }
9564
9553
 
9565
9554
  // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderWrapper.tsx
9566
- import * as React48 from "react";
9555
+ import * as React47 from "react";
9567
9556
 
9568
9557
  // src/components/InfiniteTable/components/InfiniteTableHeader/buildColumnAndGroupTree.ts
9569
9558
  function buildColumnAndGroupTree(columns, columnGroups, columnGroupsDepthsMap, columnGroupsMaxDepth) {
@@ -9592,7 +9581,7 @@ function buildColumnAndGroupTree(columns, columnGroups, columnGroupsDepthsMap, c
9592
9581
  let colGroupItem;
9593
9582
  let prevGroupItem = colItem;
9594
9583
  while (groupId) {
9595
- const colGroup = columnGroups.get(groupId);
9584
+ const colGroup = columnGroups[groupId];
9596
9585
  if (colGroup) {
9597
9586
  parentGroups.add(groupId);
9598
9587
  const groupAbsoluteId = [colId, ...parentGroups];
@@ -9669,19 +9658,19 @@ function assignGroupOffsetsAndComputedWidths(items, groupOffset = 0) {
9669
9658
  }
9670
9659
 
9671
9660
  // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
9672
- import * as React47 from "react";
9661
+ import * as React46 from "react";
9673
9662
  import { useCallback as useCallback16, useEffect as useEffect16, useRef as useRef18 } from "react";
9674
9663
 
9675
9664
  // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup.tsx
9676
- import * as React46 from "react";
9665
+ import * as React45 from "react";
9677
9666
 
9678
9667
  // src/components/InfiniteTable/components/InfiniteTableHeader/useColumnGroupResizeHandle.tsx
9679
- import * as React45 from "react";
9668
+ import * as React44 from "react";
9680
9669
  import { useCallback as useCallback15 } from "react";
9681
9670
 
9682
9671
  // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/GroupResizeHandle.tsx
9683
9672
  import { useRef as useRef17, useState as useState12 } from "react";
9684
- import * as React44 from "react";
9673
+ import * as React43 from "react";
9685
9674
  var { rootClassName: rootClassName8 } = internalProps;
9686
9675
  var InfiniteTableHeaderCellResizeHandleCls2 = `${rootClassName8}HeaderCell_ResizeHandle`;
9687
9676
  function GroupResizeHandleFn(props) {
@@ -9750,7 +9739,7 @@ function GroupResizeHandleFn(props) {
9750
9739
  const style2 = (computedPinned === false || computedPinned === "start") && computedLastInCategory ? {
9751
9740
  right: computedPinned === "start" ? void 0 : ThemeVars.components.HeaderCell.resizeHandleWidth
9752
9741
  } : computedPinned === "end" && computedFirstInCategory ? { right: void 0 } : void 0;
9753
- return /* @__PURE__ */ React44.createElement(
9742
+ return /* @__PURE__ */ React43.createElement(
9754
9743
  "div",
9755
9744
  {
9756
9745
  ref: domRef,
@@ -9763,7 +9752,7 @@ function GroupResizeHandleFn(props) {
9763
9752
  )}`,
9764
9753
  onPointerDown
9765
9754
  },
9766
- /* @__PURE__ */ React44.createElement(
9755
+ /* @__PURE__ */ React43.createElement(
9767
9756
  "div",
9768
9757
  {
9769
9758
  style: __spreadValues(__spreadValues({}, style2), props.style),
@@ -9774,7 +9763,7 @@ function GroupResizeHandleFn(props) {
9774
9763
  )
9775
9764
  );
9776
9765
  }
9777
- var GroupResizeHandle = React44.memo(
9766
+ var GroupResizeHandle = React43.memo(
9778
9767
  GroupResizeHandleFn
9779
9768
  );
9780
9769
 
@@ -9833,7 +9822,7 @@ function useColumnGroupResizeHandle(groupColumns, config) {
9833
9822
  [computeResizeForDiff]
9834
9823
  );
9835
9824
  const groupResizable = groupColumns.some((c) => c.computedResizable);
9836
- const resizeHandle = groupResizable ? /* @__PURE__ */ React45.createElement(
9825
+ const resizeHandle = groupResizable ? /* @__PURE__ */ React44.createElement(
9837
9826
  GroupResizeHandle,
9838
9827
  {
9839
9828
  brain: bodyBrain,
@@ -9873,7 +9862,7 @@ function InfiniteTableHeaderGroup(props) {
9873
9862
  (col) => `var(${columnWidthAtIndex5}-${col.computedVisibleIndex})`
9874
9863
  ).join(" + ") + " )" : `var(${columnWidthAtIndex5}-${firstColumn.computedVisibleIndex})`;
9875
9864
  const zIndex2 = `calc(var(${columnZIndexAtIndex6}-${firstColumn.computedVisibleIndex}) + ${columnGroupsMaxDepth - columnGroup.depth})`;
9876
- return /* @__PURE__ */ React46.createElement(
9865
+ return /* @__PURE__ */ React45.createElement(
9877
9866
  "div",
9878
9867
  {
9879
9868
  ref: props.domRef,
@@ -9882,7 +9871,7 @@ function InfiniteTableHeaderGroup(props) {
9882
9871
  style: { width, height },
9883
9872
  "data-z-index": zIndex2
9884
9873
  },
9885
- /* @__PURE__ */ React46.createElement(
9874
+ /* @__PURE__ */ React45.createElement(
9886
9875
  "div",
9887
9876
  {
9888
9877
  className: join(
@@ -9964,7 +9953,7 @@ function InfiniteTableHeaderFn(props) {
9964
9953
  computedWidth: colGroupItem.computedWidth,
9965
9954
  groupOffset: colGroupItem.groupOffset
9966
9955
  });
9967
- return /* @__PURE__ */ React47.createElement(
9956
+ return /* @__PURE__ */ React46.createElement(
9968
9957
  InfiniteTableHeaderGroup,
9969
9958
  {
9970
9959
  bodyBrain,
@@ -9977,7 +9966,7 @@ function InfiniteTableHeaderFn(props) {
9977
9966
  }
9978
9967
  );
9979
9968
  }
9980
- return /* @__PURE__ */ React47.createElement(
9969
+ return /* @__PURE__ */ React46.createElement(
9981
9970
  InfiniteTableHeaderCell,
9982
9971
  {
9983
9972
  domRef: domRef2,
@@ -10001,7 +9990,7 @@ function InfiniteTableHeaderFn(props) {
10001
9990
  showColumnFilters
10002
9991
  ]
10003
9992
  );
10004
- return /* @__PURE__ */ React47.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React47.createElement(
9993
+ return /* @__PURE__ */ React46.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React46.createElement(
10005
9994
  RawTable,
10006
9995
  {
10007
9996
  name: "header",
@@ -10011,7 +10000,7 @@ function InfiniteTableHeaderFn(props) {
10011
10000
  }
10012
10001
  ));
10013
10002
  }
10014
- var InfiniteTableHeader = React47.memo(
10003
+ var InfiniteTableHeader = React46.memo(
10015
10004
  InfiniteTableHeaderFn
10016
10005
  );
10017
10006
 
@@ -10034,10 +10023,10 @@ function TableHeaderWrapper(props) {
10034
10023
  showColumnFilters
10035
10024
  }
10036
10025
  } = tableContextValue;
10037
- const rows = !computedColumnGroups || !computedColumnGroups.size ? 1 : columnGroupsMaxDepth + 2;
10026
+ const rows = !computedColumnGroups || !Object.keys(computedColumnGroups).length ? 1 : columnGroupsMaxDepth + 2;
10038
10027
  const height = rows * columnHeaderHeight + (showColumnFilters ? columnHeaderHeight : 0);
10039
- const columnAndGroupTreeInfo = React48.useMemo(() => {
10040
- if (!computedColumnGroups || !computedColumnGroups.size) {
10028
+ const columnAndGroupTreeInfo = React47.useMemo(() => {
10029
+ if (!computedColumnGroups || !Object.keys(computedColumnGroups).length) {
10041
10030
  return void 0;
10042
10031
  }
10043
10032
  return buildColumnAndGroupTree(
@@ -10047,7 +10036,7 @@ function TableHeaderWrapper(props) {
10047
10036
  columnGroupsMaxDepth
10048
10037
  );
10049
10038
  }, [computedVisibleColumns, computedColumnGroups, columnGroupsDepthsMap]);
10050
- const cellspan = React48.useCallback(
10039
+ const cellspan = React47.useCallback(
10051
10040
  ({ rowIndex, colIndex }) => {
10052
10041
  const column = computedVisibleColumns[colIndex];
10053
10042
  const rowspan2 = 1;
@@ -10085,15 +10074,15 @@ function TableHeaderWrapper(props) {
10085
10074
  columnGroupsDepthsMap
10086
10075
  ]
10087
10076
  );
10088
- const rowspan = React48.useCallback(
10077
+ const rowspan = React47.useCallback(
10089
10078
  ({ rowIndex, colIndex }) => cellspan({ rowIndex, colIndex }).rowspan,
10090
10079
  [cellspan]
10091
10080
  );
10092
- const colspan = React48.useCallback(
10081
+ const colspan = React47.useCallback(
10093
10082
  ({ rowIndex, colIndex }) => cellspan({ rowIndex, colIndex }).colspan,
10094
10083
  [cellspan]
10095
10084
  );
10096
- const rowHeight = React48.useCallback(
10085
+ const rowHeight = React47.useCallback(
10097
10086
  (index) => {
10098
10087
  return showColumnFilters ? index < rows - 1 ? columnHeaderHeight : 2 * columnHeaderHeight : columnHeaderHeight;
10099
10088
  },
@@ -10115,7 +10104,7 @@ function TableHeaderWrapper(props) {
10115
10104
  fixedColsStart: computedPinnedStartColumns.length
10116
10105
  }
10117
10106
  );
10118
- const header = /* @__PURE__ */ React48.createElement(
10107
+ const header = /* @__PURE__ */ React47.createElement(
10119
10108
  InfiniteTableHeader,
10120
10109
  {
10121
10110
  columns: computedVisibleColumns,
@@ -10126,7 +10115,7 @@ function TableHeaderWrapper(props) {
10126
10115
  columnAndGroupTreeInfo
10127
10116
  }
10128
10117
  );
10129
- const verticalScrollbarPlaceholder = scrollbars.vertical && getScrollbarWidth() ? /* @__PURE__ */ React48.createElement(
10118
+ const verticalScrollbarPlaceholder = scrollbars.vertical && getScrollbarWidth() ? /* @__PURE__ */ React47.createElement(
10130
10119
  "div",
10131
10120
  {
10132
10121
  className: HeaderScrollbarPlaceholderCls,
@@ -10136,7 +10125,7 @@ function TableHeaderWrapper(props) {
10136
10125
  }
10137
10126
  }
10138
10127
  ) : null;
10139
- return /* @__PURE__ */ React48.createElement(
10128
+ return /* @__PURE__ */ React47.createElement(
10140
10129
  "div",
10141
10130
  {
10142
10131
  className: HeaderWrapperCls,
@@ -10150,7 +10139,7 @@ function TableHeaderWrapper(props) {
10150
10139
  }
10151
10140
 
10152
10141
  // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
10153
- import * as React49 from "react";
10142
+ import * as React48 from "react";
10154
10143
  import { useEffect as useEffect17 } from "react";
10155
10144
 
10156
10145
  // src/components/utils/decamelize.ts
@@ -10193,11 +10182,11 @@ var enforceStyle = (node, style2) => {
10193
10182
  );
10194
10183
  }
10195
10184
  };
10196
- var InfiniteTableLicenseFooter = React49.forwardRef(
10185
+ var InfiniteTableLicenseFooter = React48.forwardRef(
10197
10186
  function InfiniteTableLicenseFooter2(props, ref) {
10198
10187
  const { rootClassName: rootClassName12 } = useInternalProps();
10199
- const domRef = React49.useRef(null);
10200
- const domCallback = React49.useCallback((node) => {
10188
+ const domRef = React48.useRef(null);
10189
+ const domCallback = React48.useCallback((node) => {
10201
10190
  domRef.current = node;
10202
10191
  if (!ref) {
10203
10192
  return;
@@ -10225,7 +10214,7 @@ var InfiniteTableLicenseFooter = React49.forwardRef(
10225
10214
  clearInterval(intervalId);
10226
10215
  };
10227
10216
  }, []);
10228
- return /* @__PURE__ */ React49.createElement(
10217
+ return /* @__PURE__ */ React48.createElement(
10229
10218
  "div",
10230
10219
  __spreadProps(__spreadValues({
10231
10220
  ref: domCallback
@@ -10239,7 +10228,7 @@ var InfiniteTableLicenseFooter = React49.forwardRef(
10239
10228
  }),
10240
10229
  "Powered by",
10241
10230
  " ",
10242
- /* @__PURE__ */ React49.createElement(
10231
+ /* @__PURE__ */ React48.createElement(
10243
10232
  "a",
10244
10233
  {
10245
10234
  href: "https://infinite-table.com",
@@ -10254,7 +10243,7 @@ var InfiniteTableLicenseFooter = React49.forwardRef(
10254
10243
  );
10255
10244
 
10256
10245
  // src/components/InfiniteTable/components/LoadMask.tsx
10257
- import * as React50 from "react";
10246
+ import * as React49 from "react";
10258
10247
 
10259
10248
  // src/components/InfiniteTable/components/LoadMask.css.ts
10260
10249
  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" };
@@ -10266,16 +10255,16 @@ var { rootClassName: rootClassName10 } = internalProps;
10266
10255
  var baseCls3 = `${rootClassName10}-LoadMask`;
10267
10256
  function LoadMaskFn(props) {
10268
10257
  const { visible, children = "Loading" } = props;
10269
- return /* @__PURE__ */ React50.createElement(
10258
+ return /* @__PURE__ */ React49.createElement(
10270
10259
  "div",
10271
10260
  {
10272
10261
  className: `${LoadMaskCls[visible ? "visible" : "hidden"]} ${baseCls3}`
10273
10262
  },
10274
- /* @__PURE__ */ React50.createElement("div", { className: `${LoadMaskOverlayCls} ${baseCls3}-Overlay` }),
10275
- /* @__PURE__ */ React50.createElement("div", { className: `${LoadMaskTextCls} ${baseCls3}-Text` }, children)
10263
+ /* @__PURE__ */ React49.createElement("div", { className: `${LoadMaskOverlayCls} ${baseCls3}-Overlay` }),
10264
+ /* @__PURE__ */ React49.createElement("div", { className: `${LoadMaskTextCls} ${baseCls3}-Text` }, children)
10276
10265
  );
10277
10266
  }
10278
- var LoadMask = React50.memo(LoadMaskFn);
10267
+ var LoadMask = React49.memo(LoadMaskFn);
10279
10268
 
10280
10269
  // src/utils/deepClone.ts
10281
10270
  function cloneArray(arr) {
@@ -10947,7 +10936,7 @@ function enhancedFlatten(param) {
10947
10936
  }
10948
10937
 
10949
10938
  // src/components/DataSource/index.tsx
10950
- import * as React51 from "react";
10939
+ import * as React50 from "react";
10951
10940
  import { useEffect as useEffect20, useLayoutEffect as useLayoutEffect10 } from "react";
10952
10941
 
10953
10942
  // src/utils/multisort/sortTypes.ts
@@ -11770,46 +11759,25 @@ function getPivotColumnsAndColumnGroups({
11770
11759
  reducer: () => null
11771
11760
  });
11772
11761
  }
11773
- const columns = /* @__PURE__ */ new Map([
11774
- // [
11775
- // 'labels',
11776
- // {
11777
- // header: 'Row labels',
11778
- // pivotBy,
11779
- // valueGetter: (params) => {
11780
- // const { rowInfo } = params;
11781
- // if (!rowInfo.data) {
11782
- // // TODO replace with loading spinner
11783
- // return 'Loading ...';
11784
- // }
11785
- // return rowInfo.groupKeys
11786
- // ? rowInfo.groupKeys[rowInfo.groupKeys?.length - 1]
11787
- // : null;
11788
- // },
11789
- // },
11790
- // ],
11791
- ]);
11792
- const columnGroups = /* @__PURE__ */ new Map();
11762
+ const columns = {};
11763
+ const columnGroups = {};
11793
11764
  const addGrandTotalColumns = once(function() {
11794
11765
  aggregationReducers.forEach((reducer, index) => {
11795
- columns.set(
11796
- `total:${reducer.id}`,
11797
- prepareColumn({
11798
- header: `${reducer.name || reducer.id} total`,
11799
- pivotBy,
11800
- pivotColumn: true,
11801
- pivotTotalColumn: true,
11802
- pivotAggregator: reducer,
11803
- pivotAggregatorIndex: index,
11804
- pivotGroupKeys: [],
11805
- pivotGroupKey: "",
11806
- pivotIndex: -1,
11807
- valueFormatter: ({ rowInfo }) => {
11808
- var _a;
11809
- return rowInfo.isGroupRow ? (_a = rowInfo.reducerResults) == null ? void 0 : _a[reducer.id] : null;
11810
- }
11811
- })
11812
- );
11766
+ columns[`total:${reducer.id}`] = prepareColumn({
11767
+ header: `${reducer.name || reducer.id} total`,
11768
+ pivotBy,
11769
+ pivotColumn: true,
11770
+ pivotTotalColumn: true,
11771
+ pivotAggregator: reducer,
11772
+ pivotAggregatorIndex: index,
11773
+ pivotGroupKeys: [],
11774
+ pivotGroupKey: "",
11775
+ pivotIndex: -1,
11776
+ valueFormatter: ({ rowInfo }) => {
11777
+ var _a;
11778
+ return rowInfo.isGroupRow ? (_a = rowInfo.reducerResults) == null ? void 0 : _a[reducer.id] : null;
11779
+ }
11780
+ });
11813
11781
  });
11814
11782
  });
11815
11783
  if (!pivotLength && pivotTotalColumnPosition === "start" || pivotGrandTotalColumnPosition === "start") {
@@ -11829,18 +11797,15 @@ function getPivotColumnsAndColumnGroups({
11829
11797
  const columnGroupId = parentColumnGroupId;
11830
11798
  parentColumnGroupId = keys.join("/");
11831
11799
  const pivotGroupKey = keys[keys.length - 1];
11832
- columnGroups.set(
11833
- parentColumnGroupId,
11834
- prepareColumnGroup({
11835
- header: `${pivotGroupKey}`,
11836
- columnGroup: columnGroupId,
11837
- pivotBy,
11838
- pivotGroupKeys: keys,
11839
- pivotByAtIndex: pivotByForColumn,
11840
- pivotIndex: keys.length - 1,
11841
- pivotGroupKey
11842
- })
11843
- );
11800
+ columnGroups[parentColumnGroupId] = prepareColumnGroup({
11801
+ header: `${pivotGroupKey}`,
11802
+ columnGroup: columnGroupId,
11803
+ pivotBy,
11804
+ pivotGroupKeys: keys,
11805
+ pivotByAtIndex: pivotByForColumn,
11806
+ pivotIndex: keys.length - 1,
11807
+ pivotGroupKey
11808
+ });
11844
11809
  }
11845
11810
  aggregationReducers.forEach((reducer, index) => {
11846
11811
  const header = isSingleAggregationColumn ? `${keys[keys.length - 1]}` : reducer.name || reducer.id;
@@ -11866,42 +11831,36 @@ function getPivotColumnsAndColumnGroups({
11866
11831
  }
11867
11832
  });
11868
11833
  const columnId = `${reducer.id}:${keys.join("/")}`;
11869
- columns.set(columnId, computedPivotColumn);
11834
+ columns[columnId] = computedPivotColumn;
11870
11835
  });
11871
11836
  } else {
11872
11837
  const colGroupId = keys.join("/");
11873
11838
  const parentKeys = keys.slice(0, -1);
11874
- columnGroups.set(
11875
- colGroupId,
11876
- prepareColumnGroup({
11877
- columnGroup: parentKeys.length ? parentKeys.join("/") : void 0,
11878
- header: `${keys[keys.length - 1]}`,
11879
- pivotBy,
11880
- pivotGroupKeys: keys,
11881
- pivotIndex: keys.length - 1,
11882
- pivotByAtIndex: pivotBy[keys.length - 1],
11883
- pivotGroupKey: keys[keys.length - 1]
11884
- })
11885
- );
11839
+ columnGroups[colGroupId] = prepareColumnGroup({
11840
+ columnGroup: parentKeys.length ? parentKeys.join("/") : void 0,
11841
+ header: `${keys[keys.length - 1]}`,
11842
+ pivotBy,
11843
+ pivotGroupKeys: keys,
11844
+ pivotIndex: keys.length - 1,
11845
+ pivotByAtIndex: pivotBy[keys.length - 1],
11846
+ pivotGroupKey: keys[keys.length - 1]
11847
+ });
11886
11848
  if (pivotTotalColumnPosition !== false) {
11887
11849
  const pivotByForColumn = pivotBy[keys.length - 1];
11888
11850
  let columnGroupId = parentKeys.length ? parentKeys.join("/") : void 0;
11889
11851
  if (!isSingleAggregationColumn) {
11890
11852
  const parentGroupForTotalsGroup = columnGroupId;
11891
11853
  columnGroupId = `total:${keys.join("/")}`;
11892
- columnGroups.set(
11893
- columnGroupId,
11894
- prepareColumnGroup({
11895
- header: `${keys[keys.length - 1]} total`,
11896
- columnGroup: parentGroupForTotalsGroup,
11897
- pivotBy,
11898
- pivotTotalColumnGroup: true,
11899
- pivotGroupKeys: keys,
11900
- pivotIndex: keys.length - 1,
11901
- pivotByAtIndex: pivotByForColumn,
11902
- pivotGroupKey: keys[keys.length - 1]
11903
- })
11904
- );
11854
+ columnGroups[columnGroupId] = prepareColumnGroup({
11855
+ header: `${keys[keys.length - 1]} total`,
11856
+ columnGroup: parentGroupForTotalsGroup,
11857
+ pivotBy,
11858
+ pivotTotalColumnGroup: true,
11859
+ pivotGroupKeys: keys,
11860
+ pivotIndex: keys.length - 1,
11861
+ pivotByAtIndex: pivotByForColumn,
11862
+ pivotGroupKey: keys[keys.length - 1]
11863
+ });
11905
11864
  }
11906
11865
  aggregationReducers.forEach((reducer, index) => {
11907
11866
  const header = isSingleAggregationColumn ? `${keys[keys.length - 1]} total ` : `${reducer.name || reducer.id} total`;
@@ -11926,10 +11885,7 @@ function getPivotColumnsAndColumnGroups({
11926
11885
  return (_b = (_a = rowInfo.pivotValuesMap) == null ? void 0 : _a.get(keys)) == null ? void 0 : _b.reducerResults[reducer.id];
11927
11886
  }
11928
11887
  });
11929
- columns.set(
11930
- `total:${reducer.id}:${keys.join("/")}`,
11931
- computedPivotColumn
11932
- );
11888
+ columns[`total:${reducer.id}:${keys.join("/")}`] = computedPivotColumn;
11933
11889
  });
11934
11890
  }
11935
11891
  }
@@ -14977,7 +14933,7 @@ function DataSourceWithContext(props) {
14977
14933
  var _a;
14978
14934
  (_a = componentState.onReady) == null ? void 0 : _a.call(componentState, api);
14979
14935
  }, []);
14980
- return /* @__PURE__ */ React51.createElement(React51.Fragment, null, children);
14936
+ return /* @__PURE__ */ React50.createElement(React50.Fragment, null, children);
14981
14937
  }
14982
14938
  var DataSourceRoot = getComponentStateRoot({
14983
14939
  //@ts-ignore
@@ -15007,7 +14963,7 @@ function DataSourceCmp({
15007
14963
  const { componentState, componentActions, assignState } = useComponentState();
15008
14964
  componentState.getDataSourceMasterContextRef.current = getDataSourceMasterContext;
15009
14965
  const getState = useLatest(componentState);
15010
- const [api] = React51.useState(() => {
14966
+ const [api] = React50.useState(() => {
15011
14967
  return getDataSourceApi({ getState, actions: componentActions });
15012
14968
  });
15013
14969
  const contextValue = {
@@ -15059,13 +15015,13 @@ function DataSourceCmp({
15059
15015
  });
15060
15016
  }
15061
15017
  }, [componentState.originalDataArrayChangedInfo]);
15062
- return /* @__PURE__ */ React51.createElement(DataSourceContext.Provider, { value: contextValue }, /* @__PURE__ */ React51.createElement(DataSourceWithContext, { children }));
15018
+ return /* @__PURE__ */ React50.createElement(DataSourceContext.Provider, { value: contextValue }, /* @__PURE__ */ React50.createElement(DataSourceWithContext, { children }));
15063
15019
  }
15064
15020
  function DataSource(props) {
15065
15021
  const masterContext = useMasterDetailContext();
15066
15022
  const isDetail = !!masterContext;
15067
15023
  const key = isDetail ? masterContext.masterRowInfo.id : "master";
15068
- return /* @__PURE__ */ React51.createElement(DataSourceRoot, __spreadProps(__spreadValues({}, props), { key }), /* @__PURE__ */ React51.createElement(DataSourceCmp, { children: props.children, isDetail }));
15024
+ return /* @__PURE__ */ React50.createElement(DataSourceRoot, __spreadProps(__spreadValues({}, props), { key }), /* @__PURE__ */ React50.createElement(DataSourceCmp, { children: props.children, isDetail }));
15069
15025
  }
15070
15026
  function useRowInfoReducers() {
15071
15027
  const { rowInfoReducerResults } = useDataSource();
@@ -15387,7 +15343,8 @@ function getRowDetailApi(param) {
15387
15343
  return !rowDetailApi.isRowDetailCollapsed(pk);
15388
15344
  },
15389
15345
  collapseRowDetail(pk) {
15390
- const currentState = getState().rowDetailState;
15346
+ const componentState = getState();
15347
+ const currentState = componentState.rowDetailState;
15391
15348
  if (!currentState) {
15392
15349
  console.error(
15393
15350
  `Cannot collapse row details via rowDetailState, as no props.rowDetailState is provided.`
@@ -15396,10 +15353,13 @@ function getRowDetailApi(param) {
15396
15353
  }
15397
15354
  const state = new RowDetailState(currentState);
15398
15355
  state.collapseRowDetails(pk);
15356
+ componentState.lastRowToExpandRef.current = null;
15357
+ componentState.lastRowToCollapseRef.current = pk;
15399
15358
  actions.rowDetailState = state;
15400
15359
  },
15401
15360
  expandRowDetail(pk) {
15402
- const currentState = getState().rowDetailState;
15361
+ const componentState = getState();
15362
+ const currentState = componentState.rowDetailState;
15403
15363
  if (!currentState) {
15404
15364
  console.error(
15405
15365
  `Cannot expand row details via rowDetailState, as no props.rowDetailState is provided.`
@@ -15408,6 +15368,8 @@ function getRowDetailApi(param) {
15408
15368
  }
15409
15369
  const state = new RowDetailState(currentState);
15410
15370
  state.expandRowDetails(pk);
15371
+ componentState.lastRowToCollapseRef.current = null;
15372
+ componentState.lastRowToExpandRef.current = pk;
15411
15373
  actions.rowDetailState = state;
15412
15374
  },
15413
15375
  toggleRowDetail(pk) {
@@ -16440,7 +16402,7 @@ function useAutoSizeColumns() {
16440
16402
  // src/components/InfiniteTable/hooks/useCellRendering.tsx
16441
16403
  import { useMemo as useMemo9 } from "react";
16442
16404
  import { useCallback as useCallback19, useEffect as useEffect22, useRef as useRef24 } from "react";
16443
- import * as React53 from "react";
16405
+ import * as React52 from "react";
16444
16406
 
16445
16407
  // src/components/InfiniteTable/hooks/useYourBrain.ts
16446
16408
  function useYourBrain(param) {
@@ -16477,7 +16439,7 @@ function useYourBrain(param) {
16477
16439
  }
16478
16440
 
16479
16441
  // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableDetailRow.tsx
16480
- import * as React52 from "react";
16442
+ import * as React51 from "react";
16481
16443
 
16482
16444
  // src/components/InfiniteTable/components/rowDetail.css.ts
16483
16445
  var RowDetailRecipe = createRuntimeFn({ defaultClassName: "rowDetail_RowDetailRecipe__evqes20", variantClassNames: {}, defaultVariants: {}, compoundVariants: [] });
@@ -16614,7 +16576,7 @@ function InfiniteTableDetailRowFn(props) {
16614
16576
  rowDetailsCache,
16615
16577
  rowInfo
16616
16578
  });
16617
- return /* @__PURE__ */ React52.createElement(DataSourceMasterDetailContext.Provider, { value: masterDetailContextValue }, /* @__PURE__ */ React52.createElement(
16579
+ return /* @__PURE__ */ React51.createElement(DataSourceMasterDetailContext.Provider, { value: masterDetailContextValue }, /* @__PURE__ */ React51.createElement(
16618
16580
  "div",
16619
16581
  {
16620
16582
  ref: domRef,
@@ -16623,6 +16585,7 @@ function InfiniteTableDetailRowFn(props) {
16623
16585
  position: "absolute",
16624
16586
  top: `${detailOffset}px`,
16625
16587
  left: 0,
16588
+ // TODO see #rowDetailWidth
16626
16589
  width: `calc(${InternalVars.bodyWidth} - ${InternalVars.scrollbarWidthVertical})`,
16627
16590
  height: rowDetailHeight
16628
16591
  }
@@ -16630,7 +16593,7 @@ function InfiniteTableDetailRowFn(props) {
16630
16593
  rowDetailRenderer(rowInfo, currentRowCache)
16631
16594
  ));
16632
16595
  }
16633
- var InfiniteTableDetailRow = React52.memo(
16596
+ var InfiniteTableDetailRow = React51.memo(
16634
16597
  InfiniteTableDetailRowFn
16635
16598
  );
16636
16599
 
@@ -16789,7 +16752,7 @@ function useCellRendering(param) {
16789
16752
  cellStyle,
16790
16753
  cellClassName
16791
16754
  };
16792
- return /* @__PURE__ */ React53.createElement(InfiniteTableColumnCell, __spreadValues({}, cellProps));
16755
+ return /* @__PURE__ */ React52.createElement(InfiniteTableColumnCell, __spreadValues({}, cellProps));
16793
16756
  },
16794
16757
  [
16795
16758
  rowHeight,
@@ -16820,10 +16783,10 @@ function useCellRendering(param) {
16820
16783
  const dataArray2 = getData();
16821
16784
  const rowInfo = dataArray2[rowIndex];
16822
16785
  if (!rowInfo || !isRowDetailsExpanded(rowInfo) || !computedRowSizeCacheForDetails) {
16823
- return /* @__PURE__ */ React53.createElement("div", { ref: domRef, className: visibility.hidden });
16786
+ return /* @__PURE__ */ React52.createElement("div", { ref: domRef, className: visibility.hidden });
16824
16787
  }
16825
16788
  const { rowDetailHeight: rowDetailHeight2, rowHeight: rowHeight2 } = computedRowSizeCacheForDetails.getSize(rowIndex);
16826
- return /* @__PURE__ */ React53.createElement(
16789
+ return /* @__PURE__ */ React52.createElement(
16827
16790
  InfiniteTableDetailRow,
16828
16791
  {
16829
16792
  rowInfo,
@@ -16852,7 +16815,7 @@ function useCellRendering(param) {
16852
16815
  }
16853
16816
 
16854
16817
  // src/components/InfiniteTable/hooks/useComputed.ts
16855
- import { useEffect as useEffect28, useState as useState17 } from "react";
16818
+ import { useEffect as useEffect25, useState as useState17 } from "react";
16856
16819
 
16857
16820
  // src/components/InfiniteTable/utils/MultiCellSelector.ts
16858
16821
  var MultiCellSelector = class {
@@ -17043,129 +17006,6 @@ var MultiRowSelector = class {
17043
17006
  }
17044
17007
  };
17045
17008
 
17046
- // src/components/InfiniteTable/hooks/useColumnGroups.ts
17047
- import { useEffect as useEffect24 } from "react";
17048
-
17049
- // src/components/hooks/useInterceptedMap.ts
17050
- import { useEffect as useEffect23 } from "react";
17051
- function interceptMap(map2, fns) {
17052
- const { set, delete: deleteKey, clear } = map2;
17053
- if (fns.set) {
17054
- map2.set = (key, value) => {
17055
- set.call(map2, key, value);
17056
- fns.set(key, value);
17057
- return map2;
17058
- };
17059
- }
17060
- if (fns.delete) {
17061
- map2.delete = (key) => {
17062
- const removed = deleteKey.call(map2, key);
17063
- fns.delete(key);
17064
- return removed;
17065
- };
17066
- }
17067
- if (fns.clear || fns.beforeClear) {
17068
- map2.clear = () => {
17069
- if (fns.beforeClear) {
17070
- fns.beforeClear(map2);
17071
- }
17072
- const result = clear.call(map2);
17073
- if (fns.clear) {
17074
- fns.clear();
17075
- }
17076
- return result;
17077
- };
17078
- }
17079
- return () => {
17080
- if (set) {
17081
- map2.set = set;
17082
- }
17083
- if (deleteKey) {
17084
- map2.delete = deleteKey;
17085
- }
17086
- if (clear) {
17087
- map2.clear = clear;
17088
- }
17089
- };
17090
- }
17091
-
17092
- // src/components/InfiniteTable/state/computeColumnGroupsDepths.ts
17093
- function computeColumnGroupsDepths(columnGroups) {
17094
- const map2 = /* @__PURE__ */ new Map();
17095
- columnGroups.forEach((colGroup, colGroupId) => {
17096
- let parentGroupId = colGroup.columnGroup;
17097
- let depth = 0;
17098
- while (parentGroupId) {
17099
- const parent = columnGroups.get(parentGroupId);
17100
- if (!parent) {
17101
- if (false) {
17102
- console.warn(`Cannot find column group ${parentGroupId}`);
17103
- }
17104
- break;
17105
- }
17106
- depth++;
17107
- parentGroupId = parent.columnGroup;
17108
- }
17109
- map2.set(colGroupId, depth);
17110
- });
17111
- return map2;
17112
- }
17113
-
17114
- // src/components/InfiniteTable/hooks/useColumnGroups.ts
17115
- function useColumnGroups() {
17116
- const {
17117
- componentState: {
17118
- computedColumnGroups,
17119
- collapsedColumnGroups
17120
- },
17121
- componentActions,
17122
- getComponentState
17123
- } = useComponentState();
17124
- useEffect24(() => {
17125
- const recompute = () => {
17126
- componentActions.columnGroupsDepthsMap = computeColumnGroupsDepths(computedColumnGroups);
17127
- };
17128
- const update = rafFn(recompute);
17129
- return interceptMap(computedColumnGroups, {
17130
- clear: update,
17131
- delete: update,
17132
- set: update
17133
- });
17134
- }, [computedColumnGroups]);
17135
- useEffect24(() => {
17136
- return interceptMap(collapsedColumnGroups, {
17137
- set: (key, visibleCol) => {
17138
- const colIds = key.slice(1);
17139
- const columnVisibility = __spreadValues({}, getComponentState().columnVisibility);
17140
- colIds.forEach((colId) => {
17141
- columnVisibility[colId] = false;
17142
- });
17143
- delete columnVisibility[visibleCol];
17144
- componentActions.columnVisibility = columnVisibility;
17145
- },
17146
- beforeClear: (currentCollapsedGroups) => {
17147
- const columnVisibility = __spreadValues({}, getComponentState().columnVisibility);
17148
- const keys = [...currentCollapsedGroups.keys()];
17149
- keys.forEach((key) => {
17150
- const colIds = key.slice(1);
17151
- colIds.forEach((colId) => {
17152
- delete columnVisibility[colId];
17153
- });
17154
- });
17155
- componentActions.columnVisibility = columnVisibility;
17156
- },
17157
- delete: (key) => {
17158
- const columnVisibility = __spreadValues({}, getComponentState().columnVisibility);
17159
- const colIds = key.slice(1);
17160
- colIds.forEach((colId) => {
17161
- delete columnVisibility[colId];
17162
- });
17163
- componentActions.columnVisibility = columnVisibility;
17164
- }
17165
- });
17166
- }, [collapsedColumnGroups]);
17167
- }
17168
-
17169
17009
  // src/components/InfiniteTable/hooks/useColumnRowspan.ts
17170
17010
  import { useMemo as useMemo10 } from "react";
17171
17011
  function useColumnRowspan(computedVisibleColumns) {
@@ -17215,7 +17055,7 @@ function useColumnSizeFn(columns) {
17215
17055
  }
17216
17056
 
17217
17057
  // src/components/InfiniteTable/hooks/useColumnsWhen.ts
17218
- import { useEffect as useEffect25, useLayoutEffect as useLayoutEffect11, useMemo as useMemo11 } from "react";
17058
+ import { useEffect as useEffect23, useLayoutEffect as useLayoutEffect11, useMemo as useMemo11 } from "react";
17219
17059
 
17220
17060
  // src/components/InfiniteTable/state/getInitialState.ts
17221
17061
  import { createRef } from "react";
@@ -17255,35 +17095,40 @@ var ScrollListener = class {
17255
17095
  }
17256
17096
  };
17257
17097
 
17258
- // src/components/InfiniteTable/utils/toMap.ts
17259
- function toMap(mapOrObject, weakMapCache) {
17260
- if (!mapOrObject) {
17261
- return /* @__PURE__ */ new Map();
17262
- }
17263
- if (mapOrObject instanceof Map) {
17264
- return mapOrObject;
17265
- }
17266
- if (weakMapCache && weakMapCache.has(mapOrObject)) {
17267
- return weakMapCache.get(mapOrObject);
17268
- }
17269
- const result = new Map(Object.entries(mapOrObject));
17270
- if (weakMapCache) {
17271
- weakMapCache.set(mapOrObject, result);
17272
- }
17273
- return result;
17274
- }
17275
-
17276
- // src/components/InfiniteTable/state/rowDetailRendererFromComponent.tsx
17277
- import * as React54 from "react";
17278
- function getRowDetailRendererFromComponent(RowDetail) {
17279
- return (rowInfo, cache) => {
17280
- return /* @__PURE__ */ React54.createElement(RowDetail, { key: rowInfo.id, rowInfo, cache });
17281
- };
17282
- }
17283
-
17284
- // src/components/InfiniteTable/state/getInitialState.ts
17285
- function createRenderer2(brain) {
17286
- const renderer = new ReactHeadlessTableRenderer(brain);
17098
+ // src/components/InfiniteTable/state/computeColumnGroupsDepths.ts
17099
+ function computeColumnGroupsDepths(columnGroups) {
17100
+ const map2 = /* @__PURE__ */ new Map();
17101
+ Object.keys(columnGroups).forEach((colGroupId) => {
17102
+ const colGroup = columnGroups[colGroupId];
17103
+ let parentGroupId = colGroup.columnGroup;
17104
+ let depth = 0;
17105
+ while (parentGroupId) {
17106
+ const parent = columnGroups[parentGroupId];
17107
+ if (!parent) {
17108
+ if (false) {
17109
+ console.warn(`Cannot find column group ${parentGroupId}`);
17110
+ }
17111
+ break;
17112
+ }
17113
+ depth++;
17114
+ parentGroupId = parent.columnGroup;
17115
+ }
17116
+ map2.set(colGroupId, depth);
17117
+ });
17118
+ return map2;
17119
+ }
17120
+
17121
+ // src/components/InfiniteTable/state/rowDetailRendererFromComponent.tsx
17122
+ import * as React53 from "react";
17123
+ function getRowDetailRendererFromComponent(RowDetail) {
17124
+ return (rowInfo, cache) => {
17125
+ return /* @__PURE__ */ React53.createElement(RowDetail, { key: rowInfo.id, rowInfo, cache });
17126
+ };
17127
+ }
17128
+
17129
+ // src/components/InfiniteTable/state/getInitialState.ts
17130
+ function createRenderer2(brain) {
17131
+ const renderer = new ReactHeadlessTableRenderer(brain);
17287
17132
  const onRenderUpdater = buildSubscriptionCallback();
17288
17133
  brain.onDestroy(() => {
17289
17134
  renderer.destroy();
@@ -17301,7 +17146,7 @@ function getCellSelector(cellPosition) {
17301
17146
  function initSetupState2({
17302
17147
  debugId
17303
17148
  }) {
17304
- const columnsGeneratedForGrouping = /* @__PURE__ */ new Map();
17149
+ const columnsGeneratedForGrouping = {};
17305
17150
  const brain = new MatrixBrain(debugId);
17306
17151
  const headerBrain = new MatrixBrain("header");
17307
17152
  brain.onScroll((scrollPosition) => {
@@ -17326,6 +17171,8 @@ function initSetupState2({
17326
17171
  renderer,
17327
17172
  onRenderUpdater,
17328
17173
  propsCache: /* @__PURE__ */ new Map([]),
17174
+ lastRowToCollapseRef: { current: null },
17175
+ lastRowToExpandRef: { current: null },
17329
17176
  cellContextMenuVisibleFor: null,
17330
17177
  contextMenuVisibleFor: null,
17331
17178
  columnMenuVisibleForColumnId: null,
@@ -17377,7 +17224,7 @@ function initSetupState2({
17377
17224
  editingCell: null
17378
17225
  };
17379
17226
  }
17380
- var forwardProps4 = (setupState) => {
17227
+ var forwardProps4 = (_setupState) => {
17381
17228
  return {
17382
17229
  debugId: 1,
17383
17230
  scrollTopKey: 1,
@@ -17463,7 +17310,7 @@ var forwardProps4 = (setupState) => {
17463
17310
  rowHeight: (rowHeight) => typeof rowHeight === "number" || typeof rowHeight === "function" ? rowHeight : 0,
17464
17311
  rowDetailHeight: (rowDetailHeight) => typeof rowDetailHeight === "number" || typeof rowDetailHeight === "function" ? rowDetailHeight : 300,
17465
17312
  columnHeaderHeight: (columnHeaderHeight) => typeof columnHeaderHeight === "number" ? columnHeaderHeight : 30,
17466
- columns: (columns) => toMap(columns, setupState.propsCache.get("columns")),
17313
+ columns: 1,
17467
17314
  columnVisibility: (columnVisibility) => columnVisibility != null ? columnVisibility : {},
17468
17315
  // TODO check if columnPinning works when the value for a pinned col is `true` instead of `"start"`
17469
17316
  columnSizing: (columnSizing) => columnSizing || {},
@@ -17477,7 +17324,7 @@ var forwardProps4 = (setupState) => {
17477
17324
  onEditPersistSuccess: 1,
17478
17325
  multiSortBehavior: (multiSortBehavior) => multiSortBehavior != null ? multiSortBehavior : "replace",
17479
17326
  collapsedColumnGroups: (collapsedColumnGroups) => collapsedColumnGroups != null ? collapsedColumnGroups : /* @__PURE__ */ new Map(),
17480
- columnGroups: (columnGroups) => toMap(columnGroups, setupState.propsCache.get("columnGroups"))
17327
+ columnGroups: 1
17481
17328
  };
17482
17329
  };
17483
17330
  function getGroupRenderStrategy(options) {
@@ -17526,6 +17373,21 @@ function getGroupByMap(groupBy) {
17526
17373
  }, /* @__PURE__ */ new Map());
17527
17374
  }
17528
17375
  var weakMap2 = /* @__PURE__ */ new WeakMap();
17376
+ function getMappedCallbacks2() {
17377
+ return {
17378
+ rowDetailState: (rowDetailState, state) => {
17379
+ return {
17380
+ callbackParams: [
17381
+ rowDetailState,
17382
+ {
17383
+ expandRow: state.lastRowToExpandRef.current,
17384
+ collapseRow: state.lastRowToCollapseRef.current
17385
+ }
17386
+ ]
17387
+ };
17388
+ }
17389
+ };
17390
+ }
17529
17391
  var mapPropsToState = (params) => {
17530
17392
  var _a, _b, _c, _d, _e;
17531
17393
  const { props, state, oldState, parentState } = params;
@@ -17594,26 +17456,22 @@ var mapPropsToState = (params) => {
17594
17456
  };
17595
17457
 
17596
17458
  // src/components/InfiniteTable/state/getColumnVisibilityForHideEmptyGroupColumns.ts
17597
- function getGroupColumnsMapForComputedColumns(computedColumns, groupByMap) {
17598
- const computedGroupColumns = /* @__PURE__ */ new Map();
17599
- computedColumns.forEach(
17600
- (column, colId) => {
17601
- const col = column;
17602
- if (!col.groupByForColumn || Array.isArray(col.groupByForColumn)) {
17603
- return;
17604
- }
17605
- const { groupByForColumn } = col;
17606
- const field = groupByForColumn.field || groupByForColumn.groupField;
17607
- const groupInfoForColumn = field ? groupByMap.get(field) : null;
17608
- if (!groupInfoForColumn) {
17609
- return;
17610
- }
17611
- computedGroupColumns.set(
17612
- colId,
17613
- column
17614
- );
17459
+ function getGroupColumnsForComputedColumns(computedColumns, groupByMap) {
17460
+ const computedGroupColumns = {};
17461
+ Object.keys(computedColumns).forEach((colId) => {
17462
+ const column = computedColumns[colId];
17463
+ const col = column;
17464
+ if (!col.groupByForColumn || Array.isArray(col.groupByForColumn)) {
17465
+ return;
17615
17466
  }
17616
- );
17467
+ const { groupByForColumn } = col;
17468
+ const field = groupByForColumn.field || groupByForColumn.groupField;
17469
+ const groupInfoForColumn = field ? groupByMap.get(field) : null;
17470
+ if (!groupInfoForColumn) {
17471
+ return;
17472
+ }
17473
+ computedGroupColumns[colId] = column;
17474
+ });
17617
17475
  return computedGroupColumns;
17618
17476
  }
17619
17477
  function getColumnVisibilityForHideEmptyGroupColumns(params) {
@@ -17627,13 +17485,11 @@ function getColumnVisibilityForHideEmptyGroupColumns(params) {
17627
17485
  } = params;
17628
17486
  const columnVisibility = __spreadValues({}, params.columnVisibility);
17629
17487
  if (!hideEmptyGroupColumns) {
17630
- computedGroupColumns.forEach(
17631
- (_column, colId) => {
17632
- if (columnVisibility[colId] === false) {
17633
- delete columnVisibility[colId];
17634
- }
17488
+ Object.keys(computedGroupColumns).forEach((colId) => {
17489
+ if (columnVisibility[colId] === false) {
17490
+ delete columnVisibility[colId];
17635
17491
  }
17636
- );
17492
+ });
17637
17493
  return columnVisibility;
17638
17494
  }
17639
17495
  if (!groupRowsIndexesInDataArray || !groupRowsIndexesInDataArray.length) {
@@ -17656,30 +17512,29 @@ function getColumnVisibilityForHideEmptyGroupColumns(params) {
17656
17512
  break;
17657
17513
  }
17658
17514
  }
17659
- computedGroupColumns.forEach(
17660
- (column, colId) => {
17661
- const { groupByForColumn } = column;
17662
- if (Array.isArray(groupByForColumn)) {
17663
- return;
17664
- }
17665
- const field = groupByForColumn.field || groupByForColumn.groupField;
17666
- if (!field) {
17667
- return;
17515
+ Object.keys(computedGroupColumns).forEach((colId) => {
17516
+ const column = computedGroupColumns[colId];
17517
+ const { groupByForColumn } = column;
17518
+ if (Array.isArray(groupByForColumn)) {
17519
+ return;
17520
+ }
17521
+ const field = groupByForColumn.field || groupByForColumn.groupField;
17522
+ if (!field) {
17523
+ return;
17524
+ }
17525
+ const groupInfoForColumn = groupByMap.get(field);
17526
+ const index = groupInfoForColumn.groupIndex;
17527
+ const shouldBeHidden = index > expandedGroupsLevel && hideEmptyGroupColumns;
17528
+ if (shouldBeHidden) {
17529
+ if (columnVisibility[colId] !== false) {
17530
+ columnVisibility[colId] = false;
17668
17531
  }
17669
- const groupInfoForColumn = groupByMap.get(field);
17670
- const index = groupInfoForColumn.groupIndex;
17671
- const shouldBeHidden = index > expandedGroupsLevel && hideEmptyGroupColumns;
17672
- if (shouldBeHidden) {
17673
- if (columnVisibility[colId] !== false) {
17674
- columnVisibility[colId] = false;
17675
- }
17676
- } else {
17677
- if (columnVisibility.hasOwnProperty(colId)) {
17678
- delete columnVisibility[colId];
17679
- }
17532
+ } else {
17533
+ if (columnVisibility.hasOwnProperty(colId)) {
17534
+ delete columnVisibility[colId];
17680
17535
  }
17681
17536
  }
17682
- );
17537
+ });
17683
17538
  return columnVisibility;
17684
17539
  }
17685
17540
 
@@ -17745,13 +17600,13 @@ function useColumnsWhen() {
17745
17600
  pivotGrandTotalColumnPosition
17746
17601
  }
17747
17602
  } = useComponentState();
17748
- useEffect25(() => {
17603
+ useEffect23(() => {
17749
17604
  dataSourceActions.generateGroupRows = groupRenderStrategy !== "inline";
17750
17605
  }, [groupRenderStrategy]);
17751
- useEffect25(() => {
17606
+ useEffect23(() => {
17752
17607
  dataSourceActions.pivotTotalColumnPosition = pivotTotalColumnPosition;
17753
17608
  }, [pivotTotalColumnPosition]);
17754
- useEffect25(() => {
17609
+ useEffect23(() => {
17755
17610
  if (pivotGrandTotalColumnPosition != void 0) {
17756
17611
  dataSourceActions.pivotGrandTotalColumnPosition = pivotGrandTotalColumnPosition;
17757
17612
  }
@@ -17769,12 +17624,13 @@ function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
17769
17624
  componentState: { columns, groupRenderStrategy }
17770
17625
  } = useComponentState();
17771
17626
  function computeColumnsWhenInlineGroupRenderStrategy(columns2, groupByMap2, groupRenderStrategy2, toggleGroupRow2) {
17772
- const computedColumns = /* @__PURE__ */ new Map();
17627
+ const computedColumns = {};
17773
17628
  if (groupRenderStrategy2 !== "inline") {
17774
17629
  return;
17775
17630
  }
17776
- columns2.forEach((column, id) => {
17631
+ Object.keys(columns2).forEach((id) => {
17777
17632
  var _a, _b;
17633
+ const column = columns2[id];
17778
17634
  let base = {};
17779
17635
  const groupByForColumn = groupByMap2.get(column.field);
17780
17636
  if (groupByForColumn && groupRenderStrategy2 === "inline") {
@@ -17828,11 +17684,11 @@ function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
17828
17684
  };
17829
17685
  }
17830
17686
  const clone = __spreadValues(__spreadValues({}, base), column);
17831
- computedColumns.set(id, clone);
17687
+ computedColumns[id] = clone;
17832
17688
  });
17833
- return computedColumns.size === 0 ? void 0 : computedColumns;
17689
+ return Object.keys(computedColumns).length === 0 ? void 0 : computedColumns;
17834
17690
  }
17835
- useEffect25(() => {
17691
+ useEffect23(() => {
17836
17692
  const update = () => {
17837
17693
  componentActions.columnsWhenInlineGroupRenderStrategy = computeColumnsWhenInlineGroupRenderStrategy(
17838
17694
  columns,
@@ -17842,11 +17698,6 @@ function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
17842
17698
  );
17843
17699
  };
17844
17700
  update();
17845
- return interceptMap(columns, {
17846
- set: update,
17847
- delete: update,
17848
- clear: update
17849
- });
17850
17701
  }, [columns, groupByMap, groupRenderStrategy, toggleGroupRow]);
17851
17702
  }
17852
17703
  function useColumnsWhenGrouping() {
@@ -17868,7 +17719,7 @@ function useColumnsWhenGrouping() {
17868
17719
  getComponentState
17869
17720
  } = useComponentState();
17870
17721
  const toggleGroupRow = useToggleGroupRow();
17871
- useEffect25(() => {
17722
+ useEffect23(() => {
17872
17723
  const update = () => {
17873
17724
  const { columns: columnsWhenGrouping, groupColumnIds } = getColumnsWhenGrouping({
17874
17725
  columns,
@@ -17903,11 +17754,6 @@ function useColumnsWhenGrouping() {
17903
17754
  }
17904
17755
  };
17905
17756
  update();
17906
- return interceptMap(columns, {
17907
- set: update,
17908
- delete: update,
17909
- clear: update
17910
- });
17911
17757
  }, [
17912
17758
  columns,
17913
17759
  groupBy,
@@ -17949,7 +17795,7 @@ function useHideColumns(groupByMap) {
17949
17795
  return;
17950
17796
  }
17951
17797
  const currentState = getComponentState();
17952
- const computedGroupColumns = getGroupColumnsMapForComputedColumns(
17798
+ const computedGroupColumns = getGroupColumnsForComputedColumns(
17953
17799
  computedColumns,
17954
17800
  groupByMap
17955
17801
  );
@@ -17977,7 +17823,7 @@ function useHideColumns(groupByMap) {
17977
17823
  hideEmptyGroupColumns ? groupRowsIndexesInDataArray : null,
17978
17824
  hideEmptyGroupColumns
17979
17825
  ]);
17980
- useEffect25(() => {
17826
+ useEffect23(() => {
17981
17827
  const isGrouped = groupBy.length > 0;
17982
17828
  const currentState = getComponentState();
17983
17829
  const {
@@ -17990,7 +17836,8 @@ function useHideColumns(groupByMap) {
17990
17836
  let updatedVisibilityWhenGrouping = false;
17991
17837
  let newlyHiddenColumns = /* @__PURE__ */ new Set();
17992
17838
  let newlyDisplayedColumns = /* @__PURE__ */ new Set();
17993
- computedColumns.forEach((col, id) => {
17839
+ Object.keys(computedColumns).forEach((id) => {
17840
+ const col = computedColumns[id];
17994
17841
  if (col.defaultHiddenWhenGroupedBy || hideColumnWhenGrouped2 != null) {
17995
17842
  const hideWhenGrouped = col.defaultHiddenWhenGroupedBy === "*" && isGrouped || (col.defaultHiddenWhenGroupedBy === true || hideColumnWhenGrouped2) && col.field && groupByMap.get(col.field) || typeof col.defaultHiddenWhenGroupedBy === "string" && groupByMap.get(col.defaultHiddenWhenGroupedBy) || typeof col.defaultHiddenWhenGroupedBy === "object" && Object.keys(col.defaultHiddenWhenGroupedBy).reduce(
17996
17843
  (acc, field) => acc || groupByMap.has(field),
@@ -18049,7 +17896,7 @@ function getColumnsWhenGrouping(params) {
18049
17896
  if (groupRenderStrategy === "inline") {
18050
17897
  return { columns: void 0, groupColumnIds: [] };
18051
17898
  }
18052
- const computedColumns = /* @__PURE__ */ new Map();
17899
+ const computedColumns = {};
18053
17900
  const groupColumnIds = [];
18054
17901
  if (groupRenderStrategy === "multi-column") {
18055
17902
  groupBy.forEach((groupByForColumn, groupIndexForColumn, arr) => {
@@ -18068,7 +17915,7 @@ function getColumnsWhenGrouping(params) {
18068
17915
  );
18069
17916
  const groupColumnId = generatedGroupColumn.id || `group-by-${groupByForColumn.field || groupByForColumn.groupField}`;
18070
17917
  groupColumnIds.push(groupColumnId);
18071
- computedColumns.set(groupColumnId, generatedGroupColumn);
17918
+ computedColumns[groupColumnId] = generatedGroupColumn;
18072
17919
  });
18073
17920
  } else if (groupRenderStrategy === "single-column" && groupBy.length) {
18074
17921
  const singleGroupColumn = getSingleGroupColumn(
@@ -18084,17 +17931,19 @@ function getColumnsWhenGrouping(params) {
18084
17931
  );
18085
17932
  const groupColumnId = singleGroupColumn.id || "group-by";
18086
17933
  groupColumnIds.push(groupColumnId);
18087
- computedColumns.set(groupColumnId, singleGroupColumn);
17934
+ computedColumns[groupColumnId] = singleGroupColumn;
18088
17935
  }
18089
17936
  if (pivotColumns) {
18090
17937
  const columnsByField = {};
18091
- columns.forEach((col) => {
17938
+ Object.keys(columns).forEach((colId) => {
17939
+ const col = columns[colId];
18092
17940
  if (col.field) {
18093
17941
  columnsByField[col.field] = col;
18094
17942
  }
18095
17943
  });
18096
- pivotColumns.forEach((col, key) => {
17944
+ Object.keys(pivotColumns).forEach((key) => {
18097
17945
  var _a, _b;
17946
+ const col = pivotColumns[key];
18098
17947
  const isSimpleTotalColumn = col.pivotTotalColumn && col.columnGroup;
18099
17948
  const isGrandTotalColumn = col.pivotTotalColumn && !col.columnGroup;
18100
17949
  if (isSimpleTotalColumn && pivotTotalColumnPosition === false) {
@@ -18116,7 +17965,7 @@ function getColumnsWhenGrouping(params) {
18116
17965
  }
18117
17966
  }
18118
17967
  if (column.inheritFromColumn !== false) {
18119
- const colToInheritFrom = typeof column.inheritFromColumn === "string" ? columns.get(column.inheritFromColumn) : ((_a = column.pivotAggregator) == null ? void 0 : _a.field) ? columnsByField[(_b = column.pivotAggregator) == null ? void 0 : _b.field] : void 0;
17968
+ const colToInheritFrom = typeof column.inheritFromColumn === "string" ? columns[column.inheritFromColumn] : ((_a = column.pivotAggregator) == null ? void 0 : _a.field) ? columnsByField[(_b = column.pivotAggregator) == null ? void 0 : _b.field] : void 0;
18120
17969
  column = __spreadValues(__spreadValues({}, colToInheritFrom), column);
18121
17970
  }
18122
17971
  if (!column.render && column.renderValue) {
@@ -18124,38 +17973,22 @@ function getColumnsWhenGrouping(params) {
18124
17973
  return column.renderValue(renderOptions);
18125
17974
  };
18126
17975
  }
18127
- computedColumns.set(key, column);
17976
+ computedColumns[key] = column;
18128
17977
  });
18129
17978
  } else {
18130
- columns.forEach((col, colId) => {
18131
- computedColumns.set(colId, col);
17979
+ Object.keys(columns).forEach((colId) => {
17980
+ const col = columns[colId];
17981
+ computedColumns[colId] = col;
18132
17982
  });
18133
17983
  }
18134
17984
  return {
18135
- columns: computedColumns.size ? computedColumns : void 0,
17985
+ columns: Object.keys(computedColumns).length ? computedColumns : void 0,
18136
17986
  groupColumnIds
18137
17987
  };
18138
17988
  }
18139
17989
 
18140
17990
  // src/components/InfiniteTable/hooks/useComputedColumns.ts
18141
17991
  import { useMemo as useMemo12 } from "react";
18142
-
18143
- // src/components/InfiniteTable/hooks/useRerenderOnKeyChange.ts
18144
- import { useEffect as useEffect26 } from "react";
18145
- var useRerenderOnKeyChange = (map2) => {
18146
- const [renderId, rerender] = useRerender();
18147
- useEffect26(() => {
18148
- const update = rafFn(rerender);
18149
- return interceptMap(map2, {
18150
- set: update,
18151
- clear: update,
18152
- delete: update
18153
- });
18154
- }, [map2]);
18155
- return renderId;
18156
- };
18157
-
18158
- // src/components/InfiniteTable/hooks/useComputedColumns.ts
18159
17992
  var useComputedColumns = ({
18160
17993
  columns,
18161
17994
  bodySize,
@@ -18187,7 +18020,7 @@ var useComputedColumns = ({
18187
18020
  columnVisibilityAssumeVisible,
18188
18021
  columnSizing
18189
18022
  }) => {
18190
- const columnsRenderId = useRerenderOnKeyChange(columns);
18023
+ const columnsRenderId = 1;
18191
18024
  const {
18192
18025
  computedRemainingSpace,
18193
18026
  computedColumnOrder,
@@ -18394,7 +18227,7 @@ function useComputedRowHeight(param) {
18394
18227
  }
18395
18228
 
18396
18229
  // src/components/InfiniteTable/hooks/useScrollbars.ts
18397
- import { useState as useState16, useEffect as useEffect27, useLayoutEffect as useLayoutEffect12 } from "react";
18230
+ import { useState as useState16, useEffect as useEffect24, useLayoutEffect as useLayoutEffect12 } from "react";
18398
18231
  var INITIAL_SCROLLBARS = {
18399
18232
  vertical: false,
18400
18233
  horizontal: false
@@ -18403,7 +18236,7 @@ function useScrollbars(brain) {
18403
18236
  const { getComponentState: getInfiniteTableState } = useComponentState();
18404
18237
  const { getState: getDataSourceState } = useDataSourceContextValue();
18405
18238
  const [scrollbars, setScrollbars] = useState16(INITIAL_SCROLLBARS);
18406
- useEffect27(() => {
18239
+ useEffect24(() => {
18407
18240
  return brain.onRenderCountChange(() => {
18408
18241
  const { scrollTopMax, scrollLeftMax } = brain;
18409
18242
  setScrollbars({
@@ -18471,11 +18304,10 @@ function useComputed() {
18471
18304
  }
18472
18305
  );
18473
18306
  });
18474
- useEffect28(() => {
18307
+ useEffect25(() => {
18475
18308
  dataSourceActions.showSeparatePivotColumnForSingleAggregation = showSeparatePivotColumnForSingleAggregation;
18476
18309
  }, [showSeparatePivotColumnForSingleAggregation]);
18477
18310
  const { multiSort, filterValue, filterTypes } = dataSourceState;
18478
- useColumnGroups();
18479
18311
  const { toggleGroupRow } = useColumnsWhen();
18480
18312
  const columns = componentState.computedColumns;
18481
18313
  const {
@@ -18773,7 +18605,7 @@ var useLicense = (licenseKey = "") => {
18773
18605
  }
18774
18606
  let valid2 = isValidLicense(licenseKey, {
18775
18607
  publishedAt: 1624970570587,
18776
- version: "3.3.4"
18608
+ version: "4.1.0"
18777
18609
  });
18778
18610
  if (!licenseKey && !valid2 && isInsidePlayground) {
18779
18611
  return true;
@@ -18784,18 +18616,18 @@ var useLicense = (licenseKey = "") => {
18784
18616
  };
18785
18617
 
18786
18618
  // src/components/InfiniteTable/hooks/useScrollToActiveCell.ts
18787
- import { useRef as useRef25, useEffect as useEffect29 } from "react";
18619
+ import { useRef as useRef25, useEffect as useEffect26 } from "react";
18788
18620
  var RETRIES = 10;
18789
18621
  function useScrollToActiveCell(activeCellIndex, dataCount, imperativeApi) {
18790
18622
  const didScrollRef = useRef25(false);
18791
18623
  const rafId = useRef25(null);
18792
- useEffect29(() => {
18624
+ useEffect26(() => {
18793
18625
  if (activeCellIndex != null) {
18794
18626
  didScrollRef.current = false;
18795
18627
  cancelRaf(rafId.current);
18796
18628
  }
18797
18629
  }, [activeCellIndex]);
18798
- useEffect29(() => {
18630
+ useEffect26(() => {
18799
18631
  if (activeCellIndex != null && !didScrollRef.current) {
18800
18632
  let tryScroll2 = function(times = 0) {
18801
18633
  times++;
@@ -18823,18 +18655,18 @@ function useScrollToActiveCell(activeCellIndex, dataCount, imperativeApi) {
18823
18655
  }
18824
18656
 
18825
18657
  // src/components/InfiniteTable/hooks/useScrollToActiveRow.ts
18826
- import { useRef as useRef26, useEffect as useEffect30 } from "react";
18658
+ import { useRef as useRef26, useEffect as useEffect27 } from "react";
18827
18659
  var RETRIES2 = 10;
18828
18660
  function useScrollToActiveRow(activeRowIndex, dataCount, imperativeApi) {
18829
18661
  const didScrollRef = useRef26(false);
18830
18662
  const rafId = useRef26(null);
18831
- useEffect30(() => {
18663
+ useEffect27(() => {
18832
18664
  if (activeRowIndex != null) {
18833
18665
  didScrollRef.current = false;
18834
18666
  cancelAnimationFrame(rafId.current);
18835
18667
  }
18836
18668
  }, [activeRowIndex]);
18837
- useEffect30(() => {
18669
+ useEffect27(() => {
18838
18670
  if (activeRowIndex != null && !didScrollRef.current) {
18839
18671
  let tryScroll2 = function(times = 0) {
18840
18672
  times++;
@@ -18863,7 +18695,7 @@ function useScrollToActiveRow(activeRowIndex, dataCount, imperativeApi) {
18863
18695
  var toCSSVarName = (value) => `--infinite-${value}`;
18864
18696
 
18865
18697
  // src/components/InfiniteTable/eventHandlers/index.ts
18866
- import { useCallback as useCallback22, useMemo as useMemo15, useEffect as useEffect31 } from "react";
18698
+ import { useCallback as useCallback22, useMemo as useMemo15, useEffect as useEffect28 } from "react";
18867
18699
 
18868
18700
  // src/components/InfiniteTable/eventHandlers/onCellClick.ts
18869
18701
  function onCellClick(context, event) {
@@ -19754,7 +19586,7 @@ function useEventHandlersContext() {
19754
19586
  }
19755
19587
  function handleDOMEvents() {
19756
19588
  const context = useEventHandlersContext();
19757
- useEffect31(() => {
19589
+ useEffect28(() => {
19758
19590
  const removeOnKeyDown = context.getState().keyDown.onChange((event) => {
19759
19591
  onKeyDown(context, event);
19760
19592
  });
@@ -19809,13 +19641,13 @@ function useDOMEventHandlers() {
19809
19641
  }
19810
19642
 
19811
19643
  // src/components/InfiniteTable/hooks/useColumnMenu.ts
19812
- import { useEffect as useEffect35 } from "react";
19644
+ import { useEffect as useEffect32 } from "react";
19813
19645
 
19814
19646
  // src/components/hooks/useOverlay/index.tsx
19815
- import * as React55 from "react";
19647
+ import * as React54 from "react";
19816
19648
  import {
19817
19649
  useCallback as useCallback23,
19818
- useEffect as useEffect33,
19650
+ useEffect as useEffect30,
19819
19651
  useLayoutEffect as useLayoutEffect13,
19820
19652
  useState as useState18
19821
19653
  } from "react";
@@ -20203,18 +20035,18 @@ function retrieveElement(elementGetter) {
20203
20035
  });
20204
20036
  }
20205
20037
  function DefaultOverlayPortal(props) {
20206
- return /* @__PURE__ */ React55.createElement("div", { style: { position: "fixed", top: 0, left: 0 } }, props.children);
20038
+ return /* @__PURE__ */ React54.createElement("div", { style: { position: "fixed", top: 0, left: 0 } }, props.children);
20207
20039
  }
20208
20040
  function OverlayContent(props) {
20209
- const nodeRef = React55.useRef(null);
20210
- useEffect33(() => {
20041
+ const nodeRef = React54.useRef(null);
20042
+ useEffect30(() => {
20211
20043
  return props.realign.onChange((handle) => {
20212
20044
  if (nodeRef.current && handle) {
20213
20045
  alignOverlayNode(nodeRef.current, handle);
20214
20046
  }
20215
20047
  });
20216
20048
  }, [props.realign]);
20217
- return /* @__PURE__ */ React55.createElement(
20049
+ return /* @__PURE__ */ React54.createElement(
20218
20050
  "div",
20219
20051
  {
20220
20052
  style: { position: "absolute", top: 0, left: 0 },
@@ -20285,22 +20117,22 @@ function useOverlayPortal(content, portalContainer) {
20285
20117
  }, [portalContainer]);
20286
20118
  return portalContainer ? container ? createPortal2(content, container) : (
20287
20119
  // we're probably still fetching the container
20288
- /* @__PURE__ */ React55.createElement(React55.Fragment, null)
20289
- ) : portalContainer === null || portalContainer === false ? content : /* @__PURE__ */ React55.createElement(DefaultOverlayPortal, null, content);
20120
+ /* @__PURE__ */ React54.createElement(React54.Fragment, null)
20121
+ ) : portalContainer === null || portalContainer === false ? content : /* @__PURE__ */ React54.createElement(DefaultOverlayPortal, null, content);
20290
20122
  }
20291
20123
  function getIdForReactOnlyChild(children) {
20292
- if (React55.Children.count(children) === 1) {
20293
- const child = React55.Children.only(children);
20294
- if (React55.isValidElement(child)) {
20124
+ if (React54.Children.count(children) === 1) {
20125
+ const child = React54.Children.only(children);
20126
+ if (React54.isValidElement(child)) {
20295
20127
  return child.props.id || child.key;
20296
20128
  }
20297
20129
  }
20298
20130
  return null;
20299
20131
  }
20300
20132
  function injectPortalContainerAndConstrainInMenuChild(children, portalContainer, constrainTo) {
20301
- if (React55.Children.count(children) === 1) {
20302
- const child = React55.Children.only(children);
20303
- if (React55.isValidElement(child) && child.type[propToIdentifyMenu]) {
20133
+ if (React54.Children.count(children) === 1) {
20134
+ const child = React54.Children.only(children);
20135
+ if (React54.isValidElement(child) && child.type[propToIdentifyMenu]) {
20304
20136
  const newProps = {};
20305
20137
  if (child.props.portalContainer === void 0) {
20306
20138
  newProps.portalContainer = portalContainer;
@@ -20308,7 +20140,7 @@ function injectPortalContainerAndConstrainInMenuChild(children, portalContainer,
20308
20140
  if (child.props.constrainTo === void 0) {
20309
20141
  newProps.constrainTo = constrainTo;
20310
20142
  }
20311
- return React55.cloneElement(child, newProps);
20143
+ return React54.cloneElement(child, newProps);
20312
20144
  }
20313
20145
  }
20314
20146
  return children;
@@ -20324,7 +20156,7 @@ function useOverlay(params) {
20324
20156
  const contentForPortal = [];
20325
20157
  for (const [_2, handle] of handles) {
20326
20158
  contentForPortal.push(
20327
- /* @__PURE__ */ React55.createElement(OverlayContent, __spreadProps(__spreadValues({}, handle), { key: handle.key }))
20159
+ /* @__PURE__ */ React54.createElement(OverlayContent, __spreadProps(__spreadValues({}, handle), { key: handle.key }))
20328
20160
  );
20329
20161
  }
20330
20162
  return contentForPortal;
@@ -20369,7 +20201,7 @@ function useOverlay(params) {
20369
20201
  },
20370
20202
  [handles, rootParams.portalContainer, updateContent]
20371
20203
  );
20372
- React55.useEffect(() => {
20204
+ React54.useEffect(() => {
20373
20205
  if (handleToRealign) {
20374
20206
  const handle = handles.get(handleToRealign);
20375
20207
  if (handle) {
@@ -20388,7 +20220,7 @@ function useOverlay(params) {
20388
20220
  handles.clear();
20389
20221
  updateContent();
20390
20222
  };
20391
- React55.useEffect(() => {
20223
+ React54.useEffect(() => {
20392
20224
  }, []);
20393
20225
  return {
20394
20226
  portal,
@@ -20400,16 +20232,16 @@ function useOverlay(params) {
20400
20232
  }
20401
20233
 
20402
20234
  // src/components/InfiniteTable/utils/getMenuForColumn.tsx
20403
- import * as React61 from "react";
20235
+ import * as React60 from "react";
20404
20236
 
20405
20237
  // src/components/Menu/index.tsx
20406
- import * as React59 from "react";
20238
+ import * as React58 from "react";
20407
20239
 
20408
20240
  // src/components/Menu/getMenuState.tsx
20409
- import * as React57 from "react";
20241
+ import * as React56 from "react";
20410
20242
 
20411
20243
  // src/components/Menu/childrenToRuntimeItems.tsx
20412
- import * as React56 from "react";
20244
+ import * as React55 from "react";
20413
20245
 
20414
20246
  // src/components/Menu/MenuItem.tsx
20415
20247
  function MenuItem(_props) {
@@ -20428,7 +20260,7 @@ var MenuSeparatorCls = "MenuCls_MenuSeparatorCls__db3arfd";
20428
20260
  // src/components/Menu/childrenToRuntimeItems.tsx
20429
20261
  var SEPARATOR = "-";
20430
20262
  function MenuSeparator() {
20431
- return /* @__PURE__ */ React56.createElement("hr", { className: MenuSeparatorCls });
20263
+ return /* @__PURE__ */ React55.createElement("hr", { className: MenuSeparatorCls });
20432
20264
  }
20433
20265
  var toRuntimeItem = ({
20434
20266
  columns,
@@ -20437,7 +20269,7 @@ var toRuntimeItem = ({
20437
20269
  menuId
20438
20270
  }, item) => {
20439
20271
  const menuItem = item && (item.key != null || item.label != null) ? item : null;
20440
- const menuDecoration = menuItem === null ? item === SEPARATOR ? /* @__PURE__ */ React56.createElement(MenuSeparator, null) : item : null;
20272
+ const menuDecoration = menuItem === null ? item === SEPARATOR ? /* @__PURE__ */ React55.createElement(MenuSeparator, null) : item : null;
20441
20273
  const runtimeItem = menuItem != null ? {
20442
20274
  type: "item",
20443
20275
  parentMenuId: menuId,
@@ -20465,7 +20297,7 @@ var toRuntimeItem = ({
20465
20297
  return runtimeItem;
20466
20298
  };
20467
20299
  function childrenToRuntimeItems(context, children) {
20468
- return React56.Children.map(children, (child) => {
20300
+ return React55.Children.map(children, (child) => {
20469
20301
  if (child) {
20470
20302
  if (child.props.__is_menu_item || child.type === MenuItem) {
20471
20303
  const itemProps = __spreadValues({}, child.props);
@@ -20488,7 +20320,7 @@ function childrenToRuntimeItems(context, children) {
20488
20320
  // src/components/Menu/getMenuState.tsx
20489
20321
  var SUBMENU_COL_NAME = "submenu";
20490
20322
  function getInitialMenuState() {
20491
- const domRef = React57.createRef();
20323
+ const domRef = React56.createRef();
20492
20324
  return {
20493
20325
  keyboardActiveItemKey: null,
20494
20326
  activeItemKey: null,
@@ -20543,7 +20375,7 @@ var deriveStateFromProps2 = (params) => {
20543
20375
  columns.push({
20544
20376
  name: SUBMENU_COL_NAME,
20545
20377
  render: ({ domProps, item }) => {
20546
- return item.menu ? /* @__PURE__ */ React57.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React57.createElement(ExpanderIcon, { expanded: false })) : /* @__PURE__ */ React57.createElement("div", __spreadValues({}, domProps));
20378
+ return item.menu ? /* @__PURE__ */ React56.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React56.createElement(ExpanderIcon, { expanded: false })) : /* @__PURE__ */ React56.createElement("div", __spreadValues({}, domProps));
20547
20379
  }
20548
20380
  });
20549
20381
  }
@@ -20560,7 +20392,7 @@ var deriveStateFromProps2 = (params) => {
20560
20392
  };
20561
20393
 
20562
20394
  // src/components/Menu/Menu.tsx
20563
- import * as React58 from "react";
20395
+ import * as React57 from "react";
20564
20396
  import {
20565
20397
  useCallback as useCallback25,
20566
20398
  useLayoutEffect as useLayoutEffect14,
@@ -20793,10 +20625,10 @@ function useMenuContext() {
20793
20625
  }
20794
20626
 
20795
20627
  // src/components/hooks/useMounted.ts
20796
- import { useCallback as useCallback24, useEffect as useEffect34, useRef as useRef28 } from "react";
20628
+ import { useCallback as useCallback24, useEffect as useEffect31, useRef as useRef28 } from "react";
20797
20629
  function useMounted() {
20798
20630
  let mountedRef = useRef28(true);
20799
- useEffect34(() => {
20631
+ useEffect31(() => {
20800
20632
  mountedRef.current = true;
20801
20633
  return () => {
20802
20634
  mountedRef.current = false;
@@ -20825,7 +20657,7 @@ function renderSubmenuForItem(item, config) {
20825
20657
  if (typeof itemMenu === "function") {
20826
20658
  itemMenu = itemMenu();
20827
20659
  }
20828
- return /* @__PURE__ */ React58.createElement(
20660
+ return /* @__PURE__ */ React57.createElement(
20829
20661
  Menu,
20830
20662
  __spreadProps(__spreadValues({
20831
20663
  key: overlayId,
@@ -21038,7 +20870,7 @@ function MenuComponent(props) {
21038
20870
  setActiveItemKey(key);
21039
20871
  }
21040
20872
  });
21041
- renderedChildren = runtimeItems.map((runtimeItem, index) => /* @__PURE__ */ React58.createElement(
20873
+ renderedChildren = runtimeItems.map((runtimeItem, index) => /* @__PURE__ */ React57.createElement(
21042
20874
  RuntimeItemRenderer,
21043
20875
  {
21044
20876
  key: runtimeItem.type === "item" ? runtimeItem.key : index,
@@ -21223,7 +21055,7 @@ function MenuComponent(props) {
21223
21055
  domRef.current = node;
21224
21056
  }
21225
21057
  }, []);
21226
- const result = /* @__PURE__ */ React58.createElement("div", { className: display.contents }, /* @__PURE__ */ React58.createElement(
21058
+ const result = /* @__PURE__ */ React57.createElement("div", { className: display.contents }, /* @__PURE__ */ React57.createElement(
21227
21059
  "div",
21228
21060
  __spreadProps(__spreadValues({}, domProps), {
21229
21061
  "data-menu-id": menuId,
@@ -21255,12 +21087,12 @@ function MenuComponent(props) {
21255
21087
  return destroyed ? null : result;
21256
21088
  }
21257
21089
  function RuntimeItemRenderer(props) {
21258
- const [pressed, setPressed] = React58.useState(false);
21090
+ const [pressed, setPressed] = React57.useState(false);
21259
21091
  const { columns, item, index, active, keyboardActive } = props;
21260
21092
  const key = item.type === "item" ? item.value.key : index;
21261
21093
  let content = null;
21262
21094
  if (item.type === "decoration") {
21263
- content = /* @__PURE__ */ React58.createElement("div", { style: item.style }, item.value);
21095
+ content = /* @__PURE__ */ React57.createElement("div", { style: item.style }, item.value);
21264
21096
  } else {
21265
21097
  let spanIndex = 0;
21266
21098
  content = columns.map((col, i) => {
@@ -21321,7 +21153,7 @@ function RuntimeItemRenderer(props) {
21321
21153
  }
21322
21154
  }
21323
21155
  };
21324
- return col.render ? /* @__PURE__ */ React58.createElement(
21156
+ return col.render ? /* @__PURE__ */ React57.createElement(
21325
21157
  RenderHookComponent,
21326
21158
  {
21327
21159
  key: `${key}-${field}`,
@@ -21333,10 +21165,10 @@ function RuntimeItemRenderer(props) {
21333
21165
  domProps
21334
21166
  }
21335
21167
  }
21336
- ) : /* @__PURE__ */ React58.createElement("div", __spreadValues({ key: `${key}-${field}` }, domProps), target[field]);
21168
+ ) : /* @__PURE__ */ React57.createElement("div", __spreadValues({ key: `${key}-${field}` }, domProps), target[field]);
21337
21169
  }).filter(Boolean);
21338
21170
  }
21339
- return /* @__PURE__ */ React58.createElement("div", { className: MenuRowCls }, content);
21171
+ return /* @__PURE__ */ React57.createElement("div", { className: MenuRowCls }, content);
21340
21172
  }
21341
21173
 
21342
21174
  // src/components/Menu/index.tsx
@@ -21350,12 +21182,12 @@ var MenuRoot = getComponentStateRoot({
21350
21182
  function MenuContextProvider(props) {
21351
21183
  const { componentActions, componentState } = useComponentState();
21352
21184
  const getState = useLatest(componentState);
21353
- return /* @__PURE__ */ React59.createElement(
21185
+ return /* @__PURE__ */ React58.createElement(
21354
21186
  MenuContext.Provider,
21355
21187
  {
21356
21188
  value: { componentActions, componentState, getState }
21357
21189
  },
21358
- /* @__PURE__ */ React59.createElement(MenuComponent, { domProps: props.domProps })
21190
+ /* @__PURE__ */ React58.createElement(MenuComponent, { domProps: props.domProps })
21359
21191
  );
21360
21192
  }
21361
21193
  function Menu(props) {
@@ -21397,24 +21229,24 @@ function Menu(props) {
21397
21229
  //@ts-ignore
21398
21230
  "__is_infinite_menu_component"
21399
21231
  ]);
21400
- const menu = /* @__PURE__ */ React59.createElement(
21232
+ const menu = /* @__PURE__ */ React58.createElement(
21401
21233
  MenuRoot,
21402
21234
  __spreadValues({
21403
21235
  addSubmenuColumnIfNeeded,
21404
21236
  bubbleActionsFromSubmenus,
21405
21237
  wrapLabels
21406
21238
  }, props),
21407
- /* @__PURE__ */ React59.createElement(MenuContextProvider, { domProps })
21239
+ /* @__PURE__ */ React58.createElement(MenuContextProvider, { domProps })
21408
21240
  );
21409
21241
  if (false) {
21410
- return /* @__PURE__ */ React59.createElement(React59.StrictMode, null, menu);
21242
+ return /* @__PURE__ */ React58.createElement(React58.StrictMode, null, menu);
21411
21243
  }
21412
21244
  return menu;
21413
21245
  }
21414
21246
  Menu[propToIdentifyMenu] = true;
21415
21247
 
21416
21248
  // src/components/InfiniteTable/utils/defaultGetColumnMenuItems.tsx
21417
- import * as React60 from "react";
21249
+ import * as React59 from "react";
21418
21250
  function defaultGetColumnMenuItems(_items, params) {
21419
21251
  const { columnApi, column, getComputed, api } = params;
21420
21252
  const sortable = columnApi.isSortable();
@@ -21501,7 +21333,7 @@ function defaultGetColumnMenuItems(_items, params) {
21501
21333
  colItems.push({
21502
21334
  key: id,
21503
21335
  label,
21504
- check: /* @__PURE__ */ React60.createElement(
21336
+ check: /* @__PURE__ */ React59.createElement(
21505
21337
  InfiniteCheckBox,
21506
21338
  {
21507
21339
  key: col.id,
@@ -21564,7 +21396,7 @@ function getMenuForColumn(columnId, context, onHideIntent) {
21564
21396
  if (!items || !items.length) {
21565
21397
  return null;
21566
21398
  }
21567
- return /* @__PURE__ */ React61.createElement(
21399
+ return /* @__PURE__ */ React60.createElement(
21568
21400
  MenuCmp,
21569
21401
  {
21570
21402
  autoFocus: true,
@@ -21635,7 +21467,7 @@ function useColumnMenu() {
21635
21467
  } = useOverlay({
21636
21468
  portalContainer: masterContext ? masterContext.getMasterState().portalDOMRef.current : false
21637
21469
  });
21638
- useEffect35(() => {
21470
+ useEffect32(() => {
21639
21471
  const { actions: actions2, getState: getState2 } = context;
21640
21472
  const state = getState2();
21641
21473
  return state.onColumnMenuClick.onChange((info) => {
@@ -21650,7 +21482,7 @@ function useColumnMenu() {
21650
21482
  });
21651
21483
  }, []);
21652
21484
  const { columnMenuVisibleForColumnId, columnMenuVisibleKey } = getState();
21653
- useEffect35(() => {
21485
+ useEffect32(() => {
21654
21486
  const { columnMenuVisibleForColumnId: columnMenuVisibleForColumnId2, columnMenuTargetRef } = getState();
21655
21487
  if (columnMenuVisibleForColumnId2) {
21656
21488
  let handleMouseDown2 = function(event) {
@@ -21684,7 +21516,7 @@ function useColumnMenu() {
21684
21516
  }
21685
21517
 
21686
21518
  // src/components/InfiniteTable/components/FocusDetect.tsx
21687
- import * as React62 from "react";
21519
+ import * as React61 from "react";
21688
21520
  import { useCallback as useCallback26 } from "react";
21689
21521
  var style = {
21690
21522
  width: 0,
@@ -21718,7 +21550,7 @@ function FocusDetect() {
21718
21550
  };
21719
21551
  focusLastFocusableCell(context);
21720
21552
  }), []);
21721
- return /* @__PURE__ */ React62.createElement(
21553
+ return /* @__PURE__ */ React61.createElement(
21722
21554
  "div",
21723
21555
  {
21724
21556
  onFocus,
@@ -21730,13 +21562,13 @@ function FocusDetect() {
21730
21562
  }
21731
21563
 
21732
21564
  // src/components/InfiniteTable/hooks/useEditingCallbackProps.ts
21733
- import { useEffect as useEffect36 } from "react";
21565
+ import { useEffect as useEffect33 } from "react";
21734
21566
  function useOnEditCancelled() {
21735
21567
  const context = useInfiniteTable();
21736
21568
  const { getState } = context;
21737
21569
  const { editingCell } = getState();
21738
21570
  const cancelled = editingCell && !editingCell.active ? editingCell.cancelled : void 0;
21739
- useEffect36(() => {
21571
+ useEffect33(() => {
21740
21572
  if (cancelled) {
21741
21573
  const { rowIndex, columnId, initialValue } = getState().editingCell;
21742
21574
  const { onEditCancelled } = getState();
@@ -21756,7 +21588,7 @@ function useOnEditRejected() {
21756
21588
  state: { editingCell }
21757
21589
  } = context;
21758
21590
  const rejected = editingCell && !editingCell.active && editingCell.accepted instanceof Error ? editingCell.accepted : void 0;
21759
- useEffect36(() => {
21591
+ useEffect33(() => {
21760
21592
  if (rejected) {
21761
21593
  const { rowIndex, columnId, value, initialValue } = getState().editingCell;
21762
21594
  const { onEditRejected } = getState();
@@ -21778,7 +21610,7 @@ function useFocusOnEditStop() {
21778
21610
  } = context;
21779
21611
  const active = editingCell == null ? void 0 : editingCell.active;
21780
21612
  const prevActive = usePrevious(active);
21781
- useEffect36(() => {
21613
+ useEffect33(() => {
21782
21614
  if (!active && prevActive) {
21783
21615
  context.api.focus();
21784
21616
  }
@@ -21791,7 +21623,7 @@ function useOnEditAccepted() {
21791
21623
  getState
21792
21624
  } = context;
21793
21625
  const accepted = editingCell && !editingCell.active && !editingCell.cancelled && editingCell.accepted === true;
21794
- useEffect36(() => {
21626
+ useEffect33(() => {
21795
21627
  var _a, _b;
21796
21628
  if (accepted) {
21797
21629
  const { editingCell: editingCell2 } = getState();
@@ -21815,7 +21647,7 @@ function useOnEditPersisted() {
21815
21647
  getState
21816
21648
  } = context;
21817
21649
  const persisted = editingCell ? editingCell.persisted : void 0;
21818
- useEffect36(() => {
21650
+ useEffect33(() => {
21819
21651
  if (persisted) {
21820
21652
  const { editingCell: editingCell2, onEditPersistError, onEditPersistSuccess } = getState();
21821
21653
  if (!editingCell2) {
@@ -21846,21 +21678,21 @@ function useEditingCallbackProps() {
21846
21678
  }
21847
21679
 
21848
21680
  // src/components/InfiniteTable/hooks/useColumnFilterOperatorMenu.ts
21849
- import { useEffect as useEffect37 } from "react";
21681
+ import { useEffect as useEffect34 } from "react";
21850
21682
 
21851
21683
  // src/components/InfiniteTable/utils/getFilterOperatorMenuForColumn.tsx
21852
- import * as React65 from "react";
21684
+ import * as React64 from "react";
21853
21685
 
21854
21686
  // src/components/InfiniteTable/components/icons/ClearIcon.tsx
21855
- import * as React63 from "react";
21687
+ import * as React62 from "react";
21856
21688
  var ClearIcon = (props) => {
21857
- 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" }));
21689
+ 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" }));
21858
21690
  };
21859
21691
 
21860
21692
  // src/components/InfiniteTable/components/icons/DoneIcon.tsx
21861
- import * as React64 from "react";
21693
+ import * as React63 from "react";
21862
21694
  var DoneIcon = (props) => {
21863
- 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" }));
21695
+ 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" }));
21864
21696
  };
21865
21697
 
21866
21698
  // src/components/InfiniteTable/utils/getFilterOperatorMenuForColumn.tsx
@@ -21906,12 +21738,12 @@ function getFilterOperatorMenuForColumn(columnId, context, onHideIntent) {
21906
21738
  const IconCmp = (_b = (_a2 = operator.components) == null ? void 0 : _a2.Icon) != null ? _b : FilterIcon;
21907
21739
  return {
21908
21740
  key,
21909
- icon: /* @__PURE__ */ React65.createElement(IconCmp, null),
21910
- label: /* @__PURE__ */ React65.createElement(React65.Fragment, null, (_c = operator.label) != null ? _c : operator.name),
21741
+ icon: /* @__PURE__ */ React64.createElement(IconCmp, null),
21742
+ label: /* @__PURE__ */ React64.createElement(React64.Fragment, null, (_c = operator.label) != null ? _c : operator.name),
21911
21743
  onAction: () => {
21912
21744
  api.setColumnFilterOperator(columnId, key);
21913
21745
  },
21914
- checked: checked ? /* @__PURE__ */ React65.createElement(DoneIcon, { size: 16 }) : null
21746
+ checked: checked ? /* @__PURE__ */ React64.createElement(DoneIcon, { size: 16 }) : null
21915
21747
  };
21916
21748
  });
21917
21749
  const firstItems = [
@@ -21926,7 +21758,7 @@ function getFilterOperatorMenuForColumn(columnId, context, onHideIntent) {
21926
21758
  {
21927
21759
  key: "reset",
21928
21760
  label: "Reset",
21929
- icon: /* @__PURE__ */ React65.createElement(ClearIcon, null),
21761
+ icon: /* @__PURE__ */ React64.createElement(ClearIcon, null),
21930
21762
  disabled: !column.computedFiltered,
21931
21763
  onAction: () => {
21932
21764
  api.clearColumnFilter(columnId);
@@ -21948,7 +21780,7 @@ function getFilterOperatorMenuForColumn(columnId, context, onHideIntent) {
21948
21780
  filterTypes
21949
21781
  };
21950
21782
  const items = getFilterOperatorMenuItems ? getFilterOperatorMenuItems(defaultItems, param) : defaultItems;
21951
- return /* @__PURE__ */ React65.createElement(
21783
+ return /* @__PURE__ */ React64.createElement(
21952
21784
  MenuCmp,
21953
21785
  {
21954
21786
  autoFocus: true,
@@ -21989,7 +21821,7 @@ function useColumnFilterOperatorMenu() {
21989
21821
  } = useOverlay({
21990
21822
  portalContainer: masterContext ? masterContext.getMasterState().portalDOMRef.current : false
21991
21823
  });
21992
- useEffect37(() => {
21824
+ useEffect34(() => {
21993
21825
  const { actions: actions2, getState: getState2 } = context;
21994
21826
  const state = getState2();
21995
21827
  return state.onFilterOperatorMenuClick.onChange((info) => {
@@ -22025,7 +21857,7 @@ function useColumnFilterOperatorMenu() {
22025
21857
  actions2.filterOperatorMenuVisibleForColumnId = column.id;
22026
21858
  });
22027
21859
  }, []);
22028
- useEffect37(() => {
21860
+ useEffect34(() => {
22029
21861
  const { filterOperatorMenuVisibleForColumnId } = getState();
22030
21862
  if (filterOperatorMenuVisibleForColumnId) {
22031
21863
  let handleMouseDown2 = function(event) {
@@ -22052,10 +21884,10 @@ function useColumnFilterOperatorMenu() {
22052
21884
  }
22053
21885
 
22054
21886
  // src/components/InfiniteTable/hooks/useContextMenu.ts
22055
- import { useEffect as useEffect38 } from "react";
21887
+ import { useEffect as useEffect35 } from "react";
22056
21888
 
22057
21889
  // src/components/InfiniteTable/utils/getCellContextMenu.tsx
22058
- import * as React66 from "react";
21890
+ import * as React65 from "react";
22059
21891
  function getCellContextMenu(cellLocation, context, onHideIntent) {
22060
21892
  var _a;
22061
21893
  const { columnId, rowIndex, event } = cellLocation;
@@ -22095,7 +21927,7 @@ function getCellContextMenu(cellLocation, context, onHideIntent) {
22095
21927
  }
22096
21928
  return {
22097
21929
  preventDefault: true,
22098
- menu: /* @__PURE__ */ React66.createElement(
21930
+ menu: /* @__PURE__ */ React65.createElement(
22099
21931
  MenuCmp,
22100
21932
  {
22101
21933
  columns: menuColumns,
@@ -22150,7 +21982,7 @@ function getTableContextMenu(menuLocation, context, onHideIntent) {
22150
21982
  }
22151
21983
  return {
22152
21984
  preventDefault: true,
22153
- menu: /* @__PURE__ */ React66.createElement(
21985
+ menu: /* @__PURE__ */ React65.createElement(
22154
21986
  MenuCmp,
22155
21987
  {
22156
21988
  columns: menuColumns,
@@ -22197,7 +22029,7 @@ function useCellContextMenu() {
22197
22029
  } = useOverlay({
22198
22030
  portalContainer: masterContext ? masterContext.getMasterState().portalDOMRef.current : false
22199
22031
  });
22200
- useEffect38(() => {
22032
+ useEffect35(() => {
22201
22033
  const { actions: actions2, getState: getState2, getDataSourceState } = context;
22202
22034
  const state = getState2();
22203
22035
  return state.cellContextMenu.onChange((info) => {
@@ -22247,7 +22079,7 @@ function useCellContextMenu() {
22247
22079
  }
22248
22080
  });
22249
22081
  }, []);
22250
- useEffect38(() => {
22082
+ useEffect35(() => {
22251
22083
  const { cellContextMenuVisibleFor } = getState();
22252
22084
  if (cellContextMenuVisibleFor) {
22253
22085
  let handleMouseDown2 = function(event) {
@@ -22283,7 +22115,7 @@ function useTableContextMenu() {
22283
22115
  } = useOverlay({
22284
22116
  portalContainer: masterContext ? masterContext.getMasterState().portalDOMRef.current : false
22285
22117
  });
22286
- useEffect38(() => {
22118
+ useEffect35(() => {
22287
22119
  const { actions: actions2, getState: getState2 } = context;
22288
22120
  const state = getState2();
22289
22121
  return state.contextMenu.onChange((info) => {
@@ -22328,7 +22160,7 @@ function useTableContextMenu() {
22328
22160
  }
22329
22161
  });
22330
22162
  }, []);
22331
- useEffect38(() => {
22163
+ useEffect35(() => {
22332
22164
  const { contextMenuVisibleFor } = getState();
22333
22165
  if (contextMenuVisibleFor) {
22334
22166
  let handleMouseDown2 = function(event) {
@@ -22354,6 +22186,83 @@ function useTableContextMenu() {
22354
22186
  return { menuPortal };
22355
22187
  }
22356
22188
 
22189
+ // src/components/InfiniteTable/components/HScrollSyncContent.tsx
22190
+ import { useRef as useRef30 } from "react";
22191
+ import * as React66 from "react";
22192
+
22193
+ // src/components/InfiniteTable/hooks/useGridScroll.ts
22194
+ import { useCallback as useCallback27, useEffect as useEffect36 } from "react";
22195
+ function useGridScroll(onScroll, deps) {
22196
+ const {
22197
+ state: { brain }
22198
+ } = useInfiniteTable();
22199
+ const memoizedOnScroll = useCallback27(onScroll, deps);
22200
+ useEffect36(() => {
22201
+ const removeOnScroll = brain.onScroll(memoizedOnScroll);
22202
+ return removeOnScroll;
22203
+ }, [brain, memoizedOnScroll]);
22204
+ }
22205
+
22206
+ // src/components/InfiniteTable/components/HScrollSyncContent.css.ts
22207
+ var HScrollSyncContentCls = "HScrollSyncContent_HScrollSyncContentCls__yzx0vj0";
22208
+
22209
+ // src/components/InfiniteTable/components/HScrollSyncContent.tsx
22210
+ function HScrollSyncContent(props) {
22211
+ const _a = props, { width, maxWidth, minWidth, scrollable } = _a, domProps = __objRest(_a, ["width", "maxWidth", "minWidth", "scrollable"]);
22212
+ const domRef = useRef30(null);
22213
+ useGridScroll(
22214
+ (scrollPos) => {
22215
+ if (domRef.current && scrollable !== false) {
22216
+ domRef.current.style.transform = `translate3d(${-scrollPos.scrollLeft}px, 0px, 0px)`;
22217
+ }
22218
+ },
22219
+ [scrollable]
22220
+ );
22221
+ const style2 = __spreadValues({}, domProps.style);
22222
+ if (width === "column") {
22223
+ style2.width = ThemeVars.runtime.totalVisibleColumnsWidth;
22224
+ } else if (width === "viewport") {
22225
+ style2.width = ThemeVars.runtime.bodyWidth;
22226
+ }
22227
+ if (minWidth === "column") {
22228
+ style2.minWidth = ThemeVars.runtime.totalVisibleColumnsWidth;
22229
+ } else if (minWidth === "viewport") {
22230
+ style2.minWidth = ThemeVars.runtime.bodyWidth;
22231
+ }
22232
+ if (maxWidth === "column") {
22233
+ style2.maxWidth = ThemeVars.runtime.totalVisibleColumnsWidth;
22234
+ } else if (maxWidth === "viewport") {
22235
+ style2.maxWidth = ThemeVars.runtime.bodyWidth;
22236
+ }
22237
+ return /* @__PURE__ */ React66.createElement(
22238
+ "div",
22239
+ __spreadProps(__spreadValues({
22240
+ ref: domRef
22241
+ }, domProps), {
22242
+ className: domProps.className ? join(domProps.className, HScrollSyncContentCls) : HScrollSyncContentCls,
22243
+ style: style2
22244
+ }),
22245
+ domProps.children
22246
+ );
22247
+ }
22248
+
22249
+ // src/components/InfiniteTable/hooks/useVisibleColumnSizes.ts
22250
+ var columnWidthAtIndex6 = stripVar(InternalVars.columnWidthAtIndex);
22251
+ var columnOffsetAtIndex5 = stripVar(InternalVars.columnOffsetAtIndex);
22252
+ function useVisibleColumnSizes() {
22253
+ const context = useInfiniteTable();
22254
+ return context.computed.computedVisibleColumns.map((column) => {
22255
+ return {
22256
+ id: column.id,
22257
+ width: column.computedWidth,
22258
+ cssVarForWidth: `var(${columnWidthAtIndex6}-${column.computedVisibleIndex})`,
22259
+ offset: column.computedOffset,
22260
+ cssVarForOffset: `var(${columnOffsetAtIndex5}-${column.computedVisibleIndex})`,
22261
+ pinned: column.computedPinned
22262
+ };
22263
+ });
22264
+ }
22265
+
22357
22266
  // src/components/InfiniteTable/index.tsx
22358
22267
  var InfiniteTableClassName = internalProps.rootClassName;
22359
22268
  var HOVERED_CLASS_NAMES = [RowHoverCls, "InfiniteColumnCell--hovered"];
@@ -22371,44 +22280,154 @@ var InfiniteTableRoot = getComponentStateRoot({
22371
22280
  rowHeight: true,
22372
22281
  columnHeaderHeight: true
22373
22282
  },
22283
+ //@ts-ignore
22284
+ mappedCallbacks: getMappedCallbacks2(),
22374
22285
  // @ts-ignore
22375
22286
  getParentState: () => useDataSource(),
22376
22287
  debugName: "InfiniteTable"
22377
22288
  });
22289
+ function InfiniteTableHeader2() {
22290
+ const context = useInfiniteTable();
22291
+ const { state: componentState, getComputed } = context;
22292
+ const { header, brain, headerBrain } = componentState;
22293
+ const { scrollbars } = getComputed();
22294
+ return header ? /* @__PURE__ */ React67.createElement(
22295
+ TableHeaderWrapper,
22296
+ {
22297
+ bodyBrain: brain,
22298
+ headerBrain,
22299
+ scrollbars
22300
+ }
22301
+ ) : null;
22302
+ }
22303
+ var InfiniteTableBodyCls = join(
22304
+ `${rootClassName2}Body`,
22305
+ position.relative,
22306
+ flex["1"],
22307
+ transformTranslateZero
22308
+ );
22309
+ function InfiniteTableBodyContainer(props) {
22310
+ return /* @__PURE__ */ React67.createElement(
22311
+ "div",
22312
+ __spreadProps(__spreadValues({}, props), {
22313
+ className: props.className ? join(InfiniteTableBodyCls, props.className) : InfiniteTableBodyCls
22314
+ })
22315
+ );
22316
+ }
22317
+ function InfiniteTableBody() {
22318
+ var _a;
22319
+ const context = useInfiniteTable();
22320
+ const masterContext = useMasterDetailContext();
22321
+ const { state: componentState, getComputed, api } = context;
22322
+ const {
22323
+ renderer,
22324
+ onRenderUpdater,
22325
+ debugId,
22326
+ keyboardNavigation,
22327
+ activeRowIndex,
22328
+ loadingText,
22329
+ scrollStopDelay,
22330
+ brain,
22331
+ scrollerDOMRef,
22332
+ components: components2,
22333
+ bodySize,
22334
+ activeCellIndex,
22335
+ rowDetailRenderer
22336
+ } = componentState;
22337
+ const LoadMaskCmp = (_a = components2 == null ? void 0 : components2.LoadMask) != null ? _a : LoadMask;
22338
+ const computed = getComputed();
22339
+ const { computedRowHeight, computedRowSizeCacheForDetails } = computed;
22340
+ const activeCellRowHeight = (computedRowSizeCacheForDetails == null ? void 0 : computedRowSizeCacheForDetails.getRowHeight) || computedRowHeight;
22341
+ const {
22342
+ componentState: { loading }
22343
+ } = useDataSourceContextValue();
22344
+ const onContextMenu = React67.useCallback((event) => {
22345
+ const state = context.getState();
22346
+ const target = event.target;
22347
+ if (!masterContext && event._from_row_detail) {
22348
+ return;
22349
+ }
22350
+ if (masterContext) {
22351
+ event._from_row_detail = true;
22352
+ }
22353
+ const cell = selectParentUntil(
22354
+ target,
22355
+ getCellSelector(),
22356
+ state.domRef.current
22357
+ );
22358
+ let columnId;
22359
+ let colIndex;
22360
+ let rowId;
22361
+ let rowIndex;
22362
+ if (cell) {
22363
+ colIndex = Number(cell.dataset.colIndex);
22364
+ rowIndex = Number(cell.dataset.rowIndex);
22365
+ columnId = context.getComputed().computedVisibleColumns[colIndex].id;
22366
+ rowId = context.dataSourceApi.getRowInfoArray()[rowIndex].id;
22367
+ }
22368
+ const param = {
22369
+ columnId,
22370
+ colIndex,
22371
+ rowId,
22372
+ rowIndex,
22373
+ event,
22374
+ target: cell != null ? cell : event.target
22375
+ };
22376
+ if (cell) {
22377
+ state.cellContextMenu(param);
22378
+ }
22379
+ state.contextMenu(param);
22380
+ }, []);
22381
+ const { renderCell, renderDetailRow } = useCellRendering({
22382
+ imperativeApi: api,
22383
+ getComputed,
22384
+ domRef: componentState.domRef,
22385
+ bodySize,
22386
+ computed
22387
+ });
22388
+ return /* @__PURE__ */ React67.createElement(InfiniteTableBodyContainer, { onContextMenu }, /* @__PURE__ */ React67.createElement(
22389
+ HeadlessTable,
22390
+ {
22391
+ debugId,
22392
+ tabIndex: 0,
22393
+ activeRowIndex: componentState.ready && keyboardNavigation === "row" ? activeRowIndex : null,
22394
+ activeCellIndex: componentState.ready && keyboardNavigation === "cell" && // we want to hide the active cell indicator while column reodering is happening
22395
+ !componentState.columnReorderDragColumnId ? activeCellIndex : null,
22396
+ scrollStopDelay,
22397
+ renderer,
22398
+ onRenderUpdater,
22399
+ brain,
22400
+ activeCellRowHeight,
22401
+ renderCell,
22402
+ renderDetailRow: rowDetailRenderer ? renderDetailRow : void 0,
22403
+ cellHoverClassNames: HOVERED_CLASS_NAMES,
22404
+ scrollerDOMRef
22405
+ }
22406
+ ), /* @__PURE__ */ React67.createElement(LoadMaskCmp, { visible: loading }, loadingText));
22407
+ }
22378
22408
  var InfiniteTableComponent = React67.memo(
22379
22409
  function InfiniteTableComponent2() {
22380
- var _a;
22381
22410
  const context = useInfiniteTable();
22382
22411
  const masterContext = useMasterDetailContext();
22383
- const { state: componentState, getComputed, computed, api } = context;
22412
+ const { state: componentState, api, children: initialChildren } = context;
22384
22413
  const {
22385
- componentState: { loading, dataArray },
22414
+ componentState: { dataArray },
22386
22415
  getState: getDataSourceState,
22387
22416
  componentActions: dataSourceActions
22388
22417
  } = useDataSourceContextValue();
22389
22418
  const {
22390
22419
  domRef,
22391
- scrollerDOMRef,
22392
22420
  portalDOMRef,
22393
- loadingText,
22394
- rowDetailRenderer,
22395
- header,
22396
22421
  onRowHeightCSSVarChange,
22397
22422
  onRowDetailHeightCSSVarChange,
22398
22423
  onColumnHeaderHeightCSSVarChange,
22399
22424
  rowHeightCSSVar,
22400
22425
  rowDetailHeightCSSVar,
22401
22426
  columnHeaderHeightCSSVar,
22402
- components: components2,
22403
22427
  scrollStopDelay,
22404
22428
  brain,
22405
- headerBrain,
22406
- renderer,
22407
- keyboardNavigation,
22408
22429
  activeRowIndex,
22409
- activeCellIndex,
22410
- onRenderUpdater,
22411
- debugId
22430
+ activeCellIndex
22412
22431
  } = componentState;
22413
22432
  let { licenseKey } = componentState;
22414
22433
  if (!licenseKey && InfiniteTable.licenseKey) {
@@ -22417,16 +22436,6 @@ var InfiniteTableComponent = React67.memo(
22417
22436
  useScrollToActiveRow(activeRowIndex, dataArray.length, api);
22418
22437
  useScrollToActiveCell(activeCellIndex, dataArray.length, api);
22419
22438
  const { onKeyDown: onKeyDown2 } = useDOMEventHandlers();
22420
- const { bodySize } = componentState;
22421
- const { scrollbars, computedRowHeight, computedRowSizeCacheForDetails } = computed;
22422
- const activeCellRowHeight = (computedRowSizeCacheForDetails == null ? void 0 : computedRowSizeCacheForDetails.getRowHeight) || computedRowHeight;
22423
- const { renderCell, renderDetailRow } = useCellRendering({
22424
- imperativeApi: api,
22425
- getComputed,
22426
- domRef: componentState.domRef,
22427
- bodySize,
22428
- computed
22429
- });
22430
22439
  React67.useEffect(() => {
22431
22440
  const dataSourceState = getDataSourceState();
22432
22441
  const onChange = debounce(
@@ -22442,7 +22451,6 @@ var InfiniteTableComponent = React67.memo(
22442
22451
  }, [brain, scrollStopDelay]);
22443
22452
  const licenseValid = useLicense(licenseKey);
22444
22453
  const domProps = useDOMProps(componentState.domProps);
22445
- const LoadMaskCmp = (_a = components2 == null ? void 0 : components2.LoadMask) != null ? _a : LoadMask;
22446
22454
  React67.useEffect(() => {
22447
22455
  brain.setScrollStopDelay(scrollStopDelay);
22448
22456
  dataSourceActions.scrollStopDelayUpdatedByTable = scrollStopDelay;
@@ -22466,74 +22474,13 @@ var InfiniteTableComponent = React67.memo(
22466
22474
  globalThis.infiniteApi = context.api;
22467
22475
  }
22468
22476
  }, [componentState.ready]);
22469
- const onContextMenu = React67.useCallback((event) => {
22470
- const state = context.getState();
22471
- const target = event.target;
22472
- if (!masterContext && event._from_row_detail) {
22473
- return;
22474
- }
22475
- if (masterContext) {
22476
- event._from_row_detail = true;
22477
- }
22478
- const cell = selectParentUntil(
22479
- target,
22480
- getCellSelector(),
22481
- state.domRef.current
22482
- );
22483
- let columnId;
22484
- let colIndex;
22485
- let rowId;
22486
- let rowIndex;
22487
- if (cell) {
22488
- colIndex = Number(cell.dataset.colIndex);
22489
- rowIndex = Number(cell.dataset.rowIndex);
22490
- columnId = context.getComputed().computedVisibleColumns[colIndex].id;
22491
- rowId = context.dataSourceApi.getRowInfoArray()[rowIndex].id;
22492
- }
22493
- const param = {
22494
- columnId,
22495
- colIndex,
22496
- rowId,
22497
- rowIndex,
22498
- event,
22499
- target: cell != null ? cell : event.target
22500
- };
22501
- if (cell) {
22502
- state.cellContextMenu(param);
22503
- }
22504
- state.contextMenu(param);
22505
- }, []);
22506
22477
  React67.useEffect(() => {
22507
22478
  if (masterContext) {
22508
22479
  portalDOMRef.current = masterContext.getMasterState().portalDOMRef.current;
22509
22480
  }
22510
22481
  }, []);
22511
- return /* @__PURE__ */ React67.createElement("div", __spreadValues({ onKeyDown: onKeyDown2, ref: domRef }, domProps), header ? /* @__PURE__ */ React67.createElement(
22512
- TableHeaderWrapper,
22513
- {
22514
- bodyBrain: brain,
22515
- headerBrain,
22516
- scrollbars
22517
- }
22518
- ) : null, /* @__PURE__ */ React67.createElement(InfiniteTableBody, { onContextMenu }, /* @__PURE__ */ React67.createElement(
22519
- HeadlessTable,
22520
- {
22521
- debugId,
22522
- tabIndex: 0,
22523
- activeRowIndex: componentState.ready && keyboardNavigation === "row" ? activeRowIndex : null,
22524
- activeCellIndex: componentState.ready && keyboardNavigation === "cell" && // we want to hide the active cell indicator while column reodering is happening
22525
- !componentState.columnReorderDragColumnId ? activeCellIndex : null,
22526
- scrollStopDelay,
22527
- renderer,
22528
- onRenderUpdater,
22529
- brain,
22530
- activeCellRowHeight,
22531
- renderCell,
22532
- renderDetailRow: rowDetailRenderer ? renderDetailRow : void 0,
22533
- cellHoverClassNames: HOVERED_CLASS_NAMES,
22534
- scrollerDOMRef
22535
- }
22536
- ), /* @__PURE__ */ React67.createElement(LoadMaskCmp, { visible: loading }, loadingText)), /* @__PURE__ */ React67.createElement(
22482
+ const children = initialChildren != null ? initialChildren : /* @__PURE__ */ React67.createElement(React67.Fragment, null, /* @__PURE__ */ React67.createElement(InfiniteTableHeader2, null), /* @__PURE__ */ React67.createElement(InfiniteTableBody, null));
22483
+ return /* @__PURE__ */ React67.createElement("div", __spreadValues({ onKeyDown: onKeyDown2, ref: domRef }, domProps), children, /* @__PURE__ */ React67.createElement(
22537
22484
  "div",
22538
22485
  {
22539
22486
  ref: portalDOMRef,
@@ -22567,10 +22514,12 @@ var InfiniteTableComponent = React67.memo(
22567
22514
  varName: columnHeaderHeightCSSVar,
22568
22515
  onChange: onColumnHeaderHeightCSSVarChange
22569
22516
  }
22570
- ) : null, /* @__PURE__ */ React67.createElement(InfiniteTableFooter, null), licenseValid ? null : /* @__PURE__ */ React67.createElement(InfiniteTableLicenseFooter, null), /* @__PURE__ */ React67.createElement(FocusDetect, null));
22517
+ ) : null, licenseValid ? null : /* @__PURE__ */ React67.createElement(InfiniteTableLicenseFooter, null), /* @__PURE__ */ React67.createElement(FocusDetect, null));
22571
22518
  }
22572
22519
  );
22573
- function InfiniteTableContextProvider() {
22520
+ function InfiniteTableContextProvider({
22521
+ children
22522
+ }) {
22574
22523
  const { componentActions, componentState } = useComponentState();
22575
22524
  const { scrollerDOMRef, scrollTopKey } = componentState;
22576
22525
  const computed = useComputed();
@@ -22610,7 +22559,8 @@ function InfiniteTableContextProvider() {
22610
22559
  getComputed,
22611
22560
  getState,
22612
22561
  api: imperativeApi,
22613
- dataSourceApi
22562
+ dataSourceApi,
22563
+ children
22614
22564
  };
22615
22565
  useResizeObserver(
22616
22566
  scrollerDOMRef,
@@ -22643,7 +22593,7 @@ var InfiniteTable = function(props) {
22643
22593
  rowHeight: DEFAULT_ROW_HEIGHT,
22644
22594
  columnHeaderHeight: DEFAULT_COLUMN_HEADER_HEIGHT
22645
22595
  }, props),
22646
- /* @__PURE__ */ React67.createElement(InfiniteTableContextProvider, null)
22596
+ /* @__PURE__ */ React67.createElement(InfiniteTableContextProvider, { children: props.children })
22647
22597
  )
22648
22598
  );
22649
22599
  if (false) {
@@ -22651,6 +22601,10 @@ var InfiniteTable = function(props) {
22651
22601
  }
22652
22602
  return table;
22653
22603
  };
22604
+ InfiniteTable.Header = InfiniteTableHeader2;
22605
+ InfiniteTable.Body = InfiniteTableBody;
22606
+ InfiniteTable.HScrollSyncContent = HScrollSyncContent;
22607
+ InfiniteTable.Footer = () => /* @__PURE__ */ React67.createElement(InfiniteTableFooter, null);
22654
22608
 
22655
22609
  // src/components/InfiniteTable/eventHandlers/keyboardShortcuts.ts
22656
22610
  var instantEdit = {
@@ -22696,6 +22650,49 @@ var keyboardShortcuts = {
22696
22650
  instantEdit
22697
22651
  };
22698
22652
 
22653
+ // src/components/hooks/useInterceptedMap.ts
22654
+ import { useEffect as useEffect38 } from "react";
22655
+ function interceptMap(map2, fns) {
22656
+ const { set, delete: deleteKey, clear } = map2;
22657
+ if (fns.set) {
22658
+ map2.set = (key, value) => {
22659
+ set.call(map2, key, value);
22660
+ fns.set(key, value);
22661
+ return map2;
22662
+ };
22663
+ }
22664
+ if (fns.delete) {
22665
+ map2.delete = (key) => {
22666
+ const removed = deleteKey.call(map2, key);
22667
+ fns.delete(key);
22668
+ return removed;
22669
+ };
22670
+ }
22671
+ if (fns.clear || fns.beforeClear) {
22672
+ map2.clear = () => {
22673
+ if (fns.beforeClear) {
22674
+ fns.beforeClear(map2);
22675
+ }
22676
+ const result = clear.call(map2);
22677
+ if (fns.clear) {
22678
+ fns.clear();
22679
+ }
22680
+ return result;
22681
+ };
22682
+ }
22683
+ return () => {
22684
+ if (set) {
22685
+ map2.set = set;
22686
+ }
22687
+ if (deleteKey) {
22688
+ map2.delete = deleteKey;
22689
+ }
22690
+ if (clear) {
22691
+ map2.clear = clear;
22692
+ }
22693
+ };
22694
+ }
22695
+
22699
22696
  // src/utils/FixedSizeSet.ts
22700
22697
  var _FixedSizeSet = class {
22701
22698
  constructor(clone, size) {
@@ -22854,6 +22851,7 @@ export {
22854
22851
  useDataSource,
22855
22852
  useEffectWithChanges,
22856
22853
  useEffectWithObject,
22854
+ useGridScroll,
22857
22855
  useInfiniteColumnCell,
22858
22856
  useInfiniteColumnEditor,
22859
22857
  useInfiniteColumnFilterEditor,
@@ -22861,6 +22859,7 @@ export {
22861
22859
  useMasterRowInfo,
22862
22860
  useOverlay,
22863
22861
  useOverlayPortal,
22864
- useRowInfoReducers
22862
+ useRowInfoReducers,
22863
+ useVisibleColumnSizes
22865
22864
  };
22866
22865
  //!collapsed || lazyLoad;