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

package/lib/index.js

@@ -1,7 +1,7 @@
 import { CellValueType, ColorKit, CommandType, DEFAULT_STYLES, DataValidationErrorStyle, DataValidationRenderMode, DataValidationStatus, DataValidationType, DependentOn, Disposable, DisposableCollection, HorizontalAlign, ICommandService, IConfigService, IUniverInstanceService, Inject, Injector, InterceptorEffectEnum, LocaleService, ObjectMatrix, Optional, Plugin, Range, Rectangle, RedoCommand, RxDisposable, ThemeService, UndoCommand, UniverInstanceType, VerticalAlign, WrapStrategy, awaitTime, bufferDebounceTime, dateKit, debounce, generateRandomId, isFormulaString, isUnitRangesEqual, merge, numfmt, queryObjectMatrix, sequenceExecute, shallowEqual, toDisposable } from "@univerjs/core";
 import { CURSOR_TYPE, CheckboxShape, DeviceInputEventType, DocSimpleSkeleton, FontCache, IRenderManagerService, Rect, Shape, Text, Transform, fixLineWidthByScale, getCurrentTypeOfRenderer, getFontStyleString } from "@univerjs/engine-render";
-import { AUTO_FILL_APPLY_TYPE, AutoFillTools, IAutoFillService, INTERCEPTOR_POINT, InterceptCellContentPriority, RangeProtectionPermissionEditPoint, SetRangeValuesCommand, SetWorksheetActiveOperation, SheetInterceptorService, SheetPermissionCheckController, SheetsSelectionsService, VALIDATE_CELL, WorkbookEditablePermission, WorksheetEditPermission, WorksheetSetCellStylePermission, checkRangesEditablePermission, getSheetCommandTarget, rangeToDiscreteRange } from "@univerjs/sheets";
-import { AddSheetDataValidationCommand, BASE_FORMULA_INPUT_NAME as BASE_FORMULA_INPUT_NAME$1, CHECKBOX_FORMULA_1, CHECKBOX_FORMULA_2, CHECKBOX_FORMULA_INPUT_NAME, CUSTOM_FORMULA_INPUT_NAME, DATA_VALIDATION_PLUGIN_NAME, DataValidationCacheService, DataValidationFormulaController, DataValidationFormulaService, LIST_FORMULA_INPUT_NAME, RemoveSheetAllDataValidationCommand, RemoveSheetDataValidationCommand, SheetDataValidationModel, SheetsDataValidationValidatorService, UniverSheetsDataValidationPlugin, UpdateSheetDataValidationOptionsCommand, UpdateSheetDataValidationRangeCommand, UpdateSheetDataValidationSettingCommand, createDefaultNewRule, deserializeListOptions, getCellValueOrigin, getDataValidationCellValue, getDataValidationDiffMutations, getFormulaResult, isLegalFormulaResult, serializeListOptions, transformCheckboxValue } from "@univerjs/sheets-data-validation";
+import { AUTO_FILL_APPLY_TYPE, AutoFillTools, IAutoFillService, INTERCEPTOR_POINT, InterceptCellContentPriority, RangeProtectionPermissionEditPoint, SetRangeValuesCommand, SetWorksheetActiveOperation, SheetInterceptorService, SheetPermissionCheckController, SheetsSelectionsService, VALIDATE_CELL, WorkbookEditablePermission, WorksheetEditPermission, WorksheetSetCellStylePermission, checkRangesEditablePermission, deserializeListOptions, getSheetCommandTarget, rangeToDiscreteRange, serializeListOptions } from "@univerjs/sheets";
+import { AddSheetDataValidationCommand, BASE_FORMULA_INPUT_NAME as BASE_FORMULA_INPUT_NAME$1, CHECKBOX_FORMULA_1, CHECKBOX_FORMULA_2, CHECKBOX_FORMULA_INPUT_NAME, CUSTOM_FORMULA_INPUT_NAME, DATA_VALIDATION_PLUGIN_NAME, DataValidationCacheService, DataValidationFormulaController, DataValidationFormulaService, LIST_FORMULA_INPUT_NAME, RemoveSheetAllDataValidationCommand, RemoveSheetDataValidationCommand, SheetDataValidationModel, SheetsDataValidationValidatorService, UniverSheetsDataValidationPlugin, UpdateSheetDataValidationOptionsCommand, UpdateSheetDataValidationRangeCommand, UpdateSheetDataValidationSettingCommand, createDefaultNewRule, getCellValueOrigin, getDataValidationCellValue, getDataValidationDiffMutations, getFormulaResult, isLegalFormulaResult, transformCheckboxValue } from "@univerjs/sheets-data-validation";
 import { DataValidationModel, DataValidatorDropdownType, DataValidatorRegistryScope, DataValidatorRegistryService, TWO_FORMULA_OPERATOR_COUNT, getRuleOptions, getRuleSetting } from "@univerjs/data-validation";
 import { ComponentManager, IDialogService, IMenuManagerService, ISidebarService, IZenZoneService, KeyCode, MenuItemType, RibbonDataGroup, getMenuHiddenObservable, useDependency, useEvent, useObservable, useSidebarClick } from "@univerjs/ui";
 import { BehaviorSubject, Subject, bufferTime, debounceTime, distinctUntilChanged, filter, of } from "rxjs";
