@univerjs/sheets-conditional-formatting-ui 0.4.1 → 0.4.2-nightly.202410301606

package/lib/es/index.js

@@ -2,18 +2,17 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: !0 });
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key != "symbol" ? key + "" : key, value);
-import { CommandType, ICommandService, IUniverInstanceService, IUndoRedoService, ObjectMatrix, Range, sequenceExecute, ColorKit, BooleanNumber, Inject, LocaleService, Disposable, useDependency, Injector, UniverInstanceType, Rectangle, createInternalEditorID, Tools, get, set, createInterceptorKey, InterceptorManager, generateRandomId, InterceptorEffectEnum, toDisposable, DependentOn, Plugin, IConfigService, BuildTextUtils, registerDependencies, touchDependencies } from "@univerjs/core";
-import { ConditionalFormattingRuleModel, CFRuleType, CFSubRuleType, AddConditionalRuleMutation, CFNumberOperator, setConditionalRuleMutationUndoFactory, SetConditionalRuleMutation, DeleteConditionalRuleMutationUndoFactory, DeleteConditionalRuleMutation, transformSupportSymmetryAnchor, MoveConditionalRuleMutationUndoFactory, MoveConditionalRuleMutation, getColorScaleFromValue, iconMap, DEFAULT_BG_COLOR, DEFAULT_FONT_COLOR, defaultDataBarPositiveColor, defaultDataBarNativeColor, AddConditionalRuleMutationUndoFactory, CFValueType, createDefaultValueByValueType, SHEET_CONDITIONAL_FORMATTING_PLUGIN, removeUndefinedAttr, createDefaultValue, CFTextOperator, CFTimePeriodOperator, iconGroup, getOppositeOperator, compareWithNumber, EMPTY_ICON_TYPE, createDefaultRule, ConditionalFormattingService, ConditionalFormattingViewModel, DEFAULT_PADDING, DEFAULT_WIDTH, isRangesEqual, UniverSheetsConditionalFormattingPlugin } from "@univerjs/sheets-conditional-formatting";
-import { getSheetCommandTarget, SheetsSelectionsService, findAllRectangle, createTopMatrixFromMatrix, SetWorksheetActiveOperation, SetSelectionsOperation, checkRangesEditablePermission, RemoveSheetMutation, setEndForRange, SheetInterceptorService, INTERCEPTOR_POINT, RefRangeService, handleDefaultRangeChangeWithEffectRefCommands, WorkbookEditablePermission, RangeProtectionPermissionEditPoint, WorksheetEditPermission, WorksheetSetCellStylePermission, ClearSelectionFormatCommand, ClearSelectionAllCommand, RangeMergeUtil } from "@univerjs/sheets";
-import { useObservable, ComponentManager, ILayoutService, useScrollYOverContainer, ISidebarService, MenuItemType, getMenuHiddenObservable, RibbonStartGroup, IMenuManagerService } from "@univerjs/ui";
+import { CommandType, ICommandService, IUniverInstanceService, IUndoRedoService, ObjectMatrix, Range, sequenceExecute, ColorKit, BooleanNumber, Inject, LocaleService, Disposable, useDependency, Injector, UniverInstanceType, Rectangle, Tools, get, set, createInterceptorKey, InterceptorManager, generateRandomId, InterceptorEffectEnum, toDisposable, DependentOn, Plugin, IConfigService, BuildTextUtils, registerDependencies, touchDependencies } from "@univerjs/core";
+import { ConditionalFormattingRuleModel, CFRuleType, CFSubRuleType, AddConditionalRuleMutation, CFNumberOperator, setConditionalRuleMutationUndoFactory, SetConditionalRuleMutation, DeleteConditionalRuleMutationUndoFactory, DeleteConditionalRuleMutation, transformSupportSymmetryAnchor, MoveConditionalRuleMutationUndoFactory, MoveConditionalRuleMutation, getColorScaleFromValue, iconMap, DEFAULT_BG_COLOR, DEFAULT_FONT_COLOR, defaultDataBarPositiveColor, defaultDataBarNativeColor, AddConditionalRuleMutationUndoFactory, CFValueType, createDefaultValueByValueType, removeUndefinedAttr, createDefaultValue, CFTextOperator, CFTimePeriodOperator, iconGroup, getOppositeOperator, compareWithNumber, EMPTY_ICON_TYPE, createDefaultRule, ConditionalFormattingService, ConditionalFormattingViewModel, DEFAULT_PADDING, DEFAULT_WIDTH, SHEET_CONDITIONAL_FORMATTING_PLUGIN, isRangesEqual, UniverSheetsConditionalFormattingPlugin } from "@univerjs/sheets-conditional-formatting";
+import { getSheetCommandTarget, SheetsSelectionsService, findAllRectangle, createTopMatrixFromMatrix, SetWorksheetActiveOperation, SetSelectionsOperation, checkRangesEditablePermission, RemoveSheetMutation, setEndForRange, SheetInterceptorService, INTERCEPTOR_POINT, RefRangeService, handleDefaultRangeChangeWithEffectRefCommands, WorkbookEditablePermission, RangeProtectionPermissionEditPoint, WorksheetEditPermission, WorksheetSetCellStylePermission, ClearSelectionFormatCommand, ClearSelectionAllCommand, RangeMergeUtil, AFTER_CELL_EDIT } from "@univerjs/sheets";
+import { useObservable, ComponentManager, useSidebarClick, ILayoutService, useScrollYOverContainer, ISidebarService, MenuItemType, getMenuHiddenObservable, RibbonStartGroup, IMenuManagerService } from "@univerjs/ui";
 import require$$0, { forwardRef, useRef, createElement, useMemo, useState, useEffect } from "react";
 import { Select, Tooltip, Dropdown, ColorPicker as ColorPicker$1, InputNumber, RadioGroup, Radio, Checkbox, Input, Button } from "@univerjs/design";
-import { useHighlightRange, SheetSkeletonManagerService, ISheetClipboardService, COPY_TYPE, rangeToDiscreteRange, PREDEFINED_HOOK_NAME, virtualizeDiscreteRanges, getRepeatRange, SheetPermissionInterceptorBaseController, IAutoFillService, APPLY_TYPE, getAutoFillRepeatRange, IEditorBridgeService, getCurrentRangeDisable$, IFormatPainterService, FormatPainterStatus } from "@univerjs/sheets-ui";
+import { useHighlightRange, SheetSkeletonManagerService, ISheetClipboardService, COPY_TYPE, rangeToDiscreteRange, PREDEFINED_HOOK_NAME, virtualizeDiscreteRanges, getRepeatRange, SheetPermissionInterceptorBaseController, IAutoFillService, APPLY_TYPE, getAutoFillRepeatRange, getCurrentRangeDisable$, IFormatPainterService, FormatPainterStatus } from "@univerjs/sheets-ui";
 import { serializeRange, deserializeRangeWithSheet } from "@univerjs/engine-formula";
 import require$$2$1 from "react-dom";
 import { Observable, debounceTime, merge } from "rxjs";
