@univerjs/sheets-ui 0.21.0 → 0.21.1

package/lib/cjs/index.js

@@ -1013,6 +1013,11 @@ let SheetSkeletonManagerService = class SheetSkeletonManagerService extends _uni
 		_defineProperty(this, "currentSkeletonBefore$", this._currentSkeletonBefore$.asObservable());
 		const { unitId, scene } = this._context;
 		this._sheetSkeletonService.setScene(unitId, scene);
+		this._initSkeletonsRegisterGetCellHeight(unitId);
+	}
+	_initSkeletonsRegisterGetCellHeight(unitId) {
+		this._sheetSkeletonService.getSkeletonsByUnitId(unitId).forEach((skeleton) => skeleton.registerGetCellHeight());
+		this.disposeWithMe(this._sheetSkeletonService.buildSkeleton$.subscribe((skeleton) => skeleton.registerGetCellHeight()));
 	}
 	dispose() {
 		super.dispose();
@@ -6318,6 +6323,7 @@ let SheetScrollManagerService = class SheetScrollManagerService {
 		this._rawScrollInfo$.complete();
 	}
 	calcViewportScrollFromRowColOffset(scrollInfo) {
+		var _skeleton$getCellWith, _skeleton$getCellWith2;
 		if (!scrollInfo) return {
 			viewportScrollX: 0,
 			viewportScrollY: 0
@@ -6326,10 +6332,10 @@ let SheetScrollManagerService = class SheetScrollManagerService {
 		sheetViewStartRow = sheetViewStartRow || 0;
 		offsetY = offsetY || 0;
 		const skeleton = this._sheetSkeletonManagerService.getCurrentSkeleton();
-		const rowAcc = (skeleton === null || skeleton === void 0 ? void 0 : skeleton.rowHeightAccumulation[sheetViewStartRow - 1]) || 0;
+		const { startX: colStart = (skeleton === null || skeleton === void 0 ? void 0 : skeleton.columnWidthAccumulation[sheetViewStartColumn - 1]) || 0, startY: rowStart = (skeleton === null || skeleton === void 0 ? void 0 : skeleton.rowHeightAccumulation[sheetViewStartRow - 1]) || 0 } = (_skeleton$getCellWith = skeleton === null || skeleton === void 0 || (_skeleton$getCellWith2 = skeleton.getCellWithCoordByIndex) === null || _skeleton$getCellWith2 === void 0 ? void 0 : _skeleton$getCellWith2.call(skeleton, sheetViewStartRow, sheetViewStartColumn, false)) !== null && _skeleton$getCellWith !== void 0 ? _skeleton$getCellWith : {};
 		return {
-			viewportScrollX: ((skeleton === null || skeleton === void 0 ? void 0 : skeleton.columnWidthAccumulation[sheetViewStartColumn - 1]) || 0) + offsetX,
-			viewportScrollY: rowAcc + offsetY
+			viewportScrollX: colStart + offsetX,
+			viewportScrollY: rowStart + offsetY
 		};
 	}
 	setSearchParam(param) {
@@ -6387,19 +6393,12 @@ let SheetScrollManagerService = class SheetScrollManagerService {
 		worksheetScrollInfoMap.set(sheetId, newScrollInfo);
 	}
 	_clearByParamAndNotify(param) {
+		const defaultScrollState = this._getDefaultScrollState(param);
 		this._setScrollState({
 			...param,
-			sheetViewStartRow: 0,
-			sheetViewStartColumn: 0,
-			offsetX: 0,
-			offsetY: 0
-		});
-		this._emitRawScroll({
-			sheetViewStartRow: 0,
-			sheetViewStartColumn: 0,
-			offsetX: 0,
-			offsetY: 0
+			...defaultScrollState
 		});
+		this._emitRawScroll(defaultScrollState);
 	}
 	_getCurrentScroll(param) {
 		var _this$_scrollStateMap;
@@ -6411,7 +6410,19 @@ let SheetScrollManagerService = class SheetScrollManagerService {
 		};
 		if (param == null) return emptyState;
 		const { unitId, sheetId } = param;
-		return ((_this$_scrollStateMap = this._scrollStateMap.get(unitId)) === null || _this$_scrollStateMap === void 0 ? void 0 : _this$_scrollStateMap.get(sheetId)) || emptyState;
+		return ((_this$_scrollStateMap = this._scrollStateMap.get(unitId)) === null || _this$_scrollStateMap === void 0 ? void 0 : _this$_scrollStateMap.get(sheetId)) || this._getDefaultScrollState(param);
+	}
+	_getDefaultScrollState(param) {
+		var _this$_sheetSkeletonM, _this$_sheetSkeletonM2, _this$_sheetSkeletonM3, _this$_sheetSkeletonM4, _this$_sheetSkeletonM5, _skeleton$getColGapSi, _skeleton$getRowGapSi;
+		const skeleton = (_this$_sheetSkeletonM = (_this$_sheetSkeletonM2 = (_this$_sheetSkeletonM3 = this._sheetSkeletonManagerService).getSkeleton) === null || _this$_sheetSkeletonM2 === void 0 ? void 0 : _this$_sheetSkeletonM2.call(_this$_sheetSkeletonM3, param.sheetId)) !== null && _this$_sheetSkeletonM !== void 0 ? _this$_sheetSkeletonM : (_this$_sheetSkeletonM4 = (_this$_sheetSkeletonM5 = this._sheetSkeletonManagerService).getCurrentSkeleton) === null || _this$_sheetSkeletonM4 === void 0 ? void 0 : _this$_sheetSkeletonM4.call(_this$_sheetSkeletonM5);
+		const colGapSize = (_skeleton$getColGapSi = skeleton === null || skeleton === void 0 ? void 0 : skeleton.getColGapSize(0)) !== null && _skeleton$getColGapSi !== void 0 ? _skeleton$getColGapSi : 0;
+		const rowGapSize = (_skeleton$getRowGapSi = skeleton === null || skeleton === void 0 ? void 0 : skeleton.getRowGapSize(0)) !== null && _skeleton$getRowGapSi !== void 0 ? _skeleton$getRowGapSi : 0;
+		return {
+			sheetViewStartRow: 0,
+			sheetViewStartColumn: 0,
+			offsetX: colGapSize === 0 ? 0 : -colGapSize,
+			offsetY: rowGapSize === 0 ? 0 : -rowGapSize
+		};
 	}
 	_emitRawScroll(param) {
 		this._rawScrollInfo$.next(param);
@@ -8287,7 +8298,11 @@ const SidebarDefinedNameOperation = {
 					header: { title: localeService.t("definedName.featureTitle") },
 					children: { label: DEFINED_NAME_CONTAINER },
 					onClose: () => {},
-					width: 333
+					width: 333,
+					bodyStyle: {
+						height: "100%",
+						overflow: "hidden"
+					}
 				});
 				break;
 			default:
@@ -8552,11 +8567,11 @@ let SheetsRenderService = class SheetsRenderService extends _univerjs_core.RxDis
 		this._initContextListener();
 	}
 	_initWorkbookListener() {
-		this._instanceSrv.getTypeOfUnitAdded$(_univerjs_core.UniverInstanceType.UNIVER_SHEET).pipe((0, rxjs.takeUntil)(this.dispose$)).subscribe((workbook) => this._createRenderer(workbook));
+		this._instanceSrv.getTypeOfUnitAdded$(_univerjs_core.UniverInstanceType.UNIVER_SHEET).pipe((0, rxjs.takeUntil)(this.dispose$)).subscribe((event) => this._createRenderer(event.unit, event.options));
 		this._instanceSrv.getAllUnitsForType(_univerjs_core.UniverInstanceType.UNIVER_SHEET).forEach((workbook) => this._createRenderer(workbook));
 		this._instanceSrv.getTypeOfUnitDisposed$(_univerjs_core.UniverInstanceType.UNIVER_SHEET).pipe((0, rxjs.takeUntil)(this.dispose$)).subscribe((workbook) => this._disposeRenderer(workbook));
 	}
-	_createRenderer(workbook) {
+	_createRenderer(workbook, createUnitOptions) {
 		const unitId = workbook.getUnitId();
 		this._renderManagerService.created$.subscribe((renderer) => {
 			if (renderer.unitId === unitId) {
@@ -8564,7 +8579,7 @@ let SheetsRenderService = class SheetsRenderService extends _univerjs_core.RxDis
 				renderer.engine.getCanvas().getContext().setId(`${SHEET_MAIN_CANVAS_ID}_${unitId}`);
 			}
 		});
-		this._renderManagerService.createRender(unitId);
+		this._renderManagerService.createRender(unitId, createUnitOptions);
 	}
 	_disposeRenderer(workbook) {
 		const unitId = workbook.getUnitId();
@@ -12048,8 +12063,8 @@ let FormulaEditorController = class FormulaEditorController extends _univerjs_co
 		});
 	}
 	_syncEditorSize() {
-		const addFOrmulaBar$ = this._univerInstanceService.unitAdded$.pipe((0, rxjs.filter)((unit) => unit.getUnitId() === _univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY));
-		this.disposeWithMe((0, rxjs.combineLatest)([this._formulaEditorManagerService.position$, addFOrmulaBar$]).subscribe(([position]) => {
+		const addFormulaBar$ = this._univerInstanceService.unitAdded$.pipe((0, rxjs.filter)((event) => event.unit.getUnitId() === _univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY));
+		this.disposeWithMe((0, rxjs.combineLatest)([this._formulaEditorManagerService.position$, addFormulaBar$]).subscribe(([position]) => {
 			if (!position) return this._clearScheduledCallback();
 			const editorObject = getEditorObject(_univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY, this._renderManagerService);
 			const formulaEditorDataModel = this._univerInstanceService.getUniverDocInstance(_univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY);
@@ -19875,7 +19890,8 @@ const CellPopup = (props) => {
 //#region src/views/defined-name/DefinedNameInput.tsx
 const DefinedNameInput = (props) => {
 	const { inputId, state = false, type = "range", confirm, cancel, name, formulaOrRefString, comment = "", localSheetId = _univerjs_sheets.SCOPE_WORKBOOK_VALUE_DEFINED_NAME, hidden = false, id } = props;
-	const workbook = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService).getCurrentUnitForType(_univerjs_core.UniverInstanceType.UNIVER_SHEET);
+	const univerInstanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
+	const workbook = univerInstanceService.getCurrentUnitForType(_univerjs_core.UniverInstanceType.UNIVER_SHEET);
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
 	const definedNamesService = (0, _univerjs_ui.useDependency)(_univerjs_engine_formula.IDefinedNamesService);
 	const superTableService = (0, _univerjs_ui.useDependency)(_univerjs_engine_formula.ISuperTableService);
@@ -19929,37 +19945,23 @@ const DefinedNameInput = (props) => {
 		setFormulaOrRefStringValue(value || "");
 	};
 	const confirmChange = () => {
-		if (nameValue.length === 0) {
-			setValidString(localeService.t("definedName.nameEmpty"));
-			return;
-		}
-		if ((definedNamesService.getValueByName(unitId, nameValue) || superTableService.hasTable(unitId, nameValue)) && (id === null || id === void 0 || id.length === 0)) {
-			setValidString(localeService.t("definedName.nameDuplicate"));
-			return;
-		}
-		if (!_univerjs_core.Tools.isValidParameter(nameValue) || (0, _univerjs_engine_formula.isReferenceStringWithEffectiveColumn)(nameValue) || !_univerjs_core.Tools.isStartValidPosition(nameValue) && !(0, _univerjs_engine_render.hasCJKText)(nameValue.substring(0, 1))) {
-			setValidString(localeService.t("definedName.nameInvalid"));
-			return;
-		}
-		if (workbook.getSheetOrders().map((sheetId) => {
-			var _workbook$getSheetByS;
-			return ((_workbook$getSheetByS = workbook.getSheetBySheetId(sheetId)) === null || _workbook$getSheetByS === void 0 ? void 0 : _workbook$getSheetByS.getName()) || "";
-		}).includes(nameValue)) {
-			setValidString(localeService.t("definedName.nameSheetConflict"));
-			return;
-		}
-		if (formulaOrRefStringValue.length === 0) {
-			setValidString(localeService.t("definedName.formulaOrRefStringEmpty"));
+		const validationResult = (0, _univerjs_sheets.validateDefinedName)(nameValue, {
+			unitId,
+			formulaOrRefString: formulaOrRefStringValue,
+			univerInstanceService,
+			definedNamesService,
+			superTableService,
+			functionService,
+			id
+		});
+		if (typeof validationResult === "string") {
+			setValidString(localeService.t(validationResult));
 			return;
 		}
 		if (!validFormulaOrRange) {
 			setValidString(localeService.t("definedName.formulaOrRefStringInvalid"));
 			return;
 		}
-		if (functionService.hasExecutor(nameValue.toUpperCase())) {
-			setValidString(localeService.t("definedName.nameConflict"));
-			return;
-		}
 		const currentSheetName = workbook.getActiveSheet().getName();
 		confirm && confirm({
 			id: id || "",
@@ -20089,6 +20091,15 @@ const DefinedNameContainer = () => {
 	const [definedNames, setDefinedNames] = (0, react.useState)([]);
 	const [editorKey, setEditorKey] = (0, react.useState)(null);
 	const [deleteConformKey, setDeleteConformKey] = (0, react.useState)();
+	const listContainerRef = (0, react.useRef)(void 0);
+	const [virtualDefinedNames, virtualActions] = (0, _univerjs_ui.useVirtualList)(definedNames, {
+		containerTarget: listContainerRef,
+		itemHeight: (index, item) => {
+			if (item.id === editorKey) return 240;
+			return 72;
+		},
+		overscan: 6
+	});
 	(0, react.useEffect)(() => {
 		setDefinedNames(getDefinedNameMap());
 		const definedNamesSubscription = definedNamesService.update$.subscribe(() => {
@@ -20191,100 +20202,105 @@ const DefinedNameContainer = () => {
 		if (sheet == null) return "";
 		return sheet.getName();
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-u-comp": "defined-name-container",
-		className: "univer-relative univer-box-border univer-w-full",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: (0, _univerjs_design.clsx)("univer-w-full univer-overflow-hidden univer-overflow-y-auto", _univerjs_design.scrollbarClassName),
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "univer-mb-4",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.Button, {
-					className: (0, _univerjs_design.clsx)("univer-w-full", { "univer-hidden": editState }),
-					onClick: openInsertCloseKeyEditor,
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.IncreaseIcon, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: "univer-ml-1",
-						children: localeService.t("definedName.addButton")
-					})]
-				}), editState && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefinedNameInput, {
-					confirm: insertConfirm,
-					cancel: closeInput,
-					state: editState,
-					inputId: "insertDefinedName",
-					name: getInsertDefinedName(),
-					formulaOrRefString: getInertFormulaOrRefString()
+		className: "univer-relative univer-box-border univer-flex univer-h-full univer-w-full univer-flex-col",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "univer-mb-4",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.Button, {
+				className: (0, _univerjs_design.clsx)("univer-w-full", { "univer-hidden": editState }),
+				onClick: openInsertCloseKeyEditor,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.IncreaseIcon, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "univer-ml-1",
+					children: localeService.t("definedName.addButton")
 				})]
-			}, "insertDefinedName"), definedNames.map((definedName, index) => {
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "univer-relative univer-w-full univer-divide-x-0 univer-divide-y univer-divide-solid univer-divide-gray-200 dark:!univer-divide-gray-600",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: (0, _univerjs_design.clsx)("univer-group univer-relative univer-flex univer-w-full univer-cursor-default univer-select-none univer-items-center univer-justify-between univer-rounded-md univer-p-2 hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-700", { "univer-hidden": definedName.id === editorKey }),
-							onClick: () => {
-								focusDefinedName(definedName);
-							},
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								title: definedName.comment,
+			}), editState && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefinedNameInput, {
+				confirm: insertConfirm,
+				cancel: closeInput,
+				state: editState,
+				inputId: "insertDefinedName",
+				name: getInsertDefinedName(),
+				formulaOrRefString: getInertFormulaOrRefString()
+			})]
+		}, "insertDefinedName"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: listContainerRef,
+			className: (0, _univerjs_design.clsx)("univer-min-h-0 univer-flex-1 univer-overflow-y-auto", _univerjs_design.scrollbarClassName),
+			...virtualActions.containerProps,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				style: virtualActions.wrapperStyle,
+				children: virtualDefinedNames.map(({ data: definedName, index }) => {
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "univer-relative univer-w-full univer-divide-x-0 univer-divide-y univer-divide-solid univer-divide-gray-200 dark:!univer-divide-gray-600",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: (0, _univerjs_design.clsx)("univer-group univer-relative univer-flex univer-w-full univer-cursor-default univer-select-none univer-items-center univer-justify-between univer-rounded-md univer-p-2 hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-700", { "univer-hidden": definedName.id === editorKey }),
+								onClick: () => {
+									focusDefinedName(definedName);
+								},
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									className: "univer-my-1 univer-max-h-[100px] univer-max-w-[190px] univer-truncate univer-text-sm univer-font-medium univer-text-gray-900 dark:!univer-text-white",
-									children: [definedName.name, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "univer-text-xxs univer-ml-1 univer-text-gray-400",
-										children: definedName.localSheetId === _univerjs_sheets.SCOPE_WORKBOOK_VALUE_DEFINED_NAME || definedName.localSheetId == null ? "" : getSheetNameBySheetId(definedName.localSheetId)
+									title: definedName.comment,
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										className: "univer-my-1 univer-max-h-[100px] univer-max-w-[190px] univer-truncate univer-text-sm univer-font-medium univer-text-gray-900 dark:!univer-text-white",
+										children: [definedName.name, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "univer-text-xxs univer-ml-1 univer-text-gray-400",
+											children: definedName.localSheetId === _univerjs_sheets.SCOPE_WORKBOOK_VALUE_DEFINED_NAME || definedName.localSheetId == null ? "" : getSheetNameBySheetId(definedName.localSheetId)
+										})]
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: "univer-my-1 univer-max-h-[100px] univer-w-full univer-max-w-[190px] univer-truncate univer-text-xs univer-text-gray-500",
+										title: definedName.formulaOrRefString,
+										children: definedName.formulaOrRefString
+									})]
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "univer-absolute univer-right-5 univer-top-1/2 univer-hidden -univer-translate-y-1/2 univer-cursor-pointer univer-items-center univer-justify-end univer-gap-7 univer-text-xs univer-text-primary-600 group-hover:univer-flex dark:hover:!univer-bg-gray-600",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Tooltip, {
+										title: localeService.t("definedName.updateButton"),
+										placement: "top",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+											className: "univer-rounded univer-p-1 hover:univer-bg-gray-100",
+											onClick: (e) => {
+												e.stopPropagation();
+												closeInsertOpenKeyEditor(definedName.id);
+											},
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.PenIcon, {})
+										})
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Tooltip, {
+										title: localeService.t("definedName.deleteButton"),
+										placement: "top",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+											className: "univer-rounded univer-p-1 univer-text-red-600 hover:univer-bg-gray-100",
+											onClick: (e) => {
+												e.stopPropagation();
+												deleteDefinedName(definedName.id);
+											},
+											children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DeleteIcon, {})
+										})
 									})]
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: "univer-my-1 univer-max-h-[100px] univer-w-full univer-max-w-[190px] univer-truncate univer-text-xs univer-text-gray-500",
-									title: definedName.formulaOrRefString,
-									children: definedName.formulaOrRefString
-								})]
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "univer-absolute univer-right-5 univer-top-1/2 univer-hidden -univer-translate-y-1/2 univer-cursor-pointer univer-items-center univer-justify-end univer-gap-7 univer-text-xs univer-text-primary-600 group-hover:univer-flex dark:hover:!univer-bg-gray-600",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Tooltip, {
-									title: localeService.t("definedName.updateButton"),
-									placement: "top",
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-										className: "univer-rounded univer-p-1 hover:univer-bg-gray-100",
-										onClick: (e) => {
-											e.stopPropagation();
-											closeInsertOpenKeyEditor(definedName.id);
-										},
-										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.PenIcon, {})
-									})
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Tooltip, {
-									title: localeService.t("definedName.deleteButton"),
-									placement: "top",
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-										className: "univer-rounded univer-p-1 univer-text-red-600 hover:univer-bg-gray-100",
-										onClick: (e) => {
-											e.stopPropagation();
-											deleteDefinedName(definedName.id);
-										},
-										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DeleteIcon, {})
-									})
 								})]
