@spectrum-web-components/menu 0.14.0 → 0.14.2
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/custom-elements.json +17 -490
- package/package.json +10 -10
- package/src/Menu.d.ts +0 -8
- package/src/Menu.js +4 -47
- package/src/Menu.js.map +1 -1
- package/src/MenuDivider.js.map +1 -1
- package/src/MenuGroup.js.map +1 -1
- package/src/MenuItem.d.ts +1 -3
- package/src/MenuItem.js +8 -36
- package/src/MenuItem.js.map +1 -1
- package/src/menu-divider.css.js +1 -1
- package/src/menu-divider.css.js.map +1 -1
- package/src/menu-item.css.js +9 -1
- package/src/menu-item.css.js.map +1 -1
- package/src/spectrum-config.js +5 -1
- package/src/spectrum-menu-divider.css.js +1 -1
- package/src/spectrum-menu-divider.css.js.map +1 -1
- package/src/spectrum-menu-item.css.js +9 -1
- package/src/spectrum-menu-item.css.js.map +1 -1
- package/stories/menu-group.stories.js +11 -7
- package/stories/menu-group.stories.js.map +1 -1
- package/test/submenu.test.js +254 -0
- package/test/submenu.test.js.map +1 -1
package/src/menu-item.css.js
CHANGED
|
@@ -70,7 +70,15 @@ var(--spectrum-global-dimension-size-225)
|
|
|
70
70
|
--spectrum-listitem-m-texticon-background-color-disabled,var(--spectrum-alias-background-color-transparent)
|
|
71
71
|
);background-image:none;color:var(
|
|
72
72
|
--spectrum-listitem-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)
|
|
73
|
-
);cursor:default}
|
|
73
|
+
);cursor:default}@media (forced-colors:active){:host{--spectrum-listheading-text-color:ButtonText;--spectrum-listitem-m-texticon-background-color:ButtonFace;--spectrum-listitem-m-texticon-background-color-disabled:ButtonFace;--spectrum-listitem-m-texticon-background-color-down:ButtonFace;--spectrum-listitem-m-texticon-background-color-hover:Highlight;--spectrum-listitem-m-texticon-background-color-key-focus:Highlight;--spectrum-listitem-m-texticon-focus-indicator-color:Highlight;--spectrum-listitem-m-texticon-text-color:ButtonText;--spectrum-listitem-m-texticon-text-color-disabled:GrayText;--spectrum-listitem-m-texticon-text-color-hover:HighlightText;--spectrum-listitem-m-texticon-text-color-key-focus:HighlightText;--spectrum-listitem-m-texticon-text-color-selected:ButtonText;--spectrum-listitem-m-texticon-ui-icon-color-selected:Highlight;forced-color-adjust:none}:host(:not([disabled]).focus-visible),:host(:not([disabled]).is-highlighted),:host(:not([disabled]).is-open),:host(:not([disabled]):focus),:host(:not([disabled]):hover),:host(:not([disabled])[focused]){background-color:var(
|
|
74
|
+
--spectrum-listitem-m-texticon-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay)
|
|
75
|
+
);color:var(
|
|
76
|
+
--spectrum-listitem-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)
|
|
77
|
+
)}:host(:not([disabled]).is-highlighted),:host(:not([disabled]).is-open),:host(:not([disabled]):focus),:host(:not([disabled]):focus-visible),:host(:not([disabled]):hover),:host(:not([disabled])[focused]){background-color:var(
|
|
78
|
+
--spectrum-listitem-m-texticon-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay)
|
|
79
|
+
);color:var(
|
|
80
|
+
--spectrum-listitem-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)
|
|
81
|
+
)}:host(:not([disabled]).focus-visible[selected]) .checkmark,:host(:not([disabled]).is-highlighted[selected]) .checkmark,:host(:not([disabled]).is-open[selected]) .checkmark,:host(:not([disabled]):focus[selected]) .checkmark,:host(:not([disabled]):hover[selected]) .checkmark,:host(:not([disabled])[focused][selected]) .checkmark{color:HighlightText}:host(:not([disabled]).is-highlighted[selected]) .checkmark,:host(:not([disabled]).is-open[selected]) .checkmark,:host(:not([disabled]):focus-visible[selected]) .checkmark,:host(:not([disabled]):focus[selected]) .checkmark,:host(:not([disabled]):hover[selected]) .checkmark,:host(:not([disabled])[focused][selected]) .checkmark{color:HighlightText}}#label{flex:1 1 auto;-webkit-hyphens:auto;hyphens:auto;line-height:var(--spectrum-listitem-texticon-label-line-height);overflow-wrap:break-word;width:calc(100% - var(--spectrum-listitem-texticon-ui-icon-width) - var(--spectrum-listitem-texticon-icon-gap))}.spectrum-Menu-itemLabel--wrapping{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([hidden]){display:none}:host([disabled]){pointer-events:none}#button{inset:0;position:absolute}::slotted([slot=value]){align-self:start}:host([dir=ltr]) ::slotted([slot=value]){margin-left:var(--spectrum-listitem-texticon-icon-gap)}:host([dir=rtl]) ::slotted([slot=value]){margin-right:var(--spectrum-listitem-texticon-icon-gap)}:host([dir=ltr]) [icon-only]::slotted(:last-of-type){margin-right:auto}:host([dir=rtl]) [icon-only]::slotted(:last-of-type){margin-left:auto}:host([dir=ltr]) ::slotted([slot=icon]){margin-right:var(--spectrum-listitem-texticon-icon-gap)}:host([dir=rtl]) ::slotted([slot=icon]){margin-left:var(--spectrum-listitem-texticon-icon-gap)}:host([dir=rtl]) slot[name=icon]+#label{margin-right:0}:host([dir=ltr]) slot[name=icon]+#label{margin-left:0}:host([dir=rtl]) .chevron{padding-left:var(--spectrum-listitem-texticon-icon-gap);padding-right:0}
|
|
74
82
|
`;
|
|
75
83
|
export default styles;
|
|
76
84
|
//# sourceMappingURL=menu-item.css.js.map
|
package/src/menu-item.css.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-item.css.js","sourceRoot":"","sources":["menu-item.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2022 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.checkmark{align-self:flex-start;display:none;opacity:1;transform:scale(1)}:host([dir=ltr]) .checkmark{padding-left:var(\n--spectrum-listitem-texticon-icon-gap\n)}:host([dir=rtl]) .checkmark{padding-right:var(\n--spectrum-listitem-texticon-icon-gap\n)}.checkmark{flex-grow:0;margin-top:calc(var(--spectrum-listitem-texticon-ui-icon-margin-top) - var(--spectrum-listitem-texticon-padding-y) + 1px)}:host([dir=ltr]) .chevron{padding-left:var(\n--spectrum-listitem-texticon-icon-gap\n)}:host([dir=rtl]) .chevron{padding-right:var(\n--spectrum-listitem-texticon-icon-gap\n)}.chevron{flex-grow:0;margin-top:calc(var(--spectrum-listitem-texticon-ui-icon-margin-top) - var(--spectrum-listitem-texticon-padding-y) + 1px)}:host([dir=ltr]){border-left:var(--spectrum-listitem-texticon-focus-indicator-size) solid transparent}:host([dir=rtl]){border-right:var(--spectrum-listitem-texticon-focus-indicator-size) solid transparent}:host{align-items:center;box-sizing:border-box;cursor:pointer;display:flex;font-size:var(--spectrum-listitem-texticon-text-size);font-style:normal;font-weight:var(--spectrum-listitem-texticon-text-font-weight);margin:0;min-height:var(--spectrum-listitem-texticon-height);padding:var(--spectrum-listitem-texticon-padding-y) var(--spectrum-listitem-texticon-padding-right) var(--spectrum-listitem-texticon-padding-y) var(--spectrum-listitem-texticon-padding-left);position:relative;text-decoration:none}:host(:focus){outline:none}:host([dir=ltr][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][selected]){padding-left:calc(var(--spectrum-listitem-texticon-padding-right) - var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))}:host([selected]) .checkmark{display:block}.icon,::slotted([slot=icon]){align-self:flex-start;flex-shrink:0}:host([dir=ltr]) .icon+#label,:host([dir=ltr]) slot[name=icon]+#label{margin-left:var(\n--spectrum-listitem-texticon-icon-gap\n)}:host([dir=rtl]) .icon+#label,:host([dir=rtl]) slot[name=icon]+#label{margin-right:var(\n--spectrum-listitem-texticon-icon-gap\n)}.icon+#label,slot[name=icon]+#label{width:calc(100% - var(--spectrum-listitem-texticon-ui-icon-width) - var(--spectrum-listitem-texticon-icon-gap) - var(--spectrum-listitem-textthumbnail-padding-left) - var(\n--spectrum-alias-workflow-icon-size-m,\nvar(--spectrum-global-dimension-size-225)\n))}:host([no-wrap]) #label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([dir=ltr]) .checkmark,:host([dir=ltr]) .chevron{padding-left:var(\n--spectrum-listitem-texticon-icon-gap\n)}:host([dir=rtl]) .checkmark,:host([dir=rtl]) .chevron{padding-right:var(\n--spectrum-listitem-texticon-icon-gap\n)}:host([dir=rtl]) .chevron{transform:matrix(-1,0,0,1,0,0)}:host{background-color:var(\n--spectrum-listitem-m-texticon-background-color,var(--spectrum-alias-background-color-transparent)\n);color:var(\n--spectrum-listitem-m-texticon-text-color,var(--spectrum-alias-component-text-color-default)\n)}:host([dir=ltr].focus-visible),:host([dir=ltr][focused]){border-left-color:var(\n--spectrum-listitem-m-texticon-focus-indicator-color,var(--spectrum-alias-border-color-key-focus)\n)}:host([dir=ltr]:focus-visible),:host([dir=ltr][focused]){border-left-color:var(\n--spectrum-listitem-m-texticon-focus-indicator-color,var(--spectrum-alias-border-color-key-focus)\n)}:host([dir=rtl].focus-visible),:host([dir=rtl][focused]){border-right-color:var(\n--spectrum-listitem-m-texticon-focus-indicator-color,var(--spectrum-alias-border-color-key-focus)\n)}:host([dir=rtl]:focus-visible),:host([dir=rtl][focused]){border-right-color:var(\n--spectrum-listitem-m-texticon-focus-indicator-color,var(--spectrum-alias-border-color-key-focus)\n)}:host(.focus-visible),:host([focused]){background-color:var(\n--spectrum-listitem-m-texticon-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay)\n);color:var(\n--spectrum-listitem-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}:host(:focus-visible),:host([focused]){background-color:var(\n--spectrum-listitem-m-texticon-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay)\n);color:var(\n--spectrum-listitem-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}:host(.is-highlighted),:host(.is-open),:host(:focus),:host(:hover){background-color:var(\n--spectrum-listitem-m-texticon-background-color-hover,var(--spectrum-alias-background-color-hover-overlay)\n);color:var(\n--spectrum-listitem-m-texticon-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}:host([selected]){color:var(\n--spectrum-listitem-m-texticon-text-color-selected,var(--spectrum-alias-component-text-color-default)\n)}:host([selected]) .checkmark{color:var(\n--spectrum-listitem-m-texticon-ui-icon-color-selected,var(--spectrum-alias-icon-color-selected)\n)}:host(:active),:host([active]){background-color:var(\n--spectrum-listitem-m-texticon-background-color-down,var(--spectrum-alias-background-color-hover-overlay)\n)}:host([disabled]){background-color:var(\n--spectrum-listitem-m-texticon-background-color-disabled,var(--spectrum-alias-background-color-transparent)\n);background-image:none;color:var(\n--spectrum-listitem-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n);cursor:default}#label{flex:1 1 auto;-webkit-hyphens:auto;hyphens:auto;line-height:var(--spectrum-listitem-texticon-label-line-height);overflow-wrap:break-word;width:calc(100% - var(--spectrum-listitem-texticon-ui-icon-width) - var(--spectrum-listitem-texticon-icon-gap))}.spectrum-Menu-itemLabel--wrapping{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([hidden]){display:none}#button{inset:0;position:absolute}::slotted([slot=value]){align-self:start}:host([dir=ltr]) ::slotted([slot=value]){margin-left:var(--spectrum-listitem-texticon-icon-gap)}:host([dir=rtl]) ::slotted([slot=value]){margin-right:var(--spectrum-listitem-texticon-icon-gap)}:host([dir=ltr]) [icon-only]::slotted(:last-of-type){margin-right:auto}:host([dir=rtl]) [icon-only]::slotted(:last-of-type){margin-left:auto}:host([dir=ltr]) ::slotted([slot=icon]){margin-right:var(--spectrum-listitem-texticon-icon-gap)}:host([dir=rtl]) ::slotted([slot=icon]){margin-left:var(--spectrum-listitem-texticon-icon-gap)}:host([dir=rtl]) slot[name=icon]+#label{margin-right:0}:host([dir=ltr]) slot[name=icon]+#label{margin-left:0}:host([dir=rtl]) .chevron{padding-left:var(--spectrum-listitem-texticon-icon-gap);padding-right:0}\n`;\nexport default styles;"]}
|
|
1
|
+
{"version":3,"file":"menu-item.css.js","sourceRoot":"","sources":["menu-item.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqEjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2022 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.checkmark{align-self:flex-start;display:none;opacity:1;transform:scale(1)}:host([dir=ltr]) .checkmark{padding-left:var(\n--spectrum-listitem-texticon-icon-gap\n)}:host([dir=rtl]) .checkmark{padding-right:var(\n--spectrum-listitem-texticon-icon-gap\n)}.checkmark{flex-grow:0;margin-top:calc(var(--spectrum-listitem-texticon-ui-icon-margin-top) - var(--spectrum-listitem-texticon-padding-y) + 1px)}:host([dir=ltr]) .chevron{padding-left:var(\n--spectrum-listitem-texticon-icon-gap\n)}:host([dir=rtl]) .chevron{padding-right:var(\n--spectrum-listitem-texticon-icon-gap\n)}.chevron{flex-grow:0;margin-top:calc(var(--spectrum-listitem-texticon-ui-icon-margin-top) - var(--spectrum-listitem-texticon-padding-y) + 1px)}:host([dir=ltr]){border-left:var(--spectrum-listitem-texticon-focus-indicator-size) solid transparent}:host([dir=rtl]){border-right:var(--spectrum-listitem-texticon-focus-indicator-size) solid transparent}:host{align-items:center;box-sizing:border-box;cursor:pointer;display:flex;font-size:var(--spectrum-listitem-texticon-text-size);font-style:normal;font-weight:var(--spectrum-listitem-texticon-text-font-weight);margin:0;min-height:var(--spectrum-listitem-texticon-height);padding:var(--spectrum-listitem-texticon-padding-y) var(--spectrum-listitem-texticon-padding-right) var(--spectrum-listitem-texticon-padding-y) var(--spectrum-listitem-texticon-padding-left);position:relative;text-decoration:none}:host(:focus){outline:none}:host([dir=ltr][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][selected]){padding-left:calc(var(--spectrum-listitem-texticon-padding-right) - var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))}:host([selected]) .checkmark{display:block}.icon,::slotted([slot=icon]){align-self:flex-start;flex-shrink:0}:host([dir=ltr]) .icon+#label,:host([dir=ltr]) slot[name=icon]+#label{margin-left:var(\n--spectrum-listitem-texticon-icon-gap\n)}:host([dir=rtl]) .icon+#label,:host([dir=rtl]) slot[name=icon]+#label{margin-right:var(\n--spectrum-listitem-texticon-icon-gap\n)}.icon+#label,slot[name=icon]+#label{width:calc(100% - var(--spectrum-listitem-texticon-ui-icon-width) - var(--spectrum-listitem-texticon-icon-gap) - var(--spectrum-listitem-textthumbnail-padding-left) - var(\n--spectrum-alias-workflow-icon-size-m,\nvar(--spectrum-global-dimension-size-225)\n))}:host([no-wrap]) #label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([dir=ltr]) .checkmark,:host([dir=ltr]) .chevron{padding-left:var(\n--spectrum-listitem-texticon-icon-gap\n)}:host([dir=rtl]) .checkmark,:host([dir=rtl]) .chevron{padding-right:var(\n--spectrum-listitem-texticon-icon-gap\n)}:host([dir=rtl]) .chevron{transform:matrix(-1,0,0,1,0,0)}:host{background-color:var(\n--spectrum-listitem-m-texticon-background-color,var(--spectrum-alias-background-color-transparent)\n);color:var(\n--spectrum-listitem-m-texticon-text-color,var(--spectrum-alias-component-text-color-default)\n)}:host([dir=ltr].focus-visible),:host([dir=ltr][focused]){border-left-color:var(\n--spectrum-listitem-m-texticon-focus-indicator-color,var(--spectrum-alias-border-color-key-focus)\n)}:host([dir=ltr]:focus-visible),:host([dir=ltr][focused]){border-left-color:var(\n--spectrum-listitem-m-texticon-focus-indicator-color,var(--spectrum-alias-border-color-key-focus)\n)}:host([dir=rtl].focus-visible),:host([dir=rtl][focused]){border-right-color:var(\n--spectrum-listitem-m-texticon-focus-indicator-color,var(--spectrum-alias-border-color-key-focus)\n)}:host([dir=rtl]:focus-visible),:host([dir=rtl][focused]){border-right-color:var(\n--spectrum-listitem-m-texticon-focus-indicator-color,var(--spectrum-alias-border-color-key-focus)\n)}:host(.focus-visible),:host([focused]){background-color:var(\n--spectrum-listitem-m-texticon-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay)\n);color:var(\n--spectrum-listitem-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}:host(:focus-visible),:host([focused]){background-color:var(\n--spectrum-listitem-m-texticon-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay)\n);color:var(\n--spectrum-listitem-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}:host(.is-highlighted),:host(.is-open),:host(:focus),:host(:hover){background-color:var(\n--spectrum-listitem-m-texticon-background-color-hover,var(--spectrum-alias-background-color-hover-overlay)\n);color:var(\n--spectrum-listitem-m-texticon-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}:host([selected]){color:var(\n--spectrum-listitem-m-texticon-text-color-selected,var(--spectrum-alias-component-text-color-default)\n)}:host([selected]) .checkmark{color:var(\n--spectrum-listitem-m-texticon-ui-icon-color-selected,var(--spectrum-alias-icon-color-selected)\n)}:host(:active),:host([active]){background-color:var(\n--spectrum-listitem-m-texticon-background-color-down,var(--spectrum-alias-background-color-hover-overlay)\n)}:host([disabled]){background-color:var(\n--spectrum-listitem-m-texticon-background-color-disabled,var(--spectrum-alias-background-color-transparent)\n);background-image:none;color:var(\n--spectrum-listitem-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n);cursor:default}@media (forced-colors:active){:host{--spectrum-listheading-text-color:ButtonText;--spectrum-listitem-m-texticon-background-color:ButtonFace;--spectrum-listitem-m-texticon-background-color-disabled:ButtonFace;--spectrum-listitem-m-texticon-background-color-down:ButtonFace;--spectrum-listitem-m-texticon-background-color-hover:Highlight;--spectrum-listitem-m-texticon-background-color-key-focus:Highlight;--spectrum-listitem-m-texticon-focus-indicator-color:Highlight;--spectrum-listitem-m-texticon-text-color:ButtonText;--spectrum-listitem-m-texticon-text-color-disabled:GrayText;--spectrum-listitem-m-texticon-text-color-hover:HighlightText;--spectrum-listitem-m-texticon-text-color-key-focus:HighlightText;--spectrum-listitem-m-texticon-text-color-selected:ButtonText;--spectrum-listitem-m-texticon-ui-icon-color-selected:Highlight;forced-color-adjust:none}:host(:not([disabled]).focus-visible),:host(:not([disabled]).is-highlighted),:host(:not([disabled]).is-open),:host(:not([disabled]):focus),:host(:not([disabled]):hover),:host(:not([disabled])[focused]){background-color:var(\n--spectrum-listitem-m-texticon-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay)\n);color:var(\n--spectrum-listitem-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}:host(:not([disabled]).is-highlighted),:host(:not([disabled]).is-open),:host(:not([disabled]):focus),:host(:not([disabled]):focus-visible),:host(:not([disabled]):hover),:host(:not([disabled])[focused]){background-color:var(\n--spectrum-listitem-m-texticon-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay)\n);color:var(\n--spectrum-listitem-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}:host(:not([disabled]).focus-visible[selected]) .checkmark,:host(:not([disabled]).is-highlighted[selected]) .checkmark,:host(:not([disabled]).is-open[selected]) .checkmark,:host(:not([disabled]):focus[selected]) .checkmark,:host(:not([disabled]):hover[selected]) .checkmark,:host(:not([disabled])[focused][selected]) .checkmark{color:HighlightText}:host(:not([disabled]).is-highlighted[selected]) .checkmark,:host(:not([disabled]).is-open[selected]) .checkmark,:host(:not([disabled]):focus-visible[selected]) .checkmark,:host(:not([disabled]):focus[selected]) .checkmark,:host(:not([disabled]):hover[selected]) .checkmark,:host(:not([disabled])[focused][selected]) .checkmark{color:HighlightText}}#label{flex:1 1 auto;-webkit-hyphens:auto;hyphens:auto;line-height:var(--spectrum-listitem-texticon-label-line-height);overflow-wrap:break-word;width:calc(100% - var(--spectrum-listitem-texticon-ui-icon-width) - var(--spectrum-listitem-texticon-icon-gap))}.spectrum-Menu-itemLabel--wrapping{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([hidden]){display:none}:host([disabled]){pointer-events:none}#button{inset:0;position:absolute}::slotted([slot=value]){align-self:start}:host([dir=ltr]) ::slotted([slot=value]){margin-left:var(--spectrum-listitem-texticon-icon-gap)}:host([dir=rtl]) ::slotted([slot=value]){margin-right:var(--spectrum-listitem-texticon-icon-gap)}:host([dir=ltr]) [icon-only]::slotted(:last-of-type){margin-right:auto}:host([dir=rtl]) [icon-only]::slotted(:last-of-type){margin-left:auto}:host([dir=ltr]) ::slotted([slot=icon]){margin-right:var(--spectrum-listitem-texticon-icon-gap)}:host([dir=rtl]) ::slotted([slot=icon]){margin-left:var(--spectrum-listitem-texticon-icon-gap)}:host([dir=rtl]) slot[name=icon]+#label{margin-right:0}:host([dir=ltr]) slot[name=icon]+#label{margin-left:0}:host([dir=rtl]) .chevron{padding-left:var(--spectrum-listitem-texticon-icon-gap);padding-right:0}\n`;\nexport default styles;"]}
|
package/src/spectrum-config.js
CHANGED
|
@@ -177,13 +177,17 @@ const config = {
|
|
|
177
177
|
host: {
|
|
178
178
|
selector: '.spectrum-Menu',
|
|
179
179
|
},
|
|
180
|
+
exclude: [/\.spectrum-Menu(?!-divider)/],
|
|
180
181
|
complexSelectors: [
|
|
181
182
|
{
|
|
182
183
|
replacement: ':host',
|
|
183
184
|
selector: '.spectrum-Menu .spectrum-Menu-divider',
|
|
184
185
|
},
|
|
186
|
+
{
|
|
187
|
+
replacement: ':host',
|
|
188
|
+
selector: /^\.spectrum-Menu-divider/,
|
|
189
|
+
},
|
|
185
190
|
],
|
|
186
|
-
exclude: [/\.spectrum-Menu(?!-divider)/],
|
|
187
191
|
},
|
|
188
192
|
],
|
|
189
193
|
};
|
|
@@ -11,7 +11,7 @@ governing permissions and limitations under the License.
|
|
|
11
11
|
*/
|
|
12
12
|
import { css } from '@spectrum-web-components/base';
|
|
13
13
|
const styles = css `
|
|
14
|
-
:host{margin:calc(var(--spectrum-listitem-texticon-divider-padding)/2) var(--spectrum-listitem-texticon-padding-y);overflow:visible;width:auto}
|
|
14
|
+
:host{margin:calc(var(--spectrum-listitem-texticon-divider-padding)/2) var(--spectrum-listitem-texticon-padding-y);overflow:visible;width:auto}@media (forced-colors:active){:host{background-color:CanvasText;forced-color-adjust:none}}
|
|
15
15
|
`;
|
|
16
16
|
export default styles;
|
|
17
17
|
//# sourceMappingURL=spectrum-menu-divider.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spectrum-menu-divider.css.js","sourceRoot":"","sources":["spectrum-menu-divider.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;CAEjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2022 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{margin:calc(var(--spectrum-listitem-texticon-divider-padding)/2) var(--spectrum-listitem-texticon-padding-y);overflow:visible;width:auto}\n`;\nexport default styles;"]}
|
|
1
|
+
{"version":3,"file":"spectrum-menu-divider.css.js","sourceRoot":"","sources":["spectrum-menu-divider.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;CAEjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2022 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{margin:calc(var(--spectrum-listitem-texticon-divider-padding)/2) var(--spectrum-listitem-texticon-padding-y);overflow:visible;width:auto}@media (forced-colors:active){:host{background-color:CanvasText;forced-color-adjust:none}}\n`;\nexport default styles;"]}
|
|
@@ -62,7 +62,15 @@ var(--spectrum-global-dimension-size-225)
|
|
|
62
62
|
--spectrum-listitem-m-texticon-background-color-disabled,var(--spectrum-alias-background-color-transparent)
|
|
63
63
|
);background-image:none;color:var(
|
|
64
64
|
--spectrum-listitem-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)
|
|
65
|
-
);cursor:default}
|
|
65
|
+
);cursor:default}@media (forced-colors:active){:host{--spectrum-listheading-text-color:ButtonText;--spectrum-listitem-m-texticon-background-color:ButtonFace;--spectrum-listitem-m-texticon-background-color-disabled:ButtonFace;--spectrum-listitem-m-texticon-background-color-down:ButtonFace;--spectrum-listitem-m-texticon-background-color-hover:Highlight;--spectrum-listitem-m-texticon-background-color-key-focus:Highlight;--spectrum-listitem-m-texticon-focus-indicator-color:Highlight;--spectrum-listitem-m-texticon-text-color:ButtonText;--spectrum-listitem-m-texticon-text-color-disabled:GrayText;--spectrum-listitem-m-texticon-text-color-hover:HighlightText;--spectrum-listitem-m-texticon-text-color-key-focus:HighlightText;--spectrum-listitem-m-texticon-text-color-selected:ButtonText;--spectrum-listitem-m-texticon-ui-icon-color-selected:Highlight;forced-color-adjust:none}:host(:not([disabled]).focus-visible),:host(:not([disabled]).is-highlighted),:host(:not([disabled]).is-open),:host(:not([disabled]):focus),:host(:not([disabled]):hover),:host(:not([disabled])[focused]){background-color:var(
|
|
66
|
+
--spectrum-listitem-m-texticon-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay)
|
|
67
|
+
);color:var(
|
|
68
|
+
--spectrum-listitem-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)
|
|
69
|
+
)}:host(:not([disabled]).is-highlighted),:host(:not([disabled]).is-open),:host(:not([disabled]):focus),:host(:not([disabled]):focus-visible),:host(:not([disabled]):hover),:host(:not([disabled])[focused]){background-color:var(
|
|
70
|
+
--spectrum-listitem-m-texticon-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay)
|
|
71
|
+
);color:var(
|
|
72
|
+
--spectrum-listitem-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)
|
|
73
|
+
)}:host(:not([disabled]).focus-visible[selected]) .checkmark,:host(:not([disabled]).is-highlighted[selected]) .checkmark,:host(:not([disabled]).is-open[selected]) .checkmark,:host(:not([disabled]):focus[selected]) .checkmark,:host(:not([disabled]):hover[selected]) .checkmark,:host(:not([disabled])[focused][selected]) .checkmark{color:HighlightText}:host(:not([disabled]).is-highlighted[selected]) .checkmark,:host(:not([disabled]).is-open[selected]) .checkmark,:host(:not([disabled]):focus-visible[selected]) .checkmark,:host(:not([disabled]):focus[selected]) .checkmark,:host(:not([disabled]):hover[selected]) .checkmark,:host(:not([disabled])[focused][selected]) .checkmark{color:HighlightText}}
|
|
66
74
|
`;
|
|
67
75
|
export default styles;
|
|
68
76
|
//# sourceMappingURL=spectrum-menu-item.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spectrum-menu-item.css.js","sourceRoot":"","sources":["spectrum-menu-item.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"spectrum-menu-item.css.js","sourceRoot":"","sources":["spectrum-menu-item.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2022 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([dir=ltr]){border-left:var(--spectrum-listitem-texticon-focus-indicator-size) solid transparent}:host([dir=rtl]){border-right:var(--spectrum-listitem-texticon-focus-indicator-size) solid transparent}:host{align-items:center;box-sizing:border-box;cursor:pointer;display:flex;font-size:var(--spectrum-listitem-texticon-text-size);font-style:normal;font-weight:var(--spectrum-listitem-texticon-text-font-weight);margin:0;min-height:var(--spectrum-listitem-texticon-height);padding:var(--spectrum-listitem-texticon-padding-y) var(--spectrum-listitem-texticon-padding-right) var(--spectrum-listitem-texticon-padding-y) var(--spectrum-listitem-texticon-padding-left);position:relative;text-decoration:none}:host(:focus){outline:none}:host([dir=ltr][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][selected]){padding-left:calc(var(--spectrum-listitem-texticon-padding-right) - var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))}:host([selected]) .checkmark{display:block}.icon,::slotted([slot=icon]){align-self:flex-start;flex-shrink:0}:host([dir=ltr]) .icon+#label,:host([dir=ltr]) slot[name=icon]+#label{margin-left:var(\n--spectrum-listitem-texticon-icon-gap\n)}:host([dir=rtl]) .icon+#label,:host([dir=rtl]) slot[name=icon]+#label{margin-right:var(\n--spectrum-listitem-texticon-icon-gap\n)}.icon+#label,slot[name=icon]+#label{width:calc(100% - var(--spectrum-listitem-texticon-ui-icon-width) - var(--spectrum-listitem-texticon-icon-gap) - var(--spectrum-listitem-textthumbnail-padding-left) - var(\n--spectrum-alias-workflow-icon-size-m,\nvar(--spectrum-global-dimension-size-225)\n))}#label{flex:1 1 auto;-webkit-hyphens:auto;hyphens:auto;line-height:var(--spectrum-listitem-texticon-label-line-height);overflow-wrap:break-word;width:calc(100% - var(--spectrum-listitem-texticon-ui-icon-width) - var(--spectrum-listitem-texticon-icon-gap))}:host([no-wrap]) #label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([dir=ltr]) .checkmark,:host([dir=ltr]) .chevron{padding-left:var(\n--spectrum-listitem-texticon-icon-gap\n)}:host([dir=rtl]) .checkmark,:host([dir=rtl]) .chevron{padding-right:var(\n--spectrum-listitem-texticon-icon-gap\n)}:host([dir=rtl]) .chevron{transform:matrix(-1,0,0,1,0,0)}:host{background-color:var(\n--spectrum-listitem-m-texticon-background-color,var(--spectrum-alias-background-color-transparent)\n);color:var(\n--spectrum-listitem-m-texticon-text-color,var(--spectrum-alias-component-text-color-default)\n)}:host([dir=ltr].focus-visible),:host([dir=ltr][focused]){border-left-color:var(\n--spectrum-listitem-m-texticon-focus-indicator-color,var(--spectrum-alias-border-color-key-focus)\n)}:host([dir=ltr]:focus-visible),:host([dir=ltr][focused]){border-left-color:var(\n--spectrum-listitem-m-texticon-focus-indicator-color,var(--spectrum-alias-border-color-key-focus)\n)}:host([dir=rtl].focus-visible),:host([dir=rtl][focused]){border-right-color:var(\n--spectrum-listitem-m-texticon-focus-indicator-color,var(--spectrum-alias-border-color-key-focus)\n)}:host([dir=rtl]:focus-visible),:host([dir=rtl][focused]){border-right-color:var(\n--spectrum-listitem-m-texticon-focus-indicator-color,var(--spectrum-alias-border-color-key-focus)\n)}:host(.focus-visible),:host([focused]){background-color:var(\n--spectrum-listitem-m-texticon-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay)\n);color:var(\n--spectrum-listitem-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}:host(:focus-visible),:host([focused]){background-color:var(\n--spectrum-listitem-m-texticon-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay)\n);color:var(\n--spectrum-listitem-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}:host(.is-highlighted),:host(.is-open),:host(:focus),:host(:hover){background-color:var(\n--spectrum-listitem-m-texticon-background-color-hover,var(--spectrum-alias-background-color-hover-overlay)\n);color:var(\n--spectrum-listitem-m-texticon-text-color-hover,var(--spectrum-alias-component-text-color-hover)\n)}:host([selected]){color:var(\n--spectrum-listitem-m-texticon-text-color-selected,var(--spectrum-alias-component-text-color-default)\n)}:host([selected]) .checkmark{color:var(\n--spectrum-listitem-m-texticon-ui-icon-color-selected,var(--spectrum-alias-icon-color-selected)\n)}:host(:active),:host([active]){background-color:var(\n--spectrum-listitem-m-texticon-background-color-down,var(--spectrum-alias-background-color-hover-overlay)\n)}:host([disabled]){background-color:var(\n--spectrum-listitem-m-texticon-background-color-disabled,var(--spectrum-alias-background-color-transparent)\n);background-image:none;color:var(\n--spectrum-listitem-m-texticon-text-color-disabled,var(--spectrum-alias-component-text-color-disabled)\n);cursor:default}@media (forced-colors:active){:host{--spectrum-listheading-text-color:ButtonText;--spectrum-listitem-m-texticon-background-color:ButtonFace;--spectrum-listitem-m-texticon-background-color-disabled:ButtonFace;--spectrum-listitem-m-texticon-background-color-down:ButtonFace;--spectrum-listitem-m-texticon-background-color-hover:Highlight;--spectrum-listitem-m-texticon-background-color-key-focus:Highlight;--spectrum-listitem-m-texticon-focus-indicator-color:Highlight;--spectrum-listitem-m-texticon-text-color:ButtonText;--spectrum-listitem-m-texticon-text-color-disabled:GrayText;--spectrum-listitem-m-texticon-text-color-hover:HighlightText;--spectrum-listitem-m-texticon-text-color-key-focus:HighlightText;--spectrum-listitem-m-texticon-text-color-selected:ButtonText;--spectrum-listitem-m-texticon-ui-icon-color-selected:Highlight;forced-color-adjust:none}:host(:not([disabled]).focus-visible),:host(:not([disabled]).is-highlighted),:host(:not([disabled]).is-open),:host(:not([disabled]):focus),:host(:not([disabled]):hover),:host(:not([disabled])[focused]){background-color:var(\n--spectrum-listitem-m-texticon-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay)\n);color:var(\n--spectrum-listitem-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}:host(:not([disabled]).is-highlighted),:host(:not([disabled]).is-open),:host(:not([disabled]):focus),:host(:not([disabled]):focus-visible),:host(:not([disabled]):hover),:host(:not([disabled])[focused]){background-color:var(\n--spectrum-listitem-m-texticon-background-color-key-focus,var(--spectrum-alias-background-color-hover-overlay)\n);color:var(\n--spectrum-listitem-m-texticon-text-color-key-focus,var(--spectrum-alias-component-text-color-key-focus)\n)}:host(:not([disabled]).focus-visible[selected]) .checkmark,:host(:not([disabled]).is-highlighted[selected]) .checkmark,:host(:not([disabled]).is-open[selected]) .checkmark,:host(:not([disabled]):focus[selected]) .checkmark,:host(:not([disabled]):hover[selected]) .checkmark,:host(:not([disabled])[focused][selected]) .checkmark{color:HighlightText}:host(:not([disabled]).is-highlighted[selected]) .checkmark,:host(:not([disabled]).is-open[selected]) .checkmark,:host(:not([disabled]):focus-visible[selected]) .checkmark,:host(:not([disabled]):focus[selected]) .checkmark,:host(:not([disabled]):hover[selected]) .checkmark,:host(:not([disabled])[focused][selected]) .checkmark{color:HighlightText}}\n`;\nexport default styles;"]}
|
|
@@ -51,12 +51,13 @@ export const mixed = () => {
|
|
|
51
51
|
decoration = value;
|
|
52
52
|
break;
|
|
53
53
|
}
|
|
54
|
-
document.querySelector('#output').textContent =
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
54
|
+
document.querySelector('#output').textContent =
|
|
55
|
+
styleRules({
|
|
56
|
+
style,
|
|
57
|
+
weight,
|
|
58
|
+
color,
|
|
59
|
+
decoration,
|
|
60
|
+
});
|
|
60
61
|
};
|
|
61
62
|
return html `
|
|
62
63
|
<style>
|
|
@@ -95,7 +96,10 @@ export const mixed = () => {
|
|
|
95
96
|
</sp-menu-group>
|
|
96
97
|
</sp-menu>
|
|
97
98
|
</sp-popover>
|
|
98
|
-
<pre
|
|
99
|
+
<pre
|
|
100
|
+
id="output"
|
|
101
|
+
style="font-family: var(--spectrum-alias-body-text-font-family);"
|
|
102
|
+
>
|
|
99
103
|
${styleRules({ style, weight, color, decoration })}
|
|
100
104
|
</pre
|
|
101
105
|
>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-group.stories.js","sourceRoot":"","sources":["menu-group.stories.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,IAAI,EAAkB,MAAM,+BAA+B,CAAC;AAGrE,OAAO,eAAe,CAAC;AACvB,OAAO,uBAAuB,CAAC;AAC/B,OAAO,gDAAgD,CAAC;AACxD,OAAO,0CAA0C,CAAC;AAClD,OAAO,+CAA+C,CAAC;AACvD,OAAO,kDAAkD,CAAC;AAC1D,OAAO,gDAAgD,CAAC;AAExD,eAAe;IACX,SAAS,EAAE,SAAS;IACpB,KAAK,EAAE,YAAY;CACtB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAmB,EAAE;IACtC,IAAI,KAAK,GAAG,QAAQ,CAAC;IACrB,IAAI,MAAM,GAAG,KAAK,CAAC;IACnB,IAAI,KAAK,GAAG,MAAM,CAAC;IACnB,IAAI,UAAU,GAAG,UAAU,CAAC;IAC5B,MAAM,UAAU,GAAG,CAAC,EAChB,KAAK,EACL,MAAM,EACN,KAAK,EACL,UAAU,GAMb,EAAU,EAAE;QACT,OAAO;;2BAEY,MAAM;0BACP,KAAK;qBACV,KAAK;+BACK,UAAU;;SAEhC,CAAC;IACN,CAAC,CAAC;IACF,MAAM,MAAM,GAAG,CAAC,KAAY,EAAQ,EAAE;QAClC,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,KAAK,CAAC,MAAmB,CAAC;QAChD,QAAQ,EAAE,EAAE;YACR,KAAK,MAAM;gBACP,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;gBAChC,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC;gBAC5D,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;gBACrD,MAAM;YACV,KAAK,OAAO;gBACR,KAAK,GAAG,KAAK,CAAC;gBACd,MAAM;YACV,KAAK,YAAY;gBACb,UAAU,GAAG,KAAK,CAAC;gBACnB,MAAM;SACb;QACA,QAAQ,CAAC,aAAa,
|
|
1
|
+
{"version":3,"file":"menu-group.stories.js","sourceRoot":"","sources":["menu-group.stories.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,IAAI,EAAkB,MAAM,+BAA+B,CAAC;AAGrE,OAAO,eAAe,CAAC;AACvB,OAAO,uBAAuB,CAAC;AAC/B,OAAO,gDAAgD,CAAC;AACxD,OAAO,0CAA0C,CAAC;AAClD,OAAO,+CAA+C,CAAC;AACvD,OAAO,kDAAkD,CAAC;AAC1D,OAAO,gDAAgD,CAAC;AAExD,eAAe;IACX,SAAS,EAAE,SAAS;IACpB,KAAK,EAAE,YAAY;CACtB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAmB,EAAE;IACtC,IAAI,KAAK,GAAG,QAAQ,CAAC;IACrB,IAAI,MAAM,GAAG,KAAK,CAAC;IACnB,IAAI,KAAK,GAAG,MAAM,CAAC;IACnB,IAAI,UAAU,GAAG,UAAU,CAAC;IAC5B,MAAM,UAAU,GAAG,CAAC,EAChB,KAAK,EACL,MAAM,EACN,KAAK,EACL,UAAU,GAMb,EAAU,EAAE;QACT,OAAO;;2BAEY,MAAM;0BACP,KAAK;qBACV,KAAK;+BACK,UAAU;;SAEhC,CAAC;IACN,CAAC,CAAC;IACF,MAAM,MAAM,GAAG,CAAC,KAAY,EAAQ,EAAE;QAClC,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,KAAK,CAAC,MAAmB,CAAC;QAChD,QAAQ,EAAE,EAAE;YACR,KAAK,MAAM;gBACP,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;gBAChC,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC;gBAC5D,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;gBACrD,MAAM;YACV,KAAK,OAAO;gBACR,KAAK,GAAG,KAAK,CAAC;gBACd,MAAM;YACV,KAAK,YAAY;gBACb,UAAU,GAAG,KAAK,CAAC;gBACnB,MAAM;SACb;QACA,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAiB,CAAC,WAAW;YAC1D,UAAU,CAAC;gBACP,KAAK;gBACL,MAAM;gBACN,KAAK;gBACL,UAAU;aACb,CAAC,CAAC;IACX,CAAC,CAAC;IACF,OAAO,IAAI,CAAA;;;;;;;;mDAQoC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiC3C,UAAU,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC;;;KAGzD,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,GAAmB,EAAE;IACxC,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6BV,CAAC;AACN,CAAC,CAAC","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 '..';\nimport '../sp-menu.js';\nimport '../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"]}
|
package/test/submenu.test.js
CHANGED
|
@@ -17,6 +17,9 @@ import '@spectrum-web-components/theme/src/themes.js';
|
|
|
17
17
|
import { sendMouse } from '../../../test/plugins/browser.js';
|
|
18
18
|
import { spy } from 'sinon';
|
|
19
19
|
import { sendKeys } from '@web/test-runner-commands';
|
|
20
|
+
import '@spectrum-web-components/action-menu/sp-action-menu.js';
|
|
21
|
+
import '@spectrum-web-components/menu/sp-menu-group.js';
|
|
22
|
+
import '@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js';
|
|
20
23
|
async function styledFixture(story, dir = 'ltr') {
|
|
21
24
|
const test = await fixture(html `
|
|
22
25
|
<sp-theme dir=${dir} scale="medium" color="dark">${story}</sp-theme>
|
|
@@ -483,5 +486,256 @@ describe('Submenu', () => {
|
|
|
483
486
|
await opened;
|
|
484
487
|
expect(rootItem.open).to.be.true;
|
|
485
488
|
});
|
|
489
|
+
it('not opens if disabled', async () => {
|
|
490
|
+
const el = await styledFixture(html `
|
|
491
|
+
<sp-menu>
|
|
492
|
+
<sp-menu-item disabled class="root">
|
|
493
|
+
Has submenu
|
|
494
|
+
<sp-menu slot="submenu">
|
|
495
|
+
<sp-menu-item class="submenu-item-1">
|
|
496
|
+
One
|
|
497
|
+
</sp-menu-item>
|
|
498
|
+
<sp-menu-item class="submenu-item-2">
|
|
499
|
+
Two
|
|
500
|
+
</sp-menu-item>
|
|
501
|
+
<sp-menu-item class="submenu-item-3">
|
|
502
|
+
Three
|
|
503
|
+
</sp-menu-item>
|
|
504
|
+
</sp-menu>
|
|
505
|
+
</sp-menu-item>
|
|
506
|
+
</sp-menu>
|
|
507
|
+
`);
|
|
508
|
+
await elementUpdated(el);
|
|
509
|
+
const rootItem = el.querySelector('.root');
|
|
510
|
+
const rootItemBoundingRect = rootItem.getBoundingClientRect();
|
|
511
|
+
expect(rootItem.open).to.be.false;
|
|
512
|
+
sendMouse({
|
|
513
|
+
steps: [
|
|
514
|
+
{
|
|
515
|
+
type: 'move',
|
|
516
|
+
position: [
|
|
517
|
+
rootItemBoundingRect.left +
|
|
518
|
+
rootItemBoundingRect.width / 2,
|
|
519
|
+
rootItemBoundingRect.top +
|
|
520
|
+
rootItemBoundingRect.height / 2,
|
|
521
|
+
],
|
|
522
|
+
},
|
|
523
|
+
],
|
|
524
|
+
});
|
|
525
|
+
// wait 200ms for open
|
|
526
|
+
await new Promise((r) => setTimeout(r, 200));
|
|
527
|
+
expect(rootItem.open).to.be.false;
|
|
528
|
+
});
|
|
529
|
+
it('closes all decendent submenus when closing a ancestor menu', async () => {
|
|
530
|
+
const el = await styledFixture(html `
|
|
531
|
+
<sp-action-menu>
|
|
532
|
+
<sp-icon-show-menu slot="icon"></sp-icon-show-menu>
|
|
533
|
+
<sp-menu-group role="none">
|
|
534
|
+
<span slot="header">New York</span>
|
|
535
|
+
<sp-menu-item>Bronx</sp-menu-item>
|
|
536
|
+
<sp-menu-item id="submenu-item-1">
|
|
537
|
+
Brooklyn
|
|
538
|
+
<sp-menu slot="submenu">
|
|
539
|
+
<sp-menu-item id="submenu-item-2">
|
|
540
|
+
Ft. Greene
|
|
541
|
+
<sp-menu slot="submenu">
|
|
542
|
+
<sp-menu-item>S. Oxford St</sp-menu-item>
|
|
543
|
+
<sp-menu-item>S. Portland Ave</sp-menu-item>
|
|
544
|
+
<sp-menu-item>S. Elliot Pl</sp-menu-item>
|
|
545
|
+
</sp-menu>
|
|
546
|
+
</sp-menu-item>
|
|
547
|
+
<sp-menu-item disabled>Park Slope</sp-menu-item>
|
|
548
|
+
<sp-menu-item>Williamsburg</sp-menu-item>
|
|
549
|
+
</sp-menu>
|
|
550
|
+
</sp-menu-item>
|
|
551
|
+
<sp-menu-item id="submenu-item-3">
|
|
552
|
+
Manhattan
|
|
553
|
+
<sp-menu slot="submenu">
|
|
554
|
+
<sp-menu-item disabled>SoHo</sp-menu-item>
|
|
555
|
+
<sp-menu-item>
|
|
556
|
+
Union Square
|
|
557
|
+
<sp-menu slot="submenu">
|
|
558
|
+
<sp-menu-item>14th St</sp-menu-item>
|
|
559
|
+
<sp-menu-item>Broadway</sp-menu-item>
|
|
560
|
+
<sp-menu-item>Park Ave</sp-menu-item>
|
|
561
|
+
</sp-menu>
|
|
562
|
+
</sp-menu-item>
|
|
563
|
+
<sp-menu-item>Upper East Side</sp-menu-item>
|
|
564
|
+
</sp-menu>
|
|
565
|
+
</sp-menu-item>
|
|
566
|
+
</sp-menu-group>
|
|
567
|
+
</sp-action-menu>
|
|
568
|
+
`);
|
|
569
|
+
const rootMenu1 = el.querySelector('#submenu-item-1');
|
|
570
|
+
const rootMenu2 = el.querySelector('#submenu-item-3');
|
|
571
|
+
const childMenu2 = el.querySelector('#submenu-item-2');
|
|
572
|
+
expect(el.open).to.be.false;
|
|
573
|
+
let opened = oneEvent(el, 'sp-opened');
|
|
574
|
+
el.click();
|
|
575
|
+
await opened;
|
|
576
|
+
expect(el.open).to.be.true;
|
|
577
|
+
let activeOverlays = document.querySelectorAll('active-overlay');
|
|
578
|
+
expect(activeOverlays.length).to.equal(1);
|
|
579
|
+
opened = oneEvent(rootMenu1, 'sp-opened');
|
|
580
|
+
rootMenu1.dispatchEvent(new PointerEvent('pointerenter', { bubbles: true }));
|
|
581
|
+
await opened;
|
|
582
|
+
activeOverlays = document.querySelectorAll('active-overlay');
|
|
583
|
+
expect(activeOverlays.length).to.equal(2);
|
|
584
|
+
opened = oneEvent(childMenu2, 'sp-opened');
|
|
585
|
+
childMenu2.dispatchEvent(new PointerEvent('pointerenter', { bubbles: true }));
|
|
586
|
+
await opened;
|
|
587
|
+
activeOverlays = document.querySelectorAll('active-overlay');
|
|
588
|
+
expect(activeOverlays.length).to.equal(3);
|
|
589
|
+
const overlaysManaged = Promise.all([
|
|
590
|
+
oneEvent(childMenu2, 'sp-closed'),
|
|
591
|
+
oneEvent(rootMenu1, 'sp-closed'),
|
|
592
|
+
oneEvent(rootMenu2, 'sp-opened'),
|
|
593
|
+
]);
|
|
594
|
+
rootMenu2.dispatchEvent(new PointerEvent('pointerenter', { bubbles: true }));
|
|
595
|
+
await overlaysManaged;
|
|
596
|
+
activeOverlays = document.querySelectorAll('active-overlay');
|
|
597
|
+
expect(activeOverlays.length).to.equal(2);
|
|
598
|
+
});
|
|
599
|
+
it('closes back to the first overlay without a `root` when clicking away', async () => {
|
|
600
|
+
const el = await styledFixture(html `
|
|
601
|
+
<sp-action-menu>
|
|
602
|
+
<sp-icon-show-menu slot="icon"></sp-icon-show-menu>
|
|
603
|
+
<sp-menu-group role="none">
|
|
604
|
+
<span slot="header">New York</span>
|
|
605
|
+
<sp-menu-item>Bronx</sp-menu-item>
|
|
606
|
+
<sp-menu-item id="submenu-item-1">
|
|
607
|
+
Brooklyn
|
|
608
|
+
<sp-menu slot="submenu">
|
|
609
|
+
<sp-menu-item id="submenu-item-2">
|
|
610
|
+
Ft. Greene
|
|
611
|
+
<sp-menu slot="submenu">
|
|
612
|
+
<sp-menu-item>S. Oxford St</sp-menu-item>
|
|
613
|
+
<sp-menu-item>S. Portland Ave</sp-menu-item>
|
|
614
|
+
<sp-menu-item>S. Elliot Pl</sp-menu-item>
|
|
615
|
+
</sp-menu>
|
|
616
|
+
</sp-menu-item>
|
|
617
|
+
<sp-menu-item disabled>Park Slope</sp-menu-item>
|
|
618
|
+
<sp-menu-item>Williamsburg</sp-menu-item>
|
|
619
|
+
</sp-menu>
|
|
620
|
+
</sp-menu-item>
|
|
621
|
+
<sp-menu-item id="submenu-item-3">
|
|
622
|
+
Manhattan
|
|
623
|
+
<sp-menu slot="submenu">
|
|
624
|
+
<sp-menu-item disabled>SoHo</sp-menu-item>
|
|
625
|
+
<sp-menu-item>
|
|
626
|
+
Union Square
|
|
627
|
+
<sp-menu slot="submenu">
|
|
628
|
+
<sp-menu-item>14th St</sp-menu-item>
|
|
629
|
+
<sp-menu-item>Broadway</sp-menu-item>
|
|
630
|
+
<sp-menu-item>Park Ave</sp-menu-item>
|
|
631
|
+
</sp-menu>
|
|
632
|
+
</sp-menu-item>
|
|
633
|
+
<sp-menu-item>Upper East Side</sp-menu-item>
|
|
634
|
+
</sp-menu>
|
|
635
|
+
</sp-menu-item>
|
|
636
|
+
</sp-menu-group>
|
|
637
|
+
</sp-action-menu>
|
|
638
|
+
`);
|
|
639
|
+
const rootMenu1 = el.querySelector('#submenu-item-1');
|
|
640
|
+
const childMenu2 = el.querySelector('#submenu-item-2');
|
|
641
|
+
expect(el.open).to.be.false;
|
|
642
|
+
let opened = oneEvent(el, 'sp-opened');
|
|
643
|
+
el.click();
|
|
644
|
+
await opened;
|
|
645
|
+
expect(el.open).to.be.true;
|
|
646
|
+
let activeOverlays = document.querySelectorAll('active-overlay');
|
|
647
|
+
expect(activeOverlays.length).to.equal(1);
|
|
648
|
+
opened = oneEvent(rootMenu1, 'sp-opened');
|
|
649
|
+
rootMenu1.dispatchEvent(new PointerEvent('pointerenter', { bubbles: true }));
|
|
650
|
+
await opened;
|
|
651
|
+
activeOverlays = document.querySelectorAll('active-overlay');
|
|
652
|
+
expect(activeOverlays.length).to.equal(2);
|
|
653
|
+
opened = oneEvent(childMenu2, 'sp-opened');
|
|
654
|
+
childMenu2.dispatchEvent(new PointerEvent('pointerenter', { bubbles: true }));
|
|
655
|
+
await opened;
|
|
656
|
+
activeOverlays = document.querySelectorAll('active-overlay');
|
|
657
|
+
expect(activeOverlays.length).to.equal(3);
|
|
658
|
+
const closed = Promise.all([
|
|
659
|
+
oneEvent(childMenu2, 'sp-closed'),
|
|
660
|
+
oneEvent(rootMenu1, 'sp-closed'),
|
|
661
|
+
oneEvent(el, 'sp-closed'),
|
|
662
|
+
]);
|
|
663
|
+
document.body.click();
|
|
664
|
+
await closed;
|
|
665
|
+
activeOverlays = document.querySelectorAll('active-overlay');
|
|
666
|
+
expect(activeOverlays.length).to.equal(0);
|
|
667
|
+
});
|
|
668
|
+
it('closes decendent menus when Menu Item in ancestor is clicked', async () => {
|
|
669
|
+
const el = await styledFixture(html `
|
|
670
|
+
<sp-action-menu>
|
|
671
|
+
<sp-icon-show-menu slot="icon"></sp-icon-show-menu>
|
|
672
|
+
<sp-menu-group role="none">
|
|
673
|
+
<span slot="header">New York</span>
|
|
674
|
+
<sp-menu-item>Bronx</sp-menu-item>
|
|
675
|
+
<sp-menu-item id="submenu-item-1">
|
|
676
|
+
Brooklyn
|
|
677
|
+
<sp-menu slot="submenu">
|
|
678
|
+
<sp-menu-item id="submenu-item-2">
|
|
679
|
+
Ft. Greene
|
|
680
|
+
<sp-menu slot="submenu">
|
|
681
|
+
<sp-menu-item>S. Oxford St</sp-menu-item>
|
|
682
|
+
<sp-menu-item>S. Portland Ave</sp-menu-item>
|
|
683
|
+
<sp-menu-item>S. Elliot Pl</sp-menu-item>
|
|
684
|
+
</sp-menu>
|
|
685
|
+
</sp-menu-item>
|
|
686
|
+
<sp-menu-item disabled>Park Slope</sp-menu-item>
|
|
687
|
+
<sp-menu-item id="ancestor-item">
|
|
688
|
+
Williamsburg
|
|
689
|
+
</sp-menu-item>
|
|
690
|
+
</sp-menu>
|
|
691
|
+
</sp-menu-item>
|
|
692
|
+
<sp-menu-item id="submenu-item-3">
|
|
693
|
+
Manhattan
|
|
694
|
+
<sp-menu slot="submenu">
|
|
695
|
+
<sp-menu-item disabled>SoHo</sp-menu-item>
|
|
696
|
+
<sp-menu-item>
|
|
697
|
+
Union Square
|
|
698
|
+
<sp-menu slot="submenu">
|
|
699
|
+
<sp-menu-item>14th St</sp-menu-item>
|
|
700
|
+
<sp-menu-item>Broadway</sp-menu-item>
|
|
701
|
+
<sp-menu-item>Park Ave</sp-menu-item>
|
|
702
|
+
</sp-menu>
|
|
703
|
+
</sp-menu-item>
|
|
704
|
+
<sp-menu-item>Upper East Side</sp-menu-item>
|
|
705
|
+
</sp-menu>
|
|
706
|
+
</sp-menu-item>
|
|
707
|
+
</sp-menu-group>
|
|
708
|
+
</sp-action-menu>
|
|
709
|
+
`);
|
|
710
|
+
const rootMenu1 = el.querySelector('#submenu-item-1');
|
|
711
|
+
const childMenu2 = el.querySelector('#submenu-item-2');
|
|
712
|
+
const ancestorItem = el.querySelector('#ancestor-item');
|
|
713
|
+
expect(el.open).to.be.false;
|
|
714
|
+
let opened = oneEvent(el, 'sp-opened');
|
|
715
|
+
el.click();
|
|
716
|
+
await opened;
|
|
717
|
+
expect(el.open).to.be.true;
|
|
718
|
+
let activeOverlays = document.querySelectorAll('active-overlay');
|
|
719
|
+
expect(activeOverlays.length).to.equal(1);
|
|
720
|
+
opened = oneEvent(rootMenu1, 'sp-opened');
|
|
721
|
+
rootMenu1.dispatchEvent(new PointerEvent('pointerenter', { bubbles: true }));
|
|
722
|
+
await opened;
|
|
723
|
+
activeOverlays = document.querySelectorAll('active-overlay');
|
|
724
|
+
expect(activeOverlays.length).to.equal(2);
|
|
725
|
+
opened = oneEvent(childMenu2, 'sp-opened');
|
|
726
|
+
childMenu2.dispatchEvent(new PointerEvent('pointerenter', { bubbles: true }));
|
|
727
|
+
await opened;
|
|
728
|
+
activeOverlays = document.querySelectorAll('active-overlay');
|
|
729
|
+
expect(activeOverlays.length).to.equal(3);
|
|
730
|
+
const closed = Promise.all([
|
|
731
|
+
oneEvent(childMenu2, 'sp-closed'),
|
|
732
|
+
oneEvent(rootMenu1, 'sp-closed'),
|
|
733
|
+
oneEvent(el, 'sp-closed'),
|
|
734
|
+
]);
|
|
735
|
+
ancestorItem.click();
|
|
736
|
+
await closed;
|
|
737
|
+
activeOverlays = document.querySelectorAll('active-overlay');
|
|
738
|
+
expect(activeOverlays.length).to.equal(0);
|
|
739
|
+
});
|
|
486
740
|
});
|
|
487
741
|
//# sourceMappingURL=submenu.test.js.map
|