@rowsncolumns/spreadsheet 10.2.68

package/dist/esm/hooks/use-move-columns-rows.d.ts

@@ -0,0 +1,46 @@
+import type { CellInterface, CellPosition, OptionalCellInterface, PosXYRequired, ScrollCoords } from "@rowsncolumns/grid";
+import React from "react";
+import type { CanvasGridProps } from "../components/canvas-grid/typings";
+import { type DragComponentProps } from "../components/header-move";
+export type ColumnRowMoveOptions = {
+    /**
+     * Get cell offset and dimension
+     * @param cell
+     */
+    getCellOffsetFromCoords(cell: CellInterface): CellPosition | undefined;
+    getCellCoordsFromOffset(x: number, y: number, includeFrozen?: boolean): CellInterface | null | undefined;
+    getRelativePositionFromOffset: (x: number, y: number) => PosXYRequired | null | undefined;
+    scrollToCell: (cell: OptionalCellInterface) => void | undefined;
+    focusSheet: () => void;
+    columns?: number[];
+    rows?: number[];
+    selectionLeftBound?: number;
+    selectionTopBound?: number;
+    containerWidth: number;
+    containerHeight: number;
+    onMoveColumns: CanvasGridProps["onMoveColumns"];
+    onMoveRows: CanvasGridProps["onMoveRows"];
+    /**
+     * Get current scroll position
+     */
+    getScrollPosition: () => ScrollCoords | undefined;
+    onMouseMove?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    onChangeSelections: CanvasGridProps["onChangeSelections"];
+    onChangeActiveCell: CanvasGridProps["onChangeActiveCell"];
+    rowCount: number;
+    columnCount: number;
+    sheetId: number;
+    disabled: boolean;
+    activeCell: CellInterface;
+    HeaderMoveDragComponent?: React.ComponentType<DragComponentProps>;
+};
+/**
+ * Column Row move hook
+ * @param param0
+ */
+export declare const useMoveColumnsAndRows: ({ getCellOffsetFromCoords, getCellCoordsFromOffset, getRelativePositionFromOffset, scrollToCell, focusSheet, columns, rows, selectionLeftBound, selectionTopBound, onMoveColumns, onMoveRows, containerWidth, containerHeight, rowCount, columnCount, sheetId, onChangeSelections, onChangeActiveCell, getScrollPosition, disabled, activeCell, HeaderMoveDragComponent: HeaderMoveDragComponentComponent, }: ColumnRowMoveOptions) => {
+    isDragging: boolean;
+    draggableRows: React.JSX.Element | null;
+    draggableColumns: React.JSX.Element | null;
+};
+//# sourceMappingURL=use-move-columns-rows.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-move-columns-rows.d.ts","sourceRoot":"","sources":["../../../hooks/use-move-columns-rows.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,YAAY,EACZ,qBAAqB,EACrB,aAAa,EACb,YAAY,EACb,MAAM,oBAAoB,CAAC;AAQ5B,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EACL,KAAK,kBAAkB,EAExB,MAAM,2BAA2B,CAAC;AAKnC,MAAM,MAAM,oBAAoB,GAAG;IACjC;;;OAGG;IACH,uBAAuB,CAAC,IAAI,EAAE,aAAa,GAAG,YAAY,GAAG,SAAS,CAAC;IACvE,uBAAuB,CACrB,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,aAAa,CAAC,EAAE,OAAO,GACtB,aAAa,GAAG,IAAI,GAAG,SAAS,CAAC;IACpC,6BAA6B,EAAE,CAC7B,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,KACN,aAAa,GAAG,IAAI,GAAG,SAAS,CAAC;IACtC,YAAY,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,GAAG,SAAS,CAAC;IAChE,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IAChD,UAAU,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IAC1C;;OAEG;IACH,iBAAiB,EAAE,MAAM,YAAY,GAAG,SAAS,CAAC;IAClD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAChE,kBAAkB,EAAE,eAAe,CAAC,oBAAoB,CAAC,CAAC;IAC1D,kBAAkB,EAAE,eAAe,CAAC,oBAAoB,CAAC,CAAC;IAC1D,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,aAAa,CAAC;IAC1B,uBAAuB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;CACnE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,qBAAqB,GAAI,8YAwBnC,oBAAoB;;;;CAuZtB,CAAC"}

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

