@univerjs/ui 0.22.1 → 0.23.0

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 { direction: dir } = (0, react.useContext)(_univerjs_design.ConfigContext);
 	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",
@@ -4288,6 +4330,7 @@ function ContextMenuMenu(props) {
 }
 function ContextMenuMenuItem(props) {
 	const { menuKey, menuItem, submenuPortalContainer, onOptionSelect, maxMenuHeight } = props;
+	const { direction } = (0, react.useContext)(_univerjs_design.ConfigContext);
 	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);
@@ -4439,6 +4482,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: {
@@ -4730,6 +4774,7 @@ function GlobalZone() {
 	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 { direction } = (0, react.useContext)(_univerjs_design.ConfigContext);
 	const Component = (0, react.useMemo)(() => {
 		const Component = componentManager.get(componentKey !== null && componentKey !== void 0 ? componentKey : "");
 		if (Component) return Component;
@@ -4744,6 +4789,7 @@ function GlobalZone() {
 	}, [globalZoneService.visible$]);
 	if (!visible) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+		dir: direction,
 		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
@@ -4935,11 +4981,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 +4999,83 @@ 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"),
+				/* @__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 })
+			]
+		})]
 	});
 }
 function FloatingContainer() {
@@ -5185,7 +5241,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";
 
 //#endregion
 //#region src/views/components/ribbon/MobileRibbon.tsx
@@ -5682,7 +5738,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 { mountContainer } = (0, react.useContext)(_univerjs_design.ConfigContext);
+	const { mountContainer, direction } = (0, react.useContext)(_univerjs_design.ConfigContext);
 	visibleRef.current = visible;
 	(0, react.useEffect)(() => {
 		const hostDisposable = contextMenuHostService.registerMenu(MOBILE_CONTEXT_MENU_HOST_ID, () => {
@@ -5721,6 +5777,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 +5854,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 +5868,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 +5880,69 @@ 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)(GlobalZone, {}),
+					/* @__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, {})]
+		})]
 	});
 }
 
@@ -6769,7 +6833,12 @@ 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 darkMode = (0, _wendellhu_redi_react_bindings.useObservable)((0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.ThemeService).darkMode$);
+	const { direction } = (0, react.useContext)(_univerjs_design.ConfigContext);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Messager, {
+		theme: darkMode ? "dark" : "light",
+		dir: direction
+	});
 }
 
 //#endregion
@@ -6808,7 +6877,12 @@ 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 darkMode = (0, _wendellhu_redi_react_bindings.useObservable)((0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.ThemeService).darkMode$);
+	const { direction } = (0, react.useContext)(_univerjs_design.ConfigContext);
+	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;
@@ -7789,7 +7863,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;