@univerjs/sheets-conditional-formatting-ui 1.0.0-alpha.3 → 1.0.0-alpha.4

package/lib/es/index.js

@@ -1,14 +1,14 @@
 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 { 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, ILayoutService, IMenuManagerService, ISidebarService, IconManager, MenuItemType, RibbonDataGroup, getMenuHiddenObservable, useDependency, useObservable, useScrollYOverContainer, useSidebarClick } from "@univerjs/ui";
+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 { Observable, debounceTime, merge as merge$1 } from "rxjs";
-import { bufferTime, debounceTime as debounceTime$1, filter } from "rxjs/operators";
+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 { FormulaRefRangeService, UniverSheetsFormulaPlugin } from "@univerjs/sheets-formula";
 import { IRenderManagerService } from "@univerjs/engine-render";
-import { BoldIcon, ConditionsDoubleIcon, DeleteIcon, FontColorDoubleIcon, GripVerticalIcon, IncreaseIcon, ItalicIcon, MoreDownIcon, PaintBucketDoubleIcon, SlashDoubleIcon, StrikethroughIcon, UnderlineIcon } from "@univerjs/icons";
-import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+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";
 import { LexerTreeBuilder, deserializeRangeWithSheet, operatorToken, serializeRange } from "@univerjs/engine-formula";
 import { FormulaEditor, RangeSelector } from "@univerjs/sheets-formula-ui";
@@ -81,8 +81,11 @@ const AddDataBarConditionalRuleCommand = {
 	type: CommandType.COMMAND,
 	id: "sheet.command.add-data-bar-conditional-rule",
 	handler(accessor, params) {
+		var _params$ranges;
 		if (!params) return false;
-		const { ranges, min, max, nativeColor, positiveColor, isGradient, stopIfTrue, isShowValue } = params;
+		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);
+		if (!ranges.length) return false;
 		const conditionalFormattingRuleModel = accessor.get(ConditionalFormattingRuleModel);
 		const target = getSheetCommandTarget(accessor.get(IUniverInstanceService));
 		if (!target) return false;
@@ -143,6 +146,37 @@ const AddDuplicateValuesCfCommand = {
 	}
 };
 
