@spectrum-web-components/picker 0.42.2 → 0.42.4

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 (19) hide show
  1. package/package.json +17 -17
  2. package/src/Picker.dev.js +26 -26
  3. package/src/Picker.dev.js.map +2 -2
  4. package/src/Picker.js +8 -8
  5. package/src/Picker.js.map +3 -3
  6. package/src/picker.css.dev.js +1 -1
  7. package/src/picker.css.dev.js.map +1 -1
  8. package/src/picker.css.js +1 -1
  9. package/src/picker.css.js.map +1 -1
  10. package/src/spectrum-picker.css.dev.js +1 -1
  11. package/src/spectrum-picker.css.dev.js.map +1 -1
  12. package/src/spectrum-picker.css.js +1 -1
  13. package/src/spectrum-picker.css.js.map +1 -1
  14. package/stories/template.js +1 -2
  15. package/stories/template.js.map +1 -1
  16. package/test/index.js +156 -197
  17. package/test/index.js.map +2 -2
  18. package/test/picker-memory.test.js +5 -0
  19. package/test/picker-memory.test.js.map +7 -0
package/test/index.js CHANGED
@@ -34,7 +34,6 @@ import {
34
34
  import { M as pending } from "../stories/picker-pending.stories.js";
35
35
  import { sendMouse } from "../../../test/plugins/browser.js";
36
36
  import {
37
- detectOS,
38
37
  ignoreResizeObserverLoopError,
39
38
  fixture as styledFixture
40
39
  } from "../../../test/testing-helpers.js";
@@ -44,7 +43,6 @@ import "@spectrum-web-components/menu/sp-menu.js";
44
43
  import "@spectrum-web-components/menu/sp-menu-group.js";
45
44
  import "@spectrum-web-components/menu/sp-menu-item.js";
46
45
  import "@spectrum-web-components/theme/src/themes.js";
47
- import { isWebKit } from "@spectrum-web-components/shared";
48
46
  ignoreResizeObserverLoopError(before, after);
49
47
  const isMenuActiveElement = function(el) {
50
48
  var _a;
@@ -53,28 +51,22 @@ const isMenuActiveElement = function(el) {
53
51
  export function runPickerTests() {
54
52
  let el;
55
53
  const pickerFixture = async () => {
56
- const test = await fixture(
57
- html`
58
- <sp-theme scale="medium" color="light">
59
- <sp-field-label for="picker">
60
- Where do you live?
61
- </sp-field-label>
62
- <sp-picker
63
- id="picker"
64
- style="width: 200px; --spectrum-alias-ui-icon-chevron-size-100: 10px;"
65
- >
66
- <sp-menu-item>Deselect</sp-menu-item>
67
- <sp-menu-item value="option-2">
68
- Select Inverse
69
- </sp-menu-item>
70
- <sp-menu-item>Feather...</sp-menu-item>
71
- <sp-menu-item>Select and Mask...</sp-menu-item>
72
- <sp-menu-item>Save Selection</sp-menu-item>
73
- <sp-menu-item disabled>Make Work Path</sp-menu-item>
74
- </sp-picker>
75
- </sp-theme>
76
- `
77
- );
54
+ const test = await fixture(html`
55
+ <sp-theme scale="medium" color="light">
56
+ <sp-field-label for="picker">Where do you live?</sp-field-label>
57
+ <sp-picker
58
+ id="picker"
59
+ style="width: 200px; --spectrum-alias-ui-icon-chevron-size-100: 10px;"
60
+ >
61
+ <sp-menu-item>Deselect</sp-menu-item>
62
+ <sp-menu-item value="option-2">Select Inverse</sp-menu-item>
63
+ <sp-menu-item>Feather...</sp-menu-item>
64
+ <sp-menu-item>Select and Mask...</sp-menu-item>
65
+ <sp-menu-item>Save Selection</sp-menu-item>
66
+ <sp-menu-item disabled>Make Work Path</sp-menu-item>
67
+ </sp-picker>
68
+ </sp-theme>
69
+ `);
78
70
  return test.querySelector("sp-picker");
79
71
  };
80
72
  describe("accessibility model", () => {
@@ -158,33 +150,14 @@ export function runPickerTests() {
158
150
  await nextFrame();
159
151
  let snapshot = await a11ySnapshot({});
160
152
  let name = "Where do you live?";
161
- const isWebKitLinux = isWebKit() && detectOS() === "Linux";
162
153
  let node = findAccessibilityNode(
163
154
  snapshot,
164
- (node2) => node2.name === name || isWebKitLinux && node2.description === name
155
+ (node2) => node2.name === name
165
156
  );
166
157
  expect(
167
158
  node,
168
- `pre escape hatch node not available: ${JSON.stringify(
169
- snapshot,
170
- null,
171
- " "
172
- )}`
159
+ `node not available: ${JSON.stringify(snapshot, null, " ")}`
173
160
  ).to.not.be.null;
174
- if (isWebKitLinux) {
175
- const iOSNode = findAccessibilityNode(
176
- snapshot,
177
- (node2) => node2.name === name
178
- );
179
- expect(
180
- iOSNode,
181
- `post escape hatch node available: ${JSON.stringify(
182
- snapshot,
183
- null,
184
- " "
185
- )}`
186
- ).to.be.null;
187
- }
188
161
  el2.value = "option-2";
189
162
  await elementUpdated(el2);
190
163
  await nextFrame();
@@ -193,30 +166,12 @@ export function runPickerTests() {
193
166
  name = "Select Inverse Where do you live?";
194
167
  node = findAccessibilityNode(
195
168
  snapshot,
196
- (node2) => node2.name === name || isWebKitLinux && node2.description === name
169
+ (node2) => node2.name === name
197
170
  );
198
171
  expect(
199
172
  node,
200
- `pre escape hatch node not available: ${JSON.stringify(
201
- snapshot,
202
- null,
203
- " "
204
- )}`
173
+ `node not available: ${JSON.stringify(snapshot, null, " ")}`
205
174
  ).to.not.be.null;
206
- if (isWebKitLinux) {
207
- const iOSNode = findAccessibilityNode(
208
- snapshot,
209
- (node2) => node2.name === name
210
- );
211
- expect(
212
- iOSNode,
213
- `post escape hatch node available: ${JSON.stringify(
214
- snapshot,
215
- null,
216
- " "
217
- )}`
218
- ).to.not.be.null;
219
- }
220
175
  });
221
176
  });
222
177
  describe("standard", () => {
@@ -726,10 +681,13 @@ export function runPickerTests() {
726
681
  event.preventDefault();
727
682
  preventChangeSpy();
728
683
  });
684
+ const changed = oneEvent(el, "change");
729
685
  secondItem.click();
730
- await nextFrame();
731
- await nextFrame();
732
- expect(preventChangeSpy.calledOnce).to.be.true;
686
+ await changed;
687
+ expect(
688
+ preventChangeSpy.calledOnce,
689
+ preventChangeSpy.callCount.toString()
690
+ ).to.be.true;
733
691
  expect(secondItem.selected, "selection prevented").to.be.false;
734
692
  expect(el.open).to.be.true;
735
693
  });
@@ -1106,30 +1064,28 @@ export function runPickerTests() {
1106
1064
  });
1107
1065
  describe("grouped", async () => {
1108
1066
  const groupedFixture = async () => {
1109
- return fixture(
1110
- html`
1111
- <sp-picker
1112
- quiet
1113
- label="I would like to use Spectrum Web Components"
1114
- value="0"
1115
- >
1116
- <sp-menu-group>
1117
- <span slot="header">Timeline</span>
1118
- <sp-menu-item value="0" id="should-be-selected">
1119
- Immediately
1120
- </sp-menu-item>
1121
- <sp-menu-item value="1">
1122
- I'm already using them
1123
- </sp-menu-item>
1124
- <sp-menu-item value="2">Soon</sp-menu-item>
1125
- <sp-menu-item value="3">
1126
- As part of my next project
1127
- </sp-menu-item>
1128
- <sp-menu-item value="4">In the future</sp-menu-item>
1129
- </sp-menu-group>
1130
- </sp-picker>
1131
- `
1132
- );
1067
+ return fixture(html`
1068
+ <sp-picker
1069
+ quiet
1070
+ label="I would like to use Spectrum Web Components"
1071
+ value="0"
1072
+ >
1073
+ <sp-menu-group>
1074
+ <span slot="header">Timeline</span>
1075
+ <sp-menu-item value="0" id="should-be-selected">
1076
+ Immediately
1077
+ </sp-menu-item>
1078
+ <sp-menu-item value="1">
1079
+ I'm already using them
1080
+ </sp-menu-item>
1081
+ <sp-menu-item value="2">Soon</sp-menu-item>
1082
+ <sp-menu-item value="3">
1083
+ As part of my next project
1084
+ </sp-menu-item>
1085
+ <sp-menu-item value="4">In the future</sp-menu-item>
1086
+ </sp-menu-group>
1087
+ </sp-picker>
1088
+ `);
1133
1089
  };
1134
1090
  beforeEach(async () => {
1135
1091
  el = await groupedFixture();
@@ -1144,29 +1100,27 @@ export function runPickerTests() {
1144
1100
  });
1145
1101
  describe("slotted label", () => {
1146
1102
  const pickerFixture2 = async () => {
1147
- const test = await fixture(
1148
- html`
1149
- <div>
1150
- <sp-field-label for="picker-slotted">
1151
- Where do you live?
1152
- </sp-field-label>
1153
- <sp-picker id="picker-slotted">
1154
- <span slot="label">
1155
- Select a Country with a very long label, too
1156
- long in fact
1157
- </span>
1158
- <sp-menu-item>Deselect</sp-menu-item>
1159
- <sp-menu-item value="option-2">
1160
- Select Inverse
1161
- </sp-menu-item>
1162
- <sp-menu-item>Feather...</sp-menu-item>
1163
- <sp-menu-item>Select and Mask...</sp-menu-item>
1164
- <sp-menu-item>Save Selection</sp-menu-item>
1165
- <sp-menu-item disabled>Make Work Path</sp-menu-item>
1166
- </sp-picker>
1167
- </div>
1168
- `
1169
- );
1103
+ const test = await fixture(html`
1104
+ <div>
1105
+ <sp-field-label for="picker-slotted">
1106
+ Where do you live?
1107
+ </sp-field-label>
1108
+ <sp-picker id="picker-slotted">
1109
+ <span slot="label">
1110
+ Select a Country with a very long label, too long in
1111
+ fact
1112
+ </span>
1113
+ <sp-menu-item>Deselect</sp-menu-item>
1114
+ <sp-menu-item value="option-2">
1115
+ Select Inverse
1116
+ </sp-menu-item>
1117
+ <sp-menu-item>Feather...</sp-menu-item>
1118
+ <sp-menu-item>Select and Mask...</sp-menu-item>
1119
+ <sp-menu-item>Save Selection</sp-menu-item>
1120
+ <sp-menu-item disabled>Make Work Path</sp-menu-item>
1121
+ </sp-picker>
1122
+ </div>
1123
+ `);
1170
1124
  return test.querySelector("sp-picker");
1171
1125
  };
1172
1126
  beforeEach(async () => {
@@ -1204,35 +1158,49 @@ export function runPickerTests() {
1204
1158
  }
1205
1159
  });
1206
1160
  const pickerFixture2 = async () => {
1207
- const test = await fixture(
1208
- html`
1209
- <div>
1210
- <sp-field-label for="picker-deprecated">
1211
- Where do you live?
1212
- </sp-field-label>
1213
- <sp-picker
1214
- id="picker-deprecated"
1215
- label="Select a Country with a very long label, too long in fact"
1216
- >
1217
- <sp-menu>
1218
- <sp-menu-item>Deselect</sp-menu-item>
1219
- <sp-menu-item value="option-2">
1220
- Select Inverse
1221
- </sp-menu-item>
1222
- <sp-menu-item>Feather...</sp-menu-item>
1223
- <sp-menu-item>Select and Mask...</sp-menu-item>
1224
- <sp-menu-item>Save Selection</sp-menu-item>
1225
- <sp-menu-item disabled>
1226
- Make Work Path
1227
- </sp-menu-item>
1228
- </sp-menu>
1229
- </sp-picker>
1230
- </div>
1231
- `
1232
- );
1161
+ const test = await fixture(html`
1162
+ <div>
1163
+ <sp-field-label for="picker-deprecated">
1164
+ Where do you live?
1165
+ </sp-field-label>
1166
+ <sp-picker
1167
+ id="picker-deprecated"
1168
+ label="Select a Country with a very long label, too long in fact"
1169
+ >
1170
+ <sp-menu>
1171
+ <sp-menu-item>Deselect</sp-menu-item>
1172
+ <sp-menu-item value="option-2">
1173
+ Select Inverse
1174
+ </sp-menu-item>
1175
+ <sp-menu-item>Feather...</sp-menu-item>
1176
+ <sp-menu-item>Select and Mask...</sp-menu-item>
1177
+ <sp-menu-item>Save Selection</sp-menu-item>
1178
+ <sp-menu-item disabled>Make Work Path</sp-menu-item>
1179
+ </sp-menu>
1180
+ </sp-picker>
1181
+ </div>
1182
+ `);
1233
1183
  return test.querySelector("sp-picker");
1234
1184
  };
1235
- it("warns in Dev Mode when accessible attributes are not leveraged", async () => {
1185
+ it("does not warn in Dev Mode when accessible elements leveraged", async () => {
1186
+ const test = await fixture(html`
1187
+ <div>
1188
+ <sp-field-label for="test">Test label</sp-field-label>
1189
+ <sp-picker id="test">
1190
+ <sp-menu-item>Feather...</sp-menu-item>
1191
+ <sp-menu-item>Select and Mask...</sp-menu-item>
1192
+ <sp-menu-item>Save Selection</sp-menu-item>
1193
+ </sp-picker>
1194
+ </div>
1195
+ `);
1196
+ el = test.querySelector("sp-picker");
1197
+ await elementUpdated(el);
1198
+ await nextFrame();
1199
+ await nextFrame();
1200
+ expect(consoleWarnStub.called).to.be.false;
1201
+ });
1202
+ it("warns in Dev Mode when accessible attributes are not leveraged", async function() {
1203
+ this.retries(0);
1236
1204
  el = await fixture(html`
1237
1205
  <sp-picker>
1238
1206
  <sp-menu-item>Feather...</sp-menu-item>
@@ -1241,6 +1209,8 @@ export function runPickerTests() {
1241
1209
  </sp-picker>
1242
1210
  `);
1243
1211
  await elementUpdated(el);
1212
+ await nextFrame();
1213
+ await nextFrame();
1244
1214
  expect(consoleWarnStub.called).to.be.true;
1245
1215
  const spyCall = consoleWarnStub.getCall(0);
1246
1216
  expect(
@@ -1385,21 +1355,19 @@ export function runPickerTests() {
1385
1355
  });
1386
1356
  it("displays selected item text by default", async () => {
1387
1357
  var _a, _b, _c, _d, _e;
1388
- const el2 = await fixture(
1389
- html`
1390
- <sp-picker
1391
- value="inverse"
1392
- label="Select a Country with a very long label, too long in fact"
1393
- >
1394
- <sp-menu-item value="deselect">Deselect Text</sp-menu-item>
1395
- <sp-menu-item value="inverse">Select Inverse</sp-menu-item>
1396
- <sp-menu-item>Feather...</sp-menu-item>
1397
- <sp-menu-item>Select and Mask...</sp-menu-item>
1398
- <sp-menu-item>Save Selection</sp-menu-item>
1399
- <sp-menu-item disabled>Make Work Path</sp-menu-item>
1400
- </sp-picker>
1401
- `
1402
- );
1358
+ const el2 = await fixture(html`
1359
+ <sp-picker
1360
+ value="inverse"
1361
+ label="Select a Country with a very long label, too long in fact"
1362
+ >
1363
+ <sp-menu-item value="deselect">Deselect Text</sp-menu-item>
1364
+ <sp-menu-item value="inverse">Select Inverse</sp-menu-item>
1365
+ <sp-menu-item>Feather...</sp-menu-item>
1366
+ <sp-menu-item>Select and Mask...</sp-menu-item>
1367
+ <sp-menu-item>Save Selection</sp-menu-item>
1368
+ <sp-menu-item disabled>Make Work Path</sp-menu-item>
1369
+ </sp-picker>
1370
+ `);
1403
1371
  await nextFrame();
1404
1372
  await elementUpdated(el2);
1405
1373
  await waitUntil(
@@ -1444,21 +1412,19 @@ export function runPickerTests() {
1444
1412
  });
1445
1413
  it("resets value when item not available", async () => {
1446
1414
  var _a;
1447
- const el2 = await fixture(
1448
- html`
1449
- <sp-picker
1450
- value="missing"
1451
- label="Select a Country with a very long label, too long in fact"
1452
- >
1453
- <sp-menu-item value="deselect">Deselect Text</sp-menu-item>
1454
- <sp-menu-item value="inverse">Select Inverse</sp-menu-item>
1455
- <sp-menu-item>Feather...</sp-menu-item>
1456
- <sp-menu-item>Select and Mask...</sp-menu-item>
1457
- <sp-menu-item>Save Selection</sp-menu-item>
1458
- <sp-menu-item disabled>Make Work Path</sp-menu-item>
1459
- </sp-picker>
1460
- `
1461
- );
1415
+ const el2 = await fixture(html`
1416
+ <sp-picker
1417
+ value="missing"
1418
+ label="Select a Country with a very long label, too long in fact"
1419
+ >
1420
+ <sp-menu-item value="deselect">Deselect Text</sp-menu-item>
1421
+ <sp-menu-item value="inverse">Select Inverse</sp-menu-item>
1422
+ <sp-menu-item>Feather...</sp-menu-item>
1423
+ <sp-menu-item>Select and Mask...</sp-menu-item>
1424
+ <sp-menu-item>Save Selection</sp-menu-item>
1425
+ <sp-menu-item disabled>Make Work Path</sp-menu-item>
1426
+ </sp-picker>
1427
+ `);
1462
1428
  await elementUpdated(el2);
1463
1429
  await waitUntil(() => el2.value === "");
1464
1430
  expect(el2.value).to.equal("");
@@ -1467,20 +1433,15 @@ export function runPickerTests() {
1467
1433
  it("allows event listeners on child items", async () => {
1468
1434
  const mouseenterSpy = spy();
1469
1435
  const handleMouseenter = () => mouseenterSpy();
1470
- const el2 = await fixture(
1471
- html`
1472
- <sp-picker
1473
- label="Select a Country with a very long label, too long in fact"
1474
- >
1475
- <sp-menu-item
1476
- value="deselect"
1477
- @mouseenter=${handleMouseenter}
1478
- >
1479
- Deselect Text
1480
- </sp-menu-item>
1481
- </sp-picker>
1482
- `
1483
- );
1436
+ const el2 = await fixture(html`
1437
+ <sp-picker
1438
+ label="Select a Country with a very long label, too long in fact"
1439
+ >
1440
+ <sp-menu-item value="deselect" @mouseenter=${handleMouseenter}>
1441
+ Deselect Text
1442
+ </sp-menu-item>
1443
+ </sp-picker>
1444
+ `);
1484
1445
  await elementUpdated(el2);
1485
1446
  const hoverEl = el2.querySelector("sp-menu-item");
1486
1447
  const opened = oneEvent(el2, "sp-opened");
@@ -1503,17 +1464,15 @@ export function runPickerTests() {
1503
1464
  const closedSpy = spy();
1504
1465
  const handleOpenedSpy = (event) => openedSpy(event);
1505
1466
  const handleClosedSpy = (event) => closedSpy(event);
1506
- const el2 = await fixture(
1507
- html`
1508
- <sp-picker
1509
- label="Select a Country with a very long label, too long in fact"
1510
- @sp-opened=${handleOpenedSpy}
1511
- @sp-closed=${handleClosedSpy}
1512
- >
1513
- <sp-menu-item value="deselect">Deselect Text</sp-menu-item>
1514
- </sp-picker>
1515
- `
1516
- );
1467
+ const el2 = await fixture(html`
1468
+ <sp-picker
1469
+ label="Select a Country with a very long label, too long in fact"
1470
+ @sp-opened=${handleOpenedSpy}
1471
+ @sp-closed=${handleClosedSpy}
1472
+ >
1473
+ <sp-menu-item value="deselect">Deselect Text</sp-menu-item>
1474
+ </sp-picker>
1475
+ `);
1517
1476
  await elementUpdated(el2);
1518
1477
  const opened = oneEvent(el2, "sp-opened");
1519
1478
  el2.open = true;