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

package/lib/es/index.js

@@ -1,18 +1,18 @@
-import { ComponentManager, IDialogService, IMenuManagerService, ISidebarService, IconManager, KeyCode, MenuItemType, RibbonDataGroup, getMenuHiddenObservable, useDependency, useEvent, useObservable, useSidebarClick } from "@univerjs/ui";
-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 { ComponentManager, IDialogService, IMenuManagerService, ISidebarService, IconManager, KeyCode, MenuItemType, RibbonDataGroup, RibbonInsertGroup, getMenuHiddenObservable, useDependency, useEvent, useObservable, useSidebarClick } from "@univerjs/ui";
+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, bufferDebounceTime, dateKit, debounce, generateRandomId, isFormulaString, isUnitRangesEqual, merge, numfmt, queryObjectMatrix, sequenceExecute, shallowEqual, toDisposable } from "@univerjs/core";
 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, 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 { AddSheetDataValidationCommand, BASE_FORMULA_INPUT_NAME, CHECKBOX_FORMULA_1, CHECKBOX_FORMULA_2, CHECKBOX_FORMULA_INPUT_NAME, CUSTOM_FORMULA_INPUT_NAME, ClearRangeDataValidationCommand, 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 { BehaviorSubject, Subject, bufferTime, debounceTime, distinctUntilChanged, filter, of } from "rxjs";
+import { BehaviorSubject, Subject, bufferTime, debounceTime, distinctUntilChanged, filter, map, of, startWith } from "rxjs";
 import { CURSOR_TYPE, CheckboxShape, DeviceInputEventType, DocSimpleSkeleton, FontCache, IRenderManagerService, Rect, Shape, Text, Transform, fixLineWidthByScale, getCurrentTypeOfRenderer, getFontStyleString } from "@univerjs/engine-render";
 import { getPatternType } from "@univerjs/sheets-numfmt";
 import { AutoHeightController, COPY_TYPE, CellAlertManagerService, CellAlertType, HoverManagerService, IEditorBridgeService, IMarkSelectionService, ISheetCellDropdownManagerService, ISheetClipboardService, PREDEFINED_HOOK_NAME_PASTE, SetCellEditVisibleOperation, SheetSkeletonManagerService, getCurrentRangeDisable$, getRepeatRange, virtualizeDiscreteRanges } from "@univerjs/sheets-ui";
-import { Button, Checkbox, DraggableList, Dropdown, FormLayout, Input, Radio, RadioGroup, Select, borderClassName, clsx } from "@univerjs/design";
+import { Button, Checkbox, DraggableList, Dropdown, FormLayout, Input, Radio, RadioGroup, Select, Separator, borderClassName, clsx } from "@univerjs/design";
 import { createElement, useEffect, useMemo, useRef, useState } from "react";
-import { DataValidationIcon, DeleteIcon, GripVerticalIcon, IncreaseIcon, MoreDownIcon, MoreUpIcon } from "@univerjs/icons";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CheckboxIcon, DataValidationIcon, DatePickerIcon, DeleteIcon, DropdownListIcon, GripVerticalIcon, IncreaseIcon, MoreDownIcon, MoreUpIcon } from "@univerjs/icons";
 import { deserializeRangeWithSheet, serializeRange } from "@univerjs/engine-formula";
 import { FormulaEditor, RangeSelector } from "@univerjs/sheets-formula-ui";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region \0@oxc-project+runtime@0.137.0/helpers/esm/typeof.js
 function _typeof(o) {
@@ -675,14 +675,55 @@ const HideDataValidationDropdown = {
 
 //#endregion
 //#region src/commands/commands/data-validation-ui.command.ts
+function createRule(accessor, rule) {
+	const defaultRule = createDefaultNewRule(accessor);
+	return {
+		...defaultRule,
+		...rule,
+		uid: defaultRule.uid,
+		ranges: defaultRule.ranges
+	};
+}
+const InsertQuickSheetDataValidationCommand = {
+	type: CommandType.COMMAND,
+	id: "data-validation.command.insert-quick-rule",
+	handler(accessor, params) {
+		const target = getSheetCommandTarget(accessor.get(IUniverInstanceService));
+		const ranges = accessor.get(SheetsSelectionsService).getCurrentSelections().map((selection) => selection.range);
+		if (!target || !ranges.length || !(params === null || params === void 0 ? void 0 : params.rule)) return false;
+		const rule = createRule(accessor, params.rule);
+		return accessor.get(ICommandService).syncExecuteCommand(AddSheetDataValidationCommand.id, {
+			unitId: target.workbook.getUnitId(),
+			subUnitId: target.worksheet.getSheetId(),
+			rule
+		});
+	}
+};
+const ClearQuickSheetDataValidationCommand = {
+	type: CommandType.COMMAND,
+	id: "data-validation.command.clear-quick-rule",
+	handler(accessor, params) {
+		var _params$types;
+		const target = getSheetCommandTarget(accessor.get(IUniverInstanceService));
+		const ranges = accessor.get(SheetsSelectionsService).getCurrentSelections().map((selection) => selection.range);
+		if (!target || !ranges.length || !(params === null || params === void 0 || (_params$types = params.types) === null || _params$types === void 0 ? void 0 : _params$types.length)) return false;
+		return accessor.get(ICommandService).syncExecuteCommand(ClearRangeDataValidationCommand.id, {
+			unitId: target.workbook.getUnitId(),
+			subUnitId: target.worksheet.getSheetId(),
+			ranges,
+			types: params.types
+		});
+	}
+};
 const AddSheetDataValidationAndOpenCommand = {
 	type: CommandType.COMMAND,
 	id: "data-validation.command.addRuleAndOpen",
-	handler(accessor) {
+	handler(accessor, params) {
 		const target = getSheetCommandTarget(accessor.get(IUniverInstanceService));
 		if (!target) return false;
 		const { workbook, worksheet } = target;
-		const rule = createDefaultNewRule(accessor);
+		if (!accessor.get(SheetsSelectionsService).getCurrentSelections().length) return false;
+		const rule = createRule(accessor, params === null || params === void 0 ? void 0 : params.rule);
 		const commandService = accessor.get(ICommandService);
 		const addParams = {
 			rule,
@@ -700,9 +741,92 @@ const AddSheetDataValidationAndOpenCommand = {
 	}
 };
 
+//#endregion
+//#region src/views/components/DropdownPresets.tsx
+const DROPDOWN_PRESETS_COMPONENT = "SHEETS_DATA_VALIDATION_DROPDOWN_PRESETS";
+function DropdownPresets({ onChange }) {
+	const localeService = useDependency(LocaleService);
+	const presets = [
+		[localeService.t("sheets-data-validation-ui.ribbon.presets.yes"), localeService.t("sheets-data-validation-ui.ribbon.presets.no")],
+		[
+			localeService.t("sheets-data-validation-ui.ribbon.presets.notStarted"),
+			localeService.t("sheets-data-validation-ui.ribbon.presets.inProgress"),
+			localeService.t("sheets-data-validation-ui.ribbon.presets.completed")
+		],
+		[
+			"A",
+			"B",
+			"C"
+		]
+	];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "univer-box-border univer-w-[360px]",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "univer-px-2 univer-text-sm univer-font-semibold",
+				children: localeService.t("sheets-data-validation-ui.ribbon.dropdownPresetTitle")
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "univer-mt-2 univer-grid univer-grid-cols-3 univer-gap-1.5",
+				children: presets.map((values) => /* @__PURE__ */ 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",
+					onClick: () => onChange(serializeListOptions(values)),
+					children: values.map((value) => /* @__PURE__ */ jsx("span", {
+						className: "univer-w-full univer-break-words",
+						children: value
+					}, value))
+				}, values.join("\0")))
+			}),
+			/* @__PURE__ */ jsx(Separator, { className: "univer-mt-2" })
+		]
+	});
+}
+
 //#endregion
 //#region src/menu/dv.menu.ts
 const DATA_VALIDATION_MENU_ID = "sheet.menu.data-validation";
+const QUICK_DROPDOWN_MENU_ID = "sheet.menu.quick-dropdown";
+const QUICK_DATE_MENU_ID = "sheet.menu.quick-date";
+const CHECKBOX_RULE_INPUT = {
+	type: DataValidationType.CHECKBOX,
+	operator: void 0,
+	formula1: void 0,
+	formula2: void 0
+};
+const DATE_RULE_INPUT = {
+	type: DataValidationType.DATE,
+	operator: void 0,
+	formula1: void 0,
+	formula2: void 0
+};
+const DATE_TIME_RULE_INPUT = {
+	...DATE_RULE_INPUT,
+	bizInfo: { showTime: true }
+};
+function createDropdownRuleInput(formula1) {
+	return {
+		type: DataValidationType.LIST,
+		operator: void 0,
+		formula1,
+		formula2: "",
+		renderMode: DataValidationRenderMode.CUSTOM
+	};
+}
+function createDropdownCommandParams(value) {
+	return typeof value === "undefined" ? {} : { rule: createDropdownRuleInput(String(value)) };
+}
+function getQuickDataValidationMenuState(accessor) {
+	return {
+		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
+		disabled$: getCurrentRangeDisable$(accessor, {
+			workbookTypes: [WorkbookEditablePermission],
+			worksheetTypes: [WorksheetSetCellStylePermission, WorksheetEditPermission],
+			rangeTypes: [RangeProtectionPermissionEditPoint]
+		})
+	};
+}
 function dataValidationMenuFactory(accessor) {
 	return {
 		id: DATA_VALIDATION_MENU_ID,
@@ -717,6 +841,97 @@ function dataValidationMenuFactory(accessor) {
 		})
 	};
 }
+function quickCheckboxMenuFactory(accessor) {
+	return {
+		id: InsertQuickSheetDataValidationCommand.id,
+		type: MenuItemType.BUTTON_SELECTOR,
+		icon: "CheckboxIcon",
+		tooltip: "sheets-data-validation-ui.checkbox.title",
+		params: { rule: CHECKBOX_RULE_INPUT },
+		selectionsCommandId: InsertQuickSheetDataValidationCommand.id,
+		selections: [{
+			label: "sheets-data-validation-ui.ribbon.setCheckbox",
+			value: DataValidationType.CHECKBOX,
+			params: { rule: CHECKBOX_RULE_INPUT }
+		}, {
+			label: "sheets-data-validation-ui.ribbon.clearCheckbox",
+			id: ClearQuickSheetDataValidationCommand.id,
+			value: DataValidationType.CHECKBOX,
+			params: { types: [DataValidationType.CHECKBOX] }
+		}],
+		...getQuickDataValidationMenuState(accessor)
+	};
+}
+function quickDropdownMenuFactory(accessor) {
+	const localeService = accessor.get(LocaleService);
+	const editDropdownValue = serializeListOptions([localeService.t("sheets-data-validation-ui.ribbon.presets.option1"), localeService.t("sheets-data-validation-ui.ribbon.presets.option2")]);
+	return {
+		id: QUICK_DROPDOWN_MENU_ID,
+		type: MenuItemType.SUBITEMS,
+		icon: "DropdownListIcon",
+		tooltip: "sheets-data-validation-ui.list.title",
+		selectionsCommandId: InsertQuickSheetDataValidationCommand.id,
+		selections: [
+			{
+				label: {
+					name: DROPDOWN_PRESETS_COMPONENT,
+					hoverable: false,
+					selectable: false
+				},
+				params: createDropdownCommandParams
+			},
+			{
+				id: AddSheetDataValidationAndOpenCommand.id,
+				label: "sheets-data-validation-ui.ribbon.editDropdown",
+				value: editDropdownValue,
+				params: { rule: createDropdownRuleInput(editDropdownValue) }
+			},
+			{
+				id: ClearQuickSheetDataValidationCommand.id,
+				label: "sheets-data-validation-ui.ribbon.clearDropdown",
+				value: DataValidationType.LIST,
+				params: { types: [DataValidationType.LIST, DataValidationType.LIST_MULTIPLE] }
+			}
+		],
+		...getQuickDataValidationMenuState(accessor)
+	};
+}
+function quickDateMenuFactory(accessor) {
+	return {
+		id: QUICK_DATE_MENU_ID,
+		commandId: InsertQuickSheetDataValidationCommand.id,
+		type: MenuItemType.BUTTON_SELECTOR,
+		icon: "DatePickerIcon",
+		tooltip: "sheets-data-validation-ui.date.title",
+		params: { rule: DATE_RULE_INPUT },
+		selectionsCommandId: InsertQuickSheetDataValidationCommand.id,
+		selections: [
+			{
+				label: "sheets-data-validation-ui.date.title",
+				value: DataValidationType.DATE,
+				params: { rule: DATE_RULE_INPUT }
+			},
+			{
+				label: "sheets-data-validation-ui.ribbon.dateTime",
+				value: DataValidationType.DATE,
+				params: { rule: DATE_TIME_RULE_INPUT }
+			},
+			{
+				id: AddSheetDataValidationAndOpenCommand.id,
+				label: "sheets-data-validation-ui.list.edit",
+				value: DataValidationType.DATE,
+				params: { rule: DATE_RULE_INPUT }
+			},
+			{
+				id: ClearQuickSheetDataValidationCommand.id,
+				label: "sheets-data-validation-ui.panel.removeRule",
+				value: DataValidationType.DATE,
+				params: { types: [DataValidationType.DATE] }
+			}
+		],
+		...getQuickDataValidationMenuState(accessor)
+	};
+}
 function openDataValidationMenuFactory() {
 	return {
 		id: OpenValidationPanelOperation.id,
@@ -734,936 +949,251 @@ function addDataValidationMenuFactory() {
 
 //#endregion
 //#region src/menu/schema.ts
-const menuSchema = { [RibbonDataGroup.RULES]: { [DATA_VALIDATION_MENU_ID]: {
-	order: 0,
-	menuItemFactory: dataValidationMenuFactory,
-	[OpenValidationPanelOperation.id]: {
-		order: 0,
-		menuItemFactory: openDataValidationMenuFactory
+const menuSchema = {
+	[RibbonInsertGroup.CELL]: {
+		[InsertQuickSheetDataValidationCommand.id]: {
+			order: 0,
+			menuItemFactory: quickCheckboxMenuFactory
+		},
+		[QUICK_DROPDOWN_MENU_ID]: {
+			order: 1,
+			menuItemFactory: quickDropdownMenuFactory
+		},
+		[QUICK_DATE_MENU_ID]: {
+			order: 2,
+			menuItemFactory: quickDateMenuFactory
+		}
 	},
-	[AddSheetDataValidationAndOpenCommand.id]: {
-		order: 1,
-		menuItemFactory: addDataValidationMenuFactory
-	}
-} } };
+	[RibbonDataGroup.RULES]: { [DATA_VALIDATION_MENU_ID]: {
+		order: 0,
+		menuItemFactory: dataValidationMenuFactory,
+		[OpenValidationPanelOperation.id]: {
+			order: 0,
+			menuItemFactory: openDataValidationMenuFactory
+		},
+		[AddSheetDataValidationAndOpenCommand.id]: {
+			order: 1,
+			menuItemFactory: addDataValidationMenuFactory
+		}
+	} }
+};
 
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-data-validation-ui";
-var version = "1.0.0-alpha.3";
+var version = "1.0.0-alpha.5";
 
 //#endregion
-//#region src/controllers/components.controller.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.
-*/
-let ComponentsController = class ComponentsController extends Disposable {
-	constructor(_componentManager, _iconManager) {
-		super();
-		this._componentManager = _componentManager;
-		this._iconManager = _iconManager;
-		this._registerIcons();
-	}
-	_registerIcons() {
-		this.disposeWithMe(this._iconManager.register({ DataValidationIcon }));
-	}
-};
-ComponentsController = __decorate([__decorateParam(0, Inject(ComponentManager)), __decorateParam(1, Inject(IconManager))], ComponentsController);
+//#region src/views/components/DataValidationOptions.tsx
+function DataValidationOptions(props) {
+	var _value$errorStyle;
+	const localeService = useDependency(LocaleService);
+	const componentManager = useDependency(ComponentManager);
+	const { value, onChange, extraComponent } = props;
+	const [show, setShow] = useState(false);
+	const ExtraOptions = extraComponent ? componentManager.get(extraComponent) : null;
+	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("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("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({
+					...value,
+					errorStyle: +errorStyle
+				}),
+				children: [/* @__PURE__ */ jsx(Radio, {
+					value: `${DataValidationErrorStyle.WARNING}`,
+					children: localeService.t("sheets-data-validation-ui.panel.showWarning")
+				}), /* @__PURE__ */ jsx(Radio, {
+					value: `${DataValidationErrorStyle.STOP}`,
+					children: localeService.t("sheets-data-validation-ui.panel.rejectInput")
+				})]
+			})
+		}),
+		/* @__PURE__ */ jsx(FormLayout, {
+			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("sheets-data-validation-ui.panel.showInfo")
+			})
+		}),
+		value.showErrorMessage ? /* @__PURE__ */ jsx(FormLayout, { children: /* @__PURE__ */ jsx(Input, {
+			value: value.error,
+			onChange: (error) => onChange({
+				...value,
+				error
+			})
+		}) }) : null
+	] })] });
+}
 
 //#endregion
