@univerjs/ui 1.0.4 → 1.2.0

package/lib/index.js

@@ -55,7 +55,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) {
@@ -66,7 +66,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];
@@ -79,14 +79,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,
@@ -97,7 +97,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);
@@ -105,7 +105,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);
@@ -307,7 +307,8 @@ const ToggleShortcutPanelOperation = {
 			shortcutPanelService.open();
 			sidebarService.open({
 				header: { title: "ui.shortcut-panel.title" },
-				children: { label: ShortcutPanelComponentName }
+				children: { label: ShortcutPanelComponentName },
+				onClose: () => shortcutPanelService.close()
 			});
 		}
 		return true;
@@ -1673,27 +1674,33 @@ let DesktopRibbonService = class DesktopRibbonService extends Disposable {
 		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() {
@@ -1703,15 +1710,16 @@ let DesktopRibbonService = class DesktopRibbonService extends Disposable {
 	}
 	_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);
 				}
 			}
 		}
@@ -1723,10 +1731,7 @@ let DesktopRibbonService = class DesktopRibbonService extends Disposable {
 		}
 		this._hiddenSubscription = combineLatest(hiddenObservableMap.map((hidden$) => hidden$.pipe(startWith$1(false)))).pipe(distinctUntilChanged$1(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 = {
@@ -1742,7 +1747,7 @@ let DesktopRibbonService = class DesktopRibbonService extends Disposable {
 					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);
 						}
@@ -1763,6 +1768,10 @@ let DesktopRibbonService = class DesktopRibbonService extends Disposable {
 			}
 			this._setRibbon(newRibbon);
 		});
+		if (this._disposed) {
+			this._hiddenSubscription.unsubscribe();
+			this._hiddenSubscription = null;
+		}
 	}
 	_filterContextualTabs(ribbon) {
 		this._contextualTabs.clear();
@@ -1789,6 +1798,10 @@ let DesktopRibbonService = class DesktopRibbonService extends Disposable {
 	}
 	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([]);
@@ -1796,7 +1809,6 @@ let DesktopRibbonService = class DesktopRibbonService extends Disposable {
 		this._activatedTab$.complete();
 		this._collapsedIds$.complete();
 		this._fakeToolbarVisible$.complete();
-		super.dispose();
 	}
 };
 DesktopRibbonService = __decorate([__decorateParam(0, IMenuManagerService), __decorateParam(1, IUniverInstanceService)], DesktopRibbonService);
@@ -1822,17 +1834,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 && Tools.diffValue(candidate.params, item.params)) === index);
-}
 function FeatureSearch() {
 	const menuManagerService = useDependency(IMenuManagerService);
 	const localeService = useDependency(LocaleService);
@@ -1841,6 +1859,15 @@ function FeatureSearch() {
 	const layoutService = useDependency(ILayoutService);
 	const ribbonService = useDependency(IRibbonService);
 	const items$ = 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 && Tools.diffValue(candidate.params, item.params)) === index);
+		}
 		function getItemTitle(item) {
 			const titleKey = item.title ?? item.tooltip ?? item.description;
 			return titleKey ? localeService.t(titleKey) : "";
@@ -1965,7 +1992,7 @@ function FeatureSearch() {
 					children: item.title
 				})]
 			}), item.path && /* @__PURE__ */ 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)) })] })]
@@ -3208,6 +3235,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 = useDependency(LocaleService);
 	return /* @__PURE__ */ jsx("div", {
@@ -3221,7 +3263,7 @@ function ClassicMenu({ ribbon, activatedTab, onSelectTab }) {
 				"aria-selected": isActive,
 				title: localeService.t(group.title || group.key),
 				onClick: () => onSelectTab(group),
-				className: 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: 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);
 		})
@@ -4050,7 +4092,7 @@ const toolbarSelectorRootVariants = cva("univer-toolbar-selector-root univer-ani
 			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: ""
 		}
 	},
