@rowsncolumns/spreadsheet 10.2.68

package/dist/esm/hooks/use-selected-rows-columns.js

@@ -0,0 +1,69 @@
+import { useMemo } from "react";
+export const useSelectedRowsColumns = ({ activeCell, selections, selectionLeftBound, selectionTopBound, rowCount, columnCount, getCellBounds, }) => {
+    return useMemo(() => {
+        const selectedRows = {};
+        const selectedColumns = {};
+        const selectedRowHeaders = {};
+        const selectedColumnHeaders = {};
+        const selectedRowHeadersIds = [];
+        const selectedColumnHeadersIds = [];
+        let finalSelections = selections;
+        if (activeCell) {
+            const activeCellBounds = getCellBounds?.(activeCell);
+            if (activeCellBounds) {
+                finalSelections = finalSelections.concat({
+                    range: activeCellBounds,
+                });
+            }
+        }
+        for (let i = 0; i < finalSelections.length; i++) {
+            const { range } = finalSelections[i];
+            /* Check if the full row is selected */
+            const isFullRowSelected = range.startColumnIndex === selectionLeftBound &&
+                range.endColumnIndex === columnCount;
+            /* Check if the full column is selected */
+            const isFullColSelected = range.startRowIndex === selectionTopBound &&
+                range.endRowIndex === rowCount;
+            for (let j = range.startColumnIndex; j <= range.endColumnIndex; j++) {
+                if (isFullColSelected) {
+                    selectedColumnHeaders[j] = true;
+                    selectedColumnHeadersIds.push(j);
+                }
+                else if (isFullRowSelected) {
+                    selectedColumns["all"] = true;
+                }
+                else {
+                    selectedColumns[j] = true;
+                }
+            }
+            for (let k = range.startRowIndex; k <= range.endRowIndex; k++) {
+                if (isFullRowSelected) {
+                    selectedRowHeaders[k] = true;
+                    selectedRowHeadersIds.push(k);
+                }
+                else if (isFullColSelected) {
+                    selectedRows["all"] = true;
+                }
+                else {
+                    selectedRows[k] = true;
+                }
+            }
+        }
+        return [
+            selectedRows,
+            selectedColumns,
+            selectedRowHeaders,
+            selectedColumnHeaders,
+            selectedRowHeadersIds,
+            selectedColumnHeadersIds,
+        ];
+    }, [
+        activeCell,
+        selections,
+        selectionLeftBound,
+        selectionTopBound,
+        rowCount,
+        columnCount,
+        getCellBounds,
+    ]);
+};

package/dist/esm/hooks/use-selection-aware-formatting.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Wraps `onChangeFormatting` so that, while a cell is being EDITED, a
+ * `textFormat`-only change from the toolbar formats the editor's current
+ * selection as text-format runs (marks) instead of restyling the whole cell —
+ * the way Cmd+B already behaves through the editor keymap. Outside of editing
+ * (or for non-`textFormat` changes, or when the editor can't represent the
+ * patch as marks) the original cell-level handler runs unchanged.
+ *
+ * Works for both the in-cell editor and the formula bar: `useActiveEditor`
+ * tracks whichever editor currently owns the edit.
+ */
+export declare const useSelectionAwareChangeFormatting: <T extends (...args: any[]) => void>(onChangeFormatting: T | undefined) => T;
+//# sourceMappingURL=use-selection-aware-formatting.d.ts.map

package/dist/esm/hooks/use-selection-aware-formatting.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-selection-aware-formatting.d.ts","sourceRoot":"","sources":["../../../hooks/use-selection-aware-formatting.ts"],"names":[],"mappings":"AAuBA;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,iCAAiC,GAAI,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,EAClF,oBAAoB,CAAC,GAAG,SAAS,KAChC,CAiCF,CAAC"}

package/dist/esm/hooks/use-selection-aware-formatting.js

