@rowsncolumns/spreadsheet 10.2.68

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

@@ -0,0 +1,23 @@
+import type { ParsedToken } from "@rowsncolumns/calculator";
+import type { CellInterface } from "@rowsncolumns/grid";
+import type { CanvasGridProps } from "../components/canvas-grid/typings";
+import type { TableView } from "./../types";
+export declare const useOnStructuredReferenceSelection: ({ tables, getSheetName, }: {
+    tables: TableView[] | undefined | null;
+    getSheetName: CanvasGridProps["getSheetName"];
+}) => (sheetId: number, cell: CellInterface | undefined, tableName: string | undefined, columnNames: string[] | undefined, thisRow: boolean | undefined, specialItem?: ParsedToken["specialItem"]) => {
+    range: {
+        startColumnIndex: number;
+        endColumnIndex: number;
+        startRowIndex: number;
+        endRowIndex: number;
+        sheetId: number;
+    } | {
+        startColumnIndex: number;
+        endColumnIndex: number;
+        startRowIndex: number;
+        endRowIndex: number;
+    };
+    sheetName: string | undefined;
+} | undefined;
+//# sourceMappingURL=use-structured-reference-selection.d.ts.map

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

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

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

@@ -0,0 +1,118 @@
+import { isCellWithinBounds } from "@rowsncolumns/grid";
+import { isNil } from "@rowsncolumns/utils";
+import { useCallback } from "react";
+import { getColumnIndexFromColumnName } from "../api/selections";
+import { DEFAULT_ACTIVE_CELL } from "../config";
+export const useOnStructuredReferenceSelection = ({ tables, getSheetName, }) => {
+    return useCallback((sheetId, cell, tableName, columnNames, thisRow, specialItem) => {
+        if (specialItem === "#This Row") {
+            thisRow = true;
+        }
+        // If there is no tablename, we need to find table based
+        // on cell
+        const table = tables?.find((table) => {
+            if (tableName) {
+                return table.title === tableName;
+            }
+            return cell
+                ? isCellWithinBounds(cell, table.range) && table.sheetId === sheetId
+                : true;
+        });
+        // Current row
+        const { rowIndex } = cell ?? DEFAULT_ACTIVE_CELL;
+        if (table) {
+            const { range } = table;
+            const headerRow = table.headerRow ?? true;
+            const totalRow = table.totalRow ?? false;
+            const headerRowOffset = headerRow ? 1 : 0;
+            const totalRowOffset = totalRow ? 1 : 0;
+            const sheetName = getSheetName?.(table.sheetId);
+            const [from, to] = columnNames ?? [];
+            const startColIndex = getColumnIndexFromColumnName(table, from);
+            const endColIndex = getColumnIndexFromColumnName(table, to);
+            const startColumnIndex = isNil(startColIndex)
+                ? range.startColumnIndex
+                : startColIndex;
+            const endColumnIndex = isNil(endColIndex) && isNil(startColIndex)
+                ? range.endColumnIndex
+                : isNil(endColIndex)
+                    ? startColumnIndex
+                    : endColIndex;
+            // Headers only
+            if (specialItem === "#Headers") {
+                return {
+                    range: {
+                        ...range,
+                        startColumnIndex,
+                        endColumnIndex,
+                        startRowIndex: range.startRowIndex,
+                        endRowIndex: range.startRowIndex,
+                    },
+                    sheetName,
+                };
+            }
+            // All
+            if (specialItem === "#All") {
+                return {
+                    range: {
+                        ...range,
+                        startColumnIndex,
+                        endColumnIndex,
+                    },
+                    sheetName,
+                };
+            }
+            // All
+            if (specialItem === "#Data") {
+                return {
+                    range: {
+                        ...range,
+                        startColumnIndex,
+                        endColumnIndex,
+                        startRowIndex: range.startRowIndex + headerRowOffset,
+                        endRowIndex: range.endRowIndex - totalRowOffset,
+                    },
+                    sheetName,
+                };
+            }
+            if (!from && !to) {
+                return {
+                    range: {
+                        startRowIndex: thisRow
+                            ? rowIndex
+                            : range.startRowIndex + headerRowOffset,
+                        endRowIndex: thisRow
+                            ? rowIndex
+                            : range.endRowIndex - totalRowOffset,
+                        startColumnIndex,
+                        endColumnIndex,
+                    },
+                    sheetName,
+                };
+            }
+            // If column is not found, lets not select anything
+            if (startColIndex === -1 || isNil(startColIndex)) {
+                return undefined;
+            }
+            // Check if thisrow is active and current cell is in bounds
+            if (thisRow &&
+                (rowIndex < range.startRowIndex || rowIndex > range.endRowIndex)) {
+                return undefined;
+            }
+            return {
+                range: {
+                    ...range,
+                    startRowIndex: thisRow
+                        ? rowIndex
+                        : range.startRowIndex + headerRowOffset,
+                    endRowIndex: thisRow
+                        ? rowIndex
+                        : range.endRowIndex - totalRowOffset,
+                    startColumnIndex,
+                    endColumnIndex,
+                },
+                sheetName: getSheetName?.(table.sheetId),
+            };
+        }
+    }, [tables, getSheetName]);
+};

