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

Author: adolgachev

goldens/cdk/menu/index.api.md

@@ -216,6 +216,8 @@ export class CdkMenuTrigger extends CdkMenuTriggerBase implements OnChanges, OnD
     getMenu(): Menu | undefined;
     _handleClick(): void;
     // (undocumented)
+    static ngAcceptInputType_menuOverlayInlined: unknown;
+    // (undocumented)
     ngOnChanges(changes: SimpleChanges): void;
     // (undocumented)
     ngOnDestroy(): void;
@@ -224,7 +226,7 @@ export class CdkMenuTrigger extends CdkMenuTriggerBase implements OnChanges, OnD
     toggle(): void;
     _toggleOnKeydown(event: KeyboardEvent): void;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkMenuTrigger, "[cdkMenuTriggerFor]", ["cdkMenuTriggerFor"], { "menuTemplateRef": { "alias": "cdkMenuTriggerFor"; "required": false; }; "menuPosition": { "alias": "cdkMenuPosition"; "required": false; }; "menuData": { "alias": "cdkMenuTriggerData"; "required": false; }; }, { "opened": "cdkMenuOpened"; "closed": "cdkMenuClosed"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CdkMenuTrigger, "[cdkMenuTriggerFor]", ["cdkMenuTriggerFor"], { "menuTemplateRef": { "alias": "cdkMenuTriggerFor"; "required": false; }; "menuPosition": { "alias": "cdkMenuPosition"; "required": false; }; "menuOverlayInlined": { "alias": "cdkMenuOverlayInlined"; "required": false; }; "menuData": { "alias": "cdkMenuTriggerData"; "required": false; }; }, { "opened": "cdkMenuOpened"; "closed": "cdkMenuClosed"; }, never, never, true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<CdkMenuTrigger, never>;
 }
@@ -240,6 +242,7 @@ export abstract class CdkMenuTriggerBase implements OnDestroy {
     protected isElementInsideMenuStack(element: Element): boolean;
     isOpen(): boolean;
     menuData: unknown;
+    menuOverlayInlined: boolean;
     menuPosition: ConnectedPosition[];
     protected readonly menuScrollStrategy: () => ScrollStrategy;
     protected readonly menuStack: MenuStack;

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

@@ -90,6 +90,11 @@ export abstract class CdkMenuTriggerBase implements OnDestroy {
    */
   menuPosition: ConnectedPosition[];
 
+  /**
+   * Whether to inline the overlay, instead of using the global overlay container.
+   */
+  menuOverlayInlined: boolean;
+
   /** Emits when the attached menu is requested to open */
   readonly opened: EventEmitter<void> = new EventEmitter();
 

src/cdk/menu/menu-trigger.ts

@@ -17,6 +17,7 @@ import {
   OnDestroy,
   Renderer2,
   SimpleChanges,
+  booleanAttribute,
 } from '@angular/core';
 import {InputModalityDetector} from '../a11y';
 import {Directionality} from '../bidi';
@@ -68,6 +69,7 @@ import {eventDispatchesNativeClick} from './event-detection';
   inputs: [
     {name: 'menuTemplateRef', alias: 'cdkMenuTriggerFor'},
     {name: 'menuPosition', alias: 'cdkMenuPosition'},
+    {name: 'menuOverlayInlined', alias: 'cdkMenuOverlayInlined', transform: booleanAttribute},
     {name: 'menuData', alias: 'cdkMenuTriggerData'},
   ],
   outputs: ['opened: cdkMenuOpened', 'closed: cdkMenuClosed'],
@@ -276,6 +278,7 @@ export class CdkMenuTrigger extends CdkMenuTriggerBase implements OnChanges, OnD
       positionStrategy: this._getOverlayPositionStrategy(),
       scrollStrategy: this.menuScrollStrategy(),
       direction: this._directionality || undefined,
+      insertOverlayAfter: this.menuOverlayInlined ? this._elementRef : undefined,
     });
   }
 

src/components-examples/cdk/menu/cdk-menu-standalone-menu/cdk-menu-standalone-menu-example.html

@@ -1,5 +1,5 @@
 <!-- #docregion trigger -->
-<button [cdkMenuTriggerFor]="menu" class="example-standalone-trigger">Click me!</button>
+<button [cdkMenuTriggerFor]="menu" cdkMenuOverlayInlined class="example-standalone-trigger">Click me!</button>
 <!-- #enddocregion trigger -->
 
 <ng-template #menu>