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

package/lib/es/index.js

@@ -1,12 +1,12 @@
 import { BooleanNumber, ColorKit, CommandType, DependentOn, Disposable, DisposableCollection, ICommandService, IConfigService, IUniverInstanceService, Inject, Injector, InterceptorEffectEnum, InterceptorManager, LocaleService, ObjectMatrix, Plugin, Range, Rectangle, Tools, UniverInstanceType, createInterceptorKey, generateRandomId, get, merge, registerDependencies, set, toDisposable, touchDependencies } from "@univerjs/core";
-import { AFTER_CELL_EDIT, AUTO_FILL_APPLY_TYPE, AutoFillTools, ClearSelectionAllCommand, ClearSelectionFormatCommand, IAutoFillService, INTERCEPTOR_POINT, RangeProtectionPermissionEditPoint, RemoveSheetMutation, SetSelectionsOperation, SetWorksheetActiveOperation, SheetInterceptorService, SheetPermissionCheckController, SheetsSelectionsService, WorkbookEditablePermission, WorksheetEditPermission, WorksheetSetCellStylePermission, checkRangesEditablePermission, getSheetCommandTarget, rangeToDiscreteRange, setEndForRange } from "@univerjs/sheets";
+import { AFTER_CELL_EDIT, AUTO_FILL_APPLY_TYPE, AutoFillTools, ClearSelectionAllCommand, ClearSelectionFormatCommand, IAutoFillService, INTERCEPTOR_POINT, RangeProtectionPermissionEditPoint, RemoveSheetMutation, SetSelectionsOperation, SetWorksheetActiveOperation, SheetInterceptorService, SheetPermissionCheckController, SheetsSelectionsService, UniverSheetsPlugin, WorkbookEditablePermission, WorksheetEditPermission, WorksheetSetCellStylePermission, checkRangesEditablePermission, getSheetCommandTarget, rangeToDiscreteRange, setEndForRange } from "@univerjs/sheets";
 import { AddCfCommand, AddConditionalRuleMutation, AddConditionalRuleMutationUndoFactory, CFNumberOperator, CFRuleType, CFSubRuleType, CFTextOperator, CFTimePeriodOperator, CFValueType, CONDITIONAL_FORMATTING_VIEWPORT_CACHE_LENGTH, ClearRangeCfCommand, ClearWorksheetCfCommand, ConditionalFormattingRangeIndexModel, ConditionalFormattingRangeTransformService, ConditionalFormattingRuleModel, ConditionalFormattingService, ConditionalFormattingViewModel, DEFAULT_BG_COLOR, DEFAULT_FONT_COLOR, DEFAULT_PADDING, DEFAULT_WIDTH, DeleteCfCommand, DeleteConditionalRuleMutation, DeleteConditionalRuleMutationUndoFactory, IIconSetType, MoveCfCommand, MoveConditionalRuleMutation, SHEET_CONDITIONAL_FORMATTING_PLUGIN, SetCfCommand, SetConditionalRuleMutation, UniverSheetsConditionalFormattingPlugin, compareWithNumber, createCfId, createDefaultRule, createDefaultValue, createDefaultValueByValueType, defaultDataBarNativeColor, defaultDataBarPositiveColor, getColorScaleFromValue, getOppositeOperator, iconGroup, iconMap, removeUndefinedAttr, setConditionalRuleMutationUndoFactory } from "@univerjs/sheets-conditional-formatting";
 import { ComponentManager, IMenuManagerService, ISidebarService, IconManager, MenuItemType, RibbonDataGroup, RibbonInsertGroup, getMenuHiddenObservable, useDependency, useObservable, useSidebarClick } from "@univerjs/ui";
-import { COPY_TYPE, FormatPainterStatus, IFormatPainterService, ISheetClipboardService, PREDEFINED_HOOK_NAME_PASTE, SheetSkeletonManagerService, getCurrentRangeDisable$, getRepeatRange, useHighlightRange, virtualizeDiscreteRanges } from "@univerjs/sheets-ui";
+import { COPY_TYPE, FormatPainterStatus, IFormatPainterService, ISheetClipboardService, PREDEFINED_HOOK_NAME_PASTE, SheetSkeletonManagerService, UniverSheetsMobileUIPlugin, UniverSheetsUIPlugin, getCurrentRangeDisable$, getRepeatRange, useHighlightRange, virtualizeDiscreteRanges } from "@univerjs/sheets-ui";
 import { Observable, debounceTime, filter, map, merge as merge$1, share, startWith } from "rxjs";
 import { bufferTime, debounceTime as debounceTime$1, filter as filter$1 } from "rxjs/operators";
