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

package/lib/es/index.js

@@ -1,5 +1,5 @@
 import { AddSheetTableCommand, AddTableThemeCommand, DeleteSheetTableCommand, RemoveTableThemeCommand, SHEET_TABLE_CUSTOM_THEME_PREFIX, SetSheetTableCommand, SetSheetTableFilterCommand, SheetTableInsertColCommand, SheetTableInsertColumnAtCommand, SheetTableInsertRowAtCommand, SheetTableInsertRowCommand, SheetTableRemoveColCommand, SheetTableRemoveColumnAtCommand, SheetTableRemoveRowCommand, SheetTableService, SheetsTableController, SheetsTableSortStateEnum, TABLE_FILTER_EMPTY_VALUE, TableColumnFilterTypeEnum, TableConditionTypeEnum, TableDateCompareTypeEnum, TableManager, TableNumberCompareTypeEnum, TableStringCompareTypeEnum, UniverSheetsTablePlugin, customEmptyThemeWithBorderStyle, getExistingNamesSet, isConditionFilter, isManualTableFilter, processStyleWithBorderStyle, validateSheetTableName } from "@univerjs/sheets-table";
-import { ComponentManager, ContextMenuGroup, ContextMenuPosition, IDialogService, IMenuManagerService, ISidebarService, IconManager, MenuItemType, RibbonDataGroup, UniverUIPlugin, getMenuHiddenObservable, useDependency, useObservable } from "@univerjs/ui";
+import { ComponentManager, ContextMenuGroup, ContextMenuPosition, IDialogService, IMenuManagerService, ISidebarService, IconManager, MenuItemType, RibbonDataGroup, getMenuHiddenObservable, useDependency, useObservable } from "@univerjs/ui";
 import { ColorKit, CommandType, DependentOn, Disposable, ErrorService, ICommandService, IConfigService, IContextService, IPermissionService, IUniverInstanceService, Inject, Injector, InterceptorEffectEnum, LocaleService, ObjectMatrix, Plugin, Rectangle, RxDisposable, UniverInstanceType, VerticalAlign, cellToRange, fromCallback, merge, registerDependencies, toDisposable, touchDependencies } from "@univerjs/core";
 import { INTERCEPTOR_POINT, RangeThemeStyle, SelectRangeCommand, SetRangeThemeMutation, SetRangeValuesMutation, SetSelectionsOperation, SetVerticalTextAlignCommand, SheetInterceptorService, SheetRangeThemeModel, SheetsSelectionsService, UniverSheetsPlugin, WorkbookEditablePermission, WorkbookPermissionService, expandToContinuousRange, getPrimaryForRange, getSheetCommandTarget, isSingleCellSelection } from "@univerjs/sheets";
 import { ExpandSelectionCommand, ISheetSelectionRenderService, MoveSelectionCommand, MoveSelectionEnterAndTabCommand, SHEET_VIEW_KEY, SelectAllCommand, SetScrollOperation, SetZoomRatioOperation, SheetCanvasPopManagerService, SheetSkeletonManagerService, UniverSheetsUIPlugin, getCoordByCell, getCurrentRangeDisable$, getTransformCoord } from "@univerjs/sheets-ui";