package/dist/esm/hooks/use-table-resizer.d.ts

@@ -0,0 +1,23 @@
+import type { Align, CellInterface, OptionalCellInterface } from "@rowsncolumns/grid";
+import React from "react";
+import type { CanvasGridProps, SpreadsheetTheme } from "../components/canvas-grid/typings";
+import type { TableView } from "../types";
+type UseTableResizerProps = {
+    sheetId: number;
+    tables?: TableView[];
+    theme: SpreadsheetTheme;
+    newSelection: (start: CellInterface, end?: CellInterface) => void;
+    modifySelection: (coords: CellInterface, setInProgress?: boolean | undefined) => void;
+    clearSelections(): void;
+    getCellCoordsFromOffset: (x: number, y: number, includeFrozen?: boolean) => CellInterface | undefined;
+    onResizeTable?: CanvasGridProps["onResizeTable"];
+    scrollToCell: (cell: OptionalCellInterface, align?: Align | undefined) => void | undefined;
+    focusSheet(): void;
+};
+export declare const useTableResizer: ({ sheetId, tables, theme, newSelection, modifySelection, clearSelections, onResizeTable, getCellCoordsFromOffset, scrollToCell, focusSheet, }: UseTableResizerProps) => {
+    tableResizers: React.JSX.Element[] | undefined;
+    isResizingTable: boolean;
+};
+export declare const StyledResizeButton: React.ForwardRefExoticComponent<Omit<import("@rowsncolumns/ui").ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=use-table-resizer.d.ts.map

package/dist/esm/hooks/use-table-resizer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-table-resizer.d.ts","sourceRoot":"","sources":["../../../hooks/use-table-resizer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,KAAK,EACL,aAAa,EACb,qBAAqB,EACtB,MAAM,oBAAoB,CAAC;AAK5B,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EACV,eAAe,EACf,gBAAgB,EACjB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C,KAAK,oBAAoB,GAAG;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,KAAK,EAAE,gBAAgB,CAAC;IACxB,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,GAAG,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IAClE,eAAe,EAAE,CACf,MAAM,EAAE,aAAa,EACrB,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,KAChC,IAAI,CAAC;IACV,eAAe,IAAI,IAAI,CAAC;IACxB,uBAAuB,EAAE,CACvB,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,aAAa,CAAC,EAAE,OAAO,KACpB,aAAa,GAAG,SAAS,CAAC;IAC/B,aAAa,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IACjD,YAAY,EAAE,CACZ,IAAI,EAAE,qBAAqB,EAC3B,KAAK,CAAC,EAAE,KAAK,GAAG,SAAS,KACtB,IAAI,GAAG,SAAS,CAAC;IACtB,UAAU,IAAI,IAAI,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,+IAW7B,oBAAoB;;;CAyHtB,CAAC;AAYF,eAAO,MAAM,kBAAkB,wKAa7B,CAAC"}

package/dist/esm/hooks/use-table-resizer.js

