@dxc-technology/halstack-react 0.0.0-d3554d7 → 0.0.0-d3ac293

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 (267) hide show
  1. package/BackgroundColorContext.d.ts +2 -2
  2. package/BackgroundColorContext.js +1 -1
  3. package/HalstackContext.d.ts +1336 -0
  4. package/HalstackContext.js +335 -0
  5. package/accordion/Accordion.d.ts +1 -1
  6. package/accordion/Accordion.js +118 -126
  7. package/accordion/Accordion.stories.tsx +115 -27
  8. package/accordion/Accordion.test.js +26 -12
  9. package/accordion/types.d.ts +9 -4
  10. package/accordion-group/AccordionGroup.d.ts +1 -1
  11. package/accordion-group/AccordionGroup.js +17 -38
  12. package/accordion-group/AccordionGroup.stories.tsx +28 -2
  13. package/accordion-group/AccordionGroup.test.js +31 -38
  14. package/accordion-group/types.d.ts +14 -3
  15. package/alert/Alert.js +7 -4
  16. package/alert/Alert.stories.tsx +28 -0
  17. package/alert/Alert.test.js +1 -1
  18. package/badge/Badge.d.ts +1 -1
  19. package/badge/Badge.js +5 -3
  20. package/badge/types.d.ts +1 -0
  21. package/bleed/Bleed.js +1 -34
  22. package/bleed/Bleed.stories.tsx +94 -95
  23. package/bleed/types.d.ts +25 -1
  24. package/box/Box.js +25 -37
  25. package/box/Box.stories.tsx +15 -0
  26. package/box/Box.test.js +1 -1
  27. package/box/types.d.ts +1 -0
  28. package/bulleted-list/BulletedList.d.ts +7 -0
  29. package/bulleted-list/BulletedList.js +123 -0
  30. package/bulleted-list/BulletedList.stories.tsx +200 -0
  31. package/bulleted-list/types.d.ts +11 -0
  32. package/button/Button.js +52 -69
  33. package/button/Button.stories.tsx +159 -8
  34. package/button/Button.test.js +1 -1
  35. package/button/types.d.ts +7 -7
  36. package/card/Card.js +25 -28
  37. package/card/Card.test.js +1 -1
  38. package/card/types.d.ts +1 -0
  39. package/checkbox/Checkbox.d.ts +2 -2
  40. package/checkbox/Checkbox.js +107 -110
  41. package/checkbox/Checkbox.stories.tsx +198 -130
  42. package/checkbox/Checkbox.test.js +101 -11
  43. package/checkbox/types.d.ts +13 -5
  44. package/chip/Chip.js +18 -24
  45. package/chip/Chip.stories.tsx +96 -9
  46. package/chip/Chip.test.js +3 -5
  47. package/chip/types.d.ts +1 -1
  48. package/common/utils.d.ts +1 -0
  49. package/common/utils.js +4 -4
  50. package/common/variables.d.ts +1625 -0
  51. package/common/variables.js +483 -352
  52. package/date-input/Calendar.d.ts +4 -0
  53. package/date-input/Calendar.js +258 -0
  54. package/date-input/DateInput.js +169 -258
  55. package/date-input/DateInput.stories.tsx +199 -33
  56. package/date-input/DateInput.test.js +521 -155
  57. package/date-input/DatePicker.d.ts +4 -0
  58. package/date-input/DatePicker.js +146 -0
  59. package/date-input/Icons.d.ts +6 -0
  60. package/date-input/Icons.js +75 -0
  61. package/date-input/YearPicker.d.ts +4 -0
  62. package/date-input/YearPicker.js +126 -0
  63. package/date-input/types.d.ts +67 -9
  64. package/dialog/Dialog.js +76 -93
  65. package/dialog/Dialog.stories.tsx +230 -123
  66. package/dialog/Dialog.test.js +334 -5
  67. package/dialog/types.d.ts +3 -2
  68. package/dropdown/Dropdown.d.ts +1 -1
  69. package/dropdown/Dropdown.js +246 -253
  70. package/dropdown/Dropdown.stories.tsx +245 -56
  71. package/dropdown/Dropdown.test.js +507 -110
  72. package/dropdown/DropdownMenu.d.ts +4 -0
  73. package/dropdown/DropdownMenu.js +70 -0
  74. package/dropdown/DropdownMenuItem.d.ts +4 -0
  75. package/dropdown/DropdownMenuItem.js +81 -0
  76. package/dropdown/types.d.ts +25 -5
  77. package/file-input/FileInput.d.ts +2 -2
  78. package/file-input/FileInput.js +181 -223
  79. package/file-input/FileInput.stories.tsx +122 -11
  80. package/file-input/FileInput.test.js +14 -14
  81. package/file-input/FileItem.d.ts +4 -14
  82. package/file-input/FileItem.js +44 -66
  83. package/file-input/types.d.ts +17 -0
  84. package/flex/Flex.d.ts +4 -0
  85. package/flex/Flex.js +69 -0
  86. package/flex/Flex.stories.tsx +103 -0
  87. package/flex/types.d.ts +32 -0
  88. package/footer/Footer.js +16 -89
  89. package/footer/Footer.stories.tsx +99 -1
  90. package/footer/Footer.test.js +14 -26
  91. package/footer/Icons.js +1 -1
  92. package/footer/types.d.ts +2 -1
  93. package/header/Header.js +108 -129
  94. package/header/Header.stories.tsx +189 -36
  95. package/header/Header.test.js +20 -4
  96. package/header/Icons.js +2 -2
  97. package/header/types.d.ts +3 -2
  98. package/heading/Heading.js +1 -1
  99. package/heading/Heading.test.js +1 -1
  100. package/inset/Inset.js +1 -34
  101. package/inset/Inset.stories.tsx +36 -36
  102. package/inset/types.d.ts +25 -1
  103. package/layout/ApplicationLayout.d.ts +16 -6
  104. package/layout/ApplicationLayout.js +72 -132
  105. package/layout/ApplicationLayout.stories.tsx +84 -93
  106. package/layout/Icons.d.ts +5 -0
  107. package/layout/Icons.js +13 -2
  108. package/layout/SidenavContext.d.ts +5 -0
  109. package/layout/SidenavContext.js +19 -0
  110. package/layout/types.d.ts +18 -33
  111. package/link/Link.d.ts +3 -2
  112. package/link/Link.js +59 -76
  113. package/link/Link.stories.tsx +155 -53
  114. package/link/Link.test.js +9 -19
  115. package/link/types.d.ts +7 -23
  116. package/main.d.ts +8 -10
  117. package/main.js +46 -56
  118. package/nav-tabs/NavTabs.d.ts +8 -0
  119. package/nav-tabs/NavTabs.js +125 -0
  120. package/nav-tabs/NavTabs.stories.tsx +260 -0
  121. package/nav-tabs/NavTabs.test.js +82 -0
  122. package/nav-tabs/Tab.d.ts +4 -0
  123. package/nav-tabs/Tab.js +150 -0
  124. package/nav-tabs/types.d.ts +53 -0
  125. package/number-input/NumberInput.js +11 -18
  126. package/number-input/NumberInput.stories.tsx +5 -5
  127. package/number-input/NumberInput.test.js +46 -12
  128. package/number-input/types.d.ts +17 -10
  129. package/package.json +20 -23
  130. package/paginator/Icons.d.ts +5 -0
  131. package/paginator/Icons.js +16 -28
  132. package/paginator/Paginator.js +19 -46
  133. package/paginator/Paginator.stories.tsx +24 -0
  134. package/paginator/Paginator.test.js +78 -39
  135. package/paragraph/Paragraph.d.ts +6 -0
  136. package/paragraph/Paragraph.js +38 -0
  137. package/paragraph/Paragraph.stories.tsx +44 -0
  138. package/password-input/PasswordInput.js +7 -4
  139. package/password-input/PasswordInput.test.js +17 -19
  140. package/password-input/types.d.ts +14 -11
  141. package/progress-bar/ProgressBar.d.ts +2 -2
  142. package/progress-bar/ProgressBar.js +61 -55
  143. package/progress-bar/ProgressBar.stories.jsx +47 -12
  144. package/progress-bar/ProgressBar.test.js +68 -23
  145. package/progress-bar/types.d.ts +3 -4
  146. package/quick-nav/QuickNav.d.ts +4 -0
  147. package/quick-nav/QuickNav.js +117 -0
  148. package/quick-nav/QuickNav.stories.tsx +356 -0
  149. package/quick-nav/types.d.ts +21 -0
  150. package/radio-group/Radio.d.ts +1 -1
  151. package/radio-group/Radio.js +43 -28
  152. package/radio-group/RadioGroup.js +32 -28
  153. package/radio-group/RadioGroup.stories.tsx +135 -17
  154. package/radio-group/RadioGroup.test.js +145 -117
  155. package/radio-group/types.d.ts +79 -2
  156. package/resultsetTable/Icons.d.ts +7 -0
  157. package/resultsetTable/Icons.js +51 -0
  158. package/resultsetTable/ResultsetTable.js +49 -108
  159. package/resultsetTable/ResultsetTable.stories.tsx +50 -25
  160. package/resultsetTable/ResultsetTable.test.js +61 -42
  161. package/resultsetTable/types.d.ts +2 -2
  162. package/select/Icons.d.ts +10 -0
  163. package/select/Icons.js +93 -0
  164. package/select/Listbox.d.ts +4 -0
  165. package/select/Listbox.js +169 -0
  166. package/select/Option.d.ts +4 -0
  167. package/select/Option.js +97 -0
  168. package/select/Select.js +179 -384
  169. package/select/Select.stories.tsx +531 -142
  170. package/select/Select.test.js +652 -324
  171. package/select/types.d.ts +53 -13
  172. package/sidenav/Sidenav.d.ts +6 -5
  173. package/sidenav/Sidenav.js +183 -53
  174. package/sidenav/Sidenav.stories.tsx +249 -149
  175. package/sidenav/Sidenav.test.js +25 -37
  176. package/sidenav/types.d.ts +50 -27
  177. package/slider/Slider.d.ts +2 -2
  178. package/slider/Slider.js +124 -98
  179. package/slider/Slider.stories.tsx +72 -9
  180. package/slider/Slider.test.js +143 -22
  181. package/slider/types.d.ts +10 -2
  182. package/spinner/Spinner.js +4 -4
  183. package/spinner/Spinner.stories.jsx +27 -1
  184. package/spinner/Spinner.test.js +1 -1
  185. package/switch/Switch.d.ts +2 -2
  186. package/switch/Switch.js +152 -69
  187. package/switch/Switch.stories.tsx +53 -42
  188. package/switch/Switch.test.js +156 -4
  189. package/switch/types.d.ts +12 -4
  190. package/table/Table.js +3 -3
  191. package/table/Table.stories.jsx +80 -1
  192. package/table/Table.test.js +2 -2
  193. package/tabs/Tab.d.ts +4 -0
  194. package/tabs/Tab.js +133 -0
  195. package/tabs/Tabs.d.ts +1 -1
  196. package/tabs/Tabs.js +363 -109
  197. package/tabs/Tabs.stories.tsx +119 -13
  198. package/tabs/Tabs.test.js +241 -14
  199. package/tabs/types.d.ts +19 -5
  200. package/tag/Tag.js +17 -22
  201. package/tag/Tag.stories.tsx +25 -8
  202. package/tag/Tag.test.js +1 -1
  203. package/tag/types.d.ts +1 -1
  204. package/text-input/Icons.d.ts +8 -0
  205. package/text-input/Icons.js +60 -0
  206. package/text-input/Suggestion.d.ts +4 -0
  207. package/text-input/Suggestion.js +84 -0
  208. package/text-input/Suggestions.d.ts +4 -0
  209. package/text-input/Suggestions.js +134 -0
  210. package/text-input/TextInput.js +221 -344
  211. package/text-input/TextInput.stories.tsx +290 -195
  212. package/text-input/TextInput.test.js +763 -731
  213. package/text-input/types.d.ts +50 -12
  214. package/textarea/Textarea.js +17 -26
  215. package/textarea/Textarea.stories.jsx +65 -6
  216. package/textarea/Textarea.test.js +38 -37
  217. package/textarea/types.d.ts +18 -11
  218. package/toggle-group/ToggleGroup.d.ts +1 -1
  219. package/toggle-group/ToggleGroup.js +6 -5
  220. package/toggle-group/ToggleGroup.stories.tsx +46 -4
  221. package/toggle-group/ToggleGroup.test.js +36 -5
  222. package/toggle-group/types.d.ts +9 -1
  223. package/typography/Typography.d.ts +4 -0
  224. package/typography/Typography.js +32 -0
  225. package/typography/Typography.stories.tsx +198 -0
  226. package/typography/types.d.ts +18 -0
  227. package/typography/types.js +5 -0
  228. package/useTheme.d.ts +1234 -1
  229. package/useTheme.js +3 -3
  230. package/useTranslatedLabels.d.ts +85 -0
  231. package/useTranslatedLabels.js +20 -0
  232. package/utils/BaseTypography.d.ts +21 -0
  233. package/utils/BaseTypography.js +108 -0
  234. package/utils/FocusLock.d.ts +13 -0
  235. package/utils/FocusLock.js +139 -0
  236. package/wizard/Wizard.d.ts +1 -1
  237. package/wizard/Wizard.js +59 -55
  238. package/wizard/Wizard.stories.tsx +48 -19
  239. package/wizard/Wizard.test.js +37 -24
  240. package/wizard/types.d.ts +10 -5
  241. package/ThemeContext.d.ts +0 -10
  242. package/ThemeContext.js +0 -243
  243. package/common/RequiredComponent.js +0 -32
  244. package/list/List.d.ts +0 -4
  245. package/list/List.js +0 -47
  246. package/list/List.stories.tsx +0 -95
  247. package/list/types.d.ts +0 -7
  248. package/radio/Radio.d.ts +0 -4
  249. package/radio/Radio.js +0 -174
  250. package/radio/Radio.stories.tsx +0 -192
  251. package/radio/Radio.test.js +0 -71
  252. package/radio/types.d.ts +0 -54
  253. package/row/Row.d.ts +0 -3
  254. package/row/Row.js +0 -127
  255. package/row/Row.stories.tsx +0 -237
  256. package/row/types.d.ts +0 -10
  257. package/stack/Stack.d.ts +0 -3
  258. package/stack/Stack.js +0 -97
  259. package/stack/Stack.stories.tsx +0 -164
  260. package/stack/types.d.ts +0 -9
  261. package/text/Text.d.ts +0 -7
  262. package/text/Text.js +0 -30
  263. package/text/Text.stories.tsx +0 -19
  264. /package/{list → bulleted-list}/types.js +0 -0
  265. /package/{radio → flex}/types.js +0 -0
  266. /package/{row → nav-tabs}/types.js +0 -0
  267. /package/{stack → quick-nav}/types.js +0 -0