-//#region src/controllers/dv-alert.controller.ts
-const ALERT_KEY = "SHEET_DATA_VALIDATION_ALERT";
-let DataValidationAlertController = class DataValidationAlertController extends Disposable {
-	constructor(_hoverManagerService, _cellAlertManagerService, _univerInstanceService, _localeService, _dataValidationModel) {
-		super();
-		this._hoverManagerService = _hoverManagerService;
-		this._cellAlertManagerService = _cellAlertManagerService;
-		this._univerInstanceService = _univerInstanceService;
-		this._localeService = _localeService;
-		this._dataValidationModel = _dataValidationModel;
-		this._init();
-	}
-	_init() {
-		this._initCellAlertPopup();
+//#region src/views/components/DataValidationDetail.tsx
+const debounceExecuteFactory = (commandService) => debounce(async (id, params, options, callback) => {
+	const res = await commandService.executeCommand(id, params, options);
+	callback === null || callback === void 0 || callback(res);
+}, 1e3);
+function getSheetIdByName(univerInstanceService, unitId, name) {
+	var _univerInstanceServic2;
+	if (unitId) {
+		var _univerInstanceServic;
+		return ((_univerInstanceServic = univerInstanceService.getUnit(unitId)) === null || _univerInstanceServic === void 0 || (_univerInstanceServic = _univerInstanceServic.getSheetBySheetName(name)) === null || _univerInstanceServic === void 0 ? void 0 : _univerInstanceServic.getSheetId()) || "";
 	}
-	_initCellAlertPopup() {
-		this.disposeWithMe(this._hoverManagerService.currentCell$.pipe(debounceTime(100)).subscribe((cellPos) => {
-			if (cellPos) {
-				const workbook = this._univerInstanceService.getUnit(cellPos.location.unitId, UniverInstanceType.UNIVER_SHEET);
-				const worksheet = workbook.getSheetBySheetId(cellPos.location.subUnitId);
-				if (!worksheet) return;
-				const rule = this._dataValidationModel.getRuleByLocation(cellPos.location.unitId, cellPos.location.subUnitId, cellPos.location.row, cellPos.location.col);
-				if (!rule) {
-					this._cellAlertManagerService.removeAlert(ALERT_KEY);
-					return;
-				}
-				if (this._dataValidationModel.validator(rule, {
-					...cellPos.location,
-					workbook,
-					worksheet
-				}) === DataValidationStatus.INVALID) {
-					var _currentAlert$alert;
-					const currentAlert = this._cellAlertManagerService.currentAlert.get(ALERT_KEY);
-					const currentLoc = currentAlert === null || currentAlert === void 0 || (_currentAlert$alert = currentAlert.alert) === null || _currentAlert$alert === void 0 ? void 0 : _currentAlert$alert.location;
-					if (currentLoc && currentLoc.row === cellPos.location.row && currentLoc.col === cellPos.location.col && currentLoc.subUnitId === cellPos.location.subUnitId && currentLoc.unitId === cellPos.location.unitId) {
-						this._cellAlertManagerService.removeAlert(ALERT_KEY);
-						return;
+	return ((_univerInstanceServic2 = univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_SHEET)) === null || _univerInstanceServic2 === void 0 || (_univerInstanceServic2 = _univerInstanceServic2.getSheetBySheetName(name)) === null || _univerInstanceServic2 === void 0 ? void 0 : _univerInstanceServic2.getSheetId()) || "";
+}
+function DataValidationDetail() {
+	const dataValidationPanelService = useDependency(DataValidationPanelService);
+	const { unitId, subUnitId, rule } = useObservable(dataValidationPanelService.activeRule$, dataValidationPanelService.activeRule) || {};
+	if (!unitId || !subUnitId || !rule) return null;
+	return /* @__PURE__ */ jsx(DataValidationDetailInner, { activeRuleInfo: {
+		unitId,
+		subUnitId,
+		rule
+	} });
+}
+function DataValidationDetailInner(props) {
+	var _validators$sort, _localRule$allowBlank;
+	const [key, setKey] = useState(0);
+	const dataValidationPanelService = useDependency(DataValidationPanelService);
+	const { unitId, subUnitId, rule } = props.activeRuleInfo;
+	const ruleId = rule.uid;
+	const validatorService = useDependency(DataValidatorRegistryService);
+	const univerInstanceService = useDependency(IUniverInstanceService);
+	const componentManager = useDependency(ComponentManager);
+	const commandService = useDependency(ICommandService);
+	const dataValidationModel = useDependency(DataValidationModel);
+	const localeService = useDependency(LocaleService);
+	const workbook = useObservable(() => univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_SHEET), void 0, void 0, []);
+	const worksheet = useObservable(() => {
+		var _workbook$activeSheet;
+		return (_workbook$activeSheet = workbook === null || workbook === void 0 ? void 0 : workbook.activeSheet$) !== null && _workbook$activeSheet !== void 0 ? _workbook$activeSheet : of(null);
+	}, void 0, void 0, []);
+	const [localRule, setLocalRule] = useState(rule);
+	const validator = validatorService.getValidatorItem(localRule.type);
+	const [showError, setShowError] = useState(false);
+	const validators = validatorService.getValidatorsByScope(DataValidatorRegistryScope.SHEET);
+	const [localRanges, setLocalRanges] = useState(() => localRule.ranges.map((i) => ({
+		unitId: "",
+		sheetId: "",
+		range: i
+	})));
+	const debounceExecute = useMemo(() => debounceExecuteFactory(commandService), [commandService]);
+	const [isRangeError, setIsRangeError] = useState(false);
+	const [isFocusRangeSelector, setIsFocusRangeSelector] = useState(false);
+	const rangeSelectorInstance = useRef(null);
+	const sheetSelectionService = useDependency(SheetsSelectionsService);
+	useEffect(() => {
+		return () => {
+			const currentSelection = sheetSelectionService.getCurrentLastSelection();
+			if (currentSelection) sheetSelectionService.setSelections([currentSelection]);
+		};
+	}, [sheetSelectionService]);
+	useEffect(() => {
+		let timer;
+		const disposable = commandService.onCommandExecuted((commandInfo) => {
+			if (commandInfo.id === UndoCommand.id || commandInfo.id === RedoCommand.id) {
+				if (timer !== void 0) clearTimeout(timer);
+				timer = setTimeout(() => {
+					const activeRule = dataValidationModel.getRuleById(unitId, subUnitId, ruleId);
+					setKey((k) => k + 1);
+					if (activeRule) {
+						setLocalRule(activeRule);
+						setLocalRanges(activeRule.ranges.map((i) => ({
+							unitId: "",
+							sheetId: "",
+							range: i
+						})));
 					}
-					const validator = this._dataValidationModel.getValidator(rule.type);
-					if (!validator) {
-						this._cellAlertManagerService.removeAlert(ALERT_KEY);
-						return;
-					}
-					this._cellAlertManagerService.showAlert({
-						type: CellAlertType.ERROR,
-						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,
-						height: 74,
-						key: ALERT_KEY
-					});
-					return;
-				}
+				}, 20);
 			}
-			this._cellAlertManagerService.removeAlert(ALERT_KEY);
-		}));
-	}
-};
-DataValidationAlertController = __decorate([
-	__decorateParam(0, Inject(HoverManagerService)),
-	__decorateParam(1, Inject(CellAlertManagerService)),
-	__decorateParam(2, IUniverInstanceService),
-	__decorateParam(3, Inject(LocaleService)),
-	__decorateParam(4, Inject(SheetDataValidationModel))
-], DataValidationAlertController);
-
-//#endregion
-//#region src/controllers/dv-auto-fill.controller.ts
-let DataValidationAutoFillController = class DataValidationAutoFillController extends Disposable {
-	constructor(_autoFillService, _sheetDataValidationModel, _injector) {
-		super();
-		this._autoFillService = _autoFillService;
-		this._sheetDataValidationModel = _sheetDataValidationModel;
-		this._injector = _injector;
-		this._initAutoFill();
-	}
-	_initAutoFill() {
-		const noopReturnFunc = () => ({
-			redos: [],
-			undos: []
 		});
-		const generalApplyFunc = (location, applyType) => {
-			const { source: sourceRange, target: targetRange, unitId, subUnitId } = location;
-			const ruleMatrixCopy = this._sheetDataValidationModel.getRuleObjectMatrix(unitId, subUnitId).clone();
-			const virtualRange = virtualizeDiscreteRanges([sourceRange, targetRange]);
-			const [vSourceRange, vTargetRange] = virtualRange.ranges;
-			const { mapFunc } = virtualRange;
-			const sourceStartCell = {
-				row: vSourceRange.startRow,
-				col: vSourceRange.startColumn
-			};
-			const repeats = AutoFillTools.getAutoFillRepeatRange(vSourceRange, vTargetRange);
-			const additionMatrix = new 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
-				};
-				Range.foreach(relativeRange, (row, col) => {
-					const sourcePositionRange = 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 = 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 additions = Array.from(additionRules).map((id) => ({
-				id,
-				ranges: queryObjectMatrix(additionMatrix, (value) => value === id)
-			}));
-			ruleMatrixCopy.addRangeRules(additions);
-			const { redoMutations, undoMutations } = getDataValidationDiffMutations(unitId, subUnitId, ruleMatrixCopy.diff(this._sheetDataValidationModel.getRules(unitId, subUnitId)), this._injector, "patched", applyType === AUTO_FILL_APPLY_TYPE.ONLY_FORMAT);
-			return {
-				undos: undoMutations,
-				redos: redoMutations
-			};
-		};
-		const hook = {
-			id: 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 === DataValidationType.CHECKBOX) {
-						this._autoFillService.setDisableApplyType(AUTO_FILL_APPLY_TYPE.SERIES, true);
-						return;
-					}
-				}
-			},
-			onFillData: (location, direction, applyType) => {
-				if (applyType === AUTO_FILL_APPLY_TYPE.COPY || applyType === AUTO_FILL_APPLY_TYPE.ONLY_FORMAT || applyType === AUTO_FILL_APPLY_TYPE.SERIES) return generalApplyFunc(location, applyType);
-				return noopReturnFunc();
-			},
-			onAfterFillData: () => {}
+		return () => {
+			disposable.dispose();
+			if (timer !== void 0) clearTimeout(timer);
 		};
-		this.disposeWithMe(this._autoFillService.addHook(hook));
-	}
-};
-DataValidationAutoFillController = __decorate([
-	__decorateParam(0, IAutoFillService),
-	__decorateParam(1, Inject(SheetDataValidationModel)),
-	__decorateParam(2, Inject(Injector))
-], DataValidationAutoFillController);
-
-//#endregion
-//#region src/controllers/dv-copy-paste.controller.ts
-const specialPastes = [
-	PREDEFINED_HOOK_NAME_PASTE.SPECIAL_PASTE_COL_WIDTH,
-	PREDEFINED_HOOK_NAME_PASTE.SPECIAL_PASTE_VALUE,
-	PREDEFINED_HOOK_NAME_PASTE.SPECIAL_PASTE_FORMAT,
-	PREDEFINED_HOOK_NAME_PASTE.SPECIAL_PASTE_FORMULA
-];
-let DataValidationCopyPasteController = class DataValidationCopyPasteController extends Disposable {
-	constructor(_sheetClipboardService, _sheetDataValidationModel, _injector, _univerInstanceService) {
-		super();
-		this._sheetClipboardService = _sheetClipboardService;
-		this._sheetDataValidationModel = _sheetDataValidationModel;
-		this._injector = _injector;
-		this._univerInstanceService = _univerInstanceService;
-		_defineProperty(this, "_copyInfo", void 0);
-		this._initCopyPaste();
-	}
-	_initCopyPaste() {
-		this._sheetClipboardService.addClipboardHook({
-			id: DATA_VALIDATION_PLUGIN_NAME,
-			onBeforeCopy: (unitId, subUnitId, range) => this._collect(unitId, subUnitId, range),
-			onPasteCells: (pasteFrom, pasteTo, data, payload) => {
-				if (!pasteFrom || !this._copyInfo || specialPastes.includes(payload.pasteType)) return {
-					redos: [],
-					undos: []
+	}, [
+		commandService,
+		dataValidationModel,
+		ruleId,
+		subUnitId,
+		unitId
+	]);
+	const handleUpdateRuleRanges = useEvent((rangeText) => {
+		const unitRanges = rangeText.split(",").filter(Boolean).map(deserializeRangeWithSheet).map((unitRange) => {
+			const sheetName = unitRange.sheetName;
+			if (sheetName) {
+				const sheetId = getSheetIdByName(univerInstanceService, unitRange.unitId, sheetName);
+				return {
+					...unitRange,
+					sheetId
 				};
-				return this._generateMutations(pasteFrom, pasteTo, payload);
 			}
+			return {
+				...unitRange,
+				sheetId: ""
+			};
 		});
-	}
-	_collect(unitId, subUnitId, range) {
-		const matrix = new ObjectMatrix();
-		this._copyInfo = {
+		if (isUnitRangesEqual(unitRanges, localRanges)) return;
+		setLocalRanges(unitRanges);
+		const ranges = unitRanges.filter((i) => (!i.unitId || i.unitId === unitId) && (!i.sheetId || i.sheetId === subUnitId)).map((i) => i.range);
+		setLocalRule({
+			...localRule,
+			ranges
+		});
+		if (ranges.length === 0) return;
+		const params = {
 			unitId,
 			subUnitId,
-			matrix
+			ruleId,
+			ranges
 		};
-		const discreteRange = this._injector.invoke((accessor) => {
-			return rangeToDiscreteRange(range, accessor, unitId, subUnitId);
+		debounceExecute(UpdateSheetDataValidationRangeCommand.id, params);
+	});
+	const rangeStr = useMemo(() => localRanges.map((i) => serializeRange(i.range)).join(","), []);
+	if (!validator) return null;
+	const operators = validator.operators;
+	const operatorNames = validator.operatorNames;
+	const isTwoFormula = localRule.operator ? TWO_FORMULA_OPERATOR_COUNT.includes(localRule.operator) : false;
+	const goBackActiveRuleSheet = () => {
+		if ((worksheet === null || worksheet === void 0 ? void 0 : worksheet.getSheetId()) !== subUnitId) commandService.syncExecuteCommand(SetWorksheetActiveOperation.id, {
+			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 handleOk = () => {
+		var _rangeSelectorInstanc;
+		if ((_rangeSelectorInstanc = rangeSelectorInstance.current) === null || _rangeSelectorInstanc === void 0 || (_rangeSelectorInstanc = _rangeSelectorInstanc.editor) === null || _rangeSelectorInstanc === void 0 ? void 0 : _rangeSelectorInstanc.isFocus()) {
+			var _rangeSelectorInstanc2;
+			handleUpdateRuleRanges((_rangeSelectorInstanc2 = rangeSelectorInstance.current) === null || _rangeSelectorInstanc2 === void 0 ? void 0 : _rangeSelectorInstanc2.getValue());
+		}
+		if (!localRule.ranges.length || isRangeError) return;
+		if (validator.validatorFormula(localRule, unitId, subUnitId).success) dataValidationPanelService.setActiveRule(null);
+		else setShowError(true);
+		goBackActiveRuleSheet();
+	};
+	const handleUpdateRuleSetting = (setting) => {
+		if (shallowEqual(setting, getRuleSetting(localRule))) return;
+		setLocalRule({
+			...localRule,
+			...setting
 		});
-	}
-	_generateMutations(pasteFrom, pasteTo, payload) {
-		const { unitId: copyUnitId, subUnitId: copySubUnitId, range: copyRange } = pasteFrom;
-		const { unitId: pastedUnitId, subUnitId: pastedSubUnitId, range: pastedRange } = pasteTo;
-		const { copyType = COPY_TYPE.COPY } = payload;
-		if (!getSheetCommandTarget(this._univerInstanceService, {
-			unitId: pastedUnitId,
-			subUnitId: pastedSubUnitId
-		})) return {
-			redos: [],
-			undos: []
-		};
-		if (copyType === COPY_TYPE.CUT && pastedUnitId === copyUnitId && pastedSubUnitId === copySubUnitId) {
-			this._copyInfo = null;
-			return {
-				redos: [],
-				undos: []
-			};
-		}
-		if (pastedUnitId !== copyUnitId || pastedSubUnitId !== copySubUnitId) {
-			const ruleMatrix = this._sheetDataValidationModel.getRuleObjectMatrix(pastedUnitId, pastedSubUnitId).clone();
-			const additionMatrix = new ObjectMatrix();
-			const addRules = /* @__PURE__ */ new Set();
-			const { ranges: [vCopyRange, vPastedRange], mapFunc } = virtualizeDiscreteRanges([copyRange, pastedRange]);
-			const repeatRange = 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 = 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 = Array.from(addRules).map((id) => ({
-				id,
-				ranges: queryObjectMatrix(additionMatrix, (value) => value === id)
-			}));
-			ruleMatrix.addRangeRules(additions);
-			const { redoMutations, undoMutations } = getDataValidationDiffMutations(pastedUnitId, pastedSubUnitId, ruleMatrix.diffWithAddition(this._sheetDataValidationModel.getRules(pastedUnitId, pastedSubUnitId), additionRules.values()), this._injector, "patched", false);
-			if (copyType === 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
-					}]
-				}]);
-				const { redoMutations: cutRedos, undoMutations: cutUndos } = getDataValidationDiffMutations(copyUnitId, copySubUnitId, copySheetRuleMatrix.diff(this._sheetDataValidationModel.getRules(copyUnitId, copySubUnitId)), this._injector, "patched", false);
-				redoMutations.push(...cutRedos);
-				undoMutations.push(...cutUndos);
-			}
-			return {
-				redos: redoMutations,
-				undos: undoMutations
-			};
-		} else {
-			const ruleMatrix = this._sheetDataValidationModel.getRuleObjectMatrix(copyUnitId, copySubUnitId).clone();
-			const additionMatrix = new ObjectMatrix();
-			const additionRules = /* @__PURE__ */ new Set();
-			const { ranges: [vCopyRange, vPastedRange], mapFunc } = virtualizeDiscreteRanges([copyRange, pastedRange]);
-			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 = 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) => ({
-				id,
-				ranges: queryObjectMatrix(additionMatrix, (value) => value === id)
-			}));
-			ruleMatrix.addRangeRules(additions);
-			const { redoMutations, undoMutations } = getDataValidationDiffMutations(pastedUnitId, pastedSubUnitId, ruleMatrix.diff(this._sheetDataValidationModel.getRules(copyUnitId, copySubUnitId)), this._injector, "patched", false);
-			return {
-				redos: redoMutations,
-				undos: undoMutations
-			};
-		}
-	}
-};
-DataValidationCopyPasteController = __decorate([
-	__decorateParam(0, ISheetClipboardService),
-	__decorateParam(1, Inject(SheetDataValidationModel)),
-	__decorateParam(2, Inject(Injector)),
-	__decorateParam(3, Inject(IUniverInstanceService))
-], DataValidationCopyPasteController);
-
-//#endregion
-//#region src/controllers/dv-permission.controller.ts
-let DataValidationPermissionController = class DataValidationPermissionController extends Disposable {
-	constructor(_localeService, _commandService, _sheetPermissionCheckController) {
-		super();
-		this._localeService = _localeService;
-		this._commandService = _commandService;
-		this._sheetPermissionCheckController = _sheetPermissionCheckController;
-		this._commandExecutedListener();
-	}
-	_commandExecutedListener() {
-		this.disposeWithMe(this._commandService.beforeCommandExecuted((command) => {
-			if (command.id === AddSheetDataValidationCommand.id) {
-				const { unitId, subUnitId, rule: { ranges } } = command.params;
-				if (!this._sheetPermissionCheckController.permissionCheckWithRanges({
-					workbookTypes: [WorkbookEditablePermission],
-					rangeTypes: [RangeProtectionPermissionEditPoint],
-					worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission]
-				}, 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;
-				if (!this._sheetPermissionCheckController.permissionCheckWithRanges({
-					workbookTypes: [WorkbookEditablePermission],
-					rangeTypes: [RangeProtectionPermissionEditPoint],
-					worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission]
-				}, ranges, unitId, subUnitId)) this._sheetPermissionCheckController.blockExecuteWithoutPermission(this._localeService.t("sheets-data-validation-ui.permission.dialog.setStyleErr"));
-			}
-		}));
-	}
-};
-DataValidationPermissionController = __decorate([
-	__decorateParam(0, Inject(LocaleService)),
-	__decorateParam(1, ICommandService),
-	__decorateParam(2, Inject(SheetPermissionCheckController))
-], DataValidationPermissionController);
-
-//#endregion
-//#region src/controllers/dv-render.controller.ts
-const INVALID_MARK = { tr: {
-	size: 6,
-	color: "#fe4b4b"
-} };
-let SheetsDataValidationRenderController = class SheetsDataValidationRenderController extends RxDisposable {
-	constructor(_commandService, _menuManagerService, _renderManagerService, _univerInstanceService, _autoHeightController, _dropdownManagerService, _sheetDataValidationModel, _dataValidatorRegistryService, _sheetInterceptorService, _dataValidationCacheService, _editorBridgeService) {
-		super();
-		this._commandService = _commandService;
-		this._menuManagerService = _menuManagerService;
-		this._renderManagerService = _renderManagerService;
-		this._univerInstanceService = _univerInstanceService;
-		this._autoHeightController = _autoHeightController;
-		this._dropdownManagerService = _dropdownManagerService;
-		this._sheetDataValidationModel = _sheetDataValidationModel;
-		this._dataValidatorRegistryService = _dataValidatorRegistryService;
-		this._sheetInterceptorService = _sheetInterceptorService;
-		this._dataValidationCacheService = _dataValidationCacheService;
-		this._editorBridgeService = _editorBridgeService;
-		this._initMenu();
-		this._initDropdown();
-		this._initViewModelIntercept();
-		this._initAutoHeight();
-	}
-	_initMenu() {
-		this._menuManagerService.mergeMenu(menuSchema);
-	}
-	_initDropdown() {
-		if (!this._editorBridgeService) return;
-		this.disposeWithMe(this._editorBridgeService.visible$.subscribe((visible) => {
-			if (!visible.visible) {
-				var _this$_dropdownManage;
-				if (((_this$_dropdownManage = this._dropdownManagerService.activeDropdown) === null || _this$_dropdownManage === void 0 ? void 0 : _this$_dropdownManage.trigger) === "editor-bridge") this._dropdownManagerService.hideDropdown();
-				return;
-			}
-			const state = this._editorBridgeService.getEditCellState();
-			if (state) {
-				const { unitId, sheetId, row, column } = state;
-				const workbook = this._univerInstanceService.getUniverSheetInstance(unitId);
-				if (!workbook) return;
-				const rule = this._sheetDataValidationModel.getRuleByLocation(unitId, sheetId, row, column);
-				if (!rule) return;
-				const validator = this._dataValidatorRegistryService.getValidatorItem(rule.type);
-				if (!(validator === null || validator === void 0 ? void 0 : validator.dropdownType)) return;
-				const worksheet = workbook.getActiveSheet();
-				if (!worksheet) return;
-				const activeDropdown = this._dropdownManagerService.activeDropdown;
-				const currLoc = activeDropdown === null || activeDropdown === void 0 ? void 0 : activeDropdown.location;
-				if (currLoc && currLoc.unitId === unitId && currLoc.subUnitId === sheetId && currLoc.row === row && currLoc.col === column) return;
-				this._dropdownManagerService.showDropdown({
-					location: {
-						unitId,
-						subUnitId: sheetId,
-						row,
-						col: column,
-						workbook,
-						worksheet
-					},
-					trigger: "editor-bridge",
-					closeOnOutSide: false
-				});
-			}
-		}));
-	}
-	_initViewModelIntercept() {
-		this.disposeWithMe(this._sheetInterceptorService.intercept(INTERCEPTOR_POINT.CELL_CONTENT, {
-			effect: InterceptorEffectEnum.Style,
-			priority: InterceptCellContentPriority.DATA_VALIDATION,
-			handler: (cell, pos, next) => {
-				var _this$_dataValidation, _cell$customRender, _cell$fontRenderExten, _validator$skipDefaul, _cell$coverable;
-				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 : 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 = getCellValueOrigin(cellOrigin)) !== null && _getCellValueOrigin !== void 0 ? _getCellValueOrigin : null;
-					return cache;
-				} };
-				const valueStr = { get value() {
-					var _cellValue$value;
-					return `${(_cellValue$value = cellValue.value) !== null && _cellValue$value !== void 0 ? _cellValue$value : ""}`;
-				} };
-				if (!cell || cell === pos.rawData) cell = { ...pos.rawData };
-				cell.markers = {
-					...cell === null || cell === void 0 ? void 0 : cell.markers,
-					...validStatus === 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.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))
-				};
-				cell.interceptorStyle = {
-					...cell === null || cell === void 0 ? void 0 : cell.interceptorStyle,
-					...validator === null || validator === void 0 ? void 0 : validator.getExtraStyle(rule, valueStr.value, { get style() {
-						const styleMap = workbook.getStyles();
-						return (typeof (cell === null || cell === void 0 ? void 0 : cell.s) === "string" ? styleMap.get(cell === null || cell === void 0 ? void 0 : cell.s) : cell === null || cell === void 0 ? void 0 : cell.s) || {};
-					} }, row, col)
-				};
-				cell.interceptorAutoHeight = () => {
-					var _this$_renderManagerS, _mergeCell$startRow, _mergeCell$startColum, _validator$canvasRend, _validator$canvasRend2;
-					const skeleton = (_this$_renderManagerS = this._renderManagerService.getRenderById(unitId)) === null || _this$_renderManagerS === void 0 || (_this$_renderManagerS = _this$_renderManagerS.with(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: skeleton.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),
-						unitId,
-						subUnitId,
-						row,
-						col,
-						workbook,
-						worksheet
-					};
-					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;
-					const skeleton = (_this$_renderManagerS2 = this._renderManagerService.getRenderById(unitId)) === null || _this$_renderManagerS2 === void 0 || (_this$_renderManagerS2 = _this$_renderManagerS2.with(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: skeleton.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),
-						unitId,
-						subUnitId,
-						row,
-						col,
-						workbook,
-						worksheet
-					};
-					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 === DataValidationType.LIST || rule.type === DataValidationType.LIST_MULTIPLE);
-				return next(cell);
-			}
-		}));
-	}
-	_initAutoHeight() {
-		this._sheetDataValidationModel.ruleChange$.pipe(filter((change) => change.source === "command"), bufferTime(100)).subscribe((infos) => {
-			if (infos.length === 0) return;
-			const ranges = [];
-			infos.forEach((info) => {
-				if (info.rule.type === DataValidationType.LIST_MULTIPLE || info.rule.type === DataValidationType.LIST) {
-					var _info$rule;
-					if ((_info$rule = info.rule) === null || _info$rule === void 0 ? void 0 : _info$rule.ranges) ranges.push(...info.rule.ranges);
-				}
-			});
-			if (ranges.length) sequenceExecute(this._autoHeightController.getUndoRedoParamsOfAutoHeight(ranges).redos, this._commandService);
-		});
-	}
-};
-SheetsDataValidationRenderController = __decorate([
-	__decorateParam(0, ICommandService),
-	__decorateParam(1, IMenuManagerService),
-	__decorateParam(2, IRenderManagerService),
-	__decorateParam(3, IUniverInstanceService),
-	__decorateParam(4, Inject(AutoHeightController)),
-	__decorateParam(5, Inject(DataValidationDropdownManagerService)),
-	__decorateParam(6, Inject(SheetDataValidationModel)),
-	__decorateParam(7, Inject(DataValidatorRegistryService)),
-	__decorateParam(8, Inject(SheetInterceptorService)),
-	__decorateParam(9, Inject(DataValidationCacheService)),
-	__decorateParam(10, Optional(IEditorBridgeService))
-], SheetsDataValidationRenderController);
-let SheetsDataValidationMobileRenderController = class SheetsDataValidationMobileRenderController extends RxDisposable {
-	constructor(_commandService, _renderManagerService, _autoHeightController, _dataValidatorRegistryService, _sheetInterceptorService, _sheetDataValidationModel, _dataValidationCacheService) {
-		super();
-		this._commandService = _commandService;
-		this._renderManagerService = _renderManagerService;
-		this._autoHeightController = _autoHeightController;
-		this._dataValidatorRegistryService = _dataValidatorRegistryService;
-		this._sheetInterceptorService = _sheetInterceptorService;
-		this._sheetDataValidationModel = _sheetDataValidationModel;
-		this._dataValidationCacheService = _dataValidationCacheService;
-		this._initViewModelIntercept();
-		this._initAutoHeight();
-	}
-	_initViewModelIntercept() {
-		this.disposeWithMe(this._sheetInterceptorService.intercept(INTERCEPTOR_POINT.CELL_CONTENT, {
-			effect: InterceptorEffectEnum.Style,
-			priority: InterceptCellContentPriority.DATA_VALIDATION,
-			handler: (cell, pos, next) => {
-				var _this$_dataValidation2, _cell$customRender2, _cell$fontRenderExten2, _validator$skipDefaul2, _cell$coverable2;
-				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 : DataValidationStatus.VALID;
-				const validator = this._dataValidatorRegistryService.getValidatorItem(rule.type);
-				const cellValue = getCellValueOrigin(worksheet.getCellRaw(row, col));
-				const valueStr = `${cellValue !== null && cellValue !== void 0 ? cellValue : ""}`;
-				if (!cell || cell === pos.rawData) cell = { ...pos.rawData };
-				cell.markers = {
-					...cell === null || cell === void 0 ? void 0 : cell.markers,
-					...validStatus === 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.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))
-				};
-				cell.interceptorStyle = {
-					...cell === null || cell === void 0 ? void 0 : cell.interceptorStyle,
-					...validator === null || validator === void 0 ? void 0 : validator.getExtraStyle(rule, valueStr, { get style() {
-						const styleMap = workbook.getStyles();
-						return (typeof (cell === null || cell === void 0 ? void 0 : cell.s) === "string" ? styleMap.get(cell === null || cell === void 0 ? void 0 : cell.s) : cell === null || cell === void 0 ? void 0 : cell.s) || {};
-					} }, row, col)
-				};
-				cell.interceptorAutoHeight = () => {
-					var _this$_renderManagerS3, _mergeCell$startRow3, _mergeCell$startColum3, _validator$canvasRend5, _validator$canvasRend6;
-					const skeleton = (_this$_renderManagerS3 = this._renderManagerService.getRenderById(unitId)) === null || _this$_renderManagerS3 === void 0 || (_this$_renderManagerS3 = _this$_renderManagerS3.with(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: skeleton.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),
-						unitId,
-						subUnitId,
-						row,
-						col,
-						workbook,
-						worksheet
-					};
-					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;
-					const skeleton = (_this$_renderManagerS4 = this._renderManagerService.getRenderById(unitId)) === null || _this$_renderManagerS4 === void 0 || (_this$_renderManagerS4 = _this$_renderManagerS4.with(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: skeleton.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),
-						unitId,
-						subUnitId,
-						row,
-						col,
-						workbook,
-						worksheet
-					};
-					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 === DataValidationType.LIST || rule.type === DataValidationType.LIST_MULTIPLE);
-				return next(cell);
-			}
-		}));
-	}
-	_initAutoHeight() {
-		this._sheetDataValidationModel.ruleChange$.pipe(filter((change) => change.source === "command"), bufferTime(16)).subscribe((infos) => {
-			const ranges = [];
-			infos.forEach((info) => {
-				if (info.rule.type === DataValidationType.LIST_MULTIPLE || info.rule.type === DataValidationType.LIST) {
-					var _info$rule2;
-					if ((_info$rule2 = info.rule) === null || _info$rule2 === void 0 ? void 0 : _info$rule2.ranges) ranges.push(...info.rule.ranges);
-				}
-			});
-			if (ranges.length) sequenceExecute(this._autoHeightController.getUndoRedoParamsOfAutoHeight(ranges).redos, this._commandService);
-		});
-	}
-};
-SheetsDataValidationMobileRenderController = __decorate([
-	__decorateParam(0, ICommandService),
-	__decorateParam(1, IRenderManagerService),
-	__decorateParam(2, Inject(AutoHeightController)),
-	__decorateParam(3, Inject(DataValidatorRegistryService)),
-	__decorateParam(4, Inject(SheetInterceptorService)),
-	__decorateParam(5, Inject(SheetDataValidationModel)),
-	__decorateParam(6, Inject(DataValidationCacheService))
-], SheetsDataValidationMobileRenderController);
-
-//#endregion
-//#region src/controllers/dv-rerender.controller.ts
-let SheetsDataValidationReRenderController = class SheetsDataValidationReRenderController extends Disposable {
-	constructor(_context, _sheetDataValidationModel, _sheetSkeletonManagerService) {
-		super();
-		this._context = _context;
-		this._sheetDataValidationModel = _sheetDataValidationModel;
-		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
-		this._initSkeletonChange();
-	}
-	_initSkeletonChange() {
-		const reRender = (values) => {
-			var _this$_context$mainCo;
-			if (!values.length) return;
-			const sheetIds = /* @__PURE__ */ new Set();
-			values.forEach((value) => {
-				sheetIds.add(value.subUnitId);
-			});
-			sheetIds.forEach((sheetId) => {
-				var _this$_sheetSkeletonM;
-				(_this$_sheetSkeletonM = this._sheetSkeletonManagerService.getSkeletonParam(sheetId)) === null || _this$_sheetSkeletonM === void 0 || _this$_sheetSkeletonM.skeleton.makeDirty(true);
-			});
-			(_this$_context$mainCo = this._context.mainComponent) === null || _this$_context$mainCo === void 0 || _this$_context$mainCo.makeForceDirty();
-		};
-		this.disposeWithMe(this._sheetDataValidationModel.validStatusChange$.pipe(bufferDebounceTime(16)).subscribe(reRender));
-	}
-};
-SheetsDataValidationReRenderController = __decorate([__decorateParam(1, Inject(SheetDataValidationModel)), __decorateParam(2, Inject(SheetSkeletonManagerService))], SheetsDataValidationReRenderController);
-
-//#endregion
-//#region src/views/components/DataValidationOptions.tsx
-function DataValidationOptions(props) {
-	var _value$errorStyle;
-	const localeService = useDependency(LocaleService);
-	const componentManager = useDependency(ComponentManager);
-	const { value, onChange, extraComponent } = props;
-	const [show, setShow] = useState(false);
-	const ExtraOptions = extraComponent ? componentManager.get(extraComponent) : null;
-	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("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("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({
-					...value,
-					errorStyle: +errorStyle
-				}),
-				children: [/* @__PURE__ */ jsx(Radio, {
-					value: `${DataValidationErrorStyle.WARNING}`,
-					children: localeService.t("sheets-data-validation-ui.panel.showWarning")
-				}), /* @__PURE__ */ jsx(Radio, {
-					value: `${DataValidationErrorStyle.STOP}`,
-					children: localeService.t("sheets-data-validation-ui.panel.rejectInput")
-				})]
-			})
-		}),
-		/* @__PURE__ */ jsx(FormLayout, {
-			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("sheets-data-validation-ui.panel.showInfo")
-			})
-		}),
-		value.showErrorMessage ? /* @__PURE__ */ jsx(FormLayout, { children: /* @__PURE__ */ jsx(Input, {
-			value: value.error,
-			onChange: (error) => onChange({
-				...value,
-				error
-			})
-		}) }) : null
-	] })] });
-}
-
-//#endregion
-//#region src/views/components/DataValidationDetail.tsx
-const debounceExecuteFactory = (commandService) => debounce(async (id, params, options, callback) => {
-	const res = await commandService.executeCommand(id, params, options);
-	callback === null || callback === void 0 || callback(res);
-}, 1e3);
-function getSheetIdByName(univerInstanceService, unitId, name) {
-	var _univerInstanceServic2;
-	if (unitId) {
-		var _univerInstanceServic;
-		return ((_univerInstanceServic = univerInstanceService.getUnit(unitId)) === null || _univerInstanceServic === void 0 || (_univerInstanceServic = _univerInstanceServic.getSheetBySheetName(name)) === null || _univerInstanceServic === void 0 ? void 0 : _univerInstanceServic.getSheetId()) || "";
-	}
-	return ((_univerInstanceServic2 = univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_SHEET)) === null || _univerInstanceServic2 === void 0 || (_univerInstanceServic2 = _univerInstanceServic2.getSheetBySheetName(name)) === null || _univerInstanceServic2 === void 0 ? void 0 : _univerInstanceServic2.getSheetId()) || "";
-}
-function DataValidationDetail() {
-	const dataValidationPanelService = useDependency(DataValidationPanelService);
-	const { unitId, subUnitId, rule } = useObservable(dataValidationPanelService.activeRule$, dataValidationPanelService.activeRule) || {};
-	if (!unitId || !subUnitId || !rule) return null;
-	return /* @__PURE__ */ jsx(DataValidationDetailInner, { activeRuleInfo: {
-		unitId,
-		subUnitId,
-		rule
-	} });
-}
-function DataValidationDetailInner(props) {
-	var _validators$sort, _localRule$allowBlank;
-	const [key, setKey] = useState(0);
-	const dataValidationPanelService = useDependency(DataValidationPanelService);
-	const { unitId, subUnitId, rule } = props.activeRuleInfo;
-	const ruleId = rule.uid;
-	const validatorService = useDependency(DataValidatorRegistryService);
-	const univerInstanceService = useDependency(IUniverInstanceService);
-	const componentManager = useDependency(ComponentManager);
-	const commandService = useDependency(ICommandService);
-	const dataValidationModel = useDependency(DataValidationModel);
-	const localeService = useDependency(LocaleService);
-	const workbook = useObservable(() => univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_SHEET), void 0, void 0, []);
-	const worksheet = useObservable(() => {
-		var _workbook$activeSheet;
-		return (_workbook$activeSheet = workbook === null || workbook === void 0 ? void 0 : workbook.activeSheet$) !== null && _workbook$activeSheet !== void 0 ? _workbook$activeSheet : of(null);
-	}, void 0, void 0, []);
-	const [localRule, setLocalRule] = useState(rule);
-	const validator = validatorService.getValidatorItem(localRule.type);
-	const [showError, setShowError] = useState(false);
-	const validators = validatorService.getValidatorsByScope(DataValidatorRegistryScope.SHEET);
-	const [localRanges, setLocalRanges] = useState(() => localRule.ranges.map((i) => ({
-		unitId: "",
-		sheetId: "",
-		range: i
-	})));
-	const debounceExecute = useMemo(() => debounceExecuteFactory(commandService), [commandService]);
-	const [isRangeError, setIsRangeError] = useState(false);
-	const [isFocusRangeSelector, setIsFocusRangeSelector] = useState(false);
-	const rangeSelectorInstance = useRef(null);
-	const sheetSelectionService = useDependency(SheetsSelectionsService);
-	useEffect(() => {
-		return () => {
-			const currentSelection = sheetSelectionService.getCurrentLastSelection();
-			if (currentSelection) sheetSelectionService.setSelections([currentSelection]);
-		};
-	}, [sheetSelectionService]);
-	useEffect(() => {
-		commandService.onCommandExecuted((commandInfo) => {
-			if (commandInfo.id === UndoCommand.id || commandInfo.id === RedoCommand.id) setTimeout(() => {
-				const activeRule = dataValidationModel.getRuleById(unitId, subUnitId, ruleId);
-				setKey((k) => k + 1);
-				if (activeRule) {
-					setLocalRule(activeRule);
-					setLocalRanges(activeRule.ranges.map((i) => ({
-						unitId: "",
-						sheetId: "",
-						range: i
-					})));
-				}
-			}, 20);
-		});
-	}, [
-		commandService,
-		dataValidationModel,
-		ruleId,
-		subUnitId,
-		unitId
-	]);
-	if (!validator) return null;
-	const operators = validator.operators;
-	const operatorNames = validator.operatorNames;
-	const isTwoFormula = localRule.operator ? TWO_FORMULA_OPERATOR_COUNT.includes(localRule.operator) : false;
-	const goBackActiveRuleSheet = () => {
-		if ((worksheet === null || worksheet === void 0 ? void 0 : worksheet.getSheetId()) !== subUnitId) commandService.syncExecuteCommand(SetWorksheetActiveOperation.id, {
-			unitId,
-			subUnitId
-		});
-	};
-	const handleOk = () => {
-		var _rangeSelectorInstanc;
-		if ((_rangeSelectorInstanc = rangeSelectorInstance.current) === null || _rangeSelectorInstanc === void 0 || (_rangeSelectorInstanc = _rangeSelectorInstanc.editor) === null || _rangeSelectorInstanc === void 0 ? void 0 : _rangeSelectorInstanc.isFocus()) {
-			var _rangeSelectorInstanc2;
-			handleUpdateRuleRanges((_rangeSelectorInstanc2 = rangeSelectorInstance.current) === null || _rangeSelectorInstanc2 === void 0 ? void 0 : _rangeSelectorInstanc2.getValue());
-		}
-		if (!localRule.ranges.length || isRangeError) return;
-		if (validator.validatorFormula(localRule, unitId, subUnitId).success) dataValidationPanelService.setActiveRule(null);
-		else setShowError(true);
-		goBackActiveRuleSheet();
-	};
-	const handleUpdateRuleRanges = useEvent((rangeText) => {
-		const unitRanges = rangeText.split(",").filter(Boolean).map(deserializeRangeWithSheet).map((unitRange) => {
-			const sheetName = unitRange.sheetName;
-			if (sheetName) {
-				const sheetId = getSheetIdByName(univerInstanceService, unitRange.unitId, sheetName);
-				return {
-					...unitRange,
-					sheetId
-				};
-			}
-			return {
-				...unitRange,
-				sheetId: ""
-			};
-		});
-		if (isUnitRangesEqual(unitRanges, localRanges)) return;
-		setLocalRanges(unitRanges);
-		const ranges = unitRanges.filter((i) => (!i.unitId || i.unitId === unitId) && (!i.sheetId || i.sheetId === subUnitId)).map((i) => i.range);
-		setLocalRule({
-			...localRule,
-			ranges
-		});
-		if (ranges.length === 0) return;
-		const params = {
-			unitId,
-			subUnitId,
-			ruleId,
-			ranges
-		};
-		debounceExecute(UpdateSheetDataValidationRangeCommand.id, params);
-	});
-	const handleUpdateRuleSetting = (setting) => {
-		if (shallowEqual(setting, getRuleSetting(localRule))) return;
-		setLocalRule({
-			...localRule,
-			...setting
-		});
-		const params = {
-			unitId,
-			subUnitId,
-			ruleId,
-			setting
+		const params = {
+			unitId,
+			subUnitId,
+			ruleId,
+			setting
 		};
 		debounceExecute(UpdateSheetDataValidationSettingCommand.id, params, void 0);
 	};
@@ -1707,7 +1237,6 @@ function DataValidationDetailInner(props) {
 		});
 	};
 	const FormulaInput = componentManager.get(validator.formulaInput);
