beautiful-grid 1.0.13 → 1.0.15

package/cjs/BGrid.js

@@ -68,6 +68,17 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -78,6 +89,7 @@ var Table_1 = __importDefault(require("./components/Table"));
 var utils_1 = require("./utils");
 var store_1 = require("./store");
 var TreeContext_1 = require("./components/TreeContext");
+var MasterDetailContext_1 = require("./components/MasterDetailContext");
 function computeModelColumns(columns, frozenColumnIndex, duplicateToolboxColumnIds) {
     var left = 0;
     var previousWidth = 0;
@@ -91,14 +103,22 @@ function computeModelColumns(columns, frozenColumnIndex, duplicateToolboxColumnI
         return __assign(__assign({}, column), { columnId: columnId, keyToken: (0, utils_1.getColumnKeyToken)(column.key), toolbox: duplicateToolboxColumnIds.has(columnId) ? false : column.toolbox, left: columnIndex < frozenColumnIndex ? -1 : left, width: (_b = column.width) !== null && _b !== void 0 ? _b : 100 });
     });
 }
+function encodeMasterDetailRowKey(rowKey) {
+    var codePoints = Array.from(String(rowKey), function (character) { return character.codePointAt(0).toString(16); });
+    return "".concat(typeof rowKey, "-").concat(codePoints.join('-'));
+}
 function BGrid(_a) {
-    var _b, _c, _d, _e;
-    var ref = _a.ref, width = _a.width, height = _a.height, _f = _a.headerHeight, headerHeight = _f === void 0 ? 30 : _f, footerHeight = _a.footerHeight, _g = _a.summaryHeight, summaryHeight = _g === void 0 ? 30 : _g, _h = _a.itemHeight, itemHeight = _h === void 0 ? 15 : _h, _j = _a.itemPadding, itemPadding = _j === void 0 ? 7 : _j, getRowHeight = _a.getRowHeight, columns = _a.columns, columnsGroup = _a.columnsGroup, columnGroups = _a.columnGroups, onChangeColumns = _a.onChangeColumns, _k = _a.frozenColumnIndex, frozenColumnIndex = _k === void 0 ? 0 : _k, _l = _a.frozenRowCount, frozenRowCount = _l === void 0 ? 0 : _l, _m = _a.data, data = _m === void 0 ? [] : _m, page = _a.page, scrollbar = _a.scrollbar, status = _a.status, pagination = _a.pagination, bottomBarHeight = _a.bottomBarHeight, _o = _a.scrollTop, scrollTop = _o === void 0 ? 0 : _o, _p = _a.scrollLeft, scrollLeft = _p === void 0 ? 0 : _p, className = _a.className, style = _a.style, rowChecked = _a.rowChecked, sort = _a.sort, onClick = _a.onClick, _q = _a.loading, loading = _q === void 0 ? false : _q, spinning = _a.spinning, disabled = _a.disabled, rowKey = _a.rowKey, selectedRowKey = _a.selectedRowKey, editable = _a.editable, onChangeData = _a.onChangeData, showLineNumber = _a.showLineNumber, msg = _a.msg, getRowClassName = _a.getRowClassName, _r = _a.editTrigger, editTrigger = _r === void 0 ? 'dblclick' : _r, cellMergeOptions = _a.cellMergeOptions, cellSelectionOptions = _a.cellSelectionOptions, cellNavigationOptions = _a.cellNavigationOptions, variant = _a.variant, summary = _a.summary, columnSortable = _a.columnSortable, reorder = _a.reorder, pivot = _a.pivot, dataControl = _a.dataControl, icons = _a.icons, columnVisibility = _a.columnVisibility, searchOptions = _a.searchOptions, contextMenuOptions = _a.contextMenuOptions, tree = _a.tree;
-    var _s = __read(React.useState(function () {
+    var _b, _c, _d, _e, _f;
+    var ref = _a.ref, width = _a.width, height = _a.height, _g = _a.headerHeight, headerHeight = _g === void 0 ? 30 : _g, footerHeight = _a.footerHeight, explicitSummaryHeight = _a.summaryHeight, _h = _a.summaryRowHeight, summaryRowHeight = _h === void 0 ? utils_1.DEFAULT_SUMMARY_ROW_HEIGHT : _h, _j = _a.itemHeight, itemHeight = _j === void 0 ? 15 : _j, _k = _a.itemPadding, itemPadding = _k === void 0 ? 7 : _k, getRowHeight = _a.getRowHeight, columns = _a.columns, columnsGroup = _a.columnsGroup, columnGroups = _a.columnGroups, onChangeColumns = _a.onChangeColumns, _l = _a.frozenColumnIndex, frozenColumnIndex = _l === void 0 ? 0 : _l, _m = _a.frozenRowCount, frozenRowCount = _m === void 0 ? 0 : _m, _o = _a.data, data = _o === void 0 ? [] : _o, page = _a.page, scrollbar = _a.scrollbar, status = _a.status, pagination = _a.pagination, bottomBarHeight = _a.bottomBarHeight, _p = _a.scrollTop, scrollTop = _p === void 0 ? 0 : _p, _q = _a.scrollLeft, scrollLeft = _q === void 0 ? 0 : _q, className = _a.className, style = _a.style, rowChecked = _a.rowChecked, sort = _a.sort, onClick = _a.onClick, _r = _a.loading, loading = _r === void 0 ? false : _r, spinning = _a.spinning, disabled = _a.disabled, rowKey = _a.rowKey, selectedRowKey = _a.selectedRowKey, editable = _a.editable, onChangeData = _a.onChangeData, showLineNumber = _a.showLineNumber, msg = _a.msg, getRowClassName = _a.getRowClassName, _s = _a.editTrigger, editTrigger = _s === void 0 ? 'dblclick' : _s, cellMergeOptions = _a.cellMergeOptions, cellSelectionOptions = _a.cellSelectionOptions, cellNavigationOptions = _a.cellNavigationOptions, variant = _a.variant, summary = _a.summary, columnSortable = _a.columnSortable, reorder = _a.reorder, pivot = _a.pivot, dataControl = _a.dataControl, icons = _a.icons, columnVisibility = _a.columnVisibility, searchOptions = _a.searchOptions, contextMenuOptions = _a.contextMenuOptions, tree = _a.tree, masterDetail = _a.masterDetail;
+    var _t = __read(React.useState(function () {
         var _a;
         return __spreadArray([], __read(((_a = tree === null || tree === void 0 ? void 0 : tree.defaultExpandedRowKeys) !== null && _a !== void 0 ? _a : [])), false);
-    }), 2), uncontrolledExpandedRowKeys = _s[0], setUncontrolledExpandedRowKeys = _s[1];
+    }), 2), uncontrolledExpandedRowKeys = _t[0], setUncontrolledExpandedRowKeys = _t[1];
     var expandedRowKeys = (_b = tree === null || tree === void 0 ? void 0 : tree.expandedRowKeys) !== null && _b !== void 0 ? _b : uncontrolledExpandedRowKeys;
+    var _u = __read(React.useState(function () { var _a; return (_a = masterDetail === null || masterDetail === void 0 ? void 0 : masterDetail.defaultExpandedRowKeys) !== null && _a !== void 0 ? _a : []; }), 2), uncontrolledMasterDetailExpandedKeys = _u[0], setUncontrolledMasterDetailExpandedKeys = _u[1];
+    var masterDetailExpandedKeys = (masterDetail === null || masterDetail === void 0 ? void 0 : masterDetail.expandedRowKeys) !== undefined
+        ? masterDetail.expandedRowKeys
+        : uncontrolledMasterDetailExpandedKeys;
     var warnedSearchControlledRef = React.useRef({
         open: false,
         query: false,
@@ -115,7 +135,7 @@ function BGrid(_a) {
     var resolvedColumns = ((_c = pivotData === null || pivotData === void 0 ? void 0 : pivotData.columns) !== null && _c !== void 0 ? _c : columns);
     var visibilityOptions = typeof columnVisibility === 'object' ? columnVisibility : undefined;
     var visibilityEnabled = columnVisibility === true || (visibilityOptions !== undefined && visibilityOptions.enabled !== false);
-    var _t = __read(React.useState(function () { var _a; return Array.from(new Set((_a = visibilityOptions === null || visibilityOptions === void 0 ? void 0 : visibilityOptions.defaultHiddenColumnIds) !== null && _a !== void 0 ? _a : [])); }), 2), uncontrolledHiddenColumnIds = _t[0], setUncontrolledHiddenColumnIds = _t[1];
+    var _v = __read(React.useState(function () { var _a; return Array.from(new Set((_a = visibilityOptions === null || visibilityOptions === void 0 ? void 0 : visibilityOptions.defaultHiddenColumnIds) !== null && _a !== void 0 ? _a : [])); }), 2), uncontrolledHiddenColumnIds = _v[0], setUncontrolledHiddenColumnIds = _v[1];
     var hiddenColumnIds = React.useMemo(function () {
         var _a;
         if (!visibilityEnabled)
@@ -167,7 +187,13 @@ function BGrid(_a) {
     var resolvedGetRowClassName = pivotEnabled ? undefined : getRowClassName;
     var requestedTreeEnabled = !!tree && tree.enabled !== false;
     var treeEnabled = requestedTreeEnabled && !pivotEnabled && resolvedRowKey !== undefined;
-    var resolvedCellMergeOptions = treeEnabled ? undefined : visibilityProjection.cellMergeOptions;
+    var requestedMasterDetailEnabled = !!masterDetail && masterDetail.enabled !== false;
+    var masterDetailEnabled = requestedMasterDetailEnabled &&
+        !pivotEnabled &&
+        !treeEnabled &&
+        resolvedRowKey !== undefined &&
+        frozenRowCount <= 0;
+    var resolvedCellMergeOptions = treeEnabled || masterDetailEnabled ? undefined : visibilityProjection.cellMergeOptions;
     var resolvedCellSelectionOptions = resolvedDisabled
         ? __assign(__assign({}, cellSelectionOptions), { enabled: false }) : cellSelectionOptions;
     var resolvedSummary = visibilityProjection.summary;
@@ -179,11 +205,11 @@ function BGrid(_a) {
     var hasActiveClientQuery = (resolvedDataControl === null || resolvedDataControl === void 0 ? void 0 : resolvedDataControl.mode) === 'client' &&
         (resolvedDataControl.query.sortParams.length > 0 || resolvedDataControl.query.filterParams.length > 0);
     var resolvedReorder = React.useMemo(function () {
-        return pivotEnabled || resolvedDisabled || treeEnabled
+        return pivotEnabled || resolvedDisabled || treeEnabled || masterDetailEnabled
             ? undefined
             : (hasActiveClientQuery || frozenRowCount > 0) && reorder
                 ? __assign(__assign({}, reorder), { enabled: false }) : reorder;
-    }, [frozenRowCount, hasActiveClientQuery, pivotEnabled, reorder, resolvedDisabled, treeEnabled]);
+    }, [frozenRowCount, hasActiveClientQuery, masterDetailEnabled, pivotEnabled, reorder, resolvedDisabled, treeEnabled]);
     // Development warnings
     React.useEffect(function () {
         var _a, _b;
@@ -225,6 +251,24 @@ function BGrid(_a) {
             if (treeEnabled && (reorder === null || reorder === void 0 ? void 0 : reorder.enabled)) {
                 console.warn('[BGrid] Row reordering is disabled while tree mode is active.');
             }
+            if (requestedMasterDetailEnabled && rowKey === undefined) {
+                console.warn('[BGrid] masterDetail requires rowKey. Falling back to flat rows.');
+            }
+            if (pivotEnabled && requestedMasterDetailEnabled) {
+                console.warn('[BGrid] masterDetail is disabled while pivot mode is active.');
+            }
+            if (treeEnabled && requestedMasterDetailEnabled) {
+                console.warn('[BGrid] masterDetail is disabled while tree mode is active.');
+            }
+            if (masterDetailEnabled && cellMergeOptions) {
+                console.warn('[BGrid] cellMergeOptions is disabled while masterDetail mode is active.');
+            }
+            if (masterDetailEnabled && (reorder === null || reorder === void 0 ? void 0 : reorder.enabled)) {
+                console.warn('[BGrid] Row reordering is disabled while masterDetail mode is active.');
+            }
+            if (requestedMasterDetailEnabled && frozenRowCount > 0) {
+                console.warn('[BGrid] masterDetail is disabled when frozenRowCount > 0.');
+            }
             if (hasHiddenColumns && columnSortable) {
                 console.warn('[BGrid] Column reordering is disabled while columns are hidden.');
             }
@@ -262,6 +306,8 @@ function BGrid(_a) {
         visibilityOptions === null || visibilityOptions === void 0 ? void 0 : visibilityOptions.hiddenColumnIds,
         visibilityOptions === null || visibilityOptions === void 0 ? void 0 : visibilityOptions.onChange,
         cellMergeOptions,
+        masterDetailEnabled,
+        requestedMasterDetailEnabled,
         requestedTreeEnabled,
         rowKey,
         treeEnabled,
@@ -329,12 +375,33 @@ function BGrid(_a) {
             ? requestedId
             : (0, utils_1.getColumnId)(visibilityProjection.columns[0]);
     }, [tree === null || tree === void 0 ? void 0 : tree.treeColumnId, treeEnabled, visibilityProjection.columns]);
+    var resolvedExpandColumnId = React.useMemo(function () {
+        if (!masterDetailEnabled || visibilityProjection.columns.length === 0)
+            return undefined;
+        var requestedId = masterDetail === null || masterDetail === void 0 ? void 0 : masterDetail.expandColumnId;
+        return requestedId &&
+            visibilityProjection.columns.some(function (column) { return (0, utils_1.getColumnId)(column) === requestedId; })
+            ? requestedId
+            : (0, utils_1.getColumnId)(visibilityProjection.columns[0]);
+    }, [masterDetail === null || masterDetail === void 0 ? void 0 : masterDetail.expandColumnId, masterDetailEnabled, visibilityProjection.columns]);
     var computedColumns = React.useMemo(function () {
         var columns = computeModelColumns(visibilityProjection.columns, resolvedFrozenColumnIndex, duplicateToolboxColumnIds);
-        if (!resolvedTreeColumnId)
-            return columns;
-        return columns.map(function (column) { return (column.columnId === resolvedTreeColumnId ? __assign(__assign({}, column), { treeCell: true }) : column); });
-    }, [duplicateToolboxColumnIds, resolvedFrozenColumnIndex, resolvedTreeColumnId, visibilityProjection.columns]);
+        if (resolvedTreeColumnId) {
+            columns = columns.map(function (column) { return (column.columnId === resolvedTreeColumnId ? __assign(__assign({}, column), { treeCell: true }) : column); });
+        }
+        if (resolvedExpandColumnId) {
+            columns = columns.map(function (column) {
+                return column.columnId === resolvedExpandColumnId ? __assign(__assign({}, column), { masterDetailCell: true }) : column;
+            });
+        }
+        return columns;
+    }, [
+        duplicateToolboxColumnIds,
+        resolvedExpandColumnId,
+        resolvedFrozenColumnIndex,
+        resolvedTreeColumnId,
+        visibilityProjection.columns,
+    ]);
     var warnedTreeColumnIdRef = React.useRef(undefined);
     React.useEffect(function () {
         if (process.env.NODE_ENV === 'production' ||
@@ -347,6 +414,18 @@ function BGrid(_a) {
         warnedTreeColumnIdRef.current = tree.treeColumnId;
         console.warn("[BGrid] tree.treeColumnId \"".concat(tree.treeColumnId, "\" is not visible. Falling back to the first visible column."));
     }, [resolvedTreeColumnId, tree === null || tree === void 0 ? void 0 : tree.treeColumnId, treeEnabled]);
+    var warnedExpandColumnIdRef = React.useRef(undefined);
+    React.useEffect(function () {
+        if (process.env.NODE_ENV === 'production' ||
+            !masterDetailEnabled ||
+            !(masterDetail === null || masterDetail === void 0 ? void 0 : masterDetail.expandColumnId) ||
+            masterDetail.expandColumnId === resolvedExpandColumnId ||
+            warnedExpandColumnIdRef.current === masterDetail.expandColumnId) {
+            return;
+        }
+        warnedExpandColumnIdRef.current = masterDetail.expandColumnId;
+        console.warn("[BGrid] masterDetail.expandColumnId \"".concat(masterDetail.expandColumnId, "\" is not visible. Falling back to the first visible column."));
+    }, [masterDetail === null || masterDetail === void 0 ? void 0 : masterDetail.expandColumnId, masterDetailEnabled, resolvedExpandColumnId]);
     var queryColumns = React.useMemo(function () { return computeModelColumns(resolvedColumns, pivotEnabled ? 0 : frozenColumnIndex, duplicateToolboxColumnIds); }, [duplicateToolboxColumnIds, frozenColumnIndex, pivotEnabled, resolvedColumns]);
     var projectedOnChangeColumns = React.useCallback(function (visibleColumnIndex, info) {
         var _a;
@@ -546,7 +625,261 @@ function BGrid(_a) {
             toggle: toggleTreeRow,
         };
     }, [resolvedDisabled, resolvedRowKey, resolvedTreeColumnId, resolvedTreeProjection, toggleTreeRow, tree]);
-    var rowHeightMetrics = React.useMemo(function () { return (0, utils_1.createRowHeightMetrics)(displayData, itemHeight + itemPadding * 2, getRowHeight); }, [displayData, getRowHeight, itemHeight, itemPadding]);
+    var rawGridId = React.useId();
+    var gridInstanceId = React.useMemo(function () { return rawGridId.replace(/[^a-zA-Z0-9_-]/g, '_'); }, [rawGridId]);
+    var masterDetailRowKeysMeta = React.useMemo(function () {
+        if (!masterDetailEnabled || resolvedRowKey === undefined)
+            return undefined;
+        var validKeys = new Set();
+        var rowsByKey = new Map();
+        var duplicateKeys = new Set();
+        var missingKeyIndexes = [];
+        for (var i = 0; i < resolvedData.length; i++) {
+            var key = (0, utils_1.getCellValueByRowKey)(resolvedRowKey, resolvedData[i].values);
+            if (key === undefined || key === null) {
+                missingKeyIndexes.push(i);
+            }
+            else {
+                var k = key;
+                if (validKeys.has(k)) {
+                    duplicateKeys.add(k);
+                }
+                else {
+                    validKeys.add(k);
+                    rowsByKey.set(k, { item: resolvedData[i], sourceIndex: i });
+                }
+            }
+        }
+        return { validKeys: validKeys, rowsByKey: rowsByKey, duplicateKeys: duplicateKeys, missingKeyIndexes: missingKeyIndexes };
+    }, [masterDetailEnabled, resolvedData, resolvedRowKey]);
+    React.useEffect(function () {
+        if (process.env.NODE_ENV === 'production' || !masterDetailRowKeysMeta)
+            return;
+        if (masterDetailRowKeysMeta.missingKeyIndexes.length > 0) {
+            console.warn("[BGrid] masterDetail found ".concat(masterDetailRowKeysMeta.missingKeyIndexes.length, " rows with missing or null rowKey at indexes: [").concat(masterDetailRowKeysMeta.missingKeyIndexes.slice(0, 5).join(', ')).concat(masterDetailRowKeysMeta.missingKeyIndexes.length > 5 ? ', ...' : '', "]. These rows cannot be expanded."));
+        }
+        if (masterDetailRowKeysMeta.duplicateKeys.size > 0) {
+            console.warn("[BGrid] masterDetail found duplicate rowKey values: [".concat(Array.from(masterDetailRowKeysMeta.duplicateKeys).slice(0, 5).join(', '), "]. These rows cannot be expanded."));
+        }
+    }, [masterDetailRowKeysMeta]);
+    var expandMode = (_e = masterDetail === null || masterDetail === void 0 ? void 0 : masterDetail.expandMode) !== null && _e !== void 0 ? _e : 'multiple';
+    var masterDetailHasDetail = masterDetail === null || masterDetail === void 0 ? void 0 : masterDetail.hasDetail;
+    var effectiveMasterDetailExpandedKeysSet = React.useMemo(function () {
+        var e_1, _a;
+        if (!masterDetailEnabled || !masterDetailRowKeysMeta)
+            return new Set();
+        var set = new Set();
+        try {
+            for (var masterDetailExpandedKeys_1 = __values(masterDetailExpandedKeys), masterDetailExpandedKeys_1_1 = masterDetailExpandedKeys_1.next(); !masterDetailExpandedKeys_1_1.done; masterDetailExpandedKeys_1_1 = masterDetailExpandedKeys_1.next()) {
+                var key = masterDetailExpandedKeys_1_1.value;
+                if (masterDetailRowKeysMeta.duplicateKeys.has(key))
+                    continue;
+                var row = masterDetailRowKeysMeta.rowsByKey.get(key);
+                if (!row)
+                    continue;
+                if (masterDetailHasDetail) {
+                    try {
+                        if (!masterDetailHasDetail(row.item, row.sourceIndex))
+                            continue;
+                    }
+                    catch (_b) {
+                        continue;
+                    }
+                }
+                set.add(key);
+                if (expandMode === 'single')
+                    break;
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (masterDetailExpandedKeys_1_1 && !masterDetailExpandedKeys_1_1.done && (_a = masterDetailExpandedKeys_1.return)) _a.call(masterDetailExpandedKeys_1);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        return set;
+    }, [expandMode, masterDetailHasDetail, masterDetailEnabled, masterDetailExpandedKeys, masterDetailRowKeysMeta]);
+    var toggleMasterDetailRow = React.useCallback(function (rowKey, item, sourceIndex) {
+        var _a;
+        if (resolvedDisabled || !masterDetailEnabled || !masterDetail)
+            return;
+        var isExpanded = effectiveMasterDetailExpandedKeysSet.has(rowKey);
+        var nextKeys;
+        if (expandMode === 'single') {
+            nextKeys = isExpanded ? [] : [rowKey];
+        }
+        else {
+            if (isExpanded) {
+                nextKeys = masterDetailExpandedKeys.filter(function (k) { return !Object.is(k, rowKey); });
+            }
+            else {
+                var exists = masterDetailExpandedKeys.some(function (k) { return Object.is(k, rowKey); });
+                nextKeys = exists ? __spreadArray([], __read(masterDetailExpandedKeys), false) : __spreadArray(__spreadArray([], __read(masterDetailExpandedKeys), false), [rowKey], false);
+            }
+        }
+        if (masterDetail.expandedRowKeys === undefined) {
+            setUncontrolledMasterDetailExpandedKeys(nextKeys);
+        }
+        (_a = masterDetail.onExpandedRowKeysChange) === null || _a === void 0 ? void 0 : _a.call(masterDetail, nextKeys, {
+            rowKey: rowKey,
+            expanded: !isExpanded,
+            item: item,
+            sourceIndex: sourceIndex,
+        });
+    }, [
+        effectiveMasterDetailExpandedKeysSet,
+        expandMode,
+        masterDetail,
+        masterDetailEnabled,
+        masterDetailExpandedKeys,
+        resolvedDisabled,
+    ]);
+    var collapseMasterDetailRow = React.useCallback(function (rowKey) {
+        var _a;
+        if (resolvedDisabled || !masterDetailEnabled || !masterDetail)
+            return;
+        if (!effectiveMasterDetailExpandedKeysSet.has(rowKey))
+            return;
+        var nextKeys;
+        if (expandMode === 'single') {
+            nextKeys = [];
+        }
+        else {
+            nextKeys = masterDetailExpandedKeys.filter(function (k) { return !Object.is(k, rowKey); });
+        }
+        if (masterDetail.expandedRowKeys === undefined) {
+            setUncontrolledMasterDetailExpandedKeys(nextKeys);
+        }
+        var sourceIndex = resolvedData.findIndex(function (d) { return Object.is((0, utils_1.getCellValueByRowKey)(resolvedRowKey, d.values), rowKey); });
+        var item = resolvedData[sourceIndex];
+        if (item) {
+            (_a = masterDetail.onExpandedRowKeysChange) === null || _a === void 0 ? void 0 : _a.call(masterDetail, nextKeys, {
+                rowKey: rowKey,
+                expanded: false,
+                item: item,
+                sourceIndex: sourceIndex >= 0 ? sourceIndex : 0,
+            });
+        }
+    }, [
+        effectiveMasterDetailExpandedKeysSet,
+        expandMode,
+        masterDetail,
+        masterDetailEnabled,
+        masterDetailExpandedKeys,
+        resolvedData,
+        resolvedDisabled,
+        resolvedRowKey,
+    ]);
+    var getToggleElementId = React.useCallback(function (rowKey) { return "".concat(gridInstanceId, "-detail-toggle-").concat(encodeMasterDetailRowKey(rowKey)); }, [gridInstanceId]);
+    var getDetailElementId = React.useCallback(function (rowKey) { return "".concat(gridInstanceId, "-detail-region-").concat(encodeMasterDetailRowKey(rowKey)); }, [gridInstanceId]);
+    var masterDetailContextValue = React.useMemo(function () {
+        var _a, _b;
+        if (!masterDetailEnabled || !resolvedExpandColumnId || resolvedRowKey === undefined || !masterDetail) {
+            return undefined;
+        }
+        return {
+            gridId: gridInstanceId,
+            expandColumnId: resolvedExpandColumnId,
+            icons: masterDetail.icons,
+            expandAriaLabel: (_a = masterDetail.expandAriaLabel) !== null && _a !== void 0 ? _a : 'Expand row',
+            collapseAriaLabel: (_b = masterDetail.collapseAriaLabel) !== null && _b !== void 0 ? _b : 'Collapse row',
+            disabled: resolvedDisabled,
+            expandedKeysSet: effectiveMasterDetailExpandedKeysSet,
+            getRowKey: function (values) {
+                var key = (0, utils_1.getCellValueByRowKey)(resolvedRowKey, values);
+                return key === undefined || key === null ? undefined : key;
+            },
+            hasDetail: function (item, sourceIndex) {
+                var rowKey = (0, utils_1.getCellValueByRowKey)(resolvedRowKey, item.values);
+                if (rowKey === undefined || rowKey === null)
+                    return false;
+                if (masterDetailRowKeysMeta === null || masterDetailRowKeysMeta === void 0 ? void 0 : masterDetailRowKeysMeta.duplicateKeys.has(rowKey))
+                    return false;
+                if (masterDetail.hasDetail) {
+                    try {
+                        return masterDetail.hasDetail(item, sourceIndex);
+                    }
+                    catch (_a) {
+                        return false;
+                    }
+                }
+                return true;
+            },
+            detailRender: masterDetail.detailRender,
+            toggle: toggleMasterDetailRow,
+            collapse: collapseMasterDetailRow,
+            getToggleElementId: getToggleElementId,
+            getDetailElementId: getDetailElementId,
+        };
+    }, [
+        collapseMasterDetailRow,
+        effectiveMasterDetailExpandedKeysSet,
+        getDetailElementId,
+        getToggleElementId,
+        gridInstanceId,
+        masterDetail,
+        masterDetailEnabled,
+        masterDetailRowKeysMeta === null || masterDetailRowKeysMeta === void 0 ? void 0 : masterDetailRowKeysMeta.duplicateKeys,
+        resolvedDisabled,
+        resolvedExpandColumnId,
+        resolvedRowKey,
+        toggleMasterDetailRow,
+    ]);
+    var rowHeightMetrics = React.useMemo(function () {
+        var fallbackHeight = itemHeight + itemPadding * 2;
+        if (!masterDetailEnabled || !masterDetail) {
+            return (0, utils_1.createRowHeightMetrics)(displayData, fallbackHeight, getRowHeight);
+        }
+        return (0, utils_1.createRowHeightMetrics)(displayData, fallbackHeight, getRowHeight, {
+            expandedKeysSet: effectiveMasterDetailExpandedKeysSet,
+            getRowKey: function (values) {
+                var key = (0, utils_1.getCellValueByRowKey)(resolvedRowKey, values);
+                return key === undefined || key === null ? undefined : key;
+            },
+            getDetailHeight: function (item, sourceIndex) {
+                if (typeof masterDetail.detailRowHeight === 'function') {
+                    try {
+                        return masterDetail.detailRowHeight(item, sourceIndex);
+                    }
+                    catch (_a) {
+                        return 200;
+                    }
+                }
+                return typeof masterDetail.detailRowHeight === 'number' && masterDetail.detailRowHeight > 0
+                    ? masterDetail.detailRowHeight
+                    : 200;
+            },
+            hasDetail: function (item, sourceIndex) {
+                var rowKey = (0, utils_1.getCellValueByRowKey)(resolvedRowKey, item.values);
+                if (rowKey === undefined || rowKey === null)
+                    return false;
+                if (masterDetailRowKeysMeta === null || masterDetailRowKeysMeta === void 0 ? void 0 : masterDetailRowKeysMeta.duplicateKeys.has(rowKey))
+                    return false;
+                if (masterDetail.hasDetail) {
+                    try {
+                        return masterDetail.hasDetail(item, sourceIndex);
+                    }
+                    catch (_a) {
+                        return false;
+                    }
+                }
+                return true;
+            },
+            sourceIndexByVisibleIndex: processedResult.sourceIndexByVisibleIndex,
+        });
+    }, [
+        displayData,
+        effectiveMasterDetailExpandedKeysSet,
+        getRowHeight,
+        itemHeight,
+        itemPadding,
+        masterDetail,
+        masterDetailEnabled,
+        masterDetailRowKeysMeta === null || masterDetailRowKeysMeta === void 0 ? void 0 : masterDetailRowKeysMeta.duplicateKeys,
+        processedResult.sourceIndexByVisibleIndex,
+        resolvedRowKey,
+    ]);
     var resolvedFrozenRowCount = pivotEnabled
         ? 0
         : Math.min(Math.max(Math.floor(frozenRowCount), 0), displayData.length);
@@ -594,7 +927,7 @@ function BGrid(_a) {
     var resolvedStatus = React.useMemo(function () { return (0, utils_1.resolveStatusOptions)(status); }, [status]);
     var resolvedPagination = React.useMemo(function () { return (0, utils_1.resolvePaginationViewOptions)(pagination); }, [pagination]);
     var resolvedScrollbar = React.useMemo(function () { return (0, utils_1.resolveScrollbarOptions)(scrollbar); }, [scrollbar]);
-    var resolvedBottomBarHeight = (_e = bottomBarHeight !== null && bottomBarHeight !== void 0 ? bottomBarHeight : footerHeight) !== null && _e !== void 0 ? _e : 30;
+    var resolvedBottomBarHeight = (_f = bottomBarHeight !== null && bottomBarHeight !== void 0 ? bottomBarHeight : footerHeight) !== null && _f !== void 0 ? _f : 30;
     var initialShowBottomBar = React.useMemo(function () {
         return (0, utils_1.shouldRenderBottomBar)({
             hasPage: !!resolvedPage,
@@ -608,6 +941,13 @@ function BGrid(_a) {
             console.warn('[BGrid] Both bottomBarHeight and footerHeight were provided. bottomBarHeight takes precedence.');
         }
     }, [bottomBarHeight, footerHeight]);
+    var resolvedSummaryHeight = React.useMemo(function () {
+        return (0, utils_1.computeSummaryHeight)({
+            summary: resolvedSummary,
+            summaryHeight: explicitSummaryHeight,
+            summaryRowHeight: summaryRowHeight,
+        });
+    }, [resolvedSummary, explicitSummaryHeight, summaryRowHeight]);
     var initialStoreState = React.useMemo(function () {
         var _a, _b, _c;
         var initialWidth = width !== undefined ? Math.max(width, 100) : 0;
@@ -617,7 +957,7 @@ function BGrid(_a) {
             ? Math.max(initialHeight -
                 headerHeight -
                 (initialShowBottomBar ? resolvedBottomBarHeight : 0) -
-                (resolvedSummary ? summaryHeight : 0) -
+                (resolvedSummary ? resolvedSummaryHeight : 0) -
                 containerBorderWidth * 2, 0)
             : 0;
         var displayItemCount = contentBodyHeight > 0 ? Math.ceil(contentBodyHeight / (itemHeight + itemPadding * 2)) : 0;
@@ -638,7 +978,8 @@ function BGrid(_a) {
             scrollbar: resolvedScrollbar,
             status: resolvedStatus,
             pagination: resolvedPagination,
-            summaryHeight: summaryHeight,
+            summaryHeight: resolvedSummaryHeight,
+            summaryRowHeight: summaryRowHeight,
             itemHeight: itemHeight,
             itemPadding: itemPadding,
             frozenColumnIndex: resolvedFrozenColumnIndex,
@@ -709,7 +1050,8 @@ function BGrid(_a) {
         resolvedScrollbar,
         resolvedStatus,
         resolvedPagination,
-        summaryHeight,
+        resolvedSummaryHeight,
+        summaryRowHeight,
         itemHeight,
         itemPadding,
         rowHeightMetrics,
@@ -759,31 +1101,33 @@ function BGrid(_a) {
     ]);
     return (React.createElement(store_1.AppStoreProvider, { initialState: initialStoreState },
         React.createElement(TreeContext_1.TreeContext.Provider, { value: treeContextValue },
-            React.createElement(Table_1.default, { ref: ref, sourceColumns: resolvedColumns,
-                columns: computedColumns,
-                columnsGroup: visibilityProjection.columnsGroup,
-                columnGroups: visibilityProjection.columnGroups,
-                onChangeColumns: resolvedOnChangeColumns, width: width, height: height, className: className, style: style, loading: loading, disabled: resolvedDisabled, spinning: spinning, scrollLeft: scrollLeft, scrollTop: scrollTop, headerHeight: headerHeight, footerHeight: footerHeight, bottomBarHeight: resolvedBottomBarHeight,
-                scrollbar: resolvedScrollbar,
-                status: resolvedStatus,
-                pagination: resolvedPagination, summaryHeight: summaryHeight, itemHeight: itemHeight, itemPadding: itemPadding, rowHeightMetrics: rowHeightMetrics, frozenColumnIndex: resolvedFrozenColumnIndex,
-                frozenRowCount: resolvedFrozenRowCount,
-                rowChecked: resolvedRowChecked, checkedIndexesMap: checkedIndexesMap, sort: resolvedSort, sortParams: sortParams, dataQuery: resolvedDataQuery,
-                dataControl: resolvedDataControl, icons: icons, columnVisibilityState: columnVisibilityState, searchOptions: resolvedSearchOptions,
-                contextMenuOptions: resolvedContextMenuOptions,
-                page: resolvedPage,
-                data: displayData,
-                sourceData: resolvedData,
-                sourceIndexByVisibleIndex: processedResult.sourceIndexByVisibleIndex,
-                visibleIndexBySourceIndex: processedResult.visibleIndexBySourceIndex,
-                onClick: resolvedOnClick,
-                rowKey: resolvedRowKey,
-                selectedRowKey: resolvedSelectedRowKey,
-                editable: resolvedEditable, editTrigger: editTrigger, onChangeData: resolvedOnChangeData,
-                showLineNumber: resolvedShowLineNumber, msg: msg, getRowClassName: resolvedGetRowClassName,
-                cellMergeOptions: resolvedCellMergeOptions,
-                cellSelectionOptions: resolvedCellSelectionOptions, cellNavigationOptions: cellNavigationOptions, variant: variant, summary: resolvedSummary,
-                columnSortable: resolvedColumnSortable,
-                reorder: resolvedReorder,
-                treeEnabled: !!treeContextValue }))));
+            React.createElement(MasterDetailContext_1.MasterDetailContext.Provider, { value: masterDetailContextValue },
+                React.createElement(Table_1.default, { ref: ref, sourceColumns: resolvedColumns,
+                    columns: computedColumns,
+                    columnsGroup: visibilityProjection.columnsGroup,
+                    columnGroups: visibilityProjection.columnGroups,
+                    onChangeColumns: resolvedOnChangeColumns, width: width, height: height, className: className, style: style, loading: loading, disabled: resolvedDisabled, spinning: spinning, scrollLeft: scrollLeft, scrollTop: scrollTop, headerHeight: headerHeight, footerHeight: footerHeight, bottomBarHeight: resolvedBottomBarHeight,
+                    scrollbar: resolvedScrollbar,
+                    status: resolvedStatus,
+                    pagination: resolvedPagination,
+                    summaryHeight: resolvedSummaryHeight, summaryRowHeight: summaryRowHeight, itemHeight: itemHeight, itemPadding: itemPadding, rowHeightMetrics: rowHeightMetrics, frozenColumnIndex: resolvedFrozenColumnIndex,
+                    frozenRowCount: resolvedFrozenRowCount,
+                    rowChecked: resolvedRowChecked, checkedIndexesMap: checkedIndexesMap, sort: resolvedSort, sortParams: sortParams, dataQuery: resolvedDataQuery,
+                    dataControl: resolvedDataControl, icons: icons, columnVisibilityState: columnVisibilityState, searchOptions: resolvedSearchOptions,
+                    contextMenuOptions: resolvedContextMenuOptions,
+                    page: resolvedPage,
+                    data: displayData,
+                    sourceData: resolvedData,
+                    sourceIndexByVisibleIndex: processedResult.sourceIndexByVisibleIndex,
+                    visibleIndexBySourceIndex: processedResult.visibleIndexBySourceIndex,
+                    onClick: resolvedOnClick,
+                    rowKey: resolvedRowKey,
+                    selectedRowKey: resolvedSelectedRowKey,
+                    editable: resolvedEditable, editTrigger: editTrigger, onChangeData: resolvedOnChangeData,
+                    showLineNumber: resolvedShowLineNumber, msg: msg, getRowClassName: resolvedGetRowClassName,
+                    cellMergeOptions: resolvedCellMergeOptions,
+                    cellSelectionOptions: resolvedCellSelectionOptions, cellNavigationOptions: cellNavigationOptions, variant: variant, summary: resolvedSummary,
+                    columnSortable: resolvedColumnSortable,
+                    reorder: resolvedReorder,
+                    treeEnabled: !!treeContextValue })))));
 }

package/cjs/components/CellNavigationDomSync.js

@@ -49,6 +49,8 @@ function CellNavigationDomSync(_a) {
         container
             .querySelectorAll('[data-bgrid-cell-active="true"], [data-bgrid-cell-active-multi-selection="true"]')
             .forEach(function (cell) {
+            if (cell.closest('[role="grid"], [role="treegrid"]') !== container)
+                return;
             cell.classList.remove('bgrid-cell-active', 'bgrid-cell-active-multi-selection');
             cell.removeAttribute('data-bgrid-cell-active');
             cell.removeAttribute('data-bgrid-cell-active-multi-selection');
@@ -57,6 +59,8 @@ function CellNavigationDomSync(_a) {
             container
                 .querySelectorAll("td[data-bgrid-cell=\"true\"][data-bgrid-logical-row-index=\"".concat(activeCell.rowIndex, "\"][data-column-index=\"").concat(activeCell.columnIndex, "\"]"))
                 .forEach(function (cell) {
+                if (cell.closest('[role="grid"], [role="treegrid"]') !== container)
+                    return;
                 cell.classList.add('bgrid-cell-active');
                 cell.setAttribute('data-bgrid-cell-active', 'true');
                 if (hasMultiCellSelection) {
@@ -70,6 +74,8 @@ function CellNavigationDomSync(_a) {
         var wholeRowSelection = coversEveryColumn && !coversEveryRow;
         var wholeColumnSelection = coversEveryRow && !coversEveryColumn;
         container.querySelectorAll('.bgrid-line-number-cell[data-row-index]').forEach(function (cell) {
+            if (cell.closest('[role="grid"], [role="treegrid"]') !== container)
+                return;
             var rowIndex = Number(cell.dataset.rowIndex);
             var active = !wholeColumnSelection &&
                 Number.isFinite(rowIndex) &&
@@ -81,6 +87,8 @@ function CellNavigationDomSync(_a) {
                 cell.removeAttribute('data-bgrid-row-axis-active');
         });
         container.querySelectorAll('[data-header-cell-type][data-column-index]').forEach(function (cell) {
+            if (cell.closest('[role="grid"], [role="treegrid"]') !== container)
+                return;
             var columnIndex = Number(cell.dataset.columnIndex);
             var active = cell.dataset.headerCellType === 'column' &&
                 !wholeRowSelection &&