@crowdstrike/glide-core 0.13.1 → 0.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (284) hide show
  1. package/dist/drawer.d.ts +2 -2
  2. package/dist/drawer.js +1 -1
  3. package/dist/drawer.styles.js +3 -3
  4. package/dist/dropdown.styles.js +3 -2
  5. package/dist/input.styles.js +1 -0
  6. package/dist/styles/variables.css +1 -1
  7. package/dist/textarea.styles.js +2 -0
  8. package/dist/toasts.d.ts +2 -2
  9. package/dist/toasts.toast.d.ts +1 -1
  10. package/dist/toasts.toast.js +1 -1
  11. package/dist/toasts.toast.styles.js +8 -0
  12. package/dist/tree.item.styles.js +2 -2
  13. package/package.json +8 -5
  14. package/dist/accordion.stories.d.ts +0 -6
  15. package/dist/accordion.test.basics.d.ts +0 -1
  16. package/dist/accordion.test.basics.js +0 -28
  17. package/dist/accordion.test.events.d.ts +0 -1
  18. package/dist/accordion.test.events.js +0 -28
  19. package/dist/accordion.test.focus.d.ts +0 -1
  20. package/dist/accordion.test.focus.js +0 -11
  21. package/dist/accordion.test.interactions.d.ts +0 -1
  22. package/dist/accordion.test.interactions.js +0 -75
  23. package/dist/button-group.button.test.basics.d.ts +0 -1
  24. package/dist/button-group.button.test.basics.js +0 -97
  25. package/dist/button-group.button.test.events.d.ts +0 -1
  26. package/dist/button-group.button.test.events.js +0 -15
  27. package/dist/button-group.button.test.focus.d.ts +0 -1
  28. package/dist/button-group.button.test.focus.js +0 -13
  29. package/dist/button-group.button.test.interactions.d.ts +0 -1
  30. package/dist/button-group.button.test.interactions.js +0 -42
  31. package/dist/button-group.stories.d.ts +0 -7
  32. package/dist/button-group.test.basics.d.ts +0 -1
  33. package/dist/button-group.test.basics.js +0 -148
  34. package/dist/button-group.test.events.d.ts +0 -1
  35. package/dist/button-group.test.events.js +0 -241
  36. package/dist/button-group.test.focus.d.ts +0 -1
  37. package/dist/button-group.test.focus.js +0 -39
  38. package/dist/button-group.test.interactions.d.ts +0 -1
  39. package/dist/button-group.test.interactions.js +0 -91
  40. package/dist/button.stories.d.ts +0 -7
  41. package/dist/button.test.basics.d.ts +0 -1
  42. package/dist/button.test.basics.js +0 -69
  43. package/dist/button.test.events.d.ts +0 -1
  44. package/dist/button.test.events.js +0 -102
  45. package/dist/checkbox-group.stories.d.ts +0 -6
  46. package/dist/checkbox-group.test.basics.d.ts +0 -1
  47. package/dist/checkbox-group.test.basics.js +0 -116
  48. package/dist/checkbox-group.test.events.d.ts +0 -1
  49. package/dist/checkbox-group.test.events.js +0 -111
  50. package/dist/checkbox-group.test.focus.d.ts +0 -1
  51. package/dist/checkbox-group.test.focus.js +0 -70
  52. package/dist/checkbox-group.test.form.d.ts +0 -1
  53. package/dist/checkbox-group.test.form.js +0 -131
  54. package/dist/checkbox-group.test.interactions.d.ts +0 -1
  55. package/dist/checkbox-group.test.interactions.js +0 -82
  56. package/dist/checkbox-group.test.validity.d.ts +0 -1
  57. package/dist/checkbox-group.test.validity.js +0 -145
  58. package/dist/checkbox.stories.d.ts +0 -5
  59. package/dist/checkbox.test.basics.d.ts +0 -1
  60. package/dist/checkbox.test.basics.js +0 -90
  61. package/dist/checkbox.test.events.d.ts +0 -1
  62. package/dist/checkbox.test.events.js +0 -105
  63. package/dist/checkbox.test.focus.d.ts +0 -1
  64. package/dist/checkbox.test.focus.js +0 -51
  65. package/dist/checkbox.test.form.d.ts +0 -1
  66. package/dist/checkbox.test.form.js +0 -133
  67. package/dist/checkbox.test.interactions.d.ts +0 -1
  68. package/dist/checkbox.test.interactions.js +0 -131
  69. package/dist/checkbox.test.validity.d.ts +0 -1
  70. package/dist/checkbox.test.validity.js +0 -128
  71. package/dist/drawer.stories.d.ts +0 -6
  72. package/dist/drawer.test.accessibility.d.ts +0 -1
  73. package/dist/drawer.test.accessibility.js +0 -22
  74. package/dist/drawer.test.basics.d.ts +0 -1
  75. package/dist/drawer.test.basics.js +0 -44
  76. package/dist/drawer.test.closing.d.ts +0 -1
  77. package/dist/drawer.test.closing.js +0 -40
  78. package/dist/drawer.test.events.d.ts +0 -1
  79. package/dist/drawer.test.events.js +0 -42
  80. package/dist/drawer.test.methods.d.ts +0 -1
  81. package/dist/drawer.test.methods.js +0 -35
  82. package/dist/dropdown.option.test.basics.d.ts +0 -1
  83. package/dist/dropdown.option.test.basics.js +0 -34
  84. package/dist/dropdown.option.test.basics.multiple.d.ts +0 -1
  85. package/dist/dropdown.option.test.basics.multiple.js +0 -36
  86. package/dist/dropdown.option.test.basics.single.d.ts +0 -1
  87. package/dist/dropdown.option.test.basics.single.js +0 -29
  88. package/dist/dropdown.option.test.events.d.ts +0 -1
  89. package/dist/dropdown.option.test.events.js +0 -36
  90. package/dist/dropdown.option.test.focus.d.ts +0 -1
  91. package/dist/dropdown.option.test.focus.js +0 -11
  92. package/dist/dropdown.option.test.interactions.multiple.d.ts +0 -1
  93. package/dist/dropdown.option.test.interactions.multiple.js +0 -42
  94. package/dist/dropdown.option.test.interactions.single.d.ts +0 -1
  95. package/dist/dropdown.option.test.interactions.single.js +0 -76
  96. package/dist/dropdown.stories.d.ts +0 -8
  97. package/dist/dropdown.test.basics.d.ts +0 -1
  98. package/dist/dropdown.test.basics.filterable.d.ts +0 -1
  99. package/dist/dropdown.test.basics.filterable.js +0 -108
  100. package/dist/dropdown.test.basics.js +0 -181
  101. package/dist/dropdown.test.basics.multiple.d.ts +0 -1
  102. package/dist/dropdown.test.basics.multiple.js +0 -259
  103. package/dist/dropdown.test.basics.single.d.ts +0 -1
  104. package/dist/dropdown.test.basics.single.js +0 -122
  105. package/dist/dropdown.test.events.d.ts +0 -1
  106. package/dist/dropdown.test.events.filterable.d.ts +0 -1
  107. package/dist/dropdown.test.events.filterable.js +0 -31
  108. package/dist/dropdown.test.events.js +0 -251
  109. package/dist/dropdown.test.events.multiple.d.ts +0 -1
  110. package/dist/dropdown.test.events.multiple.js +0 -446
  111. package/dist/dropdown.test.events.single.d.ts +0 -1
  112. package/dist/dropdown.test.events.single.js +0 -343
  113. package/dist/dropdown.test.focus.d.ts +0 -1
  114. package/dist/dropdown.test.focus.filterable.d.ts +0 -1
  115. package/dist/dropdown.test.focus.filterable.js +0 -140
  116. package/dist/dropdown.test.focus.js +0 -107
  117. package/dist/dropdown.test.focus.multiple.d.ts +0 -1
  118. package/dist/dropdown.test.focus.multiple.js +0 -170
  119. package/dist/dropdown.test.focus.single.d.ts +0 -1
  120. package/dist/dropdown.test.focus.single.js +0 -42
  121. package/dist/dropdown.test.form.d.ts +0 -1
  122. package/dist/dropdown.test.form.js +0 -74
  123. package/dist/dropdown.test.form.multiple.d.ts +0 -1
  124. package/dist/dropdown.test.form.multiple.js +0 -151
  125. package/dist/dropdown.test.form.single.d.ts +0 -1
  126. package/dist/dropdown.test.form.single.js +0 -129
  127. package/dist/dropdown.test.interactions.d.ts +0 -1
  128. package/dist/dropdown.test.interactions.filterable.d.ts +0 -1
  129. package/dist/dropdown.test.interactions.filterable.js +0 -805
  130. package/dist/dropdown.test.interactions.js +0 -696
  131. package/dist/dropdown.test.interactions.multiple.d.ts +0 -1
  132. package/dist/dropdown.test.interactions.multiple.js +0 -1026
  133. package/dist/dropdown.test.interactions.single.d.ts +0 -1
  134. package/dist/dropdown.test.interactions.single.js +0 -569
  135. package/dist/dropdown.test.validity.d.ts +0 -1
  136. package/dist/dropdown.test.validity.js +0 -181
  137. package/dist/form-controls-layout.stories.d.ts +0 -10
  138. package/dist/form-controls-layout.test.basics.d.ts +0 -2
  139. package/dist/form-controls-layout.test.basics.js +0 -75
  140. package/dist/form-controls-layout.test.interactions.d.ts +0 -2
  141. package/dist/form-controls-layout.test.interactions.js +0 -26
  142. package/dist/icon-button.stories.d.ts +0 -6
  143. package/dist/icon-button.test.basics.d.ts +0 -1
  144. package/dist/icon-button.test.basics.js +0 -43
  145. package/dist/icon-button.test.focus.d.ts +0 -1
  146. package/dist/icon-button.test.focus.js +0 -13
  147. package/dist/input.stories.d.ts +0 -8
  148. package/dist/input.test.basics.d.ts +0 -1
  149. package/dist/input.test.basics.js +0 -138
  150. package/dist/input.test.events.d.ts +0 -1
  151. package/dist/input.test.events.js +0 -98
  152. package/dist/input.test.focus.d.ts +0 -1
  153. package/dist/input.test.focus.js +0 -58
  154. package/dist/input.test.form.d.ts +0 -1
  155. package/dist/input.test.form.js +0 -74
  156. package/dist/input.test.validity.d.ts +0 -1
  157. package/dist/input.test.validity.js +0 -258
  158. package/dist/label.test.basics.d.ts +0 -1
  159. package/dist/label.test.basics.js +0 -136
  160. package/dist/menu.button.test.basics.d.ts +0 -1
  161. package/dist/menu.button.test.basics.js +0 -43
  162. package/dist/menu.link.test.basics.d.ts +0 -1
  163. package/dist/menu.link.test.basics.js +0 -47
  164. package/dist/menu.options.test.basics.d.ts +0 -2
  165. package/dist/menu.options.test.basics.js +0 -44
  166. package/dist/menu.options.test.events.d.ts +0 -1
  167. package/dist/menu.options.test.events.js +0 -19
  168. package/dist/menu.stories.d.ts +0 -11
  169. package/dist/menu.test.basics.d.ts +0 -1
  170. package/dist/menu.test.basics.js +0 -178
  171. package/dist/menu.test.events.d.ts +0 -3
  172. package/dist/menu.test.events.js +0 -125
  173. package/dist/menu.test.focus.d.ts +0 -2
  174. package/dist/menu.test.focus.js +0 -102
  175. package/dist/menu.test.interactions.d.ts +0 -3
  176. package/dist/menu.test.interactions.js +0 -1069
  177. package/dist/modal.icon-button.test.basics.d.ts +0 -1
  178. package/dist/modal.icon-button.test.basics.js +0 -46
  179. package/dist/modal.stories.d.ts +0 -13
  180. package/dist/modal.tertiary-icon.test.basics.d.ts +0 -1
  181. package/dist/modal.tertiary-icon.test.basics.js +0 -60
  182. package/dist/modal.test.accessibility.d.ts +0 -1
  183. package/dist/modal.test.accessibility.js +0 -38
  184. package/dist/modal.test.basics.d.ts +0 -3
  185. package/dist/modal.test.basics.js +0 -204
  186. package/dist/modal.test.close.d.ts +0 -1
  187. package/dist/modal.test.close.js +0 -35
  188. package/dist/modal.test.events.d.ts +0 -1
  189. package/dist/modal.test.events.js +0 -99
  190. package/dist/modal.test.lock-scroll.d.ts +0 -1
  191. package/dist/modal.test.lock-scroll.js +0 -67
  192. package/dist/modal.test.methods.d.ts +0 -1
  193. package/dist/modal.test.methods.js +0 -20
  194. package/dist/modal.test.scrollbars.d.ts +0 -1
  195. package/dist/modal.test.scrollbars.js +0 -18
  196. package/dist/radio-group.stories.d.ts +0 -6
  197. package/dist/radio-group.test.basics.d.ts +0 -2
  198. package/dist/radio-group.test.basics.js +0 -324
  199. package/dist/radio-group.test.events.d.ts +0 -2
  200. package/dist/radio-group.test.events.js +0 -278
  201. package/dist/radio-group.test.focus.d.ts +0 -2
  202. package/dist/radio-group.test.focus.js +0 -95
  203. package/dist/radio-group.test.form.d.ts +0 -1
  204. package/dist/radio-group.test.form.js +0 -124
  205. package/dist/radio-group.test.validity.d.ts +0 -1
  206. package/dist/radio-group.test.validity.js +0 -311
  207. package/dist/split-button.primary-button.test.basics.d.ts +0 -1
  208. package/dist/split-button.primary-button.test.basics.js +0 -31
  209. package/dist/split-button.primary-button.test.focus.d.ts +0 -1
  210. package/dist/split-button.primary-button.test.focus.js +0 -14
  211. package/dist/split-button.primary-link.test.basics.d.ts +0 -1
  212. package/dist/split-button.primary-link.test.basics.js +0 -30
  213. package/dist/split-button.primary-link.test.focus.d.ts +0 -1
  214. package/dist/split-button.primary-link.test.focus.js +0 -15
  215. package/dist/split-button.secondary-button.test.basics.d.ts +0 -1
  216. package/dist/split-button.secondary-button.test.basics.js +0 -58
  217. package/dist/split-button.secondary-button.test.focus.d.ts +0 -1
  218. package/dist/split-button.secondary-button.test.focus.js +0 -14
  219. package/dist/split-button.secondary-button.test.interactions.d.ts +0 -2
  220. package/dist/split-button.secondary-button.test.interactions.js +0 -30
  221. package/dist/split-button.stories.d.ts +0 -13
  222. package/dist/split-button.test.basics.d.ts +0 -2
  223. package/dist/split-button.test.basics.js +0 -87
  224. package/dist/split-button.test.interactions.d.ts +0 -4
  225. package/dist/split-button.test.interactions.js +0 -51
  226. package/dist/tab.group.test.basics.d.ts +0 -3
  227. package/dist/tab.group.test.basics.js +0 -234
  228. package/dist/tab.group.test.interactions.d.ts +0 -3
  229. package/dist/tab.group.test.interactions.js +0 -434
  230. package/dist/tab.test.basics.d.ts +0 -1
  231. package/dist/tab.test.basics.js +0 -50
  232. package/dist/tabs.stories.d.ts +0 -8
  233. package/dist/tag.stories.d.ts +0 -7
  234. package/dist/tag.test.basics.d.ts +0 -1
  235. package/dist/tag.test.basics.js +0 -28
  236. package/dist/tag.test.events.d.ts +0 -1
  237. package/dist/tag.test.events.js +0 -93
  238. package/dist/tag.test.focus.d.ts +0 -1
  239. package/dist/tag.test.focus.js +0 -10
  240. package/dist/tag.test.interactions.d.ts +0 -1
  241. package/dist/tag.test.interactions.js +0 -36
  242. package/dist/textarea.stories.d.ts +0 -5
  243. package/dist/textarea.test.basics.d.ts +0 -1
  244. package/dist/textarea.test.basics.js +0 -177
  245. package/dist/textarea.test.events.d.ts +0 -1
  246. package/dist/textarea.test.events.js +0 -106
  247. package/dist/textarea.test.form.d.ts +0 -1
  248. package/dist/textarea.test.form.js +0 -71
  249. package/dist/textarea.test.validity.d.ts +0 -1
  250. package/dist/textarea.test.validity.js +0 -204
  251. package/dist/toasts.stories.d.ts +0 -7
  252. package/dist/toasts.test.basics.d.ts +0 -1
  253. package/dist/toasts.test.basics.js +0 -115
  254. package/dist/toasts.toast.test.basics.d.ts +0 -1
  255. package/dist/toasts.toast.test.basics.js +0 -139
  256. package/dist/toggle.stories.d.ts +0 -4
  257. package/dist/toggle.test.basics.d.ts +0 -1
  258. package/dist/toggle.test.basics.js +0 -69
  259. package/dist/toggle.test.events.d.ts +0 -1
  260. package/dist/toggle.test.events.js +0 -30
  261. package/dist/toggle.test.focus.d.ts +0 -1
  262. package/dist/toggle.test.focus.js +0 -9
  263. package/dist/toggle.test.interactions.d.ts +0 -1
  264. package/dist/toggle.test.interactions.js +0 -81
  265. package/dist/tooltip.stories.d.ts +0 -7
  266. package/dist/tooltip.test.basics.d.ts +0 -1
  267. package/dist/tooltip.test.basics.js +0 -100
  268. package/dist/tooltip.test.interactions.d.ts +0 -1
  269. package/dist/tooltip.test.interactions.js +0 -203
  270. package/dist/tree.item.icon-button.test.basics.d.ts +0 -1
  271. package/dist/tree.item.icon-button.test.basics.js +0 -22
  272. package/dist/tree.item.menu.test.basics.d.ts +0 -1
  273. package/dist/tree.item.menu.test.basics.js +0 -86
  274. package/dist/tree.item.test.basics.d.ts +0 -2
  275. package/dist/tree.item.test.basics.js +0 -138
  276. package/dist/tree.stories.d.ts +0 -9
  277. package/dist/tree.test.aria.d.ts +0 -1
  278. package/dist/tree.test.aria.js +0 -86
  279. package/dist/tree.test.basics.d.ts +0 -3
  280. package/dist/tree.test.basics.js +0 -130
  281. package/dist/tree.test.events.d.ts +0 -2
  282. package/dist/tree.test.events.js +0 -19
  283. package/dist/tree.test.focus.d.ts +0 -1
  284. package/dist/tree.test.focus.js +0 -383