-	const rangeStr = useMemo(() => localRanges.map((i) => serializeRange(i.range)).join(","), []);
 	const options = getRuleOptions(localRule);
 	const handleUpdateRuleOptions = (newOptions) => {
 		if (shallowEqual(newOptions, getRuleOptions(localRule))) return;
@@ -1920,23 +1449,14 @@ function DataValidationList(props) {
 	const injector = useDependency(Injector);
 	const dataValidationPanelService = useDependency(DataValidationPanelService);
 	const localeService = useDependency(LocaleService);
-	const [rules, setRules] = useState([]);
 	const { workbook } = props;
 	const worksheet = useObservable(workbook.activeSheet$, void 0, true);
 	const unitId = workbook.getUnitId();
 	const subUnitId = worksheet === null || worksheet === void 0 ? void 0 : worksheet.getSheetId();
-	useEffect(() => {
-		setRules(sheetDataValidationModel.getRules(unitId, subUnitId));
-		const subscription = sheetDataValidationModel.ruleChange$.subscribe((change) => {
-			if (change.unitId === unitId && change.subUnitId === subUnitId) setRules(sheetDataValidationModel.getRules(unitId, subUnitId));
-		});
-		return () => {
-			subscription.unsubscribe();
-		};
-	}, [
-		unitId,
+	const rules = useObservable(() => sheetDataValidationModel.ruleChange$.pipe(filter((change) => change.unitId === unitId && change.subUnitId === subUnitId), map(() => sheetDataValidationModel.getRules(unitId, subUnitId)), startWith(sheetDataValidationModel.getRules(unitId, subUnitId))), [], false, [
+		sheetDataValidationModel,
 		subUnitId,
-		sheetDataValidationModel
+		unitId
 	]);
 	const handleAddRule = async () => {
 		const rule = createDefaultNewRule(injector);
@@ -2150,47 +1670,414 @@ function CheckboxFormulaInput(props) {
 					});
 				}
 			})
-		}) : null
-	] });
-}
-
-//#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;
+		}) : null
+	] });
+}
+
+//#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 = useRef(null);
+	const [isFocusFormulaEditor, setIsFocusFormulaEditor] = useState(false);
+	useSidebarClick((e) => {
+		var _formulaEditorRef$cur;
+		!((_formulaEditorRef$cur = formulaEditorRef.current) === null || _formulaEditorRef$cur === void 0) && _formulaEditorRef$cur.isClickOutSide(e) && setIsFocusFormulaEditor(false);
+	});
+	return /* @__PURE__ */ jsx(FormLayout, {
+		error: formula1Res,
+		children: /* @__PURE__ */ jsx(FormulaEditor, {
+			ref: formulaEditorRef,
+			className: 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", borderClassName),
+			initValue: (_value$formula = value === null || value === void 0 ? void 0 : value.formula1) !== null && _value$formula !== void 0 ? _value$formula : "=",
+			unitId,
+			subUnitId,
+			isFocus: isFocusFormulaEditor,
+			isSupportAcrossSheet: true,
+			onChange: (newValue) => {
+				const newFormula = (newValue !== null && newValue !== void 0 ? newValue : "").trim();
+				if (newFormula === (value === null || value === void 0 ? void 0 : value.formula1)) return;
+				onChange === null || onChange === void 0 || onChange({
+					...value,
+					formula1: newFormula
+				});
+			},
+			onFocus: () => setIsFocusFormulaEditor(true)
+		})
+	});
+}
+
+//#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 = [
+	"#FFFFFF",
+	"#FEE7E7",
+	"#FEF0E6",
+	"#EFFBD0",
+	"#E4F4FE",
+	"#E8ECFD",
+	"#F1EAFA",
+	"#FDE8F3",
+	"#E5E5E5",
+	"#FDCECE",
+	"#FDC49B",
+	"#DEF6A2",
+	"#9FDAFF",
+	"#D0D9FB",
+	"#E3D5F6",
+	"#FBD0E8",
+	"#656565",
+	"#FE4B4B",
+	"#FF8C51",
+	"#8BBB11",
+	"#0B9EFB",
+	"#3A60F7",
+	"#9E6DE3",
+	"#F248A6"
+];
+const ColorSelect = (props) => {
+	const { value, onChange, disabled } = props;
+	const [open, setOpen] = useState(false);
+	return /* @__PURE__ */ jsx(Dropdown, {
+		align: "start",
+		disabled,
+		open,
+		onOpenChange: setOpen,
+		overlay: /* @__PURE__ */ jsx("div", {
+			className: "univer-box-border univer-grid univer-w-fit univer-grid-cols-6 univer-flex-wrap univer-gap-2 univer-p-1.5",
+			children: DEFAULT_COLOR_PRESET.map((color) => /* @__PURE__ */ jsx("div", {
+				className: clsx("univer-box-border univer-size-4 univer-cursor-pointer univer-rounded", borderClassName),
+				style: { background: color },
+				onClick: () => {
+					onChange(color);
+					setOpen(false);
+				}
+			}, color))
+		}),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: 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", borderClassName),
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "univer-box-border univer-size-4 univer-rounded univer-text-base",
+				style: { background: value }
+			}), /* @__PURE__ */ jsx(MoreDownIcon, {})]
+		})
+	});
+};
+const Template = (props) => {
+	const { item, commonProps, className } = props;
+	const { onItemChange, onItemDelete } = commonProps;
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("univer-flex univer-items-center univer-gap-2", className),
+		children: [
+			!item.isRef && /* @__PURE__ */ jsx("div", {
+				className: clsx("univer-cursor-move", "draggableHandle"),
+				children: /* @__PURE__ */ jsx(GripVerticalIcon, {})
+			}),
+			/* @__PURE__ */ jsx(ColorSelect, {
+				value: item.color,
+				onChange: (color) => {
+					onItemChange(item.id, item.label, color);
+				}
+			}),
+			/* @__PURE__ */ jsx(Input, {
+				disabled: item.isRef,
+				value: item.label,
+				onChange: (label) => {
+					onItemChange(item.id, label, item.color);
+				}
+			}),
+			item.isRef ? null : /* @__PURE__ */ jsx("div", {
+				className: "univer-ml-1 univer-cursor-pointer univer-rounded univer-text-base hover:univer-bg-gray-200",
+				children: /* @__PURE__ */ jsx(DeleteIcon, { onClick: () => onItemDelete(item.id) })
+			})
+		]
+	});
+};
+const NOOP = () => {};
+function ListFormulaInput(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 : "=");
+	const [formulaStrCopy, setFormulaStrCopy] = useState(isFormulaStr === "1" ? formula1 : "=");
+	const localeService = useDependency(LocaleService);
+	const dataValidatorRegistryService = useDependency(DataValidatorRegistryService);
+	const dataValidationModel = useDependency(DataValidationModel);
+	const dataValidationFormulaController = useDependency(DataValidationFormulaController);
+	const dataValidationPanelService = useDependency(DataValidationPanelService);
+	const [refColors, setRefColors] = useState(() => formula2.split(","));
+	const listValidator = dataValidatorRegistryService.getValidatorItem(DataValidationType.LIST);
+	const [refOptions, setRefOptions] = useState([]);
+	const [localError, setLocalError] = useState("");
+	const formula1Res = showError ? validResult === null || validResult === void 0 ? void 0 : validResult.formula1 : "";
+	const ruleChange = useObservable(useMemo(() => dataValidationModel.ruleChange$.pipe(debounceTime(16)), []));
+	const onChange = useEvent(_onChange);
+	useEffect(() => {
+		let cancelled = false;
+		const timer = setTimeout(() => {
+			const rule = dataValidationModel.getRuleById(unitId, subUnitId, ruleId);
+			if (isFormulaString(rule === null || rule === void 0 ? void 0 : rule.formula1) && listValidator && rule) listValidator.getListAsync(rule, unitId, subUnitId).then((options) => {
+				if (!cancelled) setRefOptions(options);
+			});
+		}, 100);
+		return () => {
+			cancelled = true;
+			clearTimeout(timer);
+		};
+	}, [
+		dataValidationModel,
+		ruleChange,
+		listValidator,
+		ruleId,
+		subUnitId,
+		unitId
+	]);
+	useEffect(() => {
+		if (isFormulaString(formula1) && formula1 !== formulaStrCopy) {
+			setFormulaStr(formula1);
+			setFormulaStrCopy(formula1);
+		}
+	}, [formulaStrCopy, formula1]);
+	const [strList, setStrList] = useState(() => {
+		const strOptions = isFormulaStr !== "1" ? deserializeListOptions(formula1) : [];
+		const strColors = formula2.split(",");
+		return strOptions.map((label, i) => ({
+			label,
+			color: strColors[i] || "#ECECEC",
+			isRef: false,
+			id: generateRandomId(4)
+		}));
+	});
+	const handleStrItemChange = (id, value, color) => {
+		const item = strList.find((i) => i.id === id);
+		if (!item) return;
+		item.label = value;
+		item.color = color;
+		setStrList([...strList]);
+	};
+	const handleStrItemDelete = (id) => {
+		const index = strList.findIndex((i) => i.id === id);
+		if (index !== -1) {
+			strList.splice(index, 1);
+			setStrList([...strList]);
+		}
+	};
+	const refFinalList = useMemo(() => refOptions.map((label, i) => ({
+		label,
+		color: refColors[i] || "#ECECEC",
+		id: `${i}`,
+		isRef: true
+	})), [refColors, refOptions]);
+	const handleRefItemChange = (id, value, color) => {
+		const newColors = [...refColors];
+		newColors[+id] = color;
+		setRefColors(newColors);
+		onChange({
+			formula1,
+			formula2: newColors.join(",")
+		});
+	};
+	const handleAdd = () => {
+		setStrList([...strList, {
+			label: "",
+			color: DROP_DOWN_DEFAULT_COLOR,
+			isRef: false,
+			id: generateRandomId(4)
+		}]);
+	};
+	useEffect(() => {
+		if (isFormulaStr === "1") return;
+		onChange(buildCustomListFormulaPayload(strList, DROP_DOWN_DEFAULT_COLOR));
+	}, [
+		strList,
+		onChange,
+		isFormulaStr
+	]);
+	const updateFormula = useEvent(async (str) => {
+		if (!isFormulaString(str)) {
+			onChange === null || onChange === void 0 || onChange({
+				formula1: "",
+				formula2
+			});
+			return;
+		}
+		if (dataValidationFormulaController.getFormulaRefCheck(str)) {
+			onChange === null || onChange === void 0 || onChange({
+				formula1: isFormulaString(str) ? str : "",
+				formula2
+			});
+			setLocalError("");
+		} else {
+			onChange === null || onChange === void 0 || onChange({
+				formula1: "",
+				formula2
+			});
+			setFormulaStr("=");
+			setLocalError(localeService.t("sheets-data-validation-ui.validFail.formulaError"));
+		}
+	});
 	const formulaEditorRef = useRef(null);
 	const [isFocusFormulaEditor, setIsFocusFormulaEditor] = useState(false);
 	useSidebarClick((e) => {
 		var _formulaEditorRef$cur;
 		!((_formulaEditorRef$cur = formulaEditorRef.current) === null || _formulaEditorRef$cur === void 0) && _formulaEditorRef$cur.isClickOutSide(e) && setIsFocusFormulaEditor(false);
 	});
