@univerjs/ui 0.22.1 → 0.23.0

package/lib/es/index.js

@@ -2274,6 +2274,7 @@ let MenuManagerService = class MenuManagerService extends Disposable {
 				key,
 				order: value.order,
 				title: value.title,
+				contextual: value.contextual,
 				quickLayout: value.quickLayout
 			};
 			if (value.menuItemFactory) {
@@ -2905,6 +2906,7 @@ function RectPopup(props) {
 			window.removeEventListener("contextmenu", handleContextMenu);
 		};
 	}, [contextMenuFn]);
+	const { direction: dir } = useContext(ConfigContext);
 	const ele = /* @__PURE__ */ jsxs(Fragment$1, { children: [mask && /* @__PURE__ */ jsx("div", {
 		"data-u-comp": "rect-popup-mask",
 		className: "univer-fixed univer-inset-0 univer-z-[100]",
@@ -2913,6 +2915,7 @@ function RectPopup(props) {
 	}), /* @__PURE__ */ jsx("section", {
 		"data-u-comp": "rect-popup",
 		ref: nodeRef,
+		dir,
 		className: 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
@@ -3033,11 +3036,29 @@ let DesktopRibbonService = class DesktopRibbonService extends Disposable {
 		_defineProperty(this, "collapsedIds$", this._collapsedIds$.asObservable());
 		_defineProperty(this, "_fakeToolbarVisible$", new 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);
 	}
@@ -3050,7 +3071,7 @@ let DesktopRibbonService = class DesktopRibbonService extends Disposable {
 		}));
 	}
 	_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) {
@@ -3063,7 +3084,7 @@ let DesktopRibbonService = class DesktopRibbonService extends Disposable {
 			}
 		}
 		if (hiddenObservableMap.length === 0) {
-			this._ribbon$.next(ribbon);
+			this._setRibbon(ribbon);
 			return;
 		}
 		combineLatest(hiddenObservableMap).pipe(startWith$1(new Array(hiddenObservableMap.length).fill(false))).subscribe((hiddenMap) => {
@@ -3106,9 +3127,29 @@ let DesktopRibbonService = class DesktopRibbonService extends Disposable {
 					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, IUniverInstanceService)], DesktopRibbonService);
 
@@ -3199,7 +3240,8 @@ function DefaultMenu({ ribbon, activatedTab, onSelectTab }) {
 		overlay: /* @__PURE__ */ 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 : MoreFunctionIcon;
 				return /* @__PURE__ */ 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",
@@ -4243,6 +4285,7 @@ function ContextMenuMenu(props) {
 }
 function ContextMenuMenuItem(props) {
 	const { menuKey, menuItem, submenuPortalContainer, onOptionSelect, maxMenuHeight } = props;
+	const { direction } = useContext(ConfigContext);
 	const menuManagerService = useDependency(IMenuManagerService);
 	const disabled = useObservable(menuItem.disabled$, false);
 	const activated = useObservable(menuItem.activated$, false);
@@ -4394,6 +4437,7 @@ function ContextMenuMenuItem(props) {
 			children: [contentNode, hasSubmenu && /* @__PURE__ */ jsx(MoreIcon, { className: "univer-size-3.5 univer-text-gray-400 dark:!univer-text-gray-200" })]
 		}), hasSubmenu && submenuVisible && (submenuPortalContainer ? createPortal(/* @__PURE__ */ 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: {
@@ -4685,6 +4729,7 @@ function GlobalZone() {
 	const [visible, setVisible] = useState(false);
 	const componentKey = useObservable(globalZoneService.componentKey$, globalZoneService.componentKey);
 	const componentManager = useDependency(ComponentManager);
+	const { direction } = useContext(ConfigContext);
 	const Component = useMemo(() => {
 		const Component = componentManager.get(componentKey !== null && componentKey !== void 0 ? componentKey : "");
 		if (Component) return Component;
@@ -4699,6 +4744,7 @@ function GlobalZone() {
 	}, [globalZoneService.visible$]);
 	if (!visible) return null;
 	return /* @__PURE__ */ jsx("section", {
+		dir: direction,
 		className: clsx("univer-absolute univer-bg-gray-100", {
 			"univer-hidden": !visible,
 			"univer-inset-0 univer-z-[100] univer-block univer-size-full": visible
@@ -4890,11 +4936,14 @@ function DesktopWorkbenchContent(props) {
 		if (contentRef.current) onRendered === null || onRendered === void 0 || onRendered(contentRef.current);
 	}, [onRendered]);
 	const [locale, setLocale] = useState(localeService.getLocales());
+	const [direction, setDirection] = useState(localeService.getDirection());
 	const portalContainer = useMemo(() => document.createElement("div"), []);
 	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());
@@ -4905,76 +4954,83 @@ function DesktopWorkbenchContent(props) {
 		mountContainer,
 		portalContainer
 	]);
+	useEffect(() => {
+		portalContainer.dir = direction;
+	}, [direction, portalContainer]);
 	return /* @__PURE__ */ jsxs(ConfigProvider, {
 		locale: locale === null || locale === void 0 ? void 0 : locale.design,
+		direction,
 		mountContainer: portalContainer,
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				"data-u-comp": "workbench-layout",
-				className: 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__ */ jsx("div", {
-						className: "univer-relative univer-flex univer-min-h-0 univer-flex-col univer-bg-white dark:!univer-bg-gray-800",
-						children: /* @__PURE__ */ jsx(ComponentContainer, { components: customHeaderComponents }, "custom-header")
-					}),
-					header && toolbar && /* @__PURE__ */ jsx("header", {
-						"data-u-comp": "headerbar",
-						className: "univer-relative univer-z-10 univer-w-full univer-overflow-hidden",
-						children: /* @__PURE__ */ jsx(ComponentContainer, {
-							components: toolbarComponents,
-							sharedProps: {
-								ribbonType,
-								headerMenuComponents,
-								headerMenu
-							}
-						}, "toolbar")
-					}),
-					/* @__PURE__ */ jsxs("section", {
-						className: "univer-relative univer-flex univer-min-h-0 univer-flex-1 univer-flex-col",
-						children: [
-							/* @__PURE__ */ jsxs("div", {
-								className: "univer-grid univer-h-full univer-grid-cols-[auto_1fr_auto] univer-grid-rows-[100%] univer-overflow-hidden",
-								children: [
-									/* @__PURE__ */ jsx("aside", {
-										"data-u-comp": "left-sidebar",
-										className: "univer-h-full",
-										children: /* @__PURE__ */ jsx(ComponentContainer, { components: leftSidebarComponents }, "left-sidebar")
-									}),
-									/* @__PURE__ */ jsxs("section", {
-										className: clsx("univer-relative univer-grid univer-flex-1 univer-grid-rows-[auto_1fr] univer-overflow-hidden univer-bg-white dark:!univer-bg-gray-800", borderBottomClassName),
-										children: [/* @__PURE__ */ jsx("header", { children: header && /* @__PURE__ */ jsx(ComponentContainer, { components: headerComponents }, "header") }), /* @__PURE__ */ 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__ */ jsx(ComponentContainer, { components: contentComponents }, "content")
-										})]
-									}),
-									/* @__PURE__ */ jsx("aside", {
-										"data-u-comp": "right-sidebar",
-										className: "univer-z-[100] univer-h-full",
-										children: /* @__PURE__ */ jsx(Sidebar, {})
-									})
-								]
-							}),
-							footer && /* @__PURE__ */ jsx("footer", { children: /* @__PURE__ */ jsx(ComponentContainer, {
-								components: footerComponents,
-								sharedProps: { contextMenu }
-							}, "footer") }),
-							/* @__PURE__ */ jsx(ZenZone, {})
-						]
-					})
-				]
-			}),
-			/* @__PURE__ */ jsx(ComponentContainer, { components: globalComponents }, "global"),
-			/* @__PURE__ */ jsx(GlobalZone, {}),
-			contextMenu && /* @__PURE__ */ jsx(DesktopContextMenu, {}),
-			/* @__PURE__ */ jsx(FloatingContainer, {}),
-			/* @__PURE__ */ jsx("div", { id: popupRootId })
-		]
+		children: [/* @__PURE__ */ jsxs("div", {
+			"data-u-comp": "workbench-layout",
+			className: 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__ */ jsx("div", {
+					className: "univer-relative univer-flex univer-min-h-0 univer-flex-col univer-bg-white dark:!univer-bg-gray-800",
+					children: /* @__PURE__ */ jsx(ComponentContainer, { components: customHeaderComponents }, "custom-header")
+				}),
+				header && toolbar && /* @__PURE__ */ jsx("header", {
+					"data-u-comp": "headerbar",
+					className: "univer-relative univer-z-10 univer-w-full univer-overflow-hidden",
+					children: /* @__PURE__ */ jsx(ComponentContainer, {
+						components: toolbarComponents,
+						sharedProps: {
+							ribbonType,
+							headerMenuComponents,
+							headerMenu
+						}
+					}, "toolbar")
+				}),
+				/* @__PURE__ */ jsxs("section", {
+					className: "univer-relative univer-flex univer-min-h-0 univer-flex-1 univer-flex-col",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "univer-grid univer-h-full univer-grid-cols-[auto_1fr_auto] univer-grid-rows-[100%] univer-overflow-hidden",
+							children: [
+								/* @__PURE__ */ jsx("aside", {
+									"data-u-comp": "left-sidebar",
+									className: "univer-h-full",
+									children: /* @__PURE__ */ jsx(ComponentContainer, { components: leftSidebarComponents }, "left-sidebar")
+								}),
+								/* @__PURE__ */ jsxs("section", {
+									className: clsx("univer-relative univer-grid univer-flex-1 univer-grid-rows-[auto_1fr] univer-overflow-hidden univer-bg-white dark:!univer-bg-gray-800", borderBottomClassName),
+									children: [/* @__PURE__ */ jsx("header", { children: header && /* @__PURE__ */ jsx(ComponentContainer, { components: headerComponents }, "header") }), /* @__PURE__ */ 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__ */ jsx(ComponentContainer, { components: contentComponents }, "content")
+									})]
+								}),
+								/* @__PURE__ */ jsx("aside", {
+									"data-u-comp": "right-sidebar",
+									className: "univer-z-[100] univer-h-full",
+									children: /* @__PURE__ */ jsx(Sidebar, {})
+								})
+							]
+						}),
+						footer && /* @__PURE__ */ jsx("footer", { children: /* @__PURE__ */ jsx(ComponentContainer, {
+							components: footerComponents,
+							sharedProps: { contextMenu }
+						}, "footer") }),
+						/* @__PURE__ */ jsx(ZenZone, {})
+					]
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			dir: direction,
+			children: [
+				/* @__PURE__ */ jsx(ComponentContainer, { components: globalComponents }, "global"),
+				/* @__PURE__ */ jsx(GlobalZone, {}),
+				contextMenu && /* @__PURE__ */ jsx(DesktopContextMenu, {}),
+				/* @__PURE__ */ jsx(FloatingContainer, {}),
+				/* @__PURE__ */ jsx("div", { id: popupRootId })
+			]
+		})]
 	});
 }
 function FloatingContainer() {
@@ -5140,7 +5196,7 @@ const IUIController = createIdentifier("univer.ui.ui-controller");
 //#endregion
 //#region package.json
 var name = "@univerjs/ui";
-var version = "0.22.1";
+var version = "0.23.0";
 
 //#endregion
 //#region src/views/components/ribbon/MobileRibbon.tsx
@@ -5637,7 +5693,7 @@ function MobileContextMenu() {
 	const commandService = useDependency(ICommandService);
 	const layoutService = useDependency(ILayoutService);
 	const localeService = useDependency(LocaleService);
-	const { mountContainer } = useContext(ConfigContext);
+	const { mountContainer, direction } = useContext(ConfigContext);
 	visibleRef.current = visible;
 	useEffect(() => {
 		const hostDisposable = contextMenuHostService.registerMenu(MOBILE_CONTEXT_MENU_HOST_ID, () => {
@@ -5676,6 +5732,7 @@ function MobileContextMenu() {
 	}, [localeService, menuType]);
 	if (!mountContainer || !visible) return null;
 	return createPortal(/* @__PURE__ */ jsxs("div", {
+		dir: direction,
 		className: "univer-fixed univer-inset-0 univer-z-[1080] univer-flex univer-items-end",
 		children: [/* @__PURE__ */ jsx("button", {
 			type: "button",
@@ -5752,6 +5809,7 @@ function MobileWorkbench(props) {
 		if (contentRef.current) onRendered === null || onRendered === void 0 || onRendered(contentRef.current);
 	}, [onRendered]);
 	const [locale, setLocale] = useState(localeService.getLocales());
+	const [direction, setDirection] = useState(localeService.getDirection());
 	const portalContainer = useMemo(() => document.createElement("div"), []);
 	useLayoutEffect(() => {
 		const sub = themeService.currentTheme$.subscribe((theme) => {
@@ -5765,6 +5823,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());
@@ -5775,65 +5835,69 @@ function MobileWorkbench(props) {
 		mountContainer,
 		portalContainer
 	]);
+	useEffect(() => {
+		portalContainer.dir = direction;
+	}, [direction, portalContainer]);
 	return /* @__PURE__ */ jsxs(ConfigProvider, {
 		locale: locale === null || locale === void 0 ? void 0 : locale.design,
+		direction,
 		mountContainer: portalContainer,
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				"data-u-comp": "app-layout",
-				className: 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__ */ jsx("header", {
-					"data-u-comp": "headerbar",
-					className: "univer-relative univer-z-10 univer-w-full univer-overflow-hidden",
-					children: /* @__PURE__ */ jsx(ComponentContainer, {
-						components: toolbarComponents,
-						sharedProps: {
-							ribbonType,
-							headerMenuComponents,
-							headerMenu
-						}
-					}, "toolbar")
-				}), /* @__PURE__ */ jsxs("section", {
-					className: "univer-relative univer-flex univer-min-h-0 univer-flex-1 univer-flex-col",
-					children: [
-						/* @__PURE__ */ jsxs("div", {
-							className: "univer-grid univer-h-full univer-grid-cols-[auto_1fr_auto] univer-grid-rows-[100%] univer-overflow-hidden",
-							children: [
-								/* @__PURE__ */ jsx("aside", {
-									className: "univer-h-full",
-									children: /* @__PURE__ */ jsx(ComponentContainer, { components: leftSidebarComponents }, "left-sidebar")
-								}),
-								/* @__PURE__ */ jsxs("section", {
-									className: clsx("univer-relative univer-grid univer-flex-1 univer-grid-rows-[auto_1fr] univer-overflow-hidden univer-bg-white dark:!univer-bg-gray-800", borderBottomClassName),
-									children: [/* @__PURE__ */ jsx("header", {
-										className: "univer-w-screen",
-										children: header && /* @__PURE__ */ jsx(ComponentContainer, { components: headerComponents }, "header")
-									}), /* @__PURE__ */ jsx("section", {
-										ref: contentRef,
-										className: "univer-relative univer-overflow-hidden",
-										"data-range-selector": true,
-										onContextMenu: (e) => e.preventDefault(),
-										children: /* @__PURE__ */ jsx(ComponentContainer, { components: contentComponents }, "content")
-									})]
-								}),
-								/* @__PURE__ */ jsx("aside", {
-									className: "univer-h-full",
-									children: /* @__PURE__ */ jsx(Sidebar, {})
-								})
-							]
-						}),
-						footer && /* @__PURE__ */ jsx("footer", { children: /* @__PURE__ */ jsx(ComponentContainer, { components: footerComponents }, "footer") }),
-						/* @__PURE__ */ jsx(GlobalZone, {}),
-						/* @__PURE__ */ jsx(ZenZone, {})
-					]
-				})]
-			}),
-			/* @__PURE__ */ jsx(ComponentContainer, { components: globalComponents }, "global"),
-			contextMenu && /* @__PURE__ */ jsx(MobileContextMenu, {})
-		]
+		children: [/* @__PURE__ */ jsxs("div", {
+			"data-u-comp": "app-layout",
+			className: 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__ */ jsx("header", {
+				"data-u-comp": "headerbar",
+				className: "univer-relative univer-z-10 univer-w-full univer-overflow-hidden",
+				children: /* @__PURE__ */ jsx(ComponentContainer, {
+					components: toolbarComponents,
+					sharedProps: {
+						ribbonType,
+						headerMenuComponents,
+						headerMenu
+					}
+				}, "toolbar")
+			}), /* @__PURE__ */ jsxs("section", {
+				className: "univer-relative univer-flex univer-min-h-0 univer-flex-1 univer-flex-col",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "univer-grid univer-h-full univer-grid-cols-[auto_1fr_auto] univer-grid-rows-[100%] univer-overflow-hidden",
+						children: [
+							/* @__PURE__ */ jsx("aside", {
+								className: "univer-h-full",
+								children: /* @__PURE__ */ jsx(ComponentContainer, { components: leftSidebarComponents }, "left-sidebar")
+							}),
+							/* @__PURE__ */ jsxs("section", {
+								className: clsx("univer-relative univer-grid univer-flex-1 univer-grid-rows-[auto_1fr] univer-overflow-hidden univer-bg-white dark:!univer-bg-gray-800", borderBottomClassName),
+								children: [/* @__PURE__ */ jsx("header", {
+									className: "univer-w-screen",
+									children: header && /* @__PURE__ */ jsx(ComponentContainer, { components: headerComponents }, "header")
+								}), /* @__PURE__ */ jsx("section", {
+									ref: contentRef,
+									className: "univer-relative univer-overflow-hidden",
+									"data-range-selector": true,
+									onContextMenu: (e) => e.preventDefault(),
+									children: /* @__PURE__ */ jsx(ComponentContainer, { components: contentComponents }, "content")
+								})]
+							}),
+							/* @__PURE__ */ jsx("aside", {
+								className: "univer-h-full",
+								children: /* @__PURE__ */ jsx(Sidebar, {})
+							})
+						]
+					}),
+					footer && /* @__PURE__ */ jsx("footer", { children: /* @__PURE__ */ jsx(ComponentContainer, { components: footerComponents }, "footer") }),
+					/* @__PURE__ */ jsx(GlobalZone, {}),
+					/* @__PURE__ */ jsx(ZenZone, {})
+				]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			dir: direction,
+			children: [/* @__PURE__ */ jsx(ComponentContainer, { components: globalComponents }, "global"), contextMenu && /* @__PURE__ */ jsx(MobileContextMenu, {})]
+		})]
 	});
 }
 
@@ -6724,7 +6788,12 @@ var DesktopLocalStorageService = class {
 * limitations under the License.
 */
 function MessageContainer() {
-	return /* @__PURE__ */ jsx(Messager, { theme: useObservable(useDependency(ThemeService).darkMode$) ? "dark" : "light" });
+	const darkMode = useObservable(useDependency(ThemeService).darkMode$);
+	const { direction } = useContext(ConfigContext);
+	return /* @__PURE__ */ jsx(Messager, {
+		theme: darkMode ? "dark" : "light",
+		dir: direction
+	});
 }
 
 //#endregion
@@ -6763,7 +6832,12 @@ DesktopMessageService = __decorate([__decorateParam(0, Inject(Injector)), __deco
 //#endregion
 //#region src/components/notification/Notification.tsx
 function Notification() {
-	return /* @__PURE__ */ jsx(Toaster, { theme: useObservable(useDependency(ThemeService).darkMode$) ? "dark" : "light" });
+	const darkMode = useObservable(useDependency(ThemeService).darkMode$);
+	const { direction } = useContext(ConfigContext);
+	return /* @__PURE__ */ jsx(Toaster, {
+		theme: darkMode ? "dark" : "light",
+		dir: direction
+	});
 }
 const notification = { show: (options) => {
 	const { type = "message", title, content, duration, closable = true, position = "top-right" } = options;
@@ -7744,7 +7818,7 @@ function extractFontFamily(styleStr) {
 }
 
 //#endregion
-//#region src/views/components/dom/print.tsx
+//#region src/views/components/dom/Print.tsx
 const PrintFloatDomSingle = memo((props) => {
 	var _position$startY, _position$startX;
 	const { layer, id, position } = props;