@univerjs/sheets-formula-ui 1.0.0-alpha.3 → 1.0.0-alpha.4

package/lib/cjs/index.js

@@ -833,11 +833,12 @@ function createInsertFunctionCategoryMenuItemFactory(functionType, categoryKey,
 		} catch {
 			selections = [];
 		}
+		const localeKey = `sheets-formula-ui.functionType.${categoryKey}`;
 		return {
 			id: `${InsertFunctionOperation.id}.${categoryKey}`,
 			commandId: InsertFunctionOperation.id,
-			title: `sheets-formula-ui.functionType.${categoryKey}`,
-			tooltip: "sheets-formula-ui.insert.tooltip",
+			title: localeKey,
+			tooltip: localeKey,
 			icon,
 			type: _univerjs_ui.MenuItemType.SELECTOR,
 			selections,
@@ -845,16 +846,16 @@ function createInsertFunctionCategoryMenuItemFactory(functionType, categoryKey,
 		};
 	};
 }
-const InsertFinancialFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(_univerjs_engine_formula.FunctionType.Financial, "financial");
-const InsertLogicalFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(_univerjs_engine_formula.FunctionType.Logical, "logical");
-const InsertTextFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(_univerjs_engine_formula.FunctionType.Text, "text");
-const InsertDateFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(_univerjs_engine_formula.FunctionType.Date, "date");
-const InsertLookupFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(_univerjs_engine_formula.FunctionType.Lookup, "lookup");
-const InsertMathFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(_univerjs_engine_formula.FunctionType.Math, "math");
-const InsertStatisticalFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(_univerjs_engine_formula.FunctionType.Statistical, "statistical");
-const InsertEngineeringFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(_univerjs_engine_formula.FunctionType.Engineering, "engineering");
-const InsertInformationFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(_univerjs_engine_formula.FunctionType.Information, "information");
-const InsertDatabaseFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(_univerjs_engine_formula.FunctionType.Database, "database");
+const InsertFinancialFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(_univerjs_engine_formula.FunctionType.Financial, "financial", "FinancialFunctionIcon");
+const InsertLogicalFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(_univerjs_engine_formula.FunctionType.Logical, "logical", "LogicalFunctionIcon");
+const InsertTextFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(_univerjs_engine_formula.FunctionType.Text, "text", "TextFunctionIcon");
+const InsertDateFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(_univerjs_engine_formula.FunctionType.Date, "date", "DateFunctionIcon");
+const InsertLookupFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(_univerjs_engine_formula.FunctionType.Lookup, "lookup", "LookupFunctionIcon");
+const InsertMathFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(_univerjs_engine_formula.FunctionType.Math, "math", "MathFunctionIcon");
+const InsertStatisticalFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(_univerjs_engine_formula.FunctionType.Statistical, "statistical", "StatisticalFunctionIcon");
+const InsertEngineeringFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(_univerjs_engine_formula.FunctionType.Engineering, "engineering", "EngineeringFunctionIcon");
+const InsertInformationFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(_univerjs_engine_formula.FunctionType.Information, "information", "InformationFunctionIcon");
+const InsertDatabaseFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(_univerjs_engine_formula.FunctionType.Database, "database", "DatabaseFunctionIcon");
 function AllFunctionsMenuItemFactory(accessor) {
 	return {
 		id: MoreFunctionsOperation.id,
@@ -910,83 +911,43 @@ const menuSchema = {
 		},
 		[`${InsertFunctionOperation.id}.financial`]: {
 			order: 1,
-			menuItemFactory: InsertFinancialFunctionMenuItemFactory,
-			[MoreFunctionsOperation.id]: {
-				order: 0,
-				menuItemFactory: AllFunctionsMenuItemFactory
-			}
+			menuItemFactory: InsertFinancialFunctionMenuItemFactory
 		},
 		[`${InsertFunctionOperation.id}.logical`]: {
 			order: 2,
-			menuItemFactory: InsertLogicalFunctionMenuItemFactory,
-			[MoreFunctionsOperation.id]: {
-				order: 0,
-				menuItemFactory: AllFunctionsMenuItemFactory
-			}
+			menuItemFactory: InsertLogicalFunctionMenuItemFactory
 		},
 		[`${InsertFunctionOperation.id}.text`]: {
 			order: 3,
-			menuItemFactory: InsertTextFunctionMenuItemFactory,
-			[MoreFunctionsOperation.id]: {
-				order: 0,
-				menuItemFactory: AllFunctionsMenuItemFactory
-			}
+			menuItemFactory: InsertTextFunctionMenuItemFactory
 		},
 		[`${InsertFunctionOperation.id}.date`]: {
 			order: 4,
-			menuItemFactory: InsertDateFunctionMenuItemFactory,
-			[MoreFunctionsOperation.id]: {
-				order: 0,
-				menuItemFactory: AllFunctionsMenuItemFactory
-			}
+			menuItemFactory: InsertDateFunctionMenuItemFactory
 		},
 		[`${InsertFunctionOperation.id}.lookup`]: {
 			order: 5,
-			menuItemFactory: InsertLookupFunctionMenuItemFactory,
-			[MoreFunctionsOperation.id]: {
-				order: 0,
-				menuItemFactory: AllFunctionsMenuItemFactory
-			}
+			menuItemFactory: InsertLookupFunctionMenuItemFactory
 		},
 		[`${InsertFunctionOperation.id}.math`]: {
 			order: 6,
-			menuItemFactory: InsertMathFunctionMenuItemFactory,
-			[MoreFunctionsOperation.id]: {
-				order: 0,
-				menuItemFactory: AllFunctionsMenuItemFactory
-			}
+			menuItemFactory: InsertMathFunctionMenuItemFactory
 		},
 		[`${InsertFunctionOperation.id}.statistical`]: {
 			order: 7,
-			menuItemFactory: InsertStatisticalFunctionMenuItemFactory,
-			[MoreFunctionsOperation.id]: {
-				order: 0,
-				menuItemFactory: AllFunctionsMenuItemFactory
-			}
+			menuItemFactory: InsertStatisticalFunctionMenuItemFactory
 		},
 		[`${InsertFunctionOperation.id}.engineering`]: {
 			order: 8,
-			menuItemFactory: InsertEngineeringFunctionMenuItemFactory,
-			[MoreFunctionsOperation.id]: {
-				order: 0,
-				menuItemFactory: AllFunctionsMenuItemFactory
-			}
+			menuItemFactory: InsertEngineeringFunctionMenuItemFactory
 		},
 		[`${InsertFunctionOperation.id}.information`]: {
 			order: 9,
-			menuItemFactory: InsertInformationFunctionMenuItemFactory,
-			[MoreFunctionsOperation.id]: {
-				order: 0,
-				menuItemFactory: AllFunctionsMenuItemFactory
-			}
+			menuItemFactory: InsertInformationFunctionMenuItemFactory
 		},
 		[`${InsertFunctionOperation.id}.database`]: {
 			order: 10,
-			menuItemFactory: InsertDatabaseFunctionMenuItemFactory,
-			[MoreFunctionsOperation.id]: {
-				order: 0,
-				menuItemFactory: AllFunctionsMenuItemFactory
-			}
+			menuItemFactory: InsertDatabaseFunctionMenuItemFactory
 		}
 	},
 	[_univerjs_sheets_ui.COPY_SPECIAL_MENU_ID]: { [SheetCopyFormulaOnlyCommand.id]: {
@@ -1002,7 +963,7 @@ const menuSchema = {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-formula-ui";
-var version = "1.0.0-alpha.3";
+var version = "1.0.0-alpha.4";
 
 //#endregion
 //#region src/config/config.ts
@@ -3296,7 +3257,7 @@ function SearchFunctionFactory(props, ref) {
 	const shortcutService = (0, _univerjs_ui.useDependency)(_univerjs_ui.IShortcutService);
 	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
 	const { searchList, searchText, handlerFormulaReplace, reset: resetFormulaSearch } = useFormulaSearch(isFocus, sequenceNodes, editor);
-	const visible = (0, react.useMemo)(() => !!searchList.length, [searchList]);
+	const visible = searchList.length > 0;
 	const ulRef = (0, react.useRef)(void 0);
 	const [active, setActive] = (0, react.useState)(0);
 	const isEnableMouseEnterOrOut = (0, react.useRef)(false);
@@ -3482,7 +3443,7 @@ function syncCounterpartFormulaEditorSelection(editorService, editorId, selectio
 	(_editorService$getEdi = editorService.getEditor(syncEditorId)) === null || _editorService$getEdi === void 0 || _editorService$getEdi.setSelectionRanges(selections, false);
 }
 const FormulaEditor = (0, react.forwardRef)((props, ref) => {
-	var _document$getBody$dat, _document$getBody, _configService$getCon, _configService$getCon2;
+	var _document$getBody$dat2, _document$getBody2, _configService$getCon, _configService$getCon2;
 	const { errorText, initValue, unitId, subUnitId, isFocus: _isFocus = true, isSupportAcrossSheet = false, onFocus = _univerjs_core.noop, onBlur = _univerjs_core.noop, onChange: propOnChange, onVerify, className, editorId: propEditorId, moveCursor = true, onFormulaSelectingChange: propOnFormulaSelectingChange, keyboardEventConfig, onMoveInEditor, resetSelectionOnBlur = true, autoScrollbar = true, isSingle = true, disableSelectionOnClick = false, autofocus = true, disableContextMenu, style, borderless = false, canvasStyle } = props;
 	const editorService = (0, _univerjs_ui.useDependency)(_univerjs_docs_ui.IEditorService);
 	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
@@ -3500,12 +3461,14 @@ const FormulaEditor = (0, react.forwardRef)((props, ref) => {
 	const [isFocus, setIsFocus] = (0, react.useState)(_isFocus);
 	const formulaEditorContainerRef = (0, react.useRef)(null);
 	const editorId = (0, react.useMemo)(() => propEditorId !== null && propEditorId !== void 0 ? propEditorId : (0, _univerjs_core.createInternalEditorID)(`${_univerjs_sheets_ui.EMBEDDING_FORMULA_EDITOR}-${(0, _univerjs_core.generateRandomId)(4)}`), []);
-	const isError = (0, react.useMemo)(() => errorText !== void 0, [errorText]);
+	const isError = errorText !== void 0;
 	const univerInstanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
 	const document = univerInstanceService.getUnit(editorId);
-	(0, _univerjs_ui.useObservable)(document === null || document === void 0 ? void 0 : document.change$);
 	const getFormulaToken = useFormulaToken();
-	const formulaText = _univerjs_core.BuildTextUtils.transform.getPlainText((_document$getBody$dat = document === null || document === void 0 || (_document$getBody = document.getBody()) === null || _document$getBody === void 0 ? void 0 : _document$getBody.dataStream) !== null && _document$getBody$dat !== void 0 ? _document$getBody$dat : "");
+	const formulaText = (0, _univerjs_ui.useObservable)(document ? () => document.change$.pipe((0, rxjs.map)(() => {
+		var _document$getBody$dat, _document$getBody;
+		return _univerjs_core.BuildTextUtils.transform.getPlainText((_document$getBody$dat = (_document$getBody = document.getBody()) === null || _document$getBody === void 0 ? void 0 : _document$getBody.dataStream) !== null && _document$getBody$dat !== void 0 ? _document$getBody$dat : "");
+	})) : null, _univerjs_core.BuildTextUtils.transform.getPlainText((_document$getBody$dat2 = document === null || document === void 0 || (_document$getBody2 = document.getBody()) === null || _document$getBody2 === void 0 ? void 0 : _document$getBody2.dataStream) !== null && _document$getBody$dat2 !== void 0 ? _document$getBody$dat2 : ""), false, [document]);
 	const formulaTextRef = useStateRef(formulaText);
 	const formulaWithoutEqualSymbol = (0, react.useMemo)(() => getFormulaText(formulaText), [formulaText]);
 	const sequenceNodes = (0, react.useMemo)(() => getFormulaToken(formulaWithoutEqualSymbol), [formulaWithoutEqualSymbol, getFormulaToken]);
@@ -3523,8 +3486,8 @@ const FormulaEditor = (0, react.forwardRef)((props, ref) => {
 	const isFocusing = docSelectionRenderService === null || docSelectionRenderService === void 0 ? void 0 : docSelectionRenderService.isFocusing;
 	const currentDoc = (0, _univerjs_ui.useObservable)((0, react.useMemo)(() => univerInstanceService.getCurrentTypeOfUnit$(_univerjs_core.UniverInstanceType.UNIVER_DOC), [univerInstanceService]));
 	const docFocusing = (currentDoc === null || currentDoc === void 0 ? void 0 : currentDoc.getUnitId()) === editorId;
-	const refSelections = (0, react.useRef)([]);
-	const getRefSelections = (0, _univerjs_ui.useEvent)(() => refSelections.current);
+	const refSelectionsRef = (0, react.useRef)([]);
+	const getRefSelections = (0, _univerjs_ui.useEvent)(() => refSelectionsRef.current);
 	const getRefSelectionCount = (0, _univerjs_ui.useEvent)(() => getRefSelections().length);
 	const selectingMode = isSelecting;
 	const functionScreenTips = (_configService$getCon = (_configService$getCon2 = (0, _univerjs_ui.useDependency)(_univerjs_core.IConfigService).getConfig("sheets-formula-ui.base.config")) === null || _configService$getCon2 === void 0 ? void 0 : _configService$getCon2.functionScreenTips) !== null && _configService$getCon !== void 0 ? _configService$getCon : true;
@@ -3560,7 +3523,7 @@ const FormulaEditor = (0, react.forwardRef)((props, ref) => {
 		const formulaStr = text[0] === "=" ? text.slice(1) : "";
 		const sequenceNodes = getFormulaToken(formulaStr);
 		const ranges = highlightDoc(editorRef.current, sequenceNodes, isNeedResetSelection, newSelections, formulaStr);
-		refSelections.current = ranges;
+		refSelectionsRef.current = ranges;
 		if (isEnd) {
 			const currentDocSelections = newSelections !== null && newSelections !== void 0 ? newSelections : editor === null || editor === void 0 ? void 0 : editor.getSelectionRanges();
 			if ((currentDocSelections === null || currentDocSelections === void 0 ? void 0 : currentDocSelections.length) === 1) {
@@ -3859,6 +3822,13 @@ function FunctionParams(props) {
 function InputParams(props) {
 	const { functionInfo, onChange } = props;
 	if (!functionInfo) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputParamsInner, {
+		functionInfo,
+		onChange
+	});
+}
+function InputParamsInner(props) {
+	const { functionInfo, onChange } = props;
 	const [params, setParams] = (0, react.useState)([]);
 	const [functionParameter, setFunctionParameter] = (0, react.useState)(functionInfo.functionParameter);
 	const [activeIndex, setActiveIndex] = (0, react.useState)(-1);
@@ -4003,27 +3973,60 @@ function SelectFunction(props) {
 			}, index))
 		}),
 		functionInfo && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: (0, _univerjs_design.clsx)("univer-mx-0 univer-my-2 univer-overflow-y-auto", _univerjs_design.scrollbarClassName),
+			"data-u-comp": "formula-function-details",
+			className: (0, _univerjs_design.clsx)("univer-mx-0 univer-my-3 univer-overflow-y-auto", _univerjs_design.scrollbarClassName),
 			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FunctionParams, {
-					title: functionInfo.functionName,
-					value: functionInfo.description
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FunctionParams, {
-					title: localeService.t("sheets-formula-ui.moreFunctions.syntax"),
-					value: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FunctionHelp, {
-						prefix: functionInfo.functionName,
-						value: functionInfo.functionParameter
-					})
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "univer-rounded-lg univer-bg-gray-50 univer-p-3 dark:!univer-bg-gray-800",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "univer-text-sm univer-font-semibold univer-text-gray-900 dark:!univer-text-white",
+						children: functionInfo.functionName
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "univer-mt-1 univer-text-xs univer-leading-5 univer-text-gray-600 dark:!univer-text-gray-300",
+						children: functionInfo.description
+					})]
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FunctionParams, {
-					title: localeService.t("sheets-formula-ui.prompt.helpExample"),
-					value: `${functionInfo.functionName}(${functionInfo.functionParameter.map((item) => item.example).join(",")})`
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "univer-mt-4 univer-flex univer-flex-col univer-gap-3",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "univer-text-xs univer-font-medium univer-text-gray-500 dark:!univer-text-gray-300",
+						children: localeService.t("sheets-formula-ui.moreFunctions.syntax")
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						"data-u-comp": "formula-function-syntax",
+						className: (0, _univerjs_design.clsx)("univer-mt-1.5 univer-break-words univer-rounded-md univer-bg-gray-50 univer-px-3 univer-py-2 univer-font-mono univer-text-xs univer-leading-5 univer-text-gray-900 dark:!univer-bg-gray-800 dark:!univer-text-white", _univerjs_design.borderClassName),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FunctionHelp, {
+							prefix: functionInfo.functionName,
+							value: functionInfo.functionParameter
+						})
+					})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "univer-text-xs univer-font-medium univer-text-gray-500 dark:!univer-text-gray-300",
+						children: localeService.t("sheets-formula-ui.prompt.helpExample")
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						"data-u-comp": "formula-function-example",
+						className: (0, _univerjs_design.clsx)("univer-mt-1.5 univer-break-words univer-rounded-md univer-bg-gray-50 univer-px-3 univer-py-2 univer-font-mono univer-text-xs univer-leading-5 univer-text-gray-900 dark:!univer-bg-gray-800 dark:!univer-text-white", _univerjs_design.borderClassName),
+						children: `${functionInfo.functionName}(${functionInfo.functionParameter.map((item) => item.example).join(",")})`
+					})] })]
 				}),