-	return /* @__PURE__ */ jsx(FormLayout, {
-		error: formula1Res,
-		children: /* @__PURE__ */ jsx(FormulaEditor, {
+	useEffect(() => {
+		if (isFocusFormulaEditor) dataValidationPanelService.setFocusFormulaEditorActiveRuleSubUnitId(subUnitId);
+		else dataValidationPanelService.setFocusFormulaEditorActiveRuleSubUnitId(null);
+	}, [
+		isFocusFormulaEditor,
+		subUnitId,
+		dataValidationPanelService
+	]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FormLayout, {
+		label: localeService.t("sheets-data-validation-ui.list.options"),
+		children: /* @__PURE__ */ jsxs(RadioGroup, {
+			value: isFormulaStr,
+			onChange: (v) => {
+				setIsFormulaStr(v);
+				setFormulaStr(formulaStrCopy);
+				if (v === "1") onChange({
+					formula1: formulaStrCopy === "=" ? "" : formulaStrCopy,
+					formula2: refColors.join(",")
+				});
+			},
+			children: [/* @__PURE__ */ jsx(Radio, {
+				value: "0",
+				children: localeService.t("sheets-data-validation-ui.list.customOptions")
+			}), /* @__PURE__ */ jsx(Radio, {
+				value: "1",
+				children: localeService.t("sheets-data-validation-ui.list.refOptions")
+			})]
+		})
+	}), isFormulaStr === "1" ? /* @__PURE__ */ jsxs(FormLayout, {
+		error: formula1Res || localError || void 0,
+		children: [/* @__PURE__ */ jsx(FormulaEditor, {
 			ref: formulaEditorRef,
 			className: 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", borderClassName),
-			initValue: (_value$formula = value === null || value === void 0 ? void 0 : value.formula1) !== null && _value$formula !== void 0 ? _value$formula : "=",
+			initValue: formulaStr,
 			unitId,
 			subUnitId,
 			isFocus: isFocusFormulaEditor,
 			isSupportAcrossSheet: true,
-			onChange: (newValue) => {
-				const newFormula = (newValue !== null && newValue !== void 0 ? newValue : "").trim();
-				if (newFormula === (value === null || value === void 0 ? void 0 : value.formula1)) return;
-				onChange === null || onChange === void 0 || onChange({
-					...value,
-					formula1: newFormula
-				});
-			},
-			onFocus: () => setIsFocusFormulaEditor(true)
+			onFocus: () => setIsFocusFormulaEditor(true),
+			onChange: (v = "") => {
+				const str = (v !== null && v !== void 0 ? v : "").trim();
+				setFormulaStrCopy(str);
+				updateFormula(str);
+			}
+		}), refFinalList.length > 0 && /* @__PURE__ */ jsx("div", {
+			className: "univer-mt-3",
+			children: refFinalList.map((item) => {
+				return /* @__PURE__ */ jsx(Template, {
+					className: "univer-mb-3",
+					item,
+					commonProps: { onItemChange: handleRefItemChange }
+				}, item.id);
+			})
+		})]
+	}) : /* @__PURE__ */ jsx(FormLayout, {
+		error: formula1Res,
+		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")]
+		})] })
+	})] });
+}
+
+//#endregion
+//#region src/views/components/formula-input/index.ts
+const FORMULA_INPUTS = [
+	[CUSTOM_FORMULA_INPUT_NAME, CustomFormulaInput],
+	[BASE_FORMULA_INPUT_NAME, BaseFormulaInput],
+	[LIST_FORMULA_INPUT_NAME, ListFormulaInput],
+	[CHECKBOX_FORMULA_INPUT_NAME, CheckboxFormulaInput]
+];
+
+//#endregion
+//#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 = useDependency(LocaleService);
+	return /* @__PURE__ */ jsx(FormLayout, {
+		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({
+				...value,
+				renderMode: +renderMode
+			}),
+			children: [
+				/* @__PURE__ */ jsx(Radio, {
+					value: `${DataValidationRenderMode.CUSTOM}`,
+					children: localeService.t("sheets-data-validation-ui.renderMode.chip")
+				}),
+				/* @__PURE__ */ jsx(Radio, {
+					value: `${DataValidationRenderMode.ARROW}`,
+					children: localeService.t("sheets-data-validation-ui.renderMode.arrow")
+				}),
+				/* @__PURE__ */ jsx(Radio, {
+					value: `${DataValidationRenderMode.TEXT}`,
+					children: localeService.t("sheets-data-validation-ui.renderMode.text")
+				})
+			]
 		})
 	});
 }
