@univerjs/sheets-data-validation-ui 1.0.4 → 1.2.0

package/lib/cjs/index.js

@@ -15,7 +15,7 @@ let _univerjs_icons = require("@univerjs/icons");
 let _univerjs_engine_formula = require("@univerjs/engine-formula");
 let _univerjs_sheets_formula_ui = require("@univerjs/sheets-formula-ui");
 
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -26,7 +26,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -39,14 +39,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -57,7 +57,7 @@ function _defineProperty(e, r, t) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorateParam.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -65,7 +65,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -1055,8 +1055,7 @@ const menuSchema = {
 		order: 0,
 		gridLayout: {
 			row: 1,
-			column: 1,
-			showLabel: true
+			column: 1
 		},
 		menuItemFactory: dataValidationMenuFactory,
 		[OpenValidationPanelOperation.id]: {
@@ -1073,80 +1072,132 @@ const menuSchema = {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-data-validation-ui";
-var version = "1.0.4";
+var version = "1.2.0";
 
 //#endregion
 //#region src/controllers/dv-alert.controller.ts
 const ALERT_KEY = "SHEET_DATA_VALIDATION_ALERT";
 let DataValidationAlertController = class DataValidationAlertController extends _univerjs_core.Disposable {
-	constructor(_hoverManagerService, _cellAlertManagerService, _univerInstanceService, _localeService, _dataValidationModel) {
+	constructor(_hoverManagerService, _cellAlertManagerService, _univerInstanceService, _localeService, _dataValidationModel, _dataValidationCacheService) {
 		super();
 		this._hoverManagerService = _hoverManagerService;
 		this._cellAlertManagerService = _cellAlertManagerService;
 		this._univerInstanceService = _univerInstanceService;
 		this._localeService = _localeService;
 		this._dataValidationModel = _dataValidationModel;
+		this._dataValidationCacheService = _dataValidationCacheService;
+		_defineProperty(this, "_hoveredCell", null);
 		this._init();
 	}
 	_init() {
 		this._initCellAlertPopup();
 	}
 	_initCellAlertPopup() {
-		this.disposeWithMe(this._univerInstanceService.getCurrentTypeOfUnit$(_univerjs_core.UniverInstanceType.UNIVER_SHEET).pipe((0, rxjs.switchMap)((workbook) => (workbook === null || workbook === void 0 ? void 0 : workbook.activeSheet$) ?? (0, rxjs.of)(null))).subscribe(() => this._cellAlertManagerService.removeAlert(ALERT_KEY)));
-		this.disposeWithMe(this._hoverManagerService.currentCell$.pipe((0, rxjs.debounceTime)(100)).subscribe((cellPos) => {
-			if (cellPos) {
-				var _workbook$getActiveSh;
-				const workbook = this._univerInstanceService.getUnit(cellPos.location.unitId, _univerjs_core.UniverInstanceType.UNIVER_SHEET);
-				if (!workbook || ((_workbook$getActiveSh = workbook.getActiveSheet()) === null || _workbook$getActiveSh === void 0 ? void 0 : _workbook$getActiveSh.getSheetId()) !== cellPos.location.subUnitId) {
-					this._cellAlertManagerService.removeAlert(ALERT_KEY);
-					return;
-				}
-				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
-				}) === _univerjs_core.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: _univerjs_sheets_ui.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;
-				}
+		this.disposeWithMe(this._univerInstanceService.getCurrentTypeOfUnit$(_univerjs_core.UniverInstanceType.UNIVER_SHEET).pipe((0, rxjs.switchMap)((workbook) => (workbook === null || workbook === void 0 ? void 0 : workbook.activeSheet$) ?? (0, rxjs.of)(null))).subscribe(() => {
+			this._hoveredCell = null;
+			this._cellAlertManagerService.removeAlert(ALERT_KEY);
+		}));
+		this.disposeWithMe(this._hoverManagerService.currentCell$.pipe((0, rxjs.tap)(() => {
+			this._hoveredCell = null;
+			this._cellAlertManagerService.removeAlert(ALERT_KEY);
+		}), (0, rxjs.debounceTime)(100)).subscribe((cellPos) => {
+			this._hoveredCell = cellPos;
+			this._refreshAlert();
+		}));
+		this.disposeWithMe(this._dataValidationModel.ruleChange$.subscribe((change) => {
+			var _change$oldRule;
+			if (this._affectsHoveredCell(change, [...change.rule.ranges, ...((_change$oldRule = change.oldRule) === null || _change$oldRule === void 0 ? void 0 : _change$oldRule.ranges) ?? []])) this._refreshAlert();
+		}));
+		this.disposeWithMe(this._dataValidationCacheService.dirtyRanges$.pipe((0, rxjs.filter)((change) => this._affectsHoveredCell(change, change.ranges)), (0, rxjs.tap)(() => this._cellAlertManagerService.removeAlert(ALERT_KEY)), (0, rxjs.auditTime)(0)).subscribe(() => this._refreshAlert()));
+		this.disposeWithMe(this._dataValidationModel.validStatusChange$.subscribe((change) => {
+			if (this._isHoveredLocation(change)) {
+				const rule = this._dataValidationModel.getRuleByLocation(change.unitId, change.subUnitId, change.row, change.col);
+				if ((rule === null || rule === void 0 ? void 0 : rule.uid) === change.ruleId) this._updateAlert(change.status);
 			}
+		}));
+		this.disposeWithMe(() => {
+			this._hoveredCell = null;
 			this._cellAlertManagerService.removeAlert(ALERT_KEY);
+		});
+	}
+	_isHoveredLocation(location) {
+		var _this$_hoveredCell;
+		const current = (_this$_hoveredCell = this._hoveredCell) === null || _this$_hoveredCell === void 0 ? void 0 : _this$_hoveredCell.location;
+		return (current === null || current === void 0 ? void 0 : current.unitId) === location.unitId && (current === null || current === void 0 ? void 0 : current.subUnitId) === location.subUnitId && (current === null || current === void 0 ? void 0 : current.row) === location.row && (current === null || current === void 0 ? void 0 : current.col) === location.col;
+	}
+	_affectsHoveredCell(location, ranges) {
+		var _this$_hoveredCell2;
+		const current = (_this$_hoveredCell2 = this._hoveredCell) === null || _this$_hoveredCell2 === void 0 ? void 0 : _this$_hoveredCell2.location;
+		return (current === null || current === void 0 ? void 0 : current.unitId) === location.unitId && (current === null || current === void 0 ? void 0 : current.subUnitId) === location.subUnitId && ranges.some((range) => _univerjs_core.Rectangle.contains(range, {
+			startRow: current.row,
+			endRow: current.row,
+			startColumn: current.col,
+			endColumn: current.col
 		}));
 	}
+	_getHoveredContext() {
+		var _this$_hoveredCell3;
+		const location = (_this$_hoveredCell3 = this._hoveredCell) === null || _this$_hoveredCell3 === void 0 ? void 0 : _this$_hoveredCell3.location;
+		if (!location) return;
+		const workbook = this._univerInstanceService.getUnit(location.unitId, _univerjs_core.UniverInstanceType.UNIVER_SHEET);
+		const worksheet = workbook === null || workbook === void 0 ? void 0 : workbook.getActiveSheet();
+		if (!workbook || !worksheet || worksheet.getSheetId() !== location.subUnitId) return;
+		const rule = this._dataValidationModel.getRuleByLocation(location.unitId, location.subUnitId, location.row, location.col);
+		if (rule) return {
+			location,
+			workbook,
+			worksheet,
+			rule
+		};
+	}
+	_refreshAlert() {
+		const context = this._getHoveredContext();
+		if (!context) {
+			this._cellAlertManagerService.removeAlert(ALERT_KEY);
+			return;
+		}
+		const { location, workbook, worksheet, rule } = context;
+		this._updateAlert(this._dataValidationModel.validator(rule, {
+			...location,
+			workbook,
+			worksheet
+		}));
+	}
+	_updateAlert(status) {
+		var _this$_cellAlertManag;
+		const context = this._getHoveredContext();
+		if (!context || status !== _univerjs_core.DataValidationStatus.INVALID) {
+			this._cellAlertManagerService.removeAlert(ALERT_KEY);
+			return;
+		}
+		const { location, rule } = context;
+		const validator = this._dataValidationModel.getValidator(rule.type);
+		if (!validator) {
+			this._cellAlertManagerService.removeAlert(ALERT_KEY);
+			return;
+		}
+		const title = this._localeService.t("sheets-data-validation-ui.error.title");
+		const message = validator.getRuleFinalError(rule, location);
+		const currentAlert = (_this$_cellAlertManag = this._cellAlertManagerService.currentAlert.get(ALERT_KEY)) === null || _this$_cellAlertManag === void 0 ? void 0 : _this$_cellAlertManag.alert;
+		if (currentAlert && this._isHoveredLocation(currentAlert.location) && currentAlert.title === title && currentAlert.message === message) return;
+		this._cellAlertManagerService.showAlert({
+			type: _univerjs_sheets_ui.CellAlertType.ERROR,
+			title,
+			message,
+			location,
+			width: 200,
+			height: 74,
+			key: ALERT_KEY
+		});
+	}
 };
 DataValidationAlertController = __decorate([
 	__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_sheets_ui.HoverManagerService)),
 	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_sheets_ui.CellAlertManagerService)),
 	__decorateParam(2, _univerjs_core.IUniverInstanceService),
 	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_core.LocaleService)),
-	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_sheets_data_validation.SheetDataValidationModel))
+	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_sheets_data_validation.SheetDataValidationModel)),
+	__decorateParam(5, (0, _univerjs_core.Inject)(_univerjs_sheets_data_validation.DataValidationCacheService))
 ], DataValidationAlertController);
 
 //#endregion