+import { IRenderManagerService, UniverRenderEnginePlugin } from "@univerjs/engine-render";
 import { FormulaRefRangeService, UniverSheetsFormulaPlugin } from "@univerjs/sheets-formula";
-import { IRenderManagerService } from "@univerjs/engine-render";
 import { BoldIcon, ConditionsDoubleIcon, DataBarIcon, DeleteIcon, FontColorDoubleIcon, GripVerticalIcon, IncreaseIcon, ItalicIcon, MoreDownIcon, PaintBucketDoubleIcon, RatingIcon, SlashDoubleIcon, StrikethroughIcon, UnderlineIcon } from "@univerjs/icons";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Button, Checkbox, ColorPicker, DraggableList, Dropdown, Input, InputNumber, Radio, RadioGroup, Select, Tooltip, borderClassName, clsx } from "@univerjs/design";
@@ -81,10 +81,9 @@ const AddDataBarConditionalRuleCommand = {
 	type: 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(SheetsSelectionsService).getCurrentSelections().map((selection) => selection.range);
+		const ranges = params.ranges ?? accessor.get(SheetsSelectionsService).getCurrentSelections().map((selection) => selection.range);
 		if (!ranges.length) return false;
 		const conditionalFormattingRuleModel = accessor.get(ConditionalFormattingRuleModel);
 		const target = getSheetCommandTarget(accessor.get(IUniverInstanceService));
@@ -152,9 +151,8 @@ const AddIconSetConditionalRuleCommand = {
 	type: 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(SheetsSelectionsService).getCurrentSelections().map((selection) => selection.range);
+		const ranges = params.ranges ?? accessor.get(SheetsSelectionsService).getCurrentSelections().map((selection) => selection.range);
 		if (!ranges.length) return false;
 		const target = getSheetCommandTarget(accessor.get(IUniverInstanceService));
 		if (!target) return false;
@@ -365,7 +363,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) {
@@ -376,7 +374,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];
@@ -389,14 +387,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,
@@ -407,7 +405,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);
@@ -415,7 +413,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);
@@ -986,7 +984,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
@@ -1520,9 +1518,9 @@ let SheetsCfRenderController = class SheetsCfRenderController extends Disposable
 	_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;
@@ -1543,7 +1541,7 @@ let SheetsCfRenderController = class SheetsCfRenderController extends Disposable
 		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(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);
