@infinite-table/infinite-react 0.4.10 → 0.4.13

package/index.esm.js

@@ -1105,7 +1105,7 @@ function stripVar(cssVariableWithVarString) {
 
 // src/components/InfiniteTable/theme.css.ts
 var InternalVars = { currentColumnWidth: "var(--_1slvgu90)", currentColumnTransformX: "var(--_1slvgu91)", currentColumnTransformY: "var(--_1slvgu92)", activeCellRowOffset: "var(--_1slvgu93)", activeCellRowHeight: "var(--_1slvgu94)", activeCellOffsetX: "var(--_1slvgu95)", activeCellOffsetY: "var(--_1slvgu96)", scrollTopForActiveRow: "var(--_1slvgu97)", activeCellColWidth: "var(--_1slvgu98)", activeCellColOffset: "var(--_1slvgu99)", columnReorderEffectDurationAtIndex: "var(--_1slvgu9a)", columnWidthAtIndex: "var(--_1slvgu9b)", columnOffsetAtIndex: "var(--_1slvgu9c)", columnOffsetAtIndexWhileReordering: "var(--_1slvgu9d)", columnZIndexAtIndex: "var(--_1slvgu9e)", pinnedStartWidth: "var(--_1slvgu9f)", pinnedEndWidth: "var(--_1slvgu9g)", pinnedEndOffset: "var(--_1slvgu9h)", computedVisibleColumnsCount: "var(--_1slvgu9i)", baseZIndexForCells: "var(--_1slvgu9j)", bodyWidth: "var(--_1slvgu9k)", bodyHeight: "var(--_1slvgu9l)", scrollbarWidthHorizontal: "var(--_1slvgu9m)", scrollbarWidthVertical: "var(--_1slvgu9n)", scrollLeft: "var(--_1slvgu9o)", scrollTop: "var(--_1slvgu9p)" };
-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)", 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)", 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)" }, 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)", activeBorderColor_R: "var(--infinite-active-cell-border-color--r)", activeBorderColor_G: "var(--infinite-active-cell-border-color--g)", activeBorderColor_B: "var(--infinite-active-cell-border-color--b)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBackground: "var(--infinite-active-cell-background)", 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)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", selectedBackground: "var(--infinite-row-selected-background)", activeBackground: "var(--infinite-active-row-background)", activeBorderColor: "var(--infinite-active-row-border-color)", activeBorderWidth: "var(--infinite-active-row-border-width)", activeBorderStyle: "var(--infinite-active-row-border-style)", activeBorder: "var(--infinite-active-row-border)", activeBackgroundAlpha: "var(--infinite-active-row-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-row-background-alpha--table-unfocused)", hoverBackground: "var(--infinite-row-hover-background)", selectedHoverBackground: "var(--infinite-row-selected-hover-background)", groupRowBackground: "var(--infinite-group-row-background)", groupRowColumnNesting: "var(--infinite-group-row-column-nesting)", groupNesting: "var(--infinite-dont-override-group-row-nesting-length)", pointerEventsWhileScrolling: "var(--infinite-row-pointer-events-while-scrolling)" }, ColumnCell: { background: "var(--infinite-column-cell-bg-dont-override)" } } };
+var ThemeVars = { color: { accent: "var(--infinite-accent-color)", error: "var(--infinite-error-color)", color: "var(--infinite-color)" }, spacing: { "0": "var(--infinite-space-0)", "1": "var(--infinite-space-1)", "2": "var(--infinite-space-2)", "3": "var(--infinite-space-3)", "4": "var(--infinite-space-4)", "5": "var(--infinite-space-5)", "6": "var(--infinite-space-6)", "7": "var(--infinite-space-7)", "8": "var(--infinite-space-8)", "9": "var(--infinite-space-9)", "10": "var(--infinite-space-10)" }, fontSize: { "0": "var(--infinite-font-size-0)", "1": "var(--infinite-font-size-1)", "2": "var(--infinite-font-size-2)", "3": "var(--infinite-font-size-3)", "4": "var(--infinite-font-size-4)", "5": "var(--infinite-font-size-5)", "6": "var(--infinite-font-size-6)", "7": "var(--infinite-font-size-7)" }, fontFamily: "var(--infinite-font-family)", minHeight: "var(--infinite-min-height)", borderRadius: "var(--infinite-border-radius)", background: "var(--infinite-background)", 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)", 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)" }, 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)", activeBorderColor_R: "var(--infinite-active-cell-border-color--r)", activeBorderColor_G: "var(--infinite-active-cell-border-color--g)", activeBorderColor_B: "var(--infinite-active-cell-border-color--b)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBackground: "var(--infinite-active-cell-background)", 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)", itemHoverBackground: "var(--infinite-menu-item-hover-background)", itemHoverOpacity: "var(--infinite-menu-item-hover-opacity)", itemPressedOpacity: "var(--infinite-menu-item-pressed-opacity)", itemPressedBackground: "var(--infinite-menu-item-pressed-background)", itemDisabledOpacity: "var(--infinite-menu-item-disabled-opacity)" }, 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
@@ -3664,11 +3664,11 @@ var useRerender = () => {
 };
 
 // src/components/InfiniteTable/components/ActiveCellIndicator.css.ts
-var ActiveCellIndicatorCls = { visible: "nxbq1c2 nxbq1c1 _16lm1iwg _16lm1iw3 _16lm1iw15 _16lm1iw13", hidden: "nxbq1c3 nxbq1c1 _16lm1iwg _16lm1iw3 _16lm1iw15 _16lm1iw13" };
-var ActiveIndicatorWrapperCls = "_16lm1iwg _16lm1iw3 _16lm1iw15 _16lm1iw13 _16lm1iwz _16lm1iwp";
+var ActiveCellIndicatorCls = { visible: "nxbq1c2 nxbq1c1 _16lm1iwi _16lm1iw3 _16lm1iw1b _16lm1iw19", hidden: "nxbq1c3 nxbq1c1 _16lm1iwi _16lm1iw3 _16lm1iw1b _16lm1iw19" };
+var ActiveIndicatorWrapperCls = "_16lm1iwi _16lm1iw3 _16lm1iw1b _16lm1iw19 _16lm1iw15 _16lm1iwr";
 
 // src/components/InfiniteTable/components/ActiveRowIndicator.css.ts
-var ActiveRowIndicatorCls = { visible: "j26lrx1 j26lrx0 _16lm1iwg _16lm1iw3 _16lm1iw12 _16lm1iw13 _16lm1iw15", hidden: "j26lrx2 j26lrx0 _16lm1iwg _16lm1iw3 _16lm1iw12 _16lm1iw13 _16lm1iw15" };
+var ActiveRowIndicatorCls = { visible: "j26lrx1 j26lrx0 _16lm1iwi _16lm1iw3 _16lm1iw18 _16lm1iw19 _16lm1iw1b", hidden: "j26lrx2 j26lrx0 _16lm1iwi _16lm1iw3 _16lm1iw18 _16lm1iw19 _16lm1iw1b" };
 
 // src/components/InfiniteTable/components/ActiveRowIndicator.tsx
 var { rootClassName: rootClassName3 } = internalProps;
@@ -4215,20 +4215,20 @@ var useInternalProps = () => {
 };
 
 // src/components/InfiniteTable/utilities.css.ts
-var alignItems = { center: "_16lm1iw1h", stretch: "_16lm1iw1i" };
-var cssEllipsisClassName = "_16lm1iw1s _16lm1iw1t _16lm1iw1m";
-var cursor = { pointer: "_16lm1iwe", colResize: "_16lm1iwf" };
-var display = { flex: "_16lm1iwu", none: "_16lm1iwv", block: "_16lm1iww", inlineBlock: "_16lm1iwx" };
-var flex = { "1": "_16lm1iwh", none: "_16lm1iwi" };
-var flexFlow = { column: "_16lm1iw1d", columnReverse: "_16lm1iw1e", row: "_16lm1iw1f", rowReverse: "_16lm1iw1g" };
-var justifyContent = { center: "_16lm1iw1j", start: "_16lm1iw1k", end: "_16lm1iw1l" };
-var left = { "0": "_16lm1iw15", "100%": "_16lm1iw16", auto: "_16lm1iw17" };
-var overflow = { hidden: "_16lm1iw1m", auto: "_16lm1iw1n", visible: "_16lm1iw1o" };
+var alignItems = { center: "_16lm1iw1n", stretch: "_16lm1iw1o" };
+var cssEllipsisClassName = "_16lm1iw1y _16lm1iw1z _16lm1iw1s";
+var cursor = { pointer: "_16lm1iwf", "default": "_16lm1iwg", colResize: "_16lm1iwh" };
+var display = { flex: "_16lm1iww", contents: "_16lm1iwx", none: "_16lm1iwy", block: "_16lm1iwz", grid: "_16lm1iw10", inlineBlock: "_16lm1iw11", inlineFlex: "_16lm1iw12", inlineGrid: "_16lm1iw13" };
+var flex = { "1": "_16lm1iwj", none: "_16lm1iwk" };
+var flexFlow = { column: "_16lm1iw1j", columnReverse: "_16lm1iw1k", row: "_16lm1iw1l", rowReverse: "_16lm1iw1m" };
+var justifyContent = { center: "_16lm1iw1p", start: "_16lm1iw1q", end: "_16lm1iw1r" };
+var left = { "0": "_16lm1iw1b", "100%": "_16lm1iw1c", auto: "_16lm1iw1d" };
+var overflow = { hidden: "_16lm1iw1s", auto: "_16lm1iw1t", visible: "_16lm1iw1u" };
 var position = { relative: "_16lm1iw1", absolute: "_16lm1iw2", sticky: "_16lm1iw3", fixed: "_16lm1iw4" };
