@spectrum-web-components/menu 0.32.1-overlay.41 → 0.33.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.
Files changed (35) hide show
  1. package/custom-elements.json +264 -471
  2. package/package.json +9 -9
  3. package/src/Menu.d.ts +7 -16
  4. package/src/Menu.dev.js +73 -169
  5. package/src/Menu.dev.js.map +2 -2
  6. package/src/Menu.js +3 -7
  7. package/src/Menu.js.map +3 -3
  8. package/src/MenuGroup.d.ts +2 -0
  9. package/src/MenuGroup.dev.js +11 -11
  10. package/src/MenuGroup.dev.js.map +2 -2
  11. package/src/MenuGroup.js +6 -8
  12. package/src/MenuGroup.js.map +3 -3
  13. package/src/MenuItem.d.ts +22 -24
  14. package/src/MenuItem.dev.js +150 -132
  15. package/src/MenuItem.dev.js.map +3 -3
  16. package/src/MenuItem.js +15 -35
  17. package/src/MenuItem.js.map +3 -3
  18. package/src/menu-item.css.dev.js +1 -1
  19. package/src/menu-item.css.dev.js.map +1 -1
  20. package/src/menu-item.css.js +1 -1
  21. package/src/menu-item.css.js.map +1 -1
  22. package/src/menu.css.dev.js +1 -1
  23. package/src/menu.css.dev.js.map +1 -1
  24. package/src/menu.css.js +1 -1
  25. package/src/menu.css.js.map +1 -1
  26. package/stories/submenu.stories.js +21 -28
  27. package/stories/submenu.stories.js.map +3 -3
  28. package/test/menu-group.test.js +1 -14
  29. package/test/menu-group.test.js.map +2 -2
  30. package/test/menu-selects.test.js +1 -3
  31. package/test/menu-selects.test.js.map +2 -2
  32. package/test/menu.test.js +0 -7
  33. package/test/menu.test.js.map +2 -2
  34. package/test/submenu.test.js +83 -198
  35. package/test/submenu.test.js.map +2 -2
