@infinite-table/infinite-react 4.0.0 → 4.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.dev.js CHANGED
@@ -156,6 +156,7 @@ __export(src_exports, {
156
156
  useDataSource: () => useDataSource,
157
157
  useEffectWithChanges: () => useEffectWithChanges,
158
158
  useEffectWithObject: () => useEffectWithObject,
159
+ useGridScroll: () => useGridScroll,
159
160
  useInfiniteColumnCell: () => useInfiniteColumnCell,
160
161
  useInfiniteColumnEditor: () => useInfiniteColumnEditor,
161
162
  useInfiniteColumnFilterEditor: () => useInfiniteColumnFilterEditor,
@@ -163,7 +164,8 @@ __export(src_exports, {
163
164
  useMasterRowInfo: () => useMasterRowInfo,
164
165
  useOverlay: () => useOverlay,
165
166
  useOverlayPortal: () => useOverlayPortal,
166
- useRowInfoReducers: () => useRowInfoReducers
167
+ useRowInfoReducers: () => useRowInfoReducers,
168
+ useVisibleColumnSizes: () => useVisibleColumnSizes
167
169
  });
168
170
  module.exports = __toCommonJS(src_exports);
169
171
 
@@ -1215,9 +1217,10 @@ var useOnScroll = (domRef, onScroll) => {
1215
1217
  };
1216
1218
 
1217
1219
  // src/components/VirtualScrollContainer/VirtualScrollContainer.css.ts
1218
- 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" };
1219
- 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" };
1220
- 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" };
1220
+ 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" };
1221
+ 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" };
1222
+ 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" };
1223
+ var VirtualScrollContainerChildToScrollCls = "VirtualScrollContainer_VirtualScrollContainerChildToScrollCls__1ueijco1";
1221
1224
  var VirtualScrollContainerCls = "VirtualScrollContainer_VirtualScrollContainerCls__1ueijco0 utilities_boxSizingBorderBox__16lm1iw0";
1222
1225
 
1223
1226
  // src/components/VirtualScrollContainer/getScrollableClassName.ts
@@ -1426,7 +1429,7 @@ var internalProps = {
1426
1429
  };
1427
1430
 
1428
1431
  // src/components/InfiniteTable/vars.css.ts
1429
- 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)" } } };
1432
+ 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)" } } };
1430
1433
  var columnHeaderHeightName = "column-header-height";
1431
1434
 
1432
1435
  // src/components/InfiniteTable/utils/infiniteDOMUtils.ts
@@ -4135,8 +4138,8 @@ var useRerender = () => {
4135
4138
  };
4136
4139
 
4137
4140
  // src/components/InfiniteTable/components/ActiveCellIndicator.css.ts
4138
- 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" };
4139
- 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";
4141
+ 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" };
4142
+ 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";
4140
4143
 
4141
4144
  // src/components/InfiniteTable/components/ActiveRowIndicator.css.ts
4142
4145
  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" };
@@ -4206,13 +4209,6 @@ var import_react9 = require("react");
4206
4209
  var { rootClassName: rootClassName4 } = internalProps;
4207
4210
  var baseCls2 = `${rootClassName4}-ActiveCellIndicator`;
4208
4211
  var columnZIndexAtIndex2 = stripVar(InternalVars.columnZIndexAtIndex);
