@rowsncolumns/spreadsheet 10.2.68

package/dist/cjs/hooks/use-licensekey-validator.js

@@ -0,0 +1,180 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateLicenseCode = exports.useLicenseKeyValidator = void 0;
+var tslib_1 = require("tslib");
+var grid_1 = require("@rowsncolumns/grid");
+var icons_1 = require("@rowsncolumns/icons");
+var ui_1 = require("@rowsncolumns/ui");
+var ui_2 = require("@rowsncolumns/ui");
+var react_1 = tslib_1.__importStar(require("react"));
+var config_1 = require("../config");
+var release_date_1 = require("../release-date");
+var EVALUATION_LICENSE_KEY = "evaluation-license";
+var algo = "SHA-256";
+var secret = "rowsncolumns-license";
+// v2 signed keys: `rowsncolumns.<base64url payload>.<base64url ECDSA P-256
+// signature>`. The payload (id, licensee, type, end) is covered by the
+// signature, so the version-cutoff date cannot be edited. Keys are minted
+// with scripts/license-keygen.mjs; the private key never ships.
+var V2_PREFIX = "rowsncolumns.";
+var V2_PUBLIC_KEY = "MFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAE+1nphJOQWgRXHVynHqUqfTeeNIIkwV6LcYfBxWq+GnguEkI6uIWfiQWw9xa/eGWg+dGcAqcWStJJknx74S7wqw==";
+var useLicenseKeyValidator = function (_a) {
+    var licenseKey = _a.licenseKey;
+    var _b = tslib_1.__read((0, react_1.useState)(true), 2), isValid = _b[0], setIsValid = _b[1];
+    var _c = tslib_1.__read((0, react_1.useState)(false), 2), isExpired = _c[0], setIsExpired = _c[1];
+    var _d = tslib_1.__read((0, react_1.useState)(undefined), 2), licenseType = _d[0], setLicenseType = _d[1];
+    (0, ui_1.useIsomorphicLayoutEffect)(function () {
+        if (!licenseKey) {
+            setIsValid(false);
+        }
+        function validate() {
+            return tslib_1.__awaiter(this, void 0, void 0, function () {
+                var isEvaluation, _a, isValid, isExpired, licenseType, _b, _c;
+                return tslib_1.__generator(this, function (_d) {
+                    switch (_d.label) {
+                        case 0:
+                            isEvaluation = licenseKey === EVALUATION_LICENSE_KEY;
+                            if (!isEvaluation) return [3 /*break*/, 1];
+                            _b = [true, false, "evaluation"];
+                            return [3 /*break*/, 5];
+                        case 1:
+                            if (!licenseKey) return [3 /*break*/, 3];
+                            return [4 /*yield*/, (0, exports.validateLicenseCode)(licenseKey)];
+                        case 2:
+                            _c = _d.sent();
+                            return [3 /*break*/, 4];
+                        case 3:
+                            _c = [false, false, undefined];
+                            _d.label = 4;
+                        case 4:
+                            _b = _c;
+                            _d.label = 5;
+                        case 5:
+                            _a = tslib_1.__read.apply(void 0, [_b, 3]), isValid = _a[0], isExpired = _a[1], licenseType = _a[2];
+                            // Set license flags
+                            setIsValid(isValid);
+                            setIsExpired(isExpired);
+                            setLicenseType(licenseType);
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        }
+        validate();
+    }, [licenseKey]);
+    var message = isValid
+        ? null
+        : isExpired
+            ? "You are using an evaluation version of Spreadsheet. Please enter a\n        license key to remove this message. Use the `licenseKey` prop in\n        CanvasGrid to validate your Spreadsheet license."
+            : "The license provided is a valid Spreadsheet license, however it is not valid for the\n    current version of Spreadsheet being used. Please renew your license or use\n    the fallback version valid under your license.";
+    return [
+        isValid,
+        licenseType,
+        isValid ? null : react_1.default.createElement(LicenseAlertMessage, { message: message }),
+    ];
+};
+exports.useLicenseKeyValidator = useLicenseKeyValidator;
+var base64ToBytes = function (value) {
+    var normalized = value.replace(/-/g, "+").replace(/_/g, "/");
+    var binary = atob(normalized);
+    var bytes = new Uint8Array(binary.length);
+    for (var i = 0; i < binary.length; i++) {
+        bytes[i] = binary.charCodeAt(i);
+    }
+    return bytes;
+};
+var validateV2LicenseCode = function (licenseCode, publicKey) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+    var _a, payloadPart, signaturePart, payloadBytes, key, isValid, payload, isExpired, _b;
+    return tslib_1.__generator(this, function (_c) {
+        switch (_c.label) {
+            case 0:
+                if (!grid_1.canUseDOM) {
+                    return [2 /*return*/, [false, false, undefined]];
+                }
+                // Allow local usage
+                if (!window.isSecureContext ||
+                    (window.location.hostname === "localhost" && !window.crypto)) {
+                    return [2 /*return*/, [true, false, "professional"]];
+                }
+                _c.label = 1;
+            case 1:
+                _c.trys.push([1, 4, , 5]);
+                _a = tslib_1.__read(licenseCode
+                    .slice(V2_PREFIX.length)
+                    .split("."), 2), payloadPart = _a[0], signaturePart = _a[1];
+                if (!payloadPart || !signaturePart) {
+                    return [2 /*return*/, [false, false, undefined]];
+                }
+                payloadBytes = base64ToBytes(payloadPart);
+                return [4 /*yield*/, crypto.subtle.importKey("spki", base64ToBytes(publicKey), { name: "ECDSA", namedCurve: "P-256" }, false, ["verify"])];
+            case 2:
+                key = _c.sent();
+                return [4 /*yield*/, crypto.subtle.verify({ name: "ECDSA", hash: algo }, key, base64ToBytes(signaturePart), payloadBytes)];
+            case 3:
+                isValid = _c.sent();
+                if (!isValid) {
+                    return [2 /*return*/, [false, false, undefined]];
+                }
+                payload = JSON.parse(new TextDecoder().decode(payloadBytes));
+                isExpired = release_date_1.releaseDate > new Date(payload.end);
+                return [2 /*return*/, [true, isExpired, payload.type]];
+            case 4:
+                _b = _c.sent();
+                return [2 /*return*/, [false, false, undefined]];
+            case 5: return [2 /*return*/];
+        }
+    });
+}); };
+var validateLicenseCode = function (licenseCodeWithUserIdStartEndDate, options) { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+    var _a, licenseCodeWithUserId, startEndDates, _b, userId, licenseType, licenseCode, _c, _, endDate, endDateValue, decodedLicenseCode, licenseKey, encoder, data, isValid, isExpired;
+    var _d, _e, _f;
+    return tslib_1.__generator(this, function (_g) {
+        switch (_g.label) {
+            case 0:
+                if (licenseCodeWithUserIdStartEndDate.startsWith(V2_PREFIX)) {
+                    return [2 /*return*/, validateV2LicenseCode(licenseCodeWithUserIdStartEndDate, (_d = options === null || options === void 0 ? void 0 : options.publicKey) !== null && _d !== void 0 ? _d : V2_PUBLIC_KEY)];
+                }
+                _a = tslib_1.__read(licenseCodeWithUserIdStartEndDate.split("|"), 2), licenseCodeWithUserId = _a[0], startEndDates = _a[1];
+                _b = tslib_1.__read(licenseCodeWithUserId.split(/-(.*?)-(.*)/gi), 3), userId = _b[0], licenseType = _b[1], licenseCode = _b[2];
+                _c = tslib_1.__read((_e = startEndDates === null || startEndDates === void 0 ? void 0 : startEndDates.split(" ")) !== null && _e !== void 0 ? _e : config_1.DEFAULT_ARRAY, 2), _ = _c[0], endDate = _c[1];
+                endDateValue = new Date(endDate);
+                decodedLicenseCode = licenseCode.replace(/-/g, "");
+                licenseKey = "".concat(userId, "-").concat(licenseType, "-").concat(secret);
+                encoder = new TextEncoder();
+                data = encoder.encode(licenseKey);
+                if (!grid_1.canUseDOM) return [3 /*break*/, 2];
+                if (!window.isSecureContext ||
+                    (window.location.hostname === "localhost" && !window.crypto)) {
+                    return [2 /*return*/, [true, false, "professional"]];
+                }
+                return [4 /*yield*/, ((_f = crypto.subtle) === null || _f === void 0 ? void 0 : _f.digest(algo, data).then(function (hashBuffer) {
+                        var hashArray = Array.from(new Uint8Array(hashBuffer));
+                        var hash = hashArray
+                            .map(function (byte) { return byte.toString(16).padStart(2, "0"); })
+                            .join(""); // Convert the hash buffer to hexadecimal string
+                        return decodedLicenseCode === hash;
+                    }))];
+            case 1:
+                isValid = _g.sent();
+                isExpired = release_date_1.releaseDate > endDateValue;
+                return [2 /*return*/, [
+                        isValid,
+                        isExpired,
+                        licenseType,
+                    ]];
+            case 2: return [2 /*return*/, [false, false, undefined]];
+        }
+    });
+}); };
+exports.validateLicenseCode = validateLicenseCode;
+var LicenseAlertMessage = function (_a) {
+    var message = _a.message;
+    return (react_1.default.createElement(ui_2.Stack, { className: "absolute bottom-4 right-4 p-2 text-xs bg-rnc-muted-foreground/80 text-rnc-muted max-w-[500px] flex-col gap-4" },
+        react_1.default.createElement("div", null, message),
+        react_1.default.createElement("div", null,
+            "To purchase a license, please visit",
+            " ",
+            react_1.default.createElement("a", { className: "text-rnc-muted hover:text-rnc-muted active:text-rnc-muted focus:text-rnc-muted underline-offset-2", target: "_blank", href: "https://www.rowsncolumns.app/pricing", rel: "noreferrer" },
+                "www.rowsncolumns.app. ",
+                react_1.default.createElement(icons_1.OpenInNewWindowIcon, null)))));
+};

