@dxc-technology/halstack-react 0.0.0-c293b72 → 0.0.0-c2b6ec9

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 (308) hide show
  1. package/BackgroundColorContext.js +1 -1
  2. package/HalstackContext.d.ts +2 -5
  3. package/HalstackContext.js +6 -6
  4. package/accordion/Accordion.accessibility.test.d.ts +1 -0
  5. package/accordion/Accordion.accessibility.test.js +4 -4
  6. package/accordion/Accordion.js +9 -10
  7. package/accordion/Accordion.stories.tsx +4 -14
  8. package/accordion/Accordion.test.d.ts +1 -0
  9. package/accordion/Accordion.test.js +3 -3
  10. package/accordion-group/AccordionGroup.accessibility.test.d.ts +1 -0
  11. package/accordion-group/AccordionGroup.accessibility.test.js +11 -17
  12. package/accordion-group/AccordionGroup.js +1 -1
  13. package/accordion-group/AccordionGroup.stories.tsx +23 -23
  14. package/accordion-group/AccordionGroup.test.d.ts +1 -0
  15. package/accordion-group/AccordionGroup.test.js +5 -9
  16. package/accordion-group/AccordionGroupAccordion.js +1 -1
  17. package/action-icon/ActionIcon.accessibility.test.d.ts +1 -0
  18. package/action-icon/ActionIcon.accessibility.test.js +4 -4
  19. package/action-icon/ActionIcon.test.d.ts +1 -0
  20. package/action-icon/ActionIcon.test.js +1 -1
  21. package/alert/Alert.accessibility.test.d.ts +1 -0
  22. package/alert/Alert.accessibility.test.js +6 -6
  23. package/alert/Alert.js +6 -3
  24. package/alert/Alert.test.d.ts +1 -0
  25. package/alert/Alert.test.js +1 -1
  26. package/badge/Badge.accessibility.test.d.ts +1 -0
  27. package/badge/Badge.accessibility.test.js +5 -5
  28. package/badge/Badge.test.d.ts +1 -0
  29. package/badge/Badge.test.js +2 -2
  30. package/box/Box.accessibility.test.d.ts +1 -0
  31. package/box/Box.accessibility.test.js +3 -3
  32. package/box/Box.js +1 -1
  33. package/box/Box.test.d.ts +1 -0
  34. package/box/Box.test.js +1 -1
  35. package/breadcrumbs/Breadcrumbs.accessibility.test.d.ts +1 -0
  36. package/breadcrumbs/Breadcrumbs.accessibility.test.js +96 -0
  37. package/breadcrumbs/Breadcrumbs.d.ts +4 -0
  38. package/breadcrumbs/Breadcrumbs.js +79 -0
  39. package/breadcrumbs/Breadcrumbs.stories.tsx +194 -0
  40. package/breadcrumbs/Breadcrumbs.test.d.ts +1 -0
  41. package/breadcrumbs/Breadcrumbs.test.js +168 -0
  42. package/breadcrumbs/Item.d.ts +4 -0
  43. package/breadcrumbs/Item.js +52 -0
  44. package/breadcrumbs/dropdownTheme.d.ts +53 -0
  45. package/breadcrumbs/dropdownTheme.js +62 -0
  46. package/breadcrumbs/types.d.ts +16 -0
  47. package/breadcrumbs/types.js +5 -0
  48. package/bulleted-list/BulletedList.accessibility.test.d.ts +1 -0
  49. package/bulleted-list/BulletedList.accessibility.test.js +18 -6
  50. package/bulleted-list/BulletedList.js +2 -2
  51. package/button/Button.accessibility.test.d.ts +1 -0
  52. package/button/Button.accessibility.test.js +6 -6
  53. package/button/Button.js +1 -1
  54. package/button/Button.stories.tsx +3 -3
  55. package/button/Button.test.d.ts +1 -0
  56. package/button/Button.test.js +1 -1
  57. package/card/Card.accessibility.test.d.ts +1 -0
  58. package/card/Card.accessibility.test.js +3 -3
  59. package/card/Card.js +3 -2
  60. package/card/Card.stories.tsx +1 -1
  61. package/card/Card.test.d.ts +1 -0
  62. package/card/Card.test.js +1 -1
  63. package/checkbox/Checkbox.accessibility.test.d.ts +1 -0
  64. package/checkbox/Checkbox.accessibility.test.js +5 -5
  65. package/checkbox/Checkbox.js +10 -13
  66. package/checkbox/Checkbox.test.d.ts +1 -0
  67. package/checkbox/Checkbox.test.js +1 -1
  68. package/chip/Chip.accessibility.test.d.ts +1 -0
  69. package/chip/Chip.accessibility.test.js +4 -4
  70. package/chip/Chip.js +3 -1
  71. package/chip/Chip.stories.tsx +1 -1
  72. package/chip/Chip.test.d.ts +1 -0
  73. package/chip/Chip.test.js +1 -1
  74. package/common/coreTokens.js +3 -3
  75. package/common/variables.d.ts +2 -5
  76. package/common/variables.js +68 -71
  77. package/container/Container.stories.tsx +3 -3
  78. package/contextual-menu/ContextualMenu.accessibility.test.d.ts +1 -0
  79. package/contextual-menu/ContextualMenu.accessibility.test.js +15 -3
  80. package/contextual-menu/ContextualMenu.d.ts +3 -5
  81. package/contextual-menu/ContextualMenu.js +89 -52
  82. package/contextual-menu/ContextualMenu.stories.tsx +115 -74
  83. package/contextual-menu/ContextualMenu.test.d.ts +1 -0
  84. package/contextual-menu/ContextualMenu.test.js +200 -24
  85. package/contextual-menu/GroupItem.d.ts +4 -0
  86. package/contextual-menu/GroupItem.js +67 -0
  87. package/contextual-menu/ItemAction.d.ts +4 -0
  88. package/contextual-menu/ItemAction.js +50 -0
  89. package/contextual-menu/MenuItem.d.ts +4 -0
  90. package/contextual-menu/MenuItem.js +29 -0
  91. package/contextual-menu/SingleItem.d.ts +4 -0
  92. package/contextual-menu/SingleItem.js +38 -0
  93. package/contextual-menu/types.d.ts +50 -11
  94. package/date-input/Calendar.js +47 -31
  95. package/date-input/DateInput.accessibility.test.d.ts +1 -0
  96. package/date-input/DateInput.accessibility.test.js +24 -11
  97. package/date-input/DateInput.js +27 -21
  98. package/date-input/DateInput.stories.tsx +18 -12
  99. package/date-input/DateInput.test.d.ts +1 -0
  100. package/date-input/DateInput.test.js +39 -39
  101. package/date-input/DatePicker.js +1 -1
  102. package/date-input/YearPicker.js +10 -5
  103. package/dialog/Dialog.accessibility.test.d.ts +1 -0
  104. package/dialog/Dialog.accessibility.test.js +5 -5
  105. package/dialog/Dialog.js +9 -20
  106. package/dialog/Dialog.stories.tsx +8 -4
  107. package/dialog/Dialog.test.d.ts +1 -0
  108. package/dialog/Dialog.test.js +111 -48
  109. package/divider/Divider.accessibility.test.d.ts +1 -0
  110. package/divider/Divider.accessibility.test.js +2 -2
  111. package/divider/Divider.test.d.ts +1 -0
  112. package/dropdown/Dropdown.accessibility.test.d.ts +1 -0
  113. package/dropdown/Dropdown.accessibility.test.js +12 -9
  114. package/dropdown/Dropdown.js +16 -15
  115. package/dropdown/Dropdown.stories.tsx +11 -11
  116. package/dropdown/Dropdown.test.d.ts +1 -0
  117. package/dropdown/Dropdown.test.js +101 -72
  118. package/dropdown/DropdownMenu.js +4 -4
  119. package/dropdown/DropdownMenuItem.js +2 -1
  120. package/file-input/FileInput.accessibility.test.d.ts +1 -0
  121. package/file-input/FileInput.accessibility.test.js +30 -23
  122. package/file-input/FileInput.js +3 -8
  123. package/file-input/FileInput.test.d.ts +1 -0
  124. package/file-input/FileInput.test.js +44 -22
  125. package/file-input/FileItem.js +6 -2
  126. package/file-input/types.d.ts +0 -4
  127. package/footer/Footer.accessibility.test.d.ts +1 -0
  128. package/footer/Footer.accessibility.test.js +13 -5
  129. package/footer/Footer.js +1 -1
  130. package/footer/Footer.stories.tsx +12 -0
  131. package/footer/Footer.test.d.ts +1 -0
  132. package/footer/Footer.test.js +1 -1
  133. package/footer/Icons.js +2 -30
  134. package/grid/Grid.stories.tsx +3 -1
  135. package/header/Header.accessibility.test.d.ts +1 -0
  136. package/header/Header.accessibility.test.js +16 -6
  137. package/header/Header.js +3 -2
  138. package/header/Header.stories.tsx +17 -1
  139. package/header/Header.test.d.ts +1 -0
  140. package/header/Header.test.js +1 -1
  141. package/header/Icons.js +1 -6
  142. package/heading/Heading.accessibility.test.d.ts +1 -0
  143. package/heading/Heading.accessibility.test.js +3 -3
  144. package/heading/Heading.js +1 -1
  145. package/heading/Heading.test.d.ts +1 -0
  146. package/heading/Heading.test.js +1 -14
  147. package/icon/Icon.accessibility.test.d.ts +1 -0
  148. package/icon/Icon.accessibility.test.js +2 -2
  149. package/icon/Icon.js +1 -1
  150. package/image/Image.accessibility.test.d.ts +1 -0
  151. package/image/Image.accessibility.test.js +3 -3
  152. package/image/Image.js +1 -1
  153. package/layout/ApplicationLayout.js +9 -6
  154. package/layout/Icons.d.ts +0 -1
  155. package/layout/Icons.js +1 -9
  156. package/link/Link.accessibility.test.d.ts +1 -0
  157. package/link/Link.accessibility.test.js +8 -12
  158. package/link/Link.js +1 -1
  159. package/link/Link.stories.tsx +2 -2
  160. package/link/Link.test.d.ts +1 -0
  161. package/link/Link.test.js +1 -1
  162. package/main.d.ts +2 -1
  163. package/main.js +8 -1
  164. package/nav-tabs/NavTabs.accessibility.test.d.ts +1 -0
  165. package/nav-tabs/NavTabs.accessibility.test.js +3 -3
  166. package/nav-tabs/NavTabs.js +19 -4
  167. package/nav-tabs/NavTabs.stories.tsx +18 -3
  168. package/nav-tabs/NavTabs.test.d.ts +1 -0
  169. package/nav-tabs/NavTabs.test.js +9 -7
  170. package/nav-tabs/Tab.js +7 -7
  171. package/number-input/NumberInput.accessibility.test.d.ts +1 -0
  172. package/number-input/NumberInput.accessibility.test.js +9 -10
  173. package/number-input/NumberInput.js +6 -3
  174. package/number-input/NumberInput.stories.tsx +11 -16
  175. package/number-input/NumberInput.test.d.ts +1 -0
  176. package/number-input/NumberInput.test.js +6 -7
  177. package/package.json +25 -20
  178. package/paginator/Paginator.accessibility.test.d.ts +1 -0
  179. package/paginator/Paginator.accessibility.test.js +4 -5
  180. package/paginator/Paginator.js +13 -10
  181. package/paginator/Paginator.test.d.ts +1 -0
  182. package/paginator/Paginator.test.js +2 -3
  183. package/paragraph/Paragraph.accessibility.test.d.ts +1 -0
  184. package/paragraph/Paragraph.accessibility.test.js +2 -2
  185. package/password-input/PasswordInput.accessibility.test.d.ts +1 -0
  186. package/password-input/PasswordInput.accessibility.test.js +7 -8
  187. package/password-input/PasswordInput.js +11 -7
  188. package/password-input/PasswordInput.stories.tsx +10 -1
  189. package/password-input/PasswordInput.test.d.ts +1 -0
  190. package/password-input/PasswordInput.test.js +6 -7
  191. package/progress-bar/ProgressBar.accessibility.test.d.ts +1 -0
  192. package/progress-bar/ProgressBar.accessibility.test.js +3 -3
  193. package/progress-bar/ProgressBar.js +6 -4
  194. package/progress-bar/ProgressBar.test.d.ts +1 -0
  195. package/progress-bar/ProgressBar.test.js +1 -1
  196. package/quick-nav/QuickNav.accessibility.test.d.ts +1 -0
  197. package/quick-nav/QuickNav.accessibility.test.js +2 -2
  198. package/quick-nav/QuickNav.js +1 -1
  199. package/radio-group/Radio.js +6 -9
  200. package/radio-group/RadioGroup.accessibility.test.d.ts +1 -0
  201. package/radio-group/RadioGroup.accessibility.test.js +4 -4
  202. package/radio-group/RadioGroup.js +14 -16
  203. package/radio-group/RadioGroup.test.d.ts +1 -0
  204. package/radio-group/RadioGroup.test.js +3 -5
  205. package/resultset-table/ResultsetTable.accessibility.test.d.ts +1 -0
  206. package/resultset-table/ResultsetTable.accessibility.test.js +16 -6
  207. package/resultset-table/ResultsetTable.js +3 -2
  208. package/resultset-table/ResultsetTable.stories.tsx +13 -1
  209. package/resultset-table/ResultsetTable.test.d.ts +1 -0
  210. package/resultset-table/ResultsetTable.test.js +2 -4
  211. package/select/Listbox.js +19 -13
  212. package/select/Option.js +2 -1
  213. package/select/Select.accessibility.test.d.ts +1 -0
  214. package/select/Select.accessibility.test.js +18 -8
  215. package/select/Select.js +25 -21
  216. package/select/Select.stories.tsx +36 -15
  217. package/select/Select.test.d.ts +1 -0
  218. package/select/Select.test.js +42 -51
  219. package/sidenav/Sidenav.accessibility.test.d.ts +1 -0
  220. package/sidenav/Sidenav.accessibility.test.js +3 -3
  221. package/sidenav/Sidenav.js +1 -1
  222. package/sidenav/Sidenav.stories.tsx +1 -1
  223. package/sidenav/Sidenav.test.d.ts +1 -0
  224. package/sidenav/Sidenav.test.js +1 -1
  225. package/slider/Slider.accessibility.test.d.ts +1 -0
  226. package/slider/Slider.accessibility.test.js +5 -6
  227. package/slider/Slider.js +11 -13
  228. package/slider/Slider.stories.tsx +180 -0
  229. package/slider/Slider.test.d.ts +1 -0
  230. package/slider/Slider.test.js +13 -11
  231. package/spinner/Spinner.accessibility.test.d.ts +1 -0
  232. package/spinner/Spinner.accessibility.test.js +6 -6
  233. package/spinner/Spinner.js +6 -2
  234. package/spinner/Spinner.test.d.ts +1 -0
  235. package/spinner/Spinner.test.js +1 -1
  236. package/status-light/StatusLight.accessibility.test.d.ts +1 -0
  237. package/status-light/StatusLight.accessibility.test.js +8 -8
  238. package/status-light/StatusLight.test.d.ts +1 -0
  239. package/status-light/StatusLight.test.js +1 -1
  240. package/switch/Switch.accessibility.test.d.ts +1 -0
  241. package/switch/Switch.accessibility.test.js +14 -5
  242. package/switch/Switch.js +6 -9
  243. package/switch/Switch.stories.tsx +12 -0
  244. package/switch/Switch.test.d.ts +1 -0
  245. package/switch/Switch.test.js +1 -1
  246. package/table/Table.accessibility.test.d.ts +1 -0
  247. package/table/Table.accessibility.test.js +16 -6
  248. package/table/Table.js +1 -1
  249. package/table/Table.stories.tsx +13 -1
  250. package/table/Table.test.d.ts +1 -0
  251. package/table/Table.test.js +2 -4
  252. package/tabs/Tab.js +1 -1
  253. package/tabs/Tabs.accessibility.test.d.ts +1 -0
  254. package/tabs/Tabs.accessibility.test.js +3 -3
  255. package/tabs/Tabs.js +1 -1
  256. package/tabs/Tabs.stories.tsx +7 -1
  257. package/tabs/Tabs.test.d.ts +1 -0
  258. package/tabs/Tabs.test.js +1 -1
  259. package/tag/Tag.accessibility.test.d.ts +1 -0
  260. package/tag/Tag.accessibility.test.js +4 -4
  261. package/tag/Tag.js +1 -1
  262. package/tag/Tag.stories.tsx +1 -1
  263. package/tag/Tag.test.d.ts +1 -0
  264. package/tag/Tag.test.js +1 -1
  265. package/text-input/Suggestion.js +1 -1
  266. package/text-input/Suggestions.js +14 -6
  267. package/text-input/TextInput.accessibility.test.d.ts +1 -0
  268. package/text-input/TextInput.accessibility.test.js +11 -12
  269. package/text-input/TextInput.js +29 -25
  270. package/text-input/TextInput.stories.tsx +19 -7
  271. package/text-input/TextInput.test.d.ts +1 -0
  272. package/text-input/TextInput.test.js +2 -3
  273. package/textarea/Textarea.accessibility.test.d.ts +1 -0
  274. package/textarea/Textarea.accessibility.test.js +7 -7
  275. package/textarea/Textarea.js +14 -13
  276. package/textarea/Textarea.test.d.ts +1 -0
  277. package/textarea/Textarea.test.js +1 -1
  278. package/toggle-group/ToggleGroup.accessibility.test.d.ts +1 -0
  279. package/toggle-group/ToggleGroup.accessibility.test.js +5 -5
  280. package/toggle-group/ToggleGroup.js +6 -9
  281. package/toggle-group/ToggleGroup.stories.tsx +1 -1
  282. package/toggle-group/ToggleGroup.test.d.ts +1 -0
  283. package/toggle-group/ToggleGroup.test.js +1 -1
  284. package/tooltip/Tooltip.accessibility.test.d.ts +1 -0
  285. package/tooltip/Tooltip.accessibility.test.js +144 -0
  286. package/tooltip/Tooltip.d.ts +4 -0
  287. package/tooltip/Tooltip.js +50 -0
  288. package/tooltip/Tooltip.stories.tsx +111 -0
  289. package/tooltip/Tooltip.test.d.ts +1 -0
  290. package/tooltip/Tooltip.test.js +112 -0
  291. package/tooltip/types.d.ts +16 -0
  292. package/tooltip/types.js +5 -0
  293. package/typography/Typography.accessibility.test.d.ts +1 -0
  294. package/typography/Typography.accessibility.test.js +12 -12
  295. package/typography/Typography.stories.tsx +1 -3
  296. package/useTheme.d.ts +2 -5
  297. package/utils/BaseTypography.js +1 -1
  298. package/utils/FocusLock.js +3 -2
  299. package/wizard/Wizard.accessibility.test.d.ts +1 -0
  300. package/wizard/Wizard.accessibility.test.js +3 -3
  301. package/wizard/Wizard.js +1 -9
  302. package/wizard/Wizard.stories.tsx +1 -1
  303. package/wizard/Wizard.test.d.ts +1 -0
  304. package/wizard/Wizard.test.js +1 -1
  305. package/contextual-menu/MenuItemAction.d.ts +0 -4
  306. package/contextual-menu/MenuItemAction.js +0 -46
  307. package/paginator/Icons.d.ts +0 -5
  308. package/paginator/Icons.js +0 -40
