beautiful-grid 1.0.13 → 1.0.15

package/cjs/components/Table.js

@@ -200,7 +200,8 @@ function Table(props) {
         footerHeight: s.footerHeight,
         bottomBarHeight: s.bottomBarHeight,
         summaryHeight: s.summaryHeight,
-    }); })), headerHeight = _10.headerHeight, footerHeight = _10.footerHeight, bottomBarHeight = _10.bottomBarHeight, summaryHeight = _10.summaryHeight;
+        summaryRowHeight: s.summaryRowHeight,
+    }); })), headerHeight = _10.headerHeight, footerHeight = _10.footerHeight, bottomBarHeight = _10.bottomBarHeight, summaryHeight = _10.summaryHeight, summaryRowHeight = _10.summaryRowHeight;
     // [Selector Group 3] Scroll State - 스크롤 상태
     var _11 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         scrollLeft: s.scrollLeft,
@@ -259,12 +260,13 @@ function Table(props) {
         setFooterHeight: s.setFooterHeight,
         setBottomBarHeight: s.setBottomBarHeight,
         setSummaryHeight: s.setSummaryHeight,
+        setSummaryRowHeight: s.setSummaryRowHeight,
         setItemHeight: s.setItemHeight,
         setItemPadding: s.setItemPadding,
         setLoading: s.setLoading,
         setSpinning: s.setSpinning,
         setDisabled: s.setDisabled,
-    }); })), setHeight = _16.setHeight, setWidth = _16.setWidth, setContentBodyHeight = _16.setContentBodyHeight, setDisplayItemCount = _16.setDisplayItemCount, setHeaderHeight = _16.setHeaderHeight, setFooterHeight = _16.setFooterHeight, setBottomBarHeight = _16.setBottomBarHeight, setSummaryHeight = _16.setSummaryHeight, setItemHeight = _16.setItemHeight, setItemPadding = _16.setItemPadding, setLoading = _16.setLoading, setSpinning = _16.setSpinning, setDisabled = _16.setDisabled;
+    }); })), setHeight = _16.setHeight, setWidth = _16.setWidth, setContentBodyHeight = _16.setContentBodyHeight, setDisplayItemCount = _16.setDisplayItemCount, setHeaderHeight = _16.setHeaderHeight, setFooterHeight = _16.setFooterHeight, setBottomBarHeight = _16.setBottomBarHeight, setSummaryHeight = _16.setSummaryHeight, setSummaryRowHeight = _16.setSummaryRowHeight, setItemHeight = _16.setItemHeight, setItemPadding = _16.setItemPadding, setLoading = _16.setLoading, setSpinning = _16.setSpinning, setDisabled = _16.setDisabled;
     // [Selector Group 7] Data & Column Setters - 데이터/열 설정자
     var _17 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
         setData: s.setData,
@@ -341,22 +343,31 @@ function Table(props) {
     var variableRowOffsets = rowHeightMetrics.variable ? rowHeightMetrics.offsets : undefined;
     var scrollableBodyHeight = Math.max(contentBodyHeight - frozenRowsHeight, 0);
     var scrollOverscanRows = Math.max(KEYBOARD_NAVIGATION_ROW_WINDOW_SIZE, Math.ceil(scrollableBodyHeight / Math.max(trHeight, 1)));
-    var mainViewportWidth = Math.max(width - (frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0), 0);
     var logicalBodyContentHeight = rowHeightMetrics.totalHeight;
+    var scrollContainerRef = (0, react_1.useRef)(null);
+    var scrollableColumnsWidth = React.useMemo(function () { var _a; return columns.slice((_a = props.frozenColumnIndex) !== null && _a !== void 0 ? _a : 0).reduce(function (totalWidth, column) { var _a; return totalWidth + ((_a = column.width) !== null && _a !== void 0 ? _a : 100); }, 0); }, [columns, props.frozenColumnIndex]);
+    var stickyTopHeight = headerHeight + ((summary === null || summary === void 0 ? void 0 : summary.position) === 'top' ? summaryHeight : 0);
+    var stickyBottomHeight = (summary === null || summary === void 0 ? void 0 : summary.position) === 'bottom' ? summaryHeight : 0;
+    var stickyFixedHeight = stickyTopHeight + stickyBottomHeight;
+    var scrollPlaneContentWidth = (frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0) + scrollableColumnsWidth;
+    var measuredScrollbarMetrics = (0, scrollbar_1.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.
+    var effectiveBodyHeight = scrollbar.variant === 'native'
+        ? measuredScrollbarMetrics.vertical.viewportSize || contentBodyHeight
+        : contentBodyHeight;
     var virtualScrollWindowMetrics = React.useMemo(function () {
         return (0, utils_1.getVirtualScrollWindowMetrics)({
             logicalContentHeight: logicalBodyContentHeight,
-            viewportHeight: contentBodyHeight,
+            viewportHeight: effectiveBodyHeight,
             enabled: scrollbar.variant !== 'native',
         });
-    }, [contentBodyHeight, logicalBodyContentHeight, scrollbar.variant]);
+    }, [effectiveBodyHeight, logicalBodyContentHeight, scrollbar.variant]);
     var _22 = __read(React.useState(0), 2), virtualScrollBase = _22[0], setVirtualScrollBase = _22[1];
     var virtualScrollBaseRef = (0, react_1.useRef)(0);
     var containerRef = (0, react_1.useRef)(null);
     var searchPopoverRef = (0, react_1.useRef)(null);
     var editorPortalRef = (0, react_1.useRef)(null);
     var bodyContainerRef = (0, react_1.useRef)(null);
