@rowsncolumns/spreadsheet 10.5.2 → 10.5.5

package/dist/esm/hooks/use-export-range.js

@@ -1,44 +1,98 @@
-import { Align } from "@rowsncolumns/grid";
 import { getDevicePixelRatio } from "@rowsncolumns/grid";
 import { useCallback } from "react";
+import { planExportStops, sourceOffset, } from "./export-range-tiles";
 import { useCallbackRef } from "./use-callback-ref";
-export const useExportRange = ({ sheetId, gridLineWidth, cellBackgroundColor, getCanvasLayers, getColumnHeaderCanvasLayer, getRowHeaderCanvasLayer, getSheetName, getCellOffsetFromCoords, getR1C1AddressFromSelection, getScrollPosition, getViewPort, getRowOffset, getColumnOffset, getSheetDimensions, scrollTo, scrollToCell, scale, onChangeScale, }) => {
+import { useStableRef } from "./use-stable-ref";
+/** The export zooms out this far to fit a range in the viewport before it tiles. */
+const MIN_EXPORT_SCALE = 0.25;
+/**
+ * Frames to keep waiting for a repaint that never comes (a host that ignores
+ * `onChangeScale`, a scroll the grid clamped elsewhere). The capture then goes
+ * on from whatever the grid did land on, so the output stays right.
+ */
+const PAINT_WAIT_FRAME_BUDGET = 120;
+/** A scrollbar-driven scroll can settle a hair off the requested offset on sheets taller than the scrollbar can address. */
+const SCROLL_TOLERANCE = 2;
+/**
+ * Resolves once the layer has repainted with `ready()` holding and a whole
+ * animation frame has then passed without another paint. The grid's canvas is
+ * drawn by react-konva's batched draw on the frame after a React commit, and a
+ * windowed engine folds the rows of a freshly scrolled-to viewport in a second
+ * commit right behind the first — the quiet frame is what lets that second
+ * paint land before the copy, instead of a fixed number of frames that may or
+ * may not cover it. Paints from before `ready()` held do not count.
+ */
+const waitForPaint = (layer, ready) => new Promise((resolve) => {
+    let paintedThisFrame = false;
+    let paintedWhileReady = false;
+    let frames = 0;
+    const onDraw = () => {
+        paintedThisFrame = true;
+    };
+    layer.on("draw", onDraw);
+    const finish = () => {
+        layer.off("draw", onDraw);
+        resolve();
+    };
+    const tick = () => {
+        frames += 1;
+        if (!ready()) {
+            paintedThisFrame = false;
+            paintedWhileReady = false;
+        }
+        else if (paintedThisFrame) {
+            paintedThisFrame = false;
+            paintedWhileReady = true;
+        }
+        else if (paintedWhileReady) {
+            finish();
+            return;
+        }
+        if (frames >= PAINT_WAIT_FRAME_BUDGET) {
+            finish();
+            return;
+        }
+        requestAnimationFrame(tick);
+    };
+    requestAnimationFrame(tick);
+});
+const isAtScroll = (position, target) => Math.abs(position.scrollTop - target.scrollTop) <= SCROLL_TOLERANCE &&
+    Math.abs(position.scrollLeft - target.scrollLeft) <= SCROLL_TOLERANCE;
+const getFileExtension = (fmt) => {
+    switch (fmt) {
+        case "image/jpeg":
+        case "image/jpg":
+            return ".jpg";
+        case "image/webp":
+            return ".webp";
+        case "image/png":
+        default:
+            return ".png";
+    }
+};
+export const useExportRange = ({ sheetId, gridLineWidth, cellBackgroundColor, frozenRows, frozenColumns, getCanvasLayers, getColumnHeaderCanvasLayer, getRowHeaderCanvasLayer, getSheetName, getR1C1AddressFromSelection, getScrollPosition, getRowOffset, getColumnOffset, getSheetDimensions, getGridDimensions, scrollTo, scale, onChangeScale, }) => {
+    // The capture spans renders; this is how it sees the scale the host applied.
+    const scaleRef = useStableRef(scale);
     return useCallbackRef(useCallback((range, options) => {
         const layers = getCanvasLayers();
-        if (!layers?.length)
+        const layer = layers?.[0];
+        if (!layer)
             return undefined;
         const { filename, format, includeHeaders } = options || {};
         const baseScale = scale ?? 1;
-        const minExportScale = 0.25;
-        const waitForPaint = () => new Promise((resolve) => {
-            requestAnimationFrame(() => {
-                requestAnimationFrame(() => resolve());
-            });
-        });
-        const normalizeRangeStart = (rangeValue) => ({
-            ...rangeValue,
-            startRowIndex: Math.max(1, rangeValue.startRowIndex),
-            startColumnIndex: Math.max(1, rangeValue.startColumnIndex),
-        });
-        const isStartInViewport = (viewport, normalizedRange) => normalizedRange.startRowIndex >= viewport.visibleRowStartIndex &&
-            normalizedRange.startRowIndex <= viewport.visibleRowStopIndex &&
-            normalizedRange.startColumnIndex >=
-                viewport.visibleColumnStartIndex &&
-            normalizedRange.startColumnIndex <= viewport.visibleColumnStopIndex;
-        const isRangeInViewport = (viewport, normalizedRange) => normalizedRange.startRowIndex >= viewport.visibleRowStartIndex &&
-            normalizedRange.endRowIndex <= viewport.visibleRowStopIndex &&
-            normalizedRange.startColumnIndex >=
-                viewport.visibleColumnStartIndex &&
-            normalizedRange.endColumnIndex <= viewport.visibleColumnStopIndex;
+        const normalizedRange = {
+            ...range,
+            startRowIndex: Math.max(1, range.startRowIndex),
+            startColumnIndex: Math.max(1, range.startColumnIndex),
+        };
         const exportRangeAsync = async () => {
             const initialScrollCoords = getScrollPosition();
             let nextScale = baseScale;
-            let didScroll = false;
             if (onChangeScale) {
-                const startX = getColumnOffset(range.startColumnIndex);
-                const endX = getColumnOffset(range.endColumnIndex + 1);
-                const startY = getRowOffset(range.startRowIndex);
-                const endY = getRowOffset(range.endRowIndex + 1);
+                const startX = getColumnOffset(normalizedRange.startColumnIndex);
+                const endX = getColumnOffset(normalizedRange.endColumnIndex + 1);
+                const startY = getRowOffset(normalizedRange.startRowIndex);
+                const endY = getRowOffset(normalizedRange.endRowIndex + 1);
                 const currentWidth = Math.max(endX - startX, 0);
                 const currentHeight = Math.max(endY - startY, 0);
                 const [viewWidth, viewHeight] = getSheetDimensions();
@@ -46,112 +100,93 @@ export const useExportRange = ({ sheetId, gridLineWidth, cellBackgroundColor, ge
                     const unscaledWidth = currentWidth / baseScale;
                     const unscaledHeight = currentHeight / baseScale;
                     const fitScale = Math.min(viewWidth / unscaledWidth, viewHeight / unscaledHeight, baseScale);
-                    const minScale = Math.min(minExportScale, baseScale);
+                    const minScale = Math.min(MIN_EXPORT_SCALE, baseScale);
                     nextScale = Math.min(Math.max(fitScale, minScale), baseScale);
                 }
             }
             try {
                 if (onChangeScale && nextScale !== baseScale) {
                     onChangeScale(nextScale);
-                    await waitForPaint();
-                }
-                const normalizedRange = normalizeRangeStart(range);
-                const viewport = getViewPort();
-                if (!isStartInViewport(viewport, normalizedRange)) {
-                    scrollToCell?.({
-                        rowIndex: normalizedRange.startRowIndex,
-                        columnIndex: normalizedRange.startColumnIndex,
-                    }, Align.start);
-                    didScroll = true;
-                    await waitForPaint();
-                }
-                const viewportAfterStart = getViewPort();
-                if (!isRangeInViewport(viewportAfterStart, normalizedRange)) {
-                    scrollToCell?.({
-                        rowIndex: normalizedRange.endRowIndex,
-                        columnIndex: normalizedRange.endColumnIndex,
-                    }, Align.end);
-                    didScroll = true;
-                    await waitForPaint();
+                    await waitForPaint(layer, () => scaleRef.current === nextScale);
                 }
-                const scrollCoords = getScrollPosition();
-                const tl = getCellOffsetFromCoords({
-                    rowIndex: normalizedRange.startRowIndex,
-                    columnIndex: normalizedRange.startColumnIndex,
-                });
-                const br = getCellOffsetFromCoords({
-                    rowIndex: normalizedRange.endRowIndex,
-                    columnIndex: normalizedRange.endColumnIndex,
+                // Measured after the zoom so every offset is at the export scale.
+                const dimensions = getGridDimensions();
+                if (!dimensions)
+                    return undefined;
+                const headerWidth = includeHeaders ? getColumnOffset(1) : 0;
+                const headerHeight = includeHeaders ? getRowOffset(1) : 0;
+                const rangeLeft = getColumnOffset(normalizedRange.startColumnIndex);
+                const rangeRight = getColumnOffset(normalizedRange.endColumnIndex + 1) +
+                    gridLineWidth;
+                const rangeTop = getRowOffset(normalizedRange.startRowIndex);
+                const rangeBottom = getRowOffset(normalizedRange.endRowIndex + 1) + gridLineWidth;
+                const scrollAtPlan = getScrollPosition();
+                const stops = planExportStops({
+                    x: {
+                        rangeStart: rangeLeft,
+                        rangeEnd: rangeRight,
+                        frozenSize: getColumnOffset(frozenColumns),
+                        viewportSize: dimensions.containerWidth,
+                        maxScroll: Math.max(0, dimensions.estimatedTotalWidth - dimensions.containerWidth),
+                        currentScroll: scrollAtPlan.scrollLeft,
+                        headerSize: headerWidth,
+                    },
+                    y: {
+                        rangeStart: rangeTop,
+                        rangeEnd: rangeBottom,
+                        frozenSize: getRowOffset(frozenRows),
+                        viewportSize: dimensions.containerHeight,
+                        maxScroll: Math.max(0, dimensions.estimatedTotalHeight - dimensions.containerHeight),
+                        currentScroll: scrollAtPlan.scrollTop,
+                        headerSize: headerHeight,
+                    },
                 });
-                // @ts-ignore
-                tl.x -= scrollCoords.scrollLeft;
-                // @ts-ignore
-                tl.y -= scrollCoords.scrollTop;
-                // @ts-ignore
-                br.x -= scrollCoords.scrollLeft;
-                // @ts-ignore
-                br.y -= scrollCoords.scrollTop;
                 const sheetName = getSheetName?.(range.sheetId ?? sheetId);
                 const dpr = getDevicePixelRatio();
-                const baseX = tl?.x ?? 0;
-                const baseY = tl?.y ?? 0;
-                const baseWidth = (br?.x ?? 0) - baseX + (br?.width ?? 0) + gridLineWidth;
-                const baseHeight = (br?.y ?? 0) - baseY + (br?.height ?? 0) + gridLineWidth;
-                const headerWidth = includeHeaders ? getColumnOffset(1) : 0;
-                const headerHeight = includeHeaders ? getRowOffset(1) : 0;
-                const destX = headerWidth;
-                const destY = headerHeight;
-                const width = baseWidth + headerWidth;
-                const height = baseHeight + headerHeight;
+                const width = rangeRight - rangeLeft + headerWidth;
+                const height = rangeBottom - rangeTop + headerHeight;
                 const finalFileName = filename ??
                     getR1C1AddressFromSelection?.(normalizedRange, sheetName)?.substring(1);
-                const getFileExtension = (fmt) => {
-                    switch (fmt) {
-                        case "image/jpeg":
-                        case "image/jpg":
-                            return ".jpg";
-                        case "image/webp":
-                            return ".webp";
-                        case "image/png":
-                        default:
-                            return ".png";
-                    }
+                const canvases = {
+                    body: layer.getCanvas()._canvas,
+                    rowHeader: includeHeaders
+                        ? getRowHeaderCanvasLayer()?.[0]?.getCanvas()._canvas
+                        : null,
+                    columnHeader: includeHeaders
+                        ? getColumnHeaderCanvasLayer()?.[0]?.getCanvas()._canvas
+                        : null,
                 };
-                const bodyCanvas = layers[0]?.getCanvas()._canvas;
-                const rowHeaderCanvas = includeHeaders
-                    ? getRowHeaderCanvasLayer()?.[0]?.getCanvas()._canvas
-                    : null;
-                const columnHeaderCanvas = includeHeaders
-                    ? getColumnHeaderCanvasLayer()?.[0]?.getCanvas()._canvas
-                    : null;
-                if (!bodyCanvas)
+                if (!canvases.body)
                     return undefined;
-                const canvas = bodyCanvas;
                 const tempCanvas = document.createElement("canvas");
                 tempCanvas.width = width * dpr;
                 tempCanvas.height = height * dpr;
                 const tempCtx = tempCanvas.getContext("2d");
-                const intermediateCanvas = document.createElement("canvas");
-                intermediateCanvas.width = width * dpr;
-                intermediateCanvas.height = height * dpr;
-                const intermediateCtx = intermediateCanvas.getContext("2d");
-                const bodySourceX = baseX;
-                const bodySourceY = baseY;
-                if (intermediateCtx) {
-                    intermediateCtx.drawImage(canvas, bodySourceX * dpr, bodySourceY * dpr, baseWidth * dpr, baseHeight * dpr, destX * dpr, destY * dpr, baseWidth * dpr, baseHeight * dpr);
-                }
                 if (tempCtx) {
                     tempCtx.fillStyle = cellBackgroundColor;
                     tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
-                    tempCtx.drawImage(intermediateCanvas, 0, 0);
-                    if (includeHeaders) {
-                        if (columnHeaderCanvas) {
-                            tempCtx.drawImage(columnHeaderCanvas, baseX * dpr, 0, baseWidth * dpr, headerHeight * dpr, destX * dpr, 0, baseWidth * dpr, headerHeight * dpr);
-                        }
-                        if (rowHeaderCanvas) {
-                            tempCtx.drawImage(rowHeaderCanvas, 0, baseY * dpr, headerWidth * dpr, baseHeight * dpr, 0, destY * dpr, headerWidth * dpr, baseHeight * dpr);
-                        }
+                }
+                const copyPiece = (piece, landed) => {
+                    const source = canvases[piece.canvas];
+                    if (!tempCtx || !source)
+                        return;
+                    const sx = sourceOffset(piece.x, landed.scrollLeft);
+                    const sy = sourceOffset(piece.y, landed.scrollTop);
+                    tempCtx.drawImage(source, sx * dpr, sy * dpr, piece.x.size * dpr, piece.y.size * dpr, piece.x.dest * dpr, piece.y.dest * dpr, piece.x.size * dpr, piece.y.size * dpr);
+                };
+                for (const stop of stops) {
+                    const target = {
+                        scrollTop: stop.scrollTop,
+                        scrollLeft: stop.scrollLeft,
+                    };
+                    if (!isAtScroll(getScrollPosition(), target)) {
+                        scrollTo(target, true);
+                        await waitForPaint(layer, () => isAtScroll(getScrollPosition(), target));
                     }
+                    // Copy from where the grid actually landed, not where it was sent.
+                    const landed = getScrollPosition();
+                    for (const piece of stop.pieces)
+                        copyPiece(piece, landed);
                 }
                 if (format === "clipboard") {
                     await new Promise((resolve, reject) => {
@@ -195,11 +230,13 @@ export const useExportRange = ({ sheetId, gridLineWidth, cellBackgroundColor, ge
                 const shouldRestoreScale = onChangeScale && nextScale !== baseScale;
                 if (shouldRestoreScale) {
                     onChangeScale(baseScale);
-                    await waitForPaint();
+                    await waitForPaint(layer, () => scaleRef.current === baseScale);
                 }
-                if (didScroll || shouldRestoreScale) {
-                    scrollTo?.(initialScrollCoords, true);
-                    await waitForPaint();
+                const current = getScrollPosition();
+                if (current.scrollTop !== initialScrollCoords.scrollTop ||
+                    current.scrollLeft !== initialScrollCoords.scrollLeft) {
+                    scrollTo(initialScrollCoords, true);
+                    await waitForPaint(layer, () => isAtScroll(getScrollPosition(), initialScrollCoords));
                 }
             }
         };
@@ -208,20 +245,21 @@ export const useExportRange = ({ sheetId, gridLineWidth, cellBackgroundColor, ge
         sheetId,
         gridLineWidth,
         cellBackgroundColor,
+        frozenRows,
+        frozenColumns,
         getCanvasLayers,
-        getCellOffsetFromCoords,
         getSheetName,
         getR1C1AddressFromSelection,
         getScrollPosition,
-        getViewPort,
         getColumnHeaderCanvasLayer,
         getRowHeaderCanvasLayer,
         getRowOffset,
         getColumnOffset,
         getSheetDimensions,
+        getGridDimensions,
         scrollTo,
-        scrollToCell,
         scale,
         onChangeScale,
+        scaleRef,
     ]));
 };

package/dist/esm/hooks/use-grid-children.d.ts

@@ -1,5 +1,6 @@
 import type { GridChildrenProps } from "@rowsncolumns/grid";
 import React from "react";
+import type { CanvasGridProps } from "../components/canvas-grid/typings";
 import type { SheetCoordinate, SheetRange } from "../types";
 import type { useEmbedsCharts } from "./use-embeds-charts";
 type UseGridChildrenProps = {
@@ -18,12 +19,14 @@ type UseGridChildrenProps = {
     isHeaderMenuInFrozenColumn?: boolean;
     popoverComponent: React.JSX.Element | null | undefined;
     cellExpandComponent: React.JSX.Element | null | undefined;
+    /** Trace precedents / dependents arrows; they scroll with the body. */
+    arrowComponents?: CanvasGridProps["arrowComponents"];
     popoverRange?: SheetRange | SheetCoordinate;
     gridLineWidth?: number;
     frozenColumns: number;
     frozenRows: number;
 };
-export declare const useGridChildren: ({ stickyEditor, editorComponent, chartComponents, embedComponents, slicerComponents, pivotPlaceholders, tableResizers, hiddenColumnMarkers, frozenHiddenColumnMarkers, hiddenRowMarkers, frozenHiddenRowMarkers, gridLineWidth, frozenColumns, frozenRows, headerMenuComponent, isHeaderMenuInFrozenColumn, popoverRange, popoverComponent, cellExpandComponent, }: UseGridChildrenProps) => (props: GridChildrenProps) => React.JSX.Element;
+export declare const useGridChildren: ({ stickyEditor, editorComponent, chartComponents, embedComponents, slicerComponents, pivotPlaceholders, tableResizers, hiddenColumnMarkers, frozenHiddenColumnMarkers, hiddenRowMarkers, frozenHiddenRowMarkers, gridLineWidth, frozenColumns, frozenRows, headerMenuComponent, isHeaderMenuInFrozenColumn, popoverRange, popoverComponent, cellExpandComponent, arrowComponents, }: UseGridChildrenProps) => (props: GridChildrenProps) => React.JSX.Element;
 export declare const StyledGridChildren: ({ className, elevate, ...props }: React.HTMLAttributes<HTMLDivElement> & {
     elevate?: boolean;
 }) => React.JSX.Element;

package/dist/esm/hooks/use-grid-children.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-grid-children.d.ts","sourceRoot":"","sources":["../../../hooks/use-grid-children.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,KAAsB,MAAM,OAAO,CAAC;AAI3C,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE3D,KAAK,oBAAoB,GAAG;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;IAC3C,eAAe,EAAE,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC,iBAAiB,CAAC,CAAC;IACvE,eAAe,EACX,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC,iBAAiB,CAAC,GACrD,IAAI,GACJ,SAAS,CAAC;IACd,gBAAgB,EACZ,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC,kBAAkB,CAAC,GACtD,IAAI,GACJ,SAAS,CAAC;IACd,iBAAiB,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1D,aAAa,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC;IACtD,mBAAmB,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1D,yBAAyB,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;IAChE,gBAAgB,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;IACvD,sBAAsB,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;IAC7D,mBAAmB,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1D,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC,gBAAgB,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;IACvD,mBAAmB,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1D,YAAY,CAAC,EAAE,UAAU,GAAG,eAAe,CAAC;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,oWAoB7B,oBAAoB,aAiBX,iBAAiB,sBAyI5B,CAAC;AA+BF,eAAO,MAAM,kBAAkB,GAAI,kCAIhC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,sBAS9D,CAAC"}
+{"version":3,"file":"use-grid-children.d.ts","sourceRoot":"","sources":["../../../hooks/use-grid-children.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,KAAsB,MAAM,OAAO,CAAC;AAG3C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAEzE,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE3D,KAAK,oBAAoB,GAAG;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;IAC3C,eAAe,EAAE,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC,iBAAiB,CAAC,CAAC;IACvE,eAAe,EACX,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC,iBAAiB,CAAC,GACrD,IAAI,GACJ,SAAS,CAAC;IACd,gBAAgB,EACZ,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC,kBAAkB,CAAC,GACtD,IAAI,GACJ,SAAS,CAAC;IACd,iBAAiB,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1D,aAAa,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC;IACtD,mBAAmB,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1D,yBAAyB,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;IAChE,gBAAgB,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;IACvD,sBAAsB,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;IAC7D,mBAAmB,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1D,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC,gBAAgB,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;IACvD,mBAAmB,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1D,uEAAuE;IACvE,eAAe,CAAC,EAAE,eAAe,CAAC,iBAAiB,CAAC,CAAC;IACrD,YAAY,CAAC,EAAE,UAAU,GAAG,eAAe,CAAC;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,qXAqB7B,oBAAoB,aAiBX,iBAAiB,sBA2I5B,CAAC;AA+BF,eAAO,MAAM,kBAAkB,GAAI,kCAIhC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,sBAS9D,CAAC"}

package/dist/esm/hooks/use-grid-children.js

@@ -2,7 +2,7 @@ import { cn } from "@rowsncolumns/ui";
 import React, { useCallback } from "react";
 import { useEditingCellCoordinate } from "../atoms";
 import { isSheetRange } from "../helpers";
-export const useGridChildren = ({ stickyEditor, editorComponent, chartComponents, embedComponents, slicerComponents, pivotPlaceholders, tableResizers, hiddenColumnMarkers, frozenHiddenColumnMarkers, hiddenRowMarkers, frozenHiddenRowMarkers, gridLineWidth = 1, frozenColumns, frozenRows, headerMenuComponent, isHeaderMenuInFrozenColumn, popoverRange, popoverComponent, cellExpandComponent, }) => {
+export const useGridChildren = ({ stickyEditor, editorComponent, chartComponents, embedComponents, slicerComponents, pivotPlaceholders, tableResizers, hiddenColumnMarkers, frozenHiddenColumnMarkers, hiddenRowMarkers, frozenHiddenRowMarkers, gridLineWidth = 1, frozenColumns, frozenRows, headerMenuComponent, isHeaderMenuInFrozenColumn, popoverRange, popoverComponent, cellExpandComponent, arrowComponents, }) => {
     const editingCellCoordinate = useEditingCellCoordinate();
     // Quite a bit of logic for non sticky editor
     // Remove if majority dont use this
@@ -42,7 +42,8 @@ export const useGridChildren = ({ stickyEditor, editorComponent, chartComponents
                     slicerComponents?.body,
                     pivotPlaceholders,
                     popoverPlacement === "body" ? popoverComponent : null,
-                    cellExpandComponent)),
+                    cellExpandComponent,
+                    arrowComponents)),
             React.createElement(StyledGridChildren, { style: {
                     left: frozenColumnWidth + gridLineWidth,
                 } },
@@ -104,6 +105,7 @@ export const useGridChildren = ({ stickyEditor, editorComponent, chartComponents
         popoverComponent,
         popoverPlacement,
         cellExpandComponent,
+        arrowComponents,
     ]);
 };
 /**

package/dist/esm/hooks/use-keyboard-handler.d.ts.map

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

package/dist/esm/hooks/use-keyboard-handler.js

@@ -136,17 +136,23 @@ onCalculateNow, onRequestGoTo, onRequestPasteSpecial, onChangeBatch, getUserEnte
                     onRedo?.();
                     e.preventDefault();
                     return;
-                // Cmd/Ctrl + F
+                // Cmd/Ctrl + F. Claimed only when the host handles it so the
+                // browser's find keeps working otherwise. Cmd/Ctrl + Shift + F
+                // (filter) is matched by code further down.
                 case "f":
-                    if (!isShift) {
-                        onRequestSearch?.();
+                    if (isShift)
+                        break;
+                    if (onRequestSearch) {
+                        onRequestSearch();
                         e.preventDefault();
                     }
                     return;
-                // Cmd/Ctrl + H — Find & Replace
+                // Cmd/Ctrl + H — Find & Replace. Claimed only when the host
+                // handles it: on macOS Cmd+H hides the app (an Electron menu only
+                // gets the keys the page leaves alone).
                 case "h":
-                    if (!isShift) {
-                        onRequestReplace?.();
+                    if (!isShift && onRequestReplace) {
+                        onRequestReplace();
                         e.preventDefault();
                     }
                     return;
@@ -516,6 +522,7 @@ onCalculateNow, onRequestGoTo, onRequestPasteSpecial, onChangeBatch, getUserEnte
                 case "KeyF":
                     if (isMeta) {
                         onCreateBasicFilter?.(sheetId, activeCell, selections);
+                        e.preventDefault();
                     }
                     break;
             }

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

@@ -1 +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"}
+{"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,SA4CvD,CAAC"}

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

@@ -14,8 +14,11 @@ export const useNavigateToSheetRange = ({ onChangeActiveSheet, onChangeSelection
         };
         // Switch to new sheet
         onChangeActiveSheet?.(sheetRange.sheetId);
-        if (allowSelection && !isSheetRangeACell(sheetRange)) {
-            onChangeSelections?.(sheetRange.sheetId, [{ range: sheetRange }]);
+        // A single-cell target clears the selection, as a click on that cell
+        // does; leaving the previous range selected would send the next
+        // paste there instead of to the cell the user navigated to.
+        if (allowSelection) {
+            onChangeSelections?.(sheetRange.sheetId, isSheetRangeACell(sheetRange) ? [] : [{ range: sheetRange }]);
         }
         // Set active cell
         if (allowSelection) {

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

@@ -1 +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"}
+{"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,CA4ExE,CAAC"}

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

@@ -12,10 +12,29 @@ export const useResizeObserver = () => {
         y: 0,
     });
     const node = useRef(null);
-    const observer = useRef(undefined);
-    const disconnect = useCallback(() => observer.current?.disconnect(), []);
+    const binding = useRef(null);
+    const disconnect = useCallback(() => {
+        binding.current?.resize.disconnect();
+        binding.current?.adoption.disconnect();
+        binding.current = null;
+    }, []);
     const observe = useCallback(() => {
-        observer.current = new ResizeObserver(([entry]) => {
+        const target = node.current;
+        if (!target)
+            return;
+        const ownerDocument = target.ownerDocument;
+        if (binding.current?.node === target &&
+            binding.current.document === ownerDocument)
+            return;
+        disconnect();
+        const ownerWindow = ownerDocument.defaultView;
+        if (!ownerWindow)
+            return;
+        const resize = new ownerWindow.ResizeObserver(([entry]) => {
+            // An already queued notification from the old document must not restore its old dimensions.
+            if (target.ownerDocument !== ownerDocument ||
+                binding.current?.resize !== resize)
+                return;
             const { left, top, width, height, bottom, right, x, y } = entry.contentRect;
             setObserverEntry({
                 left,
@@ -28,13 +47,23 @@ export const useResizeObserver = () => {
                 y,
             });
         });
-        if (node.current) {
-            observer.current.observe(node.current);
-        }
-    }, [node]);
+        // A retained grid can be adopted into a pop-out without rendering again. Chromium's original
+        // document keeps the observation, so bind anew in the destination when the DOM moves. Observing
+        // child-list changes also catches an adopted ancestor (the grid's own parent need not change).
+        const adoption = new ownerWindow.MutationObserver(() => observe());
+        binding.current = {
+            node: target,
+            document: ownerDocument,
+            resize,
+            adoption,
+        };
+        resize.observe(target);
+        adoption.observe(ownerDocument, { childList: true, subtree: true });
+    }, [disconnect]);
+    // Also follow a ref assigned to a replacement element in an ordinary React commit.
     useIsomorphicLayoutEffect(() => {
         observe();
-        return () => disconnect();
-    }, [disconnect, observe]);
+    });
+    useIsomorphicLayoutEffect(() => disconnect, [disconnect]);
     return [node, observerEntry];
 };

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

@@ -16,6 +16,10 @@ export type UseSelectionRendererProps = {
     sheetId: number;
     selectionBackgroundColor: string;
     selectionBorderColor: string;
+    /** Border width of a range selection outside formula mode (`CanvasGrid`'s prop). */
+    selectionStrokeWidth?: number;
+    /** Whether the active cell draws its own border while a range is selected (`CanvasGrid`'s prop). */
+    showActiveCellBorderInSelection?: boolean;
     scale?: number;
     getSheetName?(sheetId: number): string | undefined;
     onChangeActiveCell: CanvasGridProps["onChangeActiveCell"];
@@ -73,5 +77,5 @@ export type UseSelectionRendererProps = {
      */
     isFillShrink?: boolean;
 };
-export declare const useSelectionRenderer: ({ sheetId, selectionCount, selectionBackgroundColor, selectionBorderColor, onSelectionMouseDown, onChangeActiveCell, onChangeSelections, onRequestEditTable, onRequestEditPivotTable, onMouseDownResizeHandle, onMouseDownChartSourceResizeHandle, onMouseDownMoveSelection, isDraggingMoveSelection, onFlashEnd, getSheetName, resizeHandleSize, showSelectionResizeHandles, resizeHandleBorderColor, SelectionTitleComponent, isResizingTable, fillHandleSize, showFillHandle, enableMagicFill, MagicFillComponent, MagicFillContent, readonly, showPasteMenu, fillOptions, onChooseFillType, onOpenFillSeriesDialog, onCloseFillOptions, insertOptions, onChooseInsertOption, tableAutoExpansion, canStopAutoExpandingTables, onChooseTableAutoExpansionOption, calculatedColumnFill, canStopAutoCalculatedColumns, onChooseCalculatedColumnOption, hoveredCell, onSplitTextToColumns, onRemoveQuickEdit, onAddQuickEdit, QuickEdit, PasteMenu, SuggestionAction, cachedHoveredSelectionIds, isFillShrink, }: UseSelectionRendererProps) => (props: SelectionProps<SelectionAttributes>) => React.JSX.Element | null;
+export declare const useSelectionRenderer: ({ sheetId, selectionCount, selectionBackgroundColor, selectionBorderColor, selectionStrokeWidth, showActiveCellBorderInSelection, onSelectionMouseDown, onChangeActiveCell, onChangeSelections, onRequestEditTable, onRequestEditPivotTable, onMouseDownResizeHandle, onMouseDownChartSourceResizeHandle, onMouseDownMoveSelection, isDraggingMoveSelection, onFlashEnd, getSheetName, resizeHandleSize, showSelectionResizeHandles, resizeHandleBorderColor, SelectionTitleComponent, isResizingTable, fillHandleSize, showFillHandle, enableMagicFill, MagicFillComponent, MagicFillContent, readonly, showPasteMenu, fillOptions, onChooseFillType, onOpenFillSeriesDialog, onCloseFillOptions, insertOptions, onChooseInsertOption, tableAutoExpansion, canStopAutoExpandingTables, onChooseTableAutoExpansionOption, calculatedColumnFill, canStopAutoCalculatedColumns, onChooseCalculatedColumnOption, hoveredCell, onSplitTextToColumns, onRemoveQuickEdit, onAddQuickEdit, QuickEdit, PasteMenu, SuggestionAction, cachedHoveredSelectionIds, isFillShrink, }: UseSelectionRendererProps) => (props: SelectionProps<SelectionAttributes>) => React.JSX.Element | null;
 //# sourceMappingURL=use-selection-renderer.d.ts.map

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

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

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

@@ -28,7 +28,7 @@ const anchorsInsertOptions = (insertOptions, range, type, index, isEmptySelectio
         : range.startColumnIndex <= bandEnd &&
             range.endColumnIndex >= insertOptions.start;
 };
-export const useSelectionRenderer = ({ sheetId, selectionCount, selectionBackgroundColor, selectionBorderColor, onSelectionMouseDown, onChangeActiveCell, onChangeSelections, onRequestEditTable, onRequestEditPivotTable, onMouseDownResizeHandle, onMouseDownChartSourceResizeHandle, onMouseDownMoveSelection, isDraggingMoveSelection, onFlashEnd, getSheetName, resizeHandleSize = 6, showSelectionResizeHandles, resizeHandleBorderColor, SelectionTitleComponent, isResizingTable, fillHandleSize, showFillHandle, enableMagicFill, MagicFillComponent, MagicFillContent, readonly, showPasteMenu, fillOptions, onChooseFillType, onOpenFillSeriesDialog, onCloseFillOptions, insertOptions, onChooseInsertOption, tableAutoExpansion, canStopAutoExpandingTables = false, onChooseTableAutoExpansionOption, calculatedColumnFill, canStopAutoCalculatedColumns = false, onChooseCalculatedColumnOption, hoveredCell, onSplitTextToColumns, onRemoveQuickEdit, onAddQuickEdit, QuickEdit, PasteMenu, SuggestionAction, cachedHoveredSelectionIds, isFillShrink = false, }) => {
+export const useSelectionRenderer = ({ sheetId, selectionCount, selectionBackgroundColor, selectionBorderColor, selectionStrokeWidth, showActiveCellBorderInSelection, onSelectionMouseDown, onChangeActiveCell, onChangeSelections, onRequestEditTable, onRequestEditPivotTable, onMouseDownResizeHandle, onMouseDownChartSourceResizeHandle, onMouseDownMoveSelection, isDraggingMoveSelection, onFlashEnd, getSheetName, resizeHandleSize = 6, showSelectionResizeHandles, resizeHandleBorderColor, SelectionTitleComponent, isResizingTable, fillHandleSize, showFillHandle, enableMagicFill, MagicFillComponent, MagicFillContent, readonly, showPasteMenu, fillOptions, onChooseFillType, onOpenFillSeriesDialog, onCloseFillOptions, insertOptions, onChooseInsertOption, tableAutoExpansion, canStopAutoExpandingTables = false, onChooseTableAutoExpansionOption, calculatedColumnFill, canStopAutoCalculatedColumns = false, onChooseCalculatedColumnOption, hoveredCell, onSplitTextToColumns, onRemoveQuickEdit, onAddQuickEdit, QuickEdit, PasteMenu, SuggestionAction, cachedHoveredSelectionIds, isFillShrink = false, }) => {
     const formulaMode = useFormulaModeValue();
     const selectionIndex = useFormulaSelectionIndex();
     const hoveredCellRef = useRef(hoveredCell);
@@ -71,7 +71,11 @@ export const useSelectionRenderer = ({ sheetId, selectionCount, selectionBackgro
             : getSelectionStrokeStyle(formulaMode, isFill, isActiveCell, isEmptySelections);
         const strokeWidth = isBorder
             ? props.strokeWidth
-            : getSelectionStrokeWidth(formulaMode, isFill, isActiveCell, isResizingTable);
+            : getSelectionStrokeWidth(formulaMode, isFill, isActiveCell, isResizingTable, {
+                selectionStrokeWidth,
+                showActiveCellBorderInSelection,
+                hasSelections: !isEmptySelections,
+            });
         const fillOpacity = isBorder
             ? props.fillOpacity
             : isFill && isFillShrink
@@ -179,6 +183,8 @@ export const useSelectionRenderer = ({ sheetId, selectionCount, selectionBackgro
         selectionCount,
         selectionBackgroundColor,
         selectionBorderColor,
+        selectionStrokeWidth,
+        showActiveCellBorderInSelection,
         selectionIndex,
         isResizingTable,
         resizeHandleBorderColor,