@@ -0,0 +1,39 @@
+import { useCallback } from "react";
+import { useActiveEditor } from "../atoms/active-editor.atom";
+import { useEditingCellCoordinate } from "../atoms/editing-cell.atom";
+/**
+ * Wraps `onChangeFormatting` so that, while a cell is being EDITED, a
+ * `textFormat`-only change from the toolbar formats the editor's current
+ * selection as text-format runs (marks) instead of restyling the whole cell —
+ * the way Cmd+B already behaves through the editor keymap. Outside of editing
+ * (or for non-`textFormat` changes, or when the editor can't represent the
+ * patch as marks) the original cell-level handler runs unchanged.
+ *
+ * Works for both the in-cell editor and the formula bar: `useActiveEditor`
+ * tracks whichever editor currently owns the edit.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const useSelectionAwareChangeFormatting = (onChangeFormatting) => {
+    const editingCell = useEditingCellCoordinate();
+    const activeEditor = useActiveEditor();
+    return useCallback((...args) => {
+        const typeOrFormat = args[3];
+        const textFormat = typeOrFormat === "textFormat"
+            ? args[4]
+            : typeOrFormat &&
+                typeof typeOrFormat === "object" &&
+                !Array.isArray(typeOrFormat) &&
+                Object.keys(typeOrFormat).length === 1
+                ? typeOrFormat.textFormat
+                : undefined;
+        // Clicking a toolbar button can momentarily move DOM focus off the
+        // editor, but the ProseMirror state keeps its selection — so gate on an
+        // open edit session, not on live focus.
+        if (editingCell &&
+            textFormat &&
+            activeEditor?.applyTextFormat?.(textFormat)) {
+            return;
+        }
+        onChangeFormatting?.(...args);
+    }, [onChangeFormatting, editingCell, activeEditor]);
+};

package/dist/esm/hooks/use-selection-change.d.ts

@@ -0,0 +1,10 @@
+import type { SelectionArea } from "@rowsncolumns/grid";
+import type { CanvasGridProps, SelectionAttributes } from "../components/canvas-grid/typings";
+type UseSelectionChangeProps = {
+    sheetId: number;
+    getSheetName?(sheetId: number): string | undefined;
+    onChangeSelections: CanvasGridProps["onChangeSelections"];
+};
+export declare const useSelectionChange: ({ onChangeSelections, sheetId, getSheetName, }: UseSelectionChangeProps) => (selections: SelectionArea<SelectionAttributes>[], finishedSelection?: boolean) => void;
+export {};
+//# sourceMappingURL=use-selection-change.d.ts.map

package/dist/esm/hooks/use-selection-change.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-selection-change.d.ts","sourceRoot":"","sources":["../../../hooks/use-selection-change.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAOxD,OAAO,KAAK,EACV,eAAe,EACf,mBAAmB,EACpB,MAAM,mCAAmC,CAAC;AAI3C,KAAK,uBAAuB,GAAG;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACnD,kBAAkB,EAAE,eAAe,CAAC,oBAAoB,CAAC,CAAC;CAC3D,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,gDAIhC,uBAAuB,kBAmBR,aAAa,CAAC,mBAAmB,CAAC,EAAE,sBAC5B,OAAO,SA2ChC,CAAC"}

package/dist/esm/hooks/use-selection-change.js

@@ -0,0 +1,57 @@
+import { useCallback, useRef } from "react";
+import { useFormulaSelectionMode, useGetAddressFromSelection } from "../atoms";
+import { useActiveEditor } from "../atoms/active-editor.atom";
+import { useFormulaModeValue } from "../atoms/formula-mode.atom";
+import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect";
+export const useSelectionChange = ({ onChangeSelections, sheetId, getSheetName, }) => {
+    const formulaMode = useFormulaModeValue();
+    const activeEditor = useActiveEditor();
+    const activeEditorRef = useRef(undefined);
+    const selectionMode = useFormulaSelectionMode();
+    const selectionModeRef = useRef(undefined);
+    useIsomorphicLayoutEffect(() => {
+        selectionModeRef.current = selectionMode;
+    }, [selectionMode]);
+    useIsomorphicLayoutEffect(() => {
+        activeEditorRef.current = activeEditor;
+    }, [activeEditor]);
+    const getSelectionToAddress = useGetAddressFromSelection();
+    return useCallback((selections, finishedSelection) => {
+        // Callback
+        onChangeSelections?.(sheetId, selections, finishedSelection);
+        /**
+         * When user is using an external cell selector,
+         * editingCellCoordinate = null
+         *
+         * finishedSelection => true when use mouseUps the grid
+         * Prevents an extra re-render
+         */
+        if (formulaMode) {
+            const sheetName = getSheetName?.(sheetId);
+            const lastSelection = selections[selections.length - 1];
+            // Ignore
+            if (!lastSelection) {
+                return;
+            }
+            const address = getSelectionToAddress?.(lastSelection, sheetName);
+            // @Vinay Removed canSelectCells check here
+            // So FormulaInput component can select freely by
+            // focusing on the input
+            if (address && selectionModeRef.current && activeEditorRef.current) {
+                // Update value of the editor
+                activeEditorRef.current?.update(address, selectionModeRef.current);
+                // Focus:
+                // Figure out why single cell selection does not
+                // bring focus back to the editor
+                activeEditorRef.current?.focus();
+            }
+        }
+    }, [
+        sheetId,
+        formulaMode,
+        onChangeSelections,
+        getSheetName,
+        selectionModeRef,
+        getSelectionToAddress,
+    ]);
+};