package/dist/cjs/hooks/use-memo-compare.d.ts

@@ -0,0 +1,2 @@
+export declare const useMemoCompare: <T>(next: T) => T;
+//# sourceMappingURL=use-memo-compare.d.ts.map

package/dist/cjs/hooks/use-memo-compare.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-memo-compare.d.ts","sourceRoot":"","sources":["../../../hooks/use-memo-compare.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,GAAI,CAAC,EAAE,MAAM,CAAC,KAAG,CAS3C,CAAC"}

package/dist/cjs/hooks/use-memo-compare.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMemoCompare = void 0;
+var tslib_1 = require("tslib");
+var grid_1 = require("@rowsncolumns/grid");
+var isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
+var react_1 = require("react");
+var useMemoCompare = function (next) {
+    var previousRef = (0, react_1.useRef)(undefined);
+    var previous = previousRef.current;
+    var isEqual = (0, isEqual_1.default)(previous, next);
+    (0, grid_1.useIsomorphicLayoutEffect)(function () {
+        if (!isEqual)
+            previousRef.current = next;
+    }, [next]);
+    return isEqual ? previous !== null && previous !== void 0 ? previous : next : next;
+};
+exports.useMemoCompare = useMemoCompare;

package/dist/cjs/hooks/use-merge.refs.d.ts

