@spectrum-web-components/action-menu 1.2.0-beta.8 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +20 -0
- package/package.json +8 -8
- package/src/ActionMenu.d.ts +2 -0
- package/src/ActionMenu.dev.js +19 -0
- package/src/ActionMenu.dev.js.map +2 -2
- package/src/ActionMenu.js +2 -2
- package/src/ActionMenu.js.map +2 -2
- package/stories/action-menu.stories.js +21 -0
- package/stories/action-menu.stories.js.map +2 -2
- package/test/action-menu-directive.test.js +3 -3
- package/test/action-menu-directive.test.js.map +2 -2
- package/test/action-menu-groups.test.js +9 -14
- package/test/action-menu-groups.test.js.map +2 -2
- package/test/index.js +113 -64
- package/test/index.js.map +2 -2
package/custom-elements.json
CHANGED
|
@@ -123,6 +123,26 @@
|
|
|
123
123
|
},
|
|
124
124
|
"privacy": "protected",
|
|
125
125
|
"readonly": true
|
|
126
|
+
},
|
|
127
|
+
{
|
|
128
|
+
"kind": "method",
|
|
129
|
+
"name": "hasAccessibleLabel",
|
|
130
|
+
"privacy": "protected",
|
|
131
|
+
"return": {
|
|
132
|
+
"type": {
|
|
133
|
+
"text": "boolean"
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
"kind": "method",
|
|
139
|
+
"name": "warnNoLabel",
|
|
140
|
+
"privacy": "protected",
|
|
141
|
+
"return": {
|
|
142
|
+
"type": {
|
|
143
|
+
"text": "void"
|
|
144
|
+
}
|
|
145
|
+
}
|
|
126
146
|
}
|
|
127
147
|
],
|
|
128
148
|
"attributes": [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/action-menu",
|
|
3
|
-
"version": "1.2.0
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -61,12 +61,12 @@
|
|
|
61
61
|
"lit-html"
|
|
62
62
|
],
|
|
63
63
|
"dependencies": {
|
|
64
|
-
"@spectrum-web-components/action-button": "^1.2.0
|
|
65
|
-
"@spectrum-web-components/base": "^1.2.0
|
|
66
|
-
"@spectrum-web-components/icon": "^1.2.0
|
|
67
|
-
"@spectrum-web-components/icons-workflow": "^1.2.0
|
|
68
|
-
"@spectrum-web-components/picker": "^1.2.0
|
|
69
|
-
"@spectrum-web-components/shared": "^1.2.0
|
|
64
|
+
"@spectrum-web-components/action-button": "^1.2.0",
|
|
65
|
+
"@spectrum-web-components/base": "^1.2.0",
|
|
66
|
+
"@spectrum-web-components/icon": "^1.2.0",
|
|
67
|
+
"@spectrum-web-components/icons-workflow": "^1.2.0",
|
|
68
|
+
"@spectrum-web-components/picker": "^1.2.0",
|
|
69
|
+
"@spectrum-web-components/shared": "^1.2.0"
|
|
70
70
|
},
|
|
71
71
|
"devDependencies": {
|
|
72
72
|
"@spectrum-css/actionmenu": "7.0.0-s2-foundations.15"
|
|
@@ -78,5 +78,5 @@
|
|
|
78
78
|
"./**/*.dev.js",
|
|
79
79
|
"./sync/sp-*.js"
|
|
80
80
|
],
|
|
81
|
-
"gitHead": "
|
|
81
|
+
"gitHead": "e4aec7b389e6209984e4df74f9b86b3ee0c485dd"
|
|
82
82
|
}
|
package/src/ActionMenu.d.ts
CHANGED
|
@@ -34,5 +34,7 @@ export declare class ActionMenu extends ActionMenu_base {
|
|
|
34
34
|
protected get buttonContent(): TemplateResult[];
|
|
35
35
|
protected render(): TemplateResult;
|
|
36
36
|
protected update(changedProperties: PropertyValues<this>): void;
|
|
37
|
+
protected hasAccessibleLabel(): boolean;
|
|
38
|
+
protected warnNoLabel(): void;
|
|
37
39
|
}
|
|
38
40
|
export {};
|
package/src/ActionMenu.dev.js
CHANGED
|
@@ -105,6 +105,25 @@ export class ActionMenu extends ObserveSlotPresence(
|
|
|
105
105
|
}
|
|
106
106
|
super.update(changedProperties);
|
|
107
107
|
}
|
|
108
|
+
hasAccessibleLabel() {
|
|
109
|
+
return !!this.label || !!this.getAttribute("aria-label") || !!this.getAttribute("aria-labelledby") || !!this.appliedLabel || this.hasLabel || this.labelOnly;
|
|
110
|
+
}
|
|
111
|
+
warnNoLabel() {
|
|
112
|
+
window.__swc.warn(
|
|
113
|
+
this,
|
|
114
|
+
`<${this.localName}> needs one of the following to be accessible:`,
|
|
115
|
+
"https://opensource.adobe.com/spectrum-web-components/components/action-menu/#accessibility",
|
|
116
|
+
{
|
|
117
|
+
type: "accessibility",
|
|
118
|
+
issues: [
|
|
119
|
+
`an <sp-field-label> element with a \`for\` attribute referencing the \`id\` of the \`<${this.localName}>\`, or`,
|
|
120
|
+
'value supplied to the "label" attribute, which will be displayed visually as placeholder text',
|
|
121
|
+
'text content supplied in a <span> with slot="label", or, text content supplied in a <span> with slot="label-only"',
|
|
122
|
+
"which will also be displayed visually as placeholder text."
|
|
123
|
+
]
|
|
124
|
+
}
|
|
125
|
+
);
|
|
126
|
+
}
|
|
108
127
|
}
|
|
109
128
|
__decorateClass([
|
|
110
129
|
property({ type: String })
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["ActionMenu.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 {\n CSSResultArray,\n html,\n PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { state } from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { DESCRIPTION_ID, PickerBase } from '@spectrum-web-components/picker';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';\nimport { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-more.js';\nimport actionMenuStyles from './action-menu.css.js';\nimport { SlottableRequestEvent } from '@spectrum-web-components/overlay/src/slottable-request-event.js';\n\n/**\n * @element sp-action-menu\n *\n * @slot - menu items to be listed in the Action Menu\n * @slot icon - The icon to use for the Action Menu\n * @slot label - The label to use for the Action Menu\n * @slot label-only - The label to use for the Action Menu (no icon space reserved)\n * @slot tooltip - Tooltip to be applied to the Action Button\n * @attr selects - By default `sp-action-menu` does not manage a selection. If\n * you'd like for a selection to be held by the `sp-menu` that it presents in\n * its overlay, use `selects=\"single\" to activate this functionality.\n */\nexport class ActionMenu extends ObserveSlotPresence(\n ObserveSlotText(PickerBase, 'label'),\n '[slot=\"label-only\"]'\n) {\n public static override get styles(): CSSResultArray {\n return [actionMenuStyles];\n }\n\n @property({ type: String })\n public override selects: undefined | 'single' = undefined;\n\n @property({ reflect: true, attribute: 'static-color' })\n public staticColor?: 'white' | 'black';\n\n protected override listRole: 'listbox' | 'menu' = 'menu';\n protected override itemRole = 'menuitem';\n private get hasLabel(): boolean {\n return this.slotHasContent;\n }\n\n @state()\n private get labelOnly(): boolean {\n return this.slotContentIsPresent;\n }\n\n public override handleSlottableRequest = (\n event: SlottableRequestEvent\n ): void => {\n this.dispatchEvent(new SlottableRequestEvent(event.name, event.data));\n };\n\n protected override get buttonContent(): TemplateResult[] {\n return [\n html`\n ${this.labelOnly\n ? html``\n : html`\n <slot\n name=\"icon\"\n slot=\"icon\"\n ?icon-only=${!this.hasLabel}\n ?hidden=${this.labelOnly}\n >\n <sp-icon-more\n class=\"icon\"\n size=${this.size}\n ></sp-icon-more>\n </slot>\n `}\n <slot name=\"label\" ?hidden=${!this.hasLabel}></slot>\n <slot name=\"label-only\"></slot>\n <slot\n name=\"tooltip\"\n @slotchange=${this.handleTooltipSlotchange}\n ></slot>\n `,\n ];\n }\n\n protected override render(): TemplateResult {\n if (this.tooltipEl) {\n this.tooltipEl.disabled = this.open;\n }\n return html`\n <sp-action-button\n aria-describedby=${DESCRIPTION_ID}\n ?quiet=${this.quiet}\n ?selected=${this.open}\n static-color=${ifDefined(this.staticColor)}\n aria-haspopup=\"true\"\n aria-controls=${ifDefined(this.open ? 'menu' : undefined)}\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-label=${ifDefined(this.label || undefined)}\n id=\"button\"\n class=\"button\"\n size=${this.size}\n @blur=${this.handleButtonBlur}\n @focus=${this.handleButtonFocus}\n @keydown=${{\n handleEvent: this.handleEnterKeydown,\n capture: true,\n }}\n ?disabled=${this.disabled}\n >\n ${this.buttonContent}\n </sp-action-button>\n ${this.renderMenu} ${this.renderDescriptionSlot}\n `;\n }\n\n protected override update(changedProperties: PropertyValues<this>): void {\n if (changedProperties.has('invalid')) {\n this.invalid = false;\n }\n super.update(changedProperties);\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,OAGG;AACP,SAAS,aAAa;AACtB,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,gBAAgB,kBAAkB;AAC3C,OAAO;AACP,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAChC,OAAO;AACP,OAAO,sBAAsB;AAC7B,SAAS,6BAA6B;AAc/B,aAAM,mBAAmB;AAAA,EAC5B,gBAAgB,YAAY,OAAO;AAAA,EACnC;AACJ,EAAE;AAAA,EAHK;AAAA;AASH,SAAgB,UAAgC;AAKhD,SAAmB,WAA+B;AAClD,SAAmB,WAAW;AAU9B,SAAgB,yBAAyB,CACrC,UACO;AACP,WAAK,cAAc,IAAI,sBAAsB,MAAM,MAAM,MAAM,IAAI,CAAC;AAAA,IACxE;AAAA;AAAA,EAzBA,WAA2B,SAAyB;AAChD,WAAO,CAAC,gBAAgB;AAAA,EAC5B;AAAA,EAUA,IAAY,WAAoB;AAC5B,WAAO,KAAK;AAAA,EAChB;AAAA,EAGA,IAAY,YAAqB;AAC7B,WAAO,KAAK;AAAA,EAChB;AAAA,EAQA,IAAuB,gBAAkC;AACrD,WAAO;AAAA,MACH;AAAA,kBACM,KAAK,YACD,SACA;AAAA;AAAA;AAAA;AAAA,2CAIqB,CAAC,KAAK,QAAQ;AAAA,wCACjB,KAAK,SAAS;AAAA;AAAA;AAAA;AAAA,yCAIb,KAAK,IAAI;AAAA;AAAA;AAAA,uBAG3B;AAAA,6CACsB,CAAC,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,kCAIzB,KAAK,uBAAuB;AAAA;AAAA;AAAA,IAGtD;AAAA,EACJ;AAAA,EAEmB,SAAyB;AACxC,QAAI,KAAK,WAAW;AAChB,WAAK,UAAU,WAAW,KAAK;AAAA,IACnC;AACA,WAAO;AAAA;AAAA,mCAEoB,cAAc;AAAA,yBACxB,KAAK,KAAK;AAAA,4BACP,KAAK,IAAI;AAAA,+BACN,UAAU,KAAK,WAAW,CAAC;AAAA;AAAA,gCAE1B,UAAU,KAAK,OAAO,SAAS,MAAS,CAAC;AAAA,gCACzC,KAAK,OAAO,SAAS,OAAO;AAAA,6BAC/B,UAAU,KAAK,SAAS,MAAS,CAAC;AAAA;AAAA;AAAA,uBAGxC,KAAK,IAAI;AAAA,wBACR,KAAK,gBAAgB;AAAA,yBACpB,KAAK,iBAAiB;AAAA,2BACpB;AAAA,MACP,aAAa,KAAK;AAAA,MAClB,SAAS;AAAA,IACb,CAAC;AAAA,4BACW,KAAK,QAAQ;AAAA;AAAA,kBAEvB,KAAK,aAAa;AAAA;AAAA,cAEtB,KAAK,UAAU,IAAI,KAAK,qBAAqB;AAAA;AAAA,EAEvD;AAAA,EAEmB,OAAO,mBAA+C;AACrE,QAAI,kBAAkB,IAAI,SAAS,GAAG;AAClC,WAAK,UAAU;AAAA,IACnB;AACA,UAAM,OAAO,iBAAiB;AAAA,EAClC;AACJ;
|
|
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 {\n CSSResultArray,\n html,\n PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { state } from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { DESCRIPTION_ID, PickerBase } from '@spectrum-web-components/picker';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';\nimport { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-more.js';\nimport actionMenuStyles from './action-menu.css.js';\nimport { SlottableRequestEvent } from '@spectrum-web-components/overlay/src/slottable-request-event.js';\n\n/**\n * @element sp-action-menu\n *\n * @slot - menu items to be listed in the Action Menu\n * @slot icon - The icon to use for the Action Menu\n * @slot label - The label to use for the Action Menu\n * @slot label-only - The label to use for the Action Menu (no icon space reserved)\n * @slot tooltip - Tooltip to be applied to the Action Button\n * @attr selects - By default `sp-action-menu` does not manage a selection. If\n * you'd like for a selection to be held by the `sp-menu` that it presents in\n * its overlay, use `selects=\"single\" to activate this functionality.\n */\nexport class ActionMenu extends ObserveSlotPresence(\n ObserveSlotText(PickerBase, 'label'),\n '[slot=\"label-only\"]'\n) {\n public static override get styles(): CSSResultArray {\n return [actionMenuStyles];\n }\n\n @property({ type: String })\n public override selects: undefined | 'single' = undefined;\n\n @property({ reflect: true, attribute: 'static-color' })\n public staticColor?: 'white' | 'black';\n\n protected override listRole: 'listbox' | 'menu' = 'menu';\n protected override itemRole = 'menuitem';\n private get hasLabel(): boolean {\n return this.slotHasContent;\n }\n\n @state()\n private get labelOnly(): boolean {\n return this.slotContentIsPresent;\n }\n\n public override handleSlottableRequest = (\n event: SlottableRequestEvent\n ): void => {\n this.dispatchEvent(new SlottableRequestEvent(event.name, event.data));\n };\n\n protected override get buttonContent(): TemplateResult[] {\n return [\n html`\n ${this.labelOnly\n ? html``\n : html`\n <slot\n name=\"icon\"\n slot=\"icon\"\n ?icon-only=${!this.hasLabel}\n ?hidden=${this.labelOnly}\n >\n <sp-icon-more\n class=\"icon\"\n size=${this.size}\n ></sp-icon-more>\n </slot>\n `}\n <slot name=\"label\" ?hidden=${!this.hasLabel}></slot>\n <slot name=\"label-only\"></slot>\n <slot\n name=\"tooltip\"\n @slotchange=${this.handleTooltipSlotchange}\n ></slot>\n `,\n ];\n }\n\n protected override render(): TemplateResult {\n if (this.tooltipEl) {\n this.tooltipEl.disabled = this.open;\n }\n return html`\n <sp-action-button\n aria-describedby=${DESCRIPTION_ID}\n ?quiet=${this.quiet}\n ?selected=${this.open}\n static-color=${ifDefined(this.staticColor)}\n aria-haspopup=\"true\"\n aria-controls=${ifDefined(this.open ? 'menu' : undefined)}\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-label=${ifDefined(this.label || undefined)}\n id=\"button\"\n class=\"button\"\n size=${this.size}\n @blur=${this.handleButtonBlur}\n @focus=${this.handleButtonFocus}\n @keydown=${{\n handleEvent: this.handleEnterKeydown,\n capture: true,\n }}\n ?disabled=${this.disabled}\n >\n ${this.buttonContent}\n </sp-action-button>\n ${this.renderMenu} ${this.renderDescriptionSlot}\n `;\n }\n\n protected override update(changedProperties: PropertyValues<this>): void {\n if (changedProperties.has('invalid')) {\n this.invalid = false;\n }\n super.update(changedProperties);\n }\n\n protected override hasAccessibleLabel(): boolean {\n return (\n !!this.label ||\n !!this.getAttribute('aria-label') ||\n !!this.getAttribute('aria-labelledby') ||\n !!this.appliedLabel ||\n this.hasLabel ||\n this.labelOnly\n );\n }\n\n protected override warnNoLabel(): void {\n window.__swc.warn(\n this,\n `<${this.localName}> needs one of the following to be accessible:`,\n 'https://opensource.adobe.com/spectrum-web-components/components/action-menu/#accessibility',\n {\n type: 'accessibility',\n issues: [\n `an <sp-field-label> element with a \\`for\\` attribute referencing the \\`id\\` of the \\`<${this.localName}>\\`, or`,\n 'value supplied to the \"label\" attribute, which will be displayed visually as placeholder text',\n 'text content supplied in a <span> with slot=\"label\", or, text content supplied in a <span> with slot=\"label-only\"',\n 'which will also be displayed visually as placeholder text.',\n ],\n }\n );\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/ActionMenu.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var h=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var o=(a,l,e,i)=>{for(var t=i>1?void 0:i?c(l,e):l,r=a.length-1,n;r>=0;r--)(n=a[r])&&(t=(i?n(l,e,t):n(t))||t);return i&&t&&h(l,e,t),t};import{html as s}from"@spectrum-web-components/base";import{state as u}from"@spectrum-web-components/base/src/decorators.js";import{ifDefined as d}from"@spectrum-web-components/base/src/directives.js";import{property as p}from"@spectrum-web-components/base/src/decorators.js";import{DESCRIPTION_ID as b,PickerBase as m}from"@spectrum-web-components/picker";import"@spectrum-web-components/action-button/sp-action-button.js";import{ObserveSlotPresence as f}from"@spectrum-web-components/shared/src/observe-slot-presence.js";import{ObserveSlotText as y}from"@spectrum-web-components/shared/src/observe-slot-text.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-more.js";import v from"./action-menu.css.js";import{SlottableRequestEvent as $}from"@spectrum-web-components/overlay/src/slottable-request-event.js";export class ActionMenu extends f(y(m,"label"),'[slot="label-only"]'){constructor(){super(...arguments);this.selects=void 0;this.listRole="menu";this.itemRole="menuitem";this.handleSlottableRequest=e=>{this.dispatchEvent(new $(e.name,e.data))}}static get styles(){return[v]}get hasLabel(){return this.slotHasContent}get labelOnly(){return this.slotContentIsPresent}get buttonContent(){return[s`
|
|
2
2
|
${this.labelOnly?s``:s`
|
|
3
3
|
<slot
|
|
4
4
|
name="icon"
|
|
@@ -39,5 +39,5 @@
|
|
|
39
39
|
${this.buttonContent}
|
|
40
40
|
</sp-action-button>
|
|
41
41
|
${this.renderMenu} ${this.renderDescriptionSlot}
|
|
42
|
-
`}update(e){e.has("invalid")&&(this.invalid=!1),super.update(e)}}
|
|
42
|
+
`}update(e){e.has("invalid")&&(this.invalid=!1),super.update(e)}hasAccessibleLabel(){return!!this.label||!!this.getAttribute("aria-label")||!!this.getAttribute("aria-labelledby")||!!this.appliedLabel||this.hasLabel||this.labelOnly}warnNoLabel(){window.__swc.warn(this,`<${this.localName}> needs one of the following to be accessible:`,"https://opensource.adobe.com/spectrum-web-components/components/action-menu/#accessibility",{type:"accessibility",issues:[`an <sp-field-label> element with a \`for\` attribute referencing the \`id\` of the \`<${this.localName}>\`, or`,'value supplied to the "label" attribute, which will be displayed visually as placeholder text','text content supplied in a <span> with slot="label", or, text content supplied in a <span> with slot="label-only"',"which will also be displayed visually as placeholder text."]})}}o([p({type:String})],ActionMenu.prototype,"selects",2),o([p({reflect:!0,attribute:"static-color"})],ActionMenu.prototype,"staticColor",2),o([u()],ActionMenu.prototype,"labelOnly",1);
|
|
43
43
|
//# sourceMappingURL=ActionMenu.js.map
|
package/src/ActionMenu.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["ActionMenu.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 {\n CSSResultArray,\n html,\n PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { state } from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { DESCRIPTION_ID, PickerBase } from '@spectrum-web-components/picker';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';\nimport { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-more.js';\nimport actionMenuStyles from './action-menu.css.js';\nimport { SlottableRequestEvent } from '@spectrum-web-components/overlay/src/slottable-request-event.js';\n\n/**\n * @element sp-action-menu\n *\n * @slot - menu items to be listed in the Action Menu\n * @slot icon - The icon to use for the Action Menu\n * @slot label - The label to use for the Action Menu\n * @slot label-only - The label to use for the Action Menu (no icon space reserved)\n * @slot tooltip - Tooltip to be applied to the Action Button\n * @attr selects - By default `sp-action-menu` does not manage a selection. If\n * you'd like for a selection to be held by the `sp-menu` that it presents in\n * its overlay, use `selects=\"single\" to activate this functionality.\n */\nexport class ActionMenu extends ObserveSlotPresence(\n ObserveSlotText(PickerBase, 'label'),\n '[slot=\"label-only\"]'\n) {\n public static override get styles(): CSSResultArray {\n return [actionMenuStyles];\n }\n\n @property({ type: String })\n public override selects: undefined | 'single' = undefined;\n\n @property({ reflect: true, attribute: 'static-color' })\n public staticColor?: 'white' | 'black';\n\n protected override listRole: 'listbox' | 'menu' = 'menu';\n protected override itemRole = 'menuitem';\n private get hasLabel(): boolean {\n return this.slotHasContent;\n }\n\n @state()\n private get labelOnly(): boolean {\n return this.slotContentIsPresent;\n }\n\n public override handleSlottableRequest = (\n event: SlottableRequestEvent\n ): void => {\n this.dispatchEvent(new SlottableRequestEvent(event.name, event.data));\n };\n\n protected override get buttonContent(): TemplateResult[] {\n return [\n html`\n ${this.labelOnly\n ? html``\n : html`\n <slot\n name=\"icon\"\n slot=\"icon\"\n ?icon-only=${!this.hasLabel}\n ?hidden=${this.labelOnly}\n >\n <sp-icon-more\n class=\"icon\"\n size=${this.size}\n ></sp-icon-more>\n </slot>\n `}\n <slot name=\"label\" ?hidden=${!this.hasLabel}></slot>\n <slot name=\"label-only\"></slot>\n <slot\n name=\"tooltip\"\n @slotchange=${this.handleTooltipSlotchange}\n ></slot>\n `,\n ];\n }\n\n protected override render(): TemplateResult {\n if (this.tooltipEl) {\n this.tooltipEl.disabled = this.open;\n }\n return html`\n <sp-action-button\n aria-describedby=${DESCRIPTION_ID}\n ?quiet=${this.quiet}\n ?selected=${this.open}\n static-color=${ifDefined(this.staticColor)}\n aria-haspopup=\"true\"\n aria-controls=${ifDefined(this.open ? 'menu' : undefined)}\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-label=${ifDefined(this.label || undefined)}\n id=\"button\"\n class=\"button\"\n size=${this.size}\n @blur=${this.handleButtonBlur}\n @focus=${this.handleButtonFocus}\n @keydown=${{\n handleEvent: this.handleEnterKeydown,\n capture: true,\n }}\n ?disabled=${this.disabled}\n >\n ${this.buttonContent}\n </sp-action-button>\n ${this.renderMenu} ${this.renderDescriptionSlot}\n `;\n }\n\n protected override update(changedProperties: PropertyValues<this>): void {\n if (changedProperties.has('invalid')) {\n this.invalid = false;\n }\n super.update(changedProperties);\n }\n}\n"],
|
|
5
|
-
"mappings": "qNAYA,OAEI,QAAAA,MAGG,gCACP,OAAS,SAAAC,MAAa,kDACtB,OAAS,aAAAC,MAAiB,kDAC1B,OAAS,YAAAC,MAAgB,kDACzB,OAAS,kBAAAC,EAAgB,cAAAC,MAAkB,kCAC3C,MAAO,6DACP,OAAS,uBAAAC,MAA2B,+DACpC,OAAS,mBAAAC,MAAuB,2DAChC,MAAO,gEACP,OAAOC,MAAsB,uBAC7B,OAAS,yBAAAC,MAA6B,kEAc/B,aAAM,mBAAmBH,EAC5BC,EAAgBF,EAAY,OAAO,EACnC,qBACJ,CAAE,CAHK,kCASH,KAAgB,QAAgC,OAKhD,KAAmB,SAA+B,OAClD,KAAmB,SAAW,WAU9B,KAAgB,uBACZK,GACO,CACP,KAAK,cAAc,IAAID,EAAsBC,EAAM,KAAMA,EAAM,IAAI,CAAC,CACxE,EAzBA,WAA2B,QAAyB,CAChD,MAAO,CAACF,CAAgB,CAC5B,CAUA,IAAY,UAAoB,CAC5B,OAAO,KAAK,cAChB,CAGA,IAAY,WAAqB,CAC7B,OAAO,KAAK,oBAChB,CAQA,IAAuB,eAAkC,CACrD,MAAO,CACHR;AAAA,kBACM,KAAK,UACDA,IACAA;AAAA;AAAA;AAAA;AAAA,2CAIqB,CAAC,KAAK,QAAQ;AAAA,wCACjB,KAAK,SAAS;AAAA;AAAA;AAAA;AAAA,yCAIb,KAAK,IAAI;AAAA;AAAA;AAAA,uBAG3B;AAAA,6CACsB,CAAC,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,kCAIzB,KAAK,uBAAuB;AAAA;AAAA,aAGtD,CACJ,CAEmB,QAAyB,CACxC,OAAI,KAAK,YACL,KAAK,UAAU,SAAW,KAAK,MAE5BA;AAAA;AAAA,mCAEoBI,CAAc;AAAA,yBACxB,KAAK,KAAK;AAAA,4BACP,KAAK,IAAI;AAAA,+BACNF,EAAU,KAAK,WAAW,CAAC;AAAA;AAAA,gCAE1BA,EAAU,KAAK,KAAO,OAAS,MAAS,CAAC;AAAA,gCACzC,KAAK,KAAO,OAAS,OAAO;AAAA,6BAC/BA,EAAU,KAAK,OAAS,MAAS,CAAC;AAAA;AAAA;AAAA,uBAGxC,KAAK,IAAI;AAAA,wBACR,KAAK,gBAAgB;AAAA,yBACpB,KAAK,iBAAiB;AAAA,2BACpB,CACP,YAAa,KAAK,mBAClB,QAAS,EACb,CAAC;AAAA,4BACW,KAAK,QAAQ;AAAA;AAAA,kBAEvB,KAAK,aAAa;AAAA;AAAA,cAEtB,KAAK,UAAU,IAAI,KAAK,qBAAqB;AAAA,SAEvD,CAEmB,OAAOS,EAA+C,CACjEA,EAAkB,IAAI,SAAS,IAC/B,KAAK,QAAU,IAEnB,MAAM,OAAOA,CAAiB,CAClC,CACJ,
|
|
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 {\n CSSResultArray,\n html,\n PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { state } from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { DESCRIPTION_ID, PickerBase } from '@spectrum-web-components/picker';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';\nimport { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-more.js';\nimport actionMenuStyles from './action-menu.css.js';\nimport { SlottableRequestEvent } from '@spectrum-web-components/overlay/src/slottable-request-event.js';\n\n/**\n * @element sp-action-menu\n *\n * @slot - menu items to be listed in the Action Menu\n * @slot icon - The icon to use for the Action Menu\n * @slot label - The label to use for the Action Menu\n * @slot label-only - The label to use for the Action Menu (no icon space reserved)\n * @slot tooltip - Tooltip to be applied to the Action Button\n * @attr selects - By default `sp-action-menu` does not manage a selection. If\n * you'd like for a selection to be held by the `sp-menu` that it presents in\n * its overlay, use `selects=\"single\" to activate this functionality.\n */\nexport class ActionMenu extends ObserveSlotPresence(\n ObserveSlotText(PickerBase, 'label'),\n '[slot=\"label-only\"]'\n) {\n public static override get styles(): CSSResultArray {\n return [actionMenuStyles];\n }\n\n @property({ type: String })\n public override selects: undefined | 'single' = undefined;\n\n @property({ reflect: true, attribute: 'static-color' })\n public staticColor?: 'white' | 'black';\n\n protected override listRole: 'listbox' | 'menu' = 'menu';\n protected override itemRole = 'menuitem';\n private get hasLabel(): boolean {\n return this.slotHasContent;\n }\n\n @state()\n private get labelOnly(): boolean {\n return this.slotContentIsPresent;\n }\n\n public override handleSlottableRequest = (\n event: SlottableRequestEvent\n ): void => {\n this.dispatchEvent(new SlottableRequestEvent(event.name, event.data));\n };\n\n protected override get buttonContent(): TemplateResult[] {\n return [\n html`\n ${this.labelOnly\n ? html``\n : html`\n <slot\n name=\"icon\"\n slot=\"icon\"\n ?icon-only=${!this.hasLabel}\n ?hidden=${this.labelOnly}\n >\n <sp-icon-more\n class=\"icon\"\n size=${this.size}\n ></sp-icon-more>\n </slot>\n `}\n <slot name=\"label\" ?hidden=${!this.hasLabel}></slot>\n <slot name=\"label-only\"></slot>\n <slot\n name=\"tooltip\"\n @slotchange=${this.handleTooltipSlotchange}\n ></slot>\n `,\n ];\n }\n\n protected override render(): TemplateResult {\n if (this.tooltipEl) {\n this.tooltipEl.disabled = this.open;\n }\n return html`\n <sp-action-button\n aria-describedby=${DESCRIPTION_ID}\n ?quiet=${this.quiet}\n ?selected=${this.open}\n static-color=${ifDefined(this.staticColor)}\n aria-haspopup=\"true\"\n aria-controls=${ifDefined(this.open ? 'menu' : undefined)}\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-label=${ifDefined(this.label || undefined)}\n id=\"button\"\n class=\"button\"\n size=${this.size}\n @blur=${this.handleButtonBlur}\n @focus=${this.handleButtonFocus}\n @keydown=${{\n handleEvent: this.handleEnterKeydown,\n capture: true,\n }}\n ?disabled=${this.disabled}\n >\n ${this.buttonContent}\n </sp-action-button>\n ${this.renderMenu} ${this.renderDescriptionSlot}\n `;\n }\n\n protected override update(changedProperties: PropertyValues<this>): void {\n if (changedProperties.has('invalid')) {\n this.invalid = false;\n }\n super.update(changedProperties);\n }\n\n protected override hasAccessibleLabel(): boolean {\n return (\n !!this.label ||\n !!this.getAttribute('aria-label') ||\n !!this.getAttribute('aria-labelledby') ||\n !!this.appliedLabel ||\n this.hasLabel ||\n this.labelOnly\n );\n }\n\n protected override warnNoLabel(): void {\n window.__swc.warn(\n this,\n `<${this.localName}> needs one of the following to be accessible:`,\n 'https://opensource.adobe.com/spectrum-web-components/components/action-menu/#accessibility',\n {\n type: 'accessibility',\n issues: [\n `an <sp-field-label> element with a \\`for\\` attribute referencing the \\`id\\` of the \\`<${this.localName}>\\`, or`,\n 'value supplied to the \"label\" attribute, which will be displayed visually as placeholder text',\n 'text content supplied in a <span> with slot=\"label\", or, text content supplied in a <span> with slot=\"label-only\"',\n 'which will also be displayed visually as placeholder text.',\n ],\n }\n );\n }\n}\n"],
|
|
5
|
+
"mappings": "qNAYA,OAEI,QAAAA,MAGG,gCACP,OAAS,SAAAC,MAAa,kDACtB,OAAS,aAAAC,MAAiB,kDAC1B,OAAS,YAAAC,MAAgB,kDACzB,OAAS,kBAAAC,EAAgB,cAAAC,MAAkB,kCAC3C,MAAO,6DACP,OAAS,uBAAAC,MAA2B,+DACpC,OAAS,mBAAAC,MAAuB,2DAChC,MAAO,gEACP,OAAOC,MAAsB,uBAC7B,OAAS,yBAAAC,MAA6B,kEAc/B,aAAM,mBAAmBH,EAC5BC,EAAgBF,EAAY,OAAO,EACnC,qBACJ,CAAE,CAHK,kCASH,KAAgB,QAAgC,OAKhD,KAAmB,SAA+B,OAClD,KAAmB,SAAW,WAU9B,KAAgB,uBACZK,GACO,CACP,KAAK,cAAc,IAAID,EAAsBC,EAAM,KAAMA,EAAM,IAAI,CAAC,CACxE,EAzBA,WAA2B,QAAyB,CAChD,MAAO,CAACF,CAAgB,CAC5B,CAUA,IAAY,UAAoB,CAC5B,OAAO,KAAK,cAChB,CAGA,IAAY,WAAqB,CAC7B,OAAO,KAAK,oBAChB,CAQA,IAAuB,eAAkC,CACrD,MAAO,CACHR;AAAA,kBACM,KAAK,UACDA,IACAA;AAAA;AAAA;AAAA;AAAA,2CAIqB,CAAC,KAAK,QAAQ;AAAA,wCACjB,KAAK,SAAS;AAAA;AAAA;AAAA;AAAA,yCAIb,KAAK,IAAI;AAAA;AAAA;AAAA,uBAG3B;AAAA,6CACsB,CAAC,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,kCAIzB,KAAK,uBAAuB;AAAA;AAAA,aAGtD,CACJ,CAEmB,QAAyB,CACxC,OAAI,KAAK,YACL,KAAK,UAAU,SAAW,KAAK,MAE5BA;AAAA;AAAA,mCAEoBI,CAAc;AAAA,yBACxB,KAAK,KAAK;AAAA,4BACP,KAAK,IAAI;AAAA,+BACNF,EAAU,KAAK,WAAW,CAAC;AAAA;AAAA,gCAE1BA,EAAU,KAAK,KAAO,OAAS,MAAS,CAAC;AAAA,gCACzC,KAAK,KAAO,OAAS,OAAO;AAAA,6BAC/BA,EAAU,KAAK,OAAS,MAAS,CAAC;AAAA;AAAA;AAAA,uBAGxC,KAAK,IAAI;AAAA,wBACR,KAAK,gBAAgB;AAAA,yBACpB,KAAK,iBAAiB;AAAA,2BACpB,CACP,YAAa,KAAK,mBAClB,QAAS,EACb,CAAC;AAAA,4BACW,KAAK,QAAQ;AAAA;AAAA,kBAEvB,KAAK,aAAa;AAAA;AAAA,cAEtB,KAAK,UAAU,IAAI,KAAK,qBAAqB;AAAA,SAEvD,CAEmB,OAAOS,EAA+C,CACjEA,EAAkB,IAAI,SAAS,IAC/B,KAAK,QAAU,IAEnB,MAAM,OAAOA,CAAiB,CAClC,CAEmB,oBAA8B,CAC7C,MACI,CAAC,CAAC,KAAK,OACP,CAAC,CAAC,KAAK,aAAa,YAAY,GAChC,CAAC,CAAC,KAAK,aAAa,iBAAiB,GACrC,CAAC,CAAC,KAAK,cACP,KAAK,UACL,KAAK,SAEb,CAEmB,aAAoB,CACnC,OAAO,MAAM,KACT,KACA,IAAI,KAAK,SAAS,iDAClB,6FACA,CACI,KAAM,gBACN,OAAQ,CACJ,yFAAyF,KAAK,SAAS,UACvG,gGACA,oHACA,4DACJ,CACJ,CACJ,CACJ,CACJ,CAnHoBC,EAAA,CADfT,EAAS,CAAE,KAAM,MAAO,CAAC,GARjB,WASO,uBAGTS,EAAA,CADNT,EAAS,CAAE,QAAS,GAAM,UAAW,cAAe,CAAC,GAX7C,WAYF,2BASKS,EAAA,CADXX,EAAM,GApBE,WAqBG",
|
|
6
6
|
"names": ["html", "state", "ifDefined", "property", "DESCRIPTION_ID", "PickerBase", "ObserveSlotPresence", "ObserveSlotText", "actionMenuStyles", "SlottableRequestEvent", "event", "changedProperties", "__decorateClass"]
|
|
7
7
|
}
|
|
@@ -347,6 +347,7 @@ export const groups = ({
|
|
|
347
347
|
onChange
|
|
348
348
|
}) => html`
|
|
349
349
|
<sp-action-menu
|
|
350
|
+
id="groups"
|
|
350
351
|
@change=${({ target: { value } }) => onChange(value)}
|
|
351
352
|
open
|
|
352
353
|
style=${ifDefined(align === "end" ? "float: inline-end;" : void 0)}
|
|
@@ -466,4 +467,24 @@ export const withScrollEvent = () => {
|
|
|
466
467
|
withScrollEvent.parameters = {
|
|
467
468
|
chromatic: { disableSnapshot: true }
|
|
468
469
|
};
|
|
470
|
+
export const MenuItemAlerts = () => html`
|
|
471
|
+
<sp-action-menu size="m">
|
|
472
|
+
<span slot="label">More Actions</span>
|
|
473
|
+
<sp-menu-item @click=${() => alert("Deselect")}>Deselect</sp-menu-item>
|
|
474
|
+
<sp-menu-item @click=${() => alert("Select inverse")}>
|
|
475
|
+
Select inverse
|
|
476
|
+
</sp-menu-item>
|
|
477
|
+
<sp-menu-item @click=${() => alert("Feather...")}>
|
|
478
|
+
Feather...
|
|
479
|
+
</sp-menu-item>
|
|
480
|
+
<sp-menu-item @click=${() => alert("Select and mask...")}>
|
|
481
|
+
Select and mask...
|
|
482
|
+
</sp-menu-item>
|
|
483
|
+
<sp-menu-divider></sp-menu-divider>
|
|
484
|
+
<sp-menu-item @click=${() => alert("Save selection")}>
|
|
485
|
+
Save selection
|
|
486
|
+
</sp-menu-item>
|
|
487
|
+
<sp-menu-item disabled>Make work path</sp-menu-item>
|
|
488
|
+
</sp-action-menu>
|
|
489
|
+
`;
|
|
469
490
|
//# sourceMappingURL=action-menu.stories.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["action-menu.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*/\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\n\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport { slottableRequest } from '@spectrum-web-components/overlay/src/slottable-request-directive.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport { makeOverBackground } from '../../button/stories/index.js';\nimport { isOverlayOpen } from '../../overlay/stories/index.js';\nimport { ActionMenuMarkup } from './';\n\nimport type { ActionMenu } from '@spectrum-web-components/action-menu';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js';\nimport { Menu } from '@spectrum-web-components/menu';\nimport type { MenuItem } from '@spectrum-web-components/menu/src/MenuItem.js';\nimport { Placement } from '@spectrum-web-components/overlay/src/overlay-types.js';\n\nexport default {\n component: 'sp-action-menu',\n title: 'Action menu',\n argTypes: {\n onChange: { action: 'change' },\n disabled: {\n name: 'disabled',\n type: { name: 'boolean', required: false },\n description:\n 'Disable this control. It will not receive focus or events.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n open: {\n name: 'open',\n type: { name: 'boolean', required: false },\n description: 'Whether the menu is open or not.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: 'boolean',\n },\n visibleLabel: {\n name: 'Visible Label',\n description: 'The placeholder content for the picker.',\n type: { name: 'string', required: false },\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: '' },\n },\n control: 'text',\n },\n tooltipDescription: {\n name: 'Tooltip Description',\n type: { name: 'string', required: false },\n description: 'Tooltip description',\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: '' },\n },\n control: {\n type: 'text',\n },\n },\n tooltipPlacement: {\n name: 'Tooltip Placement',\n type: { name: 'string', required: false },\n description: 'Tooltip Placement.',\n table: {\n defaultValue: { summary: 'bottom' },\n },\n control: {\n options: [\n 'auto',\n 'auto-start',\n 'auto-end',\n 'top',\n 'bottom',\n 'right',\n 'left',\n 'top-start',\n 'top-end',\n 'bottom-start',\n 'bottom-end',\n 'right-start',\n 'right-end',\n 'left-start',\n 'left-end',\n 'none',\n ],\n type: 'select',\n },\n },\n quiet: {\n name: 'quiet',\n type: { name: 'boolean', required: false },\n description: 'Quiet rendering',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n staticColorValue: {\n name: 'static-color',\n type: { name: 'string', required: false },\n description:\n 'The visual static color variant to apply to the button.',\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: 'none' },\n },\n control: {\n type: 'select',\n labels: {\n white: 'white',\n black: 'black',\n none: undefined,\n },\n options: ['white', 'black', 'none'],\n },\n },\n align: {\n name: 'align',\n type: { name: 'string', required: false },\n description: 'Alignment of the Action Menu',\n table: {\n defaultValue: { summary: 'start' },\n },\n control: {\n type: 'select',\n labels: {\n start: 'start',\n end: 'end',\n },\n },\n options: ['start', 'end'],\n },\n },\n args: {\n align: 'start',\n visibleLabel: 'More Actions',\n disabled: false,\n forcePopover: false,\n open: false,\n quiet: false,\n tooltipDescription: '',\n tooltipPlacement: 'bottom',\n static: undefined,\n },\n};\n\ninterface StoryArgs {\n align?: 'start' | 'end';\n visibleLabel?: string;\n disabled?: boolean;\n open?: boolean;\n customIcon?: string | TemplateResult;\n selects?: 'single';\n selected?: boolean;\n quiet?: boolean;\n staticValue?: 'white' | 'black' | undefined;\n tooltipDescription?: string | 'none';\n tooltipPlacement?: Placement;\n forcePopover?: boolean;\n}\n\nconst Template = (args: StoryArgs = {}): TemplateResult =>\n ActionMenuMarkup(args);\n\nexport const Default = (args: StoryArgs = {}): TemplateResult => Template(args);\n\nexport const staticWhite = (args: StoryArgs = {}): TemplateResult =>\n Template(args);\nstaticWhite.args = {\n staticValue: 'white',\n};\nstaticWhite.decorators = [makeOverBackground()];\nexport const staticBlack = (args: StoryArgs = {}): TemplateResult =>\n Template(args);\nstaticBlack.args = {\n staticValue: 'black',\n};\nstaticBlack.decorators = [makeOverBackground()];\nexport const quiet = (args: StoryArgs = {}): TemplateResult => Template(args);\nquiet.args = {\n quiet: true,\n};\n\nexport const forcePopoverOnMobile = (): TemplateResult => html`\n <div style=\"padding: 40px\">\n <h1>Force Popover on Mobile</h1>\n <p>\n The forcePopover attribute overrides the mobile device functionality\n of rendering a tray so that a popover will always render no matter\n the device.\n </p>\n <ol>\n <li>Open Chrome DevTools (or equivalent).</li>\n <li>Toggle the Device Toolbar (the phone/tablet icon).</li>\n <li>Select a device preset (e.g. iPhone 12).</li>\n <li>\n Chrome will set user-agent strings, simulate touch, and adjust\n DPI.\n </li>\n <li>Reload the page</li>\n <li>Click the Action Menu and see a popover</li>\n </ol>\n <sp-action-menu forcePopover>\n <span slot=\"icon\">\n <sp-icon-settings></sp-icon-settings>\n </span>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-action-menu>\n </div>\n`;\nexport const labelOnly = ({\n align = 'start',\n changeHandler = (() => undefined) as (event: Event) => void,\n disabled = false,\n open = false,\n size = 'm' as 'm' | 's' | 'l' | 'xl' | 'xxl',\n selects = '' as 'single',\n selected = false,\n} = {}): TemplateResult => html`\n <sp-action-menu\n ?disabled=${disabled}\n ?open=${open}\n size=${size}\n @change=${(event: Event & { target: Menu }): void => {\n navigator.clipboard.writeText(event.target.value);\n changeHandler(event);\n }}\n .selects=${selects ? selects : undefined}\n value=${selected ? 'Select Inverse' : ''}\n style=${ifDefined(align === 'end' ? 'float: inline-end;' : undefined)}\n >\n <span slot=\"label-only\">Label Only</span>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item ?selected=${selected}>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-action-menu>\n`;\n\nexport const selects = (args: StoryArgs = {}): TemplateResult =>\n Template({\n ...args,\n selects: 'single',\n selected: true,\n });\nselects.args = {\n open: true,\n};\nselects.decorators = [isOverlayOpen];\n\nexport const iconOnly = (args: StoryArgs = {}): TemplateResult =>\n Template(args);\niconOnly.args = {\n visibleLabel: '',\n};\n\nexport const tooltipDescriptionAndPlacement = (\n args: StoryArgs = {}\n): TemplateResult => Template(args);\ntooltipDescriptionAndPlacement.args = {\n tooltipDescription: 'Your tooltip string here',\n visibleLabel: '',\n tooltipPlacement: 'bottom',\n} as StoryArgs;\n\nexport const customIcon = (args: StoryArgs): TemplateResult => Template(args);\ncustomIcon.args = {\n customIcon: html`\n <sp-icon-settings slot=\"icon\"></sp-icon-settings>\n `,\n visibleLabel: '',\n};\n\nexport const submenu = ({ align = 'start' } = {}): TemplateResult => {\n return html`\n <sp-action-menu\n label=\"More Actions\"\n style=${ifDefined(\n align === 'end' ? 'float: inline-end;' : undefined\n )}\n >\n <sp-menu-item>One</sp-menu-item>\n <sp-menu-item>Two</sp-menu-item>\n <sp-menu-item>\n Select some items\n <sp-menu slot=\"submenu\" selects=\"multiple\">\n <sp-menu-item>A</sp-menu-item>\n <sp-menu-item selected>B</sp-menu-item>\n <sp-menu-item>C</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n </sp-action-menu>\n `;\n};\n\nexport const controlled = ({ align = 'start' } = {}): TemplateResult => {\n const state = {\n snap: true,\n grid: false,\n guides: true,\n latestChange: '',\n };\n function toggle(prop: 'snap' | 'grid' | 'guides') {\n return (event: Event): void => {\n const item = event.target as MenuItem;\n state[prop] = !state[prop];\n // in Lit-based usage, this would be handled via render():\n // <sp-menu-item ?selected=${this.isSomethingSelected}>\n item.selected = state[prop];\n };\n }\n function onChange(event: Event): void {\n state.latestChange = (event.target as MenuItem).value;\n logState();\n }\n function logState(): void {\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n document.getElementById('state-json')!.textContent =\n `application state: ${JSON.stringify(state)}`;\n }\n return html`\n <sp-action-menu\n label=\"View\"\n @change=${onChange}\n style=${ifDefined(\n align === 'end' ? 'float: inline-end;' : undefined\n )}\n >\n <sp-menu-item value=\"action\" @click=${() => alert('action')}>\n Non-selectable action\n </sp-menu-item>\n <sp-menu-item\n value=\"snap\"\n ?selected=${state.snap}\n @click=${toggle('snap')}\n >\n Snap\n </sp-menu-item>\n <sp-menu-item>\n Show\n <sp-menu\n slot=\"submenu\"\n selects=\"multiple\"\n @change=${(event: Event) => event.preventDefault()}\n >\n <sp-menu-item\n value=\"grid\"\n ?selected=${state.grid}\n @click=${toggle('grid')}\n >\n Grid\n </sp-menu-item>\n <sp-menu-item\n value=\"guides\"\n ?selected=${state.guides}\n @click=${toggle('guides')}\n >\n Guides\n </sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n </sp-action-menu>\n <span id=\"state-json\"></span>\n `;\n};\n\nexport const groups = ({\n align = 'start',\n onChange,\n}: {\n align: 'start' | 'end';\n onChange(value: string): void;\n}): TemplateResult => html`\n <sp-action-menu\n @change=${({ target: { value } }: Event & { target: ActionMenu }) =>\n onChange(value)}\n open\n style=${ifDefined(align === 'end' ? 'float: inline-end;' : undefined)}\n >\n <sp-menu-group id=\"cms\">\n <span slot=\"header\">cms</span>\n <sp-menu-item value=\"updateAllSiteContent\">\n Update All Content\n </sp-menu-item>\n <sp-menu-item value=\"refreshAllXDs\">Refresh All XDs</sp-menu-item>\n </sp-menu-group>\n <sp-menu-group id=\"ssg\">\n <span slot=\"header\">ssg</span>\n <sp-menu-item value=\"clearCache\">Clear Cache</sp-menu-item>\n </sp-menu-group>\n <sp-menu-group id=\"vrt\">\n <span slot=\"header\">vrt</span>\n <sp-menu-item value=\"vrt-contributions\">Contributions</sp-menu-item>\n <sp-menu-item value=\"vrt-internal\">Internal</sp-menu-item>\n <sp-menu-item value=\"vrt-public\">Public</sp-menu-item>\n <sp-menu-item value=\"vrt-patterns\">Patterns</sp-menu-item>\n <sp-menu-item value=\"vrt\">All</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group id=\"misc\">\n <sp-menu-item value=\"logout\">Logout</sp-menu-item>\n </sp-menu-group>\n </sp-action-menu>\n`;\n\ngroups.decorators = [isOverlayOpen];\n\nexport const groupsWithSelects = ({\n onChange,\n}: {\n onChange(value: string): void;\n}): TemplateResult => {\n return html`\n <sp-action-menu\n @change=${({ target: { value } }: Event & { target: ActionMenu }) =>\n onChange(value)}\n label=\"Filter or Sort\"\n >\n <sp-menu-group selects=\"single\">\n <span slot=\"header\">Sort By</span>\n <sp-menu-item>Name</sp-menu-item>\n <sp-menu-item>Created</sp-menu-item>\n <sp-menu-item>Modified</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group selects=\"multiple\">\n <sp-menu-item>Reverse Order</sp-menu-item>\n </sp-menu-group>\n </sp-action-menu>\n `;\n};\n\ngroupsWithSelects.swc_vrt = {\n skip: true,\n};\n\ngroupsWithSelects.parameters = {\n // Disables Chromatic's snapshotting on a global level\n chromatic: { disableSnapshot: true },\n};\n\nexport const directive = (): TemplateResult => {\n const renderSubmenu = (): TemplateResult => html`\n <sp-menu-item>Submenu Item 1</sp-menu-item>\n <sp-menu-item>Submenu Item 2</sp-menu-item>\n <sp-menu-item>Submenu Item 3</sp-menu-item>\n <sp-menu-item>Submenu Item 4</sp-menu-item>\n `;\n const renderOptions = (): TemplateResult => html`\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>\n Feather...\n <sp-menu\n slot=\"submenu\"\n ${slottableRequest(renderSubmenu)}\n ></sp-menu>\n </sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n `;\n return html`\n <sp-action-menu ${slottableRequest(renderOptions)}>\n <span slot=\"label\">\n Select a Country with a very long label, too long in fact\n </span>\n </sp-action-menu>\n `;\n};\n\ndirective.swc_vrt = {\n skip: true,\n};\n\ndirective.parameters = {\n // Disables Chromatic's snapshotting on a global level\n chromatic: { disableSnapshot: true },\n};\n\nexport const withScrollEvent = (): TemplateResult => {\n function handleActionMenuScroll(): void {\n console.log('attached action menu scroll listener');\n }\n\n function renderMenuItems(): TemplateResult[] {\n return Array.from(\n { length: 30 },\n (_, i) => html`\n <sp-menu-item style=\"width: 100%;\">\n This is an Action Menu Item ${i + 1}\n </sp-menu-item>\n `\n );\n }\n\n return html`\n <sp-action-menu @scroll=${handleActionMenuScroll} open>\n <span slot=\"label\">This is an Action Menu</span>\n ${renderMenuItems()}\n </sp-action-menu>\n `;\n};\n\nwithScrollEvent.parameters = {\n chromatic: { disableSnapshot: true },\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 { html, TemplateResult } from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\n\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport { slottableRequest } from '@spectrum-web-components/overlay/src/slottable-request-directive.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport { makeOverBackground } from '../../button/stories/index.js';\nimport { isOverlayOpen } from '../../overlay/stories/index.js';\nimport { ActionMenuMarkup } from './';\n\nimport type { ActionMenu } from '@spectrum-web-components/action-menu';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js';\nimport { Menu } from '@spectrum-web-components/menu';\nimport type { MenuItem } from '@spectrum-web-components/menu/src/MenuItem.js';\nimport { Placement } from '@spectrum-web-components/overlay/src/overlay-types.js';\n\nexport default {\n component: 'sp-action-menu',\n title: 'Action menu',\n argTypes: {\n onChange: { action: 'change' },\n disabled: {\n name: 'disabled',\n type: { name: 'boolean', required: false },\n description:\n 'Disable this control. It will not receive focus or events.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n open: {\n name: 'open',\n type: { name: 'boolean', required: false },\n description: 'Whether the menu is open or not.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: 'boolean',\n },\n visibleLabel: {\n name: 'Visible Label',\n description: 'The placeholder content for the picker.',\n type: { name: 'string', required: false },\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: '' },\n },\n control: 'text',\n },\n tooltipDescription: {\n name: 'Tooltip Description',\n type: { name: 'string', required: false },\n description: 'Tooltip description',\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: '' },\n },\n control: {\n type: 'text',\n },\n },\n tooltipPlacement: {\n name: 'Tooltip Placement',\n type: { name: 'string', required: false },\n description: 'Tooltip Placement.',\n table: {\n defaultValue: { summary: 'bottom' },\n },\n control: {\n options: [\n 'auto',\n 'auto-start',\n 'auto-end',\n 'top',\n 'bottom',\n 'right',\n 'left',\n 'top-start',\n 'top-end',\n 'bottom-start',\n 'bottom-end',\n 'right-start',\n 'right-end',\n 'left-start',\n 'left-end',\n 'none',\n ],\n type: 'select',\n },\n },\n quiet: {\n name: 'quiet',\n type: { name: 'boolean', required: false },\n description: 'Quiet rendering',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n staticColorValue: {\n name: 'static-color',\n type: { name: 'string', required: false },\n description:\n 'The visual static color variant to apply to the button.',\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: 'none' },\n },\n control: {\n type: 'select',\n labels: {\n white: 'white',\n black: 'black',\n none: undefined,\n },\n options: ['white', 'black', 'none'],\n },\n },\n align: {\n name: 'align',\n type: { name: 'string', required: false },\n description: 'Alignment of the Action Menu',\n table: {\n defaultValue: { summary: 'start' },\n },\n control: {\n type: 'select',\n labels: {\n start: 'start',\n end: 'end',\n },\n },\n options: ['start', 'end'],\n },\n },\n args: {\n align: 'start',\n visibleLabel: 'More Actions',\n disabled: false,\n forcePopover: false,\n open: false,\n quiet: false,\n tooltipDescription: '',\n tooltipPlacement: 'bottom',\n static: undefined,\n },\n};\n\ninterface StoryArgs {\n align?: 'start' | 'end';\n visibleLabel?: string;\n disabled?: boolean;\n open?: boolean;\n customIcon?: string | TemplateResult;\n selects?: 'single';\n selected?: boolean;\n quiet?: boolean;\n staticValue?: 'white' | 'black' | undefined;\n tooltipDescription?: string | 'none';\n tooltipPlacement?: Placement;\n forcePopover?: boolean;\n}\n\nconst Template = (args: StoryArgs = {}): TemplateResult =>\n ActionMenuMarkup(args);\n\nexport const Default = (args: StoryArgs = {}): TemplateResult => Template(args);\n\nexport const staticWhite = (args: StoryArgs = {}): TemplateResult =>\n Template(args);\nstaticWhite.args = {\n staticValue: 'white',\n};\nstaticWhite.decorators = [makeOverBackground()];\nexport const staticBlack = (args: StoryArgs = {}): TemplateResult =>\n Template(args);\nstaticBlack.args = {\n staticValue: 'black',\n};\nstaticBlack.decorators = [makeOverBackground()];\nexport const quiet = (args: StoryArgs = {}): TemplateResult => Template(args);\nquiet.args = {\n quiet: true,\n};\n\nexport const forcePopoverOnMobile = (): TemplateResult => html`\n <div style=\"padding: 40px\">\n <h1>Force Popover on Mobile</h1>\n <p>\n The forcePopover attribute overrides the mobile device functionality\n of rendering a tray so that a popover will always render no matter\n the device.\n </p>\n <ol>\n <li>Open Chrome DevTools (or equivalent).</li>\n <li>Toggle the Device Toolbar (the phone/tablet icon).</li>\n <li>Select a device preset (e.g. iPhone 12).</li>\n <li>\n Chrome will set user-agent strings, simulate touch, and adjust\n DPI.\n </li>\n <li>Reload the page</li>\n <li>Click the Action Menu and see a popover</li>\n </ol>\n <sp-action-menu forcePopover>\n <span slot=\"icon\">\n <sp-icon-settings></sp-icon-settings>\n </span>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-action-menu>\n </div>\n`;\nexport const labelOnly = ({\n align = 'start',\n changeHandler = (() => undefined) as (event: Event) => void,\n disabled = false,\n open = false,\n size = 'm' as 'm' | 's' | 'l' | 'xl' | 'xxl',\n selects = '' as 'single',\n selected = false,\n} = {}): TemplateResult => html`\n <sp-action-menu\n ?disabled=${disabled}\n ?open=${open}\n size=${size}\n @change=${(event: Event & { target: Menu }): void => {\n navigator.clipboard.writeText(event.target.value);\n changeHandler(event);\n }}\n .selects=${selects ? selects : undefined}\n value=${selected ? 'Select Inverse' : ''}\n style=${ifDefined(align === 'end' ? 'float: inline-end;' : undefined)}\n >\n <span slot=\"label-only\">Label Only</span>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item ?selected=${selected}>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-action-menu>\n`;\n\nexport const selects = (args: StoryArgs = {}): TemplateResult =>\n Template({\n ...args,\n selects: 'single',\n selected: true,\n });\nselects.args = {\n open: true,\n};\nselects.decorators = [isOverlayOpen];\n\nexport const iconOnly = (args: StoryArgs = {}): TemplateResult =>\n Template(args);\niconOnly.args = {\n visibleLabel: '',\n};\n\nexport const tooltipDescriptionAndPlacement = (\n args: StoryArgs = {}\n): TemplateResult => Template(args);\ntooltipDescriptionAndPlacement.args = {\n tooltipDescription: 'Your tooltip string here',\n visibleLabel: '',\n tooltipPlacement: 'bottom',\n} as StoryArgs;\n\nexport const customIcon = (args: StoryArgs): TemplateResult => Template(args);\ncustomIcon.args = {\n customIcon: html`\n <sp-icon-settings slot=\"icon\"></sp-icon-settings>\n `,\n visibleLabel: '',\n};\n\nexport const submenu = ({ align = 'start' } = {}): TemplateResult => {\n return html`\n <sp-action-menu\n label=\"More Actions\"\n style=${ifDefined(\n align === 'end' ? 'float: inline-end;' : undefined\n )}\n >\n <sp-menu-item>One</sp-menu-item>\n <sp-menu-item>Two</sp-menu-item>\n <sp-menu-item>\n Select some items\n <sp-menu slot=\"submenu\" selects=\"multiple\">\n <sp-menu-item>A</sp-menu-item>\n <sp-menu-item selected>B</sp-menu-item>\n <sp-menu-item>C</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n </sp-action-menu>\n `;\n};\n\nexport const controlled = ({ align = 'start' } = {}): TemplateResult => {\n const state = {\n snap: true,\n grid: false,\n guides: true,\n latestChange: '',\n };\n function toggle(prop: 'snap' | 'grid' | 'guides') {\n return (event: Event): void => {\n const item = event.target as MenuItem;\n state[prop] = !state[prop];\n // in Lit-based usage, this would be handled via render():\n // <sp-menu-item ?selected=${this.isSomethingSelected}>\n item.selected = state[prop];\n };\n }\n function onChange(event: Event): void {\n state.latestChange = (event.target as MenuItem).value;\n logState();\n }\n function logState(): void {\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n document.getElementById('state-json')!.textContent =\n `application state: ${JSON.stringify(state)}`;\n }\n return html`\n <sp-action-menu\n label=\"View\"\n @change=${onChange}\n style=${ifDefined(\n align === 'end' ? 'float: inline-end;' : undefined\n )}\n >\n <sp-menu-item value=\"action\" @click=${() => alert('action')}>\n Non-selectable action\n </sp-menu-item>\n <sp-menu-item\n value=\"snap\"\n ?selected=${state.snap}\n @click=${toggle('snap')}\n >\n Snap\n </sp-menu-item>\n <sp-menu-item>\n Show\n <sp-menu\n slot=\"submenu\"\n selects=\"multiple\"\n @change=${(event: Event) => event.preventDefault()}\n >\n <sp-menu-item\n value=\"grid\"\n ?selected=${state.grid}\n @click=${toggle('grid')}\n >\n Grid\n </sp-menu-item>\n <sp-menu-item\n value=\"guides\"\n ?selected=${state.guides}\n @click=${toggle('guides')}\n >\n Guides\n </sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n </sp-action-menu>\n <span id=\"state-json\"></span>\n `;\n};\n\nexport const groups = ({\n align = 'start',\n onChange,\n}: {\n align: 'start' | 'end';\n onChange(value: string): void;\n}): TemplateResult => html`\n <sp-action-menu\n id=\"groups\"\n @change=${({ target: { value } }: Event & { target: ActionMenu }) =>\n onChange(value)}\n open\n style=${ifDefined(align === 'end' ? 'float: inline-end;' : undefined)}\n >\n <sp-menu-group id=\"cms\">\n <span slot=\"header\">cms</span>\n <sp-menu-item value=\"updateAllSiteContent\">\n Update All Content\n </sp-menu-item>\n <sp-menu-item value=\"refreshAllXDs\">Refresh All XDs</sp-menu-item>\n </sp-menu-group>\n <sp-menu-group id=\"ssg\">\n <span slot=\"header\">ssg</span>\n <sp-menu-item value=\"clearCache\">Clear Cache</sp-menu-item>\n </sp-menu-group>\n <sp-menu-group id=\"vrt\">\n <span slot=\"header\">vrt</span>\n <sp-menu-item value=\"vrt-contributions\">Contributions</sp-menu-item>\n <sp-menu-item value=\"vrt-internal\">Internal</sp-menu-item>\n <sp-menu-item value=\"vrt-public\">Public</sp-menu-item>\n <sp-menu-item value=\"vrt-patterns\">Patterns</sp-menu-item>\n <sp-menu-item value=\"vrt\">All</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group id=\"misc\">\n <sp-menu-item value=\"logout\">Logout</sp-menu-item>\n </sp-menu-group>\n </sp-action-menu>\n`;\n\ngroups.decorators = [isOverlayOpen];\n\nexport const groupsWithSelects = ({\n onChange,\n}: {\n onChange(value: string): void;\n}): TemplateResult => {\n return html`\n <sp-action-menu\n @change=${({ target: { value } }: Event & { target: ActionMenu }) =>\n onChange(value)}\n label=\"Filter or Sort\"\n >\n <sp-menu-group selects=\"single\">\n <span slot=\"header\">Sort By</span>\n <sp-menu-item>Name</sp-menu-item>\n <sp-menu-item>Created</sp-menu-item>\n <sp-menu-item>Modified</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group selects=\"multiple\">\n <sp-menu-item>Reverse Order</sp-menu-item>\n </sp-menu-group>\n </sp-action-menu>\n `;\n};\n\ngroupsWithSelects.swc_vrt = {\n skip: true,\n};\n\ngroupsWithSelects.parameters = {\n // Disables Chromatic's snapshotting on a global level\n chromatic: { disableSnapshot: true },\n};\n\nexport const directive = (): TemplateResult => {\n const renderSubmenu = (): TemplateResult => html`\n <sp-menu-item>Submenu Item 1</sp-menu-item>\n <sp-menu-item>Submenu Item 2</sp-menu-item>\n <sp-menu-item>Submenu Item 3</sp-menu-item>\n <sp-menu-item>Submenu Item 4</sp-menu-item>\n `;\n const renderOptions = (): TemplateResult => html`\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>\n Feather...\n <sp-menu\n slot=\"submenu\"\n ${slottableRequest(renderSubmenu)}\n ></sp-menu>\n </sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n `;\n return html`\n <sp-action-menu ${slottableRequest(renderOptions)}>\n <span slot=\"label\">\n Select a Country with a very long label, too long in fact\n </span>\n </sp-action-menu>\n `;\n};\n\ndirective.swc_vrt = {\n skip: true,\n};\n\ndirective.parameters = {\n // Disables Chromatic's snapshotting on a global level\n chromatic: { disableSnapshot: true },\n};\n\nexport const withScrollEvent = (): TemplateResult => {\n function handleActionMenuScroll(): void {\n console.log('attached action menu scroll listener');\n }\n\n function renderMenuItems(): TemplateResult[] {\n return Array.from(\n { length: 30 },\n (_, i) => html`\n <sp-menu-item style=\"width: 100%;\">\n This is an Action Menu Item ${i + 1}\n </sp-menu-item>\n `\n );\n }\n\n return html`\n <sp-action-menu @scroll=${handleActionMenuScroll} open>\n <span slot=\"label\">This is an Action Menu</span>\n ${renderMenuItems()}\n </sp-action-menu>\n `;\n};\n\nwithScrollEvent.parameters = {\n chromatic: { disableSnapshot: true },\n};\n\nexport const MenuItemAlerts = (): TemplateResult => html`\n <sp-action-menu size=\"m\">\n <span slot=\"label\">More Actions</span>\n <sp-menu-item @click=${() => alert('Deselect')}>Deselect</sp-menu-item>\n <sp-menu-item @click=${() => alert('Select inverse')}>\n Select inverse\n </sp-menu-item>\n <sp-menu-item @click=${() => alert('Feather...')}>\n Feather...\n </sp-menu-item>\n <sp-menu-item @click=${() => alert('Select and mask...')}>\n Select and mask...\n </sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item @click=${() => alert('Save selection')}>\n Save selection\n </sp-menu-item>\n <sp-menu-item disabled>Make work path</sp-menu-item>\n </sp-action-menu>\n`;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["selects"]
|
|
7
7
|
}
|
|
@@ -8,12 +8,12 @@ describe("Slottable Request Directive", () => {
|
|
|
8
8
|
it("Action Menu requests for options rendering when opening and closing", async function() {
|
|
9
9
|
const el = await fixture(directive());
|
|
10
10
|
const initialNodeLength = el.children.length;
|
|
11
|
-
expect(el.open).to.be.false;
|
|
11
|
+
expect(el.open, "should be closed initially").to.be.false;
|
|
12
12
|
expect(el.children.length).to.equal(initialNodeLength);
|
|
13
13
|
const opened = oneEvent(el, "sp-opened");
|
|
14
14
|
el.click();
|
|
15
15
|
await opened;
|
|
16
|
-
expect(el.open).to.be.true;
|
|
16
|
+
expect(el.open, "should be open after clicking").to.be.true;
|
|
17
17
|
expect(el.children.length).to.be.gt(initialNodeLength);
|
|
18
18
|
const closed = oneEvent(el, "sp-closed");
|
|
19
19
|
await sendKeys({
|
|
@@ -22,7 +22,7 @@ describe("Slottable Request Directive", () => {
|
|
|
22
22
|
await closed;
|
|
23
23
|
await nextFrame();
|
|
24
24
|
await nextFrame();
|
|
25
|
-
expect(el.open).to.be.false;
|
|
25
|
+
expect(el.open, "should be closed after escape key is pressed").to.be.false;
|
|
26
26
|
expect(el.children.length).to.equal(initialNodeLength);
|
|
27
27
|
});
|
|
28
28
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["action-menu-directive.test.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2024 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 { expect, oneEvent } from '@open-wc/testing';\nimport { ActionMenu } from '@spectrum-web-components/action-menu';\nimport { sendKeys } from '@web/test-runner-commands';\n\nimport { directive } from '../stories/action-menu.stories.js';\nimport { fixture } from '../../../test/testing-helpers.js';\nimport { nextFrame } from '@spectrum-web-components/overlay/src/AbstractOverlay.js';\n\ndescribe('Slottable Request Directive', () => {\n it('Action Menu requests for options rendering when opening and closing', async function () {\n const el = await fixture<ActionMenu>(directive());\n const initialNodeLength = el.children.length;\n expect(el.open).to.be.false;\n expect(el.children.length).to.equal(initialNodeLength);\n\n const opened = oneEvent(el, 'sp-opened');\n el.click();\n await opened;\n\n expect(el.open).to.be.true;\n expect(el.children.length).to.be.gt(initialNodeLength);\n\n const closed = oneEvent(el, 'sp-closed');\n await sendKeys({\n press: 'Escape',\n });\n await closed;\n await nextFrame();\n await nextFrame();\n\n expect(el.open).to.be.false;\n expect(el.children.length).to.equal(initialNodeLength);\n });\n});\n"],
|
|
5
|
-
"mappings": ";AAYA,SAAS,QAAQ,gBAAgB;AAEjC,SAAS,gBAAgB;AAEzB,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAE1B,SAAS,+BAA+B,MAAM;AAC1C,KAAG,uEAAuE,iBAAkB;AACxF,UAAM,KAAK,MAAM,QAAoB,UAAU,CAAC;AAChD,UAAM,oBAAoB,GAAG,SAAS;
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2024 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 { expect, oneEvent } from '@open-wc/testing';\nimport { ActionMenu } from '@spectrum-web-components/action-menu';\nimport { sendKeys } from '@web/test-runner-commands';\n\nimport { directive } from '../stories/action-menu.stories.js';\nimport { fixture } from '../../../test/testing-helpers.js';\nimport { nextFrame } from '@spectrum-web-components/overlay/src/AbstractOverlay.js';\n\ndescribe('Slottable Request Directive', () => {\n it('Action Menu requests for options rendering when opening and closing', async function () {\n const el = await fixture<ActionMenu>(directive());\n const initialNodeLength = el.children.length;\n\n expect(el.open, 'should be closed initially').to.be.false;\n expect(el.children.length).to.equal(initialNodeLength);\n\n const opened = oneEvent(el, 'sp-opened');\n\n el.click();\n await opened;\n\n expect(el.open, 'should be open after clicking').to.be.true;\n expect(el.children.length).to.be.gt(initialNodeLength);\n\n const closed = oneEvent(el, 'sp-closed');\n\n await sendKeys({\n press: 'Escape',\n });\n await closed;\n await nextFrame();\n await nextFrame();\n\n expect(el.open, 'should be closed after escape key is pressed').to.be\n .false;\n expect(el.children.length).to.equal(initialNodeLength);\n });\n});\n"],
|
|
5
|
+
"mappings": ";AAYA,SAAS,QAAQ,gBAAgB;AAEjC,SAAS,gBAAgB;AAEzB,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAE1B,SAAS,+BAA+B,MAAM;AAC1C,KAAG,uEAAuE,iBAAkB;AACxF,UAAM,KAAK,MAAM,QAAoB,UAAU,CAAC;AAChD,UAAM,oBAAoB,GAAG,SAAS;AAEtC,WAAO,GAAG,MAAM,4BAA4B,EAAE,GAAG,GAAG;AACpD,WAAO,GAAG,SAAS,MAAM,EAAE,GAAG,MAAM,iBAAiB;AAErD,UAAM,SAAS,SAAS,IAAI,WAAW;AAEvC,OAAG,MAAM;AACT,UAAM;AAEN,WAAO,GAAG,MAAM,+BAA+B,EAAE,GAAG,GAAG;AACvD,WAAO,GAAG,SAAS,MAAM,EAAE,GAAG,GAAG,GAAG,iBAAiB;AAErD,UAAM,SAAS,SAAS,IAAI,WAAW;AAEvC,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AACN,UAAM,UAAU;AAChB,UAAM,UAAU;AAEhB,WAAO,GAAG,MAAM,8CAA8C,EAAE,GAAG,GAC9D;AACL,WAAO,GAAG,SAAS,MAAM,EAAE,GAAG,MAAM,iBAAiB;AAAA,EACzD,CAAC;AACL,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -10,10 +10,9 @@ describe("Action Menu - Groups", () => {
|
|
|
10
10
|
groupsWithSelects({ onChange: () => {
|
|
11
11
|
} })
|
|
12
12
|
);
|
|
13
|
-
const firstGroup = el.querySelector("sp-menu-group");
|
|
14
13
|
const firstItem = el.querySelector("sp-menu-item");
|
|
15
14
|
expect(firstItem.focused).to.be.false;
|
|
16
|
-
expect(document.activeElement ===
|
|
15
|
+
expect(document.activeElement === firstItem).to.be.false;
|
|
17
16
|
const opened = oneEvent(el, "sp-opened");
|
|
18
17
|
el.focus();
|
|
19
18
|
await sendKeys({
|
|
@@ -22,7 +21,7 @@ describe("Action Menu - Groups", () => {
|
|
|
22
21
|
await opened;
|
|
23
22
|
expect(firstItem.focused).to.be.true;
|
|
24
23
|
expect(
|
|
25
|
-
document.activeElement ===
|
|
24
|
+
document.activeElement === firstItem,
|
|
26
25
|
(_a = document.activeElement) == null ? void 0 : _a.localName
|
|
27
26
|
).to.be.true;
|
|
28
27
|
});
|
|
@@ -39,14 +38,14 @@ describe("Action Menu - Groups", () => {
|
|
|
39
38
|
const firstItem = multipleGroup.querySelector(
|
|
40
39
|
"sp-menu-item"
|
|
41
40
|
);
|
|
42
|
-
expect(firstItem.selected).to.be.false;
|
|
41
|
+
expect(firstItem.selected, "before opening: first item selected?").to.be.false;
|
|
43
42
|
let opened = oneEvent(el, "sp-opened");
|
|
44
43
|
el.focus();
|
|
45
44
|
await sendKeys({
|
|
46
45
|
press: "ArrowDown"
|
|
47
46
|
});
|
|
48
47
|
await opened;
|
|
49
|
-
expect(el.open).to.be.true;
|
|
48
|
+
expect(el.open, "first opened: open?").to.be.true;
|
|
50
49
|
await sendKeys({
|
|
51
50
|
press: "ArrowUp"
|
|
52
51
|
});
|
|
@@ -58,19 +57,15 @@ describe("Action Menu - Groups", () => {
|
|
|
58
57
|
await closed;
|
|
59
58
|
await elementUpdated(el);
|
|
60
59
|
await elementUpdated(firstItem);
|
|
61
|
-
expect(el.open).to.be.false;
|
|
62
|
-
expect(firstItem.selected).to.be.true;
|
|
60
|
+
expect(el.open, "first closed: open?").to.be.false;
|
|
61
|
+
expect(firstItem.selected, "after select: first item selected?").to.be.true;
|
|
63
62
|
expect(document.activeElement === el, (_a = document.activeElement) == null ? void 0 : _a.localName).to.be.true;
|
|
64
63
|
opened = oneEvent(el, "sp-opened");
|
|
65
64
|
await sendKeys({
|
|
66
65
|
press: "ArrowDown"
|
|
67
66
|
});
|
|
68
67
|
await opened;
|
|
69
|
-
expect(el.open).to.be.true;
|
|
70
|
-
await sendKeys({
|
|
71
|
-
press: "ArrowUp"
|
|
72
|
-
});
|
|
73
|
-
await elementUpdated(el);
|
|
68
|
+
expect(el.open, "reopened: open?").to.be.true;
|
|
74
69
|
closed = oneEvent(el, "sp-closed");
|
|
75
70
|
await sendKeys({
|
|
76
71
|
press: "Enter"
|
|
@@ -78,8 +73,8 @@ describe("Action Menu - Groups", () => {
|
|
|
78
73
|
await closed;
|
|
79
74
|
await elementUpdated(el);
|
|
80
75
|
await elementUpdated(firstItem);
|
|
81
|
-
expect(el.open).to.be.false;
|
|
82
|
-
expect(firstItem.selected).to.be.false;
|
|
76
|
+
expect(el.open, "reclosed: open?").to.be.false;
|
|
77
|
+
expect(firstItem.selected, "after deselect: first item selected?").to.be.false;
|
|
83
78
|
});
|
|
84
79
|
});
|
|
85
80
|
//# sourceMappingURL=action-menu-groups.test.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["action-menu-groups.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*/\n\nimport { elementUpdated, expect, oneEvent } from '@open-wc/testing';\nimport { fixture } from '../../../test/testing-helpers.js';\nimport { sendKeys } from '@web/test-runner-commands';\n\nimport { groupsWithSelects } from '../stories/action-menu.stories.js';\nimport { ActionMenu } from '@spectrum-web-components/action-menu';\nimport { MenuItem } from '@spectrum-web-components/menu';\n\ndescribe('Action Menu - Groups', () => {\n it('throws focus into the Menu when opened', async function () {\n const el = await fixture<ActionMenu>(\n groupsWithSelects({ onChange: () => {} })\n );\n\n const
|
|
5
|
-
"mappings": ";AAYA,SAAS,gBAAgB,QAAQ,gBAAgB;AACjD,SAAS,eAAe;AACxB,SAAS,gBAAgB;AAEzB,SAAS,yBAAyB;AAIlC,SAAS,wBAAwB,MAAM;AACnC,KAAG,0CAA0C,iBAAkB;AArBnE;AAsBQ,UAAM,KAAK,MAAM;AAAA,MACb,kBAAkB,EAAE,UAAU,MAAM;AAAA,MAAC,EAAE,CAAC;AAAA,IAC5C;AAEA,UAAM,
|
|
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 { elementUpdated, expect, oneEvent } from '@open-wc/testing';\nimport { fixture } from '../../../test/testing-helpers.js';\nimport { sendKeys } from '@web/test-runner-commands';\n\nimport { groupsWithSelects } from '../stories/action-menu.stories.js';\nimport { ActionMenu } from '@spectrum-web-components/action-menu';\nimport { MenuItem } from '@spectrum-web-components/menu';\n\ndescribe('Action Menu - Groups', () => {\n it('throws focus into the Menu when opened', async function () {\n const el = await fixture<ActionMenu>(\n groupsWithSelects({ onChange: () => {} })\n );\n\n const firstItem = el.querySelector('sp-menu-item') as MenuItem;\n\n expect(firstItem.focused).to.be.false;\n expect(document.activeElement === firstItem).to.be.false;\n\n const opened = oneEvent(el, 'sp-opened');\n el.focus();\n await sendKeys({\n press: 'ArrowDown',\n });\n await opened;\n\n expect(firstItem.focused).to.be.true;\n expect(\n document.activeElement === firstItem,\n document.activeElement?.localName\n ).to.be.true;\n });\n\n it('toggles child group with `selects=\"multiple\"`', async function () {\n this.retries(0);\n const el = await fixture<ActionMenu>(\n groupsWithSelects({ onChange: () => {} })\n );\n\n const multipleGroup = el.querySelector(\n '[selects=\"multiple\"]'\n ) as HTMLElement;\n const firstItem = multipleGroup.querySelector(\n 'sp-menu-item'\n ) as MenuItem;\n\n expect(firstItem.selected, 'before opening: first item selected?').to.be.false;\n\n let opened = oneEvent(el, 'sp-opened');\n el.focus();\n await sendKeys({\n press: 'ArrowDown',\n });\n await opened;\n expect(el.open, 'first opened: open?').to.be.true;\n\n await sendKeys({\n press: 'ArrowUp',\n });\n await elementUpdated(el);\n\n let closed = oneEvent(el, 'sp-closed');\n await sendKeys({\n press: 'Enter',\n });\n await closed;\n\n await elementUpdated(el);\n await elementUpdated(firstItem);\n\n expect(el.open, 'first closed: open?').to.be.false;\n expect(firstItem.selected, 'after select: first item selected?').to.be.true;\n expect(document.activeElement === el, document.activeElement?.localName)\n .to.be.true;\n\n opened = oneEvent(el, 'sp-opened');\n await sendKeys({\n press: 'ArrowDown',\n });\n await opened;\n expect(el.open, 'reopened: open?').to.be.true;\n\n closed = oneEvent(el, 'sp-closed');\n await sendKeys({\n press: 'Enter',\n });\n await closed;\n\n await elementUpdated(el);\n await elementUpdated(firstItem);\n\n expect(el.open, 'reclosed: open?').to.be.false;\n expect(firstItem.selected, 'after deselect: first item selected?').to.be.false;\n });\n});\n"],
|
|
5
|
+
"mappings": ";AAYA,SAAS,gBAAgB,QAAQ,gBAAgB;AACjD,SAAS,eAAe;AACxB,SAAS,gBAAgB;AAEzB,SAAS,yBAAyB;AAIlC,SAAS,wBAAwB,MAAM;AACnC,KAAG,0CAA0C,iBAAkB;AArBnE;AAsBQ,UAAM,KAAK,MAAM;AAAA,MACb,kBAAkB,EAAE,UAAU,MAAM;AAAA,MAAC,EAAE,CAAC;AAAA,IAC5C;AAEA,UAAM,YAAY,GAAG,cAAc,cAAc;AAEjD,WAAO,UAAU,OAAO,EAAE,GAAG,GAAG;AAChC,WAAO,SAAS,kBAAkB,SAAS,EAAE,GAAG,GAAG;AAEnD,UAAM,SAAS,SAAS,IAAI,WAAW;AACvC,OAAG,MAAM;AACT,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AAEN,WAAO,UAAU,OAAO,EAAE,GAAG,GAAG;AAChC;AAAA,MACI,SAAS,kBAAkB;AAAA,OAC3B,cAAS,kBAAT,mBAAwB;AAAA,IAC5B,EAAE,GAAG,GAAG;AAAA,EACZ,CAAC;AAED,KAAG,iDAAiD,iBAAkB;AA7C1E;AA8CQ,SAAK,QAAQ,CAAC;AACd,UAAM,KAAK,MAAM;AAAA,MACb,kBAAkB,EAAE,UAAU,MAAM;AAAA,MAAC,EAAE,CAAC;AAAA,IAC5C;AAEA,UAAM,gBAAgB,GAAG;AAAA,MACrB;AAAA,IACJ;AACA,UAAM,YAAY,cAAc;AAAA,MAC5B;AAAA,IACJ;AAEA,WAAO,UAAU,UAAU,sCAAsC,EAAE,GAAG,GAAG;AAEzE,QAAI,SAAS,SAAS,IAAI,WAAW;AACrC,OAAG,MAAM;AACT,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AACN,WAAO,GAAG,MAAM,qBAAqB,EAAE,GAAG,GAAG;AAE7C,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM,eAAe,EAAE;AAEvB,QAAI,SAAS,SAAS,IAAI,WAAW;AACrC,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AAEN,UAAM,eAAe,EAAE;AACvB,UAAM,eAAe,SAAS;AAE9B,WAAO,GAAG,MAAM,qBAAqB,EAAE,GAAG,GAAG;AAC7C,WAAO,UAAU,UAAU,oCAAoC,EAAE,GAAG,GAAG;AACvE,WAAO,SAAS,kBAAkB,KAAI,cAAS,kBAAT,mBAAwB,SAAS,EAClE,GAAG,GAAG;AAEX,aAAS,SAAS,IAAI,WAAW;AACjC,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AACN,WAAO,GAAG,MAAM,iBAAiB,EAAE,GAAG,GAAG;AAEzC,aAAS,SAAS,IAAI,WAAW;AACjC,UAAM,SAAS;AAAA,MACX,OAAO;AAAA,IACX,CAAC;AACD,UAAM;AAEN,UAAM,eAAe,EAAE;AACvB,UAAM,eAAe,SAAS;AAE9B,WAAO,GAAG,MAAM,iBAAiB,EAAE,GAAG,GAAG;AACzC,WAAO,UAAU,UAAU,sCAAsC,EAAE,GAAG,GAAG;AAAA,EAC7E,CAAC;AACL,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/test/index.js
CHANGED
|
@@ -5,7 +5,8 @@ import {
|
|
|
5
5
|
expect,
|
|
6
6
|
html,
|
|
7
7
|
nextFrame,
|
|
8
|
-
oneEvent
|
|
8
|
+
oneEvent,
|
|
9
|
+
waitUntil
|
|
9
10
|
} from "@open-wc/testing";
|
|
10
11
|
import { testForLitDevWarnings } from "../../../test/testing-helpers";
|
|
11
12
|
import { spy } from "sinon";
|
|
@@ -20,7 +21,12 @@ import {
|
|
|
20
21
|
} from "../stories/action-menu.stories.js";
|
|
21
22
|
import { findDescribedNode } from "../../../test/testing-helpers-a11y.js";
|
|
22
23
|
import { sendMouse } from "../../../test/plugins/browser.js";
|
|
23
|
-
import {
|
|
24
|
+
import {
|
|
25
|
+
a11ySnapshot,
|
|
26
|
+
findAccessibilityNode,
|
|
27
|
+
sendKeys,
|
|
28
|
+
setViewport
|
|
29
|
+
} from "@web/test-runner-commands";
|
|
24
30
|
import { isWebKit } from "@spectrum-web-components/shared";
|
|
25
31
|
import { SAFARI_FOCUS_RING_CLASS } from "@spectrum-web-components/picker/src/InteractionController.js";
|
|
26
32
|
ignoreResizeObserverLoopError(before, after);
|
|
@@ -109,6 +115,29 @@ export const testActionMenu = (mode) => {
|
|
|
109
115
|
await nextFrame();
|
|
110
116
|
await expect(el).to.be.accessible();
|
|
111
117
|
});
|
|
118
|
+
it("has menuitems in accessibility tree", async () => {
|
|
119
|
+
const el = await fixture(html`
|
|
120
|
+
<sp-action-menu
|
|
121
|
+
label="More Actions">
|
|
122
|
+
<sp-menu-item>Deselect</sp-menu-item>
|
|
123
|
+
<sp-menu-item disabled>Make Work Path</sp-menu-item>
|
|
124
|
+
</sp-action-menu>
|
|
125
|
+
`);
|
|
126
|
+
const opened = oneEvent(el, "sp-opened");
|
|
127
|
+
el.focus();
|
|
128
|
+
sendKeys({ press: "Enter" });
|
|
129
|
+
await opened;
|
|
130
|
+
await nextFrame();
|
|
131
|
+
const snapshot = await a11ySnapshot({});
|
|
132
|
+
const button = findAccessibilityNode(snapshot, (node) => node.name === "More Actions");
|
|
133
|
+
const menu = findAccessibilityNode(snapshot, (node) => node.role === "menu");
|
|
134
|
+
const deselect = findAccessibilityNode(snapshot, (node) => node.role === "menuitem" && node.name === "Deselect");
|
|
135
|
+
const workPath = findAccessibilityNode(snapshot, (node) => node.role === "menuitem" && node.name === "Make Work Path" && node.disabled);
|
|
136
|
+
expect(button, "button").to.not.be.null;
|
|
137
|
+
expect(menu, "menu").to.not.be.null;
|
|
138
|
+
expect(deselect, "first menuitem").to.not.be.null;
|
|
139
|
+
expect(workPath, "second menuitem").to.not.be.null;
|
|
140
|
+
});
|
|
112
141
|
it("dispatches change events, no [href]", async () => {
|
|
113
142
|
const changeSpy = spy();
|
|
114
143
|
const el = await fixture(html`
|
|
@@ -297,31 +326,29 @@ export const testActionMenu = (mode) => {
|
|
|
297
326
|
expect(button).to.have.attribute("aria-controls", "menu");
|
|
298
327
|
});
|
|
299
328
|
it("opens repeatedly with Menu in the correct location", async function() {
|
|
329
|
+
var _a, _b, _c, _d;
|
|
300
330
|
const el = await fixture(
|
|
301
331
|
iconOnly({
|
|
302
332
|
...iconOnly.args,
|
|
303
333
|
align: "end"
|
|
304
334
|
})
|
|
305
335
|
);
|
|
306
|
-
|
|
307
|
-
el.focus();
|
|
308
|
-
await elementUpdated(el);
|
|
336
|
+
expect(el.open, "open?").to.be.false;
|
|
309
337
|
let opened = oneEvent(el, "sp-opened");
|
|
310
|
-
|
|
311
|
-
await sendKeys({ press: "ArrowLeft" });
|
|
312
|
-
await sendKeys({ press: "Space" });
|
|
338
|
+
el.click();
|
|
313
339
|
await opened;
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
340
|
+
expect(el.open, "open?").to.be.true;
|
|
341
|
+
const firstRect = (_b = (_a = el == null ? void 0 : el.overlayElement) == null ? void 0 : _a.dialogEl) == null ? void 0 : _b.getBoundingClientRect();
|
|
342
|
+
const closed = oneEvent(el, "sp-closed");
|
|
343
|
+
el.close();
|
|
317
344
|
await closed;
|
|
345
|
+
expect(el.open, "open?").to.be.false;
|
|
318
346
|
opened = oneEvent(el, "sp-opened");
|
|
319
|
-
|
|
347
|
+
el.toggle();
|
|
320
348
|
await opened;
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
await closed;
|
|
349
|
+
expect(el.open, "open?").to.be.true;
|
|
350
|
+
const secondRect = (_d = (_c = el == null ? void 0 : el.overlayElement) == null ? void 0 : _c.dialogEl) == null ? void 0 : _d.getBoundingClientRect();
|
|
351
|
+
el.close();
|
|
325
352
|
expect(firstRect).to.deep.equal(secondRect);
|
|
326
353
|
});
|
|
327
354
|
it("opens and selects in a single pointer button interaction", async () => {
|
|
@@ -371,6 +398,42 @@ export const testActionMenu = (mode) => {
|
|
|
371
398
|
expect(el.open).to.be.false;
|
|
372
399
|
expect(selected).to.equal(thirdItem.value);
|
|
373
400
|
});
|
|
401
|
+
it("returns focus on `Escape`", async () => {
|
|
402
|
+
const el = await actionMenuFixture();
|
|
403
|
+
const thirdItem = el.querySelector(
|
|
404
|
+
"sp-menu-item:nth-of-type(3)"
|
|
405
|
+
);
|
|
406
|
+
expect(el.value).to.not.equal(thirdItem.value);
|
|
407
|
+
const opened = oneEvent(el, "sp-opened");
|
|
408
|
+
el.focus();
|
|
409
|
+
await sendKeys({ press: "Enter" });
|
|
410
|
+
await opened;
|
|
411
|
+
await sendKeys({ press: "Escape" });
|
|
412
|
+
await waitUntil(
|
|
413
|
+
() => document.activeElement === el,
|
|
414
|
+
"focused",
|
|
415
|
+
{ timeout: 300 }
|
|
416
|
+
);
|
|
417
|
+
expect(el.open).to.be.false;
|
|
418
|
+
});
|
|
419
|
+
it("returns focus on select", async () => {
|
|
420
|
+
const el = await actionMenuFixture();
|
|
421
|
+
const thirdItem = el.querySelector(
|
|
422
|
+
"sp-menu-item:nth-of-type(3)"
|
|
423
|
+
);
|
|
424
|
+
expect(el.value).to.not.equal(thirdItem.value);
|
|
425
|
+
const opened = oneEvent(el, "sp-opened");
|
|
426
|
+
el.focus();
|
|
427
|
+
await sendKeys({ press: "Enter" });
|
|
428
|
+
await opened;
|
|
429
|
+
thirdItem.click();
|
|
430
|
+
await waitUntil(
|
|
431
|
+
() => document.activeElement === el,
|
|
432
|
+
"focused",
|
|
433
|
+
{ timeout: 300 }
|
|
434
|
+
);
|
|
435
|
+
expect(el.open).to.be.false;
|
|
436
|
+
});
|
|
374
437
|
it("has attribute aria-describedby", async () => {
|
|
375
438
|
const name = "sp-picker";
|
|
376
439
|
const description = "Rendering a Picker";
|
|
@@ -447,74 +510,60 @@ export const testActionMenu = (mode) => {
|
|
|
447
510
|
"initially selected item should maintain selection"
|
|
448
511
|
).to.be.true;
|
|
449
512
|
});
|
|
450
|
-
it("
|
|
451
|
-
let selected = true;
|
|
452
|
-
const handleChange = (event) => {
|
|
453
|
-
if (event.target.value === "test") {
|
|
454
|
-
selected = !selected;
|
|
455
|
-
event.target.updateComplete.then(() => {
|
|
456
|
-
event.target.value = selected ? "test" : "";
|
|
457
|
-
});
|
|
458
|
-
}
|
|
459
|
-
};
|
|
513
|
+
it("does not alter submenu selection when top-level menu items are selected", async () => {
|
|
460
514
|
const root = await fixture(html`
|
|
461
|
-
<sp-action-menu label="More Actions"
|
|
462
|
-
<sp-menu-item>One</sp-menu-item>
|
|
463
|
-
<sp-menu-item
|
|
464
|
-
Two
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
<sp-menu slot="submenu">
|
|
469
|
-
<sp-menu-item>A</sp-menu-item>
|
|
470
|
-
<sp-menu-item selected id="sub-selected-item">
|
|
471
|
-
B
|
|
472
|
-
</sp-menu-item>
|
|
473
|
-
<sp-menu-item>C</sp-menu-item>
|
|
515
|
+
<sp-action-menu id="actionmenu" label="More Actions">
|
|
516
|
+
<sp-menu-item id="item-1">One</sp-menu-item>
|
|
517
|
+
<sp-menu-item id="item-2">
|
|
518
|
+
Two, with B selected
|
|
519
|
+
<sp-menu slot="submenu" id="menu-2" selects="single">
|
|
520
|
+
<sp-menu-item id="item-2a" selected>A</sp-menu-item>
|
|
521
|
+
<sp-menu-item id="item-2b">B</sp-menu-item>
|
|
474
522
|
</sp-menu>
|
|
475
523
|
</sp-menu-item>
|
|
476
524
|
</sp-action-menu>
|
|
477
525
|
`);
|
|
478
|
-
const
|
|
479
|
-
|
|
480
|
-
);
|
|
481
|
-
const
|
|
482
|
-
"#root-selected-item"
|
|
483
|
-
);
|
|
484
|
-
expect(unselectedItem.textContent).to.include("One");
|
|
485
|
-
expect(unselectedItem.selected).to.be.false;
|
|
486
|
-
expect(selectedItem.textContent).to.include("Two");
|
|
487
|
-
expect(selectedItem.selected).to.be.true;
|
|
526
|
+
const item1 = root.querySelector("#item-1");
|
|
527
|
+
const item2 = root.querySelector("#item-2");
|
|
528
|
+
const itemA = root.querySelector("#item-2a");
|
|
529
|
+
const itemB = root.querySelector("#item-2b");
|
|
488
530
|
let opened = oneEvent(root, "sp-opened");
|
|
531
|
+
expect(item1.selected, "before opening: item1 selected?").to.be.false;
|
|
532
|
+
expect(item2.selected, "before opening: item2 selected?").to.be.false;
|
|
533
|
+
expect(itemA.selected, "before opening: itemA selected?").to.be.true;
|
|
534
|
+
expect(item2.selected, "before opening: itemB selected?").to.be.false;
|
|
489
535
|
root.click();
|
|
490
536
|
await opened;
|
|
537
|
+
expect(root.open, "after clicking open: open?").to.be.true;
|
|
491
538
|
let closed = oneEvent(root, "sp-closed");
|
|
492
|
-
|
|
539
|
+
item1.click();
|
|
493
540
|
await closed;
|
|
494
|
-
expect(
|
|
541
|
+
expect(item1.selected, "after clicking item1: item1 selected?").to.be.false;
|
|
542
|
+
expect(itemA.selected, "after clicking item1: itemA selected?").to.be.true;
|
|
543
|
+
expect(root.open, "after clicking item1: open?").to.be.false;
|
|
495
544
|
opened = oneEvent(root, "sp-opened");
|
|
496
545
|
root.click();
|
|
497
546
|
await opened;
|
|
547
|
+
expect(root.open, "after reopening: open?").to.be.true;
|
|
498
548
|
closed = oneEvent(root, "sp-closed");
|
|
499
|
-
|
|
549
|
+
itemB.click();
|
|
550
|
+
root.close();
|
|
500
551
|
await closed;
|
|
552
|
+
expect(item1.selected, "after clicking itemB: item1 selected?").to.be.false;
|
|
553
|
+
expect(item2.selected, "after clicking itemB: item2 selected?").to.be.false;
|
|
554
|
+
expect(itemA.selected, "after clicking itemB: itemA selected?").to.be.false;
|
|
555
|
+
expect(itemB.selected, "after clicking itemB: itemB selected?").to.be.true;
|
|
556
|
+
expect(root.open, "after clicking itemB: open?").to.be.false;
|
|
501
557
|
opened = oneEvent(root, "sp-opened");
|
|
502
558
|
root.click();
|
|
503
559
|
await opened;
|
|
504
|
-
expect(
|
|
505
|
-
expect(unselectedItem.selected).to.be.false;
|
|
506
|
-
expect(selectedItem.textContent).to.include("Two");
|
|
507
|
-
expect(selectedItem.selected).to.be.false;
|
|
560
|
+
expect(root.open, "after reopening: open?").to.be.true;
|
|
508
561
|
closed = oneEvent(root, "sp-closed");
|
|
509
|
-
|
|
562
|
+
itemB.click();
|
|
510
563
|
await closed;
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
expect(unselectedItem.textContent).to.include("One");
|
|
515
|
-
expect(unselectedItem.selected).to.be.false;
|
|
516
|
-
expect(selectedItem.textContent).to.include("Two");
|
|
517
|
-
expect(selectedItem.selected).to.be.true;
|
|
564
|
+
expect(item2.selected, "after clicking item2: item2 selected?").to.be.false;
|
|
565
|
+
expect(itemB.selected, "after clicking item2: itemB selected?").to.be.true;
|
|
566
|
+
expect(root.open, "after clicking item2: open?").to.be.false;
|
|
518
567
|
});
|
|
519
568
|
it("shows tooltip", async function() {
|
|
520
569
|
const openSpy = spy();
|
package/test/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["index.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 {\n aTimeout,\n elementUpdated,\n expect,\n html,\n nextFrame,\n oneEvent,\n} from '@open-wc/testing';\nimport { testForLitDevWarnings } from '../../../test/testing-helpers';\n\nimport { spy } from 'sinon';\n\nimport { ActionMenu } from '@spectrum-web-components/action-menu';\nimport type { Menu, MenuItem } from '@spectrum-web-components/menu';\nimport {\n fixture,\n ignoreResizeObserverLoopError,\n} from '../../../test/testing-helpers.js';\nimport '@spectrum-web-components/dialog/sp-dialog-base.js';\nimport {\n iconOnly,\n tooltipDescriptionAndPlacement,\n} from '../stories/action-menu.stories.js';\nimport { findDescribedNode } from '../../../test/testing-helpers-a11y.js';\nimport type { Tooltip } from '@spectrum-web-components/tooltip';\nimport { sendMouse } from '../../../test/plugins/browser.js';\nimport type { TestablePicker } from '../../picker/test/index.js';\nimport type { Overlay } from '@spectrum-web-components/overlay';\nimport { sendKeys, setViewport } from '@web/test-runner-commands';\nimport { TemplateResult } from '@spectrum-web-components/base';\nimport { isWebKit } from '@spectrum-web-components/shared';\nimport { SAFARI_FOCUS_RING_CLASS } from '@spectrum-web-components/picker/src/InteractionController.js';\n\nignoreResizeObserverLoopError(before, after);\n\nconst deprecatedActionMenuFixture = async (): Promise<ActionMenu> =>\n await fixture<ActionMenu>(html`\n <sp-action-menu label=\"More Actions\">\n <sp-menu>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n </sp-action-menu>\n `);\n\nconst actionMenuFixture = async (): Promise<ActionMenu> =>\n await fixture<ActionMenu>(html`\n <sp-action-menu label=\"More Actions\">\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-action-menu>\n `);\n\nconst actionSubmenuFixture = async (): Promise<ActionMenu> =>\n await fixture<ActionMenu>(html`\n <sp-action-menu label=\"More Actions\">\n <sp-menu-item>One</sp-menu-item>\n <sp-menu-item selected id=\"root-selected-item\">Two</sp-menu-item>\n <sp-menu-item id=\"item-with-submenu\">\n B should be selected\n <sp-menu slot=\"submenu\">\n <sp-menu-item>A</sp-menu-item>\n <sp-menu-item selected id=\"sub-selected-item\">\n B\n </sp-menu-item>\n <sp-menu-item>C</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n </sp-action-menu>\n `);\n\nexport const testActionMenu = (mode: 'sync' | 'async'): void => {\n describe(`Action menu: ${mode}`, () => {\n testForLitDevWarnings(async () => await actionMenuFixture());\n it('loads', async () => {\n const el = await actionMenuFixture();\n await elementUpdated(el);\n\n expect(el).to.not.be.undefined;\n\n await expect(el).to.be.accessible();\n });\n it('loads - [slot=\"label\"]', async () => {\n const el = await fixture<ActionMenu>(html`\n <sp-action-menu>\n <span slot=\"label\">More Actions</span>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-action-menu>\n `);\n\n await elementUpdated(el);\n await nextFrame();\n await nextFrame();\n\n await expect(el).to.be.accessible();\n });\n it('loads - [custom icon]', async () => {\n const el = await fixture<ActionMenu>(html`\n <sp-action-menu label=\"More Actions\">\n <sp-icon-settings slot=\"icon\"></sp-icon-settings>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-action-menu>\n `);\n\n await elementUpdated(el);\n await nextFrame();\n await nextFrame();\n\n await expect(el).to.be.accessible();\n });\n it('dispatches change events, no [href]', async () => {\n const changeSpy = spy();\n\n const el = await fixture<ActionMenu>(html`\n <sp-action-menu\n label=\"More Actions\"\n @change=${({\n target: { value },\n }: Event & { target: ActionMenu }) => {\n changeSpy(value);\n }}\n >\n <sp-icon-settings slot=\"icon\"></sp-icon-settings>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-action-menu>\n `);\n\n expect(changeSpy.callCount).to.equal(0);\n expect(el.open).to.be.false;\n\n const menuItem2 = el.querySelector(\n 'sp-menu-item:nth-child(2)'\n ) as MenuItem;\n const opened = oneEvent(el, 'sp-opened');\n el.click();\n await elementUpdated(el);\n await opened;\n\n expect(el.open).to.be.true;\n\n const closed = oneEvent(el, 'sp-closed');\n menuItem2.click();\n await closed;\n\n expect(el.open).to.be.false;\n expect(changeSpy.callCount).to.equal(1);\n expect(changeSpy.calledWith('Deselect')).to.be.true;\n });\n it('closes when Menu Item has [href]', async () => {\n const changeSpy = spy();\n\n const el = await fixture<ActionMenu>(html`\n <sp-action-menu\n label=\"More Actions\"\n @change=${() => {\n changeSpy();\n }}\n >\n <sp-icon-settings slot=\"icon\"></sp-icon-settings>\n <sp-menu-item href=\"#\">Deselect</sp-menu-item>\n <sp-menu-item href=\"#\">Select Inverse</sp-menu-item>\n <sp-menu-item href=\"#\">Feather...</sp-menu-item>\n <sp-menu-item href=\"#\">Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item href=\"#\">Save Selection</sp-menu-item>\n <sp-menu-item href=\"#\" disabled>\n Make Work Path\n </sp-menu-item>\n </sp-action-menu>\n `);\n\n expect(changeSpy.callCount).to.equal(0);\n expect(el.open).to.be.false;\n\n const menuItem2 = el.querySelector(\n 'sp-menu-item:nth-child(2)'\n ) as MenuItem;\n\n const opened = oneEvent(el, 'sp-opened');\n el.click();\n await opened;\n\n expect(el.open).to.be.true;\n\n const closed = oneEvent(el, 'sp-closed');\n menuItem2.click();\n await closed;\n\n expect(el.open).to.be.false;\n expect(changeSpy.callCount).to.equal(0);\n });\n it('can be `quiet`', async () => {\n const el = await actionMenuFixture();\n\n expect(el.quiet).to.be.false;\n\n el.quiet = true;\n await elementUpdated(el);\n\n expect(el.quiet).to.be.true;\n });\n it('can be `staticColor`', async () => {\n const el = await actionMenuFixture();\n\n expect(el.staticColor == undefined).to.be.true;\n\n el.staticColor = 'black';\n await elementUpdated(el);\n\n expect(el.staticColor == 'black').to.be.true;\n\n el.staticColor = 'white';\n await elementUpdated(el);\n\n expect(el.staticColor == 'white').to.be.true;\n });\n it('stay `valid`', async () => {\n const el = await actionMenuFixture();\n\n expect(el.invalid).to.be.false;\n\n el.invalid = true;\n await elementUpdated(el);\n\n expect(el.invalid).to.be.false;\n });\n it('focus()', async () => {\n const el = await actionMenuFixture();\n\n el.focus();\n\n expect(document.activeElement).to.equal(el);\n expect(el.shadowRoot.activeElement).to.equal(el.focusElement);\n\n const opened = oneEvent(el, 'sp-opened');\n el.open = true;\n await opened;\n\n const closed = oneEvent(el, 'sp-closed');\n el.open = false;\n await closed;\n\n expect(document.activeElement).to.equal(el);\n expect(el.shadowRoot.activeElement).to.equal(el.focusElement);\n });\n it('manages focus-ring styles', async () => {\n if (!isWebKit()) {\n return;\n }\n\n const el = await actionMenuFixture();\n\n /**\n * This is a hack to set the `isMobile` property to true so that we can test the MobileController\n */\n el.isMobile.matches = true;\n el.bindEvents();\n\n await setViewport({ width: 360, height: 640 });\n // Allow viewport update to propagate.\n await nextFrame();\n\n let opened = oneEvent(el, 'sp-opened');\n\n const boundingRect = el.button.getBoundingClientRect();\n sendMouse({\n steps: [\n {\n type: 'click',\n position: [\n boundingRect.x + boundingRect.width / 2,\n boundingRect.y + boundingRect.height / 2,\n ],\n },\n ],\n });\n\n await opened;\n\n const tray = el.shadowRoot.querySelector('sp-tray');\n expect(tray).to.not.be.null;\n\n // Make a selection\n let closed = oneEvent(el, 'sp-closed');\n\n const firstItem = el.querySelector('sp-menu-item') as MenuItem;\n firstItem.click();\n\n await elementUpdated(el);\n await closed;\n\n // expect the tray to be closed\n expect(el.open).to.be.false;\n\n const button = el.shadowRoot.querySelector(\n '#button'\n ) as HTMLButtonElement;\n expect(button).to.not.be.null;\n\n // we should have SAFARI_FOCUS_RING_CLASS in the classList\n expect(button.classList.contains(SAFARI_FOCUS_RING_CLASS)).to.be\n .true;\n\n // picker should still have focus\n expect(document.activeElement === el).to.be.true;\n\n // click outside (0,0)\n await sendMouse({\n steps: [\n {\n type: 'click',\n position: [0, 0],\n },\n ],\n });\n\n // picker should not have focus\n expect(document.activeElement === el).to.be.false;\n\n // Let's use keyboard to open the tray now\n opened = oneEvent(el, 'sp-opened');\n await sendKeys({\n press: 'Tab',\n });\n await sendKeys({\n press: 'Enter',\n });\n await elementUpdated(el);\n await opened;\n\n // Make a selection again\n closed = oneEvent(el, 'sp-closed');\n firstItem.click();\n await elementUpdated(el);\n await closed;\n\n // expect the tray to be closed\n expect(el.open).to.be.false;\n\n // we should not have SAFARI_FOCUS_RING_CLASS in the classList\n expect(button.classList.contains(SAFARI_FOCUS_RING_CLASS)).to.be\n .false;\n });\n it('opens unmeasured', async () => {\n const el = await actionMenuFixture();\n\n const button = el.button as HTMLButtonElement;\n expect(button).to.have.attribute('aria-haspopup', 'true');\n expect(button).to.not.have.attribute('aria-expanded', 'true');\n expect(button).to.not.have.attribute('aria-controls', 'menu');\n\n el.click();\n await elementUpdated(el);\n expect(el.open).to.be.true;\n expect(button).to.have.attribute('aria-haspopup', 'true');\n expect(button).to.have.attribute('aria-expanded', 'true');\n expect(button).to.have.attribute('aria-controls', 'menu');\n });\n it('opens repeatedly with Menu in the correct location', async function () {\n const el = await fixture<ActionMenu>(\n iconOnly({\n ...iconOnly.args,\n align: 'end',\n })\n );\n\n await elementUpdated(el);\n\n el.focus();\n await elementUpdated(el);\n let opened = oneEvent(el, 'sp-opened');\n await sendKeys({ press: 'ArrowRight' });\n await sendKeys({ press: 'ArrowLeft' });\n await sendKeys({ press: 'Space' });\n await opened;\n\n const firstRect = (\n el as unknown as { overlayElement: Overlay }\n ).overlayElement.dialogEl.getBoundingClientRect();\n\n let closed = oneEvent(el, 'sp-closed');\n await sendKeys({ press: 'Space' });\n await closed;\n\n opened = oneEvent(el, 'sp-opened');\n await sendKeys({ press: 'Space' });\n await opened;\n\n const secondRect = (\n el as unknown as { overlayElement: Overlay }\n ).overlayElement.dialogEl.getBoundingClientRect();\n\n closed = oneEvent(el, 'sp-closed');\n await sendKeys({ press: 'Space' });\n await closed;\n\n expect(firstRect).to.deep.equal(secondRect);\n });\n it('opens and selects in a single pointer button interaction', async () => {\n const el = await actionMenuFixture();\n const thirdItem = el.querySelector(\n 'sp-menu-item:nth-of-type(3)'\n ) as MenuItem;\n const boundingRect = el.button.getBoundingClientRect();\n\n expect(el.value).to.not.equal(thirdItem.value);\n const opened = oneEvent(el, 'sp-opened');\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n boundingRect.x + boundingRect.width / 2,\n boundingRect.y + boundingRect.height / 2,\n ],\n },\n {\n type: 'down',\n },\n ],\n });\n await opened;\n\n const thirdItemRect = thirdItem.getBoundingClientRect();\n const closed = oneEvent(el, 'sp-closed');\n let selected = '';\n el.addEventListener('change', (event: Event) => {\n selected = (event.target as ActionMenu).value;\n });\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n thirdItemRect.x + thirdItemRect.width / 2,\n thirdItemRect.y + thirdItemRect.height / 2,\n ],\n },\n {\n type: 'up',\n },\n ],\n });\n await closed;\n\n expect(el.open).to.be.false;\n expect(selected).to.equal(thirdItem.value);\n });\n it('has attribute aria-describedby', async () => {\n const name = 'sp-picker';\n const description = 'Rendering a Picker';\n\n const el = await fixture(html`\n <sp-action-menu label=${name}>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <span slot=\"description\">${description}</span>\n </sp-action-menu>\n `);\n\n await elementUpdated(el);\n\n await findDescribedNode(name, description);\n });\n it('opens unmeasured with deprecated syntax', async () => {\n const el = await deprecatedActionMenuFixture();\n\n el.click();\n await elementUpdated(el);\n expect(el.open).to.be.true;\n });\n it('toggles open/close multiple time', async () => {\n const el = await actionMenuFixture();\n\n await elementUpdated(el);\n\n const button = el.button as HTMLButtonElement;\n expect(button).to.have.attribute('aria-haspopup', 'true');\n expect(button).to.have.attribute('aria-expanded', 'false');\n expect(button).not.to.have.attribute('aria-controls');\n\n let opened = oneEvent(el, 'sp-opened');\n el.open = true;\n await opened;\n\n expect(el.open).to.be.true;\n expect(button).to.have.attribute('aria-expanded', 'true');\n expect(button).to.have.attribute('aria-controls', 'menu');\n\n let closed = oneEvent(el, 'sp-closed');\n el.open = false;\n await closed;\n\n expect(el.open).to.be.false;\n expect(button).to.have.attribute('aria-expanded', 'false');\n expect(button).not.to.have.attribute('aria-controls');\n\n opened = oneEvent(el, 'sp-opened');\n el.open = true;\n await opened;\n\n expect(el.open).to.be.true;\n expect(button).to.have.attribute('aria-expanded', 'true');\n expect(button).to.have.attribute('aria-controls', 'menu');\n\n closed = oneEvent(el, 'sp-closed');\n el.open = false;\n await closed;\n\n expect(el.open).to.be.false;\n expect(button).to.have.attribute('aria-expanded', 'false');\n expect(button).not.to.have.attribute('aria-controls');\n });\n it('allows submenu items to be selected', async () => {\n const root = await actionSubmenuFixture();\n const menuItem = root.querySelector('#item-with-submenu') as Menu;\n const submenu = menuItem.querySelector(\n 'sp-menu[slot=\"submenu\"]'\n ) as Menu;\n const selectedItem = submenu.querySelector(\n '#sub-selected-item'\n ) as MenuItem;\n\n expect(selectedItem.selected, 'item should be initially selected')\n .to.be.true;\n\n let opened = oneEvent(root, 'sp-opened');\n root.click();\n await opened;\n expect(root.open).to.be.true;\n\n opened = oneEvent(menuItem, 'sp-opened');\n menuItem.dispatchEvent(\n new PointerEvent('pointerenter', { bubbles: true })\n );\n await opened;\n\n await elementUpdated(submenu);\n expect(\n selectedItem.selected,\n 'initially selected item should maintain selection'\n ).to.be.true;\n });\n it('allows top-level selection state to change', async () => {\n let selected = true;\n const handleChange = (\n event: Event & { target: ActionMenu }\n ): void => {\n if (event.target.value === 'test') {\n selected = !selected;\n\n event.target.updateComplete.then(() => {\n event.target.value = selected ? 'test' : '';\n });\n }\n };\n const root = await fixture<ActionMenu>(html`\n <sp-action-menu label=\"More Actions\" @change=${handleChange}>\n <sp-menu-item>One</sp-menu-item>\n <sp-menu-item selected value=\"test\" id=\"root-selected-item\">\n Two\n </sp-menu-item>\n <sp-menu-item id=\"item-with-submenu\">\n B should be selected\n <sp-menu slot=\"submenu\">\n <sp-menu-item>A</sp-menu-item>\n <sp-menu-item selected id=\"sub-selected-item\">\n B\n </sp-menu-item>\n <sp-menu-item>C</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n </sp-action-menu>\n `);\n\n const unselectedItem = root.querySelector(\n 'sp-menu-item'\n ) as MenuItem;\n const selectedItem = root.querySelector(\n '#root-selected-item'\n ) as MenuItem;\n\n expect(unselectedItem.textContent).to.include('One');\n expect(unselectedItem.selected).to.be.false;\n expect(selectedItem.textContent).to.include('Two');\n expect(selectedItem.selected).to.be.true;\n\n let opened = oneEvent(root, 'sp-opened');\n root.click();\n await opened;\n\n // close by clicking selected\n // (with event listener: should set selected = false)\n let closed = oneEvent(root, 'sp-closed');\n selectedItem.click();\n await closed;\n\n expect(root.open).to.be.false;\n opened = oneEvent(root, 'sp-opened');\n root.click();\n await opened;\n\n // close by clicking unselected\n // (no event listener: should remain selected = false)\n closed = oneEvent(root, 'sp-closed');\n unselectedItem.click();\n await closed;\n\n opened = oneEvent(root, 'sp-opened');\n root.click();\n await opened;\n\n expect(unselectedItem.textContent).to.include('One');\n expect(unselectedItem.selected).to.be.false;\n expect(selectedItem.textContent).to.include('Two');\n expect(selectedItem.selected).to.be.false;\n\n // close by clicking selected\n // (with event listener: should set selected = false)\n closed = oneEvent(root, 'sp-closed');\n selectedItem.click();\n await closed;\n\n opened = oneEvent(root, 'sp-opened');\n root.click();\n await opened;\n\n expect(unselectedItem.textContent).to.include('One');\n expect(unselectedItem.selected).to.be.false;\n expect(selectedItem.textContent).to.include('Two');\n expect(selectedItem.selected).to.be.true;\n });\n it('shows tooltip', async function () {\n const openSpy = spy();\n const el = await fixture<ActionMenu>(\n tooltipDescriptionAndPlacement(\n tooltipDescriptionAndPlacement.args\n )\n );\n const tooltip = el.querySelector('sp-tooltip') as Tooltip;\n const rect = el.getBoundingClientRect();\n tooltip.addEventListener('sp-opened', () => openSpy());\n await elementUpdated(tooltip);\n\n await nextFrame();\n await nextFrame();\n\n const overlay = tooltip.shadowRoot.querySelector(\n 'sp-overlay'\n ) as Overlay;\n await elementUpdated(overlay);\n\n expect(overlay.triggerElement === el.button).to.be.true;\n let open = oneEvent(tooltip, 'sp-opened');\n await sendMouse({\n steps: [\n {\n position: [\n rect.left + rect.width / 2,\n rect.top + rect.height / 2,\n ],\n type: 'move',\n },\n ],\n });\n await open;\n\n expect(tooltip.open).to.be.true;\n\n const close = oneEvent(tooltip, 'sp-closed');\n open = oneEvent(el, 'sp-opened');\n await sendMouse({\n steps: [\n {\n position: [\n rect.left + rect.width / 2,\n rect.top + rect.height / 2,\n ],\n type: 'click',\n },\n ],\n });\n await close;\n await open;\n\n expect(tooltip.open, 'tooltip still open').to.be.false;\n expect(el.open, 'menu not open').to.be.true;\n\n const menu = (el as unknown as TestablePicker).optionsMenu;\n const menuRect = menu.getBoundingClientRect();\n\n await sendMouse({\n steps: [\n {\n position: [\n menuRect.left + menuRect.width / 2,\n menuRect.top + menuRect.height / 2,\n ],\n type: 'move',\n },\n ],\n });\n\n await aTimeout(150);\n\n expect(openSpy.callCount).to.equal(1);\n });\n it('opens, then closes, on subsequent clicks', async function () {\n const el = await actionMenuFixture();\n const rect = el.getBoundingClientRect();\n\n await nextFrame();\n await nextFrame();\n\n const open = oneEvent(el, 'sp-opened');\n await sendMouse({\n steps: [\n {\n position: [\n rect.left + rect.width / 2,\n rect.top + rect.height / 2,\n ],\n type: 'click',\n },\n ],\n });\n await open;\n\n expect(el.open).to.be.true;\n await aTimeout(50);\n expect(el.open).to.be.true;\n\n const close = oneEvent(el, 'sp-closed');\n await sendMouse({\n steps: [\n {\n position: [\n rect.left + rect.width / 2,\n rect.top + rect.height / 2,\n ],\n type: 'click',\n },\n ],\n });\n await close;\n\n expect(el.open).to.be.false;\n await aTimeout(50);\n expect(el.open).to.be.false;\n });\n it('should handle scroll event', async () => {\n const renderMenuItems = (): TemplateResult[] =>\n Array.from(\n { length: 30 },\n (_, i) => html`\n <sp-menu-item style=\"width: 100%;\">\n Menu Item ${i + 1}\n </sp-menu-item>\n `\n );\n const handleActionMenuScroll = spy();\n const el = await fixture<ActionMenu>(html`\n <sp-action-menu @scroll=${() => handleActionMenuScroll()}>\n <span slot=\"label\">More Actions</span>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n ${renderMenuItems()}\n </sp-action-menu>\n `);\n\n await elementUpdated(el);\n\n expect(handleActionMenuScroll.called).to.be.false;\n\n el.dispatchEvent(\n new Event('scroll', { cancelable: true, composed: true })\n );\n expect(handleActionMenuScroll).to.have.been.called;\n });\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*/\n\nimport {\n aTimeout,\n elementUpdated,\n expect,\n html,\n nextFrame,\n oneEvent,\n waitUntil\n} from '@open-wc/testing';\nimport { testForLitDevWarnings } from '../../../test/testing-helpers';\n\nimport { spy } from 'sinon';\n\nimport { ActionMenu } from '@spectrum-web-components/action-menu';\nimport type { Menu, MenuItem } from '@spectrum-web-components/menu';\nimport {\n fixture,\n ignoreResizeObserverLoopError,\n} from '../../../test/testing-helpers.js';\nimport '@spectrum-web-components/dialog/sp-dialog-base.js';\nimport {\n iconOnly,\n tooltipDescriptionAndPlacement,\n} from '../stories/action-menu.stories.js';\nimport { findDescribedNode } from '../../../test/testing-helpers-a11y.js';\nimport type { Tooltip } from '@spectrum-web-components/tooltip';\nimport { sendMouse } from '../../../test/plugins/browser.js';\nimport type { TestablePicker } from '../../picker/test/index.js';\nimport type { Overlay } from '@spectrum-web-components/overlay';\nimport { \n a11ySnapshot,\n findAccessibilityNode,\n sendKeys, \n setViewport } from '@web/test-runner-commands';\nimport { TemplateResult } from '@spectrum-web-components/base';\nimport { isWebKit } from '@spectrum-web-components/shared';\nimport { SAFARI_FOCUS_RING_CLASS } from '@spectrum-web-components/picker/src/InteractionController.js';\n\nignoreResizeObserverLoopError(before, after);\n\nconst deprecatedActionMenuFixture = async (): Promise<ActionMenu> =>\n await fixture<ActionMenu>(html`\n <sp-action-menu label=\"More Actions\">\n <sp-menu>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n </sp-action-menu>\n `);\n\nconst actionMenuFixture = async (): Promise<ActionMenu> =>\n await fixture<ActionMenu>(html`\n <sp-action-menu label=\"More Actions\">\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-action-menu>\n `);\n\nconst actionSubmenuFixture = async (): Promise<ActionMenu> =>\n await fixture<ActionMenu>(html`\n <sp-action-menu label=\"More Actions\">\n <sp-menu-item>One</sp-menu-item>\n <sp-menu-item selected id=\"root-selected-item\">Two</sp-menu-item>\n <sp-menu-item id=\"item-with-submenu\">\n B should be selected\n <sp-menu slot=\"submenu\">\n <sp-menu-item>A</sp-menu-item>\n <sp-menu-item selected id=\"sub-selected-item\">\n B\n </sp-menu-item>\n <sp-menu-item>C</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n </sp-action-menu>\n `);\n\nexport const testActionMenu = (mode: 'sync' | 'async'): void => {\n describe(`Action menu: ${mode}`, () => {\n testForLitDevWarnings(async () => await actionMenuFixture());\n it('loads', async () => {\n const el = await actionMenuFixture();\n await elementUpdated(el);\n\n expect(el).to.not.be.undefined;\n\n await expect(el).to.be.accessible();\n });\n it('loads - [slot=\"label\"]', async () => {\n const el = await fixture<ActionMenu>(html`\n <sp-action-menu>\n <span slot=\"label\">More Actions</span>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-action-menu>\n `);\n\n await elementUpdated(el);\n await nextFrame();\n await nextFrame();\n\n await expect(el).to.be.accessible();\n });\n it('loads - [custom icon]', async () => {\n const el = await fixture<ActionMenu>(html`\n <sp-action-menu label=\"More Actions\">\n <sp-icon-settings slot=\"icon\"></sp-icon-settings>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-action-menu>\n `);\n\n await elementUpdated(el);\n await nextFrame();\n await nextFrame();\n\n await expect(el).to.be.accessible();\n });\n it('has menuitems in accessibility tree', async() => {\n const el = await fixture<ActionMenu>(html`\n <sp-action-menu\n label=\"More Actions\">\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-action-menu>\n `);\n const opened = oneEvent(el, 'sp-opened');\n el.focus();\n sendKeys({ press: 'Enter' });\n await opened;\n await nextFrame();\n\n\n type NamedNode = { name: string, role: string, disabled: boolean };\n const snapshot = (await a11ySnapshot({})) as unknown as NamedNode & {\n children: NamedNode[];\n };\n const button = findAccessibilityNode<NamedNode>(snapshot, (node) => node.name === 'More Actions');\n const menu = findAccessibilityNode<NamedNode>(snapshot, (node) => node.role === 'menu');\n const deselect = findAccessibilityNode<NamedNode>(snapshot, (node) => node.role === 'menuitem' && node.name === 'Deselect');\n const workPath = findAccessibilityNode<NamedNode>(snapshot, (node) => node.role === 'menuitem' && node.name === 'Make Work Path' && node.disabled);\n expect(button, 'button').to.not.be.null;\n expect(menu, 'menu').to.not.be.null;\n expect(deselect, 'first menuitem').to.not.be.null;\n expect(workPath, 'second menuitem').to.not.be.null;\n });\n it('dispatches change events, no [href]', async () => {\n const changeSpy = spy();\n\n const el = await fixture<ActionMenu>(html`\n <sp-action-menu\n label=\"More Actions\"\n @change=${({\n target: { value },\n }: Event & { target: ActionMenu }) => {\n changeSpy(value);\n }}\n >\n <sp-icon-settings slot=\"icon\"></sp-icon-settings>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-action-menu>\n `);\n\n expect(changeSpy.callCount).to.equal(0);\n expect(el.open).to.be.false;\n\n const menuItem2 = el.querySelector(\n 'sp-menu-item:nth-child(2)'\n ) as MenuItem;\n const opened = oneEvent(el, 'sp-opened');\n el.click();\n await elementUpdated(el);\n await opened;\n\n expect(el.open).to.be.true;\n\n const closed = oneEvent(el, 'sp-closed');\n menuItem2.click();\n await closed;\n\n expect(el.open).to.be.false;\n expect(changeSpy.callCount).to.equal(1);\n expect(changeSpy.calledWith('Deselect')).to.be.true;\n });\n it('closes when Menu Item has [href]', async () => {\n const changeSpy = spy();\n\n const el = await fixture<ActionMenu>(html`\n <sp-action-menu\n label=\"More Actions\"\n @change=${() => {\n changeSpy();\n }}\n >\n <sp-icon-settings slot=\"icon\"></sp-icon-settings>\n <sp-menu-item href=\"#\">Deselect</sp-menu-item>\n <sp-menu-item href=\"#\">Select Inverse</sp-menu-item>\n <sp-menu-item href=\"#\">Feather...</sp-menu-item>\n <sp-menu-item href=\"#\">Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item href=\"#\">Save Selection</sp-menu-item>\n <sp-menu-item href=\"#\" disabled>\n Make Work Path\n </sp-menu-item>\n </sp-action-menu>\n `);\n\n expect(changeSpy.callCount).to.equal(0);\n expect(el.open).to.be.false;\n\n const menuItem2 = el.querySelector(\n 'sp-menu-item:nth-child(2)'\n ) as MenuItem;\n\n const opened = oneEvent(el, 'sp-opened');\n el.click();\n await opened;\n\n expect(el.open).to.be.true;\n\n const closed = oneEvent(el, 'sp-closed');\n menuItem2.click();\n await closed;\n\n expect(el.open).to.be.false;\n expect(changeSpy.callCount).to.equal(0);\n });\n it('can be `quiet`', async () => {\n const el = await actionMenuFixture();\n\n expect(el.quiet).to.be.false;\n\n el.quiet = true;\n await elementUpdated(el);\n\n expect(el.quiet).to.be.true;\n });\n it('can be `staticColor`', async () => {\n const el = await actionMenuFixture();\n\n expect(el.staticColor == undefined).to.be.true;\n\n el.staticColor = 'black';\n await elementUpdated(el);\n\n expect(el.staticColor == 'black').to.be.true;\n\n el.staticColor = 'white';\n await elementUpdated(el);\n\n expect(el.staticColor == 'white').to.be.true;\n });\n it('stay `valid`', async () => {\n const el = await actionMenuFixture();\n\n expect(el.invalid).to.be.false;\n\n el.invalid = true;\n await elementUpdated(el);\n\n expect(el.invalid).to.be.false;\n });\n it('focus()', async () => {\n const el = await actionMenuFixture();\n\n el.focus();\n\n expect(document.activeElement).to.equal(el);\n expect(el.shadowRoot.activeElement).to.equal(el.focusElement);\n\n const opened = oneEvent(el, 'sp-opened');\n el.open = true;\n await opened;\n\n const closed = oneEvent(el, 'sp-closed');\n el.open = false;\n await closed;\n\n expect(document.activeElement).to.equal(el);\n expect(el.shadowRoot.activeElement).to.equal(el.focusElement);\n });\n it('manages focus-ring styles', async () => {\n if (!isWebKit()) {\n return;\n }\n\n const el = await actionMenuFixture();\n\n /**\n * This is a hack to set the `isMobile` property to true so that we can test the MobileController\n */\n el.isMobile.matches = true;\n el.bindEvents();\n\n await setViewport({ width: 360, height: 640 });\n // Allow viewport update to propagate.\n await nextFrame();\n\n let opened = oneEvent(el, 'sp-opened');\n\n const boundingRect = el.button.getBoundingClientRect();\n sendMouse({\n steps: [\n {\n type: 'click',\n position: [\n boundingRect.x + boundingRect.width / 2,\n boundingRect.y + boundingRect.height / 2,\n ],\n },\n ],\n });\n\n await opened;\n\n const tray = el.shadowRoot.querySelector('sp-tray');\n expect(tray).to.not.be.null;\n\n // Make a selection\n let closed = oneEvent(el, 'sp-closed');\n\n const firstItem = el.querySelector('sp-menu-item') as MenuItem;\n firstItem.click();\n\n await elementUpdated(el);\n await closed;\n\n // expect the tray to be closed\n expect(el.open).to.be.false;\n\n const button = el.shadowRoot.querySelector(\n '#button'\n ) as HTMLButtonElement;\n expect(button).to.not.be.null;\n\n // we should have SAFARI_FOCUS_RING_CLASS in the classList\n expect(button.classList.contains(SAFARI_FOCUS_RING_CLASS)).to.be\n .true;\n\n // picker should still have focus\n expect(document.activeElement === el).to.be.true;\n\n // click outside (0,0)\n await sendMouse({\n steps: [\n {\n type: 'click',\n position: [0, 0],\n },\n ],\n });\n\n // picker should not have focus\n expect(document.activeElement === el).to.be.false;\n\n // Let's use keyboard to open the tray now\n opened = oneEvent(el, 'sp-opened');\n await sendKeys({\n press: 'Tab',\n });\n await sendKeys({\n press: 'Enter',\n });\n await elementUpdated(el);\n await opened;\n\n // Make a selection again\n closed = oneEvent(el, 'sp-closed');\n firstItem.click();\n await elementUpdated(el);\n await closed;\n\n // expect the tray to be closed\n expect(el.open).to.be.false;\n\n // we should not have SAFARI_FOCUS_RING_CLASS in the classList\n expect(button.classList.contains(SAFARI_FOCUS_RING_CLASS)).to.be\n .false;\n });\n it('opens unmeasured', async () => {\n const el = await actionMenuFixture();\n\n const button = el.button as HTMLButtonElement;\n expect(button).to.have.attribute('aria-haspopup', 'true');\n expect(button).to.not.have.attribute('aria-expanded', 'true');\n expect(button).to.not.have.attribute('aria-controls', 'menu');\n\n el.click();\n await elementUpdated(el);\n expect(el.open).to.be.true;\n expect(button).to.have.attribute('aria-haspopup', 'true');\n expect(button).to.have.attribute('aria-expanded', 'true');\n expect(button).to.have.attribute('aria-controls', 'menu');\n });\n it('opens repeatedly with Menu in the correct location', async function () {\n const el = await fixture<ActionMenu>(\n iconOnly({\n ...iconOnly.args,\n align: 'end',\n })\n );\n\n expect(el.open, 'open?').to.be.false;\n\n let opened = oneEvent(el, 'sp-opened');\n el.click();\n await opened;\n\n expect(el.open, 'open?').to.be.true;\n\n const firstRect = (\n el as unknown as { overlayElement: Overlay }\n )?.overlayElement?.dialogEl?.getBoundingClientRect();\n\n const closed = oneEvent(el, 'sp-closed');\n el.close();\n await closed;\n expect(el.open, 'open?').to.be.false;\n\n opened = oneEvent(el, 'sp-opened');\n el.toggle();\n await opened;\n expect(el.open, 'open?').to.be.true;\n\n const secondRect = (\n el as unknown as { overlayElement: Overlay }\n )?.overlayElement?.dialogEl?.getBoundingClientRect();\n\n el.close();\n\n expect(firstRect).to.deep.equal(secondRect);\n });\n it('opens and selects in a single pointer button interaction', async () => {\n const el = await actionMenuFixture();\n const thirdItem = el.querySelector(\n 'sp-menu-item:nth-of-type(3)'\n ) as MenuItem;\n const boundingRect = el.button.getBoundingClientRect();\n\n expect(el.value).to.not.equal(thirdItem.value);\n const opened = oneEvent(el, 'sp-opened');\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n boundingRect.x + boundingRect.width / 2,\n boundingRect.y + boundingRect.height / 2,\n ],\n },\n {\n type: 'down',\n },\n ],\n });\n await opened;\n\n const thirdItemRect = thirdItem.getBoundingClientRect();\n const closed = oneEvent(el, 'sp-closed');\n let selected = '';\n el.addEventListener('change', (event: Event) => {\n selected = (event.target as ActionMenu).value;\n });\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n thirdItemRect.x + thirdItemRect.width / 2,\n thirdItemRect.y + thirdItemRect.height / 2,\n ],\n },\n {\n type: 'up',\n },\n ],\n });\n await closed;\n\n expect(el.open).to.be.false;\n expect(selected).to.equal(thirdItem.value);\n });\n it('returns focus on `Escape`', async () => {\n const el = await actionMenuFixture();\n const thirdItem = el.querySelector(\n 'sp-menu-item:nth-of-type(3)'\n ) as MenuItem;\n\n expect(el.value).to.not.equal(thirdItem.value);\n const opened = oneEvent(el, 'sp-opened');\n el.focus();\n await sendKeys({ press: 'Enter'})\n await opened;\n\n await sendKeys({ press: 'Escape'});\n await waitUntil(\n () => document.activeElement === el,\n 'focused', { timeout: 300 }\n );\n expect(el.open).to.be.false;\n });\n it('returns focus on select', async () => {\n const el = await actionMenuFixture();\n const thirdItem = el.querySelector(\n 'sp-menu-item:nth-of-type(3)'\n ) as MenuItem;\n\n expect(el.value).to.not.equal(thirdItem.value);\n const opened = oneEvent(el, 'sp-opened');\n el.focus();\n await sendKeys({ press: 'Enter'})\n await opened;\n\n thirdItem.click();\n await waitUntil(\n () => document.activeElement === el,\n 'focused', { timeout: 300 }\n );\n expect(el.open).to.be.false;\n });\n it('has attribute aria-describedby', async () => {\n const name = 'sp-picker';\n const description = 'Rendering a Picker';\n\n const el = await fixture(html`\n <sp-action-menu label=${name}>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <span slot=\"description\">${description}</span>\n </sp-action-menu>\n `);\n\n await elementUpdated(el);\n\n await findDescribedNode(name, description);\n });\n it('opens unmeasured with deprecated syntax', async () => {\n const el = await deprecatedActionMenuFixture();\n\n el.click();\n await elementUpdated(el);\n expect(el.open).to.be.true;\n });\n it('toggles open/close multiple time', async () => {\n const el = await actionMenuFixture();\n\n await elementUpdated(el);\n\n const button = el.button as HTMLButtonElement;\n expect(button).to.have.attribute('aria-haspopup', 'true');\n expect(button).to.have.attribute('aria-expanded', 'false');\n expect(button).not.to.have.attribute('aria-controls');\n\n let opened = oneEvent(el, 'sp-opened');\n el.open = true;\n await opened;\n\n expect(el.open).to.be.true;\n expect(button).to.have.attribute('aria-expanded', 'true');\n expect(button).to.have.attribute('aria-controls', 'menu');\n\n let closed = oneEvent(el, 'sp-closed');\n el.open = false;\n await closed;\n\n expect(el.open).to.be.false;\n expect(button).to.have.attribute('aria-expanded', 'false');\n expect(button).not.to.have.attribute('aria-controls');\n\n opened = oneEvent(el, 'sp-opened');\n el.open = true;\n await opened;\n\n expect(el.open).to.be.true;\n expect(button).to.have.attribute('aria-expanded', 'true');\n expect(button).to.have.attribute('aria-controls', 'menu');\n\n closed = oneEvent(el, 'sp-closed');\n el.open = false;\n await closed;\n\n expect(el.open).to.be.false;\n expect(button).to.have.attribute('aria-expanded', 'false');\n expect(button).not.to.have.attribute('aria-controls');\n });\n it('allows submenu items to be selected', async () => {\n const root = await actionSubmenuFixture();\n const menuItem = root.querySelector('#item-with-submenu') as Menu;\n const submenu = menuItem.querySelector(\n 'sp-menu[slot=\"submenu\"]'\n ) as Menu;\n const selectedItem = submenu.querySelector(\n '#sub-selected-item'\n ) as MenuItem;\n\n expect(selectedItem.selected, 'item should be initially selected')\n .to.be.true;\n\n let opened = oneEvent(root, 'sp-opened');\n root.click();\n await opened;\n expect(root.open).to.be.true;\n\n opened = oneEvent(menuItem, 'sp-opened');\n menuItem.dispatchEvent(\n new PointerEvent('pointerenter', { bubbles: true })\n );\n await opened;\n\n await elementUpdated(submenu);\n expect(\n selectedItem.selected,\n 'initially selected item should maintain selection'\n ).to.be.true;\n });\n it('does not alter submenu selection when top-level menu items are selected', async () => {\n const root = await fixture<ActionMenu>(html`\n <sp-action-menu id=\"actionmenu\" label=\"More Actions\">\n <sp-menu-item id=\"item-1\">One</sp-menu-item>\n <sp-menu-item id=\"item-2\">\n Two, with B selected\n <sp-menu slot=\"submenu\" id=\"menu-2\" selects=\"single\">\n <sp-menu-item id=\"item-2a\" selected>A</sp-menu-item>\n <sp-menu-item id=\"item-2b\">B</sp-menu-item>\n </sp-menu>\n </sp-menu-item>\n </sp-action-menu>\n `);\n\n const item1 = root.querySelector('#item-1') as MenuItem;\n const item2 = root.querySelector('#item-2') as MenuItem;\n const itemA = root.querySelector('#item-2a') as MenuItem;\n const itemB = root.querySelector('#item-2b') as MenuItem;\n\n let opened = oneEvent(root, 'sp-opened');\n\n expect(item1.selected, 'before opening: item1 selected?').to.be\n .false;\n expect(item2.selected, 'before opening: item2 selected?').to.be\n .false;\n expect(itemA.selected, 'before opening: itemA selected?').to.be\n .true;\n expect(item2.selected, 'before opening: itemB selected?').to.be\n .false;\n root.click();\n await opened;\n\n expect(root.open, 'after clicking open: open?').to.be.true;\n\n let closed = oneEvent(root, 'sp-closed');\n item1.click();\n await closed;\n\n expect(item1.selected, 'after clicking item1: item1 selected?').to\n .be.false;\n expect(itemA.selected, 'after clicking item1: itemA selected?').to\n .be.true;\n expect(root.open, 'after clicking item1: open?').to.be.false;\n\n opened = oneEvent(root, 'sp-opened');\n root.click();\n await opened;\n\n expect(root.open, 'after reopening: open?').to.be.true;\n\n closed = oneEvent(root, 'sp-closed');\n itemB.click();\n root.close();\n await closed;\n\n expect(item1.selected, 'after clicking itemB: item1 selected?').to\n .be.false;\n expect(item2.selected, 'after clicking itemB: item2 selected?').to\n .be.false;\n expect(itemA.selected, 'after clicking itemB: itemA selected?').to\n .be.false;\n expect(itemB.selected, 'after clicking itemB: itemB selected?').to\n .be.true;\n expect(root.open, 'after clicking itemB: open?').to.be.false;\n\n opened = oneEvent(root, 'sp-opened');\n root.click();\n await opened;\n\n expect(root.open, 'after reopening: open?').to.be.true;\n\n closed = oneEvent(root, 'sp-closed');\n itemB.click();\n await closed;\n\n expect(item2.selected, 'after clicking item2: item2 selected?').to\n .be.false;\n expect(itemB.selected, 'after clicking item2: itemB selected?').to\n .be.true;\n expect(root.open, 'after clicking item2: open?').to.be.false;\n });\n it('shows tooltip', async function () {\n const openSpy = spy();\n const el = await fixture<ActionMenu>(\n tooltipDescriptionAndPlacement(\n tooltipDescriptionAndPlacement.args\n )\n );\n const tooltip = el.querySelector('sp-tooltip') as Tooltip;\n const rect = el.getBoundingClientRect();\n tooltip.addEventListener('sp-opened', () => openSpy());\n await elementUpdated(tooltip);\n\n await nextFrame();\n await nextFrame();\n\n const overlay = tooltip.shadowRoot.querySelector(\n 'sp-overlay'\n ) as Overlay;\n await elementUpdated(overlay);\n\n expect(overlay.triggerElement === el.button).to.be.true;\n let open = oneEvent(tooltip, 'sp-opened');\n await sendMouse({\n steps: [\n {\n position: [\n rect.left + rect.width / 2,\n rect.top + rect.height / 2,\n ],\n type: 'move',\n },\n ],\n });\n await open;\n\n expect(tooltip.open).to.be.true;\n\n const close = oneEvent(tooltip, 'sp-closed');\n open = oneEvent(el, 'sp-opened');\n await sendMouse({\n steps: [\n {\n position: [\n rect.left + rect.width / 2,\n rect.top + rect.height / 2,\n ],\n type: 'click',\n },\n ],\n });\n await close;\n await open;\n\n expect(tooltip.open, 'tooltip still open').to.be.false;\n expect(el.open, 'menu not open').to.be.true;\n\n const menu = (el as unknown as TestablePicker).optionsMenu;\n const menuRect = menu.getBoundingClientRect();\n\n await sendMouse({\n steps: [\n {\n position: [\n menuRect.left + menuRect.width / 2,\n menuRect.top + menuRect.height / 2,\n ],\n type: 'move',\n },\n ],\n });\n\n await aTimeout(150);\n\n expect(openSpy.callCount).to.equal(1);\n });\n it('opens, then closes, on subsequent clicks', async function () {\n const el = await actionMenuFixture();\n const rect = el.getBoundingClientRect();\n\n await nextFrame();\n await nextFrame();\n\n const open = oneEvent(el, 'sp-opened');\n await sendMouse({\n steps: [\n {\n position: [\n rect.left + rect.width / 2,\n rect.top + rect.height / 2,\n ],\n type: 'click',\n },\n ],\n });\n await open;\n\n expect(el.open).to.be.true;\n await aTimeout(50);\n expect(el.open).to.be.true;\n\n const close = oneEvent(el, 'sp-closed');\n await sendMouse({\n steps: [\n {\n position: [\n rect.left + rect.width / 2,\n rect.top + rect.height / 2,\n ],\n type: 'click',\n },\n ],\n });\n await close;\n\n expect(el.open).to.be.false;\n await aTimeout(50);\n expect(el.open).to.be.false;\n });\n it('should handle scroll event', async () => {\n const renderMenuItems = (): TemplateResult[] =>\n Array.from(\n { length: 30 },\n (_, i) => html`\n <sp-menu-item style=\"width: 100%;\">\n Menu Item ${i + 1}\n </sp-menu-item>\n `\n );\n const handleActionMenuScroll = spy();\n const el = await fixture<ActionMenu>(html`\n <sp-action-menu @scroll=${() => handleActionMenuScroll()}>\n <span slot=\"label\">More Actions</span>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n ${renderMenuItems()}\n </sp-action-menu>\n `);\n\n await elementUpdated(el);\n\n expect(handleActionMenuScroll.called).to.be.false;\n\n el.dispatchEvent(\n new Event('scroll', { cancelable: true, composed: true })\n );\n expect(handleActionMenuScroll).to.have.been.called;\n });\n });\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|