@@ -0,0 +1,333 @@
+import { Direction } from "@rowsncolumns/grid";
+import { MouseButtonCodes } from "@rowsncolumns/grid";
+import { getMinMaxArray, isNil, selectionBoundsFromCells, } from "@rowsncolumns/utils";
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import { HeaderMoveDragComponent as DefaultHeaderMoveDragComponent, } from "../components/header-move";
+import { DEFAULT_ARRAY } from "../config";
+import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect";
+/**
+ * Column Row move hook
+ * @param param0
+ */
+export const useMoveColumnsAndRows = ({ getCellOffsetFromCoords, getCellCoordsFromOffset, getRelativePositionFromOffset, scrollToCell, focusSheet, columns = DEFAULT_ARRAY, rows = DEFAULT_ARRAY, selectionLeftBound = 0, selectionTopBound = 0, onMoveColumns, onMoveRows, containerWidth, containerHeight, rowCount, columnCount, sheetId, onChangeSelections, onChangeActiveCell, getScrollPosition, disabled, activeCell, HeaderMoveDragComponent: HeaderMoveDragComponentComponent = DefaultHeaderMoveDragComponent, }) => {
+    const [isDragging, setIsDragging] = useState(false);
+    const [offset, setOffset] = useState(0);
+    const [dragOffset, setDragOffset] = useState(0);
+    const gapRef = useRef(0);
+    const startCellRef = useRef(undefined);
+    const startRef = useRef(0);
+    const endRef = useRef(0);
+    const dragAxis = useRef(undefined);
+    const dragDimensions = useRef(undefined);
+    const minBoundOffset = useRef(0);
+    useIsomorphicLayoutEffect(() => {
+        const cell = dragAxis.current === "x"
+            ? { rowIndex: 0, columnIndex: selectionLeftBound }
+            : { rowIndex: selectionTopBound, columnIndex: 0 };
+        const boundedCell = getCellOffsetFromCoords(cell);
+        if (isNil(boundedCell)) {
+            return;
+        }
+        minBoundOffset.current =
+            (dragAxis.current === "x" ? boundedCell.x : boundedCell.y) ?? 0;
+    }, [selectionLeftBound, selectionTopBound, getCellOffsetFromCoords]);
+    /**
+     * MouseMove callback
+     */
+    const handleMouseMove = useCallback((e) => {
+        const axis = dragAxis.current;
+        const coords = getCellCoordsFromOffset(e.clientX, e.clientY, false);
+        if (!coords) {
+            return;
+        }
+        const columnIndex = Math.max(selectionLeftBound, coords.columnIndex);
+        const rowIndex = Math.max(selectionTopBound, coords.rowIndex);
+        const pos = getCellOffsetFromCoords({
+            columnIndex,
+            rowIndex,
+        });
+        if (isNil(pos)) {
+            return;
+        }
+        const index = axis === "x" ? columnIndex : rowIndex;
+        const offset = axis === "x" ? pos.x ?? 0 : pos.y ?? 0;
+        const smartOffset = index >= endRef.current + 1
+            ? axis === "x"
+                ? pos.width
+                : pos.height
+            : 0;
+        if (index <= startRef.current || index >= endRef.current + 1) {
+            setOffset(offset + smartOffset);
+        }
+        const relativePos = getRelativePositionFromOffset(e.clientX, e.clientY);
+        if (!relativePos) {
+            return;
+        }
+        const dragOffset = (axis === "x" ? relativePos.x : relativePos.y) - gapRef.current;
+        const maxOffset = Math.max(minBoundOffset.current, dragOffset);
+        setDragOffset(maxOffset);
+        /**
+         * Scroll to item
+         */
+        scrollToCell(axis === "x" ? { columnIndex: index } : { rowIndex: index });
+    }, [
+        getCellCoordsFromOffset,
+        getCellOffsetFromCoords,
+        getRelativePositionFromOffset,
+        scrollToCell,
+        selectionLeftBound,
+        selectionTopBound,
+    ]);
+    /**
+     * Mouseup
+     */
+    const handleMouseUp = useCallback((e) => {
+        setIsDragging(false);
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        const dimensions = dragDimensions.current;
+        if (!dragAxis.current || !dimensions) {
+            return;
+        }
+        const [min, max] = getMinMaxArray(dimensions);
+        const coords = getCellCoordsFromOffset(e.clientX, e.clientY, false);
+        if (!coords) {
+            return;
+        }
+        // Keep coords in sync with bounds
+        coords.rowIndex = Math.max(coords.rowIndex, selectionTopBound);
+        coords.columnIndex = Math.max(coords.columnIndex, selectionLeftBound);
+        const direction = dragAxis.current === "x"
+            ? coords.columnIndex > (startCellRef.current?.columnIndex ?? 0)
+                ? Direction.Right
+                : Direction.Left
+            : coords.rowIndex > (startCellRef.current?.rowIndex ?? 0)
+                ? Direction.Down
+                : Direction.Up;
+        let { rowIndex, columnIndex } = coords;
+        // Validate rowIndex and columnIndex
+        if ((direction === Direction.Down || direction === Direction.Up) &&
+            rowIndex >= min &&
+            rowIndex <= max) {
+            return;
+        }
+        if ((direction === Direction.Left || direction === Direction.Right) &&
+            columnIndex >= min &&
+            columnIndex <= max) {
+            return;
+        }
+        const hasUserMovedDimensions = dragAxis.current === "x"
+            ? startCellRef.current?.columnIndex !== columnIndex
+            : startCellRef.current?.rowIndex !== rowIndex;
+        if (direction === Direction.Right) {
+            columnIndex =
+                coords.columnIndex - (dragDimensions.current?.length ?? 0) + 1;
+        }
+        if (direction === Direction.Down) {
+            rowIndex = coords.rowIndex - (dragDimensions.current?.length ?? 0) + 1;
+        }
+        if (hasUserMovedDimensions) {
+            // Blocking callback
+            if (dragAxis.current === "x") {
+                onMoveColumns?.(sheetId, dimensions, columnIndex);
+            }
+            else {
+                onMoveRows?.(sheetId, dimensions, rowIndex);
+            }
+            /**
+             * Update selections to the newly created dimensions
+             */
+            const firstActiveCell = dragAxis.current === "x"
+                ? { rowIndex: selectionTopBound, columnIndex: columnIndex }
+                : { rowIndex: rowIndex, columnIndex: selectionLeftBound };
+            const newActiveCell = dragAxis.current === "x"
+                ? { ...activeCell, columnIndex: columnIndex }
+                : { ...activeCell, rowIndex };
+            const newSelections = dragAxis.current === "x"
+                ? selectionBoundsFromCells(firstActiveCell, {
+                    rowIndex: rowCount,
+                    columnIndex: columnIndex + dimensions.length - 1,
+                })
+                : selectionBoundsFromCells(firstActiveCell, {
+                    rowIndex: rowIndex + dimensions.length - 1,
+                    columnIndex: columnCount,
+                });
+            /* Switch to new selection */
+            onChangeSelections?.(sheetId, [{ range: newSelections }]);
+            /* Select the first active cell */
+            onChangeActiveCell?.(sheetId, newActiveCell);
+        }
+        /* Focus on the grid */
+        focusSheet();
+    }, [
+        activeCell,
+        onMoveColumns,
+        onMoveRows,
+        handleMouseMove,
+        focusSheet,
+        getCellCoordsFromOffset,
+        rowCount,
+        columnCount,
+        onChangeSelections,
+        onChangeActiveCell,
+        selectionLeftBound,
+        selectionTopBound,
+        sheetId,
+    ]);
+    /**
+     * MouseDown callback
+     */
+    const handleMouseDown = useCallback((e) => {
+        const isContextMenu = e.button === MouseButtonCodes.right || e.ctrlKey;
+        if (isContextMenu) {
+            return;
+        }
+        /**
+         * Get the axis,
+         */
+        const scrollPosition = getScrollPosition();
+        const coords = getCellCoordsFromOffset(e.nativeEvent.clientX - (scrollPosition?.scrollLeft ?? 0), e.nativeEvent.clientY - (scrollPosition?.scrollTop ?? 0), false);
+        if (!coords) {
+            return;
+        }
+        const axis = coords?.rowIndex === 0 ? "x" : "y";
+        const dims = axis === "x" ? columns : rows;
+        const [min, max] = getMinMaxArray(dims);
+        // Set start cell
+        startCellRef.current = coords;
+        startRef.current = min;
+        endRef.current = max;
+        dragAxis.current = axis;
+        dragDimensions.current = dims;
+        const cell = axis === "x"
+            ? { rowIndex: 0, columnIndex: min }
+            : { rowIndex: min, columnIndex: 0 };
+        const pos = getCellOffsetFromCoords(cell);
+        if (isNil(pos)) {
+            return;
+        }
+        const offset = axis === "x" ? pos.x ?? 0 : pos.y ?? 0;
+        const relativePos = getRelativePositionFromOffset(e.nativeEvent.clientX, e.nativeEvent.clientY);
+        if (!relativePos) {
+            return;
+        }
+        gapRef.current =
+            axis === "x"
+                ? relativePos.x - (pos.x ?? 0) + (scrollPosition?.scrollLeft ?? 0)
+                : relativePos.y - (pos.y ?? 0) + (scrollPosition?.scrollTop ?? 0);
+        const dragOffset = (axis === "x" ? relativePos.x : relativePos.y) - gapRef.current;
+        setIsDragging(true);
+        setOffset(offset);
+        setDragOffset(dragOffset);
+        /**
+         * Add mousemove and up listeners
+         */
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+    }, [
+        columns,
+        rows,
+        getScrollPosition,
+        getCellCoordsFromOffset,
+        getCellOffsetFromCoords,
+        getRelativePositionFromOffset,
+        handleMouseMove,
+        handleMouseUp,
+    ]);
+    /**
+     * Draggable columns component
+     */
+    const draggableColumns = useMemo(() => {
+        if (disabled || !columns.length || columns.length === columnCount) {
+            return null;
+        }
+        const [min, max] = getMinMaxArray(columns);
+        const minLeft = getCellOffsetFromCoords({
+            rowIndex: 0,
+            columnIndex: selectionLeftBound,
+        });
+        const posLeft = getCellOffsetFromCoords({
+            rowIndex: 0,
+            columnIndex: min,
+        });
+        const posRight = getCellOffsetFromCoords({
+            rowIndex: 0,
+            columnIndex: max,
+        });
+        if (posLeft === undefined || posRight === undefined) {
+            return null;
+        }
+        const scrollLeft = getScrollPosition()?.scrollLeft ?? 0;
+        const x = (posLeft.x ?? 0) - scrollLeft;
+        const width = (posRight.x ?? 0) - (posLeft.x ?? 0) + (posRight.width ?? 0);
+        const finalDragOffset = Math.max(minLeft?.x ?? 0, Math.min(containerWidth - width, dragOffset));
+        const borderOffset = Math.max(minLeft?.x ?? 0, // UP
+        Math.min(offset - scrollLeft, containerWidth) // Down
+        );
+        return (React.createElement(HeaderMoveDragComponentComponent, { x: x, y: posLeft?.y, width: width, height: posLeft?.height, isDragging: isDragging, offset: borderOffset, dragOffset: finalDragOffset, onMouseDown: handleMouseDown, axis: dragAxis.current, containerHeight: containerHeight, containerWidth: containerWidth }));
+    }, [
+        disabled,
+        columns,
+        columnCount,
+        isDragging,
+        offset,
+        dragOffset,
+        getScrollPosition,
+        containerWidth,
+        containerHeight,
+        getCellOffsetFromCoords,
+        handleMouseDown,
+        selectionLeftBound,
+        HeaderMoveDragComponentComponent,
+    ]);
+    /**
+     * Draggable rows component
+     */
+    const draggableRows = useMemo(() => {
+        if (disabled || !rows.length || rows.length === rowCount) {
+            return null;
+        }
+        const [min, max] = getMinMaxArray(rows);
+        const minTop = getCellOffsetFromCoords({
+            rowIndex: selectionTopBound,
+            columnIndex: 0,
+        });
+        const posLeft = getCellOffsetFromCoords({
+            rowIndex: min,
+            columnIndex: 0,
+        });
+        const posRight = getCellOffsetFromCoords({
+            rowIndex: max,
+            columnIndex: 0,
+        });
+        if (posLeft === undefined || posRight === undefined) {
+            return null;
+        }
+        const scrollTop = getScrollPosition()?.scrollTop ?? 0;
+        const height = (posRight.y ?? 0) - (posLeft.y ?? 0) + (posRight.height ?? 0);
+        const finalDragOffset = Math.max(minTop?.y ?? 0, Math.min(containerHeight - height, dragOffset));
+        const borderOffset = Math.max(minTop?.y ?? 0, // UP
+        Math.min(offset - scrollTop, containerHeight) // Down
+        );
+        return (React.createElement(HeaderMoveDragComponentComponent, { x: posLeft.x, y: (posLeft?.y ?? 0) - scrollTop, width: posRight.width, height: height, isDragging: isDragging, offset: borderOffset, dragOffset: finalDragOffset, onMouseDown: handleMouseDown, axis: dragAxis.current, containerHeight: containerHeight, containerWidth: containerWidth }));
+    }, [
+        disabled,
+        rows,
+        rowCount,
+        isDragging,
+        offset,
+        dragOffset,
+        getScrollPosition,
+        containerWidth,
+        containerHeight,
+        getCellOffsetFromCoords,
+        handleMouseDown,
+        selectionTopBound,
+        HeaderMoveDragComponentComponent,
+    ]);
+    return {
+        isDragging,
+        draggableRows,
+        draggableColumns,
+    };
+};

