@univerjs/ui 0.22.1 → 0.23.0-insiders.20260522-e8f2a3b

package/lib/cjs/index.js

@@ -2319,6 +2319,7 @@ let MenuManagerService = class MenuManagerService extends _univerjs_core.Disposa
 				key,
 				order: value.order,
 				title: value.title,
+				contextual: value.contextual,
 				quickLayout: value.quickLayout
 			};
 			if (value.menuItemFactory) {
@@ -2950,6 +2951,7 @@ function RectPopup(props) {
 			window.removeEventListener("contextmenu", handleContextMenu);
 		};
 	}, [contextMenuFn]);
+	const dir = (0, _wendellhu_redi_react_bindings.useObservable)((0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService).direction$);
 	const ele = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [mask && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-u-comp": "rect-popup-mask",
 		className: "univer-fixed univer-inset-0 univer-z-[100]",
@@ -2958,6 +2960,7 @@ function RectPopup(props) {
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
 		"data-u-comp": "rect-popup",
 		ref: nodeRef,
+		dir,
 		className: (0, _univerjs_design.clsx)("univer-pointer-events-auto univer-fixed univer-left-[-9999px] univer-top-[-9999px] univer-z-[1020]", {
 			"univer-hidden": hidden,
 			"univer-animate-in univer-fade-in-70": !hidden
@@ -3078,11 +3081,29 @@ let DesktopRibbonService = class DesktopRibbonService extends _univerjs_core.Dis
 		_defineProperty(this, "collapsedIds$", this._collapsedIds$.asObservable());
 		_defineProperty(this, "_fakeToolbarVisible$", new rxjs.BehaviorSubject(false));
 		_defineProperty(this, "fakeToolbarVisible$", this._fakeToolbarVisible$.asObservable());
+		_defineProperty(this, "_visibleContextualTabs", /* @__PURE__ */ new Set());
+		_defineProperty(this, "_contextualTabs", /* @__PURE__ */ new Set());
+		_defineProperty(this, "_lastNonContextualActivatedTab", "ribbon.start");
 		this._initRibbonSubscription();
 	}
 	setActivatedTab(tab) {
+		if (!this._isContextualTab(tab)) this._lastNonContextualActivatedTab = tab;
 		this._activatedTab$.next(tab);
 	}
+	showContextualTab(tab, options) {
+		this._visibleContextualTabs.add(tab);
+		this._updateRibbon();
+		if (options === null || options === void 0 ? void 0 : options.activate) this.setActivatedTab(tab);
+	}
+	hideContextualTab(tab) {
+		if (!this._visibleContextualTabs.delete(tab)) return;
+		this._updateRibbon();
+	}
+	hideAllContextualTabs() {
+		if (this._visibleContextualTabs.size === 0) return;
+		this._visibleContextualTabs.clear();
+		this._updateRibbon();
+	}
 	setCollapsedIds(ids) {
 		this._collapsedIds$.next(ids);
 	}
@@ -3095,7 +3116,7 @@ let DesktopRibbonService = class DesktopRibbonService extends _univerjs_core.Dis
 		}));
 	}
 	_updateRibbon() {
-		const ribbon = this._menuManagerService.getMenuByPositionKey("ribbon");
+		const ribbon = this._filterContextualTabs(this._menuManagerService.getMenuByPositionKey("ribbon"));
 		const hiddenObservableMap = [];
 		const hiddenKeyMap = [];
 		for (const group of ribbon) if (group.children) {
@@ -3108,7 +3129,7 @@ let DesktopRibbonService = class DesktopRibbonService extends _univerjs_core.Dis
 			}
 		}
 		if (hiddenObservableMap.length === 0) {
-			this._ribbon$.next(ribbon);
+			this._setRibbon(ribbon);
 			return;
 		}
 		(0, rxjs.combineLatest)(hiddenObservableMap).pipe((0, rxjs_operators.startWith)(new Array(hiddenObservableMap.length).fill(false))).subscribe((hiddenMap) => {
@@ -3151,9 +3172,29 @@ let DesktopRibbonService = class DesktopRibbonService extends _univerjs_core.Dis
 					return (_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _item$children2.length;
 				})) newRibbon.push(newGroup);
 			}
-			this._ribbon$.next(newRibbon);
+			this._setRibbon(newRibbon);
 		}).unsubscribe();
 	}