@@ -1,343 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import './dropdown.option.js';
3
- import * as sinon from 'sinon';
4
- import { aTimeout, expect, fixture, html, oneEvent } from '@open-wc/testing';
5
- import { sendKeys } from '@web/test-runner-commands';
6
- import GlideCoreDropdown from './dropdown.js';
7
- GlideCoreDropdown.shadowRootOptions.mode = 'open';
8
- it('dispatches one "change" event when an option is selected via click', async () => {
9
- const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
10
- <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
11
-
12
- <glide-core-dropdown-option
13
- label="Two"
14
- selected
15
- ></glide-core-dropdown-option>
16
- </glide-core-dropdown>`);
17
- const spy = sinon.spy();
18
- component.addEventListener('change', spy);
19
- setTimeout(() => {
20
- component.querySelector('glide-core-dropdown-option')?.click();
21
- });
22
- const event = await oneEvent(component, 'change');
23
- expect(event instanceof Event).to.be.true;
24
- expect(event.bubbles).to.be.true;
25
- expect(spy.callCount).to.equal(1);
26
- });
27
- it('dispatches one "change" event when an option is selected via Enter', async () => {
28
- const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
29
- <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
30
-
31
- <glide-core-dropdown-option
32
- label="Two"
33
- selected
34
- ></glide-core-dropdown-option>
35
- </glide-core-dropdown>`);
36
- const spy = sinon.spy();
37
- component.addEventListener('change', spy);
38
- // Activate the first option before selecting it. The second option is
39
- // currently active because it's selected.
40
- component
41
- .querySelector('glide-core-dropdown-option')
42
- ?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
43
- component.focus();
44
- sendKeys({ press: 'Enter' });
45
- const event = await oneEvent(component, 'change');
46
- expect(event instanceof Event).to.be.true;
47
- expect(event.bubbles).to.be.true;
48
- expect(spy.callCount).to.equal(1);
49
- });
50
- it('dispatches one "change" event when an option is selected via Space', async () => {
51
- const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
52
- <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
53
-
54
- <glide-core-dropdown-option
55
- label="Two"
56
- selected
57
- ></glide-core-dropdown-option>
58
- </glide-core-dropdown>`);
59
- const spy = sinon.spy();
60
- component.addEventListener('change', spy);
61
- // Activate the first option before selecting it. The second option is
62
- // currently active because it's selected.
63
- component
64
- .querySelector('glide-core-dropdown-option')
65
- ?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
66
- component.focus();
67
- sendKeys({ press: ' ' });
68
- const event = await oneEvent(component, 'change');
69
- expect(event instanceof Event).to.be.true;
70
- expect(event.bubbles).to.be.true;
71
- expect(spy.callCount).to.equal(1);
72
- });
73
- it('dispatches an "edit" event on click', async () => {
74
- const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
75
- <glide-core-dropdown-option
76
- label="Label"
77
- editable
78
- selected
79
- ></glide-core-dropdown-option>
80
- </glide-core-dropdown>`);
81
- setTimeout(() => {
82
- component?.shadowRoot
83
- ?.querySelector('[data-test="edit-button"]')
84
- ?.click();
85
- });
86
- const event = await oneEvent(component, 'edit');
87
- const option = component.querySelector('glide-core-dropdown-option');
88
- expect(event instanceof Event).to.be.true;
89
- expect(event.bubbles).to.be.true;
90
- expect(event.composed).to.be.true;
91
- expect(event.target).to.equal(option);
92
- });
93
- it('dispatches an "edit" event on Enter', async () => {
94
- const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
95
- <glide-core-dropdown-option
96
- label="Label"
97
- editable
98
- selected
99
- ></glide-core-dropdown-option>
100
- </glide-core-dropdown>`);
101
- component?.shadowRoot
102
- ?.querySelector('[data-test="edit-button"]')
103
- ?.focus();
104
- sendKeys({ press: 'Enter' });
105
- const event = await oneEvent(component, 'edit');
106
- const option = component.querySelector('glide-core-dropdown-option');
107
- expect(event instanceof Event).to.be.true;
108
- expect(event.bubbles).to.be.true;
109
- expect(event.composed).to.be.true;
110
- expect(event.target).to.equal(option);
111
- });
112
- it('dispatches an "edit" event on Space', async () => {
113
- const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
114
- <glide-core-dropdown-option
115
- label="Label"
116
- editable
117
- selected
118
- ></glide-core-dropdown-option>
119
- </glide-core-dropdown>`);
120
- component?.shadowRoot
121
- ?.querySelector('[data-test="edit-button"]')
122
- ?.focus();
123
- sendKeys({ press: ' ' });
124
- const event = await oneEvent(component, 'edit');
125
- const option = component.querySelector('glide-core-dropdown-option');
126
- expect(event instanceof Event).to.be.true;
127
- expect(event.bubbles).to.be.true;
128
- expect(event.target).to.equal(option);
129
- });
130
- it('does not dispatch an "edit" event when `disabled`', async () => {
131
- const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" disabled>
132
- <glide-core-dropdown-option
133
- label="Label"
134
- editable
135
- selected
136
- ></glide-core-dropdown-option>
137
- </glide-core-dropdown>`);
138
- const spy = sinon.spy();
139
- component.addEventListener('edit', spy);
140
- component?.shadowRoot
141
- ?.querySelector('[data-test="edit-button"]')
142
- ?.click();
143
- expect(spy.callCount).to.equal(0);
144
- });
145
- it('does not dispatch an "edit" event when `readonly`', async () => {
146
- const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" readonly>
147
- <glide-core-dropdown-option
148
- label="Label"
149
- editable
150
- selected
151
- ></glide-core-dropdown-option>
152
- </glide-core-dropdown>`);
153
- const spy = sinon.spy();
154
- component.addEventListener('edit', spy);
155
- component?.shadowRoot
156
- ?.querySelector('[data-test="edit-button"]')
157
- ?.click();
158
- expect(spy.callCount).to.equal(0);
159
- });
160
- it('dispatches one "input" event when an option is selected via click', async () => {
161
- const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
162
- <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
163
-
164
- <glide-core-dropdown-option
165
- label="Two"
166
- selected
167
- ></glide-core-dropdown-option>
168
- </glide-core-dropdown>`);
169
- const spy = sinon.spy();
170
- component.addEventListener('input', spy);
171
- setTimeout(() => {
172
- component.querySelector('glide-core-dropdown-option')?.click();
173
- });
174
- const event = await oneEvent(component, 'input');
175
- expect(event instanceof Event).to.be.true;
176
- expect(event.bubbles).to.be.true;
177
- expect(spy.callCount).to.equal(1);
178
- });
179
- it('dispatches one "input" event when an option is selected via Enter', async () => {
180
- const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
181
- <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
182
-
183
- <glide-core-dropdown-option
184
- label="Two"
185
- selected
186
- ></glide-core-dropdown-option>
187
- </glide-core-dropdown>`);
188
- const spy = sinon.spy();
189
- component.addEventListener('input', spy);
190
- // Activate the first option before selecting it. The second option is
191
- // currently active because it's selected.
192
- component
193
- .querySelector('glide-core-dropdown-option')
194
- ?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
195
- component.focus();
196
- sendKeys({ press: 'Enter' });
197
- const event = await oneEvent(component, 'input');
198
- expect(event instanceof Event).to.be.true;
199
- expect(event.bubbles).to.be.true;
200
- expect(spy.callCount).to.equal(1);
201
- });
202
- it('dispatches one "input" event when an option is selected via Space', async () => {
203
- const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
204
- <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
205
-
206
- <glide-core-dropdown-option
207
- label="Two"
208
- selected
209
- ></glide-core-dropdown-option>
210
- </glide-core-dropdown>`);
211
- const spy = sinon.spy();
212
- component.addEventListener('input', spy);
213
- // Activate the first option before selecting it. The second option is
214
- // currently active because it's selected.
215
- component
216
- .querySelector('glide-core-dropdown-option')
217
- ?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
218
- component.focus();
219
- sendKeys({ press: ' ' });
220
- const event = await oneEvent(component, 'input');
221
- expect(event instanceof Event).to.be.true;
222
- expect(event.bubbles).to.be.true;
223
- expect(spy.callCount).to.equal(1);
224
- });
225
- it('does not dispatch a "change" event when an already selected option is clicked', async () => {
226
- const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
227
- <glide-core-dropdown-option
228
- label="One"
229
- selected
230
- ></glide-core-dropdown-option>
231
-
232
- <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
233
- </glide-core-dropdown>`);
234
- // Wait for it to open.
235
- await aTimeout(0);
236
- const spy = sinon.spy();
237
- component.addEventListener('change', spy);
238
- setTimeout(() => {
239
- component.querySelector('glide-core-dropdown-option')?.click();
240
- });
241
- await aTimeout(0);
242
- expect(spy.callCount).to.equal(0);
243
- });
244
- it('does not dispatch a "change" event when `value` is changed programmatically', async () => {
245
- const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
246
- <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
247
-
248
- <glide-core-dropdown-option
249
- label="Two"
250
- selected
251
- ></glide-core-dropdown-option>
252
- </glide-core-dropdown>`);
253
- const spy = sinon.spy();
254
- component.addEventListener('change', spy);
255
- setTimeout(() => {
256
- component.value = ['one'];
257
- });
258
- await aTimeout(0);
259
- expect(spy.callCount).to.equal(0);
260
- });
261
- it('continues to dispatch "change" events upon selection after `value` is changed programmatically', async () => {
262
- const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
263
- <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
264
-
265
- <glide-core-dropdown-option
266
- label="Two"
267
- selected
268
- ></glide-core-dropdown-option>
269
- </glide-core-dropdown>`);
270
- component.value = ['two'];
271
- setTimeout(() => {
272
- component.querySelector('glide-core-dropdown-option')?.click();
273
- });
274
- const event = await oneEvent(component, 'change');
275
- expect(event instanceof Event).to.be.true;
276
- });
277
- it('does not dispatch an "input" event when `value` is changed programmatically', async () => {
278
- const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
279
- <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
280
-
281
- <glide-core-dropdown-option
282
- label="Two"
283
- selected
284
- ></glide-core-dropdown-option>
285
- </glide-core-dropdown>`);
286
- const spy = sinon.spy();
287
- component.addEventListener('input', spy);
288
- setTimeout(() => {
289
- component.value = ['one'];
290
- });
291
- await aTimeout(0);
292
- expect(spy.callCount).to.equal(0);
293
- });
294
- it('does not dispatch a "change" event when an already selected option is selected', async () => {
295
- const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
296
- <glide-core-dropdown-option
297
- label="One"
298
- selected
299
- ></glide-core-dropdown-option>
300
-
301
- <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
302
- </glide-core-dropdown>`);
303
- const spy = sinon.spy();
304
- component.addEventListener('change', spy);
305
- setTimeout(() => {
306
- component.querySelector('glide-core-dropdown-option')?.click();
307
- });
308
- await aTimeout(0);
309
- expect(spy.callCount).to.equal(0);
310
- });
311
- it('does not dispatch an "input" event when an already selected option is selected', async () => {
312
- const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
313
- <glide-core-dropdown-option
314
- label="One"
315
- selected
316
- ></glide-core-dropdown-option>
317
-
318
- <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
319
- </glide-core-dropdown>`);
320
- const spy = sinon.spy();
321
- component.addEventListener('input', spy);
322
- setTimeout(() => {
323
- component.querySelector('glide-core-dropdown-option')?.click();
324
- });
325
- await aTimeout(0);
326
- expect(spy.callCount).to.equal(0);
327
- });
328
- it('continues to dispatch "input" events upon selection after `value` is changed programmatically', async () => {
329
- const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
330
- <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
331
-
332
- <glide-core-dropdown-option
333
- label="Two"
334
- selected
335
- ></glide-core-dropdown-option>
336
- </glide-core-dropdown>`);
337
- component.value = ['two'];
338
- setTimeout(() => {
339
- component.querySelector('glide-core-dropdown-option')?.click();
340
- });
341
- const event = await oneEvent(component, 'input');
342
- expect(event instanceof Event).to.be.true;
343
- });
@@ -1 +0,0 @@
1
- import './dropdown.option.js';
@@ -1 +0,0 @@
1
- import './dropdown.option.js';
@@ -1,140 +0,0 @@
1
- import './dropdown.option.js';
2
- import { aTimeout, assert, expect, fixture, html } from '@open-wc/testing';
3
- import { sendKeys } from '@web/test-runner-commands';
4
- import { sendMouse } from '@web/test-runner-commands';
5
- import GlideCoreDropdown from './dropdown.js';
6
- import GlideCoreDropdownOption from './dropdown.option.js';
7
- GlideCoreDropdown.shadowRootOptions.mode = 'open';
8
- GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
9
- const defaultSlot = html `
10
- <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
11
- <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
12
- <glide-core-dropdown-option label="Three"></glide-core-dropdown-option>
13
- <glide-core-dropdown-option label="Four"></glide-core-dropdown-option>
14
- <glide-core-dropdown-option label="Five"></glide-core-dropdown-option>
15
- <glide-core-dropdown-option label="Six"></glide-core-dropdown-option>
16
- <glide-core-dropdown-option label="Seven"></glide-core-dropdown-option>
17
- <glide-core-dropdown-option label="Eight"></glide-core-dropdown-option>
18
- <glide-core-dropdown-option label="Nine"></glide-core-dropdown-option>
19
- <glide-core-dropdown-option label="Ten"></glide-core-dropdown-option>
20
- <glide-core-dropdown-option label="Eleven"></glide-core-dropdown-option>
21
- `;
22
- it('focuses the input when `focus()` is called', async () => {
23
- const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
24
- ${defaultSlot}
25
- </glide-core-dropdown>`);
26
- component.focus();
27
- const input = component.shadowRoot?.querySelector('[data-test="input"]');
28
- expect(component.shadowRoot?.activeElement).to.equal(input);
29
- });
30
- it('retains focus on the input when an option is selected via click', async () => {
31
- const component = await fixture(html `<glide-core-dropdown
32
- label="Label"
33
- placeholder="Placeholder"
34
- multiple
35
- open
36
- >
37
- ${defaultSlot}
38
- </glide-core-dropdown>`);
39
- // Wait for it to open.
40
- await aTimeout(0);
41
- component.focus();
42
- const option = component.querySelector('glide-core-dropdown-option');
43
- assert(option);
44
- const { x, y } = option.getBoundingClientRect();
45
- // A simple `option.click()` won't do because we need a "mousedown" so that
46
- // `#onOptionsMousedown` is covered.
47
- await sendMouse({
48
- type: 'click',
49
- position: [Math.ceil(x), Math.ceil(y)],
50
- });
51
- const input = component.shadowRoot?.querySelector('[data-test="input"]');
52
- assert(component.shadowRoot?.activeElement);
53
- expect(component.shadowRoot?.activeElement).to.equal(input);
54
- });
55
- it('retains focus on the the input when an option is selected via Enter', async () => {
56
- const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
57
- ${defaultSlot}
58
- </glide-core-dropdown>`);
59
- // Wait for it to open.
60
- await aTimeout(0);
61
- component.focus();
62
- component
63
- .querySelector('glide-core-dropdown-option')
64
- ?.shadowRoot?.querySelector('[data-test="component"]')
65
- ?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
66
- const input = component.shadowRoot?.querySelector('[data-test="input"]');
67
- expect(component.shadowRoot?.activeElement).to.equal(input);
68
- });
69
- it('retains focus on the the input when the primary button is clicked', async () => {
70
- const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
71
- ${defaultSlot}
72
- </glide-core-dropdown>`);
73
- component.focus();
74
- const button = component.shadowRoot?.querySelector('[data-test="primary-button"]');
75
- assert(button);
76
- const { x, y } = button.getBoundingClientRect();
77
- // A simple `option.click()` won't do because we need a "mousedown" so that
78
- // `#onDropdownMousedown` gets covered.
79
- await sendMouse({
80
- type: 'click',
81
- position: [Math.ceil(x), Math.ceil(y)],
82
- });
83
- const input = component.shadowRoot?.querySelector('[data-test="input"]');
84
- expect(component.shadowRoot?.activeElement).to.equal(input);
85
- });
86
- it('focuses the input on submit when required and no option is selected', async () => {
87
- const form = document.createElement('form');
88
- const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" required>
89
- ${defaultSlot}
90
- </glide-core-dropdown>`, {
91
- parentNode: form,
92
- });
93
- form.requestSubmit();
94
- const input = component.shadowRoot?.querySelector('[data-test="input"]');
95
- expect(component.shadowRoot?.activeElement).to.be.equal(input);
96
- });
97
- it('focuses the input when `reportValidity` is called when required and no option is selected', async () => {
98
- const form = document.createElement('form');
99
- const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" required>
100
- ${defaultSlot}
101
- </glide-core-dropdown>`, { parentNode: form });
102
- component.reportValidity();
103
- const input = component.shadowRoot?.querySelector('[data-test="input"]');
104
- expect(component.shadowRoot?.activeElement).to.equal(input);
105
- });
106
- it('does not focus the input when `checkValidity` is called', async () => {
107
- const form = document.createElement('form');
108
- const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" required>
109
- ${defaultSlot}
110
- </glide-core-dropdown>`, { parentNode: form });
111
- component.checkValidity();
112
- expect(component.shadowRoot?.activeElement).to.equal(null);
113
- });
114
- it('sets the `value` of its `<input>` to the selected option when focus is lost', async () => {
115
- const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
116
- ${defaultSlot}
117
- </glide-core-dropdown>`);
118
- // Wait for it to open.
119
- await aTimeout(0);
120
- const option = component.querySelector('glide-core-dropdown-option');
121
- assert(option);
122
- option.selected = true;
123
- // Now type something other than "One" so we can check that it's reverted
124
- // back to "One" when focus is lost.
125
- component.focus();
126
- await sendKeys({ type: 'o' });
127
- component.blur();
128
- const input = component.shadowRoot?.querySelector('[data-test="input"]');
129
- expect(input?.value).to.equal('One');
130
- });
131
- it('selects the filter text on focus', async () => {
132
- const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
133
- ${defaultSlot}
134
- </glide-core-dropdown>`);
135
- component.focus();
136
- await sendKeys({ type: 'one' });
137
- component.blur();
138
- component.focus();
139
- expect(window.getSelection()?.toString()).to.equal('one');
140
- });
@@ -1,107 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-unused-expressions */
2
- import './dropdown.option.js';
3
- import { aTimeout, elementUpdated, expect, fixture, html, } from '@open-wc/testing';
4
- import { sendKeys } from '@web/test-runner-commands';
5
- import GlideCoreDropdown from './dropdown.js';
6
- import GlideCoreDropdownOption from './dropdown.option.js';
7
- GlideCoreDropdown.shadowRootOptions.mode = 'open';
8
- GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
9
- it('closes and reports validity when it loses focus', async () => {
10
- const div = document.createElement('div');
11
- const component = await fixture(html `<glide-core-dropdown
12
- label="Label"
13
- placeholder="Placeholder"
14
- open
15
- required
16
- >
17
- <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
18
- </glide-core-dropdown>`, { parentNode: div });
19
- const button = document.createElement('button');
20
- div.prepend(button);
21
- component.focus();
22
- // Move focus to the body.
23
- await sendKeys({ press: 'Tab' });
24
- expect(component.open).to.be.false;
25
- component.open = true;
26
- component.focus();
27
- // Move focus to the primary button.
28
- await sendKeys({ down: 'Shift' });
29
- await sendKeys({ press: 'Tab' });
30
- await sendKeys({ up: 'Shift' });
31
- expect(component.open).to.be.false;
32
- expect(component.shadowRoot?.activeElement).to.equal(null);
33
- expect(component.validity.valid).to.be.false;
34
- expect(component.shadowRoot?.querySelector('glide-core-private-label')?.error)
35
- .to.be.true;
36
- });
37
- it('is focused when clicked', async () => {
38
- const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
39
- <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
40
- </glide-core-dropdown>`);
41
- // Calling `click()` would be sweet. The problem is it sets `event.detail` to `0`,
42
- // which puts us in a guard in the event handler. `Event` has no `detail` property
43
- // and would work. `CustomEvent` is used for completeness and to get us as close as
44
- // possible to a real click. See the comment in the handler for more information.
45
- const button = component.shadowRoot?.querySelector('[data-test="primary-button"]');
46
- button?.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: 1 }));
47
- expect(component.shadowRoot?.activeElement).to.equal(button);
48
- });
49
- it('focuses the Add button on ArrowDown', async () => {
50
- const component = await fixture(html `<glide-core-dropdown
51
- add-button-label="Add"
52
- label="Label"
53
- placeholder="Placeholder"
54
- open
55
- >
56
- <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
57
- <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
58
- </glide-core-dropdown>`);
59
- // Wait for it to open.
60
- await aTimeout(0);
61
- const options = component.querySelectorAll('glide-core-dropdown-option');
62
- component.focus();
63
- await sendKeys({ press: 'ArrowDown' }); // Two
64
- await sendKeys({ press: 'ArrowDown' }); // Add button
65
- const addButton = component.shadowRoot?.querySelector('[data-test="add-button"]');
66
- expect(options[0]?.privateActive).to.be.false;
67
- expect(options[0]?.privateActive).to.be.false;
68
- expect(options[1]?.privateActive).to.be.false;
69
- expect(options[1]?.privateIsEditActive).to.be.false;
70
- expect(options[1]?.privateIsTooltipOpen).to.be.false;
71
- expect(component.shadowRoot?.activeElement).to.equal(addButton);
72
- });
73
- it('returns focus to itself on Escape when the Add button has focus', async () => {
74
- const component = await fixture(html `<glide-core-dropdown
75
- add-button-label="Add"
76
- label="Label"
77
- placeholder="Placeholder"
78
- open
79
- >
80
- <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
81
- </glide-core-dropdown>`);
82
- // Wait for it to open.
83
- await aTimeout(0);
84
- component.focus();
85
- await sendKeys({ press: 'Tab' });
86
- await sendKeys({ press: 'Escape' });
87
- expect(document.activeElement).to.equal(component);
88
- });
89
- it('returns focus to itself when an option is activated and the Add button has focus', async () => {
90
- const component = await fixture(html `<glide-core-dropdown
91
- add-button-label="Add"
92
- label="Label"
93
- placeholder="Placeholder"
94
- open
95
- >
96
- <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
97
- </glide-core-dropdown>`);
98
- // Wait for it to open.
99
- await aTimeout(0);
100
- component.focus();
101
- await sendKeys({ press: 'Tab' });
102
- component
103
- .querySelector('glide-core-dropdown-option')
104
- ?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
105
- await elementUpdated(component);
106
- expect(document.activeElement).to.equal(component);
107
- });
@@ -1 +0,0 @@
1
- import './dropdown.option.js';