package/dist/esm/hooks/use-selection-interceptors.d.ts

@@ -0,0 +1,34 @@
+import { type CellInterface, type HiddenType, type ViewPortProps } from "@rowsncolumns/grid";
+import type { UseSelectionOptions } from "./use-selection";
+type UseSelectionInterceptorsProps = {
+    sheetId: number;
+    rowCount: number;
+    columnCount: number;
+    frozenRows: number;
+    frozenColumns: number;
+    selectionTopBound: number;
+    selectionLeftBound: number;
+    /**
+     * Hidden rows
+     */
+    isHiddenRow?: HiddenType;
+    /**
+     * Hidden columns
+     */
+    isHiddenColumn?: HiddenType;
+    isRowHeader(index: number): boolean;
+    isColumnHeader(index: number): boolean;
+    /**
+     * Check if a cell is part of a merged cell
+     */
+    isMergedCell?(cell: CellInterface): boolean;
+    getViewPort(): ViewPortProps;
+    scrollToCell: UseSelectionOptions["scrollToCell"];
+    onChangeActiveCell: UseSelectionOptions["onChangeActiveCell"];
+};
+export declare const useSelectionInterceptors: ({ sheetId, rowCount, columnCount, frozenRows, frozenColumns, selectionLeftBound, selectionTopBound, isHiddenColumn, isHiddenRow, isRowHeader, isColumnHeader, isMergedCell, getViewPort, scrollToCell, onChangeActiveCell, }: UseSelectionInterceptorsProps) => {
+    onMouseMoveInterceptor: (e: globalThis.MouseEvent | globalThis.PointerEvent, coords: CellInterface, selectionStart: React.MutableRefObject<CellInterface | null>, selectionEnd: React.MutableRefObject<CellInterface | null>, modifySelection: (coords: CellInterface, setInProgress?: boolean | undefined) => void) => false | undefined;
+    onMouseDownInterceptor: (e: React.MouseEvent<HTMLDivElement> | globalThis.PointerEvent, coords: CellInterface, selectionStart: React.MutableRefObject<CellInterface | null>, selectionEnd: React.MutableRefObject<CellInterface | null>, modifySelection: (coords: CellInterface, setInProgress?: boolean | undefined) => void, appendSelection: (start: CellInterface, end?: CellInterface) => void, clearSelections: () => void, selectAll: () => void) => false | undefined;
+};
+export {};
+//# sourceMappingURL=use-selection-interceptors.d.ts.map