package/dist/esm/hooks/use-navigate-sheet-range.d.ts

@@ -0,0 +1,16 @@
+import type { Align, CellInterface } from "@rowsncolumns/grid";
+import type { CanvasGridProps, Color, SheetRange } from "@rowsncolumns/spreadsheet";
+export type UseNavigateToSheetProps = {
+    onChangeActiveSheet: CanvasGridProps["onChangeActiveSheet"];
+    onChangeSelections: CanvasGridProps["onChangeSelections"];
+    setActiveCell: (sheetId: number, coords: CellInterface, shouldScroll?: boolean, align?: Align) => void;
+    flash: (range: SheetRange, color: Color, duration?: number) => void;
+};
+export type NavigateOptions = {
+    enableFlash?: boolean;
+    flashColor?: Color;
+    flashDuration?: number;
+    allowSelection?: boolean;
+};
+export declare const useNavigateToSheetRange: ({ onChangeActiveSheet, onChangeSelections, setActiveCell, flash, }: UseNavigateToSheetProps) => (sheetRange: SheetRange, options?: NavigateOptions) => void;
+//# sourceMappingURL=use-navigate-sheet-range.d.ts.map

package/dist/esm/hooks/use-navigate-sheet-range.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-navigate-sheet-range.d.ts","sourceRoot":"","sources":["../../../hooks/use-navigate-sheet-range.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAE/D,OAAO,KAAK,EACV,eAAe,EACf,KAAK,EACL,UAAU,EACX,MAAM,2BAA2B,CAAC;AAMnC,MAAM,MAAM,uBAAuB,GAAG;IACpC,mBAAmB,EAAE,eAAe,CAAC,qBAAqB,CAAC,CAAC;IAC5D,kBAAkB,EAAE,eAAe,CAAC,oBAAoB,CAAC,CAAC;IAC1D,aAAa,EAAE,CACb,OAAO,EAAE,MAAM,EACf,MAAM,EAAE,aAAa,EACrB,YAAY,CAAC,EAAE,OAAO,EACtB,KAAK,CAAC,EAAE,KAAK,KACV,IAAI,CAAC;IACV,KAAK,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACrE,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,oEAKrC,uBAAuB,kBAGP,UAAU,YAAY,eAAe,SAsCvD,CAAC"}

