@univerjs/sheets-numfmt-ui 1.0.3 → 1.1.0

package/lib/es/index.js

@@ -1,10 +1,10 @@
-import { AddDecimalCommand, CURRENCYFORMAT, DATEFMTLISG, NUMBERFORMAT, SHEETS_NUMFMT_PLUGIN_CONFIG_KEY, SetCurrencyCommand, SetNumfmtCommand, SetPercentCommand, SheetsNumfmtCellContentController, SubtractDecimalCommand, UniverSheetsNumfmtPlugin, getCurrencyFormatOptions, getCurrencySymbolByLocale, getCurrencySymbolIconByLocale, getCurrencyType, getDateFormatOptions, getDecimalFromPattern, getNumberFormatOptions, getPatternPreview, getPatternPreviewIgnoreGeneral, getPatternType, isPatternHasDecimal, setPatternDecimal } from "@univerjs/sheets-numfmt";
+import { AddDecimalCommand, CURRENCYFORMAT, NUMBERFORMAT, SHEETS_NUMFMT_PLUGIN_CONFIG_KEY, SetCurrencyCommand, SetNumfmtCommand, SetPercentCommand, SheetsNumfmtCellContentController, SubtractDecimalCommand, UniverSheetsNumfmtPlugin, getCurrencyFormatOptions, getCurrencySymbolByLocale, getCurrencySymbolIconByLocale, getCurrencyType, getDateFormatOptions, getDecimalFromPattern, getNumberFormatOptions, getPatternPreview, getPatternPreviewIgnoreGeneral, getPatternType, isPatternHasDecimal, setPatternDecimal } from "@univerjs/sheets-numfmt";
 import { ComponentManager, ILayoutService, IMenuManagerService, ISidebarService, IconManager, MenuItemType, RibbonStartGroup, UniverMobileUIPlugin, getMenuHiddenObservable, useDependency, useObservable } from "@univerjs/ui";
 import { CellValueType, CommandType, DEFAULT_TEXT_FORMAT_EXCEL, DependentOn, Disposable, DisposableCollection, ICommandService, IConfigService, ILocalStorageService, IUniverInstanceService, Inject, Injector, InterceptorEffectEnum, LocaleService, Optional, Plugin, Range, RegionService, ThemeService, Tools, UniverInstanceType, currencySymbols, excelSerialToDateTimeParts, fromCallback, getNumfmtParseValueFilter, isDefaultFormat, isPatternEqualWithoutDecimal, isRealNum, isTextFormat, merge, numfmt, registerDependencies, toDisposable, touchDependencies, willLoseNumericPrecision } from "@univerjs/core";
 import { IRenderManagerService, UniverRenderEnginePlugin } from "@univerjs/engine-render";
-import { AFTER_CELL_EDIT, BEFORE_CELL_EDIT, INTERCEPTOR_POINT, INumfmtService, RangeProtectionPermissionEditPoint, RemoveNumfmtMutation, SetNumfmtMutation, SetRangeValuesCommand, SheetInterceptorService, SheetsSelectionsService, TextToNumberCommand, UniverSheetsPlugin, WorkbookEditablePermission, WorksheetEditPermission, WorksheetSetCellStylePermission, factoryRemoveNumfmtUndoMutation, factorySetNumfmtUndoMutation, getSheetCommandTarget, transformCellsToRange } from "@univerjs/sheets";
+import { AFTER_CELL_EDIT, BEFORE_CELL_EDIT, INTERCEPTOR_POINT, INumfmtService, RangeProtectionPermissionEditPoint, RemoveNumfmtMutation, SetNumfmtMutation, SetRangeValuesCommand, SetRangeValuesMutation, SheetInterceptorService, SheetsSelectionsService, TextToNumberCommand, UniverSheetsPlugin, WorkbookEditablePermission, WorksheetEditPermission, WorksheetSetCellStylePermission, factoryRemoveNumfmtUndoMutation, factorySetNumfmtUndoMutation, getSheetCommandTarget, transformCellsToRange } from "@univerjs/sheets";
 import { CellAlertManagerService, CellAlertType, IEditorBridgeService, IRepeatLastActionService, RepeatLastActionPermission, SheetSkeletonManagerService, UniverSheetsMobileUIPlugin, UniverSheetsUIPlugin, deriveStateFromActiveSheet$, getCurrentRangeDisable$ } from "@univerjs/sheets-ui";
