beautiful-grid 1.0.0-rc.1

package/cjs/components/Table.js

@@ -0,0 +1,2572 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __importStar(require("react"));
+var react_1 = require("react");
+var shallow_1 = require("zustand/react/shallow");
+var store_1 = require("../store");
+var types_1 = require("../types");
+var utils_1 = require("../utils");
+var coordinate_1 = require("../utils/coordinate");
+var Loading_1 = __importDefault(require("./Loading"));
+var TableBody_1 = __importDefault(require("./TableBody"));
+var TableBodyFrozen_1 = __importDefault(require("./TableBodyFrozen"));
+var TableFooter_1 = __importDefault(require("./TableFooter"));
+var scrollbar_1 = require("./scrollbar");
+var TableHead_1 = __importDefault(require("./TableHead"));
+var TableHeadFrozen_1 = __importDefault(require("./TableHeadFrozen"));
+var TableSummary_1 = require("./TableSummary");
+var TableSummaryFronzen_1 = require("./TableSummaryFronzen");
+var CellTextEditorGateway_1 = require("./CellTextEditorGateway");
+var EditorPortalRoot_1 = require("./EditorPortalRoot");
+var useRowReorderController_1 = require("../utils/useRowReorderController");
+var cellSelectionGeometry_1 = require("../utils/cellSelectionGeometry");
+var selection_1 = require("./selection");
+var CellNavigationDomSync_1 = require("./CellNavigationDomSync");
+var DEFAULT_MAX_CLIPBOARD_CELLS = 100000;
+var DEFAULT_MAX_CLIPBOARD_TEXT_LENGTH = 8 * 1024 * 1024;
+var KEYBOARD_NAVIGATION_ROW_WINDOW_SIZE = 8;
+var DEFAULT_KEYBOARD_NAVIGATION_REPEAT_INTERVAL = 16;
+var SCROLL_IDLE_DELAY = 120;
+var LazyGridOptionalSurfaces = React.lazy(function () {
+    return Promise.resolve().then(function () { return __importStar(require('./GridOptionalSurfaces')); }).then(function (module) { return ({
+        default: module.GridOptionalSurfaces,
+    }); });
+});
+function Table(props) {
+    var _this = this;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
+    var cellSelectionOptions = props.cellSelectionOptions, onChangeData = props.onChangeData, sourceIndexByVisibleIndex = props.sourceIndexByVisibleIndex;
+    var cellSelectionEnabled = (_a = cellSelectionOptions === null || cellSelectionOptions === void 0 ? void 0 : cellSelectionOptions.enabled) !== null && _a !== void 0 ? _a : true;
+    // [Selector Group 1] Layout & Dimensions - 레이아웃 차원
+    var _5 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+        width: s.width,
+        height: s.height,
+        containerBorderWidth: s.containerBorderWidth,
+        className: s.className,
+        style: s.style,
+        itemHeight: s.itemHeight,
+        itemPadding: s.itemPadding,
+    }); })), width = _5.width, height = _5.height, containerBorderWidth = _5.containerBorderWidth, className = _5.className, style = _5.style, itemHeight = _5.itemHeight, itemPadding = _5.itemPadding;
+    // [Selector Group 2] Header, Footer, Summary - 헤더/푸터/요약
+    var _6 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+        headerHeight: s.headerHeight,
+        footerHeight: s.footerHeight,
+        bottomBarHeight: s.bottomBarHeight,
+        summaryHeight: s.summaryHeight,
+    }); })), headerHeight = _6.headerHeight, footerHeight = _6.footerHeight, bottomBarHeight = _6.bottomBarHeight, summaryHeight = _6.summaryHeight;
+    // [Selector Group 3] Scroll State - 스크롤 상태
+    var _7 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+        scrollLeft: s.scrollLeft,
+        scrollTop: s.scrollTop,
+    }); })), scrollLeft = _7.scrollLeft, scrollTop = _7.scrollTop;
+    // [Selector Group 4] Content, Columns, Data - 컨텐츠 관련
+    var _8 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+        contentBodyHeight: s.contentBodyHeight,
+        columns: s.columns,
+        data: s.data,
+        frozenColumnsWidth: s.frozenColumnsWidth,
+        frozenRowCount: s.frozenRowCount,
+        frozenRowsHeight: s.frozenRowsHeight,
+    }); })), contentBodyHeight = _8.contentBodyHeight, columns = _8.columns, data = _8.data, frozenColumnsWidth = _8.frozenColumnsWidth, frozenRowCount = _8.frozenRowCount, frozenRowsHeight = _8.frozenRowsHeight;
+    // [Selector Group 4-1] Cell selection & navigation - 셀 선택 및 내비게이션
+    var _9 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+        cellSelectionRange: s.cellSelectionRange,
+        cellSelectionRanges: s.cellSelectionRanges,
+        activeCell: s.activeCell,
+        activeCellHost: s.activeCellHost,
+        cellNavigationOptions: s.cellNavigationOptions,
+        editItemIndex: s.editItemIndex,
+        editable: s.editable,
+        handleClick: s.handleClick,
+    }); })), cellSelectionRange = _9.cellSelectionRange, cellSelectionRanges = _9.cellSelectionRanges, activeCell = _9.activeCell, activeCellHost = _9.activeCellHost, cellNavigationOptions = _9.cellNavigationOptions, editItemIndex = _9.editItemIndex, editable = _9.editable, handleClick = _9.handleClick;
+    // [Selector Group 5] State - 상태
+    var _10 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+        rowChecked: s.rowChecked,
+        page: s.page,
+        loading: s.loading,
+        spinning: s.spinning,
+        showLineNumber: s.showLineNumber,
+        summary: s.summary,
+        scrollbar: s.scrollbar,
+        status: s.status,
+        pagination: s.pagination,
+    }); })), rowChecked = _10.rowChecked, page = _10.page, loading = _10.loading, spinning = _10.spinning, showLineNumber = _10.showLineNumber, summary = _10.summary, scrollbar = _10.scrollbar, status = _10.status, pagination = _10.pagination;
+    var _11 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+        searchOpen: s.searchOpen,
+        searchOptions: s.searchOptions,
+        contextMenuOptions: s.contextMenuOptions,
+        activeSearchMatchIndex: s.activeSearchMatchIndex,
+        searchMatches: s.searchMatches,
+        storeSourceIndexByVisibleIndex: s.sourceIndexByVisibleIndex,
+        storeRowKey: s.rowKey,
+        cellInteractionSession: s.cellInteractionSession,
+    }); })), searchOpen = _11.searchOpen, searchOptions = _11.searchOptions, contextMenuOptions = _11.contextMenuOptions, activeSearchMatchIndex = _11.activeSearchMatchIndex, searchMatches = _11.searchMatches, storeSourceIndexByVisibleIndex = _11.storeSourceIndexByVisibleIndex, storeRowKey = _11.storeRowKey, cellInteractionSession = _11.cellInteractionSession;
+    // [Selector Group 6] State Setters - 차원 설정자
+    var _12 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+        setHeight: s.setHeight,
+        setWidth: s.setWidth,
+        setContentBodyHeight: s.setContentBodyHeight,
+        setDisplayItemCount: s.setDisplayItemCount,
+        setHeaderHeight: s.setHeaderHeight,
+        setFooterHeight: s.setFooterHeight,
+        setBottomBarHeight: s.setBottomBarHeight,
+        setSummaryHeight: s.setSummaryHeight,
+        setItemHeight: s.setItemHeight,
+        setItemPadding: s.setItemPadding,
+        setLoading: s.setLoading,
+        setSpinning: s.setSpinning,
+    }); })), setHeight = _12.setHeight, setWidth = _12.setWidth, setContentBodyHeight = _12.setContentBodyHeight, setDisplayItemCount = _12.setDisplayItemCount, setHeaderHeight = _12.setHeaderHeight, setFooterHeight = _12.setFooterHeight, setBottomBarHeight = _12.setBottomBarHeight, setSummaryHeight = _12.setSummaryHeight, setItemHeight = _12.setItemHeight, setItemPadding = _12.setItemPadding, setLoading = _12.setLoading, setSpinning = _12.setSpinning;
+    // [Selector Group 7] Data & Column Setters - 데이터/열 설정자
+    var _13 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+        setData: s.setData,
+        setSourceData: s.setSourceData,
+        setProcessedData: s.setProcessedData,
+        setColumns: s.setColumns,
+        setColumnsGroup: s.setColumnsGroup,
+        setColumnGroups: s.setColumnGroups,
+        setFrozenColumnsWidth: s.setFrozenColumnsWidth,
+        setFrozenColumnIndex: s.setFrozenColumnIndex,
+        setFrozenRowCount: s.setFrozenRowCount,
+        setFrozenRowsHeight: s.setFrozenRowsHeight,
+    }); })), setData = _13.setData, setSourceData = _13.setSourceData, setProcessedData = _13.setProcessedData, setColumns = _13.setColumns, setColumnsGroup = _13.setColumnsGroup, setColumnGroups = _13.setColumnGroups, setFrozenColumnsWidth = _13.setFrozenColumnsWidth, setFrozenColumnIndex = _13.setFrozenColumnIndex, setFrozenRowCount = _13.setFrozenRowCount, setFrozenRowsHeight = _13.setFrozenRowsHeight;
+    // [Selector Group 8] Row & Sort Setters - 행/정렬 설정자
+    var _14 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+        setRowChecked: s.setRowChecked,
+        setCheckedIndexesMap: s.setCheckedIndexesMap,
+        setSort: s.setSort,
+        setSortParams: s.setSortParams,
+        setDataQuery: s.setDataQuery,
+        setDataControl: s.setDataControl,
+        setIcons: s.setIcons,
+        setActiveToolbox: s.setActiveToolbox,
+        setRowKey: s.setRowKey,
+        setFocusedRowKey: s.setSelectedRowKey,
+        setEditItem: s.setEditItem,
+        setSearchOptions: s.setSearchOptions,
+        setContextMenuOptions: s.setContextMenuOptions,
+        requestSearchOpen: s.requestSearchOpen,
+        openContextMenu: s.openContextMenu,
+    }); })), setRowChecked = _14.setRowChecked, setCheckedIndexesMap = _14.setCheckedIndexesMap, setSort = _14.setSort, setSortParams = _14.setSortParams, setDataQuery = _14.setDataQuery, setDataControl = _14.setDataControl, setIcons = _14.setIcons, setActiveToolbox = _14.setActiveToolbox, setRowKey = _14.setRowKey, setFocusedRowKey = _14.setFocusedRowKey, setEditItem = _14.setEditItem, setSearchOptions = _14.setSearchOptions, setContextMenuOptions = _14.setContextMenuOptions, requestSearchOpen = _14.requestSearchOpen, openContextMenu = _14.openContextMenu;
+    // [Selector Group 9] Pagination & Display Setters - 페이지/표시 설정자
+    var _15 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+        setPage: s.setPage,
+        setDisplayPaginationLength: s.setDisplayPaginationLength,
+        setShowLineNumber: s.setShowLineNumber,
+        setMsg: s.setMsg,
+        setRowClassName: s.setRowClassName,
+        setCellMergeOptions: s.setCellMergeOptions,
+        setVariant: s.setVariant,
+        setSummary: s.setSummary,
+        setColumnSortable: s.setColumnSortable,
+        setReorder: s.setReorder,
+        setClassName: s.setClassName,
+        setStyle: s.setStyle,
+        setScrollbar: s.setScrollbar,
+        setStatus: s.setStatus,
+        setPagination: s.setPagination,
+    }); })), setPage = _15.setPage, setDisplayPaginationLength = _15.setDisplayPaginationLength, setShowLineNumber = _15.setShowLineNumber, setMsg = _15.setMsg, setRowClassName = _15.setRowClassName, setCellMergeOptions = _15.setCellMergeOptions, setVariant = _15.setVariant, setSummary = _15.setSummary, setColumnSortable = _15.setColumnSortable, setReorder = _15.setReorder, setClassName = _15.setClassName, setStyle = _15.setStyle, setScrollbar = _15.setScrollbar, setStatus = _15.setStatus, setPagination = _15.setPagination;
+    // [Selector Group 10] Edit & Event Setters - 편집/이벤트 설정자
+    var _16 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+        setEditable: s.setEditable,
+        setEditTrigger: s.setEditTrigger,
+        setOnClick: s.setOnClick,
+        setOnChangeColumns: s.setOnChangeColumns,
+        setOnChangeData: s.setOnChangeData,
+        setOnLoadMore: s.setOnLoadMore,
+        setScroll: s.setScroll,
+        setInitialized: s.setInitialized,
+    }); })), setEditable = _16.setEditable, setEditTrigger = _16.setEditTrigger, setOnClick = _16.setOnClick, setOnChangeColumns = _16.setOnChangeColumns, setOnChangeData = _16.setOnChangeData, setOnLoadMore = _16.setOnLoadMore, setScroll = _16.setScroll, setInitialized = _16.setInitialized;
+    var _17 = (0, store_1.useAppStore)((0, shallow_1.useShallow)(function (s) { return ({
+        setCellSelectionRanges: s.setCellSelectionRanges,
+        setCellSelecting: s.setCellSelecting,
+        clearCellSelection: s.clearCellSelection,
+        setActiveCell: s.setActiveCell,
+        moveActiveCell: s.moveActiveCell,
+        setCellNavigationOptions: s.setCellNavigationOptions,
+        syncActiveCellToBounds: s.syncActiveCellToBounds,
+    }); })), setCellSelectionRanges = _17.setCellSelectionRanges, setCellSelecting = _17.setCellSelecting, clearCellSelection = _17.clearCellSelection, setActiveCell = _17.setActiveCell, moveActiveCell = _17.moveActiveCell, setCellNavigationOptions = _17.setCellNavigationOptions, syncActiveCellToBounds = _17.syncActiveCellToBounds;
+    var trHeight = itemHeight + itemPadding * 2;
+    var scrollableBodyHeight = Math.max(contentBodyHeight - frozenRowsHeight, 0);
+    var mainViewportWidth = Math.max(width - (frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0), 0);
+    var hasMultiCellSelection = React.useMemo(function () {
+        return cellSelectionRanges.length > 1 ||
+            cellSelectionRanges.some(function (range) {
+                var normalized = (0, cellSelectionGeometry_1.normalizeCellSelectionRange)(range);
+                return (normalized.startRowIndex !== normalized.endRowIndex ||
+                    normalized.startColumnIndex !== normalized.endColumnIndex);
+            });
+    }, [cellSelectionRanges]);
+    var activeLogicalCell = React.useMemo(function () { return (activeCell ? (0, utils_1.resolveLogicalCell)(data, props.cellMergeOptions, activeCell) : undefined); }, [activeCell, data, props.cellMergeOptions]);
+    var activeCellSelected = React.useMemo(function () {
+        if (!activeLogicalCell)
+            return false;
+        return cellSelectionRanges.some(function (range) {
+            var normalized = (0, cellSelectionGeometry_1.normalizeCellSelectionRange)(range);
+            return (activeLogicalCell.cell.rowIndex >= normalized.startRowIndex &&
+                activeLogicalCell.cell.rowIndex <= normalized.endRowIndex &&
+                activeLogicalCell.cell.columnIndex >= normalized.startColumnIndex &&
+                activeLogicalCell.cell.columnIndex <= normalized.endColumnIndex);
+        });
+    }, [activeLogicalCell, cellSelectionRanges]);
+    var activeCellRanges = React.useMemo(function () {
+        var _a;
+        if (!activeLogicalCell)
+            return [];
+        var startRowIndex = activeLogicalCell.rowRange.startRowIndex;
+        var endRowIndex = activeLogicalCell.rowRange.endRowIndex;
+        var hostCell = (_a = cellInteractionSession === null || cellInteractionSession === void 0 ? void 0 : cellInteractionSession.hostCell) !== null && _a !== void 0 ? _a : activeCellHost;
+        // A merged cell crossing the frozen-row boundary is rendered as two
+        // physical cells. During editing, draw focus only around the fragment
+        // that owns the editor while keeping the logical edit scope unchanged.
+        if (hostCell &&
+            activeLogicalCell.rowRange.startRowIndex < frozenRowCount &&
+            activeLogicalCell.rowRange.endRowIndex >= frozenRowCount) {
+            if (hostCell.rowIndex < frozenRowCount) {
+                endRowIndex = frozenRowCount - 1;
+            }
+            else {
+                startRowIndex = frozenRowCount;
+            }
+        }
+        return [
+            {
+                startRowIndex: startRowIndex,
+                endRowIndex: endRowIndex,
+                startColumnIndex: activeLogicalCell.cell.columnIndex,
+                endColumnIndex: activeLogicalCell.cell.columnIndex,
+            },
+        ];
+    }, [activeCellHost, activeLogicalCell, cellInteractionSession === null || cellInteractionSession === void 0 ? void 0 : cellInteractionSession.hostCell, frozenRowCount]);
+    var selectionFragments = React.useMemo(function () {
+        var _a;
+        return (0, cellSelectionGeometry_1.getCellSelectionFragments)({
+            ranges: cellSelectionRanges,
+            columns: columns,
+            rowCount: data.length,
+            rowHeight: trHeight,
+            frozenColumnCount: (_a = props.frozenColumnIndex) !== null && _a !== void 0 ? _a : 0,
+            frozenRowCount: frozenRowCount,
+            frozenColumnsWidth: frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0,
+        });
+    }, [
+        cellSelectionRanges,
+        columns,
+        data.length,
+        frozenColumnsWidth,
+        frozenRowCount,
+        props.frozenColumnIndex,
+        trHeight,
+    ]);
+    var activeFragments = React.useMemo(function () {
+        var _a;
+        return (0, cellSelectionGeometry_1.getCellSelectionFragments)({
+            ranges: activeCellRanges,
+            columns: columns,
+            rowCount: data.length,
+            rowHeight: trHeight,
+            frozenColumnCount: (_a = props.frozenColumnIndex) !== null && _a !== void 0 ? _a : 0,
+            frozenRowCount: frozenRowCount,
+            frozenColumnsWidth: frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0,
+        });
+    }, [
+        activeCellRanges,
+        columns,
+        data.length,
+        frozenColumnsWidth,
+        frozenRowCount,
+        props.frozenColumnIndex,
+        trHeight,
+    ]);
+    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,
+            } }));
+    };
+    var visibleScrollableRows = React.useMemo(function () {
+        var _a;
+        return (0, utils_1.getVisibleScrollableRowRange)({
+            scrollTop: scrollTop,
+            viewportHeight: scrollableBodyHeight,
+            rowHeight: trHeight,
+            frozenRowCount: frozenRowCount,
+            totalRowCount: data.length,
+            windowSize: ((_a = props.reorder) === null || _a === void 0 ? void 0 : _a.enabled) ? 1 : KEYBOARD_NAVIGATION_ROW_WINDOW_SIZE,
+        });
+    }, [data.length, frozenRowCount, (_b = props.reorder) === null || _b === void 0 ? void 0 : _b.enabled, scrollTop, scrollableBodyHeight, trHeight]);
+    var frozenRowRange = React.useMemo(function () { return ({ startRowIndex: 0, endRowIndex: frozenRowCount }); }, [frozenRowCount]);
+    var scrollableRowRange = React.useMemo(function () { return ({
+        startRowIndex: visibleScrollableRows.startRowIndex,
+        endRowIndex: visibleScrollableRows.endRowIndex,
+    }); }, [visibleScrollableRows.endRowIndex, visibleScrollableRows.startRowIndex]);
+    var frozenScrollableBodyStyle = React.useMemo(function () { return ({ top: visibleScrollableRows.paddingTop }); }, [visibleScrollableRows.paddingTop]);
+    var containerRef = (0, react_1.useRef)(null);
+    var searchPopoverRef = (0, react_1.useRef)(null);
+    var warnedContextMenuIdsRef = (0, react_1.useRef)(new Set());
+    var warnedContextMenuFactoryRef = (0, react_1.useRef)(false);
+    var editorPortalRef = (0, react_1.useRef)(null);
+    var editorPortalContext = React.useMemo(function () { return ({ gridRef: containerRef, portalRef: editorPortalRef }); }, []);
+    var bodyContainerRef = (0, react_1.useRef)(null);
+    var scrollContainerRef = (0, react_1.useRef)(null);
+    var rowReorderController = (0, useRowReorderController_1.useRowReorderController)({
+        containerRef: containerRef,
+        bodyContainerRef: bodyContainerRef,
+        scrollContainerRef: scrollContainerRef,
+        rowHeight: trHeight,
+    });
+    var searchSurfaceEnabled = !!searchOptions && searchOptions.enabled !== false;
+    var contextMenuSurfaceEnabled = (!!contextMenuOptions && contextMenuOptions.enabled !== false) ||
+        (searchSurfaceEnabled && searchOptions.contextMenu !== false);
+    var openCellContextMenu = React.useCallback(function (cell, clientX, clientY, keyboard) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        var logical = (0, utils_1.resolveLogicalCell)(data, props.cellMergeOptions, cell);
+        var visibleIndex = logical.cell.rowIndex;
+        var columnIndex = logical.cell.columnIndex;
+        var item = data[visibleIndex];
+        var column = columns[columnIndex];
+        if (!item || !column)
+            return false;
+        if (!keyboard) {
+            var navigationEnabled = (_a = cellNavigationOptions === null || cellNavigationOptions === void 0 ? void 0 : cellNavigationOptions.enabled) !== null && _a !== void 0 ? _a : true;
+            (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.focus({ preventScroll: true });
+            if (navigationEnabled || cellSelectionEnabled) {
+                setActiveCell(logical.cell, cell);
+            }
+            if (cellSelectionEnabled) {
+                setCellSelectionRanges([
+                    {
+                        startRowIndex: logical.cell.rowIndex,
+                        startColumnIndex: logical.cell.columnIndex,
+                        endRowIndex: (_c = logical.rowIndexes[logical.rowIndexes.length - 1]) !== null && _c !== void 0 ? _c : logical.cell.rowIndex,
+                        endColumnIndex: logical.cell.columnIndex,
+                    },
+                ]);
+            }
+        }
+        var sourceIndex = (_d = storeSourceIndexByVisibleIndex[visibleIndex]) !== null && _d !== void 0 ? _d : visibleIndex;
+        var target = {
+            cell: logical.cell,
+            visibleIndex: visibleIndex,
+            sourceIndex: sourceIndex,
+            rowKey: storeRowKey ? (0, utils_1.getCellValueByRowKey)(storeRowKey, item.values) : undefined,
+            columnIndex: columnIndex,
+            columnId: column.columnId,
+            column: column,
+            item: item,
+            values: item.values,
+            value: (0, utils_1.getCellValueByRowKey)(column.key, item.values),
+        };
+        var customItemsEnabled = !!contextMenuOptions && contextMenuOptions.enabled !== false;
+        var customItems = [];
+        if (customItemsEnabled && (contextMenuOptions === null || contextMenuOptions === void 0 ? void 0 : contextMenuOptions.items)) {
+            try {
+                customItems = contextMenuOptions.items(target);
+            }
+            catch (error) {
+                if (process.env.NODE_ENV !== 'production' && !warnedContextMenuFactoryRef.current) {
+                    warnedContextMenuFactoryRef.current = true;
+                    console.warn('[BGrid] contextMenuOptions.items failed. Built-in items remain available.', error);
+                }
+            }
+        }
+        var builtInSearchEnabled = !!searchOptions && searchOptions.enabled !== false && searchOptions.contextMenu !== false;
+        var combined = [];
+        if (builtInSearchEnabled) {
+            combined.push({
+                id: 'bgrid-search',
+                label: (_f = (_e = searchOptions.labels) === null || _e === void 0 ? void 0 : _e.contextMenuItem) !== null && _f !== void 0 ? _f : '검색',
+                icon: (_g = searchOptions.icons) === null || _g === void 0 ? void 0 : _g.search,
+                shortcut: 'Ctrl/⌘ F',
+                onSelect: function () { return requestSearchOpen(true, 'contextMenu'); },
+            });
+        }
+        if (builtInSearchEnabled && customItems.length > 0) {
+            combined.push({ type: 'separator', id: 'bgrid-search-separator' });
+        }
+        combined.push.apply(combined, __spreadArray([], __read(customItems), false));
+        var normalized = normalizeContextMenuItems(combined, function (duplicateId) {
+            if (process.env.NODE_ENV === 'production' || warnedContextMenuIdsRef.current.has(duplicateId))
+                return;
+            warnedContextMenuIdsRef.current.add(duplicateId);
+            console.warn("[BGrid] Duplicate context menu item id \"".concat(duplicateId, "\" was ignored."));
+        });
+        if (!normalized.some(function (menuItem) { return menuItem.type !== 'separator' && !menuItem.disabled; }))
+            return false;
+        openContextMenu({ target: target, items: normalized, clientX: clientX, clientY: clientY, keyboard: keyboard });
+        return true;
+    }, [
+        cellNavigationOptions === null || cellNavigationOptions === void 0 ? void 0 : cellNavigationOptions.enabled,
+        cellSelectionEnabled,
+        columns,
+        contextMenuOptions,
+        data,
+        openContextMenu,
+        props.cellMergeOptions,
+        requestSearchOpen,
+        searchOptions,
+        setActiveCell,
+        setCellSelectionRanges,
+        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 scrollPlaneHeight = stickyFixedHeight + frozenRowsHeight + visibleScrollableRows.scrollContentHeight;
+    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)'
+        : scrollbar.vertical.visible && scrollbar.variant === 'modern'
+            ? 'var(--bgrid-scrollbar-modern-gutter-size)'
+            : undefined;
+    var scrollPlaneMinWidth = customVerticalScrollbarGutter
+        ? "max(100%, calc(".concat(scrollPlaneContentWidth, "px + ").concat(customVerticalScrollbarGutter, "))")
+        : scrollPlaneWidth;
+    var scrollbarMetrics = (0, scrollbar_1.useScrollbarMetrics)(scrollContainerRef, [data.length, itemHeight, itemPadding, contentBodyHeight, width], scrollPlaneContentWidth, stickyFixedHeight);
+    var measuredVerticalScrollbarGutter = customVerticalScrollbarGutter && scrollbarMetrics.horizontal.hasOverflow
+        ? Math.max(scrollbarMetrics.horizontal.contentSize - scrollPlaneContentWidth, 0)
+        : 0;
+    var keyboardViewportInsets = {
+        right: (frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0) + measuredVerticalScrollbarGutter,
+        bottom: stickyFixedHeight + frozenRowsHeight,
+    };
+    var showBottomBar = (0, utils_1.shouldRenderBottomBar)({
+        hasPage: !!page,
+        hasHorizontalOverflow: scrollbarMetrics.horizontal.hasOverflow,
+        scrollbar: scrollbar,
+        status: status,
+        pagination: pagination,
+    });
+    var handleScrollLeftChange = (0, react_1.useCallback)(function (offset) {
+        if (scrollContainerRef.current) {
+            scrollContainerRef.current.scrollLeft = offset;
+        }
+    }, []);
+    var handleScrollTopChange = (0, react_1.useCallback)(function (offset) {
+        if (scrollContainerRef.current) {
+            scrollContainerRef.current.scrollTop = offset;
+        }
+    }, []);
+    var latestScrollRef = (0, react_1.useRef)({ top: scrollTop, left: scrollLeft });
+    var latestCommittedScrollRef = (0, react_1.useRef)({ top: scrollTop, left: scrollLeft });
+    var scrollRafRef = (0, react_1.useRef)(null);
+    var scrollIdleTimerRef = (0, react_1.useRef)(null);
+    var selectionAutoScrollRafRef = (0, react_1.useRef)(null);
+    var latestPointerRef = (0, react_1.useRef)(null);
+    var hoveredRowIndexesRef = (0, react_1.useRef)([]);
+    var cellSelectionDragRef = (0, react_1.useRef)(null);
+    var axisSelectionDragRef = (0, react_1.useRef)(null);
+    var selectionMetricsRef = (0, react_1.useRef)({
+        columns: columns,
+        dataLength: data.length,
+        frozenColumnIndex: (_c = props.frozenColumnIndex) !== null && _c !== void 0 ? _c : 0,
+        frozenRowCount: frozenRowCount,
+        frozenColumnsWidth: frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0,
+        frozenRowsHeight: frozenRowsHeight,
+        trHeight: trHeight,
+    });
+    (0, react_1.useEffect)(function () {
+        var _a;
+        selectionMetricsRef.current = {
+            columns: columns,
+            dataLength: data.length,
+            frozenColumnIndex: (_a = props.frozenColumnIndex) !== null && _a !== void 0 ? _a : 0,
+            frozenRowCount: frozenRowCount,
+            frozenColumnsWidth: frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0,
+            frozenRowsHeight: frozenRowsHeight,
+            trHeight: trHeight,
+        };
+    }, [columns, data.length, props.frozenColumnIndex, frozenColumnsWidth, frozenRowCount, frozenRowsHeight, trHeight]);
+    var markScrollActive = (0, react_1.useCallback)(function () {
+        var _a;
+        (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute('data-bgrid-scrolling', 'true');
+        if (scrollIdleTimerRef.current !== null)
+            window.clearTimeout(scrollIdleTimerRef.current);
+        scrollIdleTimerRef.current = window.setTimeout(function () {
+            var _a;
+            scrollIdleTimerRef.current = null;
+            (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-bgrid-scrolling');
+        }, SCROLL_IDLE_DELAY);
+    }, []);
+    var scheduleScrollFrame = (0, react_1.useCallback)(function () {
+        if (scrollRafRef.current !== null)
+            return;
+        var pollNativeScrollPosition = function () {
+            var _a;
+            scrollRafRef.current = null;
+            var scrollContainer = scrollContainerRef.current;
+            if (!scrollContainer)
+                return;
+            var scrollTop = scrollContainer.scrollTop, scrollLeft = scrollContainer.scrollLeft;
+            latestScrollRef.current = { top: scrollTop, left: scrollLeft };
+            var _b = latestCommittedScrollRef.current, committedTop = _b.top, committedLeft = _b.left;
+            if (committedTop !== scrollTop || committedLeft !== scrollLeft) {
+                latestCommittedScrollRef.current = { top: scrollTop, left: scrollLeft };
+                setScroll(scrollTop, scrollLeft);
+            }
+            if ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.hasAttribute('data-bgrid-scrolling')) {
+                scrollRafRef.current = requestAnimationFrame(pollNativeScrollPosition);
+            }
+        };
+        scrollRafRef.current = requestAnimationFrame(pollNativeScrollPosition);
+    }, [setScroll]);
+    var onScroll = (0, react_1.useCallback)(function () {
+        if (scrollContainerRef.current) {
+            var _a = scrollContainerRef.current, scrollTop_1 = _a.scrollTop, scrollLeft_1 = _a.scrollLeft;
+            latestScrollRef.current = { top: scrollTop_1, left: scrollLeft_1 };
+            markScrollActive();
+            scheduleScrollFrame();
+        }
+    }, [markScrollActive, scheduleScrollFrame]);
+    var onWheel = (0, react_1.useCallback)(function (evt) {
+        var scrollContainer = scrollContainerRef.current;
+        if (!scrollContainer)
+            return;
+        var delta = { x: 0, y: 0 };
+        if (evt.detail) {
+            delta.y = evt.detail * 10;
+        }
+        else if (typeof evt.deltaY === 'undefined') {
+            delta.y = -evt.wheelDelta;
+            delta.x = 0;
+        }
+        else {
+            delta.y = evt.deltaY;
+            delta.x = evt.deltaX;
+        }
+        if (evt.deltaMode === 1) {
+            delta.y = delta.y * 16;
+            delta.x = delta.x * 16;
+        }
+        else if (evt.deltaMode === 2) {
+            delta.y = delta.y * scrollContainer.clientHeight;
+            delta.x = delta.x * scrollContainer.clientWidth;
+        }
+        var maxScrollTop = Math.max(scrollContainer.scrollHeight - scrollContainer.clientHeight, 0);
+        var maxScrollLeft = Math.max(scrollContainer.scrollWidth - scrollContainer.clientWidth, 0);
+        var nextScrollTop = Math.min(maxScrollTop, Math.max(0, scrollContainer.scrollTop + delta.y));
+        var nextScrollLeft = Math.min(maxScrollLeft, Math.max(0, scrollContainer.scrollLeft + delta.x));
+        var didScrollTop = nextScrollTop !== scrollContainer.scrollTop;
+        var didScrollLeft = nextScrollLeft !== scrollContainer.scrollLeft;
+        if (!didScrollTop && !didScrollLeft) {
+            return;
+        }
+        evt.preventDefault();
+        if (didScrollTop)
+            scrollContainer.scrollTop = nextScrollTop;
+        if (didScrollLeft)
+            scrollContainer.scrollLeft = nextScrollLeft;
+    }, []);
+    var resetScrollPosition = (0, react_1.useCallback)(function (type) {
+        var _a, _b;
+        if (type === 'all' || type === 'left')
+            (_a = scrollContainerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({ left: 0 });
+        if (type === 'all' || type === 'top')
+            (_b = scrollContainerRef.current) === null || _b === void 0 ? void 0 : _b.scrollTo({ top: 0 });
+    }, []);
+    var commitScroll = (0, react_1.useCallback)(function (top, left) {
+        var scrollContainer = scrollContainerRef.current;
+        if (!scrollContainer)
+            return;
+        if (scrollContainer.scrollTop !== top)
+            scrollContainer.scrollTop = top;
+        if (scrollContainer.scrollLeft !== left)
+            scrollContainer.scrollLeft = left;
+        latestScrollRef.current = { top: top, left: left };
+        latestCommittedScrollRef.current = { top: top, left: left };
+        setScroll(top, left);
+    }, [setScroll]);
+    (0, react_1.useEffect)(function () {
+        var _a, _b;
+        if (!searchOpen || activeSearchMatchIndex === undefined)
+            return;
+        var match = searchMatches[activeSearchMatchIndex];
+        var scrollContainer = scrollContainerRef.current;
+        if (!match || !scrollContainer)
+            return;
+        var scrollRect = scrollContainer.getBoundingClientRect();
+        var searchRect = (_a = searchPopoverRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        var viewportInsets = searchRect
+            ? {
+                top: Math.max(0, Math.min(scrollContainer.clientHeight, searchRect.bottom - scrollRect.top + 8)),
+                right: Math.max(0, Math.min(scrollContainer.clientWidth, scrollRect.right - searchRect.left + 8)),
+                bottom: Math.max(0, Math.min(scrollContainer.clientHeight, stickyFixedHeight + frozenRowsHeight)),
+            }
+            : undefined;
+        var result = (0, coordinate_1.ensureCellVisible)({
+            cell: match.cell,
+            scrollContainer: scrollContainer,
+            frozenColumnCount: (_b = props.frozenColumnIndex) !== null && _b !== void 0 ? _b : 0,
+            frozenRowCount: frozenRowCount,
+            columns: columns,
+            rowHeight: trHeight,
+            viewportInsets: viewportInsets,
+        });
+        if (result.didScroll)
+            commitScroll(result.scrollTop, result.scrollLeft);
+    }, [
+        activeSearchMatchIndex,
+        columns,
+        commitScroll,
+        frozenRowCount,
+        props.frozenColumnIndex,
+        searchMatches,
+        searchOpen,
+        stickyFixedHeight,
+        frozenRowsHeight,
+        trHeight,
+    ]);
+    var clearHoveredRow = (0, react_1.useCallback)(function () {
+        if (!containerRef.current || hoveredRowIndexesRef.current.length === 0)
+            return;
+        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) {
+                el.classList.remove('bgrid-row-hover');
+            });
+        });
+        hoveredRowIndexesRef.current = [];
+    }, []);
+    var setHoveredRows = (0, react_1.useCallback)(function (rowIndexes) {
+        if (!containerRef.current)
+            return;
+        var prev = hoveredRowIndexesRef.current;
+        if (prev.length === rowIndexes.length && prev.every(function (value, index) { return value === rowIndexes[index]; })) {
+            return;
+        }
+        clearHoveredRow();
+        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) {
+                el.classList.add('bgrid-row-hover');
+            });
+        });
+        hoveredRowIndexesRef.current = rowIndexes;
+    }, [clearHoveredRow]);
+    var toLogicalCellPosition = (0, react_1.useCallback)(function (cellPosition) {
+        var logicalCell = (0, utils_1.resolveLogicalCell)(data, props.cellMergeOptions, cellPosition);
+        return __assign(__assign({}, logicalCell.cell), { rowSpan: logicalCell.rowIndexes.length });
+    }, [data, props.cellMergeOptions]);
+    var updateAxisSelectionByTarget = (0, react_1.useCallback)(function (target) {
+        var dragState = axisSelectionDragRef.current;
+        if (!dragState)
+            return false;
+        var axisTarget = getAxisSelectionTarget(target, containerRef.current);
+        if (!axisTarget || axisTarget.axis !== dragState.axis)
+            return false;
+        setCellSelectionRanges(updateAxisSelectionDragRange(dragState, getAxisSelectionRange({
+            axis: dragState.axis,
+            startIndex: dragState.startIndex,
+            endIndex: axisTarget.startIndex < dragState.startIndex ? axisTarget.startIndex : axisTarget.endIndex,
+            rowCount: data.length,
+            columnCount: columns.length,
+        })));
+        return true;
+    }, [columns.length, data.length, setCellSelectionRanges]);
+    var onBodyPointerOverCapture = (0, react_1.useCallback)(function (evt) {
+        var _a;
+        var target = evt.target;
+        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 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))) {
+            clearHoveredRow();
+            return;
+        }
+        var rowIndex = Number(tr.getAttribute('data-ri'));
+        if (Number.isNaN(rowIndex)) {
+            clearHoveredRow();
+            return;
+        }
+        var rowIndexes = cellPosition
+            ? Array.from({ length: cellPosition.rowSpan }, function (_, index) { return cellPosition.rowIndex + index; })
+            : [rowIndex];
+        setHoveredRows(rowIndexes);
+    }, [
+        cellSelectionEnabled,
+        clearHoveredRow,
+        setCellSelectionRanges,
+        setHoveredRows,
+        toLogicalCellPosition,
+        updateAxisSelectionByTarget,
+    ]);
+    var onBodyPointerDownCapture = (0, react_1.useCallback)(function (evt) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var navEnabled = (_a = cellNavigationOptions === null || cellNavigationOptions === void 0 ? void 0 : cellNavigationOptions.enabled) !== null && _a !== void 0 ? _a : true;
+        if (!cellSelectionEnabled && !navEnabled)
+            return;
+        if (evt.button !== 0 || isInteractiveTarget(evt.target))
+            return;
+        var axisTarget = cellSelectionEnabled
+            ? getAxisSelectionTarget(evt.target, containerRef.current)
+            : undefined;
+        if (axisTarget && data.length > 0 && columns.length > 0) {
+            evt.preventDefault();
+            (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.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;
+            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
+                ? cellSelectionRanges
+                : isRangeExtension
+                    ? cellSelectionRanges.slice(0, -1)
+                    : [];
+            var activeRange = getAxisSelectionRange({
+                axis: axisTarget.axis,
+                startIndex: startIndex,
+                endIndex: endIndex,
+                rowCount: data.length,
+                columnCount: columns.length,
+            });
+            cellSelectionDragRef.current = null;
+            axisSelectionDragRef.current = {
+                axis: axisTarget.axis,
+                startIndex: startIndex,
+                baseRanges: baseRanges,
+                activeRangeIndex: baseRanges.length,
+            };
+            setActiveCell(axisTarget.axis === 'row'
+                ? { rowIndex: axisTarget.startIndex, columnIndex: 0 }
+                : { rowIndex: 0, columnIndex: axisTarget.startIndex });
+            setCellSelecting(true);
+            setCellSelectionRanges(__spreadArray(__spreadArray([], __read(baseRanges), false), [activeRange], false));
+            return;
+        }
+        var physicalCellPosition = getCellPosition(evt.target, containerRef.current);
+        if (!physicalCellPosition) {
+            return;
+        }
+        var cellPosition = toLogicalCellPosition(physicalCellPosition);
+        evt.preventDefault();
+        (_e = containerRef.current) === null || _e === void 0 ? void 0 : _e.focus({ preventScroll: true });
+        var clickedCell = {
+            rowIndex: cellPosition.rowIndex,
+            columnIndex: cellPosition.columnIndex,
+        };
+        setActiveCell(clickedCell, {
+            rowIndex: physicalCellPosition.rowIndex,
+            columnIndex: physicalCellPosition.columnIndex,
+        });
+        if (cellSelectionEnabled) {
+            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
+                : 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
+                : cellPosition.columnIndex;
+            var startRowSpan = isRangeExtension
+                ? Math.abs(cellPosition.rowIndex - startRowIndex) + 1
+                : cellPosition.rowSpan;
+            var activeRange = {
+                startRowIndex: startRowIndex,
+                startColumnIndex: startColumnIndex,
+                endRowIndex: getSelectionEndRowIndex(startRowIndex, cellPosition),
+                endColumnIndex: cellPosition.columnIndex,
+            };
+            var baseRanges = isAdditiveSelection
+                ? cellSelectionRanges
+                : isRangeExtension
+                    ? cellSelectionRanges.slice(0, -1)
+                    : [];
+            cellSelectionDragRef.current = {
+                startRowIndex: startRowIndex,
+                startColumnIndex: startColumnIndex,
+                startRowSpan: startRowSpan,
+                baseRanges: baseRanges,
+                activeRangeIndex: baseRanges.length,
+            };
+            latestPointerRef.current = { clientX: evt.clientX, clientY: evt.clientY };
+            setCellSelecting(true);
+            setCellSelectionRanges(__spreadArray(__spreadArray([], __read(baseRanges), false), [activeRange], false));
+        }
+    }, [
+        activeCell,
+        cellNavigationOptions === null || cellNavigationOptions === void 0 ? void 0 : cellNavigationOptions.enabled,
+        cellSelectionEnabled,
+        cellSelectionRange,
+        cellSelectionRanges,
+        columns.length,
+        data.length,
+        setActiveCell,
+        setCellSelecting,
+        setCellSelectionRanges,
+        toLogicalCellPosition,
+    ]);
+    var endCellSelectionDrag = (0, react_1.useCallback)(function () {
+        if (!cellSelectionDragRef.current && !axisSelectionDragRef.current)
+            return;
+        cellSelectionDragRef.current = null;
+        axisSelectionDragRef.current = null;
+        latestPointerRef.current = null;
+        if (selectionAutoScrollRafRef.current !== null) {
+            cancelAnimationFrame(selectionAutoScrollRafRef.current);
+            selectionAutoScrollRafRef.current = null;
+        }
+        setCellSelecting(false);
+    }, [setCellSelecting]);
+    var updateSelectionByPointer = (0, react_1.useCallback)(function (clientX, clientY) {
+        var _a, _b, _c;
+        var dragState = cellSelectionDragRef.current;
+        if (!dragState)
+            return;
+        var target = ((_b = (_a = document.elementFromPoint) === null || _a === void 0 ? void 0 : _a.call(document, clientX, clientY)) !== null && _b !== void 0 ? _b : null);
+        var cellPosition = (_c = getCellPosition(target, containerRef.current)) !== null && _c !== void 0 ? _c : getCellPositionFromPointer({
+            clientX: clientX,
+            clientY: clientY,
+            bodyContainer: bodyContainerRef.current,
+            scrollContainer: scrollContainerRef.current,
+            metrics: selectionMetricsRef.current,
+        });
+        if (!cellPosition)
+            return;
+        var logicalCellPosition = toLogicalCellPosition(cellPosition);
+        setCellSelectionRanges(updateSelectionDragRange(dragState, getRangeFromDrag(dragState, logicalCellPosition)));
+    }, [setCellSelectionRanges, toLogicalCellPosition]);
+    var runSelectionAutoScroll = (0, react_1.useCallback)(function () {
+        selectionAutoScrollRafRef.current = null;
+        var dragState = cellSelectionDragRef.current;
+        var pointer = latestPointerRef.current;
+        var scrollContainer = scrollContainerRef.current;
+        var bodyContainer = bodyContainerRef.current;
+        if (!dragState || !pointer || !scrollContainer || !bodyContainer)
+            return;
+        var delta = getSelectionAutoScrollDelta(pointer.clientX, pointer.clientY, bodyContainer, scrollContainer);
+        var maxScrollTop = Math.max(scrollContainer.scrollHeight - scrollContainer.clientHeight, 0);
+        var maxScrollLeft = Math.max(scrollContainer.scrollWidth - scrollContainer.clientWidth, 0);
+        var nextScrollTop = (0, coordinate_1.clamp)(scrollContainer.scrollTop + delta.y, 0, maxScrollTop);
+        var nextScrollLeft = (0, coordinate_1.clamp)(scrollContainer.scrollLeft + delta.x, 0, maxScrollLeft);
+        if (nextScrollTop !== scrollContainer.scrollTop || nextScrollLeft !== scrollContainer.scrollLeft) {
+            commitScroll(nextScrollTop, nextScrollLeft);
+        }
+        updateSelectionByPointer(pointer.clientX, pointer.clientY);
+        if (cellSelectionDragRef.current && (delta.x !== 0 || delta.y !== 0)) {
+            selectionAutoScrollRafRef.current = requestAnimationFrame(runSelectionAutoScroll);
+        }
+    }, [commitScroll, updateSelectionByPointer]);
+    var selectAllCells = (0, react_1.useCallback)(function () {
+        if (!cellSelectionEnabled)
+            return false;
+        if (data.length === 0 || columns.length === 0)
+            return false;
+        endCellSelectionDrag();
+        setCellSelectionRanges([
+            {
+                startRowIndex: 0,
+                startColumnIndex: 0,
+                endRowIndex: data.length - 1,
+                endColumnIndex: columns.length - 1,
+            },
+        ]);
+        return true;
+    }, [cellSelectionEnabled, columns.length, data.length, endCellSelectionDrag, setCellSelectionRanges]);
+    var copySelectedCells = (0, react_1.useCallback)(function (evt) { return __awaiter(_this, void 0, void 0, function () {
+        var maxClipboardCells, maxClipboardTextLength, onCopyError, selectedCellCount, notifyCopyError, selectedCells, rows, textLength, copiedRowCount, _loop_1, _a, _b, ri, state_1, text, error_1;
+        var e_1, _c;
+        var _d, _e, _f, _g;
+        return __generator(this, function (_h) {
+            switch (_h.label) {
+                case 0:
+                    if (!cellSelectionEnabled)
+                        return [2 /*return*/];
+                    if (cellSelectionRanges.length === 0)
+                        return [2 /*return*/];
+                    maxClipboardCells = (_d = cellSelectionOptions === null || cellSelectionOptions === void 0 ? void 0 : cellSelectionOptions.maxClipboardCells) !== null && _d !== void 0 ? _d : DEFAULT_MAX_CLIPBOARD_CELLS;
+                    maxClipboardTextLength = (_e = cellSelectionOptions === null || cellSelectionOptions === void 0 ? void 0 : cellSelectionOptions.maxClipboardTextLength) !== null && _e !== void 0 ? _e : DEFAULT_MAX_CLIPBOARD_TEXT_LENGTH;
+                    onCopyError = cellSelectionOptions === null || cellSelectionOptions === void 0 ? void 0 : cellSelectionOptions.onCopyError;
+                    selectedCellCount = getSelectionCellCount(cellSelectionRanges, data.length, columns.length);
+                    notifyCopyError = function (params) {
+                        warnClipboardLimitExceeded(params.reason, params.actual, params.limit);
+                        onCopyError === null || onCopyError === void 0 ? void 0 : onCopyError({
+                            reason: params.reason,
+                            actual: params.actual,
+                            limit: params.limit,
+                            selectedCellCount: selectedCellCount,
+                            maxClipboardCells: maxClipboardCells,
+                            maxClipboardTextLength: maxClipboardTextLength,
+                            error: params.error,
+                        });
+                    };
+                    if (selectedCellCount === 0 || selectedCellCount > maxClipboardCells) {
+                        if (selectedCellCount > maxClipboardCells) {
+                            notifyCopyError({
+                                reason: 'maxClipboardCells',
+                                actual: selectedCellCount,
+                                limit: maxClipboardCells,
+                            });
+                        }
+                        return [2 /*return*/];
+                    }
+                    selectedCells = getSelectedCellMap(cellSelectionRanges, data.length, columns.length);
+                    rows = [];
+                    textLength = 0;
+                    copiedRowCount = 0;
+                    _loop_1 = function (ri) {
+                        var item = data[ri];
+                        if (!item)
+                            return "continue";
+                        var values = [];
+                        var columnIndexes = Array.from((_f = selectedCells.get(ri)) !== null && _f !== void 0 ? _f : []).sort(function (a, b) { return a - b; });
+                        columnIndexes.forEach(function (ci) {
+                            var column = columns[ci];
+                            if (!column)
+                                return;
+                            var value = (0, utils_1.getCellValueByRowKey)(column.key, item.values);
+                            var clipboardValue = column.getClipboardText
+                                ? column.getClipboardText({
+                                    column: column,
+                                    index: ri,
+                                    columnIndex: ci,
+                                    item: item,
+                                    values: item.values,
+                                    value: value,
+                                })
+                                : value;
+                            values.push(toClipboardText(clipboardValue));
+                        });
+                        var rowText = values.join('\t');
+                        var nextTextLength = textLength + rowText.length + (copiedRowCount > 0 ? 1 : 0);
+                        if (nextTextLength > maxClipboardTextLength) {
+                            notifyCopyError({
+                                reason: 'maxClipboardTextLength',
+                                actual: nextTextLength,
+                                limit: maxClipboardTextLength,
+                            });
+                            return { value: void 0 };
+                        }
+                        rows.push(rowText);
+                        textLength = nextTextLength;
+                        copiedRowCount += 1;
+                    };
+                    try {
+                        for (_a = __values(Array.from(selectedCells.keys()).sort(function (a, b) { return a - b; })), _b = _a.next(); !_b.done; _b = _a.next()) {
+                            ri = _b.value;
+                            state_1 = _loop_1(ri);
+                            if (typeof state_1 === "object")
+                                return [2 /*return*/, state_1.value];
+                        }
+                    }
+                    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                    finally {
+                        try {
+                            if (_b && !_b.done && (_c = _a.return)) _c.call(_a);
+                        }
+                        finally { if (e_1) throw e_1.error; }
+                    }
+                    text = rows.join('\r');
+                    if (!text)
+                        return [2 /*return*/];
+                    if (evt === null || evt === void 0 ? void 0 : evt.clipboardData) {
+                        evt.clipboardData.setData('text/plain', text);
+                        return [2 /*return*/];
+                    }
+                    if (!((_g = navigator.clipboard) === null || _g === void 0 ? void 0 : _g.writeText)) return [3 /*break*/, 5];
+                    _h.label = 1;
+                case 1:
+                    _h.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, navigator.clipboard.writeText(text)];
+                case 2:
+                    _h.sent();
+                    return [2 /*return*/];
+                case 3:
+                    error_1 = _h.sent();
+                    if (copyTextFallback(text)) {
+                        return [2 /*return*/];
+                    }
+                    notifyCopyError({
+                        reason: 'clipboardWriteFailed',
+                        actual: text.length,
+                        error: error_1,
+                    });
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+                case 5:
+                    copyTextFallback(text);
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [
+        cellSelectionEnabled,
+        cellSelectionRanges,
+        columns,
+        data,
+        cellSelectionOptions === null || cellSelectionOptions === void 0 ? void 0 : cellSelectionOptions.maxClipboardCells,
+        cellSelectionOptions === null || cellSelectionOptions === void 0 ? void 0 : cellSelectionOptions.maxClipboardTextLength,
+        cellSelectionOptions === null || cellSelectionOptions === void 0 ? void 0 : cellSelectionOptions.onCopyError,
+    ]);
+    var pasteClipboardText = (0, react_1.useCallback)(function (text) {
+        var _a, _b;
+        if (!cellSelectionEnabled || !editable || !activeCell || data.length === 0 || columns.length === 0) {
+            return false;
+        }
+        var maxClipboardCells = (_a = cellSelectionOptions === null || cellSelectionOptions === void 0 ? void 0 : cellSelectionOptions.maxClipboardCells) !== null && _a !== void 0 ? _a : DEFAULT_MAX_CLIPBOARD_CELLS;
+        var maxClipboardTextLength = (_b = cellSelectionOptions === null || cellSelectionOptions === void 0 ? void 0 : cellSelectionOptions.maxClipboardTextLength) !== null && _b !== void 0 ? _b : DEFAULT_MAX_CLIPBOARD_TEXT_LENGTH;
+        var matrix = parseClipboardText(text);
+        var clipboardCellCount = matrix.reduce(function (count, row) { return count + row.length; }, 0);
+        var onPasteError = cellSelectionOptions === null || cellSelectionOptions === void 0 ? void 0 : cellSelectionOptions.onPasteError;
+        var notifyPasteError = function (params) {
+            warnClipboardPasteFailed(params.reason, params.actual, params.limit);
+            onPasteError === null || onPasteError === void 0 ? void 0 : onPasteError(__assign(__assign({}, params), { clipboardTextLength: text.length, clipboardCellCount: clipboardCellCount, maxClipboardCells: maxClipboardCells, maxClipboardTextLength: maxClipboardTextLength }));
+        };
+        if (text.length > maxClipboardTextLength) {
+            notifyPasteError({
+                reason: 'maxClipboardTextLength',
+                actual: text.length,
+                limit: maxClipboardTextLength,
+            });
+            return true;
+        }
+        if (clipboardCellCount > maxClipboardCells) {
+            notifyPasteError({
+                reason: 'maxClipboardCells',
+                actual: clipboardCellCount,
+                limit: maxClipboardCells,
+            });
+            return true;
+        }
+        var startRowIndex = activeCell.rowIndex;
+        var startColumnIndex = activeCell.columnIndex;
+        var nextData = __spreadArray([], __read(data), false);
+        var appendedRows = [];
+        var changes = [];
+        var createRowOnPaste = cellSelectionOptions === null || cellSelectionOptions === void 0 ? void 0 : cellSelectionOptions.createRowOnPaste;
+        if (createRowOnPaste) {
+            var requiredRowCount = startRowIndex + matrix.length;
+            while (nextData.length < requiredRowCount) {
+                var rowIndex = nextData.length;
+                var clipboardRow = matrix[rowIndex - startRowIndex];
+                if (!clipboardRow)
+                    break;
+                var createdItem = void 0;
+                try {
+                    createdItem = createRowOnPaste({ rowIndex: rowIndex, clipboardRow: __spreadArray([], __read(clipboardRow), false), columns: columns });
+                }
+                catch (error) {
+                    notifyPasteError({ reason: 'createRowFailed', rowIndex: rowIndex, error: error });
+                    break;
+                }
+                if (!createdItem)
+                    break;
+                var newItem = __assign(__assign({}, createdItem), { status: types_1.BGridDataItemStatus.new });
+                nextData.push(newItem);
+                appendedRows.push({ rowIndex: rowIndex, item: newItem });
+            }
+        }
+        matrix.forEach(function (clipboardRow, rowOffset) {
+            var rowIndex = startRowIndex + rowOffset;
+            var item = nextData[rowIndex];
+            if (!item || item.status === types_1.BGridDataItemStatus.remove)
+                return;
+            clipboardRow.forEach(function (clipboardValue, columnOffset) {
+                var _a;
+                var columnIndex = startColumnIndex + columnOffset;
+                var column = columns[columnIndex];
+                if (!column || column.editable === false)
+                    return;
+                var nextValue = clipboardValue;
+                if (((_a = column.editor) === null || _a === void 0 ? void 0 : _a.type) === 'text' && column.editor.parseValue) {
+                    try {
+                        nextValue = column.editor.parseValue(clipboardValue, {
+                            index: rowIndex,
+                            columnIndex: columnIndex,
+                            item: item,
+                            values: item.values,
+                            column: column,
+                        });
+                    }
+                    catch (error) {
+                        notifyPasteError({
+                            reason: 'parseValueFailed',
+                            rowIndex: rowIndex,
+                            columnIndex: columnIndex,
+                            error: error,
+                        });
+                        return;
+                    }
+                }
+                var currentValue = (0, utils_1.getCellValueByRowKey)(column.key, item.values);
+                if (Object.is(currentValue, nextValue))
+                    return;
+                setCellValueByRowKey(column.key, item.values, nextValue);
+                (0, utils_1.markCellEdited)(item, column);
+                (0, utils_1.markCellValueChanged)(item, column);
+                if (item.status !== types_1.BGridDataItemStatus.new) {
+                    item.status = types_1.BGridDataItemStatus.edit;
+                }
+                changes.push({ rowIndex: rowIndex, columnIndex: columnIndex, item: item });
+            });
+        });
+        var pastedRowCount = Math.min(matrix.length, Math.max(nextData.length - startRowIndex, 0));
+        var pastedColumnCount = Math.min(matrix.reduce(function (max, row) { return Math.max(max, row.length); }, 0), Math.max(columns.length - startColumnIndex, 0));
+        if (pastedRowCount > 0 && pastedColumnCount > 0) {
+            setCellSelectionRanges([
+                {
+                    startRowIndex: startRowIndex,
+                    startColumnIndex: startColumnIndex,
+                    endRowIndex: startRowIndex + pastedRowCount - 1,
+                    endColumnIndex: startColumnIndex + pastedColumnCount - 1,
+                },
+            ]);
+        }
+        if (changes.length > 0 || appendedRows.length > 0) {
+            setData(nextData);
+            appendedRows.forEach(function (_a) {
+                var rowIndex = _a.rowIndex, item = _a.item;
+                onChangeData === null || onChangeData === void 0 ? void 0 : onChangeData(rowIndex, null, item.values, null);
+            });
+            changes.forEach(function (_a) {
+                var _b;
+                var rowIndex = _a.rowIndex, columnIndex = _a.columnIndex, item = _a.item;
+                var sourceIndex = (_b = sourceIndexByVisibleIndex === null || sourceIndexByVisibleIndex === void 0 ? void 0 : sourceIndexByVisibleIndex[rowIndex]) !== null && _b !== void 0 ? _b : rowIndex;
+                onChangeData === null || onChangeData === void 0 ? void 0 : onChangeData(sourceIndex, columnIndex, item.values, columns[columnIndex]);
+            });
+        }
+        return true;
+    }, [
+        activeCell,
+        cellSelectionEnabled,
+        columns,
+        data,
+        editable,
+        cellSelectionOptions === null || cellSelectionOptions === void 0 ? void 0 : cellSelectionOptions.maxClipboardCells,
+        cellSelectionOptions === null || cellSelectionOptions === void 0 ? void 0 : cellSelectionOptions.maxClipboardTextLength,
+        cellSelectionOptions === null || cellSelectionOptions === void 0 ? void 0 : cellSelectionOptions.onPasteError,
+        cellSelectionOptions === null || cellSelectionOptions === void 0 ? void 0 : cellSelectionOptions.createRowOnPaste,
+        onChangeData,
+        sourceIndexByVisibleIndex,
+        setCellSelectionRanges,
+        setData,
+    ]);
+    var onBodyPointerLeave = (0, react_1.useCallback)(function () {
+        clearHoveredRow();
+    }, [clearHoveredRow]);
+    // [Group 1] Layout dimensions
+    (0, react_1.useEffect)(function () {
+        if (props.width !== undefined)
+            setWidth(Math.max(props.width, 100));
+        if (props.headerHeight !== undefined)
+            setHeaderHeight(Math.max(props.headerHeight, 22));
+        if (props.footerHeight !== undefined)
+            setFooterHeight(props.footerHeight);
+        if (props.summaryHeight !== undefined)
+            setSummaryHeight(props.summaryHeight);
+        if (props.itemHeight !== undefined)
+            setItemHeight(props.itemHeight);
+        if (props.itemPadding !== undefined)
+            setItemPadding(props.itemPadding);
+    }, [
+        props.width,
+        props.headerHeight,
+        props.footerHeight,
+        props.summaryHeight,
+        props.itemHeight,
+        props.itemPadding,
+        setWidth,
+        setHeaderHeight,
+        setFooterHeight,
+        setSummaryHeight,
+        setItemHeight,
+        setItemPadding,
+    ]);
+    (0, react_1.useEffect)(function () {
+        if (props.bottomBarHeight !== undefined)
+            setBottomBarHeight(props.bottomBarHeight);
+    }, [props.bottomBarHeight, setBottomBarHeight]);
+    (0, react_1.useEffect)(function () {
+        if (props.scrollbar !== undefined)
+            setScrollbar(props.scrollbar);
+    }, [props.scrollbar, setScrollbar]);
+    (0, react_1.useEffect)(function () {
+        if (props.status !== undefined)
+            setStatus(props.status);
+    }, [props.status, setStatus]);
+    (0, react_1.useEffect)(function () {
+        if (props.pagination !== undefined)
+            setPagination(props.pagination);
+    }, [props.pagination, setPagination]);
+    // [Group 2] Content body height (depends on layout dimensions → separate effect)
+    (0, react_1.useEffect)(function () {
+        if (props.height !== undefined) {
+            var propsHeight = Math.max(props.height, 100);
+            setHeight(propsHeight);
+            var contentBodyHeight_1 = Math.max(propsHeight -
+                headerHeight -
+                (showBottomBar ? bottomBarHeight : 0) -
+                (summary ? summaryHeight : 0) -
+                containerBorderWidth * 2, 0);
+            var displayItemCount = contentBodyHeight_1 > 0 ? Math.ceil(contentBodyHeight_1 / (itemHeight + itemPadding * 2)) : 0;
+            setContentBodyHeight(contentBodyHeight_1);
+            setDisplayItemCount(displayItemCount);
+        }
+    }, [
+        props.height,
+        height,
+        headerHeight,
+        showBottomBar,
+        bottomBarHeight,
+        containerBorderWidth,
+        itemHeight,
+        itemPadding,
+        summary,
+        summaryHeight,
+        setHeight,
+        setContentBodyHeight,
+        setDisplayItemCount,
+    ]);
+    // [Group 3] Loading / spinner states
+    (0, react_1.useEffect)(function () {
+        if (props.loading !== undefined)
+            setLoading(props.loading);
+        if (props.spinning !== undefined)
+            setSpinning(props.spinning);
+    }, [props.loading, props.spinning, setLoading, setSpinning]);
+    // [Group 4] Frozen columns
+    (0, react_1.useEffect)(function () {
+        var _a, _b, _c, _d;
+        var frozenColumnsWidth = (0, utils_1.getFrozenColumnsWidth)({
+            showLineNumber: showLineNumber,
+            rowChecked: rowChecked,
+            itemHeight: itemHeight,
+            frozenColumnIndex: (_a = props.frozenColumnIndex) !== null && _a !== void 0 ? _a : 0,
+            columns: columns,
+            dataLength: data.length,
+            reorderable: (_c = (_b = props.reorder) === null || _b === void 0 ? void 0 : _b.enabled) !== null && _c !== void 0 ? _c : false,
+        });
+        setFrozenColumnsWidth(frozenColumnsWidth);
+        setFrozenColumnIndex((_d = props.frozenColumnIndex) !== null && _d !== void 0 ? _d : 0);
+    }, [
+        props.frozenColumnIndex,
+        (_d = props.reorder) === null || _d === void 0 ? void 0 : _d.enabled,
+        showLineNumber,
+        rowChecked,
+        itemHeight,
+        columns,
+        data.length,
+        setFrozenColumnsWidth,
+        setFrozenColumnIndex,
+    ]);
+    // [Group 4-1] Frozen rows. A top summary remains a separate band above this body area.
+    (0, react_1.useEffect)(function () {
+        var _a, _b, _c;
+        var rowCount = (_b = (_a = props.data) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : data.length;
+        var nextFrozenRowCount = Math.min(Math.max(Math.floor((_c = props.frozenRowCount) !== null && _c !== void 0 ? _c : 0), 0), rowCount);
+        setFrozenRowCount(nextFrozenRowCount);
+        setFrozenRowsHeight(nextFrozenRowCount * trHeight);
+    }, [data.length, (_e = props.data) === null || _e === void 0 ? void 0 : _e.length, props.frozenRowCount, setFrozenRowCount, setFrozenRowsHeight, trHeight]);
+    // [Group 5] Data & columns
+    (0, react_1.useEffect)(function () {
+        if (props.data !== undefined &&
+            props.sourceData !== undefined &&
+            props.sourceIndexByVisibleIndex !== undefined &&
+            props.visibleIndexBySourceIndex !== undefined) {
+            setProcessedData({
+                data: props.data,
+                sourceData: props.sourceData,
+                sourceIndexByVisibleIndex: props.sourceIndexByVisibleIndex,
+                visibleIndexBySourceIndex: props.visibleIndexBySourceIndex,
+            });
+        }
+        else if (props.data !== undefined) {
+            setData(props.data);
+            if (props.sourceData !== undefined) {
+                setSourceData(props.sourceData);
+            }
+        }
+    }, [
+        props.data,
+        props.sourceData,
+        props.sourceIndexByVisibleIndex,
+        props.visibleIndexBySourceIndex,
+        setData,
+        setProcessedData,
+        setSourceData,
+    ]);
+    (0, react_1.useEffect)(function () {
+        if (props.columns !== undefined)
+            setColumns(props.columns);
+        if (props.columnsGroup !== undefined)
+            setColumnsGroup(props.columnsGroup);
+        if (props.columnGroups !== undefined)
+            setColumnGroups(props.columnGroups);
+    }, [props.columnGroups, props.columns, props.columnsGroup, setColumnGroups, setColumns, setColumnsGroup]);
+    // [Group 6] Row check, sort & query state
+    (0, react_1.useEffect)(function () {
+        if (props.checkedIndexesMap !== undefined)
+            setCheckedIndexesMap(props.checkedIndexesMap);
+    }, [props.checkedIndexesMap, setCheckedIndexesMap]);
+    (0, react_1.useEffect)(function () {
+        setRowChecked(props.rowChecked);
+        setSort(props.sort);
+        setSortParams(props.sortParams);
+        setDataControl(props.dataControl);
+        setIcons(props.icons);
+        setSearchOptions(props.searchOptions);
+        setContextMenuOptions(props.contextMenuOptions);
+    }, [
+        props.rowChecked,
+        props.sort,
+        props.sortParams,
+        props.dataControl,
+        props.icons,
+        props.searchOptions,
+        props.contextMenuOptions,
+        setRowChecked,
+        setSort,
+        setSortParams,
+        setDataControl,
+        setIcons,
+        setSearchOptions,
+        setContextMenuOptions,
+    ]);
+    var prevDataQueryRef = (0, react_1.useRef)(props.dataQuery);
+    (0, react_1.useEffect)(function () {
+        var _a, _b;
+        if (props.dataQuery !== undefined) {
+            setDataQuery(props.dataQuery);
+            var dataQueryChanged = !areDataQueriesEqual(prevDataQueryRef.current, props.dataQuery);
+            if (dataQueryChanged) {
+                setActiveToolbox(null);
+                clearCellSelection();
+                setEditItem(-1, -1);
+                commitScroll(0, (_b = (_a = scrollContainerRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) !== null && _b !== void 0 ? _b : 0);
+            }
+            prevDataQueryRef.current = props.dataQuery;
+        }
+    }, [clearCellSelection, commitScroll, props.dataQuery, setActiveToolbox, setDataQuery, setEditItem]);
+    // [Group 7] Pagination
+    (0, react_1.useEffect)(function () {
+        var _a, _b;
+        if (props.page !== undefined) {
+            setPage(__assign({}, props.page));
+            setDisplayPaginationLength((_b = (_a = props.page) === null || _a === void 0 ? void 0 : _a.displayPaginationLength) !== null && _b !== void 0 ? _b : 5);
+        }
+    }, [
+        props.page,
+        (_f = props.page) === null || _f === void 0 ? void 0 : _f.currentPage,
+        (_g = props.page) === null || _g === void 0 ? void 0 : _g.loading,
+        (_h = props.page) === null || _h === void 0 ? void 0 : _h.pageSize,
+        (_j = props.page) === null || _j === void 0 ? void 0 : _j.totalPages,
+        (_k = props.page) === null || _k === void 0 ? void 0 : _k.totalElements,
+        (_l = props.page) === null || _l === void 0 ? void 0 : _l.onChange,
+        (_m = props.page) === null || _m === void 0 ? void 0 : _m.displayPaginationLength,
+        setPage,
+        setDisplayPaginationLength,
+    ]);
+    (0, react_1.useEffect)(function () {
+        resetScrollPosition('top');
+    }, [resetScrollPosition, (_o = props.page) === null || _o === void 0 ? void 0 : _o.currentPage]);
+    // [Group 8] Row key & selection
+    (0, react_1.useEffect)(function () {
+        setRowKey(props.rowKey);
+        setFocusedRowKey(props.selectedRowKey);
+    }, [props.rowKey, props.selectedRowKey, setRowKey, setFocusedRowKey]);
+    // [Group 9] Edit options
+    (0, react_1.useEffect)(function () {
+        if (props.editable !== undefined)
+            setEditable(props.editable);
+        if (props.editTrigger !== undefined)
+            setEditTrigger(props.editTrigger);
+    }, [props.editable, props.editTrigger, setEditable, setEditTrigger]);
+    // [Group 10] Event callbacks
+    (0, react_1.useEffect)(function () {
+        setOnClick(props.onClick);
+        setOnChangeColumns(props.onChangeColumns);
+        setOnChangeData(props.onChangeData);
+        setOnLoadMore(props.onLoadMore);
+    }, [
+        props.onClick,
+        props.onChangeColumns,
+        props.onChangeData,
+        props.onLoadMore,
+        setOnClick,
+        setOnChangeColumns,
+        setOnChangeData,
+        setOnLoadMore,
+    ]);
+    // [Group 11] Display / rendering options
+    (0, react_1.useEffect)(function () {
+        setShowLineNumber(props.showLineNumber);
+        setMsg(props.msg);
+        setRowClassName(props.getRowClassName);
+        setCellMergeOptions(props.cellMergeOptions);
+        setVariant(props.variant);
+        setSummary(props.summary);
+        setColumnSortable(props.columnSortable);
+        setReorder(props.reorder);
+        setClassName(props.className);
+        setStyle(props.style);
+    }, [
+        props.showLineNumber,
+        props.msg,
+        props.getRowClassName,
+        props.cellMergeOptions,
+        props.variant,
+        props.summary,
+        props.columnSortable,
+        props.reorder,
+        props.className,
+        props.style,
+        setShowLineNumber,
+        setMsg,
+        setRowClassName,
+        setCellMergeOptions,
+        setVariant,
+        setSummary,
+        setColumnSortable,
+        setReorder,
+        setClassName,
+        setStyle,
+    ]);
+    // [Group 11-1] Cell Navigation Options
+    (0, react_1.useEffect)(function () {
+        setCellNavigationOptions(props.cellNavigationOptions);
+    }, [props.cellNavigationOptions, setCellNavigationOptions]);
+    (0, react_1.useEffect)(function () {
+        syncActiveCellToBounds();
+    }, [
+        columns.length,
+        data.length,
+        (_q = (_p = props.cellNavigationOptions) === null || _p === void 0 ? void 0 : _p.activeCell) === null || _q === void 0 ? void 0 : _q.columnIndex,
+        (_s = (_r = props.cellNavigationOptions) === null || _r === void 0 ? void 0 : _r.activeCell) === null || _s === void 0 ? void 0 : _s.rowIndex,
+        (_u = (_t = props.cellNavigationOptions) === null || _t === void 0 ? void 0 : _t.defaultActiveCell) === null || _u === void 0 ? void 0 : _u.columnIndex,
+        (_w = (_v = props.cellNavigationOptions) === null || _v === void 0 ? void 0 : _v.defaultActiveCell) === null || _w === void 0 ? void 0 : _w.rowIndex,
+        syncActiveCellToBounds,
+    ]);
+    // setInitialized + DOM event bindings
+    (0, react_1.useEffect)(function () {
+        setInitialized(true);
+        var containerRefCurrent = containerRef.current;
+        var scrollContainerRefCurrent = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current;
+        if (scrollContainerRefCurrent) {
+            scrollContainerRefCurrent.removeEventListener('scroll', onScroll);
+            scrollContainerRefCurrent.addEventListener('scroll', onScroll, { passive: true, capture: true });
+            scrollContainerRefCurrent.removeEventListener('wheel', onWheel);
+            scrollContainerRefCurrent.addEventListener('wheel', onWheel, { passive: false, capture: true });
+        }
+        return function () {
+            if (scrollRafRef.current !== null) {
+                cancelAnimationFrame(scrollRafRef.current);
+                scrollRafRef.current = null;
+            }
+            if (scrollIdleTimerRef.current !== null) {
+                window.clearTimeout(scrollIdleTimerRef.current);
+                scrollIdleTimerRef.current = null;
+            }
+            containerRefCurrent === null || containerRefCurrent === void 0 ? void 0 : containerRefCurrent.removeAttribute('data-bgrid-scrolling');
+            scrollContainerRefCurrent === null || scrollContainerRefCurrent === void 0 ? void 0 : scrollContainerRefCurrent.removeEventListener('scroll', onScroll);
+            scrollContainerRefCurrent === null || scrollContainerRefCurrent === void 0 ? void 0 : scrollContainerRefCurrent.removeEventListener('wheel', onWheel);
+        };
+    }, [onScroll, onWheel, setInitialized]);
+    React.useLayoutEffect(function () {
+        if (!scrollContainerRef.current)
+            return;
+        if (props.scrollLeft !== undefined) {
+            scrollContainerRef.current.scrollLeft = props.scrollLeft;
+        }
+        if (props.scrollTop !== undefined) {
+            scrollContainerRef.current.scrollTop = props.scrollTop;
+        }
+    }, [props.scrollLeft, props.scrollTop]);
+    (0, react_1.useEffect)(function () {
+        latestCommittedScrollRef.current = { top: scrollTop, left: scrollLeft };
+    }, [scrollTop, scrollLeft]);
+    (0, react_1.useEffect)(function () {
+        return function () {
+            clearHoveredRow();
+        };
+    }, [clearHoveredRow]);
+    (0, react_1.useEffect)(function () {
+        if (!cellSelectionEnabled)
+            return;
+        var handlePointerUp = function () {
+            endCellSelectionDrag();
+        };
+        var handlePointerMove = function (evt) {
+            var _a, _b;
+            if (axisSelectionDragRef.current) {
+                var target = ((_b = (_a = document.elementFromPoint) === null || _a === void 0 ? void 0 : _a.call(document, evt.clientX, evt.clientY)) !== null && _b !== void 0 ? _b : null);
+                updateAxisSelectionByTarget(target);
+                return;
+            }
+            if (!cellSelectionDragRef.current)
+                return;
+            latestPointerRef.current = { clientX: evt.clientX, clientY: evt.clientY };
+            updateSelectionByPointer(evt.clientX, evt.clientY);
+            if (selectionAutoScrollRafRef.current === null) {
+                selectionAutoScrollRafRef.current = requestAnimationFrame(runSelectionAutoScroll);
+            }
+        };
+        document.addEventListener('pointermove', handlePointerMove);
+        document.addEventListener('pointerup', handlePointerUp);
+        document.addEventListener('pointercancel', handlePointerUp);
+        return function () {
+            document.removeEventListener('pointermove', handlePointerMove);
+            document.removeEventListener('pointerup', handlePointerUp);
+            document.removeEventListener('pointercancel', handlePointerUp);
+        };
+    }, [
+        cellSelectionEnabled,
+        endCellSelectionDrag,
+        runSelectionAutoScroll,
+        updateAxisSelectionByTarget,
+        updateSelectionByPointer,
+    ]);
+    (0, react_1.useEffect)(function () {
+        if (cellSelectionEnabled)
+            return;
+        endCellSelectionDrag();
+        clearCellSelection();
+    }, [cellSelectionEnabled, clearCellSelection, endCellSelectionDrag]);
+    var clearCellSelectionOnEscape = (_y = (_x = props.cellSelectionOptions) === null || _x === void 0 ? void 0 : _x.clearOnEscape) !== null && _y !== void 0 ? _y : true;
+    var clearCellSelectionOnOutsideClick = (_0 = (_z = props.cellSelectionOptions) === null || _z === void 0 ? void 0 : _z.clearOnOutsideClick) !== null && _0 !== void 0 ? _0 : true;
+    var keyboardRuntimeRef = (0, react_1.useRef)({
+        activeCell: activeCell,
+        cellInteractionSession: cellInteractionSession,
+        cellNavigationOptions: cellNavigationOptions,
+        cellSelectionEnabled: cellSelectionEnabled,
+        clearCellSelection: clearCellSelection,
+        clearCellSelectionOnEscape: clearCellSelectionOnEscape,
+        clearCellSelectionOnOutsideClick: clearCellSelectionOnOutsideClick,
+        columns: columns,
+        commitScroll: commitScroll,
+        copySelectedCells: copySelectedCells,
+        dataLength: data.length,
+        editable: editable,
+        editItemIndex: editItemIndex,
+        endCellSelectionDrag: endCellSelectionDrag,
+        frozenColumnIndex: (_1 = props.frozenColumnIndex) !== null && _1 !== void 0 ? _1 : 0,
+        frozenRowCount: frozenRowCount,
+        height: height,
+        handleClick: handleClick,
+        moveActiveCell: moveActiveCell,
+        openCellContextMenu: openCellContextMenu,
+        pasteClipboardText: pasteClipboardText,
+        selectAllCells: selectAllCells,
+        setEditItem: setEditItem,
+        requestSearchOpen: requestSearchOpen,
+        searchOpen: searchOpen,
+        searchOptions: searchOptions,
+        trHeight: trHeight,
+        viewportInsets: keyboardViewportInsets,
+    });
+    keyboardRuntimeRef.current = {
+        activeCell: activeCell,
+        cellInteractionSession: cellInteractionSession,
+        cellNavigationOptions: cellNavigationOptions,
+        cellSelectionEnabled: cellSelectionEnabled,
+        clearCellSelection: clearCellSelection,
+        clearCellSelectionOnEscape: clearCellSelectionOnEscape,
+        clearCellSelectionOnOutsideClick: clearCellSelectionOnOutsideClick,
+        columns: columns,
+        commitScroll: commitScroll,
+        copySelectedCells: copySelectedCells,
+        dataLength: data.length,
+        editable: editable,
+        editItemIndex: editItemIndex,
+        endCellSelectionDrag: endCellSelectionDrag,
+        frozenColumnIndex: (_2 = props.frozenColumnIndex) !== null && _2 !== void 0 ? _2 : 0,
+        frozenRowCount: frozenRowCount,
+        height: height,
+        handleClick: handleClick,
+        moveActiveCell: moveActiveCell,
+        openCellContextMenu: openCellContextMenu,
+        pasteClipboardText: pasteClipboardText,
+        selectAllCells: selectAllCells,
+        setEditItem: setEditItem,
+        requestSearchOpen: requestSearchOpen,
+        searchOpen: searchOpen,
+        searchOptions: searchOptions,
+        trHeight: trHeight,
+        viewportInsets: keyboardViewportInsets,
+    };
+    (0, react_1.useEffect)(function () {
+        var repeatingArrowKey;
+        var repeatingArrowShiftKey = false;
+        var arrowRepeatFrame;
+        var lastArrowRepeatTime = 0;
+        var stopArrowRepeat = function () {
+            repeatingArrowKey = undefined;
+            if (arrowRepeatFrame !== undefined) {
+                cancelAnimationFrame(arrowRepeatFrame);
+                arrowRepeatFrame = undefined;
+            }
+        };
+        var moveWithArrowKey = function (key, extendSelection, toBoundary) {
+            if (toBoundary === void 0) { toBoundary = false; }
+            var _a = keyboardRuntimeRef.current, activeCell = _a.activeCell, cellInteractionSession = _a.cellInteractionSession, cellNavigationOptions = _a.cellNavigationOptions, cellSelectionEnabled = _a.cellSelectionEnabled, columns = _a.columns, commitScroll = _a.commitScroll, dataLength = _a.dataLength, frozenColumnIndex = _a.frozenColumnIndex, frozenRowCount = _a.frozenRowCount, moveActiveCell = _a.moveActiveCell, trHeight = _a.trHeight, viewportInsets = _a.viewportInsets;
+            var container = containerRef.current;
+            var activeElement = document.activeElement;
+            if (!container ||
+                (activeElement !== container && !container.contains(activeElement)) ||
+                cellInteractionSession ||
+                (cellNavigationOptions === null || cellNavigationOptions === void 0 ? void 0 : cellNavigationOptions.enabled) === false ||
+                dataLength === 0 ||
+                columns.length === 0) {
+                return false;
+            }
+            var directionByKey = {
+                ArrowUp: 'up',
+                ArrowDown: 'down',
+                ArrowLeft: 'left',
+                ArrowRight: 'right',
+            };
+            var direction = directionByKey[key];
+            if (!direction)
+                return false;
+            var nextCell = moveActiveCell(direction, {
+                extendSelection: extendSelection,
+                toBoundary: toBoundary,
+                selectionEnabled: cellSelectionEnabled,
+            });
+            if (!nextCell)
+                return false;
+            var result = (0, coordinate_1.ensureCellVisible)({
+                cell: nextCell,
+                scrollContainer: scrollContainerRef.current,
+                frozenColumnCount: frozenColumnIndex,
+                frozenRowCount: frozenRowCount,
+                columns: columns,
+                rowHeight: trHeight,
+                viewportInsets: viewportInsets,
+            });
+            if (result.didScroll) {
+                commitScroll(result.scrollTop, result.scrollLeft);
+            }
+            return (activeCell === null || activeCell === void 0 ? void 0 : activeCell.rowIndex) !== nextCell.rowIndex || (activeCell === null || activeCell === void 0 ? void 0 : activeCell.columnIndex) !== nextCell.columnIndex;
+        };
+        var runArrowRepeatFrame = function (time) {
+            var _a, _b;
+            if (!repeatingArrowKey)
+                return;
+            var configuredInterval = (_b = (_a = keyboardRuntimeRef.current.cellNavigationOptions) === null || _a === void 0 ? void 0 : _a.keyRepeat) === null || _b === void 0 ? void 0 : _b.interval;
+            var repeatInterval = Math.max(8, Number.isFinite(configuredInterval) ? configuredInterval : DEFAULT_KEYBOARD_NAVIGATION_REPEAT_INTERVAL);
+            if (time - lastArrowRepeatTime >= repeatInterval) {
+                lastArrowRepeatTime = time;
+                if (!moveWithArrowKey(repeatingArrowKey, repeatingArrowShiftKey)) {
+                    stopArrowRepeat();
+                    return;
+                }
+            }
+            arrowRepeatFrame = requestAnimationFrame(runArrowRepeatFrame);
+        };
+        var startArrowRepeat = function (key, extendSelection) {
+            if (repeatingArrowKey === key && repeatingArrowShiftKey === extendSelection)
+                return;
+            stopArrowRepeat();
+            repeatingArrowKey = key;
+            repeatingArrowShiftKey = extendSelection;
+            lastArrowRepeatTime = performance.now();
+            arrowRepeatFrame = requestAnimationFrame(runArrowRepeatFrame);
+        };
+        var handleKeyDown = function (evt) {
+            var _a, _b, _c, _d, _e;
+            var _f = keyboardRuntimeRef.current, activeCell = _f.activeCell, cellInteractionSession = _f.cellInteractionSession, cellNavigationOptions = _f.cellNavigationOptions, cellSelectionEnabled = _f.cellSelectionEnabled, clearCellSelection = _f.clearCellSelection, clearCellSelectionOnEscape = _f.clearCellSelectionOnEscape, columns = _f.columns, commitScroll = _f.commitScroll, copySelectedCells = _f.copySelectedCells, dataLength = _f.dataLength, editable = _f.editable, editItemIndex = _f.editItemIndex, endCellSelectionDrag = _f.endCellSelectionDrag, frozenColumnIndex = _f.frozenColumnIndex, frozenRowCount = _f.frozenRowCount, height = _f.height, handleClick = _f.handleClick, moveActiveCell = _f.moveActiveCell, openCellContextMenu = _f.openCellContextMenu, selectAllCells = _f.selectAllCells, setEditItem = _f.setEditItem, requestSearchOpen = _f.requestSearchOpen, searchOpen = _f.searchOpen, searchOptions = _f.searchOptions, trHeight = _f.trHeight, viewportInsets = _f.viewportInsets;
+            var container = containerRef.current;
+            var activeElement = document.activeElement;
+            if (!container || (activeElement !== container && !container.contains(activeElement)))
+                return;
+            var isCtrlOrMeta = evt.ctrlKey || evt.metaKey;
+            var isFindShortcut = isCtrlOrMeta && evt.key.toLowerCase() === 'f';
+            if (isFindShortcut && searchOptions && searchOptions.enabled !== false && searchOptions.shortcut !== false) {
+                var targetInsideSearch = evt.target instanceof HTMLElement && !!evt.target.closest('.bgrid-search-popover');
+                if (!cellInteractionSession && (targetInsideSearch || !isInteractiveTarget(evt.target))) {
+                    evt.preventDefault();
+                    evt.stopPropagation();
+                    requestSearchOpen(true, 'shortcut');
+                    setTimeout(function () {
+                        var input = container.querySelector('.bgrid-search-input');
+                        input === null || input === void 0 ? void 0 : input.focus({ preventScroll: true });
+                        input === null || input === void 0 ? void 0 : input.select();
+                    }, searchOpen ? 0 : 1);
+                    return;
+                }
+            }
+            if (isInteractiveTarget(evt.target))
+                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 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();
+                    evt.stopPropagation();
+                    return;
+                }
+            }
+            // Escape key
+            if (evt.key === 'Escape' || evt.key === 'Esc') {
+                if (editItemIndex !== undefined && editItemIndex >= 0) {
+                    evt.preventDefault();
+                    setEditItem(-1, -1);
+                    return;
+                }
+                if (clearCellSelectionOnEscape) {
+                    evt.preventDefault();
+                    endCellSelectionDrag();
+                    clearCellSelection();
+                    return;
+                }
+            }
+            // Ctrl/Cmd + A, Ctrl/Cmd + C
+            if (isCtrlOrMeta) {
+                var key = evt.key.toLowerCase();
+                if (key === 'a') {
+                    if (!selectAllCells())
+                        return;
+                    evt.preventDefault();
+                    return;
+                }
+                if (key === 'c') {
+                    evt.preventDefault();
+                    void copySelectedCells();
+                    return;
+                }
+            }
+            // Cell Navigation
+            var navEnabled = (_a = cellNavigationOptions === null || cellNavigationOptions === void 0 ? void 0 : cellNavigationOptions.enabled) !== null && _a !== void 0 ? _a : true;
+            if (navEnabled && dataLength > 0 && columns.length > 0) {
+                var curCell = activeCell !== null && activeCell !== void 0 ? activeCell : { rowIndex: 0, columnIndex: 0 };
+                // F2: Start editing
+                if (evt.key === 'F2') {
+                    var col = columns[curCell.columnIndex];
+                    if (editable && (col === null || col === void 0 ? void 0 : col.editable) !== false) {
+                        evt.preventDefault();
+                        setEditItem(curCell.rowIndex, curCell.columnIndex);
+                        return;
+                    }
+                }
+                // Enter edits an editable cell; otherwise it activates the cell.
+                if (evt.key === 'Enter') {
+                    var col = columns[curCell.columnIndex];
+                    var editOnEnter = (_b = cellNavigationOptions === null || cellNavigationOptions === void 0 ? void 0 : cellNavigationOptions.editOnEnter) !== null && _b !== void 0 ? _b : true;
+                    if (editOnEnter &&
+                        editable &&
+                        (col === null || col === void 0 ? void 0 : col.editable) !== false &&
+                        (editItemIndex === undefined || editItemIndex < 0)) {
+                        evt.preventDefault();
+                        setEditItem(curCell.rowIndex, curCell.columnIndex);
+                        return;
+                    }
+                    evt.preventDefault();
+                    handleClick(curCell.rowIndex, curCell.columnIndex);
+                    return;
+                }
+                // Space activates the current cell without changing focus or edit state.
+                if (evt.key === ' ' || evt.key === 'Spacebar') {
+                    evt.preventDefault();
+                    handleClick(curCell.rowIndex, curCell.columnIndex);
+                    return;
+                }
+                // Tab / Shift+Tab
+                if (evt.key === 'Tab') {
+                    evt.preventDefault();
+                    var nextCell = moveActiveCell(isShift ? 'prev' : 'next', {
+                        extendSelection: false,
+                        selectionEnabled: cellSelectionEnabled,
+                    });
+                    if (nextCell) {
+                        var result = (0, coordinate_1.ensureCellVisible)({
+                            cell: nextCell,
+                            scrollContainer: scrollContainerRef.current,
+                            frozenColumnCount: frozenColumnIndex,
+                            frozenRowCount: frozenRowCount,
+                            columns: columns,
+                            rowHeight: trHeight,
+                            viewportInsets: viewportInsets,
+                        });
+                        if (result.didScroll) {
+                            commitScroll(result.scrollTop, result.scrollLeft);
+                        }
+                    }
+                    return;
+                }
+                // Arrow keys
+                if (evt.key === 'ArrowUp' || evt.key === 'ArrowDown' || evt.key === 'ArrowLeft' || evt.key === 'ArrowRight') {
+                    evt.preventDefault();
+                    var customRepeatEnabled = (_d = (_c = cellNavigationOptions === null || cellNavigationOptions === void 0 ? void 0 : cellNavigationOptions.keyRepeat) === null || _c === void 0 ? void 0 : _c.enabled) !== null && _d !== void 0 ? _d : true;
+                    if (evt.repeat && customRepeatEnabled && !isCtrlOrMeta) {
+                        if (!repeatingArrowKey) {
+                            moveWithArrowKey(evt.key, isShift);
+                            startArrowRepeat(evt.key, isShift);
+                        }
+                        else if (repeatingArrowKey === evt.key) {
+                            repeatingArrowShiftKey = isShift;
+                        }
+                        return;
+                    }
+                    stopArrowRepeat();
+                    moveWithArrowKey(evt.key, isShift, isCtrlOrMeta);
+                    return;
+                }
+                // Home / End
+                if (evt.key === 'Home' || evt.key === 'End') {
+                    evt.preventDefault();
+                    var direction = evt.key === 'Home' ? 'home' : 'end';
+                    var nextCell = moveActiveCell(direction, {
+                        extendSelection: isShift,
+                        toBoundary: isCtrlOrMeta,
+                        selectionEnabled: cellSelectionEnabled,
+                    });
+                    if (nextCell) {
+                        var result = (0, coordinate_1.ensureCellVisible)({
+                            cell: nextCell,
+                            scrollContainer: scrollContainerRef.current,
+                            frozenColumnCount: frozenColumnIndex,
+                            frozenRowCount: frozenRowCount,
+                            columns: columns,
+                            rowHeight: trHeight,
+                            viewportInsets: viewportInsets,
+                        });
+                        if (result.didScroll) {
+                            commitScroll(result.scrollTop, result.scrollLeft);
+                        }
+                    }
+                    return;
+                }
+                // PageUp / PageDown
+                if (evt.key === 'PageUp' || evt.key === 'PageDown') {
+                    evt.preventDefault();
+                    var direction = evt.key === 'PageUp' ? 'pageUp' : 'pageDown';
+                    var visibleBodyHeight = Math.max(0, (((_e = scrollContainerRef.current) === null || _e === void 0 ? void 0 : _e.clientHeight) || height) - viewportInsets.bottom);
+                    var pageSize = Math.max(1, Math.floor(visibleBodyHeight / trHeight));
+                    var nextCell = moveActiveCell(direction, {
+                        extendSelection: isShift,
+                        pageSize: pageSize,
+                        selectionEnabled: cellSelectionEnabled,
+                    });
+                    if (nextCell) {
+                        var result = (0, coordinate_1.ensureCellVisible)({
+                            cell: nextCell,
+                            scrollContainer: scrollContainerRef.current,
+                            frozenColumnCount: frozenColumnIndex,
+                            frozenRowCount: frozenRowCount,
+                            columns: columns,
+                            rowHeight: trHeight,
+                            viewportInsets: viewportInsets,
+                        });
+                        if (result.didScroll) {
+                            commitScroll(result.scrollTop, result.scrollLeft);
+                        }
+                    }
+                    return;
+                }
+            }
+        };
+        var handleKeyUp = function (evt) {
+            if (evt.key === repeatingArrowKey)
+                stopArrowRepeat();
+        };
+        var handleVisibilityChange = function () {
+            if (document.visibilityState !== 'visible')
+                stopArrowRepeat();
+        };
+        var handleCopy = function (evt) {
+            var container = containerRef.current;
+            var activeElement = document.activeElement;
+            if (!container || (activeElement !== container && !container.contains(activeElement)))
+                return;
+            if (isInteractiveTarget(evt.target))
+                return;
+            evt.preventDefault();
+            void keyboardRuntimeRef.current.copySelectedCells(evt);
+        };
+        var handlePaste = function (evt) {
+            var _a;
+            var container = containerRef.current;
+            var activeElement = document.activeElement;
+            if (!container || (activeElement !== container && !container.contains(activeElement)))
+                return;
+            if (keyboardRuntimeRef.current.editItemIndex !== undefined && keyboardRuntimeRef.current.editItemIndex >= 0) {
+                return;
+            }
+            if (isInteractiveTarget(evt.target))
+                return;
+            var text = (_a = evt.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text/plain');
+            if (text === undefined)
+                return;
+            if (keyboardRuntimeRef.current.pasteClipboardText(text)) {
+                evt.preventDefault();
+            }
+        };
+        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)) ||
+                isPointInsideElement(container, evt.clientX, evt.clientY)) {
+                return;
+            }
+            endCellSelectionDrag();
+            clearCellSelection();
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        document.addEventListener('keyup', handleKeyUp);
+        document.addEventListener('copy', handleCopy);
+        document.addEventListener('paste', handlePaste);
+        document.addEventListener('pointerdown', handlePointerDown, true);
+        document.addEventListener('visibilitychange', handleVisibilityChange);
+        window.addEventListener('blur', stopArrowRepeat);
+        return function () {
+            stopArrowRepeat();
+            document.removeEventListener('keydown', handleKeyDown);
+            document.removeEventListener('keyup', handleKeyUp);
+            document.removeEventListener('copy', handleCopy);
+            document.removeEventListener('paste', handlePaste);
+            document.removeEventListener('pointerdown', handlePointerDown, true);
+            document.removeEventListener('visibilitychange', handleVisibilityChange);
+            window.removeEventListener('blur', stopArrowRepeat);
+        };
+    }, []);
+    return (React.createElement(EditorPortalRoot_1.EditorPortalContext.Provider, { value: editorPortalContext },
+        React.createElement(Container, { ref: containerRef, role: 'grid', style: __assign(__assign({}, style), { width: width, height: height, borderWidth: "".concat(containerBorderWidth, "px") }), className: className, tabIndex: 0, onFocus: function (event) {
+                if (event.target !== event.currentTarget)
+                    return;
+                var gateway = event.currentTarget.querySelector('[data-bgrid-text-editor-gateway="true"]');
+                if (gateway instanceof HTMLInputElement) {
+                    gateway.focus({ preventScroll: true });
+                }
+            }, "data-scroll-variant": scrollbar.variant, "data-vertical-scrollbar": scrollbar.variant !== 'native' && scrollbar.vertical.visible ? 'visible' : 'hidden', "data-bgrid-cell-selection-enabled": cellSelectionEnabled ? 'true' : 'false', "data-bgrid-frozen-columns": ((_3 = props.frozenColumnIndex) !== null && _3 !== void 0 ? _3 : 0) > 0 ? 'true' : 'false' },
+            scrollbar.variant !== 'native' && scrollbar.vertical.visible && (React.createElement("div", { className: 'bgrid-vertical-scrollbar-gutter', "aria-hidden": 'true' })),
+            scrollbar.variant !== 'native' && scrollbar.vertical.visible && (React.createElement("div", { className: 'bgrid-vertical-scrollbar-area', style: {
+                    top: 0,
+                    bottom: showBottomBar ? bottomBarHeight : 0,
+                } },
+                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) {
+                    if (isInteractiveTarget(event.target))
+                        return;
+                    var cell = getCellPosition(event.target, containerRef.current);
+                    if (!cell)
+                        return;
+                    if (openCellContextMenu(cell, event.clientX, event.clientY, false)) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                    }
+                } },
+                React.createElement(ScrollPlane, { style: { height: scrollPlaneHeight, minWidth: scrollPlaneMinWidth } },
+                    React.createElement(HeaderContainer, { style: { height: headerHeight, top: 0 }, role: 'rfdg-header-container' },
+                        (frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0) > 0 && (React.createElement(FrozenHeader, { style: { width: frozenColumnsWidth }, role: 'rfdg-frozen-header' },
+                            React.createElement(TableHeadFrozen_1.default, { container: containerRef }))),
+                        React.createElement(Header, { style: { left: frozenColumnsWidth }, role: 'rfdg-header' },
+                            React.createElement(TableHead_1.default, { container: containerRef }))),
+                    summary && summary.position === 'top' && (React.createElement(SummaryContainer, { position: 'top', style: { height: summaryHeight, top: headerHeight }, role: 'rfdg-summary-container' },
+                        (frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0) > 0 && (React.createElement(FrozenSummary, { style: { width: frozenColumnsWidth }, role: 'rfdg-frozen-summary' },
+                            React.createElement(TableSummaryFronzen_1.TableSummaryFrozen, { position: 'top' }))),
+                        React.createElement(Summary, { style: { left: frozenColumnsWidth }, role: 'rfdg-summary' },
+                            React.createElement(TableSummary_1.TableSummary, { position: 'top' })))),
+                    React.createElement("div", { className: 'bgrid-body-scroll-content', style: { height: frozenRowsHeight + visibleScrollableRows.scrollContentHeight } },
+                        frozenRowCount > 0 && (React.createElement("div", { className: 'bgrid-frozen-rows-layer', style: { height: frozenRowsHeight, top: stickyTopHeight }, "data-bgrid-row-band": 'frozen' },
+                            (frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0) > 0 && (React.createElement("div", { className: 'bgrid-frozen-rows-left bgrid-frozen-column-boundary', style: { width: frozenColumnsWidth }, role: 'rfdg-frozen-rows-left' },
+                                React.createElement(TableBodyFrozen_1.default, { 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, { scrollContainerRef: scrollContainerRef, rowRange: frozenRowRange, role: 'rfdg-body-top', quadrant: 'top-main', allowRowReorder: false }),
+                                renderSelectionOverlay('top-main')))),
+                        React.createElement("div", { className: 'bgrid-scrollable-rows-layer', style: { height: visibleScrollableRows.scrollContentHeight }, "data-bgrid-row-band": 'scrollable' },
+                            (frozenColumnsWidth !== null && frozenColumnsWidth !== void 0 ? frozenColumnsWidth : 0) > 0 && (React.createElement(FrozenScrollContent, { style: {
+                                    width: frozenColumnsWidth,
+                                    height: visibleScrollableRows.scrollContentHeight,
+                                }, role: 'rfdg-frozen-scroll-container' },
+                                React.createElement(TableBodyFrozen_1.default, { scrollContainerRef: scrollContainerRef, rowRange: scrollableRowRange, style: frozenScrollableBodyStyle, quadrant: 'body-left', onRowReorderPointerDown: rowReorderController.onPointerDown, onRowReorderKeyDown: rowReorderController.onKeyDown }),
+                                renderSelectionOverlay('body-left'))),
+                            React.createElement(ScrollContent, { style: {
+                                    left: frozenColumnsWidth,
+                                    paddingTop: visibleScrollableRows.paddingTop,
+                                    height: visibleScrollableRows.scrollContentHeight,
+                                } },
+                                React.createElement(TableBody_1.default, { scrollContainerRef: scrollContainerRef, rowRange: scrollableRowRange, quadrant: 'body-main' }),
+                                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' },
+                            React.createElement(TableSummaryFronzen_1.TableSummaryFrozen, { position: 'bottom' }))),
+                        React.createElement(Summary, { style: { left: frozenColumnsWidth }, role: 'rfdg-summary' },
+                            React.createElement(TableSummary_1.TableSummary, { position: 'bottom' })))))),
+            React.createElement(BodyViewport, { ref: bodyContainerRef, style: { top: stickyTopHeight, height: contentBodyHeight }, "data-last": !page ? 'true' : undefined },
+                ((_4 = rowReorderController.preview) === null || _4 === void 0 ? void 0 : _4.visible) && (React.createElement("div", { className: 'bgrid-row-reorder-preview', "data-bgrid-row-reorder-phase": rowReorderController.preview.phase, "aria-hidden": 'true' }, rowReorderController.preview.text)),
+                React.createElement(Loading_1.default, { active: !!spinning, size: 'small' })),
+            React.createElement("div", { className: 'bgrid-visually-hidden', role: 'status', "aria-live": 'polite', "aria-atomic": 'true' }, rowReorderController.announcement),
+            React.createElement(CellTextEditorGateway_1.CellTextEditorGateway, { containerRef: containerRef }),
+            React.createElement(CellNavigationDomSync_1.CellNavigationDomSync, { containerRef: containerRef, activeCell: activeLogicalCell === null || activeLogicalCell === void 0 ? void 0 : activeLogicalCell.cell, cellSelectionRanges: cellSelectionRanges, hasMultiCellSelection: hasMultiCellSelection, rowCount: data.length, columnCount: columns.length }),
+            (searchSurfaceEnabled || contextMenuSurfaceEnabled) && (React.createElement(React.Suspense, { fallback: null },
+                React.createElement(LazyGridOptionalSurfaces, { gridRef: containerRef, searchPopoverRef: searchPopoverRef, searchEnabled: searchSurfaceEnabled, contextMenuEnabled: contextMenuSurfaceEnabled }))),
+            React.createElement(EditorPortalRoot_1.EditorPortalRoot, { gridRef: containerRef, portalRef: editorPortalRef }),
+            showBottomBar && (React.createElement(FooterContainer, { style: { height: bottomBarHeight }, role: 'rfdg-footer-container' },
+                React.createElement(TableFooter_1.default, { horizontalMetrics: scrollbarMetrics.horizontal, scrollLeft: scrollLeft, onScrollLeftChange: handleScrollLeftChange }))),
+            React.createElement(Loading_1.default, { active: loading }))));
+}
+function getAxisSelectionTarget(target, container) {
+    if (!target || !container)
+        return undefined;
+    var lineNumberCell = target.closest('.bgrid-line-number-cell[data-row-index]');
+    if (lineNumberCell instanceof HTMLElement && container.contains(lineNumberCell)) {
+        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))
+        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'))
+        return undefined;
+    var columnIndex = Number(headerCell.dataset.columnIndex);
+    if (!Number.isFinite(columnIndex))
+        return undefined;
+    var columnSpan = headerCell.dataset.headerCellType === 'group' ? Math.max(headerCell.colSpan || 1, 1) : 1;
+    return {
+        axis: 'column',
+        startIndex: columnIndex,
+        endIndex: columnIndex + columnSpan - 1,
+    };
+}
+function getAxisSelectionRange(_a) {
+    var axis = _a.axis, startIndex = _a.startIndex, endIndex = _a.endIndex, rowCount = _a.rowCount, columnCount = _a.columnCount;
+    if (axis === 'row') {
+        return {
+            startRowIndex: startIndex,
+            endRowIndex: endIndex,
+            startColumnIndex: 0,
+            endColumnIndex: Math.max(columnCount - 1, 0),
+        };
+    }
+    return {
+        startRowIndex: 0,
+        endRowIndex: Math.max(rowCount - 1, 0),
+        startColumnIndex: startIndex,
+        endColumnIndex: endIndex,
+    };
+}
+function updateAxisSelectionDragRange(dragState, activeRange) {
+    var nextRanges = __spreadArray([], __read(dragState.baseRanges), false);
+    nextRanges[dragState.activeRangeIndex] = 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)))
+        return undefined;
+    var rowIndex = Number(cell.dataset.rowIndex);
+    var columnIndex = Number(cell.dataset.columnIndex);
+    if (Number.isNaN(rowIndex) || Number.isNaN(columnIndex))
+        return undefined;
+    var rowSpan = cell instanceof HTMLTableCellElement ? Math.max(cell.rowSpan || 1, 1) : 1;
+    return { rowIndex: rowIndex, columnIndex: columnIndex, rowSpan: rowSpan };
+}
+function getCellPositionFromPointer(_a) {
+    var clientX = _a.clientX, clientY = _a.clientY, bodyContainer = _a.bodyContainer, scrollContainer = _a.scrollContainer, metrics = _a.metrics;
+    if (!bodyContainer || !scrollContainer || metrics.columns.length === 0 || metrics.dataLength === 0)
+        return undefined;
+    var scrollRect = scrollContainer.getBoundingClientRect();
+    var bodyRect = bodyContainer.getBoundingClientRect();
+    var frozenRowsBottom = bodyRect.top + metrics.frozenRowsHeight;
+    var rowIndex = metrics.frozenRowCount > 0 && clientY < frozenRowsBottom
+        ? (0, coordinate_1.clamp)(Math.floor((clientY - bodyRect.top) / metrics.trHeight), 0, metrics.frozenRowCount - 1)
+        : (0, coordinate_1.clamp)(metrics.frozenRowCount +
+            Math.floor((scrollContainer.scrollTop +
+                (0, coordinate_1.clamp)(clientY - scrollRect.top, 0, Math.max(scrollContainer.clientHeight - 1, 0))) /
+                metrics.trHeight), 0, metrics.dataLength - 1);
+    var columnIndex = getColumnIndexFromPointer({
+        clientX: clientX,
+        bodyContainer: bodyContainer,
+        scrollContainer: scrollContainer,
+        metrics: metrics,
+    });
+    if (columnIndex === undefined)
+        return undefined;
+    return {
+        rowIndex: rowIndex,
+        columnIndex: columnIndex,
+        rowSpan: 1,
+    };
+}
+function getColumnIndexFromPointer(_a) {
+    var _b, _c, _d, _e;
+    var clientX = _a.clientX, bodyContainer = _a.bodyContainer, scrollContainer = _a.scrollContainer, metrics = _a.metrics;
+    var scrollRect = scrollContainer.getBoundingClientRect();
+    if (clientX < scrollRect.left && metrics.frozenColumnIndex > 0) {
+        var bodyRect = bodyContainer.getBoundingClientRect();
+        var frozenX = (0, coordinate_1.clamp)(clientX - bodyRect.left, 0, Math.max(metrics.frozenColumnsWidth - 1, 0));
+        var left = 0;
+        for (var ci = 0; ci < metrics.frozenColumnIndex; ci++) {
+            var width = (_c = (_b = metrics.columns[ci]) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : 100;
+            if (frozenX < left + width)
+                return ci;
+            left += width;
+        }
+        return Math.min(metrics.frozenColumnIndex - 1, metrics.columns.length - 1);
+    }
+    var normalX = scrollContainer.scrollLeft + (0, coordinate_1.clamp)(clientX - scrollRect.left, 0, Math.max(scrollContainer.clientWidth - 1, 0));
+    for (var ci = metrics.frozenColumnIndex; ci < metrics.columns.length; ci++) {
+        var column = metrics.columns[ci];
+        var left = (_d = column.left) !== null && _d !== void 0 ? _d : 0;
+        var width = (_e = column.width) !== null && _e !== void 0 ? _e : 100;
+        if (normalX < left + width)
+            return ci;
+    }
+    return metrics.columns.length - 1;
+}
+function updateSelectionDragRange(dragState, activeRange) {
+    var nextRanges = __spreadArray([], __read(dragState.baseRanges), false);
+    nextRanges[dragState.activeRangeIndex] = activeRange;
+    return nextRanges;
+}
+function getRangeFromDrag(dragState, cellPosition) {
+    var isDraggingUp = cellPosition.rowIndex < dragState.startRowIndex;
+    return {
+        startRowIndex: isDraggingUp ? dragState.startRowIndex + dragState.startRowSpan - 1 : dragState.startRowIndex,
+        startColumnIndex: dragState.startColumnIndex,
+        endRowIndex: getSelectionEndRowIndex(dragState.startRowIndex, cellPosition),
+        endColumnIndex: cellPosition.columnIndex,
+    };
+}
+function getSelectionEndRowIndex(startRowIndex, cellPosition) {
+    if (cellPosition.rowIndex < startRowIndex)
+        return cellPosition.rowIndex;
+    return cellPosition.rowIndex + cellPosition.rowSpan - 1;
+}
+function getSelectedCellMap(ranges, rowCount, columnCount) {
+    var selectedCells = new Map();
+    ranges.forEach(function (range) {
+        var _a;
+        var normalizedRange = (0, cellSelectionGeometry_1.normalizeCellSelectionRange)(range);
+        var startRowIndex = rowCount === undefined ? normalizedRange.startRowIndex : (0, coordinate_1.clamp)(normalizedRange.startRowIndex, 0, rowCount - 1);
+        var endRowIndex = rowCount === undefined ? normalizedRange.endRowIndex : (0, coordinate_1.clamp)(normalizedRange.endRowIndex, 0, rowCount - 1);
+        var startColumnIndex = columnCount === undefined
+            ? normalizedRange.startColumnIndex
+            : (0, coordinate_1.clamp)(normalizedRange.startColumnIndex, 0, columnCount - 1);
+        var endColumnIndex = columnCount === undefined
+            ? normalizedRange.endColumnIndex
+            : (0, coordinate_1.clamp)(normalizedRange.endColumnIndex, 0, columnCount - 1);
+        if (startRowIndex > endRowIndex || startColumnIndex > endColumnIndex)
+            return;
+        for (var ri = startRowIndex; ri <= endRowIndex; ri++) {
+            var columnIndexes = (_a = selectedCells.get(ri)) !== null && _a !== void 0 ? _a : new Set();
+            for (var ci = startColumnIndex; ci <= endColumnIndex; ci++) {
+                columnIndexes.add(ci);
+            }
+            selectedCells.set(ri, columnIndexes);
+        }
+    });
+    return selectedCells;
+}
+function getSelectionCellCount(ranges, rowCount, columnCount) {
+    if (rowCount <= 0 || columnCount <= 0)
+        return 0;
+    return ranges.reduce(function (count, range) {
+        var normalizedRange = (0, cellSelectionGeometry_1.normalizeCellSelectionRange)(range);
+        var startRowIndex = (0, coordinate_1.clamp)(normalizedRange.startRowIndex, 0, rowCount - 1);
+        var endRowIndex = (0, coordinate_1.clamp)(normalizedRange.endRowIndex, 0, rowCount - 1);
+        var startColumnIndex = (0, coordinate_1.clamp)(normalizedRange.startColumnIndex, 0, columnCount - 1);
+        var endColumnIndex = (0, coordinate_1.clamp)(normalizedRange.endColumnIndex, 0, columnCount - 1);
+        if (startRowIndex > endRowIndex || startColumnIndex > endColumnIndex)
+            return count;
+        return count + (endRowIndex - startRowIndex + 1) * (endColumnIndex - startColumnIndex + 1);
+    }, 0);
+}
+function warnClipboardLimitExceeded(reason, actual, limit) {
+    if (typeof console === 'undefined')
+        return;
+    if (limit === undefined || actual === undefined) {
+        console.warn("[BGrid] Clipboard copy failed. reason: ".concat(reason));
+        return;
+    }
+    console.warn("[BGrid] Clipboard copy skipped because ".concat(reason, " (").concat(actual.toLocaleString(), ") exceeds the configured limit (").concat(limit.toLocaleString(), ")."));
+}
+function warnClipboardPasteFailed(reason, actual, limit) {
+    if (typeof console === 'undefined')
+        return;
+    if (limit === undefined || actual === undefined) {
+        console.warn("[BGrid] Clipboard paste skipped. reason: ".concat(reason));
+        return;
+    }
+    console.warn("[BGrid] Clipboard paste skipped because ".concat(reason, " (").concat(actual.toLocaleString(), ") exceeds the configured limit (").concat(limit.toLocaleString(), ")."));
+}
+function parseClipboardText(text) {
+    var normalizedText = text.replace(/\r\n?/g, '\n');
+    var withoutTrailingLineBreak = normalizedText.endsWith('\n') ? normalizedText.slice(0, -1) : normalizedText;
+    return withoutTrailingLineBreak.split('\n').map(function (row) { return row.split('\t'); });
+}
+function setCellValueByRowKey(key, values, value) {
+    if (!Array.isArray(key)) {
+        values[key] = value;
+        return;
+    }
+    var target = values;
+    key.forEach(function (path, index) {
+        if (index === key.length - 1) {
+            target[path] = value;
+            return;
+        }
+        if (target[path] === undefined || target[path] === null || typeof target[path] !== 'object') {
+            target[path] = {};
+        }
+        target = target[path];
+    });
+}
+function getSelectionAutoScrollDelta(clientX, clientY, bodyContainer, scrollContainer) {
+    var threshold = 36;
+    var maxStep = 28;
+    var bodyRect = bodyContainer.getBoundingClientRect();
+    var scrollRect = scrollContainer.getBoundingClientRect();
+    return {
+        x: getAutoScrollStep(clientX, scrollRect.left, scrollRect.right, threshold, maxStep),
+        y: getAutoScrollStep(clientY, bodyRect.top, bodyRect.bottom, threshold, maxStep),
+    };
+}
+function getAutoScrollStep(position, min, max, threshold, maxStep) {
+    if (position < min + threshold) {
+        return -Math.ceil(((0, coordinate_1.clamp)(min + threshold - position, 0, threshold * 2) / (threshold * 2)) * maxStep);
+    }
+    if (position > max - threshold) {
+        return Math.ceil(((0, coordinate_1.clamp)(position - (max - threshold), 0, threshold * 2) / (threshold * 2)) * maxStep);
+    }
+    return 0;
+}
+function isInteractiveTarget(target) {
+    if (!(target instanceof HTMLElement))
+        return false;
+    if (target.closest('[data-bgrid-text-editor-gateway="true"]'))
+        return false;
+    return !!target.closest('input, textarea, select, button, [contenteditable="true"], [contenteditable=""]');
+}
+function normalizeContextMenuItems(items, onDuplicateId) {
+    var _a;
+    var seen = new Set();
+    var unique = items.filter(function (item) {
+        if (seen.has(item.id)) {
+            onDuplicateId(item.id);
+            return false;
+        }
+        seen.add(item.id);
+        return true;
+    });
+    var normalized = [];
+    unique.forEach(function (item) {
+        var _a;
+        if (item.type === 'separator') {
+            if (normalized.length === 0 || ((_a = normalized[normalized.length - 1]) === null || _a === void 0 ? void 0 : _a.type) === 'separator')
+                return;
+        }
+        normalized.push(item);
+    });
+    if (((_a = normalized[normalized.length - 1]) === null || _a === void 0 ? void 0 : _a.type) === 'separator')
+        normalized.pop();
+    return normalized;
+}
+function areDataQueriesEqual(previous, next) {
+    if (previous === next)
+        return true;
+    if (!previous || !next || previous.sortParams.length !== next.sortParams.length)
+        return false;
+    var sortParamsEqual = previous.sortParams.every(function (sort, index) {
+        var candidate = next.sortParams[index];
+        return (!!candidate &&
+            sort.columnId === candidate.columnId &&
+            sort.key === candidate.key &&
+            sort.index === candidate.index &&
+            sort.orderBy === candidate.orderBy);
+    });
+    return sortParamsEqual && areFilterParamsEqual(previous.filterParams, next.filterParams);
+}
+function areFilterParamsEqual(previous, next) {
+    if (previous === next)
+        return true;
+    if (!previous || !next || previous.length !== next.length)
+        return false;
+    return previous.every(function (filter, index) {
+        var candidate = next[index];
+        if (!candidate || filter.columnId !== candidate.columnId || filter.type !== candidate.type)
+            return false;
+        if (!areColumnKeysEqual(filter.key, candidate.key))
+            return false;
+        if (filter.type === 'values' && candidate.type === 'values') {
+            return (filter.values.length === candidate.values.length &&
+                filter.values.every(function (value, valueIndex) { return Object.is(value, candidate.values[valueIndex]); }));
+        }
+        if (filter.type === 'text' && candidate.type === 'text') {
+            return filter.operator === candidate.operator && filter.value === candidate.value;
+        }
+        if (filter.type === 'number' && candidate.type === 'number') {
+            return (filter.operator === candidate.operator &&
+                Object.is(filter.value, candidate.value) &&
+                Object.is(filter.min, candidate.min) &&
+                Object.is(filter.max, candidate.max));
+        }
+        return false;
+    });
+}
+function areColumnKeysEqual(previous, next) {
+    if (previous === next)
+        return true;
+    if (!Array.isArray(previous) || !Array.isArray(next) || previous.length !== next.length)
+        return false;
+    return previous.every(function (key, index) { return key === next[index]; });
+}
+function isPointInsideElement(element, clientX, clientY) {
+    var rect = element.getBoundingClientRect();
+    if (rect.width <= 0 || rect.height <= 0)
+        return false;
+    return clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom;
+}
+function toClipboardText(value) {
+    if (value === null || value === undefined)
+        return '';
+    if (typeof value === 'string')
+        return value;
+    if (typeof value === 'number' || typeof value === 'boolean' || typeof value === 'bigint')
+        return String(value);
+    if (value instanceof Date)
+        return value.toISOString();
+    try {
+        return JSON.stringify(value);
+    }
+    catch (_a) {
+        return String(value);
+    }
+}
+function copyTextFallback(text) {
+    if (typeof document.execCommand !== 'function')
+        return false;
+    var textarea = document.createElement('textarea');
+    textarea.value = text;
+    textarea.setAttribute('readonly', 'true');
+    textarea.style.position = 'fixed';
+    textarea.style.left = '-9999px';
+    textarea.style.top = '-9999px';
+    document.body.appendChild(textarea);
+    textarea.select();
+    var copied = document.execCommand('copy');
+    document.body.removeChild(textarea);
+    return copied;
+}
+var Container = React.forwardRef(function (props, ref) {
+    var _a;
+    return React.createElement("div", __assign({ ref: ref }, props, { className: ['bgrid-root', (_a = props.className) !== null && _a !== void 0 ? _a : ''].filter(Boolean).join(' ') }));
+});
+function HeaderContainer(props) {
+    var _a;
+    return React.createElement("div", __assign({}, props, { className: ['bgrid-header-container', (_a = props.className) !== null && _a !== void 0 ? _a : ''].filter(Boolean).join(' ') }));
+}
+var Header = React.forwardRef(function (props, ref) {
+    var _a;
+    return (React.createElement("div", __assign({ ref: ref }, props, { className: ['bgrid-header-scroll-content', (_a = props.className) !== null && _a !== void 0 ? _a : ''].filter(Boolean).join(' ') })));
+});
+function FrozenHeader(props) {
+    var _a;
+    return (React.createElement("div", __assign({}, props, { className: ['bgrid-header-frozen', 'bgrid-frozen-column-boundary', (_a = props.className) !== null && _a !== void 0 ? _a : '']
+            .filter(Boolean)
+            .join(' ') })));
+}
+var BodyViewport = React.forwardRef(function (props, ref) {
+    var _a;
+    return (React.createElement("div", __assign({ ref: ref }, props, { className: ['bgrid-body-container', 'bgrid-body-viewport', (_a = props.className) !== null && _a !== void 0 ? _a : ''].filter(Boolean).join(' ') })));
+});
+var ScrollContainer = React.forwardRef(function (props, ref) {
+    var _a;
+    return (React.createElement("div", __assign({ ref: ref }, props, { className: ['bgrid-scroll-container', (_a = props.className) !== null && _a !== void 0 ? _a : ''].filter(Boolean).join(' ') })));
+});
+var ScrollPlane = React.forwardRef(function (props, ref) {
+    var _a;
+    return (React.createElement("div", __assign({ ref: ref }, props, { className: ['bgrid-scroll-plane', (_a = props.className) !== null && _a !== void 0 ? _a : ''].filter(Boolean).join(' ') })));
+});
+var ScrollContent = React.forwardRef(function (props, ref) {
+    var _a;
+    return (React.createElement("div", __assign({ ref: ref }, props, { className: ['bgrid-scroll-content', (_a = props.className) !== null && _a !== void 0 ? _a : ''].filter(Boolean).join(' ') })));
+});
+var FrozenScrollContent = React.forwardRef(function (props, ref) {
+    var _a;
+    return (React.createElement("div", __assign({ ref: ref }, props, { className: [
+            'bgrid-frozen-body-boundary',
+            'bgrid-frozen-column-boundary',
+            'bgrid-frozen-scroll-content',
+            (_a = props.className) !== null && _a !== void 0 ? _a : '',
+        ]
+            .filter(Boolean)
+            .join(' ') })));
+});
+function FooterContainer(props) {
+    var _a;
+    return React.createElement("div", __assign({}, props, { className: ['bgrid-footer-container', (_a = props.className) !== null && _a !== void 0 ? _a : ''].filter(Boolean).join(' ') }));
+}
+function SummaryContainer(_a) {
+    var position = _a.position, className = _a.className, rest = __rest(_a, ["position", "className"]);
+    void position;
+    return React.createElement("div", __assign({}, rest, { className: ['bgrid-summary-container', className !== null && className !== void 0 ? className : ''].filter(Boolean).join(' ') }));
+}
+var Summary = React.forwardRef(function (props, ref) {
+    var _a;
+    return (React.createElement("div", __assign({ ref: ref }, props, { className: ['bgrid-summary-scroll-content', (_a = props.className) !== null && _a !== void 0 ? _a : ''].filter(Boolean).join(' ') })));
+});
+function FrozenSummary(props) {
+    var _a;
+    return (React.createElement("div", __assign({}, props, { className: ['bgrid-summary-frozen', 'bgrid-frozen-column-boundary', (_a = props.className) !== null && _a !== void 0 ? _a : '']
+            .filter(Boolean)
+            .join(' ') })));
+}
+ScrollContainer.displayName = 'ScrollContainer';
+ScrollPlane.displayName = 'ScrollPlane';
+ScrollContent.displayName = 'ScrollContent';
+FrozenScrollContent.displayName = 'FrozenScrollContent';
+Container.displayName = 'Container';
+BodyViewport.displayName = 'BodyViewport';
+Summary.displayName = 'Summary';
+Header.displayName = 'Header';
+exports.default = Table;