refactor(menu)!: remove sub-menu-item in favor of sub-menu

BREAKING CHANGE: We have deleted `md-sub-menu-item`. Instead it is recommended to use `md-sub-menu` which can have `md-menu-item[slot=item]` and `md-menu[slot=menu]` slotted into it. This makes `sub-menu-item` accessible for screen readers using linear navigation

PiperOrigin-RevId: 567706398

all.ts

@@ -40,7 +40,7 @@ import './list/list.js';
 import './list/list-item.js';
 import './menu/menu.js';
 import './menu/menu-item.js';
-import './menu/sub-menu-item.js';
+import './menu/sub-menu.js';
 import './progress/circular-progress.js';
 import './progress/linear-progress.js';
 import './radio/radio.js';
@@ -87,7 +87,7 @@ export * from './list/list.js';
 export * from './list/list-item.js';
 export * from './menu/menu.js';
 export * from './menu/menu-item.js';
-export * from './menu/sub-menu-item.js';
+export * from './menu/sub-menu.js';
 export * from './progress/circular-progress.js';
 export * from './progress/linear-progress.js';
 export * from './radio/radio.js';

catalog/src/hydration-entrypoints/components/menu.ts

@@ -7,4 +7,4 @@
 import '@material/web/button/filled-button.js';
 import '@material/web/menu/menu.js';
 import '@material/web/menu/menu-item.js';
-import '@material/web/menu/sub-menu-item.js';
+import '@material/web/menu/sub-menu.js';

common.ts

@@ -28,7 +28,7 @@ import './list/list.js';
 import './list/list-item.js';
 import './menu/menu.js';
 import './menu/menu-item.js';
-import './menu/sub-menu-item.js';
+import './menu/sub-menu.js';
 import './progress/circular-progress.js';
 import './progress/linear-progress.js';
 import './radio/radio.js';
@@ -55,7 +55,7 @@ export * from './list/list.js';
 export * from './list/list-item.js';
 export * from './menu/menu.js';
 export * from './menu/menu-item.js';
-export * from './menu/sub-menu-item.js';
+export * from './menu/sub-menu.js';
 export * from './progress/circular-progress.js';
 export * from './progress/linear-progress.js';
 export * from './radio/radio.js';

menu/demo/demo.ts

@@ -122,7 +122,7 @@ const collection =
       }),
 
 
-      // sub-menu-item knobs
+      // sub-menu knobs
       new Knob('sub-menu', {ui: title()}),
       new Knob('submenu.anchorCorner', {
         defaultValue: Corner.START_END as Corner,

menu/demo/stories.ts

@@ -6,7 +6,6 @@
 
 
 import '@material/web/menu/menu-item.js';
-import '@material/web/menu/sub-menu-item.js';
 import '@material/web/menu/sub-menu.js';
 import '@material/web/menu/menu.js';
 import '@material/web/button/filled-button.js';

menu/internal/menu.ts

@@ -809,14 +809,14 @@ export abstract class Menu extends LitElement {
 
   private handleDeactivateTypeahead(event: DeactivateTypeaheadEvent) {
     // stopPropagation so that this does not deactivate any typeaheads in menus
-    // nested above it e.g. md-sub-menu-item
+    // nested above it e.g. md-sub-menu
     event.stopPropagation();
     this.typeaheadActive = false;
   }
 
   private handleActivateTypeahead(event: ActivateTypeaheadEvent) {
     // stopPropagation so that this does not activate any typeaheads in menus
-    // nested above it e.g. md-sub-menu-item
+    // nested above it e.g. md-sub-menu
     event.stopPropagation();
     this.typeaheadActive = true;
   }
@@ -833,8 +833,9 @@ export abstract class Menu extends LitElement {
 
   close() {
     this.open = false;
-    const slotItems = this.slotItems as Array<HTMLElement&{close?: () => void}>;
-    slotItems.forEach(item => {
+    const maybeSubmenu =
+        this.slotItems as Array<HTMLElement&{close?: () => void}>;
+    maybeSubmenu.forEach(item => {
       item.close?.();
     });
   }

menu/internal/menuitem/menu-item.ts

@@ -34,15 +34,10 @@ export class MenuItemEl extends ListItemEl implements MenuItem {
 
   @state() protected hasFocusRing = false;
 
-  /**
-   * Used for overriding e.g. sub-menu-item.
-   */
-  protected keepOpenOnClick = false;
-
   override readonly type: ListItemRole = 'menuitem';
 
   protected override onClick() {
-    if (this.keepOpen || this.keepOpenOnClick) return;
+    if (this.keepOpen) return;
 
     this.dispatchEvent(createDefaultCloseMenuEvent(
         this, {kind: CLOSE_REASON.CLICK_SELECTION}));

menu/internal/shared.ts

@@ -25,10 +25,6 @@ interface MenuItemAdditions {
    * Whether or not the item is in the selected visual state.
    */
   selected: boolean;
-  /**
-   * If it is a sub-menu-item, a method that can close the submenu.
-   */
-  close?: () => void;
   /**
    * Focuses the item.
    */

menu/internal/submenu/sub-menu.ts

@@ -100,7 +100,7 @@ export class SubMenu extends LitElement {
 
     // Ensures that we deselect items when the menu closes and reactivate
     // typeahead when the menu closes, so that we do not have dirty state of
-    // selected sub-menu-items when we reopen.
+    // `sub-menu > menu-item[selected]` when we reopen.
     //
     // This cannot happen in `close()` because the menu may close via other
     // means Additionally, this cannot happen in onCloseSubmenu because
@@ -193,9 +193,9 @@ export class SubMenu extends LitElement {
    *
    * NOTE: We explicitly use mouse events and not pointer events because
    * pointer events apply to touch events. And if a user were to tap a
-   * sub-menu-item, it would fire the "pointerenter", "pointerleave", "click"
-   * events which would open the menu on click, and then set the timeout to
-   * close the menu due to pointerleave.
+   * sub-menu, it would fire the "pointerenter", "pointerleave", "click" events
+   * which would open the menu on click, and then set the timeout to close the
+   * menu due to pointerleave.
    */
   protected onMouseenter = () => {
     clearTimeout(this.previousOpenTimeout);
@@ -218,9 +218,9 @@ export class SubMenu extends LitElement {
    *
    * NOTE: We explicitly use mouse events and not pointer events because
    * pointer events apply to touch events. And if a user were to tap a
-   * sub-menu-item, it would fire the "pointerenter", "pointerleave", "click"
-   * events which would open the menu on click, and then set the timeout to
-   * close the menu due to pointerleave.
+   * sub-menu, it would fire the "pointerenter", "pointerleave", "click" events
+   * which would open the menu on click, and then set the timeout to close the
+   * menu due to pointerleave.
    */
   protected onMouseleave = () => {
     clearTimeout(this.previousCloseTimeout);