@@ -49,14 +49,13 @@ const OpenTableSelectorOperation = {
 	type: CommandType.OPERATION,
 	id: "sheet.operation.open-table-selector",
 	async handler(accessor) {
-		var _lastSelection$range;
 		const univerInstanceService = accessor.get(IUniverInstanceService);
 		const commandService = accessor.get(ICommandService);
 		const target = getSheetCommandTarget(univerInstanceService);
 		if (!target) return false;
 		const { unitId, subUnitId, worksheet } = target;
 		const lastSelection = accessor.get(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,
@@ -248,7 +247,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.0";
 
 //#endregion
 //#region \0@oxc-project+runtime@0.140.0/helpers/esm/typeof.js
@@ -899,7 +898,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 = useDependency(LocaleService);
 	const [conditionVisible, setConditionVisible] = useState(false);
@@ -907,13 +906,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);
@@ -924,7 +922,7 @@ const SheetTableConditionPanel = (props) => {
 		else info.dateRange = [/* @__PURE__ */ new Date(), /* @__PURE__ */ new Date()];
 		else if (type === TableConditionTypeEnum.Number) info.number = 0;
 		else if (type === TableConditionTypeEnum.String) info.string = "";
-		handleConditionInfo(info, value[0], (_ref = value[1]) !== null && _ref !== void 0 ? _ref : TableStringCompareTypeEnum.Equal);
+		handleConditionInfo(info, value[0], value[1] ?? TableStringCompareTypeEnum.Equal);
 	};
 	const subComponentType = getSubComponentType(conditionInfo.type, conditionInfo.compare);
 	let selectType = "";
@@ -966,7 +964,7 @@ const SheetTableConditionPanel = (props) => {
 				id: "univer-table-date-picker-wrapper",
 				children: /* @__PURE__ */ jsx(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 })
 				})
 			}),
@@ -974,7 +972,7 @@ const SheetTableConditionPanel = (props) => {
 				id: "univer-table-date-range-wrapper",
 				children: /* @__PURE__ */ jsx(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({});
@@ -1011,7 +1009,7 @@ const SheetTableConditionPanel = (props) => {
 			}),
 			!!(subComponentType === "Select") && /* @__PURE__ */ jsx(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 })
 			})
@@ -1024,8 +1022,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;
 };