+	_filterContextualTabs(ribbon) {
+		this._contextualTabs.clear();
+		ribbon.forEach((group) => {
+			if (group.contextual) this._contextualTabs.add(group.key);
+		});
+		return ribbon.filter((group) => !group.contextual || this._visibleContextualTabs.has(group.key));
+	}
+	_setRibbon(ribbon) {
+		const activatedTab = this._activatedTab$.getValue();
+		const activeGroup = ribbon.find((group) => group.key === activatedTab);
+		if (!activeGroup && this._contextualTabs.has(activatedTab)) {
+			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 && !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);
+	}
 };
 DesktopRibbonService = __decorate([__decorateParam(0, IMenuManagerService), __decorateParam(1, _univerjs_core.IUniverInstanceService)], DesktopRibbonService);
 
@@ -3244,7 +3285,8 @@ function DefaultMenu({ ribbon, activatedTab, onSelectTab }) {
 		overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "univer-grid univer-gap-1 univer-px-2 univer-py-1",
 			children: ribbon.map((group) => {
-				const Icon = iconMap[group.key];
+				var _iconMap;
+				const Icon = (_iconMap = iconMap[group.key]) !== null && _iconMap !== void 0 ? _iconMap : _univerjs_icons.MoreFunctionIcon;
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
 					"data-u-comp": "ribbon-group-btn",
 					className: "univer-box-border univer-flex univer-cursor-pointer univer-items-center univer-gap-2.5 univer-rounded-lg univer-px-2 univer-py-1.5 hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-700",
@@ -3468,9 +3510,20 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 	const { dropdownVisible, setDropdownVisible } = (0, react.useContext)(TooltipWrapperContext);
 	const menuManagerService = (0, _wendellhu_redi_react_bindings.useDependency)(IMenuManagerService);
 	const [hiddenStates, setHiddenStates] = (0, react.useState)({});
+	const [menuVersion, setMenuVersion] = (0, react.useState)(0);
+	(0, react.useEffect)(() => {
+		const subscription = menuManagerService.menuChanged$.subscribe(() => {
+			setMenuVersion((version) => version + 1);
+		});
+		return () => subscription.unsubscribe();
+	}, [menuManagerService]);
 	const menuItems = (0, react.useMemo)(() => {
 		return menuId ? menuManagerService.getMenuByPositionKey(menuId) : [];
-	}, [menuId]);
+	}, [
+		menuId,
+		menuManagerService,
+		menuVersion
+	]);
 	const filteredMenuItems = (0, react.useMemo)(() => {
 		return menuItems.filter((item) => {
 			var _item$key;
@@ -4234,6 +4287,7 @@ function ContextMenuPanel(props) {
 		onWheel: (event) => event.stopPropagation(),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextMenuMenu, {
 			menuSchemas: menuItems,
+			menuSessionVersion,
 			submenuPortalContainer,
 			onOptionSelect,
 			maxMenuHeight
@@ -4241,7 +4295,7 @@ function ContextMenuPanel(props) {
 	});
 }
 function ContextMenuMenu(props) {
-	const { menuSchemas, submenuPortalContainer, onOptionSelect, maxMenuHeight } = props;
+	const { menuSchemas, menuSessionVersion, submenuPortalContainer, onOptionSelect, maxMenuHeight } = props;
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
 	const hiddenGroupStates = useContextGroupHiddenStates$1(menuSchemas);
 	const visibleSchemas = (0, react.useMemo)(() => {
@@ -4256,6 +4310,7 @@ function ContextMenuMenu(props) {
 		if (menuSchema.item) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextMenuMenuItem, {
 			menuKey: menuSchema.key,
 			menuItem: menuSchema.item,
+			menuSessionVersion,
 			submenuPortalContainer,
 			onOptionSelect,
 			maxMenuHeight
@@ -4279,6 +4334,7 @@ function ContextMenuMenu(props) {
 			}), menuSchema.children.map((childSchema) => childSchema.item && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextMenuMenuItem, {
 				menuKey: childSchema.key,
 				menuItem: childSchema.item,
+				menuSessionVersion,
 				submenuPortalContainer,
 				onOptionSelect,
 				maxMenuHeight
@@ -4287,7 +4343,8 @@ function ContextMenuMenu(props) {
 	}) });
 }
 function ContextMenuMenuItem(props) {
-	const { menuKey, menuItem, submenuPortalContainer, onOptionSelect, maxMenuHeight } = 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 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);
@@ -4320,7 +4377,8 @@ function ContextMenuMenuItem(props) {
 	}, [
 		menuItem.id,
 		menuItem.type,
-		menuManagerService
+		menuManagerService,
+		menuSessionVersion
 	]);
 	const hasSelectionSubmenu = selections.length > 0;
 	const hasSubItemSubmenu = subMenuItems.length > 0;
@@ -4439,6 +4497,7 @@ function ContextMenuMenuItem(props) {
 			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" })]
 		}), hasSubmenu && submenuVisible && (submenuPortalContainer ? (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			ref: submenuElementRef,
+			dir: direction,
 			["data-u-context-menu-submenu"]: "true",
 			className: "univer-z-[1080] univer-w-max univer-max-w-[calc(100vw-16px)]",
 			style: {
@@ -4515,6 +4574,7 @@ function ContextMenuMenuItem(props) {
 					})
 				}), hasSubItemSubmenu && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextMenuMenu, {
 					menuSchemas: subMenuItems,
+					menuSessionVersion,
 					submenuPortalContainer,
 					onOptionSelect: onSubmenuOptionSelect,
 					maxMenuHeight
@@ -4704,54 +4764,6 @@ function DesktopContextMenu() {
 	});
 }
 
-//#endregion
-//#region src/services/global-zone/global-zone.service.ts
-const IGlobalZoneService = (0, _univerjs_core.createIdentifier)("univer.global-zone-service");
-
-//#endregion
-//#region src/views/components/global-zone/GlobalZone.tsx
-/**
-* 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 GlobalZone() {
-	const globalZoneService = (0, _wendellhu_redi_react_bindings.useDependency)(IGlobalZoneService);
-	const [visible, setVisible] = (0, react.useState)(false);
-	const componentKey = (0, _wendellhu_redi_react_bindings.useObservable)(globalZoneService.componentKey$, globalZoneService.componentKey);
-	const componentManager = (0, _wendellhu_redi_react_bindings.useDependency)(ComponentManager);
-	const Component = (0, react.useMemo)(() => {
-		const Component = componentManager.get(componentKey !== null && componentKey !== void 0 ? componentKey : "");
-		if (Component) return Component;
-	}, [componentKey, componentManager]);
-	(0, react.useEffect)(() => {
-		const subscription = globalZoneService.visible$.subscribe((val) => {
-			setVisible(val);
-		});
-		return () => {
-			subscription.unsubscribe();
-		};
-	}, [globalZoneService.visible$]);
-	if (!visible) return null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
-		className: (0, _univerjs_design.clsx)("univer-absolute univer-bg-gray-100", {
-			"univer-hidden": !visible,
-			"univer-inset-0 univer-z-[100] univer-block univer-size-full": visible
-		}),
-		children: Component && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {})
-	});
-}
-
 //#endregion
 //#region src/views/components/sidebar/Sidebar.tsx
 function Sidebar() {
@@ -4935,11 +4947,14 @@ function DesktopWorkbenchContent(props) {
 		if (contentRef.current) onRendered === null || onRendered === void 0 || onRendered(contentRef.current);
 	}, [onRendered]);
 	const [locale, setLocale] = (0, react.useState)(localeService.getLocales());
+	const [direction, setDirection] = (0, react.useState)(localeService.getDirection());
 	const portalContainer = (0, react.useMemo)(() => document.createElement("div"), []);
 	(0, react.useEffect)(() => {
 		document.body.appendChild(portalContainer);
 		const subscriptions = [localeService.localeChanged$.subscribe(() => {
 			setLocale(localeService.getLocales());
+		}), localeService.direction$.subscribe(() => {
+			setDirection(localeService.getDirection());
 		})];
 		return () => {
 			subscriptions.forEach((subscription) => subscription.unsubscribe());
@@ -4950,76 +4965,82 @@ function DesktopWorkbenchContent(props) {
 		mountContainer,
 		portalContainer
 	]);
+	(0, react.useEffect)(() => {
+		portalContainer.dir = direction;
+	}, [direction, portalContainer]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.ConfigProvider, {
 		locale: locale === null || locale === void 0 ? void 0 : locale.design,
+		direction,
 		mountContainer: portalContainer,
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				"data-u-comp": "workbench-layout",
-				className: (0, _univerjs_design.clsx)("univer-flex univer-h-full univer-min-h-0 univer-flex-col univer-bg-white dark:!univer-bg-gray-800", { "univer-dark": darkMode }),
-				tabIndex: -1,
-				onBlur: (e) => e.stopPropagation(),
-				onContextMenu: (e) => e.preventDefault(),
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "univer-relative univer-flex univer-min-h-0 univer-flex-col univer-bg-white dark:!univer-bg-gray-800",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: customHeaderComponents }, "custom-header")
-					}),
-					header && toolbar && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
-						"data-u-comp": "headerbar",
-						className: "univer-relative univer-z-10 univer-w-full univer-overflow-hidden",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, {
-							components: toolbarComponents,
-							sharedProps: {
-								ribbonType,
-								headerMenuComponents,
-								headerMenu
-							}
-						}, "toolbar")
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-						className: "univer-relative univer-flex univer-min-h-0 univer-flex-1 univer-flex-col",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "univer-grid univer-h-full univer-grid-cols-[auto_1fr_auto] univer-grid-rows-[100%] univer-overflow-hidden",
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
-										"data-u-comp": "left-sidebar",
-										className: "univer-h-full",
-										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: leftSidebarComponents }, "left-sidebar")
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-										className: (0, _univerjs_design.clsx)("univer-relative univer-grid univer-flex-1 univer-grid-rows-[auto_1fr] univer-overflow-hidden univer-bg-white dark:!univer-bg-gray-800", _univerjs_design.borderBottomClassName),
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", { children: header && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: headerComponents }, "header") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
-											className: "univer-relative univer-overflow-hidden dark:!univer-bg-gray-900",
-											ref: contentRef,
-											"data-range-selector": true,
-											onContextMenu: (e) => e.preventDefault(),
-											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: contentComponents }, "content")
-										})]
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
-										"data-u-comp": "right-sidebar",
-										className: "univer-z-[100] univer-h-full",
-										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Sidebar, {})
-									})
-								]
-							}),
-							footer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, {
-								components: footerComponents,
-								sharedProps: { contextMenu }
-							}, "footer") }),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZenZone, {})
-						]
-					})
-				]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: globalComponents }, "global"),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GlobalZone, {}),
-			contextMenu && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DesktopContextMenu, {}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FloatingContainer, {}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { id: popupRootId })
-		]
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			"data-u-comp": "workbench-layout",
+			className: (0, _univerjs_design.clsx)("univer-flex univer-h-full univer-min-h-0 univer-flex-col univer-bg-white dark:!univer-bg-gray-800", { "univer-dark": darkMode }),
+			tabIndex: -1,
+			onBlur: (e) => e.stopPropagation(),
+			onContextMenu: (e) => e.preventDefault(),
+			dir: direction,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "univer-relative univer-flex univer-min-h-0 univer-flex-col univer-bg-white dark:!univer-bg-gray-800",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: customHeaderComponents }, "custom-header")
+				}),
+				header && toolbar && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
+					"data-u-comp": "headerbar",
+					className: "univer-relative univer-z-10 univer-w-full univer-overflow-hidden",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, {
+						components: toolbarComponents,
+						sharedProps: {
+							ribbonType,
+							headerMenuComponents,
+							headerMenu
+						}
+					}, "toolbar")
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+					className: "univer-relative univer-flex univer-min-h-0 univer-flex-1 univer-flex-col",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "univer-grid univer-h-full univer-grid-cols-[auto_1fr_auto] univer-grid-rows-[100%] univer-overflow-hidden",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
+									"data-u-comp": "left-sidebar",
+									className: "univer-h-full",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: leftSidebarComponents }, "left-sidebar")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+									className: (0, _univerjs_design.clsx)("univer-relative univer-grid univer-flex-1 univer-grid-rows-[auto_1fr] univer-overflow-hidden univer-bg-white dark:!univer-bg-gray-800", _univerjs_design.borderBottomClassName),
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", { children: header && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: headerComponents }, "header") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+										className: "univer-relative univer-overflow-hidden dark:!univer-bg-gray-900",
+										ref: contentRef,
+										"data-range-selector": true,
+										onContextMenu: (e) => e.preventDefault(),
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: contentComponents }, "content")
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
+									"data-u-comp": "right-sidebar",
+									className: "univer-z-[100] univer-h-full",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Sidebar, {})
+								})
+							]
+						}),
+						footer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, {
+							components: footerComponents,
+							sharedProps: { contextMenu }
+						}, "footer") }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZenZone, {})
+					]
+				})
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			dir: direction,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: globalComponents }, "global"),
+				contextMenu && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DesktopContextMenu, {}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FloatingContainer, {}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { id: popupRootId })
+			]
+		})]
 	});
 }
 function FloatingContainer() {
@@ -5185,7 +5206,7 @@ const IUIController = (0, _univerjs_core.createIdentifier)("univer.ui.ui-control
 //#endregion
 //#region package.json
 var name = "@univerjs/ui";
-var version = "0.22.1";
+var version = "0.23.0-insiders.20260522-e8f2a3b";
 
 //#endregion
 //#region src/views/components/ribbon/MobileRibbon.tsx
@@ -5682,6 +5703,7 @@ function MobileContextMenu() {
 	const commandService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.ICommandService);
 	const layoutService = (0, _wendellhu_redi_react_bindings.useDependency)(ILayoutService);
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
+	const direction = (0, _wendellhu_redi_react_bindings.useObservable)(localeService.direction$);
 	const { mountContainer } = (0, react.useContext)(_univerjs_design.ConfigContext);
 	visibleRef.current = visible;
 	(0, react.useEffect)(() => {
@@ -5721,6 +5743,7 @@ function MobileContextMenu() {
 	}, [localeService, menuType]);
 	if (!mountContainer || !visible) return null;
 	return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		dir: direction,
 		className: "univer-fixed univer-inset-0 univer-z-[1080] univer-flex univer-items-end",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			type: "button",
@@ -5797,6 +5820,7 @@ function MobileWorkbench(props) {
 		if (contentRef.current) onRendered === null || onRendered === void 0 || onRendered(contentRef.current);
 	}, [onRendered]);
 	const [locale, setLocale] = (0, react.useState)(localeService.getLocales());
+	const [direction, setDirection] = (0, react.useState)(localeService.getDirection());
 	const portalContainer = (0, react.useMemo)(() => document.createElement("div"), []);
 	(0, react.useLayoutEffect)(() => {
 		const sub = themeService.currentTheme$.subscribe((theme) => {
@@ -5810,6 +5834,8 @@ function MobileWorkbench(props) {
 		document.body.appendChild(portalContainer);
 		const subscriptions = [localeService.localeChanged$.subscribe(() => {
 			setLocale(localeService.getLocales());
+		}), localeService.direction$.subscribe(() => {
+			setDirection(localeService.getDirection());
 		})];
 		return () => {
 			subscriptions.forEach((subscription) => subscription.unsubscribe());
@@ -5820,65 +5846,68 @@ function MobileWorkbench(props) {
 		mountContainer,
 		portalContainer
 	]);
+	(0, react.useEffect)(() => {
+		portalContainer.dir = direction;
+	}, [direction, portalContainer]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.ConfigProvider, {
 		locale: locale === null || locale === void 0 ? void 0 : locale.design,
+		direction,
 		mountContainer: portalContainer,
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				"data-u-comp": "app-layout",
-				className: (0, _univerjs_design.clsx)("univer-relative univer-flex univer-h-full univer-min-h-0 univer-flex-col univer-bg-white dark:!univer-bg-gray-800", { "univer-dark": darkMode }),
-				tabIndex: -1,
-				onBlur: (e) => e.stopPropagation(),
-				onContextMenu: (e) => e.preventDefault(),
-				children: [header && toolbar && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
-					"data-u-comp": "headerbar",
-					className: "univer-relative univer-z-10 univer-w-full univer-overflow-hidden",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, {
-						components: toolbarComponents,
-						sharedProps: {
-							ribbonType,
-							headerMenuComponents,
-							headerMenu
-						}
-					}, "toolbar")
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-					className: "univer-relative univer-flex univer-min-h-0 univer-flex-1 univer-flex-col",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: "univer-grid univer-h-full univer-grid-cols-[auto_1fr_auto] univer-grid-rows-[100%] univer-overflow-hidden",
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
-									className: "univer-h-full",
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: leftSidebarComponents }, "left-sidebar")
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-									className: (0, _univerjs_design.clsx)("univer-relative univer-grid univer-flex-1 univer-grid-rows-[auto_1fr] univer-overflow-hidden univer-bg-white dark:!univer-bg-gray-800", _univerjs_design.borderBottomClassName),
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
-										className: "univer-w-screen",
-										children: header && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: headerComponents }, "header")
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
-										ref: contentRef,
-										className: "univer-relative univer-overflow-hidden",
-										"data-range-selector": true,
-										onContextMenu: (e) => e.preventDefault(),
-										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: contentComponents }, "content")
-									})]
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
-									className: "univer-h-full",
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Sidebar, {})
-								})
-							]
-						}),
-						footer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: footerComponents }, "footer") }),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GlobalZone, {}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZenZone, {})
-					]
-				})]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: globalComponents }, "global"),
-			contextMenu && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileContextMenu, {})
-		]
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			"data-u-comp": "app-layout",
+			className: (0, _univerjs_design.clsx)("univer-relative univer-flex univer-h-full univer-min-h-0 univer-flex-col univer-bg-white dark:!univer-bg-gray-800", { "univer-dark": darkMode }),
+			tabIndex: -1,
+			onBlur: (e) => e.stopPropagation(),
+			onContextMenu: (e) => e.preventDefault(),
+			dir: direction,
+			children: [header && toolbar && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
+				"data-u-comp": "headerbar",
+				className: "univer-relative univer-z-10 univer-w-full univer-overflow-hidden",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, {
+					components: toolbarComponents,
+					sharedProps: {
+						ribbonType,
+						headerMenuComponents,
+						headerMenu
+					}
+				}, "toolbar")
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				className: "univer-relative univer-flex univer-min-h-0 univer-flex-1 univer-flex-col",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "univer-grid univer-h-full univer-grid-cols-[auto_1fr_auto] univer-grid-rows-[100%] univer-overflow-hidden",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
+								className: "univer-h-full",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: leftSidebarComponents }, "left-sidebar")
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+								className: (0, _univerjs_design.clsx)("univer-relative univer-grid univer-flex-1 univer-grid-rows-[auto_1fr] univer-overflow-hidden univer-bg-white dark:!univer-bg-gray-800", _univerjs_design.borderBottomClassName),
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
+									className: "univer-w-screen",
+									children: header && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: headerComponents }, "header")
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+									ref: contentRef,
+									className: "univer-relative univer-overflow-hidden",
+									"data-range-selector": true,
+									onContextMenu: (e) => e.preventDefault(),
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: contentComponents }, "content")
+								})]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
+								className: "univer-h-full",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Sidebar, {})
+							})
+						]
+					}),
+					footer && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: footerComponents }, "footer") }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZenZone, {})
+				]
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			dir: direction,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContainer, { components: globalComponents }, "global"), contextMenu && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileContextMenu, {})]
+		})]
 	});
 }
 
@@ -6647,37 +6676,6 @@ let DesktopGalleryService = class DesktopGalleryService extends _univerjs_core.D
 };
 DesktopGalleryService = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_core.Injector)), __decorateParam(1, IUIPartsService)], DesktopGalleryService);
 
-//#endregion
-//#region src/services/global-zone/desktop-global-zone.service.ts
-let DesktopGlobalZoneService = class DesktopGlobalZoneService {
-	constructor(_componentManager) {
-		this._componentManager = _componentManager;
-		_defineProperty(this, "visible$", new rxjs.Subject());
-		_defineProperty(this, "componentKey$", new rxjs.Subject());
-		_defineProperty(this, "_componentKey", "");
-	}
-	get componentKey() {
-		return this._componentKey;
-	}
-	set(key, component) {
-		this._componentManager.register(key, component);
-		this.componentKey$.next(key);
-		this._componentKey = key;
-		return (0, _univerjs_core.toDisposable)(() => {
-			this._componentManager.delete(key);
-			this.visible$.complete();
-			this.componentKey$.complete();
-		});
-	}
-	open() {
-		this.visible$.next(true);
-	}
-	close() {
-		this.visible$.next(false);
-	}
-};
-DesktopGlobalZoneService = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(ComponentManager))], DesktopGlobalZoneService);
-
 //#endregion
 //#region src/services/local-file/desktop-local-file.service.ts
 var DesktopLocalFileService = class extends _univerjs_core.Disposable {
@@ -6769,7 +6767,13 @@ var DesktopLocalStorageService = class {
 * limitations under the License.
 */
 function MessageContainer() {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Messager, { theme: (0, _wendellhu_redi_react_bindings.useObservable)((0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.ThemeService).darkMode$) ? "dark" : "light" });
+	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
+	const darkMode = (0, _wendellhu_redi_react_bindings.useObservable)((0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.ThemeService).darkMode$);
+	const direction = (0, _wendellhu_redi_react_bindings.useObservable)(localeService.direction$);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Messager, {
+		theme: darkMode ? "dark" : "light",
+		dir: direction
+	});
 }
 
 //#endregion
@@ -6808,7 +6812,13 @@ DesktopMessageService = __decorate([__decorateParam(0, (0, _univerjs_core.Inject
 //#endregion
 //#region src/components/notification/Notification.tsx
 function Notification() {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Toaster, { theme: (0, _wendellhu_redi_react_bindings.useObservable)((0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.ThemeService).darkMode$) ? "dark" : "light" });
+	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
+	const darkMode = (0, _wendellhu_redi_react_bindings.useObservable)((0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.ThemeService).darkMode$);
+	const direction = (0, _wendellhu_redi_react_bindings.useObservable)(localeService.direction$);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Toaster, {
+		theme: darkMode ? "dark" : "light",
+		dir: direction
+	});
 }
 const notification = { show: (options) => {
 	const { type = "message", title, content, duration, closable = true, position = "top-right" } = options;
@@ -7008,10 +7018,6 @@ let UniverMobileUIPlugin = class UniverMobileUIPlugin extends _univerjs_core.Plu
 				useClass: DesktopZenZoneService,
 				lazy: true
 			}],
-			[IGlobalZoneService, {
-				useClass: DesktopGlobalZoneService,
-				lazy: true
-			}],
 			[IMessageService, {
 				useClass: DesktopMessageService,
 				lazy: true
@@ -7109,10 +7115,6 @@ let UniverUIPlugin = class UniverUIPlugin extends _univerjs_core.Plugin {
 				useClass: DesktopZenZoneService,
 				lazy: true
 			}],
-			[IGlobalZoneService, {
-				useClass: DesktopGlobalZoneService,
-				lazy: true
-			}],
 			[IMessageService, {
 				useClass: DesktopMessageService,
 				lazy: true
@@ -7789,7 +7791,7 @@ function extractFontFamily(styleStr) {
 }
 
 //#endregion
-//#region src/views/components/dom/print.tsx
+//#region src/views/components/dom/Print.tsx
 const PrintFloatDomSingle = (0, react.memo)((props) => {
 	var _position$startY, _position$startX;
 	const { layer, id, position } = props;
@@ -7909,12 +7911,6 @@ Object.defineProperty(exports, 'DesktopGalleryService', {
     return DesktopGalleryService;
   }
 });
-Object.defineProperty(exports, 'DesktopGlobalZoneService', {
-  enumerable: true,
-  get: function () {
-    return DesktopGlobalZoneService;
-  }
-});
 Object.defineProperty(exports, 'DesktopLayoutService', {
   enumerable: true,
   get: function () {
@@ -7974,7 +7970,6 @@ exports.FloatDomSingle = FloatDomSingle;
 exports.FontFamily = FontFamily;
 exports.FontFamilyItem = FontFamilyItem;
 exports.FontSize = FontSize;
-exports.GlobalZone = GlobalZone;
 exports.HEADING_ITEM_COMPONENT = HEADING_ITEM_COMPONENT;
 exports.HEADING_LIST = HEADING_LIST;
 exports.HTML_CLIPBOARD_MIME_TYPE = HTML_CLIPBOARD_MIME_TYPE;
@@ -7987,7 +7982,6 @@ exports.IContextMenuService = IContextMenuService;
 exports.IDialogService = IDialogService;
 exports.IFontService = IFontService;
 exports.IGalleryService = IGalleryService;
-exports.IGlobalZoneService = IGlobalZoneService;
 exports.ILayoutService = ILayoutService;
 exports.ILeftSidebarService = ILeftSidebarService;
 exports.ILocalFileService = ILocalFileService;