package/dist/esm/hooks/use-selection-interceptors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-selection-interceptors.d.ts","sourceRoot":"","sources":["../../../hooks/use-selection-interceptors.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,aAAa,EAGlB,KAAK,UAAU,EACf,KAAK,aAAa,EACnB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAE3D,KAAK,6BAA6B,GAAG;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,kBAAkB,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB;;OAEG;IACH,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;IACpC,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;IACvC;;OAEG;IACH,YAAY,CAAC,CAAC,IAAI,EAAE,aAAa,GAAG,OAAO,CAAC;IAC5C,WAAW,IAAI,aAAa,CAAC;IAC7B,YAAY,EAAE,mBAAmB,CAAC,cAAc,CAAC,CAAC;IAClD,kBAAkB,EAAE,mBAAmB,CAAC,oBAAoB,CAAC,CAAC;CAC/D,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAI,8NAgBtC,6BAA6B;gCAGvB,UAAU,CAAC,UAAU,GAAG,UAAU,CAAC,YAAY,UAC1C,aAAa,kBACL,KAAK,CAAC,gBAAgB,CAAC,aAAa,GAAG,IAAI,CAAC,gBAC9C,KAAK,CAAC,gBAAgB,CAAC,aAAa,GAAG,IAAI,CAAC,mBACzC,CACf,MAAM,EAAE,aAAa,EACrB,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,KAChC,IAAI;gCAkCN,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,GAAG,UAAU,CAAC,YAAY,UACrD,aAAa,kBACL,KAAK,CAAC,gBAAgB,CAAC,aAAa,GAAG,IAAI,CAAC,gBAC9C,KAAK,CAAC,gBAAgB,CAAC,aAAa,GAAG,IAAI,CAAC,mBACzC,CACf,MAAM,EAAE,aAAa,EACrB,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,KAChC,IAAI,mBACQ,CAAC,KAAK,EAAE,aAAa,EAAE,GAAG,CAAC,EAAE,aAAa,KAAK,IAAI,mBACnD,MAAM,IAAI,aAChB,MAAM,IAAI;CA8H1B,CAAC"}

package/dist/esm/hooks/use-selection-interceptors.js