@@ -4,12 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
 
5
5
  var _react = _interopRequireDefault(require("react"));
6
6
 
7
- var _RadioGroup = _interopRequireDefault(require("./RadioGroup"));
8
-
9
7
  var _react2 = require("@testing-library/react");
10
8
 
11
9
  var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
12
10
 
11
+ var _RadioGroup = _interopRequireDefault(require("./RadioGroup.tsx"));
12
+
13
13
  var options = [{
14
14
  label: "Option 01",
15
15
  value: "1"
@@ -38,7 +38,7 @@ var options = [{
38
38
  label: "Option 09",
39
39
  value: "9"
40
40
  }];
41
- var single_disabled_options = [{
41
+ var singleDisabledOptions = [{
42
42
  label: "Option 01",
43
43
  value: "1"
44
44
  }, {
@@ -53,34 +53,83 @@ describe("Radio Group component tests", function () {
53
53
  test("Initial render has correct aria attributes and tabIndex", function () {
54
54
  var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
55
55
  label: "test-radioGroup-label",
56
- options: options
56
+ options: options,
57
+ error: ""
57
58
  })),
58
59
  getByRole = _render.getByRole,
59
60
  getAllByRole = _render.getAllByRole,
60
- getByText = _render.getByText;
61
+ getByText = _render.getByText,
62
+ container = _render.container;
61
63
 
62
64
  var radioGroup = getByRole("radiogroup");
63
65
  var radios = getAllByRole("radio");
66
+ var errorId = "error-".concat(getByText("test-radioGroup-label").id.replace("label-", ""));
67
+ var error = container.querySelector("#".concat(errorId));
64
68
  expect(radioGroup.getAttribute("aria-disabled")).toBe("false");
65
69
  expect(radioGroup.getAttribute("aria-labelledby")).toBe(getByText("test-radioGroup-label").id);
66
70
  expect(radioGroup.getAttribute("aria-invalid")).toBe("false");
67
71
  expect(radioGroup.getAttribute("aria-required")).toBe("true");
72
+ expect(radioGroup.getAttribute("aria-orientation")).toBe("vertical");
73
+ expect(error.getAttribute("aria-live")).toBe("off");
68
74
  radios.forEach(function (radio, index) {
69
75
  // if no option was previously selected, first option is the focusable one
70
- index === 0 ? expect(radio.tabIndex).toBe(0) : expect(radio.tabIndex).toBe(-1);
76
+ if (index === 0) expect(radio.tabIndex).toBe(0);else expect(radio.tabIndex).toBe(-1);
71
77
  expect(radio.getAttribute("aria-checked")).toBe("false");
72
78
  expect(radio.getAttribute("aria-disabled")).toBe("false");
73
79
  expect(radio.getAttribute("aria-labelledby")).toBe(getByText("Option 0".concat(index + 1)).id);
74
80
  });
75
81
  });
76
- test("Disabled state renders with correct aria attribute, correct tabIndex values and it is not focusable by keyboard", function () {
82
+ test("aria-orientation attribute changes depending on stacking prop value", function () {
77
83
  var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
84
+ label: "test-radioGroup-label",
85
+ options: options,
86
+ stacking: "row"
87
+ })),
88
+ getByRole = _render2.getByRole;
89
+
90
+ var radioGroup = getByRole("radiogroup");
91
+ expect(radioGroup.getAttribute("aria-orientation")).toBe("horizontal");
92
+ });
93
+ test("Sends its value when submitted", function () {
94
+ var handlerOnSubmit = jest.fn(function (e) {
95
+ e.preventDefault();
96
+ var formData = new FormData(e.target);
97
+ var formProps = Object.fromEntries(formData);
98
+ expect(formProps).toStrictEqual({
99
+ radiogroup: "5"
100
+ });
101
+ });
102
+
103
+ var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement("form", {
104
+ onSubmit: handlerOnSubmit
105
+ }, /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
106
+ name: "radiogroup",
107
+ label: "test-radio-group-label",
108
+ options: options
109
+ }), /*#__PURE__*/_react["default"].createElement("button", {
110
+ type: "submit"
111
+ }, "Submit"))),
112
+ getByText = _render3.getByText,
113
+ getByRole = _render3.getByRole,
114
+ getAllByRole = _render3.getAllByRole;
115
+
116
+ var radioGroup = getByRole("radiogroup");
117
+ var submit = getByText("Submit");
118
+
119
+ _userEvent["default"].click(radioGroup);
120
+
121
+ _userEvent["default"].click(getAllByRole("radio")[4]);
122
+
123
+ _userEvent["default"].click(submit);
124
+ });
125
+ test("Disabled state renders with correct aria attribute, correct tabIndex values and it is not focusable by keyboard", function () {
126
+ var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
78
127
  label: "test-radioGroup-label",
79
128
  options: options,
80
129
  disabled: true
81
130
  })),
