@univerjs/ui 1.0.4 → 1.2.0

package/lib/cjs/index.js

@@ -56,7 +56,7 @@ function getAttributeValue(target, name) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -67,7 +67,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -80,14 +80,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -98,7 +98,7 @@ function _defineProperty(e, r, t) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorateParam.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -106,7 +106,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -308,7 +308,8 @@ const ToggleShortcutPanelOperation = {
 			shortcutPanelService.open();
 			sidebarService.open({
 				header: { title: "ui.shortcut-panel.title" },
-				children: { label: ShortcutPanelComponentName }
+				children: { label: ShortcutPanelComponentName },
+				onClose: () => shortcutPanelService.close()
 			});
 		}
 		return true;
@@ -1674,27 +1675,33 @@ let DesktopRibbonService = class DesktopRibbonService extends _univerjs_core.Dis
 		this._initRibbonSubscription();
 	}
 	setActivatedTab(tab) {
+		if (this._disposed) return;
 		if (!this._isContextualTab(tab)) this._lastNonContextualActivatedTab = tab;
 		this._activatedTab$.next(tab);
 	}
 	showContextualTab(tab, options) {
+		if (this._disposed) return;
 		this._visibleContextualTabs.add(tab);
 		this._updateRibbon();
 		if (options === null || options === void 0 ? void 0 : options.activate) this.setActivatedTab(tab);
 	}
 	hideContextualTab(tab) {
+		if (this._disposed) return;
 		if (!this._visibleContextualTabs.delete(tab)) return;
 		this._updateRibbon();
 	}
 	hideAllContextualTabs() {
+		if (this._disposed) return;
 		if (this._visibleContextualTabs.size === 0) return;
 		this._visibleContextualTabs.clear();
 		this._updateRibbon();
 	}
 	setCollapsedIds(ids) {
+		if (this._disposed) return;
 		this._collapsedIds$.next(ids);
 	}
 	setFakeToolbarVisible(visible) {
+		if (this._disposed) return;
 		this._fakeToolbarVisible$.next(visible);
 	}
 	_initRibbonSubscription() {
@@ -1704,15 +1711,16 @@ let DesktopRibbonService = class DesktopRibbonService extends _univerjs_core.Dis
 	}
 	_updateRibbon() {
 		var _this$_hiddenSubscrip;
+		if (this._disposed) return;
 		const ribbon = this._filterContextualTabs(this._menuManagerService.getMenuByPositionKey("ribbon"));
 		const hiddenObservableMap = [];
-		const hiddenKeyMap = [];
+		const menusWithHiddenState = [];
 		for (const group of ribbon) if (group.children) {
 			for (const item of group.children) if (item.children) for (const child of item.children) {
 				var _child$item;
 				if ((_child$item = child.item) === null || _child$item === void 0 ? void 0 : _child$item.hidden$) {
 					hiddenObservableMap.push(child.item.hidden$);
-					hiddenKeyMap.push(child.key);
+					menusWithHiddenState.push(child);
 				}
 			}
 		}
@@ -1724,10 +1732,7 @@ let DesktopRibbonService = class DesktopRibbonService extends _univerjs_core.Dis
 		}
 		this._hiddenSubscription = (0, rxjs.combineLatest)(hiddenObservableMap.map((hidden$) => hidden$.pipe((0, rxjs_operators.startWith)(false)))).pipe((0, rxjs_operators.distinctUntilChanged)(isSameHiddenMap)).subscribe((hiddenMap) => {
 			const newRibbon = [];
-			const hiddenPathMap = hiddenMap.map((hidden, index) => {
-				if (hidden) return hiddenKeyMap[index];
-				return null;
-			}).filter((item) => !!item);
+			const hiddenMenus = new Set(menusWithHiddenState.filter((_, index) => hiddenMap[index]));
 			for (const group of ribbon) {
 				var _group$children, _newGroup$children2;
 				const newGroup = {
@@ -1743,7 +1748,7 @@ let DesktopRibbonService = class DesktopRibbonService extends _univerjs_core.Dis
 					let shouldAddItem = true;
 					if ((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length) {
 						var _newItem$children2;
-						for (const child of item.children) if (!hiddenPathMap.includes(child.key)) {
+						for (const child of item.children) if (!hiddenMenus.has(child)) {
 							var _newItem$children;
 							(_newItem$children = newItem.children) === null || _newItem$children === void 0 || _newItem$children.push(child);
 						}
@@ -1764,6 +1769,10 @@ let DesktopRibbonService = class DesktopRibbonService extends _univerjs_core.Dis
 			}
 			this._setRibbon(newRibbon);
 		});
+		if (this._disposed) {
+			this._hiddenSubscription.unsubscribe();
+			this._hiddenSubscription = null;
+		}
 	}
 	_filterContextualTabs(ribbon) {
 		this._contextualTabs.clear();
@@ -1790,6 +1799,10 @@ let DesktopRibbonService = class DesktopRibbonService extends _univerjs_core.Dis
 	}
 	dispose() {
 		var _this$_hiddenSubscrip2;
+		if (this._disposed) return;
+		super.dispose();
+		this._visibleContextualTabs.clear();
+		this._contextualTabs.clear();
 		(_this$_hiddenSubscrip2 = this._hiddenSubscription) === null || _this$_hiddenSubscrip2 === void 0 || _this$_hiddenSubscrip2.unsubscribe();
 		this._hiddenSubscription = null;
 		this._ribbon$.next([]);
@@ -1797,7 +1810,6 @@ let DesktopRibbonService = class DesktopRibbonService extends _univerjs_core.Dis
 		this._activatedTab$.complete();
 		this._collapsedIds$.complete();
 		this._fakeToolbarVisible$.complete();
-		super.dispose();
 	}
 };
 DesktopRibbonService = __decorate([__decorateParam(0, IMenuManagerService), __decorateParam(1, _univerjs_core.IUniverInstanceService)], DesktopRibbonService);
@@ -1823,17 +1835,23 @@ function useObservableRef(observable, defaultValue) {
 
 //#endregion
 //#region src/views/components/feature-search/FeatureSearch.tsx
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
 const FEATURE_SEARCH_COMPONENT = "FeatureSearch";
 const FEATURE_SEARCH_DIALOG_ID = "FEATURE_SEARCH_DIALOG";
-function resolveParams(item, value) {
-	return (typeof item.params === "function" ? item.params() : item.params) ?? (value === void 0 ? void 0 : { value });
-}
-function resolveOptionParams(option) {
-	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 && _univerjs_core.Tools.diffValue(candidate.params, item.params)) === index);
-}
 function FeatureSearch() {
 	const menuManagerService = (0, _wendellhu_redi_react_bindings.useDependency)(IMenuManagerService);
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
@@ -1842,6 +1860,15 @@ function FeatureSearch() {
 	const layoutService = (0, _wendellhu_redi_react_bindings.useDependency)(ILayoutService);
 	const ribbonService = (0, _wendellhu_redi_react_bindings.useDependency)(IRibbonService);
 	const items$ = (0, react.useMemo)(() => {
+		function resolveParams(item, value) {
+			return (typeof item.params === "function" ? item.params() : item.params) ?? (value === void 0 ? void 0 : { value });
+		}
+		function resolveOptionParams(option) {
+			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 && _univerjs_core.Tools.diffValue(candidate.params, item.params)) === index);
+		}
 		function getItemTitle(item) {
 			const titleKey = item.title ?? item.tooltip ?? item.description;
 			return titleKey ? localeService.t(titleKey) : "";
@@ -1966,7 +1993,7 @@ function FeatureSearch() {
 					children: item.title
 				})]
 			}), item.path && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "univer-max-w-1/2 univer-truncate univer-text-xs univer-text-gray-400",
