feat(cdk-experimental/menu): allow configuration of typeahead and menu position

Addresses several TODOs that were left after the original implementation

Author: mmalerba

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

@@ -57,10 +57,13 @@ export class ContextMenuTracker {
 /** Configuration options passed to the context menu. */
 export type ContextMenuOptions = {
   /** The opened menus X coordinate offset from the triggering position. */
-  offsetX: number;
+  offsetX?: number;
 
   /** The opened menus Y coordinate offset from the triggering position. */
-  offsetY: number;
+  offsetY?: number;
+
+  /** Ordered list of preferred positions, from most to least desirable. */
+  preferredPositions?: ConnectedPosition[];
 };
 
 /** Injection token for the ContextMenu options object. */
@@ -83,9 +86,6 @@ export type ContextMenuCoordinates = {x: number; y: number};
     '(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}},
     {provide: MENU_TRIGGER, useExisting: CdkContextMenuTrigger},
     {provide: MENU_STACK, useClass: MenuStack},
   ],
@@ -129,7 +129,9 @@ export class CdkContextMenuTrigger extends MenuTrigger implements OnDestroy {
     private readonly _overlay: Overlay,
     private readonly _contextMenuTracker: ContextMenuTracker,
     @Inject(MENU_STACK) menuStack: MenuStack,
-    @Inject(CDK_CONTEXT_MENU_DEFAULT_OPTIONS) private readonly _options: ContextMenuOptions,
+    @Optional()
+    @Inject(CDK_CONTEXT_MENU_DEFAULT_OPTIONS)
+    private readonly _options?: ContextMenuOptions,
     @Optional() private readonly _directionality?: Directionality,
   ) {
     super(injector, menuStack);
@@ -230,25 +232,21 @@ export class CdkContextMenuTrigger extends MenuTrigger implements OnDestroy {
   private _getOverlayPositionStrategy(
     coordinates: ContextMenuCoordinates,
   ): FlexibleConnectedPositionStrategy {
+    // 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.
     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.
-   */
-  private _getOverlayPositions(): ConnectedPosition[] {
-    // 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'},
-    ];
+      .withDefaultOffsetX(this._options?.offsetX ?? 2)
+      .withDefaultOffsetY(this._options?.offsetY ?? 2)
+      .withPositions(
+        this._options?.preferredPositions ?? [
+          {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'},
+        ],
+      );
   }
 
   /**

src/cdk-experimental/menu/menu-item-trigger.spec.ts

@@ -539,7 +539,6 @@ class TriggersWithSameMenuSameMenuBar {
   @ViewChildren(CdkMenu) menus: QueryList<CdkMenu>;
 }
 
-// TODO uncomment once we figure out why this is failing in Ivy
 @Component({
   template: `
     <div cdkMenuBar>

src/cdk-experimental/menu/menu-item-trigger.ts

@@ -287,7 +287,6 @@ export class CdkMenuItemTrigger extends MenuTrigger implements OnDestroy {
 
   /** Determine and return where to position the opened menu relative to the menu item */
   private _getOverlayPositions(): ConnectedPosition[] {
-    // 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'},

src/cdk-experimental/menu/menu-item.ts

@@ -30,14 +30,6 @@ import {FocusNext, MENU_STACK, MenuStack} from './menu-stack';
 import {FocusableElement} from './pointer-focus-tracker';
 import {MENU_AIM, MenuAim, Toggler} from './menu-aim';
 
-// TODO refactor this to be configurable allowing for custom elements to be removed
-/** Removes all icons from within the given element. */
-function removeIcons(element: 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
@@ -71,6 +63,12 @@ export class CdkMenuItem implements FocusableOption, FocusableElement, Toggler,
   }
   private _disabled = false;
 
+  /**
+   * The text used to locate this item during menu typeahead. If not specified,
+   * the `textContent` of the item will be used.
+   */
+  @Input() typeahead: string;
+
   /**
    * If this MenuItem is a regular MenuItem, outputs when it is triggered by a keyboard or mouse
    * event.
@@ -173,12 +171,7 @@ export class CdkMenuItem implements FocusableOption, FocusableElement, Toggler,
 
   /** Get the label for this element which is required by the FocusableOption interface. */
   getLabel(): string {
-    // 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) as Element;
-    removeIcons(clone);
-
-    return clone.textContent?.trim() || '';
+    return this.typeahead || this._elementRef.nativeElement.textContent?.trim() || '';
   }
 
   /**

src/material-experimental/menubar/menubar-item.ts

@@ -9,6 +9,13 @@
 import {Component, ViewEncapsulation, ChangeDetectionStrategy} from '@angular/core';
 import {CdkMenuItem} from '@angular/cdk-experimental/menu';
 
+/** Removes all icons from within the given element. */
+function removeIcons(element: Element) {
+  for (const icon of Array.from(element.querySelectorAll('mat-icon, .material-icons'))) {
+    icon.remove();
+  }
+}
+
 /**
  * A material design MenubarItem adhering to the functionality of CdkMenuItem and
  * CdkMenuItemTrigger. Its main purpose is to trigger menus and it lives inside of
@@ -30,4 +37,13 @@ import {CdkMenuItem} from '@angular/cdk-experimental/menu';
   },
   providers: [{provide: CdkMenuItem, useExisting: MatMenuBarItem}],
 })
-export class MatMenuBarItem extends CdkMenuItem {}
+export class MatMenuBarItem extends CdkMenuItem {
+  override getLabel(): string {
+    if (this.typeahead !== undefined) {
+      return this.typeahead;
+    }
+    const clone = this._elementRef.nativeElement.cloneNode(true) as Element;
+    removeIcons(clone);
+    return clone.textContent?.trim() || '';
+  }
+}