82
- getByRole = _render2.getByRole,
83
- getAllByRole = _render2.getAllByRole;
131
+ getByRole = _render4.getByRole,
132
+ getAllByRole = _render4.getAllByRole;
84
133
 
85
134
  var radioGroup = getByRole("radiogroup");
86
135
  var radios = getAllByRole("radio");
@@ -90,8 +139,8 @@ describe("Radio Group component tests", function () {
90
139
  });
91
140
 
92
141
  _react2.fireEvent.keyDown(radioGroup, {
93
- key: "Enter",
94
- code: "Enter",
142
+ key: " ",
143
+ code: "Space",
95
144
  keyCode: 13,
96
145
  charCode: 13
97
146
  });
@@ -115,14 +164,13 @@ describe("Radio Group component tests", function () {
115
164
  });
116
165
  });
117
166
  test("Disabled option renders with correct aria attribute, correct tabIndex value and it is not focusable by keyboard (focus 'jumps' the disabled option)", function () {
118
- var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
167
+ var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
119
168
  name: "test",
120
169
  label: "test-radioGroup-label",
121
- options: single_disabled_options
170
+ options: singleDisabledOptions
122
171
  })),
123
- getByRole = _render3.getByRole,
124
- getAllByRole = _render3.getAllByRole,
125
- container = _render3.container;
172
+ getByRole = _render5.getByRole,
173
+ getAllByRole = _render5.getAllByRole;
126
174
 