-import { RangeSelector } from "@univerjs/sheets-formula-ui";
-import { TextEditor } from "@univerjs/docs-ui";
+import { FormulaEditor, RangeSelector } from "@univerjs/sheets-formula-ui";
 import { IRenderManagerService } from "@univerjs/engine-render";
 import { bufferTime, filter, debounceTime as debounceTime$1 } from "rxjs/operators";
 const AddAverageCfCommand = {
@@ -4939,22 +4938,25 @@ const RuleList = /* @__PURE__ */ __name((props) => {
   } : {
     min: Number.MIN_SAFE_INTEGER,
     max: Number.MAX_SAFE_INTEGER
-  }, [type2]);
-  return type2 === CFValueType.formula ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-    TextEditor,
+  }, [type2]), formulaEditorActionsRef = useRef({}), [isFocusFormulaEditor, isFocusFormulaEditorSet] = useState(!1);
+  return useSidebarClick((e2) => {
+    var _a16;
+    const handleOutClick = (_a16 = formulaEditorActionsRef.current) == null ? void 0 : _a16.handleOutClick;
+    handleOutClick && handleOutClick(e2, () => isFocusFormulaEditorSet(!1));
+  }), type2 === CFValueType.formula ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", marginLeft: 4 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    FormulaEditor,
     {
-      openForSheetSubUnitId: subUnitId,
-      openForSheetUnitId: unitId,
-      id: createInternalEditorID(`${SHEET_CONDITIONAL_FORMATTING_PLUGIN}_colo_scale_${id}`),
-      value: formulaInitValue,
-      style: { maxWidth: "50%", marginLeft: 4 },
-      canvasStyle: { fontSize: 10 },
-      onlyInputFormula: !0,
+      initValue: formulaInitValue,
+      unitId,
+      subUnitId,
+      isFocus: isFocusFormulaEditor,
       onChange: /* @__PURE__ */ __name((v = "") => {
         onChange(v || "");
-      }, "onChange")
+      }, "onChange"),
+      onFocus: /* @__PURE__ */ __name(() => isFocusFormulaEditorSet(!0), "onFocus"),
+      actions: formulaEditorActionsRef.current
     }
