@dxc-technology/halstack-react 0.0.0-4ee80da → 0.0.0-4fe81f7

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 (327) hide show
  1. package/README.md +47 -0
  2. package/dist/index.d.mts +6439 -0
  3. package/dist/index.d.ts +6439 -0
  4. package/dist/index.js +12618 -0
  5. package/dist/index.mjs +12530 -0
  6. package/package.json +64 -62
  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 -245
  13. package/accordion/Accordion.stories.tsx +0 -306
  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 -156
  51. package/button/Button.stories.tsx +0 -283
  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 -161
  70. package/chip/Chip.stories.tsx +0 -119
  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 -391
  107. package/dropdown/Dropdown.stories.tsx +0 -312
  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.js +0 -66
  183. package/paginator/Paginator.d.ts +0 -4
  184. package/paginator/Paginator.js +0 -171
  185. package/paginator/Paginator.stories.tsx +0 -63
  186. package/paginator/Paginator.test.js +0 -308
  187. package/paginator/types.d.ts +0 -38
  188. package/paginator/types.js +0 -5
  189. package/paragraph/Paragraph.d.ts +0 -6
  190. package/paragraph/Paragraph.js +0 -38
  191. package/paragraph/Paragraph.stories.tsx +0 -44
  192. package/password-input/PasswordInput.d.ts +0 -4
  193. package/password-input/PasswordInput.js +0 -166
  194. package/password-input/PasswordInput.stories.tsx +0 -131
  195. package/password-input/PasswordInput.test.js +0 -181
  196. package/password-input/types.d.ts +0 -110
  197. package/password-input/types.js +0 -5
  198. package/progress-bar/ProgressBar.d.ts +0 -4
  199. package/progress-bar/ProgressBar.js +0 -176
  200. package/progress-bar/ProgressBar.stories.jsx +0 -60
  201. package/progress-bar/ProgressBar.test.js +0 -110
  202. package/progress-bar/types.d.ts +0 -36
  203. package/progress-bar/types.js +0 -5
  204. package/quick-nav/QuickNav.d.ts +0 -4
  205. package/quick-nav/QuickNav.js +0 -117
  206. package/quick-nav/QuickNav.stories.tsx +0 -342
  207. package/quick-nav/types.d.ts +0 -21
  208. package/quick-nav/types.js +0 -5
  209. package/radio-group/Radio.d.ts +0 -4
  210. package/radio-group/Radio.js +0 -156
  211. package/radio-group/RadioGroup.d.ts +0 -4
  212. package/radio-group/RadioGroup.js +0 -283
  213. package/radio-group/RadioGroup.stories.tsx +0 -101
  214. package/radio-group/RadioGroup.test.js +0 -722
  215. package/radio-group/types.d.ts +0 -114
  216. package/radio-group/types.js +0 -5
  217. package/resultsetTable/Icons.d.ts +0 -7
  218. package/resultsetTable/Icons.js +0 -51
  219. package/resultsetTable/ResultsetTable.d.ts +0 -4
  220. package/resultsetTable/ResultsetTable.js +0 -195
  221. package/resultsetTable/ResultsetTable.stories.tsx +0 -300
  222. package/resultsetTable/ResultsetTable.test.js +0 -330
  223. package/resultsetTable/types.d.ts +0 -67
  224. package/resultsetTable/types.js +0 -5
  225. package/select/Icons.d.ts +0 -10
  226. package/select/Icons.js +0 -93
  227. package/select/Listbox.d.ts +0 -4
  228. package/select/Listbox.js +0 -198
  229. package/select/Option.d.ts +0 -4
  230. package/select/Option.js +0 -110
  231. package/select/Select.d.ts +0 -4
  232. package/select/Select.js +0 -645
  233. package/select/Select.stories.tsx +0 -624
  234. package/select/Select.test.js +0 -2233
  235. package/select/types.d.ts +0 -210
  236. package/select/types.js +0 -5
  237. package/sidenav/Sidenav.d.ts +0 -10
  238. package/sidenav/Sidenav.js +0 -268
  239. package/sidenav/Sidenav.stories.tsx +0 -180
  240. package/sidenav/Sidenav.test.js +0 -44
  241. package/sidenav/types.d.ts +0 -73
  242. package/sidenav/types.js +0 -5
  243. package/slider/Slider.d.ts +0 -4
  244. package/slider/Slider.js +0 -343
  245. package/slider/Slider.stories.tsx +0 -183
  246. package/slider/Slider.test.js +0 -250
  247. package/slider/types.d.ts +0 -86
  248. package/slider/types.js +0 -5
  249. package/spinner/Spinner.d.ts +0 -4
  250. package/spinner/Spinner.js +0 -250
  251. package/spinner/Spinner.stories.jsx +0 -103
  252. package/spinner/Spinner.test.js +0 -64
  253. package/spinner/types.d.ts +0 -32
  254. package/spinner/types.js +0 -5
  255. package/switch/Switch.d.ts +0 -4
  256. package/switch/Switch.js +0 -262
  257. package/switch/Switch.stories.tsx +0 -138
  258. package/switch/Switch.test.js +0 -225
  259. package/switch/types.d.ts +0 -66
  260. package/switch/types.js +0 -5
  261. package/table/Table.d.ts +0 -4
  262. package/table/Table.js +0 -118
  263. package/table/Table.stories.jsx +0 -277
  264. package/table/Table.test.js +0 -26
  265. package/table/types.d.ts +0 -21
  266. package/table/types.js +0 -5
  267. package/tabs/Tab.d.ts +0 -4
  268. package/tabs/Tab.js +0 -135
  269. package/tabs/Tabs.d.ts +0 -4
  270. package/tabs/Tabs.js +0 -467
  271. package/tabs/Tabs.stories.tsx +0 -186
  272. package/tabs/Tabs.test.js +0 -351
  273. package/tabs/types.d.ts +0 -92
  274. package/tabs/types.js +0 -5
  275. package/tabs-nav/NavTabs.d.ts +0 -8
  276. package/tabs-nav/NavTabs.js +0 -125
  277. package/tabs-nav/NavTabs.stories.tsx +0 -170
  278. package/tabs-nav/NavTabs.test.js +0 -82
  279. package/tabs-nav/Tab.d.ts +0 -4
  280. package/tabs-nav/Tab.js +0 -130
  281. package/tabs-nav/types.d.ts +0 -53
  282. package/tabs-nav/types.js +0 -5
  283. package/tag/Tag.d.ts +0 -4
  284. package/tag/Tag.js +0 -183
  285. package/tag/Tag.stories.tsx +0 -142
  286. package/tag/Tag.test.js +0 -60
  287. package/tag/types.d.ts +0 -69
  288. package/tag/types.js +0 -5
  289. package/text-input/Icons.d.ts +0 -8
  290. package/text-input/Icons.js +0 -60
  291. package/text-input/Suggestion.d.ts +0 -4
  292. package/text-input/Suggestion.js +0 -57
  293. package/text-input/Suggestions.d.ts +0 -4
  294. package/text-input/Suggestions.js +0 -134
  295. package/text-input/TextInput.d.ts +0 -4
  296. package/text-input/TextInput.js +0 -677
  297. package/text-input/TextInput.stories.tsx +0 -481
  298. package/text-input/TextInput.test.js +0 -1624
  299. package/text-input/types.d.ts +0 -197
  300. package/text-input/types.js +0 -5
  301. package/textarea/Textarea.d.ts +0 -4
  302. package/textarea/Textarea.js +0 -277
  303. package/textarea/Textarea.stories.jsx +0 -157
  304. package/textarea/Textarea.test.js +0 -437
  305. package/textarea/types.d.ts +0 -137
  306. package/textarea/types.js +0 -5
  307. package/toggle-group/ToggleGroup.d.ts +0 -4
  308. package/toggle-group/ToggleGroup.js +0 -215
  309. package/toggle-group/ToggleGroup.stories.tsx +0 -173
  310. package/toggle-group/ToggleGroup.test.js +0 -156
  311. package/toggle-group/types.d.ts +0 -105
  312. package/toggle-group/types.js +0 -5
  313. package/typography/Typography.d.ts +0 -4
  314. package/typography/Typography.js +0 -131
  315. package/typography/Typography.stories.tsx +0 -198
  316. package/typography/types.d.ts +0 -18
  317. package/typography/types.js +0 -5
  318. package/useTheme.d.ts +0 -2
  319. package/useTheme.js +0 -22
  320. package/useTranslatedLabels.d.ts +0 -2
  321. package/useTranslatedLabels.js +0 -20
  322. package/wizard/Wizard.d.ts +0 -4
  323. package/wizard/Wizard.js +0 -285
  324. package/wizard/Wizard.stories.tsx +0 -233
  325. package/wizard/Wizard.test.js +0 -141
  326. package/wizard/types.d.ts +0 -65
  327. 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;