127
175
  var radioGroup = getByRole("radiogroup");
128
176
  var radios = getAllByRole("radio");
@@ -149,14 +197,39 @@ describe("Radio Group component tests", function () {
149
197
  expect(radios[1].tabIndex).toBe(-1);
150
198
  expect(radios[2].tabIndex).toBe(-1);
151
199
  });
200
+ test("Disabled radio group doesn't send its value when submitted", function () {
201
+ var handlerOnSubmit = jest.fn(function (e) {
202
+ e.preventDefault();
203
+ var formData = new FormData(e.target);
204
+ var formProps = Object.fromEntries(formData);
205
+ expect(formProps).toStrictEqual({});
206
+ });
207
+
208
+ var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement("form", {
209
+ onSubmit: handlerOnSubmit
210
+ }, /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
211
+ name: "radiogroup",
212
+ defaultValue: "1",
213
+ disabled: true,
214
+ label: "test-radio-group-label",
215
+ options: options
216
+ }), /*#__PURE__*/_react["default"].createElement("button", {
217
+ type: "submit"
218
+ }, "Submit"))),
219
+ getByText = _render6.getByText;
220
+
221
+ var submit = getByText("Submit");
222
+
223
+ _userEvent["default"].click(submit);
224
+ });
152
225
  test("Error state renders with correct aria attributes", function () {
153
- var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
226
+ var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
154
227
  label: "test-radioGroup-label",
155
228
  options: options,
156
229
  error: "Error message"
157
230
  })),