-				functionInfo.functionParameter && functionInfo.functionParameter.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FunctionParams, {
-					title: item.name,
-					value: `${item.require ? required : optional} ${item.detail}`
-				}, item.name))
+				functionInfo.functionParameter.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: (0, _univerjs_design.clsx)("univer-mt-4 univer-rounded-lg univer-px-3", _univerjs_design.borderClassName, _univerjs_design.divideYClassName),
+					children: functionInfo.functionParameter.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						"data-u-comp": "formula-function-parameter",
+						className: "univer-py-3",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "univer-flex univer-items-center univer-gap-2",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "univer-text-xs univer-font-medium univer-text-gray-900 dark:!univer-text-white",
+								children: item.name
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: (0, _univerjs_design.clsx)("univer-rounded-full univer-px-2 univer-py-0.5 univer-text-xs univer-leading-4", item.require ? "univer-bg-primary-50 univer-text-primary-600 dark:!univer-bg-primary-900 dark:!univer-text-primary-200" : "univer-bg-gray-100 univer-text-gray-600 dark:!univer-bg-gray-700 dark:!univer-text-gray-200"),
+								children: item.require ? required : optional
+							})]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "univer-mt-1 univer-text-xs univer-leading-5 univer-text-gray-600 dark:!univer-text-gray-300",
+							children: item.detail
+						})]
+					}, item.name))
+				})
 			]
 		})
 	] });