@@ -0,0 +1,4 @@
+import type * as React from "react";
+export declare function mergeRefs<T = any>(...refs: Array<React.MutableRefObject<T> | React.LegacyRef<T> | undefined | null>): React.RefCallback<T>;
+export declare function useMergeRefs<T = any>(...refs: Array<React.MutableRefObject<T> | React.LegacyRef<T> | undefined | null>): React.RefCallback<T>;
+//# sourceMappingURL=use-merge.refs.d.ts.map

package/dist/cjs/hooks/use-merge.refs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-merge.refs.d.ts","sourceRoot":"","sources":["../../../hooks/use-merge.refs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,wBAAgB,SAAS,CAAC,CAAC,GAAG,GAAG,EAC/B,GAAG,IAAI,EAAE,KAAK,CACZ,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,GAAG,IAAI,CAClE,GACA,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAUtB;AAED,wBAAgB,YAAY,CAAC,CAAC,GAAG,GAAG,EAClC,GAAG,IAAI,EAAE,KAAK,CACZ,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,GAAG,IAAI,CAClE,GACA,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAEtB"}

package/dist/cjs/hooks/use-merge.refs.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mergeRefs = mergeRefs;
+exports.useMergeRefs = useMergeRefs;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+function mergeRefs() {
+    var refs = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        refs[_i] = arguments[_i];
+    }
+    return function (value) {
+        refs.forEach(function (ref) {
+            if (typeof ref === "function") {
+                ref(value);
+            }
+            else if (ref != null) {
+                ref.current = value;
+            }
+        });
+    };
+}
+function useMergeRefs() {
+    var refs = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        refs[_i] = arguments[_i];
+    }
+    return (0, react_1.useMemo)(function () { return mergeRefs.apply(void 0, tslib_1.__spreadArray([], tslib_1.__read(refs), false)); }, refs);
+}

