@spectrum-web-components/menu 0.36.0 → 0.38.0

package/stories/submenu.stories.js

@@ -1,10 +1,11 @@
 "use strict";
-import { html, render } from "@spectrum-web-components/base";
+import { html } from "@spectrum-web-components/base";
 import "@spectrum-web-components/action-menu/sp-action-menu.js";
+import "@spectrum-web-components/menu/sp-menu.js";
 import "@spectrum-web-components/menu/sp-menu-item.js";
 import "@spectrum-web-components/menu/sp-menu-divider.js";
 import "@spectrum-web-components/menu/sp-menu-group.js";
-import { openOverlay, VirtualTrigger } from "@spectrum-web-components/overlay";
+import { VirtualTrigger } from "@spectrum-web-components/overlay";
 import "@spectrum-web-components/popover/sp-popover.js";
 import "@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js";
 export default {
@@ -18,34 +19,37 @@ class SubmenuReady extends HTMLElement {
   constructor() {
     super();
     this.handleMenuOpened = async (event) => {
+      this.menu.removeEventListener("sp-opened", this.handleMenuOpened);
       await nextFrame();
       await event.target.updateComplete;
-      const submenu2 = document.querySelector("#submenu-item-1");
-      if (!submenu2) {
+      this.submenu = document.querySelector("#submenu-item-1");
+      if (!this.submenu) {
         return;
       }
-      submenu2.addEventListener("sp-opened", this.handleSubmenuOpened, {
-        once: true
-      });
-      submenu2.dispatchEvent(
-        new PointerEvent("pointerenter", { bubbles: true, composed: true })
-      );
+      this.submenu.addEventListener("sp-opened", this.handleSubmenuOpened);
+      this.submenu.click();
     };
     this.handleSubmenuOpened = async (event) => {
+      this.submenu.removeEventListener("sp-opened", this.handleSubmenuOpened);
       await nextFrame();
       await event.target.updateComplete;
-      const submenu2 = document.querySelector("#submenu-item-2");
-      if (!submenu2) {
+      this.submenuChild = document.querySelector(
+        "#submenu-item-2"
+      );
+      if (!this.submenuChild) {
         return;
       }
-      submenu2.addEventListener("sp-opened", this.handleSubmenuChildOpened, {
-        once: true
-      });
-      submenu2.dispatchEvent(
-        new PointerEvent("pointerenter", { bubbles: true, composed: true })
+      this.submenuChild.addEventListener(
+        "sp-opened",
+        this.handleSubmenuChildOpened
       );
+      this.submenuChild.click();
     };
     this.handleSubmenuChildOpened = async (event) => {
+      this.submenuChild.removeEventListener(
+        "sp-opened",
+        this.handleSubmenuChildOpened
+      );
       await nextFrame();
       await event.target.updateComplete;
       this.ready(true);
@@ -58,11 +62,19 @@ class SubmenuReady extends HTMLElement {
   }
   async setup() {
     await nextFrame();
-    const menu = document.querySelector(`sp-action-menu`);
-    menu.addEventListener("sp-opened", this.handleMenuOpened, {
-      once: true
-    });
-    menu.open = true;
+    this.menu = document.querySelector(`sp-action-menu`);
+    this.menu.addEventListener("sp-opened", this.handleMenuOpened);
+    this.menu.addEventListener(
+      "sp-closed",
+      () => {
+        this.menu.removeEventListener(
+          "sp-opened",
+          this.handleMenuOpened
+        );
+      },
+      { once: true }
+    );
+    this.menu.open = true;
   }
   get updateComplete() {
     return this.readyPromise;
@@ -169,90 +181,16 @@ export const submenu = () => {
 };
 submenu.decorators = [submenuDecorator];
 export const contextMenu = () => {
-  const contextMenuTemplate = () => html`
-        <sp-popover
-            style="max-width: 33vw;"
-            @click=${(event) => {
-    var _a;
-    return (_a = event.target) == null ? void 0 : _a.dispatchEvent(
-      new Event("close", { bubbles: true })
-    );
-  }}
-        >
-            <sp-menu @change=${handleRootChange}>
-                <sp-menu-group>
-                    <span slot="header">Options</span>
-                    <sp-menu-item>
-                        Copy
-                        <span slot="value">⌘​S</span>
-                    </sp-menu-item>
-                    <sp-menu-item>
-                        Paste
-                        <span slot="value">⌘​P</span>
-                    </sp-menu-item>
-                    <sp-menu-item>
-                        Cut
-                        <span slot="value">⌘​X</span>
-                    </sp-menu-item>
-                    <sp-menu-divider></sp-menu-divider>
-                    <sp-menu-item>
-                        Select layer
-                        <sp-menu
-                            slot="submenu"
-                            selects="single"
-                            @change=${handleFirstDescendantChange}
-                        >
-                            <sp-menu-item selected>Ellipse 1</sp-menu-item>
-                            <sp-menu-item>Rectangle</sp-menu-item>
-                        </sp-menu>
-                    </sp-menu-item>
-                    <sp-menu-item>
-                        Group
-                        <span slot="value">⌘​G</span>
-                    </sp-menu-item>
-                    <sp-menu-item>
-                        Unlock
-                        <span slot="value">⌘​L</span>
-                    </sp-menu-item>
-                    <sp-menu-divider></sp-menu-divider>
-                    <sp-menu-item>
-                        Bring to front
-                        <span slot="value">⇧​⌘​​]</span>
-                    </sp-menu-item>
-                    <sp-menu-item>
-                        Bring forward
-                        <span slot="value">⌘​​]</span>
-                    </sp-menu-item>
-                    <sp-menu-item>
-                        Send backward
-                        <span slot="value">⌘​​[</span>
-                    </sp-menu-item>
-                    <sp-menu-item>
-                        Send to back
-                        <span slot="value">⇧​⌘​​[</span>
-                    </sp-menu-item>
-                    <sp-menu-divider></sp-menu-divider>
-                    <sp-menu-item>
-                        Delete
-                        <span slot="value">DEL</span>
-                    </sp-menu-item>
-                </sp-menu-group>
-            </sp-menu>
-        </sp-popover>
-    `;
-  const pointerenter = async (event) => {
+  const contextmenu = async (event) => {
     event.preventDefault();
-    const trigger = event.target;
     const virtualTrigger = new VirtualTrigger(event.clientX, event.clientY);
-    const fragment = document.createDocumentFragment();
-    render(contextMenuTemplate(), fragment);
-    const popover = fragment.querySelector("sp-popover");
+    const overlay = document.querySelector("sp-overlay");
     clearValues();
-    openOverlay(trigger, "modal", popover, {
-      placement: "right-start",
-      receivesFocus: "auto",
-      virtualTrigger
-    });
+    overlay.triggerElement = virtualTrigger;
+    overlay.willPreventClose = true;
+    overlay.type = "auto";
+    overlay.placement = "right-start";
+    overlay.open = true;
   };
   const getValueEls = () => {
     return {
@@ -266,8 +204,12 @@ export const contextMenu = () => {
     valueEls.first.textContent = "";
   };
   const handleRootChange = (event) => {
+    var _a;
     const valueEls = getValueEls();
     valueEls.root.textContent = event.target.value;
+    (_a = event.target.parentElement) == null ? void 0 : _a.dispatchEvent(
+      new Event("close", { bubbles: true })
+    );
   };
   const handleFirstDescendantChange = (event) => {
     const valueEls = getValueEls();
@@ -283,7 +225,7 @@ export const contextMenu = () => {
                 --swc-menu-width: 200px;
             }
         </style>
-        <div class="app-root" @contextmenu=${pointerenter}>
+        <div class="app-root" @contextmenu=${contextmenu}>
             <div>
                 Root value:
                 <span id="root-value"></span>
@@ -293,6 +235,77 @@ export const contextMenu = () => {
                 <br />
             </div>
         </div>
+        <sp-overlay>
+            <sp-popover
+                style="max-width: 33vw;"
+                @click=${(event) => {
+    var _a;
+    return (_a = event.target) == null ? void 0 : _a.dispatchEvent(
+      new Event("close", { bubbles: true })
+    );
+  }}
+            >
+                <sp-menu @change=${handleRootChange}>
+                    <sp-menu-group>
+                        <span slot="header">Options</span>
+                        <sp-menu-item>
+                            Copy
+                            <span slot="value">⌘​S</span>
+                        </sp-menu-item>
+                        <sp-menu-item>
+                            Paste
+                            <span slot="value">⌘​P</span>
+                        </sp-menu-item>
+                        <sp-menu-item>
+                            Cut
+                            <span slot="value">⌘​X</span>
+                        </sp-menu-item>
+                        <sp-menu-divider></sp-menu-divider>
+                        <sp-menu-item>
+                            Select layer
+                            <sp-menu
+                                slot="submenu"
+                                selects="single"
+                                @change=${handleFirstDescendantChange}
+                            >
+                                <sp-menu-item selected>Ellipse 1</sp-menu-item>
+                                <sp-menu-item>Rectangle</sp-menu-item>
+                            </sp-menu>
+                        </sp-menu-item>
+                        <sp-menu-item>
+                            Group
+                            <span slot="value">⌘​G</span>
+                        </sp-menu-item>
+                        <sp-menu-item>
+                            Unlock
+                            <span slot="value">⌘​L</span>
+                        </sp-menu-item>
+                        <sp-menu-divider></sp-menu-divider>
+                        <sp-menu-item>
+                            Bring to front
+                            <span slot="value">⇧​⌘​​]</span>
+                        </sp-menu-item>
+                        <sp-menu-item>
+                            Bring forward
+                            <span slot="value">⌘​​]</span>
+                        </sp-menu-item>
+                        <sp-menu-item>
+                            Send backward
+                            <span slot="value">⌘​​[</span>
+                        </sp-menu-item>
+                        <sp-menu-item>
+                            Send to back
+                            <span slot="value">⇧​⌘​​[</span>
+                        </sp-menu-item>
+                        <sp-menu-divider></sp-menu-divider>
+                        <sp-menu-item>
+                            Delete
+                            <span slot="value">DEL</span>
+                        </sp-menu-item>
+                    </sp-menu-group>
+                </sp-menu>
+            </sp-popover>
+        </sp-overlay>
     `;
 };
 //# sourceMappingURL=submenu.stories.js.map

package/stories/submenu.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["submenu.stories.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 { html, render, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport { openOverlay, VirtualTrigger } from '@spectrum-web-components/overlay';\nimport type { Popover } from '@spectrum-web-components/popover';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js';\nimport type { ActionMenu } from '@spectrum-web-components/action-menu';\nimport type { Menu, MenuItem } from '@spectrum-web-components/menu';\n\nexport default {\n    component: 'sp-menu',\n    title: 'Menu/Submenu',\n};\n\nfunction nextFrame(): Promise<void> {\n    return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nclass SubmenuReady extends HTMLElement {\n    ready!: (value: boolean | PromiseLike<boolean>) => void;\n\n    constructor() {\n        super();\n        this.readyPromise = new Promise((res) => {\n            this.ready = res;\n            this.setup();\n        });\n    }\n\n    async setup(): Promise<void> {\n        await nextFrame();\n\n        const menu = document.querySelector(`sp-action-menu`) as ActionMenu;\n        menu.addEventListener('sp-opened', this.handleMenuOpened, {\n            once: true,\n        });\n        menu.open = true;\n    }\n\n    handleMenuOpened = async (event: Event): Promise<void> => {\n        await nextFrame();\n        await (event.target as ActionMenu).updateComplete;\n\n        const submenu = document.querySelector('#submenu-item-1') as MenuItem;\n        if (!submenu) {\n            return;\n        }\n        submenu.addEventListener('sp-opened', this.handleSubmenuOpened, {\n            once: true,\n        });\n        submenu.dispatchEvent(\n            new PointerEvent('pointerenter', { bubbles: true, composed: true })\n        );\n    };\n\n    handleSubmenuOpened = async (event: Event): Promise<void> => {\n        await nextFrame();\n        await (event.target as MenuItem).updateComplete;\n\n        const submenu = document.querySelector('#submenu-item-2') as MenuItem;\n        if (!submenu) {\n            return;\n        }\n        submenu.addEventListener('sp-opened', this.handleSubmenuChildOpened, {\n            once: true,\n        });\n        submenu.dispatchEvent(\n            new PointerEvent('pointerenter', { bubbles: true, composed: true })\n        );\n    };\n\n    handleSubmenuChildOpened = async (event: Event): Promise<void> => {\n        await nextFrame();\n        await (event.target as MenuItem).updateComplete;\n\n        this.ready(true);\n    };\n\n    private readyPromise: Promise<boolean> = Promise.resolve(false);\n\n    get updateComplete(): Promise<boolean> {\n        return this.readyPromise;\n    }\n}\n\ncustomElements.define('submenu-ready', SubmenuReady);\n\nconst submenuDecorator = (story: () => TemplateResult): TemplateResult => {\n    return html`\n        ${story()}\n        <submenu-ready></submenu-ready>\n    `;\n};\n\nexport const submenu = (): TemplateResult => {\n    const getValueEls = (): {\n        root: HTMLElement;\n        first: HTMLElement;\n        second: HTMLElement;\n    } => {\n        return {\n            root: document.querySelector('#root-value') as HTMLElement,\n            first: document.querySelector('#first-value') as HTMLElement,\n            second: document.querySelector('#second-value') as HTMLElement,\n        };\n    };\n    const clearValues = (): void => {\n        const valueEls = getValueEls();\n        valueEls.root.textContent = '';\n        valueEls.first.textContent = '';\n        valueEls.second.textContent = '';\n    };\n    const handleRootChange = (event: Event & { target: ActionMenu }): void => {\n        const valueEls = getValueEls();\n        valueEls.root.textContent = event.target.value;\n    };\n    const handleFirstDescendantChange = (\n        event: Event & { target: Menu }\n    ): void => {\n        const valueEls = getValueEls();\n        valueEls.first.textContent = event.target.selected[0] || '';\n    };\n    const handleSecondDescendantChange = (\n        event: Event & { target: Menu }\n    ): void => {\n        const valueEls = getValueEls();\n        valueEls.second.textContent = event.target.selected[0] || '';\n    };\n    return html`\n        <sp-action-menu @change=${handleRootChange} @sp-opened=${clearValues}>\n            <sp-icon-show-menu slot=\"icon\"></sp-icon-show-menu>\n            <sp-menu-group\n                @change=${() => console.log('group change')}\n                role=\"none\"\n            >\n                <span slot=\"header\">New York</span>\n                <sp-menu-item>Bronx</sp-menu-item>\n                <sp-menu-item id=\"submenu-item-1\">\n                    Brooklyn\n                    <sp-menu\n                        slot=\"submenu\"\n                        @change=${handleFirstDescendantChange}\n                    >\n                        <sp-menu-item id=\"submenu-item-2\">\n                            Ft. Greene\n                            <sp-menu\n                                slot=\"submenu\"\n                                @change=${handleSecondDescendantChange}\n                            >\n                                <sp-menu-item>S. Oxford St</sp-menu-item>\n                                <sp-menu-item>S. Portland Ave</sp-menu-item>\n                                <sp-menu-item>S. Elliot Pl</sp-menu-item>\n                            </sp-menu>\n                        </sp-menu-item>\n                        <sp-menu-item disabled>Park Slope</sp-menu-item>\n                        <sp-menu-item>Williamsburg</sp-menu-item>\n                    </sp-menu>\n                </sp-menu-item>\n                <sp-menu-item>\n                    Manhattan\n                    <sp-menu\n                        slot=\"submenu\"\n                        @change=${handleFirstDescendantChange}\n                    >\n                        <sp-menu-item disabled>SoHo</sp-menu-item>\n                        <sp-menu-item>\n                            Union Square\n                            <sp-menu\n                                slot=\"submenu\"\n                                @change=${handleSecondDescendantChange}\n                            >\n                                <sp-menu-item>14th St</sp-menu-item>\n                                <sp-menu-item>Broadway</sp-menu-item>\n                                <sp-menu-item>Park Ave</sp-menu-item>\n                            </sp-menu>\n                        </sp-menu-item>\n                        <sp-menu-item>Upper East Side</sp-menu-item>\n                    </sp-menu>\n                </sp-menu-item>\n            </sp-menu-group>\n        </sp-action-menu>\n        <div>\n            Root value:\n            <span id=\"root-value\"></span>\n            <br />\n            First descendant value:\n            <span id=\"first-value\"></span>\n            <br />\n            Second descendant value:\n            <span id=\"second-value\"></span>\n            <br />\n        </div>\n    `;\n};\n\nsubmenu.decorators = [submenuDecorator];\n\nexport const contextMenu = (): TemplateResult => {\n    const contextMenuTemplate = (): TemplateResult => html`\n        <sp-popover\n            style=\"max-width: 33vw;\"\n            @click=${(event: Event) =>\n                event.target?.dispatchEvent(\n                    new Event('close', { bubbles: true })\n                )}\n        >\n            <sp-menu @change=${handleRootChange}>\n                <sp-menu-group>\n                    <span slot=\"header\">Options</span>\n                    <sp-menu-item>\n                        Copy\n                        <span slot=\"value\">\u2318\u200BS</span>\n                    </sp-menu-item>\n                    <sp-menu-item>\n                        Paste\n                        <span slot=\"value\">\u2318\u200BP</span>\n                    </sp-menu-item>\n                    <sp-menu-item>\n                        Cut\n                        <span slot=\"value\">\u2318\u200BX</span>\n                    </sp-menu-item>\n                    <sp-menu-divider></sp-menu-divider>\n                    <sp-menu-item>\n                        Select layer\n                        <sp-menu\n                            slot=\"submenu\"\n                            selects=\"single\"\n                            @change=${handleFirstDescendantChange}\n                        >\n                            <sp-menu-item selected>Ellipse 1</sp-menu-item>\n                            <sp-menu-item>Rectangle</sp-menu-item>\n                        </sp-menu>\n                    </sp-menu-item>\n                    <sp-menu-item>\n                        Group\n                        <span slot=\"value\">\u2318\u200BG</span>\n                    </sp-menu-item>\n                    <sp-menu-item>\n                        Unlock\n                        <span slot=\"value\">\u2318\u200BL</span>\n                    </sp-menu-item>\n                    <sp-menu-divider></sp-menu-divider>\n                    <sp-menu-item>\n                        Bring to front\n                        <span slot=\"value\">\u21E7\u200B\u2318\u200B\u200B]</span>\n                    </sp-menu-item>\n                    <sp-menu-item>\n                        Bring forward\n                        <span slot=\"value\">\u2318\u200B\u200B]</span>\n                    </sp-menu-item>\n                    <sp-menu-item>\n                        Send backward\n                        <span slot=\"value\">\u2318\u200B\u200B[</span>\n                    </sp-menu-item>\n                    <sp-menu-item>\n                        Send to back\n                        <span slot=\"value\">\u21E7\u200B\u2318\u200B\u200B[</span>\n                    </sp-menu-item>\n                    <sp-menu-divider></sp-menu-divider>\n                    <sp-menu-item>\n                        Delete\n                        <span slot=\"value\">DEL</span>\n                    </sp-menu-item>\n                </sp-menu-group>\n            </sp-menu>\n        </sp-popover>\n    `;\n    const pointerenter = async (event: PointerEvent): Promise<void> => {\n        event.preventDefault();\n        const trigger = event.target as HTMLElement;\n        const virtualTrigger = new VirtualTrigger(event.clientX, event.clientY);\n        const fragment = document.createDocumentFragment();\n        render(contextMenuTemplate(), fragment);\n        const popover = fragment.querySelector('sp-popover') as Popover;\n        clearValues();\n        openOverlay(trigger, 'modal', popover, {\n            placement: 'right-start',\n            receivesFocus: 'auto',\n            virtualTrigger,\n        });\n    };\n    const getValueEls = (): { root: HTMLElement; first: HTMLElement } => {\n        return {\n            root: document.querySelector('#root-value') as HTMLElement,\n            first: document.querySelector('#first-value') as HTMLElement,\n        };\n    };\n    const clearValues = (): void => {\n        const valueEls = getValueEls();\n        valueEls.root.textContent = '';\n        valueEls.first.textContent = '';\n    };\n    const handleRootChange = (event: Event & { target: ActionMenu }): void => {\n        const valueEls = getValueEls();\n        valueEls.root.textContent = event.target.value;\n    };\n    const handleFirstDescendantChange = (\n        event: Event & { target: Menu }\n    ): void => {\n        const valueEls = getValueEls();\n        valueEls.first.textContent = event.target.selected[0] || '';\n    };\n    return html`\n        <style>\n            .app-root {\n                position: absolute;\n                inset: 0;\n            }\n            active-overlay::part(theme) {\n                --swc-menu-width: 200px;\n            }\n        </style>\n        <div class=\"app-root\" @contextmenu=${pointerenter}>\n            <div>\n                Root value:\n                <span id=\"root-value\"></span>\n                <br />\n                First descendant value:\n                <span id=\"first-value\"></span>\n                <br />\n            </div>\n        </div>\n    `;\n};\n"],
-  "mappings": "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",
-  "names": ["submenu"]
+  "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 { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport { Overlay, VirtualTrigger } from '@spectrum-web-components/overlay';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js';\nimport type { ActionMenu } from '@spectrum-web-components/action-menu';\nimport type { Menu, MenuItem } from '@spectrum-web-components/menu';\n\nexport default {\n    component: 'sp-menu',\n    title: 'Menu/Submenu',\n};\n\nfunction nextFrame(): Promise<void> {\n    return new Promise((res) => requestAnimationFrame(() => res()));\n}\n\nclass SubmenuReady extends HTMLElement {\n    ready!: (value: boolean | PromiseLike<boolean>) => void;\n\n    constructor() {\n        super();\n        this.readyPromise = new Promise((res) => {\n            this.ready = res;\n            this.setup();\n        });\n    }\n\n    menu!: ActionMenu;\n    submenu!: MenuItem;\n    submenuChild!: MenuItem;\n\n    async setup(): Promise<void> {\n        await nextFrame();\n\n        this.menu = document.querySelector(`sp-action-menu`) as ActionMenu;\n        this.menu.addEventListener('sp-opened', this.handleMenuOpened);\n        this.menu.addEventListener(\n            'sp-closed',\n            () => {\n                this.menu.removeEventListener(\n                    'sp-opened',\n                    this.handleMenuOpened\n                );\n            },\n            { once: true }\n        );\n        this.menu.open = true;\n    }\n\n    handleMenuOpened = async (event: Event): Promise<void> => {\n        this.menu.removeEventListener('sp-opened', this.handleMenuOpened);\n        await nextFrame();\n        await (event.target as ActionMenu).updateComplete;\n\n        this.submenu = document.querySelector('#submenu-item-1') as MenuItem;\n        if (!this.submenu) {\n            return;\n        }\n\n        this.submenu.addEventListener('sp-opened', this.handleSubmenuOpened);\n        this.submenu.click();\n    };\n\n    handleSubmenuOpened = async (event: Event): Promise<void> => {\n        this.submenu.removeEventListener('sp-opened', this.handleSubmenuOpened);\n        await nextFrame();\n        await (event.target as MenuItem).updateComplete;\n\n        this.submenuChild = document.querySelector(\n            '#submenu-item-2'\n        ) as MenuItem;\n        if (!this.submenuChild) {\n            return;\n        }\n        this.submenuChild.addEventListener(\n            'sp-opened',\n            this.handleSubmenuChildOpened\n        );\n        this.submenuChild.click();\n    };\n\n    handleSubmenuChildOpened = async (event: Event): Promise<void> => {\n        this.submenuChild.removeEventListener(\n            'sp-opened',\n            this.handleSubmenuChildOpened\n        );\n        await nextFrame();\n        await (event.target as MenuItem).updateComplete;\n\n        this.ready(true);\n    };\n\n    private readyPromise: Promise<boolean> = Promise.resolve(false);\n\n    get updateComplete(): Promise<boolean> {\n        return this.readyPromise;\n    }\n}\n\ncustomElements.define('submenu-ready', SubmenuReady);\n\nconst submenuDecorator = (story: () => TemplateResult): TemplateResult => {\n    return html`\n        ${story()}\n        <submenu-ready></submenu-ready>\n    `;\n};\n\nexport const submenu = (): TemplateResult => {\n    const getValueEls = (): {\n        root: HTMLElement;\n        first: HTMLElement;\n        second: HTMLElement;\n    } => {\n        return {\n            root: document.querySelector('#root-value') as HTMLElement,\n            first: document.querySelector('#first-value') as HTMLElement,\n            second: document.querySelector('#second-value') as HTMLElement,\n        };\n    };\n    const clearValues = (): void => {\n        const valueEls = getValueEls();\n        valueEls.root.textContent = '';\n        valueEls.first.textContent = '';\n        valueEls.second.textContent = '';\n    };\n    const handleRootChange = (event: Event & { target: ActionMenu }): void => {\n        const valueEls = getValueEls();\n        valueEls.root.textContent = event.target.value;\n    };\n    const handleFirstDescendantChange = (\n        event: Event & { target: Menu }\n    ): void => {\n        const valueEls = getValueEls();\n        valueEls.first.textContent = event.target.selected[0] || '';\n    };\n    const handleSecondDescendantChange = (\n        event: Event & { target: Menu }\n    ): void => {\n        const valueEls = getValueEls();\n        valueEls.second.textContent = event.target.selected[0] || '';\n    };\n    return html`\n        <sp-action-menu @change=${handleRootChange} @sp-opened=${clearValues}>\n            <sp-icon-show-menu slot=\"icon\"></sp-icon-show-menu>\n            <sp-menu-group\n                @change=${() => console.log('group change')}\n                role=\"none\"\n            >\n                <span slot=\"header\">New York</span>\n                <sp-menu-item>Bronx</sp-menu-item>\n                <sp-menu-item id=\"submenu-item-1\">\n                    Brooklyn\n                    <sp-menu\n                        slot=\"submenu\"\n                        @change=${handleFirstDescendantChange}\n                    >\n                        <sp-menu-item id=\"submenu-item-2\">\n                            Ft. Greene\n                            <sp-menu\n                                slot=\"submenu\"\n                                @change=${handleSecondDescendantChange}\n                            >\n                                <sp-menu-item>S. Oxford St</sp-menu-item>\n                                <sp-menu-item>S. Portland Ave</sp-menu-item>\n                                <sp-menu-item>S. Elliot Pl</sp-menu-item>\n                            </sp-menu>\n                        </sp-menu-item>\n                        <sp-menu-item disabled>Park Slope</sp-menu-item>\n                        <sp-menu-item>Williamsburg</sp-menu-item>\n                    </sp-menu>\n                </sp-menu-item>\n                <sp-menu-item>\n                    Manhattan\n                    <sp-menu\n                        slot=\"submenu\"\n                        @change=${handleFirstDescendantChange}\n                    >\n                        <sp-menu-item disabled>SoHo</sp-menu-item>\n                        <sp-menu-item>\n                            Union Square\n                            <sp-menu\n                                slot=\"submenu\"\n                                @change=${handleSecondDescendantChange}\n                            >\n                                <sp-menu-item>14th St</sp-menu-item>\n                                <sp-menu-item>Broadway</sp-menu-item>\n                                <sp-menu-item>Park Ave</sp-menu-item>\n                            </sp-menu>\n                        </sp-menu-item>\n                        <sp-menu-item>Upper East Side</sp-menu-item>\n                    </sp-menu>\n                </sp-menu-item>\n            </sp-menu-group>\n        </sp-action-menu>\n        <div>\n            Root value:\n            <span id=\"root-value\"></span>\n            <br />\n            First descendant value:\n            <span id=\"first-value\"></span>\n            <br />\n            Second descendant value:\n            <span id=\"second-value\"></span>\n            <br />\n        </div>\n    `;\n};\n\nsubmenu.decorators = [submenuDecorator];\n\nexport const contextMenu = (): TemplateResult => {\n    const contextmenu = async (event: PointerEvent): Promise<void> => {\n        event.preventDefault();\n        const virtualTrigger = new VirtualTrigger(event.clientX, event.clientY);\n        const overlay = document.querySelector('sp-overlay') as Overlay;\n        clearValues();\n        overlay.triggerElement = virtualTrigger;\n        overlay.willPreventClose = true;\n        overlay.type = 'auto';\n        overlay.placement = 'right-start';\n        overlay.open = true;\n    };\n    const getValueEls = (): { root: HTMLElement; first: HTMLElement } => {\n        return {\n            root: document.querySelector('#root-value') as HTMLElement,\n            first: document.querySelector('#first-value') as HTMLElement,\n        };\n    };\n    const clearValues = (): void => {\n        const valueEls = getValueEls();\n        valueEls.root.textContent = '';\n        valueEls.first.textContent = '';\n    };\n    const handleRootChange = (event: Event & { target: ActionMenu }): void => {\n        const valueEls = getValueEls();\n        valueEls.root.textContent = event.target.value;\n        event.target.parentElement?.dispatchEvent(\n            new Event('close', { bubbles: true })\n        );\n    };\n    const handleFirstDescendantChange = (\n        event: Event & { target: Menu }\n    ): void => {\n        const valueEls = getValueEls();\n        valueEls.first.textContent = event.target.selected[0] || '';\n    };\n    return html`\n        <style>\n            .app-root {\n                position: absolute;\n                inset: 0;\n            }\n            active-overlay::part(theme) {\n                --swc-menu-width: 200px;\n            }\n        </style>\n        <div class=\"app-root\" @contextmenu=${contextmenu}>\n            <div>\n                Root value:\n                <span id=\"root-value\"></span>\n                <br />\n                First descendant value:\n                <span id=\"first-value\"></span>\n                <br />\n            </div>\n        </div>\n        <sp-overlay>\n            <sp-popover\n                style=\"max-width: 33vw;\"\n                @click=${(event: Event) =>\n                    event.target?.dispatchEvent(\n                        new Event('close', { bubbles: true })\n                    )}\n            >\n                <sp-menu @change=${handleRootChange}>\n                    <sp-menu-group>\n                        <span slot=\"header\">Options</span>\n                        <sp-menu-item>\n                            Copy\n                            <span slot=\"value\">\u2318\u200BS</span>\n                        </sp-menu-item>\n                        <sp-menu-item>\n                            Paste\n                            <span slot=\"value\">\u2318\u200BP</span>\n                        </sp-menu-item>\n                        <sp-menu-item>\n                            Cut\n                            <span slot=\"value\">\u2318\u200BX</span>\n                        </sp-menu-item>\n                        <sp-menu-divider></sp-menu-divider>\n                        <sp-menu-item>\n                            Select layer\n                            <sp-menu\n                                slot=\"submenu\"\n                                selects=\"single\"\n                                @change=${handleFirstDescendantChange}\n                            >\n                                <sp-menu-item selected>Ellipse 1</sp-menu-item>\n                                <sp-menu-item>Rectangle</sp-menu-item>\n                            </sp-menu>\n                        </sp-menu-item>\n                        <sp-menu-item>\n                            Group\n                            <span slot=\"value\">\u2318\u200BG</span>\n                        </sp-menu-item>\n                        <sp-menu-item>\n                            Unlock\n                            <span slot=\"value\">\u2318\u200BL</span>\n                        </sp-menu-item>\n                        <sp-menu-divider></sp-menu-divider>\n                        <sp-menu-item>\n                            Bring to front\n                            <span slot=\"value\">\u21E7\u200B\u2318\u200B\u200B]</span>\n                        </sp-menu-item>\n                        <sp-menu-item>\n                            Bring forward\n                            <span slot=\"value\">\u2318\u200B\u200B]</span>\n                        </sp-menu-item>\n                        <sp-menu-item>\n                            Send backward\n                            <span slot=\"value\">\u2318\u200B\u200B[</span>\n                        </sp-menu-item>\n                        <sp-menu-item>\n                            Send to back\n                            <span slot=\"value\">\u21E7\u200B\u2318\u200B\u200B[</span>\n                        </sp-menu-item>\n                        <sp-menu-divider></sp-menu-divider>\n                        <sp-menu-item>\n                            Delete\n                            <span slot=\"value\">DEL</span>\n                        </sp-menu-item>\n                    </sp-menu-group>\n                </sp-menu>\n            </sp-popover>\n        </sp-overlay>\n    `;\n};\n"],
+  "mappings": "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",
+  "names": []
 }

package/test/menu-group.test.js

@@ -93,26 +93,38 @@ describe("Menu group", () => {
       html`
                 <sp-menu selects="single">
                     <sp-menu-item selected>First</sp-menu-item>
+                    <!-- 1 -->
                     <sp-menu-item>Second</sp-menu-item>
+                    <!-- 1 -->
                     <sp-menu-group id="mg-multi" selects="multiple">
                         <sp-menu-item selected>Multi1</sp-menu-item>
+                        <!-- 2 -->
                         <sp-menu-item>Multi2</sp-menu-item>
+                        <!-- 2 -->
                         <sp-menu-group id="mg-sub-inherit" selects="inherit">
                             <sp-menu-item>SubInherit1</sp-menu-item>
+                            <!-- 2 -->
                             <sp-menu-item>SubInherit2</sp-menu-item>
+                            <!-- 2 -->
                         </sp-menu-group>
                     </sp-menu-group>
                     <sp-menu-group id="mg-single" selects="single">
                         <sp-menu-item selected>Single1</sp-menu-item>
+                        <!-- 3 -->
                         <sp-menu-item>Single2</sp-menu-item>
+                        <!-- 3 -->
                     </sp-menu-group>
                     <sp-menu-group id="mg-none">
                         <sp-menu-item>Inherit1</sp-menu-item>
+                        <!-- - -->
                         <sp-menu-item>Inherit2</sp-menu-item>
+                        <!-- - -->
                     </sp-menu-group>
                     <sp-menu-group id="mg-inherit" selects="inherit">
                         <sp-menu-item>Inherit1</sp-menu-item>
+                        <!-- 1 -->
                         <sp-menu-item>Inherit2</sp-menu-item>
+                        <!-- 1 -->
                     </sp-menu-group>
                 </sp-menu>
             `
@@ -219,6 +231,7 @@ describe("Menu group", () => {
     expect(el.value).to.equal("Inherit1");
     expect(el.selectedItems.length).to.equal(1);
     noneItem2.click();
+    await elementUpdated(el);
     await elementUpdated(noneGroup);
     await elementUpdated(noneItem2);
     expect(inheritItem1.selected).to.be.true;
@@ -229,8 +242,8 @@ describe("Menu group", () => {
     await elementUpdated(singleGroup);
     await elementUpdated(singleItem1);
     await elementUpdated(singleItem2);
-    expect(singleItem1.selected, "first item not selected").to.be.false;
     expect(singleItem2.selected).to.be.true;
+    expect(singleItem1.selected, "first item not selected").to.be.false;
     expect(inheritItem1.selected).to.be.true;
     expect(singleItem1.getAttribute("aria-checked")).to.equal("false");
     expect(singleItem2.getAttribute("aria-checked")).to.equal("true");

package/test/menu-group.test.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["menu-group.test.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*/\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport { Menu, MenuGroup, MenuItem } from '@spectrum-web-components/menu';\nimport {\n    elementUpdated,\n    expect,\n    fixture,\n    html,\n    oneEvent,\n    waitUntil,\n} from '@open-wc/testing';\nimport { testForLitDevWarnings } from '../../../test/testing-helpers.js';\n\nconst managedItems = (menu: Menu | MenuGroup): MenuItem[] => {\n    return menu.childItems.filter(\n        (item: MenuItem) => item.menuData.selectionRoot === menu\n    );\n};\n\ndescribe('Menu group', () => {\n    testForLitDevWarnings(\n        async () =>\n            await fixture<Menu>(\n                html`\n                    <sp-menu selects=\"single\">\n                        <sp-menu-group selects=\"inherit\">\n                            <span slot=\"header\">Section Heading</span>\n                            <sp-menu-item>Action 1</sp-menu-item>\n                            <sp-menu-item>Action 2</sp-menu-item>\n                            <sp-menu-item>Action 3</sp-menu-item>\n                        </sp-menu-group>\n                        <sp-menu-divider></sp-menu-divider>\n                        <sp-menu-group selects=\"inherit\">\n                            <span slot=\"header\">Section Heading</span>\n                            <sp-menu-item>Save</sp-menu-item>\n                            <sp-menu-item disabled>Download</sp-menu-item>\n                        </sp-menu-group>\n                    </sp-menu>\n                `\n            )\n    );\n    it('renders', async () => {\n        const el = await fixture<Menu>(\n            html`\n                <sp-menu selects=\"single\">\n                    <sp-menu-group selects=\"inherit\">\n                        <span slot=\"header\">Section Heading</span>\n                        <sp-menu-item>Action 1</sp-menu-item>\n                        <sp-menu-item>Action 2</sp-menu-item>\n                        <sp-menu-item>Action 3</sp-menu-item>\n                    </sp-menu-group>\n                    <sp-menu-divider></sp-menu-divider>\n                    <sp-menu-group selects=\"inherit\">\n                        <span slot=\"header\">Section Heading</span>\n                        <sp-menu-item>Save</sp-menu-item>\n                        <sp-menu-item disabled>Download</sp-menu-item>\n                    </sp-menu-group>\n                </sp-menu>\n            `\n        );\n\n        await waitUntil(() => {\n            return managedItems(el).length === 5;\n        }, `expected menu group to manage 5 children, received ${managedItems(el).length} of ${el.childItems.length}`);\n        await elementUpdated(el);\n\n        await expect(el).to.be.accessible();\n    });\n    it('manages [slot=\"header\"] content', async () => {\n        const el = await fixture<MenuGroup>(\n            html`\n                <sp-menu-group></sp-menu-group>\n            `\n        );\n        await elementUpdated(el);\n        const slot = el.shadowRoot.querySelector(\n            '[name=\"header\"'\n        ) as HTMLSlotElement;\n        const header = document.createElement('span');\n        header.textContent = 'Header';\n        header.slot = 'header';\n        expect(header.id).to.equal('');\n        let slotchanged = oneEvent(slot, 'slotchange');\n        el.append(header);\n        await slotchanged;\n        expect(header.id).to.equal(\n            (el as unknown as { headerId: string }).headerId\n        );\n\n        slotchanged = oneEvent(slot, 'slotchange');\n        header.remove();\n        await slotchanged;\n        expect(header.id).to.equal('');\n    });\n    it('handles selects for nested menu groups', async () => {\n        const el = await fixture<Menu>(\n            html`\n                <sp-menu selects=\"single\">\n                    <sp-menu-item selected>First</sp-menu-item>\n                    <sp-menu-item>Second</sp-menu-item>\n                    <sp-menu-group id=\"mg-multi\" selects=\"multiple\">\n                        <sp-menu-item selected>Multi1</sp-menu-item>\n                        <sp-menu-item>Multi2</sp-menu-item>\n                        <sp-menu-group id=\"mg-sub-inherit\" selects=\"inherit\">\n                            <sp-menu-item>SubInherit1</sp-menu-item>\n                            <sp-menu-item>SubInherit2</sp-menu-item>\n                        </sp-menu-group>\n                    </sp-menu-group>\n                    <sp-menu-group id=\"mg-single\" selects=\"single\">\n                        <sp-menu-item selected>Single1</sp-menu-item>\n                        <sp-menu-item>Single2</sp-menu-item>\n                    </sp-menu-group>\n                    <sp-menu-group id=\"mg-none\">\n                        <sp-menu-item>Inherit1</sp-menu-item>\n                        <sp-menu-item>Inherit2</sp-menu-item>\n                    </sp-menu-group>\n                    <sp-menu-group id=\"mg-inherit\" selects=\"inherit\">\n                        <sp-menu-item>Inherit1</sp-menu-item>\n                        <sp-menu-item>Inherit2</sp-menu-item>\n                    </sp-menu-group>\n                </sp-menu>\n            `\n        );\n\n        await waitUntil(\n            () => managedItems(el).length === 4,\n            `expected outer menu to manage 4 items (2 are inherited), got ${\n                managedItems(el).length\n            }, with ${el.childItems.length} total`\n        );\n        await waitUntil(\n            () => el.selectedItems.length === 1,\n            'expected 1 selected item'\n        );\n        await elementUpdated(el);\n\n        const firstItem = el.querySelector(\n            'sp-menu-item:nth-of-type(1)'\n        ) as MenuItem;\n\n        const secondItem = el.querySelector(\n            'sp-menu-item:nth-of-type(2)'\n        ) as MenuItem;\n\n        const multiGroup = el.querySelector(\n            'sp-menu-group#mg-multi'\n        ) as MenuGroup;\n        const multiItem1 = multiGroup.querySelector(\n            'sp-menu-item:nth-of-type(1)'\n        ) as MenuItem;\n        const multiItem2 = multiGroup.querySelector(\n            'sp-menu-item:nth-of-type(2)'\n        ) as MenuItem;\n        await waitUntil(\n            () => managedItems(multiGroup).length === 4,\n            `selects=\"#mg-multi should manage 4 items (2 are inherited), received ${\n                managedItems(multiGroup).length\n            }`\n        );\n\n        const singleGroup = el.querySelector(\n            'sp-menu-group#mg-single'\n        ) as MenuGroup;\n\n        const singleItem1 = singleGroup.querySelector(\n            'sp-menu-item:nth-of-type(1)'\n        ) as MenuItem;\n        const singleItem2 = singleGroup.querySelector(\n            'sp-menu-item:nth-of-type(2)'\n        ) as MenuItem;\n        await waitUntil(\n            () => managedItems(singleGroup).length === 2,\n            'selects=\"#mg-none should manage 4 items (2 are inherited)'\n        );\n\n        const noneGroup = el.querySelector(\n            'sp-menu-group#mg-none'\n        ) as MenuGroup;\n        const noneItem1 = noneGroup.querySelector(\n            'sp-menu-item:nth-of-type(1)'\n        ) as MenuItem;\n        const noneItem2 = noneGroup.querySelector(\n            'sp-menu-item:nth-of-type(2)'\n        ) as MenuItem;\n        await waitUntil(\n            () => managedItems(noneGroup).length === 2,\n            `selects=\"#mg-none\" should manage 2 items, received ${\n                managedItems(noneGroup).length\n            }`\n        );\n\n        const inheritGroup = el.querySelector(\n            'sp-menu-group#mg-inherit'\n        ) as MenuGroup;\n        const inheritItem1 = inheritGroup.querySelector(\n            'sp-menu-item:nth-of-type(1)'\n        ) as MenuItem;\n        const inheritItem2 = inheritGroup.querySelector(\n            'sp-menu-item:nth-of-type(2)'\n        ) as MenuItem;\n\n        expect(firstItem.getAttribute('role')).to.equal('menuitemradio');\n        expect(secondItem.getAttribute('role')).to.equal('menuitemradio');\n        expect(multiItem1.getAttribute('role')).to.equal('menuitemcheckbox');\n        expect(multiItem2.getAttribute('role')).to.equal('menuitemcheckbox');\n        expect(singleItem1.getAttribute('role')).to.equal('menuitemradio');\n        expect(singleItem2.getAttribute('role')).to.equal('menuitemradio');\n        expect(noneItem1.getAttribute('role')).to.equal('menuitem');\n        expect(noneItem2.getAttribute('role')).to.equal('menuitem');\n        expect(inheritItem1.getAttribute('role')).to.equal('menuitemradio');\n        expect(inheritItem2.getAttribute('role')).to.equal('menuitemradio');\n\n        await elementUpdated(firstItem);\n        expect(singleItem1.selected).to.be.true;\n        expect(firstItem.selected).to.be.true;\n        expect(secondItem.selected, 'second item not selected').to.be.false;\n        expect(el.value).to.equal('First');\n        expect(el.selectedItems.length).to.equal(1);\n\n        expect(firstItem.getAttribute('aria-checked')).to.equal('true');\n        expect(secondItem.getAttribute('aria-checked')).to.equal('false');\n\n        secondItem.click();\n        await elementUpdated(el);\n        await elementUpdated(firstItem);\n        await elementUpdated(secondItem);\n        expect(firstItem.selected, 'first item not selected').to.be.false;\n        expect(secondItem.selected).to.be.true;\n        expect(firstItem.getAttribute('aria-checked')).to.equal('false');\n        expect(secondItem.getAttribute('aria-checked')).to.equal('true');\n        expect(el.value).to.equal('Second');\n        expect(el.selectedItems.length).to.equal(1);\n\n        inheritItem1.click();\n        await elementUpdated(el);\n        await elementUpdated(inheritItem1);\n        await elementUpdated(secondItem);\n        expect(secondItem.selected, 'second item not selected again').to.be\n            .false;\n        expect(inheritItem1.selected).to.be.true;\n        expect(secondItem.getAttribute('aria-checked')).to.equal('false');\n        expect(inheritItem1.getAttribute('aria-checked')).to.equal('true');\n        expect(el.value).to.equal('Inherit1');\n        expect(el.selectedItems.length).to.equal(1);\n\n        noneItem2.click();\n        await elementUpdated(noneGroup);\n        await elementUpdated(noneItem2);\n        expect(inheritItem1.selected).to.be.true;\n        expect(noneItem2.selected, 'none item not selected').to.be.false;\n        expect(el.value).to.equal('Inherit1');\n        expect(el.selectedItems.length).to.equal(1);\n\n        singleItem2.click();\n        await elementUpdated(singleGroup);\n        await elementUpdated(singleItem1);\n        await elementUpdated(singleItem2);\n        expect(singleItem1.selected, 'first item not selected').to.be.false;\n        expect(singleItem2.selected).to.be.true;\n        expect(inheritItem1.selected).to.be.true;\n        expect(singleItem1.getAttribute('aria-checked')).to.equal('false');\n        expect(singleItem2.getAttribute('aria-checked')).to.equal('true');\n        expect(el.value).to.equal('Inherit1');\n        expect(el.selectedItems.length).to.equal(1);\n        //expect(singleGroup.value).to.equal('Inherit1')\n        expect(singleGroup.selectedItems.length).to.equal(1);\n\n        multiItem2.click();\n        await elementUpdated(el);\n        await elementUpdated(multiItem2);\n        expect(multiItem1.selected).to.be.true;\n        expect(multiItem2.selected).to.be.true;\n        expect(inheritItem1.selected).to.be.true;\n        expect(multiItem1.getAttribute('aria-checked')).to.equal('true');\n        expect(multiItem2.getAttribute('aria-checked')).to.equal('true');\n        //expect(multiGroup.value).to.equal('Inherit1')\n        expect(multiGroup.selectedItems.length).to.equal(2);\n    });\n\n    it('handles changing managed items for selects changes', async () => {\n        const el = await fixture<Menu>(\n            html`\n                <sp-menu selects=\"multiple\" value-separator=\"--\">\n                    <sp-menu-item selected>First</sp-menu-item>\n                    <sp-menu-item>Second</sp-menu-item>\n                    <sp-menu-group id=\"mg-inherit\" selects=\"inherit\">\n                        <sp-menu-item>Inherit1</sp-menu-item>\n                        <sp-menu-item>Inherit2</sp-menu-item>\n                        <sp-menu-group id=\"mg-sub-inherit\" selects=\"inherit\">\n                            <sp-menu-item>SubInherit1</sp-menu-item>\n                            <sp-menu-item selected>SubInherit2</sp-menu-item>\n                        </sp-menu-group>\n                    </sp-menu-group>\n                </sp-menu>\n            `\n        );\n\n        await waitUntil(\n            () => managedItems(el).length == 6,\n            `expected outer menu to manage 6 items, manages ${\n                managedItems(el).length\n            }`\n        );\n        await waitUntil(\n            () => el.selectedItems.length == 2,\n            'expected 2 selected item'\n        );\n        await elementUpdated(el);\n\n        const inheritGroup = el.querySelector(\n            'sp-menu-group#mg-inherit'\n        ) as MenuGroup;\n        const inheritItem1 = inheritGroup.querySelector(\n            'sp-menu-item:nth-of-type(1)'\n        ) as MenuItem;\n        const inheritItem2 = inheritGroup.querySelector(\n            'sp-menu-item:nth-of-type(2)'\n        ) as MenuItem;\n\n        const subInheritGroup = el.querySelector(\n            'sp-menu-group#mg-sub-inherit'\n        ) as MenuGroup;\n        const subInheritItem1 = subInheritGroup.querySelector(\n            'sp-menu-item:nth-of-type(1)'\n        ) as MenuItem;\n        const subInheritItem2 = subInheritGroup.querySelector(\n            'sp-menu-item:nth-of-type(2)'\n        ) as MenuItem;\n\n        expect(inheritItem1.getAttribute('role')).to.equal('menuitemcheckbox');\n        expect(inheritItem2.getAttribute('role')).to.equal('menuitemcheckbox');\n        expect(subInheritItem1.getAttribute('role')).to.equal(\n            'menuitemcheckbox'\n        );\n        expect(subInheritItem2.getAttribute('role')).to.equal(\n            'menuitemcheckbox'\n        );\n        expect(el.value).to.equal('First--SubInherit2');\n        expect(el.selectedItems.length).to.equal(2);\n        inheritGroup.setAttribute('selects', 'single');\n\n        await elementUpdated(inheritGroup);\n        await elementUpdated(el);\n\n        await waitUntil(() => {\n            return managedItems(inheritGroup).length === 4;\n        }, `expected new single sub-group to manage 4 items, received ${managedItems(inheritGroup).length} because \"selects === ${inheritGroup.selects}`);\n\n        await waitUntil(\n            () => managedItems(el).length === 2,\n            `expected outer menu to manage 2 items with none inherited, received ${\n                managedItems(el).length\n            }`\n        );\n        expect(inheritGroup.value).to.equal('SubInherit2');\n        expect(inheritGroup.selectedItems.length).to.equal(1);\n        expect(el.value).to.equal('First');\n        expect(inheritItem1.getAttribute('role')).to.equal('menuitemradio');\n        expect(inheritItem2.getAttribute('role')).to.equal('menuitemradio');\n        expect(subInheritItem1.getAttribute('role')).to.equal('menuitemradio');\n        expect(subInheritItem2.getAttribute('role')).to.equal('menuitemradio');\n    });\n});\n"],
-  "mappings": "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",
+  "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*/\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport { Menu, MenuGroup, MenuItem } from '@spectrum-web-components/menu';\nimport {\n    elementUpdated,\n    expect,\n    fixture,\n    html,\n    oneEvent,\n    waitUntil,\n} from '@open-wc/testing';\nimport { testForLitDevWarnings } from '../../../test/testing-helpers.js';\n\nconst managedItems = (menu: Menu | MenuGroup): MenuItem[] => {\n    return menu.childItems.filter(\n        (item: MenuItem) => item.menuData.selectionRoot === menu\n    );\n};\n\ndescribe('Menu group', () => {\n    testForLitDevWarnings(\n        async () =>\n            await fixture<Menu>(\n                html`\n                    <sp-menu selects=\"single\">\n                        <sp-menu-group selects=\"inherit\">\n                            <span slot=\"header\">Section Heading</span>\n                            <sp-menu-item>Action 1</sp-menu-item>\n                            <sp-menu-item>Action 2</sp-menu-item>\n                            <sp-menu-item>Action 3</sp-menu-item>\n                        </sp-menu-group>\n                        <sp-menu-divider></sp-menu-divider>\n                        <sp-menu-group selects=\"inherit\">\n                            <span slot=\"header\">Section Heading</span>\n                            <sp-menu-item>Save</sp-menu-item>\n                            <sp-menu-item disabled>Download</sp-menu-item>\n                        </sp-menu-group>\n                    </sp-menu>\n                `\n            )\n    );\n    it('renders', async () => {\n        const el = await fixture<Menu>(\n            html`\n                <sp-menu selects=\"single\">\n                    <sp-menu-group selects=\"inherit\">\n                        <span slot=\"header\">Section Heading</span>\n                        <sp-menu-item>Action 1</sp-menu-item>\n                        <sp-menu-item>Action 2</sp-menu-item>\n                        <sp-menu-item>Action 3</sp-menu-item>\n                    </sp-menu-group>\n                    <sp-menu-divider></sp-menu-divider>\n                    <sp-menu-group selects=\"inherit\">\n                        <span slot=\"header\">Section Heading</span>\n                        <sp-menu-item>Save</sp-menu-item>\n                        <sp-menu-item disabled>Download</sp-menu-item>\n                    </sp-menu-group>\n                </sp-menu>\n            `\n        );\n\n        await waitUntil(() => {\n            return managedItems(el).length === 5;\n        }, `expected menu group to manage 5 children, received ${managedItems(el).length} of ${el.childItems.length}`);\n        await elementUpdated(el);\n\n        await expect(el).to.be.accessible();\n    });\n    it('manages [slot=\"header\"] content', async () => {\n        const el = await fixture<MenuGroup>(\n            html`\n                <sp-menu-group></sp-menu-group>\n            `\n        );\n        await elementUpdated(el);\n        const slot = el.shadowRoot.querySelector(\n            '[name=\"header\"'\n        ) as HTMLSlotElement;\n        const header = document.createElement('span');\n        header.textContent = 'Header';\n        header.slot = 'header';\n        expect(header.id).to.equal('');\n        let slotchanged = oneEvent(slot, 'slotchange');\n        el.append(header);\n        await slotchanged;\n        expect(header.id).to.equal(\n            (el as unknown as { headerId: string }).headerId\n        );\n\n        slotchanged = oneEvent(slot, 'slotchange');\n        header.remove();\n        await slotchanged;\n        expect(header.id).to.equal('');\n    });\n    it('handles selects for nested menu groups', async () => {\n        const el = await fixture<Menu>(\n            html`\n                <sp-menu selects=\"single\">\n                    <sp-menu-item selected>First</sp-menu-item>\n                    <!-- 1 -->\n                    <sp-menu-item>Second</sp-menu-item>\n                    <!-- 1 -->\n                    <sp-menu-group id=\"mg-multi\" selects=\"multiple\">\n                        <sp-menu-item selected>Multi1</sp-menu-item>\n                        <!-- 2 -->\n                        <sp-menu-item>Multi2</sp-menu-item>\n                        <!-- 2 -->\n                        <sp-menu-group id=\"mg-sub-inherit\" selects=\"inherit\">\n                            <sp-menu-item>SubInherit1</sp-menu-item>\n                            <!-- 2 -->\n                            <sp-menu-item>SubInherit2</sp-menu-item>\n                            <!-- 2 -->\n                        </sp-menu-group>\n                    </sp-menu-group>\n                    <sp-menu-group id=\"mg-single\" selects=\"single\">\n                        <sp-menu-item selected>Single1</sp-menu-item>\n                        <!-- 3 -->\n                        <sp-menu-item>Single2</sp-menu-item>\n                        <!-- 3 -->\n                    </sp-menu-group>\n                    <sp-menu-group id=\"mg-none\">\n                        <sp-menu-item>Inherit1</sp-menu-item>\n                        <!-- - -->\n                        <sp-menu-item>Inherit2</sp-menu-item>\n                        <!-- - -->\n                    </sp-menu-group>\n                    <sp-menu-group id=\"mg-inherit\" selects=\"inherit\">\n                        <sp-menu-item>Inherit1</sp-menu-item>\n                        <!-- 1 -->\n                        <sp-menu-item>Inherit2</sp-menu-item>\n                        <!-- 1 -->\n                    </sp-menu-group>\n                </sp-menu>\n            `\n        );\n\n        // 1 & 3 should be menuitemradio\n        // 2 shouwl menuitemcheckbox\n\n        await waitUntil(\n            () => managedItems(el).length === 4,\n            `expected outer menu to manage 4 items (2 are inherited), got ${\n                managedItems(el).length\n            }, with ${el.childItems.length} total`\n        );\n        await waitUntil(\n            () => el.selectedItems.length === 1,\n            'expected 1 selected item'\n        );\n        await elementUpdated(el);\n\n        const firstItem = el.querySelector(\n            'sp-menu-item:nth-of-type(1)'\n        ) as MenuItem;\n\n        const secondItem = el.querySelector(\n            'sp-menu-item:nth-of-type(2)'\n        ) as MenuItem;\n\n        const multiGroup = el.querySelector(\n            'sp-menu-group#mg-multi'\n        ) as MenuGroup;\n        const multiItem1 = multiGroup.querySelector(\n            'sp-menu-item:nth-of-type(1)'\n        ) as MenuItem;\n        const multiItem2 = multiGroup.querySelector(\n            'sp-menu-item:nth-of-type(2)'\n        ) as MenuItem;\n        await waitUntil(\n            () => managedItems(multiGroup).length === 4,\n            `selects=\"#mg-multi should manage 4 items (2 are inherited), received ${\n                managedItems(multiGroup).length\n            }`\n        );\n\n        const singleGroup = el.querySelector(\n            'sp-menu-group#mg-single'\n        ) as MenuGroup;\n\n        const singleItem1 = singleGroup.querySelector(\n            'sp-menu-item:nth-of-type(1)'\n        ) as MenuItem;\n        const singleItem2 = singleGroup.querySelector(\n            'sp-menu-item:nth-of-type(2)'\n        ) as MenuItem;\n        await waitUntil(\n            () => managedItems(singleGroup).length === 2,\n            'selects=\"#mg-none should manage 4 items (2 are inherited)'\n        );\n\n        const noneGroup = el.querySelector(\n            'sp-menu-group#mg-none'\n        ) as MenuGroup;\n        const noneItem1 = noneGroup.querySelector(\n            'sp-menu-item:nth-of-type(1)'\n        ) as MenuItem;\n        const noneItem2 = noneGroup.querySelector(\n            'sp-menu-item:nth-of-type(2)'\n        ) as MenuItem;\n        await waitUntil(\n            () => managedItems(noneGroup).length === 2,\n            `selects=\"#mg-none\" should manage 2 items, received ${\n                managedItems(noneGroup).length\n            }`\n        );\n\n        const inheritGroup = el.querySelector(\n            'sp-menu-group#mg-inherit'\n        ) as MenuGroup;\n        const inheritItem1 = inheritGroup.querySelector(\n            'sp-menu-item:nth-of-type(1)'\n        ) as MenuItem;\n        const inheritItem2 = inheritGroup.querySelector(\n            'sp-menu-item:nth-of-type(2)'\n        ) as MenuItem;\n\n        expect(firstItem.getAttribute('role')).to.equal('menuitemradio');\n        expect(secondItem.getAttribute('role')).to.equal('menuitemradio');\n        expect(multiItem1.getAttribute('role')).to.equal('menuitemcheckbox');\n        expect(multiItem2.getAttribute('role')).to.equal('menuitemcheckbox');\n        expect(singleItem1.getAttribute('role')).to.equal('menuitemradio');\n        expect(singleItem2.getAttribute('role')).to.equal('menuitemradio');\n        expect(noneItem1.getAttribute('role')).to.equal('menuitem');\n        expect(noneItem2.getAttribute('role')).to.equal('menuitem');\n        expect(inheritItem1.getAttribute('role')).to.equal('menuitemradio');\n        expect(inheritItem2.getAttribute('role')).to.equal('menuitemradio');\n\n        await elementUpdated(firstItem);\n        expect(singleItem1.selected).to.be.true;\n        expect(firstItem.selected).to.be.true;\n        expect(secondItem.selected, 'second item not selected').to.be.false;\n        expect(el.value).to.equal('First');\n        expect(el.selectedItems.length).to.equal(1);\n\n        expect(firstItem.getAttribute('aria-checked')).to.equal('true');\n        expect(secondItem.getAttribute('aria-checked')).to.equal('false');\n\n        secondItem.click();\n        await elementUpdated(el);\n        await elementUpdated(firstItem);\n        await elementUpdated(secondItem);\n        expect(firstItem.selected, 'first item not selected').to.be.false;\n        expect(secondItem.selected).to.be.true;\n        expect(firstItem.getAttribute('aria-checked')).to.equal('false');\n        expect(secondItem.getAttribute('aria-checked')).to.equal('true');\n        expect(el.value).to.equal('Second');\n        expect(el.selectedItems.length).to.equal(1);\n\n        inheritItem1.click();\n        await elementUpdated(el);\n        await elementUpdated(inheritItem1);\n        await elementUpdated(secondItem);\n        expect(secondItem.selected, 'second item not selected again').to.be\n            .false;\n        expect(inheritItem1.selected).to.be.true;\n        expect(secondItem.getAttribute('aria-checked')).to.equal('false');\n        expect(inheritItem1.getAttribute('aria-checked')).to.equal('true');\n        expect(el.value).to.equal('Inherit1');\n        expect(el.selectedItems.length).to.equal(1);\n\n        noneItem2.click();\n        await elementUpdated(el);\n        await elementUpdated(noneGroup);\n        await elementUpdated(noneItem2);\n        expect(inheritItem1.selected).to.be.true;\n        expect(noneItem2.selected, 'none item not selected').to.be.false;\n        expect(el.value).to.equal('Inherit1');\n        expect(el.selectedItems.length).to.equal(1);\n\n        singleItem2.click();\n        await elementUpdated(singleGroup);\n        await elementUpdated(singleItem1);\n        await elementUpdated(singleItem2);\n        expect(singleItem2.selected).to.be.true;\n        expect(singleItem1.selected, 'first item not selected').to.be.false;\n        expect(inheritItem1.selected).to.be.true;\n        expect(singleItem1.getAttribute('aria-checked')).to.equal('false');\n        expect(singleItem2.getAttribute('aria-checked')).to.equal('true');\n        expect(el.value).to.equal('Inherit1');\n        expect(el.selectedItems.length).to.equal(1);\n        //expect(singleGroup.value).to.equal('Inherit1')\n        expect(singleGroup.selectedItems.length).to.equal(1);\n\n        multiItem2.click();\n        await elementUpdated(el);\n        await elementUpdated(multiItem2);\n        expect(multiItem1.selected).to.be.true;\n        expect(multiItem2.selected).to.be.true;\n        expect(inheritItem1.selected).to.be.true;\n        expect(multiItem1.getAttribute('aria-checked')).to.equal('true');\n        expect(multiItem2.getAttribute('aria-checked')).to.equal('true');\n        //expect(multiGroup.value).to.equal('Inherit1')\n        expect(multiGroup.selectedItems.length).to.equal(2);\n    });\n\n    it('handles changing managed items for selects changes', async () => {\n        const el = await fixture<Menu>(\n            html`\n                <sp-menu selects=\"multiple\" value-separator=\"--\">\n                    <sp-menu-item selected>First</sp-menu-item>\n                    <sp-menu-item>Second</sp-menu-item>\n                    <sp-menu-group id=\"mg-inherit\" selects=\"inherit\">\n                        <sp-menu-item>Inherit1</sp-menu-item>\n                        <sp-menu-item>Inherit2</sp-menu-item>\n                        <sp-menu-group id=\"mg-sub-inherit\" selects=\"inherit\">\n                            <sp-menu-item>SubInherit1</sp-menu-item>\n                            <sp-menu-item selected>SubInherit2</sp-menu-item>\n                        </sp-menu-group>\n                    </sp-menu-group>\n                </sp-menu>\n            `\n        );\n\n        await waitUntil(\n            () => managedItems(el).length == 6,\n            `expected outer menu to manage 6 items, manages ${\n                managedItems(el).length\n            }`\n        );\n        await waitUntil(\n            () => el.selectedItems.length == 2,\n            'expected 2 selected item'\n        );\n        await elementUpdated(el);\n\n        const inheritGroup = el.querySelector(\n            'sp-menu-group#mg-inherit'\n        ) as MenuGroup;\n        const inheritItem1 = inheritGroup.querySelector(\n            'sp-menu-item:nth-of-type(1)'\n        ) as MenuItem;\n        const inheritItem2 = inheritGroup.querySelector(\n            'sp-menu-item:nth-of-type(2)'\n        ) as MenuItem;\n\n        const subInheritGroup = el.querySelector(\n            'sp-menu-group#mg-sub-inherit'\n        ) as MenuGroup;\n        const subInheritItem1 = subInheritGroup.querySelector(\n            'sp-menu-item:nth-of-type(1)'\n        ) as MenuItem;\n        const subInheritItem2 = subInheritGroup.querySelector(\n            'sp-menu-item:nth-of-type(2)'\n        ) as MenuItem;\n\n        expect(inheritItem1.getAttribute('role')).to.equal('menuitemcheckbox');\n        expect(inheritItem2.getAttribute('role')).to.equal('menuitemcheckbox');\n        expect(subInheritItem1.getAttribute('role')).to.equal(\n            'menuitemcheckbox'\n        );\n        expect(subInheritItem2.getAttribute('role')).to.equal(\n            'menuitemcheckbox'\n        );\n        expect(el.value).to.equal('First--SubInherit2');\n        expect(el.selectedItems.length).to.equal(2);\n        inheritGroup.setAttribute('selects', 'single');\n\n        await elementUpdated(inheritGroup);\n        await elementUpdated(el);\n\n        await waitUntil(() => {\n            return managedItems(inheritGroup).length === 4;\n        }, `expected new single sub-group to manage 4 items, received ${managedItems(inheritGroup).length} because \"selects === ${inheritGroup.selects}`);\n\n        await waitUntil(\n            () => managedItems(el).length === 2,\n            `expected outer menu to manage 2 items with none inherited, received ${\n                managedItems(el).length\n            }`\n        );\n        expect(inheritGroup.value).to.equal('SubInherit2');\n        expect(inheritGroup.selectedItems.length).to.equal(1);\n        expect(el.value).to.equal('First');\n        expect(inheritItem1.getAttribute('role')).to.equal('menuitemradio');\n        expect(inheritItem2.getAttribute('role')).to.equal('menuitemradio');\n        expect(subInheritItem1.getAttribute('role')).to.equal('menuitemradio');\n        expect(subInheritItem2.getAttribute('role')).to.equal('menuitemradio');\n    });\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/test/menu-item.test.js

@@ -140,5 +140,41 @@ describe("Menu item", () => {
     expect(el.value).to.equal("Selected Text");
     expect(el.hasAttribute("value")).to.be.false;
   });
+  it("assigns content to the description slot", async () => {
+    const el = await fixture(
+      html`
+                <sp-menu-item selected>
+                    Menu Item Text
+                    <span slot="description">
+                        Description for the Menu-Item
+                    </span>
+                </sp-menu-item>
+            `
+    );
+    const descriptionElement = el.querySelector("span");
+    expect(descriptionElement.assignedSlot).to.not.be.null;
+  });
+  it("acualizes a submenu", async () => {
+    const test = await fixture(
+      html`
+                <sp-menu>
+                    <sp-menu-item selected>Selected</sp-menu-item>
+                </sp-menu>
+            `
+    );
+    const el = test.querySelector("sp-menu-item");
+    expect(el.hasSubmenu).to.be.false;
+    const submenuItem = document.createElement("sp-menu-item");
+    const submenu = document.createElement("sp-menu");
+    submenuItem.textContent = "Test Submenu Item";
+    submenu.slot = "submenu";
+    submenu.append(submenuItem);
+    el.append(submenu);
+    await elementUpdated(el);
+    expect(el.hasSubmenu).to.be.true;
+    submenu.remove();
+    await elementUpdated(el);
+    expect(el.hasSubmenu).to.be.false;
+  });
 });
 //# sourceMappingURL=menu-item.test.js.map