@@ -0,0 +1,129 @@
+import { clampIndex, Direction, } from "@rowsncolumns/grid";
+import { useCallback, useMemo } from "react";
+export const useSelectionInterceptors = ({ sheetId, rowCount, columnCount, frozenRows, frozenColumns, selectionLeftBound, selectionTopBound, isHiddenColumn, isHiddenRow, isRowHeader, isColumnHeader, isMergedCell, getViewPort, scrollToCell, onChangeActiveCell, }) => {
+    const onMouseMoveInterceptor = useCallback((e, coords, selectionStart, selectionEnd, modifySelection) => {
+        const isRowHeader = selectionStart.current?.rowIndex === selectionTopBound &&
+            selectionEnd.current?.rowIndex === rowCount;
+        const isColumnHeader = selectionStart.current?.columnIndex === selectionLeftBound &&
+            selectionEnd.current?.columnIndex === columnCount;
+        if (isRowHeader && isColumnHeader)
+            return false;
+        if (isRowHeader || isColumnHeader) {
+            const end = isRowHeader
+                ? { ...coords, rowIndex: rowCount }
+                : { ...coords, columnIndex: columnCount };
+            modifySelection(end);
+            scrollToCell({
+                rowIndex: isRowHeader ? undefined : coords.rowIndex,
+                columnIndex: isColumnHeader ? undefined : coords.columnIndex,
+            });
+            return false;
+        }
+    }, [
+        selectionTopBound,
+        selectionLeftBound,
+        rowCount,
+        columnCount,
+        scrollToCell,
+    ]);
+    const onMouseDownInterceptor = useCallback((e, coords, selectionStart, selectionEnd, modifySelection, appendSelection, clearSelections, selectAll) => {
+        const isShiftKey = e.shiftKey;
+        const isMetaKey = e.metaKey || e.ctrlKey;
+        // const isContextMenu = e.button === MouseButtonCodes.right || e.ctrlKey;
+        const rowHeader = isRowHeader(coords.rowIndex);
+        const colHeader = isColumnHeader(coords.columnIndex);
+        // Intersection top left cell
+        if (rowHeader && colHeader) {
+            selectAll();
+            // Scroll to cell
+            return false;
+        }
+        if (rowHeader || colHeader) {
+            const actualFrozenRows = frozenRows - 1;
+            const actualFrozenColumns = frozenColumns - 1;
+            const normalizedCoords = {
+                rowIndex: Math.max(selectionTopBound, coords.rowIndex),
+                columnIndex: Math.max(selectionLeftBound, coords.columnIndex),
+            };
+            const start = normalizedCoords;
+            const end = colHeader
+                ? { ...normalizedCoords, columnIndex: columnCount }
+                : { ...normalizedCoords, rowIndex: rowCount };
+            const { visibleRowStartIndex, visibleColumnStartIndex } = getViewPort();
+            let activeCell = colHeader
+                ? {
+                    ...normalizedCoords,
+                    columnIndex: actualFrozenColumns >= selectionLeftBound
+                        ? selectionLeftBound
+                        : clampIndex(visibleColumnStartIndex, isHiddenColumn, Direction.Right),
+                }
+                : {
+                    ...normalizedCoords,
+                    rowIndex: actualFrozenRows >= selectionTopBound
+                        ? selectionTopBound
+                        : clampIndex(visibleRowStartIndex, isHiddenRow, Direction.Down),
+                };
+            // Skip merged cells when setting active cell (like Excel)
+            if (isMergedCell?.(activeCell)) {
+                if (colHeader) {
+                    // Selecting entire row - find next non-merged column
+                    const isHiddenOrMerged = (col) => isHiddenColumn?.(col) ||
+                        isMergedCell({ rowIndex: activeCell.rowIndex, columnIndex: col });
+                    const nextCol = clampIndex(activeCell.columnIndex + 1, isHiddenOrMerged, Direction.Right);
+                    if (nextCol <= columnCount) {
+                        activeCell = { ...activeCell, columnIndex: nextCol };
+                    }
+                }
+                else {
+                    // Selecting entire column - find next non-merged row
+                    const isHiddenOrMerged = (row) => isHiddenRow?.(row) ||
+                        isMergedCell({
+                            rowIndex: row,
+                            columnIndex: activeCell.columnIndex,
+                        });
+                    const nextRow = clampIndex(activeCell.rowIndex + 1, isHiddenOrMerged, Direction.Down);
+                    if (nextRow <= rowCount) {
+                        activeCell = { ...activeCell, rowIndex: nextRow };
+                    }
+                }
+            }
+            // Prevent bug where cell can be out of view
+            scrollToCell(activeCell);
+            if (isShiftKey) {
+                modifySelection(end);
+            }
+            else if (isMetaKey) {
+                appendSelection(start, end);
+                onChangeActiveCell?.(sheetId, activeCell);
+            }
+            else {
+                /* Clear all selections */
+                clearSelections();
+                selectionStart.current = start;
+                selectionEnd.current = end;
+                modifySelection(end);
+                onChangeActiveCell?.(sheetId, activeCell);
+            }
+            return false;
+        }
+    }, [
+        sheetId,
+        rowCount,
+        columnCount,
+        frozenColumns,
+        frozenRows,
+        selectionLeftBound,
+        selectionTopBound,
+        isHiddenColumn,
+        isHiddenRow,
+        isRowHeader,
+        isColumnHeader,
+        isMergedCell,
+        onChangeActiveCell,
+        getViewPort,
+    ]);
+    return useMemo(() => ({
+        onMouseMoveInterceptor,
+        onMouseDownInterceptor,
+    }), [onMouseDownInterceptor, onMouseMoveInterceptor]);
+};

package/dist/esm/hooks/use-selection-move.d.ts

