@univerjs/drawing-ui 1.0.4 → 1.2.0

package/lib/cjs/index.js

@@ -651,7 +651,7 @@ const menuSchema = { [_univerjs_ui.ContextMenuPosition.DRAWING]: { [_univerjs_ui
 //#endregion
 //#region package.json
 var name = "@univerjs/drawing-ui";
-var version = "1.0.4";
+var version = "1.2.0";
 
 //#endregion
 //#region src/config/config.ts
@@ -660,7 +660,7 @@ const configSymbol = Symbol(DRAWING_UI_PLUGIN_CONFIG_KEY);
 const defaultPluginConfig = {};
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -671,7 +671,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -684,14 +684,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -744,7 +744,7 @@ var DrawingImageClipService = class extends _univerjs_core.Disposable {
 };
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorateParam.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -752,7 +752,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -1340,6 +1340,14 @@ let DrawingUpdateController = class DrawingUpdateController extends _univerjs_co
 				if (disposeDrawingRenderObject(scene, param)) {
 					var _scene$getTransformer2;
 					(_scene$getTransformer2 = scene.getTransformer()) === null || _scene$getTransformer2 === void 0 || _scene$getTransformer2.clearSelectedObjects();
+				} else {
+					const transformer = scene.getTransformer();
+					const key = (0, _univerjs_drawing.getDrawingShapeKeyByDrawingSearch)(param);
+					const selectedKeys = [...(transformer === null || transformer === void 0 ? void 0 : transformer.getSelectedObjectMap().keys()) ?? []].filter((selectedKey) => selectedKey === key || selectedKey.startsWith(`${key}#-#`));
+					if (selectedKeys.length > 0) {
+						if (selectedKeys.length === (transformer === null || transformer === void 0 ? void 0 : transformer.getSelectedObjectMap().size)) transformer.clearSelectedObjects();
+						else transformer === null || transformer === void 0 || transformer.clearControlByIds(selectedKeys);
+					}
 				}
 			});
 		}));