+ListRenderModeInput.componentKey = LIST_RENDER_MODE_OPTION_INPUT;
 
 //#endregion
-//#region src/views/components/formula-input/utils.ts
+//#region src/controllers/components.controller.ts
 /**
 * Copyright 2023-present DreamNum Co., Ltd.
 *
@@ -2206,349 +2093,715 @@ function CustomFormulaInput(props) {
 * 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(",")
-	};
-}
+let ComponentsController = class ComponentsController extends Disposable {
+	constructor(_componentManager, _iconManager) {
+		super();
+		this._componentManager = _componentManager;
+		this._iconManager = _iconManager;
+		this._registerIcons();
+		this._registerComponents();
+	}
+	_registerIcons() {
+		this.disposeWithMe(this._iconManager.register({
+			CheckboxIcon,
+			DataValidationIcon,
+			DatePickerIcon,
+			DropdownListIcon
+		}));
+	}
+	_registerComponents() {
+		[
+			[DATA_VALIDATION_PANEL, DataValidationPanel],
+			[ListRenderModeInput.componentKey, ListRenderModeInput],
+			[DateShowTimeOption.componentKey, DateShowTimeOption],
+			[DROPDOWN_PRESETS_COMPONENT, DropdownPresets],
+			...FORMULA_INPUTS
+		].forEach(([key, component]) => {
+			this.disposeWithMe(this._componentManager.register(key, component));
+		});
+	}
+};
+ComponentsController = __decorate([__decorateParam(0, Inject(ComponentManager)), __decorateParam(1, Inject(IconManager))], ComponentsController);
 
 //#endregion
-//#region src/views/components/formula-input/ListFormulaInput.tsx
-const DEFAULT_COLOR_PRESET = [
-	"#FFFFFF",
-	"#FEE7E7",
-	"#FEF0E6",
-	"#EFFBD0",
-	"#E4F4FE",
-	"#E8ECFD",
-	"#F1EAFA",
-	"#FDE8F3",
-	"#E5E5E5",
-	"#FDCECE",
-	"#FDC49B",
-	"#DEF6A2",
-	"#9FDAFF",
-	"#D0D9FB",
-	"#E3D5F6",
-	"#FBD0E8",
-	"#656565",
-	"#FE4B4B",
-	"#FF8C51",
-	"#8BBB11",
-	"#0B9EFB",
-	"#3A60F7",
-	"#9E6DE3",
-	"#F248A6"
-];
-const ColorSelect = (props) => {
-	const { value, onChange, disabled } = props;
-	const [open, setOpen] = useState(false);
-	return /* @__PURE__ */ jsx(Dropdown, {
-		align: "start",
-		disabled,
-		open,
-		onOpenChange: setOpen,
-		overlay: /* @__PURE__ */ jsx("div", {
-			className: "univer-box-border univer-grid univer-w-fit univer-grid-cols-6 univer-flex-wrap univer-gap-2 univer-p-1.5",
-			children: DEFAULT_COLOR_PRESET.map((color) => /* @__PURE__ */ jsx("div", {
-				className: clsx("univer-box-border univer-size-4 univer-cursor-pointer univer-rounded", borderClassName),
-				style: { background: color },
-				onClick: () => {
-					onChange(color);
-					setOpen(false);
+//#region src/controllers/dv-alert.controller.ts
+const ALERT_KEY = "SHEET_DATA_VALIDATION_ALERT";
+let DataValidationAlertController = class DataValidationAlertController extends Disposable {
+	constructor(_hoverManagerService, _cellAlertManagerService, _univerInstanceService, _localeService, _dataValidationModel) {
+		super();
+		this._hoverManagerService = _hoverManagerService;
+		this._cellAlertManagerService = _cellAlertManagerService;
+		this._univerInstanceService = _univerInstanceService;
+		this._localeService = _localeService;
+		this._dataValidationModel = _dataValidationModel;
+		this._init();
+	}
+	_init() {
+		this._initCellAlertPopup();
+	}
+	_initCellAlertPopup() {
+		this.disposeWithMe(this._hoverManagerService.currentCell$.pipe(debounceTime(100)).subscribe((cellPos) => {
+			if (cellPos) {
+				const workbook = this._univerInstanceService.getUnit(cellPos.location.unitId, UniverInstanceType.UNIVER_SHEET);
+				const worksheet = workbook.getSheetBySheetId(cellPos.location.subUnitId);
+				if (!worksheet) return;
+				const rule = this._dataValidationModel.getRuleByLocation(cellPos.location.unitId, cellPos.location.subUnitId, cellPos.location.row, cellPos.location.col);
+				if (!rule) {
+					this._cellAlertManagerService.removeAlert(ALERT_KEY);
+					return;
 				}
-			}, color))
-		}),
-		children: /* @__PURE__ */ jsxs("div", {
-			className: 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", borderClassName),
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "univer-box-border univer-size-4 univer-rounded univer-text-base",
-				style: { background: value }
-			}), /* @__PURE__ */ jsx(MoreDownIcon, {})]
-		})
-	});
-};
-const Template = (props) => {
-	const { item, commonProps, className } = props;
-	const { onItemChange, onItemDelete } = commonProps;
-	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("univer-flex univer-items-center univer-gap-2", className),
-		children: [
-			!item.isRef && /* @__PURE__ */ jsx("div", {
-				className: clsx("univer-cursor-move", "draggableHandle"),
-				children: /* @__PURE__ */ jsx(GripVerticalIcon, {})
-			}),
-			/* @__PURE__ */ jsx(ColorSelect, {
-				value: item.color,
-				onChange: (color) => {
-					onItemChange(item.id, item.label, color);
+				if (this._dataValidationModel.validator(rule, {
+					...cellPos.location,
+					workbook,
+					worksheet
+				}) === DataValidationStatus.INVALID) {
+					var _currentAlert$alert;
+					const currentAlert = this._cellAlertManagerService.currentAlert.get(ALERT_KEY);
+					const currentLoc = currentAlert === null || currentAlert === void 0 || (_currentAlert$alert = currentAlert.alert) === null || _currentAlert$alert === void 0 ? void 0 : _currentAlert$alert.location;
+					if (currentLoc && currentLoc.row === cellPos.location.row && currentLoc.col === cellPos.location.col && currentLoc.subUnitId === cellPos.location.subUnitId && currentLoc.unitId === cellPos.location.unitId) {
+						this._cellAlertManagerService.removeAlert(ALERT_KEY);
+						return;
+					}
+					const validator = this._dataValidationModel.getValidator(rule.type);
+					if (!validator) {
+						this._cellAlertManagerService.removeAlert(ALERT_KEY);
+						return;
+					}
+					this._cellAlertManagerService.showAlert({
+						type: CellAlertType.ERROR,
+						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,
+						height: 74,
+						key: ALERT_KEY
+					});
+					return;
 				}
-			}),
-			/* @__PURE__ */ jsx(Input, {
-				disabled: item.isRef,
-				value: item.label,
-				onChange: (label) => {
-					onItemChange(item.id, label, item.color);
+			}
+			this._cellAlertManagerService.removeAlert(ALERT_KEY);
+		}));
+	}
+};
+DataValidationAlertController = __decorate([
+	__decorateParam(0, Inject(HoverManagerService)),
+	__decorateParam(1, Inject(CellAlertManagerService)),
+	__decorateParam(2, IUniverInstanceService),
+	__decorateParam(3, Inject(LocaleService)),
+	__decorateParam(4, Inject(SheetDataValidationModel))
+], DataValidationAlertController);
+
+//#endregion
+//#region src/controllers/dv-auto-fill.controller.ts
+let DataValidationAutoFillController = class DataValidationAutoFillController extends Disposable {
+	constructor(_autoFillService, _sheetDataValidationModel, _injector) {
+		super();
+		this._autoFillService = _autoFillService;
+		this._sheetDataValidationModel = _sheetDataValidationModel;
+		this._injector = _injector;
+		this._initAutoFill();
+	}
+	_initAutoFill() {
+		const noopReturnFunc = () => ({
+			redos: [],
+			undos: []
+		});
+		const generalApplyFunc = (location, applyType) => {
+			const { source: sourceRange, target: targetRange, unitId, subUnitId } = location;
+			const ruleMatrixCopy = this._sheetDataValidationModel.getRuleObjectMatrix(unitId, subUnitId).clone();
+			const virtualRange = virtualizeDiscreteRanges([sourceRange, targetRange]);
+			const [vSourceRange, vTargetRange] = virtualRange.ranges;
+			const { mapFunc } = virtualRange;
+			const sourceStartCell = {
+				row: vSourceRange.startRow,
+				col: vSourceRange.startColumn
+			};
+			const repeats = AutoFillTools.getAutoFillRepeatRange(vSourceRange, vTargetRange);
+			const additionMatrix = new 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
+				};
+				Range.foreach(relativeRange, (row, col) => {
+					const sourcePositionRange = 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 = 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 additions = Array.from(additionRules).map((id) => ({
+				id,
+				ranges: queryObjectMatrix(additionMatrix, (value) => value === id)
+			}));
+			ruleMatrixCopy.addRangeRules(additions);
+			const { redoMutations, undoMutations } = getDataValidationDiffMutations(unitId, subUnitId, ruleMatrixCopy.diff(this._sheetDataValidationModel.getRules(unitId, subUnitId)), this._injector, "patched", applyType === AUTO_FILL_APPLY_TYPE.ONLY_FORMAT);
+			return {
+				undos: undoMutations,
+				redos: redoMutations
+			};
+		};
+		const hook = {
+			id: 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 === DataValidationType.CHECKBOX) {
+						this._autoFillService.setDisableApplyType(AUTO_FILL_APPLY_TYPE.SERIES, true);
+						return;
+					}
 				}
-			}),
-			item.isRef ? null : /* @__PURE__ */ jsx("div", {
-				className: "univer-ml-1 univer-cursor-pointer univer-rounded univer-text-base hover:univer-bg-gray-200",
-				children: /* @__PURE__ */ jsx(DeleteIcon, { onClick: () => onItemDelete(item.id) })
-			})
-		]
-	});
+			},
+			onFillData: (location, direction, applyType) => {
+				if (applyType === AUTO_FILL_APPLY_TYPE.COPY || applyType === AUTO_FILL_APPLY_TYPE.ONLY_FORMAT || applyType === AUTO_FILL_APPLY_TYPE.SERIES) return generalApplyFunc(location, applyType);
+				return noopReturnFunc();
+			},
+			onAfterFillData: () => {}
+		};
+		this.disposeWithMe(this._autoFillService.addHook(hook));
+	}
 };
