@instructure/ui-drilldown 10.16.1-snapshot-0 → 10.16.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 (51) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/es/Drilldown/DrilldownGroup/__new-tests__/DrilldownGroup.test.js +448 -325
  3. package/es/Drilldown/DrilldownGroup/index.js +0 -1
  4. package/es/Drilldown/DrilldownOption/__new-tests__/DrilldownOption.test.js +422 -309
  5. package/es/Drilldown/DrilldownOption/index.js +0 -1
  6. package/es/Drilldown/DrilldownPage/__new-tests__/DrilldownPage.test.js +201 -147
  7. package/es/Drilldown/DrilldownPage/index.js +0 -1
  8. package/es/Drilldown/DrilldownSeparator/__new-tests__/DrilldownSeparator.test.js +22 -17
  9. package/es/Drilldown/DrilldownSeparator/index.js +0 -1
  10. package/es/Drilldown/__examples__/Drilldown.examples.js +99 -82
  11. package/es/Drilldown/__new-tests__/Drilldown.test.js +533 -352
  12. package/es/Drilldown/index.js +144 -126
  13. package/lib/Drilldown/DrilldownGroup/__new-tests__/DrilldownGroup.test.js +463 -340
  14. package/lib/Drilldown/DrilldownGroup/index.js +0 -1
  15. package/lib/Drilldown/DrilldownOption/__new-tests__/DrilldownOption.test.js +448 -336
  16. package/lib/Drilldown/DrilldownOption/index.js +0 -1
  17. package/lib/Drilldown/DrilldownPage/__new-tests__/DrilldownPage.test.js +221 -167
  18. package/lib/Drilldown/DrilldownPage/index.js +0 -2
  19. package/lib/Drilldown/DrilldownSeparator/__new-tests__/DrilldownSeparator.test.js +25 -21
  20. package/lib/Drilldown/DrilldownSeparator/index.js +0 -1
  21. package/lib/Drilldown/__examples__/Drilldown.examples.js +99 -83
  22. package/lib/Drilldown/__new-tests__/Drilldown.test.js +568 -387
  23. package/lib/Drilldown/index.js +143 -126
  24. package/package.json +21 -21
  25. package/src/Drilldown/DrilldownGroup/__new-tests__/DrilldownGroup.test.tsx +0 -1
  26. package/src/Drilldown/DrilldownGroup/index.tsx +0 -1
  27. package/src/Drilldown/DrilldownOption/__new-tests__/DrilldownOption.test.tsx +1 -1
  28. package/src/Drilldown/DrilldownOption/index.tsx +0 -1
  29. package/src/Drilldown/DrilldownPage/__new-tests__/DrilldownPage.test.tsx +0 -1
  30. package/src/Drilldown/DrilldownPage/index.tsx +0 -1
  31. package/src/Drilldown/DrilldownSeparator/__new-tests__/DrilldownSeparator.test.tsx +0 -1
  32. package/src/Drilldown/DrilldownSeparator/index.tsx +0 -1
  33. package/src/Drilldown/__examples__/Drilldown.examples.tsx +0 -2
  34. package/src/Drilldown/__new-tests__/Drilldown.test.tsx +0 -1
  35. package/src/Drilldown/index.tsx +4 -6
  36. package/tsconfig.build.tsbuildinfo +1 -1
  37. package/types/Drilldown/DrilldownGroup/__new-tests__/DrilldownGroup.test.d.ts.map +1 -1
  38. package/types/Drilldown/DrilldownGroup/index.d.ts +0 -1
  39. package/types/Drilldown/DrilldownGroup/index.d.ts.map +1 -1
  40. package/types/Drilldown/DrilldownOption/index.d.ts +0 -1
  41. package/types/Drilldown/DrilldownOption/index.d.ts.map +1 -1
  42. package/types/Drilldown/DrilldownPage/__new-tests__/DrilldownPage.test.d.ts.map +1 -1
  43. package/types/Drilldown/DrilldownPage/index.d.ts +0 -1
  44. package/types/Drilldown/DrilldownPage/index.d.ts.map +1 -1
  45. package/types/Drilldown/DrilldownSeparator/__new-tests__/DrilldownSeparator.test.d.ts.map +1 -1
  46. package/types/Drilldown/DrilldownSeparator/index.d.ts +0 -1
  47. package/types/Drilldown/DrilldownSeparator/index.d.ts.map +1 -1
  48. package/types/Drilldown/__examples__/Drilldown.examples.d.ts.map +1 -1
  49. package/types/Drilldown/__new-tests__/Drilldown.test.d.ts.map +1 -1
  50. package/types/Drilldown/index.d.ts +7 -10
  51. package/types/Drilldown/index.d.ts.map +1 -1
package/es/Drilldown/DrilldownGroup/__new-tests__/DrilldownGroup.test.js CHANGED
@@ -23,12 +23,12 @@ var _Drilldown, _Drilldown$Option, _Drilldown2, _Drilldown$Option2, _Drilldown3,
23
23
  * SOFTWARE.
24
24
  */
25
25
 
26
- import React from 'react';
27
26
  import { render, screen, waitFor } from '@testing-library/react';
28
27
  import { vi } from 'vitest';
29
28
  import userEvent from '@testing-library/user-event';
30
29
  import '@testing-library/jest-dom';
31
30
  import { Drilldown } from '../../index';