158
- getByRole = _render4.getByRole,
159
- getByText = _render4.getByText;
231
+ getByRole = _render7.getByRole,
232
+ getByText = _render7.getByText;
160
233
 
161
234
  var radioGroup = getByRole("radiogroup");
162
235
  var errorMessage = getByText("Error message");
@@ -168,21 +241,20 @@ describe("Radio Group component tests", function () {
168
241
  var onChange = jest.fn();
169
242
  var onBlur = jest.fn();
170
243
 
171
- var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
244
+ var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
172
245
  label: "test-radioGroup-label",
173
246
  options: options,
174
247
  onChange: onChange,
175
248
  onBlur: onBlur
176
249
  })),
177
- getByRole = _render5.getByRole,
178
- getAllByRole = _render5.getAllByRole;
250
+ getByRole = _render8.getByRole,
251
+ getAllByRole = _render8.getAllByRole;
179
252
 
180
253
  var radioGroup = getByRole("radiogroup");
181
254
  expect(radioGroup.getAttribute("aria-required")).toBe("true");
182
255
 
183
256
  _react2.fireEvent.blur(radioGroup);
184
257
 
185
- expect(onBlur).toHaveBeenCalled();
186
258
  expect(onBlur).toHaveBeenCalledWith({
187
259
  error: "This field is required. Please, choose an option."
188
260
  });
