@dxc-technology/halstack-react 0.0.0-5aa300b → 0.0.0-5aaca4c

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 (328) hide show
  1. package/README.md +46 -0
  2. package/dist/index.d.mts +3931 -0
  3. package/dist/index.d.ts +3931 -0
  4. package/dist/index.js +14176 -0
  5. package/dist/index.mjs +14088 -0
  6. package/package.json +85 -67
  7. package/BackgroundColorContext.d.ts +0 -10
  8. package/BackgroundColorContext.js +0 -47
  9. package/HalstackContext.d.ts +0 -12
  10. package/HalstackContext.js +0 -294
  11. package/accordion/Accordion.d.ts +0 -4
  12. package/accordion/Accordion.js +0 -239
  13. package/accordion/Accordion.stories.tsx +0 -346
  14. package/accordion/Accordion.test.js +0 -71
  15. package/accordion/types.d.ts +0 -69
  16. package/accordion/types.js +0 -5
  17. package/accordion-group/AccordionGroup.d.ts +0 -7
  18. package/accordion-group/AccordionGroup.js +0 -149
  19. package/accordion-group/AccordionGroup.stories.tsx +0 -251
  20. package/accordion-group/AccordionGroup.test.js +0 -126
  21. package/accordion-group/types.d.ts +0 -79
  22. package/accordion-group/types.js +0 -5
  23. package/alert/Alert.d.ts +0 -4
  24. package/alert/Alert.js +0 -293
  25. package/alert/Alert.stories.tsx +0 -170
  26. package/alert/Alert.test.js +0 -92
  27. package/alert/types.d.ts +0 -49
  28. package/alert/types.js +0 -5
  29. package/badge/Badge.d.ts +0 -4
  30. package/badge/Badge.js +0 -61
  31. package/badge/types.d.ts +0 -5
  32. package/badge/types.js +0 -5
  33. package/bleed/Bleed.d.ts +0 -3
  34. package/bleed/Bleed.js +0 -51
  35. package/bleed/Bleed.stories.tsx +0 -341
  36. package/bleed/types.d.ts +0 -37
  37. package/bleed/types.js +0 -5
  38. package/box/Box.d.ts +0 -4
  39. package/box/Box.js +0 -116
  40. package/box/Box.stories.tsx +0 -132
  41. package/box/Box.test.js +0 -18
  42. package/box/types.d.ts +0 -44
  43. package/box/types.js +0 -5
  44. package/bulleted-list/BulletedList.d.ts +0 -7
  45. package/bulleted-list/BulletedList.js +0 -123
  46. package/bulleted-list/BulletedList.stories.tsx +0 -200
  47. package/bulleted-list/types.d.ts +0 -11
  48. package/bulleted-list/types.js +0 -5
  49. package/button/Button.d.ts +0 -4
  50. package/button/Button.js +0 -154
  51. package/button/Button.stories.tsx +0 -334
  52. package/button/Button.test.js +0 -35
  53. package/button/types.d.ts +0 -53
  54. package/button/types.js +0 -5
  55. package/card/Card.d.ts +0 -4
  56. package/card/Card.js +0 -161
  57. package/card/Card.stories.tsx +0 -201
  58. package/card/Card.test.js +0 -50
  59. package/card/ice-cream.jpg +0 -0
  60. package/card/types.d.ts +0 -68
  61. package/card/types.js +0 -5
  62. package/checkbox/Checkbox.d.ts +0 -4
  63. package/checkbox/Checkbox.js +0 -250
  64. package/checkbox/Checkbox.stories.tsx +0 -208
  65. package/checkbox/Checkbox.test.js +0 -155
  66. package/checkbox/types.d.ts +0 -68
  67. package/checkbox/types.js +0 -5
  68. package/chip/Chip.d.ts +0 -4
  69. package/chip/Chip.js +0 -149
  70. package/chip/Chip.stories.tsx +0 -151
  71. package/chip/Chip.test.js +0 -56
  72. package/chip/types.d.ts +0 -45
  73. package/chip/types.js +0 -5
  74. package/common/OpenSans.css +0 -81
  75. package/common/fonts/OpenSans-Bold.ttf +0 -0
  76. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  77. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  78. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  79. package/common/fonts/OpenSans-Italic.ttf +0 -0
  80. package/common/fonts/OpenSans-Light.ttf +0 -0
  81. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  82. package/common/fonts/OpenSans-Regular.ttf +0 -0
  83. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  84. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  85. package/common/utils.js +0 -22
  86. package/common/variables.js +0 -1512
  87. package/date-input/Calendar.d.ts +0 -4
  88. package/date-input/Calendar.js +0 -258
  89. package/date-input/DateInput.d.ts +0 -4
  90. package/date-input/DateInput.js +0 -227
  91. package/date-input/DateInput.stories.tsx +0 -151
  92. package/date-input/DateInput.test.js +0 -752
  93. package/date-input/DatePicker.d.ts +0 -4
  94. package/date-input/DatePicker.js +0 -160
  95. package/date-input/YearPicker.d.ts +0 -4
  96. package/date-input/YearPicker.js +0 -115
  97. package/date-input/types.d.ts +0 -160
  98. package/date-input/types.js +0 -5
  99. package/dialog/Dialog.d.ts +0 -4
  100. package/dialog/Dialog.js +0 -162
  101. package/dialog/Dialog.stories.tsx +0 -267
  102. package/dialog/Dialog.test.js +0 -70
  103. package/dialog/types.d.ts +0 -44
  104. package/dialog/types.js +0 -5
  105. package/dropdown/Dropdown.d.ts +0 -4
  106. package/dropdown/Dropdown.js +0 -389
  107. package/dropdown/Dropdown.stories.tsx +0 -320
  108. package/dropdown/Dropdown.test.js +0 -585
  109. package/dropdown/DropdownMenu.d.ts +0 -4
  110. package/dropdown/DropdownMenu.js +0 -80
  111. package/dropdown/DropdownMenuItem.d.ts +0 -4
  112. package/dropdown/DropdownMenuItem.js +0 -92
  113. package/dropdown/types.d.ts +0 -100
  114. package/dropdown/types.js +0 -5
  115. package/file-input/FileInput.d.ts +0 -4
  116. package/file-input/FileInput.js +0 -551
  117. package/file-input/FileInput.stories.tsx +0 -535
  118. package/file-input/FileInput.test.js +0 -498
  119. package/file-input/FileItem.d.ts +0 -4
  120. package/file-input/FileItem.js +0 -161
  121. package/file-input/types.d.ts +0 -129
  122. package/file-input/types.js +0 -5
  123. package/flex/Flex.d.ts +0 -4
  124. package/flex/Flex.js +0 -69
  125. package/flex/Flex.stories.tsx +0 -103
  126. package/flex/types.d.ts +0 -32
  127. package/flex/types.js +0 -5
  128. package/footer/Footer.d.ts +0 -4
  129. package/footer/Footer.js +0 -185
  130. package/footer/Footer.stories.tsx +0 -137
  131. package/footer/Footer.test.js +0 -109
  132. package/footer/Icons.d.ts +0 -2
  133. package/footer/Icons.js +0 -77
  134. package/footer/types.d.ts +0 -66
  135. package/footer/types.js +0 -5
  136. package/header/Header.d.ts +0 -7
  137. package/header/Header.js +0 -305
  138. package/header/Header.stories.tsx +0 -172
  139. package/header/Header.test.js +0 -79
  140. package/header/Icons.d.ts +0 -2
  141. package/header/Icons.js +0 -34
  142. package/header/types.d.ts +0 -48
  143. package/header/types.js +0 -5
  144. package/heading/Heading.d.ts +0 -4
  145. package/heading/Heading.js +0 -159
  146. package/heading/Heading.stories.tsx +0 -54
  147. package/heading/Heading.test.js +0 -186
  148. package/heading/types.d.ts +0 -33
  149. package/heading/types.js +0 -5
  150. package/inset/Inset.d.ts +0 -3
  151. package/inset/Inset.js +0 -51
  152. package/inset/Inset.stories.tsx +0 -229
  153. package/inset/types.d.ts +0 -37
  154. package/inset/types.js +0 -5
  155. package/layout/ApplicationLayout.d.ts +0 -20
  156. package/layout/ApplicationLayout.js +0 -171
  157. package/layout/ApplicationLayout.stories.tsx +0 -162
  158. package/layout/Icons.d.ts +0 -5
  159. package/layout/Icons.js +0 -66
  160. package/layout/SidenavContext.d.ts +0 -5
  161. package/layout/SidenavContext.js +0 -19
  162. package/layout/types.d.ts +0 -42
  163. package/layout/types.js +0 -5
  164. package/link/Link.d.ts +0 -4
  165. package/link/Link.js +0 -136
  166. package/link/Link.stories.tsx +0 -193
  167. package/link/Link.test.js +0 -83
  168. package/link/types.d.ts +0 -54
  169. package/link/types.js +0 -5
  170. package/main.d.ts +0 -44
  171. package/main.js +0 -369
  172. package/number-input/NumberInput.d.ts +0 -4
  173. package/number-input/NumberInput.js +0 -76
  174. package/number-input/NumberInput.stories.tsx +0 -115
  175. package/number-input/NumberInput.test.js +0 -542
  176. package/number-input/NumberInputContext.d.ts +0 -4
  177. package/number-input/NumberInputContext.js +0 -19
  178. package/number-input/numberInputContextTypes.d.ts +0 -19
  179. package/number-input/numberInputContextTypes.js +0 -5
  180. package/number-input/types.d.ts +0 -124
  181. package/number-input/types.js +0 -5
  182. package/paginator/Icons.d.ts +0 -5
  183. package/paginator/Icons.js +0 -54
  184. package/paginator/Paginator.d.ts +0 -4
  185. package/paginator/Paginator.js +0 -165
  186. package/paginator/Paginator.stories.tsx +0 -63
  187. package/paginator/Paginator.test.js +0 -308
  188. package/paginator/types.d.ts +0 -38
  189. package/paginator/types.js +0 -5
  190. package/paragraph/Paragraph.d.ts +0 -6
  191. package/paragraph/Paragraph.js +0 -38
  192. package/paragraph/Paragraph.stories.tsx +0 -44
  193. package/password-input/PasswordInput.d.ts +0 -4
  194. package/password-input/PasswordInput.js +0 -166
  195. package/password-input/PasswordInput.stories.tsx +0 -131
  196. package/password-input/PasswordInput.test.js +0 -181
  197. package/password-input/types.d.ts +0 -110
  198. package/password-input/types.js +0 -5
  199. package/progress-bar/ProgressBar.d.ts +0 -4
  200. package/progress-bar/ProgressBar.js +0 -176
  201. package/progress-bar/ProgressBar.stories.jsx +0 -60
  202. package/progress-bar/ProgressBar.test.js +0 -110
  203. package/progress-bar/types.d.ts +0 -36
  204. package/progress-bar/types.js +0 -5
  205. package/quick-nav/QuickNav.d.ts +0 -4
  206. package/quick-nav/QuickNav.js +0 -117
  207. package/quick-nav/QuickNav.stories.tsx +0 -342
  208. package/quick-nav/types.d.ts +0 -21
  209. package/quick-nav/types.js +0 -5
  210. package/radio-group/Radio.d.ts +0 -4
  211. package/radio-group/Radio.js +0 -156
  212. package/radio-group/RadioGroup.d.ts +0 -4
  213. package/radio-group/RadioGroup.js +0 -283
  214. package/radio-group/RadioGroup.stories.tsx +0 -101
  215. package/radio-group/RadioGroup.test.js +0 -722
  216. package/radio-group/types.d.ts +0 -114
  217. package/radio-group/types.js +0 -5
  218. package/resultsetTable/Icons.d.ts +0 -7
  219. package/resultsetTable/Icons.js +0 -51
  220. package/resultsetTable/ResultsetTable.d.ts +0 -4
  221. package/resultsetTable/ResultsetTable.js +0 -195
  222. package/resultsetTable/ResultsetTable.stories.tsx +0 -300
  223. package/resultsetTable/ResultsetTable.test.js +0 -330
  224. package/resultsetTable/types.d.ts +0 -67
  225. package/resultsetTable/types.js +0 -5
  226. package/select/Icons.d.ts +0 -10
  227. package/select/Icons.js +0 -93
  228. package/select/Listbox.d.ts +0 -4
  229. package/select/Listbox.js +0 -198
  230. package/select/Option.d.ts +0 -4
  231. package/select/Option.js +0 -108
  232. package/select/Select.d.ts +0 -4
  233. package/select/Select.js +0 -645
  234. package/select/Select.stories.tsx +0 -683
  235. package/select/Select.test.js +0 -2233
  236. package/select/types.d.ts +0 -210
  237. package/select/types.js +0 -5
  238. package/sidenav/Sidenav.d.ts +0 -10
  239. package/sidenav/Sidenav.js +0 -266
  240. package/sidenav/Sidenav.stories.tsx +0 -189
  241. package/sidenav/Sidenav.test.js +0 -44
  242. package/sidenav/types.d.ts +0 -73
  243. package/sidenav/types.js +0 -5
  244. package/slider/Slider.d.ts +0 -4
  245. package/slider/Slider.js +0 -343
  246. package/slider/Slider.stories.tsx +0 -183
  247. package/slider/Slider.test.js +0 -250
  248. package/slider/types.d.ts +0 -86
  249. package/slider/types.js +0 -5
  250. package/spinner/Spinner.d.ts +0 -4
  251. package/spinner/Spinner.js +0 -250
  252. package/spinner/Spinner.stories.jsx +0 -103
  253. package/spinner/Spinner.test.js +0 -64
  254. package/spinner/types.d.ts +0 -32
  255. package/spinner/types.js +0 -5
  256. package/switch/Switch.d.ts +0 -4
  257. package/switch/Switch.js +0 -262
  258. package/switch/Switch.stories.tsx +0 -138
  259. package/switch/Switch.test.js +0 -225
  260. package/switch/types.d.ts +0 -66
  261. package/switch/types.js +0 -5
  262. package/table/Table.d.ts +0 -4
  263. package/table/Table.js +0 -118
  264. package/table/Table.stories.jsx +0 -277
  265. package/table/Table.test.js +0 -26
  266. package/table/types.d.ts +0 -21
  267. package/table/types.js +0 -5
  268. package/tabs/Tab.d.ts +0 -4
  269. package/tabs/Tab.js +0 -133
  270. package/tabs/Tabs.d.ts +0 -4
  271. package/tabs/Tabs.js +0 -467
  272. package/tabs/Tabs.stories.tsx +0 -188
  273. package/tabs/Tabs.test.js +0 -351
  274. package/tabs/types.d.ts +0 -92
  275. package/tabs/types.js +0 -5
  276. package/tabs-nav/NavTabs.d.ts +0 -8
  277. package/tabs-nav/NavTabs.js +0 -125
  278. package/tabs-nav/NavTabs.stories.tsx +0 -172
  279. package/tabs-nav/NavTabs.test.js +0 -82
  280. package/tabs-nav/Tab.d.ts +0 -4
  281. package/tabs-nav/Tab.js +0 -128
  282. package/tabs-nav/types.d.ts +0 -53
  283. package/tabs-nav/types.js +0 -5
  284. package/tag/Tag.d.ts +0 -4
  285. package/tag/Tag.js +0 -183
  286. package/tag/Tag.stories.tsx +0 -142
  287. package/tag/Tag.test.js +0 -60
  288. package/tag/types.d.ts +0 -69
  289. package/tag/types.js +0 -5
  290. package/text-input/Icons.d.ts +0 -8
  291. package/text-input/Icons.js +0 -60
  292. package/text-input/Suggestion.d.ts +0 -4
  293. package/text-input/Suggestion.js +0 -84
  294. package/text-input/Suggestions.d.ts +0 -4
  295. package/text-input/Suggestions.js +0 -134
  296. package/text-input/TextInput.d.ts +0 -4
  297. package/text-input/TextInput.js +0 -673
  298. package/text-input/TextInput.stories.tsx +0 -500
  299. package/text-input/TextInput.test.js +0 -1724
  300. package/text-input/types.d.ts +0 -197
  301. package/text-input/types.js +0 -5
  302. package/textarea/Textarea.d.ts +0 -4
  303. package/textarea/Textarea.js +0 -277
  304. package/textarea/Textarea.stories.jsx +0 -157
  305. package/textarea/Textarea.test.js +0 -437
  306. package/textarea/types.d.ts +0 -137
  307. package/textarea/types.js +0 -5
  308. package/toggle-group/ToggleGroup.d.ts +0 -4
  309. package/toggle-group/ToggleGroup.js +0 -215
  310. package/toggle-group/ToggleGroup.stories.tsx +0 -173
  311. package/toggle-group/ToggleGroup.test.js +0 -156
  312. package/toggle-group/types.d.ts +0 -105
  313. package/toggle-group/types.js +0 -5
  314. package/typography/Typography.d.ts +0 -4
  315. package/typography/Typography.js +0 -131
  316. package/typography/Typography.stories.tsx +0 -198
  317. package/typography/types.d.ts +0 -18
  318. package/typography/types.js +0 -5
  319. package/useTheme.d.ts +0 -2
  320. package/useTheme.js +0 -22
  321. package/useTranslatedLabels.d.ts +0 -2
  322. package/useTranslatedLabels.js +0 -20
  323. package/wizard/Wizard.d.ts +0 -4
  324. package/wizard/Wizard.js +0 -285
  325. package/wizard/Wizard.stories.tsx +0 -233
  326. package/wizard/Wizard.test.js +0 -141
  327. package/wizard/types.d.ts +0 -65
  328. package/wizard/types.js +0 -5
