@opensumi/ide-menu-bar 2.21.13 → 2.22.0

package/lib/browser/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/browser/index.ts"],"names":[],"mappings":";;;;AAAA,0BAA0B;AAC1B,qCAAoD;AACpD,iEAA2D;AAE3D,mEAA8D;AAC9D,qDAAsE;AAGtE,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,gCAAa;IAAhD;;QACE,cAAS,GAAe;YACtB,2CAAmB;YACnB;gBACE,KAAK,EAAE,qCAAoB;gBAC3B,QAAQ,EAAE,6BAAY;aACvB;SACF,CAAC;IACJ,CAAC;CAAA,CAAA;AARY,aAAa;IADzB,IAAA,eAAU,GAAE;GACA,aAAa,CAQzB;AARY,sCAAa"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/browser/index.ts"],"names":[],"mappings":";;;;AAAA,0BAA0B;AAC1B,qCAAoD;AACpD,iEAA2D;AAE3D,mEAA8D;AAC9D,qDAAsE;AAG/D,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,gCAAa;IAAzC;;QACL,cAAS,GAAe;YACtB,2CAAmB;YACnB;gBACE,KAAK,EAAE,qCAAoB;gBAC3B,QAAQ,EAAE,6BAAY;aACvB;SACF,CAAC;IACJ,CAAC;CAAA,CAAA;AARY,aAAa;IADzB,IAAA,eAAU,GAAE;GACA,aAAa,CAQzB;AARY,sCAAa"}

package/lib/browser/menu-bar.contribution.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-bar.contribution.js","sourceRoot":"","sources":["../../src/browser/menu-bar.contribution.ts"],"names":[],"mappings":";;;;AAAA,qCAAyC;AACzC,iEAAoG;AACpG,kEAAiG;AACjG,uEAAiE;AAEjE,mDAA0D;AAC1D,+DAAsD;AAItD,IAAa,mBAAmB,GAAhC,MAAa,mBAAmB;IAI9B,iBAAiB,CAAC,QAA2B;QAC3C,QAAQ,CAAC,QAAQ,CACf,wBAAwB,EACxB;YACE,EAAE,EAAE,cAAc;YAClB,SAAS,EAAE,uCAAuB;SACnC,EACD;YACE,IAAI,EAAE,EAAE;SACT,CACF,CAAC;QAEF,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,kBAAkB,EAAE;YACtC,QAAQ,CAAC,QAAQ,CAAC,8BAA8B,EAAE;gBAChD,EAAE,EAAE,oBAAoB;gBACxB,SAAS,EAAE,mCAAa;aACzB,CAAC,CAAC;SACJ;IACH,CAAC;IAED,sBAAsB,CAAC,QAA0B;QAC/C,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,kBAAkB,EAAE;YACtC,QAAQ,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;YACnC,QAAQ,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;SACnC;IACH,CAAC;CACF,CAAA;AA5BC;IADC,IAAA,cAAS,EAAC,4BAAS,CAAC;;sDACiB;AAF3B,mBAAmB;IAD/B,IAAA,kBAAM,EAAC,8BAAqB,EAAE,4CAAyB,CAAC;GAC5C,mBAAmB,CA8B/B;AA9BY,kDAAmB"}
+{"version":3,"file":"menu-bar.contribution.js","sourceRoot":"","sources":["../../src/browser/menu-bar.contribution.ts"],"names":[],"mappings":";;;;AAAA,qCAAyC;AACzC,iEAAoG;AACpG,kEAAiG;AACjG,uEAAiE;AAEjE,mDAA0D;AAC1D,+DAAsD;AAI/C,IAAM,mBAAmB,GAAzB,MAAM,mBAAmB;IAI9B,iBAAiB,CAAC,QAA2B;QAC3C,QAAQ,CAAC,QAAQ,CACf,wBAAwB,EACxB;YACE,EAAE,EAAE,cAAc;YAClB,SAAS,EAAE,uCAAuB;SACnC,EACD;YACE,IAAI,EAAE,EAAE;SACT,CACF,CAAC;QAEF,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,kBAAkB,EAAE;YACtC,QAAQ,CAAC,QAAQ,CAAC,8BAA8B,EAAE;gBAChD,EAAE,EAAE,oBAAoB;gBACxB,SAAS,EAAE,mCAAa;aACzB,CAAC,CAAC;SACJ;IACH,CAAC;IAED,sBAAsB,CAAC,QAA0B;QAC/C,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,kBAAkB,EAAE;YACtC,QAAQ,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;YACnC,QAAQ,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;SACnC;IACH,CAAC;CACF,CAAA;AA7BC;IAAC,IAAA,cAAS,EAAC,4BAAS,CAAC;;sDACiB;AAF3B,mBAAmB;IAD/B,IAAA,kBAAM,EAAC,8BAAqB,EAAE,4CAAyB,CAAC;GAC5C,mBAAmB,CA8B/B;AA9BY,kDAAmB"}

