@rowsncolumns/spreadsheet 10.2.68

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

@@ -0,0 +1,666 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContextMenu = void 0;
+var tslib_1 = require("tslib");
+var grid_1 = require("@rowsncolumns/grid");
+var icons_1 = require("@rowsncolumns/icons");
+var ui_1 = require("@rowsncolumns/ui");
+var utils_1 = require("@rowsncolumns/utils");
+var react_1 = tslib_1.__importStar(require("react"));
+var validation_1 = require("../../api/validation");
+var atoms_1 = require("../../atoms");
+var config_1 = require("../../config");
+var helpers_1 = require("../../helpers");
+var ContextMenu = function (_a) {
+    var _b;
+    var isRowHeader = _a.isRowHeader, isColumnHeader = _a.isColumnHeader, activeCell = _a.activeCell, selections = _a.selections, basicFilter = _a.basicFilter, isTableHeader = _a.isTableHeader, onClearContents = _a.onClearContents, onHideColumn = _a.onHideColumn, onHideRow = _a.onHideRow, onGroupRows = _a.onGroupRows, onUngroupRows = _a.onUngroupRows, onGroupColumns = _a.onGroupColumns, onUngroupColumns = _a.onUngroupColumns, onDeleteRow = _a.onDeleteRow, onDeleteColumn = _a.onDeleteColumn, onInsertColumn = _a.onInsertColumn, onInsertRow = _a.onInsertRow, onInsertCellsShiftDown = _a.onInsertCellsShiftDown, onInsertCellsShiftRight = _a.onInsertCellsShiftRight, onDeleteCellsShiftLeft = _a.onDeleteCellsShiftLeft, onDeleteCellsShiftUp = _a.onDeleteCellsShiftUp, onFreezeRow = _a.onFreezeRow, onFreezeColumn = _a.onFreezeColumn, onCopy = _a.onCopy, onCut = _a.onCut, onPaste = _a.onPaste, onInsertNote = _a.onInsertNote, onProtectRange = _a.onProtectRange, onUnProtectRange = _a.onUnProtectRange, onSortRange = _a.onSortRange, onSortColumn = _a.onSortColumn, onRequestDefineNamedRange = _a.onRequestDefineNamedRange, onRequestResize = _a.onRequestResize, onRequestEditTable = _a.onRequestEditTable, onRequestEditPivotTable = _a.onRequestEditPivotTable, onRequestDeletePivotTable = _a.onRequestDeletePivotTable, onPivotDrillDown = _a.onPivotDrillDown, onRequestFormatCells = _a.onRequestFormatCells, onRequestConditionalFormat = _a.onRequestConditionalFormat, onRequestDataValidation = _a.onRequestDataValidation, onRemoveTable = _a.onRemoveTable, onClearFormatting = _a.onClearFormatting, onCreateTable = _a.onCreateTable, onCreateBasicFilter = _a.onCreateBasicFilter, onFilterTable = _a.onFilterTable, onSortTable = _a.onSortTable, getFormattedValuesFromRange = _a.getFormattedValuesFromRange, focusSheet = _a.focusSheet, isSheetFocused = _a.isSheetFocused, getFormattedValue = _a.getFormattedValue, onInsertTableColumn = _a.onInsertTableColumn, onDeleteTableColumn = _a.onDeleteTableColumn, onInsertTableRow = _a.onInsertTableRow, onDeleteTableRow = _a.onDeleteTableRow, onSplitTextToColumns = _a.onSplitTextToColumns, onRemoveDuplicates = _a.onRemoveDuplicates, isHiddenColumn = _a.isHiddenColumn, isHiddenRow = _a.isHiddenRow, onShowColumn = _a.onShowColumn, onShowRow = _a.onShowRow, tables = _a.tables, pivotTables = _a.pivotTables, protectedRanges = _a.protectedRanges, sheetId = _a.sheetId, frozenRows = _a.frozenRows, frozenColumns = _a.frozenColumns, selectedRowHeadersIds = _a.selectedRowHeadersIds, selectedColumnHeadersIds = _a.selectedColumnHeadersIds, _c = _a.readonly, readonly = _c === void 0 ? false : _c, onAddQuickEdit = _a.onAddQuickEdit, enableMagicFill = _a.enableMagicFill;
+    var isHeader = isColumnHeader || isRowHeader;
+    var shouldFocusSheetRef = (0, react_1.useRef)(true);
+    var multiColumnTitle = (0, helpers_1.generateMultiDimTitle)(selectedColumnHeadersIds, "y");
+    var selection = selections.length
+        ? selections[0]
+        : (0, grid_1.selectionFromActiveCell)(activeCell)[0];
+    var multiRowTitle = (0, helpers_1.generateMultiDimTitle)(selectedRowHeadersIds, "x");
+    var selectedRowIndexes = (0, helpers_1.createArrayRange)(selection.range.startRowIndex, selection.range.endRowIndex);
+    var selectedColumnIndexes = (0, helpers_1.createArrayRange)(selection.range.startColumnIndex, selection.range.endColumnIndex);
+    var hiddenColumns = selectedColumnIndexes.filter(function (index) {
+        return isHiddenColumn(index);
+    });
+    var hiddenRows = selectedRowIndexes.filter(function (index) { return isHiddenRow(index); });
+    // Check for active table
+    var activeTable = (0, react_1.useMemo)(function () { return tables === null || tables === void 0 ? void 0 : tables.find(function (_a) {
+        var range = _a.range;
+        return (0, grid_1.isCellWithinBounds)(activeCell, range);
+    }); }, [tables, activeCell]);
+    // Check for active pivot table
+    var activePivotTable = (0, react_1.useMemo)(function () {
+        return pivotTables === null || pivotTables === void 0 ? void 0 : pivotTables.find(function (_a) {
+            var range = _a.pivotRange;
+            return (0, grid_1.isCellWithinBounds)(activeCell, range);
+        });
+    }, [pivotTables, activeCell]);
+    // Check if the active cell is table header
+    var isActiveCellTableHeader = isTableHeader(activeCell.rowIndex, activeCell.columnIndex);
+    // Basic filter
+    var activeBasicFilter = basicFilter && (0, grid_1.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).
+    var lastSelectedColumnIndex = selectedColumnHeadersIds.reduce(function (m, v) { return (v > m ? v : m); }, -Infinity);
+    var lastSelectedRowIndex = selectedRowHeadersIds.reduce(function (m, v) { return (v > m ? v : m); }, -Infinity);
+    // Get contentful range
+    var getContentfulRangeAroundCell = (0, atoms_1.useGetContentfulRangeAroundCell)();
+    // Sort table or filter
+    var onSortTableOrFilterView = (0, react_1.useCallback)(function (direction) {
+        // Found a table
+        if (activeTable) {
+            onSortTable === null || onSortTable === void 0 ? void 0 : onSortTable(sheetId, activeTable, activeCell.columnIndex - activeTable.range.startColumnIndex, direction);
+        }
+        else if (activeBasicFilter) {
+            // Inside a basic filter
+            onSortTable === null || onSortTable === void 0 ? void 0 : onSortTable(sheetId, activeBasicFilter, activeCell.columnIndex - activeBasicFilter.range.startColumnIndex, direction);
+        }
+        else {
+            // User has made some selections
+            if (selections.length) {
+                // Sort range
+                onSortRange === null || onSortRange === void 0 ? void 0 : onSortRange(sheetId, selections, direction);
+            }
+            else {
+                // Find contentful cell around
+                var range = getContentfulRangeAroundCell === null || getContentfulRangeAroundCell === void 0 ? void 0 : getContentfulRangeAroundCell(sheetId, activeCell);
+                if (range) {
+                    onSortRange === null || onSortRange === void 0 ? void 0 : onSortRange(sheetId, [{ range: range }], direction);
+                }
+            }
+        }
+    }, [
+        activeTable,
+        activeBasicFilter,
+        sheetId,
+        activeCell,
+        selections,
+        onSortTable,
+        onSortRange,
+        getContentfulRangeAroundCell,
+    ]);
+    // Filter table or filter view
+    var onFilterTableOrFilterView = (0, react_1.useCallback)(function (sheetId, rowIndex, columnIndex) {
+        var _a;
+        // Check if there a active basic filter
+        var cellValue = (_a = getFormattedValue(sheetId, rowIndex, columnIndex)) !== null && _a !== void 0 ? _a : config_1.BLANK_LABEL;
+        // Get hidden values
+        var getVisibleValuesFromFilterView = function (filterRange, cellValue) {
+            var range = tslib_1.__assign(tslib_1.__assign({}, filterRange), { startRowIndex: filterRange.startRowIndex + 1, startColumnIndex: columnIndex, endColumnIndex: columnIndex });
+            return getFormattedValuesFromRange(sheetId, [{ range: range }]).filter(function (value) { return value === cellValue; });
+        };
+        // We need to set all other values as hiddenValues
+        if (activeTable) {
+            onFilterTable === null || onFilterTable === void 0 ? void 0 : onFilterTable(sheetId, activeTable, columnIndex - activeTable.range.startColumnIndex, undefined, undefined, getVisibleValuesFromFilterView(activeTable.range, cellValue));
+        }
+        else if (activeBasicFilter) {
+            onFilterTable === null || onFilterTable === void 0 ? void 0 : onFilterTable(sheetId, activeBasicFilter, columnIndex - activeBasicFilter.range.startColumnIndex, undefined, undefined, getVisibleValuesFromFilterView(activeBasicFilter.range, cellValue));
+        }
+        else {
+            // Create a basic filter
+            var range = getContentfulRangeAroundCell === null || getContentfulRangeAroundCell === void 0 ? void 0 : getContentfulRangeAroundCell(sheetId, activeCell);
+            if (range) {
+                onCreateBasicFilter === null || onCreateBasicFilter === void 0 ? void 0 : onCreateBasicFilter(sheetId, activeCell, selections, {
+                    filterSpecs: [
+                        {
+                            columnIndex: 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_1.default.createElement(ui_1.DropdownMenuPortal, null,
+        react_1.default.createElement(ui_1.DropdownMenuContent, { align: "start", sideOffset: 0, onCloseAutoFocus: function (event) {
+                event.preventDefault();
+                if (shouldFocusSheetRef.current && !isSheetFocused()) {
+                    focusSheet();
+                }
+            }, onInteractOutside: function () {
+                shouldFocusSheetRef.current = false;
+            }, onMouseMove: function (e) { return e.stopPropagation(); } },
+            react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: onCut, disabled: readonly },
+                react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                    react_1.default.createElement(icons_1.ScissorsIcon, null)),
+                "Cut ",
+                react_1.default.createElement(ui_1.DropdownRightSlot, null, "\u2318X")),
+            react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: onCopy },
+                react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                    react_1.default.createElement(icons_1.CopyIcon, null)),
+                "Copy ",
+                react_1.default.createElement(ui_1.DropdownRightSlot, null, "\u2318C")),
+            react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () { return onPaste === null || onPaste === void 0 ? void 0 : onPaste(); }, disabled: readonly },
+                react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                    react_1.default.createElement(icons_1.ClipboardIcon, null)),
+                "Paste ",
+                react_1.default.createElement(ui_1.DropdownRightSlot, null, "\u2318V")),
+            react_1.default.createElement(ui_1.DropdownMenuSub, null,
+                react_1.default.createElement(ui_1.DropdownMenuSubTrigger, { disabled: readonly },
+                    react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                        react_1.default.createElement(icons_1.ClipboardIcon, null)),
+                    "Paste special",
+                    react_1.default.createElement(ui_1.DropdownRightSlot, null,
+                        react_1.default.createElement(icons_1.ChevronRightIcon, null))),
+                react_1.default.createElement(ui_1.DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 },
+                    react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () { return onPaste === null || onPaste === void 0 ? void 0 : onPaste("Value"); } }, "Values only"),
+                    react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () { return onPaste === null || onPaste === void 0 ? void 0 : onPaste("Formatting"); } }, "Formatting only"),
+                    react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () { return onPaste === null || onPaste === void 0 ? void 0 : onPaste("Formula"); } }, "Formula"),
+                    react_1.default.createElement(ui_1.DropdownMenuSeparator, null),
+                    react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () { return onPaste === null || onPaste === void 0 ? void 0 : onPaste("Transposed"); } }, "Transposed"))),
+            enableMagicFill ? (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(ui_1.DropdownMenuSeparator, null),
+                react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                        return onAddQuickEdit(tslib_1.__assign(tslib_1.__assign({}, selection.range), { sheetId: sheetId }));
+                    }, disabled: readonly },
+                    react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                        react_1.default.createElement(icons_1.WandIcon, null)),
+                    "AI Quick Edit ",
+                    react_1.default.createElement(ui_1.DropdownRightSlot, null, "\u2318J")))) : null,
+            react_1.default.createElement(ui_1.DropdownMenuSub, null,
+                react_1.default.createElement(ui_1.DropdownMenuSubTrigger, { disabled: readonly },
+                    react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                        react_1.default.createElement(icons_1.Cross1Icon, null)),
+                    "Clear",
+                    react_1.default.createElement(ui_1.DropdownRightSlot, null,
+                        react_1.default.createElement(icons_1.ChevronRightIcon, null))),
+                react_1.default.createElement(ui_1.DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 },
+                    react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                            return onClearFormatting === null || onClearFormatting === void 0 ? void 0 : onClearFormatting(sheetId, activeCell, selections);
+                        }, disabled: readonly }, "Clear formats"),
+                    react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () { return onClearContents === null || onClearContents === void 0 ? void 0 : onClearContents(sheetId, activeCell, selections); }, disabled: readonly }, "Clear contents"))),
+            react_1.default.createElement(ui_1.DropdownMenuSeparator, null),
+            isColumnHeader ? (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                        return onInsertColumn === null || onInsertColumn === void 0 ? void 0 : onInsertColumn(sheetId, activeCell.columnIndex, selectedColumnHeadersIds.length);
+                    }, disabled: readonly },
+                    react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                        react_1.default.createElement(icons_1.PlusIcon, null)),
+                    "Insert ",
+                    selectedColumnHeadersIds.length,
+                    " column left"),
+                react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                        return onInsertColumn === null || onInsertColumn === void 0 ? void 0 : onInsertColumn(sheetId, activeCell.columnIndex + selectedColumnHeadersIds.length, selectedColumnHeadersIds.length);
+                    }, disabled: readonly },
+                    react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                        react_1.default.createElement(icons_1.PlusIcon, null)),
+                    "Insert ",
+                    selectedColumnHeadersIds.length,
+                    " column right"),
+                react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                        return onDeleteColumn === null || onDeleteColumn === void 0 ? void 0 : onDeleteColumn(sheetId, selectedColumnHeadersIds);
+                    }, disabled: readonly },
+                    react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                        react_1.default.createElement(icons_1.TrashIcon, null)),
+                    "Delete column ",
+                    multiColumnTitle),
+                react_1.default.createElement(ui_1.DropdownMenuItem, { disabled: !onHideColumn, onClick: function () { return onHideColumn === null || onHideColumn === void 0 ? void 0 : onHideColumn(sheetId, selectedColumnHeadersIds); } },
+                    react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                        react_1.default.createElement(icons_1.EyeNoneIcon, null)),
+                    "Hide column ",
+                    multiColumnTitle),
+                hiddenColumns.length ? (react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () { return onShowColumn === null || onShowColumn === void 0 ? void 0 : onShowColumn(sheetId, hiddenColumns); } },
+                    react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                        react_1.default.createElement(icons_1.EyeOpenIcon, null)),
+                    "Unhide")) : null,
+                onGroupColumns ? (react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                        return onGroupColumns === null || onGroupColumns === void 0 ? void 0 : onGroupColumns(sheetId, selectedColumnHeadersIds);
+                    } },
+                    react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                        react_1.default.createElement(icons_1.ChevronRightIcon, null)),
+                    "Group column ",
+                    multiColumnTitle)) : null,
+                onUngroupColumns ? (react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                        return onUngroupColumns === null || onUngroupColumns === void 0 ? void 0 : onUngroupColumns(sheetId, selectedColumnHeadersIds);
+                    } },
+                    react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                        react_1.default.createElement(icons_1.ChevronRightIcon, null)),
+                    "Ungroup column ",
+                    multiColumnTitle)) : null,
+                react_1.default.createElement(ui_1.DropdownMenuItem, { disabled: !onRequestResize, onClick: function () {
+                        return onRequestResize === null || onRequestResize === void 0 ? void 0 : onRequestResize(sheetId, selectedColumnHeadersIds, "y");
+                    } },
+                    react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                        react_1.default.createElement(icons_1.SizeIcon, null)),
+                    "Resize column ",
+                    multiColumnTitle),
+                react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () { return onFreezeColumn === null || onFreezeColumn === void 0 ? void 0 : onFreezeColumn(sheetId, lastSelectedColumnIndex); } },
+                    react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                        react_1.default.createElement(icons_1.ViewGridIcon, null)),
+                    "Freeze up to Column ",
+                    (0, utils_1.number2Alpha)(lastSelectedColumnIndex - 1)),
+                frozenColumns > 1 ? (react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () { return onFreezeColumn === null || onFreezeColumn === void 0 ? void 0 : onFreezeColumn(sheetId, 0); } },
+                    react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                        react_1.default.createElement(icons_1.ViewGridIcon, null)),
+                    "Unfreeze columns")) : null,
+                react_1.default.createElement(ui_1.DropdownMenuSeparator, null),
+                react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                        return onSortColumn === null || onSortColumn === void 0 ? void 0 : onSortColumn(sheetId, activeCell.columnIndex, "ASCENDING");
+                    }, disabled: readonly },
+                    react_1.default.createElement(ui_1.DropdownLeftSlot, { className: "text-base leading-4" },
+                        react_1.default.createElement(icons_1.SortDownIcon, null)),
+                    "Sort sheet A to Z"),
+                react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                        return onSortColumn === null || onSortColumn === void 0 ? void 0 : onSortColumn(sheetId, activeCell.columnIndex, "DESCENDING");
+                    }, disabled: readonly },
+                    react_1.default.createElement(ui_1.DropdownLeftSlot, { className: "text-base leading-4" },
+                        react_1.default.createElement(icons_1.SortUpIcon, null)),
+                    "Sort sheet Z to A"))) : null,
+            isRowHeader ? (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                        return onInsertRow === null || onInsertRow === void 0 ? void 0 : onInsertRow(sheetId, activeCell.rowIndex, selectedRowHeadersIds.length);
+                    }, disabled: readonly },
+                    react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                        react_1.default.createElement(icons_1.PlusIcon, null)),
+                    "Insert ",
+                    selectedRowHeadersIds.length,
+                    " row above"),
+                react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                        return onInsertRow === null || onInsertRow === void 0 ? void 0 : onInsertRow(sheetId, activeCell.rowIndex + selectedRowHeadersIds.length, selectedRowHeadersIds.length);
+                    }, disabled: readonly },
+                    react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                        react_1.default.createElement(icons_1.PlusIcon, null)),
+                    "Insert ",
+                    selectedRowHeadersIds.length,
+                    " row below"),
+                react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () { return onDeleteRow === null || onDeleteRow === void 0 ? void 0 : onDeleteRow(sheetId, selectedRowHeadersIds); }, disabled: readonly },
+                    react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                        react_1.default.createElement(icons_1.TrashIcon, null)),
+                    "Delete row ",
+                    multiRowTitle),
+                react_1.default.createElement(ui_1.DropdownMenuItem, { disabled: !onHideRow, onClick: function () { return onHideRow === null || onHideRow === void 0 ? void 0 : onHideRow(sheetId, selectedRowHeadersIds); } },
+                    react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                        react_1.default.createElement(icons_1.EyeNoneIcon, null)),
+                    "Hide row ",
+                    multiRowTitle),
+                hiddenRows.length ? (react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () { return onShowRow === null || onShowRow === void 0 ? void 0 : onShowRow(sheetId, hiddenRows); } },
+                    react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                        react_1.default.createElement(icons_1.EyeOpenIcon, null)),
+                    "Unhide")) : null,
+                onGroupRows ? (react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                        return onGroupRows === null || onGroupRows === void 0 ? void 0 : onGroupRows(sheetId, selectedRowHeadersIds);
+                    } },
+                    react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                        react_1.default.createElement(icons_1.ChevronRightIcon, null)),
+                    "Group row ",
+                    multiRowTitle)) : null,
+                onUngroupRows ? (react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                        return onUngroupRows === null || onUngroupRows === void 0 ? void 0 : onUngroupRows(sheetId, selectedRowHeadersIds);
+                    } },
+                    react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                        react_1.default.createElement(icons_1.ChevronRightIcon, null)),
+                    "Ungroup row ",
+                    multiRowTitle)) : null,
+                react_1.default.createElement(ui_1.DropdownMenuItem, { disabled: !onRequestResize, onClick: function () {
+                        return onRequestResize === null || onRequestResize === void 0 ? void 0 : onRequestResize(sheetId, selectedRowHeadersIds, "x");
+                    } },
+                    react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                        react_1.default.createElement(icons_1.SizeIcon, null)),
+                    "Resize row ",
+                    multiRowTitle),
+                react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () { return onFreezeRow === null || onFreezeRow === void 0 ? void 0 : onFreezeRow(sheetId, lastSelectedRowIndex); } },
+                    react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                        react_1.default.createElement(icons_1.ViewGridIcon, null)),
+                    "Freeze up to Row ",
+                    lastSelectedRowIndex),
+                frozenRows > 1 ? (react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () { return onFreezeRow === null || onFreezeRow === void 0 ? void 0 : onFreezeRow(sheetId, 0); } },
+                    react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                        react_1.default.createElement(icons_1.ViewGridIcon, null)),
+                    "Unfreeze rows")) : null)) : null,
+            isHeader ? (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                        // We have to shift the focus to note editor
+                        shouldFocusSheetRef.current = false;
+                        onRequestFormatCells === null || onRequestFormatCells === void 0 ? void 0 : onRequestFormatCells(sheetId, activeCell, selections);
+                    } },
+                    react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                        react_1.default.createElement(icons_1.MdBrush, null)),
+                    "Format cells"),
+                react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                        // We have to shift the focus to note editor
+                        shouldFocusSheetRef.current = false;
+                        onRequestConditionalFormat === null || onRequestConditionalFormat === void 0 ? void 0 : onRequestConditionalFormat(sheetId, activeCell, selections);
+                    } },
+                    react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                        react_1.default.createElement(icons_1.PaintBrush, null)),
+                    "Conditional format"),
+                onRequestDataValidation ? (react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                        // We have to shift the focus to note editor
+                        shouldFocusSheetRef.current = false;
+                        onRequestDataValidation === null || onRequestDataValidation === void 0 ? void 0 : onRequestDataValidation(sheetId, activeCell, selections);
+                    } },
+                    react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                        react_1.default.createElement(icons_1.MdOutlineFactCheck, null)),
+                    "Data validation")) : null)) : (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(ui_1.DropdownMenuSub, null,
+                    react_1.default.createElement(ui_1.DropdownMenuSubTrigger, { disabled: readonly },
+                        react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                            react_1.default.createElement(icons_1.PlusIcon, null)),
+                        "Insert",
+                        react_1.default.createElement(ui_1.DropdownRightSlot, null,
+                            react_1.default.createElement(icons_1.ChevronRightIcon, null))),
+                    react_1.default.createElement(ui_1.DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 }, activeTable ? (react_1.default.createElement(react_1.default.Fragment, null,
+                        isActiveCellTableHeader ? null : (react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                                onInsertTableRow === null || onInsertTableRow === void 0 ? void 0 : onInsertTableRow(activeTable, activeCell.rowIndex -
+                                    activeTable.range.startRowIndex);
+                            }, disabled: readonly },
+                            react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                                react_1.default.createElement(icons_1.PlusIcon, null)),
+                            "Insert table row")),
+                        react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                                onInsertTableColumn === null || onInsertTableColumn === void 0 ? void 0 : onInsertTableColumn(activeTable, activeCell.columnIndex -
+                                    activeTable.range.startColumnIndex, grid_1.Direction.Left);
+                            }, disabled: readonly },
+                            react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                                react_1.default.createElement(icons_1.ArrowLeftIcon, null)),
+                            "Insert table column to the left"),
+                        react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                                onInsertTableColumn === null || onInsertTableColumn === void 0 ? void 0 : onInsertTableColumn(activeTable, activeCell.columnIndex -
+                                    activeTable.range.startColumnIndex, grid_1.Direction.Right);
+                            }, disabled: readonly },
+                            react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                                react_1.default.createElement(icons_1.ArrowRightIcon, null)),
+                            "Insert table column to the right"))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                                return onInsertRow === null || onInsertRow === void 0 ? void 0 : onInsertRow(sheetId, activeCell.rowIndex, selectedRowIndexes.length);
+                            }, disabled: readonly },
+                            react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                                react_1.default.createElement(icons_1.PlusIcon, null)),
+                            "Insert ",
+                            selectedRowIndexes.length,
+                            " row above"),
+                        react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                                return onInsertColumn === null || onInsertColumn === void 0 ? void 0 : onInsertColumn(sheetId, activeCell.columnIndex, selectedColumnIndexes.length);
+                            }, disabled: readonly },
+                            react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                                react_1.default.createElement(icons_1.PlusIcon, null)),
+                            "Insert ",
+                            selectedColumnIndexes.length,
+                            " column left"),
+                        react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                                return onInsertCellsShiftRight === null || onInsertCellsShiftRight === void 0 ? void 0 : onInsertCellsShiftRight(sheetId, activeCell, selections);
+                            }, disabled: readonly },
+                            react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                                react_1.default.createElement(icons_1.PlusIcon, null)),
+                            "Insert cells and shift cells right"),
+                        react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                                return onInsertCellsShiftDown === null || onInsertCellsShiftDown === void 0 ? void 0 : onInsertCellsShiftDown(sheetId, activeCell, selections);
+                            }, disabled: readonly },
+                            react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                                react_1.default.createElement(icons_1.PlusIcon, null)),
+                            "Insert cells and shift cells down"))))),
+                react_1.default.createElement(ui_1.DropdownMenuSub, null,
+                    react_1.default.createElement(ui_1.DropdownMenuSubTrigger, { disabled: readonly },
+                        react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                            react_1.default.createElement(icons_1.TrashIcon, null)),
+                        "Delete",
+                        react_1.default.createElement(ui_1.DropdownRightSlot, null,
+                            react_1.default.createElement(icons_1.ChevronRightIcon, null))),
+                    react_1.default.createElement(ui_1.DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 }, activeTable ? (react_1.default.createElement(react_1.default.Fragment, null,
+                        isActiveCellTableHeader ? null : (react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                                return onDeleteTableRow === null || onDeleteTableRow === void 0 ? void 0 : onDeleteTableRow(activeTable, selectedRowIndexes);
+                            }, disabled: readonly },
+                            react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                                react_1.default.createElement(icons_1.TrashIcon, null)),
+                            "Delete table row")),
+                        react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                                return onDeleteTableColumn === null || onDeleteTableColumn === void 0 ? void 0 : onDeleteTableColumn(activeTable, activeCell.columnIndex -
+                                    activeTable.range.startColumnIndex);
+                            }, disabled: readonly },
+                            react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                                react_1.default.createElement(icons_1.TrashIcon, null)),
+                            "Delete table column"))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () { return onDeleteRow === null || onDeleteRow === void 0 ? void 0 : onDeleteRow(sheetId, selectedRowIndexes); }, disabled: readonly },
+                            react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                                react_1.default.createElement(icons_1.TrashIcon, null)),
+                            "Delete row",
+                            " ",
+                            (0, helpers_1.generateMultiDimTitle)(selectedRowIndexes, "x")),
+                        react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                                return onDeleteColumn === null || onDeleteColumn === void 0 ? void 0 : onDeleteColumn(sheetId, selectedColumnIndexes);
+                            }, disabled: readonly },
+                            react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                                react_1.default.createElement(icons_1.TrashIcon, null)),
+                            "Delete column",
+                            " ",
+                            (0, helpers_1.generateMultiDimTitle)(selectedColumnIndexes, "y")),
+                        react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                                return onDeleteCellsShiftLeft === null || onDeleteCellsShiftLeft === void 0 ? void 0 : onDeleteCellsShiftLeft(sheetId, activeCell, selections);
+                            }, disabled: readonly },
+                            react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                                react_1.default.createElement(icons_1.TrashIcon, null)),
+                            "Delete cells and shift cells left"),
+                        react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                                return onDeleteCellsShiftUp === null || onDeleteCellsShiftUp === void 0 ? void 0 : onDeleteCellsShiftUp(sheetId, activeCell, selections);
+                            }, disabled: readonly },
+                            react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                                react_1.default.createElement(icons_1.TrashIcon, null)),
+                            "Delete cells and shift cells up"))))),
+                react_1.default.createElement(ui_1.DropdownMenuSeparator, null),
+                react_1.default.createElement(ui_1.DropdownMenuSub, null,
+                    react_1.default.createElement(ui_1.DropdownMenuSubTrigger, { disabled: readonly },
+                        react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                            react_1.default.createElement(icons_1.FunnelIcon, null)),
+                        "Filter",
+                        react_1.default.createElement(ui_1.DropdownRightSlot, null,
+                            react_1.default.createElement(icons_1.ChevronRightIcon, null))),
+                    react_1.default.createElement(ui_1.DropdownMenuSubContent, null,
+                        react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                                onFilterTableOrFilterView(sheetId, activeCell.rowIndex, activeCell.columnIndex);
+                            }, disabled: readonly },
+                            "Cell value \"", (_b = getFormattedValue(sheetId, activeCell.rowIndex, activeCell.columnIndex)) !== null && _b !== void 0 ? _b : config_1.BLANK_LABEL,
+                            "\""))),
+                react_1.default.createElement(ui_1.DropdownMenuSub, null,
+                    react_1.default.createElement(ui_1.DropdownMenuSubTrigger, { disabled: readonly },
+                        react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                            react_1.default.createElement(icons_1.SortDownIcon, null)),
+                        "Sort",
+                        react_1.default.createElement(ui_1.DropdownRightSlot, null,
+                            react_1.default.createElement(icons_1.ChevronRightIcon, null))),
+                    react_1.default.createElement(ui_1.DropdownMenuSubContent, null,
+                        react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                                onSortTableOrFilterView("ASCENDING");
+                            }, disabled: readonly },
+                            react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                                react_1.default.createElement(icons_1.SortDownIcon, null)),
+                            "Sort range A \u2192 Z"),
+                        react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () { return onSortTableOrFilterView("DESCENDING"); }, disabled: readonly },
+                            react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                                react_1.default.createElement(icons_1.SortUpIcon, null)),
+                            "Sort range Z \u2192 A"))),
+                activeTable ? (react_1.default.createElement(ui_1.DropdownMenuSub, null,
+                    react_1.default.createElement(ui_1.DropdownMenuSubTrigger, { disabled: readonly },
+                        react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                            react_1.default.createElement(icons_1.TableIcon, null)),
+                        "Table",
+                        react_1.default.createElement(ui_1.DropdownRightSlot, null,
+                            react_1.default.createElement(icons_1.ChevronRightIcon, null))),
+                    react_1.default.createElement(ui_1.DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 },
+                        react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () { return onRemoveTable === null || onRemoveTable === void 0 ? void 0 : onRemoveTable(activeTable); }, disabled: readonly }, "Convert to range"),
+                        react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () { return onRequestEditTable === null || onRequestEditTable === void 0 ? void 0 : onRequestEditTable(activeTable); }, disabled: readonly }, "Edit table")))) : null,
+                activePivotTable ? (react_1.default.createElement(ui_1.DropdownMenuSub, null,
+                    react_1.default.createElement(ui_1.DropdownMenuSubTrigger, { disabled: readonly },
+                        react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                            react_1.default.createElement(icons_1.TableIcon, null)),
+                        "PivotTable",
+                        react_1.default.createElement(ui_1.DropdownRightSlot, null,
+                            react_1.default.createElement(icons_1.ChevronRightIcon, null))),
+                    react_1.default.createElement(ui_1.DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 },
+                        onPivotDrillDown ? (react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                                return onPivotDrillDown === null || onPivotDrillDown === void 0 ? void 0 : onPivotDrillDown(activePivotTable.pivotId, activeCell.rowIndex, activeCell.columnIndex);
+                            } }, "Drill Down")) : null,
+                        react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () { return onRequestEditPivotTable === null || onRequestEditPivotTable === void 0 ? void 0 : onRequestEditPivotTable(activePivotTable); }, disabled: readonly }, "Edit PivotTable"),
+                        react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                                return onRequestDeletePivotTable === null || onRequestDeletePivotTable === void 0 ? void 0 : onRequestDeletePivotTable(activePivotTable.pivotId);
+                            }, disabled: readonly }, "Delete PivotTable")))) : null,
+                react_1.default.createElement(ui_1.DropdownMenuSeparator, null),
+                activeTable ? null : (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                            // We have to shift the focus to note editor
+                            shouldFocusSheetRef.current = false;
+                            onCreateTable === null || onCreateTable === void 0 ? void 0 : 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_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                            react_1.default.createElement(icons_1.TableIcon, null)),
+                        "Convert to table"),
+                    react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                            // We have to shift the focus to note editor
+                            shouldFocusSheetRef.current = false;
+                            onCreateBasicFilter === null || onCreateBasicFilter === void 0 ? void 0 : onCreateBasicFilter(sheetId, activeCell, selections);
+                        }, disabled: readonly },
+                        react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                            react_1.default.createElement(icons_1.FunnelIcon, null)),
+                        activeBasicFilter ? "Remove filter" : "Create a filter"),
+                    react_1.default.createElement(ui_1.DropdownMenuSeparator, null))),
+                react_1.default.createElement(ui_1.DropdownMenuItem, { disabled: readonly, onClick: function () {
+                        // We have to shift the focus to note editor
+                        shouldFocusSheetRef.current = false;
+                        onRequestFormatCells === null || onRequestFormatCells === void 0 ? void 0 : onRequestFormatCells(sheetId, activeCell, selections);
+                    } },
+                    react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                        react_1.default.createElement(icons_1.MdBrush, null)),
+                    "Format cells"),
+                react_1.default.createElement(ui_1.DropdownMenuItem, { disabled: readonly, onClick: function () {
+                        // We have to shift the focus to note editor
+                        shouldFocusSheetRef.current = false;
+                        onRequestConditionalFormat === null || onRequestConditionalFormat === void 0 ? void 0 : onRequestConditionalFormat(sheetId, activeCell, selections);
+                    } },
+                    react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                        react_1.default.createElement(icons_1.PaintBrush, null)),
+                    "Conditional format"),
+                onRequestDataValidation ? (react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                        // We have to shift the focus to note editor
+                        shouldFocusSheetRef.current = false;
+                        onRequestDataValidation === null || onRequestDataValidation === void 0 ? void 0 : onRequestDataValidation(sheetId, activeCell, selections);
+                    }, disabled: readonly },
+                    react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                        react_1.default.createElement(icons_1.MdOutlineFactCheck, null)),
+                    "Data validation")) : null,
+                react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                        // We have to shift the focus to note editor
+                        shouldFocusSheetRef.current = false;
+                        onInsertNote === null || onInsertNote === void 0 ? void 0 : onInsertNote(sheetId, activeCell);
+                    }, disabled: readonly },
+                    react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                        react_1.default.createElement(icons_1.ReaderIcon, null)),
+                    "Insert note"),
+                react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                        shouldFocusSheetRef.current = false;
+                        onRequestDefineNamedRange === null || onRequestDefineNamedRange === void 0 ? void 0 : onRequestDefineNamedRange(sheetId, activeCell, selections);
+                    }, disabled: readonly },
+                    react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                        react_1.default.createElement(icons_1.PlusIcon, null)),
+                    "Define named range"))),
+            react_1.default.createElement(ui_1.DropdownMenuSeparator, null),
+            react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () { return onRemoveDuplicates === null || onRemoveDuplicates === void 0 ? void 0 : onRemoveDuplicates(sheetId, activeCell, selections); }, disabled: readonly },
+                react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                    react_1.default.createElement(icons_1.RemoveDuplicatesIcon, null)),
+                "Remove duplicates"),
+            react_1.default.createElement(ui_1.DropdownMenuSub, null,
+                react_1.default.createElement(ui_1.DropdownMenuSubTrigger, { disabled: readonly },
+                    react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                        react_1.default.createElement(icons_1.SpaceBetweenHorizontallyIcon, null)),
+                    "Split text to columns",
+                    react_1.default.createElement(ui_1.DropdownRightSlot, null,
+                        react_1.default.createElement(icons_1.ChevronRightIcon, null))),
+                react_1.default.createElement(ui_1.DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 },
+                    react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                            return onSplitTextToColumns === null || onSplitTextToColumns === void 0 ? void 0 : onSplitTextToColumns(sheetId, activeCell, selections, ",");
+                        } }, "Comma"),
+                    react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                            return onSplitTextToColumns === null || onSplitTextToColumns === void 0 ? void 0 : onSplitTextToColumns(sheetId, activeCell, selections, ";");
+                        } }, "Semicolon"),
+                    react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                            return onSplitTextToColumns === null || onSplitTextToColumns === void 0 ? void 0 : onSplitTextToColumns(sheetId, activeCell, selections, ".");
+                        } }, "Period"),
+                    react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                            return onSplitTextToColumns === null || onSplitTextToColumns === void 0 ? void 0 : onSplitTextToColumns(sheetId, activeCell, selections, " ");
+                        } }, "Space"),
+                    react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                            return onSplitTextToColumns === null || onSplitTextToColumns === void 0 ? void 0 : onSplitTextToColumns(sheetId, activeCell, selections, "|");
+                        } }, "Pipe"))),
+            react_1.default.createElement(ui_1.DropdownMenuSub, null,
+                react_1.default.createElement(ui_1.DropdownMenuSubTrigger, { disabled: readonly },
+                    react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                        react_1.default.createElement(icons_1.DotsVerticalIcon, null)),
+                    "More cell actions",
+                    react_1.default.createElement(ui_1.DropdownRightSlot, null,
+                        react_1.default.createElement(icons_1.ChevronRightIcon, null))),
+                react_1.default.createElement(ui_1.DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 },
+                    selections.length && !isRowHeader ? (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                                return onSortRange === null || onSortRange === void 0 ? void 0 : onSortRange(sheetId, selections, "ASCENDING");
+                            }, disabled: readonly }, "Sort range A \u2192 Z"),
+                        react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                                return onSortRange === null || onSortRange === void 0 ? void 0 : onSortRange(sheetId, selections, "DESCENDING");
+                            }, disabled: readonly }, "Sort range Z \u2192 A"))) : null,
+                    react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                            var protectedRange = (0, validation_1.getProtectedRange)(sheetId, selection.range, protectedRanges !== null && protectedRanges !== void 0 ? protectedRanges : undefined);
+                            if (protectedRange && protectedRange.protectedRangeId) {
+                                onUnProtectRange === null || onUnProtectRange === void 0 ? void 0 : onUnProtectRange(sheetId, protectedRange.protectedRangeId);
+                            }
+                            else {
+                                onProtectRange === null || onProtectRange === void 0 ? void 0 : onProtectRange(sheetId, activeCell, selections);
+                            }
+                        } }, (0, validation_1.isProtectedRange)(sheetId, selection.range, protectedRanges)
+                        ? "Unlock range"
+                        : "Protect range"))))));
+};
+exports.ContextMenu = ContextMenu;