@univerjs/sheets-table-ui 1.0.0-alpha.8 → 1.0.0-beta.1

package/lib/cjs/index.js

@@ -38,6 +38,7 @@ const SHEET_TABLE_RENAME_DIALOG = "SHEET_TABLE_RENAME_DIALOG";
 const SHEET_TABLE_RENAME_DIALOG_ID = "SHEET_TABLE_RENAME_DIALOG_ID";
 const SHEET_TABLE_THEME_PANEL_ID = "SHEET_TABLE_THEME_PANEL_ID";
 const SHEET_TABLE_THEME_PANEL = "SHEET_TABLE_THEME_PANEL";
+const SHEET_TABLE_MENU = "SHEET_TABLE_MENU";
 const TABLE_CUSTOM_NAME_PREFIX = "table-custom-";
 const TABLE_DEFAULT_NAME_PREFIX = "table-default-";
 const TABLE_DEFAULT_BG_COLOR = "rgb(255, 255, 255)";
@@ -50,14 +51,13 @@ const OpenTableSelectorOperation = {
 	type: _univerjs_core.CommandType.OPERATION,
 	id: "sheet.operation.open-table-selector",
 	async handler(accessor) {
-		var _lastSelection$range;
 		const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
 		const commandService = accessor.get(_univerjs_core.ICommandService);
 		const target = (0, _univerjs_sheets.getSheetCommandTarget)(univerInstanceService);
 		if (!target) return false;
 		const { unitId, subUnitId, worksheet } = target;
 		const lastSelection = accessor.get(_univerjs_sheets.SheetsSelectionsService).getCurrentLastSelection();
-		const range = (_lastSelection$range = lastSelection === null || lastSelection === void 0 ? void 0 : lastSelection.range) !== null && _lastSelection$range !== void 0 ? _lastSelection$range : {
+		const range = (lastSelection === null || lastSelection === void 0 ? void 0 : lastSelection.range) ?? {
 			startRow: 0,
 			endRow: 0,
 			startColumn: 0,
@@ -249,7 +249,7 @@ const menuSchema = {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-table-ui";
-var version = "1.0.0-alpha.8";
+var version = "1.0.0-beta.1";
 
 //#endregion
 //#region \0@oxc-project+runtime@0.140.0/helpers/esm/typeof.js
@@ -900,7 +900,7 @@ function getInitConditionInfo(tableFilter) {
 //#endregion
 //#region src/views/components/SheetTableConditionPanel.tsx
 const SheetTableConditionPanel = (props) => {
-	var _conditionInfo$info$d, _conditionInfo$info$d2, _conditionInfo$info$d3, _conditionInfo$info$d4, _conditionInfo$info$d5, _conditionInfo$info$n, _conditionInfo$info$n3, _conditionInfo$info$d6;
+	var _conditionInfo$info$d, _conditionInfo$info$d2, _conditionInfo$info$n, _conditionInfo$info$n3;
 	const { conditionInfo, onChange } = props;
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
 	const [conditionVisible, setConditionVisible] = (0, react.useState)(false);
@@ -908,13 +908,12 @@ const SheetTableConditionPanel = (props) => {
 	const cascaderOptions = getCascaderListOptions(injector);
 	const handleConditionInfo = (info, type, compare) => {
 		onChange({
-			type: type !== null && type !== void 0 ? type : conditionInfo.type,
-			compare: compare !== null && compare !== void 0 ? compare : conditionInfo.compare,
+			type: type ?? conditionInfo.type,
+			compare: compare ?? conditionInfo.compare,
 			info
 		});
 	};
 	const handleChange = (value) => {
-		var _ref;
 		const type = value[0];
 		const compare = value[1];
 		if (compare) setConditionVisible(false);
@@ -925,7 +924,7 @@ const SheetTableConditionPanel = (props) => {
 		else info.dateRange = [/* @__PURE__ */ new Date(), /* @__PURE__ */ new Date()];
 		else if (type === _univerjs_sheets_table.TableConditionTypeEnum.Number) info.number = 0;
 		else if (type === _univerjs_sheets_table.TableConditionTypeEnum.String) info.string = "";
-		handleConditionInfo(info, value[0], (_ref = value[1]) !== null && _ref !== void 0 ? _ref : _univerjs_sheets_table.TableStringCompareTypeEnum.Equal);
+		handleConditionInfo(info, value[0], value[1] ?? _univerjs_sheets_table.TableStringCompareTypeEnum.Equal);
 	};
 	const subComponentType = getSubComponentType(conditionInfo.type, conditionInfo.compare);
 	let selectType = "";
@@ -944,7 +943,7 @@ const SheetTableConditionPanel = (props) => {
 			wrapperClassName: "!univer-h-[150px]"
 		}),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: (0, _univerjs_design.clsx)("univer-box-border univer-flex univer-h-8 univer-w-full univer-items-center univer-justify-between univer-rounded-md univer-bg-white univer-px-2 univer-text-sm univer-transition-colors univer-duration-200 hover:univer-border-primary-600 focus:univer-border-primary-600 focus:univer-outline-none focus:univer-ring-2 dark:!univer-bg-gray-700 dark:!univer-text-white", _univerjs_design.borderClassName),
+			className: (0, _univerjs_design.clsx)("univer-box-border univer-flex univer-h-8 univer-w-full univer-items-center univer-justify-between univer-rounded-md univer-bg-gray-0 univer-px-2 univer-text-sm univer-transition-colors univer-duration-200 hover:univer-border-primary-600 focus:univer-border-primary-600 focus:univer-outline-none focus:univer-ring-2 dark:!univer-bg-gray-700 dark:!univer-text-gray-0", _univerjs_design.borderClassName),
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: selectType }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, {})]
 		})
 	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -952,7 +951,7 @@ const SheetTableConditionPanel = (props) => {
 		children: [
 			subComponentType === "Input" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: conditionInfo.type === _univerjs_sheets_table.TableConditionTypeEnum.String ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Input, {
 				className: "univer-w-full",
-				placeholder: "请输入",
+				placeholder: localeService.t("sheets-table-ui.filter.input-values-placeholder"),
 				value: conditionInfo.info.string,
 				onChange: (v) => handleConditionInfo({ string: v })
 			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
@@ -967,7 +966,7 @@ const SheetTableConditionPanel = (props) => {
 				id: "univer-table-date-picker-wrapper",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.DatePicker, {
 					className: "univer-w-full",
-					value: (_conditionInfo$info$d = conditionInfo.info.date) !== null && _conditionInfo$info$d !== void 0 ? _conditionInfo$info$d : /* @__PURE__ */ new Date(),
+					value: conditionInfo.info.date ?? /* @__PURE__ */ new Date(),
 					onValueChange: (v) => handleConditionInfo({ date: v })
 				})
 			}),
@@ -975,7 +974,7 @@ const SheetTableConditionPanel = (props) => {
 				id: "univer-table-date-range-wrapper",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.DateRangePicker, {
 					className: "univer-w-full",
-					value: [(_conditionInfo$info$d2 = (_conditionInfo$info$d3 = conditionInfo.info.dateRange) === null || _conditionInfo$info$d3 === void 0 ? void 0 : _conditionInfo$info$d3[0]) !== null && _conditionInfo$info$d2 !== void 0 ? _conditionInfo$info$d2 : /* @__PURE__ */ new Date(), (_conditionInfo$info$d4 = (_conditionInfo$info$d5 = conditionInfo.info.dateRange) === null || _conditionInfo$info$d5 === void 0 ? void 0 : _conditionInfo$info$d5[1]) !== null && _conditionInfo$info$d4 !== void 0 ? _conditionInfo$info$d4 : /* @__PURE__ */ new Date()],
+					value: [((_conditionInfo$info$d = conditionInfo.info.dateRange) === null || _conditionInfo$info$d === void 0 ? void 0 : _conditionInfo$info$d[0]) ?? /* @__PURE__ */ new Date(), ((_conditionInfo$info$d2 = conditionInfo.info.dateRange) === null || _conditionInfo$info$d2 === void 0 ? void 0 : _conditionInfo$info$d2[1]) ?? /* @__PURE__ */ new Date()],
 					onValueChange: (v) => {
 						if (v) handleConditionInfo({ dateRange: v });
 						else handleConditionInfo({});
@@ -1012,7 +1011,7 @@ const SheetTableConditionPanel = (props) => {
 			}),
 			!!(subComponentType === "Select") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
 				className: "univer-w-full",
-				value: (_conditionInfo$info$d6 = conditionInfo.info.dateSelect) !== null && _conditionInfo$info$d6 !== void 0 ? _conditionInfo$info$d6 : conditionDateOptions[0].value,
+				value: conditionInfo.info.dateSelect ?? conditionDateOptions[0].value,
 				options: conditionDateOptions,
 				onChange: (v) => handleConditionInfo({ dateSelect: v })
 			})
@@ -1025,8 +1024,7 @@ const SheetTableConditionPanel = (props) => {
 const getCheckedItemCount = (map, checkedItemSet) => {
 	let count = 0;
 	checkedItemSet.forEach((item) => {
-		var _map$get;
-		count += (_map$get = map.get(item)) !== null && _map$get !== void 0 ? _map$get : 0;
+		count += map.get(item) ?? 0;
 	});
 	return count;
 };
@@ -1278,14 +1276,14 @@ function SheetTableFilterPanel() {
 	};
 	const workbookEditableId = new _univerjs_sheets.WorkbookEditablePermission(unitId).id;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "univer-box-border univer-flex univer-w-[400px] univer-flex-col univer-rounded-[10px] univer-bg-white univer-p-4 univer-shadow-lg dark:!univer-border-gray-600 dark:!univer-bg-gray-700",
+		className: "univer-box-border univer-flex univer-w-[400px] univer-flex-col univer-rounded-[10px] univer-bg-gray-0 univer-p-4 univer-shadow-lg dark:!univer-border-gray-600 dark:!univer-bg-gray-700",
 		children: [
 			((_permissionService$ge = permissionService.getPermissionPoint(workbookEditableId)) === null || _permissionService$ge === void 0 ? void 0 : _permissionService$ge.value) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "-univer-mx-4 -univer-mt-2 univer-mb-3 univer-border-0 univer-border-b univer-border-solid univer-border-gray-200 univer-py-1",
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 						type: "button",
-						className: "univer-box-border univer-flex univer-h-10 univer-w-full univer-cursor-pointer univer-items-center univer-gap-3 univer-border-none univer-bg-transparent univer-px-4 univer-text-left univer-text-sm univer-text-gray-900 hover:univer-bg-gray-100 disabled:univer-cursor-not-allowed disabled:univer-text-gray-400 dark:!univer-text-white dark:hover:!univer-bg-gray-600",
+						className: "univer-box-border univer-flex univer-h-10 univer-w-full univer-cursor-pointer univer-items-center univer-gap-3 univer-border-none univer-bg-transparent univer-px-4 univer-text-left univer-text-sm univer-text-gray-900 hover:univer-bg-gray-100 disabled:univer-cursor-not-allowed disabled:univer-text-gray-400 dark:!univer-text-gray-0 dark:hover:!univer-bg-gray-600",
 						onClick: () => insertColumn("left"),
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.LeftInsertColumnDoubleIcon, {
 							className: "univer-size-5",
@@ -1294,7 +1292,7 @@ function SheetTableFilterPanel() {
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 						type: "button",
-						className: "univer-box-border univer-flex univer-h-10 univer-w-full univer-cursor-pointer univer-items-center univer-gap-3 univer-border-none univer-bg-transparent univer-px-4 univer-text-left univer-text-sm univer-text-gray-900 hover:univer-bg-gray-100 disabled:univer-cursor-not-allowed disabled:univer-text-gray-400 dark:!univer-text-white dark:hover:!univer-bg-gray-600",
+						className: "univer-box-border univer-flex univer-h-10 univer-w-full univer-cursor-pointer univer-items-center univer-gap-3 univer-border-none univer-bg-transparent univer-px-4 univer-text-left univer-text-sm univer-text-gray-900 hover:univer-bg-gray-100 disabled:univer-cursor-not-allowed disabled:univer-text-gray-400 dark:!univer-text-gray-0 dark:hover:!univer-bg-gray-600",
 						onClick: () => insertColumn("right"),
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.RightInsertColumnDoubleIcon, {
 							className: "univer-size-5",
@@ -1303,7 +1301,7 @@ function SheetTableFilterPanel() {
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 						type: "button",
-						className: "univer-box-border univer-flex univer-h-10 univer-w-full univer-cursor-pointer univer-items-center univer-gap-3 univer-border-none univer-bg-transparent univer-px-4 univer-text-left univer-text-sm univer-text-gray-900 hover:univer-bg-gray-100 disabled:univer-cursor-not-allowed disabled:univer-text-gray-400 dark:!univer-text-white dark:hover:!univer-bg-gray-600",
+						className: "univer-box-border univer-flex univer-h-10 univer-w-full univer-cursor-pointer univer-items-center univer-gap-3 univer-border-none univer-bg-transparent univer-px-4 univer-text-left univer-text-sm univer-text-gray-900 hover:univer-bg-gray-100 disabled:univer-cursor-not-allowed disabled:univer-text-gray-400 dark:!univer-text-gray-0 dark:hover:!univer-bg-gray-600",
 						disabled: !canDeleteColumn,
 						onClick: deleteColumn,
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DeleteColumnDoubleIcon, {
@@ -1364,24 +1362,71 @@ function SheetTableFilterPanel() {
 					disabled: tableFilter === void 0,
 					onClick: onClearFilter,
 					children: localeService.t("sheets-table-ui.filter.clear-filter")
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
-					className: "univer-mr-2",
-					onClick: onCancel,
-					children: localeService.t("sheets-table-ui.filter.cancel")
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
-					variant: "primary",
-					onClick: onApply,
-					children: localeService.t("sheets-table-ui.filter.confirm")
-				})] })]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "univer-flex univer-gap-x-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
+						onClick: onCancel,
+						children: localeService.t("sheets-table-ui.filter.cancel")
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
+						variant: "primary",
+						onClick: onApply,
+						children: localeService.t("sheets-table-ui.filter.confirm")
+					})]
+				})]
 			})
 		]
 	});
 }
 