@@ -1386,7 +1394,6 @@ let DrawingUpdateController = class DrawingUpdateController extends _univerjs_co
 	_drawingRefreshListener() {
 		this.disposeWithMe(this._drawingManagerService.refreshTransform$.subscribe((params) => {
 			params.forEach((param) => {
-				var _setClipBounds2;
 				const { unitId, subUnitId, drawingId } = param;
 				const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
 				if (renderObject == null) return;
@@ -1395,38 +1402,44 @@ let DrawingUpdateController = class DrawingUpdateController extends _univerjs_co
 				const { transform } = drawingParam;
 				const { scene } = renderObject;
 				if (transform == null) return true;
-				const drawingShapeKey = (0, _univerjs_drawing.getDrawingShapeKeyByDrawingSearch)({
-					unitId,
-					subUnitId,
-					drawingId
-				});
-				const drawingShape = scene.getObjectIncludeInGroup(drawingShapeKey);
 				const drawingParamWithRefreshMetadata = mergeRefreshMetadata(drawingParam, param);
-				if (drawingShape == null) {
-					if (drawingParamWithRefreshMetadata.hidden === true) return true;
-					this._drawingManagerService.addNotification([{
+				const isMultiTransform = drawingParam.isMultiTransform === _univerjs_core.BooleanNumber.TRUE;
+				const transforms = isMultiTransform ? drawingParam.transforms ?? [] : [transform];
+				let hasMissingShape = false;
+				transforms.forEach((instanceTransform, index) => {
+					var _setClipBounds2;
+					const drawingShapeKey = (0, _univerjs_drawing.getDrawingShapeKeyByDrawingSearch)({
 						unitId,
 						subUnitId,
 						drawingId
-					}]);
-					return true;
-				}
-				const { left = 0, top = 0, width = 0, height = 0, angle = 0, flipX = false, flipY = false, skewX = 0, skewY = 0 } = transform;
-				drawingShape.transformByState({
-					left,
-					top,
-					width,
-					height,
-					angle,
-					flipX,
-					flipY,
-					skewX,
-					skewY
+					}, isMultiTransform ? index : void 0);
+					const drawingShape = scene.getObjectIncludeInGroup(drawingShapeKey);
+					if (drawingShape == null) {
+						hasMissingShape = true;
+						return;
+					}
+					const { left = 0, top = 0, width = 0, height = 0, angle = 0, flipX = false, flipY = false, skewX = 0, skewY = 0 } = instanceTransform;
+					drawingShape.transformByState({
+						left,
+						top,
+						width,
+						height,
+						angle,
+						flipX,
+						flipY,
+						skewX,
+						skewY
+					});
+					(_setClipBounds2 = drawingShape.setClipBounds) === null || _setClipBounds2 === void 0 || _setClipBounds2.call(drawingShape, instanceTransform.clipBounds);
+					syncDrawingHiddenState(drawingShape, drawingParamWithRefreshMetadata);
+					syncDrawingSelectableState(drawingShape, drawingParamWithRefreshMetadata, scene, this._drawingManagerService);
+					ensureDrawingRenderLayer(scene, drawingShape, drawingParamWithRefreshMetadata);
 				});
-				(_setClipBounds2 = drawingShape.setClipBounds) === null || _setClipBounds2 === void 0 || _setClipBounds2.call(drawingShape, transform.clipBounds);
-				syncDrawingHiddenState(drawingShape, drawingParamWithRefreshMetadata);
-				syncDrawingSelectableState(drawingShape, drawingParamWithRefreshMetadata, scene, this._drawingManagerService);
-				ensureDrawingRenderLayer(scene, drawingShape, drawingParamWithRefreshMetadata);
+				if (hasMissingShape && drawingParamWithRefreshMetadata.hidden !== true) this._drawingManagerService.addNotification([{
+					unitId,
+					subUnitId,
+					drawingId
+				}]);
 			});
 		}));
 	}
@@ -5053,7 +5066,7 @@ function ObjectListPanelBase(props) {
 						["locked", labels.filterLocked]
 					].map(([mode, label]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
-						className: (0, _univerjs_design.clsx)("univer-min-w-0 univer-flex-1 univer-rounded-md univer-border univer-border-solid univer-px-2 univer-text-xs univer-outline-none univer-transition-colors dark:!univer-border-gray-700", "univer-h-7", filterMode === mode ? "dark:!univer-bg-primary-900/30 univer-border-primary-500 univer-bg-primary-50 univer-text-primary-600 dark:!univer-text-primary-200" : (0, _univerjs_design.clsx)("univer-border-gray-200 univer-bg-gray-0 univer-text-gray-600 dark:!univer-bg-gray-900 dark:!univer-text-gray-300", "hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-800")),
+						className: (0, _univerjs_design.clsx)("univer-min-w-0 univer-flex-1 univer-rounded-md univer-border univer-border-solid univer-px-2 univer-text-xs univer-outline-none univer-transition-colors dark:!univer-border-gray-700", "univer-h-7", filterMode === mode ? "univer-border-primary-500 univer-bg-primary-50 univer-text-primary-600 dark:!univer-bg-primary-900 dark:!univer-text-primary-200" : (0, _univerjs_design.clsx)("univer-border-gray-200 univer-bg-gray-0 univer-text-gray-600 dark:!univer-bg-gray-900 dark:!univer-text-gray-300", "hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-800")),
 						"aria-pressed": filterMode === mode,
 						onClick: () => setFilterMode(mode),
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -5268,8 +5281,8 @@ function ObjectDetailsEditor(props) {
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					className: "univer-text-xs univer-text-gray-500 dark:!univer-text-gray-400",
 					children: labels.description
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
-					className: (0, _univerjs_design.clsx)(descriptionClassName, "univer-box-border univer-min-h-16 univer-w-full univer-resize-none univer-rounded-md univer-border univer-border-solid univer-border-gray-200 univer-bg-gray-0 univer-p-2 univer-text-sm univer-text-gray-900 univer-outline-none focus:univer-border-primary-500 focus:univer-ring-1 focus:univer-ring-primary-100 disabled:univer-cursor-not-allowed disabled:univer-opacity-70 dark:!univer-border-gray-700 dark:!univer-bg-gray-900 dark:!univer-text-gray-100 dark:focus:!univer-ring-primary-900"),
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Textarea, {
+					className: (0, _univerjs_design.clsx)("univer-min-h-16 univer-resize-none univer-text-sm", descriptionClassName),
 					value: draftDescription,
 					disabled,
 					placeholder: labels.descriptionPlaceholder,
@@ -5405,7 +5418,7 @@ function MobileObjectListPanel(props) {
 						["locked", labels.filterLocked]
 					].map(([mode, label]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
-						className: (0, _univerjs_design.clsx)("univer-min-w-0 univer-flex-1 univer-rounded-md univer-border univer-border-solid univer-px-2 univer-text-xs univer-outline-none univer-transition-colors dark:!univer-border-gray-700", "univer-h-11 univer-text-sm", filterMode === mode ? "dark:!univer-bg-primary-900/30 univer-border-primary-500 univer-bg-primary-50 univer-text-primary-600 dark:!univer-text-primary-200" : (0, _univerjs_design.clsx)("univer-border-gray-200 univer-bg-gray-0 univer-text-gray-600 dark:!univer-bg-gray-900 dark:!univer-text-gray-300")),
+						className: (0, _univerjs_design.clsx)("univer-min-w-0 univer-flex-1 univer-rounded-md univer-border univer-border-solid univer-px-2 univer-text-xs univer-outline-none univer-transition-colors dark:!univer-border-gray-700", "univer-h-11 univer-text-sm", filterMode === mode ? "univer-border-primary-500 univer-bg-primary-50 univer-text-primary-600 dark:!univer-bg-primary-900 dark:!univer-text-primary-200" : (0, _univerjs_design.clsx)("univer-border-gray-200 univer-bg-gray-0 univer-text-gray-600 dark:!univer-bg-gray-900 dark:!univer-text-gray-300")),
 						"aria-pressed": filterMode === mode,
 						onClick: () => setFilterMode(mode),
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -5630,7 +5643,7 @@ exports.CloseImageCropOperation = CloseImageCropOperation;
 exports.DRAWING_GROUP_TYPES = DRAWING_GROUP_TYPES;
 exports.DrawingCommonPanel = DrawingCommonPanel;
 exports.DrawingImageClipService = DrawingImageClipService;
-Object.defineProperty(exports, 'DrawingRenderService', {
+Object.defineProperty(exports, "DrawingRenderService", {
   enumerable: true,
   get: function () {
     return DrawingRenderService;
@@ -5648,13 +5661,13 @@ exports.OpenImageCropOperation = OpenImageCropOperation;
 exports.SetDrawingAlignOperation = SetDrawingAlignOperation;
 exports.SetDrawingArrangeOperation = SetDrawingArrangeOperation;
 exports.SetDrawingGroupOperation = SetDrawingGroupOperation;
-Object.defineProperty(exports, 'UniverDrawingMobileUIPlugin', {
+Object.defineProperty(exports, "UniverDrawingMobileUIPlugin", {
   enumerable: true,
   get: function () {
     return UniverDrawingMobileUIPlugin;
   }
 });
-Object.defineProperty(exports, 'UniverDrawingUIPlugin', {
+Object.defineProperty(exports, "UniverDrawingUIPlugin", {
   enumerable: true,
   get: function () {
     return UniverDrawingUIPlugin;

package/lib/es/index.js

@@ -4,7 +4,7 @@ import { CURSOR_TYPE, Canvas, DRAWING_OBJECT_LAYER_INDEX, DrawingGroupObject, Gr
 import { BuiltInUIPart, ComponentManager, ContextMenuGroup, ContextMenuPosition, IDialogService, IGalleryService, ILayoutService, IMenuManagerService, IMessageService, IShortcutService, IUIPartsService, IconManager, KeyCode, MenuItemType, MobileMenu, connectInjector, useDependency, useObservable } from "@univerjs/ui";
 import { BehaviorSubject, Observable, bufferTime, combineLatest, filter, map, merge as merge$1, of, startWith, switchMap } from "rxjs";
 import { ArrowDownIcon, ArrowUpIcon, AutofillDoubleIcon, BottomIcon, ChartIcon, CheckMarkIcon, CloseIcon, CreateCopyIcon, CropIcon, DeleteIcon, DocSettingIcon, ExpandIcon, EyeIcon, EyelashIcon, GroupIcon, LocateFixedIcon, LockIcon, MoreDownIcon, MoveDownIcon, MoveUpIcon, TextWrapShapeIcon, TopmostIcon, UngroupIcon, UnlockIcon } from "@univerjs/icons";
-import { Button, Checkbox, Dropdown, DropdownMenu, Input, InputNumber, MessageType, MobileActionRow, MobileSelect, Select, Separator, StateIconButton, Tooltip, borderClassName, clsx, render, unmount } from "@univerjs/design";
+import { Button, Checkbox, Dropdown, DropdownMenu, Input, InputNumber, MessageType, MobileActionRow, MobileSelect, Select, Separator, StateIconButton, Textarea, Tooltip, borderClassName, clsx, render, unmount } from "@univerjs/design";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createElement, useEffect, useMemo, useRef, useState } from "react";
 
@@ -650,7 +650,7 @@ const menuSchema = { [ContextMenuPosition.DRAWING]: { [ContextMenuGroup.OTHERS]:
 //#endregion
 //#region package.json
 var name = "@univerjs/drawing-ui";
-var version = "1.0.4";
+var version = "1.2.0";
 
 //#endregion
 //#region src/config/config.ts
@@ -659,7 +659,7 @@ const configSymbol = Symbol(DRAWING_UI_PLUGIN_CONFIG_KEY);
 const defaultPluginConfig = {};
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -670,7 +670,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -683,14 +683,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -743,7 +743,7 @@ var DrawingImageClipService = class extends Disposable {
 };
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorateParam.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -751,7 +751,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -1339,6 +1339,14 @@ let DrawingUpdateController = class DrawingUpdateController extends Disposable {
 				if (disposeDrawingRenderObject(scene, param)) {
 					var _scene$getTransformer2;
 					(_scene$getTransformer2 = scene.getTransformer()) === null || _scene$getTransformer2 === void 0 || _scene$getTransformer2.clearSelectedObjects();
+				} else {
+					const transformer = scene.getTransformer();
+					const key = getDrawingShapeKeyByDrawingSearch(param);
+					const selectedKeys = [...(transformer === null || transformer === void 0 ? void 0 : transformer.getSelectedObjectMap().keys()) ?? []].filter((selectedKey) => selectedKey === key || selectedKey.startsWith(`${key}#-#`));
+					if (selectedKeys.length > 0) {
+						if (selectedKeys.length === (transformer === null || transformer === void 0 ? void 0 : transformer.getSelectedObjectMap().size)) transformer.clearSelectedObjects();
+						else transformer === null || transformer === void 0 || transformer.clearControlByIds(selectedKeys);
+					}
 				}
 			});
 		}));
@@ -1385,7 +1393,6 @@ let DrawingUpdateController = class DrawingUpdateController extends Disposable {
 	_drawingRefreshListener() {
 		this.disposeWithMe(this._drawingManagerService.refreshTransform$.subscribe((params) => {
 			params.forEach((param) => {
-				var _setClipBounds2;
 				const { unitId, subUnitId, drawingId } = param;
 				const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
 				if (renderObject == null) return;
@@ -1394,38 +1401,44 @@ let DrawingUpdateController = class DrawingUpdateController extends Disposable {
 				const { transform } = drawingParam;
 				const { scene } = renderObject;
 				if (transform == null) return true;
-				const drawingShapeKey = getDrawingShapeKeyByDrawingSearch({
-					unitId,
-					subUnitId,
-					drawingId
-				});
-				const drawingShape = scene.getObjectIncludeInGroup(drawingShapeKey);
 				const drawingParamWithRefreshMetadata = mergeRefreshMetadata(drawingParam, param);
-				if (drawingShape == null) {
-					if (drawingParamWithRefreshMetadata.hidden === true) return true;
-					this._drawingManagerService.addNotification([{
+				const isMultiTransform = drawingParam.isMultiTransform === BooleanNumber.TRUE;
+				const transforms = isMultiTransform ? drawingParam.transforms ?? [] : [transform];
+				let hasMissingShape = false;
+				transforms.forEach((instanceTransform, index) => {
+					var _setClipBounds2;
+					const drawingShapeKey = getDrawingShapeKeyByDrawingSearch({
 						unitId,
 						subUnitId,
 						drawingId
-					}]);
-					return true;
-				}
-				const { left = 0, top = 0, width = 0, height = 0, angle = 0, flipX = false, flipY = false, skewX = 0, skewY = 0 } = transform;
-				drawingShape.transformByState({
-					left,
-					top,
-					width,
-					height,
-					angle,
-					flipX,
-					flipY,
-					skewX,
-					skewY
+					}, isMultiTransform ? index : void 0);
+					const drawingShape = scene.getObjectIncludeInGroup(drawingShapeKey);
+					if (drawingShape == null) {
+						hasMissingShape = true;
+						return;
+					}
+					const { left = 0, top = 0, width = 0, height = 0, angle = 0, flipX = false, flipY = false, skewX = 0, skewY = 0 } = instanceTransform;
+					drawingShape.transformByState({
+						left,
+						top,
+						width,
+						height,
+						angle,
+						flipX,
+						flipY,
+						skewX,
+						skewY
+					});
+					(_setClipBounds2 = drawingShape.setClipBounds) === null || _setClipBounds2 === void 0 || _setClipBounds2.call(drawingShape, instanceTransform.clipBounds);
+					syncDrawingHiddenState(drawingShape, drawingParamWithRefreshMetadata);
+					syncDrawingSelectableState(drawingShape, drawingParamWithRefreshMetadata, scene, this._drawingManagerService);
+					ensureDrawingRenderLayer(scene, drawingShape, drawingParamWithRefreshMetadata);
 				});
-				(_setClipBounds2 = drawingShape.setClipBounds) === null || _setClipBounds2 === void 0 || _setClipBounds2.call(drawingShape, transform.clipBounds);
-				syncDrawingHiddenState(drawingShape, drawingParamWithRefreshMetadata);
-				syncDrawingSelectableState(drawingShape, drawingParamWithRefreshMetadata, scene, this._drawingManagerService);
-				ensureDrawingRenderLayer(scene, drawingShape, drawingParamWithRefreshMetadata);
+				if (hasMissingShape && drawingParamWithRefreshMetadata.hidden !== true) this._drawingManagerService.addNotification([{
+					unitId,
+					subUnitId,
+					drawingId
+				}]);
 			});
 		}));
 	}
@@ -5052,7 +5065,7 @@ function ObjectListPanelBase(props) {
 						["locked", labels.filterLocked]
 					].map(([mode, label]) => /* @__PURE__ */ jsx("button", {
 						type: "button",
-						className: clsx("univer-min-w-0 univer-flex-1 univer-rounded-md univer-border univer-border-solid univer-px-2 univer-text-xs univer-outline-none univer-transition-colors dark:!univer-border-gray-700", "univer-h-7", filterMode === mode ? "dark:!univer-bg-primary-900/30 univer-border-primary-500 univer-bg-primary-50 univer-text-primary-600 dark:!univer-text-primary-200" : clsx("univer-border-gray-200 univer-bg-gray-0 univer-text-gray-600 dark:!univer-bg-gray-900 dark:!univer-text-gray-300", "hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-800")),
+						className: clsx("univer-min-w-0 univer-flex-1 univer-rounded-md univer-border univer-border-solid univer-px-2 univer-text-xs univer-outline-none univer-transition-colors dark:!univer-border-gray-700", "univer-h-7", filterMode === mode ? "univer-border-primary-500 univer-bg-primary-50 univer-text-primary-600 dark:!univer-bg-primary-900 dark:!univer-text-primary-200" : clsx("univer-border-gray-200 univer-bg-gray-0 univer-text-gray-600 dark:!univer-bg-gray-900 dark:!univer-text-gray-300", "hover:univer-bg-gray-50 dark:hover:!univer-bg-gray-800")),
 						"aria-pressed": filterMode === mode,
 						onClick: () => setFilterMode(mode),
 						children: /* @__PURE__ */ jsx("span", {
@@ -5267,8 +5280,8 @@ function ObjectDetailsEditor(props) {
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "univer-text-xs univer-text-gray-500 dark:!univer-text-gray-400",
 					children: labels.description
-				}), /* @__PURE__ */ jsx("textarea", {
-					className: clsx(descriptionClassName, "univer-box-border univer-min-h-16 univer-w-full univer-resize-none univer-rounded-md univer-border univer-border-solid univer-border-gray-200 univer-bg-gray-0 univer-p-2 univer-text-sm univer-text-gray-900 univer-outline-none focus:univer-border-primary-500 focus:univer-ring-1 focus:univer-ring-primary-100 disabled:univer-cursor-not-allowed disabled:univer-opacity-70 dark:!univer-border-gray-700 dark:!univer-bg-gray-900 dark:!univer-text-gray-100 dark:focus:!univer-ring-primary-900"),
+				}), /* @__PURE__ */ jsx(Textarea, {
+					className: clsx("univer-min-h-16 univer-resize-none univer-text-sm", descriptionClassName),
 					value: draftDescription,
 					disabled,
 					placeholder: labels.descriptionPlaceholder,
@@ -5404,7 +5417,7 @@ function MobileObjectListPanel(props) {
 						["locked", labels.filterLocked]
 					].map(([mode, label]) => /* @__PURE__ */ jsx("button", {
 						type: "button",
-						className: clsx("univer-min-w-0 univer-flex-1 univer-rounded-md univer-border univer-border-solid univer-px-2 univer-text-xs univer-outline-none univer-transition-colors dark:!univer-border-gray-700", "univer-h-11 univer-text-sm", filterMode === mode ? "dark:!univer-bg-primary-900/30 univer-border-primary-500 univer-bg-primary-50 univer-text-primary-600 dark:!univer-text-primary-200" : clsx("univer-border-gray-200 univer-bg-gray-0 univer-text-gray-600 dark:!univer-bg-gray-900 dark:!univer-text-gray-300")),
+						className: clsx("univer-min-w-0 univer-flex-1 univer-rounded-md univer-border univer-border-solid univer-px-2 univer-text-xs univer-outline-none univer-transition-colors dark:!univer-border-gray-700", "univer-h-11 univer-text-sm", filterMode === mode ? "univer-border-primary-500 univer-bg-primary-50 univer-text-primary-600 dark:!univer-bg-primary-900 dark:!univer-text-primary-200" : clsx("univer-border-gray-200 univer-bg-gray-0 univer-text-gray-600 dark:!univer-bg-gray-900 dark:!univer-text-gray-300")),
 						"aria-pressed": filterMode === mode,
 						onClick: () => setFilterMode(mode),
 						children: /* @__PURE__ */ jsx("span", {

package/lib/index.css

@@ -358,10 +358,6 @@
   padding: .25rem;
 }
 
-.univer-p-2 {
-  padding: .5rem;
-}
-
 .univer-p-3 {
   padding: .75rem;
 }
@@ -584,10 +580,6 @@
   border-color: var(--univer-primary-500) !important;
 }
 
-.focus\:univer-border-primary-500:focus {
-  border-color: var(--univer-primary-500);
-}
-
 .focus\:\!univer-bg-gray-0:focus {
   background-color: var(--univer-gray-0) !important;
 }
@@ -599,21 +591,10 @@
   box-shadow: var(--univer-tw-ring-offset-shadow), var(--univer-tw-ring-shadow), var(--univer-tw-shadow, 0 0 #0000) !important;
 }
 
-.focus\:univer-ring-1:focus {
-  --univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);
-  --univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(1px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);
-  box-shadow: var(--univer-tw-ring-offset-shadow), var(--univer-tw-ring-shadow), 0 0 #0000;
-  box-shadow: var(--univer-tw-ring-offset-shadow), var(--univer-tw-ring-shadow), var(--univer-tw-shadow, 0 0 #0000);
-}
-
 .focus\:\!univer-ring-primary-100:focus {
   --univer-tw-ring-color: var(--univer-primary-100) !important;
 }
 
-.focus\:univer-ring-primary-100:focus {
-  --univer-tw-ring-color: var(--univer-primary-100);
-}
-
 .active\:univer-scale-95:active {
   --univer-tw-scale-x: .95;
   --univer-tw-scale-y: .95;
@@ -649,10 +630,6 @@
   opacity: .4;
 }
 
-.disabled\:univer-opacity-70:disabled {
-  opacity: .7;
-}
-
 @media (hover: hover) and (pointer: fine) {
   .disabled\:hover\:univer-bg-transparent:hover:disabled {
     background-color: #0000;
@@ -681,6 +658,10 @@
   background-color: var(--univer-gray-900) !important;
 }
 
+.dark\:\!univer-bg-primary-900:where(.univer-dark, .univer-dark *) {
+  background-color: var(--univer-primary-900) !important;
+}
+
 .dark\:\!univer-text-gray-0:where(.univer-dark, .univer-dark *) {
   color: var(--univer-gray-0) !important;
 }