-const NOOP = () => {};
-function ListFormulaInput(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 : "=");
-	const [formulaStrCopy, setFormulaStrCopy] = useState(isFormulaStr === "1" ? formula1 : "=");
-	const localeService = useDependency(LocaleService);
-	const dataValidatorRegistryService = useDependency(DataValidatorRegistryService);
-	const dataValidationModel = useDependency(DataValidationModel);
-	const dataValidationFormulaController = useDependency(DataValidationFormulaController);
-	const dataValidationPanelService = useDependency(DataValidationPanelService);
-	const [refColors, setRefColors] = useState(() => formula2.split(","));
-	const listValidator = dataValidatorRegistryService.getValidatorItem(DataValidationType.LIST);
-	const [refOptions, setRefOptions] = useState([]);
-	const [localError, setLocalError] = useState("");
-	const formula1Res = showError ? validResult === null || validResult === void 0 ? void 0 : validResult.formula1 : "";
-	const ruleChange = useObservable(useMemo(() => dataValidationModel.ruleChange$.pipe(debounceTime(16)), []));
-	const onChange = useEvent(_onChange);
-	useEffect(() => {
-		(async () => {
-			await awaitTime(100);
-			const rule = dataValidationModel.getRuleById(unitId, subUnitId, ruleId);
-			if (isFormulaString(rule === null || rule === void 0 ? void 0 : rule.formula1) && listValidator && rule) setRefOptions(await listValidator.getListAsync(rule, unitId, subUnitId));
-		})();
-	}, [
-		dataValidationModel,
-		ruleChange,
-		listValidator,
-		ruleId,
-		subUnitId,
-		unitId
-	]);
-	useEffect(() => {
-		if (isFormulaString(formula1) && formula1 !== formulaStrCopy) {
-			setFormulaStr(formula1);
-			setFormulaStrCopy(formulaStrCopy);
-		}
-	}, [formulaStrCopy, formula1]);
-	const [strList, setStrList] = useState(() => {
-		const strOptions = isFormulaStr !== "1" ? deserializeListOptions(formula1) : [];
-		const strColors = formula2.split(",");
-		return strOptions.map((label, i) => ({
-			label,
-			color: strColors[i] || "#ECECEC",
-			isRef: false,
-			id: generateRandomId(4)
-		}));
-	});
-	const handleStrItemChange = (id, value, color) => {
-		const item = strList.find((i) => i.id === id);
-		if (!item) return;
-		item.label = value;
-		item.color = color;
-		setStrList([...strList]);
-	};
-	const handleStrItemDelete = (id) => {
-		const index = strList.findIndex((i) => i.id === id);
-		if (index !== -1) {
-			strList.splice(index, 1);
-			setStrList([...strList]);
-		}
-	};
-	const refFinalList = useMemo(() => refOptions.map((label, i) => ({
-		label,
-		color: refColors[i] || "#ECECEC",
-		id: `${i}`,
-		isRef: true
-	})), [refColors, refOptions]);
-	const handleRefItemChange = (id, value, color) => {
-		const newColors = [...refColors];
-		newColors[+id] = color;
-		setRefColors(newColors);
-		onChange({
-			formula1,
-			formula2: newColors.join(",")
+DataValidationAutoFillController = __decorate([
+	__decorateParam(0, IAutoFillService),
+	__decorateParam(1, Inject(SheetDataValidationModel)),
+	__decorateParam(2, Inject(Injector))
+], DataValidationAutoFillController);
+
+//#endregion
+//#region src/controllers/dv-copy-paste.controller.ts
+const specialPastes = [
+	PREDEFINED_HOOK_NAME_PASTE.SPECIAL_PASTE_COL_WIDTH,
+	PREDEFINED_HOOK_NAME_PASTE.SPECIAL_PASTE_VALUE,
+	PREDEFINED_HOOK_NAME_PASTE.SPECIAL_PASTE_FORMAT,
+	PREDEFINED_HOOK_NAME_PASTE.SPECIAL_PASTE_FORMULA
+];
+let DataValidationCopyPasteController = class DataValidationCopyPasteController extends Disposable {
+	constructor(_sheetClipboardService, _sheetDataValidationModel, _injector, _univerInstanceService) {
+		super();
+		this._sheetClipboardService = _sheetClipboardService;
+		this._sheetDataValidationModel = _sheetDataValidationModel;
+		this._injector = _injector;
+		this._univerInstanceService = _univerInstanceService;
+		_defineProperty(this, "_copyInfo", void 0);
+		this._initCopyPaste();
+	}
+	_initCopyPaste() {
+		this._sheetClipboardService.addClipboardHook({
+			id: DATA_VALIDATION_PLUGIN_NAME,
+			onBeforeCopy: (unitId, subUnitId, range) => this._collect(unitId, subUnitId, range),
+			onPasteCells: (pasteFrom, pasteTo, data, payload) => {
+				if (!pasteFrom || !this._copyInfo || specialPastes.includes(payload.pasteType)) return {
+					redos: [],
+					undos: []
+				};
+				return this._generateMutations(pasteFrom, pasteTo, payload);
+			}
 		});
-	};
-	const handleAdd = () => {
-		setStrList([...strList, {
-			label: "",
-			color: DROP_DOWN_DEFAULT_COLOR,
-			isRef: false,
-			id: generateRandomId(4)
-		}]);
-	};
-	useEffect(() => {
-		if (isFormulaStr === "1") return;
-		onChange(buildCustomListFormulaPayload(strList, DROP_DOWN_DEFAULT_COLOR));
-	}, [
-		strList,
-		onChange,
-		isFormulaStr
-	]);
-	const updateFormula = useEvent(async (str) => {
-		if (!isFormulaString(str)) {
-			onChange === null || onChange === void 0 || onChange({
-				formula1: "",
-				formula2
+	}
+	_collect(unitId, subUnitId, range) {
+		const matrix = new ObjectMatrix();
+		this._copyInfo = {
+			unitId,
+			subUnitId,
+			matrix
+		};
+		const discreteRange = this._injector.invoke((accessor) => {
+			return 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 : "");
 			});
-			return;
+		});
+	}
+	_generateMutations(pasteFrom, pasteTo, payload) {
+		const { unitId: copyUnitId, subUnitId: copySubUnitId, range: copyRange } = pasteFrom;
+		const { unitId: pastedUnitId, subUnitId: pastedSubUnitId, range: pastedRange } = pasteTo;
+		const { copyType = COPY_TYPE.COPY } = payload;
+		if (!getSheetCommandTarget(this._univerInstanceService, {
+			unitId: pastedUnitId,
+			subUnitId: pastedSubUnitId
+		})) return {
+			redos: [],
+			undos: []
+		};
+		if (copyType === COPY_TYPE.CUT && pastedUnitId === copyUnitId && pastedSubUnitId === copySubUnitId) {
+			this._copyInfo = null;
+			return {
+				redos: [],
+				undos: []
+			};
 		}
-		if (dataValidationFormulaController.getFormulaRefCheck(str)) {
-			onChange === null || onChange === void 0 || onChange({
-				formula1: isFormulaString(str) ? str : "",
-				formula2
+		if (pastedUnitId !== copyUnitId || pastedSubUnitId !== copySubUnitId) {
+			const ruleMatrix = this._sheetDataValidationModel.getRuleObjectMatrix(pastedUnitId, pastedSubUnitId).clone();
+			const additionMatrix = new ObjectMatrix();
+			const addRules = /* @__PURE__ */ new Set();
+			const { ranges: [vCopyRange, vPastedRange], mapFunc } = virtualizeDiscreteRanges([copyRange, pastedRange]);
+			const repeatRange = 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 = 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);
+				});
 			});
-			setLocalError("");
-		} else {
-			onChange === null || onChange === void 0 || onChange({
-				formula1: "",
-				formula2
+			const additions = Array.from(addRules).map((id) => ({
+				id,
+				ranges: queryObjectMatrix(additionMatrix, (value) => value === id)
+			}));
+			ruleMatrix.addRangeRules(additions);
+			const { redoMutations, undoMutations } = getDataValidationDiffMutations(pastedUnitId, pastedSubUnitId, ruleMatrix.diffWithAddition(this._sheetDataValidationModel.getRules(pastedUnitId, pastedSubUnitId), additionRules.values()), this._injector, "patched", false);
+			if (copyType === 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
+					}]
+				}]);
+				const { redoMutations: cutRedos, undoMutations: cutUndos } = getDataValidationDiffMutations(copyUnitId, copySubUnitId, copySheetRuleMatrix.diff(this._sheetDataValidationModel.getRules(copyUnitId, copySubUnitId)), this._injector, "patched", false);
+				redoMutations.push(...cutRedos);
+				undoMutations.push(...cutUndos);
+			}
+			return {
+				redos: redoMutations,
+				undos: undoMutations
+			};
+		} else {
+			const ruleMatrix = this._sheetDataValidationModel.getRuleObjectMatrix(copyUnitId, copySubUnitId).clone();
+			const additionMatrix = new ObjectMatrix();
+			const additionRules = /* @__PURE__ */ new Set();
+			const { ranges: [vCopyRange, vPastedRange], mapFunc } = virtualizeDiscreteRanges([copyRange, pastedRange]);
+			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 = 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);
+				});
 			});