+//#endregion
+//#region src/views/components/SheetTableMenu.tsx
+function SheetTableMenu({ popup }) {
+	const menu = popup.extraProps;
+	if (!menu) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.DropdownMenu, {
+		align: "start",
+		className: "univer-min-w-40",
+		items: [
+			{
+				type: "item",
+				children: menu.labels.rename,
+				onSelect: () => menu.onSelect("rename")
+			},
+			{
+				type: "item",
+				children: menu.labels["update-range"],
+				onSelect: () => menu.onSelect("update-range")
+			},
+			{
+				type: "item",
+				children: menu.labels["set-theme"],
+				onSelect: () => menu.onSelect("set-theme")
+			},
+			{
+				type: "item",
+				children: menu.labels.delete,
+				variant: "destructive",
+				onSelect: () => menu.onSelect("delete")
+			}
+		],
+		open: true,
+		sideOffset: 0,
+		onOpenChange: (open) => {
+			if (!open) menu.onClose();
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			"aria-label": menu.tableName,
+			className: "univer-block univer-h-px univer-opacity-0",
+			style: { width: menu.anchorWidth },
+			tabIndex: -1
+		})
+	});
+}
+
 //#endregion
 //#region src/views/components/SheetTableRenameDialog.tsx
 function SheetTableRenameDialog(props) {
-	var _table$getDisplayName;
 	const { unitId, tableId, onClose } = props;
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
 	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
@@ -1389,7 +1434,7 @@ function SheetTableRenameDialog(props) {
 	const univerInstanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
 	const definedNamesService = (0, _univerjs_ui.useDependency)(_univerjs_engine_formula.IDefinedNamesService);
 	const table = tableManager.getTableById(unitId, tableId);
-	const [value, setValue] = (0, react.useState)((_table$getDisplayName = table === null || table === void 0 ? void 0 : table.getDisplayName()) !== null && _table$getDisplayName !== void 0 ? _table$getDisplayName : "");
+	const [value, setValue] = (0, react.useState)((table === null || table === void 0 ? void 0 : table.getDisplayName()) ?? "");
 	const [error, setError] = (0, react.useState)("");
 	const existingNames = (0, react.useMemo)(() => {
 		const names = (0, _univerjs_sheets_table.getExistingNamesSet)(unitId, {
@@ -1577,7 +1622,7 @@ SheetTableThemeUIController = __decorate([__decorateParam(0, (0, _univerjs_core.
 //#endregion
 //#region src/views/components/SheetTableThemePanel.tsx
 const SheetTableThemePanel = (props) => {
-	var _customStyle$getHeade, _customStyle$getHeade2, _customStyle$getFirst, _customStyle$getFirst2, _customStyle$getSecon, _customStyle$getSecon2, _customStyle$getLastR, _customStyle$getLastR2;
+	var _customStyle$getHeade, _customStyle$getFirst, _customStyle$getSecon, _customStyle$getLastR;
 	const { unitId, subUnitId, tableId } = props;
 	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
@@ -1602,11 +1647,11 @@ const SheetTableThemePanel = (props) => {
 	const customSelected = customRangeThemes.find((item) => item === selectedTheme);
 	const customStyleName = customSelected || customRangeThemes[0];
 	const customStyle = rangeThemeModel.getCustomRangeThemeStyle(unitId, customStyleName);
-	const headerBg = (_customStyle$getHeade = customStyle === null || customStyle === void 0 || (_customStyle$getHeade2 = customStyle.getHeaderRowStyle()) === null || _customStyle$getHeade2 === void 0 || (_customStyle$getHeade2 = _customStyle$getHeade2.bg) === null || _customStyle$getHeade2 === void 0 ? void 0 : _customStyle$getHeade2.rgb) !== null && _customStyle$getHeade !== void 0 ? _customStyle$getHeade : TABLE_DEFAULT_BG_COLOR;
-	const firstRowBg = (_customStyle$getFirst = customStyle === null || customStyle === void 0 || (_customStyle$getFirst2 = customStyle.getFirstRowStyle()) === null || _customStyle$getFirst2 === void 0 || (_customStyle$getFirst2 = _customStyle$getFirst2.bg) === null || _customStyle$getFirst2 === void 0 ? void 0 : _customStyle$getFirst2.rgb) !== null && _customStyle$getFirst !== void 0 ? _customStyle$getFirst : TABLE_DEFAULT_BG_COLOR;
-	const secondRowBg = (_customStyle$getSecon = customStyle === null || customStyle === void 0 || (_customStyle$getSecon2 = customStyle.getSecondRowStyle()) === null || _customStyle$getSecon2 === void 0 || (_customStyle$getSecon2 = _customStyle$getSecon2.bg) === null || _customStyle$getSecon2 === void 0 ? void 0 : _customStyle$getSecon2.rgb) !== null && _customStyle$getSecon !== void 0 ? _customStyle$getSecon : TABLE_DEFAULT_BG_COLOR;
-	const lastRowBg = (_customStyle$getLastR = customStyle === null || customStyle === void 0 || (_customStyle$getLastR2 = customStyle.getLastRowStyle()) === null || _customStyle$getLastR2 === void 0 || (_customStyle$getLastR2 = _customStyle$getLastR2.bg) === null || _customStyle$getLastR2 === void 0 ? void 0 : _customStyle$getLastR2.rgb) !== null && _customStyle$getLastR !== void 0 ? _customStyle$getLastR : TABLE_DEFAULT_BG_COLOR;
-	const [hoverCustomId, setHoverCustomId] = (0, react.useState)(null);
+	const headerBg = (customStyle === null || customStyle === void 0 || (_customStyle$getHeade = customStyle.getHeaderRowStyle()) === null || _customStyle$getHeade === void 0 || (_customStyle$getHeade = _customStyle$getHeade.bg) === null || _customStyle$getHeade === void 0 ? void 0 : _customStyle$getHeade.rgb) ?? "rgb(255, 255, 255)";
+	const firstRowBg = (customStyle === null || customStyle === void 0 || (_customStyle$getFirst = customStyle.getFirstRowStyle()) === null || _customStyle$getFirst === void 0 || (_customStyle$getFirst = _customStyle$getFirst.bg) === null || _customStyle$getFirst === void 0 ? void 0 : _customStyle$getFirst.rgb) ?? "rgb(255, 255, 255)";
+	const secondRowBg = (customStyle === null || customStyle === void 0 || (_customStyle$getSecon = customStyle.getSecondRowStyle()) === null || _customStyle$getSecon === void 0 || (_customStyle$getSecon = _customStyle$getSecon.bg) === null || _customStyle$getSecon === void 0 ? void 0 : _customStyle$getSecon.rgb) ?? "rgb(255, 255, 255)";
+	const lastRowBg = (customStyle === null || customStyle === void 0 || (_customStyle$getLastR = customStyle.getLastRowStyle()) === null || _customStyle$getLastR === void 0 || (_customStyle$getLastR = _customStyle$getLastR.bg) === null || _customStyle$getLastR === void 0 ? void 0 : _customStyle$getLastR.rgb) ?? "rgb(255, 255, 255)";
+	const direction = (0, _univerjs_ui.useObservable)(localeService.direction$, localeService.getDirection());
 	const handleThemeChange = (theme) => {
 		commandService.executeCommand(_univerjs_sheets_table.SetSheetTableCommand.id, {
 			unitId,
@@ -1652,237 +1697,192 @@ const SheetTableThemePanel = (props) => {
 	const firstRowBgIsDark = new _univerjs_core.ColorKit(firstRowBg).isDark();
 	const secondRowBgIsDark = new _univerjs_core.ColorKit(secondRowBg).isDark();
 	const lastRowBgIsDark = new _univerjs_core.ColorKit(lastRowBg).isDark();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h5", { children: localeService.t("sheets-table-ui.defaultStyle") }),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "univer-flex univer-gap-2",
-			children: defaultRangeThemes.map((item) => {
-				var _rangeThemeItem$getHe, _rangeThemeItem$getFi, _rangeThemeItem$getSe, _rangeThemeItem$getLa;
-				const rangeThemeItem = rangeThemeModel.getDefaultRangeThemeStyle(item);
-				const headerRowBg = (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)";
-				const firstRowBg = (rangeThemeItem === null || rangeThemeItem === void 0 || (_rangeThemeItem$getFi = rangeThemeItem.getFirstRowStyle()) === null || _rangeThemeItem$getFi === void 0 || (_rangeThemeItem$getFi = _rangeThemeItem$getFi.bg) === null || _rangeThemeItem$getFi === void 0 ? void 0 : _rangeThemeItem$getFi.rgb) || "rgb(255, 255, 255)";
-				const secondRowBg = (rangeThemeItem === null || rangeThemeItem === void 0 || (_rangeThemeItem$getSe = rangeThemeItem.getSecondRowStyle()) === null || _rangeThemeItem$getSe === void 0 || (_rangeThemeItem$getSe = _rangeThemeItem$getSe.bg) === null || _rangeThemeItem$getSe === void 0 ? void 0 : _rangeThemeItem$getSe.rgb) || "rgb(255, 255, 255)";
-				const lastRowBg = (rangeThemeItem === null || rangeThemeItem === void 0 || (_rangeThemeItem$getLa = rangeThemeItem.getLastRowStyle()) === null || _rangeThemeItem$getLa === void 0 || (_rangeThemeItem$getLa = _rangeThemeItem$getLa.bg) === null || _rangeThemeItem$getLa === void 0 ? void 0 : _rangeThemeItem$getLa.rgb) || "rgb(255, 255, 255)";
-				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: (0, _univerjs_design.clsx)("univer-h-10 univer-w-8 univer-cursor-pointer univer-border univer-border-solid univer-border-gray-200 univer-p-px [&>div]:univer-box-border [&>div]:univer-h-2.5", { "univer-border-blue-500": item === themeConfig.theme }),
-					onClick: () => handleThemeChange(item),
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
-							background: headerRowBg,
-							border: `${headerRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
-						} }),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
-							background: firstRowBg,
-							border: `${firstRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
-						} }),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
-							background: secondRowBg,
-							border: `${secondRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
-						} }),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
-							background: lastRowBg,
-							border: `${lastRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
-						} })
-					]
-				}, item);
-			})
-		}),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h5", { children: localeService.t("sheets-table-ui.customStyle") }),
-		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: (0, _univerjs_design.clsx)("univer-w-full univer-rounded-sm", _univerjs_design.borderClassName),
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "univer-flex univer-flex-wrap univer-gap-2 univer-p-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: (0, _univerjs_design.clsx)("univer-h-10 univer-w-8 univer-cursor-pointer univer-p-px univer-text-center univer-leading-10", _univerjs_design.borderClassName),
-					onClick: handleAddCustomTheme,
-					children: "+"
-				}), customRangeThemes.map((item) => {
-					var _rangeThemeItem$getHe2, _rangeThemeItem$getFi2, _rangeThemeItem$getSe2, _rangeThemeItem$getLa2;
-					const rangeThemeItem = rangeThemeModel.getCustomRangeThemeStyle(unitId, item);
-					const headerRowBg = 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;
-					const firstRowBg = rangeThemeItem === null || rangeThemeItem === void 0 || (_rangeThemeItem$getFi2 = rangeThemeItem.getFirstRowStyle()) === null || _rangeThemeItem$getFi2 === void 0 || (_rangeThemeItem$getFi2 = _rangeThemeItem$getFi2.bg) === null || _rangeThemeItem$getFi2 === void 0 ? void 0 : _rangeThemeItem$getFi2.rgb;
-					const secondRowBg = rangeThemeItem === null || rangeThemeItem === void 0 || (_rangeThemeItem$getSe2 = rangeThemeItem.getSecondRowStyle()) === null || _rangeThemeItem$getSe2 === void 0 || (_rangeThemeItem$getSe2 = _rangeThemeItem$getSe2.bg) === null || _rangeThemeItem$getSe2 === void 0 ? void 0 : _rangeThemeItem$getSe2.rgb;
-					const lastRowBg = rangeThemeItem === null || rangeThemeItem === void 0 || (_rangeThemeItem$getLa2 = rangeThemeItem.getLastRowStyle()) === null || _rangeThemeItem$getLa2 === void 0 || (_rangeThemeItem$getLa2 = _rangeThemeItem$getLa2.bg) === null || _rangeThemeItem$getLa2 === void 0 ? void 0 : _rangeThemeItem$getLa2.rgb;
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: (0, _univerjs_design.clsx)("univer-relative univer-h-10 univer-w-8 univer-cursor-pointer univer-border univer-border-solid univer-border-gray-200 univer-p-px", { "univer-border-blue-500": item === themeConfig.theme }),
+	const customThemeRows = [
+		{
+			key: "header",
+			label: localeService.t("sheets-table-ui.header"),
+			background: headerBg,
+			isDark: headerBgIsDark,
+			onChange: (value) => {
+				const headerRowStyle = (0, _univerjs_sheets_table.processStyleWithBorderStyle)("headerRowStyle", {
+					bg: { rgb: value },
+					cl: { rgb: new _univerjs_core.ColorKit(value).isDark() ? "#fff" : "#000" }
+				});
+				setCustomTheme(table.getTableStyleId(), { headerRowStyle });
+			}
+		},
+		{
+			key: "first-row",
+			label: localeService.t("sheets-table-ui.firstLine"),
+			background: firstRowBg,
+			isDark: firstRowBgIsDark,
+			onChange: (value) => {
+				setCustomTheme(table.getTableStyleId(), { firstRowStyle: {
+					bg: { rgb: value },
+					cl: { rgb: new _univerjs_core.ColorKit(value).isDark() ? "#fff" : "#000" }
+				} });
+			}
+		},
+		{
+			key: "second-row",
+			label: localeService.t("sheets-table-ui.secondLine"),
+			background: secondRowBg,
+			isDark: secondRowBgIsDark,
+			onChange: (value) => {
+				setCustomTheme(table.getTableStyleId(), { secondRowStyle: {
+					bg: { rgb: value },
+					cl: { rgb: new _univerjs_core.ColorKit(value).isDark() ? "#fff" : "#000" }
+				} });
+			}
+		},
+		{
+			key: "last-row",
+			label: localeService.t("sheets-table-ui.footer"),
+			background: lastRowBg,
+			isDark: lastRowBgIsDark,
+			onChange: (value) => {
+				const lastRowStyle = (0, _univerjs_sheets_table.processStyleWithBorderStyle)("lastRowStyle", {
+					bg: { rgb: value },
+					cl: { rgb: new _univerjs_core.ColorKit(value).isDark() ? "#fff" : "#000" }
+				});
+				setCustomTheme(table.getTableStyleId(), { lastRowStyle });
+			}
+		}
+	];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		dir: direction,
+		className: "univer-flex univer-flex-col univer-gap-5 univer-pb-4",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+			className: "univer-flex univer-flex-col univer-gap-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h5", {
+				className: "univer-m-0 univer-text-xs univer-font-medium univer-text-gray-500 dark:!univer-text-gray-300",
+				children: localeService.t("sheets-table-ui.defaultStyle")
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-grid univer-grid-cols-6 univer-gap-2",
+				children: defaultRangeThemes.map((item) => {
+					var _rangeThemeItem$getHe, _rangeThemeItem$getFi, _rangeThemeItem$getSe, _rangeThemeItem$getLa;
+					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)",
+						(rangeThemeItem === null || rangeThemeItem === void 0 || (_rangeThemeItem$getFi = rangeThemeItem.getFirstRowStyle()) === null || _rangeThemeItem$getFi === void 0 || (_rangeThemeItem$getFi = _rangeThemeItem$getFi.bg) === null || _rangeThemeItem$getFi === void 0 ? void 0 : _rangeThemeItem$getFi.rgb) || "rgb(255, 255, 255)",
+						(rangeThemeItem === null || rangeThemeItem === void 0 || (_rangeThemeItem$getSe = rangeThemeItem.getSecondRowStyle()) === null || _rangeThemeItem$getSe === void 0 || (_rangeThemeItem$getSe = _rangeThemeItem$getSe.bg) === null || _rangeThemeItem$getSe === void 0 ? void 0 : _rangeThemeItem$getSe.rgb) || "rgb(255, 255, 255)",
+						(rangeThemeItem === null || rangeThemeItem === void 0 || (_rangeThemeItem$getLa = rangeThemeItem.getLastRowStyle()) === null || _rangeThemeItem$getLa === void 0 || (_rangeThemeItem$getLa = _rangeThemeItem$getLa.bg) === null || _rangeThemeItem$getLa === void 0 ? void 0 : _rangeThemeItem$getLa.rgb) || "rgb(255, 255, 255)"
+					];
+					const selected = item === themeConfig.theme;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						title: item,
+						"aria-label": item,
+						"aria-pressed": selected,
+						className: (0, _univerjs_design.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", _univerjs_design.borderClassName, { "!univer-border-primary-500 univer-ring-2 univer-ring-primary-100": selected }),
 						onClick: () => handleThemeChange(item),
-						onMouseEnter: () => setHoverCustomId(item),
-						onMouseLeave: () => setHoverCustomId(null),
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "univer-box-border univer-h-2.5",
-								style: {
-									background: headerRowBg !== null && headerRowBg !== void 0 ? headerRowBg : TABLE_BORDER_NONE,
-									border: `${headerRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
-								}
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "univer-box-border univer-h-2.5",
-								style: {
-									background: firstRowBg !== null && firstRowBg !== void 0 ? firstRowBg : TABLE_BORDER_NONE,
-									border: `${firstRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
-								}
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "univer-box-border univer-h-2.5",
-								style: {
-									background: secondRowBg !== null && secondRowBg !== void 0 ? secondRowBg : TABLE_BORDER_NONE,
-									border: `${secondRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
-								}
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "univer-box-border univer-h-2.5",
-								style: {
-									background: lastRowBg !== null && lastRowBg !== void 0 ? lastRowBg : TABLE_BORDER_NONE,
-									border: `${lastRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
-								}
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "univer-absolute univer-right-[-3px] univer-top-[-3px] univer-size-3 univer-rounded-md univer-bg-gray-200 univer-text-center univer-text-xs univer-leading-[10px]",
-								style: { display: hoverCustomId === item ? "block" : "none" },
-								onClick: (e) => {
-									e.stopPropagation();
-									removeCustomTheme(item);
-								},
-								children: "x"
-							})
-						]
+						children: rowBackgrounds.map((background, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "univer-min-h-0 univer-w-full univer-flex-1",
+							style: {
+								background,
+								border: background ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT
+							}
+						}, index))
 					}, item);
-				})]
-			}), customSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "univer-h-px univer-w-full univer-bg-gray-200" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "univer-flex univer-flex-col univer-gap-2 univer-p-2",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "univer-flex univer-h-9 univer-gap-2",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: (0, _univerjs_design.clsx)("univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center univer-leading-9", _univerjs_design.borderClassName, {
-								"univer-text-white": headerBgIsDark,
-								"univer-text-gray-900": !headerBgIsDark
-							}),
-							style: { background: headerBg },
-							children: localeService.t("sheets-table-ui.header")
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
-							overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "univer-p-2",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.ColorPicker, {
-									value: headerBg,
-									onChange: (val) => {
-										const headerRowStyle = (0, _univerjs_sheets_table.processStyleWithBorderStyle)("headerRowStyle", {
-											bg: { rgb: val },
-											cl: { rgb: new _univerjs_core.ColorKit(val).isDark() ? "#fff" : "#000" }
-										});
-										setCustomTheme(table.getTableStyleId(), { headerRowStyle });
-									}
-								})
-							}),
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: (0, _univerjs_design.clsx)("univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded-sm univer-bg-white univer-p-1", _univerjs_design.borderClassName),
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: (0, _univerjs_design.clsx)("univer-size-4 univer-rounded-lg univer-bg-gray-400", _univerjs_design.borderClassName, {
-										"univer-text-white": headerBgIsDark,
-										"univer-text-gray-900": !headerBgIsDark
-									}),
-									style: { background: headerBg }
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DownIcon, { className: "univer-size-2" })]
-							})
-						})]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "univer-flex univer-h-9 univer-gap-2",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: (0, _univerjs_design.clsx)("univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center univer-leading-9", _univerjs_design.borderClassName, {
-								"univer-text-white": firstRowBgIsDark,
-								"univer-text-gray-900": !firstRowBgIsDark
-							}),
-							style: { background: firstRowBg },
-							children: localeService.t("sheets-table-ui.firstLine")
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
-							overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "univer-p-2",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.ColorPicker, {
-									value: firstRowBg,
-									onChange: (val) => {
-										setCustomTheme(table.getTableStyleId(), { firstRowStyle: {
-											bg: { rgb: val },
-											cl: { rgb: new _univerjs_core.ColorKit(val).isDark() ? "#fff" : "#000" }
-										} });
+				})
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+			className: "univer-flex univer-flex-col univer-gap-2",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h5", {
+					className: "univer-m-0 univer-text-xs univer-font-medium univer-text-gray-500 dark:!univer-text-gray-300",
+					children: localeService.t("sheets-table-ui.customStyle")
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "univer-grid univer-grid-cols-5 univer-gap-2 univer-rounded-lg univer-bg-gray-50 univer-p-2 dark:!univer-bg-gray-800",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						"data-u-comp": "sheet-table-theme-add",
+						"aria-label": localeService.t("sheets-table-ui.setTheme"),
+						className: "univer-flex univer-h-12 univer-w-full univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-lg univer-border univer-border-dashed univer-border-gray-300 univer-bg-gray-0 univer-p-0 univer-text-gray-500 univer-transition-colors hover:univer-border-primary-500 hover:univer-text-primary-600 focus:univer-outline-none focus:univer-ring-2 focus:univer-ring-primary-200 dark:!univer-border-gray-600 dark:!univer-bg-gray-900 dark:!univer-text-gray-300",
+						onClick: handleAddCustomTheme,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.IncreaseIcon, { className: "univer-size-4" })
+					}), customRangeThemes.map((item) => {
+						var _rangeThemeItem$getHe2, _rangeThemeItem$getFi2, _rangeThemeItem$getSe2, _rangeThemeItem$getLa2;
+						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,
+							rangeThemeItem === null || rangeThemeItem === void 0 || (_rangeThemeItem$getFi2 = rangeThemeItem.getFirstRowStyle()) === null || _rangeThemeItem$getFi2 === void 0 || (_rangeThemeItem$getFi2 = _rangeThemeItem$getFi2.bg) === null || _rangeThemeItem$getFi2 === void 0 ? void 0 : _rangeThemeItem$getFi2.rgb,
+							rangeThemeItem === null || rangeThemeItem === void 0 || (_rangeThemeItem$getSe2 = rangeThemeItem.getSecondRowStyle()) === null || _rangeThemeItem$getSe2 === void 0 || (_rangeThemeItem$getSe2 = _rangeThemeItem$getSe2.bg) === null || _rangeThemeItem$getSe2 === void 0 ? void 0 : _rangeThemeItem$getSe2.rgb,
+							rangeThemeItem === null || rangeThemeItem === void 0 || (_rangeThemeItem$getLa2 = rangeThemeItem.getLastRowStyle()) === null || _rangeThemeItem$getLa2 === void 0 || (_rangeThemeItem$getLa2 = _rangeThemeItem$getLa2.bg) === null || _rangeThemeItem$getLa2 === void 0 ? void 0 : _rangeThemeItem$getLa2.rgb
+						];
+						const selected = item === themeConfig.theme;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "univer-group univer-relative univer-h-12 univer-min-w-0",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								title: item,
+								"aria-label": item,
+								"aria-pressed": selected,
+								className: (0, _univerjs_design.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", _univerjs_design.borderClassName, { "!univer-border-primary-500 univer-ring-2 univer-ring-primary-100": selected }),
+								onClick: () => handleThemeChange(item),
+								children: rowBackgrounds.map((background, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "univer-min-h-0 univer-w-full univer-flex-1",
+									style: {
+										background: background ?? "none",
+										border: background ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT
 									}
-								})
-							}),
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: (0, _univerjs_design.clsx)("univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded-sm univer-bg-white univer-p-1", _univerjs_design.borderClassName),
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: (0, _univerjs_design.clsx)("univer-size-4 univer-rounded-lg univer-bg-gray-400", _univerjs_design.borderClassName),
-									style: { background: firstRowBg }
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DownIcon, { className: "univer-size-2" })]
-							})
-						})]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "univer-flex univer-h-9 univer-gap-2",
+								}, index))
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								"data-u-comp": "sheet-table-theme-remove",
+								"aria-label": `${localeService.t("sheets-table-ui.customStyle")} ${item}`,
+								className: (0, _univerjs_design.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
+								}),
+								onClick: (event) => {
+									event.stopPropagation();
+									removeCustomTheme(item);
+								},
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CloseIcon, { className: "univer-size-3" })
+							})]
+						}, item);
+					})]
+				}),
+				customSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "univer-flex univer-flex-col univer-gap-2 univer-rounded-lg univer-bg-gray-50 univer-p-3 dark:!univer-bg-gray-800",
+					children: customThemeRows.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "univer-flex univer-h-10 univer-min-w-0 univer-gap-2",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: (0, _univerjs_design.clsx)("univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center univer-leading-9", _univerjs_design.borderClassName, {
-								"univer-text-white": secondRowBgIsDark,
-								"univer-text-gray-900": !secondRowBgIsDark
+							className: (0, _univerjs_design.clsx)("univer-flex univer-min-w-0 univer-flex-1 univer-items-center univer-rounded-md univer-px-3 univer-text-sm univer-font-medium rtl:univer-text-right", _univerjs_design.borderClassName, {
+								"univer-text-gray-0": row.isDark,
+								"univer-text-gray-900": !row.isDark
 							}),
-							style: { background: secondRowBg },
-							children: localeService.t("sheets-table-ui.secondLine")
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
-							overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "univer-p-2",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.ColorPicker, {
-									value: secondRowBg,
-									onChange: (val) => setCustomTheme(table.getTableStyleId(), { secondRowStyle: {
-										bg: { rgb: val },
-										cl: { rgb: new _univerjs_core.ColorKit(val).isDark() ? "#fff" : "#000" }
-									} })
-								})
-							}),
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: (0, _univerjs_design.clsx)("univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded-sm univer-bg-white univer-p-1", _univerjs_design.borderClassName),
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: (0, _univerjs_design.clsx)("univer-size-4 univer-rounded-lg univer-bg-gray-400", _univerjs_design.borderClassName),
-									style: { background: secondRowBg }
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DownIcon, { className: "univer-size-2" })]
+							style: { background: row.background },
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "univer-truncate",
+								children: row.label
 							})
