@angular/cdk-experimental 13.3.3 → 14.0.0-next.10

package/fesm2020/menu.mjs

@@ -1,16 +1,43 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Directive, EventEmitter, Optional, Inject, Input, Output, Self, ContentChildren, NgModule } from '@angular/core';
+import { Directive, InjectionToken, Optional, SkipSelf, Inject, Injectable, EventEmitter, Injector, Self, Input, Output, ContentChildren, NgModule } from '@angular/core';
 import * as i1 from '@angular/cdk/overlay';
-import { OverlayConfig, 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 * as i2 from '@angular/cdk/bidi';
-import { Subject, fromEvent, merge, defer, partition } from 'rxjs';
-import { filter, takeUntil, startWith, mergeMap, mapTo, mergeAll, take, switchMap, skip } from 'rxjs/operators';
-import * as i1$1 from '@angular/cdk/collections';
+import { OverlayConfig, STANDARD_DROPDOWN_BELOW_POSITIONS, STANDARD_DROPDOWN_ADJACENT_POSITIONS, OverlayModule } from '@angular/cdk/overlay';
+import { UP_ARROW, hasModifierKey, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE, TAB, ESCAPE } from '@angular/cdk/keycodes';
+import * as i1$1 from '@angular/cdk/bidi';
+import { startWith, debounceTime, distinctUntilChanged, filter, takeUntil, mergeMap, mapTo, mergeAll, switchMap, 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 { TemplatePortal } from '@angular/cdk/portal';
+import { FocusKeyManager } from '@angular/cdk/a11y';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+
+/**
+ * @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
+ */
+/**
+ * A grouping container for `CdkMenuItemRadio` instances, similar to a `role="radiogroup"` element.
+ */
+class CdkMenuGroup {
+}
+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]", host: { attributes: { "role": "group" }, classAttribute: "cdk-menu-group" }, providers: [{ provide: UniqueSelectionDispatcher, useClass: UniqueSelectionDispatcher }], 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]',
+                    exportAs: 'cdkMenuGroup',
+                    host: {
+                        'role': 'group',
+                        'class': 'cdk-menu-group',
+                    },
+                    providers: [{ provide: UniqueSelectionDispatcher, useClass: UniqueSelectionDispatcher }],
+                }]
+        }] });
 
 /**
  * @license
@@ -29,6 +56,22 @@ const CDK_MENU = new InjectionToken('cdk-menu');
  * 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
  */
+/** Injection token used for an implementation of MenuStack. */
+const MENU_STACK = new InjectionToken('cdk-menu-stack');
+/** 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(),
+};
+/** Provider that provides the parent menu stack, or a new inline menu stack if there is no parent one. */
+const PARENT_OR_NEW_INLINE_MENU_STACK_PROVIDER = (orientation) => ({
+    provide: MENU_STACK,
+    deps: [[new Optional(), new SkipSelf(), new Inject(MENU_STACK)]],
+    useFactory: (parentMenuStack) => parentMenuStack || MenuStack.inline(orientation),
+});
+/** The next available menu stack ID. */
+let nextId$2 = 0;
 /**
  * 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
@@ -37,22 +80,42 @@ const CDK_MENU = new InjectionToken('cdk-menu');
  */
 class MenuStack {
     constructor() {
+        /** The ID of this menu stack. */
+        this.id = `${nextId$2++}`;
         /** All MenuStackItems tracked by this MenuStack. */
         this._elements = [];
         /** Emits the element which was popped off of the stack when requested by a closer. */
         this._close = new Subject();
         /** Emits once the MenuStack has become empty after popping off elements. */
         this._empty = new Subject();
+        /** Emits whether any menu in the menu stack has focus. */
+        this._hasFocus = new Subject();
         /** Observable which emits the MenuStackItem which has been requested to close. */
         this.closed = this._close;
+        /** Observable which emits whether any menu in the menu stack has focus. */
+        this.hasFocus = this._hasFocus.pipe(startWith(false), debounceTime(0), distinctUntilChanged());
         /**
          * Observable which emits when the MenuStack is empty after popping off the last element. It
          * emits a FocusNext event which specifies the action the closer has requested the listener
          * perform.
          */
         this.emptied = this._empty;
+        /**
+         * Whether the inline menu associated with this menu stack is vertical or horizontal.
+         * `null` indicates there is no inline menu associated with this menu stack.
+         */
+        this._inlineMenuOrientation = null;
+    }
+    /** Creates a menu stack that originates from an inline menu. */
+    static inline(orientation) {
+        const stack = new MenuStack();
+        stack._inlineMenuOrientation = orientation;
+        return stack;
     }
-    /** @param menu the MenuStackItem to put on the stack. */
+    /**
+     * Adds an item to the menu stack.
+     * @param menu the MenuStackItem to put on the stack.
+     */
     push(menu) {
         this._elements.push(menu);
     }
@@ -60,19 +123,18 @@ class MenuStack {
      * Pop items off of the stack up to and including `lastItem` and emit each on the close
      * observable. If the stack is empty or `lastItem` is not on the stack it does nothing.
      * @param lastItem the last item to pop off the stack.
-     * @param focusNext the event to emit on the `empty` observable if the method call resulted in an
-     * empty stack. Does not emit if the stack was initially empty or if `lastItem` was not on the
-     * stack.
+     * @param options Options that configure behavior on close.
      */
-    close(lastItem, focusNext) {
+    close(lastItem, options) {
+        const { focusNextOnEmpty, focusParentTrigger } = { ...options };
         if (this._elements.indexOf(lastItem) >= 0) {
             let poppedElement;
             do {
                 poppedElement = this._elements.pop();
-                this._close.next(poppedElement);
+                this._close.next({ item: poppedElement, focusParentTrigger });
             } while (poppedElement !== lastItem);
             if (this.isEmpty()) {
-                this._empty.next(focusNext);
+                this._empty.next(focusNextOnEmpty);
             }
         }
     }
@@ -87,25 +149,25 @@ class MenuStack {
         if (this._elements.indexOf(lastItem) >= 0) {
             removed = this.peek() !== lastItem;
             while (this.peek() !== lastItem) {
-                this._close.next(this._elements.pop());
+                this._close.next({ item: this._elements.pop() });
             }
         }
         return removed;
     }
     /**
      * Pop off all MenuStackItems and emit each one on the `close` observable one by one.
-     * @param focusNext the event to emit on the `empty` observable once the stack is emptied. Does
-     * not emit if the stack was initially empty.
+     * @param options Options that configure behavior on close.
      */
-    closeAll(focusNext) {
+    closeAll(options) {
+        const { focusNextOnEmpty, focusParentTrigger } = { ...options };
         if (!this.isEmpty()) {
             while (!this.isEmpty()) {
                 const menuStackItem = this._elements.pop();
                 if (menuStackItem) {
-                    this._close.next(menuStackItem);
+                    this._close.next({ item: menuStackItem, focusParentTrigger });
                 }
             }
-            this._empty.next(focusNext);
+            this._empty.next(focusNextOnEmpty);
         }
     }
     /** Return true if this stack is empty. */
@@ -120,12 +182,24 @@ class MenuStack {
     peek() {
         return this._elements[this._elements.length - 1];
     }
+    /** Whether the menu stack is associated with an inline menu. */
+    hasInlineMenu() {
+        return this._inlineMenuOrientation != null;
+    }
+    /** The orientation of the associated inline menu. */
+    inlineMenuOrientation() {
+        return this._inlineMenuOrientation;
+    }
+    /** Sets whether the menu stack contains the focused element. */
+    setHasFocus(hasFocus) {
+        this._hasFocus.next(hasFocus);
+    }
 }
-/** NoopMenuStack is a placeholder MenuStack used for inline menus. */
-class NoopMenuStack extends MenuStack {
-    /** Noop push - does not add elements to the MenuStack. */
-    push(_) { }
-}
+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
+        }] });
 
 /**
  * @license
@@ -134,14 +208,6 @@ class NoopMenuStack extends MenuStack {
  * 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
  */