package/dist/esm/hooks/use-navigate-sheet-range.js

@@ -0,0 +1,30 @@
+import { useCallbackRef } from "@rowsncolumns/grid";
+import { MAX_COLUMN_COUNT, MAX_ROW_COUNT } from "@rowsncolumns/spreadsheet";
+import { useCallback } from "react";
+import { isSheetRangeACell } from "../api/selections";
+export const useNavigateToSheetRange = ({ onChangeActiveSheet, onChangeSelections, setActiveCell, flash, }) => {
+    return useCallbackRef(useCallback((sheetRange, options) => {
+        const { enableFlash = true, flashColor = "#ffcc00", flashDuration = 1500, } = options ?? {};
+        const maxRowIndex = Math.min(MAX_ROW_COUNT, sheetRange.startRowIndex);
+        const allowSelection = options?.allowSelection ?? true;
+        const maxColumnIndex = Math.min(MAX_COLUMN_COUNT, sheetRange.startColumnIndex);
+        const tl = {
+            rowIndex: maxRowIndex,
+            columnIndex: maxColumnIndex,
+        };
+        // Switch to new sheet
+        onChangeActiveSheet?.(sheetRange.sheetId);
+        if (allowSelection && !isSheetRangeACell(sheetRange)) {
+            onChangeSelections?.(sheetRange.sheetId, [{ range: sheetRange }]);
+        }
+        // Set active cell
+        if (allowSelection) {
+            const scrollToCell = true;
+            setActiveCell?.(sheetRange.sheetId, tl, scrollToCell);
+        }
+        // Flash
+        if (enableFlash) {
+            flash?.(sheetRange, flashColor, flashDuration);
+        }
+    }, [setActiveCell, flash, onChangeActiveSheet, onChangeSelections]));
+};