package/lib/browser/menu-bar.store.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-bar.store.js","sourceRoot":"","sources":["../../src/browser/menu-bar.store.ts"],"names":[],"mappings":";;;;AAAA,uEAAuC;AACvC,+BAA0C;AAE1C,qCAAqD;AACrD,iEAAwD;AACxD,mEAA0G;AAE1G,MAAsB,oBAAqB,SAAQ,6BAAU;CAG5D;AAHD,oDAGC;AAGD,IAAa,YAAY,GAAzB,MAAa,YAAa,SAAQ,6BAAU;IAU1C;QACE,KAAK,EAAE,CAAC;QANH,iBAAY,GAAG,iBAAU,CAAC,KAAK,CAAe,EAAE,CAAC,CAAC;QAGlD,cAAS,GAAG,iBAAU,CAAC,GAAG,EAAsB,CAAC;QAmCjD,uBAAkB,GAA6B,IAAA,kBAAQ,EAC5D,CAAC,MAAc,EAAE,EAAE;YACjB,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;QAC/B,CAAC,EACD,GAAG,EACH,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAClC,CAAC;QApCA,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,cAAc,CAAC,kBAAkB,CAAC,IAAI,CAAC,oBAAoB,EAAE,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;QAChH,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;IAC5G,CAAC;IAGO,eAAe,CAAC,MAAc;QACpC,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;QAC7C,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;QACjE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACxC,CAAC;IAEO,KAAK;QACX,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,EAAE,CAAC;QAC3D,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,GAAG,YAAY,CAAC,CAAC;QACvE,YAAY,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;YACtC,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;QAC/B,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,iBAAiB,CAAC,MAAc;QACtC,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,CAAC;IAEO,oBAAoB;QAC1B,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,EAAE,CAAC;QAC3D,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;IAC1C,CAAC;CAUF,CAAA;AAhDC;IADC,IAAA,cAAS,EAAC,6BAAsB,CAAC;sCACD,6BAAsB;oDAAC;AAGxD;IADC,iBAAU;;kDAC8C;AAGzD;IADC,iBAAU;;+CAC6C;AAWxD;IADC,aAAM,CAAC,KAAK;;;;mDAKZ;AAoBD;IADC,aAAM,CAAC,KAAK;;wDAOX;AAjDS,YAAY;IADxB,IAAA,eAAU,GAAE;;GACA,YAAY,CAkDxB;AAlDY,oCAAY"}
+{"version":3,"file":"menu-bar.store.js","sourceRoot":"","sources":["../../src/browser/menu-bar.store.ts"],"names":[],"mappings":";;;;AAAA,uEAAuC;AACvC,+BAA0C;AAE1C,qCAAqD;AACrD,iEAAwD;AACxD,mEAA0G;AAE1G,MAAsB,oBAAqB,SAAQ,6BAAU;CAG5D;AAHD,oDAGC;AAGM,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,6BAAU;IAU1C;QACE,KAAK,EAAE,CAAC;QANH,iBAAY,GAAG,iBAAU,CAAC,KAAK,CAAe,EAAE,CAAC,CAAC;QAGlD,cAAS,GAAG,iBAAU,CAAC,GAAG,EAAsB,CAAC;QAmCjD,uBAAkB,GAA6B,IAAA,kBAAQ,EAC5D,CAAC,MAAc,EAAE,EAAE;YACjB,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;QAC/B,CAAC,EACD,GAAG,EACH,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAClC,CAAC;QApCA,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,cAAc,CAAC,kBAAkB,CAAC,IAAI,CAAC,oBAAoB,EAAE,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;QAChH,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;IAC5G,CAAC;IAGO,eAAe,CAAC,MAAc;QACpC,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;QAC7C,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;QACjE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACxC,CAAC;IAEO,KAAK;QACX,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,EAAE,CAAC;QAC3D,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,GAAG,YAAY,CAAC,CAAC;QACvE,YAAY,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;YACtC,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;QAC/B,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,iBAAiB,CAAC,MAAc;QACtC,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,CAAC;IAEO,oBAAoB;QAC1B,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,EAAE,CAAC;QAC3D,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;IAC1C,CAAC;CAUF,CAAA;AAjDC;IAAC,IAAA,cAAS,EAAC,6BAAsB,CAAC;sCACD,6BAAsB;oDAAC;AAExD;IAAC,iBAAU;;kDAC8C;AAEzD;IAAC,iBAAU;;+CAC6C;AAUxD;IAAC,aAAM,CAAC,KAAK;;;;mDAKZ;AAmBD;IAAC,aAAM,CAAC,KAAK;;wDAOX;AAjDS,YAAY;IADxB,IAAA,eAAU,GAAE;;GACA,YAAY,CAkDxB;AAlDY,oCAAY"}