@@ -8,7 +8,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
  var _react2 = require("@testing-library/react");
10
10
  var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
11
- var _Dropdown = _interopRequireDefault(require("./Dropdown.tsx"));
11
+ var _Dropdown = _interopRequireDefault(require("./Dropdown"));
12
12
  // Mocking DOMRect for Radix Primitive Popover
13
13
  global.globalThis = global;
14
14
  global.DOMRect = {
@@ -27,7 +27,7 @@ global.ResizeObserver = /*#__PURE__*/function () {
27
27
  function ResizeObserver() {
28
28
  (0, _classCallCheck2["default"])(this, ResizeObserver);
29
29
  }
30
- (0, _createClass2["default"])(ResizeObserver, [{
30
+ return (0, _createClass2["default"])(ResizeObserver, [{
31
31
  key: "observe",
32
32
  value: function observe() {}
33
33
  }, {
@@ -37,7 +37,6 @@ global.ResizeObserver = /*#__PURE__*/function () {
37
37
  key: "disconnect",
38
38
  value: function disconnect() {}
39
39
  }]);
40
- return ResizeObserver;
41
40
  }();
42
41
  var options = [{
43
42
  value: "1",
@@ -54,86 +53,92 @@ var options = [{
54
53
  }];
55
54
  describe("Dropdown component tests", function () {
56
55
  test("Renders with correct aria attributes", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
57
- var _render, getAllByRole, getByRole, dropdown, menu;
56
+ var onSelectOption, _render, getAllByRole, getByRole, dropdown, menu;
58
57
  return _regenerator["default"].wrap(function _callee$(_context) {
59
58
  while (1) switch (_context.prev = _context.next) {
60
59
  case 0:
60
+ onSelectOption = jest.fn();
61
61
  _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
62
62
  options: options,
63
- label: "dropdown-test"
63
+ label: "dropdown-test",
64
+ onSelectOption: onSelectOption
64
65
  })), getAllByRole = _render.getAllByRole, getByRole = _render.getByRole;
65
66
  dropdown = getByRole("button");
66
67
  expect(dropdown.getAttribute("aria-haspopup")).toBe("true");
67
68
  expect(dropdown.getAttribute("aria-expanded")).toBeNull();
68
69
  expect(dropdown.getAttribute("aria-activedescendant")).toBeNull();
69
- _context.next = 7;
70
+ _context.next = 8;
70
71
  return _userEvent["default"].click(dropdown);
71
- case 7:
72
+ case 8:
72
73
  menu = getByRole("menu");
73
74
  expect(dropdown.getAttribute("aria-controls")).toBe(menu.id);
74
75
  expect(dropdown.getAttribute("aria-expanded")).toBe("true");
75
- expect(menu.getAttribute("aria-activedescendant")).toBe("option-0");
76
+ expect(menu.getAttribute("aria-activedescendant")).toBe("".concat(menu.id, "-option-0"));
76
77
  expect(menu.getAttribute("aria-orientation")).toBe("vertical");
77
78
  expect(menu.getAttribute("aria-labelledby")).toBe(dropdown.id);
78
79
  expect(getAllByRole("menuitem").length).toBe(4);
79
- case 14:
80
+ case 15:
80
81
  case "end":
81
82
  return _context.stop();
82
83
  }
83
84
  }, _callee);
84
85
  })));
85
86
  test("Button trigger opens and closes the menu options when clicked", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
86
- var _render2, getByRole, queryByRole, getByText, dropdown;
87
+ var onSelectOption, _render2, getByRole, queryByRole, getByText, dropdown;
87
88
  return _regenerator["default"].wrap(function _callee2$(_context2) {
88
89
  while (1) switch (_context2.prev = _context2.next) {
89
90
  case 0:
91
+ onSelectOption = jest.fn();
90
92
  _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
91
93
  options: options,
92
- label: "dropdown-test"
94
+ label: "dropdown-test",
95
+ onSelectOption: onSelectOption
93
96
  })), getByRole = _render2.getByRole, queryByRole = _render2.queryByRole, getByText = _render2.getByText;
94
97
  dropdown = getByRole("button");
95
98
  expect(queryByRole("menu")).toBeFalsy();
96
- _context2.next = 5;
99
+ _context2.next = 6;
97
100
  return _userEvent["default"].click(dropdown);
98
- case 5:
101
+ case 6:
99
102
  expect(queryByRole("menu")).toBeTruthy();
100
103
  expect(getByText("Amazon")).toBeTruthy();
101
104
  expect(getByText("Ebay")).toBeTruthy();
102
105
  expect(getByText("Wallapop")).toBeTruthy();
103
106
  expect(getByText("Aliexpress")).toBeTruthy();
104
- _context2.next = 12;
107
+ _context2.next = 13;
105
108
  return _userEvent["default"].click(dropdown);
106
- case 12:
107
- expect(queryByRole("menu")).toBeFalsy();
108
109
  case 13:
110
+ expect(queryByRole("menu")).toBeFalsy();
111
+ case 14:
109
112
  case "end":
110
113
  return _context2.stop();
111
114
  }
112
115
  }, _callee2);
113
116
  })));
