@spectrum-web-components/menu 0.34.0 → 0.34.1-rc.0

package/src/MenuGroup.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["MenuGroup.ts"],
-  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    queryAssignedNodes,\n    state,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport { Menu } from './Menu.js';\n// Leveraged in build systems that use aliasing to prevent multiple registrations: https://github.com/adobe/spectrum-web-components/pull/3225\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport menuGroupStyles from './menu-group.css.js';\n\n/**\n * @element sp-menu-group\n *\n * @slot header - headline of the menu group\n * @slot - menu items to be listed in the group\n */\nexport class MenuGroup extends Menu {\n    public static override get styles(): CSSResultArray {\n        return [...super.styles, menuGroupStyles];\n    }\n\n    private static instances = 0;\n\n    private headerId!: string;\n\n    public constructor() {\n        super();\n        MenuGroup.instances += 1;\n        this.headerId = `sp-menu-group-label-${MenuGroup.instances}`;\n    }\n\n    @queryAssignedNodes({\n        slot: 'header',\n        flatten: true,\n    })\n    private headerElements!: NodeListOf<HTMLElement>;\n\n    @state()\n    private headerElement?: HTMLElement;\n\n    protected override get ownRole(): string {\n        switch (this.selects) {\n            case 'multiple':\n            case 'single':\n            case 'inherit':\n                return 'group';\n            default:\n                return 'menu';\n        }\n    }\n\n    protected updateLabel(): void {\n        const headerElement = this.headerElements.length\n            ? this.headerElements[0]\n            : undefined;\n        if (headerElement !== this.headerElement) {\n            if (this.headerElement && this.headerElement.id === this.headerId) {\n                this.headerElement.removeAttribute('id');\n            }\n            if (headerElement) {\n                const headerId = headerElement.id || this.headerId;\n                if (!headerElement.id) {\n                    headerElement.id = headerId;\n                }\n                this.setAttribute('aria-labelledby', headerId);\n            } else {\n                this.removeAttribute('aria-labelledby');\n            }\n        }\n        this.headerElement = headerElement;\n    }\n\n    public override render(): TemplateResult {\n        return html`\n            <span class=\"header\" ?hidden=${!this.headerElement}>\n                <slot name=\"header\" @slotchange=${this.updateLabel}></slot>\n            </span>\n            <sp-menu ignore>\n                <slot></slot>\n            </sp-menu>\n        `;\n    }\n}\n"],
-  "mappings": "qNAYA,OAEI,QAAAA,MAEG,gCACP,OACI,sBAAAC,EACA,SAAAC,MACG,kDAEP,OAAS,QAAAC,MAAY,YAErB,MAAO,2CACP,OAAOC,MAAqB,sBAQrB,MAAMC,EAAN,cAAwBF,CAAK,CASzB,aAAc,CACjB,MAAM,EACNE,EAAU,WAAa,EACvB,KAAK,SAAW,uBAAuBA,EAAU,WACrD,CAZA,WAA2B,QAAyB,CAChD,MAAO,CAAC,GAAG,MAAM,OAAQD,CAAe,CAC5C,CAqBA,IAAuB,SAAkB,CACrC,OAAQ,KAAK,QAAS,CAClB,IAAK,WACL,IAAK,SACL,IAAK,UACD,MAAO,QACX,QACI,MAAO,MACf,CACJ,CAEU,aAAoB,CAC1B,MAAME,EAAgB,KAAK,eAAe,OACpC,KAAK,eAAe,CAAC,EACrB,OACN,GAAIA,IAAkB,KAAK,cAIvB,GAHI,KAAK,eAAiB,KAAK,cAAc,KAAO,KAAK,UACrD,KAAK,cAAc,gBAAgB,IAAI,EAEvCA,EAAe,CACf,MAAMC,EAAWD,EAAc,IAAM,KAAK,SACrCA,EAAc,KACfA,EAAc,GAAKC,GAEvB,KAAK,aAAa,kBAAmBA,CAAQ,OAE7C,KAAK,gBAAgB,iBAAiB,EAG9C,KAAK,cAAgBD,CACzB,CAEgB,QAAyB,CACrC,OAAON;AAAA,2CAC4B,CAAC,KAAK;AAAA,kDACC,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,SAMnD,CACJ,EAlEO,WAAM,UAANK,EAAM,UAKM,UAAY,EAcnBG,EAAA,CAJPP,EAAmB,CAChB,KAAM,SACN,QAAS,EACb,CAAC,GAlBQ,UAmBD,8BAGAO,EAAA,CADPN,EAAM,GArBE,UAsBD",
-  "names": ["html", "queryAssignedNodes", "state", "Menu", "menuGroupStyles", "_MenuGroup", "headerElement", "headerId", "__decorateClass"]
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    CSSResultArray,\n    html,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    queryAssignedNodes,\n    state,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport { Menu } from './Menu.js';\n// Leveraged in build systems that use aliasing to prevent multiple registrations: https://github.com/adobe/spectrum-web-components/pull/3225\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport menuGroupStyles from './menu-group.css.js';\n\n/**\n * @element sp-menu-group\n *\n * @slot header - headline of the menu group\n * @slot - menu items to be listed in the group\n */\nexport class MenuGroup extends Menu {\n    public static override get styles(): CSSResultArray {\n        return [...super.styles, menuGroupStyles];\n    }\n\n    private headerId = '';\n\n    @queryAssignedNodes({\n        slot: 'header',\n        flatten: true,\n    })\n    private headerElements!: NodeListOf<HTMLElement>;\n\n    @state()\n    private headerElement?: HTMLElement;\n\n    protected override get ownRole(): string {\n        switch (this.selects) {\n            case 'multiple':\n            case 'single':\n            case 'inherit':\n                return 'group';\n            default:\n                return 'menu';\n        }\n    }\n\n    protected updateLabel(): void {\n        const headerElement = this.headerElements.length\n            ? this.headerElements[0]\n            : undefined;\n        if (headerElement !== this.headerElement) {\n            if (this.headerElement && this.headerElement.id === this.headerId) {\n                this.headerElement.removeAttribute('id');\n            }\n            if (headerElement) {\n                this.headerId =\n                    this.headerId ||\n                    `sp-menu-group-label-${crypto.randomUUID().slice(0, 8)}`;\n                const headerId = headerElement.id || this.headerId;\n                if (!headerElement.id) {\n                    headerElement.id = headerId;\n                }\n                this.setAttribute('aria-labelledby', headerId);\n            } else {\n                this.removeAttribute('aria-labelledby');\n            }\n        }\n        this.headerElement = headerElement;\n    }\n\n    public override render(): TemplateResult {\n        return html`\n            <span class=\"header\" ?hidden=${!this.headerElement}>\n                <slot name=\"header\" @slotchange=${this.updateLabel}></slot>\n            </span>\n            <sp-menu ignore>${this.renderMenuItemSlot()}</sp-menu>\n        `;\n    }\n}\n"],
+  "mappings": "qNAYA,OAEI,QAAAA,MAEG,gCACP,OACI,sBAAAC,EACA,SAAAC,MACG,kDAEP,OAAS,QAAAC,MAAY,YAErB,MAAO,2CACP,OAAOC,MAAqB,sBAQrB,aAAM,kBAAkBD,CAAK,CAA7B,kCAKH,KAAQ,SAAW,GAJnB,WAA2B,QAAyB,CAChD,MAAO,CAAC,GAAG,MAAM,OAAQC,CAAe,CAC5C,CAaA,IAAuB,SAAkB,CACrC,OAAQ,KAAK,QAAS,CAClB,IAAK,WACL,IAAK,SACL,IAAK,UACD,MAAO,QACX,QACI,MAAO,MACf,CACJ,CAEU,aAAoB,CAC1B,MAAMC,EAAgB,KAAK,eAAe,OACpC,KAAK,eAAe,CAAC,EACrB,OACN,GAAIA,IAAkB,KAAK,cAIvB,GAHI,KAAK,eAAiB,KAAK,cAAc,KAAO,KAAK,UACrD,KAAK,cAAc,gBAAgB,IAAI,EAEvCA,EAAe,CACf,KAAK,SACD,KAAK,UACL,uBAAuB,OAAO,WAAW,EAAE,MAAM,EAAG,CAAC,IACzD,MAAMC,EAAWD,EAAc,IAAM,KAAK,SACrCA,EAAc,KACfA,EAAc,GAAKC,GAEvB,KAAK,aAAa,kBAAmBA,CAAQ,OAE7C,KAAK,gBAAgB,iBAAiB,EAG9C,KAAK,cAAgBD,CACzB,CAEgB,QAAyB,CACrC,OAAOL;AAAA,2CAC4B,CAAC,KAAK;AAAA,kDACC,KAAK;AAAA;AAAA,8BAEzB,KAAK,mBAAmB;AAAA,SAElD,CACJ,CAhDYO,EAAA,CAJPN,EAAmB,CAChB,KAAM,SACN,QAAS,EACb,CAAC,GAVQ,UAWD,8BAGAM,EAAA,CADPL,EAAM,GAbE,UAcD",
+  "names": ["html", "queryAssignedNodes", "state", "Menu", "menuGroupStyles", "headerElement", "headerId", "__decorateClass"]
 }