package/lib/browser/menu-bar.view.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export declare const MenuBar: React.FunctionComponent<object>;
-declare type MenuBarMixToolbarActionProps = Pick<React.HTMLProps<HTMLElement>, 'className'>;
+type MenuBarMixToolbarActionProps = Pick<React.HTMLProps<HTMLElement>, 'className'>;
 export declare const MenuBarMixToolbarAction: React.FC<MenuBarMixToolbarActionProps>;
 export declare const MenuBarActionWrapper: (props: MenuBarMixToolbarActionProps) => React.FunctionComponentElement<MenuBarMixToolbarActionProps>;
 export {};

package/lib/browser/menu-bar.view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-bar.view.d.ts","sourceRoot":"","sources":["../../src/browser/menu-bar.view.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AA8E1B,eAAO,MAAM,OAAO,iCAgClB,CAAC;AAIH,aAAK,4BAA4B,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,WAAW,CAAC,CAAC;AAEpF,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CAK1E,CAAC;AAIF,eAAO,MAAM,oBAAoB,uGAA8E,CAAC"}
+{"version":3,"file":"menu-bar.view.d.ts","sourceRoot":"","sources":["../../src/browser/menu-bar.view.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AA8E1B,eAAO,MAAM,OAAO,iCAgClB,CAAC;AAIH,KAAK,4BAA4B,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,WAAW,CAAC,CAAC;AAEpF,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CAK1E,CAAC;AAIF,eAAO,MAAM,oBAAoB,uGAA8E,CAAC"}

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "@opensumi/ide-menu-bar",
-  "version": "2.21.13",
+  "version": "2.22.0",
   "description": "@opensumi/ide-menu-bar",
   "files": [
-    "lib"
+    "lib",
+    "src"
   ],
   "license": "MIT",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
   "scripts": {
-    "prepublishOnly": "npm run build",
+    "prepublishOnly": "yarn run build",
     "build": "tsc --build ../../configs/ts/references/tsconfig.menu-bar.json"
   },
   "repository": {
@@ -17,12 +18,12 @@
     "url": "git@github.com:opensumi/core.git"
   },
   "dependencies": {
-    "@opensumi/ide-core-common": "2.21.13"
+    "@opensumi/ide-core-common": "2.22.0"
   },
   "devDependencies": {
-    "@opensumi/ide-components": "2.21.13",
-    "@opensumi/ide-core-browser": "2.21.13",
-    "@opensumi/ide-dev-tool": "^1.3.1"
+    "@opensumi/ide-components": "2.22.0",
+    "@opensumi/ide-core-browser": "2.22.0",
+    "@opensumi/ide-dev-tool": "1.3.1"
   },
-  "gitHead": "1480afacfef7ef11eae65c5cbbddce416f227fe8"
+  "gitHead": "927717e1c60f9cf5f01622fd51085b318a175eeb"
 }

package/src/browser/index.ts

@@ -0,0 +1,17 @@
+/* istanbul ignore file */
+import { Provider, Injectable } from '@opensumi/di';
+import { BrowserModule } from '@opensumi/ide-core-browser';
+
+import { MenuBarContribution } from './menu-bar.contribution';
+import { AbstractMenubarStore, MenubarStore } from './menu-bar.store';
+
+@Injectable()
+export class MenuBarModule extends BrowserModule {
+  providers: Provider[] = [
+    MenuBarContribution,
+    {
+      token: AbstractMenubarStore,
+      useClass: MenubarStore,
+    },
+  ];
+}

