beautiful-grid 1.0.13 → 1.0.15

package/cjs/components/CellTextEditorGateway.js

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

package/cjs/components/ColResizer.js

@@ -107,9 +107,9 @@ function ColResizer(_a) {
     }, [container, disabled, endCellEdit, setColumnResizing, setColumnWidth]);
     var onMouseDoubleClick = React.useCallback(function (evt, columnIndex) { return __awaiter(_this, void 0, void 0, function () {
         var headFrozenHTML, headHTML, bodyFrozenHTML, bodyHTML, targetDiv, bodyTarget, targetTd;
-        var _a, _b, _c, _d, _e;
-        return __generator(this, function (_f) {
-            switch (_f.label) {
+        var _a, _b, _c, _d;
+        return __generator(this, function (_e) {
+            switch (_e.label) {
                 case 0:
                     if (disabled)
                         return [2 /*return*/];
@@ -125,18 +125,24 @@ function ColResizer(_a) {
                     targetDiv.style.position = 'fixed';
                     targetDiv.style.top = '-9999px';
                     targetDiv.innerHTML = "<table><thead>".concat(headFrozenHTML, "</thead><tbody>").concat(bodyFrozenHTML, "</tbody></table>\n<table><thead>").concat(headHTML, "</thead><tbody>").concat(bodyHTML, "</tbody></table>");
-                    bodyTarget = (_e = document.getElementById('root')) !== null && _e !== void 0 ? _e : document.body;
+                    // Measure with the grid's inherited font and real header/body padding.
+                    targetDiv.querySelectorAll('table').forEach(function (table) {
+                        table.className = 'bgrid-head-table bgrid-body-table';
+                        table.style.tableLayout = 'auto';
+                        table.style.width = 'max-content';
+                    });
+                    bodyTarget = container.current;
                     bodyTarget.append(targetDiv);
                     return [4 /*yield*/, (0, utils_1.delay)(30)];
                 case 1:
-                    _f.sent();
+                    _e.sent();
                     targetTd = targetDiv.querySelector("tr td.bgrid-head-cell[data-column-index=\"".concat(columnIndex, "\"]"));
                     if (targetTd) {
-                        setColumnWidth(columnIndex, { width: targetTd.getBoundingClientRect().width });
+                        setColumnWidth(columnIndex, { width: Math.ceil(targetTd.offsetWidth) + 1 });
                         setColumnWidth(columnIndex, { updateColumns: true });
                     }
                     targetDiv.remove();
-                    _f.label = 2;
+                    _e.label = 2;
                 case 2: return [2 /*return*/];
             }
         });

package/cjs/components/MasterDetailCell.js

@@ -0,0 +1,145 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MasterDetailCell = MasterDetailCell;
+exports.MasterDetailRow = MasterDetailRow;
+var React = __importStar(require("react"));
+var utils_1 = require("../utils");
+var MasterDetailContext_1 = require("./MasterDetailContext");
+function MasterDetailCell(_a) {
+    var _b, _c, _d, _e;
+    var column = _a.column, item = _a.item, sourceIndex = _a.sourceIndex, children = _a.children;
+    var masterDetail = (0, MasterDetailContext_1.useMasterDetailContext)();
+    if (!masterDetail || (0, utils_1.getColumnId)(column) !== masterDetail.expandColumnId) {
+        return React.createElement(React.Fragment, null, children);
+    }
+    var rowKey = masterDetail.getRowKey(item.values);
+    if (rowKey === undefined || rowKey === null) {
+        return React.createElement(React.Fragment, null, children);
+    }
+    var isExpandable = masterDetail.hasDetail(item, sourceIndex);
+    var expanded = masterDetail.expandedKeysSet.has(rowKey);
+    var toggleId = masterDetail.getToggleElementId(rowKey);
+    var 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: function (event) {
+                event.stopPropagation();
+                masterDetail.toggle(rowKey, item, sourceIndex);
+            }, onKeyDown: function (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 ? (_c = (_b = masterDetail.icons) === null || _b === void 0 ? void 0 : _b.expanded) !== null && _c !== void 0 ? _c : '⌄' : (_e = (_d = masterDetail.icons) === null || _d === void 0 ? void 0 : _d.collapsed) !== null && _e !== void 0 ? _e : '›'))) : (React.createElement("span", { className: 'bgrid-master-detail-toggle-spacer', "aria-hidden": 'true' })),
+        React.createElement("span", { className: 'bgrid-master-detail-cell-content' }, children)));
+}
+function MasterDetailRow(_a) {
+    var _b, _c;
+    var item = _a.item, sourceIndex = _a.sourceIndex, visibleIndex = _a.visibleIndex, detailHeight = _a.detailHeight, isLeftRegion = _a.isLeftRegion, viewportWidth = _a.viewportWidth, colSpan = _a.colSpan, frozenColumnsWidth = _a.frozenColumnsWidth;
+    var masterDetail = (0, MasterDetailContext_1.useMasterDetailContext)();
+    if (!masterDetail)
+        return null;
+    var rowKey = masterDetail.getRowKey(item.values);
+    if (rowKey === undefined || rowKey === null || !masterDetail.expandedKeysSet.has(rowKey)) {
+        return null;
+    }
+    var toggleId = masterDetail.getToggleElementId(rowKey);
+    var detailId = masterDetail.getDetailElementId(rowKey);
+    if (isLeftRegion) {
+        return (React.createElement("tr", { className: 'bgrid-detail-frozen-row', "aria-hidden": 'true', "data-detail-ri": visibleIndex, style: (_b = {
+                    height: detailHeight
+                },
+                _b['--bgrid-item-cell-height'] = "".concat(detailHeight, "px"),
+                _b) },
+            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: (_c = {
+                height: detailHeight
+            },
+            _c['--bgrid-item-cell-height'] = "".concat(detailHeight, "px"),
+            _c) },
+        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: function () { return masterDetail.collapse(rowKey); } })),
+        React.createElement("td", { "data-none": 'true' })));
+}
+function DetailPanelContent(_a) {
+    var item = _a.item, rowKey = _a.rowKey, sourceIndex = _a.sourceIndex, visibleIndex = _a.visibleIndex, detailHeight = _a.detailHeight, viewportWidth = _a.viewportWidth, frozenColumnsWidth = _a.frozenColumnsWidth, toggleId = _a.toggleId, detailId = _a.detailId, detailRender = _a.detailRender, collapse = _a.collapse;
+    var panelRef = React.useRef(null);
+    React.useEffect(function () {
+        var panel = panelRef.current;
+        return function () {
+            var active = document.activeElement;
+            if (active && panel && panel.contains(active)) {
+                var toggle = document.getElementById(toggleId);
+                toggle === null || toggle === void 0 ? void 0 : toggle.focus();
+            }
+        };
+    }, [toggleId]);
+    var 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 !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0,
+            width: viewportWidth > 0 ? viewportWidth : undefined,
+            maxWidth: '100%',
+            height: contentHeight,
+            minHeight: contentHeight,
+            maxHeight: contentHeight,
+            boxSizing: 'border-box',
+            overflow: 'auto',
+        }, onPointerDown: function (e) {
+            e.stopPropagation();
+        }, onContextMenu: function (e) {
+            e.stopPropagation();
+        } }, detailRender({
+        item: item,
+        rowKey: rowKey,
+        sourceIndex: sourceIndex,
+        visibleIndex: visibleIndex,
+        expanded: true,
+        collapse: collapse,
+    })));
+}

package/cjs/components/MasterDetailContext.js

@@ -0,0 +1,42 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MasterDetailContext = void 0;
+exports.useMasterDetailContext = useMasterDetailContext;
+var React = __importStar(require("react"));
+exports.MasterDetailContext = React.createContext(undefined);
+function useMasterDetailContext() {
+    return React.useContext(exports.MasterDetailContext);
+}