package/dist/esm/hooks/use-previous.d.ts

@@ -0,0 +1,3 @@
+import type { RefObject } from "react";
+export declare function usePrevious<T>(value: T): RefObject<T | undefined>["current"];
+//# sourceMappingURL=use-previous.d.ts.map

package/dist/esm/hooks/use-previous.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-previous.d.ts","sourceRoot":"","sources":["../../../hooks/use-previous.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,wBAAgB,WAAW,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,SAAS,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC,SAAS,CAAC,CAM5E"}

package/dist/esm/hooks/use-previous.js

@@ -0,0 +1,9 @@
+import { useRef } from "react";
+import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect";
+export function usePrevious(value) {
+    const ref = useRef(undefined);
+    useIsomorphicLayoutEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+}

package/dist/esm/hooks/use-raf.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Like useCallback, but the returned function is wrapped in requestAnimationFrame.
+ * Multiple calls before the frame fires will cancel previous ones (debounced to frame).
+ */
+export declare function useRaf<T extends (...args: any[]) => void>(callback: T, deps: React.DependencyList): T;
+//# sourceMappingURL=use-raf.d.ts.map

package/dist/esm/hooks/use-raf.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-raf.d.ts","sourceRoot":"","sources":["../../../hooks/use-raf.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,wBAAgB,MAAM,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,EACvD,QAAQ,EAAE,CAAC,EACX,IAAI,EAAE,KAAK,CAAC,cAAc,GACzB,CAAC,CA4BH"}