114
117
  test("Button trigger is not interactive when disabled", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
115
- var _render3, getByRole, queryByRole, queryByText, dropdown;
118
+ var onSelectOption, _render3, getByRole, queryByRole, queryByText, dropdown;
116
119
  return _regenerator["default"].wrap(function _callee3$(_context3) {
117
120
  while (1) switch (_context3.prev = _context3.next) {
118
121
  case 0:
122
+ onSelectOption = jest.fn();
119
123
  _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
120
124
  disabled: true,
121
125
  options: options,
122
- label: "dropdown-test"
126
+ label: "dropdown-test",
127
+ onSelectOption: onSelectOption
123
128
  })), getByRole = _render3.getByRole, queryByRole = _render3.queryByRole, queryByText = _render3.queryByText;
124
129
  dropdown = getByRole("button");
125
130
  expect(queryByRole("menu")).toBeFalsy();
126
- _context3.next = 5;
131
+ _context3.next = 6;
127
132
  return _userEvent["default"].click(dropdown);
128
- case 5:
133
+ case 6:
129
134
  expect(queryByRole("menu")).toBeFalsy();
130
135
  expect(queryByText("Amazon")).toBeFalsy();
131
- _context3.next = 9;
136
+ _context3.next = 10;
132
137
  return _userEvent["default"].click(dropdown);
133
- case 9:
138
+ case 10:
134
139
  expect(queryByRole("menu")).toBeFalsy();
135
140
  expect(dropdown.getAttribute("aria-expanded")).toBeNull();
136
- case 11:
141
+ case 12:
137
142
  case "end":
138
143
  return _context3.stop();
139
144
  }
