@univerjs/sheets-table-ui 1.0.3 → 1.1.0

package/lib/index.js

@@ -1,14 +1,14 @@
-import { AddSheetTableCommand, AddTableThemeCommand, DeleteSheetTableCommand, RemoveTableThemeCommand, SHEET_TABLE_CUSTOM_THEME_PREFIX, SetSheetTableCommand, SetSheetTableFilterCommand, SetSheetTableFilterMutation, SetSheetTableMutation, SetSheetTableSortStateCommand, SheetTableInsertColCommand, SheetTableInsertColumnAtCommand, SheetTableInsertRowAtCommand, SheetTableInsertRowCommand, SheetTableRemoveColCommand, SheetTableRemoveColumnAtCommand, SheetTableRemoveRowCommand, SheetTableService, SheetsTableController, SheetsTableSortStateEnum, TABLE_FILTER_EMPTY_VALUE, TableColumnFilterTypeEnum, TableConditionTypeEnum, TableDateCompareTypeEnum, TableManager, TableNumberCompareTypeEnum, TableStringCompareTypeEnum, UniverSheetsTablePlugin, compileTableRecordFilter, customEmptyThemeWithBorderStyle, getExistingNamesSet, getTableRecordValue, getTableRecordValueKey, isColorTableFilter, isConditionFilter, isManualTableFilter, isRecordTableFilter, processStyleWithBorderStyle, validateSheetTableName } from "@univerjs/sheets-table";
+import { AddSheetTableCommand, AddTableThemeCommand, DeleteSheetTableCommand, RemoveTableThemeCommand, SHEET_TABLE_CUSTOM_THEME_PREFIX, SetSheetTableCommand, SetSheetTableFilterCommand, SetSheetTableFilterMutation, SetSheetTableMutation, SetSheetTableSortStateCommand, SheetTableInsertColCommand, SheetTableInsertColumnAtCommand, SheetTableInsertRowAtCommand, SheetTableInsertRowCommand, SheetTableRemoveColCommand, SheetTableRemoveColumnAtCommand, SheetTableRemoveRowCommand, SheetTableService, SheetsTableButtonStateEnum, SheetsTableController, SheetsTableSortStateEnum, TABLE_FILTER_EMPTY_VALUE, TableColumnFilterTypeEnum, TableConditionTypeEnum, TableDateCompareTypeEnum, TableManager, TableNumberCompareTypeEnum, TableStringCompareTypeEnum, UniverSheetsTablePlugin, compileTableRecordFilter, customEmptyThemeWithBorderStyle, getExistingNamesSet, getTableRecordValue, getTableRecordValueKey, isColorTableFilter, isConditionFilter, isManualTableFilter, isRecordTableFilter, processStyleWithBorderStyle, validateSheetTableName } from "@univerjs/sheets-table";
 import { ComponentManager, ContextMenuGroup, ContextMenuPosition, IDialogService, IMenuManagerService, ISidebarService, IconManager, MenuItemType, MobileDrawer, RibbonDataGroup, UniverMobileUIPlugin, getMenuHiddenObservable, useDependency, useObservable } from "@univerjs/ui";
 import { ColorKit, CommandType, DEFAULT_STYLES, DependentOn, Disposable, ErrorService, FilterSelectionMode, ICommandService, IConfigService, IContextService, IPermissionService, IUndoRedoService, IUniverInstanceService, Inject, Injector, InterceptorEffectEnum, LocaleService, ObjectMatrix, Plugin, RecordValueType, Rectangle, RxDisposable, UniverInstanceType, VerticalAlign, cellToRange, fromCallback, generateRandomId, getColorStyle, merge, registerDependencies, toDisposable, touchDependencies } from "@univerjs/core";
 import { INTERCEPTOR_POINT, RangeThemeStyle, SelectRangeCommand, SetRangeThemeMutation, SetRangeValuesMutation, SetSelectionsOperation, SetVerticalTextAlignCommand, SheetInterceptorService, SheetRangeThemeModel, SheetsSelectionsService, UniverSheetsPlugin, WorkbookEditablePermission, WorkbookPermissionService, expandToContinuousRange, getPrimaryForRange, getSheetCommandTarget, isSingleCellSelection } from "@univerjs/sheets";
-import { ExpandSelectionCommand, ISheetSelectionRenderService, MoveSelectionCommand, MoveSelectionEnterAndTabCommand, SHEET_VIEW_KEY, SelectAllCommand, SetScrollOperation, SetZoomRatioOperation, SheetCanvasPopManagerService, SheetSkeletonManagerService, UniverSheetsMobileUIPlugin, UniverSheetsUIPlugin, getCoordByCell, getCurrentRangeDisable$, getTransformCoord } from "@univerjs/sheets-ui";
+import { ExpandSelectionCommand, ISheetSelectionRenderService, MoveSelectionCommand, MoveSelectionEnterAndTabCommand, SHEET_VIEW_KEY, SelectAllCommand, SetScrollOperation, SetZoomRatioOperation, SheetCanvasPopManagerService, SheetSkeletonManagerService, UniverSheetsMobileUIPlugin, UniverSheetsUIPlugin, getCoordByCell, getCurrentRangeDisable$ } from "@univerjs/sheets-ui";
 import { Subject, distinctUntilChanged, filter, map, merge as merge$1, of, startWith, switchMap, takeUntil } from "rxjs";