package/dist/esm/hooks/use-raf.js

@@ -0,0 +1,27 @@
+import { useCallback, useEffect, useRef } from "react";
+/**
+ * Like useCallback, but the returned function is wrapped in requestAnimationFrame.
+ * Multiple calls before the frame fires will cancel previous ones (debounced to frame).
+ */
+export function useRaf(callback, deps) {
+    const rafRef = useRef(null);
+    const memoizedCallback = useCallback(callback, deps);
+    const rafCallback = useCallback((...args) => {
+        if (rafRef.current !== null) {
+            cancelAnimationFrame(rafRef.current);
+        }
+        rafRef.current = requestAnimationFrame(() => {
+            rafRef.current = null;
+            memoizedCallback(...args);
+        });
+    }, [memoizedCallback]);
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            if (rafRef.current !== null) {
+                cancelAnimationFrame(rafRef.current);
+            }
+        };
+    }, []);
+    return rafCallback;
+}

package/dist/esm/hooks/use-resize-observer.d.ts

@@ -0,0 +1,6 @@
+type HTMLOrSVGElement = HTMLElement | SVGElement;
+export type RectReadOnly = Omit<DOMRect, "toJSON">;
+type Result<T> = [React.RefObject<T | null>, RectReadOnly];
+export declare const useResizeObserver: <T extends HTMLOrSVGElement>() => Result<T>;
+export {};
+//# sourceMappingURL=use-resize-observer.d.ts.map