@@ -1488,6 +1539,7 @@ let SheetsDataValidationRenderController = class SheetsDataValidationRenderContr
 		this._dataValidationCacheService = _dataValidationCacheService;
 		this._editorBridgeService = _editorBridgeService;
 		this._initMenu();
+		this._initEditor();
 		this._initDropdown();
 		this._initViewModelIntercept();
 		this._initAutoHeight();
@@ -1495,6 +1547,19 @@ let SheetsDataValidationRenderController = class SheetsDataValidationRenderContr
 	_initMenu() {
 		this._menuManagerService.mergeMenu(menuSchema);
 	}
+	_initEditor() {
+		this.disposeWithMe(this._commandService.beforeCommandExecuted((command) => {
+			var _this$_editorBridgeSe;
+			if (command.id !== _univerjs_sheets_ui.SetCellEditVisibleOperation.id) return;
+			const params = command.params;
+			if (!(params === null || params === void 0 ? void 0 : params.visible) || params.eventType !== _univerjs_engine_render.DeviceInputEventType.Dblclick || !params.pointerPosition) return;
+			const location = (_this$_editorBridgeSe = this._editorBridgeService) === null || _this$_editorBridgeSe === void 0 ? void 0 : _this$_editorBridgeSe.getEditLocation();
+			if (!location || params.unitId && params.unitId !== location.unitId) return;
+			const { unitId, sheetId, row, column } = location;
+			const rule = this._sheetDataValidationModel.getRuleByLocation(unitId, sheetId, row, column);
+			if (rule && (rule.type === _univerjs_core.DataValidationType.LIST || rule.type === _univerjs_core.DataValidationType.LIST_MULTIPLE || rule.type === _univerjs_core.DataValidationType.CHECKBOX)) throw new _univerjs_core.CanceledError();
+		}));
+	}
 	_initDropdown() {
 		if (!this._editorBridgeService) return;
 		this.disposeWithMe(this._editorBridgeService.visible$.subscribe((visible) => {
@@ -3282,7 +3347,7 @@ const DataValidationItem = (props) => {
 		};
 	}, [markSelectionService]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, _univerjs_design.clsx)("univer-bg-secondary univer-relative univer--mx-2 univer-box-border univer-flex univer-w-[287px] univer-cursor-pointer univer-flex-col univer-justify-between univer-overflow-hidden univer-rounded-md univer-p-2 univer-pr-9 rtl:univer-pl-9 rtl:univer-pr-2", {
+		className: (0, _univerjs_design.clsx)("univer-relative univer--mx-2 univer-box-border univer-flex univer-w-[287px] univer-cursor-pointer univer-flex-col univer-justify-between univer-overflow-hidden univer-rounded-md univer-bg-gray-0 univer-p-2 univer-pr-9 rtl:univer-pl-9 rtl:univer-pr-2 dark:!univer-bg-gray-900", {
 			"hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-700": !disable,
 			"univer-opacity-50": disable
 		}),
@@ -3310,7 +3375,7 @@ const DataValidationItem = (props) => {
 				children: validator === null || validator === void 0 ? void 0 : validator.generateRuleName(rule)
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "univer-text-secondary univer-truncate univer-text-xs univer-leading-[18px] dark:!univer-text-gray-300",
+				className: "univer-truncate univer-text-xs univer-leading-[18px] univer-text-gray-500 dark:!univer-text-gray-300",
 				children: rule.ranges.map((range) => (0, _univerjs_engine_formula.serializeRange)(range)).join(",")
 			}),
 			isHover && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -3681,9 +3746,8 @@ const Template = (props) => {
 		]
 	});
 };