@@ -166,10 +171,12 @@ describe("Dropdown component tests", function () {
166
171
  }, _callee4);
167
172
  })));
168
173
  test("When expandOnHover is true, the dropdown trigger shows and hides the menu when it is hovered", function () {
174
+ var onSelectOption = jest.fn();
169
175
  var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
170
176
  options: options,
171
177
  expandOnHover: true,
172
- label: "dropdown-test"
178
+ label: "dropdown-test",
179
+ onSelectOption: onSelectOption
173
180
  })),
174
181
  queryByText = _render5.queryByText,
175
182
  getByRole = _render5.getByRole,
@@ -180,34 +187,38 @@ describe("Dropdown component tests", function () {
180
187
  var menu = getByRole("menu");
181
188
  expect(menu).toBeTruthy();
182
189
  expect(document.activeElement === menu).toBeTruthy();
183
- expect(menu.getAttribute("aria-activedescendant")).toBe("option-0");
190
+ expect(menu.getAttribute("aria-activedescendant")).toBe("".concat(menu.id, "-option-0"));
184
191
  });
185
192
  test("The menu is closed when the dropdown loses the focus (blur)", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
186
- var _render6, getByRole, queryByRole, dropdown;
193
+ var onSelectOption, _render6, getByRole, queryByRole, dropdown;
187
194
  return _regenerator["default"].wrap(function _callee5$(_context5) {
188
195
  while (1) switch (_context5.prev = _context5.next) {
189
196
  case 0:
197
+ onSelectOption = jest.fn();
190
198
  _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
191
199
  options: options,
192
- label: "dropdown-test"
200
+ label: "dropdown-test",
201
+ onSelectOption: onSelectOption
193
202
  })), getByRole = _render6.getByRole, queryByRole = _render6.queryByRole;
194
203
  dropdown = getByRole("button");
195
- _context5.next = 4;
204
+ _context5.next = 5;
196
205
  return _userEvent["default"].click(dropdown);
197
- case 4:
206
+ case 5:
198
207
  expect(getByRole("menu")).toBeTruthy();
199
208
  _react2.fireEvent.blur(getByRole("menu"));
200
209
  expect(queryByRole("menu")).toBeFalsy();
201
- case 7:
210
+ case 8:
202
211
  case "end":
203
212
  return _context5.stop();
204
213
  }