@@ -0,0 +1,108 @@
+import { useGridContext } from "@rowsncolumns/grid";
+import { Button, cn } from "@rowsncolumns/ui";
+import { isNil } from "@rowsncolumns/utils";
+import React, { useCallback, useMemo, useRef, useState } from "react";
+export const useTableResizer = ({ sheetId, tables, theme, newSelection, modifySelection, clearSelections, onResizeTable, getCellCoordsFromOffset, scrollToCell, focusSheet, }) => {
+    const [isResizingTable, setIsResizingTable] = useState(false);
+    const tableRef = useRef(undefined);
+    const onMouseMove = useCallback((event) => {
+        const cell = getCellCoordsFromOffset(event.clientX, event.clientY, false);
+        if (cell && tableRef.current) {
+            // Restrict cell to table range
+            const showHeader = tableRef.current.headerRow;
+            const minRowIndex = tableRef.current.range.startRowIndex + (showHeader ? 1 : 0);
+            const minColumnIndex = tableRef.current.range.startColumnIndex;
+            cell.rowIndex = Math.max(cell.rowIndex, minRowIndex);
+            cell.columnIndex = Math.max(cell.columnIndex, minColumnIndex);
+            modifySelection(cell);
+            // Scroll to active cell
+            scrollToCell(cell);
+        }
+    }, [getCellCoordsFromOffset, modifySelection, scrollToCell]);
+    const onMouseUp = useCallback((event) => {
+        // Callback
+        const endCell = getCellCoordsFromOffset(event.clientX, event.clientY, false);
+        //End
+        setIsResizingTable(false);
+        // Clear selections
+        clearSelections();
+        if (tableRef.current && endCell) {
+            const tableRange = {
+                ...tableRef.current.range,
+                endColumnIndex: endCell.columnIndex,
+                endRowIndex: endCell.rowIndex,
+            };
+            // Callback
+            onResizeTable?.(sheetId, tableRef.current, tableRange);
+        }
+        // Switch focus to sheet
+        focusSheet();
+        // Unbind
+        document.removeEventListener("pointermove", onMouseMove);
+        document.removeEventListener("pointerup", onMouseUp);
+    }, [
+        onMouseMove,
+        onResizeTable,
+        clearSelections,
+        focusSheet,
+        getCellCoordsFromOffset,
+        sheetId,
+    ]);
+    const onMouseDown = useCallback((table) => {
+        const { range } = table;
+        // Create a new selection
+        const start = {
+            rowIndex: range.startRowIndex,
+            columnIndex: range.startColumnIndex,
+        };
+        const end = {
+            rowIndex: range.endRowIndex,
+            columnIndex: range.endColumnIndex,
+        };
+        // Set selected range
+        tableRef.current = table;
+        // Set new selection
+        newSelection(start, end);
+        // Modify immediately
+        modifySelection(end);
+        // Setter
+        setIsResizingTable(true);
+        // Bind
+        document.addEventListener("pointermove", onMouseMove);
+        document.addEventListener("pointerup", onMouseUp);
+    }, [newSelection, modifySelection, onMouseMove, onMouseUp]);
+    // Resizer components
+    const tableResizers = useMemo(() => {
+        return tables
+            ?.filter((table) => table.sheetId === sheetId)
+            .map((table) => {
+            const { range } = table;
+            const cornerCell = {
+                rowIndex: range.endRowIndex,
+                columnIndex: range.endColumnIndex,
+            };
+            return (React.createElement(TableResizer, { key: table.id, cornerCell: cornerCell, onPointerDown: () => onMouseDown(table), backgroundColor: theme.themeColors.accent1 }));
+        });
+    }, [tables, sheetId, theme, onMouseDown]);
+    return {
+        tableResizers,
+        isResizingTable,
+    };
+};
+const CORNER_CELL_DIM = 6;
+export const StyledResizeButton = React.forwardRef(({ className, ...props }, ref) => (React.createElement(Button, { ref: ref, className: cn("absolute rounded-none border-t-0 border-l-0 min-w-0 min-h-0 p-0 pointer-events-auto touch-manipulation cursor-nwse-resize print:hidden", "border-r-[3px] border-b-[3px] border-solid border-neutral-700", className), ...props })));
+StyledResizeButton.displayName = "StyledResizeButton";
+const TableResizer = ({ cornerCell, backgroundColor, ...rest }) => {
+    const { getCellOffsetFromCoords } = useGridContext();
+    const cellPosition = getCellOffsetFromCoords(cornerCell);
+    if (isNil(cellPosition)) {
+        return null;
+    }
+    return (React.createElement(StyledResizeButton, { style: {
+            top: cellPosition.y + cellPosition.height - CORNER_CELL_DIM,
+            left: cellPosition.x + cellPosition.width - CORNER_CELL_DIM,
+            borderColor: backgroundColor,
+            width: CORNER_CELL_DIM,
+            height: CORNER_CELL_DIM,
+        }, title: "Resize table", ...rest }));
+};

