@univerjs/ui 0.21.1 → 0.22.0

package/lib/cjs/index.js

@@ -40,7 +40,7 @@ let react_dom = require("react-dom");
 let localforage = require("localforage");
 localforage = __toESM(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) {
@@ -51,7 +51,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];
@@ -64,14 +64,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,
@@ -795,7 +795,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);
@@ -803,7 +803,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);
@@ -1780,69 +1780,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) {
@@ -1950,10 +1950,10 @@ let ShortcutService = class ShortcutService extends _univerjs_core.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}`;
@@ -2002,10 +2002,10 @@ let ShortcutService = class ShortcutService extends _univerjs_core.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;
 	}
 };
@@ -2028,14 +2028,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
 };
 /**
@@ -2045,21 +2045,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: _univerjs_core.UndoCommand.id,
 	description: "shortcut.undo",
 	group: "1_common-edit",
-	binding: KeyCode.Z | MetaKeys.CTRL_COMMAND,
+	binding: 90 | 4096,
 	preconditions: whenEditorFocusedButNotCellEditor
 };
 const RedoShortcutItem = {
 	id: _univerjs_core.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 _univerjs_core.Disposable {
@@ -2192,102 +2192,102 @@ let MenuManagerService = class MenuManagerService extends _univerjs_core.Disposa
 		this._configService = _configService;
 		_defineProperty(this, "menuChanged$", new rxjs.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 }
 				}
 			}
 		});
@@ -2459,7 +2459,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"
 };
@@ -2494,7 +2494,7 @@ let MenuItemType = /* @__PURE__ */ function(MenuItemType) {
 	return MenuItemType;
 }({});
 function isMenuButtonSelectorItem(v) {
-	return v.type === MenuItemType.BUTTON_SELECTOR;
+	return v.type === 2;
 }
 
 //#endregion
@@ -2509,7 +2509,7 @@ const undoRedoDisableFactory$ = (accessor, isUndo) => {
 function UndoMenuItemFactory(accessor) {
 	return {
 		id: _univerjs_core.UndoCommand.id,
-		type: MenuItemType.BUTTON,
+		type: 0,
 		icon: "UndoIcon",
 		title: "Undo",
 		tooltip: "toolbar.undo",
@@ -2519,7 +2519,7 @@ function UndoMenuItemFactory(accessor) {
 function RedoMenuItemFactory(accessor) {
 	return {
 		id: _univerjs_core.RedoCommand.id,
-		type: MenuItemType.BUTTON,
+		type: 0,
 		icon: "RedoIcon",
 		title: "Redo",
 		tooltip: "toolbar.redo",
@@ -2535,14 +2535,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"]: {
 		[_univerjs_core.UndoCommand.id]: {
 			order: 0,
 			menuItemFactory: UndoMenuItemFactory
@@ -2552,7 +2552,7 @@ const menuSchema = {
 			menuItemFactory: RedoMenuItemFactory
 		}
 	},
-	[RibbonStartGroup.OTHERS]: { [ToggleShortcutPanelOperation.id]: {
+	["ribbon.start.others"]: { [ToggleShortcutPanelOperation.id]: {
 		order: 1,
 		menuItemFactory: ShortcutPanelMenuItemFactory
 	} }
@@ -3072,7 +3072,7 @@ let DesktopRibbonService = class DesktopRibbonService extends _univerjs_core.Dis
 		this._univerInstanceService = _univerInstanceService;
 		_defineProperty(this, "_ribbon$", new rxjs.BehaviorSubject([]));
 		_defineProperty(this, "ribbon$", this._ribbon$.asObservable());
-		_defineProperty(this, "_activatedTab$", new rxjs.BehaviorSubject(RibbonPosition.START));
+		_defineProperty(this, "_activatedTab$", new rxjs.BehaviorSubject("ribbon.start"));
 		_defineProperty(this, "activatedTab$", this._activatedTab$.asObservable());
 		_defineProperty(this, "_collapsedIds$", new rxjs.BehaviorSubject([]));
 		_defineProperty(this, "collapsedIds$", this._collapsedIds$.asObservable());
@@ -3095,7 +3095,7 @@ let DesktopRibbonService = class DesktopRibbonService extends _univerjs_core.Dis
 		}));
 	}
 	_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) {
@@ -3223,12 +3223,12 @@ function ClassicMenu({ ribbon, activatedTab, onSelectTab }) {
 //#endregion
 //#region src/views/components/ribbon/ribbon-menu/DefaultMenu.tsx
 const iconMap = {
-	[RibbonPosition.START]: _univerjs_icons.HomeIcon,
-	[RibbonPosition.INSERT]: _univerjs_icons.InsertIcon,
-	[RibbonPosition.FORMULAS]: _univerjs_icons.FunctionIcon,
-	[RibbonPosition.DATA]: _univerjs_icons.DatabaseIcon,
-	[RibbonPosition.VIEW]: _univerjs_icons.EyeIcon,
-	[RibbonPosition.OTHERS]: _univerjs_icons.MoreFunctionIcon
+	["ribbon.start"]: _univerjs_icons.HomeIcon,
+	["ribbon.insert"]: _univerjs_icons.InsertIcon,
+	["ribbon.formulas"]: _univerjs_icons.FunctionIcon,
+	["ribbon.data"]: _univerjs_icons.DatabaseIcon,
+	["ribbon.view"]: _univerjs_icons.EyeIcon,
+	["ribbon.others"]: _univerjs_icons.MoreFunctionIcon
 };
 function DefaultMenu({ ribbon, activatedTab, onSelectTab }) {
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
@@ -3659,9 +3659,9 @@ const ToolbarItem = (0, react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		if (menuType === 2) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			"data-u-command": id,
 			"data-disabled": disabled,
 			className: (0, _univerjs_design.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", {
@@ -3751,10 +3751,10 @@ const ToolbarItem = (0, react.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();
 		}
 	}
@@ -3775,13 +3775,13 @@ function Ribbon(props) {
 	const containerRef = (0, react.useRef)(null);
 	const toolbarItemRefs = (0, react.useRef)({});
 	const ribbonData = (0, _wendellhu_redi_react_bindings.useObservable)(ribbonService.ribbon$, []);
-	const activatedTab = (0, _wendellhu_redi_react_bindings.useObservable)(ribbonService.activatedTab$, RibbonPosition.START);
+	const activatedTab = (0, _wendellhu_redi_react_bindings.useObservable)(ribbonService.activatedTab$, "ribbon.start");
 	const collapsedIds = (0, _wendellhu_redi_react_bindings.useObservable)(ribbonService.collapsedIds$, []);
 	const fakeToolbarVisible = (0, _wendellhu_redi_react_bindings.useObservable)(ribbonService.fakeToolbarVisible$, false);
 	const ribbon = (0, react.useMemo)(() => {
 		if (ribbonType === "simple") {
 			const simpleRibbon = [{
-				key: RibbonPosition.START,
+				key: "ribbon.start",
 				children: [],
 				order: 0
 			}];
@@ -4306,7 +4306,7 @@ function ContextMenuMenuItem(props) {
 	const menuItemElementRef = (0, react.useRef)(null);
 	const submenuElementRef = (0, react.useRef)(null);
 	const selections = (0, react.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 : [];
 	}, [
@@ -4315,7 +4315,7 @@ function ContextMenuMenuItem(props) {
 		selectorItem.selections
 	]);
 	const subMenuItems = (0, react.useMemo)(() => {
-		if (menuItem.type !== MenuItemType.SUBITEMS || !menuItem.id) return [];
+		if (menuItem.type !== 3 || !menuItem.id) return [];
 		return menuManagerService.getMenuByPositionKey(menuItem.id);
 	}, [
 		menuItem.id,
@@ -4368,6 +4368,10 @@ function ContextMenuMenuItem(props) {
 	const onChange = (v) => {
 		setInputValue((0, _univerjs_core.isRealNum)(v) && typeof v === "string" ? Number.parseInt(v) : v);
 	};
+	const onSubmenuOptionSelect = (option) => {
+		onOptionSelect === null || onOptionSelect === void 0 || onOptionSelect(option);
+		setSubmenuVisible(false);
+	};
 	const itemClassName = (0, _univerjs_design.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
@@ -4386,7 +4390,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 = (0, _univerjs_design.clsx)(itemClassName, isNonHoverableLabel(menuItem.label) && `
       hover:univer-bg-transparent