package/src/menu.css.dev.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["menu.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2023 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 { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-menu-margin-x:var(--spectrum-global-dimension-size-40);--spectrum-listitem-texticon-heading-text-size:var(\n--spectrum-global-dimension-font-size-50\n);--spectrum-listitem-texticon-heading-text-font-weight:400;--spectrum-listitem-texticon-heading-text-transform:uppercase;--spectrum-listitem-texticon-heading-letter-spacing:0.06em;--spectrum-listitem-texticon-heading-margin:var(\n--spectrum-global-dimension-size-75\n) 0 0 0;--spectrum-listitem-texticon-heading-padding:0 var(--spectrum-global-dimension-size-450) 0 var(--spectrum-global-dimension-size-150);--spectrum-listitem-texticon-padding-y:var(\n--spectrum-global-dimension-size-85\n);--spectrum-listitem-texticon-selectable-padding-right:calc(var(--spectrum-listitem-texticon-ui-icon-width) + var(--spectrum-listitem-texticon-ui-icon-gap) + var(--spectrum-listitem-texticon-padding-right) - var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n));--spectrum-listitem-texticon-label-line-height:1.3;--spectrum-listitem-texticon-heading-line-height:var(\n--spectrum-alias-body-text-line-height,var(--spectrum-global-font-line-height-medium)\n)}:host{--spectrum-listitem-texticon-padding-left:var(\n--spectrum-listitem-m-texticon-padding-left\n);--spectrum-listitem-textthumbnail-padding-left:var(\n--spectrum-listitem-m-textthumbnail-padding-left\n);--spectrum-listitem-texticon-text-size:var(\n--spectrum-listitem-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-listitem-texticon-text-font-weight:var(\n--spectrum-listitem-m-texticon-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-listitem-texticon-icon-gap:var(\n--spectrum-listitem-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-listitem-texticon-divider-padding:var(\n--spectrum-listitem-m-texticon-divider-padding,var(--spectrum-global-dimension-static-size-40)\n);--spectrum-listitem-texticon-ui-icon-margin-top:var(\n--spectrum-listitem-m-texticon-ui-icon-margin-top,var(--spectrum-global-dimension-size-125)\n);--spectrum-listitem-texticon-ui-icon-width:var(\n--spectrum-listitem-m-texticon-ui-icon-width,var(--spectrum-alias-ui-icon-checkmark-size-100)\n);--spectrum-listitem-texticon-ui-icon-gap:var(\n--spectrum-listitem-m-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-listitem-texticon-padding-right:var(\n--spectrum-listitem-m-texticon-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-listitem-texticon-focus-indicator-size:var(\n--spectrum-listitem-m-texticon-focus-indicator-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-listitem-texticon-height:var(\n--spectrum-listitem-m-texticon-height,var(--spectrum-global-dimension-size-400)\n)}:host{box-sizing:border-box;display:inline-block;list-style-type:none;margin-bottom:var(\n--spectrum-popover-padding-y,var(--spectrum-global-dimension-size-50)\n);margin-left:0;margin-right:0;margin-top:var(\n--spectrum-popover-padding-y,var(--spectrum-global-dimension-size-50)\n);overflow:auto;padding:0}:host([dir=ltr][selects]) ::slotted(sp-menu-item){padding-right:var(--spectrum-listitem-texticon-selectable-padding-right)}:host([dir=rtl][selects]) ::slotted(sp-menu-item){padding-left:var(--spectrum-listitem-texticon-selectable-padding-right)}:host([dir=ltr][selects]) ::slotted(sp-menu-item[selected]){padding-right:calc(var(--spectrum-listitem-texticon-padding-right) - var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))}:host([dir=rtl][selects]) ::slotted(sp-menu-item[selected]){padding-left:calc(var(--spectrum-listitem-texticon-padding-right) - var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))}:host{--spectrum-listheading-text-color:var(--spectrum-global-color-gray-700)}:host{background-color:var(\n--spectrum-listitem-m-texticon-background-color,var(--spectrum-alias-background-color-transparent)\n)}:host{--spectrum-listitem-selectable-padding-right:calc(var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-listitem-icon-gap));display:inline-flex;flex-direction:column}:host(:focus){outline:none}::slotted(*){flex-shrink:0}\n`;\nexport default styles;"],
4
+ "sourcesContent": ["/*\nCopyright 2023 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 { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-menu-margin-x:var(--spectrum-global-dimension-size-40);--spectrum-listitem-texticon-heading-text-size:var(\n--spectrum-global-dimension-font-size-50\n);--spectrum-listitem-texticon-heading-text-font-weight:400;--spectrum-listitem-texticon-heading-text-transform:uppercase;--spectrum-listitem-texticon-heading-letter-spacing:0.06em;--spectrum-listitem-texticon-heading-margin:var(\n--spectrum-global-dimension-size-75\n) 0 0 0;--spectrum-listitem-texticon-heading-padding:0 var(--spectrum-global-dimension-size-450) 0 var(--spectrum-global-dimension-size-150);--spectrum-listitem-texticon-padding-y:var(\n--spectrum-global-dimension-size-85\n);--spectrum-listitem-texticon-selectable-padding-right:calc(var(--spectrum-listitem-texticon-ui-icon-width) + var(--spectrum-listitem-texticon-ui-icon-gap) + var(--spectrum-listitem-texticon-padding-right) - var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n));--spectrum-listitem-texticon-label-line-height:1.3;--spectrum-listitem-texticon-heading-line-height:var(\n--spectrum-alias-body-text-line-height,var(--spectrum-global-font-line-height-medium)\n)}:host{--spectrum-listitem-texticon-padding-left:var(\n--spectrum-listitem-m-texticon-padding-left\n);--spectrum-listitem-textthumbnail-padding-left:var(\n--spectrum-listitem-m-textthumbnail-padding-left\n);--spectrum-listitem-texticon-text-size:var(\n--spectrum-listitem-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-listitem-texticon-text-font-weight:var(\n--spectrum-listitem-m-texticon-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-listitem-texticon-icon-gap:var(\n--spectrum-listitem-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-listitem-texticon-divider-padding:var(\n--spectrum-listitem-m-texticon-divider-padding,var(--spectrum-global-dimension-static-size-40)\n);--spectrum-listitem-texticon-ui-icon-margin-top:var(\n--spectrum-listitem-m-texticon-ui-icon-margin-top,var(--spectrum-global-dimension-size-125)\n);--spectrum-listitem-texticon-ui-icon-width:var(\n--spectrum-listitem-m-texticon-ui-icon-width,var(--spectrum-alias-ui-icon-checkmark-size-100)\n);--spectrum-listitem-texticon-ui-icon-gap:var(\n--spectrum-listitem-m-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-listitem-texticon-padding-right:var(\n--spectrum-listitem-m-texticon-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-listitem-texticon-focus-indicator-size:var(\n--spectrum-listitem-m-texticon-focus-indicator-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-listitem-texticon-height:var(\n--spectrum-listitem-m-texticon-height,var(--spectrum-global-dimension-size-400)\n)}:host{box-sizing:border-box;display:inline-block;list-style-type:none;margin-bottom:var(\n--spectrum-popover-padding-y,var(--spectrum-global-dimension-size-50)\n);margin-left:0;margin-right:0;margin-top:var(\n--spectrum-popover-padding-y,var(--spectrum-global-dimension-size-50)\n);overflow:auto;padding:0}:host([dir=ltr][selects]) ::slotted(sp-menu-item){padding-right:var(--spectrum-listitem-texticon-selectable-padding-right)}:host([dir=rtl][selects]) ::slotted(sp-menu-item){padding-left:var(--spectrum-listitem-texticon-selectable-padding-right)}:host([dir=ltr][selects]) ::slotted(sp-menu-item[selected]){padding-right:calc(var(--spectrum-listitem-texticon-padding-right) - var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))}:host([dir=rtl][selects]) ::slotted(sp-menu-item[selected]){padding-left:calc(var(--spectrum-listitem-texticon-padding-right) - var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))}:host{--spectrum-listheading-text-color:var(--spectrum-global-color-gray-700)}:host{background-color:var(\n--spectrum-listitem-m-texticon-background-color,var(--spectrum-alias-background-color-transparent)\n)}:host{--spectrum-listitem-selectable-padding-right:calc(var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-listitem-icon-gap));display:inline-flex;flex-direction:column;width:var(--swc-menu-width)}:host(:focus){outline:none}::slotted(*){--swc-menu-width:100%;flex-shrink:0}\n`;\nexport default styles;"],
5
5
  "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkDf,eAAe;",
6
6
  "names": []
7
7
  }
package/src/menu.css.js CHANGED
@@ -46,6 +46,6 @@ var(--spectrum-alias-border-size-thin)
46
46
  var(--spectrum-alias-border-size-thin)