-import { Observable, combineLatest, filter, map, merge as merge$1 } from "rxjs";
+import { Observable, combineLatest, distinctUntilChanged, filter, map, merge as merge$1, startWith } from "rxjs";
 import { debounceTime, map as map$1, switchMap, tap } from "rxjs/operators";
 import { Button, Input, InputNumber, MobileActionRowGroup, MobileSelect, Select, SelectList, Separator, borderClassName, clsx, scrollbarClassName } from "@univerjs/design";
 import { createContext, createElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
@@ -20,7 +20,7 @@ const CloseNumfmtPanelOperator = {
 };
 
 //#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) {
@@ -31,7 +31,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];
@@ -44,14 +44,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,
@@ -62,7 +62,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);
@@ -70,7 +70,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);
@@ -428,15 +428,56 @@ function Options() {
 	});
 }
 
+//#endregion
+//#region src/menu/numfmt-menu-util.ts
+const FORMAT_TYPE_LABELS = {
+	currency: "sheets-numfmt-ui.currency",
+	date: "sheets-numfmt-ui.date",
+	datetime: "sheets-numfmt-ui.dateTime",
+	general: "sheets-numfmt-ui.general",
+	grouped: "sheets-numfmt-ui.number",
+	number: "sheets-numfmt-ui.number",
+	percent: "sheets-numfmt-ui.percent",
+	scientific: "sheets-numfmt-ui.scientific",
+	text: "sheets-numfmt-ui.text",
+	time: "sheets-numfmt-ui.time"
+};
+function getNumberFormatLabelKey(pattern, currencySymbol) {
+	if (!pattern || isDefaultFormat(pattern)) return "sheets-numfmt-ui.general";
+	if (isTextFormat(pattern)) return "sheets-numfmt-ui.text";
+	const preset = MENU_OPTIONS(currencySymbol).find((option) => typeof option === "object" && option.pattern && isPatternEqualWithoutDecimal(pattern, option.pattern));
+	if (preset && typeof preset === "object") return preset.label;
+	return FORMAT_TYPE_LABELS[getPatternType(pattern)] ?? "sheets-numfmt-ui.moreFmt";
+}
+function getCurrentNumfmtPattern$(accessor) {
+	const commandService = accessor.get(ICommandService);
+	const instanceService = accessor.get(IUniverInstanceService);
+	const selectionService = accessor.get(SheetsSelectionsService);
+	const commandIds = [
+		RemoveNumfmtMutation.id,
+		SetNumfmtMutation.id,
+		SetRangeValuesMutation.id
+	];
+	return deriveStateFromActiveSheet$(instanceService, void 0, ({ worksheet }) => merge$1(selectionService.selectionChanged$, fromCallback(commandService.onCommandExecuted.bind(commandService)).pipe(filter(([command]) => commandIds.includes(command.id)))).pipe(startWith(null), map(() => {
+		var _worksheet$getCellSty;
+		const selection = selectionService.getCurrentLastSelection();
+		if (!selection) return;
+		const cell = selection.primary ?? selection.range;
+		return (_worksheet$getCellSty = worksheet.getCellStyle(cell.startRow, cell.startColumn)) === null || _worksheet$getCellSty === void 0 || (_worksheet$getCellSty = _worksheet$getCellSty.n) === null || _worksheet$getCellSty === void 0 ? void 0 : _worksheet$getCellSty.pattern;
+	}))).pipe(distinctUntilChanged());
+}
+
 //#endregion
 //#region src/menu/menu.ts
 function CurrencySymbolIconMenuItem(accessor) {
+	const regionService = accessor.get(RegionService);
 	return {
-		icon: accessor.get(RegionService).currentRegion$.pipe(map((region) => getCurrencySymbolIconByLocale(region).icon)),
+		icon: regionService.currentRegion$.pipe(map((region) => getCurrencySymbolIconByLocale(region).icon)),
 		id: SetCurrencyCommand.id,
 		title: "sheets-numfmt-ui.currency",
 		tooltip: "sheets-numfmt-ui.currency",
 		type: MenuItemType.BUTTON,
+		activated$: combineLatest([getCurrentNumfmtPattern$(accessor), regionService.currentRegion$]).pipe(map(([pattern, region]) => !!pattern && getPatternType(pattern) === "currency" && getCurrencyType(pattern) === getCurrencySymbolIconByLocale(region).symbol), distinctUntilChanged()),
 		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
 		disabled$: getCurrentRangeDisable$(accessor, {
 			workbookTypes: [WorkbookEditablePermission],
@@ -482,6 +523,7 @@ function PercentMenuItem(accessor) {
 		title: "sheets-numfmt-ui.percent",
 		tooltip: "sheets-numfmt-ui.percent",
 		type: MenuItemType.BUTTON,
+		activated$: getCurrentNumfmtPattern$(accessor).pipe(map((pattern) => !!pattern && getPatternType(pattern) === "percent"), distinctUntilChanged()),
 		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
 		disabled$: getCurrentRangeDisable$(accessor, {
 			workbookTypes: [WorkbookEditablePermission],
@@ -491,35 +533,13 @@ function PercentMenuItem(accessor) {
 	};
 }
 function FactoryOtherMenuItem(accessor) {
-	const univerInstanceService = accessor.get(IUniverInstanceService);
-	const commandService = accessor.get(ICommandService);
 	const localeService = accessor.get(LocaleService);
 	const regionService = accessor.get(RegionService);
-	const selectionManagerService = accessor.get(SheetsSelectionsService);
-	const commandList = [RemoveNumfmtMutation.id, SetNumfmtMutation.id];
-	const value$ = deriveStateFromActiveSheet$(univerInstanceService, "", ({ workbook, worksheet }) => new Observable((subscribe) => merge$1(selectionManagerService.selectionMoveEnd$, regionService.currentRegion$, fromCallback(commandService.onCommandExecuted.bind(commandService)).pipe(filter(([commandInfo]) => commandList.includes(commandInfo.id)))).subscribe(() => {
-		const selections = selectionManagerService.getCurrentSelections();
-		if (selections && selections[0]) {
-			var _workbook$getStyles$g, _worksheet$getCell;
-			const range = selections[0].range;
-			const row = range.startRow;
-			const col = range.startColumn;
-			const numfmtValue = (_workbook$getStyles$g = workbook.getStyles().get((_worksheet$getCell = worksheet.getCell(row, col)) === null || _worksheet$getCell === void 0 ? void 0 : _worksheet$getCell.s)) === null || _workbook$getStyles$g === void 0 ? void 0 : _workbook$getStyles$g.n;
-			const pattern = numfmtValue === null || numfmtValue === void 0 ? void 0 : numfmtValue.pattern;
-			const currencySymbol = getCurrencySymbolByLocale(regionService.getCurrentRegion());
-			let value = localeService.t("sheets-numfmt-ui.general");
-			if (isDefaultFormat(pattern)) {
-				subscribe.next(value);
-				return;
-			}
-			if (pattern) {
-				const item = MENU_OPTIONS(currencySymbol).filter((item) => typeof item === "object" && item.pattern).find((item) => isPatternEqualWithoutDecimal(pattern, item.pattern));
-				if (item && typeof item === "object" && item.pattern) value = localeService.t(item.label);
-				else value = localeService.t("sheets-numfmt-ui.moreFmt");
-			}
-			subscribe.next(value);
-		}
-	})));
+	const value$ = combineLatest([
+		getCurrentNumfmtPattern$(accessor),
+		regionService.currentRegion$,
+		localeService.currentLocale$
+	]).pipe(map(([pattern, region]) => localeService.t(getNumberFormatLabelKey(pattern, getCurrencySymbolByLocale(region)))), distinctUntilChanged());
 	return {
 		label: MORE_NUMFMT_TYPE_KEY,
 		id: OpenNumfmtPanelOperator.id,
@@ -591,7 +611,7 @@ const menuSchema = { [RibbonStartGroup.NUMBER]: {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-numfmt-ui";
-var version = "1.0.3";
+var version = "1.1.0";
 
 //#endregion
 //#region src/config/config.ts
@@ -670,39 +690,17 @@ function createMobileNumberFormatMenuConfig(currencySymbol) {
 			commandId: AddDecimalCommand.id
 		}],
 		detailOptions,
-		customPatterns: [.../* @__PURE__ */ new Set([
-			...CURRENCYFORMAT.map((item) => item.suffix(currencySymbol)),
-			...DATEFMTLISG.map((item) => item.suffix),
-			...NUMBERFORMAT.map((item) => item.suffix)
-		])]
+		customPatterns: [.../* @__PURE__ */ new Set([...CURRENCYFORMAT.map((item) => item.suffix(currencySymbol)), ...NUMBERFORMAT.map((item) => item.suffix)])]
 	};
 }
 function FactoryMobileOtherMenuItem(accessor) {
-	const univerInstanceService = accessor.get(IUniverInstanceService);
-	const commandService = accessor.get(ICommandService);
 	const localeService = accessor.get(LocaleService);
 	const regionService = accessor.get(RegionService);
-	const selectionManagerService = accessor.get(SheetsSelectionsService);
-	const commandList = [RemoveNumfmtMutation.id, SetNumfmtMutation.id];
-	const value$ = deriveStateFromActiveSheet$(univerInstanceService, "", ({ workbook, worksheet }) => new Observable((subscribe) => merge$1(selectionManagerService.selectionMoveEnd$, regionService.currentRegion$, fromCallback(commandService.onCommandExecuted.bind(commandService)).pipe(filter(([commandInfo]) => commandList.includes(commandInfo.id)))).subscribe(() => {
-		var _selectionManagerServ, _workbook$getStyles$g, _worksheet$getCell;
-		const selection = (_selectionManagerServ = selectionManagerService.getCurrentSelections()) === null || _selectionManagerServ === void 0 ? void 0 : _selectionManagerServ[0];
-		if (!selection) return;
-		const { startRow, startColumn } = selection.range;
-		const numfmtValue = (_workbook$getStyles$g = workbook.getStyles().get((_worksheet$getCell = worksheet.getCell(startRow, startColumn)) === null || _worksheet$getCell === void 0 ? void 0 : _worksheet$getCell.s)) === null || _workbook$getStyles$g === void 0 ? void 0 : _workbook$getStyles$g.n;
-		const pattern = numfmtValue === null || numfmtValue === void 0 ? void 0 : numfmtValue.pattern;
-		const currencySymbol = getCurrencySymbolByLocale(regionService.getCurrentRegion());
-		let value = localeService.t("sheets-numfmt-ui.general");
-		if (isDefaultFormat(pattern)) {
-			subscribe.next(value);
-			return;
-		}
-		if (pattern) {
-			const item = MENU_OPTIONS(currencySymbol).filter((option) => typeof option === "object" && option.pattern).find((option) => isPatternEqualWithoutDecimal(pattern, option.pattern));
-			value = item && typeof item === "object" && item.pattern ? localeService.t(item.label) : localeService.t("sheets-numfmt-ui.moreFmt");
-		}
-		subscribe.next(value);
-	})));
+	const value$ = combineLatest([
+		getCurrentNumfmtPattern$(accessor),
+		regionService.currentRegion$,
+		localeService.currentLocale$
+	]).pipe(map(([pattern, region]) => localeService.t(getNumberFormatLabelKey(pattern, getCurrencySymbolByLocale(region)))), distinctUntilChanged());
 	return {
 		id: MOBILE_NUMFMT_MENU_ID,
 		title: "sheets-numfmt-ui.title",
@@ -725,15 +723,27 @@ function FactoryMobileOtherMenuItem(accessor) {
 function MobileCustomFormat(props) {
 	const { patterns, onConfirm } = props;
 	const localeService = useDependency(LocaleService);
+	const locale = useObservable(localeService.currentLocale$, localeService.getCurrentLocale());
 	const [pattern, setPattern] = useState("");
 	const title = localeService.t("sheets-numfmt-ui.customFormat");
+	const options = useMemo(() => [.../* @__PURE__ */ new Set([
+		...patterns,
+		...getDateFormatOptions(locale).map((item) => item.value),
+		...pattern ? [pattern] : []
+	])].map((value) => ({
+		label: value,
+		value
+	})), [
+		locale,
+		pattern,
+		patterns
+	]);
 	return /* @__PURE__ */ jsxs("div", {
 		"data-u-comp": "mobile-custom-format",
 		className: "univer-flex univer-h-full univer-min-h-0 univer-flex-col univer-gap-4",
 		children: [
 			/* @__PURE__ */ jsx(Input, {
 				className: "univer-shrink-0",
-				size: "large",
 				"aria-label": title,
 				value: pattern,
 				placeholder: title,
@@ -742,10 +752,7 @@ function MobileCustomFormat(props) {
 			/* @__PURE__ */ jsx(MobileSelect, {
 				className: "univer-w-full univer-shrink-0 [&>div]:univer-font-mono",
 				value: pattern || title,
-				options: patterns.map((item) => ({
-					label: item,
-					value: item
-				})),
+				options,
 				onChange: setPattern
 			}),
 			/* @__PURE__ */ jsx("div", {
@@ -1619,14 +1626,15 @@ function CustomFormat(props) {
 	const userHabitController = useDependency(UserHabitController);
 	const localStorageService = useDependency(ILocalStorageService);
 	const localeService = useDependency(LocaleService);
+	const locale = useObservable(localeService.currentLocale$, localeService.getCurrentLocale());
 	const [pattern, setPattern] = useState(defaultPattern);
 	useLayoutEffect(() => {
 		onActionChange(() => {
 			userHabitController.markHabit(key$1, pattern);
 			localStorageService.getItem(historyPatternKey).then((list = []) => {
 				const _list = [.../* @__PURE__ */ new Set([pattern, ...list || []])].splice(0, 10).filter((e) => !!e);
-				localStorageService.setItem(historyPatternKey, _list);
-			});
+				return localStorageService.setItem(historyPatternKey, _list);
+			}).catch(console.error);
 			return pattern;
 		});
 	}, [
@@ -1641,18 +1649,22 @@ function CustomFormat(props) {
 		localStorageService.getItem(historyPatternKey).then((historyList) => {
 			const list = [
 				...CURRENCYFORMAT.map((item) => item.suffix("$")),
-				...DATEFMTLISG.map((item) => item.suffix),
+				...getDateFormatOptions(locale).map((item) => item.value),
 				...NUMBERFORMAT.map((item) => item.suffix),
 				...historyList ?? []
 			];
 			return userHabitController.addHabit(key$1, []).then(() => userHabitController.getHabit(key$1, list));
 		}).then((list) => {
 			if (!cancelled) setOptions([...new Set(list)]);
-		});
+		}).catch(console.error);
 		return () => {
 			cancelled = true;
 		};
-	}, [localStorageService, userHabitController]);
+	}, [
+		locale,
+		localStorageService,
+		userHabitController
+	]);
 	const handleClick = (p) => {
 		setPattern(p);
 		onChange(p);
@@ -1694,7 +1706,7 @@ function CustomFormat(props) {
 //#region src/views/components/Date.tsx
 const isDatePanel = (pattern) => {
 	const info = numfmt.getFormatInfo(pattern);
-	return getDateFormatOptions().map((item) => item.value).includes(pattern) || [
+	return [
 		"date",
 		"datetime",
 		"time"
@@ -1702,20 +1714,15 @@ const isDatePanel = (pattern) => {
 };
 function DatePanel(props) {
 	const { onActionChange, onChange, defaultPattern } = props;
-	const options = useMemo(getDateFormatOptions, []);
 	const localeService = useDependency(LocaleService);
-	const [suffix, setSuffix] = useState(() => {
-		if (defaultPattern) {
-			const item = options.find((item) => item.value === defaultPattern);
-			if (item) return item.value;
-		}
-		return options[0].value;
-	});
+	const locale = useObservable(localeService.currentLocale$, localeService.getCurrentLocale());
+	const [suffix, setSuffix] = useState(() => defaultPattern || getDateFormatOptions(locale)[0].value);
+	const options = useMemo(() => getDateFormatOptions(locale, suffix), [locale, suffix]);
 	useLayoutEffect(() => {
 		onActionChange(() => suffix);
 	}, [onActionChange, suffix]);
 	const handleChange = (v) => {
-		if (v === void 0) return;
+		if (typeof v !== "string") return;
 		setSuffix(v);
 		onChange(v);
 	};
@@ -1888,47 +1895,51 @@ const useNextTick = () => {
 
 //#endregion
 //#region src/views/SheetNumfmtPanel.tsx
+const TYPE_OPTIONS = [
+	{
+		label: "sheets-numfmt-ui.general",
+		component: GeneralPanel
+	},
+	{
+		label: "sheets-numfmt-ui.accounting",
+		component: AccountingPanel
+	},
+	{
+		label: "sheets-numfmt-ui.currency",
+		component: CurrencyPanel
+	},
+	{
+		label: "sheets-numfmt-ui.date",
+		component: DatePanel
+	},
+	{
+		label: "sheets-numfmt-ui.thousandthPercentile",
+		component: ThousandthPercentilePanel
+	},
+	{
+		label: "sheets-numfmt-ui.customFormat",
+		component: CustomFormat
+	}
+];
 function SheetNumfmtPanel(props) {
-	var _typeOptions$find;
+	const { row, col, defaultPattern } = props.value;
+	return /* @__PURE__ */ createElement(SheetNumfmtPanelContent, {
+		...props,
+		key: `${row}_${col}_${defaultPattern}`
+	});
+}
+function SheetNumfmtPanelContent(props) {
+	var _TYPE_OPTIONS$find;
+	const { onChange } = props;
 	const { defaultValue, defaultPattern, row, col } = props.value;
 	const localeService = useDependency(LocaleService);
+	useObservable(localeService.currentLocale$, localeService.getCurrentLocale());
 	const currentPatternRef = useRef(() => "");
 	const nextTick = useNextTick();
-	const typeOptions = useMemo(() => {
-		return [
-			{
-				label: "sheets-numfmt-ui.general",
-				component: GeneralPanel
-			},
-			{
-				label: "sheets-numfmt-ui.accounting",
-				component: AccountingPanel
-			},
-			{
-				label: "sheets-numfmt-ui.currency",
-				component: CurrencyPanel
-			},
-			{
-				label: "sheets-numfmt-ui.date",
-				component: DatePanel
-			},
-			{
-				label: "sheets-numfmt-ui.thousandthPercentile",
-				component: ThousandthPercentilePanel
-			},
-			{
-				label: "sheets-numfmt-ui.customFormat",
-				component: CustomFormat
-			}
-		].map((item) => ({
-			...item,
-			label: localeService.t(item.label)
-		}));
-	}, [localeService]);
 	const [type, setType] = useState(findDefaultType);
 	const [key, setKey] = useState(() => `${row}_${col}_${defaultPattern}`);
 	const { mark, userHabitCurrency } = useCurrencyOptions(() => setKey(`${row}_${col}_${defaultPattern}_userCurrency`));
-	const BusinessComponent = (_typeOptions$find = typeOptions.find((item) => item.label === type)) === null || _typeOptions$find === void 0 ? void 0 : _typeOptions$find.component;
+	const BusinessComponent = (_TYPE_OPTIONS$find = TYPE_OPTIONS.find((item) => item.label === type)) === null || _TYPE_OPTIONS$find === void 0 ? void 0 : _TYPE_OPTIONS$find.component;
 	function findDefaultType() {
 		return [
 			isGeneralPanel,
@@ -1936,25 +1947,25 @@ function SheetNumfmtPanel(props) {
 			isCurrencyPanel,
 			isDatePanel,
 			isThousandthPercentilePanel
-		].reduce((pre, curFn, index) => pre || (curFn(defaultPattern) ? typeOptions[index].label : ""), "") || typeOptions[0].label;
+		].reduce((pre, curFn, index) => pre || (curFn(defaultPattern) ? TYPE_OPTIONS[index].label : ""), "") || "sheets-numfmt-ui.customFormat";
 	}
-	const selectOptions = typeOptions.map((option) => ({
-		label: option.label,
+	const selectOptions = TYPE_OPTIONS.map((option) => ({
+		label: localeService.t(option.label),
 		value: option.label
 	}));
 	const handleSelect = (value) => {
 		setType(value);
-		nextTick(() => props.onChange({
+		nextTick(() => onChange({
 			type: "change",
 			value: currentPatternRef.current() || ""
 		}));
 	};
 	const handleChange = useCallback((v) => {
-		props.onChange({
+		onChange({
 			type: "change",
 			value: v
 		});
-	}, []);
+	}, [onChange]);
 	const handleActionChange = useCallback((action) => {
 		currentPatternRef.current = action;
 	}, []);
@@ -1962,13 +1973,13 @@ function SheetNumfmtPanel(props) {
 		const pattern = currentPatternRef.current() || "";
 		const currency = getCurrencyType(pattern);
 		if (currency) mark(currency);
-		props.onChange({
+		onChange({
 			type: "confirm",
 			value: pattern
 		});
 	};
 	const handleCancel = () => {
-		props.onChange({
+		onChange({
 			type: "cancel",
 			value: ""
 		});
@@ -1979,14 +1990,6 @@ function SheetNumfmtPanel(props) {
 		defaultValue,
 		defaultPattern
 	};
-	useEffect(() => {
-		setType(findDefaultType());
-		setKey(`${row}_${col}_${defaultPattern}`);
-	}, [
-		row,
-		col,
-		defaultPattern
-	]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: clsx("univer-flex univer-h-full univer-flex-col univer-justify-between univer-overflow-y-auto univer-pb-5", scrollbarClassName),
 		children: [/* @__PURE__ */ jsxs("div", { children: [

package/lib/index.css

@@ -130,6 +130,10 @@
   border-radius: .5rem;
 }
 
+.univer-bg-gray-200 {
+  background-color: var(--univer-gray-200);
+}
+
 .univer-p-1\.5 {
   padding: .375rem;
 }