@spectrum-web-components/menu 0.16.0-devmode.0 → 0.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +9 -9
- package/sp-menu-divider.js +1 -2
- package/sp-menu-divider.js.map +1 -1
- package/sp-menu-group.js +1 -2
- package/sp-menu-group.js.map +1 -1
- package/sp-menu-item.js +1 -2
- package/sp-menu-item.js.map +1 -1
- package/sp-menu.js +1 -2
- package/sp-menu.js.map +1 -1
- package/src/Menu.js +2 -493
- package/src/Menu.js.map +1 -1
- package/src/MenuDivider.js +1 -12
- package/src/MenuDivider.js.map +1 -1
- package/src/MenuGroup.js +2 -71
- package/src/MenuGroup.js.map +1 -1
- package/src/MenuItem.js +7 -406
- package/src/MenuItem.js.map +1 -1
- package/src/index.js +1 -4
- package/src/index.js.map +1 -1
- package/src/menu-divider.css.js +2 -4
- package/src/menu-divider.css.js.map +1 -1
- package/src/menu-group.css.js +2 -4
- package/src/menu-group.css.js.map +1 -1
- package/src/menu-item.css.js +2 -4
- package/src/menu-item.css.js.map +1 -1
- package/src/menu.css.js +2 -4
- package/src/menu.css.js.map +1 -1
- package/src/spectrum-checkmark.css.js +2 -4
- package/src/spectrum-checkmark.css.js.map +1 -1
- package/src/spectrum-chevron.css.js +2 -4
- package/src/spectrum-chevron.css.js.map +1 -1
- package/src/spectrum-itemLabel.css.js +2 -4
- package/src/spectrum-itemLabel.css.js.map +1 -1
- package/src/spectrum-menu-divider.css.js +2 -4
- package/src/spectrum-menu-divider.css.js.map +1 -1
- package/src/spectrum-menu-item.css.js +2 -4
- package/src/spectrum-menu-item.css.js.map +1 -1
- package/src/spectrum-menu-sectionHeading.css.js +2 -4
- package/src/spectrum-menu-sectionHeading.css.js.map +1 -1
- package/src/spectrum-menu.css.js +2 -4
- package/src/spectrum-menu.css.js.map +1 -1
- package/stories/menu-group.stories.js +9 -60
- package/stories/menu-group.stories.js.map +1 -1
- package/stories/menu-item.stories.js +4 -24
- package/stories/menu-item.stories.js.map +1 -1
- package/stories/menu.stories.js +8 -46
- package/stories/menu.stories.js.map +1 -1
- package/stories/submenu.stories.js +16 -153
- package/stories/submenu.stories.js.map +1 -1
- package/test/benchmark/test-basic.js +1 -7
- package/test/benchmark/test-basic.js.map +1 -1
- package/test/menu-group.test-vrt.js +1 -3
- package/test/menu-group.test-vrt.js.map +1 -1
- package/test/menu-group.test.js +6 -170
- package/test/menu-group.test.js.map +1 -1
- package/test/menu-item.test-vrt.js +1 -3
- package/test/menu-item.test-vrt.js.map +1 -1
- package/test/menu-item.test.js +8 -101
- package/test/menu-item.test.js.map +1 -1
- package/test/menu-selects.test.js +5 -504
- package/test/menu-selects.test.js.map +1 -1
- package/test/menu.test-vrt.js +1 -3
- package/test/menu.test-vrt.js.map +1 -1
- package/test/menu.test.js +17 -258
- package/test/menu.test.js.map +1 -1
- package/test/submenu.test-vrt.js +1 -3
- package/test/submenu.test-vrt.js.map +1 -1
- package/test/submenu.test.js +21 -482
- package/test/submenu.test.js.map +1 -1
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["menu.stories.ts"],
|
|
4
4
|
"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 { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\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 '@spectrum-web-components/icon/sp-icon.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark-circle.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js';\n\nexport default {\n component: 'sp-menu',\n title: 'Menu',\n};\n\nexport const Default = (): TemplateResult => {\n return html`\n <sp-menu>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n\n <sp-popover open>\n <sp-menu>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nexport const singleSelect = (): TemplateResult => {\n return html`\n <sp-menu selects=\"single\">\n <sp-menu-item selected>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n\n <sp-popover open>\n <sp-menu selects=\"single\">\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item selected>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nexport const multipleSelect = (): TemplateResult => {\n return html`\n <sp-menu selects=\"multiple\">\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item selected>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item selected>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n\n <sp-popover open>\n <sp-menu selects=\"multiple\">\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item selected>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item selected>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n </sp-popover>\n `;\n};\nexport const headersAndIcons = (): TemplateResult => {\n return html`\n <sp-popover open>\n <sp-menu>\n <sp-menu-group>\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>\n <span slot=\"header\">Section Heading</span>\n <sp-menu-item>\n <sp-icon-checkmark-circle\n slot=\"icon\"\n ></sp-icon-checkmark-circle>\n Save\n </sp-menu-item>\n <sp-menu-item disabled>\n <sp-icon-checkmark-circle\n slot=\"icon\"\n ></sp-icon-checkmark-circle>\n Download\n </sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nheadersAndIcons.storyName = 'Headers and Icons';\n\nexport const Selected = (): TemplateResult => {\n return html`\n <sp-popover open style=\"width: 200px;\">\n <sp-menu>\n <sp-menu-group>\n <span slot=\"header\">San Francisco</span>\n <sp-menu-item>Financial District</sp-menu-item>\n <sp-menu-item>South of Market</sp-menu-item>\n <sp-menu-item>North Beach</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group selects=\"single\">\n <span slot=\"header\">Oakland</span>\n <sp-menu-item>City Center</sp-menu-item>\n <sp-menu-item disabled>Jack London Square</sp-menu-item>\n <sp-menu-item selected>\n My best friend's mom's house in the burbs just off\n Silverado street\n </sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nexport const MenuGroupSelects = (): TemplateResult => {\n return html`\n <sp-popover open style=\"width: 200px;\">\n <sp-menu selects=\"single\">\n <sp-menu-group selects=\"inherit\">\n <span slot=\"header\">One of these</span>\n <sp-menu-item>Camden</sp-menu-item>\n <sp-menu-item>Cedar Riverside</sp-menu-item>\n <sp-menu-item>Downtown</sp-menu-item>\n <sp-menu-item>Northeast Arts District</sp-menu-item>\n <sp-menu-item selected>Uptown</sp-menu-item>\n </sp-menu-group>\n <sp-menu-group selects=\"inherit\">\n <span slot=\"header\">Or of these</span>\n <sp-menu-item>Lowertown</sp-menu-item>\n <sp-menu-item>Grand Ave</sp-menu-item>\n </sp-menu-group>\n <sp-menu-group selects=\"multiple\">\n <span slot=\"header\">Many of these</span>\n <sp-menu-item>Financial District</sp-menu-item>\n <sp-menu-item selected>South of Market</sp-menu-item>\n <sp-menu-item selected>North Beach</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group selects=\"single\">\n <span slot=\"header\">One of these</span>\n <sp-menu-item>City Center</sp-menu-item>\n <sp-menu-item disabled>Jack London Square</sp-menu-item>\n <sp-menu-item selected>\n My best friend's mom's house in the burbs just off\n Silverado street\n </sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nexport const selectedOffPage = (): TemplateResult => {\n return html`\n <p style=\"height: 100vh; padding-bottom: 50px;\">\n In this example the \\`<sp-menu-item selected>\\` element is off\n the visible page by default, but does not alter the page scroll on\n load.\n </p>\n <sp-menu>\n <sp-menu-item selected style=\"padding-bottom: 50px;\">\n My best friend's mom's house in the burbs just off Silverado\n street\n </sp-menu-item>\n </sp-menu>\n `;\n};\n\nexport const MenuGroupSelectsMultiple = (): TemplateResult => {\n return html`\n <sp-popover open style=\"width: 200px;\">\n <sp-menu selects=\"multiple\">\n <sp-menu-group selects=\"inherit\">\n <span slot=\"header\">Many of these</span>\n <sp-menu-item>Camden</sp-menu-item>\n <sp-menu-item selected>Cedar Riverside</sp-menu-item>\n <sp-menu-item selected>Downtown</sp-menu-item>\n <sp-menu-item>Northeast Arts District</sp-menu-item>\n <sp-menu-item>Uptown</sp-menu-item>\n </sp-menu-group>\n <sp-menu-group selects=\"inherit\">\n <span slot=\"header\">And these, too</span>\n <sp-menu-item>Lowertown</sp-menu-item>\n <sp-menu-item selected>Grand Ave</sp-menu-item>\n </sp-menu-group>\n <sp-menu-group>\n <span slot=\"header\">None of these</span>\n <sp-menu-item>Financial District</sp-menu-item>\n <sp-menu-item>South of Market</sp-menu-item>\n <sp-menu-item>North Beach</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group selects=\"single\">\n <span slot=\"header\">One of these</span>\n <sp-menu-item>City Center</sp-menu-item>\n <sp-menu-item disabled>Jack London Square</sp-menu-item>\n <sp-menu-item selected>\n My best friend's mom's house in the burbs just off\n Silverado street\n </sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n </sp-popover>\n `;\n};\n"],
|
|
5
|
-
"mappings": "AAWA
|
|
5
|
+
"mappings": "AAWA,qDAEA,iDACA,uDACA,+DACA,sDACA,yDACA,uDACA,iDACA,kFACA,2EAEA,cAAe,CACX,UAAW,UACX,MAAO,MACX,EAEO,YAAM,SAAU,IACZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAyBE,aAAe,IACjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAyBE,eAAiB,IACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAwBE,gBAAkB,IACpB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MA8BX,gBAAgB,UAAY,oBAErB,YAAM,UAAW,IACb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAwBE,iBAAmB,IACrB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAqCE,gBAAkB,IACpB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAeE,yBAA2B,IAC7B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,106 +1,11 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
import "@spectrum-web-components/menu/sp-menu-item.js";
|
|
4
|
-
import "@spectrum-web-components/menu/sp-menu-divider.js";
|
|
5
|
-
import "@spectrum-web-components/menu/sp-menu-group.js";
|
|
6
|
-
import { openOverlay, VirtualTrigger } from "@spectrum-web-components/overlay";
|
|
7
|
-
import "@spectrum-web-components/popover/sp-popover.js";
|
|
8
|
-
import "@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js";
|
|
9
|
-
export default {
|
|
10
|
-
component: "sp-menu",
|
|
11
|
-
title: "Menu/Submenu"
|
|
12
|
-
};
|
|
13
|
-
function nextFrame() {
|
|
14
|
-
return new Promise((res) => requestAnimationFrame(() => res()));
|
|
15
|
-
}
|
|
16
|
-
class SubmenuReady extends HTMLElement {
|
|
17
|
-
constructor() {
|
|
18
|
-
super();
|
|
19
|
-
this.handleMenuOpened = async (event) => {
|
|
20
|
-
await nextFrame();
|
|
21
|
-
await event.target.updateComplete;
|
|
22
|
-
const submenu2 = document.querySelector("#submenu-item-1");
|
|
23
|
-
if (!submenu2) {
|
|
24
|
-
return;
|
|
25
|
-
}
|
|
26
|
-
submenu2.addEventListener("sp-opened", this.handleSubmenuOpened, {
|
|
27
|
-
once: true
|
|
28
|
-
});
|
|
29
|
-
submenu2.dispatchEvent(new PointerEvent("pointerenter", { bubbles: true, composed: true }));
|
|
30
|
-
};
|
|
31
|
-
this.handleSubmenuOpened = async (event) => {
|
|
32
|
-
await nextFrame();
|
|
33
|
-
await event.target.updateComplete;
|
|
34
|
-
const submenu2 = document.querySelector("#submenu-item-2");
|
|
35
|
-
if (!submenu2) {
|
|
36
|
-
return;
|
|
37
|
-
}
|
|
38
|
-
submenu2.addEventListener("sp-opened", this.handleSubmenuChildOpened, {
|
|
39
|
-
once: true
|
|
40
|
-
});
|
|
41
|
-
submenu2.dispatchEvent(new PointerEvent("pointerenter", { bubbles: true, composed: true }));
|
|
42
|
-
};
|
|
43
|
-
this.handleSubmenuChildOpened = async (event) => {
|
|
44
|
-
await nextFrame();
|
|
45
|
-
await event.target.updateComplete;
|
|
46
|
-
this.ready(true);
|
|
47
|
-
};
|
|
48
|
-
this.readyPromise = Promise.resolve(false);
|
|
49
|
-
this.readyPromise = new Promise((res) => {
|
|
50
|
-
this.ready = res;
|
|
51
|
-
this.setup();
|
|
52
|
-
});
|
|
53
|
-
}
|
|
54
|
-
async setup() {
|
|
55
|
-
await nextFrame();
|
|
56
|
-
const menu = document.querySelector(`sp-action-menu`);
|
|
57
|
-
menu.addEventListener("sp-opened", this.handleMenuOpened, {
|
|
58
|
-
once: true
|
|
59
|
-
});
|
|
60
|
-
menu.open = true;
|
|
61
|
-
}
|
|
62
|
-
get updateComplete() {
|
|
63
|
-
return this.readyPromise;
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
customElements.define("submenu-ready", SubmenuReady);
|
|
67
|
-
const submenuDecorator = (story) => {
|
|
68
|
-
return html`
|
|
69
|
-
${story()}
|
|
1
|
+
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`
|
|
2
|
+
${s()}
|
|
70
3
|
<submenu-ready></submenu-ready>
|
|
71
|
-
`;
|
|
72
|
-
}
|
|
73
|
-
export const submenu = () => {
|
|
74
|
-
const getValueEls = () => {
|
|
75
|
-
return {
|
|
76
|
-
root: document.querySelector("#root-value"),
|
|
77
|
-
first: document.querySelector("#first-value"),
|
|
78
|
-
second: document.querySelector("#second-value")
|
|
79
|
-
};
|
|
80
|
-
};
|
|
81
|
-
const clearValues = () => {
|
|
82
|
-
const valueEls = getValueEls();
|
|
83
|
-
valueEls.root.textContent = "";
|
|
84
|
-
valueEls.first.textContent = "";
|
|
85
|
-
valueEls.second.textContent = "";
|
|
86
|
-
};
|
|
87
|
-
const handleRootChange = (event) => {
|
|
88
|
-
const valueEls = getValueEls();
|
|
89
|
-
valueEls.root.textContent = event.target.value;
|
|
90
|
-
};
|
|
91
|
-
const handleFirstDescendantChange = (event) => {
|
|
92
|
-
const valueEls = getValueEls();
|
|
93
|
-
valueEls.first.textContent = event.target.selected[0] || "";
|
|
94
|
-
};
|
|
95
|
-
const handleSecondDescendantChange = (event) => {
|
|
96
|
-
const valueEls = getValueEls();
|
|
97
|
-
valueEls.second.textContent = event.target.selected[0] || "";
|
|
98
|
-
};
|
|
99
|
-
return html`
|
|
100
|
-
<sp-action-menu @change=${handleRootChange} @sp-opened=${clearValues}>
|
|
4
|
+
`;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`
|
|
5
|
+
<sp-action-menu @change=${n} @sp-opened=${t}>
|
|
101
6
|
<sp-icon-show-menu slot="icon"></sp-icon-show-menu>
|
|
102
7
|
<sp-menu-group
|
|
103
|
-
@change=${()
|
|
8
|
+
@change=${()=>console.log("group change")}
|
|
104
9
|
role="none"
|
|
105
10
|
>
|
|
106
11
|
<span slot="header">New York</span>
|
|
@@ -109,13 +14,13 @@ export const submenu = () => {
|
|
|
109
14
|
Brooklyn
|
|
110
15
|
<sp-menu
|
|
111
16
|
slot="submenu"
|
|
112
|
-
@change=${
|
|
17
|
+
@change=${m}
|
|
113
18
|
>
|
|
114
19
|
<sp-menu-item id="submenu-item-2">
|
|
115
20
|
Ft. Greene
|
|
116
21
|
<sp-menu
|
|
117
22
|
slot="submenu"
|
|
118
|
-
@change=${
|
|
23
|
+
@change=${a}
|
|
119
24
|
>
|
|
120
25
|
<sp-menu-item>S. Oxford St</sp-menu-item>
|
|
121
26
|
<sp-menu-item>S. Portland Ave</sp-menu-item>
|
|
@@ -130,14 +35,14 @@ export const submenu = () => {
|
|
|
130
35
|
Manhattan
|
|
131
36
|
<sp-menu
|
|
132
37
|
slot="submenu"
|
|
133
|
-
@change=${
|
|
38
|
+
@change=${m}
|
|
134
39
|
>
|
|
135
40
|
<sp-menu-item disabled>SoHo</sp-menu-item>
|
|
136
41
|
<sp-menu-item>
|
|
137
42
|
Union Square
|
|
138
43
|
<sp-menu
|
|
139
44
|
slot="submenu"
|
|
140
|
-
@change=${
|
|
45
|
+
@change=${a}
|
|
141
46
|
>
|
|
142
47
|
<sp-menu-item>14th St</sp-menu-item>
|
|
143
48
|
<sp-menu-item>Broadway</sp-menu-item>
|
|
@@ -160,19 +65,12 @@ export const submenu = () => {
|
|
|
160
65
|
<span id="second-value"></span>
|
|
161
66
|
<br />
|
|
162
67
|
</div>
|
|
163
|
-
|
|
164
|
-
};
|
|
165
|
-
submenu.decorators = [submenuDecorator];
|
|
166
|
-
export const contextMenu = () => {
|
|
167
|
-
const contextMenuTemplate = () => html`
|
|
68
|
+
`};submenu.decorators=[h];export const contextMenu=()=>{const s=()=>r`
|
|
168
69
|
<sp-popover
|
|
169
70
|
style="max-width: 33vw;"
|
|
170
|
-
@click=${(
|
|
171
|
-
var _a;
|
|
172
|
-
return (_a = event.target) == null ? void 0 : _a.dispatchEvent(new Event("close", { bubbles: true }));
|
|
173
|
-
}}
|
|
71
|
+
@click=${e=>{var u;return(u=e.target)==null?void 0:u.dispatchEvent(new Event("close",{bubbles:!0}))}}
|
|
174
72
|
>
|
|
175
|
-
<sp-menu @change=${
|
|
73
|
+
<sp-menu @change=${a}>
|
|
176
74
|
<sp-menu-group>
|
|
177
75
|
<span slot="header">Options</span>
|
|
178
76
|
<sp-menu-item>
|
|
@@ -193,7 +91,7 @@ export const contextMenu = () => {
|
|
|
193
91
|
<sp-menu
|
|
194
92
|
slot="submenu"
|
|
195
93
|
selects="single"
|
|
196
|
-
@change=${
|
|
94
|
+
@change=${o}
|
|
197
95
|
>
|
|
198
96
|
<sp-menu-item selected>Ellipse 1</sp-menu-item>
|
|
199
97
|
<sp-menu-item>Rectangle</sp-menu-item>
|
|
@@ -232,41 +130,7 @@ export const contextMenu = () => {
|
|
|
232
130
|
</sp-menu-group>
|
|
233
131
|
</sp-menu>
|
|
234
132
|
</sp-popover>
|
|
235
|
-
|
|
236
|
-
const pointerenter = async (event) => {
|
|
237
|
-
event.preventDefault();
|
|
238
|
-
const trigger = event.target;
|
|
239
|
-
const virtualTrigger = new VirtualTrigger(event.clientX, event.clientY);
|
|
240
|
-
const fragment = document.createDocumentFragment();
|
|
241
|
-
render(contextMenuTemplate(), fragment);
|
|
242
|
-
const popover = fragment.querySelector("sp-popover");
|
|
243
|
-
clearValues();
|
|
244
|
-
openOverlay(trigger, "modal", popover, {
|
|
245
|
-
placement: "right-start",
|
|
246
|
-
receivesFocus: "auto",
|
|
247
|
-
virtualTrigger
|
|
248
|
-
});
|
|
249
|
-
};
|
|
250
|
-
const getValueEls = () => {
|
|
251
|
-
return {
|
|
252
|
-
root: document.querySelector("#root-value"),
|
|
253
|
-
first: document.querySelector("#first-value")
|
|
254
|
-
};
|
|
255
|
-
};
|
|
256
|
-
const clearValues = () => {
|
|
257
|
-
const valueEls = getValueEls();
|
|
258
|
-
valueEls.root.textContent = "";
|
|
259
|
-
valueEls.first.textContent = "";
|
|
260
|
-
};
|
|
261
|
-
const handleRootChange = (event) => {
|
|
262
|
-
const valueEls = getValueEls();
|
|
263
|
-
valueEls.root.textContent = event.target.value;
|
|
264
|
-
};
|
|
265
|
-
const handleFirstDescendantChange = (event) => {
|
|
266
|
-
const valueEls = getValueEls();
|
|
267
|
-
valueEls.first.textContent = event.target.selected[0] || "";
|
|
268
|
-
};
|
|
269
|
-
return html`
|
|
133
|
+
`,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`
|
|
270
134
|
<style>
|
|
271
135
|
.app-root {
|
|
272
136
|
position: absolute;
|
|
@@ -276,7 +140,7 @@ export const contextMenu = () => {
|
|
|
276
140
|
--swc-menu-width: 200px;
|
|
277
141
|
}
|
|
278
142
|
</style>
|
|
279
|
-
<div class="app-root" @contextmenu=${
|
|
143
|
+
<div class="app-root" @contextmenu=${t}>
|
|
280
144
|
<div>
|
|
281
145
|
Root value:
|
|
282
146
|
<span id="root-value"></span>
|
|
@@ -286,6 +150,5 @@ export const contextMenu = () => {
|
|
|
286
150
|
<br />
|
|
287
151
|
</div>
|
|
288
152
|
</div>
|
|
289
|
-
|
|
290
|
-
};
|
|
153
|
+
`};
|
|
291
154
|
//# sourceMappingURL=submenu.stories.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["submenu.stories.ts"],
|
|
4
4
|
"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"],
|
|
5
|
-
"mappings": "AAYA
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,10 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
import "@spectrum-web-components/menu/sp-menu-item.js";
|
|
3
|
-
import "@spectrum-web-components/menu/sp-menu-group.js";
|
|
4
|
-
import "@spectrum-web-components/menu/sp-menu-divider.js";
|
|
5
|
-
import { html } from "lit";
|
|
6
|
-
import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
|
|
7
|
-
measureFixtureCreation(html`
|
|
1
|
+
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`
|
|
8
2
|
<sp-menu selects="multiple">
|
|
9
3
|
<sp-menu-group selects="inherit">
|
|
10
4
|
<span slot="header">Section Heading</span>
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["test-basic.ts"],
|
|
4
4
|
"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"],
|
|
5
|
-
"mappings": "AAYA
|
|
5
|
+
"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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { regressVisuals } from "../../../test/visual/test.js";
|
|
3
|
-
regressVisuals("MenuGroupStories", stories);
|
|
1
|
+
import*as r from"../stories/menu-group.stories.js";import{regressVisuals as s}from"../../../test/visual/test.js";s("MenuGroupStories",r);
|
|
4
2
|
//# sourceMappingURL=menu-group.test-vrt.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["menu-group.test-vrt.ts"],
|
|
4
4
|
"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"],
|
|
5
|
-
"mappings": "AAYA
|
|
5
|
+
"mappings": "AAYA,mDACA,8DAEA,EAAe,mBAAoB,CAAO",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/test/menu-group.test.js
CHANGED
|
@@ -1,21 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
import "@spectrum-web-components/menu/sp-menu.js";
|
|
3
|
-
import "@spectrum-web-components/menu/sp-menu-item.js";
|
|
4
|
-
import "@spectrum-web-components/menu/sp-menu-divider.js";
|
|
5
|
-
import {
|
|
6
|
-
elementUpdated,
|
|
7
|
-
expect,
|
|
8
|
-
fixture,
|
|
9
|
-
html,
|
|
10
|
-
oneEvent,
|
|
11
|
-
waitUntil
|
|
12
|
-
} from "@open-wc/testing";
|
|
13
|
-
import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
|
|
14
|
-
const managedItems = (menu) => {
|
|
15
|
-
return menu.childItems.filter((item) => item.menuData.selectionRoot === menu);
|
|
16
|
-
};
|
|
17
|
-
describe("Menu group", () => {
|
|
18
|
-
testForLitDevWarnings(async () => await fixture(html`
|
|
1
|
+
import"@spectrum-web-components/menu/sp-menu-group.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{elementUpdated as i,expect as e,fixture as h,html as b,oneEvent as w,waitUntil as o}from"@open-wc/testing";import{testForLitDevWarnings as M}from"../../../test/testing-helpers.js";const s=t=>t.childItems.filter(n=>n.menuData.selectionRoot===t);describe("Menu group",()=>{M(async()=>await h(b`
|
|
19
2
|
<sp-menu selects="single">
|
|
20
3
|
<sp-menu-group selects="inherit">
|
|
21
4
|
<span slot="header">Section Heading</span>
|
|
@@ -30,9 +13,7 @@ describe("Menu group", () => {
|
|
|
30
13
|
<sp-menu-item disabled>Download</sp-menu-item>
|
|
31
14
|
</sp-menu-group>
|
|
32
15
|
</sp-menu>
|
|
33
|
-
`))
|
|
34
|
-
it("renders", async () => {
|
|
35
|
-
const el = await fixture(html`
|
|
16
|
+
`)),it("renders",async()=>{const t=await h(b`
|
|
36
17
|
<sp-menu selects="single">
|
|
37
18
|
<sp-menu-group selects="inherit">
|
|
38
19
|
<span slot="header">Section Heading</span>
|
|
@@ -47,34 +28,9 @@ describe("Menu group", () => {
|
|
|
47
28
|
<sp-menu-item disabled>Download</sp-menu-item>
|
|
48
29
|
</sp-menu-group>
|
|
49
30
|
</sp-menu>
|
|
50
|
-
`);
|
|
51
|
-
await waitUntil(() => {
|
|
52
|
-
return managedItems(el).length === 5;
|
|
53
|
-
}, `expected menu group to manage 5 children, received ${managedItems(el).length} of ${el.childItems.length}`);
|
|
54
|
-
await elementUpdated(el);
|
|
55
|
-
await expect(el).to.be.accessible();
|
|
56
|
-
});
|
|
57
|
-
it('manages [slot="header"] content', async () => {
|
|
58
|
-
const el = await fixture(html`
|
|
31
|
+
`);await o(()=>s(t).length===5,`expected menu group to manage 5 children, received ${s(t).length} of ${t.childItems.length}`),await i(t),await e(t).to.be.accessible()}),it('manages [slot="header"] content',async()=>{const t=await h(b`
|
|
59
32
|
<sp-menu-group></sp-menu-group>
|
|
60
|
-
`);
|
|
61
|
-
await elementUpdated(el);
|
|
62
|
-
const slot = el.shadowRoot.querySelector('[name="header"');
|
|
63
|
-
const header = document.createElement("span");
|
|
64
|
-
header.textContent = "Header";
|
|
65
|
-
header.slot = "header";
|
|
66
|
-
expect(header.id).to.equal("");
|
|
67
|
-
let slotchanged = oneEvent(slot, "slotchange");
|
|
68
|
-
el.append(header);
|
|
69
|
-
await slotchanged;
|
|
70
|
-
expect(header.id).to.equal(el.headerId);
|
|
71
|
-
slotchanged = oneEvent(slot, "slotchange");
|
|
72
|
-
header.remove();
|
|
73
|
-
await slotchanged;
|
|
74
|
-
expect(header.id).to.equal("");
|
|
75
|
-
});
|
|
76
|
-
it("handles selects for nested menu groups", async () => {
|
|
77
|
-
const el = await fixture(html`
|
|
33
|
+
`);await i(t);const n=t.shadowRoot.querySelector('[name="header"'),u=document.createElement("span");u.textContent="Header",u.slot="header",e(u.id).to.equal("");let m=w(n,"slotchange");t.append(u),await m,e(u.id).to.equal(t.headerId),m=w(n,"slotchange"),u.remove(),await m,e(u.id).to.equal("")}),it("handles selects for nested menu groups",async()=>{const t=await h(b`
|
|
78
34
|
<sp-menu selects="single">
|
|
79
35
|
<sp-menu-item selected>First</sp-menu-item>
|
|
80
36
|
<sp-menu-item>Second</sp-menu-item>
|
|
@@ -99,96 +55,7 @@ describe("Menu group", () => {
|
|
|
99
55
|
<sp-menu-item>Inherit2</sp-menu-item>
|
|
100
56
|
</sp-menu-group>
|
|
101
57
|
</sp-menu>
|
|
102
|
-
`);
|
|
103
|
-
await waitUntil(() => managedItems(el).length === 4, `expected outer menu to manage 4 items (2 are inherited), got ${managedItems(el).length}, with ${el.childItems.length} total`);
|
|
104
|
-
await waitUntil(() => el.selectedItems.length === 1, "expected 1 selected item");
|
|
105
|
-
await elementUpdated(el);
|
|
106
|
-
const firstItem = el.querySelector("sp-menu-item:nth-of-type(1)");
|
|
107
|
-
const secondItem = el.querySelector("sp-menu-item:nth-of-type(2)");
|
|
108
|
-
const multiGroup = el.querySelector("sp-menu-group#mg-multi");
|
|
109
|
-
const multiItem1 = multiGroup.querySelector("sp-menu-item:nth-of-type(1)");
|
|
110
|
-
const multiItem2 = multiGroup.querySelector("sp-menu-item:nth-of-type(2)");
|
|
111
|
-
await waitUntil(() => managedItems(multiGroup).length === 4, `selects="#mg-multi should manage 4 items (2 are inherited), received ${managedItems(multiGroup).length}`);
|
|
112
|
-
const singleGroup = el.querySelector("sp-menu-group#mg-single");
|
|
113
|
-
const singleItem1 = singleGroup.querySelector("sp-menu-item:nth-of-type(1)");
|
|
114
|
-
const singleItem2 = singleGroup.querySelector("sp-menu-item:nth-of-type(2)");
|
|
115
|
-
await waitUntil(() => managedItems(singleGroup).length === 2, 'selects="#mg-none should manage 4 items (2 are inherited)');
|
|
116
|
-
const noneGroup = el.querySelector("sp-menu-group#mg-none");
|
|
117
|
-
const noneItem1 = noneGroup.querySelector("sp-menu-item:nth-of-type(1)");
|
|
118
|
-
const noneItem2 = noneGroup.querySelector("sp-menu-item:nth-of-type(2)");
|
|
119
|
-
await waitUntil(() => managedItems(noneGroup).length === 2, `selects="#mg-none" should manage 2 items, received ${managedItems(noneGroup).length}`);
|
|
120
|
-
const inheritGroup = el.querySelector("sp-menu-group#mg-inherit");
|
|
121
|
-
const inheritItem1 = inheritGroup.querySelector("sp-menu-item:nth-of-type(1)");
|
|
122
|
-
const inheritItem2 = inheritGroup.querySelector("sp-menu-item:nth-of-type(2)");
|
|
123
|
-
expect(firstItem.getAttribute("role")).to.equal("menuitemradio");
|
|
124
|
-
expect(secondItem.getAttribute("role")).to.equal("menuitemradio");
|
|
125
|
-
expect(multiItem1.getAttribute("role")).to.equal("menuitemcheckbox");
|
|
126
|
-
expect(multiItem2.getAttribute("role")).to.equal("menuitemcheckbox");
|
|
127
|
-
expect(singleItem1.getAttribute("role")).to.equal("menuitemradio");
|
|
128
|
-
expect(singleItem2.getAttribute("role")).to.equal("menuitemradio");
|
|
129
|
-
expect(noneItem1.getAttribute("role")).to.equal("menuitem");
|
|
130
|
-
expect(noneItem2.getAttribute("role")).to.equal("menuitem");
|
|
131
|
-
expect(inheritItem1.getAttribute("role")).to.equal("menuitemradio");
|
|
132
|
-
expect(inheritItem2.getAttribute("role")).to.equal("menuitemradio");
|
|
133
|
-
await elementUpdated(firstItem);
|
|
134
|
-
expect(singleItem1.selected).to.be.true;
|
|
135
|
-
expect(firstItem.selected).to.be.true;
|
|
136
|
-
expect(secondItem.selected, "second item not selected").to.be.false;
|
|
137
|
-
expect(el.value).to.equal("First");
|
|
138
|
-
expect(el.selectedItems.length).to.equal(1);
|
|
139
|
-
expect(firstItem.getAttribute("aria-checked")).to.equal("true");
|
|
140
|
-
expect(secondItem.getAttribute("aria-checked")).to.equal("false");
|
|
141
|
-
secondItem.click();
|
|
142
|
-
await elementUpdated(el);
|
|
143
|
-
await elementUpdated(firstItem);
|
|
144
|
-
await elementUpdated(secondItem);
|
|
145
|
-
expect(firstItem.selected, "first item not selected").to.be.false;
|
|
146
|
-
expect(secondItem.selected).to.be.true;
|
|
147
|
-
expect(firstItem.getAttribute("aria-checked")).to.equal("false");
|
|
148
|
-
expect(secondItem.getAttribute("aria-checked")).to.equal("true");
|
|
149
|
-
expect(el.value).to.equal("Second");
|
|
150
|
-
expect(el.selectedItems.length).to.equal(1);
|
|
151
|
-
inheritItem1.click();
|
|
152
|
-
await elementUpdated(el);
|
|
153
|
-
await elementUpdated(inheritItem1);
|
|
154
|
-
await elementUpdated(secondItem);
|
|
155
|
-
expect(secondItem.selected, "second item not selected again").to.be.false;
|
|
156
|
-
expect(inheritItem1.selected).to.be.true;
|
|
157
|
-
expect(secondItem.getAttribute("aria-checked")).to.equal("false");
|
|
158
|
-
expect(inheritItem1.getAttribute("aria-checked")).to.equal("true");
|
|
159
|
-
expect(el.value).to.equal("Inherit1");
|
|
160
|
-
expect(el.selectedItems.length).to.equal(1);
|
|
161
|
-
noneItem2.click();
|
|
162
|
-
await elementUpdated(noneGroup);
|
|
163
|
-
await elementUpdated(noneItem2);
|
|
164
|
-
expect(inheritItem1.selected).to.be.true;
|
|
165
|
-
expect(noneItem2.selected, "none item not selected").to.be.false;
|
|
166
|
-
expect(el.value).to.equal("Inherit1");
|
|
167
|
-
expect(el.selectedItems.length).to.equal(1);
|
|
168
|
-
singleItem2.click();
|
|
169
|
-
await elementUpdated(singleGroup);
|
|
170
|
-
await elementUpdated(singleItem1);
|
|
171
|
-
await elementUpdated(singleItem2);
|
|
172
|
-
expect(singleItem1.selected, "first item not selected").to.be.false;
|
|
173
|
-
expect(singleItem2.selected).to.be.true;
|
|
174
|
-
expect(inheritItem1.selected).to.be.true;
|
|
175
|
-
expect(singleItem1.getAttribute("aria-checked")).to.equal("false");
|
|
176
|
-
expect(singleItem2.getAttribute("aria-checked")).to.equal("true");
|
|
177
|
-
expect(el.value).to.equal("Inherit1");
|
|
178
|
-
expect(el.selectedItems.length).to.equal(1);
|
|
179
|
-
expect(singleGroup.selectedItems.length).to.equal(1);
|
|
180
|
-
multiItem2.click();
|
|
181
|
-
await elementUpdated(el);
|
|
182
|
-
await elementUpdated(multiItem2);
|
|
183
|
-
expect(multiItem1.selected).to.be.true;
|
|
184
|
-
expect(multiItem2.selected).to.be.true;
|
|
185
|
-
expect(inheritItem1.selected).to.be.true;
|
|
186
|
-
expect(multiItem1.getAttribute("aria-checked")).to.equal("true");
|
|
187
|
-
expect(multiItem2.getAttribute("aria-checked")).to.equal("true");
|
|
188
|
-
expect(multiGroup.selectedItems.length).to.equal(2);
|
|
189
|
-
});
|
|
190
|
-
it("handles changing managed items for selects changes", async () => {
|
|
191
|
-
const el = await fixture(html`
|
|
58
|
+
`);await o(()=>s(t).length===4,`expected outer menu to manage 4 items (2 are inherited), got ${s(t).length}, with ${t.childItems.length} total`),await o(()=>t.selectedItems.length===1,"expected 1 selected item"),await i(t);const n=t.querySelector("sp-menu-item:nth-of-type(1)"),u=t.querySelector("sp-menu-item:nth-of-type(2)"),m=t.querySelector("sp-menu-group#mg-multi"),p=m.querySelector("sp-menu-item:nth-of-type(1)"),r=m.querySelector("sp-menu-item:nth-of-type(2)");await o(()=>s(m).length===4,`selects="#mg-multi should manage 4 items (2 are inherited), received ${s(m).length}`);const a=t.querySelector("sp-menu-group#mg-single"),c=a.querySelector("sp-menu-item:nth-of-type(1)"),g=a.querySelector("sp-menu-item:nth-of-type(2)");await o(()=>s(a).length===2,'selects="#mg-none should manage 4 items (2 are inherited)');const d=t.querySelector("sp-menu-group#mg-none"),y=d.querySelector("sp-menu-item:nth-of-type(1)"),q=d.querySelector("sp-menu-item:nth-of-type(2)");await o(()=>s(d).length===2,`selects="#mg-none" should manage 2 items, received ${s(d).length}`);const I=t.querySelector("sp-menu-group#mg-inherit"),l=I.querySelector("sp-menu-item:nth-of-type(1)"),S=I.querySelector("sp-menu-item:nth-of-type(2)");e(n.getAttribute("role")).to.equal("menuitemradio"),e(u.getAttribute("role")).to.equal("menuitemradio"),e(p.getAttribute("role")).to.equal("menuitemcheckbox"),e(r.getAttribute("role")).to.equal("menuitemcheckbox"),e(c.getAttribute("role")).to.equal("menuitemradio"),e(g.getAttribute("role")).to.equal("menuitemradio"),e(y.getAttribute("role")).to.equal("menuitem"),e(q.getAttribute("role")).to.equal("menuitem"),e(l.getAttribute("role")).to.equal("menuitemradio"),e(S.getAttribute("role")).to.equal("menuitemradio"),await i(n),e(c.selected).to.be.true,e(n.selected).to.be.true,e(u.selected,"second item not selected").to.be.false,e(t.value).to.equal("First"),e(t.selectedItems.length).to.equal(1),e(n.getAttribute("aria-checked")).to.equal("true"),e(u.getAttribute("aria-checked")).to.equal("false"),u.click(),await i(t),await i(n),await i(u),e(n.selected,"first item not selected").to.be.false,e(u.selected).to.be.true,e(n.getAttribute("aria-checked")).to.equal("false"),e(u.getAttribute("aria-checked")).to.equal("true"),e(t.value).to.equal("Second"),e(t.selectedItems.length).to.equal(1),l.click(),await i(t),await i(l),await i(u),e(u.selected,"second item not selected again").to.be.false,e(l.selected).to.be.true,e(u.getAttribute("aria-checked")).to.equal("false"),e(l.getAttribute("aria-checked")).to.equal("true"),e(t.value).to.equal("Inherit1"),e(t.selectedItems.length).to.equal(1),q.click(),await i(d),await i(q),e(l.selected).to.be.true,e(q.selected,"none item not selected").to.be.false,e(t.value).to.equal("Inherit1"),e(t.selectedItems.length).to.equal(1),g.click(),await i(a),await i(c),await i(g),e(c.selected,"first item not selected").to.be.false,e(g.selected).to.be.true,e(l.selected).to.be.true,e(c.getAttribute("aria-checked")).to.equal("false"),e(g.getAttribute("aria-checked")).to.equal("true"),e(t.value).to.equal("Inherit1"),e(t.selectedItems.length).to.equal(1),e(a.selectedItems.length).to.equal(1),r.click(),await i(t),await i(r),e(p.selected).to.be.true,e(r.selected).to.be.true,e(l.selected).to.be.true,e(p.getAttribute("aria-checked")).to.equal("true"),e(r.getAttribute("aria-checked")).to.equal("true"),e(m.selectedItems.length).to.equal(2)}),it("handles changing managed items for selects changes",async()=>{const t=await h(b`
|
|
192
59
|
<sp-menu selects="multiple" value-separator="--">
|
|
193
60
|
<sp-menu-item selected>First</sp-menu-item>
|
|
194
61
|
<sp-menu-item>Second</sp-menu-item>
|
|
@@ -201,36 +68,5 @@ describe("Menu group", () => {
|
|
|
201
68
|
</sp-menu-group>
|
|
202
69
|
</sp-menu-group>
|
|
203
70
|
</sp-menu>
|
|
204
|
-
`);
|
|
205
|
-
await waitUntil(() => managedItems(el).length == 6, `expected outer menu to manage 6 items, manages ${managedItems(el).length}`);
|
|
206
|
-
await waitUntil(() => el.selectedItems.length == 2, "expected 2 selected item");
|
|
207
|
-
await elementUpdated(el);
|
|
208
|
-
const inheritGroup = el.querySelector("sp-menu-group#mg-inherit");
|
|
209
|
-
const inheritItem1 = inheritGroup.querySelector("sp-menu-item:nth-of-type(1)");
|
|
210
|
-
const inheritItem2 = inheritGroup.querySelector("sp-menu-item:nth-of-type(2)");
|
|
211
|
-
const subInheritGroup = el.querySelector("sp-menu-group#mg-sub-inherit");
|
|
212
|
-
const subInheritItem1 = subInheritGroup.querySelector("sp-menu-item:nth-of-type(1)");
|
|
213
|
-
const subInheritItem2 = subInheritGroup.querySelector("sp-menu-item:nth-of-type(2)");
|
|
214
|
-
expect(inheritItem1.getAttribute("role")).to.equal("menuitemcheckbox");
|
|
215
|
-
expect(inheritItem2.getAttribute("role")).to.equal("menuitemcheckbox");
|
|
216
|
-
expect(subInheritItem1.getAttribute("role")).to.equal("menuitemcheckbox");
|
|
217
|
-
expect(subInheritItem2.getAttribute("role")).to.equal("menuitemcheckbox");
|
|
218
|
-
expect(el.value).to.equal("First--SubInherit2");
|
|
219
|
-
expect(el.selectedItems.length).to.equal(2);
|
|
220
|
-
inheritGroup.setAttribute("selects", "single");
|
|
221
|
-
await elementUpdated(inheritGroup);
|
|
222
|
-
await elementUpdated(el);
|
|
223
|
-
await waitUntil(() => {
|
|
224
|
-
return managedItems(inheritGroup).length === 4;
|
|
225
|
-
}, `expected new single sub-group to manage 4 items, received ${managedItems(inheritGroup).length} because "selects === ${inheritGroup.selects}`);
|
|
226
|
-
await waitUntil(() => managedItems(el).length === 2, `expected outer menu to manage 2 items with none inherited, received ${managedItems(el).length}`);
|
|
227
|
-
expect(inheritGroup.value).to.equal("SubInherit2");
|
|
228
|
-
expect(inheritGroup.selectedItems.length).to.equal(1);
|
|
229
|
-
expect(el.value).to.equal("First");
|
|
230
|
-
expect(inheritItem1.getAttribute("role")).to.equal("menuitemradio");
|
|
231
|
-
expect(inheritItem2.getAttribute("role")).to.equal("menuitemradio");
|
|
232
|
-
expect(subInheritItem1.getAttribute("role")).to.equal("menuitemradio");
|
|
233
|
-
expect(subInheritItem2.getAttribute("role")).to.equal("menuitemradio");
|
|
234
|
-
});
|
|
235
|
-
});
|
|
71
|
+
`);await o(()=>s(t).length==6,`expected outer menu to manage 6 items, manages ${s(t).length}`),await o(()=>t.selectedItems.length==2,"expected 2 selected item"),await i(t);const n=t.querySelector("sp-menu-group#mg-inherit"),u=n.querySelector("sp-menu-item:nth-of-type(1)"),m=n.querySelector("sp-menu-item:nth-of-type(2)"),p=t.querySelector("sp-menu-group#mg-sub-inherit"),r=p.querySelector("sp-menu-item:nth-of-type(1)"),a=p.querySelector("sp-menu-item:nth-of-type(2)");e(u.getAttribute("role")).to.equal("menuitemcheckbox"),e(m.getAttribute("role")).to.equal("menuitemcheckbox"),e(r.getAttribute("role")).to.equal("menuitemcheckbox"),e(a.getAttribute("role")).to.equal("menuitemcheckbox"),e(t.value).to.equal("First--SubInherit2"),e(t.selectedItems.length).to.equal(2),n.setAttribute("selects","single"),await i(n),await i(t),await o(()=>s(n).length===4,`expected new single sub-group to manage 4 items, received ${s(n).length} because "selects === ${n.selects}`),await o(()=>s(t).length===2,`expected outer menu to manage 2 items with none inherited, received ${s(t).length}`),e(n.value).to.equal("SubInherit2"),e(n.selectedItems.length).to.equal(1),e(t.value).to.equal("First"),e(u.getAttribute("role")).to.equal("menuitemradio"),e(m.getAttribute("role")).to.equal("menuitemradio"),e(r.getAttribute("role")).to.equal("menuitemradio"),e(a.getAttribute("role")).to.equal("menuitemradio")})});
|
|
236
72
|
//# sourceMappingURL=menu-group.test.js.map
|