47
47
  ))}:host{--spectrum-listheading-text-color:var(--spectrum-global-color-gray-700)}:host{background-color:var(
48
48
  --spectrum-listitem-m-texticon-background-color,var(--spectrum-alias-background-color-transparent)
49
- )}:host{--spectrum-listitem-selectable-padding-right:calc(var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-listitem-icon-gap));display:inline-flex;flex-direction:column}:host(:focus){outline:none}::slotted(*){flex-shrink:0}
49
+ )}:host{--spectrum-listitem-selectable-padding-right:calc(var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-listitem-icon-gap));display:inline-flex;flex-direction:column;width:var(--swc-menu-width)}:host(:focus){outline:none}::slotted(*){--swc-menu-width:100%;flex-shrink:0}
50
50
  `;export default i;
51
51
  //# sourceMappingURL=menu.css.js.map
package/src/menu.css.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["menu.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2023 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 { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-menu-margin-x:var(--spectrum-global-dimension-size-40);--spectrum-listitem-texticon-heading-text-size:var(\n--spectrum-global-dimension-font-size-50\n);--spectrum-listitem-texticon-heading-text-font-weight:400;--spectrum-listitem-texticon-heading-text-transform:uppercase;--spectrum-listitem-texticon-heading-letter-spacing:0.06em;--spectrum-listitem-texticon-heading-margin:var(\n--spectrum-global-dimension-size-75\n) 0 0 0;--spectrum-listitem-texticon-heading-padding:0 var(--spectrum-global-dimension-size-450) 0 var(--spectrum-global-dimension-size-150);--spectrum-listitem-texticon-padding-y:var(\n--spectrum-global-dimension-size-85\n);--spectrum-listitem-texticon-selectable-padding-right:calc(var(--spectrum-listitem-texticon-ui-icon-width) + var(--spectrum-listitem-texticon-ui-icon-gap) + var(--spectrum-listitem-texticon-padding-right) - var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n));--spectrum-listitem-texticon-label-line-height:1.3;--spectrum-listitem-texticon-heading-line-height:var(\n--spectrum-alias-body-text-line-height,var(--spectrum-global-font-line-height-medium)\n)}:host{--spectrum-listitem-texticon-padding-left:var(\n--spectrum-listitem-m-texticon-padding-left\n);--spectrum-listitem-textthumbnail-padding-left:var(\n--spectrum-listitem-m-textthumbnail-padding-left\n);--spectrum-listitem-texticon-text-size:var(\n--spectrum-listitem-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-listitem-texticon-text-font-weight:var(\n--spectrum-listitem-m-texticon-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-listitem-texticon-icon-gap:var(\n--spectrum-listitem-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-listitem-texticon-divider-padding:var(\n--spectrum-listitem-m-texticon-divider-padding,var(--spectrum-global-dimension-static-size-40)\n);--spectrum-listitem-texticon-ui-icon-margin-top:var(\n--spectrum-listitem-m-texticon-ui-icon-margin-top,var(--spectrum-global-dimension-size-125)\n);--spectrum-listitem-texticon-ui-icon-width:var(\n--spectrum-listitem-m-texticon-ui-icon-width,var(--spectrum-alias-ui-icon-checkmark-size-100)\n);--spectrum-listitem-texticon-ui-icon-gap:var(\n--spectrum-listitem-m-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-listitem-texticon-padding-right:var(\n--spectrum-listitem-m-texticon-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-listitem-texticon-focus-indicator-size:var(\n--spectrum-listitem-m-texticon-focus-indicator-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-listitem-texticon-height:var(\n--spectrum-listitem-m-texticon-height,var(--spectrum-global-dimension-size-400)\n)}:host{box-sizing:border-box;display:inline-block;list-style-type:none;margin-bottom:var(\n--spectrum-popover-padding-y,var(--spectrum-global-dimension-size-50)\n);margin-left:0;margin-right:0;margin-top:var(\n--spectrum-popover-padding-y,var(--spectrum-global-dimension-size-50)\n);overflow:auto;padding:0}:host([dir=ltr][selects]) ::slotted(sp-menu-item){padding-right:var(--spectrum-listitem-texticon-selectable-padding-right)}:host([dir=rtl][selects]) ::slotted(sp-menu-item){padding-left:var(--spectrum-listitem-texticon-selectable-padding-right)}:host([dir=ltr][selects]) ::slotted(sp-menu-item[selected]){padding-right:calc(var(--spectrum-listitem-texticon-padding-right) - var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))}:host([dir=rtl][selects]) ::slotted(sp-menu-item[selected]){padding-left:calc(var(--spectrum-listitem-texticon-padding-right) - var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))}:host{--spectrum-listheading-text-color:var(--spectrum-global-color-gray-700)}:host{background-color:var(\n--spectrum-listitem-m-texticon-background-color,var(--spectrum-alias-background-color-transparent)\n)}:host{--spectrum-listitem-selectable-padding-right:calc(var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-listitem-icon-gap));display:inline-flex;flex-direction:column}:host(:focus){outline:none}::slotted(*){flex-shrink:0}\n`;\nexport default styles;"],
4
+ "sourcesContent": ["/*\nCopyright 2023 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 { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-menu-margin-x:var(--spectrum-global-dimension-size-40);--spectrum-listitem-texticon-heading-text-size:var(\n--spectrum-global-dimension-font-size-50\n);--spectrum-listitem-texticon-heading-text-font-weight:400;--spectrum-listitem-texticon-heading-text-transform:uppercase;--spectrum-listitem-texticon-heading-letter-spacing:0.06em;--spectrum-listitem-texticon-heading-margin:var(\n--spectrum-global-dimension-size-75\n) 0 0 0;--spectrum-listitem-texticon-heading-padding:0 var(--spectrum-global-dimension-size-450) 0 var(--spectrum-global-dimension-size-150);--spectrum-listitem-texticon-padding-y:var(\n--spectrum-global-dimension-size-85\n);--spectrum-listitem-texticon-selectable-padding-right:calc(var(--spectrum-listitem-texticon-ui-icon-width) + var(--spectrum-listitem-texticon-ui-icon-gap) + var(--spectrum-listitem-texticon-padding-right) - var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n));--spectrum-listitem-texticon-label-line-height:1.3;--spectrum-listitem-texticon-heading-line-height:var(\n--spectrum-alias-body-text-line-height,var(--spectrum-global-font-line-height-medium)\n)}:host{--spectrum-listitem-texticon-padding-left:var(\n--spectrum-listitem-m-texticon-padding-left\n);--spectrum-listitem-textthumbnail-padding-left:var(\n--spectrum-listitem-m-textthumbnail-padding-left\n);--spectrum-listitem-texticon-text-size:var(\n--spectrum-listitem-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-listitem-texticon-text-font-weight:var(\n--spectrum-listitem-m-texticon-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-listitem-texticon-icon-gap:var(\n--spectrum-listitem-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-listitem-texticon-divider-padding:var(\n--spectrum-listitem-m-texticon-divider-padding,var(--spectrum-global-dimension-static-size-40)\n);--spectrum-listitem-texticon-ui-icon-margin-top:var(\n--spectrum-listitem-m-texticon-ui-icon-margin-top,var(--spectrum-global-dimension-size-125)\n);--spectrum-listitem-texticon-ui-icon-width:var(\n--spectrum-listitem-m-texticon-ui-icon-width,var(--spectrum-alias-ui-icon-checkmark-size-100)\n);--spectrum-listitem-texticon-ui-icon-gap:var(\n--spectrum-listitem-m-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-listitem-texticon-padding-right:var(\n--spectrum-listitem-m-texticon-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-listitem-texticon-focus-indicator-size:var(\n--spectrum-listitem-m-texticon-focus-indicator-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-listitem-texticon-height:var(\n--spectrum-listitem-m-texticon-height,var(--spectrum-global-dimension-size-400)\n)}:host{box-sizing:border-box;display:inline-block;list-style-type:none;margin-bottom:var(\n--spectrum-popover-padding-y,var(--spectrum-global-dimension-size-50)\n);margin-left:0;margin-right:0;margin-top:var(\n--spectrum-popover-padding-y,var(--spectrum-global-dimension-size-50)\n);overflow:auto;padding:0}:host([dir=ltr][selects]) ::slotted(sp-menu-item){padding-right:var(--spectrum-listitem-texticon-selectable-padding-right)}:host([dir=rtl][selects]) ::slotted(sp-menu-item){padding-left:var(--spectrum-listitem-texticon-selectable-padding-right)}:host([dir=ltr][selects]) ::slotted(sp-menu-item[selected]){padding-right:calc(var(--spectrum-listitem-texticon-padding-right) - var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))}:host([dir=rtl][selects]) ::slotted(sp-menu-item[selected]){padding-left:calc(var(--spectrum-listitem-texticon-padding-right) - var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))}:host{--spectrum-listheading-text-color:var(--spectrum-global-color-gray-700)}:host{background-color:var(\n--spectrum-listitem-m-texticon-background-color,var(--spectrum-alias-background-color-transparent)\n)}:host{--spectrum-listitem-selectable-padding-right:calc(var(--spectrum-global-dimension-size-100) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-listitem-icon-gap));display:inline-flex;flex-direction:column;width:var(--swc-menu-width)}:host(:focus){outline:none}::slotted(*){--swc-menu-width:100%;flex-shrink:0}\n`;\nexport default styles;"],
5
5
  "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkDf,eAAeC",