205
214
  }, _callee5);
206
215
  })));
207
216
  test("Menu button key events - Arrow up opens the list and moves the focus to the last menu item", function () {
217
+ var onSelectOption = jest.fn();
208
218
  var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
209
219
  options: options,
210
- label: "dropdown-test"
220
+ label: "dropdown-test",
221
+ onSelectOption: onSelectOption
211
222
  })),
212
223
  getByRole = _render7.getByRole;
213
224
  var dropdown = getByRole("button");
@@ -220,12 +231,14 @@ describe("Dropdown component tests", function () {
220
231
  var menu = getByRole("menu");
221
232
  expect(menu).toBeTruthy();
222
233
  expect(document.activeElement === menu).toBeTruthy();
223
- expect(getByRole("menu").getAttribute("aria-activedescendant")).toBe("option-3");
234
+ expect(getByRole("menu").getAttribute("aria-activedescendant")).toBe("".concat(menu.id, "-option-3"));
224
235
  });
225
236
  test("Menu button key events - Arrow down opens the list and moves the focus to the first menu item", function () {
237
+ var onSelectOption = jest.fn();
226
238
  var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
227
239
  options: options,
228
- label: "dropdown-test"
240
+ label: "dropdown-test",
241
+ onSelectOption: onSelectOption
229
242
  })),