-/**
- * Throws an exception when a menu panel already has a menu stack.
- * @docs-private
- */
-function throwExistingMenuStackError() {
-    throw Error('CdkMenuPanel is already referenced by different CdkMenuTrigger. Ensure that a menu is' +
-        ' opened by a single trigger only.');
-}
 /**
  * Throws an exception when an instance of the PointerFocusTracker is not provided.
  * @docs-private
@@ -189,7 +255,6 @@ function getYIntercept(point, slope) {
  * @param submenuPoints the submenu DOMRect points.
  * @param m the slope of the trajectory line.
  * @param b the y intercept of the trajectory line.
- *
  * @return true if any point on the line falls within the submenu.
  */
 function isWithinSubmenu(submenuPoints, m, b) {
@@ -213,14 +278,24 @@ function isWithinSubmenu(submenuPoints, m, b) {
  * to submenu.
  */
 class TargetMenuAim {
-    constructor(_ngZone) {
+    constructor(
+    /** The Angular zone. */
+    _ngZone) {
         this._ngZone = _ngZone;
         /** The last NUM_POINTS mouse move events. */
         this._points = [];
         /** Emits when this service is destroyed. */
         this._destroyed = new Subject();
     }
-    /** Set the Menu and its PointerFocusTracker. */
+    ngOnDestroy() {
+        this._destroyed.next();
+        this._destroyed.complete();
+    }
+    /**
+     * Set the Menu and its PointerFocusTracker.
+     * @param menu The menu that this menu aim service controls.
+     * @param pointerTracker The `PointerFocusTracker` for the given menu.
+     */
     initialize(menu, pointerTracker) {
         this._menu = menu;
         this._pointerTracker = pointerTracker;
@@ -257,6 +332,8 @@ class TargetMenuAim {
      *
      * The delayed toggle handler executes the `doToggle` callback after some period of time iff the
      * users mouse is on an item in the current menu.
+     *
+     * @param doToggle the function called when the user is not moving towards the submenu.
      */
     _startTimeout(doToggle) {
         // If the users mouse is moving towards a submenu we don't want to immediately resolve.
@@ -293,9 +370,7 @@ class TargetMenuAim {
     }
     /** Get the bounding DOMRect for the open submenu. */
     _getSubmenuBounds() {
-        return this._pointerTracker?.previousElement
-            ?.getMenu()
-            ?._elementRef.nativeElement.getBoundingClientRect();
+        return this._pointerTracker?.previousElement?.getMenu()?.nativeElement.getBoundingClientRect();
     }
     /**
      * Check if a reference to the PointerFocusTracker and menu element is provided.
@@ -314,7 +389,7 @@ class TargetMenuAim {
     /** Subscribe to the root menus mouse move events and update the tracked mouse points. */
     _subscribeToMouseMoves() {
         this._ngZone.runOutsideAngular(() => {
-            fromEvent(this._menu._elementRef.nativeElement, 'mousemove')
+            fromEvent(this._menu.nativeElement, 'mousemove')
                 .pipe(filter((_, index) => index % MOUSE_MOVE_SAMPLE_FREQUENCY === 0), takeUntil(this._destroyed))
                 .subscribe((event) => {
                 this._points.push({ x: event.clientX, y: event.clientY });
@@ -324,25 +399,21 @@ class TargetMenuAim {
             });
         });
     }
-    ngOnDestroy() {
-        this._destroyed.next();
-        this._destroyed.complete();
-    }
 }
-TargetMenuAim.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: TargetMenuAim, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-TargetMenuAim.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: TargetMenuAim });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", 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 }]; } });
 /**
- * CdkTargetMenuAim is a provider for the TargetMenuAim service. It should be added to an
+ * CdkTargetMenuAim is a provider for the TargetMenuAim service. It can be added to an
  * element with either the `cdkMenu` or `cdkMenuBar` directive and child menu items.
  */
 class CdkTargetMenuAim {
 }
-CdkTargetMenuAim.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: CdkTargetMenuAim, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-CdkTargetMenuAim.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: CdkTargetMenuAim, selector: "[cdkTargetMenuAim]", providers: [{ provide: MENU_AIM, useClass: TargetMenuAim }], exportAs: ["cdkTargetMenuAim"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", 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]',
@@ -358,198 +429,277 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
  * 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
  */
+/** Injection token used for an implementation of MenuStack. */
+const MENU_TRIGGER = new InjectionToken('cdk-menu-trigger');
 /**
- * Whether the target element is a menu item to be ignored by the overlay background click handler.
+ * Abstract directive that implements shared logic common to all menu triggers.
+ * This class can be extended to create custom menu trigger types.
  */
-function isClickInsideMenuOverlay(target) {
-    while (target?.parentElement) {
-        const isOpenTrigger = target.getAttribute('aria-expanded') === 'true' &&
-            target.classList.contains('cdk-menu-trigger');
-        const isOverlayMenu = target.classList.contains('cdk-menu') && !target.classList.contains('cdk-menu-inline');
-        if (isOpenTrigger || isOverlayMenu) {
-            return true;
+class CdkMenuTriggerBase {
+    constructor(
+    /** The DI injector for this component */
+    injector, 
+    /** The view container ref for this component */
+    viewContainerRef, 
+    /** The menu stack this menu is part of. */
+    menuStack) {
+        this.injector = injector;
+        this.viewContainerRef = viewContainerRef;
+        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() {
+        return !!this.overlayRef?.hasAttached();
+    }
+    /** Registers a child menu as having been opened by this trigger. */
+    registerChildMenu(child) {
+        this.childMenu = child;
+    }
+    /**
+     * Get the portal to be attached to the overlay which contains the menu. Allows for the menu
+     * content to change dynamically and be reflected in the application.
+     */
+    getMenuContentPortal() {
+        const hasMenuContentChanged = this.menuTemplateRef !== this._menuPortal?.templateRef;
+        if (this.menuTemplateRef && (!this._menuPortal || hasMenuContentChanged)) {
+            this._menuPortal = new TemplatePortal(this.menuTemplateRef, this.viewContainerRef, undefined, this._getChildMenuInjector());
+        }
+        return this._menuPortal;
+    }
+    /**
+     * Whether the given element is inside the scope of this trigger's menu stack.
+     * @param element The element to check.
+     * @return Whether the element is inside the scope of this trigger's menu stack.
+     */
+    isElementInsideMenuStack(element) {
+        for (let el = element; el; el = el?.parentElement ?? null) {
+            if (el.getAttribute('data-cdk-menu-stack-id') === this.menuStack.id) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /** Destroy and unset the overlay reference it if exists */
+    _destroyOverlay() {
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
         }
-        target = target.parentElement;
     }
-    return false;
+    /** Gets the injector to use when creating a child menu. */
+    _getChildMenuInjector() {
+        this._childMenuInjector =
+            this._childMenuInjector ||
+                Injector.create({
+                    providers: [
+                        { provide: MENU_TRIGGER, useValue: this },
+                        { provide: MENU_STACK, useValue: this.menuStack },
+                    ],
+                    parent: this.injector,
+                });
+        return this._childMenuInjector;
+    }
 }
+CdkMenuTriggerBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuTriggerBase, deps: [{ token: i0.Injector }, { token: i0.ViewContainerRef }, { token: MENU_STACK }], target: i0.ɵɵFactoryTarget.Directive });
+CdkMenuTriggerBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.9", type: CdkMenuTriggerBase, host: { properties: { "attr.aria-controls": "childMenu?.id", "attr.data-cdk-menu-stack-id": "menuStack.id" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuTriggerBase, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        '[attr.aria-controls]': 'childMenu?.id',
+                        '[attr.data-cdk-menu-stack-id]': 'menuStack.id',
+                    },
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ViewContainerRef }, { type: MenuStack, decorators: [{
+                    type: Inject,
+                    args: [MENU_STACK]
+                }] }]; } });
+
 /**
- * A directive to be combined with CdkMenuItem which opens the Menu it is bound to. If the
- * element is in a top level MenuBar it will open the menu on click, or if a sibling is already
- * opened it will open on hover. If it is inside of a Menu it will open the attached Submenu on
- * hover regardless of its sibling state.
+ * @license
+ * Copyright Google LLC All Rights Reserved.
  *
- * The directive must be placed along with the `cdkMenuItem` directive in order to enable full
- * functionality.
+ * 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 CdkMenuItemTrigger {
-    constructor(_elementRef, _viewContainerRef, _overlay, _ngZone, _parentMenu, _menuAim, _directionality) {
+/**
+ * A directive that turns its host element into a trigger for a popup menu.
+ * It can be combined with cdkMenuItem to create sub-menus. If the element is in a top level
+ * MenuBar it will open the menu on click, or if a sibling is already opened it will open on hover.
+ * If it is inside of a Menu it will open the attached Submenu on hover regardless of its sibling
+ * state.
+ */
+class CdkMenuTrigger extends CdkMenuTriggerBase {
+    constructor(
+    /** The DI injector for this component. */
+    injector, 
+    /** The host element. */
+    _elementRef, 
+    /** The view container ref for this component. */
+    viewContainerRef, 
+    /** The CDK overlay service. */
+    _overlay, 
+    /** The Angular zone. */
+    _ngZone, 
+    /** The menu stack this trigger belongs to. */
+    menuStack, 
+    /** The parent menu this trigger belongs to. */
+    _parentMenu, 
+    /** The menu aim service used by this menu. */
+    _menuAim, 
+    /** The directionality of the page. */
+    _directionality) {
+        super(injector, viewContainerRef, menuStack);
         this._elementRef = _elementRef;
-        this._viewContainerRef = _viewContainerRef;
         this._overlay = _overlay;
         this._ngZone = _ngZone;
         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();
-        /** The menu stack for this trigger and its sub-menus. */
-        this._menuStack = new MenuStack();
-        /** 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._subscribeToMenuStackClosed();
         this._subscribeToMouseEnter();
+        this._subscribeToMenuStackHasFocus();
     }
-    /** Template reference variable to the menu this trigger opens */
-    get menuPanel() {
-        return this._menuPanel;
-    }
-    set menuPanel(panel) {
-        // If the provided panel already has a stack, that means it already has a trigger configured.
-        // Note however that there are some edge cases where two triggers **may** share the same menu,
-        // e.g. two triggers in two separate menus.
-        if ((typeof ngDevMode === 'undefined' || ngDevMode) && panel?._menuStack) {
-            throwExistingMenuStackError();
-        }
-        this._menuPanel = panel;
-        if (this._menuPanel) {
-            this._menuPanel._menuStack = this._getMenuStack();
-        }
-    }
-    /** Open/close the attached menu if the trigger has been configured with one */
+    /** Toggle the attached menu. */
     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());
+            this.overlayRef = this.overlayRef || this._overlay.create(this._getOverlayConfig());
+            this.overlayRef.attach(this.getMenuContentPortal());
             this._subscribeToOutsideClicks();
         }
     }
     /** Close the opened menu. */
-    closeMenu() {
-        if (this.isMenuOpen()) {
+    close() {
+        if (this.isOpen()) {
             this.closed.next();
-            this._overlayRef.detach();
+            this.overlayRef.detach();
         }
         this._closeSiblingTriggers();
     }
-    /** Return true if the trigger has an attached menu */
-    hasMenu() {
-        return !!this.menuPanel;
-    }
-    /** 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.
+     * Get a reference to the rendered Menu if the Menu is open and rendered in the DOM.
      */
     getMenu() {
-        return this.menuPanel?._menu;
-    }
-    /**
-     * Subscribe to the mouseenter events and close any sibling menu items if this element is moused
-     * into.
-     */
-    _subscribeToMouseEnter() {
-        // Closes any sibling menu items and opens the menu associated with this trigger.
-        const toggleMenus = () => this._ngZone.run(() => {
-            this._closeSiblingTriggers();
-            this.openMenu();
-        });
-        this._ngZone.runOutsideAngular(() => {
-            fromEvent(this._elementRef.nativeElement, 'mouseenter')
-                .pipe(filter(() => !this._getMenuStack()?.isEmpty() && !this.isMenuOpen()), takeUntil(this._destroyed))
-                .subscribe(() => {
-                if (this._menuAim) {
-                    this._menuAim.toggle(toggleMenus);
-                }
-                else {
-                    toggleMenus();
-                }
-            });
-        });
+        return this.childMenu;
     }
     /**
-     * Handles keyboard events for the menu item, specifically opening/closing the attached menu and
-     * focusing the appropriate submenu item.
-     * @param event the keyboard event to handle
+     * Handles keyboard events for the menu item.
+     * @param event The keyboard event to handle
      */
     _toggleOnKeydown(event) {
+        const isParentVertical = this._parentMenu?.orientation === 'vertical';
         const keyCode = event.keyCode;
         switch (keyCode) {
             case SPACE:
             case ENTER:
-                event.preventDefault();
-                this.toggle();
-                this.menuPanel?._menu?.focusFirstItem('keyboard');
+                if (!hasModifierKey(event)) {
+                    event.preventDefault();
+                    this.toggle();
+                    this.childMenu?.focusFirstItem('keyboard');
+                }
                 break;
             case RIGHT_ARROW:
-                if (this._parentMenu && this._isParentVertical()) {
-                    event.preventDefault();
-                    if (this._directionality?.value === 'rtl') {
-                        this._getMenuStack().close(this._parentMenu, 2 /* currentItem */);
-                    }
-                    else {
-                        this.openMenu();
-                        this.menuPanel?._menu?.focusFirstItem('keyboard');
+                if (!hasModifierKey(event)) {
+                    if (this._parentMenu && isParentVertical && this._directionality?.value !== 'rtl') {
+                        event.preventDefault();
+                        this.open();
+                        this.childMenu?.focusFirstItem('keyboard');
                     }
                 }
                 break;
             case LEFT_ARROW:
-                if (this._parentMenu && this._isParentVertical()) {
-                    event.preventDefault();
-                    if (this._directionality?.value === 'rtl') {
-                        this.openMenu();
-                        this.menuPanel?._menu?.focusFirstItem('keyboard');
-                    }
-                    else {
-                        this._getMenuStack().close(this._parentMenu, 2 /* currentItem */);
+                if (!hasModifierKey(event)) {
+                    if (this._parentMenu && isParentVertical && this._directionality?.value === 'rtl') {
+                        event.preventDefault();
+                        this.open();
+                        this.childMenu?.focusFirstItem('keyboard');
                     }
                 }
                 break;
             case DOWN_ARROW:
             case UP_ARROW:
-                if (!this._isParentVertical()) {
-                    event.preventDefault();
-                    this.openMenu();
-                    keyCode === DOWN_ARROW
-                        ? this.menuPanel?._menu?.focusFirstItem('keyboard')
-                        : this.menuPanel?._menu?.focusLastItem('keyboard');
+                if (!hasModifierKey(event)) {
+                    if (!isParentVertical) {
+                        event.preventDefault();
+                        this.open();
+                        keyCode === DOWN_ARROW
+                            ? this.childMenu?.focusFirstItem('keyboard')
+                            : this.childMenu?.focusLastItem('keyboard');
+                    }
                 }
                 break;
         }
     }
+    /**
+     * Sets whether the trigger's menu stack has focus.
+     * @param hasFocus Whether the menu stack has focus.
+     */
+    _setHasFocus(hasFocus) {
+        if (!this._parentMenu) {
+            this.menuStack.setHasFocus(hasFocus);
+        }
+    }
+    /**
+     * Subscribe to the mouseenter events and close any sibling menu items if this element is moused
+     * into.
+     */
+    _subscribeToMouseEnter() {
+        // Closes any sibling menu items and opens the menu associated with this trigger.
+        const toggleMenus = () => this._ngZone.run(() => {
+            this._closeSiblingTriggers();
+            this.open();
+        });
+        this._ngZone.runOutsideAngular(() => {
+            fromEvent(this._elementRef.nativeElement, 'mouseenter')
+                .pipe(filter(() => !this.menuStack.isEmpty() && !this.isOpen()), takeUntil(this.destroyed))
+                .subscribe(() => {
+                if (this._menuAim) {
+                    this._menuAim.toggle(toggleMenus);
+                }
+                else {
+                    toggleMenus();
+                }
+            });
+        });
+    }
     /** Close out any sibling menu trigger menus. */
     _closeSiblingTriggers() {
         if (this._parentMenu) {
-            const menuStack = this._getMenuStack();
             // If nothing was removed from the stack and the last element is not the parent item
             // that means that the parent menu is a menu bar since we don't put the menu bar on the
             // stack
-            const isParentMenuBar = !menuStack.closeSubMenuOf(this._parentMenu) && menuStack.peek() !== this._parentMenu;
+            const isParentMenuBar = !this.menuStack.closeSubMenuOf(this._parentMenu) &&
+                this.menuStack.peek() !== this._parentMenu;
             if (isParentMenuBar) {
-                menuStack.closeAll();
+                this.menuStack.closeAll();
             }
         }
         else {
-            this._getMenuStack().closeAll();
+            this.menuStack.closeAll();
         }
     }
-    /** Get the configuration object used to create the overlay */
+    /** Get the configuration object used to create the overlay. */
     _getOverlayConfig() {
         return new OverlayConfig({
             positionStrategy: this._getOverlayPositionStrategy(),
@@ -557,46 +707,19 @@ class CdkMenuItemTrigger {
             direction: this._directionality,
         });
     }
-    /** Build the position strategy for the overlay which specifies where to place the menu */
+    /** Build the position strategy for the overlay which specifies where to place the menu. */
     _getOverlayPositionStrategy() {
         return this._overlay
             .position()
             .flexibleConnectedTo(this._elementRef)
             .withPositions(this._getOverlayPositions());
     }
-    /** Determine and return where to position the opened menu relative to the menu item */
+    /** Get the preferred positions for the opened menu relative to the menu item. */
     _getOverlayPositions() {
-        // TODO: use a common positioning config from (possibly) cdk/overlay
-        return !this._parentMenu || this._parentMenu.orientation === 'horizontal'
-            ? [
-                { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
-                { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
-                { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },
-                { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' },
-            ]
-            : [
-                { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top' },
-                { originX: 'end', originY: 'bottom', overlayX: 'start', overlayY: 'bottom' },
-                { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top' },
-                { originX: 'start', originY: 'bottom', overlayX: 'end', overlayY: 'bottom' },
-            ];
-    }
-    /**
-     * Get the portal to be attached to the overlay which contains the menu. Allows for the menu
-     * content to change dynamically and be reflected in the application.
-     */
-    _getPortal() {
-        const hasMenuContentChanged = this.menuPanel?._templateRef !== this._panelContent?.templateRef;
-        if (this.menuPanel && (!this._panelContent || hasMenuContentChanged)) {
-            this._panelContent = new TemplatePortal(this.menuPanel._templateRef, this._viewContainerRef);
-        }
-        return this._panelContent;
-    }
-    /**
-     * @return true if if the enclosing parent menu is configured in a vertical orientation.
-     */
-    _isParentVertical() {
-        return this._parentMenu?.orientation === 'vertical';
+        return (this.menuPosition ??
+            (!this._parentMenu || this._parentMenu.orientation === 'horizontal'
+                ? STANDARD_DROPDOWN_BELOW_POSITIONS
+                : STANDARD_DROPDOWN_ADJACENT_POSITIONS));
     }
     /**
      * Subscribe to the MenuStack close events if this is a standalone trigger and close out the menu
@@ -604,78 +727,84 @@ class CdkMenuItemTrigger {
      */
     _registerCloseHandler() {
         if (!this._parentMenu) {
-            this._menuStack.closed.pipe(takeUntil(this._destroyed)).subscribe(item => {
-                if (item === this._menuPanel?._menu) {
-                    this.closeMenu();
+            this.menuStack.closed.pipe(takeUntil(this.destroyed)).subscribe(({ item }) => {
+                if (item === this.childMenu) {
+                    this.close();
                 }
             });
         }
     }
-    /** Get the menu stack for this trigger - either from the parent or this trigger. */
-    _getMenuStack() {
-        // We use a function since at the construction of the MenuItemTrigger the parent Menu won't have
-        // its menu stack set. Therefore we need to reference the menu stack from the parent each time
-        // we want to use it.
-        return this._parentMenu?._menuStack || this._menuStack;
-    }
-    ngOnDestroy() {
-        this._destroyOverlay();
-        this._resetPanelMenuStack();
-        this._destroyed.next();
-        this._destroyed.complete();
-    }
-    /** Set the menu panels menu stack back to null. */
-    _resetPanelMenuStack() {
-        // If a CdkMenuTrigger is placed in a submenu, each time the trigger is rendered (its parent
-        // menu is opened) the panel setter for CdkMenuPanel is called. From the first render onward,
-        // the attached CdkMenuPanel has the MenuStack set. Since we throw an error if a panel already
-        // has a stack set, we want to reset the attached stack here to prevent the error from being
-        // thrown if the trigger re-configures its attached panel (in the case where there is a 1:1
-        // relationship between the panel and trigger).
-        if (this._menuPanel) {
-            this._menuPanel._menuStack = null;
-        }
-    }
     /**
      * Subscribe to the overlays outside pointer events stream and handle closing out the stack if a
      * click occurs outside the menus.
      */
     _subscribeToOutsideClicks() {
-        if (this._overlayRef) {
-            this._overlayRef
+        if (this.overlayRef) {
+            this.overlayRef
                 .outsidePointerEvents()
-                .pipe(takeUntil(this._stopOutsideClicksListener))
+                .pipe(filter(e => e.target != this._elementRef.nativeElement &&
+                !this._elementRef.nativeElement.contains(e.target)), takeUntil(this.stopOutsideClicksListener))
                 .subscribe(event => {
-                if (!isClickInsideMenuOverlay(event.target)) {
-                    this._getMenuStack().closeAll();
+                if (!this.isElementInsideMenuStack(event.target)) {
+                    this.menuStack.closeAll();
+                }
+                else {
+                    this._closeSiblingTriggers();
                 }
             });
         }
     }
-    /** Destroy and unset the overlay reference it if exists */
-    _destroyOverlay() {
-        if (this._overlayRef) {
-            this._overlayRef.dispose();
-            this._overlayRef = null;
+    /** Subscribe to the MenuStack hasFocus events. */
+    _subscribeToMenuStackHasFocus() {
+        if (!this._parentMenu) {
+            this.menuStack.hasFocus.pipe(takeUntil(this.destroyed)).subscribe(hasFocus => {
+                if (!hasFocus) {
+                    this.menuStack.closeAll();
+                }
+            });
+        }
+    }
+    /** Subscribe to the MenuStack closed events. */
+    _subscribeToMenuStackClosed() {
+        if (!this._parentMenu) {
+            this.menuStack.closed.subscribe(({ focusParentTrigger }) => {
+                if (focusParentTrigger && !this.menuStack.length()) {
+                    this._elementRef.nativeElement.focus();
+                }
+            });
         }
     }
 }
-CdkMenuItemTrigger.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: CdkMenuItemTrigger, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1.Overlay }, { token: i0.NgZone }, { token: CDK_MENU, optional: true }, { token: MENU_AIM, optional: true }, { token: i2.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-CdkMenuItemTrigger.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: CdkMenuItemTrigger, selector: "[cdkMenuTriggerFor]", inputs: { menuPanel: ["cdkMenuTriggerFor", "menuPanel"] }, 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" }, exportAs: ["cdkMenuTriggerFor"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: CdkMenuItemTrigger, decorators: [{
+CdkMenuTrigger.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuTrigger, 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 });
+CdkMenuTrigger.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "14.0.0-next.9", type: CdkMenuTrigger, selector: "[cdkMenuTriggerFor]", inputs: { menuTemplateRef: ["cdkMenuTriggerFor", "menuTemplateRef"], menuPosition: ["cdkMenuPosition", "menuPosition"] }, outputs: { opened: "cdkMenuOpened", closed: "cdkMenuClosed" }, host: { attributes: { "aria-haspopup": "menu" }, listeners: { "focusin": "_setHasFocus(true)", "focusout": "_setHasFocus(false)", "keydown": "_toggleOnKeydown($event)", "click": "toggle()" }, properties: { "attr.aria-expanded": "isOpen()" }, classAttribute: "cdk-menu-trigger" }, providers: [
+        { provide: MENU_TRIGGER, useExisting: CdkMenuTrigger },
+        PARENT_OR_NEW_MENU_STACK_PROVIDER,
+    ], exportAs: ["cdkMenuTriggerFor"], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuTrigger, 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()',
+                        '[attr.aria-expanded]': 'isOpen()',
+                        '(focusin)': '_setHasFocus(true)',
+                        '(focusout)': '_setHasFocus(false)',
+                        '(keydown)': '_toggleOnKeydown($event)',
+                        '(click)': 'toggle()',
                     },
+                    inputs: ['menuTemplateRef: cdkMenuTriggerFor', 'menuPosition: cdkMenuPosition'],
+                    outputs: ['opened: cdkMenuOpened', 'closed: cdkMenuClosed'],
+                    providers: [
+                        { provide: MENU_TRIGGER, useExisting: CdkMenuTrigger },
+                        PARENT_OR_NEW_MENU_STACK_PROVIDER,
+                    ],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i1.Overlay }, { type: i0.NgZone }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i1.Overlay }, { type: i0.NgZone }, { type: MenuStack, decorators: [{
+                    type: Inject,
+                    args: [MENU_STACK]
+                }] }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -685,18 +814,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
                 }, {
                     type: Inject,
                     args: [MENU_AIM]
-                }] }, { type: i2.Directionality, decorators: [{
+                }] }, { type: i1$1.Directionality, decorators: [{
                     type: Optional
-                }] }]; }, propDecorators: { menuPanel: [{
-                type: Input,
-                args: ['cdkMenuTriggerFor']
-            }], opened: [{
-                type: Output,
-                args: ['cdkMenuOpened']
-            }], closed: [{
-                type: Output,
-                args: ['cdkMenuClosed']
-            }] } });
+                }] }]; } });
 
 /**
  * @license
@@ -705,26 +825,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
  * 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
  */
-// TODO refactor this to be configurable allowing for custom elements to be removed
-/** Removes all icons from within the given element. */
-function removeIcons(element) {
-    for (const icon of Array.from(element.querySelectorAll('mat-icon, .material-icons'))) {
-        icon.remove();
-    }
-}
 /**
  * Directive which provides the ability for an element to be focused and navigated to using the
  * keyboard when residing in a CdkMenu, CdkMenuBar, or CdkMenuGroup. It performs user defined
  * behavior when clicked.
  */
 class CdkMenuItem {
-    constructor(_elementRef, _ngZone, _parentMenu, _menuAim, _dir, 
+    constructor(
+    /** The host element for this item. */
+    _elementRef, 
+    /** The Angular zone. */
+    _ngZone, 
+    /** The menu stack this item belongs to. */
+    _menuStack, 
+    /** The parent menu this item belongs to. */
+    _parentMenu, 
+    /** The menu aim service used for this item. */
+    _menuAim, 
+    /** The directionality of the page. */
+    _dir, 
     /** Reference to the CdkMenuItemTrigger directive if one is added to the same element */
-    // `CdkMenuItem` is commonly used in combination with a `CdkMenuItemTrigger`.
     // tslint:disable-next-line: lightweight-tokens
     _menuTrigger) {
         this._elementRef = _elementRef;
         this._ngZone = _ngZone;
+        this._menuStack = _menuStack;
         this._parentMenu = _parentMenu;
         this._menuAim = _menuAim;
         this._dir = _dir;
@@ -735,13 +860,17 @@ class CdkMenuItem {
          * event.
          */
         this.triggered = new EventEmitter();
+        /** Whether the menu item opens a menu. */
+        this.hasMenu = !!this._menuTrigger;
         /**
          * The tabindex for this menu item managed internally and used for implementing roving a
          * tab index.
          */
         this._tabindex = -1;
+        /** Whether the item should close the menu if triggered by the spacebar. */
+        this.closeOnSpacebarTrigger = true;
         /** Emits when the menu item is destroyed. */
-        this._destroyed = new Subject();
+        this.destroyed = new Subject();
         this._setupMouseEnter();
         if (this._isStandaloneItem()) {
             this._tabindex = 0;
@@ -754,50 +883,32 @@ class CdkMenuItem {
     set disabled(value) {
         this._disabled = coerceBooleanProperty(value);
     }
+    ngOnDestroy() {
+        this.destroyed.next();
+        this.destroyed.complete();
+    }
     /** Place focus on the element. */
     focus() {
         this._elementRef.nativeElement.focus();
     }
-    /** Reset the _tabindex to -1. */
-    _resetTabIndex() {
-        if (!this._isStandaloneItem()) {
-            this._tabindex = -1;
-        }
-    }
-    /**
-     * Set the tab index to 0 if not disabled and it's a focus event, or a mouse enter if this element
-     * is not in a menu bar.
-     */
-    _setTabIndex(event) {
-        if (this.disabled) {
-            return;
-        }
-        // don't set the tabindex if there are no open sibling or parent menus
-        if (!event || !this._getMenuStack()?.isEmpty()) {
-            this._tabindex = 0;
-        }
-    }
-    /** Whether this menu item is standalone or within a menu or menu bar. */
-    _isStandaloneItem() {
-        return !this._parentMenu;
-    }
     /**
      * If the menu item is not disabled and the element does not have a menu trigger attached, emit
      * on the cdkMenuItemTriggered emitter and close all open menus.
+     * @param options Options the configure how the item is triggered
+     *   - keepOpen: specifies that the menu should be kept open after triggering the item.
      */
-    trigger() {
-        if (!this.disabled && !this.hasMenu()) {
+    trigger(options) {
+        const { keepOpen } = { ...options };
+        if (!this.disabled && !this.hasMenu) {
             this.triggered.next();
-            this._getMenuStack()?.closeAll();
+            if (!keepOpen) {
+                this._menuStack.closeAll({ focusParentTrigger: true });
+            }
         }
     }
-    /** Whether the menu item opens a menu. */
-    hasMenu() {
-        return !!this._menuTrigger?.hasMenu();
-    }
     /** Return true if this MenuItem has an attached menu and it is open. */
     isMenuOpen() {
-        return !!this._menuTrigger?.isMenuOpen();
+        return !!this._menuTrigger?.isOpen();
     }
     /**
      * Get a reference to the rendered Menu if the Menu is open and it is visible in the DOM.
@@ -806,20 +917,35 @@ class CdkMenuItem {
     getMenu() {
         return this._menuTrigger?.getMenu();
     }
-    /** Get the MenuItemTrigger associated with this element. */
+    /** Get the CdkMenuTrigger associated with this element. */
     getMenuTrigger() {
         return this._menuTrigger;
     }
     /** Get the label for this element which is required by the FocusableOption interface. */
     getLabel() {
-        // TODO cloning the tree may be expensive; implement a better method
-        // we know that the current node is an element type
-        const clone = this._elementRef.nativeElement.cloneNode(true);
-        removeIcons(clone);
-        return clone.textContent?.trim() || '';
+        return this.typeaheadLabel || this._elementRef.nativeElement.textContent?.trim() || '';
     }
-    /**
-     * Handles keyboard events for the menu item, specifically either triggering the user defined
+    /** Reset the tabindex to -1. */
+    _resetTabIndex() {
+        if (!this._isStandaloneItem()) {
+            this._tabindex = -1;
+        }
+    }
+    /**
+     * Set the tab index to 0 if not disabled and it's a focus event, or a mouse enter if this element
+     * is not in a menu bar.
+     */
+    _setTabIndex(event) {
+        if (this.disabled) {
+            return;
+        }
+        // don't set the tabindex if there are no open sibling or parent menus
+        if (!event || !this._menuStack.isEmpty()) {
+            this._tabindex = 0;
+        }
+    }
+    /**
+     * Handles keyboard events for the menu item, specifically either triggering the user defined
      * callback or opening/closing the current menu based on whether the left or right arrow key was
      * pressed.
      * @param event the keyboard event to handle
@@ -828,36 +954,79 @@ class CdkMenuItem {
         switch (event.keyCode) {
             case SPACE:
             case ENTER:
-                event.preventDefault();
-                this.trigger();
+                if (!hasModifierKey(event)) {
+                    event.preventDefault();
+                    this.trigger({ keepOpen: event.keyCode === SPACE && !this.closeOnSpacebarTrigger });
+                }
                 break;
             case RIGHT_ARROW:
-                if (this._parentMenu && this._isParentVertical() && !this.hasMenu()) {
-                    event.preventDefault();
-                    this._dir?.value === 'rtl'
-                        ? this._getMenuStack()?.close(this._parentMenu, 1 /* previousItem */)
-                        : this._getMenuStack()?.closeAll(0 /* nextItem */);
+                if (!hasModifierKey(event)) {
+                    if (this._parentMenu && this._isParentVertical()) {
+                        if (this._dir?.value !== 'rtl') {
+                            this._forwardArrowPressed(event);
+                        }
+                        else {
+                            this._backArrowPressed(event);
+                        }
+                    }
                 }
                 break;
             case LEFT_ARROW:
-                if (this._parentMenu && this._isParentVertical() && !this.hasMenu()) {
-                    event.preventDefault();
-                    this._dir?.value === 'rtl'
-                        ? this._getMenuStack()?.closeAll(0 /* nextItem */)
-                        : this._getMenuStack()?.close(this._parentMenu, 1 /* previousItem */);
+                if (!hasModifierKey(event)) {
+                    if (this._parentMenu && this._isParentVertical()) {
+                        if (this._dir?.value !== 'rtl') {
+                            this._backArrowPressed(event);
+                        }
+                        else {
+                            this._forwardArrowPressed(event);
+                        }
+                    }
                 }
                 break;
         }
     }
+    /** Whether this menu item is standalone or within a menu or menu bar. */
+    _isStandaloneItem() {
+        return !this._parentMenu;
+    }
+    /**
+     * Handles the user pressing the back arrow key.
+     * @param event The keyboard event.
+     */
+    _backArrowPressed(event) {
+        const parentMenu = this._parentMenu;
+        if (this._menuStack.hasInlineMenu() || this._menuStack.length() > 1) {
+            event.preventDefault();
+            this._menuStack.close(parentMenu, {
+                focusNextOnEmpty: this._menuStack.inlineMenuOrientation() === 'horizontal'
+                    ? 1 /* previousItem */
+                    : 2 /* currentItem */,
+                focusParentTrigger: true,
+            });
+        }
+    }
+    /**
+     * Handles the user pressing the forward arrow key.
+     * @param event The keyboard event.
+     */
+    _forwardArrowPressed(event) {
+        if (!this.hasMenu && this._menuStack.inlineMenuOrientation() === 'horizontal') {
+            event.preventDefault();
+            this._menuStack.closeAll({
+                focusNextOnEmpty: 0 /* nextItem */,
+                focusParentTrigger: true,
+            });
+        }
+    }
     /**
      * Subscribe to the mouseenter events and close any sibling menu items if this element is moused
      * into.
      */
     _setupMouseEnter() {
         if (!this._isStandaloneItem()) {
-            const closeOpenSiblings = () => this._ngZone.run(() => this._getMenuStack()?.closeSubMenuOf(this._parentMenu));
+            const closeOpenSiblings = () => this._ngZone.run(() => this._menuStack.closeSubMenuOf(this._parentMenu));
             this._ngZone.runOutsideAngular(() => fromEvent(this._elementRef.nativeElement, 'mouseenter')
-                .pipe(filter(() => !this._getMenuStack()?.isEmpty() && !this.hasMenu()), takeUntil(this._destroyed))
+                .pipe(filter(() => !this._menuStack.isEmpty() && !this.hasMenu), takeUntil(this.destroyed))
                 .subscribe(() => {
                 if (this._menuAim) {
                     this._menuAim.toggle(closeOpenSiblings);
@@ -875,39 +1044,29 @@ class CdkMenuItem {
     _isParentVertical() {
         return this._parentMenu?.orientation === 'vertical';
     }
-    /** Get the MenuStack from the parent menu. */
-    _getMenuStack() {
-        // We use a function since at the construction of the MenuItemTrigger the parent Menu won't have
-        // its menu stack set. Therefore we need to reference the menu stack from the parent each time
-        // we want to use it.
-        return this._parentMenu?._menuStack;
-    }
-    ngOnDestroy() {
-        this._destroyed.next();
-    }
 }
-CdkMenuItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: CdkMenuItem, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: CDK_MENU, optional: true }, { token: MENU_AIM, optional: true }, { token: i2.Directionality, optional: true }, { token: CdkMenuItemTrigger, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
-CdkMenuItem.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: CdkMenuItem, selector: "[cdkMenuItem]", inputs: { disabled: "disabled" }, 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: "13.3.0", 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: CdkMenuTrigger, 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: ["cdkMenuItemDisabled", "disabled"], typeaheadLabel: ["cdkMenuitemTypeaheadLabel", "typeaheadLabel"] }, outputs: { triggered: "cdkMenuItemTriggered" }, host: { attributes: { "role": "menuitem" }, listeners: { "blur": "_resetTabIndex()", "focus": "_setTabIndex()", "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]',
                     exportAs: 'cdkMenuItem',
                     host: {
-                        '[tabindex]': '_tabindex',
-                        'type': 'button',
                         'role': 'menuitem',
                         'class': 'cdk-menu-item',
+                        '[tabindex]': '_tabindex',
                         '[attr.aria-disabled]': 'disabled || null',
                         '(blur)': '_resetTabIndex()',
-                        '(mouseout)': '_resetTabIndex()',
                         '(focus)': '_setTabIndex()',
-                        '(mouseenter)': '_setTabIndex($event)',
                         '(click)': 'trigger()',
                         '(keydown)': '_onKeydown($event)',
                     },
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: MenuStack, decorators: [{
+                    type: Inject,
+                    args: [MENU_STACK]
+                }] }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -917,14 +1076,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
                 }, {
                     type: Inject,
                     args: [MENU_AIM]
-                }] }, { type: i2.Directionality, decorators: [{
+                }] }, { type: i1$1.Directionality, decorators: [{
                     type: Optional
-                }] }, { type: CdkMenuItemTrigger, decorators: [{
+                }] }, { type: CdkMenuTrigger, decorators: [{
                     type: Self
                 }, {
                     type: Optional
                 }] }]; }, propDecorators: { disabled: [{
-                type: Input
+                type: Input,
+                args: ['cdkMenuItemDisabled']
+            }], typeaheadLabel: [{
+                type: Input,
+                args: ['cdkMenuitemTypeaheadLabel']
             }], triggered: [{
                 type: Output,
                 args: ['cdkMenuItemTriggered']
@@ -937,51 +1100,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
  * 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
  */
-/** Counter used to set a unique id and name for a selectable item */
-let nextId = 0;
 /**
- * Base class providing checked state for MenuItems along with outputting a clicked event when the
- * element is triggered. It provides functionality for selectable elements.
+ * PointerFocusTracker keeps track of the currently active item under mouse focus. It also has
+ * observables which emit when the users mouse enters and leaves a tracked element.
  */
-class CdkMenuItemSelectable extends CdkMenuItem {
-    constructor() {
-        super(...arguments);
-        /** Event emitted when the selectable item is clicked */
-        this.toggled = new EventEmitter();
-        this._checked = false;
-        /** The name of the selectable element with a default value */
-        this.name = `cdk-selectable-item-${nextId++}`;
-        /** The id of the selectable element with a default value */
-        this.id = `cdk-selectable-item-${nextId++}`;
+class PointerFocusTracker {
+    constructor(
+    /** The list of items being tracked. */
+    _items) {
+        this._items = _items;
+        /** Emits when an element is moused into. */
+        this.entered = this._getItemPointerEntries();
+        /** Emits when an element is moused out. */
+        this.exited = this._getItemPointerExits();
+        /** Emits when this is destroyed. */
+        this._destroyed = new Subject();
+        this.entered.subscribe(element => (this.activeElement = element));
+        this.exited.subscribe(() => {
+            this.previousElement = this.activeElement;
+            this.activeElement = undefined;
+        });
     }
-    /** Whether the element is checked */
-    get checked() {
-        return this._checked;
+    /** Stop the managers listeners. */
+    destroy() {
+        this._destroyed.next();
+        this._destroyed.complete();
     }
-    set checked(value) {
-        this._checked = coerceBooleanProperty(value);
+    /**
+     * Gets a stream of pointer (mouse) entries into the given items.
+     * This should typically run outside the Angular zone.
+     */
+    _getItemPointerEntries() {
+        return defer(() => this._items.changes.pipe(startWith(this._items), mergeMap((list) => list.map(element => fromEvent(element._elementRef.nativeElement, 'mouseenter').pipe(mapTo(element), takeUntil(this._items.changes)))), mergeAll()));
     }
-    /** If the element is not disabled emit the click event */
-    trigger() {
-        if (!this.disabled) {
-            this.toggled.next(this);
-        }
+    /**
+     * Gets a stream of pointer (mouse) exits out of the given items.
+     * This should typically run outside the Angular zone.
+     */
+    _getItemPointerExits() {
+        return defer(() => this._items.changes.pipe(startWith(this._items), mergeMap((list) => list.map(element => fromEvent(element._elementRef.nativeElement, 'mouseout').pipe(mapTo(element), takeUntil(this._items.changes)))), mergeAll()));
     }
 }
-CdkMenuItemSelectable.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: CdkMenuItemSelectable, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-CdkMenuItemSelectable.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: CdkMenuItemSelectable, inputs: { checked: "checked", name: "name", id: "id" }, outputs: { toggled: "cdkMenuItemToggled" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: CdkMenuItemSelectable, decorators: [{
-            type: Directive
-        }], propDecorators: { toggled: [{
-                type: Output,
-                args: ['cdkMenuItemToggled']
-            }], checked: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }] } });
 
 /**
  * @license
@@ -990,143 +1149,188 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
  * 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
  */
+/** Counter used to create unique IDs for menus. */
+let nextId$1 = 0;
 /**
- * Directive which acts as a grouping container for `CdkMenuItem` instances with
- * `role="menuitemradio"`, similar to a `role="radiogroup"` element.
+ * Abstract directive that implements shared logic common to all menus.
+ * This class can be extended to create custom menu types.
  */
-class CdkMenuGroup {
-    constructor() {
-        /** Emits the element when checkbox or radiobutton state changed  */
-        this.change = new EventEmitter();
-        /** Emits when the _selectableItems QueryList triggers a change */
-        this._selectableChanges = new EventEmitter();
+class CdkMenuBase extends CdkMenuGroup {
+    constructor(
+    /** The host element. */
+    elementRef, 
+    /** The Angular zone. */
+    ngZone, 
+    /** The stack of menus this menu belongs to. */
+    menuStack, 
+    /** The menu aim service used by this menu. */
+    menuAim, 
+    /** The directionality of the current page. */
+    dir) {
+        super();
+        this.ngZone = ngZone;
+        this.menuStack = menuStack;
+        this.menuAim = menuAim;
+        this.dir = dir;
+        /** The id of the menu's host element. */
+        this.id = `cdk-menu-${nextId$1++}`;
+        /** The direction items in the menu flow. */
+        this.orientation = 'vertical';
+        /** Whether the menu is displayed inline (i.e. always present vs a conditional popup that the user triggers with a trigger element). */
+        this.isInline = false;
+        /** Emits when the MenuBar is destroyed. */
+        this.destroyed = new Subject();
+        /** Whether this menu's menu stack has focus. */
+        this._menuStackHasFocus = false;
+        this.nativeElement = elementRef.nativeElement;
     }
     ngAfterContentInit() {
-        this._registerMenuSelectionListeners();
+        if (!this.isInline) {
+            this.menuStack.push(this);
+        }
+        this._setKeyManager();
+        this._subscribeToMenuStackHasFocus();
+        this._subscribeToMenuOpen();
+        this._subscribeToMenuStackClosed();
+        this._setUpPointerTracker();
+    }
+    ngOnDestroy() {
+        this.destroyed.next();
+        this.destroyed.complete();
+        this.pointerTracker?.destroy();
     }
     /**
-     * Register the child selectable elements with the change emitter and ensure any new child
-     * elements do so as well.
+     * Place focus on the first MenuItem in the menu and set the focus origin.
+     * @param focusOrigin The origin input mode of the focus event.
      */
-    _registerMenuSelectionListeners() {
-        this._selectableItems.forEach(selectable => this._registerClickListener(selectable));
-        this._selectableItems.changes.subscribe((selectableItems) => {
-            this._selectableChanges.next();
-            selectableItems.forEach(selectable => this._registerClickListener(selectable));
-        });
-    }
-    /** Register each selectable to emit on the change Emitter when clicked */
-    _registerClickListener(selectable) {
-        selectable.toggled
-            .pipe(takeUntil(this._selectableChanges))
-            .subscribe(() => this.change.next(selectable));
+    focusFirstItem(focusOrigin = 'program') {
+        this.keyManager.setFocusOrigin(focusOrigin);
+        this.keyManager.setFirstItemActive();
     }
-    ngOnDestroy() {
-        this._selectableChanges.next();
-        this._selectableChanges.complete();
+    /**
+     * Place focus on the last MenuItem in the menu and set the focus origin.
+     * @param focusOrigin The origin input mode of the focus event.
+     */
+    focusLastItem(focusOrigin = 'program') {
+        this.keyManager.setFocusOrigin(focusOrigin);
+        this.keyManager.setLastItemActive();
     }
-}
-CdkMenuGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: CdkMenuGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-CdkMenuGroup.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", 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: "13.3.0", ngImport: i0, type: CdkMenuGroup, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[cdkMenuGroup]',
-                    exportAs: 'cdkMenuGroup',
-                    host: {
-                        'role': 'group',
-                        'class': 'cdk-menu-group',
-                    },
-                    providers: [{ provide: UniqueSelectionDispatcher, useClass: UniqueSelectionDispatcher }],
-                }]
-        }], propDecorators: { change: [{
-                type: Output
-            }], _selectableItems: [{
-                type: ContentChildren,
-                args: [CdkMenuItemSelectable, { descendants: true }]
-            }] } });
-
-/**
- * @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
- */
-/**
- * Directive applied to an ng-template which wraps a CdkMenu and provides a reference to the
- * child element it wraps which allows for opening of the CdkMenu in an overlay.
- */
-class CdkMenuPanel {
-    constructor(_templateRef) {
-        this._templateRef = _templateRef;
+    /** Gets the tabindex for this menu. */
+    _getTabIndex() {
+        const tabindexIfInline = this._menuStackHasFocus ? -1 : 0;
+        return this.isInline ? tabindexIfInline : null;
     }
     /**
-     * Set the Menu component on the menu panel. Since we cannot use ContentChild to fetch the
-     * child Menu component, the child Menu must register its self with the parent MenuPanel.
+     * Close the open menu if the current active item opened the requested MenuStackItem.
+     * @param menu The menu requested to be closed.
+     * @param options Options to configure the behavior on close.
+     *   - `focusParentTrigger` Whether to focus the parent trigger after closing the menu.
      */
-    _registerMenu(child) {
-        this._menu = child;
-        // The ideal solution would be to affect the CdkMenuPanel injector from the CdkMenuTrigger and
-        // inject the menu stack reference into the child menu and menu items, however this isn't
-        // possible at this time.
-        this._menu._menuStack = this._menuStack;
-        this._menuStack?.push(child);
+    closeOpenMenu(menu, options) {
+        const { focusParentTrigger } = { ...options };
+        const keyManager = this.keyManager;
+        const trigger = this.triggerItem;
+        if (menu === trigger?.getMenuTrigger()?.getMenu()) {
+            trigger?.getMenuTrigger()?.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 (focusParentTrigger) {
+                if (trigger) {
+                    keyManager.setActiveItem(trigger);
+                }
+                else {
+                    keyManager.setFirstItemActive();
+                }
+            }
+        }
     }
-}
-CdkMenuPanel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: CdkMenuPanel, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-CdkMenuPanel.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: CdkMenuPanel, selector: "ng-template[cdkMenuPanel]", exportAs: ["cdkMenuPanel"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: CdkMenuPanel, decorators: [{
-            type: Directive,
-            args: [{ selector: 'ng-template[cdkMenuPanel]', exportAs: 'cdkMenuPanel' }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
-
-/**
- * @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
- */
-/**
- * PointerFocusTracker keeps track of the currently active item under mouse focus. It also has
- * observables which emit when the users mouse enters and leaves a tracked element.
- */
-class PointerFocusTracker {
-    constructor(_items) {
-        this._items = _items;
-        /** Emits when an element is moused into. */
-        this.entered = this._getItemPointerEntries();
-        /** Emits when an element is moused out. */
-        this.exited = this._getItemPointerExits();
-        /** Emits when this is destroyed. */
-        this._destroyed = new Subject();
-        this.entered.subscribe(element => (this.activeElement = element));
-        this.exited.subscribe(() => {
-            this.previousElement = this.activeElement;
-            this.activeElement = undefined;
-        });
+    /** Setup the FocusKeyManager with the correct orientation for the menu. */
+    _setKeyManager() {
+        this.keyManager = new FocusKeyManager(this.items).withWrap().withTypeAhead().withHomeAndEnd();
+        if (this.orientation === 'horizontal') {
+            this.keyManager.withHorizontalOrientation(this.dir?.value || 'ltr');
+        }
+        else {
+            this.keyManager.withVerticalOrientation();
+        }
     }
     /**
-     * Gets a stream of pointer (mouse) entries into the given items.
-     * This should typically run outside the Angular zone.
+     * 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.
      */
-    _getItemPointerEntries() {
-        return defer(() => this._items.changes.pipe(startWith(this._items), mergeMap((list) => list.map(element => fromEvent(element._elementRef.nativeElement, 'mouseenter').pipe(mapTo(element), takeUntil(this._items.changes)))), mergeAll()));
+    _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.triggerItem = item;
+            return item.getMenuTrigger().closed;
+        }), takeUntil(this.destroyed))
+            .subscribe(() => (this.triggerItem = undefined));
+    }
+    /** Subscribe to the MenuStack close events. */
+    _subscribeToMenuStackClosed() {
+        this.menuStack.closed
+            .pipe(takeUntil(this.destroyed))
+            .subscribe(({ item, focusParentTrigger }) => this.closeOpenMenu(item, { focusParentTrigger }));
+    }
+    /** Subscribe to the MenuStack hasFocus events. */
+    _subscribeToMenuStackHasFocus() {
+        if (this.isInline) {
+            this.menuStack.hasFocus.pipe(takeUntil(this.destroyed)).subscribe(hasFocus => {
+                this._menuStackHasFocus = hasFocus;
+            });
+        }
     }
     /**
-     * Gets a stream of pointer (mouse) exits out of the given items.
-     * This should typically run outside the Angular zone.
+     * Set the PointerFocusTracker and ensure that when mouse focus changes the key manager is updated
+     * with the latest menu item under mouse focus.
      */
-    _getItemPointerExits() {
-        return defer(() => this._items.changes.pipe(startWith(this._items), mergeMap((list) => list.map(element => fromEvent(element._elementRef.nativeElement, 'mouseout').pipe(mapTo(element), takeUntil(this._items.changes)))), mergeAll()));
-    }
-    /** Stop the managers listeners. */
-    destroy() {
-        this._destroyed.next();
-        this._destroyed.complete();
+    _setUpPointerTracker() {
+        if (this.menuAim) {
+            this.ngZone.runOutsideAngular(() => {
+                this.pointerTracker = new PointerFocusTracker(this.items);
+            });
+            this.menuAim.initialize(this, this.pointerTracker);
+        }
     }
 }
+CdkMenuBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuBase, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: MENU_STACK }, { token: MENU_AIM, optional: true, self: true }, { 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, inputs: { id: "id" }, host: { attributes: { "role": "menu" }, listeners: { "focus": "focusFirstItem()", "focusin": "menuStack.setHasFocus(true)", "focusout": "menuStack.setHasFocus(false)" }, properties: { "tabindex": "_getTabIndex()", "id": "id", "attr.aria-orientation": "orientation", "attr.data-cdk-menu-stack-id": "menuStack.id" } }, 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: {
+                        'role': 'menu',
+                        'class': '',
+                        '[tabindex]': '_getTabIndex()',
+                        '[id]': 'id',
+                        '[attr.aria-orientation]': 'orientation',
+                        '[attr.data-cdk-menu-stack-id]': 'menuStack.id',
+                        '(focus)': 'focusFirstItem()',
+                        '(focusin)': 'menuStack.setHasFocus(true)',
+                        '(focusout)': 'menuStack.setHasFocus(false)',
+                    },
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: MenuStack, decorators: [{
+                    type: Inject,
+                    args: [MENU_STACK]
+                }] }, { type: undefined, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MENU_AIM]
+                }] }, { type: i1$1.Directionality, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { id: [{
+                type: Input
+            }], items: [{
+                type: ContentChildren,
+                args: [CdkMenuItem, { descendants: true }]
+            }] } });
 
 /**
  * @license
@@ -1142,67 +1346,49 @@ class PointerFocusTracker {
  *
  * It also acts as a RadioGroup for elements marked with role `menuitemradio`.
  */
-class CdkMenu extends CdkMenuGroup {
-    constructor(_ngZone, _elementRef, _menuAim, _dir, 
-    // `CdkMenuPanel` is always used in combination with a `CdkMenu`.
-    // tslint:disable-next-line: lightweight-tokens
-    _menuPanel) {
-        super();
-        this._ngZone = _ngZone;
-        this._elementRef = _elementRef;
-        this._menuAim = _menuAim;
-        this._dir = _dir;
-        this._menuPanel = _menuPanel;
-        /**
-         * Sets the aria-orientation attribute and determines where menus will be opened.
-         * Does not affect styling/layout.
-         */
-        this.orientation = 'vertical';
+class CdkMenu extends CdkMenuBase {
+    constructor(
+    /** The host element. */
+    elementRef, 
+    /** The Angular zone. */
+    ngZone, 
+    /** The menu stack this menu is part of. */
+    menuStack, 
+    /** The trigger that opened this menu. */
+    _parentTrigger, 
+    /** The menu aim service used by this menu. */
+    menuAim, 
+    /** The directionality of the page. */
+    dir) {
+        super(elementRef, ngZone, menuStack, menuAim, dir);
+        this._parentTrigger = _parentTrigger;
         /** Event emitted when the menu is closed. */
         this.closed = 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. */
-        this._menuStack = new NoopMenuStack();
-    }
-    ngOnInit() {
-        this._registerWithParentPanel();
+        /** The direction items in the menu flow. */
+        this.orientation = 'vertical';
+        /** Whether the menu is displayed inline (i.e. always present vs a conditional popup that the user triggers with a trigger element). */
+        this.isInline = !this._parentTrigger;
+        this.destroyed.subscribe(this.closed);
+        this._parentTrigger?.registerChildMenu(this);
     }
     ngAfterContentInit() {
         super.ngAfterContentInit();
-        this._completeChangeEmitter();
-        this._setKeyManager();
-        this._subscribeToMenuOpen();
-        this._subscribeToMenuStack();
-        this._subscribeToMouseManager();
-        this._menuAim?.initialize(this, this._pointerTracker);
+        this._subscribeToMenuStackEmptied();
     }
-    /** 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();
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.closed.complete();
     }
-    /** Handle keyboard events for the Menu. */
+    /**
+     * Handle keyboard events for the Menu.
+     * @param event The keyboard event to be handled.
+     */
     _handleKeyEvent(event) {
-        const keyManager = this._keyManager;
+        const keyManager = this.keyManager;
         switch (event.keyCode) {
             case LEFT_ARROW:
             case RIGHT_ARROW:
-                if (this._isHorizontal()) {
-                    event.preventDefault();
-                    keyManager.setFocusOrigin('keyboard');
-                    keyManager.onKeydown(event);
-                }
-                break;
-            case UP_ARROW:
-            case DOWN_ARROW:
-                if (!this._isHorizontal()) {
+                if (!hasModifierKey(event)) {
                     event.preventDefault();
                     keyManager.setFocusOrigin('keyboard');
                     keyManager.onKeydown(event);
@@ -1211,101 +1397,28 @@ class CdkMenu extends CdkMenuGroup {
             case ESCAPE:
                 if (!hasModifierKey(event)) {
                     event.preventDefault();
-                    this._menuStack.close(this, 2 /* currentItem */);
+                    this.menuStack.close(this, {
+                        focusNextOnEmpty: 2 /* currentItem */,
+                        focusParentTrigger: true,
+                    });
                 }
                 break;
             case TAB:
-                this._menuStack.closeAll();
+                if (!hasModifierKey(event, 'altKey', 'metaKey', 'ctrlKey')) {
+                    this.menuStack.closeAll({ focusParentTrigger: true });
+                }
                 break;
             default:
                 keyManager.onKeydown(event);
         }
     }
-    /** Register this menu with its enclosing parent menu panel */
-    _registerWithParentPanel() {
-        this._getMenuPanel()?._registerMenu(this);
-    }
-    /**
-     * Get the enclosing CdkMenuPanel defaulting to the injected reference over the developer
-     * provided reference.
-     */
-    _getMenuPanel() {
-        return this._menuPanel || this._explicitPanel;
-    }
-    /**
-     * 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
-     */
-    _completeChangeEmitter() {
-        if (this._hasNestedGroups()) {
-            this.change.complete();
-        }
-        else {
-            this._nestedGroups.changes.pipe(take(1)).subscribe(() => this.change.complete());
-        }
-    }
-    /** Return true if there are nested CdkMenuGroup elements within the Menu */
-    _hasNestedGroups() {
-        // view engine has a bug where @ContentChildren will return the current element
-        // along with children if the selectors match - not just the children.
-        // Here, if there is at least one element, we check to see if the first element is a CdkMenu in
-        // 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() {
-        this._keyManager = new FocusKeyManager(this._allItems)
-            .withWrap()
-            .withTypeAhead()
-            .withHomeAndEnd();
-        if (this._isHorizontal()) {
-            this._keyManager.withHorizontalOrientation(this._dir?.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.closed))
-                .subscribe(item => this._keyManager.setActiveItem(item));
-        });
-    }
-    /** Subscribe to the MenuStack close and empty observables. */
-    _subscribeToMenuStack() {
-        this._menuStack.closed
-            .pipe(takeUntil(this.closed))
-            .subscribe(item => this._closeOpenMenu(item));
-        this._menuStack.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.
+     * Set focus the either the current, previous or next item based on the FocusNext event.
+     * @param focusNext The element to focus.
      */
-    _closeOpenMenu(menu) {
-        const keyManager = this._keyManager;
-        const trigger = this._openItem;
-        if (menu === trigger?.getMenuTrigger()?.getMenu()) {
-            trigger?.getMenuTrigger()?.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(this._pointerTracker?.activeElement || trigger);
-            }
-        }
-    }
-    /** Set focus the either the current, previous or next item based on the FocusNext event. */
-    _toggleMenuFocus(event) {
-        const keyManager = this._keyManager;
-        switch (event) {
+    _toggleMenuFocus(focusNext) {
+        const keyManager = this.keyManager;
+        switch (focusNext) {
             case 0 /* nextItem */:
                 keyManager.setFocusOrigin('keyboard');
                 keyManager.setNextItemActive();
@@ -1322,95 +1435,55 @@ 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() {
-        // NoopMenuStack is the default. If this menu is not inline than the NoopMenuStack is replaced
-        // automatically.
-        return this._menuStack instanceof NoopMenuStack;
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this._emitClosedEvent();
-        this._pointerTracker?.destroy();
-    }
-    /** Emit and complete the closed event emitter */
-    _emitClosedEvent() {
-        this.closed.next();
-        this.closed.complete();
+    /** Subscribe to the MenuStack emptied events. */
+    _subscribeToMenuStackEmptied() {
+        this.menuStack.emptied
+            .pipe(takeUntil(this.destroyed))
+            .subscribe(event => this._toggleMenuFocus(event));
     }
 }
-CdkMenu.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: CdkMenu, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: MENU_AIM, optional: true, self: true }, { token: i2.Directionality, optional: true }, { token: CdkMenuPanel, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-CdkMenu.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: CdkMenu, selector: "[cdkMenu]", inputs: { orientation: ["cdkMenuOrientation", "orientation"], _explicitPanel: ["cdkMenuPanel", "_explicitPanel"] }, 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.ElementRef }, { token: i0.NgZone }, { 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: { "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: "13.3.0", ngImport: i0, type: CdkMenu, decorators: [{
+        PARENT_OR_NEW_INLINE_MENU_STACK_PROVIDER('vertical'),
+    ], 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',
-                        '[class.cdk-menu-inline]': '_isInline()',
-                        '[attr.aria-orientation]': 'orientation',
-                        '(focus)': 'focusFirstItem()',
+                        '[class.cdk-menu-inline]': 'isInline',
                         '(keydown)': '_handleKeyEvent($event)',
                     },
                     providers: [
                         { provide: CdkMenuGroup, useExisting: CdkMenu },
                         { provide: CDK_MENU, useExisting: CdkMenu },
+                        PARENT_OR_NEW_INLINE_MENU_STACK_PROVIDER('vertical'),
                     ],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: MenuStack, decorators: [{
+                    type: Inject,
+                    args: [MENU_STACK]
+                }] }, { type: CdkMenuTriggerBase, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MENU_TRIGGER]
+                }] }, { type: undefined, decorators: [{
                     type: Self
                 }, {
                     type: Optional
                 }, {
                     type: Inject,
                     args: [MENU_AIM]
-                }] }, { type: i2.Directionality, decorators: [{
+                }] }, { type: i1$1.Directionality, decorators: [{
                     type: Optional
-                }] }, { type: CdkMenuPanel, 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 }]
-            }], _explicitPanel: [{
-                type: Input,
-                args: ['cdkMenuPanel']
             }] } });
 
 /**
@@ -1426,147 +1499,88 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
  * this directive is applied to should contain components marked with CdkMenuItem.
  *
  */
-class CdkMenuBar extends CdkMenuGroup {
-    constructor(_menuStack, _ngZone, _elementRef, _menuAim, _dir) {
-        super();
-        this._menuStack = _menuStack;
-        this._ngZone = _ngZone;
-        this._elementRef = _elementRef;
-        this._menuAim = _menuAim;
-        this._dir = _dir;
-        /**
-         * Sets the aria-orientation attribute and determines where menus will be opened.
-         * Does not affect styling/layout.
-         */
+class CdkMenuBar extends CdkMenuBase {
+    constructor(
+    /** The host element. */
+    elementRef, 
+    /** The Angular zone. */
+    ngZone, 
+    /** The menu stack this menu is part of. */
+    menuStack, 
+    /** The menu aim service used by this menu. */
+    menuAim, 
+    /** The directionality of the page. */
+    dir) {
+        super(elementRef, ngZone, menuStack, menuAim, dir);
+        /** The direction items in the menu flow. */
         this.orientation = 'horizontal';
-        /** Emits when the MenuBar is destroyed. */
-        this._destroyed = new Subject();
+        /** Whether the menu is displayed inline (i.e. always present vs a conditional popup that the user triggers with a trigger element). */
+        this.isInline = true;
     }
     ngAfterContentInit() {
         super.ngAfterContentInit();
-        this._setKeyManager();
-        this._subscribeToMenuOpen();
-        this._subscribeToMenuStack();
-        this._subscribeToMouseManager();
-        this._menuAim?.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();
-    }
-    /** Place focus on the last MenuItem in the menu and set the focus origin. */
-    focusLastItem(focusOrigin = 'program') {
-        this._keyManager.setFocusOrigin(focusOrigin);
-        this._keyManager.setLastItemActive();
+        this._subscribeToMenuStackEmptied();
     }
     /**
-     * Handle keyboard events, specifically changing the focused element and/or toggling the active
-     * items menu.
-     * @param event the KeyboardEvent to handle.
+     * Handle keyboard events for the Menu.
+     * @param event The keyboard event to be handled.
      */
     _handleKeyEvent(event) {
-        const keyManager = this._keyManager;
+        const keyManager = this.keyManager;
         switch (event.keyCode) {
             case UP_ARROW:
             case DOWN_ARROW:
             case LEFT_ARROW:
             case RIGHT_ARROW:
-                const horizontalArrows = event.keyCode === LEFT_ARROW || event.keyCode === RIGHT_ARROW;
-                // 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)) {
-                    event.preventDefault();
-                    const prevIsOpen = keyManager.activeItem?.isMenuOpen();
-                    keyManager.activeItem?.getMenuTrigger()?.closeMenu();
-                    keyManager.setFocusOrigin('keyboard');
-                    keyManager.onKeydown(event);
-                    if (prevIsOpen) {
-                        keyManager.activeItem?.getMenuTrigger()?.openMenu();
+                if (!hasModifierKey(event)) {
+                    const horizontalArrows = event.keyCode === LEFT_ARROW || event.keyCode === RIGHT_ARROW;
+                    // 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 (horizontalArrows) {
+                        event.preventDefault();
+                        const prevIsOpen = keyManager.activeItem?.isMenuOpen();
+                        keyManager.activeItem?.getMenuTrigger()?.close();
+                        keyManager.setFocusOrigin('keyboard');
+                        keyManager.onKeydown(event);
+                        if (prevIsOpen) {
+                            keyManager.activeItem?.getMenuTrigger()?.open();
+                        }
                     }
                 }
                 break;
             case ESCAPE:
-                event.preventDefault();
-                keyManager.activeItem?.getMenuTrigger()?.closeMenu();
+                if (!hasModifierKey(event)) {
+                    event.preventDefault();
+                    keyManager.activeItem?.getMenuTrigger()?.close();
+                }
                 break;
             case TAB:
-                keyManager.activeItem?.getMenuTrigger()?.closeMenu();
+                if (!hasModifierKey(event, 'altKey', 'metaKey', 'ctrlKey')) {
+                    keyManager.activeItem?.getMenuTrigger()?.close();
+                }
                 break;
             default:
                 keyManager.onKeydown(event);
         }
     }
-    /** Setup the FocusKeyManager with the correct orientation for the menu bar. */
-    _setKeyManager() {
-        this._keyManager = new FocusKeyManager(this._allItems)
-            .withWrap()
-            .withTypeAhead()
-            .withHomeAndEnd();
-        if (this._isHorizontal()) {
-            this._keyManager.withHorizontalOrientation(this._dir?.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);
-                }
-            });
-        });
-    }
-    /** 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) {
-        const trigger = this._openItem;
-        const keyManager = this._keyManager;
-        if (menu === trigger?.getMenuTrigger()?.getMenu()) {
-            trigger?.getMenuTrigger()?.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(this._pointerTracker?.activeElement || trigger);
-            }
-        }
-    }
     /**
      * Set focus to either the current, previous or next item based on the FocusNext event, then
      * open the previous or next item.
+     * @param focusNext The element to focus.
      */
-    _toggleOpenMenu(event) {
-        const keyManager = this._keyManager;
-        switch (event) {
+    _toggleOpenMenu(focusNext) {
+        const keyManager = this.keyManager;
+        switch (focusNext) {
             case 0 /* nextItem */:
                 keyManager.setFocusOrigin('keyboard');
                 keyManager.setNextItemActive();
-                keyManager.activeItem?.getMenuTrigger()?.openMenu();
+                keyManager.activeItem?.getMenuTrigger()?.open();
                 break;
             case 1 /* previousItem */:
                 keyManager.setFocusOrigin('keyboard');
                 keyManager.setPreviousItemActive();
-                keyManager.activeItem?.getMenuTrigger()?.openMenu();
+                keyManager.activeItem?.getMenuTrigger()?.open();
                 break;
             case 2 /* currentItem */:
                 if (keyManager.activeItem) {
@@ -1576,45 +1590,20 @@ 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() {
-        super.ngOnDestroy();
-        this._destroyed.next();
-        this._destroyed.complete();
-        this._pointerTracker?.destroy();
+    /** Subscribe to the MenuStack emptied events. */
+    _subscribeToMenuStackEmptied() {
+        this.menuStack?.emptied
+            .pipe(takeUntil(this.destroyed))
+            .subscribe(event => this._toggleOpenMenu(event));
     }
 }
-CdkMenuBar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: CdkMenuBar, deps: [{ token: MenuStack }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: MENU_AIM, optional: true, self: true }, { token: i2.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-CdkMenuBar.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", 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.ElementRef }, { token: i0.NgZone }, { 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" }, listeners: { "keydown": "_handleKeyEvent($event)" }, classAttribute: "cdk-menu-bar" }, providers: [
         { provide: CdkMenuGroup, useExisting: CdkMenuBar },
         { provide: CDK_MENU, useExisting: CdkMenuBar },
-        { provide: MenuStack, useClass: MenuStack },
-    ], queries: [{ propertyName: "_allItems", predicate: CdkMenuItem, descendants: true }], exportAs: ["cdkMenuBar"], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: CdkMenuBar, decorators: [{
+        { provide: MENU_STACK, useFactory: () => MenuStack.inline('horizontal') },
+    ], 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]',
@@ -1622,32 +1611,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
                     host: {
                         '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: MenuStack, useClass: MenuStack },
+                        { provide: MENU_STACK, useFactory: () => MenuStack.inline('horizontal') },
                     ],
                 }]
-        }], ctorParameters: function () { return [{ type: MenuStack }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: MenuStack, decorators: [{
+                    type: Inject,
+                    args: [MENU_STACK]
+                }] }, { type: undefined, decorators: [{
                     type: Self
                 }, {
                     type: Optional
                 }, {
                     type: Inject,
                     args: [MENU_AIM]
-                }] }, { type: i2.Directionality, decorators: [{
+                }] }, { type: i1$1.Directionality, decorators: [{
                     type: Optional
-                }] }]; }, propDecorators: { orientation: [{
+                }] }]; } });
+
+/**
+ * @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
+ */
+/** Base class providing checked state for selectable MenuItems. */
+class CdkMenuItemSelectable extends CdkMenuItem {
+    constructor() {
+        super(...arguments);
+        this._checked = false;
+        /** Whether the item should close the menu if triggered by the spacebar. */
+        this.closeOnSpacebarTrigger = false;
+    }
+    /** Whether the element is checked */
+    get checked() {
+        return this._checked;
+    }
+    set checked(value) {
+        this._checked = coerceBooleanProperty(value);
+    }
+}
+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: ["cdkMenuItemChecked", "checked"] }, host: { properties: { "attr.aria-checked": "!!checked", "attr.aria-disabled": "disabled || null" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0-next.9", ngImport: i0, type: CdkMenuItemSelectable, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        '[attr.aria-checked]': '!!checked',
+                        '[attr.aria-disabled]': 'disabled || null',
+                    },
+                }]
+        }], propDecorators: { checked: [{
                 type: Input,
-                args: ['cdkMenuBarOrientation']
-            }], _allItems: [{
-                type: ContentChildren,
-                args: [CdkMenuItem, { descendants: true }]
+                args: ['cdkMenuItemChecked']
             }] } });
 
 /**
@@ -1657,60 +1678,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
  * 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
  */