-import { CURSOR_TYPE, DEFAULT_FONTFACE_PLANE, IRenderManagerService, Shape, UniverRenderEnginePlugin } from "@univerjs/engine-render";
+import { CURSOR_TYPE, DEFAULT_FONTFACE_PLANE, IRenderManagerService, Shape, UniverRenderEnginePlugin, Vector2 } from "@univerjs/engine-render";
 import { AIcon, AscendingIcon, BanIcon, CheckMarkIcon, CloseIcon, DeleteColumnDoubleIcon, DescendingIcon, DownIcon, IncreaseIcon, LeftInsertColumnDoubleIcon, MoreDownIcon, MoreLeftIcon, MoreRightIcon, RightInsertColumnDoubleIcon, SuccessIcon, TableIcon } from "@univerjs/icons";
-import { ActionRow, Button, ButtonGroup, CascaderList, Checkbox, ColorPicker, DatePicker, DateRangePicker, Dropdown, DropdownMenu, FormLayout, Input, InputNumber, MobileActionRow, MobileActionRowGroup, MobileColorPicker, MobileDropdown, MobileSelect, Segmented, Select, borderClassName, clsx, resetButtonClassName, scrollbarClassName } from "@univerjs/design";
+import { ActionRow, Button, ButtonGroup, CascaderList, Checkbox, ColorPicker, DatePicker, DateRangePicker, Dropdown, DropdownMenu, FormLayout, Input, MobileActionRow, MobileActionRowGroup, MobileColorPicker, MobileDropdown, MobileSelect, Segmented, Select, borderClassName, clsx, resetButtonClassName, scrollbarClassName } from "@univerjs/design";
 import { SortRangeCommand, SortType } from "@univerjs/sheets-sort";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { IDefinedNamesService, deserializeRangeWithSheet, serializeRange } from "@univerjs/engine-formula";