@@ -1380,7 +1377,6 @@ function SheetTableFilterPanel() {
 //#endregion
 //#region src/views/components/SheetTableRenameDialog.tsx
 function SheetTableRenameDialog(props) {
-	var _table$getDisplayName;
 	const { unitId, tableId, onClose } = props;
 	const localeService = useDependency(LocaleService);
 	const commandService = useDependency(ICommandService);
@@ -1388,7 +1384,7 @@ function SheetTableRenameDialog(props) {
 	const univerInstanceService = useDependency(IUniverInstanceService);
 	const definedNamesService = useDependency(IDefinedNamesService);
 	const table = tableManager.getTableById(unitId, tableId);
-	const [value, setValue] = useState((_table$getDisplayName = table === null || table === void 0 ? void 0 : table.getDisplayName()) !== null && _table$getDisplayName !== void 0 ? _table$getDisplayName : "");
+	const [value, setValue] = useState((table === null || table === void 0 ? void 0 : table.getDisplayName()) ?? "");
 	const [error, setError] = useState("");
 	const existingNames = useMemo(() => {
 		const names = getExistingNamesSet(unitId, {
@@ -1576,7 +1572,7 @@ SheetTableThemeUIController = __decorate([__decorateParam(0, Inject(ICommandServ
 //#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 = useDependency(ICommandService);
 	const localeService = useDependency(LocaleService);
@@ -1601,10 +1597,10 @@ 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 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 [hoverCustomId, setHoverCustomId] = useState(null);
 	const handleThemeChange = (theme) => {
 		commandService.executeCommand(SetSheetTableCommand.id, {
@@ -1711,28 +1707,28 @@ const SheetTableThemePanel = (props) => {
 							/* @__PURE__ */ jsx("div", {
 								className: "univer-box-border univer-h-2.5",
 								style: {
-									background: headerRowBg !== null && headerRowBg !== void 0 ? headerRowBg : TABLE_BORDER_NONE,
+									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 !== null && firstRowBg !== void 0 ? firstRowBg : TABLE_BORDER_NONE,
+									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 !== null && secondRowBg !== void 0 ? secondRowBg : TABLE_BORDER_NONE,
+									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 !== null && lastRowBg !== void 0 ? lastRowBg : TABLE_BORDER_NONE,
+									background: lastRowBg ?? "none",
 									border: `${lastRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
 								}
 							}),
@@ -2055,12 +2051,11 @@ var SheetTableControlsShape = class extends 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();
@@ -2254,7 +2249,7 @@ let SheetTableControlsRenderController = class SheetTableControlsRenderControlle
 		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(toDisposable(() => {
 			this._context.scene.removeObjects([this._shape]);
@@ -2268,11 +2263,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(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(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 : toDisposable(() => {}));
+		})) ?? toDisposable(() => {}));
 	}
 	_initRefresh() {
 		const commandExecuted$ = fromCallback(this._commandService.onCommandExecuted.bind(this._commandService)).pipe(filter(([command]) => {
@@ -2312,14 +2307,14 @@ let SheetTableControlsRenderController = class SheetTableControlsRenderControlle
 		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);
@@ -2336,7 +2331,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) {
@@ -2354,10 +2349,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;
@@ -2514,12 +2508,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)) {
@@ -2740,12 +2733,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}`;
@@ -3016,7 +3009,7 @@ _defineProperty(UniverSheetsTableUIPlugin, "packageName", name);
 _defineProperty(UniverSheetsTableUIPlugin, "version", version);
 _defineProperty(UniverSheetsTableUIPlugin, "type", UniverInstanceType.UNIVER_SHEET);
 UniverSheetsTableUIPlugin = __decorate([
-	DependentOn(UniverRenderEnginePlugin, UniverSheetsPlugin, UniverUIPlugin, UniverSheetsTablePlugin, UniverSheetsUIPlugin),
+	DependentOn(UniverRenderEnginePlugin, UniverSheetsPlugin, UniverSheetsTablePlugin, UniverSheetsUIPlugin),
 	__decorateParam(1, Inject(Injector)),
 	__decorateParam(2, Inject(ICommandService)),
 	__decorateParam(3, IConfigService),

package/lib/es/locale/ca-ES.js

@@ -25,9 +25,9 @@ const locale = { "sheets-table-ui": {
 	tablePrefix: "Taula",
 	tableNameError: "El nom de la taula no pot contenir espais, no pot començar amb un número i no pot ser idèntic a un nom de taula existent",
 	columnMenu: {
-		"insert-left": "Insert 1 table column left",
-		"insert-right": "Insert 1 table column right",
-		delete: "Delete table column"
+		"insert-left": "Insereix una columna de taula a l’esquerra",
+		"insert-right": "Insereix una columna de taula a la dreta",
+		delete: "Suprimeix la columna de la taula"
 	},
 	sort: {
 		"sort-asc": "Ascendent",

package/lib/es/locale/zh-HK.js

@@ -2,28 +2,28 @@
 const locale = { "sheets-table-ui": {
 	title: "表格",
 	selectRange: "選擇表格範圍",
-	rename: "重命名表格",
+	rename: "重新命名表格",
 	renamePlaceholder: "輸入表格名稱",
 	updateRange: "更新表格範圍",
 	tableRangeWithMergeError: "表格範圍不能與合併儲存格重疊",
 	tableRangeWithOtherTableError: "表格範圍不能與其他表格重疊",
-	tableRangeSingleRowError: "表格範圍不能是單獨的一行",
-	updateError: "不能將表格範圍設置到和原先不重合且不在同一行的範圍",
+	tableRangeSingleRowError: "表格範圍不能只有一列",
+	updateError: "不能將表格範圍設定為與原範圍不重疊且不在同一列的範圍",
 	tableStyle: "表格樣式",
 	defaultStyle: "預設樣式",
-	customStyle: "自定義樣式",
-	customTooMore: "自定義主題數量超出最大限制，請刪除一些無用的主題後再次添加",
-	setTheme: "設置表格主題",
+	customStyle: "自訂樣式",
+	customTooMore: "自訂主題數量超出上限，請刪除一些不需要的主題後再新增",
+	setTheme: "設定表格主題",
 	removeTable: "刪除表格",
 	cancel: "取消",
 	confirm: "確認",
 	header: "頁首",
 	footer: "頁尾",
-	firstLine: "第一行",
-	secondLine: "第二行",
-	columnPrefix: "列",
+	firstLine: "第一列",
+	secondLine: "第二列",
+	columnPrefix: "欄",
 	tablePrefix: "表格",
-	tableNameError: "表格名稱不能包含空格， 不能以數字開頭，不能和已有表格名稱重複",
+	tableNameError: "表格名稱不能包含空格、以數字開頭或與現有表格名稱重複",
 	columnMenu: {
 		"insert-left": "向左插入 1 個表格欄",
 		"insert-right": "向右插入 1 個表格欄",
@@ -35,13 +35,13 @@ const locale = { "sheets-table-ui": {
 	},
 	insert: {
 		main: "表格插入",
-		row: "插入表格行",
-		col: "插入表格列"
+		row: "插入表格列",
+		col: "插入表格欄"
 	},
 	remove: {
 		main: "表格刪除",
-		row: "刪除表格行",
-		col: "刪除表格列"
+		row: "刪除表格列",
+		col: "刪除表格欄"
 	},
 	condition: {
 		string: "文字",

package/lib/es/locale/zh-TW.js

@@ -2,28 +2,28 @@
 const locale = { "sheets-table-ui": {
 	title: "表格",
 	selectRange: "選擇表格範圍",
-	rename: "重命名表格",
+	rename: "重新命名表格",
 	renamePlaceholder: "輸入表格名稱",
 	updateRange: "更新表格範圍",
 	tableRangeWithMergeError: "表格範圍不能與合併儲存格重疊",
 	tableRangeWithOtherTableError: "表格範圍不能與其他表格重疊",
-	tableRangeSingleRowError: "表格範圍不能是單獨的一行",
-	updateError: "不能將表格範圍設置到和原先不重合且不在同一行的範圍",
+	tableRangeSingleRowError: "表格範圍不能只有一列",
+	updateError: "不能將表格範圍設定為與原範圍不重疊且不在同一列的範圍",
 	tableStyle: "表格樣式",
 	defaultStyle: "預設樣式",
-	customStyle: "自定義樣式",
-	customTooMore: "自定義主題數量超出最大限制，請刪除一些無用的主題後再次添加",
-	setTheme: "設置表格主題",
+	customStyle: "自訂樣式",
+	customTooMore: "自訂主題數量超出上限，請刪除一些不需要的主題後再新增",
+	setTheme: "設定表格主題",
 	removeTable: "刪除表格",
 	cancel: "取消",
 	confirm: "確認",
 	header: "頁首",
 	footer: "頁尾",
-	firstLine: "第一行",
-	secondLine: "第二行",
-	columnPrefix: "列",
+	firstLine: "第一列",
+	secondLine: "第二列",
+	columnPrefix: "欄",
 	tablePrefix: "表格",
-	tableNameError: "表格名稱不能包含空格， 不能以數字開頭，不能和已有表格名稱重複",
+	tableNameError: "表格名稱不能包含空格、以數字開頭或與現有表格名稱重複",
 	columnMenu: {
 		"insert-left": "向左插入 1 個表格欄",
 		"insert-right": "向右插入 1 個表格欄",
@@ -35,13 +35,13 @@ const locale = { "sheets-table-ui": {
 	},
 	insert: {
 		main: "表格插入",
-		row: "插入表格行",
-		col: "插入表格列"
+		row: "插入表格列",
+		col: "插入表格欄"
 	},
 	remove: {
 		main: "表格刪除",
-		row: "刪除表格行",
-		col: "刪除表格列"
+		row: "刪除表格列",
+		col: "刪除表格欄"
 	},
 	condition: {
 		string: "文字",