package/dist/esm/hooks/use-text-dimensions.d.ts

@@ -0,0 +1,16 @@
+interface UseTextDimensionProps {
+    value?: string;
+    fontSize?: number | null;
+    fontFamily?: string | null;
+    bold?: boolean | null;
+    italic?: boolean | null;
+    height?: number;
+    width?: number;
+    scale?: number;
+    borderWidth?: number;
+    paddingHorizontal?: number;
+    paddingVertical?: number;
+}
+export declare const useTextDimension: ({ value, fontSize, fontFamily, bold, italic, width, height, scale, paddingHorizontal, paddingVertical, borderWidth, }: UseTextDimensionProps) => number[];
+export {};
+//# sourceMappingURL=use-text-dimensions.d.ts.map

package/dist/esm/hooks/use-text-dimensions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-text-dimensions.d.ts","sourceRoot":"","sources":["../../../hooks/use-text-dimensions.ts"],"names":[],"mappings":"AAIA,UAAU,qBAAqB;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AACD,eAAO,MAAM,gBAAgB,GAAI,uHAY9B,qBAAqB,aAyCvB,CAAC"}

package/dist/esm/hooks/use-text-dimensions.js

@@ -0,0 +1,35 @@
+import { autoSizerCanvas } from "@rowsncolumns/grid";
+import { isNil } from "@rowsncolumns/utils";
+import { useMemo } from "react";
+export const useTextDimension = ({ value, fontSize, fontFamily, bold, italic, width = 0, height = 0, scale = 1, paddingHorizontal = 0, paddingVertical = 0, borderWidth = 0, }) => {
+    return useMemo(() => {
+        if (isNil(value))
+            return [0, 0];
+        if (width === 0 && height === 0)
+            return [0, 0];
+        /* Update fonts */
+        autoSizerCanvas.setFont({
+            fontSize,
+            fontFamily,
+            fontWeight: bold ? "bold" : "",
+            fontStyle: italic ? "italic" : "",
+            scale,
+        });
+        const { width: measuredWidth, height: measuredHeight } = autoSizerCanvas.measureText(value);
+        const finalWidth = Math.max(measuredWidth + paddingHorizontal, width + borderWidth / 2);
+        const finalHeight = Math.max(measuredHeight + paddingVertical, height + borderWidth / 2);
+        return [finalWidth, finalHeight];
+    }, [
+        value,
+        width,
+        height,
+        fontSize,
+        fontFamily,
+        bold,
+        scale,
+        borderWidth,
+        italic,
+        paddingHorizontal,
+        paddingVertical,
+    ]);
+};

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

