feat(material/menu): add option to enable inlined overlay

Author: adolgachev

goldens/material/menu/index.api.md

@@ -274,6 +274,10 @@ export class MatMenuTrigger extends MatMenuTriggerBase implements AfterContentIn
     readonly menuClosed: EventEmitter<void>;
     menuData: any;
     readonly menuOpened: EventEmitter<void>;
+    get menuOverlayInlined(): boolean;
+    set menuOverlayInlined(menuOverlayInlined: boolean);
+    // (undocumented)
+    static ngAcceptInputType_menuOverlayInlined: unknown;
     // (undocumented)
     ngAfterContentInit(): void;
     // (undocumented)
@@ -288,7 +292,7 @@ export class MatMenuTrigger extends MatMenuTriggerBase implements AfterContentIn
     triggersSubmenu(): boolean;
     updatePosition(): void;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatMenuTrigger, "[mat-menu-trigger-for], [matMenuTriggerFor]", ["matMenuTrigger"], { "_deprecatedMatMenuTriggerFor": { "alias": "mat-menu-trigger-for"; "required": false; }; "menu": { "alias": "matMenuTriggerFor"; "required": false; }; "menuData": { "alias": "matMenuTriggerData"; "required": false; }; "restoreFocus": { "alias": "matMenuTriggerRestoreFocus"; "required": false; }; }, { "menuOpened": "menuOpened"; "onMenuOpen": "onMenuOpen"; "menuClosed": "menuClosed"; "onMenuClose": "onMenuClose"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatMenuTrigger, "[mat-menu-trigger-for], [matMenuTriggerFor]", ["matMenuTrigger"], { "_deprecatedMatMenuTriggerFor": { "alias": "mat-menu-trigger-for"; "required": false; }; "menu": { "alias": "matMenuTriggerFor"; "required": false; }; "menuData": { "alias": "matMenuTriggerData"; "required": false; }; "menuOverlayInlined": { "alias": "matMenuTriggerOverlayInlined"; "required": false; }; "restoreFocus": { "alias": "matMenuTriggerRestoreFocus"; "required": false; }; }, { "menuOpened": "menuOpened"; "onMenuOpen": "onMenuOpen"; "menuClosed": "menuClosed"; "onMenuClose": "onMenuClose"; }, never, never, true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatMenuTrigger, never>;
 }

src/dev-app/menu/menu-demo.html

@@ -3,7 +3,7 @@
     <p>You clicked on: {{ selected }}</p>
 
     <mat-toolbar>
-      <button matIconButton [matMenuTriggerFor]="menu" aria-label="Open basic menu">
+      <button matIconButton [matMenuTriggerFor]="menu" matMenuTriggerOverlayInlined aria-label="Open basic menu">
         <mat-icon>more_vert</mat-icon>
       </button>
     </mat-toolbar>

src/material/menu/menu-trigger-base.ts

@@ -104,6 +104,11 @@ export abstract class MatMenuTriggerBase implements OnDestroy {
   /** Data that will be passed to the menu panel. */
   abstract menuData: any;
 
+  /**
+   * Whether to inline the overlay, instead of using the global overlay container.
+   */
+  protected _menuOverlayInlined: boolean;
+
   /** Whether focus should be restored when the menu is closed. */
   abstract restoreFocus: boolean;
 
@@ -367,6 +372,7 @@ export abstract class MatMenuTriggerBase implements OnDestroy {
       scrollStrategy: this._scrollStrategy(),
       direction: this._dir || 'ltr',
       disableAnimations: this._animationsDisabled,
+      insertOverlayAfter: this._menuOverlayInlined ? this._element : undefined,
     });
   }
 

src/material/menu/menu-trigger.ts

@@ -17,6 +17,7 @@ import {
   OnDestroy,
   Output,
   Renderer2,
+  booleanAttribute,
 } from '@angular/core';
 import {OverlayRef} from '@angular/cdk/overlay';
 import {Subscription} from 'rxjs';
@@ -67,6 +68,17 @@ export class MatMenuTrigger extends MatMenuTriggerBase implements AfterContentIn
   @Input('matMenuTriggerData')
   override menuData: any;
 
+  /**
+   * Whether to inline the overlay, instead of using the global overlay container.
+   */
+  @Input({alias: 'matMenuTriggerOverlayInlined', transform: booleanAttribute})
+  get menuOverlayInlined(): boolean {
+    return this._menuOverlayInlined;
+  }
+  set menuOverlayInlined(menuOverlayInlined: boolean) {
+    this._menuOverlayInlined = menuOverlayInlined;
+  }
+
   /**
    * Whether focus should be restored when the menu is closed.
    * Note that disabling this option can have accessibility implications