6
6
  "names": ["css", "styles"]
7
7
  }
package/stories/submenu.stories.js CHANGED
@@ -1,7 +1,6 @@
1
1
  "use strict";
2
2
  import { html, render } from "@spectrum-web-components/base";
3
3
  import "@spectrum-web-components/action-menu/sp-action-menu.js";
4
- import "@spectrum-web-components/menu/sp-menu.js";
5
4
  import "@spectrum-web-components/menu/sp-menu-item.js";
6
5
  import "@spectrum-web-components/menu/sp-menu-divider.js";
7
6
  import "@spectrum-web-components/menu/sp-menu-group.js";
@@ -19,37 +18,34 @@ class SubmenuReady extends HTMLElement {
19
18
  constructor() {
20
19
  super();
21
20
  this.handleMenuOpened = async (event) => {
22
- this.menu.removeEventListener("sp-opened", this.handleMenuOpened);
23
21
  await nextFrame();
24
22
  await event.target.updateComplete;
25
- this.submenu = document.querySelector("#submenu-item-1");
26
- if (!this.submenu) {
23
+ const submenu2 = document.querySelector("#submenu-item-1");
24
+ if (!submenu2) {
27
25
  return;
28
26
  }
29
- this.submenu.addEventListener("sp-opened", this.handleSubmenuOpened);
30
- this.submenu.click();
27
+ submenu2.addEventListener("sp-opened", this.handleSubmenuOpened, {
28
+ once: true
29
+ });
30
+ submenu2.dispatchEvent(
31
+ new PointerEvent("pointerenter", { bubbles: true, composed: true })
32
+ );
31
33
  };
32
34
  this.handleSubmenuOpened = async (event) => {
33
- this.submenu.removeEventListener("sp-opened", this.handleSubmenuOpened);
34
35
  await nextFrame();
35
36
  await event.target.updateComplete;
36
- this.submenuChild = document.querySelector(
37
- "#submenu-item-2"
38
- );
39
- if (!this.submenuChild) {
37
+ const submenu2 = document.querySelector("#submenu-item-2");
38
+ if (!submenu2) {
40
39
  return;
41
40
  }
42
- this.submenuChild.addEventListener(
43
- "sp-opened",
44
- this.handleSubmenuChildOpened
41
+ submenu2.addEventListener("sp-opened", this.handleSubmenuChildOpened, {
42
+ once: true
43
+ });
44
+ submenu2.dispatchEvent(
45
+ new PointerEvent("pointerenter", { bubbles: true, composed: true })
45
46
  );
46
- this.submenuChild.click();
47
47
  };
48
48
  this.handleSubmenuChildOpened = async (event) => {
49
- this.submenuChild.removeEventListener(
50
- "sp-opened",
51
- this.handleSubmenuChildOpened
52
- );
53
49
  await nextFrame();
54
50
  await event.target.updateComplete;
55
51
  this.ready(true);
@@ -62,9 +58,11 @@ class SubmenuReady extends HTMLElement {
62
58
  }
63
59
  async setup() {
64
60
  await nextFrame();
65
- this.menu = document.querySelector(`sp-action-menu`);
66
- this.menu.addEventListener("sp-opened", this.handleMenuOpened);
67
- this.menu.open = true;
61
+ const menu = document.querySelector(`sp-action-menu`);
62
+ menu.addEventListener("sp-opened", this.handleMenuOpened, {
63
+ once: true
64
+ });
65
+ menu.open = true;
68
66
  }
69
67
  get updateComplete() {
70
68
  return this.readyPromise;
@@ -253,8 +251,7 @@ export const contextMenu = () => {
253
251
  openOverlay(trigger, "modal", popover, {
254
252
  placement: "right-start",
255
253
  receivesFocus: "auto",
256
- virtualTrigger,
257
- notImmediatelyClosable: true
254
+ virtualTrigger
258
255
  });
259
256
  };
260
257
  const getValueEls = () => {
@@ -269,12 +266,8 @@ export const contextMenu = () => {
269
266
  valueEls.first.textContent = "";
270
267
  };
271
268
  const handleRootChange = (event) => {
272
- var _a;
273
269
  const valueEls = getValueEls();
274
270
  valueEls.root.textContent = event.target.value;
275
- (_a = event.target.parentElement) == null ? void 0 : _a.dispatchEvent(
276
- new Event("close", { bubbles: true })
277
- );
278
271
  };
279
272
  const handleFirstDescendantChange = (event) => {
280
273
  const valueEls = getValueEls();
package/stories/submenu.stories.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["submenu.stories.ts"],
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.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 menu!: ActionMenu;\n submenu!: MenuItem;\n submenuChild!: MenuItem;\n\n async setup(): Promise<void> {\n await nextFrame();\n\n this.menu = document.querySelector(`sp-action-menu`) as ActionMenu;\n this.menu.addEventListener('sp-opened', this.handleMenuOpened);\n this.menu.open = true;\n }\n\n handleMenuOpened = async (event: Event): Promise<void> => {\n this.menu.removeEventListener('sp-opened', this.handleMenuOpened);\n await nextFrame();\n await (event.target as ActionMenu).updateComplete;\n\n this.submenu = document.querySelector('#submenu-item-1') as MenuItem;\n if (!this.submenu) {\n return;\n }\n\n this.submenu.addEventListener('sp-opened', this.handleSubmenuOpened);\n this.submenu.click();\n };\n\n handleSubmenuOpened = async (event: Event): Promise<void> => {\n this.submenu.removeEventListener('sp-opened', this.handleSubmenuOpened);\n await nextFrame();\n await (event.target as MenuItem).updateComplete;\n\n this.submenuChild = document.querySelector(\n '#submenu-item-2'\n ) as MenuItem;\n if (!this.submenuChild) {\n return;\n }\n this.submenuChild.addEventListener(\n 'sp-opened',\n this.handleSubmenuChildOpened\n );\n this.submenuChild.click();\n };\n\n handleSubmenuChildOpened = async (event: Event): Promise<void> => {\n this.submenuChild.removeEventListener(\n 'sp-opened',\n this.handleSubmenuChildOpened\n );\n await nextFrame();\n await (event.target as MenuItem).updateComplete;\n\n this.ready(true);\n };\n\n private readyPromise: Promise<boolean> = Promise.resolve(false);\n\n get updateComplete(): Promise<boolean> {\n return this.readyPromise;\n }\n}\n\ncustomElements.define('submenu-ready', SubmenuReady);\n\nconst submenuDecorator = (story: () => TemplateResult): TemplateResult => {\n return html`\n ${story()}\n <submenu-ready></submenu-ready>\n `;\n};\n\nexport const submenu = (): TemplateResult => {\n const getValueEls = (): {\n root: HTMLElement;\n first: HTMLElement;\n second: HTMLElement;\n } => {\n return {\n root: document.querySelector('#root-value') as HTMLElement,\n first: document.querySelector('#first-value') as HTMLElement,\n second: document.querySelector('#second-value') as HTMLElement,\n };\n };\n const clearValues = (): void => {\n const valueEls = getValueEls();\n valueEls.root.textContent = '';\n valueEls.first.textContent = '';\n valueEls.second.textContent = '';\n };\n const handleRootChange = (event: Event & { target: ActionMenu }): void => {\n const valueEls = getValueEls();\n valueEls.root.textContent = event.target.value;\n };\n const handleFirstDescendantChange = (\n event: Event & { target: Menu }\n ): void => {\n const valueEls = getValueEls();\n valueEls.first.textContent = event.target.selected[0] || '';\n };\n const handleSecondDescendantChange = (\n event: Event & { target: Menu }\n ): void => {\n const valueEls = getValueEls();\n valueEls.second.textContent = event.target.selected[0] || '';\n };\n return html`\n <sp-action-menu @change=${handleRootChange} @sp-opened=${clearValues}>\n <sp-icon-show-menu slot=\"icon\"></sp-icon-show-menu>\n <sp-menu-group\n @change=${() => console.log('group change')}\n role=\"none\"\n >\n <span slot=\"header\">New York</span>\n <sp-menu-item>Bronx</sp-menu-item>\n <sp-menu-item id=\"submenu-item-1\">\n Brooklyn\n <sp-menu\n slot=\"submenu\"\n @change=${handleFirstDescendantChange}\n >\n <sp-menu-item id=\"submenu-item-2\">\n Ft. Greene\n <sp-menu\n slot=\"submenu\"\n @change=${handleSecondDescendantChange}\n >\n <sp-menu-item>S. Oxford St</sp-menu-item>\n <sp-menu-item>S. Portland Ave</sp-menu-item>\n <sp-menu-item>S. Elliot Pl</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item disabled>Park Slope</sp-menu-item>\n <sp-menu-item>Williamsburg</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item>\n Manhattan\n <sp-menu\n slot=\"submenu\"\n @change=${handleFirstDescendantChange}\n >\n <sp-menu-item disabled>SoHo</sp-menu-item>\n <sp-menu-item>\n Union Square\n <sp-menu\n slot=\"submenu\"\n @change=${handleSecondDescendantChange}\n >\n <sp-menu-item>14th St</sp-menu-item>\n <sp-menu-item>Broadway</sp-menu-item>\n <sp-menu-item>Park Ave</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n <sp-menu-item>Upper East Side</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n </sp-menu-group>\n </sp-action-menu>\n <div>\n Root value:\n <span id=\"root-value\"></span>\n <br />\n First descendant value:\n <span id=\"first-value\"></span>\n <br />\n Second descendant value:\n <span id=\"second-value\"></span>\n <br />\n </div>\n `;\n};\n\nsubmenu.decorators = [submenuDecorator];\n\nexport const contextMenu = (): TemplateResult => {\n const 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 notImmediatelyClosable: true,\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 event.target.parentElement?.dispatchEvent(\n new Event('close', { bubbles: true })\n );\n };\n const handleFirstDescendantChange = (\n event: Event & { target: Menu }\n ): void => {\n const valueEls = getValueEls();\n valueEls.first.textContent = event.target.selected[0] || '';\n };\n return html`\n <style>\n .app-root {\n position: absolute;\n inset: 0;\n }\n active-overlay::part(theme) {\n --swc-menu-width: 200px;\n }\n </style>\n <div class=\"app-root\" @contextmenu=${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": "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",
6
- "names": []
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": "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",
6
+ "names": ["submenu"]
7
7
  }
package/test/menu-group.test.js CHANGED
@@ -93,38 +93,26 @@ describe("Menu group", () => {
93
93
  html`
94
94
  <sp-menu selects="single">
95
95
  <sp-menu-item selected>First</sp-menu-item>
96
- <!-- 1 -->
97
96
  <sp-menu-item>Second</sp-menu-item>
98
- <!-- 1 -->
99
97
  <sp-menu-group id="mg-multi" selects="multiple">
100
98
  <sp-menu-item selected>Multi1</sp-menu-item>
101
- <!-- 2 -->
102
99
  <sp-menu-item>Multi2</sp-menu-item>
103
- <!-- 2 -->
104
100
  <sp-menu-group id="mg-sub-inherit" selects="inherit">
105
101
  <sp-menu-item>SubInherit1</sp-menu-item>
106
- <!-- 2 -->
107
102
  <sp-menu-item>SubInherit2</sp-menu-item>
108
- <!-- 2 -->
109
103
  </sp-menu-group>
110
104
  </sp-menu-group>
111
105
  <sp-menu-group id="mg-single" selects="single">
112
106
  <sp-menu-item selected>Single1</sp-menu-item>
113
- <!-- 3 -->
114
107
  <sp-menu-item>Single2</sp-menu-item>
115
- <!-- 3 -->
116
108
  </sp-menu-group>
117
109
  <sp-menu-group id="mg-none">
118
110
  <sp-menu-item>Inherit1</sp-menu-item>
119
- <!-- - -->
120
111
  <sp-menu-item>Inherit2</sp-menu-item>
121
- <!-- - -->
122
112
  </sp-menu-group>
123
113
  <sp-menu-group id="mg-inherit" selects="inherit">
124
114
  <sp-menu-item>Inherit1</sp-menu-item>
125
- <!-- 1 -->
126
115
  <sp-menu-item>Inherit2</sp-menu-item>
127
- <!-- 1 -->
128
116
  </sp-menu-group>
129
117
  </sp-menu>
130
118
  `
@@ -231,7 +219,6 @@ describe("Menu group", () => {
231
219
  expect(el.value).to.equal("Inherit1");
232
220
  expect(el.selectedItems.length).to.equal(1);
233
221
  noneItem2.click();
234
- await elementUpdated(el);
235
222
  await elementUpdated(noneGroup);
236
223
  await elementUpdated(noneItem2);
237
224
  expect(inheritItem1.selected).to.be.true;
@@ -242,8 +229,8 @@ describe("Menu group", () => {
242
229
  await elementUpdated(singleGroup);
243
230
  await elementUpdated(singleItem1);
244
231
  await elementUpdated(singleItem2);
245
- expect(singleItem2.selected).to.be.true;
246
232
  expect(singleItem1.selected, "first item not selected").to.be.false;
233
+ expect(singleItem2.selected).to.be.true;
247
234
  expect(inheritItem1.selected).to.be.true;
248
235
  expect(singleItem1.getAttribute("aria-checked")).to.equal("false");
249
236
  expect(singleItem2.getAttribute("aria-checked")).to.equal("true");
package/test/menu-group.test.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["menu-group.test.ts"],
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 <!-- 1 -->\n <sp-menu-item>Second</sp-menu-item>\n <!-- 1 -->\n <sp-menu-group id=\"mg-multi\" selects=\"multiple\">\n <sp-menu-item selected>Multi1</sp-menu-item>\n <!-- 2 -->\n <sp-menu-item>Multi2</sp-menu-item>\n <!-- 2 -->\n <sp-menu-group id=\"mg-sub-inherit\" selects=\"inherit\">\n <sp-menu-item>SubInherit1</sp-menu-item>\n <!-- 2 -->\n <sp-menu-item>SubInherit2</sp-menu-item>\n <!-- 2 -->\n </sp-menu-group>\n </sp-menu-group>\n <sp-menu-group id=\"mg-single\" selects=\"single\">\n <sp-menu-item selected>Single1</sp-menu-item>\n <!-- 3 -->\n <sp-menu-item>Single2</sp-menu-item>\n <!-- 3 -->\n </sp-menu-group>\n <sp-menu-group id=\"mg-none\">\n <sp-menu-item>Inherit1</sp-menu-item>\n <!-- - -->\n <sp-menu-item>Inherit2</sp-menu-item>\n <!-- - -->\n </sp-menu-group>\n <sp-menu-group id=\"mg-inherit\" selects=\"inherit\">\n <sp-menu-item>Inherit1</sp-menu-item>\n <!-- 1 -->\n <sp-menu-item>Inherit2</sp-menu-item>\n <!-- 1 -->\n </sp-menu-group>\n </sp-menu>\n `\n );\n\n // 1 & 3 should be menuitemradio\n // 2 shouwl menuitemcheckbox\n\n await waitUntil(\n () => managedItems(el).length === 4,\n `expected outer menu to manage 4 items (2 are inherited), got ${\n managedItems(el).length\n }, with ${el.childItems.length} total`\n );\n await waitUntil(\n () => el.selectedItems.length === 1,\n 'expected 1 selected item'\n );\n await elementUpdated(el);\n\n const firstItem = el.querySelector(\n 'sp-menu-item:nth-of-type(1)'\n ) as MenuItem;\n\n const secondItem = el.querySelector(\n 'sp-menu-item:nth-of-type(2)'\n ) as MenuItem;\n\n const multiGroup = el.querySelector(\n 'sp-menu-group#mg-multi'\n ) as MenuGroup;\n const multiItem1 = multiGroup.querySelector(\n 'sp-menu-item:nth-of-type(1)'\n ) as MenuItem;\n const multiItem2 = multiGroup.querySelector(\n 'sp-menu-item:nth-of-type(2)'\n ) as MenuItem;\n await waitUntil(\n () => managedItems(multiGroup).length === 4,\n `selects=\"#mg-multi should manage 4 items (2 are inherited), received ${\n managedItems(multiGroup).length\n }`\n );\n\n const singleGroup = el.querySelector(\n 'sp-menu-group#mg-single'\n ) as MenuGroup;\n\n const singleItem1 = singleGroup.querySelector(\n 'sp-menu-item:nth-of-type(1)'\n ) as MenuItem;\n const singleItem2 = singleGroup.querySelector(\n 'sp-menu-item:nth-of-type(2)'\n ) as MenuItem;\n await waitUntil(\n () => managedItems(singleGroup).length === 2,\n 'selects=\"#mg-none should manage 4 items (2 are inherited)'\n );\n\n const noneGroup = el.querySelector(\n 'sp-menu-group#mg-none'\n ) as MenuGroup;\n const noneItem1 = noneGroup.querySelector(\n 'sp-menu-item:nth-of-type(1)'\n ) as MenuItem;\n const noneItem2 = noneGroup.querySelector(\n 'sp-menu-item:nth-of-type(2)'\n ) as MenuItem;\n await waitUntil(\n () => managedItems(noneGroup).length === 2,\n `selects=\"#mg-none\" should manage 2 items, received ${\n managedItems(noneGroup).length\n }`\n );\n\n const inheritGroup = el.querySelector(\n 'sp-menu-group#mg-inherit'\n ) as MenuGroup;\n const inheritItem1 = inheritGroup.querySelector(\n 'sp-menu-item:nth-of-type(1)'\n ) as MenuItem;\n const inheritItem2 = inheritGroup.querySelector(\n 'sp-menu-item:nth-of-type(2)'\n ) as MenuItem;\n\n expect(firstItem.getAttribute('role')).to.equal('menuitemradio');\n expect(secondItem.getAttribute('role')).to.equal('menuitemradio');\n expect(multiItem1.getAttribute('role')).to.equal('menuitemcheckbox');\n expect(multiItem2.getAttribute('role')).to.equal('menuitemcheckbox');\n expect(singleItem1.getAttribute('role')).to.equal('menuitemradio');\n expect(singleItem2.getAttribute('role')).to.equal('menuitemradio');\n expect(noneItem1.getAttribute('role')).to.equal('menuitem');\n expect(noneItem2.getAttribute('role')).to.equal('menuitem');\n expect(inheritItem1.getAttribute('role')).to.equal('menuitemradio');\n expect(inheritItem2.getAttribute('role')).to.equal('menuitemradio');\n\n await elementUpdated(firstItem);\n expect(singleItem1.selected).to.be.true;\n expect(firstItem.selected).to.be.true;\n expect(secondItem.selected, 'second item not selected').to.be.false;\n expect(el.value).to.equal('First');\n expect(el.selectedItems.length).to.equal(1);\n\n expect(firstItem.getAttribute('aria-checked')).to.equal('true');\n expect(secondItem.getAttribute('aria-checked')).to.equal('false');\n\n secondItem.click();\n await elementUpdated(el);\n await elementUpdated(firstItem);\n await elementUpdated(secondItem);\n expect(firstItem.selected, 'first item not selected').to.be.false;\n expect(secondItem.selected).to.be.true;\n expect(firstItem.getAttribute('aria-checked')).to.equal('false');\n expect(secondItem.getAttribute('aria-checked')).to.equal('true');\n expect(el.value).to.equal('Second');\n expect(el.selectedItems.length).to.equal(1);\n\n inheritItem1.click();\n await elementUpdated(el);\n await elementUpdated(inheritItem1);\n await elementUpdated(secondItem);\n expect(secondItem.selected, 'second item not selected again').to.be\n .false;\n expect(inheritItem1.selected).to.be.true;\n expect(secondItem.getAttribute('aria-checked')).to.equal('false');\n expect(inheritItem1.getAttribute('aria-checked')).to.equal('true');\n expect(el.value).to.equal('Inherit1');\n expect(el.selectedItems.length).to.equal(1);\n\n noneItem2.click();\n await elementUpdated(el);\n await elementUpdated(noneGroup);\n await elementUpdated(noneItem2);\n expect(inheritItem1.selected).to.be.true;\n expect(noneItem2.selected, 'none item not selected').to.be.false;\n expect(el.value).to.equal('Inherit1');\n expect(el.selectedItems.length).to.equal(1);\n\n singleItem2.click();\n await elementUpdated(singleGroup);\n await elementUpdated(singleItem1);\n await elementUpdated(singleItem2);\n expect(singleItem2.selected).to.be.true;\n expect(singleItem1.selected, 'first item not selected').to.be.false;\n expect(inheritItem1.selected).to.be.true;\n expect(singleItem1.getAttribute('aria-checked')).to.equal('false');\n expect(singleItem2.getAttribute('aria-checked')).to.equal('true');\n expect(el.value).to.equal('Inherit1');\n expect(el.selectedItems.length).to.equal(1);\n //expect(singleGroup.value).to.equal('Inherit1')\n expect(singleGroup.selectedItems.length).to.equal(1);\n\n multiItem2.click();\n await elementUpdated(el);\n await elementUpdated(multiItem2);\n expect(multiItem1.selected).to.be.true;\n expect(multiItem2.selected).to.be.true;\n expect(inheritItem1.selected).to.be.true;\n expect(multiItem1.getAttribute('aria-checked')).to.equal('true');\n expect(multiItem2.getAttribute('aria-checked')).to.equal('true');\n //expect(multiGroup.value).to.equal('Inherit1')\n expect(multiGroup.selectedItems.length).to.equal(2);\n });\n\n it('handles changing managed items for selects changes', async () => {\n const el = await fixture<Menu>(\n html`\n <sp-menu selects=\"multiple\" value-separator=\"--\">\n <sp-menu-item selected>First</sp-menu-item>\n <sp-menu-item>Second</sp-menu-item>\n <sp-menu-group id=\"mg-inherit\" selects=\"inherit\">\n <sp-menu-item>Inherit1</sp-menu-item>\n <sp-menu-item>Inherit2</sp-menu-item>\n <sp-menu-group id=\"mg-sub-inherit\" selects=\"inherit\">\n <sp-menu-item>SubInherit1</sp-menu-item>\n <sp-menu-item selected>SubInherit2</sp-menu-item>\n </sp-menu-group>\n </sp-menu-group>\n </sp-menu>\n `\n );\n\n await waitUntil(\n () => managedItems(el).length == 6,\n `expected outer menu to manage 6 items, manages ${\n managedItems(el).length\n }`\n );\n await waitUntil(\n () => el.selectedItems.length == 2,\n 'expected 2 selected item'\n );\n await elementUpdated(el);\n\n const inheritGroup = el.querySelector(\n 'sp-menu-group#mg-inherit'\n ) as MenuGroup;\n const inheritItem1 = inheritGroup.querySelector(\n 'sp-menu-item:nth-of-type(1)'\n ) as MenuItem;\n const inheritItem2 = inheritGroup.querySelector(\n 'sp-menu-item:nth-of-type(2)'\n ) as MenuItem;\n\n const subInheritGroup = el.querySelector(\n 'sp-menu-group#mg-sub-inherit'\n ) as MenuGroup;\n const subInheritItem1 = subInheritGroup.querySelector(\n 'sp-menu-item:nth-of-type(1)'\n ) as MenuItem;\n const subInheritItem2 = subInheritGroup.querySelector(\n 'sp-menu-item:nth-of-type(2)'\n ) as MenuItem;\n\n expect(inheritItem1.getAttribute('role')).to.equal('menuitemcheckbox');\n expect(inheritItem2.getAttribute('role')).to.equal('menuitemcheckbox');\n expect(subInheritItem1.getAttribute('role')).to.equal(\n 'menuitemcheckbox'\n );\n expect(subInheritItem2.getAttribute('role')).to.equal(\n 'menuitemcheckbox'\n );\n expect(el.value).to.equal('First--SubInherit2');\n expect(el.selectedItems.length).to.equal(2);\n inheritGroup.setAttribute('selects', 'single');\n\n await elementUpdated(inheritGroup);\n await elementUpdated(el);\n\n await waitUntil(() => {\n return managedItems(inheritGroup).length === 4;\n }, `expected new single sub-group to manage 4 items, received ${managedItems(inheritGroup).length} because \"selects === ${inheritGroup.selects}`);\n\n await waitUntil(\n () => managedItems(el).length === 2,\n `expected outer menu to manage 2 items with none inherited, received ${\n managedItems(el).length\n }`\n );\n expect(inheritGroup.value).to.equal('SubInherit2');\n expect(inheritGroup.selectedItems.length).to.equal(1);\n expect(el.value).to.equal('First');\n expect(inheritItem1.getAttribute('role')).to.equal('menuitemradio');\n expect(inheritItem2.getAttribute('role')).to.equal('menuitemradio');\n expect(subInheritItem1.getAttribute('role')).to.equal('menuitemradio');\n expect(subInheritItem2.getAttribute('role')).to.equal('menuitemradio');\n });\n});\n"],
5
- "mappings": "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",
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": "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",
6
6
  "names": []
7
7
  }
package/test/menu-selects.test.js CHANGED
@@ -532,15 +532,13 @@ describe("Menu w/ groups [selects]", () => {
532
532
  await sendKeys({ press: "ArrowDown" });
533
533
  await sendKeys({ press: "ArrowUp" });
534
534
  await elementUpdated(el);
535
- let optionCount = 0;
536
535
  for (const option of options) {
537
536
  const parentElement = option.parentElement;
538
537
  expect(document.activeElement === parentElement, "parent focused").to.be.true;
539
- expect(option.focused, `option ${optionCount} visually focused`).to.be.true;
538
+ expect(option.focused, "option visually focused").to.be.true;
540
539
  await sendKeys({ press: "Space" });
541
540
  expect(parentElement.value).to.equal(option.value);
542
541
  await sendKeys({ press: "ArrowDown" });
543
- optionCount += 1;
544
542
  }
545
543
  });
546
544
  });