package/src/browser/menu-bar.contribution.ts

@@ -0,0 +1,41 @@
+import { Autowired } from '@opensumi/di';
+import { ToolBarActionContribution, AppConfig, IToolbarRegistry } from '@opensumi/ide-core-browser';
+import { ComponentContribution, ComponentRegistry } from '@opensumi/ide-core-browser/lib/layout';
+import { Domain } from '@opensumi/ide-core-common/lib/di-helper';
+
+import { MenuBarMixToolbarAction } from './menu-bar.view';
+import { ToolbarAction } from './toolbar-action.view';
+
+
+@Domain(ComponentContribution, ToolBarActionContribution)
+export class MenuBarContribution implements ComponentContribution, ToolBarActionContribution {
+  @Autowired(AppConfig)
+  private readonly appConfig: AppConfig;
+
+  registerComponent(registry: ComponentRegistry) {
+    registry.register(
+      '@opensumi/ide-menu-bar',
+      {
+        id: 'ide-menu-bar',
+        component: MenuBarMixToolbarAction,
+      },
+      {
+        size: 27,
+      },
+    );
+
+    if (!this.appConfig.isElectronRenderer) {
+      registry.register('@opensumi/ide-toolbar-action', {
+        id: 'ide-toolbar-action',
+        component: ToolbarAction,
+      });
+    }
+  }
+
+  registerToolbarActions(registry: IToolbarRegistry) {
+    if (!this.appConfig.isElectronRenderer) {
+      registry.addLocation('menu-right');
+      registry.addLocation('menu-left');
+    }
+  }
+}

package/src/browser/menu-bar.module.less

@@ -0,0 +1,48 @@
+@import '~@opensumi/ide-core-browser/lib/style/variable.less';
+
+.menubarWrapper {
+  display: flex;
+  background-color: var(--kt-menubar-background);
+  z-index: 1;
+  position: relative;
+  user-select: none;
+}
+
+.logoIconEmpty {
+  padding-left: 10px;
+}
+
+.menubars {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  flex-grow: 1;
+  flex-shrink: 0;
+}
+
+.menubar {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 12px;
+  color: var(--kt-menubar-foreground);
+  user-select: none;
+
+  // 目前尚未开启使用 kt.menubar.separatorBackground
+
+  &.menu-open,
+  &:hover {
+    color: var(--menubar-selectionForeground);
+    background-color: var(--menubar-selectionBackground);
+    border-left: 1px solid var(--menubar-selectionBorder);
+    border-right: 1px solid var(--menubar-selectionBorder);
+    cursor: default;
+  }
+
+  &-drop {
+    position: absolute;
+    left: 0;
+    top: 100%;
+  }
+}

package/src/browser/menu-bar.store.ts

@@ -0,0 +1,64 @@
+import debounce from 'lodash/debounce';
+import { observable, action } from 'mobx';
+
+import { Injectable, Autowired } from '@opensumi/di';
+import { Disposable } from '@opensumi/ide-core-browser';
+import { AbstractMenubarService, IMenubarItem, MenuNode } from '@opensumi/ide-core-browser/lib/menu/next';
+
+export abstract class AbstractMenubarStore extends Disposable {
+  menubarItems: IMenubarItem[];
+  abstract handleMenubarClick(menuId: string): void;
+}
+
+@Injectable()
+export class MenubarStore extends Disposable implements AbstractMenubarStore {
+  @Autowired(AbstractMenubarService)
+  private readonly menubarService: AbstractMenubarService;
+
+  @observable
+  public menubarItems = observable.array<IMenubarItem>([]);
+
+  @observable
+  public menuItems = observable.map<string, MenuNode[]>();
+
+  constructor() {
+    super();
+
+    this.build();
+    this.registerDispose(this.menubarService.onDidMenubarChange(this.handleMenubarChanged, this, this.disposables));
+    this.registerDispose(this.menubarService.onDidMenuChange(this.handleMenuChanged, this, this.disposables));
+  }
+
+  @action.bound
+  private updateMenuNodes(menuId: string) {
+    this.menubarService.rebuildMenuNodes(menuId);
+    const menuItems = this.menubarService.getMenuNodes(menuId) || [];
+    this.menuItems.set(menuId, menuItems);
+  }
+
+  private build() {
+    const menubarItems = this.menubarService.getMenubarItems();
+    this.menubarItems.splice(0, this.menubarItems.length, ...menubarItems);
+    menubarItems.forEach(({ id: menuId }) => {
+      this.updateMenuNodes(menuId);
+    });
+  }
+
+  private handleMenuChanged(menuId: string) {
+    this.updateMenuNodes(menuId);
+  }
+
+  private handleMenubarChanged() {
+    const menubarItems = this.menubarService.getMenubarItems();
+    this.menubarItems.replace(menubarItems);
+  }
+
+  @action.bound
+  public handleMenubarClick: (menuId: string) => void = debounce(
+    (menuId: string) => {
+      this.updateMenuNodes(menuId);
+    },
+    500,
+    { leading: true, trailing: true },
+  );
+}

