@material/web 1.0.0-pre.8 → 1.0.0

package/menu/internal/submenu/sub-menu.js

@@ -0,0 +1,351 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { html, isServer, LitElement } from 'lit';
+import { property, queryAssignedElements } from 'lit/decorators.js';
+import { createDeactivateItemsEvent, createRequestActivationEvent, deactivateActiveItem, getFirstActivatableItem } from '../../../list/internal/list-navigation-helpers.js';
+import { CloseReason, createActivateTypeaheadEvent, createDeactivateTypeaheadEvent, KeydownCloseKey, NavigableKey, SelectionKey } from '../controllers/shared.js';
+import { Corner } from '../menu.js';
+/**
+ * @fires deactivate-items Requests the parent menu to deselect other items when
+ * a submenu opens
+ * @fires request-activation Requests the parent make the slotted item focusable
+ * and focuses the item.
+ * @fires deactivate-typeahead Requests the parent menu to deactivate the
+ * typeahead functionality when a submenu opens
+ * @fires activate-typeahead Requests the parent menu to activate the typeahead
+ * functionality when a submenu closes
+ */
+export class SubMenu extends LitElement {
+    get item() {
+        return this.items[0] ?? null;
+    }
+    get menu() {
+        return this.menus[0] ?? null;
+    }
+    constructor() {
+        super();
+        /**
+         * The anchorCorner to set on the submenu.
+         */
+        this.anchorCorner = Corner.START_END;
+        /**
+         * The menuCorner to set on the submenu.
+         */
+        this.menuCorner = Corner.START_START;
+        /**
+         * The delay between mouseenter and submenu opening.
+         */
+        this.hoverOpenDelay = 400;
+        /**
+         * The delay between ponterleave and the submenu closing.
+         */
+        this.hoverCloseDelay = 400;
+        /**
+         * READONLY: self-identifies as a menu item and sets its identifying attribute
+         */
+        this.isSubMenu = true;
+        this.previousOpenTimeout = 0;
+        this.previousCloseTimeout = 0;
+        /**
+         * Starts the default 400ms countdown to open the submenu.
+         *
+         * 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, 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.
+         */
+        this.onMouseenter = () => {
+            clearTimeout(this.previousOpenTimeout);
+            clearTimeout(this.previousCloseTimeout);
+            if (this.menu?.open)
+                return;
+            // Open synchronously if delay is 0. (screenshot tests infra
+            // would never resolve otherwise)
+            if (!this.hoverOpenDelay) {
+                this.show();
+            }
+            else {
+                this.previousOpenTimeout = setTimeout(() => {
+                    this.show();
+                }, this.hoverOpenDelay);
+            }
+        };
+        /**
+         * Starts the default 400ms countdown to close the submenu.
+         *
+         * 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, 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.
+         */
+        this.onMouseleave = () => {
+            clearTimeout(this.previousCloseTimeout);
+            clearTimeout(this.previousOpenTimeout);
+            // Close synchronously if delay is 0. (screenshot tests infra
+            // would never resolve otherwise)
+            if (!this.hoverCloseDelay) {
+                this.close();
+            }
+            else {
+                this.previousCloseTimeout = setTimeout(() => {
+                    this.close();
+                }, this.hoverCloseDelay);
+            }
+        };
+        if (!isServer) {
+            this.addEventListener('mouseenter', this.onMouseenter);
+            this.addEventListener('mouseleave', this.onMouseleave);
+        }
+    }
+    render() {
+        return html `
+        <slot
+            name="item"
+            @click=${this.onClick}
+            @keydown=${this.onKeydown}
+            @slotchange=${this.onSlotchange}
+        >
+        </slot>
+        <slot name="menu"
+            @keydown=${this.onSubMenuKeydown}
+            @close-menu=${this.onCloseSubmenu}
+            @slotchange=${this.onSlotchange}>
+        </slot>
+    `;
+    }
+    /**
+     * Shows the submenu.
+     */
+    async show() {
+        const menu = this.menu;
+        if (!menu || menu.open)
+            return;
+        // 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
+        // `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
+        // `close-menu` may not be called via focusout of outside click and not
+        // triggered by an item
+        menu.addEventListener('closed', () => {
+            this.item.ariaExpanded = 'false';
+            this.dispatchEvent(createActivateTypeaheadEvent());
+            this.dispatchEvent(createDeactivateItemsEvent());
+            // aria-hidden required so ChromeVox doesn't announce the closed menu
+            menu.ariaHidden = 'true';
+        }, { once: true });
+        menu.quick = true;
+        // Submenus are in overflow when not fixed. Can remove once we have native
+        // popup support
+        menu.hasOverflow = true;
+        menu.anchorCorner = this.anchorCorner;
+        menu.menuCorner = this.menuCorner;
+        menu.anchorElement = this.item;
+        menu.defaultFocus = 'first-item';
+        // aria-hidden management required so ChromeVox doesn't announce the closed
+        // menu. Remove it here since we are about to show and focus it.
+        menu.removeAttribute('aria-hidden');
+        // This is required in the case where we have a leaf menu open and and the
+        // user hovers a parent menu's item which is not an md-sub-menu item.
+        // If this were set to true, then the menu would close and focus would be
+        // lost. That means the focusout event would have a `relatedTarget` of
+        // `null` since nothing in the menu would be focused anymore due to the
+        // leaf menu closing. restoring focus ensures that we keep focus in the
+        // submenu tree.
+        menu.skipRestoreFocus = false;
+        // Menu could already be opened because of mouse interaction
+        const menuAlreadyOpen = menu.open;
+        menu.show();
+        this.item.ariaExpanded = 'true';
+        this.item.ariaHasPopup = 'menu';
+        if (menu.id) {
+            this.item.setAttribute('aria-controls', menu.id);
+        }
+        // Deactivate other items. This can be the case if the user has tabbed
+        // around the menu and then mouses over an md-sub-menu.
+        this.dispatchEvent(createDeactivateItemsEvent());
+        this.dispatchEvent(createDeactivateTypeaheadEvent());
+        this.item.selected = true;
+        // This is the case of mouse hovering when already opened via keyboard or
+        // vice versa
+        if (!menuAlreadyOpen) {
+            let open = (value) => { };
+            const opened = new Promise((resolve) => {
+                open = resolve;
+            });
+            menu.addEventListener('opened', open, { once: true });
+            await opened;
+        }
+    }
+    /**
+     * Closes the submenu.
+     */
+    async close() {
+        const menu = this.menu;
+        if (!menu || !menu.open)
+            return;
+        this.dispatchEvent(createActivateTypeaheadEvent());
+        menu.quick = true;
+        menu.close();
+        this.dispatchEvent(createDeactivateItemsEvent());
+        let close = (value) => { };
+        const closed = new Promise((resolve) => {
+            close = resolve;
+        });
+        menu.addEventListener('closed', close, { once: true });
+        await closed;
+    }
+    onSlotchange() {
+        if (!this.item) {
+            return;
+        }
+        // TODO(b/301296618): clean up old aria values on change
+        this.item.ariaExpanded = 'false';
+        this.item.ariaHasPopup = 'menu';
+        if (this.menu?.id) {
+            this.item.setAttribute('aria-controls', this.menu.id);
+        }
+        this.item.keepOpen = true;
+        const menu = this.menu;
+        if (!menu)
+            return;
+        menu.isSubmenu = true;
+        // Required for ChromeVox to not linearly navigate to the menu while closed
+        menu.ariaHidden = 'true';
+    }
+    onClick() {
+        this.show();
+    }
+    /**
+     * On item keydown handles opening the submenu.
+     */
+    async onKeydown(event) {
+        const shouldOpenSubmenu = this.isSubmenuOpenKey(event.code);
+        if (event.defaultPrevented)
+            return;
+        const openedWithLR = shouldOpenSubmenu &&
+            (NavigableKey.LEFT === event.code || NavigableKey.RIGHT === event.code);
+        if (event.code === SelectionKey.SPACE || openedWithLR) {
+            // prevent space from scrolling and Left + Right from selecting previous /
+            // next items or opening / closing parent menus. Only open the submenu.
+            event.preventDefault();
+            if (openedWithLR) {
+                event.stopPropagation();
+            }
+        }
+        if (!shouldOpenSubmenu) {
+            return;
+        }
+        const submenu = this.menu;
+        if (!submenu)
+            return;
+        const submenuItems = submenu.items;
+        const firstActivatableItem = getFirstActivatableItem(submenuItems);
+        if (firstActivatableItem) {
+            await this.show();
+            firstActivatableItem.tabIndex = 0;
+            firstActivatableItem.focus();
+            return;
+        }
+    }
+    onCloseSubmenu(event) {
+        const { itemPath, reason } = event.detail;
+        itemPath.push(this.item);
+        this.dispatchEvent(createActivateTypeaheadEvent());
+        // Escape should only close one menu not all of the menus unlike space or
+        // click selection which should close all menus.
+        if (reason.kind === CloseReason.KEYDOWN &&
+            reason.key === KeydownCloseKey.ESCAPE) {
+            event.stopPropagation();
+            this.item.dispatchEvent(createRequestActivationEvent());
+            return;
+        }
+        this.dispatchEvent(createDeactivateItemsEvent());
+    }
+    async onSubMenuKeydown(event) {
+        if (event.defaultPrevented)
+            return;
+        const { close: shouldClose, keyCode } = this.isSubmenuCloseKey(event.code);
+        if (!shouldClose)
+            return;
+        // Communicate that it's handled so that we don't accidentally close every
+        // parent menu. Additionally, we want to isolate things like the typeahead
+        // keydowns from bubbling up to the parent menu and confounding things.
+        event.preventDefault();
+        if (keyCode === NavigableKey.LEFT || keyCode === NavigableKey.RIGHT) {
+            // Prevent this from bubbling to parents
+            event.stopPropagation();
+        }
+        await this.close();
+        deactivateActiveItem(this.menu.items);
+        this.item?.focus();
+        this.item.tabIndex = 0;
+        this.item.focus();
+    }
+    /**
+     * Determines whether the given KeyboardEvent code is one that should open
+     * the submenu. This is RTL-aware. By default, left, right, space, or enter.
+     *
+     * @param code The native KeyboardEvent code.
+     * @return Whether or not the key code should open the submenu.
+     */
+    isSubmenuOpenKey(code) {
+        const isRtl = getComputedStyle(this).direction === 'rtl';
+        const arrowEnterKey = isRtl ? NavigableKey.LEFT : NavigableKey.RIGHT;
+        switch (code) {
+            case arrowEnterKey:
+            case SelectionKey.SPACE:
+            case SelectionKey.ENTER:
+                return true;
+            default:
+                return false;
+        }
+    }
+    /**
+     * Determines whether the given KeyboardEvent code is one that should close
+     * the submenu. This is RTL-aware. By default right, left, or escape.
+     *
+     * @param code The native KeyboardEvent code.
+     * @return Whether or not the key code should close the submenu.
+     */
+    isSubmenuCloseKey(code) {
+        const isRtl = getComputedStyle(this).direction === 'rtl';
+        const arrowEnterKey = isRtl ? NavigableKey.RIGHT : NavigableKey.LEFT;
+        switch (code) {
+            case arrowEnterKey:
+            case KeydownCloseKey.ESCAPE:
+                return { close: true, keyCode: code };
+            default:
+                return { close: false };
+        }
+    }
+}
+__decorate([
+    property({ attribute: 'anchor-corner' })
+], SubMenu.prototype, "anchorCorner", void 0);
+__decorate([
+    property({ attribute: 'menu-corner' })
+], SubMenu.prototype, "menuCorner", void 0);
+__decorate([
+    property({ type: Number, attribute: 'hover-open-delay' })
+], SubMenu.prototype, "hoverOpenDelay", void 0);
+__decorate([
+    property({ type: Number, attribute: 'hover-close-delay' })
+], SubMenu.prototype, "hoverCloseDelay", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'md-sub-menu' })
+], SubMenu.prototype, "isSubMenu", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'item', flatten: true })
+], SubMenu.prototype, "items", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'menu', flatten: true })
+], SubMenu.prototype, "menus", void 0);
+//# sourceMappingURL=sub-menu.js.map

