beautiful-grid 1.0.13 → 1.0.15

package/esm/BGrid.js

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import Table from './components/Table';
-import { createPivotData, createRowHeightMetrics, buildHeaderMatrix, countVisibleCheckedIndexes, findDuplicateColumnIds, getCellValueByRowKey, getColumnId, getColumnKeyToken, getFrozenColumnsWidth, getTreeRowPath, processDataQuery, projectTreeData, projectColumnVisibility, resolveStatusOptions, resolvePaginationViewOptions, resolveScrollbarOptions, shouldRenderBottomBar, } from './utils';
+import { createPivotData, createRowHeightMetrics, buildHeaderMatrix, countVisibleCheckedIndexes, findDuplicateColumnIds, getCellValueByRowKey, getColumnId, getColumnKeyToken, getFrozenColumnsWidth, getTreeRowPath, processDataQuery, projectTreeData, projectColumnVisibility, resolveStatusOptions, resolvePaginationViewOptions, resolveScrollbarOptions, computeSummaryHeight, DEFAULT_SUMMARY_ROW_HEIGHT, shouldRenderBottomBar, } from './utils';
 import { AppStoreProvider } from './store';
 import { TreeContext } from './components/TreeContext';
+import { MasterDetailContext } from './components/MasterDetailContext';
 function computeModelColumns(columns, frozenColumnIndex, duplicateToolboxColumnIds) {
     let left = 0;
     let previousWidth = 0;
@@ -22,11 +23,19 @@ function computeModelColumns(columns, frozenColumnIndex, duplicateToolboxColumnI
         };
     });
 }
