@spectrum-web-components/menu 0.16.0 → 0.16.1

package/stories/submenu.stories.js

@@ -1,11 +1,111 @@
-import{html as r,render as c}from"@spectrum-web-components/base";import"@spectrum-web-components/action-menu/sp-action-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 as v,VirtualTrigger as g}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{component:"sp-menu",title:"Menu/Submenu"};function p(){return new Promise(s=>requestAnimationFrame(()=>s()))}class b extends HTMLElement{constructor(){super();this.handleMenuOpened=async t=>{await p(),await t.target.updateComplete;const n=document.querySelector("#submenu-item-1");!n||(n.addEventListener("sp-opened",this.handleSubmenuOpened,{once:!0}),n.dispatchEvent(new PointerEvent("pointerenter",{bubbles:!0,composed:!0})))};this.handleSubmenuOpened=async t=>{await p(),await t.target.updateComplete;const n=document.querySelector("#submenu-item-2");!n||(n.addEventListener("sp-opened",this.handleSubmenuChildOpened,{once:!0}),n.dispatchEvent(new PointerEvent("pointerenter",{bubbles:!0,composed:!0})))};this.handleSubmenuChildOpened=async t=>{await p(),await t.target.updateComplete,this.ready(!0)};this.readyPromise=Promise.resolve(!1);this.readyPromise=new Promise(t=>{this.ready=t,this.setup()})}async setup(){await p();const t=document.querySelector("sp-action-menu");t.addEventListener("sp-opened",this.handleMenuOpened,{once:!0}),t.open=!0}get updateComplete(){return this.readyPromise}}customElements.define("submenu-ready",b);const h=s=>r`
-        ${s()}
+"use strict";
+import { html, render } from "@spectrum-web-components/base";
+import "@spectrum-web-components/action-menu/sp-action-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 "@spectrum-web-components/popover/sp-popover.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js";
+export default {
+  component: "sp-menu",
+  title: "Menu/Submenu"
+};
+function nextFrame() {
+  return new Promise((res) => requestAnimationFrame(() => res()));
+}
+class SubmenuReady extends HTMLElement {
+  constructor() {
+    super();
+    this.handleMenuOpened = async (event) => {
+      await nextFrame();
+      await event.target.updateComplete;
+      const submenu2 = document.querySelector("#submenu-item-1");
+      if (!submenu2) {
+        return;
+      }
+      submenu2.addEventListener("sp-opened", this.handleSubmenuOpened, {
+        once: true
+      });
+      submenu2.dispatchEvent(
+        new PointerEvent("pointerenter", { bubbles: true, composed: true })
+      );
+    };
+    this.handleSubmenuOpened = async (event) => {
+      await nextFrame();
+      await event.target.updateComplete;
+      const submenu2 = document.querySelector("#submenu-item-2");
+      if (!submenu2) {
+        return;
+      }
+      submenu2.addEventListener("sp-opened", this.handleSubmenuChildOpened, {
+        once: true
+      });
+      submenu2.dispatchEvent(
+        new PointerEvent("pointerenter", { bubbles: true, composed: true })
+      );
+    };
+    this.handleSubmenuChildOpened = async (event) => {
+      await nextFrame();
+      await event.target.updateComplete;
+      this.ready(true);
+    };
+    this.readyPromise = Promise.resolve(false);
+    this.readyPromise = new Promise((res) => {
+      this.ready = res;
+      this.setup();
+    });
+  }
+  async setup() {
+    await nextFrame();
+    const menu = document.querySelector(`sp-action-menu`);
+    menu.addEventListener("sp-opened", this.handleMenuOpened, {
+      once: true
+    });
+    menu.open = true;
+  }
+  get updateComplete() {
+    return this.readyPromise;
+  }
+}
+customElements.define("submenu-ready", SubmenuReady);
+const submenuDecorator = (story) => {
+  return html`
+        ${story()}
         <submenu-ready></submenu-ready>
-    `;export const submenu=()=>{const s=()=>({root:document.querySelector("#root-value"),first:document.querySelector("#first-value"),second:document.querySelector("#second-value")}),t=()=>{const o=s();o.root.textContent="",o.first.textContent="",o.second.textContent=""},n=o=>{const e=s();e.root.textContent=o.target.value},m=o=>{const e=s();e.first.textContent=o.target.selected[0]||""},a=o=>{const e=s();e.second.textContent=o.target.selected[0]||""};return r`
-        <sp-action-menu @change=${n} @sp-opened=${t}>
+    `;
+};
+export const submenu = () => {
+  const getValueEls = () => {
+    return {
+      root: document.querySelector("#root-value"),
+      first: document.querySelector("#first-value"),
+      second: document.querySelector("#second-value")
+    };
+  };
+  const clearValues = () => {
+    const valueEls = getValueEls();
+    valueEls.root.textContent = "";
+    valueEls.first.textContent = "";
+    valueEls.second.textContent = "";
+  };
+  const handleRootChange = (event) => {
+    const valueEls = getValueEls();
+    valueEls.root.textContent = event.target.value;
+  };
+  const handleFirstDescendantChange = (event) => {
+    const valueEls = getValueEls();
+    valueEls.first.textContent = event.target.selected[0] || "";
+  };
+  const handleSecondDescendantChange = (event) => {
+    const valueEls = getValueEls();
+    valueEls.second.textContent = event.target.selected[0] || "";
+  };
+  return html`
+        <sp-action-menu @change=${handleRootChange} @sp-opened=${clearValues}>
             <sp-icon-show-menu slot="icon"></sp-icon-show-menu>
             <sp-menu-group
-                @change=${()=>console.log("group change")}
+                @change=${() => console.log("group change")}
                 role="none"
             >
                 <span slot="header">New York</span>
@@ -14,13 +114,13 @@ import{html as r,render as c}from"@spectrum-web-components/base";import"@spectru
                     Brooklyn
                     <sp-menu
                         slot="submenu"
-                        @change=${m}
+                        @change=${handleFirstDescendantChange}
                     >
                         <sp-menu-item id="submenu-item-2">
                             Ft. Greene
                             <sp-menu
                                 slot="submenu"
-                                @change=${a}
+                                @change=${handleSecondDescendantChange}
                             >
                                 <sp-menu-item>S. Oxford St</sp-menu-item>
                                 <sp-menu-item>S. Portland Ave</sp-menu-item>
@@ -35,14 +135,14 @@ import{html as r,render as c}from"@spectrum-web-components/base";import"@spectru
                     Manhattan
                     <sp-menu
                         slot="submenu"
-                        @change=${m}
+                        @change=${handleFirstDescendantChange}
                     >
                         <sp-menu-item disabled>SoHo</sp-menu-item>
                         <sp-menu-item>
                             Union Square
                             <sp-menu
                                 slot="submenu"
-                                @change=${a}
+                                @change=${handleSecondDescendantChange}
                             >
                                 <sp-menu-item>14th St</sp-menu-item>
                                 <sp-menu-item>Broadway</sp-menu-item>
@@ -65,12 +165,21 @@ import{html as r,render as c}from"@spectrum-web-components/base";import"@spectru
             <span id="second-value"></span>
             <br />
         </div>
-    `};submenu.decorators=[h];export const contextMenu=()=>{const s=()=>r`
+    `;
+};
+submenu.decorators = [submenuDecorator];
+export const contextMenu = () => {
+  const contextMenuTemplate = () => html`
         <sp-popover
             style="max-width: 33vw;"
-            @click=${e=>{var u;return(u=e.target)==null?void 0:u.dispatchEvent(new Event("close",{bubbles:!0}))}}
+            @click=${(event) => {
+    var _a;
+    return (_a = event.target) == null ? void 0 : _a.dispatchEvent(
+      new Event("close", { bubbles: true })
+    );
+  }}
         >
-            <sp-menu @change=${a}>
+            <sp-menu @change=${handleRootChange}>
                 <sp-menu-group>
                     <span slot="header">Options</span>
                     <sp-menu-item>
@@ -91,7 +200,7 @@ import{html as r,render as c}from"@spectrum-web-components/base";import"@spectru
                         <sp-menu
                             slot="submenu"
                             selects="single"
-                            @change=${o}
+                            @change=${handleFirstDescendantChange}
                         >
                             <sp-menu-item selected>Ellipse 1</sp-menu-item>
                             <sp-menu-item>Rectangle</sp-menu-item>
@@ -130,7 +239,41 @@ import{html as r,render as c}from"@spectrum-web-components/base";import"@spectru
                 </sp-menu-group>
             </sp-menu>
         </sp-popover>
-    `,t=async e=>{e.preventDefault();const u=e.target,l=new g(e.clientX,e.clientY),i=document.createDocumentFragment();c(s(),i);const d=i.querySelector("sp-popover");m(),v(u,"modal",d,{placement:"right-start",receivesFocus:"auto",virtualTrigger:l})},n=()=>({root:document.querySelector("#root-value"),first:document.querySelector("#first-value")}),m=()=>{const e=n();e.root.textContent="",e.first.textContent=""},a=e=>{const u=n();u.root.textContent=e.target.value},o=e=>{const u=n();u.first.textContent=e.target.selected[0]||""};return r`
+    `;
+  const pointerenter = 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");
+    clearValues();
+    openOverlay(trigger, "modal", popover, {
+      placement: "right-start",
+      receivesFocus: "auto",
+      virtualTrigger
+    });
+  };
+  const getValueEls = () => {
+    return {
+      root: document.querySelector("#root-value"),
+      first: document.querySelector("#first-value")
+    };
+  };
+  const clearValues = () => {
+    const valueEls = getValueEls();
+    valueEls.root.textContent = "";
+    valueEls.first.textContent = "";
+  };
+  const handleRootChange = (event) => {
+    const valueEls = getValueEls();
+    valueEls.root.textContent = event.target.value;
+  };
+  const handleFirstDescendantChange = (event) => {
+    const valueEls = getValueEls();
+    valueEls.first.textContent = event.target.selected[0] || "";
+  };
+  return html`
         <style>
             .app-root {
                 position: absolute;
@@ -140,7 +283,7 @@ import{html as r,render as c}from"@spectrum-web-components/base";import"@spectru
                 --swc-menu-width: 200px;
             }
         </style>
-        <div class="app-root" @contextmenu=${t}>
+        <div class="app-root" @contextmenu=${pointerenter}>
             <div>
                 Root value:
                 <span id="root-value"></span>
@@ -150,5 +293,6 @@ import{html as r,render as c}from"@spectrum-web-components/base";import"@spectru
                 <br />
             </div>
         </div>
-    `};
+    `;
+};
 //# sourceMappingURL=submenu.stories.js.map

package/stories/submenu.stories.js.map

@@ -2,6 +2,6 @@
   "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": []
+  "mappings": "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",
+  "names": ["submenu"]
 }

package/test/benchmark/test-basic.js

@@ -1,4 +1,11 @@
-import"@spectrum-web-components/menu/sp-menu.js";import"@spectrum-web-components/menu/sp-menu-item.js";import"@spectrum-web-components/menu/sp-menu-group.js";import"@spectrum-web-components/menu/sp-menu-divider.js";import{html as e}from"lit";import{measureFixtureCreation as m}from"../../../../test/benchmark/helpers.js";m(e`
+"use strict";
+import "@spectrum-web-components/menu/sp-menu.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import "@spectrum-web-components/menu/sp-menu-group.js";
+import "@spectrum-web-components/menu/sp-menu-divider.js";
+import { html } from "lit";
+import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
+measureFixtureCreation(html`
     <sp-menu selects="multiple">
         <sp-menu-group selects="inherit">
             <span slot="header">Section Heading</span>

package/test/benchmark/test-basic.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["test-basic.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 '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport { html } from 'lit';\nimport { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';\n\nmeasureFixtureCreation(html`\n    <sp-menu selects=\"multiple\">\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"],
-  "mappings": "AAYA,iDACA,sDACA,uDACA,yDACA,2BACA,+EAEA,EAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAetB",
+  "mappings": ";AAYA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,YAAY;AACrB,SAAS,8BAA8B;AAEvC,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAetB;",
   "names": []
 }

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

@@ -1,2 +1,5 @@
-import*as r from"../stories/menu-group.stories.js";import{regressVisuals as s}from"../../../test/visual/test.js";s("MenuGroupStories",r);
+"use strict";
+import * as stories from "../stories/menu-group.stories.js";
+import { regressVisuals } from "../../../test/visual/test.js";
+regressVisuals("MenuGroupStories", stories);
 //# sourceMappingURL=menu-group.test-vrt.js.map

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["menu-group.test-vrt.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 * as stories from '../stories/menu-group.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('MenuGroupStories', stories);\n"],
-  "mappings": "AAYA,mDACA,8DAEA,EAAe,mBAAoB,CAAO",
+  "mappings": ";AAYA,YAAY,aAAa;AACzB,SAAS,sBAAsB;AAE/B,eAAe,oBAAoB,OAAO;",
   "names": []
 }