@univerjs/ui 0.1.10 → 0.1.12

package/lib/types/services/layout/layout.service.d.ts

@@ -1,11 +1,12 @@
-import { IEditorService } from '../editor/editor.service';
+import { ContextService, Nullable, Disposable, ILogService, IUniverInstanceService, UniverInstanceType } from '@univerjs/core';
 import { IDisposable } from '@wendellhu/redi';
-import { ContextService, Disposable, ILogService, IUniverInstanceService, UniverInstanceType } from '@univerjs/core';
+import { IEditorService } from '../editor/editor.service';
 
 type FocusHandlerFn = (unitId: string) => void;
 export declare const FOCUSING_UNIVER = "FOCUSING_UNIVER";
 export interface ILayoutService {
     readonly isFocused: boolean;
+    get rootContainerElement(): Nullable<HTMLElement>;
     /** Re-focus the currently focused Univer business instance. */
     focus(): void;
     /** Register a focus handler to focus on certain type of Univer unit. */
@@ -36,6 +37,7 @@ export declare class DesktopLayoutService extends Disposable implements ILayoutS
     private _canvasContainers;
     private _allContainers;
     constructor(_contextService: ContextService, _univerInstanceService: IUniverInstanceService, _logService: ILogService, _editorService: IEditorService);
+    get rootContainerElement(): Nullable<HTMLElement>;
     focus(): void;
     registerFocusHandler(type: UniverInstanceType, handler: FocusHandlerFn): IDisposable;
     registerCanvasElement(container: HTMLCanvasElement): IDisposable;

package/lib/types/services/menu/menu.d.ts

@@ -1,5 +1,5 @@
-import { Observable } from 'rxjs';
 import { IAccessor } from '@wendellhu/redi';
+import { Observable } from 'rxjs';
 
 export type OneOrMany<T> = T | T[];
 export declare enum MenuPosition {
@@ -94,9 +94,15 @@ export interface IMenuSelectorItem<V = MenuItemDefaultValueType, T = undefined>
 }
 export declare function isMenuSelectorItem<T extends MenuItemDefaultValueType>(v: IMenuItem): v is IMenuSelectorItem<T>;
 export type MenuItemDefaultValueType = string | number | undefined;
-export type IMenuItem = IMenuButtonItem | IMenuSelectorItem<MenuItemDefaultValueType>;
+export type IMenuItem = IMenuButtonItem<MenuItemDefaultValueType> | IMenuSelectorItem<MenuItemDefaultValueType>;
 export type IDisplayMenuItem<T extends IMenuItem> = T & {
     shortcut?: string;
 };
-export type IMenuItemFactory = (accessor: IAccessor) => IMenuItem;
+export type MenuItemConfig<T extends MenuItemDefaultValueType = MenuItemDefaultValueType> = Partial<Omit<IMenuItem, 'id' | 'subId' | 'value$' | 'hidden$' | 'disabled$' | 'activated$' | 'icon$'> & {
+    hidden?: boolean;
+    disabled?: boolean;
+    activated?: boolean;
+}>;
+export type MenuConfig<T extends MenuItemDefaultValueType = MenuItemDefaultValueType> = Record<string, MenuItemConfig<T>>;
+export type IMenuItemFactory = (accessor: IAccessor, menuConfig?: MenuConfig<MenuItemDefaultValueType>) => IMenuItem;
 export {};

package/lib/types/services/menu/menu.service.d.ts

@@ -1,13 +1,14 @@
-import { IDisplayMenuItem, IMenuItem, MenuPosition } from './menu';
-import { IShortcutService } from '../shortcut/shortcut.service';
-import { Observable } from 'rxjs';
-import { IDisposable } from '@wendellhu/redi';
 import { Disposable } from '@univerjs/core';
+import { IDisposable } from '@wendellhu/redi';
+import { Observable } from 'rxjs';
+import { IShortcutService } from '../shortcut/shortcut.service';
+import { IDisplayMenuItem, IMenuItem, MenuConfig, MenuPosition } from './menu';
 
 export declare const IMenuService: import('@wendellhu/redi').IdentifierDecorator<IMenuService>;
 export interface IMenuService {
     menuChanged$: Observable<void>;
-    addMenuItem(item: IMenuItem): IDisposable;
+    addMenuItem(item: IMenuItem, config: MenuConfig): IDisposable;
+    setMenuItem(item: IMenuItem): void;
     /** Get menu items for display at a given position or a submenu. */
     getMenuItems(position: MenuPosition | string): Array<IDisplayMenuItem<IMenuItem>>;
     getMenuItem(id: string): IMenuItem | null;
@@ -16,13 +17,17 @@ export declare class DesktopMenuService extends Disposable implements IMenuServi
     private readonly _shortcutService;
     private readonly _menuItemMap;
     private readonly _menuByPositions;
+    private readonly _menuConfigs;
     private _menuChanged$;
     menuChanged$: Observable<void>;
     constructor(_shortcutService: IShortcutService);
     dispose(): void;
-    addMenuItem(item: IMenuItem): IDisposable;
+    addMenuItem(item: IMenuItem, config: MenuConfig): IDisposable;
     getMenuItems(positions: MenuPosition | string): Array<IDisplayMenuItem<IMenuItem>>;
+    setMenuItem(item: IMenuItem): void;
     getMenuItem(id: string): IMenuItem | null;
+    setMenuConfigs(id: string, config: MenuConfig): void;
+    getMenuConfig(id: string): MenuConfig | null;
     private _getDisplayMenuItems;
     private _appendMenuToPosition;
 }

package/lib/types/services/message/__testing__/mock-message.service.d.ts

@@ -1,6 +1,6 @@
-import { IMessageService } from '../message.service';
-import { IDisposable } from '@wendellhu/redi';
 import { IMessageMethodOptions, IMessageProps } from '@univerjs/design';
+import { IDisposable } from '@wendellhu/redi';
+import { IMessageService } from '../message.service';
 
 /**
  * This is a mocked message service for testing purposes.

package/lib/types/services/message/desktop-message.service.d.ts

@@ -1,6 +1,6 @@
-import { IMessageService } from './message.service';
-import { IDisposable } from '@wendellhu/redi';
 import { IMessageMethodOptions, IMessageProps, Message } from '@univerjs/design';
+import { IDisposable } from '@wendellhu/redi';
+import { IMessageService } from './message.service';
 
 export declare class DesktopMessageService implements IMessageService {
     portalContainer: HTMLElement;

package/lib/types/services/message/message.service.d.ts

@@ -1,5 +1,5 @@
-import { IDisposable } from '@wendellhu/redi';
 import { IMessageMethodOptions, IMessageProps } from '@univerjs/design';
+import { IDisposable } from '@wendellhu/redi';
 
 export declare const IMessageService: import('@wendellhu/redi').IdentifierDecorator<IMessageService>;
 export interface IMessageService {

package/lib/types/services/notification/desktop-notification.service.d.ts

@@ -1,7 +1,13 @@
+import { Disposable } from '@univerjs/core';
+import { IDisposable, Injector } from '@wendellhu/redi';
+import { INotificationOptions } from '../../components/notification/Notification';
+import { IUIPartsService } from '../parts/parts.service';
 import { INotificationService } from './notification.service';
-import { INotificationMethodOptions } from '../../components/notification/Notification';
-import { IDisposable } from '@wendellhu/redi';
 
-export declare class DesktopNotificationService implements INotificationService {
-    show(params: INotificationMethodOptions): IDisposable;
+export declare class DesktopNotificationService extends Disposable implements INotificationService {
+    private readonly _injector;
+    private readonly _uiPartsService;
+    constructor(_injector: Injector, _uiPartsService: IUIPartsService);
+    show(params: INotificationOptions): IDisposable;
+    protected _initUIPart(): void;
 }

package/lib/types/services/notification/notification.service.d.ts

@@ -1,7 +1,7 @@
-import { INotificationMethodOptions } from '../../components/notification/Notification';
 import { IDisposable } from '@wendellhu/redi';
+import { INotificationOptions } from '../../components/notification/Notification';
 
 export declare const INotificationService: import('@wendellhu/redi').IdentifierDecorator<INotificationService>;
 export interface INotificationService {
-    show(params: INotificationMethodOptions): IDisposable;
+    show(params: INotificationOptions): IDisposable;
 }

package/lib/types/services/parts/parts.service.d.ts

@@ -0,0 +1,30 @@
+import { IDisposable } from '@wendellhu/redi';
+import { Observable } from 'rxjs';
+import { Disposable } from '@univerjs/core';
+import { ComponentType } from '../../common/component-manager';
+
+type ComponentRenderer = () => ComponentType;
+type ComponentPartKey = BuiltInUIPart | string;
+export declare enum BuiltInUIPart {
+    GLOBAL = "global",
+    HEADER = "header",
+    HEADER_MENU = "header-menu",
+    CONTENT = "content",
+    FOOTER = "footer",
+    LEFT_SIDEBAR = "left-sidebar"
+}
+export interface IUIPartsService {
+    componentRegistered$: Observable<ComponentPartKey>;
+    registerComponent(part: ComponentPartKey, component: () => ComponentType): IDisposable;
+    getComponents(part: ComponentPartKey): Set<ComponentRenderer>;
+}
+export declare const IUIPartsService: import('@wendellhu/redi').IdentifierDecorator<IUIPartsService>;
+export declare class UIPartsService extends Disposable implements IUIPartsService {
+    private _componentsByPart;
+    private readonly _componentRegistered$;
+    readonly componentRegistered$: Observable<string>;
+    dispose(): void;
+    registerComponent(part: ComponentPartKey, component: () => React.ComponentType): IDisposable;
+    getComponents(part: ComponentPartKey): Set<ComponentRenderer>;
+}
+export {};

package/lib/types/services/popup/canvas-popup.service.d.ts

@@ -1,16 +1,14 @@
-import { Observable } from 'rxjs';
+import { Disposable } from '@univerjs/core';
+import { IRectPopupProps } from '@univerjs/design';
 import { IBoundRectNoAngle } from '@univerjs/engine-render';
+import { Observable } from 'rxjs';
 
-export interface IPopup {
+export interface IPopup extends Pick<IRectPopupProps, 'closeOnSelfTarget' | 'direction' | 'excludeOutside' | 'onClickOutside'> {
     anchorRect: IBoundRectNoAngle;
     anchorRect$: Observable<IBoundRectNoAngle>;
     componentKey: string;
-    onClickOutside?: (e: MouseEvent) => void;
-    closeOnSelfTarget?: boolean;
-    excludeOutside?: HTMLElement[];
     unitId: string;
     subUnitId: string;
-    direction?: 'vertical' | 'horizontal';
     offset?: [number, number];
 }
 export interface ICanvasPopupService {
@@ -21,12 +19,13 @@ export interface ICanvasPopupService {
     get popups(): [string, IPopup][];
 }
 export declare const ICanvasPopupService: import('@wendellhu/redi').IdentifierDecorator<ICanvasPopupService>;
-export declare class CanvasPopupService implements ICanvasPopupService {
-    private _popupMap;
-    private _popups$;
-    popups$: Observable<[string, IPopup][]>;
+export declare class CanvasPopupService extends Disposable implements ICanvasPopupService {
+    private readonly _popupMap;
+    private readonly _popups$;
+    readonly popups$: Observable<[string, IPopup][]>;
     get popups(): [string, IPopup][];
-    private _notice;
+    private _update;
+    dispose(): void;
     addPopup(item: IPopup): string;
     removePopup(id: string): void;
     removeAll(): void;

package/lib/types/services/progress/progress.service.d.ts

@@ -1,6 +1,6 @@
-import { Observable } from 'rxjs';
-import { IDisposable } from '@wendellhu/redi';
 import { Disposable } from '@univerjs/core';
+import { IDisposable } from '@wendellhu/redi';
+import { Observable } from 'rxjs';
 
 export interface IProgressCount {
     count: number;

package/lib/types/services/range-selector/range-selector.service.d.ts

@@ -1,6 +1,6 @@
-import { Observable } from 'rxjs';
-import { IDisposable } from '@wendellhu/redi';
 import { IUnitRange, Nullable, Disposable } from '@univerjs/core';
+import { IDisposable } from '@wendellhu/redi';
+import { Observable } from 'rxjs';
 
 export interface IRangeSelectorRange extends IUnitRange {
     sheetName: string;

package/lib/types/services/shortcut/shortcut.service.d.ts

@@ -1,8 +1,8 @@
-import { IPlatformService } from '../platform/platform.service';
-import { ILayoutService } from '../layout/layout.service';
-import { Observable } from 'rxjs';
-import { IDisposable } from '@wendellhu/redi';
 import { Disposable, ICommandService, IContextService } from '@univerjs/core';
+import { IDisposable } from '@wendellhu/redi';
+import { Observable } from 'rxjs';
+import { ILayoutService } from '../layout/layout.service';
+import { IPlatformService } from '../platform/platform.service';
 
 export interface IShortcutItem<P extends object = object> {
     /** This should reuse the corresponding command's id. */

package/lib/types/services/sidebar/desktop-sidebar.service.d.ts

@@ -1,12 +1,11 @@
-import { ISidebarService } from './sidebar.service';
-import { ISidebarMethodOptions } from '../../views/components/sidebar/interface';
-import { Subject } from 'rxjs';
 import { IDisposable } from '@wendellhu/redi';
+import { Subject } from 'rxjs';
+import { ISidebarMethodOptions } from '../../views/components/sidebar/interface';
+import { ISidebarService } from './sidebar.service';
 
 export declare class DesktopSidebarService implements ISidebarService {
     private _sidebarOptions;
     readonly sidebarOptions$: Subject<ISidebarMethodOptions>;
     open(params: ISidebarMethodOptions): IDisposable;
-    set(params: ISidebarMethodOptions): void;
     close(): void;
 }

package/lib/types/services/sidebar/sidebar.service.d.ts

@@ -1,11 +1,10 @@
-import { ISidebarMethodOptions } from '../../views/components/sidebar/interface';
-import { Subject } from 'rxjs';
 import { IDisposable } from '@wendellhu/redi';
+import { Subject } from 'rxjs';
+import { ISidebarMethodOptions } from '../../views/components/sidebar/interface';
 
 export declare const ISidebarService: import('@wendellhu/redi').IdentifierDecorator<ISidebarService>;
 export interface ISidebarService {
     readonly sidebarOptions$: Subject<ISidebarMethodOptions>;
     open(params: ISidebarMethodOptions): IDisposable;
-    set(params: ISidebarMethodOptions): void;
     close(): void;
 }

package/lib/types/services/zen-zone/desktop-zen-zone.service.d.ts

@@ -1,13 +1,15 @@
-import { IZenZoneService } from './zen-zone.service';
-import { ComponentManager } from '../../common/component-manager';
-import { Subject } from 'rxjs';
-import { ForwardRefExoticComponent } from 'react';
 import { IDisposable } from '@wendellhu/redi';
+import { ForwardRefExoticComponent } from 'react';
+import { Subject } from 'rxjs';
+import { ComponentManager } from '../../common/component-manager';
+import { IZenZoneService } from './zen-zone.service';
 
 export declare class DesktopZenZoneService implements IZenZoneService {
     private readonly _componentManager;
     readonly visible$: Subject<boolean>;
     readonly componentKey$: Subject<string>;
+    private _visible;
+    get visible(): boolean;
     constructor(_componentManager: ComponentManager);
     set(key: string, component: ForwardRefExoticComponent<any>): IDisposable;
     open(): void;

package/lib/types/services/zen-zone/zen-zone.service.d.ts

@@ -1,10 +1,11 @@
-import { Subject } from 'rxjs';
 import { IDisposable } from '@wendellhu/redi';
+import { Subject } from 'rxjs';
 
 export declare const IZenZoneService: import('@wendellhu/redi').IdentifierDecorator<IZenZoneService>;
 export interface IZenZoneService {
     readonly visible$: Subject<boolean>;
     readonly componentKey$: Subject<string>;
+    readonly visible: boolean;
     set(key: string, component: any): IDisposable;
     open(): void;
     close(): void;

package/lib/types/ui-plugin.d.ts

@@ -1,12 +1,8 @@
-import { IWorkbenchOptions } from './controllers/ui/ui.controller';
+import { IContextService, LocaleService, Plugin } from '@univerjs/core';
 import { Injector } from '@wendellhu/redi';
-import { DependencyOverride, IContextService, LocaleService, Plugin } from '@univerjs/core';
+import { IUniverUIConfig } from './controllers/ui/ui.controller';
 
-export interface IUniverUIConfig extends IWorkbenchOptions {
-    /** Disable auto focus when Univer bootstraps. */
-    disableAutoFocus?: true;
-    override?: DependencyOverride;
-}
+export declare const DefaultUiConfig: {};
 export declare const DISABLE_AUTO_FOCUS_KEY = "DISABLE_AUTO_FOCUS";
 /**
  * UI plugin provides basic interaction with users. Including workbench (menus, UI parts, notifications etc.), copy paste, shortcut.
@@ -19,6 +15,7 @@ export declare class UniverUIPlugin extends Plugin {
     static pluginName: string;
     constructor(_config: Partial<IUniverUIConfig>, _contextService: IContextService, _injector: Injector, _localeService: LocaleService);
     onStarting(_injector: Injector): void;
+    onReady(): void;
     private _initDependencies;
     private _initUI;
 }

package/lib/types/views/App.d.ts

@@ -1,13 +1,8 @@
+import { default as React } from 'react';
 import { IWorkbenchOptions } from '../controllers/ui/ui.controller';
-import { ComponentType, default as React } from 'react';
 
 export interface IUniverAppProps extends IWorkbenchOptions {
     mountContainer: HTMLElement;
-    headerComponents?: Set<() => ComponentType>;
-    contentComponents?: Set<() => ComponentType>;
-    footerComponents?: Set<() => ComponentType>;
-    headerMenuComponents?: Set<() => ComponentType>;
-    leftSidebarComponents?: Set<() => ComponentType>;
     onRendered?: (container: HTMLElement) => void;
 }
 export declare function App(props: IUniverAppProps): React.JSX.Element;

package/lib/types/views/components/confirm-part/interface.d.ts

@@ -1,5 +1,5 @@
-import { ICustomLabelProps } from '../../../components/custom-label/CustomLabel';
 import { IConfirmProps } from '@univerjs/design';
+import { ICustomLabelProps } from '../../../components/custom-label/CustomLabel';
 
 export type IConfirmPartMethodOptions = {
     id: string;

package/lib/types/views/components/dialog-part/interface.d.ts

@@ -1,5 +1,5 @@
-import { ICustomLabelProps } from '../../../components/custom-label/CustomLabel';
 import { IDialogProps } from '@univerjs/design';
+import { ICustomLabelProps } from '../../../components/custom-label/CustomLabel';
 
 export type IDialogPartMethodOptions = {
     id: string;

package/lib/types/views/components/doc-bars/Toolbar.d.ts

@@ -1,8 +1,9 @@
-import { MenuPosition } from '../../../services/menu/menu';
 import { ComponentType, default as React } from 'react';
 
-export declare const positions: MenuPosition[];
 export interface IToolbarProps {
     headerMenuComponents?: Set<() => ComponentType>;
 }
+/**
+ * Univer's built in toolbar component.
+ */
 export declare function Toolbar(props: IToolbarProps): React.JSX.Element;

package/lib/types/views/components/doc-bars/ToolbarItem.d.ts

@@ -1,4 +1,4 @@
-import { IDisplayMenuItem, IMenuItem } from '../../../services/menu/menu';
 import { default as React } from 'react';
+import { IDisplayMenuItem, IMenuItem } from '../../../services/menu/menu';
 
 export declare const ToolbarItem: React.ForwardRefExoticComponent<IDisplayMenuItem<IMenuItem> & React.RefAttributes<any>>;

package/lib/types/views/components/doc-bars/hook.d.ts

@@ -0,0 +1,44 @@
+import { IDisplayMenuItem, IMenuItem, MenuGroup, MenuPosition } from '../../../services/menu/menu';
+
+type MenuPositionWithCustom = MenuPosition | string;
+export interface IMenuGroup {
+    name: MenuPositionWithCustom;
+    menuItems: Array<IDisplayMenuItem<IMenuItem>>;
+}
+export interface IToolbarRenderHookHandler {
+    /** The activated category. */
+    category: MenuPositionWithCustom;
+    /** Update current activate category. */
+    setCategory: (position: MenuPositionWithCustom) => void;
+    visibleItems: IDisplayMenuItem<IMenuItem>[];
+    /** Menu grouped in this category. */
+    groups: IMenuGroup[];
+    groupsByKey: Record<MenuGroup, Array<IDisplayMenuItem<IMenuItem>>>;
+}
+/**
+ * If your custom toolbar component need to render menu items by their category,
+ * you can use this hook to get the toolbar status.
+ * @returns toolbar status
+ */
+export declare function useToolbarGroups(categories: MenuPositionWithCustom[]): IToolbarRenderHookHandler;
+export interface IToolbarItemStatus {
+    disabled: boolean;
+    value: any;
+    activated: boolean;
+    hidden: boolean;
+}
+/**
+ * Subscribe to a menu item's status change and return the latest status.
+ * @param menuItem The menu item
+ * @returns The menu item's status
+ */
+export declare function useToolbarItemStatus(menuItem: IDisplayMenuItem<IMenuItem>): IToolbarItemStatus;
+export declare function useToolbarCollapseObserver(visibleItems: IToolbarRenderHookHandler['visibleItems']): {
+    toolbarRef: import('react').RefObject<HTMLDivElement>;
+    toolbarItemRefs: import('react').MutableRefObject<Record<string, {
+        el: HTMLDivElement;
+        key: string;
+    }>>;
+    collapsedId: string[];
+};
+export {};

package/lib/types/views/parts.d.ts

@@ -1,3 +1,3 @@
 import { ComponentType } from 'react';
 
-export declare const globalComponents: Set<() => ComponentType>;
+export declare const builtInGlobalComponents: Set<() => ComponentType>;