@univerjs/ui 0.24.0 → 0.25.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.129.0/helpers/typeof.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/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.129.0/helpers/toPrimitive.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/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.129.0/helpers/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.129.0/helpers/defineProperty.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -140,7 +140,7 @@ const ToggleShortcutPanelOperation = {
 		} else {
 			shortcutPanelService.open();
 			sidebarService.open({
-				header: { title: "shortcut-panel.title" },
+				header: { title: "ui.shortcut-panel.title" },
 				children: { label: ShortcutPanelComponentName }
 			});
 		}
@@ -368,9 +368,13 @@ function getMenuHiddenObservable(accessor, targetUniverType, matchUnitId, needHi
 			subscriber.next(univerType !== targetUniverType);
 		});
 		const focusedUniverInstance = univerInstanceService.getFocusedUnit();
-		if (focusedUniverInstance == null) return subscriber.next(true);
-		const univerType = univerInstanceService.getUnitType(focusedUniverInstance.getUnitId());
-		subscriber.next(univerType !== targetUniverType);
+		if (focusedUniverInstance == null) {
+			const currentUnit = univerInstanceService.getCurrentUnitOfType(targetUniverType);
+			subscriber.next(currentUnit == null);
+		} else {
+			const univerType = univerInstanceService.getUnitType(focusedUniverInstance.getUnitId());
+			subscriber.next(univerType !== targetUniverType);
+		}
 		return () => subscription.unsubscribe();
 	});
 }
@@ -384,9 +388,11 @@ function getHeaderFooterMenuHiddenObservable(accessor) {
 			subscriber.next(documentFlavor !== _univerjs_core.DocumentFlavor.TRADITIONAL);
 		});
 		const docDataModel = univerInstanceService.getCurrentUniverDocInstance();
-		if (docDataModel == null) return subscriber.next(true);
-		const documentFlavor = docDataModel === null || docDataModel === void 0 ? void 0 : docDataModel.getSnapshot().documentStyle.documentFlavor;
-		subscriber.next(documentFlavor !== _univerjs_core.DocumentFlavor.TRADITIONAL);
+		if (docDataModel == null) subscriber.next(true);
+		else {
+			const documentFlavor = docDataModel === null || docDataModel === void 0 ? void 0 : docDataModel.getSnapshot().documentStyle.documentFlavor;
+			subscriber.next(documentFlavor !== _univerjs_core.DocumentFlavor.TRADITIONAL);
+		}
 		return () => subscription.unsubscribe();
 	});
 }
@@ -795,7 +801,7 @@ const configSymbol = Symbol(UI_PLUGIN_CONFIG_KEY);
 const defaultPluginConfig = {};
 
 //#endregion
-//#region \0@oxc-project+runtime@0.129.0/helpers/decorateParam.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -803,7 +809,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.129.0/helpers/decorate.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/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);
@@ -817,67 +823,67 @@ const IFontService = (0, _univerjs_core.createIdentifier)("univer.font-service")
 const DEFAULT_FONT_LIST = [
 	{
 		value: "Arial",
-		label: "fontFamily.arial",
+		label: "ui.fontFamily.arial",
 		category: "sans-serif"
 	},
 	{
 		value: "Times New Roman",
-		label: "fontFamily.times-new-roman",
+		label: "ui.fontFamily.times-new-roman",
 		category: "serif"
 	},
 	{
 		value: "Tahoma",
-		label: "fontFamily.tahoma",
+		label: "ui.fontFamily.tahoma",
 		category: "sans-serif"
 	},
 	{
 		value: "Verdana",
-		label: "fontFamily.verdana",
+		label: "ui.fontFamily.verdana",
 		category: "sans-serif"
 	},
 	{
 		value: "Microsoft YaHei",
-		label: "fontFamily.microsoft-yahei",
+		label: "ui.fontFamily.microsoft-yahei",
 		category: "sans-serif"
 	},
 	{
 		value: "SimSun",
-		label: "fontFamily.simsun",
+		label: "ui.fontFamily.simsun",
 		category: "serif"
 	},
 	{
 		value: "SimHei",
-		label: "fontFamily.simhei",
+		label: "ui.fontFamily.simhei",
 		category: "sans-serif"
 	},
 	{
 		value: "Kaiti",
-		label: "fontFamily.kaiti",
+		label: "ui.fontFamily.kaiti",
 		category: "serif"
 	},
 	{
 		value: "FangSong",
-		label: "fontFamily.fangsong",
+		label: "ui.fontFamily.fangsong",
 		category: "serif"
 	},
 	{
 		value: "NSimSun",
-		label: "fontFamily.nsimsun",
+		label: "ui.fontFamily.nsimsun",
 		category: "serif"
 	},
 	{
 		value: "STXinwei",
-		label: "fontFamily.stxinwei",
+		label: "ui.fontFamily.stxinwei",
 		category: "serif"
 	},
 	{
 		value: "STXingkai",
-		label: "fontFamily.stxingkai",
+		label: "ui.fontFamily.stxingkai",
 		category: "serif"
 	},
 	{
 		value: "STLiti",
-		label: "fontFamily.stliti",
+		label: "ui.fontFamily.stliti",
 		category: "serif"
 	}
 ];
@@ -1166,7 +1172,7 @@ const FontFamilyItem = ({ id, value }) => {
 			type: "button",
 			onClick: () => handleSelectFont(font.value),
 			children: [localeService.t(font.label), !fontService.isFontSupported(font.value) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Tooltip, {
-				title: localeService.t("fontFamily.not-supported"),
+				title: localeService.t("ui.fontFamily.not-supported"),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.InfoIcon, { className: "univer-text-gray-300 dark:!univer-text-gray-400" })
 			})]
 		}) }, font.value))
@@ -1274,35 +1280,35 @@ const FONT_SIZE_LIST = [
 ];
 const HEADING_LIST = [
 	{
-		label: "toolbar.heading.normal",
+		label: "ui.toolbar.heading.normal",
 		value: _univerjs_core.NamedStyleType.NORMAL_TEXT
 	},
 	{
-		label: "toolbar.heading.title",
+		label: "ui.toolbar.heading.title",
 		value: _univerjs_core.NamedStyleType.TITLE
 	},
 	{
-		label: "toolbar.heading.subTitle",
+		label: "ui.toolbar.heading.subTitle",
 		value: _univerjs_core.NamedStyleType.SUBTITLE
 	},
 	{
-		label: "toolbar.heading.1",
+		label: "ui.toolbar.heading.1",
 		value: _univerjs_core.NamedStyleType.HEADING_1
 	},
 	{
-		label: "toolbar.heading.2",
+		label: "ui.toolbar.heading.2",
 		value: _univerjs_core.NamedStyleType.HEADING_2
 	},
 	{
-		label: "toolbar.heading.3",
+		label: "ui.toolbar.heading.3",
 		value: _univerjs_core.NamedStyleType.HEADING_3
 	},
 	{
-		label: "toolbar.heading.4",
+		label: "ui.toolbar.heading.4",
 		value: _univerjs_core.NamedStyleType.HEADING_4
 	},
 	{
-		label: "toolbar.heading.5",
+		label: "ui.toolbar.heading.5",
 		value: _univerjs_core.NamedStyleType.HEADING_5
 	}
 ];
@@ -1494,27 +1500,6 @@ const useVirtualList = (list, options) => {
 	}];
 };
 
-//#endregion
-//#region src/components/hooks/locale.ts
-/**
-* Copyright 2023-present DreamNum Co., Ltd.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
-function t(localeService, key, ...args) {
-	return localeService.t(key);
-}
-
 //#endregion
 //#region src/components/progress-bar/ProgressBar.tsx
 /**
@@ -2026,15 +2011,17 @@ function whenEditorFocusedButNotCellEditor(contextService) {
 }
 const CopyShortcutItem = {
 	id: CopyCommand.id,
-	description: "shortcut.copy",
+	description: "ui.shortcut.copy",
 	group: "1_common-edit",
+	groupTitle: "ui.common-edit",
 	binding: 67 | 4096,
 	preconditions: whenEditorFocused
 };
 const CutShortcutItem = {
 	id: CutCommand.id,
-	description: "shortcut.cut",
+	description: "ui.shortcut.cut",
 	group: "1_common-edit",
+	groupTitle: "ui.common-edit",
 	binding: 88 | 4096,
 	preconditions: whenEditorFocused
 };
@@ -2043,22 +2030,25 @@ const CutShortcutItem = {
 */
 const OnlyDisplayPasteShortcutItem = {
 	id: PasteCommand.id,
-	description: "shortcut.paste",
+	description: "ui.shortcut.paste",
 	group: "1_common-edit",
+	groupTitle: "ui.common-edit",
 	binding: 86 | 4096,
 	preconditions: () => false
 };
 const UndoShortcutItem = {
 	id: _univerjs_core.UndoCommand.id,
-	description: "shortcut.undo",
+	description: "ui.shortcut.undo",
 	group: "1_common-edit",
+	groupTitle: "ui.common-edit",
 	binding: 90 | 4096,
 	preconditions: whenEditorFocusedButNotCellEditor
 };
 const RedoShortcutItem = {
 	id: _univerjs_core.RedoCommand.id,
-	description: "shortcut.redo",
+	description: "ui.shortcut.redo",
 	group: "1_common-edit",
+	groupTitle: "ui.common-edit",
 	binding: 89 | 4096,
 	preconditions: whenEditorFocusedButNotCellEditor
 };
