@angular/cdk-experimental 14.0.0-next.8 → 14.0.0-next.9

package/fesm2015/menu.mjs

@@ -1,16 +1,16 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Directive, Injector, Inject, EventEmitter, Optional, SkipSelf, Input, Output, Self, ContentChildren, NgModule } from '@angular/core';
+import { InjectionToken, Optional, SkipSelf, Inject, Injectable, Directive, EventEmitter, Injector, Self, Input, Output, ContentChildren, NgModule } from '@angular/core';
 import * as i1 from '@angular/cdk/overlay';
 import { OverlayConfig, STANDARD_DROPDOWN_BELOW_POSITIONS, STANDARD_DROPDOWN_ADJACENT_POSITIONS, OverlayModule } from '@angular/cdk/overlay';
-import { FocusKeyManager } from '@angular/cdk/a11y';
 import { UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE, TAB, ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
-import { Subject, fromEvent, merge, defer, partition } from 'rxjs';
-import { filter, takeUntil, startWith, mergeMap, mapTo, mergeAll, take, switchMap, skip } from 'rxjs/operators';
+import { filter, takeUntil, startWith, mergeMap, mapTo, mergeAll, switchMap, take, skip } from 'rxjs/operators';
 import * as i1$2 from '@angular/cdk/collections';
 import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { Subject, fromEvent, merge, defer, partition } from 'rxjs';
 import * as i1$1 from '@angular/cdk/bidi';
 import { TemplatePortal } from '@angular/cdk/portal';
+import { FocusKeyManager } from '@angular/cdk/a11y';
 
 /**
  * @license
@@ -31,6 +31,18 @@ const CDK_MENU = new InjectionToken('cdk-menu');
  */
 /** Injection token used for an implementation of MenuStack. */
 const MENU_STACK = new InjectionToken('cdk-menu-stack');
+/** A provider that provides the parent menu stack, or a new menu stack if there is no parent one. */
+const PARENT_OR_NEW_MENU_STACK_PROVIDER = {
+    provide: MENU_STACK,
+    deps: [[new Optional(), new SkipSelf(), new Inject(MENU_STACK)]],
+    useFactory: (parentMenuStack) => parentMenuStack || new MenuStack(),
+};
+/** A provider that provides the parent menu stack, or a new menu stack if there is no parent one. */
+const PARENT_OR_NEW_INLINE_MENU_STACK_PROVIDER = {
+    provide: MENU_STACK,
+    deps: [[new Optional(), new SkipSelf(), new Inject(MENU_STACK)]],
+    useFactory: (parentMenuStack) => parentMenuStack || MenuStack.inline(),
+};
 /**
  * MenuStack allows subscribers to listen for close events (when a MenuStackItem is popped off
  * of the stack) in order to perform closing actions. Upon the MenuStack being empty it emits
@@ -53,6 +65,12 @@ class MenuStack {
          * perform.
          */
         this.emptied = this._empty;
+        this._hasInlineMenu = false;
+    }
+    static inline() {
+        const stack = new MenuStack();
+        stack._hasInlineMenu = true;
+        return stack;
     }
     /** @param menu the MenuStackItem to put on the stack. */
     push(menu) {
@@ -122,10 +140,13 @@ class MenuStack {
     peek() {
         return this._elements[this._elements.length - 1];
     }
+    hasInlineMenu() {
+        return this._hasInlineMenu;
+    }
 }
-MenuStack.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: MenuStack, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-MenuStack.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: MenuStack });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: MenuStack, decorators: [{
+MenuStack.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: MenuStack, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+MenuStack.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: MenuStack });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: MenuStack, decorators: [{
             type: Injectable
         }] });
 
@@ -322,9 +343,9 @@ class TargetMenuAim {
         this._destroyed.complete();
     }
 }
-TargetMenuAim.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: TargetMenuAim, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-TargetMenuAim.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: TargetMenuAim });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: TargetMenuAim, decorators: [{
+TargetMenuAim.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: TargetMenuAim, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+TargetMenuAim.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: TargetMenuAim });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: TargetMenuAim, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
 /**
@@ -333,9 +354,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6",
  */
 class CdkTargetMenuAim {
 }
-CdkTargetMenuAim.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkTargetMenuAim, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-CdkTargetMenuAim.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.6", type: CdkTargetMenuAim, selector: "[cdkTargetMenuAim]", providers: [{ provide: MENU_AIM, useClass: TargetMenuAim }], exportAs: ["cdkTargetMenuAim"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkTargetMenuAim, decorators: [{
+CdkTargetMenuAim.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkTargetMenuAim, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+CdkTargetMenuAim.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.9", type: CdkTargetMenuAim, selector: "[cdkTargetMenuAim]", providers: [{ provide: MENU_AIM, useClass: TargetMenuAim }], exportAs: ["cdkTargetMenuAim"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkTargetMenuAim, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cdkTargetMenuAim]',
@@ -357,6 +378,29 @@ class MenuTrigger {
     constructor(injector, menuStack) {
         this.injector = injector;
         this.menuStack = menuStack;
+        /** Emits when the attached menu is requested to open */
+        this.opened = new EventEmitter();
+        /** Emits when the attached menu is requested to close */
+        this.closed = new EventEmitter();
+        /** A reference to the overlay which manages the triggered menu */
+        this._overlayRef = null;
+        /** Emits when this trigger is destroyed. */
+        this._destroyed = new Subject();
+        /** Emits when the outside pointer events listener on the overlay should be stopped. */
+        this._stopOutsideClicksListener = merge(this.closed, this._destroyed);
+    }
+    ngOnDestroy() {
+        this._destroyOverlay();
+        this._destroyed.next();
+        this._destroyed.complete();
+    }
+    /** Whether the attached menu is open. */
+    isOpen() {
+        var _a;
+        return !!((_a = this._overlayRef) === null || _a === void 0 ? void 0 : _a.hasAttached());
+    }
+    registerChildMenu(child) {
+        this.childMenu = child;
     }
     getChildMenuInjector() {
         this._childMenuInjector =
@@ -370,14 +414,18 @@ class MenuTrigger {
                 });
         return this._childMenuInjector;
     }
-    registerChildMenu(child) {
-        this.childMenu = child;
+    /** Destroy and unset the overlay reference it if exists */
+    _destroyOverlay() {
+        if (this._overlayRef) {
+            this._overlayRef.dispose();
+            this._overlayRef = null;
+        }
     }
 }
