@rowsncolumns/spreadsheet 10.2.68

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

@@ -0,0 +1,591 @@
+import { Direction, isCellWithinBounds, selectionFromActiveCell, } from "@rowsncolumns/grid";
+import { ArrowLeftIcon, ArrowRightIcon, ChevronRightIcon, ClipboardIcon, 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, DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownRightSlot, } from "@rowsncolumns/ui";
+import { number2Alpha } from "@rowsncolumns/utils";
+import React, { useCallback, useMemo, useRef } from "react";
+import { getProtectedRange, isProtectedRange } from "../../api/validation";
+import { useGetContentfulRangeAroundCell } from "../../atoms";
+import { BLANK_LABEL } from "../../config";
+import { createArrayRange, generateMultiDimTitle } from "../../helpers";
+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, onPaste, 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, isHiddenColumn, isHiddenRow, onShowColumn, onShowRow, tables, pivotTables, protectedRanges, sheetId, frozenRows, frozenColumns, selectedRowHeadersIds, selectedColumnHeadersIds, readonly = false, onAddQuickEdit, enableMagicFill, }) => {
+    const isHeader = isColumnHeader || isRowHeader;
+    const shouldFocusSheetRef = useRef(true);
+    const multiColumnTitle = generateMultiDimTitle(selectedColumnHeadersIds, "y");
+    const selection = selections.length
+        ? selections[0]
+        : selectionFromActiveCell(activeCell)[0];
+    const multiRowTitle = generateMultiDimTitle(selectedRowHeadersIds, "x");
+    const selectedRowIndexes = createArrayRange(selection.range.startRowIndex, selection.range.endRowIndex);
+    const selectedColumnIndexes = createArrayRange(selection.range.startColumnIndex, selection.range.endColumnIndex);
+    const hiddenColumns = selectedColumnIndexes.filter((index) => isHiddenColumn(index));
+    const hiddenRows = selectedRowIndexes.filter((index) => isHiddenRow(index));
+    // Check for active table
+    const activeTable = useMemo(() => tables?.find(({ range }) => isCellWithinBounds(activeCell, range)), [tables, activeCell]);
+    // 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);
+    // Basic filter
+    const activeBasicFilter = basicFilter && isCellWithinBounds(activeCell, basicFilter.range)
+        ? basicFilter
+        : undefined;
+    // Last selected col
+    // Reduce, not spread — passing a selection-sized array as call arguments
+    // throws `RangeError: Maximum call stack size exceeded` (full-column
+    // selections reach ~1M ids).
+    const lastSelectedColumnIndex = selectedColumnHeadersIds.reduce((m, v) => (v > m ? v : m), -Infinity);
+    const lastSelectedRowIndex = selectedRowHeadersIds.reduce((m, v) => (v > m ? v : m), -Infinity);
+    // Get contentful range
+    const getContentfulRangeAroundCell = useGetContentfulRangeAroundCell();
+    // Sort table or filter
+    const onSortTableOrFilterView = useCallback((direction) => {
+        // Found a table
+        if (activeTable) {
+            onSortTable?.(sheetId, activeTable, activeCell.columnIndex - activeTable.range.startColumnIndex, direction);
+        }
+        else if (activeBasicFilter) {
+            // Inside a basic filter
+            onSortTable?.(sheetId, activeBasicFilter, activeCell.columnIndex - activeBasicFilter.range.startColumnIndex, direction);
+        }
+        else {
+            // User has made some selections
+            if (selections.length) {
+                // Sort range
+                onSortRange?.(sheetId, selections, direction);
+            }
+            else {
+                // Find contentful cell around
+                const range = getContentfulRangeAroundCell?.(sheetId, activeCell);
+                if (range) {
+                    onSortRange?.(sheetId, [{ range }], direction);
+                }
+            }
+        }
+    }, [
+        activeTable,
+        activeBasicFilter,
+        sheetId,
+        activeCell,
+        selections,
+        onSortTable,
+        onSortRange,
+        getContentfulRangeAroundCell,
+    ]);
+    // Filter table or filter view
+    const onFilterTableOrFilterView = useCallback((sheetId, rowIndex, columnIndex) => {
+        // Check if there a active basic filter
+        const cellValue = getFormattedValue(sheetId, rowIndex, columnIndex) ?? BLANK_LABEL;
+        // Get hidden values
+        const getVisibleValuesFromFilterView = (filterRange, cellValue) => {
+            const range = {
+                ...filterRange,
+                startRowIndex: filterRange.startRowIndex + 1,
+                startColumnIndex: columnIndex,
+                endColumnIndex: columnIndex,
+            };
+            return getFormattedValuesFromRange(sheetId, [{ range }]).filter((value) => value === cellValue);
+        };
+        // We need to set all other values as hiddenValues
+        if (activeTable) {
+            onFilterTable?.(sheetId, activeTable, columnIndex - activeTable.range.startColumnIndex, undefined, undefined, getVisibleValuesFromFilterView(activeTable.range, cellValue));
+        }
+        else if (activeBasicFilter) {
+            onFilterTable?.(sheetId, activeBasicFilter, columnIndex - activeBasicFilter.range.startColumnIndex, undefined, undefined, getVisibleValuesFromFilterView(activeBasicFilter.range, cellValue));
+        }
+        else {
+            // Create a basic filter
+            const range = getContentfulRangeAroundCell?.(sheetId, activeCell);
+            if (range) {
+                onCreateBasicFilter?.(sheetId, activeCell, selections, {
+                    filterSpecs: [
+                        {
+                            columnIndex,
+                            filterCriteria: {
+                                condition: {},
+                                visibleValues: getVisibleValuesFromFilterView(range, cellValue),
+                            },
+                        },
+                    ],
+                });
+            }
+        }
+    }, [
+        activeCell,
+        selections,
+        activeTable,
+        activeBasicFilter,
+        getFormattedValue,
+        onFilterTable,
+        onCreateBasicFilter,
+        getContentfulRangeAroundCell,
+        getFormattedValuesFromRange,
+    ]);
+    // Use DropdownMenuPortal, otherwise menu is not mounted in body
+    return (React.createElement(DropdownMenuPortal, null,
+        React.createElement(DropdownMenuContent, { align: "start", sideOffset: 0, onCloseAutoFocus: (event) => {
+                event.preventDefault();
+                if (shouldFocusSheetRef.current && !isSheetFocused()) {
+                    focusSheet();
+                }
+            }, onInteractOutside: () => {
+                shouldFocusSheetRef.current = false;
+            }, onMouseMove: (e) => e.stopPropagation() },
+            React.createElement(DropdownMenuItem, { onClick: onCut, disabled: readonly },
+                React.createElement(DropdownLeftSlot, null,
+                    React.createElement(ScissorsIcon, null)),
+                "Cut ",
+                React.createElement(DropdownRightSlot, null, "\u2318X")),
+            React.createElement(DropdownMenuItem, { onClick: onCopy },
+                React.createElement(DropdownLeftSlot, null,
+                    React.createElement(CopyIcon, null)),
+                "Copy ",
+                React.createElement(DropdownRightSlot, null, "\u2318C")),
+            React.createElement(DropdownMenuItem, { onClick: () => onPaste?.(), disabled: readonly },
+                React.createElement(DropdownLeftSlot, null,
+                    React.createElement(ClipboardIcon, null)),
+                "Paste ",
+                React.createElement(DropdownRightSlot, null, "\u2318V")),
+            React.createElement(DropdownMenuSub, null,
+                React.createElement(DropdownMenuSubTrigger, { disabled: readonly },
+                    React.createElement(DropdownLeftSlot, null,
+                        React.createElement(ClipboardIcon, null)),
+                    "Paste special",
+                    React.createElement(DropdownRightSlot, null,
+                        React.createElement(ChevronRightIcon, null))),
+                React.createElement(DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 },
+                    React.createElement(DropdownMenuItem, { onClick: () => onPaste?.("Value") }, "Values only"),
+                    React.createElement(DropdownMenuItem, { onClick: () => onPaste?.("Formatting") }, "Formatting only"),
+                    React.createElement(DropdownMenuItem, { onClick: () => onPaste?.("Formula") }, "Formula"),
+                    React.createElement(DropdownMenuSeparator, null),
+                    React.createElement(DropdownMenuItem, { onClick: () => onPaste?.("Transposed") }, "Transposed"))),
+            enableMagicFill ? (React.createElement(React.Fragment, null,
+                React.createElement(DropdownMenuSeparator, null),
+                React.createElement(DropdownMenuItem, { onClick: () => onAddQuickEdit({
+                        ...selection.range,
+                        sheetId,
+                    }), disabled: readonly },
+                    React.createElement(DropdownLeftSlot, null,
+                        React.createElement(WandIcon, null)),
+                    "AI Quick Edit ",
+                    React.createElement(DropdownRightSlot, null, "\u2318J")))) : null,
+            React.createElement(DropdownMenuSub, null,
+                React.createElement(DropdownMenuSubTrigger, { disabled: readonly },
+                    React.createElement(DropdownLeftSlot, null,
+                        React.createElement(Cross1Icon, null)),
+                    "Clear",
+                    React.createElement(DropdownRightSlot, null,
+                        React.createElement(ChevronRightIcon, null))),
+                React.createElement(DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 },
+                    React.createElement(DropdownMenuItem, { onClick: () => onClearFormatting?.(sheetId, activeCell, selections), disabled: readonly }, "Clear formats"),
+                    React.createElement(DropdownMenuItem, { onClick: () => onClearContents?.(sheetId, activeCell, selections), disabled: readonly }, "Clear contents"))),
+            React.createElement(DropdownMenuSeparator, null),
+            isColumnHeader ? (React.createElement(React.Fragment, null,
+                React.createElement(DropdownMenuItem, { onClick: () => onInsertColumn?.(sheetId, activeCell.columnIndex, selectedColumnHeadersIds.length), disabled: readonly },
+                    React.createElement(DropdownLeftSlot, null,
+                        React.createElement(PlusIcon, null)),
+                    "Insert ",
+                    selectedColumnHeadersIds.length,
+                    " column left"),
+                React.createElement(DropdownMenuItem, { onClick: () => onInsertColumn?.(sheetId, activeCell.columnIndex + selectedColumnHeadersIds.length, selectedColumnHeadersIds.length), disabled: readonly },
+                    React.createElement(DropdownLeftSlot, null,
+                        React.createElement(PlusIcon, null)),
+                    "Insert ",
+                    selectedColumnHeadersIds.length,
+                    " column right"),
+                React.createElement(DropdownMenuItem, { onClick: () => onDeleteColumn?.(sheetId, selectedColumnHeadersIds), disabled: readonly },
+                    React.createElement(DropdownLeftSlot, null,
+                        React.createElement(TrashIcon, null)),
+                    "Delete column ",
+                    multiColumnTitle),
+                React.createElement(DropdownMenuItem, { disabled: !onHideColumn, onClick: () => onHideColumn?.(sheetId, selectedColumnHeadersIds) },
+                    React.createElement(DropdownLeftSlot, null,
+                        React.createElement(EyeNoneIcon, null)),
+                    "Hide column ",
+                    multiColumnTitle),
+                hiddenColumns.length ? (React.createElement(DropdownMenuItem, { onClick: () => onShowColumn?.(sheetId, hiddenColumns) },
+                    React.createElement(DropdownLeftSlot, null,
+                        React.createElement(EyeOpenIcon, null)),
+                    "Unhide")) : null,
+                onGroupColumns ? (React.createElement(DropdownMenuItem, { onClick: () => onGroupColumns?.(sheetId, selectedColumnHeadersIds) },
+                    React.createElement(DropdownLeftSlot, null,
+                        React.createElement(ChevronRightIcon, null)),
+                    "Group column ",
+                    multiColumnTitle)) : null,
+                onUngroupColumns ? (React.createElement(DropdownMenuItem, { onClick: () => onUngroupColumns?.(sheetId, selectedColumnHeadersIds) },
+                    React.createElement(DropdownLeftSlot, null,
+                        React.createElement(ChevronRightIcon, null)),
+                    "Ungroup column ",
+                    multiColumnTitle)) : null,
+                React.createElement(DropdownMenuItem, { disabled: !onRequestResize, onClick: () => onRequestResize?.(sheetId, selectedColumnHeadersIds, "y") },
+                    React.createElement(DropdownLeftSlot, null,
+                        React.createElement(SizeIcon, null)),
+                    "Resize column ",
+                    multiColumnTitle),
+                React.createElement(DropdownMenuItem, { onClick: () => onFreezeColumn?.(sheetId, lastSelectedColumnIndex) },
+                    React.createElement(DropdownLeftSlot, null,
+                        React.createElement(ViewGridIcon, null)),
+                    "Freeze up to Column ",
+                    number2Alpha(lastSelectedColumnIndex - 1)),
+                frozenColumns > 1 ? (React.createElement(DropdownMenuItem, { onClick: () => onFreezeColumn?.(sheetId, 0) },
+                    React.createElement(DropdownLeftSlot, null,
+                        React.createElement(ViewGridIcon, null)),
+                    "Unfreeze columns")) : null,
+                React.createElement(DropdownMenuSeparator, null),
+                React.createElement(DropdownMenuItem, { onClick: () => onSortColumn?.(sheetId, activeCell.columnIndex, "ASCENDING"), disabled: readonly },
+                    React.createElement(DropdownLeftSlot, { className: "text-base leading-4" },
+                        React.createElement(SortDownIcon, null)),
+                    "Sort sheet A to Z"),
+                React.createElement(DropdownMenuItem, { onClick: () => onSortColumn?.(sheetId, activeCell.columnIndex, "DESCENDING"), disabled: readonly },
+                    React.createElement(DropdownLeftSlot, { className: "text-base leading-4" },
+                        React.createElement(SortUpIcon, null)),
+                    "Sort sheet Z to A"))) : null,
+            isRowHeader ? (React.createElement(React.Fragment, null,
+                React.createElement(DropdownMenuItem, { onClick: () => onInsertRow?.(sheetId, activeCell.rowIndex, selectedRowHeadersIds.length), disabled: readonly },
+                    React.createElement(DropdownLeftSlot, null,
+                        React.createElement(PlusIcon, null)),
+                    "Insert ",
+                    selectedRowHeadersIds.length,
+                    " row above"),
+                React.createElement(DropdownMenuItem, { onClick: () => onInsertRow?.(sheetId, activeCell.rowIndex + selectedRowHeadersIds.length, selectedRowHeadersIds.length), disabled: readonly },
+                    React.createElement(DropdownLeftSlot, null,
+                        React.createElement(PlusIcon, null)),
+                    "Insert ",
+                    selectedRowHeadersIds.length,
+                    " row below"),
+                React.createElement(DropdownMenuItem, { onClick: () => onDeleteRow?.(sheetId, selectedRowHeadersIds), disabled: readonly },
+                    React.createElement(DropdownLeftSlot, null,
+                        React.createElement(TrashIcon, null)),
+                    "Delete row ",
+                    multiRowTitle),
+                React.createElement(DropdownMenuItem, { disabled: !onHideRow, onClick: () => onHideRow?.(sheetId, selectedRowHeadersIds) },
+                    React.createElement(DropdownLeftSlot, null,
+                        React.createElement(EyeNoneIcon, null)),
+                    "Hide row ",
+                    multiRowTitle),
+                hiddenRows.length ? (React.createElement(DropdownMenuItem, { onClick: () => onShowRow?.(sheetId, hiddenRows) },
+                    React.createElement(DropdownLeftSlot, null,
+                        React.createElement(EyeOpenIcon, null)),
+                    "Unhide")) : null,
+                onGroupRows ? (React.createElement(DropdownMenuItem, { onClick: () => onGroupRows?.(sheetId, selectedRowHeadersIds) },
+                    React.createElement(DropdownLeftSlot, null,
+                        React.createElement(ChevronRightIcon, null)),
+                    "Group row ",
+                    multiRowTitle)) : null,
+                onUngroupRows ? (React.createElement(DropdownMenuItem, { onClick: () => onUngroupRows?.(sheetId, selectedRowHeadersIds) },
+                    React.createElement(DropdownLeftSlot, null,
+                        React.createElement(ChevronRightIcon, null)),
+                    "Ungroup row ",
+                    multiRowTitle)) : null,
+                React.createElement(DropdownMenuItem, { disabled: !onRequestResize, onClick: () => onRequestResize?.(sheetId, selectedRowHeadersIds, "x") },
+                    React.createElement(DropdownLeftSlot, null,
+                        React.createElement(SizeIcon, null)),
+                    "Resize row ",
+                    multiRowTitle),
+                React.createElement(DropdownMenuItem, { onClick: () => onFreezeRow?.(sheetId, lastSelectedRowIndex) },
+                    React.createElement(DropdownLeftSlot, null,
+                        React.createElement(ViewGridIcon, null)),
+                    "Freeze up to Row ",
+                    lastSelectedRowIndex),
+                frozenRows > 1 ? (React.createElement(DropdownMenuItem, { onClick: () => onFreezeRow?.(sheetId, 0) },
+                    React.createElement(DropdownLeftSlot, null,
+                        React.createElement(ViewGridIcon, null)),
+                    "Unfreeze rows")) : null)) : null,
+            isHeader ? (React.createElement(React.Fragment, null,
+                React.createElement(DropdownMenuItem, { onClick: () => {
+                        // We have to shift the focus to note editor
+                        shouldFocusSheetRef.current = false;
+                        onRequestFormatCells?.(sheetId, activeCell, selections);
+                    } },
+                    React.createElement(DropdownLeftSlot, null,
+                        React.createElement(MdBrush, null)),
+                    "Format cells"),
+                React.createElement(DropdownMenuItem, { onClick: () => {
+                        // We have to shift the focus to note editor
+                        shouldFocusSheetRef.current = false;
+                        onRequestConditionalFormat?.(sheetId, activeCell, selections);
+                    } },
+                    React.createElement(DropdownLeftSlot, null,
+                        React.createElement(PaintBrush, null)),
+                    "Conditional format"),
+                onRequestDataValidation ? (React.createElement(DropdownMenuItem, { onClick: () => {
+                        // We have to shift the focus to note editor
+                        shouldFocusSheetRef.current = false;
+                        onRequestDataValidation?.(sheetId, activeCell, selections);
+                    } },
+                    React.createElement(DropdownLeftSlot, null,
+                        React.createElement(MdOutlineFactCheck, null)),
+                    "Data validation")) : null)) : (React.createElement(React.Fragment, null,
+                React.createElement(DropdownMenuSub, null,
+                    React.createElement(DropdownMenuSubTrigger, { disabled: readonly },
+                        React.createElement(DropdownLeftSlot, null,
+                            React.createElement(PlusIcon, null)),
+                        "Insert",
+                        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: () => {
+                                onInsertTableRow?.(activeTable, activeCell.rowIndex -
+                                    activeTable.range.startRowIndex);
+                            }, disabled: readonly },
+                            React.createElement(DropdownLeftSlot, null,
+                                React.createElement(PlusIcon, null)),
+                            "Insert table row")),
+                        React.createElement(DropdownMenuItem, { onClick: () => {
+                                onInsertTableColumn?.(activeTable, activeCell.columnIndex -
+                                    activeTable.range.startColumnIndex, Direction.Left);
+                            }, disabled: readonly },
+                            React.createElement(DropdownLeftSlot, null,
+                                React.createElement(ArrowLeftIcon, null)),
+                            "Insert table column to the left"),
+                        React.createElement(DropdownMenuItem, { onClick: () => {
+                                onInsertTableColumn?.(activeTable, activeCell.columnIndex -
+                                    activeTable.range.startColumnIndex, Direction.Right);
+                            }, disabled: readonly },
+                            React.createElement(DropdownLeftSlot, null,
+                                React.createElement(ArrowRightIcon, null)),
+                            "Insert table column 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)),
+                            "Insert ",
+                            selectedRowIndexes.length,
+                            " row above"),
+                        React.createElement(DropdownMenuItem, { onClick: () => onInsertColumn?.(sheetId, activeCell.columnIndex, selectedColumnIndexes.length), disabled: readonly },
+                            React.createElement(DropdownLeftSlot, null,
+                                React.createElement(PlusIcon, null)),
+                            "Insert ",
+                            selectedColumnIndexes.length,
+                            " column left"),
+                        React.createElement(DropdownMenuItem, { onClick: () => onInsertCellsShiftRight?.(sheetId, activeCell, selections), disabled: readonly },
+                            React.createElement(DropdownLeftSlot, null,
+                                React.createElement(PlusIcon, null)),
+                            "Insert cells and shift cells right"),
+                        React.createElement(DropdownMenuItem, { onClick: () => onInsertCellsShiftDown?.(sheetId, activeCell, selections), disabled: readonly },
+                            React.createElement(DropdownLeftSlot, null,
+                                React.createElement(PlusIcon, null)),
+                            "Insert cells and shift cells down"))))),
+                React.createElement(DropdownMenuSub, null,
+                    React.createElement(DropdownMenuSubTrigger, { disabled: readonly },
+                        React.createElement(DropdownLeftSlot, null,
+                            React.createElement(TrashIcon, null)),
+                        "Delete",
+                        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 },
+                            React.createElement(DropdownLeftSlot, null,
+                                React.createElement(TrashIcon, null)),
+                            "Delete table row")),
+                        React.createElement(DropdownMenuItem, { onClick: () => onDeleteTableColumn?.(activeTable, activeCell.columnIndex -
+                                activeTable.range.startColumnIndex), disabled: readonly },
+                            React.createElement(DropdownLeftSlot, null,
+                                React.createElement(TrashIcon, null)),
+                            "Delete table column"))) : (React.createElement(React.Fragment, null,
+                        React.createElement(DropdownMenuItem, { onClick: () => onDeleteRow?.(sheetId, selectedRowIndexes), disabled: readonly },
+                            React.createElement(DropdownLeftSlot, null,
+                                React.createElement(TrashIcon, null)),
+                            "Delete row",
+                            " ",
+                            generateMultiDimTitle(selectedRowIndexes, "x")),
+                        React.createElement(DropdownMenuItem, { onClick: () => onDeleteColumn?.(sheetId, selectedColumnIndexes), disabled: readonly },
+                            React.createElement(DropdownLeftSlot, null,
+                                React.createElement(TrashIcon, null)),
+                            "Delete column",
+                            " ",
+                            generateMultiDimTitle(selectedColumnIndexes, "y")),
+                        React.createElement(DropdownMenuItem, { onClick: () => onDeleteCellsShiftLeft?.(sheetId, activeCell, selections), disabled: readonly },
+                            React.createElement(DropdownLeftSlot, null,
+                                React.createElement(TrashIcon, null)),
+                            "Delete cells and shift cells left"),
+                        React.createElement(DropdownMenuItem, { onClick: () => onDeleteCellsShiftUp?.(sheetId, activeCell, selections), disabled: readonly },
+                            React.createElement(DropdownLeftSlot, null,
+                                React.createElement(TrashIcon, null)),
+                            "Delete cells and shift cells up"))))),
+                React.createElement(DropdownMenuSeparator, null),
+                React.createElement(DropdownMenuSub, null,
+                    React.createElement(DropdownMenuSubTrigger, { disabled: readonly },
+                        React.createElement(DropdownLeftSlot, null,
+                            React.createElement(FunnelIcon, null)),
+                        "Filter",
+                        React.createElement(DropdownRightSlot, null,
+                            React.createElement(ChevronRightIcon, null))),
+                    React.createElement(DropdownMenuSubContent, null,
+                        React.createElement(DropdownMenuItem, { onClick: () => {
+                                onFilterTableOrFilterView(sheetId, activeCell.rowIndex, activeCell.columnIndex);
+                            }, disabled: readonly },
+                            "Cell value \"",
+                            getFormattedValue(sheetId, activeCell.rowIndex, activeCell.columnIndex) ?? BLANK_LABEL,
+                            "\""))),
+                React.createElement(DropdownMenuSub, null,
+                    React.createElement(DropdownMenuSubTrigger, { disabled: readonly },
+                        React.createElement(DropdownLeftSlot, null,
+                            React.createElement(SortDownIcon, null)),
+                        "Sort",
+                        React.createElement(DropdownRightSlot, null,
+                            React.createElement(ChevronRightIcon, null))),
+                    React.createElement(DropdownMenuSubContent, null,
+                        React.createElement(DropdownMenuItem, { onClick: () => {
+                                onSortTableOrFilterView("ASCENDING");
+                            }, disabled: readonly },
+                            React.createElement(DropdownLeftSlot, null,
+                                React.createElement(SortDownIcon, null)),
+                            "Sort range A \u2192 Z"),
+                        React.createElement(DropdownMenuItem, { onClick: () => onSortTableOrFilterView("DESCENDING"), disabled: readonly },
+                            React.createElement(DropdownLeftSlot, null,
+                                React.createElement(SortUpIcon, null)),
+                            "Sort range Z \u2192 A"))),
+                activeTable ? (React.createElement(DropdownMenuSub, null,
+                    React.createElement(DropdownMenuSubTrigger, { disabled: readonly },
+                        React.createElement(DropdownLeftSlot, null,
+                            React.createElement(TableIcon, null)),
+                        "Table",
+                        React.createElement(DropdownRightSlot, null,
+                            React.createElement(ChevronRightIcon, null))),
+                    React.createElement(DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 },
+                        React.createElement(DropdownMenuItem, { onClick: () => onRemoveTable?.(activeTable), disabled: readonly }, "Convert to range"),
+                        React.createElement(DropdownMenuItem, { onClick: () => onRequestEditTable?.(activeTable), disabled: readonly }, "Edit table")))) : null,
+                activePivotTable ? (React.createElement(DropdownMenuSub, null,
+                    React.createElement(DropdownMenuSubTrigger, { disabled: readonly },
+                        React.createElement(DropdownLeftSlot, null,
+                            React.createElement(TableIcon, null)),
+                        "PivotTable",
+                        React.createElement(DropdownRightSlot, null,
+                            React.createElement(ChevronRightIcon, null))),
+                    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(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", {
+                                rowProperties: {
+                                    firstBandColor: {
+                                        theme: 1,
+                                        tint: 0.8,
+                                    },
+                                    secondBandColor: {
+                                        theme: 0,
+                                    },
+                                    headerBorder: {
+                                        top: {
+                                            width: 1,
+                                            style: "solid",
+                                            color: {
+                                                theme: 1,
+                                            },
+                                        },
+                                        bottom: {
+                                            width: 1,
+                                            style: "solid",
+                                            color: {
+                                                theme: 1,
+                                            },
+                                        },
+                                    },
+                                    footerBorder: {
+                                        bottom: {
+                                            width: 1,
+                                            style: "solid",
+                                            color: {
+                                                theme: 1,
+                                            },
+                                        },
+                                    },
+                                },
+                            });
+                        }, disabled: readonly },
+                        React.createElement(DropdownLeftSlot, null,
+                            React.createElement(TableIcon, null)),
+                        "Convert to table"),
+                    React.createElement(DropdownMenuItem, { onClick: () => {
+                            // We have to shift the focus to note editor
+                            shouldFocusSheetRef.current = false;
+                            onCreateBasicFilter?.(sheetId, activeCell, selections);
+                        }, disabled: readonly },
+                        React.createElement(DropdownLeftSlot, null,
+                            React.createElement(FunnelIcon, null)),
+                        activeBasicFilter ? "Remove filter" : "Create a filter"),
+                    React.createElement(DropdownMenuSeparator, null))),
+                React.createElement(DropdownMenuItem, { disabled: readonly, onClick: () => {
+                        // We have to shift the focus to note editor
+                        shouldFocusSheetRef.current = false;
+                        onRequestFormatCells?.(sheetId, activeCell, selections);
+                    } },
+                    React.createElement(DropdownLeftSlot, null,
+                        React.createElement(MdBrush, null)),
+                    "Format cells"),
+                React.createElement(DropdownMenuItem, { disabled: readonly, onClick: () => {
+                        // We have to shift the focus to note editor
+                        shouldFocusSheetRef.current = false;
+                        onRequestConditionalFormat?.(sheetId, activeCell, selections);
+                    } },
+                    React.createElement(DropdownLeftSlot, null,
+                        React.createElement(PaintBrush, null)),
+                    "Conditional format"),
+                onRequestDataValidation ? (React.createElement(DropdownMenuItem, { onClick: () => {
+                        // We have to shift the focus to note editor
+                        shouldFocusSheetRef.current = false;
+                        onRequestDataValidation?.(sheetId, activeCell, selections);
+                    }, disabled: readonly },
+                    React.createElement(DropdownLeftSlot, null,
+                        React.createElement(MdOutlineFactCheck, null)),
+                    "Data validation")) : null,
+                React.createElement(DropdownMenuItem, { onClick: () => {
+                        // We have to shift the focus to note editor
+                        shouldFocusSheetRef.current = false;
+                        onInsertNote?.(sheetId, activeCell);
+                    }, disabled: readonly },
+                    React.createElement(DropdownLeftSlot, null,
+                        React.createElement(ReaderIcon, null)),
+                    "Insert note"),
+                React.createElement(DropdownMenuItem, { onClick: () => {
+                        shouldFocusSheetRef.current = false;
+                        onRequestDefineNamedRange?.(sheetId, activeCell, selections);
+                    }, disabled: readonly },
+                    React.createElement(DropdownLeftSlot, null,
+                        React.createElement(PlusIcon, null)),
+                    "Define named range"))),
+            React.createElement(DropdownMenuSeparator, null),
+            React.createElement(DropdownMenuItem, { onClick: () => onRemoveDuplicates?.(sheetId, activeCell, selections), disabled: readonly },
+                React.createElement(DropdownLeftSlot, null,
+                    React.createElement(RemoveDuplicatesIcon, null)),
+                "Remove duplicates"),
+            React.createElement(DropdownMenuSub, null,
+                React.createElement(DropdownMenuSubTrigger, { disabled: readonly },
+                    React.createElement(DropdownLeftSlot, null,
+                        React.createElement(SpaceBetweenHorizontallyIcon, null)),
+                    "Split text to columns",
+                    React.createElement(DropdownRightSlot, null,
+                        React.createElement(ChevronRightIcon, null))),
+                React.createElement(DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 },
+                    React.createElement(DropdownMenuItem, { onClick: () => onSplitTextToColumns?.(sheetId, activeCell, selections, ",") }, "Comma"),
+                    React.createElement(DropdownMenuItem, { onClick: () => onSplitTextToColumns?.(sheetId, activeCell, selections, ";") }, "Semicolon"),
+                    React.createElement(DropdownMenuItem, { onClick: () => onSplitTextToColumns?.(sheetId, activeCell, selections, ".") }, "Period"),
+                    React.createElement(DropdownMenuItem, { onClick: () => onSplitTextToColumns?.(sheetId, activeCell, selections, " ") }, "Space"),
+                    React.createElement(DropdownMenuItem, { onClick: () => onSplitTextToColumns?.(sheetId, activeCell, selections, "|") }, "Pipe"))),
+            React.createElement(DropdownMenuSub, null,
+                React.createElement(DropdownMenuSubTrigger, { disabled: readonly },
+                    React.createElement(DropdownLeftSlot, null,
+                        React.createElement(DotsVerticalIcon, null)),
+                    "More cell actions",
+                    React.createElement(DropdownRightSlot, null,
+                        React.createElement(ChevronRightIcon, null))),
+                React.createElement(DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 },
+                    selections.length && !isRowHeader ? (React.createElement(React.Fragment, null,
+                        React.createElement(DropdownMenuItem, { onClick: () => onSortRange?.(sheetId, selections, "ASCENDING"), disabled: readonly }, "Sort range A \u2192 Z"),
+                        React.createElement(DropdownMenuItem, { onClick: () => onSortRange?.(sheetId, selections, "DESCENDING"), disabled: readonly }, "Sort range Z \u2192 A"))) : null,
+                    React.createElement(DropdownMenuItem, { onClick: () => {
+                            const protectedRange = getProtectedRange(sheetId, selection.range, protectedRanges ?? undefined);
+                            if (protectedRange && protectedRange.protectedRangeId) {
+                                onUnProtectRange?.(sheetId, protectedRange.protectedRangeId);
+                            }
+                            else {
+                                onProtectRange?.(sheetId, activeCell, selections);
+                            }
+                        } }, isProtectedRange(sheetId, selection.range, protectedRanges)
+                        ? "Unlock range"
+                        : "Protect range"))))));
+};