-  ) : /* @__PURE__ */ jsxRuntimeExports.jsx(InputNumber, { className, value: Number(props.value) || 0, onChange: /* @__PURE__ */ __name((v) => props.onChange(v || 0), "onChange"), ...config });
+  ) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(InputNumber, { className, value: Number(props.value) || 0, onChange: /* @__PURE__ */ __name((v) => props.onChange(v || 0), "onChange"), ...config });
 }, "TextInput$1"), ColorScaleStyleEditor = /* @__PURE__ */ __name((props) => {
   var _a15;
   const { interceptorManager } = props, localeService = useDependency(LocaleService), rule = ((_a15 = props.rule) == null ? void 0 : _a15.type) === CFRuleType.colorScale ? props.rule : void 0, commonOptions = [createOptionItem$2(CFValueType.num, localeService), createOptionItem$2(CFValueType.percent, localeService), createOptionItem$2(CFValueType.percentile, localeService), createOptionItem$2(CFValueType.formula, localeService)], minOptions = [createOptionItem$2(CFValueType.min, localeService), ...commonOptions], medianOptions = [createOptionItem$2("none", localeService), ...commonOptions], maxOptions = [createOptionItem$2(CFValueType.max, localeService), ...commonOptions], [minType, minTypeSet] = useState(() => {
@@ -5028,6 +5030,7 @@ const RuleList = /* @__PURE__ */ __name((props) => {
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         Select,
         {
+          style: { flexShrink: 0 },
           options: minOptions,
           value: minType,
           onChange: /* @__PURE__ */ __name((v) => {
@@ -5065,6 +5068,7 @@ const RuleList = /* @__PURE__ */ __name((props) => {
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         Select,
         {
+          style: { flexShrink: 0 },
           options: medianOptions,
           value: medianType,
           onChange: /* @__PURE__ */ __name((v) => {
@@ -5102,6 +5106,7 @@ const RuleList = /* @__PURE__ */ __name((props) => {
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         Select,
         {
+          style: { flexShrink: 0 },
           options: maxOptions,
           value: maxType,
           onChange: /* @__PURE__ */ __name((v) => {
@@ -5137,7 +5142,13 @@ const RuleList = /* @__PURE__ */ __name((props) => {
   ] });
 }, "ColorScaleStyleEditor"), createOptionItem$1 = /* @__PURE__ */ __name((text2, localeService) => ({ label: localeService.t(`sheet.cf.valueType.${text2}`), value: text2 }), "createOptionItem$1"), InputText = /* @__PURE__ */ __name((props) => {
   var _a15;
-  const { onChange, className, value, type: type2, id, disabled: disabled2 = !1 } = props, univerInstanceService = useDependency(IUniverInstanceService), unitId = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getUnitId(), subUnitId = (_a15 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getActiveSheet()) == null ? void 0 : _a15.getSheetId(), _value = useRef(value), config = useMemo(() => [CFValueType.percentile, CFValueType.percent].includes(type2) ? {
+  const { onChange, className, value, type: type2, id, disabled: disabled2 = !1 } = props, univerInstanceService = useDependency(IUniverInstanceService), unitId = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getUnitId(), subUnitId = (_a15 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getActiveSheet()) == null ? void 0 : _a15.getSheetId(), formulaEditorActionsRef = useRef({}), [isFocusFormulaEditor, isFocusFormulaEditorSet] = useState(!1);
+  useSidebarClick((e2) => {
+    var _a16;
+    const handleOutClick = (_a16 = formulaEditorActionsRef.current) == null ? void 0 : _a16.handleOutClick;
+    handleOutClick && handleOutClick(e2, () => isFocusFormulaEditorSet(!1));
+  });
+  const _value = useRef(value), config = useMemo(() => [CFValueType.percentile, CFValueType.percent].includes(type2) ? {
     max: 100,
     min: 0
   } : {
@@ -5146,21 +5157,20 @@ const RuleList = /* @__PURE__ */ __name((props) => {
   }, [type2]);
   if (type2 === CFValueType.formula) {
     const v = String(_value.current).startsWith("=") ? String(_value.current) || "" : "=";
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      TextEditor,
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%", marginLeft: 12 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      FormulaEditor,
       {
-        id: createInternalEditorID(`${SHEET_CONDITIONAL_FORMATTING_PLUGIN}_data_bar_${id}`),
-        value: v,
-        openForSheetSubUnitId: subUnitId,
-        openForSheetUnitId: unitId,
-        style: { width: "47%", marginLeft: 14 },
-        canvasStyle: { fontSize: 10 },
-        onlyInputFormula: !0,
+        initValue: v,
+        unitId,
+        subUnitId,
+        isFocus: isFocusFormulaEditor,
         onChange: /* @__PURE__ */ __name((v2 = "") => {
           onChange(v2 || "");
-        }, "onChange")
+        }, "onChange"),
+        onFocus: /* @__PURE__ */ __name(() => isFocusFormulaEditorSet(!0), "onFocus"),
+        actions: formulaEditorActionsRef.current
       }
-    );
+    ) });
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     InputNumber,
@@ -5289,6 +5299,7 @@ const RuleList = /* @__PURE__ */ __name((props) => {
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           Select,
           {
+            style: { width: "50%", flexShrink: 0 },
             options: minOptions,
             value: minValueType,
             onChange: /* @__PURE__ */ __name((v) => {
@@ -5317,6 +5328,7 @@ const RuleList = /* @__PURE__ */ __name((props) => {
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           Select,
           {
+            style: { width: "50%", flexShrink: 0 },
             options: maxOptions,
             value: maxValueType,
             onChange: /* @__PURE__ */ __name((v) => {
@@ -5398,24 +5410,9 @@ const cfStyleEdit = "univer-cf-style-edit", buttonItem = "univer-button-item", i
     /* @__PURE__ */ jsxRuntimeExports.jsx(ColorPicker, { color: fontColor, onChange: fontColorSet, iconId: "FontColor" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(ColorPicker, { color: bgColor, onChange: bgColorSet, iconId: "PaintBucket" })
   ] });
-}, "ConditionalStyleEditor"), WrapperError = /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { position: "relative" }, children: [
-  /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        zIndex: 999,
-        bottom: "-13px",
-        fontSize: "10px",
-        color: "red"
-      },
-      children: props.errorText
-    }
-  ),
-  props.children
-] }), "WrapperError"), FormulaStyleEditor = /* @__PURE__ */ __name((props) => {
+}, "ConditionalStyleEditor"), FormulaStyleEditor = /* @__PURE__ */ __name((props) => {
   var _a15;
-  const { onChange, interceptorManager } = props, localeService = useDependency(LocaleService), workbook = useDependency(IUniverInstanceService).getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET), worksheet = workbook.getActiveSheet(), rule = ((_a15 = props.rule) == null ? void 0 : _a15.type) === CFRuleType.highlightCell ? props.rule : void 0, [style, styleSet] = useState({}), [formula, formulaSet] = useState(() => (rule == null ? void 0 : rule.subType) === CFSubRuleType.formula ? rule.value : "="), [formulaError, formulaErrorSet] = useState(""), getResult = /* @__PURE__ */ __name((config) => ({
+  const { onChange, interceptorManager } = props, localeService = useDependency(LocaleService), workbook = useDependency(IUniverInstanceService).getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET), worksheet = workbook.getActiveSheet(), rule = ((_a15 = props.rule) == null ? void 0 : _a15.type) === CFRuleType.highlightCell ? props.rule : void 0, divEleRef = useRef(null), [isFocusFormulaEditor, isFocusFormulaEditorSet] = useState(!1), formulaEditorActionsRef = useRef({}), [style, styleSet] = useState({}), [formula, formulaSet] = useState(() => (rule == null ? void 0 : rule.subType) === CFSubRuleType.formula ? rule.value : "="), [formulaError, formulaErrorSet] = useState(void 0), getResult = /* @__PURE__ */ __name((config) => ({
     style: config.style,
     value: formula,
     type: CFRuleType.highlightCell,
@@ -5426,28 +5423,37 @@ const cfStyleEdit = "univer-cf-style-edit", buttonItem = "univer-button-item", i
       return getResult({ style, formula });
     }
   }), [style, formula, interceptorManager]), useEffect(() => interceptorManager.intercept(interceptorManager.getInterceptPoints().beforeSubmit, {
-    handler: /* @__PURE__ */ __name((v, _c, next) => !formula || formula.length === 1 || !formula.startsWith("=") ? (formulaErrorSet(localeService.t("sheet.cf.errorMessage.formulaError")), !1) : next(v), "handler")
-  }), [formula]);
+    handler: /* @__PURE__ */ __name((v, _c, next) => formulaError || formula.length === 1 || !formula.startsWith("=") ? (formulaErrorSet(localeService.t("sheet.cf.errorMessage.formulaError")), !1) : next(v), "handler")
+  }), [formulaError, formula]);
   const _onChange = /* @__PURE__ */ __name((config) => {
     onChange(getResult(config));
   }, "_onChange");
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+  return useSidebarClick((e2) => {
+    var _a16;
+    const handleOutClick = (_a16 = formulaEditorActionsRef.current) == null ? void 0 : _a16.handleOutClick;
+    handleOutClick && handleOutClick(e2, () => isFocusFormulaEditorSet(!1));
+  }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: divEleRef, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$5.title} ${styles$5.mTBase}`, children: localeService.t("sheet.cf.panel.styleRule") }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$5.mTSm}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(WrapperError, { errorText: formulaError, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      TextEditor,
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$5.mTSm}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      FormulaEditor,
       {
-        id: createInternalEditorID(`${SHEET_CONDITIONAL_FORMATTING_PLUGIN}_formula`),
-        openForSheetSubUnitId: worksheet == null ? void 0 : worksheet.getSheetId(),
-        openForSheetUnitId: workbook.getUnitId(),
-        value: formula,
-        canvasStyle: { fontSize: 10 },
-        onlyInputFormula: !0,
-        onChange: /* @__PURE__ */ __name((v = "") => {
-          const formula2 = v || "";
-          formulaSet(formula2), _onChange({ style, formula: formula2 }), formulaErrorSet("");
-        }, "onChange")
+        onChange: /* @__PURE__ */ __name((formula2) => {
+          formulaSet(formula2), _onChange({ style, formula: formula2 });
+        }, "onChange"),
+        onVerify: /* @__PURE__ */ __name((result, formula2) => {
+          !result || formula2.length === 1 ? formulaErrorSet(localeService.t("sheet.cf.errorMessage.formulaError")) : formulaErrorSet(void 0);
+        }, "onVerify"),
+        errorText: formulaError,
+        onFocus: /* @__PURE__ */ __name(() => {
+          isFocusFormulaEditorSet(!0);
+        }, "onFocus"),
+        actions: formulaEditorActionsRef.current,
+        isFocus: isFocusFormulaEditor,
+        initValue: formula,
+        unitId: workbook.getUnitId(),
+        subUnitId: worksheet == null ? void 0 : worksheet.getSheetId()
       }
-    ) }) }),
+    ) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$1.cfPreviewWrap} `, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Preview, { rule: getResult({ style, formula }) }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       ConditionalStyleEditor,
@@ -5460,7 +5466,22 @@ const cfStyleEdit = "univer-cf-style-edit", buttonItem = "univer-button-item", i
       }
     )
   ] });
-}, "FormulaStyleEditor"), createOptionItem = /* @__PURE__ */ __name((text2, localeService) => ({ label: localeService.t(`sheet.cf.operator.${text2}`), value: text2 }), "createOptionItem"), HighlightCellInput = /* @__PURE__ */ __name((props) => {
+}, "FormulaStyleEditor"), WrapperError = /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { position: "relative" }, children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        zIndex: 999,
+        bottom: "-13px",
+        fontSize: "10px",
+        color: "red"
+      },
+      children: props.errorText
+    }
+  ),
+  props.children
+] }), "WrapperError"), createOptionItem = /* @__PURE__ */ __name((text2, localeService) => ({ label: localeService.t(`sheet.cf.operator.${text2}`), value: text2 }), "createOptionItem"), HighlightCellInput = /* @__PURE__ */ __name((props) => {
   const { type: type2, operator, onChange, value, interceptorManager } = props, localeService = useDependency(LocaleService), [inputNumberValue, inputNumberValueSet] = useState(() => typeof value == "number" ? value : 0), [numberError, numberErrorSet] = useState(""), [inputTextValue, inputTextValueSet] = useState(() => typeof value == "string" ? value : ""), [textError, textErrorSet] = useState(""), [inputNumberMin, inputNumberMinSet] = useState(() => Array.isArray(value) ? value[0] === void 0 ? 0 : value[0] : 0), [numberMinError, numberMinErrorSet] = useState(""), [inputNumberMax, inputNumberMaxSet] = useState(() => Array.isArray(value) ? value[1] === void 0 ? 100 : value[1] : 100), [numberMaxError, numberMaxErrorSet] = useState("");
   switch (useEffect(() => {
     switch (type2) {
@@ -5725,25 +5746,29 @@ const cfStyleEdit = "univer-cf-style-edit", buttonItem = "univer-button-item", i
   ] });
 }, "HighlightCellStyleEditor"), getIcon = /* @__PURE__ */ __name((iconType, iconId) => (iconMap[iconType] || [])[Number(iconId)] || "", "getIcon"), TextInput = /* @__PURE__ */ __name((props) => {
   var _a15;
-  const univerInstanceService = useDependency(IUniverInstanceService), unitId = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getUnitId(), subUnitId = (_a15 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getActiveSheet()) == null ? void 0 : _a15.getSheetId(), className = useMemo(() => props.error ? styles$1.errorInput : "", [props.error]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$1.positionRelative, children: props.type !== CFValueType.formula ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+  const univerInstanceService = useDependency(IUniverInstanceService), unitId = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getUnitId(), subUnitId = (_a15 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getActiveSheet()) == null ? void 0 : _a15.getSheetId(), className = useMemo(() => props.error ? styles$1.errorInput : "", [props.error]), formulaEditorActionsRef = useRef({}), [isFocusFormulaEditor, isFocusFormulaEditorSet] = useState(!1);
+  return useSidebarClick((e2) => {
+    var _a16;
+    const handleOutClick = (_a16 = formulaEditorActionsRef.current) == null ? void 0 : _a16.handleOutClick;
+    handleOutClick && handleOutClick(e2, () => isFocusFormulaEditorSet(!1));
+  }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$1.positionRelative, children: props.type !== CFValueType.formula ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(InputNumber, { className, value: Number(props.value) || 0, onChange: /* @__PURE__ */ __name((v) => props.onChange(v != null ? v : 0), "onChange") }),
     props.error && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$1.errorText, children: props.error })
-  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-    TextEditor,
+  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: "100%" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    FormulaEditor,
     {
-      id: createInternalEditorID(`${SHEET_CONDITIONAL_FORMATTING_PLUGIN}_icon_set_${props.id}`),
-      value: String(props.value).startsWith("=") ? String(props.value) : "=",
-      openForSheetSubUnitId: subUnitId,
-      openForSheetUnitId: unitId,
-      canvasStyle: { fontSize: 10 },
-      onlyInputFormula: !0,
+      initValue: String(props.value),
+      unitId,
+      subUnitId,
+      isFocus: isFocusFormulaEditor,
       onChange: /* @__PURE__ */ __name((v = "") => {
         const formula = v || "";
         props.onChange(formula);
-      }, "onChange")
+      }, "onChange"),
+      onFocus: /* @__PURE__ */ __name(() => isFocusFormulaEditorSet(!0), "onFocus"),
+      actions: formulaEditorActionsRef.current
     }
-  ) });
+  ) }) });
 }, "TextInput"), createDefaultConfigItem = /* @__PURE__ */ __name((iconType, index2, list) => ({
   operator: CFNumberOperator.greaterThan,
   value: { type: CFValueType.num, value: (list.length - 1 - index2) * 10 },
@@ -5800,6 +5825,8 @@ const cfStyleEdit = "univer-cf-style-edit", buttonItem = "univer-button-item", i
     handleValueValueChange(defaultValue, index2);
   }, "handleOperatorChange"), handleValueTypeChange = /* @__PURE__ */ __name((v, index2) => {
     onChange([String(index2), "value", "type"], v);
+    const item2 = configList[index2], defaultValue = createDefaultValue(CFSubRuleType.number, item2.operator);
+    handleValueValueChange(defaultValue, index2);
   }, "handleValueTypeChange");
   return useMemo(() => configList.map((item2, index2) => {
     const error = errorMap[index2], icon2 = getIcon(item2.iconType, item2.iconId), isEnd = index2 === configList.length - 1, isFirst = index2 === 0, preItem = configList[index2 - 1], lessThanText = (preItem == null ? void 0 : preItem.value.type) === CFValueType.formula ? localeService.t("sheet.cf.valueType.formula") : preItem == null ? void 0 : preItem.value.value, handleIconClick = /* @__PURE__ */ __name((iconType, iconId) => {
@@ -5849,9 +5876,18 @@ const cfStyleEdit = "univer-cf-style-edit", buttonItem = "univer-button-item", i
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$1.width45}`, children: localeService.t("sheet.cf.iconSet.value") })
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${styles$5.mTSm} ${styles$1.flex}`, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Select, { className: `${styles$1.width45} ${styles$5.mL0}`, options: valueTypeOptions, value: item2.value.type, onChange: /* @__PURE__ */ __name((v) => {
-            handleValueTypeChange(v, index2);
-          }, "onChange") }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Select,
+            {
+              style: { flexShrink: 0 },
+              className: `${styles$1.width45} ${styles$5.mL0}`,
+              options: valueTypeOptions,
+              value: item2.value.type,
+              onChange: /* @__PURE__ */ __name((v) => {
+                handleValueTypeChange(v, index2);
+              }, "onChange")
+            }
+          ),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$5.mL0} ${styles$1.width45}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(TextInput, { id: index2, type: item2.value.type, error, value: item2.value.value || "", onChange: /* @__PURE__ */ __name((v) => handleValueValueChange(v, index2), "onChange") }) })
         ] })
       ] })
