@rowsncolumns/spreadsheet 10.3.0 → 10.4.0

package/dist/esm/components/context-menu/index.js

@@ -1,22 +1,24 @@
 import { Direction, isCellWithinBounds, selectionFromActiveCell, } from "@rowsncolumns/grid";
 import { ArrowLeftIcon, ArrowRightIcon, CheckIcon, ChevronRightIcon, ClipboardIcon, CodeIcon, CopyIcon, Cross1Icon, DotsVerticalIcon, EyeNoneIcon, EyeOpenIcon, FunnelIcon, MdBrush, MdOutlineFactCheck, PaintBrush, PlusIcon, ReaderIcon, RemoveDuplicatesIcon, ScissorsIcon, SizeIcon, SortDownIcon, SortUpIcon, SpaceBetweenHorizontallyIcon, TableIcon, TrashIcon, ViewGridIcon, WandIcon, } from "@rowsncolumns/icons";
 import { DropdownLeftSlot, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownRightSlot, } from "@rowsncolumns/ui";
-import { addressToCell, cellToAddress, number2Alpha } from "@rowsncolumns/utils";
+import { addressToCell, cellToAddress, getCellUserEnteredValue, isSparklineFormula, iterateCellsInRange, number2Alpha, resolveSparklineGroup, } from "@rowsncolumns/utils";
 import React, { useCallback, useMemo, useRef } from "react";
 import { bandsForAreas, bandsFromIndexes, classifyMultiSelection, defaultDeleteCellsChoice, defaultInsertCellsChoice, indexesForAreas, wholeColumnPredicate, wholeColumnPredicateFromHeaderIds, wholeRowPredicate, wholeRowPredicateFromHeaderIds, } from "../../api/multi-selection";
+import { getDeletableTableRowIndexes } from "../../api/table";
 import { getProtectedRange, isProtectedRange } from "../../api/validation";
 import { useGetContentfulRangeAroundCell } from "../../atoms";
 import { useIsAdvancedFilterDialogMounted, useOpenAdvancedFilterDialog, } from "../../atoms/advanced-filter-dialog.atom";
 import { useIsGoalSeekDialogMounted, useOpenGoalSeekDialog, } from "../../atoms/goal-seek-dialog.atom";
 import { useIsInsertCellsDialogMounted, useOpenInsertCellsDialog, } from "../../atoms/insert-cells-dialog.atom";
 import { useIsRemoveDuplicatesDialogMounted, useOpenRemoveDuplicatesDialog, } from "../../atoms/remove-duplicates-dialog.atom";
+import { useIsSparklineDialogMounted, useOpenSparklineDialog, } from "../../atoms/sparkline-dialog.atom";
 import { useIsSubtotalDialogMounted, useOpenSubtotalDialog, } from "../../atoms/subtotal-dialog.atom";
 import { useIsTextToColumnsDialogMounted, useOpenTextToColumnsDialog, } from "../../atoms/text-to-columns-dialog.atom";
 import { useShowValidationAlert } from "../../atoms/validation-alert.atom";
 import { BLANK_LABEL, MULTIPLE_SELECTIONS_ERROR } from "../../config";
 import { generateMultiDimTitle } from "../../helpers";