@@ -0,0 +1,70 @@
+import type { CellInterface, CellPosition, ScrollCoords } from "@rowsncolumns/grid";
+import type React from "react";
+import type { CanvasGridProps } from "../components/canvas-grid/typings";
+import type { CellTooltipProps } from "../components/cell-tooltip";
+export type TooltipOptions = {
+    sheetId: number;
+    /**
+     * Tooltip component
+     */
+    getTooltip(props: CellTooltipProps): React.ReactElement | null;
+    /**
+     * Grid references
+     */
+    getCellOffsetFromCoords(cell: CellInterface): CellPosition | undefined;
+    /**
+     * Hovered cell
+     */
+    activeCell?: CellInterface | null;
+    /**
+     * Get current scroll position
+     */
+    getScrollPosition: () => ScrollCoords | undefined;
+    /**
+     * Is frozen row
+     * @param rowIndex
+     */
+    isFrozenRow(rowIndex: number): boolean;
+    /**
+     * Is frozen column
+     * @param columnIndex
+     */
+    isFrozenColumn(columnIndex: number): boolean;
+    /**
+     * User is updating a note
+     * @param sheetId
+     * @param cell
+     * @param note
+     */
+    onUpdateNote?(sheetId: number, cell: CellInterface, note: string | undefined): void;
+    /**
+     * Close tooltip from inside tooltip component
+     */
+    onRequestClose?(): void;
+    /**
+     * Remove hyperlink
+     */
+    onRemoveLink: CanvasGridProps["onRemoveLink"];
+    /**
+     * Select hyperlink
+     */
+    onSelectLink: CanvasGridProps["onSelectLink"];
+};
+export type DefaultTooltipProps = {
+    /**
+     * Tooltip x position
+     */
+    x: number;
+    /**
+     * Tooltip y position
+     */
+    y: number;
+    width: number;
+    height: number;
+    scrollLeft: number;
+    scrollTop: number;
+};
+export declare const useTooltip: ({ getCellOffsetFromCoords, sheetId, activeCell, getScrollPosition, getTooltip, isFrozenColumn, isFrozenRow, onUpdateNote, onRequestClose, onRemoveLink, onSelectLink, }: TooltipOptions) => {
+    tooltipComponent: React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+};
+//# sourceMappingURL=use-tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-tooltip.d.ts","sourceRoot":"","sources":["../../../hooks/use-tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,YAAY,EACZ,YAAY,EACb,MAAM,oBAAoB,CAAC;AAE5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAEnE,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,UAAU,CAAC,KAAK,EAAE,gBAAgB,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;IAC/D;;OAEG;IACH,uBAAuB,CAAC,IAAI,EAAE,aAAa,GAAG,YAAY,GAAG,SAAS,CAAC;IACvE;;OAEG;IACH,UAAU,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAClC;;OAEG;IACH,iBAAiB,EAAE,MAAM,YAAY,GAAG,SAAS,CAAC;IAClD;;;OAGG;IACH,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IACvC;;;OAGG;IACH,cAAc,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC;IAC7C;;;;;OAKG;IACH,YAAY,CAAC,CACX,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,aAAa,EACnB,IAAI,EAAE,MAAM,GAAG,SAAS,GACvB,IAAI,CAAC;IACR;;OAEG;IACH,cAAc,CAAC,IAAI,IAAI,CAAC;IACxB;;OAEG;IACH,YAAY,EAAE,eAAe,CAAC,cAAc,CAAC,CAAC;IAC9C;;OAEG;IACH,YAAY,EAAE,eAAe,CAAC,cAAc,CAAC,CAAC;CAC/C,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IACV;;OAEG;IACH,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,yKAYxB,cAAc;;CAoGhB,CAAC"}

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