@@ -5908,16 +5944,20 @@ const cfStyleEdit = "univer-cf-style-edit", buttonItem = "univer-button-item", i
     configListSet(config), errorMapSet(checkResult(config));
   }, "handleClickIconList");
   useEffect(() => {
-    const dispose = interceptorManager.intercept(interceptorManager.getInterceptPoints().submit, { handler() {
-      return { type: CFRuleType.iconSet, isShowValue, config: configList };
-    } });
+    const dispose = interceptorManager.intercept(interceptorManager.getInterceptPoints().submit, {
+      handler() {
+        return { type: CFRuleType.iconSet, isShowValue, config: configList };
+      }
+    });
     return () => {
       dispose();
     };
   }, [isShowValue, configList, interceptorManager]), useEffect(() => {
-    const dispose = interceptorManager.intercept(interceptorManager.getInterceptPoints().beforeSubmit, { handler() {
-      return Object.keys(errorMap).length === 0;
-    } });
+    const dispose = interceptorManager.intercept(interceptorManager.getInterceptPoints().beforeSubmit, {
+      handler() {
+        return Object.keys(errorMap).length === 0;
+      }
+    });
     return () => {
       dispose();
     };
@@ -6069,10 +6109,7 @@ const cfStyleEdit = "univer-cf-style-edit", buttonItem = "univer-button-item", i
   return (_a15 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getActiveSheet()) == null ? void 0 : _a15.getSheetId();
 }, "getSubUnitId"), RuleEdit = /* @__PURE__ */ __name((props) => {
   var _a15, _b, _c;
-  const localeService = useDependency(LocaleService), commandService = useDependency(ICommandService), univerInstanceService = useDependency(IUniverInstanceService), conditionalFormattingRuleModel = useDependency(ConditionalFormattingRuleModel), selectionManagerService = useDependency(SheetsSelectionsService), unitId = getUnitId(univerInstanceService), subUnitId = getSubUnitId(univerInstanceService), [isFocusRangeSelector, isFocusRangeSelectorSet] = useState(() => {
-    const { rule } = props;
-    return (rule == null ? void 0 : rule.rule.type) === CFRuleType.highlightCell ? rule.rule.subType !== CFSubRuleType.formula : !0;
-  }), rangeSelectorActionsRef = useRef({}), [errorText2, errorTextSet] = useState(void 0), rangeResult = useRef((_b = (_a15 = props.rule) == null ? void 0 : _a15.ranges) != null ? _b : []), rangeString = useMemo(() => {
+  const localeService = useDependency(LocaleService), commandService = useDependency(ICommandService), univerInstanceService = useDependency(IUniverInstanceService), conditionalFormattingRuleModel = useDependency(ConditionalFormattingRuleModel), selectionManagerService = useDependency(SheetsSelectionsService), unitId = getUnitId(univerInstanceService), subUnitId = getSubUnitId(univerInstanceService), [isFocusRangeSelector, isFocusRangeSelectorSet] = useState(!0), rangeSelectorActionsRef = useRef({}), [errorText2, errorTextSet] = useState(void 0), rangeResult = useRef((_b = (_a15 = props.rule) == null ? void 0 : _a15.ranges) != null ? _b : []), rangeString = useMemo(() => {
     var _a16, _b2, _c2;
     let ranges = (_a16 = props.rule) == null ? void 0 : _a16.ranges;
     return ranges != null && ranges.length || (ranges = (_c2 = (_b2 = selectionManagerService.getCurrentSelections()) == null ? void 0 : _b2.map((s) => s.range)) != null ? _c2 : []), rangeResult.current = ranges, ranges != null && ranges.length ? ranges.map((range) => {
@@ -6147,7 +6184,7 @@ const cfStyleEdit = "univer-cf-style-edit", buttonItem = "univer-button-item", i
   const onStyleChange = /* @__PURE__ */ __name((config) => {
     result.current = config;
   }, "onStyleChange"), onRangeSelectorChange = /* @__PURE__ */ __name((rangeString2) => {
-    const result2 = rangeString2.split(",").map(deserializeRangeWithSheet).map((item2) => item2.range);
+    const result2 = rangeString2.split(",").filter((e2) => !!e2).map(deserializeRangeWithSheet).map((item2) => item2.range);
     rangeResult.current = result2;
   }, "onRangeSelectorChange"), handleSubmit = /* @__PURE__ */ __name(() => {
     if (errorText2)
@@ -6172,12 +6209,12 @@ const cfStyleEdit = "univer-cf-style-edit", buttonItem = "univer-button-item", i
     props.onCancel();
   }, "handleCancel"), handleVerify = /* @__PURE__ */ __name((v, rangeText) => {
     v ? rangeText.length < 1 ? errorTextSet(localeService.t("sheet.cf.errorMessage.rangeError")) : errorTextSet(void 0) : errorTextSet(localeService.t("sheet.cf.errorMessage.rangeError"));
-  }, "handleVerify"), handlePanelClick = /* @__PURE__ */ __name((e2) => {
+  }, "handleVerify");
+  return useSidebarClick((e2) => {
     var _a16;
     const handleOutClick = (_a16 = rangeSelectorActionsRef.current) == null ? void 0 : _a16.handleOutClick;
-    handleOutClick && handleOutClick(e2, isFocusRangeSelectorSet);
-  }, "handlePanelClick");
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.cfRuleStyleEditor, onClick: handlePanelClick, children: [
+    handleOutClick && handleOutClick(e2, () => isFocusRangeSelectorSet(!1));
+  }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.cfRuleStyleEditor, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$5.title, children: localeService.t("sheet.cf.panel.range") }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$5.mTBase}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       RangeSelector,
@@ -6188,6 +6225,7 @@ const cfStyleEdit = "univer-cf-style-edit", buttonItem = "univer-button-item", i
         initValue: rangeString,
         onChange: onRangeSelectorChange,
         onVerify: handleVerify,
+        onFocus: /* @__PURE__ */ __name(() => isFocusRangeSelectorSet(!0), "onFocus"),
         isFocus: isFocusRangeSelector,
         actions: rangeSelectorActionsRef.current
       }
@@ -7011,8 +7049,8 @@ var __defProp$3 = Object.defineProperty, __getOwnPropDesc$3 = Object.getOwnPrope
   return kind && result && __defProp$3(target, key, result), result;
 }, "__decorateClass$3"), __decorateParam$3 = /* @__PURE__ */ __name((index2, decorator) => (target, key) => decorator(target, key, index2), "__decorateParam$3"), _a11;
 let ConditionalFormattingEditorController = (_a11 = class extends Disposable {
-  constructor(_editorBridgeService, _conditionalFormattingService) {
-    super(), this._editorBridgeService = _editorBridgeService, this._conditionalFormattingService = _conditionalFormattingService, this._initInterceptorEditorEnd();
+  constructor(_sheetInterceptorService, _conditionalFormattingService) {
+    super(), this._sheetInterceptorService = _sheetInterceptorService, this._conditionalFormattingService = _conditionalFormattingService, this._initInterceptorEditorEnd();
   }
   /**
    * Process the  values after  edit
@@ -7022,8 +7060,8 @@ let ConditionalFormattingEditorController = (_a11 = class extends Disposable {
   _initInterceptorEditorEnd() {
     this.disposeWithMe(
       toDisposable(
-        this._editorBridgeService.interceptor.intercept(
-          this._editorBridgeService.interceptor.getInterceptPoints().AFTER_CELL_EDIT,
+        this._sheetInterceptorService.writeCellInterceptor.intercept(
+          AFTER_CELL_EDIT,
           {
             handler: /* @__PURE__ */ __name((value, context, next) => {
               var _a15, _b;
@@ -7048,7 +7086,7 @@ let ConditionalFormattingEditorController = (_a11 = class extends Disposable {
   }
 }, __name(_a11, "ConditionalFormattingEditorController"), _a11);
 ConditionalFormattingEditorController = __decorateClass$3([
-  __decorateParam$3(0, Inject(IEditorBridgeService)),
+  __decorateParam$3(0, Inject(SheetInterceptorService)),
   __decorateParam$3(1, Inject(ConditionalFormattingService))
 ], ConditionalFormattingEditorController);
 const commandList = [

package/lib/index.css

@@ -1 +1 @@
-.univer-conditional-formatting-wrap{height:100%;display:flex;flex-direction:column;justify-content:space-between}.univer-conditional-formatting-wrap .univer-cf-rule-item{display:flex;justify-content:space-between;align-items:center}.univer-conditional-formatting-wrap .univer-cf-rule-item .univer-preview{flex-shrink:0}.univer-conditional-formatting-wrap .univer-create-rule{margin-bottom:20px}.univer-conditional-formatting-wrap .univer-create-rule .univer-button{border:1px solid rgb(var(--border-color));border-radius:var(--border-radius-base);display:flex;align-items:center;justify-content:center;padding:var(--padding-base);cursor:pointer;font-size:var(--font-size-sm)}.univer-conditional-formatting-wrap .univer-title{margin-top:var(--margin-base);font-size:15px;color:rgb(var(--text-color-secondary))}.univer-conditional-formatting-wrap .univer-label{font-size:12px;margin-top:var(--margin-sm);color:rgb(var(--text-color-secondary))}.univer-conditional-formatting-wrap .univer-label-container{display:flex;align-items:center}.univer-conditional-formatting-wrap .univer-label-container .univer-input-width{width:100px}.univer-conditional-formatting-wrap .univer-m-t-base{margin-top:var(--margin-base)}.univer-conditional-formatting-wrap .univer-m-t-sm{margin-top:var(--margin-sm)}.univer-conditional-formatting-wrap .univer-m-t-xl{margin-top:var(--margin-xl)}.univer-conditional-formatting-wrap .univer-m-l-sm{margin-left:var(--margin-sm)}.univer-conditional-formatting-wrap .univer-m-l-xl{margin-left:var(--margin-xl)}.univer-conditional-formatting-wrap .univer-m-l-xxs{margin-left:var(--margin-xxs)}.univer-conditional-formatting-wrap .univer-m-l-0{margin-left:0}.univer-conditional-formatting-wrap .univer-m-r-0{margin-right:0}.react-grid-layout{position:relative;transition:height .2s ease}.react-grid-item{transition:all .2s ease;transition-property:left,top,width,height}.react-grid-item img{pointer-events:none;user-select:none}.react-grid-item.cssTransforms{transition-property:transform,width,height}.react-grid-item.resizing{transition:none;z-index:1;will-change:width,height}.react-grid-item.react-draggable-dragging{transition:none;z-index:3;will-change:transform}.react-grid-item.dropping{visibility:hidden}.react-grid-item.react-grid-placeholder{background:red;opacity:.2;transition-duration:.1s;z-index:2;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.react-grid-item.react-grid-placeholder.placeholder-resizing{transition:none}.react-grid-item>.react-resizable-handle{position:absolute;width:20px;height:20px}.react-grid-item>.react-resizable-handle:after{content:"";position:absolute;right:3px;bottom:3px;width:5px;height:5px;border-right:2px solid rgba(0,0,0,.4);border-bottom:2px solid rgba(0,0,0,.4)}.react-resizable-hide>.react-resizable-handle{display:none}.react-grid-item>.react-resizable-handle.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;transform:rotate(90deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;transform:rotate(180deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;transform:rotate(270deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-w,.react-grid-item>.react-resizable-handle.react-resizable-handle-e{top:50%;margin-top:-10px;cursor:ew-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-w{left:0;transform:rotate(135deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-e{right:0;transform:rotate(315deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-n,.react-grid-item>.react-resizable-handle.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-n{top:0;transform:rotate(225deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-s{bottom:0;transform:rotate(45deg)}.react-resizable{position:relative}.react-resizable-handle{position:absolute;width:20px;height:20px;background-repeat:no-repeat;background-origin:content-box;box-sizing:border-box;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+);background-position:bottom right;padding:0 3px 3px 0}.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;transform:rotate(90deg)}.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize}.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;transform:rotate(180deg)}.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;transform:rotate(270deg)}.react-resizable-handle-w,.react-resizable-handle-e{top:50%;margin-top:-10px;cursor:ew-resize}.react-resizable-handle-w{left:0;transform:rotate(135deg)}.react-resizable-handle-e{right:0;transform:rotate(315deg)}.react-resizable-handle-n,.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize}.react-resizable-handle-n{top:0;transform:rotate(225deg)}.react-resizable-handle-s{bottom:0;transform:rotate(45deg)}.univer-cf-preview{display:flex;align-items:center;justify-content:center;pointer-events:none;min-width:72px;height:20px;font-size:12px}.univer-cf-rule-list .univer-rule-selector{color:rgb(var(--text-color-secondary));font-size:12px;display:flex;justify-content:space-between;align-items:center}.univer-cf-rule-list .univer-rule-selector .univer-select{color:rgb(var(--text-color));width:138px}.univer-cf-rule-list .univer-rule-selector .univer-select .univer-select-selector{border:none;padding:0}.univer-cf-rule-list .univer-rule-selector .univer-select .univer-select-selection-item{top:-2px;left:4px}.univer-cf-rule-list .univer-rule-selector .univer-select .univer-select-selection-search-input{cursor:pointer}.univer-cf-rule-list .univer-rule-selector .univer-btn-list{font-size:16px;color:#000;display:flex;justify-content:space-between;align-items:center}.univer-cf-rule-list .univer-rule-selector .univer-btn-list .univer-gap{margin-left:8px}.univer-cf-rule-list .univer-rule-selector .univer-btn-list .univer-icon{cursor:pointer;display:flex;justify-content:space-between;align-items:center;border-radius:4px;padding:4px}.univer-cf-rule-list .univer-rule-selector .univer-btn-list .univer-icon:hover{background:rgb(var(--grey-300))}.univer-cf-rule-list .univer-rule-selector .univer-btn-list .univer-disabled{color:rgb(var(--grey-500));display:flex;align-items:center;border-radius:4px;padding:4px}.univer-cf-rule-list .univer-rule-item{padding:8px 32px 8px 20px;display:flex;justify-content:space-between;position:relative;align-items:center;border-radius:var(--border-radius-base)}.univer-cf-rule-list .univer-rule-item .univer-rule-describe{max-width:100%;min-width:0px;overflow:hidden;flex-shrink:1;font-size:var(--font-size-sm);line-height:21px}.univer-cf-rule-list .univer-rule-item .univer-rule-describe .univer-rule-type{font-size:14px;line-height:22px;color:#1e222b}.univer-cf-rule-list .univer-rule-item .univer-rule-describe .univer-rule-range{font-size:12px;line-height:22px;color:#7a7a7a}.univer-cf-rule-list .univer-rule-item:hover,.univer-cf-rule-list .univer-rule-item.univer-active{background-color:rgb(var(--grey-100))}.univer-cf-rule-list .univer-rule-item .univer-draggableHandle{display:none;position:absolute;left:0;width:20px;height:20px;border-radius:var(--border-radius-base);cursor:grab}.univer-cf-rule-list .univer-rule-item:hover .univer-delete-item,.univer-cf-rule-list .univer-rule-item:hover .univer-draggableHandle{display:flex;align-items:center;justify-content:center}.univer-cf-rule-list .univer-rule-item .univer-delete-item{display:none;cursor:pointer;border-radius:var(--border-radius-base);position:absolute;right:4px;width:24px;height:24px}.univer-cf-rule-list .univer-rule-item .univer-delete-item:hover{background-color:rgb(var(--grey-300))}.univer-cf-rule-list .univer-rule-item .univer-active{display:flex;align-items:center;justify-content:center}.univer-cf-rule-list .univer-grid-layout-wrap{width:calc(100% - 2 * var(--padding-sm) + 2 * var(--padding-xl));margin-left:calc(-1 * var(--padding-xl));padding-left:var(--padding-sm)}.univer-cf-rule-list .univer-grid-layout-wrap .univer-react-grid-item{transition:none}.react-grid-item.react-grid-placeholder{background:rgb(var(--grey-300))}.univer-cf-color-picker{padding:var(--padding-base);font-size:var(--font-size-xs);list-style:none;background-color:rgb(var(--bg-color-secondary));border:1px solid rgb(var(--border-color));border-radius:var(--border-radius-lg);outline:none;box-shadow:var(--box-shadow-base)}.univer-cf-color-picker-icon{cursor:pointer;padding:4px;display:flex;align-items:center}.univer-cf-color-picker-icon:hover{background:rgb(var(--bg-color-hover));border-radius:var(--border-radius-base)}.univer-cf-color-picker-icon .univer-icon-dropdown{font-size:8px;color:rgb(var(--text-color-secondary));margin-left:6px}.univer-cf-rule-style-editor .univer-cf-preview-wrap{margin-top:var(--margin-sm);padding:var(--padding-xs) var(--padding-sm);border:1px solid rgb(var(--border-color));border-radius:var(--border-radius-base)}.univer-cf-rule-style-editor .univer-text{font-size:var(--font-size-xxs)}.univer-cf-rule-style-editor .univer-position-relative{position:relative}.univer-cf-rule-style-editor .univer-btn-list{display:flex;justify-content:flex-end;margin-bottom:var(--margin-base)}.univer-cf-rule-style-editor .univer-util-item{display:flex;justify-content:flex-start;align-items:center;font-size:var(--font-size-xxs)}.univer-cf-rule-style-editor .univer-icon-set .univer-render-config{display:flex;align-items:center;font-size:var(--font-size-xxs);justify-content:flex-start}.univer-cf-rule-style-editor .univer-icon-set .univer-flex{display:flex;justify-content:space-between;align-items:center}.univer-cf-rule-style-editor .univer-icon-set .univer-width45{width:45%}.univer-cf-rule-style-editor .univer-icon-set .univer-icon-wrap{display:flex;align-items:center}.univer-cf-rule-style-editor .univer-icon-set .univer-icon{width:20px;height:20px}.univer-cf-rule-style-editor .univer-icon-set .univer-dropdown-icon{background-color:rgb(var(--bg-color-secondary));border:1px solid rgb(var(--border-color));border-radius:var(--border-radius-base);display:flex;justify-content:space-between;width:100%;align-items:center;padding:var(--padding-sm) var(--padding-lg);font-size:var(--font-size-xxs);color:rgb(var(--text-color-secondary));transition:all .15s}.univer-cf-rule-style-editor .univer-icon-set .univer-dropdown-icon:hover{border-color:rgb(var(--primary-color))!important}.univer-cf-rule-style-editor .univer-icon-set .univer-dropdown-icon .univer-icon{width:16px;height:16px}.univer-cf-rule-style-editor .univer-icon-set .univer-error-input{border:1px solid rgb(var(--red-400))}.univer-cf-rule-style-editor .univer-icon-set .univer-error-text{color:rgb(var(--red-400));font-size:12px;position:absolute}.univer-icon-group-list{padding:var(--padding-base);font-size:var(--font-size-xs);box-sizing:border-box;width:328px;background-color:rgb(var(--bg-color-secondary));border:1px solid rgb(var(--border-color));border-radius:var(--border-radius-lg);outline:none;box-shadow:var(--box-shadow-base)}.univer-icon-group-list .univer-title{font-size:13px;margin-bottom:var(--margin-xxs)}.univer-icon-group-list .univer-group{margin-bottom:var(--margin-sm)}.univer-icon-group-list .univer-item-content{display:flex;flex-wrap:wrap}.univer-icon-group-list .univer-item-content .univer-item-wrap{display:flex;align-items:center;justify-content:flex-start;width:50%;margin-bottom:4px}.univer-icon-group-list .univer-item-content .univer-item-wrap .univer-item{border-radius:var(--border-radius-base);cursor:pointer}.univer-icon-group-list .univer-item-content .univer-item-wrap .univer-item :not(:first-child).univer-icon{margin-left:8px}.univer-icon-group-list .univer-item-content .univer-item-wrap .univer-item:hover{background-color:rgb(var(--bg-color-hover))}.univer-icon-group-list .univer-item-content .univer-item-wrap :not(:first-child).univer-icon{margin-left:8px}.univer-icon-group-list .univer-icon{width:20px;height:20px}.univer-icon-item-list-wrap{padding:var(--padding-base) 4px var(--padding-base) var(--padding-base);font-size:var(--font-size-xs);background-color:rgb(var(--bg-color-secondary));border:1px solid rgb(var(--border-color));border-radius:var(--border-radius-lg);outline:none;box-shadow:var(--box-shadow-base)}.univer-icon-item-list-wrap .univer-none{display:flex;align-items:center;margin-bottom:10px;cursor:pointer;padding-left:4px}.univer-icon-item-list-wrap .univer-none span{margin-left:8px}.univer-icon-item-list-wrap .univer-icon-item-list{display:flex;width:252px;flex-wrap:wrap}.univer-icon-item-list-wrap .univer-icon-item-list .univer-item{display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-base);margin-right:8px;margin-bottom:8px;cursor:pointer}.univer-icon-item-list-wrap .univer-icon-item-list .univer-item:hover{background-color:rgb(var(--bg-color-hover))}.univer-icon-item-list-wrap .univer-icon-item-list .univer-icon{width:20px;height:20px}.univer-width100{width:100%}.univer-stress{color:rgb(var(--text-color));font-weight:500}.univer-cf-style-edit{display:flex;justify-content:space-between;margin:10px 0}.univer-cf-style-edit .univer-button-item{cursor:pointer;border-radius:var(--border-radius-base);display:flex;align-items:center;padding:0 3px}.univer-cf-style-edit .univer-button-item:hover,.univer-cf-style-edit .univer-isActive{background-color:rgb(var(--grey-100))}
+.univer-conditional-formatting-wrap{height:100%;display:flex;flex-direction:column;justify-content:space-between}.univer-conditional-formatting-wrap .univer-cf-rule-item{display:flex;justify-content:space-between;align-items:center}.univer-conditional-formatting-wrap .univer-cf-rule-item .univer-preview{flex-shrink:0}.univer-conditional-formatting-wrap .univer-create-rule{margin-bottom:20px}.univer-conditional-formatting-wrap .univer-create-rule .univer-button{border:1px solid rgb(var(--border-color));border-radius:var(--border-radius-base);display:flex;align-items:center;justify-content:center;padding:var(--padding-base);cursor:pointer;font-size:var(--font-size-sm)}.univer-conditional-formatting-wrap .univer-title{margin-top:var(--margin-base);font-size:15px;color:rgb(var(--text-color-secondary))}.univer-conditional-formatting-wrap .univer-label{font-size:12px;margin-top:var(--margin-sm);color:rgb(var(--text-color-secondary))}.univer-conditional-formatting-wrap .univer-label-container{display:flex;align-items:center}.univer-conditional-formatting-wrap .univer-label-container .univer-input-width{width:100px}.univer-conditional-formatting-wrap .univer-m-t-base{margin-top:var(--margin-base)}.univer-conditional-formatting-wrap .univer-m-t-sm{margin-top:var(--margin-sm)}.univer-conditional-formatting-wrap .univer-m-t-xl{margin-top:var(--margin-xl)}.univer-conditional-formatting-wrap .univer-m-l-sm{margin-left:var(--margin-sm)}.univer-conditional-formatting-wrap .univer-m-l-xl{margin-left:var(--margin-xl)}.univer-conditional-formatting-wrap .univer-m-l-xxs{margin-left:var(--margin-xxs)}.univer-conditional-formatting-wrap .univer-m-l-0{margin-left:0}.univer-conditional-formatting-wrap .univer-m-r-0{margin-right:0}.react-grid-layout{position:relative;transition:height .2s ease}.react-grid-item{transition:all .2s ease;transition-property:left,top,width,height}.react-grid-item img{pointer-events:none;user-select:none}.react-grid-item.cssTransforms{transition-property:transform,width,height}.react-grid-item.resizing{transition:none;z-index:1;will-change:width,height}.react-grid-item.react-draggable-dragging{transition:none;z-index:3;will-change:transform}.react-grid-item.dropping{visibility:hidden}.react-grid-item.react-grid-placeholder{background:red;opacity:.2;transition-duration:.1s;z-index:2;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.react-grid-item.react-grid-placeholder.placeholder-resizing{transition:none}.react-grid-item>.react-resizable-handle{position:absolute;width:20px;height:20px}.react-grid-item>.react-resizable-handle:after{content:"";position:absolute;right:3px;bottom:3px;width:5px;height:5px;border-right:2px solid rgba(0,0,0,.4);border-bottom:2px solid rgba(0,0,0,.4)}.react-resizable-hide>.react-resizable-handle{display:none}.react-grid-item>.react-resizable-handle.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;transform:rotate(90deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;transform:rotate(180deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;transform:rotate(270deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-w,.react-grid-item>.react-resizable-handle.react-resizable-handle-e{top:50%;margin-top:-10px;cursor:ew-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-w{left:0;transform:rotate(135deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-e{right:0;transform:rotate(315deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-n,.react-grid-item>.react-resizable-handle.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-n{top:0;transform:rotate(225deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-s{bottom:0;transform:rotate(45deg)}.react-resizable{position:relative}.react-resizable-handle{position:absolute;width:20px;height:20px;background-repeat:no-repeat;background-origin:content-box;box-sizing:border-box;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+);background-position:bottom right;padding:0 3px 3px 0}.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;transform:rotate(90deg)}.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize}.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;transform:rotate(180deg)}.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;transform:rotate(270deg)}.react-resizable-handle-w,.react-resizable-handle-e{top:50%;margin-top:-10px;cursor:ew-resize}.react-resizable-handle-w{left:0;transform:rotate(135deg)}.react-resizable-handle-e{right:0;transform:rotate(315deg)}.react-resizable-handle-n,.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize}.react-resizable-handle-n{top:0;transform:rotate(225deg)}.react-resizable-handle-s{bottom:0;transform:rotate(45deg)}.univer-cf-preview{display:flex;align-items:center;justify-content:center;pointer-events:none;min-width:72px;height:20px;font-size:12px}.univer-cf-rule-list .univer-rule-selector{color:rgb(var(--text-color-secondary));font-size:12px;display:flex;justify-content:space-between;align-items:center}.univer-cf-rule-list .univer-rule-selector .univer-select{color:rgb(var(--text-color));width:138px}.univer-cf-rule-list .univer-rule-selector .univer-select .univer-select-selector{border:none;padding:0}.univer-cf-rule-list .univer-rule-selector .univer-select .univer-select-selection-item{top:-2px;left:4px}.univer-cf-rule-list .univer-rule-selector .univer-select .univer-select-selection-search-input{cursor:pointer}.univer-cf-rule-list .univer-rule-selector .univer-btn-list{font-size:16px;color:#000;display:flex;justify-content:space-between;align-items:center}.univer-cf-rule-list .univer-rule-selector .univer-btn-list .univer-gap{margin-left:8px}.univer-cf-rule-list .univer-rule-selector .univer-btn-list .univer-icon{cursor:pointer;display:flex;justify-content:space-between;align-items:center;border-radius:4px;padding:4px}.univer-cf-rule-list .univer-rule-selector .univer-btn-list .univer-icon:hover{background:rgb(var(--grey-300))}.univer-cf-rule-list .univer-rule-selector .univer-btn-list .univer-disabled{color:rgb(var(--grey-500));display:flex;align-items:center;border-radius:4px;padding:4px}.univer-cf-rule-list .univer-rule-item{padding:8px 32px 8px 20px;display:flex;justify-content:space-between;position:relative;align-items:center;border-radius:var(--border-radius-base)}.univer-cf-rule-list .univer-rule-item .univer-rule-describe{max-width:100%;min-width:0px;overflow:hidden;flex-shrink:1;font-size:var(--font-size-sm);line-height:21px}.univer-cf-rule-list .univer-rule-item .univer-rule-describe .univer-rule-type{font-size:14px;line-height:22px;color:#1e222b}.univer-cf-rule-list .univer-rule-item .univer-rule-describe .univer-rule-range{font-size:12px;line-height:22px;color:#7a7a7a}.univer-cf-rule-list .univer-rule-item:hover,.univer-cf-rule-list .univer-rule-item.univer-active{background-color:rgb(var(--grey-100))}.univer-cf-rule-list .univer-rule-item .univer-draggableHandle{display:none;position:absolute;left:0;width:20px;height:20px;border-radius:var(--border-radius-base);cursor:grab}.univer-cf-rule-list .univer-rule-item:hover .univer-delete-item,.univer-cf-rule-list .univer-rule-item:hover .univer-draggableHandle{display:flex;align-items:center;justify-content:center}.univer-cf-rule-list .univer-rule-item .univer-delete-item{display:none;cursor:pointer;border-radius:var(--border-radius-base);position:absolute;right:4px;width:24px;height:24px}.univer-cf-rule-list .univer-rule-item .univer-delete-item:hover{background-color:rgb(var(--grey-300))}.univer-cf-rule-list .univer-rule-item .univer-active{display:flex;align-items:center;justify-content:center}.univer-cf-rule-list .univer-grid-layout-wrap{width:calc(100% - 2 * var(--padding-sm) + 2 * var(--padding-xl));margin-left:calc(-1 * var(--padding-xl));padding-left:var(--padding-sm)}.univer-cf-rule-list .univer-grid-layout-wrap .univer-react-grid-item{transition:none}.react-grid-item.react-grid-placeholder{background:rgb(var(--grey-300))}.univer-cf-color-picker{padding:var(--padding-base);font-size:var(--font-size-xs);list-style:none;background-color:rgb(var(--bg-color-secondary));border:1px solid rgb(var(--border-color));border-radius:var(--border-radius-lg);outline:none;box-shadow:var(--box-shadow-base)}.univer-cf-color-picker-icon{cursor:pointer;padding:4px;display:flex;align-items:center}.univer-cf-color-picker-icon:hover{background:rgb(var(--bg-color-hover));border-radius:var(--border-radius-base)}.univer-cf-color-picker-icon .univer-icon-dropdown{font-size:8px;color:rgb(var(--text-color-secondary));margin-left:6px}.univer-cf-rule-style-editor .univer-cf-preview-wrap{margin-top:var(--margin-lg);padding:var(--padding-xs) var(--padding-sm);border:1px solid rgb(var(--border-color));border-radius:var(--border-radius-base)}.univer-cf-rule-style-editor .univer-text{font-size:var(--font-size-xxs)}.univer-cf-rule-style-editor .univer-position-relative{position:relative}.univer-cf-rule-style-editor .univer-btn-list{display:flex;justify-content:flex-end;margin-bottom:var(--margin-base)}.univer-cf-rule-style-editor .univer-util-item{display:flex;justify-content:flex-start;align-items:center;font-size:var(--font-size-xxs)}.univer-cf-rule-style-editor .univer-icon-set .univer-render-config{display:flex;align-items:center;font-size:var(--font-size-xxs);justify-content:flex-start}.univer-cf-rule-style-editor .univer-icon-set .univer-flex{display:flex;justify-content:space-between;align-items:center}.univer-cf-rule-style-editor .univer-icon-set .univer-width45{width:45%}.univer-cf-rule-style-editor .univer-icon-set .univer-icon-wrap{display:flex;align-items:center}.univer-cf-rule-style-editor .univer-icon-set .univer-icon{width:20px;height:20px}.univer-cf-rule-style-editor .univer-icon-set .univer-dropdown-icon{background-color:rgb(var(--bg-color-secondary));border:1px solid rgb(var(--border-color));border-radius:var(--border-radius-base);display:flex;justify-content:space-between;width:100%;align-items:center;padding:var(--padding-sm) var(--padding-lg);font-size:var(--font-size-xxs);color:rgb(var(--text-color-secondary));transition:all .15s}.univer-cf-rule-style-editor .univer-icon-set .univer-dropdown-icon:hover{border-color:rgb(var(--primary-color))!important}.univer-cf-rule-style-editor .univer-icon-set .univer-dropdown-icon .univer-icon{width:16px;height:16px}.univer-cf-rule-style-editor .univer-icon-set .univer-error-input{border:1px solid rgb(var(--red-400))}.univer-cf-rule-style-editor .univer-icon-set .univer-error-text{color:rgb(var(--red-400));font-size:12px;position:absolute}.univer-icon-group-list{padding:var(--padding-base);font-size:var(--font-size-xs);box-sizing:border-box;width:328px;background-color:rgb(var(--bg-color-secondary));border:1px solid rgb(var(--border-color));border-radius:var(--border-radius-lg);outline:none;box-shadow:var(--box-shadow-base)}.univer-icon-group-list .univer-title{font-size:13px;margin-bottom:var(--margin-xxs)}.univer-icon-group-list .univer-group{margin-bottom:var(--margin-sm)}.univer-icon-group-list .univer-item-content{display:flex;flex-wrap:wrap}.univer-icon-group-list .univer-item-content .univer-item-wrap{display:flex;align-items:center;justify-content:flex-start;width:50%;margin-bottom:4px}.univer-icon-group-list .univer-item-content .univer-item-wrap .univer-item{border-radius:var(--border-radius-base);cursor:pointer}.univer-icon-group-list .univer-item-content .univer-item-wrap .univer-item :not(:first-child).univer-icon{margin-left:8px}.univer-icon-group-list .univer-item-content .univer-item-wrap .univer-item:hover{background-color:rgb(var(--bg-color-hover))}.univer-icon-group-list .univer-item-content .univer-item-wrap :not(:first-child).univer-icon{margin-left:8px}.univer-icon-group-list .univer-icon{width:20px;height:20px}.univer-icon-item-list-wrap{padding:var(--padding-base) 4px var(--padding-base) var(--padding-base);font-size:var(--font-size-xs);background-color:rgb(var(--bg-color-secondary));border:1px solid rgb(var(--border-color));border-radius:var(--border-radius-lg);outline:none;box-shadow:var(--box-shadow-base)}.univer-icon-item-list-wrap .univer-none{display:flex;align-items:center;margin-bottom:10px;cursor:pointer;padding-left:4px}.univer-icon-item-list-wrap .univer-none span{margin-left:8px}.univer-icon-item-list-wrap .univer-icon-item-list{display:flex;width:252px;flex-wrap:wrap}.univer-icon-item-list-wrap .univer-icon-item-list .univer-item{display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-base);margin-right:8px;margin-bottom:8px;cursor:pointer}.univer-icon-item-list-wrap .univer-icon-item-list .univer-item:hover{background-color:rgb(var(--bg-color-hover))}.univer-icon-item-list-wrap .univer-icon-item-list .univer-icon{width:20px;height:20px}.univer-width100{width:100%}.univer-stress{color:rgb(var(--text-color));font-weight:500}.univer-cf-style-edit{display:flex;justify-content:space-between;margin:10px 0}.univer-cf-style-edit .univer-button-item{cursor:pointer;border-radius:var(--border-radius-base);display:flex;align-items:center;padding:0 3px}.univer-cf-style-edit .univer-button-item:hover,.univer-cf-style-edit .univer-isActive{background-color:rgb(var(--grey-100))}