@@ -0,0 +1,31 @@
+import type { Align, CellInterface, OptionalCellInterface } from "@rowsncolumns/grid";
+import type React from "react";
+import type { useCreateFormulaTokenizer } from "./use-create-formula-tokenizer";
+type UseSelectionMoveProps = {
+    tokenizer: ReturnType<typeof useCreateFormulaTokenizer>;
+    /**
+     * Get cell coords from x and y position
+     * @param x
+     * @param y
+     * @param includeFrozen
+     */
+    getCellCoordsFromOffset(x: number, y: number, includeFrozen?: boolean | undefined): CellInterface | null | undefined;
+    /**
+     * Scroll to a cell
+     * @param cell
+     * @param align
+     */
+    scrollToCell(cell: OptionalCellInterface, align?: Align | undefined): void | undefined;
+};
+/**
+ * Lets the user drag a formula reference (via selection border covers)
+ * to move it to a new range while in formula mode.
+ * Counterpart of useSelectionResize, which resizes references
+ * via the corner resize handles.
+ */
+export declare const useSelectionMove: ({ tokenizer, getCellCoordsFromOffset, scrollToCell, }: UseSelectionMoveProps) => {
+    onMouseDownMoveSelection: (e: React.PointerEvent<HTMLDivElement>) => void;
+    isDragging: boolean;
+};
+export {};
+//# sourceMappingURL=use-selection-move.d.ts.map

package/dist/esm/hooks/use-selection-move.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-selection-move.d.ts","sourceRoot":"","sources":["../../../hooks/use-selection-move.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,KAAK,EACL,aAAa,EAEb,qBAAqB,EACtB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAGhF,KAAK,qBAAqB,GAAG;IAC3B,SAAS,EAAE,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;IACxD;;;;;OAKG;IACH,uBAAuB,CACrB,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,GAClC,aAAa,GAAG,IAAI,GAAG,SAAS,CAAC;IACpC;;;;OAIG;IACH,YAAY,CACV,IAAI,EAAE,qBAAqB,EAC3B,KAAK,CAAC,EAAE,KAAK,GAAG,SAAS,GACxB,IAAI,GAAG,SAAS,CAAC;CACrB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAAI,uDAI9B,qBAAqB;kCA2HhB,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC;;CAyCzC,CAAC"}

package/dist/esm/hooks/use-selection-move.js

