beautiful-grid 1.0.13 → 1.0.15

package/esm/components/ColResizer.js

@@ -46,12 +46,18 @@ function ColResizer({ container, columnIndex, hideHandle, bordered, frozenBounda
             targetDiv.style.top = '-9999px';
             targetDiv.innerHTML = `<table><thead>${headFrozenHTML}</thead><tbody>${bodyFrozenHTML}</tbody></table>
 <table><thead>${headHTML}</thead><tbody>${bodyHTML}</tbody></table>`;
-            const bodyTarget = document.getElementById('root') ?? document.body;
+            // Measure with the grid's inherited font and real header/body padding.
+            targetDiv.querySelectorAll('table').forEach(table => {
+                table.className = 'bgrid-head-table bgrid-body-table';
+                table.style.tableLayout = 'auto';
+                table.style.width = 'max-content';
+            });
+            const bodyTarget = container.current;
             bodyTarget.append(targetDiv);
             await delay(30);
             const targetTd = targetDiv.querySelector(`tr td.bgrid-head-cell[data-column-index="${columnIndex}"]`);
             if (targetTd) {
-                setColumnWidth(columnIndex, { width: targetTd.getBoundingClientRect().width });
+                setColumnWidth(columnIndex, { width: Math.ceil(targetTd.offsetWidth) + 1 });
                 setColumnWidth(columnIndex, { updateColumns: true });
             }
             targetDiv.remove();

package/esm/components/MasterDetailCell.js

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import { getColumnId } from '../utils';
+import { useMasterDetailContext } from './MasterDetailContext';
+export function MasterDetailCell({ column, item, sourceIndex, children }) {
+    const masterDetail = useMasterDetailContext();
+    if (!masterDetail || getColumnId(column) !== masterDetail.expandColumnId) {
+        return React.createElement(React.Fragment, null, children);
+    }
+    const rowKey = masterDetail.getRowKey(item.values);
+    if (rowKey === undefined || rowKey === null) {
+        return React.createElement(React.Fragment, null, children);
+    }
+    const isExpandable = masterDetail.hasDetail(item, sourceIndex);
+    const expanded = masterDetail.expandedKeysSet.has(rowKey);
+    const toggleId = masterDetail.getToggleElementId(rowKey);
+    const detailId = masterDetail.getDetailElementId(rowKey);
+    return (React.createElement("span", { className: 'bgrid-master-detail-cell' },
+        isExpandable ? (React.createElement("button", { type: 'button', id: toggleId, className: 'bgrid-master-detail-toggle', "aria-expanded": expanded, "aria-controls": expanded ? detailId : undefined, "aria-label": expanded ? masterDetail.collapseAriaLabel : masterDetail.expandAriaLabel, disabled: masterDetail.disabled, onClick: event => {
+                event.stopPropagation();
+                masterDetail.toggle(rowKey, item, sourceIndex);
+            }, onKeyDown: event => {
+                // Prevent master grid cell navigation from capturing Space or Enter on the toggle button
+                if (event.key === ' ' || event.key === 'Enter') {
+                    event.stopPropagation();
+                }
+            } },
+            React.createElement("span", { className: 'bgrid-master-detail-icon', "aria-hidden": 'true' }, expanded ? masterDetail.icons?.expanded ?? '⌄' : masterDetail.icons?.collapsed ?? '›'))) : (React.createElement("span", { className: 'bgrid-master-detail-toggle-spacer', "aria-hidden": 'true' })),
+        React.createElement("span", { className: 'bgrid-master-detail-cell-content' }, children)));
+}
+export function MasterDetailRow({ item, sourceIndex, visibleIndex, detailHeight, isLeftRegion, viewportWidth, colSpan, frozenColumnsWidth, }) {
+    const masterDetail = useMasterDetailContext();
+    if (!masterDetail)
+        return null;
+    const rowKey = masterDetail.getRowKey(item.values);
+    if (rowKey === undefined || rowKey === null || !masterDetail.expandedKeysSet.has(rowKey)) {
+        return null;
+    }
+    const toggleId = masterDetail.getToggleElementId(rowKey);
+    const detailId = masterDetail.getDetailElementId(rowKey);
+    if (isLeftRegion) {
+        return (React.createElement("tr", { className: 'bgrid-detail-frozen-row', "aria-hidden": 'true', "data-detail-ri": visibleIndex, style: {
+                height: detailHeight,
+                ['--bgrid-item-cell-height']: `${detailHeight}px`,
+            } },
+            React.createElement("td", { colSpan: colSpan, style: {
+                    height: detailHeight,
+                    maxHeight: 'none',
+                    padding: 0,
+                    margin: 0,
+                } })));
+    }
+    return (React.createElement("tr", { className: 'bgrid-detail-row', "data-bgrid-detail-owner": 'true', "data-detail-ri": visibleIndex, style: {
+            height: detailHeight,
+            ['--bgrid-item-cell-height']: `${detailHeight}px`,
+        } },
+        React.createElement("td", { colSpan: colSpan, className: 'bgrid-detail-cell', style: {
+                height: detailHeight,
+                maxHeight: 'none',
+                padding: 0,
+                margin: 0,
+                verticalAlign: 'top',
+            } },
+            React.createElement(DetailPanelContent, { item: item, rowKey: rowKey, sourceIndex: sourceIndex, visibleIndex: visibleIndex, detailHeight: detailHeight, viewportWidth: viewportWidth, frozenColumnsWidth: frozenColumnsWidth, toggleId: toggleId, detailId: detailId, detailRender: masterDetail.detailRender, collapse: () => masterDetail.collapse(rowKey) })),
+        React.createElement("td", { "data-none": 'true' })));
+}
+function DetailPanelContent({ item, rowKey, sourceIndex, visibleIndex, detailHeight, viewportWidth, frozenColumnsWidth, toggleId, detailId, detailRender, collapse, }) {
+    const panelRef = React.useRef(null);
+    React.useEffect(() => {
+        const panel = panelRef.current;
+        return () => {
+            const active = document.activeElement;
+            if (active && panel && panel.contains(active)) {
+                const toggle = document.getElementById(toggleId);
+                toggle?.focus();
+            }
+        };
+    }, [toggleId]);
+    const contentHeight = Math.max(detailHeight - 1, 0);
+    return (React.createElement("div", { ref: panelRef, id: detailId, role: 'region', "aria-labelledby": toggleId, className: 'bgrid-master-detail-panel', "data-bgrid-detail-owner": 'true', "data-visible-index": visibleIndex, "data-source-index": sourceIndex, style: {
+            position: 'sticky',
+            left: frozenColumnsWidth ?? 0,
+            width: viewportWidth > 0 ? viewportWidth : undefined,
+            maxWidth: '100%',
+            height: contentHeight,
+            minHeight: contentHeight,
+            maxHeight: contentHeight,
+            boxSizing: 'border-box',
+            overflow: 'auto',
+        }, onPointerDown: e => {
+            e.stopPropagation();
+        }, onContextMenu: e => {
+            e.stopPropagation();
+        } }, detailRender({
+        item,
+        rowKey,
+        sourceIndex,
+        visibleIndex,
+        expanded: true,
+        collapse,
+    })));
+}

package/esm/components/MasterDetailContext.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export const MasterDetailContext = React.createContext(undefined);
+export function useMasterDetailContext() {
+    return React.useContext(MasterDetailContext);
+}

package/esm/components/Table.js

@@ -58,11 +58,12 @@ function Table(props) {
         itemPadding: s.itemPadding,
     })));
     // [Selector Group 2] Header, Footer, Summary - 헤더/푸터/요약