@@ -0,0 +1,83 @@
+import { isEqualCells } from "@rowsncolumns/grid";
+import { useCallback } from "react";
+import { useNoteEditorCell, usePinnedTooltip } from "../atoms";
+export const useTooltip = ({ getCellOffsetFromCoords, sheetId, activeCell, getScrollPosition, getTooltip, isFrozenColumn, isFrozenRow, onUpdateNote, onRequestClose, onRemoveLink, onSelectLink, }) => {
+    const [noteEditorCell, setNoteEditorCell] = useNoteEditorCell();
+    const [pinnedTooltipCell, setPinnedTooltipCell] = usePinnedTooltip();
+    const hoveredCell = pinnedTooltipCell ?? noteEditorCell ?? activeCell;
+    // Tooltip position
+    const getTooltipPositon = useCallback((cell) => {
+        const scrollPosition = getScrollPosition();
+        const cellOffset = getCellOffsetFromCoords(cell);
+        return {
+            x: cellOffset?.x ?? 0,
+            y: cellOffset?.y ?? 0,
+            width: cellOffset?.width ?? 0,
+            height: cellOffset?.height ?? 0,
+            scrollLeft: isFrozenColumn(cell.columnIndex)
+                ? 0
+                : scrollPosition?.scrollLeft ?? 0,
+            scrollTop: isFrozenRow(cell.rowIndex)
+                ? 0
+                : scrollPosition?.scrollTop ?? 0,
+        };
+    }, [getScrollPosition, getCellOffsetFromCoords, isFrozenColumn, isFrozenRow]);
+    const onRequestShowNote = useCallback((cell) => {
+        if (isEqualCells(cell, noteEditorCell)) {
+            return;
+        }
+        if (cell) {
+            setNoteEditorCell({ sheetId, ...cell });
+        }
+        else {
+            setNoteEditorCell(undefined);
+        }
+    }, [sheetId, setNoteEditorCell, noteEditorCell]);
+    // Pin tooltip
+    const onRequestPinTooltip = useCallback((cell) => {
+        if (isEqualCells(cell, pinnedTooltipCell)) {
+            return;
+        }
+        if (cell) {
+            setPinnedTooltipCell({ sheetId, ...cell });
+        }
+        else {
+            setPinnedTooltipCell(undefined);
+        }
+    }, [sheetId, setPinnedTooltipCell, pinnedTooltipCell]);
+    // Unpin tooltip
+    const onRequestUnpinTooltip = useCallback(() => {
+        setPinnedTooltipCell(undefined);
+    }, [setPinnedTooltipCell]);
+    const onRequestUpdateNote = useCallback((value, previousValue) => {
+        const noteCell = noteEditorCell;
+        if (noteCell && value !== previousValue) {
+            onUpdateNote?.(sheetId, noteCell, value);
+        }
+        // Close notes
+        onRequestShowNote(undefined);
+    }, [onUpdateNote, onRequestShowNote, sheetId, noteEditorCell]);
+    const onRequestCloseNote = useCallback(() => {
+        // Close notes
+        onRequestShowNote(undefined);
+        onRequestClose?.();
+    }, [onRequestClose, onRequestShowNote]);
+    const tooltipComponent = hoveredCell
+        ? getTooltip({
+            ...getTooltipPositon(hoveredCell),
+            sheetId,
+            cell: hoveredCell,
+            noteEditorCell,
+            onRequestShowNote,
+            onRequestUpdateNote,
+            onRequestCloseNote,
+            onRemoveLink,
+            onSelectLink,
+            onRequestUnpinTooltip,
+            onRequestPinTooltip,
+        })
+        : null;
+    return {
+        tooltipComponent,
+    };
+};

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

@@ -0,0 +1,16 @@
+import type { GridDimensions, ScrollCoords } from "@rowsncolumns/grid";
+type UseTouchProps = {
+    scrollTo: (coords: ScrollCoords, immediate?: boolean) => void;
+    scale?: number;
+    onChangeScale?: (scale: number) => void;
+    minScale?: number;
+    maxScale?: number;
+};
+export declare const useTouch: ({ scrollTo, scale, onChangeScale, minScale, maxScale, }: UseTouchProps) => {
+    onTouchStart: (event: React.TouchEvent<HTMLDivElement>) => void;
+    onDimensionsChange: ((props: GridDimensions) => void) | undefined;
+    scrollToTouchDevice: ({ scrollLeft, scrollTop }: ScrollCoords) => void;
+    onAfterScrollToCell: (scrollLeft: number | undefined, scrollTop: number | undefined) => void;
+};
+export {};
+//# sourceMappingURL=use-touch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-touch.d.ts","sourceRoot":"","sources":["../../../hooks/use-touch.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAUvE,KAAK,aAAa,GAAG;IACnB,QAAQ,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,SAAS,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAoCF,eAAO,MAAM,QAAQ,GAAI,yDAMtB,aAAa;0BAsKJ,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC;iCA1J/B,cAAc,KAAK,IAAI;qDA6CJ,YAAY;sCAQ3B,MAAM,GAAG,SAAS,aAAa,MAAM,GAAG,SAAS;CAqMjE,CAAC"}