package/dist/esm/components/context-menu/menu.d.ts

@@ -0,0 +1,10 @@
+import type { FC } from "react";
+import type { ReactNode } from "react";
+type ContextMenuDropdownProps = {
+    isOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children?: ReactNode;
+};
+export declare const ContextMenuDropdown: FC<ContextMenuDropdownProps>;
+export {};
+//# sourceMappingURL=menu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../components/context-menu/menu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,KAAK,wBAAwB,GAAG;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAa5D,CAAC"}

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

@@ -0,0 +1,9 @@
+import { DropdownMenu, DropdownMenuTrigger } from "@rowsncolumns/ui";
+import React from "react";
+import { StyledFakeTriggerButton } from "./style";
+export const ContextMenuDropdown = ({ children, isOpen, onOpenChange, }) => {
+    return (React.createElement(DropdownMenu, { modal: false, open: isOpen, onOpenChange: onOpenChange },
+        React.createElement(DropdownMenuTrigger, { asChild: true },
+            React.createElement(StyledFakeTriggerButton, null)),
+        children));
+};

package/dist/esm/components/context-menu/style.d.ts

@@ -0,0 +1,6 @@
+import { Stack } from "@rowsncolumns/ui";
+import type { ComponentProps } from "react";
+import React from "react";
+export declare const StyledContextMenuWrapper: ({ className, ...props }: ComponentProps<typeof Stack>) => React.JSX.Element;
+export declare const StyledFakeTriggerButton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=style.d.ts.map

package/dist/esm/components/context-menu/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../components/context-menu/style.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,wBAAwB,GAAI,yBAGtC,cAAc,CAAC,OAAO,KAAK,CAAC,sBAE9B,CAAC;AAEF,eAAO,MAAM,uBAAuB,kLAclC,CAAC"}

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

@@ -0,0 +1,7 @@
+import { cn, Stack } from "@rowsncolumns/ui";
+import React from "react";
+export const StyledContextMenuWrapper = ({ className, ...props }) => (React.createElement(Stack, { className: cn("absolute left-0 top-0", className), ...props }));
+export const StyledFakeTriggerButton = React.forwardRef(({ className, ...props }, ref) => {
+    return (React.createElement("button", { ref: ref, className: cn("absolute left-0 top-0 w-0 h-0 overflow-hidden m-0 p-0 border-none bg-transparent shadow-none", className), ...props }));
+});
+StyledFakeTriggerButton.displayName = "StyledFakeTriggerButton";