31
+ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
32
32
  describe('<Drilldown.Group />', () => {
33
33
  let consoleWarningMock;
34
34
  let consoleErrorMock;
@@ -46,25 +46,28 @@ describe('<Drilldown.Group />', () => {
46
46
  const Example = ({
47
47
  opts
48
48
  }) => {
49
- return /*#__PURE__*/React.createElement(Drilldown, {
50
- rootPageId: "page0"
51
- }, /*#__PURE__*/React.createElement(Drilldown.Page, {
52
- id: "page0"
53
- }, /*#__PURE__*/React.createElement(Drilldown.Group, {
54
- id: "group0",
55
- selectableType: "single"
56
- }, opts.map(opt => {
57
- return /*#__PURE__*/React.createElement(Drilldown.Option, {
58
- key: opt,
59
- value: opt,
60
- name: opt,
61
- id: opt,
62
- defaultSelected: opt === 'three',
63
- "data-testid": opt
64
- }, opt);
65
- }))));
49
+ return _jsx(Drilldown, {
50
+ rootPageId: "page0",
51
+ children: _jsx(Drilldown.Page, {
52
+ id: "page0",
53
+ children: _jsx(Drilldown.Group, {
54
+ id: "group0",
55
+ selectableType: "single",
56
+ children: opts.map(opt => {
57
+ return _jsx(Drilldown.Option, {
58
+ value: opt,
59
+ name: opt,
60
+ id: opt,
61
+ defaultSelected: opt === 'three',
62
+ "data-testid": opt,
63
+ children: opt
64
+ }, opt);
65
+ })
66
+ })
67
+ })
68
+ });
66
69
  };
67
- render(/*#__PURE__*/React.createElement(Example, {
70
+ render(_jsx(Example, {
68
71
  opts: options
69
72
  }));
70
73
  const selectedOption = screen.getByTestId('three');
@@ -76,15 +79,19 @@ describe('<Drilldown.Group />', () => {
76
79
  });
77
80
  });
78
81
  it("shouldn't render non-DrilldownGroup children", async () => {
79
- render(_Drilldown || (_Drilldown = /*#__PURE__*/React.createElement(Drilldown, {
80
- rootPageId: "page0"
81
- }, /*#__PURE__*/React.createElement(Drilldown.Page, {
82
- id: "page0"
83
- }, /*#__PURE__*/React.createElement(Drilldown.Group, {
84
- id: "group0"
85
- }, /*#__PURE__*/React.createElement("div", {
86
- "data-testid": "testDiv"
87
- }, "Div"))))));
82
+ render(_Drilldown || (_Drilldown = _jsx(Drilldown, {
83
+ rootPageId: "page0",
84
+ children: _jsx(Drilldown.Page, {
85
+ id: "page0",
86
+ children: _jsx(Drilldown.Group, {
87
+ id: "group0",
88
+ children: _jsx("div", {
89
+ "data-testid": "testDiv",
90
+ children: "Div"
91
+ })
92
+ })
93
+ })
94
+ })));
88
95
  const nonGroupChild = screen.queryByTestId('testDiv');
89
96
  const childText = screen.queryByText('Div');
90
97
  expect(nonGroupChild).not.toBeInTheDocument();
@@ -92,101 +99,131 @@ describe('<Drilldown.Group />', () => {
92
99
  });
93
100
  it('elementRef should return ref to the group', async () => {
94
101
  const elementRef = vi.fn();
95
- const _render = render(/*#__PURE__*/React.createElement(Drilldown, {
96
- rootPageId: "page0"
97
- }, /*#__PURE__*/React.createElement(Drilldown.Page, {
98
- id: "page0"
99
- }, /*#__PURE__*/React.createElement(Drilldown.Group, {
100
- id: "group0",
101
- elementRef: elementRef
102
- }, _Drilldown$Option || (_Drilldown$Option = /*#__PURE__*/React.createElement(Drilldown.Option, {
103
- id: "groupOption01"
104
- }, "Option")))))),
102
+ const _render = render(_jsx(Drilldown, {
103
+ rootPageId: "page0",
104
+ children: _jsx(Drilldown.Page, {
105
+ id: "page0",
106
+ children: _jsx(Drilldown.Group, {
107
+ id: "group0",
108
+ elementRef: elementRef,
109
+ children: _Drilldown$Option || (_Drilldown$Option = _jsx(Drilldown.Option, {
110
+ id: "groupOption01",
111
+ children: "Option"
112
+ }))
113
+ })
114
+ })
115
+ })),
105
116
  container = _render.container;
106
117
  const group = container.querySelector('#group0');
107
118
  expect(elementRef).toHaveBeenCalledWith(group);
108
119
  });
109
120
  describe('renderGroupTitle', () => {
110
121
  it('should display', async () => {
111
- render(_Drilldown2 || (_Drilldown2 = /*#__PURE__*/React.createElement(Drilldown, {
112
- rootPageId: "page0"
113
- }, /*#__PURE__*/React.createElement(Drilldown.Page, {
114
- id: "page0"
115
- }, /*#__PURE__*/React.createElement(Drilldown.Group, {
116
- id: "group0",
117
- renderGroupTitle: "Group Title"
118
- }, /*#__PURE__*/React.createElement(Drilldown.Option, {
119
- id: "groupOption01"
120
- }, "Option"))))));
122
+ render(_Drilldown2 || (_Drilldown2 = _jsx(Drilldown, {
123
+ rootPageId: "page0",
124
+ children: _jsx(Drilldown.Page, {
125
+ id: "page0",
126
+ children: _jsx(Drilldown.Group, {
127
+ id: "group0",
128
+ renderGroupTitle: "Group Title",
129
+ children: _jsx(Drilldown.Option, {
130
+ id: "groupOption01",
131
+ children: "Option"
132
+ })
133
+ })
134
+ })
135
+ })));
121
136
  const title = screen.getByText('Group Title');
122
137
  expect(title).toBeInTheDocument();
123
138
  });
124
139
  it('should display, if function is provided', async () => {
125
- render(/*#__PURE__*/React.createElement(Drilldown, {
126
- rootPageId: "page0"
127
- }, /*#__PURE__*/React.createElement(Drilldown.Page, {
128
- id: "page0"
129
- }, /*#__PURE__*/React.createElement(Drilldown.Group, {
130
- id: "group0",
131
- renderGroupTitle: () => 'Group Title'
132
- }, _Drilldown$Option2 || (_Drilldown$Option2 = /*#__PURE__*/React.createElement(Drilldown.Option, {
133
- id: "groupOption01"
134
- }, "Option"))))));
140
+ render(_jsx(Drilldown, {
141
+ rootPageId: "page0",
142
+ children: _jsx(Drilldown.Page, {
143
+ id: "page0",
144
+ children: _jsx(Drilldown.Group, {
145
+ id: "group0",
146
+ renderGroupTitle: () => 'Group Title',
147
+ children: _Drilldown$Option2 || (_Drilldown$Option2 = _jsx(Drilldown.Option, {
148
+ id: "groupOption01",
149
+ children: "Option"
150
+ }))
151
+ })
152
+ })
153
+ }));
135
154
  const title = screen.getByText('Group Title');
136
155
  expect(title).toBeInTheDocument();
137
156
  });
138
157
  });
139
158
  describe('separators', () => {
140
159
  it("shouldn't display, when group is first and/or last item", async () => {
141
- const _render2 = render(_Drilldown3 || (_Drilldown3 = /*#__PURE__*/React.createElement(Drilldown, {
142
- rootPageId: "page0"
143
- }, /*#__PURE__*/React.createElement(Drilldown.Page, {
144
- id: "page0"
145
- }, /*#__PURE__*/React.createElement(Drilldown.Group, {
146
- id: "group0"
147
- }, /*#__PURE__*/React.createElement(Drilldown.Option, {
148
- id: "groupOption01"
149
- }, "Option")))))),
160
+ const _render2 = render(_Drilldown3 || (_Drilldown3 = _jsx(Drilldown, {
161
+ rootPageId: "page0",
162
+ children: _jsx(Drilldown.Page, {
163
+ id: "page0",
164
+ children: _jsx(Drilldown.Group, {
165
+ id: "group0",
166
+ children: _jsx(Drilldown.Option, {
167
+ id: "groupOption01",
168
+ children: "Option"
169
+ })
170
+ })
171
+ })
172
+ }))),
150
173
  container = _render2.container;
151
174
  const separators = container.querySelectorAll('[class$="-separator"]');
152
175
  expect(separators.length).toBe(0);
153
176
  });
154
177
  it('should display by default, if group is between other items', async () => {
155
- const _render3 = render(_Drilldown4 || (_Drilldown4 = /*#__PURE__*/React.createElement(Drilldown, {
156
- rootPageId: "page0"
157
- }, /*#__PURE__*/React.createElement(Drilldown.Page, {
158
- id: "page0"
159
- }, /*#__PURE__*/React.createElement(Drilldown.Option, {
160
- id: "option1"
161
- }, "Option"), /*#__PURE__*/React.createElement(Drilldown.Group, {
162
- id: "group0"
163
- }, /*#__PURE__*/React.createElement(Drilldown.Option, {
164
- id: "groupOption01"
165
- }, "Option")), /*#__PURE__*/React.createElement(Drilldown.Option, {
166
- id: "option2"
167
- }, "Option"))))),
178
+ const _render3 = render(_Drilldown4 || (_Drilldown4 = _jsx(Drilldown, {
179
+ rootPageId: "page0",
180
+ children: _jsxs(Drilldown.Page, {
181
+ id: "page0",
182
+ children: [_jsx(Drilldown.Option, {
183
+ id: "option1",
184
+ children: "Option"
185
+ }), _jsx(Drilldown.Group, {
186
+ id: "group0",
187
+ children: _jsx(Drilldown.Option, {
188
+ id: "groupOption01",
189
+ children: "Option"
190
+ })
191
+ }), _jsx(Drilldown.Option, {
192
+ id: "option2",
193
+ children: "Option"
194
+ })]
195
+ })
196
+ }))),
168
197
  container = _render3.container;
169
198
  const separators = container.querySelectorAll('[class$="-separator"]');
170
199
  expect(separators.length).toBe(2);
171
200
  });
172
201
  it("shouldn't display extra separator between groups", async () => {
173
- const _render4 = render(_Drilldown5 || (_Drilldown5 = /*#__PURE__*/React.createElement(Drilldown, {
174
- rootPageId: "page0"
175
- }, /*#__PURE__*/React.createElement(Drilldown.Page, {
176
- id: "page0"
177
- }, /*#__PURE__*/React.createElement(Drilldown.Option, {
178
- id: "option1"
179
- }, "Option"), /*#__PURE__*/React.createElement(Drilldown.Group, {
180
- id: "group0"
181
- }, /*#__PURE__*/React.createElement(Drilldown.Option, {
182
- id: "groupOption01"
183
- }, "Option")), /*#__PURE__*/React.createElement(Drilldown.Group, {
184
- id: "group1"
185
- }, /*#__PURE__*/React.createElement(Drilldown.Option, {
186
- id: "groupOption11"
187
- }, "Option")), /*#__PURE__*/React.createElement(Drilldown.Option, {
188
- id: "option2"
189
- }, "Option"))))),
202
+ const _render4 = render(_Drilldown5 || (_Drilldown5 = _jsx(Drilldown, {
203
+ rootPageId: "page0",
204
+ children: _jsxs(Drilldown.Page, {
205
+ id: "page0",
206
+ children: [_jsx(Drilldown.Option, {
207
+ id: "option1",
208
+ children: "Option"
209
+ }), _jsx(Drilldown.Group, {
210
+ id: "group0",
211
+ children: _jsx(Drilldown.Option, {
212
+ id: "groupOption01",
213
+ children: "Option"
214
+ })
215
+ }), _jsx(Drilldown.Group, {
216
+ id: "group1",
217
+ children: _jsx(Drilldown.Option, {
218
+ id: "groupOption11",
219
+ children: "Option"
220
+ })
221
+ }), _jsx(Drilldown.Option, {
222
+ id: "option2",
223
+ children: "Option"
224
+ })]
225
+ })
226
+ }))),
190
227
  container = _render4.container;
191
228
  const separators = container.querySelectorAll('[class$="-separator"]');
192
229
  expect(separators.length).toBe(3);
@@ -194,22 +231,29 @@ describe('<Drilldown.Group />', () => {
194
231
  });
195
232
  describe('disabled prop', () => {
196
233
  it('should disable all items in the group', async () => {
197
- const _render5 = render(_Drilldown6 || (_Drilldown6 = /*#__PURE__*/React.createElement(Drilldown, {
198
- rootPageId: "page0"
199
- }, /*#__PURE__*/React.createElement(Drilldown.Page, {
200
- id: "page0"
201
- }, /*#__PURE__*/React.createElement(Drilldown.Option, {
202
- id: "option1"
203
- }, "Option"), /*#__PURE__*/React.createElement(Drilldown.Group, {
204
- id: "group0",
205
- disabled: true
206
- }, /*#__PURE__*/React.createElement(Drilldown.Option, {
207
- id: "groupOption01"
208
- }, "Option"), /*#__PURE__*/React.createElement(Drilldown.Option, {
209
- id: "groupOption02"
210
- }, "Option")), /*#__PURE__*/React.createElement(Drilldown.Option, {
211
- id: "option2"
212
- }, "Option"))))),
234
+ const _render5 = render(_Drilldown6 || (_Drilldown6 = _jsx(Drilldown, {
235
+ rootPageId: "page0",
236
+ children: _jsxs(Drilldown.Page, {
237
+ id: "page0",
238
+ children: [_jsx(Drilldown.Option, {
239
+ id: "option1",
240
+ children: "Option"
241
+ }), _jsxs(Drilldown.Group, {
242
+ id: "group0",
243
+ disabled: true,
244
+ children: [_jsx(Drilldown.Option, {
245
+ id: "groupOption01",
246
+ children: "Option"
247
+ }), _jsx(Drilldown.Option, {
248
+ id: "groupOption02",
249
+ children: "Option"
250
+ })]
251
+ }), _jsx(Drilldown.Option, {
252
+ id: "option2",
253
+ children: "Option"
254
+ })]
255
+ })
256
+ }))),
213
257
  container = _render5.container;
214
258
  const disabledOption_1 = container.querySelector('#groupOption01');
215
259
  const disabledOption_2 = container.querySelector('#groupOption02');
@@ -223,34 +267,44 @@ describe('<Drilldown.Group />', () => {
223
267
  });
224
268
  describe('role prop', () => {
225
269
  it('should be "group" by default', async () => {
226
- const _render6 = render(_Drilldown7 || (_Drilldown7 = /*#__PURE__*/React.createElement(Drilldown, {
227
- rootPageId: "page0"
228
- }, /*#__PURE__*/React.createElement(Drilldown.Page, {
229
- id: "page0"
230
- }, /*#__PURE__*/React.createElement(Drilldown.Group, {
231
- id: "group0"
232
- }, /*#__PURE__*/React.createElement(Drilldown.Option, {
233
- id: "groupOption01"
234
- }, "Option"), /*#__PURE__*/React.createElement(Drilldown.Option, {
235
- id: "groupOption02"
236
- }, "Option")))))),
270
+ const _render6 = render(_Drilldown7 || (_Drilldown7 = _jsx(Drilldown, {
271
+ rootPageId: "page0",
272
+ children: _jsx(Drilldown.Page, {
273
+ id: "page0",
274
+ children: _jsxs(Drilldown.Group, {
275
+ id: "group0",
276
+ children: [_jsx(Drilldown.Option, {
277
+ id: "groupOption01",
278
+ children: "Option"
279
+ }), _jsx(Drilldown.Option, {
280
+ id: "groupOption02",
281
+ children: "Option"
282
+ })]
283
+ })
284
+ })
285
+ }))),
237
286
  container = _render6.container;
238
287
  const group = container.querySelector('#group0');
239
288
  expect(group).toHaveAttribute('role', 'group');
240
289
  });
241
290
  it('should render the group with passed role', async () => {
242
- const _render7 = render(_Drilldown8 || (_Drilldown8 = /*#__PURE__*/React.createElement(Drilldown, {
243
- rootPageId: "page0"
244
- }, /*#__PURE__*/React.createElement(Drilldown.Page, {
245
- id: "page0"
246
- }, /*#__PURE__*/React.createElement(Drilldown.Group, {
247
- id: "group0",
248
- role: "menu"
249
- }, /*#__PURE__*/React.createElement(Drilldown.Option, {
250
- id: "groupOption01"
251
- }, "Option"), /*#__PURE__*/React.createElement(Drilldown.Option, {
252
- id: "groupOption02"
253
- }, "Option")))))),
291
+ const _render7 = render(_Drilldown8 || (_Drilldown8 = _jsx(Drilldown, {
292
+ rootPageId: "page0",
293
+ children: _jsx(Drilldown.Page, {
294
+ id: "page0",
295
+ children: _jsxs(Drilldown.Group, {
296
+ id: "group0",
297
+ role: "menu",
298
+ children: [_jsx(Drilldown.Option, {
299
+ id: "groupOption01",
300
+ children: "Option"
301
+ }), _jsx(Drilldown.Option, {
302
+ id: "groupOption02",
303
+ children: "Option"
304
+ })]
305
+ })
306
+ })
307
+ }))),
254
308
  container = _render7.container;
255
309
  const group = container.querySelector('#group0');
256
310
  expect(group).toHaveAttribute('role', 'menu');
@@ -258,17 +312,22 @@ describe('<Drilldown.Group />', () => {
258
312
  });
259
313
  describe('as prop', () => {
260
314
  it('should inherit Drilldown\'s "ul" by default', async () => {
261
- const _render8 = render(_Drilldown9 || (_Drilldown9 = /*#__PURE__*/React.createElement(Drilldown, {
262
- rootPageId: "page0"
263
- }, /*#__PURE__*/React.createElement(Drilldown.Page, {
264
- id: "page0"
265
- }, /*#__PURE__*/React.createElement(Drilldown.Group, {
266
- id: "group0"
267
- }, /*#__PURE__*/React.createElement(Drilldown.Option, {
268
- id: "groupOption01"
269
- }, "Option"), /*#__PURE__*/React.createElement(Drilldown.Option, {
270
- id: "groupOption02"
271
- }, "Option")))))),
315
+ const _render8 = render(_Drilldown9 || (_Drilldown9 = _jsx(Drilldown, {
316
+ rootPageId: "page0",
317
+ children: _jsx(Drilldown.Page, {
318
+ id: "page0",
319
+ children: _jsxs(Drilldown.Group, {
320
+ id: "group0",
321
+ children: [_jsx(Drilldown.Option, {
322
+ id: "groupOption01",
323
+ children: "Option"
324
+ }), _jsx(Drilldown.Option, {
325
+ id: "groupOption02",
326
+ children: "Option"
327
+ })]
328
+ })
329
+ })
330
+ }))),
272
331
  container = _render8.container;
273
332
  const drilldownContainer = container.querySelector('[id^=Selectable_][id$=-list]');
274
333
  const group = container.querySelector('#group0');
@@ -276,18 +335,23 @@ describe('<Drilldown.Group />', () => {
276
335
  expect(group.tagName).toBe('UL');
277
336
  });
278
337
  it('should inherit Drilldown\'s "as" prop', async () => {
279
- const _render9 = render(_Drilldown10 || (_Drilldown10 = /*#__PURE__*/React.createElement(Drilldown, {
338
+ const _render9 = render(_Drilldown10 || (_Drilldown10 = _jsx(Drilldown, {
280
339
  rootPageId: "page0",
281
- as: "ol"
282
- }, /*#__PURE__*/React.createElement(Drilldown.Page, {
283
- id: "page0"
284
- }, /*#__PURE__*/React.createElement(Drilldown.Group, {
285
- id: "group0"
286
- }, /*#__PURE__*/React.createElement(Drilldown.Option, {
287
- id: "groupOption01"
288
- }, "Option"), /*#__PURE__*/React.createElement(Drilldown.Option, {
289
- id: "groupOption02"
290
- }, "Option")))))),
340
+ as: "ol",
341
+ children: _jsx(Drilldown.Page, {
342
+ id: "page0",
343
+ children: _jsxs(Drilldown.Group, {
344
+ id: "group0",
345
+ children: [_jsx(Drilldown.Option, {
346
+ id: "groupOption01",
347
+ children: "Option"
348
+ }), _jsx(Drilldown.Option, {
349
+ id: "groupOption02",
350
+ children: "Option"
351
+ })]
352
+ })
353
+ })
354
+ }))),
291
355
  container = _render9.container;
292
356
  const drilldownContainer = container.querySelector('[id^=Selectable_][id$=-list]');
293
357
  const group = container.querySelector('#group0');
@@ -295,18 +359,23 @@ describe('<Drilldown.Group />', () => {
295
359
  expect(group.tagName).toBe('OL');
296
360
  });
297
361
  it('should render the group as other element', async () => {
298
- const _render10 = render(_Drilldown11 || (_Drilldown11 = /*#__PURE__*/React.createElement(Drilldown, {
299
- rootPageId: "page0"
300
- }, /*#__PURE__*/React.createElement(Drilldown.Page, {
301
- id: "page0"
302
- }, /*#__PURE__*/React.createElement(Drilldown.Group, {
303
- id: "group0",
304
- as: "ol"
305
- }, /*#__PURE__*/React.createElement(Drilldown.Option, {
306
- id: "groupOption01"
307
- }, "Option"), /*#__PURE__*/React.createElement(Drilldown.Option, {
308
- id: "groupOption02"
309
- }, "Option")))))),
362
+ const _render10 = render(_Drilldown11 || (_Drilldown11 = _jsx(Drilldown, {
363
+ rootPageId: "page0",
364
+ children: _jsx(Drilldown.Page, {
365
+ id: "page0",
366
+ children: _jsxs(Drilldown.Group, {
367
+ id: "group0",
368
+ as: "ol",
369
+ children: [_jsx(Drilldown.Option, {
370
+ id: "groupOption01",
371
+ children: "Option"
372
+ }), _jsx(Drilldown.Option, {
373
+ id: "groupOption02",
374
+ children: "Option"
375
+ })]
376
+ })
377
+ })
378
+ }))),
310
379
  container = _render10.container;
311
380
  const drilldownContainer = container.querySelector('[id^=Selectable_][id$=-list]');
312
381
  const group = container.querySelector('#group0');
@@ -316,15 +385,19 @@ describe('<Drilldown.Group />', () => {
316
385
  });
317
386
  describe('selectableType', () => {
318
387
  it('if not set, should render role="menuitem" options without icon by default', async () => {
319
- const _render11 = render(_Drilldown12 || (_Drilldown12 = /*#__PURE__*/React.createElement(Drilldown, {
320
- rootPageId: "page0"
321
- }, /*#__PURE__*/React.createElement(Drilldown.Page, {
322
- id: "page0"
323
- }, /*#__PURE__*/React.createElement(Drilldown.Group, {
324
- id: "group0"
325
- }, /*#__PURE__*/React.createElement(Drilldown.Option, {
326
- id: "groupOption01"
327
- }, "Option")))))),
388
+ const _render11 = render(_Drilldown12 || (_Drilldown12 = _jsx(Drilldown, {
389
+ rootPageId: "page0",
390
+ children: _jsx(Drilldown.Page, {
391
+ id: "page0",
392
+ children: _jsx(Drilldown.Group, {
393
+ id: "group0",
394
+ children: _jsx(Drilldown.Option, {
395
+ id: "groupOption01",
396
+ children: "Option"
397
+ })
398
+ })
399
+ })
400
+ }))),
328
401
  container = _render11.container;
329
402
  const icon = container.querySelector('svg[name="IconCheck"]');
330
403
  const groupOption = container.querySelector('#groupOption01');
@@ -332,16 +405,20 @@ describe('<Drilldown.Group />', () => {
332
405
  expect(groupOption).toHaveAttribute('role', 'menuitem');
333
406
  });
334
407
  it('value "single" should render role="menuitemradio" options with icon', async () => {
335
- const _render12 = render(_Drilldown13 || (_Drilldown13 = /*#__PURE__*/React.createElement(Drilldown, {
336
- rootPageId: "page0"
337
- }, /*#__PURE__*/React.createElement(Drilldown.Page, {
338
- id: "page0"
339
- }, /*#__PURE__*/React.createElement(Drilldown.Group, {
340
- id: "group0",
341
- selectableType: "single"
342
- }, /*#__PURE__*/React.createElement(Drilldown.Option, {
343
- id: "groupOption01"
344
- }, "Option")))))),
408
+ const _render12 = render(_Drilldown13 || (_Drilldown13 = _jsx(Drilldown, {
409
+ rootPageId: "page0",
410
+ children: _jsx(Drilldown.Page, {
411
+ id: "page0",
412
+ children: _jsx(Drilldown.Group, {
413
+ id: "group0",
414
+ selectableType: "single",
415
+ children: _jsx(Drilldown.Option, {
416
+ id: "groupOption01",
417
+ children: "Option"
418
+ })
419
+ })
420
+ })
421
+ }))),
345
422
  container = _render12.container;
346
423
  const icon = container.querySelector('svg[name="IconCheck"]');
347
424
  const groupOption = container.querySelector('#groupOption01');
@@ -349,16 +426,20 @@ describe('<Drilldown.Group />', () => {
349
426
  expect(groupOption).toHaveAttribute('role', 'menuitemradio');
350
427
  });
351
428
  it('value "multiple" should render role="menuitemcheckbox" options with icon', async () => {
352
- const _render13 = render(_Drilldown14 || (_Drilldown14 = /*#__PURE__*/React.createElement(Drilldown, {
353
- rootPageId: "page0"
354
- }, /*#__PURE__*/React.createElement(Drilldown.Page, {
355
- id: "page0"
356
- }, /*#__PURE__*/React.createElement(Drilldown.Group, {
357
- id: "group0",
358
- selectableType: "multiple"
359
- }, /*#__PURE__*/React.createElement(Drilldown.Option, {
360
- id: "groupOption01"
361
- }, "Option")))))),
429
+ const _render13 = render(_Drilldown14 || (_Drilldown14 = _jsx(Drilldown, {
430
+ rootPageId: "page0",
431
+ children: _jsx(Drilldown.Page, {
432
+ id: "page0",
433
+ children: _jsx(Drilldown.Group, {
434
+ id: "group0",
435
+ selectableType: "multiple",
436
+ children: _jsx(Drilldown.Option, {
437
+ id: "groupOption01",
438
+ children: "Option"
439
+ })
440
+ })
441
+ })
442
+ }))),
362
443
  container = _render13.container;
363
444
  const icon = container.querySelector('svg[name="IconCheck"]');
364
445
  const groupOption = container.querySelector('#groupOption01');
@@ -369,23 +450,29 @@ describe('<Drilldown.Group />', () => {
369
450
  describe('defaultSelected', () => {
370
451
  describe('if not provided', () => {
371
452
  it('all group options has to be unselected', async () => {
372
- render(_Drilldown15 || (_Drilldown15 = /*#__PURE__*/React.createElement(Drilldown, {
373
- rootPageId: "page0"
374
- }, /*#__PURE__*/React.createElement(Drilldown.Page, {
375
- id: "page0"
376
- }, /*#__PURE__*/React.createElement(Drilldown.Group, {
377
- id: "group0",
378
- selectableType: "multiple"
379
- }, /*#__PURE__*/React.createElement(Drilldown.Option, {
380
- id: "groupOption01",
381
- value: 1
382
- }, "Option"), /*#__PURE__*/React.createElement(Drilldown.Option, {
383
- id: "groupOption02",
384
- value: 2
385
- }, "Option"), /*#__PURE__*/React.createElement(Drilldown.Option, {
386
- id: "groupOption03",
387
- value: 3
388
- }, "Option"))))));
453
+ render(_Drilldown15 || (_Drilldown15 = _jsx(Drilldown, {
454
+ rootPageId: "page0",
455
+ children: _jsx(Drilldown.Page, {
456
+ id: "page0",
457
+ children: _jsxs(Drilldown.Group, {
458
+ id: "group0",
459
+ selectableType: "multiple",
460
+ children: [_jsx(Drilldown.Option, {
461
+ id: "groupOption01",
462
+ value: 1,
463
+ children: "Option"
464
+ }), _jsx(Drilldown.Option, {
465
+ id: "groupOption02",
466
+ value: 2,
467
+ children: "Option"
468
+ }), _jsx(Drilldown.Option, {
469
+ id: "groupOption03",
470
+ value: 3,
471
+ children: "Option"
472
+ })]
473
+ })
474
+ })
475
+ })));
389
476
  const options = screen.getAllByRole('menuitemcheckbox');
390
477
  expect(options.length).toBe(3);
391
478
  options.forEach(option => {
@@ -393,23 +480,29 @@ describe('<Drilldown.Group />', () => {
393
480
  });
394
481
  });
395
482
  it('all checkboxes should not be visible', async () => {
396
- const _render14 = render(_Drilldown16 || (_Drilldown16 = /*#__PURE__*/React.createElement(Drilldown, {
397
- rootPageId: "page0"
398
- }, /*#__PURE__*/React.createElement(Drilldown.Page, {
399
- id: "page0"
400
- }, /*#__PURE__*/React.createElement(Drilldown.Group, {
401
- id: "group0",
402
- selectableType: "multiple"
403
- }, /*#__PURE__*/React.createElement(Drilldown.Option, {
404
- id: "groupOption01",
405
- value: 1
406
- }, "Option"), /*#__PURE__*/React.createElement(Drilldown.Option, {
407
- id: "groupOption02",
408
- value: 2
409
- }, "Option"), /*#__PURE__*/React.createElement(Drilldown.Option, {
410
- id: "groupOption03",
411
- value: 3
412
- }, "Option")))))),
483
+ const _render14 = render(_Drilldown16 || (_Drilldown16 = _jsx(Drilldown, {
484
+ rootPageId: "page0",
485
+ children: _jsx(Drilldown.Page, {
486
+ id: "page0",
487
+ children: _jsxs(Drilldown.Group, {
488
+ id: "group0",
489
+ selectableType: "multiple",
490
+ children: [_jsx(Drilldown.Option, {
491
+ id: "groupOption01",
492
+ value: 1,
493
+ children: "Option"
494
+ }), _jsx(Drilldown.Option, {
495
+ id: "groupOption02",
496
+ value: 2,
497
+ children: "Option"
498
+ }), _jsx(Drilldown.Option, {
499
+ id: "groupOption03",
500
+ value: 3,
501
+ children: "Option"
502
+ })]
503
+ })
504
+ })
505
+ }))),
413
506
  container = _render14.container;
414
507
  const icons = container.querySelectorAll('svg[name="IconCheck"]');
415
508
  expect(icons.length).toBe(3);
@@ -421,24 +514,30 @@ describe('<Drilldown.Group />', () => {
421
514
  describe('if provided', () => {
422
515
  it('all selected checkboxes should be visible', async () => {
423
516
  const selectedValues = ['item1', 'item3'];
424
- const _render15 = render(/*#__PURE__*/React.createElement(Drilldown, {
425
- rootPageId: "page0"
426
- }, /*#__PURE__*/React.createElement(Drilldown.Page, {
427
- id: "page0"
428
- }, /*#__PURE__*/React.createElement(Drilldown.Group, {
429
- id: "group0",
430
- selectableType: "multiple",
431
- defaultSelected: selectedValues
432
- }, _Drilldown$Option3 || (_Drilldown$Option3 = /*#__PURE__*/React.createElement(Drilldown.Option, {
433
- id: "groupOption01",
434
- value: "item1"
435
- }, "Option")), _Drilldown$Option4 || (_Drilldown$Option4 = /*#__PURE__*/React.createElement(Drilldown.Option, {
436
- id: "groupOption02",
437
- value: "item2"
438
- }, "Option")), _Drilldown$Option5 || (_Drilldown$Option5 = /*#__PURE__*/React.createElement(Drilldown.Option, {
439
- id: "groupOption03",
440
- value: "item3"
441
- }, "Option")))))),
517
+ const _render15 = render(_jsx(Drilldown, {
518
+ rootPageId: "page0",
519
+ children: _jsx(Drilldown.Page, {
520
+ id: "page0",
521
+ children: _jsxs(Drilldown.Group, {
522
+ id: "group0",
523
+ selectableType: "multiple",
524
+ defaultSelected: selectedValues,
525
+ children: [_Drilldown$Option3 || (_Drilldown$Option3 = _jsx(Drilldown.Option, {
526
+ id: "groupOption01",
527
+ value: "item1",
528
+ children: "Option"
529
+ })), _Drilldown$Option4 || (_Drilldown$Option4 = _jsx(Drilldown.Option, {
530
+ id: "groupOption02",
531
+ value: "item2",
532
+ children: "Option"
533
+ })), _Drilldown$Option5 || (_Drilldown$Option5 = _jsx(Drilldown.Option, {
534
+ id: "groupOption03",
535
+ value: "item3",
536
+ children: "Option"
537
+ }))]
538
+ })
539
+ })
540
+ })),
442
541
  container = _render15.container;
443
542
  const options = screen.getAllByRole('menuitemcheckbox');
444
543
  const icons = container.querySelectorAll('svg');
@@ -451,26 +550,32 @@ describe('<Drilldown.Group />', () => {
451
550
  });
452
551
  it("should be overridden by the Option's own defaultSelected", async () => {
453
552
  const selectedValues = ['item1', 'item3'];
454
- render(/*#__PURE__*/React.createElement(Drilldown, {
455
- rootPageId: "page0"
456
- }, /*#__PURE__*/React.createElement(Drilldown.Page, {
457
- id: "page0"
458
- }, /*#__PURE__*/React.createElement(Drilldown.Group, {
459
- id: "group0",
460
- selectableType: "multiple",
461
- defaultSelected: selectedValues
462
- }, _Drilldown$Option6 || (_Drilldown$Option6 = /*#__PURE__*/React.createElement(Drilldown.Option, {
463
- id: "groupOption01",
464
- value: "item1"
465
- }, "Option")), _Drilldown$Option7 || (_Drilldown$Option7 = /*#__PURE__*/React.createElement(Drilldown.Option, {
466
- id: "groupOption02",
467
- value: "item2",
468
- defaultSelected: true
469
- }, "Option")), _Drilldown$Option8 || (_Drilldown$Option8 = /*#__PURE__*/React.createElement(Drilldown.Option, {
470
- id: "groupOption03",
471
- value: "item3",
472
- defaultSelected: false
473
- }, "Option"))))));
553
+ render(_jsx(Drilldown, {
554
+ rootPageId: "page0",
555
+ children: _jsx(Drilldown.Page, {
556
+ id: "page0",
557
+ children: _jsxs(Drilldown.Group, {
558
+ id: "group0",
559
+ selectableType: "multiple",
560
+ defaultSelected: selectedValues,
561
+ children: [_Drilldown$Option6 || (_Drilldown$Option6 = _jsx(Drilldown.Option, {
562
+ id: "groupOption01",
563
+ value: "item1",
564
+ children: "Option"
565
+ })), _Drilldown$Option7 || (_Drilldown$Option7 = _jsx(Drilldown.Option, {
566
+ id: "groupOption02",
567
+ value: "item2",
568
+ defaultSelected: true,
569
+ children: "Option"
570
+ })), _Drilldown$Option8 || (_Drilldown$Option8 = _jsx(Drilldown.Option, {
571
+ id: "groupOption03",
572
+ value: "item3",
573
+ defaultSelected: false,
574
+ children: "Option"
575
+ }))]
576
+ })
577
+ })
578
+ }));
474
579
  const options = screen.getAllByRole('menuitemcheckbox');
475
580
  expect(options[0]).toHaveAttribute('aria-checked', 'true'); // from the group,
476
581
  expect(options[1]).toHaveAttribute('aria-checked', 'true'); // from own prop,
@@ -479,24 +584,30 @@ describe('<Drilldown.Group />', () => {
479
584
  describe('for "single" selectableType', () => {
480
585
  it('the selected option should be checked', async () => {
481
586
  const selectedValues = ['item2'];
482
- render(/*#__PURE__*/React.createElement(Drilldown, {
483
- rootPageId: "page0"
484
- }, /*#__PURE__*/React.createElement(Drilldown.Page, {
485
- id: "page0"
486
- }, /*#__PURE__*/React.createElement(Drilldown.Group, {
487
- id: "group0",
488
- selectableType: "single",
489
- defaultSelected: selectedValues
490
- }, _Drilldown$Option9 || (_Drilldown$Option9 = /*#__PURE__*/React.createElement(Drilldown.Option, {
491
- id: "groupOption01",
492
- value: "item1"
493
- }, "Option")), _Drilldown$Option10 || (_Drilldown$Option10 = /*#__PURE__*/React.createElement(Drilldown.Option, {
494
- id: "groupOption02",
495
- value: "item2"
496
- }, "Option")), _Drilldown$Option11 || (_Drilldown$Option11 = /*#__PURE__*/React.createElement(Drilldown.Option, {
497
- id: "groupOption03",
498
- value: "item3"
499
- }, "Option"))))));
587
+ render(_jsx(Drilldown, {
588
+ rootPageId: "page0",
589
+ children: _jsx(Drilldown.Page, {
590
+ id: "page0",
591
+ children: _jsxs(Drilldown.Group, {
592
+ id: "group0",
593
+ selectableType: "single",
594
+ defaultSelected: selectedValues,
595
+ children: [_Drilldown$Option9 || (_Drilldown$Option9 = _jsx(Drilldown.Option, {
596
+ id: "groupOption01",
597
+ value: "item1",
598
+ children: "Option"
599
+ })), _Drilldown$Option10 || (_Drilldown$Option10 = _jsx(Drilldown.Option, {
600
+ id: "groupOption02",
601
+ value: "item2",
602
+ children: "Option"
603
+ })), _Drilldown$Option11 || (_Drilldown$Option11 = _jsx(Drilldown.Option, {
604
+ id: "groupOption03",
605
+ value: "item3",
606
+ children: "Option"
607
+ }))]
608
+ })
609
+ })
610
+ }));
500
611
  const options = screen.getAllByRole('menuitemradio');
501
612
  expect(options[0]).toHaveAttribute('aria-checked', 'false');
502
613
  expect(options[1]).toHaveAttribute('aria-checked', 'true');
@@ -504,24 +615,30 @@ describe('<Drilldown.Group />', () => {
504
615
  });
505
616
  it("should throw error if multiple items are selected, and shouldn't select any item", async () => {
506
617
  const selectedValues = ['item1', 'item3'];
507
- render(/*#__PURE__*/React.createElement(Drilldown, {
508
- rootPageId: "page0"
509
- }, /*#__PURE__*/React.createElement(Drilldown.Page, {
510
- id: "page0"
511
- }, /*#__PURE__*/React.createElement(Drilldown.Group, {
512
- id: "group0",
513
- selectableType: "single",
514
- defaultSelected: selectedValues
515
- }, _Drilldown$Option12 || (_Drilldown$Option12 = /*#__PURE__*/React.createElement(Drilldown.Option, {
516
- id: "groupOption01",
517
- value: "item1"
518
- }, "Option")), _Drilldown$Option13 || (_Drilldown$Option13 = /*#__PURE__*/React.createElement(Drilldown.Option, {
519
- id: "groupOption02",
520
- value: "item2"
521
- }, "Option")), _Drilldown$Option14 || (_Drilldown$Option14 = /*#__PURE__*/React.createElement(Drilldown.Option, {
522
- id: "groupOption03",
523
- value: "item3"
524
- }, "Option"))))));
618
+ render(_jsx(Drilldown, {
619
+ rootPageId: "page0",
620
+ children: _jsx(Drilldown.Page, {
621
+ id: "page0",
622
+ children: _jsxs(Drilldown.Group, {
623
+ id: "group0",
624
+ selectableType: "single",
625
+ defaultSelected: selectedValues,
626
+ children: [_Drilldown$Option12 || (_Drilldown$Option12 = _jsx(Drilldown.Option, {
627
+ id: "groupOption01",
628
+ value: "item1",
629
+ children: "Option"
630
+ })), _Drilldown$Option13 || (_Drilldown$Option13 = _jsx(Drilldown.Option, {
631
+ id: "groupOption02",
632
+ value: "item2",
633
+ children: "Option"
634
+ })), _Drilldown$Option14 || (_Drilldown$Option14 = _jsx(Drilldown.Option, {
635
+ id: "groupOption03",
636
+ value: "item3",
637
+ children: "Option"
638
+ }))]
639
+ })
640
+ })
641
+ }));
525
642
  const options = screen.getAllByRole('menuitemradio');
526
643
  expect(options[0]).toHaveAttribute('aria-checked', 'false');
527
644
  expect(options[1]).toHaveAttribute('aria-checked', 'false');
@@ -534,24 +651,30 @@ describe('<Drilldown.Group />', () => {
534
651
  describe('selection', () => {
535
652
  it('should fire "onSelect" callback', async () => {
536
653
  const onSelect = vi.fn();
537
- render(/*#__PURE__*/React.createElement(Drilldown, {
538
- rootPageId: "page0"
539
- }, /*#__PURE__*/React.createElement(Drilldown.Page, {
540
- id: "page0"
541
- }, /*#__PURE__*/React.createElement(Drilldown.Group, {
542
- id: "group0",
543
- selectableType: "multiple",
544
- onSelect: onSelect
545
- }, _Drilldown$Option15 || (_Drilldown$Option15 = /*#__PURE__*/React.createElement(Drilldown.Option, {
546
- id: "groupOption01",
547
- value: "item1"
548
- }, "Option 1")), _Drilldown$Option16 || (_Drilldown$Option16 = /*#__PURE__*/React.createElement(Drilldown.Option, {
549
- id: "groupOption02",
550
- value: "item2"
551
- }, "Option 2")), _Drilldown$Option17 || (_Drilldown$Option17 = /*#__PURE__*/React.createElement(Drilldown.Option, {
552
- id: "groupOption03",
553
- value: "item3"
554
- }, "Option 3"))))));
654
+ render(_jsx(Drilldown, {
655
+ rootPageId: "page0",
656
+ children: _jsx(Drilldown.Page, {
657
+ id: "page0",
658
+ children: _jsxs(Drilldown.Group, {
659
+ id: "group0",
660
+ selectableType: "multiple",
661
+ onSelect: onSelect,
662
+ children: [_Drilldown$Option15 || (_Drilldown$Option15 = _jsx(Drilldown.Option, {
663
+ id: "groupOption01",
664
+ value: "item1",
665
+ children: "Option 1"
666
+ })), _Drilldown$Option16 || (_Drilldown$Option16 = _jsx(Drilldown.Option, {
667
+ id: "groupOption02",
668
+ value: "item2",
669
+ children: "Option 2"
670
+ })), _Drilldown$Option17 || (_Drilldown$Option17 = _jsx(Drilldown.Option, {
671
+ id: "groupOption03",
672
+ value: "item3",
673
+ children: "Option 3"
674
+ }))]
675
+ })
676
+ })
677
+ }));
555
678
  const option2 = screen.getByText('Option 2');
556
679
  await userEvent.click(option2);
557
680
  await waitFor(() => {