-export function BGrid({ ref, width, height, headerHeight = 30, footerHeight, summaryHeight = 30, itemHeight = 15, itemPadding = 7, getRowHeight, columns, columnsGroup, columnGroups, onChangeColumns, frozenColumnIndex = 0, frozenRowCount = 0, data = [], page, scrollbar, status, pagination, bottomBarHeight, scrollTop = 0, scrollLeft = 0, className, style, rowChecked, sort, onClick, loading = false, spinning, disabled, rowKey, selectedRowKey, editable, onChangeData, showLineNumber, msg, getRowClassName, editTrigger = 'dblclick', cellMergeOptions, cellSelectionOptions, cellNavigationOptions, variant, summary, columnSortable, reorder, pivot, dataControl, icons, columnVisibility, searchOptions, contextMenuOptions, tree, }) {
+function encodeMasterDetailRowKey(rowKey) {
+    const codePoints = Array.from(String(rowKey), character => character.codePointAt(0).toString(16));
+    return `${typeof rowKey}-${codePoints.join('-')}`;
+}
+export function BGrid({ ref, width, height, headerHeight = 30, footerHeight, summaryHeight: explicitSummaryHeight, summaryRowHeight = DEFAULT_SUMMARY_ROW_HEIGHT, itemHeight = 15, itemPadding = 7, getRowHeight, columns, columnsGroup, columnGroups, onChangeColumns, frozenColumnIndex = 0, frozenRowCount = 0, data = [], page, scrollbar, status, pagination, bottomBarHeight, scrollTop = 0, scrollLeft = 0, className, style, rowChecked, sort, onClick, loading = false, spinning, disabled, rowKey, selectedRowKey, editable, onChangeData, showLineNumber, msg, getRowClassName, editTrigger = 'dblclick', cellMergeOptions, cellSelectionOptions, cellNavigationOptions, variant, summary, columnSortable, reorder, pivot, dataControl, icons, columnVisibility, searchOptions, contextMenuOptions, tree, masterDetail, }) {
     const [uncontrolledExpandedRowKeys, setUncontrolledExpandedRowKeys] = React.useState(() => [
         ...(tree?.defaultExpandedRowKeys ?? []),
     ]);
     const expandedRowKeys = tree?.expandedRowKeys ?? uncontrolledExpandedRowKeys;
+    const [uncontrolledMasterDetailExpandedKeys, setUncontrolledMasterDetailExpandedKeys] = React.useState(() => masterDetail?.defaultExpandedRowKeys ?? []);
+    const masterDetailExpandedKeys = masterDetail?.expandedRowKeys !== undefined
+        ? masterDetail.expandedRowKeys
+        : uncontrolledMasterDetailExpandedKeys;
     const warnedSearchControlledRef = React.useRef({
         open: false,
         query: false,
@@ -92,7 +101,13 @@ export function BGrid({ ref, width, height, headerHeight = 30, footerHeight, sum
     const resolvedGetRowClassName = pivotEnabled ? undefined : getRowClassName;
     const requestedTreeEnabled = !!tree && tree.enabled !== false;
     const treeEnabled = requestedTreeEnabled && !pivotEnabled && resolvedRowKey !== undefined;
-    const resolvedCellMergeOptions = treeEnabled ? undefined : visibilityProjection.cellMergeOptions;
+    const requestedMasterDetailEnabled = !!masterDetail && masterDetail.enabled !== false;
+    const masterDetailEnabled = requestedMasterDetailEnabled &&
+        !pivotEnabled &&
+        !treeEnabled &&
+        resolvedRowKey !== undefined &&
+        frozenRowCount <= 0;
+    const resolvedCellMergeOptions = treeEnabled || masterDetailEnabled ? undefined : visibilityProjection.cellMergeOptions;
     const resolvedCellSelectionOptions = resolvedDisabled
         ? { ...cellSelectionOptions, enabled: false }
         : cellSelectionOptions;
@@ -104,11 +119,11 @@ export function BGrid({ ref, width, height, headerHeight = 30, footerHeight, sum
     const resolvedContextMenuOptions = pivotEnabled || resolvedDisabled ? undefined : contextMenuOptions;
     const hasActiveClientQuery = resolvedDataControl?.mode === 'client' &&
         (resolvedDataControl.query.sortParams.length > 0 || resolvedDataControl.query.filterParams.length > 0);
-    const resolvedReorder = React.useMemo(() => pivotEnabled || resolvedDisabled || treeEnabled
+    const resolvedReorder = React.useMemo(() => pivotEnabled || resolvedDisabled || treeEnabled || masterDetailEnabled
         ? undefined
         : (hasActiveClientQuery || frozenRowCount > 0) && reorder
             ? { ...reorder, enabled: false }
-            : reorder, [frozenRowCount, hasActiveClientQuery, pivotEnabled, reorder, resolvedDisabled, treeEnabled]);
+            : reorder, [frozenRowCount, hasActiveClientQuery, masterDetailEnabled, pivotEnabled, reorder, resolvedDisabled, treeEnabled]);
     // Development warnings
     React.useEffect(() => {
         if (process.env.NODE_ENV !== 'production') {
@@ -149,6 +164,24 @@ export function BGrid({ ref, width, height, headerHeight = 30, footerHeight, sum
             if (treeEnabled && 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?.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.');
             }
@@ -186,6 +219,8 @@ export function BGrid({ ref, width, height, headerHeight = 30, footerHeight, sum
         visibilityOptions?.hiddenColumnIds,
         visibilityOptions?.onChange,
         cellMergeOptions,
+        masterDetailEnabled,
+        requestedMasterDetailEnabled,
         requestedTreeEnabled,
         rowKey,
         treeEnabled,
@@ -250,12 +285,31 @@ export function BGrid({ ref, width, height, headerHeight = 30, footerHeight, sum
             ? requestedId
             : getColumnId(visibilityProjection.columns[0]);
     }, [tree?.treeColumnId, treeEnabled, visibilityProjection.columns]);
+    const resolvedExpandColumnId = React.useMemo(() => {
+        if (!masterDetailEnabled || visibilityProjection.columns.length === 0)
+            return undefined;
+        const requestedId = masterDetail?.expandColumnId;
+        return requestedId &&
+            visibilityProjection.columns.some(column => getColumnId(column) === requestedId)
+            ? requestedId
+            : getColumnId(visibilityProjection.columns[0]);
+    }, [masterDetail?.expandColumnId, masterDetailEnabled, visibilityProjection.columns]);
     const computedColumns = React.useMemo(() => {
-        const columns = computeModelColumns(visibilityProjection.columns, resolvedFrozenColumnIndex, duplicateToolboxColumnIds);
-        if (!resolvedTreeColumnId)
-            return columns;
-        return columns.map(column => (column.columnId === resolvedTreeColumnId ? { ...column, treeCell: true } : column));
-    }, [duplicateToolboxColumnIds, resolvedFrozenColumnIndex, resolvedTreeColumnId, visibilityProjection.columns]);
+        let columns = computeModelColumns(visibilityProjection.columns, resolvedFrozenColumnIndex, duplicateToolboxColumnIds);
+        if (resolvedTreeColumnId) {
+            columns = columns.map(column => (column.columnId === resolvedTreeColumnId ? { ...column, treeCell: true } : column));
+        }
+        if (resolvedExpandColumnId) {
+            columns = columns.map(column => column.columnId === resolvedExpandColumnId ? { ...column, masterDetailCell: true } : column);
+        }
+        return columns;
+    }, [
+        duplicateToolboxColumnIds,
+        resolvedExpandColumnId,
+        resolvedFrozenColumnIndex,
+        resolvedTreeColumnId,
+        visibilityProjection.columns,
+    ]);
     const warnedTreeColumnIdRef = React.useRef(undefined);
     React.useEffect(() => {
         if (process.env.NODE_ENV === 'production' ||
@@ -268,6 +322,18 @@ export function BGrid({ ref, width, height, headerHeight = 30, footerHeight, sum
         warnedTreeColumnIdRef.current = tree.treeColumnId;
         console.warn(`[BGrid] tree.treeColumnId "${tree.treeColumnId}" is not visible. Falling back to the first visible column.`);
     }, [resolvedTreeColumnId, tree?.treeColumnId, treeEnabled]);
+    const warnedExpandColumnIdRef = React.useRef(undefined);
+    React.useEffect(() => {
+        if (process.env.NODE_ENV === 'production' ||
+            !masterDetailEnabled ||
+            !masterDetail?.expandColumnId ||
+            masterDetail.expandColumnId === resolvedExpandColumnId ||
+            warnedExpandColumnIdRef.current === masterDetail.expandColumnId) {
+            return;
+        }
+        warnedExpandColumnIdRef.current = masterDetail.expandColumnId;
+        console.warn(`[BGrid] masterDetail.expandColumnId "${masterDetail.expandColumnId}" is not visible. Falling back to the first visible column.`);
+    }, [masterDetail?.expandColumnId, masterDetailEnabled, resolvedExpandColumnId]);
     const queryColumns = React.useMemo(() => computeModelColumns(resolvedColumns, pivotEnabled ? 0 : frozenColumnIndex, duplicateToolboxColumnIds), [duplicateToolboxColumnIds, frozenColumnIndex, pivotEnabled, resolvedColumns]);
     const projectedOnChangeColumns = React.useCallback((visibleColumnIndex, info) => {
         if (!baseOnChangeColumns)
@@ -476,7 +542,247 @@ export function BGrid({ ref, width, height, headerHeight = 30, footerHeight, sum
             toggle: toggleTreeRow,
         };
     }, [resolvedDisabled, resolvedRowKey, resolvedTreeColumnId, resolvedTreeProjection, toggleTreeRow, tree]);
-    const rowHeightMetrics = React.useMemo(() => createRowHeightMetrics(displayData, itemHeight + itemPadding * 2, getRowHeight), [displayData, getRowHeight, itemHeight, itemPadding]);
+    const rawGridId = React.useId();
+    const gridInstanceId = React.useMemo(() => rawGridId.replace(/[^a-zA-Z0-9_-]/g, '_'), [rawGridId]);
+    const masterDetailRowKeysMeta = React.useMemo(() => {
+        if (!masterDetailEnabled || resolvedRowKey === undefined)
+            return undefined;
+        const validKeys = new Set();
+        const rowsByKey = new Map();
+        const duplicateKeys = new Set();
+        const missingKeyIndexes = [];
+        for (let i = 0; i < resolvedData.length; i++) {
+            const key = getCellValueByRowKey(resolvedRowKey, resolvedData[i].values);
+            if (key === undefined || key === null) {
+                missingKeyIndexes.push(i);
+            }
+            else {
+                const k = key;
+                if (validKeys.has(k)) {
+                    duplicateKeys.add(k);
+                }
+                else {
+                    validKeys.add(k);
+                    rowsByKey.set(k, { item: resolvedData[i], sourceIndex: i });
+                }
+            }
+        }
+        return { validKeys, rowsByKey, duplicateKeys, missingKeyIndexes };
+    }, [masterDetailEnabled, resolvedData, resolvedRowKey]);
+    React.useEffect(() => {
+        if (process.env.NODE_ENV === 'production' || !masterDetailRowKeysMeta)
+            return;
+        if (masterDetailRowKeysMeta.missingKeyIndexes.length > 0) {
+            console.warn(`[BGrid] masterDetail found ${masterDetailRowKeysMeta.missingKeyIndexes.length} rows with missing or null rowKey at indexes: [${masterDetailRowKeysMeta.missingKeyIndexes.slice(0, 5).join(', ')}${masterDetailRowKeysMeta.missingKeyIndexes.length > 5 ? ', ...' : ''}]. These rows cannot be expanded.`);
+        }
+        if (masterDetailRowKeysMeta.duplicateKeys.size > 0) {
+            console.warn(`[BGrid] masterDetail found duplicate rowKey values: [${Array.from(masterDetailRowKeysMeta.duplicateKeys).slice(0, 5).join(', ')}]. These rows cannot be expanded.`);
+        }
+    }, [masterDetailRowKeysMeta]);
+    const expandMode = masterDetail?.expandMode ?? 'multiple';
+    const masterDetailHasDetail = masterDetail?.hasDetail;
+    const effectiveMasterDetailExpandedKeysSet = React.useMemo(() => {
+        if (!masterDetailEnabled || !masterDetailRowKeysMeta)
+            return new Set();
+        const set = new Set();
+        for (const key of masterDetailExpandedKeys) {
+            if (masterDetailRowKeysMeta.duplicateKeys.has(key))
+                continue;
+            const row = masterDetailRowKeysMeta.rowsByKey.get(key);
+            if (!row)
+                continue;
+            if (masterDetailHasDetail) {
+                try {
+                    if (!masterDetailHasDetail(row.item, row.sourceIndex))
+                        continue;
+                }
+                catch {
+                    continue;
+                }
+            }
+            set.add(key);
+            if (expandMode === 'single')
+                break;
+        }
+        return set;
+    }, [expandMode, masterDetailHasDetail, masterDetailEnabled, masterDetailExpandedKeys, masterDetailRowKeysMeta]);
+    const toggleMasterDetailRow = React.useCallback((rowKey, item, sourceIndex) => {
+        if (resolvedDisabled || !masterDetailEnabled || !masterDetail)
+            return;
+        const isExpanded = effectiveMasterDetailExpandedKeysSet.has(rowKey);
+        let nextKeys;
+        if (expandMode === 'single') {
+            nextKeys = isExpanded ? [] : [rowKey];
+        }
+        else {
+            if (isExpanded) {
+                nextKeys = masterDetailExpandedKeys.filter(k => !Object.is(k, rowKey));
+            }
+            else {
+                const exists = masterDetailExpandedKeys.some(k => Object.is(k, rowKey));
+                nextKeys = exists ? [...masterDetailExpandedKeys] : [...masterDetailExpandedKeys, rowKey];
+            }
+        }
+        if (masterDetail.expandedRowKeys === undefined) {
+            setUncontrolledMasterDetailExpandedKeys(nextKeys);
+        }
+        masterDetail.onExpandedRowKeysChange?.(nextKeys, {
+            rowKey,
+            expanded: !isExpanded,
+            item,
+            sourceIndex,
+        });
+    }, [
+        effectiveMasterDetailExpandedKeysSet,
+        expandMode,
+        masterDetail,
+        masterDetailEnabled,
+        masterDetailExpandedKeys,
+        resolvedDisabled,
+    ]);
+    const collapseMasterDetailRow = React.useCallback((rowKey) => {
+        if (resolvedDisabled || !masterDetailEnabled || !masterDetail)
+            return;
+        if (!effectiveMasterDetailExpandedKeysSet.has(rowKey))
+            return;
+        let nextKeys;
+        if (expandMode === 'single') {
+            nextKeys = [];
+        }
+        else {
+            nextKeys = masterDetailExpandedKeys.filter(k => !Object.is(k, rowKey));
+        }
+        if (masterDetail.expandedRowKeys === undefined) {
+            setUncontrolledMasterDetailExpandedKeys(nextKeys);
+        }
+        const sourceIndex = resolvedData.findIndex(d => Object.is(getCellValueByRowKey(resolvedRowKey, d.values), rowKey));
+        const item = resolvedData[sourceIndex];
+        if (item) {
+            masterDetail.onExpandedRowKeysChange?.(nextKeys, {
+                rowKey,
+                expanded: false,
+                item,
+                sourceIndex: sourceIndex >= 0 ? sourceIndex : 0,
+            });
+        }
+    }, [
+        effectiveMasterDetailExpandedKeysSet,
+        expandMode,
+        masterDetail,
+        masterDetailEnabled,
+        masterDetailExpandedKeys,
+        resolvedData,
+        resolvedDisabled,
+        resolvedRowKey,
+    ]);
+    const getToggleElementId = React.useCallback((rowKey) => `${gridInstanceId}-detail-toggle-${encodeMasterDetailRowKey(rowKey)}`, [gridInstanceId]);
+    const getDetailElementId = React.useCallback((rowKey) => `${gridInstanceId}-detail-region-${encodeMasterDetailRowKey(rowKey)}`, [gridInstanceId]);
+    const masterDetailContextValue = React.useMemo(() => {
+        if (!masterDetailEnabled || !resolvedExpandColumnId || resolvedRowKey === undefined || !masterDetail) {
+            return undefined;
+        }
+        return {
+            gridId: gridInstanceId,
+            expandColumnId: resolvedExpandColumnId,
+            icons: masterDetail.icons,
+            expandAriaLabel: masterDetail.expandAriaLabel ?? 'Expand row',
+            collapseAriaLabel: masterDetail.collapseAriaLabel ?? 'Collapse row',
+            disabled: resolvedDisabled,
+            expandedKeysSet: effectiveMasterDetailExpandedKeysSet,
+            getRowKey: values => {
+                const key = getCellValueByRowKey(resolvedRowKey, values);
+                return key === undefined || key === null ? undefined : key;
+            },
+            hasDetail: (item, sourceIndex) => {
+                const rowKey = getCellValueByRowKey(resolvedRowKey, item.values);
+                if (rowKey === undefined || rowKey === null)
+                    return false;
+                if (masterDetailRowKeysMeta?.duplicateKeys.has(rowKey))
+                    return false;
+                if (masterDetail.hasDetail) {
+                    try {
+                        return masterDetail.hasDetail(item, sourceIndex);
+                    }
+                    catch {
+                        return false;
+                    }
+                }
+                return true;
+            },
+            detailRender: masterDetail.detailRender,
+            toggle: toggleMasterDetailRow,
+            collapse: collapseMasterDetailRow,
+            getToggleElementId,
+            getDetailElementId,
+        };
+    }, [
+        collapseMasterDetailRow,
+        effectiveMasterDetailExpandedKeysSet,
+        getDetailElementId,
+        getToggleElementId,
+        gridInstanceId,
+        masterDetail,
+        masterDetailEnabled,
+        masterDetailRowKeysMeta?.duplicateKeys,
+        resolvedDisabled,
+        resolvedExpandColumnId,
+        resolvedRowKey,
+        toggleMasterDetailRow,
+    ]);
+    const rowHeightMetrics = React.useMemo(() => {
+        const fallbackHeight = itemHeight + itemPadding * 2;
+        if (!masterDetailEnabled || !masterDetail) {
+            return createRowHeightMetrics(displayData, fallbackHeight, getRowHeight);
+        }
+        return createRowHeightMetrics(displayData, fallbackHeight, getRowHeight, {
+            expandedKeysSet: effectiveMasterDetailExpandedKeysSet,
+            getRowKey: values => {
+                const key = getCellValueByRowKey(resolvedRowKey, values);
+                return key === undefined || key === null ? undefined : key;
+            },
+            getDetailHeight: (item, sourceIndex) => {
+                if (typeof masterDetail.detailRowHeight === 'function') {
+                    try {
+                        return masterDetail.detailRowHeight(item, sourceIndex);
+                    }
+                    catch {
+                        return 200;
+                    }
+                }
+                return typeof masterDetail.detailRowHeight === 'number' && masterDetail.detailRowHeight > 0
+                    ? masterDetail.detailRowHeight
+                    : 200;
+            },
+            hasDetail: (item, sourceIndex) => {
+                const rowKey = getCellValueByRowKey(resolvedRowKey, item.values);
+                if (rowKey === undefined || rowKey === null)
+                    return false;
+                if (masterDetailRowKeysMeta?.duplicateKeys.has(rowKey))
+                    return false;
+                if (masterDetail.hasDetail) {
+                    try {
+                        return masterDetail.hasDetail(item, sourceIndex);
+                    }
+                    catch {
+                        return false;
+                    }
+                }
+                return true;
+            },
+            sourceIndexByVisibleIndex: processedResult.sourceIndexByVisibleIndex,
+        });
+    }, [
+        displayData,
+        effectiveMasterDetailExpandedKeysSet,
+        getRowHeight,
+        itemHeight,
+        itemPadding,
+        masterDetail,
+        masterDetailEnabled,
+        masterDetailRowKeysMeta?.duplicateKeys,
+        processedResult.sourceIndexByVisibleIndex,
+        resolvedRowKey,
+    ]);
     const resolvedFrozenRowCount = pivotEnabled
         ? 0
         : Math.min(Math.max(Math.floor(frozenRowCount), 0), displayData.length);
@@ -535,6 +841,11 @@ export function BGrid({ ref, width, height, headerHeight = 30, footerHeight, sum
             console.warn('[BGrid] Both bottomBarHeight and footerHeight were provided. bottomBarHeight takes precedence.');
         }
     }, [bottomBarHeight, footerHeight]);
+    const resolvedSummaryHeight = React.useMemo(() => computeSummaryHeight({
+        summary: resolvedSummary,
+        summaryHeight: explicitSummaryHeight,
+        summaryRowHeight,
+    }), [resolvedSummary, explicitSummaryHeight, summaryRowHeight]);
     const initialStoreState = React.useMemo(() => {
         const initialWidth = width !== undefined ? Math.max(width, 100) : 0;
         const initialHeight = height !== undefined ? Math.max(height, 100) : 0;
@@ -543,7 +854,7 @@ export function BGrid({ ref, width, height, headerHeight = 30, footerHeight, sum
             ? Math.max(initialHeight -
                 headerHeight -
                 (initialShowBottomBar ? resolvedBottomBarHeight : 0) -
-                (resolvedSummary ? summaryHeight : 0) -
+                (resolvedSummary ? resolvedSummaryHeight : 0) -
                 containerBorderWidth * 2, 0)
             : 0;
         const displayItemCount = contentBodyHeight > 0 ? Math.ceil(contentBodyHeight / (itemHeight + itemPadding * 2)) : 0;
@@ -564,7 +875,8 @@ export function BGrid({ ref, width, height, headerHeight = 30, footerHeight, sum
             scrollbar: resolvedScrollbar,
             status: resolvedStatus,
             pagination: resolvedPagination,
-            summaryHeight,
+            summaryHeight: resolvedSummaryHeight,
+            summaryRowHeight,
             itemHeight,
             itemPadding,
             frozenColumnIndex: resolvedFrozenColumnIndex,
@@ -635,7 +947,8 @@ export function BGrid({ ref, width, height, headerHeight = 30, footerHeight, sum
         resolvedScrollbar,
         resolvedStatus,
         resolvedPagination,
-        summaryHeight,
+        resolvedSummaryHeight,
+        summaryRowHeight,
         itemHeight,
         itemPadding,
         rowHeightMetrics,
@@ -685,62 +998,64 @@ export function BGrid({ ref, width, height, headerHeight = 30, footerHeight, sum
     ]);
     return (React.createElement(AppStoreProvider, { initialState: initialStoreState },
         React.createElement(TreeContext.Provider, { value: treeContextValue },
-            React.createElement(Table, { ref: ref, sourceColumns: resolvedColumns,
-                columns: computedColumns,
-                columnsGroup: visibilityProjection.columnsGroup,
-                columnGroups: visibilityProjection.columnGroups,
-                onChangeColumns: resolvedOnChangeColumns,
-                width,
-                height,
-                className,
-                style,
-                loading,
-                disabled: resolvedDisabled,
-                spinning,
-                scrollLeft,
-                scrollTop,
-                headerHeight,
-                footerHeight,
-                bottomBarHeight: resolvedBottomBarHeight,
-                scrollbar: resolvedScrollbar,
-                status: resolvedStatus,
-                pagination: resolvedPagination,
-                summaryHeight,
-                itemHeight,
-                itemPadding,
-                rowHeightMetrics,
-                frozenColumnIndex: resolvedFrozenColumnIndex,
-                frozenRowCount: resolvedFrozenRowCount,
-                rowChecked: resolvedRowChecked,
-                checkedIndexesMap,
-                sort: resolvedSort,
-                sortParams,
-                dataQuery: resolvedDataQuery,
-                dataControl: resolvedDataControl,
-                icons,
-                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,
-                onChangeData: resolvedOnChangeData,
-                showLineNumber: resolvedShowLineNumber,
-                msg,
-                getRowClassName: resolvedGetRowClassName,
-                cellMergeOptions: resolvedCellMergeOptions,
-                cellSelectionOptions: resolvedCellSelectionOptions,
-                cellNavigationOptions,
-                variant,
-                summary: resolvedSummary,
-                columnSortable: resolvedColumnSortable,
-                reorder: resolvedReorder,
-                treeEnabled: !!treeContextValue }))));
+            React.createElement(MasterDetailContext.Provider, { value: masterDetailContextValue },
+                React.createElement(Table, { ref: ref, sourceColumns: resolvedColumns,
+                    columns: computedColumns,
+                    columnsGroup: visibilityProjection.columnsGroup,
+                    columnGroups: visibilityProjection.columnGroups,
+                    onChangeColumns: resolvedOnChangeColumns,
+                    width,
+                    height,
+                    className,
+                    style,
+                    loading,
+                    disabled: resolvedDisabled,
+                    spinning,
+                    scrollLeft,
+                    scrollTop,
+                    headerHeight,
+                    footerHeight,
+                    bottomBarHeight: resolvedBottomBarHeight,
+                    scrollbar: resolvedScrollbar,
+                    status: resolvedStatus,
+                    pagination: resolvedPagination,
+                    summaryHeight: resolvedSummaryHeight,
+                    summaryRowHeight,
+                    itemHeight,
+                    itemPadding,
+                    rowHeightMetrics,
+                    frozenColumnIndex: resolvedFrozenColumnIndex,
+                    frozenRowCount: resolvedFrozenRowCount,
+                    rowChecked: resolvedRowChecked,
+                    checkedIndexesMap,
+                    sort: resolvedSort,
+                    sortParams,
+                    dataQuery: resolvedDataQuery,
+                    dataControl: resolvedDataControl,
+                    icons,
+                    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,
+                    onChangeData: resolvedOnChangeData,
+                    showLineNumber: resolvedShowLineNumber,
+                    msg,
+                    getRowClassName: resolvedGetRowClassName,
+                    cellMergeOptions: resolvedCellMergeOptions,
+                    cellSelectionOptions: resolvedCellSelectionOptions,
+                    cellNavigationOptions,
+                    variant,
+                    summary: resolvedSummary,
+                    columnSortable: resolvedColumnSortable,
+                    reorder: resolvedReorder,
+                    treeEnabled: !!treeContextValue })))));
 }

package/esm/components/CellNavigationDomSync.js

@@ -12,6 +12,8 @@ export function CellNavigationDomSync({ containerRef, activeCell, cellSelectionR
         container
             .querySelectorAll('[data-bgrid-cell-active="true"], [data-bgrid-cell-active-multi-selection="true"]')
             .forEach(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');
@@ -20,6 +22,8 @@ export function CellNavigationDomSync({ containerRef, activeCell, cellSelectionR
             container
                 .querySelectorAll(`td[data-bgrid-cell="true"][data-bgrid-logical-row-index="${activeCell.rowIndex}"][data-column-index="${activeCell.columnIndex}"]`)
                 .forEach(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) {
@@ -33,6 +37,8 @@ export function CellNavigationDomSync({ containerRef, activeCell, cellSelectionR
         const wholeRowSelection = coversEveryColumn && !coversEveryRow;
         const wholeColumnSelection = coversEveryRow && !coversEveryColumn;
         container.querySelectorAll('.bgrid-line-number-cell[data-row-index]').forEach(cell => {
+            if (cell.closest('[role="grid"], [role="treegrid"]') !== container)
+                return;
             const rowIndex = Number(cell.dataset.rowIndex);
             const active = !wholeColumnSelection &&
                 Number.isFinite(rowIndex) &&
@@ -44,6 +50,8 @@ export function CellNavigationDomSync({ containerRef, activeCell, cellSelectionR
                 cell.removeAttribute('data-bgrid-row-axis-active');
         });
         container.querySelectorAll('[data-header-cell-type][data-column-index]').forEach(cell => {
+            if (cell.closest('[role="grid"], [role="treegrid"]') !== container)
+                return;
             const columnIndex = Number(cell.dataset.columnIndex);
             const active = cell.dataset.headerCellType === 'column' &&
                 !wholeRowSelection &&

package/esm/components/CellTextEditorGateway.js

@@ -98,14 +98,14 @@ export function CellTextEditorGateway({ containerRef }) {
             input.style.removeProperty('text-align');
             return;
         }
-        const target = container.querySelector(`td[data-bgrid-cell="true"][data-row-index="${cellEditSession.hostCell.rowIndex}"][data-column-index="${cellEditSession.hostCell.columnIndex}"]`);
+        const target = Array.from(container.querySelectorAll(`td[data-bgrid-cell="true"][data-row-index="${cellEditSession.hostCell.rowIndex}"][data-column-index="${cellEditSession.hostCell.columnIndex}"]`)).find(el => el.closest('[role="grid"], [role="treegrid"]') === container);
         if (!(target instanceof HTMLElement)) {
             input.style.visibility = 'hidden';
             return;
         }
         const containerRect = container.getBoundingClientRect();
         const targetRect = target.getBoundingClientRect();
-        const bodyViewport = container.querySelector('.bgrid-body-viewport');
+        const bodyViewport = Array.from(container.querySelectorAll('.bgrid-body-viewport')).find(el => el.closest('[role="grid"], [role="treegrid"]') === container);
         const bodyViewportRect = bodyViewport instanceof HTMLElement ? bodyViewport.getBoundingClientRect() : containerRect;
         const editorBox = resolveVisibleTextEditorVerticalBox({
             targetTop: targetRect.top,
@@ -118,9 +118,12 @@ export function CellTextEditorGateway({ containerRef }) {
             input.style.visibility = 'hidden';
             return;
         }
-        input.style.transform = `translate(${targetRect.left - containerRect.left - container.clientLeft}px, ${editorBox.top - containerRect.top - container.clientTop}px)`;
-        input.style.width = `${targetRect.width}px`;
-        input.style.height = `${editorBox.height}px`;
+        // Convert viewport pixels back to local pixels during modal scale animations.
+        const scaleX = container.offsetWidth && containerRect.width ? containerRect.width / container.offsetWidth : 1;
+        const scaleY = container.offsetHeight && containerRect.height ? containerRect.height / container.offsetHeight : 1;
+        input.style.transform = `translate(${(targetRect.left - containerRect.left) / scaleX - container.clientLeft}px, ${(editorBox.top - containerRect.top) / scaleY - container.clientTop}px)`;
+        input.style.width = `${targetRect.width / scaleX}px`;
+        input.style.height = `${editorBox.height / scaleY}px`;
         if (column?.align) {
             input.style.textAlign = column.align;
         }
@@ -216,11 +219,11 @@ export function CellTextEditorGateway({ containerRef }) {
             return;
         endCellEdit(cellEditSession.id);
     }, [cellEditSession, endCellEdit]);
-    const startReplace = React.useCallback(() => {
-        if (!activeCell || !canStartText || cellEditSession)
+    const startReplace = React.useCallback((preserveInput = false) => {
+        if (!activeCell || !canStartText || cellEditSession || nativeStartRef.current)
             return;
         nativeStartRef.current = true;
-        if (inputRef.current)
+        if (inputRef.current && !preserveInput)
             inputRef.current.value = '';
         beginCellEdit(activeCell, 'replace');
     }, [activeCell, beginCellEdit, canStartText, cellEditSession]);
@@ -233,7 +236,7 @@ export function CellTextEditorGateway({ containerRef }) {
                 : '셀 텍스트 편집'
             : textEditor.ariaLabel ?? `행 ${cell.rowIndex + 1}, 열 ${cell.columnIndex + 1} 텍스트 편집`
         : 'DataGrid 키보드 탐색';
-    return (React.createElement("input", { ref: inputRef, "data-bgrid-text-editor-gateway": 'true', className: isTextEditing ? 'bgrid-text-editor-gateway bgrid-text-editor-active' : 'bgrid-text-editor-gateway', "aria-label": ariaLabel, "aria-invalid": invalid || undefined, readOnly: !canStartText && !isTextEditing, ...inputProps, onBeforeInput: () => startReplace(), onInput: () => startReplace(), onCompositionStart: () => {
+    return (React.createElement("input", { ref: inputRef, "data-bgrid-text-editor-gateway": 'true', className: isTextEditing ? 'bgrid-text-editor-gateway bgrid-text-editor-active' : 'bgrid-text-editor-gateway', "aria-label": ariaLabel, "aria-invalid": invalid || undefined, readOnly: !canStartText && !isTextEditing, ...inputProps, onBeforeInput: () => startReplace(), onInput: () => startReplace(true), onCompositionStart: () => {
             composingRef.current = true;
             startReplace();
         }, onCompositionEnd: () => {