@infinite-table/infinite-react 3.1.6 → 3.2.0

package/index.dev.mjs

@@ -123,7 +123,7 @@ function debounce(fn, { wait }) {
 }
 
 // src/components/InfiniteTable/index.tsx
-import * as React64 from "react";
+import * as React66 from "react";
 
 // src/utils/join.ts
 var join = (...args) => args.filter((x) => !!`${x}`).join(" ");
@@ -136,12 +136,12 @@ import { useRef as useRef2 } from "react";
 function once(fn) {
   let called = false;
   let result = null;
-  const onceFn = () => {
+  const onceFn = (...args) => {
     if (called) {
       return result;
     }
     called = true;
-    result = fn();
+    result = fn(...args);
     return result;
   };
   return onceFn;
@@ -1089,7 +1089,7 @@ var CSSNumericVariableWatch = (props) => {
 };
 
 // src/components/DataSource/publicHooks/useDataSource.ts
-import * as React4 from "react";
+import * as React5 from "react";
 
 // src/components/DataSource/DataSourceContext.ts
 import * as React3 from "react";
@@ -1101,25 +1101,41 @@ function getDataSourceContext() {
   return DSContext = React3.createContext({
     api: null,
     getState: () => null,
+    assignState: () => null,
     componentState: null,
     componentActions: null
   });
 }
 
+// src/components/DataSource/DataSourceMasterDetailContext.ts
+import * as React4 from "react";
+var DSMasterDetailContext;
+function getDataSourceMasterDetailContext() {
+  if (DSMasterDetailContext) {
+    return DSMasterDetailContext;
+  }
+  return DSMasterDetailContext = React4.createContext(void 0);
+}
+
 // src/components/DataSource/publicHooks/useDataSource.ts
 function useDataSource() {
   const DataSourceContext = getDataSourceContext();
-  const contextValue = React4.useContext(DataSourceContext);
+  const contextValue = React5.useContext(DataSourceContext);
   return contextValue.componentState;
 }
 function useDataSourceContextValue() {
   const DataSourceContext = getDataSourceContext();
-  const contextValue = React4.useContext(DataSourceContext);
+  const contextValue = React5.useContext(DataSourceContext);
+  return contextValue;
+}
+function useMasterDetailContext() {
+  const masterDetailContext = getDataSourceMasterDetailContext();
+  const contextValue = React5.useContext(masterDetailContext);
   return contextValue;
 }
 
 // src/components/HeadlessTable/index.tsx
-import * as React12 from "react";
+import * as React13 from "react";
 import {
   useCallback as useCallback4,
   useEffect as useEffect7,
@@ -1128,7 +1144,7 @@ import {
 } from "react";
 
 // src/components/VirtualList/SpacePlaceholder.tsx
-import * as React5 from "react";
+import * as React6 from "react";
 function SpacePlaceholderFn(props) {
   const { height, width, count } = props;
   const style2 = {
@@ -1139,7 +1155,7 @@ function SpacePlaceholderFn(props) {
     pointerEvents: "none",
     contain: "strict"
   };
-  return /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React6.createElement(
     "div",
     {
       "data-count": count,
@@ -1150,13 +1166,13 @@ function SpacePlaceholderFn(props) {
     }
   );
 }
-var SpacePlaceholder = React5.memo(SpacePlaceholderFn);
+var SpacePlaceholder = React6.memo(SpacePlaceholderFn);
 
 // src/components/VirtualList/VirtualList.css.ts
 var scrollTransformTargetCls = "VirtualList_scrollTransformTarget__mlx2t3";
 
 // src/components/VirtualScrollContainer/index.tsx
-import * as React6 from "react";
+import * as React7 from "react";
 import { useRef as useRef3 } from "react";
 
 // src/components/hooks/useOnScroll.ts
@@ -1203,7 +1219,7 @@ var getScrollableClassName = (scrollable) => {
 
 // src/components/VirtualScrollContainer/index.tsx
 var rootClassName = "InfiniteVirtualScrollContainer";
-var VirtualScrollContainer = React6.forwardRef(
+var VirtualScrollContainer = React7.forwardRef(
   function VirtualScrollContainer2(props, ref) {
     const {
       children,
@@ -1215,7 +1231,7 @@ var VirtualScrollContainer = React6.forwardRef(
     } = props;
     const domRef = ref != null ? ref : useRef3(null);
     useOnScroll(domRef, onContainerScroll);
-    return /* @__PURE__ */ React6.createElement(
+    return /* @__PURE__ */ React7.createElement(
       "div",
       {
         ref: domRef,
@@ -1234,11 +1250,11 @@ var VirtualScrollContainer = React6.forwardRef(
 );
 
 // src/components/HeadlessTable/RawTable.tsx
-import * as React9 from "react";
+import * as React10 from "react";
 import { useEffect as useEffect4, useLayoutEffect as useLayoutEffect3, useMemo as useMemo2 } from "react";
 
 // src/components/RawList/AvoidReactDiff.tsx
-import * as React7 from "react";
+import * as React8 from "react";
 import { useEffect as useEffect3, useRef as useRef4, useState } from "react";
 function AvoidReactDiffFn(props) {
   const [children, setChildren] = useState(props.updater.get);
@@ -1266,7 +1282,7 @@ function AvoidReactDiffFn(props) {
   }, [props.updater, props.useraf]);
   return children != null ? children : null;
 }
-var AvoidReactDiff = React7.memo(AvoidReactDiffFn);
+var AvoidReactDiff = React8.memo(AvoidReactDiffFn);
 
 // src/components/utils/buildSubscriptionCallback.tsx
 function buildSubscriptionCallback(withRaf = false) {
@@ -1312,7 +1328,7 @@ function buildSubscriptionCallback(withRaf = false) {
 }
 
 // src/components/HeadlessTable/ReactHeadlessTableRenderer.tsx
-import * as React8 from "react";
+import * as React9 from "react";
 
 // src/utils/mathIntersection.ts
 function arrayIntersection(...arrays) {
@@ -1349,8 +1365,8 @@ function stripVar(cssVariableWithVarString) {
 }
 
 // src/components/InfiniteTable/theme.css.ts
-var InternalVars = { currentColumnTransformX: "var(--currentColumnTransformX__1slvgu90)", currentColumnTransformY: "var(--currentColumnTransformY__1slvgu91)", activeCellRowOffset: "var(--activeCellRowOffset__1slvgu92)", activeCellRowHeight: "var(--activeCellRowHeight__1slvgu93)", activeCellOffsetX: "var(--activeCellOffsetX__1slvgu94)", activeCellOffsetY: "var(--activeCellOffsetY__1slvgu95)", scrollTopForActiveRow: "var(--scrollTopForActiveRow__1slvgu96)", activeCellColWidth: "var(--activeCellColWidth__1slvgu97)", activeCellColOffset: "var(--activeCellColOffset__1slvgu98)", columnReorderEffectDurationAtIndex: "var(--columnReorderEffectDurationAtIndex__1slvgu99)", columnWidthAtIndex: "var(--columnWidthAtIndex__1slvgu9a)", columnOffsetAtIndex: "var(--columnOffsetAtIndex__1slvgu9b)", columnOffsetAtIndexWhileReordering: "var(--columnOffsetAtIndexWhileReordering__1slvgu9c)", columnZIndexAtIndex: "var(--columnZIndexAtIndex__1slvgu9d)", pinnedStartWidth: "var(--pinnedStartWidth__1slvgu9e)", pinnedEndWidth: "var(--pinnedEndWidth__1slvgu9f)", pinnedEndOffset: "var(--pinnedEndOffset__1slvgu9g)", computedVisibleColumnsCount: "var(--computedVisibleColumnsCount__1slvgu9h)", baseZIndexForCells: "var(--baseZIndexForCells__1slvgu9i)", bodyWidth: "var(--bodyWidth__1slvgu9j)", bodyHeight: "var(--bodyHeight__1slvgu9k)", scrollbarWidthHorizontal: "var(--scrollbarWidthHorizontal__1slvgu9l)", scrollbarWidthVertical: "var(--scrollbarWidthVertical__1slvgu9m)", scrollLeft: "var(--scrollLeft__1slvgu9n)", scrollTop: "var(--scrollTop__1slvgu9o)" };
-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)", 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)", 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)", 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)", 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)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", selectedBackground: "var(--infinite-row-selected-background)", activeBackground: "var(--infinite-active-row-background)", activeBorderColor: "var(--infinite-active-row-border-color)", activeBorderWidth: "var(--infinite-active-row-border-width)", activeBorderStyle: "var(--infinite-active-row-border-style)", activeBorder: "var(--infinite-active-row-border)", activeBackgroundAlpha: "var(--infinite-active-row-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-row-background-alpha--table-unfocused)", hoverBackground: "var(--infinite-row-hover-background)", selectedHoverBackground: "var(--infinite-row-selected-hover-background)", groupRowBackground: "var(--infinite-group-row-background)", groupRowColumnNesting: "var(--infinite-group-row-column-nesting)", groupNesting: "var(--infinite-dont-override-group-row-nesting-length)", pointerEventsWhileScrolling: "var(--infinite-row-pointer-events-while-scrolling)" }, ColumnCell: { background: "var(--infinite-column-cell-bg-dont-override)" } } };
+var InternalVars = { currentColumnTransformX: "var(--currentColumnTransformX__1slvgu90)", y: "var(--y__1slvgu91)", activeCellRowOffset: "var(--activeCellRowOffset__1slvgu92)", activeCellRowHeight: "var(--activeCellRowHeight__1slvgu93)", activeCellOffsetX: "var(--activeCellOffsetX__1slvgu94)", activeCellOffsetY: "var(--activeCellOffsetY__1slvgu95)", scrollTopForActiveRow: "var(--scrollTopForActiveRow__1slvgu96)", activeCellColWidth: "var(--activeCellColWidth__1slvgu97)", activeCellColOffset: "var(--activeCellColOffset__1slvgu98)", columnReorderEffectDurationAtIndex: "var(--columnReorderEffectDurationAtIndex__1slvgu99)", columnWidthAtIndex: "var(--columnWidthAtIndex__1slvgu9a)", columnOffsetAtIndex: "var(--columnOffsetAtIndex__1slvgu9b)", columnOffsetAtIndexWhileReordering: "var(--columnOffsetAtIndexWhileReordering__1slvgu9c)", columnZIndexAtIndex: "var(--columnZIndexAtIndex__1slvgu9d)", pinnedStartWidth: "var(--pinnedStartWidth__1slvgu9e)", pinnedEndWidth: "var(--pinnedEndWidth__1slvgu9f)", pinnedEndOffset: "var(--pinnedEndOffset__1slvgu9g)", computedVisibleColumnsCount: "var(--computedVisibleColumnsCount__1slvgu9h)", baseZIndexForCells: "var(--baseZIndexForCells__1slvgu9i)", bodyWidth: "var(--bodyWidth__1slvgu9j)", bodyHeight: "var(--bodyHeight__1slvgu9k)", scrollbarWidthHorizontal: "var(--scrollbarWidthHorizontal__1slvgu9l)", scrollbarWidthVertical: "var(--scrollbarWidthVertical__1slvgu9m)", scrollLeft: "var(--scrollLeft__1slvgu9n)", scrollTop: "var(--scrollTop__1slvgu9o)" };
+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)", 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)", 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)", 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)", 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)" }, RowDetails: { background: "var(--infinite-rowdetails-background)", padding: "var(--infinite-rowdetails-padding)", gridHeight: "var(--infinite-rowdetails-grid-height)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", selectedBackground: "var(--infinite-row-selected-background)", activeBackground: "var(--infinite-active-row-background)", activeBorderColor: "var(--infinite-active-row-border-color)", activeBorderWidth: "var(--infinite-active-row-border-width)", activeBorderStyle: "var(--infinite-active-row-border-style)", activeBorder: "var(--infinite-active-row-border)", activeBackgroundAlpha: "var(--infinite-active-row-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-row-background-alpha--table-unfocused)", hoverBackground: "var(--infinite-row-hover-background)", selectedHoverBackground: "var(--infinite-row-selected-hover-background)", groupRowBackground: "var(--infinite-group-row-background)", groupRowColumnNesting: "var(--infinite-group-row-column-nesting)", groupNesting: "var(--infinite-dont-override-group-row-nesting-length)", pointerEventsWhileScrolling: "var(--infinite-row-pointer-events-while-scrolling)" }, ColumnCell: { background: "var(--infinite-column-cell-bg-dont-override)" } } };
 var columnHeaderHeightName = "column-header-height";
 
 // src/utils/selectParent.ts
@@ -1506,14 +1522,23 @@ var getRenderRangeCellCount = (range) => {
   const colCount = endCol - startCol;
   return rowCount * colCount;
 };
+var getRenderRangeRowCount = (range) => {
+  const { start, end } = range;
+  const [startRow] = start;
+  const [endRow] = end;
+  const rowCount = endRow - startRow;
+  return rowCount;
+};
 var ALL_DIRECTIONS = { horizontal: true, vertical: true };
 var SORT_ASC = (a, b) => a - b;
 var raf2 = typeof window !== "undefined" ? requestAnimationFrame : (fn) => setTimeout(fn, 0);
 var MatrixBrain = class extends Logger {
   constructor(name) {
-    super(`MatrixBrain${name ? `:${name}` : ""}`);
+    const logName = `MatrixBrain${name ? `:${name}` : ""}`;
+    super(logName);
     this.scrolling = false;
     this.width = 0;
+    this.name = "";
     this.height = 0;
     this.cols = 0;
     this.rows = 0;
@@ -1790,6 +1815,9 @@ var MatrixBrain = class extends Logger {
       let renderCount = 0;
       let size = direction === "horizontal" ? theSize.width : theSize.height;
       size -= this.getFixedSize(direction);
+      if (size <= 0) {
+        return 0;
+      }
       if (typeof itemSize === "function") {
         const sizes = [];
         for (let i = 0; i < count; i++) {
@@ -2471,6 +2499,7 @@ var MatrixBrain = class extends Logger {
       this.onVerticalRenderRangeChangeFns = /* @__PURE__ */ new Set();
       this.onHorizontalRenderRangeChangeFns = /* @__PURE__ */ new Set();
     };
+    this.name = logName;
     this.reset();
   }
   reset(which = ALL_DIRECTIONS) {
@@ -2742,9 +2771,131 @@ var MappedCells = class extends Logger {
   }
 };
 
+// src/components/HeadlessTable/MappedVirtualRows.ts
+var MappedVirtualRows = class extends Logger {
+  constructor() {
+    super(`MappedVirtualRows`);
+    /**
+     * Retrieves the elements that contain rendered rows that are outside
+     * of the specified range
+     *
+     * @param start in [rowIndex, colIndex] format - represents the topmost-leftmost cell visible of the render range
+     * @param end in [rowIndex, colIndex] format - represents the bottom-right corner of the visible range. The end is not inclusive,
+     * so the last visible cell will be [rowIndex-1, colIndex-1]
+     *
+     * @returns an array of element indexes that are outside the specified range
+     */
+    this.getElementsOutsideRenderRange = (range) => {
+      const { start, end } = range;
+      const [startRow] = start;
+      const [endRow] = end;
+      const result = [];
+      for (let elementIndex = 0, len = this.elementIndexToRowIndex.length; elementIndex < len; elementIndex++) {
+        const currentRowIndex = this.elementIndexToRowIndex[elementIndex];
+        if (currentRowIndex == null) {
+          continue;
+        }
+        const rowBefore = currentRowIndex < startRow;
+        const rowAfter = currentRowIndex >= endRow;
+        const outsideRenderRange = rowBefore || rowAfter;
+        if (outsideRenderRange) {
+          result.push(elementIndex);
+        }
+      }
+      return result;
+    };
+    this.isRowRendered = (rowIndex) => {
+      return this.rowToElementIndex[rowIndex] != null;
+    };
+    this.isElementRendered = (elementIndex) => {
+      return this.elementIndexToRowIndex[elementIndex] != null;
+    };
+    this.getRenderedNodeAtElement = (elementIndex) => {
+      return this.renderedElements[elementIndex] || null;
+    };
+    this.getRenderedRowAtElement = (elementIndex) => {
+      const row = this.elementIndexToRowIndex[elementIndex];
+      return row != null ? row : null;
+    };
+    this.getRenderedNodeForRow = (rowIndex) => {
+      var _a;
+      const elementIndex = this.rowToElementIndex[rowIndex];
+      return elementIndex != null ? (_a = this.renderedElements[elementIndex]) != null ? _a : null : null;
+    };
+    this.getElementIndexForRow = (rowIndex) => {
+      const elementIndex = this.rowToElementIndex[rowIndex];
+      return elementIndex != null ? elementIndex : null;
+    };
+    this.renderRowAtElement = (rowIndex, elementIndex, renderNode) => {
+      if (false) {
+        this.debug(`Render row ${rowIndex} at element ${elementIndex}`);
+      }
+      const currentRow = this.elementIndexToRowIndex[elementIndex];
+      if (currentRow != null) {
+        this.rowToElementIndex[currentRow] = null;
+      }
+      if (renderNode !== void 0) {
+        this.renderedElements[elementIndex] = renderNode;
+      }
+      this.elementIndexToRowIndex[elementIndex] = rowIndex;
+      this.rowToElementIndex[rowIndex] = elementIndex;
+    };
+    this.discardRow = (rowIndex) => {
+      const elementIndex = this.rowToElementIndex[rowIndex];
+      if (elementIndex != null) {
+        this.renderedElements[elementIndex] = null;
+        this.elementIndexToRowIndex[elementIndex] = null;
+        this.rowToElementIndex[rowIndex] = null;
+      }
+    };
+    this.discardElement = (elementIndex) => {
+      const rowIndex = this.elementIndexToRowIndex[elementIndex];
+      if (rowIndex != null) {
+        this.renderedElements[elementIndex] = null;
+        this.elementIndexToRowIndex[elementIndex] = null;
+        this.rowToElementIndex[rowIndex] = null;
+        return rowIndex;
+      }
+      return null;
+    };
+    this.discardElementsStartingWith = (elIndex, callback) => {
+      let discardedRow = null;
+      let oneDiscarded = false;
+      if (elIndex < this.elementIndexToRowIndex.length) {
+        for (let elementIndex = elIndex, len = this.elementIndexToRowIndex.length; elementIndex < len; elementIndex++) {
+          discardedRow = this.discardElement(elementIndex);
+          if (discardedRow) {
+            oneDiscarded = true;
+          }
+          if (callback) {
+            callback(elementIndex, discardedRow);
+          }
+        }
+        this.elementIndexToRowIndex.length = elIndex;
+        this.renderedElements.length = elIndex;
+      }
+      return oneDiscarded;
+    };
+    this.init();
+  }
+  init() {
+    this.elementIndexToRowIndex = [];
+    this.rowToElementIndex = [];
+    this.renderedElements = [];
+  }
+  reset() {
+    this.init();
+  }
+  destroy() {
+    this.elementIndexToRowIndex = [];
+    this.rowToElementIndex = [];
+    this.renderedElements = [];
+  }
+};
+
 // src/components/HeadlessTable/ReactHeadlessTableRenderer.tsx
 var ITEM_POSITION_WITH_TRANSFORM = true;
-var currentColumnTransformY = stripVar(InternalVars.currentColumnTransformY);
+var currentTransformY = stripVar(InternalVars.y);
 var scrollTopCSSVar = stripVar(InternalVars.scrollTop);
 var columnOffsetAtIndex2 = stripVar(InternalVars.columnOffsetAtIndex);
 var columnOffsetAtIndexWhileReordering2 = stripVar(
@@ -2753,17 +2904,32 @@ var columnOffsetAtIndexWhileReordering2 = stripVar(
 var ReactHeadlessTableRenderer = class extends Logger {
   constructor(brain) {
     super("ReactHeadlessTableRenderer");
+    this.debugId = "";
     this.destroyed = false;
     this.scrolling = false;
     this.cellHoverClassNames = [];
-    this.name = "";
     this.itemDOMElements = [];
     this.itemDOMRefs = [];
     this.updaters = [];
+    this.detailRowDOMElements = [];
+    this.detailRowDOMRefs = [];
+    this.detailRowUpdaters = [];
     this.items = [];
+    this.detailItems = [];
     this.currentHoveredRow = -1;
     this.hoverRowUpdatesInProgress = /* @__PURE__ */ new Map();
     this.infiniteNode = null;
+    this.setDetailTransform = (element, _rowIndex, {
+      y,
+      scrollTop: scrollTop2,
+      scrollLeft: scrollLeft2
+    }) => {
+      element.style.setProperty(
+        currentTransformY,
+        scrollTop2 ? `calc( ${y}px + var(${scrollTopCSSVar}) )` : `${y}px`
+      );
+      element.style.transform = `translate3d(${scrollLeft2 || 0}px, var(${currentTransformY}), 0)`;
+    };
     this.setTransform = (element, _rowIndex, colIndex, {
       //@ts-ignore
       x,
@@ -2775,10 +2941,10 @@ var ReactHeadlessTableRenderer = class extends Logger {
       const columnOffsetX = `${columnOffsetAtIndex2}-${colIndex}`;
       const columnOffsetXWhileReordering = `${columnOffsetAtIndexWhileReordering2}-${colIndex}`;
       element.style.setProperty(
-        currentColumnTransformY,
+        currentTransformY,
         scrollTop2 ? `calc( ${y}px + var(${scrollTopCSSVar}) )` : `${y}px`
       );
-      element.style.transform = `translate3d(var(${columnOffsetXWhileReordering}, var(${columnOffsetX})), ${InternalVars.currentColumnTransformY}, 0)`;
+      element.style.transform = `translate3d(var(${columnOffsetXWhileReordering}, var(${columnOffsetX})), var(${currentTransformY}), 0)`;
       if (zIndex2 != null) {
       }
     };
@@ -3016,6 +3182,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
     };
     this.renderRange = (range, {
       renderCell,
+      renderDetailRow,
       force,
       onRender
     }) => {
@@ -3026,7 +3193,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
       if (false) {
         this.debug(`Render range ${start}-${end}. Force ${force}`);
       }
-      const { mappedCells } = this;
+      const { mappedCells, mappedDetailRows } = this;
       const fixedRanges = this.getFixedRanges(range);
       const ranges = [range, ...fixedRanges];
       const extraCellsMap = /* @__PURE__ */ new Map();
@@ -3040,6 +3207,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
         (sum2, range2) => sum2 + getRenderRangeCellCount(range2),
         0
       );
+      const renderRowCount = renderDetailRow ? ranges.reduce((sum2, range2) => sum2 + getRenderRangeRowCount(range2), 0) : 0;
       if (this.itemDOMElements.length >= renderCount) {
         mappedCells.discardElementsStartingWith(renderCount, (elementIndex) => {
           if (this.updaters[elementIndex]) {
@@ -3057,9 +3225,41 @@ var ReactHeadlessTableRenderer = class extends Logger {
         this.updaters.length = Math.min(this.updaters.length, renderCount);
         this.items.length = Math.min(this.items.length, renderCount);
       }
+      if (renderDetailRow && this.detailRowDOMElements.length && this.detailRowDOMElements.length >= renderRowCount) {
+        mappedDetailRows.discardElementsStartingWith(
+          renderRowCount,
+          (elementIndex) => {
+            if (this.detailRowUpdaters[elementIndex]) {
+              this.detailRowUpdaters[elementIndex].destroy();
+            }
+            if (false) {
+              this.debug(`Discard detail row element ${elementIndex}`);
+            }
+          }
+        );
+        this.detailRowDOMElements.length = Math.min(
+          this.detailRowDOMElements.length,
+          renderRowCount
+        );
+        this.detailRowDOMRefs.length = Math.min(
+          this.detailRowDOMRefs.length,
+          renderRowCount
+        );
+        this.detailRowUpdaters.length = Math.min(
+          this.detailRowUpdaters.length,
+          renderRowCount
+        );
+        this.detailItems.length = Math.min(
+          this.detailItems.length,
+          renderRowCount
+        );
+      }
       const elementsOutsideRanges = arrayIntersection(
         ...ranges.map(mappedCells.getElementsOutsideRenderRange)
       );
+      const detailElementsOutsideRanges = renderDetailRow ? arrayIntersection(
+        ...ranges.map(mappedDetailRows.getElementsOutsideRenderRange)
+      ) : [];
       const elementsOutsideItemRange = elementsOutsideRanges.filter(
         (elementIndex) => {
           const cell = this.mappedCells.getRenderedCellAtElement(elementIndex);
@@ -3072,11 +3272,21 @@ var ReactHeadlessTableRenderer = class extends Logger {
       if (this.items.length > renderCount) {
         this.items.length = renderCount;
       }
+      if (renderDetailRow && this.detailItems.length > renderRowCount) {
+        this.detailItems.length = renderRowCount;
+      }
       for (let i = this.items.length; i < renderCount; i++) {
         this.renderElement(i);
         elementsOutsideItemRange.splice(0, 0, i);
       }
+      if (renderDetailRow) {
+        for (let i = this.detailItems.length; i < renderRowCount; i++) {
+          this.renderDetailElement(i);
+          detailElementsOutsideRanges.splice(0, 0, i);
+        }
+      }
       const visitedCells = /* @__PURE__ */ new Map();
+      const visitedRows = /* @__PURE__ */ new Map();
       ranges.forEach((range2) => {
         const { start: start2, end: end2 } = range2;
         const [startRow, startCol] = start2;
@@ -3117,6 +3327,27 @@ var ReactHeadlessTableRenderer = class extends Logger {
             }
             this.renderCellAtElement(row, col, elementIndex, renderCell);
           }
+          if (!renderDetailRow) {
+            continue;
+          }
+          if (visitedRows.has(row)) {
+            continue;
+          }
+          visitedRows.set(row, true);
+          const rowRendered = mappedDetailRows.isRowRendered(row);
+          if (rowRendered && !force) {
+            continue;
+          }
+          const detailElementIndex = rowRendered ? mappedDetailRows.getElementIndexForRow(row) : detailElementsOutsideRanges.pop();
+          if (detailElementIndex == null) {
+            if (false) {
+              this.error(
+                `Cannot find detail element to render detail row ${row}`
+              );
+            }
+            continue;
+          }
+          this.renderDetailRowAtElement(row, detailElementIndex, renderDetailRow);
         }
       });
       extraCells.forEach(([rowIndex, colIndex]) => {
@@ -3147,7 +3378,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
         this.renderCellAtElement(rowIndex, colIndex, elementIndex, renderCell);
       });
       let result = this.items;
-      result = [...this.items];
+      result = [...this.items, ...this.detailItems];
       this.adjustFixedElementsOnScroll();
       if (onRender) {
         onRender(result);
@@ -3379,6 +3610,38 @@ var ReactHeadlessTableRenderer = class extends Logger {
         }
       }
     };
+    this.updateDetailElementPosition = (elementIndex) => {
+      if (this.destroyed) {
+        return;
+      }
+      const itemElement = this.detailRowDOMElements[elementIndex];
+      const rowIndex = this.mappedDetailRows.getRenderedRowAtElement(elementIndex);
+      if (rowIndex == null) {
+        if (false) {
+          this.error(`Cannot find row for detail element ${elementIndex}`);
+        }
+        return;
+      }
+      const itemPosition = this.brain.getItemOffsetFor(rowIndex, "vertical");
+      if (itemPosition == null) {
+        return;
+      }
+      const y = itemPosition;
+      if (itemElement) {
+        itemElement.dataset.detailRowIndex = rowIndex;
+        if (ITEM_POSITION_WITH_TRANSFORM) {
+          this.setDetailTransform(itemElement, rowIndex, {
+            y,
+            scrollLeft: this.brain.getScrollPosition().scrollLeft
+          });
+          itemElement.style.willChange = "transform";
+          itemElement.style.backfaceVisibility = "hidden";
+          itemElement.style.zIndex = // #updatezindex - we need to allow elements use their own zIndex, so we
+          // resort to allowing them to have it as a data-z-index attribute
+          itemElement.dataset.zIndex || "auto";
+        }
+      }
+    };
     this.onScrollStart = () => {
       this.scrolling = true;
     };
@@ -3389,10 +3652,28 @@ var ReactHeadlessTableRenderer = class extends Logger {
       }
     };
     this.adjustFixedElementsOnScroll = (scrollPosition = this.brain.getScrollPosition()) => {
-      const { mappedCells, brain, itemDOMElements } = this;
+      const { mappedCells, brain, itemDOMElements, detailRowDOMElements } = this;
       const cols = this.brain.getColCount();
       const rows = this.brain.getRowCount();
       const { fixedColsStart, fixedColsEnd, fixedRowsStart, fixedRowsEnd } = this.brain.getFixedCellInfo();
+      if (detailRowDOMElements.length) {
+        this.detailRowDOMElements.forEach((node, index) => {
+          if (!node) {
+            return;
+          }
+          const rowIndex = this.mappedDetailRows.getRenderedRowAtElement(index);
+          if (rowIndex != null) {
+            const y = this.brain.getItemOffsetFor(rowIndex, "vertical");
+            if (y == null) {
+              return;
+            }
+            this.setDetailTransform(node, rowIndex, {
+              y,
+              scrollLeft: scrollPosition.scrollLeft
+            });
+          }
+        });
+      }
       if (!fixedColsStart && !fixedColsEnd && !fixedRowsStart && !fixedRowsEnd) {
         return;
       }
@@ -3583,9 +3864,12 @@ var ReactHeadlessTableRenderer = class extends Logger {
       this.hoverRowUpdatesInProgress = null;
       this.brain = null;
       this.mappedCells = null;
+      this.mappedDetailRows = null;
     };
     this.brain = brain;
+    this.debugId = brain.name;
     this.mappedCells = new MappedCells();
+    this.mappedDetailRows = new MappedVirtualRows();
     const removeOnScroll = brain.onScroll(this.adjustFixedElementsOnScroll);
     const removeOnSizeChange = brain.onAvailableSizeChange(() => {
       this.adjustFixedElementsOnScroll();
@@ -3623,7 +3907,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
     };
     this.itemDOMRefs[elementIndex] = domRef;
     this.updaters[elementIndex] = buildSubscriptionCallback();
-    const item = /* @__PURE__ */ React8.createElement(
+    const item = /* @__PURE__ */ React9.createElement(
       AvoidReactDiff,
       {
         key: elementIndex,
@@ -3634,6 +3918,68 @@ var ReactHeadlessTableRenderer = class extends Logger {
     this.items[elementIndex] = item;
     return item;
   }
+  renderDetailElement(elementIndex) {
+    const domRef = (node) => {
+      if (node) {
+        this.detailRowDOMElements[elementIndex] = node;
+        node.style.position = "absolute";
+        node.style.left = "0px";
+        this.updateDetailElementPosition(elementIndex);
+      }
+    };
+    this.detailRowDOMRefs[elementIndex] = domRef;
+    this.detailRowUpdaters[elementIndex] = buildSubscriptionCallback();
+    const detailItem = /* @__PURE__ */ React9.createElement(
+      AvoidReactDiff,
+      {
+        key: `detail-${elementIndex}`,
+        name: `detail-${elementIndex}`,
+        updater: this.detailRowUpdaters[elementIndex]
+      }
+    );
+    this.detailItems[elementIndex] = detailItem;
+    return detailItem;
+  }
+  renderDetailRowAtElement(rowIndex, detailElementIndex, renderDetailRow) {
+    if (this.destroyed) {
+      return;
+    }
+    const covered = false;
+    const height = this.brain.getRowHeight(rowIndex);
+    const rowFixed = this.brain.isRowFixedStart(rowIndex) ? "start" : this.brain.isRowFixedEnd(rowIndex) ? "end" : false;
+    const hidden = !!covered;
+    const renderedDetailNode = renderDetailRow({
+      rowIndex,
+      height,
+      rowFixed,
+      hidden,
+      onMouseEnter: () => {
+      },
+      onMouseLeave: () => {
+      },
+      domRef: this.detailRowDOMRefs[detailElementIndex]
+    });
+    const itemUpdater = this.detailRowUpdaters[detailElementIndex];
+    if (!itemUpdater) {
+      this.error(
+        `Cannot find detail item updater for item ${rowIndex} at this time... sorry.`
+      );
+      return;
+    }
+    this.mappedDetailRows.renderRowAtElement(
+      rowIndex,
+      detailElementIndex,
+      renderedDetailNode
+    );
+    if (false) {
+      this.debug(
+        `Render detail row ${rowIndex} at element ${detailElementIndex}`
+      );
+    }
+    itemUpdater(renderedDetailNode);
+    this.updateDetailElementPosition(detailElementIndex);
+    return;
+  }
   renderCellAtElement(rowIndex, colIndex, elementIndex, renderCell) {
     if (this.destroyed) {
       return;
@@ -3694,6 +4040,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
     this.updaters = [];
     this.items = [];
     this.mappedCells.reset();
+    this.mappedDetailRows.reset();
   }
 };
 
@@ -3711,7 +4058,7 @@ function createRenderer(brain) {
   };
 }
 function RawTableFn(props) {
-  const { brain, renderCell } = props;
+  const { brain, renderCell, renderDetailRow } = props;
   const { renderer, onRenderUpdater } = useMemo2(() => {
     return props.onRenderUpdater && props.renderer ? {
       renderer: props.renderer,
@@ -3726,9 +4073,10 @@ function RawTableFn(props) {
     renderer.renderRange(renderRange, {
       onRender: onRenderUpdater,
       force: true,
-      renderCell
+      renderCell,
+      renderDetailRow
     });
-  }, [renderer, brain, renderCell, onRenderUpdater]);
+  }, [renderer, brain, renderCell, renderDetailRow, onRenderUpdater]);
   useEffect4(() => {
     const remove = brain.onRenderRangeChange((renderRange) => {
       renderer.renderRange(renderRange, {
@@ -3741,17 +4089,18 @@ function RawTableFn(props) {
           }
           onRenderUpdater(items);
         },
-        renderCell
+        renderCell,
+        renderDetailRow
       });
     });
     return remove;
-  }, [renderCell]);
-  return /* @__PURE__ */ React9.createElement(AvoidReactDiff, { updater: onRenderUpdater });
+  }, [renderCell, renderDetailRow]);
+  return /* @__PURE__ */ React10.createElement(AvoidReactDiff, { updater: onRenderUpdater });
 }
-var RawTable = React9.memo(RawTableFn);
+var RawTable = React10.memo(RawTableFn);
 
 // src/components/InfiniteTable/components/ActiveRowIndicator.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 import { useEffect as useEffect5, useLayoutEffect as useLayoutEffect4, useRef as useRef5 } from "react";
 
 // src/components/hooks/useRerender.ts
@@ -3767,11 +4116,11 @@ var useRerender = () => {
 };
 
 // src/components/InfiniteTable/components/ActiveCellIndicator.css.ts
-var ActiveCellIndicatorCls = { visible: "ActiveCellIndicator_ActiveCellIndicatorCls_visible__nxbq1c2 ActiveCellIndicator_ActiveCellIndicator__nxbq1c1 utilities_pointerEvents_none__16lm1iwk utilities_position_sticky__16lm1iw4 utilities_left_0__16lm1iw1d utilities_top_0__16lm1iw1b", hidden: "ActiveCellIndicator_ActiveCellIndicatorCls_hidden__nxbq1c3 ActiveCellIndicator_ActiveCellIndicator__nxbq1c1 utilities_pointerEvents_none__16lm1iwk utilities_position_sticky__16lm1iw4 utilities_left_0__16lm1iw1d utilities_top_0__16lm1iw1b" };
-var ActiveIndicatorWrapperCls = "utilities_pointerEvents_none__16lm1iwk utilities_position_sticky__16lm1iw4 utilities_left_0__16lm1iw1d utilities_top_0__16lm1iw1b utilities_height_0__16lm1iw17 utilities_zIndex_1000000__16lm1iwt";
+var ActiveCellIndicatorCls = { visible: "ActiveCellIndicator_ActiveCellIndicatorCls_visible__nxbq1c2 ActiveCellIndicator_ActiveCellIndicator__nxbq1c1 utilities_pointerEvents_none__16lm1iwl utilities_position_sticky__16lm1iw4 utilities_left_0__16lm1iw1e utilities_top_0__16lm1iw1c", hidden: "ActiveCellIndicator_ActiveCellIndicatorCls_hidden__nxbq1c3 ActiveCellIndicator_ActiveCellIndicator__nxbq1c1 utilities_pointerEvents_none__16lm1iwl utilities_position_sticky__16lm1iw4 utilities_left_0__16lm1iw1e utilities_top_0__16lm1iw1c" };
+var ActiveIndicatorWrapperCls = "utilities_pointerEvents_none__16lm1iwl utilities_position_sticky__16lm1iw4 utilities_left_0__16lm1iw1e utilities_top_0__16lm1iw1c utilities_height_0__16lm1iw18 utilities_zIndex_1000000__16lm1iwu";
 
 // src/components/InfiniteTable/components/ActiveRowIndicator.css.ts
-var ActiveRowIndicatorCls = { visible: "ActiveRowIndicator_ActiveRowIndicatorCls_visible__j26lrx1 ActiveRowIndicator_ActiveRowIndicator__j26lrx0 utilities_pointerEvents_none__16lm1iwk utilities_position_sticky__16lm1iw4 utilities_width_100%__16lm1iw1a utilities_top_0__16lm1iw1b utilities_left_0__16lm1iw1d", hidden: "ActiveRowIndicator_ActiveRowIndicatorCls_hidden__j26lrx2 ActiveRowIndicator_ActiveRowIndicator__j26lrx0 utilities_pointerEvents_none__16lm1iwk utilities_position_sticky__16lm1iw4 utilities_width_100%__16lm1iw1a utilities_top_0__16lm1iw1b utilities_left_0__16lm1iw1d" };
+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" };
 
 // src/components/InfiniteTable/components/ActiveRowIndicator.tsx
 var { rootClassName: rootClassName3 } = internalProps;
@@ -3817,7 +4166,7 @@ var ActiveRowIndicatorFn = (props) => {
   }, [brain]);
   return (
     // #correct-scroll-size this wrapper is here in order to make the indicator not take up space in the scroll container - to reproduce: remove this and click on a row, you will see that if you scroll at the bottom, there is extra space
-    /* @__PURE__ */ React10.createElement("div", { className: ActiveIndicatorWrapperCls, "data-name": "active-row" }, /* @__PURE__ */ React10.createElement(
+    /* @__PURE__ */ React11.createElement("div", { className: ActiveIndicatorWrapperCls, "data-name": "active-row" }, /* @__PURE__ */ React11.createElement(
       "div",
       {
         ref: domRef,
@@ -3828,12 +4177,12 @@ var ActiveRowIndicatorFn = (props) => {
     ))
   );
 };
-var ActiveRowIndicator = React10.memo(
+var ActiveRowIndicator = React11.memo(
   ActiveRowIndicatorFn
 );
 
 // src/components/InfiniteTable/components/ActiveCellIndicator.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 import { useEffect as useEffect6, useLayoutEffect as useLayoutEffect5, useRef as useRef6 } from "react";
 var { rootClassName: rootClassName4 } = internalProps;
 var baseCls2 = `${rootClassName4}-ActiveCellIndicator`;
@@ -3845,27 +4194,30 @@ var ActiveStyle2 = {
   width: InternalVars.activeCellColWidth,
   height: InternalVars.activeCellRowHeight
 };
+var reposition = (brain, activeCellIndex, rowHeight, domRef) => {
+  if (activeCellIndex == null) {
+    return;
+  }
+  const rowIndex = activeCellIndex[0];
+  const activeCellRowHeight = typeof rowHeight === "function" ? rowHeight(rowIndex) : rowHeight != null ? rowHeight : brain.getRowHeight(rowIndex);
+  const activeCellRowOffset = brain.getItemOffsetFor(rowIndex, "vertical");
+  const node = domRef.current;
+  setInfiniteVarsOnNode(
+    {
+      activeCellRowHeight: `${activeCellRowHeight}px`,
+      activeCellRowOffset: `${activeCellRowOffset}px`
+    },
+    node
+  );
+};
 var ActiveCellIndicatorFn = (props) => {
   const { brain } = props;
   const [_rerenderId, rerender] = useRerender();
   const domRef = useRef6(null);
   const active = props.activeCellIndex != null && brain.getRowCount() > props.activeCellIndex[0];
   useLayoutEffect5(() => {
-    if (props.activeCellIndex == null) {
-      return;
-    }
-    const rowIndex = props.activeCellIndex[0];
-    const activeCellRowHeight = brain.getRowHeight(rowIndex);
-    const activeCellRowOffset = brain.getItemOffsetFor(rowIndex, "vertical");
-    const node = domRef.current;
-    setInfiniteVarsOnNode(
-      {
-        activeCellRowHeight: `${activeCellRowHeight}px`,
-        activeCellRowOffset: `${activeCellRowOffset}px`
-      },
-      node
-    );
-  }, [props.activeCellIndex]);
+    reposition(brain, props.activeCellIndex, props.rowHeight, domRef);
+  }, [props.activeCellIndex, props.rowHeight]);
   useEffect6(() => {
     const removeOnRenderCountChange = brain.onRenderCountChange(() => {
       rerender();
@@ -3876,7 +4228,7 @@ var ActiveCellIndicatorFn = (props) => {
   }, [brain]);
   return (
     // #correct-scroll-size this wrapper is here in order to make the indicator not take up space in the scroll container - to reproduce: remove this and click on a row, you will see that if you scroll at the bottom, there is extra space
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React12.createElement(
       "div",
       {
         className: ActiveIndicatorWrapperCls,
@@ -3885,7 +4237,7 @@ var ActiveCellIndicatorFn = (props) => {
           zIndex: `var(${columnZIndexAtIndex2}-${props.activeCellIndex[1]})`
         } : void 0
       },
-      /* @__PURE__ */ React11.createElement(
+      /* @__PURE__ */ React12.createElement(
         "div",
         {
           ref: domRef,
@@ -3897,7 +4249,7 @@ var ActiveCellIndicatorFn = (props) => {
     )
   );
 };
-var ActiveCellIndicator = React11.memo(
+var ActiveCellIndicator = React12.memo(
   ActiveCellIndicatorFn
 );
 
@@ -3928,6 +4280,8 @@ function HeadlessTable(props) {
     scrollerDOMRef,
     scrollStopDelay,
     renderCell,
+    renderDetailRow,
+    activeCellRowHeight,
     cellHoverClassNames,
     renderer,
     activeRowIndex,
@@ -3938,6 +4292,8 @@ function HeadlessTable(props) {
     "scrollerDOMRef",
     "scrollStopDelay",
     "renderCell",
+    "renderDetailRow",
+    "activeCellRowHeight",
     "cellHoverClassNames",
     "renderer",
     "activeRowIndex",
@@ -3985,34 +4341,42 @@ function HeadlessTable(props) {
     setTotalScrollSize(brain.getTotalSize());
     return removeOnRenderCount;
   }, [brain]);
-  return /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement(
     VirtualScrollContainer,
     __spreadProps(__spreadValues({
       onContainerScroll
     }, domProps), {
       ref: scrollerDOMRef
     }),
-    /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React13.createElement(
       "div",
       {
         ref: domRef,
         className: scrollTransformTargetCls,
         "data-name": "scroll-transform-target"
       },
-      /* @__PURE__ */ React12.createElement(
+      /* @__PURE__ */ React13.createElement(
         RawTable,
         {
           renderer,
           onRenderUpdater,
           renderCell,
+          renderDetailRow,
           brain,
           cellHoverClassNames
         }
       ),
-      /* @__PURE__ */ React12.createElement(ActiveCellIndicator, { brain, activeCellIndex })
+      /* @__PURE__ */ React13.createElement(
+        ActiveCellIndicator,
+        {
+          brain,
+          rowHeight: activeCellRowHeight,
+          activeCellIndex
+        }
+      )
     ),
-    /* @__PURE__ */ React12.createElement(ActiveRowIndicator, { brain, activeRowIndex }),
-    /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React13.createElement(ActiveRowIndicator, { brain, activeRowIndex }),
+    /* @__PURE__ */ React13.createElement(
       SpacePlaceholder,
       {
         width: scrollSize.width,
@@ -4023,10 +4387,10 @@ function HeadlessTable(props) {
 }
 
 // src/components/hooks/useComponentState/index.tsx
-import * as React13 from "react";
+import * as React14 from "react";
 import {
   useReducer,
-  createContext as createContext2,
+  createContext as createContext3,
   useMemo as useMemo3,
   useEffect as useEffect9,
   useState as useState4,
@@ -4136,7 +4500,7 @@ function getComponentStateContext() {
   if (ComponentContext) {
     return ComponentContext;
   }
-  return ComponentContext = createContext2(null);
+  return ComponentContext = createContext3(null);
 }
 function getReducerGeneratedActions(dispatch, getState, getProps, propsToForward, allowedControlledPropOverrides, interceptedActions, mappedCallbacks) {
   const state = getState();
@@ -4201,10 +4565,10 @@ function forwardProps(propsToForward, props, setupState) {
   return mappedState;
 }
 function getComponentStateRoot(config) {
-  return React13.memo(function ComponentStateRoot(props) {
+  return React14.memo(function ComponentStateRoot(props) {
     var _a, _b;
     const [initialSetupState] = useState4(() => {
-      return config.initSetupState ? config.initSetupState() : {};
+      return config.initSetupState ? config.initSetupState(props) : {};
     });
     const propsToStateSetRef = useRef11(/* @__PURE__ */ new Set());
     const propsToForward = useMemo3(
@@ -4281,6 +4645,9 @@ function getComponentStateRoot(config) {
         ]);
         Object.assign(newState, stateFromProps);
       }
+      if (action.type === "ASSIGN_STATE") {
+        Object.assign(newState, action.payload);
+      }
       const result = config.concludeReducer ? config.concludeReducer({
         previousState,
         state: newState,
@@ -4316,7 +4683,19 @@ function getComponentStateRoot(config) {
       () => ({
         componentState: state,
         componentActions: actions,
-        getComponentState
+        getComponentState,
+        replaceState: (newState) => {
+          dispatch({
+            type: "REPLACE_STATE",
+            payload: newState
+          });
+        },
+        assignState: (newState) => {
+          dispatch({
+            type: "ASSIGN_STATE",
+            payload: newState
+          });
+        }
       }),
       [state, actions, getComponentState]
     );
@@ -4401,16 +4780,16 @@ function getComponentStateRoot(config) {
         (_a2 = config.cleanup) == null ? void 0 : _a2.call(config, getComponentState());
       };
     });
-    return /* @__PURE__ */ React13.createElement(Context.Provider, { value: contextValue }, props.children);
+    return /* @__PURE__ */ React14.createElement(Context.Provider, { value: contextValue }, props.children);
   });
 }
 function useComponentState() {
   const Context = getComponentStateContext();
-  return React13.useContext(Context);
+  return React14.useContext(Context);
 }
 
 // src/components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBody.tsx
-import * as React14 from "react";
+import * as React15 from "react";
 
 // src/components/InfiniteTable/hooks/useInternalProps.ts
 var useInternalProps = () => {
@@ -4418,33 +4797,33 @@ var useInternalProps = () => {
 };
 
 // src/components/InfiniteTable/utilities.css.ts
-var absoluteCover = "utilities_position_absolute__16lm1iw2 utilities_top_0__16lm1iw1b utilities_left_0__16lm1iw1d utilities_right_0__16lm1iw1i utilities_bottom_0__16lm1iw1g";
-var alignItems = { center: "utilities_alignItems_center__16lm1iw1p", stretch: "utilities_alignItems_stretch__16lm1iw1q" };
-var cssEllipsisClassName = "utilities_whiteSpace_nowrap__16lm1iw22 utilities_textOverflow_ellipsis__16lm1iw23 utilities_overflow_hidden__16lm1iw1w";
-var cursor = { pointer: "utilities_cursor_pointer__16lm1iwh", "default": "utilities_cursor_default__16lm1iwi", colResize: "utilities_cursor_colResize__16lm1iwj" };
-var display = { flex: "utilities_display_flex__16lm1iwy", contents: "utilities_display_contents__16lm1iwz", none: "utilities_display_none__16lm1iw10", block: "utilities_display_block__16lm1iw11", grid: "utilities_display_grid__16lm1iw12", inlineBlock: "utilities_display_inlineBlock__16lm1iw13", inlineFlex: "utilities_display_inlineFlex__16lm1iw14", inlineGrid: "utilities_display_inlineGrid__16lm1iw15" };
-var flex = { "1": "utilities_flex_1__16lm1iwl", none: "utilities_flex_none__16lm1iwm" };
-var flexFlow = { column: "utilities_flexFlow_column__16lm1iw1l", columnReverse: "utilities_flexFlow_columnReverse__16lm1iw1m", row: "utilities_flexFlow_row__16lm1iw1n", rowReverse: "utilities_flexFlow_rowReverse__16lm1iw1o" };
-var justifyContent = { center: "utilities_justifyContent_center__16lm1iw1r", spaceBetween: "utilities_justifyContent_spaceBetween__16lm1iw1s", spaceAround: "utilities_justifyContent_spaceAround__16lm1iw1t", start: "utilities_justifyContent_start__16lm1iw1u", end: "utilities_justifyContent_end__16lm1iw1v" };
-var left = { "0": "utilities_left_0__16lm1iw1d", "100%": "utilities_left_100%__16lm1iw1e", auto: "utilities_left_auto__16lm1iw1f" };
-var outline = { none: "utilities_outline_none__16lm1iwc" };
-var overflow = { hidden: "utilities_overflow_hidden__16lm1iw1w", auto: "utilities_overflow_auto__16lm1iw1x", visible: "utilities_overflow_visible__16lm1iw1y" };
+var absoluteCover = "utilities_position_absolute__16lm1iw2 utilities_top_0__16lm1iw1c utilities_left_0__16lm1iw1e utilities_right_0__16lm1iw1j utilities_bottom_0__16lm1iw1h";
+var alignItems = { center: "utilities_alignItems_center__16lm1iw1q", stretch: "utilities_alignItems_stretch__16lm1iw1r" };
+var cssEllipsisClassName = "utilities_whiteSpace_nowrap__16lm1iw23 utilities_textOverflow_ellipsis__16lm1iw24 utilities_overflow_hidden__16lm1iw1x";
+var cursor = { pointer: "utilities_cursor_pointer__16lm1iwi", "default": "utilities_cursor_default__16lm1iwj", colResize: "utilities_cursor_colResize__16lm1iwk" };
+var display = { flex: "utilities_display_flex__16lm1iwz", contents: "utilities_display_contents__16lm1iw10", none: "utilities_display_none__16lm1iw11", block: "utilities_display_block__16lm1iw12", grid: "utilities_display_grid__16lm1iw13", inlineBlock: "utilities_display_inlineBlock__16lm1iw14", inlineFlex: "utilities_display_inlineFlex__16lm1iw15", inlineGrid: "utilities_display_inlineGrid__16lm1iw16" };
+var flex = { "1": "utilities_flex_1__16lm1iwm", none: "utilities_flex_none__16lm1iwn" };
+var flexFlow = { column: "utilities_flexFlow_column__16lm1iw1m", columnReverse: "utilities_flexFlow_columnReverse__16lm1iw1n", row: "utilities_flexFlow_row__16lm1iw1o", rowReverse: "utilities_flexFlow_rowReverse__16lm1iw1p" };
+var justifyContent = { center: "utilities_justifyContent_center__16lm1iw1s", spaceBetween: "utilities_justifyContent_spaceBetween__16lm1iw1t", spaceAround: "utilities_justifyContent_spaceAround__16lm1iw1u", start: "utilities_justifyContent_start__16lm1iw1v", end: "utilities_justifyContent_end__16lm1iw1w" };
+var left = { "0": "utilities_left_0__16lm1iw1e", "100%": "utilities_left_100%__16lm1iw1f", auto: "utilities_left_auto__16lm1iw1g" };
+var outline = { none: "utilities_outline_none__16lm1iwd" };
+var overflow = { hidden: "utilities_overflow_hidden__16lm1iw1x", auto: "utilities_overflow_auto__16lm1iw1y", visible: "utilities_overflow_visible__16lm1iw1z" };
 var position = { relative: "utilities_position_relative__16lm1iw1", absolute: "utilities_position_absolute__16lm1iw2", "static": "utilities_position_static__16lm1iw3", sticky: "utilities_position_sticky__16lm1iw4", fixed: "utilities_position_fixed__16lm1iw5" };
-var top = { "0": "utilities_top_0__16lm1iw1b", "100%": "utilities_top_100%__16lm1iw1c" };
-var transformTranslateZero = "utilities_transformTranslateZero__16lm1iwd";
-var userSelect = { none: "utilities_userSelect_none__16lm1iw16" };
-var zIndex = { "1": "utilities_zIndex_1__16lm1iwn", "10": "utilities_zIndex_10__16lm1iwo", "100": "utilities_zIndex_100__16lm1iwp", "1000": "utilities_zIndex_1000__16lm1iwq", "10000": "utilities_zIndex_10000__16lm1iwr", "100000": "utilities_zIndex_100000__16lm1iws", "1000000": "utilities_zIndex_1000000__16lm1iwt", "10000000": "utilities_zIndex_10000000__16lm1iwu", "1k": "utilities_zIndex_1k__16lm1iwv", "10k": "utilities_zIndex_10k__16lm1iww", "100k": "utilities_zIndex_100k__16lm1iwx" };
+var top = { "0": "utilities_top_0__16lm1iw1c", "100%": "utilities_top_100%__16lm1iw1d" };
+var transformTranslateZero = "utilities_transformTranslateZero__16lm1iwe";
+var userSelect = { none: "utilities_userSelect_none__16lm1iw17" };
+var zIndex = { "1": "utilities_zIndex_1__16lm1iwo", "10": "utilities_zIndex_10__16lm1iwp", "100": "utilities_zIndex_100__16lm1iwq", "1000": "utilities_zIndex_1000__16lm1iwr", "10000": "utilities_zIndex_10000__16lm1iws", "100000": "utilities_zIndex_100000__16lm1iwt", "1000000": "utilities_zIndex_1000000__16lm1iwu", "10000000": "utilities_zIndex_10000000__16lm1iwv", "1k": "utilities_zIndex_1k__16lm1iww", "10k": "utilities_zIndex_10k__16lm1iwx", "100k": "utilities_zIndex_100k__16lm1iwy" };
 
 // src/components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBody.tsx
-var InfiniteTableBody = React14.forwardRef(function InfiniteTableBody2(props, ref) {
-  const { rootClassName: rootClassName12 } = useInternalProps();
-  return /* @__PURE__ */ React14.createElement(
+var InfiniteTableBody = React15.forwardRef(function InfiniteTableBody2(props, ref) {
+  const { rootClassName: rootClassName13 } = useInternalProps();
+  return /* @__PURE__ */ React15.createElement(
     "div",
     __spreadProps(__spreadValues({
       ref
     }, props), {
       className: join(
-        `${rootClassName12}Body`,
+        `${rootClassName13}Body`,
         position.relative,
         flex["1"],
         transformTranslateZero,
@@ -4455,17 +4834,17 @@ var InfiniteTableBody = React14.forwardRef(function InfiniteTableBody2(props, re
 });
 
 // src/components/InfiniteTable/components/InfiniteTableFooter/InfiniteTableFooter.tsx
-import * as React15 from "react";
-var InfiniteTableFooter = React15.forwardRef(
+import * as React16 from "react";
+var InfiniteTableFooter = React16.forwardRef(
   function InfiniteTableFooter2(props, ref) {
-    const { rootClassName: rootClassName12 } = useInternalProps();
-    return /* @__PURE__ */ React15.createElement(
+    const { rootClassName: rootClassName13 } = useInternalProps();
+    return /* @__PURE__ */ React16.createElement(
       "div",
       __spreadProps(__spreadValues({
         ref
       }, props), {
         className: join(
-          `${rootClassName12}Footer`,
+          `${rootClassName13}Footer`,
           position.relative,
           display.flex,
           flexFlow.row,
@@ -4477,7 +4856,7 @@ var InfiniteTableFooter = React15.forwardRef(
 );
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
-import * as React42 from "react";
+import * as React43 from "react";
 import { useCallback as useCallback14, useContext as useContext7, useEffect as useEffect15, useRef as useRef16 } from "react";
 import { createPortal } from "react-dom";
 
@@ -4491,7 +4870,7 @@ function keyMirror(obj) {
 }
 
 // src/components/InfiniteTable/components/icons/Icon.tsx
-import * as React16 from "react";
+import * as React17 from "react";
 var Icon = (props) => {
   var _a;
   const size = (_a = props.size) != null ? _a : `var(--infinite-icon-size)`;
@@ -4503,82 +4882,82 @@ var Icon = (props) => {
   }, props.style);
   return (
     //@ts-ignore
-    /* @__PURE__ */ React16.createElement("svg", __spreadProps(__spreadValues({ viewBox: "0 0 24 24" }, props), { style: style2 }), props.children)
+    /* @__PURE__ */ React17.createElement("svg", __spreadProps(__spreadValues({ viewBox: "0 0 24 24" }, props), { style: style2 }), props.children)
   );
 };
 
 // src/components/InfiniteTable/components/icons/IncludesOperatorIcon.tsx
-import * as React17 from "react";
+import * as React18 from "react";
 var IncludesOperatorIcon = (props) => {
-  return /* @__PURE__ */ React17.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React17.createElement("path", { d: "M5,4V7H10.5V19H13.5V7H19V4H5Z" }));
+  return /* @__PURE__ */ React18.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React18.createElement("path", { d: "M5,4V7H10.5V19H13.5V7H19V4H5Z" }));
 };
 
 // src/components/InfiniteTable/components/icons/EndsWithOperatorIcon.tsx
-import * as React18 from "react";
+import * as React19 from "react";
 var EndsWithOperatorIcon = (props) => {
-  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" }));
+  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" }));
 };
 
 // src/components/InfiniteTable/components/icons/EqualOperatorIcon.tsx
-import * as React19 from "react";
+import * as React20 from "react";
 var EqualOperatorIcon = (props) => {
-  return /* @__PURE__ */ React19.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React19.createElement("path", { d: "M19,10H5V8H19V10M19,16H5V14H19V16Z" }));
+  return /* @__PURE__ */ React20.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React20.createElement("path", { d: "M19,10H5V8H19V10M19,16H5V14H19V16Z" }));
 };
 
 // src/components/InfiniteTable/components/icons/GTEOperatorIcon.tsx
-import * as React20 from "react";
+import * as React21 from "react";
 var GTEOperatorIcon = (props) => {
-  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" }));
+  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" }));
 };
 
 // src/components/InfiniteTable/components/icons/GTOperatorIcon.tsx
-import * as React21 from "react";
+import * as React22 from "react";
 var GTOperatorIcon = (props) => {
-  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" }));
+  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" }));
 };
 
 // src/components/InfiniteTable/components/icons/LTEOperatorIcon.tsx
-import * as React22 from "react";
+import * as React23 from "react";
 var LTEOperatorIcon = (props) => {
-  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" }));
+  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" }));
 };
 
 // src/components/InfiniteTable/components/icons/LTOperatorIcon.tsx
-import * as React23 from "react";
+import * as React24 from "react";
 var LTOperatorIcon = (props) => {
-  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" }));
+  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" }));
 };
 
 // src/components/InfiniteTable/components/icons/NotEqualOperatorIcon.tsx
-import * as React24 from "react";
+import * as React25 from "react";
 var NotEqualOperatorIcon = (props) => {
-  return /* @__PURE__ */ React24.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React24.createElement("path", { d: "M21,10H9V8H21V10M21,16H9V14H21V16M4,5H6V16H4V5M6,18V20H4V18H6Z" }));
+  return /* @__PURE__ */ React25.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React25.createElement("path", { d: "M21,10H9V8H21V10M21,16H9V14H21V16M4,5H6V16H4V5M6,18V20H4V18H6Z" }));
 };
 
 // src/components/InfiniteTable/components/icons/StartsWithOperatorIcon.tsx
-import * as React25 from "react";
+import * as React26 from "react";
 var StartsWithOperatorIcon = (props) => {
-  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" }));
+  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" }));
 };
 
 // src/components/InfiniteTable/components/FilterEditors.tsx
-import * as React29 from "react";
+import * as React30 from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableColumnHeaderFilter.tsx
-import * as React28 from "react";
+import * as React29 from "react";
 import { useEffect as useEffect11, useState as useState6 } from "react";
 
 // src/components/InfiniteTable/hooks/useInfiniteTable.ts
 import { useContext as useContext3 } from "react";
 
 // src/components/InfiniteTable/InfiniteTableContext.ts
-import { createContext as createContext3 } from "react";
+import { createContext as createContext4 } from "react";
 var TableContext;
 function getInfiniteTableContext() {
   if (TableContext) {
     return TableContext;
   }
-  return TableContext = createContext3(
+  return TableContext = createContext4(
     null
   );
 }
@@ -4598,7 +4977,7 @@ var useInfiniteTableState = () => {
 };
 
 // src/components/InfiniteTable/components/icons/FilterIcon.tsx
-import * as React26 from "react";
+import * as React27 from "react";
 import { useEffect as useEffect10, useLayoutEffect as useLayoutEffect8, useState as useState5 } from "react";
 
 // ../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-f8e161c6.esm.js
@@ -4710,29 +5089,29 @@ var createRuntimeFn = (config) => {
 };
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts
-var CellCls = "cell_CellCls__1eexc2a5 utilities_display_flex__16lm1iwy utilities_flexFlow_row__16lm1iw1n utilities_alignItems_center__16lm1iw1p utilities_position_absolute__16lm1iw2 utilities_willChange_transform__16lm1iw21 utilities_whiteSpace_nowrap__16lm1iw22 utilities_userSelect_none__16lm1iw16";
-var HeaderCellContentRecipe = createRuntimeFn({ defaultClassName: "header_HeaderCellContentRecipe__12zfob11y utilities_height_100%__16lm1iw18 utilities_width_100%__16lm1iw1a utilities_display_flex__16lm1iwy utilities_flexFlow_row__16lm1iw1n utilities_alignItems_center__16lm1iw1p utilities_justifyContent_start__16lm1iw1u", variantClassNames: { filtered: { false: "header_HeaderCellContentRecipe_filtered_false__12zfob11z", true: "header_HeaderCellContentRecipe_filtered_true__12zfob120" }, verticalAlign: { start: "header_HeaderCellContentRecipe_verticalAlign_start__12zfob121", end: "header_HeaderCellContentRecipe_verticalAlign_end__12zfob122", center: "header_HeaderCellContentRecipe_verticalAlign_center__12zfob123" }, align: { start: "header_HeaderCellContentRecipe_align_start__12zfob124", end: "header_HeaderCellContentRecipe_align_end__12zfob125", center: "header_HeaderCellContentRecipe_align_center__12zfob126" } }, defaultVariants: {}, compoundVariants: [] });
-var HeaderCellProxy = "header_HeaderCellProxy__12zfob1n utilities_whiteSpace_nowrap__16lm1iw22 utilities_textOverflow_ellipsis__16lm1iw23 utilities_overflow_hidden__16lm1iw1w";
-var HeaderCellRecipe = createRuntimeFn({ defaultClassName: "header_HeaderCellRecipe__12zfob1o utilities_display_block__16lm1iw11", variantClassNames: { rowActive: { false: "header_HeaderCellRecipe_rowActive_false__12zfob1p", true: "header_HeaderCellRecipe_rowActive_true__12zfob1q" }, cellSelected: { false: "header_HeaderCellRecipe_cellSelected_false__12zfob1r", true: "header_HeaderCellRecipe_cellSelected_true__12zfob1s" }, rowSelected: { false: "header_HeaderCellRecipe_rowSelected_false__12zfob1t", true: "header_HeaderCellRecipe_rowSelected_true__12zfob1u", null: "header_HeaderCellRecipe_rowSelected_null__12zfob1v" }, groupRow: { false: "header_HeaderCellRecipe_groupRow_false__12zfob1w", true: "header_HeaderCellRecipe_groupRow_true__12zfob1x" }, groupCell: { false: "header_HeaderCellRecipe_groupCell_false__12zfob1y", true: "header_HeaderCellRecipe_groupCell_true__12zfob1z" }, align: { start: "header_HeaderCellRecipe_align_start__12zfob110", end: "header_HeaderCellRecipe_align_end__12zfob111", center: "header_HeaderCellRecipe_align_center__12zfob112" }, verticalAlign: { start: "header_HeaderCellRecipe_verticalAlign_start__12zfob113", end: "header_HeaderCellRecipe_verticalAlign_end__12zfob114", center: "header_HeaderCellRecipe_verticalAlign_center__12zfob115" }, zebra: { false: "header_HeaderCellRecipe_zebra_false__12zfob116", even: "header_HeaderCellRecipe_zebra_even__12zfob117", odd: "header_HeaderCellRecipe_zebra_odd__12zfob118" }, dragging: { true: "header_HeaderCellRecipe_dragging_true__12zfob119", false: "header_HeaderCellRecipe_dragging_false__12zfob11a" }, first: { true: "header_HeaderCellRecipe_first_true__12zfob11b", false: "header_HeaderCellRecipe_first_false__12zfob11c" }, last: { true: "header_HeaderCellRecipe_last_true__12zfob11d", false: "header_HeaderCellRecipe_last_false__12zfob11e" }, groupByField: { true: "header_HeaderCellRecipe_groupByField_true__12zfob11f", false: "header_HeaderCellRecipe_groupByField_false__12zfob11g" }, firstInCategory: { true: "header_HeaderCellRecipe_firstInCategory_true__12zfob11h", false: "header_HeaderCellRecipe_firstInCategory_false__12zfob11i" }, lastInCategory: { true: "header_HeaderCellRecipe_lastInCategory_true__12zfob11j", false: "header_HeaderCellRecipe_lastInCategory_false__12zfob11k" }, pinned: { start: "header_HeaderCellRecipe_pinned_start__12zfob11l", end: "header_HeaderCellRecipe_pinned_end__12zfob11m", false: "header_HeaderCellRecipe_pinned_false__12zfob11n" }, filtered: { true: "header_HeaderCellRecipe_filtered_true__12zfob11o", false: "header_HeaderCellRecipe_filtered_false__12zfob11p" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "header_HeaderCellRecipe_compound_0__12zfob11q"], [{ pinned: "end", firstInCategory: true }, "header_HeaderCellRecipe_compound_1__12zfob11r"], [{ pinned: false, lastInCategory: true }, "header_HeaderCellRecipe_compound_2__12zfob11s"]] });
-var HeaderClsRecipe = createRuntimeFn({ defaultClassName: "header_HeaderClsRecipe__12zfob19 utilities_display_block__16lm1iw11 utilities_position_absolute__16lm1iw2", variantClassNames: { pinned: { start: "header_HeaderClsRecipe_pinned_start__12zfob1a", end: "header_HeaderClsRecipe_pinned_end__12zfob1b", false: "header_HeaderClsRecipe_pinned_false__12zfob1c" }, firstInCategory: { true: "header_HeaderClsRecipe_firstInCategory_true__12zfob1d", false: "header_HeaderClsRecipe_firstInCategory_false__12zfob1e" }, lastInCategory: { true: "header_HeaderClsRecipe_lastInCategory_true__12zfob1f", false: "header_HeaderClsRecipe_lastInCategory_false__12zfob1g" }, overflow: { true: "header_HeaderClsRecipe_overflow_true__12zfob1h", false: "header_HeaderClsRecipe_overflow_false__12zfob1i" } }, defaultVariants: {}, compoundVariants: [[{ overflow: true, pinned: "start" }, "header_HeaderClsRecipe_compound_0__12zfob1j"], [{ pinned: "start", firstInCategory: true }, "header_HeaderClsRecipe_compound_1__12zfob1k"], [{ overflow: true, pinned: "end" }, "header_HeaderClsRecipe_compound_2__12zfob1l"], [{ pinned: "end", lastInCategory: true }, "header_HeaderClsRecipe_compound_3__12zfob1m"]] });
-var HeaderFilterEditorCls = "header_HeaderFilterEditorCls__12zfob12g utilities_width_100%__16lm1iw1a utilities_height_100%__16lm1iw18";
+var CellCls = "cell_CellCls__1eexc2a5 utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1o utilities_alignItems_center__16lm1iw1q utilities_position_absolute__16lm1iw2 utilities_willChange_transform__16lm1iw22 utilities_whiteSpace_nowrap__16lm1iw23 utilities_userSelect_none__16lm1iw17";
+var HeaderCellContentRecipe = createRuntimeFn({ defaultClassName: "header_HeaderCellContentRecipe__12zfob11y utilities_height_100%__16lm1iw19 utilities_width_100%__16lm1iw1b utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1o utilities_alignItems_center__16lm1iw1q utilities_justifyContent_start__16lm1iw1v", variantClassNames: { filtered: { false: "header_HeaderCellContentRecipe_filtered_false__12zfob11z", true: "header_HeaderCellContentRecipe_filtered_true__12zfob120" }, verticalAlign: { start: "header_HeaderCellContentRecipe_verticalAlign_start__12zfob121", end: "header_HeaderCellContentRecipe_verticalAlign_end__12zfob122", center: "header_HeaderCellContentRecipe_verticalAlign_center__12zfob123" }, align: { start: "header_HeaderCellContentRecipe_align_start__12zfob124", end: "header_HeaderCellContentRecipe_align_end__12zfob125", center: "header_HeaderCellContentRecipe_align_center__12zfob126" } }, defaultVariants: {}, compoundVariants: [] });
+var HeaderCellProxy = "header_HeaderCellProxy__12zfob1n utilities_whiteSpace_nowrap__16lm1iw23 utilities_textOverflow_ellipsis__16lm1iw24 utilities_overflow_hidden__16lm1iw1x";
+var HeaderCellRecipe = createRuntimeFn({ defaultClassName: "header_HeaderCellRecipe__12zfob1o utilities_display_block__16lm1iw12", variantClassNames: { rowActive: { false: "header_HeaderCellRecipe_rowActive_false__12zfob1p", true: "header_HeaderCellRecipe_rowActive_true__12zfob1q" }, cellSelected: { false: "header_HeaderCellRecipe_cellSelected_false__12zfob1r", true: "header_HeaderCellRecipe_cellSelected_true__12zfob1s" }, rowSelected: { false: "header_HeaderCellRecipe_rowSelected_false__12zfob1t", true: "header_HeaderCellRecipe_rowSelected_true__12zfob1u", null: "header_HeaderCellRecipe_rowSelected_null__12zfob1v" }, groupRow: { false: "header_HeaderCellRecipe_groupRow_false__12zfob1w", true: "header_HeaderCellRecipe_groupRow_true__12zfob1x" }, groupCell: { false: "header_HeaderCellRecipe_groupCell_false__12zfob1y", true: "header_HeaderCellRecipe_groupCell_true__12zfob1z" }, align: { start: "header_HeaderCellRecipe_align_start__12zfob110", end: "header_HeaderCellRecipe_align_end__12zfob111", center: "header_HeaderCellRecipe_align_center__12zfob112" }, verticalAlign: { start: "header_HeaderCellRecipe_verticalAlign_start__12zfob113", end: "header_HeaderCellRecipe_verticalAlign_end__12zfob114", center: "header_HeaderCellRecipe_verticalAlign_center__12zfob115" }, zebra: { false: "header_HeaderCellRecipe_zebra_false__12zfob116", even: "header_HeaderCellRecipe_zebra_even__12zfob117", odd: "header_HeaderCellRecipe_zebra_odd__12zfob118" }, dragging: { true: "header_HeaderCellRecipe_dragging_true__12zfob119", false: "header_HeaderCellRecipe_dragging_false__12zfob11a" }, first: { true: "header_HeaderCellRecipe_first_true__12zfob11b", false: "header_HeaderCellRecipe_first_false__12zfob11c" }, last: { true: "header_HeaderCellRecipe_last_true__12zfob11d", false: "header_HeaderCellRecipe_last_false__12zfob11e" }, groupByField: { true: "header_HeaderCellRecipe_groupByField_true__12zfob11f", false: "header_HeaderCellRecipe_groupByField_false__12zfob11g" }, firstInCategory: { true: "header_HeaderCellRecipe_firstInCategory_true__12zfob11h", false: "header_HeaderCellRecipe_firstInCategory_false__12zfob11i" }, lastInCategory: { true: "header_HeaderCellRecipe_lastInCategory_true__12zfob11j", false: "header_HeaderCellRecipe_lastInCategory_false__12zfob11k" }, pinned: { start: "header_HeaderCellRecipe_pinned_start__12zfob11l", end: "header_HeaderCellRecipe_pinned_end__12zfob11m", false: "header_HeaderCellRecipe_pinned_false__12zfob11n" }, filtered: { true: "header_HeaderCellRecipe_filtered_true__12zfob11o", false: "header_HeaderCellRecipe_filtered_false__12zfob11p" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "header_HeaderCellRecipe_compound_0__12zfob11q"], [{ pinned: "end", firstInCategory: true }, "header_HeaderCellRecipe_compound_1__12zfob11r"], [{ pinned: false, lastInCategory: true }, "header_HeaderCellRecipe_compound_2__12zfob11s"]] });
+var HeaderClsRecipe = createRuntimeFn({ defaultClassName: "header_HeaderClsRecipe__12zfob19 utilities_display_block__16lm1iw12 utilities_position_absolute__16lm1iw2", variantClassNames: { pinned: { start: "header_HeaderClsRecipe_pinned_start__12zfob1a", end: "header_HeaderClsRecipe_pinned_end__12zfob1b", false: "header_HeaderClsRecipe_pinned_false__12zfob1c" }, firstInCategory: { true: "header_HeaderClsRecipe_firstInCategory_true__12zfob1d", false: "header_HeaderClsRecipe_firstInCategory_false__12zfob1e" }, lastInCategory: { true: "header_HeaderClsRecipe_lastInCategory_true__12zfob1f", false: "header_HeaderClsRecipe_lastInCategory_false__12zfob1g" }, overflow: { true: "header_HeaderClsRecipe_overflow_true__12zfob1h", false: "header_HeaderClsRecipe_overflow_false__12zfob1i" } }, defaultVariants: {}, compoundVariants: [[{ overflow: true, pinned: "start" }, "header_HeaderClsRecipe_compound_0__12zfob1j"], [{ pinned: "start", firstInCategory: true }, "header_HeaderClsRecipe_compound_1__12zfob1k"], [{ overflow: true, pinned: "end" }, "header_HeaderClsRecipe_compound_2__12zfob1l"], [{ pinned: "end", lastInCategory: true }, "header_HeaderClsRecipe_compound_3__12zfob1m"]] });
+var HeaderFilterEditorCls = "header_HeaderFilterEditorCls__12zfob12g utilities_width_100%__16lm1iw1b utilities_height_100%__16lm1iw19";
 var HeaderFilterIconIndexCls = "header_HeaderFilterIconIndexCls__12zfob17";
-var HeaderFilterOperatorCls = "header_HeaderFilterOperatorCls__12zfob12c utilities_display_flex__16lm1iwy utilities_flexFlow_row__16lm1iw1n utilities_alignItems_center__16lm1iw1p utilities_position_relative__16lm1iw1";
-var HeaderFilterOperatorIconRecipe = createRuntimeFn({ defaultClassName: "header_HeaderFilterOperatorIconRecipe__12zfob12d utilities_position_relative__16lm1iw1 utilities_top_0__16lm1iw1b", variantClassNames: { disabled: { true: "header_HeaderFilterOperatorIconRecipe_disabled_true__12zfob12e", false: "header_HeaderFilterOperatorIconRecipe_disabled_false__12zfob12f" } }, defaultVariants: {}, compoundVariants: [] });
-var HeaderFilterRecipe = createRuntimeFn({ defaultClassName: "header_HeaderFilterRecipe__12zfob129 utilities_display_flex__16lm1iwy utilities_flexFlow_row__16lm1iw1n utilities_alignItems_stretch__16lm1iw1q utilities_position_relative__16lm1iw1", variantClassNames: { active: { true: "header_HeaderFilterRecipe_active_true__12zfob12a", false: "header_HeaderFilterRecipe_active_false__12zfob12b" } }, defaultVariants: {}, compoundVariants: [] });
-var HeaderGroupCls = "header_HeaderGroupCls__12zfob128 utilities_display_flex__16lm1iwy utilities_flexFlow_row__16lm1iw1n utilities_alignItems_center__16lm1iw1p";
-var HeaderMenuIconCls = createRuntimeFn({ defaultClassName: "header_HeaderMenuIconCls__12zfob11t utilities_position_relative__16lm1iw1 utilities_display_flex__16lm1iwy utilities_flexFlow_column__16lm1iw1l utilities_justifyContent_spaceAround__16lm1iw1t utilities_visibility_hidden__16lm1iw20", variantClassNames: { menuVisible: { true: "header_HeaderMenuIconCls_menuVisible_true__12zfob11u" }, reserveSpaceWhenHidden: { true: "header_HeaderMenuIconCls_reserveSpaceWhenHidden_true__12zfob11v", false: "header_HeaderMenuIconCls_reserveSpaceWhenHidden_false__12zfob11w" } }, defaultVariants: {}, compoundVariants: [[{ menuVisible: true, reserveSpaceWhenHidden: false }, "header_HeaderMenuIconCls_compound_0__12zfob11x"]] });
+var HeaderFilterOperatorCls = "header_HeaderFilterOperatorCls__12zfob12c utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1o utilities_alignItems_center__16lm1iw1q utilities_position_relative__16lm1iw1";
+var HeaderFilterOperatorIconRecipe = createRuntimeFn({ defaultClassName: "header_HeaderFilterOperatorIconRecipe__12zfob12d utilities_position_relative__16lm1iw1 utilities_top_0__16lm1iw1c", variantClassNames: { disabled: { true: "header_HeaderFilterOperatorIconRecipe_disabled_true__12zfob12e", false: "header_HeaderFilterOperatorIconRecipe_disabled_false__12zfob12f" } }, defaultVariants: {}, compoundVariants: [] });
+var HeaderFilterRecipe = createRuntimeFn({ defaultClassName: "header_HeaderFilterRecipe__12zfob129 utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1o utilities_alignItems_stretch__16lm1iw1r utilities_position_relative__16lm1iw1", variantClassNames: { active: { true: "header_HeaderFilterRecipe_active_true__12zfob12a", false: "header_HeaderFilterRecipe_active_false__12zfob12b" } }, defaultVariants: {}, compoundVariants: [] });
+var HeaderGroupCls = "header_HeaderGroupCls__12zfob128 utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1o utilities_alignItems_center__16lm1iw1q";
+var HeaderMenuIconCls = createRuntimeFn({ defaultClassName: "header_HeaderMenuIconCls__12zfob11t utilities_position_relative__16lm1iw1 utilities_display_flex__16lm1iwz utilities_flexFlow_column__16lm1iw1m utilities_justifyContent_spaceAround__16lm1iw1u utilities_visibility_hidden__16lm1iw21", variantClassNames: { menuVisible: { true: "header_HeaderMenuIconCls_menuVisible_true__12zfob11u" }, reserveSpaceWhenHidden: { true: "header_HeaderMenuIconCls_reserveSpaceWhenHidden_true__12zfob11v", false: "header_HeaderMenuIconCls_reserveSpaceWhenHidden_false__12zfob11w" } }, defaultVariants: {}, compoundVariants: [[{ menuVisible: true, reserveSpaceWhenHidden: false }, "header_HeaderMenuIconCls_compound_0__12zfob11x"]] });
 var HeaderScrollbarPlaceholderCls = "header_HeaderScrollbarPlaceholderCls__12zfob18 utilities_position_absolute__16lm1iw2";
 var HeaderSortIconCls = "utilities_position_relative__16lm1iw1";
 var HeaderSortIconIndexCls = "header_HeaderSortIconIndexCls__12zfob16";
 var HeaderSortIconRecipe = createRuntimeFn({ defaultClassName: "header__12zfob12", variantClassNames: { align: { start: "header_HeaderSortIconRecipe_align_start__12zfob13", center: "header_HeaderSortIconRecipe_align_center__12zfob14", end: "header_HeaderSortIconRecipe_align_end__12zfob15" } }, defaultVariants: {}, compoundVariants: [] });
-var HeaderWrapperCls = "header_HeaderWrapperCls__12zfob127 utilities_overflow_hidden__16lm1iw1w utilities_position_relative__16lm1iw1 utilities_display_flex__16lm1iwy utilities_flexFlow_row__16lm1iw1n";
+var HeaderWrapperCls = "header_HeaderWrapperCls__12zfob127 utilities_overflow_hidden__16lm1iw1x utilities_position_relative__16lm1iw1 utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1o";
 
 // src/components/InfiniteTable/components/icons/InfiniteTableIconClassName.ts
 var InfiniteTableIconClassName = "InfiniteTableIcon";
 
 // src/components/InfiniteTable/components/icons/FilterIcon.css.ts
-var FilterIconCls = "FilterIcon_FilterIconCls__6aunoi0 utilities_display_flex__16lm1iwy utilities_flexFlow_column__16lm1iw1l utilities_position_relative__16lm1iw1 utilities_justifyContent_spaceAround__16lm1iw1t utilities_alignItems_center__16lm1iw1p";
+var FilterIconCls = "FilterIcon_FilterIconCls__6aunoi0 utilities_display_flex__16lm1iwz utilities_flexFlow_column__16lm1iw1m utilities_position_relative__16lm1iw1 utilities_justifyContent_spaceAround__16lm1iw1u utilities_alignItems_center__16lm1iw1q";
 
 // src/components/InfiniteTable/components/icons/FilterIcon.tsx
 var defaultLineStyle = {
@@ -4772,7 +5151,7 @@ function FilterIcon(props) {
     return null;
   }
   const indexStyle = {};
-  return /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React27.createElement(
     "div",
     {
       "data-name": "filter-icon",
@@ -4784,7 +5163,7 @@ function FilterIcon(props) {
         `${InfiniteTableIconClassName}-sort`
       )
     },
-    showIndex ? /* @__PURE__ */ React26.createElement(
+    showIndex ? /* @__PURE__ */ React27.createElement(
       "div",
       {
         "data-name": "index",
@@ -4793,9 +5172,9 @@ function FilterIcon(props) {
       },
       index
     ) : null,
-    /* @__PURE__ */ React26.createElement("div", { style: __spreadValues({ width: sizes[0] }, lineStyle) }),
-    /* @__PURE__ */ React26.createElement("div", { style: __spreadValues({ width: sizes[1] }, lineStyle) }),
-    /* @__PURE__ */ React26.createElement("div", { style: __spreadValues({ width: sizes[2] }, lineStyle) })
+    /* @__PURE__ */ React27.createElement("div", { style: __spreadValues({ width: sizes[0] }, lineStyle) }),
+    /* @__PURE__ */ React27.createElement("div", { style: __spreadValues({ width: sizes[1] }, lineStyle) }),
+    /* @__PURE__ */ React27.createElement("div", { style: __spreadValues({ width: sizes[2] }, lineStyle) })
   );
 }
 
@@ -5537,6 +5916,7 @@ var getComputedColumns = ({
       contentFocusable: colType.contentFocusable,
       renderMenuIcon: colType.renderMenuIcon,
       renderSortIcon: colType.renderSortIcon,
+      renderRowDetailsIcon: colType.renderRowDetailsIcon,
       renderSelectionCheckBox: colType.renderSelectionCheckBox,
       renderHeaderSelectionCheckBox: colType.renderHeaderSelectionCheckBox,
       headerStyle: colType.headerStyle,
@@ -5838,10 +6218,10 @@ function getColumnLabel(colIdOrCol, context) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableColumnHeaderFilterContext.ts
-import React27 from "react";
+import React28 from "react";
 var InfiniteTableColumnHeaderFilterClassName = `${rootClassName2}HeaderCell__filter`;
 var InfiniteTableColumnHeaderFilterOperatorClassName = `${rootClassName2}HeaderCell__filterOperator`;
-var InfiniteTableColumnHeaderFilterContext = React27.createContext(null);
+var InfiniteTableColumnHeaderFilterContext = React28.createContext(null);
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableColumnHeaderFilter.tsx
 var InfiniteTableColumnHeaderFilterInputClassName = `${InfiniteTableColumnHeaderFilterClassName}__input`;
@@ -5852,14 +6232,14 @@ function InfiniteTableColumnHeaderFilter(props) {
   const FilterEditor = props.filterEditor;
   const FilterOperatorSwitch = props.filterOperatorSwitch;
   const [focused, setFocused] = useState6(false);
-  const onFocus = React28.useCallback(() => {
+  const onFocus = React29.useCallback(() => {
     setFocused(true);
   }, []);
-  const onBlur = React28.useCallback(() => {
+  const onBlur = React29.useCallback(() => {
     setFocused(false);
   }, []);
   const active = filterOperatorMenuVisibleForColumnId === column.id || focused;
-  return /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React29.createElement(
     "div",
     {
       onPointerUp: stopPropagation,
@@ -5873,14 +6253,14 @@ function InfiniteTableColumnHeaderFilter(props) {
       )}`,
       style: { height: props.columnHeaderHeight }
     },
-    /* @__PURE__ */ React28.createElement(InfiniteTableColumnHeaderFilterContext.Provider, { value: props }, /* @__PURE__ */ React28.createElement(FilterOperatorSwitch, null), /* @__PURE__ */ React28.createElement(FilterEditor, null))
+    /* @__PURE__ */ React29.createElement(InfiniteTableColumnHeaderFilterContext.Provider, { value: props }, /* @__PURE__ */ React29.createElement(FilterOperatorSwitch, null), /* @__PURE__ */ React29.createElement(FilterEditor, null))
   );
 }
 function InfiniteTableFilterOperatorSwitch() {
   var _a, _b;
   const { columnApi, disabled, operator } = useInfiniteColumnFilterEditor();
   const Icon2 = (_b = (_a = operator == null ? void 0 : operator.components) == null ? void 0 : _a.Icon) != null ? _b : FilterIcon;
-  return /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React29.createElement(
     "div",
     {
       "data-name": "filter-operator",
@@ -5898,7 +6278,7 @@ function InfiniteTableFilterOperatorSwitch() {
         disabled ? `${InfiniteTableColumnHeaderFilterOperatorClassName}--disabled` : ""
       )
     },
-    /* @__PURE__ */ React28.createElement(
+    /* @__PURE__ */ React29.createElement(
       Icon2,
       {
         size: 20,
@@ -5910,7 +6290,7 @@ function InfiniteTableFilterOperatorSwitch() {
   );
 }
 function InfiniteTableColumnHeaderFilterEmpty() {
-  return /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React29.createElement(
     "div",
     {
       onPointerUp: stopPropagation,
@@ -5927,7 +6307,7 @@ function useInfiniteColumnFilterEditor() {
   const context = useInfiniteTable();
   const { column, columnApi } = useInfiniteHeaderCell();
   const columnLabel = getColumnLabel(column, context);
-  const filterContextValue = React28.useContext(
+  const filterContextValue = React29.useContext(
     InfiniteTableColumnHeaderFilterContext
   );
   const { columnFilterType, filterTypes, columnFilterValue } = filterContextValue;
@@ -5935,17 +6315,17 @@ function useInfiniteColumnFilterEditor() {
   const [theValue, setTheValue] = useState6(
     (_a = columnFilterValue == null ? void 0 : columnFilterValue.filter.value) != null ? _a : ""
   );
-  const onInputChange = React28.useCallback(
+  const onInputChange = React29.useCallback(
     (filterValue) => {
       setTheValue(filterValue);
       filterContextValue.onChange(filterValue);
     },
     [filterContextValue.onChange]
   );
-  const clearValue = React28.useCallback(() => {
+  const clearValue = React29.useCallback(() => {
     context.api.clearColumnFilter(column.id);
   }, [column.id]);
-  const removeColumnFilter = React28.useCallback(() => {
+  const removeColumnFilter = React29.useCallback(() => {
     context.api.removeColumnFilter(column.id);
   }, [column.id]);
   useEffect11(() => {
@@ -5988,7 +6368,7 @@ function useInfiniteColumnFilterEditor() {
 // src/components/InfiniteTable/components/FilterEditors.tsx
 function StringFilterEditor() {
   const { ariaLabel, value, setValue, className, disabled } = useInfiniteColumnFilterEditor();
-  return /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React30.createElement(
     "input",
     {
       "data-xxx": true,
@@ -6005,7 +6385,7 @@ function StringFilterEditor() {
 }
 function NumberFilterEditor() {
   const { ariaLabel, value, setValue, className, disabled } = useInfiniteColumnFilterEditor();
-  return /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React30.createElement(
     "input",
     {
       "aria-label": ariaLabel,
@@ -6220,7 +6600,7 @@ import { useCallback as useCallback8, useState as useState7 } from "react";
 
 // src/components/InfiniteTable/InfiniteCls.css.ts
 var FooterCls = "utilities_position_relative__16lm1iw1";
-var InfiniteCls = "InfiniteCls_InfiniteCls__1yeub2v0 utilities_position_relative__16lm1iw1 utilities_display_flex__16lm1iwy utilities_flexFlow_column__16lm1iw1l utilities_boxSizingBorderBox__16lm1iw0";
+var InfiniteCls = "InfiniteCls_InfiniteCls__1yeub2v0 utilities_position_relative__16lm1iw1 utilities_display_flex__16lm1iwz utilities_flexFlow_column__16lm1iw1m utilities_boxSizingBorderBox__16lm1iw0";
 var InfiniteClsHasPinnedEnd = "InfiniteCls_InfiniteClsHasPinnedEnd__1yeub2vq";
 var InfiniteClsHasPinnedStart = "InfiniteCls_InfiniteClsHasPinnedStart__1yeub2vp";
 var InfiniteClsRecipe = createRuntimeFn({ defaultClassName: "InfiniteCls__1yeub2v2", variantClassNames: { focused: { true: "InfiniteCls_InfiniteClsRecipe_focused_true__1yeub2v3", false: "InfiniteCls_InfiniteClsRecipe_focused_false__1yeub2v4" }, focusedWithin: { true: "InfiniteCls_InfiniteClsRecipe_focusedWithin_true__1yeub2v5", false: "InfiniteCls_InfiniteClsRecipe_focusedWithin_false__1yeub2v6" }, hasPinnedStart: { true: "InfiniteCls_InfiniteClsRecipe_hasPinnedStart_true__1yeub2v7", false: "InfiniteCls_InfiniteClsRecipe_hasPinnedStart_false__1yeub2v8" }, hasPinnedEnd: { true: "InfiniteCls_InfiniteClsRecipe_hasPinnedEnd_true__1yeub2v9", false: "InfiniteCls_InfiniteClsRecipe_hasPinnedEnd_false__1yeub2va" }, hasPinnedStartOverflow: { true: "InfiniteCls_InfiniteClsRecipe_hasPinnedStartOverflow_true__1yeub2vb", false: "InfiniteCls_InfiniteClsRecipe_hasPinnedStartOverflow_false__1yeub2vc" }, hasPinnedEndOverflow: { true: "InfiniteCls_InfiniteClsRecipe_hasPinnedEndOverflow_true__1yeub2vd", false: "InfiniteCls_InfiniteClsRecipe_hasPinnedEndOverflow_false__1yeub2ve" } }, defaultVariants: {}, compoundVariants: [[{ focused: false, focusedWithin: false }, "InfiniteCls_InfiniteClsRecipe_compound_0__1yeub2vf"]] });
@@ -7057,14 +7437,14 @@ var useColumnPointerEvents = ({
 };
 
 // src/components/InfiniteTable/utils/RenderHookComponentForInfinite.tsx
-import * as React37 from "react";
+import * as React38 from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx
-import * as React36 from "react";
+import * as React37 from "react";
 import { useCallback as useCallback12, useContext as useContext6, useMemo as useMemo4 } from "react";
 
 // src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
-import * as React32 from "react";
+import * as React33 from "react";
 
 // src/components/DataSource/state/rowInfoStatus.ts
 var showLoadingIcon = (rowInfo) => {
@@ -7075,12 +7455,12 @@ var showLoadingIcon = (rowInfo) => {
 };
 
 // src/components/InfiniteTable/components/icons/ExpanderIcon.tsx
-import * as React30 from "react";
+import * as React31 from "react";
 import { useState as useState8 } from "react";
 
 // src/components/InfiniteTable/components/icons/ExpanderIcon.css.ts
-var ExpanderIconCls = "utilities_fill_accentColor__16lm1iw7 utilities_flex_none__16lm1iwm utilities_cursor_pointer__16lm1iwh";
-var ExpanderIconClsVariants = createRuntimeFn({ defaultClassName: "ExpanderIcon__198z9781", variantClassNames: { expanded: { true: "utilities_transform_rotate90__16lm1iwf", false: "ExpanderIcon_ExpanderIconClsVariants_expanded_false__198z9783" }, direction: { end: "ExpanderIcon_ExpanderIconClsVariants_direction_end__198z9784", start: "ExpanderIcon_ExpanderIconClsVariants_direction_start__198z9785" } }, defaultVariants: {}, compoundVariants: [[{ expanded: false, direction: "end" }, "utilities_transform_rotate180__16lm1iwg"]] });
+var ExpanderIconCls = "utilities_fill_accentColor__16lm1iw7 utilities_flex_none__16lm1iwn utilities_cursor_pointer__16lm1iwi utilities_verticalAlign_middle__16lm1iw9";
+var ExpanderIconClsVariants = createRuntimeFn({ defaultClassName: "ExpanderIcon__198z9781", variantClassNames: { expanded: { true: "utilities_transform_rotate90__16lm1iwg", false: "ExpanderIcon_ExpanderIconClsVariants_expanded_false__198z9783" }, direction: { end: "ExpanderIcon_ExpanderIconClsVariants_direction_end__198z9784", start: "ExpanderIcon_ExpanderIconClsVariants_direction_start__198z9785" } }, defaultVariants: {}, compoundVariants: [[{ expanded: false, direction: "end" }, "utilities_transform_rotate180__16lm1iwh"]] });
 
 // src/components/InfiniteTable/components/icons/ExpanderIcon.tsx
 function ExpanderIcon(props) {
@@ -7096,12 +7476,12 @@ function ExpanderIcon(props) {
       setExpanded(!expanded);
     }
   };
-  React30.useEffect(() => {
+  React31.useEffect(() => {
     if (isControlled("expanded", props)) {
       setExpanded(props.expanded);
     }
   }, [props.expanded]);
-  return /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React31.createElement(
     "svg",
     {
       "data-name": "expander-icon",
@@ -7124,19 +7504,19 @@ function ExpanderIcon(props) {
         `InfiniteIcon-expander--${direction === "end" ? "end" : "start"}`
       )
     },
-    /* @__PURE__ */ React30.createElement("path", { d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" })
+    /* @__PURE__ */ React31.createElement("path", { d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" })
   );
 }
 
 // src/components/InfiniteTable/components/icons/LoadingIcon.tsx
-import * as React31 from "react";
+import * as React32 from "react";
 
 // src/components/InfiniteTable/components/icons/LoadingIcon.css.ts
-var LoadingIconCls = "utilities_stroke_accentColor__16lm1iwa utilities_flex_none__16lm1iwm utilities_cursor_pointer__16lm1iwh";
+var LoadingIconCls = "utilities_stroke_accentColor__16lm1iwb utilities_flex_none__16lm1iwn utilities_cursor_pointer__16lm1iwi";
 
 // src/components/InfiniteTable/components/icons/LoadingIcon.tsx
 var LoadingIcon = (props) => {
-  return /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React32.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -7156,7 +7536,7 @@ var LoadingIcon = (props) => {
         "InfiniteIcon-loading"
       )
     },
-    /* @__PURE__ */ React31.createElement(
+    /* @__PURE__ */ React32.createElement(
       "circle",
       {
         cx: "50",
@@ -7166,7 +7546,7 @@ var LoadingIcon = (props) => {
         r: "35",
         strokeDasharray: "164.93361431346415 56.97787143782138"
       },
-      /* @__PURE__ */ React31.createElement(
+      /* @__PURE__ */ React32.createElement(
         "animateTransform",
         {
           attributeName: "transform",
@@ -7211,11 +7591,11 @@ function getGroupColumnRender({
     );
     if (groupRenderStrategy === "multi-column") {
       if (groupIndexForColumn + 1 !== groupRowInfo.groupNesting && groupRowInfo.isGroupRow) {
-        return selectionCheckBox ? /* @__PURE__ */ React32.createElement("div", { className }, selectionCheckBox) : null;
+        return selectionCheckBox ? /* @__PURE__ */ React33.createElement("div", { className }, selectionCheckBox) : null;
       }
     } else if (groupRenderStrategy === "single-column" && !groupRowInfo.isGroupRow) {
     }
-    return /* @__PURE__ */ React32.createElement("div", { className }, groupIcon, selectionCheckBox, /* @__PURE__ */ React32.createElement("div", { className: cssEllipsisClassName }, valueToRender != null ? valueToRender : null));
+    return /* @__PURE__ */ React33.createElement("div", { className }, groupIcon, selectionCheckBox, /* @__PURE__ */ React33.createElement("div", { className: cssEllipsisClassName }, valueToRender != null ? valueToRender : null));
   };
 }
 function getGroupColumnRenderGroupIcon({
@@ -7264,9 +7644,9 @@ function getGroupColumnRenderGroupIcon({
     const showExpanderIcon = pivotBy ? (((_b = groupRowInfo.groupKeys) == null ? void 0 : _b.length) || 0) < (groupBy == null ? void 0 : groupBy.length) : (((_c = groupRowInfo.groupKeys) == null ? void 0 : _c.length) || 0) <= (groupBy == null ? void 0 : groupBy.length);
     const isLoading = showLoadingIcon(groupRowInfo);
     if (isLoading) {
-      icon = /* @__PURE__ */ React32.createElement(LoadingIcon, null);
+      icon = /* @__PURE__ */ React33.createElement(LoadingIcon, null);
     } else if (showExpanderIcon) {
-      const defaultIcon = /* @__PURE__ */ React32.createElement(
+      const defaultIcon = /* @__PURE__ */ React33.createElement(
         ExpanderIcon,
         {
           expanded: !collapsed,
@@ -7280,7 +7660,7 @@ function getGroupColumnRenderGroupIcon({
     }
     if (initialRenderGroupIcon) {
       renderOptions.renderBag.groupIcon = icon;
-      icon = /* @__PURE__ */ React32.createElement(
+      icon = /* @__PURE__ */ React33.createElement(
         RenderCellHookComponent,
         {
           render: initialRenderGroupIcon,
@@ -7354,17 +7734,17 @@ function objectValuesExcept(obj, exceptList) {
 }
 
 // src/components/InfiniteTable/components/cell.css.ts
-var ColumnCellCls = "cell_ColumnCellCls__1eexc2a6 cell_CellCls__1eexc2a5 utilities_display_flex__16lm1iwy utilities_flexFlow_row__16lm1iw1n utilities_alignItems_center__16lm1iw1p utilities_position_absolute__16lm1iw2 utilities_willChange_transform__16lm1iw21 utilities_whiteSpace_nowrap__16lm1iw22 utilities_userSelect_none__16lm1iw16";
+var ColumnCellCls = "cell_ColumnCellCls__1eexc2a6 cell_CellCls__1eexc2a5 utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1o utilities_alignItems_center__16lm1iw1q utilities_position_absolute__16lm1iw2 utilities_willChange_transform__16lm1iw22 utilities_whiteSpace_nowrap__16lm1iw23 utilities_userSelect_none__16lm1iw17";
 var ColumnCellRecipe = createRuntimeFn({ defaultClassName: "cell_ColumnCellRecipe__1eexc2ah", variantClassNames: { dragging: { false: "cell_ColumnCellRecipe_dragging_false__1eexc2ai", true: "cell_ColumnCellRecipe_dragging_true__1eexc2aj" }, cellSelected: { false: "cell_ColumnCellRecipe_cellSelected_false__1eexc2ak", true: "cell_ColumnCellRecipe_cellSelected_true__1eexc2al" }, align: { start: "cell_ColumnCellRecipe_align_start__1eexc2am", end: "cell_ColumnCellRecipe_align_end__1eexc2an", center: "cell_ColumnCellRecipe_align_center__1eexc2ao" }, verticalAlign: { start: "cell_ColumnCellRecipe_verticalAlign_start__1eexc2ap", end: "cell_ColumnCellRecipe_verticalAlign_end__1eexc2aq", center: "cell_ColumnCellRecipe_verticalAlign_center__1eexc2ar" }, rowActive: { false: "cell_ColumnCellRecipe_rowActive_false__1eexc2as", true: "cell_ColumnCellRecipe_rowActive_true__1eexc2at" }, groupRow: { false: "cell_ColumnCellRecipe_groupRow_false__1eexc2au", true: "cell_ColumnCellRecipe_groupRow_true__1eexc2av" }, groupCell: { false: "cell_ColumnCellRecipe_groupCell_false__1eexc2aw", true: "cell_ColumnCellRecipe_groupCell_true__1eexc2ax" }, zebra: { false: "cell_ColumnCellRecipe_zebra_false__1eexc2ay", even: "cell_ColumnCellRecipe_zebra_even__1eexc2az", odd: "cell_ColumnCellRecipe_zebra_odd__1eexc2a10" }, rowSelected: { true: "cell_ColumnCellRecipe_rowSelected_true__1eexc2a11", false: "cell_ColumnCellRecipe_rowSelected_false__1eexc2a12", null: "cell_ColumnCellRecipe_rowSelected_null__1eexc2a13" }, first: { true: "cell_ColumnCellRecipe_first_true__1eexc2a14", false: "cell_ColumnCellRecipe_first_false__1eexc2a15" }, last: { true: "cell_ColumnCellRecipe_last_true__1eexc2a16", false: "cell_ColumnCellRecipe_last_false__1eexc2a17" }, groupByField: { true: "cell_ColumnCellRecipe_groupByField_true__1eexc2a18", false: "cell_ColumnCellRecipe_groupByField_false__1eexc2a19" }, firstInCategory: { true: "cell_ColumnCellRecipe_firstInCategory_true__1eexc2a1a", false: "cell_ColumnCellRecipe_firstInCategory_false__1eexc2a1b" }, lastInCategory: { true: "cell_ColumnCellRecipe_lastInCategory_true__1eexc2a1c", false: "cell_ColumnCellRecipe_lastInCategory_false__1eexc2a1d" }, pinned: { start: "cell_ColumnCellRecipe_pinned_start__1eexc2a1e", end: "cell_ColumnCellRecipe_pinned_end__1eexc2a1f", false: "cell_ColumnCellRecipe_pinned_false__1eexc2a1g" }, filtered: { true: "cell_ColumnCellRecipe_filtered_true__1eexc2a1h", false: "cell_ColumnCellRecipe_filtered_false__1eexc2a1i" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "cell_ColumnCellRecipe_compound_0__1eexc2a1j"], [{ pinned: "start", firstInCategory: true }, "cell_ColumnCellRecipe_compound_1__1eexc2a1k"], [{ pinned: "end", firstInCategory: true }, "cell_ColumnCellRecipe_compound_2__1eexc2a1l"], [{ pinned: "end", lastInCategory: true }, "cell_ColumnCellRecipe_compound_3__1eexc2a1m"], [{ align: "center", groupCell: false }, "cell_ColumnCellRecipe_compound_4__1eexc2a1n"]] });
 var ColumnCellSelectionIndicatorRecipe = createRuntimeFn({ defaultClassName: "cell_ColumnCellSelectionIndicatorRecipe__1eexc2a8", variantClassNames: { right: { true: "cell_ColumnCellSelectionIndicatorRecipe_right_true__1eexc2a9", false: "cell_ColumnCellSelectionIndicatorRecipe_right_false__1eexc2aa" }, left: { true: "cell_ColumnCellSelectionIndicatorRecipe_left_true__1eexc2ab", false: "cell_ColumnCellSelectionIndicatorRecipe_left_false__1eexc2ac" }, top: { true: "cell_ColumnCellSelectionIndicatorRecipe_top_true__1eexc2ad", false: "cell_ColumnCellSelectionIndicatorRecipe_top_false__1eexc2ae" }, bottom: { true: "cell_ColumnCellSelectionIndicatorRecipe_bottom_true__1eexc2af", false: "cell_ColumnCellSelectionIndicatorRecipe_bottom_false__1eexc2ag" } }, defaultVariants: {}, compoundVariants: [] });
 var SelectionCheckboxCls = "cell_SelectionCheckboxCls__1eexc2a7";
 
 // src/components/InfiniteTable/components/CheckBox.tsx
-import * as React33 from "react";
+import * as React34 from "react";
 import { useEffect as useEffect13, useRef as useRef12 } from "react";
 
 // src/components/InfiniteTable/components/CheckBox.css.ts
-var CheckBoxCls = "CheckBox_CheckBoxCls__qz8ht90 utilities_cursor_pointer__16lm1iwh";
+var CheckBoxCls = "CheckBox_CheckBoxCls__qz8ht90 utilities_cursor_pointer__16lm1iwi";
 
 // src/components/InfiniteTable/components/CheckBox.tsx
 function forwardProps2() {
@@ -7399,7 +7779,7 @@ function InfiniteCheckBoxComponent() {
   useEffect13(() => {
     inputRef.current.indeterminate = checked == null;
   }, [checked]);
-  return /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React34.createElement(
     "input",
     __spreadProps(__spreadValues({}, domProps), {
       className: join("InfiniteCheckBox", CheckBoxCls, domProps == null ? void 0 : domProps.className),
@@ -7417,7 +7797,7 @@ function InfiniteCheckBoxComponent() {
   );
 }
 function InfiniteCheckBox(props) {
-  return /* @__PURE__ */ React33.createElement(InfiniteCheckBoxRoot, __spreadValues({}, props), /* @__PURE__ */ React33.createElement(InfiniteCheckBoxComponent, null));
+  return /* @__PURE__ */ React34.createElement(InfiniteCheckBoxRoot, __spreadValues({}, props), /* @__PURE__ */ React34.createElement(InfiniteCheckBoxComponent, null));
 }
 
 // src/components/InfiniteTable/components/InfiniteTableRow/columnRendering.tsx
@@ -7454,14 +7834,20 @@ function getCellContext(context) {
   const rowInfo = dataArray[rowIndex];
   const { isGroupRow } = rowInfo;
   const column = getComputed().computedColumnsMap.get(columnId);
-  const { activeRowIndex, keyboardNavigation } = getState();
+  const {
+    activeRowIndex,
+    keyboardNavigation,
+    isRowDetailsEnabled
+  } = getState();
   const rowActive = rowIndex === activeRowIndex && keyboardNavigation === "row";
+  const rowDetailState = !isRowDetailsEnabled || typeof isRowDetailsEnabled === "function" && !isRowDetailsEnabled(rowInfo) ? false : api.rowDetailsApi.isRowDetailsExpanded(rowInfo.id) ? "expanded" : "collapsed";
   const {
     formattedValue: value,
     formattedValueContext: { rawValue }
   } = getFormattedValueContextForCell({
     column,
     rowInfo,
+    rowDetailState,
     columnsMap: getComputed().computedColumnsMap,
     context
   });
@@ -7472,6 +7858,7 @@ function getCellContext(context) {
     column,
     columnApi,
     isGroupRow: true,
+    rowDetailState: false,
     data: rowInfo.data,
     rowActive,
     rowInfo,
@@ -7484,6 +7871,7 @@ function getCellContext(context) {
     columnApi,
     column,
     isGroupRow: false,
+    rowDetailState,
     data: rowInfo.data,
     rowActive,
     rowInfo,
@@ -7536,6 +7924,7 @@ function getColumnRenderingParams(options) {
     renderFunctions: {
       renderGroupIcon: column.renderGroupIcon || (groupByColumnReference == null ? void 0 : groupByColumnReference.renderGroupIcon),
       renderSelectionCheckBox: column.renderSelectionCheckBox,
+      renderRowDetailsIcon: column.renderRowDetailsIcon,
       renderValue: column.renderValue || (groupByColumnReference == null ? void 0 : groupByColumnReference.renderValue),
       renderGroupValue: column.renderGroupValue || (groupByColumnReference == null ? void 0 : groupByColumnReference.renderGroupValue),
       renderLeafValue: column.renderLeafValue || (groupByColumnReference == null ? void 0 : groupByColumnReference.renderLeafValue)
@@ -7588,6 +7977,10 @@ function getColumnRenderParam(options) {
     groupByColumn,
     selectionMode,
     api: imperativeApi,
+    toggleCurrentRowDetails: () => imperativeApi.rowDetailsApi.toggleRowDetails(rowInfo.id),
+    toggleRowDetails: imperativeApi.rowDetailsApi.toggleRowDetails,
+    expandRowDetails: imperativeApi.rowDetailsApi.expandRowDetails,
+    collapseRowDetails: imperativeApi.rowDetailsApi.collapseRowDetails,
     selectRow: imperativeApi.rowSelectionApi.selectRow,
     deselectRow: imperativeApi.rowSelectionApi.deselectRow,
     toggleRowSelection: imperativeApi.rowSelectionApi.toggleRowSelection,
@@ -7670,7 +8063,7 @@ function getRawValueForCell(column, rowInfo) {
   }
   return value;
 }
-function getFormattedValueParamForCell(value, column, rowInfo, context) {
+function getFormattedValueParamForCell(value, column, rowInfo, context, rowDetailState) {
   const { rowSelected, indexInAll: rowIndex } = rowInfo;
   const { activeRowIndex, keyboardNavigation } = context.getState();
   const rowActive = rowIndex === activeRowIndex && keyboardNavigation === "row";
@@ -7678,6 +8071,7 @@ function getFormattedValueParamForCell(value, column, rowInfo, context) {
     rowInfo,
     isGroupRow: rowInfo.isGroupRow,
     data: rowInfo.data,
+    rowDetailState: false,
     rowSelected,
     rowActive,
     value,
@@ -7687,6 +8081,7 @@ function getFormattedValueParamForCell(value, column, rowInfo, context) {
     rowInfo,
     isGroupRow: rowInfo.isGroupRow,
     data: rowInfo.data,
+    rowDetailState,
     rowSelected,
     rowActive,
     value,
@@ -7695,13 +8090,14 @@ function getFormattedValueParamForCell(value, column, rowInfo, context) {
   };
 }
 function getFormattedValueContextForCell(options) {
-  const { column, rowInfo, context } = options;
+  const { column, rowInfo, context, rowDetailState } = options;
   const rawValue = getRawValueForCell(column, rowInfo);
   const formattedValueContext = getFormattedValueParamForCell(
     rawValue,
     column,
     rowInfo,
-    context
+    context,
+    rowDetailState
   );
   const formattedValue = column.valueFormatter ? column.valueFormatter(formattedValueContext) : rawValue;
   formattedValueContext.value = formattedValue;
@@ -7712,7 +8108,7 @@ function getFormattedValueContextForCell(options) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
-import * as React34 from "react";
+import * as React35 from "react";
 var { rootClassName: rootClassName5 } = internalProps;
 var InfiniteTableCellClassName = `${rootClassName5}Cell`;
 var InfiniteTableCellContentClassName = `${rootClassName5}Cell_content`;
@@ -7771,7 +8167,7 @@ function InfiniteTableCellFn(props) {
       //   ? `${InfiniteTableCellClassName}--shifting ${CellClsVariants.shifting}`
       //   : '',
     ),
-    children: /* @__PURE__ */ React34.createElement(React34.Fragment, null, beforeChildren, /* @__PURE__ */ React34.createElement(
+    children: /* @__PURE__ */ React35.createElement(React35.Fragment, null, beforeChildren, /* @__PURE__ */ React35.createElement(
       "div",
       {
         className: join(
@@ -7789,21 +8185,21 @@ function InfiniteTableCellFn(props) {
   }
   const RenderComponent = cellType === "body" ? (_b = column.components) == null ? void 0 : _b.ColumnCell : (_c = column.components) == null ? void 0 : _c.HeaderCell;
   if (RenderComponent) {
-    return /* @__PURE__ */ React34.createElement(RenderComponent, __spreadValues({}, finalDOMProps));
+    return /* @__PURE__ */ React35.createElement(RenderComponent, __spreadValues({}, finalDOMProps));
   }
-  return /* @__PURE__ */ React34.createElement("div", __spreadProps(__spreadValues({}, finalDOMProps), { ref: domRef }));
+  return /* @__PURE__ */ React35.createElement("div", __spreadProps(__spreadValues({}, finalDOMProps), { ref: domRef }));
 }
-var InfiniteTableCell = React34.memo(
+var InfiniteTableCell = React35.memo(
   InfiniteTableCellFn
 );
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnEditor.tsx
-import * as React35 from "react";
+import * as React36 from "react";
 import { useCallback as useCallback10, useRef as useRef13 } from "react";
 function InfiniteTableColumnEditor() {
   const { initialValue, setValue, confirmEdit, cancelEdit, readOnly } = useInfiniteColumnEditor();
   const domRef = useRef13();
-  const refCallback = React35.useCallback((node) => {
+  const refCallback = React36.useCallback((node) => {
     domRef.current = node;
     if (node) {
       node.focus();
@@ -7819,7 +8215,7 @@ function InfiniteTableColumnEditor() {
       event.stopPropagation();
     }
   }, []);
-  return /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(
     "input",
     {
       readOnly,
@@ -7839,8 +8235,21 @@ function InfiniteTableColumnEditor() {
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx
 var { rootClassName: rootClassName6 } = internalProps;
 var columnZIndexAtIndex4 = stripVar(InternalVars.columnZIndexAtIndex);
-var InfiniteTableColumnCellContext = React36.createContext(null);
+var InfiniteTableColumnCellContext = React37.createContext(null);
 var InfiniteTableColumnCellClassName = `${rootClassName6}ColumnCell`;
+var defaultRenderRowDetailsIcon = (params) => {
+  const { toggleCurrentRowDetails, rowDetailState } = params;
+  return /* @__PURE__ */ React37.createElement(
+    ExpanderIcon,
+    {
+      style: {
+        visibility: rowDetailState === false ? "hidden" : "visible"
+      },
+      expanded: rowDetailState === "expanded",
+      onChange: toggleCurrentRowDetails
+    }
+  );
+};
 var defaultRenderSelectionCheckBox = (params) => {
   const {
     rowInfo,
@@ -7851,7 +8260,7 @@ var defaultRenderSelectionCheckBox = (params) => {
   } = params;
   if (rowInfo.isGroupRow && !column.groupByForColumn) {
   }
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React37.createElement(
     InfiniteCheckBox,
     {
       domProps: {
@@ -7888,6 +8297,7 @@ function InfiniteTableColumnCellFn(props) {
     getData,
     cellStyle,
     cellClassName,
+    rowDetailState: rowDetailsState,
     width,
     column,
     onMouseLeave,
@@ -7902,7 +8312,7 @@ function InfiniteTableColumnCellFn(props) {
     showZebraRows
   } = props;
   if (!column) {
-    return /* @__PURE__ */ React36.createElement("div", { ref: domRef }, "no column");
+    return /* @__PURE__ */ React37.createElement("div", { ref: domRef }, "no column");
   }
   const { rowSelected } = rowInfo;
   const {
@@ -7931,6 +8341,7 @@ function InfiniteTableColumnCellFn(props) {
   const colRenderingParams = getColumnRenderingParams({
     column,
     rowInfo,
+    rowDetailState: rowDetailsState,
     columnsMap,
     visibleColumnsIds,
     fieldsToColumn,
@@ -7946,7 +8357,7 @@ function InfiniteTableColumnCellFn(props) {
   } = colRenderingParams;
   const { align: align2, verticalAlign } = renderParams;
   const renderParam = renderParams;
-  const renderParamRef = React36.useRef(renderParam);
+  const renderParamRef = React37.useRef(renderParam);
   const onClick = useCallback12(
     (event) => {
       const colIndex = column.computedVisibleIndex;
@@ -8000,7 +8411,7 @@ function InfiniteTableColumnCellFn(props) {
     [rowInfo]
   );
   const EditorComponent = (_b = (_a = column.components) == null ? void 0 : _a.Editor) != null ? _b : InfiniteTableColumnEditor;
-  const editor = inEdit ? /* @__PURE__ */ React36.createElement(CellEditorContextComponent, { contextValue: renderParam }, /* @__PURE__ */ React36.createElement(EditorComponent, null)) : null;
+  const editor = inEdit ? /* @__PURE__ */ React37.createElement(CellEditorContextComponent, { contextValue: renderParam }, /* @__PURE__ */ React37.createElement(EditorComponent, null)) : null;
   const renderChildren = useCallback12(
     once(() => {
       if (hidden) {
@@ -8010,7 +8421,7 @@ function InfiniteTableColumnCellFn(props) {
         return null;
       }
       if (renderFunctions.renderGroupIcon) {
-        renderParam.renderBag.groupIcon = /* @__PURE__ */ React36.createElement(
+        renderParam.renderBag.groupIcon = /* @__PURE__ */ React37.createElement(
           RenderCellHookComponent,
           {
             render: renderFunctions.renderGroupIcon,
@@ -8021,7 +8432,7 @@ function InfiniteTableColumnCellFn(props) {
         );
       }
       if (renderFunctions.renderSelectionCheckBox && selectionMode == "multi-row") {
-        renderParam.renderBag.selectionCheckBox = /* @__PURE__ */ React36.createElement(
+        renderParam.renderBag.selectionCheckBox = /* @__PURE__ */ React37.createElement(
           RenderCellHookComponent,
           {
             render: defaultRenderSelectionCheckBox,
@@ -8029,7 +8440,7 @@ function InfiniteTableColumnCellFn(props) {
           }
         );
         if (renderFunctions.renderSelectionCheckBox !== true) {
-          renderParam.renderBag.selectionCheckBox = /* @__PURE__ */ React36.createElement(
+          renderParam.renderBag.selectionCheckBox = /* @__PURE__ */ React37.createElement(
             RenderCellHookComponent,
             {
               render: renderFunctions.renderSelectionCheckBox,
@@ -8040,8 +8451,30 @@ function InfiniteTableColumnCellFn(props) {
           );
         }
       }
+      if (renderFunctions.renderRowDetailsIcon) {
+        renderParam.renderBag.rowDetailsIcon = /* @__PURE__ */ React37.createElement(
+          RenderCellHookComponent,
+          {
+            render: defaultRenderRowDetailsIcon,
+            renderParam: __spreadProps(__spreadValues({}, renderParam), {
+              renderBag: __spreadValues({}, renderParam.renderBag)
+            })
+          }
+        );
+        if (typeof renderFunctions.renderRowDetailsIcon === "function") {
+          renderParam.renderBag.rowDetailsIcon = /* @__PURE__ */ React37.createElement(
+            RenderCellHookComponent,
+            {
+              render: renderFunctions.renderRowDetailsIcon,
+              renderParam: __spreadProps(__spreadValues({}, renderParam), {
+                renderBag: __spreadValues({}, renderParam.renderBag)
+              })
+            }
+          );
+        }
+      }
       if (renderFunctions.renderValue) {
-        renderParam.renderBag.value = /* @__PURE__ */ React36.createElement(
+        renderParam.renderBag.value = /* @__PURE__ */ React37.createElement(
           RenderCellHookComponent,
           {
             render: renderFunctions.renderValue,
@@ -8052,7 +8485,7 @@ function InfiniteTableColumnCellFn(props) {
         );
       }
       if (rowInfo.isGroupRow && renderFunctions.renderGroupValue) {
-        renderParam.renderBag.value = /* @__PURE__ */ React36.createElement(
+        renderParam.renderBag.value = /* @__PURE__ */ React37.createElement(
           RenderCellHookComponent,
           {
             render: renderFunctions.renderGroupValue,
@@ -8063,7 +8496,7 @@ function InfiniteTableColumnCellFn(props) {
         );
       }
       if (!rowInfo.isGroupRow && renderFunctions.renderLeafValue) {
-        renderParam.renderBag.value = /* @__PURE__ */ React36.createElement(
+        renderParam.renderBag.value = /* @__PURE__ */ React37.createElement(
           RenderCellHookComponent,
           {
             render: renderFunctions.renderLeafValue,
@@ -8078,9 +8511,9 @@ function InfiniteTableColumnCellFn(props) {
       if (valueToRender instanceof Date) {
         valueToRender = valueToRender.toLocaleDateString();
       }
-      const all = /* @__PURE__ */ React36.createElement(React36.Fragment, null, align2 !== "end" ? renderParam.renderBag.groupIcon : null, align2 !== "end" ? renderParam.renderBag.selectionCheckBox : null, valueToRender, align2 === "end" ? renderParam.renderBag.selectionCheckBox : null, align2 === "end" ? renderParam.renderBag.groupIcon : null);
+      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);
       if (column.render) {
-        return /* @__PURE__ */ React36.createElement(
+        return /* @__PURE__ */ React37.createElement(
           RenderCellHookComponent,
           {
             render: column.render,
@@ -8096,6 +8529,7 @@ function InfiniteTableColumnCellFn(props) {
       column,
       hidden,
       inEdit,
+      rowDetailsState,
       ...objectValuesExcept(renderParam, {
         renderBag: true,
         selectCell: true,
@@ -8103,6 +8537,7 @@ function InfiniteTableColumnCellFn(props) {
         selectCurrentRow: true,
         deselectCurrentRow: true,
         toggleCurrentGroupRow: true,
+        toggleCurrentRowDetails: true,
         toggleCurrentRowSelection: true,
         toggleCurrentGroupRowSelection: true,
         rowHasSelectedCells: true
@@ -8239,16 +8674,16 @@ function InfiniteTableColumnCellFn(props) {
   return (
     // this context is here for supporting useInfiniteColumnCell to be used
     // with a custom column component, specified via column.components.ColumnCell
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React37.createElement(
       ContextProvider,
       {
         value: renderParamRef.current
       },
-      /* @__PURE__ */ React36.createElement(InfiniteTableCell, __spreadValues({}, cellProps))
+      /* @__PURE__ */ React37.createElement(InfiniteTableCell, __spreadValues({}, cellProps))
     )
   );
 }
-var InfiniteTableColumnCell = React36.memo(
+var InfiniteTableColumnCell = React37.memo(
   InfiniteTableColumnCellFn
 );
 function useInfiniteColumnCell() {
@@ -8263,14 +8698,14 @@ function useInfiniteColumnEditor() {
     state: { editingValueRef, editingCell }
   } = useInfiniteTable();
   const { column, rowInfo } = useInfiniteColumnCell();
-  const [initialValue] = React36.useState(() => editingCell == null ? void 0 : editingCell.value);
-  const [currentValue, setCurrentValue] = React36.useState(initialValue);
+  const [initialValue] = React37.useState(() => editingCell == null ? void 0 : editingCell.value);
+  const [currentValue, setCurrentValue] = React37.useState(initialValue);
   const readOnly = editingCell ? !editingCell.active && !!editingCell.waiting : false;
-  const setValue = React36.useCallback((value) => {
+  const setValue = React37.useCallback((value) => {
     editingValueRef.current = value;
     setCurrentValue(value);
   }, []);
-  React36.useLayoutEffect(() => {
+  React37.useLayoutEffect(() => {
     editingValueRef.current = initialValue;
   }, []);
   const confirmEdit = api.confirmEdit;
@@ -8299,7 +8734,7 @@ function RenderHookComponent(props) {
 // src/components/InfiniteTable/utils/RenderHookComponentForInfinite.tsx
 function RenderCellHookComponent(props) {
   const ContextProvider = InfiniteTableColumnCellContext.Provider;
-  return /* @__PURE__ */ React37.createElement(ContextProvider, { value: props.renderParam }, /* @__PURE__ */ React37.createElement(
+  return /* @__PURE__ */ React38.createElement(ContextProvider, { value: props.renderParam }, /* @__PURE__ */ React38.createElement(
     RenderHookComponent,
     {
       render: props.render,
@@ -8309,11 +8744,11 @@ function RenderCellHookComponent(props) {
 }
 function CellEditorContextComponent(props) {
   const ContextProvider = InfiniteTableColumnCellContext.Provider;
-  return /* @__PURE__ */ React37.createElement(ContextProvider, { value: props.contextValue }, props.children);
+  return /* @__PURE__ */ React38.createElement(ContextProvider, { value: props.contextValue }, props.children);
 }
 function RenderHeaderCellHookComponent(props) {
   const ContextProvider = InfiniteTableHeaderCellContext.Provider;
-  return /* @__PURE__ */ React37.createElement(ContextProvider, { value: props.renderParam }, /* @__PURE__ */ React37.createElement(
+  return /* @__PURE__ */ React38.createElement(ContextProvider, { value: props.renderParam }, /* @__PURE__ */ React38.createElement(
     RenderHookComponent,
     {
       render: props.render,
@@ -8323,7 +8758,7 @@ function RenderHeaderCellHookComponent(props) {
 }
 
 // src/components/InfiniteTable/components/icons/MenuIcon.tsx
-import * as React38 from "react";
+import * as React39 from "react";
 var defaultLineStyle2 = {
   width: "100%",
   pointerEvents: "none"
@@ -8347,7 +8782,7 @@ function MenuIcon(props) {
   const lineStyle = __spreadValues(__spreadProps(__spreadValues({}, defaultLineStyle2), {
     borderTop: `${ThemeVars.components.HeaderCell.menuIconLineWidth} solid currentColor`
   }), props.lineStyle);
-  return /* @__PURE__ */ React38.createElement(
+  return /* @__PURE__ */ React39.createElement(
     "div",
     __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, domProps), {
       style: style2
@@ -8363,16 +8798,16 @@ function MenuIcon(props) {
         `${InfiniteTableIconClassName}-menu`
       )
     }),
-    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 }))
+    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 }))
   );
 }
 
 // src/components/InfiniteTable/components/icons/SortIcon.tsx
-import * as React39 from "react";
+import * as React40 from "react";
 import { useEffect as useEffect14, useState as useState10 } from "react";
 
 // src/components/InfiniteTable/components/icons/SortIcon.css.ts
-var SortIconCls = "SortIcon_SortIconCls__1ek6mqy0 utilities_display_flex__16lm1iwy utilities_flexFlow_column__16lm1iw1l utilities_position_relative__16lm1iw1 utilities_justifyContent_spaceAround__16lm1iw1t";
+var SortIconCls = "SortIcon_SortIconCls__1ek6mqy0 utilities_display_flex__16lm1iwz utilities_flexFlow_column__16lm1iw1m utilities_position_relative__16lm1iw1 utilities_justifyContent_spaceAround__16lm1iw1u";
 
 // src/components/InfiniteTable/components/icons/SortIcon.tsx
 var defaultLineStyle3 = {
@@ -8427,7 +8862,7 @@ function SortIcon(props) {
   if (direction === -1) {
     indexStyle.top = "100%";
   }
-  return /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React40.createElement(
     "div",
     {
       "data-name": "sort-icon",
@@ -8439,7 +8874,7 @@ function SortIcon(props) {
         `${InfiniteTableIconClassName}-sort`
       )
     },
-    showIndex ? /* @__PURE__ */ React39.createElement(
+    showIndex ? /* @__PURE__ */ React40.createElement(
       "div",
       {
         "data-name": "index",
@@ -8448,25 +8883,25 @@ function SortIcon(props) {
       },
       index
     ) : null,
-    /* @__PURE__ */ React39.createElement(
+    /* @__PURE__ */ React40.createElement(
       "div",
       {
         style: __spreadValues({ width: sizes[0] }, lineStyle),
         onTransitionEnd
       }
     ),
-    /* @__PURE__ */ React39.createElement("div", { style: __spreadValues({ width: sizes[1] }, lineStyle) }),
-    /* @__PURE__ */ React39.createElement("div", { style: __spreadValues({ width: sizes[2] }, lineStyle) })
+    /* @__PURE__ */ React40.createElement("div", { style: __spreadValues({ width: sizes[1] }, lineStyle) }),
+    /* @__PURE__ */ React40.createElement("div", { style: __spreadValues({ width: sizes[2] }, lineStyle) })
   );
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/useColumnResizeHandle.tsx
-import * as React41 from "react";
+import * as React42 from "react";
 import { useCallback as useCallback13 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/index.tsx
 import { useRef as useRef15, useState as useState11 } from "react";
-import * as React40 from "react";
+import * as React41 from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/columnResizer.ts
 function getColumnResizer(colIndex, {
@@ -8578,9 +9013,9 @@ function getColumnGroupResizer(colIndexes, config) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/ResizeHandle.css.ts
-var ResizeHandleCls = "ResizeHandle_ResizeHandleCls__zneyzh0 utilities_position_absolute__16lm1iw2 utilities_top_0__16lm1iw1b utilities_right_0__16lm1iw1i utilities_bottom_0__16lm1iw1g utilities_cursor_colResize__16lm1iwj utilities_overflow_hidden__16lm1iw1w";
-var ResizeHandleDraggerClsRecipe = createRuntimeFn({ defaultClassName: "ResizeHandle_ResizeHandleDraggerClsRecipe__zneyzhc utilities_position_absolute__16lm1iw2 utilities_top_0__16lm1iw1b utilities_bottom_0__16lm1iw1g", variantClassNames: { constrained: { false: "ResizeHandle_ResizeHandleDraggerClsRecipe_constrained_false__zneyzhd", true: "ResizeHandle_ResizeHandleDraggerClsRecipe_constrained_true__zneyzhe" }, computedPinned: { start: "ResizeHandle_ResizeHandleDraggerClsRecipe_computedPinned_start__zneyzhf", end: "ResizeHandle_ResizeHandleDraggerClsRecipe_computedPinned_end__zneyzhg", false: "ResizeHandle_ResizeHandleDraggerClsRecipe_computedPinned_false__zneyzhh" }, computedFirstInCategory: { true: "ResizeHandle_ResizeHandleDraggerClsRecipe_computedFirstInCategory_true__zneyzhi", false: "ResizeHandle_ResizeHandleDraggerClsRecipe_computedFirstInCategory_false__zneyzhj" }, computedLastInCategory: { true: "ResizeHandle_ResizeHandleDraggerClsRecipe_computedLastInCategory_true__zneyzhk", false: "ResizeHandle_ResizeHandleDraggerClsRecipe_computedLastInCategory_false__zneyzhl" } }, defaultVariants: {}, compoundVariants: [[{ computedPinned: "start", computedLastInCategory: true }, "ResizeHandle_ResizeHandleDraggerClsRecipe_compound_0__zneyzhm"], [{ computedPinned: "end", computedFirstInCategory: true }, "ResizeHandle_ResizeHandleDraggerClsRecipe_compound_1__zneyzhn"]] });
-var ResizeHandleRecipeCls = createRuntimeFn({ defaultClassName: "ResizeHandle__zneyzh1", variantClassNames: { computedPinned: { start: "ResizeHandle_ResizeHandleRecipeCls_computedPinned_start__zneyzh2", end: "ResizeHandle_ResizeHandleRecipeCls_computedPinned_end__zneyzh3 utilities_left_0__16lm1iw1d utilities_right_auto__16lm1iw1k", false: "ResizeHandle_ResizeHandleRecipeCls_computedPinned_false__zneyzh4" }, computedFirstInCategory: { true: "ResizeHandle_ResizeHandleRecipeCls_computedFirstInCategory_true__zneyzh5", false: "ResizeHandle_ResizeHandleRecipeCls_computedFirstInCategory_false__zneyzh6" }, computedLastInCategory: { true: "ResizeHandle_ResizeHandleRecipeCls_computedLastInCategory_true__zneyzh7", false: "ResizeHandle_ResizeHandleRecipeCls_computedLastInCategory_false__zneyzh8" } }, defaultVariants: {}, compoundVariants: [[{ computedPinned: "end", computedLastInCategory: false, computedFirstInCategory: true }, "ResizeHandle_ResizeHandleRecipeCls_compound_0__zneyzh9"], [{ computedPinned: false, computedFirstInCategory: false, computedLastInCategory: true }, "ResizeHandle_ResizeHandleRecipeCls_compound_1__zneyzha"], [{ computedPinned: "start", computedFirstInCategory: false, computedLastInCategory: true }, "ResizeHandle_ResizeHandleRecipeCls_compound_2__zneyzhb"]] });
+var ResizeHandleCls = "ResizeHandle_ResizeHandleCls__zneyzh0 utilities_position_absolute__16lm1iw2 utilities_top_0__16lm1iw1c utilities_right_0__16lm1iw1j utilities_bottom_0__16lm1iw1h utilities_cursor_colResize__16lm1iwk utilities_overflow_hidden__16lm1iw1x";
+var ResizeHandleDraggerClsRecipe = createRuntimeFn({ defaultClassName: "ResizeHandle_ResizeHandleDraggerClsRecipe__zneyzhc utilities_position_absolute__16lm1iw2 utilities_top_0__16lm1iw1c utilities_bottom_0__16lm1iw1h", variantClassNames: { constrained: { false: "ResizeHandle_ResizeHandleDraggerClsRecipe_constrained_false__zneyzhd", true: "ResizeHandle_ResizeHandleDraggerClsRecipe_constrained_true__zneyzhe" }, computedPinned: { start: "ResizeHandle_ResizeHandleDraggerClsRecipe_computedPinned_start__zneyzhf", end: "ResizeHandle_ResizeHandleDraggerClsRecipe_computedPinned_end__zneyzhg", false: "ResizeHandle_ResizeHandleDraggerClsRecipe_computedPinned_false__zneyzhh" }, computedFirstInCategory: { true: "ResizeHandle_ResizeHandleDraggerClsRecipe_computedFirstInCategory_true__zneyzhi", false: "ResizeHandle_ResizeHandleDraggerClsRecipe_computedFirstInCategory_false__zneyzhj" }, computedLastInCategory: { true: "ResizeHandle_ResizeHandleDraggerClsRecipe_computedLastInCategory_true__zneyzhk", false: "ResizeHandle_ResizeHandleDraggerClsRecipe_computedLastInCategory_false__zneyzhl" } }, defaultVariants: {}, compoundVariants: [[{ computedPinned: "start", computedLastInCategory: true }, "ResizeHandle_ResizeHandleDraggerClsRecipe_compound_0__zneyzhm"], [{ computedPinned: "end", computedFirstInCategory: true }, "ResizeHandle_ResizeHandleDraggerClsRecipe_compound_1__zneyzhn"]] });
+var ResizeHandleRecipeCls = createRuntimeFn({ defaultClassName: "ResizeHandle__zneyzh1", variantClassNames: { computedPinned: { start: "ResizeHandle_ResizeHandleRecipeCls_computedPinned_start__zneyzh2", end: "ResizeHandle_ResizeHandleRecipeCls_computedPinned_end__zneyzh3 utilities_left_0__16lm1iw1e utilities_right_auto__16lm1iw1l", false: "ResizeHandle_ResizeHandleRecipeCls_computedPinned_false__zneyzh4" }, computedFirstInCategory: { true: "ResizeHandle_ResizeHandleRecipeCls_computedFirstInCategory_true__zneyzh5", false: "ResizeHandle_ResizeHandleRecipeCls_computedFirstInCategory_false__zneyzh6" }, computedLastInCategory: { true: "ResizeHandle_ResizeHandleRecipeCls_computedLastInCategory_true__zneyzh7", false: "ResizeHandle_ResizeHandleRecipeCls_computedLastInCategory_false__zneyzh8" } }, defaultVariants: {}, compoundVariants: [[{ computedPinned: "end", computedLastInCategory: false, computedFirstInCategory: true }, "ResizeHandle_ResizeHandleRecipeCls_compound_0__zneyzh9"], [{ computedPinned: false, computedFirstInCategory: false, computedLastInCategory: true }, "ResizeHandle_ResizeHandleRecipeCls_compound_1__zneyzha"], [{ computedPinned: "start", computedFirstInCategory: false, computedLastInCategory: true }, "ResizeHandle_ResizeHandleRecipeCls_compound_2__zneyzhb"]] });
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/index.tsx
 var { rootClassName: rootClassName7 } = internalProps;
@@ -8641,7 +9076,7 @@ function ResizeHandleFn(props) {
     right: computedPinned === "start" ? void 0 : 0
     //ThemeVars.components.HeaderCell.resizeHandleWidth,
   } : computedPinned === "end" && computedFirstInCategory ? { right: void 0 } : void 0;
-  return /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React41.createElement(
     "div",
     {
       ref: domRef,
@@ -8654,7 +9089,7 @@ function ResizeHandleFn(props) {
       )}`,
       onPointerDown
     },
-    /* @__PURE__ */ React40.createElement(
+    /* @__PURE__ */ React41.createElement(
       "div",
       {
         style: style2,
@@ -8668,7 +9103,7 @@ function ResizeHandleFn(props) {
     )
   );
 }
-var ResizeHandle = React40.memo(ResizeHandleFn);
+var ResizeHandle = React41.memo(ResizeHandleFn);
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/useColumnResizeHandle.tsx
 function useColumnResizeHandle(column) {
@@ -8732,7 +9167,7 @@ function useColumnResizeHandle(column) {
     },
     [computeResizeForDiff]
   );
-  const resizeHandle = column.computedResizable ? /* @__PURE__ */ React41.createElement(
+  const resizeHandle = column.computedResizable ? /* @__PURE__ */ React42.createElement(
     ResizeHandle,
     {
       columns: computedVisibleColumns,
@@ -8748,7 +9183,7 @@ function useColumnResizeHandle(column) {
 var defaultRenderSelectionCheckBox2 = (params) => {
   const { allRowsSelected, someRowsSelected, api } = params;
   const selected = allRowsSelected ? true : someRowsSelected ? null : false;
-  return /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React43.createElement(
     InfiniteCheckBox,
     {
       domProps: {
@@ -8765,11 +9200,11 @@ var defaultRenderSelectionCheckBox2 = (params) => {
     }
   );
 };
-var InfiniteTableHeaderCellContext = React42.createContext(null);
+var InfiniteTableHeaderCellContext = React43.createContext(null);
 var { rootClassName: rootClassName8 } = internalProps;
 var InfiniteTableHeaderCellClassName = `${rootClassName8}HeaderCell`;
 var columnZIndexAtIndex5 = stripVar(InternalVars.columnZIndexAtIndex);
-var spacer = /* @__PURE__ */ React42.createElement("div", { className: flex["1"] });
+var spacer = /* @__PURE__ */ React43.createElement("div", { className: flex["1"] });
 var InfiniteHeaderCellDataAttributes = keyMirror({
   "data-name": ``,
   "data-field": ``,
@@ -8828,7 +9263,7 @@ function InfiniteTableHeaderCell(props) {
     getState
   });
   const computedSortable = columnApi.isSortable();
-  const sortIcon = computedSortable && (column.computedSorted || alwaysShow) ? /* @__PURE__ */ React42.createElement(
+  const sortIcon = computedSortable && (column.computedSorted || alwaysShow) ? /* @__PURE__ */ React43.createElement(
     SortIcon,
     {
       index: column.computedMultiSort ? column.computedSortIndex + 1 : void 0,
@@ -8845,7 +9280,7 @@ function InfiniteTableHeaderCell(props) {
     }
   ) : null;
   const filtered = column.computedFilterable && column.computedFiltered;
-  const filterIcon = filtered ? /* @__PURE__ */ React42.createElement(FilterIcon, null) : null;
+  const filterIcon = filtered ? /* @__PURE__ */ React43.createElement(FilterIcon, null) : null;
   const headerCSSEllipsis = (_e = (_d = column.headerCssEllipsis) != null ? _d : column.cssEllipsis) != null ? _e : true;
   const menuIconProps = {
     reserveSpaceWhenHidden: align2 === "center",
@@ -8865,7 +9300,7 @@ function InfiniteTableHeaderCell(props) {
     }
   };
   const MenuIconCmp = ((_f = column.components) == null ? void 0 : _f.MenuIcon) || (components2 == null ? void 0 : components2.MenuIcon) || MenuIcon;
-  const menuIcon = /* @__PURE__ */ React42.createElement(MenuIconCmp, __spreadValues({}, menuIconProps));
+  const menuIcon = /* @__PURE__ */ React43.createElement(MenuIconCmp, __spreadValues({}, menuIconProps));
   const initialRenderParam = {
     dragging,
     domRef: ref,
@@ -8896,7 +9331,7 @@ function InfiniteTableHeaderCell(props) {
       renderBag: __spreadValues({}, initialRenderParam.renderBag)
     });
     if (column.renderSortIcon) {
-      renderParam2.renderBag.sortIcon = /* @__PURE__ */ React42.createElement(
+      renderParam2.renderBag.sortIcon = /* @__PURE__ */ React43.createElement(
         RenderHeaderCellHookComponent,
         {
           render: column.renderSortIcon,
@@ -8907,7 +9342,7 @@ function InfiniteTableHeaderCell(props) {
       );
     }
     if (column.renderFilterIcon) {
-      renderParam2.renderBag.filterIcon = /* @__PURE__ */ React42.createElement(
+      renderParam2.renderBag.filterIcon = /* @__PURE__ */ React43.createElement(
         RenderHeaderCellHookComponent,
         {
           render: column.renderFilterIcon,
@@ -8918,7 +9353,7 @@ function InfiniteTableHeaderCell(props) {
       );
     }
     if (typeof column.renderMenuIcon === "function") {
-      renderParam2.renderBag.menuIcon = /* @__PURE__ */ React42.createElement(
+      renderParam2.renderBag.menuIcon = /* @__PURE__ */ React43.createElement(
         RenderHeaderCellHookComponent,
         {
           render: (param) => {
@@ -8930,7 +9365,7 @@ function InfiniteTableHeaderCell(props) {
               if (result.type === MenuIconCmp || result.type === MenuIcon) {
                 return result;
               }
-              return /* @__PURE__ */ React42.createElement(MenuIconCmp, __spreadValues({}, menuIconProps), result);
+              return /* @__PURE__ */ React43.createElement(MenuIconCmp, __spreadValues({}, menuIconProps), result);
             }
             return null;
           },
@@ -8941,7 +9376,7 @@ function InfiniteTableHeaderCell(props) {
       );
     }
     if (column.renderSelectionCheckBox && selectionMode === "multi-row") {
-      renderParam2.renderBag.selectionCheckBox = /* @__PURE__ */ React42.createElement(
+      renderParam2.renderBag.selectionCheckBox = /* @__PURE__ */ React43.createElement(
         RenderHeaderCellHookComponent,
         {
           render: defaultRenderSelectionCheckBox2,
@@ -8952,7 +9387,7 @@ function InfiniteTableHeaderCell(props) {
       );
       const renderHeaderSelectionCheckBox = (_a2 = column.renderHeaderSelectionCheckBox) != null ? _a2 : column.renderSelectionCheckBox;
       if (renderHeaderSelectionCheckBox && renderHeaderSelectionCheckBox !== true) {
-        renderParam2.renderBag.selectionCheckBox = /* @__PURE__ */ React42.createElement(
+        renderParam2.renderBag.selectionCheckBox = /* @__PURE__ */ React43.createElement(
           RenderHeaderCellHookComponent,
           {
             render: renderHeaderSelectionCheckBox,
@@ -8964,7 +9399,7 @@ function InfiniteTableHeaderCell(props) {
       }
     }
     if (header instanceof Function) {
-      renderParam2.renderBag.header = /* @__PURE__ */ React42.createElement(
+      renderParam2.renderBag.header = /* @__PURE__ */ React43.createElement(
         RenderHeaderCellHookComponent,
         {
           render: header,
@@ -8975,10 +9410,10 @@ function InfiniteTableHeaderCell(props) {
       );
     }
     const theMenuIcon = column.renderMenuIcon === false ? null : renderParam2.renderBag.menuIcon;
-    const headerContent = headerCSSEllipsis ? /* @__PURE__ */ React42.createElement("div", { className: cssEllipsisClassName }, renderParam2.renderBag.header) : renderParam2.renderBag.header;
-    const all = /* @__PURE__ */ React42.createElement(React42.Fragment, null, align2 === "center" ? spacer : null, renderParam2.renderBag.selectionCheckBox, headerContent, renderParam2.renderBag.sortIcon, renderParam2.renderBag.filterIcon, align2 === "center" ? spacer : null, align2 !== "center" ? spacer : null, theMenuIcon);
+    const headerContent = headerCSSEllipsis ? /* @__PURE__ */ React43.createElement("div", { className: cssEllipsisClassName }, renderParam2.renderBag.header) : renderParam2.renderBag.header;
+    const all = /* @__PURE__ */ React43.createElement(React43.Fragment, null, align2 === "center" ? spacer : null, renderParam2.renderBag.selectionCheckBox, headerContent, renderParam2.renderBag.sortIcon, renderParam2.renderBag.filterIcon, align2 === "center" ? spacer : null, align2 !== "center" ? spacer : null, theMenuIcon);
     if (column.renderHeader) {
-      return /* @__PURE__ */ React42.createElement(
+      return /* @__PURE__ */ React43.createElement(
         RenderHeaderCellHookComponent,
         {
           render: column.renderHeader,
@@ -9015,7 +9450,7 @@ function InfiniteTableHeaderCell(props) {
   });
   let draggingProxy = null;
   if (dragging && proxyPosition) {
-    draggingProxy = /* @__PURE__ */ React42.createElement(
+    draggingProxy = /* @__PURE__ */ React43.createElement(
       "div",
       {
         key: column.id,
@@ -9039,7 +9474,7 @@ function InfiniteTableHeaderCell(props) {
     verticalAlign,
     align: align2
   };
-  const debouncedOnFilterValueChange = React42.useMemo(() => {
+  const debouncedOnFilterValueChange = React43.useMemo(() => {
     const fn = (filterValue) => {
       api.setColumnFilter(column.id, filterValue);
     };
@@ -9065,7 +9500,7 @@ function InfiniteTableHeaderCell(props) {
     "data-sort": column.computedSortedAsc ? "asc" : column.computedSortedDesc ? "desc" : "none",
     "data-sort-index": `${(_p = column.computedSortIndex) != null ? _p : -1}`
   };
-  return /* @__PURE__ */ React42.createElement(ContextProvider, { value: renderParam }, /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React43.createElement(ContextProvider, { value: renderParam }, /* @__PURE__ */ React43.createElement(
     InfiniteTableCell,
     __spreadProps(__spreadValues({
       domRef: ref,
@@ -9106,7 +9541,7 @@ function InfiniteTableHeaderCell(props) {
         CellCls
       ),
       cssEllipsis: headerCSSEllipsis,
-      afterChildren: /* @__PURE__ */ React42.createElement(React42.Fragment, null, showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ React42.createElement(
+      afterChildren: /* @__PURE__ */ React43.createElement(React43.Fragment, null, showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ React43.createElement(
         InfiniteTableColumnHeaderFilter,
         {
           filterEditor: FilterEditor,
@@ -9119,7 +9554,7 @@ function InfiniteTableHeaderCell(props) {
           columnFilterValue: column.computedFilterValue,
           columnHeaderHeight
         }
-      ) : /* @__PURE__ */ React42.createElement(InfiniteTableColumnHeaderFilterEmpty, null) : null, resizeHandle),
+      ) : /* @__PURE__ */ React43.createElement(InfiniteTableColumnHeaderFilterEmpty, null) : null, resizeHandle),
       renderChildren
     })
   ), draggingProxy);
@@ -9132,7 +9567,7 @@ function useInfiniteHeaderCell() {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderWrapper.tsx
-import * as React47 from "react";
+import * as React48 from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/buildColumnAndGroupTree.ts
 function buildColumnAndGroupTree(columns, columnGroups, columnGroupsDepthsMap, columnGroupsMaxDepth) {
@@ -9238,19 +9673,19 @@ function assignGroupOffsetsAndComputedWidths(items, groupOffset = 0) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
-import * as React46 from "react";
+import * as React47 from "react";
 import { useCallback as useCallback16, useEffect as useEffect16, useRef as useRef18 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup.tsx
-import * as React45 from "react";
+import * as React46 from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/useColumnGroupResizeHandle.tsx
-import * as React44 from "react";
+import * as React45 from "react";
 import { useCallback as useCallback15 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/GroupResizeHandle.tsx
 import { useRef as useRef17, useState as useState12 } from "react";
-import * as React43 from "react";
+import * as React44 from "react";
 var { rootClassName: rootClassName9 } = internalProps;
 var InfiniteTableHeaderCellResizeHandleCls2 = `${rootClassName9}HeaderCell_ResizeHandle`;
 function GroupResizeHandleFn(props) {
@@ -9319,7 +9754,7 @@ function GroupResizeHandleFn(props) {
   const style2 = (computedPinned === false || computedPinned === "start") && computedLastInCategory ? {
     right: computedPinned === "start" ? void 0 : ThemeVars.components.HeaderCell.resizeHandleWidth
   } : computedPinned === "end" && computedFirstInCategory ? { right: void 0 } : void 0;
-  return /* @__PURE__ */ React43.createElement(
+  return /* @__PURE__ */ React44.createElement(
     "div",
     {
       ref: domRef,
@@ -9332,7 +9767,7 @@ function GroupResizeHandleFn(props) {
       )}`,
       onPointerDown
     },
-    /* @__PURE__ */ React43.createElement(
+    /* @__PURE__ */ React44.createElement(
       "div",
       {
         style: __spreadValues(__spreadValues({}, style2), props.style),
@@ -9343,7 +9778,7 @@ function GroupResizeHandleFn(props) {
     )
   );
 }
-var GroupResizeHandle = React43.memo(
+var GroupResizeHandle = React44.memo(
   GroupResizeHandleFn
 );
 
@@ -9402,7 +9837,7 @@ function useColumnGroupResizeHandle(groupColumns, config) {
     [computeResizeForDiff]
   );
   const groupResizable = groupColumns.some((c) => c.computedResizable);
-  const resizeHandle = groupResizable ? /* @__PURE__ */ React44.createElement(
+  const resizeHandle = groupResizable ? /* @__PURE__ */ React45.createElement(
     GroupResizeHandle,
     {
       brain: bodyBrain,
@@ -9442,7 +9877,7 @@ function InfiniteTableHeaderGroup(props) {
     (col) => `var(${columnWidthAtIndex5}-${col.computedVisibleIndex})`
   ).join(" + ") + " )" : `var(${columnWidthAtIndex5}-${firstColumn.computedVisibleIndex})`;
   const zIndex2 = `calc(var(${columnZIndexAtIndex6}-${firstColumn.computedVisibleIndex}) + ${columnGroupsMaxDepth - columnGroup.depth})`;
-  return /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React46.createElement(
     "div",
     {
       ref: props.domRef,
@@ -9451,7 +9886,7 @@ function InfiniteTableHeaderGroup(props) {
       style: { width, height },
       "data-z-index": zIndex2
     },
-    /* @__PURE__ */ React45.createElement(
+    /* @__PURE__ */ React46.createElement(
       "div",
       {
         className: join(
@@ -9533,7 +9968,7 @@ function InfiniteTableHeaderFn(props) {
           computedWidth: colGroupItem.computedWidth,
           groupOffset: colGroupItem.groupOffset
         });
-        return /* @__PURE__ */ React46.createElement(
+        return /* @__PURE__ */ React47.createElement(
           InfiniteTableHeaderGroup,
           {
             bodyBrain,
@@ -9546,7 +9981,7 @@ function InfiniteTableHeaderFn(props) {
           }
         );
       }
-      return /* @__PURE__ */ React46.createElement(
+      return /* @__PURE__ */ React47.createElement(
         InfiniteTableHeaderCell,
         {
           domRef: domRef2,
@@ -9570,7 +10005,7 @@ function InfiniteTableHeaderFn(props) {
       showColumnFilters
     ]
   );
-  return /* @__PURE__ */ React46.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React46.createElement(
+  return /* @__PURE__ */ React47.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React47.createElement(
     RawTable,
     {
       name: "header",
@@ -9580,7 +10015,7 @@ function InfiniteTableHeaderFn(props) {
     }
   ));
 }
-var InfiniteTableHeader = React46.memo(
+var InfiniteTableHeader = React47.memo(
   InfiniteTableHeaderFn
 );
 
@@ -9605,7 +10040,7 @@ function TableHeaderWrapper(props) {
   } = tableContextValue;
   const rows = !computedColumnGroups || !computedColumnGroups.size ? 1 : columnGroupsMaxDepth + 2;
   const height = rows * columnHeaderHeight + (showColumnFilters ? columnHeaderHeight : 0);
-  const columnAndGroupTreeInfo = React47.useMemo(() => {
+  const columnAndGroupTreeInfo = React48.useMemo(() => {
     if (!computedColumnGroups || !computedColumnGroups.size) {
       return void 0;
     }
@@ -9616,7 +10051,7 @@ function TableHeaderWrapper(props) {
       columnGroupsMaxDepth
     );
   }, [computedVisibleColumns, computedColumnGroups, columnGroupsDepthsMap]);
-  const cellspan = React47.useCallback(
+  const cellspan = React48.useCallback(
     ({ rowIndex, colIndex }) => {
       const column = computedVisibleColumns[colIndex];
       const rowspan2 = 1;
@@ -9654,15 +10089,15 @@ function TableHeaderWrapper(props) {
       columnGroupsDepthsMap
     ]
   );
-  const rowspan = React47.useCallback(
+  const rowspan = React48.useCallback(
     ({ rowIndex, colIndex }) => cellspan({ rowIndex, colIndex }).rowspan,
     [cellspan]
   );
-  const colspan = React47.useCallback(
+  const colspan = React48.useCallback(
     ({ rowIndex, colIndex }) => cellspan({ rowIndex, colIndex }).colspan,
     [cellspan]
   );
-  const rowHeight = React47.useCallback(
+  const rowHeight = React48.useCallback(
     (index) => {
       return showColumnFilters ? index < rows - 1 ? columnHeaderHeight : 2 * columnHeaderHeight : columnHeaderHeight;
     },
@@ -9684,7 +10119,7 @@ function TableHeaderWrapper(props) {
       fixedColsStart: computedPinnedStartColumns.length
     }
   );
-  const header = /* @__PURE__ */ React47.createElement(
+  const header = /* @__PURE__ */ React48.createElement(
     InfiniteTableHeader,
     {
       columns: computedVisibleColumns,
@@ -9695,7 +10130,7 @@ function TableHeaderWrapper(props) {
       columnAndGroupTreeInfo
     }
   );
-  const verticalScrollbarPlaceholder = scrollbars.vertical && getScrollbarWidth() ? /* @__PURE__ */ React47.createElement(
+  const verticalScrollbarPlaceholder = scrollbars.vertical && getScrollbarWidth() ? /* @__PURE__ */ React48.createElement(
     "div",
     {
       className: HeaderScrollbarPlaceholderCls,
@@ -9705,7 +10140,7 @@ function TableHeaderWrapper(props) {
       }
     }
   ) : null;
-  return /* @__PURE__ */ React47.createElement(
+  return /* @__PURE__ */ React48.createElement(
     "div",
     {
       className: HeaderWrapperCls,
@@ -9719,7 +10154,7 @@ function TableHeaderWrapper(props) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
-import * as React48 from "react";
+import * as React49 from "react";
 import { useEffect as useEffect17 } from "react";
 
 // src/components/utils/decamelize.ts
@@ -9762,11 +10197,11 @@ var enforceStyle = (node, style2) => {
     );
   }
 };
-var InfiniteTableLicenseFooter = React48.forwardRef(
+var InfiniteTableLicenseFooter = React49.forwardRef(
   function InfiniteTableLicenseFooter2(props, ref) {
-    const { rootClassName: rootClassName12 } = useInternalProps();
-    const domRef = React48.useRef(null);
-    const domCallback = React48.useCallback((node) => {
+    const { rootClassName: rootClassName13 } = useInternalProps();
+    const domRef = React49.useRef(null);
+    const domCallback = React49.useCallback((node) => {
       domRef.current = node;
       if (!ref) {
         return;
@@ -9794,13 +10229,13 @@ var InfiniteTableLicenseFooter = React48.forwardRef(
         clearInterval(intervalId);
       };
     }, []);
-    return /* @__PURE__ */ React48.createElement(
+    return /* @__PURE__ */ React49.createElement(
       "div",
       __spreadProps(__spreadValues({
         ref: domCallback
       }, props), {
         className: join(
-          `${rootClassName12}-Footer`,
+          `${rootClassName13}-Footer`,
           FooterCls,
           props.className
         ),
@@ -9808,7 +10243,7 @@ var InfiniteTableLicenseFooter = React48.forwardRef(
       }),
       "Powered by",
       " ",
-      /* @__PURE__ */ React48.createElement(
+      /* @__PURE__ */ React49.createElement(
         "a",
         {
           href: "https://infinite-table.com",
@@ -9823,11 +10258,11 @@ var InfiniteTableLicenseFooter = React48.forwardRef(
 );
 
 // src/components/InfiniteTable/components/LoadMask.tsx
-import * as React49 from "react";
+import * as React50 from "react";
 
 // src/components/InfiniteTable/components/LoadMask.css.ts
-var LoadMaskCls = { visible: "LoadMask_LoadMaskCls_visible__qy58ya1 LoadMask_LoadMaskBaseCls__qy58ya0 utilities_position_absolute__16lm1iw2 utilities_top_0__16lm1iw1b utilities_left_0__16lm1iw1d utilities_right_0__16lm1iw1i utilities_bottom_0__16lm1iw1g", hidden: "LoadMask_LoadMaskCls_hidden__qy58ya2 LoadMask_LoadMaskBaseCls__qy58ya0 utilities_position_absolute__16lm1iw2 utilities_top_0__16lm1iw1b utilities_left_0__16lm1iw1d utilities_right_0__16lm1iw1i utilities_bottom_0__16lm1iw1g" };
-var LoadMaskOverlayCls = "LoadMask_LoadMaskOverlayCls__qy58ya3 utilities_position_absolute__16lm1iw2 utilities_top_0__16lm1iw1b utilities_left_0__16lm1iw1d utilities_right_0__16lm1iw1i utilities_bottom_0__16lm1iw1g";
+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" };
+var LoadMaskOverlayCls = "LoadMask_LoadMaskOverlayCls__qy58ya3 utilities_position_absolute__16lm1iw2 utilities_top_0__16lm1iw1c utilities_left_0__16lm1iw1e utilities_right_0__16lm1iw1j utilities_bottom_0__16lm1iw1h";
 var LoadMaskTextCls = "LoadMask_LoadMaskTextCls__qy58ya4";
 
 // src/components/InfiniteTable/components/LoadMask.tsx
@@ -9835,16 +10270,16 @@ var { rootClassName: rootClassName11 } = internalProps;
 var baseCls3 = `${rootClassName11}-LoadMask`;
 function LoadMaskFn(props) {
   const { visible, children = "Loading" } = props;
-  return /* @__PURE__ */ React49.createElement(
+  return /* @__PURE__ */ React50.createElement(
     "div",
     {
       className: `${LoadMaskCls[visible ? "visible" : "hidden"]} ${baseCls3}`
     },
-    /* @__PURE__ */ React49.createElement("div", { className: `${LoadMaskOverlayCls} ${baseCls3}-Overlay` }),
-    /* @__PURE__ */ React49.createElement("div", { className: `${LoadMaskTextCls} ${baseCls3}-Text` }, children)
+    /* @__PURE__ */ React50.createElement("div", { className: `${LoadMaskOverlayCls} ${baseCls3}-Overlay` }),
+    /* @__PURE__ */ React50.createElement("div", { className: `${LoadMaskTextCls} ${baseCls3}-Text` }, children)
   );
 }
-var LoadMask = React49.memo(LoadMaskFn);
+var LoadMask = React50.memo(LoadMaskFn);
 
 // src/utils/deepClone.ts
 function cloneArray(arr) {
@@ -10516,8 +10951,8 @@ function enhancedFlatten(param) {
 }
 
 // src/components/DataSource/index.tsx
-import * as React50 from "react";
-import { useEffect as useEffect20 } from "react";
+import * as React51 from "react";
+import { useEffect as useEffect20, useLayoutEffect as useLayoutEffect10 } from "react";
 
 // src/utils/multisort/sortTypes.ts
 var numberComparator = function(first, second) {
@@ -11259,6 +11694,15 @@ function useEffectWithChanges(fn, deps) {
     return result;
   }, useEffectDeps);
 }
+function useEffectWithObject(fn, deps) {
+  const useEffectDeps = [];
+  for (const k in deps) {
+    if (deps.hasOwnProperty(k)) {
+      useEffectDeps.push(deps[k]);
+    }
+  }
+  useEffect18(fn, useEffectDeps);
+}
 
 // src/utils/composeFunctions.ts
 function composeFunctions(...fns) {
@@ -13342,7 +13786,8 @@ function useLoadData() {
     livePagination,
     livePaginationCursor,
     filterTypes,
-    cursorId: stateCursorId
+    cursorId: stateCursorId,
+    stateReadyAsDetails
   } = componentState;
   const [scrollbars, setScrollbars] = useState13({
     vertical: false,
@@ -13414,9 +13859,19 @@ function useLoadData() {
   };
   const initialRef = useRef21(true);
   useLazyLoadRange();
+  const masterContext = useMasterDetailContext();
+  const isDetail = !!masterContext;
+  const isDetailRef = useRef21(!!masterContext);
+  isDetailRef.current = isDetail;
+  const isDetailReady = isDetail ? masterContext.shouldRestoreState ? stateReadyAsDetails : true : true;
+  const isDetailReadyRef = useRef21(isDetailReady);
+  isDetailReadyRef.current = isDetailReady;
   useEffectWithChanges(
     () => {
       const componentState2 = getComponentState();
+      if (isDetailRef.current && !isDetailReadyRef.current) {
+        return;
+      }
       if (typeof componentState2.data !== "function") {
         loadData(componentState2.data, componentState2, actions);
       }
@@ -13433,6 +13888,9 @@ function useLoadData() {
           return;
         }
       }
+      if (isDetailRef.current && !isDetailReadyRef.current) {
+        return;
+      }
       const componentState2 = getComponentState();
       if (typeof componentState2.data === "function") {
         loadData(componentState2.data, componentState2, actions, {
@@ -13710,17 +14168,17 @@ var Indexer = class {
 var EMPTY_ARRAY = Object.freeze(
   []
 );
-var normalizeSortInfo = (initialSortInfo, weakMap) => {
+var normalizeSortInfo = (initialSortInfo, weakMap2) => {
   const sortInfo = initialSortInfo != null ? initialSortInfo : EMPTY_ARRAY;
   const result = Array.isArray(sortInfo) ? sortInfo : [sortInfo];
-  if (weakMap && weakMap.has(sortInfo)) {
-    const prevResult = weakMap.get(sortInfo);
+  if (weakMap2 && weakMap2.has(sortInfo)) {
+    const prevResult = weakMap2.get(sortInfo);
     if (prevResult && prevResult.length === result.length) {
       return prevResult;
     }
   }
-  if (weakMap && sortInfo) {
-    weakMap.set(sortInfo, result);
+  if (weakMap2 && sortInfo) {
+    weakMap2.set(sortInfo, result);
   }
   return result;
 };
@@ -13735,9 +14193,14 @@ function initSetupState() {
   return {
     // TODO cleanup indexer on unmount
     indexer: new Indexer(),
+    destroyedRef: {
+      current: false
+    },
     idToIndexMap: /* @__PURE__ */ new Map(),
     // TODO: cleanup cache on unmount
     cache: void 0,
+    detailDataSourcesStateToRestore: /* @__PURE__ */ new Map(),
+    stateReadyAsDetails: false,
     originalDataArrayChanged: false,
     originalDataArrayChangedInfo: {
       timestamp: 0,
@@ -13745,6 +14208,7 @@ function initSetupState() {
     },
     lazyLoadCacheOfLoadedBatches: new DeepMap(),
     dataParams: void 0,
+    onCleanup: buildSubscriptionCallback(),
     notifyScrollbarsChange: buildSubscriptionCallback(),
     notifyScrollStop: buildSubscriptionCallback(),
     notifyRenderRangeChange: buildSubscriptionCallback(),
@@ -13788,11 +14252,16 @@ function getCompareObjectForDataParams(dataParams) {
   delete obj.originalDataArray;
   return obj;
 }
+var EMPTY_ARRAY2 = [];
+var cleanupDataSource = (state) => {
+  state.destroyedRef.current = true;
+};
 var forwardProps3 = (setupState) => {
   return {
     onDataParamsChange: (fn) => fn ? discardCallsWithEqualArg(fn, 100, getCompareObjectForDataParams) : void 0,
     lazyLoad: (lazyLoad) => !!lazyLoad,
     data: 1,
+    debugId: 1,
     pivotBy: 1,
     primaryKey: 1,
     livePagination: 1,
@@ -13831,7 +14300,7 @@ var forwardProps3 = (setupState) => {
     collapseGroupRowsOnDataFunctionChange: (collapseGroupRowsOnDataFunctionChange) => collapseGroupRowsOnDataFunctionChange != null ? collapseGroupRowsOnDataFunctionChange : true,
     loading: (loading) => loading != null ? loading : false,
     sortInfo: (sortInfo) => normalizeSortInfo(sortInfo, setupState.propsCache.get("sortInfo")),
-    groupBy: (groupBy) => groupBy != null ? groupBy : []
+    groupBy: (groupBy) => groupBy != null ? groupBy : EMPTY_ARRAY2
   };
 };
 function getLivePaginationCursorValue(livePaginationCursorProp, state) {
@@ -14073,6 +14542,147 @@ function getInterceptActions() {
     }
   };
 }
+function getDataSourceStateRestoreForDetails(state) {
+  return {
+    originalDataArray: state.originalDataArray,
+    groupRowsState: state.groupRowsState,
+    groupBy: state.groupBy,
+    pivotBy: state.pivotBy,
+    sortInfo: state.sortInfo,
+    filterValue: state.filterValue,
+    livePaginationCursor: state.livePaginationCursor
+  };
+}
+
+// src/utils/FixedSizeMap.ts
+var _FixedSizeMap = class {
+  constructor(clone, size) {
+    this.keysInOrder = [];
+    if (typeof clone === "number") {
+      this.maxSize = clone;
+      this.currentMap = /* @__PURE__ */ new Map();
+    } else {
+      this.maxSize = size != null ? size : _FixedSizeMap.DEFAULT_SIZE;
+      if (clone) {
+        const arr = Array.from(clone);
+        if (this.maxSize < arr.length) {
+          arr.slice(arr.length - this.maxSize);
+        }
+        this.currentMap = /* @__PURE__ */ new Map();
+        arr.forEach(([k, v]) => {
+          this.set(k, v);
+        });
+      } else {
+        this.currentMap = /* @__PURE__ */ new Map();
+      }
+    }
+  }
+  values() {
+    return this.currentMap.values();
+  }
+  get size() {
+    return this.currentMap.size;
+  }
+  delete(key) {
+    if (this.currentMap.has(key)) {
+      this.currentMap.delete(key);
+      this.keysInOrder = this.keysInOrder.filter((k) => k !== key);
+      return true;
+    }
+    return false;
+  }
+  has(key) {
+    return this.currentMap.has(key);
+  }
+  get(key) {
+    return this.currentMap.get(key);
+  }
+  set(key, el) {
+    if (this.has(key)) {
+      this.delete(key);
+    }
+    const canAddCount = this.maxSize - this.currentMap.size;
+    if (canAddCount <= 0) {
+      const [removedKey] = this.keysInOrder.splice(0, 1);
+      if (removedKey != void 0) {
+        this.currentMap.delete(removedKey);
+      }
+    }
+    this.keysInOrder.push(key);
+    this.currentMap.set(key, el);
+    return this;
+  }
+};
+var FixedSizeMap = _FixedSizeMap;
+FixedSizeMap.DEFAULT_SIZE = 10;
+
+// src/components/DataSource/RowDetailsCache.ts
+var RowDetailsNoCacheStorage = class {
+  add(_key, _value) {
+    return;
+  }
+  get(_key) {
+    return void 0;
+  }
+  delete(_key) {
+    return;
+  }
+  has(_key) {
+    return false;
+  }
+};
+var RowDetailsFixedSizeCacheStorage = class {
+  constructor(maxSize) {
+    this.storage = new FixedSizeMap(maxSize);
+  }
+  add(key, value) {
+    this.storage.set(key, value);
+  }
+  get(key) {
+    return this.storage.get(key);
+  }
+  delete(key) {
+    this.storage.delete(key);
+  }
+  has(key) {
+    return this.storage.has(key);
+  }
+};
+var RowDetailsFullCacheStorage = class {
+  constructor() {
+    this.storage = /* @__PURE__ */ new Map();
+  }
+  add(key, value) {
+    this.storage.set(key, value);
+  }
+  get(key) {
+    return this.storage.get(key);
+  }
+  delete(key) {
+    this.storage.delete(key);
+  }
+  has(key) {
+    return this.storage.has(key);
+  }
+};
+var RowDetailsCache = class {
+  // public instanceIndex: number = 0;
+  constructor(cache) {
+    this.cacheStorage = cache === false ? new RowDetailsNoCacheStorage() : cache === true ? new RowDetailsFullCacheStorage() : typeof cache === "number" ? new RowDetailsFixedSizeCacheStorage(cache) : new RowDetailsFixedSizeCacheStorage(5);
+  }
+  add(key, value) {
+    this.cacheStorage.add(key, value);
+  }
+  get(key) {
+    return this.cacheStorage.get(key);
+  }
+  delete(key) {
+    this.cacheStorage.delete(key);
+  }
+  has(key) {
+    return this.cacheStorage.has(key);
+  }
+};
 
 // src/components/DataSource/types.ts
 var DataSourceActionType = /* @__PURE__ */ ((DataSourceActionType2) => {
@@ -14091,7 +14701,7 @@ function DataSourceWithContext(props) {
     var _a;
     (_a = componentState.onReady) == null ? void 0 : _a.call(componentState, api);
   }, []);
-  return /* @__PURE__ */ React50.createElement(React50.Fragment, null, children);
+  return /* @__PURE__ */ React51.createElement(React51.Fragment, null, children);
 }
 var DataSourceRoot = getComponentStateRoot({
   //@ts-ignore
@@ -14105,28 +14715,54 @@ var DataSourceRoot = getComponentStateRoot({
   //@ts-ignore
   onPropChange,
   //@ts-ignore
+  cleanup: cleanupDataSource,
+  //@ts-ignore
   interceptActions: getInterceptActions(),
   //@ts-ignore
   mappedCallbacks: getMappedCallbacks()
 });
-function DataSourceCmp({ children }) {
+function DataSourceCmp({
+  children,
+  isDetail
+}) {
   const DataSourceContext = getDataSourceContext();
-  const { componentState, componentActions } = useComponentState();
+  const masterContext = useMasterDetailContext();
+  const { componentState, componentActions, assignState } = useComponentState();
   const getState = useLatest(componentState);
-  const [api] = React50.useState(() => {
+  const [api] = React51.useState(() => {
     return getDataSourceApi({ getState, actions: componentActions });
   });
   const contextValue = {
     componentState,
     componentActions,
     getState,
+    assignState,
     api
   };
+  useLayoutEffect10(() => {
+    if (masterContext) {
+      masterContext.registerDetail(contextValue);
+    }
+  }, []);
+  useLayoutEffect10(() => {
+    return () => {
+      const state = getState();
+      state.onCleanup(state);
+    };
+  }, []);
   if (false) {
     globalThis.getDataSourceState = getState;
     globalThis.dataSourceActions = componentActions;
     globalThis.dataSourceApi = api;
   }
+  if (false) {
+    globalThis.dataSources = globalThis.dataSources || {};
+    globalThis["dataSources"][componentState.debugId] = {
+      getState,
+      actions: componentActions,
+      api
+    };
+  }
   useLoadData();
   useEffect20(() => {
     var _a;
@@ -14144,10 +14780,11 @@ function DataSourceCmp({ children }) {
       });
     }
   }, [componentState.originalDataArrayChangedInfo]);
-  return /* @__PURE__ */ React50.createElement(DataSourceContext.Provider, { value: contextValue }, /* @__PURE__ */ React50.createElement(DataSourceWithContext, { children }));
+  return /* @__PURE__ */ React51.createElement(DataSourceContext.Provider, { value: contextValue }, /* @__PURE__ */ React51.createElement(DataSourceWithContext, { children }));
 }
 function DataSource(props) {
-  return /* @__PURE__ */ React50.createElement(DataSourceRoot, __spreadValues({}, props), /* @__PURE__ */ React50.createElement(DataSourceCmp, { children: props.children }));
+  const masterContext = useMasterDetailContext();
+  return /* @__PURE__ */ React51.createElement(DataSourceRoot, __spreadValues({}, props), /* @__PURE__ */ React51.createElement(DataSourceCmp, { children: props.children, isDetail: !!masterContext }));
 }
 function useRowInfoReducers() {
   const { rowInfoReducerResults } = useDataSource();
@@ -14382,34 +15019,301 @@ var InfiniteTableCellSelectionApiImpl = class {
       if (options == null ? void 0 : options.clear) {
         this.deselectAll();
       }
-      const cellSelection = this.getDataSourceState().cellSelection;
-      if (!cellSelection) {
+      const cellSelection = this.getDataSourceState().cellSelection;
+      if (!cellSelection) {
+        return;
+      }
+      const newCellSelection = new CellSelectionState(cellSelection);
+      newCellSelection.selectColumn(colId);
+      this.dataSourceActions.cellSelection = newCellSelection;
+    };
+    this.deselectColumn = (colId) => {
+      const cellSelection = this.getDataSourceState().cellSelection;
+      if (!cellSelection) {
+        return;
+      }
+      const newCellSelection = new CellSelectionState(cellSelection);
+      newCellSelection.deselectColumn(colId);
+      this.dataSourceActions.cellSelection = newCellSelection;
+    };
+    this.getComputed = param.getComputed;
+    this.getDataSourceState = param.getDataSourceState;
+    this.dataSourceActions = param.dataSourceActions;
+  }
+};
+function getCellSelectionApi(param) {
+  const cellSelectionApi = new InfiniteTableCellSelectionApiImpl(param);
+  if (false) {
+    globalThis.cellSelectionApi = cellSelectionApi;
+  }
+  return cellSelectionApi;
+}
+
+// src/components/DataSource/BooleanCollectionState.ts
+var BooleanCollectionState = class {
+  constructor(state) {
+    const stateObject = state instanceof Object.getPrototypeOf(this).constructor ? (
+      //@ts-ignore
+      state.getState()
+    ) : state;
+    const positiveItems = this.getPositiveFromState(stateObject);
+    const negativeItems = this.getNegativeFromState(stateObject);
+    this.update({
+      negativeItems,
+      positiveItems
+    });
+  }
+  getInitialState() {
+    return this.initialState;
+  }
+  // protected getState(): BooleanCollectionStateObject<KeyType> {
+  //   return {
+  //     positiveItems: this.allPositive
+  //       ? true
+  //       : this.positiveMap?.topDownKeys() ?? [],
+  //     negativeItems: this.allNegative
+  //       ? true
+  //       : this.negativeMap?.topDownKeys() ?? [],
+  //   };
+  // }
+  destroy() {
+    var _a, _b;
+    (_a = this.positiveMap) == null ? void 0 : _a.clear();
+    (_b = this.negativeMap) == null ? void 0 : _b.clear();
+    delete this.positiveMap;
+    delete this.negativeMap;
+  }
+  update(state) {
+    const { positiveItems, negativeItems } = state;
+    this.allNegative = negativeItems === true;
+    this.allPositive = positiveItems === true;
+    if (this.allNegative && this.allPositive) {
+      throw `Cannot have both negativeItems and positiveItems be true!`;
+    }
+    if (negativeItems && negativeItems !== true) {
+      if (!this.negativeMap) {
+        this.negativeMap = /* @__PURE__ */ new Map();
+      }
+      this.negativeMap.clear();
+      for (let k of negativeItems) {
+        this.negativeMap.set(k, true);
+      }
+      if (this.positiveMap) {
+        this.positiveMap.clear();
+      }
+    }
+    if (positiveItems && positiveItems !== true) {
+      if (!this.positiveMap) {
+        this.positiveMap = /* @__PURE__ */ new Map();
+      }
+      this.positiveMap.clear();
+      for (let k of positiveItems) {
+        this.positiveMap.set(k, true);
+      }
+      if (this.negativeMap) {
+        this.negativeMap.clear();
+      }
+    }
+  }
+  isDefaultNegativeSelection() {
+    return this.allNegative;
+  }
+  isDefaultPositiveSelection() {
+    return this.allPositive;
+  }
+  areAllNegative() {
+    return this.allNegative && (this.positiveMap ? this.positiveMap.size === 0 : true);
+  }
+  areAllPositive() {
+    return this.allPositive && (this.negativeMap ? this.negativeMap.size === 0 : true);
+  }
+  makeAllNegative() {
+    this.update({
+      negativeItems: true,
+      positiveItems: []
+    });
+  }
+  makeAllPositive() {
+    this.update({
+      positiveItems: true,
+      negativeItems: []
+    });
+  }
+  isItemPositive(key) {
+    var _a, _b;
+    if (this.allPositive === true) {
+      if (this.allNegative === true) {
+        throw 'Cannot have both positiveItems and negativeItems be "true"';
+      }
+      return !((_a = this.negativeMap) == null ? void 0 : _a.has(key));
+    }
+    return !!((_b = this.positiveMap) == null ? void 0 : _b.has(key));
+  }
+  isItemNegative(key) {
+    return !this.isItemPositive(key);
+  }
+  setItemValue(key, shouldMakePositive) {
+    var _a;
+    if (shouldMakePositive === this.isItemPositive(key)) {
+      return;
+    }
+    if (shouldMakePositive) {
+      if (this.allNegative === true) {
+        if (!this.positiveMap) {
+          throw `No positiveMap found when trying to set item ${key} be positive`;
+        }
+        this.positiveMap.set(key, true);
+      } else if (this.allPositive === true) {
+        if (!this.negativeMap) {
+          throw `No negativeMap found when trying to set item ${key} be positive`;
+        }
+        this.negativeMap.delete(key);
+      }
+    } else {
+      if (this.allPositive === true) {
+        if (!this.negativeMap) {
+          throw `No negativeMap found when trying to set item ${key} be negative`;
+        }
+        this.negativeMap.set(key, true);
+      } else if (this.allNegative === true) {
+        if (!this.positiveMap) {
+          throw `No positiveMap found when trying to set item ${key} be negative`;
+        }
+        (_a = this.positiveMap) == null ? void 0 : _a.delete(key);
+      }
+    }
+  }
+  makeItemNegative(key) {
+    this.setItemValue(key, false);
+  }
+  makeItemPositive(key) {
+    this.setItemValue(key, true);
+  }
+  toggleItem(key) {
+    this.setItemValue(key, !this.isItemPositive(key));
+  }
+};
+
+// src/components/DataSource/RowDetailsState.ts
+var RowDetailsState = class extends BooleanCollectionState {
+  constructor(state) {
+    super(state);
+    this.isRowDetailsExpanded = (key) => {
+      return !!this.isItemPositive(key);
+    };
+  }
+  getState() {
+    var _a, _b, _c, _d;
+    const expandedRows = this.allPositive ? true : [...(_b = (_a = this.positiveMap) == null ? void 0 : _a.keys()) != null ? _b : []];
+    const collapsedRows = this.allNegative ? true : [...(_d = (_c = this.negativeMap) == null ? void 0 : _c.keys()) != null ? _d : []];
+    return {
+      expandedRows,
+      collapsedRows
+    };
+  }
+  getPositiveFromState(state) {
+    return state.expandedRows;
+  }
+  getNegativeFromState(state) {
+    return state.collapsedRows;
+  }
+  areAllCollapsed() {
+    return this.areAllNegative();
+  }
+  areAllExpanded() {
+    return this.areAllPositive();
+  }
+  collapseAll() {
+    this.makeAllNegative();
+  }
+  expandAll() {
+    this.makeAllPositive();
+  }
+  isRowDetailsCollapsed(key) {
+    return !this.isRowDetailsExpanded(key);
+  }
+  setRowDetailsExpanded(key, shouldExpand) {
+    return this.setItemValue(key, shouldExpand);
+  }
+  collapseRowDetails(key) {
+    this.setRowDetailsExpanded(key, false);
+  }
+  expandRowDetails(key) {
+    this.setRowDetailsExpanded(key, true);
+  }
+  toggleRowDetails(key) {
+    this.toggleItem(key);
+  }
+};
+
+// src/components/InfiniteTable/api/getRowDetailsApi.ts
+function getRowDetailsApi(param) {
+  const {
+    dataSourceApi,
+    getState,
+    actions
+  } = param;
+  const rowDetailsApi = {
+    collapseAllDetails() {
+      actions.rowDetailsState = new RowDetailsState({
+        collapsedRows: true,
+        expandedRows: []
+      });
+    },
+    expandAllDetails() {
+      actions.rowDetailsState = new RowDetailsState({
+        expandedRows: true,
+        collapsedRows: []
+      });
+    },
+    isRowDetailsCollapsed(pk) {
+      const isRowDetailsExpanded = getState().isRowDetailsExpanded;
+      if (!isRowDetailsExpanded) {
+        return true;
+      }
+      const rowInfo = dataSourceApi.getRowInfoByPrimaryKey(pk);
+      if (!rowInfo) {
+        return true;
+      }
+      const expanded = isRowDetailsExpanded(rowInfo);
+      return !expanded;
+    },
+    isRowDetailsExpanded(pk) {
+      return !rowDetailsApi.isRowDetailsCollapsed(pk);
+    },
+    collapseRowDetails(pk) {
+      const currentState = getState().rowDetailsState;
+      if (!currentState) {
+        console.error(
+          `Cannot collapse row details via rowDetailsState, as no props.rowDetailsState is provided.`
+        );
         return;
       }
-      const newCellSelection = new CellSelectionState(cellSelection);
-      newCellSelection.selectColumn(colId);
-      this.dataSourceActions.cellSelection = newCellSelection;
-    };
-    this.deselectColumn = (colId) => {
-      const cellSelection = this.getDataSourceState().cellSelection;
-      if (!cellSelection) {
+      const state = new RowDetailsState(currentState);
+      state.collapseRowDetails(pk);
+      actions.rowDetailsState = state;
+    },
+    expandRowDetails(pk) {
+      const currentState = getState().rowDetailsState;
+      if (!currentState) {
+        console.error(
+          `Cannot expand row details via rowDetailsState, as no props.rowDetailsState is provided.`
+        );
         return;
       }
-      const newCellSelection = new CellSelectionState(cellSelection);
-      newCellSelection.deselectColumn(colId);
-      this.dataSourceActions.cellSelection = newCellSelection;
-    };
-    this.getComputed = param.getComputed;
-    this.getDataSourceState = param.getDataSourceState;
-    this.dataSourceActions = param.dataSourceActions;
-  }
-};
-function getCellSelectionApi(param) {
-  const cellSelectionApi = new InfiniteTableCellSelectionApiImpl(param);
-  if (false) {
-    globalThis.cellSelectionApi = cellSelectionApi;
-  }
-  return cellSelectionApi;
+      const state = new RowDetailsState(currentState);
+      state.expandRowDetails(pk);
+      actions.rowDetailsState = state;
+    },
+    toggleRowDetails(pk) {
+      if (rowDetailsApi.isRowDetailsExpanded(pk)) {
+        rowDetailsApi.collapseRowDetails(pk);
+      } else {
+        rowDetailsApi.expandRowDetails(pk);
+      }
+    }
+  };
+  return rowDetailsApi;
 }
 
 // src/components/InfiniteTable/api/getImperativeApi.ts
@@ -14651,7 +15555,7 @@ var InfiniteTableApiImpl = class {
     };
     this.getCellValues = (cellLocator) => {
       const { rowIndex: index, primaryKey, columnId } = cellLocator;
-      const { dataSourceApi } = this.context;
+      const { dataSourceApi, getState } = this.context;
       const { computedColumnsMap } = this.getComputed();
       const rowIndex = index != null ? index : dataSourceApi.getIndexByPrimaryKey(primaryKey);
       const column = computedColumnsMap.get(columnId);
@@ -14669,11 +15573,14 @@ var InfiniteTableApiImpl = class {
         return null;
       }
       const self = this;
+      const { isRowDetailsEnabled } = getState();
+      const rowDetailsState = !isRowDetailsEnabled || typeof isRowDetailsEnabled === "function" && !isRowDetailsEnabled(rowInfo) ? false : this.rowDetailsApi.isRowDetailsExpanded(rowInfo.id) ? "expanded" : "collapsed";
       const valueContext = getFormattedValueContextForCell({
         column,
         rowInfo,
         columnsMap: computedColumnsMap,
-        context: __spreadProps(__spreadValues({}, this.context), { api: self })
+        context: __spreadProps(__spreadValues({}, this.context), { api: self }),
+        rowDetailState: rowDetailsState
       });
       return {
         value: valueContext.formattedValueContext.value,
@@ -14806,6 +15713,11 @@ var InfiniteTableApiImpl = class {
       dataSourceActions: context.dataSourceActions,
       getDataSourceState: context.getDataSourceState
     });
+    this.rowDetailsApi = getRowDetailsApi({
+      getState: context.getState,
+      actions: context.actions,
+      dataSourceApi: context.dataSourceApi
+    });
     this.cellSelectionApi = getCellSelectionApi({
       dataSourceActions: context.dataSourceActions,
       getDataSourceState: context.getDataSourceState,
@@ -15406,8 +16318,9 @@ function useAutoSizeColumns() {
 }
 
 // src/components/InfiniteTable/hooks/useCellRendering.tsx
-import { useCallback as useCallback19, useEffect as useEffect22, useRef as useRef23 } from "react";
-import * as React51 from "react";
+import { useMemo as useMemo9 } from "react";
+import { useCallback as useCallback19, useEffect as useEffect22, useRef as useRef24 } from "react";
+import * as React53 from "react";
 
 // src/components/InfiniteTable/hooks/useYourBrain.ts
 function useYourBrain(param) {
@@ -15417,10 +16330,11 @@ function useYourBrain(param) {
     computedPinnedEndColumns,
     computedPinnedStartColumns,
     computedVisibleColumns,
+    computedRowHeight,
     columnSize,
-    rowHeight,
     rowspan
   } = param;
+  const rowHeight = computedRowHeight;
   useMatrixBrain(
     brain,
     {
@@ -15442,6 +16356,160 @@ function useYourBrain(param) {
   return brain;
 }
 
+// src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableDetailRow.tsx
+import * as React52 from "react";
+
+// src/components/InfiniteTable/components/rowDetails.css.ts
+var RowDetailsRecipe = createRuntimeFn({ defaultClassName: "rowDetails_RowDetailsRecipe__1qedcqn0", variantClassNames: {}, defaultVariants: {}, compoundVariants: [] });
+
+// src/components/InfiniteTable/components/InfiniteTableRow/useRegisterDetail.ts
+import { useMemo as useMemo8, useRef as useRef23 } from "react";
+function restoreDetailStateForRowId(rowId, options) {
+  const { masterState, detailContext } = options;
+  const detailDataSourcesMap = masterState.detailDataSourcesStateToRestore;
+  if (detailDataSourcesMap.has(rowId)) {
+    const currentCachedState = detailDataSourcesMap.get(
+      rowId
+    );
+    detailContext.assignState(currentCachedState);
+    return true;
+  }
+  return false;
+}
+function updateDetailStateToRestoreForRowId(rowId, options) {
+  const { detailState, masterState, masterActions, cacheEntryForRow } = options;
+  const cacheMap = new Map(masterState.detailDataSourcesStateToRestore);
+  const cacheValue = getDataSourceStateRestoreForDetails(detailState);
+  if (!cacheEntryForRow.all) {
+    if (!cacheEntryForRow.groupBy) {
+      delete cacheValue.groupBy;
+    }
+    if (!cacheEntryForRow.sortInfo) {
+      delete cacheValue.sortInfo;
+    }
+    if (!cacheEntryForRow.filterValue) {
+      delete cacheValue.filterValue;
+    }
+    if (!cacheEntryForRow.data) {
+      delete cacheValue.originalDataArray;
+    }
+  }
+  cacheMap.set(rowId, cacheValue);
+  masterActions.detailDataSourcesStateToRestore = cacheMap;
+}
+function useCurrentRowCache(rowId, rowDetailsCache) {
+  const cacheCalledByRowDetailRenderer = useRef23(false);
+  const currentRowCache = useMemo8(() => {
+    return {
+      getRowId: () => rowId,
+      add: (value) => {
+        cacheCalledByRowDetailRenderer.current = true;
+        rowDetailsCache.add(rowId, value);
+      },
+      get: () => rowDetailsCache.get(rowId),
+      delete: () => {
+        cacheCalledByRowDetailRenderer.current = true;
+        return rowDetailsCache.delete(rowId);
+      },
+      has: () => rowDetailsCache.has(rowId)
+    };
+  }, [rowDetailsCache, rowId]);
+  return { currentRowCache, cacheCalledByRowDetailRenderer };
+}
+function useRegisterDetail(props) {
+  const { rowDetailsCache, rowInfo } = props;
+  const {
+    getState: getMasterDataSourceState,
+    componentActions: masterActions
+  } = useDataSourceContextValue();
+  const { currentRowCache, cacheCalledByRowDetailRenderer } = useCurrentRowCache(rowInfo.id, rowDetailsCache);
+  const masterDetailContextValue = useMemo8(() => {
+    const shouldRestoreState = getMasterDataSourceState().detailDataSourcesStateToRestore.has(
+      rowInfo.id
+    ) && currentRowCache.has();
+    const registerDetail = once(
+      (detailContext) => {
+        if (!cacheCalledByRowDetailRenderer.current) {
+          currentRowCache.add({ all: true });
+        }
+        if (!currentRowCache.has()) {
+          requestAnimationFrame(() => {
+            if (detailContext.componentState.destroyedRef.current) {
+              return;
+            }
+            detailContext.componentActions.stateReadyAsDetails = true;
+          });
+          return;
+        }
+        restoreDetailStateForRowId(rowInfo.id, {
+          masterState: getMasterDataSourceState(),
+          detailContext
+        });
+        requestAnimationFrame(() => {
+          if (detailContext.componentState.destroyedRef.current) {
+            return;
+          }
+          detailContext.componentActions.stateReadyAsDetails = true;
+        });
+        detailContext.componentState.onCleanup.onChange(() => {
+          const cacheEntryForRow = currentRowCache.get();
+          if (!cacheEntryForRow) {
+            return;
+          }
+          updateDetailStateToRestoreForRowId(rowInfo.id, {
+            detailState: detailContext.getState(),
+            masterActions,
+            masterState: getMasterDataSourceState(),
+            cacheEntryForRow
+          });
+        });
+      }
+    );
+    return {
+      registerDetail,
+      shouldRestoreState
+    };
+  }, [rowInfo.id, currentRowCache]);
+  return { masterDetailContextValue, currentRowCache };
+}
+
+// src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableDetailRow.tsx
+var { rootClassName: rootClassName12 } = internalProps;
+var InfiniteTableRowDetailsClassName = `${rootClassName12}ColumnCell`;
+function InfiniteTableDetailRowFn(props) {
+  const DataSourceMasterDetailContext = getDataSourceMasterDetailContext();
+  const {
+    domRef,
+    rowDetailRenderer,
+    rowDetailHeight,
+    rowInfo,
+    detailOffset,
+    rowDetailsCache
+  } = props;
+  const { masterDetailContextValue, currentRowCache } = useRegisterDetail({
+    rowDetailsCache,
+    rowInfo
+  });
+  return /* @__PURE__ */ React52.createElement(DataSourceMasterDetailContext.Provider, { value: masterDetailContextValue }, /* @__PURE__ */ React52.createElement(
+    "div",
+    {
+      ref: domRef,
+      className: join(InfiniteTableRowDetailsClassName, RowDetailsRecipe({})),
+      style: {
+        position: "absolute",
+        top: `${detailOffset}px`,
+        left: 0,
+        width: `calc(${InternalVars.bodyWidth} - ${InternalVars.scrollbarWidthVertical})`,
+        height: rowDetailHeight
+      }
+    },
+    rowDetailRenderer(rowInfo, currentRowCache)
+  ));
+}
+var InfiniteTableDetailRow = React52.memo(
+  InfiniteTableDetailRowFn
+);
+
 // src/components/InfiniteTable/hooks/useCellRendering.tsx
 var SCROLL_BOTTOM_OFFSET = 1;
 function useCellRendering(param) {
@@ -15452,6 +16520,8 @@ function useCellRendering(param) {
     computedPinnedEndColumns,
     computedVisibleColumns,
     computedColumnsMap,
+    computedRowHeight,
+    computedRowSizeCacheForDetails,
     fieldsToColumn,
     rowspan,
     toggleGroupRow,
@@ -15467,12 +16537,17 @@ function useCellRendering(param) {
   const getData = useLatest(dataArray);
   const {
     rowHeight,
+    rowDetailHeight,
     groupRenderStrategy,
     brain,
     showZebraRows,
+    rowDetailRenderer,
+    isRowDetailsExpanded,
+    isRowDetailsEnabled,
     cellClassName,
     cellStyle,
     rowStyle,
+    rowDetailsCache,
     rowClassName,
     onScrollToTop,
     onScrollToBottom,
@@ -15486,12 +16561,12 @@ function useCellRendering(param) {
     computedPinnedStartColumns,
     computedPinnedEndColumns,
     computedVisibleColumns,
-    rowHeight,
+    computedRowHeight,
     dataArray,
     bodySize,
     rowspan
   });
-  const scrollTopMaxRef = useRef23(0);
+  const scrollTopMaxRef = useRef24(0);
   useEffect22(() => {
     return brain.onRenderCountChange(() => {
       scrollTopMaxRef.current = brain.scrollTopMax;
@@ -15560,6 +16635,13 @@ function useCellRendering(param) {
       if (!rowInfo) {
         return null;
       }
+      const rowHeight2 = computedRowSizeCacheForDetails ? computedRowSizeCacheForDetails.getRowHeight(rowIndex) : heightWithRowspan;
+      let rowDetailState = false;
+      if (!isRowDetailsEnabled || typeof isRowDetailsEnabled === "function" && !isRowDetailsEnabled(rowInfo)) {
+        rowDetailState = false;
+      } else if (isRowDetailsExpanded) {
+        rowDetailState = isRowDetailsExpanded(rowInfo) ? "expanded" : "collapsed";
+      }
       const cellProps = {
         getData,
         virtualized: true,
@@ -15569,7 +16651,8 @@ function useCellRendering(param) {
         rowInfo,
         hidden,
         toggleGroupRow,
-        rowHeight: heightWithRowspan,
+        rowHeight: rowHeight2,
+        rowDetailState,
         onMouseEnter,
         onMouseLeave,
         domRef,
@@ -15582,10 +16665,14 @@ function useCellRendering(param) {
         cellStyle,
         cellClassName
       };
-      return /* @__PURE__ */ React51.createElement(InfiniteTableColumnCell, __spreadValues({}, cellProps));
+      return /* @__PURE__ */ React53.createElement(InfiniteTableColumnCell, __spreadValues({}, cellProps));
     },
     [
       rowHeight,
+      rowDetailHeight,
+      computedRowSizeCacheForDetails,
+      computedRowHeight,
+      isRowDetailsExpanded,
       getData,
       computedVisibleColumns,
       computedColumnsMap,
@@ -15600,8 +16687,42 @@ function useCellRendering(param) {
       cellStyle
     ]
   );
+  const renderDetailRow = useMemo9(() => {
+    if (!isRowDetailsExpanded) {
+      return void 0;
+    }
+    return (params) => {
+      const { rowIndex, domRef } = params;
+      const dataArray2 = getData();
+      const rowInfo = dataArray2[rowIndex];
+      if (!rowInfo || !isRowDetailsExpanded(rowInfo) || !computedRowSizeCacheForDetails) {
+        return null;
+      }
+      const { rowDetailHeight: rowDetailHeight2, rowHeight: rowHeight2 } = computedRowSizeCacheForDetails.getSize(rowIndex);
+      return /* @__PURE__ */ React53.createElement(
+        InfiniteTableDetailRow,
+        {
+          rowInfo,
+          rowDetailsCache,
+          rowIndex,
+          domRef,
+          detailOffset: rowHeight2,
+          rowDetailHeight: rowDetailHeight2,
+          rowDetailRenderer
+        }
+      );
+    };
+  }, [
+    ready,
+    renderCell,
+    rowDetailRenderer,
+    rowDetailHeight,
+    isRowDetailsExpanded,
+    rowDetailsCache
+  ]);
   return {
-    renderCell
+    renderCell,
+    renderDetailRow
     // repaintId,
   };
 }
@@ -15922,10 +17043,10 @@ function useColumnGroups() {
 }
 
 // src/components/InfiniteTable/hooks/useColumnRowspan.ts
-import { useMemo as useMemo8 } from "react";
+import { useMemo as useMemo10 } from "react";
 function useColumnRowspan(computedVisibleColumns) {
   const { getState: getDataSourceState } = useDataSourceContextValue();
-  const rowspan = useMemo8(() => {
+  const rowspan = useMemo10(() => {
     const colsWithRowspan = computedVisibleColumns.filter(
       (col) => typeof col.rowspan === "function"
     );
@@ -15970,7 +17091,7 @@ function useColumnSizeFn(columns) {
 }
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
-import { useEffect as useEffect25, useLayoutEffect as useLayoutEffect10, useMemo as useMemo9 } from "react";
+import { useEffect as useEffect25, useLayoutEffect as useLayoutEffect11, useMemo as useMemo11 } from "react";
 
 // src/components/InfiniteTable/state/getInitialState.ts
 import { createRef } from "react";
@@ -16045,9 +17166,11 @@ function getCellSelector(cellPosition) {
   const selector2 = `.${InfiniteTableColumnCellClassName}[data-row-index${cellPosition ? `="${cellPosition.rowIndex}"` : ""}][data-col-index${cellPosition ? `="${cellPosition.colIndex}"` : ""}]`;
   return selector2;
 }
-function initSetupState2() {
+function initSetupState2({
+  debugId
+}) {
   const columnsGeneratedForGrouping = /* @__PURE__ */ new Map();
-  const brain = new MatrixBrain();
+  const brain = new MatrixBrain(debugId);
   const headerBrain = new MatrixBrain("header");
   brain.onScroll((scrollPosition) => {
     headerBrain.setScrollPosition({
@@ -16097,6 +17220,7 @@ function initSetupState2() {
     contextMenu: buildSubscriptionCallback(),
     onFilterOperatorMenuClick: buildSubscriptionCallback(),
     onRowHeightCSSVarChange: buildSubscriptionCallback(),
+    onRowDetailHeightCSSVarChange: buildSubscriptionCallback(),
     onColumnHeaderHeightCSSVarChange: buildSubscriptionCallback(),
     cellClick: buildSubscriptionCallback(),
     cellMouseDown: buildSubscriptionCallback(),
@@ -16123,6 +17247,7 @@ function initSetupState2() {
 }
 var forwardProps4 = (setupState) => {
   return {
+    debugId: 1,
     scrollTopKey: 1,
     components: 1,
     id: 1,
@@ -16155,6 +17280,7 @@ var forwardProps4 = (setupState) => {
     columnDefaultEditable: 1,
     columnDefaultFilterable: 1,
     columnDefaultSortable: 1,
+    rowDetailRenderer: 1,
     rowStyle: 1,
     cellStyle: 1,
     rowProps: 1,
@@ -16172,6 +17298,11 @@ var forwardProps4 = (setupState) => {
     scrollStopDelay: (scrollStopDelay) => scrollStopDelay != null ? scrollStopDelay : 250,
     viewportReservedWidth: (viewportReservedWidth) => viewportReservedWidth != null ? viewportReservedWidth : 0,
     resizableColumns: (resizableColumns) => resizableColumns != null ? resizableColumns : true,
+    rowDetailsCache: (rowDetailsCache) => {
+      return new RowDetailsCache(
+        rowDetailsCache
+      );
+    },
     hideColumnWhenGrouped: (hideColumnWhenGrouped) => hideColumnWhenGrouped != null ? hideColumnWhenGrouped : false,
     columnMinWidth: (columnMinWidth) => columnMinWidth != null ? columnMinWidth : 30,
     columnMaxWidth: (columnMaxWidth) => columnMaxWidth != null ? columnMaxWidth : 5e3,
@@ -16197,7 +17328,8 @@ var forwardProps4 = (setupState) => {
     showZebraRows: (showZebraRows) => showZebraRows != null ? showZebraRows : true,
     showHoverRows: (showHoverRows) => showHoverRows != null ? showHoverRows : true,
     virtualizeColumns: (virtualizeColumns) => virtualizeColumns != null ? virtualizeColumns : true,
-    rowHeight: (rowHeight) => typeof rowHeight === "number" ? rowHeight : 0,
+    rowHeight: (rowHeight) => typeof rowHeight === "number" || typeof rowHeight === "function" ? rowHeight : 0,
+    rowDetailHeight: (rowHeight) => typeof rowHeight === "number" || typeof rowHeight === "function" ? rowHeight : 0,
     columnHeaderHeight: (columnHeaderHeight) => typeof columnHeaderHeight === "number" ? columnHeaderHeight : 30,
     columns: (columns) => toMap(columns, setupState.propsCache.get("columns")),
     columnVisibility: (columnVisibility) => columnVisibility != null ? columnVisibility : {},
@@ -16243,8 +17375,7 @@ var cleanupState = (state) => {
   state.columnMenuTargetRef.current = null;
   state.scrollerDOMRef.current = null;
   state.portalDOMRef.current = null;
-  state.onRowHeightCSSVarChange.destroy();
-  state.onColumnHeaderHeightCSSVarChange.destroy();
+  state.onRowDetailHeightCSSVarChange.destroy();
   state.pinnedEndScrollListener.destroy();
   state.pinnedStartScrollListener.destroy();
 };
@@ -16262,6 +17393,7 @@ function getGroupByMap(groupBy) {
     return acc;
   }, /* @__PURE__ */ new Map());
 }
+var weakMap = /* @__PURE__ */ new WeakMap();
 var mapPropsToState = (params) => {
   var _a, _b, _c, _d;
   const { props, state, oldState, parentState } = params;
@@ -16273,8 +17405,34 @@ var mapPropsToState = (params) => {
     groupBy,
     groupColumn: props.groupColumn
   });
+  let rowDetailsState = void 0;
+  if (props.rowDetailRenderer) {
+    rowDetailsState = props.rowDetailsState || state.rowDetailsState || props.defaultRowDetailsState;
+    if (rowDetailsState && !(rowDetailsState instanceof RowDetailsState)) {
+      rowDetailsState = new RowDetailsState(rowDetailsState);
+    }
+    rowDetailsState = rowDetailsState || new RowDetailsState({ expandedRows: [], collapsedRows: true });
+  }
   const computedColumns = state.columnsWhenGrouping || state.columnsWhenInlineGroupRenderStrategy || state.columns;
+  let isRowDetailsExpanded = rowDetailsState ? props.isRowDetailsExpanded : void 0;
+  if (!isRowDetailsExpanded && rowDetailsState) {
+    isRowDetailsExpanded = weakMap.get(rowDetailsState);
+    if (!isRowDetailsExpanded) {
+      isRowDetailsExpanded = (rowInfo) => {
+        return rowDetailsState.isRowDetailsExpanded(
+          rowInfo.id
+        );
+      };
+      if (typeof rowDetailsState === "object") {
+        weakMap.set(rowDetailsState, isRowDetailsExpanded);
+      }
+    }
+  }
+  const isRowDetailsEnabled = !props.rowDetailRenderer ? false : props.isRowDetailsEnabled || true;
   return {
+    rowDetailsState,
+    isRowDetailsExpanded,
+    isRowDetailsEnabled,
     showColumnFilters: (_a = props.showColumnFilters) != null ? _a : !!parentState.filterValue,
     controlledColumnVisibility: !!props.columnVisibility,
     groupRenderStrategy,
@@ -16287,6 +17445,7 @@ var mapPropsToState = (params) => {
     columnGroupsMaxDepth: columnGroupsDepthsMap != state.columnGroupsDepthsMap ? Math.max(...columnGroupsDepthsMap.values(), 0) : state.columnGroupsMaxDepth,
     computedColumnGroups,
     rowHeightCSSVar: typeof props.rowHeight === "string" ? props.rowHeight : "",
+    rowDetailHeightCSSVar: typeof props.rowDetailHeight === "string" ? props.rowDetailHeight : "",
     columnHeaderHeightCSSVar: typeof props.columnHeaderHeight === "string" ? props.columnHeaderHeight || ThemeVars.components.Header.columnHeaderHeight : ""
   };
 };
@@ -16419,7 +17578,7 @@ function useToggleGroupRow() {
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
 function useGroupByMap(groupBy) {
-  return useMemo9(() => getGroupByMap(groupBy), [groupBy]);
+  return useMemo11(() => getGroupByMap(groupBy), [groupBy]);
 }
 function useColumnsWhen() {
   const {
@@ -16632,7 +17791,7 @@ function useHideColumns(groupByMap) {
       groupRenderStrategy
     }
   } = useComponentState();
-  useLayoutEffect10(() => {
+  useLayoutEffect11(() => {
     if (groupRenderStrategy !== "multi-column") {
       return;
     }
@@ -16826,7 +17985,7 @@ function getColumnsWhenGrouping(params) {
 }
 
 // src/components/InfiniteTable/hooks/useComputedColumns.ts
-import { useMemo as useMemo10 } from "react";
+import { useMemo as useMemo12 } from "react";
 
 // src/components/InfiniteTable/hooks/useRerenderOnKeyChange.ts
 import { useEffect as useEffect26 } from "react";
@@ -16895,7 +18054,7 @@ var useComputedColumns = ({
     computedColumnsMap,
     computedColumnsMapInInitialOrder,
     fieldsToColumn
-  } = useMemo10(() => {
+  } = useMemo12(() => {
     return getComputedColumns({
       columns,
       scrollbarWidth: scrollbarWidth2,
@@ -16978,8 +18137,111 @@ var useComputedColumns = ({
   return result;
 };
 
+// src/components/InfiniteTable/hooks/useComputedRowHeight.ts
+import { useMemo as useMemo13 } from "react";
+var RowSizeCache = class {
+  constructor() {
+    this.rowHeight = /* @__PURE__ */ new Map();
+    this.rowDetailHeight = /* @__PURE__ */ new Map();
+    this.getRowHeight = (index) => {
+      var _a;
+      return (_a = this.rowHeight.get(index)) != null ? _a : 0;
+    };
+    this.getRowDetailHeight = (index) => {
+      var _a;
+      return (_a = this.rowDetailHeight.get(index)) != null ? _a : 0;
+    };
+  }
+  getTotalRowHeight(index) {
+    return this.getRowHeight(index) + this.getRowDetailHeight(index);
+  }
+  getSize(index) {
+    const rowHeight = this.getRowHeight(index);
+    const rowDetailHeight = this.getRowDetailHeight(index);
+    return {
+      rowHeight,
+      rowDetailHeight,
+      totalRowHeight: rowHeight + rowDetailHeight
+    };
+  }
+};
+function getComputedRowHeight(param, cache) {
+  const initialRowDetailHeight = param.rowDetailHeight;
+  const initialRowHeight = param.rowHeight;
+  const { isRowDetailsExpanded, isRowDetailsEnabled, getDataSourceState } = param;
+  if (!isRowDetailsExpanded) {
+    if (typeof initialRowHeight === "function") {
+      return (index) => {
+        if (cache && cache.rowHeight.has(index)) {
+          return cache.rowHeight.get(index);
+        }
+        const item = getDataSourceState().dataArray[index];
+        const result2 = !item ? 0 : initialRowHeight(item);
+        if (cache) {
+          cache.rowHeight.set(index, result2);
+        }
+        return result2;
+      };
+    }
+    return initialRowHeight;
+  }
+  const rowHeightAsFn = typeof initialRowHeight === "function";
+  const rowDetailHeightAsFn = typeof initialRowDetailHeight === "function";
+  const result = (index) => {
+    if (cache && cache.rowHeight.has(index) && cache.rowDetailHeight.has(index)) {
+      const result2 = cache.rowHeight.get(index) + cache.rowDetailHeight.get(index);
+      return result2;
+    }
+    const item = getDataSourceState().dataArray[index];
+    if (!item) {
+      if (cache) {
+        cache.rowHeight.set(index, 0);
+        cache.rowDetailHeight.set(index, 0);
+      }
+      return 0;
+    }
+    const rowHeight = rowHeightAsFn ? initialRowHeight(item) : initialRowHeight;
+    const expandable = !isRowDetailsEnabled || typeof isRowDetailsEnabled === "function" && isRowDetailsEnabled(item) === false ? false : true;
+    if (!expandable || !isRowDetailsExpanded(item)) {
+      if (cache) {
+        cache.rowHeight.set(index, rowHeight);
+        cache.rowDetailHeight.set(index, 0);
+      }
+      return rowHeight;
+    }
+    let rowDetailHeight = 0;
+    if (rowDetailHeightAsFn) {
+      rowDetailHeight = initialRowDetailHeight(item);
+    } else {
+      rowDetailHeight = initialRowDetailHeight;
+    }
+    if (cache) {
+      cache.rowHeight.set(index, rowHeight);
+      cache.rowDetailHeight.set(index, rowDetailHeight);
+    }
+    return rowHeight + rowDetailHeight;
+  };
+  return result;
+}
+function useComputedRowHeight(param) {
+  return useMemo13(() => {
+    const computedRowSizeCache = new RowSizeCache();
+    const computedRowHeight = getComputedRowHeight(param, computedRowSizeCache);
+    return {
+      computedRowHeight,
+      computedRowSizeCacheForDetails: param.isRowDetailsExpanded ? computedRowSizeCache : void 0
+    };
+  }, [
+    param.rowHeight,
+    param.rowDetailHeight,
+    param.isRowDetailsExpanded,
+    param.isRowDetailsEnabled,
+    param.getDataSourceState
+  ]);
+}
+
 // src/components/InfiniteTable/hooks/useScrollbars.ts
-import { useState as useState16, useEffect as useEffect27, useLayoutEffect as useLayoutEffect11 } from "react";
+import { useState as useState16, useEffect as useEffect27, useLayoutEffect as useLayoutEffect12 } from "react";
 var INITIAL_SCROLLBARS = {
   vertical: false,
   horizontal: false
@@ -16997,7 +18259,7 @@ function useScrollbars(brain) {
       });
     });
   }, [brain]);
-  useLayoutEffect11(() => {
+  useLayoutEffect12(() => {
     const dataSourceState = getDataSourceState();
     const { onScrollbarsChange } = getInfiniteTableState();
     const { notifyScrollbarsChange } = dataSourceState;
@@ -17029,14 +18291,23 @@ function useComputed() {
     columnDefaultEditable,
     columnDefaultFilterable,
     columnTypes,
+    rowHeight,
+    rowDetailHeight,
+    isRowDetailsExpanded,
+    isRowDetailsEnabled,
     brain,
     bodySize,
     showSeparatePivotColumnForSingleAggregation
   } = componentState;
   useState17(() => {
-    componentState.onRowHeightCSSVarChange.onChange((rowHeight) => {
-      if (rowHeight) {
-        componentActions.rowHeight = rowHeight;
+    componentState.onRowHeightCSSVarChange.onChange((rowHeight2) => {
+      if (rowHeight2) {
+        componentActions.rowHeight = rowHeight2;
+      }
+    });
+    componentState.onRowDetailHeightCSSVarChange.onChange((rowDetailHeight2) => {
+      if (rowDetailHeight2) {
+        componentActions.rowDetailHeight = rowDetailHeight2;
       }
     });
     componentState.onColumnHeaderHeightCSSVarChange.onChange(
@@ -17131,9 +18402,18 @@ function useComputed() {
       }
     });
   });
+  const { computedRowHeight, computedRowSizeCacheForDetails } = useComputedRowHeight({
+    rowDetailHeight,
+    rowHeight,
+    isRowDetailsExpanded,
+    isRowDetailsEnabled,
+    getDataSourceState
+  });
   return {
     multiRowSelector,
     multiCellSelector,
+    computedRowSizeCacheForDetails,
+    computedRowHeight,
     scrollbars,
     columnSize,
     rowspan,
@@ -17163,7 +18443,7 @@ function useComputed() {
 }
 
 // src/components/InfiniteTable/hooks/useLicense/useLicense.ts
-import { useMemo as useMemo11 } from "react";
+import { useMemo as useMemo14 } from "react";
 
 // src/components/InfiniteTable/hooks/useLicense/crc32.ts
 var DEFAULT_ReversedPolynomial = 3988292384;
@@ -17332,10 +18612,10 @@ var isInsideSandbox = () => {
 };
 var isInsidePlayground = isInsideSandbox() || isInsideSandpack();
 var useLicense = (licenseKey = "") => {
-  const valid = useMemo11(() => {
+  const valid = useMemo14(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "3.1.6"
+      version: "3.2.0"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -17346,11 +18626,11 @@ var useLicense = (licenseKey = "") => {
 };
 
 // src/components/InfiniteTable/hooks/useScrollToActiveCell.ts
-import { useRef as useRef24, useEffect as useEffect29 } from "react";
+import { useRef as useRef25, useEffect as useEffect29 } from "react";
 var RETRIES = 10;
 function useScrollToActiveCell(activeCellIndex, dataCount, imperativeApi) {
-  const didScrollRef = useRef24(false);
-  const rafId = useRef24(null);
+  const didScrollRef = useRef25(false);
+  const rafId = useRef25(null);
   useEffect29(() => {
     if (activeCellIndex != null) {
       didScrollRef.current = false;
@@ -17385,11 +18665,11 @@ function useScrollToActiveCell(activeCellIndex, dataCount, imperativeApi) {
 }
 
 // src/components/InfiniteTable/hooks/useScrollToActiveRow.ts
-import { useRef as useRef25, useEffect as useEffect30 } from "react";
+import { useRef as useRef26, useEffect as useEffect30 } from "react";
 var RETRIES2 = 10;
 function useScrollToActiveRow(activeRowIndex, dataCount, imperativeApi) {
-  const didScrollRef = useRef25(false);
-  const rafId = useRef25(null);
+  const didScrollRef = useRef26(false);
+  const rafId = useRef26(null);
   useEffect30(() => {
     if (activeRowIndex != null) {
       didScrollRef.current = false;
@@ -17425,7 +18705,7 @@ function useScrollToActiveRow(activeRowIndex, dataCount, imperativeApi) {
 var toCSSVarName = (value) => `--infinite-${value}`;
 
 // src/components/InfiniteTable/eventHandlers/index.ts
-import { useCallback as useCallback22, useMemo as useMemo12, useEffect as useEffect31 } from "react";
+import { useCallback as useCallback22, useMemo as useMemo15, useEffect as useEffect31 } from "react";
 
 // src/components/InfiniteTable/eventHandlers/onCellClick.ts
 function onCellClick(context, event) {
@@ -17873,7 +19153,7 @@ var RETRIES3 = 10;
 var SORT_ASC2 = (a, b) => a - b;
 function isCellFocusable(cellPos, context) {
   const { getComputed, getDataSourceState, getState, api, dataSourceApi } = context;
-  const { editingCell } = getState();
+  const { editingCell, isRowDetailsEnabled } = getState();
   const { dataArray } = getDataSourceState();
   const { computedVisibleColumns, computedColumnsMap } = getComputed();
   const column = computedVisibleColumns[cellPos.colIndex];
@@ -17889,14 +19169,17 @@ function isCellFocusable(cellPos, context) {
   if (column.contentFocusable === true) {
     return true;
   }
+  const rowInfo = dataArray[cellPos.rowIndex];
+  const rowDetailState = !isRowDetailsEnabled || typeof isRowDetailsEnabled === "function" && !isRowDetailsEnabled(rowInfo) ? false : api.rowDetailsApi.isRowDetailsExpanded(rowInfo.id) ? "expanded" : "collapsed";
   const columnApi = getColumnApiForColumn(column.id, context);
   return column.contentFocusable(__spreadProps(__spreadValues({
     column
   }, getFormattedValueContextForCell({
     column,
-    rowInfo: dataArray[cellPos.rowIndex],
+    rowInfo,
     columnsMap: computedColumnsMap,
-    context
+    context,
+    rowDetailState
   }).formattedValueContext), {
     columnApi,
     api,
@@ -18144,7 +19427,7 @@ function useEventHandlersContext() {
     componentActions: dataSourceActions,
     api: dataSourceApi
   } = useDataSourceContextValue();
-  const context = useMemo12(() => {
+  const context = useMemo15(() => {
     const context2 = {
       getComputed,
       dataSourceApi,
@@ -18229,11 +19512,11 @@ function useDOMEventHandlers() {
 import { useEffect as useEffect35 } from "react";
 
 // src/components/hooks/useOverlay/index.tsx
-import * as React52 from "react";
+import * as React54 from "react";
 import {
   useCallback as useCallback23,
   useEffect as useEffect33,
-  useLayoutEffect as useLayoutEffect12,
+  useLayoutEffect as useLayoutEffect13,
   useState as useState18
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
@@ -18620,10 +19903,10 @@ function retrieveElement(elementGetter) {
   });
 }
 function DefaultOverlayPortal(props) {
-  return /* @__PURE__ */ React52.createElement("div", { style: { position: "fixed", top: 0, left: 0 } }, props.children);
+  return /* @__PURE__ */ React54.createElement("div", { style: { position: "fixed", top: 0, left: 0 } }, props.children);
 }
 function OverlayContent(props) {
-  const nodeRef = React52.useRef(null);
+  const nodeRef = React54.useRef(null);
   useEffect33(() => {
     return props.realign.onChange((handle) => {
       if (nodeRef.current && handle) {
@@ -18631,7 +19914,7 @@ function OverlayContent(props) {
       }
     });
   }, [props.realign]);
-  return /* @__PURE__ */ React52.createElement(
+  return /* @__PURE__ */ React54.createElement(
     "div",
     {
       style: { position: "absolute", top: 0, left: 0 },
@@ -18686,7 +19969,7 @@ function alignOverlayNode(node, params) {
 }
 function useOverlayPortal(content, portalContainer) {
   const [container, setContainer] = useState18(null);
-  useLayoutEffect12(() => {
+  useLayoutEffect13(() => {
     function getContainer() {
       return __async(this, null, function* () {
         const container2 = portalContainer ? yield retrieveElement(portalContainer) : null;
@@ -18702,22 +19985,22 @@ function useOverlayPortal(content, portalContainer) {
   }, [portalContainer]);
   return portalContainer ? container ? createPortal2(content, container) : (
     // we're probably still fetching the container
-    /* @__PURE__ */ React52.createElement(React52.Fragment, null)
-  ) : portalContainer === null || portalContainer === false ? content : /* @__PURE__ */ React52.createElement(DefaultOverlayPortal, null, content);
+    /* @__PURE__ */ React54.createElement(React54.Fragment, null)
+  ) : portalContainer === null || portalContainer === false ? content : /* @__PURE__ */ React54.createElement(DefaultOverlayPortal, null, content);
 }
 function getIdForReactOnlyChild(children) {
-  if (React52.Children.count(children) === 1) {
-    const child = React52.Children.only(children);
-    if (React52.isValidElement(child)) {
+  if (React54.Children.count(children) === 1) {
+    const child = React54.Children.only(children);
+    if (React54.isValidElement(child)) {
       return child.props.id || child.key;
     }
   }
   return null;
 }
 function injectPortalContainerAndConstrainInMenuChild(children, portalContainer, constrainTo) {
-  if (React52.Children.count(children) === 1) {
-    const child = React52.Children.only(children);
-    if (React52.isValidElement(child) && child.props[propToIdentifyMenu]) {
+  if (React54.Children.count(children) === 1) {
+    const child = React54.Children.only(children);
+    if (React54.isValidElement(child) && child.props[propToIdentifyMenu]) {
       const newProps = {};
       if (child.props.portalContainer === void 0) {
         newProps.portalContainer = portalContainer;
@@ -18725,7 +20008,7 @@ function injectPortalContainerAndConstrainInMenuChild(children, portalContainer,
       if (child.props.constrainTo === void 0) {
         newProps.constrainTo = constrainTo;
       }
-      return React52.cloneElement(child, newProps);
+      return React54.cloneElement(child, newProps);
     }
   }
   return children;
@@ -18741,7 +20024,7 @@ function useOverlay(params) {
     const contentForPortal = [];
     for (const [_2, handle] of handles) {
       contentForPortal.push(
-        /* @__PURE__ */ React52.createElement(OverlayContent, __spreadProps(__spreadValues({}, handle), { key: handle.key }))
+        /* @__PURE__ */ React54.createElement(OverlayContent, __spreadProps(__spreadValues({}, handle), { key: handle.key }))
       );
     }
     return contentForPortal;
@@ -18786,7 +20069,7 @@ function useOverlay(params) {
     },
     [handles, rootParams.portalContainer, updateContent]
   );
-  React52.useEffect(() => {
+  React54.useEffect(() => {
     if (handleToRealign) {
       const handle = handles.get(handleToRealign);
       if (handle) {
@@ -18805,7 +20088,7 @@ function useOverlay(params) {
     handles.clear();
     updateContent();
   };
-  React52.useEffect(() => {
+  React54.useEffect(() => {
   }, []);
   return {
     portal,
@@ -18817,27 +20100,27 @@ function useOverlay(params) {
 }
 
 // src/components/InfiniteTable/utils/getMenuForColumn.tsx
-import * as React58 from "react";
+import * as React60 from "react";
 
 // src/components/Menu/index.tsx
-import * as React56 from "react";
+import * as React58 from "react";
 
 // src/components/Menu/getMenuState.tsx
-import * as React54 from "react";
+import * as React56 from "react";
 
 // src/components/Menu/childrenToRuntimeItems.tsx
-import * as React53 from "react";
+import * as React55 from "react";
 
 // src/components/Menu/MenuCls.css.ts
-var MenuCls = "MenuCls_MenuCls__db3arf0 utilities_boxSizingBorderBox__16lm1iw0 utilities_position_relative__16lm1iw1 utilities_display_inlineGrid__16lm1iw15 utilities_flexFlow_column__16lm1iw1l utilities_margin_none__16lm1iw8";
-var MenuItemCls = createRuntimeFn({ defaultClassName: "MenuCls_MenuItemCls__db3arf2 utilities_display_flex__16lm1iwy utilities_alignItems_center__16lm1iw1p utilities_userSelect_none__16lm1iw16", variantClassNames: { disabled: { true: "MenuCls_MenuItemCls_disabled_true__db3arf3 utilities_cursor_default__16lm1iwi utilities_userSelect_none__16lm1iw16", false: "utilities_cursor_pointer__16lm1iwh" }, active: { true: "MenuCls_MenuItemCls_active_true__db3arf5", false: "MenuCls_MenuItemCls_active_false__db3arf6" }, pressed: { false: "MenuCls_MenuItemCls_pressed_false__db3arf7", true: "MenuCls_MenuItemCls_pressed_true__db3arf8" }, keyboardActive: { true: "MenuCls_MenuItemCls_keyboardActive_true__db3arf9", false: "MenuCls_MenuItemCls_keyboardActive_false__db3arfa" } }, defaultVariants: {}, compoundVariants: [[{ active: true, disabled: false }, "MenuCls_MenuItemCls_compound_0__db3arfb"], [{ pressed: true, active: true, disabled: false }, "MenuCls_MenuItemCls_compound_1__db3arfc"]] });
+var MenuCls = "MenuCls_MenuCls__db3arf0 utilities_boxSizingBorderBox__16lm1iw0 utilities_position_relative__16lm1iw1 utilities_display_inlineGrid__16lm1iw16 utilities_flexFlow_column__16lm1iw1m utilities_margin_none__16lm1iw8";
+var MenuItemCls = createRuntimeFn({ defaultClassName: "MenuCls_MenuItemCls__db3arf2 utilities_display_flex__16lm1iwz utilities_alignItems_center__16lm1iw1q utilities_userSelect_none__16lm1iw17", variantClassNames: { disabled: { true: "MenuCls_MenuItemCls_disabled_true__db3arf3 utilities_cursor_default__16lm1iwj utilities_userSelect_none__16lm1iw17", false: "utilities_cursor_pointer__16lm1iwi" }, active: { true: "MenuCls_MenuItemCls_active_true__db3arf5", false: "MenuCls_MenuItemCls_active_false__db3arf6" }, pressed: { false: "MenuCls_MenuItemCls_pressed_false__db3arf7", true: "MenuCls_MenuItemCls_pressed_true__db3arf8" }, keyboardActive: { true: "MenuCls_MenuItemCls_keyboardActive_true__db3arf9", false: "MenuCls_MenuItemCls_keyboardActive_false__db3arfa" } }, defaultVariants: {}, compoundVariants: [[{ active: true, disabled: false }, "MenuCls_MenuItemCls_compound_0__db3arfb"], [{ pressed: true, active: true, disabled: false }, "MenuCls_MenuItemCls_compound_1__db3arfc"]] });
 var MenuRowCls = "MenuCls_MenuRowCls__db3arf1";
 var MenuSeparatorCls = "MenuCls_MenuSeparatorCls__db3arfd";
 
 // src/components/Menu/childrenToRuntimeItems.tsx
 var SEPARATOR = "-";
 function MenuSeparator() {
-  return /* @__PURE__ */ React53.createElement("hr", { className: MenuSeparatorCls });
+  return /* @__PURE__ */ React55.createElement("hr", { className: MenuSeparatorCls });
 }
 var toRuntimeItem = ({
   columns,
@@ -18846,7 +20129,7 @@ var toRuntimeItem = ({
   menuId
 }, item) => {
   const menuItem = item && (item.key != null || item.label != null) ? item : null;
-  const menuDecoration = menuItem === null ? item === SEPARATOR ? /* @__PURE__ */ React53.createElement(MenuSeparator, null) : item : null;
+  const menuDecoration = menuItem === null ? item === SEPARATOR ? /* @__PURE__ */ React55.createElement(MenuSeparator, null) : item : null;
   const runtimeItem = menuItem != null ? {
     type: "item",
     parentMenuId: menuId,
@@ -18874,7 +20157,7 @@ var toRuntimeItem = ({
   return runtimeItem;
 };
 function childrenToRuntimeItems(context, children) {
-  return React53.Children.map(children, (child) => {
+  return React55.Children.map(children, (child) => {
     if (child == null ? void 0 : child.props.__is_menu_item) {
       const itemProps = __spreadValues({}, child.props);
       if (!itemProps.key) {
@@ -18895,7 +20178,7 @@ function childrenToRuntimeItems(context, children) {
 // src/components/Menu/getMenuState.tsx
 var SUBMENU_COL_NAME = "submenu";
 function getInitialMenuState() {
-  const domRef = React54.createRef();
+  const domRef = React56.createRef();
   return {
     keyboardActiveItemKey: null,
     activeItemKey: null,
@@ -18950,7 +20233,7 @@ var deriveStateFromProps2 = (params) => {
       columns.push({
         name: SUBMENU_COL_NAME,
         render: ({ domProps, item }) => {
-          return item.menu ? /* @__PURE__ */ React54.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React54.createElement(ExpanderIcon, { expanded: false })) : /* @__PURE__ */ React54.createElement("div", __spreadValues({}, domProps));
+          return item.menu ? /* @__PURE__ */ React56.createElement("div", __spreadValues({}, domProps), /* @__PURE__ */ React56.createElement(ExpanderIcon, { expanded: false })) : /* @__PURE__ */ React56.createElement("div", __spreadValues({}, domProps));
         }
       });
     }
@@ -18967,11 +20250,11 @@ var deriveStateFromProps2 = (params) => {
 };
 
 // src/components/Menu/Menu.tsx
-import * as React55 from "react";
+import * as React57 from "react";
 import {
   useCallback as useCallback25,
-  useLayoutEffect as useLayoutEffect13,
-  useRef as useRef28,
+  useLayoutEffect as useLayoutEffect14,
+  useRef as useRef29,
   useState as useState20
 } from "react";
 
@@ -19192,17 +20475,17 @@ var MenuTriangleContext = class {
 };
 
 // src/components/Menu/MenuContext.ts
-import { createContext as createContext6, useContext as useContext8 } from "react";
-var MenuContext = createContext6(null);
+import { createContext as createContext7, useContext as useContext8 } from "react";
+var MenuContext = createContext7(null);
 function useMenuContext() {
   const contextValue = useContext8(MenuContext);
   return contextValue;
 }
 
 // src/components/hooks/useMounted.ts
-import { useCallback as useCallback24, useEffect as useEffect34, useRef as useRef27 } from "react";
+import { useCallback as useCallback24, useEffect as useEffect34, useRef as useRef28 } from "react";
 function useMounted() {
-  let mountedRef = useRef27(true);
+  let mountedRef = useRef28(true);
   useEffect34(() => {
     mountedRef.current = true;
     return () => {
@@ -19232,7 +20515,7 @@ function renderSubmenuForItem(item, config) {
   if (typeof itemMenu === "function") {
     itemMenu = itemMenu();
   }
-  return /* @__PURE__ */ React55.createElement(
+  return /* @__PURE__ */ React57.createElement(
     Menu,
     __spreadProps(__spreadValues({
       key: overlayId,
@@ -19371,7 +20654,7 @@ function MenuComponent(props) {
   const isMounted = useMounted();
   const [submenuApi, setSubmenuApi] = useState20(null);
   let renderedChildren = null;
-  useLayoutEffect13(() => {
+  useLayoutEffect14(() => {
     const { runtimeItems: runtimeItems2 } = getState();
     const activeItem = runtimeItems2.filter(
       (item) => item.type === "item" && activeItemKey === item.key
@@ -19445,7 +20728,7 @@ function MenuComponent(props) {
       setActiveItemKey(key);
     }
   });
-  renderedChildren = runtimeItems.map((runtimeItem, index) => /* @__PURE__ */ React55.createElement(
+  renderedChildren = runtimeItems.map((runtimeItem, index) => /* @__PURE__ */ React57.createElement(
     RuntimeItemRenderer,
     {
       key: runtimeItem.type === "item" ? runtimeItem.key : index,
@@ -19593,7 +20876,7 @@ function MenuComponent(props) {
       }
     });
   }, []);
-  const shouldSelectFirstItemOnFocus = useRef28(true);
+  const shouldSelectFirstItemOnFocus = useRef29(true);
   const hideAll = useCallback25(() => {
     var _a;
     const state = getState();
@@ -19630,7 +20913,7 @@ function MenuComponent(props) {
       domRef.current = node;
     }
   }, []);
-  const result = /* @__PURE__ */ React55.createElement("div", { className: display.contents }, /* @__PURE__ */ React55.createElement(
+  const result = /* @__PURE__ */ React57.createElement("div", { className: display.contents }, /* @__PURE__ */ React57.createElement(
     "div",
     __spreadProps(__spreadValues({}, domProps), {
       "data-menu-id": menuId,
@@ -19662,12 +20945,12 @@ function MenuComponent(props) {
   return destroyed ? null : result;
 }
 function RuntimeItemRenderer(props) {
-  const [pressed, setPressed] = React55.useState(false);
+  const [pressed, setPressed] = React57.useState(false);
   const { columns, item, index, active, keyboardActive } = props;
   const key = item.type === "item" ? item.value.key : index;
   let content = null;
   if (item.type === "decoration") {
-    content = /* @__PURE__ */ React55.createElement("div", { style: item.style }, item.value);
+    content = /* @__PURE__ */ React57.createElement("div", { style: item.style }, item.value);
   } else {
     let spanIndex = 0;
     content = columns.map((col, i) => {
@@ -19728,7 +21011,7 @@ function RuntimeItemRenderer(props) {
           }
         }
       };
-      return col.render ? /* @__PURE__ */ React55.createElement(
+      return col.render ? /* @__PURE__ */ React57.createElement(
         RenderHookComponent,
         {
           key: `${key}-${field}`,
@@ -19740,10 +21023,10 @@ function RuntimeItemRenderer(props) {
             domProps
           }
         }
-      ) : /* @__PURE__ */ React55.createElement("div", __spreadValues({ key: `${key}-${field}` }, domProps), target[field]);
+      ) : /* @__PURE__ */ React57.createElement("div", __spreadValues({ key: `${key}-${field}` }, domProps), target[field]);
     }).filter(Boolean);
   }
-  return /* @__PURE__ */ React55.createElement("div", { className: MenuRowCls }, content);
+  return /* @__PURE__ */ React57.createElement("div", { className: MenuRowCls }, content);
 }
 function MenuItem(_props) {
   return null;
@@ -19763,12 +21046,12 @@ var MenuRoot = getComponentStateRoot({
 function MenuContextProvider(props) {
   const { componentActions, componentState } = useComponentState();
   const getState = useLatest(componentState);
-  return /* @__PURE__ */ React56.createElement(
+  return /* @__PURE__ */ React58.createElement(
     MenuContext.Provider,
     {
       value: { componentActions, componentState, getState }
     },
-    /* @__PURE__ */ React56.createElement(MenuComponent, { domProps: props.domProps })
+    /* @__PURE__ */ React58.createElement(MenuComponent, { domProps: props.domProps })
   );
 }
 function Menu(props) {
@@ -19810,9 +21093,9 @@ function Menu(props) {
     //@ts-ignore
     "__is_infinite_menu_component"
   ]);
-  const menu = /* @__PURE__ */ React56.createElement(MenuRoot, __spreadValues({}, props), /* @__PURE__ */ React56.createElement(MenuContextProvider, { domProps }));
+  const menu = /* @__PURE__ */ React58.createElement(MenuRoot, __spreadValues({}, props), /* @__PURE__ */ React58.createElement(MenuContextProvider, { domProps }));
   if (false) {
-    return /* @__PURE__ */ React56.createElement(React56.StrictMode, null, menu);
+    return /* @__PURE__ */ React58.createElement(React58.StrictMode, null, menu);
   }
   return menu;
 }
@@ -19829,7 +21112,7 @@ var menuDefaultProps = {
 Menu.defaultProps = menuDefaultProps;
 
 // src/components/InfiniteTable/utils/defaultGetColumnMenuItems.tsx
-import * as React57 from "react";
+import * as React59 from "react";
 function defaultGetColumnMenuItems(_items, params) {
   const { columnApi, column, getComputed, api } = params;
   const sortable = columnApi.isSortable();
@@ -19916,7 +21199,7 @@ function defaultGetColumnMenuItems(_items, params) {
           colItems.push({
             key: id,
             label,
-            check: /* @__PURE__ */ React57.createElement(
+            check: /* @__PURE__ */ React59.createElement(
               InfiniteCheckBox,
               {
                 key: col.id,
@@ -19979,7 +21262,7 @@ function getMenuForColumn(columnId, context, onHideIntent) {
   if (!items || !items.length) {
     return null;
   }
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React60.createElement(
     MenuCmp,
     {
       autoFocus: true,
@@ -20098,7 +21381,7 @@ function useColumnMenu() {
 }
 
 // src/components/InfiniteTable/components/FocusDetect.tsx
-import * as React59 from "react";
+import * as React61 from "react";
 import { useCallback as useCallback26 } from "react";
 var style = {
   width: 0,
@@ -20131,7 +21414,7 @@ function FocusDetect() {
     };
     focusLastFocusableCell(context);
   }), []);
-  return /* @__PURE__ */ React59.createElement(
+  return /* @__PURE__ */ React61.createElement(
     "div",
     {
       onFocus,
@@ -20262,18 +21545,18 @@ function useEditingCallbackProps() {
 import { useEffect as useEffect37 } from "react";
 
 // src/components/InfiniteTable/utils/getFilterOperatorMenuForColumn.tsx
-import * as React62 from "react";
+import * as React64 from "react";
 
 // src/components/InfiniteTable/components/icons/ClearIcon.tsx
-import * as React60 from "react";
+import * as React62 from "react";
 var ClearIcon = (props) => {
-  return /* @__PURE__ */ React60.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React60.createElement("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }));
+  return /* @__PURE__ */ React62.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React62.createElement("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }));
 };
 
 // src/components/InfiniteTable/components/icons/DoneIcon.tsx
-import * as React61 from "react";
+import * as React63 from "react";
 var DoneIcon = (props) => {
-  return /* @__PURE__ */ React61.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React61.createElement("path", { d: "m9.55 19-6.725-6.725L5.25 9.85l4.3 4.325 9.225-9.225 2.425 2.4Z" }));
+  return /* @__PURE__ */ React63.createElement(Icon, __spreadValues({}, props), /* @__PURE__ */ React63.createElement("path", { d: "m9.55 19-6.725-6.725L5.25 9.85l4.3 4.325 9.225-9.225 2.425 2.4Z" }));
 };
 
 // src/components/InfiniteTable/utils/getFilterOperatorMenuForColumn.tsx
@@ -20319,12 +21602,12 @@ function getFilterOperatorMenuForColumn(columnId, context, onHideIntent) {
     const IconCmp = (_b = (_a2 = operator.components) == null ? void 0 : _a2.Icon) != null ? _b : FilterIcon;
     return {
       key,
-      icon: /* @__PURE__ */ React62.createElement(IconCmp, null),
-      label: /* @__PURE__ */ React62.createElement(React62.Fragment, null, (_c = operator.label) != null ? _c : operator.name),
+      icon: /* @__PURE__ */ React64.createElement(IconCmp, null),
+      label: /* @__PURE__ */ React64.createElement(React64.Fragment, null, (_c = operator.label) != null ? _c : operator.name),
       onAction: () => {
         api.setColumnFilterOperator(columnId, key);
       },
-      checked: checked ? /* @__PURE__ */ React62.createElement(DoneIcon, { size: 16 }) : null
+      checked: checked ? /* @__PURE__ */ React64.createElement(DoneIcon, { size: 16 }) : null
     };
   });
   const firstItems = [
@@ -20339,7 +21622,7 @@ function getFilterOperatorMenuForColumn(columnId, context, onHideIntent) {
     {
       key: "reset",
       label: "Reset",
-      icon: /* @__PURE__ */ React62.createElement(ClearIcon, null),
+      icon: /* @__PURE__ */ React64.createElement(ClearIcon, null),
       disabled: !column.computedFiltered,
       onAction: () => {
         api.clearColumnFilter(columnId);
@@ -20361,7 +21644,7 @@ function getFilterOperatorMenuForColumn(columnId, context, onHideIntent) {
     filterTypes
   };
   const items = getFilterOperatorMenuItems ? getFilterOperatorMenuItems(defaultItems, param) : defaultItems;
-  return /* @__PURE__ */ React62.createElement(
+  return /* @__PURE__ */ React64.createElement(
     MenuCmp,
     {
       autoFocus: true,
@@ -20467,7 +21750,7 @@ function useColumnFilterOperatorMenu() {
 import { useEffect as useEffect38 } from "react";
 
 // src/components/InfiniteTable/utils/getCellContextMenu.tsx
-import * as React63 from "react";
+import * as React65 from "react";
 function getCellContextMenu(cellLocation, context, onHideIntent) {
   var _a;
   const { columnId, rowIndex, event } = cellLocation;
@@ -20507,7 +21790,7 @@ function getCellContextMenu(cellLocation, context, onHideIntent) {
   }
   return {
     preventDefault: true,
-    menu: /* @__PURE__ */ React63.createElement(
+    menu: /* @__PURE__ */ React65.createElement(
       MenuCmp,
       {
         columns: menuColumns,
@@ -20562,7 +21845,7 @@ function getTableContextMenu(menuLocation, context, onHideIntent) {
   }
   return {
     preventDefault: true,
-    menu: /* @__PURE__ */ React63.createElement(
+    menu: /* @__PURE__ */ React65.createElement(
       MenuCmp,
       {
         columns: menuColumns,
@@ -20785,7 +22068,7 @@ var InfiniteTableRoot = getComponentStateRoot({
   getParentState: () => useDataSource(),
   debugName: "InfiniteTable"
 });
-var InfiniteTableComponent = React64.memo(
+var InfiniteTableComponent = React66.memo(
   function InfiniteTableComponent2() {
     var _a;
     const context = useInfiniteTable();
@@ -20801,10 +22084,13 @@ var InfiniteTableComponent = React64.memo(
       portalDOMRef,
       licenseKey,
       loadingText,
+      rowDetailRenderer,
       header,
       onRowHeightCSSVarChange,
+      onRowDetailHeightCSSVarChange,
       onColumnHeaderHeightCSSVarChange,
       rowHeightCSSVar,
+      rowDetailHeightCSSVar,
       columnHeaderHeightCSSVar,
       components: components2,
       scrollStopDelay,
@@ -20814,21 +22100,23 @@ var InfiniteTableComponent = React64.memo(
       keyboardNavigation,
       activeRowIndex,
       activeCellIndex,
-      onRenderUpdater
+      onRenderUpdater,
+      debugId
     } = componentState;
     useScrollToActiveRow(activeRowIndex, dataArray.length, api);
     useScrollToActiveCell(activeCellIndex, dataArray.length, api);
     const { onKeyDown: onKeyDown2 } = useDOMEventHandlers();
     const { bodySize } = componentState;
-    const { scrollbars } = computed;
-    const { renderCell } = useCellRendering({
+    const { scrollbars, computedRowHeight, computedRowSizeCacheForDetails } = computed;
+    const activeCellRowHeight = (computedRowSizeCacheForDetails == null ? void 0 : computedRowSizeCacheForDetails.getRowHeight) || computedRowHeight;
+    const { renderCell, renderDetailRow } = useCellRendering({
       imperativeApi: api,
       getComputed,
       domRef: componentState.domRef,
       bodySize,
       computed
     });
-    React64.useEffect(() => {
+    React66.useEffect(() => {
       const dataSourceState = getDataSourceState();
       const onChange = debounce(
         (renderRange) => {
@@ -20844,7 +22132,7 @@ var InfiniteTableComponent = React64.memo(
     const licenseValid = useLicense(licenseKey);
     const domProps = useDOMProps(componentState.domProps);
     const LoadMaskCmp = (_a = components2 == null ? void 0 : components2.LoadMask) != null ? _a : LoadMask;
-    React64.useEffect(() => {
+    React66.useEffect(() => {
       brain.setScrollStopDelay(scrollStopDelay);
       dataSourceActions.scrollStopDelayUpdatedByTable = scrollStopDelay;
     }, [scrollStopDelay]);
@@ -20854,7 +22142,7 @@ var InfiniteTableComponent = React64.memo(
     const { menuPortal: cellContextMenuPortal } = useCellContextMenu();
     const { menuPortal: tableContextMenuPortal } = useTableContextMenu();
     const { menuPortal: filterOperatorMenuPortal } = useColumnFilterOperatorMenu();
-    React64.useEffect(() => {
+    React66.useEffect(() => {
       if (typeof globalThis.__DO_NOT_USE_UNLESS_YOU_KNOW_WHAT_YOURE_DOING_IS_READY === "function") {
         globalThis.__DO_NOT_USE_UNLESS_YOU_KNOW_WHAT_YOURE_DOING_IS_READY(
           componentState.id,
@@ -20867,7 +22155,7 @@ var InfiniteTableComponent = React64.memo(
         globalThis.infiniteApi = context.api;
       }
     }, [componentState.ready]);
-    const onContextMenu = React64.useCallback((event) => {
+    const onContextMenu = React66.useCallback((event) => {
       const state = context.getState();
       const target = event.target;
       const cell = selectParentUntil(
@@ -20898,16 +22186,17 @@ var InfiniteTableComponent = React64.memo(
       }
       state.contextMenu(param);
     }, []);
-    return /* @__PURE__ */ React64.createElement("div", __spreadValues({ onKeyDown: onKeyDown2, ref: domRef }, domProps), header ? /* @__PURE__ */ React64.createElement(
+    return /* @__PURE__ */ React66.createElement("div", __spreadValues({ onKeyDown: onKeyDown2, ref: domRef }, domProps), header ? /* @__PURE__ */ React66.createElement(
       TableHeaderWrapper,
       {
         bodyBrain: brain,
         headerBrain,
         scrollbars
       }
-    ) : null, /* @__PURE__ */ React64.createElement(InfiniteTableBody, { onContextMenu }, /* @__PURE__ */ React64.createElement(
+    ) : null, /* @__PURE__ */ React66.createElement(InfiniteTableBody, { onContextMenu }, /* @__PURE__ */ React66.createElement(
       HeadlessTable,
       {
+        debugId,
         tabIndex: 0,
         activeRowIndex: componentState.ready && keyboardNavigation === "row" ? activeRowIndex : null,
         activeCellIndex: componentState.ready && keyboardNavigation === "cell" && // we want to hide the active cell indicator while column reodering is happening
@@ -20916,11 +22205,13 @@ var InfiniteTableComponent = React64.memo(
         renderer,
         onRenderUpdater,
         brain,
+        activeCellRowHeight,
         renderCell,
+        renderDetailRow: rowDetailRenderer ? renderDetailRow : void 0,
         cellHoverClassNames: HOVERED_CLASS_NAMES,
         scrollerDOMRef
       }
-    ), /* @__PURE__ */ React64.createElement(LoadMaskCmp, { visible: loading }, loadingText)), /* @__PURE__ */ React64.createElement(
+    ), /* @__PURE__ */ React66.createElement(LoadMaskCmp, { visible: loading }, loadingText)), /* @__PURE__ */ React66.createElement(
       "div",
       {
         ref: portalDOMRef,
@@ -20936,19 +22227,25 @@ var InfiniteTableComponent = React64.memo(
       cellContextMenuPortal,
       tableContextMenuPortal,
       filterOperatorMenuPortal
-    ), rowHeightCSSVar ? /* @__PURE__ */ React64.createElement(
+    ), rowHeightCSSVar ? /* @__PURE__ */ React66.createElement(
       CSSNumericVariableWatch,
       {
         varName: rowHeightCSSVar,
         onChange: onRowHeightCSSVarChange
       }
-    ) : null, columnHeaderHeightCSSVar ? /* @__PURE__ */ React64.createElement(
+    ) : null, rowDetailHeightCSSVar ? /* @__PURE__ */ React66.createElement(
+      CSSNumericVariableWatch,
+      {
+        varName: rowDetailHeightCSSVar,
+        onChange: onRowDetailHeightCSSVarChange
+      }
+    ) : null, columnHeaderHeightCSSVar ? /* @__PURE__ */ React66.createElement(
       CSSNumericVariableWatch,
       {
         varName: columnHeaderHeightCSSVar,
         onChange: onColumnHeaderHeightCSSVarChange
       }
-    ) : null, /* @__PURE__ */ React64.createElement(InfiniteTableFooter, null), licenseValid ? null : /* @__PURE__ */ React64.createElement(InfiniteTableLicenseFooter, null), /* @__PURE__ */ React64.createElement(FocusDetect, null));
+    ) : null, /* @__PURE__ */ React66.createElement(InfiniteTableFooter, null), licenseValid ? null : /* @__PURE__ */ React66.createElement(InfiniteTableLicenseFooter, null), /* @__PURE__ */ React66.createElement(FocusDetect, null));
   }
 );
 function InfiniteTableContextProvider() {
@@ -20957,6 +22254,7 @@ function InfiniteTableContextProvider() {
   const computed = useComputed();
   const getComputed = useLatest(computed);
   const getState = useLatest(componentState);
+  const masterContext = useMasterDetailContext();
   if (false) {
     globalThis.getState = getState;
     globalThis.getComputed = getComputed;
@@ -20967,7 +22265,7 @@ function InfiniteTableContextProvider() {
     componentActions: dataSourceActions,
     api: dataSourceApi
   } = useDataSourceContextValue();
-  const [imperativeApi] = React64.useState(() => {
+  const [imperativeApi] = React66.useState(() => {
     return getImperativeApi({
       getComputed,
       getState,
@@ -21000,21 +22298,21 @@ function InfiniteTableContextProvider() {
     },
     { earlyAttach: true, debounce: 50 }
   );
-  React64.useEffect(() => {
+  React66.useEffect(() => {
     if (scrollerDOMRef.current) {
       scrollerDOMRef.current.scrollTop = 0;
     }
   }, [scrollTopKey, scrollerDOMRef]);
   const TableContext2 = getInfiniteTableContext();
-  return /* @__PURE__ */ React64.createElement(TableContext2.Provider, { value: contextValue }, /* @__PURE__ */ React64.createElement(InfiniteTableComponent, null));
+  return /* @__PURE__ */ React66.createElement(TableContext2.Provider, { value: contextValue }, /* @__PURE__ */ React66.createElement(InfiniteTableComponent, null));
 }
 function InfiniteTable(props) {
   const table = (
     //@ts-ignore
-    /* @__PURE__ */ React64.createElement(InfiniteTableRoot, __spreadValues({}, props), /* @__PURE__ */ React64.createElement(InfiniteTableContextProvider, null))
+    /* @__PURE__ */ React66.createElement(InfiniteTableRoot, __spreadValues({}, props), /* @__PURE__ */ React66.createElement(InfiniteTableContextProvider, null))
   );
   if (false) {
-    return /* @__PURE__ */ React64.createElement(React64.StrictMode, null, table);
+    return /* @__PURE__ */ React66.createElement(React66.StrictMode, null, table);
   }
   return table;
 }
@@ -21023,6 +22321,125 @@ InfiniteTable.defaultProps = {
   columnHeaderHeight: toCSSVarName(columnHeaderHeightName)
 };
 
+// src/utils/FixedSizeSet.ts
+var _FixedSizeSet = class {
+  constructor(clone, size) {
+    this.orderRefs = [];
+    if (typeof clone === "number") {
+      this.maxSize = clone;
+      this.currentSet = /* @__PURE__ */ new Set();
+    } else {
+      this.maxSize = size != null ? size : _FixedSizeSet.DEFAULT_SIZE;
+      if (clone) {
+        const arr = Array.from(clone);
+        if (this.maxSize < arr.length) {
+          arr.slice(arr.length - this.maxSize);
+        }
+        this.currentSet = /* @__PURE__ */ new Set();
+        arr.forEach((el) => {
+          this.add(el);
+        });
+      } else {
+        this.currentSet = /* @__PURE__ */ new Set();
+      }
+    }
+  }
+  values() {
+    return this.currentSet.values();
+  }
+  get size() {
+    return this.currentSet.size;
+  }
+  delete(el) {
+    if (this.currentSet.has(el)) {
+      this.currentSet.delete(el);
+      this.orderRefs = this.orderRefs.filter((ref) => ref !== el);
+      return true;
+    }
+    return false;
+  }
+  has(el) {
+    return this.currentSet.has(el);
+  }
+  add(el) {
+    if (this.currentSet.has(el)) {
+      return this;
+    }
+    const canAddCount = this.maxSize - this.currentSet.size;
+    if (canAddCount <= 0) {
+      const [removedRef] = this.orderRefs.splice(0, 1);
+      if (removedRef) {
+        this.currentSet.delete(removedRef);
+      }
+    }
+    this.orderRefs.push(el);
+    this.currentSet.add(el);
+    return this;
+  }
+};
+var FixedSizeSet = _FixedSizeSet;
+FixedSizeSet.DEFAULT_SIZE = 10;
+
+// src/utils/WeakFixedSizeSet.ts
+var _WeakFixedSizeSet = class {
+  constructor(clone, size) {
+    this.orderRefs = [];
+    if (typeof clone === "number") {
+      this.maxSize = clone;
+      this.currentSet = /* @__PURE__ */ new Set();
+    } else {
+      this.maxSize = size != null ? size : _WeakFixedSizeSet.DEFAULT_SIZE;
+      if (clone) {
+        const arr = Array.from(clone);
+        if (this.maxSize < arr.length) {
+          arr.slice(arr.length - this.maxSize);
+        }
+        this.currentSet = /* @__PURE__ */ new Set();
+        arr.forEach((el) => {
+          this.add(el);
+        });
+      } else {
+        this.currentSet = /* @__PURE__ */ new Set();
+      }
+    }
+  }
+  values() {
+    return this.currentSet.values();
+  }
+  get size() {
+    return this.currentSet.size;
+  }
+  delete(el) {
+    if (this.currentSet.has(el)) {
+      this.currentSet.delete(el);
+      this.orderRefs = this.orderRefs.filter((ref) => ref.deref() !== el);
+      return true;
+    }
+    return false;
+  }
+  has(el) {
+    return this.currentSet.has(el);
+  }
+  add(el) {
+    if (this.currentSet.has(el)) {
+      return this;
+    }
+    const canAddCount = this.maxSize - this.currentSet.size;
+    if (canAddCount <= 0) {
+      const [removedRef] = this.orderRefs.splice(0, 1);
+      const removed = removedRef.deref();
+      if (removed) {
+        this.currentSet.delete(removed);
+      }
+    }
+    this.orderRefs.push(new WeakRef(el));
+    this.currentSet.add(el);
+    return this;
+  }
+};
+var WeakFixedSizeSet = _WeakFixedSizeSet;
+WeakFixedSizeSet.DEFAULT_SIZE = 10;
+
 // src/index.tsx
 var components = {
   CheckBox: InfiniteCheckBox,
@@ -21036,12 +22453,15 @@ export {
   DataSource,
   DataSourceActionType,
   DeepMap,
+  FixedSizeSet,
   GroupRowsState,
   InfiniteTable,
   InfiniteTableClassName,
   InfiniteTableComponent,
   Menu,
+  RowDetailsCache,
   RowSelectionState,
+  WeakFixedSizeSet,
   components,
   debounce,
   debug,
@@ -21055,6 +22475,7 @@ export {
   useComponentState,
   useDataSource,
   useEffectWithChanges,
+  useEffectWithObject,
   useInfiniteColumnCell,
   useInfiniteColumnEditor,
   useInfiniteColumnFilterEditor,