@@ -2195,6 +2185,7 @@ let MenuManagerService = class MenuManagerService extends _univerjs_core.Disposa
 			["ribbon"]: {
 				["ribbon.start"]: {
 					order: 0,
+					title: "ui.ribbon.start",
 					["ribbon.start.history"]: { order: 0 },
 					["ribbon.start.format"]: { order: 1 },
 					["ribbon.start.layout"]: { order: 2 },
@@ -2202,17 +2193,20 @@ let MenuManagerService = class MenuManagerService extends _univerjs_core.Disposa
 				},
 				["ribbon.insert"]: {
 					order: 1,
+					title: "ui.ribbon.insert",
 					["ribbon.insert.edit"]: { order: 0 },
 					["ribbon.insert.media"]: { order: 1 },
 					["ribbon.insert.others"]: { order: 2 }
 				},
 				["ribbon.formulas"]: {
 					order: 2,
+					title: "ui.ribbon.formulas",
 					["ribbon.formulas.basic"]: { order: 0 },
 					["ribbon.formulas.others"]: { order: 1 }
 				},
 				["ribbon.data"]: {
 					order: 3,
+					title: "ui.ribbon.data",
 					["ribbon.data.formulas"]: { order: 0 },
 					["ribbon.data.rules"]: { order: 1 },
 					["ribbon.data.organization"]: { order: 2 },
@@ -2220,12 +2214,14 @@ let MenuManagerService = class MenuManagerService extends _univerjs_core.Disposa
 				},
 				["ribbon.view"]: {
 					order: 4,
+					title: "ui.ribbon.view",
 					["ribbon.view.display"]: { order: 0 },
 					["ribbon.view.Visibility"]: { order: 0 },
 					["ribbon.view.others"]: { order: 0 }
 				},
 				["ribbon.others"]: {
 					order: 5,
+					title: "ui.ribbon.others",
 					["ribbon.others.others"]: { order: 0 }
 				}
 			},
@@ -2320,7 +2316,8 @@ let MenuManagerService = class MenuManagerService extends _univerjs_core.Disposa
 				order: value.order,
 				title: value.title,
 				contextual: value.contextual,
-				quickLayout: value.quickLayout
+				quickLayout: value.quickLayout,
+				tiny: value.tiny
 			};
 			if (value.menuItemFactory) {
 				const item = this._injector.invoke(value.menuItemFactory);
@@ -2338,7 +2335,7 @@ let MenuManagerService = class MenuManagerService extends _univerjs_core.Disposa
 				if (menuItem.item || menuItem.children) result.push(menuItem);
 			}
 		}
-		return result;
+		return result.sort((a, b) => normalizeMenuOrder(a.order) - normalizeMenuOrder(b.order));
 	}
 	/**
 	* Get menu schema by position key
@@ -2379,6 +2376,9 @@ let MenuManagerService = class MenuManagerService extends _univerjs_core.Disposa
 	}
 };
 MenuManagerService = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_core.Injector)), __decorateParam(1, _univerjs_core.IConfigService)], MenuManagerService);
+function normalizeMenuOrder(order) {
+	return order !== null && order !== void 0 ? order : 0;
+}
 
 //#endregion
 //#region src/views/components/shortcut-panel/ShortcutPanel.tsx
@@ -2408,6 +2408,7 @@ function ShortcutPanel() {
 	const updateShortcuts = (0, react.useCallback)(() => {
 		const shortcutGroups = /* @__PURE__ */ new Map();
 		const shortcuts = shortcutService.getAllShortcuts().filter((item) => !!item.group);
+		const groupTitles = /* @__PURE__ */ new Map();
 		for (const shortcut of shortcuts) {
 			var _shortcut$description;
 			const group = shortcut.group;
@@ -2415,16 +2416,18 @@ function ShortcutPanel() {
 				title: localeService.t((_shortcut$description = shortcut.description) !== null && _shortcut$description !== void 0 ? _shortcut$description : shortcut.id),
 				shortcut: shortcutService.getShortcutDisplay(shortcut)
 			};
-			if (!/\d+_[a-zA-Z0-9]/.test(group)) throw new Error(`[ShortcutPanel]: Invalid shortcut group: ${group}!`);
+			if (!/^\d+_/.test(group)) throw new Error(`[ShortcutPanel]: Invalid shortcut group: ${group}!`);
+			if (!shortcut.groupTitle) throw new Error(`[ShortcutPanel]: Shortcut group "${group}" must provide a groupTitle!`);
+			if (!groupTitles.has(group)) groupTitles.set(group, shortcut.groupTitle);
 			if (!shortcutGroups.has(group)) shortcutGroups.set(group, []);
 			shortcutGroups.get(group).push(shortcutItem);
 		}
 		setShortcutItems(Array.from(shortcutGroups.entries()).map(([name, items]) => {
 			const groupSequence = name.split("_")[0];
-			const groupName = name.slice(groupSequence.length + 1);
+			const localeKey = groupTitles.get(name);
 			return {
 				sequence: +groupSequence,
-				name: localeService.t(groupName),
+				name: localeService.t(localeKey),
 				items: (0, _univerjs_core.dedupeBy)(items, (item) => item.title + item.shortcut)
 			};
 		}).sort((a, b) => a.sequence - b.sequence));
@@ -2461,8 +2464,9 @@ function ShortcutPanel() {
 const ToggleShortcutPanelShortcut = {
 	id: ToggleShortcutPanelOperation.id,
 	binding: 4096 | 220,
-	description: "shortcut.shortcut-panel",
-	group: "10_global-shortcut"
+	description: "ui.shortcut.shortcut-panel",
+	group: "10_global-shortcut",
+	groupTitle: "ui.global-shortcut"
 };
 let ShortcutPanelController = class ShortcutPanelController extends _univerjs_core.Disposable {
 	constructor(injector, componentManager, shortcutService, _menuManagerService, commandService) {
@@ -2513,7 +2517,7 @@ function UndoMenuItemFactory(accessor) {
 		type: 0,
 		icon: "UndoIcon",
 		title: "Undo",
-		tooltip: "toolbar.undo",
+		tooltip: "ui.shortcut.undo",
 		disabled$: undoRedoDisableFactory$(accessor, true)
 	};
 }
@@ -2523,7 +2527,7 @@ function RedoMenuItemFactory(accessor) {
 		type: 0,
 		icon: "RedoIcon",
 		title: "Redo",
-		tooltip: "toolbar.redo",
+		tooltip: "ui.shortcut.redo",
 		disabled$: undoRedoDisableFactory$(accessor, false)
 	};
 }
@@ -2533,8 +2537,8 @@ function RedoMenuItemFactory(accessor) {
 function ShortcutPanelMenuItemFactory() {
 	return {
 		id: ToggleShortcutPanelOperation.id,
-		title: "toggle-shortcut-panel",
-		tooltip: "toggle-shortcut-panel",
+		title: "ui.toggle-shortcut-panel",
+		tooltip: "ui.toggle-shortcut-panel",
 		icon: "ShortcutIcon",
 		type: 0
 	};
@@ -3084,6 +3088,7 @@ let DesktopRibbonService = class DesktopRibbonService extends _univerjs_core.Dis
 		_defineProperty(this, "_visibleContextualTabs", /* @__PURE__ */ new Set());
 		_defineProperty(this, "_contextualTabs", /* @__PURE__ */ new Set());
 		_defineProperty(this, "_lastNonContextualActivatedTab", "ribbon.start");
+		_defineProperty(this, "_hiddenSubscription", null);
 		this._initRibbonSubscription();
 	}
 	setActivatedTab(tab) {
@@ -3116,6 +3121,7 @@ let DesktopRibbonService = class DesktopRibbonService extends _univerjs_core.Dis
 		}));
 	}
 	_updateRibbon() {
+		var _this$_hiddenSubscrip;
 		const ribbon = this._filterContextualTabs(this._menuManagerService.getMenuByPositionKey("ribbon"));
 		const hiddenObservableMap = [];
 		const hiddenKeyMap = [];
@@ -3132,7 +3138,8 @@ let DesktopRibbonService = class DesktopRibbonService extends _univerjs_core.Dis
 			this._setRibbon(ribbon);
 			return;
 		}