package/src/MenuItem.d.ts

@@ -3,23 +3,19 @@ import '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
 import type { Menu } from './Menu.js';
-export declare class MenuItemRemovedEvent extends Event {
-    constructor();
-    get item(): MenuItem;
-    _item: MenuItem;
-    focused: boolean;
-    reset(item: MenuItem): void;
-}
+import '@spectrum-web-components/overlay/sp-overlay.js';
+import { OverlayBase } from 'overlay/src/OverlayBase.js';
+declare type MenuCascadeItem = {
+    hadFocusRoot: boolean;
+    ancestorWithSelects?: HTMLElement;
+};
 export declare class MenuItemAddedOrUpdatedEvent extends Event {
-    constructor();
-    set focusRoot(root: Menu | undefined);
-    set selectionRoot(root: Menu);
+    constructor(item: MenuItem);
+    clear(item: MenuItem): void;
+    menuCascade: WeakMap<HTMLElement, MenuCascadeItem>;
     get item(): MenuItem;
-    _item: MenuItem;
-    set currentAncestorWithSelects(ancestor: Menu | undefined);
-    get currentAncestorWithSelects(): Menu | undefined;
-    _currentAncestorWithSelects?: Menu;
-    reset(item: MenuItem): void;
+    private _item;
+    currentAncestorWithSelects?: Menu;
 }
 export declare type MenuItemChildren = {
     icon: Element[];
@@ -37,12 +33,9 @@ declare const MenuItem_base: typeof Focusable & {
  * @slot value - content placed at the end of the Menu Item like values, keyboard shortcuts, etc.
  * @slot submenu - content placed in a submenu
  * @fires sp-menu-item-added - announces the item has been added so a parent menu can take ownerships
- * @fires sp-menu-item-removed - announces when removed from the DOM so the parent menu can remove ownership and update selected state
  */
 export declare class MenuItem extends MenuItem_base {
     static get styles(): CSSResultArray;
-    static instanceCount: number;
-    private isInSubmenu;
     active: boolean;
     focused: boolean;
     selected: boolean;
@@ -56,6 +49,7 @@ export declare class MenuItem extends MenuItem_base {
     hasSubmenu: boolean;
     noWrap: boolean;
     private anchorElement;
+    overlayElement: OverlayBase;
     get focusElement(): HTMLElement;
     get itemChildren(): MenuItemChildren;
     private _itemChildren?;
@@ -66,6 +60,7 @@ export declare class MenuItem extends MenuItem_base {
     private proxyFocus;
     private shouldProxyClick;
     protected breakItemChildrenCache(): void;
+    protected renderSubmenu(): TemplateResult;
     protected render(): TemplateResult;
     protected manageSubmenu(event: Event & {
         target: HTMLSlotElement;
@@ -75,9 +70,10 @@ export declare class MenuItem extends MenuItem_base {
     protected firstUpdated(changes: PropertyValues): void;
     protected closeOverlaysForRoot(): void;
     closeOverlay?: () => Promise<void>;
-    protected handleSubmenuClick(): void;
+    protected handleSubmenuClick(event: Event): void;
     protected handlePointerenter(): void;
     protected leaveTimeout?: ReturnType<typeof setTimeout>;
+    protected recentlyLeftChild: boolean;
     protected handlePointerleave(): void;
     /**
      * When there is a `change` event in the submenu for this item
@@ -86,8 +82,11 @@ export declare class MenuItem extends MenuItem_base {
      * and the root of the tree to have their selection changes and
      * be closed.
      */
-    protected handleSubmenuChange: () => void;
-    protected handleSubmenuPointerenter: () => void;
+    protected handleSubmenuChange(event: Event): void;
+    protected handleSubmenuPointerenter(): void;
+    protected handleSubmenuPointerleave(): Promise<void>;
+    protected handleSubmenuOpen(event: Event): void;
+    protected cleanup(): void;
     openOverlay(): Promise<void>;
     updateAriaSelected(): void;
     setRole(role: string): void;
@@ -95,16 +94,19 @@ export declare class MenuItem extends MenuItem_base {
     connectedCallback(): void;
     _parentElement: HTMLElement;
     disconnectedCallback(): void;
+    private willDispatchUpdate;
     triggerUpdate(): Promise<void>;
+    dispatchUpdate(): void;
     menuData: {
         focusRoot?: Menu;
+        parentMenu?: Menu;
         selectionRoot?: Menu;
+        cleanupSteps: ((item: MenuItem) => void)[];
     };
 }
 declare global {
     interface GlobalEventHandlersEventMap {
         'sp-menu-item-added-or-updated': MenuItemAddedOrUpdatedEvent;
-        'sp-menu-item-removed': MenuItemRemovedEvent;
     }
 }
 export {};

package/src/MenuItem.dev.js

@@ -22,83 +22,38 @@ import { LikeAnchor } from "@spectrum-web-components/shared/src/like-anchor.js";
 import { Focusable } from "@spectrum-web-components/shared/src/focusable.js";
 import "@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js";
 import chevronStyles from "@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js";
-import { openOverlay } from "@spectrum-web-components/overlay/src/loader.js";
-import { OverlayCloseEvent } from "@spectrum-web-components/overlay/src/overlay-events.js";
 import menuItemStyles from "./menu-item.css.js";
 import checkmarkStyles from "@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js";
-import { reparentChildren } from "@spectrum-web-components/shared/src/reparent-children.js";
 import { MutationController } from "@lit-labs/observers/mutation-controller.js";
+import "@spectrum-web-components/overlay/sp-overlay.js";
 const POINTERLEAVE_TIMEOUT = 100;
-export class MenuItemRemovedEvent extends Event {
-  constructor() {
-    super("sp-menu-item-removed", {
-      bubbles: true,
-      composed: true
-    });
-    this.focused = false;
-  }
-  get item() {
-    return this._item;
-  }
-  reset(item) {
-    this._item = item;
-  }
-}
 export class MenuItemAddedOrUpdatedEvent extends Event {
-  constructor() {
+  constructor(item) {
     super("sp-menu-item-added-or-updated", {
       bubbles: true,
       composed: true
     });
+    this.menuCascade = /* @__PURE__ */ new WeakMap();
+    this.clear(item);
   }
-  set focusRoot(root) {
-    this.item.menuData.focusRoot = this.item.menuData.focusRoot || root;
-  }
-  set selectionRoot(root) {
-    this.item.menuData.selectionRoot = this.item.menuData.selectionRoot || root;
-  }
-  get item() {
-    return this._item;
-  }
-  set currentAncestorWithSelects(ancestor) {
-    this._currentAncestorWithSelects = ancestor;
-  }
-  get currentAncestorWithSelects() {
-    return this._currentAncestorWithSelects;
-  }
-  reset(item) {
+  clear(item) {
     this._item = item;
-    this._currentAncestorWithSelects = void 0;
+    this.currentAncestorWithSelects = void 0;
     item.menuData = {
+      cleanupSteps: [],
       focusRoot: void 0,
-      selectionRoot: void 0
+      selectionRoot: void 0,
+      parentMenu: void 0
     };
+    this.menuCascade = /* @__PURE__ */ new WeakMap();
   }
-}
-let addOrUpdateEvent = new MenuItemAddedOrUpdatedEvent();
-let removeEvent = new MenuItemRemovedEvent();
-let addOrUpdateEventRafId = 0;
-function resetAddOrUpdateEvent() {
-  if (addOrUpdateEventRafId === 0) {
-    addOrUpdateEventRafId = requestAnimationFrame(() => {
-      addOrUpdateEvent = new MenuItemAddedOrUpdatedEvent();
-      addOrUpdateEventRafId = 0;
-    });
-  }
-}
-let removeEventEventtRafId = 0;
-function resetRemoveEvent() {
-  if (removeEventEventtRafId === 0) {
-    removeEventEventtRafId = requestAnimationFrame(() => {
-      removeEvent = new MenuItemRemovedEvent();
-      removeEventEventtRafId = 0;
-    });
+  get item() {
+    return this._item;
   }
 }
-const _MenuItem = class extends LikeAnchor(Focusable) {
+export class MenuItem extends LikeAnchor(Focusable) {
   constructor() {
     super();
-    this.isInSubmenu = false;
     this.active = false;
     this.focused = false;
     this.selected = false;
@@ -106,28 +61,17 @@ const _MenuItem = class extends LikeAnchor(Focusable) {
     this.hasSubmenu = false;
     this.noWrap = false;
     this.open = false;
-    /**
-     * When there is a `change` event in the submenu for this item
-     * then we "click" this item to cascade the selection up the
-     * menu tree allowing all submenus between the initial selection
-     * and the root of the tree to have their selection changes and
-     * be closed.
-     */
-    this.handleSubmenuChange = () => {
-      var _a;
-      (_a = this.menuData.selectionRoot) == null ? void 0 : _a.selectOrToggleItem(this);
-    };
-    this.handleSubmenuPointerenter = () => {
-      if (this.leaveTimeout) {
-        clearTimeout(this.leaveTimeout);
-        delete this.leaveTimeout;
-      }
+    this.proxyFocus = () => {
+      this.focus();
     };
+    this.recentlyLeftChild = false;
+    this.willDispatchUpdate = false;
     this.menuData = {
       focusRoot: void 0,
-      selectionRoot: void 0
+      parentMenu: void 0,
+      selectionRoot: void 0,
+      cleanupSteps: []
     };
-    this.proxyFocus = this.proxyFocus.bind(this);
     this.addEventListener("click", this.handleClickCapture, {
       capture: true
     });
@@ -209,9 +153,6 @@ const _MenuItem = class extends LikeAnchor(Focusable) {
       return false;
     }
   }
-  proxyFocus() {
-    this.focus();
-  }
   shouldProxyClick() {
     let handled = false;
     if (this.anchorElement) {
@@ -224,6 +165,50 @@ const _MenuItem = class extends LikeAnchor(Focusable) {
     this._itemChildren = void 0;
     this.triggerUpdate();
   }
+  renderSubmenu() {
+    const slot = html`
+            <slot
+                name="submenu"
+                @slotchange=${this.manageSubmenu}
+                @sp-menu-item-added-or-updated=${{
+      handleEvent: (event) => {
+        event.clear(event.item);
+      },
+      capture: true
+    }}
+                @focusin=${(event) => event.stopPropagation()}
+            ></slot>
+        `;
+    if (!this.hasSubmenu) {
+      return slot;
+    }
+    return html`
+            <sp-overlay
+                .triggerElement=${this}
+                ?disabled=${!this.hasSubmenu}
+                ?open=${this.hasSubmenu && this.open}
+                .placement=${this.isLTR ? "right-start" : "left-start"}
+                .offset=${[-10, -5]}
+                .type=${"auto"}
+                @close=${(event) => event.stopPropagation()}
+            >
+                <sp-popover
+                    @change=${(event) => {
+      this.handleSubmenuChange(event);
+      this.open = false;
+    }}
+                    @pointerenter=${this.handleSubmenuPointerenter}
+                    @pointerleave=${this.handleSubmenuPointerleave}
+                    @sp-menu-item-added-or-updated=${(event) => event.stopPropagation()}
+                >
+                    ${slot}
+                </sp-popover>
+            </sp-overlay>
+            <sp-icon-chevron100
+                class="spectrum-UIIcon-ChevronRight100 chevron icon"
+            ></sp-icon-chevron100>
+        `;
+  }
   render() {
     return html`
             <slot name="icon"></slot>
@@ -242,26 +227,17 @@ const _MenuItem = class extends LikeAnchor(Focusable) {
       ariaHidden: true,
       className: "button anchor hidden"
     }) : html``}
-            <slot
-                hidden
-                name="submenu"
-                @slotchange=${this.manageSubmenu}
-            ></slot>
-            ${this.hasSubmenu ? html`
-                      <sp-icon-chevron100
-                          class="spectrum-UIIcon-ChevronRight100 chevron icon"
-                      ></sp-icon-chevron100>
-                  ` : html``}
+            ${this.renderSubmenu()}
         `;
   }
   manageSubmenu(event) {
     const assignedElements = event.target.assignedElements({
       flatten: true
     });
-    this.hasSubmenu = this.open || !!assignedElements.length;
+    this.hasSubmenu = !!assignedElements.length;
   }
-  handleRemoveActive(event) {
-    if (event.type === "pointerleave" && this.hasSubmenu || this.hasSubmenu || this.open) {
+  handleRemoveActive() {
+    if (this.open) {
       return;
     }
     this.active = false;
@@ -273,20 +249,21 @@ const _MenuItem = class extends LikeAnchor(Focusable) {
     super.firstUpdated(changes);
     this.setAttribute("tabindex", "-1");
     this.addEventListener("pointerdown", this.handlePointerdown);
+    this.addEventListener("pointerenter", this.closeOverlaysForRoot);
     if (!this.hasAttribute("id")) {
-      this.id = `sp-menu-item-${_MenuItem.instanceCount++}`;
+      this.id = `sp-menu-item-${crypto.randomUUID().slice(0, 8)}`;
     }
-    this.addEventListener("pointerenter", this.closeOverlaysForRoot);
   }
   closeOverlaysForRoot() {
+    var _a;
     if (this.open)
       return;
-    const overalyCloseEvent = new OverlayCloseEvent({
-      root: this.menuData.focusRoot
-    });
-    this.dispatchEvent(overalyCloseEvent);
+    (_a = this.menuData.parentMenu) == null ? void 0 : _a.closeDescendentOverlays();
   }
-  handleSubmenuClick() {
+  handleSubmenuClick(event) {
+    if (event.composedPath().includes(this.overlayElement)) {
+      return;
+    }
     this.openOverlay();
   }
   handlePointerenter() {
@@ -298,64 +275,53 @@ const _MenuItem = class extends LikeAnchor(Focusable) {
     this.openOverlay();
   }
   handlePointerleave() {
-    if (this.hasSubmenu && this.open) {
+    if (this.open && !this.recentlyLeftChild) {
       this.leaveTimeout = setTimeout(() => {
         delete this.leaveTimeout;
-        if (this.closeOverlay)
-          this.closeOverlay();
+        this.open = false;
       }, POINTERLEAVE_TIMEOUT);
     }
   }
+  /**
+   * When there is a `change` event in the submenu for this item
+   * then we "click" this item to cascade the selection up the
+   * menu tree allowing all submenus between the initial selection
+   * and the root of the tree to have their selection changes and
+   * be closed.
+   */
+  handleSubmenuChange(event) {
+    var _a;
+    event.stopPropagation();
+    (_a = this.menuData.selectionRoot) == null ? void 0 : _a.selectOrToggleItem(this);
+  }
+  handleSubmenuPointerenter() {
+    this.recentlyLeftChild = true;
+  }
+  async handleSubmenuPointerleave() {
+    requestAnimationFrame(() => {
+      this.recentlyLeftChild = false;
+    });
+  }
+  handleSubmenuOpen(event) {
+    this.focused = false;
+    const parentOverlay = event.composedPath().find((el) => {
+      return el !== this.overlayElement && el.localName === "sp-overlay";
+    });
+    this.overlayElement.parentOverlayToForceClose = parentOverlay;
+  }
+  cleanup() {
+    this.open = false;
+    this.active = false;
+  }
   async openOverlay() {
     if (!this.hasSubmenu || this.open || this.disabled) {
       return;
     }
     this.open = true;
     this.active = true;
-    const submenu = this.shadowRoot.querySelector(
-      'slot[name="submenu"]'
-    ).assignedElements()[0];
-    submenu.addEventListener(
-      "pointerenter",
-      this.handleSubmenuPointerenter
-    );
-    submenu.addEventListener("change", this.handleSubmenuChange);
-    const popover = document.createElement("sp-popover");
-    const returnSubmenu = reparentChildren([submenu], popover, {
-      position: "beforeend",
-      prepareCallback: (el) => {
-        const slotName = el.slot;
-        el.tabIndex = 0;
-        el.removeAttribute("slot");
-        el.isSubmenu = true;
-        return (el2) => {
-          el2.tabIndex = -1;
-          el2.slot = slotName;
-          el2.isSubmenu = false;
-        };
-      }
-    });
-    const closeOverlay = openOverlay(this, "click", popover, {
-      placement: this.isLTR ? "right-start" : "left-start",
-      receivesFocus: "auto",
-      root: this.menuData.focusRoot
-    });
-    const closeSubmenu = async () => {
-      delete this.closeOverlay;
-      (await closeOverlay)();
-    };
-    this.closeOverlay = closeSubmenu;
-    const cleanup = (event) => {
-      event.stopPropagation();
-      delete this.closeOverlay;
-      returnSubmenu();
-      this.open = false;
-      this.active = false;
-    };
-    this.addEventListener("sp-closed", cleanup, {
+    this.addEventListener("sp-closed", this.cleanup, {
       once: true
     });
-    popover.addEventListener("change", closeSubmenu);
   }
   updateAriaSelected() {
     const role = this.getAttribute("role");
@@ -373,12 +339,14 @@ const _MenuItem = class extends LikeAnchor(Focusable) {
     this.updateAriaSelected();
   }
   updated(changes) {
+    var _a;
     super.updated(changes);
-    if (changes.has("label")) {
+    if (changes.has("label") && (this.label || typeof changes.get("label") !== "undefined")) {
       this.setAttribute("aria-label", this.label || "");
     }
-    if (changes.has("active")) {
+    if (changes.has("active") && (this.active || typeof changes.get("active") !== "undefined")) {
       if (this.active) {
+        (_a = this.menuData.selectionRoot) == null ? void 0 : _a.closeDescendentOverlays();
         this.addEventListener("pointerup", this.handleRemoveActive);
         this.addEventListener("pointerleave", this.handleRemoveActive);
         this.addEventListener("pointercancel", this.handleRemoveActive);
@@ -401,11 +369,12 @@ const _MenuItem = class extends LikeAnchor(Focusable) {
     if (changes.has("selected")) {
       this.updateAriaSelected();
     }
-    if (changes.has("hasSubmenu")) {
+    if (changes.has("hasSubmenu") && (this.hasSubmenu || typeof changes.get("hasSubmenu") !== "undefined")) {
       if (this.hasSubmenu) {
         this.addEventListener("click", this.handleSubmenuClick);
         this.addEventListener("pointerenter", this.handlePointerenter);
         this.addEventListener("pointerleave", this.handlePointerleave);
+        this.addEventListener("sp-opened", this.handleSubmenuOpen);
       } else if (!this.closeOverlay) {
         this.removeEventListener("click", this.handleSubmenuClick);
         this.removeEventListener(
@@ -416,42 +385,31 @@ const _MenuItem = class extends LikeAnchor(Focusable) {
           "pointerleave",
           this.handlePointerleave
         );
+        this.removeEventListener("sp-opened", this.handleSubmenuOpen);
       }
     }
   }
   connectedCallback() {
     super.connectedCallback();
-    this.isInSubmenu = !!this.closest('[slot="submenu"]');
-    if (this.isInSubmenu) {
-      return;
-    }
-    addOrUpdateEvent.reset(this);
-    this.dispatchEvent(addOrUpdateEvent);
-    resetAddOrUpdateEvent();
-    this._parentElement = this.parentElement;
+    this.triggerUpdate();
   }
   disconnectedCallback() {
-    if (!this.isInSubmenu && this._parentElement) {
-      removeEvent.reset(this);
-      this._parentElement.dispatchEvent(removeEvent);
-      resetRemoveEvent();
-    }
-    this.isInSubmenu = false;
-    this._itemChildren = void 0;
+    this.menuData.cleanupSteps.forEach((removal) => removal(this));
     super.disconnectedCallback();
   }
   async triggerUpdate() {
-    if (this.isInSubmenu) {
+    if (this.willDispatchUpdate) {
       return;
     }
+    this.willDispatchUpdate = true;
     await new Promise((ready) => requestAnimationFrame(ready));
-    addOrUpdateEvent.reset(this);
-    this.dispatchEvent(addOrUpdateEvent);
-    resetAddOrUpdateEvent();
+    this.dispatchUpdate();
   }
-};
-export let MenuItem = _MenuItem;
-MenuItem.instanceCount = 0;
+  dispatchUpdate() {
+    this.dispatchEvent(new MenuItemAddedOrUpdatedEvent(this));
+    this.willDispatchUpdate = false;
+  }
+}
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], MenuItem.prototype, "active", 2);
@@ -481,6 +439,9 @@ __decorateClass([
   query(".anchor")
 ], MenuItem.prototype, "anchorElement", 2);
 __decorateClass([
-  property({ type: Boolean })
+  query("sp-overlay")
+], MenuItem.prototype, "overlayElement", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
 ], MenuItem.prototype, "open", 2);
 //# sourceMappingURL=MenuItem.dev.js.map