@univerjs/sheets-data-validation-ui 1.0.0-alpha.8 → 1.0.0-beta.1

package/lib/cjs/index.js

@@ -162,7 +162,8 @@ const defaultPluginConfig = {};
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-const DROP_DOWN_DEFAULT_COLOR = "#ECECEC";
+const DROP_DOWN_DEFAULT_COLOR = "gray.100";
+const DROP_DOWN_ICON_COLOR = "gray.600";
 
 //#endregion
 //#region src/controllers/dv-reject-input.controller.ts
@@ -303,7 +304,7 @@ let DataValidationDropdownManagerService = class DataValidationDropdownManagerSe
 		if (!(validator === null || validator === void 0 ? void 0 : validator.dropdownType)) return;
 		let popupDisposable;
 		const handleSave = async (date, targetPatternType) => {
-			var _numfmt$parseDate, _cellStyle$n$pattern, _cellStyle$n;
+			var _numfmt$parseDate, _cellStyle$n;
 			if (!date) return true;
 			const newValue = date;
 			const cellData = worksheet.getCell(row, col);
@@ -311,7 +312,7 @@ let DataValidationDropdownManagerService = class DataValidationDropdownManagerSe
 			const serialNum = (_numfmt$parseDate = _univerjs_core.numfmt.parseDate(dateStr)) === null || _numfmt$parseDate === void 0 ? void 0 : _numfmt$parseDate.v;
 			const serialTime = targetPatternType === "time" ? serialNum % 1 : serialNum;
 			const cellStyle = workbook.getStyles().getStyleByCell(cellData);
-			const format = (_cellStyle$n$pattern = cellStyle === null || cellStyle === void 0 || (_cellStyle$n = cellStyle.n) === null || _cellStyle$n === void 0 ? void 0 : _cellStyle$n.pattern) !== null && _cellStyle$n$pattern !== void 0 ? _cellStyle$n$pattern : "";
+			const format = (cellStyle === null || cellStyle === void 0 || (_cellStyle$n = cellStyle.n) === null || _cellStyle$n === void 0 ? void 0 : _cellStyle$n.pattern) ?? "";
 			if (rule.errorStyle !== _univerjs_core.DataValidationErrorStyle.STOP || await validator.validator({
 				value: serialTime,
 				unitId,
@@ -405,11 +406,10 @@ let DataValidationDropdownManagerService = class DataValidationDropdownManagerSe
 			}
 			case _univerjs_data_validation.DataValidatorDropdownType.LIST:
 			case _univerjs_data_validation.DataValidatorDropdownType.MULTIPLE_LIST: {
-				var _this$_configService$, _this$_configService$2, _this$_configService$3, _this$_configService$4;
+				var _this$_configService$, _this$_configService$2;
 				const multiple = validator.dropdownType === _univerjs_data_validation.DataValidatorDropdownType.MULTIPLE_LIST;
 				const handleSave = async (newValue) => {
-					var _newValue$;
-					const str = multiple ? (0, _univerjs_sheets.serializeListOptions)(newValue) : (_newValue$ = newValue[0]) !== null && _newValue$ !== void 0 ? _newValue$ : "";
+					const str = multiple ? (0, _univerjs_sheets.serializeListOptions)(newValue) : newValue[0] ?? "";
 					const params = {
 						unitId,
 						subUnitId,
@@ -451,19 +451,18 @@ let DataValidationDropdownManagerService = class DataValidationDropdownManagerSe
 						options: list.map((item) => ({
 							label: item.label,
 							value: item.label,
-							color: showColor || item.color ? item.color || "#ECECEC" : "transparent"
+							color: showColor || item.color ? item.color || "gray.100" : "transparent"
 						})),
 						onEdit: handleEdit,
 						defaultValue: cellStr,
 						multiple,
-						showEdit: (_this$_configService$ = (_this$_configService$2 = this._configService.getConfig("sheets-data-validation-ui.config")) === null || _this$_configService$2 === void 0 ? void 0 : _this$_configService$2.showEditOnDropdown) !== null && _this$_configService$ !== void 0 ? _this$_configService$ : true,
-						showSearch: (_this$_configService$3 = (_this$_configService$4 = this._configService.getConfig("sheets-data-validation-ui.config")) === null || _this$_configService$4 === void 0 ? void 0 : _this$_configService$4.showSearchOnDropdown) !== null && _this$_configService$3 !== void 0 ? _this$_configService$3 : true
+						showEdit: ((_this$_configService$ = this._configService.getConfig("sheets-data-validation-ui.config")) === null || _this$_configService$ === void 0 ? void 0 : _this$_configService$.showEditOnDropdown) ?? true,
+						showSearch: ((_this$_configService$2 = this._configService.getConfig("sheets-data-validation-ui.config")) === null || _this$_configService$2 === void 0 ? void 0 : _this$_configService$2.showSearchOnDropdown) ?? true
 					}
 				};
 				break;
 			}
 			case _univerjs_data_validation.DataValidatorDropdownType.CASCADE: {
-				var _rule$formula;
 				const handleSave = (newValue) => {
 					const params = {
 						unitId,
@@ -495,7 +494,7 @@ let DataValidationDropdownManagerService = class DataValidationDropdownManagerSe
 					props: {
 						onChange: handleSave,
 						defaultValue: (0, _univerjs_sheets_data_validation.getDataValidationCellValue)(worksheet.getCellRaw(row, col)).split("/"),
-						options: JSON.parse((_rule$formula = rule.formula1) !== null && _rule$formula !== void 0 ? _rule$formula : "[]")
+						options: JSON.parse(rule.formula1 ?? "[]")
 					},
 					location
 				};
@@ -777,7 +776,7 @@ function DropdownPresets({ onChange }) {
 				children: presets.map((values) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
 					"aria-label": values.join(" / "),
-					className: "univer-flex univer-min-h-20 univer-cursor-pointer univer-flex-col univer-items-start univer-gap-1.5 univer-rounded-md univer-border-0 univer-bg-gray-50 univer-p-3 univer-text-left univer-text-sm univer-leading-5 univer-text-gray-900 univer-transition-colors hover:univer-bg-gray-100 focus-visible:univer-outline-none focus-visible:univer-ring-2 focus-visible:univer-ring-primary-600 focus-visible:univer-ring-offset-0 dark:!univer-bg-gray-800 dark:!univer-text-white dark:hover:!univer-bg-gray-700",
+					className: "univer-flex univer-min-h-20 univer-cursor-pointer univer-flex-col univer-items-start univer-gap-1.5 univer-rounded-md univer-border-0 univer-bg-gray-50 univer-p-3 univer-text-left univer-text-sm univer-leading-5 univer-text-gray-900 univer-transition-colors hover:univer-bg-gray-100 focus-visible:univer-outline-none focus-visible:univer-ring-2 focus-visible:univer-ring-primary-600 focus-visible:univer-ring-offset-0 dark:!univer-bg-gray-800 dark:!univer-text-gray-0 dark:hover:!univer-bg-gray-700",
 					onClick: () => onChange((0, _univerjs_sheets.serializeListOptions)(values)),
 					children: values.map((value) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 						className: "univer-w-full univer-break-words",
@@ -992,19 +991,18 @@ const menuSchema = {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-data-validation-ui";
-var version = "1.0.0-alpha.8";
+var version = "1.0.0-beta.1";
 
 //#endregion
 //#region src/views/components/DataValidationOptions.tsx
 function DataValidationOptions(props) {
-	var _value$errorStyle;
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
 	const componentManager = (0, _univerjs_ui.useDependency)(_univerjs_ui.ComponentManager);
 	const { value, onChange, extraComponent } = props;
 	const [show, setShow] = (0, react.useState)(false);
 	const ExtraOptions = extraComponent ? componentManager.get(extraComponent) : null;
 	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",
+		className: "univer-mb-3 univer-flex univer-cursor-pointer univer-items-center univer-text-sm univer-text-gray-900 dark:!univer-text-gray-0",
 		onClick: () => setShow(!show),
 		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: [
@@ -1015,7 +1013,7 @@ function DataValidationOptions(props) {
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.FormLayout, {
 			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}`,
+				value: `${value.errorStyle ?? _univerjs_core.DataValidationErrorStyle.WARNING}`,
 				onChange: (errorStyle) => onChange({
 					...value,
 					errorStyle: +errorStyle
@@ -1075,7 +1073,7 @@ function DataValidationDetail() {
 	} });
 }
 function DataValidationDetailInner(props) {
-	var _validators$sort, _localRule$allowBlank;
+	var _validators$sort;
 	const [key, setKey] = (0, react.useState)(0);
 	const dataValidationPanelService = (0, _univerjs_ui.useDependency)(DataValidationPanelService);
 	const { unitId, subUnitId, rule } = props.activeRuleInfo;
@@ -1087,10 +1085,7 @@ function DataValidationDetailInner(props) {
 	const dataValidationModel = (0, _univerjs_ui.useDependency)(_univerjs_data_validation.DataValidationModel);
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
 	const workbook = (0, _univerjs_ui.useObservable)(() => univerInstanceService.getCurrentTypeOfUnit$(_univerjs_core.UniverInstanceType.UNIVER_SHEET), void 0, void 0, []);
-	const worksheet = (0, _univerjs_ui.useObservable)(() => {
-		var _workbook$activeSheet;
-		return (_workbook$activeSheet = workbook === null || workbook === void 0 ? void 0 : workbook.activeSheet$) !== null && _workbook$activeSheet !== void 0 ? _workbook$activeSheet : (0, rxjs.of)(null);
-	}, void 0, void 0, []);
+	const worksheet = (0, _univerjs_ui.useObservable)(() => (workbook === null || workbook === void 0 ? void 0 : workbook.activeSheet$) ?? (0, rxjs.of)(null), void 0, void 0, []);
 	const [localRule, setLocalRule] = (0, react.useState)(rule);
 	const validator = validatorService.getValidatorItem(localRule.type);
 	const [showError, setShowError] = (0, react.useState)(false);
@@ -1338,14 +1333,11 @@ function DataValidationDetailInner(props) {
 				ruleId
 			}, key + localRule.type) : null,
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.FormLayout, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Checkbox, {
-				checked: (_localRule$allowBlank = localRule.allowBlank) !== null && _localRule$allowBlank !== void 0 ? _localRule$allowBlank : true,
-				onChange: () => {
-					var _localRule$allowBlank2;
-					return handleUpdateRuleSetting({
-						...baseRule,
-						allowBlank: !((_localRule$allowBlank2 = localRule.allowBlank) !== null && _localRule$allowBlank2 !== void 0 ? _localRule$allowBlank2 : true)
-					});
-				},
+				checked: localRule.allowBlank ?? true,
+				onChange: () => handleUpdateRuleSetting({
+					...baseRule,
+					allowBlank: !(localRule.allowBlank ?? true)
+				}),
 				children: localeService.t("sheets-data-validation-ui.panel.allowBlank")
 			}) }),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataValidationOptions, {
@@ -1382,10 +1374,9 @@ const DataValidationItem = (props) => {
 	const [isHover, setIsHover] = (0, react.useState)(false);
 	const themeService = (0, _univerjs_ui.useDependency)(_univerjs_core.ThemeService);
 	const style = (0, react.useMemo)(() => {
-		var _themeService$getColo;
 		const defaultColor = themeService.getColorFromTheme("primary.600");
 		const key = themeService.getColorFromTheme("loop-color.2");
-		const color = (_themeService$getColo = themeService.getColorFromTheme(key)) !== null && _themeService$getColo !== void 0 ? _themeService$getColo : defaultColor;
+		const color = themeService.getColorFromTheme(key) ?? defaultColor;
 		const rgb = new _univerjs_core.ColorKit(color).toRgb();
 		return {
 			fill: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.1)`,
@@ -1411,7 +1402,7 @@ const DataValidationItem = (props) => {
 		};
 	}, [markSelectionService]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, _univerjs_design.clsx)("univer-bg-secondary univer-relative univer--mx-2 univer-box-border univer-flex univer-w-[287px] univer-cursor-pointer univer-flex-col univer-justify-between univer-overflow-hidden univer-rounded-md univer-p-2 univer-pr-9", {
+		className: (0, _univerjs_design.clsx)("univer-bg-secondary univer-relative univer--mx-2 univer-box-border univer-flex univer-w-[287px] univer-cursor-pointer univer-flex-col univer-justify-between univer-overflow-hidden univer-rounded-md univer-p-2 univer-pr-9 rtl:univer-pl-9 rtl:univer-pr-2", {
 			"hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-700": !disable,
 			"univer-opacity-50": disable
 		}),
@@ -1435,7 +1426,7 @@ const DataValidationItem = (props) => {
 		},
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "univer-truncate univer-text-sm univer-font-medium univer-leading-[22px] univer-text-gray-900 dark:!univer-text-white",
+				className: "univer-truncate univer-text-sm univer-font-medium univer-leading-[22px] univer-text-gray-900 dark:!univer-text-gray-0",
 				children: validator === null || validator === void 0 ? void 0 : validator.generateRuleName(rule)
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -1443,7 +1434,7 @@ const DataValidationItem = (props) => {
 				children: rule.ranges.map((range) => (0, _univerjs_engine_formula.serializeRange)(range)).join(",")
 			}),
 			isHover && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "univer-absolute univer-right-2 univer-top-[19px] univer-flex univer-size-5 univer-items-center univer-justify-center univer-rounded hover:univer-bg-gray-200 dark:!univer-text-gray-300 dark:hover:!univer-bg-gray-700",
+				className: "univer-absolute univer-right-2 univer-top-[19px] univer-flex univer-size-5 univer-items-center univer-justify-center univer-rounded hover:univer-bg-gray-200 rtl:univer-left-2 rtl:univer-right-auto dark:!univer-text-gray-300 dark:hover:!univer-bg-gray-700",
 				onClick: handleDelete,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DeleteIcon, {})
 			})
@@ -1506,23 +1497,20 @@ function DataValidationList(props) {
 	const hasDisableRule = rulesByPermissionCheck === null || rulesByPermissionCheck === void 0 ? void 0 : rulesByPermissionCheck.some((rule) => rule.disable);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "univer-pb-4",
-		children: [rulesByPermissionCheck === null || rulesByPermissionCheck === void 0 ? void 0 : rulesByPermissionCheck.map((rule) => {
-			var _rule$disable;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataValidationItem, {
-				unitId,
-				subUnitId,
-				onClick: () => {
-					if (rule.disable) return;
-					dataValidationPanelService.setActiveRule({
-						unitId,
-						subUnitId,
-						rule
-					});
-				},
-				rule,
-				disable: (_rule$disable = rule.disable) !== null && _rule$disable !== void 0 ? _rule$disable : false
-			}, rule.uid);
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		children: [rulesByPermissionCheck === null || rulesByPermissionCheck === void 0 ? void 0 : rulesByPermissionCheck.map((rule) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataValidationItem, {
+			unitId,
+			subUnitId,
+			onClick: () => {
+				if (rule.disable) return;
+				dataValidationPanelService.setActiveRule({
+					unitId,
+					subUnitId,
+					rule
+				});
+			},
+			rule,
+			disable: rule.disable ?? false
+		}, rule.uid)), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			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,
@@ -1543,10 +1531,7 @@ const DataValidationPanel = () => {
 	const activeRule = (0, _univerjs_ui.useObservable)(dataValidationPanelService.activeRule$, dataValidationPanelService.activeRule);
 	const univerInstanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
 	const workbook = (0, _univerjs_ui.useObservable)(() => univerInstanceService.getCurrentTypeOfUnit$(_univerjs_core.UniverInstanceType.UNIVER_SHEET), void 0, void 0, []);
-	const worksheet = (0, _univerjs_ui.useObservable)(() => {
-		var _workbook$activeSheet;
-		return (_workbook$activeSheet = workbook === null || workbook === void 0 ? void 0 : workbook.activeSheet$) !== null && _workbook$activeSheet !== void 0 ? _workbook$activeSheet : (0, rxjs.of)(null);
-	}, void 0, void 0, []);
+	const worksheet = (0, _univerjs_ui.useObservable)(() => (workbook === null || workbook === void 0 ? void 0 : workbook.activeSheet$) ?? (0, rxjs.of)(null), void 0, void 0, []);
 	if (!workbook || !worksheet) return null;
 	return activeRule && (activeRule.subUnitId === worksheet.getSheetId() || activeRule.subUnitId === dataValidationPanelService.getFocusFormulaEditorActiveRuleSubUnitId()) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataValidationDetail, {}, activeRule.rule.uid) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataValidationList, { workbook });
 };
@@ -1688,7 +1673,6 @@ function CheckboxFormulaInput(props) {
 //#endregion
 //#region src/views/components/formula-input/CustomFormulaInput.tsx
 function CustomFormulaInput(props) {
-	var _value$formula;
 	const { unitId, subUnitId, value, onChange, showError, validResult } = props;
 	const formula1Res = showError ? validResult === null || validResult === void 0 ? void 0 : validResult.formula1 : void 0;
 	const formulaEditorRef = (0, react.useRef)(null);
@@ -1701,14 +1685,14 @@ function CustomFormulaInput(props) {
 		error: formula1Res,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_sheets_formula_ui.FormulaEditor, {
 			ref: formulaEditorRef,
-			className: (0, _univerjs_design.clsx)("univer-box-border univer-h-8 univer-w-full univer-cursor-pointer univer-items-center univer-rounded-lg univer-bg-white univer-pt-2 univer-transition-colors hover:univer-border-primary-600 dark:!univer-bg-gray-700 dark:!univer-text-white [&>div:first-child]:univer-px-2.5 [&>div]:univer-h-5 [&>div]:univer-ring-transparent", _univerjs_design.borderClassName),
-			initValue: (_value$formula = value === null || value === void 0 ? void 0 : value.formula1) !== null && _value$formula !== void 0 ? _value$formula : "=",
+			className: (0, _univerjs_design.clsx)("univer-box-border univer-h-8 univer-w-full univer-cursor-pointer univer-items-center univer-rounded-lg univer-bg-gray-0 univer-pt-2 univer-transition-colors hover:univer-border-primary-600 dark:!univer-bg-gray-700 dark:!univer-text-gray-0 [&>div:first-child]:univer-px-2.5 [&>div]:univer-h-5 [&>div]:univer-ring-transparent", _univerjs_design.borderClassName),
+			initValue: (value === null || value === void 0 ? void 0 : value.formula1) ?? "=",
 			unitId,
 			subUnitId,
 			isFocus: isFocusFormulaEditor,
 			isSupportAcrossSheet: true,
 			onChange: (newValue) => {
-				const newFormula = (newValue !== null && newValue !== void 0 ? newValue : "").trim();
+				const newFormula = (newValue ?? "").trim();
 				if (newFormula === (value === null || value === void 0 ? void 0 : value.formula1)) return;
 				onChange === null || onChange === void 0 || onChange({
 					...value,
@@ -1782,6 +1766,9 @@ const DEFAULT_COLOR_PRESET = [
 const ColorSelect = (props) => {
 	const { value, onChange, disabled } = props;
 	const [open, setOpen] = (0, react.useState)(false);
+	const themeService = (0, _univerjs_ui.useDependency)(_univerjs_core.ThemeService);
+	(0, _univerjs_ui.useObservable)(themeService.currentTheme$);
+	const backgroundColor = value.includes(".") && themeService.isValidThemeColor(value) ? themeService.getColorFromTheme(value) : value;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
 		align: "start",
 		disabled,
@@ -1799,10 +1786,10 @@ const ColorSelect = (props) => {
 			}, color))
 		}),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: (0, _univerjs_design.clsx)("univer-box-border univer-inline-flex univer-h-8 univer-w-16 univer-cursor-pointer univer-items-center univer-justify-between univer-gap-2 univer-rounded-lg univer-bg-white univer-px-2.5 univer-transition-colors univer-duration-200 hover:univer-border-primary-600 dark:!univer-bg-gray-700 dark:!univer-text-white", _univerjs_design.borderClassName),
+			className: (0, _univerjs_design.clsx)("univer-box-border univer-inline-flex univer-h-8 univer-w-16 univer-cursor-pointer univer-items-center univer-justify-between univer-gap-2 univer-rounded-lg univer-bg-gray-0 univer-px-2.5 univer-transition-colors univer-duration-200 hover:univer-border-primary-600 dark:!univer-bg-gray-700 dark:!univer-text-gray-0", _univerjs_design.borderClassName),
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "univer-box-border univer-size-4 univer-rounded univer-text-base",
-				style: { background: value }
+				style: { background: backgroundColor }
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, {})]
 		})
 	});
@@ -1887,7 +1874,7 @@ function ListFormulaInput(props) {
 		const strColors = formula2.split(",");
 		return strOptions.map((label, i) => ({
 			label,
-			color: strColors[i] || "#ECECEC",
+			color: strColors[i] || "gray.100",
 			isRef: false,
 			id: (0, _univerjs_core.generateRandomId)(4)
 		}));
@@ -1908,7 +1895,7 @@ function ListFormulaInput(props) {
 	};
 	const refFinalList = (0, react.useMemo)(() => refOptions.map((label, i) => ({
 		label,
-		color: refColors[i] || "#ECECEC",
+		color: refColors[i] || "gray.100",
 		id: `${i}`,
 		isRef: true
 	})), [refColors, refOptions]);
@@ -1998,7 +1985,7 @@ function ListFormulaInput(props) {
 		error: formula1Res || localError || void 0,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_sheets_formula_ui.FormulaEditor, {
 			ref: formulaEditorRef,
-			className: (0, _univerjs_design.clsx)("univer-box-border univer-h-8 univer-w-full univer-cursor-pointer univer-items-center univer-rounded-lg univer-bg-white univer-pt-2 univer-transition-colors hover:univer-border-primary-600 dark:!univer-bg-gray-700 dark:!univer-text-white [&>div:first-child]:univer-px-2.5 [&>div]:univer-h-5 [&>div]:univer-ring-transparent", _univerjs_design.borderClassName),
+			className: (0, _univerjs_design.clsx)("univer-box-border univer-h-8 univer-w-full univer-cursor-pointer univer-items-center univer-rounded-lg univer-bg-gray-0 univer-pt-2 univer-transition-colors hover:univer-border-primary-600 dark:!univer-bg-gray-700 dark:!univer-text-gray-0 [&>div:first-child]:univer-px-2.5 [&>div]:univer-h-5 [&>div]:univer-ring-transparent", _univerjs_design.borderClassName),
 			initValue: formulaStr,
 			unitId,
 			subUnitId,
@@ -2006,7 +1993,7 @@ function ListFormulaInput(props) {
 			isSupportAcrossSheet: true,
 			onFocus: () => setIsFocusFormulaEditor(true),
 			onChange: (v = "") => {
-				const str = (v !== null && v !== void 0 ? v : "").trim();
+				const str = (v ?? "").trim();
 				setFormulaStrCopy(str);
 				updateFormula(str);
 			}
@@ -2057,13 +2044,12 @@ const FORMULA_INPUTS = [
 //#region src/views/components/ListRenderModeInput.tsx
 const LIST_RENDER_MODE_OPTION_INPUT = "LIST_RENDER_MODE_OPTION_INPUT";
 function ListRenderModeInput(props) {
-	var _value$renderMode;
 	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("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}`,
+			value: `${value.renderMode ?? _univerjs_core.DataValidationRenderMode.CUSTOM}`,
 			onChange: (renderMode) => onChange({
 				...value,
 				renderMode: +renderMode
@@ -2222,52 +2208,36 @@ let DataValidationAutoFillController = class DataValidationAutoFillController ex
 			const ruleMatrixCopy = this._sheetDataValidationModel.getRuleObjectMatrix(unitId, subUnitId).clone();
 			const virtualRange = (0, _univerjs_sheets_ui.virtualizeDiscreteRanges)([sourceRange, targetRange]);
 			const [vSourceRange, vTargetRange] = virtualRange.ranges;
-			const { mapFunc } = virtualRange;
-			const sourceStartCell = {
-				row: vSourceRange.startRow,
-				col: vSourceRange.startColumn
-			};
+			const { mapRange, projectRange } = virtualRange;
 			const repeats = _univerjs_sheets.AutoFillTools.getAutoFillRepeatRange(vSourceRange, vTargetRange);
-			const additionMatrix = new _univerjs_core.ObjectMatrix();
-			const additionRules = /* @__PURE__ */ new Set();
-			repeats.forEach((repeat) => {
-				const targetStartCell = repeat.repeatStartCell;
-				const relativeRange = repeat.relativeRange;
-				const sourceRange = {
-					startRow: sourceStartCell.row,
-					startColumn: sourceStartCell.col,
-					endColumn: sourceStartCell.col,
-					endRow: sourceStartCell.row
-				};
-				const targetRange = {
-					startRow: targetStartCell.row,
-					startColumn: targetStartCell.col,
-					endColumn: targetStartCell.col,
-					endRow: targetStartCell.row
-				};
-				_univerjs_core.Range.foreach(relativeRange, (row, col) => {
-					const sourcePositionRange = _univerjs_core.Rectangle.getPositionRange({
-						startRow: row,
-						startColumn: col,
-						endColumn: col,
-						endRow: row
-					}, sourceRange);
-					const { row: sourceRow, col: sourceCol } = mapFunc(sourcePositionRange.startRow, sourcePositionRange.startColumn);
-					const ruleId = this._sheetDataValidationModel.getRuleIdByLocation(unitId, subUnitId, sourceRow, sourceCol) || "";
-					const targetPositionRange = _univerjs_core.Rectangle.getPositionRange({
-						startRow: row,
-						startColumn: col,
-						endColumn: col,
-						endRow: row
-					}, targetRange);
-					const { row: targetRow, col: targetCol } = mapFunc(targetPositionRange.startRow, targetPositionRange.startColumn);
-					additionMatrix.setValue(targetRow, targetCol, ruleId);
-					additionRules.add(ruleId);
+			const additionsByRuleId = /* @__PURE__ */ new Map();
+			additionsByRuleId.set("", repeats.flatMap((repeat) => mapRange(_univerjs_core.Rectangle.getPositionRange(repeat.relativeRange, {
+				startRow: repeat.repeatStartCell.row,
+				endRow: repeat.repeatStartCell.row,
+				startColumn: repeat.repeatStartCell.col,
+				endColumn: repeat.repeatStartCell.col
+			}))));
+			this._sheetDataValidationModel.getRules(unitId, subUnitId).forEach((rule) => {
+				const relativeSourceRanges = rule.ranges.flatMap((range) => {
+					const projected = projectRange(range);
+					const intersected = projected && (0, _univerjs_core.getIntersectRange)(projected, vSourceRange);
+					return intersected ? [_univerjs_core.Rectangle.getRelativeRange(intersected, vSourceRange)] : [];
 				});
+				const targetRanges = repeats.flatMap((repeat) => relativeSourceRanges.flatMap((sourceRange) => {
+					const copiedRange = (0, _univerjs_core.getIntersectRange)(sourceRange, repeat.relativeRange);
+					if (!copiedRange) return [];
+					return mapRange(_univerjs_core.Rectangle.getPositionRange(copiedRange, {
+						startRow: repeat.repeatStartCell.row,
+						endRow: repeat.repeatStartCell.row,
+						startColumn: repeat.repeatStartCell.col,
+						endColumn: repeat.repeatStartCell.col
+					}));
+				}));
+				if (targetRanges.length) additionsByRuleId.set(rule.uid, targetRanges);
 			});
-			const additions = Array.from(additionRules).map((id) => ({
+			const additions = Array.from(additionsByRuleId, ([id, ranges]) => ({
 				id,
-				ranges: (0, _univerjs_core.queryObjectMatrix)(additionMatrix, (value) => value === id)
+				ranges: ranges.length > 1 ? _univerjs_core.Rectangle.mergeRanges(ranges) : ranges
 			}));
 			ruleMatrixCopy.addRangeRules(additions);
 			const { redoMutations, undoMutations } = (0, _univerjs_sheets_data_validation.getDataValidationDiffMutations)(unitId, subUnitId, ruleMatrixCopy.diff(this._sheetDataValidationModel.getRules(unitId, subUnitId)), this._injector, "patched", applyType === _univerjs_sheets.AUTO_FILL_APPLY_TYPE.ONLY_FORMAT);
@@ -2280,13 +2250,8 @@ let DataValidationAutoFillController = class DataValidationAutoFillController ex
 			id: _univerjs_sheets_data_validation.DATA_VALIDATION_PLUGIN_NAME,
 			onBeforeFillData: (location) => {
 				const { source: sourceRange, unitId, subUnitId } = location;
-				for (const row of sourceRange.rows) for (const col of sourceRange.cols) {
-					const dv = this._sheetDataValidationModel.getRuleByLocation(unitId, subUnitId, row, col);
-					if (dv && dv.type === _univerjs_core.DataValidationType.CHECKBOX) {
-						this._autoFillService.setDisableApplyType(_univerjs_sheets.AUTO_FILL_APPLY_TYPE.SERIES, true);
-						return;
-					}
-				}
+				const { projectRange } = (0, _univerjs_sheets_ui.virtualizeDiscreteRanges)([sourceRange]);
+				if (this._sheetDataValidationModel.getRules(unitId, subUnitId).some((rule) => rule.type === _univerjs_core.DataValidationType.CHECKBOX && rule.ranges.some((range) => projectRange(range) !== null))) this._autoFillService.setDisableApplyType(_univerjs_sheets.AUTO_FILL_APPLY_TYPE.SERIES, true);
 			},
 			onFillData: (location, direction, applyType) => {
 				if (applyType === _univerjs_sheets.AUTO_FILL_APPLY_TYPE.COPY || applyType === _univerjs_sheets.AUTO_FILL_APPLY_TYPE.ONLY_FORMAT || applyType === _univerjs_sheets.AUTO_FILL_APPLY_TYPE.SERIES) return generalApplyFunc(location, applyType);
@@ -2335,25 +2300,31 @@ let DataValidationCopyPasteController = class DataValidationCopyPasteController
 		});
 	}
 	_collect(unitId, subUnitId, range) {
-		const matrix = new _univerjs_core.ObjectMatrix();
+		const rules = /* @__PURE__ */ new Map();
 		this._copyInfo = {
 			unitId,
 			subUnitId,
-			matrix
+			rules
 		};
 		const discreteRange = this._injector.invoke((accessor) => {
 			return (0, _univerjs_sheets.rangeToDiscreteRange)(range, accessor, unitId, subUnitId);
 		});
 		if (!discreteRange) return;
-		const { rows, cols } = discreteRange;
-		rows.forEach((row, rowIndex) => {
-			cols.forEach((col, colIndex) => {
-				const ruleId = this._sheetDataValidationModel.getRuleIdByLocation(unitId, subUnitId, row, col);
-				matrix.setValue(rowIndex, colIndex, ruleId !== null && ruleId !== void 0 ? ruleId : "");
+		const { projectRange } = (0, _univerjs_sheets_ui.virtualizeDiscreteRanges)([discreteRange]);
+		this._sheetDataValidationModel.getRules(unitId, subUnitId).forEach((rule) => {
+			const projectedRanges = rule.ranges.flatMap((ruleRange) => {
+				const projected = projectRange(ruleRange);
+				return projected ? [projected] : [];
 			});
+			if (projectedRanges.length) rules.set(rule.uid, projectedRanges.length > 1 ? _univerjs_core.Rectangle.mergeRanges(projectedRanges) : projectedRanges);
 		});
 	}
 	_generateMutations(pasteFrom, pasteTo, payload) {
+		const copyInfo = this._copyInfo;
+		if (!copyInfo) return {
+			redos: [],
+			undos: []
+		};
 		const { unitId: copyUnitId, subUnitId: copySubUnitId, range: copyRange } = pasteFrom;
 		const { unitId: pastedUnitId, subUnitId: pastedSubUnitId, range: pastedRange } = pasteTo;
 		const { copyType = _univerjs_sheets_ui.COPY_TYPE.COPY } = payload;
@@ -2371,51 +2342,38 @@ let DataValidationCopyPasteController = class DataValidationCopyPasteController
 				undos: []
 			};
 		}
+		const sourceVirtualRange = (0, _univerjs_sheets_ui.virtualizeDiscreteRanges)([copyRange]).ranges[0];
+		const targetVirtualization = (0, _univerjs_sheets_ui.virtualizeDiscreteRanges)([pastedRange]);
+		const targetVirtualRange = targetVirtualization.ranges[0];
+		const repeatRange = (0, _univerjs_sheets_ui.getRepeatRange)(sourceVirtualRange, targetVirtualRange, true);
+		const clearTargetRanges = targetVirtualization.mapRange(targetVirtualRange);
+		const getTargetRanges = (sourceRanges) => repeatRange.flatMap(({ startRange }) => sourceRanges.flatMap((sourceRange) => targetVirtualization.mapRange(_univerjs_core.Rectangle.getPositionRange(sourceRange, startRange))));
 		if (pastedUnitId !== copyUnitId || pastedSubUnitId !== copySubUnitId) {
 			const ruleMatrix = this._sheetDataValidationModel.getRuleObjectMatrix(pastedUnitId, pastedSubUnitId).clone();
-			const additionMatrix = new _univerjs_core.ObjectMatrix();
-			const addRules = /* @__PURE__ */ new Set();
-			const { ranges: [vCopyRange, vPastedRange], mapFunc } = (0, _univerjs_sheets_ui.virtualizeDiscreteRanges)([copyRange, pastedRange]);
-			const repeatRange = (0, _univerjs_sheets_ui.getRepeatRange)(vCopyRange, vPastedRange, true);
 			const additionRules = /* @__PURE__ */ new Map();
-			repeatRange.forEach(({ startRange }) => {
-				var _this$_copyInfo;
-				(_this$_copyInfo = this._copyInfo) === null || _this$_copyInfo === void 0 || _this$_copyInfo.matrix.forValue((row, col, ruleId) => {
-					const range = _univerjs_core.Rectangle.getPositionRange({
-						startRow: row,
-						endRow: row,
-						startColumn: col,
-						endColumn: col
-					}, startRange);
-					const transformedRuleId = `${copySubUnitId}-${ruleId}`;
-					const oldRule = this._sheetDataValidationModel.getRuleById(copyUnitId, copySubUnitId, ruleId);
-					if (!this._sheetDataValidationModel.getRuleById(pastedUnitId, pastedSubUnitId, transformedRuleId) && oldRule) additionRules.set(transformedRuleId, {
-						...oldRule,
-						uid: transformedRuleId
-					});
-					const { row: startRow, col: startColumn } = mapFunc(range.startRow, range.startColumn);
-					addRules.add(transformedRuleId);
-					additionMatrix.setValue(startRow, startColumn, transformedRuleId);
+			const additions = [{
+				id: "",
+				ranges: clearTargetRanges
+			}];
+			copyInfo.rules.forEach((ranges, ruleId) => {
+				const transformedRuleId = `${copySubUnitId}-${ruleId}`;
+				const oldRule = this._sheetDataValidationModel.getRuleById(copyUnitId, copySubUnitId, ruleId);
+				if (!this._sheetDataValidationModel.getRuleById(pastedUnitId, pastedSubUnitId, transformedRuleId) && oldRule) additionRules.set(transformedRuleId, {
+					...oldRule,
+					uid: transformedRuleId
+				});
+				additions.push({
+					id: transformedRuleId,
+					ranges: getTargetRanges(ranges)
 				});
 			});
-			const additions = Array.from(addRules).map((id) => ({
-				id,
-				ranges: (0, _univerjs_core.queryObjectMatrix)(additionMatrix, (value) => value === id)
-			}));
 			ruleMatrix.addRangeRules(additions);
 			const { redoMutations, undoMutations } = (0, _univerjs_sheets_data_validation.getDataValidationDiffMutations)(pastedUnitId, pastedSubUnitId, ruleMatrix.diffWithAddition(this._sheetDataValidationModel.getRules(pastedUnitId, pastedSubUnitId), additionRules.values()), this._injector, "patched", false);
 			if (copyType === _univerjs_sheets_ui.COPY_TYPE.CUT) {
 				const copySheetRuleMatrix = this._sheetDataValidationModel.getRuleObjectMatrix(copyUnitId, copySubUnitId).clone();
-				const deleteRangeStartCell = mapFunc(vCopyRange.startRow, vCopyRange.startColumn);
-				const deleteRangeEndCell = mapFunc(vCopyRange.endRow, vCopyRange.endColumn);
 				copySheetRuleMatrix.addRangeRules([{
 					id: "",
-					ranges: [{
-						startRow: deleteRangeStartCell.row,
-						endRow: deleteRangeEndCell.row,
-						startColumn: deleteRangeStartCell.col,
-						endColumn: deleteRangeEndCell.col
-					}]
+					ranges: (0, _univerjs_sheets_ui.virtualizeDiscreteRanges)([copyRange]).mapRange(sourceVirtualRange)
 				}]);
 				const { redoMutations: cutRedos, undoMutations: cutUndos } = (0, _univerjs_sheets_data_validation.getDataValidationDiffMutations)(copyUnitId, copySubUnitId, copySheetRuleMatrix.diff(this._sheetDataValidationModel.getRules(copyUnitId, copySubUnitId)), this._injector, "patched", false);
 				redoMutations.push(...cutRedos);
@@ -2427,27 +2385,13 @@ let DataValidationCopyPasteController = class DataValidationCopyPasteController
 			};
 		} else {
 			const ruleMatrix = this._sheetDataValidationModel.getRuleObjectMatrix(copyUnitId, copySubUnitId).clone();
-			const additionMatrix = new _univerjs_core.ObjectMatrix();
-			const additionRules = /* @__PURE__ */ new Set();
-			const { ranges: [vCopyRange, vPastedRange], mapFunc } = (0, _univerjs_sheets_ui.virtualizeDiscreteRanges)([copyRange, pastedRange]);
-			(0, _univerjs_sheets_ui.getRepeatRange)(vCopyRange, vPastedRange, true).forEach(({ startRange }) => {
-				var _this$_copyInfo2;
-				(_this$_copyInfo2 = this._copyInfo) === null || _this$_copyInfo2 === void 0 || _this$_copyInfo2.matrix.forValue((row, col, ruleId) => {
-					const range = _univerjs_core.Rectangle.getPositionRange({
-						startRow: row,
-						endRow: row,
-						startColumn: col,
-						endColumn: col
-					}, startRange);
-					const { row: startRow, col: startColumn } = mapFunc(range.startRow, range.startColumn);
-					additionMatrix.setValue(startRow, startColumn, ruleId);
-					additionRules.add(ruleId);
-				});
-			});
-			const additions = Array.from(additionRules).map((id) => ({
+			const additions = [{
+				id: "",
+				ranges: clearTargetRanges
+			}, ...Array.from(copyInfo.rules, ([id, ranges]) => ({
 				id,
-				ranges: (0, _univerjs_core.queryObjectMatrix)(additionMatrix, (value) => value === id)
-			}));
+				ranges: getTargetRanges(ranges)
+			}))];
 			ruleMatrix.addRangeRules(additions);
 			const { redoMutations, undoMutations } = (0, _univerjs_sheets_data_validation.getDataValidationDiffMutations)(pastedUnitId, pastedSubUnitId, ruleMatrix.diff(this._sheetDataValidationModel.getRules(copyUnitId, copySubUnitId)), this._injector, "patched", false);
 			return {
@@ -2571,32 +2515,30 @@ let SheetsDataValidationRenderController = class SheetsDataValidationRenderContr
 			effect: _univerjs_core.InterceptorEffectEnum.Style,
 			priority: _univerjs_sheets.InterceptCellContentPriority.DATA_VALIDATION,
 			handler: (cell, pos, next) => {
-				var _this$_dataValidation, _cell$customRender, _cell$fontRenderExten, _validator$skipDefaul, _cell$coverable;
+				var _cell$fontRenderExten, _validator$skipDefaul;
 				const { row, col, unitId, subUnitId, workbook, worksheet } = pos;
 				const ruleId = this._sheetDataValidationModel.getRuleIdByLocation(unitId, subUnitId, row, col);
 				if (!ruleId) return next(cell);
 				const rule = this._sheetDataValidationModel.getRuleById(unitId, subUnitId, ruleId);
 				if (!rule) return next(cell);
-				const validStatus = (_this$_dataValidation = this._dataValidationCacheService.getValue(unitId, subUnitId, row, col)) !== null && _this$_dataValidation !== void 0 ? _this$_dataValidation : _univerjs_core.DataValidationStatus.VALID;
+				const validStatus = this._dataValidationCacheService.getValue(unitId, subUnitId, row, col) ?? _univerjs_core.DataValidationStatus.VALID;
 				const validator = this._dataValidatorRegistryService.getValidatorItem(rule.type);
 				const cellOrigin = pos.rawData;
 				let cache;
 				const cellValue = { get value() {
-					var _getCellValueOrigin;
 					if (cache !== void 0) return cache;
-					cache = (_getCellValueOrigin = (0, _univerjs_sheets_data_validation.getCellValueOrigin)(cellOrigin)) !== null && _getCellValueOrigin !== void 0 ? _getCellValueOrigin : null;
+					cache = (0, _univerjs_sheets_data_validation.getCellValueOrigin)(cellOrigin) ?? null;
 					return cache;
 				} };
 				const valueStr = { get value() {
-					var _cellValue$value;
-					return `${(_cellValue$value = cellValue.value) !== null && _cellValue$value !== void 0 ? _cellValue$value : ""}`;
+					return `${cellValue.value ?? ""}`;
 				} };
 				if (!cell || cell === pos.rawData) cell = { ...pos.rawData };
 				cell.markers = {
 					...cell === null || cell === void 0 ? void 0 : cell.markers,
 					...validStatus === _univerjs_core.DataValidationStatus.INVALID ? INVALID_MARK : null
 				};
-				cell.customRender = [...(_cell$customRender = cell === null || cell === void 0 ? void 0 : cell.customRender) !== null && _cell$customRender !== void 0 ? _cell$customRender : [], ...(validator === null || validator === void 0 ? void 0 : validator.canvasRender) ? [validator.canvasRender] : []];
+				cell.customRender = [...(cell === null || cell === void 0 ? void 0 : cell.customRender) ?? [], ...(validator === null || validator === void 0 ? void 0 : validator.canvasRender) ? [validator.canvasRender] : []];
 				cell.fontRenderExtension = {
 					...cell === null || cell === void 0 ? void 0 : cell.fontRenderExtension,
 					isSkip: (cell === null || cell === void 0 || (_cell$fontRenderExten = cell.fontRenderExtension) === null || _cell$fontRenderExten === void 0 ? void 0 : _cell$fontRenderExten.isSkip) || (validator === null || validator === void 0 || (_validator$skipDefaul = validator.skipDefaultFontRender) === null || _validator$skipDefaul === void 0 ? void 0 : _validator$skipDefaul.call(validator, rule, cellValue.value, pos))
@@ -2609,14 +2551,14 @@ let SheetsDataValidationRenderController = class SheetsDataValidationRenderContr
 					} }, row, col)
 				};
 				cell.interceptorAutoHeight = () => {
-					var _this$_renderManagerS, _mergeCell$startRow, _mergeCell$startColum, _validator$canvasRend, _validator$canvasRend2;
+					var _this$_renderManagerS, _validator$canvasRend, _validator$canvasRend2;
 					const skeleton = (_this$_renderManagerS = this._renderManagerService.getRenderUnitById(unitId)) === null || _this$_renderManagerS === void 0 || (_this$_renderManagerS = _this$_renderManagerS.with(_univerjs_sheets_ui.SheetSkeletonManagerService).getSkeletonParam(subUnitId)) === null || _this$_renderManagerS === void 0 ? void 0 : _this$_renderManagerS.skeleton;
 					if (!skeleton) return;
 					const mergeCell = skeleton.worksheet.getMergedCell(row, col);
 					const info = {
 						data: cell,
 						style: workbook.getStyles().getStyleByCell(cell),
-						primaryWithCoord: skeleton.getCellWithCoordByIndex((_mergeCell$startRow = mergeCell === null || mergeCell === void 0 ? void 0 : mergeCell.startRow) !== null && _mergeCell$startRow !== void 0 ? _mergeCell$startRow : row, (_mergeCell$startColum = mergeCell === null || mergeCell === void 0 ? void 0 : mergeCell.startColumn) !== null && _mergeCell$startColum !== void 0 ? _mergeCell$startColum : col),
+						primaryWithCoord: skeleton.getCellWithCoordByIndex((mergeCell === null || mergeCell === void 0 ? void 0 : mergeCell.startRow) ?? row, (mergeCell === null || mergeCell === void 0 ? void 0 : mergeCell.startColumn) ?? col),
 						unitId,
 						subUnitId,
 						row,
@@ -2627,14 +2569,14 @@ let SheetsDataValidationRenderController = class SheetsDataValidationRenderContr
 					return validator === null || validator === void 0 || (_validator$canvasRend = validator.canvasRender) === null || _validator$canvasRend === void 0 || (_validator$canvasRend2 = _validator$canvasRend.calcCellAutoHeight) === null || _validator$canvasRend2 === void 0 ? void 0 : _validator$canvasRend2.call(_validator$canvasRend, info);
 				};
 				cell.interceptorAutoWidth = () => {
-					var _this$_renderManagerS2, _mergeCell$startRow2, _mergeCell$startColum2, _validator$canvasRend3, _validator$canvasRend4;
+					var _this$_renderManagerS2, _validator$canvasRend3, _validator$canvasRend4;
 					const skeleton = (_this$_renderManagerS2 = this._renderManagerService.getRenderUnitById(unitId)) === null || _this$_renderManagerS2 === void 0 || (_this$_renderManagerS2 = _this$_renderManagerS2.with(_univerjs_sheets_ui.SheetSkeletonManagerService).getSkeletonParam(subUnitId)) === null || _this$_renderManagerS2 === void 0 ? void 0 : _this$_renderManagerS2.skeleton;
 					if (!skeleton) return;
 					const mergeCell = skeleton.worksheet.getMergedCell(row, col);
 					const info = {
 						data: cell,
 						style: workbook.getStyles().getStyleByCell(cell),
-						primaryWithCoord: skeleton.getCellWithCoordByIndex((_mergeCell$startRow2 = mergeCell === null || mergeCell === void 0 ? void 0 : mergeCell.startRow) !== null && _mergeCell$startRow2 !== void 0 ? _mergeCell$startRow2 : row, (_mergeCell$startColum2 = mergeCell === null || mergeCell === void 0 ? void 0 : mergeCell.startColumn) !== null && _mergeCell$startColum2 !== void 0 ? _mergeCell$startColum2 : col),
+						primaryWithCoord: skeleton.getCellWithCoordByIndex((mergeCell === null || mergeCell === void 0 ? void 0 : mergeCell.startRow) ?? row, (mergeCell === null || mergeCell === void 0 ? void 0 : mergeCell.startColumn) ?? col),
 						unitId,
 						subUnitId,
 						row,
@@ -2644,7 +2586,7 @@ let SheetsDataValidationRenderController = class SheetsDataValidationRenderContr
 					};
 					return validator === null || validator === void 0 || (_validator$canvasRend3 = validator.canvasRender) === null || _validator$canvasRend3 === void 0 || (_validator$canvasRend4 = _validator$canvasRend3.calcCellAutoWidth) === null || _validator$canvasRend4 === void 0 ? void 0 : _validator$canvasRend4.call(_validator$canvasRend3, info);
 				};
-				cell.coverable = ((_cell$coverable = cell === null || cell === void 0 ? void 0 : cell.coverable) !== null && _cell$coverable !== void 0 ? _cell$coverable : true) && !(rule.type === _univerjs_core.DataValidationType.LIST || rule.type === _univerjs_core.DataValidationType.LIST_MULTIPLE);
+				cell.coverable = ((cell === null || cell === void 0 ? void 0 : cell.coverable) ?? true) && !(rule.type === _univerjs_core.DataValidationType.LIST || rule.type === _univerjs_core.DataValidationType.LIST_MULTIPLE);
 				return next(cell);
 			}
 		}));
@@ -2694,22 +2636,22 @@ let SheetsDataValidationMobileRenderController = class SheetsDataValidationMobil
 			effect: _univerjs_core.InterceptorEffectEnum.Style,
 			priority: _univerjs_sheets.InterceptCellContentPriority.DATA_VALIDATION,
 			handler: (cell, pos, next) => {
-				var _this$_dataValidation2, _cell$customRender2, _cell$fontRenderExten2, _validator$skipDefaul2, _cell$coverable2;
+				var _cell$fontRenderExten2, _validator$skipDefaul2;
 				const { row, col, unitId, subUnitId, workbook, worksheet } = pos;
 				const ruleId = this._sheetDataValidationModel.getRuleIdByLocation(unitId, subUnitId, row, col);
 				if (!ruleId) return next(cell);
 				const rule = this._sheetDataValidationModel.getRuleById(unitId, subUnitId, ruleId);
 				if (!rule) return next(cell);
-				const validStatus = (_this$_dataValidation2 = this._dataValidationCacheService.getValue(unitId, subUnitId, row, col)) !== null && _this$_dataValidation2 !== void 0 ? _this$_dataValidation2 : _univerjs_core.DataValidationStatus.VALID;
+				const validStatus = this._dataValidationCacheService.getValue(unitId, subUnitId, row, col) ?? _univerjs_core.DataValidationStatus.VALID;
 				const validator = this._dataValidatorRegistryService.getValidatorItem(rule.type);
 				const cellValue = (0, _univerjs_sheets_data_validation.getCellValueOrigin)(worksheet.getCellRaw(row, col));
-				const valueStr = `${cellValue !== null && cellValue !== void 0 ? cellValue : ""}`;
+				const valueStr = `${cellValue ?? ""}`;
 				if (!cell || cell === pos.rawData) cell = { ...pos.rawData };
 				cell.markers = {
 					...cell === null || cell === void 0 ? void 0 : cell.markers,
 					...validStatus === _univerjs_core.DataValidationStatus.INVALID ? INVALID_MARK : null
 				};
-				cell.customRender = [...(_cell$customRender2 = cell === null || cell === void 0 ? void 0 : cell.customRender) !== null && _cell$customRender2 !== void 0 ? _cell$customRender2 : [], ...(validator === null || validator === void 0 ? void 0 : validator.canvasRender) ? [validator.canvasRender] : []];
+				cell.customRender = [...(cell === null || cell === void 0 ? void 0 : cell.customRender) ?? [], ...(validator === null || validator === void 0 ? void 0 : validator.canvasRender) ? [validator.canvasRender] : []];
 				cell.fontRenderExtension = {
 					...cell === null || cell === void 0 ? void 0 : cell.fontRenderExtension,
 					isSkip: (cell === null || cell === void 0 || (_cell$fontRenderExten2 = cell.fontRenderExtension) === null || _cell$fontRenderExten2 === void 0 ? void 0 : _cell$fontRenderExten2.isSkip) || (validator === null || validator === void 0 || (_validator$skipDefaul2 = validator.skipDefaultFontRender) === null || _validator$skipDefaul2 === void 0 ? void 0 : _validator$skipDefaul2.call(validator, rule, cellValue, pos))
@@ -2722,14 +2664,14 @@ let SheetsDataValidationMobileRenderController = class SheetsDataValidationMobil
 					} }, row, col)
 				};
 				cell.interceptorAutoHeight = () => {
-					var _this$_renderManagerS3, _mergeCell$startRow3, _mergeCell$startColum3, _validator$canvasRend5, _validator$canvasRend6;
+					var _this$_renderManagerS3, _validator$canvasRend5, _validator$canvasRend6;
 					const skeleton = (_this$_renderManagerS3 = this._renderManagerService.getRenderUnitById(unitId)) === null || _this$_renderManagerS3 === void 0 || (_this$_renderManagerS3 = _this$_renderManagerS3.with(_univerjs_sheets_ui.SheetSkeletonManagerService).getSkeletonParam(subUnitId)) === null || _this$_renderManagerS3 === void 0 ? void 0 : _this$_renderManagerS3.skeleton;
 					if (!skeleton) return;
 					const mergeCell = skeleton.worksheet.getMergedCell(row, col);
 					const info = {
 						data: cell,
 						style: workbook.getStyles().getStyleByCell(cell),
-						primaryWithCoord: skeleton.getCellWithCoordByIndex((_mergeCell$startRow3 = mergeCell === null || mergeCell === void 0 ? void 0 : mergeCell.startRow) !== null && _mergeCell$startRow3 !== void 0 ? _mergeCell$startRow3 : row, (_mergeCell$startColum3 = mergeCell === null || mergeCell === void 0 ? void 0 : mergeCell.startColumn) !== null && _mergeCell$startColum3 !== void 0 ? _mergeCell$startColum3 : col),
+						primaryWithCoord: skeleton.getCellWithCoordByIndex((mergeCell === null || mergeCell === void 0 ? void 0 : mergeCell.startRow) ?? row, (mergeCell === null || mergeCell === void 0 ? void 0 : mergeCell.startColumn) ?? col),
 						unitId,
 						subUnitId,
 						row,
@@ -2740,14 +2682,14 @@ let SheetsDataValidationMobileRenderController = class SheetsDataValidationMobil
 					return validator === null || validator === void 0 || (_validator$canvasRend5 = validator.canvasRender) === null || _validator$canvasRend5 === void 0 || (_validator$canvasRend6 = _validator$canvasRend5.calcCellAutoHeight) === null || _validator$canvasRend6 === void 0 ? void 0 : _validator$canvasRend6.call(_validator$canvasRend5, info);
 				};
 				cell.interceptorAutoWidth = () => {
-					var _this$_renderManagerS4, _mergeCell$startRow4, _mergeCell$startColum4, _validator$canvasRend7, _validator$canvasRend8;
+					var _this$_renderManagerS4, _validator$canvasRend7, _validator$canvasRend8;
 					const skeleton = (_this$_renderManagerS4 = this._renderManagerService.getRenderUnitById(unitId)) === null || _this$_renderManagerS4 === void 0 || (_this$_renderManagerS4 = _this$_renderManagerS4.with(_univerjs_sheets_ui.SheetSkeletonManagerService).getSkeletonParam(subUnitId)) === null || _this$_renderManagerS4 === void 0 ? void 0 : _this$_renderManagerS4.skeleton;
 					if (!skeleton) return;
 					const mergeCell = skeleton.worksheet.getMergedCell(row, col);
 					const info = {
 						data: cell,
 						style: workbook.getStyles().getStyleByCell(cell),
-						primaryWithCoord: skeleton.getCellWithCoordByIndex((_mergeCell$startRow4 = mergeCell === null || mergeCell === void 0 ? void 0 : mergeCell.startRow) !== null && _mergeCell$startRow4 !== void 0 ? _mergeCell$startRow4 : row, (_mergeCell$startColum4 = mergeCell === null || mergeCell === void 0 ? void 0 : mergeCell.startColumn) !== null && _mergeCell$startColum4 !== void 0 ? _mergeCell$startColum4 : col),
+						primaryWithCoord: skeleton.getCellWithCoordByIndex((mergeCell === null || mergeCell === void 0 ? void 0 : mergeCell.startRow) ?? row, (mergeCell === null || mergeCell === void 0 ? void 0 : mergeCell.startColumn) ?? col),
 						unitId,
 						subUnitId,
 						row,
@@ -2757,7 +2699,7 @@ let SheetsDataValidationMobileRenderController = class SheetsDataValidationMobil
 					};
 					return validator === null || validator === void 0 || (_validator$canvasRend7 = validator.canvasRender) === null || _validator$canvasRend7 === void 0 || (_validator$canvasRend8 = _validator$canvasRend7.calcCellAutoWidth) === null || _validator$canvasRend8 === void 0 ? void 0 : _validator$canvasRend8.call(_validator$canvasRend7, info);
 				};
-				cell.coverable = ((_cell$coverable2 = cell === null || cell === void 0 ? void 0 : cell.coverable) !== null && _cell$coverable2 !== void 0 ? _cell$coverable2 : true) && !(rule.type === _univerjs_core.DataValidationType.LIST || rule.type === _univerjs_core.DataValidationType.LIST_MULTIPLE);
+				cell.coverable = ((cell === null || cell === void 0 ? void 0 : cell.coverable) ?? true) && !(rule.type === _univerjs_core.DataValidationType.LIST || rule.type === _univerjs_core.DataValidationType.LIST_MULTIPLE);
 				return next(cell);
 			}
 		}));
@@ -2819,11 +2761,10 @@ SheetsDataValidationReRenderController = __decorate([__decorateParam(1, (0, _uni
 const MARGIN_H$2 = 6;
 let CheckboxRender = class CheckboxRender {
 	_calc(cellInfo, style) {
-		var _style$fs, _style$fs2, _style$fs3;
 		const { vt, ht } = style || {};
 		const width = cellInfo.endX - cellInfo.startX - MARGIN_H$2 * 2;
 		const height = cellInfo.endY - cellInfo.startY;
-		const size = ((_style$fs = style === null || style === void 0 ? void 0 : style.fs) !== null && _style$fs !== void 0 ? _style$fs : 10) * 1.6;
+		const size = ((style === null || style === void 0 ? void 0 : style.fs) ?? 10) * 1.6;
 		let widgetLeft = 0;
 		let widgetTop = 0;
 		switch (vt) {
@@ -2851,8 +2792,8 @@ let CheckboxRender = class CheckboxRender {
 		return {
 			left: cellInfo.startX + widgetLeft,
 			top: cellInfo.startY + widgetTop,
-			width: ((_style$fs2 = style === null || style === void 0 ? void 0 : style.fs) !== null && _style$fs2 !== void 0 ? _style$fs2 : 10) * 1.6,
-			height: ((_style$fs3 = style === null || style === void 0 ? void 0 : style.fs) !== null && _style$fs3 !== void 0 ? _style$fs3 : 10) * 1.6
+			width: ((style === null || style === void 0 ? void 0 : style.fs) ?? 10) * 1.6,
+			height: ((style === null || style === void 0 ? void 0 : style.fs) ?? 10) * 1.6
 		};
 	}
 	constructor(_commandService, _univerInstanceService, _formulaService, _themeService, _renderManagerService, _dataValidationModel) {
@@ -2864,14 +2805,12 @@ let CheckboxRender = class CheckboxRender {
 		this._dataValidationModel = _dataValidationModel;
 	}
 	calcCellAutoHeight(info) {
-		var _style$fs4;
 		const { style } = info;
-		return ((_style$fs4 = style === null || style === void 0 ? void 0 : style.fs) !== null && _style$fs4 !== void 0 ? _style$fs4 : 10) * 1.6;
+		return ((style === null || style === void 0 ? void 0 : style.fs) ?? 10) * 1.6;
 	}
 	calcCellAutoWidth(info) {
-		var _style$fs5;
 		const { style } = info;
-		return ((_style$fs5 = style === null || style === void 0 ? void 0 : style.fs) !== null && _style$fs5 !== void 0 ? _style$fs5 : 10) * 1.6;
+		return ((style === null || style === void 0 ? void 0 : style.fs) ?? 10) * 1.6;
 	}
 	async _parseFormula(rule, unitId, subUnitId) {
 		var _results$, _results$2, _results$3;
@@ -2887,7 +2826,7 @@ let CheckboxRender = class CheckboxRender {
 		};
 	}
 	drawWith(ctx, info) {
-		var _validator$skipDefaul, _style$fs6, _style$cl$rgb, _style$cl;
+		var _validator$skipDefaul, _style$cl;
 		const { style, primaryWithCoord, unitId, subUnitId, worksheet, row, col } = info;
 		const cellBounding = primaryWithCoord.isMergedMainCell ? primaryWithCoord.mergeInfo : primaryWithCoord;
 		const value = (0, _univerjs_sheets_data_validation.getCellValueOrigin)(worksheet.getCellRaw(row, col));
@@ -2925,14 +2864,14 @@ let CheckboxRender = class CheckboxRender {
 		ctx.clip();
 		const m = transform.getMatrix();
 		ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
-		const size = ((_style$fs6 = style === null || style === void 0 ? void 0 : style.fs) !== null && _style$fs6 !== void 0 ? _style$fs6 : 10) * 1.6;
+		const size = ((style === null || style === void 0 ? void 0 : style.fs) ?? 10) * 1.6;
 		const checked = String(value) === String(formula1);
 		const defaultColor = this._themeService.getColorFromTheme("primary.600");
 		_univerjs_engine_render.CheckboxShape.drawWith(ctx, {
 			checked,
 			width: size,
 			height: size,
-			fill: (_style$cl$rgb = style === null || style === void 0 || (_style$cl = style.cl) === null || _style$cl === void 0 ? void 0 : _style$cl.rgb) !== null && _style$cl$rgb !== void 0 ? _style$cl$rgb : defaultColor
+			fill: (style === null || style === void 0 || (_style$cl = style.cl) === null || _style$cl === void 0 ? void 0 : _style$cl.rgb) ?? defaultColor
 		});
 		ctx.restore();
 	}
@@ -3188,7 +3127,7 @@ var Dropdown = class extends _univerjs_engine_render.Shape {
 			width: layout.width,
 			height: layout.height,
 			radius: RADIUS,
-			fill: fill || "#ECECEC"
+			fill: fill || "gray.100"
 		});
 		ctx.translateWithPrecision(4, layout.ba);
 		ctx.font = fontString;
@@ -3235,12 +3174,11 @@ let DropdownMultipleWidget = class DropdownMultipleWidget {
 		}
 		ctx.save();
 		ctx.translateWithPrecision(cellBounding.startX + left, cellBounding.startY + top);
-		ctx.fillStyle = "#565656";
+		ctx.fillStyle = DROP_DOWN_ICON_COLOR;
 		ctx.fill(downPath$1);
 		ctx.restore();
 	}
 	drawWith(ctx, info, skeleton, spreadsheets) {
-		var _ref, _getCellValueOrigin;
 		const { primaryWithCoord, row, col, style, data, subUnitId } = info;
 		const _cellBounding = primaryWithCoord.isMergedMainCell ? primaryWithCoord.mergeInfo : primaryWithCoord;
 		const { leftOffset = 0, rightOffset = 0, topOffset = 0, downOffset = 0 } = (data === null || data === void 0 ? void 0 : data.fontRenderExtension) || {};
@@ -3261,11 +3199,11 @@ let DropdownMultipleWidget = class DropdownMultipleWidget {
 		const cellWidth = cellBounding.endX - cellBounding.startX;
 		const cellHeight = cellBounding.endY - cellBounding.startY;
 		const { cl } = style || {};
-		const color = (_ref = typeof cl === "object" ? cl === null || cl === void 0 ? void 0 : cl.rgb : cl) !== null && _ref !== void 0 ? _ref : "#000";
-		const fontStyle = (0, _univerjs_engine_render.getFontStyleString)(style !== null && style !== void 0 ? style : void 0);
+		const color = (typeof cl === "object" ? cl === null || cl === void 0 ? void 0 : cl.rgb : cl) ?? "#000";
+		const fontStyle = (0, _univerjs_engine_render.getFontStyleString)(style ?? void 0);
 		const { vt: _vt, ht } = style || {};
-		const vt = _vt !== null && _vt !== void 0 ? _vt : _univerjs_core.VerticalAlign.MIDDLE;
-		const cellValue = (_getCellValueOrigin = (0, _univerjs_sheets_data_validation.getCellValueOrigin)(data)) !== null && _getCellValueOrigin !== void 0 ? _getCellValueOrigin : "";
+		const vt = _vt ?? _univerjs_core.VerticalAlign.MIDDLE;
+		const cellValue = (0, _univerjs_sheets_data_validation.getCellValueOrigin)(data) ?? "";
 		const items = validator.parseCellValue(cellValue);
 		const labelColorMap = validator.getListWithColorMap(rule);
 		const layout = layoutDropdowns(items, fontStyle, cellWidth, cellHeight);
@@ -3323,7 +3261,6 @@ let DropdownMultipleWidget = class DropdownMultipleWidget {
 		});
 	}
 	calcCellAutoHeight(info) {
-		var _getCellValueOrigin2;
 		const { primaryWithCoord, style, data, row, col } = info;
 		const { leftOffset = 0, rightOffset = 0, topOffset = 0, downOffset = 0 } = (data === null || data === void 0 ? void 0 : data.fontRenderExtension) || {};
 		const _cellBounding = primaryWithCoord.isMergedMainCell ? primaryWithCoord.mergeInfo : primaryWithCoord;
@@ -3339,11 +3276,10 @@ let DropdownMultipleWidget = class DropdownMultipleWidget {
 		if (!validator) return;
 		const cellWidth = cellBounding.endX - cellBounding.startX;
 		const cellHeight = cellBounding.endY - cellBounding.startY;
-		const cellValue = (_getCellValueOrigin2 = (0, _univerjs_sheets_data_validation.getCellValueOrigin)(data)) !== null && _getCellValueOrigin2 !== void 0 ? _getCellValueOrigin2 : "";
-		return layoutDropdowns(validator.parseCellValue(cellValue), (0, _univerjs_engine_render.getFontStyleString)(style !== null && style !== void 0 ? style : void 0), cellWidth, cellHeight).cellAutoHeight;
+		const cellValue = (0, _univerjs_sheets_data_validation.getCellValueOrigin)(data) ?? "";
+		return layoutDropdowns(validator.parseCellValue(cellValue), (0, _univerjs_engine_render.getFontStyleString)(style ?? void 0), cellWidth, cellHeight).cellAutoHeight;
 	}
 	calcCellAutoWidth(info) {
-		var _getCellValueOrigin3;
 		const { primaryWithCoord, style, data, row, col } = info;
 		const { leftOffset = 0, rightOffset = 0, topOffset = 0, downOffset = 0 } = (data === null || data === void 0 ? void 0 : data.fontRenderExtension) || {};
 		const _cellBounding = primaryWithCoord.isMergedMainCell ? primaryWithCoord.mergeInfo : primaryWithCoord;
@@ -3359,8 +3295,8 @@ let DropdownMultipleWidget = class DropdownMultipleWidget {
 		if (!validator) return;
 		const cellWidth = cellBounding.endX - cellBounding.startX;
 		const cellHeight = cellBounding.endY - cellBounding.startY;
-		const cellValue = (_getCellValueOrigin3 = (0, _univerjs_sheets_data_validation.getCellValueOrigin)(data)) !== null && _getCellValueOrigin3 !== void 0 ? _getCellValueOrigin3 : "";
-		return layoutDropdowns(validator.parseCellValue(cellValue), (0, _univerjs_engine_render.getFontStyleString)(style !== null && style !== void 0 ? style : void 0), cellWidth, cellHeight).calcAutoWidth;
+		const cellValue = (0, _univerjs_sheets_data_validation.getCellValueOrigin)(data) ?? "";
+		return layoutDropdowns(validator.parseCellValue(cellValue), (0, _univerjs_engine_render.getFontStyleString)(style ?? void 0), cellWidth, cellHeight).calcAutoWidth;
 	}
 	isHit(position, info) {
 		const { primaryWithCoord } = info;
@@ -3437,7 +3373,6 @@ const PADDING_V = 1;
 const MARGIN_H = 6;
 const MARGIN_V = 3;
 const RADIUS_BG = 8;
-const DROP_DOWN_ICON_COLOR = "#565656";
 const downPath = new Path2D("M3.32201 4.84556C3.14417 5.05148 2.85583 5.05148 2.67799 4.84556L0.134292 1.90016C-0.152586 1.56798 0.0505937 1 0.456301 1L5.5437 1C5.94941 1 6.15259 1.56798 5.86571 1.90016L3.32201 4.84556Z");
 function calcPadding(cellWidth, cellHeight, fontWidth, fontHeight, vt, ht, margin = true) {
 	let paddingTop = 0;
@@ -3508,12 +3443,11 @@ let DropdownWidget = class DropdownWidget {
 		}
 		ctx.save();
 		ctx.translateWithPrecision(cellBounding.startX + left, cellBounding.startY + top);
-		ctx.fillStyle = "#565656";
+		ctx.fillStyle = DROP_DOWN_ICON_COLOR;
 		ctx.fill(downPath);
 		ctx.restore();
 	}
 	drawWith(ctx, info, skeleton) {
-		var _tb, _vt, _ht, _pd;
 		const { primaryWithCoord, row, col, style, data, subUnitId } = info;
 		const _cellBounding = primaryWithCoord.isMergedMainCell ? primaryWithCoord.mergeInfo : primaryWithCoord;
 		const _row = primaryWithCoord.isMergedMainCell ? primaryWithCoord.mergeInfo.startRow : row;
@@ -3536,14 +3470,13 @@ let DropdownWidget = class DropdownWidget {
 		const map = this._ensureMap(subUnitId);
 		const key = this._generateKey(row, col);
 		const colorMap = validator.getListWithColorMap(rule);
-		const value = (0, _univerjs_sheets_data_validation.getCellValueOrigin)(data);
-		const valueStr = `${value !== null && value !== void 0 ? value : ""}`;
+		const valueStr = `${(0, _univerjs_sheets_data_validation.getCellValueOrigin)(data) ?? ""}`;
 		const activeColor = colorMap[valueStr];
 		let { tb, vt, ht, pd } = style || {};
-		tb = (_tb = tb) !== null && _tb !== void 0 ? _tb : _univerjs_core.WrapStrategy.WRAP;
-		vt = (_vt = vt) !== null && _vt !== void 0 ? _vt : _univerjs_core.VerticalAlign.BOTTOM;
-		ht = (_ht = ht) !== null && _ht !== void 0 ? _ht : _univerjs_core.DEFAULT_STYLES.ht;
-		pd = (_pd = pd) !== null && _pd !== void 0 ? _pd : _univerjs_core.DEFAULT_STYLES.pd;
+		tb = tb ?? _univerjs_core.WrapStrategy.WRAP;
+		vt = vt ?? _univerjs_core.VerticalAlign.BOTTOM;
+		ht = ht ?? _univerjs_core.DEFAULT_STYLES.ht;
+		pd = pd ?? _univerjs_core.DEFAULT_STYLES.pd;
 		const fontStyle = (0, _univerjs_engine_render.getFontStyleString)(style).fontCache;
 		if (rule.renderMode === _univerjs_core.DataValidationRenderMode.ARROW) {
 			var _style$cl, _style$st, _style$ul;
@@ -3604,7 +3537,7 @@ let DropdownWidget = class DropdownWidget {
 			_univerjs_engine_render.Rect.drawWith(ctx, {
 				width: rectWidth,
 				height: rectHeight,
-				fill: activeColor || "#ECECEC",
+				fill: activeColor || "gray.100",
 				radius: RADIUS_BG
 			});
 			ctx.save();
@@ -3637,7 +3570,6 @@ let DropdownWidget = class DropdownWidget {
 		}
 	}
 	calcCellAutoHeight(info) {
-		var _tb2;
 		const { primaryWithCoord, style, data, row, col } = info;
 		const _cellBounding = primaryWithCoord.isMergedMainCell ? primaryWithCoord.mergeInfo : primaryWithCoord;
 		const { leftOffset = 0, rightOffset = 0, topOffset = 0, downOffset = 0 } = (data === null || data === void 0 ? void 0 : data.fontRenderExtension) || {};
@@ -3651,13 +3583,12 @@ let DropdownWidget = class DropdownWidget {
 			endY: _cellBounding.endY - downOffset
 		};
 		const cellWidth = cellBounding.endX - cellBounding.startX;
-		const value = (0, _univerjs_sheets_data_validation.getCellValueOrigin)(data);
-		const valueStr = `${value !== null && value !== void 0 ? value : ""}`;
+		const valueStr = `${(0, _univerjs_sheets_data_validation.getCellValueOrigin)(data) ?? ""}`;
 		let { tb, pd } = style || {};
-		const { t = _univerjs_core.DEFAULT_STYLES.pd.t, b = _univerjs_core.DEFAULT_STYLES.pd.b } = pd !== null && pd !== void 0 ? pd : {};
-		tb = (_tb2 = tb) !== null && _tb2 !== void 0 ? _tb2 : _univerjs_core.WrapStrategy.WRAP;
+		const { t = _univerjs_core.DEFAULT_STYLES.pd.t, b = _univerjs_core.DEFAULT_STYLES.pd.b } = pd ?? {};
+		tb = tb ?? _univerjs_core.WrapStrategy.WRAP;
 		if (rule.renderMode === _univerjs_core.DataValidationRenderMode.ARROW) {
-			const { l = _univerjs_core.DEFAULT_STYLES.pd.l, r = _univerjs_core.DEFAULT_STYLES.pd.r } = pd !== null && pd !== void 0 ? pd : {};
+			const { l = _univerjs_core.DEFAULT_STYLES.pd.l, r = _univerjs_core.DEFAULT_STYLES.pd.r } = pd ?? {};
 			const realWidth = cellWidth - l - r - ICON_PLACE - 4;
 			const skeleton = new _univerjs_engine_render.DocSimpleSkeleton(valueStr, (0, _univerjs_engine_render.getFontStyleString)(style).fontCache, Boolean(tb === _univerjs_core.WrapStrategy.WRAP), realWidth, Infinity);
 			skeleton.calculate();
@@ -3670,7 +3601,6 @@ let DropdownWidget = class DropdownWidget {
 		}
 	}
 	calcCellAutoWidth(info) {
-		var _tb3;
 		const { primaryWithCoord, style, data, row, col } = info;
 		const cellRange = primaryWithCoord.isMergedMainCell ? primaryWithCoord.mergeInfo : primaryWithCoord;
 		const { leftOffset = 0, rightOffset = 0, topOffset = 0, downOffset = 0 } = (data === null || data === void 0 ? void 0 : data.fontRenderExtension) || {};
@@ -3684,11 +3614,10 @@ let DropdownWidget = class DropdownWidget {
 			endY: cellRange.endY - downOffset
 		};
 		const cellWidth = cellBounding.endX - cellBounding.startX;
-		const value = (0, _univerjs_sheets_data_validation.getCellValueOrigin)(data);
-		const valueStr = `${value !== null && value !== void 0 ? value : ""}`;
+		const valueStr = `${(0, _univerjs_sheets_data_validation.getCellValueOrigin)(data) ?? ""}`;
 		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;
+		const { l = _univerjs_core.DEFAULT_STYLES.pd.l, r = _univerjs_core.DEFAULT_STYLES.pd.r } = pd ?? {};
+		tb = tb ?? _univerjs_core.WrapStrategy.WRAP;
 		let paddingAll = 26;
 		switch (rule.renderMode) {
 			case _univerjs_core.DataValidationRenderMode.ARROW:
@@ -3967,7 +3896,7 @@ _defineProperty(UniverSheetsDataValidationUIPlugin, "packageName", name);
 _defineProperty(UniverSheetsDataValidationUIPlugin, "version", version);
 _defineProperty(UniverSheetsDataValidationUIPlugin, "type", _univerjs_core.UniverInstanceType.UNIVER_SHEET);
 UniverSheetsDataValidationUIPlugin = __decorate([
-	(0, _univerjs_core.DependentOn)(_univerjs_data_validation.UniverDataValidationPlugin, _univerjs_engine_render.UniverRenderEnginePlugin, _univerjs_sheets.UniverSheetsPlugin, _univerjs_ui.UniverUIPlugin, _univerjs_sheets_ui.UniverSheetsUIPlugin, _univerjs_sheets_data_validation.UniverSheetsDataValidationPlugin),
+	(0, _univerjs_core.DependentOn)(_univerjs_data_validation.UniverDataValidationPlugin, _univerjs_engine_render.UniverRenderEnginePlugin, _univerjs_sheets.UniverSheetsPlugin, _univerjs_sheets_ui.UniverSheetsUIPlugin, _univerjs_sheets_data_validation.UniverSheetsDataValidationPlugin),
 	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
 	__decorateParam(2, _univerjs_core.ICommandService),
 	__decorateParam(3, _univerjs_core.IConfigService)