-MenuTrigger.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: MenuTrigger, deps: [{ token: i0.Injector }, { token: MENU_STACK }], target: i0.ɵɵFactoryTarget.Injectable });
-MenuTrigger.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: MenuTrigger });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: MenuTrigger, decorators: [{
-            type: Injectable
+MenuTrigger.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: MenuTrigger, deps: [{ token: i0.Injector }, { token: MENU_STACK }], target: i0.ɵɵFactoryTarget.Directive });
+MenuTrigger.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.9", type: MenuTrigger, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: MenuTrigger, decorators: [{
+            type: Directive
         }], ctorParameters: function () {
         return [{ type: i0.Injector }, { type: MenuStack, decorators: [{
                         type: Inject,
@@ -426,28 +474,16 @@ class CdkMenuItemTrigger extends MenuTrigger {
         this._parentMenu = _parentMenu;
         this._menuAim = _menuAim;
         this._directionality = _directionality;
-        /** Emits when the attached menu is requested to open */
-        this.opened = new EventEmitter();
-        /** Emits when the attached menu is requested to close */
-        this.closed = new EventEmitter();
-        /** A reference to the overlay which manages the triggered menu */
-        this._overlayRef = null;
-        /** Emits when this trigger is destroyed. */
-        this._destroyed = new Subject();
-        /** Emits when the outside pointer events listener on the overlay should be stopped. */
-        this._stopOutsideClicksListener = merge(this.closed, this._destroyed);
         this._registerCloseHandler();
         this._subscribeToMouseEnter();
     }
     /** Open/close the attached menu if the trigger has been configured with one */
     toggle() {
-        if (this.hasMenu()) {
-            this.isMenuOpen() ? this.closeMenu() : this.openMenu();
-        }
+        this.isOpen() ? this.close() : this.open();
     }
     /** Open the attached menu. */
-    openMenu() {
-        if (!this.isMenuOpen()) {
+    open() {
+        if (!this.isOpen()) {
             this.opened.next();
             this._overlayRef = this._overlayRef || this._overlay.create(this._getOverlayConfig());
             this._overlayRef.attach(this._getPortal());
@@ -455,21 +491,13 @@ class CdkMenuItemTrigger extends MenuTrigger {
         }
     }
     /** Close the opened menu. */
-    closeMenu() {
-        if (this.isMenuOpen()) {
+    close() {
+        if (this.isOpen()) {
             this.closed.next();
             this._overlayRef.detach();
         }
         this._closeSiblingTriggers();
     }
-    /** Return true if the trigger has an attached menu */
-    hasMenu() {
-        return !!this._menuTemplateRef;
-    }
-    /** Whether the menu this button is a trigger for is open */
-    isMenuOpen() {
-        return this._overlayRef ? this._overlayRef.hasAttached() : false;
-    }
     /**
      * Get a reference to the rendered Menu if the Menu is open and it is visible in the DOM.
      * @return the menu if it is open, otherwise undefined.
@@ -485,11 +513,11 @@ class CdkMenuItemTrigger extends MenuTrigger {
         // Closes any sibling menu items and opens the menu associated with this trigger.
         const toggleMenus = () => this._ngZone.run(() => {
             this._closeSiblingTriggers();
-            this.openMenu();
+            this.open();
         });
         this._ngZone.runOutsideAngular(() => {
             fromEvent(this._elementRef.nativeElement, 'mouseenter')
-                .pipe(filter(() => !this.menuStack.isEmpty() && !this.isMenuOpen()), takeUntil(this._destroyed))
+                .pipe(filter(() => !this.menuStack.isEmpty() && !this.isOpen()), takeUntil(this._destroyed))
                 .subscribe(() => {
                 if (this._menuAim) {
                     this._menuAim.toggle(toggleMenus);
@@ -516,34 +544,24 @@ class CdkMenuItemTrigger extends MenuTrigger {
                 (_a = this.childMenu) === null || _a === void 0 ? void 0 : _a.focusFirstItem('keyboard');
                 break;
             case RIGHT_ARROW:
-                if (this._parentMenu && this._isParentVertical()) {
+                if (this._parentMenu && this._isParentVertical() && ((_b = this._directionality) === null || _b === void 0 ? void 0 : _b.value) !== 'rtl') {
                     event.preventDefault();
-                    if (((_b = this._directionality) === null || _b === void 0 ? void 0 : _b.value) === 'rtl') {
-                        this.menuStack.close(this._parentMenu, 2 /* currentItem */);
-                    }
-                    else {
-                        this.openMenu();
-                        (_c = this.childMenu) === null || _c === void 0 ? void 0 : _c.focusFirstItem('keyboard');
-                    }
+                    this.open();
+                    (_c = this.childMenu) === null || _c === void 0 ? void 0 : _c.focusFirstItem('keyboard');
                 }
                 break;
             case LEFT_ARROW:
-                if (this._parentMenu && this._isParentVertical()) {
+                if (this._parentMenu && this._isParentVertical() && ((_d = this._directionality) === null || _d === void 0 ? void 0 : _d.value) === 'rtl') {
                     event.preventDefault();
-                    if (((_d = this._directionality) === null || _d === void 0 ? void 0 : _d.value) === 'rtl') {
-                        this.openMenu();
-                        (_e = this.childMenu) === null || _e === void 0 ? void 0 : _e.focusFirstItem('keyboard');
-                    }
-                    else {
-                        this.menuStack.close(this._parentMenu, 2 /* currentItem */);
-                    }
+                    this.open();
+                    (_e = this.childMenu) === null || _e === void 0 ? void 0 : _e.focusFirstItem('keyboard');
                 }
                 break;
             case DOWN_ARROW:
             case UP_ARROW:
                 if (!this._isParentVertical()) {
                     event.preventDefault();
-                    this.openMenu();
+                    this.open();
                     keyCode === DOWN_ARROW
                         ? (_f = this.childMenu) === null || _f === void 0 ? void 0 : _f.focusFirstItem('keyboard')
                         : (_g = this.childMenu) === null || _g === void 0 ? void 0 : _g.focusLastItem('keyboard');
@@ -616,16 +634,11 @@ class CdkMenuItemTrigger extends MenuTrigger {
         if (!this._parentMenu) {
             this.menuStack.closed.pipe(takeUntil(this._destroyed)).subscribe(item => {
                 if (item === this.childMenu) {
-                    this.closeMenu();
+                    this.close();
                 }
             });
         }
     }
-    ngOnDestroy() {
-        this._destroyOverlay();
-        this._destroyed.next();
-        this._destroyed.complete();
-    }
     /**
      * Subscribe to the overlays outside pointer events stream and handle closing out the stack if a
      * click occurs outside the menus.
@@ -642,42 +655,29 @@ class CdkMenuItemTrigger extends MenuTrigger {
             });
         }
     }
-    /** Destroy and unset the overlay reference it if exists */
-    _destroyOverlay() {
-        if (this._overlayRef) {
-            this._overlayRef.dispose();
-            this._overlayRef = null;
-        }
-    }
 }
-CdkMenuItemTrigger.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuItemTrigger, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1.Overlay }, { token: i0.NgZone }, { token: MENU_STACK }, { token: CDK_MENU, optional: true }, { token: MENU_AIM, optional: true }, { token: i1$1.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-CdkMenuItemTrigger.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.6", type: CdkMenuItemTrigger, selector: "[cdkMenuTriggerFor]", inputs: { _menuTemplateRef: ["cdkMenuTriggerFor", "_menuTemplateRef"], menuPosition: ["cdkMenuPosition", "menuPosition"] }, outputs: { opened: "cdkMenuOpened", closed: "cdkMenuClosed" }, host: { attributes: { "aria-haspopup": "menu" }, listeners: { "keydown": "_toggleOnKeydown($event)", "click": "toggle()" }, properties: { "attr.aria-expanded": "isMenuOpen()" }, classAttribute: "cdk-menu-trigger" }, providers: [
+CdkMenuItemTrigger.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuItemTrigger, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1.Overlay }, { token: i0.NgZone }, { token: MENU_STACK }, { token: CDK_MENU, optional: true }, { token: MENU_AIM, optional: true }, { token: i1$1.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+CdkMenuItemTrigger.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.9", type: CdkMenuItemTrigger, selector: "[cdkMenuTriggerFor]", inputs: { _menuTemplateRef: ["cdkMenuTriggerFor", "_menuTemplateRef"], menuPosition: ["cdkMenuPosition", "menuPosition"] }, outputs: { opened: "cdkMenuOpened", closed: "cdkMenuClosed" }, host: { attributes: { "aria-haspopup": "menu" }, listeners: { "keydown": "_toggleOnKeydown($event)", "click": "toggle()" }, properties: { "attr.aria-expanded": "isOpen()" }, classAttribute: "cdk-menu-trigger" }, providers: [
         { provide: MENU_TRIGGER, useExisting: CdkMenuItemTrigger },
-        {
-            provide: MENU_STACK,
-            deps: [[new Optional(), new SkipSelf(), new Inject(MENU_STACK)]],
-            useFactory: (parentMenuStack) => parentMenuStack || new MenuStack(),
-        },
+        PARENT_OR_NEW_MENU_STACK_PROVIDER,
     ], exportAs: ["cdkMenuTriggerFor"], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuItemTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuItemTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cdkMenuTriggerFor]',
                     exportAs: 'cdkMenuTriggerFor',
                     host: {
-                        '(keydown)': '_toggleOnKeydown($event)',
-                        '(click)': 'toggle()',
                         'class': 'cdk-menu-trigger',
                         'aria-haspopup': 'menu',
-                        '[attr.aria-expanded]': 'isMenuOpen()',
+                        '(keydown)': '_toggleOnKeydown($event)',
+                        '(click)': 'toggle()',
+                        '[attr.aria-expanded]': 'isOpen()',
                     },
+                    inputs: ['_menuTemplateRef: cdkMenuTriggerFor', 'menuPosition: cdkMenuPosition'],
+                    outputs: ['opened: cdkMenuOpened', 'closed: cdkMenuClosed'],
                     providers: [
                         { provide: MENU_TRIGGER, useExisting: CdkMenuItemTrigger },
-                        {
-                            provide: MENU_STACK,
-                            deps: [[new Optional(), new SkipSelf(), new Inject(MENU_STACK)]],
-                            useFactory: (parentMenuStack) => parentMenuStack || new MenuStack(),
-                        },
+                        PARENT_OR_NEW_MENU_STACK_PROVIDER,
                     ],
                 }]
         }], ctorParameters: function () {
@@ -697,19 +697,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6",
                     }] }, { type: i1$1.Directionality, decorators: [{
                         type: Optional
                     }] }];