-		(0, rxjs.combineLatest)(hiddenObservableMap).pipe((0, rxjs_operators.startWith)(new Array(hiddenObservableMap.length).fill(false))).subscribe((hiddenMap) => {
+		(_this$_hiddenSubscrip = this._hiddenSubscription) === null || _this$_hiddenSubscrip === void 0 || _this$_hiddenSubscrip.unsubscribe();
+		this._hiddenSubscription = (0, rxjs.combineLatest)(hiddenObservableMap).pipe((0, rxjs_operators.startWith)(new Array(hiddenObservableMap.length).fill(false))).subscribe((hiddenMap) => {
 			const newRibbon = [];
 			const hiddenPathMap = hiddenMap.map((hidden, index) => {
 				if (hidden) return hiddenKeyMap[index];
@@ -3173,7 +3180,7 @@ let DesktopRibbonService = class DesktopRibbonService extends _univerjs_core.Dis
 				})) newRibbon.push(newGroup);
 			}
 			this._setRibbon(newRibbon);
-		}).unsubscribe();
+		});
 	}
 	_filterContextualTabs(ribbon) {
 		this._contextualTabs.clear();
@@ -3189,12 +3196,27 @@ let DesktopRibbonService = class DesktopRibbonService extends _univerjs_core.Dis
 			var _ref, _ribbon$find;
 			const fallbackTab = (_ref = (_ribbon$find = ribbon.find((group) => group.key === this._lastNonContextualActivatedTab && !group.contextual)) !== null && _ribbon$find !== void 0 ? _ribbon$find : ribbon.find((group) => group.key === "ribbon.start")) !== null && _ref !== void 0 ? _ref : ribbon[0];
 			if (fallbackTab) this._activatedTab$.next(fallbackTab.key);
+		} else if (!activeGroup && ribbon.some((group) => group.key === "ribbon.start")) {
+			const fallbackTab = ribbon.find((group) => group.key === "ribbon.start");
+			this._activatedTab$.next(fallbackTab.key);
+			if (!fallbackTab.contextual) this._lastNonContextualActivatedTab = fallbackTab.key;
 		} else if (activeGroup && !activeGroup.contextual) this._lastNonContextualActivatedTab = activeGroup.key;
 		this._ribbon$.next(ribbon);
 	}
 	_isContextualTab(tab) {
 		return this._contextualTabs.has(tab) || this._ribbon$.getValue().some((group) => group.key === tab && group.contextual);
 	}
+	dispose() {
+		var _this$_hiddenSubscrip2;
+		(_this$_hiddenSubscrip2 = this._hiddenSubscription) === null || _this$_hiddenSubscrip2 === void 0 || _this$_hiddenSubscrip2.unsubscribe();
+		this._hiddenSubscription = null;
+		this._ribbon$.next([]);
+		this._ribbon$.complete();
+		this._activatedTab$.complete();
+		this._collapsedIds$.complete();
+		this._fakeToolbarVisible$.complete();
+		super.dispose();
+	}
 };
 DesktopRibbonService = __decorate([__decorateParam(0, IMenuManagerService), __decorateParam(1, _univerjs_core.IUniverInstanceService)], DesktopRibbonService);
 
@@ -3237,14 +3259,14 @@ function ClassicMenu({ ribbon, activatedTab, onSelectTab }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "univer-flex univer-size-full univer-items-center univer-justify-center univer-gap-1 univer-overflow-x-auto univer-rounded-md univer-bg-gray-50 univer-px-3 dark:!univer-bg-gray-900",
 		role: "tablist",
-		"aria-label": localeService.t("ribbon.menu"),
+		"aria-label": localeService.t("ui.ribbon.menu"),
 		children: ribbon.map((group) => {
 			const isActive = activatedTab === group.key;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
 				role: "tab",
 				"aria-selected": isActive,
-				title: localeService.t(group.key),
+				title: localeService.t(group.title || group.key),
 				onClick: () => onSelectTab(group),
 				className: (0, _univerjs_design.clsx)("univer-focus:outline-none univer-focus:ring-2 univer-focus:ring-primary-500 dark:!univer-focus:ring-primary-300 univer-flex univer-cursor-pointer univer-appearance-none univer-items-center univer-gap-1 univer-rounded-sm univer-border-none univer-px-2 univer-py-1 univer-text-sm univer-transition-colors", isActive ? `
                               univer-bg-primary-50 univer-font-semibold univer-text-primary-600 univer-shadow-sm
@@ -3255,7 +3277,7 @@ function ClassicMenu({ ribbon, activatedTab, onSelectTab }) {
                               univer-bg-transparent univer-text-gray-700
                               dark:!univer-text-gray-200
                             `),
-				children: localeService.t(group.key)
+				children: localeService.t(group.title || group.key)
 			}, group.key);
 		})
 	});
@@ -3272,7 +3294,9 @@ const iconMap = {
 	["ribbon.others"]: _univerjs_icons.MoreFunctionIcon
 };
 function DefaultMenu({ ribbon, activatedTab, onSelectTab }) {
+	var _ribbon$find;
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
+	const activatedTabTitle = ((_ribbon$find = ribbon.find((group) => group.key === activatedTab)) === null || _ribbon$find === void 0 ? void 0 : _ribbon$find.title) || activatedTab;
 	const [groupSelectorVisible, setGroupSelectorVisible] = (0, react.useState)(false);
 	function handleSelectTab(tab) {
 		onSelectTab(tab);
@@ -3299,10 +3323,10 @@ function DefaultMenu({ ribbon, activatedTab, onSelectTab }) {
 						className: "univer-flex univer-flex-col",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
 							className: "univer-text-sm univer-font-semibold univer-text-gray-800 dark:!univer-text-gray-200",
-							children: localeService.t(group.key)
+							children: localeService.t(group.title || group.key)
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: "univer-text-xs univer-text-gray-400",
-							children: localeService.t(`${group.key}Desc`)
+							children: localeService.t(`${group.title || group.key}Desc`)
 						})]
 					})]
 				}, group.key);
@@ -3312,7 +3336,7 @@ function DefaultMenu({ ribbon, activatedTab, onSelectTab }) {
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
 			className: "univer-mr-2 univer-flex univer-h-7 univer-cursor-pointer univer-items-center univer-gap-1.5 univer-whitespace-nowrap !univer-rounded-full univer-bg-gray-700 univer-pl-3 univer-pr-2 univer-text-sm univer-text-white dark:!univer-bg-gray-200 dark:!univer-text-gray-800",
 			onClick: () => setGroupSelectorVisible(true),
-			children: [localeService.t(activatedTab), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, { className: "univer-text-gray-200 dark:!univer-text-gray-500" })]
+			children: [localeService.t(activatedTabTitle), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, { className: "univer-text-gray-200 dark:!univer-text-gray-500" })]
 		})
 	});
 }
@@ -3534,6 +3558,10 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 	function handleVisibleChange(visible) {
 		setDropdownVisible(visible);
 	}
+	function handleOptionSelect(option) {
+		onOptionSelect(option);
+		setDropdownVisible(false);
+	}
 	(0, react.useEffect)(() => {
 		const subscriptions = [];
 		menuItems.forEach((item) => {
@@ -3572,7 +3600,7 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 		overlay: options.map((option, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Label, {
 			value,
 			option,
-			onOptionSelect
+			onOptionSelect: handleOptionSelect
 		}, index)),
 		children
 	});
@@ -3586,15 +3614,16 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 					icon: option.icon,
 					value,
 					option,
-					onOptionSelect
+					onOptionSelect: handleOptionSelect
 				}),
 				disabled: option.disabled,
 				onSelect: () => {
 					if (typeof option.value === "undefined") return;
-					onOptionSelect === null || onOptionSelect === void 0 || onOptionSelect({ ...option });
+					handleOptionSelect({ ...option });
 				}
 			};
 		});
