@univerjs/sheets-data-validation-ui 0.24.0 → 0.25.0

package/lib/cjs/index.js

@@ -45,10 +45,10 @@ let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region package.json
 var name = "@univerjs/sheets-data-validation-ui";
-var version = "0.24.0";
+var version = "0.25.0";
 
 //#endregion
-//#region \0@oxc-project+runtime@0.129.0/helpers/typeof.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -59,7 +59,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.129.0/helpers/toPrimitive.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -72,14 +72,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.129.0/helpers/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.129.0/helpers/defineProperty.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -90,7 +90,7 @@ function _defineProperty(e, r, t) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.129.0/helpers/decorateParam.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -98,7 +98,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.129.0/helpers/decorate.js
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -238,7 +238,7 @@ let DataValidationRejectInputController = class DataValidationRejectInputControl
 			if (await this._sheetsDataValidationValidatorService.validatorCell(unitId, subUnitId, row, col) === _univerjs_core.DataValidationStatus.VALID) return next(Promise.resolve(true));
 			this._dialogService.open({
 				width: 368,
-				title: { title: this._localeService.t("dataValidation.alert.title") },
+				title: { title: this._localeService.t("sheets-data-validation-ui.alert.title") },
 				id: "reject-input-dialog",
 				children: { title: validator.getRuleFinalError(rule, {
 					row,
@@ -249,7 +249,7 @@ let DataValidationRejectInputController = class DataValidationRejectInputControl
 				footer: { title: (0, react.createElement)(_univerjs_design.Button, {
 					variant: "primary",
 					onClick: () => this._dialogService.close("reject-input-dialog")
-				}, this._localeService.t("dataValidation.alert.ok")) },
+				}, this._localeService.t("sheets-data-validation-ui.alert.ok")) },
 				onClose: () => {
 					this._dialogService.close("reject-input-dialog");
 				}
@@ -260,13 +260,13 @@ let DataValidationRejectInputController = class DataValidationRejectInputControl
 	showReject(title) {
 		this._dialogService.open({
 			width: 368,
-			title: { title: this._localeService.t("dataValidation.alert.title") },
+			title: { title: this._localeService.t("sheets-data-validation-ui.alert.title") },
 			id: "reject-input-dialog",
 			children: { title },
 			footer: { title: (0, react.createElement)(_univerjs_design.Button, {
 				variant: "primary",
 				onClick: () => this._dialogService.close("reject-input-dialog")
-			}, this._localeService.t("dataValidation.alert.ok")) },
+			}, this._localeService.t("sheets-data-validation-ui.alert.ok")) },
 			onClose: () => {
 				this._dialogService.close("reject-input-dialog");
 			}
@@ -461,7 +461,8 @@ let DataValidationDropdownManagerService = class DataValidationDropdownManagerSe
 				var _this$_configService$, _this$_configService$2, _this$_configService$3, _this$_configService$4;
 				const multiple = validator.dropdownType === _univerjs_data_validation.DataValidatorDropdownType.MULTIPLE_LIST;
 				const handleSave = async (newValue) => {
-					const str = (0, _univerjs_sheets_data_validation.serializeListOptions)(newValue);
+					var _newValue$;
+					const str = multiple ? (0, _univerjs_sheets.serializeListOptions)(newValue) : (_newValue$ = newValue[0]) !== null && _newValue$ !== void 0 ? _newValue$ : "";
 					const params = {
 						unitId,
 						subUnitId,
@@ -679,7 +680,7 @@ const OpenValidationPanelOperation = {
 		});
 		const disposable = sidebarService.open({
 			id: DATA_VALIDATION_PANEL,
-			header: { title: isAdd ? "dataValidation.panel.addTitle" : "dataValidation.panel.title" },
+			header: { title: isAdd ? "sheets-data-validation-ui.panel.addTitle" : "sheets-data-validation-ui.panel.title" },
 			children: { label: DATA_VALIDATION_PANEL },
 			width: 312,
 			onClose: () => dataValidationPanelService.close()
@@ -807,7 +808,7 @@ let DataValidationAlertController = class DataValidationAlertController extends
 					}
 					this._cellAlertManagerService.showAlert({
 						type: _univerjs_sheets_ui.CellAlertType.ERROR,
-						title: this._localeService.t("dataValidation.error.title"),
+						title: this._localeService.t("sheets-data-validation-ui.error.title"),
 						message: validator === null || validator === void 0 ? void 0 : validator.getRuleFinalError(rule, cellPos.location),
 						location: cellPos.location,
 						width: 200,
@@ -1115,7 +1116,7 @@ let DataValidationPermissionController = class DataValidationPermissionControlle
 					workbookTypes: [_univerjs_sheets.WorkbookEditablePermission],
 					rangeTypes: [_univerjs_sheets.RangeProtectionPermissionEditPoint],
 					worksheetTypes: [_univerjs_sheets.WorksheetEditPermission, _univerjs_sheets.WorksheetSetCellStylePermission]
-				}, ranges, unitId, subUnitId)) this._sheetPermissionCheckController.blockExecuteWithoutPermission(this._localeService.t("permission.dialog.setStyleErr"));
+				}, ranges, unitId, subUnitId)) this._sheetPermissionCheckController.blockExecuteWithoutPermission(this._localeService.t("sheets-data-validation-ui.permission.dialog.setStyleErr"));
 			}
 			if (command.id === _univerjs_sheets_data_validation.UpdateSheetDataValidationRangeCommand.id) {
 				const { unitId, subUnitId, ranges } = command.params;
@@ -1123,7 +1124,7 @@ let DataValidationPermissionController = class DataValidationPermissionControlle
 					workbookTypes: [_univerjs_sheets.WorkbookEditablePermission],
 					rangeTypes: [_univerjs_sheets.RangeProtectionPermissionEditPoint],
 					worksheetTypes: [_univerjs_sheets.WorksheetEditPermission, _univerjs_sheets.WorksheetSetCellStylePermission]
-				}, ranges, unitId, subUnitId)) this._sheetPermissionCheckController.blockExecuteWithoutPermission(this._localeService.t("permission.dialog.setStyleErr"));
+				}, ranges, unitId, subUnitId)) this._sheetPermissionCheckController.blockExecuteWithoutPermission(this._localeService.t("sheets-data-validation-ui.permission.dialog.setStyleErr"));
 			}
 		}));
 	}
