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

package/lib/index.js

@@ -4,9 +4,9 @@ import { ColorKit, CommandType, DependentOn, Disposable, ErrorService, ICommandS
 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, UniverSheetsUIPlugin, getCoordByCell, getCurrentRangeDisable$, getTransformCoord } 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, Rect, Shape, UniverRenderEnginePlugin } from "@univerjs/engine-render";
-import { AscendingIcon, DeleteColumnDoubleIcon, DescendingIcon, DownIcon, LeftInsertColumnDoubleIcon, MoreDownIcon, RightInsertColumnDoubleIcon, TableIcon } from "@univerjs/icons";
-import { Button, ButtonGroup, CascaderList, Checkbox, ColorPicker, DatePicker, DateRangePicker, Dropdown, Input, InputNumber, Segmented, Select, borderClassName, clsx, scrollbarClassName } from "@univerjs/design";
+import { CURSOR_TYPE, DEFAULT_FONTFACE_PLANE, IRenderManagerService, Shape, UniverRenderEnginePlugin } from "@univerjs/engine-render";
+import { AscendingIcon, CloseIcon, DeleteColumnDoubleIcon, DescendingIcon, DownIcon, IncreaseIcon, LeftInsertColumnDoubleIcon, MoreDownIcon, RightInsertColumnDoubleIcon, TableIcon } from "@univerjs/icons";
+import { Button, ButtonGroup, CascaderList, Checkbox, ColorPicker, DatePicker, DateRangePicker, Dropdown, DropdownMenu, Input, InputNumber, Segmented, Select, borderClassName, clsx, scrollbarClassName } from "@univerjs/design";
 import { SortRangeCommand, SortType } from "@univerjs/sheets-sort";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -37,6 +37,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)";