-import { getTotalRowFunctionFormula, getTotalRowFunctionFromFormula, TOTAL_ROW_FUNCTIONS, } from "./total-row-functions";
-export const ContextMenu = ({ isRowHeader, isColumnHeader, activeCell, selections, basicFilter, isTableHeader, onClearContents, onHideColumn, onHideRow, onGroupRows, onUngroupRows, onGroupColumns, onUngroupColumns, onDeleteRow, onDeleteColumn, onInsertColumn, onInsertRow, onInsertCellsShiftDown, onInsertCellsShiftRight, onDeleteCellsShiftLeft, onDeleteCellsShiftUp, onFreezeRow, onFreezeColumn, onCopy, onCut, hasCutSelection, onInsertCutCells, onPaste, onRequestPasteSpecial, onRequestEvaluateFormula, onRequestAddWatch, isActiveCellFormula, onInsertNote, onProtectRange, onUnProtectRange, onSortRange, onSortColumn, onRequestDefineNamedRange, onRequestResize, onRequestEditTable, onRequestEditPivotTable, onRequestDeletePivotTable, onPivotDrillDown, onRequestFormatCells, onRequestConditionalFormat, onRequestDataValidation, onRemoveTable, onClearFormatting, onCreateTable, onCreateBasicFilter, onFilterTable, onSortTable, getFormattedValuesFromRange, focusSheet, isSheetFocused, getFormattedValue, onInsertTableColumn, onDeleteTableColumn, onInsertTableRow, onDeleteTableRow, onSplitTextToColumns, onRemoveDuplicates, onGoalSeek, onSubtotal, onAdvancedFilter, onChange, getCellData, isHiddenColumn, isHiddenRow, onShowColumn, onShowRow, tables, pivotTables, protectedRanges, sheetId, frozenRows, frozenColumns, selectedRowHeadersIds, selectedColumnHeadersIds, rowCount, columnCount, readonly = false, onAddQuickEdit, enableMagicFill, }) => {
+import { TotalRowFunctionMenuItems } from "./total-row-function-menu";
+export const ContextMenu = ({ isRowHeader, isColumnHeader, activeCell, selections, basicFilter, isTableHeader, onClearContents, onHideColumn, onHideRow, onGroupRows, onUngroupRows, onGroupColumns, onUngroupColumns, onDeleteRow, onDeleteColumn, onInsertColumn, onInsertRow, onInsertCellsShiftDown, onInsertCellsShiftRight, onDeleteCellsShiftLeft, onDeleteCellsShiftUp, onFreezeRow, onFreezeColumn, onCopy, onCut, hasCutSelection, onInsertCutCells, onPaste, onRequestPasteSpecial, onRequestEvaluateFormula, onRequestAddWatch, isActiveCellFormula, onInsertNote, onProtectRange, onUnProtectRange, onSortRange, onSortColumn, onRequestDefineNamedRange, onRequestResize, onRequestEditTable, onRequestResizeTable, onRequestInsertSlicer, onRequestEditPivotTable, onRequestDeletePivotTable, onRequestCreatePivotChart, onPivotDrillDown, onRequestFormatCells, onRequestConditionalFormat, onRequestDataValidation, onRemoveTable, onClearFormatting, onCreateTable, onRequestCreateTable, onCreateBasicFilter, onFilterTable, onSortTable, getFormattedValuesFromRange, focusSheet, isSheetFocused, getFormattedValue, onInsertTableColumn, onDeleteTableColumn, onInsertTableRow, onDeleteTableRow, onSplitTextToColumns, onRemoveDuplicates, onGoalSeek, onSubtotal, onAdvancedFilter, onChange, onUpdateTable, onRequestEditCell, onSelectRange, getCellData, isHiddenColumn, isHiddenRow, onShowColumn, onShowRow, tables, pivotTables, protectedRanges, sheetId, frozenRows, frozenColumns, selectedRowHeadersIds, selectedColumnHeadersIds, rowCount, columnCount, readonly = false, onAddQuickEdit, enableMagicFill, }) => {
     const isHeader = isColumnHeader || isRowHeader;
     const shouldFocusSheetRef = useRef(true);
     const multiColumnTitle = generateMultiDimTitle(selectedColumnHeadersIds, "y");
@@ -194,10 +196,44 @@ export const ContextMenu = ({ isRowHeader, isColumnHeader, activeCell, selection
     const hiddenRows = selectedRowIndexes.filter((index) => isHiddenRow(index));
     // Check for active table
     const activeTable = useMemo(() => tables?.find(({ range }) => isCellWithinBounds(activeCell, range)), [tables, activeCell]);
+    // Excel sparkline group under the active cell (a run of same-option =SPARKLINE() cells). Only
+    // offered while a `SparklineDialogHost` is mounted — the Edit entry has nowhere to go without one.
+    const isSparklineDialogMounted = useIsSparklineDialogMounted();
+    const openSparklineDialog = useOpenSparklineDialog();
+    const getSparklineFormula = useCallback((targetSheetId, rowIndex, columnIndex) => {
+        const formula = getCellUserEnteredValue(getCellData?.(targetSheetId, rowIndex, columnIndex))?.fv;
+        return isSparklineFormula(formula) ? formula : undefined;
+    }, [getCellData]);
+    const activeSparklineGroup = useMemo(() => isSparklineDialogMounted && getCellData
+        ? resolveSparklineGroup({
+            sheetId,
+            cell: activeCell,
+            getFormula: getSparklineFormula,
+        })
+        : undefined, [isSparklineDialogMounted, getCellData, sheetId, activeCell, getSparklineFormula]);
+    // Clear Selected Sparklines: the SPARKLINE cells inside the selection (Excel leaves the rest alone).
+    const clearSparklineCells = useCallback((cells) => {
+        const targets = cells.filter((cell) => getSparklineFormula(sheetId, cell.rowIndex, cell.columnIndex));
+        if (!targets.length)
+            return;
+        onClearContents?.(sheetId, targets[0], targets.map((cell) => ({
+            range: {
+                startRowIndex: cell.rowIndex,
+                endRowIndex: cell.rowIndex,
+                startColumnIndex: cell.columnIndex,
+                endColumnIndex: cell.columnIndex,
+            },
+        })));
+    }, [getSparklineFormula, onClearContents, sheetId]);
     // Check for active pivot table
     const activePivotTable = useMemo(() => pivotTables?.find(({ pivotRange: range }) => isCellWithinBounds(activeCell, range)), [pivotTables, activeCell]);
     // Check if the active cell is table header
     const isActiveCellTableHeader = isTableHeader(activeCell.rowIndex, activeCell.columnIndex);
+    // Excel's "Delete table rows" only ever removes body rows: the header and totals rows are
+    // dropped from the selection, and the item is hidden when nothing else is selected.
+    const deletableTableRowIndexes = activeTable
+        ? getDeletableTableRowIndexes(activeTable, selectedRowIndexes)
+        : selectedRowIndexes;
     // Basic filter
     const activeBasicFilter = basicFilter && isCellWithinBounds(activeCell, basicFilter.range)
         ? basicFilter
@@ -380,14 +416,47 @@ export const ContextMenu = ({ isRowHeader, isColumnHeader, activeCell, selection
     // Totals-row function picker: the active cell sits on a table's totals row.
     const isActiveCellTableTotal = !!activeTable?.totalRow &&
         activeCell.rowIndex === activeTable.range.endRowIndex;
-    const activeTotalRowFunction = useMemo(() => {
-        if (!isActiveCellTableTotal) {
-            return "none";
+    /**
+     * The selection clipped to the active table, in table terms (Excel's table
+     * Insert / Select items): the selected data-body rows (none when only the
+     * header / totals row is selected), the selected rows including header and
+     * totals, and the selected columns. Counts follow the selection — N
+     * selected rows insert N table rows.
+     */
+    const tableSelection = useMemo(() => {
+        if (!activeTable) {
+            return undefined;
         }
-        const cellData = getCellData?.(sheetId, activeCell.rowIndex, activeCell.columnIndex);
-        const ue = cellData?.ue ?? cellData?.userEnteredValue;
-        return getTotalRowFunctionFromFormula(ue?.fv ?? ue?.formulaValue);
-    }, [isActiveCellTableTotal, getCellData, sheetId, activeCell]);
+        const { range } = activeTable;
+        const firstBodyRow = range.startRowIndex + ((activeTable.headerRow ?? true) ? 1 : 0);
+        const lastDataRow = range.endRowIndex - (activeTable.totalRow ? 1 : 0);
+        const sel = selection.range;
+        const clip = (start, end, lo, hi) => {
+            const s = Math.max(start, lo);
+            const e = Math.min(end, hi);
+            return e >= s ? { start: s, end: e, count: e - s + 1 } : undefined;
+        };
+        const activeColumn = {
+            start: activeCell.columnIndex,
+            end: activeCell.columnIndex,
+            count: 1,
+        };
+        const bodyRows = clip(sel.startRowIndex, sel.endRowIndex, firstBodyRow, lastDataRow);
+        return {
+            firstBodyRow,
+            lastDataRow,
+            bodyRows,
+            rows: clip(sel.startRowIndex, sel.endRowIndex, range.startRowIndex, range.endRowIndex) ?? {
+                start: activeCell.rowIndex,
+                end: activeCell.rowIndex,
+                count: 1,
+            },
+            columns: clip(sel.startColumnIndex, sel.endColumnIndex, range.startColumnIndex, range.endColumnIndex) ?? activeColumn,
+            touchesLastDataRow: !!bodyRows && bodyRows.end === lastDataRow && lastDataRow >= firstBodyRow,
+        };
+    }, [activeTable, selection.range, activeCell]);
+    /** `rowData` for `onInsertTableRow`: one blank record per row to insert. */
+    const blankTableRows = (count) => Array.from({ length: count }, () => ({}));
     // Sort table or filter
     const onSortTableOrFilterView = useCallback((direction) => {
         // Found a table
@@ -686,28 +755,38 @@ export const ContextMenu = ({ isRowHeader, isColumnHeader, activeCell, selection
                         "Insert",
                         React.createElement(DropdownRightSlot, null,
                             React.createElement(ChevronRightIcon, null))),
-                    React.createElement(DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 }, activeTable ? (React.createElement(React.Fragment, null,
+                    React.createElement(DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 }, activeTable && tableSelection ? (React.createElement(React.Fragment, null,
                         isActiveCellTableHeader ? null : (React.createElement(DropdownMenuItem, { onClick: () => {
-                                onInsertTableRow?.(activeTable, activeCell.rowIndex -
-                                    activeTable.range.startRowIndex);
+                                // Above the selected body rows; from the totals
+                                // row, above the totals row (Excel).
+                                const { bodyRows, lastDataRow } = tableSelection;
+                                onInsertTableRow?.(activeTable, (bodyRows?.start ?? lastDataRow + 1) -
+                                    activeTable.range.startRowIndex, blankTableRows(bodyRows?.count ?? 1));
+                            }, disabled: readonly },
+                            React.createElement(DropdownLeftSlot, null,
+                                React.createElement(PlusIcon, null)),
+                            "Table Rows Above")),
+                        tableSelection.touchesLastDataRow ? (React.createElement(DropdownMenuItem, { onClick: () => {
+                                const { bodyRows, lastDataRow } = tableSelection;
+                                onInsertTableRow?.(activeTable, lastDataRow + 1 - activeTable.range.startRowIndex, blankTableRows(bodyRows?.count ?? 1));
                             }, disabled: readonly },
                             React.createElement(DropdownLeftSlot, null,
                                 React.createElement(PlusIcon, null)),
-                            "Insert table row")),
+                            "Table Row Below")) : null,
                         React.createElement(DropdownMenuItem, { onClick: () => {
-                                onInsertTableColumn?.(activeTable, activeCell.columnIndex -
-                                    activeTable.range.startColumnIndex, Direction.Left);
+                                const { columns } = tableSelection;
+                                onInsertTableColumn?.(activeTable, columns.start - activeTable.range.startColumnIndex, Direction.Left, columns.count);
                             }, disabled: readonly },
                             React.createElement(DropdownLeftSlot, null,
                                 React.createElement(ArrowLeftIcon, null)),
-                            "Insert table column to the left"),
+                            "Table Columns to the Left"),
                         React.createElement(DropdownMenuItem, { onClick: () => {
-                                onInsertTableColumn?.(activeTable, activeCell.columnIndex -
-                                    activeTable.range.startColumnIndex, Direction.Right);
+                                const { columns } = tableSelection;
+                                onInsertTableColumn?.(activeTable, columns.end - activeTable.range.startColumnIndex, Direction.Right, columns.count);
                             }, disabled: readonly },
                             React.createElement(DropdownLeftSlot, null,
                                 React.createElement(ArrowRightIcon, null)),
-                            "Insert table column to the right"))) : (React.createElement(React.Fragment, null,
+                            "Table Columns to the Right"))) : (React.createElement(React.Fragment, null,
                         React.createElement(DropdownMenuItem, { onClick: () => onInsertRow?.(sheetId, activeCell.rowIndex, selectedRowIndexes.length), disabled: readonly },
                             React.createElement(DropdownLeftSlot, null,
                                 React.createElement(PlusIcon, null)),
@@ -739,7 +818,7 @@ export const ContextMenu = ({ isRowHeader, isColumnHeader, activeCell, selection
                         React.createElement(DropdownRightSlot, null,
                             React.createElement(ChevronRightIcon, null))),
                     React.createElement(DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 }, activeTable ? (React.createElement(React.Fragment, null,
-                        isActiveCellTableHeader ? null : (React.createElement(DropdownMenuItem, { onClick: () => onDeleteTableRow?.(activeTable, selectedRowIndexes), disabled: readonly },
+                        deletableTableRowIndexes.length === 0 ? null : (React.createElement(DropdownMenuItem, { onClick: () => onDeleteTableRow?.(activeTable, deletableTableRowIndexes), disabled: readonly },
                             React.createElement(DropdownLeftSlot, null,
                                 React.createElement(TrashIcon, null)),
                             "Delete table row")),
@@ -771,6 +850,32 @@ export const ContextMenu = ({ isRowHeader, isColumnHeader, activeCell, selection
                     React.createElement(DropdownLeftSlot, null,
                         React.createElement(TrashIcon, null)),
                     deleteCellsLabel)),
+                activeTable && tableSelection && onSelectRange ? (React.createElement(DropdownMenuSub, null,
+                    React.createElement(DropdownMenuSubTrigger, null,
+                        React.createElement(DropdownLeftSlot, null,
+                            React.createElement(ViewGridIcon, null)),
+                        "Select",
+                        React.createElement(DropdownRightSlot, null,
+                            React.createElement(ChevronRightIcon, null))),
+                    React.createElement(DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 },
+                        React.createElement(DropdownMenuItem, { onClick: () => onSelectRange(sheetId, {
+                                startRowIndex: tableSelection.firstBodyRow,
+                                endRowIndex: Math.max(tableSelection.firstBodyRow, tableSelection.lastDataRow),
+                                startColumnIndex: tableSelection.columns.start,
+                                endColumnIndex: tableSelection.columns.end,
+                            }) }, "Table Column Data"),
+                        React.createElement(DropdownMenuItem, { onClick: () => onSelectRange(sheetId, {
+                                startRowIndex: activeTable.range.startRowIndex,
+                                endRowIndex: activeTable.range.endRowIndex,
+                                startColumnIndex: tableSelection.columns.start,
+                                endColumnIndex: tableSelection.columns.end,
+                            }) }, "Entire Table Column"),
+                        React.createElement(DropdownMenuItem, { onClick: () => onSelectRange(sheetId, {
+                                startRowIndex: tableSelection.rows.start,
+                                endRowIndex: tableSelection.rows.end,
+                                startColumnIndex: activeTable.range.startColumnIndex,
+                                endColumnIndex: activeTable.range.endColumnIndex,
+                            }) }, "Table Row")))) : null,
                 React.createElement(DropdownMenuSeparator, null),
                 React.createElement(DropdownMenuSub, null,
                     React.createElement(DropdownMenuSubTrigger, { disabled: readonly },
@@ -812,27 +917,29 @@ export const ContextMenu = ({ isRowHeader, isColumnHeader, activeCell, selection
                         React.createElement(DropdownRightSlot, null,
                             React.createElement(ChevronRightIcon, null))),
                     React.createElement(DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 },
+                        onUpdateTable ? (React.createElement(DropdownMenuCheckboxItem, { checked: !!activeTable.totalRow, disabled: readonly, onSelect: () => onUpdateTable(sheetId, activeTable.id, {
+                                totalRow: !activeTable.totalRow,
+                            }) },
+                            React.createElement(DropdownMenuItemIndicator, null,
+                                React.createElement(CheckIcon, null)),
+                            "Totals Row")) : null,
                         React.createElement(DropdownMenuItem, { onClick: () => onRemoveTable?.(activeTable), disabled: readonly }, "Convert to range"),
                         React.createElement(DropdownMenuItem, { onClick: () => onRequestEditTable?.(activeTable), disabled: readonly }, "Edit table"),
+                        onRequestResizeTable ? (React.createElement(DropdownMenuItem, { onClick: () => {
+                                shouldFocusSheetRef.current = false;
+                                onRequestResizeTable(activeTable);
+                            }, disabled: readonly }, "Resize Table\u2026")) : null,
+                        onRequestInsertSlicer ? (React.createElement(DropdownMenuItem, { onClick: () => {
+                                shouldFocusSheetRef.current = false;
+                                onRequestInsertSlicer(activeTable);
+                            }, disabled: readonly }, "Insert Slicer\u2026")) : null,
                         isActiveCellTableTotal ? (React.createElement(DropdownMenuSub, null,
                             React.createElement(DropdownMenuSubTrigger, { disabled: readonly },
                                 "Total row function",
                                 React.createElement(DropdownRightSlot, null,
                                     React.createElement(ChevronRightIcon, null))),
-                            React.createElement(DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 }, TOTAL_ROW_FUNCTIONS.map((option) => (React.createElement(DropdownMenuCheckboxItem, { key: option.id, checked: activeTotalRowFunction === option.id, disabled: readonly, onSelect: () => {
-                                    const formula = getTotalRowFunctionFormula(option.id, activeTable, activeCell.columnIndex);
-                                    if (formula === undefined) {
-                                        return;
-                                    }
-                                    if (formula === "") {
-                                        onClearContents?.(sheetId, activeCell, selectionFromActiveCell(activeCell));
-                                        return;
-                                    }
-                                    onChange?.(sheetId, activeCell, formula, null);
-                                } },
-                                React.createElement(DropdownMenuItemIndicator, null,
-                                    React.createElement(CheckIcon, null)),
-                                option.label)))))) : null))) : null,
+                            React.createElement(DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 },
+                                React.createElement(TotalRowFunctionMenuItems, { sheetId: sheetId, table: activeTable, cell: activeCell, readonly: readonly, getCellData: getCellData, onChange: onChange, onClearContents: onClearContents, onUpdateTable: onUpdateTable, onRequestEditCell: onRequestEditCell })))) : null))) : null,
                 activePivotTable ? (React.createElement(DropdownMenuSub, null,
                     React.createElement(DropdownMenuSubTrigger, { disabled: readonly },
                         React.createElement(DropdownLeftSlot, null,
@@ -843,13 +950,36 @@ export const ContextMenu = ({ isRowHeader, isColumnHeader, activeCell, selection
                     React.createElement(DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 },
                         onPivotDrillDown ? (React.createElement(DropdownMenuItem, { onClick: () => onPivotDrillDown?.(activePivotTable.pivotId, activeCell.rowIndex, activeCell.columnIndex) }, "Drill Down")) : null,
                         React.createElement(DropdownMenuItem, { onClick: () => onRequestEditPivotTable?.(activePivotTable), disabled: readonly }, "Edit PivotTable"),
-                        React.createElement(DropdownMenuItem, { onClick: () => onRequestDeletePivotTable?.(activePivotTable.pivotId), disabled: readonly }, "Delete PivotTable")))) : null,
+                        React.createElement(DropdownMenuItem, { onClick: () => onRequestDeletePivotTable?.(activePivotTable.pivotId), disabled: readonly }, "Delete PivotTable"),
+                        onRequestCreatePivotChart ? (React.createElement(DropdownMenuItem, { onClick: () => onRequestCreatePivotChart(sheetId, activeCell, selections, activePivotTable.pivotId), disabled: readonly }, "PivotChart")) : null))) : null,
+                activeSparklineGroup ? (React.createElement(DropdownMenuSub, null,
+                    React.createElement(DropdownMenuSubTrigger, { disabled: readonly },
+                        "Sparklines",
+                        React.createElement(DropdownRightSlot, null,
+                            React.createElement(ChevronRightIcon, null))),
+                    React.createElement(DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 },
+                        React.createElement(DropdownMenuItem, { disabled: readonly, onClick: () => {
+                                shouldFocusSheetRef.current = false;
+                                openSparklineDialog({ mode: "edit", group: activeSparklineGroup });
+                            } }, "Edit Group Location & Data\u2026"),
+                        React.createElement(DropdownMenuItem, { disabled: readonly, onClick: () => {
+                                const cells = [];
+                                for (const { range } of selections.length
+                                    ? selections
+                                    : selectionFromActiveCell(activeCell)) {
+                                    for (const [rowIndex, columnIndex] of iterateCellsInRange(range)) {
+                                        cells.push({ rowIndex, columnIndex });
+                                    }
+                                }
+                                clearSparklineCells(cells);
+                            } }, "Clear Selected Sparklines"),
+                        React.createElement(DropdownMenuItem, { disabled: readonly, onClick: () => clearSparklineCells(activeSparklineGroup.members.map((m) => m.cell)) }, "Clear Selected Sparkline Groups")))) : null,
                 React.createElement(DropdownMenuSeparator, null),
                 activeTable ? null : (React.createElement(React.Fragment, null,
                     React.createElement(DropdownMenuItem, { onClick: () => {
                             // We have to shift the focus to note editor
                             shouldFocusSheetRef.current = false;
-                            onCreateTable?.(sheetId, activeCell, selections, undefined, "TableStyleLight1", {
+                            const bandedRange = {
                                 rowProperties: {
                                     firstBandColor: {
                                         theme: 1,
@@ -884,7 +1014,13 @@ export const ContextMenu = ({ isRowHeader, isColumnHeader, activeCell, selection
                                         },
                                     },
                                 },
-                            });
+                            };
+                            if (onRequestCreateTable) {
+                                onRequestCreateTable(sheetId, activeCell, selections, "TableStyleLight1", bandedRange);
+                            }
+                            else {
+                                onCreateTable?.(sheetId, activeCell, selections, undefined, "TableStyleLight1", bandedRange);
+                            }
                         }, disabled: readonly },
                         React.createElement(DropdownLeftSlot, null,
                             React.createElement(TableIcon, null)),

package/dist/esm/components/context-menu/total-row-function-menu.d.ts

@@ -0,0 +1,33 @@
+import type { CellInterface } from "@rowsncolumns/grid";
+import React from "react";
+import type { TableView } from "../../types";
+import type { CanvasGridProps } from "../canvas-grid/typings";
+export type TotalRowFunctionMenuItemsProps = {
+    sheetId: number;
+    table: TableView;
+    /** The totals-row cell the picker acts on. */
+    cell: CellInterface;
+    readonly?: boolean;
+    /** Reads the cell's formula to highlight its current function when the column records none. */
+    getCellData?: CanvasGridProps["getCellData"];
+    /** Writes the chosen aggregation formula into the cell (fallback without `onUpdateTable`). */
+    onChange?: CanvasGridProps["onChange"];
+    /** Clears the cell for "None" (fallback without `onUpdateTable`). */
+    onClearContents?: CanvasGridProps["onClearContents"];
+    /**
+     * Records the choice as the column's `totalsRowFunction`: both engines derive
+     * the totals cell from it and regenerate it when the totals row is toggled off
+     * and on. Without it the picker writes the formula with `onChange`.
+     */
+    onUpdateTable?: CanvasGridProps["onUpdateTable"];
+    /** Opens the cell editor pre-filled, for "More Functions…" (omitted when absent). */
+    onRequestEditCell?: (sheetId: number, cell: CellInterface, initialValue?: string) => void;
+};
+/**
+ * Excel's totals-row function list (None / Average / Count / … / Var, then
+ * "More Functions…") for one totals cell — the items of the context menu's
+ * "Total row function" submenu and of the dropdown the totals cell's in-cell
+ * arrow opens.
+ */
+export declare const TotalRowFunctionMenuItems: ({ sheetId, table, cell, readonly, getCellData, onChange, onClearContents, onUpdateTable, onRequestEditCell, }: TotalRowFunctionMenuItemsProps) => React.JSX.Element;
+//# sourceMappingURL=total-row-function-menu.d.ts.map

package/dist/esm/components/context-menu/total-row-function-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"total-row-function-menu.d.ts","sourceRoot":"","sources":["../../../../components/context-menu/total-row-function-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AASxD,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAS9D,MAAM,MAAM,8BAA8B,GAAG;IAC3C,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,SAAS,CAAC;IACjB,8CAA8C;IAC9C,IAAI,EAAE,aAAa,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+FAA+F;IAC/F,WAAW,CAAC,EAAE,eAAe,CAAC,aAAa,CAAC,CAAC;IAC7C,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IACvC,qEAAqE;IACrE,eAAe,CAAC,EAAE,eAAe,CAAC,iBAAiB,CAAC,CAAC;IACrD;;;;OAIG;IACH,aAAa,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IACjD,qFAAqF;IACrF,iBAAiB,CAAC,EAAE,CAClB,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,aAAa,EACnB,YAAY,CAAC,EAAE,MAAM,KAClB,IAAI,CAAC;CACX,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB,GAAI,+GAUvC,8BAA8B,sBAiEhC,CAAC"}

package/dist/esm/components/context-menu/total-row-function-menu.js

@@ -0,0 +1,50 @@
+import { selectionFromActiveCell } from "@rowsncolumns/grid";
+import { CheckIcon } from "@rowsncolumns/icons";
+import { DropdownMenuCheckboxItem, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuSeparator, } from "@rowsncolumns/ui";
+import React, { useMemo } from "react";
+import { getTotalRowFunctionFormula, getTotalRowFunctionFromFormula, MORE_FUNCTIONS_INITIAL_VALUE, TOTAL_ROW_FUNCTIONS, withTotalRowFunction, } from "./total-row-functions";
+/**
+ * Excel's totals-row function list (None / Average / Count / … / Var, then
+ * "More Functions…") for one totals cell — the items of the context menu's
+ * "Total row function" submenu and of the dropdown the totals cell's in-cell
+ * arrow opens.
+ */
+export const TotalRowFunctionMenuItems = ({ sheetId, table, cell, readonly, getCellData, onChange, onClearContents, onUpdateTable, onRequestEditCell, }) => {
+    const activeFunction = useMemo(() => {
+        // The column's recorded function is the source of truth; a totals cell
+        // without one (typed by hand, or from a file) is read off its formula.
+        const recorded = table.columns?.[cell.columnIndex - table.range.startColumnIndex]
+            ?.totalsRowFunction;
+        if (recorded && recorded !== "custom") {
+            return recorded;
+        }
+        const cellData = getCellData?.(sheetId, cell.rowIndex, cell.columnIndex);
+        const ue = cellData?.ue ?? cellData?.userEnteredValue;
+        return getTotalRowFunctionFromFormula(ue?.fv ?? ue?.formulaValue);
+    }, [table, getCellData, sheetId, cell]);
+    return (React.createElement(React.Fragment, null,
+        TOTAL_ROW_FUNCTIONS.map((option) => (React.createElement(DropdownMenuCheckboxItem, { key: option.id, checked: activeFunction === option.id, disabled: readonly, onSelect: () => {
+                const columns = onUpdateTable
+                    ? withTotalRowFunction(table, cell.columnIndex, option.id)
+                    : undefined;
+                if (columns) {
+                    onUpdateTable?.(sheetId, table.id, { columns });
+                    return;
+                }
+                const formula = getTotalRowFunctionFormula(option.id, table, cell.columnIndex);
+                if (formula === undefined) {
+                    return;
+                }
+                if (formula === "") {
+                    onClearContents?.(sheetId, cell, selectionFromActiveCell(cell));
+                    return;
+                }
+                onChange?.(sheetId, cell, formula, null);
+            } },
+            React.createElement(DropdownMenuItemIndicator, null,
+                React.createElement(CheckIcon, null)),
+            option.label))),
+        onRequestEditCell ? (React.createElement(React.Fragment, null,
+            React.createElement(DropdownMenuSeparator, null),
+            React.createElement(DropdownMenuItem, { disabled: readonly, onSelect: () => onRequestEditCell(sheetId, cell, MORE_FUNCTIONS_INITIAL_VALUE) }, "More Functions\u2026"))) : null));
+};

package/dist/esm/components/context-menu/total-row-functions.d.ts

@@ -1,9 +1,11 @@
+import { escapeStructuredColumnName, getTotalsRowFunctionFromFormula, type TotalsRowFunction } from "@rowsncolumns/utils";
 import type { TableView } from "../../types";
 /**
- * The aggregations Excel offers in a table's totals-row dropdown, each backed
- * by the `SUBTOTAL` function number that ignores hidden (filtered) rows.
+ * The aggregations Excel offers in a table's totals-row dropdown — the
+ * `totalsRowFunction` values a column records (`custom` is what "More
+ * Functions…" produces and is not a picker entry).
  */
-export type TotalRowFunction = "none" | "average" | "count" | "countNumbers" | "max" | "min" | "sum" | "stdDev" | "var";
+export type TotalRowFunction = Exclude<TotalsRowFunction, "custom">;
 export type TotalRowFunctionOption = {
     id: TotalRowFunction;
     label: string;
@@ -11,11 +13,9 @@ export type TotalRowFunctionOption = {
     subtotal?: number;
 };
 export declare const TOTAL_ROW_FUNCTIONS: TotalRowFunctionOption[];
-/**
- * Escape a column name for use inside a structured reference: `[`, `]`, `#`
- * and `'` are prefixed with `'`, as Excel does.
- */
-export declare const escapeStructuredColumnName: (name: string) => string;
+/** What "More Functions…" pre-fills in the cell editor for a custom totals formula. */
+export declare const MORE_FUNCTIONS_INITIAL_VALUE = "=SUBTOTAL(";
+export { escapeStructuredColumnName, getTotalsRowFunctionFromFormula as getTotalRowFunctionFromFormula };
 /**
  * Formula for a totals-row cell, e.g. `=SUBTOTAL(109,Table1[Amount])`.
  * Qualified with the table name so it evaluates from any engine and matches
@@ -24,9 +24,9 @@ export declare const escapeStructuredColumnName: (name: string) => string;
  */
 export declare const getTotalRowFunctionFormula: (fn: TotalRowFunction, table: Pick<TableView, "title" | "columns" | "range">, columnIndex: number) => string | undefined;
 /**
- * Recognise the aggregation a totals-row formula uses, so the picker can show
- * the active choice. Both the hidden-row-aware (1xx) and plain (1–11)
- * `SUBTOTAL` numbers map to the same option; anything else is "none".
+ * The table's columns with `columnIndex`'s `totalsRowFunction` set to `fn` —
+ * the shape `onUpdateTable` persists so the choice survives toggling the totals
+ * row off and on. `undefined` when the column list does not cover the cell.
  */
-export declare const getTotalRowFunctionFromFormula: (formula: string | null | undefined) => TotalRowFunction;
+export declare const withTotalRowFunction: (table: Pick<TableView, "columns" | "range">, columnIndex: number, fn: TotalRowFunction) => TableView["columns"] | undefined;
 //# sourceMappingURL=total-row-functions.d.ts.map

package/dist/esm/components/context-menu/total-row-functions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"total-row-functions.d.ts","sourceRoot":"","sources":["../../../../components/context-menu/total-row-functions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE7C;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GACxB,MAAM,GACN,SAAS,GACT,OAAO,GACP,cAAc,GACd,KAAK,GACL,KAAK,GACL,KAAK,GACL,QAAQ,GACR,KAAK,CAAC;AAEV,MAAM,MAAM,sBAAsB,GAAG;IACnC,EAAE,EAAE,gBAAgB,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,sBAAsB,EAUvD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,0BAA0B,GAAI,MAAM,MAAM,WACnB,CAAC;AAErC;;;;;GAKG;AACH,eAAO,MAAM,0BAA0B,GACrC,IAAI,gBAAgB,EACpB,OAAO,IAAI,CAAC,SAAS,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC,EACrD,aAAa,MAAM,KAClB,MAAM,GAAG,SAaX,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,8BAA8B,GACzC,SAAS,MAAM,GAAG,IAAI,GAAG,SAAS,KACjC,gBAgBF,CAAC"}
+{"version":3,"file":"total-row-functions.d.ts","sourceRoot":"","sources":["../../../../components/context-menu/total-row-functions.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,0BAA0B,EAE1B,+BAA+B,EAE/B,KAAK,iBAAiB,EACvB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAE7C;;;;GAIG;AACH,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,iBAAiB,EAAE,QAAQ,CAAC,CAAC;AAEpE,MAAM,MAAM,sBAAsB,GAAG;IACnC,EAAE,EAAE,gBAAgB,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,sBAAsB,EAgBrD,CAAC;AAEJ,uFAAuF;AACvF,eAAO,MAAM,4BAA4B,eAAe,CAAC;AAEzD,OAAO,EAAE,0BAA0B,EAAE,+BAA+B,IAAI,8BAA8B,EAAE,CAAC;AAEzG;;;;;GAKG;AACH,eAAO,MAAM,0BAA0B,GACrC,IAAI,gBAAgB,EACpB,OAAO,IAAI,CAAC,SAAS,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC,EACrD,aAAa,MAAM,KAClB,MAAM,GAAG,SAUX,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAC/B,OAAO,IAAI,CAAC,SAAS,EAAE,SAAS,GAAG,OAAO,CAAC,EAC3C,aAAa,MAAM,EACnB,IAAI,gBAAgB,KACnB,SAAS,CAAC,SAAS,CAAC,GAAG,SASzB,CAAC"}

package/dist/esm/components/context-menu/total-row-functions.js

@@ -1,19 +1,22 @@
+import { escapeStructuredColumnName, getTotalsRowFormula, getTotalsRowFunctionFromFormula, TOTALS_ROW_FUNCTION_SUBTOTAL, } from "@rowsncolumns/utils";
 export const TOTAL_ROW_FUNCTIONS = [
-    { id: "none", label: "None" },
-    { id: "average", label: "Average", subtotal: 101 },
-    { id: "count", label: "Count", subtotal: 103 },
-    { id: "countNumbers", label: "Count Numbers", subtotal: 102 },
-    { id: "max", label: "Max", subtotal: 104 },
-    { id: "min", label: "Min", subtotal: 105 },
-    { id: "sum", label: "Sum", subtotal: 109 },
-    { id: "stdDev", label: "StdDev", subtotal: 107 },
-    { id: "var", label: "Var", subtotal: 110 },
-];
-/**
- * Escape a column name for use inside a structured reference: `[`, `]`, `#`
- * and `'` are prefixed with `'`, as Excel does.
- */
-export const escapeStructuredColumnName = (name) => name.replace(/(['\[\]#])/g, "'$1");
+    ["none", "None"],
+    ["average", "Average"],
+    ["count", "Count"],
+    ["countNums", "Count Numbers"],
+    ["max", "Max"],
+    ["min", "Min"],
+    ["sum", "Sum"],
+    ["stdDev", "StdDev"],
+    ["var", "Var"],
+].map(([id, label]) => ({
+    id,
+    label,
+    subtotal: TOTALS_ROW_FUNCTION_SUBTOTAL[id],
+}));
+/** What "More Functions…" pre-fills in the cell editor for a custom totals formula. */
+export const MORE_FUNCTIONS_INITIAL_VALUE = "=SUBTOTAL(";
+export { escapeStructuredColumnName, getTotalsRowFunctionFromFormula as getTotalRowFunctionFromFormula };
 /**
  * Formula for a totals-row cell, e.g. `=SUBTOTAL(109,Table1[Amount])`.
  * Qualified with the table name so it evaluates from any engine and matches
@@ -24,27 +27,22 @@ export const getTotalRowFunctionFormula = (fn, table, columnIndex) => {
     if (fn === "none") {
         return "";
     }
-    const option = TOTAL_ROW_FUNCTIONS.find((item) => item.id === fn);
     const columnName = table.columns?.[columnIndex - table.range.startColumnIndex]?.name;
-    if (!option?.subtotal || !columnName || !table.title) {
+    if (!columnName || !table.title) {
         return undefined;
     }
-    return `=SUBTOTAL(${option.subtotal},${table.title}[${escapeStructuredColumnName(columnName)}])`;
+    return getTotalsRowFormula(fn, table.title, columnName);
 };
 /**
- * Recognise the aggregation a totals-row formula uses, so the picker can show
- * the active choice. Both the hidden-row-aware (1xx) and plain (1–11)
- * `SUBTOTAL` numbers map to the same option; anything else is "none".
+ * The table's columns with `columnIndex`'s `totalsRowFunction` set to `fn` —
+ * the shape `onUpdateTable` persists so the choice survives toggling the totals
+ * row off and on. `undefined` when the column list does not cover the cell.
  */
-export const getTotalRowFunctionFromFormula = (formula) => {
-    if (!formula) {
-        return "none";
-    }
-    const match = /^\s*=\s*SUBTOTAL\s*\(\s*(\d{1,3})\s*,/i.exec(formula);
-    if (!match) {
-        return "none";
+export const withTotalRowFunction = (table, columnIndex, fn) => {
+    const index = columnIndex - table.range.startColumnIndex;
+    const column = table.columns?.[index];
+    if (!column) {
+        return undefined;
     }
-    const number = Number(match[1]);
-    const normalized = number > 100 ? number - 100 : number;
-    return (TOTAL_ROW_FUNCTIONS.find((item) => item.subtotal !== undefined && item.subtotal - 100 === normalized)?.id ?? "none");
+    return table.columns.map((item, i) => i === index ? { ...item, totalsRowFunction: fn } : item);
 };

package/dist/esm/components/embeds/chart-component.d.ts

@@ -11,6 +11,23 @@ export type ChartComponentProps = {
     isSelected: boolean;
     readonly?: boolean;
     onDeleteChart: CanvasGridProps["onDeleteChart"];
+    /**
+     * Persist an edited chart (the grid's `onUpdateChart`). Renderers use it
+     * for in-place operations such as Switch Row/Column.
+     */
+    onUpdateChart?: CanvasGridProps["onUpdateChart"];
+    /** Chart clipboard (Ctrl+C / Ctrl+X / Ctrl+V / Ctrl+D) — for a chart context menu. */
+    onCopyChart?: (chartId: EmbeddedChart["chartId"]) => boolean;
+    onCutChart?: (chartId: EmbeddedChart["chartId"]) => boolean;
+    onPasteChart?: () => boolean;
+    onDuplicateChart?: (chartId: EmbeddedChart["chartId"]) => EmbeddedChart | undefined;
+    /**
+     * Excel's PivotChart field buttons, drawn over the chart frame. The host
+     * composes them (`PivotChartFieldButtons` from `@rowsncolumns/pivot`
+     * with its pivot tables and sort / filter actions) because the renderer
+     * knows nothing about pivots; renderers place the node inside the frame.
+     */
+    fieldButtons?: React.ReactNode;
 };
 export declare const ChartComponent: React.MemoExoticComponent<({ backgroundColor }: ChartComponentProps) => React.JSX.Element>;
 //# sourceMappingURL=chart-component.d.ts.map

package/dist/esm/components/embeds/chart-component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-component.d.ts","sourceRoot":"","sources":["../../../../components/embeds/chart-component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAEhF,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,aAAa,CAAC;IACrB,KAAK,EAAE,gBAAgB,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;CACjD,CAAC;AAEF,eAAO,MAAM,cAAc,kDACH,mBAAmB,uBAY1C,CAAC"}
+{"version":3,"file":"chart-component.d.ts","sourceRoot":"","sources":["../../../../components/embeds/chart-component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAEhF,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,aAAa,CAAC;IACrB,KAAK,EAAE,gBAAgB,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IAChD;;;OAGG;IACH,aAAa,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IACjD,sFAAsF;IACtF,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,KAAK,OAAO,CAAC;IAC7D,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,KAAK,OAAO,CAAC;IAC5D,YAAY,CAAC,EAAE,MAAM,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,CACjB,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC,KAC9B,aAAa,GAAG,SAAS,CAAC;IAC/B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC,CAAC;AAEF,eAAO,MAAM,cAAc,kDACH,mBAAmB,uBAY1C,CAAC"}