-const NOOP = () => {};
 function ListFormulaInput(props) {
-	const { value, onChange: _onChange = NOOP, unitId, subUnitId, validResult, showError, ruleId } = props;
+	const { value, onChange: _onChange = rxjs.noop, unitId, subUnitId, validResult, showError, ruleId } = props;
 	const { formula1 = "", formula2 = "" } = value || {};
 	const [isFormulaStr, setIsFormulaStr] = (0, react.useState)(() => (0, _univerjs_core.isFormulaString)(formula1) ? "1" : "0");
 	const [formulaStr, setFormulaStr] = (0, react.useState)(isFormulaStr === "1" ? formula1 : "=");
@@ -3883,7 +3947,7 @@ function ListFormulaInput(props) {
 			}, item.id),
 			idKey: "id"
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
-			className: "univer-text-primary univer-flex univer-w-fit univer-cursor-pointer univer-flex-row univer-items-center univer-rounded univer-p-1 univer-px-2 univer-text-sm hover:univer-bg-primary-50 dark:hover:!univer-bg-gray-800",
+			className: "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 univer-text-primary-600 hover:univer-bg-primary-50 dark:!univer-text-primary-500 dark:hover:!univer-bg-gray-800",
 			onClick: handleAdd,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.IncreaseIcon, { className: "univer-mr-1" }), localeService.t("sheets-data-validation-ui.list.add")]
 		})] })
