@rowsncolumns/spreadsheet 10.3.0 → 10.4.0

package/dist/esm/hooks/use-embeds-charts.js

@@ -1,7 +1,40 @@
-import React, { useCallback, useMemo } from "react";
-import { useSelectedChartEmbed } from "../atoms";
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import { useGetChartActions, useSelectedChartEmbed, useSelectedChartSeries, } from "../atoms";
+import { EmbedContextMenu, hasEmbedContextMenuItems, } from "../components/context-menu/embed-context-menu";
+import { useIsMoveChartDialogMounted, useOpenMoveChartDialog, } from "../atoms/move-chart-dialog.atom";
 import { ChartComponent, EmbedComponent, EmbedDraggable, SlicerComponent, } from "../components/embeds";
 import { DEFAULT_OVERLAY_POSITION } from "../config";
+import { pivotChartFieldButtonsVisible, togglePivotChartFieldButtons, } from "../utils/pivot-chart-field-buttons";
+import { canCopyImageToClipboard, copyPngToClipboard, } from "../utils/copy-as-picture";
+import { getStackingRanks, planZOrderChange, stackingKey, } from "../utils/z-order";
+import { DefaultContextMenuWrapper, } from "./use-context-menu";
+/**
+ * The cell an object's top-left corner actually sits in: its anchor cell
+ * walked forward by its pixel offsets. An `absoluteAnchor` imports as A1 plus
+ * a large offset, so the raw anchor says nothing about which pane the object
+ * is on screen in. The walk is bounded by `maxRow` / `maxColumn` (the frozen
+ * counts) — past them the answer is "body" regardless of the exact cell.
+ */
+export const resolveOverlayCell = (anchorCell, offsetXPixels, offsetYPixels, getCellOffsetFromCoords, maxRow, maxColumn) => {
+    let { rowIndex, columnIndex } = anchorCell;
+    let x = offsetXPixels;
+    let y = offsetYPixels;
+    while (rowIndex < maxRow) {
+        const height = getCellOffsetFromCoords({ rowIndex, columnIndex })?.height;
+        if (height === undefined || y < height)
+            break;
+        y -= height;
+        rowIndex += 1;
+    }
+    while (columnIndex < maxColumn) {
+        const width = getCellOffsetFromCoords({ rowIndex, columnIndex })?.width;
+        if (width === undefined || x < width)
+            break;
+        x -= width;
+        columnIndex += 1;
+    }
+    return { rowIndex, columnIndex };
+};
 /**
  * Get placement of an item based on anchor cell position
  */
@@ -19,6 +52,19 @@ export const getOverlayPlacement = (anchorCell, frozenRows, frozenColumns) => {
         return "frozenColumn";
     return "body";
 };
+/** Excel's default placement — an object with no explicit mode moves and sizes with cells. */
+export const isMoveAndSizePlacement = (overlay) => (overlay?.placement ?? "moveAndSize") === "moveAndSize";
+/**
+ * The props that lay a frame out from both anchors — only a `moveAndSize`
+ * object with a persisted second anchor; the others keep their pixel size.
+ */
+export const getOverlayToAnchorProps = (overlay) => isMoveAndSizePlacement(overlay) && overlay.toCell
+    ? {
+        toCell: overlay.toCell,
+        toOffsetXPixels: overlay.toOffsetXPixels ?? 0,
+        toOffsetYPixels: overlay.toOffsetYPixels ?? 0,
+    }
+    : undefined;
 const defaultGetChartComponent = (props) => (React.createElement(ChartComponent, { ...props }));
 const defaultGetEmbedComponent = (props) => (React.createElement(EmbedComponent, { ...props }));
 const defaultGetSlicerComponent = (props) => (React.createElement(SlicerComponent, { ...props }));
@@ -37,15 +83,203 @@ const validateEmbeds = (embedsOrCharts, sheetId) => {
         return obj;
     });
 };
