@univerjs/ui 0.21.1 → 0.22.0

package/lib/index.js

@@ -10,7 +10,7 @@ import { map as map$1, scan as scan$1, startWith as startWith$1 } from "rxjs/ope
 import { createPortal } from "react-dom";
 import localforage from "localforage";
 
-//#region \0@oxc-project+runtime@0.124.0/helpers/typeof.js
+//#region \0@oxc-project+runtime@0.129.0/helpers/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -21,7 +21,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.124.0/helpers/toPrimitive.js
+//#region \0@oxc-project+runtime@0.129.0/helpers/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -34,14 +34,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.124.0/helpers/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.129.0/helpers/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.124.0/helpers/defineProperty.js
+//#region \0@oxc-project+runtime@0.129.0/helpers/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -765,7 +765,7 @@ const configSymbol = Symbol(UI_PLUGIN_CONFIG_KEY);
 const defaultPluginConfig = {};
 
 //#endregion
-//#region \0@oxc-project+runtime@0.124.0/helpers/decorateParam.js
+//#region \0@oxc-project+runtime@0.129.0/helpers/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -773,7 +773,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.124.0/helpers/decorate.js
+//#region \0@oxc-project+runtime@0.129.0/helpers/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -1735,69 +1735,69 @@ let KeyCode = /* @__PURE__ */ function(KeyCode) {
 	return KeyCode;
 }({});
 const KeyCodeToChar = {
-	[KeyCode.BACKSPACE]: "Backspace",
-	[KeyCode.TAB]: "Tab",
-	[KeyCode.ENTER]: "Enter",
-	[KeyCode.DELETE]: "Del",
-	[KeyCode.ESC]: "Esc",
-	[KeyCode.SPACE]: "Space",
-	[KeyCode.ARROW_LEFT]: "←",
-	[KeyCode.ARROW_RIGHT]: "→",
-	[KeyCode.ARROW_UP]: "↑",
-	[KeyCode.ARROW_DOWN]: "↓",
-	[KeyCode.Digit0]: "0",
-	[KeyCode.Digit1]: "1",
-	[KeyCode.Digit2]: "2",
-	[KeyCode.Digit3]: "3",
-	[KeyCode.Digit4]: "4",
-	[KeyCode.Digit5]: "5",
-	[KeyCode.Digit6]: "6",
-	[KeyCode.Digit7]: "7",
-	[KeyCode.Digit8]: "8",
-	[KeyCode.Digit9]: "9",
-	[KeyCode.A]: "A",
-	[KeyCode.B]: "B",
-	[KeyCode.C]: "C",
-	[KeyCode.D]: "D",
-	[KeyCode.E]: "E",
-	[KeyCode.F]: "F",
-	[KeyCode.G]: "G",
-	[KeyCode.H]: "H",
-	[KeyCode.I]: "I",
-	[KeyCode.J]: "J",
-	[KeyCode.K]: "K",
-	[KeyCode.L]: "L",
-	[KeyCode.M]: "M",
-	[KeyCode.N]: "N",
-	[KeyCode.O]: "O",
-	[KeyCode.P]: "P",
-	[KeyCode.Q]: "Q",
-	[KeyCode.R]: "R",
-	[KeyCode.S]: "S",
-	[KeyCode.T]: "T",
-	[KeyCode.U]: "U",
-	[KeyCode.V]: "V",
-	[KeyCode.W]: "W",
-	[KeyCode.X]: "X",
-	[KeyCode.Y]: "Y",
-	[KeyCode.Z]: "Z",
-	[KeyCode.F1]: "F1",
-	[KeyCode.F2]: "F2",
-	[KeyCode.F3]: "F3",
-	[KeyCode.F4]: "F4",
-	[KeyCode.F5]: "F5",
-	[KeyCode.F6]: "F6",
-	[KeyCode.F7]: "F7",
-	[KeyCode.F8]: "F8",
-	[KeyCode.F9]: "F9",
-	[KeyCode.F10]: "F10",
-	[KeyCode.F11]: "F11",
-	[KeyCode.F12]: "F12",
-	[KeyCode.MINUS]: "-",
-	[KeyCode.EQUAL]: "=",
-	[KeyCode.PERIOD]: ".",
-	[KeyCode.COMMA]: ",",
-	[KeyCode.BACK_SLASH]: "\\"
+	[8]: "Backspace",
+	[9]: "Tab",
+	[13]: "Enter",
+	[46]: "Del",
+	[27]: "Esc",
+	[32]: "Space",
+	[37]: "←",
+	[39]: "→",
+	[38]: "↑",
+	[40]: "↓",
+	[48]: "0",
+	[49]: "1",
+	[50]: "2",
+	[51]: "3",
+	[52]: "4",
+	[53]: "5",
+	[54]: "6",
+	[55]: "7",
+	[56]: "8",
+	[57]: "9",
+	[65]: "A",
+	[66]: "B",
+	[67]: "C",
+	[68]: "D",
+	[69]: "E",
+	[70]: "F",
+	[71]: "G",
+	[72]: "H",
+	[73]: "I",
+	[74]: "J",
+	[75]: "K",
+	[76]: "L",
+	[77]: "M",
+	[78]: "N",
+	[79]: "O",
+	[80]: "P",
+	[81]: "Q",
+	[82]: "R",
+	[83]: "S",
+	[84]: "T",
+	[85]: "U",
+	[86]: "V",
+	[87]: "W",
+	[88]: "X",
+	[89]: "Y",
+	[90]: "Z",
+	[112]: "F1",
+	[113]: "F2",
+	[114]: "F3",
+	[115]: "F4",
+	[116]: "F5",
+	[117]: "F6",
+	[118]: "F7",
+	[119]: "F8",
+	[120]: "F9",
+	[121]: "F10",
+	[122]: "F11",
+	[123]: "F12",
+	[189]: "-",
+	[187]: "=",
+	[190]: ".",
+	[188]: ",",
+	[220]: "\\"
 };
 /** Define meta key numbers. */
 let MetaKeys = /* @__PURE__ */ function(MetaKeys) {
@@ -1905,10 +1905,10 @@ let ShortcutService = class ShortcutService extends Disposable {
 		var _KeyCodeToChar;
 		const binding = this._getBindingFromItem(shortcut);
 		if (!binding) return null;
-		const ctrlKey = binding & MetaKeys.CTRL_COMMAND;
-		const shiftKey = binding & MetaKeys.SHIFT;
-		const altKey = binding & MetaKeys.ALT;
-		const macCtrl = binding & MetaKeys.MAC_CTRL;
+		const ctrlKey = binding & 4096;
+		const shiftKey = binding & 1024;
+		const altKey = binding & 2048;
+		const macCtrl = binding & 8192;
 		const body = (_KeyCodeToChar = KeyCodeToChar[binding & 255]) !== null && _KeyCodeToChar !== void 0 ? _KeyCodeToChar : "<->";
 		if (this._platformService.isMac) return `${ctrlKey ? "⌘+" : ""}${shiftKey ? "⇧+" : ""}${altKey ? "⌥+" : ""}${macCtrl ? "⌃+" : ""}${body}`;
 		return `${ctrlKey ? "Ctrl+" : ""}${shiftKey ? "Shift+" : ""}${altKey ? "Alt+" : ""}${body}`;
@@ -1957,10 +1957,10 @@ let ShortcutService = class ShortcutService extends Disposable {
 	_deriveBindingFromEvent(e) {
 		const { shiftKey, metaKey, altKey, keyCode } = e;
 		let binding = keyCode;
-		if (shiftKey) binding |= MetaKeys.SHIFT;
-		if (altKey) binding |= MetaKeys.ALT;
-		if (this._platformService.isMac ? metaKey : e.ctrlKey) binding |= MetaKeys.CTRL_COMMAND;
-		if (this._platformService.isMac && e.ctrlKey) binding |= MetaKeys.MAC_CTRL;
+		if (shiftKey) binding |= 1024;
+		if (altKey) binding |= 2048;
+		if (this._platformService.isMac ? metaKey : e.ctrlKey) binding |= 4096;
+		if (this._platformService.isMac && e.ctrlKey) binding |= 8192;
 		return binding;
 	}
 };
@@ -1983,14 +1983,14 @@ const CopyShortcutItem = {
 	id: CopyCommand.id,
 	description: "shortcut.copy",
 	group: "1_common-edit",
-	binding: KeyCode.C | MetaKeys.CTRL_COMMAND,
+	binding: 67 | 4096,
 	preconditions: whenEditorFocused
 };
 const CutShortcutItem = {
 	id: CutCommand.id,
 	description: "shortcut.cut",
 	group: "1_common-edit",
-	binding: KeyCode.X | MetaKeys.CTRL_COMMAND,
+	binding: 88 | 4096,
 	preconditions: whenEditorFocused
 };
 /**
@@ -2000,21 +2000,21 @@ const OnlyDisplayPasteShortcutItem = {
 	id: PasteCommand.id,
 	description: "shortcut.paste",
 	group: "1_common-edit",
-	binding: KeyCode.V | MetaKeys.CTRL_COMMAND,
+	binding: 86 | 4096,
 	preconditions: () => false
 };
 const UndoShortcutItem = {
 	id: UndoCommand.id,
 	description: "shortcut.undo",
 	group: "1_common-edit",
-	binding: KeyCode.Z | MetaKeys.CTRL_COMMAND,
+	binding: 90 | 4096,
 	preconditions: whenEditorFocusedButNotCellEditor
 };
 const RedoShortcutItem = {
 	id: RedoCommand.id,
 	description: "shortcut.redo",
 	group: "1_common-edit",
-	binding: KeyCode.Y | MetaKeys.CTRL_COMMAND,
+	binding: 89 | 4096,
 	preconditions: whenEditorFocusedButNotCellEditor
 };
 let SharedController = class SharedController extends Disposable {
@@ -2147,102 +2147,102 @@ let MenuManagerService = class MenuManagerService extends Disposable {
 		this._configService = _configService;
 		_defineProperty(this, "menuChanged$", new Subject());
 		_defineProperty(this, "_menu", {
-			[MenuManagerPosition.RIBBON]: {
-				[RibbonPosition.START]: {
+			["ribbon"]: {
+				["ribbon.start"]: {
 					order: 0,
-					[RibbonStartGroup.HISTORY]: { order: 0 },
-					[RibbonStartGroup.FORMAT]: { order: 1 },
-					[RibbonStartGroup.LAYOUT]: { order: 2 },
-					[RibbonStartGroup.OTHERS]: { order: 3 }
+					["ribbon.start.history"]: { order: 0 },
+					["ribbon.start.format"]: { order: 1 },
+					["ribbon.start.layout"]: { order: 2 },
+					["ribbon.start.others"]: { order: 3 }
 				},
-				[RibbonPosition.INSERT]: {
+				["ribbon.insert"]: {
 					order: 1,
-					[RibbonInsertGroup.EDIT]: { order: 0 },
-					[RibbonInsertGroup.MEDIA]: { order: 1 },
-					[RibbonInsertGroup.OTHERS]: { order: 2 }
+					["ribbon.insert.edit"]: { order: 0 },
+					["ribbon.insert.media"]: { order: 1 },
+					["ribbon.insert.others"]: { order: 2 }
 				},
-				[RibbonPosition.FORMULAS]: {
+				["ribbon.formulas"]: {
 					order: 2,
-					[RibbonFormulasGroup.BASIC]: { order: 0 },
-					[RibbonFormulasGroup.OTHERS]: { order: 1 }
+					["ribbon.formulas.basic"]: { order: 0 },
+					["ribbon.formulas.others"]: { order: 1 }
 				},
-				[RibbonPosition.DATA]: {
+				["ribbon.data"]: {
 					order: 3,
-					[RibbonDataGroup.FORMULAS]: { order: 0 },
-					[RibbonDataGroup.RULES]: { order: 1 },
-					[RibbonDataGroup.ORGANIZATION]: { order: 2 },
-					[RibbonDataGroup.OTHERS]: { order: 3 }
+					["ribbon.data.formulas"]: { order: 0 },
+					["ribbon.data.rules"]: { order: 1 },
+					["ribbon.data.organization"]: { order: 2 },
+					["ribbon.data.others"]: { order: 3 }
 				},
-				[RibbonPosition.VIEW]: {
+				["ribbon.view"]: {
 					order: 4,
-					[RibbonViewGroup.DISPLAY]: { order: 0 },
-					[RibbonViewGroup.VISIBILITY]: { order: 0 },
-					[RibbonViewGroup.OTHERS]: { order: 0 }
+					["ribbon.view.display"]: { order: 0 },
+					["ribbon.view.Visibility"]: { order: 0 },
+					["ribbon.view.others"]: { order: 0 }
 				},
-				[RibbonPosition.OTHERS]: {
+				["ribbon.others"]: {
 					order: 5,
-					[RibbonOthersGroup.OTHERS]: { order: 0 }
+					["ribbon.others.others"]: { order: 0 }
 				}
 			},
-			[MenuManagerPosition.CONTEXT_MENU]: {
-				[ContextMenuPosition.MAIN_AREA]: {
+			["contextMenu"]: {
+				["contextMenu.mainArea"]: {
 					order: 0,
-					[ContextMenuGroup.QUICK]: {
+					["contextMenu.quick"]: {
 						order: -1,
 						quickLayout: "icon"
 					},
-					[ContextMenuGroup.FORMAT]: { order: 0 },
-					[ContextMenuGroup.LAYOUT]: { order: 1 },
-					[ContextMenuGroup.DATA]: { order: 2 },
-					[ContextMenuGroup.OTHERS]: { order: 3 }
+					["contextMenu.format"]: { order: 0 },
+					["contextMenu.layout"]: { order: 1 },
+					["contextMenu.data"]: { order: 2 },
+					["contextMenu.others"]: { order: 3 }
 				},
-				[ContextMenuPosition.PARAGRAPH]: {
+				["contextMenu.paragraph"]: {
 					order: 0,
-					[ContextMenuGroup.QUICK]: {
+					["contextMenu.quick"]: {
 						order: -1,
 						quickLayout: "icon"
 					},
-					[ContextMenuGroup.FORMAT]: { order: 0 },
-					[ContextMenuGroup.LAYOUT]: { order: 1 },
-					[ContextMenuGroup.DATA]: { order: 2 },
-					[ContextMenuGroup.OTHERS]: { order: 3 }
+					["contextMenu.format"]: { order: 0 },
+					["contextMenu.layout"]: { order: 1 },
+					["contextMenu.data"]: { order: 2 },
+					["contextMenu.others"]: { order: 3 }
 				},
-				[ContextMenuPosition.COL_HEADER]: {
+				["contextMenu.colHeader"]: {
 					order: 1,
-					[ContextMenuGroup.QUICK]: {
+					["contextMenu.quick"]: {
 						order: -1,
 						quickLayout: "icon"
 					},
-					[ContextMenuGroup.FORMAT]: { order: 0 },
-					[ContextMenuGroup.LAYOUT]: { order: 1 },
-					[ContextMenuGroup.DATA]: { order: 2 },
-					[ContextMenuGroup.OTHERS]: { order: 3 }
+					["contextMenu.format"]: { order: 0 },
+					["contextMenu.layout"]: { order: 1 },
+					["contextMenu.data"]: { order: 2 },
+					["contextMenu.others"]: { order: 3 }
 				},
-				[ContextMenuPosition.ROW_HEADER]: {
+				["contextMenu.rowHeader"]: {
 					order: 2,
-					[ContextMenuGroup.QUICK]: {
+					["contextMenu.quick"]: {
 						order: -1,
 						quickLayout: "icon"
 					},
-					[ContextMenuGroup.FORMAT]: { order: 0 },
-					[ContextMenuGroup.LAYOUT]: { order: 1 },
-					[ContextMenuGroup.DATA]: { order: 2 },
-					[ContextMenuGroup.OTHERS]: { order: 3 }
+					["contextMenu.format"]: { order: 0 },
+					["contextMenu.layout"]: { order: 1 },
+					["contextMenu.data"]: { order: 2 },
+					["contextMenu.others"]: { order: 3 }
 				},
-				[ContextMenuPosition.FOOTER_TABS]: {
+				["contextMenu.footerTabs"]: {
 					order: 3,
-					[ContextMenuGroup.FORMAT]: { order: 0 },
-					[ContextMenuGroup.LAYOUT]: { order: 1 },
-					[ContextMenuGroup.DATA]: { order: 2 },
-					[ContextMenuGroup.OTHERS]: { order: 3 }
+					["contextMenu.format"]: { order: 0 },
+					["contextMenu.layout"]: { order: 1 },
+					["contextMenu.data"]: { order: 2 },
+					["contextMenu.others"]: { order: 3 }
 				},
-				[ContextMenuPosition.FOOTER_MENU]: {
+				["contextMenu.footerMenu"]: {
 					order: 4,
-					[ContextMenuGroup.OTHERS]: { order: 3 }
+					["contextMenu.others"]: { order: 3 }
 				},
-				[ContextMenuPosition.DRAWING]: {
+				["contextMenu.drawing"]: {
 					order: 5,
-					[ContextMenuGroup.OTHERS]: { order: 3 }
+					["contextMenu.others"]: { order: 3 }
 				}
 			}
 		});
@@ -2414,7 +2414,7 @@ function ShortcutPanel() {
 //#region src/controllers/shortcut-display/shortcut-panel.controller.ts
 const ToggleShortcutPanelShortcut = {
 	id: ToggleShortcutPanelOperation.id,
-	binding: MetaKeys.CTRL_COMMAND | KeyCode.BACK_SLASH,
+	binding: 4096 | 220,
 	description: "shortcut.shortcut-panel",
 	group: "10_global-shortcut"
 };
@@ -2449,7 +2449,7 @@ let MenuItemType = /* @__PURE__ */ function(MenuItemType) {
 	return MenuItemType;
 }({});
 function isMenuButtonSelectorItem(v) {
-	return v.type === MenuItemType.BUTTON_SELECTOR;
+	return v.type === 2;
 }
 
 //#endregion
@@ -2464,7 +2464,7 @@ const undoRedoDisableFactory$ = (accessor, isUndo) => {
 function UndoMenuItemFactory(accessor) {
 	return {
 		id: UndoCommand.id,
-		type: MenuItemType.BUTTON,
+		type: 0,
 		icon: "UndoIcon",
 		title: "Undo",
 		tooltip: "toolbar.undo",
@@ -2474,7 +2474,7 @@ function UndoMenuItemFactory(accessor) {
 function RedoMenuItemFactory(accessor) {
 	return {
 		id: RedoCommand.id,
-		type: MenuItemType.BUTTON,
+		type: 0,
 		icon: "RedoIcon",
 		title: "Redo",
 		tooltip: "toolbar.redo",
@@ -2490,14 +2490,14 @@ function ShortcutPanelMenuItemFactory() {
 		title: "toggle-shortcut-panel",
 		tooltip: "toggle-shortcut-panel",
 		icon: "ShortcutIcon",
-		type: MenuItemType.BUTTON
+		type: 0
 	};
 }
 
 //#endregion
 //#region src/menu/schema.ts
 const menuSchema = {
-	[RibbonStartGroup.HISTORY]: {
+	["ribbon.start.history"]: {
 		[UndoCommand.id]: {
 			order: 0,
 			menuItemFactory: UndoMenuItemFactory
@@ -2507,7 +2507,7 @@ const menuSchema = {
 			menuItemFactory: RedoMenuItemFactory
 		}
 	},
-	[RibbonStartGroup.OTHERS]: { [ToggleShortcutPanelOperation.id]: {
+	["ribbon.start.others"]: { [ToggleShortcutPanelOperation.id]: {
 		order: 1,
 		menuItemFactory: ShortcutPanelMenuItemFactory
 	} }
@@ -3027,7 +3027,7 @@ let DesktopRibbonService = class DesktopRibbonService extends Disposable {
 		this._univerInstanceService = _univerInstanceService;
 		_defineProperty(this, "_ribbon$", new BehaviorSubject([]));
 		_defineProperty(this, "ribbon$", this._ribbon$.asObservable());
-		_defineProperty(this, "_activatedTab$", new BehaviorSubject(RibbonPosition.START));
+		_defineProperty(this, "_activatedTab$", new BehaviorSubject("ribbon.start"));
 		_defineProperty(this, "activatedTab$", this._activatedTab$.asObservable());
 		_defineProperty(this, "_collapsedIds$", new BehaviorSubject([]));
 		_defineProperty(this, "collapsedIds$", this._collapsedIds$.asObservable());
@@ -3050,7 +3050,7 @@ let DesktopRibbonService = class DesktopRibbonService extends Disposable {
 		}));
 	}
 	_updateRibbon() {
-		const ribbon = this._menuManagerService.getMenuByPositionKey(MenuManagerPosition.RIBBON);
+		const ribbon = this._menuManagerService.getMenuByPositionKey("ribbon");
 		const hiddenObservableMap = [];
 		const hiddenKeyMap = [];
 		for (const group of ribbon) if (group.children) {
@@ -3178,12 +3178,12 @@ function ClassicMenu({ ribbon, activatedTab, onSelectTab }) {
 //#endregion
 //#region src/views/components/ribbon/ribbon-menu/DefaultMenu.tsx
 const iconMap = {
-	[RibbonPosition.START]: HomeIcon,
-	[RibbonPosition.INSERT]: InsertIcon,
-	[RibbonPosition.FORMULAS]: FunctionIcon,
-	[RibbonPosition.DATA]: DatabaseIcon,
-	[RibbonPosition.VIEW]: EyeIcon,
-	[RibbonPosition.OTHERS]: MoreFunctionIcon
+	["ribbon.start"]: HomeIcon,
+	["ribbon.insert"]: InsertIcon,
+	["ribbon.formulas"]: FunctionIcon,
+	["ribbon.data"]: DatabaseIcon,
+	["ribbon.view"]: EyeIcon,
+	["ribbon.others"]: MoreFunctionIcon
 };
 function DefaultMenu({ ribbon, activatedTab, onSelectTab }) {
 	const localeService = useDependency(LocaleService);
@@ -3614,9 +3614,9 @@ const ToolbarItem = forwardRef((props, ref) => {
 		}
 		function handleClick() {
 			if (disabled) return;
-			if (menuType === MenuItemType.BUTTON_SELECTOR) executeCommand(bId, { value });
+			if (menuType === 2) executeCommand(bId, { value });
 		}
-		if (menuType === MenuItemType.BUTTON_SELECTOR) return /* @__PURE__ */ jsxs("div", {
+		if (menuType === 2) return /* @__PURE__ */ jsxs("div", {
 			"data-u-command": id,
 			"data-disabled": disabled,
 			className: clsx("univer-toolbar-button-selector-root univer-animate-in univer-fade-in univer-group univer-relative univer-flex univer-h-6 univer-cursor-pointer univer-items-center univer-rounded univer-pr-5 univer-text-sm univer-transition-colors hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-700", {
@@ -3706,10 +3706,10 @@ const ToolbarItem = forwardRef((props, ref) => {
 	}
 	function renderItem() {
 		switch (type) {
-			case MenuItemType.BUTTON_SELECTOR:
-			case MenuItemType.SELECTOR:
-			case MenuItemType.SUBITEMS: return renderSelectorType(type);
-			case MenuItemType.BUTTON:
+			case 2:
+			case 1:
+			case 3: return renderSelectorType(type);
+			case 0:
 			default: return renderButtonType();
 		}
 	}
@@ -3730,13 +3730,13 @@ function Ribbon(props) {
 	const containerRef = useRef(null);
 	const toolbarItemRefs = useRef({});
 	const ribbonData = useObservable(ribbonService.ribbon$, []);
-	const activatedTab = useObservable(ribbonService.activatedTab$, RibbonPosition.START);
+	const activatedTab = useObservable(ribbonService.activatedTab$, "ribbon.start");
 	const collapsedIds = useObservable(ribbonService.collapsedIds$, []);
 	const fakeToolbarVisible = useObservable(ribbonService.fakeToolbarVisible$, false);
 	const ribbon = useMemo(() => {
 		if (ribbonType === "simple") {
 			const simpleRibbon = [{
-				key: RibbonPosition.START,
+				key: "ribbon.start",
 				children: [],
 				order: 0
 			}];
@@ -4261,7 +4261,7 @@ function ContextMenuMenuItem(props) {
 	const menuItemElementRef = useRef(null);
 	const submenuElementRef = useRef(null);
 	const selections = useMemo(() => {
-		if (menuItem.type !== MenuItemType.SELECTOR && menuItem.type !== MenuItemType.BUTTON_SELECTOR) return [];
+		if (menuItem.type !== 1 && menuItem.type !== 2) return [];
 		if (selectionsFromObservable) return selectionsFromObservable;
 		return Array.isArray(selectorItem.selections) ? selectorItem.selections : [];
 	}, [
@@ -4270,7 +4270,7 @@ function ContextMenuMenuItem(props) {
 		selectorItem.selections
 	]);
 	const subMenuItems = useMemo(() => {
-		if (menuItem.type !== MenuItemType.SUBITEMS || !menuItem.id) return [];
+		if (menuItem.type !== 3 || !menuItem.id) return [];
 		return menuManagerService.getMenuByPositionKey(menuItem.id);
 	}, [
 		menuItem.id,
@@ -4323,6 +4323,10 @@ function ContextMenuMenuItem(props) {
 	const onChange = (v) => {
 		setInputValue(isRealNum(v) && typeof v === "string" ? Number.parseInt(v) : v);
 	};
+	const onSubmenuOptionSelect = (option) => {
+		onOptionSelect === null || onOptionSelect === void 0 || onOptionSelect(option);
+		setSubmenuVisible(false);
+	};
 	const itemClassName = clsx("univer-relative univer-flex univer-min-h-8 univer-w-full univer-items-center univer-justify-between univer-gap-3 univer-rounded-md univer-border-none univer-bg-transparent univer-px-2 univer-text-left univer-text-sm dark:!univer-text-white", disabled ? "univer-cursor-not-allowed univer-opacity-60" : `
               univer-cursor-pointer
               hover:univer-bg-gray-50
@@ -4341,7 +4345,7 @@ function ContextMenuMenuItem(props) {
 			onChange
 		}), menuItem.shortcut && ` (${menuItem.shortcut})`]
 	});
-	const canExecuteItem = menuItem.type === MenuItemType.BUTTON || menuItem.type === MenuItemType.BUTTON_SELECTOR;
+	const canExecuteItem = menuItem.type === 0 || menuItem.type === 2;
 	const renderAsContainer = isNonSelectableLabel(menuItem.label);
 	const interactiveItemClassName = clsx(itemClassName, isNonHoverableLabel(menuItem.label) && `
       hover:univer-bg-transparent
@@ -4435,7 +4439,7 @@ function ContextMenuMenuItem(props) {
 								label: option.label,
 								icon: option.icon,
 								onChange: (optionValue) => {
-									onOptionSelect === null || onOptionSelect === void 0 || onOptionSelect({
+									onSubmenuOptionSelect === null || onSubmenuOptionSelect === void 0 || onSubmenuOptionSelect({
 										...option,
 										value: optionValue,
 										id: menuItem.id,
@@ -4450,7 +4454,7 @@ function ContextMenuMenuItem(props) {
 							className: optionClassName,
 							disabled: option.disabled,
 							onClick: () => {
-								onOptionSelect === null || onOptionSelect === void 0 || onOptionSelect({
+								onSubmenuOptionSelect === null || onSubmenuOptionSelect === void 0 || onSubmenuOptionSelect({
 									...option,
 									id: menuItem.id,
 									label: menuKey,
@@ -4467,7 +4471,7 @@ function ContextMenuMenuItem(props) {
 				}), hasSubItemSubmenu && /* @__PURE__ */ jsx(ContextMenuMenu, {
 					menuSchemas: subMenuItems,
 					submenuPortalContainer,
-					onOptionSelect,
+					onOptionSelect: onSubmenuOptionSelect,
 					maxMenuHeight
 				})]
 			})
@@ -4854,14 +4858,14 @@ function DesktopWorkbenchContent(props) {
 	const themeSwitcherService = useDependency(ThemeSwitcherService);
 	const contentRef = useRef(null);
 	const uiConfig = useDependency(IConfigService).getConfig(UI_PLUGIN_CONFIG_KEY);
-	const customHeaderComponents = useComponentsOfPart(BuiltInUIPart.CUSTOM_HEADER);
-	const footerComponents = useComponentsOfPart(BuiltInUIPart.FOOTER);
-	const headerComponents = useComponentsOfPart(BuiltInUIPart.HEADER);
-	const headerMenuComponents = useComponentsOfPart(BuiltInUIPart.HEADER_MENU);
-	const contentComponents = useComponentsOfPart(BuiltInUIPart.CONTENT);
-	const leftSidebarComponents = useComponentsOfPart(BuiltInUIPart.LEFT_SIDEBAR);
-	const globalComponents = useComponentsOfPart(BuiltInUIPart.GLOBAL);
-	const toolbarComponents = useComponentsOfPart(BuiltInUIPart.TOOLBAR);
+	const customHeaderComponents = useComponentsOfPart("custom-header");
+	const footerComponents = useComponentsOfPart("footer");
+	const headerComponents = useComponentsOfPart("header");
+	const headerMenuComponents = useComponentsOfPart("header-menu");
+	const contentComponents = useComponentsOfPart("content");
+	const leftSidebarComponents = useComponentsOfPart("left-sidebar");
+	const globalComponents = useComponentsOfPart("global");
+	const toolbarComponents = useComponentsOfPart("toolbar");
 	const popupRootId = (_uiConfig$popupRootId = uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.popupRootId) !== null && _uiConfig$popupRootId !== void 0 ? _uiConfig$popupRootId : "univer-popup-portal";
 	useLayoutEffect(() => {
 		const sub = themeService.currentTheme$.subscribe((theme) => {
@@ -4975,7 +4979,7 @@ function DesktopWorkbenchContent(props) {
 }
 function FloatingContainer() {
 	const { mountContainer } = useContext(ConfigContext);
-	return createPortal(/* @__PURE__ */ jsx(ComponentContainer, { components: useComponentsOfPart(BuiltInUIPart.FLOATING) }, "floating"), mountContainer);
+	return createPortal(/* @__PURE__ */ jsx(ComponentContainer, { components: useComponentsOfPart("floating") }, "floating"), mountContainer);
 }
 
 //#endregion
@@ -5085,9 +5089,9 @@ let DesktopUIController = class DesktopUIController extends SingleUnitUIControll
 		return bootstrap$1(this._injector, this._config, callback);
 	}
 	_initBuiltinComponents(uiPartsService) {
-		this.disposeWithMe(uiPartsService.registerComponent(BuiltInUIPart.FLOATING, () => connectInjector(CanvasPopup, this._injector)));
-		this.disposeWithMe(uiPartsService.registerComponent(BuiltInUIPart.CONTENT, () => connectInjector(FloatDom, this._injector)));
-		this.disposeWithMe(uiPartsService.registerComponent(BuiltInUIPart.TOOLBAR, () => connectInjector(Ribbon, this._injector)));
+		this.disposeWithMe(uiPartsService.registerComponent("floating", () => connectInjector(CanvasPopup, this._injector)));
+		this.disposeWithMe(uiPartsService.registerComponent("content", () => connectInjector(FloatDom, this._injector)));
+		this.disposeWithMe(uiPartsService.registerComponent("toolbar", () => connectInjector(Ribbon, this._injector)));
 	}
 };
 DesktopUIController = __decorate([
@@ -5136,7 +5140,7 @@ const IUIController = createIdentifier("univer.ui.ui-controller");
 //#endregion
 //#region package.json
 var name = "@univerjs/ui";
-var version = "0.21.1";
+var version = "0.22.0";
 
 //#endregion
 //#region src/views/components/ribbon/MobileRibbon.tsx
@@ -5159,7 +5163,7 @@ function MobileRibbon(props) {
 	const localeService = useDependency(LocaleService);
 	const ribbonService = useDependency(IRibbonService);
 	const ribbon = useObservable(ribbonService.ribbon$, []);
-	const activatedTab = useObservable(ribbonService.activatedTab$, RibbonPosition.START);
+	const activatedTab = useObservable(ribbonService.activatedTab$, "ribbon.start");
 	const activeIndex = useMemo(() => {
 		const index = ribbon.findIndex((group) => group.key === activatedTab);
 		return index === -1 ? 0 : index;
@@ -5515,7 +5519,7 @@ function useMobileSchemaInteraction(props) {
 	const value = useObservable(menuItem === null || menuItem === void 0 ? void 0 : menuItem.value$);
 	const selectionsFromObservable = useObservable(selectorItem && isObservable(selectorItem.selections) ? selectorItem.selections : void 0);
 	const selections = useMemo(() => {
-		if (!selectorItem || (menuItem === null || menuItem === void 0 ? void 0 : menuItem.type) !== MenuItemType.SELECTOR && (menuItem === null || menuItem === void 0 ? void 0 : menuItem.type) !== MenuItemType.BUTTON_SELECTOR) return [];
+		if (!selectorItem || (menuItem === null || menuItem === void 0 ? void 0 : menuItem.type) !== 1 && (menuItem === null || menuItem === void 0 ? void 0 : menuItem.type) !== 2) return [];
 		if (selectionsFromObservable) return selectionsFromObservable;
 		return Array.isArray(selectorItem.selections) ? selectorItem.selections : [];
 	}, [
@@ -5524,7 +5528,7 @@ function useMobileSchemaInteraction(props) {
 		selectorItem
 	]);
 	const subMenuItems = useMemo(() => {
-		if (!menuItem || menuItem.type !== MenuItemType.SUBITEMS || !menuItem.id) return [];
+		if (!menuItem || menuItem.type !== 3 || !menuItem.id) return [];
 		return menuManagerService.getMenuByPositionKey(menuItem.id);
 	}, [menuItem, menuManagerService]);
 	if (!menuItem) return null;
@@ -5559,7 +5563,7 @@ function useMobileSchemaInteraction(props) {
 			});
 			return;
 		}
-		if (menuItem.type !== MenuItemType.BUTTON && menuItem.type !== MenuItemType.BUTTON_SELECTOR) return;
+		if (menuItem.type !== 0 && menuItem.type !== 2) return;
 		const buttonItem = menuItem;
 		onExecute === null || onExecute === void 0 || onExecute({
 			commandId: buttonItem.commandId,
@@ -5665,8 +5669,8 @@ function MobileContextMenu() {
 	}
 	const sheetTitle = useMemo(() => {
 		switch (menuType) {
-			case ContextMenuPosition.ROW_HEADER: return localeService.t("row");
-			case ContextMenuPosition.COL_HEADER: return localeService.t("column");
+			case "contextMenu.rowHeader": return localeService.t("row");
+			case "contextMenu.colHeader": return localeService.t("column");
 			default: return "";
 		}
 	}, [localeService, menuType]);
@@ -5728,13 +5732,13 @@ function MobileWorkbench(props) {
 	const themeService = useDependency(ThemeService);
 	const themeSwitcherService = useDependency(ThemeSwitcherService);
 	const contentRef = useRef(null);
-	const footerComponents = useComponentsOfPart(BuiltInUIPart.FOOTER);
-	const headerComponents = useComponentsOfPart(BuiltInUIPart.HEADER);
-	const headerMenuComponents = useComponentsOfPart(BuiltInUIPart.HEADER_MENU);
-	const contentComponents = useComponentsOfPart(BuiltInUIPart.CONTENT);
-	const leftSidebarComponents = useComponentsOfPart(BuiltInUIPart.LEFT_SIDEBAR);
-	const globalComponents = useComponentsOfPart(BuiltInUIPart.GLOBAL);
-	const toolbarComponents = useComponentsOfPart(BuiltInUIPart.TOOLBAR);
+	const footerComponents = useComponentsOfPart("footer");
+	const headerComponents = useComponentsOfPart("header");
+	const headerMenuComponents = useComponentsOfPart("header-menu");
+	const contentComponents = useComponentsOfPart("content");
+	const leftSidebarComponents = useComponentsOfPart("left-sidebar");
+	const globalComponents = useComponentsOfPart("global");
+	const toolbarComponents = useComponentsOfPart("toolbar");
 	const [darkMode, setDarkMode] = useState(false);
 	useEffect(() => {
 		const sub = themeService.darkMode$.subscribe((darkMode) => {
@@ -5865,9 +5869,9 @@ let MobileUIController = class MobileUIController extends SingleUnitUIController
 		});
 	}
 	_initBuiltinComponents(uiPartsService) {
-		this.disposeWithMe(uiPartsService.registerComponent(BuiltInUIPart.CONTENT, () => connectInjector(CanvasPopup, this._injector)));
-		this.disposeWithMe(uiPartsService.registerComponent(BuiltInUIPart.CONTENT, () => connectInjector(FloatDom, this._injector)));
-		this.disposeWithMe(uiPartsService.registerComponent(BuiltInUIPart.TOOLBAR, () => connectInjector(MobileRibbon, this._injector)));
+		this.disposeWithMe(uiPartsService.registerComponent("content", () => connectInjector(CanvasPopup, this._injector)));
+		this.disposeWithMe(uiPartsService.registerComponent("content", () => connectInjector(FloatDom, this._injector)));
+		this.disposeWithMe(uiPartsService.registerComponent("toolbar", () => connectInjector(MobileRibbon, this._injector)));
 	}
 };
 MobileUIController = __decorate([
@@ -6445,7 +6449,7 @@ let DesktopConfirmService = class DesktopConfirmService extends Disposable {
 		this.confirmOptions$.next([...this._confirmOptions]);
 	}
 	_initUIPart() {
-		this.disposeWithMe(this._uiPartsService.registerComponent(BuiltInUIPart.GLOBAL, () => connectInjector(ConfirmPart, this._injector)));
+		this.disposeWithMe(this._uiPartsService.registerComponent("global", () => connectInjector(ConfirmPart, this._injector)));
 	}
 };
 DesktopConfirmService = __decorate([__decorateParam(0, Inject(Injector)), __decorateParam(1, IUIPartsService)], DesktopConfirmService);
@@ -6532,7 +6536,7 @@ let DesktopDialogService = class DesktopDialogService extends Disposable {
 		return this._dialogOptions$.asObservable();
 	}
 	_initUIPart() {
-		this.disposeWithMe(this._uiPartsService.registerComponent(BuiltInUIPart.GLOBAL, () => connectInjector(DialogPart, this._injector)));
+		this.disposeWithMe(this._uiPartsService.registerComponent("global", () => connectInjector(DialogPart, this._injector)));
 	}
 };
 DesktopDialogService = __decorate([__decorateParam(0, Inject(Injector)), __decorateParam(1, IUIPartsService)], DesktopDialogService);
@@ -6593,7 +6597,7 @@ let DesktopGalleryService = class DesktopGalleryService extends Disposable {
 		});
 	}
 	_initUIPart() {
-		this.disposeWithMe(this._uiPartsService.registerComponent(BuiltInUIPart.GLOBAL, () => connectInjector(GalleryPart, this._injector)));
+		this.disposeWithMe(this._uiPartsService.registerComponent("global", () => connectInjector(GalleryPart, this._injector)));
 	}
 };
 DesktopGalleryService = __decorate([__decorateParam(0, Inject(Injector)), __decorateParam(1, IUIPartsService)], DesktopGalleryService);
@@ -6734,7 +6738,7 @@ let DesktopMessageService = class DesktopMessageService extends Disposable {
 		this._initUIPart();
 	}
 	_initUIPart() {
-		this.disposeWithMe(this._uiPartsService.registerComponent(BuiltInUIPart.GLOBAL, () => connectInjector(MessageContainer, this._injector)));
+		this.disposeWithMe(this._uiPartsService.registerComponent("global", () => connectInjector(MessageContainer, this._injector)));
 	}
 	dispose() {
 		super.dispose();
@@ -6785,7 +6789,7 @@ let DesktopNotificationService = class DesktopNotificationService extends Dispos
 		return toDisposable(() => {});
 	}
 	_initUIPart() {
-		this.disposeWithMe(this._uiPartsService.registerComponent(BuiltInUIPart.GLOBAL, () => connectInjector(Notification, this._injector)));
+		this.disposeWithMe(this._uiPartsService.registerComponent("global", () => connectInjector(Notification, this._injector)));
 	}
 };
 DesktopNotificationService = __decorate([__decorateParam(0, Inject(Injector)), __decorateParam(1, IUIPartsService)], DesktopNotificationService);