-    const { headerHeight, footerHeight, bottomBarHeight, summaryHeight } = useAppStore(useShallow(s => ({
+    const { headerHeight, footerHeight, bottomBarHeight, summaryHeight, summaryRowHeight } = useAppStore(useShallow(s => ({
         headerHeight: s.headerHeight,
         footerHeight: s.footerHeight,
         bottomBarHeight: s.bottomBarHeight,
         summaryHeight: s.summaryHeight,
+        summaryRowHeight: s.summaryRowHeight,
     })));
     // [Selector Group 3] Scroll State - 스크롤 상태
     const { scrollLeft, scrollTop } = useAppStore(useShallow(s => ({
@@ -113,7 +114,7 @@ function Table(props) {
         cellInteractionSession: s.cellInteractionSession,
     })));
     // [Selector Group 6] State Setters - 차원 설정자
-    const { setHeight, setWidth, setContentBodyHeight, setDisplayItemCount, setHeaderHeight, setFooterHeight, setBottomBarHeight, setSummaryHeight, setItemHeight, setItemPadding, setLoading, setSpinning, setDisabled, } = useAppStore(useShallow(s => ({
+    const { setHeight, setWidth, setContentBodyHeight, setDisplayItemCount, setHeaderHeight, setFooterHeight, setBottomBarHeight, setSummaryHeight, setSummaryRowHeight, setItemHeight, setItemPadding, setLoading, setSpinning, setDisabled, } = useAppStore(useShallow(s => ({
         setHeight: s.setHeight,
         setWidth: s.setWidth,
         setContentBodyHeight: s.setContentBodyHeight,
@@ -122,6 +123,7 @@ function Table(props) {
         setFooterHeight: s.setFooterHeight,
         setBottomBarHeight: s.setBottomBarHeight,
         setSummaryHeight: s.setSummaryHeight,
+        setSummaryRowHeight: s.setSummaryRowHeight,
         setItemHeight: s.setItemHeight,
         setItemPadding: s.setItemPadding,
         setLoading: s.setLoading,
@@ -204,20 +206,29 @@ function Table(props) {
     const variableRowOffsets = rowHeightMetrics.variable ? rowHeightMetrics.offsets : undefined;
     const scrollableBodyHeight = Math.max(contentBodyHeight - frozenRowsHeight, 0);
     const scrollOverscanRows = Math.max(KEYBOARD_NAVIGATION_ROW_WINDOW_SIZE, Math.ceil(scrollableBodyHeight / Math.max(trHeight, 1)));
-    const mainViewportWidth = Math.max(width - (frozenColumnsWidth ?? 0), 0);
     const logicalBodyContentHeight = rowHeightMetrics.totalHeight;
+    const scrollContainerRef = useRef(null);
+    const scrollableColumnsWidth = React.useMemo(() => columns.slice(props.frozenColumnIndex ?? 0).reduce((totalWidth, column) => totalWidth + (column.width ?? 100), 0), [columns, props.frozenColumnIndex]);
+    const stickyTopHeight = headerHeight + (summary?.position === 'top' ? summaryHeight : 0);
+    const stickyBottomHeight = summary?.position === 'bottom' ? summaryHeight : 0;
+    const stickyFixedHeight = stickyTopHeight + stickyBottomHeight;
+    const scrollPlaneContentWidth = (frozenColumnsWidth ?? 0) + scrollableColumnsWidth;
+    const measuredScrollbarMetrics = useScrollbarMetrics(scrollContainerRef, [data.length, itemHeight, itemPadding, contentBodyHeight, width], scrollPlaneContentWidth, stickyFixedHeight);
+    // Native horizontal scrollbars occupy viewport space; use the measured body height for every scroll path.
+    const effectiveBodyHeight = scrollbar.variant === 'native'
+        ? measuredScrollbarMetrics.vertical.viewportSize || contentBodyHeight
+        : contentBodyHeight;
     const virtualScrollWindowMetrics = React.useMemo(() => getVirtualScrollWindowMetrics({
         logicalContentHeight: logicalBodyContentHeight,
-        viewportHeight: contentBodyHeight,
+        viewportHeight: effectiveBodyHeight,
         enabled: scrollbar.variant !== 'native',
-    }), [contentBodyHeight, logicalBodyContentHeight, scrollbar.variant]);
+    }), [effectiveBodyHeight, logicalBodyContentHeight, scrollbar.variant]);
     const [virtualScrollBase, setVirtualScrollBase] = React.useState(0);
     const virtualScrollBaseRef = useRef(0);
     const containerRef = useRef(null);
     const searchPopoverRef = useRef(null);
     const editorPortalRef = useRef(null);
     const bodyContainerRef = useRef(null);
-    const scrollContainerRef = useRef(null);
     const logicalVerticalScrollState = React.useMemo(() => ({
         scrollTop,
         scrollHeight: virtualScrollWindowMetrics.logicalContentHeight,
@@ -275,6 +286,8 @@ function Table(props) {
         rowCount: data.length,
         rowHeight: trHeight,
         rowOffsets: variableRowOffsets,
+        rowHeights: rowHeightMetrics.heights,
+        detailHeights: rowHeightMetrics.detailHeights,
         frozenColumnCount: props.frozenColumnIndex ?? 0,
         frozenRowCount,
         frozenColumnsWidth: frozenColumnsWidth ?? 0,
@@ -285,6 +298,8 @@ function Table(props) {
         frozenColumnsWidth,
         frozenRowCount,
         props.frozenColumnIndex,
+        rowHeightMetrics.detailHeights,
+        rowHeightMetrics.heights,
         trHeight,
         variableRowOffsets,
     ]);
@@ -294,6 +309,8 @@ function Table(props) {
         rowCount: data.length,
         rowHeight: trHeight,
         rowOffsets: variableRowOffsets,
+        rowHeights: rowHeightMetrics.heights,
+        detailHeights: rowHeightMetrics.detailHeights,
         frozenColumnCount: props.frozenColumnIndex ?? 0,
         frozenRowCount,
         frozenColumnsWidth: frozenColumnsWidth ?? 0,
@@ -304,21 +321,13 @@ function Table(props) {
         frozenColumnsWidth,
         frozenRowCount,
         props.frozenColumnIndex,
+        rowHeightMetrics.detailHeights,
+        rowHeightMetrics.heights,
         trHeight,
         variableRowOffsets,
     ]);
     const activeOverlayFill = activeCellSelected;
     const activeOverlayRing = !!activeCell && !hasMultiCellSelection;
-    const renderSelectionOverlay = (quadrant) => {
-        const topQuadrant = quadrant === 'top-left' || quadrant === 'top-main';
-        const leftQuadrant = quadrant === 'top-left' || quadrant === 'body-left';
-        return (React.createElement(CellSelectionOverlay, { quadrant: quadrant, selectionFragments: selectionFragments, activeFragments: activeFragments, activeFill: activeOverlayFill, activeRing: activeOverlayRing, viewport: {
-                left: leftQuadrant ? 0 : scrollLeft,
-                top: topQuadrant ? 0 : scrollTop,
-                width: leftQuadrant ? frozenColumnsWidth ?? 0 : mainViewportWidth,
-                height: topQuadrant ? frozenRowsHeight : scrollableBodyHeight,
-            }, offsetTop: !topQuadrant && virtualScrollWindowMetrics.enabled ? virtualScrollBase : 0 }));
-    };
     const visibleScrollableRows = React.useMemo(() => getVisibleScrollableRowRange({
         scrollTop,
         viewportHeight: scrollableBodyHeight,
@@ -455,14 +464,9 @@ function Table(props) {
         storeRowKey,
         storeSourceIndexByVisibleIndex,
     ]);
-    const scrollableColumnsWidth = React.useMemo(() => columns.slice(props.frozenColumnIndex ?? 0).reduce((totalWidth, column) => totalWidth + (column.width ?? 100), 0), [columns, props.frozenColumnIndex]);
-    const stickyTopHeight = headerHeight + (summary?.position === 'top' ? summaryHeight : 0);
-    const stickyBottomHeight = summary?.position === 'bottom' ? summaryHeight : 0;
-    const stickyFixedHeight = stickyTopHeight + stickyBottomHeight;
     const scrollViewportHeight = contentBodyHeight + stickyFixedHeight;
     const physicalScrollableRowsHeight = Math.max(virtualScrollWindowMetrics.physicalContentHeight - frozenRowsHeight, 0);
     const scrollPlaneHeight = stickyFixedHeight + virtualScrollWindowMetrics.physicalContentHeight;
-    const scrollPlaneContentWidth = (frozenColumnsWidth ?? 0) + scrollableColumnsWidth;
     const scrollPlaneWidth = Math.max(width, scrollPlaneContentWidth);
     const customVerticalScrollbarGutter = scrollbar.vertical.visible && scrollbar.variant === 'classic'
         ? 'var(--bgrid-scrollbar-classic-gutter-size)'
@@ -471,8 +475,9 @@ function Table(props) {
             : undefined;
     const scrollPlaneMinWidth = customVerticalScrollbarGutter
         ? `max(100%, calc(${scrollPlaneContentWidth}px + ${customVerticalScrollbarGutter}))`
-        : scrollPlaneWidth;
-    const measuredScrollbarMetrics = useScrollbarMetrics(scrollContainerRef, [data.length, itemHeight, itemPadding, contentBodyHeight, width], scrollPlaneContentWidth, stickyFixedHeight);
+        : scrollbar.variant === 'native'
+            ? `max(100%, ${scrollPlaneContentWidth}px)`
+            : scrollPlaneWidth;
     const scrollbarMetrics = React.useMemo(() => virtualScrollWindowMetrics.enabled
         ? {
             ...measuredScrollbarMetrics,
@@ -491,6 +496,25 @@ function Table(props) {
         right: (frozenColumnsWidth ?? 0) + measuredVerticalScrollbarGutter,
         bottom: stickyFixedHeight + frozenRowsHeight,
     };
+    const verticalScrollbarGutterWidth = scrollbar.vertical.visible && scrollbar.variant === 'classic'
+        ? 25
+        : scrollbar.vertical.visible && scrollbar.variant === 'modern'
+            ? 24
+            : 0;
+    const horizontalViewportSize = scrollbarMetrics.horizontal.viewportSize > 0
+        ? scrollbarMetrics.horizontal.viewportSize
+        : Math.max(width - containerBorderWidth * 2, 0);
+    const mainViewportWidth = Math.max(horizontalViewportSize - (frozenColumnsWidth ?? 0) - verticalScrollbarGutterWidth, 0);
+    const renderSelectionOverlay = (quadrant) => {
+        const topQuadrant = quadrant === 'top-left' || quadrant === 'top-main';
+        const leftQuadrant = quadrant === 'top-left' || quadrant === 'body-left';
+        return (React.createElement(CellSelectionOverlay, { quadrant: quadrant, selectionFragments: selectionFragments, activeFragments: activeFragments, activeFill: activeOverlayFill, activeRing: activeOverlayRing, viewport: {
+                left: leftQuadrant ? 0 : scrollLeft,
+                top: topQuadrant ? 0 : scrollTop,
+                width: leftQuadrant ? frozenColumnsWidth ?? 0 : mainViewportWidth,
+                height: topQuadrant ? frozenRowsHeight : scrollableBodyHeight,
+            }, offsetTop: !topQuadrant && virtualScrollWindowMetrics.enabled ? virtualScrollBase : 0 }));
+    };
     const showBottomBar = shouldRenderBottomBar({
         hasPage: !!page,
         hasHorizontalOverflow: scrollbarMetrics.horizontal.hasOverflow,
@@ -707,6 +731,8 @@ function Table(props) {
             return;
         hoveredRowIndexesRef.current.forEach(hoveredIndex => {
             containerRef.current?.querySelectorAll(`tr[data-ri="${hoveredIndex}"]`).forEach(el => {
+                if (el.closest('[role="grid"], [role="treegrid"]') !== containerRef.current)
+                    return;
                 el.classList.remove('bgrid-row-hover');
             });
         });
@@ -722,6 +748,8 @@ function Table(props) {
         clearHoveredRow();
         rowIndexes.forEach(rowIndex => {
             containerRef.current?.querySelectorAll(`tr[data-ri="${rowIndex}"]`).forEach(el => {
+                if (el.closest('[role="grid"], [role="treegrid"]') !== containerRef.current)
+                    return;
                 el.classList.add('bgrid-row-hover');
             });
         });
@@ -755,15 +783,25 @@ function Table(props) {
             clearHoveredRow();
             return;
         }
-        const target = evt.target;
+        const target = evt.target instanceof HTMLElement ? evt.target : null;
+        const detailOwner = target?.closest('[data-bgrid-detail-owner]');
+        if (detailOwner && containerRef.current?.contains(detailOwner)) {
+            clearHoveredRow();
+            return;
+        }
         updateAxisSelectionByTarget(target);
         const physicalCellPosition = getCellPosition(target, containerRef.current);
         const cellPosition = physicalCellPosition ? toLogicalCellPosition(physicalCellPosition) : undefined;
         if (cellSelectionEnabled && cellSelectionDragRef.current && cellPosition) {
             setCellSelectionRanges(updateSelectionDragRange(cellSelectionDragRef.current, getRangeFromDrag(cellSelectionDragRef.current, cellPosition)));
         }
+        const targetGrid = target?.closest('[role="grid"], [role="treegrid"]');
+        if (targetGrid && targetGrid !== containerRef.current && containerRef.current?.contains(targetGrid)) {
+            clearHoveredRow();
+            return;
+        }
         const tr = target?.closest('tr[data-ri]');
-        if (!tr || !containerRef.current?.contains(tr)) {
+        if (!tr || tr.closest('[role="grid"], [role="treegrid"]') !== containerRef.current) {
             clearHoveredRow();
             return;
         }
@@ -788,6 +826,13 @@ function Table(props) {
     const onBodyPointerDownCapture = useCallback((evt) => {
         if (disabled)
             return;
+        const target = evt.target instanceof Element ? evt.target : null;
+        const detailOwner = target?.closest('[data-bgrid-detail-owner]');
+        if (detailOwner && containerRef.current?.contains(detailOwner))
+            return;
+        const targetGrid = target?.closest('[role="grid"], [role="treegrid"]');
+        if (targetGrid && targetGrid !== containerRef.current && containerRef.current?.contains(targetGrid))
+            return;
         const navEnabled = cellNavigationOptions?.enabled ?? true;
         if (!cellSelectionEnabled && !navEnabled)
             return;
@@ -1314,6 +1359,8 @@ function Table(props) {
             setFooterHeight(props.footerHeight);
         if (props.summaryHeight !== undefined)
             setSummaryHeight(props.summaryHeight);
+        if (props.summaryRowHeight !== undefined)
+            setSummaryRowHeight(props.summaryRowHeight);
         if (props.itemHeight !== undefined)
             setItemHeight(props.itemHeight);
         if (props.itemPadding !== undefined)
@@ -1323,12 +1370,14 @@ function Table(props) {
         props.headerHeight,
         props.footerHeight,
         props.summaryHeight,
+        props.summaryRowHeight,
         props.itemHeight,
         props.itemPadding,
         setWidth,
         setHeaderHeight,
         setFooterHeight,
         setSummaryHeight,
+        setSummaryRowHeight,
         setItemHeight,
         setItemPadding,
     ]);
@@ -1895,6 +1944,19 @@ function Table(props) {
             const activeElement = document.activeElement;
             if (!container || (activeElement !== container && !container.contains(activeElement)))
                 return;
+            const target = evt.target instanceof Element ? evt.target : null;
+            const detailOwner = target?.closest('[data-bgrid-detail-owner]');
+            if (detailOwner && container.contains(detailOwner))
+                return;
+            const activeDetailOwner = activeElement instanceof Element ? activeElement.closest('[data-bgrid-detail-owner]') : null;
+            if (activeDetailOwner && container.contains(activeDetailOwner))
+                return;
+            const targetGrid = target?.closest('[role="grid"], [role="treegrid"]');
+            if (targetGrid && targetGrid !== container && container.contains(targetGrid))
+                return;
+            const activeGrid = activeElement instanceof Element ? activeElement.closest('[role="grid"], [role="treegrid"]') : null;
+            if (activeGrid && activeGrid !== container && container.contains(activeGrid))
+                return;
             if (disabled) {
                 stopArrowRepeat();
                 return;
@@ -1908,7 +1970,7 @@ function Table(props) {
                     evt.stopPropagation();
                     requestSearchOpen(true, 'shortcut');
                     setTimeout(() => {
-                        const input = container.querySelector('.bgrid-search-input');
+                        const input = Array.from(container.querySelectorAll('.bgrid-search-input')).find(el => el.closest('[role="grid"], [role="treegrid"]') === container);
                         input?.focus({ preventScroll: true });
                         input?.select();
                     }, searchOpen ? 0 : 1);
@@ -1919,7 +1981,7 @@ function Table(props) {
                 return;
             const isShift = evt.shiftKey;
             if (!cellInteractionSession && activeCell && (evt.key === 'ContextMenu' || (isShift && evt.key === 'F10'))) {
-                const targetCell = container.querySelector(`td[data-bgrid-cell="true"][data-row-index="${activeCell.rowIndex}"][data-column-index="${activeCell.columnIndex}"]`);
+                const targetCell = Array.from(container.querySelectorAll(`td[data-bgrid-cell="true"][data-row-index="${activeCell.rowIndex}"][data-column-index="${activeCell.columnIndex}"]`)).find(el => el.closest('[role="grid"], [role="treegrid"]') === container);
                 const rect = targetCell?.getBoundingClientRect();
                 if (rect && openCellContextMenu(activeCell, rect.left + 8, rect.top + Math.min(rect.height, 20), true)) {
                     evt.preventDefault();
@@ -2121,6 +2183,19 @@ function Table(props) {
             const activeElement = document.activeElement;
             if (!container || (activeElement !== container && !container.contains(activeElement)))
                 return;
+            const target = evt.target instanceof Element ? evt.target : null;
+            const detailOwner = target?.closest('[data-bgrid-detail-owner]');
+            if (detailOwner && container.contains(detailOwner))
+                return;
+            const activeDetailOwner = activeElement instanceof Element ? activeElement.closest('[data-bgrid-detail-owner]') : null;
+            if (activeDetailOwner && container.contains(activeDetailOwner))
+                return;
+            const targetGrid = target?.closest('[role="grid"], [role="treegrid"]');
+            if (targetGrid && targetGrid !== container && container.contains(targetGrid))
+                return;
+            const activeGrid = activeElement instanceof Element ? activeElement.closest('[role="grid"], [role="treegrid"]') : null;
+            if (activeGrid && activeGrid !== container && container.contains(activeGrid))
+                return;
             if (keyboardRuntimeRef.current.disabled)
                 return;
             if (isInteractiveTarget(evt.target))
@@ -2133,6 +2208,19 @@ function Table(props) {
             const activeElement = document.activeElement;
             if (!container || (activeElement !== container && !container.contains(activeElement)))
                 return;
+            const target = evt.target instanceof Element ? evt.target : null;
+            const detailOwner = target?.closest('[data-bgrid-detail-owner]');
+            if (detailOwner && container.contains(detailOwner))
+                return;
+            const activeDetailOwner = activeElement instanceof Element ? activeElement.closest('[data-bgrid-detail-owner]') : null;
+            if (activeDetailOwner && container.contains(activeDetailOwner))
+                return;
+            const targetGrid = target?.closest('[role="grid"], [role="treegrid"]');
+            if (targetGrid && targetGrid !== container && container.contains(targetGrid))
+                return;
+            const activeGrid = activeElement instanceof Element ? activeElement.closest('[role="grid"], [role="treegrid"]') : null;
+            if (activeGrid && activeGrid !== container && container.contains(activeGrid))
+                return;
             if (keyboardRuntimeRef.current.disabled)
                 return;
             if (keyboardRuntimeRef.current.editItemIndex !== undefined && keyboardRuntimeRef.current.editItemIndex >= 0) {
@@ -2151,13 +2239,23 @@ function Table(props) {
             }
         };
         const handlePointerDown = (evt) => {
+            const container = containerRef.current;
+            const target = evt.target;
+            if (!container)
+                return;
+            const detailOwner = target instanceof Element ? target.closest('[data-bgrid-detail-owner]') : null;
+            const targetGrid = target instanceof Element ? target.closest('[role="grid"], [role="treegrid"]') : null;
+            if ((detailOwner && container.contains(detailOwner)) ||
+                (targetGrid && targetGrid !== container && container.contains(targetGrid))) {
+                const { clearCellSelection, endCellSelectionDrag } = keyboardRuntimeRef.current;
+                endCellSelectionDrag();
+                clearCellSelection();
+                return;
+            }
             const { clearCellSelection, clearCellSelectionOnOutsideClick, endCellSelectionDrag } = keyboardRuntimeRef.current;
             if (!clearCellSelectionOnOutsideClick)
                 return;
-            const container = containerRef.current;
-            const target = evt.target;
-            if (!container ||
-                (target instanceof Node && container.contains(target)) ||
+            if ((target instanceof Node && container.contains(target)) ||
                 isPointInsideElement(container, evt.clientX, evt.clientY)) {
                 return;
             }
@@ -2192,7 +2290,7 @@ function Table(props) {
             }, className: className, tabIndex: 0, "aria-disabled": disabled ? 'true' : undefined, onFocus: event => {
                 if (event.target !== event.currentTarget)
                     return;
-                const gateway = event.currentTarget.querySelector('[data-bgrid-text-editor-gateway="true"]');
+                const gateway = Array.from(event.currentTarget.querySelectorAll('[data-bgrid-text-editor-gateway="true"]')).find(el => el.closest('[role="grid"], [role="treegrid"]') === event.currentTarget);
                 if (gateway instanceof HTMLInputElement) {
                     gateway.focus({ preventScroll: true });
                 }
@@ -2206,9 +2304,16 @@ function Table(props) {
             React.createElement(ScrollContainer, { ref: scrollContainerRef, role: 'rfdg-scroll-container', "data-bgrid-scroll-plane": 'sticky', style: { height: scrollViewportHeight }, onPointerDownCapture: onBodyPointerDownCapture, onPointerOverCapture: onBodyPointerOverCapture, onPointerLeave: onBodyPointerLeave, onContextMenuCapture: event => {
                     if (disabled)
                         return;
+                    const target = event.target instanceof HTMLElement ? event.target : null;
+                    const detailOwner = target?.closest('[data-bgrid-detail-owner]');
+                    if (detailOwner && containerRef.current?.contains(detailOwner))
+                        return;
+                    const targetGrid = target?.closest('[role="grid"], [role="treegrid"]');
+                    if (targetGrid && targetGrid !== containerRef.current && containerRef.current?.contains(targetGrid))
+                        return;
                     if (isInteractiveTarget(event.target))
                         return;
-                    const cell = getCellPosition(event.target, containerRef.current);
+                    const cell = getCellPosition(target, containerRef.current);
                     if (!cell)
                         return;
                     if (openCellContextMenu(cell, event.clientX, event.clientY, false)) {
@@ -2229,8 +2334,8 @@ function Table(props) {
                             React.createElement(TableSummary, { position: 'top' })))),
                     React.createElement("div", { className: 'bgrid-virtual-row-backdrop', "aria-hidden": 'true', style: {
                             top: stickyTopHeight,
-                            height: contentBodyHeight,
-                            marginBottom: -contentBodyHeight,
+                            height: effectiveBodyHeight,
+                            marginBottom: -effectiveBodyHeight,
                         } }),
                     React.createElement("div", { className: 'bgrid-body-scroll-content', style: { height: virtualScrollWindowMetrics.physicalContentHeight } },
                         frozenRowCount > 0 && (React.createElement("div", { className: 'bgrid-frozen-rows-layer', style: { height: frozenRowsHeight, top: stickyTopHeight }, "data-bgrid-row-band": 'frozen' },
@@ -2238,7 +2343,7 @@ function Table(props) {
                                 React.createElement(TableBodyFrozen, { rowKeyRegistry: rowKeyRegistry, rowHeightMetrics: rowHeightMetrics, scrollContainerRef: scrollContainerRef, rowRange: frozenRowRange, role: 'rfdg-body-top-frozen', quadrant: 'top-left', allowRowReorder: false }),
                                 renderSelectionOverlay('top-left'))),
                             React.createElement("div", { className: 'bgrid-frozen-rows-main', style: { left: frozenColumnsWidth }, role: 'rfdg-frozen-rows-main' },
-                                React.createElement(TableBody, { rowKeyRegistry: rowKeyRegistry, rowHeightMetrics: rowHeightMetrics, scrollContainerRef: scrollContainerRef, rowRange: frozenRowRange, role: 'rfdg-body-top', quadrant: 'top-main', allowRowReorder: false }),
+                                React.createElement(TableBody, { rowKeyRegistry: rowKeyRegistry, rowHeightMetrics: rowHeightMetrics, scrollContainerRef: scrollContainerRef, rowRange: frozenRowRange, role: 'rfdg-body-top', quadrant: 'top-main', allowRowReorder: false, viewportWidth: mainViewportWidth }),
                                 renderSelectionOverlay('top-main')))),
                         React.createElement("div", { className: 'bgrid-scrollable-rows-layer', style: { height: physicalScrollableRowsHeight }, "data-bgrid-row-band": 'scrollable' },
                             (frozenColumnsWidth ?? 0) > 0 && (React.createElement(FrozenScrollContent, { style: {
@@ -2254,7 +2359,7 @@ function Table(props) {
                                         : visibleScrollableRows.paddingTop,
                                     height: physicalScrollableRowsHeight,
                                 } },
-                                React.createElement(TableBody, { rowKeyRegistry: rowKeyRegistry, rowHeightMetrics: rowHeightMetrics, scrollContainerRef: scrollContainerRef, rowRange: scrollableRowRange, quadrant: 'body-main' }),
+                                React.createElement(TableBody, { rowKeyRegistry: rowKeyRegistry, rowHeightMetrics: rowHeightMetrics, scrollContainerRef: scrollContainerRef, rowRange: scrollableRowRange, quadrant: 'body-main', viewportWidth: mainViewportWidth }),
                                 renderSelectionOverlay('body-main')))),
                     summary && summary.position === 'bottom' && (React.createElement(SummaryContainer, { position: 'bottom', style: { height: summaryHeight, bottom: 0 }, role: 'rfdg-summary-container' },
                         (frozenColumnsWidth ?? 0) > 0 && (React.createElement(FrozenSummary, { style: { width: frozenColumnsWidth }, role: 'rfdg-frozen-summary' },
@@ -2275,18 +2380,20 @@ function Table(props) {
             React.createElement(Loading, { active: loading }))));
 }
 function getAxisSelectionTarget(target, container) {
-    if (!target || !container)
+    if (!target || !container || !(target instanceof Element))
         return undefined;
     const lineNumberCell = target.closest('.bgrid-line-number-cell[data-row-index]');
-    if (lineNumberCell instanceof HTMLElement && container.contains(lineNumberCell)) {
+    if (lineNumberCell instanceof HTMLElement && lineNumberCell.closest('[role="grid"], [role="treegrid"]') === container) {
         const rowIndex = Number(lineNumberCell.dataset.rowIndex);
         if (Number.isFinite(rowIndex)) {
             return { axis: 'row', startIndex: rowIndex, endIndex: rowIndex };
         }
     }
     const headerCell = target.closest('[data-header-cell-type][data-column-index][data-bgrid-axis-selectable="true"]');
-    if (!(headerCell instanceof HTMLTableCellElement) || !container.contains(headerCell))
+    if (!(headerCell instanceof HTMLTableCellElement) ||
+        headerCell.closest('[role="grid"], [role="treegrid"]') !== container) {
         return undefined;
+    }
     if (target.closest('.bgrid-col-resizer, .bgrid-toolbox-trigger-btn'))
         return undefined;
     if (headerCell.classList.contains('drag-item') && target.closest('.bgrid-column-drag-handle'))
@@ -2323,8 +2430,10 @@ function updateAxisSelectionDragRange(dragState, activeRange) {
     return nextRanges;
 }
 function getCellPosition(target, container) {
-    const cell = target?.closest('td[data-bgrid-cell="true"]');
-    if (!(cell instanceof HTMLElement) || !container?.contains(cell))
+    if (!target || !(target instanceof Element))
+        return undefined;
+    const cell = target.closest('td[data-bgrid-cell="true"]');
+    if (!(cell instanceof HTMLElement) || cell.closest('[role="grid"], [role="treegrid"]') !== container)
         return undefined;
     const rowIndex = Number(cell.dataset.rowIndex);
     const columnIndex = Number(cell.dataset.columnIndex);

package/esm/components/TableBody.js

@@ -5,6 +5,7 @@ import TableColGroup from './TableColGroup';
 import TableColGroupFrozen from './TableColGroupFrozen';
 import { getCellValueByRowKey, getRowReorderOffset, getRowReorderRole, useBodyData, } from '../utils';
 import { TableBodyRow } from './TableBodyRow';
+import { MasterDetailRow } from './MasterDetailCell';
 import { BGridDataItemStatus } from '../types';
 export function getVisibleColumnRange(columns, firstScrollableColumnIndex, scrollLeft, viewportWidth) {
     const lastColumnIndex = columns.length - 1;
@@ -102,7 +103,7 @@ function getRowReactKey(item, sourceIndex, rowKey, registry) {
     }
     return `bgrid-row-source:${sourceIndex}`;
 }
-function TableBody({ rowKeyRegistry, region = 'main', rowRange, style, role, quadrant, allowRowReorder = true, onRowReorderPointerDown, onRowReorderKeyDown, rowHeightMetrics, }) {
+function TableBody({ rowKeyRegistry, region = 'main', rowRange, style, role, quadrant, allowRowReorder = true, onRowReorderPointerDown, onRowReorderKeyDown, rowHeightMetrics, viewportWidth, }) {
     const isLeftRegion = region === 'left';
     // [Selector Group 1] Scroll & Dimensions - 스크롤 및 차원
     const { scrollTop, scrollLeft, width, frozenColumnsWidth, itemHeight, itemPadding, displayItemCount } = useAppStore(useShallow(s => ({
@@ -225,7 +226,10 @@ function TableBody({ rowKeyRegistry, region = 'main', rowRange, style, role, qua
                 const isRowEditing = cellInteractionSession?.kind === 'editor' &&
                     (cellInteractionSession.cell.rowIndex === ri || cellInteractionSession.hostCell.rowIndex === ri);
                 const rowReactKey = getRowReactKey(item, sourceIndex, rowKey, rowKeyRegistry);
-                return (React.createElement(TableBodyRow, { key: rowReactKey, item: item, data: data, ri: ri, sourceIndex: sourceIndex, columns: columns, startCIdx: startCIdx, endCIdx: endCIdx, frozenColumnIndex: frozenColumnIndex, isLeftRegion: isLeftRegion, showLineNumber: showLineNumber ?? false, hasRowChecked: hasRowChecked, isRadio: Boolean(isRadio), checked: checkedAll === true || checkedIndexesMap.get(sourceIndex), rowCheckedDisabled: Boolean(disabled || rowChecked?.disabled?.(sourceIndex, item)), rowStatus: rowStatus, active: active, className: className, resolvedRowHeight: resolvedRowHeight, itemHeight: itemHeight, itemPadding: itemPadding, editable: Boolean(editable), disabled: Boolean(disabled), editTrigger: editTrigger, hasOnClick: hasOnClick, cellMergeOptions: cellMergeOptions, mergeColumns: mergeColumns, odd: !mergeColumns ? ri % 2 === 0 : undefined, variant: variant, rowReorderEnabled: rowReorderEnabled, rowReorderRole: rowReorderRole, rowReorderPhase: reorderingInfo?.phase, rowReorderDirection: rowReorderDirection, rowReorderOffset: rowReorderOffset, reorder: reorder, reorderingInfo: reorderingInfo, searchMatchTokens: searchMatchTokens, currentSearchToken: currentSearchToken, isRowEditing: isRowEditing, cellInteractionSession: isRowEditing ? cellInteractionSession : undefined, handleClick: handleClick, setEditItem: setEditItem, setItemValue: setItemValue, handleMoveEditFocus: handleMoveEditFocus, handleChangeChecked: handleChangeChecked, handleChangeCheckedRadio: handleChangeCheckedRadio, getRowSpan: getRowSpan, onRowReorderPointerDown: onRowReorderPointerDown, onRowReorderKeyDown: onRowReorderKeyDown }));
+                const detailHeight = rowHeightMetrics?.detailHeights?.[ri] ?? 0;
+                return (React.createElement(React.Fragment, { key: rowReactKey },
+                    React.createElement(TableBodyRow, { item: item, data: data, ri: ri, sourceIndex: sourceIndex, columns: columns, startCIdx: startCIdx, endCIdx: endCIdx, frozenColumnIndex: frozenColumnIndex, isLeftRegion: isLeftRegion, showLineNumber: showLineNumber ?? false, hasRowChecked: hasRowChecked, isRadio: Boolean(isRadio), checked: checkedAll === true || checkedIndexesMap.get(sourceIndex), rowCheckedDisabled: Boolean(disabled || rowChecked?.disabled?.(sourceIndex, item)), rowStatus: rowStatus, active: active, className: className, resolvedRowHeight: resolvedRowHeight, itemHeight: itemHeight, itemPadding: itemPadding, editable: Boolean(editable), disabled: Boolean(disabled), editTrigger: editTrigger, hasOnClick: hasOnClick, cellMergeOptions: cellMergeOptions, mergeColumns: mergeColumns, odd: !mergeColumns ? ri % 2 === 0 : undefined, variant: variant, rowReorderEnabled: rowReorderEnabled, rowReorderRole: rowReorderRole, rowReorderPhase: reorderingInfo?.phase, rowReorderDirection: rowReorderDirection, rowReorderOffset: rowReorderOffset, reorder: reorder, reorderingInfo: reorderingInfo, searchMatchTokens: searchMatchTokens, currentSearchToken: currentSearchToken, isRowEditing: isRowEditing, cellInteractionSession: isRowEditing ? cellInteractionSession : undefined, handleClick: handleClick, setEditItem: setEditItem, setItemValue: setItemValue, handleMoveEditFocus: handleMoveEditFocus, handleChangeChecked: handleChangeChecked, handleChangeCheckedRadio: handleChangeCheckedRadio, getRowSpan: getRowSpan, onRowReorderPointerDown: onRowReorderPointerDown, onRowReorderKeyDown: onRowReorderKeyDown }),
+                    detailHeight > 0 && (React.createElement(MasterDetailRow, { item: item, sourceIndex: sourceIndex, visibleIndex: ri, detailHeight: detailHeight, isLeftRegion: isLeftRegion, viewportWidth: viewportWidth ?? Math.max(width - (frozenColumnsWidth ?? 0), 0), frozenColumnsWidth: frozenColumnsWidth ?? 0, colSpan: isLeftRegion ? Math.max(frozenColumnIndex, 1) : Math.max(columns.length - frozenColumnIndex, 1) }))));
             }),
             endNumber - startIdx < 1 &&
                 (isLeftRegion ? (React.createElement(NoDataTr, { itemHeight: itemHeight, itemPadding: itemPadding })) : (React.createElement(NoDataTr, { itemHeight: itemHeight, itemPadding: itemPadding }, msg?.emptyList ? (React.createElement(React.Fragment, null,

package/esm/components/TableBodyCell.js

@@ -3,6 +3,7 @@ import { PluginCellEditor } from './PluginCellEditor';
 import { CellEditorIcon } from './CellEditorIcon';
 import { CheckboxCellEditor } from './CheckboxCellEditor';
 import { TreeCell } from './TreeCell';
+import { MasterDetailCell } from './MasterDetailCell';
 function Cell({ index, hostIndex = index, columnIndex, column, item, valueByRowKey, handleSave, handleCancel, handleMove, editable, cellEditable, interactionEditing = false, editSession, }) {
     const isPluginEditorActive = Boolean(editable && editSession && column.editor?.type === 'plugin');
     let content;
@@ -37,7 +38,7 @@ function Cell({ index, hostIndex = index, columnIndex, column, item, valueByRowK
         content = renderSafeCellValue(valueByRowKey);
     }
     return (React.createElement("div", { className: isPluginEditorActive ? 'bgrid-cell-content bgrid-cell-content-plugin-editor' : 'bgrid-cell-content' },
-        React.createElement("div", { className: 'bgrid-cell-value' }, column.treeCell ? (React.createElement(TreeCell, { column: column, item: item }, content)) : (content)),
+        React.createElement("div", { className: 'bgrid-cell-value' }, column.treeCell ? (React.createElement(TreeCell, { column: column, item: item }, content)) : column.masterDetailCell ? (React.createElement(MasterDetailCell, { column: column, item: item, sourceIndex: index }, content)) : (content)),
         column.editorIcon && column.editor?.type !== 'checkbox' && cellEditable && (React.createElement(CellEditorIcon, { hostCell: { rowIndex: hostIndex, columnIndex }, index: index, columnIndex: columnIndex, column: column, item: item, value: valueByRowKey, editing: interactionEditing }))));
 }
 function renderSafeCellValue(value, preserveRenderableArrays = false) {