beautiful-grid 1.0.13 → 1.0.15

package/style.css

@@ -467,7 +467,7 @@
   max-height: var(--bgrid-item-cell-height, 28px);
 }
 
-.bgrid-body-table > tbody > tr > td > * {
+.bgrid-body-table > tbody > tr.bgrid-body-row > td > * {
   max-height: var(--bgrid-item-cell-height, 28px);
 }
 
@@ -497,7 +497,8 @@
   box-shadow: var(--bgrid-frozen-boundary-shadow);
 }
 
-.bgrid-body-table > tbody > tr > td[data-none] {
+.bgrid-body-table > tbody > tr > td[data-none],
+.bgrid-summary-table > tbody > tr > td[data-none] {
   border-right: none;
 }
 
@@ -768,11 +769,11 @@
   border: 0 !important;
 }
 
-.bgrid-body-vertical-bordered > tbody > tr > td {
+.bgrid-body-vertical-bordered > tbody > tr > td:not([data-none]) {
   border-right: 1px solid var(--bgrid-border-color-light, var(--bgrid-border-color-base));
 }
 
-.bgrid-summary-vertical-bordered > tbody > tr > td {
+.bgrid-summary-vertical-bordered > tbody > tr > td:not([data-none]) {
   border-right: 1px solid var(--bgrid-border-color-light, var(--bgrid-border-color-base));
 }
 
@@ -795,6 +796,10 @@
   padding: 0 6.5px;
 }
 
+.bgrid-summary-table > tbody > tr > td[data-none] {
+  border-right: none !important;
+}
+
 .bgrid-page-no {
   transition: all 0.3s;
   display: flex;
@@ -2115,7 +2120,7 @@
   padding-right: var(--bgrid-scrollbar-modern-gutter-size);
 }
 
-[data-scroll-variant='classic'] .bgrid-vertical-scrollbar-area {
+[data-scroll-variant='classic'] > .bgrid-vertical-scrollbar-area {
   width: var(--bgrid-scrollbar-classic-gutter-size);
   border-left-color: var(--bgrid-scrollbar-classic-gutter-border-color);
   background: var(--bgrid-scrollbar-classic-gutter-bg);
@@ -2127,7 +2132,7 @@
   background: var(--bgrid-scrollbar-classic-gutter-bg);
 }
 
-[data-scroll-variant='modern'] .bgrid-vertical-scrollbar-area {
+[data-scroll-variant='modern'] > .bgrid-vertical-scrollbar-area {
   width: var(--bgrid-scrollbar-modern-gutter-size);
   border-left-color: var(--bgrid-scrollbar-modern-gutter-border-color);
   background: var(--bgrid-scrollbar-modern-gutter-bg);
@@ -2327,19 +2332,15 @@
 }
 
 /* Hide native scrollbar when using custom scrollbars */
-[data-scroll-variant='classic'] [role='rfdg-scroll-container']::-webkit-scrollbar,
-[data-scroll-variant='modern'] [role='rfdg-scroll-container']::-webkit-scrollbar,
-[data-scroll-variant='classic'] .bgrid-scroll-container::-webkit-scrollbar,
-[data-scroll-variant='modern'] .bgrid-scroll-container::-webkit-scrollbar {
+[data-scroll-variant='classic'] > .bgrid-scroll-container::-webkit-scrollbar,
+[data-scroll-variant='modern'] > .bgrid-scroll-container::-webkit-scrollbar {
   display: none;
   width: 0 !important;
   height: 0 !important;
 }
 
-[data-scroll-variant='classic'] [role='rfdg-scroll-container'],
-[data-scroll-variant='modern'] [role='rfdg-scroll-container'],
-[data-scroll-variant='classic'] .bgrid-scroll-container,
-[data-scroll-variant='modern'] .bgrid-scroll-container {
+[data-scroll-variant='classic'] > .bgrid-scroll-container,
+[data-scroll-variant='modern'] > .bgrid-scroll-container {
   scrollbar-width: none; /* Firefox */
   -ms-overflow-style: none; /* IE/Edge */
 }
@@ -2445,6 +2446,155 @@
   white-space: nowrap;
 }
 
+.bgrid-master-detail-cell {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+}
+
+.bgrid-master-detail-toggle,
+.bgrid-master-detail-toggle-spacer {
+  display: inline-flex;
+  flex: 0 0 18px;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 18px;
+  height: 18px;
+  margin: 0 4px 0 0;
+}
+
+.bgrid-master-detail-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  line-height: 1;
+  font-size: 14px;
+}
+
+.bgrid-master-detail-icon > svg {
+  display: block;
+}
+
+.bgrid-master-detail-toggle {
+  padding: 0;
+  color: inherit;
+  font: inherit;
+  line-height: 1;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: 2px;
+}
+
+.bgrid-master-detail-toggle:hover:not(:disabled) {
+  background: var(--bgrid-body-hover-bg);
+}
+
+.bgrid-master-detail-toggle:focus-visible {
+  outline: 2px solid var(--bgrid-active-cell-ring-color);
+  outline-offset: -1px;
+}
+
+.bgrid-master-detail-toggle:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.bgrid-master-detail-cell-content {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bgrid-detail-row,
+.bgrid-detail-row:hover,
+.bgrid-detail-row.bgrid-row-hover,
+.bgrid-detail-frozen-row,
+.bgrid-detail-frozen-row:hover,
+.bgrid-detail-frozen-row.bgrid-row-hover,
+.bgrid-body-table > tbody > tr.bgrid-detail-row,
+.bgrid-body-table > tbody > tr.bgrid-detail-row:hover,
+.bgrid-body-table > tbody > tr.bgrid-detail-row.bgrid-row-hover,
+.bgrid-body-table > tbody > tr.bgrid-detail-frozen-row,
+.bgrid-body-table > tbody > tr.bgrid-detail-frozen-row:hover,
+.bgrid-body-table > tbody > tr.bgrid-detail-frozen-row.bgrid-row-hover {
+  background-color: var(--bgrid-body-bg) !important;
+}
+
+.bgrid-detail-row {
+  box-sizing: border-box;
+  max-height: none !important;
+}
+
+.bgrid-body-table > tbody > tr.bgrid-detail-row > td.bgrid-detail-cell {
+  padding: 0 !important;
+  margin: 0 !important;
+  border-top: none !important;
+  border-left: none !important;
+  border-right: none !important;
+  border-bottom: 1px solid var(--bgrid-border-color-base) !important;
+  background-color: var(--bgrid-body-bg) !important;
+  vertical-align: top;
+  max-height: none !important;
+  height: auto !important;
+  overflow: visible !important;
+  white-space: normal !important;
+  text-overflow: clip !important;
+  line-height: normal !important;
+}
+
+.bgrid-body-table > tbody > tr.bgrid-detail-row > td[data-none] {
+  padding: 0 !important;
+  margin: 0 !important;
+  border-top: none !important;
+  border-left: none !important;
+  border-right: none !important;
+  border-bottom: 1px solid var(--bgrid-border-color-base) !important;
+  background-color: var(--bgrid-body-bg) !important;
+  max-height: none !important;
+}
+
+.bgrid-body-table > tbody > tr.bgrid-detail-row > td.bgrid-detail-cell > * {
+  max-height: none !important;
+}
+
+.bgrid-master-detail-panel {
+  box-sizing: border-box;
+  overflow: auto;
+  pointer-events: auto;
+  background-color: var(--bgrid-body-bg);
+  height: calc(var(--bgrid-item-cell-height) - 1px);
+  min-height: calc(var(--bgrid-item-cell-height) - 1px);
+  max-height: calc(var(--bgrid-item-cell-height) - 1px) !important;
+  max-width: 100%;
+}
+
+.bgrid-detail-frozen-row,
+.bgrid-detail-spacer-row {
+  pointer-events: none;
+  max-height: none !important;
+}
+
+.bgrid-body-table > tbody > tr.bgrid-detail-frozen-row > td,
+.bgrid-body-table > tbody > tr.bgrid-detail-spacer-row > td {
+  padding: 0 !important;
+  margin: 0 !important;
+  border-top: none !important;
+  border-left: none !important;
+  border-right: none !important;
+  border-bottom: 1px solid var(--bgrid-border-color-base) !important;
+  background-color: var(--bgrid-body-bg) !important;
+  max-height: none !important;
+  height: inherit !important;
+}
+
 .bgrid-editor-icon {
   position: relative;
   z-index: 31;

package/types/BGrid.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { BGridProps } from './types';
-export declare function BGrid<T = Record<string, any>>({ ref, width, height, headerHeight, footerHeight, summaryHeight, itemHeight, itemPadding, getRowHeight, columns, columnsGroup, columnGroups, onChangeColumns, frozenColumnIndex, frozenRowCount, data, page, scrollbar, status, pagination, bottomBarHeight, scrollTop, scrollLeft, className, style, rowChecked, sort, onClick, loading, spinning, disabled, rowKey, selectedRowKey, editable, onChangeData, showLineNumber, msg, getRowClassName, editTrigger, cellMergeOptions, cellSelectionOptions, cellNavigationOptions, variant, summary, columnSortable, reorder, pivot, dataControl, icons, columnVisibility, searchOptions, contextMenuOptions, tree, }: BGridProps<T>): React.JSX.Element;
+export declare function BGrid<T = Record<string, any>>({ ref, width, height, headerHeight, footerHeight, summaryHeight: explicitSummaryHeight, summaryRowHeight, itemHeight, itemPadding, getRowHeight, columns, columnsGroup, columnGroups, onChangeColumns, frozenColumnIndex, frozenRowCount, data, page, scrollbar, status, pagination, bottomBarHeight, scrollTop, scrollLeft, className, style, rowChecked, sort, onClick, loading, spinning, disabled, rowKey, selectedRowKey, editable, onChangeData, showLineNumber, msg, getRowClassName, editTrigger, cellMergeOptions, cellSelectionOptions, cellNavigationOptions, variant, summary, columnSortable, reorder, pivot, dataControl, icons, columnVisibility, searchOptions, contextMenuOptions, tree, masterDetail, }: BGridProps<T>): React.JSX.Element;

package/types/components/MasterDetailCell.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { BGridColumn, BGridDataItem } from '../types';
+interface Props<T> {
+    column: BGridColumn<T>;
+    item: BGridDataItem<T>;
+    sourceIndex: number;
+    children: React.ReactNode;
+}
+export declare function MasterDetailCell<T>({ column, item, sourceIndex, children }: Props<T>): React.JSX.Element;
+export interface MasterDetailRowProps<T> {
+    item: BGridDataItem<T>;
+    sourceIndex: number;
+    visibleIndex: number;
+    detailHeight: number;
+    isLeftRegion: boolean;
+    viewportWidth: number;
+    colSpan: number;
+    frozenColumnsWidth?: number;
+}
+export declare function MasterDetailRow<T>({ item, sourceIndex, visibleIndex, detailHeight, isLeftRegion, viewportWidth, colSpan, frozenColumnsWidth, }: MasterDetailRowProps<T>): React.JSX.Element | null;
+export {};

package/types/components/MasterDetailContext.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { BGridDataItem, BGridMasterDetailIcons, BGridMasterDetailOptions } from '../types';
+export interface BGridMasterDetailContextValue {
+    gridId: string;
+    expandColumnId: string;
+    icons?: BGridMasterDetailIcons;
+    expandAriaLabel: string;
+    collapseAriaLabel: string;
+    disabled: boolean;
+    expandedKeysSet: ReadonlySet<React.Key>;
+    getRowKey: (values: unknown) => React.Key | undefined;
+    hasDetail: (item: BGridDataItem<any>, sourceIndex: number) => boolean;
+    detailRender: BGridMasterDetailOptions<any>['detailRender'];
+    toggle: (rowKey: React.Key, item: BGridDataItem<any>, sourceIndex: number) => void;
+    collapse: (rowKey: React.Key) => void;
+    getToggleElementId: (rowKey: React.Key) => string;
+    getDetailElementId: (rowKey: React.Key) => string;
+}
+export declare const MasterDetailContext: React.Context<BGridMasterDetailContextValue | undefined>;
+export declare function useMasterDetailContext(): BGridMasterDetailContextValue | undefined;

package/types/components/Table.d.ts

@@ -13,6 +13,7 @@ interface Props<T> {
     status?: BGridResolvedStatusOptions;
     pagination?: BGridResolvedPaginationViewOptions;
     summaryHeight?: number;
+    summaryRowHeight?: number;
     itemHeight?: number;
     itemPadding?: number;
     rowHeightMetrics: BGridRowHeightMetrics;

package/types/components/TableBody.d.ts

@@ -29,8 +29,9 @@ interface Props {
     onRowReorderPointerDown?: (event: React.PointerEvent<HTMLButtonElement>, rowIndex: number) => void;
     onRowReorderKeyDown?: (event: React.KeyboardEvent<HTMLButtonElement>, rowIndex: number) => void;
     rowHeightMetrics?: BGridRowHeightMetrics;
+    viewportWidth?: number;
 }
-declare function TableBody({ rowKeyRegistry, region, rowRange, style, role, quadrant, allowRowReorder, onRowReorderPointerDown, onRowReorderKeyDown, rowHeightMetrics, }: Props): React.JSX.Element;
+declare function TableBody({ rowKeyRegistry, region, rowRange, style, role, quadrant, allowRowReorder, onRowReorderPointerDown, onRowReorderKeyDown, rowHeightMetrics, viewportWidth, }: Props): React.JSX.Element;
 interface BodyTableProps extends React.TableHTMLAttributes<HTMLTableElement> {
     variant: BGridProps<any>['variant'];
 }

package/types/store/createAppStore.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ReactNode } from 'react';
 import { StoreApi } from 'zustand';
 import { AppModel, AppStore } from '../types';
-export type AppStoreInitialState<T = any> = Partial<Pick<AppModel<T>, 'width' | 'height' | 'headerHeight' | 'footerHeight' | 'bottomBarHeight' | 'scrollbar' | 'status' | 'pagination' | 'summaryHeight' | 'itemHeight' | 'itemPadding' | 'frozenColumnIndex' | 'frozenRowCount' | 'frozenRowsHeight' | 'frozenColumnsWidth' | 'columns' | 'columnsGroup' | 'columnGroups' | 'data' | 'sourceData' | 'sourceIndexByVisibleIndex' | 'visibleIndexBySourceIndex' | 'contentBodyHeight' | 'displayItemCount' | 'checkedIndexesMap' | 'rowChecked' | 'checkedAll' | 'sort' | 'sortParams' | 'dataQuery' | 'activeCell' | 'activeCellHost' | 'cellInteractionSession' | 'cellNavigationOptions' | 'dataControl' | 'filterDrafts' | 'activeToolboxColumnId' | 'columnVisibilityState' | 'searchOptions' | 'contextMenuOptions' | 'searchOpen' | 'searchQuery' | 'searchStatus' | 'searchMatches' | 'activeSearchMatchIndex' | 'contextMenuState' | 'icons' | 'page' | 'displayPaginationLength' | 'loading' | 'disabled' | 'spinning' | 'scrollTop' | 'scrollLeft' | 'rowKey' | 'selectedRowKey' | 'editable' | 'editTrigger' | 'showLineNumber' | 'msg' | 'getRowClassName' | 'cellMergeOptions' | 'variant' | 'summary' | 'columnSortable' | 'reorder' | 'className' | 'style' | 'onClick' | 'onChangeColumns' | 'onChangeData' | 'onLoadMore'>>;
+export type AppStoreInitialState<T = any> = Partial<Pick<AppModel<T>, 'width' | 'height' | 'headerHeight' | 'footerHeight' | 'bottomBarHeight' | 'scrollbar' | 'status' | 'pagination' | 'summaryHeight' | 'summaryRowHeight' | 'itemHeight' | 'itemPadding' | 'frozenColumnIndex' | 'frozenRowCount' | 'frozenRowsHeight' | 'frozenColumnsWidth' | 'columns' | 'columnsGroup' | 'columnGroups' | 'data' | 'sourceData' | 'sourceIndexByVisibleIndex' | 'visibleIndexBySourceIndex' | 'contentBodyHeight' | 'displayItemCount' | 'checkedIndexesMap' | 'rowChecked' | 'checkedAll' | 'sort' | 'sortParams' | 'dataQuery' | 'activeCell' | 'activeCellHost' | 'cellInteractionSession' | 'cellNavigationOptions' | 'dataControl' | 'filterDrafts' | 'activeToolboxColumnId' | 'columnVisibilityState' | 'searchOptions' | 'contextMenuOptions' | 'searchOpen' | 'searchQuery' | 'searchStatus' | 'searchMatches' | 'activeSearchMatchIndex' | 'contextMenuState' | 'icons' | 'page' | 'displayPaginationLength' | 'loading' | 'disabled' | 'spinning' | 'scrollTop' | 'scrollLeft' | 'rowKey' | 'selectedRowKey' | 'editable' | 'editTrigger' | 'showLineNumber' | 'msg' | 'getRowClassName' | 'cellMergeOptions' | 'variant' | 'summary' | 'columnSortable' | 'reorder' | 'className' | 'style' | 'onClick' | 'onChangeColumns' | 'onChangeData' | 'onLoadMore'>>;
 interface AppStoreProviderProps<T = any> {
     children: ReactNode;
     initialState?: AppStoreInitialState<T>;

package/types/types.d.ts

@@ -219,6 +219,7 @@ export interface BGridCellMergeColumn {
 export interface BGridSummaryItemRenderProps<T> {
     column: BGridColumn<T>;
     columnIndex: number;
+    rowIndex?: number;
     data: BGridDataItem<T>[];
 }
 export interface BGridSummaryColumn<T> {
@@ -226,9 +227,22 @@ export interface BGridSummaryColumn<T> {
     align?: AlignDirection;
     colSpan?: number;
     className?: string;
+    style?: React.CSSProperties;
     getClassName?: (key: string | string[]) => string;
     itemRender?: (props: BGridSummaryItemRenderProps<T>) => React.ReactNode;
 }
+export interface BGridSummaryRow<T> {
+    id?: string | number;
+    className?: string;
+    style?: React.CSSProperties;
+    height?: number;
+    columns: BGridSummaryColumn<T>[];
+}
+export interface BGridSummaryOptions<T> {
+    columns?: BGridSummaryColumn<T>[];
+    rows?: (BGridSummaryRow<T> | BGridSummaryColumn<T>[])[];
+    position: 'top' | 'bottom';
+}
 export declare enum BGridDataItemStatus {
     new = 0,
     edit = 1,
@@ -791,6 +805,7 @@ export interface BGridProps<T> {
     footerHeight?: number;
     bottomBarHeight?: number;
     summaryHeight?: number;
+    summaryRowHeight?: number;
     itemHeight?: number;
     itemPadding?: number;
     /**
@@ -897,10 +912,7 @@ export interface BGridProps<T> {
     };
     cellNavigationOptions?: BGridCellNavigationOptions;
     variant?: 'default' | 'vertical-bordered';
-    summary?: {
-        columns: BGridSummaryColumn<T>[];
-        position: 'top' | 'bottom';
-    };
+    summary?: BGridSummaryOptions<T>;
     columnSortable?: boolean;
     reorder?: BGridReorderInfo<T>;
     reorderingInfo?: BGridReorderingInfo;
@@ -913,6 +925,8 @@ export interface BGridProps<T> {
     contextMenuOptions?: BGridContextMenuOptions<T>;
     /** Enables hierarchical rows from flat data related by rowKey and parentRowKey. */
     tree?: BGridTreeOptions<T>;
+    /** Enables master-detail expandable rows with full-width detail panels or nested grids. */
+    masterDetail?: BGridMasterDetailOptions<T>;
 }
 export interface BGridTreeIcons {
     expanded?: React.ReactNode;
@@ -949,6 +963,54 @@ export interface BGridTreeOptions<T> {
     expandAriaLabel?: string;
     collapseAriaLabel?: string;
 }
+export type BGridMasterDetailExpandMode = 'multiple' | 'single';
+export interface BGridMasterDetailRenderProps<T> {
+    item: BGridDataItem<T>;
+    rowKey: React.Key;
+    sourceIndex: number;
+    visibleIndex: number;
+    expanded: true;
+    collapse: () => void;
+}
+export interface BGridMasterDetailIcons {
+    expanded?: React.ReactNode;
+    collapsed?: React.ReactNode;
+}
+export interface BGridMasterDetailChangeEvent<T> {
+    rowKey: React.Key;
+    expanded: boolean;
+    item: BGridDataItem<T>;
+    sourceIndex: number;
+}
+export interface BGridMasterDetailOptions<T> {
+    /** Enables or disables master-detail row expansion. Defaults to true when masterDetail is provided. */
+    enabled?: boolean;
+    /** Custom renderer for the expanded detail region. */
+    detailRender: (props: BGridMasterDetailRenderProps<T>) => React.ReactNode;
+    /**
+     * Detail area total height in pixels, including padding and borders.
+     * Accepts a fixed number or a function that returns the height for a given row. Defaults to 200.
+     */
+    detailRowHeight?: number | ((item: BGridDataItem<T>, sourceIndex: number) => number);
+    /** Column ID that renders the toggle button. Defaults to the first visible column. */
+    expandColumnId?: string;
+    /** Determines whether a given row provides an expandable detail area. Defaults to true for all rows. */
+    hasDetail?: (item: BGridDataItem<T>, sourceIndex: number) => boolean;
+    /** 'single' allows only one row expanded at a time (accordion). Defaults to 'multiple'. */
+    expandMode?: BGridMasterDetailExpandMode;
+    /** Controlled expanded row keys. */
+    expandedRowKeys?: readonly React.Key[];
+    /** Initial expanded row keys for uncontrolled usage. */
+    defaultExpandedRowKeys?: readonly React.Key[];
+    /** Callback triggered when the expanded row keys change through user interaction. */
+    onExpandedRowKeysChange?: (keys: React.Key[], event: BGridMasterDetailChangeEvent<T>) => void;
+    /** Custom expand/collapse icons. */
+    icons?: BGridMasterDetailIcons;
+    /** Accessibility label for the expand button. */
+    expandAriaLabel?: string;
+    /** Accessibility label for the collapse button. */
+    collapseAriaLabel?: string;
+}
 export interface BGridTreeChangeDataMeta {
     rowKey: React.Key;
     parentRowKey?: React.Key;
@@ -982,6 +1044,8 @@ export interface AppModelColumn<T> extends BGridColumn<T> {
     left: number;
     /** @internal Marks the single column that hosts tree indentation and folding controls. */
     treeCell?: boolean;
+    /** @internal Marks the single column that hosts master-detail expand/collapse toggle controls. */
+    masterDetailCell?: boolean;
 }
 export interface AppModel<T> extends BGridProps<T> {
     initialized: boolean;
@@ -989,6 +1053,7 @@ export interface AppModel<T> extends BGridProps<T> {
     footerHeight: number;
     bottomBarHeight: number;
     summaryHeight: number;
+    summaryRowHeight?: number;
     itemHeight: number;
     itemPadding: number;
     frozenColumnIndex: number;
@@ -1099,6 +1164,7 @@ export interface AppActions<T> {
     setFooterHeight: (footerHeight: number) => void;
     setBottomBarHeight: (bottomBarHeight: number) => void;
     setSummaryHeight: (summaryHeight: number) => void;
+    setSummaryRowHeight: (summaryRowHeight?: number) => void;
     setItemHeight: (itemHeight: number) => void;
     setItemPadding: (itemPadding: number) => void;
     setFrozenColumnIndex: (frozenColumnIndex: number) => void;

package/types/utils/cellSelectionGeometry.d.ts

@@ -24,8 +24,10 @@ export interface BGridSelectionGeometryParams {
     frozenRowCount: number;
     frozenColumnsWidth: number;
     rowOffsets?: ArrayLike<number>;
+    rowHeights?: ArrayLike<number>;
+    detailHeights?: ArrayLike<number>;
 }
-export declare function getCellSelectionFragments({ ranges, columns, rowCount, rowHeight, frozenColumnCount, frozenRowCount, frozenColumnsWidth, rowOffsets, }: BGridSelectionGeometryParams): BGridSelectionFragment[];
+export declare function getCellSelectionFragments({ ranges, columns, rowCount, rowHeight, frozenColumnCount, frozenRowCount, frozenColumnsWidth, rowOffsets, rowHeights, detailHeights, }: BGridSelectionGeometryParams): BGridSelectionFragment[];
 export declare function clipCellSelectionFragment(fragment: BGridSelectionFragment, viewport: {
     left: number;
     top: number;

package/types/utils/index.d.ts

@@ -30,3 +30,4 @@ export * from './checkedIndexes';
 export * from './exportData';
 export * from './exportCsv';
 export * from './exportExcel';
+export * from './summary';

package/types/utils/rowHeightMetrics.d.ts

@@ -1,11 +1,25 @@
+import * as React from 'react';
 import { BGridDataItem, BGridProps } from '../types';
+export interface MasterDetailHeightOptions<T> {
+    expandedKeysSet: ReadonlySet<React.Key>;
+    getRowKey: (values: unknown, index: number) => React.Key | undefined;
+    getDetailHeight: (item: BGridDataItem<T>, sourceIndex: number) => number;
+    hasDetail?: (item: BGridDataItem<T>, sourceIndex: number) => boolean;
+    sourceIndexByVisibleIndex?: readonly number[];
+}
 export interface BGridRowHeightMetrics {
+    /** Master row heights (for <tr> and cell rendering). */
     heights: Float64Array;
+    /** Layout offsets including detail heights (for virtual scrolling, paddingTop, selection overlays, total height). */
     offsets: Float64Array;
+    /** Total layout height including all rows and expanded details. */
     totalHeight: number;
+    /** Whether layout heights are variable. */
     variable: boolean;
+    /** Detail panel heights for each visible row (0 if row has no detail or is not expanded). */
+    detailHeights?: Float64Array;
 }
-export declare function createRowHeightMetrics<T>(data: readonly BGridDataItem<T>[], fallbackHeight: number, getRowHeight?: BGridProps<T>['getRowHeight']): BGridRowHeightMetrics;
+export declare function createRowHeightMetrics<T>(data: readonly BGridDataItem<T>[], fallbackHeight: number, getRowHeight?: BGridProps<T>['getRowHeight'], masterDetail?: MasterDetailHeightOptions<T>): BGridRowHeightMetrics;
 /** Returns the row containing offset, or rowCount when offset is at/after the end. */
 export declare function getRowIndexAtOffset(offsets: ArrayLike<number>, offset: number): number;
 /** Returns the first offset index whose value is greater than or equal to target. */

package/types/utils/summary.d.ts

@@ -0,0 +1,13 @@
+import { BGridColumn, BGridSummaryColumn, BGridSummaryOptions, BGridSummaryRow } from '../types';
+export declare const DEFAULT_SUMMARY_ROW_HEIGHT = 30;
+export declare function normalizeSummaryRows<T>(summary?: BGridSummaryOptions<T>): BGridSummaryRow<T>[];
+export declare function computeSummaryHeight<T>(options: {
+    summary?: BGridSummaryOptions<T>;
+    summaryHeight?: number;
+    summaryRowHeight?: number;
+}): number;
+export declare function buildSummaryRowCells<T>(columns: BGridColumn<T>[], summaryColumns?: BGridSummaryColumn<T>[], startIndex?: number): ({
+    column: BGridColumn<T>;
+    columnIndex: number;
+    summaryColumn?: BGridSummaryColumn<T>;
+} | null)[];