@univerjs/ui 1.0.0-alpha.8 → 1.0.0-beta.0

package/lib/es/index.js

@@ -4,7 +4,7 @@ import { Fragment, cloneElement, createContext, createElement, forwardRef, memo,
 import { Button, ColorPicker, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, ConfigContext, ConfigProvider, Confirm, Dialog, Dropdown, DropdownMenu, Gallery, HoverCard, Input, InputNumber, KBD, MessageType, Messager, Popup, Toaster, Tooltip, borderBottomClassName, borderClassName, borderLeftBottomClassName, borderRightClassName, borderTopClassName, clsx, cva, divideXClassName, divideYClassName, isBrowser, message, removeMessage, render, resetButtonClassName, scrollbarClassName, toast, unmount } from "@univerjs/design";
 import { IRenderManagerService, UniverRenderEnginePlugin, ptToPx } from "@univerjs/engine-render";
 import { distinctUntilChanged as distinctUntilChanged$1, map as map$1, scan as scan$1, startWith as startWith$1, switchMap as switchMap$1 } from "rxjs/operators";
-import { RediConsumer, RediContext, RediProvider, WithDependency, connectDependencies, connectInjector, useDependency, useDependency as useDependency$1, useInjector, useObservable, useUpdateBinder } from "@wendellhu/redi/react-bindings";
+import { RediConsumer, RediContext, RediProvider, WithDependency, connectDependencies, connectInjector, useDependency, useInjector, useObservable, useUpdateBinder } from "@wendellhu/redi/react-bindings";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 import { ActivityIcon, CheckMarkIcon, CloseIcon, DatabaseIcon, ExpandIcon, EyeIcon, FeatureSearchIcon, FoodsIcon, FunctionIcon, HomeIcon, IncreaseIcon, InfoIcon, InsertIcon, KeyboardIcon, MoreDownIcon, MoreLeftIcon, MoreRightIcon, MoreVerticalIcon, NatureIcon, ObjectsIcon, PeopleIcon, PlacesIcon, RandomIcon, RecentIcon, RedoIcon, ReduceIcon, SearchIcon, ShortcutIcon, ShrinkIcon, SymbolsIcon, UndoIcon } from "@univerjs/icons";
@@ -28,19 +28,17 @@ import { ActivityIcon, CheckMarkIcon, CloseIcon, DatabaseIcon, ExpandIcon, EyeIc
 const EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE = "data-embed-interaction-boundary-owner";
 const EMBED_CHILD_UNIT_ID_ATTRIBUTE = "data-embed-child-unit-id";
 function getEmbedBoundaryOwner(target) {
-	var _ref, _getAttributeValue;
 	if (!hasClosest(target)) return;
 	const ownerElement = target.closest(`[${EMBED_INTERACTION_BOUNDARY_OWNER_ATTRIBUTE}]`);
-	return (_ref = (_getAttributeValue = getAttributeValue(target, "data-embed-interaction-boundary-owner")) !== null && _getAttributeValue !== void 0 ? _getAttributeValue : getAttributeValue(ownerElement, "data-embed-interaction-boundary-owner")) !== null && _ref !== void 0 ? _ref : void 0;
+	return getAttributeValue(target, "data-embed-interaction-boundary-owner") ?? getAttributeValue(ownerElement, "data-embed-interaction-boundary-owner") ?? void 0;
 }
 function isEmbedBoundaryTarget(target) {
 	return hasClosest(target) && target.closest(`[${"data-embed-interaction-boundary-owner"}]`) != null;
 }
 function getEmbedChildUnitId(target) {
-	var _ref2, _getAttributeValue2;
 	if (!hasClosest(target)) return;
 	const childRuntime = target.closest(`[${EMBED_CHILD_UNIT_ID_ATTRIBUTE}]`);
-	return (_ref2 = (_getAttributeValue2 = getAttributeValue(target, "data-embed-child-unit-id")) !== null && _getAttributeValue2 !== void 0 ? _getAttributeValue2 : getAttributeValue(childRuntime, "data-embed-child-unit-id")) !== null && _ref2 !== void 0 ? _ref2 : void 0;
+	return getAttributeValue(target, "data-embed-child-unit-id") ?? getAttributeValue(childRuntime, "data-embed-child-unit-id") ?? void 0;
 }
 function keepInteractionInsideSameEmbedBoundary(event) {
 	const owner = getEmbedBoundaryOwner(event.currentTarget);
@@ -51,9 +49,8 @@ function hasClosest(target) {
 	return !!target && typeof target.closest === "function";
 }
 function getAttributeValue(target, name) {
-	var _getAttribute$call;
 	const getAttribute = target === null || target === void 0 ? void 0 : target.getAttribute;
-	return typeof getAttribute === "function" ? (_getAttribute$call = getAttribute.call(target, name)) !== null && _getAttribute$call !== void 0 ? _getAttribute$call : void 0 : void 0;
+	return typeof getAttribute === "function" ? getAttribute.call(target, name) ?? void 0 : void 0;
 }
 
 //#endregion
@@ -920,14 +917,13 @@ let ShortcutService = class ShortcutService extends Disposable {
 		return null;
 	}
 	getShortcutDisplay(shortcut) {
-		var _KeyCodeToChar;
 		const binding = this._getBindingFromItem(shortcut);
 		if (!binding) return null;
 		const ctrlKey = binding & 4096;
 		const shiftKey = binding & 1024;
 		const altKey = binding & 2048;
 		const macCtrl = binding & 8192;
-		const body = (_KeyCodeToChar = KeyCodeToChar[binding & 255]) !== null && _KeyCodeToChar !== void 0 ? _KeyCodeToChar : "<->";
+		const body = KeyCodeToChar[binding & 255] ?? "<->";
 		if (this._platformService.isMac) return `${ctrlKey ? "⌘+" : ""}${shiftKey ? "⇧+" : ""}${altKey ? "⌥+" : ""}${macCtrl ? "⌃+" : ""}${body}`;
 		return `${ctrlKey ? "Ctrl+" : ""}${shiftKey ? "Shift+" : ""}${altKey ? "Alt+" : ""}${body}`;
 	}
@@ -947,26 +943,22 @@ let ShortcutService = class ShortcutService extends Disposable {
 	_resolveKeyboardEvent(e) {
 		const candidate = this.dispatch(e);
 		if (candidate) {
-			var _this$_getRuntimeServ, _this$_getRuntimeServ2;
-			(_this$_getRuntimeServ = (_this$_getRuntimeServ2 = this._getRuntimeService(e, ICommandService)) === null || _this$_getRuntimeServ2 === void 0 ? void 0 : _this$_getRuntimeServ2.executeCommand(candidate.id, candidate.staticParameters)) !== null && _this$_getRuntimeServ !== void 0 || this._commandService.executeCommand(candidate.id, candidate.staticParameters);
+			var _this$_getRuntimeServ;
+			((_this$_getRuntimeServ = this._getRuntimeService(e, ICommandService)) === null || _this$_getRuntimeServ === void 0 ? void 0 : _this$_getRuntimeServ.executeCommand(candidate.id, candidate.staticParameters)) ?? this._commandService.executeCommand(candidate.id, candidate.staticParameters);
 			e.preventDefault();
 		}
 	}
 	dispatch(e) {
-		var _this$_getRuntimeServ3;
 		if (this._forceEscaped || this._forceDisabled) return;
 		if (this._layoutService && !this._layoutService.checkElementInCurrentContainers(e.target)) return;
 		const binding = this._deriveBindingFromEvent(e);
 		if (binding === null) return;
 		const shortcuts = this._shortCutMapping.get(binding);
 		if (shortcuts === void 0) return;
-		const contextService = (_this$_getRuntimeServ3 = this._getRuntimeService(e, IContextService)) !== null && _this$_getRuntimeServ3 !== void 0 ? _this$_getRuntimeServ3 : this._contextService;
-		const candidateShortcut = Array.from(shortcuts).sort((s1, s2) => {
-			var _s2$priority, _s1$priority;
-			return ((_s2$priority = s2.priority) !== null && _s2$priority !== void 0 ? _s2$priority : 0) - ((_s1$priority = s1.priority) !== null && _s1$priority !== void 0 ? _s1$priority : 0);
-		}).find((s) => {
-			var _s$eventPreconditions, _s$eventPreconditions2, _s$preconditions, _s$preconditions2;
-			return ((_s$eventPreconditions = (_s$eventPreconditions2 = s.eventPreconditions) === null || _s$eventPreconditions2 === void 0 ? void 0 : _s$eventPreconditions2.call(s, e)) !== null && _s$eventPreconditions !== void 0 ? _s$eventPreconditions : true) && ((_s$preconditions = (_s$preconditions2 = s.preconditions) === null || _s$preconditions2 === void 0 ? void 0 : _s$preconditions2.call(s, contextService)) !== null && _s$preconditions !== void 0 ? _s$preconditions : true);
+		const contextService = this._getRuntimeService(e, IContextService) ?? this._contextService;
+		const candidateShortcut = Array.from(shortcuts).sort((s1, s2) => (s2.priority ?? 0) - (s1.priority ?? 0)).find((s) => {
+			var _s$eventPreconditions, _s$preconditions;
+			return (((_s$eventPreconditions = s.eventPreconditions) === null || _s$eventPreconditions === void 0 ? void 0 : _s$eventPreconditions.call(s, e)) ?? true) && (((_s$preconditions = s.preconditions) === null || _s$preconditions === void 0 ? void 0 : _s$preconditions.call(s, contextService)) ?? true);
 		});
 		if (this._shouldLetEmbedTextEditorHandleNativeShortcut(e, binding) && (candidateShortcut === null || candidateShortcut === void 0 ? void 0 : candidateShortcut.nativeTextEditorBehavior) !== 1) return;
 		return candidateShortcut;
@@ -1308,7 +1300,7 @@ let MenuManagerService = _MenuManagerService = class MenuManagerService extends
 	* @param target default is root menu
 	*/
 	mergeMenu(source, target) {
-		const _target = target !== null && target !== void 0 ? target : this._menu;
+		const _target = target ?? this._menu;
 		for (const [key, value] of Object.entries(_target)) if (key in source) {
 			const targetRecord = _target;
 			const sourceRecord = source;
@@ -1375,7 +1367,6 @@ let MenuManagerService = _MenuManagerService = class MenuManagerService extends
 	* @returns Menu schema array or empty array if not found
 	*/
 	getMenuByPositionKey(key) {
-		var _findKey;
 		const findKey = (obj) => {
 			if (key in obj) return this._buildMenuSchema(obj[key]);
 			for (const k in obj) {
@@ -1386,7 +1377,7 @@ let MenuManagerService = _MenuManagerService = class MenuManagerService extends
 				}
 			}
 		};
-		return (_findKey = findKey(this._menu)) !== null && _findKey !== void 0 ? _findKey : [];
+		return findKey(this._menu) ?? [];
 	}
 	/**
 	* Get flat menu schema by position key
@@ -1410,7 +1401,7 @@ let MenuManagerService = _MenuManagerService = class MenuManagerService extends
 };
 MenuManagerService = _MenuManagerService = __decorate([__decorateParam(0, Inject(Injector)), __decorateParam(1, IConfigService)], MenuManagerService);
 function normalizeMenuOrder(order) {
-	return order !== null && order !== void 0 ? order : 0;
+	return order ?? 0;
 }
 function isMenuSchemaRecord(value) {
 	return value != null && typeof value === "object" && !Array.isArray(value);
@@ -1608,8 +1599,7 @@ let DesktopRibbonService = class DesktopRibbonService extends Disposable {
 		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];
+			const fallbackTab = ribbon.find((group) => group.key === this._lastNonContextualActivatedTab && !group.contextual) ?? ribbon.find((group) => group.key === "ribbon.start") ?? 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");
@@ -1659,12 +1649,10 @@ function useObservableRef(observable, defaultValue) {
 const FEATURE_SEARCH_COMPONENT = "FeatureSearch";
 const FEATURE_SEARCH_DIALOG_ID = "FEATURE_SEARCH_DIALOG";
 function resolveParams(item, value) {
-	const params = typeof item.params === "function" ? item.params() : item.params;
-	return params !== null && params !== void 0 ? params : value === void 0 ? void 0 : { value };
+	return (typeof item.params === "function" ? item.params() : item.params) ?? (value === void 0 ? void 0 : { value });
 }
 function resolveOptionParams(option) {
-	const params = typeof option.params === "function" ? option.params(option.value) : option.params;
-	return params !== null && params !== void 0 ? params : option.value === void 0 ? void 0 : { value: option.value };
+	return (typeof option.params === "function" ? option.params(option.value) : option.params) ?? (option.value === void 0 ? void 0 : { value: option.value });
 }
 function deduplicate(items) {
 	return items.filter((item, index) => items.findIndex((candidate) => candidate.commandId === item.commandId && Tools.diffValue(candidate.params, item.params)) === index);
@@ -1678,14 +1666,12 @@ function FeatureSearch() {
 	const ribbonService = useDependency(IRibbonService);
 	const items = useObservable(useMemo(() => {
 		function getItemTitle(item) {
-			var _ref, _item$title;
-			const titleKey = (_ref = (_item$title = item.title) !== null && _item$title !== void 0 ? _item$title : item.tooltip) !== null && _ref !== void 0 ? _ref : item.description;
+			const titleKey = item.title ?? item.tooltip ?? item.description;
 			return titleKey ? localeService.t(titleKey) : "";
 		}
 		function collectCandidates(schemas, path, keyPath, ancestors = [], parentTitle) {
 			return schemas.flatMap((schema, index) => {
-				var _schema$title;
-				const schemaTitle = localeService.t((_schema$title = schema.title) !== null && _schema$title !== void 0 ? _schema$title : "");
+				const schemaTitle = localeService.t(schema.title ?? "");
 				const schemaPath = schemaTitle ? [...path, schemaTitle] : path;
 				const schemaKeyPath = [...keyPath, `${schema.key}:${index}`];
 				const result = [];
@@ -1708,48 +1694,44 @@ function FeatureSearch() {
 			});
 		}
 		function observeCandidate(candidate) {
-			var _item$hidden$$pipe, _item$hidden$, _item$disabled$$pipe, _item$disabled$, _item$value$$pipe, _item$value$;
+			var _item$hidden$, _item$disabled$, _item$value$;
 			const { item } = candidate;
 			const hasOptions = item.type === 1 || item.type === 2;
 			const selections = hasOptions ? item.selections : void 0;
-			const selections$ = isObservable(selections) ? selections.pipe(startWith$1([])) : of(selections !== null && selections !== void 0 ? selections : []);
+			const selections$ = isObservable(selections) ? selections.pipe(startWith$1([])) : of(selections ?? []);
 			return combineLatest([
 				candidate.ancestors.length ? combineLatest(candidate.ancestors.map((ancestor) => {
-					var _ancestor$hidden$$pip, _ancestor$hidden$;
-					return (_ancestor$hidden$$pip = (_ancestor$hidden$ = ancestor.hidden$) === null || _ancestor$hidden$ === void 0 ? void 0 : _ancestor$hidden$.pipe(startWith$1(true))) !== null && _ancestor$hidden$$pip !== void 0 ? _ancestor$hidden$$pip : of(false);
+					var _ancestor$hidden$;
+					return ((_ancestor$hidden$ = ancestor.hidden$) === null || _ancestor$hidden$ === void 0 ? void 0 : _ancestor$hidden$.pipe(startWith$1(true))) ?? of(false);
 				})).pipe(map$1((states) => states.some(Boolean))) : of(false),
 				candidate.ancestors.length ? combineLatest(candidate.ancestors.map((ancestor) => {
-					var _ancestor$disabled$$p, _ancestor$disabled$;
-					return (_ancestor$disabled$$p = (_ancestor$disabled$ = ancestor.disabled$) === null || _ancestor$disabled$ === void 0 ? void 0 : _ancestor$disabled$.pipe(startWith$1(true))) !== null && _ancestor$disabled$$p !== void 0 ? _ancestor$disabled$$p : of(false);
+					var _ancestor$disabled$;
+					return ((_ancestor$disabled$ = ancestor.disabled$) === null || _ancestor$disabled$ === void 0 ? void 0 : _ancestor$disabled$.pipe(startWith$1(true))) ?? of(false);
 				})).pipe(map$1((states) => states.some(Boolean))) : of(false),
-				(_item$hidden$$pipe = (_item$hidden$ = item.hidden$) === null || _item$hidden$ === void 0 ? void 0 : _item$hidden$.pipe(startWith$1(true))) !== null && _item$hidden$$pipe !== void 0 ? _item$hidden$$pipe : of(false),
-				(_item$disabled$$pipe = (_item$disabled$ = item.disabled$) === null || _item$disabled$ === void 0 ? void 0 : _item$disabled$.pipe(startWith$1(true))) !== null && _item$disabled$$pipe !== void 0 ? _item$disabled$$pipe : of(false),
-				(_item$value$$pipe = (_item$value$ = item.value$) === null || _item$value$ === void 0 ? void 0 : _item$value$.pipe(startWith$1(void 0))) !== null && _item$value$$pipe !== void 0 ? _item$value$$pipe : of(void 0),
+				((_item$hidden$ = item.hidden$) === null || _item$hidden$ === void 0 ? void 0 : _item$hidden$.pipe(startWith$1(true))) ?? of(false),
+				((_item$disabled$ = item.disabled$) === null || _item$disabled$ === void 0 ? void 0 : _item$disabled$.pipe(startWith$1(true))) ?? of(false),
+				((_item$value$ = item.value$) === null || _item$value$ === void 0 ? void 0 : _item$value$.pipe(startWith$1(void 0))) ?? of(void 0),
 				selections$
 			]).pipe(map$1(([ancestorHidden, ancestorDisabled, hidden, disabled, value, options]) => {
 				if (ancestorHidden || ancestorDisabled || hidden || disabled) return [];
 				const title = getItemTitle(item);
 				const path = candidate.path.join(" / ");
 				const result = [];
-				if (title && item.type !== 1 && item.type !== 3) {
-					var _item$description, _item$commandId;
-					result.push({
-						key: candidate.key,
-						title,
-						parentTitle: candidate.parentTitle,
-						description: localeService.t((_item$description = item.description) !== null && _item$description !== void 0 ? _item$description : ""),
-						path,
-						commandId: (_item$commandId = item.commandId) !== null && _item$commandId !== void 0 ? _item$commandId : item.id,
-						params: resolveParams(item, value),
-						getParams: () => resolveParams(item, value)
-					});
-				}
+				if (title && item.type !== 1 && item.type !== 3) result.push({
+					key: candidate.key,
+					title,
+					parentTitle: candidate.parentTitle,
+					description: localeService.t(item.description ?? ""),
+					path,
+					commandId: item.commandId ?? item.id,
+					params: resolveParams(item, value),
+					getParams: () => resolveParams(item, value)
+				});
 				if (hasOptions) options.forEach((option, index) => {
-					var _ref2, _ref3, _ref4, _option$commandId, _ref5, _ref6, _option$id;
 					if (option.disabled || typeof option.label !== "string") return;
-					const commandId = (_ref2 = (_ref3 = (_ref4 = (_option$commandId = option.commandId) !== null && _option$commandId !== void 0 ? _option$commandId : option.id) !== null && _ref4 !== void 0 ? _ref4 : item.selectionsCommandId) !== null && _ref3 !== void 0 ? _ref3 : item.commandId) !== null && _ref2 !== void 0 ? _ref2 : item.id;
+					const commandId = option.commandId ?? option.id ?? item.selectionsCommandId ?? item.commandId ?? item.id;
 					result.push({
-						key: `${candidate.key}:option:${(_ref5 = (_ref6 = (_option$id = option.id) !== null && _option$id !== void 0 ? _option$id : option.commandId) !== null && _ref6 !== void 0 ? _ref6 : option.value) !== null && _ref5 !== void 0 ? _ref5 : index}`,
+						key: `${candidate.key}:option:${option.id ?? option.commandId ?? option.value ?? index}`,
 						title: localeService.t(option.label),
 						parentTitle: title,
 						description: "",
@@ -1782,35 +1764,32 @@ function FeatureSearch() {
 		children: [/* @__PURE__ */ jsx(CommandInput, {
 			autoFocus: true,
 			placeholder: localeService.t("ui.featureSearch.placeholder")
-		}), /* @__PURE__ */ jsxs(CommandList, { children: [/* @__PURE__ */ jsx(CommandEmpty, { children: localeService.t("ui.featureSearch.empty") }), /* @__PURE__ */ jsx(CommandGroup, { children: items.map((item) => {
-			var _item$parentTitle;
-			return /* @__PURE__ */ jsxs(CommandItem, {
-				value: item.key,
-				keywords: [
-					(_item$parentTitle = item.parentTitle) !== null && _item$parentTitle !== void 0 ? _item$parentTitle : "",
-					item.title,
-					item.description,
-					item.path
-				],
-				onSelect: () => execute(item),
-				children: [/* @__PURE__ */ jsxs("span", {
-					className: "univer-flex univer-min-w-0 univer-flex-1 univer-items-center univer-gap-1",
-					children: [item.parentTitle && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
-						className: "univer-shrink-0",
-						children: item.parentTitle
-					}), /* @__PURE__ */ jsx("span", {
-						className: "univer-text-gray-400",
-						children: "/"
-					})] }), /* @__PURE__ */ jsx("span", {
-						className: "univer-truncate",
-						children: item.title
-					})]
-				}), item.path && /* @__PURE__ */ jsx("span", {
-					className: "univer-max-w-1/2 univer-truncate univer-text-xs univer-text-gray-400",
-					children: item.path
+		}), /* @__PURE__ */ jsxs(CommandList, { children: [/* @__PURE__ */ jsx(CommandEmpty, { children: localeService.t("ui.featureSearch.empty") }), /* @__PURE__ */ jsx(CommandGroup, { children: items.map((item) => /* @__PURE__ */ jsxs(CommandItem, {
+			value: item.key,
+			keywords: [
+				item.parentTitle ?? "",
+				item.title,
+				item.description,
+				item.path
+			],
+			onSelect: () => execute(item),
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "univer-flex univer-min-w-0 univer-flex-1 univer-items-center univer-gap-1",
+				children: [item.parentTitle && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+					className: "univer-shrink-0",
+					children: item.parentTitle
+				}), /* @__PURE__ */ jsx("span", {
+					className: "univer-text-gray-400",
+					children: "/"
+				})] }), /* @__PURE__ */ jsx("span", {
+					className: "univer-truncate",
+					children: item.title
 				})]
-			}, item.key);
-		}) })] })]
+			}), item.path && /* @__PURE__ */ jsx("span", {
+				className: "univer-max-w-1/2 univer-truncate univer-text-xs univer-text-gray-400",
+				children: item.path
+			})]
+		}, item.key)) })] })]
 	});
 }
 