@@ -1142,7 +1143,7 @@ function dataValidationMenuFactory(accessor) {
 		id: DATA_VALIDATION_MENU_ID,
 		type: _univerjs_ui.MenuItemType.SUBITEMS,
 		icon: "DataValidationIcon",
-		tooltip: "dataValidation.title",
+		tooltip: "sheets-data-validation-ui.title",
 		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_SHEET),
 		disabled$: (0, _univerjs_sheets_ui.getCurrentRangeDisable$)(accessor, {
 			workbookTypes: [_univerjs_sheets.WorkbookEditablePermission],
@@ -1154,14 +1155,14 @@ function dataValidationMenuFactory(accessor) {
 function openDataValidationMenuFactory(_accessor) {
 	return {
 		id: OpenValidationPanelOperation.id,
-		title: "dataValidation.panel.title",
+		title: "sheets-data-validation-ui.panel.title",
 		type: _univerjs_ui.MenuItemType.BUTTON
 	};
 }
 function addDataValidationMenuFactory(_accessor) {
 	return {
 		id: AddSheetDataValidationAndOpenCommand.id,
-		title: "dataValidation.panel.add",
+		title: "sheets-data-validation-ui.panel.add",
 		type: _univerjs_ui.MenuItemType.BUTTON
 	};
 }
@@ -1506,14 +1507,14 @@ function DataValidationOptions(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "univer-mb-3 univer-flex univer-cursor-pointer univer-items-center univer-text-sm univer-text-gray-900 dark:!univer-text-white",
 		onClick: () => setShow(!show),
-		children: [localeService.t("dataValidation.panel.options"), show ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreUpIcon, { className: "univer-ml-1" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, { className: "univer-ml-1" })]
+		children: [localeService.t("sheets-data-validation-ui.panel.options"), show ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreUpIcon, { className: "univer-ml-1" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, { className: "univer-ml-1" })]
 	}), show && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 		ExtraOptions ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExtraOptions, {
 			value,
 			onChange
 		}) : null,
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.FormLayout, {
-			label: localeService.t("dataValidation.panel.invalid"),
+			label: localeService.t("sheets-data-validation-ui.panel.invalid"),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.RadioGroup, {
 				value: `${(_value$errorStyle = value.errorStyle) !== null && _value$errorStyle !== void 0 ? _value$errorStyle : _univerjs_core.DataValidationErrorStyle.WARNING}`,
 				onChange: (errorStyle) => onChange({
@@ -1522,22 +1523,22 @@ function DataValidationOptions(props) {
 				}),
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
 					value: `${_univerjs_core.DataValidationErrorStyle.WARNING}`,
-					children: localeService.t("dataValidation.panel.showWarning")
+					children: localeService.t("sheets-data-validation-ui.panel.showWarning")
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
 					value: `${_univerjs_core.DataValidationErrorStyle.STOP}`,
-					children: localeService.t("dataValidation.panel.rejectInput")
+					children: localeService.t("sheets-data-validation-ui.panel.rejectInput")
 				})]
 			})
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.FormLayout, {
-			label: localeService.t("dataValidation.panel.messageInfo"),
+			label: localeService.t("sheets-data-validation-ui.panel.messageInfo"),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Checkbox, {
 				checked: value.showErrorMessage,
 				onChange: () => onChange({
 					...value,
 					showErrorMessage: !value.showErrorMessage
 				}),
-				children: localeService.t("dataValidation.panel.showInfo")
+				children: localeService.t("sheets-data-validation-ui.panel.showInfo")
 			})
 		}),
 		value.showErrorMessage ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.FormLayout, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Input, {
@@ -1750,8 +1751,8 @@ function DataValidationDetail() {
 		className: "univer-py-2",
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.FormLayout, {
-				label: localeService.t("dataValidation.panel.range"),
-				error: !localRule.ranges.length || isRangeError ? localeService.t("dataValidation.panel.rangeError") : "",
+				label: localeService.t("sheets-data-validation-ui.panel.range"),
+				error: !localRule.ranges.length || isRangeError ? localeService.t("sheets-data-validation-ui.panel.rangeError") : "",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_sheets_formula_ui.RangeSelector, {
 					selectorRef: rangeSelectorInstance,
 					unitId,
@@ -1770,7 +1771,7 @@ function DataValidationDetail() {
 				})
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.FormLayout, {
-				label: localeService.t("dataValidation.panel.type"),
+				label: localeService.t("sheets-data-validation-ui.panel.type"),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
 					className: "univer-w-full",
 					value: localRule.type,
@@ -1782,13 +1783,13 @@ function DataValidationDetail() {
 				})
 			}),
 			(operators === null || operators === void 0 ? void 0 : operators.length) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.FormLayout, {
-				label: localeService.t("dataValidation.panel.operator"),
+				label: localeService.t("sheets-data-validation-ui.panel.operator"),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
 					className: "univer-w-full",
 					value: `${localRule.operator}`,
 					options: [{
 						value: "",
-						label: localeService.t("dataValidation.operators.legal")
+						label: localeService.t("data-validation.operators.legal")
 					}, ...operators.map((op, i) => ({
 						value: `${op}`,
 						label: operatorNames[i]
@@ -1828,7 +1829,7 @@ function DataValidationDetail() {
 						allowBlank: !((_localRule$allowBlank2 = localRule.allowBlank) !== null && _localRule$allowBlank2 !== void 0 ? _localRule$allowBlank2 : true)
 					});
 				},
-				children: localeService.t("dataValidation.panel.allowBlank")
+				children: localeService.t("sheets-data-validation-ui.panel.allowBlank")
 			}) }),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataValidationOptions, {
 				value: options,
@@ -1840,12 +1841,12 @@ function DataValidationDetail() {
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
 					className: "univer-ml-3",
 					onClick: handleDelete,
-					children: localeService.t("dataValidation.panel.removeRule")
+					children: localeService.t("sheets-data-validation-ui.panel.removeRule")
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
 					className: "univer-ml-3",
 					variant: "primary",
 					onClick: handleOk,
-					children: localeService.t("dataValidation.panel.done")
+					children: localeService.t("sheets-data-validation-ui.panel.done")
 				})]
 			})
 		]
