@rowsncolumns/spreadsheet 10.3.0 → 10.4.0

package/dist/cjs/hooks/use-selection.js

@@ -9,6 +9,7 @@ var grid_4 = require("@rowsncolumns/grid");
 var react_1 = require("react");
 var scheduler_1 = require("../api/scheduler");
 var move_overwrite_1 = require("../api/move-overwrite");
+var table_1 = require("../api/table");
 var config_1 = require("../config");
 var helpers_1 = require("../helpers");
 var use_callback_ref_1 = require("./use-callback-ref");
@@ -98,7 +99,7 @@ var defaultConfirmMoveOverwrite = function (message) {
         : window.confirm(message);
 };
 var useSelection = function (_a) {
-    var sheetId = _a.sheetId, activeCell = _a.activeCell, onChangeActiveCell = _a.onChangeActiveCell, selections = _a.selections, onChangeSelections = _a.onChangeSelections, _b = _a.columnCount, columnCount = _b === void 0 ? 0 : _b, _c = _a.rowCount, rowCount = _c === void 0 ? 0 : _c, _d = _a.selectionPolicy, selectionPolicy = _d === void 0 ? "multiple" : _d, _e = _a.newSelectionMode, newSelectionMode = _e === void 0 ? "clear" : _e, _f = _a.allowDeselectSelection, allowDeselectSelection = _f === void 0 ? true : _f, onFill = _a.onFill, onFillHandleRelease = _a.onFillHandleRelease, onFillShrink = _a.onFillShrink, onInsertCutCells = _a.onInsertCutCells, _g = _a.confirmMoveOverwrite, confirmMoveOverwrite = _g === void 0 ? defaultConfirmMoveOverwrite : _g, _h = _a.isHiddenRow, isHiddenRow = _h === void 0 ? defaultIsHidden : _h, _j = _a.isHiddenColumn, isHiddenColumn = _j === void 0 ? defaultIsHidden : _j, _k = _a.alwaysScrollToActiveCell, alwaysScrollToActiveCell = _k === void 0 ? true : _k, _l = _a.selectionTopBound, selectionTopBound = _l === void 0 ? 0 : _l, _m = _a.selectionBottomBound, selectionBottomBound = _m === void 0 ? rowCount : _m, _o = _a.selectionLeftBound, selectionLeftBound = _o === void 0 ? 0 : _o, _p = _a.selectionRightBound, selectionRightBound = _p === void 0 ? columnCount : _p, mouseDownInterceptor = _a.mouseDownInterceptor, mouseMoveInterceptor = _a.mouseMoveInterceptor, _q = _a.mergedCells, mergedCells = _q === void 0 ? config_1.DEFAULT_ARRAY : _q, _r = _a.canSelectionSpanMergedCells, canSelectionSpanMergedCells = _r === void 0 ? defaultSelectionSpan : _r, getValue = _a.getValue, onMoveSelection = _a.onMoveSelection, getCellCoordsFromOffset = _a.getCellCoordsFromOffset, getCellBounds = _a.getCellBounds, getViewPort = _a.getViewPort, focus = _a.focus, scrollToCell = _a.scrollToCell, isMergedCell = _a.isMergedCell, enableSelectOnEnterKey = _a.enableSelectOnEnterKey, formulaMode = _a.formulaMode, isTouchDevice = _a.isTouchDevice, getDataRowCount = _a.getDataRowCount, isRowHeader = _a.isRowHeader, isColumnHeader = _a.isColumnHeader, _s = _a.enableDataBoundaryNavigation, enableDataBoundaryNavigation = _s === void 0 ? false : _s;
+    var sheetId = _a.sheetId, activeCell = _a.activeCell, onChangeActiveCell = _a.onChangeActiveCell, selections = _a.selections, onChangeSelections = _a.onChangeSelections, _b = _a.columnCount, columnCount = _b === void 0 ? 0 : _b, _c = _a.rowCount, rowCount = _c === void 0 ? 0 : _c, _d = _a.selectionPolicy, selectionPolicy = _d === void 0 ? "multiple" : _d, _e = _a.newSelectionMode, newSelectionMode = _e === void 0 ? "clear" : _e, _f = _a.allowDeselectSelection, allowDeselectSelection = _f === void 0 ? true : _f, onFill = _a.onFill, onFillHandleRelease = _a.onFillHandleRelease, onFillShrink = _a.onFillShrink, onInsertCutCells = _a.onInsertCutCells, _g = _a.confirmMoveOverwrite, confirmMoveOverwrite = _g === void 0 ? defaultConfirmMoveOverwrite : _g, _h = _a.isHiddenRow, isHiddenRow = _h === void 0 ? defaultIsHidden : _h, _j = _a.isHiddenColumn, isHiddenColumn = _j === void 0 ? defaultIsHidden : _j, _k = _a.alwaysScrollToActiveCell, alwaysScrollToActiveCell = _k === void 0 ? true : _k, _l = _a.selectionTopBound, selectionTopBound = _l === void 0 ? 0 : _l, _m = _a.selectionBottomBound, selectionBottomBound = _m === void 0 ? rowCount : _m, _o = _a.selectionLeftBound, selectionLeftBound = _o === void 0 ? 0 : _o, _p = _a.selectionRightBound, selectionRightBound = _p === void 0 ? columnCount : _p, mouseDownInterceptor = _a.mouseDownInterceptor, mouseMoveInterceptor = _a.mouseMoveInterceptor, _q = _a.mergedCells, mergedCells = _q === void 0 ? config_1.DEFAULT_ARRAY : _q, _r = _a.canSelectionSpanMergedCells, canSelectionSpanMergedCells = _r === void 0 ? defaultSelectionSpan : _r, getValue = _a.getValue, onMoveSelection = _a.onMoveSelection, getCellCoordsFromOffset = _a.getCellCoordsFromOffset, getCellBounds = _a.getCellBounds, getViewPort = _a.getViewPort, focus = _a.focus, scrollToCell = _a.scrollToCell, isMergedCell = _a.isMergedCell, enableSelectOnEnterKey = _a.enableSelectOnEnterKey, formulaMode = _a.formulaMode, isTouchDevice = _a.isTouchDevice, getDataRowCount = _a.getDataRowCount, isRowHeader = _a.isRowHeader, isColumnHeader = _a.isColumnHeader, _s = _a.enableDataBoundaryNavigation, enableDataBoundaryNavigation = _s === void 0 ? false : _s, tables = _a.tables, onInsertTableRow = _a.onInsertTableRow;
     var _t = tslib_1.__read((0, react_1.useState)(), 2), fillSelection = _t[0], setFillSelection = _t[1];
     var _u = tslib_1.__read((0, react_1.useState)(), 2), fillShrink = _u[0], setFillShrink = _u[1];
     var fillShrinkRef = (0, react_1.useRef)(undefined);
@@ -118,24 +119,36 @@ var useSelection = function (_a) {
      * release always fires `contextmenu`; neither may reach the grid's cell
      * context menu while the user is dragging the fill handle.
      */
+    /**
+     * Documents the in-flight gestures listen on. The grid may render into a
+     * popout window, whose document is not the bundle's global `document`; a
+     * gesture binds its move/up listeners to the document of the element it
+     * started on and unbinds from that same document.
+     */
+    var selectionDocumentRef = (0, react_1.useRef)(null);
+    var fillDocumentRef = (0, react_1.useRef)(null);
+    var dragSelectionDocumentRef = (0, react_1.useRef)(null);
+    var tapDocumentRef = (0, react_1.useRef)(null);
     var contextMenuSuppressorRef = (0, react_1.useRef)(null);
     var releaseContextMenuSuppressor = (0, react_1.useCallback)(function () {
-        var handler = contextMenuSuppressorRef.current;
-        if (!handler)
+        var suppressor = contextMenuSuppressorRef.current;
+        if (!suppressor)
             return;
         contextMenuSuppressorRef.current = null;
-        document.removeEventListener("contextmenu", handler, true);
+        suppressor.ownerDocument.removeEventListener("contextmenu", suppressor.handler, true);
     }, []);
     var suppressNextContextMenu = (0, react_1.useCallback)(function () {
+        var _a;
         if (contextMenuSuppressorRef.current)
             return;
+        var ownerDocument = (_a = fillDocumentRef.current) !== null && _a !== void 0 ? _a : document;
         var handler = function (e) {
             e.preventDefault();
             e.stopPropagation();
             releaseContextMenuSuppressor();
         };
-        contextMenuSuppressorRef.current = handler;
-        document.addEventListener("contextmenu", handler, true);
+        contextMenuSuppressorRef.current = { handler: handler, ownerDocument: ownerDocument };
+        ownerDocument.addEventListener("contextmenu", handler, true);
     }, [releaseContextMenuSuppressor]);
     var selectionsRef = (0, react_1.useRef)([]);
     var fillSelectionRef = (0, react_1.useRef)(undefined);
@@ -358,11 +371,14 @@ var useSelection = function (_a) {
      * Mouse up handler
      */
     var handleMouseUp = (0, react_1.useCallback)(function () {
+        var _a;
         /* Reset selection mode */
         isSelecting.current = false;
-        /* Remove listener */
-        document.removeEventListener("mousemove", handleMouseMove);
-        document.removeEventListener("mouseup", handleMouseUp);
+        /* Remove listener from the document the gesture started on */
+        var ownerDocument = (_a = selectionDocumentRef.current) !== null && _a !== void 0 ? _a : document;
+        selectionDocumentRef.current = null;
+        ownerDocument.removeEventListener("mousemove", handleMouseMove);
+        ownerDocument.removeEventListener("mouseup", handleMouseUp);
         /* Update last selection */
         var curSelections = selectionsRef.current;
         var len = curSelections.length;
@@ -574,12 +590,64 @@ var useSelection = function (_a) {
         selectionLeftBound,
         selectionRightBound,
     ]);
+    // Select all
+    var selectAll = (0, react_1.useCallback)(function () {
+        selectionStart.current = {
+            rowIndex: selectionTopBound,
+            columnIndex: selectionLeftBound,
+        };
+        modifySelection({
+            rowIndex: selectionBottomBound,
+            columnIndex: selectionRightBound,
+        });
+    }, [
+        selectionTopBound,
+        selectionLeftBound,
+        selectionRightBound,
+        selectionBottomBound,
+        modifySelection,
+    ]);
+    /**
+     * Inside a table Ctrl+A / Ctrl+Space / Shift+Space walk Excel's table
+     * cycle before falling back to the sheet-wide behaviour. Applies `range`
+     * (keeping the active cell) and reports whether a table handled the key;
+     * a `null` cycle step means "the sheet-wide step" and returns false.
+     */
+    var currentSingleArea = function () {
+        return selections.length === 1 ? selections[0].range : undefined;
+    };
+    var applyTableRange = (0, react_1.useCallback)(function (range) {
+        if (!range) {
+            return false;
+        }
+        selectionStart.current = {
+            rowIndex: range.startRowIndex,
+            columnIndex: range.startColumnIndex,
+        };
+        modifySelection({
+            rowIndex: range.endRowIndex,
+            columnIndex: range.endColumnIndex,
+        });
+        return true;
+    }, [modifySelection]);
+    var activeTable = activeCell
+        ? (0, table_1.findActiveTableWithinCell)(sheetId, activeCell, tables)
+        : undefined;
     // ⌘A or ⌘+Shift+Space
     // Select all cells in bounding area
     var selectAllBoundedCells = (0, react_1.useCallback)(function () {
         if (!selectionEnd.current || !selectionStart.current) {
             return;
         }
+        if (activeTable) {
+            var step = (0, table_1.getTableSelectAllRange)(activeTable, currentSingleArea());
+            if (step === null) {
+                selectAll();
+                return;
+            }
+            applyTableRange(step);
+            return;
+        }
         var topBound = findLastContentfulCellInDirection(sheetId, selectionStart.current, selectionEnd.current, grid_4.Direction.Up);
         var bottomBound = findLastContentfulCellInDirection(sheetId, selectionStart.current, selectionEnd.current, grid_4.Direction.Down);
         var leftBound = findLastContentfulCellInDirection(sheetId, selectionStart.current, selectionEnd.current, grid_4.Direction.Left);
@@ -610,30 +678,38 @@ var useSelection = function (_a) {
         selectionTopBound,
         selectionLeftBound,
         selectionRightBound,
+        activeTable,
+        selections,
+        applyTableRange,
+        selectAll,
     ]);
-    // Select all
-    var selectAll = (0, react_1.useCallback)(function () {
-        selectionStart.current = {
-            rowIndex: selectionTopBound,
-            columnIndex: selectionLeftBound,
-        };
-        modifySelection({
-            rowIndex: selectionBottomBound,
-            columnIndex: selectionRightBound,
-        });
-    }, [
-        selectionTopBound,
-        selectionLeftBound,
-        selectionRightBound,
-        selectionBottomBound,
-        modifySelection,
-    ]);
+    // Select entire column
+    var selectEntireColumn = (0, react_1.useCallback)(function (columnIndex) {
+        if (!selectionEnd.current ||
+            !selectionStart.current ||
+            columnIndex === void 0)
+            return;
+        selectionStart.current = tslib_1.__assign(tslib_1.__assign({}, selectionStart.current), { rowIndex: selectionTopBound });
+        modifySelection(tslib_1.__assign(tslib_1.__assign({}, selectionEnd.current), { rowIndex: selectionBottomBound }));
+    }, [modifySelection, selectionBottomBound, selectionTopBound]);
     // Ctrl+Space
     var selectColumn = (0, react_1.useCallback)(function (columnIndex) {
         if (!selectionEnd.current ||
             !selectionStart.current ||
             columnIndex === void 0)
             return;
+        if (activeTable) {
+            var step = (0, table_1.getTableColumnSelectRange)(activeTable, {
+                start: selectionStart.current.columnIndex,
+                end: selectionEnd.current.columnIndex,
+            }, currentSingleArea());
+            if (step === null) {
+                selectEntireColumn(columnIndex);
+                return;
+            }
+            applyTableRange(step);
+            return;
+        }
         var topBound = findLastContentfulCellInDirection(sheetId, selectionStart.current, selectionEnd.current, grid_4.Direction.Up);
         var bottomBound = findLastContentfulCellInDirection(sheetId, selectionStart.current, selectionEnd.current, grid_4.Direction.Down);
         var isSameVerticalBounds = topBound === bottomBound;
@@ -649,16 +725,11 @@ var useSelection = function (_a) {
         sheetId,
         selectionTopBound,
         selectionBottomBound,
+        activeTable,
+        selections,
+        applyTableRange,
+        selectEntireColumn,
     ]);
-    // Select entire column
-    var selectEntireColumn = (0, react_1.useCallback)(function (columnIndex) {
-        if (!selectionEnd.current ||
-            !selectionStart.current ||
-            columnIndex === void 0)
-            return;
-        selectionStart.current = tslib_1.__assign(tslib_1.__assign({}, selectionStart.current), { rowIndex: selectionTopBound });
-        modifySelection(tslib_1.__assign(tslib_1.__assign({}, selectionEnd.current), { rowIndex: selectionBottomBound }));
-    }, [modifySelection, selectionBottomBound, selectionTopBound]);
     // Shift+Space
     var selectRow = (0, react_1.useCallback)(function (rowIndex) {
         if (!selectionEnd.current ||
@@ -666,6 +737,19 @@ var useSelection = function (_a) {
             rowIndex === void 0) {
             return;
         }
+        if (activeTable) {
+            var step = (0, table_1.getTableRowSelectRange)(activeTable, {
+                start: selectionStart.current.rowIndex,
+                end: selectionEnd.current.rowIndex,
+            }, currentSingleArea());
+            if (step !== null) {
+                applyTableRange(step);
+                return;
+            }
+            selectionStart.current = tslib_1.__assign(tslib_1.__assign({}, selectionStart.current), { columnIndex: selectionLeftBound });
+            modifySelection(tslib_1.__assign(tslib_1.__assign({}, selectionEnd.current), { columnIndex: selectionRightBound }));
+            return;
+        }
         var leftBound = findLastContentfulCellInDirection(sheetId, selectionStart.current, selectionEnd.current, grid_4.Direction.Left);
         var rightBound = findLastContentfulCellInDirection(sheetId, selectionStart.current, selectionEnd.current, grid_4.Direction.Right);
         var isSameHorizontalBounds = leftBound === rightBound;
@@ -679,6 +763,9 @@ var useSelection = function (_a) {
         findLastContentfulCellInDirection,
         modifySelection,
         sheetId,
+        activeTable,
+        selections,
+        applyTableRange,
         selectionRightBound,
         selectionLeftBound,
     ]);
@@ -844,6 +931,7 @@ var useSelection = function (_a) {
      * Triggers a new selection start
      */
     var handleMouseDown = (0, react_1.useCallback)(function (e) {
+        var _a, _b;
         var coords = getCellCoordsFromOffset(e.clientX, e.clientY, true);
         if (!coords)
             return;
@@ -865,8 +953,10 @@ var useSelection = function (_a) {
         var hasSelections = selectionsRef.current.length > 0;
         var isDeselecting = isMetaKey && allowDeselect;
         if (!isContextMenuClick && selectionPolicy !== "single") {
-            document.addEventListener("mouseup", handleMouseUp);
-            document.addEventListener("mousemove", handleMouseMove);
+            var ownerDocument = (_b = (0, grid_3.getOwnerDocument)((_a = e.currentTarget) !== null && _a !== void 0 ? _a : e.target)) !== null && _b !== void 0 ? _b : document;
+            selectionDocumentRef.current = ownerDocument;
+            ownerDocument.addEventListener("mouseup", handleMouseUp);
+            ownerDocument.addEventListener("mousemove", handleMouseMove);
         }
         /* Activate selection mode */
         // Disable flag for context menu
@@ -1081,11 +1171,22 @@ var useSelection = function (_a) {
                     }
                 }
                 else {
-                    if (isShiftKey) {
-                        keyNavigate(grid_4.Direction.Left);
+                    var direction = isShiftKey ? grid_4.Direction.Left : grid_4.Direction.Right;
+                    var table = activeCell
+                        ? (0, table_1.findActiveTableWithinCell)(sheetId, activeCell, tables)
+                        : undefined;
+                    var tableTarget = table
+                        ? (0, table_1.getNextCellInTable)(table, activeCell, direction, isHiddenRow, isHiddenColumn)
+                        : null;
+                    if (table && tableTarget) {
+                        if (tableTarget.insertRow) {
+                            onInsertTableRow === null || onInsertTableRow === void 0 ? void 0 : onInsertTableRow(table);
+                        }
+                        newSelection(tableTarget.cell);
+                        scrollToCell(tableTarget.cell);
                     }
                     else {
-                        keyNavigate(grid_4.Direction.Right);
+                        keyNavigate(direction);
                     }
                 }
                 e.preventDefault();
@@ -1132,6 +1233,11 @@ var useSelection = function (_a) {
         selectFirstCellInSheet,
         selectLastCellInSheet,
         enableSelectOnEnterKey,
+        newSelection,
+        isHiddenRow,
+        isHiddenColumn,
+        tables,
+        onInsertTableRow,
     ]);
     /**
      * TODO
@@ -1215,13 +1321,14 @@ var useSelection = function (_a) {
      * comes from the mouseup event, not the mousedown.
      */
     var handleFillMouseUp = (0, react_1.useCallback)(function (e) {
-        var _a;
+        var _a, _b;
         isFilling.current = false;
         var toggle = isFillToggleModifier(e);
         var button = fillButtonRef.current;
-        /* Remove listener */
-        document.removeEventListener("mousemove", handleFillMouseMove);
-        document.removeEventListener("mouseup", handleFillMouseUp);
+        /* Remove listener from the document the gesture started on */
+        var ownerDocument = (_a = fillDocumentRef.current) !== null && _a !== void 0 ? _a : document;
+        ownerDocument.removeEventListener("mousemove", handleFillMouseMove);
+        ownerDocument.removeEventListener("mouseup", handleFillMouseUp);
         // The right-button (or macOS Ctrl+click) `contextmenu` event follows this
         // mouseup; keep swallowing it for one tick, then drop the suppressor so a
         // later, unrelated right-click still opens the cell context menu.
@@ -1234,7 +1341,7 @@ var useSelection = function (_a) {
         var fillSelection = fillSelectionRef.current;
         var shrink = fillShrinkRef.current;
         // Modifier for a drag-back shrink: the last move's state, else the release's.
-        var gestureOptions = (_a = fillModifierRef.current) !== null && _a !== void 0 ? _a : (toggle ? { modifier: "toggle" } : undefined);
+        var gestureOptions = (_b = fillModifierRef.current) !== null && _b !== void 0 ? _b : (toggle ? { modifier: "toggle" } : undefined);
         fillModifierRef.current = undefined;
         /* Update last selection */
         setFillSelection(undefined);
@@ -1312,8 +1419,11 @@ var useSelection = function (_a) {
         sheetId,
     ]);
     var handleFillMouseDown = (0, react_1.useCallback)(function (e) {
+        var _a;
         e.stopPropagation();
         e.preventDefault();
+        var ownerDocument = (_a = (0, grid_3.getOwnerDocument)(e.currentTarget)) !== null && _a !== void 0 ? _a : document;
+        fillDocumentRef.current = ownerDocument;
         var isRightButton = e.button === grid_4.MouseButtonCodes.right;
         fillButtonRef.current = isRightButton ? "right" : "left";
         // Ctrl+drag on the handle must never become the macOS Ctrl+click
@@ -1323,8 +1433,8 @@ var useSelection = function (_a) {
             suppressNextContextMenu();
         }
         isFilling.current = true;
-        document.addEventListener("mousemove", handleFillMouseMove);
-        document.addEventListener("mouseup", handleFillMouseUp);
+        ownerDocument.addEventListener("mousemove", handleFillMouseMove);
+        ownerDocument.addEventListener("mouseup", handleFillMouseUp);
     }, [handleFillMouseMove, handleFillMouseUp, suppressNextContextMenu]);
     /**
      * Remove the last selection from state
@@ -1378,6 +1488,7 @@ var useSelection = function (_a) {
      * When drag/drop is complete
      */
     var handleSelectionMouseUp = (0, react_1.useCallback)(function (e) {
+        var _a;
         var fromSelection = initialDraggedSelection.current;
         var toSelection = draggedSelection.current;
         // Excel reads the modifier at RELEASE: Shift → insert between existing cells (I-beam),
@@ -1456,9 +1567,11 @@ var useSelection = function (_a) {
         draggedSelection.current = void 0;
         draggedSelectionIndex.current = void 0;
         hasUserMovedSelection.current = false;
-        /* Remove event handlers */
-        document.removeEventListener("mouseup", handleSelectionMouseUp);
-        document.removeEventListener("mousemove", handleSelectionMouseMove);
+        /* Remove event handlers from the document the gesture started on */
+        var ownerDocument = (_a = dragSelectionDocumentRef.current) !== null && _a !== void 0 ? _a : document;
+        dragSelectionDocumentRef.current = null;
+        ownerDocument.removeEventListener("mouseup", handleSelectionMouseUp);
+        ownerDocument.removeEventListener("mousemove", handleSelectionMouseMove);
         /* Force render */
         forceRender();
     }, [
@@ -1476,6 +1589,7 @@ var useSelection = function (_a) {
      * When user mouse downs on selection
      */
     var handleSelectionMouseDown = (0, react_1.useCallback)(function (e, activeCell, selection, index, shouldClamp) {
+        var _a;
         if (shouldClamp === void 0) { shouldClamp = true; }
         if (e.isDefaultPrevented()) {
             return;
@@ -1507,9 +1621,11 @@ var useSelection = function (_a) {
         }
         /* Set dragging flag */
         isDragging.current = true;
-        /* Listen to mousemove and mousedown events */
-        document.addEventListener("mouseup", handleSelectionMouseUp);
-        document.addEventListener("mousemove", handleSelectionMouseMove);
+        /* Listen on the document the gesture started on */
+        var ownerDocument = (_a = (0, grid_3.getOwnerDocument)(e.currentTarget)) !== null && _a !== void 0 ? _a : document;
+        dragSelectionDocumentRef.current = ownerDocument;
+        ownerDocument.addEventListener("mouseup", handleSelectionMouseUp);
+        ownerDocument.addEventListener("mousemove", handleSelectionMouseMove);
         /* Force a re-render */
         forceRender();
     }, [
@@ -1581,6 +1697,7 @@ var useSelection = function (_a) {
     var startTimeRef = (0, react_1.useRef)(0);
     var startPosRef = (0, react_1.useRef)({ x: 0, y: 0 });
     var onPointerUp = (0, react_1.useCallback)(function (event) {
+        var _a;
         var endTime = Date.now();
         var maxDuration = 200;
         var maxDistance = 10;
@@ -1592,12 +1709,17 @@ var useSelection = function (_a) {
             handleMouseDown(event);
             handleMouseUp();
         }
-        document.removeEventListener("pointerup", onPointerUp);
+        var ownerDocument = (_a = tapDocumentRef.current) !== null && _a !== void 0 ? _a : document;
+        tapDocumentRef.current = null;
+        ownerDocument.removeEventListener("pointerup", onPointerUp);
     }, [handleMouseDown, handleMouseUp]);
     var onPointerDown = (0, react_1.useCallback)(function (event) {
+        var _a;
         startTimeRef.current = Date.now();
         startPosRef.current = { x: event.clientX, y: event.clientY };
-        document.addEventListener("pointerup", onPointerUp);
+        var ownerDocument = (_a = (0, grid_3.getOwnerDocument)(event.currentTarget)) !== null && _a !== void 0 ? _a : document;
+        tapDocumentRef.current = ownerDocument;
+        ownerDocument.addEventListener("pointerup", onPointerUp);
     }, [onPointerUp]);
     // Add a ref. makeEditable renders way too often
     var handleKeyDownRef = (0, use_callback_ref_1.useCallbackRef)(handleKeyDown);

package/dist/cjs/hooks/use-structured-reference-selection.d.ts

@@ -11,12 +11,12 @@ export declare const useOnStructuredReferenceSelection: ({ tables, getSheetName,
         endColumnIndex: number;
         startRowIndex: number;
         endRowIndex: number;
-        sheetId: number;
     } | {
         startColumnIndex: number;
         endColumnIndex: number;
         startRowIndex: number;
         endRowIndex: number;
+        sheetId: number;
     };
     sheetName: string | undefined;
 } | undefined;

package/dist/cjs/hooks/use-structured-reference-selection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-structured-reference-selection.d.ts","sourceRoot":"","sources":["../../../hooks/use-structured-reference-selection.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAMxD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAEzE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAE5C,eAAO,MAAM,iCAAiC,GAAI,2BAG/C;IACD,MAAM,EAAE,SAAS,EAAE,GAAG,SAAS,GAAG,IAAI,CAAC;IACvC,YAAY,EAAE,eAAe,CAAC,cAAc,CAAC,CAAC;CAC/C,eAGc,MAAM,QACT,aAAa,GAAG,SAAS,aACpB,MAAM,GAAG,SAAS,eAChB,MAAM,EAAE,GAAG,SAAS,WACxB,OAAO,GAAG,SAAS,gBACd,WAAW,CAAC,aAAa,CAAC;;;;;;;;;;;;;;aA6H7C,CAAC"}
+{"version":3,"file":"use-structured-reference-selection.d.ts","sourceRoot":"","sources":["../../../hooks/use-structured-reference-selection.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAMxD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAEzE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAE5C,eAAO,MAAM,iCAAiC,GAAI,2BAG/C;IACD,MAAM,EAAE,SAAS,EAAE,GAAG,SAAS,GAAG,IAAI,CAAC;IACvC,YAAY,EAAE,eAAe,CAAC,cAAc,CAAC,CAAC;CAC/C,eAGc,MAAM,QACT,aAAa,GAAG,SAAS,aACpB,MAAM,GAAG,SAAS,eAChB,MAAM,EAAE,GAAG,SAAS,WACxB,OAAO,GAAG,SAAS,gBACd,WAAW,CAAC,aAAa,CAAC;;;;;;;;;;;;;;aA8I7C,CAAC"}

package/dist/cjs/hooks/use-structured-reference-selection.js

@@ -51,6 +51,16 @@ var useOnStructuredReferenceSelection = function (_a) {
                     sheetName: sheetName,
                 };
             }
+            // Totals row only (the table's last row); nothing to highlight while it is off.
+            if (specialItem === "#Totals") {
+                if (!totalRow) {
+                    return undefined;
+                }
+                return {
+                    range: tslib_1.__assign(tslib_1.__assign({}, range), { startColumnIndex: startColumnIndex, endColumnIndex: endColumnIndex, startRowIndex: range.endRowIndex, endRowIndex: range.endRowIndex }),
+                    sheetName: sheetName,
+                };
+            }
             // All
             if (specialItem === "#All") {
                 return {

package/dist/cjs/hooks/use-table-hit-zones.d.ts

@@ -0,0 +1,61 @@
+import type { CellInterface, CellPosition, GridRange, PosXYRequired, ScrollCoords, SelectionArea } from "@rowsncolumns/grid";
+import type React from "react";
+import type { CanvasGridProps } from "../components/canvas-grid/typings";
+import type { TableView } from "../types";
+/** Width of the edge bands (px, in grid coordinates) that count as a table hit zone. */
+export declare const TABLE_HIT_BAND = 4;
+export type TableHitZone = {
+    /**
+     * `column`: the top edge of a header cell (selects the column data, then
+     * the entire table column). `corner`: the header's top-left corner (selects
+     * the data body, then the whole table). `row`: the left edge of the first
+     * column (selects the table row).
+     */
+    kind: "column" | "corner" | "row";
+    table: TableView;
+    cell: CellInterface;
+};
+/** Excel's black selection arrows: down on a header edge, right on a row edge, diagonal on the corner. */
+export declare const TABLE_HIT_CURSORS: Record<TableHitZone["kind"], string>;
+/**
+ * Classify a pointer position inside `cell` against the table it belongs to.
+ * `offset` is the pointer's position relative to the cell's top-left corner.
+ */
+export declare const getTableHitZone: (table: TableView | undefined, cell: CellInterface, offset: {
+    x: number;
+    y: number;
+}, band?: number) => TableHitZone | undefined;
+/**
+ * The range a click on `zone` selects, given the single selected area (if
+ * any): a header edge selects the column data first and the entire table
+ * column on the next click; the corner toggles data body ↔ whole table; a row
+ * edge selects the table row.
+ */
+export declare const getTableHitZoneRange: (zone: TableHitZone, current: GridRange | undefined) => GridRange;
+export type UseTableHitZonesOptions = {
+    sheetId: number;
+    tables: CanvasGridProps["tables"];
+    selections: SelectionArea[];
+    frozenRows: number;
+    frozenColumns: number;
+    getCellCoordsFromOffset: (x: number, y: number) => CellInterface | undefined;
+    getRelativePositionFromOffset: (x: number, y: number) => PosXYRequired | null | undefined;
+    getCellOffsetFromCoords: (cell: CellInterface) => CellPosition | undefined;
+    getScrollPosition: () => ScrollCoords | undefined;
+    /** Replaces the selection with `range`, active cell at its top-left. */
+    onSelectRange: (sheetId: number, range: GridRange) => void;
+};
+/**
+ * Excel's table hit zones: hovering the top edge of a header cell, the
+ * header's top-left corner or the left edge of a row shows the black
+ * selection arrow; a click there selects the table column data / body / row
+ * instead of starting a cell selection.
+ */
+export declare const useTableHitZones: ({ sheetId, tables, selections, frozenRows, frozenColumns, getCellCoordsFromOffset, getRelativePositionFromOffset, getCellOffsetFromCoords, getScrollPosition, onSelectRange, }: UseTableHitZonesOptions) => {
+    hitZone: TableHitZone | undefined;
+    cursor: string | undefined;
+    onMouseMove: (e: React.MouseEvent<HTMLElement>) => void;
+    onMouseDown: (e: React.MouseEvent<HTMLElement>) => boolean;
+    clearHitZone: () => void;
+};
+//# sourceMappingURL=use-table-hit-zones.d.ts.map

package/dist/cjs/hooks/use-table-hit-zones.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-table-hit-zones.d.ts","sourceRoot":"","sources":["../../../hooks/use-table-hit-zones.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,YAAY,EACZ,SAAS,EACT,aAAa,EACb,YAAY,EACZ,aAAa,EACd,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C,wFAAwF;AACxF,eAAO,MAAM,cAAc,IAAI,CAAC;AAEhC,MAAM,MAAM,YAAY,GAAG;IACzB;;;;;OAKG;IACH,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,KAAK,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,EAAE,aAAa,CAAC;CACrB,CAAC;AAOF,0GAA0G;AAC1G,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,MAAM,CAIlE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,GAC1B,OAAO,SAAS,GAAG,SAAS,EAC5B,MAAM,aAAa,EACnB,QAAQ;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAChC,aAAqB,KACpB,YAAY,GAAG,SA0BjB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,GAC/B,MAAM,YAAY,EAClB,SAAS,SAAS,GAAG,SAAS,KAC7B,SA+BF,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC;IAClC,UAAU,EAAE,aAAa,EAAE,CAAC;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,aAAa,GAAG,SAAS,CAAC;IAC7E,6BAA6B,EAAE,CAC7B,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,KACN,aAAa,GAAG,IAAI,GAAG,SAAS,CAAC;IACtC,uBAAuB,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,YAAY,GAAG,SAAS,CAAC;IAC3E,iBAAiB,EAAE,MAAM,YAAY,GAAG,SAAS,CAAC;IAClD,wEAAwE;IACxE,aAAa,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CAC5D,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAAI,gLAW9B,uBAAuB;;;qBAyClB,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC;qBAqB7B,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC;;CA4BpC,CAAC"}