+/** Counter used to set a unique id and name for a selectable item */
+let nextId = 0;
 /**
  * A directive providing behavior for the "menuitemradio" ARIA role, which behaves similarly to
  * a conventional radio-button. Any sibling `CdkMenuItemRadio` instances within the same `CdkMenu`
  * or `CdkMenuGroup` comprise a radio group with unique selection enforced.
  */
 class CdkMenuItemRadio extends CdkMenuItemSelectable {
-    constructor(_selectionDispatcher, element, ngZone, parentMenu, menuAim, dir, 
+    constructor(
+    /** The host element for this radio item. */
+    element, 
+    /** The Angular zone. */
+    ngZone, 
+    /** The unique selection dispatcher for this radio's `CdkMenuGroup`. */
+    _selectionDispatcher, 
+    /** The menu stack this item belongs to. */
+    menuStack, 
+    /** The parent menu for this item. */
+    parentMenu, 
+    /** The menu aim used for this item. */
+    menuAim, 
+    /** The directionality of the page. */
+    dir, 
     /** Reference to the CdkMenuItemTrigger directive if one is added to the same element */
-    // `CdkMenuItemRadio` is commonly used in combination with a `CdkMenuItemTrigger`.
     // tslint:disable-next-line: lightweight-tokens
     menuTrigger) {
-        super(element, ngZone, parentMenu, menuAim, dir, menuTrigger);
+        super(element, ngZone, menuStack, parentMenu, menuAim, dir, menuTrigger);
         this._selectionDispatcher = _selectionDispatcher;
+        /** An ID to identify this radio item to the `UniqueSelectionDisptcher`. */
+        this._id = `${nextId++}`;
         this._registerDispatcherListener();
     }
-    /** Configure the unique selection dispatcher listener in order to toggle the checked state  */
-    _registerDispatcherListener() {
-        this._removeDispatcherListener = this._selectionDispatcher.listen((id, name) => (this.checked = this.id === id && this.name === name));
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this._removeDispatcherListener();
     }
-    /** Toggles the checked state of the radio-button. */
-    trigger() {
-        super.trigger();
+    /**
+     * Toggles the checked state of the radio-button.
+     * @param options Options the configure how the item is triggered
+     *   - keepOpen: specifies that the menu should be kept open after triggering the item.
+     */
+    trigger(options) {
+        super.trigger(options);
         if (!this.disabled) {
-            this._selectionDispatcher.notify(this.id, this.name);
+            this._selectionDispatcher.notify(this._id, '');
         }
     }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this._removeDispatcherListener();
+    /** Configure the unique selection dispatcher listener in order to toggle the checked state  */
+    _registerDispatcherListener() {
+        this._removeDispatcherListener = this._selectionDispatcher.listen((id) => {
+            this.checked = this._id === id;
+        });
     }
 }
-CdkMenuItemRadio.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: CdkMenuItemRadio, deps: [{ token: i1$1.UniqueSelectionDispatcher }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: CDK_MENU, optional: true }, { token: MENU_AIM, optional: true }, { token: i2.Directionality, optional: true }, { token: CdkMenuItemTrigger, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
-CdkMenuItemRadio.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", 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: i0.ElementRef }, { token: i0.NgZone }, { token: i1$2.UniqueSelectionDispatcher }, { token: MENU_STACK }, { token: CDK_MENU, optional: true }, { token: MENU_AIM, optional: true }, { token: i1$1.Directionality, optional: true }, { token: CdkMenuTrigger, 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: { "role": "menuitemradio" } }, providers: [
         { provide: CdkMenuItemSelectable, useExisting: CdkMenuItemRadio },
         { provide: CdkMenuItem, useExisting: CdkMenuItemSelectable },
     ], exportAs: ["cdkMenuItemRadio"], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", 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]',
                     exportAs: 'cdkMenuItemRadio',
                     host: {
-                        '[tabindex]': '_tabindex',
-                        'type': 'button',
                         'role': 'menuitemradio',
-                        '[attr.aria-checked]': 'checked || null',
-                        '[attr.aria-disabled]': 'disabled || null',
                     },
                     providers: [
                         { provide: CdkMenuItemSelectable, useExisting: CdkMenuItemRadio },
                         { provide: CdkMenuItem, useExisting: CdkMenuItemSelectable },
                     ],
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.UniqueSelectionDispatcher }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1$2.UniqueSelectionDispatcher }, { type: MenuStack, decorators: [{
+                    type: Inject,
+                    args: [MENU_STACK]
+                }] }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -1720,9 +1763,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
                 }, {
                     type: Inject,
                     args: [MENU_AIM]
-                }] }, { type: i2.Directionality, decorators: [{
+                }] }, { type: i1$1.Directionality, decorators: [{
                     type: Optional
-                }] }, { type: CdkMenuItemTrigger, decorators: [{
+                }] }, { type: CdkMenuTrigger, decorators: [{
                     type: Self
                 }, {
                     type: Optional
@@ -1740,30 +1783,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
  * conventional checkbox.
  */
 class CdkMenuItemCheckbox extends CdkMenuItemSelectable {
-    /** Toggle the checked state of the checkbox. */
-    trigger() {
-        super.trigger();
+    /**
+     * Toggle the checked state of the checkbox.
+     * @param options Options the configure how the item is triggered
+     *   - keepOpen: specifies that the menu should be kept open after triggering the item.
+     */
+    trigger(options) {
+        super.trigger(options);
         if (!this.disabled) {
             this.checked = !this.checked;
         }
     }
 }
-CdkMenuItemCheckbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: CdkMenuItemCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-CdkMenuItemCheckbox.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", 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: { "role": "menuitemcheckbox" } }, providers: [
         { provide: CdkMenuItemSelectable, useExisting: CdkMenuItemCheckbox },
         { provide: CdkMenuItem, useExisting: CdkMenuItemSelectable },
     ], exportAs: ["cdkMenuItemCheckbox"], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", 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]',
                     exportAs: 'cdkMenuItemCheckbox',
                     host: {
-                        '[tabindex]': '_tabindex',
-                        'type': 'button',
                         'role': 'menuitemcheckbox',
-                        '[attr.aria-checked]': 'checked || null',
-                        '[attr.aria-disabled]': 'disabled || null',
                     },
                     providers: [
                         { provide: CdkMenuItemSelectable, useExisting: CdkMenuItemCheckbox },
@@ -1779,11 +1822,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
  * 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
  */
+/** The preferred menu positions for the context menu. */
+const CONTEXT_MENU_POSITIONS = STANDARD_DROPDOWN_BELOW_POSITIONS.map(position => {
+    // In cases where the first menu item in the context menu is a trigger the submenu opens on a
+    // hover event. We offset the context menu 2px by default to prevent this from occurring.
+    const offsetX = position.overlayX === 'start' ? 2 : -2;
+    const offsetY = position.overlayY === 'top' ? 2 : -2;
+    return { ...position, offsetX, offsetY };
+});
 /** Tracks the last open context menu trigger across the entire application. */
 class ContextMenuTracker {
     /**
      * Close the previous open context menu and set the given one as being open.
-     * @param trigger the trigger for the currently open Context Menu.
+     * @param trigger The trigger for the currently open Context Menu.
      */
     update(trigger) {
         if (ContextMenuTracker._openContextMenuTrigger !== trigger) {
@@ -1792,55 +1843,38 @@ class ContextMenuTracker {
         }
     }
 }
-ContextMenuTracker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: ContextMenuTracker, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ContextMenuTracker.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: ContextMenuTracker, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", 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' }]
         }] });
-/** Injection token for the ContextMenu options object. */
-const CDK_CONTEXT_MENU_DEFAULT_OPTIONS = new InjectionToken('cdk-context-menu-default-options');
 /**
- * A directive which when placed on some element opens a the Menu it is bound to when a user
- * right-clicks within that element. It is aware of nested Context Menus and the lowest level
- * non-disabled context menu will trigger.
+ * A directive that opens a menu when a user right-clicks within its host element.
+ * It is aware of nested context menus and will trigger only the lowest level non-disabled context menu.
  */
-class CdkContextMenuTrigger {
-    constructor(_viewContainerRef, _overlay, _contextMenuTracker, _options, _directionality) {
-        this._viewContainerRef = _viewContainerRef;
+class CdkContextMenuTrigger extends CdkMenuTriggerBase {
+    constructor(
+    /** The DI injector for this component */
+    injector, 
+    /** The view container ref for this component */
+    viewContainerRef, 
+    /** The CDK overlay service */
+    _overlay, 
+    /** The app's context menu tracking registry */
+    _contextMenuTracker, 
+    /** The menu stack this menu is part of. */
+    menuStack, 
+    /** The directionality of the current page */
+    _directionality) {
+        super(injector, viewContainerRef, menuStack);
         this._overlay = _overlay;
         this._contextMenuTracker = _contextMenuTracker;
-        this._options = _options;
         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();
-        /** The menu stack for this trigger and its associated menus. */
-        this._menuStack = new MenuStack();
-        /** Emits when the outside pointer events listener on the overlay should be stopped. */
-        this._stopOutsideClicksListener = merge(this.closed, this._destroyed);
-        this._setMenuStackListener();
-    }
-    /** Template reference variable to the menu to open on right click. */
-    get menuPanel() {
-        return this._menuPanel;
+        this._setMenuStackCloseListener();
     }
-    set menuPanel(panel) {
-        if ((typeof ngDevMode === 'undefined' || ngDevMode) && panel._menuStack) {
-            throwExistingMenuStackError();
-        }
-        this._menuPanel = panel;
-        if (this._menuPanel) {
-            this._menuPanel._menuStack = this._menuStack;
-        }
-    }
-    /** Whether the context menu should be disabled. */
+    /** Whether the context menu is disabled. */
     get disabled() {
         return this._disabled;
     }
@@ -1854,36 +1888,12 @@ class CdkContextMenuTrigger {
     open(coordinates) {
         this._open(coordinates, false);
     }
-    _open(coordinates, ignoreFirstOutsideAuxClick) {
-        if (this.disabled) {
-            return;
-        }
-        else if (this.isOpen()) {
-            // since we're moving this menu we need to close any submenus first otherwise they end up
-            // disconnected from this one.
-            this._menuStack.closeSubMenuOf(this._menuPanel._menu);
-            this._overlayRef.getConfig().positionStrategy.setOrigin(coordinates);
-            this._overlayRef.updatePosition();
-        }
-        else {
-            this.opened.next();
-            if (this._overlayRef) {
-                this._overlayRef.getConfig().positionStrategy.setOrigin(coordinates);
-                this._overlayRef.updatePosition();
-            }
-            else {
-                this._overlayRef = this._overlay.create(this._getOverlayConfig(coordinates));
-            }
-            this._overlayRef.attach(this._getMenuContent());
-            this._subscribeToOutsideClicks(ignoreFirstOutsideAuxClick);
-        }
-    }
-    /** Close the opened menu. */
+    /** Close the currently opened context menu. */
     close() {
-        this._menuStack.closeAll();
+        this.menuStack.closeAll();
     }
     /**
-     * Open the context menu and close any previously open menus.
+     * Open the context menu and closes any previously open menus.
      * @param event the mouse event which opens the context menu.
      */
     _openOnContextMenu(event) {
@@ -1898,20 +1908,16 @@ class CdkContextMenuTrigger {
             this._open({ x: event.clientX, y: event.clientY }, true);
             // A context menu can be triggered via a mouse right click or a keyboard shortcut.
             if (event.button === 2) {
-                this._menuPanel._menu?.focusFirstItem('mouse');
+                this.childMenu?.focusFirstItem('mouse');
             }
             else if (event.button === 0) {
-                this._menuPanel._menu?.focusFirstItem('keyboard');
+                this.childMenu?.focusFirstItem('keyboard');
             }
             else {
-                this._menuPanel._menu?.focusFirstItem('program');
+                this.childMenu?.focusFirstItem('program');
             }
         }
     }
-    /** Whether the attached menu is open. */
-    isOpen() {
-        return !!this._overlayRef?.hasAttached();
-    }
     /**
      * Get the configuration object used to create the overlay.
      * @param coordinates the location to place the opened menu
@@ -1924,130 +1930,102 @@ class CdkContextMenuTrigger {
         });
     }
     /**
-     * Build the position strategy for the overlay which specifies where to place the menu.
+     * Get the position strategy for the overlay which specifies where to place the menu.
      * @param coordinates the location to place the opened menu
      */
     _getOverlayPositionStrategy(coordinates) {
         return this._overlay
             .position()
             .flexibleConnectedTo(coordinates)
-            .withDefaultOffsetX(this._options.offsetX)
-            .withDefaultOffsetY(this._options.offsetY)
-            .withPositions(this._getOverlayPositions());
-    }
-    /**
-     * Determine and return where to position the opened menu relative to the mouse location.
-     */
-    _getOverlayPositions() {
-        // TODO: this should be configurable through the injected context menu options
-        return [
-            { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top' },
-            { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top' },
-            { originX: 'end', originY: 'bottom', overlayX: 'start', overlayY: 'bottom' },
-            { originX: 'start', originY: 'bottom', overlayX: 'end', overlayY: 'bottom' },
-        ];
-    }
-    /**
-     * Get the portal to be attached to the overlay which contains the menu. Allows for the menu
-     * content to change dynamically and be reflected in the application.
-     */
-    _getMenuContent() {
-        const hasMenuContentChanged = this.menuPanel._templateRef !== this._panelContent?.templateRef;
-        if (this.menuPanel && (!this._panelContent || hasMenuContentChanged)) {
-            this._panelContent = new TemplatePortal(this.menuPanel._templateRef, this._viewContainerRef);
-        }
-        return this._panelContent;
+            .withPositions(this.menuPosition ?? CONTEXT_MENU_POSITIONS);
     }
     /** Subscribe to the menu stack close events and close this menu when requested. */
-    _setMenuStackListener() {
-        this._menuStack.closed.pipe(takeUntil(this._destroyed)).subscribe(item => {
-            if (item === this._menuPanel._menu && this.isOpen()) {
+    _setMenuStackCloseListener() {
+        this.menuStack.closed.pipe(takeUntil(this.destroyed)).subscribe(({ item }) => {
+            if (item === this.childMenu && this.isOpen()) {
                 this.closed.next();
-                this._overlayRef.detach();
+                this.overlayRef.detach();
             }
         });
     }
     /**
      * Subscribe to the overlays outside pointer events stream and handle closing out the stack if a
      * click occurs outside the menus.
+     * @param ignoreFirstAuxClick Whether to ignore the first auxclick event outside the menu.
      */
     _subscribeToOutsideClicks(ignoreFirstAuxClick) {
-        if (this._overlayRef) {
-            let outsideClicks = this._overlayRef.outsidePointerEvents();
+        if (this.overlayRef) {
+            let outsideClicks = this.overlayRef.outsidePointerEvents();
             // If the menu was triggered by the `contextmenu` event, skip the first `auxclick` event
             // because it fires when the mouse is released on the same click that opened the menu.
             if (ignoreFirstAuxClick) {
                 const [auxClicks, nonAuxClicks] = partition(outsideClicks, ({ type }) => type === 'auxclick');
                 outsideClicks = merge(nonAuxClicks, auxClicks.pipe(skip(1)));
             }
-            outsideClicks.pipe(takeUntil(this._stopOutsideClicksListener)).subscribe(event => {
-                if (!isClickInsideMenuOverlay(event.target)) {
-                    this._menuStack.closeAll();
+            outsideClicks.pipe(takeUntil(this.stopOutsideClicksListener)).subscribe(event => {
+                if (!this.isElementInsideMenuStack(event.target)) {
+                    this.menuStack.closeAll();
                 }
             });
         }
     }
-    ngOnDestroy() {
-        this._destroyOverlay();
-        this._resetPanelMenuStack();
-        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;
+    /**
+     * Open the attached menu at the specified location.
+     * @param coordinates where to open the context menu
+     * @param ignoreFirstOutsideAuxClick Whether to ignore the first auxclick outside the menu after opening.
+     */
+    _open(coordinates, ignoreFirstOutsideAuxClick) {
+        if (this.disabled) {
+            return;
         }
-    }
-    /** Set the menu panels menu stack back to null. */
-    _resetPanelMenuStack() {
-        // If a ContextMenuTrigger is placed in a conditionally rendered view, each time the trigger is
-        // rendered the panel setter for ContextMenuTrigger is called. From the first render onward,
-        // the attached CdkMenuPanel has the MenuStack set. Since we throw an error if a panel already
-        // has a stack set, we want to reset the attached stack here to prevent the error from being
-        // thrown if the trigger re-configures its attached panel (in the case where there is a 1:1
-        // relationship between the panel and trigger).
-        if (this._menuPanel) {
-            this._menuPanel._menuStack = null;
+        if (this.isOpen()) {
+            // since we're moving this menu we need to close any submenus first otherwise they end up
+            // disconnected from this one.
+            this.menuStack.closeSubMenuOf(this.childMenu);
+            this.overlayRef.getConfig().positionStrategy.setOrigin(coordinates);
+            this.overlayRef.updatePosition();
+        }
+        else {
+            this.opened.next();
+            if (this.overlayRef) {
+                this.overlayRef.getConfig().positionStrategy.setOrigin(coordinates);
+                this.overlayRef.updatePosition();
+            }
+            else {
+                this.overlayRef = this._overlay.create(this._getOverlayConfig(coordinates));
+            }
+            this.overlayRef.attach(this.getMenuContentPortal());
+            this._subscribeToOutsideClicks(ignoreFirstOutsideAuxClick);
         }
     }
 }
-CdkContextMenuTrigger.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: CdkContextMenuTrigger, deps: [{ token: i0.ViewContainerRef }, { token: i1.Overlay }, { token: ContextMenuTracker }, { token: CDK_CONTEXT_MENU_DEFAULT_OPTIONS }, { token: i2.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-CdkContextMenuTrigger.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: CdkContextMenuTrigger, selector: "[cdkContextMenuTriggerFor]", inputs: { menuPanel: ["cdkContextMenuTriggerFor", "menuPanel"], disabled: ["cdkContextMenuDisabled", "disabled"] }, outputs: { opened: "cdkContextMenuOpened", closed: "cdkContextMenuClosed" }, host: { listeners: { "contextmenu": "_openOnContextMenu($event)" } }, providers: [
-        // In cases where the first menu item in the context menu is a trigger the submenu opens on a
-        // hover event. Offsetting the opened context menu by 2px prevents this from occurring.
-        { provide: CDK_CONTEXT_MENU_DEFAULT_OPTIONS, useValue: { offsetX: 2, offsetY: 2 } },
-    ], exportAs: ["cdkContextMenuTriggerFor"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: CdkContextMenuTrigger, decorators: [{
+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)" }, properties: { "attr.data-cdk-menu-stack-id": "null" } }, 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.9", ngImport: i0, type: CdkContextMenuTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cdkContextMenuTriggerFor]',
                     exportAs: 'cdkContextMenuTriggerFor',
                     host: {
+                        '[attr.data-cdk-menu-stack-id]': 'null',
                         '(contextmenu)': '_openOnContextMenu($event)',
                     },
+                    inputs: ['menuTemplateRef: cdkContextMenuTriggerFor', 'menuPosition: cdkContextMenuPosition'],
+                    outputs: ['opened: cdkContextMenuOpened', 'closed: cdkContextMenuClosed'],
                     providers: [
-                        // In cases where the first menu item in the context menu is a trigger the submenu opens on a
-                        // hover event. Offsetting the opened context menu by 2px prevents this from occurring.
-                        { provide: CDK_CONTEXT_MENU_DEFAULT_OPTIONS, useValue: { offsetX: 2, offsetY: 2 } },
+                        { provide: MENU_TRIGGER, useExisting: CdkContextMenuTrigger },
+                        { provide: MENU_STACK, useClass: MenuStack },
                     ],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i1.Overlay }, { type: ContextMenuTracker }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ViewContainerRef }, { type: i1.Overlay }, { type: ContextMenuTracker }, { type: MenuStack, decorators: [{
                     type: Inject,
-                    args: [CDK_CONTEXT_MENU_DEFAULT_OPTIONS]
-                }] }, { type: i2.Directionality, decorators: [{
+                    args: [MENU_STACK]
+                }] }, { type: i1$1.Directionality, decorators: [{
                     type: Optional
-                }] }]; }, propDecorators: { menuPanel: [{
-                type: Input,
-                args: ['cdkContextMenuTriggerFor']
-            }], opened: [{
-                type: Output,
-                args: ['cdkContextMenuOpened']
-            }], closed: [{
-                type: Output,
-                args: ['cdkContextMenuClosed']
-            }], disabled: [{
+                }] }]; }, propDecorators: { disabled: [{
                 type: Input,
                 args: ['cdkContextMenuDisabled']
             }] } });
@@ -2059,42 +2037,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
  * 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
  */
+/** The list of components and directives that should be declared and exported from this module. */
 const EXPORTED_DECLARATIONS = [
     CdkMenuBar,
     CdkMenu,
-    CdkMenuPanel,
     CdkMenuItem,
     CdkMenuItemRadio,
     CdkMenuItemCheckbox,
-    CdkMenuItemTrigger,
+    CdkMenuTrigger,
     CdkMenuGroup,
     CdkContextMenuTrigger,
     CdkTargetMenuAim,
 ];
+/** Module that declares components and directives for the CDK menu. */
 class CdkMenuModule {
 }
-CdkMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: CdkMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CdkMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.0", 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,
-        CdkMenuPanel,
         CdkMenuItem,
         CdkMenuItemRadio,
         CdkMenuItemCheckbox,
-        CdkMenuItemTrigger,
+        CdkMenuTrigger,
         CdkMenuGroup,
         CdkContextMenuTrigger,
         CdkTargetMenuAim], imports: [OverlayModule], exports: [CdkMenuBar,
         CdkMenu,
-        CdkMenuPanel,
         CdkMenuItem,
         CdkMenuItemRadio,
         CdkMenuItemCheckbox,
-        CdkMenuItemTrigger,
+        CdkMenuTrigger,
         CdkMenuGroup,
         CdkContextMenuTrigger,
         CdkTargetMenuAim] });
-CdkMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: CdkMenuModule, imports: [[OverlayModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", 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],
@@ -2123,5 +2100,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CDK_CONTEXT_MENU_DEFAULT_OPTIONS, CDK_MENU, CdkContextMenuTrigger, CdkMenu, CdkMenuBar, CdkMenuGroup, CdkMenuItem, CdkMenuItemCheckbox, CdkMenuItemRadio, CdkMenuItemTrigger, CdkMenuModule, CdkMenuPanel, CdkTargetMenuAim, ContextMenuTracker, MENU_AIM, MenuStack, TargetMenuAim, isClickInsideMenuOverlay };
+export { CDK_MENU, CdkContextMenuTrigger, CdkMenu, CdkMenuBar, CdkMenuBase, CdkMenuGroup, CdkMenuItem, CdkMenuItemCheckbox, CdkMenuItemRadio, CdkMenuItemSelectable, CdkMenuModule, CdkMenuTrigger, CdkMenuTriggerBase, CdkTargetMenuAim, ContextMenuTracker, MENU_AIM, MENU_STACK, MENU_TRIGGER, MenuStack, PARENT_OR_NEW_INLINE_MENU_STACK_PROVIDER, PARENT_OR_NEW_MENU_STACK_PROVIDER, PointerFocusTracker, TargetMenuAim };
 //# sourceMappingURL=menu.mjs.map