@@ -253,10 +253,10 @@ const menuSchema = {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-table-ui";
-var version = "1.0.3";
+var version = "1.1.0";
 
 //#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) {
@@ -267,7 +267,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];
@@ -280,14 +280,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,
@@ -298,7 +298,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);
@@ -306,7 +306,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);
@@ -535,7 +535,7 @@ let SheetsTableUiService = class SheetsTableUiService extends Disposable {
 		const checkedItems = [];
 		if (table) {
 			const filter = table.getTableFilterColumn(columnIndex);
-			if (isManualTableFilter(filter)) checkedItems.push(...filter.values.map((value) => value === TABLE_FILTER_EMPTY_VALUE ? this._localeService.t("sheets-table-ui.condition.empty") : value));
+			if (isManualTableFilter(filter)) checkedItems.push(...filter.values.map((value) => value === TABLE_FILTER_EMPTY_VALUE ? this._localeService.t("sheets-table-ui.condition.empty") : String(value)));
 			else if (isRecordTableFilter(filter)) {
 				const accepts = compileTableRecordFilter(filter);
 				const items = this.getTableFilterItems(unitId, table.getSubunitId(), tableId, columnIndex);
@@ -651,9 +651,8 @@ let SheetsTableUiService = class SheetsTableUiService extends Disposable {
 		let allItemsCount = 0;
 		for (let row = startRow; row <= endRow; row++) {
 			if (filteredRowsByOtherColumns.has(row)) continue;
-			let stringItem = this._sheetTableService.getCellValueWithConditionType(worksheet, row, column);
-			if (stringItem == null) stringItem = this._localeService.t("sheets-table-ui.condition.empty");
-			if (useRecordValues && typeof stringItem !== "string") stringItem = String(stringItem);
+			const cellValue = this._sheetTableService.getCellValueWithConditionType(worksheet, row, column);
+			const stringItem = cellValue == null ? this._localeService.t("sheets-table-ui.condition.empty") : String(cellValue);
 			const recordValue = useRecordValues ? getTableRecordValue(worksheet, row, column) : void 0;
 			const valueKey = recordValue ? getTableRecordValueKey(recordValue) : void 0;
 			const itemKey = valueKey ?? stringItem;
@@ -1136,10 +1135,79 @@ function getInitConditionInfo(tableFilter) {
 //#endregion
 //#region src/views/components/MobileSheetTableConditionPanel.tsx
 function MobileSheetTableConditionPanel(props) {
-	var _conditionInfo$info$d, _conditionInfo$info$d2, _conditionInfo$info$n, _conditionInfo$info$n3;
+	var _conditionInfo$info$n, _conditionInfo$info$n2, _conditionInfo$info$n3, _conditionInfo$info$n7, _conditionInfo$info$n8, _conditionInfo$info$n9, _conditionInfo$info$d, _conditionInfo$info$d2;
 	const { conditionInfo, onChange } = props;
 	const localeService = useDependency(LocaleService);
 	const injector = useDependency(Injector);
+	const [numberDraftState, setNumberDraftState] = useState({
+		value: conditionInfo.info.number,
+		type: conditionInfo.type,
+		compare: conditionInfo.compare,
+		text: String(conditionInfo.info.number ?? "")
+	});
+	if (!Object.is(numberDraftState.value, conditionInfo.info.number) || numberDraftState.type !== conditionInfo.type || numberDraftState.compare !== conditionInfo.compare) setNumberDraftState({
+		value: conditionInfo.info.number,
+		type: conditionInfo.type,
+		compare: conditionInfo.compare,
+		text: String(conditionInfo.info.number ?? "")
+	});
+	const numberDraft = numberDraftState.text;
+	const setNumberDraft = (text) => setNumberDraftState({
+		value: conditionInfo.info.number,
+		type: conditionInfo.type,
+		compare: conditionInfo.compare,
+		text
+	});
+	const [minDraftState, setMinDraftState] = useState({
+		value: (_conditionInfo$info$n = conditionInfo.info.numberRange) === null || _conditionInfo$info$n === void 0 ? void 0 : _conditionInfo$info$n[0],
+		type: conditionInfo.type,
+		compare: conditionInfo.compare,
+		text: String(((_conditionInfo$info$n2 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n2 === void 0 ? void 0 : _conditionInfo$info$n2[0]) ?? "")
+	});
+	if (!Object.is(minDraftState.value, (_conditionInfo$info$n3 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n3 === void 0 ? void 0 : _conditionInfo$info$n3[0]) || minDraftState.type !== conditionInfo.type || minDraftState.compare !== conditionInfo.compare) {
+		var _conditionInfo$info$n4, _conditionInfo$info$n5;
+		setMinDraftState({
+			value: (_conditionInfo$info$n4 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n4 === void 0 ? void 0 : _conditionInfo$info$n4[0],
+			type: conditionInfo.type,
+			compare: conditionInfo.compare,
+			text: String(((_conditionInfo$info$n5 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n5 === void 0 ? void 0 : _conditionInfo$info$n5[0]) ?? "")
+		});
+	}
+	const minDraft = minDraftState.text;
+	const setMinDraft = (text) => {
+		var _conditionInfo$info$n6;
+		return setMinDraftState({
+			value: (_conditionInfo$info$n6 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n6 === void 0 ? void 0 : _conditionInfo$info$n6[0],
+			type: conditionInfo.type,
+			compare: conditionInfo.compare,
+			text
+		});
+	};
+	const [maxDraftState, setMaxDraftState] = useState({
+		value: (_conditionInfo$info$n7 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n7 === void 0 ? void 0 : _conditionInfo$info$n7[1],
+		type: conditionInfo.type,
+		compare: conditionInfo.compare,
+		text: String(((_conditionInfo$info$n8 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n8 === void 0 ? void 0 : _conditionInfo$info$n8[1]) ?? "")
+	});
+	if (!Object.is(maxDraftState.value, (_conditionInfo$info$n9 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n9 === void 0 ? void 0 : _conditionInfo$info$n9[1]) || maxDraftState.type !== conditionInfo.type || maxDraftState.compare !== conditionInfo.compare) {
+		var _conditionInfo$info$n10, _conditionInfo$info$n11;
+		setMaxDraftState({
+			value: (_conditionInfo$info$n10 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n10 === void 0 ? void 0 : _conditionInfo$info$n10[1],
+			type: conditionInfo.type,
+			compare: conditionInfo.compare,
+			text: String(((_conditionInfo$info$n11 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n11 === void 0 ? void 0 : _conditionInfo$info$n11[1]) ?? "")
+		});
+	}
+	const maxDraft = maxDraftState.text;
+	const setMaxDraft = (text) => {
+		var _conditionInfo$info$n12;
+		return setMaxDraftState({
+			value: (_conditionInfo$info$n12 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n12 === void 0 ? void 0 : _conditionInfo$info$n12[1],
+			type: conditionInfo.type,
+			compare: conditionInfo.compare,
+			text
+		});
+	};
 	const [conditionVisible, setConditionVisible] = useState(false);
 	const [defaultDate] = useState(() => /* @__PURE__ */ new Date());
 	const cascaderOptions = getCascaderListOptions(injector);
@@ -1190,12 +1258,15 @@ function MobileSheetTableConditionPanel(props) {
 				placeholder: localeService.t("sheets-table-ui.filter.input-values-placeholder"),
 				value: conditionInfo.info.string,
 				onChange: (value) => handleConditionInfo({ string: value })
-			}) : /* @__PURE__ */ jsx(InputNumber, {
+			}) : /* @__PURE__ */ jsx(Input, {
 				className: "univer-h-7 univer-w-full",
-				value: conditionInfo.info.number,
-				controls: false,
+				inputMode: "decimal",
+				value: numberDraft,
+				"aria-invalid": numberDraft !== "" && !Number.isFinite(Number(numberDraft)),
+				onBlur: () => setNumberDraft(String(conditionInfo.info.number ?? "")),
 				onChange: (value) => {
-					if (value !== null) handleConditionInfo({ number: value });
+					setNumberDraft(value);
+					if (value.trim() !== "" && Number.isFinite(Number(value))) handleConditionInfo({ number: Number(value) });
 				}
 			}) }),
 			subComponentType === "DatePicker" && /* @__PURE__ */ jsx("div", {
@@ -1217,26 +1288,38 @@ function MobileSheetTableConditionPanel(props) {
 			subComponentType === "Inputs" && /* @__PURE__ */ jsxs("div", {
 				className: "univer-flex univer-items-center univer-gap-2",
 				children: [
-					/* @__PURE__ */ jsx(InputNumber, {
+					/* @__PURE__ */ jsx(Input, {
 						className: "univer-w-full",
-						value: (_conditionInfo$info$n = conditionInfo.info.numberRange) === null || _conditionInfo$info$n === void 0 ? void 0 : _conditionInfo$info$n[0],
-						controls: false,
+						inputMode: "decimal",
+						value: minDraft,
+						"aria-invalid": minDraft !== "" && !Number.isFinite(Number(minDraft)),
+						onBlur: () => {
+							var _conditionInfo$info$n13;
+							return setMinDraft(String(((_conditionInfo$info$n13 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n13 === void 0 ? void 0 : _conditionInfo$info$n13[0]) ?? ""));
+						},
 						onChange: (value) => {
-							if (value !== null) {
-								var _conditionInfo$info$n2;
-								handleConditionInfo({ numberRange: [value, (_conditionInfo$info$n2 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n2 === void 0 ? void 0 : _conditionInfo$info$n2[1]] });
+							setMinDraft(value);
+							if (value.trim() !== "" && Number.isFinite(Number(value))) {
+								var _conditionInfo$info$n14;
+								handleConditionInfo({ numberRange: [Number(value), (_conditionInfo$info$n14 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n14 === void 0 ? void 0 : _conditionInfo$info$n14[1]] });
 							}
 						}
 					}),
 					/* @__PURE__ */ jsx("span", { children: " - " }),
-					/* @__PURE__ */ jsx(InputNumber, {
+					/* @__PURE__ */ jsx(Input, {
 						className: "univer-w-full",
-						value: (_conditionInfo$info$n3 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n3 === void 0 ? void 0 : _conditionInfo$info$n3[1],
-						controls: false,
+						inputMode: "decimal",
+						value: maxDraft,
+						"aria-invalid": maxDraft !== "" && !Number.isFinite(Number(maxDraft)),
+						onBlur: () => {
+							var _conditionInfo$info$n15;
+							return setMaxDraft(String(((_conditionInfo$info$n15 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n15 === void 0 ? void 0 : _conditionInfo$info$n15[1]) ?? ""));
+						},
 						onChange: (value) => {
-							if (value !== null) {
-								var _conditionInfo$info$n4;
-								handleConditionInfo({ numberRange: [(_conditionInfo$info$n4 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n4 === void 0 ? void 0 : _conditionInfo$info$n4[0], value] });
+							setMaxDraft(value);
+							if (value.trim() !== "" && Number.isFinite(Number(value))) {
+								var _conditionInfo$info$n16;
+								handleConditionInfo({ numberRange: [(_conditionInfo$info$n16 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n16 === void 0 ? void 0 : _conditionInfo$info$n16[0], Number(value)] });
 							}
 						}
 					})
@@ -2024,10 +2107,9 @@ const SheetTableThemePanel = (props) => {
 	const table = tableManager.getTableById(unitId, tableId);
 	const rangeThemeModel = useDependency(SheetRangeThemeModel);
 	const sheetTableThemeUIController = useDependency(SheetTableThemeUIController);
-	const rangeThemeMapChanged = useObservable(rangeThemeModel.rangeThemeMapChange$);
-	const tableRefresh = useObservable(sheetTableThemeUIController.refreshTable$);
+	useObservable(rangeThemeModel.rangeThemeMapChange$);
+	useObservable(sheetTableThemeUIController.refreshTable$);
 	const errorService = useDependency(ErrorService);
-	const [, setRefresh] = useState(Math.random);
 	const themeConfig = useObservable(tableManager.tableThemeChanged$, {
 		theme: table === null || table === void 0 ? void 0 : table.getTableStyleId(),
 		oldTheme: table === null || table === void 0 ? void 0 : table.getTableStyleId(),
@@ -2086,9 +2168,6 @@ const SheetTableThemePanel = (props) => {
 			themeName
 		});
 	};
-	useEffect(() => {
-		setRefresh(Math.random());
-	}, [rangeThemeMapChanged, tableRefresh]);
 	if (!table) return null;
 	const headerBgIsDark = new ColorKit(headerBg).isDark();
 	const firstRowBgIsDark = new ColorKit(firstRowBg).isDark();
@@ -2158,6 +2237,7 @@ const SheetTableThemePanel = (props) => {
 				className: "univer-grid univer-grid-cols-6 univer-gap-2",
 				children: defaultRangeThemes.map((item) => {
 					var _rangeThemeItem$getHe, _rangeThemeItem$getFi, _rangeThemeItem$getSe, _rangeThemeItem$getLa;
+					const label = localeService.t("sheets-table-ui.defaultStyleNumber", item.slice(TABLE_DEFAULT_NAME_PREFIX.length));
 					const rangeThemeItem = rangeThemeModel.getDefaultRangeThemeStyle(item);
 					const rowBackgrounds = [
 						(rangeThemeItem === null || rangeThemeItem === void 0 || (_rangeThemeItem$getHe = rangeThemeItem.getHeaderRowStyle()) === null || _rangeThemeItem$getHe === void 0 || (_rangeThemeItem$getHe = _rangeThemeItem$getHe.bg) === null || _rangeThemeItem$getHe === void 0 ? void 0 : _rangeThemeItem$getHe.rgb) || "rgb(255, 255, 255)",
@@ -2168,8 +2248,8 @@ const SheetTableThemePanel = (props) => {
 					const selected = item === themeConfig.theme;
 					return /* @__PURE__ */ jsx("button", {
 						type: "button",
-						title: item,
-						"aria-label": item,
+						title: label,
+						"aria-label": label,
 						"aria-pressed": selected,
 						className: clsx("univer-flex univer-h-12 univer-w-full univer-cursor-pointer univer-flex-col univer-overflow-hidden univer-rounded-lg univer-bg-gray-0 univer-p-1 univer-shadow-sm univer-transition-all hover:univer-border-gray-400 hover:univer-shadow-md focus:univer-outline-none focus:univer-ring-2 focus:univer-ring-primary-200 dark:!univer-bg-gray-800", borderClassName, { "!univer-border-primary-500 univer-ring-2 univer-ring-primary-100": selected }),
 						onClick: () => handleThemeChange(item),
@@ -2201,6 +2281,8 @@ const SheetTableThemePanel = (props) => {
 						children: /* @__PURE__ */ jsx(IncreaseIcon, { className: "univer-size-4" })
 					}), customRangeThemes.map((item) => {
 						var _rangeThemeItem$getHe2, _rangeThemeItem$getFi2, _rangeThemeItem$getSe2, _rangeThemeItem$getLa2;
+						const styleNumber = item.slice(TABLE_CUSTOM_NAME_PREFIX.length);
+						const label = localeService.t("sheets-table-ui.customStyleNumber", styleNumber);
 						const rangeThemeItem = rangeThemeModel.getCustomRangeThemeStyle(unitId, item);
 						const rowBackgrounds = [
 							rangeThemeItem === null || rangeThemeItem === void 0 || (_rangeThemeItem$getHe2 = rangeThemeItem.getHeaderRowStyle()) === null || _rangeThemeItem$getHe2 === void 0 || (_rangeThemeItem$getHe2 = _rangeThemeItem$getHe2.bg) === null || _rangeThemeItem$getHe2 === void 0 ? void 0 : _rangeThemeItem$getHe2.rgb,
@@ -2213,8 +2295,8 @@ const SheetTableThemePanel = (props) => {
 							className: "univer-group univer-relative univer-h-12 univer-min-w-0",
 							children: [/* @__PURE__ */ jsx("button", {
 								type: "button",
-								title: item,
-								"aria-label": item,
+								title: label,
+								"aria-label": label,
 								"aria-pressed": selected,
 								className: clsx("univer-flex univer-size-full univer-cursor-pointer univer-flex-col univer-overflow-hidden univer-rounded-lg univer-bg-gray-0 univer-p-1 univer-shadow-sm univer-transition-all hover:univer-border-gray-400 hover:univer-shadow-md focus:univer-outline-none focus:univer-ring-2 focus:univer-ring-primary-200 dark:!univer-bg-gray-900", borderClassName, { "!univer-border-primary-500 univer-ring-2 univer-ring-primary-100": selected }),
 								onClick: () => handleThemeChange(item),
@@ -2228,7 +2310,7 @@ const SheetTableThemePanel = (props) => {
 							}), /* @__PURE__ */ jsx("button", {
 								type: "button",
 								"data-u-comp": "sheet-table-theme-remove",
-								"aria-label": `${localeService.t("sheets-table-ui.customStyle")} ${item}`,
+								"aria-label": localeService.t("sheets-table-ui.removeCustomStyle", styleNumber),
 								className: clsx("univer-absolute univer-right-[-6px] univer-top-[-6px] univer-z-10 univer-flex univer-size-5 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-full univer-border univer-border-solid univer-border-gray-200 univer-bg-gray-0 univer-p-0 univer-text-gray-500 univer-shadow-sm univer-transition-all hover:univer-border-red-200 hover:univer-bg-red-50 hover:univer-text-red-600 focus:univer-opacity-100 focus:univer-outline-none focus:univer-ring-2 focus:univer-ring-primary-200 rtl:univer-left-[-6px] rtl:univer-right-auto dark:!univer-border-gray-600 dark:!univer-bg-gray-900", {
 									"univer-opacity-100": selected,
 									"univer-opacity-0 group-focus-within:univer-opacity-100 group-hover:univer-opacity-100": !selected
@@ -2957,12 +3039,10 @@ let SheetTableControlsRenderController = class SheetTableControlsRenderControlle
 		this._shape.setHoveredRegion(null);
 	}
 	_getLocalPoint(evt) {
-		const skeleton = this._sheetSkeletonManagerService.getCurrentSkeleton();
-		if (skeleton) return getTransformCoord(evt.offsetX, evt.offsetY, this._context.scene, skeleton);
-		return {
-			x: evt.offsetX,
-			y: evt.offsetY
-		};
+		const { scene } = this._context;
+		const point = new Vector2(evt.offsetX, evt.offsetY);
+		const viewport = scene.getActiveViewportByCoord(point) ?? scene.getDefaultViewport();
+		return (viewport === null || viewport === void 0 ? void 0 : viewport.transformVector2SceneCoord(point)) ?? point;
 	}
 };
 SheetTableControlsRenderController = __decorate([
@@ -3023,6 +3103,25 @@ var SheetTableControlsMobileRenderController = class extends SheetTableControlsR
 	}
 };
 
+//#endregion
+//#region src/views/widgets/icons.ts
+/**
+* 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.
+*/
+const filterPartial = ["M3.30363 3C2.79117 3 2.51457 3.60097 2.84788 3.99024L6.8 8.60593V12.5662C6.8 12.7184 6.8864 12.8575 7.02289 12.9249L8.76717 13.7863C8.96655 13.8847 9.2 13.7396 9.2 13.5173V8.60593L13.1521 3.99024C13.4854 3.60097 13.2088 3 12.6964 3H3.30363Z"];
+
 //#endregion
 //#region src/views/widgets/table-filter-button.shape.ts
 const FILTER_ICON_SIZE = 16;
@@ -3038,6 +3137,7 @@ let SheetsTableFilterButtonShape = class SheetsTableFilterButtonShape extends Sh
 		_defineProperty(this, "_hoverBackground", "rgba(255, 255, 255, 0.92)");
 		_defineProperty(this, "_hoverIconColor", "#202124");
 		_defineProperty(this, "_hovered", false);
+		_defineProperty(this, "_filteredIconPath", null);
 		this.setShapeProps(props);
 		this.onPointerDown$.subscribeEvent((evt) => this.onPointerDown(evt));
 		this.onPointerEnter$.subscribeEvent(() => this.onPointerEnter());
@@ -3056,6 +3156,7 @@ let SheetsTableFilterButtonShape = class SheetsTableFilterButtonShape extends Sh
 		});
 	}
 	_draw(ctx) {
+		var _this$_filterParams;
 		const cellHeight = this._cellHeight;
 		const cellWidth = this._cellWidth;
 		const left = 16 - cellWidth;
@@ -3074,7 +3175,13 @@ let SheetsTableFilterButtonShape = class SheetsTableFilterButtonShape extends Sh
 			ctx.fill();
 			ctx.restore();
 		}
-		this._drawChevron(ctx, this._hovered ? this._hoverIconColor : this._iconColor);
+		const iconColor = this._hovered ? this._hoverIconColor : this._iconColor;
+		const buttonState = (_this$_filterParams = this._filterParams) === null || _this$_filterParams === void 0 ? void 0 : _this$_filterParams.buttonState;
+		if (buttonState === SheetsTableButtonStateEnum.FilteredSortNone || buttonState === SheetsTableButtonStateEnum.FilteredSortAsc || buttonState === SheetsTableButtonStateEnum.FilteredSortDesc) {
+			this._filteredIconPath ??= new Path2D(filterPartial[0]);
+			ctx.fillStyle = iconColor;
+			ctx.fill(this._filteredIconPath);
+		} else this._drawChevron(ctx, iconColor);
 		ctx.restore();
 	}
 	_drawChevron(ctx, color) {
@@ -3596,9 +3703,78 @@ function SheetTableColorFilterPanel(props) {
 //#endregion
 //#region src/views/components/SheetTableConditionPanel.tsx
 const SheetTableConditionPanel = (props) => {
-	var _conditionInfo$info$d, _conditionInfo$info$d2, _conditionInfo$info$n, _conditionInfo$info$n3;
+	var _conditionInfo$info$n, _conditionInfo$info$n2, _conditionInfo$info$n3, _conditionInfo$info$n7, _conditionInfo$info$n8, _conditionInfo$info$n9, _conditionInfo$info$d, _conditionInfo$info$d2;
 	const { conditionInfo, onChange } = props;
 	const localeService = useDependency(LocaleService);
+	const [numberDraftState, setNumberDraftState] = useState({
+		value: conditionInfo.info.number,
+		type: conditionInfo.type,
+		compare: conditionInfo.compare,
+		text: String(conditionInfo.info.number ?? "")
+	});
+	if (!Object.is(numberDraftState.value, conditionInfo.info.number) || numberDraftState.type !== conditionInfo.type || numberDraftState.compare !== conditionInfo.compare) setNumberDraftState({
+		value: conditionInfo.info.number,
+		type: conditionInfo.type,
+		compare: conditionInfo.compare,
+		text: String(conditionInfo.info.number ?? "")
+	});
+	const numberDraft = numberDraftState.text;
+	const setNumberDraft = (text) => setNumberDraftState({
+		value: conditionInfo.info.number,
+		type: conditionInfo.type,
+		compare: conditionInfo.compare,
+		text
+	});
+	const [minDraftState, setMinDraftState] = useState({
+		value: (_conditionInfo$info$n = conditionInfo.info.numberRange) === null || _conditionInfo$info$n === void 0 ? void 0 : _conditionInfo$info$n[0],
+		type: conditionInfo.type,
+		compare: conditionInfo.compare,
+		text: String(((_conditionInfo$info$n2 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n2 === void 0 ? void 0 : _conditionInfo$info$n2[0]) ?? "")
+	});
+	if (!Object.is(minDraftState.value, (_conditionInfo$info$n3 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n3 === void 0 ? void 0 : _conditionInfo$info$n3[0]) || minDraftState.type !== conditionInfo.type || minDraftState.compare !== conditionInfo.compare) {
+		var _conditionInfo$info$n4, _conditionInfo$info$n5;
+		setMinDraftState({
+			value: (_conditionInfo$info$n4 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n4 === void 0 ? void 0 : _conditionInfo$info$n4[0],
+			type: conditionInfo.type,
+			compare: conditionInfo.compare,
+			text: String(((_conditionInfo$info$n5 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n5 === void 0 ? void 0 : _conditionInfo$info$n5[0]) ?? "")
+		});
+	}
+	const minDraft = minDraftState.text;
+	const setMinDraft = (text) => {
+		var _conditionInfo$info$n6;
+		return setMinDraftState({
+			value: (_conditionInfo$info$n6 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n6 === void 0 ? void 0 : _conditionInfo$info$n6[0],
+			type: conditionInfo.type,
+			compare: conditionInfo.compare,
+			text
+		});
+	};
+	const [maxDraftState, setMaxDraftState] = useState({
+		value: (_conditionInfo$info$n7 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n7 === void 0 ? void 0 : _conditionInfo$info$n7[1],
+		type: conditionInfo.type,
+		compare: conditionInfo.compare,
+		text: String(((_conditionInfo$info$n8 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n8 === void 0 ? void 0 : _conditionInfo$info$n8[1]) ?? "")
+	});
+	if (!Object.is(maxDraftState.value, (_conditionInfo$info$n9 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n9 === void 0 ? void 0 : _conditionInfo$info$n9[1]) || maxDraftState.type !== conditionInfo.type || maxDraftState.compare !== conditionInfo.compare) {
+		var _conditionInfo$info$n10, _conditionInfo$info$n11;
+		setMaxDraftState({
+			value: (_conditionInfo$info$n10 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n10 === void 0 ? void 0 : _conditionInfo$info$n10[1],
+			type: conditionInfo.type,
+			compare: conditionInfo.compare,
+			text: String(((_conditionInfo$info$n11 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n11 === void 0 ? void 0 : _conditionInfo$info$n11[1]) ?? "")
+		});
+	}
+	const maxDraft = maxDraftState.text;
+	const setMaxDraft = (text) => {
+		var _conditionInfo$info$n12;
+		return setMaxDraftState({
+			value: (_conditionInfo$info$n12 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n12 === void 0 ? void 0 : _conditionInfo$info$n12[1],
+			type: conditionInfo.type,
+			compare: conditionInfo.compare,
+			text
+		});
+	};
 	const [conditionVisible, setConditionVisible] = useState(false);
 	const injector = useDependency(Injector);
 	const cascaderOptions = getCascaderListOptions(injector);
@@ -3651,12 +3827,15 @@ const SheetTableConditionPanel = (props) => {
 				placeholder: localeService.t("sheets-table-ui.filter.input-values-placeholder"),
 				value: conditionInfo.info.string,
 				onChange: (v) => handleConditionInfo({ string: v })
-			}) : /* @__PURE__ */ jsx(InputNumber, {
+			}) : /* @__PURE__ */ jsx(Input, {
 				className: "univer-h-7 univer-w-full",
-				value: conditionInfo.info.number,
-				controls: false,
+				inputMode: "decimal",
+				value: numberDraft,
+				"aria-invalid": numberDraft !== "" && !Number.isFinite(Number(numberDraft)),
+				onBlur: () => setNumberDraft(String(conditionInfo.info.number ?? "")),
 				onChange: (v) => {
-					if (v !== null) handleConditionInfo({ number: v });
+					setNumberDraft(v);
+					if (v.trim() !== "" && Number.isFinite(Number(v))) handleConditionInfo({ number: Number(v) });
 				}
 			}) }),
 			!!(subComponentType === "DatePicker") && /* @__PURE__ */ jsx("div", {
@@ -3681,26 +3860,38 @@ const SheetTableConditionPanel = (props) => {
 			subComponentType === "Inputs" && /* @__PURE__ */ jsxs("div", {
 				className: "univer-flex univer-items-center univer-gap-2",
 				children: [
-					/* @__PURE__ */ jsx(InputNumber, {
+					/* @__PURE__ */ jsx(Input, {
 						className: "univer-w-full",
-						value: (_conditionInfo$info$n = conditionInfo.info.numberRange) === null || _conditionInfo$info$n === void 0 ? void 0 : _conditionInfo$info$n[0],
+						inputMode: "decimal",
+						value: minDraft,
+						"aria-invalid": minDraft !== "" && !Number.isFinite(Number(minDraft)),
+						onBlur: () => {
+							var _conditionInfo$info$n13;
+							return setMinDraft(String(((_conditionInfo$info$n13 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n13 === void 0 ? void 0 : _conditionInfo$info$n13[0]) ?? ""));
+						},
 						onChange: (v) => {
-							if (v !== null) {
-								var _conditionInfo$info$n2;
-								handleConditionInfo({ numberRange: [v, (_conditionInfo$info$n2 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n2 === void 0 ? void 0 : _conditionInfo$info$n2[1]] });
+							setMinDraft(v);
+							if (v.trim() !== "" && Number.isFinite(Number(v))) {
+								var _conditionInfo$info$n14;
+								handleConditionInfo({ numberRange: [Number(v), (_conditionInfo$info$n14 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n14 === void 0 ? void 0 : _conditionInfo$info$n14[1]] });
 							}
-						},
-						controls: false
+						}
 					}),
 					/* @__PURE__ */ jsx("span", { children: " - " }),
-					/* @__PURE__ */ jsx(InputNumber, {
+					/* @__PURE__ */ jsx(Input, {
 						className: "univer-w-full",
-						value: (_conditionInfo$info$n3 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n3 === void 0 ? void 0 : _conditionInfo$info$n3[1],
-						controls: false,
+						inputMode: "decimal",
+						value: maxDraft,
+						"aria-invalid": maxDraft !== "" && !Number.isFinite(Number(maxDraft)),
+						onBlur: () => {
+							var _conditionInfo$info$n15;
+							return setMaxDraft(String(((_conditionInfo$info$n15 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n15 === void 0 ? void 0 : _conditionInfo$info$n15[1]) ?? ""));
+						},
 						onChange: (v) => {
-							if (v !== null) {
-								var _conditionInfo$info$n4;
-								handleConditionInfo({ numberRange: [(_conditionInfo$info$n4 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n4 === void 0 ? void 0 : _conditionInfo$info$n4[0], v] });
+							setMaxDraft(v);
+							if (v.trim() !== "" && Number.isFinite(Number(v))) {
+								var _conditionInfo$info$n16;
+								handleConditionInfo({ numberRange: [(_conditionInfo$info$n16 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n16 === void 0 ? void 0 : _conditionInfo$info$n16[0], Number(v)] });
 							}
 						}
 					})

package/lib/locale/ar-SA.js

@@ -1,5 +1,8 @@
 //#region src/locale/ar-SA.ts
 const locale = { "sheets-table-ui": {
+	defaultStyleNumber: "النمط الافتراضي {0}",
+	customStyleNumber: "النمط المخصص {0}",
+	removeCustomStyle: "حذف النمط المخصص {0}",
 	calculatedColumn: "عمود محسوب",
 	columnFormula: "الصيغة",
 	columnFormulaHint: "يستبدل فورًا {0} خلية بيانات دون الرأس والإجمالي. إيقاف التعبئة يحافظ على الخلايا الحالية. يمكن التراجع.",

package/lib/locale/ca-ES.js

@@ -1,5 +1,8 @@
 //#region src/locale/ca-ES.ts
 const locale = { "sheets-table-ui": {
+	defaultStyleNumber: "Estil predeterminat {0}",
+	customStyleNumber: "Estil personalitzat {0}",
+	removeCustomStyle: "Suprimeix l’estil personalitzat {0}",
 	calculatedColumn: "Columna calculada",
 	columnFormula: "Fórmula",
 	columnFormulaHint: "Substitueix immediatament les {0} cel·les de dades, sense capçalera ni totals. Aturar conserva les cel·les existents. Es pot desfer.",

package/lib/locale/de-DE.js

@@ -1,5 +1,8 @@
 //#region src/locale/de-DE.ts
 const locale = { "sheets-table-ui": {
+	defaultStyleNumber: "Standardstil {0}",
+	customStyleNumber: "Benutzerdefinierter Stil {0}",
+	removeCustomStyle: "Benutzerdefinierten Stil {0} löschen",
 	calculatedColumn: "Berechnete Spalte",
 	columnFormula: "Formel",
 	columnFormulaHint: "Ersetzt sofort alle {0} Datenzellen ohne Kopf- und Ergebniszeile. Beim Stoppen bleiben vorhandene Zellen erhalten. Rückgängig möglich.",

package/lib/locale/en-US.js

@@ -15,6 +15,9 @@
 * limitations under the License.
 */
 const locale = { "sheets-table-ui": {
+	defaultStyleNumber: "Default style {0}",
+	customStyleNumber: "Custom style {0}",
+	removeCustomStyle: "Delete custom style {0}",
 	calculatedColumn: "Calculated column",
 	columnFormula: "Formula",
 	columnFormulaHint: "Apply replaces all {0} data cells in this column immediately. Header and footer are excluded. Stop preserves existing cells. Changes can be undone.",

package/lib/locale/es-ES.js

@@ -1,5 +1,8 @@
 //#region src/locale/es-ES.ts
 const locale = { "sheets-table-ui": {
+	defaultStyleNumber: "Estilo predeterminado {0}",
+	customStyleNumber: "Estilo personalizado {0}",
+	removeCustomStyle: "Eliminar el estilo personalizado {0}",
 	calculatedColumn: "Columna calculada",
 	columnFormula: "Fórmula",
 	columnFormulaHint: "Reemplaza inmediatamente las {0} celdas de datos, sin encabezado ni totales. Detener conserva las celdas existentes. Se puede deshacer.",

package/lib/locale/fa-IR.js

@@ -1,5 +1,8 @@
 //#region src/locale/fa-IR.ts
 const locale = { "sheets-table-ui": {
+	defaultStyleNumber: "سبک پیش‌فرض {0}",
+	customStyleNumber: "سبک سفارشی {0}",
+	removeCustomStyle: "حذف سبک سفارشی {0}",
 	calculatedColumn: "ستون محاسباتی",
 	columnFormula: "فرمول",
 	columnFormulaHint: "بلافاصله {0} سلول داده را بدون سربرگ و جمع جایگزین می‌کند. توقف، سلول‌های موجود را حفظ می‌کند. قابل واگرد است.",

package/lib/locale/fr-FR.js

@@ -1,5 +1,8 @@
 //#region src/locale/fr-FR.ts
 const locale = { "sheets-table-ui": {
+	defaultStyleNumber: "Style par défaut {0}",
+	customStyleNumber: "Style personnalisé {0}",
+	removeCustomStyle: "Supprimer le style personnalisé {0}",
 	calculatedColumn: "Colonne calculée",
 	columnFormula: "Formule",
 	columnFormulaHint: "Remplace immédiatement les {0} cellules de données, hors en-tête et total. Arrêter conserve les cellules existantes. Annulation possible.",

package/lib/locale/id-ID.js

@@ -1,5 +1,8 @@
 //#region src/locale/id-ID.ts
 const locale = { "sheets-table-ui": {
+	defaultStyleNumber: "Gaya default {0}",
+	customStyleNumber: "Gaya kustom {0}",
+	removeCustomStyle: "Hapus gaya kustom {0}",
 	calculatedColumn: "Kolom terhitung",
 	columnFormula: "Rumus",
 	columnFormulaHint: "Langsung mengganti {0} sel data, kecuali header dan total. Berhenti mempertahankan sel yang ada. Perubahan dapat diurungkan.",

package/lib/locale/it-IT.js

@@ -1,5 +1,8 @@
 //#region src/locale/it-IT.ts
 const locale = { "sheets-table-ui": {
+	defaultStyleNumber: "Stile predefinito {0}",
+	customStyleNumber: "Stile personalizzato {0}",
+	removeCustomStyle: "Elimina lo stile personalizzato {0}",
 	calculatedColumn: "Colonna calcolata",
 	columnFormula: "Formula",
 	columnFormulaHint: "Sostituisce subito {0} celle dati, escluse intestazione e totali. Arrestare mantiene le celle esistenti. È possibile annullare.",