+				className: "univer-max-w-[50%] univer-truncate univer-text-xs univer-text-gray-400",
 				children: item.path
 			})]
 		}, item.key)) })] })]
@@ -3209,6 +3236,21 @@ function useComponentsOfPart(part, injector) {
 
 //#endregion
 //#region src/views/components/ribbon/ribbon-menu/ClassicMenu.tsx
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
 function ClassicMenu({ ribbon, activatedTab, onSelectTab }) {
 	const localeService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.LocaleService);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -3222,7 +3264,7 @@ function ClassicMenu({ ribbon, activatedTab, onSelectTab }) {
 				"aria-selected": isActive,
 				title: localeService.t(group.title || group.key),
 				onClick: () => onSelectTab(group),
-				className: (0, _univerjs_design.clsx)("univer-focus:outline-none univer-focus:ring-2 univer-focus:ring-primary-500 dark:!univer-focus:ring-primary-300 univer-flex univer-cursor-pointer univer-appearance-none univer-items-center univer-gap-1 univer-rounded-sm univer-border-none univer-px-2 univer-py-1 univer-text-sm univer-transition-colors", isActive ? "univer-bg-primary-50 univer-font-semibold univer-text-primary-600 univer-shadow-sm dark:!univer-bg-primary-900 dark:!univer-text-primary-300" : "univer-hover:bg-gray-100 dark:!univer-hover:bg-gray-700 univer-bg-transparent univer-text-gray-700 dark:!univer-text-gray-200"),
+				className: (0, _univerjs_design.clsx)("univer-flex univer-cursor-pointer univer-appearance-none univer-items-center univer-gap-1 univer-rounded-sm univer-border-none univer-px-2 univer-py-1 univer-text-sm univer-transition-colors focus:univer-outline-none focus:univer-ring-2 focus:univer-ring-primary-500 dark:focus:!univer-ring-primary-300", isActive ? "univer-bg-primary-50 univer-font-semibold univer-text-primary-600 univer-shadow-sm dark:!univer-bg-primary-900 dark:!univer-text-primary-300" : "univer-bg-transparent univer-text-gray-700 hover:univer-bg-gray-100 dark:!univer-text-gray-200 dark:hover:!univer-bg-gray-700"),
 				children: localeService.t(group.title || group.key)
 			}, group.key);
 		})
@@ -4051,7 +4093,7 @@ const toolbarSelectorRootVariants = (0, _univerjs_design.cva)("univer-toolbar-se
 			false: "univer-text-gray-900 dark:!univer-text-gray-0"
 		},
 		active: {
-			true: "univer-bg-gray-200",
+			true: "univer-bg-gray-200 dark:!univer-bg-gray-500",
 			false: ""
 		}
 	},