@@ -1552,13 +1550,12 @@ let SheetsCfRenderController = class SheetsCfRenderController extends Disposable
 		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(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,
@@ -1657,7 +1654,7 @@ _defineProperty(UniverSheetsConditionalFormattingMobileUIPlugin, "packageName",
 _defineProperty(UniverSheetsConditionalFormattingMobileUIPlugin, "version", version);
 _defineProperty(UniverSheetsConditionalFormattingMobileUIPlugin, "type", UniverInstanceType.UNIVER_SHEET);
 UniverSheetsConditionalFormattingMobileUIPlugin = __decorate([
-	DependentOn(UniverSheetsConditionalFormattingPlugin),
+	DependentOn(UniverRenderEnginePlugin, UniverSheetsPlugin, UniverSheetsFormulaPlugin, UniverSheetsConditionalFormattingPlugin, UniverSheetsMobileUIPlugin),
 	__decorateParam(1, Inject(Injector)),
 	__decorateParam(2, Inject(ICommandService)),
 	__decorateParam(3, IConfigService)
@@ -1865,10 +1862,9 @@ let ConditionalFormattingEditorController = class ConditionalFormattingEditorCon
 	*/
 	_initInterceptorEditorEnd() {
 		this.disposeWithMe(toDisposable(this._sheetInterceptorService.writeCellInterceptor.intercept(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;
@@ -2032,7 +2028,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();
@@ -2040,7 +2035,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) => Rectangle.intersects(sourceRange, range))) rangeMap.set(cfId, isSkipSheet ? [] : ranges);
@@ -2209,7 +2204,7 @@ let ConditionalFormattingViewportController = class ConditionalFormattingViewpor
 			this._unitDisposable.dispose();
 			this._unitDisposable = new DisposableCollection();
 			const unitId = unit.getUnitId();
-			const render = this._renderManagerService.getRenderById(unitId);
+			const render = this._renderManagerService.getRenderUnitById(unitId);
 			if (!render) return;
 			const sheetSkeletonManagerService = render.with(SheetSkeletonManagerService);
 			this._unitDisposable.add(sheetSkeletonManagerService.currentSkeleton$.subscribe((s) => {
@@ -2248,10 +2243,11 @@ const ColorPicker$1 = (props) => {
 	const { color, onChange, disable = false, Icon = PaintBucketDoubleIcon, className } = props;
 	const colorKit = useMemo(() => new ColorKit(color), [color]);
 	const renderIcon = () => {
-		return /* @__PURE__ */ jsx(Icon, {
+		const iconProps = {
 			className: clsx("univer-fill-primary-600", disable && className),
 			extend: { colorChannel1: colorKit.isValid ? color : "" }
-		});
+		};
+		return /* @__PURE__ */ jsx(Icon, { ...iconProps });
 	};
 	return !disable ? /* @__PURE__ */ jsx(Dropdown, {
 		overlay: /* @__PURE__ */ jsx("div", {
@@ -2293,7 +2289,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 CFRuleType.dataBar: {
-			var _rule$config$nativeCo, _rule$config$positive;
 			const { isGradient } = rule.config;
 			const positiveColor = isGradient ? `linear-gradient(to right, ${rule.config.positiveColor || defaultDataBarPositiveColor}, rgb(255 255 255))` : rule.config.positiveColor;
 			return /* @__PURE__ */ jsxs("div", {
@@ -2302,13 +2297,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 || defaultDataBarNativeColor})` : rule.config.nativeColor,
-						borderColor: (_rule$config$nativeCo = rule.config.nativeColor) !== null && _rule$config$nativeCo !== void 0 ? _rule$config$nativeCo : defaultDataBarNativeColor
+						borderColor: rule.config.nativeColor ?? defaultDataBarNativeColor
 					}
 				}), /* @__PURE__ */ 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 : defaultDataBarPositiveColor
+						borderColor: rule.config.positiveColor ?? defaultDataBarPositiveColor
 					}
 				})]
 			});
@@ -2332,16 +2327,15 @@ function Preview(props) {
 			}, index) : /* @__PURE__ */ jsx(SlashDoubleIcon, {}, index))
 		});
 		case 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) === BooleanNumber.TRUE;
 			const isStrikethrough = (st === null || st === void 0 ? void 0 : st.s) === BooleanNumber.TRUE;
 			const isItalic = it === BooleanNumber.TRUE;
 			const isBold = bl === BooleanNumber.TRUE;
-			const bgColor = (_bg$rgb = bg === null || bg === void 0 ? void 0 : bg.rgb) !== null && _bg$rgb !== void 0 ? _bg$rgb : DEFAULT_BG_COLOR;
-			const fontColor = (_cl$rgb = cl === null || cl === void 0 ? void 0 : cl.rgb) !== null && _cl$rgb !== void 0 ? _cl$rgb : DEFAULT_FONT_COLOR;
+			const bgColor = (bg === null || bg === void 0 ? void 0 : bg.rgb) ?? DEFAULT_BG_COLOR;
+			const fontColor = (cl === null || cl === void 0 ? void 0 : cl.rgb) ?? 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
 			};
@@ -2410,7 +2404,7 @@ const TextInput$1 = (props) => {
 	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);
+		(_formulaEditorRef$cur = formulaEditorRef.current) !== null && _formulaEditorRef$cur !== void 0 && _formulaEditorRef$cur.isClickOutSide(e) && setIsFocusFormulaEditor(false);
 	});
 	if (type === CFValueType.formula) return /* @__PURE__ */ jsx("div", {
 		className: "univer-ml-1 univer-w-full",
@@ -2818,7 +2812,7 @@ const InputText = (props) => {
 	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);
+		(_formulaEditorRef$cur = formulaEditorRef.current) !== null && _formulaEditorRef$cur !== void 0 && _formulaEditorRef$cur.isClickOutSide(e) && setIsFocusFormulaEditor(false);
 	});
 	const _value = useRef(value);
 	const config = useMemo(() => {
@@ -3344,7 +3338,7 @@ const FormulaStyleEditor = (props) => {
 	};
 	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__ */ jsxs("div", {
 		ref: divEleRef,
@@ -3404,13 +3398,10 @@ const FormulaStyleEditor = (props) => {
 //#endregion
 //#region src/views/wrapper-error/WrapperError.tsx
 const WrapperError = (props) => {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "univer-relative",
-		children: [/* @__PURE__ */ 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__ */ jsxs("div", { children: [props.children, props.errorText && /* @__PURE__ */ jsx("div", {
+		className: "univer-mt-1 univer-text-xs univer-text-red-500",
+		children: props.errorText
+	})] });
 };
 
 //#endregion
@@ -3672,11 +3663,10 @@ const HighlightCellStyleEditor = (props) => {
 	});
 	const [style, setStyle] = useState({});
 	const getResult = 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 CFSubRuleType.duplicateValues: return {
 				type: CFRuleType.highlightCell,
@@ -3820,14 +3810,14 @@ const TextInput = (props) => {
 	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);
+		(_formulaEditorRef$cur = formulaEditorRef.current) !== null && _formulaEditorRef$cur !== void 0 && _formulaEditorRef$cur.isClickOutSide(e) && setIsFocusFormulaEditor(false);
 	});
 	return /* @__PURE__ */ jsx("div", {
 		className: "univer-relative",
 		children: type !== CFValueType.formula ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(InputNumber, {
 			className: 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__ */ jsx("div", {
 			className: "univer-absolute univer-text-xs univer-text-red-500",
 			children: error
@@ -3980,7 +3970,8 @@ const IconSetRuleEdit = (props) => {
 	};
 	const handleOperatorChange = (operator, index) => {
 		onChange([String(index), "operator"], operator);
-		handleValueValueChange(createDefaultValue(CFSubRuleType.number, operator), index);
+		const defaultValue = createDefaultValue(CFSubRuleType.number, operator);
+		handleValueValueChange(defaultValue, index);
 	};
 	const handleValueTypeChange = (v, index) => {
 		onChange([
@@ -3989,7 +3980,8 @@ const IconSetRuleEdit = (props) => {
 			"type"
 		], v);
 		const item = configList[index];
-		handleValueValueChange(createDefaultValue(CFSubRuleType.number, item.operator), index);
+		const defaultValue = createDefaultValue(CFSubRuleType.number, item.operator);
+		handleValueValueChange(defaultValue, index);
 	};
 	return useMemo(() => {
 		return configList.map((item, index) => {
@@ -4228,7 +4220,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;
 		});
@@ -4494,7 +4487,7 @@ const getSubUnitId = (univerInstanceService) => {
 	return (_getActiveSheet = univerInstanceService.getCurrentUnitOfType(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 = useDependency(LocaleService);
 	const commandService = useDependency(ICommandService);
 	const univerInstanceService = useDependency(IUniverInstanceService);
@@ -4503,14 +4496,14 @@ const RuleEdit = (props) => {
 	const unitId = getUnitId(univerInstanceService);
 	const subUnitId = getSubUnitId(univerInstanceService);
 	const [errorText, setErrorText] = useState(void 0);
-	const rangeResult = 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 = useRef(((_props$rule = props.rule) === null || _props$rule === void 0 ? void 0 : _props$rule.ranges) ?? []);
 	const rangeSelectorTouched = useRef(false);
 	const rangeString = 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 "";
@@ -4604,7 +4597,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(deserializeRangeWithSheet).map((item) => item.range);
+		const result = rangeString.split(",").filter((e) => !!e).map(deserializeRangeWithSheet).map((item) => item.range);
+		rangeResult.current = result;
 	};
 	const handleSubmit = () => {
 		const getRanges = () => {
@@ -4823,9 +4817,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;
@@ -5128,7 +5121,7 @@ _defineProperty(UniverSheetsConditionalFormattingUIPlugin, "packageName", name);
 _defineProperty(UniverSheetsConditionalFormattingUIPlugin, "version", version);
 _defineProperty(UniverSheetsConditionalFormattingUIPlugin, "type", UniverInstanceType.UNIVER_SHEET);
 UniverSheetsConditionalFormattingUIPlugin = __decorate([
-	DependentOn(UniverSheetsConditionalFormattingPlugin, UniverSheetsFormulaPlugin),
+	DependentOn(UniverRenderEnginePlugin, UniverSheetsPlugin, UniverSheetsFormulaPlugin, UniverSheetsConditionalFormattingPlugin, UniverSheetsUIPlugin),
 	__decorateParam(1, Inject(Injector)),
 	__decorateParam(2, Inject(ICommandService)),
 	__decorateParam(3, IConfigService)

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

@@ -87,9 +87,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/es/locale/fa-IR.js

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

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

@@ -87,9 +87,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/es/locale/vi-VN.js

@@ -87,9 +87,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: {
@@ -150,7 +150,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." } }
 } };

package/lib/index.css

@@ -10,10 +10,6 @@
   position: relative;
 }
 
-.univer-bottom-\[-13px\] {
-  bottom: -13px;
-}
-
 .univer-left-0 {
   left: 0;
 }
@@ -22,10 +18,6 @@
   right: .25rem;
 }
 
-.univer-z-\[999\] {
-  z-index: 999;
-}
-
 .univer-my-2\.5 {
   margin-top: .625rem;
   margin-bottom: .625rem;
@@ -341,10 +333,6 @@
   padding-top: .5rem;
 }
 
-.univer-text-\[10px\] {
-  font-size: 10px;
-}
-
 .univer-text-sm {
   font-size: .875rem;
   line-height: 1.25rem;