@@ -0,0 +1,136 @@
+import isNil from "lodash/isNil";
+import { useCallback, useRef, useState } from "react";
+import { useActiveEditor, useEditingCellCoordinate, useGetAddressFromSelection, useGetSelectionsFromFormula, } from "../atoms";
+import { detokenize } from "./use-selection-resize";
+/**
+ * Lets the user drag a formula reference (via selection border covers)
+ * to move it to a new range while in formula mode.
+ * Counterpart of useSelectionResize, which resizes references
+ * via the corner resize handles.
+ */
+export const useSelectionMove = ({ tokenizer, getCellCoordsFromOffset, scrollToCell, }) => {
+    const selectionIndexRef = useRef(undefined);
+    const isDraggingRef = useRef(false);
+    const startCell = useRef(undefined);
+    const initialRange = useRef(undefined);
+    const activeEditor = useActiveEditor();
+    const getSelectionToAddress = useGetAddressFromSelection();
+    const getSelectionsFromFormula = useGetSelectionsFromFormula();
+    const editingCellCoordinate = useEditingCellCoordinate();
+    // Mousemove
+    const onMouseMove = useCallback((e) => {
+        // User is not dragging yet
+        if (!isDraggingRef.current || !startCell.current) {
+            return;
+        }
+        // Get cell coords
+        const coords = getCellCoordsFromOffset(e.clientX, e.clientY, false);
+        if (!coords) {
+            return;
+        }
+        // Scroll to cell
+        scrollToCell(coords);
+        const value = activeEditor?.getValue() ?? "";
+        const tokens = tokenizer(value);
+        for (const token of tokens) {
+            if ((token.selection || token.structured || token.isNamedRange) &&
+                token.index === selectionIndexRef.current) {
+                const selections = getSelectionsFromFormula?.(token.image, editingCellCoordinate ?? coords);
+                if (!selections) {
+                    continue;
+                }
+                // Get the last selection
+                const selection = selections[selections?.length - 1];
+                if (!selection) {
+                    continue;
+                }
+                if (!initialRange.current) {
+                    initialRange.current = { ...selection.range };
+                }
+                const range = initialRange.current;
+                // Clamp so the moved range stays within the grid
+                const deltaRows = Math.max(coords.rowIndex - startCell.current.rowIndex, 1 - range.startRowIndex);
+                const deltaColumns = Math.max(coords.columnIndex - startCell.current.columnIndex, 1 - range.startColumnIndex);
+                // Shift the entire range, keeping its dimensions
+                selection.range = {
+                    startRowIndex: range.startRowIndex + deltaRows,
+                    endRowIndex: range.endRowIndex + deltaRows,
+                    startColumnIndex: range.startColumnIndex + deltaColumns,
+                    endColumnIndex: range.endColumnIndex + deltaColumns,
+                };
+                // Create address
+                const address = getSelectionToAddress?.(selection, token.sheetName);
+                if (address) {
+                    token.image = address;
+                }
+            }
+        }
+        // Create new formula
+        const newValue = detokenize(tokens);
+        // Update editor value
+        activeEditor?.setValue(newValue);
+        // Keep the cursor at the end of the moved reference while
+        // dragging — the reference can sit anywhere in the formula
+        activeEditor?.moveCursorToTokenEnd(selectionIndexRef.current);
+    }, [
+        getCellCoordsFromOffset,
+        tokenizer,
+        activeEditor,
+        getSelectionToAddress,
+        getSelectionsFromFormula,
+        scrollToCell,
+        editingCellCoordinate,
+    ]);
+    // Rendered dragging state: drives the border cover's grabbing cursor
+    // (cursor: isDragging ? "grabbing" : "grab" in the Selection component)
+    const [isDragging, setIsDragging] = useState(false);
+    // Mouseup
+    const onMouseUp = useCallback(() => {
+        // Land the cursor at the end of the moved reference,
+        // not the end of the formula
+        activeEditor?.moveCursorToTokenEnd(selectionIndexRef.current);
+        // Focus (view focus preserves the selection set above)
+        activeEditor?.focus();
+        isDraggingRef.current = false;
+        startCell.current = undefined;
+        initialRange.current = undefined;
+        setIsDragging(false);
+        document.removeEventListener("pointermove", onMouseMove);
+        document.removeEventListener("pointerup", onMouseUp);
+    }, [activeEditor, onMouseMove]);
+    // Mousedown
+    const onMouseDownMoveSelection = useCallback((e) => {
+        const index = Number(e.currentTarget.dataset.index);
+        if (isNil(index) || Number.isNaN(index)) {
+            return;
+        }
+        // Prevent onblur being fired
+        e.preventDefault();
+        // Set dragging ref
+        isDraggingRef.current = true;
+        selectionIndexRef.current = index;
+        initialRange.current = undefined;
+        // Get cell coords
+        const coords = getCellCoordsFromOffset(e.clientX, e.clientY, false);
+        // Validate cell
+        if (coords) {
+            startCell.current = coords;
+            // Capture the pointer so the cover keeps showing its (React
+            // rendered) cursor for the whole drag, even when the pointer
+            // leaves the 5px cover. Captured events still bubble to the
+            // document listeners below.
+            try {
+                e.currentTarget.setPointerCapture?.(e.pointerId);
+            }
+            catch {
+                // jsdom / older browsers without pointer capture
+            }
+            setIsDragging(true);
+            document.addEventListener("pointermove", onMouseMove);
+            document.addEventListener("pointerup", onMouseUp);
+        }
+        // Focus
+        activeEditor?.focus();
+    }, [activeEditor, onMouseMove, onMouseUp, getCellCoordsFromOffset]);
+    return { onMouseDownMoveSelection, isDragging };
+};

package/dist/esm/hooks/use-selection-renderer.d.ts