@@ -2017,11 +2018,11 @@ function DataValidationList(props) {
 			className: "univer-mt-4 univer-flex univer-flex-row univer-justify-end univer-gap-2",
 			children: [rules.length && !hasDisableRule ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
 				onClick: handleRemoveAll,
-				children: localeService.t("dataValidation.panel.removeAll")
+				children: localeService.t("sheets-data-validation-ui.panel.removeAll")
 			}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
 				variant: "primary",
 				onClick: handleAddRule,
-				children: localeService.t("dataValidation.panel.add")
+				children: localeService.t("sheets-data-validation-ui.panel.add")
 			})]
 		})]
 	});
@@ -2054,7 +2055,7 @@ const BaseFormulaInput = (props) => {
 			error: formula1Res,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Input, {
 				className: "univer-w-full",
-				placeholder: localeService.t("dataValidation.panel.formulaPlaceholder"),
+				placeholder: localeService.t("sheets-data-validation-ui.panel.formulaPlaceholder"),
 				value: value === null || value === void 0 ? void 0 : value.formula1,
 				onChange: (newValue) => {
 					onChange === null || onChange === void 0 || onChange({
@@ -2066,13 +2067,13 @@ const BaseFormulaInput = (props) => {
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "-univer-mt-2 univer-mb-1 univer-text-sm univer-text-gray-400",
-			children: localeService.t("dataValidation.panel.formulaAnd")
+			children: localeService.t("sheets-data-validation-ui.panel.formulaAnd")
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.FormLayout, {
 			error: formula2Res,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Input, {
 				className: "univer-w-full",
-				placeholder: localeService.t("dataValidation.panel.formulaPlaceholder"),
+				placeholder: localeService.t("sheets-data-validation-ui.panel.formulaPlaceholder"),
 				value: value === null || value === void 0 ? void 0 : value.formula2,
 				onChange: (newValue) => {
 					onChange === null || onChange === void 0 || onChange({
@@ -2087,7 +2088,7 @@ const BaseFormulaInput = (props) => {
 		error: formula1Res,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Input, {
 			className: "univer-w-full",
-			placeholder: localeService.t("dataValidation.panel.formulaPlaceholder"),
+			placeholder: localeService.t("sheets-data-validation-ui.panel.formulaPlaceholder"),
 			value: value === null || value === void 0 ? void 0 : value.formula1,
 			onChange: (newValue) => {
 				onChange === null || onChange === void 0 || onChange({ formula1: newValue });
@@ -2118,14 +2119,14 @@ function CheckboxFormulaInput(props) {
 					});
 				}
 			},
-			children: localeService.t("dataValidation.checkbox.tips")
+			children: localeService.t("sheets-data-validation-ui.checkbox.tips")
 		}) }),
 		checked ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.FormLayout, {
-			label: localeService.t("dataValidation.checkbox.checked"),
+			label: localeService.t("sheets-data-validation-ui.checkbox.checked"),
 			error: formula1Res,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Input, {
 				className: "univer-w-full",
-				placeholder: localeService.t("dataValidation.panel.valuePlaceholder"),
+				placeholder: localeService.t("sheets-data-validation-ui.panel.valuePlaceholder"),
 				value: value === null || value === void 0 ? void 0 : value.formula1,
 				onChange: (newValue) => {
 					onChange === null || onChange === void 0 || onChange({
@@ -2136,11 +2137,11 @@ function CheckboxFormulaInput(props) {
 			})
 		}) : null,
 		checked ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.FormLayout, {
-			label: localeService.t("dataValidation.checkbox.unchecked"),
+			label: localeService.t("sheets-data-validation-ui.checkbox.unchecked"),
 			error: formula2Res,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Input, {
 				className: "univer-w-full",
-				placeholder: localeService.t("dataValidation.panel.valuePlaceholder"),
+				placeholder: localeService.t("sheets-data-validation-ui.panel.valuePlaceholder"),
 				value: value === null || value === void 0 ? void 0 : value.formula2,
 				onChange: (newValue) => {
 					onChange === null || onChange === void 0 || onChange({
@@ -2188,6 +2189,37 @@ function CustomFormulaInput(props) {
 	});
 }
 
+//#endregion
+//#region src/views/components/formula-input/utils.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+function buildCustomListFormulaPayload(items, defaultColor) {
+	const labelSet = /* @__PURE__ */ new Set();
+	const finalList = [];
+	items.forEach((item) => {
+		if (!item.label || labelSet.has(item.label)) return;
+		labelSet.add(item.label);
+		finalList.push(item);
+	});
+	return {
+		formula1: (0, _univerjs_sheets.serializeListOptions)(finalList.map((item) => item.label)),
+		formula2: finalList.map((item) => item.color === defaultColor ? "" : item.color).join(",")
+	};
+}
+
 //#endregion
 //#region src/views/components/formula-input/ListFormulaInput.tsx
 const DEFAULT_COLOR_PRESET = [
@@ -2274,8 +2306,9 @@ const Template = (props) => {
 		]
 	});
 };
+const NOOP = () => {};
 function ListFormulaInput(props) {
-	const { value, onChange: _onChange = () => {}, unitId, subUnitId, validResult, showError, ruleId } = props;
+	const { value, onChange: _onChange = NOOP, unitId, subUnitId, validResult, showError, ruleId } = props;
 	const { formula1 = "", formula2 = "" } = value || {};
 	const [isFormulaStr, setIsFormulaStr] = (0, react.useState)(() => (0, _univerjs_core.isFormulaString)(formula1) ? "1" : "0");
 	const [formulaStr, setFormulaStr] = (0, react.useState)(isFormulaStr === "1" ? formula1 : "=");
@@ -2313,7 +2346,7 @@ function ListFormulaInput(props) {
 		}
 	}, [formulaStrCopy, formula1]);
 	const [strList, setStrList] = (0, react.useState)(() => {
-		const strOptions = isFormulaStr !== "1" ? (0, _univerjs_sheets_data_validation.deserializeListOptions)(formula1) : [];
+		const strOptions = isFormulaStr !== "1" ? (0, _univerjs_sheets.deserializeListOptions)(formula1) : [];
 		const strColors = formula2.split(",");
 		return strOptions.map((label, i) => ({
 			label,
@@ -2336,13 +2369,12 @@ function ListFormulaInput(props) {
 			setStrList([...strList]);
 		}
 	};
-	const colorList = formula2.split(",");
 	const refFinalList = (0, react.useMemo)(() => refOptions.map((label, i) => ({
 		label,
-		color: colorList[i] || "#ECECEC",
+		color: refColors[i] || "#ECECEC",
 		id: `${i}`,
 		isRef: true
-	})), [colorList, refOptions]);
+	})), [refColors, refOptions]);
 	const handleRefItemChange = (id, value, color) => {
 		const newColors = [...refColors];
 		newColors[+id] = color;
@@ -2362,34 +2394,11 @@ function ListFormulaInput(props) {
 	};
 	(0, react.useEffect)(() => {
 		if (isFormulaStr === "1") return;
-		const labelSet = /* @__PURE__ */ new Set();
-		const finalList = [];
-		strList.map((item) => {
-			return {
-				labelList: item.label.split(","),
-				item
-			};
-		}).forEach(({ item, labelList }) => {
-			labelList.forEach((labelItem) => {
-				if (!labelSet.has(labelItem)) {
-					labelSet.add(labelItem);
-					finalList.push({
-						label: labelItem,
-						color: item.color
-					});
-				}
-			});
-		});
-		onChange({
-			formula1: (0, _univerjs_sheets_data_validation.serializeListOptions)(finalList.map((item) => item.label)),
-			formula2: finalList.map((item) => item.color === "#ECECEC" ? "" : item.color).join(",")
-		});
+		onChange(buildCustomListFormulaPayload(strList, DROP_DOWN_DEFAULT_COLOR));
 	}, [
 		strList,
 		onChange,
-		isFormulaStr,
-		formulaStrCopy,
-		refColors
+		isFormulaStr
 	]);
 	const updateFormula = (0, _univerjs_ui.useEvent)(async (str) => {
 		if (!(0, _univerjs_core.isFormulaString)(str)) {
@@ -2411,7 +2420,7 @@ function ListFormulaInput(props) {
 				formula2
 			});
 			setFormulaStr("=");
-			setLocalError(localeService.t("dataValidation.validFail.formulaError"));
+			setLocalError(localeService.t("sheets-data-validation-ui.validFail.formulaError"));
 		}
 	});
 	const formulaEditorRef = (0, react.useRef)(null);
@@ -2429,7 +2438,7 @@ function ListFormulaInput(props) {
 		dataValidationPanelService
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.FormLayout, {
-		label: localeService.t("dataValidation.list.options"),
+		label: localeService.t("sheets-data-validation-ui.list.options"),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.RadioGroup, {
 			value: isFormulaStr,
 			onChange: (v) => {
@@ -2442,10 +2451,10 @@ function ListFormulaInput(props) {
 			},
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
 				value: "0",
-				children: localeService.t("dataValidation.list.customOptions")
+				children: localeService.t("sheets-data-validation-ui.list.customOptions")
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
 				value: "1",
-				children: localeService.t("dataValidation.list.refOptions")
+				children: localeService.t("sheets-data-validation-ui.list.refOptions")
 			})]
 		})
 	}), isFormulaStr === "1" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.FormLayout, {
@@ -2476,28 +2485,25 @@ function ListFormulaInput(props) {
 		})]
 	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.FormLayout, {
 		error: formula1Res,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "-univer-mt-3",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.DraggableList, {
-				list: strList,
-				onListChange: setStrList,
-				rowHeight: 28,
-				margin: [0, 12],
-				draggableHandle: ".draggableHandle",
-				itemRender: (item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Template, {
-					item,
-					commonProps: {
-						onItemChange: handleStrItemChange,
-						onItemDelete: handleStrItemDelete
-					}
-				}, item.id),
-				idKey: "id"
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
-				className: "univer-text-primary univer-flex univer-w-fit univer-cursor-pointer univer-flex-row univer-items-center univer-rounded univer-p-1 univer-px-2 univer-text-sm hover:univer-bg-primary-50 dark:hover:!univer-bg-gray-800",
-				onClick: handleAdd,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.IncreaseIcon, { className: "univer-mr-1" }), localeService.t("dataValidation.list.add")]
-			})]
-		})
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.DraggableList, {
+			list: strList,
+			onListChange: setStrList,
+			rowHeight: 28,
+			margin: [0, 12],
+			draggableHandle: ".draggableHandle",
+			itemRender: (item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Template, {
+				item,
+				commonProps: {
+					onItemChange: handleStrItemChange,
+					onItemDelete: handleStrItemDelete
+				}
+			}, item.id),
+			idKey: "id"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+			className: "univer-text-primary univer-flex univer-w-fit univer-cursor-pointer univer-flex-row univer-items-center univer-rounded univer-p-1 univer-px-2 univer-text-sm hover:univer-bg-primary-50 dark:hover:!univer-bg-gray-800",
+			onClick: handleAdd,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.IncreaseIcon, { className: "univer-mr-1" }), localeService.t("sheets-data-validation-ui.list.add")]
+		})] })
 	})] });
 }
 