@@ -1,585 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
6
-
7
- var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
8
-
9
- var _react = _interopRequireDefault(require("react"));
10
-
11
- var _react2 = require("@testing-library/react");
12
-
13
- var _Dropdown = _interopRequireDefault(require("./Dropdown"));
14
-
15
- var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
16
-
17
- global.globalThis = global;
18
- global.DOMRect = {
19
- fromRect: function fromRect() {
20
- return {
21
- top: 0,
22
- left: 0,
23
- bottom: 0,
24
- right: 0,
25
- width: 0,
26
- height: 0
27
- };
28
- }
29
- };
30
-
31
- global.ResizeObserver = /*#__PURE__*/function () {
32
- function ResizeObserver() {
33
- (0, _classCallCheck2["default"])(this, ResizeObserver);
34
- }
35
-
36
- (0, _createClass2["default"])(ResizeObserver, [{
37
- key: "observe",
38
- value: function observe() {}
39
- }, {
40
- key: "unobserve",
41
- value: function unobserve() {}
42
- }, {
43
- key: "disconnect",
44
- value: function disconnect() {}
45
- }]);
46
- return ResizeObserver;
47
- }();
48
-
49
- var options = [{
50
- value: "1",
51
- label: "Amazon"
52
- }, {
53
- value: "2",
54
- label: "Ebay"
55
- }, {
56
- value: "3",
57
- label: "Wallapop"
58
- }, {
59
- value: "4",
60
- label: "Aliexpress"
61
- }];
62
- describe("Dropdown component tests", function () {
63
- test("Renders with correct aria attributes", function () {
64
- var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
65
- options: options,
66
- label: "dropdown-test"
67
- })),
68
- getAllByRole = _render.getAllByRole,
69
- getByRole = _render.getByRole;
70
-
71
- var dropdown = getByRole("button");
72
- expect(dropdown.getAttribute("aria-haspopup")).toBe("true");
73
- expect(dropdown.getAttribute("aria-expanded")).toBeNull();
74
- expect(dropdown.getAttribute("aria-activedescendant")).toBeNull();
75
-
76
- _userEvent["default"].click(dropdown);
77
-
78
- var menu = getByRole("menu");
79
- expect(dropdown.getAttribute("aria-controls")).toBe(menu.id);
80
- expect(dropdown.getAttribute("aria-expanded")).toBe("true");
81
- expect(menu.getAttribute("aria-activedescendant")).toBe("option-0");
82
- expect(menu.getAttribute("aria-orientation")).toBe("vertical");
83
- expect(menu.getAttribute("aria-labelledby")).toBe(dropdown.id);
84
- expect(getAllByRole("menuitem").length).toBe(4);
85
- });
86
- test("Button trigger opens and closes the menu options when clicked", function () {
87
- var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
88
- options: options,
89
- label: "dropdown-test"
90
- })),
91
- getByRole = _render2.getByRole,
92
- queryByRole = _render2.queryByRole,
93
- getByText = _render2.getByText;
94
-
95
- var dropdown = getByRole("button");
96
- expect(queryByRole("menu")).toBeFalsy();
97
-
98
- _userEvent["default"].click(dropdown);
99
-
100
- expect(queryByRole("menu")).toBeTruthy();
101
- expect(getByText("Amazon")).toBeTruthy();
102
- expect(getByText("Ebay")).toBeTruthy();
103
- expect(getByText("Wallapop")).toBeTruthy();
104
- expect(getByText("Aliexpress")).toBeTruthy();
105
-
106
- _userEvent["default"].click(dropdown);
107
-
108
- expect(queryByRole("menu")).toBeFalsy();
109
- });
110
- test("Button trigger is not interactable when disabled", function () {
111
- var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
112
- disabled: true,
113
- options: options,
114
- label: "dropdown-test"
115
- })),
116
- getByRole = _render3.getByRole,
117
- queryByRole = _render3.queryByRole,
118
- queryByText = _render3.queryByText;
119
-
120
- var dropdown = getByRole("button");
121
- expect(queryByRole("menu")).toBeFalsy();
122
-
123
- _userEvent["default"].click(dropdown);
124
-
125
- expect(queryByRole("menu")).toBeFalsy();
126
- expect(queryByText("Amazon")).toBeFalsy();
127
-
128
- _userEvent["default"].click(dropdown);
129
-
130
- expect(queryByRole("menu")).toBeFalsy();
131
- expect(dropdown.getAttribute("aria-expanded")).toBeNull();
132
- });
133
- test("onSelectOption function is called correctly when an option is clicked", function () {
134
- var onSelectOption = jest.fn();
135
-
136
- var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
137
- options: options,
138
- onSelectOption: onSelectOption,
139
- label: "dropdown-test"
140
- })),
141
- getByText = _render4.getByText;
142
-
143
- var dropdown = getByText("dropdown-test");
144
-
145
- _userEvent["default"].click(dropdown);
146
-
147
- var option = getByText("Aliexpress");
148
-
149
- _userEvent["default"].click(option);
150
-
151
- expect(onSelectOption).toHaveBeenCalledWith("4");
152
- });
153
- test("When expandOnHover is true, the dropdown trigger shows and hides the menu when it is hovered", function () {
154
- var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
155
- options: options,
156
- expandOnHover: true,
157
- label: "dropdown-test"
158
- })),
159
- queryByText = _render5.queryByText,
160
- getByRole = _render5.getByRole,
161
- queryByRole = _render5.queryByRole;
162
-
163
- expect(queryByText("option-test")).toBeFalsy();
164
- expect(queryByRole("menu")).toBeFalsy();
165
-
166
- _react2.fireEvent.mouseOver(getByRole("button"));
167
-
168
- var menu = getByRole("menu");
169
- expect(menu).toBeTruthy();
170
- expect(document.activeElement === menu).toBeTruthy();
171
- expect(menu.getAttribute("aria-activedescendant")).toBe("option-0");
172
- });
173
- test("The menu is closed when the dropdown loses the focus (blur)", function () {
174
- var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
175
- options: options,
176
- label: "dropdown-test"
177
- })),
178
- getByRole = _render6.getByRole,
179
- queryByRole = _render6.queryByRole;
180
-
181
- var dropdown = getByRole("button");
182
-
183
- _userEvent["default"].click(dropdown);
184
-
185
- expect(getByRole("menu")).toBeTruthy();
186
-
187
- _react2.fireEvent.blur(getByRole("menu"));
188
-
189
- expect(queryByRole("menu")).toBeFalsy();
190
- });
191
- test("Menu button key events - Arrow up opens the list and moves the focus to the last menu item", function () {
192
- var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
193
- options: options,
194
- label: "dropdown-test"
195
- })),
196
- getByRole = _render7.getByRole;
197
-
198
- var dropdown = getByRole("button");
199
-
200
- _react2.fireEvent.keyDown(dropdown, {
201
- key: "ArrowUp",
202
- code: "ArrowUp",
203
- keyCode: 38,
204
- charCode: 38
205
- });
206
-
207
- var menu = getByRole("menu");
208
- expect(menu).toBeTruthy();
209
- expect(document.activeElement === menu).toBeTruthy();
210
- expect(getByRole("menu").getAttribute("aria-activedescendant")).toBe("option-3");
211
- });
212
- test("Menu button key events - Arrow down opens the list and moves the focus to the first menu item", function () {
213
- var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
214
- options: options,
215
- label: "dropdown-test"
216
- })),
217
- getByRole = _render8.getByRole;
218
-
219
- var dropdown = getByRole("button");
220
-
221
- _react2.fireEvent.keyDown(dropdown, {
222
- key: "ArrowDown",
223
- code: "ArrowDown",
224
- keyCode: 40,
225
- charCode: 40
226
- });
227
-
228
- var menu = getByRole("menu");
229
- expect(menu).toBeTruthy();
230
- expect(document.activeElement === menu).toBeTruthy();
231
- expect(getByRole("menu").getAttribute("aria-activedescendant")).toBe("option-0");
232
- });
233
- test("Menu button key events - Enter opens the list and moves the focus to the first menu item", function () {
234
- var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
235
- options: options,
236
- label: "dropdown-test"
237
- })),
238
- getByRole = _render9.getByRole;
239
-
240
- var dropdown = getByRole("button");
241
-
242
- _react2.fireEvent.keyDown(dropdown, {
243
- key: "Enter",
244
- code: "Enter",
245
- keyCode: 13,
246
- charCode: 13
247
- });
248
-
249
- var menu = getByRole("menu");
250
- expect(menu).toBeTruthy();
251
- expect(document.activeElement === menu).toBeTruthy();
252
- expect(getByRole("menu").getAttribute("aria-activedescendant")).toBe("option-0");
253
- });
254
- test("Menu button key events - Space opens the list and moves the focus to the first menu item", function () {
255
- var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
256
- options: options,
257
- label: "dropdown-test"
258
- })),
259
- getByRole = _render10.getByRole;
260
-
261
- var dropdown = getByRole("button");
262
-
263
- _react2.fireEvent.keyDown(dropdown, {
264
- key: " ",
265
- code: "Space",
266
- keyCode: 32,
267
- charCode: 32
268
- });
269
-
270
- var menu = getByRole("menu");
271
- expect(menu).toBeTruthy();
272
- expect(document.activeElement === menu).toBeTruthy();
273
- expect(getByRole("menu").getAttribute("aria-activedescendant")).toBe("option-0");
274
- });
275
- test("Menu key events - Arrow up moves the focus to the previous menu item", function () {
276
- var onSelectOption = jest.fn();
277
-
278
- var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
279
- onSelectOption: onSelectOption,
280
- options: options,
281
- label: "dropdown-test"
282
- })),
283
- getByRole = _render11.getByRole;
284
-
285
- _react2.fireEvent.keyDown(getByRole("button"), {
286
- key: "ArrowUp",
287
- code: "ArrowUp",
288
- keyCode: 38,
289
- charCode: 38
290
- });
291
-
292
- var menu = getByRole("menu");
293
-
294
- _react2.fireEvent.keyDown(menu, {
295
- key: "ArrowUp",
296
- code: "ArrowUp",
297
- keyCode: 38,
298
- charCode: 38
299
- });
300
-
301
- expect(document.activeElement === menu).toBeTruthy();
302
- expect(menu.getAttribute("aria-activedescendant")).toBe("option-2");
303
-
304
- _react2.fireEvent.keyDown(menu, {
305
- key: "Enter",
306
- code: "Enter",
307
- keyCode: 13,
308
- charCode: 13
309
- });
310
-
311
- expect(onSelectOption).toHaveBeenCalledWith("3");
312
- });
313
- test("Menu key events - Arrow up, if focus is on the first menu item, moves focus to the last menu item.", function () {
314
- var onSelectOption = jest.fn();
315
-
316
- var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
317
- onSelectOption: onSelectOption,
318
- options: options,
319
- label: "dropdown-test"
320
- })),
321
- getByRole = _render12.getByRole;
322
-
323
- _userEvent["default"].click(getByRole("button"));
324
-
325
- var menu = getByRole("menu");
326
-
327
- _react2.fireEvent.keyDown(menu, {
328
- key: "ArrowUp",
329
- code: "ArrowUp",
330
- keyCode: 38,
331
- charCode: 38
332
- });
333
-
334
- expect(document.activeElement === menu).toBeTruthy();
335
- expect(menu.getAttribute("aria-activedescendant")).toBe("option-3");
336
-
337
- _react2.fireEvent.keyDown(menu, {
338
- key: "Enter",
339
- code: "Enter",
340
- keyCode: 13,
341
- charCode: 13
342
- });
343
-
344
- expect(onSelectOption).toHaveBeenCalledWith("4");
345
- });
346
- test("Menu key events - Arrow down moves the focus to the next menu item", function () {
347
- var onSelectOption = jest.fn();
348
-
349
- var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
350
- onSelectOption: onSelectOption,
351
- options: options,
352
- label: "dropdown-test"
353
- })),
354
- getByRole = _render13.getByRole;
355
-
356
- _userEvent["default"].click(getByRole("button"));
357
-
358
- var menu = getByRole("menu");
359
-
360
- _react2.fireEvent.keyDown(menu, {
361
- key: "ArrowDown",
362
- code: "ArrowDown",
363
- keyCode: 40,
364
- charCode: 40
365
- });
366
-
367
- _react2.fireEvent.keyDown(menu, {
368
- key: "ArrowDown",
369
- code: "ArrowDown",
370
- keyCode: 40,
371
- charCode: 40
372
- });
373
-
374
- expect(document.activeElement === menu).toBeTruthy();
375
- expect(menu.getAttribute("aria-activedescendant")).toBe("option-2");
376
-
377
- _react2.fireEvent.keyDown(menu, {
378
- key: "Enter",
379
- code: "Enter",
380
- keyCode: 13,
381
- charCode: 13
382
- });
383
-
384
- expect(onSelectOption).toHaveBeenCalledWith("3");
385
- });
386
- test("Menu key events - Arrow down, if focus is on the last menu item, moves focus to the first menu item. ", function () {
387
- var onSelectOption = jest.fn();
388
-
389
- var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
390
- onSelectOption: onSelectOption,
391
- options: options,
392
- label: "dropdown-test"
393
- })),
394
- getByRole = _render14.getByRole;
395
-
396
- _react2.fireEvent.keyDown(getByRole("button"), {
397
- key: "ArrowUp",
398
- code: "ArrowUp",
399
- keyCode: 38,
400
- charCode: 38
401
- });
402
-
403
- var menu = getByRole("menu");
404
-
405
- _react2.fireEvent.keyDown(menu, {
406
- key: "ArrowDown",
407
- code: "ArrowDown",
408
- keyCode: 40,
409
- charCode: 40
410
- });
411
-
412
- expect(document.activeElement === menu).toBeTruthy();
413
- expect(menu.getAttribute("aria-activedescendant")).toBe("option-0");
414
-
415
- _react2.fireEvent.keyDown(menu, {
416
- key: "Enter",
417
- code: "Enter",
418
- keyCode: 13,
419
- charCode: 13
420
- });
421
-
422
- expect(onSelectOption).toHaveBeenCalledWith("1");
423
- });
424
- test("Menu key events - Enter key selects the current focused item and closes the menu", function () {
425
- var onSelectOption = jest.fn();
426
-
427
- var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
428
- onSelectOption: onSelectOption,
429
- options: options,
430
- label: "dropdown-test"
431
- })),
432
- getByRole = _render15.getByRole,
433
- queryByRole = _render15.queryByRole;
434
-
435
- _userEvent["default"].click(getByRole("button"));
436
-
437
- _react2.fireEvent.keyDown(getByRole("menu"), {
438
- key: "Enter",
439
- code: "Enter",
440
- keyCode: 13,
441
- charCode: 13
442
- });
443
-
444
- expect(onSelectOption).toHaveBeenCalledWith("1");
445
- expect(queryByRole("menu")).toBeFalsy();
446
- expect(document.activeElement === getByRole("button")).toBeTruthy();
447
- });
448
- test("Menu key events - Esc closes the menu and sets focus on the menu button", function () {
449
- var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
450
- options: options,
451
- label: "dropdown-test"
452
- })),
453
- getByRole = _render16.getByRole,
454
- queryByRole = _render16.queryByRole;
455
-
456
- _userEvent["default"].click(getByRole("button"));
457
-
458
- _react2.fireEvent.keyDown(getByRole("menu"), {
459
- key: "Esc",
460
- code: "Esc",
461
- keyCode: 27,
462
- charCode: 27
463
- });
464
-
465
- expect(queryByRole("menu")).toBeFalsy();
466
- expect(document.activeElement === getByRole("button")).toBeTruthy();
467
- });
468
- test("Menu key events - Home moves the focus to the first menu item", function () {
469
- var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
470
- options: options,
471
- label: "dropdown-test-1"
472
- })),
473
- getByRole = _render17.getByRole;
474
-
475
- _react2.fireEvent.keyDown(getByRole("button"), {
476
- key: "ArrowUp",
477
- code: "ArrowUp",
478
- keyCode: 38,
479
- charCode: 38
480
- });
481
-
482
- var menu = getByRole("menu");
483
- expect(menu.getAttribute("aria-activedescendant")).toBe("option-3");
484
-
485
- _react2.fireEvent.keyDown(menu, {
486
- key: "Home",
487
- code: "Home",
488
- keyCode: 36,
489
- charCode: 36
490
- });
491
-
492
- expect(menu.getAttribute("aria-activedescendant")).toBe("option-0");
493
- });
494
- test("Menu key events - End moves the focus to the last menu item", function () {
495
- var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
496
- options: options,
497
- label: "dropdown-test-1"
498
- })),
499
- getByRole = _render18.getByRole;
500
-
501
- _userEvent["default"].click(getByRole("button"));
502
-
503
- var menu = getByRole("menu");
504
- expect(menu.getAttribute("aria-activedescendant")).toBe("option-0");
505
-
506
- _react2.fireEvent.keyDown(menu, {
507
- key: "End",
508
- code: "End",
509
- keyCode: 35,
510
- charCode: 35
511
- });
512
-
513
- expect(menu.getAttribute("aria-activedescendant")).toBe("option-3");
514
- });
515
- test("Menu key events - PageUp moves the focus to the first menu item", function () {
516
- var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
517
- options: options,
518
- label: "dropdown-test-1"
519
- })),
520
- getByRole = _render19.getByRole;
521
-
522
- _react2.fireEvent.keyDown(getByRole("button"), {
523
- key: "ArrowUp",
524
- code: "ArrowUp",
525
- keyCode: 38,
526
- charCode: 38
527
- });
528
-
529
- var menu = getByRole("menu");
530
- expect(menu.getAttribute("aria-activedescendant")).toBe("option-3");
531
-
532
- _react2.fireEvent.keyDown(menu, {
533
- key: "PageUp",
534
- code: "PageUp",
535
- keyCode: 33,
536
- charCode: 33
537
- });
538
-
539
- expect(menu.getAttribute("aria-activedescendant")).toBe("option-0");
540
- });
541
- test("Menu key events - PageDown moves the focus to the last menu item", function () {
542
- var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
543
- options: options,
544
- label: "dropdown-test-1"
545
- })),
546
- getByRole = _render20.getByRole;
547
-
548
- _userEvent["default"].click(getByRole("button"));
549
-
550
- var menu = getByRole("menu");
551
- expect(menu.getAttribute("aria-activedescendant")).toBe("option-0");
552
-
553
- _react2.fireEvent.keyDown(menu, {
554
- key: "PageDown",
555
- code: "PageDown",
556
- keyCode: 34,
557
- charCode: 34
558
- });
559
-
560
- expect(menu.getAttribute("aria-activedescendant")).toBe("option-3");
561
- });
562
- test("Menu key events - Tab closes the menu and sets focus to the next element", function () {
563
- var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
564
- options: options,
565
- label: "dropdown-test-1"
566
- })),
567
- getByRole = _render21.getByRole,
568
- queryByRole = _render21.queryByRole;
569
-
570
- var dropdown = getByRole("button");
571
-
572
- _userEvent["default"].click(dropdown);
573
-
574
- expect(getByRole("menu")).toBeTruthy();
575
-
576
- _react2.fireEvent.keyDown(getByRole("menu"), {
577
- key: "Tab",
578
- code: "Tab",
579
- keyCode: 9,
580
- charCode: 9
581
- });
582
-
583
- expect(queryByRole("menu")).toBeFalsy();
584
- });
585
- });
@@ -1,4 +0,0 @@
1
- import React from "react";
2
- import { DropdownMenuProps } from "./types";
3
- declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<DropdownMenuProps & React.RefAttributes<HTMLUListElement>>>;
4
- export default _default;
@@ -1,80 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports["default"] = void 0;
11
-
12
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
-
14
- var _react = _interopRequireDefault(require("react"));
15
-
16
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
17
-
18
- var _useTheme = _interopRequireDefault(require("../useTheme"));
19
-
20
- var _DropdownMenuItem = _interopRequireDefault(require("./DropdownMenuItem"));
21
-
22
- var _templateObject;
23
-
24
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
25
-
26
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
27
-
28
- var DropdownMenu = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
29
- var id = _ref.id,
30
- dropdownTriggerId = _ref.dropdownTriggerId,
31
- iconsPosition = _ref.iconsPosition,
32
- visualFocusIndex = _ref.visualFocusIndex,
33
- menuItemOnClick = _ref.menuItemOnClick,
34
- onKeyDown = _ref.onKeyDown,
35
- options = _ref.options,
36
- styles = _ref.styles;
37
- var colorsTheme = (0, _useTheme["default"])();
38
- return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
39
- theme: colorsTheme.dropdown
40
- }, /*#__PURE__*/_react["default"].createElement(DropdownMenuContainer, {
41
- onMouseDown: function onMouseDown(event) {
42
- // Prevent the onBlur event from closing menu when clicking on the menu since it is implemented with a Portal and the menu is not a child of the container
43
- event.preventDefault();
44
- },
45
- onKeyDown: onKeyDown,
46
- id: id,
47
- role: "menu",
48
- "aria-labelledby": dropdownTriggerId,
49
- "aria-orientation": "vertical",
50
- "aria-activedescendant": "option-".concat(visualFocusIndex),
51
- tabIndex: -1,
52
- style: styles,
53
- ref: ref
54
- }, options.map(function (option, index) {
55
- return /*#__PURE__*/_react["default"].createElement(_DropdownMenuItem["default"], {
56
- id: "option-".concat(index),
57
- key: "option-".concat(index),
58
- visuallyFocused: index === visualFocusIndex,
59
- iconPosition: iconsPosition,
60
- onClick: menuItemOnClick,
61
- option: option
62
- });
63
- })));
64
- });
65
-
66
- var DropdownMenuContainer = _styledComponents["default"].ul(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n box-sizing: border-box;\n max-height: 230px;\n overflow-y: auto;\n padding: 0;\n margin: 0;\n background-color: ", ";\n border-width: ", ";\n border-style: ", ";\n border-color: ", ";\n border-radius: ", ";\n border-top-right-radius: 0;\n border-top-left-radius: 0;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n outline: none;\n"])), function (props) {
67
- return props.theme.optionBackgroundColor;
68
- }, function (props) {
69
- return props.theme.borderThickness;
70
- }, function (props) {
71
- return props.theme.borderStyle;
72
- }, function (props) {
73
- return props.theme.borderColor;
74
- }, function (props) {
75
- return props.theme.borderRadius;
76
- });
77
-
78
- var _default = /*#__PURE__*/_react["default"].memo(DropdownMenu);
79
-
80
- exports["default"] = _default;
@@ -1,4 +0,0 @@
1
- import React from "react";
2
- import { DropdownMenuItemProps } from "./types";
3
- declare const _default: React.MemoExoticComponent<({ id, visuallyFocused, iconPosition, onClick, option, }: DropdownMenuItemProps) => JSX.Element>;
4
- export default _default;