package/dist/cjs/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/cjs/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/cjs/hooks/use-move-columns-rows.js

@@ -0,0 +1,344 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMoveColumnsAndRows = void 0;
+var tslib_1 = require("tslib");
+var grid_1 = require("@rowsncolumns/grid");
+var grid_2 = require("@rowsncolumns/grid");
+var utils_1 = require("@rowsncolumns/utils");
+var react_1 = tslib_1.__importStar(require("react"));
+var header_move_1 = require("../components/header-move");
+var config_1 = require("../config");
+var use_isomorphic_layout_effect_1 = require("./use-isomorphic-layout-effect");
+/**
+ * Column Row move hook
+ * @param param0
+ */
+var useMoveColumnsAndRows = function (_a) {
+    var getCellOffsetFromCoords = _a.getCellOffsetFromCoords, getCellCoordsFromOffset = _a.getCellCoordsFromOffset, getRelativePositionFromOffset = _a.getRelativePositionFromOffset, scrollToCell = _a.scrollToCell, focusSheet = _a.focusSheet, _b = _a.columns, columns = _b === void 0 ? config_1.DEFAULT_ARRAY : _b, _c = _a.rows, rows = _c === void 0 ? config_1.DEFAULT_ARRAY : _c, _d = _a.selectionLeftBound, selectionLeftBound = _d === void 0 ? 0 : _d, _e = _a.selectionTopBound, selectionTopBound = _e === void 0 ? 0 : _e, onMoveColumns = _a.onMoveColumns, onMoveRows = _a.onMoveRows, containerWidth = _a.containerWidth, containerHeight = _a.containerHeight, rowCount = _a.rowCount, columnCount = _a.columnCount, sheetId = _a.sheetId, onChangeSelections = _a.onChangeSelections, onChangeActiveCell = _a.onChangeActiveCell, getScrollPosition = _a.getScrollPosition, disabled = _a.disabled, activeCell = _a.activeCell, _f = _a.HeaderMoveDragComponent, HeaderMoveDragComponentComponent = _f === void 0 ? header_move_1.HeaderMoveDragComponent : _f;
+    var _g = tslib_1.__read((0, react_1.useState)(false), 2), isDragging = _g[0], setIsDragging = _g[1];
+    var _h = tslib_1.__read((0, react_1.useState)(0), 2), offset = _h[0], setOffset = _h[1];
+    var _j = tslib_1.__read((0, react_1.useState)(0), 2), dragOffset = _j[0], setDragOffset = _j[1];
+    var gapRef = (0, react_1.useRef)(0);
+    var startCellRef = (0, react_1.useRef)(undefined);
+    var startRef = (0, react_1.useRef)(0);
+    var endRef = (0, react_1.useRef)(0);
+    var dragAxis = (0, react_1.useRef)(undefined);
+    var dragDimensions = (0, react_1.useRef)(undefined);
+    var minBoundOffset = (0, react_1.useRef)(0);
+    (0, use_isomorphic_layout_effect_1.useIsomorphicLayoutEffect)(function () {
+        var _a;
+        var cell = dragAxis.current === "x"
+            ? { rowIndex: 0, columnIndex: selectionLeftBound }
+            : { rowIndex: selectionTopBound, columnIndex: 0 };
+        var boundedCell = getCellOffsetFromCoords(cell);
+        if ((0, utils_1.isNil)(boundedCell)) {
+            return;
+        }
+        minBoundOffset.current =
+            (_a = (dragAxis.current === "x" ? boundedCell.x : boundedCell.y)) !== null && _a !== void 0 ? _a : 0;
+    }, [selectionLeftBound, selectionTopBound, getCellOffsetFromCoords]);
+    /**
+     * MouseMove callback
+     */
+    var handleMouseMove = (0, react_1.useCallback)(function (e) {
+        var _a, _b;
+        var axis = dragAxis.current;
+        var coords = getCellCoordsFromOffset(e.clientX, e.clientY, false);
+        if (!coords) {
+            return;
+        }
+        var columnIndex = Math.max(selectionLeftBound, coords.columnIndex);
+        var rowIndex = Math.max(selectionTopBound, coords.rowIndex);
+        var pos = getCellOffsetFromCoords({
+            columnIndex: columnIndex,
+            rowIndex: rowIndex,
+        });
+        if ((0, utils_1.isNil)(pos)) {
+            return;
+        }
+        var index = axis === "x" ? columnIndex : rowIndex;
+        var offset = axis === "x" ? (_a = pos.x) !== null && _a !== void 0 ? _a : 0 : (_b = pos.y) !== null && _b !== void 0 ? _b : 0;
+        var smartOffset = index >= endRef.current + 1
+            ? axis === "x"
+                ? pos.width
+                : pos.height
+            : 0;
+        if (index <= startRef.current || index >= endRef.current + 1) {
+            setOffset(offset + smartOffset);
+        }
+        var relativePos = getRelativePositionFromOffset(e.clientX, e.clientY);
+        if (!relativePos) {
+            return;
+        }
+        var dragOffset = (axis === "x" ? relativePos.x : relativePos.y) - gapRef.current;
+        var 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
+     */
+    var handleMouseUp = (0, react_1.useCallback)(function (e) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        setIsDragging(false);
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        var dimensions = dragDimensions.current;
+        if (!dragAxis.current || !dimensions) {
+            return;
+        }
+        var _l = tslib_1.__read((0, utils_1.getMinMaxArray)(dimensions), 2), min = _l[0], max = _l[1];
+        var 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);
+        var direction = dragAxis.current === "x"
+            ? coords.columnIndex > ((_b = (_a = startCellRef.current) === null || _a === void 0 ? void 0 : _a.columnIndex) !== null && _b !== void 0 ? _b : 0)
+                ? grid_1.Direction.Right
+                : grid_1.Direction.Left
+            : coords.rowIndex > ((_d = (_c = startCellRef.current) === null || _c === void 0 ? void 0 : _c.rowIndex) !== null && _d !== void 0 ? _d : 0)
+                ? grid_1.Direction.Down
+                : grid_1.Direction.Up;
+        var rowIndex = coords.rowIndex, columnIndex = coords.columnIndex;
+        // Validate rowIndex and columnIndex
+        if ((direction === grid_1.Direction.Down || direction === grid_1.Direction.Up) &&
+            rowIndex >= min &&
+            rowIndex <= max) {
+            return;
+        }
+        if ((direction === grid_1.Direction.Left || direction === grid_1.Direction.Right) &&
+            columnIndex >= min &&
+            columnIndex <= max) {
+            return;
+        }
+        var hasUserMovedDimensions = dragAxis.current === "x"
+            ? ((_e = startCellRef.current) === null || _e === void 0 ? void 0 : _e.columnIndex) !== columnIndex
+            : ((_f = startCellRef.current) === null || _f === void 0 ? void 0 : _f.rowIndex) !== rowIndex;
+        if (direction === grid_1.Direction.Right) {
+            columnIndex =
+                coords.columnIndex - ((_h = (_g = dragDimensions.current) === null || _g === void 0 ? void 0 : _g.length) !== null && _h !== void 0 ? _h : 0) + 1;
+        }
+        if (direction === grid_1.Direction.Down) {
+            rowIndex = coords.rowIndex - ((_k = (_j = dragDimensions.current) === null || _j === void 0 ? void 0 : _j.length) !== null && _k !== void 0 ? _k : 0) + 1;
+        }
+        if (hasUserMovedDimensions) {
+            // Blocking callback
+            if (dragAxis.current === "x") {
+                onMoveColumns === null || onMoveColumns === void 0 ? void 0 : onMoveColumns(sheetId, dimensions, columnIndex);
+            }
+            else {
+                onMoveRows === null || onMoveRows === void 0 ? void 0 : onMoveRows(sheetId, dimensions, rowIndex);
+            }
+            /**
+             * Update selections to the newly created dimensions
+             */
+            var firstActiveCell = dragAxis.current === "x"
+                ? { rowIndex: selectionTopBound, columnIndex: columnIndex }
+                : { rowIndex: rowIndex, columnIndex: selectionLeftBound };
+            var newActiveCell = dragAxis.current === "x"
+                ? tslib_1.__assign(tslib_1.__assign({}, activeCell), { columnIndex: columnIndex }) : tslib_1.__assign(tslib_1.__assign({}, activeCell), { rowIndex: rowIndex });
+            var newSelections = dragAxis.current === "x"
+                ? (0, utils_1.selectionBoundsFromCells)(firstActiveCell, {
+                    rowIndex: rowCount,
+                    columnIndex: columnIndex + dimensions.length - 1,
+                })
+                : (0, utils_1.selectionBoundsFromCells)(firstActiveCell, {
+                    rowIndex: rowIndex + dimensions.length - 1,
+                    columnIndex: columnCount,
+                });
+            /* Switch to new selection */
+            onChangeSelections === null || onChangeSelections === void 0 ? void 0 : onChangeSelections(sheetId, [{ range: newSelections }]);
+            /* Select the first active cell */
+            onChangeActiveCell === null || onChangeActiveCell === void 0 ? void 0 : onChangeActiveCell(sheetId, newActiveCell);
+        }
+        /* Focus on the grid */
+        focusSheet();
+    }, [
+        activeCell,
+        onMoveColumns,
+        onMoveRows,
+        handleMouseMove,
+        focusSheet,
+        getCellCoordsFromOffset,
+        rowCount,
+        columnCount,
+        onChangeSelections,
+        onChangeActiveCell,
+        selectionLeftBound,
+        selectionTopBound,
+        sheetId,
+    ]);
+    /**
+     * MouseDown callback
+     */
+    var handleMouseDown = (0, react_1.useCallback)(function (e) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var isContextMenu = e.button === grid_2.MouseButtonCodes.right || e.ctrlKey;
+        if (isContextMenu) {
+            return;
+        }
+        /**
+         * Get the axis,
+         */
+        var scrollPosition = getScrollPosition();
+        var coords = getCellCoordsFromOffset(e.nativeEvent.clientX - ((_a = scrollPosition === null || scrollPosition === void 0 ? void 0 : scrollPosition.scrollLeft) !== null && _a !== void 0 ? _a : 0), e.nativeEvent.clientY - ((_b = scrollPosition === null || scrollPosition === void 0 ? void 0 : scrollPosition.scrollTop) !== null && _b !== void 0 ? _b : 0), false);
+        if (!coords) {
+            return;
+        }
+        var axis = (coords === null || coords === void 0 ? void 0 : coords.rowIndex) === 0 ? "x" : "y";
+        var dims = axis === "x" ? columns : rows;
+        var _j = tslib_1.__read((0, utils_1.getMinMaxArray)(dims), 2), min = _j[0], max = _j[1];
+        // Set start cell
+        startCellRef.current = coords;
+        startRef.current = min;
+        endRef.current = max;
+        dragAxis.current = axis;
+        dragDimensions.current = dims;
+        var cell = axis === "x"
+            ? { rowIndex: 0, columnIndex: min }
+            : { rowIndex: min, columnIndex: 0 };
+        var pos = getCellOffsetFromCoords(cell);
+        if ((0, utils_1.isNil)(pos)) {
+            return;
+        }
+        var offset = axis === "x" ? (_c = pos.x) !== null && _c !== void 0 ? _c : 0 : (_d = pos.y) !== null && _d !== void 0 ? _d : 0;
+        var relativePos = getRelativePositionFromOffset(e.nativeEvent.clientX, e.nativeEvent.clientY);
+        if (!relativePos) {
+            return;
+        }
+        gapRef.current =
+            axis === "x"
+                ? relativePos.x - ((_e = pos.x) !== null && _e !== void 0 ? _e : 0) + ((_f = scrollPosition === null || scrollPosition === void 0 ? void 0 : scrollPosition.scrollLeft) !== null && _f !== void 0 ? _f : 0)
+                : relativePos.y - ((_g = pos.y) !== null && _g !== void 0 ? _g : 0) + ((_h = scrollPosition === null || scrollPosition === void 0 ? void 0 : scrollPosition.scrollTop) !== null && _h !== void 0 ? _h : 0);
+        var 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
+     */
+    var draggableColumns = (0, react_1.useMemo)(function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if (disabled || !columns.length || columns.length === columnCount) {
+            return null;
+        }
+        var _j = tslib_1.__read((0, utils_1.getMinMaxArray)(columns), 2), min = _j[0], max = _j[1];
+        var minLeft = getCellOffsetFromCoords({
+            rowIndex: 0,
+            columnIndex: selectionLeftBound,
+        });
+        var posLeft = getCellOffsetFromCoords({
+            rowIndex: 0,
+            columnIndex: min,
+        });
+        var posRight = getCellOffsetFromCoords({
+            rowIndex: 0,
+            columnIndex: max,
+        });
+        if (posLeft === undefined || posRight === undefined) {
+            return null;
+        }
+        var scrollLeft = (_b = (_a = getScrollPosition()) === null || _a === void 0 ? void 0 : _a.scrollLeft) !== null && _b !== void 0 ? _b : 0;
+        var x = ((_c = posLeft.x) !== null && _c !== void 0 ? _c : 0) - scrollLeft;
+        var width = ((_d = posRight.x) !== null && _d !== void 0 ? _d : 0) - ((_e = posLeft.x) !== null && _e !== void 0 ? _e : 0) + ((_f = posRight.width) !== null && _f !== void 0 ? _f : 0);
+        var finalDragOffset = Math.max((_g = minLeft === null || minLeft === void 0 ? void 0 : minLeft.x) !== null && _g !== void 0 ? _g : 0, Math.min(containerWidth - width, dragOffset));
+        var borderOffset = Math.max((_h = minLeft === null || minLeft === void 0 ? void 0 : minLeft.x) !== null && _h !== void 0 ? _h : 0, // UP
+        Math.min(offset - scrollLeft, containerWidth) // Down
+        );
+        return (react_1.default.createElement(HeaderMoveDragComponentComponent, { x: x, y: posLeft === null || posLeft === void 0 ? void 0 : posLeft.y, width: width, height: posLeft === null || posLeft === void 0 ? void 0 : 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
+     */
+    var draggableRows = (0, react_1.useMemo)(function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if (disabled || !rows.length || rows.length === rowCount) {
+            return null;
+        }
+        var _j = tslib_1.__read((0, utils_1.getMinMaxArray)(rows), 2), min = _j[0], max = _j[1];
+        var minTop = getCellOffsetFromCoords({
+            rowIndex: selectionTopBound,
+            columnIndex: 0,
+        });
+        var posLeft = getCellOffsetFromCoords({
+            rowIndex: min,
+            columnIndex: 0,
+        });
+        var posRight = getCellOffsetFromCoords({
+            rowIndex: max,
+            columnIndex: 0,
+        });
+        if (posLeft === undefined || posRight === undefined) {
+            return null;
+        }
+        var scrollTop = (_b = (_a = getScrollPosition()) === null || _a === void 0 ? void 0 : _a.scrollTop) !== null && _b !== void 0 ? _b : 0;
+        var height = ((_c = posRight.y) !== null && _c !== void 0 ? _c : 0) - ((_d = posLeft.y) !== null && _d !== void 0 ? _d : 0) + ((_e = posRight.height) !== null && _e !== void 0 ? _e : 0);
+        var finalDragOffset = Math.max((_f = minTop === null || minTop === void 0 ? void 0 : minTop.y) !== null && _f !== void 0 ? _f : 0, Math.min(containerHeight - height, dragOffset));
+        var borderOffset = Math.max((_g = minTop === null || minTop === void 0 ? void 0 : minTop.y) !== null && _g !== void 0 ? _g : 0, // UP
+        Math.min(offset - scrollTop, containerHeight) // Down
+        );
+        return (react_1.default.createElement(HeaderMoveDragComponentComponent, { x: posLeft.x, y: ((_h = posLeft === null || posLeft === void 0 ? void 0 : posLeft.y) !== null && _h !== void 0 ? _h : 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: isDragging,
+        draggableRows: draggableRows,
+        draggableColumns: draggableColumns,
+    };
+};
+exports.useMoveColumnsAndRows = useMoveColumnsAndRows;

package/dist/cjs/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