@@ -191,12 +263,10 @@ describe("Radio Group component tests", function () {
191
263
 
192
264
  _userEvent["default"].click(getAllByRole("radio")[0]);
193
265
 
194
- expect(onChange).toHaveBeenCalled();
195
266
  expect(onChange).toHaveBeenCalledWith("1");
196
267
 
197
268
  _react2.fireEvent.blur(radioGroup);
198
269
 
199
- expect(onBlur).toHaveBeenCalled();
200
270
  expect(onBlur).toHaveBeenCalledWith({
201
271
  value: "1"
202
272
  });
@@ -205,22 +275,21 @@ describe("Radio Group component tests", function () {
205
275
  var onChange = jest.fn();
206
276
  var onBlur = jest.fn();
207
277
 
208
- var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
278
+ var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
209
279
  label: "test-radioGroup-label",
210
280
  value: "",
211
281
  options: options,
212
282
  onChange: onChange,
213
283
  onBlur: onBlur
214
284
  })),
215
- getByRole = _render6.getByRole,
216
- getAllByRole = _render6.getAllByRole;
285
+ getByRole = _render9.getByRole,
286
+ getAllByRole = _render9.getAllByRole;
217
287
 
218
288
  var radioGroup = getByRole("radiogroup");
219
289
  expect(radioGroup.getAttribute("aria-required")).toBe("true");
220
290
 
221
291
  _react2.fireEvent.blur(radioGroup);
222
292
 
223
- expect(onBlur).toHaveBeenCalled();
224
293
  expect(onBlur).toHaveBeenCalledWith({
225
294
  value: "",
226
295
  error: "This field is required. Please, choose an option."
@@ -228,13 +297,12 @@ describe("Radio Group component tests", function () {
228
297
 
229
298
  _userEvent["default"].click(getAllByRole("radio")[0]);
230
299
 
231
- expect(onChange).toHaveBeenCalled();
232
300
  expect(onChange).toHaveBeenCalledWith("1");
233
301
  });
234
302
  test("The 'defaultValue' gives the radio group an initial value when it is uncontrolled", function () {
235
303
  var onChange = jest.fn();
236
304
 
237
- var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
305
+ var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
238
306
  defaultValue: "2",
239
307
  name: "test",
240
308
  label: "test-radio-group-label",
@@ -242,8 +310,8 @@ describe("Radio Group component tests", function () {
242
310
  options: options,
243
311
  onChange: onChange
244
312
  })),
245
- getAllByRole = _render7.getAllByRole,
246
- container = _render7.container;
313
+ getAllByRole = _render10.getAllByRole,
314
+ container = _render10.container;
247
315
 
248
316
  var radio = getAllByRole("radio")[1];
249
317
  var submitInput = container.querySelector("input[name=\"test\"]");
@@ -255,7 +323,7 @@ describe("Radio Group component tests", function () {
255
323
  var onChange = jest.fn();
256
324
  var onBlur = jest.fn();
257
325
 
258
- var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
326
+ var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
259
327
  name: "test",
260
328
  label: "test-radio-group-label",
261
329
  helperText: "test-radio-group-helper-text",
@@ -265,16 +333,15 @@ describe("Radio Group component tests", function () {
265
333
  optional: true,
266
334
  optionalItemLabel: "No selection"
267
335
  })),
268
- getByRole = _render8.getByRole,
269
- getByText = _render8.getByText,
270
- container = _render8.container;
336
+ getByRole = _render11.getByRole,
337
+ getByText = _render11.getByText,
338
+ container = _render11.container;
271
339
 
272
340
  var radioGroup = getByRole("radiogroup");
273
341
  expect(radioGroup.getAttribute("aria-required")).toBe("false");
274
342
 
275
343
  _react2.fireEvent.blur(radioGroup);
276
344
 
277
- expect(onBlur).toHaveBeenCalled();
278
345
  expect(onBlur).toHaveBeenCalledWith({});
279
346
  expect(radioGroup.getAttribute("aria-invalid")).toBe("false");
280
347
  var optionalLabel = getByText("No selection");
@@ -282,7 +349,6 @@ describe("Radio Group component tests", function () {
282
349
 
283
350
  _userEvent["default"].click(optionalLabel);
284
351
 
285
- expect(onChange).toHaveBeenCalled();
286
352
  expect(onChange).toHaveBeenCalledWith("");
287
353
  expect(submitInput.value).toBe("");
288
354
  });
@@ -290,7 +356,7 @@ describe("Radio Group component tests", function () {
290
356
  var onChange = jest.fn();
291
357
  var onBlur = jest.fn();
292
358
 
293
- var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
359
+ var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
294
360
  name: "test",
295
361
  value: "2",
296
362
  label: "test-radio-group-label",
@@ -299,9 +365,9 @@ describe("Radio Group component tests", function () {
299
365
  onChange: onChange,
300
366
  onBlur: onBlur
301
367
  })),
302
- getByRole = _render9.getByRole,
303
- getAllByRole = _render9.getAllByRole,
304
- container = _render9.container;
368
+ getByRole = _render12.getByRole,
369
+ getAllByRole = _render12.getAllByRole,
370
+ container = _render12.container;
305
371
 
306
372
  var radioGroup = getByRole("radiogroup");
307
373
  var radios = getAllByRole("radio");
@@ -312,12 +378,10 @@ describe("Radio Group component tests", function () {
312
378
 
313
379
  _userEvent["default"].click(radios[6]);
314
380
 
315
- expect(onChange).toHaveBeenCalled();
316
381
  expect(onChange).toHaveBeenCalledWith("7");
317
382
 
318
383
  _react2.fireEvent.blur(radioGroup);
319
384
 
320
- expect(onBlur).toHaveBeenCalled();
321
385
  expect(onBlur).toHaveBeenCalledWith({
322
386
  value: "2"
323
387
  });
@@ -325,16 +389,16 @@ describe("Radio Group component tests", function () {
325
389
  test("Select an option by clicking on its label", function () {
326
390
  var onChange = jest.fn();
327
391
 
328
- var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
392
+ var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
329
393
  name: "test",
330
394
  label: "test-radio-group-label",
331
395
  helperText: "test-radio-group-helper-text",
332
396
  options: options,
333
397
  onChange: onChange
334
398
  })),
335
- getByText = _render10.getByText,
336
- getAllByRole = _render10.getAllByRole,
337
- container = _render10.container;
399
+ getByText = _render13.getByText,
400
+ getAllByRole = _render13.getAllByRole,
401
+ container = _render13.container;
338
402
 
339
403
  var radioLabel = getByText("Option 09");
340
404
  var checkedRadio = getAllByRole("radio")[8];
@@ -343,7 +407,6 @@ describe("Radio Group component tests", function () {
343
407
 
344
408
  _userEvent["default"].click(radioLabel);
345
409
 
346
- expect(onChange).toHaveBeenCalled();
347
410
  expect(onChange).toHaveBeenCalledWith("9");
348
411
  expect(checkedRadio.getAttribute("aria-checked")).toBe("true");
349
412
  expect(checkedRadio.tabIndex).toBe(0);
@@ -353,15 +416,15 @@ describe("Radio Group component tests", function () {
353
416
  test("Select an option by clicking on its radio input", function () {
354
417
  var onChange = jest.fn();
355
418
 
356
- var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
419
+ var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
357
420
  name: "test",
358
421
  label: "test-radio-group-label",
359
422
  helperText: "test-radio-group-helper-text",
360
423
  options: options,
361
424
  onChange: onChange
362
425
  })),
363
- getAllByRole = _render11.getAllByRole,
364
- container = _render11.container;
426
+ getAllByRole = _render14.getAllByRole,
427
+ container = _render14.container;
365
428
 
366
429
  var checkedRadio = getAllByRole("radio")[6];
367
430
  var submitInput = container.querySelector("input[name=\"test\"]");
@@ -369,7 +432,6 @@ describe("Radio Group component tests", function () {
369
432
 
370
433
  _userEvent["default"].click(checkedRadio);
371
434
 
372
- expect(onChange).toHaveBeenCalled();
373
435
  expect(onChange).toHaveBeenCalledWith("7");
374
436
  expect(checkedRadio.getAttribute("aria-checked")).toBe("true");
375
437
  expect(checkedRadio.tabIndex).toBe(0);
@@ -379,7 +441,7 @@ describe("Radio Group component tests", function () {
379
441
  test("Select an option that is already checked does not call onChange event but gives the focus", function () {
380
442
  var onChange = jest.fn();
381
443
 
382
- var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
444
+ var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
383
445
  defaultValue: "2",
384
446
  name: "test",
385
447
  label: "test-radio-group-label",
@@ -387,7 +449,7 @@ describe("Radio Group component tests", function () {
387
449
  options: options,
388
450
  onChange: onChange
389
451
  })),
390
- getAllByRole = _render12.getAllByRole;
452
+ getAllByRole = _render15.getAllByRole;
391
453
 
392
454
  var checkedRadio = getAllByRole("radio")[1];
393
455
  expect(checkedRadio.tabIndex).toBe(0);
@@ -398,63 +460,31 @@ describe("Radio Group component tests", function () {
398
460
  expect(onChange).not.toHaveBeenCalled();
399
461
  expect(document.activeElement).toEqual(checkedRadio);
400
462
  });
401
- test("The 'enter' key checks the current focused option if anyone is checked", function () {
402
- var onChange = jest.fn();
403
-
404
- var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
405
- name: "test",
406
- label: "test-radio-group-label",
407
- helperText: "test-radio-group-helper-text",
408
- options: options,
409
- onChange: onChange
410
- })),
411
- getByRole = _render13.getByRole,
412
- getAllByRole = _render13.getAllByRole,
413
- container = _render13.container;
414
-
415
- var radioGroup = getByRole("radiogroup");
416
- var checkedRadio = getAllByRole("radio")[0];
417
- var submitInput = container.querySelector("input[name=\"test\"]");
418
-
419
- _react2.fireEvent.keyDown(radioGroup, {
420
- key: "Enter",
421
- code: "Enter",
422
- keyCode: 13,
423
- charCode: 13
424
- });
425
-
426
- expect(onChange).toHaveBeenCalled();
427
- expect(onChange).toHaveBeenCalledWith("1");
428
- expect(checkedRadio.getAttribute("aria-checked")).toBe("true");
429
- expect(checkedRadio.tabIndex).toBe(0);
430
- expect(submitInput.value).toBe("1");
431
- });
432
463
  test("The 'space' key checks the current focused option if anyone is checked", function () {
433
464
  var onChange = jest.fn();
434
465
 
435
- var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
466
+ var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
436
467
  name: "test",
437
468
  label: "test-radio-group-label",
438
469
  helperText: "test-radio-group-helper-text",
439
470
  options: options,
440
471
  onChange: onChange
441
472
  })),
442
- getByRole = _render14.getByRole,
443
- getAllByRole = _render14.getAllByRole,
444
- container = _render14.container;
473
+ getByRole = _render16.getByRole,
474
+ getAllByRole = _render16.getAllByRole,
475
+ container = _render16.container;
445
476
 
446
477
  var radioGroup = getByRole("radiogroup");
447
478
  var checkedRadio = getAllByRole("radio")[0];
448
479
  var submitInput = container.querySelector("input[name=\"test\"]");
449
480
 
450
481
  _react2.fireEvent.keyDown(radioGroup, {
451
- key: "Space",
482
+ key: " ",
452
483
  code: "Space",
453
484
  keyCode: 32,
454
485
  charCode: 32
455
486
  });
456
487
 
457
- expect(onChange).toHaveBeenCalled();
458
488
  expect(onChange).toHaveBeenCalledWith("1");
459
489
  expect(checkedRadio.getAttribute("aria-checked")).toBe("true");
460
490
  expect(checkedRadio.tabIndex).toBe(0);
@@ -464,7 +494,7 @@ describe("Radio Group component tests", function () {
464
494
  var onChange = jest.fn();
465
495
  var onBlur = jest.fn();
466
496
 
467
- var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
497
+ var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
468
498
  name: "test",
469
499
  label: "test-radio-group-label",
470
500
  helperText: "test-radio-group-helper-text",
@@ -472,9 +502,9 @@ describe("Radio Group component tests", function () {
472
502
  onChange: onChange,
473
503
  onBlur: onBlur
474
504
  })),
475
- getByRole = _render15.getByRole,
476
- getAllByRole = _render15.getAllByRole,
477
- container = _render15.container;
505
+ getByRole = _render17.getByRole,
506
+ getAllByRole = _render17.getAllByRole,
507
+ container = _render17.container;
478
508
 
479
509
  var radioGroup = getByRole("radiogroup");
480
510
  var radios = getAllByRole("radio");
@@ -503,11 +533,11 @@ describe("Radio Group component tests", function () {
503
533
  expect(radios[1].tabIndex).toBe(0);
504
534
  expect(submitInput.value).toBe("2");
505
535
  });
506
- test("The 'arrowDown' and 'arrowRight' keys move the selection to the next radio", function () {
536
+ test("The 'arrowDown' and 'arrowRight' keys move the selection to the next radio. When the last radio is reached, moves the selection to the first one", function () {
507
537
  var onChange = jest.fn();
508
538
  var onBlur = jest.fn();
509
539
 
510
- var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
540
+ var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
511
541
  defaultValue: "8",
512
542
  name: "test",
513
543
  label: "test-radio-group-label",
@@ -516,9 +546,9 @@ describe("Radio Group component tests", function () {
516
546
  onChange: onChange,
517
547
  onBlur: onBlur
518
548
  })),
519
- getByRole = _render16.getByRole,
520
- getAllByRole = _render16.getAllByRole,
521
- container = _render16.container;
549
+ getByRole = _render18.getByRole,
550
+ getAllByRole = _render18.getAllByRole,
551
+ container = _render18.container;
522
552
 
523
553
  var radioGroup = getByRole("radiogroup");
524
554
  var radios = getAllByRole("radio");
@@ -552,11 +582,11 @@ describe("Radio Group component tests", function () {
552
582
  expect(radios[0].tabIndex).toBe(0);
553
583
  expect(submitInput.value).toBe("1");
554
584
  });
555
- test("The 'arrowUp' and 'arrowLeft' keys move the selection to the previous radio", function () {
585
+ test("The 'arrowUp' and 'arrowLeft' keys move the selection to the previous radio. When the first radio is reached, moves the selection to the last one", function () {
556
586
  var onChange = jest.fn();
557
587
  var onBlur = jest.fn();
558
588
 
559
- var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
589
+ var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
560
590
  defaultValue: "2",
561
591
  name: "test",
562
592
  label: "test-radio-group-label",
@@ -565,9 +595,9 @@ describe("Radio Group component tests", function () {
565
595
  onChange: onChange,
566
596
  onBlur: onBlur
567
597
  })),
568
- getByRole = _render17.getByRole,
569
- getAllByRole = _render17.getAllByRole,
570
- container = _render17.container;
598
+ getByRole = _render19.getByRole,
599
+ getAllByRole = _render19.getAllByRole,
600
+ container = _render19.container;
571
601
 
572
602
  var radioGroup = getByRole("radiogroup");
573
603
  var radios = getAllByRole("radio");
@@ -604,16 +634,16 @@ describe("Radio Group component tests", function () {
604
634
  test("Keyboard focus movement continues from the last radio input clicked", function () {
605
635
  var onChange = jest.fn();
606
636
 
607
- var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
637
+ var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
608
638
  name: "test",
609
639
  label: "test-radio-group-label",
610
640
  helperText: "test-radio-group-helper-text",
611
641
  options: options,
612
642
  onChange: onChange
613
643
  })),
614
- getByRole = _render18.getByRole,
615
- getAllByRole = _render18.getAllByRole,
616
- container = _render18.container;
644
+ getByRole = _render20.getByRole,
645
+ getAllByRole = _render20.getAllByRole,
646
+ container = _render20.container;
617
647
 
618
648
  var radioGroup = getByRole("radiogroup");
619
649
  var radios = getAllByRole("radio");
@@ -628,7 +658,6 @@ describe("Radio Group component tests", function () {
628
658
  charCode: 40
629
659
  });
630
660
 
631
- expect(onChange).toHaveBeenCalled();
632
661
  expect(onChange).toHaveBeenCalledWith("5");
633
662
  expect(radios[4].getAttribute("aria-checked")).toBe("true");
634
663
  expect(document.activeElement).toEqual(radios[4]);
@@ -644,7 +673,6 @@ describe("Radio Group component tests", function () {
644
673
  charCode: 37
645
674
  });
646
675
 
647
- expect(onChange).toHaveBeenCalled();
648
676
  expect(onChange).toHaveBeenCalledWith("8");
649
677
  expect(radios[7].getAttribute("aria-checked")).toBe("true");
650
678
  expect(document.activeElement).toEqual(radios[7]);
@@ -654,7 +682,7 @@ describe("Radio Group component tests", function () {
654
682
  test("Readonly radio group lets the user move the focus, but neither click nor keyboard press changes the value", function () {
655
683
  var onChange = jest.fn();
656
684
 
657
- var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
685
+ var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RadioGroup["default"], {
658
686
  name: "test",
659
687
  label: "test-radio-group-label",
660
688
  helperText: "test-radio-group-helper-text",
@@ -662,9 +690,9 @@ describe("Radio Group component tests", function () {
662
690
  onChange: onChange,
663
691
  readonly: true
664
692
  })),
665
- getByRole = _render19.getByRole,
666
- getAllByRole = _render19.getAllByRole,
667
- container = _render19.container;
693
+ getByRole = _render21.getByRole,
694
+ getAllByRole = _render21.getAllByRole,
695
+ container = _render21.container;
668
696
 
669
697
  var radioGroup = getByRole("radiogroup");
670
698
  var radios = getAllByRole("radio");