-    var scrollContainerRef = (0, react_1.useRef)(null);
     var logicalVerticalScrollState = React.useMemo(function () { return ({
         scrollTop: scrollTop,
         scrollHeight: virtualScrollWindowMetrics.logicalContentHeight,
@@ -419,6 +430,8 @@ function Table(props) {
             rowCount: data.length,
             rowHeight: trHeight,
             rowOffsets: variableRowOffsets,
+            rowHeights: rowHeightMetrics.heights,
+            detailHeights: rowHeightMetrics.detailHeights,
             frozenColumnCount: (_a = props.frozenColumnIndex) !== null && _a !== void 0 ? _a : 0,
             frozenRowCount: frozenRowCount,
             frozenColumnsWidth: frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0,
@@ -430,6 +443,8 @@ function Table(props) {
         frozenColumnsWidth,
         frozenRowCount,
         props.frozenColumnIndex,
+        rowHeightMetrics.detailHeights,
+        rowHeightMetrics.heights,
         trHeight,
         variableRowOffsets,
     ]);
@@ -441,6 +456,8 @@ function Table(props) {
             rowCount: data.length,
             rowHeight: trHeight,
             rowOffsets: variableRowOffsets,
+            rowHeights: rowHeightMetrics.heights,
+            detailHeights: rowHeightMetrics.detailHeights,
             frozenColumnCount: (_a = props.frozenColumnIndex) !== null && _a !== void 0 ? _a : 0,
             frozenRowCount: frozenRowCount,
             frozenColumnsWidth: frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0,
@@ -452,21 +469,13 @@ function Table(props) {
         frozenColumnsWidth,
         frozenRowCount,
         props.frozenColumnIndex,
+        rowHeightMetrics.detailHeights,
+        rowHeightMetrics.heights,
         trHeight,
         variableRowOffsets,
     ]);
     var activeOverlayFill = activeCellSelected;
     var activeOverlayRing = !!activeCell && !hasMultiCellSelection;
-    var renderSelectionOverlay = function (quadrant) {
-        var topQuadrant = quadrant === 'top-left' || quadrant === 'top-main';
-        var leftQuadrant = quadrant === 'top-left' || quadrant === 'body-left';
-        return (React.createElement(selection_1.CellSelectionOverlay, { quadrant: quadrant, selectionFragments: selectionFragments, activeFragments: activeFragments, activeFill: activeOverlayFill, activeRing: activeOverlayRing, viewport: {
-                left: leftQuadrant ? 0 : scrollLeft,
-                top: topQuadrant ? 0 : scrollTop,
-                width: leftQuadrant ? frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0 : mainViewportWidth,
-                height: topQuadrant ? frozenRowsHeight : scrollableBodyHeight,
-            }, offsetTop: !topQuadrant && virtualScrollWindowMetrics.enabled ? virtualScrollBase : 0 }));
-    };
     var visibleScrollableRows = React.useMemo(function () {
         var _a, _b, _c;
         return (0, utils_1.getVisibleScrollableRowRange)({
@@ -607,14 +616,9 @@ function Table(props) {
         storeRowKey,
         storeSourceIndexByVisibleIndex,
     ]);
-    var scrollableColumnsWidth = React.useMemo(function () { var _a; return columns.slice((_a = props.frozenColumnIndex) !== null && _a !== void 0 ? _a : 0).reduce(function (totalWidth, column) { var _a; return totalWidth + ((_a = column.width) !== null && _a !== void 0 ? _a : 100); }, 0); }, [columns, props.frozenColumnIndex]);
-    var stickyTopHeight = headerHeight + ((summary === null || summary === void 0 ? void 0 : summary.position) === 'top' ? summaryHeight : 0);
-    var stickyBottomHeight = (summary === null || summary === void 0 ? void 0 : summary.position) === 'bottom' ? summaryHeight : 0;
-    var stickyFixedHeight = stickyTopHeight + stickyBottomHeight;
     var scrollViewportHeight = contentBodyHeight + stickyFixedHeight;
     var physicalScrollableRowsHeight = Math.max(virtualScrollWindowMetrics.physicalContentHeight - frozenRowsHeight, 0);
     var scrollPlaneHeight = stickyFixedHeight + virtualScrollWindowMetrics.physicalContentHeight;
-    var scrollPlaneContentWidth = (frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0) + scrollableColumnsWidth;
     var scrollPlaneWidth = Math.max(width, scrollPlaneContentWidth);
     var customVerticalScrollbarGutter = scrollbar.vertical.visible && scrollbar.variant === 'classic'
         ? 'var(--bgrid-scrollbar-classic-gutter-size)'
@@ -623,8 +627,9 @@ function Table(props) {
             : undefined;
     var scrollPlaneMinWidth = customVerticalScrollbarGutter
         ? "max(100%, calc(".concat(scrollPlaneContentWidth, "px + ").concat(customVerticalScrollbarGutter, "))")
-        : scrollPlaneWidth;
-    var measuredScrollbarMetrics = (0, scrollbar_1.useScrollbarMetrics)(scrollContainerRef, [data.length, itemHeight, itemPadding, contentBodyHeight, width], scrollPlaneContentWidth, stickyFixedHeight);
+        : scrollbar.variant === 'native'
+            ? "max(100%, ".concat(scrollPlaneContentWidth, "px)")
+            : scrollPlaneWidth;
     var scrollbarMetrics = React.useMemo(function () {
         return virtualScrollWindowMetrics.enabled
             ? __assign(__assign({}, measuredScrollbarMetrics), { vertical: {
@@ -641,6 +646,25 @@ function Table(props) {
         right: (frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0) + measuredVerticalScrollbarGutter,
         bottom: stickyFixedHeight + frozenRowsHeight,
     };
+    var verticalScrollbarGutterWidth = scrollbar.vertical.visible && scrollbar.variant === 'classic'
+        ? 25
+        : scrollbar.vertical.visible && scrollbar.variant === 'modern'
+            ? 24
+            : 0;
+    var horizontalViewportSize = scrollbarMetrics.horizontal.viewportSize > 0
+        ? scrollbarMetrics.horizontal.viewportSize
+        : Math.max(width - containerBorderWidth * 2, 0);
+    var mainViewportWidth = Math.max(horizontalViewportSize - (frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0) - verticalScrollbarGutterWidth, 0);
+    var renderSelectionOverlay = function (quadrant) {
+        var topQuadrant = quadrant === 'top-left' || quadrant === 'top-main';
+        var leftQuadrant = quadrant === 'top-left' || quadrant === 'body-left';
+        return (React.createElement(selection_1.CellSelectionOverlay, { quadrant: quadrant, selectionFragments: selectionFragments, activeFragments: activeFragments, activeFill: activeOverlayFill, activeRing: activeOverlayRing, viewport: {
+                left: leftQuadrant ? 0 : scrollLeft,
+                top: topQuadrant ? 0 : scrollTop,
+                width: leftQuadrant ? frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0 : mainViewportWidth,
+                height: topQuadrant ? frozenRowsHeight : scrollableBodyHeight,
+            }, offsetTop: !topQuadrant && virtualScrollWindowMetrics.enabled ? virtualScrollBase : 0 }));
+    };
     var showBottomBar = (0, utils_1.shouldRenderBottomBar)({
         hasPage: !!page,
         hasHorizontalOverflow: scrollbarMetrics.horizontal.hasOverflow,
@@ -868,6 +892,8 @@ function Table(props) {
         hoveredRowIndexesRef.current.forEach(function (hoveredIndex) {
             var _a;
             (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("tr[data-ri=\"".concat(hoveredIndex, "\"]")).forEach(function (el) {
+                if (el.closest('[role="grid"], [role="treegrid"]') !== containerRef.current)
+                    return;
                 el.classList.remove('bgrid-row-hover');
             });
         });
@@ -884,6 +910,8 @@ function Table(props) {
         rowIndexes.forEach(function (rowIndex) {
             var _a;
             (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("tr[data-ri=\"".concat(rowIndex, "\"]")).forEach(function (el) {
+                if (el.closest('[role="grid"], [role="treegrid"]') !== containerRef.current)
+                    return;
                 el.classList.add('bgrid-row-hover');
             });
         });
@@ -910,20 +938,30 @@ function Table(props) {
         return true;
     }, [columns.length, data.length, setCellSelectionRanges]);
     var onBodyPointerOverCapture = (0, react_1.useCallback)(function (evt) {
-        var _a;
+        var _a, _b;
         if (disabled) {
             clearHoveredRow();
             return;
         }
-        var target = evt.target;
+        var target = evt.target instanceof HTMLElement ? evt.target : null;
+        var detailOwner = target === null || target === void 0 ? void 0 : target.closest('[data-bgrid-detail-owner]');
+        if (detailOwner && ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(detailOwner))) {
+            clearHoveredRow();
+            return;
+        }
         updateAxisSelectionByTarget(target);
         var physicalCellPosition = getCellPosition(target, containerRef.current);
         var cellPosition = physicalCellPosition ? toLogicalCellPosition(physicalCellPosition) : undefined;
         if (cellSelectionEnabled && cellSelectionDragRef.current && cellPosition) {
             setCellSelectionRanges(updateSelectionDragRange(cellSelectionDragRef.current, getRangeFromDrag(cellSelectionDragRef.current, cellPosition)));
         }
+        var targetGrid = target === null || target === void 0 ? void 0 : target.closest('[role="grid"], [role="treegrid"]');
+        if (targetGrid && targetGrid !== containerRef.current && ((_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.contains(targetGrid))) {
+            clearHoveredRow();
+            return;
+        }
         var tr = target === null || target === void 0 ? void 0 : target.closest('tr[data-ri]');
-        if (!tr || !((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(tr))) {
+        if (!tr || tr.closest('[role="grid"], [role="treegrid"]') !== containerRef.current) {
             clearHoveredRow();
             return;
         }
@@ -946,10 +984,17 @@ function Table(props) {
         updateAxisSelectionByTarget,
     ]);
     var onBodyPointerDownCapture = (0, react_1.useCallback)(function (evt) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         if (disabled)
             return;
-        var navEnabled = (_a = cellNavigationOptions === null || cellNavigationOptions === void 0 ? void 0 : cellNavigationOptions.enabled) !== null && _a !== void 0 ? _a : true;
+        var target = evt.target instanceof Element ? evt.target : null;
+        var detailOwner = target === null || target === void 0 ? void 0 : target.closest('[data-bgrid-detail-owner]');
+        if (detailOwner && ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(detailOwner)))
+            return;
+        var targetGrid = target === null || target === void 0 ? void 0 : target.closest('[role="grid"], [role="treegrid"]');
+        if (targetGrid && targetGrid !== containerRef.current && ((_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.contains(targetGrid)))
+            return;
+        var navEnabled = (_c = cellNavigationOptions === null || cellNavigationOptions === void 0 ? void 0 : cellNavigationOptions.enabled) !== null && _c !== void 0 ? _c : true;
         if (!cellSelectionEnabled && !navEnabled)
             return;
         if (evt.button !== 0 || isInteractiveTarget(evt.target))
@@ -959,12 +1004,12 @@ function Table(props) {
             : undefined;
         if (axisTarget && data.length > 0 && columns.length > 0) {
             evt.preventDefault();
-            (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.focus({ preventScroll: true });
+            (_d = containerRef.current) === null || _d === void 0 ? void 0 : _d.focus({ preventScroll: true });
             var isAdditiveSelection = evt.metaKey || evt.ctrlKey;
             var isRangeExtension = evt.shiftKey && (cellSelectionRange || activeCell);
             var activeRangeStart = axisTarget.axis === 'row'
-                ? (_c = cellSelectionRange === null || cellSelectionRange === void 0 ? void 0 : cellSelectionRange.startRowIndex) !== null && _c !== void 0 ? _c : activeCell === null || activeCell === void 0 ? void 0 : activeCell.rowIndex
-                : (_d = cellSelectionRange === null || cellSelectionRange === void 0 ? void 0 : cellSelectionRange.startColumnIndex) !== null && _d !== void 0 ? _d : activeCell === null || activeCell === void 0 ? void 0 : activeCell.columnIndex;
+                ? (_e = cellSelectionRange === null || cellSelectionRange === void 0 ? void 0 : cellSelectionRange.startRowIndex) !== null && _e !== void 0 ? _e : activeCell === null || activeCell === void 0 ? void 0 : activeCell.rowIndex
+                : (_f = cellSelectionRange === null || cellSelectionRange === void 0 ? void 0 : cellSelectionRange.startColumnIndex) !== null && _f !== void 0 ? _f : activeCell === null || activeCell === void 0 ? void 0 : activeCell.columnIndex;
             var startIndex = isRangeExtension ? activeRangeStart !== null && activeRangeStart !== void 0 ? activeRangeStart : axisTarget.startIndex : axisTarget.startIndex;
             var endIndex = axisTarget.startIndex < startIndex ? axisTarget.startIndex : axisTarget.endIndex;
             var baseRanges = isAdditiveSelection
@@ -999,7 +1044,7 @@ function Table(props) {
         }
         var cellPosition = toLogicalCellPosition(physicalCellPosition);
         evt.preventDefault();
-        (_e = containerRef.current) === null || _e === void 0 ? void 0 : _e.focus({ preventScroll: true });
+        (_g = containerRef.current) === null || _g === void 0 ? void 0 : _g.focus({ preventScroll: true });
         var clickedCell = {
             rowIndex: cellPosition.rowIndex,
             columnIndex: cellPosition.columnIndex,
@@ -1012,10 +1057,10 @@ function Table(props) {
             var isAdditiveSelection = evt.metaKey || evt.ctrlKey;
             var isRangeExtension = evt.shiftKey && (cellSelectionRange || activeCell);
             var startRowIndex = isRangeExtension
-                ? (_g = (_f = cellSelectionRange === null || cellSelectionRange === void 0 ? void 0 : cellSelectionRange.startRowIndex) !== null && _f !== void 0 ? _f : activeCell === null || activeCell === void 0 ? void 0 : activeCell.rowIndex) !== null && _g !== void 0 ? _g : cellPosition.rowIndex
+                ? (_j = (_h = cellSelectionRange === null || cellSelectionRange === void 0 ? void 0 : cellSelectionRange.startRowIndex) !== null && _h !== void 0 ? _h : activeCell === null || activeCell === void 0 ? void 0 : activeCell.rowIndex) !== null && _j !== void 0 ? _j : cellPosition.rowIndex
                 : cellPosition.rowIndex;
             var startColumnIndex = isRangeExtension
-                ? (_j = (_h = cellSelectionRange === null || cellSelectionRange === void 0 ? void 0 : cellSelectionRange.startColumnIndex) !== null && _h !== void 0 ? _h : activeCell === null || activeCell === void 0 ? void 0 : activeCell.columnIndex) !== null && _j !== void 0 ? _j : cellPosition.columnIndex
+                ? (_l = (_k = cellSelectionRange === null || cellSelectionRange === void 0 ? void 0 : cellSelectionRange.startColumnIndex) !== null && _k !== void 0 ? _k : activeCell === null || activeCell === void 0 ? void 0 : activeCell.columnIndex) !== null && _l !== void 0 ? _l : cellPosition.columnIndex
                 : cellPosition.columnIndex;
             var startRowSpan = isRangeExtension
                 ? Math.abs(cellPosition.rowIndex - startRowIndex) + 1
@@ -1506,6 +1551,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)
@@ -1515,12 +1562,14 @@ function Table(props) {
         props.headerHeight,
         props.footerHeight,
         props.summaryHeight,
+        props.summaryRowHeight,
         props.itemHeight,
         props.itemPadding,
         setWidth,
         setHeaderHeight,
         setFooterHeight,
         setSummaryHeight,
+        setSummaryRowHeight,
         setItemHeight,
         setItemPadding,
     ]);
@@ -2098,6 +2147,19 @@ function Table(props) {
             var activeElement = document.activeElement;
             if (!container || (activeElement !== container && !container.contains(activeElement)))
                 return;
+            var target = evt.target instanceof Element ? evt.target : null;
+            var detailOwner = target === null || target === void 0 ? void 0 : target.closest('[data-bgrid-detail-owner]');
+            if (detailOwner && container.contains(detailOwner))
+                return;
+            var activeDetailOwner = activeElement instanceof Element ? activeElement.closest('[data-bgrid-detail-owner]') : null;
+            if (activeDetailOwner && container.contains(activeDetailOwner))
+                return;
+            var targetGrid = target === null || target === void 0 ? void 0 : target.closest('[role="grid"], [role="treegrid"]');
+            if (targetGrid && targetGrid !== container && container.contains(targetGrid))
+                return;
+            var activeGrid = activeElement instanceof Element ? activeElement.closest('[role="grid"], [role="treegrid"]') : null;
+            if (activeGrid && activeGrid !== container && container.contains(activeGrid))
+                return;
             if (disabled) {
                 stopArrowRepeat();
                 return;
@@ -2111,7 +2173,7 @@ function Table(props) {
                     evt.stopPropagation();
                     requestSearchOpen(true, 'shortcut');
                     setTimeout(function () {
-                        var input = container.querySelector('.bgrid-search-input');
+                        var input = Array.from(container.querySelectorAll('.bgrid-search-input')).find(function (el) { return el.closest('[role="grid"], [role="treegrid"]') === container; });
                         input === null || input === void 0 ? void 0 : input.focus({ preventScroll: true });
                         input === null || input === void 0 ? void 0 : input.select();
                     }, searchOpen ? 0 : 1);
@@ -2122,7 +2184,7 @@ function Table(props) {
                 return;
             var isShift = evt.shiftKey;
             if (!cellInteractionSession && activeCell && (evt.key === 'ContextMenu' || (isShift && evt.key === 'F10'))) {
-                var targetCell = container.querySelector("td[data-bgrid-cell=\"true\"][data-row-index=\"".concat(activeCell.rowIndex, "\"][data-column-index=\"").concat(activeCell.columnIndex, "\"]"));
+                var targetCell = Array.from(container.querySelectorAll("td[data-bgrid-cell=\"true\"][data-row-index=\"".concat(activeCell.rowIndex, "\"][data-column-index=\"").concat(activeCell.columnIndex, "\"]"))).find(function (el) { return el.closest('[role="grid"], [role="treegrid"]') === container; });
                 var rect = targetCell === null || targetCell === void 0 ? void 0 : targetCell.getBoundingClientRect();
                 if (rect && openCellContextMenu(activeCell, rect.left + 8, rect.top + Math.min(rect.height, 20), true)) {
                     evt.preventDefault();
@@ -2325,6 +2387,19 @@ function Table(props) {
             var activeElement = document.activeElement;
             if (!container || (activeElement !== container && !container.contains(activeElement)))
                 return;
+            var target = evt.target instanceof Element ? evt.target : null;
+            var detailOwner = target === null || target === void 0 ? void 0 : target.closest('[data-bgrid-detail-owner]');
+            if (detailOwner && container.contains(detailOwner))
+                return;
+            var activeDetailOwner = activeElement instanceof Element ? activeElement.closest('[data-bgrid-detail-owner]') : null;
+            if (activeDetailOwner && container.contains(activeDetailOwner))
+                return;
+            var targetGrid = target === null || target === void 0 ? void 0 : target.closest('[role="grid"], [role="treegrid"]');
+            if (targetGrid && targetGrid !== container && container.contains(targetGrid))
+                return;
+            var 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))
@@ -2338,6 +2413,19 @@ function Table(props) {
             var activeElement = document.activeElement;
             if (!container || (activeElement !== container && !container.contains(activeElement)))
                 return;
+            var target = evt.target instanceof Element ? evt.target : null;
+            var detailOwner = target === null || target === void 0 ? void 0 : target.closest('[data-bgrid-detail-owner]');
+            if (detailOwner && container.contains(detailOwner))
+                return;
+            var activeDetailOwner = activeElement instanceof Element ? activeElement.closest('[data-bgrid-detail-owner]') : null;
+            if (activeDetailOwner && container.contains(activeDetailOwner))
+                return;
+            var targetGrid = target === null || target === void 0 ? void 0 : target.closest('[role="grid"], [role="treegrid"]');
+            if (targetGrid && targetGrid !== container && container.contains(targetGrid))
+                return;
+            var 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) {
@@ -2356,13 +2444,23 @@ function Table(props) {
             }
         };
         var handlePointerDown = function (evt) {
-            var _a = keyboardRuntimeRef.current, clearCellSelection = _a.clearCellSelection, clearCellSelectionOnOutsideClick = _a.clearCellSelectionOnOutsideClick, endCellSelectionDrag = _a.endCellSelectionDrag;
-            if (!clearCellSelectionOnOutsideClick)
-                return;
             var container = containerRef.current;
             var target = evt.target;
-            if (!container ||
-                (target instanceof Node && container.contains(target)) ||
+            if (!container)
+                return;
+            var detailOwner = target instanceof Element ? target.closest('[data-bgrid-detail-owner]') : null;
+            var targetGrid = target instanceof Element ? target.closest('[role="grid"], [role="treegrid"]') : null;
+            if ((detailOwner && container.contains(detailOwner)) ||
+                (targetGrid && targetGrid !== container && container.contains(targetGrid))) {
+                var _a = keyboardRuntimeRef.current, clearCellSelection_1 = _a.clearCellSelection, endCellSelectionDrag_1 = _a.endCellSelectionDrag;
+                endCellSelectionDrag_1();
+                clearCellSelection_1();
+                return;
+            }
+            var _b = keyboardRuntimeRef.current, clearCellSelection = _b.clearCellSelection, clearCellSelectionOnOutsideClick = _b.clearCellSelectionOnOutsideClick, endCellSelectionDrag = _b.endCellSelectionDrag;
+            if (!clearCellSelectionOnOutsideClick)
+                return;
+            if ((target instanceof Node && container.contains(target)) ||
                 isPointInsideElement(container, evt.clientX, evt.clientY)) {
                 return;
             }
@@ -2391,7 +2489,7 @@ function Table(props) {
         React.createElement(Container, { ref: containerRef, role: props.treeEnabled ? 'treegrid' : 'grid', style: __assign(__assign({}, style), (_a = { width: width, height: height, borderWidth: "".concat(containerBorderWidth, "px") }, _a['--bgrid-virtual-row-height'] = "".concat(trHeight, "px"), _a)), className: className, tabIndex: 0, "aria-disabled": disabled ? 'true' : undefined, onFocus: function (event) {
                 if (event.target !== event.currentTarget)
                     return;
-                var gateway = event.currentTarget.querySelector('[data-bgrid-text-editor-gateway="true"]');
+                var gateway = Array.from(event.currentTarget.querySelectorAll('[data-bgrid-text-editor-gateway="true"]')).find(function (el) { return el.closest('[role="grid"], [role="treegrid"]') === event.currentTarget; });
                 if (gateway instanceof HTMLInputElement) {
                     gateway.focus({ preventScroll: true });
                 }
@@ -2403,11 +2501,19 @@ function Table(props) {
                 } },
                 React.createElement(scrollbar_1.CustomScrollbar, { orientation: 'vertical', variant: scrollbar.variant, metrics: scrollbarMetrics.vertical, scrollOffset: scrollTop, onScrollChange: handleScrollTopChange }))),
             React.createElement(ScrollContainer, { ref: scrollContainerRef, role: 'rfdg-scroll-container', "data-bgrid-scroll-plane": 'sticky', style: { height: scrollViewportHeight }, onPointerDownCapture: onBodyPointerDownCapture, onPointerOverCapture: onBodyPointerOverCapture, onPointerLeave: onBodyPointerLeave, onContextMenuCapture: function (event) {
+                    var _a, _b;
                     if (disabled)
                         return;
+                    var target = event.target instanceof HTMLElement ? event.target : null;
+                    var detailOwner = target === null || target === void 0 ? void 0 : target.closest('[data-bgrid-detail-owner]');
+                    if (detailOwner && ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(detailOwner)))
+                        return;
+                    var targetGrid = target === null || target === void 0 ? void 0 : target.closest('[role="grid"], [role="treegrid"]');
+                    if (targetGrid && targetGrid !== containerRef.current && ((_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.contains(targetGrid)))
+                        return;
                     if (isInteractiveTarget(event.target))
                         return;
-                    var cell = getCellPosition(event.target, containerRef.current);
+                    var cell = getCellPosition(target, containerRef.current);
                     if (!cell)
                         return;
                     if (openCellContextMenu(cell, event.clientX, event.clientY, false)) {
@@ -2428,8 +2534,8 @@ function Table(props) {
                             React.createElement(TableSummary_1.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' },
@@ -2437,7 +2543,7 @@ function Table(props) {
                                 React.createElement(TableBodyFrozen_1.default, { 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_1.default, { rowKeyRegistry: rowKeyRegistry, rowHeightMetrics: rowHeightMetrics, scrollContainerRef: scrollContainerRef, rowRange: frozenRowRange, role: 'rfdg-body-top', quadrant: 'top-main', allowRowReorder: false }),
+                                React.createElement(TableBody_1.default, { 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 !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0) > 0 && (React.createElement(FrozenScrollContent, { style: {
@@ -2453,7 +2559,7 @@ function Table(props) {
                                         : visibleScrollableRows.paddingTop,
                                     height: physicalScrollableRowsHeight,
                                 } },
-                                React.createElement(TableBody_1.default, { rowKeyRegistry: rowKeyRegistry, rowHeightMetrics: rowHeightMetrics, scrollContainerRef: scrollContainerRef, rowRange: scrollableRowRange, quadrant: 'body-main' }),
+                                React.createElement(TableBody_1.default, { 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 !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0) > 0 && (React.createElement(FrozenSummary, { style: { width: frozenColumnsWidth }, role: 'rfdg-frozen-summary' },
@@ -2474,18 +2580,20 @@ function Table(props) {
             React.createElement(Loading_1.default, { active: loading }))));
 }
 function getAxisSelectionTarget(target, container) {
-    if (!target || !container)
+    if (!target || !container || !(target instanceof Element))
         return undefined;
     var 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) {
         var rowIndex = Number(lineNumberCell.dataset.rowIndex);
         if (Number.isFinite(rowIndex)) {
             return { axis: 'row', startIndex: rowIndex, endIndex: rowIndex };
         }
     }
     var 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'))
@@ -2523,8 +2631,10 @@ function updateAxisSelectionDragRange(dragState, activeRange) {
     return nextRanges;
 }
 function getCellPosition(target, container) {
-    var cell = target === null || target === void 0 ? void 0 : target.closest('td[data-bgrid-cell="true"]');
-    if (!(cell instanceof HTMLElement) || !(container === null || container === void 0 ? void 0 : container.contains(cell)))
+    if (!target || !(target instanceof Element))
+        return undefined;
+    var cell = target.closest('td[data-bgrid-cell="true"]');
+    if (!(cell instanceof HTMLElement) || cell.closest('[role="grid"], [role="treegrid"]') !== container)
         return undefined;
     var rowIndex = Number(cell.dataset.rowIndex);
     var columnIndex = Number(cell.dataset.columnIndex);

package/cjs/components/TableBody.js

@@ -70,6 +70,7 @@ var TableColGroup_1 = __importDefault(require("./TableColGroup"));
 var TableColGroupFrozen_1 = __importDefault(require("./TableColGroupFrozen"));
 var utils_1 = require("../utils");
 var TableBodyRow_1 = require("./TableBodyRow");
+var MasterDetailCell_1 = require("./MasterDetailCell");
 var types_1 = require("../types");
 function getVisibleColumnRange(columns, firstScrollableColumnIndex, scrollLeft, viewportWidth) {
     var _a, _b, _c;
@@ -170,7 +171,7 @@ function getRowReactKey(item, sourceIndex, rowKey, registry) {
 }
 function TableBody(_a) {
     var _b, _c;
-    var rowKeyRegistry = _a.rowKeyRegistry, _d = _a.region, region = _d === void 0 ? 'main' : _d, rowRange = _a.rowRange, style = _a.style, role = _a.role, quadrant = _a.quadrant, _e = _a.allowRowReorder, allowRowReorder = _e === void 0 ? true : _e, onRowReorderPointerDown = _a.onRowReorderPointerDown, onRowReorderKeyDown = _a.onRowReorderKeyDown, rowHeightMetrics = _a.rowHeightMetrics;
+    var rowKeyRegistry = _a.rowKeyRegistry, _d = _a.region, region = _d === void 0 ? 'main' : _d, rowRange = _a.rowRange, style = _a.style, role = _a.role, quadrant = _a.quadrant, _e = _a.allowRowReorder, allowRowReorder = _e === void 0 ? true : _e, onRowReorderPointerDown = _a.onRowReorderPointerDown, onRowReorderKeyDown = _a.onRowReorderKeyDown, rowHeightMetrics = _a.rowHeightMetrics, viewportWidth = _a.viewportWidth;
     var isLeftRegion = region === 'left';
     // [Selector Group 1] Scroll & Dimensions - 스크롤 및 차원
     var _f = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
@@ -260,7 +261,7 @@ function TableBody(_a) {
         isLeftRegion ? React.createElement(TableColGroupFrozen_1.default, null) : React.createElement(TableColGroup_1.default, null),
         React.createElement("tbody", { role: role !== null && role !== void 0 ? role : (isLeftRegion ? 'rfdg-body-frozen' : 'rfdg-body') },
             dataSet.map(function (item, i) {
-                var _a, _b, _c, _d;
+                var _a, _b, _c, _d, _e, _f;
                 var ri = startIdx + i;
                 var resolvedRowHeight = (_a = rowHeightMetrics === null || rowHeightMetrics === void 0 ? void 0 : rowHeightMetrics.heights[ri]) !== null && _a !== void 0 ? _a : trHeight;
                 var rowStatus = getRowStatusLabel(item.status);
@@ -294,7 +295,10 @@ function TableBody(_a) {
                 var isRowEditing = (cellInteractionSession === null || cellInteractionSession === void 0 ? void 0 : cellInteractionSession.kind) === 'editor' &&
                     (cellInteractionSession.cell.rowIndex === ri || cellInteractionSession.hostCell.rowIndex === ri);
                 var rowReactKey = getRowReactKey(item, sourceIndex, rowKey, rowKeyRegistry);
-                return (React.createElement(TableBodyRow_1.TableBodyRow, { key: rowReactKey, item: item, data: data, ri: ri, sourceIndex: sourceIndex, columns: columns, startCIdx: startCIdx, endCIdx: endCIdx, frozenColumnIndex: frozenColumnIndex, isLeftRegion: isLeftRegion, showLineNumber: showLineNumber !== null && showLineNumber !== void 0 ? showLineNumber : false, hasRowChecked: hasRowChecked, isRadio: Boolean(isRadio), checked: checkedAll === true || checkedIndexesMap.get(sourceIndex), rowCheckedDisabled: Boolean(disabled || ((_d = rowChecked === null || rowChecked === void 0 ? void 0 : rowChecked.disabled) === null || _d === void 0 ? void 0 : _d.call(rowChecked, 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 === null || reorderingInfo === void 0 ? void 0 : 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 }));
+                var detailHeight = (_e = (_d = rowHeightMetrics === null || rowHeightMetrics === void 0 ? void 0 : rowHeightMetrics.detailHeights) === null || _d === void 0 ? void 0 : _d[ri]) !== null && _e !== void 0 ? _e : 0;
+                return (React.createElement(React.Fragment, { key: rowReactKey },
+                    React.createElement(TableBodyRow_1.TableBodyRow, { item: item, data: data, ri: ri, sourceIndex: sourceIndex, columns: columns, startCIdx: startCIdx, endCIdx: endCIdx, frozenColumnIndex: frozenColumnIndex, isLeftRegion: isLeftRegion, showLineNumber: showLineNumber !== null && showLineNumber !== void 0 ? showLineNumber : false, hasRowChecked: hasRowChecked, isRadio: Boolean(isRadio), checked: checkedAll === true || checkedIndexesMap.get(sourceIndex), rowCheckedDisabled: Boolean(disabled || ((_f = rowChecked === null || rowChecked === void 0 ? void 0 : rowChecked.disabled) === null || _f === void 0 ? void 0 : _f.call(rowChecked, 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 === null || reorderingInfo === void 0 ? void 0 : 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(MasterDetailCell_1.MasterDetailRow, { item: item, sourceIndex: sourceIndex, visibleIndex: ri, detailHeight: detailHeight, isLeftRegion: isLeftRegion, viewportWidth: viewportWidth !== null && viewportWidth !== void 0 ? viewportWidth : Math.max(width - (frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0), 0), frozenColumnsWidth: frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? 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 === null || msg === void 0 ? void 0 : msg.emptyList) ? (React.createElement(React.Fragment, null,

package/cjs/components/TableBodyCell.js

@@ -39,6 +39,7 @@ var PluginCellEditor_1 = require("./PluginCellEditor");
 var CellEditorIcon_1 = require("./CellEditorIcon");
 var CheckboxCellEditor_1 = require("./CheckboxCellEditor");
 var TreeCell_1 = require("./TreeCell");
+var MasterDetailCell_1 = require("./MasterDetailCell");
 function Cell(_a) {
     var _b, _c, _d;
     var index = _a.index, _e = _a.hostIndex, hostIndex = _e === void 0 ? index : _e, columnIndex = _a.columnIndex, column = _a.column, item = _a.item, valueByRowKey = _a.valueByRowKey, handleSave = _a.handleSave, handleCancel = _a.handleCancel, handleMove = _a.handleMove, editable = _a.editable, cellEditable = _a.cellEditable, _f = _a.interactionEditing, interactionEditing = _f === void 0 ? false : _f, editSession = _a.editSession;
@@ -75,7 +76,7 @@ function Cell(_a) {
         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_1.TreeCell, { column: column, item: item }, content)) : (content)),
+        React.createElement("div", { className: 'bgrid-cell-value' }, column.treeCell ? (React.createElement(TreeCell_1.TreeCell, { column: column, item: item }, content)) : column.masterDetailCell ? (React.createElement(MasterDetailCell_1.MasterDetailCell, { column: column, item: item, sourceIndex: index }, content)) : (content)),
         column.editorIcon && ((_d = column.editor) === null || _d === void 0 ? void 0 : _d.type) !== 'checkbox' && cellEditable && (React.createElement(CellEditorIcon_1.CellEditorIcon, { hostCell: { rowIndex: hostIndex, columnIndex: columnIndex }, index: index, columnIndex: columnIndex, column: column, item: item, value: valueByRowKey, editing: interactionEditing }))));
 }
 function renderSafeCellValue(value, preserveRenderableArrays) {