4209
- var ActiveStyle2 = {
4210
- [stripVar(InternalVars.activeCellOffsetX)]: InternalVars.activeCellColOffset,
4211
- [stripVar(InternalVars.activeCellOffsetY)]: InternalVars.activeCellRowOffset,
4212
- transform: `translate3d(${InternalVars.activeCellOffsetX}, ${InternalVars.activeCellOffsetY}, 0px)`,
4213
- width: InternalVars.activeCellColWidth,
4214
- height: InternalVars.activeCellRowHeight
4215
- };
4216
4212
  var reposition = (brain, activeCellIndex, rowHeight, domRef) => {
4217
4213
  if (activeCellIndex == null) {
4218
4214
  return;
@@ -4251,6 +4247,7 @@ var ActiveCellIndicatorFn = (props) => {
4251
4247
  "div",
4252
4248
  {
4253
4249
  className: ActiveIndicatorWrapperCls,
4250
+ ref: domRef,
4254
4251
  "data-name": "active-cell",
4255
4252
  style: active ? {
4256
4253
  zIndex: `var(${columnZIndexAtIndex2}-${props.activeCellIndex[1]})`
@@ -4259,10 +4256,8 @@ var ActiveCellIndicatorFn = (props) => {
4259
4256
  /* @__PURE__ */ React12.createElement(
4260
4257
  "div",
4261
4258
  {
4262
- ref: domRef,
4263
4259
  "data-name": "active-cell-indicator",
4264
- className: `${baseCls2} ${active ? ActiveCellIndicatorCls.visible : ActiveCellIndicatorCls.hidden}`,
4265
- style: active ? ActiveStyle2 : void 0
4260
+ className: `${baseCls2} ${active ? ActiveCellIndicatorCls.visible : ActiveCellIndicatorCls.hidden}`
4266
4261
  }
4267
4262
  )
4268
4263
  )
@@ -4293,6 +4288,10 @@ function useMatrixBrain(brain, brainOptions, fixedCellsInfo) {
4293
4288
  colspan: brainOptions.colspan
4294
4289
  });
4295
4290
  }
4291
+ var CHILD_TO_SCROLL_CLS = join(
4292
+ scrollTransformTargetCls,
4293
+ VirtualScrollContainerChildToScrollCls
4294
+ );
4296
4295
  function HeadlessTable(props) {
4297
4296
  const _a = props, {
4298
4297
  brain,
@@ -4371,7 +4370,7 @@ function HeadlessTable(props) {
4371
4370
  "div",
4372
4371
  {
4373
4372
  ref: domRef,
4374
- className: scrollTransformTargetCls,
4373
+ className: CHILD_TO_SCROLL_CLS,
4375
4374
  "data-name": "scroll-transform-target"
4376
4375
  },
4377
4376
  /* @__PURE__ */ React13.createElement(
@@ -4799,7 +4798,7 @@ function useComponentState() {
4799
4798
  return React14.useContext(Context);
4800
4799
  }
4801
4800
 
4802
- // src/components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBody.tsx
4801
+ // src/components/InfiniteTable/components/InfiniteTableFooter/InfiniteTableFooter.tsx
4803
4802
  var React15 = __toESM(require("react"));
4804
4803
 
4805
4804
  // src/components/InfiniteTable/hooks/useInternalProps.ts
@@ -4826,49 +4825,25 @@ var userSelect = { none: "utilities_userSelect_none__16lm1iw17" };
4826
4825
  var visibility = { visible: "utilities_visibility_visible__16lm1iw20", hidden: "utilities_visibility_hidden__16lm1iw21" };
4827
4826
  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" };
4828
4827
 
4829
- // src/components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBody.tsx
4830
- var InfiniteTableBody = React15.forwardRef(function InfiniteTableBody2(props, ref) {
4828
+ // src/components/InfiniteTable/components/InfiniteTableFooter/InfiniteTableFooter.tsx
4829
+ function InfiniteTableFooter(props) {
4831
4830
  const { rootClassName: rootClassName12 } = useInternalProps();
4832
4831
  return /* @__PURE__ */ React15.createElement(
4833
4832
  "div",
4834
- __spreadProps(__spreadValues({
4835
- ref
4836
- }, props), {
4833
+ __spreadProps(__spreadValues({}, props), {
4837
4834
  className: join(
4838
- `${rootClassName12}Body`,
4835
+ `${rootClassName12}Footer`,
4839
4836
  position.relative,
4840
- flex["1"],
4841
- transformTranslateZero,
4837
+ display.flex,
4838
+ flexFlow.row,
4842
4839
  props.className
4843
4840
  )
4844
4841
  })
4845
4842
  );
4846
- });
4847
-
4848
- // src/components/InfiniteTable/components/InfiniteTableFooter/InfiniteTableFooter.tsx
4849
- var React16 = __toESM(require("react"));
4850
- var InfiniteTableFooter = React16.forwardRef(
4851
- function InfiniteTableFooter2(props, ref) {
4852
- const { rootClassName: rootClassName12 } = useInternalProps();
4853
- return /* @__PURE__ */ React16.createElement(
4854
- "div",
4855
- __spreadProps(__spreadValues({
4856
- ref
4857
- }, props), {
4858
- className: join(
4859
- `${rootClassName12}Footer`,
4860
- position.relative,
4861
- display.flex,
4862
- flexFlow.row,
4863
- props.className
4864
- )
4865
- })
4866
- );
4867
- }
4868
- );
4843
+ }
4869
4844
 
4870
4845
  // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
4871
- var React43 = __toESM(require("react"));
4846
+ var React42 = __toESM(require("react"));
4872
4847
  var import_react29 = require("react");
4873
4848
  var import_react_dom = require("react-dom");
4874
4849
 
@@ -4882,7 +4857,7 @@ function keyMirror(obj) {
4882
4857
  }
4883
4858
 
4884
4859
  // src/components/InfiniteTable/components/icons/Icon.tsx
4885
- var React17 = __toESM(require("react"));
4860
+ var React16 = __toESM(require("react"));
4886
4861
  var Icon = (props) => {
4887
4862
  var _a;
4888
4863
  const size = (_a = props.size) != null ? _a : `var(--infinite-icon-size)`;
@@ -4894,69 +4869,69 @@ var Icon = (props) => {
4894
4869
  }, props.style);
4895
4870
  return (
4896
4871
  //@ts-ignore
4897
- /* @__PURE__ */ React17.createElement("svg", __spreadProps(__spreadValues({ viewBox: "0 0 24 24" }, props), { style: style2 }), props.children)
4872
+ /* @__PURE__ */ React16.createElement("svg", __spreadProps(__spreadValues({ viewBox: "0 0 24 24" }, props), { style: style2 }), props.children)
4898
4873
  );
4899
4874
  };
4900
4875
 
4901
4876
  // src/components/InfiniteTable/components/icons/IncludesOperatorIcon.tsx
4902
- var React18 = __toESM(require("react"));
4877
+ var React17 = __toESM(require("react"));
4903
4878
  var IncludesOperatorIcon = (props) => {
4904
- return /* @__PURE__ */ React18.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React18.createElement("path", { d: "M5,4V7H10.5V19H13.5V7H19V4H5Z" }));
4879
+ return /* @__PURE__ */ React17.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React17.createElement("path", { d: "M5,4V7H10.5V19H13.5V7H19V4H5Z" }));
4905
4880
  };
4906
4881
 
4907
4882
  // src/components/InfiniteTable/components/icons/EndsWithOperatorIcon.tsx
4908
- var React19 = __toESM(require("react"));
4883
+ var React18 = __toESM(require("react"));
4909
4884
  var EndsWithOperatorIcon = (props) => {
4910
- 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" }));
4885
+ 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" }));
4911
4886
  };
4912
4887
 
4913
4888
  // src/components/InfiniteTable/components/icons/EqualOperatorIcon.tsx
4914
- var React20 = __toESM(require("react"));
4889
+ var React19 = __toESM(require("react"));
4915
4890
  var EqualOperatorIcon = (props) => {
4916
- return /* @__PURE__ */ React20.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React20.createElement("path", { d: "M19,10H5V8H19V10M19,16H5V14H19V16Z" }));
4891
+ return /* @__PURE__ */ React19.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React19.createElement("path", { d: "M19,10H5V8H19V10M19,16H5V14H19V16Z" }));
4917
4892
  };
4918
4893
 
4919
4894
  // src/components/InfiniteTable/components/icons/GTEOperatorIcon.tsx
4920
- var React21 = __toESM(require("react"));
4895
+ var React20 = __toESM(require("react"));
4921
4896
  var GTEOperatorIcon = (props) => {
4922
- 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" }));
4897
+ 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" }));
4923
4898
  };
4924
4899
 
4925
4900
  // src/components/InfiniteTable/components/icons/GTOperatorIcon.tsx
4926
- var React22 = __toESM(require("react"));
4901
+ var React21 = __toESM(require("react"));
4927
4902
  var GTOperatorIcon = (props) => {
4928
- 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" }));
4903
+ 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" }));
4929
4904
  };
4930
4905
 
4931
4906
  // src/components/InfiniteTable/components/icons/LTEOperatorIcon.tsx
4932
- var React23 = __toESM(require("react"));
4907
+ var React22 = __toESM(require("react"));
4933
4908
  var LTEOperatorIcon = (props) => {
4934
- 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" }));
4909
+ 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" }));
4935
4910
  };
4936
4911
 
4937
4912
  // src/components/InfiniteTable/components/icons/LTOperatorIcon.tsx
4938
- var React24 = __toESM(require("react"));
4913
+ var React23 = __toESM(require("react"));
4939
4914
  var LTOperatorIcon = (props) => {
4940
- 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" }));
4915
+ 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" }));
4941
4916
  };
4942
4917
 
4943
4918
  // src/components/InfiniteTable/components/icons/NotEqualOperatorIcon.tsx
4944
- var React25 = __toESM(require("react"));
4919
+ var React24 = __toESM(require("react"));
4945
4920
  var NotEqualOperatorIcon = (props) => {
4946
- return /* @__PURE__ */ React25.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React25.createElement("path", { d: "M21,10H9V8H21V10M21,16H9V14H21V16M4,5H6V16H4V5M6,18V20H4V18H6Z" }));
4921
+ return /* @__PURE__ */ React24.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React24.createElement("path", { d: "M21,10H9V8H21V10M21,16H9V14H21V16M4,5H6V16H4V5M6,18V20H4V18H6Z" }));
4947
4922
  };
4948
4923
 
4949
4924
  // src/components/InfiniteTable/components/icons/StartsWithOperatorIcon.tsx
4950
- var React26 = __toESM(require("react"));
4925
+ var React25 = __toESM(require("react"));
4951
4926
  var StartsWithOperatorIcon = (props) => {
4952
- 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" }));
4927
+ 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" }));
4953
4928
  };
4954
4929
 
4955
4930
  // src/components/InfiniteTable/components/FilterEditors.tsx
4956
- var React30 = __toESM(require("react"));
4931
+ var React29 = __toESM(require("react"));
4957
4932
 
4958
4933
  // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableColumnHeaderFilter.tsx
4959
- var React29 = __toESM(require("react"));
4934
+ var React28 = __toESM(require("react"));
4960
4935
  var import_react20 = require("react");
4961
4936
 
4962
4937
  // src/components/InfiniteTable/hooks/useInfiniteTable.ts
@@ -4989,7 +4964,7 @@ var useInfiniteTableState = () => {
4989
4964
  };
4990
4965
 
4991
4966
  // src/components/InfiniteTable/components/icons/FilterIcon.tsx
4992
- var React27 = __toESM(require("react"));
4967
+ var React26 = __toESM(require("react"));
4993
4968
  var import_react18 = require("react");
4994
4969
 
4995
4970
  // ../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js
@@ -5163,7 +5138,7 @@ function FilterIcon(props) {
5163
5138
  return null;
5164
5139
  }
5165
5140
  const indexStyle = {};
5166
- return /* @__PURE__ */ React27.createElement(
5141
+ return /* @__PURE__ */ React26.createElement(
5167
5142
  "div",
5168
5143
  {
5169
5144
  "data-name": "filter-icon",
@@ -5175,7 +5150,7 @@ function FilterIcon(props) {
5175
5150
  `${InfiniteTableIconClassName}-sort`
5176
5151
  )
5177
5152
  },
5178
- showIndex ? /* @__PURE__ */ React27.createElement(
5153
+ showIndex ? /* @__PURE__ */ React26.createElement(
5179
5154
  "div",
5180
5155
  {
5181
5156
  "data-name": "index",
@@ -5184,9 +5159,9 @@ function FilterIcon(props) {
5184
5159
  },
5185
5160
  index
5186
5161
  ) : null,
5187
- /* @__PURE__ */ React27.createElement("div", { style: __spreadValues({ width: sizes[0] }, lineStyle) }),
5188
- /* @__PURE__ */ React27.createElement("div", { style: __spreadValues({ width: sizes[1] }, lineStyle) }),
5189
- /* @__PURE__ */ React27.createElement("div", { style: __spreadValues({ width: sizes[2] }, lineStyle) })
5162
+ /* @__PURE__ */ React26.createElement("div", { style: __spreadValues({ width: sizes[0] }, lineStyle) }),
5163
+ /* @__PURE__ */ React26.createElement("div", { style: __spreadValues({ width: sizes[1] }, lineStyle) }),
5164
+ /* @__PURE__ */ React26.createElement("div", { style: __spreadValues({ width: sizes[2] }, lineStyle) })
5190
5165
  );
5191
5166
  }
5192
5167
 
@@ -6245,14 +6220,14 @@ function InfiniteTableColumnHeaderFilter(props) {
6245
6220
  const FilterEditor = props.filterEditor;
6246
6221
  const FilterOperatorSwitch = props.filterOperatorSwitch;
6247
6222
  const [focused, setFocused] = (0, import_react20.useState)(false);
6248
- const onFocus = React29.useCallback(() => {
6223
+ const onFocus = React28.useCallback(() => {
6249
6224
  setFocused(true);
6250
6225
  }, []);
6251
- const onBlur = React29.useCallback(() => {
6226
+ const onBlur = React28.useCallback(() => {
6252
6227
  setFocused(false);
6253
6228
  }, []);
6254
6229
  const active = filterOperatorMenuVisibleForColumnId === column.id || focused;
6255
- return /* @__PURE__ */ React29.createElement(
6230
+ return /* @__PURE__ */ React28.createElement(
6256
6231
  "div",
6257
6232
  {
6258
6233
  onPointerUp: stopPropagation,
@@ -6266,14 +6241,14 @@ function InfiniteTableColumnHeaderFilter(props) {
6266
6241
  )}`,
6267
6242
  style: { height: props.columnHeaderHeight }
6268
6243
  },
6269
- /* @__PURE__ */ React29.createElement(InfiniteTableColumnHeaderFilterContext.Provider, { value: props }, /* @__PURE__ */ React29.createElement(FilterOperatorSwitch, null), /* @__PURE__ */ React29.createElement(FilterEditor, null))
6244
+ /* @__PURE__ */ React28.createElement(InfiniteTableColumnHeaderFilterContext.Provider, { value: props }, /* @__PURE__ */ React28.createElement(FilterOperatorSwitch, null), /* @__PURE__ */ React28.createElement(FilterEditor, null))
6270
6245
  );
6271
6246
  }
6272
6247
  function InfiniteTableFilterOperatorSwitch() {
6273
6248
  var _a, _b;
6274
6249
  const { columnApi, disabled, operator } = useInfiniteColumnFilterEditor();
6275
6250
  const Icon2 = (_b = (_a = operator == null ? void 0 : operator.components) == null ? void 0 : _a.Icon) != null ? _b : FilterIcon;
6276
- return /* @__PURE__ */ React29.createElement(
6251
+ return /* @__PURE__ */ React28.createElement(
6277
6252
  "div",
6278
6253
  {
6279
6254
  "data-name": "filter-operator",
@@ -6291,7 +6266,7 @@ function InfiniteTableFilterOperatorSwitch() {
6291
6266
  disabled ? `${InfiniteTableColumnHeaderFilterOperatorClassName}--disabled` : ""
6292
6267
  )
6293
6268
  },
6294
- /* @__PURE__ */ React29.createElement(
6269
+ /* @__PURE__ */ React28.createElement(
6295
6270
  Icon2,
6296
6271
  {
6297
6272
  size: 20,
@@ -6303,7 +6278,7 @@ function InfiniteTableFilterOperatorSwitch() {
6303
6278
  );
6304
6279
  }
6305
6280
  function InfiniteTableColumnHeaderFilterEmpty() {
6306
- return /* @__PURE__ */ React29.createElement(
6281
+ return /* @__PURE__ */ React28.createElement(
6307
6282
  "div",
6308
6283
  {
6309
6284
  onPointerUp: stopPropagation,
@@ -6320,7 +6295,7 @@ function useInfiniteColumnFilterEditor() {
6320
6295
  const context = useInfiniteTable();
6321
6296
  const { column, columnApi } = useInfiniteHeaderCell();
6322
6297
  const columnLabel = getColumnLabel(column, context);
6323
- const filterContextValue = React29.useContext(
6298
+ const filterContextValue = React28.useContext(
6324
6299
  InfiniteTableColumnHeaderFilterContext
6325
6300
  );
6326
6301
  const { columnFilterType, filterTypes, columnFilterValue } = filterContextValue;
@@ -6328,17 +6303,17 @@ function useInfiniteColumnFilterEditor() {
6328
6303
  const [theValue, setTheValue] = (0, import_react20.useState)(
6329
6304
  (_a = columnFilterValue == null ? void 0 : columnFilterValue.filter.value) != null ? _a : ""
6330
6305
  );
6331
- const onInputChange = React29.useCallback(
6306
+ const onInputChange = React28.useCallback(
6332
6307
  (filterValue) => {
6333
6308
  setTheValue(filterValue);
6334
6309
  filterContextValue.onChange(filterValue);
6335
6310
  },
6336
6311
  [filterContextValue.onChange]
6337
6312
  );
6338
- const clearValue = React29.useCallback(() => {
6313
+ const clearValue = React28.useCallback(() => {
6339
6314
  context.api.clearColumnFilter(column.id);
6340
6315
  }, [column.id]);
6341
- const removeColumnFilter = React29.useCallback(() => {
6316
+ const removeColumnFilter = React28.useCallback(() => {
6342
6317
  context.api.removeColumnFilter(column.id);
6343
6318
  }, [column.id]);
6344
6319
  (0, import_react20.useEffect)(() => {
@@ -6381,7 +6356,7 @@ function useInfiniteColumnFilterEditor() {
6381
6356
  // src/components/InfiniteTable/components/FilterEditors.tsx
6382
6357
  function StringFilterEditor() {
6383
6358
  const { ariaLabel, value, setValue, className, disabled } = useInfiniteColumnFilterEditor();
6384
- return /* @__PURE__ */ React30.createElement(
6359
+ return /* @__PURE__ */ React29.createElement(
6385
6360
  "input",
6386
6361
  {
6387
6362
  "data-xxx": true,
@@ -6398,7 +6373,7 @@ function StringFilterEditor() {
6398
6373
  }
6399
6374
  function NumberFilterEditor() {
6400
6375
  const { ariaLabel, value, setValue, className, disabled } = useInfiniteColumnFilterEditor();
6401
- return /* @__PURE__ */ React30.createElement(
6376
+ return /* @__PURE__ */ React29.createElement(
6402
6377
  "input",
6403
6378
  {
6404
6379
  "aria-label": ariaLabel,
@@ -6639,6 +6614,17 @@ var rafFn = (fn) => {
6639
6614
  };
6640
6615
 
6641
6616
  // src/components/InfiniteTable/hooks/useDOMProps.ts
6617
+ var publicRuntimeVars = {
6618
+ bodyWidth: { name: stripVar(ThemeVars.runtime.bodyWidth), value: "" },
6619
+ totalVisibleColumnsWidth: {
6620
+ name: stripVar(ThemeVars.runtime.totalVisibleColumnsWidth),
6621
+ value: ""
6622
+ },
6623
+ visibleColumnsCount: {
6624
+ name: stripVar(ThemeVars.runtime.visibleColumnsCount),
6625
+ value: ""
6626
+ }
6627
+ };
6642
6628
  var scrollbarWidthHorizontal = stripVar(
6643
6629
  InternalVars.scrollbarWidthHorizontal
6644
6630
  );
@@ -6694,6 +6680,7 @@ function useDOMProps(initialDOMProps) {
6694
6680
  computedPinnedStartColumns,
6695
6681
  computedPinnedEndColumns,
6696
6682
  computedVisibleColumns,
6683
+ computedUnpinnedColumnsWidth,
6697
6684
  scrollbars
6698
6685
  } = computed;
6699
6686
  const prevPinnedEndCols = [];
@@ -6719,6 +6706,9 @@ function useDOMProps(initialDOMProps) {
6719
6706
  },
6720
6707
  {}
6721
6708
  );
6709
+ cssVars[publicRuntimeVars.bodyWidth.name] = `calc(${InternalVars.bodyWidth} - ${InternalVars.scrollbarWidthVertical})`;
6710
+ cssVars[publicRuntimeVars.totalVisibleColumnsWidth.name] = `${computedPinnedStartColumnsWidth + computedPinnedEndColumnsWidth + computedUnpinnedColumnsWidth}px`;
6711
+ cssVars[publicRuntimeVars.visibleColumnsCount.name] = computedVisibleColumns.length;
6722
6712
  if (activeCellIndex != null) {
6723
6713
  cssVars[activeCellColWidth] = `var(${getCSSVarNameForColWidth(
6724
6714
  activeCellIndex[1]
@@ -7458,14 +7448,14 @@ var useColumnPointerEvents = ({
7458
7448
  };
7459
7449
 
7460
7450
  // src/components/InfiniteTable/utils/RenderHookComponentForInfinite.tsx
7461
- var React38 = __toESM(require("react"));
7451
+ var React37 = __toESM(require("react"));
7462
7452
 
7463
7453
  // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx
7464
- var React37 = __toESM(require("react"));
7454
+ var React36 = __toESM(require("react"));
7465
7455
  var import_react25 = require("react");
7466
7456
 
7467
7457
  // src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
7468
- var React33 = __toESM(require("react"));
7458
+ var React32 = __toESM(require("react"));
7469
7459
 
7470
7460
  // src/components/DataSource/state/rowInfoStatus.ts
7471
7461
  var showLoadingIcon = (rowInfo) => {
@@ -7476,7 +7466,7 @@ var showLoadingIcon = (rowInfo) => {
7476
7466
  };
7477
7467
 
7478
7468
  // src/components/InfiniteTable/components/icons/ExpanderIcon.tsx
7479
- var React31 = __toESM(require("react"));
7469
+ var React30 = __toESM(require("react"));
7480
7470
  var import_react22 = require("react");
7481
7471
 
7482
7472
  // src/components/InfiniteTable/components/icons/ExpanderIcon.css.ts
@@ -7497,12 +7487,12 @@ function ExpanderIcon(props) {
7497
7487
  setExpanded(!expanded);
7498
7488
  }
7499
7489
  };
7500
- React31.useEffect(() => {
7490
+ React30.useEffect(() => {
7501
7491
  if (isControlled("expanded", props)) {
7502
7492
  setExpanded(props.expanded);
7503
7493
  }
7504
7494
  }, [props.expanded]);
7505
- return /* @__PURE__ */ React31.createElement(
7495
+ return /* @__PURE__ */ React30.createElement(
7506
7496
  "svg",
7507
7497
  {
7508
7498
  "data-name": "expander-icon",
@@ -7525,19 +7515,19 @@ function ExpanderIcon(props) {
7525
7515
  `InfiniteIcon-expander--${direction === "end" ? "end" : "start"}`
7526
7516
  )
7527
7517
  },
7528
- /* @__PURE__ */ React31.createElement("path", { d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" })
7518
+ /* @__PURE__ */ React30.createElement("path", { d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" })
7529
7519
  );
7530
7520
  }
7531
7521
 
7532
7522
  // src/components/InfiniteTable/components/icons/LoadingIcon.tsx
7533
- var React32 = __toESM(require("react"));
7523
+ var React31 = __toESM(require("react"));
7534
7524
 
7535
7525
  // src/components/InfiniteTable/components/icons/LoadingIcon.css.ts
7536
7526
  var LoadingIconCls = "utilities_stroke_accentColor__16lm1iwb utilities_flex_none__16lm1iwn utilities_cursor_pointer__16lm1iwi";
7537
7527
 
7538
7528
  // src/components/InfiniteTable/components/icons/LoadingIcon.tsx
7539
7529
  var LoadingIcon = (props) => {
7540
- return /* @__PURE__ */ React32.createElement(
7530
+ return /* @__PURE__ */ React31.createElement(
7541
7531
  "svg",
7542
7532
  {
7543
7533
  xmlns: "http://www.w3.org/2000/svg",
@@ -7557,7 +7547,7 @@ var LoadingIcon = (props) => {
7557
7547
  "InfiniteIcon-loading"
7558
7548
  )
7559
7549
  },
7560
- /* @__PURE__ */ React32.createElement(
7550
+ /* @__PURE__ */ React31.createElement(
7561
7551
  "circle",
7562
7552
  {
7563
7553
  cx: "50",
@@ -7567,7 +7557,7 @@ var LoadingIcon = (props) => {
7567
7557
  r: "35",
7568
7558
  strokeDasharray: "164.93361431346415 56.97787143782138"
7569
7559
  },
7570
- /* @__PURE__ */ React32.createElement(
7560
+ /* @__PURE__ */ React31.createElement(
7571
7561
  "animateTransform",
7572
7562
  {
7573
7563
  attributeName: "transform",
@@ -7612,11 +7602,11 @@ function getGroupColumnRender({
7612
7602
  );
7613
7603
  if (groupRenderStrategy === "multi-column") {
7614
7604
  if (groupIndexForColumn + 1 !== groupRowInfo.groupNesting && groupRowInfo.isGroupRow) {
7615
- return selectionCheckBox ? /* @__PURE__ */ React33.createElement("div", { className }, selectionCheckBox) : null;
7605
+ return selectionCheckBox ? /* @__PURE__ */ React32.createElement("div", { className }, selectionCheckBox) : null;
7616
7606
  }
7617
7607
  } else if (groupRenderStrategy === "single-column" && !groupRowInfo.isGroupRow) {
7618
7608
  }
7619
- return /* @__PURE__ */ React33.createElement("div", { className }, groupIcon, selectionCheckBox, /* @__PURE__ */ React33.createElement("div", { className: cssEllipsisClassName }, valueToRender != null ? valueToRender : null));
7609
+ return /* @__PURE__ */ React32.createElement("div", { className }, groupIcon, selectionCheckBox, /* @__PURE__ */ React32.createElement("div", { className: cssEllipsisClassName }, valueToRender != null ? valueToRender : null));
7620
7610
  };
7621
7611
  }
7622
7612
  function getGroupColumnRenderGroupIcon({
@@ -7665,9 +7655,9 @@ function getGroupColumnRenderGroupIcon({
7665
7655
  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);
7666
7656
  const isLoading = showLoadingIcon(groupRowInfo);
7667
7657
  if (isLoading) {
7668
- icon = /* @__PURE__ */ React33.createElement(LoadingIcon, null);
7658
+ icon = /* @__PURE__ */ React32.createElement(LoadingIcon, null);
7669
7659
  } else if (showExpanderIcon) {
7670
- const defaultIcon = /* @__PURE__ */ React33.createElement(
7660
+ const defaultIcon = /* @__PURE__ */ React32.createElement(
7671
7661
  ExpanderIcon,
7672
7662
  {
7673
7663
  expanded: !collapsed,
@@ -7681,7 +7671,7 @@ function getGroupColumnRenderGroupIcon({
7681
7671
  }
7682
7672
  if (initialRenderGroupIcon) {
7683
7673
  renderOptions.renderBag.groupIcon = icon;
7684
- icon = /* @__PURE__ */ React33.createElement(
7674
+ icon = /* @__PURE__ */ React32.createElement(
7685
7675
  RenderCellHookComponent,
7686
7676
  {
7687
7677
  render: initialRenderGroupIcon,
@@ -7761,7 +7751,7 @@ var ColumnCellSelectionIndicatorRecipe = createRuntimeFn({ defaultClassName: "ce
7761
7751
  var SelectionCheckboxCls = "cell_SelectionCheckboxCls__1eexc2a7";
7762
7752
 
7763
7753
  // src/components/InfiniteTable/components/CheckBox.tsx
7764
- var React34 = __toESM(require("react"));
7754
+ var React33 = __toESM(require("react"));
7765
7755
  var import_react23 = require("react");
7766
7756
 
7767
7757
  // src/components/InfiniteTable/components/CheckBox.css.ts
@@ -7800,7 +7790,7 @@ function InfiniteCheckBoxComponent() {
7800
7790
  (0, import_react23.useEffect)(() => {
7801
7791
  inputRef.current.indeterminate = checked == null;
7802
7792
  }, [checked]);
7803
- return /* @__PURE__ */ React34.createElement(
7793
+ return /* @__PURE__ */ React33.createElement(
7804
7794
  "input",
7805
7795
  __spreadProps(__spreadValues({}, domProps), {
7806
7796
  className: join("InfiniteCheckBox", CheckBoxCls, domProps == null ? void 0 : domProps.className),
@@ -7818,7 +7808,7 @@ function InfiniteCheckBoxComponent() {
7818
7808
  );
7819
7809
  }
7820
7810
  function InfiniteCheckBox(props) {
7821
- return /* @__PURE__ */ React34.createElement(InfiniteCheckBoxRoot, __spreadValues({}, props), /* @__PURE__ */ React34.createElement(InfiniteCheckBoxComponent, null));
7811
+ return /* @__PURE__ */ React33.createElement(InfiniteCheckBoxRoot, __spreadValues({}, props), /* @__PURE__ */ React33.createElement(InfiniteCheckBoxComponent, null));
7822
7812
  }
7823
7813
 
7824
7814
  // src/components/InfiniteTable/components/InfiniteTableRow/columnRendering.tsx
@@ -8129,7 +8119,7 @@ function getFormattedValueContextForCell(options) {
8129
8119
  }
8130
8120
 
8131
8121
  // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
8132
- var React35 = __toESM(require("react"));
8122
+ var React34 = __toESM(require("react"));
8133
8123
  var { rootClassName: rootClassName5 } = internalProps;
8134
8124
  var InfiniteTableCellClassName = `${rootClassName5}Cell`;
8135
8125
  var InfiniteTableCellContentClassName = `${rootClassName5}Cell_content`;
@@ -8188,7 +8178,7 @@ function InfiniteTableCellFn(props) {
8188
8178
  // ? `${InfiniteTableCellClassName}--shifting ${CellClsVariants.shifting}`
8189
8179
  // : '',
8190
8180
  ),
8191
- children: /* @__PURE__ */ React35.createElement(React35.Fragment, null, beforeChildren, /* @__PURE__ */ React35.createElement(
8181
+ children: /* @__PURE__ */ React34.createElement(React34.Fragment, null, beforeChildren, /* @__PURE__ */ React34.createElement(
8192
8182
  "div",
8193
8183
  {
8194
8184
  className: join(
@@ -8206,21 +8196,21 @@ function InfiniteTableCellFn(props) {
8206
8196
  }
8207
8197
  const RenderComponent = cellType === "body" ? (_b = column.components) == null ? void 0 : _b.ColumnCell : (_c = column.components) == null ? void 0 : _c.HeaderCell;
8208
8198
  if (RenderComponent) {
8209
- return /* @__PURE__ */ React35.createElement(RenderComponent, __spreadValues({}, finalDOMProps));
8199
+ return /* @__PURE__ */ React34.createElement(RenderComponent, __spreadValues({}, finalDOMProps));
8210
8200
  }
8211
- return /* @__PURE__ */ React35.createElement("div", __spreadProps(__spreadValues({}, finalDOMProps), { ref: domRef }));
8201
+ return /* @__PURE__ */ React34.createElement("div", __spreadProps(__spreadValues({}, finalDOMProps), { ref: domRef }));
8212
8202
  }
8213
- var InfiniteTableCell = React35.memo(
8203
+ var InfiniteTableCell = React34.memo(
8214
8204
  InfiniteTableCellFn
8215
8205
  );
8216
8206
 
8217
8207
  // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnEditor.tsx
8218
- var React36 = __toESM(require("react"));
8208
+ var React35 = __toESM(require("react"));
8219
8209
  var import_react24 = require("react");
8220
8210
  function InfiniteTableColumnEditor() {
8221
8211
  const { initialValue, setValue, confirmEdit, cancelEdit, readOnly } = useInfiniteColumnEditor();
8222
8212
  const domRef = (0, import_react24.useRef)();
8223
- const refCallback = React36.useCallback((node) => {
8213
+ const refCallback = React35.useCallback((node) => {
8224
8214
  domRef.current = node;
8225
8215
  if (node) {
8226
8216
  node.focus();
@@ -8236,7 +8226,7 @@ function InfiniteTableColumnEditor() {
8236
8226
  event.stopPropagation();
8237
8227
  }
8238
8228
  }, []);
8239
- return /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(
8229
+ return /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement(
8240
8230
  "input",
8241
8231
  {
8242
8232
  readOnly,
@@ -8256,11 +8246,11 @@ function InfiniteTableColumnEditor() {
8256
8246
  // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx
8257
8247
  var { rootClassName: rootClassName6 } = internalProps;
8258
8248
  var columnZIndexAtIndex4 = stripVar(InternalVars.columnZIndexAtIndex);
8259
- var InfiniteTableColumnCellContext = React37.createContext(null);
8249
+ var InfiniteTableColumnCellContext = React36.createContext(null);
8260
8250
  var InfiniteTableColumnCellClassName = `${rootClassName6}ColumnCell`;
8261
8251
  var defaultRenderRowDetailIcon = (params) => {
8262
8252
  const { toggleCurrentRowDetails, rowDetailState } = params;
8263
- return /* @__PURE__ */ React37.createElement(
8253
+ return /* @__PURE__ */ React36.createElement(
8264
8254
  ExpanderIcon,
8265
8255
  {
8266
8256
  style: {
@@ -8281,7 +8271,7 @@ var defaultRenderSelectionCheckBox = (params) => {
8281
8271
  } = params;
8282
8272
  if (rowInfo.isGroupRow && !column.groupByForColumn) {
8283
8273
  }
8284
- return /* @__PURE__ */ React37.createElement(
8274
+ return /* @__PURE__ */ React36.createElement(
8285
8275
  InfiniteCheckBox,
8286
8276
  {
8287
8277
  domProps: {
@@ -8333,7 +8323,7 @@ function InfiniteTableColumnCellFn(props) {
8333
8323
  showZebraRows
8334
8324
  } = props;
8335
8325
  if (!column) {
8336
- return /* @__PURE__ */ React37.createElement("div", { ref: domRef }, "no column");
8326
+ return /* @__PURE__ */ React36.createElement("div", { ref: domRef }, "no column");
8337
8327
  }
8338
8328
  const { rowSelected } = rowInfo;
8339
8329
  const {
@@ -8380,7 +8370,7 @@ function InfiniteTableColumnCellFn(props) {
8380
8370
  } = colRenderingParams;
8381
8371
  const { align: align2, verticalAlign } = renderParams;
8382
8372
  const renderParam = renderParams;
8383
- const renderParamRef = React37.useRef(renderParam);
8373
+ const renderParamRef = React36.useRef(renderParam);
8384
8374
  const onClick = (0, import_react25.useCallback)(
8385
8375
  (event) => {
8386
8376
  const colIndex = column.computedVisibleIndex;
@@ -8434,7 +8424,7 @@ function InfiniteTableColumnCellFn(props) {
8434
8424
  [rowInfo]
8435
8425
  );
8436
8426
  const EditorComponent = (_b = (_a = column.components) == null ? void 0 : _a.Editor) != null ? _b : InfiniteTableColumnEditor;
8437
- const editor = inEdit ? /* @__PURE__ */ React37.createElement(CellEditorContextComponent, { contextValue: renderParam }, /* @__PURE__ */ React37.createElement(EditorComponent, null)) : null;
8427
+ const editor = inEdit ? /* @__PURE__ */ React36.createElement(CellEditorContextComponent, { contextValue: renderParam }, /* @__PURE__ */ React36.createElement(EditorComponent, null)) : null;
8438
8428
  const renderChildren = (0, import_react25.useCallback)(
8439
8429
  once(() => {
8440
8430
  if (hidden) {
@@ -8444,7 +8434,7 @@ function InfiniteTableColumnCellFn(props) {
8444
8434
  return null;
8445
8435
  }
8446
8436
  if (renderFunctions.renderGroupIcon) {
8447
- renderParam.renderBag.groupIcon = /* @__PURE__ */ React37.createElement(
8437
+ renderParam.renderBag.groupIcon = /* @__PURE__ */ React36.createElement(
8448
8438
  RenderCellHookComponent,
8449
8439
  {
8450
8440
  render: renderFunctions.renderGroupIcon,
@@ -8455,7 +8445,7 @@ function InfiniteTableColumnCellFn(props) {
8455
8445
  );
8456
8446
  }
8457
8447
  if (renderFunctions.renderSelectionCheckBox && selectionMode == "multi-row") {
8458
- renderParam.renderBag.selectionCheckBox = /* @__PURE__ */ React37.createElement(
8448
+ renderParam.renderBag.selectionCheckBox = /* @__PURE__ */ React36.createElement(
8459
8449
  RenderCellHookComponent,
8460
8450
  {
8461
8451
  render: defaultRenderSelectionCheckBox,
@@ -8463,7 +8453,7 @@ function InfiniteTableColumnCellFn(props) {
8463
8453
  }
8464
8454
  );
8465
8455
  if (renderFunctions.renderSelectionCheckBox !== true) {
8466
- renderParam.renderBag.selectionCheckBox = /* @__PURE__ */ React37.createElement(
8456
+ renderParam.renderBag.selectionCheckBox = /* @__PURE__ */ React36.createElement(
8467
8457
  RenderCellHookComponent,
8468
8458
  {
8469
8459
  render: renderFunctions.renderSelectionCheckBox,
@@ -8475,7 +8465,7 @@ function InfiniteTableColumnCellFn(props) {
8475
8465
  }
8476
8466
  }
8477
8467
  if (renderFunctions.renderRowDetailIcon) {
8478
- renderParam.renderBag.rowDetailsIcon = /* @__PURE__ */ React37.createElement(
8468
+ renderParam.renderBag.rowDetailsIcon = /* @__PURE__ */ React36.createElement(
8479
8469
  RenderCellHookComponent,
8480
8470
  {
8481
8471
  render: defaultRenderRowDetailIcon,
@@ -8485,7 +8475,7 @@ function InfiniteTableColumnCellFn(props) {
8485
8475
  }
8486
8476
  );
8487
8477
  if (typeof renderFunctions.renderRowDetailIcon === "function") {
8488
- renderParam.renderBag.rowDetailsIcon = /* @__PURE__ */ React37.createElement(
8478
+ renderParam.renderBag.rowDetailsIcon = /* @__PURE__ */ React36.createElement(
8489
8479
  RenderCellHookComponent,
8490
8480
  {
8491
8481
  render: renderFunctions.renderRowDetailIcon,
@@ -8497,7 +8487,7 @@ function InfiniteTableColumnCellFn(props) {
8497
8487
  }
8498
8488
  }
8499
8489
  if (renderFunctions.renderValue) {
8500
- renderParam.renderBag.value = /* @__PURE__ */ React37.createElement(
8490
+ renderParam.renderBag.value = /* @__PURE__ */ React36.createElement(
8501
8491
  RenderCellHookComponent,
8502
8492
  {
8503
8493
  render: renderFunctions.renderValue,
@@ -8508,7 +8498,7 @@ function InfiniteTableColumnCellFn(props) {
8508
8498
  );
8509
8499
  }
8510
8500
  if (rowInfo.isGroupRow && renderFunctions.renderGroupValue) {
8511
- renderParam.renderBag.value = /* @__PURE__ */ React37.createElement(
8501
+ renderParam.renderBag.value = /* @__PURE__ */ React36.createElement(
8512
8502
  RenderCellHookComponent,
8513
8503
  {
8514
8504
  render: renderFunctions.renderGroupValue,
@@ -8519,7 +8509,7 @@ function InfiniteTableColumnCellFn(props) {
8519
8509
  );
8520
8510
  }
8521
8511
  if (!rowInfo.isGroupRow && renderFunctions.renderLeafValue) {
8522
- renderParam.renderBag.value = /* @__PURE__ */ React37.createElement(
8512
+ renderParam.renderBag.value = /* @__PURE__ */ React36.createElement(
8523
8513
  RenderCellHookComponent,
8524
8514
  {
8525
8515
  render: renderFunctions.renderLeafValue,
@@ -8534,9 +8524,9 @@ function InfiniteTableColumnCellFn(props) {
8534
8524
  if (valueToRender instanceof Date) {
8535
8525
  valueToRender = valueToRender.toLocaleDateString();
8536
8526
  }
8537
- 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);
8527
+ 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);
8538
8528
  if (column.render) {
8539
- return /* @__PURE__ */ React37.createElement(
8529
+ return /* @__PURE__ */ React36.createElement(
8540
8530
  RenderCellHookComponent,
8541
8531
  {
8542
8532
  render: column.render,
@@ -8698,16 +8688,16 @@ function InfiniteTableColumnCellFn(props) {
8698
8688
  return (
8699
8689
  // this context is here for supporting useInfiniteColumnCell to be used
8700
8690
  // with a custom column component, specified via column.components.ColumnCell
8701
- /* @__PURE__ */ React37.createElement(
8691
+ /* @__PURE__ */ React36.createElement(
8702
8692
  ContextProvider,
8703
8693
  {
8704
8694
  value: renderParamRef.current
8705
8695
  },
8706
- /* @__PURE__ */ React37.createElement(InfiniteTableCell, __spreadValues({}, cellProps))
8696
+ /* @__PURE__ */ React36.createElement(InfiniteTableCell, __spreadValues({}, cellProps))
8707
8697
  )
8708
8698
  );
8709
8699
  }
8710
- var InfiniteTableColumnCell = React37.memo(
8700
+ var InfiniteTableColumnCell = React36.memo(
8711
8701
  InfiniteTableColumnCellFn
8712
8702
  );
8713
8703
  function useInfiniteColumnCell() {
@@ -8722,14 +8712,14 @@ function useInfiniteColumnEditor() {
8722
8712
  state: { editingValueRef, editingCell }
8723
8713
  } = useInfiniteTable();
8724
8714
  const { column, rowInfo } = useInfiniteColumnCell();
8725
- const [initialValue] = React37.useState(() => editingCell == null ? void 0 : editingCell.value);
8726
- const [currentValue, setCurrentValue] = React37.useState(initialValue);
8715
+ const [initialValue] = React36.useState(() => editingCell == null ? void 0 : editingCell.value);
8716
+ const [currentValue, setCurrentValue] = React36.useState(initialValue);
8727
8717
  const readOnly = editingCell ? !editingCell.active && !!editingCell.waiting : false;
8728
- const setValue = React37.useCallback((value) => {
8718
+ const setValue = React36.useCallback((value) => {
8729
8719
  editingValueRef.current = value;
8730
8720
  setCurrentValue(value);
8731
8721
  }, []);
8732
- React37.useLayoutEffect(() => {
8722
+ React36.useLayoutEffect(() => {
8733
8723
  editingValueRef.current = initialValue;
8734
8724
  }, []);
8735
8725
  const confirmEdit = api.confirmEdit;
@@ -8758,7 +8748,7 @@ function RenderHookComponent(props) {
8758
8748
  // src/components/InfiniteTable/utils/RenderHookComponentForInfinite.tsx
8759
8749
  function RenderCellHookComponent(props) {
8760
8750
  const ContextProvider = InfiniteTableColumnCellContext.Provider;
8761
- return /* @__PURE__ */ React38.createElement(ContextProvider, { value: props.renderParam }, /* @__PURE__ */ React38.createElement(
8751
+ return /* @__PURE__ */ React37.createElement(ContextProvider, { value: props.renderParam }, /* @__PURE__ */ React37.createElement(
8762
8752
  RenderHookComponent,
8763
8753
  {
8764
8754
  render: props.render,
@@ -8768,11 +8758,11 @@ function RenderCellHookComponent(props) {
8768
8758
  }
8769
8759
  function CellEditorContextComponent(props) {
8770
8760
  const ContextProvider = InfiniteTableColumnCellContext.Provider;
8771
- return /* @__PURE__ */ React38.createElement(ContextProvider, { value: props.contextValue }, props.children);
8761
+ return /* @__PURE__ */ React37.createElement(ContextProvider, { value: props.contextValue }, props.children);
8772
8762
  }
8773
8763
  function RenderHeaderCellHookComponent(props) {
8774
8764
  const ContextProvider = InfiniteTableHeaderCellContext.Provider;
8775
- return /* @__PURE__ */ React38.createElement(ContextProvider, { value: props.renderParam }, /* @__PURE__ */ React38.createElement(
8765
+ return /* @__PURE__ */ React37.createElement(ContextProvider, { value: props.renderParam }, /* @__PURE__ */ React37.createElement(
8776
8766
  RenderHookComponent,
8777
8767
  {
8778
8768
  render: props.render,
@@ -8782,7 +8772,7 @@ function RenderHeaderCellHookComponent(props) {
8782
8772
  }
8783
8773
 
8784
8774
  // src/components/InfiniteTable/components/icons/MenuIcon.tsx
8785
- var React39 = __toESM(require("react"));
8775
+ var React38 = __toESM(require("react"));
8786
8776
  var defaultLineStyle2 = {
8787
8777
  width: "100%",
8788
8778
  pointerEvents: "none"
@@ -8806,7 +8796,7 @@ function MenuIcon(props) {
8806
8796
  const lineStyle = __spreadValues(__spreadProps(__spreadValues({}, defaultLineStyle2), {
8807
8797
  borderTop: `${ThemeVars.components.HeaderCell.menuIconLineWidth} solid currentColor`
8808
8798
  }), props.lineStyle);
8809
- return /* @__PURE__ */ React39.createElement(
8799
+ return /* @__PURE__ */ React38.createElement(
8810
8800
  "div",
8811
8801
  __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, domProps), {
8812
8802
  style: style2
@@ -8822,12 +8812,12 @@ function MenuIcon(props) {
8822
8812
  `${InfiniteTableIconClassName}-menu`
8823
8813
  )
8824
8814
  }),
8825
- 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 }))
8815
+ 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 }))
8826
8816
  );
8827
8817
  }
8828
8818
 
8829
8819
  // src/components/InfiniteTable/components/icons/SortIcon.tsx
8830
- var React40 = __toESM(require("react"));
8820
+ var React39 = __toESM(require("react"));
8831
8821
  var import_react26 = require("react");
8832
8822
 
8833
8823
  // src/components/InfiniteTable/components/icons/SortIcon.css.ts
@@ -8886,7 +8876,7 @@ function SortIcon(props) {
8886
8876
  if (direction === -1) {
8887
8877
  indexStyle.top = "100%";
8888
8878
  }
8889
- return /* @__PURE__ */ React40.createElement(
8879
+ return /* @__PURE__ */ React39.createElement(
8890
8880
  "div",
8891
8881
  {
8892
8882
  "data-name": "sort-icon",
@@ -8898,7 +8888,7 @@ function SortIcon(props) {
8898
8888
  `${InfiniteTableIconClassName}-sort`
8899
8889
  )
8900
8890
  },
8901
- showIndex ? /* @__PURE__ */ React40.createElement(
8891
+ showIndex ? /* @__PURE__ */ React39.createElement(
8902
8892
  "div",
8903
8893
  {
8904
8894
  "data-name": "index",
@@ -8907,25 +8897,25 @@ function SortIcon(props) {
8907
8897
  },
8908
8898
  index
8909
8899
  ) : null,
8910
- /* @__PURE__ */ React40.createElement(
8900
+ /* @__PURE__ */ React39.createElement(
8911
8901
  "div",
8912
8902
  {
8913
8903
  style: __spreadValues({ width: sizes[0] }, lineStyle),
8914
8904
  onTransitionEnd
8915
8905
  }
8916
8906
  ),
8917
- /* @__PURE__ */ React40.createElement("div", { style: __spreadValues({ width: sizes[1] }, lineStyle) }),
8918
- /* @__PURE__ */ React40.createElement("div", { style: __spreadValues({ width: sizes[2] }, lineStyle) })
8907
+ /* @__PURE__ */ React39.createElement("div", { style: __spreadValues({ width: sizes[1] }, lineStyle) }),
8908
+ /* @__PURE__ */ React39.createElement("div", { style: __spreadValues({ width: sizes[2] }, lineStyle) })
8919
8909
  );
8920
8910
  }
8921
8911
 
8922
8912
  // src/components/InfiniteTable/components/InfiniteTableHeader/useColumnResizeHandle.tsx
8923
- var React42 = __toESM(require("react"));
8913
+ var React41 = __toESM(require("react"));
8924
8914
  var import_react28 = require("react");
8925
8915
 
8926
8916
  // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/index.tsx
8927
8917
  var import_react27 = require("react");
8928
- var React41 = __toESM(require("react"));
8918
+ var React40 = __toESM(require("react"));
8929
8919
 
8930
8920
  // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/columnResizer.ts
8931
8921
  function getColumnResizer(colIndex, {
@@ -9100,7 +9090,7 @@ function ResizeHandleFn(props) {
9100
9090
  right: computedPinned === "start" ? void 0 : 0
9101
9091
  //ThemeVars.components.HeaderCell.resizeHandleWidth,
9102
9092
  } : computedPinned === "end" && computedFirstInCategory ? { right: void 0 } : void 0;
9103
- return /* @__PURE__ */ React41.createElement(
9093
+ return /* @__PURE__ */ React40.createElement(
9104
9094
  "div",
9105
9095
  {
9106
9096
  ref: domRef,
@@ -9113,7 +9103,7 @@ function ResizeHandleFn(props) {
9113
9103
  )}`,
9114
9104
  onPointerDown
9115
9105
  },
9116
- /* @__PURE__ */ React41.createElement(
9106
+ /* @__PURE__ */ React40.createElement(
9117
9107
  "div",
9118
9108
  {
9119
9109
  style: style2,
@@ -9127,7 +9117,7 @@ function ResizeHandleFn(props) {
9127
9117
  )
9128
9118
  );
9129
9119
  }
9130
- var ResizeHandle = React41.memo(ResizeHandleFn);
9120
+ var ResizeHandle = React40.memo(ResizeHandleFn);
9131
9121
 
9132
9122
  // src/components/InfiniteTable/components/InfiniteTableHeader/useColumnResizeHandle.tsx
9133
9123
  function useColumnResizeHandle(column) {
@@ -9191,7 +9181,7 @@ function useColumnResizeHandle(column) {
9191
9181
  },
9192
9182
  [computeResizeForDiff]
9193
9183
  );
9194
- const resizeHandle = column.computedResizable ? /* @__PURE__ */ React42.createElement(
9184
+ const resizeHandle = column.computedResizable ? /* @__PURE__ */ React41.createElement(
9195
9185
  ResizeHandle,
9196
9186
  {
9197
9187
  columns: computedVisibleColumns,
@@ -9210,7 +9200,7 @@ var InfiniteTableHeaderCellClassName = `${rootClassName2}HeaderCell`;
9210
9200
  var defaultRenderSelectionCheckBox2 = (params) => {
9211
9201
  const { allRowsSelected, someRowsSelected, api } = params;
9212
9202
  const selected = allRowsSelected ? true : someRowsSelected ? null : false;
9213
- return /* @__PURE__ */ React43.createElement(
9203
+ return /* @__PURE__ */ React42.createElement(
9214
9204
  InfiniteCheckBox,
9215
9205
  {
9216
9206
  domProps: {
@@ -9227,9 +9217,9 @@ var defaultRenderSelectionCheckBox2 = (params) => {
9227
9217
  }
9228
9218
  );
9229
9219
  };
9230
- var InfiniteTableHeaderCellContext = React43.createContext(null);
9220
+ var InfiniteTableHeaderCellContext = React42.createContext(null);
9231
9221
  var columnZIndexAtIndex5 = stripVar(InternalVars.columnZIndexAtIndex);
9232
- var spacer = /* @__PURE__ */ React43.createElement("div", { className: flex["1"] });
9222
+ var spacer = /* @__PURE__ */ React42.createElement("div", { className: flex["1"] });
9233
9223
  var InfiniteHeaderCellDataAttributes = keyMirror({
9234
9224
  "data-name": ``,
9235
9225
  "data-field": ``,
@@ -9266,7 +9256,7 @@ function InfiniteTableHeaderCell(props) {
9266
9256
  const dragging = columnReorderDragColumnId === column.id;
9267
9257
  const { onResize, height, width, headerOptions, columnsMap } = props;
9268
9258
  const sortInfo = column.computedSortInfo;
9269
- let header = column.header;
9259
+ const header = column.header;
9270
9260
  const ref = (0, import_react29.useCallback)(
9271
9261
  (node) => {
9272
9262
  var _a2;
@@ -9290,7 +9280,7 @@ function InfiniteTableHeaderCell(props) {
9290
9280
  getState
9291
9281
  });
9292
9282
  const computedSortable = columnApi.isSortable();
9293
- const sortIcon = computedSortable && (column.computedSorted || alwaysShow) ? /* @__PURE__ */ React43.createElement(
9283
+ const sortIcon = computedSortable && (column.computedSorted || alwaysShow) ? /* @__PURE__ */ React42.createElement(
9294
9284
  SortIcon,
9295
9285
  {
9296
9286
  index: column.computedMultiSort ? column.computedSortIndex + 1 : void 0,
@@ -9307,7 +9297,7 @@ function InfiniteTableHeaderCell(props) {
9307
9297
  }
9308
9298
  ) : null;
9309
9299
  const filtered = column.computedFilterable && column.computedFiltered;
9310
- const filterIcon = filtered ? /* @__PURE__ */ React43.createElement(FilterIcon, null) : null;
9300
+ const filterIcon = filtered ? /* @__PURE__ */ React42.createElement(FilterIcon, null) : null;
9311
9301
  const headerCSSEllipsis = (_e = (_d = column.headerCssEllipsis) != null ? _d : column.cssEllipsis) != null ? _e : true;
9312
9302
  const menuIconProps = {
9313
9303
  reserveSpaceWhenHidden: align2 === "center",
@@ -9327,7 +9317,7 @@ function InfiniteTableHeaderCell(props) {
9327
9317
  }
9328
9318
  };
9329
9319
  const MenuIconCmp = ((_f = column.components) == null ? void 0 : _f.MenuIcon) || (components2 == null ? void 0 : components2.MenuIcon) || MenuIcon;
9330
- const menuIcon = /* @__PURE__ */ React43.createElement(MenuIconCmp, __spreadValues({}, menuIconProps));
9320
+ const menuIcon = /* @__PURE__ */ React42.createElement(MenuIconCmp, __spreadValues({}, menuIconProps));
9331
9321
  const initialRenderParam = {
9332
9322
  dragging,
9333
9323
  domRef: ref,
@@ -9358,7 +9348,7 @@ function InfiniteTableHeaderCell(props) {
9358
9348
  renderBag: __spreadValues({}, initialRenderParam.renderBag)
9359
9349
  });
9360
9350
  if (column.renderSortIcon) {
9361
- renderParam2.renderBag.sortIcon = /* @__PURE__ */ React43.createElement(
9351
+ renderParam2.renderBag.sortIcon = /* @__PURE__ */ React42.createElement(
9362
9352
  RenderHeaderCellHookComponent,
9363
9353
  {
9364
9354
  render: column.renderSortIcon,
@@ -9369,7 +9359,7 @@ function InfiniteTableHeaderCell(props) {
9369
9359
  );
9370
9360
  }
9371
9361
  if (column.renderFilterIcon) {
9372
- renderParam2.renderBag.filterIcon = /* @__PURE__ */ React43.createElement(
9362
+ renderParam2.renderBag.filterIcon = /* @__PURE__ */ React42.createElement(
9373
9363
  RenderHeaderCellHookComponent,
9374
9364
  {
9375
9365
  render: column.renderFilterIcon,
@@ -9380,7 +9370,7 @@ function InfiniteTableHeaderCell(props) {
9380
9370
  );
9381
9371
  }
9382
9372
  if (typeof column.renderMenuIcon === "function") {
9383
- renderParam2.renderBag.menuIcon = /* @__PURE__ */ React43.createElement(
9373
+ renderParam2.renderBag.menuIcon = /* @__PURE__ */ React42.createElement(
9384
9374
  RenderHeaderCellHookComponent,
9385
9375
  {
9386
9376
  render: (param) => {
@@ -9392,7 +9382,7 @@ function InfiniteTableHeaderCell(props) {
9392
9382
  if (result.type === MenuIconCmp || result.type === MenuIcon) {
9393
9383
  return result;
9394
9384
  }
9395
- return /* @__PURE__ */ React43.createElement(MenuIconCmp, __spreadValues({}, menuIconProps), result);
9385
+ return /* @__PURE__ */ React42.createElement(MenuIconCmp, __spreadValues({}, menuIconProps), result);
9396
9386
  }
9397
9387
  return null;
9398
9388
  },
@@ -9403,7 +9393,7 @@ function InfiniteTableHeaderCell(props) {
9403
9393
  );
9404
9394
  }
9405
9395
  if (column.renderSelectionCheckBox && selectionMode === "multi-row") {
9406
- renderParam2.renderBag.selectionCheckBox = /* @__PURE__ */ React43.createElement(
9396
+ renderParam2.renderBag.selectionCheckBox = /* @__PURE__ */ React42.createElement(
9407
9397
  RenderHeaderCellHookComponent,
9408
9398
  {
9409
9399
  render: defaultRenderSelectionCheckBox2,
@@ -9414,7 +9404,7 @@ function InfiniteTableHeaderCell(props) {
9414
9404
  );
9415
9405
  const renderHeaderSelectionCheckBox = (_a2 = column.renderHeaderSelectionCheckBox) != null ? _a2 : column.renderSelectionCheckBox;
9416
9406
  if (renderHeaderSelectionCheckBox && renderHeaderSelectionCheckBox !== true) {
9417
- renderParam2.renderBag.selectionCheckBox = /* @__PURE__ */ React43.createElement(
9407
+ renderParam2.renderBag.selectionCheckBox = /* @__PURE__ */ React42.createElement(
9418
9408
  RenderHeaderCellHookComponent,
9419
9409
  {
9420
9410
  render: renderHeaderSelectionCheckBox,
@@ -9426,7 +9416,7 @@ function InfiniteTableHeaderCell(props) {
9426
9416
  }
9427
9417
  }
9428
9418
  if (header instanceof Function) {
9429
- renderParam2.renderBag.header = /* @__PURE__ */ React43.createElement(
9419
+ renderParam2.renderBag.header = /* @__PURE__ */ React42.createElement(
9430
9420
  RenderHeaderCellHookComponent,
9431
9421
  {
9432
9422
  render: header,
@@ -9437,10 +9427,10 @@ function InfiniteTableHeaderCell(props) {
9437
9427
  );
9438
9428
  }
9439
9429
  const theMenuIcon = column.renderMenuIcon === false ? null : renderParam2.renderBag.menuIcon;
9440
- const headerContent = headerCSSEllipsis ? /* @__PURE__ */ React43.createElement("div", { className: cssEllipsisClassName }, renderParam2.renderBag.header) : renderParam2.renderBag.header;
9441
- 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);
9430
+ const headerContent = headerCSSEllipsis ? /* @__PURE__ */ React42.createElement("div", { className: cssEllipsisClassName }, renderParam2.renderBag.header) : renderParam2.renderBag.header;
9431
+ 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);
9442
9432
  if (column.renderHeader) {
9443
- return /* @__PURE__ */ React43.createElement(
9433
+ return /* @__PURE__ */ React42.createElement(
9444
9434
  RenderHeaderCellHookComponent,
9445
9435
  {
9446
9436
  render: column.renderHeader,
@@ -9477,7 +9467,7 @@ function InfiniteTableHeaderCell(props) {
9477
9467
  });
9478
9468
  let draggingProxy = null;
9479
9469
  if (dragging && proxyPosition) {
9480
- draggingProxy = /* @__PURE__ */ React43.createElement(
9470
+ draggingProxy = /* @__PURE__ */ React42.createElement(
9481
9471
  "div",
9482
9472
  {
9483
9473
  key: column.id,
@@ -9501,7 +9491,7 @@ function InfiniteTableHeaderCell(props) {
9501
9491
  verticalAlign,
9502
9492
  align: align2
9503
9493
  };
9504
- const debouncedOnFilterValueChange = React43.useMemo(() => {
9494
+ const debouncedOnFilterValueChange = React42.useMemo(() => {
9505
9495
  const fn = (filterValue) => {
9506
9496
  api.setColumnFilter(column.id, filterValue);
9507
9497
  };
@@ -9527,7 +9517,7 @@ function InfiniteTableHeaderCell(props) {
9527
9517
  "data-sort": column.computedSortedAsc ? "asc" : column.computedSortedDesc ? "desc" : "none",
9528
9518
  "data-sort-index": `${(_p = column.computedSortIndex) != null ? _p : -1}`
9529
9519
  };
9530
- return /* @__PURE__ */ React43.createElement(ContextProvider, { value: renderParam }, /* @__PURE__ */ React43.createElement(
9520
+ return /* @__PURE__ */ React42.createElement(ContextProvider, { value: renderParam }, /* @__PURE__ */ React42.createElement(
9531
9521
  InfiniteTableCell,
9532
9522
  __spreadProps(__spreadValues({
9533
9523
  domRef: ref,
@@ -9569,7 +9559,7 @@ function InfiniteTableHeaderCell(props) {
9569
9559
  CellCls
9570
9560
  ),
9571
9561
  cssEllipsis: headerCSSEllipsis,
9572
- afterChildren: /* @__PURE__ */ React43.createElement(React43.Fragment, null, showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ React43.createElement(
9562
+ afterChildren: /* @__PURE__ */ React42.createElement(React42.Fragment, null, showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ React42.createElement(
9573
9563
  InfiniteTableColumnHeaderFilter,
9574
9564
  {
9575
9565
  filterEditor: FilterEditor,
@@ -9582,7 +9572,7 @@ function InfiniteTableHeaderCell(props) {
9582
9572
  columnFilterValue: column.computedFilterValue,
9583
9573
  columnHeaderHeight
9584
9574
  }
9585
- ) : /* @__PURE__ */ React43.createElement(InfiniteTableColumnHeaderFilterEmpty, null) : null, resizeHandle),
9575
+ ) : /* @__PURE__ */ React42.createElement(InfiniteTableColumnHeaderFilterEmpty, null) : null, resizeHandle),
9586
9576
  renderChildren
9587
9577
  })
9588
9578
  ), draggingProxy);
@@ -9595,7 +9585,7 @@ function useInfiniteHeaderCell() {
9595
9585
  }
9596
9586
 
9597
9587
  // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderWrapper.tsx
9598
- var React48 = __toESM(require("react"));
9588
+ var React47 = __toESM(require("react"));
9599
9589
 
9600
9590
  // src/components/InfiniteTable/components/InfiniteTableHeader/buildColumnAndGroupTree.ts
9601
9591
  function buildColumnAndGroupTree(columns, columnGroups, columnGroupsDepthsMap, columnGroupsMaxDepth) {
@@ -9701,19 +9691,19 @@ function assignGroupOffsetsAndComputedWidths(items, groupOffset = 0) {
9701
9691
  }
9702
9692
 
9703
9693
  // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
9704
- var React47 = __toESM(require("react"));
9694
+ var React46 = __toESM(require("react"));
9705
9695
  var import_react32 = require("react");
9706
9696
 
9707
9697
  // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup.tsx
9708
- var React46 = __toESM(require("react"));
9698
+ var React45 = __toESM(require("react"));
9709
9699
 
9710
9700
  // src/components/InfiniteTable/components/InfiniteTableHeader/useColumnGroupResizeHandle.tsx
9711
- var React45 = __toESM(require("react"));
9701
+ var React44 = __toESM(require("react"));
9712
9702
  var import_react31 = require("react");
9713
9703
 
9714
9704
  // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/GroupResizeHandle.tsx
9715
9705
  var import_react30 = require("react");
9716
- var React44 = __toESM(require("react"));
9706
+ var React43 = __toESM(require("react"));
9717
9707
  var { rootClassName: rootClassName8 } = internalProps;
9718
9708
  var InfiniteTableHeaderCellResizeHandleCls2 = `${rootClassName8}HeaderCell_ResizeHandle`;
9719
9709
  function GroupResizeHandleFn(props) {
@@ -9782,7 +9772,7 @@ function GroupResizeHandleFn(props) {
9782
9772
  const style2 = (computedPinned === false || computedPinned === "start") && computedLastInCategory ? {
9783
9773
  right: computedPinned === "start" ? void 0 : ThemeVars.components.HeaderCell.resizeHandleWidth
9784
9774
  } : computedPinned === "end" && computedFirstInCategory ? { right: void 0 } : void 0;
9785
- return /* @__PURE__ */ React44.createElement(
9775
+ return /* @__PURE__ */ React43.createElement(
9786
9776
  "div",
9787
9777
  {
9788
9778
  ref: domRef,
@@ -9795,7 +9785,7 @@ function GroupResizeHandleFn(props) {
9795
9785
  )}`,
9796
9786
  onPointerDown
9797
9787
  },
9798
- /* @__PURE__ */ React44.createElement(
9788
+ /* @__PURE__ */ React43.createElement(
9799
9789
  "div",
9800
9790
  {
9801
9791
  style: __spreadValues(__spreadValues({}, style2), props.style),
@@ -9806,7 +9796,7 @@ function GroupResizeHandleFn(props) {
9806
9796
  )
9807
9797
  );
9808
9798
  }
9809
- var GroupResizeHandle = React44.memo(
9799
+ var GroupResizeHandle = React43.memo(
9810
9800
  GroupResizeHandleFn
9811
9801
  );
9812
9802
 
@@ -9865,7 +9855,7 @@ function useColumnGroupResizeHandle(groupColumns, config) {
9865
9855
  [computeResizeForDiff]
9866
9856
  );
9867
9857
  const groupResizable = groupColumns.some((c) => c.computedResizable);
9868
- const resizeHandle = groupResizable ? /* @__PURE__ */ React45.createElement(
9858
+ const resizeHandle = groupResizable ? /* @__PURE__ */ React44.createElement(
9869
9859
  GroupResizeHandle,
9870
9860
  {
9871
9861
  brain: bodyBrain,
@@ -9905,7 +9895,7 @@ function InfiniteTableHeaderGroup(props) {
9905
9895
  (col) => `var(${columnWidthAtIndex5}-${col.computedVisibleIndex})`
9906
9896
  ).join(" + ") + " )" : `var(${columnWidthAtIndex5}-${firstColumn.computedVisibleIndex})`;
9907
9897
  const zIndex2 = `calc(var(${columnZIndexAtIndex6}-${firstColumn.computedVisibleIndex}) + ${columnGroupsMaxDepth - columnGroup.depth})`;
9908
- return /* @__PURE__ */ React46.createElement(
9898
+ return /* @__PURE__ */ React45.createElement(
9909
9899
  "div",
9910
9900
  {
9911
9901
  ref: props.domRef,
@@ -9914,7 +9904,7 @@ function InfiniteTableHeaderGroup(props) {
9914
9904
  style: { width, height },
9915
9905
  "data-z-index": zIndex2
9916
9906
  },
9917
- /* @__PURE__ */ React46.createElement(
9907
+ /* @__PURE__ */ React45.createElement(
9918
9908
  "div",
9919
9909
  {
9920
9910
  className: join(
@@ -9996,7 +9986,7 @@ function InfiniteTableHeaderFn(props) {
9996
9986
  computedWidth: colGroupItem.computedWidth,
9997
9987
  groupOffset: colGroupItem.groupOffset
9998
9988
  });
9999
- return /* @__PURE__ */ React47.createElement(
9989
+ return /* @__PURE__ */ React46.createElement(
10000
9990
  InfiniteTableHeaderGroup,
10001
9991
  {
10002
9992
  bodyBrain,
@@ -10009,7 +9999,7 @@ function InfiniteTableHeaderFn(props) {
10009
9999
  }
10010
10000
  );
10011
10001
  }
10012
- return /* @__PURE__ */ React47.createElement(
10002
+ return /* @__PURE__ */ React46.createElement(
10013
10003
  InfiniteTableHeaderCell,
10014
10004
  {
10015
10005
  domRef: domRef2,
@@ -10033,7 +10023,7 @@ function InfiniteTableHeaderFn(props) {
10033
10023
  showColumnFilters
10034
10024
  ]
10035
10025
  );
10036
- return /* @__PURE__ */ React47.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React47.createElement(
10026
+ return /* @__PURE__ */ React46.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React46.createElement(
10037
10027
  RawTable,
10038
10028
  {
10039
10029
  name: "header",
@@ -10043,7 +10033,7 @@ function InfiniteTableHeaderFn(props) {
10043
10033
  }
10044
10034
  ));
10045
10035
  }
10046
- var InfiniteTableHeader = React47.memo(
10036
+ var InfiniteTableHeader = React46.memo(
10047
10037
  InfiniteTableHeaderFn
10048
10038
  );
10049
10039
 
@@ -10068,7 +10058,7 @@ function TableHeaderWrapper(props) {
10068
10058
  } = tableContextValue;
10069
10059
  const rows = !computedColumnGroups || !Object.keys(computedColumnGroups).length ? 1 : columnGroupsMaxDepth + 2;
10070
10060
  const height = rows * columnHeaderHeight + (showColumnFilters ? columnHeaderHeight : 0);
10071
- const columnAndGroupTreeInfo = React48.useMemo(() => {
10061
+ const columnAndGroupTreeInfo = React47.useMemo(() => {
10072
10062
  if (!computedColumnGroups || !Object.keys(computedColumnGroups).length) {
10073
10063
  return void 0;
10074
10064
  }
@@ -10079,7 +10069,7 @@ function TableHeaderWrapper(props) {
10079
10069
  columnGroupsMaxDepth
10080
10070
  );
10081
10071
  }, [computedVisibleColumns, computedColumnGroups, columnGroupsDepthsMap]);
10082
- const cellspan = React48.useCallback(
10072
+ const cellspan = React47.useCallback(
10083
10073
  ({ rowIndex, colIndex }) => {
10084
10074
  const column = computedVisibleColumns[colIndex];
10085
10075
  const rowspan2 = 1;
@@ -10117,15 +10107,15 @@ function TableHeaderWrapper(props) {
10117
10107
  columnGroupsDepthsMap
10118
10108
  ]
10119
10109
  );
10120
- const rowspan = React48.useCallback(
10110
+ const rowspan = React47.useCallback(
10121
10111
  ({ rowIndex, colIndex }) => cellspan({ rowIndex, colIndex }).rowspan,
10122
10112
  [cellspan]
10123
10113
  );
10124
- const colspan = React48.useCallback(
10114
+ const colspan = React47.useCallback(
10125
10115
  ({ rowIndex, colIndex }) => cellspan({ rowIndex, colIndex }).colspan,
10126
10116
  [cellspan]
10127
10117
  );
10128
- const rowHeight = React48.useCallback(
10118
+ const rowHeight = React47.useCallback(
10129
10119
  (index) => {
10130
10120
  return showColumnFilters ? index < rows - 1 ? columnHeaderHeight : 2 * columnHeaderHeight : columnHeaderHeight;
10131
10121
  },
@@ -10147,7 +10137,7 @@ function TableHeaderWrapper(props) {
10147
10137
  fixedColsStart: computedPinnedStartColumns.length
10148
10138
  }
10149
10139
  );
10150
- const header = /* @__PURE__ */ React48.createElement(
10140
+ const header = /* @__PURE__ */ React47.createElement(
10151
10141
  InfiniteTableHeader,
10152
10142
  {
10153
10143
  columns: computedVisibleColumns,
@@ -10158,7 +10148,7 @@ function TableHeaderWrapper(props) {
10158
10148
  columnAndGroupTreeInfo
10159
10149
  }
10160
10150
  );
10161
- const verticalScrollbarPlaceholder = scrollbars.vertical && getScrollbarWidth() ? /* @__PURE__ */ React48.createElement(
10151
+ const verticalScrollbarPlaceholder = scrollbars.vertical && getScrollbarWidth() ? /* @__PURE__ */ React47.createElement(
10162
10152
  "div",
10163
10153
  {
10164
10154
  className: HeaderScrollbarPlaceholderCls,
@@ -10168,7 +10158,7 @@ function TableHeaderWrapper(props) {
10168
10158
  }
10169
10159
  }
10170
10160
  ) : null;
10171
- return /* @__PURE__ */ React48.createElement(
10161
+ return /* @__PURE__ */ React47.createElement(
10172
10162
  "div",
10173
10163
  {
10174
10164
  className: HeaderWrapperCls,
@@ -10182,7 +10172,7 @@ function TableHeaderWrapper(props) {
10182
10172
  }
10183
10173
 
10184
10174
  // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
10185
- var React49 = __toESM(require("react"));
10175
+ var React48 = __toESM(require("react"));
10186
10176
  var import_react33 = require("react");
10187
10177
 
10188
10178
  // src/components/utils/decamelize.ts
@@ -10225,11 +10215,11 @@ var enforceStyle = (node, style2) => {
10225
10215
  );
10226
10216
  }
10227
10217
  };
10228
- var InfiniteTableLicenseFooter = React49.forwardRef(
10218
+ var InfiniteTableLicenseFooter = React48.forwardRef(
10229
10219
  function InfiniteTableLicenseFooter2(props, ref) {
10230
10220
  const { rootClassName: rootClassName12 } = useInternalProps();
10231
- const domRef = React49.useRef(null);
10232
- const domCallback = React49.useCallback((node) => {
10221
+ const domRef = React48.useRef(null);
10222
+ const domCallback = React48.useCallback((node) => {
10233
10223
  domRef.current = node;
10234
10224
  if (!ref) {
10235
10225
  return;
@@ -10257,7 +10247,7 @@ var InfiniteTableLicenseFooter = React49.forwardRef(
10257
10247
  clearInterval(intervalId);
10258
10248
  };
10259
10249
  }, []);
10260
- return /* @__PURE__ */ React49.createElement(
10250
+ return /* @__PURE__ */ React48.createElement(
10261
10251
  "div",
10262
10252
  __spreadProps(__spreadValues({
10263
10253
  ref: domCallback
@@ -10271,7 +10261,7 @@ var InfiniteTableLicenseFooter = React49.forwardRef(
10271
10261
  }),
10272
10262
  "Powered by",
10273
10263
  " ",
10274
- /* @__PURE__ */ React49.createElement(
10264
+ /* @__PURE__ */ React48.createElement(
10275
10265
  "a",
10276
10266
  {
10277
10267
  href: "https://infinite-table.com",
@@ -10286,7 +10276,7 @@ var InfiniteTableLicenseFooter = React49.forwardRef(
10286
10276
  );
10287
10277
 
10288
10278
  // src/components/InfiniteTable/components/LoadMask.tsx
10289
- var React50 = __toESM(require("react"));
10279
+ var React49 = __toESM(require("react"));
10290
10280
 
10291
10281
  // src/components/InfiniteTable/components/LoadMask.css.ts
10292
10282
  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" };
@@ -10298,16 +10288,16 @@ var { rootClassName: rootClassName10 } = internalProps;
10298
10288
  var baseCls3 = `${rootClassName10}-LoadMask`;
10299
10289
  function LoadMaskFn(props) {
10300
10290
  const { visible, children = "Loading" } = props;
10301
- return /* @__PURE__ */ React50.createElement(
10291
+ return /* @__PURE__ */ React49.createElement(
10302
10292
  "div",
10303
10293
  {
10304
10294
  className: `${LoadMaskCls[visible ? "visible" : "hidden"]} ${baseCls3}`
10305
10295
  },
10306
- /* @__PURE__ */ React50.createElement("div", { className: `${LoadMaskOverlayCls} ${baseCls3}-Overlay` }),
10307
- /* @__PURE__ */ React50.createElement("div", { className: `${LoadMaskTextCls} ${baseCls3}-Text` }, children)
10296
+ /* @__PURE__ */ React49.createElement("div", { className: `${LoadMaskOverlayCls} ${baseCls3}-Overlay` }),
10297
+ /* @__PURE__ */ React49.createElement("div", { className: `${LoadMaskTextCls} ${baseCls3}-Text` }, children)
10308
10298
  );
10309
10299
  }
10310
- var LoadMask = React50.memo(LoadMaskFn);
10300
+ var LoadMask = React49.memo(LoadMaskFn);
10311
10301
 
10312
10302
  // src/utils/deepClone.ts
10313
10303
  function cloneArray(arr) {
@@ -10979,7 +10969,7 @@ function enhancedFlatten(param) {
10979
10969
  }
10980
10970
 
10981
10971
  // src/components/DataSource/index.tsx
10982
- var React51 = __toESM(require("react"));
10972
+ var React50 = __toESM(require("react"));
10983
10973
  var import_react36 = require("react");
10984
10974
 
10985
10975
  // src/utils/multisort/sortTypes.ts
@@ -13790,6 +13780,7 @@ function useLoadData() {
13790
13780
  refetchKey,
13791
13781
  sortInfo,
13792
13782
  sortMode,
13783
+ groupMode,
13793
13784
  groupBy,
13794
13785
  pivotBy,
13795
13786
  filterValue,
@@ -13861,7 +13852,7 @@ function useLoadData() {
13861
13852
  }, [filterValue, filterMode, filterTypes]);
13862
13853
  const depsObject = {
13863
13854
  sortInfo: sortMode === "remote" ? sortInfo : null,
13864
- groupBy,
13855
+ groupBy: groupMode === "remote" ? groupBy : null,
13865
13856
  pivotBy,
13866
13857
  refetchKey,
13867
13858
  filterValue: computedFilterValue,
@@ -14344,7 +14335,7 @@ function getLivePaginationCursorValue(livePaginationCursorProp, state) {
14344
14335
  }
14345
14336
  var weakMap = /* @__PURE__ */ new WeakMap();
14346
14337
  function deriveStateFromProps(params) {
14347
- var _a, _b, _c;
14338
+ var _a, _b, _c, _d;
14348
14339
  const { props, state, oldState } = params;
14349
14340
  const controlledSort = isControlledValue(props.sortInfo);
14350
14341
  const controlledFilter = isControlledValue(props.filterValue);
@@ -14442,8 +14433,9 @@ function deriveStateFromProps(params) {
14442
14433
  operatorsByFilterType,
14443
14434
  controlledSort,
14444
14435
  controlledFilter,
14445
- sortMode: props.sortFunction ? "local" : (_b = props.sortMode) != null ? _b : controlledSort ? "remote" : "local",
14446
- filterMode: typeof props.filterFunction === "function" ? "local" : (_c = props.filterMode) != null ? _c : typeof props.data === "function" ? "remote" : "local",
14436
+ groupMode: typeof props.data === "function" ? (_b = props.groupMode) != null ? _b : "local" : "local",
14437
+ sortMode: props.sortFunction ? "local" : (_c = props.sortMode) != null ? _c : controlledSort ? "remote" : "local",
14438
+ filterMode: typeof props.filterFunction === "function" ? "local" : (_d = props.filterMode) != null ? _d : typeof props.data === "function" ? "remote" : "local",
14447
14439
  multiSort: Array.isArray(
14448
14440
  controlledSort ? props.sortInfo : props.defaultSortInfo
14449
14441
  ),
@@ -14976,7 +14968,7 @@ function DataSourceWithContext(props) {
14976
14968
  var _a;
14977
14969
  (_a = componentState.onReady) == null ? void 0 : _a.call(componentState, api);
14978
14970
  }, []);
14979
- return /* @__PURE__ */ React51.createElement(React51.Fragment, null, children);
14971
+ return /* @__PURE__ */ React50.createElement(React50.Fragment, null, children);
14980
14972
  }
14981
14973
  var DataSourceRoot = getComponentStateRoot({
14982
14974
  //@ts-ignore
@@ -15006,7 +14998,7 @@ function DataSourceCmp({
15006
14998
  const { componentState, componentActions, assignState } = useComponentState();
15007
14999
  componentState.getDataSourceMasterContextRef.current = getDataSourceMasterContext;
15008
15000
  const getState = useLatest(componentState);
15009
- const [api] = React51.useState(() => {
15001
+ const [api] = React50.useState(() => {
15010
15002
  return getDataSourceApi({ getState, actions: componentActions });
15011
15003
  });
15012
15004
  const contextValue = {
@@ -15058,13 +15050,13 @@ function DataSourceCmp({
15058
15050
  });
15059
15051
  }
15060
15052
  }, [componentState.originalDataArrayChangedInfo]);
15061
- return /* @__PURE__ */ React51.createElement(DataSourceContext.Provider, { value: contextValue }, /* @__PURE__ */ React51.createElement(DataSourceWithContext, { children }));
15053
+ return /* @__PURE__ */ React50.createElement(DataSourceContext.Provider, { value: contextValue }, /* @__PURE__ */ React50.createElement(DataSourceWithContext, { children }));
15062
15054
  }
15063
15055
  function DataSource(props) {
15064
15056
  const masterContext = useMasterDetailContext();
15065
15057
  const isDetail = !!masterContext;
15066
15058
  const key = isDetail ? masterContext.masterRowInfo.id : "master";
15067
- return /* @__PURE__ */ React51.createElement(DataSourceRoot, __spreadProps(__spreadValues({}, props), { key }), /* @__PURE__ */ React51.createElement(DataSourceCmp, { children: props.children, isDetail }));
15059
+ return /* @__PURE__ */ React50.createElement(DataSourceRoot, __spreadProps(__spreadValues({}, props), { key }), /* @__PURE__ */ React50.createElement(DataSourceCmp, { children: props.children, isDetail }));
15068
15060
  }
15069
15061
  function useRowInfoReducers() {
15070
15062
  const { rowInfoReducerResults } = useDataSource();
@@ -15386,7 +15378,8 @@ function getRowDetailApi(param) {
15386
15378
  return !rowDetailApi.isRowDetailCollapsed(pk);
15387
15379
  },
15388
15380
  collapseRowDetail(pk) {
15389
- const currentState = getState().rowDetailState;
15381
+ const componentState = getState();
15382
+ const currentState = componentState.rowDetailState;
15390
15383
  if (!currentState) {
15391
15384
  console.error(
15392
15385
  `Cannot collapse row details via rowDetailState, as no props.rowDetailState is provided.`
@@ -15395,10 +15388,13 @@ function getRowDetailApi(param) {
15395
15388
  }
15396
15389
  const state = new RowDetailState(currentState);
15397
15390
  state.collapseRowDetails(pk);
15391
+ componentState.lastRowToExpandRef.current = null;
15392
+ componentState.lastRowToCollapseRef.current = pk;
15398
15393
  actions.rowDetailState = state;
15399
15394
  },
15400
15395
  expandRowDetail(pk) {
15401
- const currentState = getState().rowDetailState;
15396
+ const componentState = getState();
15397
+ const currentState = componentState.rowDetailState;
15402
15398
  if (!currentState) {
15403
15399
  console.error(
15404
15400
  `Cannot expand row details via rowDetailState, as no props.rowDetailState is provided.`
@@ -15407,6 +15403,8 @@ function getRowDetailApi(param) {
15407
15403
  }
15408
15404
  const state = new RowDetailState(currentState);
15409
15405
  state.expandRowDetails(pk);
15406
+ componentState.lastRowToCollapseRef.current = null;
15407
+ componentState.lastRowToExpandRef.current = pk;
15410
15408
  actions.rowDetailState = state;
15411
15409
  },
15412
15410
  toggleRowDetail(pk) {
@@ -16435,7 +16433,7 @@ function useAutoSizeColumns() {
16435
16433
  // src/components/InfiniteTable/hooks/useCellRendering.tsx
16436
16434
  var import_react39 = require("react");
16437
16435
  var import_react40 = require("react");
16438
- var React53 = __toESM(require("react"));
16436
+ var React52 = __toESM(require("react"));
16439
16437
 
16440
16438
  // src/components/InfiniteTable/hooks/useYourBrain.ts
16441
16439
  function useYourBrain(param) {
@@ -16472,7 +16470,7 @@ function useYourBrain(param) {
16472
16470
  }
16473
16471
 
16474
16472
  // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableDetailRow.tsx
16475
- var React52 = __toESM(require("react"));
16473
+ var React51 = __toESM(require("react"));
16476
16474
 
16477
16475
  // src/components/InfiniteTable/components/rowDetail.css.ts
16478
16476
  var RowDetailRecipe = createRuntimeFn({ defaultClassName: "rowDetail_RowDetailRecipe__evqes20", variantClassNames: {}, defaultVariants: {}, compoundVariants: [] });
@@ -16609,7 +16607,7 @@ function InfiniteTableDetailRowFn(props) {
16609
16607
  rowDetailsCache,
16610
16608
  rowInfo
16611
16609
  });
16612
- return /* @__PURE__ */ React52.createElement(DataSourceMasterDetailContext.Provider, { value: masterDetailContextValue }, /* @__PURE__ */ React52.createElement(
16610
+ return /* @__PURE__ */ React51.createElement(DataSourceMasterDetailContext.Provider, { value: masterDetailContextValue }, /* @__PURE__ */ React51.createElement(
16613
16611
  "div",
16614
16612
  {
16615
16613
  ref: domRef,
@@ -16618,6 +16616,7 @@ function InfiniteTableDetailRowFn(props) {
16618
16616
  position: "absolute",
16619
16617
  top: `${detailOffset}px`,
16620
16618
  left: 0,
16619
+ // TODO see #rowDetailWidth
16621
16620
  width: `calc(${InternalVars.bodyWidth} - ${InternalVars.scrollbarWidthVertical})`,
16622
16621
  height: rowDetailHeight
16623
16622
  }
@@ -16625,7 +16624,7 @@ function InfiniteTableDetailRowFn(props) {
16625
16624
  rowDetailRenderer(rowInfo, currentRowCache)
16626
16625
  ));
16627
16626
  }
16628
- var InfiniteTableDetailRow = React52.memo(
16627
+ var InfiniteTableDetailRow = React51.memo(
16629
16628
  InfiniteTableDetailRowFn
16630
16629
  );
16631
16630
 
@@ -16784,7 +16783,7 @@ function useCellRendering(param) {
16784
16783
  cellStyle,
16785
16784
  cellClassName
16786
16785
  };
16787
- return /* @__PURE__ */ React53.createElement(InfiniteTableColumnCell, __spreadValues({}, cellProps));
16786
+ return /* @__PURE__ */ React52.createElement(InfiniteTableColumnCell, __spreadValues({}, cellProps));
16788
16787
  },
16789
16788
  [
16790
16789
  rowHeight,
@@ -16815,10 +16814,10 @@ function useCellRendering(param) {
16815
16814
  const dataArray2 = getData();
16816
16815
  const rowInfo = dataArray2[rowIndex];
16817
16816
  if (!rowInfo || !isRowDetailsExpanded(rowInfo) || !computedRowSizeCacheForDetails) {
16818
- return /* @__PURE__ */ React53.createElement("div", { ref: domRef, className: visibility.hidden });
16817
+ return /* @__PURE__ */ React52.createElement("div", { ref: domRef, className: visibility.hidden });
16819
16818
  }
16820
16819
  const { rowDetailHeight: rowDetailHeight2, rowHeight: rowHeight2 } = computedRowSizeCacheForDetails.getSize(rowIndex);
16821
- return /* @__PURE__ */ React53.createElement(
16820
+ return /* @__PURE__ */ React52.createElement(
16822
16821
  InfiniteTableDetailRow,
16823
16822
  {
16824
16823
  rowInfo,
@@ -17151,10 +17150,10 @@ function computeColumnGroupsDepths(columnGroups) {
17151
17150
  }
17152
17151
 
17153
17152
  // src/components/InfiniteTable/state/rowDetailRendererFromComponent.tsx
17154
- var React54 = __toESM(require("react"));
17153
+ var React53 = __toESM(require("react"));
17155
17154
  function getRowDetailRendererFromComponent(RowDetail) {
17156
17155
  return (rowInfo, cache) => {
17157
- return /* @__PURE__ */ React54.createElement(RowDetail, { key: rowInfo.id, rowInfo, cache });
17156
+ return /* @__PURE__ */ React53.createElement(RowDetail, { key: rowInfo.id, rowInfo, cache });
17158
17157
  };
17159
17158
  }
17160
17159
 
@@ -17203,6 +17202,8 @@ function initSetupState2({
17203
17202
  renderer,
17204
17203
  onRenderUpdater,
17205
17204
  propsCache: /* @__PURE__ */ new Map([]),
17205
+ lastRowToCollapseRef: { current: null },
17206
+ lastRowToExpandRef: { current: null },
17206
17207
  cellContextMenuVisibleFor: null,
17207
17208
  contextMenuVisibleFor: null,
17208
17209
  columnMenuVisibleForColumnId: null,
@@ -17403,6 +17404,21 @@ function getGroupByMap(groupBy) {
17403
17404
  }, /* @__PURE__ */ new Map());
17404
17405
  }
17405
17406
  var weakMap2 = /* @__PURE__ */ new WeakMap();
17407
+ function getMappedCallbacks2() {
17408
+ return {
17409
+ rowDetailState: (rowDetailState, state) => {
17410
+ return {
17411
+ callbackParams: [
17412
+ rowDetailState,
17413
+ {
17414
+ expandRow: state.lastRowToExpandRef.current,
17415
+ collapseRow: state.lastRowToCollapseRef.current
17416
+ }
17417
+ ]
17418
+ };
17419
+ }
17420
+ };
17421
+ }
17406
17422
  var mapPropsToState = (params) => {
17407
17423
  var _a, _b, _c, _d, _e;
17408
17424
  const { props, state, oldState, parentState } = params;
@@ -18620,7 +18636,7 @@ var useLicense = (licenseKey = "") => {
18620
18636
  }
18621
18637
  let valid2 = isValidLicense(licenseKey, {
18622
18638
  publishedAt: 1624970570587,
18623
- version: "4.0.0"
18639
+ version: "4.1.1"
18624
18640
  });
18625
18641
  if (!licenseKey && !valid2 && isInsidePlayground) {
18626
18642
  return true;
@@ -19659,7 +19675,7 @@ function useDOMEventHandlers() {
19659
19675
  var import_react58 = require("react");
19660
19676
 
19661
19677
  // src/components/hooks/useOverlay/index.tsx
19662
- var React55 = __toESM(require("react"));
19678
+ var React54 = __toESM(require("react"));
19663
19679
  var import_react54 = require("react");
19664
19680
  var import_react_dom2 = require("react-dom");
19665
19681
 
@@ -20045,10 +20061,10 @@ function retrieveElement(elementGetter) {
20045
20061
  });
20046
20062
  }
20047
20063
  function DefaultOverlayPortal(props) {
20048
- return /* @__PURE__ */ React55.createElement("div", { style: { position: "fixed", top: 0, left: 0 } }, props.children);
20064
+ return /* @__PURE__ */ React54.createElement("div", { style: { position: "fixed", top: 0, left: 0 } }, props.children);
20049
20065
  }
20050
20066
  function OverlayContent(props) {
20051
- const nodeRef = React55.useRef(null);
20067
+ const nodeRef = React54.useRef(null);
20052
20068
  (0, import_react54.useEffect)(() => {
20053
20069
  return props.realign.onChange((handle) => {
20054
20070
  if (nodeRef.current && handle) {
@@ -20056,7 +20072,7 @@ function OverlayContent(props) {
20056
20072
  }
20057
20073
  });
20058
20074
  }, [props.realign]);
20059
- return /* @__PURE__ */ React55.createElement(
20075
+ return /* @__PURE__ */ React54.createElement(
20060
20076
  "div",
20061
20077
  {
20062
20078
  style: { position: "absolute", top: 0, left: 0 },
@@ -20127,22 +20143,22 @@ function useOverlayPortal(content, portalContainer) {
20127
20143
  }, [portalContainer]);
20128
20144
  return portalContainer ? container ? (0, import_react_dom2.createPortal)(content, container) : (
20129
20145
  // we're probably still fetching the container
20130
- /* @__PURE__ */ React55.createElement(React55.Fragment, null)
20131
- ) : portalContainer === null || portalContainer === false ? content : /* @__PURE__ */ React55.createElement(DefaultOverlayPortal, null, content);
20146
+ /* @__PURE__ */ React54.createElement(React54.Fragment, null)
20147
+ ) : portalContainer === null || portalContainer === false ? content : /* @__PURE__ */ React54.createElement(DefaultOverlayPortal, null, content);
20132
20148
  }
20133
20149
  function getIdForReactOnlyChild(children) {
20134
- if (React55.Children.count(children) === 1) {
20135
- const child = React55.Children.only(children);
20136
- if (React55.isValidElement(child)) {
20150
+ if (React54.Children.count(children) === 1) {
20151
+ const child = React54.Children.only(children);
20152
+ if (React54.isValidElement(child)) {
20137
20153
  return child.props.id || child.key;
20138
20154
  }
20139
20155
  }
20140
20156
  return null;
20141
20157
  }
20142
20158
  function injectPortalContainerAndConstrainInMenuChild(children, portalContainer, constrainTo) {
20143
- if (React55.Children.count(children) === 1) {
20144
- const child = React55.Children.only(children);
20145
- if (React55.isValidElement(child) && child.type[propToIdentifyMenu]) {
20159
+ if (React54.Children.count(children) === 1) {
20160
+ const child = React54.Children.only(children);
20161
+ if (React54.isValidElement(child) && child.type[propToIdentifyMenu]) {
20146
20162
  const newProps = {};
20147
20163
  if (child.props.portalContainer === void 0) {
20148
20164
  newProps.portalContainer = portalContainer;
@@ -20150,7 +20166,7 @@ function injectPortalContainerAndConstrainInMenuChild(children, portalContainer,
20150
20166
  if (child.props.constrainTo === void 0) {
20151
20167
  newProps.constrainTo = constrainTo;
20152
20168
  }
20153
- return React55.cloneElement(child, newProps);
20169
+ return React54.cloneElement(child, newProps);
20154
20170
  }
20155
20171
  }
20156
20172
  return children;
@@ -20166,7 +20182,7 @@ function useOverlay(params) {
20166
20182
  const contentForPortal = [];
20167
20183
  for (const [_2, handle] of handles) {
20168
20184
  contentForPortal.push(
20169
- /* @__PURE__ */ React55.createElement(OverlayContent, __spreadProps(__spreadValues({}, handle), { key: handle.key }))
20185
+ /* @__PURE__ */ React54.createElement(OverlayContent, __spreadProps(__spreadValues({}, handle), { key: handle.key }))
20170
20186
  );
20171
20187
  }
20172
20188
  return contentForPortal;
@@ -20211,7 +20227,7 @@ function useOverlay(params) {
20211
20227
  },
20212
20228
  [handles, rootParams.portalContainer, updateContent]
20213
20229
  );
20214
- React55.useEffect(() => {
20230
+ React54.useEffect(() => {
20215
20231
  if (handleToRealign) {
20216
20232
  const handle = handles.get(handleToRealign);
20217
20233
  if (handle) {
@@ -20230,7 +20246,7 @@ function useOverlay(params) {
20230
20246
  handles.clear();
20231
20247
  updateContent();
20232
20248
  };
20233
- React55.useEffect(() => {
20249
+ React54.useEffect(() => {
20234
20250
  }, []);
20235
20251
  return {
20236
20252
  portal,
@@ -20242,16 +20258,16 @@ function useOverlay(params) {
20242
20258
  }
20243
20259
 
20244
20260
  // src/components/InfiniteTable/utils/getMenuForColumn.tsx
20245
- var React61 = __toESM(require("react"));
20261
+ var React60 = __toESM(require("react"));
20246
20262
 
20247
20263
  // src/components/Menu/index.tsx
20248
- var React59 = __toESM(require("react"));
20264
+ var React58 = __toESM(require("react"));
20249
20265
 
20250
20266
  // src/components/Menu/getMenuState.tsx
20251
- var React57 = __toESM(require("react"));
20267
+ var React56 = __toESM(require("react"));
20252
20268
 
20253
20269
  // src/components/Menu/childrenToRuntimeItems.tsx
20254
- var React56 = __toESM(require("react"));
20270
+ var React55 = __toESM(require("react"));
20255
20271
 
20256
20272
  // src/components/Menu/MenuItem.tsx
20257
20273
  function MenuItem(_props) {
@@ -20270,7 +20286,7 @@ var MenuSeparatorCls = "MenuCls_MenuSeparatorCls__db3arfd";
20270
20286
  // src/components/Menu/childrenToRuntimeItems.tsx
20271
20287
  var SEPARATOR = "-";
20272
20288
  function MenuSeparator() {
20273
- return /* @__PURE__ */ React56.createElement("hr", { className: MenuSeparatorCls });
20289
+ return /* @__PURE__ */ React55.createElement("hr", { className: MenuSeparatorCls });
20274
20290
  }
20275
20291
  var toRuntimeItem = ({
20276
20292
  columns,
@@ -20279,7 +20295,7 @@ var toRuntimeItem = ({
20279
20295
  menuId
20280
20296
  }, item) => {
20281
20297
  const menuItem = item && (item.key != null || item.label != null) ? item : null;
20282
- const menuDecoration = menuItem === null ? item === SEPARATOR ? /* @__PURE__ */ React56.createElement(MenuSeparator, null) : item : null;
20298
+ const menuDecoration = menuItem === null ? item === SEPARATOR ? /* @__PURE__ */ React55.createElement(MenuSeparator, null) : item : null;
20283
20299
  const runtimeItem = menuItem != null ? {
20284
20300
  type: "item",
20285
20301
  parentMenuId: menuId,
@@ -20307,7 +20323,7 @@ var toRuntimeItem = ({
20307
20323
  return runtimeItem;
20308
20324
  };
20309
20325
  function childrenToRuntimeItems(context, children) {
20310
- return React56.Children.map(children, (child) => {
20326
+ return React55.Children.map(children, (child) => {
20311
20327
  if (child) {
20312
20328
  if (child.props.__is_menu_item || child.type === MenuItem) {
20313
20329
  const itemProps = __spreadValues({}, child.props);
@@ -20330,7 +20346,7 @@ function childrenToRuntimeItems(context, children) {
20330
20346
  // src/components/Menu/getMenuState.tsx
20331
20347
  var SUBMENU_COL_NAME = "submenu";
20332
20348
  function getInitialMenuState() {
20333
- const domRef = React57.createRef();
20349
+ const domRef = React56.createRef();
20334
20350
  return {
20335
20351
  keyboardActiveItemKey: null,
20336
20352
  activeItemKey: null,
@@ -20385,7 +20401,7 @@ var deriveStateFromProps2 = (params) => {
20385
20401
  columns.push({
20386
20402
  name: SUBMENU_COL_NAME,
20387
20403
  render: ({ domProps, item }) => {
20388
- return item.menu ? /* @__PURE__ */ React57.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React57.createElement(ExpanderIcon, { expanded: false })) : /* @__PURE__ */ React57.createElement("div", __spreadValues({}, domProps));
20404
+ return item.menu ? /* @__PURE__ */ React56.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React56.createElement(ExpanderIcon, { expanded: false })) : /* @__PURE__ */ React56.createElement("div", __spreadValues({}, domProps));
20389
20405
  }
20390
20406
  });
20391
20407
  }
@@ -20402,7 +20418,7 @@ var deriveStateFromProps2 = (params) => {
20402
20418
  };
20403
20419
 
20404
20420
  // src/components/Menu/Menu.tsx
20405
- var React58 = __toESM(require("react"));
20421
+ var React57 = __toESM(require("react"));
20406
20422
  var import_react57 = require("react");
20407
20423
 
20408
20424
  // src/utils/pageGeometry/Triangle.ts
@@ -20662,7 +20678,7 @@ function renderSubmenuForItem(item, config) {
20662
20678
  if (typeof itemMenu === "function") {
20663
20679
  itemMenu = itemMenu();
20664
20680
  }
20665
- return /* @__PURE__ */ React58.createElement(
20681
+ return /* @__PURE__ */ React57.createElement(
20666
20682
  Menu,
20667
20683
  __spreadProps(__spreadValues({
20668
20684
  key: overlayId,
@@ -20875,7 +20891,7 @@ function MenuComponent(props) {
20875
20891
  setActiveItemKey(key);
20876
20892
  }
20877
20893
  });
20878
- renderedChildren = runtimeItems.map((runtimeItem, index) => /* @__PURE__ */ React58.createElement(
20894
+ renderedChildren = runtimeItems.map((runtimeItem, index) => /* @__PURE__ */ React57.createElement(
20879
20895
  RuntimeItemRenderer,
20880
20896
  {
20881
20897
  key: runtimeItem.type === "item" ? runtimeItem.key : index,
@@ -21060,7 +21076,7 @@ function MenuComponent(props) {
21060
21076
  domRef.current = node;
21061
21077
  }
21062
21078
  }, []);
21063
- const result = /* @__PURE__ */ React58.createElement("div", { className: display.contents }, /* @__PURE__ */ React58.createElement(
21079
+ const result = /* @__PURE__ */ React57.createElement("div", { className: display.contents }, /* @__PURE__ */ React57.createElement(
21064
21080
  "div",
21065
21081
  __spreadProps(__spreadValues({}, domProps), {
21066
21082
  "data-menu-id": menuId,
@@ -21092,12 +21108,12 @@ function MenuComponent(props) {
21092
21108
  return destroyed ? null : result;
21093
21109
  }
21094
21110
  function RuntimeItemRenderer(props) {
21095
- const [pressed, setPressed] = React58.useState(false);
21111
+ const [pressed, setPressed] = React57.useState(false);
21096
21112
  const { columns, item, index, active, keyboardActive } = props;
21097
21113
  const key = item.type === "item" ? item.value.key : index;
21098
21114
  let content = null;
21099
21115
  if (item.type === "decoration") {
21100
- content = /* @__PURE__ */ React58.createElement("div", { style: item.style }, item.value);
21116
+ content = /* @__PURE__ */ React57.createElement("div", { style: item.style }, item.value);
21101
21117
  } else {
21102
21118
  let spanIndex = 0;
21103
21119
  content = columns.map((col, i) => {
@@ -21158,7 +21174,7 @@ function RuntimeItemRenderer(props) {
21158
21174
  }
21159
21175
  }
21160
21176
  };
21161
- return col.render ? /* @__PURE__ */ React58.createElement(
21177
+ return col.render ? /* @__PURE__ */ React57.createElement(
21162
21178
  RenderHookComponent,
21163
21179
  {
21164
21180
  key: `${key}-${field}`,
@@ -21170,10 +21186,10 @@ function RuntimeItemRenderer(props) {
21170
21186
  domProps
21171
21187
  }
21172
21188
  }
21173
- ) : /* @__PURE__ */ React58.createElement("div", __spreadValues({ key: `${key}-${field}` }, domProps), target[field]);
21189
+ ) : /* @__PURE__ */ React57.createElement("div", __spreadValues({ key: `${key}-${field}` }, domProps), target[field]);
21174
21190
  }).filter(Boolean);
21175
21191
  }
21176
- return /* @__PURE__ */ React58.createElement("div", { className: MenuRowCls }, content);
21192
+ return /* @__PURE__ */ React57.createElement("div", { className: MenuRowCls }, content);
21177
21193
  }
21178
21194
 
21179
21195
  // src/components/Menu/index.tsx
@@ -21187,12 +21203,12 @@ var MenuRoot = getComponentStateRoot({
21187
21203
  function MenuContextProvider(props) {
21188
21204
  const { componentActions, componentState } = useComponentState();
21189
21205
  const getState = useLatest(componentState);
21190
- return /* @__PURE__ */ React59.createElement(
21206
+ return /* @__PURE__ */ React58.createElement(
21191
21207
  MenuContext.Provider,
21192
21208
  {
21193
21209
  value: { componentActions, componentState, getState }
21194
21210
  },
21195
- /* @__PURE__ */ React59.createElement(MenuComponent, { domProps: props.domProps })
21211
+ /* @__PURE__ */ React58.createElement(MenuComponent, { domProps: props.domProps })
21196
21212
  );
21197
21213
  }
21198
21214
  function Menu(props) {
@@ -21234,24 +21250,24 @@ function Menu(props) {
21234
21250
  //@ts-ignore
21235
21251
  "__is_infinite_menu_component"
21236
21252
  ]);
21237
- const menu = /* @__PURE__ */ React59.createElement(
21253
+ const menu = /* @__PURE__ */ React58.createElement(
21238
21254
  MenuRoot,
21239
21255
  __spreadValues({
21240
21256
  addSubmenuColumnIfNeeded,
21241
21257
  bubbleActionsFromSubmenus,
21242
21258
  wrapLabels
21243
21259
  }, props),
21244
- /* @__PURE__ */ React59.createElement(MenuContextProvider, { domProps })
21260
+ /* @__PURE__ */ React58.createElement(MenuContextProvider, { domProps })
21245
21261
  );
21246
21262
  if (false) {
21247
- return /* @__PURE__ */ React59.createElement(React59.StrictMode, null, menu);
21263
+ return /* @__PURE__ */ React58.createElement(React58.StrictMode, null, menu);
21248
21264
  }
21249
21265
  return menu;
21250
21266
  }
21251
21267
  Menu[propToIdentifyMenu] = true;
21252
21268
 
21253
21269
  // src/components/InfiniteTable/utils/defaultGetColumnMenuItems.tsx
21254
- var React60 = __toESM(require("react"));
21270
+ var React59 = __toESM(require("react"));
21255
21271
  function defaultGetColumnMenuItems(_items, params) {
21256
21272
  const { columnApi, column, getComputed, api } = params;
21257
21273
  const sortable = columnApi.isSortable();
@@ -21338,7 +21354,7 @@ function defaultGetColumnMenuItems(_items, params) {
21338
21354
  colItems.push({
21339
21355
  key: id,
21340
21356
  label,
21341
- check: /* @__PURE__ */ React60.createElement(
21357
+ check: /* @__PURE__ */ React59.createElement(
21342
21358
  InfiniteCheckBox,
21343
21359
  {
21344
21360
  key: col.id,
@@ -21401,7 +21417,7 @@ function getMenuForColumn(columnId, context, onHideIntent) {
21401
21417
  if (!items || !items.length) {
21402
21418
  return null;
21403
21419
  }
21404
- return /* @__PURE__ */ React61.createElement(
21420
+ return /* @__PURE__ */ React60.createElement(
21405
21421
  MenuCmp,
21406
21422
  {
21407
21423
  autoFocus: true,
@@ -21521,7 +21537,7 @@ function useColumnMenu() {
21521
21537
  }
21522
21538
 
21523
21539
  // src/components/InfiniteTable/components/FocusDetect.tsx
21524
- var React62 = __toESM(require("react"));
21540
+ var React61 = __toESM(require("react"));
21525
21541
  var import_react59 = require("react");
21526
21542
  var style = {
21527
21543
  width: 0,
@@ -21555,7 +21571,7 @@ function FocusDetect() {
21555
21571
  };
21556
21572
  focusLastFocusableCell(context);
21557
21573
  }), []);
21558
- return /* @__PURE__ */ React62.createElement(
21574
+ return /* @__PURE__ */ React61.createElement(
21559
21575
  "div",
21560
21576
  {
21561
21577
  onFocus,
@@ -21686,18 +21702,18 @@ function useEditingCallbackProps() {
21686
21702
  var import_react61 = require("react");
21687
21703
 
21688
21704
  // src/components/InfiniteTable/utils/getFilterOperatorMenuForColumn.tsx
21689
- var React65 = __toESM(require("react"));
21705
+ var React64 = __toESM(require("react"));
21690
21706
 
21691
21707
  // src/components/InfiniteTable/components/icons/ClearIcon.tsx
21692
- var React63 = __toESM(require("react"));
21708
+ var React62 = __toESM(require("react"));
21693
21709
  var ClearIcon = (props) => {
21694
- 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" }));
21710
+ 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" }));
21695
21711
  };
21696
21712
 
21697
21713
  // src/components/InfiniteTable/components/icons/DoneIcon.tsx
21698
- var React64 = __toESM(require("react"));
21714
+ var React63 = __toESM(require("react"));
21699
21715
  var DoneIcon = (props) => {
21700
- 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" }));
21716
+ 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" }));
21701
21717
  };
21702
21718
 
21703
21719
  // src/components/InfiniteTable/utils/getFilterOperatorMenuForColumn.tsx
@@ -21743,12 +21759,12 @@ function getFilterOperatorMenuForColumn(columnId, context, onHideIntent) {
21743
21759
  const IconCmp = (_b = (_a2 = operator.components) == null ? void 0 : _a2.Icon) != null ? _b : FilterIcon;
21744
21760
  return {
21745
21761
  key,
21746
- icon: /* @__PURE__ */ React65.createElement(IconCmp, null),
21747
- label: /* @__PURE__ */ React65.createElement(React65.Fragment, null, (_c = operator.label) != null ? _c : operator.name),
21762
+ icon: /* @__PURE__ */ React64.createElement(IconCmp, null),
21763
+ label: /* @__PURE__ */ React64.createElement(React64.Fragment, null, (_c = operator.label) != null ? _c : operator.name),
21748
21764
  onAction: () => {
21749
21765
  api.setColumnFilterOperator(columnId, key);
21750
21766
  },
21751
- checked: checked ? /* @__PURE__ */ React65.createElement(DoneIcon, { size: 16 }) : null
21767
+ checked: checked ? /* @__PURE__ */ React64.createElement(DoneIcon, { size: 16 }) : null
21752
21768
  };
21753
21769
  });
21754
21770
  const firstItems = [
@@ -21763,7 +21779,7 @@ function getFilterOperatorMenuForColumn(columnId, context, onHideIntent) {
21763
21779
  {
21764
21780
  key: "reset",
21765
21781
  label: "Reset",
21766
- icon: /* @__PURE__ */ React65.createElement(ClearIcon, null),
21782
+ icon: /* @__PURE__ */ React64.createElement(ClearIcon, null),
21767
21783
  disabled: !column.computedFiltered,
21768
21784
  onAction: () => {
21769
21785
  api.clearColumnFilter(columnId);
@@ -21785,7 +21801,7 @@ function getFilterOperatorMenuForColumn(columnId, context, onHideIntent) {
21785
21801
  filterTypes
21786
21802
  };
21787
21803
  const items = getFilterOperatorMenuItems ? getFilterOperatorMenuItems(defaultItems, param) : defaultItems;
21788
- return /* @__PURE__ */ React65.createElement(
21804
+ return /* @__PURE__ */ React64.createElement(
21789
21805
  MenuCmp,
21790
21806
  {
21791
21807
  autoFocus: true,
@@ -21892,7 +21908,7 @@ function useColumnFilterOperatorMenu() {
21892
21908
  var import_react62 = require("react");
21893
21909
 
21894
21910
  // src/components/InfiniteTable/utils/getCellContextMenu.tsx
21895
- var React66 = __toESM(require("react"));
21911
+ var React65 = __toESM(require("react"));
21896
21912
  function getCellContextMenu(cellLocation, context, onHideIntent) {
21897
21913
  var _a;
21898
21914
  const { columnId, rowIndex, event } = cellLocation;
@@ -21932,7 +21948,7 @@ function getCellContextMenu(cellLocation, context, onHideIntent) {
21932
21948
  }
21933
21949
  return {
21934
21950
  preventDefault: true,
21935
- menu: /* @__PURE__ */ React66.createElement(
21951
+ menu: /* @__PURE__ */ React65.createElement(
21936
21952
  MenuCmp,
21937
21953
  {
21938
21954
  columns: menuColumns,
@@ -21987,7 +22003,7 @@ function getTableContextMenu(menuLocation, context, onHideIntent) {
21987
22003
  }
21988
22004
  return {
21989
22005
  preventDefault: true,
21990
- menu: /* @__PURE__ */ React66.createElement(
22006
+ menu: /* @__PURE__ */ React65.createElement(
21991
22007
  MenuCmp,
21992
22008
  {
21993
22009
  columns: menuColumns,
@@ -22191,6 +22207,83 @@ function useTableContextMenu() {
22191
22207
  return { menuPortal };
22192
22208
  }
22193
22209
 
22210
+ // src/components/InfiniteTable/components/HScrollSyncContent.tsx
22211
+ var import_react64 = require("react");
22212
+ var React66 = __toESM(require("react"));
22213
+
22214
+ // src/components/InfiniteTable/hooks/useGridScroll.ts
22215
+ var import_react63 = require("react");
22216
+ function useGridScroll(onScroll, deps) {
22217
+ const {
22218
+ state: { brain }
22219
+ } = useInfiniteTable();
22220
+ const memoizedOnScroll = (0, import_react63.useCallback)(onScroll, deps);
22221
+ (0, import_react63.useEffect)(() => {
22222
+ const removeOnScroll = brain.onScroll(memoizedOnScroll);
22223
+ return removeOnScroll;
22224
+ }, [brain, memoizedOnScroll]);
22225
+ }
22226
+
22227
+ // src/components/InfiniteTable/components/HScrollSyncContent.css.ts
22228
+ var HScrollSyncContentCls = "HScrollSyncContent_HScrollSyncContentCls__yzx0vj0";
22229
+
22230
+ // src/components/InfiniteTable/components/HScrollSyncContent.tsx
22231
+ function HScrollSyncContent(props) {
22232
+ const _a = props, { width, maxWidth, minWidth, scrollable } = _a, domProps = __objRest(_a, ["width", "maxWidth", "minWidth", "scrollable"]);
22233
+ const domRef = (0, import_react64.useRef)(null);
22234
+ useGridScroll(
22235
+ (scrollPos) => {
22236
+ if (domRef.current && scrollable !== false) {
22237
+ domRef.current.style.transform = `translate3d(${-scrollPos.scrollLeft}px, 0px, 0px)`;
22238
+ }
22239
+ },
22240
+ [scrollable]
22241
+ );
22242
+ const style2 = __spreadValues({}, domProps.style);
22243
+ if (width === "column") {
22244
+ style2.width = ThemeVars.runtime.totalVisibleColumnsWidth;
22245
+ } else if (width === "viewport") {
22246
+ style2.width = ThemeVars.runtime.bodyWidth;
22247
+ }
22248
+ if (minWidth === "column") {
22249
+ style2.minWidth = ThemeVars.runtime.totalVisibleColumnsWidth;
22250
+ } else if (minWidth === "viewport") {
22251
+ style2.minWidth = ThemeVars.runtime.bodyWidth;
22252
+ }
22253
+ if (maxWidth === "column") {
22254
+ style2.maxWidth = ThemeVars.runtime.totalVisibleColumnsWidth;
22255
+ } else if (maxWidth === "viewport") {
22256
+ style2.maxWidth = ThemeVars.runtime.bodyWidth;
22257
+ }
22258
+ return /* @__PURE__ */ React66.createElement(
22259
+ "div",
22260
+ __spreadProps(__spreadValues({
22261
+ ref: domRef
22262
+ }, domProps), {
22263
+ className: domProps.className ? join(domProps.className, HScrollSyncContentCls) : HScrollSyncContentCls,
22264
+ style: style2
22265
+ }),
22266
+ domProps.children
22267
+ );
22268
+ }
22269
+
22270
+ // src/components/InfiniteTable/hooks/useVisibleColumnSizes.ts
22271
+ var columnWidthAtIndex6 = stripVar(InternalVars.columnWidthAtIndex);
22272
+ var columnOffsetAtIndex5 = stripVar(InternalVars.columnOffsetAtIndex);
22273
+ function useVisibleColumnSizes() {
22274
+ const context = useInfiniteTable();
22275
+ return context.computed.computedVisibleColumns.map((column) => {
22276
+ return {
22277
+ id: column.id,
22278
+ width: column.computedWidth,
22279
+ cssVarForWidth: `var(${columnWidthAtIndex6}-${column.computedVisibleIndex})`,
22280
+ offset: column.computedOffset,
22281
+ cssVarForOffset: `var(${columnOffsetAtIndex5}-${column.computedVisibleIndex})`,
22282
+ pinned: column.computedPinned
22283
+ };
22284
+ });
22285
+ }
22286
+
22194
22287
  // src/components/InfiniteTable/index.tsx
22195
22288
  var InfiniteTableClassName = internalProps.rootClassName;
22196
22289
  var HOVERED_CLASS_NAMES = [RowHoverCls, "InfiniteColumnCell--hovered"];
@@ -22208,44 +22301,154 @@ var InfiniteTableRoot = getComponentStateRoot({
22208
22301
  rowHeight: true,
22209
22302
  columnHeaderHeight: true
22210
22303
  },
22304
+ //@ts-ignore
22305
+ mappedCallbacks: getMappedCallbacks2(),
22211
22306
  // @ts-ignore
22212
22307
  getParentState: () => useDataSource(),
22213
22308
  debugName: "InfiniteTable"
22214
22309
  });
22310
+ function InfiniteTableHeader2() {
22311
+ const context = useInfiniteTable();
22312
+ const { state: componentState, getComputed } = context;
22313
+ const { header, brain, headerBrain } = componentState;
22314
+ const { scrollbars } = getComputed();
22315
+ return header ? /* @__PURE__ */ React67.createElement(
22316
+ TableHeaderWrapper,
22317
+ {
22318
+ bodyBrain: brain,
22319
+ headerBrain,
22320
+ scrollbars
22321
+ }
22322
+ ) : null;
22323
+ }
22324
+ var InfiniteTableBodyCls = join(
22325
+ `${rootClassName2}Body`,
22326
+ position.relative,
22327
+ flex["1"],
22328
+ transformTranslateZero
22329
+ );
22330
+ function InfiniteTableBodyContainer(props) {
22331
+ return /* @__PURE__ */ React67.createElement(
22332
+ "div",
22333
+ __spreadProps(__spreadValues({}, props), {
22334
+ className: props.className ? join(InfiniteTableBodyCls, props.className) : InfiniteTableBodyCls
22335
+ })
22336
+ );
22337
+ }
22338
+ function InfiniteTableBody() {
22339
+ var _a;
22340
+ const context = useInfiniteTable();
22341
+ const masterContext = useMasterDetailContext();
22342
+ const { state: componentState, getComputed, api } = context;
22343
+ const {
22344
+ renderer,
22345
+ onRenderUpdater,
22346
+ debugId,
22347
+ keyboardNavigation,
22348
+ activeRowIndex,
22349
+ loadingText,
22350
+ scrollStopDelay,
22351
+ brain,
22352
+ scrollerDOMRef,
22353
+ components: components2,
22354
+ bodySize,
22355
+ activeCellIndex,
22356
+ rowDetailRenderer
22357
+ } = componentState;
22358
+ const LoadMaskCmp = (_a = components2 == null ? void 0 : components2.LoadMask) != null ? _a : LoadMask;
22359
+ const computed = getComputed();
22360
+ const { computedRowHeight, computedRowSizeCacheForDetails } = computed;
22361
+ const activeCellRowHeight = (computedRowSizeCacheForDetails == null ? void 0 : computedRowSizeCacheForDetails.getRowHeight) || computedRowHeight;
22362
+ const {
22363
+ componentState: { loading }
22364
+ } = useDataSourceContextValue();
22365
+ const onContextMenu = React67.useCallback((event) => {
22366
+ const state = context.getState();
22367
+ const target = event.target;
22368
+ if (!masterContext && event._from_row_detail) {
22369
+ return;
22370
+ }
22371
+ if (masterContext) {
22372
+ event._from_row_detail = true;
22373
+ }
22374
+ const cell = selectParentUntil(
22375
+ target,
22376
+ getCellSelector(),
22377
+ state.domRef.current
22378
+ );
22379
+ let columnId;
22380
+ let colIndex;
22381
+ let rowId;
22382
+ let rowIndex;
22383
+ if (cell) {
22384
+ colIndex = Number(cell.dataset.colIndex);
22385
+ rowIndex = Number(cell.dataset.rowIndex);
22386
+ columnId = context.getComputed().computedVisibleColumns[colIndex].id;
22387
+ rowId = context.dataSourceApi.getRowInfoArray()[rowIndex].id;
22388
+ }
22389
+ const param = {
22390
+ columnId,
22391
+ colIndex,
22392
+ rowId,
22393
+ rowIndex,
22394
+ event,
22395
+ target: cell != null ? cell : event.target
22396
+ };
22397
+ if (cell) {
22398
+ state.cellContextMenu(param);
22399
+ }
22400
+ state.contextMenu(param);
22401
+ }, []);
22402
+ const { renderCell, renderDetailRow } = useCellRendering({
22403
+ imperativeApi: api,
22404
+ getComputed,
22405
+ domRef: componentState.domRef,
22406
+ bodySize,
22407
+ computed
22408
+ });
22409
+ return /* @__PURE__ */ React67.createElement(InfiniteTableBodyContainer, { onContextMenu }, /* @__PURE__ */ React67.createElement(
22410
+ HeadlessTable,
22411
+ {
22412
+ debugId,
22413
+ tabIndex: 0,
22414
+ activeRowIndex: componentState.ready && keyboardNavigation === "row" ? activeRowIndex : null,
22415
+ activeCellIndex: componentState.ready && keyboardNavigation === "cell" && // we want to hide the active cell indicator while column reodering is happening
22416
+ !componentState.columnReorderDragColumnId ? activeCellIndex : null,
22417
+ scrollStopDelay,
22418
+ renderer,
22419
+ onRenderUpdater,
22420
+ brain,
22421
+ activeCellRowHeight,
22422
+ renderCell,
22423
+ renderDetailRow: rowDetailRenderer ? renderDetailRow : void 0,
22424
+ cellHoverClassNames: HOVERED_CLASS_NAMES,
22425
+ scrollerDOMRef
22426
+ }
22427
+ ), /* @__PURE__ */ React67.createElement(LoadMaskCmp, { visible: loading }, loadingText));
22428
+ }
22215
22429
  var InfiniteTableComponent = React67.memo(
22216
22430
  function InfiniteTableComponent2() {
22217
- var _a;
22218
22431
  const context = useInfiniteTable();
22219
22432
  const masterContext = useMasterDetailContext();
22220
- const { state: componentState, getComputed, computed, api } = context;
22433
+ const { state: componentState, api, children: initialChildren } = context;
22221
22434
  const {
22222
- componentState: { loading, dataArray },
22435
+ componentState: { dataArray },
22223
22436
  getState: getDataSourceState,
22224
22437
  componentActions: dataSourceActions
22225
22438
  } = useDataSourceContextValue();
22226
22439
  const {
22227
22440
  domRef,
22228
- scrollerDOMRef,
22229
22441
  portalDOMRef,
22230
- loadingText,
22231
- rowDetailRenderer,
22232
- header,
22233
22442
  onRowHeightCSSVarChange,
22234
22443
  onRowDetailHeightCSSVarChange,
22235
22444
  onColumnHeaderHeightCSSVarChange,
22236
22445
  rowHeightCSSVar,
22237
22446
  rowDetailHeightCSSVar,
22238
22447
  columnHeaderHeightCSSVar,
22239
- components: components2,
22240
22448
  scrollStopDelay,
22241
22449
  brain,
22242
- headerBrain,
22243
- renderer,
22244
- keyboardNavigation,
22245
22450
  activeRowIndex,
22246
- activeCellIndex,
22247
- onRenderUpdater,
22248
- debugId
22451
+ activeCellIndex
22249
22452
  } = componentState;
22250
22453
  let { licenseKey } = componentState;
22251
22454
  if (!licenseKey && InfiniteTable.licenseKey) {
@@ -22254,16 +22457,6 @@ var InfiniteTableComponent = React67.memo(
22254
22457
  useScrollToActiveRow(activeRowIndex, dataArray.length, api);
22255
22458
  useScrollToActiveCell(activeCellIndex, dataArray.length, api);
22256
22459
  const { onKeyDown: onKeyDown2 } = useDOMEventHandlers();
22257
- const { bodySize } = componentState;
22258
- const { scrollbars, computedRowHeight, computedRowSizeCacheForDetails } = computed;
22259
- const activeCellRowHeight = (computedRowSizeCacheForDetails == null ? void 0 : computedRowSizeCacheForDetails.getRowHeight) || computedRowHeight;
22260
- const { renderCell, renderDetailRow } = useCellRendering({
22261
- imperativeApi: api,
22262
- getComputed,
22263
- domRef: componentState.domRef,
22264
- bodySize,
22265
- computed
22266
- });
22267
22460
  React67.useEffect(() => {
22268
22461
  const dataSourceState = getDataSourceState();
22269
22462
  const onChange = debounce(
@@ -22279,7 +22472,6 @@ var InfiniteTableComponent = React67.memo(
22279
22472
  }, [brain, scrollStopDelay]);
22280
22473
  const licenseValid = useLicense(licenseKey);
22281
22474
  const domProps = useDOMProps(componentState.domProps);
22282
- const LoadMaskCmp = (_a = components2 == null ? void 0 : components2.LoadMask) != null ? _a : LoadMask;
22283
22475
  React67.useEffect(() => {
22284
22476
  brain.setScrollStopDelay(scrollStopDelay);
22285
22477
  dataSourceActions.scrollStopDelayUpdatedByTable = scrollStopDelay;
@@ -22303,74 +22495,13 @@ var InfiniteTableComponent = React67.memo(
22303
22495
  globalThis.infiniteApi = context.api;
22304
22496
  }
22305
22497
  }, [componentState.ready]);
22306
- const onContextMenu = React67.useCallback((event) => {
22307
- const state = context.getState();
22308
- const target = event.target;
22309
- if (!masterContext && event._from_row_detail) {
22310
- return;
22311
- }
22312
- if (masterContext) {
22313
- event._from_row_detail = true;
22314
- }
22315
- const cell = selectParentUntil(
22316
- target,
22317
- getCellSelector(),
22318
- state.domRef.current
22319
- );
22320
- let columnId;
22321
- let colIndex;
22322
- let rowId;
22323
- let rowIndex;
22324
- if (cell) {
22325
- colIndex = Number(cell.dataset.colIndex);
22326
- rowIndex = Number(cell.dataset.rowIndex);
22327
- columnId = context.getComputed().computedVisibleColumns[colIndex].id;
22328
- rowId = context.dataSourceApi.getRowInfoArray()[rowIndex].id;
22329
- }
22330
- const param = {
22331
- columnId,
22332
- colIndex,
22333
- rowId,
22334
- rowIndex,
22335
- event,
22336
- target: cell != null ? cell : event.target
22337
- };
22338
- if (cell) {
22339
- state.cellContextMenu(param);
22340
- }
22341
- state.contextMenu(param);
22342
- }, []);
22343
22498
  React67.useEffect(() => {
22344
22499
  if (masterContext) {
22345
22500
  portalDOMRef.current = masterContext.getMasterState().portalDOMRef.current;
22346
22501
  }
22347
22502
  }, []);
22348
- return /* @__PURE__ */ React67.createElement("div", __spreadValues({ onKeyDown: onKeyDown2, ref: domRef }, domProps), header ? /* @__PURE__ */ React67.createElement(
22349
- TableHeaderWrapper,
22350
- {
22351
- bodyBrain: brain,
22352
- headerBrain,
22353
- scrollbars
22354
- }
22355
- ) : null, /* @__PURE__ */ React67.createElement(InfiniteTableBody, { onContextMenu }, /* @__PURE__ */ React67.createElement(
22356
- HeadlessTable,
22357
- {
22358
- debugId,
22359
- tabIndex: 0,
22360
- activeRowIndex: componentState.ready && keyboardNavigation === "row" ? activeRowIndex : null,
22361
- activeCellIndex: componentState.ready && keyboardNavigation === "cell" && // we want to hide the active cell indicator while column reodering is happening
22362
- !componentState.columnReorderDragColumnId ? activeCellIndex : null,
22363
- scrollStopDelay,
22364
- renderer,
22365
- onRenderUpdater,
22366
- brain,
22367
- activeCellRowHeight,
22368
- renderCell,
22369
- renderDetailRow: rowDetailRenderer ? renderDetailRow : void 0,
22370
- cellHoverClassNames: HOVERED_CLASS_NAMES,
22371
- scrollerDOMRef
22372
- }
22373
- ), /* @__PURE__ */ React67.createElement(LoadMaskCmp, { visible: loading }, loadingText)), /* @__PURE__ */ React67.createElement(
22503
+ const children = initialChildren != null ? initialChildren : /* @__PURE__ */ React67.createElement(React67.Fragment, null, /* @__PURE__ */ React67.createElement(InfiniteTableHeader2, null), /* @__PURE__ */ React67.createElement(InfiniteTableBody, null));
22504
+ return /* @__PURE__ */ React67.createElement("div", __spreadValues({ onKeyDown: onKeyDown2, ref: domRef }, domProps), children, /* @__PURE__ */ React67.createElement(
22374
22505
  "div",
22375
22506
  {
22376
22507
  ref: portalDOMRef,
@@ -22404,10 +22535,12 @@ var InfiniteTableComponent = React67.memo(
22404
22535
  varName: columnHeaderHeightCSSVar,
22405
22536
  onChange: onColumnHeaderHeightCSSVarChange
22406
22537
  }
22407
- ) : null, /* @__PURE__ */ React67.createElement(InfiniteTableFooter, null), licenseValid ? null : /* @__PURE__ */ React67.createElement(InfiniteTableLicenseFooter, null), /* @__PURE__ */ React67.createElement(FocusDetect, null));
22538
+ ) : null, licenseValid ? null : /* @__PURE__ */ React67.createElement(InfiniteTableLicenseFooter, null), /* @__PURE__ */ React67.createElement(FocusDetect, null));
22408
22539
  }
22409
22540
  );
22410
- function InfiniteTableContextProvider() {
22541
+ function InfiniteTableContextProvider({
22542
+ children
22543
+ }) {
22411
22544
  const { componentActions, componentState } = useComponentState();
22412
22545
  const { scrollerDOMRef, scrollTopKey } = componentState;
22413
22546
  const computed = useComputed();
@@ -22447,7 +22580,8 @@ function InfiniteTableContextProvider() {
22447
22580
  getComputed,
22448
22581
  getState,
22449
22582
  api: imperativeApi,
22450
- dataSourceApi
22583
+ dataSourceApi,
22584
+ children
22451
22585
  };
22452
22586
  useResizeObserver(
22453
22587
  scrollerDOMRef,
@@ -22480,7 +22614,7 @@ var InfiniteTable = function(props) {
22480
22614
  rowHeight: DEFAULT_ROW_HEIGHT,
22481
22615
  columnHeaderHeight: DEFAULT_COLUMN_HEADER_HEIGHT
22482
22616
  }, props),
22483
- /* @__PURE__ */ React67.createElement(InfiniteTableContextProvider, null)
22617
+ /* @__PURE__ */ React67.createElement(InfiniteTableContextProvider, { children: props.children })
22484
22618
  )
22485
22619
  );
22486
22620
  if (false) {
@@ -22488,6 +22622,10 @@ var InfiniteTable = function(props) {
22488
22622
  }
22489
22623
  return table;
22490
22624
  };
22625
+ InfiniteTable.Header = InfiniteTableHeader2;
22626
+ InfiniteTable.Body = InfiniteTableBody;
22627
+ InfiniteTable.HScrollSyncContent = HScrollSyncContent;
22628
+ InfiniteTable.Footer = () => /* @__PURE__ */ React67.createElement(InfiniteTableFooter, null);
22491
22629
 
22492
22630
  // src/components/InfiniteTable/eventHandlers/keyboardShortcuts.ts
22493
22631
  var instantEdit = {
@@ -22534,7 +22672,7 @@ var keyboardShortcuts = {
22534
22672
  };
22535
22673
 
22536
22674
  // src/components/hooks/useInterceptedMap.ts
22537
- var import_react63 = require("react");
22675
+ var import_react65 = require("react");
22538
22676
  function interceptMap(map2, fns) {
22539
22677
  const { set, delete: deleteKey, clear } = map2;
22540
22678
  if (fns.set) {
@@ -22735,6 +22873,7 @@ var components = {
22735
22873
  useDataSource,
22736
22874
  useEffectWithChanges,
22737
22875
  useEffectWithObject,
22876
+ useGridScroll,
22738
22877
  useInfiniteColumnCell,
22739
22878
  useInfiniteColumnEditor,
22740
22879
  useInfiniteColumnFilterEditor,
@@ -22742,6 +22881,7 @@ var components = {
22742
22881
  useMasterRowInfo,
22743
22882
  useOverlay,
22744
22883
  useOverlayPortal,
22745
- useRowInfoReducers
22884
+ useRowInfoReducers,
22885
+ useVisibleColumnSizes
22746
22886
  });
22747
22887
  //!collapsed || lazyLoad;