feat(cdk-experimental/menu): add support for inline menus (#20143)

Add the ability to place a menu inline (always visible and not trigered) which is typically used as
a navigation menu.

Author: andy9775

src/cdk-experimental/menu/menu-errors.ts

@@ -122,7 +122,13 @@ export class MenuStack {
   }
 
   /** Get the top most element on the stack. */
-  peek() {
+  peek(): MenuStackItem | undefined {
     return this._elements[this._elements.length - 1];
   }
 }
+
+/** NoopMenuStack is a placeholder MenuStack used for inline menus. */
+export class NoopMenuStack extends MenuStack {
+  /** Noop push - does not add elements to the MenuStack. */
+  push(_: MenuStackItem) {}
+}

src/cdk-experimental/menu/menu-stack.ts

@@ -1,5 +1,7 @@
 import {ComponentFixture, TestBed, async} from '@angular/core/testing';
 import {Component, ViewChild} from '@angular/core';
+import {TAB} from '@angular/cdk/keycodes';
+import {dispatchKeyboardEvent} from '@angular/cdk/testing/private';
 import {By} from '@angular/platform-browser';
 import {CdkMenu} from './menu';
 import {CdkMenuModule} from './menu-module';
@@ -158,6 +160,41 @@ describe('Menu', () => {
       expect(spy).withContext('Expected initial trigger only').toHaveBeenCalledTimes(1);
     });
   });
+
+  describe('when configured inline', () => {
+    let fixture: ComponentFixture<InlineMenu>;
+    let nativeMenu: HTMLElement;
+    let nativeMenuItems: HTMLElement[];
+
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        imports: [CdkMenuModule],
+        declarations: [InlineMenu],
+      }).compileComponents();
+    }));
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(InlineMenu);
+      fixture.detectChanges();
+
+      nativeMenu = fixture.debugElement.query(By.directive(CdkMenu)).nativeElement;
+      nativeMenuItems = fixture.debugElement
+        .queryAll(By.directive(CdkMenuItem))
+        .map(e => e.nativeElement);
+    });
+
+    it('should have its tabindex set to 0', () => {
+      const item = fixture.debugElement.query(By.directive(CdkMenu)).nativeElement;
+      expect(item.getAttribute('tabindex')).toBe('0');
+    });
+
+    it('should focus the first menu item when it gets tabbed in', () => {
+      dispatchKeyboardEvent(document, 'keydown', TAB);
+      nativeMenu.focus();
+
+      expect(document.querySelector(':focus')).toEqual(nativeMenuItems[0]);
+    });
+  });
 });
 
 @Component({
@@ -229,3 +266,13 @@ class MenuWithConditionalGroup {
   @ViewChild(CdkMenuItem) readonly trigger: CdkMenuItem;
   @ViewChild(CdkMenuPanel) readonly panel: CdkMenuPanel;
 }
+
+@Component({
+  template: `
+    <div cdkMenu>
+      <button cdkMenuItem>Inbox</button>
+      <button cdkMenuItem>Starred</button>
+    </div>
+  `,
+})
+class InlineMenu {}

src/cdk-experimental/menu/menu.spec.ts

@@ -36,9 +36,8 @@ import {merge, Observable} from 'rxjs';
 import {CdkMenuGroup} from './menu-group';
 import {CdkMenuPanel} from './menu-panel';
 import {Menu, CDK_MENU} from './menu-interface';
-import {throwMissingMenuPanelError} from './menu-errors';
 import {CdkMenuItem} from './menu-item';
-import {MenuStack, MenuStackItem, FocusNext} from './menu-stack';
+import {MenuStack, MenuStackItem, FocusNext, NoopMenuStack} from './menu-stack';
 import {getItemPointerEntries} from './item-pointer-entries';
 
 /**
@@ -52,6 +51,7 @@ import {getItemPointerEntries} from './item-pointer-entries';
   selector: '[cdkMenu]',
   exportAs: 'cdkMenu',
   host: {
+    '[tabindex]': '_isInline() ? 0 : null',
     'role': 'menu',
     'class': 'cdk-menu',
     '[attr.aria-orientation]': 'orientation',
@@ -71,8 +71,11 @@ export class CdkMenu extends CdkMenuGroup implements Menu, AfterContentInit, OnI
   /** Event emitted when the menu is closed. */
   @Output() readonly closed: EventEmitter<void | 'click' | 'tab' | 'escape'> = new EventEmitter();
 
+  // We provide a default MenuStack implementation in case the menu is an inline menu.
+  // For Menus part of a MenuBar nested within a MenuPanel this will be overwritten
+  // to the correct parent MenuStack.
   /** Track the Menus making up the open menu stack. */
-  _menuStack: MenuStack;
+  _menuStack: MenuStack = new NoopMenuStack();
 
   /** Handles keyboard events for the menu. */
   private _keyManager: FocusKeyManager<CdkMenuItem>;
@@ -124,6 +127,11 @@ export class CdkMenu extends CdkMenuGroup implements Menu, AfterContentInit, OnI
     this._subscribeToMouseManager();
   }
 
+  // In Ivy the `host` metadata will be merged, whereas in ViewEngine it is overridden. In order
+  // to avoid double event listeners, we need to use `HostListener`. Once Ivy is the default, we
+  // can move this back into `host`.
+  // tslint:disable:no-host-decorator-in-concrete
+  @HostListener('focus')
   /** Place focus on the first MenuItem in the menu and set the focus origin. */
   focusFirstItem(focusOrigin: FocusOrigin = 'program') {
     this._keyManager.setFocusOrigin(focusOrigin);
@@ -181,12 +189,7 @@ export class CdkMenu extends CdkMenuGroup implements Menu, AfterContentInit, OnI
 
   /** Register this menu with its enclosing parent menu panel */
   private _registerWithParentPanel() {
-    const parent = this._getMenuPanel();
-    if (parent) {
-      parent._registerMenu(this);
-    } else {
-      throwMissingMenuPanelError();
-    }
+    this._getMenuPanel()?._registerMenu(this);
   }
 
   /**
@@ -323,6 +326,16 @@ export class CdkMenu extends CdkMenuGroup implements Menu, AfterContentInit, OnI
     return this.orientation === 'horizontal';
   }
 
+  /**
+   * Return true if this menu is an inline menu. That is, it does not exist in a pop-up and is
+   * always visible in the dom.
+   */
+  _isInline() {
+    // NoopMenuStack is the default. If this menu is not inline than the NoopMenuStack is replaced
+    // automatically.
+    return this._menuStack instanceof NoopMenuStack;
+  }
+
   ngOnDestroy() {
     this._emitClosedEvent();
   }

src/cdk-experimental/menu/menu.ts

@@ -17,5 +17,5 @@ export * from './menu-panel';
 export * from './menu-group';
 export * from './context-menu';
 
-export * from './menu-stack';
+export {MenuStack, MenuStackItem} from './menu-stack';
 export {CDK_MENU} from './menu-interface';