@spectrum-web-components/action-menu 0.35.0 → 0.35.1-rc.24

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/README.md CHANGED
@@ -245,3 +245,19 @@ When `selects` is set to `single`, the `<sp-action-menu>` element will maintain
245
245
  ## Accessibility
246
246
 
247
247
  An `<sp-action-menu>` parent will ensure that the internal `<sp-menu>` features a role of `listbox` and contains children with the role `option`. Upon focusing the `<sp-action-menu>` using `ArrowDown` will also open the menu while throwing focus into first selected (or unselected when none are selected) menu item to assist in selecting of a new value.
248
+
249
+ ## Adding tootip in action menu
250
+
251
+ Tooltip in action menu can be attached via adding <sp-tooltip> and can be customized by using various parameters (e.g. placement, content, etc) as needed.
252
+
253
+ ```html
254
+ <sp-action-menu>
255
+ <sp-tooltip slot="tooltip" self-managed placement="bottom">
256
+ Content
257
+ </sp-tooltip>
258
+ <span slot="label">Available shapes</span>
259
+ <sp-menu-item value="shape-1-square">Square</sp-menu-item>
260
+ <sp-menu-item value="shape-2-triangle">Triangle</sp-menu-item>
261
+ <sp-menu-item value="shape-3-parallelogram">Parallelogram</sp-menu-item>
262
+ </sp-action-menu>
263
+ ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/action-menu",
3
- "version": "0.35.0",
3
+ "version": "0.35.1-rc.24+e3649e123",
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": "^0.35.0",
65
- "@spectrum-web-components/base": "^0.35.0",
66
- "@spectrum-web-components/icon": "^0.35.0",
67
- "@spectrum-web-components/icons-workflow": "^0.35.0",
68
- "@spectrum-web-components/picker": "^0.35.0",
69
- "@spectrum-web-components/shared": "^0.35.0"
64
+ "@spectrum-web-components/action-button": "^0.35.1-rc.24+e3649e123",
65
+ "@spectrum-web-components/base": "^0.35.1-rc.24+e3649e123",
66
+ "@spectrum-web-components/icon": "^0.35.1-rc.24+e3649e123",
67
+ "@spectrum-web-components/icons-workflow": "^0.35.1-rc.24+e3649e123",
68
+ "@spectrum-web-components/picker": "^0.35.1-rc.24+e3649e123",
69
+ "@spectrum-web-components/shared": "^0.35.1-rc.24+e3649e123"
70
70
  },
71
71
  "devDependencies": {
72
72
  "@spectrum-css/actionmenu": "^4.0.45"
@@ -78,5 +78,5 @@
78
78
  "./**/*.dev.js",
79
79
  "./sync/sp-*.js"
80
80
  ],
81
- "gitHead": "1ee5a6c92838cdf48321276d97f61c20f8476ac1"
81
+ "gitHead": "e3649e1230ed727048988a452969c38ced5467ac"
82
82
  }
@@ -12,6 +12,7 @@ declare const ActionMenu_base: typeof PickerBase & {
12
12
  * @slot - menu items to be listed in the Action Menu
13
13
  * @slot icon - The icon to use for Action Menu
14
14
  * @slot label - The label to use on for the Action Menu
15
+ * @slot tooltip - Tooltip to use on for the Action menu
15
16
  * @attr selects - By default `sp-action-menu` does not manage a selection. If
16
17
  * you'd like for a selection to be held by the `sp-menu` that it presents in
17
18
  * its overlay, use `selects="single" to activate this functionality.
@@ -40,6 +40,7 @@ export class ActionMenu extends ObserveSlotText(PickerBase, "label") {
40
40
  <sp-icon-more class="icon"></sp-icon-more>
41
41
  </slot>
42
42
  <slot name="label" ?hidden=${!this.hasLabel}></slot>
43
+ <slot name="tooltip"></slot>
43
44
  `
44
45
  ];
45
46
  }
@@ -55,13 +56,18 @@ export class ActionMenu extends ObserveSlotText(PickerBase, "label") {
55
56
  id="button"
56
57
  class="button"
57
58
  size=${this.size}
58
- @blur=${this.onButtonBlur}
59
- @click=${this.onButtonClick}
60
- @focus=${this.onButtonFocus}
59
+ @blur=${this.handleButtonBlur}
60
+ @click=${this.handleButtonClick}
61
+ @keydown=${{
62
+ handleEvent: this.handleEnterKeydown,
63
+ capture: true
64
+ }}
65
+ @pointerdown=${this.handlePointerdown}
61
66
  ?disabled=${this.disabled}
62
67
  >
63
68
  ${this.buttonContent}
64
69
  </sp-action-button>
70
+ ${this.renderOverlay}
65
71
  `;
66
72
  }