-			setFormulaStr("=");
-			setLocalError(localeService.t("sheets-data-validation-ui.validFail.formulaError"));
+			const additions = Array.from(additionRules).map((id) => ({
+				id,
+				ranges: queryObjectMatrix(additionMatrix, (value) => value === id)
+			}));
+			ruleMatrix.addRangeRules(additions);
+			const { redoMutations, undoMutations } = getDataValidationDiffMutations(pastedUnitId, pastedSubUnitId, ruleMatrix.diff(this._sheetDataValidationModel.getRules(copyUnitId, copySubUnitId)), this._injector, "patched", false);
+			return {
+				redos: redoMutations,
+				undos: undoMutations
+			};
 		}
-	});
-	const formulaEditorRef = useRef(null);
-	const [isFocusFormulaEditor, setIsFocusFormulaEditor] = useState(false);
-	useSidebarClick((e) => {
-		var _formulaEditorRef$cur;
-		!((_formulaEditorRef$cur = formulaEditorRef.current) === null || _formulaEditorRef$cur === void 0) && _formulaEditorRef$cur.isClickOutSide(e) && setIsFocusFormulaEditor(false);
-	});
-	useEffect(() => {
-		if (isFocusFormulaEditor) dataValidationPanelService.setFocusFormulaEditorActiveRuleSubUnitId(subUnitId);
-		else dataValidationPanelService.setFocusFormulaEditorActiveRuleSubUnitId(null);
-	}, [
-		isFocusFormulaEditor,
-		subUnitId,
-		dataValidationPanelService
-	]);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FormLayout, {
-		label: localeService.t("sheets-data-validation-ui.list.options"),
-		children: /* @__PURE__ */ jsxs(RadioGroup, {
-			value: isFormulaStr,
-			onChange: (v) => {
-				setIsFormulaStr(v);
-				setFormulaStr(formulaStrCopy);
-				if (v === "1") onChange({
-					formula1: formulaStrCopy === "=" ? "" : formulaStrCopy,
-					formula2: refColors.join(",")
+	}
+};
+DataValidationCopyPasteController = __decorate([
+	__decorateParam(0, ISheetClipboardService),
+	__decorateParam(1, Inject(SheetDataValidationModel)),
+	__decorateParam(2, Inject(Injector)),
+	__decorateParam(3, Inject(IUniverInstanceService))
+], DataValidationCopyPasteController);
+
+//#endregion
+//#region src/controllers/dv-permission.controller.ts
+let DataValidationPermissionController = class DataValidationPermissionController extends Disposable {
+	constructor(_localeService, _commandService, _sheetPermissionCheckController) {
+		super();
+		this._localeService = _localeService;
+		this._commandService = _commandService;
+		this._sheetPermissionCheckController = _sheetPermissionCheckController;
+		this._commandExecutedListener();
+	}
+	_commandExecutedListener() {
+		this.disposeWithMe(this._commandService.beforeCommandExecuted((command) => {
+			if (command.id === AddSheetDataValidationCommand.id) {
+				const { unitId, subUnitId, rule: { ranges } } = command.params;
+				if (!this._sheetPermissionCheckController.permissionCheckWithRanges({
+					workbookTypes: [WorkbookEditablePermission],
+					rangeTypes: [RangeProtectionPermissionEditPoint],
+					worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission]
+				}, 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;
+				if (!this._sheetPermissionCheckController.permissionCheckWithRanges({
+					workbookTypes: [WorkbookEditablePermission],
+					rangeTypes: [RangeProtectionPermissionEditPoint],
+					worksheetTypes: [WorksheetEditPermission, WorksheetSetCellStylePermission]
+				}, ranges, unitId, subUnitId)) this._sheetPermissionCheckController.blockExecuteWithoutPermission(this._localeService.t("sheets-data-validation-ui.permission.dialog.setStyleErr"));
+			}
+		}));
+	}
+};
+DataValidationPermissionController = __decorate([
+	__decorateParam(0, Inject(LocaleService)),
+	__decorateParam(1, ICommandService),
+	__decorateParam(2, Inject(SheetPermissionCheckController))
+], DataValidationPermissionController);
+
+//#endregion
+//#region src/controllers/dv-render.controller.ts
+const INVALID_MARK = { tr: {
+	size: 6,
+	color: "#fe4b4b"
+} };
+let SheetsDataValidationRenderController = class SheetsDataValidationRenderController extends RxDisposable {
+	constructor(_commandService, _menuManagerService, _renderManagerService, _univerInstanceService, _autoHeightController, _dropdownManagerService, _sheetDataValidationModel, _dataValidatorRegistryService, _sheetInterceptorService, _dataValidationCacheService, _editorBridgeService) {
+		super();
+		this._commandService = _commandService;
+		this._menuManagerService = _menuManagerService;
+		this._renderManagerService = _renderManagerService;
+		this._univerInstanceService = _univerInstanceService;
+		this._autoHeightController = _autoHeightController;
+		this._dropdownManagerService = _dropdownManagerService;
+		this._sheetDataValidationModel = _sheetDataValidationModel;
+		this._dataValidatorRegistryService = _dataValidatorRegistryService;
+		this._sheetInterceptorService = _sheetInterceptorService;
+		this._dataValidationCacheService = _dataValidationCacheService;
+		this._editorBridgeService = _editorBridgeService;
+		this._initMenu();
+		this._initDropdown();
+		this._initViewModelIntercept();
+		this._initAutoHeight();
+	}
+	_initMenu() {
+		this._menuManagerService.mergeMenu(menuSchema);
+	}
+	_initDropdown() {
+		if (!this._editorBridgeService) return;
+		this.disposeWithMe(this._editorBridgeService.visible$.subscribe((visible) => {
+			if (!visible.visible) {
+				var _this$_dropdownManage;
+				if (((_this$_dropdownManage = this._dropdownManagerService.activeDropdown) === null || _this$_dropdownManage === void 0 ? void 0 : _this$_dropdownManage.trigger) === "editor-bridge") this._dropdownManagerService.hideDropdown();
+				return;
+			}
+			const state = this._editorBridgeService.getEditCellState();
+			if (state) {
+				const { unitId, sheetId, row, column } = state;
+				const workbook = this._univerInstanceService.getUniverSheetInstance(unitId);
+				if (!workbook) return;
+				const rule = this._sheetDataValidationModel.getRuleByLocation(unitId, sheetId, row, column);
+				if (!rule) return;
+				const validator = this._dataValidatorRegistryService.getValidatorItem(rule.type);
+				if (!(validator === null || validator === void 0 ? void 0 : validator.dropdownType)) return;
+				const worksheet = workbook.getActiveSheet();
+				if (!worksheet) return;
+				const activeDropdown = this._dropdownManagerService.activeDropdown;
+				const currLoc = activeDropdown === null || activeDropdown === void 0 ? void 0 : activeDropdown.location;
+				if (currLoc && currLoc.unitId === unitId && currLoc.subUnitId === sheetId && currLoc.row === row && currLoc.col === column) return;
+				this._dropdownManagerService.showDropdown({
+					location: {
+						unitId,
+						subUnitId: sheetId,
+						row,
+						col: column,
+						workbook,
+						worksheet
+					},
+					trigger: "editor-bridge",
+					closeOnOutSide: false
 				});
-			},
-			children: [/* @__PURE__ */ jsx(Radio, {
-				value: "0",
-				children: localeService.t("sheets-data-validation-ui.list.customOptions")
-			}), /* @__PURE__ */ jsx(Radio, {
-				value: "1",
-				children: localeService.t("sheets-data-validation-ui.list.refOptions")
-			})]
-		})
-	}), isFormulaStr === "1" ? /* @__PURE__ */ jsxs(FormLayout, {
-		error: formula1Res || localError || void 0,
-		children: [/* @__PURE__ */ jsx(FormulaEditor, {
-			ref: formulaEditorRef,
-			className: 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", borderClassName),
-			initValue: formulaStr,
-			unitId,
-			subUnitId,
-			isFocus: isFocusFormulaEditor,
-			isSupportAcrossSheet: true,
-			onFocus: () => setIsFocusFormulaEditor(true),
-			onChange: (v = "") => {
-				const str = (v !== null && v !== void 0 ? v : "").trim();
-				setFormulaStrCopy(str);
-				updateFormula(str);
 			}
-		}), refFinalList.length > 0 && /* @__PURE__ */ jsx("div", {
-			className: "univer-mt-3",
-			children: refFinalList.map((item) => {
-				return /* @__PURE__ */ jsx(Template, {
-					className: "univer-mb-3",
-					item,
-					commonProps: { onItemChange: handleRefItemChange }
-				}, item.id);
-			})
-		})]
-	}) : /* @__PURE__ */ jsx(FormLayout, {
-		error: formula1Res,
-		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
+		}));
+	}
+	_initViewModelIntercept() {
+		this.disposeWithMe(this._sheetInterceptorService.intercept(INTERCEPTOR_POINT.CELL_CONTENT, {
+			effect: InterceptorEffectEnum.Style,
+			priority: InterceptCellContentPriority.DATA_VALIDATION,
+			handler: (cell, pos, next) => {
+				var _this$_dataValidation, _cell$customRender, _cell$fontRenderExten, _validator$skipDefaul, _cell$coverable;
+				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 : 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 = getCellValueOrigin(cellOrigin)) !== null && _getCellValueOrigin !== void 0 ? _getCellValueOrigin : null;
+					return cache;
+				} };
+				const valueStr = { get value() {
+					var _cellValue$value;
+					return `${(_cellValue$value = cellValue.value) !== null && _cellValue$value !== void 0 ? _cellValue$value : ""}`;
+				} };
+				if (!cell || cell === pos.rawData) cell = { ...pos.rawData };
+				cell.markers = {
+					...cell === null || cell === void 0 ? void 0 : cell.markers,
+					...validStatus === 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.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))
+				};
+				cell.interceptorStyle = {
+					...cell === null || cell === void 0 ? void 0 : cell.interceptorStyle,
+					...validator === null || validator === void 0 ? void 0 : validator.getExtraStyle(rule, valueStr.value, { get style() {
+						const styleMap = workbook.getStyles();
+						return (typeof (cell === null || cell === void 0 ? void 0 : cell.s) === "string" ? styleMap.get(cell === null || cell === void 0 ? void 0 : cell.s) : cell === null || cell === void 0 ? void 0 : cell.s) || {};
+					} }, row, col)
+				};
+				cell.interceptorAutoHeight = () => {
+					var _this$_renderManagerS, _mergeCell$startRow, _mergeCell$startColum, _validator$canvasRend, _validator$canvasRend2;
+					const skeleton = (_this$_renderManagerS = this._renderManagerService.getRenderById(unitId)) === null || _this$_renderManagerS === void 0 || (_this$_renderManagerS = _this$_renderManagerS.with(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: skeleton.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),
+						unitId,
+						subUnitId,
+						row,
+						col,
+						workbook,
+						worksheet
+					};
+					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;
+					const skeleton = (_this$_renderManagerS2 = this._renderManagerService.getRenderById(unitId)) === null || _this$_renderManagerS2 === void 0 || (_this$_renderManagerS2 = _this$_renderManagerS2.with(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: skeleton.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),
+						unitId,
+						subUnitId,
+						row,
+						col,
+						workbook,
+						worksheet
+					};
+					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 === DataValidationType.LIST || rule.type === DataValidationType.LIST_MULTIPLE);
+				return next(cell);
+			}
+		}));
+	}
+	_initAutoHeight() {
+		this._sheetDataValidationModel.ruleChange$.pipe(filter((change) => change.source === "command"), bufferTime(100)).subscribe((infos) => {
+			if (infos.length === 0) return;
+			const ranges = [];
+			infos.forEach((info) => {
+				if (info.rule.type === DataValidationType.LIST_MULTIPLE || info.rule.type === DataValidationType.LIST) {
+					var _info$rule;
+					if ((_info$rule = info.rule) === null || _info$rule === void 0 ? void 0 : _info$rule.ranges) ranges.push(...info.rule.ranges);
 				}
-			}, 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")]
-		})] })
-	})] });
-}
-
-//#endregion
-//#region src/views/components/formula-input/index.ts
-const FORMULA_INPUTS = [
-	[CUSTOM_FORMULA_INPUT_NAME, CustomFormulaInput],
-	[BASE_FORMULA_INPUT_NAME, BaseFormulaInput],
-	[LIST_FORMULA_INPUT_NAME, ListFormulaInput],
-	[CHECKBOX_FORMULA_INPUT_NAME, CheckboxFormulaInput]
-];
+			});
+			if (ranges.length) sequenceExecute(this._autoHeightController.getUndoRedoParamsOfAutoHeight(ranges).redos, this._commandService);
+		});
+	}
+};
+SheetsDataValidationRenderController = __decorate([
+	__decorateParam(0, ICommandService),
+	__decorateParam(1, IMenuManagerService),
+	__decorateParam(2, IRenderManagerService),
+	__decorateParam(3, IUniverInstanceService),
+	__decorateParam(4, Inject(AutoHeightController)),
+	__decorateParam(5, Inject(DataValidationDropdownManagerService)),
+	__decorateParam(6, Inject(SheetDataValidationModel)),
+	__decorateParam(7, Inject(DataValidatorRegistryService)),
+	__decorateParam(8, Inject(SheetInterceptorService)),
+	__decorateParam(9, Inject(DataValidationCacheService)),
+	__decorateParam(10, Optional(IEditorBridgeService))
+], SheetsDataValidationRenderController);
+let SheetsDataValidationMobileRenderController = class SheetsDataValidationMobileRenderController extends RxDisposable {
+	constructor(_commandService, _renderManagerService, _autoHeightController, _dataValidatorRegistryService, _sheetInterceptorService, _sheetDataValidationModel, _dataValidationCacheService) {
+		super();
+		this._commandService = _commandService;
+		this._renderManagerService = _renderManagerService;
+		this._autoHeightController = _autoHeightController;
+		this._dataValidatorRegistryService = _dataValidatorRegistryService;
+		this._sheetInterceptorService = _sheetInterceptorService;
+		this._sheetDataValidationModel = _sheetDataValidationModel;
+		this._dataValidationCacheService = _dataValidationCacheService;
+		this._initViewModelIntercept();
+		this._initAutoHeight();
+	}
+	_initViewModelIntercept() {
+		this.disposeWithMe(this._sheetInterceptorService.intercept(INTERCEPTOR_POINT.CELL_CONTENT, {
+			effect: InterceptorEffectEnum.Style,
+			priority: InterceptCellContentPriority.DATA_VALIDATION,
+			handler: (cell, pos, next) => {
+				var _this$_dataValidation2, _cell$customRender2, _cell$fontRenderExten2, _validator$skipDefaul2, _cell$coverable2;
+				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 : DataValidationStatus.VALID;
+				const validator = this._dataValidatorRegistryService.getValidatorItem(rule.type);
+				const cellValue = getCellValueOrigin(worksheet.getCellRaw(row, col));
+				const valueStr = `${cellValue !== null && cellValue !== void 0 ? cellValue : ""}`;
+				if (!cell || cell === pos.rawData) cell = { ...pos.rawData };
+				cell.markers = {
+					...cell === null || cell === void 0 ? void 0 : cell.markers,
+					...validStatus === 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.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))
+				};
+				cell.interceptorStyle = {
+					...cell === null || cell === void 0 ? void 0 : cell.interceptorStyle,
+					...validator === null || validator === void 0 ? void 0 : validator.getExtraStyle(rule, valueStr, { get style() {
+						const styleMap = workbook.getStyles();
+						return (typeof (cell === null || cell === void 0 ? void 0 : cell.s) === "string" ? styleMap.get(cell === null || cell === void 0 ? void 0 : cell.s) : cell === null || cell === void 0 ? void 0 : cell.s) || {};
+					} }, row, col)
+				};
+				cell.interceptorAutoHeight = () => {
+					var _this$_renderManagerS3, _mergeCell$startRow3, _mergeCell$startColum3, _validator$canvasRend5, _validator$canvasRend6;
+					const skeleton = (_this$_renderManagerS3 = this._renderManagerService.getRenderById(unitId)) === null || _this$_renderManagerS3 === void 0 || (_this$_renderManagerS3 = _this$_renderManagerS3.with(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: skeleton.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),
+						unitId,
+						subUnitId,
+						row,
+						col,
+						workbook,
+						worksheet
+					};
+					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;
+					const skeleton = (_this$_renderManagerS4 = this._renderManagerService.getRenderById(unitId)) === null || _this$_renderManagerS4 === void 0 || (_this$_renderManagerS4 = _this$_renderManagerS4.with(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: skeleton.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),
+						unitId,
+						subUnitId,
+						row,
+						col,
+						workbook,
+						worksheet
+					};
+					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 === DataValidationType.LIST || rule.type === DataValidationType.LIST_MULTIPLE);
+				return next(cell);
+			}
+		}));
+	}
+	_initAutoHeight() {
+		this._sheetDataValidationModel.ruleChange$.pipe(filter((change) => change.source === "command"), bufferTime(16)).subscribe((infos) => {
+			const ranges = [];
+			infos.forEach((info) => {
+				if (info.rule.type === DataValidationType.LIST_MULTIPLE || info.rule.type === DataValidationType.LIST) {
+					var _info$rule2;
+					if ((_info$rule2 = info.rule) === null || _info$rule2 === void 0 ? void 0 : _info$rule2.ranges) ranges.push(...info.rule.ranges);
+				}
+			});
+			if (ranges.length) sequenceExecute(this._autoHeightController.getUndoRedoParamsOfAutoHeight(ranges).redos, this._commandService);
+		});
+	}
+};
+SheetsDataValidationMobileRenderController = __decorate([
+	__decorateParam(0, ICommandService),
+	__decorateParam(1, IRenderManagerService),
+	__decorateParam(2, Inject(AutoHeightController)),
+	__decorateParam(3, Inject(DataValidatorRegistryService)),
+	__decorateParam(4, Inject(SheetInterceptorService)),
+	__decorateParam(5, Inject(SheetDataValidationModel)),
+	__decorateParam(6, Inject(DataValidationCacheService))
+], SheetsDataValidationMobileRenderController);
 
 //#endregion