-export const useEmbedsCharts = ({ scale = 1, charts, embeds, slicers, sheetId, frozenRows = 0, frozenColumns = 0, getCellOffsetFromCoords, getCellCoordsFromOffset, getAbsolutePositionFromOffset, getBounds, selectedColor = "#1a73e8", onMoveChart, onResizeChart, onMoveEmbed, onResizeEmbed, onDeleteChart, onDeleteEmbed, onRequestEditEmbed, onMoveSlicer, onResizeSlicer, onDeleteSlicer, onRequestEditSlicer, onFilterTable, onFilterPivot, tables, pivotTables, getFormattedValue, getChartComponent = defaultGetChartComponent, getEmbedComponent = defaultGetEmbedComponent, getSlicerComponent = defaultGetSlicerComponent, readonly, theme, backgroundColor, disabled, }) => {
+export const useEmbedsCharts = ({ scale = 1, charts, embeds, slicers, sheetId, frozenRows = 0, frozenColumns = 0, getCellOffsetFromCoords, getCellCoordsFromOffset, getAbsolutePositionFromOffset, getRelativePositionFromOffset, ContextMenuWrapper = DefaultContextMenuWrapper, focusSheet, getBounds, selectedColor = "#1a73e8", onMoveChart, onResizeChart, chartClipboard, onMoveEmbed, onResizeEmbed, onDeleteChart, onUpdateChart, onChangeZOrder, onDeleteEmbed, onRequestEditEmbed, onMoveSlicer, onResizeSlicer, onDeleteSlicer, onRequestEditSlicer, onFilterTable, onFilterPivot, tables, pivotTables, getFormattedValue, getChartComponent = defaultGetChartComponent, getEmbedComponent = defaultGetEmbedComponent, getSlicerComponent = defaultGetSlicerComponent, readonly, theme, backgroundColor, disabled, }) => {
     const [selectedIndex, setSelectedIndex] = useSelectedChartEmbed();
+    const [selectedSeries, setSelectedSeries] = useSelectedChartSeries();
+    const getChartActions = useGetChartActions();
+    const [contextMenu, setContextMenu] = useState();
+    // The object the open menu belongs to; focus returns to it (or to the
+    // sheet once it has been deleted) when the menu closes.
+    const contextMenuTargetRef = useRef(null);
     /**
      * When user selects the sheet
      */
     const handleMouseDown = useCallback(() => {
         setSelectedIndex(undefined);
     }, [setSelectedIndex]);
-    const getCellPosition = useCallback((x, y) => {
+    // Escape on a selected object: Excel first steps back from a selected data
+    // series to the whole chart, then drops the selection and the active cell
+    // takes focus again
+    const handleDeselect = useCallback((id) => {
+        if (selectedSeries?.chartId === id) {
+            setSelectedSeries(undefined);
+            return;
+        }
+        setSelectedIndex(undefined);
+        focusSheet();
+    }, [selectedSeries, setSelectedSeries, setSelectedIndex, focusSheet]);
+    // Pressing on a chart selects it; a series selection is made afresh by the
+    // click that follows (the renderer publishes it), so a stale one never
+    // reappears when the same chart is re-selected
+    const selectChart = useCallback((id) => {
+        setSelectedIndex(id);
+        setSelectedSeries(undefined);
+    }, [setSelectedIndex, setSelectedSeries]);
+    // Double-click on a chart opens the host's editor (Excel opens the format pane)
+    const handleChartDoubleClick = useCallback((id) => {
+        getChartActions(id)?.requestEdit?.();
+    }, [getChartActions]);
+    // Stacking rank (1 = back-most) of every chart and embed on the sheet —
+    // charts and embeds are two arrays but one z-order (Excel's Arrange menu).
+    const stackingRanks = useMemo(() => getStackingRanks(charts, embeds, sheetId), [charts, embeds, sheetId]);
+    const stackingRankOf = useCallback((target) => stackingRanks.get(stackingKey(target)), [stackingRanks]);
+    /**
+     * Excel's Arrange commands for one object, each present only while it
+     * would move the object (the front-most one has nothing to bring forward).
+     */
+    const getArrangeActions = useCallback((target) => {
+        if (!onChangeZOrder || readonly) {
+            return {};
+        }
+        const arrange = (direction) => {
+            const changes = planZOrderChange(charts, embeds, sheetId, target, direction);
+            return changes ? () => onChangeZOrder(changes) : undefined;
+        };
+        return {
+            onBringToFront: arrange("bringToFront"),
+            onBringForward: arrange("bringForward"),
+            onSendBackward: arrange("sendBackward"),
+            onSendToBack: arrange("sendToBack"),
+        };
+    }, [onChangeZOrder, readonly, charts, embeds, sheetId]);
+    /**
+     * Menu actions for a floating object. Actions without a handler are
+     * omitted so the menu only lists commands that do something.
+     */
+    const openMoveChartDialog = useOpenMoveChartDialog();
+    const canMoveChartToSheet = useIsMoveChartDialogMounted();
+    const getContextMenuActions = useCallback((kind, id) => {
+        const actions = {};
+        if (kind === "chart") {
+            const chart = charts?.find((item) => item.chartId === id);
+            if (!chart) {
+                return actions;
+            }
+            const rendererActions = getChartActions(id);
+            if (chartClipboard) {
+                if (!readonly) {
+                    actions.onCut = () => chartClipboard.cutChart(id);
+                }
+                actions.onCopy = () => chartClipboard.copyChart(id);
+                if (chartClipboard.hasChartOnClipboard()) {
+                    actions.onPaste = () => chartClipboard.pasteChart();
+                }
+            }
+            // Excel's "Copy as Picture" — the capture starts inside the click
+            // that asked for it, so the clipboard write stays in the gesture.
+            const exportPng = rendererActions?.exportPng;
+            if (exportPng && canCopyImageToClipboard()) {
+                actions.onCopyAsPicture = () => {
+                    void copyPngToClipboard(exportPng());
+                };
+            }
+            if (rendererActions?.requestEdit && !readonly) {
+                actions.onRequestEdit = rendererActions.requestEdit;
+                // The editor opens on its Setup tab, whose first control is the
+                // chart type — the nearest thing to Excel's Change Chart Type dialog.
+                actions.onRequestChangeChartType = rendererActions.requestEdit;
+            }
+            if (rendererActions?.switchRowColumn && !readonly) {
+                actions.onSwitchRowColumn = rendererActions.switchRowColumn;
+            }
+            if (canMoveChartToSheet && !readonly) {
+                actions.onRequestMoveChart = () => openMoveChartDialog({ chart });
+            }
+            // PivotChart: Excel's Hide / Show All Field Buttons — one chart
+            // update (one undo step) that flips only the visibility flag.
+            if (chart.spec.pivotTableId != null && onUpdateChart && !readonly) {
+                const toggle = () => onUpdateChart({
+                    ...chart,
+                    spec: { ...chart.spec, ...togglePivotChartFieldButtons(chart.spec) },
+                });
+                if (pivotChartFieldButtonsVisible(chart.spec)) {
+                    actions.onHideFieldButtons = toggle;
+                }
+                else {
+                    actions.onShowFieldButtons = toggle;
+                }
+            }
+            if (rendererActions?.downloadPng) {
+                actions.onDownloadPng = rendererActions.downloadPng;
+            }
+            Object.assign(actions, getArrangeActions({ kind: "chart", id }));
+            if (onDeleteChart && !readonly) {
+                actions.onDelete = () => onDeleteChart(id);
+            }
+            return actions;
+        }
+        const embed = embeds?.find((item) => item.embedId === id);
+        if (!embed) {
+            return actions;
+        }
+        if (onRequestEditEmbed && !readonly) {
+            actions.onRequestEdit = () => onRequestEditEmbed(embed);
+        }
+        Object.assign(actions, getArrangeActions({ kind: "embed", id }));
+        if (onDeleteEmbed && !readonly) {
+            actions.onDelete = () => onDeleteEmbed(id);
+        }
+        return actions;
+    }, [
+        charts,
+        embeds,
+        readonly,
+        getChartActions,
+        chartClipboard,
+        onDeleteChart,
+        onUpdateChart,
+        onRequestEditEmbed,
+        onDeleteEmbed,
+        canMoveChartToSheet,
+        openMoveChartDialog,
+        getArrangeActions,
+    ]);
+    /**
+     * Right-click / Shift+F10 on a floating object: select it (Excel does),
+     * then open its menu at the pointer.
+     */
+    const requestContextMenu = useCallback((kind, id, clientX, clientY, element) => {
+        setSelectedIndex(id);
+        if (!hasEmbedContextMenuItems(getContextMenuActions(kind, id))) {
+            return;
+        }
+        const position = getRelativePositionFromOffset(clientX, clientY);
+        if (!position) {
+            return;
+        }
+        contextMenuTargetRef.current = element;
+        setContextMenu({ kind, id, left: position.x, top: position.y });
+    }, [setSelectedIndex, getContextMenuActions, getRelativePositionFromOffset]);
+    const handleChartContextMenu = useCallback((id, clientX, clientY, element) => requestContextMenu("chart", id, clientX, clientY, element), [requestContextMenu]);
+    const handleEmbedContextMenu = useCallback((id, clientX, clientY, element) => requestContextMenu("embed", id, clientX, clientY, element), [requestContextMenu]);
+    const closeContextMenu = useCallback((isOpen) => {
+        if (!isOpen) {
+            setContextMenu(undefined);
+        }
+    }, []);
+    const handleContextMenuCloseAutoFocus = useCallback(() => {
+        const target = contextMenuTargetRef.current;
+        contextMenuTargetRef.current = null;
+        if (target?.isConnected) {
+            target.focus({ preventScroll: true });
+        }
+        else {
+            focusSheet();
+        }
+    }, [focusSheet]);
+    const contextMenuComponent = useMemo(() => {
+        const actions = contextMenu
+            ? getContextMenuActions(contextMenu.kind, contextMenu.id)
+            : undefined;
+        return (React.createElement(ContextMenuWrapper, { left: contextMenu?.left ?? 0, top: contextMenu?.top ?? 0, isOpen: !!contextMenu, onOpenChange: closeContextMenu }, contextMenu && actions ? (React.createElement(EmbedContextMenu, { kind: contextMenu.kind, ...actions, onCloseAutoFocus: handleContextMenuCloseAutoFocus })) : null));
+    }, [
+        ContextMenuWrapper,
+        contextMenu,
+        getContextMenuActions,
+        closeContextMenu,
+        handleContextMenuCloseAutoFocus,
+    ]);
+    const getCellPositionAt = useCallback((x, y) => {
         const position = getAbsolutePositionFromOffset(x, y);
         // Use includeFrozen=true to detect cells in all regions
         const anchorCell = getCellCoordsFromOffset(position?.x ?? 0, position?.y ?? 0, true);
@@ -60,15 +294,69 @@ export const useEmbedsCharts = ({ scale = 1, charts, embeds, slicers, sheetId, f
         getCellCoordsFromOffset,
         getAbsolutePositionFromOffset,
     ]);
+    /**
+     * Anchor cell + pixel offsets for a point in grid pixel space. A point past
+     * the sheet body (no cell there) is pulled back to its nearest body cell, so
+     * a gesture that ends outside the sheet is persisted at the clamped position
+     * instead of being dropped and leaving the frame where it was let go.
+     */
+    const getCellPosition = useCallback((x, y) => {
+        const position = getCellPositionAt(x, y);
+        if (position) {
+            return position;
+        }
+        const bounds = getBounds();
+        const clampedX = Math.max(bounds.left ?? -Infinity, Math.min(bounds.right !== undefined ? bounds.right - 1 : Infinity, x));
+        const clampedY = Math.max(bounds.top ?? -Infinity, Math.min(bounds.bottom !== undefined ? bounds.bottom - 1 : Infinity, y));
+        if (clampedX === x && clampedY === y) {
+            return undefined;
+        }
+        return getCellPositionAt(clampedX, clampedY);
+    }, [getCellPositionAt, getBounds]);
+    // Alt-drag / Alt-resize: nearest cell corner to a point, in the same pixel space the objects are laid out in
+    const snapToCellGrid = useCallback((x, y) => {
+        const position = getCellPosition(x, y);
+        const cell = position ? getCellOffsetFromCoords(position[0]) : undefined;
+        if (!position || !cell) {
+            return undefined;
+        }
+        const [, offsetXPixels, offsetYPixels] = position;
+        return {
+            x: offsetXPixels < cell.width / 2 ? cell.x : cell.x + cell.width,
+            y: offsetYPixels < cell.height / 2 ? cell.y : cell.y + cell.height,
+        };
+    }, [getCellPosition, getCellOffsetFromCoords]);
+    /**
+     * Where a `moveAndSize` object's bottom-right corner landed (grid pixel
+     * space) as its second anchor — Excel rewrites `to` on every move and
+     * resize. `moveOnly` / `absolute` objects keep a pixel size instead.
+     */
+    const getToAnchor = useCallback((overlay, right, bottom) => {
+        if (!isMoveAndSizePlacement(overlay)) {
+            return undefined;
+        }
+        const position = getCellPosition(right, bottom);
+        if (!position) {
+            return undefined;
+        }
+        const [toCell, toOffsetXPixels, toOffsetYPixels] = position;
+        return { toCell, toOffsetXPixels, toOffsetYPixels };
+    }, [getCellPosition]);
+    const getChartOverlay = useCallback((id) => charts?.find((chart) => chart.chartId === id)?.position
+        ?.overlayPosition, [charts]);
+    const getEmbedOverlay = useCallback((id) => embeds?.find((embed) => embed.embedId === id)?.position
+        ?.overlayPosition, [embeds]);
+    const getSlicerOverlay = useCallback((id) => slicers?.find((slicer) => slicer.slicerId === id)?.position
+        ?.overlayPosition, [slicers]);
     // Callback when user moves a chart
-    const handleMove = useCallback((id, x, y) => {
+    const handleMove = useCallback((id, x, y, width, height) => {
         const position = getCellPosition(x, y);
         if (!position) {
             return;
         }
         const [anchorCell, offsetXPixels, offsetYPixels] = position;
-        onMoveChart?.(id, anchorCell, offsetXPixels, offsetYPixels);
-    }, [onMoveChart, getCellPosition]);
+        onMoveChart?.(id, anchorCell, offsetXPixels, offsetYPixels, getToAnchor(getChartOverlay(id), x + width, y + height));
+    }, [onMoveChart, getCellPosition, getToAnchor, getChartOverlay]);
     // Callback when resizes an embed
     const handleEmbedResize = useCallback((id, x, y, width, height) => {
         const position = getCellPosition(x, y);
@@ -76,17 +364,17 @@ export const useEmbedsCharts = ({ scale = 1, charts, embeds, slicers, sheetId, f
             return;
         }
         const [anchorCell, offsetXPixels, offsetYPixels] = position;
-        onResizeEmbed?.(id, sheetId, anchorCell, offsetXPixels, offsetYPixels, width, height);
-    }, [onResizeEmbed, sheetId, getCellPosition]);
+        onResizeEmbed?.(id, sheetId, anchorCell, offsetXPixels, offsetYPixels, width, height, getToAnchor(getEmbedOverlay(id), x + width * scale, y + height * scale));
+    }, [onResizeEmbed, sheetId, scale, getCellPosition, getToAnchor, getEmbedOverlay]);
     // Callback when user moves a chart
-    const handleEmbedMove = useCallback((id, x, y) => {
+    const handleEmbedMove = useCallback((id, x, y, width, height) => {
         const position = getCellPosition(x, y);
         if (!position) {
             return;
         }
         const [anchorCell, offsetXPixels, offsetYPixels] = position;
-        onMoveEmbed?.(id, sheetId, anchorCell, offsetXPixels, offsetYPixels);
-    }, [onMoveEmbed, sheetId, getCellPosition]);
+        onMoveEmbed?.(id, sheetId, anchorCell, offsetXPixels, offsetYPixels, getToAnchor(getEmbedOverlay(id), x + width, y + height));
+    }, [onMoveEmbed, sheetId, getCellPosition, getToAnchor, getEmbedOverlay]);
     // Callback when resizes a chart
     const handleResize = useCallback((id, x, y, width, height) => {
         const position = getCellPosition(x, y);
@@ -94,8 +382,8 @@ export const useEmbedsCharts = ({ scale = 1, charts, embeds, slicers, sheetId, f
             return;
         }
         const [anchorCell, offsetXPixels, offsetYPixels] = position;
-        onResizeChart?.(id, anchorCell, offsetXPixels, offsetYPixels, width, height);
-    }, [onResizeChart, getCellPosition]);
+        onResizeChart?.(id, anchorCell, offsetXPixels, offsetYPixels, width, height, getToAnchor(getChartOverlay(id), x + width * scale, y + height * scale));
+    }, [onResizeChart, scale, getCellPosition, getToAnchor, getChartOverlay]);
     // Callback when user resizes a slicer
     const handleSlicerResize = useCallback((id, x, y, width, height) => {
         const position = getCellPosition(x, y);
@@ -103,17 +391,24 @@ export const useEmbedsCharts = ({ scale = 1, charts, embeds, slicers, sheetId, f
             return;
         }
         const [anchorCell, offsetXPixels, offsetYPixels] = position;
-        onResizeSlicer?.(id, sheetId, anchorCell, offsetXPixels, offsetYPixels, width, height);
-    }, [onResizeSlicer, sheetId, getCellPosition]);
+        onResizeSlicer?.(id, sheetId, anchorCell, offsetXPixels, offsetYPixels, width, height, getToAnchor(getSlicerOverlay(id), x + width * scale, y + height * scale));
+    }, [onResizeSlicer, sheetId, scale, getCellPosition, getToAnchor, getSlicerOverlay]);
     // Callback when user moves a slicer
-    const handleSlicerMove = useCallback((id, x, y) => {
+    const handleSlicerMove = useCallback((id, x, y, width, height) => {
         const position = getCellPosition(x, y);
         if (!position) {
             return;
         }
         const [anchorCell, offsetXPixels, offsetYPixels] = position;
-        onMoveSlicer?.(id, sheetId, anchorCell, offsetXPixels, offsetYPixels);
-    }, [onMoveSlicer, sheetId, getCellPosition]);
+        onMoveSlicer?.(id, sheetId, anchorCell, offsetXPixels, offsetYPixels, getToAnchor(getSlicerOverlay(id), x + width, y + height));
+    }, [onMoveSlicer, sheetId, getCellPosition, getToAnchor, getSlicerOverlay]);
+    // The frozen-pane layer an object renders in: the cell its top-left corner
+    // actually sits in (anchor walked forward by the pixel offsets) against the
+    // frozen counts. Charts, pictures / embeds and slicers share it, so an object
+    // anchored in the frozen rows stays put while the body scrolls, like Excel.
+    const placementOf = useCallback(({ anchorCell, offsetXPixels, offsetYPixels, }) => getOverlayPlacement(anchorCell
+        ? resolveOverlayCell(anchorCell, offsetXPixels ?? 0, offsetYPixels ?? 0, getCellOffsetFromCoords, frozenRows, frozenColumns)
+        : anchorCell, frozenRows, frozenColumns), [frozenRows, frozenColumns, getCellOffsetFromCoords]);
     // Chart components - categorized by frozen pane placement
     const chartComponents = useMemo(() => {
         const result = {
@@ -129,13 +424,24 @@ export const useEmbedsCharts = ({ scale = 1, charts, embeds, slicers, sheetId, f
         const bounds = getBounds();
         validateEmbeds(charts, sheetId)
             ?.filter((chart) => chart.position.sheetId === sheetId)
-            .forEach((chart) => {
+            .map((chart) => ({
+            chart,
+            zIndex: stackingRankOf({ kind: "chart", id: chart.chartId }),
+        }))
+            .sort((a, b) => (a.zIndex ?? 0) - (b.zIndex ?? 0))
+            .forEach(({ chart, zIndex }) => {
             const { chartId, position: { overlayPosition }, borderColor, draggable, resizable, } = chart;
             const { anchorCell, widthPixels = 0, heightPixels = 0, offsetXPixels = 0, offsetYPixels = 0, } = overlayPosition;
             const isSelected = selectedIndex === chartId;
             const finalBorderColor = isSelected ? selectedColor : borderColor;
-            const placement = getOverlayPlacement(anchorCell, frozenRows, frozenColumns);
-            const component = (React.createElement(EmbedDraggable, { bounds: bounds, key: chartId, anchorCell: anchorCell, id: chartId, isSelected: isSelected, borderColor: finalBorderColor ?? undefined, onPointerDown: () => setSelectedIndex(chartId), height: (heightPixels ?? 0) * scale, width: (widthPixels ?? 0) * scale, offsetXPixels: offsetXPixels ?? 0, offsetYPixels: offsetYPixels ?? 0, onResize: handleResize, onMove: handleMove, scale: scale, onDelete: onDeleteChart, draggable: readonly ? false : draggable ?? undefined, resizable: readonly ? false : resizable ?? undefined }, (width, height) => getChartComponent?.({
+            const placement = placementOf(overlayPosition);
+            const component = (React.createElement(EmbedDraggable, { bounds: bounds, key: chartId, anchorCell: anchorCell, id: chartId, isSelected: isSelected, zIndex: zIndex, borderColor: finalBorderColor ?? undefined, onPointerDown: () => selectChart(chartId), onDoubleClick: readonly ? undefined : handleChartDoubleClick, height: (heightPixels ?? 0) * scale, width: (widthPixels ?? 0) * scale, offsetXPixels: offsetXPixels ?? 0, offsetYPixels: offsetYPixels ?? 0, ...getOverlayToAnchorProps(overlayPosition), onResize: handleResize, onMove: handleMove, scale: scale, onDelete: onDeleteChart, onDuplicate: chartClipboard?.duplicateChart, onCopy: chartClipboard
+                    ? (id, e) => chartClipboard.copyChart(id, e.nativeEvent)
+                    : undefined, onCut: chartClipboard
+                    ? (id, e) => chartClipboard.cutChart(id, e.nativeEvent)
+                    : undefined, onPaste: chartClipboard
+                    ? (_id, e) => chartClipboard.pasteChart(e.nativeEvent)
+                    : undefined, onDeselect: handleDeselect, onRequestContextMenu: handleChartContextMenu, snapToGrid: snapToCellGrid, draggable: readonly ? false : draggable ?? undefined, resizable: readonly ? false : resizable ?? undefined }, (width, height) => getChartComponent?.({
                 chart,
                 width,
                 height,
@@ -143,6 +449,11 @@ export const useEmbedsCharts = ({ scale = 1, charts, embeds, slicers, sheetId, f
                 backgroundColor,
                 isSelected,
                 onDeleteChart,
+                onUpdateChart,
+                onCopyChart: chartClipboard?.copyChart,
+                onCutChart: chartClipboard?.cutChart,
+                onPasteChart: chartClipboard?.pasteChart,
+                onDuplicateChart: chartClipboard?.duplicateChart,
                 sheetId,
                 readonly,
             })));
@@ -157,31 +468,48 @@ export const useEmbedsCharts = ({ scale = 1, charts, embeds, slicers, sheetId, f
         sheetId,
         selectedColor,
         selectedIndex,
-        setSelectedIndex,
+        selectChart,
+        handleDeselect,
+        handleChartDoubleClick,
+        snapToCellGrid,
         handleMove,
         handleResize,
+        handleChartContextMenu,
         getChartComponent,
         theme,
         onDeleteChart,
+        onUpdateChart,
+        chartClipboard,
         backgroundColor,
-        frozenRows,
-        frozenColumns,
+        placementOf,
+        stackingRankOf,
     ]);
-    // Embed components
+    // Embed components - categorized by frozen pane placement like charts
     const embedComponents = useMemo(() => {
+        const result = {
+            body: [],
+            frozenRow: [],
+            frozenColumn: [],
+            intersection: [],
+        };
         // If user has no EmbedComponent, skip rendering
         if (!getEmbedComponent || disabled) {
-            return [];
+            return result;
         }
-        return (validateEmbeds(embeds, sheetId)
+        validateEmbeds(embeds, sheetId)
             ?.filter((embed) => embed.position.sheetId === sheetId)
-            .map((embed) => {
+            .map((embed) => ({
+            embed,
+            zIndex: stackingRankOf({ kind: "embed", id: embed.embedId }),
+        }))
+            .sort((a, b) => (a.zIndex ?? 0) - (b.zIndex ?? 0))
+            .forEach(({ embed, zIndex }) => {
             const { embedId, position: { overlayPosition }, borderColor, lockAspectRatio, draggable, resizable, } = embed;
             const { anchorCell, widthPixels = 0, heightPixels = 0, offsetXPixels = 0, offsetYPixels = 0, } = overlayPosition;
             const bounds = getBounds();
             const isSelected = selectedIndex === embedId;
             const finalBorderColor = isSelected ? selectedColor : borderColor;
-            return (React.createElement(EmbedDraggable, { key: embedId, anchorCell: anchorCell, id: embedId, isSelected: isSelected, borderColor: finalBorderColor ?? undefined, onPointerDown: () => setSelectedIndex(embedId), height: (heightPixels ?? 0) * scale, width: (widthPixels ?? 0) * scale, offsetXPixels: offsetXPixels ?? 0, offsetYPixels: offsetYPixels ?? 0, onResize: handleEmbedResize, onMove: handleEmbedMove, bounds: bounds, scale: scale, onDelete: onDeleteEmbed, lockAspectRatio: lockAspectRatio ?? undefined, resizable: readonly ? false : resizable ?? undefined, draggable: readonly ? false : draggable ?? undefined }, (width, height) => getEmbedComponent?.({
+            result[placementOf(overlayPosition)].push(React.createElement(EmbedDraggable, { key: embedId, anchorCell: anchorCell, id: embedId, isSelected: isSelected, zIndex: zIndex, borderColor: finalBorderColor ?? undefined, onPointerDown: () => setSelectedIndex(embedId), height: (heightPixels ?? 0) * scale, width: (widthPixels ?? 0) * scale, offsetXPixels: offsetXPixels ?? 0, offsetYPixels: offsetYPixels ?? 0, ...getOverlayToAnchorProps(overlayPosition), onResize: handleEmbedResize, onMove: handleEmbedMove, bounds: bounds, scale: scale, onDelete: onDeleteEmbed, onDeselect: handleDeselect, onRequestContextMenu: handleEmbedContextMenu, snapToGrid: snapToCellGrid, lockAspectRatio: lockAspectRatio ?? undefined, resizable: readonly ? false : resizable ?? undefined, draggable: readonly ? false : draggable ?? undefined }, (width, height) => getEmbedComponent?.({
                 embed,
                 width,
                 height,
@@ -193,7 +521,8 @@ export const useEmbedsCharts = ({ scale = 1, charts, embeds, slicers, sheetId, f
                 sheetId,
                 readonly,
             })));
-        }) ?? []);
+        });
+        return result;
     }, [
         disabled,
         scale,
@@ -204,31 +533,43 @@ export const useEmbedsCharts = ({ scale = 1, charts, embeds, slicers, sheetId, f
         getBounds,
         selectedIndex,
         setSelectedIndex,
+        handleDeselect,
+        snapToCellGrid,
         handleEmbedMove,
         handleEmbedResize,
+        handleEmbedContextMenu,
         getEmbedComponent,
         theme,
         onDeleteEmbed,
         onRequestEditEmbed,
         backgroundColor,
+        placementOf,
+        stackingRankOf,
     ]);
-    // Slicer components
+    // Slicer components — always above charts and embeds, as before z-order;
+    // categorized by frozen pane placement like charts.
     const slicerComponents = useMemo(() => {
+        const result = {
+            body: [],
+            frozenRow: [],
+            frozenColumn: [],
+            intersection: [],
+        };
         // If user has no SlicerComponent, skip rendering
         if (!getSlicerComponent || disabled) {
-            return [];
+            return result;
         }
-        return (validateEmbeds(slicers, sheetId)
+        validateEmbeds(slicers, sheetId)
             ?.filter((slicer) => slicer.position.sheetId === sheetId)
-            .map((slicer) => {
+            .forEach((slicer) => {
             const { slicerId, position: { overlayPosition }, borderColor, draggable, resizable, } = slicer;
             const { anchorCell, widthPixels = 0, heightPixels = 0, offsetXPixels = 0, offsetYPixels = 0, } = overlayPosition;
             const bounds = getBounds();
             const isSelected = selectedIndex === slicerId;
             const finalBorderColor = isSelected ? selectedColor : borderColor;
-            return (React.createElement(EmbedDraggable, { key: slicerId, anchorCell: anchorCell, id: slicerId, isSelected: isSelected, borderColor: typeof finalBorderColor === "string"
+            result[placementOf(overlayPosition)].push(React.createElement(EmbedDraggable, { key: slicerId, anchorCell: anchorCell, id: slicerId, isSelected: isSelected, zIndex: stackingRanks.size + 1, borderColor: typeof finalBorderColor === "string"
                     ? finalBorderColor
-                    : undefined, onPointerDown: () => setSelectedIndex(slicerId), height: (heightPixels ?? 0) * scale, width: (widthPixels ?? 0) * scale, offsetXPixels: offsetXPixels ?? 0, offsetYPixels: offsetYPixels ?? 0, onResize: handleSlicerResize, onMove: handleSlicerMove, bounds: bounds, scale: scale, onDelete: onDeleteSlicer, resizable: readonly ? false : resizable ?? undefined, draggable: readonly ? false : draggable ?? undefined }, (width, height) => getSlicerComponent?.({
+                    : undefined, onPointerDown: () => setSelectedIndex(slicerId), height: (heightPixels ?? 0) * scale, width: (widthPixels ?? 0) * scale, offsetXPixels: offsetXPixels ?? 0, offsetYPixels: offsetYPixels ?? 0, ...getOverlayToAnchorProps(overlayPosition), onResize: handleSlicerResize, onMove: handleSlicerMove, bounds: bounds, scale: scale, onDelete: onDeleteSlicer, onDeselect: handleDeselect, snapToGrid: snapToCellGrid, resizable: readonly ? false : resizable ?? undefined, draggable: readonly ? false : draggable ?? undefined }, (width, height) => getSlicerComponent?.({
                 slicer,
                 width,
                 height,
@@ -244,7 +585,8 @@ export const useEmbedsCharts = ({ scale = 1, charts, embeds, slicers, sheetId, f
                 sheetId,
                 readonly,
             })));
-        }) ?? []);
+        });
+        return result;
     }, [
         disabled,
         scale,
@@ -255,6 +597,8 @@ export const useEmbedsCharts = ({ scale = 1, charts, embeds, slicers, sheetId, f
         getBounds,
         selectedIndex,
         setSelectedIndex,
+        handleDeselect,
+        snapToCellGrid,
         handleSlicerMove,
         handleSlicerResize,
         getSlicerComponent,
@@ -266,11 +610,22 @@ export const useEmbedsCharts = ({ scale = 1, charts, embeds, slicers, sheetId, f
         pivotTables,
         getFormattedValue,
         backgroundColor,
+        placementOf,
+        stackingRanks,
     ]);
     return useMemo(() => ({
         chartComponents,
         embedComponents,
         slicerComponents,
+        contextMenuComponent,
         onMouseDown: handleMouseDown,
-    }), [chartComponents, embedComponents, slicerComponents, handleMouseDown]);
+        requestChartContextMenu: handleChartContextMenu,
+    }), [
+        chartComponents,
+        embedComponents,
+        slicerComponents,
+        contextMenuComponent,
+        handleMouseDown,
+        handleChartContextMenu,
+    ]);
 };

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

@@ -6,8 +6,8 @@ type UseGridChildrenProps = {
     stickyEditor?: boolean;
     editorComponent: React.ReactElement | null;
     chartComponents: ReturnType<typeof useEmbedsCharts>["chartComponents"];
-    embedComponents: React.JSX.Element[] | null | undefined;
-    slicerComponents: React.JSX.Element[] | null | undefined;
+    embedComponents: ReturnType<typeof useEmbedsCharts>["embedComponents"] | null | undefined;
+    slicerComponents: ReturnType<typeof useEmbedsCharts>["slicerComponents"] | null | undefined;
     pivotPlaceholders: React.JSX.Element[] | null | undefined;
     tableResizers: React.JSX.Element[] | null | undefined;
     hiddenColumnMarkers: React.JSX.Element | null | undefined;

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,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC;IACxD,gBAAgB,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC;IACzD,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,sBAmI5B,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;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"}