@spectrum-web-components/menu 0.15.1-devmode2.0 → 0.16.1
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.dev.js +1 -0
- package/sp-menu-divider.dev.js.map +1 -1
- package/sp-menu-divider.js +1 -2
- package/sp-menu-divider.js.map +2 -2
- package/sp-menu-group.dev.js +1 -0
- package/sp-menu-group.dev.js.map +1 -1
- package/sp-menu-group.js +1 -2
- package/sp-menu-group.js.map +2 -2
- package/sp-menu-item.dev.js +1 -0
- package/sp-menu-item.dev.js.map +1 -1
- package/sp-menu-item.js +1 -2
- package/sp-menu-item.js.map +2 -2
- package/sp-menu.dev.js +1 -0
- package/sp-menu.dev.js.map +1 -1
- package/sp-menu.js +1 -2
- package/sp-menu.js.map +2 -2
- package/src/Menu.dev.js +51 -24
- package/src/Menu.dev.js.map +1 -1
- package/src/Menu.js +2 -493
- package/src/Menu.js.map +2 -2
- package/src/MenuDivider.dev.js +1 -0
- package/src/MenuDivider.dev.js.map +1 -1
- package/src/MenuDivider.js +1 -12
- package/src/MenuDivider.js.map +2 -2
- package/src/MenuGroup.dev.js +4 -3
- package/src/MenuGroup.dev.js.map +1 -1
- package/src/MenuGroup.js +2 -71
- package/src/MenuGroup.js.map +2 -2
- package/src/MenuItem.dev.js +34 -9
- package/src/MenuItem.dev.js.map +2 -2
- package/src/MenuItem.js +7 -406
- package/src/MenuItem.js.map +2 -2
- package/src/index.dev.js +1 -0
- package/src/index.dev.js.map +1 -1
- package/src/index.js +1 -4
- package/src/index.js.map +1 -1
- package/src/menu-divider.css.dev.js +1 -0
- package/src/menu-divider.css.dev.js.map +1 -1
- package/src/menu-divider.css.js +2 -4
- package/src/menu-divider.css.js.map +2 -2
- package/src/menu-group.css.dev.js +1 -0
- package/src/menu-group.css.dev.js.map +1 -1
- package/src/menu-group.css.js +2 -4
- package/src/menu-group.css.js.map +2 -2
- package/src/menu-item.css.dev.js +1 -0
- package/src/menu-item.css.dev.js.map +1 -1
- package/src/menu-item.css.js +2 -4
- package/src/menu-item.css.js.map +2 -2
- package/src/menu.css.dev.js +1 -0
- package/src/menu.css.dev.js.map +1 -1
- package/src/menu.css.js +2 -4
- package/src/menu.css.js.map +2 -2
- package/src/spectrum-checkmark.css.dev.js +1 -0
- package/src/spectrum-checkmark.css.dev.js.map +1 -1
- package/src/spectrum-checkmark.css.js +2 -4
- package/src/spectrum-checkmark.css.js.map +2 -2
- package/src/spectrum-chevron.css.dev.js +1 -0
- package/src/spectrum-chevron.css.dev.js.map +1 -1
- package/src/spectrum-chevron.css.js +2 -4
- package/src/spectrum-chevron.css.js.map +2 -2
- package/src/spectrum-itemLabel.css.dev.js +1 -0
- package/src/spectrum-itemLabel.css.dev.js.map +1 -1
- package/src/spectrum-itemLabel.css.js +2 -4
- package/src/spectrum-itemLabel.css.js.map +2 -2
- package/src/spectrum-menu-divider.css.dev.js +1 -0
- package/src/spectrum-menu-divider.css.dev.js.map +1 -1
- package/src/spectrum-menu-divider.css.js +2 -4
- package/src/spectrum-menu-divider.css.js.map +2 -2
- package/src/spectrum-menu-item.css.dev.js +1 -0
- package/src/spectrum-menu-item.css.dev.js.map +1 -1
- package/src/spectrum-menu-item.css.js +2 -4
- package/src/spectrum-menu-item.css.js.map +2 -2
- package/src/spectrum-menu-sectionHeading.css.dev.js +1 -0
- package/src/spectrum-menu-sectionHeading.css.dev.js.map +1 -1
- package/src/spectrum-menu-sectionHeading.css.js +2 -4
- package/src/spectrum-menu-sectionHeading.css.js.map +2 -2
- package/src/spectrum-menu.css.dev.js +1 -0
- package/src/spectrum-menu.css.dev.js.map +1 -1
- package/src/spectrum-menu.css.js +2 -4
- package/src/spectrum-menu.css.js.map +2 -2
- package/stories/menu-group.stories.js +1 -0
- package/stories/menu-group.stories.js.map +2 -2
- package/stories/menu-item.stories.js +1 -0
- package/stories/menu-item.stories.js.map +1 -1
- package/stories/menu.stories.js +1 -0
- package/stories/menu.stories.js.map +1 -1
- package/stories/submenu.stories.js +10 -3
- package/stories/submenu.stories.js.map +2 -2
- package/test/benchmark/test-basic.js +1 -0
- package/test/benchmark/test-basic.js.map +1 -1
- package/test/menu-group.test-vrt.js +1 -0
- package/test/menu-group.test-vrt.js.map +1 -1
- package/test/menu-group.test.js +130 -43
- package/test/menu-group.test.js.map +1 -1
- package/test/menu-item.test-vrt.js +1 -0
- package/test/menu-item.test-vrt.js.map +1 -1
- package/test/menu-item.test.js +41 -21
- package/test/menu-item.test.js.map +1 -1
- package/test/menu-selects.test.js +17 -8
- package/test/menu-selects.test.js.map +1 -1
- package/test/menu.test-vrt.js +1 -0
- package/test/menu.test-vrt.js.map +1 -1
- package/test/menu.test.js +129 -50
- package/test/menu.test.js.map +1 -1
- package/test/submenu.test-vrt.js +1 -0
- package/test/submenu.test-vrt.js.map +1 -1
- package/test/submenu.test.js +71 -37
- package/test/submenu.test.js.map +1 -1
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["menu-group.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 { MenuGroup } from '@spectrum-web-components/menu';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/popover/sp-popover.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';\n\nexport default {\n component: 'sp-menu',\n title: 'Menu Group',\n};\n\nexport const mixed = (): TemplateResult => {\n let style = 'italic';\n let weight = '700';\n let color = 'blue';\n let decoration = 'overline';\n const styleRules = ({\n style,\n weight,\n color,\n decoration,\n }: {\n style: string;\n weight: string;\n color: string;\n decoration: string;\n }): string => {\n return `\n .style-rule {\n font-weight: ${weight};\n font-style: ${style};\n color: ${color};\n text-decoration: ${decoration};\n }\n `;\n };\n const update = (event: Event): void => {\n const { value, id } = event.target as MenuGroup;\n switch (id) {\n case 'font':\n const values = value.split(',');\n style = values.indexOf('italic') > -1 ? 'italic' : 'normal';\n weight = values.indexOf('bold') > -1 ? '700' : '400';\n break;\n case 'color':\n color = value;\n break;\n case 'decoration':\n decoration = value;\n break;\n }\n (document.querySelector('#output') as HTMLElement).textContent =\n styleRules({\n style,\n weight,\n color,\n decoration,\n });\n };\n return html`\n <style>\n sp-popover {\n position: static;\n float: left;\n }\n </style>\n <sp-popover open>\n <sp-menu label=\"Style/Color\" @change=${update}>\n <sp-menu-group label=\"Font Style\" selects=\"multiple\" id=\"font\">\n <sp-menu-item value=\"bold\" selected>Bold</sp-menu-item>\n <sp-menu-item value=\"italic\" selected>Italic</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group label=\"Text Color\" selects=\"single\" id=\"color\">\n <sp-menu-item value=\"black\">Black</sp-menu-item>\n <sp-menu-item value=\"blue\" selected>Blue</sp-menu-item>\n <sp-menu-item value=\"red\">Red</sp-menu-item>\n <sp-menu-item value=\"green\">Green</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group\n label=\"Text Decoration\"\n selects=\"single\"\n id=\"decoration\"\n >\n <sp-menu-item value=\"none\">None</sp-menu-item>\n <sp-menu-item value=\"overline\" selected>\n Overline\n </sp-menu-item>\n <sp-menu-item value=\"line-through\">\n Line-through\n </sp-menu-item>\n <sp-menu-item value=\"underline\">Underline</sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n </sp-popover>\n <pre\n id=\"output\"\n style=\"font-family: var(--spectrum-alias-body-text-font-family);\"\n >\n ${styleRules({ style, weight, color, decoration })}\n </pre\n >\n `;\n};\n\nexport const inherit = (): TemplateResult => {\n return html`\n <style>\n sp-popover {\n position: static;\n float: left;\n }\n </style>\n <sp-popover open>\n <sp-menu label=\"Groceries\" selects=\"multiple\">\n <sp-menu-group label=\"Juice\" selects=\"inherit\">\n <sp-menu-item selected>Orange</sp-menu-item>\n <sp-menu-item selected>Apple</sp-menu-item>\n <sp-menu-item>Grape</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group label=\"Vegetables\" selects=\"inherit\">\n <sp-menu-item>Carrots</sp-menu-item>\n <sp-menu-item selected>Summer Squash</sp-menu-item>\n <sp-menu-item>Zuccini</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group label=\"Dry Goods\" selects=\"inherit\">\n <sp-menu-item>Ceral</sp-menu-item>\n <sp-menu-item selected>Flour</sp-menu-item>\n <sp-menu-item>Salt</sp-menu-item>\n <sp-menu-item>Sugar</sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n </sp-popover>\n `;\n};\n"],
|
|
5
|
-
"mappings": "AAWA;
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": ";AAWA,SAAS,YAA4B;AAGrC,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAEP,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AACX;AAEO,aAAM,QAAQ,MAAsB;AACvC,MAAI,QAAQ;AACZ,MAAI,SAAS;AACb,MAAI,QAAQ;AACZ,MAAI,aAAa;AACjB,QAAM,aAAa,CAAC;AAAA,IAChB,OAAAA;AAAA,IACA,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,YAAAC;AAAA,EACJ,MAKc;AACV,WAAO;AAAA;AAAA,2BAEYF;AAAA,0BACDD;AAAA,qBACLE;AAAA,+BACUC;AAAA;AAAA;AAAA,EAG3B;AACA,QAAM,SAAS,CAAC,UAAuB;AACnC,UAAM,EAAE,OAAO,GAAG,IAAI,MAAM;AAC5B,YAAQ;AAAA,WACC;AACD,cAAM,SAAS,MAAM,MAAM,GAAG;AAC9B,gBAAQ,OAAO,QAAQ,QAAQ,IAAI,KAAK,WAAW;AACnD,iBAAS,OAAO,QAAQ,MAAM,IAAI,KAAK,QAAQ;AAC/C;AAAA,WACC;AACD,gBAAQ;AACR;AAAA,WACC;AACD,qBAAa;AACb;AAAA;AAER,IAAC,SAAS,cAAc,SAAS,EAAkB,cAC/C,WAAW;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACJ,CAAC;AAAA,EACT;AACA,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mDAQwC;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,cAiCrC,WAAW,EAAE,OAAO,QAAQ,OAAO,WAAW,CAAC;AAAA;AAAA;AAAA;AAI7D;AAEO,aAAM,UAAU,MAAsB;AACzC,SAAO;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;AA8BX;",
|
|
6
|
+
"names": ["style", "weight", "color", "decoration"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["menu-item.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';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';\n\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';\n\nexport default {\n component: 'sp-menu-item',\n title: 'Menu Item',\n};\n\nexport const Default = (): TemplateResult => {\n return html`\n <sp-menu>\n <sp-menu-item>Menu Item</sp-menu-item>\n </sp-menu>\n `;\n};\n\nexport const noWrap = (): TemplateResult => {\n return html`\n <sp-menu style=\"width: 150px;\">\n <sp-menu-item no-wrap>\n Select a Country with a very long label, too long, in fact\n </sp-menu-item>\n </sp-menu>\n `;\n};\n\nexport const valueSlot = (): TemplateResult => {\n /**\n * This story featurs zero width spaces between the characters in the `<kbd>` element.\n * While their absence has not caused issues in the local Storybook, the visual regression\n * suite was causig the `\u2318\u200B` character to display different between the various Menu Items\n * without the intevening zero width space character. When reviewing in the future,\n * `font-variant-ligatures: none` was also not enough to address this situation.\n */\n //\n //\n return html`\n <style>\n kbd {\n font-family: var(--spectrum-alias-body-text-font-family);\n white-space: nowrap;\n }\n </style>\n <sp-menu style=\"width: 150px;\" selects=\"single\">\n <sp-menu-item>\n Save\n <kbd slot=\"value\">\u2318\u200BS</kbd>\n </sp-menu-item>\n <sp-menu-item selected>\n Save As...\n <kbd slot=\"value\">\u21E7\u200B\u2318\u200BS</kbd>\n </sp-menu-item>\n <sp-menu-item disabled>\n Save All\n <kbd slot=\"value\">\u2325\u200B\u2318\u200BS</kbd>\n </sp-menu-item>\n </sp-menu>\n `;\n};\n\nexport const href = (): TemplateResult => {\n return html`\n <sp-menu style=\"width: 150px;\">\n <sp-menu-item\n href=\"https://opensource.adobe.com/spectrum-web-components\"\n >\n <sp-icon-edit slot=\"icon\"></sp-icon-edit>\n Edit the Documentation Site\n </sp-menu-item>\n </sp-menu>\n `;\n};\n"],
|
|
5
|
-
"mappings": "AAWA;
|
|
5
|
+
"mappings": ";AAWA,SAAS,YAA4B;AACrC,OAAO;AAEP,OAAO;AACP,OAAO;AACP,OAAO;AAEP,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AACX;AAEO,aAAM,UAAU,MAAsB;AACzC,SAAO;AAAA;AAAA;AAAA;AAAA;AAKX;AAEO,aAAM,SAAS,MAAsB;AACxC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOX;AAEO,aAAM,YAAY,MAAsB;AAU3C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBX;AAEO,aAAM,OAAO,MAAsB;AACtC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUX;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/stories/menu.stories.js
CHANGED
|
@@ -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,SAAS,YAA4B;AAErC,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAEP,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AACX;AAEO,aAAM,UAAU,MAAsB;AACzC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBX;AAEO,aAAM,eAAe,MAAsB;AAC9C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBX;AAEO,aAAM,iBAAiB,MAAsB;AAChD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBX;AACO,aAAM,kBAAkB,MAAsB;AACjD,SAAO;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;AA4BX;AAEA,gBAAgB,YAAY;AAErB,aAAM,WAAW,MAAsB;AAC1C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBX;AAEO,aAAM,mBAAmB,MAAsB;AAClD,SAAO;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;AAmCX;AAEO,aAAM,kBAAkB,MAAsB;AACjD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaX;AAEO,aAAM,2BAA2B,MAAsB;AAC1D,SAAO;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;AAmCX;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
import { html, render } from "@spectrum-web-components/base";
|
|
2
3
|
import "@spectrum-web-components/action-menu/sp-action-menu.js";
|
|
3
4
|
import "@spectrum-web-components/menu/sp-menu-item.js";
|
|
@@ -26,7 +27,9 @@ class SubmenuReady extends HTMLElement {
|
|
|
26
27
|
submenu2.addEventListener("sp-opened", this.handleSubmenuOpened, {
|
|
27
28
|
once: true
|
|
28
29
|
});
|
|
29
|
-
submenu2.dispatchEvent(
|
|
30
|
+
submenu2.dispatchEvent(
|
|
31
|
+
new PointerEvent("pointerenter", { bubbles: true, composed: true })
|
|
32
|
+
);
|
|
30
33
|
};
|
|
31
34
|
this.handleSubmenuOpened = async (event) => {
|
|
32
35
|
await nextFrame();
|
|
@@ -38,7 +41,9 @@ class SubmenuReady extends HTMLElement {
|
|
|
38
41
|
submenu2.addEventListener("sp-opened", this.handleSubmenuChildOpened, {
|
|
39
42
|
once: true
|
|
40
43
|
});
|
|
41
|
-
submenu2.dispatchEvent(
|
|
44
|
+
submenu2.dispatchEvent(
|
|
45
|
+
new PointerEvent("pointerenter", { bubbles: true, composed: true })
|
|
46
|
+
);
|
|
42
47
|
};
|
|
43
48
|
this.handleSubmenuChildOpened = async (event) => {
|
|
44
49
|
await nextFrame();
|
|
@@ -169,7 +174,9 @@ export const contextMenu = () => {
|
|
|
169
174
|
style="max-width: 33vw;"
|
|
170
175
|
@click=${(event) => {
|
|
171
176
|
var _a;
|
|
172
|
-
return (_a = event.target) == null ? void 0 : _a.dispatchEvent(
|
|
177
|
+
return (_a = event.target) == null ? void 0 : _a.dispatchEvent(
|
|
178
|
+
new Event("close", { bubbles: true })
|
|
179
|
+
);
|
|
173
180
|
}}
|
|
174
181
|
>
|
|
175
182
|
<sp-menu @change=${handleRootChange}>
|
|
@@ -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;
|
|
6
|
-
"names": []
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["submenu"]
|
|
7
7
|
}
|
|
@@ -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,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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -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,YAAY,aAAa;AACzB,SAAS,sBAAsB;AAE/B,eAAe,oBAAoB,OAAO;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/test/menu-group.test.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
import "@spectrum-web-components/menu/sp-menu-group.js";
|
|
2
3
|
import "@spectrum-web-components/menu/sp-menu.js";
|
|
3
4
|
import "@spectrum-web-components/menu/sp-menu-item.js";
|
|
@@ -12,10 +13,14 @@ import {
|
|
|
12
13
|
} from "@open-wc/testing";
|
|
13
14
|
import { testForLitDevWarnings } from "../../../test/testing-helpers.js";
|
|
14
15
|
const managedItems = (menu) => {
|
|
15
|
-
return menu.childItems.filter(
|
|
16
|
+
return menu.childItems.filter(
|
|
17
|
+
(item) => item.menuData.selectionRoot === menu
|
|
18
|
+
);
|
|
16
19
|
};
|
|
17
20
|
describe("Menu group", () => {
|
|
18
|
-
testForLitDevWarnings(
|
|
21
|
+
testForLitDevWarnings(
|
|
22
|
+
async () => await fixture(
|
|
23
|
+
html`
|
|
19
24
|
<sp-menu selects="single">
|
|
20
25
|
<sp-menu-group selects="inherit">
|
|
21
26
|
<span slot="header">Section Heading</span>
|
|
@@ -30,9 +35,12 @@ describe("Menu group", () => {
|
|
|
30
35
|
<sp-menu-item disabled>Download</sp-menu-item>
|
|
31
36
|
</sp-menu-group>
|
|
32
37
|
</sp-menu>
|
|
33
|
-
`
|
|
38
|
+
`
|
|
39
|
+
)
|
|
40
|
+
);
|
|
34
41
|
it("renders", async () => {
|
|
35
|
-
const el = await fixture(
|
|
42
|
+
const el = await fixture(
|
|
43
|
+
html`
|
|
36
44
|
<sp-menu selects="single">
|
|
37
45
|
<sp-menu-group selects="inherit">
|
|
38
46
|
<span slot="header">Section Heading</span>
|
|
@@ -47,7 +55,8 @@ describe("Menu group", () => {
|
|
|
47
55
|
<sp-menu-item disabled>Download</sp-menu-item>
|
|
48
56
|
</sp-menu-group>
|
|
49
57
|
</sp-menu>
|
|
50
|
-
`
|
|
58
|
+
`
|
|
59
|
+
);
|
|
51
60
|
await waitUntil(() => {
|
|
52
61
|
return managedItems(el).length === 5;
|
|
53
62
|
}, `expected menu group to manage 5 children, received ${managedItems(el).length} of ${el.childItems.length}`);
|
|
@@ -55,11 +64,15 @@ describe("Menu group", () => {
|
|
|
55
64
|
await expect(el).to.be.accessible();
|
|
56
65
|
});
|
|
57
66
|
it('manages [slot="header"] content', async () => {
|
|
58
|
-
const el = await fixture(
|
|
67
|
+
const el = await fixture(
|
|
68
|
+
html`
|
|
59
69
|
<sp-menu-group></sp-menu-group>
|
|
60
|
-
`
|
|
70
|
+
`
|
|
71
|
+
);
|
|
61
72
|
await elementUpdated(el);
|
|
62
|
-
const slot = el.shadowRoot.querySelector(
|
|
73
|
+
const slot = el.shadowRoot.querySelector(
|
|
74
|
+
'[name="header"'
|
|
75
|
+
);
|
|
63
76
|
const header = document.createElement("span");
|
|
64
77
|
header.textContent = "Header";
|
|
65
78
|
header.slot = "header";
|
|
@@ -67,14 +80,17 @@ describe("Menu group", () => {
|
|
|
67
80
|
let slotchanged = oneEvent(slot, "slotchange");
|
|
68
81
|
el.append(header);
|
|
69
82
|
await slotchanged;
|
|
70
|
-
expect(header.id).to.equal(
|
|
83
|
+
expect(header.id).to.equal(
|
|
84
|
+
el.headerId
|
|
85
|
+
);
|
|
71
86
|
slotchanged = oneEvent(slot, "slotchange");
|
|
72
87
|
header.remove();
|
|
73
88
|
await slotchanged;
|
|
74
89
|
expect(header.id).to.equal("");
|
|
75
90
|
});
|
|
76
91
|
it("handles selects for nested menu groups", async () => {
|
|
77
|
-
const el = await fixture(
|
|
92
|
+
const el = await fixture(
|
|
93
|
+
html`
|
|
78
94
|
<sp-menu selects="single">
|
|
79
95
|
<sp-menu-item selected>First</sp-menu-item>
|
|
80
96
|
<sp-menu-item>Second</sp-menu-item>
|
|
@@ -99,27 +115,71 @@ describe("Menu group", () => {
|
|
|
99
115
|
<sp-menu-item>Inherit2</sp-menu-item>
|
|
100
116
|
</sp-menu-group>
|
|
101
117
|
</sp-menu>
|
|
102
|
-
`
|
|
103
|
-
|
|
104
|
-
await waitUntil(
|
|
118
|
+
`
|
|
119
|
+
);
|
|
120
|
+
await waitUntil(
|
|
121
|
+
() => managedItems(el).length === 4,
|
|
122
|
+
`expected outer menu to manage 4 items (2 are inherited), got ${managedItems(el).length}, with ${el.childItems.length} total`
|
|
123
|
+
);
|
|
124
|
+
await waitUntil(
|
|
125
|
+
() => el.selectedItems.length === 1,
|
|
126
|
+
"expected 1 selected item"
|
|
127
|
+
);
|
|
105
128
|
await elementUpdated(el);
|
|
106
|
-
const firstItem = el.querySelector(
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
const
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
const
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
const
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
129
|
+
const firstItem = el.querySelector(
|
|
130
|
+
"sp-menu-item:nth-of-type(1)"
|
|
131
|
+
);
|
|
132
|
+
const secondItem = el.querySelector(
|
|
133
|
+
"sp-menu-item:nth-of-type(2)"
|
|
134
|
+
);
|
|
135
|
+
const multiGroup = el.querySelector(
|
|
136
|
+
"sp-menu-group#mg-multi"
|
|
137
|
+
);
|
|
138
|
+
const multiItem1 = multiGroup.querySelector(
|
|
139
|
+
"sp-menu-item:nth-of-type(1)"
|
|
140
|
+
);
|
|
141
|
+
const multiItem2 = multiGroup.querySelector(
|
|
142
|
+
"sp-menu-item:nth-of-type(2)"
|
|
143
|
+
);
|
|
144
|
+
await waitUntil(
|
|
145
|
+
() => managedItems(multiGroup).length === 4,
|
|
146
|
+
`selects="#mg-multi should manage 4 items (2 are inherited), received ${managedItems(multiGroup).length}`
|
|
147
|
+
);
|
|
148
|
+
const singleGroup = el.querySelector(
|
|
149
|
+
"sp-menu-group#mg-single"
|
|
150
|
+
);
|
|
151
|
+
const singleItem1 = singleGroup.querySelector(
|
|
152
|
+
"sp-menu-item:nth-of-type(1)"
|
|
153
|
+
);
|
|
154
|
+
const singleItem2 = singleGroup.querySelector(
|
|
155
|
+
"sp-menu-item:nth-of-type(2)"
|
|
156
|
+
);
|
|
157
|
+
await waitUntil(
|
|
158
|
+
() => managedItems(singleGroup).length === 2,
|
|
159
|
+
'selects="#mg-none should manage 4 items (2 are inherited)'
|
|
160
|
+
);
|
|
161
|
+
const noneGroup = el.querySelector(
|
|
162
|
+
"sp-menu-group#mg-none"
|
|
163
|
+
);
|
|
164
|
+
const noneItem1 = noneGroup.querySelector(
|
|
165
|
+
"sp-menu-item:nth-of-type(1)"
|
|
166
|
+
);
|
|
167
|
+
const noneItem2 = noneGroup.querySelector(
|
|
168
|
+
"sp-menu-item:nth-of-type(2)"
|
|
169
|
+
);
|
|
170
|
+
await waitUntil(
|
|
171
|
+
() => managedItems(noneGroup).length === 2,
|
|
172
|
+
`selects="#mg-none" should manage 2 items, received ${managedItems(noneGroup).length}`
|
|
173
|
+
);
|
|
174
|
+
const inheritGroup = el.querySelector(
|
|
175
|
+
"sp-menu-group#mg-inherit"
|
|
176
|
+
);
|
|
177
|
+
const inheritItem1 = inheritGroup.querySelector(
|
|
178
|
+
"sp-menu-item:nth-of-type(1)"
|
|
179
|
+
);
|
|
180
|
+
const inheritItem2 = inheritGroup.querySelector(
|
|
181
|
+
"sp-menu-item:nth-of-type(2)"
|
|
182
|
+
);
|
|
123
183
|
expect(firstItem.getAttribute("role")).to.equal("menuitemradio");
|
|
124
184
|
expect(secondItem.getAttribute("role")).to.equal("menuitemradio");
|
|
125
185
|
expect(multiItem1.getAttribute("role")).to.equal("menuitemcheckbox");
|
|
@@ -188,7 +248,8 @@ describe("Menu group", () => {
|
|
|
188
248
|
expect(multiGroup.selectedItems.length).to.equal(2);
|
|
189
249
|
});
|
|
190
250
|
it("handles changing managed items for selects changes", async () => {
|
|
191
|
-
const el = await fixture(
|
|
251
|
+
const el = await fixture(
|
|
252
|
+
html`
|
|
192
253
|
<sp-menu selects="multiple" value-separator="--">
|
|
193
254
|
<sp-menu-item selected>First</sp-menu-item>
|
|
194
255
|
<sp-menu-item>Second</sp-menu-item>
|
|
@@ -201,20 +262,43 @@ describe("Menu group", () => {
|
|
|
201
262
|
</sp-menu-group>
|
|
202
263
|
</sp-menu-group>
|
|
203
264
|
</sp-menu>
|
|
204
|
-
`
|
|
205
|
-
|
|
206
|
-
await waitUntil(
|
|
265
|
+
`
|
|
266
|
+
);
|
|
267
|
+
await waitUntil(
|
|
268
|
+
() => managedItems(el).length == 6,
|
|
269
|
+
`expected outer menu to manage 6 items, manages ${managedItems(el).length}`
|
|
270
|
+
);
|
|
271
|
+
await waitUntil(
|
|
272
|
+
() => el.selectedItems.length == 2,
|
|
273
|
+
"expected 2 selected item"
|
|
274
|
+
);
|
|
207
275
|
await elementUpdated(el);
|
|
208
|
-
const inheritGroup = el.querySelector(
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
const
|
|
212
|
-
|
|
213
|
-
|
|
276
|
+
const inheritGroup = el.querySelector(
|
|
277
|
+
"sp-menu-group#mg-inherit"
|
|
278
|
+
);
|
|
279
|
+
const inheritItem1 = inheritGroup.querySelector(
|
|
280
|
+
"sp-menu-item:nth-of-type(1)"
|
|
281
|
+
);
|
|
282
|
+
const inheritItem2 = inheritGroup.querySelector(
|
|
283
|
+
"sp-menu-item:nth-of-type(2)"
|
|
284
|
+
);
|
|
285
|
+
const subInheritGroup = el.querySelector(
|
|
286
|
+
"sp-menu-group#mg-sub-inherit"
|
|
287
|
+
);
|
|
288
|
+
const subInheritItem1 = subInheritGroup.querySelector(
|
|
289
|
+
"sp-menu-item:nth-of-type(1)"
|
|
290
|
+
);
|
|
291
|
+
const subInheritItem2 = subInheritGroup.querySelector(
|
|
292
|
+
"sp-menu-item:nth-of-type(2)"
|
|
293
|
+
);
|
|
214
294
|
expect(inheritItem1.getAttribute("role")).to.equal("menuitemcheckbox");
|
|
215
295
|
expect(inheritItem2.getAttribute("role")).to.equal("menuitemcheckbox");
|
|
216
|
-
expect(subInheritItem1.getAttribute("role")).to.equal(
|
|
217
|
-
|
|
296
|
+
expect(subInheritItem1.getAttribute("role")).to.equal(
|
|
297
|
+
"menuitemcheckbox"
|
|
298
|
+
);
|
|
299
|
+
expect(subInheritItem2.getAttribute("role")).to.equal(
|
|
300
|
+
"menuitemcheckbox"
|
|
301
|
+
);
|
|
218
302
|
expect(el.value).to.equal("First--SubInherit2");
|
|
219
303
|
expect(el.selectedItems.length).to.equal(2);
|
|
220
304
|
inheritGroup.setAttribute("selects", "single");
|
|
@@ -223,7 +307,10 @@ describe("Menu group", () => {
|
|
|
223
307
|
await waitUntil(() => {
|
|
224
308
|
return managedItems(inheritGroup).length === 4;
|
|
225
309
|
}, `expected new single sub-group to manage 4 items, received ${managedItems(inheritGroup).length} because "selects === ${inheritGroup.selects}`);
|
|
226
|
-
await waitUntil(
|
|
310
|
+
await waitUntil(
|
|
311
|
+
() => managedItems(el).length === 2,
|
|
312
|
+
`expected outer menu to manage 2 items with none inherited, received ${managedItems(el).length}`
|
|
313
|
+
);
|
|
227
314
|
expect(inheritGroup.value).to.equal("SubInherit2");
|
|
228
315
|
expect(inheritGroup.selectedItems.length).to.equal(1);
|
|
229
316
|
expect(el.value).to.equal("First");
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["menu-group.test.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 '@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"],
|
|
5
|
-
"mappings": "AAWA;
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["menu-item.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-item.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('MenuItemStories', stories);\n"],
|
|
5
|
-
"mappings": "AAYA;
|
|
5
|
+
"mappings": ";AAYA,YAAY,aAAa;AACzB,SAAS,sBAAsB;AAE/B,eAAe,mBAAmB,OAAO;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|