@@ -2518,7 +2524,7 @@ function ListRenderModeInput(props) {
 	const { value, onChange } = props;
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.FormLayout, {
-		label: localeService.t("dataValidation.renderMode.label"),
+		label: localeService.t("sheets-data-validation-ui.renderMode.label"),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.RadioGroup, {
 			value: `${(_value$renderMode = value.renderMode) !== null && _value$renderMode !== void 0 ? _value$renderMode : _univerjs_core.DataValidationRenderMode.CUSTOM}`,
 			onChange: (renderMode) => onChange({
@@ -2528,15 +2534,15 @@ function ListRenderModeInput(props) {
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
 					value: `${_univerjs_core.DataValidationRenderMode.CUSTOM}`,
-					children: localeService.t("dataValidation.renderMode.chip")
+					children: localeService.t("sheets-data-validation-ui.renderMode.chip")
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
 					value: `${_univerjs_core.DataValidationRenderMode.ARROW}`,
-					children: localeService.t("dataValidation.renderMode.arrow")
+					children: localeService.t("sheets-data-validation-ui.renderMode.arrow")
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
 					value: `${_univerjs_core.DataValidationRenderMode.TEXT}`,
-					children: localeService.t("dataValidation.renderMode.text")
+					children: localeService.t("sheets-data-validation-ui.renderMode.text")
 				})
 			]
 		})
@@ -2562,7 +2568,7 @@ function DateShowTimeOption(props) {
 				}
 			});
 		},
