@univerjs/sheets-conditional-formatting-ui 1.0.3 → 1.1.0

package/lib/cjs/index.js

@@ -389,7 +389,7 @@ const AddUniqueValuesCfCommand = {
 const CF_PANEL_KEY = "sheet.conditional.formatting.panel";
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -400,7 +400,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -413,14 +413,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -431,7 +431,7 @@ function _defineProperty(e, r, t) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorateParam.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -439,7 +439,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -986,8 +986,7 @@ const conditionalFormattingRuleMenuSchema = { [_univerjs_ui.RibbonDataGroup.RULE
 	order: 1,
 	gridLayout: {
 		row: 2,
-		column: 1,
-		showLabel: true
+		column: 1
 	},
 	menuItemFactory: FactoryManageConditionalFormattingRule
 } } };
@@ -1008,7 +1007,7 @@ const menuSchema = {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-conditional-formatting-ui";
-var version = "1.0.3";
+var version = "1.1.0";
 
 //#endregion
 //#region src/config/config.ts
@@ -1700,8 +1699,9 @@ const ColorPicker = (props) => {
 };
 
 //#endregion
-//#region src/views/Preview.tsx
-function Preview(props) {
+//#region src/views/ConditionalFormattingRulePreview.tsx
+/** Shows a rule's configured appearance without evaluating worksheet values. */
+function ConditionalFormattingRulePreview(props) {
 	const { rule } = props;
 	const colorList = (0, react.useMemo)(() => {
 		if ((rule === null || rule === void 0 ? void 0 : rule.type) === _univerjs_sheets_conditional_formatting.CFRuleType.colorScale) {
@@ -1787,6 +1787,56 @@ function Preview(props) {
 	}
 }
 
+//#endregion
+//#region src/views/panel/rule-edit/RuleNumberInput.tsx
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+function RuleNumberInput({ value, onChange, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, disabled, className }) {
+	const [draftState, setDraftState] = (0, react.useState)({
+		value,
+		text: String(value)
+	});
+	if (!Object.is(draftState.value, value)) setDraftState({
+		value,
+		text: String(value)
+	});
+	const draft = draftState.text;
+	const setDraft = (text) => setDraftState({
+		value,
+		text
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Input, {
+		className,
+		disabled,
+		inputMode: "decimal",
+		value: draft,
+		"aria-invalid": !Number.isFinite(Number(draft)),
+		onChange: (next) => {
+			setDraft(next);
+			const number = Number(next);
+			if (Number.isFinite(number)) {
+				const bounded = Math.min(max, Math.max(min, number));
+				if (bounded !== number) setDraft(String(bounded));
+				onChange(bounded);
+			}
+		},
+		onBlur: () => setDraft(String(value))
+	});
+}
+
 //#endregion
 //#region src/views/panel/rule-edit/styles.ts
 /**
@@ -1857,7 +1907,7 @@ const TextInput$1 = (props) => {
 			onFocus: () => setIsFocusFormulaEditor(true)
 		})
 	});
-	else return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+	else return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RuleNumberInput, {
 		className,
 		value: Number(props.value) || 0,
 		onChange: (v) => props.onChange(v || 0),
@@ -2015,7 +2065,7 @@ const ColorScaleStyleEditor = (props) => {
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: previewClassName,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Preview, { rule: getResult({
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConditionalFormattingRulePreview, { rule: getResult({
 				minType,
 				medianType,
 				maxType,
@@ -2281,7 +2331,7 @@ const InputText = (props) => {
 			})
 		});
 	}
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RuleNumberInput, {
 		className,
 		value: Number(value) || 0,
 		disabled,
@@ -2441,7 +2491,7 @@ const DataBarStyleEditor = (props) => {
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: previewClassName,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Preview, { rule: getResult({
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConditionalFormattingRulePreview, { rule: getResult({
 				isGradient,
 				minValue,
 				minValueType,
@@ -2815,7 +2865,7 @@ const FormulaStyleEditor = (props) => {
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: previewClassName,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Preview, { rule: getResult({
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConditionalFormattingRulePreview, { rule: getResult({
 					style,
 					formula
 				}) })
@@ -2968,7 +3018,7 @@ function HighlightCellInput(props) {
 					className: "univer-mt-3",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WrapperError, {
 						errorText: numberError,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RuleNumberInput, {
 							className: "univer-w-full",
 							min: Number.MIN_SAFE_INTEGER,
 							max: Number.MAX_SAFE_INTEGER,
@@ -2993,7 +3043,7 @@ function HighlightCellInput(props) {
 					className: "univer-mt-3 univer-flex univer-items-center",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(WrapperError, {
 						errorText: numberMinError,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RuleNumberInput, {
 							min: Number.MIN_SAFE_INTEGER,
 							max: Number.MAX_SAFE_INTEGER,
 							value: inputNumberMin,
@@ -3001,7 +3051,7 @@ function HighlightCellInput(props) {
 						})
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WrapperError, {
 						errorText: numberMaxError,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RuleNumberInput, {
 							className: "univer-ml-3",
 							min: Number.MIN_SAFE_INTEGER,
 							max: Number.MAX_SAFE_INTEGER,
@@ -3222,7 +3272,7 @@ const HighlightCellStyleEditor = (props) => {
 		}, `${subType}_${operator}`),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: previewClassName,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Preview, { rule: getResult({}) })
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConditionalFormattingRulePreview, { rule: getResult({}) })
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConditionalStyleEditor, {
 			ColorPickerComponent,
@@ -3255,7 +3305,7 @@ const TextInput = (props) => {
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "univer-relative",
-		children: type !== _univerjs_sheets_conditional_formatting.CFValueType.formula ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+		children: type !== _univerjs_sheets_conditional_formatting.CFValueType.formula ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RuleNumberInput, {
 			className: (0, _univerjs_design.clsx)({ "univer-border-red-500": error }),
 			value: Number(props.value) || 0,
 			onChange: (v) => onChange(v ?? 0)
@@ -3909,7 +3959,7 @@ const RankStyleEditor = (props) => {
 		}),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: previewClassName,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Preview, { rule: getResult({
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConditionalFormattingRulePreview, { rule: getResult({
 				type,
 				isPercent,
 				value,
@@ -4172,8 +4222,9 @@ const RuleEdit = (props) => {
 };
 
 //#endregion
-//#region src/views/panel/RuleList.tsx
-const getRuleDescribe = (rule, localeService) => {
+//#region src/utils/get-rule-describe.ts
+/** Returns the localized description used by the built-in conditional formatting rule list. */
+function getRuleDescribe(rule, localeService) {
 	const ruleConfig = rule.rule;
 	switch (ruleConfig.type) {
 		case _univerjs_sheets_conditional_formatting.CFRuleType.colorScale: return localeService.t("sheets-conditional-formatting-ui.ruleType.colorScale");
@@ -4188,7 +4239,8 @@ const getRuleDescribe = (rule, localeService) => {
 			case _univerjs_sheets_conditional_formatting.CFSubRuleType.uniqueValues: return localeService.t("sheets-conditional-formatting-ui.subRuleType.uniqueValues");
 			case _univerjs_sheets_conditional_formatting.CFSubRuleType.number: {
 				const operator = ruleConfig.operator;
-				return localeService.t(`sheets-conditional-formatting-ui.preview.describe.${operator}`, ...Array.isArray(ruleConfig.value) ? ruleConfig.value.map((e) => String(e)) : [String(ruleConfig.value || "")]);
+				const values = Array.isArray(ruleConfig.value) ? ruleConfig.value.map((value) => String(value)) : [String(ruleConfig.value ?? "")];
+				return localeService.t(`sheets-conditional-formatting-ui.preview.describe.${operator}`, ...values);
 			}
 			case _univerjs_sheets_conditional_formatting.CFSubRuleType.text: {
 				const operator = ruleConfig.operator;
@@ -4198,15 +4250,16 @@ const getRuleDescribe = (rule, localeService) => {
 				const operator = ruleConfig.operator;
 				return localeService.t(`sheets-conditional-formatting-ui.preview.describe.${operator}`);
 			}
-			case _univerjs_sheets_conditional_formatting.CFSubRuleType.rank: if (ruleConfig.isPercent) {
-				if (ruleConfig.isBottom) return localeService.t("sheets-conditional-formatting-ui.preview.describe.bottomNPercent", String(ruleConfig.value));
-				else return localeService.t("sheets-conditional-formatting-ui.preview.describe.topNPercent", String(ruleConfig.value));
-			} else if (ruleConfig.isBottom) return localeService.t("sheets-conditional-formatting-ui.preview.describe.bottomN", String(ruleConfig.value));
-			else return localeService.t("sheets-conditional-formatting-ui.preview.describe.topN", String(ruleConfig.value));
+			case _univerjs_sheets_conditional_formatting.CFSubRuleType.rank:
+				if (ruleConfig.isPercent) return localeService.t(ruleConfig.isBottom ? "sheets-conditional-formatting-ui.preview.describe.bottomNPercent" : "sheets-conditional-formatting-ui.preview.describe.topNPercent", String(ruleConfig.value));
+				return localeService.t(ruleConfig.isBottom ? "sheets-conditional-formatting-ui.preview.describe.bottomN" : "sheets-conditional-formatting-ui.preview.describe.topN", String(ruleConfig.value));
 			case _univerjs_sheets_conditional_formatting.CFSubRuleType.formula: return localeService.t("sheets-conditional-formatting-ui.ruleType.formula");
 		}
 	}
-};
+}
+
+//#endregion
+//#region src/views/panel/RuleList.tsx
 function RuleList(props) {
 	const { SelectComponent = _univerjs_design.Select } = props;
 	const { onClick } = props;
@@ -4409,7 +4462,7 @@ function RuleList(props) {
 						children: rule.ranges.map((range) => (0, _univerjs_engine_formula.serializeRange)(range)).join(",")
 					})]
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Preview, { rule: rule.rule }) }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ConditionalFormattingRulePreview, { rule: rule.rule }) }),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: (0, _univerjs_design.clsx)("univer-absolute univer-right-1 univer-hidden univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded univer-text-red-500 group-hover:univer-flex hover:univer-bg-gray-200 rtl:univer-left-1 rtl:univer-right-auto", { "univer-flex univer-items-center univer-justify-center": draggingId === rule.cfId }),
 					onClick: (e) => {
@@ -4434,8 +4487,10 @@ const ConditionFormattingPanel = (props) => {
 		setIsShowRuleEditor(true);
 	};
 	const handleCancel = () => {
+		var _props$onEditorExit;
 		setIsShowRuleEditor(false);
 		setCurrentEditRule(void 0);
+		(_props$onEditorExit = props.onEditorExit) === null || _props$onEditorExit === void 0 || _props$onEditorExit.call(props);
 	};
 	const handleRuleClick = (rule) => {
 		setCurrentEditRule(rule);
@@ -5277,23 +5332,26 @@ exports.AddRankCfCommand = AddRankCfCommand;
 exports.AddTextCfCommand = AddTextCfCommand;
 exports.AddTimePeriodCfCommand = AddTimePeriodCfCommand;
 exports.AddUniqueValuesCfCommand = AddUniqueValuesCfCommand;
-Object.defineProperty(exports, 'ConditionalFormattingClearController', {
+exports.CF_PANEL_KEY = CF_PANEL_KEY;
+Object.defineProperty(exports, "ConditionalFormattingClearController", {
   enumerable: true,
   get: function () {
     return ConditionalFormattingClearController;
   }
 });
+exports.ConditionalFormattingRulePreview = ConditionalFormattingRulePreview;
 exports.OpenConditionalFormattingOperator = OpenConditionalFormattingOperator;
 exports.SheetsConditionalFormattingUIMenuSchema = menuSchema;
-Object.defineProperty(exports, 'UniverSheetsConditionalFormattingMobileUIPlugin', {
+Object.defineProperty(exports, "UniverSheetsConditionalFormattingMobileUIPlugin", {
   enumerable: true,
   get: function () {
     return UniverSheetsConditionalFormattingMobileUIPlugin;
   }
 });
-Object.defineProperty(exports, 'UniverSheetsConditionalFormattingUIPlugin', {
+Object.defineProperty(exports, "UniverSheetsConditionalFormattingUIPlugin", {
   enumerable: true,
   get: function () {
     return UniverSheetsConditionalFormattingUIPlugin;
   }
-});
+});
+exports.getRuleDescribe = getRuleDescribe;

package/lib/es/index.js

@@ -388,7 +388,7 @@ const AddUniqueValuesCfCommand = {
 const CF_PANEL_KEY = "sheet.conditional.formatting.panel";
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -399,7 +399,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -412,14 +412,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -430,7 +430,7 @@ function _defineProperty(e, r, t) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorateParam.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -438,7 +438,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -985,8 +985,7 @@ const conditionalFormattingRuleMenuSchema = { [RibbonDataGroup.RULES]: { [OpenCo
 	order: 1,
 	gridLayout: {
 		row: 2,
-		column: 1,
-		showLabel: true
+		column: 1
 	},
 	menuItemFactory: FactoryManageConditionalFormattingRule
 } } };
@@ -1007,7 +1006,7 @@ const menuSchema = {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-conditional-formatting-ui";
-var version = "1.0.3";
+var version = "1.1.0";
 
 //#endregion
 //#region src/config/config.ts
@@ -1699,8 +1698,9 @@ const ColorPicker$1 = (props) => {
 };
 
 //#endregion
-//#region src/views/Preview.tsx
-function Preview(props) {
+//#region src/views/ConditionalFormattingRulePreview.tsx
+/** Shows a rule's configured appearance without evaluating worksheet values. */
+function ConditionalFormattingRulePreview(props) {
 	const { rule } = props;
 	const colorList = useMemo(() => {
 		if ((rule === null || rule === void 0 ? void 0 : rule.type) === CFRuleType.colorScale) {
@@ -1786,6 +1786,56 @@ function Preview(props) {
 	}
 }
 
+//#endregion
+//#region src/views/panel/rule-edit/RuleNumberInput.tsx
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+function RuleNumberInput({ value, onChange, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER, disabled, className }) {
+	const [draftState, setDraftState] = useState({
+		value,
+		text: String(value)
+	});
+	if (!Object.is(draftState.value, value)) setDraftState({
+		value,
+		text: String(value)
+	});
+	const draft = draftState.text;
+	const setDraft = (text) => setDraftState({
+		value,
+		text
+	});
+	return /* @__PURE__ */ jsx(Input, {
+		className,
+		disabled,
+		inputMode: "decimal",
+		value: draft,
+		"aria-invalid": !Number.isFinite(Number(draft)),
+		onChange: (next) => {
+			setDraft(next);
+			const number = Number(next);
+			if (Number.isFinite(number)) {
+				const bounded = Math.min(max, Math.max(min, number));
+				if (bounded !== number) setDraft(String(bounded));
+				onChange(bounded);
+			}
+		},
+		onBlur: () => setDraft(String(value))
+	});
+}
+
 //#endregion
 //#region src/views/panel/rule-edit/styles.ts
 /**
@@ -1856,7 +1906,7 @@ const TextInput$1 = (props) => {
 			onFocus: () => setIsFocusFormulaEditor(true)
 		})
 	});
-	else return /* @__PURE__ */ jsx(InputNumber, {
+	else return /* @__PURE__ */ jsx(RuleNumberInput, {
 		className,
 		value: Number(props.value) || 0,
 		onChange: (v) => props.onChange(v || 0),
@@ -2014,7 +2064,7 @@ const ColorScaleStyleEditor = (props) => {
 		}),
 		/* @__PURE__ */ jsx("div", {
 			className: previewClassName,
-			children: /* @__PURE__ */ jsx(Preview, { rule: getResult({
+			children: /* @__PURE__ */ jsx(ConditionalFormattingRulePreview, { rule: getResult({
 				minType,
 				medianType,
 				maxType,
@@ -2280,7 +2330,7 @@ const InputText = (props) => {
 			})
 		});
 	}
-	return /* @__PURE__ */ jsx(InputNumber, {
+	return /* @__PURE__ */ jsx(RuleNumberInput, {
 		className,
 		value: Number(value) || 0,
 		disabled,
@@ -2440,7 +2490,7 @@ const DataBarStyleEditor = (props) => {
 		}),
 		/* @__PURE__ */ jsx("div", {
 			className: previewClassName,
-			children: /* @__PURE__ */ jsx(Preview, { rule: getResult({
+			children: /* @__PURE__ */ jsx(ConditionalFormattingRulePreview, { rule: getResult({
 				isGradient,
 				minValue,
 				minValueType,
@@ -2814,7 +2864,7 @@ const FormulaStyleEditor = (props) => {
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: previewClassName,
-				children: /* @__PURE__ */ jsx(Preview, { rule: getResult({
+				children: /* @__PURE__ */ jsx(ConditionalFormattingRulePreview, { rule: getResult({
 					style,
 					formula
 				}) })
@@ -2967,7 +3017,7 @@ function HighlightCellInput(props) {
 					className: "univer-mt-3",
 					children: /* @__PURE__ */ jsx(WrapperError, {
 						errorText: numberError,
-						children: /* @__PURE__ */ jsx(InputNumber, {
+						children: /* @__PURE__ */ jsx(RuleNumberInput, {
 							className: "univer-w-full",
 							min: Number.MIN_SAFE_INTEGER,
 							max: Number.MAX_SAFE_INTEGER,
@@ -2992,7 +3042,7 @@ function HighlightCellInput(props) {
 					className: "univer-mt-3 univer-flex univer-items-center",
 					children: [/* @__PURE__ */ jsx(WrapperError, {
 						errorText: numberMinError,
-						children: /* @__PURE__ */ jsx(InputNumber, {
+						children: /* @__PURE__ */ jsx(RuleNumberInput, {
 							min: Number.MIN_SAFE_INTEGER,
 							max: Number.MAX_SAFE_INTEGER,
 							value: inputNumberMin,
@@ -3000,7 +3050,7 @@ function HighlightCellInput(props) {
 						})
 					}), /* @__PURE__ */ jsx(WrapperError, {
 						errorText: numberMaxError,
-						children: /* @__PURE__ */ jsx(InputNumber, {
+						children: /* @__PURE__ */ jsx(RuleNumberInput, {
 							className: "univer-ml-3",
 							min: Number.MIN_SAFE_INTEGER,
 							max: Number.MAX_SAFE_INTEGER,
@@ -3221,7 +3271,7 @@ const HighlightCellStyleEditor = (props) => {
 		}, `${subType}_${operator}`),
 		/* @__PURE__ */ jsx("div", {
 			className: previewClassName,
-			children: /* @__PURE__ */ jsx(Preview, { rule: getResult({}) })
+			children: /* @__PURE__ */ jsx(ConditionalFormattingRulePreview, { rule: getResult({}) })
 		}),
 		/* @__PURE__ */ jsx(ConditionalStyleEditor, {
 			ColorPickerComponent,
@@ -3254,7 +3304,7 @@ const TextInput = (props) => {
 	});
 	return /* @__PURE__ */ jsx("div", {
 		className: "univer-relative",
-		children: type !== CFValueType.formula ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(InputNumber, {
+		children: type !== CFValueType.formula ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(RuleNumberInput, {
 			className: clsx({ "univer-border-red-500": error }),
 			value: Number(props.value) || 0,
 			onChange: (v) => onChange(v ?? 0)
@@ -3908,7 +3958,7 @@ const RankStyleEditor = (props) => {
 		}),
 		/* @__PURE__ */ jsx("div", {
 			className: previewClassName,
-			children: /* @__PURE__ */ jsx(Preview, { rule: getResult({
+			children: /* @__PURE__ */ jsx(ConditionalFormattingRulePreview, { rule: getResult({
 				type,
 				isPercent,
 				value,
@@ -4171,8 +4221,9 @@ const RuleEdit = (props) => {
 };
 
 //#endregion
-//#region src/views/panel/RuleList.tsx
-const getRuleDescribe = (rule, localeService) => {
+//#region src/utils/get-rule-describe.ts
+/** Returns the localized description used by the built-in conditional formatting rule list. */
+function getRuleDescribe(rule, localeService) {
 	const ruleConfig = rule.rule;
 	switch (ruleConfig.type) {
 		case CFRuleType.colorScale: return localeService.t("sheets-conditional-formatting-ui.ruleType.colorScale");
@@ -4187,7 +4238,8 @@ const getRuleDescribe = (rule, localeService) => {
 			case CFSubRuleType.uniqueValues: return localeService.t("sheets-conditional-formatting-ui.subRuleType.uniqueValues");
 			case CFSubRuleType.number: {
 				const operator = ruleConfig.operator;
-				return localeService.t(`sheets-conditional-formatting-ui.preview.describe.${operator}`, ...Array.isArray(ruleConfig.value) ? ruleConfig.value.map((e) => String(e)) : [String(ruleConfig.value || "")]);
+				const values = Array.isArray(ruleConfig.value) ? ruleConfig.value.map((value) => String(value)) : [String(ruleConfig.value ?? "")];
+				return localeService.t(`sheets-conditional-formatting-ui.preview.describe.${operator}`, ...values);
 			}
 			case CFSubRuleType.text: {
 				const operator = ruleConfig.operator;
@@ -4197,15 +4249,16 @@ const getRuleDescribe = (rule, localeService) => {
 				const operator = ruleConfig.operator;
 				return localeService.t(`sheets-conditional-formatting-ui.preview.describe.${operator}`);
 			}
-			case CFSubRuleType.rank: if (ruleConfig.isPercent) {
-				if (ruleConfig.isBottom) return localeService.t("sheets-conditional-formatting-ui.preview.describe.bottomNPercent", String(ruleConfig.value));
-				else return localeService.t("sheets-conditional-formatting-ui.preview.describe.topNPercent", String(ruleConfig.value));
-			} else if (ruleConfig.isBottom) return localeService.t("sheets-conditional-formatting-ui.preview.describe.bottomN", String(ruleConfig.value));
-			else return localeService.t("sheets-conditional-formatting-ui.preview.describe.topN", String(ruleConfig.value));
+			case CFSubRuleType.rank:
+				if (ruleConfig.isPercent) return localeService.t(ruleConfig.isBottom ? "sheets-conditional-formatting-ui.preview.describe.bottomNPercent" : "sheets-conditional-formatting-ui.preview.describe.topNPercent", String(ruleConfig.value));
+				return localeService.t(ruleConfig.isBottom ? "sheets-conditional-formatting-ui.preview.describe.bottomN" : "sheets-conditional-formatting-ui.preview.describe.topN", String(ruleConfig.value));
 			case CFSubRuleType.formula: return localeService.t("sheets-conditional-formatting-ui.ruleType.formula");
 		}
 	}
-};
+}
+
+//#endregion
+//#region src/views/panel/RuleList.tsx
 function RuleList(props) {
 	const { SelectComponent = Select } = props;
 	const { onClick } = props;
@@ -4408,7 +4461,7 @@ function RuleList(props) {
 						children: rule.ranges.map((range) => serializeRange(range)).join(",")
 					})]
 				}),
-				/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Preview, { rule: rule.rule }) }),
+				/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(ConditionalFormattingRulePreview, { rule: rule.rule }) }),
 				/* @__PURE__ */ jsx("div", {
 					className: clsx("univer-absolute univer-right-1 univer-hidden univer-size-6 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded univer-text-red-500 group-hover:univer-flex hover:univer-bg-gray-200 rtl:univer-left-1 rtl:univer-right-auto", { "univer-flex univer-items-center univer-justify-center": draggingId === rule.cfId }),
 					onClick: (e) => {
@@ -4433,8 +4486,10 @@ const ConditionFormattingPanel = (props) => {
 		setIsShowRuleEditor(true);
 	};
 	const handleCancel = () => {
+		var _props$onEditorExit;
 		setIsShowRuleEditor(false);
 		setCurrentEditRule(void 0);
+		(_props$onEditorExit = props.onEditorExit) === null || _props$onEditorExit === void 0 || _props$onEditorExit.call(props);
 	};
 	const handleRuleClick = (rule) => {
 		setCurrentEditRule(rule);
@@ -5266,4 +5321,4 @@ UniverSheetsConditionalFormattingUIPlugin = __decorate([
 ], UniverSheetsConditionalFormattingUIPlugin);
 
 //#endregion
-export { AddAverageCfCommand, AddColorScaleConditionalRuleCommand, AddDataBarConditionalRuleCommand, AddDuplicateValuesCfCommand, AddIconSetConditionalRuleCommand, AddNumberCfCommand, AddRankCfCommand, AddTextCfCommand, AddTimePeriodCfCommand, AddUniqueValuesCfCommand, ConditionalFormattingClearController, OpenConditionalFormattingOperator, menuSchema as SheetsConditionalFormattingUIMenuSchema, UniverSheetsConditionalFormattingMobileUIPlugin, UniverSheetsConditionalFormattingUIPlugin };
+export { AddAverageCfCommand, AddColorScaleConditionalRuleCommand, AddDataBarConditionalRuleCommand, AddDuplicateValuesCfCommand, AddIconSetConditionalRuleCommand, AddNumberCfCommand, AddRankCfCommand, AddTextCfCommand, AddTimePeriodCfCommand, AddUniqueValuesCfCommand, CF_PANEL_KEY, ConditionalFormattingClearController, ConditionalFormattingRulePreview, OpenConditionalFormattingOperator, menuSchema as SheetsConditionalFormattingUIMenuSchema, UniverSheetsConditionalFormattingMobileUIPlugin, UniverSheetsConditionalFormattingUIPlugin, getRuleDescribe };