@rowsncolumns/spreadsheet 10.3.1 → 10.4.1

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

@@ -1,11 +1,46 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useEmbedsCharts = exports.getOverlayPlacement = void 0;
+exports.useEmbedsCharts = exports.getOverlayToAnchorProps = exports.isMoveAndSizePlacement = exports.getOverlayPlacement = exports.resolveOverlayCell = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
 var atoms_1 = require("../atoms");
+var embed_context_menu_1 = require("../components/context-menu/embed-context-menu");
+var move_chart_dialog_atom_1 = require("../atoms/move-chart-dialog.atom");
 var embeds_1 = require("../components/embeds");
 var config_1 = require("../config");
+var pivot_chart_field_buttons_1 = require("../utils/pivot-chart-field-buttons");
+var copy_as_picture_1 = require("../utils/copy-as-picture");
+var z_order_1 = require("../utils/z-order");
+var use_context_menu_1 = require("./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.
+ */
+var resolveOverlayCell = function (anchorCell, offsetXPixels, offsetYPixels, getCellOffsetFromCoords, maxRow, maxColumn) {
+    var _a, _b;
+    var rowIndex = anchorCell.rowIndex, columnIndex = anchorCell.columnIndex;
+    var x = offsetXPixels;
+    var y = offsetYPixels;
+    while (rowIndex < maxRow) {
+        var height = (_a = getCellOffsetFromCoords({ rowIndex: rowIndex, columnIndex: columnIndex })) === null || _a === void 0 ? void 0 : _a.height;
+        if (height === undefined || y < height)
+            break;
+        y -= height;
+        rowIndex += 1;
+    }
+    while (columnIndex < maxColumn) {
+        var width = (_b = getCellOffsetFromCoords({ rowIndex: rowIndex, columnIndex: columnIndex })) === null || _b === void 0 ? void 0 : _b.width;
+        if (width === undefined || x < width)
+            break;
+        x -= width;
+        columnIndex += 1;
+    }
+    return { rowIndex: rowIndex, columnIndex: columnIndex };
+};
+exports.resolveOverlayCell = resolveOverlayCell;
 /**
  * Get placement of an item based on anchor cell position
  */
@@ -24,6 +59,24 @@ var getOverlayPlacement = function (anchorCell, frozenRows, frozenColumns) {
     return "body";
 };
 exports.getOverlayPlacement = getOverlayPlacement;
+/** Excel's default placement — an object with no explicit mode moves and sizes with cells. */
+var isMoveAndSizePlacement = function (overlay) { var _a; return ((_a = overlay === null || overlay === void 0 ? void 0 : overlay.placement) !== null && _a !== void 0 ? _a : "moveAndSize") === "moveAndSize"; };
+exports.isMoveAndSizePlacement = isMoveAndSizePlacement;
+/**
+ * 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.
+ */
+var getOverlayToAnchorProps = function (overlay) {
+    var _a, _b;
+    return (0, exports.isMoveAndSizePlacement)(overlay) && overlay.toCell
+        ? {
+            toCell: overlay.toCell,
+            toOffsetXPixels: (_a = overlay.toOffsetXPixels) !== null && _a !== void 0 ? _a : 0,
+            toOffsetYPixels: (_b = overlay.toOffsetYPixels) !== null && _b !== void 0 ? _b : 0,
+        }
+        : undefined;
+};
+exports.getOverlayToAnchorProps = getOverlayToAnchorProps;
 var defaultGetChartComponent = function (props) { return (react_1.default.createElement(embeds_1.ChartComponent, tslib_1.__assign({}, props))); };
 var defaultGetEmbedComponent = function (props) { return (react_1.default.createElement(embeds_1.EmbedComponent, tslib_1.__assign({}, props))); };
 var defaultGetSlicerComponent = function (props) { return (react_1.default.createElement(embeds_1.SlicerComponent, tslib_1.__assign({}, props))); };
@@ -40,15 +93,204 @@ var validateEmbeds = function (embedsOrCharts, sheetId) {
     });
 };
 var useEmbedsCharts = function (_a) {
-    var _b = _a.scale, scale = _b === void 0 ? 1 : _b, charts = _a.charts, embeds = _a.embeds, slicers = _a.slicers, sheetId = _a.sheetId, _c = _a.frozenRows, frozenRows = _c === void 0 ? 0 : _c, _d = _a.frozenColumns, frozenColumns = _d === void 0 ? 0 : _d, getCellOffsetFromCoords = _a.getCellOffsetFromCoords, getCellCoordsFromOffset = _a.getCellCoordsFromOffset, getAbsolutePositionFromOffset = _a.getAbsolutePositionFromOffset, getBounds = _a.getBounds, _e = _a.selectedColor, selectedColor = _e === void 0 ? "#1a73e8" : _e, onMoveChart = _a.onMoveChart, onResizeChart = _a.onResizeChart, onMoveEmbed = _a.onMoveEmbed, onResizeEmbed = _a.onResizeEmbed, onDeleteChart = _a.onDeleteChart, onDeleteEmbed = _a.onDeleteEmbed, onRequestEditEmbed = _a.onRequestEditEmbed, onMoveSlicer = _a.onMoveSlicer, onResizeSlicer = _a.onResizeSlicer, onDeleteSlicer = _a.onDeleteSlicer, onRequestEditSlicer = _a.onRequestEditSlicer, onFilterTable = _a.onFilterTable, onFilterPivot = _a.onFilterPivot, tables = _a.tables, pivotTables = _a.pivotTables, getFormattedValue = _a.getFormattedValue, _f = _a.getChartComponent, getChartComponent = _f === void 0 ? defaultGetChartComponent : _f, _g = _a.getEmbedComponent, getEmbedComponent = _g === void 0 ? defaultGetEmbedComponent : _g, _h = _a.getSlicerComponent, getSlicerComponent = _h === void 0 ? defaultGetSlicerComponent : _h, readonly = _a.readonly, theme = _a.theme, backgroundColor = _a.backgroundColor, disabled = _a.disabled;
-    var _j = tslib_1.__read((0, atoms_1.useSelectedChartEmbed)(), 2), selectedIndex = _j[0], setSelectedIndex = _j[1];
+    var _b = _a.scale, scale = _b === void 0 ? 1 : _b, charts = _a.charts, embeds = _a.embeds, slicers = _a.slicers, sheetId = _a.sheetId, _c = _a.frozenRows, frozenRows = _c === void 0 ? 0 : _c, _d = _a.frozenColumns, frozenColumns = _d === void 0 ? 0 : _d, getCellOffsetFromCoords = _a.getCellOffsetFromCoords, getCellCoordsFromOffset = _a.getCellCoordsFromOffset, getAbsolutePositionFromOffset = _a.getAbsolutePositionFromOffset, getRelativePositionFromOffset = _a.getRelativePositionFromOffset, _e = _a.ContextMenuWrapper, ContextMenuWrapper = _e === void 0 ? use_context_menu_1.DefaultContextMenuWrapper : _e, focusSheet = _a.focusSheet, getBounds = _a.getBounds, _f = _a.selectedColor, selectedColor = _f === void 0 ? "#1a73e8" : _f, onMoveChart = _a.onMoveChart, onResizeChart = _a.onResizeChart, chartClipboard = _a.chartClipboard, onMoveEmbed = _a.onMoveEmbed, onResizeEmbed = _a.onResizeEmbed, onDeleteChart = _a.onDeleteChart, onUpdateChart = _a.onUpdateChart, onChangeZOrder = _a.onChangeZOrder, onDeleteEmbed = _a.onDeleteEmbed, onRequestEditEmbed = _a.onRequestEditEmbed, onMoveSlicer = _a.onMoveSlicer, onResizeSlicer = _a.onResizeSlicer, onDeleteSlicer = _a.onDeleteSlicer, onRequestEditSlicer = _a.onRequestEditSlicer, onFilterTable = _a.onFilterTable, onFilterPivot = _a.onFilterPivot, tables = _a.tables, pivotTables = _a.pivotTables, getFormattedValue = _a.getFormattedValue, _g = _a.getChartComponent, getChartComponent = _g === void 0 ? defaultGetChartComponent : _g, _h = _a.getEmbedComponent, getEmbedComponent = _h === void 0 ? defaultGetEmbedComponent : _h, _j = _a.getSlicerComponent, getSlicerComponent = _j === void 0 ? defaultGetSlicerComponent : _j, readonly = _a.readonly, theme = _a.theme, backgroundColor = _a.backgroundColor, disabled = _a.disabled;
+    var _k = tslib_1.__read((0, atoms_1.useSelectedChartEmbed)(), 2), selectedIndex = _k[0], setSelectedIndex = _k[1];
+    var _l = tslib_1.__read((0, atoms_1.useSelectedChartSeries)(), 2), selectedSeries = _l[0], setSelectedSeries = _l[1];
+    var getChartActions = (0, atoms_1.useGetChartActions)();
+    var _m = tslib_1.__read((0, react_1.useState)(), 2), contextMenu = _m[0], setContextMenu = _m[1];
+    // The object the open menu belongs to; focus returns to it (or to the
+    // sheet once it has been deleted) when the menu closes.
+    var contextMenuTargetRef = (0, react_1.useRef)(null);
     /**
      * When user selects the sheet
      */
     var handleMouseDown = (0, react_1.useCallback)(function () {
         setSelectedIndex(undefined);
     }, [setSelectedIndex]);
-    var getCellPosition = (0, react_1.useCallback)(function (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
+    var handleDeselect = (0, react_1.useCallback)(function (id) {
+        if ((selectedSeries === null || selectedSeries === void 0 ? void 0 : 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
+    var selectChart = (0, react_1.useCallback)(function (id) {
+        setSelectedIndex(id);
+        setSelectedSeries(undefined);
+    }, [setSelectedIndex, setSelectedSeries]);
+    // Double-click on a chart opens the host's editor (Excel opens the format pane)
+    var handleChartDoubleClick = (0, react_1.useCallback)(function (id) {
+        var _a, _b;
+        (_b = (_a = getChartActions(id)) === null || _a === void 0 ? void 0 : _a.requestEdit) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }, [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).
+    var stackingRanks = (0, react_1.useMemo)(function () { return (0, z_order_1.getStackingRanks)(charts, embeds, sheetId); }, [charts, embeds, sheetId]);
+    var stackingRankOf = (0, react_1.useCallback)(function (target) { return stackingRanks.get((0, z_order_1.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).
+     */
+    var getArrangeActions = (0, react_1.useCallback)(function (target) {
+        if (!onChangeZOrder || readonly) {
+            return {};
+        }
+        var arrange = function (direction) {
+            var changes = (0, z_order_1.planZOrderChange)(charts, embeds, sheetId, target, direction);
+            return changes ? function () { return 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.
+     */
+    var openMoveChartDialog = (0, move_chart_dialog_atom_1.useOpenMoveChartDialog)();
+    var canMoveChartToSheet = (0, move_chart_dialog_atom_1.useIsMoveChartDialogMounted)();
+    var getContextMenuActions = (0, react_1.useCallback)(function (kind, id) {
+        var actions = {};
+        if (kind === "chart") {
+            var chart_1 = charts === null || charts === void 0 ? void 0 : charts.find(function (item) { return item.chartId === id; });
+            if (!chart_1) {
+                return actions;
+            }
+            var rendererActions = getChartActions(id);
+            if (chartClipboard) {
+                if (!readonly) {
+                    actions.onCut = function () { return chartClipboard.cutChart(id); };
+                }
+                actions.onCopy = function () { return chartClipboard.copyChart(id); };
+                if (chartClipboard.hasChartOnClipboard()) {
+                    actions.onPaste = function () { return 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.
+            var exportPng_1 = rendererActions === null || rendererActions === void 0 ? void 0 : rendererActions.exportPng;
+            if (exportPng_1 && (0, copy_as_picture_1.canCopyImageToClipboard)()) {
+                actions.onCopyAsPicture = function () {
+                    void (0, copy_as_picture_1.copyPngToClipboard)(exportPng_1());
+                };
+            }
+            if ((rendererActions === null || rendererActions === void 0 ? void 0 : 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 === null || rendererActions === void 0 ? void 0 : rendererActions.switchRowColumn) && !readonly) {
+                actions.onSwitchRowColumn = rendererActions.switchRowColumn;
+            }
+            if (canMoveChartToSheet && !readonly) {
+                actions.onRequestMoveChart = function () { return openMoveChartDialog({ chart: chart_1 }); };
+            }
+            // PivotChart: Excel's Hide / Show All Field Buttons — one chart
+            // update (one undo step) that flips only the visibility flag.
+            if (chart_1.spec.pivotTableId != null && onUpdateChart && !readonly) {
+                var toggle = function () {
+                    return onUpdateChart(tslib_1.__assign(tslib_1.__assign({}, chart_1), { spec: tslib_1.__assign(tslib_1.__assign({}, chart_1.spec), (0, pivot_chart_field_buttons_1.togglePivotChartFieldButtons)(chart_1.spec)) }));
+                };
+                if ((0, pivot_chart_field_buttons_1.pivotChartFieldButtonsVisible)(chart_1.spec)) {
+                    actions.onHideFieldButtons = toggle;
+                }
+                else {
+                    actions.onShowFieldButtons = toggle;
+                }
+            }
+            if (rendererActions === null || rendererActions === void 0 ? void 0 : rendererActions.downloadPng) {
+                actions.onDownloadPng = rendererActions.downloadPng;
+            }
+            Object.assign(actions, getArrangeActions({ kind: "chart", id: id }));
+            if (onDeleteChart && !readonly) {
+                actions.onDelete = function () { return onDeleteChart(id); };
+            }
+            return actions;
+        }
+        var embed = embeds === null || embeds === void 0 ? void 0 : embeds.find(function (item) { return item.embedId === id; });
+        if (!embed) {
+            return actions;
+        }
+        if (onRequestEditEmbed && !readonly) {
+            actions.onRequestEdit = function () { return onRequestEditEmbed(embed); };
+        }
+        Object.assign(actions, getArrangeActions({ kind: "embed", id: id }));
+        if (onDeleteEmbed && !readonly) {
+            actions.onDelete = function () { return 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.
+     */
+    var requestContextMenu = (0, react_1.useCallback)(function (kind, id, clientX, clientY, element) {
+        setSelectedIndex(id);
+        if (!(0, embed_context_menu_1.hasEmbedContextMenuItems)(getContextMenuActions(kind, id))) {
+            return;
+        }
+        var position = getRelativePositionFromOffset(clientX, clientY);
+        if (!position) {
+            return;
+        }
+        contextMenuTargetRef.current = element;
+        setContextMenu({ kind: kind, id: id, left: position.x, top: position.y });
+    }, [setSelectedIndex, getContextMenuActions, getRelativePositionFromOffset]);
+    var handleChartContextMenu = (0, react_1.useCallback)(function (id, clientX, clientY, element) { return requestContextMenu("chart", id, clientX, clientY, element); }, [requestContextMenu]);
+    var handleEmbedContextMenu = (0, react_1.useCallback)(function (id, clientX, clientY, element) { return requestContextMenu("embed", id, clientX, clientY, element); }, [requestContextMenu]);
+    var closeContextMenu = (0, react_1.useCallback)(function (isOpen) {
+        if (!isOpen) {
+            setContextMenu(undefined);
+        }
+    }, []);
+    var handleContextMenuCloseAutoFocus = (0, react_1.useCallback)(function () {
+        var target = contextMenuTargetRef.current;
+        contextMenuTargetRef.current = null;
+        if (target === null || target === void 0 ? void 0 : target.isConnected) {
+            target.focus({ preventScroll: true });
+        }
+        else {
+            focusSheet();
+        }
+    }, [focusSheet]);
+    var contextMenuComponent = (0, react_1.useMemo)(function () {
+        var _a, _b;
+        var actions = contextMenu
+            ? getContextMenuActions(contextMenu.kind, contextMenu.id)
+            : undefined;
+        return (react_1.default.createElement(ContextMenuWrapper, { left: (_a = contextMenu === null || contextMenu === void 0 ? void 0 : contextMenu.left) !== null && _a !== void 0 ? _a : 0, top: (_b = contextMenu === null || contextMenu === void 0 ? void 0 : contextMenu.top) !== null && _b !== void 0 ? _b : 0, isOpen: !!contextMenu, onOpenChange: closeContextMenu }, contextMenu && actions ? (react_1.default.createElement(embed_context_menu_1.EmbedContextMenu, tslib_1.__assign({ kind: contextMenu.kind }, actions, { onCloseAutoFocus: handleContextMenuCloseAutoFocus }))) : null));
+    }, [
+        ContextMenuWrapper,
+        contextMenu,
+        getContextMenuActions,
+        closeContextMenu,
+        handleContextMenuCloseAutoFocus,
+    ]);
+    var getCellPositionAt = (0, react_1.useCallback)(function (x, y) {
         var _a, _b;
         var position = getAbsolutePositionFromOffset(x, y);
         // Use includeFrozen=true to detect cells in all regions
@@ -64,15 +306,76 @@ var useEmbedsCharts = function (_a) {
         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.
+     */
+    var getCellPosition = (0, react_1.useCallback)(function (x, y) {
+        var _a, _b;
+        var position = getCellPositionAt(x, y);
+        if (position) {
+            return position;
+        }
+        var bounds = getBounds();
+        var clampedX = Math.max((_a = bounds.left) !== null && _a !== void 0 ? _a : -Infinity, Math.min(bounds.right !== undefined ? bounds.right - 1 : Infinity, x));
+        var clampedY = Math.max((_b = bounds.top) !== null && _b !== void 0 ? _b : -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
+    var snapToCellGrid = (0, react_1.useCallback)(function (x, y) {
+        var position = getCellPosition(x, y);
+        var cell = position ? getCellOffsetFromCoords(position[0]) : undefined;
+        if (!position || !cell) {
+            return undefined;
+        }
+        var _a = tslib_1.__read(position, 3), offsetXPixels = _a[1], offsetYPixels = _a[2];
+        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.
+     */
+    var getToAnchor = (0, react_1.useCallback)(function (overlay, right, bottom) {
+        if (!(0, exports.isMoveAndSizePlacement)(overlay)) {
+            return undefined;
+        }
+        var position = getCellPosition(right, bottom);
+        if (!position) {
+            return undefined;
+        }
+        var _a = tslib_1.__read(position, 3), toCell = _a[0], toOffsetXPixels = _a[1], toOffsetYPixels = _a[2];
+        return { toCell: toCell, toOffsetXPixels: toOffsetXPixels, toOffsetYPixels: toOffsetYPixels };
+    }, [getCellPosition]);
+    var getChartOverlay = (0, react_1.useCallback)(function (id) {
+        var _a, _b;
+        return (_b = (_a = charts === null || charts === void 0 ? void 0 : charts.find(function (chart) { return chart.chartId === id; })) === null || _a === void 0 ? void 0 : _a.position) === null || _b === void 0 ? void 0 : _b.overlayPosition;
+    }, [charts]);
+    var getEmbedOverlay = (0, react_1.useCallback)(function (id) {
+        var _a, _b;
+        return (_b = (_a = embeds === null || embeds === void 0 ? void 0 : embeds.find(function (embed) { return embed.embedId === id; })) === null || _a === void 0 ? void 0 : _a.position) === null || _b === void 0 ? void 0 : _b.overlayPosition;
+    }, [embeds]);
+    var getSlicerOverlay = (0, react_1.useCallback)(function (id) {
+        var _a, _b;
+        return (_b = (_a = slicers === null || slicers === void 0 ? void 0 : slicers.find(function (slicer) { return slicer.slicerId === id; })) === null || _a === void 0 ? void 0 : _a.position) === null || _b === void 0 ? void 0 : _b.overlayPosition;
+    }, [slicers]);
     // Callback when user moves a chart
-    var handleMove = (0, react_1.useCallback)(function (id, x, y) {
+    var handleMove = (0, react_1.useCallback)(function (id, x, y, width, height) {
         var position = getCellPosition(x, y);
         if (!position) {
             return;
         }
         var _a = tslib_1.__read(position, 3), anchorCell = _a[0], offsetXPixels = _a[1], offsetYPixels = _a[2];
-        onMoveChart === null || onMoveChart === void 0 ? void 0 : onMoveChart(id, anchorCell, offsetXPixels, offsetYPixels);
-    }, [onMoveChart, getCellPosition]);
+        onMoveChart === null || onMoveChart === void 0 ? void 0 : onMoveChart(id, anchorCell, offsetXPixels, offsetYPixels, getToAnchor(getChartOverlay(id), x + width, y + height));
+    }, [onMoveChart, getCellPosition, getToAnchor, getChartOverlay]);
     // Callback when resizes an embed
     var handleEmbedResize = (0, react_1.useCallback)(function (id, x, y, width, height) {
         var position = getCellPosition(x, y);
@@ -80,17 +383,17 @@ var useEmbedsCharts = function (_a) {
             return;
         }
         var _a = tslib_1.__read(position, 3), anchorCell = _a[0], offsetXPixels = _a[1], offsetYPixels = _a[2];
-        onResizeEmbed === null || onResizeEmbed === void 0 ? void 0 : onResizeEmbed(id, sheetId, anchorCell, offsetXPixels, offsetYPixels, width, height);
-    }, [onResizeEmbed, sheetId, getCellPosition]);
+        onResizeEmbed === null || onResizeEmbed === void 0 ? void 0 : 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
-    var handleEmbedMove = (0, react_1.useCallback)(function (id, x, y) {
+    var handleEmbedMove = (0, react_1.useCallback)(function (id, x, y, width, height) {
         var position = getCellPosition(x, y);
         if (!position) {
             return;
         }
         var _a = tslib_1.__read(position, 3), anchorCell = _a[0], offsetXPixels = _a[1], offsetYPixels = _a[2];
-        onMoveEmbed === null || onMoveEmbed === void 0 ? void 0 : onMoveEmbed(id, sheetId, anchorCell, offsetXPixels, offsetYPixels);
-    }, [onMoveEmbed, sheetId, getCellPosition]);
+        onMoveEmbed === null || onMoveEmbed === void 0 ? void 0 : onMoveEmbed(id, sheetId, anchorCell, offsetXPixels, offsetYPixels, getToAnchor(getEmbedOverlay(id), x + width, y + height));
+    }, [onMoveEmbed, sheetId, getCellPosition, getToAnchor, getEmbedOverlay]);
     // Callback when resizes a chart
     var handleResize = (0, react_1.useCallback)(function (id, x, y, width, height) {
         var position = getCellPosition(x, y);
@@ -98,8 +401,8 @@ var useEmbedsCharts = function (_a) {
             return;
         }
         var _a = tslib_1.__read(position, 3), anchorCell = _a[0], offsetXPixels = _a[1], offsetYPixels = _a[2];
-        onResizeChart === null || onResizeChart === void 0 ? void 0 : onResizeChart(id, anchorCell, offsetXPixels, offsetYPixels, width, height);
-    }, [onResizeChart, getCellPosition]);
+        onResizeChart === null || onResizeChart === void 0 ? void 0 : 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
     var handleSlicerResize = (0, react_1.useCallback)(function (id, x, y, width, height) {
         var position = getCellPosition(x, y);
@@ -107,17 +410,27 @@ var useEmbedsCharts = function (_a) {
             return;
         }
         var _a = tslib_1.__read(position, 3), anchorCell = _a[0], offsetXPixels = _a[1], offsetYPixels = _a[2];
-        onResizeSlicer === null || onResizeSlicer === void 0 ? void 0 : onResizeSlicer(id, sheetId, anchorCell, offsetXPixels, offsetYPixels, width, height);
-    }, [onResizeSlicer, sheetId, getCellPosition]);
+        onResizeSlicer === null || onResizeSlicer === void 0 ? void 0 : 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
-    var handleSlicerMove = (0, react_1.useCallback)(function (id, x, y) {
+    var handleSlicerMove = (0, react_1.useCallback)(function (id, x, y, width, height) {
         var position = getCellPosition(x, y);
         if (!position) {
             return;
         }
         var _a = tslib_1.__read(position, 3), anchorCell = _a[0], offsetXPixels = _a[1], offsetYPixels = _a[2];
-        onMoveSlicer === null || onMoveSlicer === void 0 ? void 0 : onMoveSlicer(id, sheetId, anchorCell, offsetXPixels, offsetYPixels);
-    }, [onMoveSlicer, sheetId, getCellPosition]);
+        onMoveSlicer === null || onMoveSlicer === void 0 ? void 0 : 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.
+    var placementOf = (0, react_1.useCallback)(function (_a) {
+        var anchorCell = _a.anchorCell, offsetXPixels = _a.offsetXPixels, offsetYPixels = _a.offsetYPixels;
+        return (0, exports.getOverlayPlacement)(anchorCell
+            ? (0, exports.resolveOverlayCell)(anchorCell, offsetXPixels !== null && offsetXPixels !== void 0 ? offsetXPixels : 0, offsetYPixels !== null && offsetYPixels !== void 0 ? offsetYPixels : 0, getCellOffsetFromCoords, frozenRows, frozenColumns)
+            : anchorCell, frozenRows, frozenColumns);
+    }, [frozenRows, frozenColumns, getCellOffsetFromCoords]);
     // Chart components - categorized by frozen pane placement
     var chartComponents = (0, react_1.useMemo)(function () {
         var _a;
@@ -132,13 +445,23 @@ var useEmbedsCharts = function (_a) {
             return result;
         }
         var bounds = getBounds();
-        (_a = validateEmbeds(charts, sheetId)) === null || _a === void 0 ? void 0 : _a.filter(function (chart) { return chart.position.sheetId === sheetId; }).forEach(function (chart) {
+        (_a = validateEmbeds(charts, sheetId)) === null || _a === void 0 ? void 0 : _a.filter(function (chart) { return chart.position.sheetId === sheetId; }).map(function (chart) { return ({
+            chart: chart,
+            zIndex: stackingRankOf({ kind: "chart", id: chart.chartId }),
+        }); }).sort(function (a, b) { var _a, _b; return ((_a = a.zIndex) !== null && _a !== void 0 ? _a : 0) - ((_b = b.zIndex) !== null && _b !== void 0 ? _b : 0); }).forEach(function (_a) {
+            var chart = _a.chart, zIndex = _a.zIndex;
             var chartId = chart.chartId, overlayPosition = chart.position.overlayPosition, borderColor = chart.borderColor, draggable = chart.draggable, resizable = chart.resizable;
-            var anchorCell = overlayPosition.anchorCell, _a = overlayPosition.widthPixels, widthPixels = _a === void 0 ? 0 : _a, _b = overlayPosition.heightPixels, heightPixels = _b === void 0 ? 0 : _b, _c = overlayPosition.offsetXPixels, offsetXPixels = _c === void 0 ? 0 : _c, _d = overlayPosition.offsetYPixels, offsetYPixels = _d === void 0 ? 0 : _d;
+            var anchorCell = overlayPosition.anchorCell, _b = overlayPosition.widthPixels, widthPixels = _b === void 0 ? 0 : _b, _c = overlayPosition.heightPixels, heightPixels = _c === void 0 ? 0 : _c, _d = overlayPosition.offsetXPixels, offsetXPixels = _d === void 0 ? 0 : _d, _e = overlayPosition.offsetYPixels, offsetYPixels = _e === void 0 ? 0 : _e;
             var isSelected = selectedIndex === chartId;
             var finalBorderColor = isSelected ? selectedColor : borderColor;
-            var placement = (0, exports.getOverlayPlacement)(anchorCell, frozenRows, frozenColumns);
-            var component = (react_1.default.createElement(embeds_1.EmbedDraggable, { bounds: bounds, key: chartId, anchorCell: anchorCell, id: chartId, isSelected: isSelected, borderColor: finalBorderColor !== null && finalBorderColor !== void 0 ? finalBorderColor : undefined, onPointerDown: function () { return setSelectedIndex(chartId); }, height: (heightPixels !== null && heightPixels !== void 0 ? heightPixels : 0) * scale, width: (widthPixels !== null && widthPixels !== void 0 ? widthPixels : 0) * scale, offsetXPixels: offsetXPixels !== null && offsetXPixels !== void 0 ? offsetXPixels : 0, offsetYPixels: offsetYPixels !== null && offsetYPixels !== void 0 ? offsetYPixels : 0, onResize: handleResize, onMove: handleMove, scale: scale, onDelete: onDeleteChart, draggable: readonly ? false : draggable !== null && draggable !== void 0 ? draggable : undefined, resizable: readonly ? false : resizable !== null && resizable !== void 0 ? resizable : undefined }, function (width, height) {
+            var placement = placementOf(overlayPosition);
+            var component = (react_1.default.createElement(embeds_1.EmbedDraggable, tslib_1.__assign({ bounds: bounds, key: chartId, anchorCell: anchorCell, id: chartId, isSelected: isSelected, zIndex: zIndex, borderColor: finalBorderColor !== null && finalBorderColor !== void 0 ? finalBorderColor : undefined, onPointerDown: function () { return selectChart(chartId); }, onDoubleClick: readonly ? undefined : handleChartDoubleClick, height: (heightPixels !== null && heightPixels !== void 0 ? heightPixels : 0) * scale, width: (widthPixels !== null && widthPixels !== void 0 ? widthPixels : 0) * scale, offsetXPixels: offsetXPixels !== null && offsetXPixels !== void 0 ? offsetXPixels : 0, offsetYPixels: offsetYPixels !== null && offsetYPixels !== void 0 ? offsetYPixels : 0 }, (0, exports.getOverlayToAnchorProps)(overlayPosition), { onResize: handleResize, onMove: handleMove, scale: scale, onDelete: onDeleteChart, onDuplicate: chartClipboard === null || chartClipboard === void 0 ? void 0 : chartClipboard.duplicateChart, onCopy: chartClipboard
+                    ? function (id, e) { return chartClipboard.copyChart(id, e.nativeEvent); }
+                    : undefined, onCut: chartClipboard
+                    ? function (id, e) { return chartClipboard.cutChart(id, e.nativeEvent); }
+                    : undefined, onPaste: chartClipboard
+                    ? function (_id, e) { return chartClipboard.pasteChart(e.nativeEvent); }
+                    : undefined, onDeselect: handleDeselect, onRequestContextMenu: handleChartContextMenu, snapToGrid: snapToCellGrid, draggable: readonly ? false : draggable !== null && draggable !== void 0 ? draggable : undefined, resizable: readonly ? false : resizable !== null && resizable !== void 0 ? resizable : undefined }), function (width, height) {
                 return getChartComponent === null || getChartComponent === void 0 ? void 0 : getChartComponent({
                     chart: chart,
                     width: width,
@@ -147,6 +470,11 @@ var useEmbedsCharts = function (_a) {
                     backgroundColor: backgroundColor,
                     isSelected: isSelected,
                     onDeleteChart: onDeleteChart,
+                    onUpdateChart: onUpdateChart,
+                    onCopyChart: chartClipboard === null || chartClipboard === void 0 ? void 0 : chartClipboard.copyChart,
+                    onCutChart: chartClipboard === null || chartClipboard === void 0 ? void 0 : chartClipboard.cutChart,
+                    onPasteChart: chartClipboard === null || chartClipboard === void 0 ? void 0 : chartClipboard.pasteChart,
+                    onDuplicateChart: chartClipboard === null || chartClipboard === void 0 ? void 0 : chartClipboard.duplicateChart,
                     sheetId: sheetId,
                     readonly: readonly,
                 });
@@ -162,30 +490,46 @@ var useEmbedsCharts = function (_a) {
         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
     var embedComponents = (0, react_1.useMemo)(function () {
-        var _a, _b;
+        var _a;
+        var result = {
+            body: [],
+            frozenRow: [],
+            frozenColumn: [],
+            intersection: [],
+        };
         // If user has no EmbedComponent, skip rendering
         if (!getEmbedComponent || disabled) {
-            return [];
+            return result;
         }
-        return ((_b = (_a = validateEmbeds(embeds, sheetId)) === null || _a === void 0 ? void 0 : _a.filter(function (embed) { return embed.position.sheetId === sheetId; }).map(function (embed) {
+        (_a = validateEmbeds(embeds, sheetId)) === null || _a === void 0 ? void 0 : _a.filter(function (embed) { return embed.position.sheetId === sheetId; }).map(function (embed) { return ({
+            embed: embed,
+            zIndex: stackingRankOf({ kind: "embed", id: embed.embedId }),
+        }); }).sort(function (a, b) { var _a, _b; return ((_a = a.zIndex) !== null && _a !== void 0 ? _a : 0) - ((_b = b.zIndex) !== null && _b !== void 0 ? _b : 0); }).forEach(function (_a) {
+            var embed = _a.embed, zIndex = _a.zIndex;
             var embedId = embed.embedId, overlayPosition = embed.position.overlayPosition, borderColor = embed.borderColor, lockAspectRatio = embed.lockAspectRatio, draggable = embed.draggable, resizable = embed.resizable;
-            var anchorCell = overlayPosition.anchorCell, _a = overlayPosition.widthPixels, widthPixels = _a === void 0 ? 0 : _a, _b = overlayPosition.heightPixels, heightPixels = _b === void 0 ? 0 : _b, _c = overlayPosition.offsetXPixels, offsetXPixels = _c === void 0 ? 0 : _c, _d = overlayPosition.offsetYPixels, offsetYPixels = _d === void 0 ? 0 : _d;
+            var anchorCell = overlayPosition.anchorCell, _b = overlayPosition.widthPixels, widthPixels = _b === void 0 ? 0 : _b, _c = overlayPosition.heightPixels, heightPixels = _c === void 0 ? 0 : _c, _d = overlayPosition.offsetXPixels, offsetXPixels = _d === void 0 ? 0 : _d, _e = overlayPosition.offsetYPixels, offsetYPixels = _e === void 0 ? 0 : _e;
             var bounds = getBounds();
             var isSelected = selectedIndex === embedId;
             var finalBorderColor = isSelected ? selectedColor : borderColor;
-            return (react_1.default.createElement(embeds_1.EmbedDraggable, { key: embedId, anchorCell: anchorCell, id: embedId, isSelected: isSelected, borderColor: finalBorderColor !== null && finalBorderColor !== void 0 ? finalBorderColor : undefined, onPointerDown: function () { return setSelectedIndex(embedId); }, height: (heightPixels !== null && heightPixels !== void 0 ? heightPixels : 0) * scale, width: (widthPixels !== null && widthPixels !== void 0 ? widthPixels : 0) * scale, offsetXPixels: offsetXPixels !== null && offsetXPixels !== void 0 ? offsetXPixels : 0, offsetYPixels: offsetYPixels !== null && offsetYPixels !== void 0 ? offsetYPixels : 0, onResize: handleEmbedResize, onMove: handleEmbedMove, bounds: bounds, scale: scale, onDelete: onDeleteEmbed, lockAspectRatio: lockAspectRatio !== null && lockAspectRatio !== void 0 ? lockAspectRatio : undefined, resizable: readonly ? false : resizable !== null && resizable !== void 0 ? resizable : undefined, draggable: readonly ? false : draggable !== null && draggable !== void 0 ? draggable : undefined }, function (width, height) {
+            result[placementOf(overlayPosition)].push(react_1.default.createElement(embeds_1.EmbedDraggable, tslib_1.__assign({ key: embedId, anchorCell: anchorCell, id: embedId, isSelected: isSelected, zIndex: zIndex, borderColor: finalBorderColor !== null && finalBorderColor !== void 0 ? finalBorderColor : undefined, onPointerDown: function () { return setSelectedIndex(embedId); }, height: (heightPixels !== null && heightPixels !== void 0 ? heightPixels : 0) * scale, width: (widthPixels !== null && widthPixels !== void 0 ? widthPixels : 0) * scale, offsetXPixels: offsetXPixels !== null && offsetXPixels !== void 0 ? offsetXPixels : 0, offsetYPixels: offsetYPixels !== null && offsetYPixels !== void 0 ? offsetYPixels : 0 }, (0, exports.getOverlayToAnchorProps)(overlayPosition), { onResize: handleEmbedResize, onMove: handleEmbedMove, bounds: bounds, scale: scale, onDelete: onDeleteEmbed, onDeselect: handleDeselect, onRequestContextMenu: handleEmbedContextMenu, snapToGrid: snapToCellGrid, lockAspectRatio: lockAspectRatio !== null && lockAspectRatio !== void 0 ? lockAspectRatio : undefined, resizable: readonly ? false : resizable !== null && resizable !== void 0 ? resizable : undefined, draggable: readonly ? false : draggable !== null && draggable !== void 0 ? draggable : undefined }), function (width, height) {
                 return getEmbedComponent === null || getEmbedComponent === void 0 ? void 0 : getEmbedComponent({
                     embed: embed,
                     width: width,
@@ -199,7 +543,8 @@ var useEmbedsCharts = function (_a) {
                     readonly: readonly,
                 });
             }));
-        })) !== null && _b !== void 0 ? _b : []);
+        });
+        return result;
     }, [
         disabled,
         scale,
@@ -210,30 +555,42 @@ var useEmbedsCharts = function (_a) {
         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.
     var slicerComponents = (0, react_1.useMemo)(function () {
-        var _a, _b;
+        var _a;
+        var result = {
+            body: [],
+            frozenRow: [],
+            frozenColumn: [],
+            intersection: [],
+        };
         // If user has no SlicerComponent, skip rendering
         if (!getSlicerComponent || disabled) {
-            return [];
+            return result;
         }
-        return ((_b = (_a = validateEmbeds(slicers, sheetId)) === null || _a === void 0 ? void 0 : _a.filter(function (slicer) { return slicer.position.sheetId === sheetId; }).map(function (slicer) {
+        (_a = validateEmbeds(slicers, sheetId)) === null || _a === void 0 ? void 0 : _a.filter(function (slicer) { return slicer.position.sheetId === sheetId; }).forEach(function (slicer) {
             var slicerId = slicer.slicerId, overlayPosition = slicer.position.overlayPosition, borderColor = slicer.borderColor, draggable = slicer.draggable, resizable = slicer.resizable;
             var anchorCell = overlayPosition.anchorCell, _a = overlayPosition.widthPixels, widthPixels = _a === void 0 ? 0 : _a, _b = overlayPosition.heightPixels, heightPixels = _b === void 0 ? 0 : _b, _c = overlayPosition.offsetXPixels, offsetXPixels = _c === void 0 ? 0 : _c, _d = overlayPosition.offsetYPixels, offsetYPixels = _d === void 0 ? 0 : _d;
             var bounds = getBounds();
             var isSelected = selectedIndex === slicerId;
             var finalBorderColor = isSelected ? selectedColor : borderColor;
-            return (react_1.default.createElement(embeds_1.EmbedDraggable, { key: slicerId, anchorCell: anchorCell, id: slicerId, isSelected: isSelected, borderColor: typeof finalBorderColor === "string"
+            result[placementOf(overlayPosition)].push(react_1.default.createElement(embeds_1.EmbedDraggable, tslib_1.__assign({ key: slicerId, anchorCell: anchorCell, id: slicerId, isSelected: isSelected, zIndex: stackingRanks.size + 1, borderColor: typeof finalBorderColor === "string"
                     ? finalBorderColor
-                    : undefined, onPointerDown: function () { return setSelectedIndex(slicerId); }, height: (heightPixels !== null && heightPixels !== void 0 ? heightPixels : 0) * scale, width: (widthPixels !== null && widthPixels !== void 0 ? widthPixels : 0) * scale, offsetXPixels: offsetXPixels !== null && offsetXPixels !== void 0 ? offsetXPixels : 0, offsetYPixels: offsetYPixels !== null && offsetYPixels !== void 0 ? offsetYPixels : 0, onResize: handleSlicerResize, onMove: handleSlicerMove, bounds: bounds, scale: scale, onDelete: onDeleteSlicer, resizable: readonly ? false : resizable !== null && resizable !== void 0 ? resizable : undefined, draggable: readonly ? false : draggable !== null && draggable !== void 0 ? draggable : undefined }, function (width, height) {
+                    : undefined, onPointerDown: function () { return setSelectedIndex(slicerId); }, height: (heightPixels !== null && heightPixels !== void 0 ? heightPixels : 0) * scale, width: (widthPixels !== null && widthPixels !== void 0 ? widthPixels : 0) * scale, offsetXPixels: offsetXPixels !== null && offsetXPixels !== void 0 ? offsetXPixels : 0, offsetYPixels: offsetYPixels !== null && offsetYPixels !== void 0 ? offsetYPixels : 0 }, (0, exports.getOverlayToAnchorProps)(overlayPosition), { onResize: handleSlicerResize, onMove: handleSlicerMove, bounds: bounds, scale: scale, onDelete: onDeleteSlicer, onDeselect: handleDeselect, snapToGrid: snapToCellGrid, resizable: readonly ? false : resizable !== null && resizable !== void 0 ? resizable : undefined, draggable: readonly ? false : draggable !== null && draggable !== void 0 ? draggable : undefined }), function (width, height) {
                 return getSlicerComponent === null || getSlicerComponent === void 0 ? void 0 : getSlicerComponent({
                     slicer: slicer,
                     width: width,
@@ -251,7 +608,8 @@ var useEmbedsCharts = function (_a) {
                     readonly: readonly,
                 });
             }));
-        })) !== null && _b !== void 0 ? _b : []);
+        });
+        return result;
     }, [
         disabled,
         scale,
@@ -262,6 +620,8 @@ var useEmbedsCharts = function (_a) {
         getBounds,
         selectedIndex,
         setSelectedIndex,
+        handleDeselect,
+        snapToCellGrid,
         handleSlicerMove,
         handleSlicerResize,
         getSlicerComponent,
@@ -273,12 +633,23 @@ var useEmbedsCharts = function (_a) {
         pivotTables,
         getFormattedValue,
         backgroundColor,
+        placementOf,
+        stackingRanks,
     ]);
     return (0, react_1.useMemo)(function () { return ({
         chartComponents: chartComponents,
         embedComponents: embedComponents,
         slicerComponents: slicerComponents,
+        contextMenuComponent: contextMenuComponent,
         onMouseDown: handleMouseDown,
-    }); }, [chartComponents, embedComponents, slicerComponents, handleMouseDown]);
+        requestChartContextMenu: handleChartContextMenu,
+    }); }, [
+        chartComponents,
+        embedComponents,
+        slicerComponents,
+        contextMenuComponent,
+        handleMouseDown,
+        handleChartContextMenu,
+    ]);
 };
 exports.useEmbedsCharts = useEmbedsCharts;

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