@@ -1973,8 +1952,8 @@ var UIPartsService = class extends Disposable {
 		});
 	}
 	isUIVisible(part) {
-		var _this$_uiVisible$get, _this$_disabledUIPart;
-		return ((_this$_uiVisible$get = this._uiVisible.get(part)) !== null && _this$_uiVisible$get !== void 0 ? _this$_uiVisible$get : true) && !((_this$_disabledUIPart = this._disabledUIParts.get(part)) === null || _this$_disabledUIPart === void 0 ? void 0 : _this$_disabledUIPart.size);
+		var _this$_disabledUIPart;
+		return (this._uiVisible.get(part) ?? true) && !((_this$_disabledUIPart = this._disabledUIParts.get(part)) === null || _this$_disabledUIPart === void 0 ? void 0 : _this$_disabledUIPart.size);
 	}
 	registerDisabledUIParts(parts, disabled$) {
 		const uniqueParts = [...new Set(parts)];
@@ -1984,9 +1963,8 @@ var UIPartsService = class extends Disposable {
 			if (disabled === nextDisabled) return;
 			disabled = nextDisabled;
 			uniqueParts.forEach((part) => {
-				var _this$_disabledUIPart2;
 				const wasVisible = this.isUIVisible(part);
-				const registrations = (_this$_disabledUIPart2 = this._disabledUIParts.get(part)) !== null && _this$_disabledUIPart2 !== void 0 ? _this$_disabledUIPart2 : /* @__PURE__ */ new Set();
+				const registrations = this._disabledUIParts.get(part) ?? /* @__PURE__ */ new Set();
 				if (disabled) {
 					registrations.add(registration);
 					this._disabledUIParts.set(part, registrations);
@@ -2035,6 +2013,7 @@ var CanvasFloatDomService = class extends Disposable {
 	constructor(..._args) {
 		super(..._args);
 		_defineProperty(this, "_domLayerMap", /* @__PURE__ */ new Map());
+		_defineProperty(this, "_scopedRenderRootCount", /* @__PURE__ */ new Map());
 		_defineProperty(this, "_domLayers$", new BehaviorSubject([]));
 		_defineProperty(this, "domLayers$", this._domLayers$.asObservable());
 	}
@@ -2057,6 +2036,20 @@ var CanvasFloatDomService = class extends Disposable {
 		this._domLayerMap.set(item.id, item);
 		this._notice();
 	}
+	hasScopedRenderRoot(unitId) {
+		return this._scopedRenderRootCount.has(unitId);
+	}
+	registerScopedRenderRoot(unitId) {
+		this._scopedRenderRootCount.set(unitId, (this._scopedRenderRootCount.get(unitId) ?? 0) + 1);
+		this._notice();
+		return toDisposable(() => {
+			const count = this._scopedRenderRootCount.get(unitId);
+			if (count == null) return;
+			if (count === 1) this._scopedRenderRootCount.delete(unitId);
+			else this._scopedRenderRootCount.set(unitId, count - 1);
+			this._notice();
+		});
+	}
 	removeFloatDom(id) {
 		if (this._domLayerMap.delete(id)) this._notice();
 	}
@@ -2066,6 +2059,7 @@ var CanvasFloatDomService = class extends Disposable {
 	}
 	dispose() {
 		this._domLayerMap.clear();
+		this._scopedRenderRootCount.clear();
 		this._domLayers$.next([]);
 		this._domLayers$.complete();
 		super.dispose();
@@ -2112,9 +2106,8 @@ var CanvasFloatDomPreviewService = class extends Disposable {
 const LEGACY_WRAPPER_INSET = 2;
 const LEGACY_CONTENT_INSET = 4;
 function resolveFloatDomLayout(position, contentBox) {
-	var _contentBox$wrapperIn, _contentBox$contentIn, _position$opacity;
-	const wrapperInset = (_contentBox$wrapperIn = contentBox === null || contentBox === void 0 ? void 0 : contentBox.wrapperInset) !== null && _contentBox$wrapperIn !== void 0 ? _contentBox$wrapperIn : LEGACY_WRAPPER_INSET;
-	const contentInset = (_contentBox$contentIn = contentBox === null || contentBox === void 0 ? void 0 : contentBox.contentInset) !== null && _contentBox$contentIn !== void 0 ? _contentBox$contentIn : LEGACY_CONTENT_INSET;
+	const wrapperInset = (contentBox === null || contentBox === void 0 ? void 0 : contentBox.wrapperInset) ?? LEGACY_WRAPPER_INSET;
+	const contentInset = (contentBox === null || contentBox === void 0 ? void 0 : contentBox.contentInset) ?? LEGACY_CONTENT_INSET;
 	return {
 		wrapper: {
 			top: position.startY,
@@ -2122,7 +2115,7 @@ function resolveFloatDomLayout(position, contentBox) {
 			width: Math.max(position.endX - position.startX - wrapperInset, 0),
 			height: Math.max(position.endY - position.startY - wrapperInset, 0),
 			transform: `rotate(${position.rotate}deg)`,
-			opacity: (_position$opacity = position.opacity) !== null && _position$opacity !== void 0 ? _position$opacity : 1
+			opacity: position.opacity ?? 1
 		},
 		inner: {
 			width: position.width - contentInset,
@@ -2251,17 +2244,20 @@ function FloatDomSingleContent(props) {
 	});
 }
 const FloatDom = ({ unitId }) => {
-	var _layers$filter;
 	const instanceService = useDependency(IUniverInstanceService);
-	const layers = useObservable(useDependency(CanvasFloatDomService).domLayers$);
+	const domLayerService = useDependency(CanvasFloatDomService);
+	const layers = useObservable(domLayerService.domLayers$);
 	const currentUnitId = resolveFloatDomCurrentUnitId(unitId, useObservable(instanceService.focused$));
-	return layers === null || layers === void 0 || (_layers$filter = layers.filter((layer) => shouldRenderFloatDomLayer(layer[1], currentUnitId))) === null || _layers$filter === void 0 ? void 0 : _layers$filter.map((layer) => {
-		var _layer$1$domId;
-		return /* @__PURE__ */ jsx(FloatDomSingle, {
-			id: (_layer$1$domId = layer[1].domId) !== null && _layer$1$domId !== void 0 ? _layer$1$domId : layer[0],
-			layer: layer[1]
-		}, layer[0]);
-	});
+	useEffect(() => {
+		if (typeof unitId !== "string") return;
+		const disposable = domLayerService.registerScopedRenderRoot(unitId);
+		return () => disposable.dispose();
+	}, [domLayerService, unitId]);
+	const visibleLayers = typeof unitId === "string" ? layers === null || layers === void 0 ? void 0 : layers.filter((layer) => layer[1].unitId === unitId) : layers === null || layers === void 0 ? void 0 : layers.filter((layer) => !domLayerService.hasScopedRenderRoot(layer[1].unitId) && shouldRenderFloatDomLayer(layer[1], currentUnitId));
+	return visibleLayers === null || visibleLayers === void 0 ? void 0 : visibleLayers.map((layer) => /* @__PURE__ */ jsx(FloatDomSingle, {
+		id: layer[1].domId ?? layer[0],
+		layer: layer[1]
+	}, layer[0]));
 };
 function resolveFloatDomCurrentUnitId(unitId, focusedUnit) {
 	if (typeof unitId === "string") return unitId;
@@ -2273,9 +2269,8 @@ function resolveFloatDomCurrentUnitId(unitId, focusedUnit) {
 	return null;
 }
 function resolveFloatDomOverflow(props) {
-	var _viewport$bleedWidth;
 	const viewport = props.customBlockRenderViewport;
-	if (!(Number.isFinite(viewport === null || viewport === void 0 ? void 0 : viewport.bleedWidth) && ((_viewport$bleedWidth = viewport === null || viewport === void 0 ? void 0 : viewport.bleedWidth) !== null && _viewport$bleedWidth !== void 0 ? _viewport$bleedWidth : 0) > 0)) return {
+	if (!(Number.isFinite(viewport === null || viewport === void 0 ? void 0 : viewport.bleedWidth) && ((viewport === null || viewport === void 0 ? void 0 : viewport.bleedWidth) ?? 0) > 0)) return {
 		outerOverflow: "hidden",
 		innerOverflow: "hidden"
 	};
@@ -2399,11 +2394,10 @@ function calcPopupPosition(layout) {
 	};
 }
 function RectPopup(props) {
-	var _uiConfig$popupRootId;
 	const { mask, portal, children, anchorRect$, direction = "vertical", onClickOutside, excludeOutside, excludeRects, onPointerEnter, onPointerLeave, onClick, hidden, onContextMenu, zIndex = 1020, maskZIndex = 100, onMaskClick, noPushMinimumGap, autoRelayout = true } = props;
 	const nodeRef = useRef(null);
-	const clickOtherFn = useEvent(onClickOutside !== null && onClickOutside !== void 0 ? onClickOutside : (() => {}));
-	const contextMenuFn = useEvent(onContextMenu !== null && onContextMenu !== void 0 ? onContextMenu : (() => {}));
+	const clickOtherFn = useEvent(onClickOutside ?? (() => {}));
+	const contextMenuFn = useEvent(onContextMenu ?? (() => {}));
 	const positionRef = useRef({
 		top: -9999,
 		left: -9999
@@ -2412,7 +2406,7 @@ function RectPopup(props) {
 	const configService = useDependency(IConfigService);
 	const anchorRectRef = useRef(void 0);
 	const uiConfig = configService.getConfig(UI_PLUGIN_CONFIG_KEY);
-	const popupRootId = (_uiConfig$popupRootId = uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.popupRootId) !== null && _uiConfig$popupRootId !== void 0 ? _uiConfig$popupRootId : "univer-popup-portal";
+	const popupRootId = (uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.popupRootId) ?? "univer-popup-portal";
 	const updatePosition = useEvent((position) => {
 		requestAnimationFrame(() => {
 			if (!nodeRef.current) return;
@@ -2455,11 +2449,10 @@ function RectPopup(props) {
 	}, [anchorRect$, direction]);
 	useEffect(() => {
 		const handleClickOther = (e) => {
-			var _excludeRectsRef$curr;
 			if (excludeOutside && (excludeOutside.indexOf(e.target) > -1 || excludeOutside.some((item) => item.contains(e.target)))) return;
 			const x = e.clientX;
 			const y = e.clientY;
-			const rects = [...(_excludeRectsRef$curr = excludeRectsRef === null || excludeRectsRef === void 0 ? void 0 : excludeRectsRef.current) !== null && _excludeRectsRef$curr !== void 0 ? _excludeRectsRef$curr : []];
+			const rects = [...(excludeRectsRef === null || excludeRectsRef === void 0 ? void 0 : excludeRectsRef.current) ?? []];
 			if (anchorRectRef.current) rects.push(anchorRectRef.current);
 			for (const rect of rects) if (x <= rect.right && x >= rect.left && y <= rect.bottom && y >= rect.top) return;
 			clickOtherFn(e);
@@ -2519,9 +2512,8 @@ RectPopup.useContext = () => useContext(RectPopupContext);
 //#region src/views/components/popup/CanvasPopup.tsx
 const SingleCanvasPopup = ({ popup, children }) => {
 	const anchorRect$ = useMemo(() => popup.anchorRect$.pipe(throttleTime(0, animationFrameScheduler), map((anchorRect) => {
-		var _popup$offset;
 		const { bottom, left, right, top } = anchorRect;
-		const [x = 0, y = 0] = (_popup$offset = popup.offset) !== null && _popup$offset !== void 0 ? _popup$offset : [];
+		const [x = 0, y = 0] = popup.offset ?? [];
 		return {
 			left: left - x,
 			right: right + x,
@@ -2530,8 +2522,8 @@ const SingleCanvasPopup = ({ popup, children }) => {
 		};
 	})), [popup.anchorRect$, popup.offset]);
 	const hiddenRects$ = useMemo(() => {
-		var _popup$hiddenRects$$p, _popup$hiddenRects$;
-		return (_popup$hiddenRects$$p = (_popup$hiddenRects$ = popup.hiddenRects$) === null || _popup$hiddenRects$ === void 0 ? void 0 : _popup$hiddenRects$.pipe(throttleTime(0, animationFrameScheduler))) !== null && _popup$hiddenRects$$p !== void 0 ? _popup$hiddenRects$$p : of([]);
+		var _popup$hiddenRects$;
+		return ((_popup$hiddenRects$ = popup.hiddenRects$) === null || _popup$hiddenRects$ === void 0 ? void 0 : _popup$hiddenRects$.pipe(throttleTime(0, animationFrameScheduler))) ?? of([]);
 	}, [popup.hiddenRects$]);
 	const excludeRectsRef = useObservableRef(useMemo(() => {
 		var _popup$excludeRects$;
@@ -2623,11 +2615,10 @@ var RibbonOverrideService = class extends Disposable {
 //#region src/views/components/ComponentContainer.tsx
 function ComponentContainer(props) {
 	const { components, fallback, sharedProps } = props;
-	if (!components || components.size === 0) return fallback !== null && fallback !== void 0 ? fallback : null;
+	if (!components || components.size === 0) return fallback ?? null;
 	return Array.from(components.values()).map((component, index) => {
-		var _component$displayNam;
 		return createElement(component, {
-			key: `${(_component$displayNam = component.displayName) !== null && _component$displayNam !== void 0 ? _component$displayNam : index}`,
+			key: `${component.displayName ?? index}`,
 			...sharedProps
 		});
 	});
@@ -2640,9 +2631,8 @@ function ComponentContainer(props) {
 * component.
 */
 function useComponentsOfPart(part, injector) {
-	var _injector$get;
 	const injectedUIPartsService = useDependency(IUIPartsService);
-	const uiPartsService = (_injector$get = injector === null || injector === void 0 ? void 0 : injector.get(IUIPartsService)) !== null && _injector$get !== void 0 ? _injector$get : injectedUIPartsService;
+	const uiPartsService = (injector === null || injector === void 0 ? void 0 : injector.get(IUIPartsService)) ?? injectedUIPartsService;
 	const changeInfo = useObservable(useMemo(() => uiPartsService.uiVisibleChange$.pipe(filter((ui) => ui.ui === part)), [part, uiPartsService]));
 	const updateCounterRef = useRef(0);
 	return useMemo(() => uiPartsService.isUIVisible(part) ? uiPartsService.getComponents(part) : /* @__PURE__ */ new Set(), [useObservable(() => uiPartsService.componentRegistered$.pipe(filter((key) => key === part), debounceTime(200), map(() => updateCounterRef.current += 1), startWith(updateCounterRef.current += 1)), void 0, void 0, [
@@ -2700,8 +2690,7 @@ 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) => {
-				var _iconMap;
-				const Icon = (_iconMap = iconMap[group.key]) !== null && _iconMap !== void 0 ? _iconMap : MoreVerticalIcon;
+				const Icon = iconMap[group.key] ?? MoreVerticalIcon;
 				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",
@@ -2765,14 +2754,13 @@ function placeRibbonGridItems(items) {
 	const placements = /* @__PURE__ */ new Map();
 	const fallbackItems = [];
 	for (const item of items) {
-		var _layout$rowSpan, _layout$columnSpan, _layout$showLabel;
 		const layout = item.gridLayout;
 		if (!layout) {
 			fallbackItems.push({ item });
 			continue;
 		}
-		const rowSpan = (_layout$rowSpan = layout.rowSpan) !== null && _layout$rowSpan !== void 0 ? _layout$rowSpan : 1;
-		const columnSpan = (_layout$columnSpan = layout.columnSpan) !== null && _layout$columnSpan !== void 0 ? _layout$columnSpan : 1;
+		const rowSpan = layout.rowSpan ?? 1;
+		const columnSpan = layout.columnSpan ?? 1;
 		const cells = getCells(layout.row, layout.column, rowSpan, columnSpan);
 		if (!isValidGridGeometry(layout, rowSpan, cells)) {
 			fallbackItems.push({ item });
@@ -2784,7 +2772,7 @@ function placeRibbonGridItems(items) {
 			column: layout.column,
 			rowSpan,
 			columnSpan,
-			showLabel: (_layout$showLabel = layout.showLabel) !== null && _layout$showLabel !== void 0 ? _layout$showLabel : false,
+			showLabel: layout.showLabel ?? false,
 			width: layout.width,
 			iconSize: layout.iconSize
 		};
@@ -2799,9 +2787,8 @@ function placeRibbonGridItems(items) {
 		placements.set(item, placement);
 	}
 	for (const { item, layout } of fallbackItems) {
-		var _layout$rowSpan2, _layout$columnSpan2, _layout$showLabel2;
-		const rowSpan = (_layout$rowSpan2 = layout === null || layout === void 0 ? void 0 : layout.rowSpan) !== null && _layout$rowSpan2 !== void 0 ? _layout$rowSpan2 : 1;
-		const columnSpan = (_layout$columnSpan2 = layout === null || layout === void 0 ? void 0 : layout.columnSpan) !== null && _layout$columnSpan2 !== void 0 ? _layout$columnSpan2 : 1;
+		const rowSpan = (layout === null || layout === void 0 ? void 0 : layout.rowSpan) ?? 1;
+		const columnSpan = (layout === null || layout === void 0 ? void 0 : layout.columnSpan) ?? 1;
 		const { row, column, cells } = findFirstAvailableCells(occupied, rowSpan, columnSpan);
 		cells.forEach((cell) => occupied.add(cell));
 		placements.set(item, {
@@ -2810,7 +2797,7 @@ function placeRibbonGridItems(items) {
 			column,
 			rowSpan,
 			columnSpan,
-			showLabel: (_layout$showLabel2 = layout === null || layout === void 0 ? void 0 : layout.showLabel) !== null && _layout$showLabel2 !== void 0 ? _layout$showLabel2 : false,
+			showLabel: (layout === null || layout === void 0 ? void 0 : layout.showLabel) ?? false,
 			width: layout === null || layout === void 0 ? void 0 : layout.width,
 			iconSize: layout === null || layout === void 0 ? void 0 : layout.iconSize
 		});
@@ -2853,13 +2840,13 @@ function CustomLabel(props) {
 	const localeService = useDependency(LocaleService);
 	const componentManager = useDependency(ComponentManager);
 	const iconManager = useDependency(IconManager);
-	const subscribedValue = useObservable(value$ !== null && value$ !== void 0 ? value$ : null, value);
+	const subscribedValue = useObservable(value$ ?? null, value);
 	const subscribedIcon = useObservable(isObservable(icon) ? icon : null, "");
-	const realIcon = isObservable(icon) ? subscribedIcon : icon !== null && icon !== void 0 ? icon : "";
+	const realIcon = isObservable(icon) ? subscribedIcon : icon ?? "";
 	const nodes = [];
 	let index = 0;
 	const realValue = useMemo(() => {
-		return value !== null && value !== void 0 ? value : subscribedValue;
+		return value ?? subscribedValue;
 	}, [subscribedValue, value]);
 	const isValid = useMemo(() => {
 		if (realValue && typeof realValue === "string") return new ColorKit(realValue).isValid;
@@ -2909,7 +2896,6 @@ function CustomLabel(props) {
 * @returns The menu item's status
 */
 function useToolbarItemStatus(menuItem) {
-	var _selectionsValue$2;
 	const { disabled$, hidden$, activated$, value$ } = menuItem;
 	let selectionsValue$;
 	if (isMenuButtonSelectorItem(menuItem)) {
@@ -2919,23 +2905,20 @@ function useToolbarItemStatus(menuItem) {
 			selectionsValue$ = selections === null || selections === void 0 || (_selections$ = selections[0]) === null || _selections$ === void 0 ? void 0 : _selections$.value$;
 		}
 	}
-	const disabled = useObservable(disabled$ !== null && disabled$ !== void 0 ? disabled$ : null, false);
-	const activated = useObservable(activated$ !== null && activated$ !== void 0 ? activated$ : null, false);
-	const hidden = useObservable(hidden$ !== null && hidden$ !== void 0 ? hidden$ : null, false);
+	const disabled = useObservable(disabled$ ?? null, false);
+	const activated = useObservable(activated$ ?? null, false);
+	const hidden = useObservable(hidden$ ?? null, false);
 	return {
 		disabled,
-		value: useObservable(useMemo(() => {
-			var _selectionsValue$;
-			return merge$1(value$ !== null && value$ !== void 0 ? value$ : EMPTY, (_selectionsValue$ = selectionsValue$) !== null && _selectionsValue$ !== void 0 ? _selectionsValue$ : EMPTY);
-		}, [selectionsValue$, value$])),
+		value: useObservable(useMemo(() => merge$1(value$ ?? EMPTY, selectionsValue$ ?? EMPTY), [selectionsValue$, value$])),
 		activated,
 		hidden,
-		selectionsValue: useObservable((_selectionsValue$2 = selectionsValue$) !== null && _selectionsValue$2 !== void 0 ? _selectionsValue$2 : null)
+		selectionsValue: useObservable(selectionsValue$ ?? null)
 	};
 }
 function useToolbarShortcutDisplay({ id, commandId, shortcut }) {
 	const shortcutService = useDependency(IShortcutService);
-	const shortcutCommandId = commandId !== null && commandId !== void 0 ? commandId : id;
+	const shortcutCommandId = commandId ?? id;
 	return useObservable(useMemo(() => shortcut ? of(shortcut) : shortcutService.shortcutChanged$.pipe(map(() => shortcutService.getShortcutDisplayOfCommand(shortcutCommandId)), startWith(shortcutService.getShortcutDisplayOfCommand(shortcutCommandId))), [
 		shortcut,
 		shortcutService,
@@ -3143,8 +3126,8 @@ function DropdownMenuLabel({ icon, value, option, onOptionSelect }) {
 	});
 }
 function getOptionKey(option) {
-	var _ref, _ref2, _option$id, _option$label2;
-	return String((_ref = (_ref2 = (_option$id = option.id) !== null && _option$id !== void 0 ? _option$id : option.commandId) !== null && _ref2 !== void 0 ? _ref2 : option.value) !== null && _ref !== void 0 ? _ref : typeof option.label === "string" ? option.label : (_option$label2 = option.label) === null || _option$label2 === void 0 ? void 0 : _option$label2.name);
+	var _option$label2;
+	return String(option.id ?? option.commandId ?? option.value ?? (typeof option.label === "string" ? option.label : (_option$label2 = option.label) === null || _option$label2 === void 0 ? void 0 : _option$label2.name));
 }
 function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled, onOptionSelect }) {
 	const { dropdownVisible, setDropdownVisible } = useContext(TooltipWrapperContext);
@@ -3156,11 +3139,11 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 	const menuItems = useObservable(() => menuManagerService.menuChanged$.pipe(map(resolveMenuItems), startWith(resolveMenuItems())), resolveMenuItems(), false, [menuId, menuManagerService]);
 	const hiddenStates = useObservable(useMemo(() => {
 		const itemStates = menuItems.map((item) => {
-			var _item$item$hidden$, _item$item;
+			var _item$item;
 			return (item.children ? combineLatest(item.children.map((subItem) => {
-				var _subItem$item$hidden$, _subItem$item;
-				return (_subItem$item$hidden$ = (_subItem$item = subItem.item) === null || _subItem$item === void 0 ? void 0 : _subItem$item.hidden$) !== null && _subItem$item$hidden$ !== void 0 ? _subItem$item$hidden$ : of(false);
-			})).pipe(map((hiddenValues) => hiddenValues.every(Boolean))) : (_item$item$hidden$ = (_item$item = item.item) === null || _item$item === void 0 ? void 0 : _item$item.hidden$) !== null && _item$item$hidden$ !== void 0 ? _item$item$hidden$ : of(false)).pipe(map((hidden) => [String(item.key), hidden]));
+				var _subItem$item;
+				return ((_subItem$item = subItem.item) === null || _subItem$item === void 0 ? void 0 : _subItem$item.hidden$) ?? of(false);
+			})).pipe(map((hiddenValues) => hiddenValues.every(Boolean))) : ((_item$item = item.item) === null || _item$item === void 0 ? void 0 : _item$item.hidden$) ?? of(false)).pipe(map((hidden) => [String(item.key), hidden]));
 		});
 		return itemStates.length ? merge$1(...itemStates).pipe(scan((states, [key, hidden]) => ({
 			...states,
@@ -3195,15 +3178,15 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 		children
 	});
 	if (options === null || options === void 0 ? void 0 : options.length) {
-		var _options$0$label;
-		const isSingleCustomPanel = options.length === 1 && typeof options[0].label === "object" && ((_options$0$label = options[0].label) === null || _options$0$label === void 0 ? void 0 : _options$0$label.hoverable) === false;
+		var _options$0$label, _options$0$label$prop;
+		const isSingleEmbeddedCustomPanel = filteredMenuItems.length === 0 && options.length === 1 && typeof options[0].label === "object" && ((_options$0$label = options[0].label) === null || _options$0$label === void 0 ? void 0 : _options$0$label.hoverable) === false && ((_options$0$label$prop = options[0].label.props) === null || _options$0$label$prop === void 0 ? void 0 : _options$0$label$prop.embedded) === true;
 		const items = options.map((option) => {
-			var _option$label3, _option$label4;
+			var _option$label3;
 			return {
 				type: "item",
 				className: clsx({
 					"focus:univer-bg-white": typeof option.label !== "string" && ((_option$label3 = option.label) === null || _option$label3 === void 0 ? void 0 : _option$label3.hoverable) === false,
-					"!univer-p-0": typeof option.label !== "string" && ((_option$label4 = option.label) === null || _option$label4 === void 0 ? void 0 : _option$label4.hoverable) === false
+					"!univer-p-0": isSingleEmbeddedCustomPanel
 				}),
 				children: /* @__PURE__ */ jsx(DropdownMenuLabel, {
 					icon: option.icon,
@@ -3243,7 +3226,7 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 		}
 		return /* @__PURE__ */ jsx(DropdownMenu, {
 			align: "start",
-			className: clsx({ "!univer-p-0": isSingleCustomPanel }),
+			className: clsx({ "!univer-p-0": isSingleEmbeddedCustomPanel }),
 			items,
 			disabled,
 			open: dropdownVisible,
@@ -3382,7 +3365,7 @@ const ToolbarItem = forwardRef((props, ref) => {
 		commandService.executeCommand(commandId, params);
 	};
 	const { tooltip, shortcut, icon, title, label, id, commandId, type, slot, params, grid, large, showLabel, iconSize, iconColor, fullWidth } = props;
-	const gridLabel = title !== null && title !== void 0 ? title : tooltip;
+	const gridLabel = title ?? tooltip;
 	const shortcutDisplay = useToolbarShortcutDisplay({
 		id,
 		commandId,
@@ -3400,8 +3383,8 @@ const ToolbarItem = forwardRef((props, ref) => {
 	const iconToDisplay = useObservable(useMemo(() => {
 		if (isObservable(icon)) return icon;
 		else return new Observable((subscribe) => {
-			var _options$find$icon, _options$find;
-			const v = (_options$find$icon = options === null || options === void 0 || (_options$find = options.find((o) => o.value === value)) === null || _options$find === void 0 ? void 0 : _options$find.icon) !== null && _options$find$icon !== void 0 ? _options$find$icon : icon;
+			var _options$find;
+			const v = (options === null || options === void 0 || (_options$find = options.find((o) => o.value === value)) === null || _options$find === void 0 ? void 0 : _options$find.icon) ?? icon;
 			subscribe.next(v);
 		});
 	}, [
@@ -3410,17 +3393,16 @@ const ToolbarItem = forwardRef((props, ref) => {
 		value
 	]), void 0, true);
 	function renderSelectorType(menuType) {
-		var _ref;
 		const selectionsCommandId = props.selectionsCommandId;
-		const bId = commandId !== null && commandId !== void 0 ? commandId : id;
-		const sId = (_ref = selectionsCommandId !== null && selectionsCommandId !== void 0 ? selectionsCommandId : commandId) !== null && _ref !== void 0 ? _ref : id;
+		const bId = commandId ?? id;
+		const sId = selectionsCommandId ?? commandId ?? id;
 		const titleToDisplay = grid ? showLabel ? gridLabel : large ? void 0 : title : title;
 		function handleSelect(option) {
 			if (disabled) return;
 			let commandId = sId;
 			if (option.id) commandId = option.id;
 			const commandParams = typeof option.params === "function" ? option.params(option.value) : option.params;
-			executeCommand(commandId, commandParams !== null && commandParams !== void 0 ? commandParams : { value: option.value });
+			executeCommand(commandId, commandParams ?? { value: option.value });
 		}
 		function handleSelectionsValueChange(value) {
 			if (disabled) return;
@@ -3430,7 +3412,7 @@ const ToolbarItem = forwardRef((props, ref) => {
 			if (disabled) return;
 			if (menuType === 2) {
 				const commandParams = typeof params === "function" ? params() : params;
-				executeCommand(bId, commandParams !== null && commandParams !== void 0 ? commandParams : { value });
+				executeCommand(bId, commandParams ?? { value });
 			}
 		}
 		if (menuType === 2) return /* @__PURE__ */ jsxs("div", {
@@ -3453,7 +3435,7 @@ const ToolbarItem = forwardRef((props, ref) => {
 					icon: iconToDisplay,
 					iconSize,
 					title: titleToDisplay,
-					value: iconColor !== null && iconColor !== void 0 ? iconColor : value,
+					value: iconColor ?? value,
 					label,
 					onChange: handleSelectionsValueChange
 				})
@@ -3521,8 +3503,7 @@ const ToolbarItem = forwardRef((props, ref) => {
 		});
 	}
 	function renderButtonType() {
-		var _label$name;
-		const isCustomComponent = componentManager.get(typeof label === "string" ? label : (_label$name = label === null || label === void 0 ? void 0 : label.name) !== null && _label$name !== void 0 ? _label$name : "");
+		const isCustomComponent = componentManager.get(typeof label === "string" ? label : (label === null || label === void 0 ? void 0 : label.name) ?? "");
 		const buttonClassName = clsx(grid && !large && "univer-h-full univer-min-w-8 [&>svg]:univer-size-4", grid && large ? "univer-h-full univer-min-w-14 univer-flex-col univer-gap-1 univer-px-1.5 univer-py-1 univer-text-xs [&>svg]:univer-size-8" : showLabel ? "univer-gap-1 univer-px-1.5 univer-text-sm" : "univer-text-sm", grid && fullWidth && isCustomComponent && "!univer-px-0");
 		const buttonStyle = grid && large ? {
 			textAlign: "center",
@@ -3552,9 +3533,8 @@ const ToolbarItem = forwardRef((props, ref) => {
 			active: activated,
 			disabled,
 			onClick: () => {
-				var _props$commandId;
 				const commandParams = typeof params === "function" ? params() : params;
-				executeCommand((_props$commandId = props.commandId) !== null && _props$commandId !== void 0 ? _props$commandId : props.id, commandParams !== null && commandParams !== void 0 ? commandParams : typeof value === "undefined" ? void 0 : { value });
+				executeCommand(props.commandId ?? props.id, commandParams ?? (typeof value === "undefined" ? void 0 : { value }));
 			},
 			onDoubleClick: () => props.subId && executeCommand(props.subId),
 			children: icon ? /* @__PURE__ */ jsx(CustomLabel, {
@@ -3594,14 +3574,13 @@ function RibbonGrid({ groups, title, className, ...props }) {
 		role: "toolbar",
 		"aria-label": localeService.t(title),
 		children: /* @__PURE__ */ jsx(ToolbarDropdownProvider, { children: groups.map((group) => {
-			var _group$children;
 			return /* @__PURE__ */ jsxs("div", {
 				"data-u-comp": "ribbon-grid-group",
 				className: "univer-relative univer-box-border univer-flex univer-min-w-16 univer-shrink-0 univer-flex-col univer-px-2",
 				children: [/* @__PURE__ */ jsx("div", {
 					"data-testid": "ribbon-grid-group-grid",
 					className: "univer-grid univer-min-h-0 univer-flex-1 univer-grid-flow-col univer-grid-rows-2 univer-content-center univer-gap-x-1 univer-gap-y-2 univer-py-2 [&>div>span>span]:univer-h-full",
-					children: placeRibbonGridItems((_group$children = group.children) !== null && _group$children !== void 0 ? _group$children : []).map((placement) => placement.item.item && /* @__PURE__ */ jsx("div", {
+					children: placeRibbonGridItems(group.children ?? []).map((placement) => placement.item.item && /* @__PURE__ */ jsx("div", {
 						className: clsx("univer-flex univer-items-stretch [&>span>button]:univer-h-full [&>span]:univer-h-full", placement.width && "[&>span>span]:univer-w-full [&>span]:univer-w-full [&_[data-u-command]]:univer-w-full"),
 						style: {
 							gridRow: `${placement.row} / span ${placement.rowSpan}`,
@@ -3630,13 +3609,12 @@ function RibbonGrid({ groups, title, className, ...props }) {
 //#endregion
 //#region src/views/components/ribbon/Ribbon.tsx
 function Ribbon(props) {
-	var _ribbonOverride$ribbo;
 	const { ribbonType, headerMenuComponents, headerMenu = true, toolbarOnly = false, headerClassName } = props;
 	const defaultRibbonService = useDependency(IRibbonService);
 	const ribbonOverrideService = useDependency(IRibbonOverrideService);
 	const localeService = useDependency(LocaleService);
 	const ribbonOverride = useObservable(ribbonOverrideService.override$, ribbonOverrideService.getOverride());
-	const ribbonService = (_ribbonOverride$ribbo = ribbonOverride === null || ribbonOverride === void 0 ? void 0 : ribbonOverride.ribbonService) !== null && _ribbonOverride$ribbo !== void 0 ? _ribbonOverride$ribbo : defaultRibbonService;
+	const ribbonService = (ribbonOverride === null || ribbonOverride === void 0 ? void 0 : ribbonOverride.ribbonService) ?? defaultRibbonService;
 	const containerRef = useRef(null);
 	const toolbarItemRefs = useRef({});
 	const ribbonData = useObservable(ribbonService.ribbon$, []);
@@ -3671,8 +3649,8 @@ function Ribbon(props) {
 		ribbonService.setActivatedTab(group.key);
 	}, [ribbonService]);
 	const activeGroup = useMemo(() => {
-		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 : [];
+		var _ribbon$find2;
+		const allGroups = ((_ribbon$find2 = ribbon.find((group) => group.key === activatedTab)) === null || _ribbon$find2 === void 0 ? void 0 : _ribbon$find2.children) ?? [];
 		const visibleGroups = [];
 		const hiddenGroups = [];
 		for (const item of allGroups) if (item.children) {
@@ -3709,14 +3687,14 @@ function Ribbon(props) {
 			for (const entry of entries) {
 				ribbonService.setFakeToolbarVisible(true);
 				timer = requestAnimationFrame(() => {
-					var _ribbon$find$children2, _ribbon$find3;
+					var _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$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;
+					const gapWidth = ((((_ribbon$find3 = ribbon.find((group) => group.key === activatedTab)) === null || _ribbon$find3 === void 0 ? void 0 : _ribbon$find3.children) ?? []).length - 1) * 8;
 					totalWidth += gapWidth;
 					for (const { el, key } of sortedToolbarItems) {
 						const { width } = el.getBoundingClientRect();
@@ -3864,7 +3842,6 @@ function Ribbon(props) {
 	});
 }
 function RibbonOverrideRuntimeProvider(props) {
-	var _override$portalConta;
 	const { override, children } = props;
 	const config = useContext(ConfigContext);
 	const injector = override === null || override === void 0 ? void 0 : override.injector;
@@ -3873,7 +3850,7 @@ function RibbonOverrideRuntimeProvider(props) {
 	return /* @__PURE__ */ jsx(ConnectedRibbonOverrideConfigProvider, {
 		locale: config.locale,
 		direction: config.direction,
-		mountContainer: (_override$portalConta = override.portalContainer) !== null && _override$portalConta !== void 0 ? _override$portalConta : config.mountContainer,
+		mountContainer: override.portalContainer ?? config.mountContainer,
 		children
 	});
 }
@@ -3958,8 +3935,8 @@ var ContextMenuService = class extends Disposable {
 		_defineProperty(this, "disabled", false);
 	}
 	get visible() {
-		var _this$_currentHandler, _this$_currentHandler2;
-		return (_this$_currentHandler = (_this$_currentHandler2 = this._currentHandler) === null || _this$_currentHandler2 === void 0 ? void 0 : _this$_currentHandler2.visible) !== null && _this$_currentHandler !== void 0 ? _this$_currentHandler : false;
+		var _this$_currentHandler;
+		return ((_this$_currentHandler = this._currentHandler) === null || _this$_currentHandler === void 0 ? void 0 : _this$_currentHandler.visible) ?? false;
 	}
 	disable() {
 		this.disabled = true;
@@ -3968,14 +3945,14 @@ var ContextMenuService = class extends Disposable {
 		this.disabled = false;
 	}
 	triggerContextMenu(event, menuType, context) {
-		var _this$_currentHandler3;
+		var _this$_currentHandler2;
 		event.stopPropagation();
 		if (this.disabled) return;
-		(_this$_currentHandler3 = this._currentHandler) === null || _this$_currentHandler3 === void 0 || _this$_currentHandler3.handleContextMenu(event, menuType, context);
+		(_this$_currentHandler2 = this._currentHandler) === null || _this$_currentHandler2 === void 0 || _this$_currentHandler2.handleContextMenu(event, menuType, context);
 	}
 	hideContextMenu() {
-		var _this$_currentHandler4;
-		(_this$_currentHandler4 = this._currentHandler) === null || _this$_currentHandler4 === void 0 || _this$_currentHandler4.hideContextMenu();
+		var _this$_currentHandler3;
+		(_this$_currentHandler3 = this._currentHandler) === null || _this$_currentHandler3 === void 0 || _this$_currentHandler3.hideContextMenu();
 	}
 	registerContextMenuHandler(handler) {
 		if (this._currentHandler) throw new Error("There is already a context menu handler!");
@@ -4169,11 +4146,10 @@ function DesignTinyMenuGroup({ items, columns, sizeVariant = "default", layoutVa
 		}),
 		style: gridTemplateColumns ? { gridTemplateColumns } : void 0,
 		children: items.map((item) => {
-			var _item$tooltip;
 			const showTooltip = !isParagraphTVariant && item.tooltip;
 			const ele = /* @__PURE__ */ jsx("button", {
 				type: "button",
-				"aria-label": (_item$tooltip = item.tooltip) !== null && _item$tooltip !== void 0 ? _item$tooltip : item.key,
+				"aria-label": item.tooltip ?? item.key,
 				title: showTooltip ? item.tooltip : void 0,
 				className: tinyMenuButtonVariants({
 					variant,
@@ -4223,8 +4199,8 @@ function resolveMenuItemActiveState(itemId, observableActive, activeItemIds) {
 	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;
+	var _child$item;
+	return ((_child$item = child.item) === null || _child$item === void 0 ? void 0 : _child$item.id) ?? child.key;
 }
 function getVisibleTinyMenuChildren(children, hiddenItemKeys) {
 	const hiddenSet = new Set(hiddenItemKeys);
@@ -4249,10 +4225,9 @@ function QuickTileMenuItem(props) {
 		}),
 		disabled,
 		onClick: () => {
-			var _menuItem$id;
 			if (disabled) return;
 			onOptionSelect === null || onOptionSelect === void 0 || onOptionSelect({
-				label: (_menuItem$id = menuItem.id) !== null && _menuItem$id !== void 0 ? _menuItem$id : menuSchema.key,
+				label: menuItem.id ?? menuSchema.key,
 				commandId: menuItem.commandId,
 				id: menuItem.id,
 				params: menuItem.params,
@@ -4270,25 +4245,21 @@ function QuickTileMenuItem(props) {
 	});
 }
 function UITinyMenuGroup(props) {
-	var _item$children;
 	const { item, activeItemIds, hiddenItemIds = EMPTY_HIDDEN_ITEM_IDS, hoverSuppressed, columns, sizeVariant = "default", layoutVariant = "default", onOptionSelect } = props;
 	const iconManager = useDependency(IconManager);
 	const localeService = useDependency(LocaleService);
-	const children = (_item$children = item.children) !== null && _item$children !== void 0 ? _item$children : EMPTY_TINY_MENU_CHILDREN;
+	const children = item.children ?? EMPTY_TINY_MENU_CHILDREN;
 	const activeItems$ = useMemo(() => children.length ? combineLatest(children.map((child) => {
-		var _child$item$activated, _child$item2;
-		return ((_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 : of(false)).pipe(startWith(false));
+		var _child$item2;
+		return (((_child$item2 = child.item) === null || _child$item2 === void 0 ? void 0 : _child$item2.activated$) ?? of(false)).pipe(startWith(false));
 	})).pipe(map((states) => children.flatMap((child, index) => states[index] ? [getTinyMenuChildStateKey(child)] : []))) : of([]), [children]);
 	const hiddenItems$ = useMemo(() => children.length ? combineLatest(children.map((child) => {
-		var _child$item$hidden$, _child$item3;
-		return ((_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$ : of(false)).pipe(startWith(false));
+		var _child$item3;
+		return (((_child$item3 = child.item) === null || _child$item3 === void 0 ? void 0 : _child$item3.hidden$) ?? of(false)).pipe(startWith(false));
 	})).pipe(map((states) => children.flatMap((child, index) => states[index] ? [getTinyMenuChildStateKey(child)] : []))) : of([]), [children]);
 	const activeItems = useObservable(activeItems$, []);
 	const hiddenItems = useObservable(hiddenItems$, []);
-	const visibleChildren = useMemo(() => {
-		var _item$children2;
-		return getVisibleTinyMenuChildren((_item$children2 = item.children) !== null && _item$children2 !== void 0 ? _item$children2 : [], [...hiddenItems, ...hiddenItemIds]);
-	}, [
+	const visibleChildren = useMemo(() => getVisibleTinyMenuChildren(item.children ?? [], [...hiddenItems, ...hiddenItemIds]), [
 		hiddenItemIds,
 		hiddenItems,
 		item.children
@@ -4300,15 +4271,15 @@ function UITinyMenuGroup(props) {
 		layoutVariant,
 		hoverSuppressed,
 		items: visibleChildren.map((child) => {
-			var _child$item4, _child$item12, _child$item13, _child$item$id3, _child$item14, _child$item15;
+			var _child$item4, _child$item12, _child$item13, _child$item14, _child$item15;
 			const Icon = ((_child$item4 = child.item) === null || _child$item4 === void 0 ? void 0 : _child$item4.icon) ? iconManager.get(child.item.icon) : void 0;
 			if (!Icon) return null;
 			return {
 				key: child.key,
 				onClick: () => {
-					var _child$item$id2, _child$item5, _child$item6, _child$item7, _child$item8, _child$item9, _child$item10, _child$item11;
+					var _child$item5, _child$item6, _child$item7, _child$item8, _child$item9, _child$item10, _child$item11;
 					onOptionSelect === null || onOptionSelect === void 0 || onOptionSelect({
-						label: (_child$item$id2 = (_child$item5 = child.item) === null || _child$item5 === void 0 ? void 0 : _child$item5.id) !== null && _child$item$id2 !== void 0 ? _child$item$id2 : child.key,
+						label: ((_child$item5 = child.item) === null || _child$item5 === void 0 ? void 0 : _child$item5.id) ?? child.key,
 						commandId: (_child$item6 = child.item) === null || _child$item6 === void 0 ? void 0 : _child$item6.commandId,
 						id: (_child$item7 = child.item) === null || _child$item7 === void 0 ? void 0 : _child$item7.id,
 						params: (_child$item8 = child.item) === null || _child$item8 === void 0 ? void 0 : _child$item8.params,
@@ -4319,16 +4290,16 @@ function UITinyMenuGroup(props) {
 				className: "",
 				iconClassName: ((_child$item12 = child.item) === null || _child$item12 === void 0 ? void 0 : _child$item12.icon) === "TextTypeIcon" ? sizeVariant === "paragraph-t" ? "!univer-size-4" : "!univer-size-3.5" : void 0,
 				Icon,
-				active: resolveMenuItemActiveState((_child$item13 = child.item) === null || _child$item13 === void 0 ? void 0 : _child$item13.id, activeItems.includes((_child$item$id3 = (_child$item14 = child.item) === null || _child$item14 === void 0 ? void 0 : _child$item14.id) !== null && _child$item$id3 !== void 0 ? _child$item$id3 : ""), activeItemIds),
+				active: resolveMenuItemActiveState((_child$item13 = child.item) === null || _child$item13 === void 0 ? void 0 : _child$item13.id, activeItems.includes(((_child$item14 = child.item) === null || _child$item14 === void 0 ? void 0 : _child$item14.id) ?? ""), activeItemIds),
 				tooltip: ((_child$item15 = child.item) === null || _child$item15 === void 0 ? void 0 : _child$item15.tooltip) ? localeService.t(child.item.tooltip) : void 0
 			};
 		}).filter((child) => child != null)
 	});
 }
 function UIQuickTileMenuGroup(props) {
-	var _item$children3;
+	var _item$children;
 	const { item, activeItemIds, hiddenItemIds = EMPTY_HIDDEN_ITEM_IDS, onOptionSelect } = props;
-	if (!((_item$children3 = item.children) === null || _item$children3 === void 0 ? void 0 : _item$children3.length)) return null;
+	if (!((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length)) return null;
 	return /* @__PURE__ */ jsx("div", {
 		className: "univer-item-center univer-grid univer-grid-cols-3 univer-gap-1.5 univer-py-1",
 		children: getVisibleTinyMenuChildren(item.children, hiddenItemIds).map((menuSchema) => /* @__PURE__ */ jsx(QuickTileMenuItem, {
@@ -4544,11 +4515,11 @@ function getContextMenuPanelClassName(sizeVariant) {
 function getContextMenuGroupClassName(sizeVariant) {
 	return contextMenuGroupVariants({ sizeVariant });
 }
-function isParagraphTHeaderQuickGroup(menuSchema, sizeVariant) {
-	return sizeVariant === "paragraph-t" && menuSchema.quickLayout === "icon" && CONTEXT_MENU_HEADER_QUICK_GROUP_KEYS.has(menuSchema.key);
+function isHeaderQuickGroup(menuSchema) {
+	return menuSchema.quickLayout === "icon" && CONTEXT_MENU_HEADER_QUICK_GROUP_KEYS.has(menuSchema.key);
 }
-function shouldClusterParagraphTHeaderQuickGroups(currentSchema, nextSchema, sizeVariant) {
-	return isParagraphTHeaderQuickGroup(currentSchema, sizeVariant) && !!nextSchema && isParagraphTHeaderQuickGroup(nextSchema, sizeVariant);
+function shouldClusterHeaderQuickGroups(currentSchema, nextSchema) {
+	return isHeaderQuickGroup(currentSchema) && !!nextSchema && isHeaderQuickGroup(nextSchema);
 }
 function getContextMenuQuickGroupClassName(menuSchema, visibleSchemas, index, sizeVariant) {
 	if (sizeVariant !== "paragraph-t" || !CONTEXT_MENU_HEADER_QUICK_GROUP_KEYS.has(menuSchema.key)) return getContextMenuGroupClassName(sizeVariant);
@@ -4601,7 +4572,7 @@ function getFirstMenuButtonByVisualOrder(buttons) {
 	})[0];
 }
 function getNextMenuButtonByDirection(buttons, activeIndex, key) {
-	var _scoredCandidates$0$b, _scoredCandidates$;
+	var _scoredCandidates$;
 	const direction = key === "ArrowDown" || key === "ArrowRight" ? 1 : -1;
 	const fallbackButton = buttons[activeIndex < 0 ? direction > 0 ? 0 : buttons.length - 1 : (activeIndex + direction + buttons.length) % buttons.length];
 	const activeButton = activeIndex >= 0 ? buttons[activeIndex] : null;
@@ -4609,20 +4580,16 @@ function getNextMenuButtonByDirection(buttons, activeIndex, key) {
 	const rows = getMenuButtonRows(buttons);
 	const activeRowIndex = rows.findIndex((row) => row.includes(activeButton));
 	const activeRow = rows[activeRowIndex];
-	if (activeRow && (key === "ArrowRight" || key === "ArrowLeft")) {
-		const nextRowButton = activeRow[activeRow.indexOf(activeButton) + (key === "ArrowRight" ? 1 : -1)];
-		return nextRowButton !== null && nextRowButton !== void 0 ? nextRowButton : fallbackButton;
-	}
+	if (activeRow && (key === "ArrowRight" || key === "ArrowLeft")) return activeRow[activeRow.indexOf(activeButton) + (key === "ArrowRight" ? 1 : -1)] ?? fallbackButton;
 	if (activeRow && (key === "ArrowDown" || key === "ArrowUp")) {
 		const nextRow = rows[activeRowIndex + (key === "ArrowDown" ? 1 : -1)];
 		if (nextRow) {
-			var _sort$;
 			const activeCenter = getMenuButtonCenter(activeButton);
-			return (_sort$ = [...nextRow].sort((left, right) => Math.abs(getMenuButtonCenter(left).x - activeCenter.x) - Math.abs(getMenuButtonCenter(right).x - activeCenter.x))[0]) !== null && _sort$ !== void 0 ? _sort$ : fallbackButton;
+			return [...nextRow].sort((left, right) => Math.abs(getMenuButtonCenter(left).x - activeCenter.x) - Math.abs(getMenuButtonCenter(right).x - activeCenter.x))[0] ?? fallbackButton;
 		}
 	}
 	const activeCenter = getMenuButtonCenter(activeButton);
-	return (_scoredCandidates$0$b = (_scoredCandidates$ = buttons.filter((button) => button !== activeButton).map((button) => {
+	return ((_scoredCandidates$ = buttons.filter((button) => button !== activeButton).map((button) => {
 		const center = getMenuButtonCenter(button);
 		const deltaX = center.x - activeCenter.x;
 		const deltaY = center.y - activeCenter.y;
@@ -4633,14 +4600,14 @@ function getNextMenuButtonByDirection(buttons, activeIndex, key) {
 			button,
 			score: primaryDistance * 1e3 + secondaryDistance
 		};
-	}).filter((candidate) => candidate != null).sort((left, right) => left.score - right.score)[0]) === null || _scoredCandidates$ === void 0 ? void 0 : _scoredCandidates$.button) !== null && _scoredCandidates$0$b !== void 0 ? _scoredCandidates$0$b : fallbackButton;
+	}).filter((candidate) => candidate != null).sort((left, right) => left.score - right.score)[0]) === null || _scoredCandidates$ === void 0 ? void 0 : _scoredCandidates$.button) ?? fallbackButton;
 }
-function getContextMenuSchemaRenderGroups(visibleSchemas, sizeVariant) {
+function getContextMenuSchemaRenderGroups(visibleSchemas, flowQuickGroups = false) {
 	const renderGroups = [];
 	for (let index = 0; index < visibleSchemas.length; index++) {
 		const menuSchema = visibleSchemas[index];
 		const nextSchema = visibleSchemas[index + 1];
-		if (shouldClusterParagraphTHeaderQuickGroups(menuSchema, nextSchema, sizeVariant)) {
+		if (flowQuickGroups && shouldClusterHeaderQuickGroups(menuSchema, nextSchema)) {
 			renderGroups.push({
 				startIndex: index,
 				endIndex: index + 1,
@@ -4657,6 +4624,15 @@ function getContextMenuSchemaRenderGroups(visibleSchemas, sizeVariant) {
 	}
 	return renderGroups;
 }
+function mergeContextMenuQuickGroupSchemas(menuSchemas) {
+	const firstSchema = menuSchemas[0];
+	return {
+		...firstSchema,
+		key: menuSchemas.map((schema) => schema.key).join("-"),
+		quickColumns: getContextMenuQuickGroupColumns(firstSchema),
+		children: menuSchemas.flatMap((schema) => schema.children ?? [])
+	};
+}
 function getContextMenuHeaderClassName(sizeVariant) {
 	return contextMenuHeaderVariants({ sizeVariant });
 }
@@ -4667,12 +4643,12 @@ function getContextMenuSubmenuPanelClassName(sizeVariant) {
 	return contextMenuSubmenuPanelVariants({ sizeVariant });
 }
 function ContextMenuPanel(props) {
-	var _layoutService$rootCo, _layoutService$rootCo2;
-	const { menuType, menuManagerService: providedMenuManagerService, layoutService: providedLayoutService, menuSessionVersion = 0, className, activeItemIds, hiddenItemIds, sizeVariant = "default", autoFocus, autoFocusTarget = "first-item", suppressHoverUntilPointerMove = false, onCancel, onMenuPointerEnter, onMenuPointerLeave, onOptionSelect } = props;
+	var _layoutService$rootCo;
+	const { menuType, menuManagerService: providedMenuManagerService, layoutService: providedLayoutService, menuSessionVersion = 0, className, activeItemIds, hiddenItemIds, flowQuickGroups, sizeVariant = "default", autoFocus, autoFocusTarget = "first-item", suppressHoverUntilPointerMove = false, onCancel, onMenuPointerEnter, onMenuPointerLeave, onOptionSelect } = props;
 	const rootMenuManagerService = useDependency(IMenuManagerService);
 	const rootLayoutService = useDependency(ILayoutService);
-	const menuManagerService = providedMenuManagerService !== null && providedMenuManagerService !== void 0 ? providedMenuManagerService : rootMenuManagerService;
-	const layoutService = providedLayoutService !== null && providedLayoutService !== void 0 ? providedLayoutService : rootLayoutService;
+	const menuManagerService = providedMenuManagerService ?? rootMenuManagerService;
+	const layoutService = providedLayoutService ?? rootLayoutService;
 	const [menuElement, setMenuElement] = useState(null);
 	const [maxMenuHeight, setMaxMenuHeight] = useState(() => {
 		if (typeof window === "undefined") return 240;
@@ -4685,23 +4661,21 @@ function ContextMenuPanel(props) {
 		useObservable(useMemo(() => menuManagerService.menuChanged$.pipe(startWith(void 0), scan((version) => version + 1, 0)), [menuManagerService]), 0),
 		menuSessionVersion
 	]);
-	const submenuPortalContainer = (_layoutService$rootCo = (_layoutService$rootCo2 = layoutService.rootContainerElement) === null || _layoutService$rootCo2 === void 0 || (_layoutService$rootCo2 = _layoutService$rootCo2.ownerDocument) === null || _layoutService$rootCo2 === void 0 ? void 0 : _layoutService$rootCo2.body) !== null && _layoutService$rootCo !== void 0 ? _layoutService$rootCo : typeof document !== "undefined" ? document.body : null;
+	const submenuPortalContainer = ((_layoutService$rootCo = layoutService.rootContainerElement) === null || _layoutService$rootCo === void 0 || (_layoutService$rootCo = _layoutService$rootCo.ownerDocument) === null || _layoutService$rootCo === void 0 ? void 0 : _layoutService$rootCo.body) ?? (typeof document !== "undefined" ? document.body : null);
 	useScrollYOverContainer(menuElement, layoutService.rootContainerElement);
 	const getFocusableMenuButtons = useCallback(() => {
 		if (!menuElement) return [];
 		return Array.from(menuElement.querySelectorAll("button:not(:disabled)"));
 	}, [menuElement]);
 	useEffect(() => {
-		var _menuElement$ownerDoc;
 		if (!autoFocus || !menuElement) return;
-		const view = (_menuElement$ownerDoc = menuElement.ownerDocument.defaultView) !== null && _menuElement$ownerDoc !== void 0 ? _menuElement$ownerDoc : window;
+		const view = menuElement.ownerDocument.defaultView ?? window;
 		const frameId = view.requestAnimationFrame(() => {
 			if (autoFocusTarget === "container") {
 				menuElement.focus();
 				return;
 			}
-			const firstButton = getFirstMenuButtonByVisualOrder(getFocusableMenuButtons());
-			(firstButton !== null && firstButton !== void 0 ? firstButton : menuElement).focus();
+			(getFirstMenuButtonByVisualOrder(getFocusableMenuButtons()) ?? menuElement).focus();
 		});
 		return () => view.cancelAnimationFrame(frameId);
 	}, [
@@ -4745,8 +4719,8 @@ function ContextMenuPanel(props) {
 		onCancel
 	]);
 	useEffect(() => {
-		var _layoutService$rootCo3, _layoutService$rootCo4;
-		const defaultView = (_layoutService$rootCo3 = (_layoutService$rootCo4 = layoutService.rootContainerElement) === null || _layoutService$rootCo4 === void 0 || (_layoutService$rootCo4 = _layoutService$rootCo4.ownerDocument) === null || _layoutService$rootCo4 === void 0 ? void 0 : _layoutService$rootCo4.defaultView) !== null && _layoutService$rootCo3 !== void 0 ? _layoutService$rootCo3 : typeof window !== "undefined" ? window : null;
+		var _layoutService$rootCo2;
+		const defaultView = ((_layoutService$rootCo2 = layoutService.rootContainerElement) === null || _layoutService$rootCo2 === void 0 || (_layoutService$rootCo2 = _layoutService$rootCo2.ownerDocument) === null || _layoutService$rootCo2 === void 0 ? void 0 : _layoutService$rootCo2.defaultView) ?? (typeof window !== "undefined" ? window : null);
 		if (!defaultView) return;
 		let frameId = 0;
 		const updateMaxHeight = () => {
@@ -4781,6 +4755,7 @@ function ContextMenuPanel(props) {
 			rootMenuElement: menuElement,
 			activeItemIds,
 			hiddenItemIds,
+			flowQuickGroups,
 			hoverSuppressed,
 			sizeVariant,
 			onMenuPointerEnter,
@@ -4791,7 +4766,7 @@ function ContextMenuPanel(props) {
 	});
 }
 function ContextMenuMenu(props) {
-	const { menuSchemas, menuManagerService, menuSessionVersion, submenuPortalContainer, rootMenuElement, activeItemIds, hiddenItemIds, hoverSuppressed, sizeVariant, onMenuPointerEnter, onMenuPointerLeave, onOptionSelect, maxMenuHeight } = props;
+	const { menuSchemas, menuManagerService, menuSessionVersion, submenuPortalContainer, rootMenuElement, activeItemIds, hiddenItemIds, flowQuickGroups, hoverSuppressed, sizeVariant, onMenuPointerEnter, onMenuPointerLeave, onOptionSelect, maxMenuHeight } = props;
 	const localeService = useDependency(LocaleService);
 	const hiddenGroupStates = useContextGroupHiddenStates$1(menuSchemas);
 	const [activeSubmenuKey, setActiveSubmenuKey] = useState(null);
@@ -4802,7 +4777,7 @@ function ContextMenuMenu(props) {
 			return !hiddenGroupStates[item.key];
 		});
 	}, [hiddenGroupStates, menuSchemas]);
-	const renderGroups = useMemo(() => getContextMenuSchemaRenderGroups(visibleSchemas, sizeVariant), [sizeVariant, visibleSchemas]);
+	const renderGroups = useMemo(() => getContextMenuSchemaRenderGroups(visibleSchemas, flowQuickGroups), [flowQuickGroups, visibleSchemas]);
 	const renderQuickLayoutGroup = (menuSchema, index, renderAsClusterChild = false, hasSeparator = false) => {
 		const titleNode = renderMenuSchemaHeader(menuSchema);
 		return /* @__PURE__ */ jsxs("div", {
@@ -4830,10 +4805,13 @@ function ContextMenuMenu(props) {
 		const menuSchema = groupedSchemas[0];
 		const hasSeparator = shouldShowContextMenuGroupSeparator(visibleSchemas, endIndex);
 		const titleNode = renderMenuSchemaHeader(menuSchema);
-		if (groupedSchemas.length > 1) return /* @__PURE__ */ jsx("div", {
-			className: clsx(getContextMenuQuickGroupClusterClassName(sizeVariant), hasSeparator && borderBottomClassName),
-			children: groupedSchemas.map((groupedMenuSchema, groupedIndex) => renderQuickLayoutGroup(groupedMenuSchema, startIndex + groupedIndex, true))
-		}, groupedSchemas.map((schema) => schema.key).join("-"));
+		if (groupedSchemas.length > 1) {
+			const mergedMenuSchema = mergeContextMenuQuickGroupSchemas(groupedSchemas);
+			return /* @__PURE__ */ jsx("div", {
+				className: clsx(getContextMenuQuickGroupClusterClassName(sizeVariant), hasSeparator && borderBottomClassName),
+				children: renderQuickLayoutGroup(mergedMenuSchema, startIndex, true)
+			}, groupedSchemas.map((schema) => schema.key).join("-"));
+		}
 		if (menuSchema.item) return /* @__PURE__ */ jsx(ContextMenuMenuItem, {
 			menuKey: menuSchema.key,
 			menuItem: menuSchema.item,
@@ -5183,8 +5161,7 @@ function ContextMenuMenuItem(props) {
 				children: [hasSelectionSubmenu && /* @__PURE__ */ jsx("div", {
 					className: sizeVariant === "paragraph-t" ? "univer-grid univer-gap-2" : "univer-grid univer-gap-1",
 					children: selections.map((option, index) => {
-						var _option$label;
-						const optionKey = `${menuItem.id}-${(_option$label = option.label) !== null && _option$label !== void 0 ? _option$label : option.id}-${index}`;
+						const optionKey = `${menuItem.id}-${option.label ?? option.id}-${index}`;
 						const optionSelected = typeof inputValue !== "undefined" && String(inputValue) === String(option.value);
 						const optionSelectable = !isNonSelectableLabel(option.label);
 						const optionHoverable = !isNonHoverableLabel(option.label);
@@ -5197,13 +5174,12 @@ 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 = option.commandId) !== null && _option$commandId !== void 0 ? _option$commandId : selectionsCommandId
+										commandId: option.commandId ?? selectionsCommandId
 									});
 								}
 							})
@@ -5213,12 +5189,11 @@ 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$commandId2 = option.commandId) !== null && _option$commandId2 !== void 0 ? _option$commandId2 : selectionsCommandId
+									commandId: option.commandId ?? selectionsCommandId
 								});
 							},
 							children: optionContentNode
@@ -5250,11 +5225,11 @@ function ContextMenuMenuItem(props) {
 function useContextGroupHiddenStates$1(menuSchemas) {
 	return useObservable(useMemo(() => {
 		const groupStates = menuSchemas.flatMap((menuSchema) => {
-			var _menuSchema$children$, _menuSchema$children3;
-			const hiddenObservables = (_menuSchema$children$ = (_menuSchema$children3 = menuSchema.children) === null || _menuSchema$children3 === void 0 ? void 0 : _menuSchema$children3.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 : of(false);
-			})) !== null && _menuSchema$children$ !== void 0 ? _menuSchema$children$ : [];
+			var _menuSchema$children3;
+			const hiddenObservables = ((_menuSchema$children3 = menuSchema.children) === null || _menuSchema$children3 === void 0 ? void 0 : _menuSchema$children3.map((childSchema) => {
+				var _childSchema$item;
+				return ((_childSchema$item = childSchema.item) === null || _childSchema$item === void 0 ? void 0 : _childSchema$item.hidden$) ?? of(false);
+			})) ?? [];
 			return hiddenObservables.length ? [combineLatest(hiddenObservables).pipe(map((values) => [menuSchema.key, values.every(Boolean)]))] : [];
 		});
 		return groupStates.length ? merge$1(...groupStates).pipe(scan((states, [key, hidden]) => ({
@@ -5427,7 +5402,7 @@ function DesktopContextMenu() {
 			const { label: id, commandId, value } = params;
 			const rawParams = typeof params.params === "function" ? params.params() : params.params;
 			const commandParams = typeof rawParams === "undefined" ? { value } : rawParams;
-			if (activeCommandService) activeCommandService.executeCommand(commandId !== null && commandId !== void 0 ? commandId : id, commandParams);
+			if (activeCommandService) activeCommandService.executeCommand(commandId ?? id, commandParams);
 			activeLayoutService.focus();
 			handleClose();
 		}
@@ -5591,7 +5566,7 @@ function Sidebar() {
 					})]
 				}),
 				/* @__PURE__ */ jsx("section", {
-					className: "univer-box-border univer-cursor-default univer-px-4",
+					className: "univer-box-border univer-min-w-0 univer-cursor-default univer-px-4",
 					children: options === null || options === void 0 ? void 0 : options.children
 				}),
 				(options === null || options === void 0 ? void 0 : options.footer) && /* @__PURE__ */ jsx("footer", {
@@ -5895,7 +5870,6 @@ function mountDesktopWorkbench(injector, options, mountContainer, onRendered) {
 	}), mountContainer);
 }
 function DesktopWorkbenchContent(props) {
-	var _uiConfig$popupRootId;
 	const { header = true, toolbar = true, footer = true, headerMenu = true, contextMenu = true, ribbonType = "classic", mountContainer, onRendered } = props;
 	const localeService = useDependency(LocaleService);
 	const lifecycleService = useDependency(LifecycleService);
@@ -5915,7 +5889,7 @@ function DesktopWorkbenchContent(props) {
 	const lifecycleStage = useObservable(lifecycleService.lifecycle$, lifecycleService.stage);
 	const externalSkeletonVisible = useObservable(workbenchService.skeletonVisible$, void 0, true);
 	const ready = lifecycleStage >= LifecycleStages.Ready;
-	const popupRootId = (_uiConfig$popupRootId = uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.popupRootId) !== null && _uiConfig$popupRootId !== void 0 ? _uiConfig$popupRootId : "univer-popup-portal";
+	const popupRootId = (uiConfig === null || uiConfig === void 0 ? void 0 : uiConfig.popupRootId) ?? "univer-popup-portal";
 	useLayoutEffect(() => {
 		const sub = themeService.currentTheme$.subscribe((theme) => {
 			themeSwitcherService.injectThemeToHead(theme);
@@ -6170,7 +6144,7 @@ const IUIController = createIdentifier("univer.ui.ui-controller");
 //#endregion
 //#region package.json
 var name = "@univerjs/ui";
-var version = "1.0.0-alpha.8";
+var version = "1.0.0-beta.0";
 
 //#endregion
 //#region src/views/color-picker/interface.ts
@@ -6214,9 +6188,9 @@ const CommonLabel = (props) => {
 	return /* @__PURE__ */ jsx("div", {
 		className: "univer-truncate univer-text-sm",
 		children: useMemo(() => {
-			var _selections$find$labe, _selections$find;
+			var _selections$find;
 			if (value == null) return "";
-			return localeService.t((_selections$find$labe = (_selections$find = selections.find((item) => item.value === value)) === null || _selections$find === void 0 ? void 0 : _selections$find.label) !== null && _selections$find$labe !== void 0 ? _selections$find$labe : "");
+			return localeService.t(((_selections$find = selections.find((item) => item.value === value)) === null || _selections$find === void 0 ? void 0 : _selections$find.label) ?? "");
 		}, [value, selections])
 	});
 };
@@ -6252,10 +6226,9 @@ function ShortcutPanel() {
 		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;
 			const shortcutItem = {
-				title: localeService.t((_shortcut$description = shortcut.description) !== null && _shortcut$description !== void 0 ? _shortcut$description : shortcut.id),
+				title: localeService.t(shortcut.description ?? shortcut.id),
 				shortcut: shortcutService.getShortcutDisplay(shortcut)
 			};
 			if (!/^\d+_/.test(group)) throw new Error(`[ShortcutPanel]: Invalid shortcut group: ${group}!`);
@@ -21103,13 +21076,11 @@ function parseStoredRecentEmojis(value) {
 	}
 }
 function getRandomEmoji(random = Math.random) {
-	var _allEmojis$Math$floor;
 	const allEmojis = getAllEmojis();
-	return (_allEmojis$Math$floor = allEmojis[Math.floor(random() * allEmojis.length)]) !== null && _allEmojis$Math$floor !== void 0 ? _allEmojis$Math$floor : getDefaultRecentEmojis()[0];
+	return allEmojis[Math.floor(random() * allEmojis.length)] ?? getDefaultRecentEmojis()[0];
 }
 function getLocalizedEmojiTitle(item, emojiTitles) {
-	var _emojiTitles$item$emo;
-	return (_emojiTitles$item$emo = emojiTitles === null || emojiTitles === void 0 ? void 0 : emojiTitles[item.emoji]) !== null && _emojiTitles$item$emo !== void 0 ? _emojiTitles$item$emo : item.title;
+	return (emojiTitles === null || emojiTitles === void 0 ? void 0 : emojiTitles[item.emoji]) ?? item.title;
 }
 function getEmojiLocaleData(localeService) {
 	const localePack = localeService.getLocales();
@@ -21132,37 +21103,54 @@ function normalizeStoredRecentEmojis(value) {
 const EMOJI_PICKER_COMPONENT = "ui.emoji-picker";
 const RECENTS_STORAGE_KEY = "univer.ui.recent-emojis";
 const ACTIVE_SECTION_SCROLL_OFFSET = 28;
+const EMOJI_COLUMN_COUNT = 10;
+const EMOJI_ROW_HEIGHT = 32;
+const EMOJI_SECTION_HEADER_HEIGHT = 24;
+const EMOJI_VIRTUAL_OVERSCAN = 3;
 function EmojiPicker(props) {
-	var _props$popup, _extraProps$recentSto;
+	var _props$popup;
 	const extraProps = (_props$popup = props.popup) === null || _props$popup === void 0 ? void 0 : _props$popup.extraProps;
 	const localeService = useDependency(LocaleService);
 	const localStorageService = useDependency(ILocalStorageService);
 	const currentLocale = useObservable(localeService.currentLocale$, localeService.getCurrentLocale());
-	const scrollRef = useRef(null);
-	const sectionRefs = useRef({});
+	const scrollRef = useRef(void 0);
+	const pendingSectionRef = useRef(null);
 	const [query, setQuery] = useState("");
 	const [activeEmoji, setActiveEmoji] = useState(extraProps === null || extraProps === void 0 ? void 0 : extraProps.activeEmoji);
 	const [activeTab, setActiveTab] = useState("recent");
 	const [recents, setRecents] = useState(() => getDefaultRecentEmojis());
 	const deferredQuery = useDeferredValue(query);
-	const emojiLocaleData = useMemo(() => getEmojiLocaleData(localeService), [currentLocale, localeService]);
+	const emojiLocaleData = getEmojiLocaleData(localeService);
 	const searchResults = useMemo(() => searchEmojis(deferredQuery, emojiLocaleData.emojiSearchIndex), [deferredQuery, emojiLocaleData]);
-	const recentStorageKey = (_extraProps$recentSto = extraProps === null || extraProps === void 0 ? void 0 : extraProps.recentStorageKey) !== null && _extraProps$recentSto !== void 0 ? _extraProps$recentSto : RECENTS_STORAGE_KEY;
+	const recentStorageKey = (extraProps === null || extraProps === void 0 ? void 0 : extraProps.recentStorageKey) ?? RECENTS_STORAGE_KEY;
 	const isSearching = deferredQuery.trim().length > 0;
-	const normalSections = [{
-		key: "recent",
-		title: localeService.t("ui.emojiPicker.recents"),
-		emojis: recents
-	}, ...EMOJI_CATEGORIES.map((category) => ({
-		key: category.key,
-		title: localeService.t(category.titleKey),
-		emojis: emojis[category.key]
-	}))];
-	const renderedSections = (isSearching ? [{
-		key: "people",
-		title: localeService.t("ui.emojiPicker.searchResults"),
-		emojis: searchResults
-	}] : normalSections).filter((section) => section.emojis.length);
+	const { rows, sectionPositions } = useMemo(() => {
+		const normalSections = [{
+			key: "recent",
+			title: localeService.t("ui.emojiPicker.recents"),
+			emojis: recents
+		}, ...EMOJI_CATEGORIES.map((category) => ({
+			key: category.key,
+			title: localeService.t(category.titleKey),
+			emojis: emojis[category.key]
+		}))];
+		return createEmojiVirtualRows(isSearching ? [{
+			key: "people",
+			title: localeService.t("ui.emojiPicker.searchResults"),
+			emojis: searchResults
+		}] : normalSections, currentLocale);
+	}, [
+		currentLocale,
+		isSearching,
+		localeService,
+		recents,
+		searchResults
+	]);
+	const [virtualRows, { containerProps, scrollTo, wrapperStyle }] = useVirtualList(rows, {
+		containerTarget: scrollRef,
+		itemHeight: getEmojiVirtualRowHeight,
+		overscan: EMOJI_VIRTUAL_OVERSCAN
+	});
 	useEffect(() => {
 		let disposed = false;
 		localStorageService.getItem(recentStorageKey).then((storedRecents) => {
@@ -21172,6 +21160,17 @@ function EmojiPicker(props) {
 			disposed = true;
 		};
 	}, [localStorageService, recentStorageKey]);
+	useEffect(() => {
+		const pendingSection = pendingSectionRef.current;
+		if (isSearching || !pendingSection) return;
+		const position = sectionPositions.find((item) => item.key === pendingSection);
+		if (position) scrollTo(position.rowIndex);
+		pendingSectionRef.current = null;
+	}, [
+		isSearching,
+		scrollTo,
+		sectionPositions
+	]);
 	const handleSelect = (item, options) => {
 		var _props$onChange, _extraProps$onSelect;
 		const nextRecents = promoteRecentEmoji(recents, item);
@@ -21185,16 +21184,19 @@ function EmojiPicker(props) {
 		handleSelect(getRandomEmoji(), { keepOpen: true });
 	};
 	const handleScroll = (event) => {
+		containerProps.onScroll(event);
 		if (isSearching) return;
-		setActiveTab(getActiveSectionByScrollTop(normalSections, sectionRefs.current, event.currentTarget.scrollTop));
+		setActiveTab(getActiveSectionByScrollTop(sectionPositions, event.currentTarget.scrollTop));
 	};
 	const scrollToSection = (section) => {
 		setQuery("");
 		setActiveTab(section);
-		requestAnimationFrame(() => {
-			const sectionElement = sectionRefs.current[section];
-			if (scrollRef.current && sectionElement) scrollRef.current.scrollTop = sectionElement.offsetTop;
-		});
+		const position = sectionPositions.find((item) => item.key === section);
+		if (!isSearching && position) {
+			scrollTo(position.rowIndex);
+			return;
+		}
+		pendingSectionRef.current = section;
 	};
 	return /* @__PURE__ */ jsxs("section", {
 		"data-u-comp": EMOJI_PICKER_COMPONENT,
@@ -21222,17 +21224,19 @@ function EmojiPicker(props) {
 				ref: scrollRef,
 				className: clsx("univer-relative univer-min-h-0 univer-flex-1 univer-overflow-y-auto univer-px-3", scrollbarClassName),
 				onScroll: handleScroll,
-				children: renderedSections.length ? /* @__PURE__ */ jsx("div", {
-					className: "univer-flex univer-flex-col univer-gap-1.5 univer-pb-2",
-					children: renderedSections.map((section) => /* @__PURE__ */ jsx(EmojiSectionView, {
+				children: rows.length ? /* @__PURE__ */ jsx("div", {
+					style: wrapperStyle,
+					children: virtualRows.map(({ data: row }) => row.type === "header" ? /* @__PURE__ */ jsx("div", {
+						style: { height: EMOJI_SECTION_HEADER_HEIGHT },
+						className: "univer-flex univer-items-center univer-text-xs univer-text-gray-500 dark:!univer-text-gray-400",
+						children: row.title
+					}, row.key) : /* @__PURE__ */ jsx(EmojiGrid, {
 						activeEmoji,
 						emojiTitles: emojiLocaleData.emojiTitles,
-						section,
-						onSelect: handleSelect,
-						refElement: (element) => {
-							sectionRefs.current[section.key] = element;
-						}
-					}, section.key))
+						items: row.items,
+						keyPrefix: row.key,
+						onSelect: handleSelect
+					}, row.key))
 				}) : /* @__PURE__ */ jsx("div", {
 					className: "univer-py-7 univer-text-center univer-text-sm univer-text-gray-400 dark:!univer-text-gray-500",
 					children: localeService.t("ui.emojiPicker.noResults")
@@ -21242,12 +21246,12 @@ function EmojiPicker(props) {
 				className: clsx("univer-flex univer-h-10 univer-shrink-0 univer-items-center univer-border-gray-200 univer-px-2.5 dark:!univer-border-gray-600 [&_svg]:univer-size-5", borderTopClassName),
 				children: [/* @__PURE__ */ jsx(CategoryButton, {
 					selected: !isSearching && activeTab === "recent",
-					titleKey: "ui.emojiPicker.recents",
+					title: localeService.t("ui.emojiPicker.recents"),
 					onClick: () => scrollToSection("recent"),
 					children: /* @__PURE__ */ jsx(RecentIcon, {})
 				}), EMOJI_CATEGORIES.map((category) => /* @__PURE__ */ jsx(CategoryButton, {
 					selected: !isSearching && activeTab === category.key,
-					titleKey: category.titleKey,
+					title: localeService.t(category.titleKey),
 					onClick: () => scrollToSection(category.key),
 					children: /* @__PURE__ */ jsx(CategoryIcon, { category: category.key })
 				}, category.key))]
@@ -21255,25 +21259,10 @@ function EmojiPicker(props) {
 		]
 	});
 }
-function EmojiSectionView(props) {
-	return /* @__PURE__ */ jsxs("section", {
-		ref: props.refElement,
-		className: "univer-flex univer-flex-col univer-gap-1",
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "univer-text-xs univer-text-gray-500 dark:!univer-text-gray-400",
-			children: props.section.title
-		}), /* @__PURE__ */ jsx(EmojiGrid, {
-			activeEmoji: props.activeEmoji,
-			emojiTitles: props.emojiTitles,
-			items: props.section.emojis,
-			keyPrefix: props.section.key,
-			onSelect: props.onSelect
-		})]
-	});
-}
 function EmojiGrid(props) {
 	return /* @__PURE__ */ jsx("div", {
 		className: "univer-grid univer-grid-cols-10 univer-justify-between univer-gap-1",
+		style: { height: EMOJI_ROW_HEIGHT },
 		children: props.items.map((item) => {
 			const title = getLocalizedEmojiTitle(item, props.emojiTitles);
 			return /* @__PURE__ */ jsx("button", {
@@ -21288,12 +21277,11 @@ function EmojiGrid(props) {
 	});
 }
 function CategoryButton(props) {
-	const localeService = useDependency(LocaleService);
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
-		"aria-label": localeService.t(props.titleKey),
+		"aria-label": props.title,
 		"aria-selected": props.selected,
-		title: localeService.t(props.titleKey),
+		title: props.title,
 		className: clsx("univer-flex univer-h-[30px] univer-flex-1 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-lg univer-border-0 univer-bg-transparent univer-p-0 univer-text-gray-500 dark:!univer-text-gray-400", props.selected ? "univer-bg-primary-50 univer-text-primary-500 dark:!univer-bg-gray-800 dark:!univer-text-primary-400" : "hover:univer-bg-gray-50 hover:univer-text-gray-700 dark:hover:!univer-bg-gray-800 dark:hover:!univer-text-gray-300"),
 		onClick: props.onClick,
 		children: props.children
@@ -21302,11 +21290,44 @@ function CategoryButton(props) {
 function writeRecents(localStorageService, storageKey, recents) {
 	localStorageService.setItem(storageKey, recents).catch(() => void 0);
 }
-function getActiveSectionByScrollTop(sections, sectionElements, scrollTop) {
-	let active = "recent";
+function createEmojiVirtualRows(sections, locale) {
+	const rows = [];
+	const sectionPositions = [];
+	let top = 0;
 	sections.forEach((section) => {
-		const element = sectionElements[section.key];
-		if (element && element.offsetTop <= scrollTop + ACTIVE_SECTION_SCROLL_OFFSET) active = section.key;
+		if (!section.emojis.length) return;
+		sectionPositions.push({
+			key: section.key,
+			rowIndex: rows.length,
+			top
+		});
+		rows.push({
+			key: `${locale}-${section.key}-header`,
+			title: section.title,
+			type: "header"
+		});
+		top += EMOJI_SECTION_HEADER_HEIGHT;
+		for (let start = 0; start < section.emojis.length; start += EMOJI_COLUMN_COUNT) {
+			rows.push({
+				items: section.emojis.slice(start, start + EMOJI_COLUMN_COUNT),
+				key: `${locale}-${section.key}-${start / EMOJI_COLUMN_COUNT}`,
+				type: "emojis"
+			});
+			top += EMOJI_ROW_HEIGHT;
+		}
+	});
+	return {
+		rows,
+		sectionPositions
+	};
+}
+function getEmojiVirtualRowHeight(_index, row) {
+	return row.type === "header" ? EMOJI_SECTION_HEADER_HEIGHT : EMOJI_ROW_HEIGHT;
+}
+function getActiveSectionByScrollTop(sectionPositions, scrollTop) {
+	let active = "recent";
+	sectionPositions.forEach((position) => {
+		if (position.top <= scrollTop + ACTIVE_SECTION_SCROLL_OFFSET) active = position.key;
 	});
 	return active;
 }
@@ -21531,8 +21552,7 @@ let FontService = class FontService {
 	constructor(_configService) {
 		this._configService = _configService;
 		_defineProperty(this, "fonts$", new BehaviorSubject([]));
-		const config = this._configService.getConfig(UI_PLUGIN_CONFIG_KEY);
-		const { customFontFamily } = config !== null && config !== void 0 ? config : {};
+		const { customFontFamily } = this._configService.getConfig("ui.config") ?? {};
 		let fonts = [];
 		if (customFontFamily) if (Array.isArray(customFontFamily)) fonts = [...DEFAULT_FONT_LIST, ...customFontFamily];
 		else if (customFontFamily.override) fonts = [...customFontFamily.list];
@@ -21636,7 +21656,7 @@ const FontFamily = ({ className, disabled: disabledProp, value, disabled$, onCha
 		fonts,
 		localeService
 	]);
-	const inputValue = draftValue !== null && draftValue !== void 0 ? draftValue : viewValue;
+	const inputValue = draftValue ?? viewValue;
 	function resetValue() {
 		setDraftValue(null);
 	}
@@ -21764,8 +21784,8 @@ function FontFamilyDropdown(props) {
 const FontSize = (props) => {
 	const { value, min, max, onChange, disabled$ } = props;
 	const disabled = useObservable(disabled$);
-	const [realValue, setRealValue] = useState(Number(value !== null && value !== void 0 ? value : 0));
-	const _value = useMemo(() => Number(value !== null && value !== void 0 ? value : realValue), [value]);
+	const [realValue, setRealValue] = useState(Number(value ?? 0));
+	const _value = useMemo(() => Number(value ?? realValue), [value]);
 	function handleChange(value) {
 		if (value === null) return;
 		setRealValue(value);
@@ -21892,7 +21912,7 @@ const FONT_SIZE_COMPONENT = "UI_FONT_SIZE_COMPONENT";
 //#endregion
 //#region src/views/HeadingItem.tsx
 const HeadingItem = (props) => {
-	var _style$cl$rgb, _style$cl;
+	var _style$cl;
 	const { value, text } = props;
 	const style = NAMED_STYLE_MAP[value];
 	const localeService = useDependency(LocaleService);
@@ -21900,7 +21920,7 @@ const HeadingItem = (props) => {
 		className: clsx("univer-text-sm", { "univer-font-bold": style === null || style === void 0 ? void 0 : style.bl }),
 		style: {
 			fontSize: style === null || style === void 0 ? void 0 : style.fs,
-			color: (_style$cl$rgb = style === null || style === void 0 || (_style$cl = style.cl) === null || _style$cl === void 0 ? void 0 : _style$cl.rgb) !== null && _style$cl$rgb !== void 0 ? _style$cl$rgb : void 0
+			color: (style === null || style === void 0 || (_style$cl = style.cl) === null || _style$cl === void 0 ? void 0 : _style$cl.rgb) ?? void 0
 		},
 		children: localeService.t(text)
 	});
@@ -22006,7 +22026,6 @@ const DRAG_COMMIT_INTERVAL = 50;
 * Slider Component
 */
 function Slider(props) {
-	var _getSliderOffset;
 	const iconManager = useDependency(IconManager);
 	const localeService = useDependency(LocaleService);
 	const { value, min = 0, max = 400, disabled = false, resetPoint = 100, shortcuts, onChange } = props;
@@ -22117,7 +22136,7 @@ function Slider(props) {
 		window.addEventListener("pointerout", onPointerOut);
 	}
 	const visualValue = isDragging ? dragValue : value;
-	const sliderOffset = Math.min(Math.max((_getSliderOffset = getSliderOffset(visualValue)) !== null && _getSliderOffset !== void 0 ? _getSliderOffset : 0, 0), 100);
+	const sliderOffset = Math.min(Math.max(getSliderOffset(visualValue) ?? 0, 0), 100);
 	const handleOffset = isRtl ? 100 - sliderOffset : sliderOffset;
 	const ReduceIcon = iconManager.get("ReduceIcon");
 	const IncreaseIcon = iconManager.get("IncreaseIcon");
@@ -22498,7 +22517,6 @@ FeatureSearchController = __decorate([__decorateParam(0, ICommandService), __dec
 //#region src/views/components/ribbon/MobileRibbon.tsx
 const toolbarScrollOffset = 168;
 function MobileRibbon(props) {
-	var _activeGroup$children;
 	const { headerMenuComponents, headerMenu = true } = props;
 	const localeService = useDependency(LocaleService);
 	const ribbonService = useDependency(IRibbonService);
@@ -22509,7 +22527,7 @@ function MobileRibbon(props) {
 		return index === -1 ? 0 : index;
 	}, [activatedTab, ribbon]);
 	const activeGroup = ribbon[activeIndex];
-	const activeGroups = (_activeGroup$children = activeGroup === null || activeGroup === void 0 ? void 0 : activeGroup.children) !== null && _activeGroup$children !== void 0 ? _activeGroup$children : [];
+	const activeGroups = (activeGroup === null || activeGroup === void 0 ? void 0 : activeGroup.children) ?? [];
 	const hasHeaderMenu = !!(headerMenu && headerMenuComponents && headerMenuComponents.size > 0);
 	const toolbarScrollRef = useRef(null);
 	const [canScrollLeft, setCanScrollLeft] = useState(false);
@@ -22630,8 +22648,8 @@ function MobileRibbon(props) {
 					"data-u-comp": "mobile-ribbon-toolbar",
 					className: "univer-flex univer-min-w-0 univer-items-center univer-gap-1.5 univer-overflow-x-auto univer-scroll-smooth univer-px-0.5 [&::-webkit-scrollbar]:univer-hidden",
 					children: activeGroups.map((groupItem, groupIndex) => {
-						var _groupItem$children$f, _groupItem$children;
-						const groupItems = (_groupItem$children$f = (_groupItem$children = groupItem.children) === null || _groupItem$children === void 0 ? void 0 : _groupItem$children.filter((child) => !!child.item)) !== null && _groupItem$children$f !== void 0 ? _groupItem$children$f : [];
+						var _groupItem$children;
+						const groupItems = ((_groupItem$children = groupItem.children) === null || _groupItem$children === void 0 ? void 0 : _groupItem$children.filter((child) => !!child.item)) ?? [];
 						if (!groupItems.length) return null;
 						return /* @__PURE__ */ jsx("div", {
 							className: clsx("univer-flex univer-shrink-0 univer-items-center univer-gap-0.5 univer-pr-1.5 rtl:univer-pl-1.5 rtl:univer-pr-0", { [borderRightClassName]: groupIndex !== activeGroups.length - 1 }),
@@ -22662,11 +22680,10 @@ function MobileRibbon(props) {
 //#endregion
 //#region src/views/menu/mobile/MobileMenu.tsx
 function MobileMenu(props) {
-	var _viewStack;
 	const { menuType, onOptionSelect, schemas: providedSchemas, menuManagerService: providedMenuManagerService } = props;
 	const rootMenuManagerService = useDependency(IMenuManagerService);
 	const localeService = useDependency(LocaleService);
-	const menuManagerService = providedMenuManagerService !== null && providedMenuManagerService !== void 0 ? providedMenuManagerService : rootMenuManagerService;
+	const menuManagerService = providedMenuManagerService ?? rootMenuManagerService;
 	const [viewStack, setViewStack] = useState([]);
 	const menuSchemas = useMemo(() => {
 		if (providedSchemas) return providedSchemas;
@@ -22683,7 +22700,7 @@ function MobileMenu(props) {
 	useEffect(() => {
 		setViewStack([]);
 	}, [menuType, providedSchemas]);
-	const currentView = (_viewStack = viewStack[viewStack.length - 1]) !== null && _viewStack !== void 0 ? _viewStack : null;
+	const currentView = viewStack[viewStack.length - 1] ?? null;
 	if (!menuType && !providedSchemas) return null;
 	const openView = (view) => setViewStack((stack) => [...stack, view]);
 	const closeView = () => setViewStack((stack) => stack.slice(0, -1));
@@ -22811,24 +22828,20 @@ function MobileSchemaRow(props) {
 function MobileSelectionOptionsView(props) {
 	const { options, menuKey, menuItem, currentValue, inheritedDisabled$, onExecute } = props;
 	const inheritedDisabled = useObservable(inheritedDisabled$, false);
-	return /* @__PURE__ */ jsx(Fragment$1, { children: options.map((option, index) => {
-		var _option$value;
-		return /* @__PURE__ */ jsx(MobileSelectionOptionRow, {
-			option,
-			menuKey,
-			menuItem,
-			currentValue,
-			disabled: inheritedDisabled,
-			bordered: index !== options.length - 1,
-			onExecute
-		}, `${menuKey}-${String((_option$value = option.value) !== null && _option$value !== void 0 ? _option$value : index)}`);
-	}) });
+	return /* @__PURE__ */ jsx(Fragment$1, { children: options.map((option, index) => /* @__PURE__ */ jsx(MobileSelectionOptionRow, {
+		option,
+		menuKey,
+		menuItem,
+		currentValue,
+		disabled: inheritedDisabled,
+		bordered: index !== options.length - 1,
+		onExecute
+	}, `${menuKey}-${String(option.value ?? index)}`)) });
 }
 function MobileSelectionOptionRow(props) {
-	var _option$value2;
 	const { option, menuKey, menuItem, currentValue, disabled, bordered, onExecute } = props;
 	const optionValue = useObservable(option.value$);
-	const displayValue = (_option$value2 = option.value) !== null && _option$value2 !== void 0 ? _option$value2 : optionValue;
+	const displayValue = option.value ?? optionValue;
 	const selected = displayValue === currentValue;
 	const optionDisabled = disabled || Boolean(option.disabled);
 	return /* @__PURE__ */ jsxs("button", {
@@ -22857,7 +22870,6 @@ function MobileSelectionOptionRow(props) {
 	});
 }
 function useMobileSchemaInteraction(props) {
-	var _schema$children3;
 	const { schema, menuManagerService, menuType, onOpenView, inheritedDisabled$ } = props;
 	const localeService = useDependency(LocaleService);
 	const menuItem = schema.item;
@@ -22884,7 +22896,7 @@ function useMobileSchemaInteraction(props) {
 		return menuManagerService.getMenuByPositionKey(menuItem.id);
 	}, [menuItem, menuManagerService]);
 	if (!menuItem) return null;
-	const schemaChildren = (_schema$children3 = schema.children) !== null && _schema$children3 !== void 0 ? _schema$children3 : [];
+	const schemaChildren = schema.children ?? [];
 	const hasSubmenu = schemaChildren.length > 0 || selections.length > 0 || subMenuItems.length > 0;
 	const currentValueText = typeof value === "string" || typeof value === "number" ? String(value) : "";
 	const onPress = (onExecute) => {
@@ -22951,8 +22963,8 @@ function useContextGroupHiddenStates(menuSchemas) {
 		const groupStates = menuSchemas.flatMap((menuSchema) => {
 			var _menuSchema$children;
 			const hiddenObservables = ((_menuSchema$children = menuSchema.children) === null || _menuSchema$children === void 0 ? void 0 : _menuSchema$children.length) ? getLeafItemSchemas(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 : of(false);
+				var _childSchema$item;
+				return ((_childSchema$item = childSchema.item) === null || _childSchema$item === void 0 ? void 0 : _childSchema$item.hidden$) ?? of(false);
 			}) : [];
 			return hiddenObservables.length ? [combineLatest(hiddenObservables).pipe(map((values) => [menuSchema.key, values.every(Boolean)]))] : [];
 		});
@@ -22964,8 +22976,8 @@ function useContextGroupHiddenStates(menuSchemas) {
 }
 function getLeafItemSchemas(schemas) {
 	return schemas.reduce((acc, schema) => {
-		var _schema$children4;
-		if ((_schema$children4 = schema.children) === null || _schema$children4 === void 0 ? void 0 : _schema$children4.length) return [...acc, ...getLeafItemSchemas(schema.children)];
+		var _schema$children3;
+		if ((_schema$children3 = schema.children) === null || _schema$children3 === void 0 ? void 0 : _schema$children3.length) return [...acc, ...getLeafItemSchemas(schema.children)];
 		if (schema.item) return [...acc, schema];
 		return acc;
 	}, []);
@@ -23033,8 +23045,7 @@ function MobileContextMenu() {
 		menuType,
 		menuManagerService: (activeScope === null || activeScope === void 0 ? void 0 : activeScope.has(IMenuManagerService)) ? activeScope.get(IMenuManagerService) : menuManagerService,
 		onOptionSelect: (params) => {
-			var _ref, _params$commandId;
-			const commandId = (_ref = (_params$commandId = params.commandId) !== null && _params$commandId !== void 0 ? _params$commandId : params.id) !== null && _ref !== void 0 ? _ref : params.label;
+			const commandId = params.commandId ?? params.id ?? params.label;
 			const fallbackParams = typeof params.params === "function" ? params.params() : params.params;
 			const commandParams = typeof params.value === "undefined" ? fallbackParams : { value: params.value };
 			if (!commandId) return;
@@ -23487,7 +23498,7 @@ let BrowserClipboardService = class BrowserClipboardService extends Disposable {
 			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 }),
-				...Object.fromEntries(Object.entries(customData !== null && customData !== void 0 ? customData : {}).map(([type, value]) => [type, new Blob([value], { type })]))
+				...Object.fromEntries(Object.entries(customData ?? {}).map(([type, value]) => [type, new Blob([value], { type })]))
 			})]);
 		} catch (error) {
 			if (customData && Object.keys(customData).length) try {
@@ -23624,10 +23635,7 @@ function serializeSanitizedHtmlForClipboard(html) {
 	return container.innerHTML;
 }
 function sanitizeHtmlNode(node) {
-	if (node.nodeType === Node.TEXT_NODE) {
-		var _node$textContent;
-		return document.createTextNode((_node$textContent = node.textContent) !== null && _node$textContent !== void 0 ? _node$textContent : "");
-	}
+	if (node.nodeType === Node.TEXT_NODE) return document.createTextNode(node.textContent ?? "");
 	if (node.nodeType !== Node.ELEMENT_NODE) return null;
 	const sourceElement = node;
 	const tagName = sourceElement.tagName.toLowerCase();
@@ -23956,11 +23964,10 @@ DesktopGalleryService = __decorate([__decorateParam(0, Inject(Injector)), __deco
 var DesktopLocalFileService = class extends Disposable {
 	openFile(options) {
 		return new Promise((resolve) => {
-			var _options$accept, _options$multiple;
 			const inputElement = document.createElement("input");
 			inputElement.type = "file";
-			inputElement.accept = (_options$accept = options === null || options === void 0 ? void 0 : options.accept) !== null && _options$accept !== void 0 ? _options$accept : "";
-			inputElement.multiple = (_options$multiple = options === null || options === void 0 ? void 0 : options.multiple) !== null && _options$multiple !== void 0 ? _options$multiple : false;
+			inputElement.accept = (options === null || options === void 0 ? void 0 : options.accept) ?? "";
+			inputElement.multiple = (options === null || options === void 0 ? void 0 : options.multiple) ?? false;
 			inputElement.onchange = (event) => {
 				const fileList = event.target.files;
 				if (fileList) resolve(Array.from(fileList));
@@ -24042,10 +24049,7 @@ var IndexedDBDriver = class {
 		const store = await this._store("readonly");
 		return new Promise((resolve, reject) => {
 			const req = store.get(key);
-			req.onsuccess = () => {
-				var _req$result;
-				return resolve((_req$result = req.result) !== null && _req$result !== void 0 ? _req$result : null);
-			};
+			req.onsuccess = () => resolve(req.result ?? null);
 			req.onerror = () => reject(req.error);
 		});
 	}
@@ -24153,8 +24157,7 @@ var LocalStorageDriver = class {
 		toRemove.forEach((k) => localStorage.removeItem(k));
 	}
 	async key(index) {
-		var _keys$index;
-		return (_keys$index = this._keys()[index]) !== null && _keys$index !== void 0 ? _keys$index : null;
+		return this._keys()[index] ?? null;
 	}
 	async keys() {
 		return this._keys();
@@ -24255,8 +24258,7 @@ let DesktopMessageService = class DesktopMessageService extends Disposable {
 		removeMessage();
 	}
 	show(options) {
-		var _options$id;
-		const id = (_options$id = options.id) !== null && _options$id !== void 0 ? _options$id : `message-${Date.now()}-${messageId}`;
+		const id = options.id ?? `message-${Date.now()}-${messageId}`;
 		messageId += 1;
 		message(Object.assign({}, options, { id }));
 		return toDisposable(() => removeMessage(id));
@@ -24684,8 +24686,7 @@ function handleDomToJson($dom) {
 		let span = nodeList[`${i}`];
 		let str;
 		if (span.nodeName === "#text") {
-			var _span$textContent;
-			str = (_span$textContent = span.textContent) !== null && _span$textContent !== void 0 ? _span$textContent : "";
+			str = span.textContent ?? "";
 			span = span.parentElement;
 		} else str = span.innerText;
 		const textStyle = handleStringToStyle(span);
@@ -24717,8 +24718,8 @@ function handleDomToJson($dom) {
 * @returns
 */
 function handleStringToStyle($dom, cssStyle = "") {
-	var _$dom$style$cssText, _$dom$style;
-	let cssText = (_$dom$style$cssText = $dom === null || $dom === void 0 || (_$dom$style = $dom.style) === null || _$dom$style === void 0 ? void 0 : _$dom$style.cssText) !== null && _$dom$style$cssText !== void 0 ? _$dom$style$cssText : "";
+	var _$dom$style;
+	let cssText = ($dom === null || $dom === void 0 || (_$dom$style = $dom.style) === null || _$dom$style === void 0 ? void 0 : _$dom$style.cssText) ?? "";
 	cssText += cssStyle;
 	cssText = cssText.replace(/[\r\n]+/g, "");
 	if (cssText.length === 0) return {};
@@ -25068,10 +25069,9 @@ function handelTableToJson(table) {
 			while (c < colLen && data[r][c] != null) c++;
 			if (c === colLen) return;
 			if (data[r][c] == null) {
-				var _Number, _Number2;
 				data[r][c] = cell;
-				const rowSpan = (_Number = Number(td.getAttribute("rowSpan"))) !== null && _Number !== void 0 ? _Number : 1;
-				const colSpan = (_Number2 = Number(td.getAttribute("colSpan"))) !== null && _Number2 !== void 0 ? _Number2 : 1;
+				const rowSpan = Number(td.getAttribute("rowSpan")) ?? 1;
+				const colSpan = Number(td.getAttribute("colSpan")) ?? 1;
 				if (rowSpan > 1 || colSpan > 1) {
 					const first = {
 						rs: +rowSpan - 1,
@@ -25178,10 +25178,9 @@ function handelExcelToJson(html) {
 			while (c < colLen && data[r][c] != null) c++;
 			if (c === colLen) return;
 			if (data[r][c] == null) {
-				var _Number3, _Number4;
 				data[r][c] = cell;
-				const rowSpan = (_Number3 = Number(td.getAttribute("rowSpan"))) !== null && _Number3 !== void 0 ? _Number3 : 1;
-				const colSpan = (_Number4 = Number(td.getAttribute("colSpan"))) !== null && _Number4 !== void 0 ? _Number4 : 1;
+				const rowSpan = Number(td.getAttribute("rowSpan")) ?? 1;
+				const colSpan = Number(td.getAttribute("colSpan")) ?? 1;
 				if (rowSpan > 1 || colSpan > 1) {
 					const first = {
 						rs: +rowSpan - 1,
@@ -25238,21 +25237,20 @@ const PrintFloatDomSingle = memo((props) => {
 	});
 });
 function RegisteredPrintFloatDomSingle(props) {
-	const componentManager = useDependency$1(ComponentManager);
+	const componentManager = useDependency(ComponentManager);
 	return /* @__PURE__ */ jsx(PrintFloatDomSingleContent, {
 		...props,
 		Component: componentManager.get(props.componentKey)
 	});
 }
 function PrintFloatDomSingleContent(props) {
-	var _position$startY, _position$startX;
 	const { layer, id, position, Component } = props;
-	const univerInstanceService = useDependency$1(IUniverInstanceService);
+	const univerInstanceService = useDependency(IUniverInstanceService);
 	const domRef = useRef(null);
 	const innerDomRef = useRef(null);
 	const transformRef = useRef(`transform: rotate(${position === null || position === void 0 ? void 0 : position.rotate}deg) translate(${position === null || position === void 0 ? void 0 : position.startX}px, ${position === null || position === void 0 ? void 0 : position.startY}px)`);
-	const topRef = useRef((_position$startY = position === null || position === void 0 ? void 0 : position.startY) !== null && _position$startY !== void 0 ? _position$startY : 0);
-	const leftRef = useRef((_position$startX = position === null || position === void 0 ? void 0 : position.startX) !== null && _position$startX !== void 0 ? _position$startX : 0);
+	const topRef = useRef((position === null || position === void 0 ? void 0 : position.startY) ?? 0);
+	const leftRef = useRef((position === null || position === void 0 ? void 0 : position.startX) ?? 0);
 	const layerProps = useMemo(() => ({
 		data: layer.data,
 		...layer.props