-						})]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "univer-flex univer-h-9 univer-gap-2",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: (0, _univerjs_design.clsx)("univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center univer-leading-9", _univerjs_design.borderClassName, {
-								"univer-text-white": lastRowBgIsDark,
-								"univer-text-gray-900": !lastRowBgIsDark
-							}),
-							style: { background: lastRowBg },
-							children: localeService.t("sheets-table-ui.footer")
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
 							overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								dir: direction,
 								className: "univer-p-2",
 								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.ColorPicker, {
-									value: lastRowBg,
-									onChange: (val) => {
-										const lastRowStyle = (0, _univerjs_sheets_table.processStyleWithBorderStyle)("lastRowStyle", {
-											bg: { rgb: val },
-											cl: { rgb: new _univerjs_core.ColorKit(val).isDark() ? "#fff" : "#000" }
-										});
-										setCustomTheme(table.getTableStyleId(), { lastRowStyle });
-									}
+									value: new _univerjs_core.ColorKit(row.background).toHexString(),
+									onChange: row.onChange
 								})
 							}),
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: (0, _univerjs_design.clsx)("univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded-sm univer-bg-white univer-p-1", _univerjs_design.borderClassName),
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: (0, _univerjs_design.clsx)("univer-size-4 univer-rounded-lg univer-bg-gray-400", _univerjs_design.borderClassName),
-									style: { background: lastRowBg }
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DownIcon, { className: "univer-size-2" })]
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+								type: "button",
+								"aria-label": `${row.label} ${localeService.t("sheets-table-ui.setTheme")}`,
+								className: (0, _univerjs_design.clsx)("univer-flex univer-h-10 univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded-md univer-bg-gray-0 univer-px-2 univer-text-gray-600 univer-transition-colors hover:univer-bg-gray-100 focus:univer-outline-none focus:univer-ring-2 focus:univer-ring-primary-200 dark:!univer-bg-gray-900 dark:!univer-text-gray-300", _univerjs_design.borderClassName),
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: (0, _univerjs_design.clsx)("univer-size-4 univer-rounded-full", _univerjs_design.borderClassName),
+									style: { background: row.background }
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DownIcon, { className: "univer-size-3" })]
 							})
 						})]