package/src/browser/menu-bar.view.tsx

@@ -0,0 +1,128 @@
+import clx from 'classnames';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+
+import { ClickOutside } from '@opensumi/ide-components';
+import { Dropdown } from '@opensumi/ide-components/lib/dropdown';
+import { Deprecated } from '@opensumi/ide-components/lib/utils/deprecated';
+import { useInjectable, SlotRenderer, ComponentRegistry } from '@opensumi/ide-core-browser';
+import { MenuActionList } from '@opensumi/ide-core-browser/lib/components/actions';
+import { LAYOUT_VIEW_SIZE } from '@opensumi/ide-core-browser/lib/layout/constants';
+import { IMenubarItem } from '@opensumi/ide-core-browser/lib/menu/next';
+
+import styles from './menu-bar.module.less';
+import { MenubarStore } from './menu-bar.store';
+
+const MenubarItem = observer<
+  IMenubarItem & {
+    focusMode: boolean;
+    afterMenuClick: () => void;
+    afterMenubarClick: () => void;
+  }
+>(({ id, label, focusMode, afterMenubarClick, afterMenuClick }) => {
+  const menubarStore = useInjectable<MenubarStore>(MenubarStore);
+  const [menuOpen, setMenuOpen] = React.useState<boolean>(false);
+
+  const handleMenubarItemClick = React.useCallback(() => {
+    menubarStore.handleMenubarClick(id);
+    if (focusMode) {
+      setMenuOpen(true);
+    } else {
+      setMenuOpen((r) => !r);
+    }
+    afterMenubarClick();
+  }, [id]);
+
+  const handleMenuItemClick = () => {
+    setMenuOpen(false);
+    afterMenuClick();
+  };
+
+  const handleMouseOver = React.useCallback(() => {
+    // 只有 focus mode 下才会 hover 时重新生成数据
+    if (focusMode) {
+      menubarStore.handleMenubarClick(id);
+    }
+  }, [id, focusMode]);
+
+  const triggerMenuVisibleChange = (visible: boolean) => {
+    setMenuOpen(visible);
+  };
+
+  const data = menubarStore.menuItems.get(id) || [];
+
+  return (
+    <Dropdown
+      className={'kt-menu'}
+      transitionName=''
+      align={{
+        offset: [0, 0],
+      }}
+      visible={menuOpen}
+      onVisibleChange={triggerMenuVisibleChange}
+      overlay={<MenuActionList data={data} afterClick={handleMenuItemClick} />}
+      trigger={focusMode ? ['click', 'hover'] : ['click']}
+    >
+      <div
+        className={clx(styles.menubar, { [styles['menu-open']]: menuOpen })}
+        onMouseOver={handleMouseOver}
+        onClick={handleMenubarItemClick}
+      >
+        {label}
+      </div>
+    </Dropdown>
+  );
+});
+
+// 点击一次后开启 focus mode, 此时 hover 也能出现子菜单
+// outside click/contextmenu 之后解除 focus mode
+// 点击 MenubarItem 也会解除 focus mode
+// 点击 MenuItem 也会解除 focus mode
+export const MenuBar = observer(() => {
+  const menubarStore = useInjectable<MenubarStore>(MenubarStore);
+  const componentRegistry: ComponentRegistry = useInjectable(ComponentRegistry);
+  const [focusMode, setFocusMode] = React.useState(false);
+
+  const handleMouseLeave = React.useCallback(() => {
+    // 只有 focus 为 true 的时候, mouse leave 才会将其置为 false
+    setFocusMode(false);
+  }, [focusMode]);
+
+  const LogoIcon = componentRegistry.getComponentRegistryInfo('@opensumi/ide-menu-bar-logo')?.views[0].component;
+
+  return (
+    <ClickOutside
+      className={styles.menubars}
+      style={{ height: LAYOUT_VIEW_SIZE.MENUBAR_HEIGHT }}
+      mouseEvents={['click', 'contextmenu']}
+      onOutsideClick={handleMouseLeave}
+    >
+      {LogoIcon ? <LogoIcon /> : <div className={styles.logoIconEmpty}></div>}
+      {menubarStore.menubarItems.map(({ id, label }) => (
+        <MenubarItem
+          key={id}
+          id={id}
+          label={label}
+          focusMode={focusMode}
+          afterMenuClick={() => setFocusMode(false)}
+          afterMenubarClick={() => setFocusMode((r) => !r)}
+        />
+      ))}
+    </ClickOutside>
+  );
+});
+
+MenuBar.displayName = 'MenuBar';
+
+type MenuBarMixToolbarActionProps = Pick<React.HTMLProps<HTMLElement>, 'className'>;
+
+export const MenuBarMixToolbarAction: React.FC<MenuBarMixToolbarActionProps> = (props) => (
+  <div className={clx(styles.menubarWrapper, props.className)}>
+    <MenuBar />
+    <SlotRenderer slot='action' flex={1} overflow={'initial'} />
+  </div>
+);
+
+MenuBarMixToolbarAction.displayName = 'MenuBarMixToolbarAction';
+
+export const MenuBarActionWrapper = Deprecated(MenuBarMixToolbarAction, 'please use `MenuBarMixToolbarAction`');