package/dist/esm/hooks/use-resize-observer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-resize-observer.d.ts","sourceRoot":"","sources":["../../../hooks/use-resize-observer.ts"],"names":[],"mappings":"AAIA,KAAK,gBAAgB,GAAG,WAAW,GAAG,UAAU,CAAC;AAEjD,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;AAEnD,KAAK,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,YAAY,CAAC,CAAC;AAE3D,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,gBAAgB,OAAK,MAAM,CAAC,CAAC,CAwCxE,CAAC"}

package/dist/esm/hooks/use-resize-observer.js

@@ -0,0 +1,40 @@
+import { useCallback, useRef, useState } from "react";
+import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect";
+export const useResizeObserver = () => {
+    const [observerEntry, setObserverEntry] = useState({
+        left: 0,
+        top: 0,
+        width: 0,
+        height: 0,
+        bottom: 0,
+        right: 0,
+        x: 0,
+        y: 0,
+    });
+    const node = useRef(null);
+    const observer = useRef(undefined);
+    const disconnect = useCallback(() => observer.current?.disconnect(), []);
+    const observe = useCallback(() => {
+        observer.current = new ResizeObserver(([entry]) => {
+            const { left, top, width, height, bottom, right, x, y } = entry.contentRect;
+            setObserverEntry({
+                left,
+                top,
+                width,
+                height,
+                bottom,
+                right,
+                x,
+                y,
+            });
+        });
+        if (node.current) {
+            observer.current.observe(node.current);
+        }
+    }, [node]);
+    useIsomorphicLayoutEffect(() => {
+        observe();
+        return () => disconnect();
+    }, [disconnect, observe]);
+    return [node, observerEntry];
+};

package/dist/esm/hooks/use-scale-listener.d.ts

@@ -0,0 +1,11 @@
+import type React from "react";
+type UseScaleListenerProps = {
+    scale?: number;
+    minScale?: number;
+    maxScale?: number;
+    zoomSpeed: number;
+    onChangeScale?: (value: number) => void;
+};
+export declare const useScaleListener: ({ onChangeScale, scale, minScale, maxScale, zoomSpeed, }: UseScaleListenerProps) => (e: React.WheelEvent<HTMLDivElement>) => void;
+export {};
+//# sourceMappingURL=use-scale-listener.d.ts.map

package/dist/esm/hooks/use-scale-listener.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-scale-listener.d.ts","sourceRoot":"","sources":["../../../hooks/use-scale-listener.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,KAAK,qBAAqB,GAAG;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,0DAM9B,qBAAqB,SAmBhB,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,SA0CvC,CAAC"}

