@infinite-table/infinite-react 0.4.9 → 0.4.12

package/index.js

@@ -632,6 +632,8 @@ __export(exports, {
   InfiniteTable: () => InfiniteTable,
   InfiniteTableClassName: () => InfiniteTableClassName,
   InfiniteTableComponent: () => InfiniteTableComponent,
+  Menu: () => Menu,
+  MenuItem: () => MenuItem,
   NumberFilterEditor: () => NumberFilterEditor,
   RowSelectionState: () => RowSelectionState,
   StringFilterEditor: () => StringFilterEditor,
@@ -1096,7 +1098,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
@@ -3652,11 +3654,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;
@@ -4186,20 +4188,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 = React14.forwardRef(function InfiniteTableBody2(props, ref) {
@@ -4323,6 +4325,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 {
@@ -4356,14 +4362,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;
@@ -5096,7 +5102,7 @@ var useColumnPointerEvents = ({
   };
 };
 
-// src/components/InfiniteTable/utils/RenderHookComponent.tsx
+// src/components/InfiniteTable/utils/RenderHookComponentForInfinite.tsx
 var React22 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx
@@ -5120,8 +5126,8 @@ var import_react17 = __toModule(require("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) {
@@ -5161,7 +5167,7 @@ function ExpanderIcon(props) {
 var React17 = __toModule(require("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) => {
@@ -5359,7 +5365,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";
 
@@ -5368,7 +5374,7 @@ var React19 = __toModule(require("react"));
 var import_react18 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/CheckBox.css.ts
-var CheckBoxCls = "_16lm1iwe";
+var CheckBoxCls = "_16lm1iwf";
 
 // src/components/InfiniteTable/components/CheckBox.tsx
 function forwardProps2() {
@@ -5849,7 +5855,14 @@ 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__ */ React21.createElement(InfiniteTableCell, __spreadValues({}, cellProps));
@@ -5860,11 +5873,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__ */ React22.createElement(ContextProvider, {
@@ -5926,19 +5941,19 @@ var import_react20 = __toModule(require("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 = {
@@ -6501,9 +6516,9 @@ 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;
@@ -6886,7 +6901,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__ */ React28.createElement(React28.Fragment, null, showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ React28.createElement(InfiniteTableColumnHeaderFilter, {
@@ -7478,8 +7495,8 @@ var InfiniteTableLicenseFooter = React34.forwardRef(function InfiniteTableLicens
 var React35 = __toModule(require("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
@@ -7528,12 +7545,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 {};
@@ -7606,6 +7625,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();
@@ -7626,7 +7653,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);
@@ -7695,14 +7722,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,
@@ -7804,7 +7823,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,
@@ -7839,7 +7858,7 @@ function getEnhancedGroupData(options, deepMapValue) {
     selectedChildredCount: 0,
     deselectedChildredCount: 0,
     id: `${groupKeys}`,
-    collapsed,
+    collapsed: false,
     dataSourceHasGrouping: true,
     selfLoaded,
     error: options.error,
@@ -7898,7 +7917,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,
@@ -7911,11 +7930,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);
@@ -7927,6 +7945,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;
@@ -7934,27 +7956,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) {
@@ -7992,9 +8003,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;
@@ -8660,8 +8672,10 @@ function useLazyLoadRange() {
   const {
     lazyLoadBatchSize,
     lazyLoad,
+    originalLazyGroupDataChangeDetect,
     notifyRenderRangeChange,
     dataArray,
+    groupRowsState,
     scrollStopDelayUpdatedByTable
   } = componentState;
   const latestRenderRangeRef = (0, import_react30.useRef)(null);
@@ -8690,20 +8704,27 @@ function useLazyLoadRange() {
     }, cache);
   };
   const debouncedLoadRange = (0, import_react30.useMemo)(() => debounce(loadRange, { wait: scrollStopDelayUpdatedByTable }), [scrollStopDelayUpdatedByTable]);
-  (0, import_react30.useEffect)(() => {
+  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
+  });
   (0, import_react30.useEffect)(() => {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
       debouncedLoadRange();
     }
-    return;
   }, [dataArray]);
 }
 function lazyLoadRange(options, cache) {
@@ -8793,6 +8814,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) {
@@ -8869,8 +8900,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;
@@ -9152,7 +9183,8 @@ var RowSelectionState = class {
     if (cachedResult != null) {
       return cachedResult;
     }
-    if (groupKeys.length > this.getGroupByLength()) {
+    const groupByLength = this.getGroupByLength();
+    if (groupKeys.length > groupByLength) {
       const result2 = this.isRowSelected(groupKeys) ? { selectedCount: 1, deselectedCount: 0 } : {
         selectedCount: 0,
         deselectedCount: 1
@@ -9160,7 +9192,7 @@ var RowSelectionState = class {
       this.selectionCountCache.set(groupKeys, result2);
       return result2;
     }
-    if (this.onlyUsePrimaryKeys) {
+    if (groupByLength && this.onlyUsePrimaryKeys) {
       const allKeys2 = this.getAllPrimaryKeysInsideGroup(groupKeys);
       let selectedCount2 = 0;
       let deselectedCount2 = 0;
@@ -9237,13 +9269,16 @@ 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;
     return {
       lazyLoad: !!state.lazyLoad,
       toPrimaryKey: state.toPrimaryKey,
-      onlyUsePrimaryKeys: state.usePrimaryKeysForMultiRowSelection,
+      onlyUsePrimaryKeys: !state.useGroupKeysForMultiRowSelection,
       groupBy: state.groupBy,
       groupDeepMap: state.groupDeepMap,
       indexer: state.indexer,
@@ -9565,7 +9600,7 @@ var forwardProps3 = (setupState) => {
     livePagination: 1,
     filterFunction: 1,
     filterValue: 1,
-    usePrimaryKeysForMultiRowSelection: (usePrimaryKeysForMultiRowSelection) => usePrimaryKeysForMultiRowSelection != null ? usePrimaryKeysForMultiRowSelection : false,
+    useGroupKeysForMultiRowSelection: (useGroupKeysForMultiRowSelection) => useGroupKeysForMultiRowSelection != null ? useGroupKeysForMultiRowSelection : false,
     filterDelay: (filterDelay) => filterDelay != null ? filterDelay : 200,
     filterTypes: (filterTypes) => {
       return __spreadValues(__spreadValues({}, defaultFilterTypes), filterTypes);
@@ -9579,16 +9614,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) {
@@ -9647,8 +9673,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,
@@ -12391,7 +12426,7 @@ var useLicense = (licenseKey = "") => {
   const valid = (0, import_react44.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.4.9"
+      version: "0.4.12"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -12726,7 +12761,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;
@@ -12738,7 +12780,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) {
@@ -12768,8 +12810,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();
@@ -12834,16 +12877,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;
@@ -12933,18 +12975,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;
 }
@@ -12955,16 +12998,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;
   }
@@ -12993,21 +13035,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;
@@ -13022,15 +13064,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();
   }
 }
@@ -13051,7 +13092,10 @@ function useEventHandlersContext() {
       getState,
       actions,
       getDataSourceState,
-      dataSourceActions
+      dataSourceActions,
+      cloneRowSelection: (rowSelection) => {
+        return cloneRowSelection(rowSelection, getDataSourceState);
+      }
     };
     return context2;
   }, [getState, actions, getDataSourceState, dataSourceActions]);
@@ -13061,13 +13105,7 @@ function handleDOMEvents() {
   const context = useEventHandlersContext();
   (0, import_react48.useEffect)(() => {
     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) {
@@ -13081,10 +13119,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 () => {
@@ -13279,8 +13317,244 @@ InfiniteTable.defaultProps = {
   columnHeaderHeight: toCSSVarName(columnHeaderHeightName)
 };
 
+// src/components/Menu/index.tsx
+var React39 = __toModule(require("react"));
+var import_react49 = __toModule(require("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__ */ React39.createElement("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__ */ React39.createElement(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 React39.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] = (0, import_react49.useState)(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__ */ React39.createElement("div", __spreadValues({}, domProps2), /* @__PURE__ */ React39.createElement(ExpanderIcon, null)) : /* @__PURE__ */ React39.createElement("div", __spreadValues({}, domProps2));
+        }
+      });
+    }
+  }
+  renderedChildren = runtimeItems.map((runtimeItem, index) => /* @__PURE__ */ React39.createElement(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__ */ React39.createElement("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] = React39.useState(false);
+  const [pressed, setPressed] = React39.useState(false);
+  const { columns, item, index } = props;
+  const key = item.type === "item" ? item.value.key : index;
+  let content = null;
+  if (item.type === "decoration") {
+    content = /* @__PURE__ */ React39.createElement("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__ */ React39.createElement(RenderHookComponent, {
+        render: col.render,
+        renderParam: {
+          item: target,
+          column: col,
+          value: target[field],
+          domProps
+        }
+      }) : /* @__PURE__ */ React39.createElement("div", __spreadValues({
+        key: `${key}-${field}`
+      }, domProps), target[field]);
+    }).filter(Boolean);
+  }
+  return /* @__PURE__ */ React39.createElement("div", {
+    className: MenuRowCls
+  }, content);
+}
+function MenuItem(_props) {
+  return null;
+}
+MenuItem.defaultProps = {
+  __is_menu_item: true
+};
+
 // src/index.tsx
 var components = {
   CheckBox: InfiniteCheckBox,
   LoadMask
 };
+//!collapsed || lazyLoad;