@@ -247,7 +248,7 @@ const menuSchema = {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-table-ui";
-var version = "1.0.0-beta.0";
+var version = "1.0.0-beta.1";
 
 //#endregion
 //#region \0@oxc-project+runtime@0.140.0/helpers/esm/typeof.js
@@ -941,7 +942,7 @@ const SheetTableConditionPanel = (props) => {
 			wrapperClassName: "!univer-h-[150px]"
 		}),
 		children: /* @__PURE__ */ jsxs("div", {
-			className: 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", borderClassName),
+			className: 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", borderClassName),
 			children: [/* @__PURE__ */ jsx("span", { children: selectType }), /* @__PURE__ */ jsx(MoreDownIcon, {})]
 		})
 	}), /* @__PURE__ */ jsxs("div", {
@@ -949,7 +950,7 @@ const SheetTableConditionPanel = (props) => {
 		children: [
 			subComponentType === "Input" && /* @__PURE__ */ jsx(Fragment, { children: conditionInfo.type === TableConditionTypeEnum.String ? /* @__PURE__ */ jsx(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__ */ jsx(InputNumber, {
@@ -1274,14 +1275,14 @@ function SheetTableFilterPanel() {
 	};
 	const workbookEditableId = new WorkbookEditablePermission(unitId).id;
 	return /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [/* @__PURE__ */ 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__ */ 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__ */ jsx(LeftInsertColumnDoubleIcon, {
 							className: "univer-size-5",
@@ -1290,7 +1291,7 @@ function SheetTableFilterPanel() {
 					}),
 					/* @__PURE__ */ 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__ */ jsx(RightInsertColumnDoubleIcon, {
 							className: "univer-size-5",
@@ -1299,7 +1300,7 @@ function SheetTableFilterPanel() {
 					}),
 					/* @__PURE__ */ 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__ */ jsx(DeleteColumnDoubleIcon, {
@@ -1360,20 +1361,68 @@ function SheetTableFilterPanel() {
 					disabled: tableFilter === void 0,
 					onClick: onClearFilter,
 					children: localeService.t("sheets-table-ui.filter.clear-filter")
-				}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Button, {
-					className: "univer-mr-2",
-					onClick: onCancel,
-					children: localeService.t("sheets-table-ui.filter.cancel")
-				}), /* @__PURE__ */ jsx(Button, {
-					variant: "primary",
-					onClick: onApply,
-					children: localeService.t("sheets-table-ui.filter.confirm")
-				})] })]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "univer-flex univer-gap-x-2",
+					children: [/* @__PURE__ */ jsx(Button, {
+						onClick: onCancel,
+						children: localeService.t("sheets-table-ui.filter.cancel")
+					}), /* @__PURE__ */ jsx(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__ */ jsx(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__ */ 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) {
@@ -1601,7 +1650,7 @@ const SheetTableThemePanel = (props) => {
 	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 [hoverCustomId, setHoverCustomId] = useState(null);
+	const direction = useObservable(localeService.direction$, localeService.getDirection());
 	const handleThemeChange = (theme) => {
 		commandService.executeCommand(SetSheetTableCommand.id, {
 			unitId,
@@ -1647,237 +1696,192 @@ const SheetTableThemePanel = (props) => {
 	const firstRowBgIsDark = new ColorKit(firstRowBg).isDark();
 	const secondRowBgIsDark = new ColorKit(secondRowBg).isDark();
 	const lastRowBgIsDark = new ColorKit(lastRowBg).isDark();
-	return /* @__PURE__ */ jsxs("div", { children: [
-		/* @__PURE__ */ jsx("h5", { children: localeService.t("sheets-table-ui.defaultStyle") }),
-		/* @__PURE__ */ 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__ */ jsxs("div", {
-					className: 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__ */ jsx("div", { style: {
-							background: headerRowBg,
-							border: `${headerRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
-						} }),
-						/* @__PURE__ */ jsx("div", { style: {
-							background: firstRowBg,
-							border: `${firstRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
-						} }),
-						/* @__PURE__ */ jsx("div", { style: {
-							background: secondRowBg,
-							border: `${secondRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
-						} }),
-						/* @__PURE__ */ jsx("div", { style: {
-							background: lastRowBg,
-							border: `${lastRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
-						} })
-					]
-				}, item);
-			})
-		}),
-		/* @__PURE__ */ jsx("h5", { children: localeService.t("sheets-table-ui.customStyle") }),
-		/* @__PURE__ */ jsxs("div", {
-			className: clsx("univer-w-full univer-rounded-sm", borderClassName),
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "univer-flex univer-flex-wrap univer-gap-2 univer-p-2",
-				children: [/* @__PURE__ */ jsx("div", {
-					className: clsx("univer-h-10 univer-w-8 univer-cursor-pointer univer-p-px univer-text-center univer-leading-10", 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__ */ jsxs("div", {
-						className: 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 = processStyleWithBorderStyle("headerRowStyle", {
+					bg: { rgb: value },
+					cl: { rgb: new 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 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 ColorKit(value).isDark() ? "#fff" : "#000" }
+				} });
+			}
+		},
+		{
+			key: "last-row",
+			label: localeService.t("sheets-table-ui.footer"),
+			background: lastRowBg,
+			isDark: lastRowBgIsDark,
+			onChange: (value) => {
+				const lastRowStyle = processStyleWithBorderStyle("lastRowStyle", {
+					bg: { rgb: value },
+					cl: { rgb: new ColorKit(value).isDark() ? "#fff" : "#000" }
+				});
+				setCustomTheme(table.getTableStyleId(), { lastRowStyle });
+			}
+		}
+	];
+	return /* @__PURE__ */ jsxs("div", {
+		dir: direction,
+		className: "univer-flex univer-flex-col univer-gap-5 univer-pb-4",
+		children: [/* @__PURE__ */ jsxs("section", {
+			className: "univer-flex univer-flex-col univer-gap-2",
+			children: [/* @__PURE__ */ 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__ */ 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__ */ jsx("button", {
+						type: "button",
+						title: item,
+						"aria-label": item,
+						"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),
-						onMouseEnter: () => setHoverCustomId(item),
-						onMouseLeave: () => setHoverCustomId(null),
-						children: [
-							/* @__PURE__ */ jsx("div", {
-								className: "univer-box-border univer-h-2.5",
-								style: {
-									background: headerRowBg ?? "none",
-									border: `${headerRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
-								}
-							}),
-							/* @__PURE__ */ jsx("div", {
-								className: "univer-box-border univer-h-2.5",
-								style: {
-									background: firstRowBg ?? "none",
-									border: `${firstRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
-								}
-							}),
-							/* @__PURE__ */ jsx("div", {
-								className: "univer-box-border univer-h-2.5",
-								style: {
-									background: secondRowBg ?? "none",
-									border: `${secondRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
-								}
-							}),
-							/* @__PURE__ */ jsx("div", {
-								className: "univer-box-border univer-h-2.5",
-								style: {
-									background: lastRowBg ?? "none",
-									border: `${lastRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
-								}
-							}),
-							/* @__PURE__ */ 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__ */ 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__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", { className: "univer-h-px univer-w-full univer-bg-gray-200" }), /* @__PURE__ */ jsxs("div", {
-				className: "univer-flex univer-flex-col univer-gap-2 univer-p-2",
-				children: [
-					/* @__PURE__ */ jsxs("div", {
-						className: "univer-flex univer-h-9 univer-gap-2",
-						children: [/* @__PURE__ */ jsx("div", {
-							className: clsx("univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center univer-leading-9", borderClassName, {
-								"univer-text-white": headerBgIsDark,
-								"univer-text-gray-900": !headerBgIsDark
-							}),
-							style: { background: headerBg },
-							children: localeService.t("sheets-table-ui.header")
-						}), /* @__PURE__ */ jsx(Dropdown, {
-							overlay: /* @__PURE__ */ jsx("div", {
-								className: "univer-p-2",
-								children: /* @__PURE__ */ jsx(ColorPicker, {
-									value: headerBg,
-									onChange: (val) => {
-										const headerRowStyle = processStyleWithBorderStyle("headerRowStyle", {
-											bg: { rgb: val },
-											cl: { rgb: new ColorKit(val).isDark() ? "#fff" : "#000" }
-										});
-										setCustomTheme(table.getTableStyleId(), { headerRowStyle });
-									}
-								})
-							}),
-							children: /* @__PURE__ */ jsxs("div", {
-								className: clsx("univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded-sm univer-bg-white univer-p-1", borderClassName),
-								children: [/* @__PURE__ */ jsx("div", {
-									className: clsx("univer-size-4 univer-rounded-lg univer-bg-gray-400", borderClassName, {
-										"univer-text-white": headerBgIsDark,
-										"univer-text-gray-900": !headerBgIsDark
-									}),
-									style: { background: headerBg }
-								}), /* @__PURE__ */ jsx(DownIcon, { className: "univer-size-2" })]
-							})
-						})]
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "univer-flex univer-h-9 univer-gap-2",
-						children: [/* @__PURE__ */ jsx("div", {
-							className: clsx("univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center univer-leading-9", borderClassName, {
-								"univer-text-white": firstRowBgIsDark,
-								"univer-text-gray-900": !firstRowBgIsDark
-							}),
-							style: { background: firstRowBg },
-							children: localeService.t("sheets-table-ui.firstLine")
-						}), /* @__PURE__ */ jsx(Dropdown, {
-							overlay: /* @__PURE__ */ jsx("div", {
-								className: "univer-p-2",
-								children: /* @__PURE__ */ jsx(ColorPicker, {
-									value: firstRowBg,
-									onChange: (val) => {
-										setCustomTheme(table.getTableStyleId(), { firstRowStyle: {
-											bg: { rgb: val },
-											cl: { rgb: new ColorKit(val).isDark() ? "#fff" : "#000" }
-										} });
+				})
+			})]
+		}), /* @__PURE__ */ jsxs("section", {
+			className: "univer-flex univer-flex-col univer-gap-2",
+			children: [
+				/* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(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__ */ jsxs("div", {
+							className: "univer-group univer-relative univer-h-12 univer-min-w-0",
+							children: [/* @__PURE__ */ jsx("button", {
+								type: "button",
+								title: item,
+								"aria-label": item,
+								"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),
+								children: rowBackgrounds.map((background, index) => /* @__PURE__ */ 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__ */ jsxs("div", {
-								className: clsx("univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded-sm univer-bg-white univer-p-1", borderClassName),
-								children: [/* @__PURE__ */ jsx("div", {
-									className: clsx("univer-size-4 univer-rounded-lg univer-bg-gray-400", borderClassName),
-									style: { background: firstRowBg }
-								}), /* @__PURE__ */ jsx(DownIcon, { className: "univer-size-2" })]
-							})
-						})]
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "univer-flex univer-h-9 univer-gap-2",
+								}, index))
+							}), /* @__PURE__ */ jsx("button", {
+								type: "button",
+								"data-u-comp": "sheet-table-theme-remove",
+								"aria-label": `${localeService.t("sheets-table-ui.customStyle")} ${item}`,
+								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
+								}),
+								onClick: (event) => {
+									event.stopPropagation();
+									removeCustomTheme(item);
+								},
+								children: /* @__PURE__ */ jsx(CloseIcon, { className: "univer-size-3" })
+							})]
+						}, item);
+					})]
+				}),
+				customSelected && /* @__PURE__ */ 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__ */ jsxs("div", {
+						className: "univer-flex univer-h-10 univer-min-w-0 univer-gap-2",
 						children: [/* @__PURE__ */ jsx("div", {
-							className: clsx("univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center univer-leading-9", borderClassName, {
-								"univer-text-white": secondRowBgIsDark,
-								"univer-text-gray-900": !secondRowBgIsDark
+							className: 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", borderClassName, {
+								"univer-text-gray-0": row.isDark,
+								"univer-text-gray-900": !row.isDark
 							}),
-							style: { background: secondRowBg },
-							children: localeService.t("sheets-table-ui.secondLine")
-						}), /* @__PURE__ */ jsx(Dropdown, {
-							overlay: /* @__PURE__ */ jsx("div", {
-								className: "univer-p-2",
-								children: /* @__PURE__ */ jsx(ColorPicker, {
-									value: secondRowBg,
-									onChange: (val) => setCustomTheme(table.getTableStyleId(), { secondRowStyle: {
-										bg: { rgb: val },
-										cl: { rgb: new ColorKit(val).isDark() ? "#fff" : "#000" }
-									} })
-								})
-							}),
-							children: /* @__PURE__ */ jsxs("div", {
-								className: clsx("univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded-sm univer-bg-white univer-p-1", borderClassName),
-								children: [/* @__PURE__ */ jsx("div", {
-									className: clsx("univer-size-4 univer-rounded-lg univer-bg-gray-400", borderClassName),
-									style: { background: secondRowBg }
-								}), /* @__PURE__ */ jsx(DownIcon, { className: "univer-size-2" })]
+							style: { background: row.background },
+							children: /* @__PURE__ */ jsx("span", {
+								className: "univer-truncate",
+								children: row.label
 							})
-						})]
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						className: "univer-flex univer-h-9 univer-gap-2",
-						children: [/* @__PURE__ */ jsx("div", {
-							className: clsx("univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center univer-leading-9", borderClassName, {
-								"univer-text-white": lastRowBgIsDark,
-								"univer-text-gray-900": !lastRowBgIsDark
-							}),
-							style: { background: lastRowBg },
-							children: localeService.t("sheets-table-ui.footer")
 						}), /* @__PURE__ */ jsx(Dropdown, {
 							overlay: /* @__PURE__ */ jsx("div", {
+								dir: direction,
 								className: "univer-p-2",
 								children: /* @__PURE__ */ jsx(ColorPicker, {
-									value: lastRowBg,
-									onChange: (val) => {
-										const lastRowStyle = processStyleWithBorderStyle("lastRowStyle", {
-											bg: { rgb: val },
-											cl: { rgb: new ColorKit(val).isDark() ? "#fff" : "#000" }
-										});
-										setCustomTheme(table.getTableStyleId(), { lastRowStyle });
-									}
+									value: new ColorKit(row.background).toHexString(),
+									onChange: row.onChange
 								})
 							}),
-							children: /* @__PURE__ */ jsxs("div", {
-								className: clsx("univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded-sm univer-bg-white univer-p-1", borderClassName),
-								children: [/* @__PURE__ */ jsx("div", {
-									className: clsx("univer-size-4 univer-rounded-lg univer-bg-gray-400", borderClassName),
-									style: { background: lastRowBg }
-								}), /* @__PURE__ */ jsx(DownIcon, { className: "univer-size-2" })]
+							children: /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								"aria-label": `${row.label} ${localeService.t("sheets-table-ui.setTheme")}`,
+								className: 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", borderClassName),
+								children: [/* @__PURE__ */ jsx("span", {
+									className: clsx("univer-size-4 univer-rounded-full", borderClassName),
+									style: { background: row.background }
+								}), /* @__PURE__ */ jsx(DownIcon, { className: "univer-size-3" })]
 							})
 						})]
-					})
-				]
-			})] })]
-		})
-	] });
+					}, row.key))
+				})
+			]
+		})]
+	});
 };
 
 //#endregion
@@ -1906,7 +1910,11 @@ let ComponentsController = class ComponentsController extends Disposable {
 		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]) => {
@@ -1921,14 +1929,6 @@ ComponentsController = __decorate([__decorateParam(0, Inject(ComponentManager)),
 
 //#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;
 }
@@ -1936,17 +1936,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 [{
@@ -1972,9 +1961,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 Shape {
@@ -1990,21 +1976,11 @@ var SheetTableControlsShape = class extends 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;
@@ -2013,6 +1989,9 @@ var SheetTableControlsShape = class extends 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;
@@ -2092,7 +2071,6 @@ var SheetTableControlsShape = class extends 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;
@@ -2153,34 +2131,6 @@ var SheetTableControlsShape = class extends Shape {
 		ctx.fill();
 		ctx.restore();
 	}
-	_drawMenu(ctx, tableId, left, top) {
-		const regions = buildTableMenuRegions(tableId, left, top);
-		ctx.save();
-		ctx.translateWithPrecision(left, top);
-		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 ${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;
@@ -2204,7 +2154,7 @@ var SheetTableControlsShape = class extends 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);
 	}
 };
 
@@ -2225,7 +2175,7 @@ function isSameTopGap(left, right) {
 	return left.size === right.size && left.color === right.color && left.stripeColor === right.stripeColor;
 }
 let SheetTableControlsRenderController = class SheetTableControlsRenderController extends 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;
@@ -2241,8 +2191,10 @@ 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();
@@ -2252,6 +2204,7 @@ let SheetTableControlsRenderController = class SheetTableControlsRenderControlle
 		var _this$_context$compon;
 		this._context.scene.addObjects([this._shape], TABLE_CONTROLS_LAYER_INDEX);
 		this.disposeWithMe(toDisposable(() => {
+			this._closeFloatingControls();
 			this._context.scene.removeObjects([this._shape]);
 		}));
 		this.disposeWithMe(this._shape.onPointerMove$.subscribeEvent((evt, state) => {
@@ -2298,12 +2251,6 @@ 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) => {
@@ -2367,7 +2314,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") {
@@ -2390,28 +2337,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(DeleteSheetTableCommand.id, {
-					tableId: hit.tableId,
+					tableId,
 					subUnitId,
 					unitId
 				});
 				break;
 		}
-		this._closeFloatingControls();
 	}
 	_openRenameDialog(unitId, tableId) {
 		this._dialogService.open({
@@ -2448,13 +2432,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
 		});
 	}
@@ -2534,6 +2520,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);
@@ -2560,7 +2549,8 @@ SheetTableControlsRenderController = __decorate([
 	__decorateParam(10, Inject(SheetTableThemeUIController)),
 	__decorateParam(11, Inject(LocaleService)),
 	__decorateParam(12, IDialogService),
-	__decorateParam(13, ISidebarService)
+	__decorateParam(13, ISidebarService),
+	__decorateParam(14, Inject(SheetCanvasPopManagerService))
 ], SheetTableControlsRenderController);
 
 //#endregion