@@ -4480,7 +4484,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,
@@ -4495,7 +4499,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,
@@ -4512,7 +4516,7 @@ function ContextMenuMenuItem(props) {
 				}), hasSubItemSubmenu && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextMenuMenu, {
 					menuSchemas: subMenuItems,
 					submenuPortalContainer,
-					onOptionSelect,
+					onOptionSelect: onSubmenuOptionSelect,
 					maxMenuHeight
 				})]
 			})
@@ -4899,14 +4903,14 @@ function DesktopWorkbenchContent(props) {
 	const themeSwitcherService = (0, _wendellhu_redi_react_bindings.useDependency)(ThemeSwitcherService);
 	const contentRef = (0, react.useRef)(null);
 	const uiConfig = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.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";
 	(0, react.useLayoutEffect)(() => {
 		const sub = themeService.currentTheme$.subscribe((theme) => {
@@ -5020,7 +5024,7 @@ function DesktopWorkbenchContent(props) {
 }
 function FloatingContainer() {
 	const { mountContainer } = (0, react.useContext)(_univerjs_design.ConfigContext);
-	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: useComponentsOfPart(BuiltInUIPart.FLOATING) }, "floating"), mountContainer);
+	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: useComponentsOfPart("floating") }, "floating"), mountContainer);
 }
 
 //#endregion