-    }, propDecorators: { _menuTemplateRef: [{
-                type: Input,
-                args: ['cdkMenuTriggerFor']
-            }], menuPosition: [{
-                type: Input,
-                args: ['cdkMenuPosition']
-            }], opened: [{
-                type: Output,
-                args: ['cdkMenuOpened']
-            }], closed: [{
-                type: Output,
-                args: ['cdkMenuClosed']
-            }] } });
+    } });
 
 /**
  * @license
@@ -776,12 +764,11 @@ class CdkMenuItem {
      * is not in a menu bar.
      */
     _setTabIndex(event) {
-        var _a;
         if (this.disabled) {
             return;
         }
         // don't set the tabindex if there are no open sibling or parent menus
-        if (!event || !((_a = this._menuStack) === null || _a === void 0 ? void 0 : _a.isEmpty())) {
+        if (!event || !this._menuStack.isEmpty()) {
             this._tabindex = 0;
         }
     }
@@ -794,21 +781,19 @@ class CdkMenuItem {
      * on the cdkMenuItemTriggered emitter and close all open menus.
      */
     trigger() {
-        var _a;
         if (!this.disabled && !this.hasMenu()) {
             this.triggered.next();
-            (_a = this._menuStack) === null || _a === void 0 ? void 0 : _a.closeAll();
+            this._menuStack.closeAll();
         }
     }
     /** Whether the menu item opens a menu. */
     hasMenu() {
-        var _a;
-        return !!((_a = this._menuTrigger) === null || _a === void 0 ? void 0 : _a.hasMenu());
+        return !!this._menuTrigger;
     }
     /** Return true if this MenuItem has an attached menu and it is open. */
     isMenuOpen() {
         var _a;
-        return !!((_a = this._menuTrigger) === null || _a === void 0 ? void 0 : _a.isMenuOpen());
+        return !!((_a = this._menuTrigger) === null || _a === void 0 ? void 0 : _a.isOpen());
     }
     /**
      * Get a reference to the rendered Menu if the Menu is open and it is visible in the DOM.
@@ -834,7 +819,7 @@ class CdkMenuItem {
      * @param event the keyboard event to handle
      */
     _onKeydown(event) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b;
         switch (event.keyCode) {
             case SPACE:
             case ENTER:
@@ -842,19 +827,35 @@ class CdkMenuItem {
                 this.trigger();
                 break;
             case RIGHT_ARROW:
-                if (this._parentMenu && this._isParentVertical() && !this.hasMenu()) {
-                    event.preventDefault();
-                    ((_a = this._dir) === null || _a === void 0 ? void 0 : _a.value) === 'rtl'
-                        ? (_b = this._menuStack) === null || _b === void 0 ? void 0 : _b.close(this._parentMenu, 1 /* previousItem */)
-                        : (_c = this._menuStack) === null || _c === void 0 ? void 0 : _c.closeAll(0 /* nextItem */);
+                if (this._parentMenu && this._isParentVertical()) {
+                    if (((_a = this._dir) === null || _a === void 0 ? void 0 : _a.value) === 'rtl') {
+                        if (this._menuStack.hasInlineMenu() || this._menuStack.length() > 1) {
+                            event.preventDefault();
+                            this._menuStack.close(this._parentMenu, 1 /* previousItem */);
+                        }
+                    }
+                    else if (!this.hasMenu()) {
+                        if (this._menuStack.hasInlineMenu()) {
+                            event.preventDefault();
+                            this._menuStack.closeAll(0 /* nextItem */);
+                        }
+                    }
                 }
                 break;
             case LEFT_ARROW:
-                if (this._parentMenu && this._isParentVertical() && !this.hasMenu()) {
-                    event.preventDefault();
-                    ((_d = this._dir) === null || _d === void 0 ? void 0 : _d.value) === 'rtl'
-                        ? (_e = this._menuStack) === null || _e === void 0 ? void 0 : _e.closeAll(0 /* nextItem */)
-                        : (_f = this._menuStack) === null || _f === void 0 ? void 0 : _f.close(this._parentMenu, 1 /* previousItem */);
+                if (this._parentMenu && this._isParentVertical()) {
+                    if (((_b = this._dir) === null || _b === void 0 ? void 0 : _b.value) !== 'rtl') {
+                        if (this._menuStack.hasInlineMenu() || this._menuStack.length() > 1) {
+                            event.preventDefault();
+                            this._menuStack.close(this._parentMenu, 1 /* previousItem */);
+                        }
+                    }
+                    else if (!this.hasMenu()) {
+                        if (this._menuStack.hasInlineMenu()) {
+                            event.preventDefault();
+                            this._menuStack.closeAll(0 /* nextItem */);
+                        }
+                    }
                 }
                 break;
         }
@@ -865,9 +866,9 @@ class CdkMenuItem {
      */
     _setupMouseEnter() {
         if (!this._isStandaloneItem()) {
-            const closeOpenSiblings = () => this._ngZone.run(() => { var _a; return (_a = this._menuStack) === null || _a === void 0 ? void 0 : _a.closeSubMenuOf(this._parentMenu); });
+            const closeOpenSiblings = () => this._ngZone.run(() => this._menuStack.closeSubMenuOf(this._parentMenu));
             this._ngZone.runOutsideAngular(() => fromEvent(this._elementRef.nativeElement, 'mouseenter')
-                .pipe(filter(() => { var _a; return !((_a = this._menuStack) === null || _a === void 0 ? void 0 : _a.isEmpty()) && !this.hasMenu(); }), takeUntil(this._destroyed))
+                .pipe(filter(() => !this._menuStack.isEmpty() && !this.hasMenu()), takeUntil(this._destroyed))
                 .subscribe(() => {
                 if (this._menuAim) {
                     this._menuAim.toggle(closeOpenSiblings);
@@ -890,9 +891,9 @@ class CdkMenuItem {
         this._destroyed.next();
     }
 }
-CdkMenuItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuItem, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: MENU_STACK, optional: true }, { token: CDK_MENU, optional: true }, { token: MENU_AIM, optional: true }, { token: i1$1.Directionality, optional: true }, { token: CdkMenuItemTrigger, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
-CdkMenuItem.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.6", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: { disabled: "disabled", typeahead: "typeahead" }, outputs: { triggered: "cdkMenuItemTriggered" }, host: { attributes: { "type": "button", "role": "menuitem" }, listeners: { "blur": "_resetTabIndex()", "mouseout": "_resetTabIndex()", "focus": "_setTabIndex()", "mouseenter": "_setTabIndex($event)", "click": "trigger()", "keydown": "_onKeydown($event)" }, properties: { "tabindex": "_tabindex", "attr.aria-disabled": "disabled || null" }, classAttribute: "cdk-menu-item" }, exportAs: ["cdkMenuItem"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuItem, decorators: [{
+CdkMenuItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuItem, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: MENU_STACK }, { token: CDK_MENU, optional: true }, { token: MENU_AIM, optional: true }, { token: i1$1.Directionality, optional: true }, { token: CdkMenuItemTrigger, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
+CdkMenuItem.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.9", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: { disabled: "disabled", typeahead: "typeahead" }, outputs: { triggered: "cdkMenuItemTriggered" }, host: { attributes: { "type": "button", "role": "menuitem" }, listeners: { "blur": "_resetTabIndex()", "mouseout": "_resetTabIndex()", "focus": "_setTabIndex()", "mouseenter": "_setTabIndex($event)", "click": "trigger()", "keydown": "_onKeydown($event)" }, properties: { "tabindex": "_tabindex", "attr.aria-disabled": "disabled || null" }, classAttribute: "cdk-menu-item" }, exportAs: ["cdkMenuItem"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuItem, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cdkMenuItem]',
@@ -913,8 +914,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6",
                 }]
         }], ctorParameters: function () {
         return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: MenuStack, decorators: [{
-                        type: Optional
-                    }, {
                         type: Inject,
                         args: [MENU_STACK]
                     }] }, { type: undefined, decorators: [{
@@ -981,9 +980,9 @@ class CdkMenuItemSelectable extends CdkMenuItem {
         }
     }
 }
-CdkMenuItemSelectable.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuItemSelectable, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-CdkMenuItemSelectable.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.6", type: CdkMenuItemSelectable, inputs: { checked: "checked", name: "name", id: "id" }, outputs: { toggled: "cdkMenuItemToggled" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuItemSelectable, decorators: [{
+CdkMenuItemSelectable.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuItemSelectable, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+CdkMenuItemSelectable.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.9", type: CdkMenuItemSelectable, inputs: { checked: "checked", name: "name", id: "id" }, outputs: { toggled: "cdkMenuItemToggled" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuItemSelectable, decorators: [{
             type: Directive
         }], propDecorators: { toggled: [{
                 type: Output,
@@ -1017,6 +1016,10 @@ class CdkMenuGroup {
     ngAfterContentInit() {
         this._registerMenuSelectionListeners();
     }
+    ngOnDestroy() {
+        this._selectableChanges.next();
+        this._selectableChanges.complete();
+    }
     /**
      * Register the child selectable elements with the change emitter and ensure any new child
      * elements do so as well.
@@ -1034,14 +1037,10 @@ class CdkMenuGroup {
             .pipe(takeUntil(this._selectableChanges))
             .subscribe(() => this.change.next(selectable));
     }
-    ngOnDestroy() {
-        this._selectableChanges.next();
-        this._selectableChanges.complete();
-    }
 }
-CdkMenuGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-CdkMenuGroup.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.6", type: CdkMenuGroup, selector: "[cdkMenuGroup]", outputs: { change: "change" }, host: { attributes: { "role": "group" }, classAttribute: "cdk-menu-group" }, providers: [{ provide: UniqueSelectionDispatcher, useClass: UniqueSelectionDispatcher }], queries: [{ propertyName: "_selectableItems", predicate: CdkMenuItemSelectable, descendants: true }], exportAs: ["cdkMenuGroup"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuGroup, decorators: [{
+CdkMenuGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+CdkMenuGroup.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.9", type: CdkMenuGroup, selector: "[cdkMenuGroup]", outputs: { change: "change" }, host: { attributes: { "role": "group" }, classAttribute: "cdk-menu-group" }, providers: [{ provide: UniqueSelectionDispatcher, useClass: UniqueSelectionDispatcher }], queries: [{ propertyName: "_selectableItems", predicate: CdkMenuItemSelectable, descendants: true }], exportAs: ["cdkMenuGroup"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuGroup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cdkMenuGroup]',
@@ -1106,6 +1105,128 @@ class PointerFocusTracker {
     }
 }
 
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+class CdkMenuBase extends CdkMenuGroup {
+    constructor(_elementRef, menuStack, dir) {
+        super();
+        this._elementRef = _elementRef;
+        this.menuStack = menuStack;
+        this.dir = dir;
+        /**
+         * Sets the aria-orientation attribute and determines where menus will be opened.
+         * Does not affect styling/layout.
+         */
+        this.orientation = 'vertical';
+        /** Emits when the MenuBar is destroyed. */
+        this.destroyed = new Subject();
+    }
+    ngAfterContentInit() {
+        super.ngAfterContentInit();
+        this._setKeyManager();
+        this._subscribeToMenuOpen();
+        this._subscribeToMenuStackClosed();
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.destroyed.next();
+        this.destroyed.complete();
+    }
+    /** Place focus on the first MenuItem in the menu and set the focus origin. */
+    focusFirstItem(focusOrigin = 'program') {
+        this.keyManager.setFocusOrigin(focusOrigin);
+        this.keyManager.setFirstItemActive();
+    }
+    /** Place focus on the last MenuItem in the menu and set the focus origin. */
+    focusLastItem(focusOrigin = 'program') {
+        this.keyManager.setFocusOrigin(focusOrigin);
+        this.keyManager.setLastItemActive();
+    }
+    /** Return true if this menu has been configured in a horizontal orientation. */
+    isHorizontal() {
+        return this.orientation === 'horizontal';
+    }
+    /** Return true if the MenuBar has an open submenu. */
+    hasOpenSubmenu() {
+        return !!this.openItem;
+    }
+    /**
+     * Close the open menu if the current active item opened the requested MenuStackItem.
+     * @param item the MenuStackItem requested to be closed.
+     */
+    closeOpenMenu(menu) {
+        var _a, _b, _c;
+        const keyManager = this.keyManager;
+        const trigger = this.openItem;
+        if (menu === ((_a = trigger === null || trigger === void 0 ? void 0 : trigger.getMenuTrigger()) === null || _a === void 0 ? void 0 : _a.getMenu())) {
+            (_b = trigger === null || trigger === void 0 ? void 0 : trigger.getMenuTrigger()) === null || _b === void 0 ? void 0 : _b.close();
+            // If the user has moused over a sibling item we want to focus the element under mouse focus
+            // not the trigger which previously opened the now closed menu.
+            if (trigger) {
+                keyManager.setActiveItem(((_c = this.pointerTracker) === null || _c === void 0 ? void 0 : _c.activeElement) || trigger);
+            }
+        }
+    }
+    /** Setup the FocusKeyManager with the correct orientation for the menu. */
+    _setKeyManager() {
+        var _a;
+        this.keyManager = new FocusKeyManager(this.items).withWrap().withTypeAhead().withHomeAndEnd();
+        if (this.isHorizontal()) {
+            this.keyManager.withHorizontalOrientation(((_a = this.dir) === null || _a === void 0 ? void 0 : _a.value) || 'ltr');
+        }
+        else {
+            this.keyManager.withVerticalOrientation();
+        }
+    }
+    /**
+     * Subscribe to the menu trigger's open events in order to track the trigger which opened the menu
+     * and stop tracking it when the menu is closed.
+     */
+    _subscribeToMenuOpen() {
+        const exitCondition = merge(this.items.changes, this.destroyed);
+        this.items.changes
+            .pipe(startWith(this.items), mergeMap((list) => list
+            .filter(item => item.hasMenu())
+            .map(item => item.getMenuTrigger().opened.pipe(mapTo(item), takeUntil(exitCondition)))), mergeAll(), switchMap((item) => {
+            this.openItem = item;
+            return item.getMenuTrigger().closed;
+        }), takeUntil(this.destroyed))
+            .subscribe(() => (this.openItem = undefined));
+    }
+    /** Subscribe to the MenuStack close and empty observables. */
+    _subscribeToMenuStackClosed() {
+        this.menuStack.closed
+            .pipe(takeUntil(this.destroyed))
+            .subscribe(item => this.closeOpenMenu(item));
+    }
+}
+CdkMenuBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuBase, deps: [{ token: i0.ElementRef }, { token: MENU_STACK }, { token: i1$1.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+CdkMenuBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.9", type: CdkMenuBase, host: { listeners: { "focus": "focusFirstItem()" }, properties: { "attr.aria-orientation": "orientation" } }, queries: [{ propertyName: "items", predicate: CdkMenuItem, descendants: true }], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuBase, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        '[attr.aria-orientation]': 'orientation',
+                        '(focus)': 'focusFirstItem()',
+                    },
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: MenuStack, decorators: [{
+                        type: Inject,
+                        args: [MENU_STACK]
+                    }] }, { type: i1$1.Directionality, decorators: [{
+                        type: Optional
+                    }] }];
+    }, propDecorators: { items: [{
+                type: ContentChildren,
+                args: [CdkMenuItem, { descendants: true }]
+            }] } });
+
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
@@ -1120,56 +1241,42 @@ class PointerFocusTracker {
  *
  * It also acts as a RadioGroup for elements marked with role `menuitemradio`.
  */
-class CdkMenu extends CdkMenuGroup {
-    constructor(_ngZone, _elementRef, _menuStack, _parentTrigger, _menuAim, _dir) {
-        super();
+class CdkMenu extends CdkMenuBase {
+    constructor(_ngZone, elementRef, menuStack, _parentTrigger, _menuAim, dir) {
+        var _a;
+        super(elementRef, menuStack, dir);
         this._ngZone = _ngZone;
-        this._elementRef = _elementRef;
-        this._menuStack = _menuStack;
         this._parentTrigger = _parentTrigger;
         this._menuAim = _menuAim;
-        this._dir = _dir;
-        /**
-         * Sets the aria-orientation attribute and determines where menus will be opened.
-         * Does not affect styling/layout.
-         */
-        this.orientation = 'vertical';
         /** Event emitted when the menu is closed. */
         this.closed = new EventEmitter();
-    }
-    ngOnInit() {
-        var _a, _b;
-        (_a = this._menuStack) === null || _a === void 0 ? void 0 : _a.push(this);
-        (_b = this._parentTrigger) === null || _b === void 0 ? void 0 : _b.registerChildMenu(this);
+        this.destroyed.subscribe(this.closed);
+        if (!this._isInline()) {
+            this.menuStack.push(this);
+        }
+        (_a = this._parentTrigger) === null || _a === void 0 ? void 0 : _a.registerChildMenu(this);
     }
     ngAfterContentInit() {
         var _a;
         super.ngAfterContentInit();
         this._completeChangeEmitter();
-        this._setKeyManager();
-        this._subscribeToMenuOpen();
-        this._subscribeToMenuStack();
+        this._subscribeToMenuStackEmptied();
         this._subscribeToMouseManager();
-        (_a = this._menuAim) === null || _a === void 0 ? void 0 : _a.initialize(this, this._pointerTracker);
-    }
-    /** Place focus on the first MenuItem in the menu and set the focus origin. */
-    focusFirstItem(focusOrigin = 'program') {
-        this._keyManager.setFocusOrigin(focusOrigin);
-        this._keyManager.setFirstItemActive();
+        (_a = this._menuAim) === null || _a === void 0 ? void 0 : _a.initialize(this, this.pointerTracker);
     }
-    /** Place focus on the last MenuItem in the menu and set the focus origin. */
-    focusLastItem(focusOrigin = 'program') {
-        this._keyManager.setFocusOrigin(focusOrigin);
-        this._keyManager.setLastItemActive();
+    ngOnDestroy() {
+        var _a;
+        super.ngOnDestroy();
+        this.closed.complete();
+        (_a = this.pointerTracker) === null || _a === void 0 ? void 0 : _a.destroy();
     }
     /** Handle keyboard events for the Menu. */
     _handleKeyEvent(event) {
-        var _a, _b;
-        const keyManager = this._keyManager;
+        const keyManager = this.keyManager;
         switch (event.keyCode) {
             case LEFT_ARROW:
             case RIGHT_ARROW:
-                if (this._isHorizontal()) {
+                if (this.isHorizontal()) {
                     event.preventDefault();
                     keyManager.setFocusOrigin('keyboard');
                     keyManager.onKeydown(event);
@@ -1177,7 +1284,7 @@ class CdkMenu extends CdkMenuGroup {
                 break;
             case UP_ARROW:
             case DOWN_ARROW:
-                if (!this._isHorizontal()) {
+                if (!this.isHorizontal()) {
                     event.preventDefault();
                     keyManager.setFocusOrigin('keyboard');
                     keyManager.onKeydown(event);
@@ -1186,11 +1293,11 @@ class CdkMenu extends CdkMenuGroup {
             case ESCAPE:
                 if (!hasModifierKey(event)) {
                     event.preventDefault();
-                    (_a = this._menuStack) === null || _a === void 0 ? void 0 : _a.close(this, 2 /* currentItem */);
+                    this.menuStack.close(this, 2 /* currentItem */);
                 }
                 break;
             case TAB:
-                (_b = this._menuStack) === null || _b === void 0 ? void 0 : _b.closeAll();
+                this.menuStack.closeAll();
                 break;
             default:
                 keyManager.onKeydown(event);
@@ -1200,6 +1307,9 @@ class CdkMenu extends CdkMenuGroup {
      * Complete the change emitter if there are any nested MenuGroups or register to complete the
      * change emitter if a MenuGroup is rendered at some point
      */
+    // TODO(mmalerba): This doesnt' quite work. It causes change events to stop
+    //  firing for radio items directly in the menu if a second group of options
+    //  is added in a menu-group.
     _completeChangeEmitter() {
         if (this._hasNestedGroups()) {
             this.change.complete();
@@ -1216,58 +1326,21 @@ class CdkMenu extends CdkMenuGroup {
         // order to ensure that we return true iff there are child CdkMenuGroup elements.
         return this._nestedGroups.length > 0 && !(this._nestedGroups.first instanceof CdkMenu);
     }
-    /** Setup the FocusKeyManager with the correct orientation for the menu. */
-    _setKeyManager() {
-        var _a;
-        this._keyManager = new FocusKeyManager(this._allItems)
-            .withWrap()
-            .withTypeAhead()
-            .withHomeAndEnd();
-        if (this._isHorizontal()) {
-            this._keyManager.withHorizontalOrientation(((_a = this._dir) === null || _a === void 0 ? void 0 : _a.value) || 'ltr');
-        }
-        else {
-            this._keyManager.withVerticalOrientation();
-        }
-    }
     /**
      * Set the PointerFocusTracker and ensure that when mouse focus changes the key manager is updated
      * with the latest menu item under mouse focus.
      */
     _subscribeToMouseManager() {
         this._ngZone.runOutsideAngular(() => {
-            this._pointerTracker = new PointerFocusTracker(this._allItems);
-            this._pointerTracker.entered
+            this.pointerTracker = new PointerFocusTracker(this.items);
+            this.pointerTracker.entered
                 .pipe(takeUntil(this.closed))
-                .subscribe(item => this._keyManager.setActiveItem(item));
+                .subscribe(item => this.keyManager.setActiveItem(item));
         });
     }
-    /** Subscribe to the MenuStack close and empty observables. */
-    _subscribeToMenuStack() {
-        var _a, _b;
-        (_a = this._menuStack) === null || _a === void 0 ? void 0 : _a.closed.pipe(takeUntil(this.closed)).subscribe(item => this._closeOpenMenu(item));
-        (_b = this._menuStack) === null || _b === void 0 ? void 0 : _b.emptied.pipe(takeUntil(this.closed)).subscribe(event => this._toggleMenuFocus(event));
-    }
-    /**
-     * Close the open menu if the current active item opened the requested MenuStackItem.
-     * @param item the MenuStackItem requested to be closed.
-     */
-    _closeOpenMenu(menu) {
-        var _a, _b, _c;
-        const keyManager = this._keyManager;
-        const trigger = this._openItem;
-        if (menu === ((_a = trigger === null || trigger === void 0 ? void 0 : trigger.getMenuTrigger()) === null || _a === void 0 ? void 0 : _a.getMenu())) {
-            (_b = trigger === null || trigger === void 0 ? void 0 : trigger.getMenuTrigger()) === null || _b === void 0 ? void 0 : _b.closeMenu();
-            // If the user has moused over a sibling item we want to focus the element under mouse focus
-            // not the trigger which previously opened the now closed menu.
-            if (trigger) {
-                keyManager.setActiveItem(((_c = this._pointerTracker) === null || _c === void 0 ? void 0 : _c.activeElement) || trigger);
-            }
-        }
-    }
     /** Set focus the either the current, previous or next item based on the FocusNext event. */
     _toggleMenuFocus(event) {
-        const keyManager = this._keyManager;
+        const keyManager = this.keyManager;
         switch (event) {
             case 0 /* nextItem */:
                 keyManager.setFocusOrigin('keyboard');
@@ -1285,73 +1358,45 @@ class CdkMenu extends CdkMenuGroup {
                 break;
         }
     }
-    // TODO(andy9775): remove duplicate logic between menu an menu bar
-    /**
-     * Subscribe to the menu trigger's open events in order to track the trigger which opened the menu
-     * and stop tracking it when the menu is closed.
-     */
-    _subscribeToMenuOpen() {
-        const exitCondition = merge(this._allItems.changes, this.closed);
-        this._allItems.changes
-            .pipe(startWith(this._allItems), mergeMap((list) => list
-            .filter(item => item.hasMenu())
-            .map(item => item.getMenuTrigger().opened.pipe(mapTo(item), takeUntil(exitCondition)))), mergeAll(), switchMap((item) => {
-            this._openItem = item;
-            return item.getMenuTrigger().closed;
-        }), takeUntil(this.closed))
-            .subscribe(() => (this._openItem = undefined));
-    }
-    /** Return true if this menu has been configured in a horizontal orientation. */
-    _isHorizontal() {
-        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() {
-        return !this._menuStack;
-    }
-    ngOnDestroy() {
-        var _a;
-        super.ngOnDestroy();
-        this._emitClosedEvent();
-        (_a = this._pointerTracker) === null || _a === void 0 ? void 0 : _a.destroy();
+        return !this._parentTrigger;
     }
-    /** Emit and complete the closed event emitter */
-    _emitClosedEvent() {
-        this.closed.next();
-        this.closed.complete();
+    _subscribeToMenuStackEmptied() {
+        this.menuStack.emptied
+            .pipe(takeUntil(this.destroyed))
+            .subscribe(event => this._toggleMenuFocus(event));
     }
 }
-CdkMenu.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenu, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: MENU_STACK, optional: true }, { token: MENU_TRIGGER, optional: true }, { token: MENU_AIM, optional: true, self: true }, { token: i1$1.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-CdkMenu.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.6", type: CdkMenu, selector: "[cdkMenu]", inputs: { orientation: ["cdkMenuOrientation", "orientation"] }, outputs: { closed: "closed" }, host: { attributes: { "role": "menu" }, listeners: { "focus": "focusFirstItem()", "keydown": "_handleKeyEvent($event)" }, properties: { "tabindex": "_isInline() ? 0 : null", "class.cdk-menu-inline": "_isInline()", "attr.aria-orientation": "orientation" }, classAttribute: "cdk-menu" }, providers: [
+CdkMenu.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenu, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: MENU_STACK }, { token: MENU_TRIGGER, optional: true }, { token: MENU_AIM, optional: true, self: true }, { token: i1$1.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+CdkMenu.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.9", type: CdkMenu, selector: "[cdkMenu]", outputs: { closed: "closed" }, host: { attributes: { "role": "menu" }, listeners: { "keydown": "_handleKeyEvent($event)" }, properties: { "tabindex": "_isInline() ? 0 : null", "class.cdk-menu-inline": "_isInline()" }, classAttribute: "cdk-menu" }, providers: [
         { provide: CdkMenuGroup, useExisting: CdkMenu },
         { provide: CDK_MENU, useExisting: CdkMenu },
-    ], queries: [{ propertyName: "_nestedGroups", predicate: CdkMenuGroup, descendants: true }, { propertyName: "_allItems", predicate: CdkMenuItem, descendants: true }], exportAs: ["cdkMenu"], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenu, decorators: [{
+        PARENT_OR_NEW_INLINE_MENU_STACK_PROVIDER,
+    ], queries: [{ propertyName: "_nestedGroups", predicate: CdkMenuGroup, descendants: true }], exportAs: ["cdkMenu"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenu, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cdkMenu]',
                     exportAs: 'cdkMenu',
                     host: {
-                        '[tabindex]': '_isInline() ? 0 : null',
                         'role': 'menu',
                         'class': 'cdk-menu',
+                        '[tabindex]': '_isInline() ? 0 : null',
                         '[class.cdk-menu-inline]': '_isInline()',
-                        '[attr.aria-orientation]': 'orientation',
-                        '(focus)': 'focusFirstItem()',
                         '(keydown)': '_handleKeyEvent($event)',
                     },
                     providers: [
                         { provide: CdkMenuGroup, useExisting: CdkMenu },
                         { provide: CDK_MENU, useExisting: CdkMenu },
+                        PARENT_OR_NEW_INLINE_MENU_STACK_PROVIDER,
                     ],
                 }]
         }], ctorParameters: function () {
         return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: MenuStack, decorators: [{
-                        type: Optional
-                    }, {
                         type: Inject,
                         args: [MENU_STACK]
                     }] }, { type: MenuTrigger, decorators: [{
@@ -1369,17 +1414,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6",
                     }] }, { type: i1$1.Directionality, decorators: [{
                         type: Optional
                     }] }];
-    }, propDecorators: { orientation: [{
-                type: Input,
-                args: ['cdkMenuOrientation']
-            }], closed: [{
+    }, propDecorators: { closed: [{
                 type: Output
             }], _nestedGroups: [{
                 type: ContentChildren,
                 args: [CdkMenuGroup, { descendants: true }]
-            }], _allItems: [{
-                type: ContentChildren,
-                args: [CdkMenuItem, { descendants: true }]
             }] } });
 
 /**
@@ -1395,40 +1434,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6",
  * this directive is applied to should contain components marked with CdkMenuItem.
  *
  */
-class CdkMenuBar extends CdkMenuGroup {
-    constructor(_ngZone, _elementRef, _menuStack, _menuAim, _dir) {
-        super();
+class CdkMenuBar extends CdkMenuBase {
+    constructor(_ngZone, elementRef, menuStack, _menuAim, dir) {
+        super(elementRef, menuStack, dir);
         this._ngZone = _ngZone;
-        this._elementRef = _elementRef;
-        this._menuStack = _menuStack;
         this._menuAim = _menuAim;
-        this._dir = _dir;
-        /**
-         * Sets the aria-orientation attribute and determines where menus will be opened.
-         * Does not affect styling/layout.
-         */
         this.orientation = 'horizontal';
-        /** Emits when the MenuBar is destroyed. */
-        this._destroyed = new Subject();
     }
     ngAfterContentInit() {
         var _a;
         super.ngAfterContentInit();
-        this._setKeyManager();
-        this._subscribeToMenuOpen();
-        this._subscribeToMenuStack();
+        this._subscribeToMenuStackEmptied();
         this._subscribeToMouseManager();
-        (_a = this._menuAim) === null || _a === void 0 ? void 0 : _a.initialize(this, this._pointerTracker);
-    }
-    /** Place focus on the first MenuItem in the menu and set the focus origin. */
-    focusFirstItem(focusOrigin = 'program') {
-        this._keyManager.setFocusOrigin(focusOrigin);
-        this._keyManager.setFirstItemActive();
+        (_a = this._menuAim) === null || _a === void 0 ? void 0 : _a.initialize(this, this.pointerTracker);
     }
-    /** Place focus on the last MenuItem in the menu and set the focus origin. */
-    focusLastItem(focusOrigin = 'program') {
-        this._keyManager.setFocusOrigin(focusOrigin);
-        this._keyManager.setLastItemActive();
+    ngOnDestroy() {
+        var _a;
+        super.ngOnDestroy();
+        (_a = this.pointerTracker) === null || _a === void 0 ? void 0 : _a.destroy();
     }
     /**
      * Handle keyboard events, specifically changing the focused element and/or toggling the active
@@ -1437,7 +1460,7 @@ class CdkMenuBar extends CdkMenuGroup {
      */
     _handleKeyEvent(event) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        const keyManager = this._keyManager;
+        const keyManager = this.keyManager;
         switch (event.keyCode) {
             case UP_ARROW:
             case DOWN_ARROW:
@@ -1447,100 +1470,60 @@ class CdkMenuBar extends CdkMenuGroup {
                 // For a horizontal menu if the left/right keys were clicked, or a vertical menu if the
                 // up/down keys were clicked: if the current menu is open, close it then focus and open the
                 // next  menu.
-                if ((this._isHorizontal() && horizontalArrows) ||
-                    (!this._isHorizontal() && !horizontalArrows)) {
+                if ((this.isHorizontal() && horizontalArrows) ||
+                    (!this.isHorizontal() && !horizontalArrows)) {
                     event.preventDefault();
                     const prevIsOpen = (_a = keyManager.activeItem) === null || _a === void 0 ? void 0 : _a.isMenuOpen();
-                    (_c = (_b = keyManager.activeItem) === null || _b === void 0 ? void 0 : _b.getMenuTrigger()) === null || _c === void 0 ? void 0 : _c.closeMenu();
+                    (_c = (_b = keyManager.activeItem) === null || _b === void 0 ? void 0 : _b.getMenuTrigger()) === null || _c === void 0 ? void 0 : _c.close();
                     keyManager.setFocusOrigin('keyboard');
                     keyManager.onKeydown(event);
                     if (prevIsOpen) {
-                        (_e = (_d = keyManager.activeItem) === null || _d === void 0 ? void 0 : _d.getMenuTrigger()) === null || _e === void 0 ? void 0 : _e.openMenu();
+                        (_e = (_d = keyManager.activeItem) === null || _d === void 0 ? void 0 : _d.getMenuTrigger()) === null || _e === void 0 ? void 0 : _e.open();
                     }
                 }
                 break;
             case ESCAPE:
                 event.preventDefault();
-                (_g = (_f = keyManager.activeItem) === null || _f === void 0 ? void 0 : _f.getMenuTrigger()) === null || _g === void 0 ? void 0 : _g.closeMenu();
+                (_g = (_f = keyManager.activeItem) === null || _f === void 0 ? void 0 : _f.getMenuTrigger()) === null || _g === void 0 ? void 0 : _g.close();
                 break;
             case TAB:
-                (_j = (_h = keyManager.activeItem) === null || _h === void 0 ? void 0 : _h.getMenuTrigger()) === null || _j === void 0 ? void 0 : _j.closeMenu();
+                (_j = (_h = keyManager.activeItem) === null || _h === void 0 ? void 0 : _h.getMenuTrigger()) === null || _j === void 0 ? void 0 : _j.close();
                 break;
             default:
                 keyManager.onKeydown(event);
         }
     }
-    /** Setup the FocusKeyManager with the correct orientation for the menu bar. */
-    _setKeyManager() {
-        var _a;
-        this._keyManager = new FocusKeyManager(this._allItems)
-            .withWrap()
-            .withTypeAhead()
-            .withHomeAndEnd();
-        if (this._isHorizontal()) {
-            this._keyManager.withHorizontalOrientation(((_a = this._dir) === null || _a === void 0 ? void 0 : _a.value) || 'ltr');
-        }
-        else {
-            this._keyManager.withVerticalOrientation();
-        }
-    }
     /**
      * Set the PointerFocusTracker and ensure that when mouse focus changes the key manager is updated
      * with the latest menu item under mouse focus.
      */
     _subscribeToMouseManager() {
         this._ngZone.runOutsideAngular(() => {
-            this._pointerTracker = new PointerFocusTracker(this._allItems);
-            this._pointerTracker.entered.pipe(takeUntil(this._destroyed)).subscribe(item => {
-                if (this._hasOpenSubmenu()) {
-                    this._keyManager.setActiveItem(item);
+            this.pointerTracker = new PointerFocusTracker(this.items);
+            this.pointerTracker.entered.pipe(takeUntil(this.destroyed)).subscribe(item => {
+                if (this.hasOpenSubmenu()) {
+                    this.keyManager.setActiveItem(item);
                 }
             });
         });
     }
-    /** Subscribe to the MenuStack close and empty observables. */
-    _subscribeToMenuStack() {
-        this._menuStack.closed
-            .pipe(takeUntil(this._destroyed))
-            .subscribe(item => this._closeOpenMenu(item));
-        this._menuStack.emptied
-            .pipe(takeUntil(this._destroyed))
-            .subscribe(event => this._toggleOpenMenu(event));
-    }
-    /**
-     * Close the open menu if the current active item opened the requested MenuStackItem.
-     * @param item the MenuStackItem requested to be closed.
-     */
-    _closeOpenMenu(menu) {
-        var _a, _b, _c;
-        const trigger = this._openItem;
-        const keyManager = this._keyManager;
-        if (menu === ((_a = trigger === null || trigger === void 0 ? void 0 : trigger.getMenuTrigger()) === null || _a === void 0 ? void 0 : _a.getMenu())) {
-            (_b = trigger === null || trigger === void 0 ? void 0 : trigger.getMenuTrigger()) === null || _b === void 0 ? void 0 : _b.closeMenu();
-            // If the user has moused over a sibling item we want to focus the element under mouse focus
-            // not the trigger which previously opened the now closed menu.
-            if (trigger) {
-                keyManager.setActiveItem(((_c = this._pointerTracker) === null || _c === void 0 ? void 0 : _c.activeElement) || trigger);
-            }
-        }
-    }
     /**
      * Set focus to either the current, previous or next item based on the FocusNext event, then
      * open the previous or next item.
      */
     _toggleOpenMenu(event) {
         var _a, _b, _c, _d;
-        const keyManager = this._keyManager;
+        const keyManager = this.keyManager;
         switch (event) {
             case 0 /* nextItem */:
                 keyManager.setFocusOrigin('keyboard');
                 keyManager.setNextItemActive();
-                (_b = (_a = keyManager.activeItem) === null || _a === void 0 ? void 0 : _a.getMenuTrigger()) === null || _b === void 0 ? void 0 : _b.openMenu();
+                (_b = (_a = keyManager.activeItem) === null || _a === void 0 ? void 0 : _a.getMenuTrigger()) === null || _b === void 0 ? void 0 : _b.open();
                 break;
             case 1 /* previousItem */:
                 keyManager.setFocusOrigin('keyboard');
                 keyManager.setPreviousItemActive();
-                (_d = (_c = keyManager.activeItem) === null || _c === void 0 ? void 0 : _c.getMenuTrigger()) === null || _d === void 0 ? void 0 : _d.openMenu();
+                (_d = (_c = keyManager.activeItem) === null || _c === void 0 ? void 0 : _c.getMenuTrigger()) === null || _d === void 0 ? void 0 : _d.open();
                 break;
             case 2 /* currentItem */:
                 if (keyManager.activeItem) {
@@ -1550,46 +1533,18 @@ class CdkMenuBar extends CdkMenuGroup {
                 break;
         }
     }
-    /**
-     * @return true if the menu bar is configured to be horizontal.
-     */
-    _isHorizontal() {
-        return this.orientation === 'horizontal';
-    }
-    /**
-     * Subscribe to the menu trigger's open events in order to track the trigger which opened the menu
-     * and stop tracking it when the menu is closed.
-     */
-    _subscribeToMenuOpen() {
-        const exitCondition = merge(this._allItems.changes, this._destroyed);
-        this._allItems.changes
-            .pipe(startWith(this._allItems), mergeMap((list) => list
-            .filter(item => item.hasMenu())
-            .map(item => item.getMenuTrigger().opened.pipe(mapTo(item), takeUntil(exitCondition)))), mergeAll(), switchMap((item) => {
-            this._openItem = item;
-            return item.getMenuTrigger().closed;
-        }), takeUntil(this._destroyed))
-            .subscribe(() => (this._openItem = undefined));
-    }
-    /** Return true if the MenuBar has an open submenu. */
-    _hasOpenSubmenu() {
-        return !!this._openItem;
-    }
-    ngOnDestroy() {
+    _subscribeToMenuStackEmptied() {
         var _a;
-        super.ngOnDestroy();
-        this._destroyed.next();
-        this._destroyed.complete();
-        (_a = this._pointerTracker) === null || _a === void 0 ? void 0 : _a.destroy();
+        (_a = this.menuStack) === null || _a === void 0 ? void 0 : _a.emptied.pipe(takeUntil(this.destroyed)).subscribe(event => this._toggleOpenMenu(event));
     }
 }
-CdkMenuBar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuBar, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: MENU_STACK }, { token: MENU_AIM, optional: true, self: true }, { token: i1$1.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-CdkMenuBar.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.6", type: CdkMenuBar, selector: "[cdkMenuBar]", inputs: { orientation: ["cdkMenuBarOrientation", "orientation"] }, host: { attributes: { "role": "menubar", "tabindex": "0" }, listeners: { "focus": "focusFirstItem()", "keydown": "_handleKeyEvent($event)" }, properties: { "attr.aria-orientation": "orientation" }, classAttribute: "cdk-menu-bar" }, providers: [
+CdkMenuBar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuBar, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: MENU_STACK }, { token: MENU_AIM, optional: true, self: true }, { token: i1$1.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+CdkMenuBar.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.9", type: CdkMenuBar, selector: "[cdkMenuBar]", host: { attributes: { "role": "menubar", "tabindex": "0" }, listeners: { "keydown": "_handleKeyEvent($event)" }, classAttribute: "cdk-menu-bar" }, providers: [
         { provide: CdkMenuGroup, useExisting: CdkMenuBar },
         { provide: CDK_MENU, useExisting: CdkMenuBar },
-        { provide: MENU_STACK, useClass: MenuStack },
-    ], queries: [{ propertyName: "_allItems", predicate: CdkMenuItem, descendants: true }], exportAs: ["cdkMenuBar"], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuBar, decorators: [{
+        { provide: MENU_STACK, useFactory: () => MenuStack.inline() },
+    ], exportAs: ["cdkMenuBar"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuBar, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cdkMenuBar]',
@@ -1598,14 +1553,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6",
                         'role': 'menubar',
                         'class': 'cdk-menu-bar',
                         'tabindex': '0',
-                        '[attr.aria-orientation]': 'orientation',
-                        '(focus)': 'focusFirstItem()',
                         '(keydown)': '_handleKeyEvent($event)',
                     },
                     providers: [
                         { provide: CdkMenuGroup, useExisting: CdkMenuBar },
                         { provide: CDK_MENU, useExisting: CdkMenuBar },
-                        { provide: MENU_STACK, useClass: MenuStack },
+                        { provide: MENU_STACK, useFactory: () => MenuStack.inline() },
                     ],
                 }]
         }], ctorParameters: function () {
@@ -1622,13 +1575,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6",
                     }] }, { type: i1$1.Directionality, decorators: [{
                         type: Optional
                     }] }];
-    }, propDecorators: { orientation: [{
-                type: Input,
-                args: ['cdkMenuBarOrientation']
-            }], _allItems: [{
-                type: ContentChildren,
-                args: [CdkMenuItem, { descendants: true }]
-            }] } });
+    } });
 
 /**
  * A directive providing behavior for the "menuitemradio" ARIA role, which behaves similarly to
@@ -1661,12 +1608,12 @@ class CdkMenuItemRadio extends CdkMenuItemSelectable {
         this._removeDispatcherListener();
     }
 }
-CdkMenuItemRadio.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuItemRadio, deps: [{ token: i1$2.UniqueSelectionDispatcher }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: MENU_STACK, optional: true }, { token: CDK_MENU, optional: true }, { token: MENU_AIM, optional: true }, { token: i1$1.Directionality, optional: true }, { token: CdkMenuItemTrigger, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
-CdkMenuItemRadio.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.6", type: CdkMenuItemRadio, selector: "[cdkMenuItemRadio]", host: { attributes: { "type": "button", "role": "menuitemradio" }, properties: { "tabindex": "_tabindex", "attr.aria-checked": "checked || null", "attr.aria-disabled": "disabled || null" } }, providers: [
+CdkMenuItemRadio.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuItemRadio, deps: [{ token: i1$2.UniqueSelectionDispatcher }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: MENU_STACK }, { token: CDK_MENU, optional: true }, { token: MENU_AIM, optional: true }, { token: i1$1.Directionality, optional: true }, { token: CdkMenuItemTrigger, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
+CdkMenuItemRadio.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.9", type: CdkMenuItemRadio, selector: "[cdkMenuItemRadio]", host: { attributes: { "type": "button", "role": "menuitemradio" }, properties: { "tabindex": "_tabindex", "attr.aria-checked": "checked || null", "attr.aria-disabled": "disabled || null" } }, providers: [
         { provide: CdkMenuItemSelectable, useExisting: CdkMenuItemRadio },
         { provide: CdkMenuItem, useExisting: CdkMenuItemSelectable },
     ], exportAs: ["cdkMenuItemRadio"], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuItemRadio, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuItemRadio, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cdkMenuItemRadio]',
@@ -1685,8 +1632,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6",
                 }]
         }], ctorParameters: function () {
         return [{ type: i1$2.UniqueSelectionDispatcher }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: MenuStack, decorators: [{
-                        type: Optional
-                    }, {
                         type: Inject,
                         args: [MENU_STACK]
                     }] }, { type: undefined, decorators: [{
@@ -1728,12 +1673,12 @@ class CdkMenuItemCheckbox extends CdkMenuItemSelectable {
         }
     }
 }
-CdkMenuItemCheckbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuItemCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-CdkMenuItemCheckbox.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.6", type: CdkMenuItemCheckbox, selector: "[cdkMenuItemCheckbox]", host: { attributes: { "type": "button", "role": "menuitemcheckbox" }, properties: { "tabindex": "_tabindex", "attr.aria-checked": "checked || null", "attr.aria-disabled": "disabled || null" } }, providers: [
+CdkMenuItemCheckbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuItemCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+CdkMenuItemCheckbox.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.9", type: CdkMenuItemCheckbox, selector: "[cdkMenuItemCheckbox]", host: { attributes: { "type": "button", "role": "menuitemcheckbox" }, properties: { "tabindex": "_tabindex", "attr.aria-checked": "checked || null", "attr.aria-disabled": "disabled || null" } }, providers: [
         { provide: CdkMenuItemSelectable, useExisting: CdkMenuItemCheckbox },
         { provide: CdkMenuItem, useExisting: CdkMenuItemSelectable },
     ], exportAs: ["cdkMenuItemCheckbox"], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuItemCheckbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuItemCheckbox, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cdkMenuItemCheckbox]',
@@ -1780,9 +1725,9 @@ class ContextMenuTracker {
         }
     }
 }
-ContextMenuTracker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: ContextMenuTracker, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ContextMenuTracker.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: ContextMenuTracker, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: ContextMenuTracker, decorators: [{
+ContextMenuTracker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: ContextMenuTracker, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ContextMenuTracker.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: ContextMenuTracker, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: ContextMenuTracker, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1798,17 +1743,7 @@ class CdkContextMenuTrigger extends MenuTrigger {
         this._overlay = _overlay;
         this._contextMenuTracker = _contextMenuTracker;
         this._directionality = _directionality;
-        /** Emits when the attached menu is requested to open. */
-        this.opened = new EventEmitter();
-        /** Emits when the attached menu is requested to close. */
-        this.closed = new EventEmitter();
         this._disabled = false;
-        /** A reference to the overlay which manages the triggered menu. */
-        this._overlayRef = null;
-        /** Emits when the element is destroyed. */
-        this._destroyed = new Subject();
-        /** Emits when the outside pointer events listener on the overlay should be stopped. */
-        this._stopOutsideClicksListener = merge(this.closed, this._destroyed);
         this._setMenuStackListener();
     }
     /** Whether the context menu should be disabled. */
@@ -1880,11 +1815,6 @@ class CdkContextMenuTrigger extends MenuTrigger {
             }
         }
     }
-    /** Whether the attached menu is open. */
-    isOpen() {
-        var _a;
-        return !!((_a = this._overlayRef) === null || _a === void 0 ? void 0 : _a.hasAttached());
-    }
     /**
      * Get the configuration object used to create the overlay.
      * @param coordinates the location to place the opened menu
@@ -1948,25 +1878,13 @@ class CdkContextMenuTrigger extends MenuTrigger {
             });
         }
     }
-    ngOnDestroy() {
-        this._destroyOverlay();
-        this._destroyed.next();
-        this._destroyed.complete();
-    }
-    /** Destroy and unset the overlay reference it if exists. */
-    _destroyOverlay() {
-        if (this._overlayRef) {
-            this._overlayRef.dispose();
-            this._overlayRef = null;
-        }
-    }
 }
-CdkContextMenuTrigger.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkContextMenuTrigger, deps: [{ token: i0.Injector }, { token: i0.ViewContainerRef }, { token: i1.Overlay }, { token: ContextMenuTracker }, { token: MENU_STACK }, { token: i1$1.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-CdkContextMenuTrigger.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.6", type: CdkContextMenuTrigger, selector: "[cdkContextMenuTriggerFor]", inputs: { _menuTemplateRef: ["cdkContextMenuTriggerFor", "_menuTemplateRef"], menuPosition: ["cdkMenuPosition", "menuPosition"], disabled: ["cdkContextMenuDisabled", "disabled"] }, outputs: { opened: "cdkContextMenuOpened", closed: "cdkContextMenuClosed" }, host: { listeners: { "contextmenu": "_openOnContextMenu($event)" } }, providers: [
+CdkContextMenuTrigger.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkContextMenuTrigger, deps: [{ token: i0.Injector }, { token: i0.ViewContainerRef }, { token: i1.Overlay }, { token: ContextMenuTracker }, { token: MENU_STACK }, { token: i1$1.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+CdkContextMenuTrigger.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.9", type: CdkContextMenuTrigger, selector: "[cdkContextMenuTriggerFor]", inputs: { _menuTemplateRef: ["cdkContextMenuTriggerFor", "_menuTemplateRef"], menuPosition: ["cdkContextMenuPosition", "menuPosition"], disabled: ["cdkContextMenuDisabled", "disabled"] }, outputs: { opened: "cdkContextMenuOpened", closed: "cdkContextMenuClosed" }, host: { listeners: { "contextmenu": "_openOnContextMenu($event)" } }, providers: [
         { provide: MENU_TRIGGER, useExisting: CdkContextMenuTrigger },
         { provide: MENU_STACK, useClass: MenuStack },
     ], exportAs: ["cdkContextMenuTriggerFor"], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkContextMenuTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkContextMenuTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cdkContextMenuTriggerFor]',
@@ -1974,6 +1892,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6",
                     host: {
                         '(contextmenu)': '_openOnContextMenu($event)',
                     },
+                    inputs: ['_menuTemplateRef: cdkContextMenuTriggerFor', 'menuPosition: cdkContextMenuPosition'],
+                    outputs: ['opened: cdkContextMenuOpened', 'closed: cdkContextMenuClosed'],
                     providers: [
                         { provide: MENU_TRIGGER, useExisting: CdkContextMenuTrigger },
                         { provide: MENU_STACK, useClass: MenuStack },
@@ -1986,19 +1906,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6",
                     }] }, { type: i1$1.Directionality, decorators: [{
                         type: Optional
                     }] }];
-    }, propDecorators: { _menuTemplateRef: [{
-                type: Input,
-                args: ['cdkContextMenuTriggerFor']
-            }], menuPosition: [{
-                type: Input,
-                args: ['cdkMenuPosition']
-            }], opened: [{
-                type: Output,
-                args: ['cdkContextMenuOpened']
-            }], closed: [{
-                type: Output,
-                args: ['cdkContextMenuClosed']
-            }], disabled: [{
+    }, propDecorators: { disabled: [{
                 type: Input,
                 args: ['cdkContextMenuDisabled']
             }] } });
@@ -2023,8 +1931,8 @@ const EXPORTED_DECLARATIONS = [
 ];
 class CdkMenuModule {
 }
-CdkMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CdkMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuModule, declarations: [CdkMenuBar,
+CdkMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CdkMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuModule, declarations: [CdkMenuBar,
         CdkMenu,
         CdkMenuItem,
         CdkMenuItemRadio,
@@ -2041,8 +1949,8 @@ CdkMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         CdkMenuGroup,
         CdkContextMenuTrigger,
         CdkTargetMenuAim] });
-CdkMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuModule, imports: [[OverlayModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.6", ngImport: i0, type: CdkMenuModule, decorators: [{
+CdkMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuModule, imports: [[OverlayModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [OverlayModule],