@@ -4322,7 +4364,7 @@ function RibbonGrid({ groups, title, className, ...props }) {
 			const placements = placeRibbonGridItems(group.children ?? []);
 			return /* @__PURE__ */ (0, react_jsx_runtime.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",
+				className: "univer-relative univer-box-border univer-flex univer-shrink-0 univer-flex-col univer-px-2",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.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-[repeat(2,1.5rem)] univer-content-center univer-gap-2 univer-py-2 [&>div>span>span]:univer-h-full",
@@ -4741,52 +4783,6 @@ var ContextMenuHostService = class extends _univerjs_core.Disposable {
 	}
 };
 
-//#endregion
-//#region src/views/hooks/layout.ts
-/**
-* These hooks are used for browser layout
-* Prefer to client-side
-*/
-/**
-* Allow the element to scroll when its height over the container height
-* @param element
-* Container means the window view that the element displays in.
-* Recommend pass the sheet mountContainer as container
-* @param container
-*/
-function useScrollYOverContainer(element, container) {
-	const updater = useEvent(() => {
-		if (!element || !container) return;
-		const elStyle = element.style;
-		const { y, height } = element.getBoundingClientRect();
-		const containerRect = container.getBoundingClientRect();
-		const scrolled = element.scrollHeight > height;
-		const isOverViewport = y < 0 || y + height > containerRect.height;
-		if (!isOverViewport && !scrolled) {
-			elStyle.overflowY = "";
-			elStyle.maxHeight = "";
-			return;
-		}
-		if (isOverViewport) {
-			elStyle.overflowY = "auto";
-			elStyle.maxHeight = y < 0 ? `${element.scrollHeight + y}px` : `${containerRect.height - y}px`;
-		}
-	});
-	(0, react.useEffect)(() => {
-		if (!(0, _univerjs_design.isBrowser)() || !element || !container) return;
-		updater();
-		const resizeObserver = new ResizeObserver(updater);
-		resizeObserver.observe(element);
-		return () => {
-			resizeObserver.disconnect();
-		};
-	}, [element, container]);
-}
-function useConfigValue(configKey) {
-	const configService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.IConfigService);
-	return (0, _wendellhu_redi_react_bindings.useObservable)((0, react.useMemo)(() => configService.subscribeConfigValue$(configKey), [configService]), configService.getConfig(configKey));
-}
-
 //#endregion
 //#region src/views/hooks/prevent-browser-zoom.ts
 /**
@@ -4963,6 +4959,21 @@ function DesignTinyMenuGroup({ items, columns, sizeVariant = "default", layoutVa
 
 //#endregion
 //#region src/views/menu/desktop/TinyMenuGroup.tsx
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
 const EMPTY_HIDDEN_ITEM_IDS = [];
 const EMPTY_TINY_MENU_CHILDREN = [];
 const quickTileMenuButtonVariants = (0, _univerjs_design.cva)("univer-relative univer-box-border univer-flex univer-size-12 univer-w-full univer-appearance-none univer-flex-col univer-items-center univer-justify-center univer-gap-0.5 univer-rounded-lg univer-border-none univer-bg-gray-0 univer-p-0 univer-font-medium univer-text-gray-700 univer-outline-none univer-transition-all focus-visible:univer-ring-2 focus-visible:univer-ring-primary-600 focus-visible:univer-ring-offset-0 dark:!univer-bg-gray-700 dark:!univer-text-gray-100", {
@@ -5089,7 +5100,7 @@ function UIQuickTileMenuGroup(props) {
 	const { item, activeItemIds, hiddenItemIds = EMPTY_HIDDEN_ITEM_IDS, onOptionSelect } = props;
 	if (!((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length)) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "univer-item-center univer-grid univer-grid-cols-3 univer-gap-1.5 univer-py-1",
+		className: "univer-grid univer-grid-cols-3 univer-items-center univer-gap-1.5 univer-py-1",
 		children: getVisibleTinyMenuChildren(item.children, hiddenItemIds).map((menuSchema) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QuickTileMenuItem, {
 			menuSchema,
 			activeItemIds,
@@ -5452,7 +5463,6 @@ function ContextMenuPanel(props) {
 		menuSessionVersion
 	]);
 	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);
 	(0, react.useEffect)(() => {
 		if (!menuElement) return;
 		return preventBrowserZoomInContainers([menuElement]);
@@ -6405,7 +6415,7 @@ function Sidebar() {
 		}),
 		style: { width: isDragging ? void 0 : width },
 		children: [(options === null || options === void 0 ? void 0 : options.visible) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "hover:univer-bg-primary-500/30 active:univer-bg-primary-500/50 univer-absolute univer-left-0 univer-top-0 univer-z-20 univer-h-full univer-w-1 univer-cursor-col-resize univer-transition-colors",
+			className: "univer-absolute univer-left-0 univer-top-0 univer-z-20 univer-h-full univer-w-1 univer-cursor-col-resize univer-transition-colors hover:univer-bg-primary-500 active:univer-bg-primary-500",
 			onMouseDown: handleResizeMouseDown,
 			role: "separator",
 			"aria-orientation": "vertical",
@@ -6436,7 +6446,7 @@ function Sidebar() {
 					children: [options === null || options === void 0 ? void 0 : options.header, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						ref: closeButtonRef,
 						type: "button",
-						className: "focus:univer-ring-primary-500/50 univer-flex univer-size-6 univer-cursor-pointer univer-appearance-none univer-items-center univer-justify-center univer-rounded-sm univer-border-none univer-bg-transparent univer-p-0 univer-text-gray-500 focus:univer-outline-none focus:univer-ring-2 dark:!univer-text-gray-300",
+						className: "univer-flex univer-size-6 univer-cursor-pointer univer-appearance-none univer-items-center univer-justify-center univer-rounded-sm univer-border-none univer-bg-transparent univer-p-0 univer-text-gray-500 focus:univer-outline-none focus:univer-ring-2 focus:univer-ring-primary-500 dark:!univer-text-gray-300",
 						onClick: handleClose,
 						"aria-label": localeService.t("ui.sidebar.close"),
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CloseIcon, {})
@@ -6544,6 +6554,52 @@ function WorkbenchSkeleton({ darkMode, direction, overlay = false }) {
 	});
 }
 
+//#endregion
+//#region src/views/hooks/layout.ts
+/**
+* These hooks are used for browser layout
+* Prefer to client-side
+*/
+/**
+* Allow the element to scroll when its height over the container height
+* @param element
+* Container means the window view that the element displays in.
+* Recommend pass the sheet mountContainer as container
+* @param container
+*/
+function useScrollYOverContainer(element, container) {
+	const updater = useEvent(() => {
+		if (!element || !container) return;
+		const elStyle = element.style;
+		const { y, height } = element.getBoundingClientRect();
+		const containerRect = container.getBoundingClientRect();
+		const scrolled = element.scrollHeight > height;
+		const isOverViewport = y < 0 || y + height > containerRect.height;
+		if (!isOverViewport && !scrolled) {
+			elStyle.overflowY = "";
+			elStyle.maxHeight = "";
+			return;
+		}
+		if (isOverViewport) {
+			elStyle.overflowY = "auto";
+			elStyle.maxHeight = y < 0 ? `${element.scrollHeight + y}px` : `${containerRect.height - y}px`;
+		}
+	});
+	(0, react.useEffect)(() => {
+		if (!(0, _univerjs_design.isBrowser)() || !element || !container) return;
+		updater();
+		const resizeObserver = new ResizeObserver(updater);
+		resizeObserver.observe(element);
+		return () => {
+			resizeObserver.disconnect();
+		};
+	}, [element, container]);
+}
+function useConfigValue(configKey) {
+	const configService = (0, _wendellhu_redi_react_bindings.useDependency)(_univerjs_core.IConfigService);
+	return (0, _wendellhu_redi_react_bindings.useObservable)((0, react.useMemo)(() => configService.subscribeConfigValue$(configKey), [configService]), configService.getConfig(configKey));
+}
+
 //#endregion
 //#region src/views/hooks/update-effect.ts
 /**
@@ -6619,16 +6675,8 @@ function useLatest(value) {
 	ref.current = value;
 	return ref;
 }
-const useVirtualList = (list, options) => {
-	const { containerTarget, itemHeight, overscan = 5 } = options;
+function useVirtualListMetrics(list, itemHeight) {
 	const itemHeightRef = useLatest(itemHeight);
-	const [size, setSize] = (0, react.useState)(null);
-	const scrollTriggerByScrollToFunc = (0, react.useRef)(false);
-	const [targetList, setTargetList] = (0, react.useState)([]);
-	const [wrapperStyle, setWrapperStyle] = (0, react.useState)({
-		height: void 0,
-		marginTop: void 0
-	});
 	const getVisibleCount = (containerHeight, fromIndex) => {
 		if (typeof itemHeightRef.current === "number") return Math.ceil(containerHeight / itemHeightRef.current);
 		let sum = 0;
@@ -6659,29 +6707,18 @@ const useVirtualList = (list, options) => {
 		if (typeof itemHeightRef.current === "number") return index * itemHeightRef.current;
 		return list.slice(0, index).reduce((sum, _, i) => sum + itemHeightRef.current(i, list[i]), 0);
 	};
-	const totalHeight = (0, react.useMemo)(() => {
-		if (isNumber(itemHeightRef.current)) return list.length * itemHeightRef.current;
-		return list.reduce((sum, _, index) => sum + itemHeightRef.current(index, list[index]), 0);
-	}, [list]);
-	const calculateRange = () => {
-		const container = containerTarget.current;
-		if (container) {
-			const { scrollTop, clientHeight } = container;
-			const offset = getOffset(scrollTop);
-			const visibleCount = getVisibleCount(clientHeight, offset);
-			const start = Math.max(0, offset - overscan);
-			const end = Math.min(list.length, offset + visibleCount + overscan);
-			const offsetTop = getDistanceTop(start);
-			setWrapperStyle({
-				height: `${totalHeight - offsetTop}px`,
-				marginTop: `${offsetTop}px`
-			});
-			setTargetList(list.slice(start, end).map((ele, index) => ({
-				data: ele,
-				index: index + start
-			})));
-		}
+	return {
+		getVisibleCount,
+		getOffset,
+		getDistanceTop,
+		totalHeight: (0, react.useMemo)(() => {
+			if (isNumber(itemHeightRef.current)) return list.length * itemHeightRef.current;
+			return list.reduce((sum, _, index) => sum + itemHeightRef.current(index, list[index]), 0);
+		}, [list])
 	};
+}
+function useContainerSize(containerTarget) {
+	const [size, setSize] = (0, react.useState)(null);
 	(0, react.useEffect)(() => {
 		if (containerTarget.current) {
 			const getSize = () => {
@@ -6700,6 +6737,37 @@ const useVirtualList = (list, options) => {
 			};
 		}
 	}, []);
+	return size;
+}
+const useVirtualList = (list, options) => {
+	const { containerTarget, itemHeight, overscan = 5 } = options;
+	const { getVisibleCount, getOffset, getDistanceTop, totalHeight } = useVirtualListMetrics(list, itemHeight);
+	const size = useContainerSize(containerTarget);
+	const scrollTriggerByScrollToFunc = (0, react.useRef)(false);
+	const [targetList, setTargetList] = (0, react.useState)([]);
+	const [wrapperStyle, setWrapperStyle] = (0, react.useState)({
+		height: void 0,
+		marginTop: void 0
+	});
+	const calculateRange = () => {
+		const container = containerTarget.current;
+		if (container) {
+			const { scrollTop, clientHeight } = container;
+			const offset = getOffset(scrollTop);
+			const visibleCount = getVisibleCount(clientHeight, offset);
+			const start = Math.max(0, offset - overscan);
+			const end = Math.min(list.length, offset + visibleCount + overscan);
+			const offsetTop = getDistanceTop(start);
+			setWrapperStyle({
+				height: `${totalHeight - offsetTop}px`,
+				marginTop: `${offsetTop}px`
+			});
+			setTargetList(list.slice(start, end).map((ele, index) => ({
+				data: ele,
+				index: index + start
+			})));
+		}
+	};
 	(0, react.useEffect)(() => {
 		if (!(size === null || size === void 0 ? void 0 : size.width) || !(size === null || size === void 0 ? void 0 : size.height)) return;
 		calculateRange();
@@ -7025,7 +7093,7 @@ const IUIController = (0, _univerjs_core.createIdentifier)("univer.ui.ui-control
 //#endregion
 //#region package.json
 var name = "@univerjs/ui";
-var version = "1.0.4";
+var version = "1.2.0";
 
 //#endregion
 //#region src/views/color-picker/interface.ts
@@ -22697,6 +22765,37 @@ function EmojiPicker(props) {
 	const recentStorageKey = (extraProps === null || extraProps === void 0 ? void 0 : extraProps.recentStorageKey) ?? RECENTS_STORAGE_KEY;
 	const isSearching = deferredQuery.trim().length > 0;
 	const { rows, sectionPositions } = (0, react.useMemo)(() => {
+		function createEmojiVirtualRows(sections, locale) {
+			const rows = [];
+			const sectionPositions = [];
+			let top = 0;
+			sections.forEach((section) => {
+				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
+			};
+		}
 		const normalSections = [{
 			key: "recent",
 			title: localeService.t("ui.emojiPicker.recents"),
@@ -22721,7 +22820,7 @@ function EmojiPicker(props) {
 	]);
 	const [virtualRows, { containerProps, scrollTo, wrapperStyle }] = useVirtualList(rows, {
 		containerTarget: scrollRef,
-		itemHeight: getEmojiVirtualRowHeight,
+		itemHeight: (_index, row) => row.type === "header" ? EMOJI_SECTION_HEADER_HEIGHT : EMOJI_ROW_HEIGHT,
 		overscan: EMOJI_VIRTUAL_OVERSCAN
 	});
 	(0, react.useEffect)(() => {
@@ -22753,6 +22852,16 @@ function EmojiPicker(props) {
 		scrollTo,
 		sectionPositions
 	]);
+	function writeStorageItem(localStorageService, storageKey, value) {
+		localStorageService.setItem(storageKey, value).catch(() => void 0);
+	}
+	function getActiveSectionByScrollTop(sectionPositions, scrollTop) {
+		let active = "recent";
+		sectionPositions.forEach((position) => {
+			if (position.top <= scrollTop + ACTIVE_SECTION_SCROLL_OFFSET) active = position.key;
+		});
+		return active;
+	}
 	const handleSelect = (item, options) => {
 		var _props$onChange, _extraProps$onSelect;
 		const nextRecents = promoteRecentEmoji(recents, item);
@@ -22917,7 +23026,7 @@ function EmojiButton(props) {
 				type: "button",
 				"aria-label": `${title}, ${props.moreTitle}`,
 				title: `${title}, ${props.moreTitle}`,
-				className: "univer-bg-gray-0/90 dark:!univer-bg-gray-800/90 univer-absolute univer-bottom-0 univer-right-0 univer-flex univer-size-3 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-sm univer-border-0 univer-p-0 univer-text-gray-500 hover:univer-bg-gray-100 hover:univer-text-gray-700 focus-visible:univer-outline-none focus-visible:univer-ring-1 focus-visible:univer-ring-primary-600 dark:!univer-text-gray-300 dark:hover:!univer-bg-gray-700",
+				className: "univer-absolute univer-bottom-0 univer-right-0 univer-flex univer-size-3 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-sm univer-border-0 univer-bg-gray-0 univer-p-0 univer-text-gray-500 hover:univer-bg-gray-100 hover:univer-text-gray-700 focus-visible:univer-outline-none focus-visible:univer-ring-1 focus-visible:univer-ring-primary-600 dark:!univer-bg-gray-800 dark:!univer-text-gray-300 dark:hover:!univer-bg-gray-700",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, { className: "!univer-size-2.5" })
 			})
 		})]
@@ -23005,50 +23114,6 @@ function CategoryButton(props) {
 		children: props.children
 	});
 }
-function writeStorageItem(localStorageService, storageKey, value) {
-	localStorageService.setItem(storageKey, value).catch(() => void 0);
-}
-function createEmojiVirtualRows(sections, locale) {
-	const rows = [];
-	const sectionPositions = [];
-	let top = 0;
-	sections.forEach((section) => {
-		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;
-}
 function CategoryIcon(props) {
 	switch (props.category) {
 		case "activity": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.ActivityIcon, {});
@@ -24112,7 +24177,7 @@ function MobileRibbonToolbar(props) {
 						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: (0, _univerjs_design.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", { [_univerjs_design.borderRightClassName]: groupIndex !== activeGroups.length - 1 }),
 							children: groupItems.map((child) => child.item && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: (0, _univerjs_design.clsx)("[&_button]:!univer-font-inherit univer-flex univer-h-8 univer-shrink-0 univer-items-center univer-rounded-md [&_*]:univer-box-border [&_.univer-custom-label]:univer-text-sm [&_.univer-custom-label]:univer-leading-none [&_.univer-toolbar-button-selector-main]:!univer-h-8 [&_.univer-toolbar-button-selector-main]:!univer-rounded-none [&_.univer-toolbar-button-selector-main]:!univer-rounded-l-md [&_.univer-toolbar-button-selector-main]:!univer-px-1.5 [&_.univer-toolbar-button-selector-root]:!univer-h-8 [&_.univer-toolbar-button-selector-root]:univer-overflow-hidden [&_.univer-toolbar-button-selector-root]:!univer-rounded-md [&_.univer-toolbar-button-selector-root]:!univer-pr-0 [&_.univer-toolbar-button-selector-trigger]:!univer-static [&_.univer-toolbar-button-selector-trigger]:!univer-h-8 [&_.univer-toolbar-button-selector-trigger]:!univer-w-6 [&_.univer-toolbar-button-selector-trigger]:!univer-rounded-none [&_.univer-toolbar-button-selector-trigger]:!univer-rounded-r-md [&_.univer-toolbar-selector-root]:!univer-h-8 [&_.univer-toolbar-selector-root]:!univer-gap-1 [&_.univer-toolbar-selector-root]:!univer-rounded-md [&_.univer-toolbar-selector-root]:!univer-px-1.5 [&_.univer-toolbar-selector-trigger]:!univer-pl-0.5 [&_.univer-tooltip]:univer-inline-flex [&_.univer-tooltip]:univer-h-full [&_.univer-tooltip]:univer-items-center [&_[data-u-command]]:!univer-h-8 [&_[data-u-command]]:!univer-min-h-8 [&_[data-u-command]]:!univer-rounded-md [&_[data-u-command]]:!univer-px-1.5 [&_button]:!univer-m-0 [&_button]:!univer-h-8 [&_button]:!univer-min-w-8 [&_button]:!univer-appearance-none [&_button]:!univer-rounded-md [&_button]:!univer-border-0 [&_button]:!univer-bg-transparent [&_button]:!univer-p-0 [&_button]:!univer-px-1.5 [&_button]:!univer-leading-none [&_button]:!univer-outline-none [&_input]:!univer-m-0 [&_input]:!univer-appearance-none [&_input]:!univer-border-0 [&_input]:!univer-bg-transparent [&_input]:!univer-p-0 [&_input]:!univer-leading-none [&_input]:!univer-outline-none"),
+								className: (0, _univerjs_design.clsx)("univer-flex univer-h-8 univer-shrink-0 univer-items-center univer-rounded-md [&_*]:univer-box-border [&_.univer-custom-label]:univer-text-sm [&_.univer-custom-label]:univer-leading-none [&_.univer-toolbar-button-selector-main]:!univer-h-8 [&_.univer-toolbar-button-selector-main]:!univer-rounded-none [&_.univer-toolbar-button-selector-main]:!univer-rounded-l-md [&_.univer-toolbar-button-selector-main]:!univer-px-1.5 [&_.univer-toolbar-button-selector-root]:!univer-h-8 [&_.univer-toolbar-button-selector-root]:univer-overflow-hidden [&_.univer-toolbar-button-selector-root]:!univer-rounded-md [&_.univer-toolbar-button-selector-root]:!univer-pr-0 [&_.univer-toolbar-button-selector-trigger]:!univer-static [&_.univer-toolbar-button-selector-trigger]:!univer-h-8 [&_.univer-toolbar-button-selector-trigger]:!univer-w-6 [&_.univer-toolbar-button-selector-trigger]:!univer-rounded-none [&_.univer-toolbar-button-selector-trigger]:!univer-rounded-r-md [&_.univer-toolbar-selector-root]:!univer-h-8 [&_.univer-toolbar-selector-root]:!univer-gap-1 [&_.univer-toolbar-selector-root]:!univer-rounded-md [&_.univer-toolbar-selector-root]:!univer-px-1.5 [&_.univer-toolbar-selector-trigger]:!univer-pl-0.5 [&_.univer-tooltip]:univer-inline-flex [&_.univer-tooltip]:univer-h-full [&_.univer-tooltip]:univer-items-center [&_[data-u-command]]:!univer-h-8 [&_[data-u-command]]:!univer-min-h-8 [&_[data-u-command]]:!univer-rounded-md [&_[data-u-command]]:!univer-px-1.5 [&_button]:!univer-m-0 [&_button]:!univer-h-8 [&_button]:!univer-min-w-8 [&_button]:!univer-appearance-none [&_button]:!univer-rounded-md [&_button]:!univer-border-0 [&_button]:!univer-bg-transparent [&_button]:!univer-p-0 [&_button]:!univer-px-1.5 [&_button]:!univer-leading-none [&_button]:!univer-outline-none [&_button]:![font-family:inherit] [&_input]:!univer-m-0 [&_input]:!univer-appearance-none [&_input]:!univer-border-0 [&_input]:!univer-bg-transparent [&_input]:!univer-p-0 [&_input]:!univer-leading-none [&_input]:!univer-outline-none"),
 								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileToolbarItem, {
 									...child.item,
 									preserveStrokeWidth: true
@@ -24548,7 +24613,7 @@ function MobileSchemaRow(props) {
 				if (disabled) return;
 				onExecute === null || onExecute === void 0 || onExecute({
 					commandId: menuItem.commandId,
-					value: nextValue,
+					value: typeof value === "number" && (0, _univerjs_core.isRealNum)(nextValue) ? Number(nextValue) : nextValue,
 					id: menuItem.id,
 					label: schema.key,
 					params: menuItem.params
@@ -27787,7 +27852,7 @@ function Slider(props) {
 						onPointerDown: handlePointerDown,
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: (0, _univerjs_design.clsx)("univer-bg-primary-500/60 univer-absolute univer-top-0 univer-h-full univer-rounded-full", isRtl ? "univer-right-0" : "univer-left-0"),
+								className: (0, _univerjs_design.clsx)("univer-absolute univer-top-0 univer-h-full univer-rounded-full univer-bg-primary-500", isRtl ? "univer-right-0" : "univer-left-0"),
 								style: { width: `${sliderOffset}%` }
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
@@ -29871,7 +29936,7 @@ function ProgressBar(props) {
 
 //#endregion
 exports.AnchoredContextMenu = AnchoredContextMenu;
-Object.defineProperty(exports, 'BrowserClipboardService', {
+Object.defineProperty(exports, "BrowserClipboardService", {
   enumerable: true,
   get: function () {
     return BrowserClipboardService;
@@ -29886,7 +29951,7 @@ exports.CanvasPopup = CanvasPopup;
 exports.CanvasPopupService = CanvasPopupService;
 exports.CommonLabel = CommonLabel;
 exports.ComponentContainer = ComponentContainer;
-Object.defineProperty(exports, 'ComponentManager', {
+Object.defineProperty(exports, "ComponentManager", {
   enumerable: true,
   get: function () {
     return ComponentManager;
@@ -29904,31 +29969,31 @@ exports.CustomLabel = CustomLabel;
 exports.CutCommand = CutCommand;
 exports.CutShortcutItem = CutShortcutItem;
 exports.DISABLE_AUTO_FOCUS_KEY = DISABLE_AUTO_FOCUS_KEY;
-Object.defineProperty(exports, 'DesktopBeforeCloseService', {
+Object.defineProperty(exports, "DesktopBeforeCloseService", {
   enumerable: true,
   get: function () {
     return DesktopBeforeCloseService;
   }
 });
-Object.defineProperty(exports, 'DesktopConfirmService', {
+Object.defineProperty(exports, "DesktopConfirmService", {
   enumerable: true,
   get: function () {
     return DesktopConfirmService;
   }
 });
-Object.defineProperty(exports, 'DesktopDialogService', {
+Object.defineProperty(exports, "DesktopDialogService", {
   enumerable: true,
   get: function () {
     return DesktopDialogService;
   }
 });
-Object.defineProperty(exports, 'DesktopGalleryService', {
+Object.defineProperty(exports, "DesktopGalleryService", {
   enumerable: true,
   get: function () {
     return DesktopGalleryService;
   }
 });
-Object.defineProperty(exports, 'DesktopLayoutService', {
+Object.defineProperty(exports, "DesktopLayoutService", {
   enumerable: true,
   get: function () {
     return DesktopLayoutService;
@@ -29936,26 +30001,26 @@ Object.defineProperty(exports, 'DesktopLayoutService', {
 });
 exports.DesktopLocalFileService = DesktopLocalFileService;
 exports.DesktopLocalStorageService = DesktopLocalStorageService;
-Object.defineProperty(exports, 'DesktopMessageService', {
+Object.defineProperty(exports, "DesktopMessageService", {
   enumerable: true,
   get: function () {
     return DesktopMessageService;
   }
 });
-Object.defineProperty(exports, 'DesktopNotificationService', {
+Object.defineProperty(exports, "DesktopNotificationService", {
   enumerable: true,
   get: function () {
     return DesktopNotificationService;
   }
 });
-Object.defineProperty(exports, 'DesktopRibbonService', {
+Object.defineProperty(exports, "DesktopRibbonService", {
   enumerable: true,
   get: function () {
     return DesktopRibbonService;
   }
 });
 exports.DesktopSidebarService = DesktopSidebarService;
-Object.defineProperty(exports, 'DesktopUIController', {
+Object.defineProperty(exports, "DesktopUIController", {
   enumerable: true,
   get: function () {
     return DesktopUIController;
@@ -29967,7 +30032,7 @@ exports.EMOJI_CATEGORIES = EMOJI_CATEGORIES;
 exports.EMOJI_PICKER_COMPONENT = EMOJI_PICKER_COMPONENT;
 exports.EMOJI_RECENT_LIMIT = EMOJI_RECENT_LIMIT;
 exports.EmojiPicker = EmojiPicker;
-Object.defineProperty(exports, 'ErrorController', {
+Object.defineProperty(exports, "ErrorController", {
   enumerable: true,
   get: function () {
     return ErrorController;
@@ -29988,7 +30053,7 @@ exports.FloatingObjectToolbarPosition = FloatingObjectToolbarPosition;
 exports.FontFamily = FontFamily;
 exports.FontFamilyDropdown = FontFamilyDropdown;
 exports.FontFamilyItem = FontFamilyItem;
-Object.defineProperty(exports, 'FontService', {
+Object.defineProperty(exports, "FontService", {
   enumerable: true,
   get: function () {
     return FontService;
@@ -30026,7 +30091,7 @@ exports.IUIPartsService = IUIPartsService;
 exports.IUIRuntimeScopeService = IUIRuntimeScopeService;
 exports.IUnitPresenceUIAdapterRegistry = IUnitPresenceUIAdapterRegistry;
 exports.IWorkbenchService = IWorkbenchService;
-Object.defineProperty(exports, 'IconManager', {
+Object.defineProperty(exports, "IconManager", {
   enumerable: true,
   get: function () {
     return IconManager;
@@ -30036,7 +30101,7 @@ exports.KeyCode = KeyCode;
 exports.MOBILE_UI_MODE = MOBILE_UI_MODE;
 exports.MenuItemType = MenuItemType;
 exports.MenuManagerPosition = MenuManagerPosition;
-Object.defineProperty(exports, 'MenuManagerService', {
+Object.defineProperty(exports, "MenuManagerService", {
   enumerable: true,
   get: function () {
     return MenuManagerService;
@@ -30045,7 +30110,7 @@ Object.defineProperty(exports, 'MenuManagerService', {
 exports.MetaKeys = MetaKeys;
 exports.MobileCanvasGesture = MobileCanvasGesture;
 exports.MobileContextMenu = MobileContextMenu;
-Object.defineProperty(exports, 'MobileDialogService', {
+Object.defineProperty(exports, "MobileDialogService", {
   enumerable: true,
   get: function () {
     return MobileDialogService;
@@ -30066,19 +30131,19 @@ exports.PlatformService = PlatformService;
 exports.PrintFloatDomSingle = PrintFloatDomSingle;
 exports.ProgressBar = ProgressBar;
 exports.RectPopup = RectPopup;
-Object.defineProperty(exports, 'RediConsumer', {
+Object.defineProperty(exports, "RediConsumer", {
   enumerable: true,
   get: function () {
     return _wendellhu_redi_react_bindings.RediConsumer;
   }
 });
-Object.defineProperty(exports, 'RediContext', {
+Object.defineProperty(exports, "RediContext", {
   enumerable: true,
   get: function () {
     return _wendellhu_redi_react_bindings.RediContext;
   }
 });
-Object.defineProperty(exports, 'RediProvider', {
+Object.defineProperty(exports, "RediProvider", {
   enumerable: true,
   get: function () {
     return _wendellhu_redi_react_bindings.RediProvider;
@@ -30096,21 +30161,21 @@ exports.RibbonStartGroup = RibbonStartGroup;
 exports.RibbonViewGroup = RibbonViewGroup;
 exports.SYMBOL_CATEGORIES = SYMBOL_CATEGORIES;
 exports.SYMBOL_PICKER_COMPONENT = SYMBOL_PICKER_COMPONENT;
-Object.defineProperty(exports, 'SharedController', {
+Object.defineProperty(exports, "SharedController", {
   enumerable: true,
   get: function () {
     return SharedController;
   }
 });
 exports.SheetPasteShortKeyCommandName = SheetPasteShortKeyCommandName;
-Object.defineProperty(exports, 'ShortcutPanelController', {
+Object.defineProperty(exports, "ShortcutPanelController", {
   enumerable: true,
   get: function () {
     return ShortcutPanelController;
   }
 });
 exports.ShortcutPanelService = ShortcutPanelService;
-Object.defineProperty(exports, 'ShortcutService', {
+Object.defineProperty(exports, "ShortcutService", {
   enumerable: true,
   get: function () {
     return ShortcutService;
@@ -30131,7 +30196,7 @@ exports.UIPartsService = UIPartsService;
 exports.UIRuntimeScopeService = UIRuntimeScopeService;
 exports.UI_PLUGIN_CONFIG_KEY = UI_PLUGIN_CONFIG_KEY;
 exports.UNI_DISABLE_CHANGING_FOCUS_KEY = UNI_DISABLE_CHANGING_FOCUS_KEY;
-Object.defineProperty(exports, 'UndoRedoGroupService', {
+Object.defineProperty(exports, "UndoRedoGroupService", {
   enumerable: true,
   get: function () {
     return UndoRedoGroupService;
@@ -30139,25 +30204,25 @@ Object.defineProperty(exports, 'UndoRedoGroupService', {
 });
 exports.UndoShortcutItem = UndoShortcutItem;
 exports.UnitPresenceUIAdapterRegistry = UnitPresenceUIAdapterRegistry;
-Object.defineProperty(exports, 'UniverMobileUIPlugin', {
+Object.defineProperty(exports, "UniverMobileUIPlugin", {
   enumerable: true,
   get: function () {
     return UniverMobileUIPlugin;
   }
 });
-Object.defineProperty(exports, 'UniverUIPlugin', {
+Object.defineProperty(exports, "UniverUIPlugin", {
   enumerable: true,
   get: function () {
     return UniverUIPlugin;
   }
 });
-Object.defineProperty(exports, 'WithDependency', {
+Object.defineProperty(exports, "WithDependency", {
   enumerable: true,
   get: function () {
     return _wendellhu_redi_react_bindings.WithDependency;
   }
 });
-Object.defineProperty(exports, 'WorkbenchService', {
+Object.defineProperty(exports, "WorkbenchService", {
   enumerable: true,
   get: function () {
     return WorkbenchService;
@@ -30166,13 +30231,13 @@ Object.defineProperty(exports, 'WorkbenchService', {
 exports.ZIndexManager = ZIndexManager;
 exports.ZoomInput = ZoomInput;
 exports.bindFormatPainterCanvas = bindFormatPainterCanvas;
-Object.defineProperty(exports, 'connectDependencies', {
+Object.defineProperty(exports, "connectDependencies", {
   enumerable: true,
   get: function () {
     return _wendellhu_redi_react_bindings.connectDependencies;
   }
 });
-Object.defineProperty(exports, 'connectInjector', {
+Object.defineProperty(exports, "connectInjector", {
   enumerable: true,
   get: function () {
     return _wendellhu_redi_react_bindings.connectInjector;
@@ -30217,14 +30282,14 @@ exports.useClickOutSide = useClickOutSide;
 exports.useComponentsOfPart = useComponentsOfPart;
 exports.useConfigValue = useConfigValue;
 exports.useDebounceFn = useDebounceFn;
-Object.defineProperty(exports, 'useDependency', {
+Object.defineProperty(exports, "useDependency", {
   enumerable: true,
   get: function () {
     return _wendellhu_redi_react_bindings.useDependency;
   }
 });
 exports.useEvent = useEvent;
-Object.defineProperty(exports, 'useInjector', {
+Object.defineProperty(exports, "useInjector", {
   enumerable: true,
   get: function () {
     return _wendellhu_redi_react_bindings.useInjector;
@@ -30232,7 +30297,7 @@ Object.defineProperty(exports, 'useInjector', {
 });
 exports.useMobileCanvasPanel = useMobileCanvasPanel;
 exports.useMobileCanvasViewport = useMobileCanvasViewport;
-Object.defineProperty(exports, 'useObservable', {
+Object.defineProperty(exports, "useObservable", {
   enumerable: true,
   get: function () {
     return _wendellhu_redi_react_bindings.useObservable;
@@ -30242,7 +30307,7 @@ exports.useObservableRef = useObservableRef;
 exports.useScrollYOverContainer = useScrollYOverContainer;
 exports.useSidebarClick = useSidebarClick;
 exports.useToolbarItemStatus = useToolbarItemStatus;
-Object.defineProperty(exports, 'useUpdateBinder', {
+Object.defineProperty(exports, "useUpdateBinder", {
   enumerable: true,
   get: function () {
     return _wendellhu_redi_react_bindings.useUpdateBinder;