@@ -5130,9 +5134,9 @@ let DesktopUIController = class DesktopUIController extends SingleUnitUIControll
 		return bootstrap$1(this._injector, this._config, callback);
 	}
 	_initBuiltinComponents(uiPartsService) {
-		this.disposeWithMe(uiPartsService.registerComponent(BuiltInUIPart.FLOATING, () => (0, _wendellhu_redi_react_bindings.connectInjector)(CanvasPopup, this._injector)));
-		this.disposeWithMe(uiPartsService.registerComponent(BuiltInUIPart.CONTENT, () => (0, _wendellhu_redi_react_bindings.connectInjector)(FloatDom, this._injector)));
-		this.disposeWithMe(uiPartsService.registerComponent(BuiltInUIPart.TOOLBAR, () => (0, _wendellhu_redi_react_bindings.connectInjector)(Ribbon, this._injector)));
+		this.disposeWithMe(uiPartsService.registerComponent("floating", () => (0, _wendellhu_redi_react_bindings.connectInjector)(CanvasPopup, this._injector)));
+		this.disposeWithMe(uiPartsService.registerComponent("content", () => (0, _wendellhu_redi_react_bindings.connectInjector)(FloatDom, this._injector)));
+		this.disposeWithMe(uiPartsService.registerComponent("toolbar", () => (0, _wendellhu_redi_react_bindings.connectInjector)(Ribbon, this._injector)));
 	}
 };
 DesktopUIController = __decorate([
@@ -5181,7 +5185,7 @@ const IUIController = (0, _univerjs_core.createIdentifier)("univer.ui.ui-control
 //#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
@@ -5204,7 +5208,7 @@ function MobileRibbon(props) {
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
 	const ribbonService = (0, _wendellhu_redi_react_bindings.useDependency)(IRibbonService);
 	const ribbon = (0, _wendellhu_redi_react_bindings.useObservable)(ribbonService.ribbon$, []);
-	const activatedTab = (0, _wendellhu_redi_react_bindings.useObservable)(ribbonService.activatedTab$, RibbonPosition.START);
+	const activatedTab = (0, _wendellhu_redi_react_bindings.useObservable)(ribbonService.activatedTab$, "ribbon.start");
 	const activeIndex = (0, react.useMemo)(() => {
 		const index = ribbon.findIndex((group) => group.key === activatedTab);
 		return index === -1 ? 0 : index;
@@ -5560,7 +5564,7 @@ function useMobileSchemaInteraction(props) {
 	const value = (0, _wendellhu_redi_react_bindings.useObservable)(menuItem === null || menuItem === void 0 ? void 0 : menuItem.value$);
 	const selectionsFromObservable = (0, _wendellhu_redi_react_bindings.useObservable)(selectorItem && (0, rxjs.isObservable)(selectorItem.selections) ? selectorItem.selections : void 0);
 	const selections = (0, react.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 : [];
 	}, [
@@ -5569,7 +5573,7 @@ function useMobileSchemaInteraction(props) {
 		selectorItem
 	]);
 	const subMenuItems = (0, react.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;
@@ -5604,7 +5608,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,
@@ -5710,8 +5714,8 @@ function MobileContextMenu() {
 	}
 	const sheetTitle = (0, react.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]);
@@ -5773,13 +5777,13 @@ function MobileWorkbench(props) {
 	const themeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.ThemeService);
 	const themeSwitcherService = (0, _wendellhu_redi_react_bindings.useDependency)(ThemeSwitcherService);
 	const contentRef = (0, react.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] = (0, react.useState)(false);
 	(0, react.useEffect)(() => {
 		const sub = themeService.darkMode$.subscribe((darkMode) => {
@@ -5910,9 +5914,9 @@ let MobileUIController = class MobileUIController extends SingleUnitUIController
 		});
 	}
 	_initBuiltinComponents(uiPartsService) {
-		this.disposeWithMe(uiPartsService.registerComponent(BuiltInUIPart.CONTENT, () => (0, _wendellhu_redi_react_bindings.connectInjector)(CanvasPopup, this._injector)));
-		this.disposeWithMe(uiPartsService.registerComponent(BuiltInUIPart.CONTENT, () => (0, _wendellhu_redi_react_bindings.connectInjector)(FloatDom, this._injector)));
-		this.disposeWithMe(uiPartsService.registerComponent(BuiltInUIPart.TOOLBAR, () => (0, _wendellhu_redi_react_bindings.connectInjector)(MobileRibbon, this._injector)));
+		this.disposeWithMe(uiPartsService.registerComponent("content", () => (0, _wendellhu_redi_react_bindings.connectInjector)(CanvasPopup, this._injector)));
+		this.disposeWithMe(uiPartsService.registerComponent("content", () => (0, _wendellhu_redi_react_bindings.connectInjector)(FloatDom, this._injector)));
+		this.disposeWithMe(uiPartsService.registerComponent("toolbar", () => (0, _wendellhu_redi_react_bindings.connectInjector)(MobileRibbon, this._injector)));
 	}
 };
 MobileUIController = __decorate([
@@ -6490,7 +6494,7 @@ let DesktopConfirmService = class DesktopConfirmService extends _univerjs_core.D
 		this.confirmOptions$.next([...this._confirmOptions]);
 	}
 	_initUIPart() {
-		this.disposeWithMe(this._uiPartsService.registerComponent(BuiltInUIPart.GLOBAL, () => (0, _wendellhu_redi_react_bindings.connectInjector)(ConfirmPart, this._injector)));
+		this.disposeWithMe(this._uiPartsService.registerComponent("global", () => (0, _wendellhu_redi_react_bindings.connectInjector)(ConfirmPart, this._injector)));
 	}
 };
 DesktopConfirmService = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_core.Injector)), __decorateParam(1, IUIPartsService)], DesktopConfirmService);
@@ -6577,7 +6581,7 @@ let DesktopDialogService = class DesktopDialogService extends _univerjs_core.Dis
 		return this._dialogOptions$.asObservable();
 	}
 	_initUIPart() {
-		this.disposeWithMe(this._uiPartsService.registerComponent(BuiltInUIPart.GLOBAL, () => (0, _wendellhu_redi_react_bindings.connectInjector)(DialogPart, this._injector)));
+		this.disposeWithMe(this._uiPartsService.registerComponent("global", () => (0, _wendellhu_redi_react_bindings.connectInjector)(DialogPart, this._injector)));
 	}
 };
 DesktopDialogService = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_core.Injector)), __decorateParam(1, IUIPartsService)], DesktopDialogService);