-							})]
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Confirm, {
-							visible: deleteConformKey === definedName.id,
-							onClose: handleDeleteClose,
-							onConfirm: () => {
-								handleDeleteConfirm(definedName.id);
-							},
-							children: localeService.t("definedName.deleteConfirmText")
-						}),
-						definedName.id === editorKey && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefinedNameInput, {
-							confirm: insertConfirm,
-							cancel: closeInput,
-							state: definedName.id === editorKey,
-							id: definedName.id,
-							inputId: definedName.id + index,
-							name: definedName.name,
-							formulaOrRefString: definedName.formulaOrRefString,
-							comment: definedName.comment,
-							localSheetId: definedName.localSheetId
-						})
-					]
-				}, index);
-			})]
-		})
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Confirm, {
+								visible: deleteConformKey === definedName.id,
+								onClose: handleDeleteClose,
+								onConfirm: () => {
+									handleDeleteConfirm(definedName.id);
+								},
+								children: localeService.t("definedName.deleteConfirmText")
+							}),
+							definedName.id === editorKey && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DefinedNameInput, {
+								confirm: insertConfirm,
+								cancel: closeInput,
+								state: definedName.id === editorKey,
+								id: definedName.id,
+								inputId: definedName.id + index,
+								name: definedName.name,
+								formulaOrRefString: definedName.formulaOrRefString,
+								comment: definedName.comment,
+								localSheetId: definedName.localSheetId
+							})
+						]
+					}, index);
+				})
+			})
+		})]
 	});
 };
 