230
243
  getByRole = _render8.getByRole;
231
244
  var dropdown = getByRole("button");
@@ -238,12 +251,14 @@ describe("Dropdown component tests", function () {
238
251
  var menu = getByRole("menu");
239
252
  expect(menu).toBeTruthy();
240
253
  expect(document.activeElement === menu).toBeTruthy();
241
- expect(getByRole("menu").getAttribute("aria-activedescendant")).toBe("option-0");
254
+ expect(getByRole("menu").getAttribute("aria-activedescendant")).toBe("".concat(menu.id, "-option-0"));
242
255
  });
243
256
  test("Menu button key events - Enter opens the list and moves the focus to the first menu item", function () {
257
+ var onSelectOption = jest.fn();
244
258
  var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
245
259
  options: options,
246
- label: "dropdown-test"
260
+ label: "dropdown-test",
261
+ onSelectOption: onSelectOption
247
262
  })),
248
263
  getByRole = _render9.getByRole;
249
264
  var dropdown = getByRole("button");
@@ -256,12 +271,14 @@ describe("Dropdown component tests", function () {
256
271
  var menu = getByRole("menu");
257
272
  expect(menu).toBeTruthy();
258
273
  expect(document.activeElement === menu).toBeTruthy();
259
- expect(getByRole("menu").getAttribute("aria-activedescendant")).toBe("option-0");
274
+ expect(getByRole("menu").getAttribute("aria-activedescendant")).toBe("".concat(menu.id, "-option-0"));
260
275
  });
261
276
  test("Menu button key events - Space opens the list and moves the focus to the first menu item", function () {
277
+ var onSelectOption = jest.fn();
262
278
  var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
263
279
  options: options,
264
- label: "dropdown-test"
280
+ label: "dropdown-test",
281
+ onSelectOption: onSelectOption
265
282
  })),
266
283
  getByRole = _render10.getByRole;
267
284
  var dropdown = getByRole("button");
@@ -274,7 +291,7 @@ describe("Dropdown component tests", function () {
274
291
  var menu = getByRole("menu");
275
292
  expect(menu).toBeTruthy();
276
293
  expect(document.activeElement === menu).toBeTruthy();
277
- expect(getByRole("menu").getAttribute("aria-activedescendant")).toBe("option-0");
294
+ expect(getByRole("menu").getAttribute("aria-activedescendant")).toBe("".concat(menu.id, "-option-0"));
278
295
  });
