@univerjs/sheets-conditional-formatting-ui 1.0.0-alpha.7 → 1.0.0-beta.0

package/lib/cjs/index.js

@@ -6,8 +6,8 @@ let _univerjs_ui = require("@univerjs/ui");
 let _univerjs_sheets_ui = require("@univerjs/sheets-ui");
 let rxjs = require("rxjs");
 let rxjs_operators = require("rxjs/operators");
-let _univerjs_sheets_formula = require("@univerjs/sheets-formula");
 let _univerjs_engine_render = require("@univerjs/engine-render");
+let _univerjs_sheets_formula = require("@univerjs/sheets-formula");
 let _univerjs_icons = require("@univerjs/icons");
 let react = require("react");
 let _univerjs_design = require("@univerjs/design");
@@ -82,10 +82,9 @@ const AddDataBarConditionalRuleCommand = {
 	type: _univerjs_core.CommandType.COMMAND,
 	id: "sheet.command.add-data-bar-conditional-rule",
 	handler(accessor, params) {
-		var _params$ranges;
 		if (!params) return false;
 		const { min, max, nativeColor, positiveColor, isGradient, stopIfTrue, isShowValue } = params;
-		const ranges = (_params$ranges = params.ranges) !== null && _params$ranges !== void 0 ? _params$ranges : accessor.get(_univerjs_sheets.SheetsSelectionsService).getCurrentSelections().map((selection) => selection.range);
+		const ranges = params.ranges ?? accessor.get(_univerjs_sheets.SheetsSelectionsService).getCurrentSelections().map((selection) => selection.range);
 		if (!ranges.length) return false;
 		const conditionalFormattingRuleModel = accessor.get(_univerjs_sheets_conditional_formatting.ConditionalFormattingRuleModel);
 		const target = (0, _univerjs_sheets.getSheetCommandTarget)(accessor.get(_univerjs_core.IUniverInstanceService));
@@ -153,9 +152,8 @@ const AddIconSetConditionalRuleCommand = {
 	type: _univerjs_core.CommandType.COMMAND,
 	id: "sheet.command.add-icon-set-conditional-rule",
 	handler(accessor, params) {
-		var _params$ranges;
 		if (!params) return false;
-		const ranges = (_params$ranges = params.ranges) !== null && _params$ranges !== void 0 ? _params$ranges : accessor.get(_univerjs_sheets.SheetsSelectionsService).getCurrentSelections().map((selection) => selection.range);
+		const ranges = params.ranges ?? accessor.get(_univerjs_sheets.SheetsSelectionsService).getCurrentSelections().map((selection) => selection.range);
 		if (!ranges.length) return false;
 		const target = (0, _univerjs_sheets.getSheetCommandTarget)(accessor.get(_univerjs_core.IUniverInstanceService));
 		if (!target) return false;
@@ -366,7 +364,7 @@ const AddUniqueValuesCfCommand = {
 };
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.140.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -377,7 +375,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.140.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -390,14 +388,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.140.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.137.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.140.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -408,7 +406,7 @@ function _defineProperty(e, r, t) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorateParam.js
+//#region \0@oxc-project+runtime@0.140.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -416,7 +414,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.140.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);
@@ -987,7 +985,7 @@ const menuSchema = {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-conditional-formatting-ui";
-var version = "1.0.0-alpha.7";
+var version = "1.0.0-beta.0";
 
 //#endregion
 //#region src/config/config.ts
@@ -1521,9 +1519,9 @@ let SheetsCfRenderController = class SheetsCfRenderController extends _univerjs_
 	_collectDirtyRanges(items, unitId, subUnitId) {
 		const ranges = [];
 		items.forEach((item) => {
-			var _item$rule, _rule$ranges;
+			var _rule$ranges;
 			if (item.unitId !== unitId || item.subUnitId !== subUnitId) return;
-			const rule = (_item$rule = item.rule) !== null && _item$rule !== void 0 ? _item$rule : item.cfId ? this._conditionalFormattingRuleModel.getRule(unitId, subUnitId, item.cfId) : null;
+			const rule = item.rule ?? (item.cfId ? this._conditionalFormattingRuleModel.getRule(unitId, subUnitId, item.cfId) : null);
 			if (rule === null || rule === void 0 || (_rule$ranges = rule.ranges) === null || _rule$ranges === void 0 ? void 0 : _rule$ranges.length) ranges.push(...rule.ranges);
 		});
 		return ranges;
@@ -1544,7 +1542,7 @@ let SheetsCfRenderController = class SheetsCfRenderController extends _univerjs_
 		if (!workbook || !worksheet) return;
 		const unitId = workbook.getUnitId();
 		const subUnitId = worksheet.getSheetId();
-		const render = this._renderManagerService.getRenderById(unitId);
+		const render = this._renderManagerService.getRenderUnitById(unitId);
 		const skeletonManagerService = render === null || render === void 0 ? void 0 : render.with(_univerjs_sheets_ui.SheetSkeletonManagerService);
 		const currentSkeleton = skeletonManagerService === null || skeletonManagerService === void 0 ? void 0 : skeletonManagerService.getCurrentSkeleton();
 		const dirtyRanges = this._intersectDirtyRangesWithRenderedRange(this._collectDirtyRanges(items, unitId, subUnitId), currentSkeleton === null || currentSkeleton === void 0 ? void 0 : currentSkeleton.rowColumnSegment);
@@ -1553,13 +1551,12 @@ let SheetsCfRenderController = class SheetsCfRenderController extends _univerjs_
 		render === null || render === void 0 || (_render$mainComponent = render.mainComponent) === null || _render$mainComponent === void 0 || _render$mainComponent.makeDirty();
 	}
 	_markActiveSheetRulesDirty() {
-		var _this$_conditionalFor;
 		const workbook = this._univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET);
 		const worksheet = workbook === null || workbook === void 0 ? void 0 : workbook.getActiveSheet();
 		if (!workbook || !worksheet) return;
 		const unitId = workbook.getUnitId();
 		const subUnitId = worksheet.getSheetId();
-		const rules = (_this$_conditionalFor = this._conditionalFormattingRuleModel.getSubunitRules(unitId, subUnitId)) !== null && _this$_conditionalFor !== void 0 ? _this$_conditionalFor : [];
+		const rules = this._conditionalFormattingRuleModel.getSubunitRules(unitId, subUnitId) ?? [];
 		if (!rules.length) return;
 		this._markDirtySkeleton(rules.map((rule) => ({
 			rule,
@@ -1658,7 +1655,7 @@ _defineProperty(UniverSheetsConditionalFormattingMobileUIPlugin, "packageName",
 _defineProperty(UniverSheetsConditionalFormattingMobileUIPlugin, "version", version);
 _defineProperty(UniverSheetsConditionalFormattingMobileUIPlugin, "type", _univerjs_core.UniverInstanceType.UNIVER_SHEET);
 UniverSheetsConditionalFormattingMobileUIPlugin = __decorate([
-	(0, _univerjs_core.DependentOn)(_univerjs_sheets_conditional_formatting.UniverSheetsConditionalFormattingPlugin),
+	(0, _univerjs_core.DependentOn)(_univerjs_engine_render.UniverRenderEnginePlugin, _univerjs_sheets.UniverSheetsPlugin, _univerjs_sheets_formula.UniverSheetsFormulaPlugin, _univerjs_sheets_conditional_formatting.UniverSheetsConditionalFormattingPlugin, _univerjs_sheets_ui.UniverSheetsMobileUIPlugin),
 	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
 	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_core.ICommandService)),
 	__decorateParam(3, _univerjs_core.IConfigService)
@@ -1866,10 +1863,9 @@ let ConditionalFormattingEditorController = class ConditionalFormattingEditorCon
 	*/
 	_initInterceptorEditorEnd() {
 		this.disposeWithMe((0, _univerjs_core.toDisposable)(this._sheetInterceptorService.writeCellInterceptor.intercept(_univerjs_sheets.AFTER_CELL_EDIT, { handler: (value, context, next) => {
-			var _result$style;
 			if (!value) next(value);
 			const result = this._conditionalFormattingService.composeStyle(context.unitId, context.subUnitId, context.row, context.col);
-			const cfStyle = (_result$style = result === null || result === void 0 ? void 0 : result.style) !== null && _result$style !== void 0 ? _result$style : {};
+			const cfStyle = (result === null || result === void 0 ? void 0 : result.style) ?? {};
 			const keys = Object.keys(cfStyle);
 			if (value === null || value === void 0 ? void 0 : value.p) {
 				var _value$p$body;
@@ -2033,7 +2029,6 @@ let ConditionalFormattingPainterController = class ConditionalFormattingPainterC
 			});
 		};
 		const generalApplyFunc = (targetUnitId, targetSubUnitId, targetRange) => {
-			var _this$_conditionalFor;
 			const { range: sourceRange, unitId: sourceUnitId, subUnitId: sourceSubUnitId } = this._painterConfig;
 			const isSkipSheet = targetUnitId !== sourceUnitId || sourceSubUnitId !== targetSubUnitId;
 			const rangeMap = /* @__PURE__ */ new Map();
@@ -2041,7 +2036,7 @@ let ConditionalFormattingPainterController = class ConditionalFormattingPainterC
 			const redos = [];
 			const undos = [];
 			if (!targetUnitId || !targetSubUnitId || !sourceUnitId || !sourceSubUnitId) return noopReturnFunc();
-			const ruleList = (_this$_conditionalFor = this._conditionalFormattingRuleModel.getSubunitRules(sourceUnitId, sourceSubUnitId)) !== null && _this$_conditionalFor !== void 0 ? _this$_conditionalFor : [];
+			const ruleList = this._conditionalFormattingRuleModel.getSubunitRules(sourceUnitId, sourceSubUnitId) ?? [];
 			ruleList === null || ruleList === void 0 || ruleList.forEach((rule) => {
 				const { ranges, cfId } = rule;
 				if (ranges.some((range) => _univerjs_core.Rectangle.intersects(sourceRange, range))) rangeMap.set(cfId, isSkipSheet ? [] : ranges);
@@ -2210,7 +2205,7 @@ let ConditionalFormattingViewportController = class ConditionalFormattingViewpor
 			this._unitDisposable.dispose();
 			this._unitDisposable = new _univerjs_core.DisposableCollection();
 			const unitId = unit.getUnitId();
-			const render = this._renderManagerService.getRenderById(unitId);
+			const render = this._renderManagerService.getRenderUnitById(unitId);
 			if (!render) return;
 			const sheetSkeletonManagerService = render.with(_univerjs_sheets_ui.SheetSkeletonManagerService);
 			this._unitDisposable.add(sheetSkeletonManagerService.currentSkeleton$.subscribe((s) => {
@@ -2249,10 +2244,11 @@ const ColorPicker = (props) => {
 	const { color, onChange, disable = false, Icon = _univerjs_icons.PaintBucketDoubleIcon, className } = props;
 	const colorKit = (0, react.useMemo)(() => new _univerjs_core.ColorKit(color), [color]);
 	const renderIcon = () => {
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+		const iconProps = {
 			className: (0, _univerjs_design.clsx)("univer-fill-primary-600", disable && className),
 			extend: { colorChannel1: colorKit.isValid ? color : "" }
-		});
+		};
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { ...iconProps });
 	};
 	return !disable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
 		overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -2294,7 +2290,6 @@ function Preview(props) {
 	const previewClassName = "univer-pointer-events-none univer-flex univer-h-5 univer-min-w-[72px] univer-items-center univer-justify-center univer-text-xs";
 	switch (rule.type) {
 		case _univerjs_sheets_conditional_formatting.CFRuleType.dataBar: {
-			var _rule$config$nativeCo, _rule$config$positive;
 			const { isGradient } = rule.config;
 			const positiveColor = isGradient ? `linear-gradient(to right, ${rule.config.positiveColor || _univerjs_sheets_conditional_formatting.defaultDataBarPositiveColor}, rgb(255 255 255))` : rule.config.positiveColor;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -2303,13 +2298,13 @@ function Preview(props) {
 					className: "univer-h-full univer-w-1/2 univer-border univer-border-solid",
 					style: {
 						background: isGradient ? `linear-gradient(to right,  rgb(255 255 255),${rule.config.nativeColor || _univerjs_sheets_conditional_formatting.defaultDataBarNativeColor})` : rule.config.nativeColor,
-						borderColor: (_rule$config$nativeCo = rule.config.nativeColor) !== null && _rule$config$nativeCo !== void 0 ? _rule$config$nativeCo : _univerjs_sheets_conditional_formatting.defaultDataBarNativeColor
+						borderColor: rule.config.nativeColor ?? _univerjs_sheets_conditional_formatting.defaultDataBarNativeColor
 					}
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "univer-h-full univer-w-1/2 univer-border univer-border-solid",
 					style: {
 						background: positiveColor,
-						borderColor: (_rule$config$positive = rule.config.positiveColor) !== null && _rule$config$positive !== void 0 ? _rule$config$positive : _univerjs_sheets_conditional_formatting.defaultDataBarPositiveColor
+						borderColor: rule.config.positiveColor ?? _univerjs_sheets_conditional_formatting.defaultDataBarPositiveColor
 					}
 				})]
 			});
@@ -2333,16 +2328,15 @@ function Preview(props) {
 			}, index) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.SlashDoubleIcon, {}, index))
 		});
 		case _univerjs_sheets_conditional_formatting.CFRuleType.highlightCell: {
-			var _bg$rgb, _cl$rgb, _replace;
 			const { ul, st, it, bl, bg, cl } = rule.style;
 			const isUnderline = (ul === null || ul === void 0 ? void 0 : ul.s) === _univerjs_core.BooleanNumber.TRUE;
 			const isStrikethrough = (st === null || st === void 0 ? void 0 : st.s) === _univerjs_core.BooleanNumber.TRUE;
 			const isItalic = it === _univerjs_core.BooleanNumber.TRUE;
 			const isBold = bl === _univerjs_core.BooleanNumber.TRUE;
-			const bgColor = (_bg$rgb = bg === null || bg === void 0 ? void 0 : bg.rgb) !== null && _bg$rgb !== void 0 ? _bg$rgb : _univerjs_sheets_conditional_formatting.DEFAULT_BG_COLOR;
-			const fontColor = (_cl$rgb = cl === null || cl === void 0 ? void 0 : cl.rgb) !== null && _cl$rgb !== void 0 ? _cl$rgb : _univerjs_sheets_conditional_formatting.DEFAULT_FONT_COLOR;
+			const bgColor = (bg === null || bg === void 0 ? void 0 : bg.rgb) ?? _univerjs_sheets_conditional_formatting.DEFAULT_BG_COLOR;
+			const fontColor = (cl === null || cl === void 0 ? void 0 : cl.rgb) ?? _univerjs_sheets_conditional_formatting.DEFAULT_FONT_COLOR;
 			const style = {
-				textDecoration: (_replace = `${isUnderline ? "underline" : ""} ${isStrikethrough ? "line-through" : ""}`.replace(/^ /, "")) !== null && _replace !== void 0 ? _replace : void 0,
+				textDecoration: `${isUnderline ? "underline" : ""} ${isStrikethrough ? "line-through" : ""}`.replace(/^ /, "") ?? void 0,
 				backgroundColor: bgColor,
 				color: fontColor
 			};
@@ -2411,7 +2405,7 @@ const TextInput$1 = (props) => {
 	const [isFocusFormulaEditor, setIsFocusFormulaEditor] = (0, react.useState)(false);
 	(0, _univerjs_ui.useSidebarClick)((e) => {
 		var _formulaEditorRef$cur;
-		!((_formulaEditorRef$cur = formulaEditorRef.current) === null || _formulaEditorRef$cur === void 0) && _formulaEditorRef$cur.isClickOutSide(e) && setIsFocusFormulaEditor(false);
+		(_formulaEditorRef$cur = formulaEditorRef.current) !== null && _formulaEditorRef$cur !== void 0 && _formulaEditorRef$cur.isClickOutSide(e) && setIsFocusFormulaEditor(false);
 	});
 	if (type === _univerjs_sheets_conditional_formatting.CFValueType.formula) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "univer-ml-1 univer-w-full",
@@ -2819,7 +2813,7 @@ const InputText = (props) => {
 	const [isFocusFormulaEditor, setIsFocusFormulaEditor] = (0, react.useState)(false);
 	(0, _univerjs_ui.useSidebarClick)((e) => {
 		var _formulaEditorRef$cur;
-		!((_formulaEditorRef$cur = formulaEditorRef.current) === null || _formulaEditorRef$cur === void 0) && _formulaEditorRef$cur.isClickOutSide(e) && setIsFocusFormulaEditor(false);
+		(_formulaEditorRef$cur = formulaEditorRef.current) !== null && _formulaEditorRef$cur !== void 0 && _formulaEditorRef$cur.isClickOutSide(e) && setIsFocusFormulaEditor(false);
 	});
 	const _value = (0, react.useRef)(value);
 	const config = (0, react.useMemo)(() => {
@@ -3345,7 +3339,7 @@ const FormulaStyleEditor = (props) => {
 	};
 	(0, _univerjs_ui.useSidebarClick)((e) => {
 		var _formulaEditorRef$cur;
-		!((_formulaEditorRef$cur = formulaEditorRef.current) === null || _formulaEditorRef$cur === void 0) && _formulaEditorRef$cur.isClickOutSide(e) && setIsFocusFormulaEditor(false);
+		(_formulaEditorRef$cur = formulaEditorRef.current) !== null && _formulaEditorRef$cur !== void 0 && _formulaEditorRef$cur.isClickOutSide(e) && setIsFocusFormulaEditor(false);
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		ref: divEleRef,
@@ -3405,13 +3399,10 @@ const FormulaStyleEditor = (props) => {
 //#endregion
 //#region src/views/wrapper-error/WrapperError.tsx
 const WrapperError = (props) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "univer-relative",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "univer-absolute univer-bottom-[-13px] univer-z-[999] univer-text-[10px] univer-text-red-500",
-			children: props.errorText
-		}), props.children]
-	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [props.children, props.errorText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "univer-mt-1 univer-text-xs univer-text-red-500",
+		children: props.errorText
+	})] });
 };
 
 //#endregion
@@ -3673,11 +3664,10 @@ const HighlightCellStyleEditor = (props) => {
 	});
 	const [style, setStyle] = (0, react.useState)({});
 	const getResult = (0, react.useMemo)(() => (option) => {
-		var _option$subType, _option$operator, _option$value, _option$style;
-		const nextSubType = (_option$subType = option.subType) !== null && _option$subType !== void 0 ? _option$subType : subType;
-		const nextOperator = (_option$operator = option.operator) !== null && _option$operator !== void 0 ? _option$operator : operator;
-		const nextValue = (_option$value = option.value) !== null && _option$value !== void 0 ? _option$value : value;
-		const nextStyle = (_option$style = option.style) !== null && _option$style !== void 0 ? _option$style : style;
+		const nextSubType = option.subType ?? subType;
+		const nextOperator = option.operator ?? operator;
+		const nextValue = option.value ?? value;
+		const nextStyle = option.style ?? style;
 		switch (nextSubType) {
 			case _univerjs_sheets_conditional_formatting.CFSubRuleType.duplicateValues: return {
 				type: _univerjs_sheets_conditional_formatting.CFRuleType.highlightCell,
@@ -3821,14 +3811,14 @@ const TextInput = (props) => {
 	const [isFocusFormulaEditor, setIsFocusFormulaEditor] = (0, react.useState)(false);
 	(0, _univerjs_ui.useSidebarClick)((e) => {
 		var _formulaEditorRef$cur;
-		!((_formulaEditorRef$cur = formulaEditorRef.current) === null || _formulaEditorRef$cur === void 0) && _formulaEditorRef$cur.isClickOutSide(e) && setIsFocusFormulaEditor(false);
+		(_formulaEditorRef$cur = formulaEditorRef.current) !== null && _formulaEditorRef$cur !== void 0 && _formulaEditorRef$cur.isClickOutSide(e) && setIsFocusFormulaEditor(false);
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "univer-relative",
 		children: type !== _univerjs_sheets_conditional_formatting.CFValueType.formula ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
 			className: (0, _univerjs_design.clsx)({ "univer-border-red-500": error }),
 			value: Number(props.value) || 0,
-			onChange: (v) => onChange(v !== null && v !== void 0 ? v : 0)
+			onChange: (v) => onChange(v ?? 0)
 		}), error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "univer-absolute univer-text-xs univer-text-red-500",
 			children: error
@@ -3981,7 +3971,8 @@ const IconSetRuleEdit = (props) => {
 	};
 	const handleOperatorChange = (operator, index) => {
 		onChange([String(index), "operator"], operator);
-		handleValueValueChange((0, _univerjs_sheets_conditional_formatting.createDefaultValue)(_univerjs_sheets_conditional_formatting.CFSubRuleType.number, operator), index);
+		const defaultValue = (0, _univerjs_sheets_conditional_formatting.createDefaultValue)(_univerjs_sheets_conditional_formatting.CFSubRuleType.number, operator);
+		handleValueValueChange(defaultValue, index);
 	};
 	const handleValueTypeChange = (v, index) => {
 		onChange([
@@ -3990,7 +3981,8 @@ const IconSetRuleEdit = (props) => {
 			"type"
 		], v);
 		const item = configList[index];
-		handleValueValueChange((0, _univerjs_sheets_conditional_formatting.createDefaultValue)(_univerjs_sheets_conditional_formatting.CFSubRuleType.number, item.operator), index);
+		const defaultValue = (0, _univerjs_sheets_conditional_formatting.createDefaultValue)(_univerjs_sheets_conditional_formatting.CFSubRuleType.number, item.operator);
+		handleValueValueChange(defaultValue, index);
 	};
 	return (0, react.useMemo)(() => {
 		return configList.map((item, index) => {
@@ -4229,7 +4221,8 @@ const IconSet = (props) => {
 	const reverseIcon = () => {
 		const iconList = configList.map((item) => ({ ...item }));
 		configList.forEach((item, index) => {
-			const newIcon = iconList[configList.length - 1 - index];
+			const mirrorIndex = configList.length - 1 - index;
+			const newIcon = iconList[mirrorIndex];
 			item.iconId = newIcon.iconId;
 			item.iconType = newIcon.iconType;
 		});
@@ -4495,7 +4488,7 @@ const getSubUnitId = (univerInstanceService) => {
 	return (_getActiveSheet = univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_SHEET).getActiveSheet()) === null || _getActiveSheet === void 0 ? void 0 : _getActiveSheet.getSheetId();
 };
 const RuleEdit = (props) => {
-	var _props$rule$ranges, _props$rule, _props$rule5;
+	var _props$rule, _props$rule5;
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
 	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
 	const univerInstanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
@@ -4504,14 +4497,14 @@ const RuleEdit = (props) => {
 	const unitId = getUnitId(univerInstanceService);
 	const subUnitId = getSubUnitId(univerInstanceService);
 	const [errorText, setErrorText] = (0, react.useState)(void 0);
-	const rangeResult = (0, react.useRef)((_props$rule$ranges = (_props$rule = props.rule) === null || _props$rule === void 0 ? void 0 : _props$rule.ranges) !== null && _props$rule$ranges !== void 0 ? _props$rule$ranges : []);
+	const rangeResult = (0, react.useRef)(((_props$rule = props.rule) === null || _props$rule === void 0 ? void 0 : _props$rule.ranges) ?? []);
 	const rangeSelectorTouched = (0, react.useRef)(false);
 	const rangeString = (0, react.useMemo)(() => {
 		var _props$rule2;
 		let ranges = (_props$rule2 = props.rule) === null || _props$rule2 === void 0 ? void 0 : _props$rule2.ranges;
 		if (!(ranges === null || ranges === void 0 ? void 0 : ranges.length)) {
-			var _selectionManagerServ, _selectionManagerServ2;
-			ranges = (_selectionManagerServ = (_selectionManagerServ2 = selectionManagerService.getCurrentSelections()) === null || _selectionManagerServ2 === void 0 ? void 0 : _selectionManagerServ2.map((s) => s.range)) !== null && _selectionManagerServ !== void 0 ? _selectionManagerServ : [];
+			var _selectionManagerServ;
+			ranges = ((_selectionManagerServ = selectionManagerService.getCurrentSelections()) === null || _selectionManagerServ === void 0 ? void 0 : _selectionManagerServ.map((s) => s.range)) ?? [];
 		}
 		rangeResult.current = ranges;
 		if (!(ranges === null || ranges === void 0 ? void 0 : ranges.length)) return "";
@@ -4605,7 +4598,8 @@ const RuleEdit = (props) => {
 	const onRangeSelectorChange = (rangeString) => {
 		if (!rangeSelectorTouched.current && rangeString.length < 1 && rangeResult.current.length > 0) return;
 		rangeSelectorTouched.current = true;
-		rangeResult.current = rangeString.split(",").filter((e) => !!e).map(_univerjs_engine_formula.deserializeRangeWithSheet).map((item) => item.range);
+		const result = rangeString.split(",").filter((e) => !!e).map(_univerjs_engine_formula.deserializeRangeWithSheet).map((item) => item.range);
+		rangeResult.current = result;
 	};
 	const handleSubmit = () => {
 		const getRanges = () => {
@@ -4824,9 +4818,8 @@ function RuleList(props) {
 		});
 	};
 	const handleDragStart = (_layout, from) => {
-		var _dragRule$cfId;
 		const dragRule = ruleListByPermissionCheck[from.y];
-		setDraggingId((_dragRule$cfId = dragRule === null || dragRule === void 0 ? void 0 : dragRule.cfId) !== null && _dragRule$cfId !== void 0 ? _dragRule$cfId : "");
+		setDraggingId((dragRule === null || dragRule === void 0 ? void 0 : dragRule.cfId) ?? "");
 	};
 	const handleDragStop = (_layout, from, to) => {
 		var _getActiveSheet2, _ruleListByPermission, _ruleListByPermission2;
@@ -5129,7 +5122,7 @@ _defineProperty(UniverSheetsConditionalFormattingUIPlugin, "packageName", name);
 _defineProperty(UniverSheetsConditionalFormattingUIPlugin, "version", version);
 _defineProperty(UniverSheetsConditionalFormattingUIPlugin, "type", _univerjs_core.UniverInstanceType.UNIVER_SHEET);
 UniverSheetsConditionalFormattingUIPlugin = __decorate([
-	(0, _univerjs_core.DependentOn)(_univerjs_sheets_conditional_formatting.UniverSheetsConditionalFormattingPlugin, _univerjs_sheets_formula.UniverSheetsFormulaPlugin),
+	(0, _univerjs_core.DependentOn)(_univerjs_engine_render.UniverRenderEnginePlugin, _univerjs_sheets.UniverSheetsPlugin, _univerjs_sheets_formula.UniverSheetsFormulaPlugin, _univerjs_sheets_conditional_formatting.UniverSheetsConditionalFormattingPlugin, _univerjs_sheets_ui.UniverSheetsUIPlugin),
 	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
 	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_core.ICommandService)),
 	__decorateParam(3, _univerjs_core.IConfigService)

package/lib/cjs/locale/es-ES.js

@@ -88,9 +88,9 @@ const locale = { "sheets-conditional-formatting-ui": {
 		lastWeek: "Semana pasada",
 		nextWeek: "Semana siguiente",
 		today: "Hoy",
-		topN: "Top {0}",
+		topN: "Principales {0}",
 		bottomN: "Inferior {0}",
-		topNPercent: "Top {0}%",
+		topNPercent: "Principales {0}%",
 		bottomNPercent: "Inferior {0}%"
 	} },
 	operator: {

package/lib/cjs/locale/fa-IR.js

@@ -151,7 +151,7 @@ const locale = { "sheets-conditional-formatting-ui": {
 	errorMessage: {
 		notBlank: "شرط نمی‌تواند خالی باشد",
 		formulaError: "فرمول اشتباه",
-		rangeError: "Bad selection"
+		rangeError: "انتخاب نامعتبر"
 	},
 	permission: { dialog: { setStyleErr: "محدوده محافظت شده است و شما مجوز تنظیم سبک‌ها را ندارید. برای تنظیم سبک‌ها، لطفا با سازنده تماس بگیرید." } }
 } };

package/lib/cjs/locale/pl-PL.js

@@ -88,9 +88,9 @@ const locale = { "sheets-conditional-formatting-ui": {
 		lastWeek: "Poprzedni tydzień",
 		nextWeek: "Następny tydzień",
 		today: "Dzisiaj",
-		topN: "Top {0}",
+		topN: "Górne {0}",
 		bottomN: "Ostatnie {0}",
-		topNPercent: "Top {0}%",
+		topNPercent: "Górne {0}%",
 		bottomNPercent: "Ostatnie {0}%"
 	} },
 	operator: {

package/lib/cjs/locale/vi-VN.js

@@ -88,9 +88,9 @@ const locale = { "sheets-conditional-formatting-ui": {
 		lastWeek: "Tuần trước",
 		nextWeek: "Tuần sau",
 		today: "Hôm nay",
-		topN: "Top {0}",
+		topN: "Trên cùng {0}",
 		bottomN: "Cuối {0}",
-		topNPercent: "Top {0}%",
+		topNPercent: "Trên cùng {0}%",
 		bottomNPercent: "Cuối {0}%"
 	} },
 	operator: {
@@ -151,7 +151,7 @@ const locale = { "sheets-conditional-formatting-ui": {
 	errorMessage: {
 		notBlank: "Điều kiện không được để trống",
 		formulaError: "Lỗi công thức",
-		rangeError: "Bad selection"
+		rangeError: "Lựa chọn không hợp lệ"
 	},
 	permission: { dialog: { setStyleErr: "Phạm vi này đã được bảo vệ, hiện không có quyền thiết lập kiểu. Nếu cần thiết lập kiểu, vui lòng liên hệ với người tạo." } }
 } };