-//#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 = useDependency(LocaleService);
-	return /* @__PURE__ */ jsx(FormLayout, {
-		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({
-				...value,
-				renderMode: +renderMode
-			}),
-			children: [
-				/* @__PURE__ */ jsx(Radio, {
-					value: `${DataValidationRenderMode.CUSTOM}`,
-					children: localeService.t("sheets-data-validation-ui.renderMode.chip")
-				}),
-				/* @__PURE__ */ jsx(Radio, {
-					value: `${DataValidationRenderMode.ARROW}`,
-					children: localeService.t("sheets-data-validation-ui.renderMode.arrow")
-				}),
-				/* @__PURE__ */ jsx(Radio, {
-					value: `${DataValidationRenderMode.TEXT}`,
-					children: localeService.t("sheets-data-validation-ui.renderMode.text")
-				})
-			]
-		})
-	});
-}
-ListRenderModeInput.componentKey = LIST_RENDER_MODE_OPTION_INPUT;
+//#region src/controllers/dv-rerender.controller.ts
+let SheetsDataValidationReRenderController = class SheetsDataValidationReRenderController extends Disposable {
+	constructor(_context, _sheetDataValidationModel, _sheetSkeletonManagerService) {
+		super();
+		this._context = _context;
+		this._sheetDataValidationModel = _sheetDataValidationModel;
+		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
+		this._initSkeletonChange();
+	}
+	_initSkeletonChange() {
+		const reRender = (values) => {
+			var _this$_context$mainCo;
+			if (!values.length) return;
+			const sheetIds = /* @__PURE__ */ new Set();
+			values.forEach((value) => {
+				sheetIds.add(value.subUnitId);
+			});
+			sheetIds.forEach((sheetId) => {
+				var _this$_sheetSkeletonM;
+				(_this$_sheetSkeletonM = this._sheetSkeletonManagerService.getSkeletonParam(sheetId)) === null || _this$_sheetSkeletonM === void 0 || _this$_sheetSkeletonM.skeleton.makeDirty(true);
+			});
+			(_this$_context$mainCo = this._context.mainComponent) === null || _this$_context$mainCo === void 0 || _this$_context$mainCo.makeForceDirty();
+		};
+		this.disposeWithMe(this._sheetDataValidationModel.validStatusChange$.pipe(bufferDebounceTime(16)).subscribe(reRender));
+	}
+};
+SheetsDataValidationReRenderController = __decorate([__decorateParam(1, Inject(SheetDataValidationModel)), __decorateParam(2, Inject(SheetSkeletonManagerService))], SheetsDataValidationReRenderController);
 
 //#endregion
 //#region src/views/widgets/checkbox-widget.ts
@@ -3546,24 +3799,12 @@ var WholeValidatorView = class extends BaseSheetDataValidatorView {
 //#endregion
 //#region src/controllers/ui.controller.ts
 let SheetsDataValidationUIController = class SheetsDataValidationUIController extends RxDisposable {
-	constructor(_injector, _componentManger, _dataValidatorRegistryService) {
+	constructor(_injector, _dataValidatorRegistryService) {
 		super();
 		this._injector = _injector;
-		this._componentManger = _componentManger;
 		this._dataValidatorRegistryService = _dataValidatorRegistryService;
-		this._initComponents();
 		this._registerValidatorViews();
 	}
-	_initComponents() {
-		[
-			[DATA_VALIDATION_PANEL, DataValidationPanel],
-			[ListRenderModeInput.componentKey, ListRenderModeInput],
-			[DateShowTimeOption.componentKey, DateShowTimeOption],
-			...FORMULA_INPUTS
-		].forEach(([key, comp]) => {
-			this.disposeWithMe(this._componentManger.register(key, comp));
-		});
-	}
 	_registerValidatorViews() {
 		[
 			DecimalValidatorView,
@@ -3586,11 +3827,7 @@ let SheetsDataValidationUIController = class SheetsDataValidationUIController ex
 		});
 	}
 };
-SheetsDataValidationUIController = __decorate([
-	__decorateParam(0, Inject(Injector)),
-	__decorateParam(1, Inject(ComponentManager)),
-	__decorateParam(2, Inject(DataValidatorRegistryService))
-], SheetsDataValidationUIController);
+SheetsDataValidationUIController = __decorate([__decorateParam(0, Inject(Injector)), __decorateParam(1, Inject(DataValidatorRegistryService))], SheetsDataValidationUIController);
 
 //#endregion
 //#region src/mobile-plugin.ts
@@ -3622,6 +3859,8 @@ let UniverSheetsDataValidationMobileUIPlugin = class UniverSheetsDataValidationM
 		});
 		[
 			AddSheetDataValidationAndOpenCommand,
+			InsertQuickSheetDataValidationCommand,
+			ClearQuickSheetDataValidationCommand,
 			ShowDataValidationDropdown,
 			HideDataValidationDropdown,
 			CloseValidationPanelOperation,
@@ -3685,6 +3924,8 @@ let UniverSheetsDataValidationUIPlugin = class UniverSheetsDataValidationUIPlugi
 		});
 		[
 			AddSheetDataValidationAndOpenCommand,
+			InsertQuickSheetDataValidationCommand,
+			ClearQuickSheetDataValidationCommand,
 			ShowDataValidationDropdown,
 			HideDataValidationDropdown,
 			CloseValidationPanelOperation,