@@ -0,0 +1,46 @@
+import { type CellInterface, type SelectionArea, type SelectionProps } from "@rowsncolumns/grid";
+import React from "react";
+import type { CanvasGridProps, SelectionAttributes } from "../components/canvas-grid/typings";
+import type { SelectionNewProps } from "../components/selection/types";
+import type { SheetRange } from "../types";
+import type { useFlash } from "./use-flash";
+export type UseSelectionRendererProps = {
+    selectionCount: number;
+    fillHandleSize?: number;
+    showFillHandle?: boolean;
+    sheetId: number;
+    selectionBackgroundColor: string;
+    selectionBorderColor: string;
+    scale?: number;
+    getSheetName?(sheetId: number): string | undefined;
+    onChangeActiveCell: CanvasGridProps["onChangeActiveCell"];
+    onChangeSelections: CanvasGridProps["onChangeSelections"];
+    onSelectionMouseDown?(e: React.MouseEvent<HTMLDivElement, MouseEvent>, cell: CellInterface | undefined, selection: SelectionArea | undefined, index: number | undefined, shouldClamp?: boolean | undefined): void;
+    SelectionTitleComponent: React.ElementType;
+    showSelectionResizeHandles?: boolean;
+    isResizingTable: boolean;
+    resizeHandleBorderColor?: string;
+    resizeHandleSize?: number;
+    onRequestEditTable: CanvasGridProps["onRequestEditTable"];
+    onRequestEditPivotTable: CanvasGridProps["onRequestEditPivotTable"];
+    onMouseDownResizeHandle: SelectionNewProps["onMouseDownResizeHandle"];
+    onMouseDownMoveSelection: SelectionNewProps["onMouseDownMoveHandle"];
+    /** Formula reference drag in progress (drives the grabbing cursor) */
+    isDraggingMoveSelection?: boolean;
+    onFlashEnd: ReturnType<typeof useFlash>["onFlashEnd"];
+    enableMagicFill?: CanvasGridProps["enableMagicFill"];
+    MagicFillComponent?: CanvasGridProps["MagicFillComponent"];
+    MagicFillContent?: CanvasGridProps["MagicFillContent"];
+    QuickEdit?: CanvasGridProps["QuickEdit"];
+    PasteMenu?: CanvasGridProps["PasteMenu"];
+    SuggestionAction?: CanvasGridProps["SuggestionAction"];
+    readonly?: boolean;
+    showPasteMenu?: boolean;
+    onSplitTextToColumns: CanvasGridProps["onSplitTextToColumns"];
+    hoveredCell?: CellInterface | null;
+    onRemoveQuickEdit(range: SheetRange): void;
+    onAddQuickEdit(range: SheetRange): void;
+    cachedHoveredSelectionIds: Set<string | number>;
+};
+export declare const useSelectionRenderer: ({ sheetId, selectionCount, selectionBackgroundColor, selectionBorderColor, onSelectionMouseDown, onChangeActiveCell, onChangeSelections, onRequestEditTable, onRequestEditPivotTable, onMouseDownResizeHandle, onMouseDownMoveSelection, isDraggingMoveSelection, onFlashEnd, getSheetName, resizeHandleSize, showSelectionResizeHandles, resizeHandleBorderColor, SelectionTitleComponent, isResizingTable, fillHandleSize, showFillHandle, enableMagicFill, MagicFillComponent, MagicFillContent, readonly, showPasteMenu, hoveredCell, onSplitTextToColumns, onRemoveQuickEdit, onAddQuickEdit, QuickEdit, PasteMenu, SuggestionAction, cachedHoveredSelectionIds, }: UseSelectionRendererProps) => (props: SelectionProps<SelectionAttributes>) => React.JSX.Element | null;
+//# sourceMappingURL=use-selection-renderer.d.ts.map

package/dist/esm/hooks/use-selection-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-selection-renderer.d.ts","sourceRoot":"","sources":["../../../hooks/use-selection-renderer.tsx"],"names":[],"mappings":"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"}