-		children: localeService.t("dataValidation.showTime.label")
+		children: localeService.t("sheets-data-validation-ui.showTime.label")
 	}) });
 }
 DateShowTimeOption.componentKey = DATE_SHOW_TIME_OPTION;
@@ -2874,9 +2880,7 @@ const PADDING_H$1 = 4;
 const PADDING_V$1 = 0;
 const MARGIN_H$1 = 4;
 const MARGIN_V$1 = 4;
-const CELL_PADDING_H = 6;
 const CELL_PADDING_V = 6;
-const ICON_PLACE$1 = 14;
 function getDropdownItemSize(text, fontStyle) {
 	const bBox = _univerjs_engine_render.FontCache.getTextSize(text, fontStyle);
 	const rectWidth = bBox.width + 4 * 2;
@@ -2888,7 +2892,7 @@ function getDropdownItemSize(text, fontStyle) {
 	};
 }
 function layoutDropdowns(items, fontStyle, cellWidth, cellHeight) {
-	const cellPaddingH = 14 + 6 * 2;
+	const cellPaddingH = 26;
 	const widthAvailableForContent = cellWidth - cellPaddingH;
 	const heightAvailableForContent = cellHeight - 6 * 2;
 	const textLayout = items.map((item) => ({
@@ -3448,15 +3452,15 @@ let DropdownWidget = class DropdownWidget {
 		let { tb, pd } = style || {};
 		const { l = _univerjs_core.DEFAULT_STYLES.pd.l, r = _univerjs_core.DEFAULT_STYLES.pd.r } = pd !== null && pd !== void 0 ? pd : {};
 		tb = (_tb3 = tb) !== null && _tb3 !== void 0 ? _tb3 : _univerjs_core.WrapStrategy.WRAP;
-		let paddingAll = MARGIN_H * 2 + ICON_PLACE;
+		let paddingAll = 26;
 		switch (rule.renderMode) {
 			case _univerjs_core.DataValidationRenderMode.ARROW:
-				paddingAll = ICON_PLACE + 4 + r + l;
+				paddingAll = 18 + r + l;
 				break;
 			case _univerjs_core.DataValidationRenderMode.CUSTOM:
-				paddingAll = ICON_PLACE + MARGIN_H * 2 + PADDING_H * 2 + r + l + RADIUS_BG / 2 + 1;
+				paddingAll = 34 + r + l + RADIUS_BG / 2 + 1;
 				break;
-			default: paddingAll = ICON_PLACE + MARGIN_H * 2 + PADDING_H * 2 + r + l + RADIUS_BG / 2 + 1;
+			default: paddingAll = 34 + r + l + RADIUS_BG / 2 + 1;
 		}
 		const widthForTextLayout = cellWidth - paddingAll;
 		const skeleton = new _univerjs_engine_render.DocSimpleSkeleton(valueStr, (0, _univerjs_engine_render.getFontStyleString)(style).fontCache, Boolean(tb === _univerjs_core.WrapStrategy.WRAP), widthForTextLayout, Infinity);