@univerjs/ui 0.23.0 → 0.24.0

package/lib/es/index.js

@@ -2906,7 +2906,7 @@ function RectPopup(props) {
 			window.removeEventListener("contextmenu", handleContextMenu);
 		};
 	}, [contextMenuFn]);
-	const { direction: dir } = useContext(ConfigContext);
+	const dir = useObservable(useDependency(LocaleService).direction$);
 	const ele = /* @__PURE__ */ jsxs(Fragment$1, { children: [mask && /* @__PURE__ */ jsx("div", {
 		"data-u-comp": "rect-popup-mask",
 		className: "univer-fixed univer-inset-0 univer-z-[100]",
@@ -3465,9 +3465,20 @@ function DropdownMenuWrapper({ menuId, slot, value, options, children, disabled,
 	const { dropdownVisible, setDropdownVisible } = useContext(TooltipWrapperContext);
 	const menuManagerService = useDependency(IMenuManagerService);
 	const [hiddenStates, setHiddenStates] = useState({});
+	const [menuVersion, setMenuVersion] = useState(0);
+	useEffect(() => {
+		const subscription = menuManagerService.menuChanged$.subscribe(() => {
+			setMenuVersion((version) => version + 1);
+		});
+		return () => subscription.unsubscribe();
+	}, [menuManagerService]);
 	const menuItems = useMemo(() => {
 		return menuId ? menuManagerService.getMenuByPositionKey(menuId) : [];
-	}, [menuId]);
+	}, [
+		menuId,
+		menuManagerService,
+		menuVersion
+	]);
 	const filteredMenuItems = useMemo(() => {
 		return menuItems.filter((item) => {
 			var _item$key;
@@ -4231,6 +4242,7 @@ function ContextMenuPanel(props) {
 		onWheel: (event) => event.stopPropagation(),
 		children: /* @__PURE__ */ jsx(ContextMenuMenu, {
 			menuSchemas: menuItems,
+			menuSessionVersion,
 			submenuPortalContainer,
 			onOptionSelect,
 			maxMenuHeight
@@ -4238,7 +4250,7 @@ function ContextMenuPanel(props) {
 	});
 }
 function ContextMenuMenu(props) {
-	const { menuSchemas, submenuPortalContainer, onOptionSelect, maxMenuHeight } = props;
+	const { menuSchemas, menuSessionVersion, submenuPortalContainer, onOptionSelect, maxMenuHeight } = props;
 	const localeService = useDependency(LocaleService);
 	const hiddenGroupStates = useContextGroupHiddenStates$1(menuSchemas);
 	const visibleSchemas = useMemo(() => {
@@ -4253,6 +4265,7 @@ function ContextMenuMenu(props) {
 		if (menuSchema.item) return /* @__PURE__ */ jsx(ContextMenuMenuItem, {
 			menuKey: menuSchema.key,
 			menuItem: menuSchema.item,
+			menuSessionVersion,
 			submenuPortalContainer,
 			onOptionSelect,
 			maxMenuHeight
@@ -4276,6 +4289,7 @@ function ContextMenuMenu(props) {
 			}), menuSchema.children.map((childSchema) => childSchema.item && /* @__PURE__ */ jsx(ContextMenuMenuItem, {
 				menuKey: childSchema.key,
 				menuItem: childSchema.item,
+				menuSessionVersion,
 				submenuPortalContainer,
 				onOptionSelect,
 				maxMenuHeight
@@ -4284,8 +4298,8 @@ function ContextMenuMenu(props) {
 	}) });
 }
 function ContextMenuMenuItem(props) {
-	const { menuKey, menuItem, submenuPortalContainer, onOptionSelect, maxMenuHeight } = props;
-	const { direction } = useContext(ConfigContext);
+	const { menuKey, menuItem, menuSessionVersion, submenuPortalContainer, onOptionSelect, maxMenuHeight } = props;
+	const direction = useObservable(useDependency(LocaleService).direction$);
 	const menuManagerService = useDependency(IMenuManagerService);
 	const disabled = useObservable(menuItem.disabled$, false);
 	const activated = useObservable(menuItem.activated$, false);
@@ -4318,7 +4332,8 @@ function ContextMenuMenuItem(props) {
 	}, [
 		menuItem.id,
 		menuItem.type,
-		menuManagerService
+		menuManagerService,
+		menuSessionVersion
 	]);
 	const hasSelectionSubmenu = selections.length > 0;
 	const hasSubItemSubmenu = subMenuItems.length > 0;
@@ -4514,6 +4529,7 @@ function ContextMenuMenuItem(props) {
 					})
 				}), hasSubItemSubmenu && /* @__PURE__ */ jsx(ContextMenuMenu, {
 					menuSchemas: subMenuItems,
+					menuSessionVersion,
 					submenuPortalContainer,
 					onOptionSelect: onSubmenuOptionSelect,
 					maxMenuHeight
@@ -4703,62 +4719,18 @@ function DesktopContextMenu() {
 	});
 }
 
-//#endregion
-//#region src/services/global-zone/global-zone.service.ts
-const IGlobalZoneService = createIdentifier("univer.global-zone-service");
-
-//#endregion
-//#region src/views/components/global-zone/GlobalZone.tsx
-/**
-* Copyright 2023-present DreamNum Co., Ltd.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
-function GlobalZone() {
-	const globalZoneService = useDependency(IGlobalZoneService);
-	const [visible, setVisible] = useState(false);
-	const componentKey = useObservable(globalZoneService.componentKey$, globalZoneService.componentKey);
-	const componentManager = useDependency(ComponentManager);
-	const { direction } = useContext(ConfigContext);
-	const Component = useMemo(() => {
-		const Component = componentManager.get(componentKey !== null && componentKey !== void 0 ? componentKey : "");
-		if (Component) return Component;
-	}, [componentKey, componentManager]);
-	useEffect(() => {
-		const subscription = globalZoneService.visible$.subscribe((val) => {
-			setVisible(val);
-		});
-		return () => {
-			subscription.unsubscribe();
-		};
-	}, [globalZoneService.visible$]);
-	if (!visible) return null;
-	return /* @__PURE__ */ jsx("section", {
-		dir: direction,
-		className: clsx("univer-absolute univer-bg-gray-100", {
-			"univer-hidden": !visible,
-			"univer-inset-0 univer-z-[100] univer-block univer-size-full": visible
-		}),
-		children: Component && /* @__PURE__ */ jsx(Component, {})
-	});
-}
-
 //#endregion
 //#region src/views/components/sidebar/Sidebar.tsx
+const MIN_SIDEBAR_WIDTH = 280;
+const MAX_SIDEBAR_WIDTH = 800;
 function Sidebar() {
 	const sidebarService = useDependency(ISidebarService);
 	const sidebarOptions = useObservable(sidebarService.sidebarOptions$);
 	const scrollRef = useRef(null);
+	const sidebarRef = useRef(null);
+	const closeButtonRef = useRef(null);
+	const [isDragging, setIsDragging] = useState(false);
+	const dragWidthRef = useRef(null);
 	const options = useMemo(() => {
 		if (!sidebarOptions) return null;
 		const copy = { ...sidebarOptions };
@@ -4769,12 +4741,59 @@ function Sidebar() {
 		]) {
 			const k = key;
 			if (sidebarOptions[k]) {
-				const { key, ...props } = sidebarOptions[k];
-				if (props) copy[k] = /* @__PURE__ */ jsx(CustomLabel, { ...props }, key);
+				const { key: itemKey, ...props } = sidebarOptions[k];
+				if (props) copy[k] = /* @__PURE__ */ jsx(CustomLabel, { ...props }, itemKey);
 			}
 		}
 		return copy;
 	}, [sidebarOptions]);
+	useEffect(() => {
+		if ((options === null || options === void 0 ? void 0 : options.visible) && closeButtonRef.current) closeButtonRef.current.focus();
+	}, [options === null || options === void 0 ? void 0 : options.visible]);
+	useEffect(() => {
+		const handleKeyDown = (e) => {
+			if (e.key === "Escape" && sidebarService.visible) {
+				e.stopPropagation();
+				sidebarService.close();
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [sidebarService]);
+	const handleResizeMouseDown = useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		setIsDragging(true);
+		document.body.style.cursor = "col-resize";
+		document.body.style.userSelect = "none";
+	}, []);
+	useEffect(() => {
+		if (!isDragging) {
+			document.body.style.cursor = "";
+			document.body.style.userSelect = "";
+			return;
+		}
+		const handleMouseMove = (e) => {
+			if (!sidebarRef.current) return;
+			const newWidth = sidebarRef.current.getBoundingClientRect().right - e.clientX;
+			const clampedWidth = Math.max(MIN_SIDEBAR_WIDTH, Math.min(newWidth, MAX_SIDEBAR_WIDTH));
+			dragWidthRef.current = clampedWidth;
+			sidebarRef.current.style.width = `${clampedWidth}px`;
+		};
+		const handleMouseUp = () => {
+			setIsDragging(false);
+			if (dragWidthRef.current != null) {
+				sidebarService.setWidth(dragWidthRef.current);
+				dragWidthRef.current = null;
+			}
+		};
+		document.addEventListener("mousemove", handleMouseMove);
+		document.addEventListener("mouseup", handleMouseUp);
+		return () => {
+			document.removeEventListener("mousemove", handleMouseMove);
+			document.removeEventListener("mouseup", handleMouseUp);
+		};
+	}, [isDragging, sidebarService]);
 	useEffect(() => {
 		if (scrollRef.current) sidebarService.setContainer(scrollRef.current);
 		return () => {
@@ -4792,29 +4811,66 @@ function Sidebar() {
 		};
 	}, [sidebarService]);
 	const width = useMemo(() => {
+		if (isDragging && dragWidthRef.current != null) return `${dragWidthRef.current}px`;
 		if (!(options === null || options === void 0 ? void 0 : options.visible)) return 0;
+		const savedWidth = sidebarService.width;
+		if (savedWidth) return `${savedWidth}px`;
 		if (typeof options.width === "number") return `${options.width}px`;
 		return options.width;
-	}, [options]);
+	}, [
+		isDragging,
+		options,
+		sidebarService
+	]);
 	function handleClose() {
 		sidebarService.close(sidebarOptions === null || sidebarOptions === void 0 ? void 0 : sidebarOptions.id);
 	}
-	return /* @__PURE__ */ jsx("section", {
+	return /* @__PURE__ */ jsxs("section", {
+		ref: sidebarRef,
 		"data-u-comp": "sidebar",
-		className: clsx("univer-relative univer-h-full univer-bg-white univer-text-gray-900 dark:!univer-bg-gray-900 dark:!univer-text-white", {
+		role: "complementary",
+		"aria-expanded": !!(options === null || options === void 0 ? void 0 : options.visible),
+		"aria-label": "Sidebar panel",
+		className: clsx("univer-relative univer-h-full univer-flex-shrink-0 univer-bg-white univer-text-gray-900 dark:!univer-bg-gray-900 dark:!univer-text-white", {
 			"univer-w-96 univer-translate-x-0": options === null || options === void 0 ? void 0 : options.visible,
 			"univer-w-0 univer-translate-x-full": !(options === null || options === void 0 ? void 0 : options.visible)
 		}),
-		style: { width },
-		children: /* @__PURE__ */ jsxs("section", {
+		style: { width: isDragging ? void 0 : width },
+		children: [(options === null || options === void 0 ? void 0 : options.visible) && /* @__PURE__ */ jsx("div", {
+			className: "hover:univer-bg-primary-500/30 active:univer-bg-primary-500/50 univer-absolute univer-left-0 univer-top-0 univer-z-20 univer-h-full univer-w-1 univer-cursor-col-resize univer-transition-colors",
+			onMouseDown: handleResizeMouseDown,
+			role: "separator",
+			"aria-orientation": "vertical",
+			"aria-label": "Resize sidebar",
+			tabIndex: 0,
+			onKeyDown: (e) => {
+				if (!sidebarRef.current) return;
+				const currentWidth = sidebarRef.current.getBoundingClientRect().width;
+				let newWidth = currentWidth;
+				if (e.key === "ArrowLeft") {
+					e.preventDefault();
+					newWidth = Math.max(MIN_SIDEBAR_WIDTH, currentWidth - 20);
+				} else if (e.key === "ArrowRight") {
+					e.preventDefault();
+					newWidth = Math.min(MAX_SIDEBAR_WIDTH, currentWidth + 20);
+				}
+				if (newWidth !== currentWidth) {
+					sidebarRef.current.style.width = `${newWidth}px`;
+					sidebarService.setWidth(newWidth);
+				}
+			}
+		}), /* @__PURE__ */ jsxs("section", {
 			ref: scrollRef,
 			className: clsx("univer-box-border univer-grid univer-h-0 univer-min-h-full univer-grid-rows-[auto_1fr_auto] univer-overflow-y-auto", borderLeftBottomClassName, scrollbarClassName),
 			children: [
 				/* @__PURE__ */ jsxs("header", {
 					className: "univer-sticky univer-top-0 univer-z-10 univer-box-border univer-flex univer-cursor-default univer-items-center univer-justify-between univer-bg-white univer-p-4 univer-pb-2 univer-text-base univer-font-medium univer-text-gray-800 dark:!univer-bg-gray-900 dark:!univer-text-white",
-					children: [options === null || options === void 0 ? void 0 : options.header, /* @__PURE__ */ jsx("a", {
-						className: "univer-cursor-pointer univer-text-gray-500 dark:!univer-text-gray-300",
+					children: [options === null || options === void 0 ? void 0 : options.header, /* @__PURE__ */ jsx("button", {
+						ref: closeButtonRef,
+						type: "button",
+						className: "focus:univer-ring-primary-500/50 univer-cursor-pointer univer-appearance-none univer-rounded-sm univer-border-none univer-bg-transparent univer-p-0 univer-text-gray-500 focus:univer-outline-none focus:univer-ring-2 dark:!univer-text-gray-300",
 						onClick: handleClose,
+						"aria-label": "Close sidebar",
 						children: /* @__PURE__ */ jsx(CloseIcon, {})
 					})]
 				}),
@@ -4828,7 +4884,7 @@ function Sidebar() {
 					children: options.footer
 				})
 			]
-		})
+		})]
 	});
 }
 
@@ -5025,7 +5081,6 @@ function DesktopWorkbenchContent(props) {
 			dir: direction,
 			children: [
 				/* @__PURE__ */ jsx(ComponentContainer, { components: globalComponents }, "global"),
-				/* @__PURE__ */ jsx(GlobalZone, {}),
 				contextMenu && /* @__PURE__ */ jsx(DesktopContextMenu, {}),
 				/* @__PURE__ */ jsx(FloatingContainer, {}),
 				/* @__PURE__ */ jsx("div", { id: popupRootId })
@@ -5196,7 +5251,7 @@ const IUIController = createIdentifier("univer.ui.ui-controller");
 //#endregion
 //#region package.json
 var name = "@univerjs/ui";
-var version = "0.23.0";
+var version = "0.24.0";
 
 //#endregion
 //#region src/views/components/ribbon/MobileRibbon.tsx
@@ -5693,7 +5748,8 @@ function MobileContextMenu() {
 	const commandService = useDependency(ICommandService);
 	const layoutService = useDependency(ILayoutService);
 	const localeService = useDependency(LocaleService);
-	const { mountContainer, direction } = useContext(ConfigContext);
+	const direction = useObservable(localeService.direction$);
+	const { mountContainer } = useContext(ConfigContext);
 	visibleRef.current = visible;
 	useEffect(() => {
 		const hostDisposable = contextMenuHostService.registerMenu(MOBILE_CONTEXT_MENU_HOST_ID, () => {
@@ -5890,7 +5946,6 @@ function MobileWorkbench(props) {
 						]
 					}),
 					footer && /* @__PURE__ */ jsx("footer", { children: /* @__PURE__ */ jsx(ComponentContainer, { components: footerComponents }, "footer") }),
-					/* @__PURE__ */ jsx(GlobalZone, {}),
 					/* @__PURE__ */ jsx(ZenZone, {})
 				]
 			})]
@@ -6666,37 +6721,6 @@ let DesktopGalleryService = class DesktopGalleryService extends Disposable {
 };
 DesktopGalleryService = __decorate([__decorateParam(0, Inject(Injector)), __decorateParam(1, IUIPartsService)], DesktopGalleryService);
 
-//#endregion
-//#region src/services/global-zone/desktop-global-zone.service.ts
-let DesktopGlobalZoneService = class DesktopGlobalZoneService {
-	constructor(_componentManager) {
-		this._componentManager = _componentManager;
-		_defineProperty(this, "visible$", new Subject());
-		_defineProperty(this, "componentKey$", new Subject());
-		_defineProperty(this, "_componentKey", "");
-	}
-	get componentKey() {
-		return this._componentKey;
-	}
-	set(key, component) {
-		this._componentManager.register(key, component);
-		this.componentKey$.next(key);
-		this._componentKey = key;
-		return toDisposable(() => {
-			this._componentManager.delete(key);
-			this.visible$.complete();
-			this.componentKey$.complete();
-		});
-	}
-	open() {
-		this.visible$.next(true);
-	}
-	close() {
-		this.visible$.next(false);
-	}
-};
-DesktopGlobalZoneService = __decorate([__decorateParam(0, Inject(ComponentManager))], DesktopGlobalZoneService);
-
 //#endregion
 //#region src/services/local-file/desktop-local-file.service.ts
 var DesktopLocalFileService = class extends Disposable {
@@ -6788,8 +6812,9 @@ var DesktopLocalStorageService = class {
 * limitations under the License.
 */
 function MessageContainer() {
+	const localeService = useDependency(LocaleService);
 	const darkMode = useObservable(useDependency(ThemeService).darkMode$);
-	const { direction } = useContext(ConfigContext);
+	const direction = useObservable(localeService.direction$);
 	return /* @__PURE__ */ jsx(Messager, {
 		theme: darkMode ? "dark" : "light",
 		dir: direction
@@ -6832,8 +6857,9 @@ DesktopMessageService = __decorate([__decorateParam(0, Inject(Injector)), __deco
 //#endregion
 //#region src/components/notification/Notification.tsx
 function Notification() {
+	const localeService = useDependency(LocaleService);
 	const darkMode = useObservable(useDependency(ThemeService).darkMode$);
-	const { direction } = useContext(ConfigContext);
+	const direction = useObservable(localeService.direction$);
 	return /* @__PURE__ */ jsx(Toaster, {
 		theme: darkMode ? "dark" : "light",
 		dir: direction
@@ -6878,6 +6904,7 @@ var DesktopSidebarService = class extends Disposable {
 		_defineProperty(this, "scrollEvent$", new Subject());
 		_defineProperty(this, "_container", void 0);
 		_defineProperty(this, "_openAnimationFrameId", null);
+		_defineProperty(this, "_width", void 0);
 	}
 	get visible() {
 		return this._sidebarOptions.visible || false;
@@ -6885,6 +6912,12 @@ var DesktopSidebarService = class extends Disposable {
 	get options() {
 		return this._sidebarOptions;
 	}
+	get width() {
+		return this._width;
+	}
+	setWidth(value) {
+		this._width = value;
+	}
 	dispose() {
 		super.dispose();
 		this.close();
@@ -7037,10 +7070,6 @@ let UniverMobileUIPlugin = class UniverMobileUIPlugin extends Plugin {
 				useClass: DesktopZenZoneService,
 				lazy: true
 			}],
-			[IGlobalZoneService, {
-				useClass: DesktopGlobalZoneService,
-				lazy: true
-			}],
 			[IMessageService, {
 				useClass: DesktopMessageService,
 				lazy: true
@@ -7138,10 +7167,6 @@ let UniverUIPlugin = class UniverUIPlugin extends Plugin {
 				useClass: DesktopZenZoneService,
 				lazy: true
 			}],
-			[IGlobalZoneService, {
-				useClass: DesktopGlobalZoneService,
-				lazy: true
-			}],
 			[IMessageService, {
 				useClass: DesktopMessageService,
 				lazy: true
@@ -7886,4 +7911,4 @@ const PrintFloatDomSingle = memo((props) => {
 });
 
 //#endregion
-export { AnchoredContextMenu, BrowserClipboardService, BuiltInUIPart, COLOR_PICKER_COMPONENT, COMMON_LABEL_COMPONENT, CanvasFloatDomService, CanvasPopup, CanvasPopupService, CommonLabel, ComponentContainer, ComponentManager, DesktopContextMenu as ContextMenu, ContextMenuGroup, ContextMenuHostService, ContextMenuPanel, ContextMenuPosition, ContextMenuService, CopyCommand, CopyShortcutItem, CustomLabel, CutCommand, CutShortcutItem, DISABLE_AUTO_FOCUS_KEY, DesktopBeforeCloseService, DesktopConfirmService, DesktopDialogService, DesktopGalleryService, DesktopGlobalZoneService, DesktopLayoutService, DesktopLocalFileService, DesktopLocalStorageService, DesktopMessageService, DesktopNotificationService, DesktopRibbonService, DesktopSidebarService, DesktopUIController, DesktopZenZoneService, ErrorController, FILE_PNG_CLIPBOARD_MIME_TYPE, FILE_SVG_XML_CLIPBOARD_MIME_TYPE, FILE__BMP_CLIPBOARD_MIME_TYPE, FILE__JPEG_CLIPBOARD_MIME_TYPE, FILE__WEBP_CLIPBOARD_MIME_TYPE, FONT_FAMILY_COMPONENT, FONT_FAMILY_ITEM_COMPONENT, FONT_SIZE_COMPONENT, FONT_SIZE_LIST, FloatDom, FloatDomSingle, FontFamily, FontFamilyItem, FontSize, GlobalZone, HEADING_ITEM_COMPONENT, HEADING_LIST, HTML_CLIPBOARD_MIME_TYPE, HeadingItem, IBeforeCloseService, ICanvasPopupService, IClipboardInterfaceService, IContextMenuHostService, IContextMenuService, IDialogService, IFontService, IGalleryService, IGlobalZoneService, ILayoutService, ILeftSidebarService, ILocalFileService, IMenuManagerService, IMessageService, INotificationService, IPlatformService, IRibbonService, IShortcutService, ISidebarService, IUIController, IUIPartsService, IZenZoneService, KeyCode, MenuItemType, MenuManagerPosition, MenuManagerService, MetaKeys, MobileContextMenu, MockMessageService, PLAIN_TEXT_CLIPBOARD_MIME_TYPE, PasteCommand, PlatformService, PrintFloatDomSingle, ProgressBar, RectPopup, RediConsumer, RediContext, RediProvider, RedoShortcutItem, Ribbon, RibbonDataGroup, RibbonFormulasGroup, RibbonInsertGroup, RibbonOthersGroup, RibbonPosition, RibbonStartGroup, RibbonViewGroup, SharedController, SheetPasteShortKeyCommandName, ShortcutPanelController, ShortcutPanelService, ShortcutService, Sidebar, SingleCanvasPopup, SingleUnitUIController, Slider, ThemeSwitcherService, ToggleShortcutPanelOperation, ToolbarButton, ToolbarItem, menuSchema as UIMenuSchema, UIPartsService, UI_PLUGIN_CONFIG_KEY, UNI_DISABLE_CHANGING_FOCUS_KEY, UndoShortcutItem, UniverMobileUIPlugin, UniverUIPlugin, WithDependency, ZIndexManager, ZenZone, connectDependencies, connectInjector, getHeaderFooterMenuHiddenObservable, getMenuHiddenObservable, handelExcelToJson, handelTableToJson, handleDomToJson, handlePlainToJson, handleStringToStyle, handleTableColgroup, handleTableMergeData, handleTableRowGroup, imageMimeTypeSet, mergeMenuConfigs, parseHtmlDocument, parseHtmlFragment, sanitizeParsedHtml, splitSpanText, supportClipboardAPI, t, textTrim, useClickOutSide, useComponentsOfPart, useConfigValue, useDebounceFn, useDependency, useEvent, useInjector, useObservable, useObservableRef, useScrollYOverContainer, useSidebarClick, useToolbarItemStatus, useUpdateBinder, useUpdateEffect, useVirtualList };
+export { AnchoredContextMenu, BrowserClipboardService, BuiltInUIPart, COLOR_PICKER_COMPONENT, COMMON_LABEL_COMPONENT, CanvasFloatDomService, CanvasPopup, CanvasPopupService, CommonLabel, ComponentContainer, ComponentManager, DesktopContextMenu as ContextMenu, ContextMenuGroup, ContextMenuHostService, ContextMenuPanel, ContextMenuPosition, ContextMenuService, CopyCommand, CopyShortcutItem, CustomLabel, CutCommand, CutShortcutItem, DISABLE_AUTO_FOCUS_KEY, DesktopBeforeCloseService, DesktopConfirmService, DesktopDialogService, DesktopGalleryService, DesktopLayoutService, DesktopLocalFileService, DesktopLocalStorageService, DesktopMessageService, DesktopNotificationService, DesktopRibbonService, DesktopSidebarService, DesktopUIController, DesktopZenZoneService, ErrorController, FILE_PNG_CLIPBOARD_MIME_TYPE, FILE_SVG_XML_CLIPBOARD_MIME_TYPE, FILE__BMP_CLIPBOARD_MIME_TYPE, FILE__JPEG_CLIPBOARD_MIME_TYPE, FILE__WEBP_CLIPBOARD_MIME_TYPE, FONT_FAMILY_COMPONENT, FONT_FAMILY_ITEM_COMPONENT, FONT_SIZE_COMPONENT, FONT_SIZE_LIST, FloatDom, FloatDomSingle, FontFamily, FontFamilyItem, FontSize, HEADING_ITEM_COMPONENT, HEADING_LIST, HTML_CLIPBOARD_MIME_TYPE, HeadingItem, IBeforeCloseService, ICanvasPopupService, IClipboardInterfaceService, IContextMenuHostService, IContextMenuService, IDialogService, IFontService, IGalleryService, ILayoutService, ILeftSidebarService, ILocalFileService, IMenuManagerService, IMessageService, INotificationService, IPlatformService, IRibbonService, IShortcutService, ISidebarService, IUIController, IUIPartsService, IZenZoneService, KeyCode, MenuItemType, MenuManagerPosition, MenuManagerService, MetaKeys, MobileContextMenu, MockMessageService, PLAIN_TEXT_CLIPBOARD_MIME_TYPE, PasteCommand, PlatformService, PrintFloatDomSingle, ProgressBar, RectPopup, RediConsumer, RediContext, RediProvider, RedoShortcutItem, Ribbon, RibbonDataGroup, RibbonFormulasGroup, RibbonInsertGroup, RibbonOthersGroup, RibbonPosition, RibbonStartGroup, RibbonViewGroup, SharedController, SheetPasteShortKeyCommandName, ShortcutPanelController, ShortcutPanelService, ShortcutService, Sidebar, SingleCanvasPopup, SingleUnitUIController, Slider, ThemeSwitcherService, ToggleShortcutPanelOperation, ToolbarButton, ToolbarItem, menuSchema as UIMenuSchema, UIPartsService, UI_PLUGIN_CONFIG_KEY, UNI_DISABLE_CHANGING_FOCUS_KEY, UndoShortcutItem, UniverMobileUIPlugin, UniverUIPlugin, WithDependency, ZIndexManager, ZenZone, connectDependencies, connectInjector, getHeaderFooterMenuHiddenObservable, getMenuHiddenObservable, handelExcelToJson, handelTableToJson, handleDomToJson, handlePlainToJson, handleStringToStyle, handleTableColgroup, handleTableMergeData, handleTableRowGroup, imageMimeTypeSet, mergeMenuConfigs, parseHtmlDocument, parseHtmlFragment, sanitizeParsedHtml, splitSpanText, supportClipboardAPI, t, textTrim, useClickOutSide, useComponentsOfPart, useConfigValue, useDebounceFn, useDependency, useEvent, useInjector, useObservable, useObservableRef, useScrollYOverContainer, useSidebarClick, useToolbarItemStatus, useUpdateBinder, useUpdateEffect, useVirtualList };

package/lib/facade.js

@@ -332,7 +332,7 @@ let FShortcut = class FShortcut extends FBase {
 	* ```
 	*/
 	triggerShortcut(e) {
-		const workbook = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET);
+		const workbook = this._univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_SHEET);
 		if (!workbook) return;
 		const renderUnit = this._renderManagerService.getRenderById(workbook.getUnitId());
 		if (!renderUnit) return;

package/lib/index.css

@@ -93,6 +93,10 @@
   z-index: 10;
 }
 
+.univer-z-20 {
+  z-index: 20;
+}
+
 .univer-z-\[-1\] {
   z-index: -1;
 }
@@ -296,6 +300,10 @@
   width: 0;
 }
 
+.univer-w-1 {
+  width: .25rem;
+}
+
 .univer-w-10 {
   width: 2.5rem;
 }
@@ -430,6 +438,10 @@
   transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
 }
 
+.univer-cursor-col-resize {
+  cursor: col-resize;
+}
+
 .univer-cursor-default {
   cursor: default;
 }
@@ -1167,6 +1179,13 @@
   outline: 2px solid #0000;
 }
 
+.focus\:univer-ring-2: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(2px + 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-visible\:univer-ring-2:focus-visible {
   --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(2px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);