@univerjs/ui 1.1.0 → 1.2.0

package/lib/index.js

@@ -1834,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);
@@ -1853,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) : "";
@@ -1977,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)) })] })]
@@ -3220,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", {
@@ -3233,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);
 		})
@@ -4928,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", {
@@ -5054,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,
@@ -6369,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",
@@ -6400,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, {})
@@ -6629,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;
@@ -6669,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 = () => {
@@ -6710,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();
@@ -7035,7 +7092,7 @@ const IUIController = createIdentifier("univer.ui.ui-controller");
 //#endregion
 //#region package.json
 var name = "@univerjs/ui";
-var version = "1.1.0";
+var version = "1.2.0";
 
 //#endregion
 //#region src/views/color-picker/interface.ts
@@ -22707,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"),
@@ -22731,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(() => {
@@ -22763,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);
@@ -22927,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" })
 			})
 		})]
@@ -23015,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, {});
@@ -24122,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
@@ -27797,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", {

package/lib/types/views/emoji-picker/EmojiPicker.d.ts

@@ -13,8 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import type { IPopup } from '../../services/popup/canvas-popup.service';
 import { Dropdown } from '@univerjs/design';
+import type { IPopup } from '../../services/popup/canvas-popup.service';
 export declare const EMOJI_PICKER_COMPONENT = "ui.emoji-picker";
 interface IEmojiPickerPopupProps {
     activeEmoji?: string;

package/lib/types/views/emoji-picker/emoji-picker-utils.d.ts

@@ -35,7 +35,7 @@ export declare const EMOJI_SKIN_TONE_OPTIONS: ReadonlyArray<IEmojiVariant & {
 export declare const EMOJI_RECENT_LIMIT = 11;
 export declare const EMOJI_CATEGORIES: {
     key: EmojiCategory;
-    titleKey: "ui.row" | "ui.column" | "ui.clearFormatting" | "ui.formatPainter" | "ui.common-edit" | "ui.toggle-shortcut-panel" | "ui.global-shortcut" | "ui.fontFamily.not-supported" | "ui.accessibility.zoom" | "ui.accessibility.menu" | "ui.accessibility.zoomIn" | "ui.accessibility.zoomOut" | "ui.accessibility.resetZoom" | "ui.ribbon.start" | "ui.ribbon.view" | "ui.ribbon.insert" | "ui.ribbon.data" | "ui.ribbon.startDesc" | "ui.ribbon.insertDesc" | "ui.ribbon.formulas" | "ui.ribbon.formulasDesc" | "ui.ribbon.dataDesc" | "ui.ribbon.viewDesc" | "ui.ribbon.others" | "ui.ribbon.othersDesc" | "ui.ribbon.more" | "ui.clipboard.authentication.title" | "ui.clipboard.authentication.content" | "ui.objectPermission.all" | "ui.objectPermission.title" | "ui.objectPermission.paragraph" | "ui.objectPermission.table" | "ui.objectPermission.page" | "ui.objectPermission.empty" | "ui.objectPermission.field" | "ui.objectPermission.record" | "ui.objectPermission.view" | "ui.objectPermission.error" | "ui.objectPermission.search" | "ui.objectPermission.document" | "ui.objectPermission.remove" | "ui.objectPermission.owner" | "ui.objectPermission.members" | "ui.objectPermission.edit" | "ui.objectPermission.comment" | "ui.objectPermission.cancel" | "ui.objectPermission.copy" | "ui.objectPermission.more" | "ui.objectPermission.operationDenied" | "ui.objectPermission.roleOwner" | "ui.objectPermission.roleEditor" | "ui.objectPermission.selectedCount" | "ui.objectPermission.searchPeople" | "ui.objectPermission.noMatchingPeople" | "ui.objectPermission.loadMore" | "ui.objectPermission.fileHint" | "ui.objectPermission.documentParent" | "ui.objectPermission.paragraphParent" | "ui.objectPermission.documentObjectParent" | "ui.objectPermission.slideParent" | "ui.objectPermission.slideObjectParent" | "ui.objectPermission.baseParent" | "ui.objectPermission.baseObjectParent" | "ui.objectPermission.recordParent" | "ui.objectPermission.boardParent" | "ui.objectPermission.ownerInherit" | "ui.objectPermission.peopleError" | "ui.objectPermission.section" | "ui.objectPermission.entity" | "ui.objectPermission.presentation" | "ui.objectPermission.master" | "ui.objectPermission.base" | "ui.objectPermission.board" | "ui.objectPermission.objectName" | "ui.objectPermission.save" | "ui.objectPermission.saving" | "ui.objectPermission.loading" | "ui.objectPermission.conflict" | "ui.objectPermission.reload" | "ui.objectPermission.denied" | "ui.objectPermission.print" | "ui.objectPermission.export" | "ui.objectPermission.parentHint" | "ui.featureSearch.title" | "ui.featureSearch.empty" | "ui.featureSearch.placeholder" | "ui.featureSearch.ribbon" | "ui.featureSearch.contextMenu" | "ui.emojiPicker.search" | "ui.emojiPicker.objects" | "ui.emojiPicker.animals" | "ui.emojiPicker.food" | "ui.emojiPicker.random" | "ui.emojiPicker.recents" | "ui.emojiPicker.emojis" | "ui.emojiPicker.activities" | "ui.emojiPicker.places" | "ui.emojiPicker.symbols" | "ui.emojiPicker.searchResults" | "ui.emojiPicker.noResults" | `ui.emojiPicker.emojiSearchIndex.${string}` | `ui.emojiPicker.emojiTitles.${string}` | "ui.symbolPicker.mathematics" | "ui.symbolPicker.greek" | "ui.symbolPicker.common" | "ui.toolbar.heading.title" | "ui.toolbar.heading.normal" | "ui.toolbar.heading.subTitle" | "ui.shortcut-panel.title" | "ui.shortcut.copy" | "ui.shortcut.cut" | "ui.shortcut.paste" | "ui.shortcut.shortcut-panel" | "ui.shortcut.undo" | "ui.shortcut.redo" | "ui.navigation.back" | "ui.navigation.next" | "ui.navigation.previous" | "ui.sidebar.close" | "ui.sidebar.resize" | "ui.sidebar.panel" | "ui.beforeClose.title" | "ui.rangeSelector.cancel";
+    titleKey: "ui.row" | "ui.column" | "ui.clearFormatting" | "ui.formatPainter" | "ui.common-edit" | "ui.toggle-shortcut-panel" | "ui.global-shortcut" | "ui.fontFamily.not-supported" | "ui.navigation.back" | "ui.navigation.next" | "ui.navigation.previous" | "ui.toolbar.heading.title" | "ui.toolbar.heading.normal" | "ui.toolbar.heading.subTitle" | "ui.accessibility.menu" | "ui.accessibility.zoom" | "ui.accessibility.zoomIn" | "ui.accessibility.zoomOut" | "ui.accessibility.resetZoom" | "ui.ribbon.start" | "ui.ribbon.view" | "ui.ribbon.insert" | "ui.ribbon.data" | "ui.ribbon.startDesc" | "ui.ribbon.insertDesc" | "ui.ribbon.formulas" | "ui.ribbon.formulasDesc" | "ui.ribbon.dataDesc" | "ui.ribbon.viewDesc" | "ui.ribbon.others" | "ui.ribbon.othersDesc" | "ui.ribbon.more" | "ui.clipboard.authentication.title" | "ui.clipboard.authentication.content" | "ui.objectPermission.all" | "ui.objectPermission.title" | "ui.objectPermission.paragraph" | "ui.objectPermission.table" | "ui.objectPermission.page" | "ui.objectPermission.empty" | "ui.objectPermission.field" | "ui.objectPermission.record" | "ui.objectPermission.view" | "ui.objectPermission.error" | "ui.objectPermission.search" | "ui.objectPermission.document" | "ui.objectPermission.remove" | "ui.objectPermission.owner" | "ui.objectPermission.members" | "ui.objectPermission.edit" | "ui.objectPermission.comment" | "ui.objectPermission.cancel" | "ui.objectPermission.copy" | "ui.objectPermission.base" | "ui.objectPermission.presentation" | "ui.objectPermission.section" | "ui.objectPermission.loading" | "ui.objectPermission.more" | "ui.objectPermission.operationDenied" | "ui.objectPermission.roleOwner" | "ui.objectPermission.roleEditor" | "ui.objectPermission.selectedCount" | "ui.objectPermission.searchPeople" | "ui.objectPermission.noMatchingPeople" | "ui.objectPermission.loadMore" | "ui.objectPermission.fileHint" | "ui.objectPermission.documentParent" | "ui.objectPermission.paragraphParent" | "ui.objectPermission.documentObjectParent" | "ui.objectPermission.slideParent" | "ui.objectPermission.slideObjectParent" | "ui.objectPermission.baseParent" | "ui.objectPermission.baseObjectParent" | "ui.objectPermission.recordParent" | "ui.objectPermission.boardParent" | "ui.objectPermission.ownerInherit" | "ui.objectPermission.peopleError" | "ui.objectPermission.entity" | "ui.objectPermission.master" | "ui.objectPermission.board" | "ui.objectPermission.objectName" | "ui.objectPermission.save" | "ui.objectPermission.saving" | "ui.objectPermission.conflict" | "ui.objectPermission.reload" | "ui.objectPermission.denied" | "ui.objectPermission.print" | "ui.objectPermission.export" | "ui.objectPermission.parentHint" | "ui.featureSearch.title" | "ui.featureSearch.empty" | "ui.featureSearch.placeholder" | "ui.featureSearch.contextMenu" | "ui.featureSearch.ribbon" | "ui.emojiPicker.search" | "ui.emojiPicker.objects" | "ui.emojiPicker.animals" | "ui.emojiPicker.food" | "ui.emojiPicker.random" | "ui.emojiPicker.recents" | "ui.emojiPicker.emojis" | "ui.emojiPicker.activities" | "ui.emojiPicker.places" | "ui.emojiPicker.symbols" | "ui.emojiPicker.searchResults" | "ui.emojiPicker.noResults" | `ui.emojiPicker.emojiSearchIndex.${string}` | `ui.emojiPicker.emojiTitles.${string}` | "ui.symbolPicker.mathematics" | "ui.symbolPicker.greek" | "ui.symbolPicker.common" | "ui.shortcut-panel.title" | "ui.shortcut.copy" | "ui.shortcut.cut" | "ui.shortcut.paste" | "ui.shortcut.shortcut-panel" | "ui.shortcut.undo" | "ui.shortcut.redo" | "ui.sidebar.close" | "ui.sidebar.resize" | "ui.sidebar.panel" | "ui.beforeClose.title" | "ui.rangeSelector.cancel";
 }[];
 export declare function getDefaultRecentEmojis(): IEmojiItem[];
 export declare function getAllEmojis(): IEmojiItem[];