279
296
  test("Menu key events - Arrow up moves the focus to the previous menu item", function () {
280
297
  var onSelectOption = jest.fn();
@@ -298,7 +315,7 @@ describe("Dropdown component tests", function () {
298
315
  charCode: 38
299
316
  });
300
317
  expect(document.activeElement === menu).toBeTruthy();
301
- expect(menu.getAttribute("aria-activedescendant")).toBe("option-2");
318
+ expect(menu.getAttribute("aria-activedescendant")).toBe("".concat(menu.id, "-option-2"));
302
319
  _react2.fireEvent.keyDown(menu, {
303
320
  key: "Enter",
304
321
  code: "Enter",
@@ -329,7 +346,7 @@ describe("Dropdown component tests", function () {
329
346
  charCode: 38
330
347
  });
331
348
  expect(document.activeElement === menu).toBeTruthy();
332
- expect(menu.getAttribute("aria-activedescendant")).toBe("option-3");
349
+ expect(menu.getAttribute("aria-activedescendant")).toBe("".concat(menu.id, "-option-3"));
333
350
  _react2.fireEvent.keyDown(menu, {
334
351
  key: "Enter",
335
352
  code: "Enter",
@@ -371,7 +388,7 @@ describe("Dropdown component tests", function () {
371
388
  charCode: 40
372
389
  });
373
390
  expect(document.activeElement === menu).toBeTruthy();
374
- expect(menu.getAttribute("aria-activedescendant")).toBe("option-2");
391
+ expect(menu.getAttribute("aria-activedescendant")).toBe("".concat(menu.id, "-option-2"));
375
392
  _react2.fireEvent.keyDown(menu, {
376
393
  key: "Enter",
377
394
  code: "Enter",
@@ -407,7 +424,7 @@ describe("Dropdown component tests", function () {
407
424
  charCode: 40
408
425
  });
409
426
  expect(document.activeElement === menu).toBeTruthy();
410
- expect(menu.getAttribute("aria-activedescendant")).toBe("option-0");
427
+ expect(menu.getAttribute("aria-activedescendant")).toBe("".concat(menu.id, "-option-0"));
411
428
  _react2.fireEvent.keyDown(menu, {
412
429
  key: "Enter",
413
430
  code: "Enter",
@@ -446,17 +463,19 @@ describe("Dropdown component tests", function () {
446
463
  }, _callee8);
447
464
  })));
448
465
  test("Menu key events - Esc closes the menu and sets focus on the menu button", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee9() {
449
- var _render16, getByRole, queryByRole;
466
+ var onSelectOption, _render16, getByRole, queryByRole;
450
467
  return _regenerator["default"].wrap(function _callee9$(_context9) {
451
468
  while (1) switch (_context9.prev = _context9.next) {
452
469
  case 0:
470
+ onSelectOption = jest.fn();
453
471
  _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
454
472
  options: options,
455
- label: "dropdown-test"
473
+ label: "dropdown-test",
474
+ onSelectOption: onSelectOption
456
475
  })), getByRole = _render16.getByRole, queryByRole = _render16.queryByRole;
457
- _context9.next = 3;
476
+ _context9.next = 4;
458
477
  return _userEvent["default"].click(getByRole("button"));
459
- case 3:
478
+ case 4:
460
479
  _react2.fireEvent.keyDown(getByRole("menu"), {
461
480
  key: "Esc",
462
481
  code: "Esc",
@@ -465,16 +484,18 @@ describe("Dropdown component tests", function () {
465
484
  });
466
485
  expect(queryByRole("menu")).toBeFalsy();
467
486
  expect(document.activeElement === getByRole("button")).toBeTruthy();
468
- case 6:
487
+ case 7:
469
488
  case "end":
470
489
  return _context9.stop();
471
490
  }
472
491
  }, _callee9);
473
492
  })));
474
493
  test("Menu key events - Home moves the focus to the first menu item", function () {
494
+ var onSelectOption = jest.fn();
475
495
  var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
476
496
  options: options,
477
- label: "dropdown-test-1"
497
+ label: "dropdown-test-1",
498
+ onSelectOption: onSelectOption
478
499
  })),
479
500
  getByRole = _render17.getByRole;
480
501
  _react2.fireEvent.keyDown(getByRole("button"), {
@@ -484,46 +505,50 @@ describe("Dropdown component tests", function () {
484
505
  charCode: 38
485
506
  });
486
507
  var menu = getByRole("menu");
487
- expect(menu.getAttribute("aria-activedescendant")).toBe("option-3");
508
+ expect(menu.getAttribute("aria-activedescendant")).toBe("".concat(menu.id, "-option-3"));
488
509
  _react2.fireEvent.keyDown(menu, {
489
510
  key: "Home",
490
511
  code: "Home",
491
512
  keyCode: 36,
492
513
  charCode: 36
493
514
  });
494
- expect(menu.getAttribute("aria-activedescendant")).toBe("option-0");
515
+ expect(menu.getAttribute("aria-activedescendant")).toBe("".concat(menu.id, "-option-0"));
495
516
  });
496
517
  test("Menu key events - End moves the focus to the last menu item", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee10() {
497
- var _render18, getByRole, menu;
518
+ var onSelectOption, _render18, getByRole, menu;
498
519
  return _regenerator["default"].wrap(function _callee10$(_context10) {
499
520
  while (1) switch (_context10.prev = _context10.next) {
500
521
  case 0:
522
+ onSelectOption = jest.fn();
501
523
  _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
502
524
  options: options,
503
- label: "dropdown-test-1"
525
+ label: "dropdown-test-1",
526
+ onSelectOption: onSelectOption
504
527
  })), getByRole = _render18.getByRole;
505
- _context10.next = 3;
528
+ _context10.next = 4;
506
529
  return _userEvent["default"].click(getByRole("button"));
507
- case 3:
530
+ case 4:
508
531
  menu = getByRole("menu");
509
- expect(menu.getAttribute("aria-activedescendant")).toBe("option-0");
532
+ expect(menu.getAttribute("aria-activedescendant")).toBe("".concat(menu.id, "-option-0"));
510
533
  _react2.fireEvent.keyDown(menu, {
511
534
  key: "End",
512
535
  code: "End",
513
536
  keyCode: 35,
514
537
  charCode: 35
515
538
  });
516
- expect(menu.getAttribute("aria-activedescendant")).toBe("option-3");
517
- case 7:
539
+ expect(menu.getAttribute("aria-activedescendant")).toBe("".concat(menu.id, "-option-3"));
540
+ case 8:
518
541
  case "end":
519
542
  return _context10.stop();
520
543
  }
521
544
  }, _callee10);
522
545
  })));
523
546
  test("Menu key events - PageUp moves the focus to the first menu item", function () {
547
+ var onSelectOption = jest.fn();
524
548
  var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
525
549
  options: options,
526
- label: "dropdown-test-1"
550
+ label: "dropdown-test-1",
551
+ onSelectOption: onSelectOption
527
552
  })),
528
553
  getByRole = _render19.getByRole;
529
554
  _react2.fireEvent.keyDown(getByRole("button"), {
@@ -533,55 +558,59 @@ describe("Dropdown component tests", function () {
533
558
  charCode: 38
534
559
  });
535
560
  var menu = getByRole("menu");
536
- expect(menu.getAttribute("aria-activedescendant")).toBe("option-3");
561
+ expect(menu.getAttribute("aria-activedescendant")).toBe("".concat(menu.id, "-option-3"));
537
562
  _react2.fireEvent.keyDown(menu, {
538
563
  key: "PageUp",
539
564
  code: "PageUp",
540
565
  keyCode: 33,
541
566
  charCode: 33
542
567
  });
543
- expect(menu.getAttribute("aria-activedescendant")).toBe("option-0");
568
+ expect(menu.getAttribute("aria-activedescendant")).toBe("".concat(menu.id, "-option-0"));
544
569
  });