-					})
-				]
-			})] })]
-		})
-	] });
+					}, row.key))
+				})
+			]
+		})]
+	});
 };
 
 //#endregion
@@ -1911,7 +1911,11 @@ let ComponentsController = class ComponentsController extends _univerjs_core.Dis
 		this._registerIcons();
 	}
 	_registerComponents() {
-		[[SHEETS_TABLE_FILTER_PANEL_OPENED_KEY, SheetTableFilterPanel], [SHEET_TABLE_RENAME_DIALOG, SheetTableRenameDialog]].forEach(([key, comp]) => {
+		[
+			[SHEETS_TABLE_FILTER_PANEL_OPENED_KEY, SheetTableFilterPanel],
+			[SHEET_TABLE_MENU, SheetTableMenu],
+			[SHEET_TABLE_RENAME_DIALOG, SheetTableRenameDialog]
+		].forEach(([key, comp]) => {
 			this.disposeWithMe(this._componentManager.register(key, comp));
 		});
 		[[TABLE_SELECTOR_DIALOG, SheetTableSelector], [SHEET_TABLE_THEME_PANEL, SheetTableThemePanel]].forEach(([key, comp]) => {
@@ -1926,14 +1930,6 @@ ComponentsController = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)
 
 //#endregion
 //#region src/views/widgets/table-controls-util.ts
-const TABLE_CONTROL_MENU_WIDTH = 168;
-const TABLE_CONTROL_MENU_ITEM_HEIGHT = 32;
-const TABLE_CONTROL_MENU_ACTIONS = [
-	"rename",
-	"update-range",
-	"set-theme",
-	"delete"
-];
 function isPointInTableControlRegion(region, x, y) {
 	return x >= region.left && x <= region.left + region.width && y >= region.top && y <= region.top + region.height;
 }
@@ -1941,17 +1937,6 @@ function hitTestTableControl(regions, x, y) {
 	for (let i = regions.length - 1; i >= 0; i--) if (isPointInTableControlRegion(regions[i], x, y)) return regions[i];
 	return null;
 }
-function buildTableMenuRegions(tableId, left, top) {
-	return TABLE_CONTROL_MENU_ACTIONS.map((action, index) => ({
-		type: "menu-item",
-		tableId,
-		action,
-		left,
-		top: top + index * 32,
-		width: 168,
-		height: 32
-	}));
-}
 function buildCenteredPlusSegments(centerX, centerY, size) {
 	const halfSize = size / 2;
 	return [{
@@ -1977,9 +1962,6 @@ const ANCHOR_OFFSET_Y = 0;
 const ANCHOR_BORDER = "rgba(0, 0, 0, 0.22)";
 const ANCHOR_DIVIDER = "rgba(0, 0, 0, 0.20)";
 const ANCHOR_TOGGLE_BG_ACTIVE = "rgba(0, 0, 0, 0.12)";
-const MENU_RADIUS = 8;
-const MENU_BORDER = "#d9dee7";
-const MENU_HOVER_BG = "#f1f3f4";
 const INSERT_BUTTON_VISUAL_SIZE = 18;
 const INSERT_BUTTON_PLUS_SIZE = 8;
 var SheetTableControlsShape = class extends _univerjs_engine_render.Shape {
@@ -1995,21 +1977,11 @@ var SheetTableControlsShape = class extends _univerjs_engine_render.Shape {
 		_defineProperty(this, "_openedMenuTableId", null);
 		_defineProperty(this, "_hoveredRegion", null);
 		_defineProperty(this, "_hoveredInsertRegion", null);
-		_defineProperty(this, "_menuLabels", {
-			rename: "Rename table",
-			"update-range": "Update range",
-			"set-theme": "Set theme",
-			delete: "Remove table"
-		});
 	}
 	setItems(items) {
 		this._items = items;
 		this.makeDirty(true);
 	}
-	setMenuLabels(labels) {
-		this._menuLabels = labels;
-		this.makeDirty(true);
-	}
 	setOpenedMenuTableId(tableId) {
 		if (this._openedMenuTableId === tableId) return;
 		this._openedMenuTableId = tableId;
@@ -2018,6 +1990,9 @@ var SheetTableControlsShape = class extends _univerjs_engine_render.Shape {
 	getOpenedMenuTableId() {
 		return this._openedMenuTableId;
 	}
+	getAnchorRegion(tableId) {
+		return this._regions.find((region) => region.type === "anchor-main" && region.tableId === tableId) ?? null;
+	}
 	setHoveredRegion(region) {
 		if (this._hoveredRegion === region) return;
 		this._hoveredRegion = region;
@@ -2056,12 +2031,11 @@ var SheetTableControlsShape = class extends _univerjs_engine_render.Shape {
 		ctx.textBaseline = "middle";
 		for (const item of this._items) this._drawAnchor(ctx, skeleton, item);
 		if (this._hoveredInsertRegion) {
-			var _item$fill;
 			const item = this._items.find((renderItem) => {
 				var _this$_hoveredInsertR;
 				return renderItem.tableId === ((_this$_hoveredInsertR = this._hoveredInsertRegion) === null || _this$_hoveredInsertR === void 0 ? void 0 : _this$_hoveredInsertR.tableId);
 			});
-			this._drawInsertButton(ctx, this._hoveredInsertRegion, (_item$fill = item === null || item === void 0 ? void 0 : item.fill) !== null && _item$fill !== void 0 ? _item$fill : "#355bb7");
+			this._drawInsertButton(ctx, this._hoveredInsertRegion, (item === null || item === void 0 ? void 0 : item.fill) ?? "#355bb7");
 			this._regions.push(this._hoveredInsertRegion);
 		}
 		ctx.restore();
@@ -2098,7 +2072,6 @@ var SheetTableControlsShape = class extends _univerjs_engine_render.Shape {
 			height: 28
 		});
 		this._regions.push(toggleRegion);
-		if (this._openedMenuTableId === item.tableId) this._drawMenu(ctx, item.tableId, left, top + 28);
 	}
 	_drawAnchorToggle(ctx, anchorWidth, color, active) {
 		const toggleLeft = anchorWidth - ANCHOR_TOGGLE_WIDTH;
@@ -2159,34 +2132,6 @@ var SheetTableControlsShape = class extends _univerjs_engine_render.Shape {
 		ctx.fill();
 		ctx.restore();
 	}
-	_drawMenu(ctx, tableId, left, top) {
-		const regions = buildTableMenuRegions(tableId, left, top);
-		ctx.save();
-		ctx.translateWithPrecision(left, top);
-		_univerjs_engine_render.Rect.drawWith(ctx, {
-			width: 168,
-			height: regions.length * 32,
-			radius: MENU_RADIUS,
-			fill: "#fff",
-			stroke: MENU_BORDER
-		});
-		ctx.restore();
-		for (const region of regions) {
-			if (this._isSameRegion(this._hoveredRegion, region)) {
-				ctx.save();
-				ctx.fillStyle = MENU_HOVER_BG;
-				ctx.fillRectByPrecision(region.left, region.top, region.width, region.height);
-				ctx.restore();
-			}
-			ctx.save();
-			ctx.font = `12px ${_univerjs_engine_render.DEFAULT_FONTFACE_PLANE}`;
-			ctx.fillStyle = region.action === "delete" ? "#d92d20" : "#344054";
-			ctx.textAlign = "left";
-			ctx.fillText(this._menuLabels[region.action], region.left + 12, region.top + region.height / 2);
-			ctx.restore();
-		}
-		this._regions.push(...regions);
-	}
 	_drawInsertButton(ctx, region, fill) {
 		const centerX = region.left + region.width / 2;
 		const centerY = region.top + region.height / 2;
@@ -2210,7 +2155,7 @@ var SheetTableControlsShape = class extends _univerjs_engine_render.Shape {
 		ctx.restore();
 	}
 	_isSameRegion(a, b) {
-		return Boolean(a && a.type === b.type && a.tableId === b.tableId && a.action === b.action && a.index === b.index);
+		return Boolean(a && a.type === b.type && a.tableId === b.tableId && a.index === b.index);
 	}
 };
 
@@ -2231,7 +2176,7 @@ function isSameTopGap(left, right) {
 	return left.size === right.size && left.color === right.color && left.stripeColor === right.stripeColor;
 }
 let SheetTableControlsRenderController = class SheetTableControlsRenderController extends _univerjs_core.Disposable {
-	constructor(_context, _injector, _sheetSkeletonManagerService, _commandService, _tableManager, _rangeThemeModel, _workbookPermissionService, _permissionService, _sheetsSelectionsService, _selectionRenderService, _sheetTableThemeUIController, _localeService, _dialogService, _sidebarService) {
+	constructor(_context, _injector, _sheetSkeletonManagerService, _commandService, _tableManager, _rangeThemeModel, _workbookPermissionService, _permissionService, _sheetsSelectionsService, _selectionRenderService, _sheetTableThemeUIController, _localeService, _dialogService, _sidebarService, _sheetCanvasPopupService) {
 		super();
 		this._context = _context;
 		this._injector = _injector;
@@ -2247,17 +2192,20 @@ let SheetTableControlsRenderController = class SheetTableControlsRenderControlle
 		this._localeService = _localeService;
 		this._dialogService = _dialogService;
 		this._sidebarService = _sidebarService;
+		this._sheetCanvasPopupService = _sheetCanvasPopupService;
 		_defineProperty(this, "_shape", void 0);
 		_defineProperty(this, "_topGapBaseBySkeleton", /* @__PURE__ */ new WeakMap());
+		_defineProperty(this, "_menuPopup", null);
 		this._shape = new SheetTableControlsShape("SheetTableControlsShape", () => this._sheetSkeletonManagerService.getCurrentSkeleton() || null);
 		this._initShape();
 		this._initRefresh();
 		this._refresh();
 	}
 	_initShape() {
-		var _this$_context$compon, _this$_context$compon2;
+		var _this$_context$compon;
 		this._context.scene.addObjects([this._shape], TABLE_CONTROLS_LAYER_INDEX);
 		this.disposeWithMe((0, _univerjs_core.toDisposable)(() => {
+			this._closeFloatingControls();
 			this._context.scene.removeObjects([this._shape]);
 		}));
 		this.disposeWithMe(this._shape.onPointerMove$.subscribeEvent((evt, state) => {
@@ -2269,11 +2217,11 @@ let SheetTableControlsRenderController = class SheetTableControlsRenderControlle
 		this.disposeWithMe(this._shape.onPointerDown$.subscribeEvent((evt, state) => {
 			this._handlePointerDown(evt, state);
 		}));
-		this.disposeWithMe((_this$_context$compon = (_this$_context$compon2 = this._context.components.get(_univerjs_sheets_ui.SHEET_VIEW_KEY.MAIN)) === null || _this$_context$compon2 === void 0 ? void 0 : _this$_context$compon2.onPointerMove$.subscribeEvent((evt) => {
+		this.disposeWithMe(((_this$_context$compon = this._context.components.get(_univerjs_sheets_ui.SHEET_VIEW_KEY.MAIN)) === null || _this$_context$compon === void 0 ? void 0 : _this$_context$compon.onPointerMove$.subscribeEvent((evt) => {
 			const point = this._getLocalPoint(evt);
 			const insertRegion = this._getInsertRegionFromPoint(point.x, point.y);
 			this._shape.setHoveredInsertRegion(insertRegion);
-		})) !== null && _this$_context$compon !== void 0 ? _this$_context$compon : (0, _univerjs_core.toDisposable)(() => {}));
+		})) ?? (0, _univerjs_core.toDisposable)(() => {}));
 	}
 	_initRefresh() {
 		const commandExecuted$ = (0, _univerjs_core.fromCallback)(this._commandService.onCommandExecuted.bind(this._commandService)).pipe((0, rxjs.filter)(([command]) => {
@@ -2304,23 +2252,17 @@ let SheetTableControlsRenderController = class SheetTableControlsRenderControlle
 			return;
 		}
 		this._syncTopTableGap(skeleton);
-		this._shape.setMenuLabels({
-			rename: this._localeService.t("sheets-table-ui.rename"),
-			"update-range": this._localeService.t("sheets-table-ui.updateRange"),
-			"set-theme": this._localeService.t("sheets-table-ui.setTheme"),
-			delete: this._localeService.t("sheets-table-ui.removeTable")
-		});
 		const unitId = this._context.unit.getUnitId();
 		const subUnitId = worksheet.getSheetId();
 		const items = this._tableManager.getTablesBySubunitId(unitId, subUnitId).map((table) => {
-			var _rangeTheme$getHeader, _rangeTheme$getHeader2, _rangeTheme$getHeader3, _rangeTheme$getHeader4;
+			var _rangeTheme$getHeader, _rangeTheme$getHeader2;
 			const rangeTheme = this._rangeThemeModel.getRangeThemeStyle(unitId, table.getTableStyleId());
 			return {
 				tableId: table.getId(),
 				tableName: table.getDisplayName(),
 				range: table.getRange(),
-				fill: (_rangeTheme$getHeader = rangeTheme === null || rangeTheme === void 0 || (_rangeTheme$getHeader2 = rangeTheme.getHeaderRowStyle()) === null || _rangeTheme$getHeader2 === void 0 || (_rangeTheme$getHeader2 = _rangeTheme$getHeader2.bg) === null || _rangeTheme$getHeader2 === void 0 ? void 0 : _rangeTheme$getHeader2.rgb) !== null && _rangeTheme$getHeader !== void 0 ? _rangeTheme$getHeader : "rgb(53,91,183)",
-				text: (_rangeTheme$getHeader3 = rangeTheme === null || rangeTheme === void 0 || (_rangeTheme$getHeader4 = rangeTheme.getHeaderRowStyle()) === null || _rangeTheme$getHeader4 === void 0 || (_rangeTheme$getHeader4 = _rangeTheme$getHeader4.cl) === null || _rangeTheme$getHeader4 === void 0 ? void 0 : _rangeTheme$getHeader4.rgb) !== null && _rangeTheme$getHeader3 !== void 0 ? _rangeTheme$getHeader3 : "rgb(255,255,255)"
+				fill: (rangeTheme === null || rangeTheme === void 0 || (_rangeTheme$getHeader = rangeTheme.getHeaderRowStyle()) === null || _rangeTheme$getHeader === void 0 || (_rangeTheme$getHeader = _rangeTheme$getHeader.bg) === null || _rangeTheme$getHeader === void 0 ? void 0 : _rangeTheme$getHeader.rgb) ?? "rgb(53,91,183)",
+				text: (rangeTheme === null || rangeTheme === void 0 || (_rangeTheme$getHeader2 = rangeTheme.getHeaderRowStyle()) === null || _rangeTheme$getHeader2 === void 0 || (_rangeTheme$getHeader2 = _rangeTheme$getHeader2.cl) === null || _rangeTheme$getHeader2 === void 0 ? void 0 : _rangeTheme$getHeader2.rgb) ?? "rgb(255,255,255)"
 			};
 		});
 		this._shape.setItems(items);
@@ -2337,7 +2279,7 @@ let SheetTableControlsRenderController = class SheetTableControlsRenderControlle
 		const point = this._getLocalPoint(evt);
 		const hit = this._shape.hitTest(point.x, point.y);
 		const insertRegion = this._isInsertHit(hit) ? hit : hit ? null : this._getInsertRegionFromPoint(point.x, point.y);
-		const activeHit = hit !== null && hit !== void 0 ? hit : insertRegion;
+		const activeHit = hit ?? insertRegion;
 		this._shape.setHoveredRegion(this._isInsertHit(hit) ? null : hit);
 		this._shape.setHoveredInsertRegion(insertRegion);
 		if (activeHit) {
@@ -2355,10 +2297,9 @@ let SheetTableControlsRenderController = class SheetTableControlsRenderControlle
 		this._context.scene.resetCursor();
 	}
 	_handlePointerDown(evt, state) {
-		var _this$_shape$hitTest;
 		if (evt.button === 2) return;
 		const point = this._getLocalPoint(evt);
-		const hit = (_this$_shape$hitTest = this._shape.hitTest(point.x, point.y)) !== null && _this$_shape$hitTest !== void 0 ? _this$_shape$hitTest : this._getInsertRegionFromPoint(point.x, point.y);
+		const hit = this._shape.hitTest(point.x, point.y) ?? this._getInsertRegionFromPoint(point.x, point.y);
 		if (!hit) {
 			this._closeFloatingControls();
 			return;
@@ -2374,7 +2315,7 @@ let SheetTableControlsRenderController = class SheetTableControlsRenderControlle
 		const unitId = this._context.unit.getUnitId();
 		const subUnitId = worksheet.getSheetId();
 		if (hit.type === "anchor-menu-toggle" || hit.type === "anchor-main") {
-			this._shape.setOpenedMenuTableId(this._shape.getOpenedMenuTableId() === hit.tableId ? null : hit.tableId);
+			this._toggleTableMenu(unitId, subUnitId, hit.tableId);
 			return;
 		}
 		if (hit.type === "insert-row") {
@@ -2397,28 +2338,65 @@ let SheetTableControlsRenderController = class SheetTableControlsRenderControlle
 				count: 1
 			});
 			this._closeFloatingControls();
+		}
+	}
+	_toggleTableMenu(unitId, subUnitId, tableId) {
+		if (this._shape.getOpenedMenuTableId() === tableId) {
+			this._closeFloatingControls();
 			return;
 		}
-		if (hit.type !== "menu-item") return;
-		switch (hit.action) {
+		const table = this._tableManager.getTableById(unitId, tableId);
+		const anchor = this._shape.getAnchorRegion(tableId);
+		if (!table || !anchor) return;
+		this._closeFloatingControls();
+		this._shape.setOpenedMenuTableId(tableId);
+		const range = table.getRange();
+		this._menuPopup = this._sheetCanvasPopupService.attachPopupByPosition({
+			left: anchor.left,
+			right: anchor.left + anchor.width,
+			top: anchor.top,
+			bottom: anchor.top + anchor.height
+		}, {
+			componentKey: "SHEET_TABLE_MENU",
+			direction: "bottom-left",
+			extraProps: {
+				anchorWidth: anchor.width,
+				tableName: table.getDisplayName(),
+				labels: {
+					rename: this._localeService.t("sheets-table-ui.rename"),
+					"update-range": this._localeService.t("sheets-table-ui.updateRange"),
+					"set-theme": this._localeService.t("sheets-table-ui.setTheme"),
+					delete: this._localeService.t("sheets-table-ui.removeTable")
+				},
+				onSelect: (action) => this._handleTableMenuAction(action, unitId, subUnitId, tableId),
+				onClose: () => this._closeFloatingControls()
+			}
+		}, {
+			unitId,
+			subUnitId,
+			row: range.startRow,
+			col: range.startColumn
+		}) ?? null;
+		if (!this._menuPopup) this._shape.setOpenedMenuTableId(null);
+	}
+	_handleTableMenuAction(action, unitId, subUnitId, tableId) {
+		this._closeFloatingControls();
+		switch (action) {
 			case "rename":
-				this._openRenameDialog(unitId, hit.tableId);
-				break;
-			case "update-range":
-				this._openRangeSelector(unitId, subUnitId, hit.tableId);
+				this._openRenameDialog(unitId, tableId);
 				break;
+			case "update-range": return this._openRangeSelector(unitId, subUnitId, tableId);
 			case "set-theme":
-				this._openThemePanel(unitId, subUnitId, hit.tableId);
+				this._openThemePanel(unitId, subUnitId, tableId);
 				break;
 			case "delete":
 				this._commandService.executeCommand(_univerjs_sheets_table.DeleteSheetTableCommand.id, {
-					tableId: hit.tableId,
+					tableId,
 					subUnitId,
 					unitId
 				});
 				break;
 		}
-		this._closeFloatingControls();
 	}
 	_openRenameDialog(unitId, tableId) {
 		this._dialogService.open({
@@ -2455,13 +2433,15 @@ let SheetTableControlsRenderController = class SheetTableControlsRenderControlle
 		this._sidebarService.open({
 			id: SHEET_TABLE_THEME_PANEL_ID,
 			header: { title: this._localeService.t("sheets-table-ui.tableStyle") },
-			children: {
-				label: SHEET_TABLE_THEME_PANEL,
-				oldConfig: table.getTableConfig(),
-				unitId,
-				subUnitId,
-				tableId
-			},
+			children: { label: {
+				name: SHEET_TABLE_THEME_PANEL,
+				props: {
+					oldConfig: table.getTableConfig(),
+					unitId,
+					subUnitId,
+					tableId
+				}
+			} },
 			width: 330
 		});
 	}
@@ -2515,12 +2495,11 @@ let SheetTableControlsRenderController = class SheetTableControlsRenderControlle
 		const previousTopGap = rowGaps[TABLE_CONTROL_GAP_ROW] ? { ...rowGaps[TABLE_CONTROL_GAP_ROW] } : null;
 		let shouldSync = false;
 		if (hasTopTable) {
-			var _baseGap$size;
 			if (!this._topGapBaseBySkeleton.has(skeleton)) this._topGapBaseBySkeleton.set(skeleton, rowGaps[TABLE_CONTROL_GAP_ROW] ? { ...rowGaps[TABLE_CONTROL_GAP_ROW] } : null);
 			const baseGap = this._topGapBaseBySkeleton.get(skeleton);
 			rowGaps[TABLE_CONTROL_GAP_ROW] = {
-				...baseGap !== null && baseGap !== void 0 ? baseGap : rowGaps[TABLE_CONTROL_GAP_ROW],
-				size: ((_baseGap$size = baseGap === null || baseGap === void 0 ? void 0 : baseGap.size) !== null && _baseGap$size !== void 0 ? _baseGap$size : 0) + 32
+				...baseGap ?? rowGaps[TABLE_CONTROL_GAP_ROW],
+				size: ((baseGap === null || baseGap === void 0 ? void 0 : baseGap.size) ?? 0) + 32
 			};
 			shouldSync = true;
 		} else if (this._topGapBaseBySkeleton.has(skeleton)) {
@@ -2542,6 +2521,9 @@ let SheetTableControlsRenderController = class SheetTableControlsRenderControlle
 		this._selectionRenderService.resetSelectionsByModelData(this._sheetsSelectionsService.getCurrentSelections());
 	}
 	_closeFloatingControls() {
+		const menuPopup = this._menuPopup;
+		this._menuPopup = null;
+		menuPopup === null || menuPopup === void 0 || menuPopup.dispose();
 		this._shape.setOpenedMenuTableId(null);
 		this._shape.setHoveredInsertRegion(null);
 		this._shape.setHoveredRegion(null);
@@ -2568,7 +2550,8 @@ SheetTableControlsRenderController = __decorate([
 	__decorateParam(10, (0, _univerjs_core.Inject)(SheetTableThemeUIController)),
 	__decorateParam(11, (0, _univerjs_core.Inject)(_univerjs_core.LocaleService)),
 	__decorateParam(12, _univerjs_ui.IDialogService),
-	__decorateParam(13, _univerjs_ui.ISidebarService)
+	__decorateParam(13, _univerjs_ui.ISidebarService),
+	__decorateParam(14, (0, _univerjs_core.Inject)(_univerjs_sheets_ui.SheetCanvasPopManagerService))
 ], SheetTableControlsRenderController);
 
 //#endregion
@@ -2741,12 +2724,12 @@ let SheetsTableFilterButtonRenderController = class SheetsTableFilterButtonRende
 		const worksheet = workbook.getSheetBySheetId(worksheetId);
 		if (!worksheet) return;
 		for (const { range, states, tableId } of tableFilterRanges) {
-			var _this$_rangeThemeMode, _headerStyle$cl$rgb, _headerStyle$cl, _headerStyle$bg$rgb, _headerStyle$bg;
+			var _this$_rangeThemeMode, _headerStyle$cl, _headerStyle$bg;
 			const { startRow, startColumn, endColumn } = range;
 			const table = this._tableManager.getTableById(unitId, tableId);
 			const headerStyle = table ? (_this$_rangeThemeMode = this._rangeThemeModel.getRangeThemeStyle(unitId, table.getTableStyleId())) === null || _this$_rangeThemeMode === void 0 ? void 0 : _this$_rangeThemeMode.getHeaderRowStyle() : null;
-			const iconColor = (_headerStyle$cl$rgb = headerStyle === null || headerStyle === void 0 || (_headerStyle$cl = headerStyle.cl) === null || _headerStyle$cl === void 0 ? void 0 : _headerStyle$cl.rgb) !== null && _headerStyle$cl$rgb !== void 0 ? _headerStyle$cl$rgb : "#fff";
-			const hoverIconColor = (_headerStyle$bg$rgb = headerStyle === null || headerStyle === void 0 || (_headerStyle$bg = headerStyle.bg) === null || _headerStyle$bg === void 0 ? void 0 : _headerStyle$bg.rgb) !== null && _headerStyle$bg$rgb !== void 0 ? _headerStyle$bg$rgb : "#202124";
+			const iconColor = (headerStyle === null || headerStyle === void 0 || (_headerStyle$cl = headerStyle.cl) === null || _headerStyle$cl === void 0 ? void 0 : _headerStyle$cl.rgb) ?? "#fff";
+			const hoverIconColor = (headerStyle === null || headerStyle === void 0 || (_headerStyle$bg = headerStyle.bg) === null || _headerStyle$bg === void 0 ? void 0 : _headerStyle$bg.rgb) ?? "#202124";
 			this._interceptCellContent(unitId, worksheetId, range);
 			for (let col = startColumn; col <= endColumn; col++) {
 				const key = `sheets-table-filter-button-${startRow}-${col}`;
@@ -3017,7 +3000,7 @@ _defineProperty(UniverSheetsTableUIPlugin, "packageName", name);
 _defineProperty(UniverSheetsTableUIPlugin, "version", version);
 _defineProperty(UniverSheetsTableUIPlugin, "type", _univerjs_core.UniverInstanceType.UNIVER_SHEET);
 UniverSheetsTableUIPlugin = __decorate([
-	(0, _univerjs_core.DependentOn)(_univerjs_engine_render.UniverRenderEnginePlugin, _univerjs_sheets.UniverSheetsPlugin, _univerjs_ui.UniverUIPlugin, _univerjs_sheets_table.UniverSheetsTablePlugin, _univerjs_sheets_ui.UniverSheetsUIPlugin),
+	(0, _univerjs_core.DependentOn)(_univerjs_engine_render.UniverRenderEnginePlugin, _univerjs_sheets.UniverSheetsPlugin, _univerjs_sheets_table.UniverSheetsTablePlugin, _univerjs_sheets_ui.UniverSheetsUIPlugin),
 	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
 	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_core.ICommandService)),
 	__decorateParam(3, _univerjs_core.IConfigService),