@@ -20608,6 +20624,49 @@ const EditorContainer = () => {
 	});
 };
 
+//#endregion
+//#region src/services/utils/defined-name-utils.ts
+let DefinedNameBoxActionType = /* @__PURE__ */ function(DefinedNameBoxActionType) {
+	DefinedNameBoxActionType["Noop"] = "noop";
+	DefinedNameBoxActionType["FocusDefinedName"] = "focusDefinedName";
+	DefinedNameBoxActionType["FocusSelection"] = "focusSelection";
+	DefinedNameBoxActionType["CreateDefinedName"] = "createDefinedName";
+	DefinedNameBoxActionType["Reset"] = "reset";
+	return DefinedNameBoxActionType;
+}({});
+function resolveDefinedNameBoxAction(params) {
+	const { inputValue, rangeString, unitId, formulaOrRefString, univerInstanceService, definedNamesService, superTableService, functionService } = params;
+	if (inputValue === rangeString) return { type: DefinedNameBoxActionType.Noop };
+	const definedName = definedNamesService.getValueByName(unitId, inputValue);
+	if (definedName) return {
+		type: DefinedNameBoxActionType.FocusDefinedName,
+		definedName
+	};
+	if ((0, _univerjs_engine_formula.isReferenceStringWithEffectiveColumn)(inputValue)) return {
+		type: DefinedNameBoxActionType.FocusSelection,
+		refString: inputValue
+	};
+	if ((0, _univerjs_sheets.validateDefinedName)(inputValue, {
+		unitId,
+		formulaOrRefString,
+		univerInstanceService,
+		definedNamesService,
+		superTableService,
+		functionService
+	}) === true) return {
+		type: DefinedNameBoxActionType.CreateDefinedName,
+		name: inputValue
+	};
+	return { type: DefinedNameBoxActionType.Reset };
+}
+function getAbsoluteRefStringFromSelection(workbook, selections, lexerTreeBuilder) {
+	var _workbook$getActiveSh;
+	const sheetName = (_workbook$getActiveSh = workbook.getActiveSheet()) === null || _workbook$getActiveSh === void 0 ? void 0 : _workbook$getActiveSh.getName();
+	if (!sheetName || selections == null || selections.length === 0) return "";
+	const formulaOrRefs = selections.map((selection) => (0, _univerjs_engine_formula.serializeRangeWithSheet)(sheetName, selection.range)).join(",");
+	return lexerTreeBuilder.convertRefersToAbsolute(formulaOrRefs, _univerjs_core.AbsoluteRefType.ALL, _univerjs_core.AbsoluteRefType.ALL, sheetName);
+}
+
 //#endregion
 //#region src/views/defined-name/DefinedNameOverlay.tsx
 function DefinedNameOverlay({ search, isInputEvent }) {
@@ -20650,6 +20709,12 @@ function DefinedNameOverlay({ search, isInputEvent }) {
 		isInputEvent,
 		definedNames
 	]);