545
570
  test("Menu key events - PageDown moves the focus to the last menu item", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee11() {
546
- var _render20, getByRole, menu;
571
+ var onSelectOption, _render20, getByRole, menu;
547
572
  return _regenerator["default"].wrap(function _callee11$(_context11) {
548
573
  while (1) switch (_context11.prev = _context11.next) {
549
574
  case 0:
575
+ onSelectOption = jest.fn();
550
576
  _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
551
577
  options: options,
552
- label: "dropdown-test-1"
578
+ label: "dropdown-test-1",
579
+ onSelectOption: onSelectOption
553
580
  })), getByRole = _render20.getByRole;
554
- _context11.next = 3;
581
+ _context11.next = 4;
555
582
  return _userEvent["default"].click(getByRole("button"));
556
- case 3:
583
+ case 4:
557
584
  menu = getByRole("menu");
558
- expect(menu.getAttribute("aria-activedescendant")).toBe("option-0");
585
+ expect(menu.getAttribute("aria-activedescendant")).toBe("".concat(menu.id, "-option-0"));
559
586
  _react2.fireEvent.keyDown(menu, {
560
587
  key: "PageDown",
561
588
  code: "PageDown",
562
589
  keyCode: 34,
563
590
  charCode: 34
564
591
  });
565
- expect(menu.getAttribute("aria-activedescendant")).toBe("option-3");
566
- case 7:
592
+ expect(menu.getAttribute("aria-activedescendant")).toBe("".concat(menu.id, "-option-3"));
593
+ case 8:
567
594
  case "end":
568
595
  return _context11.stop();
569
596
  }
570
597
  }, _callee11);
571
598
  })));
572
599
  test("Menu key events - Tab closes the menu and sets focus to the next element", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee12() {
573
- var _render21, getByRole, queryByRole, dropdown;
600
+ var onSelectOption, _render21, getByRole, queryByRole, dropdown;
574
601
  return _regenerator["default"].wrap(function _callee12$(_context12) {
575
602
  while (1) switch (_context12.prev = _context12.next) {
576
603
  case 0:
604
+ onSelectOption = jest.fn();
577
605
  _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
578
606
  options: options,
579
- label: "dropdown-test-1"
607
+ label: "dropdown-test-1",
608
+ onSelectOption: onSelectOption
580
609
  })), getByRole = _render21.getByRole, queryByRole = _render21.queryByRole;
581
610
  dropdown = getByRole("button");
582
- _context12.next = 4;
611
+ _context12.next = 5;
583
612
  return _userEvent["default"].click(dropdown);
584
- case 4:
613
+ case 5:
585
614
  expect(getByRole("menu")).toBeTruthy();
586
615
  _react2.fireEvent.keyDown(getByRole("menu"), {
587
616
  key: "Tab",
@@ -590,7 +619,7 @@ describe("Dropdown component tests", function () {
590
619
  charCode: 9
591
620
  });
592
621
  expect(queryByRole("menu")).toBeFalsy();
593
- case 7:
622
+ case 8:
594
623
  case "end":
595
624
  return _context12.stop();
596
625
  }
@@ -21,7 +21,7 @@ var DropdownMenu = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
21
21
  styles = _ref.styles;
22
22
  return /*#__PURE__*/_react["default"].createElement(DropdownMenuContainer, {
23
23
  onMouseDown: function onMouseDown(event) {
24
- // Prevent the onBlur event from closing menu when clicking on the menu since
24
+ // Prevent the onBlur event from closing menu when clicking on the menu since
25
25
  // it is implemented with a Portal and the menu is not a direct child of the container
26
26
  event.preventDefault();
27
27
  },
@@ -30,14 +30,14 @@ var DropdownMenu = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
30
30
  role: "menu",
31
31
  "aria-labelledby": dropdownTriggerId,
32
32
  "aria-orientation": "vertical",
33
- "aria-activedescendant": "option-".concat(visualFocusIndex),
33
+ "aria-activedescendant": visualFocusIndex !== -1 ? "".concat(id, "-option-").concat(visualFocusIndex) : undefined,
34
34
  tabIndex: -1,
35
35
  ref: ref,
36
36
  style: styles
37
37
  }, options.map(function (option, index) {
38
38
  return /*#__PURE__*/_react["default"].createElement(_DropdownMenuItem["default"], {
39
- id: "option-".concat(index),
40
- key: "option-".concat(index),
39
+ id: "".concat(id, "-option-").concat(index),
40
+ key: "".concat(id, "-option-").concat(index),
41
41
  visuallyFocused: index === visualFocusIndex,
42
42
  iconPosition: iconsPosition,
43
43
  onClick: menuItemOnClick,
@@ -25,7 +25,8 @@ var DropdownMenuItem = function DropdownMenuItem(_ref) {
25
25
  role: "menuitem",
26
26
  tabIndex: -1
27
27
  }, iconPosition === "after" && /*#__PURE__*/_react["default"].createElement(DropdownMenuItemLabel, null, option.label), option.icon && /*#__PURE__*/_react["default"].createElement(DropdownMenuItemIcon, {
28
- role: typeof option.icon === "string" ? undefined : "img"
28
+ role: typeof option.icon === "string" ? undefined : "img",
29
+ "aria-hidden": true
29
30
  }, typeof option.icon === "string" ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
30
31
  icon: option.icon
31
32
  }) : option.icon), iconPosition === "before" && /*#__PURE__*/_react["default"].createElement(DropdownMenuItemLabel, null, option.label));
@@ -0,0 +1 @@
1
+ export {};