package/menu/internal/submenu/sub-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sub-menu.js","sourceRoot":"","sources":["sub-menu.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, isServer, LitElement} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\n\nimport {createDeactivateItemsEvent, createRequestActivationEvent, deactivateActiveItem, getFirstActivatableItem} from '../../../list/internal/list-navigation-helpers.js';\nimport {MenuItem} from '../controllers/menuItemController.js';\nimport {CloseMenuEvent, CloseReason, createActivateTypeaheadEvent, createDeactivateTypeaheadEvent, KeydownCloseKey, Menu, NavigableKey, SelectionKey} from '../controllers/shared.js';\nimport {Corner} from '../menu.js';\n\n/**\n * @fires deactivate-items Requests the parent menu to deselect other items when\n * a submenu opens\n * @fires request-activation Requests the parent make the slotted item focusable\n * and focuses the item.\n * @fires deactivate-typeahead Requests the parent menu to deactivate the\n * typeahead functionality when a submenu opens\n * @fires activate-typeahead Requests the parent menu to activate the typeahead\n * functionality when a submenu closes\n */\nexport class SubMenu extends LitElement {\n  /**\n   * The anchorCorner to set on the submenu.\n   */\n  @property({attribute: 'anchor-corner'})\n  anchorCorner: Corner = Corner.START_END;\n  /**\n   * The menuCorner to set on the submenu.\n   */\n  @property({attribute: 'menu-corner'}) menuCorner: Corner = Corner.START_START;\n  /**\n   * The delay between mouseenter and submenu opening.\n   */\n  @property({type: Number, attribute: 'hover-open-delay'}) hoverOpenDelay = 400;\n  /**\n   * The delay between ponterleave and the submenu closing.\n   */\n  @property({type: Number, attribute: 'hover-close-delay'})\n  hoverCloseDelay = 400;\n\n  /**\n   * READONLY: self-identifies as a menu item and sets its identifying attribute\n   */\n  @property({type: Boolean, reflect: true, attribute: 'md-sub-menu'})\n  isSubMenu = true;\n\n  get item() {\n    return this.items[0] ?? null;\n  }\n\n  get menu() {\n    return this.menus[0] ?? null;\n  }\n\n  @queryAssignedElements({slot: 'item', flatten: true})\n  private readonly items!: MenuItem[];\n\n  @queryAssignedElements({slot: 'menu', flatten: true})\n  private readonly menus!: Menu[];\n\n  private previousOpenTimeout = 0;\n  private previousCloseTimeout = 0;\n\n  constructor() {\n    super();\n\n    if (!isServer) {\n      this.addEventListener('mouseenter', this.onMouseenter);\n      this.addEventListener('mouseleave', this.onMouseleave);\n    }\n  }\n\n  override render() {\n    return html`\n        <slot\n            name=\"item\"\n            @click=${this.onClick}\n            @keydown=${this.onKeydown}\n            @slotchange=${this.onSlotchange}\n        >\n        </slot>\n        <slot name=\"menu\"\n            @keydown=${this.onSubMenuKeydown}\n            @close-menu=${this.onCloseSubmenu}\n            @slotchange=${this.onSlotchange}>\n        </slot>\n    `;\n  }\n\n  /**\n   * Shows the submenu.\n   */\n  async show() {\n    const menu = this.menu;\n    if (!menu || menu.open) return;\n\n    // Ensures that we deselect items when the menu closes and reactivate\n    // typeahead when the menu closes, so that we do not have dirty state of\n    // `sub-menu > menu-item[selected]` when we reopen.\n    //\n    // This cannot happen in `close()` because the menu may close via other\n    // means Additionally, this cannot happen in onCloseSubmenu because\n    // `close-menu` may not be called via focusout of outside click and not\n    // triggered by an item\n    menu.addEventListener('closed', () => {\n      this.item.ariaExpanded = 'false';\n      this.dispatchEvent(createActivateTypeaheadEvent());\n      this.dispatchEvent(createDeactivateItemsEvent());\n      // aria-hidden required so ChromeVox doesn't announce the closed menu\n      menu.ariaHidden = 'true';\n    }, {once: true});\n    menu.quick = true;\n    // Submenus are in overflow when not fixed. Can remove once we have native\n    // popup support\n    menu.hasOverflow = true;\n    menu.anchorCorner = this.anchorCorner;\n    menu.menuCorner = this.menuCorner;\n    menu.anchorElement = this.item;\n    menu.defaultFocus = 'first-item';\n    // aria-hidden management required so ChromeVox doesn't announce the closed\n    // menu. Remove it here since we are about to show and focus it.\n    menu.removeAttribute('aria-hidden');\n    // This is required in the case where we have a leaf menu open and and the\n    // user hovers a parent menu's item which is not an md-sub-menu item.\n    // If this were set to true, then the menu would close and focus would be\n    // lost. That means the focusout event would have a `relatedTarget` of\n    // `null` since nothing in the menu would be focused anymore due to the\n    // leaf menu closing. restoring focus ensures that we keep focus in the\n    // submenu tree.\n    menu.skipRestoreFocus = false;\n\n    // Menu could already be opened because of mouse interaction\n    const menuAlreadyOpen = menu.open;\n    menu.show();\n    this.item.ariaExpanded = 'true';\n    this.item.ariaHasPopup = 'menu';\n    if (menu.id) {\n      this.item.setAttribute('aria-controls', menu.id);\n    }\n\n    // Deactivate other items. This can be the case if the user has tabbed\n    // around the menu and then mouses over an md-sub-menu.\n    this.dispatchEvent(createDeactivateItemsEvent());\n    this.dispatchEvent(createDeactivateTypeaheadEvent());\n    this.item.selected = true;\n\n    // This is the case of mouse hovering when already opened via keyboard or\n    // vice versa\n    if (!menuAlreadyOpen) {\n      let open = (value: unknown) => {};\n      const opened = new Promise((resolve) => {\n        open = resolve;\n      });\n      menu.addEventListener('opened', open, {once: true});\n      await opened;\n    }\n  }\n\n  /**\n   * Closes the submenu.\n   */\n  async close() {\n    const menu = this.menu;\n    if (!menu || !menu.open) return;\n\n    this.dispatchEvent(createActivateTypeaheadEvent());\n    menu.quick = true;\n    menu.close();\n    this.dispatchEvent(createDeactivateItemsEvent());\n    let close = (value: unknown) => {};\n    const closed = new Promise((resolve) => {\n      close = resolve;\n    });\n    menu.addEventListener('closed', close, {once: true});\n    await closed;\n  }\n\n  protected onSlotchange() {\n    if (!this.item) {\n      return;\n    }\n\n    // TODO(b/301296618): clean up old aria values on change\n    this.item.ariaExpanded = 'false';\n    this.item.ariaHasPopup = 'menu';\n    if (this.menu?.id) {\n      this.item.setAttribute('aria-controls', this.menu.id);\n    }\n    this.item.keepOpen = true;\n\n    const menu = this.menu;\n    if (!menu) return;\n\n    menu.isSubmenu = true;\n    // Required for ChromeVox to not linearly navigate to the menu while closed\n    menu.ariaHidden = 'true';\n  }\n\n  /**\n   * Starts the default 400ms countdown to open the submenu.\n   *\n   * NOTE: We explicitly use mouse events and not pointer events because\n   * pointer events apply to touch events. And if a user were to tap a\n   * sub-menu, it would fire the \"pointerenter\", \"pointerleave\", \"click\" events\n   * which would open the menu on click, and then set the timeout to close the\n   * menu due to pointerleave.\n   */\n  protected onMouseenter = () => {\n    clearTimeout(this.previousOpenTimeout);\n    clearTimeout(this.previousCloseTimeout);\n    if (this.menu?.open) return;\n\n    // Open synchronously if delay is 0. (screenshot tests infra\n    // would never resolve otherwise)\n    if (!this.hoverOpenDelay) {\n      this.show();\n    } else {\n      this.previousOpenTimeout = setTimeout(() => {\n        this.show();\n      }, this.hoverOpenDelay);\n    }\n  };\n\n  /**\n   * Starts the default 400ms countdown to close the submenu.\n   *\n   * NOTE: We explicitly use mouse events and not pointer events because\n   * pointer events apply to touch events. And if a user were to tap a\n   * sub-menu, it would fire the \"pointerenter\", \"pointerleave\", \"click\" events\n   * which would open the menu on click, and then set the timeout to close the\n   * menu due to pointerleave.\n   */\n  protected onMouseleave = () => {\n    clearTimeout(this.previousCloseTimeout);\n    clearTimeout(this.previousOpenTimeout);\n\n    // Close synchronously if delay is 0. (screenshot tests infra\n    // would never resolve otherwise)\n    if (!this.hoverCloseDelay) {\n      this.close();\n    } else {\n      this.previousCloseTimeout = setTimeout(() => {\n        this.close();\n      }, this.hoverCloseDelay);\n    }\n  };\n\n  protected onClick() {\n    this.show();\n  }\n\n  /**\n   * On item keydown handles opening the submenu.\n   */\n  protected async onKeydown(event: KeyboardEvent) {\n    const shouldOpenSubmenu = this.isSubmenuOpenKey(event.code);\n\n    if (event.defaultPrevented) return;\n\n    const openedWithLR = shouldOpenSubmenu &&\n        (NavigableKey.LEFT === event.code || NavigableKey.RIGHT === event.code);\n\n    if (event.code === SelectionKey.SPACE || openedWithLR) {\n      // prevent space from scrolling and Left + Right from selecting previous /\n      // next items or opening / closing parent menus. Only open the submenu.\n      event.preventDefault();\n\n      if (openedWithLR) {\n        event.stopPropagation();\n      }\n    }\n\n    if (!shouldOpenSubmenu) {\n      return;\n    }\n\n    const submenu = this.menu;\n    if (!submenu) return;\n\n    const submenuItems = submenu.items;\n    const firstActivatableItem = getFirstActivatableItem(submenuItems);\n\n    if (firstActivatableItem) {\n      await this.show();\n\n      firstActivatableItem.tabIndex = 0;\n      firstActivatableItem.focus();\n\n      return;\n    }\n  }\n\n  private onCloseSubmenu(event: CloseMenuEvent) {\n    const {itemPath, reason} = event.detail;\n    itemPath.push(this.item);\n\n    this.dispatchEvent(createActivateTypeaheadEvent());\n    // Escape should only close one menu not all of the menus unlike space or\n    // click selection which should close all menus.\n    if (reason.kind === CloseReason.KEYDOWN &&\n        reason.key === KeydownCloseKey.ESCAPE) {\n      event.stopPropagation();\n      this.item.dispatchEvent(createRequestActivationEvent());\n      return;\n    }\n\n    this.dispatchEvent(createDeactivateItemsEvent());\n  }\n\n  private async onSubMenuKeydown(event: KeyboardEvent) {\n    if (event.defaultPrevented) return;\n    const {close: shouldClose, keyCode} = this.isSubmenuCloseKey(event.code);\n    if (!shouldClose) return;\n\n    // Communicate that it's handled so that we don't accidentally close every\n    // parent menu. Additionally, we want to isolate things like the typeahead\n    // keydowns from bubbling up to the parent menu and confounding things.\n    event.preventDefault();\n\n    if (keyCode === NavigableKey.LEFT || keyCode === NavigableKey.RIGHT) {\n      // Prevent this from bubbling to parents\n      event.stopPropagation();\n    }\n\n    await this.close();\n\n    deactivateActiveItem(this.menu.items);\n    this.item?.focus();\n    this.item.tabIndex = 0;\n    this.item.focus();\n  }\n\n  /**\n   * Determines whether the given KeyboardEvent code is one that should open\n   * the submenu. This is RTL-aware. By default, left, right, space, or enter.\n   *\n   * @param code The native KeyboardEvent code.\n   * @return Whether or not the key code should open the submenu.\n   */\n  private isSubmenuOpenKey(code: string) {\n    const isRtl = getComputedStyle(this).direction === 'rtl';\n    const arrowEnterKey = isRtl ? NavigableKey.LEFT : NavigableKey.RIGHT;\n    switch (code) {\n      case arrowEnterKey:\n      case SelectionKey.SPACE:\n      case SelectionKey.ENTER:\n        return true;\n      default:\n        return false;\n    }\n  }\n\n  /**\n   * Determines whether the given KeyboardEvent code is one that should close\n   * the submenu. This is RTL-aware. By default right, left, or escape.\n   *\n   * @param code The native KeyboardEvent code.\n   * @return Whether or not the key code should close the submenu.\n   */\n  private isSubmenuCloseKey(code: string) {\n    const isRtl = getComputedStyle(this).direction === 'rtl';\n    const arrowEnterKey = isRtl ? NavigableKey.RIGHT : NavigableKey.LEFT;\n    switch (code) {\n      case arrowEnterKey:\n      case KeydownCloseKey.ESCAPE:\n        return {close: true, keyCode: code} as const;\n      default:\n        return {close: false} as const;\n    }\n  }\n}\n"]}

package/menu/menu-item.d.ts

@@ -3,9 +3,9 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { MenuItemEl } from './lib/menuitem/menu-item.js';
-export { ListItem } from '../list/lib/listitem/list-item.js';
-export { CloseMenuEvent, DeactivateItemsEvent, MenuItem } from './lib/shared.js';
+import { MenuItemEl } from './internal/menuitem/menu-item.js';
+export { MenuItem } from './internal/controllers/menuItemController.js';
+export { CloseMenuEvent } from './internal/controllers/shared.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-menu-item': MdMenuItem;

package/menu/menu-item.js

@@ -5,12 +5,9 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { styles as listItemForcedColorsStyles } from '../list/lib/listitem/forced-colors-styles.css.js';
-import { styles as listItemStyles } from '../list/lib/listitem/list-item-styles.css.js';
-import { styles as forcedColorsStyles } from './lib/menuitem/forced-colors-styles.css.js';
-import { MenuItemEl } from './lib/menuitem/menu-item.js';
-import { styles } from './lib/menuitem/menu-item-styles.css.js';
-export { CloseMenuEvent, DeactivateItemsEvent } from './lib/shared.js';
+import { styles as forcedColorsStyles } from './internal/menuitem/forced-colors-styles.css.js';
+import { MenuItemEl } from './internal/menuitem/menu-item.js';
+import { styles } from './internal/menuitem/menu-item-styles.css.js';
 /**
  * @summary Menus display a list of choices on a temporary surface.
  *
@@ -26,11 +23,10 @@ export { CloseMenuEvent, DeactivateItemsEvent } from './lib/shared.js';
  * @final
  * @suppress {visibility}
  */
-let MdMenuItem = class MdMenuItem extends MenuItemEl {
+export let MdMenuItem = class MdMenuItem extends MenuItemEl {
 };
-MdMenuItem.styles = [listItemStyles, styles, listItemForcedColorsStyles, forcedColorsStyles];
+MdMenuItem.styles = [styles, forcedColorsStyles];
 MdMenuItem = __decorate([
     customElement('md-menu-item')
 ], MdMenuItem);
-export { MdMenuItem };
 //# sourceMappingURL=menu-item.js.map

package/menu/menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["menu-item.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,0BAA0B,EAAC,MAAM,kDAAkD,CAAC;AACtG,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,8CAA8C,CAAC;AAEtF,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,4CAA4C,CAAC;AACxF,OAAO,EAAC,UAAU,EAAC,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAC,MAAM,EAAC,MAAM,wCAAwC,CAAC;AAG9D,OAAO,EAAC,cAAc,EAAE,oBAAoB,EAAW,MAAM,iBAAiB,CAAC;AAQ/E;;;;;;;;;;;;;;GAcG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;;AACxB,iBAAM,GAClB,CAAC,cAAc,EAAE,MAAM,EAAE,0BAA0B,EAAE,kBAAkB,CAAC,CAAC;AAFlE,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAGtB;SAHY,UAAU","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as listItemForcedColorsStyles} from '../list/lib/listitem/forced-colors-styles.css.js';\nimport {styles as listItemStyles} from '../list/lib/listitem/list-item-styles.css.js';\n\nimport {styles as forcedColorsStyles} from './lib/menuitem/forced-colors-styles.css.js';\nimport {MenuItemEl} from './lib/menuitem/menu-item.js';\nimport {styles} from './lib/menuitem/menu-item-styles.css.js';\n\nexport {ListItem} from '../list/lib/listitem/list-item.js';\nexport {CloseMenuEvent, DeactivateItemsEvent, MenuItem} from './lib/shared.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-menu-item': MdMenuItem;\n  }\n}\n\n/**\n * @summary Menus display a list of choices on a temporary surface.\n *\n * @description\n * Menu items are the selectable choices within the menu. Menu items must\n * implement the `MenuItem` interface and also have the `md-menu-item`\n * attribute. Additionally menu items are list items so they must also have the\n * `md-list-item` attribute.\n *\n * Menu items can control a menu by selectively firing the `close-menu` and\n * `deselect-items` events.\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-menu-item')\nexport class MdMenuItem extends MenuItemEl {\n  static override styles =\n      [listItemStyles, styles, listItemForcedColorsStyles, forcedColorsStyles];\n}\n"]}
+{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["menu-item.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,kBAAkB,EAAC,MAAM,iDAAiD,CAAC;AAC7F,OAAO,EAAC,UAAU,EAAC,MAAM,kCAAkC,CAAC;AAC5D,OAAO,EAAC,MAAM,EAAC,MAAM,6CAA6C,CAAC;AAWnE;;;;;;;;;;;;;;GAcG;AAEI,WAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;;AACxB,iBAAM,GAAG,CAAC,MAAM,EAAE,kBAAkB,CAAC,AAA/B,CAAgC;AAD3C,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAEtB","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as forcedColorsStyles} from './internal/menuitem/forced-colors-styles.css.js';\nimport {MenuItemEl} from './internal/menuitem/menu-item.js';\nimport {styles} from './internal/menuitem/menu-item-styles.css.js';\n\nexport {MenuItem} from './internal/controllers/menuItemController.js';\nexport {CloseMenuEvent} from './internal/controllers/shared.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-menu-item': MdMenuItem;\n  }\n}\n\n/**\n * @summary Menus display a list of choices on a temporary surface.\n *\n * @description\n * Menu items are the selectable choices within the menu. Menu items must\n * implement the `MenuItem` interface and also have the `md-menu-item`\n * attribute. Additionally menu items are list items so they must also have the\n * `md-list-item` attribute.\n *\n * Menu items can control a menu by selectively firing the `close-menu` and\n * `deselect-items` events.\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-menu-item')\nexport class MdMenuItem extends MenuItemEl {\n  static override styles = [styles, forcedColorsStyles];\n}\n"]}

package/menu/menu.d.ts

@@ -3,10 +3,11 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { Menu } from './lib/menu.js';
-export { ListItem } from '../list/lib/listitem/list-item.js';
-export { Corner, DefaultFocusState } from './lib/menu.js';
-export { CloseMenuEvent, DeactivateItemsEvent, MenuItem } from './lib/shared.js';
+import { Menu } from './internal/menu.js';
+export { ListItem } from '../list/internal/list-navigation-helpers.js';
+export { MenuItem } from './internal/controllers/menuItemController.js';
+export { CloseMenuEvent, FocusState, Menu } from './internal/controllers/shared.js';
+export { Corner } from './internal/menu.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-menu': MdMenu;
@@ -30,21 +31,28 @@ declare global {
  * ```html
  * <div style="position:relative;">
  *   <button
- *       class="anchor"
- *       ${ref(anchorRef)}
+ *       id="anchor"
  *       @click=${() => this.menuRef.value.show()}>
  *     Click to open menu
  *   </button>
  *   <!--
  *     `has-overflow` is required when using a submenu which overflows the
- *     menu's contents
+ *     menu's contents.
+ *
+ *     Additionally, `anchor` ingests an idref which do not pass through shadow
+ *     roots. You can also set `.anchorElement` to an element reference if
+ *     necessary.
  *   -->
- *   <md-menu has-overflow ${ref(menuRef)} ${(el) => el.anchor =
- * anchorRef.value}> <md-menu-item header="This is a header"></md-menu-item>
- *     <md-sub-menu-item header="this is a submenu item">
- *       <md-menu slot="submenu">
- *         <md-menu-item
- *           header="This is an item inside a submenu"></md-menu-item>
+ *   <md-menu anchor="anchor" has-overflow ${ref(menuRef)}>
+ *     <md-menu-item headline="This is a headline"></md-menu-item>
+ *     <md-sub-menu>
+ *       <md-menu-item
+ *           slot="item"
+ *           headline="this is a submenu item">
+ *       </md-menu-item>
+ *       <md-menu slot="menu">
+ *         <md-menu-item headline="This is an item inside a submenu">
+ *         </md-menu-item>
  *       </md-menu>
  *     </md-sub-menu>
  *   </md-menu>

package/menu/menu.js

@@ -5,10 +5,11 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { styles as forcedColors } from './lib/forced-colors-styles.css.js';
-import { Menu } from './lib/menu.js';
-import { styles } from './lib/menu-styles.css.js';
-export { CloseMenuEvent, DeactivateItemsEvent } from './lib/shared.js';
+import { styles as forcedColors } from './internal/forced-colors-styles.css.js';
+import { Menu } from './internal/menu.js';
+import { styles } from './internal/menu-styles.css.js';
+export { FocusState } from './internal/controllers/shared.js';
+export { Corner } from './internal/menu.js';
 /**
  * @summary Menus display a list of choices on a temporary surface.
  *
@@ -27,21 +28,28 @@ export { CloseMenuEvent, DeactivateItemsEvent } from './lib/shared.js';
  * ```html
  * <div style="position:relative;">
  *   <button
- *       class="anchor"
- *       ${ref(anchorRef)}
+ *       id="anchor"
  *       @click=${() => this.menuRef.value.show()}>
  *     Click to open menu
  *   </button>
  *   <!--
  *     `has-overflow` is required when using a submenu which overflows the
- *     menu's contents
+ *     menu's contents.
+ *
+ *     Additionally, `anchor` ingests an idref which do not pass through shadow
+ *     roots. You can also set `.anchorElement` to an element reference if
+ *     necessary.
  *   -->
- *   <md-menu has-overflow ${ref(menuRef)} ${(el) => el.anchor =
- * anchorRef.value}> <md-menu-item header="This is a header"></md-menu-item>
- *     <md-sub-menu-item header="this is a submenu item">
- *       <md-menu slot="submenu">
- *         <md-menu-item
- *           header="This is an item inside a submenu"></md-menu-item>
+ *   <md-menu anchor="anchor" has-overflow ${ref(menuRef)}>
+ *     <md-menu-item headline="This is a headline"></md-menu-item>
+ *     <md-sub-menu>
+ *       <md-menu-item
+ *           slot="item"
+ *           headline="this is a submenu item">
+ *       </md-menu-item>
+ *       <md-menu slot="menu">
+ *         <md-menu-item headline="This is an item inside a submenu">
+ *         </md-menu-item>
  *       </md-menu>
  *     </md-sub-menu>
  *   </md-menu>
@@ -51,11 +59,10 @@ export { CloseMenuEvent, DeactivateItemsEvent } from './lib/shared.js';
  * @final
  * @suppress {visibility}
  */
-let MdMenu = class MdMenu extends Menu {
+export let MdMenu = class MdMenu extends Menu {
 };
 MdMenu.styles = [styles, forcedColors];
 MdMenu = __decorate([
     customElement('md-menu')
 ], MdMenu);
-export { MdMenu };
 //# sourceMappingURL=menu.js.map

package/menu/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sourceRoot":"","sources":["menu.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAC,IAAI,EAAC,MAAM,eAAe,CAAC;AACnC,OAAO,EAAC,MAAM,EAAC,MAAM,0BAA0B,CAAC;AAIhD,OAAO,EAAC,cAAc,EAAE,oBAAoB,EAAW,MAAM,iBAAiB,CAAC;AAQ/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,IAAI;;AACd,aAAM,GAAG,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;AADrC,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAElB;SAFY,MAAM","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as forcedColors} from './lib/forced-colors-styles.css.js';\nimport {Menu} from './lib/menu.js';\nimport {styles} from './lib/menu-styles.css.js';\n\nexport {ListItem} from '../list/lib/listitem/list-item.js';\nexport {Corner, DefaultFocusState} from './lib/menu.js';\nexport {CloseMenuEvent, DeactivateItemsEvent, MenuItem} from './lib/shared.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-menu': MdMenu;\n  }\n}\n\n/**\n * @summary Menus display a list of choices on a temporary surface.\n *\n * @description\n * Menus appear when users interact with a button, action, or other control.\n *\n * They can be opened from a variety of elements, most commonly icon buttons,\n * buttons, and text fields.\n *\n * md-menu listens for the `close-menu` and `deselect-items` events.\n *\n * - `close-menu` closes the menu when dispatched from a child element.\n * - `deselect-items` deselects all of its immediate menu-item children.\n *\n * @example\n * ```html\n * <div style=\"position:relative;\">\n *   <button\n *       class=\"anchor\"\n *       ${ref(anchorRef)}\n *       @click=${() => this.menuRef.value.show()}>\n *     Click to open menu\n *   </button>\n *   <!--\n *     `has-overflow` is required when using a submenu which overflows the\n *     menu's contents\n *   -->\n *   <md-menu has-overflow ${ref(menuRef)} ${(el) => el.anchor =\n * anchorRef.value}> <md-menu-item header=\"This is a header\"></md-menu-item>\n *     <md-sub-menu-item header=\"this is a submenu item\">\n *       <md-menu slot=\"submenu\">\n *         <md-menu-item\n *           header=\"This is an item inside a submenu\"></md-menu-item>\n *       </md-menu>\n *     </md-sub-menu>\n *   </md-menu>\n * </div>\n * ```\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-menu')\nexport class MdMenu extends Menu {\n  static override styles = [styles, forcedColors];\n}\n"]}
+{"version":3,"file":"menu.js","sourceRoot":"","sources":["menu.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,wCAAwC,CAAC;AAC9E,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAC,MAAM,EAAC,MAAM,+BAA+B,CAAC;AAIrD,OAAO,EAAiB,UAAU,EAAO,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,MAAM,EAAC,MAAM,oBAAoB,CAAC;AAQ1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AAEI,WAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,IAAI;;AACd,aAAM,GAAG,CAAC,MAAM,EAAE,YAAY,CAAC,AAAzB,CAA0B;AADrC,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAElB","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as forcedColors} from './internal/forced-colors-styles.css.js';\nimport {Menu} from './internal/menu.js';\nimport {styles} from './internal/menu-styles.css.js';\n\nexport {ListItem} from '../list/internal/list-navigation-helpers.js';\nexport {MenuItem} from './internal/controllers/menuItemController.js';\nexport {CloseMenuEvent, FocusState, Menu} from './internal/controllers/shared.js';\nexport {Corner} from './internal/menu.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-menu': MdMenu;\n  }\n}\n\n/**\n * @summary Menus display a list of choices on a temporary surface.\n *\n * @description\n * Menus appear when users interact with a button, action, or other control.\n *\n * They can be opened from a variety of elements, most commonly icon buttons,\n * buttons, and text fields.\n *\n * md-menu listens for the `close-menu` and `deselect-items` events.\n *\n * - `close-menu` closes the menu when dispatched from a child element.\n * - `deselect-items` deselects all of its immediate menu-item children.\n *\n * @example\n * ```html\n * <div style=\"position:relative;\">\n *   <button\n *       id=\"anchor\"\n *       @click=${() => this.menuRef.value.show()}>\n *     Click to open menu\n *   </button>\n *   <!--\n *     `has-overflow` is required when using a submenu which overflows the\n *     menu's contents.\n *\n *     Additionally, `anchor` ingests an idref which do not pass through shadow\n *     roots. You can also set `.anchorElement` to an element reference if\n *     necessary.\n *   -->\n *   <md-menu anchor=\"anchor\" has-overflow ${ref(menuRef)}>\n *     <md-menu-item headline=\"This is a headline\"></md-menu-item>\n *     <md-sub-menu>\n *       <md-menu-item\n *           slot=\"item\"\n *           headline=\"this is a submenu item\">\n *       </md-menu-item>\n *       <md-menu slot=\"menu\">\n *         <md-menu-item headline=\"This is an item inside a submenu\">\n *         </md-menu-item>\n *       </md-menu>\n *     </md-sub-menu>\n *   </md-menu>\n * </div>\n * ```\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-menu')\nexport class MdMenu extends Menu {\n  static override styles = [styles, forcedColors];\n}\n"]}

package/menu/sub-menu.d.ts

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { SubMenu } from './internal/submenu/sub-menu.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-sub-menu': MdSubMenu;
+    }
+}
+/**
+ * @summary Menus display a list of choices on a temporary surface.
+ *
+ * @description
+ * Menu items are the selectable choices within the menu. Menu items must
+ * implement the `Menu` interface and also have the `md-menu`
+ * attribute. Additionally menu items are list items so they must also have the
+ * `md-list-item` attribute.
+ *
+ * Menu items can control a menu by selectively firing the `close-menu` and
+ * `deselect-items` events.
+ *
+ * This menu item will open a sub-menu that is slotted in the `submenu` slot.
+ * Additionally, the containing menu must either have `has-overflow` or
+ * `positioning=fixed` set to `true` in order to display the containing menu
+ * properly.
+ *
+ * @example
+ * ```html
+ * <div style="position:relative;">
+ *   <button
+ *       id="anchor"
+ *       @click=${() => this.menuRef.value.show()}>
+ *     Click to open menu
+ *   </button>
+ *   <!--
+ *     `has-overflow` is required when using a submenu which overflows the
+ *     menu's contents
+ *   -->
+ *   <md-menu anchor="anchor" has-overflow ${ref(menuRef)}>
+ *     <md-menu-item headline="This is a headline"></md-menu-item>
+ *     <md-sub-menu>
+ *       <md-menu-item
+ *           slot="item"
+ *           headline="this is a submenu item">
+ *       </md-menu-item>
+ *       <md-menu slot="menu">
+ *         <md-menu-item headline="This is an item inside a submenu">
+ *         </md-menu-item>
+ *       </md-menu>
+ *     </md-sub-menu>
+ *   </md-menu>
+ * </div>
+ * ```
+ *
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdSubMenu extends SubMenu {
+    static styles: import("lit").CSSResult;
+}