@@ -6638,7 +6642,7 @@ let DesktopGalleryService = class DesktopGalleryService extends _univerjs_core.D
 		});
 	}
 	_initUIPart() {
-		this.disposeWithMe(this._uiPartsService.registerComponent(BuiltInUIPart.GLOBAL, () => (0, _wendellhu_redi_react_bindings.connectInjector)(GalleryPart, this._injector)));
+		this.disposeWithMe(this._uiPartsService.registerComponent("global", () => (0, _wendellhu_redi_react_bindings.connectInjector)(GalleryPart, this._injector)));
 	}
 };
 DesktopGalleryService = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_core.Injector)), __decorateParam(1, IUIPartsService)], DesktopGalleryService);
@@ -6779,7 +6783,7 @@ let DesktopMessageService = class DesktopMessageService extends _univerjs_core.D
 		this._initUIPart();
 	}
 	_initUIPart() {
-		this.disposeWithMe(this._uiPartsService.registerComponent(BuiltInUIPart.GLOBAL, () => (0, _wendellhu_redi_react_bindings.connectInjector)(MessageContainer, this._injector)));
+		this.disposeWithMe(this._uiPartsService.registerComponent("global", () => (0, _wendellhu_redi_react_bindings.connectInjector)(MessageContainer, this._injector)));
 	}
 	dispose() {
 		super.dispose();
@@ -6830,7 +6834,7 @@ let DesktopNotificationService = class DesktopNotificationService extends _unive
 		return (0, _univerjs_core.toDisposable)(() => {});
 	}
 	_initUIPart() {
-		this.disposeWithMe(this._uiPartsService.registerComponent(BuiltInUIPart.GLOBAL, () => (0, _wendellhu_redi_react_bindings.connectInjector)(Notification, this._injector)));
+		this.disposeWithMe(this._uiPartsService.registerComponent("global", () => (0, _wendellhu_redi_react_bindings.connectInjector)(Notification, this._injector)));
 	}
 };
 DesktopNotificationService = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_core.Injector)), __decorateParam(1, IUIPartsService)], DesktopNotificationService);