+		if (filteredMenuItems.length) items.push({ type: "separator" });
 		for (const menuItem of filteredMenuItems) {
 			if (!menuItem.item) continue;
 			const { title, id, commandId, icon } = menuItem.item;
@@ -3610,7 +3639,7 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 					} }
 				}),
 				onSelect: () => {
-					onOptionSelect === null || onOptionSelect === void 0 || onOptionSelect({
+					handleOptionSelect({
 						commandId,
 						id
 					});
@@ -3643,7 +3672,7 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 						} }
 					}),
 					onSelect: () => {
-						onOptionSelect === null || onOptionSelect === void 0 || onOptionSelect({
+						handleOptionSelect({
 							commandId,
 							id
 						});
@@ -3849,13 +3878,17 @@ function Ribbon(props) {
 		}
 		return ribbonData;
 	}, [ribbonType, ribbonData]);
+	const activatedTabTitle = (0, react.useMemo)(() => {
+		var _ribbon$find;
+		return ((_ribbon$find = ribbon.find((group) => group.key === activatedTab)) === null || _ribbon$find === void 0 ? void 0 : _ribbon$find.title) || activatedTab;
+	}, [ribbon, activatedTab]);
 	const handleSelectTab = (0, react.useCallback)((group) => {
 		toolbarItemRefs.current = {};
 		ribbonService.setActivatedTab(group.key);
 	}, []);
 	const activeGroup = (0, react.useMemo)(() => {
-		var _ribbon$find$children, _ribbon$find;
-		const allGroups = (_ribbon$find$children = (_ribbon$find = ribbon.find((group) => group.key === activatedTab)) === null || _ribbon$find === void 0 ? void 0 : _ribbon$find.children) !== null && _ribbon$find$children !== void 0 ? _ribbon$find$children : [];
+		var _ribbon$find$children, _ribbon$find2;
+		const allGroups = (_ribbon$find$children = (_ribbon$find2 = ribbon.find((group) => group.key === activatedTab)) === null || _ribbon$find2 === void 0 ? void 0 : _ribbon$find2.children) !== null && _ribbon$find$children !== void 0 ? _ribbon$find$children : [];
 		const visibleGroups = [];
 		const hiddenGroups = [];
 		for (const item of allGroups) if (item.children) {
@@ -3885,14 +3918,14 @@ function Ribbon(props) {
 			for (const entry of entries) {
 				ribbonService.setFakeToolbarVisible(true);
 				timer = requestAnimationFrame(() => {
-					var _ribbon$find$children2, _ribbon$find2;
+					var _ribbon$find$children2, _ribbon$find3;
 					const { width: avaliableWidth } = entry.contentRect;
 					const sortedToolbarItems = Object.values(toolbarItemRefs.current).sort((a, b) => {
 						return a.order - b.order || a.groupOrder - b.groupOrder || a.itemOrder - b.itemOrder;
 					});
 					const newCollapsedIds = [];
 					let totalWidth = 32;
-					const gapWidth = (((_ribbon$find$children2 = (_ribbon$find2 = ribbon.find((group) => group.key === activatedTab)) === null || _ribbon$find2 === void 0 ? void 0 : _ribbon$find2.children) !== null && _ribbon$find$children2 !== void 0 ? _ribbon$find$children2 : []).length - 1) * 8;
+					const gapWidth = (((_ribbon$find$children2 = (_ribbon$find3 = ribbon.find((group) => group.key === activatedTab)) === null || _ribbon$find3 === void 0 ? void 0 : _ribbon$find3.children) !== null && _ribbon$find$children2 !== void 0 ? _ribbon$find$children2 : []).length - 1) * 8;
 					totalWidth += gapWidth;
 					for (const { el, key } of sortedToolbarItems) {
 						const { width } = el.getBoundingClientRect();
@@ -3917,7 +3950,7 @@ function Ribbon(props) {
 			children: activeGroup.allGroups.map((groupItem, index) => {
 				var _groupItem$children, _groupItem$children2;
 				return (((_groupItem$children = groupItem.children) === null || _groupItem$children === void 0 ? void 0 : _groupItem$children.length) || groupItem.item) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "univer-grid univer-shrink-0 univer-grid-flow-col univer-gap-2 univer-px-2",
+					className: "\n                              univer-grid univer-shrink-0 univer-grid-flow-col univer-gap-2 univer-px-2\n                              empty:univer-hidden\n                            ",
 					children: groupItem.children && ((_groupItem$children2 = groupItem.children) === null || _groupItem$children2 === void 0 ? void 0 : _groupItem$children2.map((child) => child.item && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarItem, {
 						...child.item,
 						ref: (ref) => {
@@ -3938,7 +3971,7 @@ function Ribbon(props) {
 		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			"data-u-comp": "ribbon-header-menu",
 			className: (0, _univerjs_design.clsx)("univer-relative univer-select-none", { "univer-h-9": ribbonType === "classic" || headerMenuComponents && headerMenuComponents.size > 0 }),
-			children: [ribbonType === "classic" && ribbon.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClassicMenu, {
+			children: [ribbonType === "classic" && ribbon.length >= 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClassicMenu, {
 				ribbon,
 				activatedTab,
 				onSelectTab: handleSelectTab
@@ -3949,11 +3982,10 @@ function Ribbon(props) {
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: (0, _univerjs_design.clsx)("univer-box-border univer-grid univer-h-10 univer-grid-flow-col univer-items-center univer-px-3 univer-text-sm", {
-				"univer-grid-cols-[1fr] univer-justify-center": ribbonType === "classic",
-				"univer-grid-cols-[auto,1fr]": ribbon.length > 1 && ribbonType !== "classic",
-				"univer-grid-cols-none": ribbon.length === 1
+				"univer-grid-cols-[1fr] univer-justify-center": ribbonType === "classic" || ribbon.length === 1,
+				"univer-grid-cols-[auto,1fr]": ribbon.length > 1 && ribbonType !== "classic"
 			}, _univerjs_design.borderBottomClassName),
-			children: [ribbonType === "collapsed" && ribbon.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultMenu, {
+			children: [ribbonType === "collapsed" && ribbon.length >= 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefaultMenu, {
 				ribbon,
 				activatedTab,
 				onSelectTab: handleSelectTab
@@ -3962,11 +3994,11 @@ function Ribbon(props) {
 				ref: containerRef,
 				className: (0, _univerjs_design.clsx)("univer-flex univer-overflow-hidden", _univerjs_design.divideXClassName, { "univer-justify-center": ribbonType === "classic" }),
 				role: "toolbar",
-				"aria-label": localeService.t(activatedTab),
+				"aria-label": localeService.t(activatedTabTitle),
 				children: [activeGroup.visibleGroups.map((groupItem) => {
 					var _groupItem$children3, _groupItem$children4;
 					return (((_groupItem$children3 = groupItem.children) === null || _groupItem$children3 === void 0 ? void 0 : _groupItem$children3.length) || groupItem.item) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "univer-grid univer-shrink-0 univer-grid-flow-col univer-gap-2 univer-px-2",
+						className: "\n                                  univer-grid univer-shrink-0 univer-grid-flow-col univer-gap-2 univer-px-2\n                                  empty:univer-hidden\n                                ",
 						children: groupItem.children && ((_groupItem$children4 = groupItem.children) === null || _groupItem$children4 === void 0 ? void 0 : _groupItem$children4.map((child) => child.item && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarItem, { ...child.item }, child.key)))
 					}) }, groupItem.key);
 				}), collapsedIds.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -3994,7 +4026,7 @@ function Ribbon(props) {
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 							type: "button",
 							className: toolbarButtonClassName,
-							"aria-label": localeService.t("ribbon.more"),
+							"aria-label": localeService.t("ui.ribbon.more"),
 							"aria-haspopup": "true",
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreFunctionIcon, {})
 						})
@@ -4119,7 +4151,7 @@ function DesignTinyMenuGroup({ items }) {
 			const ele = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: (0, _univerjs_design.clsx)("univer-flex univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-md hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-900", { "univer-bg-gray-50 dark:!univer-bg-gray-900": item.active }, item.className),
 				onClick: () => item.onClick(),
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(item.Icon, { className: "univer-size-4 univer-text-gray-900 dark:!univer-text-gray-200" })
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(item.Icon, { className: (0, _univerjs_design.clsx)("univer-size-4 univer-text-gray-900 dark:!univer-text-gray-200", item.iconClassName) })
 			}, item.key);
 			return item.tooltip ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Tooltip, {
 				title: item.tooltip,
@@ -4131,8 +4163,21 @@ function DesignTinyMenuGroup({ items }) {
 
 //#endregion
 //#region src/components/menu/desktop/TinyMenuGroup.tsx
+const EMPTY_HIDDEN_ITEM_IDS = [];
+function resolveMenuItemActiveState(itemId, observableActive, activeItemIds) {
+	if (activeItemIds) return Boolean(itemId && activeItemIds.includes(itemId));
+	return observableActive;
+}
+function getTinyMenuChildStateKey(child) {
+	var _child$item$id, _child$item;
+	return (_child$item$id = (_child$item = child.item) === null || _child$item === void 0 ? void 0 : _child$item.id) !== null && _child$item$id !== void 0 ? _child$item$id : child.key;
+}
+function getVisibleTinyMenuChildren(children, hiddenItemKeys) {
+	const hiddenSet = new Set(hiddenItemKeys);
+	return children.filter((child) => !hiddenSet.has(getTinyMenuChildStateKey(child)));
+}
 function QuickTileMenuItem(props) {
-	const { menuSchema, onOptionSelect } = props;
+	const { menuSchema, activeItemIds, onOptionSelect } = props;
 	const componentManager = (0, _wendellhu_redi_react_bindings.useDependency)(ComponentManager);
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
 	const menuItem = menuSchema.item;
@@ -4147,7 +4192,7 @@ function QuickTileMenuItem(props) {
                       univer-cursor-pointer
                       hover:univer-bg-gray-50
                       dark:hover:!univer-bg-gray-600
-                    `, activated && `
+                    `, resolveMenuItemActiveState(menuItem.id, activated, activeItemIds) && `
                   univer-bg-primary-50 univer-text-primary-700 univer-ring-1 univer-ring-primary-600
                   dark:!univer-bg-primary-900 dark:!univer-text-primary-100
                 `),
@@ -4172,20 +4217,21 @@ function QuickTileMenuItem(props) {
 	});
 }
 function UITinyMenuGroup(props) {
-	const { item, onOptionSelect } = props;
+	const { item, activeItemIds, hiddenItemIds = EMPTY_HIDDEN_ITEM_IDS, onOptionSelect } = props;
 	const [activeItems, setActiveItems] = (0, react.useState)([]);
+	const [hiddenItems, setHiddenItems] = (0, react.useState)([]);
 	const componentManager = (0, _wendellhu_redi_react_bindings.useDependency)(ComponentManager);
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
 	(0, react.useEffect)(() => {
 		if (!item.children) return;
 		const observables = item.children.map((child) => {
-			var _child$item$activated, _child$item;
-			return (0, _univerjs_core.convertObservableToBehaviorSubject)((_child$item$activated = (_child$item = child.item) === null || _child$item === void 0 ? void 0 : _child$item.activated$) !== null && _child$item$activated !== void 0 ? _child$item$activated : (0, rxjs.of)(false), false);
+			var _child$item$activated, _child$item2;
+			return (0, _univerjs_core.convertObservableToBehaviorSubject)((_child$item$activated = (_child$item2 = child.item) === null || _child$item2 === void 0 ? void 0 : _child$item2.activated$) !== null && _child$item$activated !== void 0 ? _child$item$activated : (0, rxjs.of)(false), false);
 		});
 		const subscription = (0, rxjs.combineLatest)(observables).subscribe((activedArr) => {
 			const actived = activedArr.map((actived, index) => ({
 				actived,
-				item: item.children[index].item.id
+				item: getTinyMenuChildStateKey(item.children[index])
 			})).filter((actived) => actived.actived);
 			if (actived.length === 0) setActiveItems([]);
 			else setActiveItems(actived.map((actived) => actived.item));
@@ -4197,34 +4243,65 @@ function UITinyMenuGroup(props) {
 			});
 		};
 	}, [item]);
+	(0, react.useEffect)(() => {
+		if (!item.children) return;
+		const observables = item.children.map((child) => {
+			var _child$item$hidden$, _child$item3;
+			return (0, _univerjs_core.convertObservableToBehaviorSubject)((_child$item$hidden$ = (_child$item3 = child.item) === null || _child$item3 === void 0 ? void 0 : _child$item3.hidden$) !== null && _child$item$hidden$ !== void 0 ? _child$item$hidden$ : (0, rxjs.of)(false), false);
+		});
+		const subscription = (0, rxjs.combineLatest)(observables).subscribe((hiddenArr) => {
+			const hidden = hiddenArr.map((hidden, index) => ({
+				hidden,
+				item: getTinyMenuChildStateKey(item.children[index])
+			})).filter((hidden) => hidden.hidden);
+			if (hidden.length === 0) setHiddenItems([]);
+			else setHiddenItems(hidden.map((hidden) => hidden.item));
+		});
+		return () => {
+			subscription.unsubscribe();
+			observables.forEach((observable) => {
+				observable.complete();
+			});
+		};
+	}, [item]);
+	const visibleChildren = (0, react.useMemo)(() => {
+		var _item$children;
+		return getVisibleTinyMenuChildren((_item$children = item.children) !== null && _item$children !== void 0 ? _item$children : [], [...hiddenItems, ...hiddenItemIds]);
+	}, [
+		hiddenItemIds,
+		hiddenItems,
+		item.children
+	]);
 	if (!item.children) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DesignTinyMenuGroup, { items: item.children.map((child) => {
-		var _child$item$id2, _child$item7;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DesignTinyMenuGroup, { items: visibleChildren.map((child) => {
+		var _child$item9, _child$item10, _child$item$id3, _child$item11;
 		return {
 			key: child.key,
 			onClick: () => {
-				var _child$item$id, _child$item2, _child$item3, _child$item4, _child$item5, _child$item6;
+				var _child$item$id2, _child$item4, _child$item5, _child$item6, _child$item7, _child$item8;
 				onOptionSelect === null || onOptionSelect === void 0 || onOptionSelect({
-					label: (_child$item$id = (_child$item2 = child.item) === null || _child$item2 === void 0 ? void 0 : _child$item2.id) !== null && _child$item$id !== void 0 ? _child$item$id : child.key,
-					commandId: (_child$item3 = child.item) === null || _child$item3 === void 0 ? void 0 : _child$item3.commandId,
-					id: (_child$item4 = child.item) === null || _child$item4 === void 0 ? void 0 : _child$item4.id,
-					tooltip: ((_child$item5 = child.item) === null || _child$item5 === void 0 ? void 0 : _child$item5.tooltip) && localeService.t((_child$item6 = child.item) === null || _child$item6 === void 0 ? void 0 : _child$item6.tooltip)
+					label: (_child$item$id2 = (_child$item4 = child.item) === null || _child$item4 === void 0 ? void 0 : _child$item4.id) !== null && _child$item$id2 !== void 0 ? _child$item$id2 : child.key,
+					commandId: (_child$item5 = child.item) === null || _child$item5 === void 0 ? void 0 : _child$item5.commandId,
+					id: (_child$item6 = child.item) === null || _child$item6 === void 0 ? void 0 : _child$item6.id,
+					tooltip: ((_child$item7 = child.item) === null || _child$item7 === void 0 ? void 0 : _child$item7.tooltip) && localeService.t((_child$item8 = child.item) === null || _child$item8 === void 0 ? void 0 : _child$item8.tooltip)
 				});
 			},
 			className: "",
+			iconClassName: ((_child$item9 = child.item) === null || _child$item9 === void 0 ? void 0 : _child$item9.icon) === "TextTypeIcon" ? "!univer-size-3.5" : void 0,
 			Icon: componentManager.get(child.item.icon),
-			active: activeItems.includes((_child$item$id2 = (_child$item7 = child.item) === null || _child$item7 === void 0 ? void 0 : _child$item7.id) !== null && _child$item$id2 !== void 0 ? _child$item$id2 : "")
+			active: resolveMenuItemActiveState((_child$item10 = child.item) === null || _child$item10 === void 0 ? void 0 : _child$item10.id, activeItems.includes((_child$item$id3 = (_child$item11 = child.item) === null || _child$item11 === void 0 ? void 0 : _child$item11.id) !== null && _child$item$id3 !== void 0 ? _child$item$id3 : ""), activeItemIds)
 		};
 	}) });
 }
 function UIQuickTileMenuGroup(props) {
-	var _item$children;
-	const { item, onOptionSelect } = props;
-	if (!((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length)) return null;
+	var _item$children2;
+	const { item, activeItemIds, hiddenItemIds = EMPTY_HIDDEN_ITEM_IDS, onOptionSelect } = props;
+	if (!((_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.length)) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "univer-item-center univer-grid univer-grid-cols-3 univer-gap-1.5 univer-py-1",
-		children: item.children.map((menuSchema) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QuickTileMenuItem, {
+		children: getVisibleTinyMenuChildren(item.children, hiddenItemIds).map((menuSchema) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QuickTileMenuItem, {
 			menuSchema,
+			activeItemIds,
 			onOptionSelect
 		}, menuSchema.key))
 	});
@@ -4236,6 +4313,7 @@ const contentClassName = "univer-inline-flex univer-items-center univer-gap-2";
 const menuViewportPadding = 8;
 const submenuOverlapOffset = 2;
 const submenuVisualGap = 20;
+const CONTEXT_MENU_SUBMENU_CLOSE_DELAY = 500;
 const CONTEXT_MENU_SUBMENU_PORTAL_ATTR = "data-u-context-menu-submenu";
 function isNonSelectableLabel(label) {
 	return typeof label === "object" && (label === null || label === void 0 ? void 0 : label.selectable) === false;
@@ -4243,9 +4321,15 @@ function isNonSelectableLabel(label) {
 function isNonHoverableLabel(label) {
 	return typeof label === "object" && (label === null || label === void 0 ? void 0 : label.hoverable) === false;
 }
+function hasRenderableContextMenuSchema(menuSchema) {
+	var _menuSchema$children;
+	if (menuSchema.item) return true;
+	if (!((_menuSchema$children = menuSchema.children) === null || _menuSchema$children === void 0 ? void 0 : _menuSchema$children.length)) return false;
+	return menuSchema.children.some((childSchema) => Boolean(childSchema.item));
+}
 function ContextMenuPanel(props) {
 	var _layoutService$rootCo, _layoutService$rootCo2;
-	const { menuType, menuSessionVersion = 0, className, onOptionSelect } = props;
+	const { menuType, menuSessionVersion = 0, className, activeItemIds, hiddenItemIds, onOptionSelect } = props;
 	const menuManagerService = (0, _wendellhu_redi_react_bindings.useDependency)(IMenuManagerService);
 	const layoutService = (0, _wendellhu_redi_react_bindings.useDependency)(ILayoutService);
 	const [menuElement, setMenuElement] = (0, react.useState)(null);
@@ -4289,23 +4373,26 @@ function ContextMenuPanel(props) {
 			menuSchemas: menuItems,
 			menuSessionVersion,
 			submenuPortalContainer,
+			activeItemIds,
+			hiddenItemIds,
 			onOptionSelect,
 			maxMenuHeight
 		})
 	});
 }
 function ContextMenuMenu(props) {
-	const { menuSchemas, menuSessionVersion, submenuPortalContainer, onOptionSelect, maxMenuHeight } = props;
+	const { menuSchemas, menuSessionVersion, submenuPortalContainer, activeItemIds, hiddenItemIds, onOptionSelect, maxMenuHeight } = props;
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
 	const hiddenGroupStates = useContextGroupHiddenStates$1(menuSchemas);
 	const visibleSchemas = (0, react.useMemo)(() => {
 		return menuSchemas.filter((item) => {
+			if (!hasRenderableContextMenuSchema(item)) return false;
 			if (!item.children) return true;
 			return !hiddenGroupStates[item.key];
 		});
 	}, [hiddenGroupStates, menuSchemas]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: visibleSchemas.map((menuSchema, index) => {
-		var _menuSchema$children;
+		var _menuSchema$children2;
 		const hasSeparator = index !== visibleSchemas.length - 1;
 		if (menuSchema.item) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextMenuMenuItem, {
 			menuKey: menuSchema.key,
@@ -4313,19 +4400,38 @@ function ContextMenuMenu(props) {
 			menuSessionVersion,
 			submenuPortalContainer,
 			onOptionSelect,
-			maxMenuHeight
+			maxMenuHeight,
+			hiddenItemIds
 		}, menuSchema.key);
-		if (!((_menuSchema$children = menuSchema.children) === null || _menuSchema$children === void 0 ? void 0 : _menuSchema$children.length)) return null;
+		if (!((_menuSchema$children2 = menuSchema.children) === null || _menuSchema$children2 === void 0 ? void 0 : _menuSchema$children2.length)) return null;
 		if (menuSchema.quickLayout) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: (0, _univerjs_design.clsx)("univer-py-1", hasSeparator && _univerjs_design.borderBottomClassName),
 			children: menuSchema.quickLayout === "tile" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UIQuickTileMenuGroup, {
 				item: menuSchema,
+				activeItemIds,
+				hiddenItemIds,
 				onOptionSelect
 			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UITinyMenuGroup, {
 				item: menuSchema,
+				activeItemIds,
+				hiddenItemIds,
 				onOptionSelect
 			})
 		}, menuSchema.key);
+		if (menuSchema.tiny) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, _univerjs_design.clsx)("univer-flex univer-items-center univer-gap-1 univer-py-1", hasSeparator && _univerjs_design.borderBottomClassName),
+			children: menuSchema.children.map((childSchema) => childSchema.item && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextMenuMenuItem, {
+				menuKey: childSchema.key,
+				menuItem: childSchema.item,
+				menuSessionVersion,
+				submenuPortalContainer,
+				activeItemIds,
+				hiddenItemIds,
+				onOptionSelect,
+				maxMenuHeight,
+				compact: true
+			}, childSchema.key))
+		}, menuSchema.key);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: (0, _univerjs_design.clsx)("univer-grid univer-gap-1 univer-py-1", hasSeparator && _univerjs_design.borderBottomClassName),
 			children: [menuSchema.title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
@@ -4336,6 +4442,8 @@ function ContextMenuMenu(props) {
 				menuItem: childSchema.item,
 				menuSessionVersion,
 				submenuPortalContainer,
+				activeItemIds,
+				hiddenItemIds,
 				onOptionSelect,
 				maxMenuHeight
 			}, childSchema.key))]
@@ -4343,8 +4451,9 @@ function ContextMenuMenu(props) {
 	}) });
 }
 function ContextMenuMenuItem(props) {
-	const { menuKey, menuItem, menuSessionVersion, submenuPortalContainer, onOptionSelect, maxMenuHeight } = props;
-	const direction = (0, _wendellhu_redi_react_bindings.useObservable)((0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService).direction$);
+	const { menuKey, menuItem, menuSessionVersion, submenuPortalContainer, activeItemIds, hiddenItemIds = [], compact = false, onOptionSelect, maxMenuHeight } = props;
+	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
+	const direction = (0, _wendellhu_redi_react_bindings.useObservable)(localeService.direction$);
 	const menuManagerService = (0, _wendellhu_redi_react_bindings.useDependency)(IMenuManagerService);
 	const disabled = (0, _wendellhu_redi_react_bindings.useObservable)(menuItem.disabled$, false);
 	const activated = (0, _wendellhu_redi_react_bindings.useObservable)(menuItem.activated$, false);
@@ -4362,6 +4471,7 @@ function ContextMenuMenuItem(props) {
 	const [submenuPlacement, setSubmenuPlacement] = (0, react.useState)("right");
 	const menuItemElementRef = (0, react.useRef)(null);
 	const submenuElementRef = (0, react.useRef)(null);
+	const submenuCloseTimerRef = (0, react.useRef)(null);
 	const selections = (0, react.useMemo)(() => {
 		if (menuItem.type !== 1 && menuItem.type !== 2) return [];
 		if (selectionsFromObservable) return selectionsFromObservable;
@@ -4383,9 +4493,23 @@ function ContextMenuMenuItem(props) {
 	const hasSelectionSubmenu = selections.length > 0;
 	const hasSubItemSubmenu = subMenuItems.length > 0;
 	const hasSubmenu = hasSelectionSubmenu || hasSubItemSubmenu;
+	const selectionsCommandId = selectorItem.selectionsCommandId;
+	const clearSubmenuCloseTimer = (0, react.useCallback)(() => {
+		if (submenuCloseTimerRef.current == null) return;
+		clearTimeout(submenuCloseTimerRef.current);
+		submenuCloseTimerRef.current = null;
+	}, []);
+	const scheduleSubmenuClose = (0, react.useCallback)(() => {
+		clearSubmenuCloseTimer();
+		submenuCloseTimerRef.current = setTimeout(() => {
+			submenuCloseTimerRef.current = null;
+			setSubmenuVisible(false);
+		}, 500);
+	}, [clearSubmenuCloseTimer]);
 	(0, react.useEffect)(() => {
 		setInputValue(value);
 	}, [value]);
+	(0, react.useEffect)(() => () => clearSubmenuCloseTimer(), [clearSubmenuCloseTimer]);
 	(0, react.useEffect)(() => {
 		if (!submenuVisible) {
 			setSubmenuPositionReady(false);
@@ -4422,19 +4546,30 @@ function ContextMenuMenuItem(props) {
 		hasSelectionSubmenu,
 		hasSubItemSubmenu
 	]);
-	if (hidden) return null;
+	const hiddenById = menuItem.id != null && hiddenItemIds.includes(menuItem.id) || hiddenItemIds.includes(menuKey);
+	if (hidden || hiddenById) return null;
 	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);
+		clearSubmenuCloseTimer();
 		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" : `
+	const itemClassName = (0, _univerjs_design.clsx)(compact ? `
+              univer-relative univer-flex univer-size-8 univer-items-center univer-justify-center univer-rounded-md
+              univer-border-none univer-bg-transparent univer-p-0 univer-text-left univer-text-sm
+              dark:!univer-text-white
+            ` : `
+              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
               dark:hover:!univer-bg-gray-600
-            `, activated && `
+            `, resolveMenuItemActiveState(menuItem.id, activated, activeItemIds) && `
           univer-bg-gray-200
           dark:!univer-bg-gray-600
         `);
@@ -4442,7 +4577,7 @@ function ContextMenuMenuItem(props) {
 		className: contentClassName,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomLabel, {
 			value: inputValue,
-			title: menuItem.title,
+			title: compact ? void 0 : menuItem.title,
 			label: menuItem.label,
 			icon: menuItem.icon,
 			onChange
@@ -4458,6 +4593,7 @@ function ContextMenuMenuItem(props) {
 		ref: menuItemElementRef,
 		className: "univer-relative",
 		onMouseEnter: () => {
+			clearSubmenuCloseTimer();
 			if (hasSubmenu && !disabled) {
 				setSubmenuPositionReady(false);
 				setSubmenuVisible(true);
@@ -4468,7 +4604,7 @@ function ContextMenuMenuItem(props) {
 				var _submenuElementRef$cu;
 				const nextTarget = event.relatedTarget;
 				if (nextTarget && ((_submenuElementRef$cu = submenuElementRef.current) === null || _submenuElementRef$cu === void 0 ? void 0 : _submenuElementRef$cu.contains(nextTarget))) return;
-				setSubmenuVisible(false);
+				scheduleSubmenuClose();
 			}
 		},
 		children: [renderAsContainer ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -4479,8 +4615,21 @@ function ContextMenuMenuItem(props) {
 			type: "button",
 			className: interactiveItemClassName,
 			disabled,
+			title: compact && typeof menuItem.tooltip === "string" ? localeService.t(menuItem.tooltip) : void 0,
 			onClick: () => {
+				clearSubmenuCloseTimer();
 				if (hasSubmenu) {
+					if (canExecuteItem) {
+						const item = menuItem;
+						onOptionSelect === null || onOptionSelect === void 0 || onOptionSelect({
+							commandId: item.commandId,
+							params: item.params,
+							value: inputValue,
+							id: item.id,
+							label: menuKey
+						});
+						return;
+					}
 					setSubmenuPositionReady(false);
 					setSubmenuVisible(true);
 					return;
@@ -4489,12 +4638,13 @@ function ContextMenuMenuItem(props) {
 				const item = menuItem;
 				onOptionSelect === null || onOptionSelect === void 0 || onOptionSelect({
 					commandId: item.commandId,
+					params: item.params,
 					value: inputValue,
 					id: item.id,
 					label: menuKey
 				});
 			},
-			children: [contentNode, hasSubmenu && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreIcon, { className: "univer-size-3.5 univer-text-gray-400 dark:!univer-text-gray-200" })]
+			children: [contentNode, hasSubmenu && !compact && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreIcon, { className: "univer-size-3.5 univer-text-gray-400 dark:!univer-text-gray-200" })]
 		}), hasSubmenu && submenuVisible && (submenuPortalContainer ? (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			ref: submenuElementRef,
 			dir: direction,
@@ -4510,11 +4660,12 @@ function ContextMenuMenuItem(props) {
 				visibility: submenuPositionReady ? "visible" : "hidden",
 				pointerEvents: submenuPositionReady ? "auto" : "none"
 			},
+			onMouseEnter: clearSubmenuCloseTimer,
 			onMouseLeave: (event) => {
 				var _menuItemElementRef$c;
 				const nextTarget = event.relatedTarget;
 				if (nextTarget && ((_menuItemElementRef$c = menuItemElementRef.current) === null || _menuItemElementRef$c === void 0 ? void 0 : _menuItemElementRef$c.contains(nextTarget))) return;
-				setSubmenuVisible(false);
+				scheduleSubmenuClose();
 			},
 			onWheel: (event) => event.stopPropagation(),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -4543,12 +4694,13 @@ function ContextMenuMenuItem(props) {
 								label: option.label,
 								icon: option.icon,
 								onChange: (optionValue) => {
+									var _option$commandId;
 									onSubmenuOptionSelect === null || onSubmenuOptionSelect === void 0 || onSubmenuOptionSelect({
 										...option,
 										value: optionValue,
 										id: menuItem.id,
 										label: menuKey,
-										commandId: option.commandId
+										commandId: (_option$commandId = option.commandId) !== null && _option$commandId !== void 0 ? _option$commandId : selectionsCommandId
 									});
 								}
 							})
@@ -4558,11 +4710,12 @@ function ContextMenuMenuItem(props) {
 							className: optionClassName,
 							disabled: option.disabled,
 							onClick: () => {
+								var _option$commandId2;
 								onSubmenuOptionSelect === null || onSubmenuOptionSelect === void 0 || onSubmenuOptionSelect({
 									...option,
 									id: menuItem.id,
 									label: menuKey,
-									commandId: option.commandId
+									commandId: (_option$commandId2 = option.commandId) !== null && _option$commandId2 !== void 0 ? _option$commandId2 : selectionsCommandId
 								});
 							},
 							children: optionContentNode
@@ -4576,6 +4729,8 @@ function ContextMenuMenuItem(props) {
 					menuSchemas: subMenuItems,
 					menuSessionVersion,
 					submenuPortalContainer,
+					activeItemIds,
+					hiddenItemIds,
 					onOptionSelect: onSubmenuOptionSelect,
 					maxMenuHeight
 				})]
@@ -4587,8 +4742,8 @@ function useContextGroupHiddenStates$1(menuSchemas) {
 	const [hiddenStates, setHiddenStates] = (0, react.useState)({});
 	(0, react.useEffect)(() => {
 		const subscriptions = menuSchemas.map((menuSchema) => {
-			var _menuSchema$children2;
-			if (!((_menuSchema$children2 = menuSchema.children) === null || _menuSchema$children2 === void 0 ? void 0 : _menuSchema$children2.length)) return null;
+			var _menuSchema$children3;
+			if (!((_menuSchema$children3 = menuSchema.children) === null || _menuSchema$children3 === void 0 ? void 0 : _menuSchema$children3.length)) return null;
 			return (0, rxjs.combineLatest)(menuSchema.children.map((childSchema) => {
 				var _childSchema$item$hid, _childSchema$item;
 				return (_childSchema$item$hid = (_childSchema$item = childSchema.item) === null || _childSchema$item === void 0 ? void 0 : _childSchema$item.hidden$) !== null && _childSchema$item$hid !== void 0 ? _childSchema$item$hid : (0, rxjs.of)(false);
@@ -4757,7 +4912,9 @@ function DesktopContextMenu() {
 		onRequestClose: handleClose,
 		onOptionSelect: (params) => {
 			const { label: id, commandId, value } = params;
-			if (commandService) commandService.executeCommand(commandId !== null && commandId !== void 0 ? commandId : id, { value });
+			const rawParams = typeof params.params === "function" ? params.params() : params.params;
+			const commandParams = typeof rawParams === "undefined" ? { value } : rawParams;
+			if (commandService) commandService.executeCommand(commandId !== null && commandId !== void 0 ? commandId : id, commandParams);
 			injector.get(ILayoutService).focus();
 			handleClose();
 		}
@@ -5296,7 +5453,7 @@ const IUIController = (0, _univerjs_core.createIdentifier)("univer.ui.ui-control
 //#endregion
 //#region package.json
 var name = "@univerjs/ui";
-var version = "0.24.0";
+var version = "0.25.0";
 
 //#endregion
 //#region src/views/components/ribbon/MobileRibbon.tsx
@@ -5364,7 +5521,7 @@ function MobileRibbon(props) {
 		const container = toolbarScrollRef.current;
 		if (!container) return;
 		container.scrollBy({
-			left: direction === "left" ? -toolbarScrollOffset : toolbarScrollOffset,
+			left: direction === "left" ? -168 : toolbarScrollOffset,
 			behavior: "smooth"
 		});
 	}
@@ -5405,7 +5562,7 @@ function MobileRibbon(props) {
                                       dark:!univer-text-gray-200
                                     `),
 							onClick: () => selectTab(index),
-							children: [localeService.t(group.key), active && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "\n                                          univer-absolute univer-bottom-0 univer-left-1/2 univer-h-0.5 univer-w-8\n                                          -univer-translate-x-1/2 univer-rounded-full univer-bg-primary-600\n                                          dark:!univer-bg-primary-400\n                                        " })]
+							children: [localeService.t(group.title || group.key), active && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "\n                                          univer-absolute univer-bottom-0 univer-left-1/2 univer-h-0.5 univer-w-8\n                                          -univer-translate-x-1/2 univer-rounded-full univer-bg-primary-600\n                                          dark:!univer-bg-primary-400\n                                        " })]
 						}, group.key);
 					})
 				}),
@@ -5826,8 +5983,8 @@ function MobileContextMenu() {
 	}
 	const sheetTitle = (0, react.useMemo)(() => {
 		switch (menuType) {
-			case "contextMenu.rowHeader": return localeService.t("row");
-			case "contextMenu.colHeader": return localeService.t("column");
+			case "contextMenu.rowHeader": return localeService.t("ui.row");
+			case "contextMenu.colHeader": return localeService.t("ui.column");
 			default: return "";
 		}
 	}, [localeService, menuType]);
@@ -5837,7 +5994,7 @@ function MobileContextMenu() {
 		className: "univer-fixed univer-inset-0 univer-z-[1080] univer-flex univer-items-end",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			type: "button",
-			"aria-label": localeService.t("rangeSelector.cancel"),
+			"aria-label": localeService.t("ui.rangeSelector.cancel"),
 			className: "univer-absolute univer-inset-0 univer-bg-[rgba(15,23,42,0.32)] univer-backdrop-blur-[2px]",
 			onClick: handleClose
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
@@ -5858,7 +6015,7 @@ function MobileContextMenu() {
 						})
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
-						"aria-label": localeService.t("rangeSelector.cancel"),
+						"aria-label": localeService.t("ui.rangeSelector.cancel"),
 						className: "\n                              univer-flex univer-size-8 univer-shrink-0 univer-appearance-none univer-items-center\n                              univer-justify-center univer-rounded-full univer-border-0 univer-bg-white univer-p-0\n                              univer-leading-none univer-text-gray-600 univer-shadow-sm univer-outline-none\n                              univer-ring-0 univer-transition-colors\n                              hover:univer-bg-gray-100\n                              active:univer-bg-gray-200\n                            ",
 						style: { margin: 0 },
 						onClick: handleClose,
@@ -6084,13 +6241,40 @@ const INotificationService = (0, _univerjs_core.createIdentifier)("ui.notificati
 //#endregion
 //#region src/services/before-close/before-close.service.ts
 const IBeforeCloseService = (0, _univerjs_core.createIdentifier)("univer.ui.before-close-service");
-let DesktopBeforeCloseService = class DesktopBeforeCloseService {
+let DesktopBeforeCloseService = class DesktopBeforeCloseService extends _univerjs_core.Disposable {
 	constructor(_notificationService) {
+		super();
 		this._notificationService = _notificationService;
 		_defineProperty(this, "_beforeUnloadCallbacks", []);
 		_defineProperty(this, "_onCloseCallbacks", []);
+		_defineProperty(this, "_beforeUnloadHandler", void 0);
+		_defineProperty(this, "_unloadHandler", void 0);
+		this._beforeUnloadHandler = (_event) => {
+			let event = _event;
+			const message = this._beforeUnloadCallbacks.map((callback) => callback()).filter((m) => !!m).join("\n");
+			if (message) {
+				this._notificationService.show({
+					type: "error",
+					title: "Some changes are not saved",
+					content: message
+				});
+				if (typeof event === "undefined") event = window.event;
+				event.returnValue = message;
+				return message;
+			}
+		};
+		this._unloadHandler = () => {
+			this._onCloseCallbacks.forEach((callback) => callback());
+		};
 		this._init();
 	}
+	dispose() {
+		window.removeEventListener("beforeunload", this._beforeUnloadHandler);
+		window.removeEventListener("unload", this._unloadHandler);
+		this._beforeUnloadCallbacks = [];
+		this._onCloseCallbacks = [];
+		super.dispose();
+	}
 	registerBeforeClose(callback) {
 		this._beforeUnloadCallbacks.push(callback);
 		return { dispose: () => {
@@ -6104,23 +6288,8 @@ let DesktopBeforeCloseService = class DesktopBeforeCloseService {
 		} };
 	}
 	_init() {
-		window.addEventListener("beforeunload", (_event) => {
-			let event = _event;
-			const message = this._beforeUnloadCallbacks.map((callback) => callback()).filter((m) => !!m).join("\n");
-			if (message) {
-				this._notificationService.show({
-					type: "error",
-					title: "Some changes are not saved",
-					content: message
-				});
-				if (typeof event === "undefined") event = window.event;
-				event.returnValue = message;
-				return message;
-			}
-		});
-		window.addEventListener("unload", () => {
-			this._onCloseCallbacks.forEach((callback) => callback());
-		});
+		window.addEventListener("beforeunload", this._beforeUnloadHandler);
+		window.addEventListener("unload", this._unloadHandler);
 	}
 };
 DesktopBeforeCloseService = __decorate([__decorateParam(0, INotificationService)], DesktopBeforeCloseService);
@@ -6308,14 +6477,25 @@ let BrowserClipboardService = class BrowserClipboardService extends _univerjs_co
 		this._logService = _logService;
 		this._notificationService = _notificationService;
 	}
-	async write(text, html) {
-		if (!this.supportClipboard) return this._legacyCopyHtml(html);
+	async write(text, html, customData) {
+		if (!this.supportClipboard) return this._legacyCopyHtml(text, html);
 		try {
 			return await navigator.clipboard.write([new ClipboardItem({
 				[PLAIN_TEXT_CLIPBOARD_MIME_TYPE]: new Blob([text], { type: PLAIN_TEXT_CLIPBOARD_MIME_TYPE }),
-				[HTML_CLIPBOARD_MIME_TYPE]: new Blob([html], { type: HTML_CLIPBOARD_MIME_TYPE })
+				[HTML_CLIPBOARD_MIME_TYPE]: new Blob([html], { type: HTML_CLIPBOARD_MIME_TYPE }),
+				...Object.fromEntries(Object.entries(customData !== null && customData !== void 0 ? customData : {}).map(([type, value]) => [type, new Blob([value], { type })]))
 			})]);
 		} catch (error) {
+			if (customData && Object.keys(customData).length) try {
+				return await navigator.clipboard.write([new ClipboardItem({
+					[PLAIN_TEXT_CLIPBOARD_MIME_TYPE]: new Blob([text], { type: PLAIN_TEXT_CLIPBOARD_MIME_TYPE }),
+					[HTML_CLIPBOARD_MIME_TYPE]: new Blob([html], { type: HTML_CLIPBOARD_MIME_TYPE })
+				})]);
+			} catch (fallbackError) {
+				this._logService.error("[BrowserClipboardService]", fallbackError);
+				this._showClipboardAuthenticationNotification();
+				return;
+			}
 			this._logService.error("[BrowserClipboardService]", error);
 			this._showClipboardAuthenticationNotification();
 		}
@@ -6349,17 +6529,34 @@ let BrowserClipboardService = class BrowserClipboardService extends _univerjs_co
 			return "";
 		}
 	}
-	_legacyCopyHtml(html) {
+	_legacyCopyHtml(text, html) {
 		const activeElement = document.activeElement;
-		const container = createCopyHtmlContainer();
-		document.body.appendChild(container);
-		container.replaceChildren(sanitizeHtmlForClipboard(html));
+		const sanitizedHtml = serializeSanitizedHtmlForClipboard(html);
+		let handledByClipboardEvent = false;
+		const onCopy = (event) => {
+			if (!event.clipboardData) return;
+			event.preventDefault();
+			event.clipboardData.setData(PLAIN_TEXT_CLIPBOARD_MIME_TYPE, text);
+			event.clipboardData.setData(HTML_CLIPBOARD_MIME_TYPE, sanitizedHtml);
+			handledByClipboardEvent = true;
+		};
+		document.addEventListener("copy", onCopy);
 		try {
-			select(container);
 			document.execCommand("copy");
+			if (!handledByClipboardEvent) {
+				const container = createCopyHtmlContainer();
+				document.body.appendChild(container);
+				container.innerHTML = sanitizedHtml;
+				try {
+					select(container);
+					document.execCommand("copy");
+				} finally {
+					document.body.removeChild(container);
+				}
+			}
 		} finally {
+			document.removeEventListener("copy", onCopy);
 			if (activeElement instanceof HTMLElement) activeElement.focus();
-			document.body.removeChild(container);
 		}
 	}
 	_legacyCopyText(text) {
@@ -6379,8 +6576,8 @@ let BrowserClipboardService = class BrowserClipboardService extends _univerjs_co
 		var _this$_notificationSe;
 		(_this$_notificationSe = this._notificationService) === null || _this$_notificationSe === void 0 || _this$_notificationSe.show({
 			type: "warning",
-			title: this._localeService.t("clipboard.authentication.title"),
-			content: this._localeService.t("clipboard.authentication.content")
+			title: this._localeService.t("ui.clipboard.authentication.title"),
+			content: this._localeService.t("ui.clipboard.authentication.content")
 		});
 	}
 };
@@ -6417,6 +6614,11 @@ function sanitizeHtmlForClipboard(html) {
 	});
 	return fragment;
 }
+function serializeSanitizedHtmlForClipboard(html) {
+	const container = document.createElement("div");
+	container.appendChild(sanitizeHtmlForClipboard(html));
+	return container.innerHTML;
+}
 function sanitizeHtmlNode(node) {
 	if (node.nodeType === Node.TEXT_NODE) {
 		var _node$textContent;
@@ -8219,7 +8421,6 @@ exports.parseHtmlFragment = parseHtmlFragment;
 exports.sanitizeParsedHtml = sanitizeParsedHtml;
 exports.splitSpanText = splitSpanText;
 exports.supportClipboardAPI = supportClipboardAPI;
-exports.t = t;
 exports.textTrim = textTrim;
 exports.useClickOutSide = useClickOutSide;
 exports.useComponentsOfPart = useComponentsOfPart;