-var top = { "0": "_16lm1iw13", "100%": "_16lm1iw14" };
-var transformTranslateZero = "_16lm1iwa";
-var userSelect = { none: "_16lm1iwy" };
-var zIndex = { "1": "_16lm1iwj", "10": "_16lm1iwk", "100": "_16lm1iwl", "1000": "_16lm1iwm", "10000": "_16lm1iwn", "100000": "_16lm1iwo", "1000000": "_16lm1iwp", "10000000": "_16lm1iwq", "1k": "_16lm1iwr", "10k": "_16lm1iws", "100k": "_16lm1iwt" };
+var top = { "0": "_16lm1iw19", "100%": "_16lm1iw1a" };
+var transformTranslateZero = "_16lm1iwb";
+var userSelect = { none: "_16lm1iw14" };
+var zIndex = { "1": "_16lm1iwl", "10": "_16lm1iwm", "100": "_16lm1iwn", "1000": "_16lm1iwo", "10000": "_16lm1iwp", "100000": "_16lm1iwq", "1000000": "_16lm1iwr", "10000000": "_16lm1iws", "1k": "_16lm1iwt", "10k": "_16lm1iwu", "100k": "_16lm1iwv" };
 
 // src/components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBody.tsx
 var InfiniteTableBody = forwardRef2(function InfiniteTableBody2(props, ref) {
@@ -4261,7 +4261,7 @@ import {
   createElement as createElement25,
   useMemo as useMemo5
 } from "react";
-import { useCallback as useCallback9, useContext as useContext5, useEffect as useEffect13, useRef as useRef13 } from "react";
+import { useCallback as useCallback9, useContext as useContext5, useEffect as useEffect13, useRef as useRef14 } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/DataSource/defaultFilterTypes.ts
@@ -4360,6 +4360,10 @@ function useCellClassName(column, baseClasses, variants, extraFlags) {
   if (extraFlags.rowSelected) {
     result.push(...baseClasses.map((c) => `${c}--row-selected`));
   }
+  if (extraFlags.groupRow) {
+    result.push(...baseClasses.map((c) => `${c}--group-row`));
+    result.push(...baseClasses.map((c) => `${c}--${extraFlags.rowExpanded ? "group-row-expanded" : "group-row-collapsed"}`));
+  }
   if (column.computedPinned) {
     result.push(...baseClasses.map((c) => `${c}--pinned-${column.computedPinned}`));
   } else {
@@ -4393,14 +4397,14 @@ var useInfiniteTable = () => {
 // src/components/InfiniteTable/InfiniteCls.css.ts
 var import_createRuntimeFn = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
 var FooterCls = "_16lm1iw1";
-var InfiniteCls = "_1yeub2v0 _16lm1iw1 _16lm1iwu _16lm1iw1d _16lm1iw0";
+var InfiniteCls = "_1yeub2v0 _16lm1iw1 _16lm1iww _16lm1iw1j _16lm1iw0";
 var InfiniteClsHasPinnedEnd = "_1yeub2vo";
 var InfiniteClsHasPinnedStart = "_1yeub2vn";
 var InfiniteClsRecipe = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "", variantClassNames: { focused: { true: "_1yeub2v2", false: "_1yeub2v3" }, focusedWithin: { true: "_1yeub2v4", false: "_1yeub2v5" }, hasPinnedStart: { true: "_1yeub2v6", false: "_1yeub2v7" }, hasPinnedEnd: { true: "_1yeub2v8", false: "_1yeub2v9" }, hasPinnedStartOverflow: { true: "_1yeub2va", false: "_1yeub2vb" }, hasPinnedEndOverflow: { true: "_1yeub2vc", false: "_1yeub2vd" } }, defaultVariants: {}, compoundVariants: [[{ focused: false, focusedWithin: false }, "_1yeub2ve"]] });
 var InfiniteClsShiftingColumns = "_1yeub2vl";
-var PinnedEndIndicatorBorder = "_1yeub2vr _1yeub2vp _16lm1iw2 _16lm1iw13 _16lm1iwf _16lm1iwy _16lm1iw11 _16lm1iw1q _16lm1iwg _16lm1iwq";
+var PinnedEndIndicatorBorder = "_1yeub2vr _1yeub2vp _16lm1iw2 _16lm1iw19 _16lm1iwh _16lm1iw14 _16lm1iw17 _16lm1iw1w _16lm1iwi _16lm1iws";
 var PinnedRowsContainerClsVariants = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "", variantClassNames: { pinned: { start: "_1yeub2vi", end: "_1yeub2vj", false: "_1yeub2vk" } }, defaultVariants: {}, compoundVariants: [] });
-var PinnedStartIndicatorBorder = "_1yeub2vq _1yeub2vp _16lm1iw2 _16lm1iw13 _16lm1iwf _16lm1iwy _16lm1iw11 _16lm1iw1q _16lm1iwg _16lm1iwq";
+var PinnedStartIndicatorBorder = "_1yeub2vq _1yeub2vp _16lm1iw2 _16lm1iw19 _16lm1iwh _16lm1iw14 _16lm1iw17 _16lm1iw1w _16lm1iwi _16lm1iws";
 
 // src/components/utils/getScrollbarWidth.ts
 var scrollbarWidth;
@@ -5133,7 +5137,7 @@ var useColumnPointerEvents = ({
   };
 };
 
-// src/components/InfiniteTable/utils/RenderHookComponent.tsx
+// src/components/InfiniteTable/utils/RenderHookComponentForInfinite.tsx
 import {
   createElement as createElement19
 } from "react";
@@ -5143,7 +5147,8 @@ import {
   Fragment as Fragment2,
   createContext as createContext4,
   createElement as createElement18,
-  memo as memo8
+  memo as memo8,
+  useRef as useRef12
 } from "react";
 import { useCallback as useCallback7, useContext as useContext4, useMemo as useMemo4 } from "react";
 
@@ -5169,8 +5174,8 @@ import { useState as useState6 } from "react";
 
 // src/components/InfiniteTable/components/icons/ExpanderIcon.css.ts
 var import_createRuntimeFn2 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
-var ExpanderIconCls = "_16lm1iw6 _16lm1iwi _16lm1iwe";
-var ExpanderIconClsVariants = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "", variantClassNames: { expanded: { true: "_16lm1iwc", false: "_198z9782" }, direction: { end: "_198z9783", start: "_198z9784" } }, defaultVariants: {}, compoundVariants: [[{ expanded: false, direction: "end" }, "_16lm1iwd"]] });
+var ExpanderIconCls = "_16lm1iw6 _16lm1iwk _16lm1iwf";
+var ExpanderIconClsVariants = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "", variantClassNames: { expanded: { true: "_16lm1iwd", false: "_198z9782" }, direction: { end: "_198z9783", start: "_198z9784" } }, defaultVariants: {}, compoundVariants: [[{ expanded: false, direction: "end" }, "_16lm1iwe"]] });
 
 // src/components/InfiniteTable/components/icons/ExpanderIcon.tsx
 function ExpanderIcon(props) {
@@ -5212,7 +5217,7 @@ import {
 } from "react";
 
 // src/components/InfiniteTable/components/icons/LoadingIcon.css.ts
-var LoadingIconCls = "_16lm1iw8 _16lm1iwi _16lm1iwe";
+var LoadingIconCls = "_16lm1iw9 _16lm1iwk _16lm1iwf";
 
 // src/components/InfiniteTable/components/icons/LoadingIcon.tsx
 var LoadingIcon = (props) => {
@@ -5410,7 +5415,7 @@ function objectValuesExcept(obj, exceptList) {
 
 // src/components/InfiniteTable/components/cell.css.ts
 var import_createRuntimeFn4 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
-var ColumnCellCls = "_1eexc2a6 _1eexc2a5 _16lm1iwu _16lm1iw1f _16lm1iw1h _16lm1iw2 _16lm1iw1r _16lm1iw1s _16lm1iwy";
+var ColumnCellCls = "_1eexc2a6 _1eexc2a5 _16lm1iww _16lm1iw1l _16lm1iw1n _16lm1iw2 _16lm1iw1x _16lm1iw1y _16lm1iw14";
 var ColumnCellRecipe = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "_1eexc2a8", variantClassNames: { dragging: { false: "_1eexc2a9", true: "_1eexc2aa" }, rowActive: { false: "_1eexc2ab", true: "_1eexc2ac" }, zebra: { false: "_1eexc2ad", even: "_1eexc2ae", odd: "_1eexc2af" }, rowSelected: { true: "_1eexc2ag", false: "_1eexc2ah", null: "_1eexc2ai" }, first: { true: "_1eexc2aj", false: "_1eexc2ak" }, last: { true: "_1eexc2al", false: "_1eexc2am" }, groupByField: { true: "_1eexc2an", false: "_1eexc2ao" }, firstInCategory: { true: "_1eexc2ap", false: "_1eexc2aq" }, lastInCategory: { true: "_1eexc2ar", false: "_1eexc2as" }, pinned: { start: "_1eexc2at", end: "_1eexc2au", false: "_1eexc2av" }, filtered: { true: "_1eexc2aw", false: "_1eexc2ax" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_1eexc2ay"], [{ pinned: "start", firstInCategory: true }, "_1eexc2az"], [{ pinned: "end", firstInCategory: true }, "_1eexc2a10"], [{ pinned: "end", lastInCategory: true }, "_1eexc2a11"]] });
 var SelectionCheckboxCls = "_1eexc2a7";
 
@@ -5421,7 +5426,7 @@ import {
 import { useEffect as useEffect10, useRef as useRef11 } from "react";
 
 // src/components/InfiniteTable/components/CheckBox.css.ts
-var CheckBoxCls = "_16lm1iwe";
+var CheckBoxCls = "_16lm1iwf";
 
 // src/components/InfiniteTable/components/CheckBox.tsx
 function forwardProps2() {
@@ -5767,6 +5772,7 @@ function InfiniteTableColumnCellFn(props) {
     context: renderingContext
   });
   const renderParam = renderParams;
+  const renderParamRef = useRef12(renderParam);
   const onClick = useCallback7((event) => {
     const colIndex = column.computedVisibleIndex;
     getState().cellClick({
@@ -5850,6 +5856,7 @@ function InfiniteTableColumnCellFn(props) {
         })
       });
     }
+    renderParamRef.current = renderParam;
     if (column.render) {
       return /* @__PURE__ */ createElement18(RenderCellHookComponent, {
         render: column.render,
@@ -5906,10 +5913,20 @@ function InfiniteTableColumnCellFn(props) {
     onClick,
     onMouseDown,
     cssEllipsis: (_a = column.cssEllipsis) != null ? _a : true,
-    className: join(useCellClassName(column, [InfiniteTableColumnCellClassName, InfiniteTableCellClassName], ColumnCellRecipe, { dragging: false, zebra, rowActive, rowSelected }), colClassName, rowComputedClassName),
+    className: join(useCellClassName(column, [InfiniteTableColumnCellClassName, InfiniteTableCellClassName], ColumnCellRecipe, {
+      dragging: false,
+      zebra,
+      rowActive,
+      rowSelected,
+      groupRow: rowInfo.isGroupRow,
+      rowExpanded: rowInfo.isGroupRow ? !rowInfo.collapsed : false
+    }), colClassName, rowComputedClassName),
     renderChildren
   };
-  return /* @__PURE__ */ createElement18(InfiniteTableCell, __spreadValues({}, cellProps));
+  const ContextProvider = InfiniteTableColumnCellContext.Provider;
+  return /* @__PURE__ */ createElement18(ContextProvider, {
+    value: renderParamRef.current
+  }, /* @__PURE__ */ createElement18(InfiniteTableCell, __spreadValues({}, cellProps)));
 }
 var InfiniteTableColumnCell = memo8(InfiniteTableColumnCellFn);
 function useInfiniteColumnCell() {
@@ -5917,11 +5934,13 @@ function useInfiniteColumnCell() {
   return result;
 }
 
-// src/components/InfiniteTable/utils/RenderHookComponent.tsx
+// src/components/RenderHookComponent.tsx
 function RenderHookComponent(props) {
   var _a;
   return (_a = props.render(props.renderParam)) != null ? _a : null;
 }
+
+// src/components/InfiniteTable/utils/RenderHookComponentForInfinite.tsx
 function RenderCellHookComponent(props) {
   const ContextProvider = InfiniteTableColumnCellContext.Provider;
   return /* @__PURE__ */ createElement19(ContextProvider, {
@@ -5987,19 +6006,19 @@ import { useEffect as useEffect11, useState as useState7 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts
 var import_createRuntimeFn5 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
-var CellCls = "_1eexc2a5 _16lm1iwu _16lm1iw1f _16lm1iw1h _16lm1iw2 _16lm1iw1r _16lm1iw1s _16lm1iwy";
-var HeaderCellContentRecipe = (0, import_createRuntimeFn5.createRuntimeFn)({ defaultClassName: "_12zfob11e _16lm1iw10 _16lm1iw12 _16lm1iwu _16lm1iw1f _16lm1iw1h", variantClassNames: { filtered: { false: "_12zfob11f", true: "_12zfob11g" } }, defaultVariants: {}, compoundVariants: [] });
-var HeaderCellProxy = "_12zfob1k _16lm1iw1s _16lm1iw1t _16lm1iw1m";
-var HeaderCellRecipe = (0, import_createRuntimeFn5.createRuntimeFn)({ defaultClassName: "_12zfob1l _16lm1iww", variantClassNames: { rowActive: { false: "_12zfob1m", true: "_12zfob1n" }, rowSelected: { false: "_12zfob1o", true: "_12zfob1p", null: "_12zfob1q" }, zebra: { false: "_12zfob1r", even: "_12zfob1s", odd: "_12zfob1t" }, dragging: { true: "_12zfob1u", false: "_12zfob1v" }, first: { true: "_12zfob1w", false: "_12zfob1x" }, last: { true: "_12zfob1y", false: "_12zfob1z" }, groupByField: { true: "_12zfob110", false: "_12zfob111" }, firstInCategory: { true: "_12zfob112", false: "_12zfob113" }, lastInCategory: { true: "_12zfob114", false: "_12zfob115" }, pinned: { start: "_12zfob116", end: "_12zfob117", false: "_12zfob118" }, filtered: { true: "_12zfob119", false: "_12zfob11a" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_12zfob11b"], [{ pinned: "end", firstInCategory: true }, "_12zfob11c"], [{ pinned: false, lastInCategory: true }, "_12zfob11d"]] });
-var HeaderClsRecipe = (0, import_createRuntimeFn5.createRuntimeFn)({ defaultClassName: "_12zfob16 _16lm1iww _16lm1iw2", variantClassNames: { pinned: { start: "_12zfob17", end: "_12zfob18", false: "_12zfob19" }, firstInCategory: { true: "_12zfob1a", false: "_12zfob1b" }, lastInCategory: { true: "_12zfob1c", false: "_12zfob1d" }, overflow: { true: "_12zfob1e", false: "_12zfob1f" } }, defaultVariants: {}, compoundVariants: [[{ overflow: true, pinned: "start" }, "_12zfob1g"], [{ pinned: "start", firstInCategory: true }, "_12zfob1h"], [{ overflow: true, pinned: "end" }, "_12zfob1i"], [{ pinned: "end", lastInCategory: true }, "_12zfob1j"]] });
-var HeaderFilterCls = "_12zfob11j _16lm1iwu _16lm1iw1f _16lm1iw1h _16lm1iw1";
-var HeaderFilterEditorCls = "_16lm1iw12 _16lm1iw10";
-var HeaderGroupCls = "_12zfob11i _16lm1iwu _16lm1iw1f _16lm1iw1h";
+var CellCls = "_1eexc2a5 _16lm1iww _16lm1iw1l _16lm1iw1n _16lm1iw2 _16lm1iw1x _16lm1iw1y _16lm1iw14";
+var HeaderCellContentRecipe = (0, import_createRuntimeFn5.createRuntimeFn)({ defaultClassName: "_12zfob11e _16lm1iw16 _16lm1iw18 _16lm1iww _16lm1iw1l _16lm1iw1n", variantClassNames: { filtered: { false: "_12zfob11f", true: "_12zfob11g" } }, defaultVariants: {}, compoundVariants: [] });
+var HeaderCellProxy = "_12zfob1k _16lm1iw1y _16lm1iw1z _16lm1iw1s";
+var HeaderCellRecipe = (0, import_createRuntimeFn5.createRuntimeFn)({ defaultClassName: "_12zfob1l _16lm1iwz", variantClassNames: { rowActive: { false: "_12zfob1m", true: "_12zfob1n" }, rowSelected: { false: "_12zfob1o", true: "_12zfob1p", null: "_12zfob1q" }, zebra: { false: "_12zfob1r", even: "_12zfob1s", odd: "_12zfob1t" }, dragging: { true: "_12zfob1u", false: "_12zfob1v" }, first: { true: "_12zfob1w", false: "_12zfob1x" }, last: { true: "_12zfob1y", false: "_12zfob1z" }, groupByField: { true: "_12zfob110", false: "_12zfob111" }, firstInCategory: { true: "_12zfob112", false: "_12zfob113" }, lastInCategory: { true: "_12zfob114", false: "_12zfob115" }, pinned: { start: "_12zfob116", end: "_12zfob117", false: "_12zfob118" }, filtered: { true: "_12zfob119", false: "_12zfob11a" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_12zfob11b"], [{ pinned: "end", firstInCategory: true }, "_12zfob11c"], [{ pinned: false, lastInCategory: true }, "_12zfob11d"]] });
+var HeaderClsRecipe = (0, import_createRuntimeFn5.createRuntimeFn)({ defaultClassName: "_12zfob16 _16lm1iwz _16lm1iw2", variantClassNames: { pinned: { start: "_12zfob17", end: "_12zfob18", false: "_12zfob19" }, firstInCategory: { true: "_12zfob1a", false: "_12zfob1b" }, lastInCategory: { true: "_12zfob1c", false: "_12zfob1d" }, overflow: { true: "_12zfob1e", false: "_12zfob1f" } }, defaultVariants: {}, compoundVariants: [[{ overflow: true, pinned: "start" }, "_12zfob1g"], [{ pinned: "start", firstInCategory: true }, "_12zfob1h"], [{ overflow: true, pinned: "end" }, "_12zfob1i"], [{ pinned: "end", lastInCategory: true }, "_12zfob1j"]] });
+var HeaderFilterCls = "_12zfob11j _16lm1iww _16lm1iw1l _16lm1iw1n _16lm1iw1";
+var HeaderFilterEditorCls = "_16lm1iw18 _16lm1iw16";
+var HeaderGroupCls = "_12zfob11i _16lm1iww _16lm1iw1l _16lm1iw1n";
 var HeaderScrollbarPlaceholderCls = "_12zfob15 _16lm1iw2";
 var HeaderSortIconCls = "_16lm1iw1";
 var HeaderSortIconIndexCls = "_12zfob14";
 var HeaderSortIconRecipe = (0, import_createRuntimeFn5.createRuntimeFn)({ defaultClassName: "", variantClassNames: { align: { start: "_12zfob11", center: "_12zfob12", end: "_12zfob13" } }, defaultVariants: {}, compoundVariants: [] });
-var HeaderWrapperCls = "_12zfob11h _16lm1iw1m _16lm1iw1 _16lm1iwu _16lm1iw1f";
+var HeaderWrapperCls = "_12zfob11h _16lm1iw1s _16lm1iw1 _16lm1iww _16lm1iw1l";
 
 // src/components/InfiniteTable/components/icons/SortIcon.tsx
 var defaultLineStyle = {
@@ -6473,7 +6492,7 @@ var computeGroupResize = (params) => {
 };
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/index.tsx
-import { useRef as useRef12, useState as useState9 } from "react";
+import { useRef as useRef13, useState as useState9 } from "react";
 import {
   createElement as createElement23,
   memo as memo9
@@ -6569,17 +6588,17 @@ function getColumnGroupResizer(colIndexes, config) {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/ResizeHandle.css.ts
 var import_createRuntimeFn6 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
-var ResizeHandleCls = "zneyzh0 _16lm1iw2 _16lm1iw13 _16lm1iw1a _16lm1iw18 _16lm1iwf _16lm1iw1m";
-var ResizeHandleDraggerClsRecipe = (0, import_createRuntimeFn6.createRuntimeFn)({ defaultClassName: "zneyzhb _16lm1iw2 _16lm1iw13 _16lm1iw18", variantClassNames: { constrained: { false: "zneyzhc", true: "zneyzhd" } }, defaultVariants: {}, compoundVariants: [] });
-var ResizeHandleRecipeCls = (0, import_createRuntimeFn6.createRuntimeFn)({ defaultClassName: "", variantClassNames: { computedPinned: { start: "zneyzh1", end: "zneyzh2 _16lm1iw15 _16lm1iw1c", false: "zneyzh3" }, computedFirstInCategory: { true: "zneyzh4", false: "zneyzh5" }, computedLastInCategory: { true: "zneyzh6", false: "zneyzh7" } }, defaultVariants: {}, compoundVariants: [[{ computedPinned: "end", computedLastInCategory: false, computedFirstInCategory: true }, "zneyzh8"], [{ computedPinned: false, computedFirstInCategory: false, computedLastInCategory: true }, "zneyzh9"], [{ computedPinned: "start", computedFirstInCategory: false, computedLastInCategory: true }, "zneyzha"]] });
+var ResizeHandleCls = "zneyzh0 _16lm1iw2 _16lm1iw19 _16lm1iw1g _16lm1iw1e _16lm1iwh _16lm1iw1s";
+var ResizeHandleDraggerClsRecipe = (0, import_createRuntimeFn6.createRuntimeFn)({ defaultClassName: "zneyzhb _16lm1iw2 _16lm1iw19 _16lm1iw1e", variantClassNames: { constrained: { false: "zneyzhc", true: "zneyzhd" } }, defaultVariants: {}, compoundVariants: [] });
+var ResizeHandleRecipeCls = (0, import_createRuntimeFn6.createRuntimeFn)({ defaultClassName: "", variantClassNames: { computedPinned: { start: "zneyzh1", end: "zneyzh2 _16lm1iw1b _16lm1iw1i", false: "zneyzh3" }, computedFirstInCategory: { true: "zneyzh4", false: "zneyzh5" }, computedLastInCategory: { true: "zneyzh6", false: "zneyzh7" } }, defaultVariants: {}, compoundVariants: [[{ computedPinned: "end", computedLastInCategory: false, computedFirstInCategory: true }, "zneyzh8"], [{ computedPinned: false, computedFirstInCategory: false, computedLastInCategory: true }, "zneyzh9"], [{ computedPinned: "start", computedFirstInCategory: false, computedLastInCategory: true }, "zneyzha"]] });
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/index.tsx
 var { rootClassName: rootClassName8 } = internalProps;
 var InfiniteTableHeaderCellResizeHandleCls = `${rootClassName8}HeaderCell_ResizeHandle`;
 function ResizeHandleFn(props) {
-  const domRef = useRef12(null);
+  const domRef = useRef13(null);
   const [constrained, setConstrained] = useState9(false);
-  const constrainedRef = useRef12(constrained);
+  const constrainedRef = useRef13(constrained);
   constrainedRef.current = constrained;
   const col = props.columns[props.columnIndex];
   if (!col) {
@@ -6825,7 +6844,7 @@ function InfiniteTableHeaderCell(props) {
     }
     return /* @__PURE__ */ createElement25(Fragment3, null, align !== "end" ? renderParam.renderBag.selectionCheckBox : null, align === "end" ? renderParam.renderBag.sortIcon : null, renderParam.renderBag.header, align !== "end" ? renderParam.renderBag.sortIcon : null, align === "end" ? renderParam.renderBag.selectionCheckBox : null);
   };
-  const domRef = useRef13(null);
+  const domRef = useRef14(null);
   const {
     componentActions: dataSourceActions,
     getState: getDataSourceState,
@@ -6954,7 +6973,9 @@ function InfiniteTableHeaderCell(props) {
       dragging,
       rowSelected: false,
       zebra: false,
-      rowActive: false
+      rowActive: false,
+      groupRow: false,
+      rowExpanded: false
     }), CellCls),
     cssEllipsis: (_e = (_d = column.headerCssEllipsis) != null ? _d : column.cssEllipsis) != null ? _e : true,
     afterChildren: /* @__PURE__ */ createElement25(Fragment3, null, showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ createElement25(InfiniteTableColumnHeaderFilter, {
@@ -7086,7 +7107,7 @@ import {
   createElement as createElement29,
   memo as memo11
 } from "react";
-import { useCallback as useCallback11, useEffect as useEffect14, useRef as useRef15 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect14, useRef as useRef16 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup.tsx
 import {
@@ -7100,7 +7121,7 @@ import {
 import { useCallback as useCallback10 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/GroupResizeHandle.tsx
-import { useRef as useRef14, useState as useState10 } from "react";
+import { useRef as useRef15, useState as useState10 } from "react";
 import {
   createElement as createElement26,
   memo as memo10
@@ -7108,9 +7129,9 @@ import {
 var { rootClassName: rootClassName10 } = internalProps;
 var InfiniteTableHeaderCellResizeHandleCls2 = `${rootClassName10}HeaderCell_ResizeHandle`;
 function GroupResizeHandleFn(props) {
-  const domRef = useRef14(null);
+  const domRef = useRef15(null);
   const [constrained, setConstrained] = useState10(false);
-  const constrainedRef = useRef14(constrained);
+  const constrainedRef = useRef15(constrained);
   constrainedRef.current = constrained;
   const col = props.groupColumns[0];
   if (!col) {
@@ -7309,7 +7330,7 @@ function InfiniteTableHeaderFn(props) {
     const removeOnScroll = brain.onScroll(onScroll);
     return removeOnScroll;
   }, [brain]);
-  const domRef = useRef15(null);
+  const domRef = useRef16(null);
   const headerCls = HeaderClsRecipe({
     overflow: false
   });
@@ -7483,7 +7504,7 @@ import {
   createElement as createElement31,
   forwardRef as forwardRef4,
   useCallback as useCallback13,
-  useRef as useRef16
+  useRef as useRef17
 } from "react";
 import { useEffect as useEffect15 } from "react";
 
@@ -7522,7 +7543,7 @@ var enforceStyle = (node, style) => {
 };
 var InfiniteTableLicenseFooter = forwardRef4(function InfiniteTableLicenseFooter2(props, ref) {
   const { rootClassName: rootClassName13 } = useInternalProps();
-  const domRef = useRef16(null);
+  const domRef = useRef17(null);
   const domCallback = useCallback13((node) => {
     domRef.current = node;
     if (!ref) {
@@ -7568,8 +7589,8 @@ import {
 } from "react";
 
 // src/components/InfiniteTable/components/LoadMask.css.ts
-var LoadMaskCls = { visible: "qy58ya1 qy58ya0 _16lm1iw2 _16lm1iw13 _16lm1iw15 _16lm1iw1a _16lm1iw18", hidden: "qy58ya2 qy58ya0 _16lm1iw2 _16lm1iw13 _16lm1iw15 _16lm1iw1a _16lm1iw18" };
-var LoadMaskOverlayCls = "qy58ya3 _16lm1iw2 _16lm1iw13 _16lm1iw15 _16lm1iw1a _16lm1iw18";
+var LoadMaskCls = { visible: "qy58ya1 qy58ya0 _16lm1iw2 _16lm1iw19 _16lm1iw1b _16lm1iw1g _16lm1iw1e", hidden: "qy58ya2 qy58ya0 _16lm1iw2 _16lm1iw19 _16lm1iw1b _16lm1iw1g _16lm1iw1e" };
+var LoadMaskOverlayCls = "qy58ya3 _16lm1iw2 _16lm1iw19 _16lm1iw1b _16lm1iw1g _16lm1iw1e";
 var LoadMaskTextCls = "qy58ya4";
 
 // src/components/InfiniteTable/components/LoadMask.tsx
@@ -7618,12 +7639,14 @@ function deepClone(source) {
   return target;
 }
 
-// src/utils/groupAndPivot/index.ts
-var LAZY_ROOT_KEY_FOR_GROUPS = "____root____";
-var NOT_LOADED_YET_KEY_PREFIX = "____not_loaded_yet____";
+// src/utils/groupAndPivot/defaultToKey.ts
 function DEFAULT_TO_KEY(value) {
   return value;
 }
+
+// src/utils/groupAndPivot/index.ts
+var LAZY_ROOT_KEY_FOR_GROUPS = "____root____";
+var NOT_LOADED_YET_KEY_PREFIX = "____not_loaded_yet____";
 function initReducers(reducers) {
   if (!reducers || !Object.keys(reducers).length) {
     return {};
@@ -7696,6 +7719,14 @@ function lazyGroup(groupParams, rootData) {
     if (currentGroupKeys.length == groupBy.length && groupBy.length) {
       if (current) {
         current.items = dataArray;
+        for (let i = 0, len = currentGroupKeys.length; i < len; i++) {
+          const currentKeys = currentGroupKeys.slice(0, i);
+          const deepMapGroupValue = deepMap.get(currentKeys);
+          if (deepMapGroupValue) {
+            deepMapGroupValue.items = deepMapGroupValue.items || [];
+            deepMapGroupValue.items = deepMapGroupValue.items.concat(dataArray);
+          }
+        }
         indexer.indexArray(dataArray, toPrimaryKey);
       }
       return next == null ? void 0 : next();
@@ -7716,7 +7747,7 @@ function lazyGroup(groupParams, rootData) {
         continue;
       }
       const dataObject = dataArray[i].data;
-      const dataKeys = dataArray[i].keys;
+      const dataKeys = dataArray[i].keys || [];
       if (dataKeys.length) {
         const key = dataKeys[dataKeys.length - 1];
         currentGroupKeys.push(key);
@@ -7785,14 +7816,6 @@ function processGroup(deepMap, currentGroupKeys, currentPivotKeys, item, itemInd
     currentPivotKeys.length = 0;
   }
 }
-function getGroupKeysForDataItem(data, groupBy) {
-  return groupBy.reduce((groupKeys, groupBy2) => {
-    const { field: groupByProperty, toKey: groupToKey } = groupBy2;
-    const key = (groupToKey || DEFAULT_TO_KEY)(data[groupByProperty], data);
-    groupKeys.push(key);
-    return groupKeys;
-  }, []);
-}
 function group(groupParams, data) {
   const {
     groupBy,
@@ -7894,7 +7917,7 @@ function flatten(groupResult) {
 }
 function getEnhancedGroupData(options, deepMapValue) {
   var _a;
-  const { groupBy, groupKeys, collapsed, parents, reducers, lazyLoad } = options;
+  const { groupBy, groupKeys, parents, reducers, lazyLoad } = options;
   const groupNesting = groupKeys.length;
   const {
     items: groupItems,
@@ -7929,7 +7952,7 @@ function getEnhancedGroupData(options, deepMapValue) {
     selectedChildredCount: 0,
     deselectedChildredCount: 0,
     id: `${groupKeys}`,
-    collapsed,
+    collapsed: false,
     dataSourceHasGrouping: true,
     selfLoaded,
     error: options.error,
@@ -7988,7 +8011,7 @@ function enhancedFlatten(param) {
     var _a, _b;
     const items = deepMapValue.items;
     const groupNesting = groupKeys.length;
-    const collapsed = (_a = groupRowsState == null ? void 0 : groupRowsState.isGroupRowCollapsed(groupKeys)) != null ? _a : false;
+    let collapsed = (_a = groupRowsState == null ? void 0 : groupRowsState.isGroupRowCollapsed(groupKeys)) != null ? _a : false;
     indexInParentGroups.push(indexInGroup);
     const enhancedGroupData = getEnhancedGroupData({
       lazyLoad,
@@ -8001,11 +8024,10 @@ function enhancedFlatten(param) {
       groupKeys,
       error: deepMapValue.error,
       totalChildrenCount: deepMapValue.totalChildrenCount,
-      childrenLoading: deepMapValue.childrenLoading,
+      childrenLoading: (deepMapValue.childrenLoading || !collapsed && !deepMapValue.childrenAvailable) && lazyLoad,
       childrenAvailable: deepMapValue.childrenAvailable,
       directChildrenCount: groupKeys.length === groupByStrings.length ? deepMapValue.items.length : deepMap.getDirectChildrenSizeFor(groupKeys),
-      directChildrenLoadedCount: 0,
-      collapsed
+      directChildrenLoadedCount: 0
     }, deepMapValue);
     if (isRowSelected) {
       enhancedGroupData.rowSelected = isRowSelected(enhancedGroupData);
@@ -8017,6 +8039,10 @@ function enhancedFlatten(param) {
     }
     const parent = parents[parents.length - 1];
     const parentCollapsed = (_b = parent == null ? void 0 : parent.collapsed) != null ? _b : false;
+    if (parentCollapsed) {
+      collapsed = true;
+    }
+    enhancedGroupData.collapsed = collapsed;
     let include = generateGroupRows || collapsed;
     if (parentCollapsed) {
       include = false;
@@ -8024,27 +8050,16 @@ function enhancedFlatten(param) {
     if (include) {
       result.push(enhancedGroupData);
     }
-    if (collapsed) {
-      enhancedGroupData.collapsedChildrenCount = enhancedGroupData.groupCount;
-      parents.forEach((parent2) => {
-        if (!parentCollapsed) {
-          parent2.deepRowInfoArray.push(enhancedGroupData);
-        }
-        parent2.collapsedChildrenCount += enhancedGroupData.groupCount;
-        parent2.collapsedGroupsCount += 1;
-      });
-    } else {
-      if (!parentCollapsed) {
-        parents.forEach((parent2) => {
-          parent2.deepRowInfoArray.push(enhancedGroupData);
-        });
-      }
-    }
+    enhancedGroupData.collapsedChildrenCount = 0;
+    parents.forEach((parent2) => {
+      parent2.deepRowInfoArray.push(enhancedGroupData);
+      parent2.collapsedGroupsCount += collapsed ? 1 : 0;
+    });
     if (parent && enhancedGroupData.selfLoaded && lazyLoad) {
       parent.directChildrenLoadedCount += 1;
     }
     parents.push(enhancedGroupData);
-    const continueWithChildren = !collapsed || lazyLoad;
+    const continueWithChildren = true;
     if (continueWithChildren) {
       if (!next) {
         if (!pivot) {
@@ -8082,9 +8097,10 @@ function enhancedFlatten(param) {
               if (last && item) {
                 parent2.directChildrenLoadedCount += 1;
               }
-              if (!parentCollapsed) {
-                parent2.deepRowInfoArray.push(rowInfo);
+              if (collapsed) {
+                parent2.collapsedChildrenCount += 1;
               }
+              parent2.deepRowInfoArray.push(rowInfo);
             });
             if (!collapsed) {
               result[startIndex + index] = rowInfo;
@@ -8367,15 +8383,15 @@ var GroupRowsState = class extends BooleanDeepCollectionState {
 };
 
 // src/components/DataSource/privateHooks/useLoadData.ts
-import { useEffect as useEffect17, useMemo as useMemo7, useRef as useRef18, useState as useState11 } from "react";
+import { useEffect as useEffect17, useMemo as useMemo7, useRef as useRef19, useState as useState11 } from "react";
 
 // src/components/hooks/useEffectWithChanges.ts
-import { useEffect as useEffect16, useRef as useRef17 } from "react";
+import { useEffect as useEffect16, useRef as useRef18 } from "react";
 function useEffectWithChanges(fn, deps) {
-  const prevRef = useRef17({});
-  const oldValuesRef = useRef17({});
+  const prevRef = useRef18({});
+  const oldValuesRef = useRef18({});
   const oldValues = oldValuesRef.current;
-  const changesRef = useRef17({});
+  const changesRef = useRef18({});
   const changes = changesRef.current;
   const useEffectDeps = [];
   for (const k in deps) {
@@ -8658,7 +8674,7 @@ function useLoadData() {
     vertical: false,
     horizontal: false
   });
-  const scrollbarsRef = useRef18(scrollbars);
+  const scrollbarsRef = useRef19(scrollbars);
   useEffect17(() => {
     notifyScrollbarsChange.onChange((scrollbars2) => {
       if (!scrollbars2) {
@@ -8715,7 +8731,7 @@ function useLoadData() {
     filterValue,
     cursorId: livePagination ? stateCursorId : null
   };
-  const initialRef = useRef18(true);
+  const initialRef = useRef19(true);
   useLazyLoadRange();
   useEffectWithChanges(() => {
     const componentState2 = getComponentState();
@@ -8753,11 +8769,13 @@ function useLazyLoadRange() {
   const {
     lazyLoadBatchSize,
     lazyLoad,
+    originalLazyGroupDataChangeDetect,
     notifyRenderRangeChange,
     dataArray,
+    groupRowsState,
     scrollStopDelayUpdatedByTable
   } = componentState;
-  const latestRenderRangeRef = useRef18(null);
+  const latestRenderRangeRef = useRef19(null);
   const loadRange = (renderRange, cache = getComponentState().lazyLoadCacheOfLoadedBatches) => {
     const componentState2 = getComponentState();
     renderRange = renderRange || latestRenderRangeRef.current;
@@ -8783,20 +8801,27 @@ function useLazyLoadRange() {
     }, cache);
   };
   const debouncedLoadRange = useMemo7(() => debounce(loadRange, { wait: scrollStopDelayUpdatedByTable }), [scrollStopDelayUpdatedByTable]);
-  useEffect17(() => {
+  useEffectWithChanges((changes) => {
     if (lazyLoad) {
+      if (changes.originalLazyGroupDataChangeDetect || changes.groupRowsState) {
+        loadRange(notifyRenderRangeChange.get());
+      }
       return notifyRenderRangeChange.onChange((renderRange) => {
         latestRenderRangeRef.current = renderRange;
         loadRange(renderRange);
       });
     }
     return;
-  }, [lazyLoadBatchSize, lazyLoad]);
+  }, {
+    lazyLoadBatchSize,
+    lazyLoad,
+    originalLazyGroupDataChangeDetect,
+    groupRowsState
+  });
   useEffect17(() => {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
       debouncedLoadRange();
     }
-    return;
   }, [dataArray]);
 }
 function lazyLoadRange(options, cache) {
@@ -8886,6 +8911,16 @@ function lazyLoadRange(options, cache) {
   }, initialPromise);
 }
 
+// src/utils/groupAndPivot/getGroupKeysForDataItem.ts
+function getGroupKeysForDataItem(data, groupBy) {
+  return groupBy.reduce((groupKeys, groupBy2) => {
+    const { field: groupByProperty, toKey: groupToKey } = groupBy2;
+    const key = (groupToKey || DEFAULT_TO_KEY)(data[groupByProperty], data);
+    groupKeys.push(key);
+    return groupKeys;
+  }, []);
+}
+
 // src/components/DataSource/RowSelectionState.ts
 var RowSelectionState = class {
   constructor(state, getConfig, _forTestingOnly) {
@@ -8962,8 +8997,8 @@ var RowSelectionState = class {
   getGroupByLength() {
     return this.getConfig().groupBy.length;
   }
-  static from(rowSeleStateObject, getConfig, _forTestingOnly) {
-    return new RowSelectionState(rowSeleStateObject, getConfig, _forTestingOnly);
+  static from(rowSeleStateObject, getConfig, overrides) {
+    return new RowSelectionState(rowSeleStateObject, getConfig, overrides);
   }
   update(stateObject) {
     var _a, _b;
@@ -9331,6 +9366,9 @@ var RowSelectionState = class {
 };
 
 // src/components/InfiniteTable/api/getSelectionApi.ts
+function cloneRowSelection(rowSelection, stateOrGetDataSourceState) {
+  return new RowSelectionState(rowSelection, rowSelectionStateConfigGetter(stateOrGetDataSourceState));
+}
 function rowSelectionStateConfigGetter(stateOrStateGetter) {
   return () => {
     const state = typeof stateOrStateGetter === "function" ? stateOrStateGetter() : stateOrStateGetter;
@@ -9673,16 +9711,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 : [],
-    groupRowsState: (groupRowsState) => {
-      if (groupRowsState && !(groupRowsState instanceof GroupRowsState)) {
-        groupRowsState = new GroupRowsState(groupRowsState);
-      }
-      return groupRowsState || new GroupRowsState({
-        expandedRows: true,
-        collapsedRows: []
-      });
-    }
+    groupBy: (groupBy) => groupBy != null ? groupBy : []
   };
 };
 function getLivePaginationCursorValue(livePaginationCursorProp, state) {
@@ -9741,8 +9770,17 @@ function mapPropsToState(params) {
   }
   const primaryKeyDescriptor = state.primaryKey;
   const toPrimaryKey = typeof primaryKeyDescriptor === "function" ? (data) => primaryKeyDescriptor(data) : (data) => data[primaryKeyDescriptor];
+  let groupRowsState = props.groupRowsState || state.groupRowsState || props.defaultGroupRowsState;
+  if (groupRowsState && !(groupRowsState instanceof GroupRowsState)) {
+    groupRowsState = new GroupRowsState(groupRowsState);
+  }
+  groupRowsState = groupRowsState || new GroupRowsState(state.lazyLoad ? { expandedRows: [], collapsedRows: true } : {
+    expandedRows: true,
+    collapsedRows: []
+  });
   const result = {
     selectionMode,
+    groupRowsState,
     rowSelection: rowSelectionState,
     toPrimaryKey,
     operatorsByFilterType,
@@ -10557,7 +10595,7 @@ function getImperativeApi(param) {
 // src/components/InfiniteTable/hooks/useAutoSizeColumns.ts
 import {
   useEffect as useEffect18,
-  useRef as useRef19,
+  useRef as useRef20,
   useState as useState12
 } from "react";
 var OFFSET = 10;
@@ -10628,7 +10666,7 @@ function useAutoSizeColumns() {
   const [refreshId, setRefreshId] = useState12(0);
   const theKey = typeof autoSizeColumnsKey === "object" ? autoSizeColumnsKey.key : autoSizeColumnsKey;
   const getTheKey = useLatest(theKey);
-  const lastExecutedIdentifierRef = useRef19(null);
+  const lastExecutedIdentifierRef = useRef20(null);
   useEffect18(() => {
     const key = getTheKey();
     if (key == null) {
@@ -10687,7 +10725,7 @@ function useAutoSizeColumns() {
 }
 
 // src/components/InfiniteTable/hooks/useCellRendering.tsx
-import { useCallback as useCallback14, useEffect as useEffect19, useRef as useRef20 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect19, useRef as useRef21 } from "react";
 import {
   createElement as createElement34
 } from "react";
@@ -10763,7 +10801,7 @@ function useCellRendering(param) {
     bodySize,
     rowspan
   });
-  const scrollTopMaxRef = useRef20(0);
+  const scrollTopMaxRef = useRef21(0);
   useEffect19(() => {
     return brain.onRenderCountChange(() => {
       scrollTopMaxRef.current = brain.scrollTopMax;
@@ -11103,10 +11141,10 @@ function useColumnSizeFn(columns) {
 import { useEffect as useEffect23, useMemo as useMemo9 } from "react";
 
 // src/components/InfiniteTable/hooks/useEffectWithRaf.ts
-import { useEffect as useEffect22, useRef as useRef21 } from "react";
+import { useEffect as useEffect22, useRef as useRef22 } from "react";
 function useEffectWithRaf(fn, deps) {
-  const rafId = useRef21(0);
-  const removeFnRaf = useRef21();
+  const rafId = useRef22(0);
+  const removeFnRaf = useRef22();
   useEffect22(() => {
     rafId.current = requestAnimationFrame(() => {
       removeFnRaf.current = fn();
@@ -12491,7 +12529,7 @@ var useLicense = (licenseKey = "") => {
   const valid = useMemo11(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.4.10"
+      version: "0.4.13"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -12502,11 +12540,11 @@ var useLicense = (licenseKey = "") => {
 };
 
 // src/components/InfiniteTable/hooks/useScrollToActiveCell.ts
-import { useRef as useRef22, useEffect as useEffect27 } from "react";
+import { useRef as useRef23, useEffect as useEffect27 } from "react";
 var RETRIES = 10;
 function useScrollToActiveCell(activeCellIndex, dataCount, imperativeApi) {
-  const didScrollRef = useRef22(false);
-  const rafId = useRef22(null);
+  const didScrollRef = useRef23(false);
+  const rafId = useRef23(null);
   useEffect27(() => {
     if (activeCellIndex != null) {
       didScrollRef.current = false;
@@ -12536,11 +12574,11 @@ function useScrollToActiveCell(activeCellIndex, dataCount, imperativeApi) {
 }
 
 // src/components/InfiniteTable/hooks/useScrollToActiveRow.ts
-import { useRef as useRef23, useEffect as useEffect28 } from "react";
+import { useRef as useRef24, useEffect as useEffect28 } from "react";
 var RETRIES2 = 10;
 function useScrollToActiveRow(activeRowIndex, dataCount, imperativeApi) {
-  const didScrollRef = useRef23(false);
-  const rafId = useRef23(null);
+  const didScrollRef = useRef24(false);
+  const rafId = useRef24(null);
   useEffect28(() => {
     if (activeRowIndex != null) {
       didScrollRef.current = false;
@@ -12826,7 +12864,14 @@ function onCellClick(context, event) {
   updateRowSelectionOnCellClick(context, event);
 }
 function updateRowSelectionOnCellClick(context, event) {
-  const { rowIndex, getDataSourceState, getComputed, dataSourceActions, api } = context;
+  const {
+    rowIndex,
+    getDataSourceState,
+    getComputed,
+    dataSourceActions,
+    api,
+    cloneRowSelection: cloneRowSelection2
+  } = context;
   const { multiRowSelector, renderSelectionCheckBox } = getComputed();
   const dataSourceState = getDataSourceState();
   const { selectionMode, groupBy, dataArray } = dataSourceState;
@@ -12838,7 +12883,7 @@ function updateRowSelectionOnCellClick(context, event) {
       return false;
     }
     let { rowSelection: rowSelectionState } = dataSourceState;
-    rowSelectionState = new RowSelectionState(rowSelectionState, rowSelectionStateConfigGetter(getDataSourceState));
+    rowSelectionState = cloneRowSelection2(rowSelectionState);
     multiRowSelector.rowSelectionState = rowSelectionState;
     if (rowSelectionState && typeof rowSelectionState === "object") {
       if (event.shiftKey) {
@@ -12868,8 +12913,9 @@ function clamp(value, min, max) {
 }
 
 // src/components/InfiniteTable/eventHandlers/keyboardNavigation.ts
-function handleRowNavigation(options) {
-  const { key, getState, getDataSourceState, actions, api } = options;
+function handleRowNavigation(options, event) {
+  const { getState, getDataSourceState, actions, api } = options;
+  const { key } = event;
   const dataArray = getDataSourceState().dataArray;
   const arrLength = dataArray.length;
   const state = getState();
@@ -12934,16 +12980,15 @@ function handleRowNavigation(options) {
   actions.activeRowIndex = activeRowIndex;
   return true;
 }
-function handleCellNavigation(options) {
+function handleCellNavigation(options, event) {
   const {
     api,
-    key,
-    shiftKey,
     getState,
     getComputed,
     getDataSourceState,
     actions
   } = options;
+  const { key, shiftKey } = event;
   const dataArray = getDataSourceState().dataArray;
   const state = getState();
   const { activeCellIndex, brain } = state;
@@ -13033,18 +13078,19 @@ var validKeys = {
   Enter: true,
   " ": true
 };
-function handleKeyboardNavigation(options) {
+function handleKeyboardNavigation(options, event) {
+  const { key } = event;
   const { getState } = options;
   const state = getState();
   const { activeRowIndex, activeCellIndex, keyboardNavigation } = state;
-  if (!validKeys[options.key]) {
+  if (!validKeys[key]) {
     return false;
   }
   if (activeRowIndex != null && keyboardNavigation === "row") {
-    return handleRowNavigation(options);
+    return handleRowNavigation(options, event);
   }
   if (activeCellIndex != null && keyboardNavigation === "cell") {
-    return handleCellNavigation(options);
+    return handleCellNavigation(options, event);
   }
   return false;
 }
@@ -13055,16 +13101,15 @@ var validKeys2 = {
   " ": true,
   a: true
 };
-function handleKeyboardSelection(context) {
+function handleKeyboardSelection(context, keyboardEvent) {
   const {
     getState,
     getDataSourceState,
     dataSourceActions,
     api: imperativeApi,
-    key,
-    ctrlKey,
-    metaKey
+    cloneRowSelection: cloneRowSelection2
   } = context;
+  const { key, ctrlKey, metaKey } = keyboardEvent;
   if (!validKeys2[key]) {
     return false;
   }
@@ -13093,21 +13138,21 @@ function handleKeyboardSelection(context) {
     return false;
   }
   if (key === "a" && (ctrlKey || metaKey)) {
-    const rowSelectionState = new RowSelectionState(rowSelection, rowSelectionStateConfigGetter(getDataSourceState));
+    const rowSelectionState = cloneRowSelection2(rowSelection);
     rowSelectionState.selectAll();
     dataSourceActions.rowSelection = rowSelectionState;
     return true;
   }
   if (key === " ") {
     if (groupBy.length) {
-      if (rowInfo.isGroupRow) {
+      if (rowInfo.isGroupRow && rowInfo.groupKeys) {
         imperativeApi.selectionApi.toggleGroupRowSelection(rowInfo.groupKeys);
       } else {
         imperativeApi.selectionApi.toggleRowSelection(rowInfo.id);
       }
       return true;
     } else {
-      const event = __spreadValues({}, context);
+      const event = __spreadValues({}, keyboardEvent);
       const { renderSelectionCheckBox } = context.getComputed();
       if (renderSelectionCheckBox) {
         event.metaKey = false;
@@ -13122,15 +13167,14 @@ function handleKeyboardSelection(context) {
 // src/components/InfiniteTable/eventHandlers/onKeyDown.ts
 function onKeyDown(context, event) {
   const keyboardHandlerContext = __spreadProps(__spreadValues({}, context), {
-    key: event.key,
-    metaKey: event.metaKey,
-    ctrlKey: event.ctrlKey,
-    shiftKey: event.shiftKey
+    cloneRowSelection: (rowSelection) => {
+      return cloneRowSelection(rowSelection, context.getDataSourceState);
+    }
   });
-  if (handleKeyboardSelection(keyboardHandlerContext)) {
+  if (handleKeyboardSelection(keyboardHandlerContext, event)) {
     event.preventDefault();
   }
-  if (handleKeyboardNavigation(keyboardHandlerContext)) {
+  if (handleKeyboardNavigation(keyboardHandlerContext, event)) {
     event.preventDefault();
   }
 }
@@ -13151,7 +13195,10 @@ function useEventHandlersContext() {
       getState,
       actions,
       getDataSourceState,
-      dataSourceActions
+      dataSourceActions,
+      cloneRowSelection: (rowSelection) => {
+        return cloneRowSelection(rowSelection, getDataSourceState);
+      }
     };
     return context2;
   }, [getState, actions, getDataSourceState, dataSourceActions]);
@@ -13161,13 +13208,7 @@ function handleDOMEvents() {
   const context = useEventHandlersContext();
   useEffect29(() => {
     const removeOnKeyDown = context.getState().keyDown.onChange((event) => {
-      onKeyDown(__spreadProps(__spreadValues({}, context), {
-        key: event.key,
-        metaKey: event.metaKey,
-        ctrlKey: event.ctrlKey,
-        shiftKey: event.shiftKey,
-        preventDefault: () => event.preventDefault()
-      }), event);
+      onKeyDown(context, event);
     });
     function cellClickHandler(cellClickParam) {
       if (!cellClickParam) {
@@ -13181,10 +13222,10 @@ function handleDOMEvents() {
         key: "",
         preventDefault: () => event.preventDefault()
       };
-      onCellClick(__spreadValues(__spreadProps(__spreadValues({}, context), {
+      onCellClick(__spreadProps(__spreadValues({}, context), {
         rowIndex: cellClickParam.rowIndex,
         colIndex: cellClickParam.colIndex
-      }), virtualEvent), virtualEvent);
+      }), virtualEvent);
     }
     const removeOnCellClick = context.getState().cellClick.onChange(cellClickHandler);
     return () => {
@@ -13379,6 +13420,245 @@ InfiniteTable.defaultProps = {
   columnHeaderHeight: toCSSVarName(columnHeaderHeightName)
 };
 
+// src/components/Menu/index.tsx
+import {
+  Children,
+  createElement as createElement36,
+  useState as useState16
+} from "react";
+import { useState as useState17 } from "react";
+
+// src/components/Menu/MenuCls.css.ts
+var import_createRuntimeFn7 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
+var MenuCls = "db3arf0 _16lm1iw0 _16lm1iw1 _16lm1iw13 _16lm1iw1j _16lm1iw7";
+var MenuItemCls = (0, import_createRuntimeFn7.createRuntimeFn)({ defaultClassName: "db3arf2 _16lm1iww _16lm1iw1n _16lm1iw14", variantClassNames: { disabled: { true: "db3arf3 _16lm1iwg _16lm1iw14", false: "_16lm1iwf" }, hover: { true: "db3arf5", false: "db3arf6" }, pressed: { false: "db3arf7", true: "db3arf8" }, active: { true: "db3arf9", false: "db3arfa" } }, defaultVariants: {}, compoundVariants: [[{ pressed: true, hover: true }, "db3arfb"]] });
+var MenuRowCls = "_16lm1iwx";
+var MenuSeparatorCls = "db3arfc";
+
+// src/components/Menu/index.tsx
+var SEPARATOR = "-";
+function MenuSeparator() {
+  return /* @__PURE__ */ createElement36("hr", {
+    className: MenuSeparatorCls
+  });
+}
+var toRuntimeItem = ({ columns, activeItemKey }, item) => {
+  const menuItem = item && (item.key != null || item.label != null) ? item : null;
+  const menuDecoration = menuItem === null ? item === SEPARATOR ? /* @__PURE__ */ createElement36(MenuSeparator, null) : item : null;
+  const runtimeItem = menuItem != null ? {
+    type: "item",
+    disabled: !!menuItem.disabled,
+    active: menuItem.key === activeItemKey,
+    value: menuItem,
+    span: menuItem.span || 1,
+    key: menuItem.key,
+    menu: menuItem.menu || null
+  } : {
+    type: "decoration",
+    value: menuDecoration,
+    span: columns.length,
+    style: {
+      gridColumnStart: 1,
+      gridColumnEnd: columns.length + 10
+    }
+  };
+  return runtimeItem;
+};
+function childrenToRuntimeItems(context, children) {
+  return Children.map(children, (child) => {
+    if (child == null ? void 0 : child.props.__is_menu_item) {
+      const itemProps = __spreadValues({}, child.props);
+      if (!itemProps.key) {
+        itemProps.key = child.key;
+      }
+      if (!itemProps.description) {
+        itemProps.description = child.props.children;
+      }
+      if (!itemProps.label) {
+        itemProps.label = itemProps.children;
+      }
+      return toRuntimeItem(context, itemProps);
+    }
+    return toRuntimeItem(context, child);
+  }) || [];
+}
+var defaultColumns = [
+  {
+    name: "label"
+  }
+];
+function Menu(props) {
+  const _a = props, {
+    children,
+    items,
+    columns: cols,
+    addSubmenuColumnIfNeeded
+  } = _a, domProps = __objRest(_a, [
+    "children",
+    "items",
+    "columns",
+    "addSubmenuColumnIfNeeded"
+  ]);
+  const [activeItemKey, setActiveItemKey] = useState17(null);
+  const columns = cols || defaultColumns;
+  let runtimeItems = [];
+  let renderedChildren = null;
+  const context = { columns, activeItemKey };
+  if (items) {
+    runtimeItems = items.map(toRuntimeItem.bind(null, context));
+  } else if (!items && typeof children !== "function") {
+    runtimeItems = childrenToRuntimeItems(context, children);
+  }
+  if (addSubmenuColumnIfNeeded) {
+    const hasSubmenus = runtimeItems.filter((item) => item.type === "item" && item.menu != null).length > 0;
+    if (hasSubmenus && !columns.find((col) => col.name == "submenu")) {
+      columns.push({
+        name: "submenu",
+        render: ({ domProps: domProps2, item }) => {
+          return item.menu ? /* @__PURE__ */ createElement36("div", __spreadValues({}, domProps2), /* @__PURE__ */ createElement36(ExpanderIcon, null)) : /* @__PURE__ */ createElement36("div", __spreadValues({}, domProps2));
+        }
+      });
+    }
+  }
+  renderedChildren = runtimeItems.map((runtimeItem, index) => /* @__PURE__ */ createElement36(RuntimeItemRenderer, {
+    columns,
+    item: runtimeItem,
+    index,
+    onClick: (item) => setActiveItemKey(item.key)
+  }));
+  const gridTemplateColumns = columns.map((col) => {
+    return col.width || (typeof col.flex === "number" ? `${col.flex}fr` : col.flex) || "auto";
+  }).join(" ");
+  const style = __spreadProps(__spreadValues({}, domProps.style), {
+    gridTemplateColumns,
+    gridTemplateRows: runtimeItems.map(() => `auto`).join(" ")
+  });
+  function handleKeydown(event) {
+    const selectableRuntimeItems = runtimeItems.filter((item) => item.type === "item" && !item.disabled);
+    let activeIndex = selectableRuntimeItems.findIndex((runtimeItem) => runtimeItem.key === activeItemKey);
+    let newActiveIndex = activeIndex;
+    const validKeys3 = {
+      ArrowUp: () => {
+        newActiveIndex--;
+      },
+      ArrowDown: () => {
+        newActiveIndex++;
+      },
+      PageUp: () => {
+        newActiveIndex = 0;
+      },
+      PageDown: () => {
+        newActiveIndex = selectableRuntimeItems.length - 1;
+      }
+    };
+    const fn = validKeys3[event.key];
+    if (fn) {
+      fn();
+    }
+    newActiveIndex = clamp(newActiveIndex, 0, selectableRuntimeItems.length - 1);
+    if (newActiveIndex != activeIndex) {
+      setActiveItemKey(selectableRuntimeItems[newActiveIndex].key);
+    }
+  }
+  return /* @__PURE__ */ createElement36("div", __spreadProps(__spreadValues({}, domProps), {
+    onKeyDown: (event) => {
+      if (domProps.onKeyDown) {
+        domProps.onKeyDown(event);
+      }
+      handleKeydown(event);
+    },
+    tabIndex: 0,
+    className: join(MenuCls, domProps.className),
+    style
+  }), renderedChildren);
+}
+var menuDefaultProps = {
+  addSubmenuColumnIfNeeded: true
+};
+Menu.defaultProps = menuDefaultProps;
+function RuntimeItemRenderer(props) {
+  const [hover, setHover] = useState16(false);
+  const [pressed, setPressed] = useState16(false);
+  const { columns, item, index } = props;
+  const key = item.type === "item" ? item.value.key : index;
+  let content = null;
+  if (item.type === "decoration") {
+    content = /* @__PURE__ */ createElement36("div", {
+      style: item.style
+    }, item.value);
+  } else {
+    let spanIndex = 0;
+    content = columns.map((col, i) => {
+      const target = item.value;
+      const field = col.field || col.name;
+      const start = i + 1;
+      const end = start + item.span;
+      if (start < spanIndex) {
+        return null;
+      }
+      spanIndex = end;
+      const style = __spreadProps(__spreadValues(__spreadValues({}, col.style), item.style), {
+        gridColumnStart: start,
+        gridColumnEnd: end
+      });
+      const domProps = {
+        style,
+        className: MenuItemCls({
+          hover,
+          disabled: !!item.disabled,
+          active: item.active,
+          pressed
+        }),
+        onMouseEnter: () => {
+          if (!item.disabled) {
+            setHover(true);
+          }
+        },
+        onMouseLeave: () => {
+          if (!item.disabled) {
+            setHover(false);
+          }
+        },
+        onMouseDown: () => {
+          if (!item.disabled) {
+            setPressed(true);
+          }
+        },
+        onMouseUp: () => {
+          if (!item.disabled) {
+            setPressed(false);
+          }
+        },
+        onClick: () => {
+          if (!item.disabled) {
+            props.onClick(item);
+          }
+        }
+      };
+      return col.render ? /* @__PURE__ */ createElement36(RenderHookComponent, {
+        render: col.render,
+        renderParam: {
+          item: target,
+          column: col,
+          value: target[field],
+          domProps
+        }
+      }) : /* @__PURE__ */ createElement36("div", __spreadValues({
+        key: `${key}-${field}`
+      }, domProps), target[field]);
+    }).filter(Boolean);
+  }
+  return /* @__PURE__ */ createElement36("div", {
+    className: MenuRowCls
+  }, content);
+}
+function MenuItem(_props) {
+  return null;
+}
+MenuItem.defaultProps = {
+  __is_menu_item: true
+};
+
 // src/index.tsx
 var components = {
   CheckBox: InfiniteCheckBox,
@@ -13391,6 +13671,8 @@ export {
   InfiniteTable,
   InfiniteTableClassName,
   InfiniteTableComponent,
+  Menu,
+  MenuItem,
   NumberFilterEditor,
   RowSelectionState,
   StringFilterEditor,
@@ -13410,3 +13692,4 @@ export {
   useInfiniteColumnCell,
   useInfiniteHeaderCell
 };
+//!collapsed || lazyLoad;