@spectrum-web-components/action-group 0.6.2 → 0.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/README.md +31 -0
  2. package/custom-elements.json +71 -22
  3. package/package.json +5 -4
  4. package/src/ActionGroup.d.ts +11 -7
  5. package/src/ActionGroup.js +100 -156
  6. package/src/ActionGroup.js.map +1 -1
  7. package/src/action-group.css.js +20 -17
  8. package/src/action-group.css.js.map +1 -1
  9. package/src/spectrum-action-group.css.js +20 -17
  10. package/src/spectrum-action-group.css.js.map +1 -1
  11. package/stories/action-group-tooltip.stories.js +13 -4
  12. package/stories/action-group-tooltip.stories.js.map +1 -1
  13. package/stories/action-group.stories.js +30 -0
  14. package/stories/action-group.stories.js.map +1 -1
package/src/ActionGroup.js CHANGED
@@ -12,124 +12,43 @@ governing permissions and limitations under the License.
12
12
  import { __decorate } from "tslib";
13
13
  import { html, SpectrumElement, } from '@spectrum-web-components/base';
14
14
  import { property } from '@spectrum-web-components/base/src/decorators.js';
15
+ import { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';
15
16
  import styles from './action-group.css.js';
16
17
  const EMPTY_SELECTION = [];
17
18
  /**
18
19
  * @element sp-action-group
19
20
  * @slot - the sp-action-button elements that make up the group
21
+ *
22
+ * @fires change - Announces that selection state has been changed by user
20
23
  */
21
24
  export class ActionGroup extends SpectrumElement {
22
25
  constructor() {
23
26
  super(...arguments);
24
- this.buttons = [];
27
+ this._buttons = [];
25
28
  this._buttonSelector = 'sp-action-button';
29
+ this.rovingTabindexController = new RovingTabindexController(this, {
30
+ focusInIndex: (elements) => {
31
+ let firstEnabledIndex = -1;
32
+ const firstSelectedIndex = elements.findIndex((el, index) => {
33
+ if (!elements[firstEnabledIndex] && !el.disabled) {
34
+ firstEnabledIndex = index;
35
+ }
36
+ return el.selected && !el.disabled;
37
+ });
38
+ return elements[firstSelectedIndex]
39
+ ? firstSelectedIndex
40
+ : firstEnabledIndex;
41
+ },
42
+ elements: () => this.buttons,
43
+ isFocusableElement: (el) => !el.disabled,
44
+ });
26
45
  this.compact = false;
27
46
  this.emphasized = false;
28
47
  this.justified = false;
29
48
  this.label = '';
30
49
  this.quiet = false;
31
50
  this.vertical = false;
32
- this._selected = EMPTY_SELECTION;
33
- this.handleFocusin = () => {
34
- this.addEventListener('focusout', this.handleFocusout);
35
- this.addEventListener('keydown', this.handleKeydown);
36
- };
37
- this.handleKeydown = (event) => {
38
- const { code } = event;
39
- if (![
40
- 'ArrowUp',
41
- 'ArrowLeft',
42
- 'ArrowRight',
43
- 'ArrowDown',
44
- 'End',
45
- 'Home',
46
- 'PageUp',
47
- 'PageDown',
48
- ].includes(code)) {
49
- return;
50
- }
51
- const activeElement = this.getRootNode()
52
- .activeElement;
53
- /* c8 ignore next 3 */
54
- if (!activeElement) {
55
- return;
56
- }
57
- let nextIndex = this.buttons.indexOf(activeElement);
58
- /* c8 ignore next 3 */
59
- if (nextIndex === -1) {
60
- return;
61
- }
62
- const circularIndexedElement = (list, index) => list[(list.length + index) % list.length];
63
- const buttonFromDelta = (delta) => {
64
- nextIndex += delta;
65
- while (circularIndexedElement(this.buttons, nextIndex).disabled) {
66
- nextIndex += delta;
67
- }
68
- };
69
- switch (code) {
70
- case 'ArrowUp':
71
- buttonFromDelta(-1);
72
- break;
73
- case 'ArrowLeft':
74
- buttonFromDelta(this.isLTR ? -1 : 1);
75
- break;
76
- case 'ArrowRight':
77
- buttonFromDelta(this.isLTR ? 1 : -1);
78
- break;
79
- case 'ArrowDown':
80
- buttonFromDelta(1);
81
- break;
82
- case 'End':
83
- nextIndex = this.buttons.length;
84
- buttonFromDelta(-1);
85
- break;
86
- case 'Home':
87
- nextIndex = -1;
88
- buttonFromDelta(1);
89
- break;
90
- case 'PageUp':
91
- case 'PageDown':
92
- default:
93
- const tagsSiblings = [
94
- ...this.getRootNode().querySelectorAll('sp-action-group'),
95
- ];
96
- if (tagsSiblings.length < 2) {
97
- return;
98
- }
99
- event.preventDefault();
100
- const currentIndex = tagsSiblings.indexOf(this);
101
- const offset = code === 'PageUp' ? -1 : 1;
102
- let nextRadioGroupIndex = currentIndex + offset;
103
- let nextRadioGroup = circularIndexedElement(tagsSiblings, nextRadioGroupIndex);
104
- while (!nextRadioGroup.buttons.length) {
105
- nextRadioGroupIndex += offset;
106
- nextRadioGroup = circularIndexedElement(tagsSiblings, nextRadioGroupIndex);
107
- }
108
- nextRadioGroup.focus();
109
- return;
110
- }
111
- event.preventDefault();
112
- const nextRadio = circularIndexedElement(this.buttons, nextIndex);
113
- activeElement.tabIndex = -1;
114
- nextRadio.tabIndex = 0;
115
- nextRadio.focus();
116
- };
117
- this.handleFocusout = (event) => {
118
- const { relatedTarget } = event;
119
- if (!relatedTarget || !this.contains(relatedTarget)) {
120
- const firstButtonNonDisabled = this.buttons.find((button) => {
121
- if (this.selected.length) {
122
- return button.selected;
123
- }
124
- return !button.disabled;
125
- });
126
- if (firstButtonNonDisabled) {
127
- firstButtonNonDisabled.tabIndex = 0;
128
- }
129
- }
130
- this.removeEventListener('keydown', this.handleKeydown);
131
- this.removeEventListener('focusout', this.handleFocusout);
132
- };
51
+ this.selected = EMPTY_SELECTION;
133
52
  this.manageButtons = () => {
134
53
  const slot = this.shadowRoot.querySelector('slot');
135
54
  if (!slot)
@@ -146,6 +65,14 @@ export class ActionGroup extends SpectrumElement {
146
65
  return acc;
147
66
  }, []);
148
67
  this.buttons = buttons;
68
+ // <selected> element merges selected so following paradigm here
69
+ const currentlySelectedButtons = [];
70
+ this.buttons.forEach((button) => {
71
+ if (button.selected) {
72
+ currentlySelectedButtons.push(button.value);
73
+ }
74
+ });
75
+ this.selected = this.selected.concat(currentlySelectedButtons);
149
76
  this.manageChildren();
150
77
  this.manageSelects();
151
78
  };
@@ -153,39 +80,47 @@ export class ActionGroup extends SpectrumElement {
153
80
  static get styles() {
154
81
  return [styles];
155
82
  }
156
- get selected() {
157
- return this._selected;
158
- }
159
- set selected(selected) {
160
- if (selected === this.selected)
83
+ set buttons(tabs) {
84
+ if (tabs === this.buttons)
161
85
  return;
162
- const old = this.selected;
163
- this._selected = selected;
86
+ this._buttons = tabs;
87
+ this.rovingTabindexController.clearElementCache();
88
+ }
89
+ get buttons() {
90
+ return this._buttons;
91
+ }
92
+ dispatchChange(old) {
164
93
  const applyDefault = this.dispatchEvent(new Event('change', {
165
94
  bubbles: true,
166
95
  composed: true,
167
96
  cancelable: true,
168
97
  }));
169
98
  if (!applyDefault) {
170
- this._selected = old;
99
+ this.selected = old;
171
100
  this.buttons.map((button) => {
172
101
  button.selected = this.selected.includes(button.value);
173
102
  });
174
103
  }
175
104
  }
176
- focus(options) {
177
- if (!this.buttons.length) {
105
+ setSelected(selected) {
106
+ if (selected === this.selected)
178
107
  return;
179
- }
180
- const firstButtonNonDisabled = this.buttons.find((button) => {
181
- if (this.selected) {
182
- return button.selected;
183
- }
184
- return !button.disabled;
108
+ const old = this.selected;
109
+ this.selected = selected;
110
+ this.dispatchChange(old);
111
+ }
112
+ focus(options) {
113
+ this.rovingTabindexController.focus(options);
114
+ }
115
+ deselectSelectedButtons() {
116
+ const selected = [
117
+ ...this.querySelectorAll('[selected]'),
118
+ ];
119
+ selected.forEach((el) => {
120
+ el.selected = false;
121
+ el.tabIndex = -1;
122
+ el.setAttribute('aria-checked', 'false');
185
123
  });
186
- if (firstButtonNonDisabled) {
187
- firstButtonNonDisabled.focus(options);
188
- }
189
124
  }
190
125
  handleClick(event) {
191
126
  const target = event.target;
@@ -194,18 +129,11 @@ export class ActionGroup extends SpectrumElement {
194
129
  }
195
130
  switch (this.selects) {
196
131
  case 'single': {
197
- const selected = [
198
- ...this.querySelectorAll('[selected]'),
199
- ];
200
- selected.forEach((el) => {
201
- el.selected = false;
202
- el.tabIndex = -1;
203
- el.setAttribute('aria-checked', 'false');
204
- });
132
+ this.deselectSelectedButtons();
205
133
  target.selected = true;
206
134
  target.tabIndex = 0;
207
135
  target.setAttribute('aria-checked', 'true');
208
- this.selected = [target.value];
136
+ this.setSelected([target.value]);
209
137
  target.focus();
210
138
  break;
211
139
  }
@@ -219,11 +147,14 @@ export class ActionGroup extends SpectrumElement {
219
147
  else {
220
148
  selected.splice(this.selected.indexOf(target.value), 1);
221
149
  }
222
- this.selected = selected;
150
+ this.setSelected(selected);
151
+ this.buttons.forEach((button) => {
152
+ button.tabIndex = -1;
153
+ });
154
+ target.tabIndex = 0;
223
155
  break;
224
156
  }
225
157
  default:
226
- this.selected = EMPTY_SELECTION;
227
158
  break;
228
159
  }
229
160
  }
@@ -231,58 +162,70 @@ export class ActionGroup extends SpectrumElement {
231
162
  if (!this.buttons.length) {
232
163
  return;
233
164
  }
165
+ const options = this.buttons;
234
166
  switch (this.selects) {
235
167
  case 'single': {
236
168
  this.setAttribute('role', 'radiogroup');
237
- let selection;
238
- let firstEnabled;
239
- const options = this.buttons;
169
+ const selections = [];
240
170
  const updates = options.map(async (option) => {
241
171
  await option.updateComplete;
242
172
  option.setAttribute('role', 'radio');
243
173
  option.setAttribute('aria-checked', option.selected ? 'true' : 'false');
244
- option.tabIndex = option.selected ? 0 : -1;
245
174
  if (option.selected) {
246
- selection = option;
247
- }
248
- if (!firstEnabled && !option.disabled) {
249
- firstEnabled = option;
175
+ selections.push(option);
250
176
  }
251
177
  });
252
178
  await Promise.all(updates);
253
- if (selection || firstEnabled) {
254
- (selection || firstEnabled).tabIndex = 0;
255
- }
256
- this.selected = selection ? [selection.value] : EMPTY_SELECTION;
179
+ const selected = selections.map((button) => {
180
+ return button.value;
181
+ });
182
+ this.selected = selected || EMPTY_SELECTION;
257
183
  break;
258
184
  }
259
185
  case 'multiple': {
260
186
  this.setAttribute('role', 'group');
261
187
  const selection = [];
262
- const options = this.buttons;
188
+ const selections = [];
263
189
  const updates = options.map(async (option) => {
264
190
  await option.updateComplete;
265
191
  option.setAttribute('role', 'checkbox');
266
192
  option.setAttribute('aria-checked', option.selected ? 'true' : 'false');
267
- option.tabIndex = 0;
268
193
  if (option.selected) {
269
194
  selection.push(option.value);
195
+ selections.push(option);
270
196
  }
271
197
  });
272
198
  await Promise.all(updates);
273
- this.selected = !!selection.length
199
+ const selected = !!selection.length
274
200
  ? selection
275
201
  : EMPTY_SELECTION;
202
+ this.selected = selected;
276
203
  break;
277
204
  }
278
205
  default:
279
- this.buttons.forEach((option) => {
280
- option.setAttribute('role', 'button');
281
- option.tabIndex = 0;
282
- });
283
- this.removeAttribute('role');
284
- this.selected = EMPTY_SELECTION;
285
- break;
206
+ // if user defines .selected
207
+ if (this.selected.length) {
208
+ const selections = [];
209
+ const updates = options.map(async (option) => {
210
+ await option.updateComplete;
211
+ option.setAttribute('aria-checked', option.selected ? 'true' : 'false');
212
+ option.setAttribute('role', 'button');
213
+ if (option.selected) {
214
+ selections.push(option);
215
+ }
216
+ });
217
+ await Promise.all(updates);
218
+ this.selected = selections.map((button) => {
219
+ return button.value;
220
+ });
221
+ }
222
+ else {
223
+ this.buttons.forEach((option) => {
224
+ option.setAttribute('role', 'button');
225
+ });
226
+ this.removeAttribute('role');
227
+ break;
228
+ }
286
229
  }
287
230
  }
288
231
  render() {
@@ -293,12 +236,12 @@ export class ActionGroup extends SpectrumElement {
293
236
  firstUpdated(changes) {
294
237
  super.firstUpdated(changes);
295
238
  this.addEventListener('click', this.handleClick);
296
- this.addEventListener('focusin', this.handleFocusin);
297
239
  }
298
240
  updated(changes) {
299
241
  super.updated(changes);
300
242
  if (changes.has('selects')) {
301
243
  this.manageSelects();
244
+ this.manageChildren();
302
245
  }
303
246
  if ((changes.has('quiet') && this.quiet) ||
304
247
  (changes.has('emphasized') && this.emphasized)) {
@@ -319,6 +262,7 @@ export class ActionGroup extends SpectrumElement {
319
262
  this.buttons.forEach((button) => {
320
263
  button.quiet = this.quiet;
321
264
  button.emphasized = this.emphasized;
265
+ button.selected = this.selected.includes(button.value);
322
266
  });
323
267
  }
324
268
  connectedCallback() {
@@ -357,5 +301,5 @@ __decorate([
357
301
  ], ActionGroup.prototype, "vertical", void 0);
358
302
  __decorate([
359
303
  property({ type: Array })
360
- ], ActionGroup.prototype, "selected", null);
304
+ ], ActionGroup.prototype, "selected", void 0);
361
305
  //# sourceMappingURL=ActionGroup.js.map
package/src/ActionGroup.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ActionGroup.js","sourceRoot":"","sources":["ActionGroup.ts"],"names":[],"mappings":"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","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 SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport type { ActionButton } from '@spectrum-web-components/action-button';\n\nimport styles from './action-group.css.js';\n\nconst EMPTY_SELECTION: string[] = [];\n\n/**\n * @element sp-action-group\n * @slot - the sp-action-button elements that make up the group\n */\nexport class ActionGroup extends SpectrumElement {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n public buttons: ActionButton[] = [];\n protected _buttonSelector = 'sp-action-button';\n\n @property({ type: Boolean, reflect: true })\n public compact = false;\n\n @property({ type: Boolean, reflect: true })\n public emphasized = false;\n\n @property({ type: Boolean, reflect: true })\n public justified = false;\n\n @property({ type: String })\n public label = '';\n\n @property({ type: Boolean, reflect: true })\n public quiet = false;\n\n @property({ type: String })\n public selects: undefined | 'single' | 'multiple';\n\n @property({ type: Boolean, reflect: true })\n public vertical = false;\n\n @property({ type: Array })\n public get selected(): string[] {\n return this._selected;\n }\n public set selected(selected: string[]) {\n if (selected === this.selected) return;\n const old = this.selected;\n this._selected = selected;\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n if (!applyDefault) {\n this._selected = old;\n this.buttons.map((button) => {\n button.selected = this.selected.includes(button.value);\n });\n }\n }\n private _selected: string[] = EMPTY_SELECTION;\n\n public focus(options?: FocusOptions): void {\n if (!this.buttons.length) {\n return;\n }\n const firstButtonNonDisabled = this.buttons.find((button) => {\n if (this.selected) {\n return button.selected;\n }\n return !button.disabled;\n });\n if (firstButtonNonDisabled) {\n firstButtonNonDisabled.focus(options);\n }\n }\n\n private handleClick(event: Event): void {\n const target = event.target as ActionButton;\n if (typeof target.value === 'undefined') {\n return;\n }\n switch (this.selects) {\n case 'single': {\n const selected = [\n ...this.querySelectorAll('[selected]'),\n ] as ActionButton[];\n selected.forEach((el) => {\n el.selected = false;\n el.tabIndex = -1;\n el.setAttribute('aria-checked', 'false');\n });\n target.selected = true;\n target.tabIndex = 0;\n target.setAttribute('aria-checked', 'true');\n this.selected = [target.value];\n target.focus();\n break;\n }\n case 'multiple': {\n const selected = [...this.selected];\n target.selected = !target.selected;\n target.setAttribute(\n 'aria-checked',\n target.selected ? 'true' : 'false'\n );\n if (target.selected) {\n selected.push(target.value);\n } else {\n selected.splice(this.selected.indexOf(target.value), 1);\n }\n this.selected = selected;\n break;\n }\n default:\n this.selected = EMPTY_SELECTION;\n break;\n }\n }\n\n private handleFocusin = (): void => {\n this.addEventListener('focusout', this.handleFocusout);\n this.addEventListener('keydown', this.handleKeydown);\n };\n\n private handleKeydown = (event: KeyboardEvent): void => {\n const { code } = event;\n if (\n ![\n 'ArrowUp',\n 'ArrowLeft',\n 'ArrowRight',\n 'ArrowDown',\n 'End',\n 'Home',\n 'PageUp',\n 'PageDown',\n ].includes(code)\n ) {\n return;\n }\n const activeElement = (this.getRootNode() as Document)\n .activeElement as ActionButton;\n /* c8 ignore next 3 */\n if (!activeElement) {\n return;\n }\n let nextIndex = this.buttons.indexOf(activeElement);\n /* c8 ignore next 3 */\n if (nextIndex === -1) {\n return;\n }\n const circularIndexedElement = <T extends HTMLElement>(\n list: T[],\n index: number\n ): T => list[(list.length + index) % list.length];\n const buttonFromDelta = (delta: number): void => {\n nextIndex += delta;\n while (circularIndexedElement(this.buttons, nextIndex).disabled) {\n nextIndex += delta;\n }\n };\n switch (code) {\n case 'ArrowUp':\n buttonFromDelta(-1);\n break;\n case 'ArrowLeft':\n buttonFromDelta(this.isLTR ? -1 : 1);\n break;\n case 'ArrowRight':\n buttonFromDelta(this.isLTR ? 1 : -1);\n break;\n case 'ArrowDown':\n buttonFromDelta(1);\n break;\n case 'End':\n nextIndex = this.buttons.length;\n buttonFromDelta(-1);\n break;\n case 'Home':\n nextIndex = -1;\n buttonFromDelta(1);\n break;\n case 'PageUp':\n case 'PageDown':\n default:\n const tagsSiblings = [\n ...(\n this.getRootNode() as Document\n ).querySelectorAll<ActionGroup>('sp-action-group'),\n ];\n if (tagsSiblings.length < 2) {\n return;\n }\n event.preventDefault();\n const currentIndex = tagsSiblings.indexOf(this);\n const offset = code === 'PageUp' ? -1 : 1;\n let nextRadioGroupIndex = currentIndex + offset;\n let nextRadioGroup = circularIndexedElement(\n tagsSiblings,\n nextRadioGroupIndex\n );\n while (!nextRadioGroup.buttons.length) {\n nextRadioGroupIndex += offset;\n nextRadioGroup = circularIndexedElement(\n tagsSiblings,\n nextRadioGroupIndex\n );\n }\n nextRadioGroup.focus();\n return;\n }\n event.preventDefault();\n const nextRadio = circularIndexedElement(this.buttons, nextIndex);\n activeElement.tabIndex = -1;\n nextRadio.tabIndex = 0;\n nextRadio.focus();\n };\n\n private handleFocusout = (event: FocusEvent): void => {\n const { relatedTarget } = event;\n if (!relatedTarget || !this.contains(relatedTarget as HTMLElement)) {\n const firstButtonNonDisabled = this.buttons.find((button) => {\n if (this.selected.length) {\n return button.selected;\n }\n return !button.disabled;\n });\n if (firstButtonNonDisabled) {\n firstButtonNonDisabled.tabIndex = 0;\n }\n }\n this.removeEventListener('keydown', this.handleKeydown);\n this.removeEventListener('focusout', this.handleFocusout);\n };\n\n private async manageSelects(): Promise<void> {\n if (!this.buttons.length) {\n return;\n }\n switch (this.selects) {\n case 'single': {\n this.setAttribute('role', 'radiogroup');\n let selection: ActionButton | undefined;\n let firstEnabled: ActionButton | undefined;\n const options = this.buttons;\n const updates = options.map(async (option) => {\n await option.updateComplete;\n option.setAttribute('role', 'radio');\n option.setAttribute(\n 'aria-checked',\n option.selected ? 'true' : 'false'\n );\n option.tabIndex = option.selected ? 0 : -1;\n if (option.selected) {\n selection = option;\n }\n if (!firstEnabled && !option.disabled) {\n firstEnabled = option;\n }\n });\n await Promise.all(updates);\n if (selection || firstEnabled) {\n ((selection || firstEnabled) as ActionButton).tabIndex = 0;\n }\n this.selected = selection ? [selection.value] : EMPTY_SELECTION;\n break;\n }\n case 'multiple': {\n this.setAttribute('role', 'group');\n const selection: string[] = [];\n const options = this.buttons;\n const updates = options.map(async (option) => {\n await option.updateComplete;\n option.setAttribute('role', 'checkbox');\n option.setAttribute(\n 'aria-checked',\n option.selected ? 'true' : 'false'\n );\n option.tabIndex = 0;\n if (option.selected) {\n selection.push(option.value);\n }\n });\n await Promise.all(updates);\n this.selected = !!selection.length\n ? selection\n : EMPTY_SELECTION;\n break;\n }\n default:\n this.buttons.forEach((option) => {\n option.setAttribute('role', 'button');\n option.tabIndex = 0;\n });\n this.removeAttribute('role');\n this.selected = EMPTY_SELECTION;\n break;\n }\n }\n\n protected render(): TemplateResult {\n return html`\n <slot role=\"presentation\" @slotchange=${this.manageButtons}></slot>\n `;\n }\n\n protected firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n this.addEventListener('click', this.handleClick);\n this.addEventListener('focusin', this.handleFocusin);\n }\n\n protected updated(changes: PropertyValues): void {\n super.updated(changes);\n if (changes.has('selects')) {\n this.manageSelects();\n }\n if (\n (changes.has('quiet') && this.quiet) ||\n (changes.has('emphasized') && this.emphasized)\n ) {\n this.manageChildren();\n }\n // Update `aria-label` when `label` available or not first `updated`\n if (\n changes.has('label') &&\n (this.label || typeof changes.get('label') !== 'undefined')\n ) {\n if (this.label.length) {\n this.setAttribute('aria-label', this.label);\n } else {\n this.removeAttribute('aria-label');\n }\n }\n }\n\n private manageChildren(): void {\n this.buttons.forEach((button) => {\n button.quiet = this.quiet;\n button.emphasized = this.emphasized;\n });\n }\n\n private manageButtons = (): void => {\n const slot = this.shadowRoot.querySelector('slot');\n if (!slot) return;\n const assignedElements = slot.assignedElements({ flatten: true });\n const buttons = assignedElements.reduce((acc: unknown[], el) => {\n if (el.matches(this._buttonSelector)) {\n acc.push(el);\n } else {\n const buttonDescendents = Array.from(\n el.querySelectorAll(`:scope > ${this._buttonSelector}`)\n );\n acc.push(...buttonDescendents);\n }\n return acc;\n }, []);\n this.buttons = buttons as ActionButton[];\n this.manageChildren();\n this.manageSelects();\n };\n\n public connectedCallback(): void {\n super.connectedCallback();\n if (!this.observer) {\n this.observer = new MutationObserver(this.manageButtons);\n this.manageButtons();\n }\n this.observer.observe(this, { childList: true, subtree: true });\n }\n\n public disconnectedCallback(): void {\n this.observer.disconnect();\n super.disconnectedCallback();\n }\n\n private observer!: MutationObserver;\n}\n"]}
1
+ {"version":3,"file":"ActionGroup.js","sourceRoot":"","sources":["ActionGroup.ts"],"names":[],"mappings":"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","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 SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport type { ActionButton } from '@spectrum-web-components/action-button';\nimport { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';\n\nimport styles from './action-group.css.js';\n\nconst EMPTY_SELECTION: string[] = [];\n\n/**\n * @element sp-action-group\n * @slot - the sp-action-button elements that make up the group\n *\n * @fires change - Announces that selection state has been changed by user\n */\nexport class ActionGroup extends SpectrumElement {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n public set buttons(tabs: ActionButton[]) {\n if (tabs === this.buttons) return;\n this._buttons = tabs;\n this.rovingTabindexController.clearElementCache();\n }\n\n public get buttons(): ActionButton[] {\n return this._buttons;\n }\n\n public _buttons: ActionButton[] = [];\n\n protected _buttonSelector = 'sp-action-button';\n\n rovingTabindexController = new RovingTabindexController<ActionButton>(\n this,\n {\n focusInIndex: (elements: ActionButton[]) => {\n let firstEnabledIndex = -1;\n const firstSelectedIndex = elements.findIndex((el, index) => {\n if (!elements[firstEnabledIndex] && !el.disabled) {\n firstEnabledIndex = index;\n }\n return el.selected && !el.disabled;\n });\n return elements[firstSelectedIndex]\n ? firstSelectedIndex\n : firstEnabledIndex;\n },\n elements: () => this.buttons,\n isFocusableElement: (el: ActionButton) => !el.disabled,\n }\n );\n\n @property({ type: Boolean, reflect: true })\n public compact = false;\n\n @property({ type: Boolean, reflect: true })\n public emphasized = false;\n\n @property({ type: Boolean, reflect: true })\n public justified = false;\n\n @property({ type: String })\n public label = '';\n\n @property({ type: Boolean, reflect: true })\n public quiet = false;\n\n @property({ type: String })\n public selects: undefined | 'single' | 'multiple';\n\n @property({ type: Boolean, reflect: true })\n public vertical = false;\n\n @property({ type: Array })\n public selected: string[] = EMPTY_SELECTION;\n\n private dispatchChange(old: string[]): void {\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n\n if (!applyDefault) {\n this.selected = old;\n this.buttons.map((button) => {\n button.selected = this.selected.includes(button.value);\n });\n }\n }\n\n private setSelected(selected: string[]): void {\n if (selected === this.selected) return;\n\n const old = this.selected;\n this.selected = selected;\n this.dispatchChange(old);\n }\n\n public focus(options?: FocusOptions): void {\n this.rovingTabindexController.focus(options);\n }\n\n private deselectSelectedButtons(): void {\n const selected = [\n ...this.querySelectorAll('[selected]'),\n ] as ActionButton[];\n selected.forEach((el) => {\n el.selected = false;\n el.tabIndex = -1;\n el.setAttribute('aria-checked', 'false');\n });\n }\n\n private handleClick(event: Event): void {\n const target = event.target as ActionButton;\n if (typeof target.value === 'undefined') {\n return;\n }\n switch (this.selects) {\n case 'single': {\n this.deselectSelectedButtons();\n target.selected = true;\n target.tabIndex = 0;\n target.setAttribute('aria-checked', 'true');\n this.setSelected([target.value]);\n target.focus();\n break;\n }\n case 'multiple': {\n const selected = [...this.selected];\n target.selected = !target.selected;\n target.setAttribute(\n 'aria-checked',\n target.selected ? 'true' : 'false'\n );\n if (target.selected) {\n selected.push(target.value);\n } else {\n selected.splice(this.selected.indexOf(target.value), 1);\n }\n this.setSelected(selected);\n\n this.buttons.forEach((button) => {\n button.tabIndex = -1;\n });\n\n target.tabIndex = 0;\n\n break;\n }\n default:\n break;\n }\n }\n\n private async manageSelects(): Promise<void> {\n if (!this.buttons.length) {\n return;\n }\n\n const options = this.buttons;\n switch (this.selects) {\n case 'single': {\n this.setAttribute('role', 'radiogroup');\n const selections: ActionButton[] = [];\n const updates = options.map(async (option) => {\n await option.updateComplete;\n option.setAttribute('role', 'radio');\n option.setAttribute(\n 'aria-checked',\n option.selected ? 'true' : 'false'\n );\n if (option.selected) {\n selections.push(option);\n }\n });\n await Promise.all(updates);\n\n const selected = selections.map((button) => {\n return button.value;\n });\n\n this.selected = selected || EMPTY_SELECTION;\n break;\n }\n case 'multiple': {\n this.setAttribute('role', 'group');\n const selection: string[] = [];\n const selections: ActionButton[] = [];\n const updates = options.map(async (option) => {\n await option.updateComplete;\n option.setAttribute('role', 'checkbox');\n option.setAttribute(\n 'aria-checked',\n option.selected ? 'true' : 'false'\n );\n if (option.selected) {\n selection.push(option.value);\n selections.push(option);\n }\n });\n await Promise.all(updates);\n const selected = !!selection.length\n ? selection\n : EMPTY_SELECTION;\n this.selected = selected;\n break;\n }\n default:\n // if user defines .selected\n if (this.selected.length) {\n const selections: ActionButton[] = [];\n const updates = options.map(async (option) => {\n await option.updateComplete;\n option.setAttribute(\n 'aria-checked',\n option.selected ? 'true' : 'false'\n );\n option.setAttribute('role', 'button');\n if (option.selected) {\n selections.push(option);\n }\n });\n await Promise.all(updates);\n\n this.selected = selections.map((button) => {\n return button.value;\n });\n } else {\n this.buttons.forEach((option) => {\n option.setAttribute('role', 'button');\n });\n this.removeAttribute('role');\n break;\n }\n }\n }\n\n protected render(): TemplateResult {\n return html`\n <slot role=\"presentation\" @slotchange=${this.manageButtons}></slot>\n `;\n }\n\n protected firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n this.addEventListener('click', this.handleClick);\n }\n\n protected updated(changes: PropertyValues): void {\n super.updated(changes);\n if (changes.has('selects')) {\n this.manageSelects();\n this.manageChildren();\n }\n if (\n (changes.has('quiet') && this.quiet) ||\n (changes.has('emphasized') && this.emphasized)\n ) {\n this.manageChildren();\n }\n // Update `aria-label` when `label` available or not first `updated`\n if (\n changes.has('label') &&\n (this.label || typeof changes.get('label') !== 'undefined')\n ) {\n if (this.label.length) {\n this.setAttribute('aria-label', this.label);\n } else {\n this.removeAttribute('aria-label');\n }\n }\n }\n\n private manageChildren(): void {\n this.buttons.forEach((button) => {\n button.quiet = this.quiet;\n button.emphasized = this.emphasized;\n button.selected = this.selected.includes(button.value);\n });\n }\n\n private manageButtons = (): void => {\n const slot = this.shadowRoot.querySelector('slot');\n if (!slot) return;\n const assignedElements = slot.assignedElements({ flatten: true });\n const buttons = assignedElements.reduce((acc: unknown[], el) => {\n if (el.matches(this._buttonSelector)) {\n acc.push(el);\n } else {\n const buttonDescendents = Array.from(\n el.querySelectorAll(`:scope > ${this._buttonSelector}`)\n );\n acc.push(...buttonDescendents);\n }\n return acc;\n }, []);\n this.buttons = buttons as ActionButton[];\n // <selected> element merges selected so following paradigm here\n const currentlySelectedButtons: string[] = [];\n this.buttons.forEach((button: ActionButton) => {\n if (button.selected) {\n currentlySelectedButtons.push(button.value);\n }\n });\n this.selected = this.selected.concat(currentlySelectedButtons);\n this.manageChildren();\n this.manageSelects();\n };\n\n public connectedCallback(): void {\n super.connectedCallback();\n if (!this.observer) {\n this.observer = new MutationObserver(this.manageButtons);\n this.manageButtons();\n }\n this.observer.observe(this, { childList: true, subtree: true });\n }\n\n public disconnectedCallback(): void {\n this.observer.disconnect();\n super.disconnectedCallback();\n }\n\n private observer!: MutationObserver;\n}\n"]}
package/src/action-group.css.js CHANGED
@@ -13,7 +13,10 @@ import { css } from '@spectrum-web-components/base';
13
13
  const styles = css `
14
14
  :host{--spectrum-actiongroup-button-gap-reset:0;--spectrum-actiongroup-quiet-compact-button-gap:var(
15
15
  --spectrum-global-dimension-size-25
16
- )}:host{display:flex;flex-wrap:wrap}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])){margin-top:calc(-1*var(--spectrum-actiongroup-button-gap-y, var(--spectrum-global-dimension-size-100)))}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0;margin-top:var(
16
+ )}:host{display:flex;flex-wrap:wrap}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])){margin-top:calc(var(
17
+ --spectrum-actiongroup-button-gap-y,
18
+ var(--spectrum-global-dimension-size-100)
19
+ )*-1)}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0;margin-top:var(
17
20
  --spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)
18
21
  )}:host([dir=ltr]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-right:var(
19
22
  --spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)
@@ -51,13 +54,13 @@ const styles = css `
51
54
  --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
52
55
  )}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-bottom-right-radius:var(
53
56
  --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
54
- )}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){margin-right:calc(-1*var(
57
+ )}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){margin-right:calc(var(
55
58
  --spectrum-actionbutton-m-texticon-border-size,
56
59
  var(--spectrum-alias-border-size-thin)
57
- )/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){margin-left:calc(-1*var(
60
+ )*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){margin-left:calc(var(
58
61
  --spectrum-actionbutton-m-texticon-border-size,
59
62
  var(--spectrum-alias-border-size-thin)
60
- )/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-top-right-radius:var(
63
+ )*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-top-right-radius:var(
61
64
  --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
62
65
  )}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-top-left-radius:var(
63
66
  --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
@@ -65,31 +68,31 @@ var(--spectrum-alias-border-size-thin)
65
68
  --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
66
69
  )}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(
67
70
  --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
68
- )}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-left:calc(-1*var(
71
+ )}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-left:calc(var(
69
72
  --spectrum-actionbutton-m-texticon-border-size,
70
73
  var(--spectrum-alias-border-size-thin)
71
- )/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-right:calc(-1*var(
74
+ )*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-right:calc(var(
72
75
  --spectrum-actionbutton-m-texticon-border-size,
73
76
  var(--spectrum-alias-border-size-thin)
74
- )/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-right:0}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-left:0}:host([compact]:not([quiet])) ::slotted([selected]){z-index:1}:host([compact]:not([quiet])) ::slotted(:hover){z-index:2}:host([compact]:not([quiet])) ::slotted(.focus-visible){z-index:3}:host([compact]:not([quiet])) ::slotted(:focus-visible){z-index:3}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(-1*var(
77
+ )*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-right:0}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-left:0}:host([compact]:not([quiet])) ::slotted([selected]){z-index:1}:host([compact]:not([quiet])) ::slotted(:hover){z-index:2}:host([compact]:not([quiet])) ::slotted(.focus-visible){z-index:3}:host([compact]:not([quiet])) ::slotted(:focus-visible){z-index:3}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(var(
75
78
  --spectrum-actionbutton-m-texticon-border-size,
76
79
  var(--spectrum-alias-border-size-thin)
77
- )/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(-1*var(
80
+ )*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(var(
78
81
  --spectrum-actionbutton-m-texticon-border-size,
79
82
  var(--spectrum-alias-border-size-thin)
80
- )/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(-1*var(
83
+ )*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(var(
81
84
  --spectrum-actionbutton-m-texticon-border-size,
82
85
  var(--spectrum-alias-border-size-thin)
83
- )/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(-1*var(
86
+ )*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(var(
84
87
  --spectrum-actionbutton-m-texticon-border-size,
85
88
  var(--spectrum-alias-border-size-thin)
86
- )/2)}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:0}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-bottom:calc(-1*var(
89
+ )*-1/2)}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:0}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-bottom:calc(var(
87
90
  --spectrum-actionbutton-m-texticon-border-size,
88
91
  var(--spectrum-alias-border-size-thin)
89
- )/2);margin-top:calc(-1*var(
92
+ )*-1/2);margin-top:calc(var(
90
93
  --spectrum-actionbutton-m-texticon-border-size,
91
94
  var(--spectrum-alias-border-size-thin)
92
- )/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(
95
+ )*-1/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(
93
96
  --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
94
97
  )}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(
95
98
  --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
@@ -97,10 +100,10 @@ var(--spectrum-alias-border-size-thin)
97
100
  --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
98
101
  )}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(
99
102
  --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
100
- )}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){border-radius:0;margin-bottom:calc(-1*var(
103
+ )}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){border-radius:0;margin-bottom:calc(var(
101
104
  --spectrum-actionbutton-m-texticon-border-size,
102
105
  var(--spectrum-alias-border-size-thin)
103
- )/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(
106
+ )*-1/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(
104
107
  --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
105
108
  )}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(
106
109
  --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
@@ -108,10 +111,10 @@ var(--spectrum-alias-border-size-thin)
108
111
  --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
109
112
  )}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(
110
113
  --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
111
- )}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){border-radius:0;margin-bottom:0;margin-top:calc(-1*var(
114
+ )}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){border-radius:0;margin-bottom:0;margin-top:calc(var(
112
115
  --spectrum-actionbutton-m-texticon-border-size,
113
116
  var(--spectrum-alias-border-size-thin)
114
- )/2)}:host([justified]) ::slotted(*){flex:1}:host([dir][compact][vertical]) ::slotted(:nth-child(n)){margin-left:0;margin-right:0}:host([justified]) ::slotted(:not([role])),:host([vertical]) ::slotted(:not([role])){align-items:stretch;display:flex;flex-direction:column}:host([compact]:not([quiet])) ::slotted(:not([role])){--overriden-border-radius:0;--spectrum-actionbutton-s-quiet-textonly-border-radius:var(
117
+ )*-1/2)}:host([justified]) ::slotted(*){flex:1}:host([dir][compact][vertical]) ::slotted(:nth-child(n)){margin-left:0;margin-right:0}:host([justified]) ::slotted(:not([role])),:host([vertical]) ::slotted(:not([role])){align-items:stretch;display:flex;flex-direction:column}:host([compact]:not([quiet])) ::slotted(:not([role])){--overriden-border-radius:0;--spectrum-actionbutton-s-quiet-textonly-border-radius:var(
115
118
  --overriden-border-radius
116
119
  );--spectrum-actionbutton-s-textonly-border-radius:var(
117
120
  --overriden-border-radius