67
73
  update(changedProperties) {
@@ -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 { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { PickerBase } from '@spectrum-web-components/picker';\nimport '@spectrum-web-components/action-button/sp-action-button.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';\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 Action Menu\n * @slot label - The label to use on for the Action Menu\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 ObserveSlotText(PickerBase, 'label') {\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 protected override listRole: 'listbox' | 'menu' = 'menu';\n protected override itemRole = 'menuitem';\n private get hasLabel(): boolean {\n return this.slotHasContent;\n }\n\n protected override get buttonContent(): TemplateResult[] {\n return [\n html`\n <slot name=\"icon\" slot=\"icon\" ?icon-only=${!this.hasLabel}>\n <sp-icon-more class=\"icon\"></sp-icon-more>\n </slot>\n <slot name=\"label\" ?hidden=${!this.hasLabel}></slot>\n `,\n ];\n }\n\n protected override render(): TemplateResult {\n return html`\n <sp-action-button\n ?quiet=${this.quiet}\n ?selected=${this.open}\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.onButtonBlur}\n @click=${this.onButtonClick}\n @focus=${this.onButtonFocus}\n ?disabled=${this.disabled}\n >\n ${this.buttonContent}\n </sp-action-button>\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,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,OAAO;AACP,SAAS,uBAAuB;AAChC,OAAO;AACP,OAAO,sBAAsB;AAYtB,aAAM,mBAAmB,gBAAgB,YAAY,OAAO,EAAE;AAAA,EAA9D;AAAA;AAMH,SAAgB,UAAgC;AAEhD,SAAmB,WAA+B;AAClD,SAAmB,WAAW;AAAA;AAAA,EAR9B,WAA2B,SAAyB;AAChD,WAAO,CAAC,gBAAgB;AAAA,EAC5B;AAAA,EAOA,IAAY,WAAoB;AAC5B,WAAO,KAAK;AAAA,EAChB;AAAA,EAEA,IAAuB,gBAAkC;AACrD,WAAO;AAAA,MACH;AAAA,2DAC+C,CAAC,KAAK;AAAA;AAAA;AAAA,6CAGpB,CAAC,KAAK;AAAA;AAAA,IAE3C;AAAA,EACJ;AAAA,EAEmB,SAAyB;AACxC,WAAO;AAAA;AAAA,yBAEU,KAAK;AAAA,4BACF,KAAK;AAAA;AAAA,gCAED,UAAU,KAAK,OAAO,SAAS,MAAS;AAAA,gCACxC,KAAK,OAAO,SAAS;AAAA,6BACxB,UAAU,KAAK,SAAS,MAAS;AAAA;AAAA;AAAA,uBAGvC,KAAK;AAAA,wBACJ,KAAK;AAAA,yBACJ,KAAK;AAAA,yBACL,KAAK;AAAA,4BACF,KAAK;AAAA;AAAA,kBAEf,KAAK;AAAA;AAAA;AAAA,EAGnB;AAAA,EAEmB,OAAO,mBAA+C;AACrE,QAAI,kBAAkB,IAAI,SAAS,GAAG;AAClC,WAAK,UAAU;AAAA,IACnB;AACA,UAAM,OAAO,iBAAiB;AAAA,EAClC;AACJ;AA/CoB;AAAA,EADf,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GALjB,WAMO;",
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 { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { PickerBase } from '@spectrum-web-components/picker';\nimport '@spectrum-web-components/action-button/sp-action-button.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';\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 Action Menu\n * @slot label - The label to use on for the Action Menu\n * @slot tooltip - Tooltip to use on for the Action menu\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 ObserveSlotText(PickerBase, 'label') {\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 protected override listRole: 'listbox' | 'menu' = 'menu';\n protected override itemRole = 'menuitem';\n private get hasLabel(): boolean {\n return this.slotHasContent;\n }\n\n protected override get buttonContent(): TemplateResult[] {\n return [\n html`\n <slot name=\"icon\" slot=\"icon\" ?icon-only=${!this.hasLabel}>\n <sp-icon-more class=\"icon\"></sp-icon-more>\n </slot>\n <slot name=\"label\" ?hidden=${!this.hasLabel}></slot>\n <slot name=\"tooltip\"></slot>\n `,\n ];\n }\n\n protected override render(): TemplateResult {\n return html`\n <sp-action-button\n ?quiet=${this.quiet}\n ?selected=${this.open}\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 @click=${this.handleButtonClick}\n @keydown=${{\n handleEvent: this.handleEnterKeydown,\n capture: true,\n }}\n @pointerdown=${this.handlePointerdown}\n ?disabled=${this.disabled}\n >\n ${this.buttonContent}\n </sp-action-button>\n ${this.renderOverlay}\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,iBAAiB;AAC1B,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,OAAO;AACP,SAAS,uBAAuB;AAChC,OAAO;AACP,OAAO,sBAAsB;AAatB,aAAM,mBAAmB,gBAAgB,YAAY,OAAO,EAAE;AAAA,EAA9D;AAAA;AAMH,SAAgB,UAAgC;AAEhD,SAAmB,WAA+B;AAClD,SAAmB,WAAW;AAAA;AAAA,EAR9B,WAA2B,SAAyB;AAChD,WAAO,CAAC,gBAAgB;AAAA,EAC5B;AAAA,EAOA,IAAY,WAAoB;AAC5B,WAAO,KAAK;AAAA,EAChB;AAAA,EAEA,IAAuB,gBAAkC;AACrD,WAAO;AAAA,MACH;AAAA,2DAC+C,CAAC,KAAK;AAAA;AAAA;AAAA,6CAGpB,CAAC,KAAK;AAAA;AAAA;AAAA,IAG3C;AAAA,EACJ;AAAA,EAEmB,SAAyB;AACxC,WAAO;AAAA;AAAA,yBAEU,KAAK;AAAA,4BACF,KAAK;AAAA;AAAA,gCAED,UAAU,KAAK,OAAO,SAAS,MAAS;AAAA,gCACxC,KAAK,OAAO,SAAS;AAAA,6BACxB,UAAU,KAAK,SAAS,MAAS;AAAA;AAAA;AAAA,uBAGvC,KAAK;AAAA,wBACJ,KAAK;AAAA,yBACJ,KAAK;AAAA,2BACH;AAAA,MACP,aAAa,KAAK;AAAA,MAClB,SAAS;AAAA,IACb;AAAA,+BACe,KAAK;AAAA,4BACR,KAAK;AAAA;AAAA,kBAEf,KAAK;AAAA;AAAA,cAET,KAAK;AAAA;AAAA,EAEf;AAAA,EAEmB,OAAO,mBAA+C;AACrE,QAAI,kBAAkB,IAAI,SAAS,GAAG;AAClC,WAAK,UAAU;AAAA,IACnB;AACA,UAAM,OAAO,iBAAiB;AAAA,EAClC;AACJ;AArDoB;AAAA,EADf,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GALjB,WAMO;",
6
6
  "names": []
7
7
  }
package/src/ActionMenu.js CHANGED
@@ -1,25 +1,28 @@
1
- "use strict";var p=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var l=(r,o,t,i)=>{for(var e=i>1?void 0:i?d(o,t):o,s=r.length-1,n;s>=0;s--)(n=r[s])&&(e=(i?n(o,t,e):n(e))||e);return i&&e&&p(o,t,e),e};import{html as a}from"@spectrum-web-components/base";import{ifDefined as u}from"@spectrum-web-components/base/src/directives.js";import{property as c}from"@spectrum-web-components/base/src/decorators.js";import{PickerBase as m}from"@spectrum-web-components/picker";import"@spectrum-web-components/action-button/sp-action-button.js";import{ObserveSlotText as h}from"@spectrum-web-components/shared/src/observe-slot-text.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-more.js";import b from"./action-menu.css.js";export class ActionMenu extends h(m,"label"){constructor(){super(...arguments);this.selects=void 0;this.listRole="menu";this.itemRole="menuitem"}static get styles(){return[b]}get hasLabel(){return this.slotHasContent}get buttonContent(){return[a`
1
+ "use strict";var u=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var l=(r,i,t,o)=>{for(var e=o>1?void 0:o?p(i,t):i,n=r.length-1,s;n>=0;n--)(s=r[n])&&(e=(o?s(i,t,e):s(e))||e);return o&&e&&u(i,t,e),e};import{html as a}from"@spectrum-web-components/base";import{ifDefined as d}from"@spectrum-web-components/base/src/directives.js";import{property as h}from"@spectrum-web-components/base/src/decorators.js";import{PickerBase as m}from"@spectrum-web-components/picker";import"@spectrum-web-components/action-button/sp-action-button.js";import{ObserveSlotText as c}from"@spectrum-web-components/shared/src/observe-slot-text.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-more.js";import b from"./action-menu.css.js";export class ActionMenu extends c(m,"label"){constructor(){super(...arguments);this.selects=void 0;this.listRole="menu";this.itemRole="menuitem"}static get styles(){return[b]}get hasLabel(){return this.slotHasContent}get buttonContent(){return[a`
2
2
  <slot name="icon" slot="icon" ?icon-only=${!this.hasLabel}>
3
3
  <sp-icon-more class="icon"></sp-icon-more>
4
4
  </slot>
5
5
  <slot name="label" ?hidden=${!this.hasLabel}></slot>
6
+ <slot name="tooltip"></slot>
6
7
  `]}render(){return a`
7
8
  <sp-action-button
8
9
  ?quiet=${this.quiet}
9
10
  ?selected=${this.open}
10
11
  aria-haspopup="true"
11
- aria-controls=${u(this.open?"menu":void 0)}
12
+ aria-controls=${d(this.open?"menu":void 0)}
12
13
  aria-expanded=${this.open?"true":"false"}
13
- aria-label=${u(this.label||void 0)}
14
+ aria-label=${d(this.label||void 0)}
14
15
  id="button"
15
16
  class="button"
16
17
  size=${this.size}
17
- @blur=${this.onButtonBlur}
18
- @click=${this.onButtonClick}
19
- @focus=${this.onButtonFocus}
18
+ @blur=${this.handleButtonBlur}
19
+ @click=${this.handleButtonClick}
20
+ @keydown=${{handleEvent:this.handleEnterKeydown,capture:!0}}
21
+ @pointerdown=${this.handlePointerdown}
20
22
  ?disabled=${this.disabled}
21
23
  >
22
24
  ${this.buttonContent}
23
25
  </sp-action-button>
24
- `}update(t){t.has("invalid")&&(this.invalid=!1),super.update(t)}}l([c({type:String})],ActionMenu.prototype,"selects",2);
26
+ ${this.renderOverlay}
27
+ `}update(t){t.has("invalid")&&(this.invalid=!1),super.update(t)}}l([h({type:String})],ActionMenu.prototype,"selects",2);
25
28
  //# sourceMappingURL=ActionMenu.js.map
@@ -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 { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { PickerBase } from '@spectrum-web-components/picker';\nimport '@spectrum-web-components/action-button/sp-action-button.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';\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 Action Menu\n * @slot label - The label to use on for the Action Menu\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 ObserveSlotText(PickerBase, 'label') {\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 protected override listRole: 'listbox' | 'menu' = 'menu';\n protected override itemRole = 'menuitem';\n private get hasLabel(): boolean {\n return this.slotHasContent;\n }\n\n protected override get buttonContent(): TemplateResult[] {\n return [\n html`\n <slot name=\"icon\" slot=\"icon\" ?icon-only=${!this.hasLabel}>\n <sp-icon-more class=\"icon\"></sp-icon-more>\n </slot>\n <slot name=\"label\" ?hidden=${!this.hasLabel}></slot>\n `,\n ];\n }\n\n protected override render(): TemplateResult {\n return html`\n <sp-action-button\n ?quiet=${this.quiet}\n ?selected=${this.open}\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.onButtonBlur}\n @click=${this.onButtonClick}\n @focus=${this.onButtonFocus}\n ?disabled=${this.disabled}\n >\n ${this.buttonContent}\n </sp-action-button>\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,aAAAC,MAAiB,kDAC1B,OAAS,YAAAC,MAAgB,kDACzB,OAAS,cAAAC,MAAkB,kCAC3B,MAAO,6DACP,OAAS,mBAAAC,MAAuB,2DAChC,MAAO,gEACP,OAAOC,MAAsB,uBAYtB,aAAM,mBAAmBD,EAAgBD,EAAY,OAAO,CAAE,CAA9D,kCAMH,KAAgB,QAAgC,OAEhD,KAAmB,SAA+B,OAClD,KAAmB,SAAW,WAR9B,WAA2B,QAAyB,CAChD,MAAO,CAACE,CAAgB,CAC5B,CAOA,IAAY,UAAoB,CAC5B,OAAO,KAAK,cAChB,CAEA,IAAuB,eAAkC,CACrD,MAAO,CACHL;AAAA,2DAC+C,CAAC,KAAK;AAAA;AAAA;AAAA,6CAGpB,CAAC,KAAK;AAAA,aAE3C,CACJ,CAEmB,QAAyB,CACxC,OAAOA;AAAA;AAAA,yBAEU,KAAK;AAAA,4BACF,KAAK;AAAA;AAAA,gCAEDC,EAAU,KAAK,KAAO,OAAS,MAAS;AAAA,gCACxC,KAAK,KAAO,OAAS;AAAA,6BACxBA,EAAU,KAAK,OAAS,MAAS;AAAA;AAAA;AAAA,uBAGvC,KAAK;AAAA,wBACJ,KAAK;AAAA,yBACJ,KAAK;AAAA,yBACL,KAAK;AAAA,4BACF,KAAK;AAAA;AAAA,kBAEf,KAAK;AAAA;AAAA,SAGnB,CAEmB,OAAOK,EAA+C,CACjEA,EAAkB,IAAI,SAAS,IAC/B,KAAK,QAAU,IAEnB,MAAM,OAAOA,CAAiB,CAClC,CACJ,CA/CoBC,EAAA,CADfL,EAAS,CAAE,KAAM,MAAO,CAAC,GALjB,WAMO",
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 { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { PickerBase } from '@spectrum-web-components/picker';\nimport '@spectrum-web-components/action-button/sp-action-button.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';\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 Action Menu\n * @slot label - The label to use on for the Action Menu\n * @slot tooltip - Tooltip to use on for the Action menu\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 ObserveSlotText(PickerBase, 'label') {\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 protected override listRole: 'listbox' | 'menu' = 'menu';\n protected override itemRole = 'menuitem';\n private get hasLabel(): boolean {\n return this.slotHasContent;\n }\n\n protected override get buttonContent(): TemplateResult[] {\n return [\n html`\n <slot name=\"icon\" slot=\"icon\" ?icon-only=${!this.hasLabel}>\n <sp-icon-more class=\"icon\"></sp-icon-more>\n </slot>\n <slot name=\"label\" ?hidden=${!this.hasLabel}></slot>\n <slot name=\"tooltip\"></slot>\n `,\n ];\n }\n\n protected override render(): TemplateResult {\n return html`\n <sp-action-button\n ?quiet=${this.quiet}\n ?selected=${this.open}\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 @click=${this.handleButtonClick}\n @keydown=${{\n handleEvent: this.handleEnterKeydown,\n capture: true,\n }}\n @pointerdown=${this.handlePointerdown}\n ?disabled=${this.disabled}\n >\n ${this.buttonContent}\n </sp-action-button>\n ${this.renderOverlay}\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,aAAAC,MAAiB,kDAC1B,OAAS,YAAAC,MAAgB,kDACzB,OAAS,cAAAC,MAAkB,kCAC3B,MAAO,6DACP,OAAS,mBAAAC,MAAuB,2DAChC,MAAO,gEACP,OAAOC,MAAsB,uBAatB,aAAM,mBAAmBD,EAAgBD,EAAY,OAAO,CAAE,CAA9D,kCAMH,KAAgB,QAAgC,OAEhD,KAAmB,SAA+B,OAClD,KAAmB,SAAW,WAR9B,WAA2B,QAAyB,CAChD,MAAO,CAACE,CAAgB,CAC5B,CAOA,IAAY,UAAoB,CAC5B,OAAO,KAAK,cAChB,CAEA,IAAuB,eAAkC,CACrD,MAAO,CACHL;AAAA,2DAC+C,CAAC,KAAK;AAAA;AAAA;AAAA,6CAGpB,CAAC,KAAK;AAAA;AAAA,aAG3C,CACJ,CAEmB,QAAyB,CACxC,OAAOA;AAAA;AAAA,yBAEU,KAAK;AAAA,4BACF,KAAK;AAAA;AAAA,gCAEDC,EAAU,KAAK,KAAO,OAAS,MAAS;AAAA,gCACxC,KAAK,KAAO,OAAS;AAAA,6BACxBA,EAAU,KAAK,OAAS,MAAS;AAAA;AAAA;AAAA,uBAGvC,KAAK;AAAA,wBACJ,KAAK;AAAA,yBACJ,KAAK;AAAA,2BACH,CACP,YAAa,KAAK,mBAClB,QAAS,EACb;AAAA,+BACe,KAAK;AAAA,4BACR,KAAK;AAAA;AAAA,kBAEf,KAAK;AAAA;AAAA,cAET,KAAK;AAAA,SAEf,CAEmB,OAAOK,EAA+C,CACjEA,EAAkB,IAAI,SAAS,IAC/B,KAAK,QAAU,IAEnB,MAAM,OAAOA,CAAiB,CAClC,CACJ,CArDoBC,EAAA,CADfL,EAAS,CAAE,KAAM,MAAO,CAAC,GALjB,WAMO",
6
6
  "names": ["html", "ifDefined", "property", "PickerBase", "ObserveSlotText", "actionMenuStyles", "changedProperties", "__decorateClass"]
7
7
  }
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
  import { css } from "@spectrum-web-components/base";
3
3
  const styles = css`
4
- :host{display:inline-flex}:host([quiet]){min-width:0}::slotted([slot=icon]){flex-shrink:0}.icon{flex-shrink:0}#popover{display:none;max-width:none;width:auto}:host([dir=ltr]) .icon,:host([dir=ltr]) ::slotted([slot=icon]){margin-left:calc((var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted))*-1)}:host([dir=rtl]) .icon,:host([dir=rtl]) ::slotted([slot=icon]){margin-right:calc((var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted))*-1)}:host([dir]) slot[icon-only] .icon,:host([dir]) slot[icon-only]::slotted([slot=icon]){margin-inline-end:calc((var(
4
+ :host{display:inline-flex}:host([quiet]){min-width:0}::slotted([slot=icon]){flex-shrink:0}.icon{flex-shrink:0}#popover{max-width:none;width:auto}:host([dir=ltr]) .icon,:host([dir=ltr]) ::slotted([slot=icon]){margin-left:calc((var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted))*-1)}:host([dir=rtl]) .icon,:host([dir=rtl]) ::slotted([slot=icon]){margin-right:calc((var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted))*-1)}:host([dir]) slot[icon-only] .icon,:host([dir]) slot[icon-only]::slotted([slot=icon]){margin-inline-end:calc((var(
5
5
  --custom-actionbutton-edge-to-text,
6
6
  var(--spectrum-actionbutton-edge-to-text)
7
7
  ) - var(
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["action-menu.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{display:inline-flex}:host([quiet]){min-width:0}::slotted([slot=icon]){flex-shrink:0}.icon{flex-shrink:0}#popover{display:none;max-width:none;width:auto}:host([dir=ltr]) .icon,:host([dir=ltr]) ::slotted([slot=icon]){margin-left:calc((var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted))*-1)}:host([dir=rtl]) .icon,:host([dir=rtl]) ::slotted([slot=icon]){margin-right:calc((var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted))*-1)}:host([dir]) slot[icon-only] .icon,:host([dir]) slot[icon-only]::slotted([slot=icon]){margin-inline-end:calc((var(\n--custom-actionbutton-edge-to-text,\nvar(--spectrum-actionbutton-edge-to-text)\n) - var(\n--custom-actionbutton-edge-to-visual-only,\nvar(--spectrum-actionbutton-edge-to-visual-only)\n))*-1);margin-inline-start:calc((var(\n--custom-actionbutton-edge-to-text,\nvar(--spectrum-actionbutton-edge-to-text)\n) - var(\n--custom-actionbutton-edge-to-visual-only,\nvar(--spectrum-actionbutton-edge-to-visual-only)\n))*-1)}\n`;\nexport default styles;"],
4
+ "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{display:inline-flex}:host([quiet]){min-width:0}::slotted([slot=icon]){flex-shrink:0}.icon{flex-shrink:0}#popover{max-width:none;width:auto}:host([dir=ltr]) .icon,:host([dir=ltr]) ::slotted([slot=icon]){margin-left:calc((var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted))*-1)}:host([dir=rtl]) .icon,:host([dir=rtl]) ::slotted([slot=icon]){margin-right:calc((var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted))*-1)}:host([dir]) slot[icon-only] .icon,:host([dir]) slot[icon-only]::slotted([slot=icon]){margin-inline-end:calc((var(\n--custom-actionbutton-edge-to-text,\nvar(--spectrum-actionbutton-edge-to-text)\n) - var(\n--custom-actionbutton-edge-to-visual-only,\nvar(--spectrum-actionbutton-edge-to-visual-only)\n))*-1);margin-inline-start:calc((var(\n--custom-actionbutton-edge-to-text,\nvar(--spectrum-actionbutton-edge-to-text)\n) - var(\n--custom-actionbutton-edge-to-visual-only,\nvar(--spectrum-actionbutton-edge-to-visual-only)\n))*-1)}\n`;\nexport default styles;"],
5
5
  "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAef,eAAe;",
6
6
  "names": []
7
7
  }
@@ -1,5 +1,5 @@
1
1
  "use strict";import{css as t}from"@spectrum-web-components/base";const o=t`
2
- :host{display:inline-flex}:host([quiet]){min-width:0}::slotted([slot=icon]){flex-shrink:0}.icon{flex-shrink:0}#popover{display:none;max-width:none;width:auto}:host([dir=ltr]) .icon,:host([dir=ltr]) ::slotted([slot=icon]){margin-left:calc((var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted))*-1)}:host([dir=rtl]) .icon,:host([dir=rtl]) ::slotted([slot=icon]){margin-right:calc((var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted))*-1)}:host([dir]) slot[icon-only] .icon,:host([dir]) slot[icon-only]::slotted([slot=icon]){margin-inline-end:calc((var(
2
+ :host{display:inline-flex}:host([quiet]){min-width:0}::slotted([slot=icon]){flex-shrink:0}.icon{flex-shrink:0}#popover{max-width:none;width:auto}:host([dir=ltr]) .icon,:host([dir=ltr]) ::slotted([slot=icon]){margin-left:calc((var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted))*-1)}:host([dir=rtl]) .icon,:host([dir=rtl]) ::slotted([slot=icon]){margin-right:calc((var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted))*-1)}:host([dir]) slot[icon-only] .icon,:host([dir]) slot[icon-only]::slotted([slot=icon]){margin-inline-end:calc((var(
3
3
  --custom-actionbutton-edge-to-text,
4
4
  var(--spectrum-actionbutton-edge-to-text)
5
5
  ) - var(
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["action-menu.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{display:inline-flex}:host([quiet]){min-width:0}::slotted([slot=icon]){flex-shrink:0}.icon{flex-shrink:0}#popover{display:none;max-width:none;width:auto}:host([dir=ltr]) .icon,:host([dir=ltr]) ::slotted([slot=icon]){margin-left:calc((var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted))*-1)}:host([dir=rtl]) .icon,:host([dir=rtl]) ::slotted([slot=icon]){margin-right:calc((var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted))*-1)}:host([dir]) slot[icon-only] .icon,:host([dir]) slot[icon-only]::slotted([slot=icon]){margin-inline-end:calc((var(\n--custom-actionbutton-edge-to-text,\nvar(--spectrum-actionbutton-edge-to-text)\n) - var(\n--custom-actionbutton-edge-to-visual-only,\nvar(--spectrum-actionbutton-edge-to-visual-only)\n))*-1);margin-inline-start:calc((var(\n--custom-actionbutton-edge-to-text,\nvar(--spectrum-actionbutton-edge-to-text)\n) - var(\n--custom-actionbutton-edge-to-visual-only,\nvar(--spectrum-actionbutton-edge-to-visual-only)\n))*-1)}\n`;\nexport default styles;"],
4
+ "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{display:inline-flex}:host([quiet]){min-width:0}::slotted([slot=icon]){flex-shrink:0}.icon{flex-shrink:0}#popover{max-width:none;width:auto}:host([dir=ltr]) .icon,:host([dir=ltr]) ::slotted([slot=icon]){margin-left:calc((var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted))*-1)}:host([dir=rtl]) .icon,:host([dir=rtl]) ::slotted([slot=icon]){margin-right:calc((var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted))*-1)}:host([dir]) slot[icon-only] .icon,:host([dir]) slot[icon-only]::slotted([slot=icon]){margin-inline-end:calc((var(\n--custom-actionbutton-edge-to-text,\nvar(--spectrum-actionbutton-edge-to-text)\n) - var(\n--custom-actionbutton-edge-to-visual-only,\nvar(--spectrum-actionbutton-edge-to-visual-only)\n))*-1);margin-inline-start:calc((var(\n--custom-actionbutton-edge-to-text,\nvar(--spectrum-actionbutton-edge-to-text)\n) - var(\n--custom-actionbutton-edge-to-visual-only,\nvar(--spectrum-actionbutton-edge-to-visual-only)\n))*-1)}\n`;\nexport default styles;"],
5
5
  "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAef,eAAeC",
6
6
  "names": ["css", "styles"]
7
7
  }
@@ -1,5 +1,6 @@
1
1
  "use strict";
2
2
  import { html } from "@spectrum-web-components/base";
3
+ import "@spectrum-web-components/action-menu/sp-action-menu.js";
3
4
  import "@spectrum-web-components/menu/sp-menu.js";
4
5
  import "@spectrum-web-components/menu/sp-menu-item.js";
5
6
  import "@spectrum-web-components/menu/sp-menu-group.js";
@@ -42,6 +43,47 @@ export default {
42
43
  },
43
44
  control: "text"
44
45
  },
46
+ tooltipDescription: {
47
+ name: "Tooltip Description",
48
+ type: { name: "string", required: false },
49
+ description: "Tooltip description",
50
+ table: {
51
+ type: { summary: "string" },
52
+ defaultValue: { summary: "" }
53
+ },
54
+ control: {
55
+ type: "text"
56
+ }
57
+ },
58
+ tooltipPlacement: {
59
+ name: "Tooltip Placement",
60
+ type: { name: "string", required: false },
61
+ description: "Tooltip Placement.",
62
+ table: {
63
+ defaultValue: { summary: "bottom" }
64
+ },
65
+ control: {
66
+ options: [
67
+ "auto",
68
+ "auto-start",
69
+ "auto-end",
70
+ "top",
71
+ "bottom",
72
+ "right",
73
+ "left",
74
+ "top-start",
75
+ "top-end",
76
+ "bottom-start",
77
+ "bottom-end",
78
+ "right-start",
79
+ "right-end",
80
+ "left-start",
81
+ "left-end",
82
+ "none"
83
+ ],
84
+ type: "select"
85
+ }
86
+ },
45
87
  quiet: {
46
88
  name: "quiet",
47
89
  type: { name: "boolean", required: false },
@@ -59,7 +101,9 @@ export default {
59
101
  visibleLabel: "More Actions",
60
102
  disabled: false,
61
103
  open: false,
62
- quiet: false
104
+ quiet: false,
105
+ tooltipDescription: "",
106
+ tooltipPlacement: "bottom"
63
107
  }
64
108
  };
65
109
  const Template = (args = {}) => ActionMenuMarkup(args);
@@ -80,6 +124,12 @@ export const iconOnly = (args = {}) => Template(args);
80
124
  iconOnly.args = {
81
125
  visibleLabel: ""
82
126
  };
127
+ export const tooltipDescriptionAndPlacement = (args = {}) => Template(args);
128
+ tooltipDescriptionAndPlacement.args = {
129
+ tooltipDescription: "Your tooltip string here",
130
+ visibleLabel: "",
131
+ tooltipPlacement: "bottom"
132
+ };
83
133
  export const customIcon = (args) => Template(args);
84
134
  customIcon.args = {
85
135
  customIcon: html`
@@ -140,7 +190,11 @@ export const controlled = () => {
140
190
  </sp-menu-item>
141
191
  <sp-menu-item>
142
192
  Show
143
- <sp-menu slot="submenu">
193
+ <sp-menu
194
+ slot="submenu"
195
+ selects="multiple"
196
+ @change=${(event) => event.preventDefault()}
197
+ >
144
198
  <sp-menu-item
145
199
  value="grid"
146
200
  ?selected=${state.grid}
@@ -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';\n\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport { ActionMenuMarkup } from './';\n\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js';\nimport type { MenuItem } from '@spectrum-web-components/menu/src/MenuItem.js';\n\nexport default {\n component: 'sp-action-menu',\n title: 'Action menu',\n argTypes: {\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 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 },\n args: {\n visibleLabel: 'More Actions',\n disabled: false,\n open: false,\n quiet: false,\n },\n};\n\ninterface StoryArgs {\n visibleLabel?: string;\n disabled?: boolean;\n open?: boolean;\n customIcon?: string | TemplateResult;\n selects?: 'single';\n selected?: boolean;\n quiet?: boolean;\n}\n\nconst Template = (args: StoryArgs = {}): TemplateResult =>\n ActionMenuMarkup(args);\n\nexport const Default = (args: StoryArgs = {}): TemplateResult => Template(args);\n\nexport const quiet = (args: StoryArgs = {}): TemplateResult => Template(args);\nquiet.args = {\n quiet: true,\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};\n\nexport const iconOnly = (args: StoryArgs = {}): TemplateResult =>\n Template(args);\niconOnly.args = {\n visibleLabel: '',\n};\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 = (): TemplateResult => {\n return html`\n <sp-action-menu label=\"More Actions\">\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 = (): 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(\n 'state-json'\n )!.textContent = `application state: ${JSON.stringify(state)}`;\n }\n return html`\n <sp-action-menu label=\"View\" @change=${onChange}>\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 slot=\"submenu\">\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 = (): TemplateResult => html`\n <sp-action-menu open>\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"],
5
- "mappings": ";AAWA,SAAS,YAA4B;AAErC,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,wBAAwB;AAEjC,OAAO;AAGP,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,UAAU;AAAA,IACN,UAAU;AAAA,MACN,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,WAAW,UAAU,MAAM;AAAA,MACzC,aACI;AAAA,MACJ,OAAO;AAAA,QACH,MAAM,EAAE,SAAS,UAAU;AAAA,QAC3B,cAAc,EAAE,SAAS,MAAM;AAAA,MACnC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,MACV;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,MACF,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,WAAW,UAAU,MAAM;AAAA,MACzC,aAAa;AAAA,MACb,OAAO;AAAA,QACH,MAAM,EAAE,SAAS,UAAU;AAAA,QAC3B,cAAc,EAAE,SAAS,MAAM;AAAA,MACnC;AAAA,MACA,SAAS;AAAA,IACb;AAAA,IACA,cAAc;AAAA,MACV,MAAM;AAAA,MACN,aAAa;AAAA,MACb,MAAM,EAAE,MAAM,UAAU,UAAU,MAAM;AAAA,MACxC,OAAO;AAAA,QACH,MAAM,EAAE,SAAS,SAAS;AAAA,QAC1B,cAAc,EAAE,SAAS,GAAG;AAAA,MAChC;AAAA,MACA,SAAS;AAAA,IACb;AAAA,IACA,OAAO;AAAA,MACH,MAAM;AAAA,MACN,MAAM,EAAE,MAAM,WAAW,UAAU,MAAM;AAAA,MACzC,aAAa;AAAA,MACb,OAAO;AAAA,QACH,MAAM,EAAE,SAAS,UAAU;AAAA,QAC3B,cAAc,EAAE,SAAS,MAAM;AAAA,MACnC;AAAA,MACA,SAAS;AAAA,QACL,MAAM;AAAA,MACV;AAAA,IACJ;AAAA,EACJ;AAAA,EACA,MAAM;AAAA,IACF,cAAc;AAAA,IACd,UAAU;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,EACX;AACJ;AAYA,MAAM,WAAW,CAAC,OAAkB,CAAC,MACjC,iBAAiB,IAAI;AAElB,aAAM,UAAU,CAAC,OAAkB,CAAC,MAAsB,SAAS,IAAI;AAEvE,aAAM,QAAQ,CAAC,OAAkB,CAAC,MAAsB,SAAS,IAAI;AAC5E,MAAM,OAAO;AAAA,EACT,OAAO;AACX;AAEO,aAAM,UAAU,CAAC,OAAkB,CAAC,MACvC,SAAS;AAAA,EACL,GAAG;AAAA,EACH,SAAS;AAAA,EACT,UAAU;AACd,CAAC;AACL,QAAQ,OAAO;AAAA,EACX,MAAM;AACV;AAEO,aAAM,WAAW,CAAC,OAAkB,CAAC,MACxC,SAAS,IAAI;AACjB,SAAS,OAAO;AAAA,EACZ,cAAc;AAClB;AAEO,aAAM,aAAa,CAAC,SAAoC,SAAS,IAAI;AAC5E,WAAW,OAAO;AAAA,EACd,YAAY;AAAA;AAAA;AAAA,EAGZ,cAAc;AAClB;AAEO,aAAM,UAAU,MAAsB;AACzC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcX;AAEO,aAAM,aAAa,MAAsB;AAC5C,QAAM,QAAQ;AAAA,IACV,MAAM;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,cAAc;AAAA,EAClB;AACA,WAAS,OAAO,MAAkC;AAC9C,WAAO,CAAC,UAAuB;AAC3B,YAAM,OAAO,MAAM;AACnB,YAAM,IAAI,IAAI,CAAC,MAAM,IAAI;AAGzB,WAAK,WAAW,MAAM,IAAI;AAAA,IAC9B;AAAA,EACJ;AACA,WAAS,SAAS,OAAoB;AAClC,UAAM,eAAgB,MAAM,OAAoB;AAChD,aAAS;AAAA,EACb;AACA,WAAS,WAAiB;AAEtB,aAAS;AAAA,MACL;AAAA,IACJ,EAAG,cAAc,sBAAsB,KAAK,UAAU,KAAK;AAAA,EAC/D;AACA,SAAO;AAAA,+CACoC;AAAA,kDACG,MAAM,MAAM,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,4BAK1C,MAAM;AAAA,yBACT,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oCASF,MAAM;AAAA,iCACT,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oCAMV,MAAM;AAAA,iCACT,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAShD;AAEO,aAAM,SAAS,MAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport { ActionMenuMarkup } from './';\n\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-settings.js';\nimport type { MenuItem } from '@spectrum-web-components/menu/src/MenuItem.js';\n\nexport default {\n component: 'sp-action-menu',\n title: 'Action menu',\n argTypes: {\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 },\n args: {\n visibleLabel: 'More Actions',\n disabled: false,\n open: false,\n quiet: false,\n tooltipDescription: '',\n tooltipPlacement: 'bottom',\n },\n};\n\ninterface StoryArgs {\n visibleLabel?: string;\n disabled?: boolean;\n open?: boolean;\n customIcon?: string | TemplateResult;\n selects?: 'single';\n selected?: boolean;\n quiet?: boolean;\n tooltipDescription?: string | 'none';\n tooltipPlacement?: string | 'none';\n}\n\nconst Template = (args: StoryArgs = {}): TemplateResult =>\n ActionMenuMarkup(args);\n\nexport const Default = (args: StoryArgs = {}): TemplateResult => Template(args);\n\nexport const quiet = (args: StoryArgs = {}): TemplateResult => Template(args);\nquiet.args = {\n quiet: true,\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};\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};\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 = (): TemplateResult => {\n return html`\n <sp-action-menu label=\"More Actions\">\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 = (): 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(\n 'state-json'\n )!.textContent = `application state: ${JSON.stringify(state)}`;\n }\n return html`\n <sp-action-menu label=\"View\" @change=${onChange}>\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 = (): TemplateResult => html`\n <sp-action-menu open>\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"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/stories/index.js CHANGED
@@ -4,6 +4,7 @@ import "@spectrum-web-components/action-menu/sp-action-menu.js";
4
4
  import "@spectrum-web-components/icon/sp-icon.js";
5
5
  import "@spectrum-web-components/menu/sp-menu-divider.js";
6
6
  import "@spectrum-web-components/menu/sp-menu-item.js";
7
+ import "@spectrum-web-components/tooltip/sp-tooltip.js";
7
8
  export const ActionMenuMarkup = ({
8
9
  ariaLabel = "More Actions",
9
10
  changeHandler = () => void 0,
@@ -14,7 +15,9 @@ export const ActionMenuMarkup = ({
14
15
  customIcon = "",
15
16
  size = "m",
16
17
  selects = "",
17
- selected = false
18
+ selected = false,
19
+ tooltipDescription = "",
20
+ tooltipPlacement = "bottom"
18
21
  } = {}) => {
19
22
  return html`
20
23
  <sp-action-menu
@@ -38,6 +41,15 @@ export const ActionMenuMarkup = ({
38
41
  <sp-menu-divider></sp-menu-divider>
39
42
  <sp-menu-item>Save Selection</sp-menu-item>
40
43
  <sp-menu-item disabled>Make Work Path</sp-menu-item>
44
+ ${tooltipDescription ? html`
45
+ <sp-tooltip
46
+ slot="tooltip"
47
+ self-managed
48
+ placement=${tooltipPlacement}
49
+ >
50
+ ${tooltipDescription}
51
+ </sp-tooltip>
52
+ ` : html``}
41
53
  </sp-action-menu>
42
54
  `;
43
55
  };
@@ -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*/\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/icon/sp-icon.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\n\nexport const ActionMenuMarkup = ({\n ariaLabel = 'More Actions',\n changeHandler = (() => undefined) as (event: Event) => void,\n disabled = false,\n open = false,\n quiet = false,\n visibleLabel = '',\n customIcon = '' as string | TemplateResult,\n size = 'm' as 'm' | 's' | 'l' | 'xl' | 'xxl',\n selects = '' as 'single',\n selected = false,\n} = {}): TemplateResult => {\n return html`\n <sp-action-menu\n label=${ariaLabel}\n ?disabled=${disabled}\n ?open=${open}\n ?quiet=${quiet}\n size=${size}\n @change=\"${changeHandler}\"\n .selects=${selects ? selects : undefined}\n value=${selected ? 'Select Inverse' : ''}\n >\n ${customIcon ? customIcon : html``}\n ${visibleLabel\n ? html`\n <span slot=\"label\">${visibleLabel}</span>\n `\n : html``}\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};\n"],
5
- "mappings": ";AAWA,SAAS,YAA4B;AAErC,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAEA,aAAM,mBAAmB,CAAC;AAAA,EAC7B,YAAY;AAAA,EACZ,gBAAiB,MAAM;AAAA,EACvB,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,aAAa;AAAA,EACb,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AACf,IAAI,CAAC,MAAsB;AACvB,SAAO;AAAA;AAAA,oBAES;AAAA,wBACI;AAAA,oBACJ;AAAA,qBACC;AAAA,mBACF;AAAA,uBACI;AAAA,uBACA,UAAU,UAAU;AAAA,oBACvB,WAAW,mBAAmB;AAAA;AAAA,cAEpC,aAAa,aAAa;AAAA,cAC1B,eACI;AAAA,2CACyB;AAAA,sBAEzB;AAAA;AAAA,sCAEoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQtC;",
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/icon/sp-icon.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\n\nexport const ActionMenuMarkup = ({\n ariaLabel = 'More Actions',\n changeHandler = (() => undefined) as (event: Event) => void,\n disabled = false,\n open = false,\n quiet = false,\n visibleLabel = '',\n customIcon = '' as string | TemplateResult,\n size = 'm' as 'm' | 's' | 'l' | 'xl' | 'xxl',\n selects = '' as 'single',\n selected = false,\n tooltipDescription = '',\n tooltipPlacement = 'bottom',\n} = {}): TemplateResult => {\n return html`\n <sp-action-menu\n label=${ariaLabel}\n ?disabled=${disabled}\n ?open=${open}\n ?quiet=${quiet}\n size=${size}\n @change=\"${changeHandler}\"\n .selects=${selects ? selects : undefined}\n value=${selected ? 'Select Inverse' : ''}\n >\n ${customIcon ? customIcon : html``}\n ${visibleLabel\n ? html`\n <span slot=\"label\">${visibleLabel}</span>\n `\n : html``}\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 ${tooltipDescription\n ? html`\n <sp-tooltip\n slot=\"tooltip\"\n self-managed\n placement=${tooltipPlacement}\n >\n ${tooltipDescription}\n </sp-tooltip>\n `\n : html``}\n </sp-action-menu>\n `;\n};\n"],
5
+ "mappings": ";AAWA,SAAS,YAA4B;AAErC,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAEA,aAAM,mBAAmB,CAAC;AAAA,EAC7B,YAAY;AAAA,EACZ,gBAAiB,MAAM;AAAA,EACvB,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,aAAa;AAAA,EACb,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,qBAAqB;AAAA,EACrB,mBAAmB;AACvB,IAAI,CAAC,MAAsB;AACvB,SAAO;AAAA;AAAA,oBAES;AAAA,wBACI;AAAA,oBACJ;AAAA,qBACC;AAAA,mBACF;AAAA,uBACI;AAAA,uBACA,UAAU,UAAU;AAAA,oBACvB,WAAW,mBAAmB;AAAA;AAAA,cAEpC,aAAa,aAAa;AAAA,cAC1B,eACI;AAAA,2CACyB;AAAA,sBAEzB;AAAA;AAAA,sCAEoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAMxB,qBACI;AAAA;AAAA;AAAA;AAAA,sCAIoB;AAAA;AAAA,4BAEV;AAAA;AAAA,sBAGV;AAAA;AAAA;AAGlB;",
6
6
  "names": []
7
7
  }
package/test/index.js CHANGED
@@ -9,6 +9,17 @@ import {
9
9
  import { testForLitDevWarnings } from "../../../test/testing-helpers";
10
10
  import { spy } from "sinon";
11
11
  import { ignoreResizeObserverLoopError } from "../../../test/testing-helpers.js";
12
+ import "@spectrum-web-components/theme/sp-theme.js";
13
+ import "@spectrum-web-components/theme/src/themes.js";
14
+ import "@spectrum-web-components/dialog/sp-dialog-base.js";
15
+ async function styledFixture(story) {
16
+ const test = await fixture(html`
17
+ <sp-theme theme="spectrum" scale="medium" color="dark">
18
+ ${story}
19
+ </sp-theme>
20
+ `);
21
+ return test.children[0];
22
+ }
12
23
  ignoreResizeObserverLoopError(before, after);
13
24
  const deprecatedActionMenuFixture = async () => await fixture(
14
25
  html`
@@ -109,7 +120,11 @@ export const testActionMenu = (mode) => {
109
120
  html`
110
121
  <sp-action-menu
111
122
  label="More Actions"
112
- @change=${() => changeSpy()}
123
+ @change=${({
124
+ target: { value }
125
+ }) => {
126
+ changeSpy(value);
127
+ }}
113
128
  >
114
129
  <sp-icon-settings slot="icon"></sp-icon-settings>
115
130
  <sp-menu-item>Deselect</sp-menu-item>
@@ -130,14 +145,13 @@ export const testActionMenu = (mode) => {
130
145
  const opened = oneEvent(el, "sp-opened");
131
146
  el.click();
132
147
  await opened;
133
- await elementUpdated(el);
134
148
  expect(el.open).to.be.true;
135
149
  const closed = oneEvent(el, "sp-closed");
136
150
  menuItem2.click();
137
151
  await closed;
138
- await elementUpdated(el);
139
152
  expect(el.open).to.be.false;
140
153
  expect(changeSpy.callCount).to.equal(1);
154
+ expect(changeSpy.calledWith("Deselect")).to.be.true;
141
155
  });
142
156
  it("closes when Menu Item has [href]", async () => {
143
157
  const changeSpy = spy();
@@ -145,7 +159,9 @@ export const testActionMenu = (mode) => {
145
159
  html`
146
160
  <sp-action-menu
147
161
  label="More Actions"
148
- @change=${() => changeSpy()}
162
+ @change=${() => {
163
+ changeSpy();
164
+ }}
149
165
  >
150
166
  <sp-icon-settings slot="icon"></sp-icon-settings>
151
167
  <sp-menu-item href="#">Deselect</sp-menu-item>
@@ -168,18 +184,15 @@ export const testActionMenu = (mode) => {
168
184
  const opened = oneEvent(el, "sp-opened");
169
185
  el.click();
170
186
  await opened;
171
- await elementUpdated(el);
172
187
  expect(el.open).to.be.true;
173
188
  const closed = oneEvent(el, "sp-closed");
174
189
  menuItem2.click();
175
190
  await closed;
176
- await elementUpdated(el);
177
191
  expect(el.open).to.be.false;
178
192
  expect(changeSpy.callCount).to.equal(0);
179
193
  });
180
194
  it("can be `quiet`", async () => {
181
195
  const el = await actionMenuFixture();
182
- await elementUpdated(el);
183
196
  expect(el.quiet).to.be.false;
184
197
  el.quiet = true;
185
198
  await elementUpdated(el);
@@ -187,7 +200,6 @@ export const testActionMenu = (mode) => {
187
200
  });
188
201
  it("stay `valid`", async () => {
189
202
  const el = await actionMenuFixture();
190
- await elementUpdated(el);
191
203
  expect(el.invalid).to.be.false;
192
204
  el.invalid = true;
193
205
  await elementUpdated(el);
@@ -195,14 +207,12 @@ export const testActionMenu = (mode) => {
195
207
  });
196
208
  it("focus()", async () => {
197
209
  const el = await actionMenuFixture();
198
- await elementUpdated(el);
199
210
  el.focus();
200
211
  expect(document.activeElement).to.equal(el);
201
212
  expect(el.shadowRoot.activeElement).to.equal(el.focusElement);
202
213
  const opened = oneEvent(el, "sp-opened");
203
214
  el.open = true;
204
215
  await opened;
205
- expect(document.activeElement).to.not.equal(el);
206
216
  const closed = oneEvent(el, "sp-closed");
207
217
  el.open = false;
208
218
  await closed;
@@ -211,7 +221,6 @@ export const testActionMenu = (mode) => {
211
221
  });
212
222
  it("opens unmeasured", async () => {
213
223
  const el = await actionMenuFixture();
214
- await elementUpdated(el);
215
224
  const button = el.button;
216
225
  button.click();
217
226
  await elementUpdated(el);
@@ -222,7 +231,6 @@ export const testActionMenu = (mode) => {
222
231
  });
223
232
  it("opens unmeasured with deprecated syntax", async () => {
224
233
  const el = await deprecatedActionMenuFixture();
225
- await elementUpdated(el);
226
234
  const button = el.button;
227
235
  button.click();
228
236
  await elementUpdated(el);
@@ -235,41 +243,30 @@ export const testActionMenu = (mode) => {
235
243
  expect(button).to.have.attribute("aria-haspopup", "true");
236
244
  expect(button).to.have.attribute("aria-expanded", "false");
237
245
  expect(button).not.to.have.attribute("aria-controls");
238
- let items = el.querySelectorAll("sp-menu-item");
239
- const count = items.length;
240
- expect(items.length).to.equal(count);
241
246
  let opened = oneEvent(el, "sp-opened");
242
247
  el.open = true;
243
248
  await opened;
244
249
  expect(el.open).to.be.true;
245
250
  expect(button).to.have.attribute("aria-expanded", "true");
246
251
  expect(button).to.have.attribute("aria-controls", "menu");
247
- items = el.querySelectorAll("sp-menu-item");
248
- expect(items.length).to.equal(0);
249
252
  let closed = oneEvent(el, "sp-closed");
250
253
  el.open = false;
251
254
  await closed;
252
255
  expect(el.open).to.be.false;
253
256
  expect(button).to.have.attribute("aria-expanded", "false");
254
257
  expect(button).not.to.have.attribute("aria-controls");
255
- items = el.querySelectorAll("sp-menu-item");
256
- expect(items.length).to.equal(count);
257
258
  opened = oneEvent(el, "sp-opened");
258
259
  el.open = true;
259
260
  await opened;
260
261
  expect(el.open).to.be.true;
261
262
  expect(button).to.have.attribute("aria-expanded", "true");
262
263
  expect(button).to.have.attribute("aria-controls", "menu");
263
- items = el.querySelectorAll("sp-menu-item");
264
- expect(items.length).to.equal(0);
265
264
  closed = oneEvent(el, "sp-closed");
266
265
  el.open = false;
267
266
  await closed;
268
267
  expect(el.open).to.be.false;
269
268
  expect(button).to.have.attribute("aria-expanded", "false");
270
269
  expect(button).not.to.have.attribute("aria-controls");
271
- items = el.querySelectorAll("sp-menu-item");
272
- expect(items.length).to.equal(count);
273
270
  });
274
271
  it("allows submenu items to be selected", async () => {
275
272
  const root = await actionSubmenuFixture();
@@ -290,8 +287,6 @@ export const testActionMenu = (mode) => {
290
287
  new PointerEvent("pointerenter", { bubbles: true })
291
288
  );
292
289
  await opened;
293
- const overlays = document.querySelectorAll("active-overlay");
294
- expect(overlays.length).to.equal(2);
295
290
  await elementUpdated(submenu);
296
291
  expect(
297
292
  selectedItem.selected,
@@ -299,7 +294,24 @@ export const testActionMenu = (mode) => {
299
294
  ).to.be.true;
300
295
  });
301
296
  it("allows top-level selection state to change", async () => {
302
- const root = await actionSubmenuFixture();
297
+ const root = await styledFixture(html`
298
+ <sp-action-menu label="More Actions">
299
+ <sp-menu-item>One</sp-menu-item>
300
+ <sp-menu-item selected id="root-selected-item">
301
+ Two
302
+ </sp-menu-item>
303
+ <sp-menu-item id="item-with-submenu">
304
+ B should be selected
305
+ <sp-menu slot="submenu">
306
+ <sp-menu-item>A</sp-menu-item>
307
+ <sp-menu-item selected id="sub-selected-item">
308
+ B
309
+ </sp-menu-item>
310
+ <sp-menu-item>C</sp-menu-item>
311
+ </sp-menu>
312
+ </sp-menu-item>
313
+ </sp-action-menu>
314
+ `);
303
315
  const unselectedItem = root.querySelector(
304
316
  "sp-menu-item"
305
317
  );
@@ -321,6 +333,7 @@ export const testActionMenu = (mode) => {
321
333
  let closed = oneEvent(root, "sp-closed");
322
334
  selectedItem.click();
323
335
  await closed;
336
+ expect(root.open).to.be.false;
324
337
  opened = oneEvent(root, "sp-opened");
325
338
  root.click();
326
339
  await opened;
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 elementUpdated,\n expect,\n fixture,\n html,\n oneEvent,\n} from '@open-wc/testing';\nimport { testForLitDevWarnings } from '../../../test/testing-helpers';\n\nimport { spy } from 'sinon';\n\nimport type { ActionMenu } from '@spectrum-web-components/action-menu';\nimport type { Menu, MenuItem } from '@spectrum-web-components/menu';\nimport { ignoreResizeObserverLoopError } from '../../../test/testing-helpers.js';\n\nignoreResizeObserverLoopError(before, after);\n\nconst deprecatedActionMenuFixture = async (): Promise<ActionMenu> =>\n await fixture<ActionMenu>(\n 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 );\n\nconst actionMenuFixture = async (): Promise<ActionMenu> =>\n await fixture<ActionMenu>(\n 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 );\n\nconst actionSubmenuFixture = async (): Promise<ActionMenu> =>\n await fixture<ActionMenu>(\n 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\">\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\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>(\n 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\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('loads - [custom icon]', async () => {\n const el = await fixture<ActionMenu>(\n 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\n await elementUpdated(el);\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>(\n html`\n <sp-action-menu\n label=\"More Actions\"\n @change=${() => changeSpy()}\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\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 await elementUpdated(el);\n\n expect(el.open).to.be.true;\n\n const closed = oneEvent(el, 'sp-closed');\n menuItem2.click();\n await closed;\n await elementUpdated(el);\n\n expect(el.open).to.be.false;\n expect(changeSpy.callCount).to.equal(1);\n });\n it('closes when Menu Item has [href]', async () => {\n const changeSpy = spy();\n\n const el = await fixture<ActionMenu>(\n html`\n <sp-action-menu\n label=\"More Actions\"\n @change=${() => changeSpy()}\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\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 await elementUpdated(el);\n\n expect(el.open).to.be.true;\n\n const closed = oneEvent(el, 'sp-closed');\n menuItem2.click();\n await closed;\n await elementUpdated(el);\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 await elementUpdated(el);\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('stay `valid`', async () => {\n const el = await actionMenuFixture();\n\n await elementUpdated(el);\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 await elementUpdated(el);\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 expect(document.activeElement).to.not.equal(el);\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('opens unmeasured', async () => {\n const el = await actionMenuFixture();\n\n await elementUpdated(el);\n const button = el.button as HTMLButtonElement;\n\n button.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 unmeasured with deprecated syntax', async () => {\n const el = await deprecatedActionMenuFixture();\n\n await elementUpdated(el);\n const button = el.button as HTMLButtonElement;\n\n button.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 items = el.querySelectorAll('sp-menu-item');\n const count = items.length;\n expect(items.length).to.equal(count);\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 items = el.querySelectorAll('sp-menu-item');\n expect(items.length).to.equal(0);\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 items = el.querySelectorAll('sp-menu-item');\n expect(items.length).to.equal(count);\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 items = el.querySelectorAll('sp-menu-item');\n expect(items.length).to.equal(0);\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 items = el.querySelectorAll('sp-menu-item');\n expect(items.length).to.equal(count);\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 const overlays = document.querySelectorAll('active-overlay');\n expect(overlays.length).to.equal(2);\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 const root = await actionSubmenuFixture();\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 let selected = true;\n\n selectedItem.addEventListener('click', () => {\n selected = !selected;\n selectedItem.selected = selected;\n });\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 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 });\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 elementUpdated,\n expect,\n fixture,\n html,\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 { ignoreResizeObserverLoopError } from '../../../test/testing-helpers.js';\nimport '@spectrum-web-components/theme/sp-theme.js';\nimport '@spectrum-web-components/theme/src/themes.js';\nimport '@spectrum-web-components/dialog/sp-dialog-base.js';\nimport { Theme } from '@spectrum-web-components/theme';\nimport { TemplateResult } from '@spectrum-web-components/base';\n\nasync function styledFixture<T extends Element>(\n story: TemplateResult\n): Promise<T> {\n const test = await fixture<Theme>(html`\n <sp-theme theme=\"spectrum\" scale=\"medium\" color=\"dark\">\n ${story}\n </sp-theme>\n `);\n return test.children[0] as T;\n}\n\nignoreResizeObserverLoopError(before, after);\n\nconst deprecatedActionMenuFixture = async (): Promise<ActionMenu> =>\n await fixture<ActionMenu>(\n 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 );\n\nconst actionMenuFixture = async (): Promise<ActionMenu> =>\n await fixture<ActionMenu>(\n 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 );\n\nconst actionSubmenuFixture = async (): Promise<ActionMenu> =>\n await fixture<ActionMenu>(\n 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\">\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\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>(\n 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\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('loads - [custom icon]', async () => {\n const el = await fixture<ActionMenu>(\n 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\n await elementUpdated(el);\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>(\n 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\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(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>(\n 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\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('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('opens unmeasured', async () => {\n const el = await actionMenuFixture();\n\n const button = el.button as HTMLButtonElement;\n\n button.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 unmeasured with deprecated syntax', async () => {\n const el = await deprecatedActionMenuFixture();\n\n const button = el.button as HTMLButtonElement;\n\n button.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 const root = await styledFixture<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\">\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 let selected = true;\n\n selectedItem.addEventListener('click', () => {\n selected = !selected;\n selectedItem.selected = selected;\n });\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 });\n};\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -1,136 +0,0 @@
1
- {
2
- "schemaVersion": "1.0.0",
3
- "readme": "",
4
- "modules": [
5
- {
6
- "kind": "javascript-module",
7
- "path": "sp-action-menu.js",
8
- "declarations": [],
9
- "exports": [
10
- {
11
- "kind": "custom-element-definition",
12
- "name": "sp-action-menu",
13
- "declaration": {
14
- "name": "ActionMenu",
15
- "module": "/src/ActionMenu.js"
16
- }
17
- }
18
- ]
19
- },
20
- {
21
- "kind": "javascript-module",
22
- "path": "sync/sp-action-menu.js",
23
- "declarations": [],
24
- "exports": []
25
- },
26
- {
27
- "kind": "javascript-module",
28
- "path": "src/ActionMenu.js",
29
- "declarations": [
30
- {
31
- "kind": "class",
32
- "description": "",
33
- "name": "ActionMenu",
34
- "slots": [
35
- {
36
- "description": "menu items to be listed in the Action Menu",
37
- "name": ""
38
- },
39
- {
40
- "description": "The icon to use for Action Menu",
41
- "name": "icon"
42
- },
43
- {
44
- "description": "The label to use on for the Action Menu",
45
- "name": "label"
46
- }
47
- ],
48
- "members": [
49
- {
50
- "kind": "field",
51
- "name": "selects",
52
- "type": {
53
- "text": "undefined | 'single'"
54
- },
55
- "privacy": "public",
56
- "default": "undefined",
57
- "attribute": "selects"
58
- },
59
- {
60
- "kind": "field",
61
- "name": "listRole",
62
- "type": {
63
- "text": "'listbox' | 'menu'"
64
- },
65
- "privacy": "protected",
66
- "default": "'menu'"
67
- },
68
- {
69
- "kind": "field",
70
- "name": "itemRole",
71
- "type": {
72
- "text": "string"
73
- },
74
- "privacy": "protected",
75
- "default": "'menuitem'"
76
- },
77
- {
78
- "kind": "field",
79
- "name": "hasLabel",
80
- "type": {
81
- "text": "boolean"
82
- },
83
- "privacy": "private",
84
- "readonly": true
85
- },
86
- {
87
- "kind": "field",
88
- "name": "buttonContent",
89
- "type": {
90
- "text": "TemplateResult[]"
91
- },
92
- "privacy": "protected",
93
- "readonly": true
94
- }
95
- ],
96
- "attributes": [
97
- {
98
- "description": "By default `sp-action-menu` does not manage a selection. If you'd like for a selection to be held by the `sp-menu` that it presents in its overlay, use `selects=\"single\" to activate this functionality.",
99
- "name": "selects",
100
- "type": {
101
- "text": "undefined | 'single'"
102
- },
103
- "default": "undefined",
104
- "resolveInitializer": {
105
- "module": "src/ActionMenu.ts"
106
- },
107
- "fieldName": "selects"
108
- }
109
- ],
110
- "mixins": [
111
- {
112
- "name": "ObserveSlotText",
113
- "package": "@spectrum-web-components/shared/src/observe-slot-text.js"
114
- }
115
- ],
116
- "superclass": {
117
- "name": "PickerBase",
118
- "package": "@spectrum-web-components/picker"
119
- },
120
- "tagName": "sp-action-menu",
121
- "customElement": true
122
- }
123
- ],
124
- "exports": [
125
- {
126
- "kind": "js",
127
- "name": "ActionMenu",
128
- "declaration": {
129
- "name": "ActionMenu",
130
- "module": "src/ActionMenu.js"
131
- }
132
- }
133
- ]
134
- }
135
- ]
136
- }