package/dist/esm/hooks/use-scale-listener.js

@@ -0,0 +1,47 @@
+import { useCallback, useEffect, useRef } from "react";
+import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect";
+export const useScaleListener = ({ onChangeScale, scale = 1, minScale = 0.25, maxScale = 4, zoomSpeed = 5, }) => {
+    const scaleRef = useRef(scale);
+    const rafRef = useRef(null);
+    const pendingDeltaRef = useRef(0);
+    useIsomorphicLayoutEffect(() => {
+        scaleRef.current = scale;
+    }, [scale]);
+    useEffect(() => {
+        return () => {
+            if (rafRef.current) {
+                window.cancelAnimationFrame(rafRef.current);
+                rafRef.current = null;
+            }
+        };
+    }, []);
+    return useCallback((e) => {
+        const isCtrl = e.ctrlKey; // Ctrl
+        const isShift = e.shiftKey; // Shift
+        const isAlt = e.altKey; // Option
+        if (isCtrl && (isShift || isAlt)) {
+            const rawDelta = e.deltaY || e.detail || 0;
+            const normalizedDelta = e.deltaMode === 1
+                ? rawDelta * 16
+                : e.deltaMode === 2
+                    ? rawDelta * 120
+                    : rawDelta;
+            pendingDeltaRef.current += normalizedDelta;
+            if (rafRef.current) {
+                return;
+            }
+            rafRef.current = window.requestAnimationFrame(() => {
+                rafRef.current = null;
+                const delta = pendingDeltaRef.current;
+                pendingDeltaRef.current = 0;
+                // Exponential scaling is smoother than linear increments.
+                const factor = Math.exp((-delta * zoomSpeed) / 1200);
+                const nextScale = Math.min(Math.max(scaleRef.current * factor, minScale), maxScale);
+                if (Math.abs(nextScale - scaleRef.current) > 0.0001) {
+                    scaleRef.current = nextScale;
+                    onChangeScale?.(nextScale);
+                }
+            });
+        }
+    }, [minScale, maxScale, zoomSpeed, onChangeScale]);
+};

package/dist/esm/hooks/use-selected-rows-columns.d.ts

@@ -0,0 +1,21 @@
+import type { CellInterface, GridRange, SelectionArea } from "@rowsncolumns/grid";
+type Input = {
+    activeCell?: CellInterface | null;
+    selections: SelectionArea[];
+    selectionLeftBound: number;
+    selectionTopBound: number;
+    rowCount: number;
+    columnCount: number;
+    getCellBounds(coords: CellInterface, spanMerges?: boolean | undefined): GridRange | undefined;
+};
+type Result = [
+    Record<string, boolean>,
+    Record<string, boolean>,
+    Record<string, boolean>,
+    Record<string, boolean>,
+    number[],
+    number[]
+];
+export declare const useSelectedRowsColumns: ({ activeCell, selections, selectionLeftBound, selectionTopBound, rowCount, columnCount, getCellBounds, }: Input) => Result;
+export {};
+//# sourceMappingURL=use-selected-rows-columns.d.ts.map

package/dist/esm/hooks/use-selected-rows-columns.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-selected-rows-columns.d.ts","sourceRoot":"","sources":["../../../hooks/use-selected-rows-columns.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,SAAS,EACT,aAAa,EACd,MAAM,oBAAoB,CAAC;AAG5B,KAAK,KAAK,GAAG;IACX,UAAU,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAClC,UAAU,EAAE,aAAa,EAAE,CAAC;IAC5B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,CACX,MAAM,EAAE,aAAa,EACrB,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,GAC/B,SAAS,GAAG,SAAS,CAAC;CAC1B,CAAC;AAEF,KAAK,MAAM,GAAG;IACZ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACvB,MAAM,EAAE;IACR,MAAM,EAAE;CACT,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,0GAQpC,KAAK,KAAG,MAiEV,CAAC"}