refactor(cdk/menu): switch to tree shakeable overlay APIs

Reworks the module to use the new tree-shakeable APIs for creating overlays.

Author: crisbeto

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

@@ -12,13 +12,15 @@ import {
   Directive,
   inject,
   Injectable,
+  Injector,
   Input,
   OnDestroy,
 } from '@angular/core';
 import {Directionality} from '../bidi';
 import {
+  createFlexibleConnectedPositionStrategy,
+  createOverlayRef,
   FlexibleConnectedPositionStrategy,
-  Overlay,
   OverlayConfig,
   STANDARD_DROPDOWN_BELOW_POSITIONS,
 } from '../overlay';
@@ -81,15 +83,9 @@ export type ContextMenuCoordinates = {x: number; y: number};
   ],
 })
 export class CdkContextMenuTrigger extends CdkMenuTriggerBase implements OnDestroy {
-  /** The CDK overlay service. */
-  private readonly _overlay = inject(Overlay);
-
-  /** The directionality of the page. */
+  private readonly _injector = inject(Injector);
   private readonly _directionality = inject(Directionality, {optional: true});
-
-  /** The app's context menu tracking registry */
   private readonly _contextMenuTracker = inject(ContextMenuTracker);
-
   private readonly _changeDetectorRef = inject(ChangeDetectorRef);
 
   /** Whether the context menu is disabled. */
@@ -161,9 +157,7 @@ export class CdkContextMenuTrigger extends CdkMenuTriggerBase implements OnDestr
   private _getOverlayPositionStrategy(
     coordinates: ContextMenuCoordinates,
   ): FlexibleConnectedPositionStrategy {
-    return this._overlay
-      .position()
-      .flexibleConnectedTo(coordinates)
+    return createFlexibleConnectedPositionStrategy(this._injector, coordinates)
       .withLockedPosition()
       .withGrowAfterOpen()
       .withPositions(this.menuPosition ?? CONTEXT_MENU_POSITIONS);
@@ -244,7 +238,7 @@ export class CdkContextMenuTrigger extends CdkMenuTriggerBase implements OnDestr
         ).setOrigin(coordinates);
         this.overlayRef.updatePosition();
       } else {
-        this.overlayRef = this._overlay.create(this._getOverlayConfig(coordinates));
+        this.overlayRef = createOverlayRef(this._injector, this._getOverlayConfig(coordinates));
       }
 
       this.overlayRef.attach(this.getMenuContentPortal());

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

@@ -18,7 +18,12 @@ import {
 } from '@angular/core';
 import {Menu} from './menu-interface';
 import {MENU_STACK, MenuStack} from './menu-stack';
-import {ConnectedPosition, Overlay, OverlayRef, ScrollStrategy} from '../overlay';
+import {
+  ConnectedPosition,
+  createRepositionScrollStrategy,
+  OverlayRef,
+  ScrollStrategy,
+} from '../overlay';
 import {TemplatePortal} from '../portal';
 import {merge, Subject} from 'rxjs';
 
@@ -31,8 +36,8 @@ export const MENU_SCROLL_STRATEGY = new InjectionToken<() => ScrollStrategy>(
   {
     providedIn: 'root',
     factory: () => {
-      const overlay = inject(Overlay);
-      return () => overlay.scrollStrategies.reposition();
+      const injector = inject(Injector);
+      return () => createRepositionScrollStrategy(injector);
     },
   },
 );

src/cdk/menu/menu-trigger.ts

@@ -11,6 +11,7 @@ import {
   Directive,
   ElementRef,
   inject,
+  Injector,
   NgZone,
   OnChanges,
   OnDestroy,
@@ -21,8 +22,9 @@ import {InputModalityDetector} from '../a11y';
 import {Directionality} from '../bidi';
 import {
   ConnectedPosition,
+  createFlexibleConnectedPositionStrategy,
+  createOverlayRef,
   FlexibleConnectedPositionStrategy,
-  Overlay,
   OverlayConfig,
   STANDARD_DROPDOWN_ADJACENT_POSITIONS,
   STANDARD_DROPDOWN_BELOW_POSITIONS,
@@ -76,12 +78,12 @@ import {eventDispatchesNativeClick} from './event-detection';
 })
 export class CdkMenuTrigger extends CdkMenuTriggerBase implements OnChanges, OnDestroy {
   private readonly _elementRef: ElementRef<HTMLElement> = inject(ElementRef);
-  private readonly _overlay = inject(Overlay);
   private readonly _ngZone = inject(NgZone);
   private readonly _changeDetectorRef = inject(ChangeDetectorRef);
   private readonly _inputModalityDetector = inject(InputModalityDetector);
   private readonly _directionality = inject(Directionality, {optional: true});
   private readonly _renderer = inject(Renderer2);
+  private readonly _injector = inject(Injector);
   private _cleanupMouseenter: () => void;
 
   /** The parent menu this trigger belongs to. */
@@ -110,7 +112,8 @@ export class CdkMenuTrigger extends CdkMenuTriggerBase implements OnChanges, OnD
     if (!this.isOpen() && this.menuTemplateRef != null) {
       this.opened.next();
 
-      this.overlayRef = this.overlayRef || this._overlay.create(this._getOverlayConfig());
+      this.overlayRef =
+        this.overlayRef || createOverlayRef(this._injector, this._getOverlayConfig());
       this.overlayRef.attach(this.getMenuContentPortal());
       this._changeDetectorRef.markForCheck();
       this._subscribeToOutsideClicks();
@@ -272,9 +275,7 @@ export class CdkMenuTrigger extends CdkMenuTriggerBase implements OnChanges, OnD
 
   /** Build the position strategy for the overlay which specifies where to place the menu. */
   private _getOverlayPositionStrategy(): FlexibleConnectedPositionStrategy {
-    return this._overlay
-      .position()
-      .flexibleConnectedTo(this._elementRef)
+    return createFlexibleConnectedPositionStrategy(this._injector, this._elementRef)
       .withLockedPosition()
       .withFlexibleDimensions(false)
       .withPositions(this._getOverlayPositions());