+//#endregion
+//#region src/commands/commands/add-icon-set-cf.command.ts
+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);
+		if (!ranges.length) return false;
+		const target = getSheetCommandTarget(accessor.get(IUniverInstanceService));
+		if (!target) return false;
+		const { unitId, subUnitId } = target;
+		const rule = {
+			ranges,
+			cfId: accessor.get(ConditionalFormattingRuleModel).createCfId(unitId, subUnitId),
+			stopIfTrue: !!params.stopIfTrue,
+			rule: {
+				type: CFRuleType.iconSet,
+				config: params.config,
+				isShowValue: params.isShowValue
+			}
+		};
+		return accessor.get(ICommandService).executeCommand(AddConditionalRuleMutation.id, {
+			unitId,
+			subUnitId,
+			rule
+		});
+	}
+};
+
 //#endregion
 //#region src/commands/commands/add-number-cf.command.ts
 const AddNumberCfCommand = {
@@ -393,11 +427,9 @@ function __decorate(decorators, target, key, desc) {
 //#region src/controllers/cf.panel.controller.ts
 const CF_PANEL_KEY$1 = "sheet.conditional.formatting.panel";
 let ConditionalFormattingPanelController = class ConditionalFormattingPanelController extends Disposable {
-	constructor(_univerInstanceService, _injector, _componentManager, _sidebarService, _localeService) {
+	constructor(_univerInstanceService, _sidebarService, _localeService) {
 		super();
 		this._univerInstanceService = _univerInstanceService;
-		this._injector = _injector;
-		this._componentManager = _componentManager;
 		this._sidebarService = _sidebarService;
 		this._localeService = _localeService;
 		_defineProperty(this, "_sidebarDisposable", null);
@@ -429,10 +461,8 @@ let ConditionalFormattingPanelController = class ConditionalFormattingPanelContr
 };
 ConditionalFormattingPanelController = __decorate([
 	__decorateParam(0, IUniverInstanceService),
-	__decorateParam(1, Inject(Injector)),
-	__decorateParam(2, Inject(ComponentManager)),
-	__decorateParam(3, Inject(ISidebarService)),
-	__decorateParam(4, Inject(LocaleService))
+	__decorateParam(1, Inject(ISidebarService)),
+	__decorateParam(2, Inject(LocaleService))
 ], ConditionalFormattingPanelController);
 
 //#endregion
@@ -799,17 +829,155 @@ function FactoryManageConditionalFormattingRule(accessor) {
 	};
 }
 
+//#endregion
+//#region src/menu/quick-insert.menu.ts
+const DATA_BAR_PARAMS = {
+	min: { type: CFValueType.min },
+	max: { type: CFValueType.max },
+	nativeColor: defaultDataBarNativeColor,
+	positiveColor: defaultDataBarPositiveColor,
+	isGradient: false,
+	isShowValue: true
+};
+function createIconSetParams(iconType) {
+	return {
+		config: [
+			{
+				iconType,
+				iconId: "0",
+				operator: CFNumberOperator.greaterThanOrEqual,
+				value: {
+					type: CFValueType.percent,
+					value: 67
+				}
+			},
+			{
+				iconType,
+				iconId: "1",
+				operator: CFNumberOperator.greaterThanOrEqual,
+				value: {
+					type: CFValueType.percent,
+					value: 33
+				}
+			},
+			{
+				iconType,
+				iconId: "2",
+				operator: CFNumberOperator.lessThanOrEqual,
+				value: {
+					type: CFValueType.percent,
+					value: Number.MAX_SAFE_INTEGER
+				}
+			}
+		],
+		isShowValue: true
+	};
+}
+function getQuickConditionalFormattingMenuState(accessor) {
+	return {
+		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
+		disabled$: getCurrentRangeDisable$(accessor, {
+			workbookTypes: [WorkbookEditablePermission],
+			worksheetTypes: [WorksheetSetCellStylePermission, WorksheetEditPermission],
+			rangeTypes: [RangeProtectionPermissionEditPoint]
+		})
+	};
+}
+function quickDataBarMenuFactory(accessor) {
+	return {
+		id: AddDataBarConditionalRuleCommand.id,
+		type: MenuItemType.BUTTON_SELECTOR,
+		icon: "DataBarIcon",
+		tooltip: "sheets-conditional-formatting-ui.ruleType.dataBar",
+		params: DATA_BAR_PARAMS,
+		selectionsCommandId: AddDataBarConditionalRuleCommand.id,
+		selections: [
+			{
+				label: "sheets-conditional-formatting-ui.ruleType.dataBar",
+				value: CFRuleType.dataBar,
+				params: DATA_BAR_PARAMS
+			},
+			{
+				id: OpenConditionalFormattingOperator.id,
+				label: "sheets-conditional-formatting-ui.menu.createConditionalFormatting",
+				value: 7,
+				params: { value: 7 }
+			},
+			{
+				id: ClearRangeCfCommand.id,
+				label: "sheets-conditional-formatting-ui.menu.clearRangeRules",
+				value: CFRuleType.dataBar,
+				params: { types: [CFRuleType.dataBar] }
+			}
+		],
+		...getQuickConditionalFormattingMenuState(accessor)
+	};
+}
+function quickIconSetMenuFactory(accessor) {
+	const ratingParams = createIconSetParams(IIconSetType.threeStars);
+	return {
+		id: AddIconSetConditionalRuleCommand.id,
+		type: MenuItemType.BUTTON_SELECTOR,
+		icon: "RatingIcon",
+		tooltip: "sheets-conditional-formatting-ui.ruleType.iconSet",
+		params: ratingParams,
+		selectionsCommandId: AddIconSetConditionalRuleCommand.id,
+		selections: [
+			{
+				label: "sheets-conditional-formatting-ui.iconSet.rank",
+				value: IIconSetType.threeStars,
+				params: ratingParams
+			},
+			{
+				label: "sheets-conditional-formatting-ui.iconSet.shape",
+				value: IIconSetType.threeTrafficLights1,
+				params: createIconSetParams(IIconSetType.threeTrafficLights1)
+			},
+			{
+				label: "sheets-conditional-formatting-ui.iconSet.direction",
+				value: IIconSetType.threeArrows,
+				params: createIconSetParams(IIconSetType.threeArrows)
+			},
+			{
+				id: OpenConditionalFormattingOperator.id,
+				label: "sheets-conditional-formatting-ui.menu.createConditionalFormatting",
+				value: 8,
+				params: { value: 8 }
+			},
+			{
+				id: ClearRangeCfCommand.id,
+				label: "sheets-conditional-formatting-ui.menu.clearRangeRules",
+				value: CFRuleType.iconSet,
+				params: { types: [CFRuleType.iconSet] }
+			}
+		],
+		...getQuickConditionalFormattingMenuState(accessor)
+	};
+}
+
 //#endregion
 //#region src/menu/schema.ts
-const menuSchema = { [RibbonDataGroup.RULES]: { [OpenConditionalFormattingOperator.id]: {
-	order: 1,
-	menuItemFactory: FactoryManageConditionalFormattingRule
-} } };
+const menuSchema = {
+	[RibbonInsertGroup.CELL]: {
+		[AddDataBarConditionalRuleCommand.id]: {
+			order: 3,
+			menuItemFactory: quickDataBarMenuFactory
+		},
+		[AddIconSetConditionalRuleCommand.id]: {
+			order: 4,
+			menuItemFactory: quickIconSetMenuFactory
+		}
+	},
+	[RibbonDataGroup.RULES]: { [OpenConditionalFormattingOperator.id]: {
+		order: 1,
+		menuItemFactory: FactoryManageConditionalFormattingRule
+	} }
+};
 
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-conditional-formatting-ui";
-var version = "1.0.0-alpha.3";
+var version = "1.0.0-alpha.4";
 
 //#endregion
 //#region src/config/config.ts
@@ -1390,7 +1558,7 @@ let SheetsCfRenderController = class SheetsCfRenderController extends Disposable
 		})));
 	}
 	_initSkeleton() {
-		this.disposeWithMe(merge$1(this._conditionalFormattingRuleModel.$ruleChange, this._conditionalFormattingViewModel.markDirty$).pipe(bufferTime(16), filter((v) => !!v.length), filter((v) => {
+		this.disposeWithMe(merge$1(this._conditionalFormattingRuleModel.$ruleChange, this._conditionalFormattingViewModel.markDirty$).pipe(bufferTime(16), filter$1((v) => !!v.length), filter$1((v) => {
 			const workbook = this._univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_SHEET);
 			if (!workbook) return false;
 			const worksheet = workbook.getActiveSheet();
@@ -1462,6 +1630,7 @@ let UniverSheetsConditionalFormattingMobileUIPlugin = class UniverSheetsConditio
 			AddAverageCfCommand,
 			AddColorScaleConditionalRuleCommand,
 			AddDataBarConditionalRuleCommand,
+			AddIconSetConditionalRuleCommand,
 			AddDuplicateValuesCfCommand,
 			AddNumberCfCommand,
 			AddRankCfCommand,
@@ -2092,11 +2261,10 @@ const ColorPicker$1 = (props) => {
 
 //#endregion
 //#region src/views/Preview.tsx
-const Preview = (props) => {
-	const rule = props.rule;
-	if (!rule) return null;
+function Preview(props) {
+	const { rule } = props;
 	const colorList = useMemo(() => {
-		if (rule.type === CFRuleType.colorScale) {
+		if ((rule === null || rule === void 0 ? void 0 : rule.type) === CFRuleType.colorScale) {
 			const config = rule.config.map((c, index) => ({
 				color: new ColorKit(c.color),
 				value: index
@@ -2107,11 +2275,12 @@ const Preview = (props) => {
 		return null;
 	}, [rule]);
 	const iconSet = useMemo(() => {
-		if (rule.type === CFRuleType.iconSet) return rule.config.map((item) => {
+		if ((rule === null || rule === void 0 ? void 0 : rule.type) === CFRuleType.iconSet) return rule.config.map((item) => {
 			const iconList = iconMap[item.iconType];
 			return iconList && iconList[Number(item.iconId)];
 		});
 	}, [rule]);
+	if (!rule) return null;
 	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: {
@@ -2177,7 +2346,7 @@ const Preview = (props) => {
 			});
 		}
 	}
-};
+}
 
 //#endregion
 //#region src/views/panel/rule-edit/styles.ts
@@ -3237,6 +3406,12 @@ const WrapperError = (props) => {
 
 //#endregion
 //#region src/views/panel/rule-edit/HighlightCell.tsx
+const textOperators = new Set(Object.values(CFTextOperator));
+const numberOperators = new Set(Object.values(CFNumberOperator));
+const timePeriodOperators = new Set(Object.values(CFTimePeriodOperator));
+const isTextOperator = (value) => typeof value === "string" && textOperators.has(value);
+const isNumberOperator = (value) => typeof value === "string" && numberOperators.has(value);
+const isTimePeriodOperator = (value) => typeof value === "string" && timePeriodOperators.has(value);
 const createOptionItem = (text) => ({
 	label: `sheets-conditional-formatting-ui.operator.${text}`,
 	value: text
@@ -3478,81 +3653,66 @@ const HighlightCellStyleEditor = (props) => {
 		var _operatorOptions$;
 		const defaultV = (_operatorOptions$ = operatorOptions[0]) === null || _operatorOptions$ === void 0 ? void 0 : _operatorOptions$.value;
 		if (!rule) return defaultV;
-		return rule.operator || defaultV;
+		return "operator" in rule ? rule.operator : defaultV;
 	});
 	const [value, setValue] = useState(() => {
-		var _value2;
 		const defaultV = "";
 		if (!rule) return defaultV;
-		return (_value2 = rule.value) !== null && _value2 !== void 0 ? _value2 : createDefaultValue(rule.subType, rule.operator);
+		if ("value" in rule && rule.value !== void 0) return rule.value;
+		return "operator" in rule ? createDefaultValue(rule.subType, rule.operator) : defaultV;
 	});
 	const [style, setStyle] = useState({});
 	const getResult = useMemo(() => (option) => {
-		var _option$subType5, _option$operator4, _option$style5;
-		switch (option.subType || subType) {
-			case CFSubRuleType.duplicateValues:
-			case CFSubRuleType.uniqueValues:
-				var _option$subType, _option$style;
-				return {
-					type: CFRuleType.highlightCell,
-					subType: (_option$subType = option.subType) !== null && _option$subType !== void 0 ? _option$subType : subType,
-					style: (_option$style = option.style) !== null && _option$style !== void 0 ? _option$style : style
-				};
-			case CFSubRuleType.text:
-				if ([
-					CFTextOperator.beginsWith,
-					CFTextOperator.endsWith,
-					CFTextOperator.containsText,
-					CFTextOperator.notContainsText,
-					CFTextOperator.equal,
-					CFTextOperator.notEqual
-				].includes(operator)) {
-					var _option$subType2, _option$operator, _option$style2, _option$value;
-					return {
-						type: CFRuleType.highlightCell,
-						subType: (_option$subType2 = option.subType) !== null && _option$subType2 !== void 0 ? _option$subType2 : subType,
-						operator: (_option$operator = option.operator) !== null && _option$operator !== void 0 ? _option$operator : operator,
-						style: (_option$style2 = option.style) !== null && _option$style2 !== void 0 ? _option$style2 : style,
-						value: (_option$value = option.value) !== null && _option$value !== void 0 ? _option$value : value
-					};
-				}
-				break;
-			case CFSubRuleType.number:
-				if ([
-					CFNumberOperator.equal,
-					CFNumberOperator.notEqual,
-					CFNumberOperator.greaterThan,
-					CFNumberOperator.greaterThanOrEqual,
-					CFNumberOperator.lessThan,
-					CFNumberOperator.lessThanOrEqual
-				].includes(operator)) {
-					var _option$subType3, _option$operator2, _option$style3, _option$value2;
-					return {
-						type: CFRuleType.highlightCell,
-						subType: (_option$subType3 = option.subType) !== null && _option$subType3 !== void 0 ? _option$subType3 : subType,
-						operator: (_option$operator2 = option.operator) !== null && _option$operator2 !== void 0 ? _option$operator2 : operator,
-						style: (_option$style3 = option.style) !== null && _option$style3 !== void 0 ? _option$style3 : style,
-						value: (_option$value2 = option.value) !== null && _option$value2 !== void 0 ? _option$value2 : value
-					};
-				}
-				if ([CFNumberOperator.between, CFNumberOperator.notBetween].includes(operator)) {
-					var _option$subType4, _option$operator3, _option$style4, _option$value3;
+		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;
+		switch (nextSubType) {
+			case CFSubRuleType.duplicateValues: return {
+				type: CFRuleType.highlightCell,
+				subType: CFSubRuleType.duplicateValues,
+				style: nextStyle
+			};
+			case CFSubRuleType.uniqueValues: return {
+				type: CFRuleType.highlightCell,
+				subType: CFSubRuleType.uniqueValues,
+				style: nextStyle
+			};
+			case CFSubRuleType.text: return {
+				type: CFRuleType.highlightCell,
+				subType: CFSubRuleType.text,
+				operator: isTextOperator(nextOperator) ? nextOperator : CFTextOperator.containsText,
+				style: nextStyle,
+				value: typeof nextValue === "string" ? nextValue : void 0
+			};
+			case CFSubRuleType.timePeriod: return {
+				type: CFRuleType.highlightCell,
+				subType: CFSubRuleType.timePeriod,
+				operator: isTimePeriodOperator(nextOperator) ? nextOperator : CFTimePeriodOperator.today,
+				style: nextStyle
+			};
+			case CFSubRuleType.number: {
+				const numberOperator = isNumberOperator(nextOperator) ? nextOperator : CFNumberOperator.equal;
+				if (numberOperator === CFNumberOperator.between || numberOperator === CFNumberOperator.notBetween) {
+					const range = Array.isArray(nextValue) ? nextValue : [0, 100];
 					return {
 						type: CFRuleType.highlightCell,
-						subType: (_option$subType4 = option.subType) !== null && _option$subType4 !== void 0 ? _option$subType4 : subType,
-						operator: (_option$operator3 = option.operator) !== null && _option$operator3 !== void 0 ? _option$operator3 : operator,
-						style: (_option$style4 = option.style) !== null && _option$style4 !== void 0 ? _option$style4 : style,
-						value: (_option$value3 = option.value) !== null && _option$value3 !== void 0 ? _option$value3 : value
+						subType: CFSubRuleType.number,
+						operator: numberOperator,
+						style: nextStyle,
+						value: range
 					};
 				}
-				break;
+				return {
+					type: CFRuleType.highlightCell,
+					subType: CFSubRuleType.number,
+					operator: numberOperator,
+					style: nextStyle,
+					value: typeof nextValue === "number" ? nextValue : void 0
+				};
+			}
 		}
-		return {
-			type: CFRuleType.highlightCell,
-			subType: (_option$subType5 = option.subType) !== null && _option$subType5 !== void 0 ? _option$subType5 : subType,
-			operator: (_option$operator4 = option.operator) !== null && _option$operator4 !== void 0 ? _option$operator4 : operator,
-			style: (_option$style5 = option.style) !== null && _option$style5 !== void 0 ? _option$style5 : style
-		};
 	}, [
 		subType,
 		operator,
@@ -3568,8 +3728,9 @@ const HighlightCellStyleEditor = (props) => {
 		if (!typeOptions.some((item) => item.value === subType)) setSubType(typeOptions[0].value);
 	}, [typeOptions]);
 	const onTypeChange = (v) => {
-		var _operatorList$;
-		const _subType = v;
+		var _typeOptions$find, _operatorList$;
+		const _subType = (_typeOptions$find = typeOptions.find((item) => item.value === v)) === null || _typeOptions$find === void 0 ? void 0 : _typeOptions$find.value;
+		if (!_subType) return;
 		const _operator = (_operatorList$ = getOperatorOptions(_subType).map((option) => ({
 			...option,
 			label: localeService.t(option.label)
@@ -3583,7 +3744,9 @@ const HighlightCellStyleEditor = (props) => {
 		}));
 	};
 	const onOperatorChange = (v) => {
-		const _operator = v;
+		var _operatorOptions$find;
+		const _operator = (_operatorOptions$find = operatorOptions.find((item) => item.value === v)) === null || _operatorOptions$find === void 0 ? void 0 : _operatorOptions$find.value;
+		if (!_operator) return;
 		setOperator(_operator);
 		onChange(getResult({ operator: _operator }));
 	};
@@ -3591,9 +3754,6 @@ const HighlightCellStyleEditor = (props) => {
 		setValue(value);
 		onChange(getResult({ value }));
 	};
-	const inputRenderKey = useMemo(() => {
-		return `${subType}_${operator}_${Math.random()}`;
-	}, [subType, operator]);
 	return /* @__PURE__ */ jsxs("div", { children: [
 		/* @__PURE__ */ jsx("div", {
 			className: "univer-mt-4 univer-text-sm univer-text-gray-600 dark:!univer-text-gray-200",
@@ -3620,7 +3780,7 @@ const HighlightCellStyleEditor = (props) => {
 			operator,
 			rule,
 			onChange: onInputChange
-		}, inputRenderKey),
+		}, `${subType}_${operator}`),
 		/* @__PURE__ */ jsx("div", {
 			className: previewClassName,
 			children: /* @__PURE__ */ jsx(Preview, { rule: getResult({}) })
@@ -3688,34 +3848,34 @@ const createDefaultConfigItem = (iconType, index, list) => ({
 	iconType,
 	iconId: String(index)
 });
-const IconGroupList = forwardRef((props, ref) => {
-	const { onClick } = props;
+const IconGroupList = (props) => {
+	const { iconType, onClick } = props;
 	const localeService = useDependency(LocaleService);
-	const direction = useObservable(localeService.direction$, localeService.getDirection());
-	const handleClick = (iconType) => {
-		onClick(iconType);
-	};
 	return /* @__PURE__ */ jsx("div", {
-		ref,
-		dir: direction,
+		dir: useObservable(localeService.direction$, localeService.getDirection()),
 		className: "univer-w-80",
-		children: iconGroup.map((group, index) => {
+		children: iconGroup.map((group) => {
 			return /* @__PURE__ */ jsxs("div", {
-				className: "univer-mb-3",
+				className: "univer-mb-4 last:univer-mb-0",
 				children: [/* @__PURE__ */ jsx("div", {
-					className: "univer-mb-1 univer-text-sm",
+					className: "univer-mb-2 univer-px-1 univer-text-xs univer-font-medium univer-text-gray-500 dark:!univer-text-gray-400",
 					children: localeService.t(group.title)
 				}), /* @__PURE__ */ jsx("div", {
-					className: "univer-flex univer-flex-wrap",
-					children: group.group.map((groupItem) => {
-						return /* @__PURE__ */ jsx("div", {
-							className: "univer-mb-1 univer-flex univer-w-1/2 univer-items-center rtl:univer-flex-row-reverse rtl:univer-justify-end",
+					className: "univer-grid univer-grid-cols-2 univer-gap-1",
+					children: group.group.map((groupItem, groupItemIndex) => {
+						const selected = groupItem.name === iconType;
+						return /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": `${localeService.t(group.title)} ${groupItemIndex + 1}`,
+							"aria-pressed": selected,
+							className: clsx("univer-flex univer-h-8 univer-w-full univer-cursor-pointer univer-items-center univer-rounded-md univer-border-0 univer-bg-transparent univer-px-2 univer-outline-none univer-transition-colors focus-visible:univer-ring-2 focus-visible:univer-ring-primary-600 rtl:univer-flex-row-reverse", selected ? "univer-bg-primary-50 univer-ring-1 univer-ring-primary-600 dark:!univer-bg-primary-900" : "hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-700"),
 							onClick: () => {
-								handleClick(groupItem.name);
+								onClick(groupItem.name);
 							},
-							children: /* @__PURE__ */ jsx("a", {
-								className: "univer-flex univer-cursor-pointer univer-rounded hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-700",
+							children: /* @__PURE__ */ jsx("span", {
+								className: "univer-flex univer-items-center univer-gap-0.5",
 								children: groupItem.list.map((base64, index) => /* @__PURE__ */ jsx("img", {
+									alt: "",
 									className: "univer-size-5",
 									src: base64,
 									draggable: false
@@ -3724,10 +3884,10 @@ const IconGroupList = forwardRef((props, ref) => {
 						}, groupItem.name);
 					})
 				})]
-			}, index);
+			}, group.title);
 		})
 	});
-});
+};
 const IconItemList = (props) => {
 	const { onClick } = props;
 	const localeService = useDependency(LocaleService);
@@ -3879,7 +4039,7 @@ const IconSetRuleEdit = (props) => {
 										src: icon,
 										className: "univer-size-4",
 										draggable: false
-									}) : /* @__PURE__ */ jsx(SlashDoubleIcon, { className: "univer-size-4" }), /* @__PURE__ */ jsx(MoreDownIcon, {})]
+									}) : /* @__PURE__ */ jsx(SlashDoubleIcon, {}), /* @__PURE__ */ jsx(MoreDownIcon, {})]
 								})
 							})
 						}), !isEnd ? /* @__PURE__ */ jsx(Select, {
@@ -4065,9 +4225,6 @@ const IconSet = (props) => {
 		});
 		setConfigList([...configList]);
 	};
-	const layoutService = useDependency(ILayoutService);
-	const [iconGroupListEl, setIconGroupListEl] = useState();
-	useScrollYOverContainer(iconGroupListEl, layoutService.rootContainerElement);
 	return /* @__PURE__ */ jsxs("div", {
 		"data-u-comp": "cf-icon-set-editor",
 		dir: direction,
@@ -4081,11 +4238,8 @@ const IconSet = (props) => {
 				children: /* @__PURE__ */ jsx(Dropdown, {
 					overlay: /* @__PURE__ */ jsx("div", {
 						dir: direction,
-						className: "univer-rounded-lg univer-p-4",
+						className: "univer-rounded-lg univer-p-3",
 						children: /* @__PURE__ */ jsx(IconGroupList, {
-							ref: (el) => {
-								!iconGroupListEl && el && setIconGroupListEl(el);
-							},
 							iconType: currentIconType,
 							onClick: handleClickIconList
 						})
@@ -4188,34 +4342,36 @@ const RankStyleEditor = (props) => {
 	const [style, setStyle] = useState({});
 	const getResult = (config) => {
 		const { type, isPercent, value, style } = config;
-		if (type === "isNotBottom") return {
-			type: CFRuleType.highlightCell,
-			subType: CFSubRuleType.rank,
-			isPercent,
-			isBottom: false,
-			value,
-			style
-		};
-		if (type === "isBottom") return {
-			type: CFRuleType.highlightCell,
-			subType: CFSubRuleType.rank,
-			isPercent,
-			isBottom: true,
-			value,
-			style
-		};
-		if (type === "greaterThanAverage") return {
-			type: CFRuleType.highlightCell,
-			subType: CFSubRuleType.average,
-			operator: CFNumberOperator.greaterThan,
-			style
-		};
-		if (type === "lessThanAverage") return {
-			type: CFRuleType.highlightCell,
-			subType: CFSubRuleType.average,
-			operator: CFNumberOperator.lessThan,
-			style
-		};
+		switch (type) {
+			case "isNotBottom": return {
+				type: CFRuleType.highlightCell,
+				subType: CFSubRuleType.rank,
+				isPercent,
+				isBottom: false,
+				value,
+				style
+			};
+			case "isBottom": return {
+				type: CFRuleType.highlightCell,
+				subType: CFSubRuleType.rank,
+				isPercent,
+				isBottom: true,
+				value,
+				style
+			};
+			case "greaterThanAverage": return {
+				type: CFRuleType.highlightCell,
+				subType: CFSubRuleType.average,
+				operator: CFNumberOperator.greaterThan,
+				style
+			};
+			case "lessThanAverage": return {
+				type: CFRuleType.highlightCell,
+				subType: CFSubRuleType.average,
+				operator: CFNumberOperator.lessThan,
+				style
+			};
+		}
 	};
 	useEffect(() => {
 		return interceptorManager.intercept(interceptorManager.getInterceptPoints().submit, { handler() {
@@ -4246,13 +4402,17 @@ const RankStyleEditor = (props) => {
 			value: type,
 			options,
 			onChange: (v) => {
-				setType(v);
-				_onChange({
-					type: v,
-					isPercent,
-					value,
-					style
-				});
+				var _options$find;
+				const nextType = (_options$find = options.find((option) => option.value === v)) === null || _options$find === void 0 ? void 0 : _options$find.value;
+				if (nextType) {
+					setType(nextType);
+					_onChange({
+						type: nextType,
+						isPercent,
+						value,
+						style
+					});
+				}
 			}
 		}),
 		["isNotBottom", "isBottom"].includes(type) && /* @__PURE__ */ jsxs("div", {
@@ -4578,7 +4738,7 @@ const getRuleDescribe = (rule, localeService) => {
 		}
 	}
 };
-const RuleList = (props) => {
+function RuleList(props) {
 	const { onClick } = props;
 	const conditionalFormattingRuleModel = useDependency(ConditionalFormattingRuleModel);
 	const univerInstanceService = useDependency(IUniverInstanceService);
@@ -4589,12 +4749,9 @@ const RuleList = (props) => {
 	const conditionalFormattingI18nController = useDependency(ConditionalFormattingI18nController);
 	const workbook = useObservable(() => univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_SHEET), void 0, void 0, []);
 	const unitId = workbook.getUnitId();
-	const worksheet = workbook.getActiveSheet();
-	if (!worksheet) throw new Error("No active sheet found");
-	const subUnitId = worksheet.getSheetId();
+	const subUnitId = workbook.getActiveSheet().getSheetId();
 	const [currentRuleRanges, setCurrentRuleRanges] = useState([]);
 	const [selectValue, setSelectValue] = useState("2");
-	const [fetchRuleListId, setFetchRuleListId] = useState(0);
 	const [draggingId, setDraggingId] = useState("");
 	const selectOption = [{
 		label: localeService.t("sheets-conditional-formatting-ui.panel.workSheet"),
@@ -4616,25 +4773,8 @@ const RuleList = (props) => {
 		} else if (selectValue === "2") return [...ruleList];
 		return [];
 	};
-	const [ruleList, setRuleList] = useState(getRuleList);
-	useHighlightRange(currentRuleRanges);
-	useEffect(() => {
-		const disposable = commandService.onCommandExecuted((commandInfo) => {
-			if (commandInfo.id === SetWorksheetActiveOperation.id) setFetchRuleListId(Math.random());
-		});
-		return () => disposable.dispose();
-	});
-	useEffect(() => {
-		setRuleList(getRuleList);
-	}, [
-		selectValue,
-		fetchRuleListId,
-		unitId,
-		subUnitId
-	]);
-	useEffect(() => {
-		if (selectValue === "2") return;
-		const subscription = new Observable((commandSubscribe) => {
+	const ruleList = useObservable(() => {
+		const commandEvent$ = new Observable((subscriber) => {
 			const commandList = [
 				SetSelectionsOperation.id,
 				AddConditionalRuleMutation.id,
@@ -4643,29 +4783,25 @@ const RuleList = (props) => {
 				MoveConditionalRuleMutation.id
 			];
 			const disposable = commandService.onCommandExecuted((commandInfo) => {
-				const { id, params } = commandInfo;
-				const unitId = univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_SHEET).getUnitId();
-				if (commandList.includes(id) && params.unitId === unitId) commandSubscribe.next(null);
+				var _commandInfo$params;
+				if (commandInfo.id === SetWorksheetActiveOperation.id) {
+					subscriber.next("immediate");
+					return;
+				}
+				const commandUnitId = (_commandInfo$params = commandInfo.params) === null || _commandInfo$params === void 0 ? void 0 : _commandInfo$params.unitId;
+				if (selectValue === "1" && commandList.includes(commandInfo.id) && commandUnitId === unitId) subscriber.next("debounced");
 			});
 			return () => disposable.dispose();
-		}).pipe(debounceTime(16)).subscribe(() => {
-			setRuleList(getRuleList);
-		});
-		return () => {
-			subscription.unsubscribe();
-		};
-	}, [
-		univerInstanceService,
+		}).pipe(share());
+		return merge$1(conditionalFormattingRuleModel.$ruleChange, commandEvent$.pipe(filter((event) => event === "immediate")), commandEvent$.pipe(filter((event) => event === "debounced"), debounceTime(16))).pipe(map(getRuleList), startWith(getRuleList()));
+	}, [], false, [
+		commandService,
+		conditionalFormattingRuleModel,
 		selectValue,
-		unitId,
-		subUnitId
+		subUnitId,
+		unitId
 	]);
-	useEffect(() => {
-		const dispose = conditionalFormattingRuleModel.$ruleChange.subscribe(() => {
-			setFetchRuleListId(Math.random());
-		});
-		return () => dispose.unsubscribe();
-	}, [conditionalFormattingRuleModel]);
+	useHighlightRange(currentRuleRanges);
 	const handleDelete = (rule) => {
 		var _getActiveSheet;
 		const unitId = univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_SHEET).getUnitId();
@@ -4817,7 +4953,7 @@ const RuleList = (props) => {
 			]
 		})
 	}) })] });
-};
+}
 
 //#endregion
 //#region src/views/ConditionFormattingPanel.tsx
@@ -4877,7 +5013,11 @@ let ComponentsController = class ComponentsController extends Disposable {
 		this.disposeWithMe(this._componentManager.register(CF_PANEL_KEY, ConditionFormattingPanel));
 	}
 	_registerIcons() {
-		this.disposeWithMe(this._iconManager.register({ ConditionsDoubleIcon }));
+		this.disposeWithMe(this._iconManager.register({
+			ConditionsDoubleIcon,
+			DataBarIcon,
+			RatingIcon
+		}));
 	}
 };
 ComponentsController = __decorate([__decorateParam(0, Inject(ComponentManager)), __decorateParam(1, Inject(IconManager))], ComponentsController);
@@ -4961,6 +5101,7 @@ let UniverSheetsConditionalFormattingUIPlugin = class UniverSheetsConditionalFor
 			AddAverageCfCommand,
 			AddColorScaleConditionalRuleCommand,
 			AddDataBarConditionalRuleCommand,
+			AddIconSetConditionalRuleCommand,
 			AddDuplicateValuesCfCommand,
 			AddNumberCfCommand,
 			AddRankCfCommand,
@@ -4985,4 +5126,4 @@ UniverSheetsConditionalFormattingUIPlugin = __decorate([
 ], UniverSheetsConditionalFormattingUIPlugin);
 
 //#endregion
-export { AddAverageCfCommand, AddColorScaleConditionalRuleCommand, AddDataBarConditionalRuleCommand, AddDuplicateValuesCfCommand, AddNumberCfCommand, AddRankCfCommand, AddTextCfCommand, AddTimePeriodCfCommand, AddUniqueValuesCfCommand, ConditionalFormattingClearController, OpenConditionalFormattingOperator, menuSchema as SheetsConditionalFormattingUIMenuSchema, UniverSheetsConditionalFormattingMobileUIPlugin, UniverSheetsConditionalFormattingUIPlugin };
+export { AddAverageCfCommand, AddColorScaleConditionalRuleCommand, AddDataBarConditionalRuleCommand, AddDuplicateValuesCfCommand, AddIconSetConditionalRuleCommand, AddNumberCfCommand, AddRankCfCommand, AddTextCfCommand, AddTimePeriodCfCommand, AddUniqueValuesCfCommand, ConditionalFormattingClearController, OpenConditionalFormattingOperator, menuSchema as SheetsConditionalFormattingUIMenuSchema, UniverSheetsConditionalFormattingMobileUIPlugin, UniverSheetsConditionalFormattingUIPlugin };