@@ -4321,7 +4363,7 @@ function RibbonGrid({ groups, title, className, ...props }) {
 			const placements = placeRibbonGridItems(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",
+				className: "univer-relative univer-box-border univer-flex 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-[repeat(2,1.5rem)] univer-content-center univer-gap-2 univer-py-2 [&>div>span>span]:univer-h-full",
@@ -4740,52 +4782,6 @@ var ContextMenuHostService = class extends 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`;
-		}
-	});
-	useEffect(() => {
-		if (!isBrowser() || !element || !container) return;
-		updater();
-		const resizeObserver = new ResizeObserver(updater);
-		resizeObserver.observe(element);
-		return () => {
-			resizeObserver.disconnect();
-		};
-	}, [element, container]);
-}
-function useConfigValue(configKey) {
-	const configService = useDependency(IConfigService);
-	return useObservable(useMemo(() => configService.subscribeConfigValue$(configKey), [configService]), configService.getConfig(configKey));
-}
-
 //#endregion
 //#region src/views/hooks/prevent-browser-zoom.ts
 /**
@@ -4962,6 +4958,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 = 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", {
@@ -5088,7 +5099,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__ */ 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__ */ jsx(QuickTileMenuItem, {
 			menuSchema,
 			activeItemIds,
@@ -5451,7 +5462,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);
 	useEffect(() => {
 		if (!menuElement) return;
 		return preventBrowserZoomInContainers([menuElement]);
@@ -6404,7 +6414,7 @@ function Sidebar() {
 		}),
 		style: { width: isDragging ? void 0 : width },
 		children: [(options === null || options === void 0 ? void 0 : options.visible) && /* @__PURE__ */ 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",
@@ -6435,7 +6445,7 @@ function Sidebar() {
 					children: [options === null || options === void 0 ? void 0 : options.header, /* @__PURE__ */ 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__ */ jsx(CloseIcon, {})
@@ -6543,6 +6553,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`;
+		}
+	});
+	useEffect(() => {
+		if (!isBrowser() || !element || !container) return;
+		updater();
+		const resizeObserver = new ResizeObserver(updater);
+		resizeObserver.observe(element);
+		return () => {
+			resizeObserver.disconnect();
+		};
+	}, [element, container]);
+}
+function useConfigValue(configKey) {
+	const configService = useDependency(IConfigService);
+	return useObservable(useMemo(() => configService.subscribeConfigValue$(configKey), [configService]), configService.getConfig(configKey));
+}
+
 //#endregion
 //#region src/views/hooks/update-effect.ts
 /**
@@ -6618,16 +6674,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] = useState(null);
-	const scrollTriggerByScrollToFunc = useRef(false);
-	const [targetList, setTargetList] = useState([]);
-	const [wrapperStyle, setWrapperStyle] = 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;
@@ -6658,29 +6706,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 = 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: 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] = useState(null);
 	useEffect(() => {
 		if (containerTarget.current) {
 			const getSize = () => {
@@ -6699,6 +6736,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 = useRef(false);
+	const [targetList, setTargetList] = useState([]);
+	const [wrapperStyle, setWrapperStyle] = 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
+			})));
+		}
+	};
 	useEffect(() => {
 		if (!(size === null || size === void 0 ? void 0 : size.width) || !(size === null || size === void 0 ? void 0 : size.height)) return;
 		calculateRange();
@@ -7024,7 +7092,7 @@ const IUIController = createIdentifier("univer.ui.ui-controller");
 //#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
@@ -22696,6 +22764,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 } = 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"),
@@ -22720,7 +22819,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
 	});
 	useEffect(() => {
@@ -22752,6 +22851,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);
@@ -22916,7 +23025,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__ */ jsx(MoreDownIcon, { className: "!univer-size-2.5" })
 			})
 		})]
@@ -23004,50 +23113,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__ */ jsx(ActivityIcon, {});
@@ -24111,7 +24176,7 @@ function MobileRibbonToolbar(props) {
 						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 }),
 							children: groupItems.map((child) => child.item && /* @__PURE__ */ jsx("div", {
-								className: 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: 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__ */ jsx(MobileToolbarItem, {
 									...child.item,
 									preserveStrokeWidth: true
@@ -24547,7 +24612,7 @@ function MobileSchemaRow(props) {
 				if (disabled) return;
 				onExecute === null || onExecute === void 0 || onExecute({
 					commandId: menuItem.commandId,
-					value: nextValue,
+					value: typeof value === "number" && isRealNum(nextValue) ? Number(nextValue) : nextValue,
 					id: menuItem.id,
 					label: schema.key,
 					params: menuItem.params
@@ -27786,7 +27851,7 @@ function Slider(props) {
 						onPointerDown: handlePointerDown,
 						children: [
 							/* @__PURE__ */ jsx("div", {
-								className: 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: 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__ */ jsx("a", {