package/src/browser/toolbar-action.module.less

@@ -0,0 +1,25 @@
+/*
+@deprecated
+*/
+.toolbarActionsWrapper {
+  display: flex;
+  justify-content: space-between;
+  .toolbarActions {
+    &.toolbarActionsLeft {
+      flex-shrink: 0;
+    }
+    &.toolbarActionsRight {
+      flex-grow: 1;
+    }
+    padding: 0 10px;
+    height: 27px;
+    background-color: var(--kt-menubar-background);
+
+    :global(.kt-toolbar-location-visible) {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      height: 100%;
+    }
+  }
+}

package/src/browser/toolbar-action.view.tsx

@@ -0,0 +1,45 @@
+import classnames from 'classnames';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+
+import { ToolbarLocation } from '@opensumi/ide-core-browser';
+
+import styles from './toolbar-action.module.less';
+
+
+// const ActionGroup = observer(({ group, id }: { group: IToolbarActionGroup; id: string }) => {
+//   return (<div className={styles.actionGroup} key={id}>
+//     {group.map((action) => {
+//       switch (action.type) {
+//         case 'action':
+//           return (
+//             <Tooltip title={action.title}>
+//               <Button key={`${id}-${action.title}`} onClick={action.click} className={styles.action} type='icon' iconClass={action.iconClass} />
+//             </Tooltip>);
+//         case 'enum':
+//           return (<Select
+//             key={`${id}-${action.title}`}
+//             onChange={action.select}
+//             className={styles.action}
+//             size='small'
+//             style={{ width: 110 }}
+//             value={action.defaultValue || action.title}
+//             options={action.enum.map((option) => <Option key={option} label={option} value={option}>{option}</Option>)}
+//             />);
+//         default:
+//           console.warn(`Unknow Action type called: ${id}`);
+//       }
+//   })}
+//   </div>);
+// });
+
+export const ToolbarAction = observer(() => (
+  <div className={styles.toolbarActionsWrapper}>
+    <ToolbarLocation
+      location='menu-left'
+      preferences={{ noDropDown: true }}
+      className={classnames(styles.toolbarActions, styles.toolbarActionsLeft)}
+    />
+    <ToolbarLocation location='menu-right' className={classnames(styles.toolbarActions, styles.toolbarActionsRight)} />
+  </div>
+));

package/src/index.ts

@@ -0,0 +1 @@
+export * from './browser';