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

package/lib/index.css

@@ -42,6 +42,11 @@
   margin-bottom: .5rem;
 }
 
+.univer-my-3 {
+  margin-top: .75rem;
+  margin-bottom: .75rem;
+}
+
 .univer-mb-0 {
   margin-bottom: 0;
 }
@@ -74,6 +79,10 @@
   margin-top: .25rem;
 }
 
+.univer-mt-1\.5 {
+  margin-top: .375rem;
+}
+
 .univer-mt-2 {
   margin-top: .5rem;
 }
@@ -82,6 +91,10 @@
   margin-top: .75rem;
 }
 
+.univer-mt-4 {
+  margin-top: 1rem;
+}
+
 .univer-box-border {
   box-sizing: border-box;
 }
@@ -194,6 +207,10 @@
   gap: .5rem;
 }
 
+.univer-gap-3 {
+  gap: .75rem;
+}
+
 .univer-gap-4 {
   gap: 1rem;
 }
@@ -232,10 +249,18 @@
   border-radius: .25rem;
 }
 
+.univer-rounded-full {
+  border-radius: 9999px;
+}
+
 .univer-rounded-lg {
   border-radius: .5rem;
 }
 
+.univer-rounded-md {
+  border-radius: .375rem;
+}
+
 .univer-rounded-none {
   border-radius: 0;
 }
@@ -265,10 +290,22 @@
   background-color: var(--univer-gray-600) !important;
 }
 
+.univer-bg-gray-100 {
+  background-color: var(--univer-gray-100);
+}
+
 .univer-bg-gray-200 {
   background-color: var(--univer-gray-200);
 }
 
+.univer-bg-gray-50 {
+  background-color: var(--univer-gray-50);
+}
+
+.univer-bg-primary-50 {
+  background-color: var(--univer-primary-50);
+}
+
 .univer-bg-primary-600 {
   background-color: var(--univer-primary-600);
 }
@@ -302,6 +339,11 @@
   padding-right: .5rem;
 }
 
+.univer-px-3 {
+  padding-left: .75rem;
+  padding-right: .75rem;
+}
+
 .univer-px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -317,6 +359,11 @@
   padding-right: 1.75rem;
 }
 
+.univer-py-0\.5 {
+  padding-top: .125rem;
+  padding-bottom: .125rem;
+}
+
 .univer-py-1 {
   padding-top: .25rem;
   padding-bottom: .25rem;
@@ -340,6 +387,10 @@
   padding-top: 0;
 }
 
+.univer-font-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+}
+
 .univer-text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -363,6 +414,14 @@
   font-weight: 500;
 }
 
+.univer-font-semibold {
+  font-weight: 600;
+}
+
+.univer-leading-4 {
+  line-height: 1rem;
+}
+
 .univer-leading-5 {
   line-height: 1.25rem;
 }
@@ -452,10 +511,22 @@
   background-color: var(--univer-gray-600) !important;
 }
 
+.dark\:\!univer-bg-gray-700:where(.univer-dark, .univer-dark *) {
+  background-color: var(--univer-gray-700) !important;
+}
+
+.dark\:\!univer-bg-gray-800:where(.univer-dark, .univer-dark *) {
+  background-color: var(--univer-gray-800) !important;
+}
+
 .dark\:\!univer-bg-gray-900:where(.univer-dark, .univer-dark *) {
   background-color: var(--univer-gray-900) !important;
 }
 
+.dark\:\!univer-bg-primary-900:where(.univer-dark, .univer-dark *) {
+  background-color: var(--univer-primary-900) !important;
+}
+
 .dark\:\!univer-text-gray-200:where(.univer-dark, .univer-dark *) {
   color: var(--univer-gray-200) !important;
 }
@@ -464,6 +535,10 @@
   color: var(--univer-gray-300) !important;
 }
 
+.dark\:\!univer-text-primary-200:where(.univer-dark, .univer-dark *) {
+  color: var(--univer-primary-200) !important;
+}
+
 .dark\:\!univer-text-white:where(.univer-dark, .univer-dark *) {
   color: var(--univer-white) !important;
 }

package/lib/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.5";
 
 //#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));