feat(menu): create a Menu interface for easier md-menu wrapping

PiperOrigin-RevId: 567728911

menu/internal/controllers/shared.ts

@@ -4,7 +4,76 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {LitElement} from 'lit';
+
 import {MenuItem} from './menuItemController.js';
+import type {Corner, SurfacePositionTarget} from './surfacePositionController.js';
+
+/**
+ * The interface needed for a Menu to work with other md-menu elements.
+ */
+export interface MenuSelf {
+  /**
+   * Whether or not the menu is currently opened.
+   */
+  open: boolean;
+  /**
+   * Skips the opening and closing animations.
+   */
+  quick: boolean;
+  /**
+   * Displays overflow content like a submenu.
+   *
+   * __NOTE__: This may cause adverse effects if you set
+   * `md-menu {max-height:...}`
+   * and have items overflowing items in the "y" direction.
+   */
+  hasOverflow: boolean;
+  /**
+   * Communicates to the menu that it is a submenu and should not handle the
+   * ArrowLeft button in LTR and ArrowRight button in RTL.
+   */
+  isSubmenu: boolean;
+  /**
+   * After closing, does not restore focus to the last focused element before
+   * the menu was opened.
+   */
+  skipRestoreFocus: boolean;
+  /**
+   * The corner of the anchor in which the menu should anchor to.
+   */
+  anchorCorner: Corner;
+  /**
+   * The corner of the menu in which the menu should anchor from.
+   */
+  menuCorner: Corner;
+  /**
+   * The element the menu should anchor to.
+   */
+  anchorElement: (HTMLElement&Partial<SurfacePositionTarget>)|null;
+  /**
+   * What the menu should focus by default when opened.
+   */
+  defaultFocus: FocusState;
+  /**
+   * An array of items managed by the list.
+   */
+  items: MenuItem[];
+  /**
+   * Opens the menu.
+   */
+  show: () => void;
+  /**
+   * Closes the menu.
+   */
+  close: () => void;
+}
+
+/**
+ * The interface needed for a Menu to work with other md-menu elements. Useful
+ * for keeping your types safe when wrapping `md-menu`.
+ */
+export type Menu = MenuSelf&LitElement;
 
 /**
  * The reason the `close-menu` event was dispatched.

menu/internal/menu.ts

@@ -753,9 +753,6 @@ export abstract class Menu extends LitElement {
       window.addEventListener('pointerdown', this.onWindowPointerdown);
       window.addEventListener('pointerup', this.onWindowPointerup);
     }
-
-    // need to self-identify as an md-menu for submenu ripple identification.
-    this.toggleAttribute('md-menu', true);
   }
 
   override disconnectedCallback() {

menu/internal/submenu/sub-menu.ts

@@ -8,9 +8,9 @@ import {html, isServer, LitElement} from 'lit';
 import {property, queryAssignedElements} from 'lit/decorators.js';
 
 import {MenuItem} from '../controllers/menuItemController.js';
-import {CloseMenuEvent, CloseReason, createActivateTypeaheadEvent, createDeactivateTypeaheadEvent, KeydownCloseKey, NavigableKey, SelectionKey} from '../controllers/shared.js';
+import {CloseMenuEvent, CloseReason, createActivateTypeaheadEvent, createDeactivateTypeaheadEvent, KeydownCloseKey, Menu, NavigableKey, SelectionKey} from '../controllers/shared.js';
 import {createDeactivateItemsEvent, createRequestActivationEvent, deactivateActiveItem, getFirstActivatableItem} from '../list-navigation-helpers.js';
-import {Corner, Menu} from '../menu.js';
+import {Corner} from '../menu.js';
 
 /**
  * @fires deactivate-items Requests the parent menu to deselect other items when

menu/menu.ts

@@ -12,7 +12,7 @@ import {styles} from './internal/menu-styles.css.js';
 
 export {ListItem} from '../list/internal/listitem/list-item.js';
 export {MenuItem} from './internal/controllers/menuItemController.js';
-export {CloseMenuEvent, FocusState} from './internal/controllers/shared.js';
+export {CloseMenuEvent, FocusState, Menu} from './internal/controllers/shared.js';
 export {Corner} from './internal/menu.js';
 
 declare global {