@@ -4016,20 +4080,20 @@ UniverSheetsDataValidationUIPlugin = __decorate([
 
 //#endregion
 exports.DATA_VALIDATION_PANEL = DATA_VALIDATION_PANEL;
-Object.defineProperty(exports, 'DataValidationPanelService', {
+Object.defineProperty(exports, "DataValidationPanelService", {
   enumerable: true,
   get: function () {
     return DataValidationPanelService;
   }
 });
 exports.SheetsDataValidationUIMenuSchema = menuSchema;
-Object.defineProperty(exports, 'UniverSheetsDataValidationMobileUIPlugin', {
+Object.defineProperty(exports, "UniverSheetsDataValidationMobileUIPlugin", {
   enumerable: true,
   get: function () {
     return UniverSheetsDataValidationMobileUIPlugin;
   }
 });
-Object.defineProperty(exports, 'UniverSheetsDataValidationUIPlugin', {
+Object.defineProperty(exports, "UniverSheetsDataValidationUIPlugin", {
   enumerable: true,
   get: function () {
     return UniverSheetsDataValidationUIPlugin;

package/lib/es/index.js

@@ -1,8 +1,8 @@
-import { CellValueType, ColorKit, CommandType, DEFAULT_STYLES, DataValidationErrorStyle, DataValidationRenderMode, DataValidationStatus, DataValidationType, DateSystem, DependentOn, Disposable, DisposableCollection, HorizontalAlign, ICommandService, IConfigService, IUniverInstanceService, Inject, Injector, InterceptorEffectEnum, LocaleService, Optional, Plugin, Rectangle, RedoCommand, RxDisposable, ThemeService, UndoCommand, UniverInstanceType, VerticalAlign, WrapStrategy, bufferDebounceTime, dateKit, debounce, excelDateTimePartsToSerial, excelSerialToDateTimeParts, generateRandomId, getIntersectRange, isFormulaString, isUnitRangesEqual, merge, numfmt, sequenceExecute, shallowEqual, toDisposable } from "@univerjs/core";
+import { CanceledError, CellValueType, ColorKit, CommandType, DEFAULT_STYLES, DataValidationErrorStyle, DataValidationRenderMode, DataValidationStatus, DataValidationType, DateSystem, DependentOn, Disposable, DisposableCollection, HorizontalAlign, ICommandService, IConfigService, IUniverInstanceService, Inject, Injector, InterceptorEffectEnum, LocaleService, Optional, Plugin, Rectangle, RedoCommand, RxDisposable, ThemeService, UndoCommand, UniverInstanceType, VerticalAlign, WrapStrategy, bufferDebounceTime, dateKit, debounce, excelDateTimePartsToSerial, excelSerialToDateTimeParts, generateRandomId, getIntersectRange, isFormulaString, isUnitRangesEqual, merge, numfmt, sequenceExecute, shallowEqual, toDisposable } from "@univerjs/core";
 import { DataValidationModel, DataValidatorDropdownType, DataValidatorRegistryScope, DataValidatorRegistryService, TWO_FORMULA_OPERATOR_COUNT, UniverDataValidationPlugin, getRuleOptions, getRuleSetting } from "@univerjs/data-validation";
 import { AUTO_FILL_APPLY_TYPE, AutoFillTools, IAutoFillService, INTERCEPTOR_POINT, InterceptCellContentPriority, RangeProtectionPermissionEditPoint, SetRangeValuesCommand, SetWorksheetActiveOperation, SheetInterceptorService, SheetPermissionCheckController, SheetsSelectionsService, UniverSheetsPlugin, VALIDATE_CELL, WorkbookEditablePermission, WorksheetEditPermission, WorksheetSetCellStylePermission, checkRangesEditablePermission, deserializeListOptions, getSheetCommandTarget, rangeToDiscreteRange, serializeListOptions } from "@univerjs/sheets";
 import { ComponentManager, IDialogService, IMenuManagerService, ISidebarService, IconManager, KeyCode, MenuItemType, RibbonDataGroup, RibbonInsertGroup, UniverMobileUIPlugin, getMenuHiddenObservable, useDependency, useEvent, useObservable, useSidebarClick } from "@univerjs/ui";
-import { BehaviorSubject, Subject, bufferTime, debounceTime, distinctUntilChanged, filter, map, of, startWith, switchMap, takeUntil } from "rxjs";
+import { BehaviorSubject, Subject, auditTime, bufferTime, debounceTime, distinctUntilChanged, filter, map, noop, of, startWith, switchMap, takeUntil, tap } from "rxjs";
 import { CURSOR_TYPE, CheckboxShape, DeviceInputEventType, DocSimpleSkeleton, FontCache, IRenderManagerService, Rect, Shape, Text, Transform, UniverRenderEnginePlugin, fixLineWidthByScale, getCurrentTypeOfRenderer, getFontStyleString } from "@univerjs/engine-render";
 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 { getPatternType } from "@univerjs/sheets-numfmt";
@@ -14,7 +14,7 @@ import { CheckboxIcon, DataValidationIcon, DatePickerIcon, DeleteIcon, DropdownL
 import { deserializeRangeWithSheet, serializeRange } from "@univerjs/engine-formula";
 import { FormulaEditor, RangeSelector } from "@univerjs/sheets-formula-ui";
 
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -25,7 +25,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -38,14 +38,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -56,7 +56,7 @@ function _defineProperty(e, r, t) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorateParam.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -64,7 +64,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -1054,8 +1054,7 @@ const menuSchema = {
 		order: 0,
 		gridLayout: {
 			row: 1,
-			column: 1,
-			showLabel: true
+			column: 1
 		},
 		menuItemFactory: dataValidationMenuFactory,
 		[OpenValidationPanelOperation.id]: {
@@ -1072,80 +1071,132 @@ const menuSchema = {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-data-validation-ui";
-var version = "1.0.4";
+var version = "1.2.0";
 
 //#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) {
+	constructor(_hoverManagerService, _cellAlertManagerService, _univerInstanceService, _localeService, _dataValidationModel, _dataValidationCacheService) {
 		super();
 		this._hoverManagerService = _hoverManagerService;
 		this._cellAlertManagerService = _cellAlertManagerService;
 		this._univerInstanceService = _univerInstanceService;
 		this._localeService = _localeService;
 		this._dataValidationModel = _dataValidationModel;
+		this._dataValidationCacheService = _dataValidationCacheService;
+		_defineProperty(this, "_hoveredCell", null);
 		this._init();
 	}
 	_init() {
 		this._initCellAlertPopup();
 	}
 	_initCellAlertPopup() {
-		this.disposeWithMe(this._univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_SHEET).pipe(switchMap((workbook) => (workbook === null || workbook === void 0 ? void 0 : workbook.activeSheet$) ?? of(null))).subscribe(() => this._cellAlertManagerService.removeAlert(ALERT_KEY)));
-		this.disposeWithMe(this._hoverManagerService.currentCell$.pipe(debounceTime(100)).subscribe((cellPos) => {
-			if (cellPos) {
-				var _workbook$getActiveSh;
-				const workbook = this._univerInstanceService.getUnit(cellPos.location.unitId, UniverInstanceType.UNIVER_SHEET);
-				if (!workbook || ((_workbook$getActiveSh = workbook.getActiveSheet()) === null || _workbook$getActiveSh === void 0 ? void 0 : _workbook$getActiveSh.getSheetId()) !== cellPos.location.subUnitId) {
-					this._cellAlertManagerService.removeAlert(ALERT_KEY);
-					return;
-				}
-				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;
-					}
-					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;
-				}
+		this.disposeWithMe(this._univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_SHEET).pipe(switchMap((workbook) => (workbook === null || workbook === void 0 ? void 0 : workbook.activeSheet$) ?? of(null))).subscribe(() => {
+			this._hoveredCell = null;
+			this._cellAlertManagerService.removeAlert(ALERT_KEY);
+		}));
+		this.disposeWithMe(this._hoverManagerService.currentCell$.pipe(tap(() => {
+			this._hoveredCell = null;
+			this._cellAlertManagerService.removeAlert(ALERT_KEY);
+		}), debounceTime(100)).subscribe((cellPos) => {
+			this._hoveredCell = cellPos;
+			this._refreshAlert();
+		}));
+		this.disposeWithMe(this._dataValidationModel.ruleChange$.subscribe((change) => {
+			var _change$oldRule;
+			if (this._affectsHoveredCell(change, [...change.rule.ranges, ...((_change$oldRule = change.oldRule) === null || _change$oldRule === void 0 ? void 0 : _change$oldRule.ranges) ?? []])) this._refreshAlert();
+		}));
+		this.disposeWithMe(this._dataValidationCacheService.dirtyRanges$.pipe(filter((change) => this._affectsHoveredCell(change, change.ranges)), tap(() => this._cellAlertManagerService.removeAlert(ALERT_KEY)), auditTime(0)).subscribe(() => this._refreshAlert()));
+		this.disposeWithMe(this._dataValidationModel.validStatusChange$.subscribe((change) => {
+			if (this._isHoveredLocation(change)) {
+				const rule = this._dataValidationModel.getRuleByLocation(change.unitId, change.subUnitId, change.row, change.col);
+				if ((rule === null || rule === void 0 ? void 0 : rule.uid) === change.ruleId) this._updateAlert(change.status);
 			}
+		}));
+		this.disposeWithMe(() => {
+			this._hoveredCell = null;
+			this._cellAlertManagerService.removeAlert(ALERT_KEY);
+		});
+	}
+	_isHoveredLocation(location) {
+		var _this$_hoveredCell;
+		const current = (_this$_hoveredCell = this._hoveredCell) === null || _this$_hoveredCell === void 0 ? void 0 : _this$_hoveredCell.location;
+		return (current === null || current === void 0 ? void 0 : current.unitId) === location.unitId && (current === null || current === void 0 ? void 0 : current.subUnitId) === location.subUnitId && (current === null || current === void 0 ? void 0 : current.row) === location.row && (current === null || current === void 0 ? void 0 : current.col) === location.col;
+	}
+	_affectsHoveredCell(location, ranges) {
+		var _this$_hoveredCell2;
+		const current = (_this$_hoveredCell2 = this._hoveredCell) === null || _this$_hoveredCell2 === void 0 ? void 0 : _this$_hoveredCell2.location;
+		return (current === null || current === void 0 ? void 0 : current.unitId) === location.unitId && (current === null || current === void 0 ? void 0 : current.subUnitId) === location.subUnitId && ranges.some((range) => Rectangle.contains(range, {
+			startRow: current.row,
+			endRow: current.row,
+			startColumn: current.col,
+			endColumn: current.col
+		}));
+	}
+	_getHoveredContext() {
+		var _this$_hoveredCell3;
+		const location = (_this$_hoveredCell3 = this._hoveredCell) === null || _this$_hoveredCell3 === void 0 ? void 0 : _this$_hoveredCell3.location;
+		if (!location) return;
+		const workbook = this._univerInstanceService.getUnit(location.unitId, UniverInstanceType.UNIVER_SHEET);
+		const worksheet = workbook === null || workbook === void 0 ? void 0 : workbook.getActiveSheet();
+		if (!workbook || !worksheet || worksheet.getSheetId() !== location.subUnitId) return;
+		const rule = this._dataValidationModel.getRuleByLocation(location.unitId, location.subUnitId, location.row, location.col);
+		if (rule) return {
+			location,
+			workbook,
+			worksheet,
+			rule
+		};
+	}
+	_refreshAlert() {
+		const context = this._getHoveredContext();
+		if (!context) {
 			this._cellAlertManagerService.removeAlert(ALERT_KEY);
+			return;
+		}
+		const { location, workbook, worksheet, rule } = context;
+		this._updateAlert(this._dataValidationModel.validator(rule, {
+			...location,
+			workbook,
+			worksheet
 		}));
 	}
+	_updateAlert(status) {
+		var _this$_cellAlertManag;
+		const context = this._getHoveredContext();
+		if (!context || status !== DataValidationStatus.INVALID) {
+			this._cellAlertManagerService.removeAlert(ALERT_KEY);
+			return;
+		}
+		const { location, rule } = context;
+		const validator = this._dataValidationModel.getValidator(rule.type);
+		if (!validator) {
+			this._cellAlertManagerService.removeAlert(ALERT_KEY);
+			return;
+		}
+		const title = this._localeService.t("sheets-data-validation-ui.error.title");
+		const message = validator.getRuleFinalError(rule, location);
+		const currentAlert = (_this$_cellAlertManag = this._cellAlertManagerService.currentAlert.get(ALERT_KEY)) === null || _this$_cellAlertManag === void 0 ? void 0 : _this$_cellAlertManag.alert;
+		if (currentAlert && this._isHoveredLocation(currentAlert.location) && currentAlert.title === title && currentAlert.message === message) return;
+		this._cellAlertManagerService.showAlert({
+			type: CellAlertType.ERROR,
+			title,
+			message,
+			location,
+			width: 200,
+			height: 74,
+			key: ALERT_KEY
+		});
+	}
 };
 DataValidationAlertController = __decorate([
 	__decorateParam(0, Inject(HoverManagerService)),
 	__decorateParam(1, Inject(CellAlertManagerService)),
 	__decorateParam(2, IUniverInstanceService),
 	__decorateParam(3, Inject(LocaleService)),
-	__decorateParam(4, Inject(SheetDataValidationModel))
+	__decorateParam(4, Inject(SheetDataValidationModel)),
+	__decorateParam(5, Inject(DataValidationCacheService))
 ], DataValidationAlertController);
 
 //#endregion
@@ -1487,6 +1538,7 @@ let SheetsDataValidationRenderController = class SheetsDataValidationRenderContr
 		this._dataValidationCacheService = _dataValidationCacheService;
 		this._editorBridgeService = _editorBridgeService;
 		this._initMenu();
+		this._initEditor();
 		this._initDropdown();
 		this._initViewModelIntercept();
 		this._initAutoHeight();
@@ -1494,6 +1546,19 @@ let SheetsDataValidationRenderController = class SheetsDataValidationRenderContr
 	_initMenu() {
 		this._menuManagerService.mergeMenu(menuSchema);
 	}
+	_initEditor() {
+		this.disposeWithMe(this._commandService.beforeCommandExecuted((command) => {
+			var _this$_editorBridgeSe;
+			if (command.id !== SetCellEditVisibleOperation.id) return;
+			const params = command.params;
+			if (!(params === null || params === void 0 ? void 0 : params.visible) || params.eventType !== DeviceInputEventType.Dblclick || !params.pointerPosition) return;
+			const location = (_this$_editorBridgeSe = this._editorBridgeService) === null || _this$_editorBridgeSe === void 0 ? void 0 : _this$_editorBridgeSe.getEditLocation();
+			if (!location || params.unitId && params.unitId !== location.unitId) return;
+			const { unitId, sheetId, row, column } = location;
+			const rule = this._sheetDataValidationModel.getRuleByLocation(unitId, sheetId, row, column);
+			if (rule && (rule.type === DataValidationType.LIST || rule.type === DataValidationType.LIST_MULTIPLE || rule.type === DataValidationType.CHECKBOX)) throw new CanceledError();
+		}));
+	}
 	_initDropdown() {
 		if (!this._editorBridgeService) return;
 		this.disposeWithMe(this._editorBridgeService.visible$.subscribe((visible) => {
@@ -3281,7 +3346,7 @@ const DataValidationItem = (props) => {
 		};
 	}, [markSelectionService]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("univer-bg-secondary univer-relative univer--mx-2 univer-box-border univer-flex univer-w-[287px] univer-cursor-pointer univer-flex-col univer-justify-between univer-overflow-hidden univer-rounded-md univer-p-2 univer-pr-9 rtl:univer-pl-9 rtl:univer-pr-2", {
+		className: clsx("univer-relative univer--mx-2 univer-box-border univer-flex univer-w-[287px] univer-cursor-pointer univer-flex-col univer-justify-between univer-overflow-hidden univer-rounded-md univer-bg-gray-0 univer-p-2 univer-pr-9 rtl:univer-pl-9 rtl:univer-pr-2 dark:!univer-bg-gray-900", {
 			"hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-700": !disable,
 			"univer-opacity-50": disable
 		}),
@@ -3309,7 +3374,7 @@ const DataValidationItem = (props) => {
 				children: validator === null || validator === void 0 ? void 0 : validator.generateRuleName(rule)
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: "univer-text-secondary univer-truncate univer-text-xs univer-leading-[18px] dark:!univer-text-gray-300",
+				className: "univer-truncate univer-text-xs univer-leading-[18px] univer-text-gray-500 dark:!univer-text-gray-300",
 				children: rule.ranges.map((range) => serializeRange(range)).join(",")
 			}),
 			isHover && /* @__PURE__ */ jsx("div", {
@@ -3680,9 +3745,8 @@ const Template = (props) => {
 		]
 	});
 };
-const NOOP = () => {};
 function ListFormulaInput(props) {
-	const { value, onChange: _onChange = NOOP, unitId, subUnitId, validResult, showError, ruleId } = props;
+	const { value, onChange: _onChange = noop, unitId, subUnitId, validResult, showError, ruleId } = props;
 	const { formula1 = "", formula2 = "" } = value || {};
 	const [isFormulaStr, setIsFormulaStr] = useState(() => isFormulaString(formula1) ? "1" : "0");
 	const [formulaStr, setFormulaStr] = useState(isFormulaStr === "1" ? formula1 : "=");
@@ -3882,7 +3946,7 @@ function ListFormulaInput(props) {
 			}, 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",
+			className: "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 univer-text-primary-600 hover:univer-bg-primary-50 dark:!univer-text-primary-500 dark:hover:!univer-bg-gray-800",
 			onClick: handleAdd,
 			children: [/* @__PURE__ */ jsx(IncreaseIcon, { className: "univer-mr-1" }), localeService.t("sheets-data-validation-ui.list.add")]
 		})] })