@@ -16,10 +16,10 @@ import { Fragment, jsx, jsxs } from "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) {
@@ -30,7 +30,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];
@@ -43,14 +43,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,
@@ -61,7 +61,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);
@@ -69,7 +69,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);
@@ -209,7 +209,7 @@ let DataValidationRejectInputController = class DataValidationRejectInputControl
 			if (await this._sheetsDataValidationValidatorService.validatorCell(unitId, subUnitId, row, col) === 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,
@@ -220,7 +220,7 @@ let DataValidationRejectInputController = class DataValidationRejectInputControl
 				footer: { title: createElement(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");
 				}
@@ -231,13 +231,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: createElement(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");
 			}
@@ -432,7 +432,8 @@ let DataValidationDropdownManagerService = class DataValidationDropdownManagerSe
 				var _this$_configService$, _this$_configService$2, _this$_configService$3, _this$_configService$4;
 				const multiple = validator.dropdownType === DataValidatorDropdownType.MULTIPLE_LIST;
 				const handleSave = async (newValue) => {
-					const str = serializeListOptions(newValue);
+					var _newValue$;
+					const str = multiple ? serializeListOptions(newValue) : (_newValue$ = newValue[0]) !== null && _newValue$ !== void 0 ? _newValue$ : "";
 					const params = {
 						unitId,
 						subUnitId,
@@ -650,7 +651,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()
@@ -778,7 +779,7 @@ let DataValidationAlertController = class DataValidationAlertController extends
 					}
 					this._cellAlertManagerService.showAlert({
 						type: 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,
@@ -1086,7 +1087,7 @@ let DataValidationPermissionController = class DataValidationPermissionControlle
 					workbookTypes: [WorkbookEditablePermission],
 					rangeTypes: [RangeProtectionPermissionEditPoint],
 					worksheetTypes: [WorksheetEditPermission, 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 === UpdateSheetDataValidationRangeCommand.id) {
 				const { unitId, subUnitId, ranges } = command.params;
@@ -1094,7 +1095,7 @@ let DataValidationPermissionController = class DataValidationPermissionControlle
 					workbookTypes: [WorkbookEditablePermission],
 					rangeTypes: [RangeProtectionPermissionEditPoint],
 					worksheetTypes: [WorksheetEditPermission, 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"));
 			}
 		}));
 	}
@@ -1113,7 +1114,7 @@ function dataValidationMenuFactory(accessor) {
 		id: DATA_VALIDATION_MENU_ID,
 		type: MenuItemType.SUBITEMS,
 		icon: "DataValidationIcon",
-		tooltip: "dataValidation.title",
+		tooltip: "sheets-data-validation-ui.title",
 		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
 		disabled$: getCurrentRangeDisable$(accessor, {
 			workbookTypes: [WorkbookEditablePermission],
@@ -1125,14 +1126,14 @@ function dataValidationMenuFactory(accessor) {
 function openDataValidationMenuFactory(_accessor) {
 	return {
 		id: OpenValidationPanelOperation.id,
-		title: "dataValidation.panel.title",
+		title: "sheets-data-validation-ui.panel.title",
 		type: MenuItemType.BUTTON
 	};
 }
 function addDataValidationMenuFactory(_accessor) {
 	return {
 		id: AddSheetDataValidationAndOpenCommand.id,
-		title: "dataValidation.panel.add",
+		title: "sheets-data-validation-ui.panel.add",
 		type: MenuItemType.BUTTON
 	};
 }
@@ -1477,14 +1478,14 @@ function DataValidationOptions(props) {
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ 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__ */ jsx(MoreUpIcon, { className: "univer-ml-1" }) : /* @__PURE__ */ jsx(MoreDownIcon, { className: "univer-ml-1" })]
+		children: [localeService.t("sheets-data-validation-ui.panel.options"), show ? /* @__PURE__ */ jsx(MoreUpIcon, { className: "univer-ml-1" }) : /* @__PURE__ */ jsx(MoreDownIcon, { className: "univer-ml-1" })]
 	}), show && /* @__PURE__ */ jsxs(Fragment, { children: [
 		ExtraOptions ? /* @__PURE__ */ jsx(ExtraOptions, {
 			value,
 			onChange
 		}) : null,
 		/* @__PURE__ */ jsx(FormLayout, {
-			label: localeService.t("dataValidation.panel.invalid"),
+			label: localeService.t("sheets-data-validation-ui.panel.invalid"),
 			children: /* @__PURE__ */ jsxs(RadioGroup, {
 				value: `${(_value$errorStyle = value.errorStyle) !== null && _value$errorStyle !== void 0 ? _value$errorStyle : DataValidationErrorStyle.WARNING}`,
 				onChange: (errorStyle) => onChange({
@@ -1493,22 +1494,22 @@ function DataValidationOptions(props) {
 				}),
 				children: [/* @__PURE__ */ jsx(Radio, {
 					value: `${DataValidationErrorStyle.WARNING}`,
-					children: localeService.t("dataValidation.panel.showWarning")
+					children: localeService.t("sheets-data-validation-ui.panel.showWarning")
 				}), /* @__PURE__ */ jsx(Radio, {
 					value: `${DataValidationErrorStyle.STOP}`,
-					children: localeService.t("dataValidation.panel.rejectInput")
+					children: localeService.t("sheets-data-validation-ui.panel.rejectInput")
 				})]
 			})
 		}),
 		/* @__PURE__ */ jsx(FormLayout, {
-			label: localeService.t("dataValidation.panel.messageInfo"),
+			label: localeService.t("sheets-data-validation-ui.panel.messageInfo"),
 			children: /* @__PURE__ */ jsx(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__ */ jsx(FormLayout, { children: /* @__PURE__ */ jsx(Input, {
@@ -1721,8 +1722,8 @@ function DataValidationDetail() {
 		className: "univer-py-2",
 		children: [
 			/* @__PURE__ */ jsx(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__ */ jsx(RangeSelector, {
 					selectorRef: rangeSelectorInstance,
 					unitId,
@@ -1741,7 +1742,7 @@ function DataValidationDetail() {
 				})
 			}),
 			/* @__PURE__ */ jsx(FormLayout, {
-				label: localeService.t("dataValidation.panel.type"),
+				label: localeService.t("sheets-data-validation-ui.panel.type"),
 				children: /* @__PURE__ */ jsx(Select, {
 					className: "univer-w-full",
 					value: localRule.type,
@@ -1753,13 +1754,13 @@ function DataValidationDetail() {
 				})
 			}),
 			(operators === null || operators === void 0 ? void 0 : operators.length) ? /* @__PURE__ */ jsx(FormLayout, {
-				label: localeService.t("dataValidation.panel.operator"),
+				label: localeService.t("sheets-data-validation-ui.panel.operator"),
 				children: /* @__PURE__ */ jsx(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]
@@ -1799,7 +1800,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__ */ jsx(DataValidationOptions, {
 				value: options,
@@ -1811,12 +1812,12 @@ function DataValidationDetail() {
 				children: [/* @__PURE__ */ jsx(Button, {
 					className: "univer-ml-3",
 					onClick: handleDelete,
-					children: localeService.t("dataValidation.panel.removeRule")
+					children: localeService.t("sheets-data-validation-ui.panel.removeRule")
 				}), /* @__PURE__ */ jsx(Button, {
 					className: "univer-ml-3",
 					variant: "primary",
 					onClick: handleOk,
-					children: localeService.t("dataValidation.panel.done")
+					children: localeService.t("sheets-data-validation-ui.panel.done")
 				})]
 			})
 		]
@@ -1988,11 +1989,11 @@ function DataValidationList(props) {
 			className: "univer-mt-4 univer-flex univer-flex-row univer-justify-end univer-gap-2",
 			children: [rules.length && !hasDisableRule ? /* @__PURE__ */ jsx(Button, {
 				onClick: handleRemoveAll,
-				children: localeService.t("dataValidation.panel.removeAll")
+				children: localeService.t("sheets-data-validation-ui.panel.removeAll")
 			}) : null, /* @__PURE__ */ jsx(Button, {
 				variant: "primary",
 				onClick: handleAddRule,
-				children: localeService.t("dataValidation.panel.add")
+				children: localeService.t("sheets-data-validation-ui.panel.add")
 			})]
 		})]
 	});
@@ -2025,7 +2026,7 @@ const BaseFormulaInput = (props) => {
 			error: formula1Res,
 			children: /* @__PURE__ */ jsx(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({
@@ -2037,13 +2038,13 @@ const BaseFormulaInput = (props) => {
 		}),
 		/* @__PURE__ */ 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__ */ jsx(FormLayout, {
 			error: formula2Res,
 			children: /* @__PURE__ */ jsx(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({
@@ -2058,7 +2059,7 @@ const BaseFormulaInput = (props) => {
 		error: formula1Res,
 		children: /* @__PURE__ */ jsx(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 });
@@ -2089,14 +2090,14 @@ function CheckboxFormulaInput(props) {
 					});
 				}
 			},
-			children: localeService.t("dataValidation.checkbox.tips")
+			children: localeService.t("sheets-data-validation-ui.checkbox.tips")
 		}) }),
 		checked ? /* @__PURE__ */ jsx(FormLayout, {
-			label: localeService.t("dataValidation.checkbox.checked"),
+			label: localeService.t("sheets-data-validation-ui.checkbox.checked"),
 			error: formula1Res,
 			children: /* @__PURE__ */ jsx(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({
@@ -2107,11 +2108,11 @@ function CheckboxFormulaInput(props) {
 			})
 		}) : null,
 		checked ? /* @__PURE__ */ jsx(FormLayout, {
-			label: localeService.t("dataValidation.checkbox.unchecked"),
+			label: localeService.t("sheets-data-validation-ui.checkbox.unchecked"),
 			error: formula2Res,
 			children: /* @__PURE__ */ jsx(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({
@@ -2159,6 +2160,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: 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 = [
@@ -2245,8 +2277,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] = useState(() => isFormulaString(formula1) ? "1" : "0");
 	const [formulaStr, setFormulaStr] = useState(isFormulaStr === "1" ? formula1 : "=");
@@ -2307,13 +2340,12 @@ function ListFormulaInput(props) {
 			setStrList([...strList]);
 		}
 	};
-	const colorList = formula2.split(",");
 	const refFinalList = 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;
@@ -2333,34 +2365,11 @@ function ListFormulaInput(props) {
 	};
 	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: 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 = useEvent(async (str) => {
 		if (!isFormulaString(str)) {
@@ -2382,7 +2391,7 @@ function ListFormulaInput(props) {
 				formula2
 			});
 			setFormulaStr("=");
-			setLocalError(localeService.t("dataValidation.validFail.formulaError"));
+			setLocalError(localeService.t("sheets-data-validation-ui.validFail.formulaError"));
 		}
 	});
 	const formulaEditorRef = useRef(null);
@@ -2400,7 +2409,7 @@ function ListFormulaInput(props) {
 		dataValidationPanelService
 	]);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FormLayout, {
-		label: localeService.t("dataValidation.list.options"),
+		label: localeService.t("sheets-data-validation-ui.list.options"),
 		children: /* @__PURE__ */ jsxs(RadioGroup, {
 			value: isFormulaStr,
 			onChange: (v) => {
@@ -2413,10 +2422,10 @@ function ListFormulaInput(props) {
 			},
 			children: [/* @__PURE__ */ jsx(Radio, {
 				value: "0",
-				children: localeService.t("dataValidation.list.customOptions")
+				children: localeService.t("sheets-data-validation-ui.list.customOptions")
 			}), /* @__PURE__ */ jsx(Radio, {
 				value: "1",
-				children: localeService.t("dataValidation.list.refOptions")
+				children: localeService.t("sheets-data-validation-ui.list.refOptions")
 			})]
 		})
 	}), isFormulaStr === "1" ? /* @__PURE__ */ jsxs(FormLayout, {
@@ -2447,28 +2456,25 @@ function ListFormulaInput(props) {
 		})]
 	}) : /* @__PURE__ */ jsx(FormLayout, {
 		error: formula1Res,
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "-univer-mt-3",
-			children: [/* @__PURE__ */ jsx(DraggableList, {
-				list: strList,
-				onListChange: setStrList,
-				rowHeight: 28,
-				margin: [0, 12],
-				draggableHandle: ".draggableHandle",
-				itemRender: (item) => /* @__PURE__ */ jsx(Template, {
-					item,
-					commonProps: {
-						onItemChange: handleStrItemChange,
-						onItemDelete: handleStrItemDelete
-					}
-				}, item.id),
-				idKey: "id"
-			}), /* @__PURE__ */ 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__ */ jsx(IncreaseIcon, { className: "univer-mr-1" }), localeService.t("dataValidation.list.add")]
-			})]
-		})
+		children: /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(DraggableList, {
+			list: strList,
+			onListChange: setStrList,
+			rowHeight: 28,
+			margin: [0, 12],
+			draggableHandle: ".draggableHandle",
+			itemRender: (item) => /* @__PURE__ */ jsx(Template, {
+				item,
+				commonProps: {
+					onItemChange: handleStrItemChange,
+					onItemDelete: handleStrItemDelete
+				}
+			}, item.id),
+			idKey: "id"
+		}), /* @__PURE__ */ 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__ */ jsx(IncreaseIcon, { className: "univer-mr-1" }), localeService.t("sheets-data-validation-ui.list.add")]
+		})] })
 	})] });
 }
 
@@ -2489,7 +2495,7 @@ function ListRenderModeInput(props) {
 	const { value, onChange } = props;
 	const localeService = useDependency(LocaleService);
 	return /* @__PURE__ */ jsx(FormLayout, {
-		label: localeService.t("dataValidation.renderMode.label"),
+		label: localeService.t("sheets-data-validation-ui.renderMode.label"),
 		children: /* @__PURE__ */ jsxs(RadioGroup, {
 			value: `${(_value$renderMode = value.renderMode) !== null && _value$renderMode !== void 0 ? _value$renderMode : DataValidationRenderMode.CUSTOM}`,
 			onChange: (renderMode) => onChange({
@@ -2499,15 +2505,15 @@ function ListRenderModeInput(props) {
 			children: [
 				/* @__PURE__ */ jsx(Radio, {
 					value: `${DataValidationRenderMode.CUSTOM}`,
-					children: localeService.t("dataValidation.renderMode.chip")
+					children: localeService.t("sheets-data-validation-ui.renderMode.chip")
 				}),
 				/* @__PURE__ */ jsx(Radio, {
 					value: `${DataValidationRenderMode.ARROW}`,
-					children: localeService.t("dataValidation.renderMode.arrow")
+					children: localeService.t("sheets-data-validation-ui.renderMode.arrow")
 				}),
 				/* @__PURE__ */ jsx(Radio, {
 					value: `${DataValidationRenderMode.TEXT}`,
-					children: localeService.t("dataValidation.renderMode.text")
+					children: localeService.t("sheets-data-validation-ui.renderMode.text")
 				})
 			]
 		})
@@ -2533,7 +2539,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;
@@ -2845,9 +2851,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 = FontCache.getTextSize(text, fontStyle);
 	const rectWidth = bBox.width + 4 * 2;
@@ -2859,7 +2863,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) => ({
@@ -3419,15 +3423,15 @@ let DropdownWidget = class DropdownWidget {
 		let { tb, pd } = style || {};
 		const { l = DEFAULT_STYLES.pd.l, r = DEFAULT_STYLES.pd.r } = pd !== null && pd !== void 0 ? pd : {};
 		tb = (_tb3 = tb) !== null && _tb3 !== void 0 ? _tb3 : WrapStrategy.WRAP;
-		let paddingAll = MARGIN_H * 2 + ICON_PLACE;
+		let paddingAll = 26;
 		switch (rule.renderMode) {
 			case DataValidationRenderMode.ARROW:
-				paddingAll = ICON_PLACE + 4 + r + l;
+				paddingAll = 18 + r + l;
 				break;
 			case 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 DocSimpleSkeleton(valueStr, getFontStyleString(style).fontCache, Boolean(tb === WrapStrategy.WRAP), widthForTextLayout, Infinity);