+	const listContainerRef = (0, react.useRef)(void 0);
+	const [virtualDefinedNames, virtualActions] = (0, _univerjs_ui.useVirtualList)(filteredDefinedNames, {
+		containerTarget: listContainerRef,
+		itemHeight: 30,
+		overscan: 6
+	});
 	const openSlider = () => {
 		commandService.executeCommand(SidebarDefinedNameOperation.id, { value: "open" });
 	};
@@ -20665,27 +20730,32 @@ function DefinedNameOverlay({ search, isInputEvent }) {
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "univer-w-[300px]",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-			className: (0, _univerjs_design.clsx)("univer-m-0 univer-max-h-[360px] univer-list-none univer-overflow-y-auto univer-p-0", _univerjs_design.scrollbarClassName),
-			children: filteredDefinedNames.map((definedName, index) => {
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
-					className: "univer-cursor-pointer univer-px-2 univer-transition-colors univer-duration-200 hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-600",
-					onClick: () => {
-						focusDefinedName(definedName);
-					},
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: (0, _univerjs_design.clsx)("univer-flex univer-items-center univer-justify-between univer-gap-2 univer-py-1", _univerjs_design.borderBottomClassName),
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "univer-w-[50%] univer-flex-shrink-0 univer-truncate univer-text-sm univer-text-gray-600 dark:!univer-text-gray-200",
-							title: definedName.name,
-							children: definedName.name
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "univer-w-[50%] univer-flex-shrink-0 univer-truncate univer-text-xs univer-text-gray-400",
-							title: definedName.formulaOrRefString,
-							children: definedName.formulaOrRefString
-						})]
-					})
-				}, index);
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: listContainerRef,
+			className: (0, _univerjs_design.clsx)("univer-max-h-[360px] univer-min-h-0 univer-overflow-y-auto", _univerjs_design.scrollbarClassName, { "univer-min-h-[30px]": filteredDefinedNames.length > 0 }),
+			...virtualActions.containerProps,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				style: virtualActions.wrapperStyle,
+				children: virtualDefinedNames.map(({ data: definedName, index }) => {
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+						className: "univer-cursor-pointer univer-px-2 univer-transition-colors univer-duration-200 hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-600",
+						onClick: () => {
+							focusDefinedName(definedName);
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: (0, _univerjs_design.clsx)("univer-flex univer-items-center univer-justify-between univer-gap-2 univer-py-1", _univerjs_design.borderBottomClassName),
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "univer-w-[50%] univer-flex-shrink-0 univer-truncate univer-text-sm univer-text-gray-600 dark:!univer-text-gray-200",
+								title: definedName.name,
+								children: definedName.name
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "univer-w-[50%] univer-flex-shrink-0 univer-truncate univer-text-xs univer-text-gray-400",
+								title: definedName.formulaOrRefString,
+								children: definedName.formulaOrRefString
+							})]
+						})
+					}, index);
+				})
 			})
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "univer-cursor-pointer univer-p-2 univer-transition-colors univer-duration-200 hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-600",
@@ -20711,11 +20781,15 @@ function DefinedName({ disable }) {
 	const univerInstanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
 	const selectionManagerService = (0, _univerjs_ui.useDependency)(_univerjs_sheets.SheetsSelectionsService);
 	const lexerTreeBuilder = (0, _univerjs_ui.useDependency)(_univerjs_engine_formula.LexerTreeBuilder);
+	const superTableService = (0, _univerjs_ui.useDependency)(_univerjs_engine_formula.ISuperTableService);
+	const functionService = (0, _univerjs_ui.useDependency)(_univerjs_engine_formula.IFunctionService);
+	const layoutService = (0, _univerjs_ui.useDependency)(_univerjs_ui.ILayoutService);
 	const workbook = univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET);
 	const unitId = workbook === null || workbook === void 0 ? void 0 : workbook.getUnitId();
 	const themeService = (0, _univerjs_ui.useDependency)(_univerjs_core.ThemeService);
 	const [open, setOpen] = (0, react.useState)(false);
 	const [isInputEvent, setIsInputEvent] = (0, react.useState)(false);
