Make IOverflowMenuOptions.title optional

packages/widgets/src/menubar.ts

@@ -50,8 +50,7 @@ export class MenuBar extends Widget {
       forceY: true
     };
     this._overflowMenuOptions = options.overflowMenuOptions || {
-      overflowMenuVisible: true,
-      title: '...'
+      isVisible: true
     };
   }
 
@@ -434,7 +433,7 @@ export class MenuBar extends Widget {
         : 0;
     let length = this._overflowIndex > -1 ? this._overflowIndex : menus.length;
     let totalMenuSize = 0;
-    let overflowMenuVisible = false;
+    let isVisible = false;
 
     // Check that the overflow menu doesn't count
     length = this._overflowMenu !== null ? length - 1 : length;
@@ -454,17 +453,18 @@ export class MenuBar extends Widget {
       totalMenuSize += this._menuItemSizes[i];
       // Check if overflow menu is already rendered
       if (menus[i].title.label === this._overflowMenuOptions.title) {
-        overflowMenuVisible = true;
+        isVisible = true;
         length--;
       }
     }
     // Render overflow menu if needed and active
-    if (this._overflowMenuOptions.overflowMenuVisible) {
-      if (this._overflowIndex > -1 && !overflowMenuVisible) {
+    if (this._overflowMenuOptions.isVisible) {
+      if (this._overflowIndex > -1 && !isVisible) {
         // Create overflow menu
         if (this._overflowMenu === null) {
+          const overflowMenuTitle = this._overflowMenuOptions.title ?? '...';
           this._overflowMenu = new Menu({ commands: new CommandRegistry() });
-          this._overflowMenu.title.label = this._overflowMenuOptions.title;
+          this._overflowMenu.title.label = overflowMenuTitle;
           this._overflowMenu.title.mnemonic = 0;
           this.addMenu(this._overflowMenu, false);
         }
@@ -525,6 +525,10 @@ export class MenuBar extends Widget {
    * Calculate and update the current overflow index.
    */
   private _updateOverflowIndex(): void {
+    if (!this._overflowMenuOptions.isVisible) {
+      return;
+    }
+
     // Get elements visible in the main menu bar
     const itemMenus = this.contentNode.childNodes;
     let screenSize = this.node.offsetWidth;
@@ -1110,14 +1114,16 @@ export namespace MenuBar {
 export interface IOverflowMenuOptions {
   /**
    * Determines if a overflow menu appears when the menu items overflow.
+   *
+   * Defaults to `true`.
    */
-  overflowMenuVisible: boolean;
+  isVisible: boolean;
   /**
    * Determines the title of the overflow menu.
    *
    * Default: `...`.
    */
-  title: string;
+  title?: string;
 }
 
 /**

packages/widgets/tests/src/menubar.spec.ts

@@ -57,8 +57,8 @@ describe('@lumino/widgets', () => {
 
   let commands: CommandRegistry;
 
-  function createMenuBar(): MenuBar {
-    let bar = new MenuBar();
+  function createMenuBar(options?: MenuBar.IOptions): MenuBar {
+    let bar = new MenuBar(options);
     for (let i = 0; i < 3; i++) {
       let menu = new Menu({ commands });
       let item = menu.addItem({ command: DEFAULT_CMD });
@@ -132,6 +132,16 @@ describe('@lumino/widgets', () => {
         bar.dispose();
       });
 
+      it('should accept only isVisible option', () => {
+        const bar = new MenuBar({
+          overflowMenuOptions: { isVisible: false }
+        });
+
+        expect(bar).to.be.an.instanceOf(MenuBar);
+
+        bar.dispose();
+      });
+
       it('should add the `lm-MenuBar` class', () => {
         let bar = new MenuBar();
         expect(bar.hasClass('lm-MenuBar')).to.equal(true);
@@ -876,19 +886,16 @@ describe('@lumino/widgets', () => {
     });
 
     describe('#onUpdateRequest()', () => {
-      it('should be called when the title of a menu changes', done => {
+      it('should be called when the title of a menu changes', () => {
         let bar = new LogMenuBar();
         let menu = new Menu({ commands });
         bar.addMenu(menu);
         bar.activeIndex = 0;
-        expect(bar.methods.indexOf('onUpdateRequest')).to.equal(-1);
+        expect(bar.methods).to.not.include('onUpdateRequest');
         menu.title.label = 'foo';
-        expect(bar.methods.indexOf('onUpdateRequest')).to.equal(-1);
-        requestAnimationFrame(() => {
-          expect(bar.methods.indexOf('onUpdateRequest')).to.not.equal(-1);
-          bar.dispose();
-          done();
-        });
+        MessageLoop.flush();
+        expect(bar.methods).to.include('onUpdateRequest');
+        bar.dispose();
       });
 
       it('should render the content', () => {
@@ -908,11 +915,10 @@ describe('@lumino/widgets', () => {
         expect(bar.overflowMenu).to.equal(null);
         bar.node.style.maxWidth = '70px';
         MessageLoop.sendMessage(bar, Widget.Msg.UpdateRequest);
-        requestAnimationFrame(() => {
-          expect(bar.overflowMenu).to.not.equal(null);
-          expect(bar.overflowIndex).to.not.equal(-1);
-          bar.dispose();
-        });
+        MessageLoop.flush();
+        expect(bar.overflowMenu).to.not.equal(null);
+        expect(bar.overflowIndex).to.not.equal(-1);
+        bar.dispose();
       });
 
       it('should hide the overflow menu', () => {
@@ -923,11 +929,24 @@ describe('@lumino/widgets', () => {
         MessageLoop.sendMessage(bar, Widget.Msg.UpdateRequest);
         bar.node.style.maxWidth = '400px';
         MessageLoop.sendMessage(bar, Widget.Msg.UpdateRequest);
-        requestAnimationFrame(() => {
-          expect(bar.overflowMenu).to.equal(null);
-          expect(bar.overflowIndex).to.equal(-1);
-          bar.dispose();
+        MessageLoop.flush();
+        expect(bar.overflowMenu).to.equal(null);
+        expect(bar.overflowIndex).to.equal(-1);
+        bar.dispose();
+      });
+
+      it('should not use the overflow menu', () => {
+        let bar = createMenuBar({
+          overflowMenuOptions: { isVisible: false }
         });
+        expect(bar.overflowIndex).to.equal(-1);
+        expect(bar.overflowMenu).to.equal(null);
+        bar.node.style.maxWidth = '70px';
+        MessageLoop.sendMessage(bar, Widget.Msg.UpdateRequest);
+        MessageLoop.flush();
+        expect(bar.overflowIndex).to.equal(-1);
+        expect(bar.overflowMenu).to.equal(null);
+        bar.dispose();
       });
     });