@@ -4509,7 +4512,19 @@ let ComponentsController = class ComponentsController extends _univerjs_core.Dis
 		this._registerComponents();
 	}
 	_registerIcons() {
-		this.disposeWithMe(this._iconManager.register({ FunctionIcon: _univerjs_icons.FunctionIcon }));
+		this.disposeWithMe(this._iconManager.register({
+			DatabaseFunctionIcon: _univerjs_icons.DatabaseFunctionIcon,
+			DateFunctionIcon: _univerjs_icons.DateFunctionIcon,
+			EngineeringFunctionIcon: _univerjs_icons.EngineeringFunctionIcon,
+			FinancialFunctionIcon: _univerjs_icons.FinancialFunctionIcon,
+			FunctionIcon: _univerjs_icons.FunctionIcon,
+			InformationFunctionIcon: _univerjs_icons.InformationFunctionIcon,
+			LogicalFunctionIcon: _univerjs_icons.LogicalFunctionIcon,
+			LookupFunctionIcon: _univerjs_icons.LookupFunctionIcon,
+			MathFunctionIcon: _univerjs_icons.MathFunctionIcon,
+			StatisticalFunctionIcon: _univerjs_icons.StatisticalFunctionIcon,
+			TextFunctionIcon: _univerjs_icons.TextFunctionIcon
+		}));
 	}
 	_registerComponents() {
 		this.disposeWithMe(this._componentManager.register(MORE_FUNCTIONS_COMPONENT, MoreFunctions));

package/lib/es/index.js

@@ -8,8 +8,8 @@ import { BEFORE_CELL_EDIT, INTERCEPTOR_POINT, IRefSelectionsService, REF_SELECTI
 import { IDescriptionService, ImageFormulaCellInterceptorController, InsertFunctionCommand, PLUGIN_CONFIG_KEY_BASE, QuickSumCommand, TriggerCalculationController, UniverSheetsFormulaPlugin } from "@univerjs/sheets-formula";
 import { BuiltInUIPart, ComponentManager, IContextMenuService, IMenuManagerService, IShortcutService, ISidebarService, IUIPartsService, IconManager, KeyCode, MenuItemType, MetaKeys, ProgressBar, RectPopup, RibbonFormulasGroup, connectInjector, getMenuHiddenObservable, useDependency, useEvent, useObservable, useUpdateEffect } from "@univerjs/ui";
 import { DocSelectionManagerService } from "@univerjs/docs";
-import { CheckMarkIcon, CloseIcon, DeleteIcon, FunctionIcon, IncreaseIcon, MoreRightIcon, SelectRangeIcon } from "@univerjs/icons";
-import { Button, Dialog, Input, Select, Tooltip, borderClassName, borderLeftClassName, borderTopClassName, clsx, scrollbarClassName } from "@univerjs/design";
+import { CheckMarkIcon, CloseIcon, DatabaseFunctionIcon, DateFunctionIcon, DeleteIcon, EngineeringFunctionIcon, FinancialFunctionIcon, FunctionIcon, IncreaseIcon, InformationFunctionIcon, LogicalFunctionIcon, LookupFunctionIcon, MathFunctionIcon, MoreRightIcon, SelectRangeIcon, StatisticalFunctionIcon, TextFunctionIcon } from "@univerjs/icons";
+import { Button, Dialog, Input, Select, Tooltip, borderClassName, borderLeftClassName, borderTopClassName, clsx, divideYClassName, scrollbarClassName } from "@univerjs/design";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { debounceTime as debounceTime$1 } from "rxjs/operators";
@@ -832,11 +832,12 @@ function createInsertFunctionCategoryMenuItemFactory(functionType, categoryKey,
 		} catch {
 			selections = [];
 		}
+		const localeKey = `sheets-formula-ui.functionType.${categoryKey}`;
 		return {
 			id: `${InsertFunctionOperation.id}.${categoryKey}`,
 			commandId: InsertFunctionOperation.id,
-			title: `sheets-formula-ui.functionType.${categoryKey}`,
-			tooltip: "sheets-formula-ui.insert.tooltip",
+			title: localeKey,
+			tooltip: localeKey,
 			icon,
 			type: MenuItemType.SELECTOR,
 			selections,
@@ -844,16 +845,16 @@ function createInsertFunctionCategoryMenuItemFactory(functionType, categoryKey,
 		};
 	};
 }
-const InsertFinancialFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(FunctionType.Financial, "financial");
-const InsertLogicalFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(FunctionType.Logical, "logical");
-const InsertTextFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(FunctionType.Text, "text");
-const InsertDateFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(FunctionType.Date, "date");
-const InsertLookupFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(FunctionType.Lookup, "lookup");
-const InsertMathFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(FunctionType.Math, "math");
-const InsertStatisticalFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(FunctionType.Statistical, "statistical");
-const InsertEngineeringFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(FunctionType.Engineering, "engineering");
-const InsertInformationFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(FunctionType.Information, "information");
-const InsertDatabaseFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(FunctionType.Database, "database");
+const InsertFinancialFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(FunctionType.Financial, "financial", "FinancialFunctionIcon");
+const InsertLogicalFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(FunctionType.Logical, "logical", "LogicalFunctionIcon");
+const InsertTextFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(FunctionType.Text, "text", "TextFunctionIcon");
+const InsertDateFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(FunctionType.Date, "date", "DateFunctionIcon");
+const InsertLookupFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(FunctionType.Lookup, "lookup", "LookupFunctionIcon");
+const InsertMathFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(FunctionType.Math, "math", "MathFunctionIcon");
+const InsertStatisticalFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(FunctionType.Statistical, "statistical", "StatisticalFunctionIcon");
+const InsertEngineeringFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(FunctionType.Engineering, "engineering", "EngineeringFunctionIcon");
+const InsertInformationFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(FunctionType.Information, "information", "InformationFunctionIcon");
+const InsertDatabaseFunctionMenuItemFactory = createInsertFunctionCategoryMenuItemFactory(FunctionType.Database, "database", "DatabaseFunctionIcon");
 function AllFunctionsMenuItemFactory(accessor) {
 	return {
 		id: MoreFunctionsOperation.id,
@@ -909,83 +910,43 @@ const menuSchema = {
 		},
 		[`${InsertFunctionOperation.id}.financial`]: {
 			order: 1,
-			menuItemFactory: InsertFinancialFunctionMenuItemFactory,
-			[MoreFunctionsOperation.id]: {
-				order: 0,
-				menuItemFactory: AllFunctionsMenuItemFactory
-			}
+			menuItemFactory: InsertFinancialFunctionMenuItemFactory
 		},
 		[`${InsertFunctionOperation.id}.logical`]: {
 			order: 2,
-			menuItemFactory: InsertLogicalFunctionMenuItemFactory,
-			[MoreFunctionsOperation.id]: {
-				order: 0,
-				menuItemFactory: AllFunctionsMenuItemFactory
-			}
+			menuItemFactory: InsertLogicalFunctionMenuItemFactory
 		},
 		[`${InsertFunctionOperation.id}.text`]: {
 			order: 3,
-			menuItemFactory: InsertTextFunctionMenuItemFactory,
-			[MoreFunctionsOperation.id]: {
-				order: 0,
-				menuItemFactory: AllFunctionsMenuItemFactory
-			}
+			menuItemFactory: InsertTextFunctionMenuItemFactory
 		},
 		[`${InsertFunctionOperation.id}.date`]: {
 			order: 4,
-			menuItemFactory: InsertDateFunctionMenuItemFactory,
-			[MoreFunctionsOperation.id]: {
-				order: 0,
-				menuItemFactory: AllFunctionsMenuItemFactory
-			}
+			menuItemFactory: InsertDateFunctionMenuItemFactory
 		},
 		[`${InsertFunctionOperation.id}.lookup`]: {
 			order: 5,
-			menuItemFactory: InsertLookupFunctionMenuItemFactory,
-			[MoreFunctionsOperation.id]: {
-				order: 0,
-				menuItemFactory: AllFunctionsMenuItemFactory
-			}
+			menuItemFactory: InsertLookupFunctionMenuItemFactory
 		},
 		[`${InsertFunctionOperation.id}.math`]: {
 			order: 6,
-			menuItemFactory: InsertMathFunctionMenuItemFactory,
-			[MoreFunctionsOperation.id]: {
-				order: 0,
-				menuItemFactory: AllFunctionsMenuItemFactory
-			}
+			menuItemFactory: InsertMathFunctionMenuItemFactory
 		},
 		[`${InsertFunctionOperation.id}.statistical`]: {
 			order: 7,
-			menuItemFactory: InsertStatisticalFunctionMenuItemFactory,
-			[MoreFunctionsOperation.id]: {
-				order: 0,
-				menuItemFactory: AllFunctionsMenuItemFactory
-			}
+			menuItemFactory: InsertStatisticalFunctionMenuItemFactory
 		},
 		[`${InsertFunctionOperation.id}.engineering`]: {
 			order: 8,
-			menuItemFactory: InsertEngineeringFunctionMenuItemFactory,
-			[MoreFunctionsOperation.id]: {
-				order: 0,
-				menuItemFactory: AllFunctionsMenuItemFactory
-			}
+			menuItemFactory: InsertEngineeringFunctionMenuItemFactory
 		},
 		[`${InsertFunctionOperation.id}.information`]: {
 			order: 9,
-			menuItemFactory: InsertInformationFunctionMenuItemFactory,
-			[MoreFunctionsOperation.id]: {
-				order: 0,
-				menuItemFactory: AllFunctionsMenuItemFactory
-			}
+			menuItemFactory: InsertInformationFunctionMenuItemFactory
 		},
 		[`${InsertFunctionOperation.id}.database`]: {
 			order: 10,
-			menuItemFactory: InsertDatabaseFunctionMenuItemFactory,
-			[MoreFunctionsOperation.id]: {
-				order: 0,
-				menuItemFactory: AllFunctionsMenuItemFactory
-			}
+			menuItemFactory: InsertDatabaseFunctionMenuItemFactory
 		}
 	},
 	[COPY_SPECIAL_MENU_ID]: { [SheetCopyFormulaOnlyCommand.id]: {
@@ -1001,7 +962,7 @@ const menuSchema = {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-formula-ui";
-var version = "1.0.0-alpha.3";
+var version = "1.0.0-alpha.4";
 
 //#endregion
 //#region src/config/config.ts
@@ -3295,7 +3256,7 @@ function SearchFunctionFactory(props, ref) {
 	const shortcutService = useDependency(IShortcutService);
 	const commandService = useDependency(ICommandService);
 	const { searchList, searchText, handlerFormulaReplace, reset: resetFormulaSearch } = useFormulaSearch(isFocus, sequenceNodes, editor);
-	const visible = useMemo(() => !!searchList.length, [searchList]);
+	const visible = searchList.length > 0;
 	const ulRef = useRef(void 0);
 	const [active, setActive] = useState(0);
 	const isEnableMouseEnterOrOut = useRef(false);
@@ -3481,7 +3442,7 @@ function syncCounterpartFormulaEditorSelection(editorService, editorId, selectio
 	(_editorService$getEdi = editorService.getEditor(syncEditorId)) === null || _editorService$getEdi === void 0 || _editorService$getEdi.setSelectionRanges(selections, false);
 }
 const FormulaEditor = forwardRef((props, ref) => {
-	var _document$getBody$dat, _document$getBody, _configService$getCon, _configService$getCon2;
+	var _document$getBody$dat2, _document$getBody2, _configService$getCon, _configService$getCon2;
 	const { errorText, initValue, unitId, subUnitId, isFocus: _isFocus = true, isSupportAcrossSheet = false, onFocus = noop, onBlur = noop, onChange: propOnChange, onVerify, className, editorId: propEditorId, moveCursor = true, onFormulaSelectingChange: propOnFormulaSelectingChange, keyboardEventConfig, onMoveInEditor, resetSelectionOnBlur = true, autoScrollbar = true, isSingle = true, disableSelectionOnClick = false, autofocus = true, disableContextMenu, style, borderless = false, canvasStyle } = props;
 	const editorService = useDependency(IEditorService);
 	const commandService = useDependency(ICommandService);
@@ -3499,12 +3460,14 @@ const FormulaEditor = forwardRef((props, ref) => {
 	const [isFocus, setIsFocus] = useState(_isFocus);
 	const formulaEditorContainerRef = useRef(null);
 	const editorId = useMemo(() => propEditorId !== null && propEditorId !== void 0 ? propEditorId : createInternalEditorID(`${EMBEDDING_FORMULA_EDITOR}-${generateRandomId(4)}`), []);
-	const isError = useMemo(() => errorText !== void 0, [errorText]);
+	const isError = errorText !== void 0;
 	const univerInstanceService = useDependency(IUniverInstanceService);
 	const document = univerInstanceService.getUnit(editorId);
-	useObservable(document === null || document === void 0 ? void 0 : document.change$);
 	const getFormulaToken = useFormulaToken();
-	const formulaText = BuildTextUtils.transform.getPlainText((_document$getBody$dat = document === null || document === void 0 || (_document$getBody = document.getBody()) === null || _document$getBody === void 0 ? void 0 : _document$getBody.dataStream) !== null && _document$getBody$dat !== void 0 ? _document$getBody$dat : "");
+	const formulaText = useObservable(document ? () => document.change$.pipe(map(() => {
+		var _document$getBody$dat, _document$getBody;
+		return BuildTextUtils.transform.getPlainText((_document$getBody$dat = (_document$getBody = document.getBody()) === null || _document$getBody === void 0 ? void 0 : _document$getBody.dataStream) !== null && _document$getBody$dat !== void 0 ? _document$getBody$dat : "");
+	})) : null, BuildTextUtils.transform.getPlainText((_document$getBody$dat2 = document === null || document === void 0 || (_document$getBody2 = document.getBody()) === null || _document$getBody2 === void 0 ? void 0 : _document$getBody2.dataStream) !== null && _document$getBody$dat2 !== void 0 ? _document$getBody$dat2 : ""), false, [document]);
 	const formulaTextRef = useStateRef(formulaText);
 	const formulaWithoutEqualSymbol = useMemo(() => getFormulaText(formulaText), [formulaText]);
 	const sequenceNodes = useMemo(() => getFormulaToken(formulaWithoutEqualSymbol), [formulaWithoutEqualSymbol, getFormulaToken]);
@@ -3522,8 +3485,8 @@ const FormulaEditor = forwardRef((props, ref) => {
 	const isFocusing = docSelectionRenderService === null || docSelectionRenderService === void 0 ? void 0 : docSelectionRenderService.isFocusing;
 	const currentDoc = useObservable(useMemo(() => univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_DOC), [univerInstanceService]));
 	const docFocusing = (currentDoc === null || currentDoc === void 0 ? void 0 : currentDoc.getUnitId()) === editorId;
-	const refSelections = useRef([]);
-	const getRefSelections = useEvent(() => refSelections.current);
+	const refSelectionsRef = useRef([]);
+	const getRefSelections = useEvent(() => refSelectionsRef.current);
 	const getRefSelectionCount = useEvent(() => getRefSelections().length);
 	const selectingMode = isSelecting;
 	const functionScreenTips = (_configService$getCon = (_configService$getCon2 = useDependency(IConfigService).getConfig("sheets-formula-ui.base.config")) === null || _configService$getCon2 === void 0 ? void 0 : _configService$getCon2.functionScreenTips) !== null && _configService$getCon !== void 0 ? _configService$getCon : true;
@@ -3559,7 +3522,7 @@ const FormulaEditor = forwardRef((props, ref) => {
 		const formulaStr = text[0] === "=" ? text.slice(1) : "";
 		const sequenceNodes = getFormulaToken(formulaStr);
 		const ranges = highlightDoc(editorRef.current, sequenceNodes, isNeedResetSelection, newSelections, formulaStr);
-		refSelections.current = ranges;
+		refSelectionsRef.current = ranges;
 		if (isEnd) {
 			const currentDocSelections = newSelections !== null && newSelections !== void 0 ? newSelections : editor === null || editor === void 0 ? void 0 : editor.getSelectionRanges();
 			if ((currentDocSelections === null || currentDocSelections === void 0 ? void 0 : currentDocSelections.length) === 1) {
@@ -3858,6 +3821,13 @@ function FunctionParams(props) {
 function InputParams(props) {
 	const { functionInfo, onChange } = props;
 	if (!functionInfo) return null;
+	return /* @__PURE__ */ jsx(InputParamsInner, {
+		functionInfo,
+		onChange
+	});
+}
+function InputParamsInner(props) {
+	const { functionInfo, onChange } = props;
 	const [params, setParams] = useState([]);
 	const [functionParameter, setFunctionParameter] = useState(functionInfo.functionParameter);
 	const [activeIndex, setActiveIndex] = useState(-1);
@@ -4002,27 +3972,60 @@ function SelectFunction(props) {
 			}, index))
 		}),
 		functionInfo && /* @__PURE__ */ jsxs("div", {
-			className: clsx("univer-mx-0 univer-my-2 univer-overflow-y-auto", scrollbarClassName),
+			"data-u-comp": "formula-function-details",
+			className: clsx("univer-mx-0 univer-my-3 univer-overflow-y-auto", scrollbarClassName),
 			children: [
-				/* @__PURE__ */ jsx(FunctionParams, {
-					title: functionInfo.functionName,
-					value: functionInfo.description
-				}),
-				/* @__PURE__ */ jsx(FunctionParams, {
-					title: localeService.t("sheets-formula-ui.moreFunctions.syntax"),
-					value: /* @__PURE__ */ jsx(FunctionHelp, {
-						prefix: functionInfo.functionName,
-						value: functionInfo.functionParameter
-					})
+				/* @__PURE__ */ jsxs("div", {
+					className: "univer-rounded-lg univer-bg-gray-50 univer-p-3 dark:!univer-bg-gray-800",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "univer-text-sm univer-font-semibold univer-text-gray-900 dark:!univer-text-white",
+						children: functionInfo.functionName
+					}), /* @__PURE__ */ jsx("div", {
+						className: "univer-mt-1 univer-text-xs univer-leading-5 univer-text-gray-600 dark:!univer-text-gray-300",
+						children: functionInfo.description
+					})]
 				}),
-				/* @__PURE__ */ jsx(FunctionParams, {
-					title: localeService.t("sheets-formula-ui.prompt.helpExample"),
-					value: `${functionInfo.functionName}(${functionInfo.functionParameter.map((item) => item.example).join(",")})`
+				/* @__PURE__ */ jsxs("div", {
+					className: "univer-mt-4 univer-flex univer-flex-col univer-gap-3",
+					children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+						className: "univer-text-xs univer-font-medium univer-text-gray-500 dark:!univer-text-gray-300",
+						children: localeService.t("sheets-formula-ui.moreFunctions.syntax")
+					}), /* @__PURE__ */ jsx("div", {
+						"data-u-comp": "formula-function-syntax",
+						className: clsx("univer-mt-1.5 univer-break-words univer-rounded-md univer-bg-gray-50 univer-px-3 univer-py-2 univer-font-mono univer-text-xs univer-leading-5 univer-text-gray-900 dark:!univer-bg-gray-800 dark:!univer-text-white", borderClassName),
+						children: /* @__PURE__ */ jsx(FunctionHelp, {
+							prefix: functionInfo.functionName,
+							value: functionInfo.functionParameter
+						})
+					})] }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+						className: "univer-text-xs univer-font-medium univer-text-gray-500 dark:!univer-text-gray-300",
+						children: localeService.t("sheets-formula-ui.prompt.helpExample")
+					}), /* @__PURE__ */ jsx("div", {
+						"data-u-comp": "formula-function-example",
+						className: clsx("univer-mt-1.5 univer-break-words univer-rounded-md univer-bg-gray-50 univer-px-3 univer-py-2 univer-font-mono univer-text-xs univer-leading-5 univer-text-gray-900 dark:!univer-bg-gray-800 dark:!univer-text-white", borderClassName),
+						children: `${functionInfo.functionName}(${functionInfo.functionParameter.map((item) => item.example).join(",")})`
+					})] })]
 				}),
-				functionInfo.functionParameter && functionInfo.functionParameter.map((item) => /* @__PURE__ */ jsx(FunctionParams, {
-					title: item.name,
-					value: `${item.require ? required : optional} ${item.detail}`
-				}, item.name))
+				functionInfo.functionParameter.length > 0 && /* @__PURE__ */ jsx("div", {
+					className: clsx("univer-mt-4 univer-rounded-lg univer-px-3", borderClassName, divideYClassName),
+					children: functionInfo.functionParameter.map((item) => /* @__PURE__ */ jsxs("div", {
+						"data-u-comp": "formula-function-parameter",
+						className: "univer-py-3",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "univer-flex univer-items-center univer-gap-2",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "univer-text-xs univer-font-medium univer-text-gray-900 dark:!univer-text-white",
+								children: item.name
+							}), /* @__PURE__ */ jsx("span", {
+								className: clsx("univer-rounded-full univer-px-2 univer-py-0.5 univer-text-xs univer-leading-4", item.require ? "univer-bg-primary-50 univer-text-primary-600 dark:!univer-bg-primary-900 dark:!univer-text-primary-200" : "univer-bg-gray-100 univer-text-gray-600 dark:!univer-bg-gray-700 dark:!univer-text-gray-200"),
+								children: item.require ? required : optional
+							})]
+						}), /* @__PURE__ */ jsx("div", {
+							className: "univer-mt-1 univer-text-xs univer-leading-5 univer-text-gray-600 dark:!univer-text-gray-300",
+							children: item.detail
+						})]
+					}, item.name))
+				})
 			]
 		})
 	] });
@@ -4508,7 +4511,19 @@ let ComponentsController = class ComponentsController extends Disposable {
 		this._registerComponents();
 	}
 	_registerIcons() {
-		this.disposeWithMe(this._iconManager.register({ FunctionIcon }));
+		this.disposeWithMe(this._iconManager.register({
+			DatabaseFunctionIcon,
+			DateFunctionIcon,
+			EngineeringFunctionIcon,
+			FinancialFunctionIcon,
+			FunctionIcon,
+			InformationFunctionIcon,
+			LogicalFunctionIcon,
+			LookupFunctionIcon,
+			MathFunctionIcon,
+			StatisticalFunctionIcon,
+			TextFunctionIcon
+		}));
 	}
 	_registerComponents() {
 		this.disposeWithMe(this._componentManager.register(MORE_FUNCTIONS_COMPONENT, MoreFunctions));