+	const inputRef = (0, react.useRef)(null);
 	const getDefinedNameMap = () => {
 		const definedNameMap = definedNamesService.getDefinedNameMap(unitId);
 		if (definedNameMap) return Array.from(Object.values(definedNameMap));
@@ -20744,7 +20818,7 @@ function DefinedName({ disable }) {
 			commandService.executeCommand(ScrollToCellCommand.id, { range: selections[0].range });
 		});
 	};
-	const [definedNames, setDefinedNames] = (0, react.useState)(getDefinedNameMap());
+	const [definedNames, setDefinedNames] = (0, react.useState)(() => getDefinedNameMap());
 	(0, react.useEffect)(() => {
 		const definedNamesSubscription = definedNamesService.update$.subscribe(() => {
 			setDefinedNames(getDefinedNameMap());
@@ -20755,13 +20829,7 @@ function DefinedName({ disable }) {
 	}, []);
 	(0, react.useEffect)(() => {
 		const subscription = definedNamesService.currentRange$.subscribe(() => {
-			var _selections$map;
-			const selections = selectionManagerService.getCurrentSelections();
-			const worksheet = workbook.getActiveSheet();
-			const formulaOrRefs = selections === null || selections === void 0 || (_selections$map = selections.map((selection) => {
-				return (0, _univerjs_engine_formula.serializeRangeWithSheet)(worksheet.getName(), selection.range);
-			})) === null || _selections$map === void 0 ? void 0 : _selections$map.join(",");
-			const absoluteRef = lexerTreeBuilder.convertRefersToAbsolute(formulaOrRefs, _univerjs_core.AbsoluteRefType.ALL, _univerjs_core.AbsoluteRefType.ALL, worksheet.getName());
+			const absoluteRef = getAbsoluteRefStringFromSelection(workbook, selectionManagerService.getCurrentSelections(), lexerTreeBuilder);
 			const definedName = definedNamesService.getDefinedNameByRefString(unitId, absoluteRef);
 			if (definedName) {
 				setRangeString(definedName.name);
@@ -20792,22 +20860,59 @@ function DefinedName({ disable }) {
 		handleDefinedNamesList(value);
 	}
 	function confirm() {
-		if (inputValue === rangeString) return;
-		const definedName = definedNames.find((i) => i.name === inputValue);
-		if (definedName) {
-			setRangeString(inputValue);
-			focusDefinedName(definedName);
-		} else if ((0, _univerjs_engine_formula.isReferenceStringWithEffectiveColumn)(inputValue)) {
-			setRangeString(inputValue);
-			focusSelection(inputValue);
-		} else resetValue();
+		const formulaOrRefString = getAbsoluteRefStringFromSelection(workbook, selectionManagerService.getCurrentSelections(), lexerTreeBuilder);
+		const action = resolveDefinedNameBoxAction({
+			inputValue,
+			rangeString,
+			unitId,
+			formulaOrRefString,
+			univerInstanceService,
+			definedNamesService,
+			superTableService,
+			functionService
+		});
+		switch (action.type) {
+			case DefinedNameBoxActionType.Noop: return true;
+			case DefinedNameBoxActionType.FocusDefinedName:
+				setRangeString(action.definedName.name);
+				setInputValue(action.definedName.name);
+				focusDefinedName(action.definedName);
+				return true;
+			case DefinedNameBoxActionType.FocusSelection:
+				setRangeString(action.refString);
+				setInputValue(action.refString);
+				focusSelection(action.refString);
+				return true;
+			case DefinedNameBoxActionType.CreateDefinedName: {
+				if (!formulaOrRefString) {
+					resetValue();
+					return false;
+				}
+				const result = commandService.syncExecuteCommand(_univerjs_sheets.InsertDefinedNameCommand.id, {
+					id: (0, _univerjs_core.generateRandomId)(10),
+					unitId,
+					name: action.name,
+					formulaOrRefString,
+					localSheetId: _univerjs_sheets.SCOPE_WORKBOOK_VALUE_DEFINED_NAME
+				});
+				if (result) {
+					setRangeString(action.name);
+					setInputValue(action.name);
+				} else resetValue();
+				return !!result;
+			}
+			case DefinedNameBoxActionType.Reset:
+				resetValue();
+				return false;
+		}
 	}
 	function handleKeyDown(e) {
 		if (disable) return;
 		if (e.key === "Enter") {
-			confirm();
+			const handled = confirm();
 			setIsInputEvent(false);
 			setOpen(false);
+			if (handled) layoutService.focus();
 		} else if (e.key === "Escape") {
 			e.preventDefault();
 			setIsInputEvent(false);
@@ -20839,6 +20944,7 @@ function DefinedName({ disable }) {
 		"data-u-comp": "defined-name",
 		className: "univer-relative univer-box-border univer-flex univer-h-full univer-w-24 univer-border-r-gray-200 univer-py-1.5 univer-transition-all",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			ref: inputRef,
 			className: (0, _univerjs_design.clsx)("univer-box-border univer-size-full univer-appearance-none univer-pl-1.5 univer-pr-5 univer-text-gray-900 focus:univer-outline-none dark:!univer-border-r-gray-700 dark:!univer-bg-gray-900 dark:!univer-text-white", _univerjs_design.borderRightClassName, { "univer-cursor-not-allowed": disable }),
 			type: "text",
 			value: inputValue,
@@ -23815,7 +23921,7 @@ const useHighlightRange = (ranges = []) => {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-ui";
-var version = "0.21.0";
+var version = "0.21.1";
 
 //#endregion
 //#region src/services/cell-alert-manager.service.ts