@dxc-technology/halstack-react 0.0.0-da4b2be → 0.0.0-da9270d

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 (236) hide show
  1. package/BackgroundColorContext.d.ts +1 -10
  2. package/BackgroundColorContext.js +4 -21
  3. package/HalstackContext.d.ts +23 -124
  4. package/HalstackContext.js +10 -35
  5. package/README.md +47 -0
  6. package/accordion/Accordion.d.ts +1 -1
  7. package/accordion/Accordion.js +24 -76
  8. package/accordion/Accordion.stories.tsx +1 -113
  9. package/accordion/Accordion.test.js +18 -33
  10. package/accordion/types.d.ts +5 -17
  11. package/accordion-group/AccordionGroup.js +15 -42
  12. package/accordion-group/AccordionGroup.stories.tsx +78 -77
  13. package/accordion-group/AccordionGroup.test.js +43 -71
  14. package/accordion-group/AccordionGroupAccordion.js +9 -21
  15. package/accordion-group/types.d.ts +6 -18
  16. package/alert/Alert.js +15 -50
  17. package/alert/Alert.test.js +28 -45
  18. package/alert/types.d.ts +5 -5
  19. package/badge/Badge.js +4 -17
  20. package/badge/types.d.ts +1 -1
  21. package/bleed/Bleed.js +13 -21
  22. package/bleed/types.d.ts +2 -2
  23. package/box/Box.js +11 -33
  24. package/box/Box.test.js +1 -6
  25. package/box/types.d.ts +3 -3
  26. package/bulleted-list/BulletedList.js +18 -54
  27. package/bulleted-list/BulletedList.stories.tsx +1 -92
  28. package/bulleted-list/types.d.ts +5 -5
  29. package/button/Button.d.ts +1 -1
  30. package/button/Button.js +66 -99
  31. package/button/Button.stories.tsx +6 -87
  32. package/button/Button.test.js +17 -16
  33. package/button/types.d.ts +8 -4
  34. package/card/Card.d.ts +1 -1
  35. package/card/Card.js +39 -79
  36. package/card/Card.stories.tsx +0 -29
  37. package/card/Card.test.js +10 -21
  38. package/card/types.d.ts +6 -12
  39. package/checkbox/Checkbox.js +85 -120
  40. package/checkbox/Checkbox.stories.tsx +16 -54
  41. package/checkbox/Checkbox.test.js +107 -63
  42. package/checkbox/types.d.ts +8 -4
  43. package/chip/Chip.js +12 -31
  44. package/chip/Chip.stories.tsx +1 -1
  45. package/chip/Chip.test.js +15 -28
  46. package/chip/types.d.ts +4 -4
  47. package/common/coreTokens.d.ts +105 -14
  48. package/common/coreTokens.js +41 -24
  49. package/common/utils.js +2 -8
  50. package/common/variables.d.ts +23 -124
  51. package/common/variables.js +27 -135
  52. package/container/Container.d.ts +4 -0
  53. package/container/Container.js +194 -0
  54. package/container/Container.stories.tsx +214 -0
  55. package/container/types.d.ts +74 -0
  56. package/date-input/Calendar.js +15 -59
  57. package/date-input/DateInput.js +50 -96
  58. package/date-input/DateInput.stories.tsx +11 -30
  59. package/date-input/DateInput.test.js +674 -701
  60. package/date-input/DatePicker.js +11 -42
  61. package/date-input/Icons.d.ts +6 -6
  62. package/date-input/Icons.js +6 -23
  63. package/date-input/YearPicker.js +8 -34
  64. package/date-input/types.d.ts +27 -21
  65. package/dialog/Dialog.js +13 -40
  66. package/dialog/Dialog.stories.tsx +170 -0
  67. package/dialog/Dialog.test.js +125 -187
  68. package/dialog/types.d.ts +18 -13
  69. package/dropdown/Dropdown.js +39 -93
  70. package/dropdown/Dropdown.test.js +391 -378
  71. package/dropdown/DropdownMenu.js +8 -19
  72. package/dropdown/DropdownMenuItem.js +5 -17
  73. package/dropdown/types.d.ts +17 -19
  74. package/file-input/FileInput.js +180 -248
  75. package/file-input/FileInput.stories.tsx +1 -1
  76. package/file-input/FileInput.test.js +356 -354
  77. package/file-input/FileItem.js +14 -41
  78. package/file-input/types.d.ts +10 -10
  79. package/flex/Flex.js +25 -39
  80. package/flex/types.d.ts +6 -6
  81. package/footer/Footer.d.ts +1 -1
  82. package/footer/Footer.js +54 -112
  83. package/footer/Footer.stories.tsx +19 -95
  84. package/footer/Footer.test.js +21 -33
  85. package/footer/Icons.d.ts +2 -2
  86. package/footer/Icons.js +2 -7
  87. package/footer/types.d.ts +21 -29
  88. package/grid/Grid.d.ts +1 -1
  89. package/grid/Grid.js +2 -17
  90. package/grid/Grid.stories.tsx +38 -38
  91. package/grid/types.d.ts +10 -10
  92. package/header/Header.d.ts +2 -2
  93. package/header/Header.js +31 -114
  94. package/header/Header.stories.tsx +7 -71
  95. package/header/Header.test.js +12 -25
  96. package/header/Icons.d.ts +2 -2
  97. package/header/Icons.js +2 -7
  98. package/header/types.d.ts +5 -20
  99. package/heading/Heading.js +9 -31
  100. package/heading/Heading.test.js +70 -87
  101. package/heading/types.d.ts +7 -7
  102. package/image/Image.d.ts +4 -0
  103. package/image/Image.js +70 -0
  104. package/image/Image.stories.tsx +127 -0
  105. package/image/types.d.ts +72 -0
  106. package/inset/Inset.js +13 -21
  107. package/inset/types.d.ts +2 -2
  108. package/layout/ApplicationLayout.d.ts +3 -3
  109. package/layout/ApplicationLayout.js +28 -65
  110. package/layout/ApplicationLayout.stories.tsx +1 -1
  111. package/layout/Icons.d.ts +8 -5
  112. package/layout/Icons.js +51 -59
  113. package/layout/SidenavContext.d.ts +1 -1
  114. package/layout/SidenavContext.js +3 -9
  115. package/layout/types.d.ts +3 -3
  116. package/link/Link.js +21 -42
  117. package/link/Link.test.js +23 -41
  118. package/link/types.d.ts +14 -14
  119. package/main.d.ts +4 -3
  120. package/main.js +17 -58
  121. package/nav-tabs/NavTabs.js +11 -43
  122. package/nav-tabs/NavTabs.stories.tsx +1 -1
  123. package/nav-tabs/NavTabs.test.js +36 -43
  124. package/nav-tabs/Tab.js +16 -45
  125. package/nav-tabs/types.d.ts +9 -9
  126. package/number-input/NumberInput.d.ts +7 -0
  127. package/number-input/NumberInput.js +26 -35
  128. package/number-input/NumberInput.stories.tsx +42 -26
  129. package/number-input/NumberInput.test.js +700 -412
  130. package/number-input/types.d.ts +11 -5
  131. package/package.json +30 -28
  132. package/paginator/Icons.d.ts +5 -5
  133. package/paginator/Icons.js +5 -19
  134. package/paginator/Paginator.js +15 -43
  135. package/paginator/Paginator.test.js +224 -207
  136. package/paginator/types.d.ts +3 -3
  137. package/paragraph/Paragraph.js +3 -19
  138. package/paragraph/Paragraph.stories.tsx +0 -17
  139. package/password-input/Icons.d.ts +6 -0
  140. package/password-input/Icons.js +35 -0
  141. package/password-input/PasswordInput.js +57 -126
  142. package/password-input/PasswordInput.stories.tsx +1 -33
  143. package/password-input/PasswordInput.test.js +157 -140
  144. package/password-input/types.d.ts +8 -7
  145. package/progress-bar/ProgressBar.js +21 -53
  146. package/progress-bar/{ProgressBar.stories.jsx → ProgressBar.stories.tsx} +1 -1
  147. package/progress-bar/ProgressBar.test.js +35 -52
  148. package/progress-bar/types.d.ts +3 -3
  149. package/quick-nav/QuickNav.js +4 -27
  150. package/quick-nav/QuickNav.stories.tsx +1 -1
  151. package/quick-nav/types.d.ts +10 -10
  152. package/radio-group/Radio.d.ts +1 -1
  153. package/radio-group/Radio.js +22 -54
  154. package/radio-group/RadioGroup.js +37 -83
  155. package/radio-group/RadioGroup.stories.tsx +10 -10
  156. package/radio-group/RadioGroup.test.js +504 -470
  157. package/radio-group/types.d.ts +8 -8
  158. package/resultset-table/Icons.d.ts +7 -0
  159. package/{resultsetTable → resultset-table}/Icons.js +1 -5
  160. package/{resultsetTable → resultset-table}/ResultsetTable.js +23 -59
  161. package/{resultsetTable → resultset-table}/ResultsetTable.test.js +72 -92
  162. package/{resultsetTable → resultset-table}/types.d.ts +7 -7
  163. package/resultset-table/types.js +5 -0
  164. package/select/Icons.d.ts +7 -7
  165. package/select/Icons.js +1 -5
  166. package/select/Listbox.js +13 -39
  167. package/select/Option.js +9 -26
  168. package/select/Select.js +70 -155
  169. package/select/Select.stories.tsx +3 -3
  170. package/select/Select.test.js +1946 -1804
  171. package/select/types.d.ts +14 -15
  172. package/sidenav/Icons.d.ts +4 -4
  173. package/sidenav/Icons.js +1 -5
  174. package/sidenav/Sidenav.js +26 -68
  175. package/sidenav/Sidenav.test.js +3 -10
  176. package/sidenav/types.d.ts +18 -18
  177. package/slider/Slider.js +68 -125
  178. package/slider/Slider.test.js +107 -103
  179. package/slider/types.d.ts +4 -4
  180. package/spinner/Spinner.js +16 -54
  181. package/spinner/Spinner.test.js +25 -34
  182. package/spinner/types.d.ts +3 -3
  183. package/switch/Switch.js +49 -97
  184. package/switch/Switch.stories.tsx +0 -34
  185. package/switch/Switch.test.js +51 -96
  186. package/switch/types.d.ts +4 -4
  187. package/table/Table.js +5 -27
  188. package/table/Table.test.js +1 -6
  189. package/table/types.d.ts +8 -8
  190. package/tabs/Tab.js +10 -29
  191. package/tabs/Tabs.js +52 -129
  192. package/tabs/Tabs.test.js +62 -118
  193. package/tabs/types.d.ts +19 -19
  194. package/tag/Tag.js +21 -51
  195. package/tag/Tag.test.js +19 -30
  196. package/tag/types.d.ts +7 -7
  197. package/text-input/Icons.d.ts +5 -5
  198. package/text-input/Icons.js +1 -5
  199. package/text-input/Suggestion.js +9 -26
  200. package/text-input/Suggestions.d.ts +1 -1
  201. package/text-input/Suggestions.js +15 -65
  202. package/text-input/TextInput.js +204 -284
  203. package/text-input/TextInput.stories.tsx +48 -152
  204. package/text-input/TextInput.test.js +1210 -1194
  205. package/text-input/types.d.ts +25 -17
  206. package/textarea/Textarea.js +67 -109
  207. package/textarea/{Textarea.stories.jsx → Textarea.stories.tsx} +58 -100
  208. package/textarea/Textarea.test.js +150 -179
  209. package/textarea/types.d.ts +9 -5
  210. package/toggle-group/ToggleGroup.js +90 -107
  211. package/toggle-group/ToggleGroup.stories.tsx +7 -4
  212. package/toggle-group/ToggleGroup.test.js +68 -87
  213. package/toggle-group/types.d.ts +26 -17
  214. package/typography/Typography.js +4 -13
  215. package/typography/types.d.ts +1 -1
  216. package/useTheme.d.ts +20 -121
  217. package/useTheme.js +1 -8
  218. package/useTranslatedLabels.js +1 -7
  219. package/utils/BaseTypography.d.ts +2 -2
  220. package/utils/BaseTypography.js +16 -30
  221. package/utils/FocusLock.js +22 -39
  222. package/wizard/Wizard.js +14 -49
  223. package/wizard/Wizard.test.js +53 -80
  224. package/wizard/types.d.ts +6 -6
  225. package/card/ice-cream.jpg +0 -0
  226. package/number-input/NumberInputContext.d.ts +0 -4
  227. package/number-input/NumberInputContext.js +0 -19
  228. package/number-input/numberInputContextTypes.d.ts +0 -19
  229. package/resultsetTable/Icons.d.ts +0 -7
  230. package/slider/Slider.stories.tsx +0 -240
  231. /package/{resultsetTable → container}/types.js +0 -0
  232. /package/{number-input/numberInputContextTypes.js → image/types.js} +0 -0
  233. /package/{resultsetTable → resultset-table}/ResultsetTable.d.ts +0 -0
  234. /package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +0 -0
  235. /package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +0 -0
  236. /package/table/{Table.stories.jsx → Table.stories.tsx} +0 -0
@@ -1,47 +1,36 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
5
  Object.defineProperty(exports, "__esModule", {
8
6
  value: true
9
7
  });
10
8
  exports["default"] = void 0;
11
-
12
9
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
-
14
10
  var _react = _interopRequireWildcard(require("react"));
15
-
16
11
  var _styledComponents = _interopRequireDefault(require("styled-components"));
17
-
18
12
  var _templateObject;
19
-
20
- 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); }
21
-
22
- 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; }
23
-
13
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
14
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
24
15
  var TypographyContext = /*#__PURE__*/_react["default"].createContext(null);
25
-
26
16
  var BaseTypography = function BaseTypography(_ref) {
27
17
  var as = _ref.as,
28
- display = _ref.display,
29
- fontFamily = _ref.fontFamily,
30
- fontSize = _ref.fontSize,
31
- fontStyle = _ref.fontStyle,
32
- fontWeight = _ref.fontWeight,
33
- letterSpacing = _ref.letterSpacing,
34
- lineHeight = _ref.lineHeight,
35
- textAlign = _ref.textAlign,
36
- color = _ref.color,
37
- textDecoration = _ref.textDecoration,
38
- textOverflow = _ref.textOverflow,
39
- whiteSpace = _ref.whiteSpace,
40
- children = _ref.children;
18
+ display = _ref.display,
19
+ fontFamily = _ref.fontFamily,
20
+ fontSize = _ref.fontSize,
21
+ fontStyle = _ref.fontStyle,
22
+ fontWeight = _ref.fontWeight,
23
+ letterSpacing = _ref.letterSpacing,
24
+ lineHeight = _ref.lineHeight,
25
+ textAlign = _ref.textAlign,
26
+ color = _ref.color,
27
+ textDecoration = _ref.textDecoration,
28
+ textOverflow = _ref.textOverflow,
29
+ whiteSpace = _ref.whiteSpace,
30
+ children = _ref.children;
41
31
  var componentContext = (0, _react.useContext)(TypographyContext);
42
32
  var contextValue = (0, _react.useMemo)(function () {
43
33
  var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10, _ref11, _ref12, _ref13, _ref14;
44
-
45
34
  return {
46
35
  as: (_ref2 = as !== null && as !== void 0 ? as : componentContext === null || componentContext === void 0 ? void 0 : componentContext.as) !== null && _ref2 !== void 0 ? _ref2 : "span",
47
36
  display: (_ref3 = display !== null && display !== void 0 ? display : componentContext === null || componentContext === void 0 ? void 0 : componentContext.display) !== null && _ref3 !== void 0 ? _ref3 : "inline",
@@ -62,7 +51,6 @@ var BaseTypography = function BaseTypography(_ref) {
62
51
  value: contextValue
63
52
  }, /*#__PURE__*/_react["default"].createElement(StyledTypography, contextValue, children));
64
53
  };
65
-
66
54
  var StyledTypography = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: ", ";\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n line-height: ", ";\n text-align: ", ";\n text-decoration: ", ";\n text-overflow: ", ";\n white-space: ", ";\n overflow: ", ";\n margin: 0;\n"])), function (_ref15) {
67
55
  var display = _ref15.display;
68
56
  return display;
@@ -103,6 +91,4 @@ var StyledTypography = _styledComponents["default"].span(_templateObject || (_te
103
91
  var textOverflow = _ref27.textOverflow;
104
92
  return textOverflow !== "unset" ? "hidden" : "visible";
105
93
  });
106
-
107
- var _default = BaseTypography;
108
- exports["default"] = _default;
94
+ var _default = exports["default"] = BaseTypography;
@@ -1,33 +1,26 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
5
  Object.defineProperty(exports, "__esModule", {
8
6
  value: true
9
7
  });
10
8
  exports["default"] = void 0;
11
-
12
9
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
13
-
14
10
  var _react = _interopRequireWildcard(require("react"));
15
-
16
- 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); }
17
-
18
- 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; }
19
-
11
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
12
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
20
13
  var not = {
21
14
  negTabIndex: ':not([tabindex^="-"])',
22
15
  disabled: ":not(:disabled)"
23
16
  };
24
17
  var focusableQuery = ["a[href]".concat(not.negTabIndex), "area[href]".concat(not.negTabIndex), "input:not([type=\"hidden\"])".concat(not.negTabIndex).concat(not.disabled), "select".concat(not.negTabIndex).concat(not.disabled), "textarea".concat(not.negTabIndex).concat(not.disabled), "button".concat(not.negTabIndex).concat(not.disabled), "details > summary:first-of-type".concat(not.negTabIndex), "iframe".concat(not.negTabIndex), "audio[controls]".concat(not.negTabIndex), "video[controls]".concat(not.negTabIndex), "[contenteditable]".concat(not.negTabIndex), "[tabindex]".concat(not.negTabIndex).concat(not.disabled)].join(",");
25
-
26
18
  var getFocusableElements = function getFocusableElements(container) {
27
19
  return Array.prototype.slice.call(container.querySelectorAll(focusableQuery)).filter(function (element) {
28
20
  return element.getAttribute("aria-hidden") !== "true" && window.getComputedStyle(element).display !== "none" && window.getComputedStyle(element).visibility !== "hidden";
29
21
  });
30
22
  };
23
+
31
24
  /**
32
25
  * This function will try to focus the element and return true if it was able to receive the focus.
33
26
  * Even if the element is focusable (passes any of the conditions of our selector), there is the possibility
@@ -35,37 +28,32 @@ var getFocusableElements = function getFocusableElements(container) {
35
28
  * @param element: HTMLElement
36
29
  * @returns
37
30
  */
38
-
39
-
40
- var attempFocus = function attempFocus(element) {
31
+ var attemptFocus = function attemptFocus(element) {
41
32
  element === null || element === void 0 ? void 0 : element.focus();
42
33
  return document.activeElement === element;
43
34
  };
35
+
44
36
  /**
45
37
  * @param element: HTMLElement
46
38
  * @returns boolean: true if element is contained inside a Radix Portal, false otherwise.
47
39
  */
48
-
49
-
50
40
  var radixPortalContains = function radixPortalContains(activeElement) {
51
41
  var radixPortals = document.querySelectorAll("[data-radix-portal]");
52
42
  return Array.prototype.slice.call(radixPortals).some(function (portal) {
53
43
  return portal.contains(activeElement);
54
44
  });
55
45
  };
46
+
56
47
  /**
57
48
  * Custom hook that returns an array of focusable elements inside a container.
58
49
  * @param ref: React.MutableRefObject<HTMLDivElement>
59
50
  * @returns
60
51
  */
61
-
62
-
63
52
  var useFocusableElements = function useFocusableElements(ref) {
64
53
  var _useState = (0, _react.useState)(),
65
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
66
- focusableElements = _useState2[0],
67
- setFocusableElements = _useState2[1];
68
-
54
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
55
+ focusableElements = _useState2[0],
56
+ setFocusableElements = _useState2[1];
69
57
  (0, _react.useEffect)(function () {
70
58
  if (ref.current != null) {
71
59
  setFocusableElements(getFocusableElements(ref.current));
@@ -84,6 +72,7 @@ var useFocusableElements = function useFocusableElements(ref) {
84
72
  }, []);
85
73
  return focusableElements;
86
74
  };
75
+
87
76
  /**
88
77
  * Traps the focus inside the children of the component. It will focus the first focusable element when the component is mounted.
89
78
  * When the focus is on the last focusable element and the user tries to focus the next element, it will focus the first element.
@@ -92,33 +81,26 @@ var useFocusableElements = function useFocusableElements(ref) {
92
81
  * @param children: React.ReactNode
93
82
  * @returns
94
83
  */
95
-
96
-
97
84
  var FocusLock = function FocusLock(_ref) {
98
85
  var children = _ref.children;
99
86
  var childrenContainerRef = (0, _react.useRef)();
100
87
  var focusableElements = useFocusableElements(childrenContainerRef);
101
88
  var focusFirst = (0, _react.useCallback)(function () {
102
89
  var _childrenContainerRef;
103
-
104
- if ((focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) === 0) (_childrenContainerRef = childrenContainerRef.current) === null || _childrenContainerRef === void 0 ? void 0 : _childrenContainerRef.focus();else if ((focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) > 0) for (var i = 0; i < focusableElements.length; i++) {
105
- if (attempFocus(focusableElements[i])) return;
106
- }
90
+ if ((focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) === 0) (_childrenContainerRef = childrenContainerRef.current) === null || _childrenContainerRef === void 0 ? void 0 : _childrenContainerRef.focus();else if ((focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) > 0) focusableElements.some(function (element) {
91
+ return attemptFocus(element);
92
+ });
107
93
  }, [focusableElements]);
108
-
109
94
  var focusLast = function focusLast() {
110
- for (var i = focusableElements.length - 1; i >= 0; i--) {
111
- if (attempFocus(focusableElements[i])) return;
112
- }
95
+ focusableElements.reverse().some(function (element) {
96
+ return attemptFocus(element);
97
+ });
113
98
  };
114
-
115
99
  var focusLock = function focusLock(event) {
116
- if (event.key === "Tab") focusableElements.length === 0 && event.preventDefault();else if (event.key === "Tab" && event.key === "Shift") focusableElements.length === 0 && event.preventDefault();
100
+ if (event.key === "Tab") focusableElements.length === 0 && event.preventDefault();
117
101
  };
118
-
119
102
  (0, _react.useEffect)(function () {
120
103
  var _childrenContainerRef2;
121
-
122
104
  if (!((_childrenContainerRef2 = childrenContainerRef.current) !== null && _childrenContainerRef2 !== void 0 && _childrenContainerRef2.contains(document.activeElement)) && !radixPortalContains(document.activeElement)) focusFirst();
123
105
  }, [focusFirst]);
124
106
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
@@ -127,12 +109,13 @@ var FocusLock = function FocusLock(_ref) {
127
109
  }), /*#__PURE__*/_react["default"].createElement("div", {
128
110
  onKeyDown: focusLock,
129
111
  ref: childrenContainerRef,
130
- tabIndex: (focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) === 0 ? 0 : -1
112
+ tabIndex: (focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) === 0 ? 0 : -1,
113
+ style: {
114
+ outline: "none"
115
+ }
131
116
  }, children), /*#__PURE__*/_react["default"].createElement("div", {
132
117
  onFocus: focusFirst,
133
118
  tabIndex: 0
134
119
  }));
135
120
  };
136
-
137
- var _default = FocusLock;
138
- exports["default"] = _default;
121
+ var _default = exports["default"] = FocusLock;
package/wizard/Wizard.js CHANGED
@@ -1,34 +1,21 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  var _typeof3 = require("@babel/runtime/helpers/typeof");
6
-
7
5
  Object.defineProperty(exports, "__esModule", {
8
6
  value: true
9
7
  });
10
8
  exports["default"] = void 0;
11
-
12
9
  var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
13
-
14
10
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
15
-
16
11
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
17
-
18
12
  var _react = _interopRequireWildcard(require("react"));
19
-
20
13
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
21
-
22
14
  var _variables = require("../common/variables");
23
-
24
15
  var _useTheme = _interopRequireDefault(require("../useTheme"));
25
-
26
16
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
27
-
28
- 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); }
29
-
30
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(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; }
31
-
17
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
18
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
32
19
  var icons = {
33
20
  validIcon: /*#__PURE__*/_react["default"].createElement("svg", {
34
21
  id: "check_circle_black_18dp",
@@ -80,38 +67,31 @@ var icons = {
80
67
  fill: "#d0011b"
81
68
  }))
82
69
  };
83
-
84
70
  var DxcWizard = function DxcWizard(_ref) {
85
71
  var _ref2;
86
-
87
72
  var _ref$mode = _ref.mode,
88
- mode = _ref$mode === void 0 ? "horizontal" : _ref$mode,
89
- defaultCurrentStep = _ref.defaultCurrentStep,
90
- currentStep = _ref.currentStep,
91
- onStepClick = _ref.onStepClick,
92
- steps = _ref.steps,
93
- margin = _ref.margin,
94
- _ref$tabIndex = _ref.tabIndex,
95
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
96
-
73
+ mode = _ref$mode === void 0 ? "horizontal" : _ref$mode,
74
+ defaultCurrentStep = _ref.defaultCurrentStep,
75
+ currentStep = _ref.currentStep,
76
+ onStepClick = _ref.onStepClick,
77
+ steps = _ref.steps,
78
+ margin = _ref.margin,
79
+ _ref$tabIndex = _ref.tabIndex,
80
+ tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
97
81
  var _useState = (0, _react.useState)((_ref2 = currentStep !== null && currentStep !== void 0 ? currentStep : defaultCurrentStep) !== null && _ref2 !== void 0 ? _ref2 : 0),
98
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
99
- innerCurrent = _useState2[0],
100
- setInnerCurrentStep = _useState2[1];
101
-
82
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
83
+ innerCurrent = _useState2[0],
84
+ setInnerCurrentStep = _useState2[1];
102
85
  var renderedCurrent = currentStep == null ? innerCurrent : currentStep;
103
86
  var colorsTheme = (0, _useTheme["default"])();
104
-
105
87
  var handleStepClick = function handleStepClick(newValue) {
106
88
  if (currentStep == null) {
107
89
  setInnerCurrentStep(newValue);
108
90
  }
109
-
110
91
  if (onStepClick) {
111
92
  onStepClick(newValue);
112
93
  }
113
94
  };
114
-
115
95
  return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
116
96
  theme: colorsTheme.wizard
117
97
  }, /*#__PURE__*/_react["default"].createElement(StepsContainer, {
@@ -154,7 +134,6 @@ var DxcWizard = function DxcWizard(_ref) {
154
134
  }));
155
135
  })));
156
136
  };
157
-
158
137
  var StepsContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: ", ";\n justify-content: center;\n ", ";\n font-family: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"])), function (props) {
159
138
  return props.mode === "vertical" ? "column" : "row";
160
139
  }, function (props) {
@@ -172,7 +151,6 @@ var StepsContainer = _styledComponents["default"].div(_templateObject || (_templ
172
151
  }, function (props) {
173
152
  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
174
153
  });
175
-
176
154
  var StepContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n ", "\n flex-grow: ", ";\n flex-direction: ", ";\n ", "\n"])), function (props) {
177
155
  return props.mode !== "vertical" && "align-items: center;";
178
156
  }, function (props) {
@@ -182,7 +160,6 @@ var StepContainer = _styledComponents["default"].div(_templateObject2 || (_templ
182
160
  }, function (props) {
183
161
  return props.mode === "vertical" && "width: fit-content;";
184
162
  });
185
-
186
163
  var Step = _styledComponents["default"].button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n justify-content: flex-start;\n align-items: center;\n border: none;\n border-radius: 0.25rem;\n background: inherit;\n margin: ", ";\n\n padding: 0px;\n ", ";\n\n &:hover {\n ", ";\n }\n &:focus {\n outline: 2px solid ", ";\n }\n"])), function (props) {
187
164
  return props.first ? props.mode === "vertical" ? "0 0 24px 0" : "0 24px 0 0" : props.last ? props.mode === "vertical" ? "24px 0 0 0" : "0 0 0 24px" : props.mode === "vertical" ? "24px 0" : "0 24px";
188
165
  }, function (props) {
@@ -192,11 +169,9 @@ var Step = _styledComponents["default"].button(_templateObject3 || (_templateObj
192
169
  }, function (props) {
193
170
  return props.theme.focusColor;
194
171
  });
195
-
196
172
  var StepHeader = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n display: inline-flex;\n ", "\n"])), function (props) {
197
173
  return props.validityIcon && "padding-bottom: 4px;";
198
174
  });
199
-
200
175
  var IconContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n\n ", "\n ", ";\n\n border-radius: ", ";\n\n display: flex;\n justify-content: center;\n align-items: center;\n"])), function (props) {
201
176
  return props.disabled ? props.theme.disabledStepWidth : props.current ? props.theme.selectedStepWidth : props.theme.stepWidth;
202
177
  }, function (props) {
@@ -208,19 +183,16 @@ var IconContainer = _styledComponents["default"].div(_templateObject5 || (_templ
208
183
  }, function (props) {
209
184
  return !props.current && !props.disabled ? props.theme.stepBorderRadius : props.current ? props.theme.selectedStepBorderRadius : props.disabled ? props.theme.disabledStepBorderRadius : "";
210
185
  });
211
-
212
186
  var Icon = _styledComponents["default"].img(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n"])), function (props) {
213
187
  return props.theme.stepIconSize;
214
188
  }, function (props) {
215
189
  return props.theme.stepIconSize;
216
190
  });
217
-
218
191
  var StepIconContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n width: ", ";\n height: ", ";\n overflow: hidden;\n img,\n svg {\n height: 100%;\n width: 100%;\n }\n"])), function (props) {
219
192
  return props.theme.stepIconSize;
220
193
  }, function (props) {
221
194
  return props.theme.stepIconSize;
222
195
  });
223
-
224
196
  var Number = _styledComponents["default"].p(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n font-size: ", ";\n font-family: ", ";\n font-style: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n opacity: 1;\n margin: 0px 0px 0px 1px;\n"])), function (props) {
225
197
  return props.theme.stepFontSize;
226
198
  }, function (props) {
@@ -232,11 +204,8 @@ var Number = _styledComponents["default"].p(_templateObject8 || (_templateObject
232
204
  }, function (props) {
233
205
  return props.theme.stepFontTracking;
234
206
  });
235
-
236
207
  var ValidityIconContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n width: 18px;\n height: 18px;\n position: absolute;\n top: 22.5px;\n left: 22.5px;\n"])));
237
-
238
208
  var InfoContainer = _styledComponents["default"].div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n margin-left: 12px;\n"])));
239
-
240
209
  var Label = _styledComponents["default"].p(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n text-align: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n ", ";\n text-transform: ", ";\n margin: 0;\n"])), function (props) {
241
210
  return props.theme.labelTextAlign;
242
211
  }, function (props) {
@@ -254,7 +223,6 @@ var Label = _styledComponents["default"].p(_templateObject11 || (_templateObject
254
223
  }, function (props) {
255
224
  return props.theme.labelFontTextTransform;
256
225
  });
257
-
258
226
  var Description = _styledComponents["default"].p(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n text-align: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n text-transform: ", ";\n ", ";\n margin: 0;\n"])), function (props) {
259
227
  return props.theme.helperTextTextAlign;
260
228
  }, function (props) {
@@ -272,7 +240,6 @@ var Description = _styledComponents["default"].p(_templateObject12 || (_template
272
240
  }, function (props) {
273
241
  return props.disabled ? "color: ".concat(props.theme.disabledHelperTextFontColor, ";") : "color: ".concat(!props.visited ? props.theme.unvisitedHelperTextFontColor : props.current ? props.theme.selectedHelperTextFontColor : props.theme.visitedHelperTextFontColor, ";");
274
242
  });
275
-
276
243
  var StepSeparator = _styledComponents["default"].div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n ", ";\n ", "\n border: ", ";\n opacity: 1;\n flex-grow: 1;\n"])), function (props) {
277
244
  return props.mode === "horizontal" ? "height: 0;" : "width: 0;";
278
245
  }, function (props) {
@@ -280,6 +247,4 @@ var StepSeparator = _styledComponents["default"].div(_templateObject13 || (_temp
280
247
  }, function (props) {
281
248
  return "".concat(props.theme.separatorBorderStyle, " ").concat(props.theme.separatorBorderThickness, " ").concat(props.theme.separatorColor);
282
249
  });
283
-
284
- var _default = DxcWizard;
285
- exports["default"] = _default;
250
+ var _default = exports["default"] = DxcWizard;
@@ -1,25 +1,20 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  var _react = _interopRequireDefault(require("react"));
6
-
7
5
  var _react2 = require("@testing-library/react");
8
-
9
6
  var _Wizard = _interopRequireDefault(require("./Wizard.tsx"));
10
-
11
7
  describe("Wizard components tests", function () {
12
8
  test("Wizard renders with correct steps", function () {
13
9
  var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
14
- steps: [{
15
- label: "first-step"
16
- }, {
17
- label: "second-step"
18
- }]
19
- })),
20
- getByText = _render.getByText,
21
- getAllByRole = _render.getAllByRole;
22
-
10
+ steps: [{
11
+ label: "first-step"
12
+ }, {
13
+ label: "second-step"
14
+ }]
15
+ })),
16
+ getByText = _render.getByText,
17
+ getAllByRole = _render.getAllByRole;
23
18
  var steps = getAllByRole("button");
24
19
  expect(getByText("first-step")).toBeTruthy();
25
20
  expect(getByText("second-step")).toBeTruthy();
@@ -28,112 +23,90 @@ describe("Wizard components tests", function () {
28
23
  });
29
24
  test("Wizard renders with initially selected step", function () {
30
25
  var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
31
- defaultCurrentStep: 1,
32
- steps: [{
33
- label: "first-step"
34
- }, {
35
- label: "second-step"
36
- }]
37
- })),
38
- getAllByRole = _render2.getAllByRole;
39
-
26
+ defaultCurrentStep: 1,
27
+ steps: [{
28
+ label: "first-step"
29
+ }, {
30
+ label: "second-step"
31
+ }]
32
+ })),
33
+ getAllByRole = _render2.getAllByRole;
40
34
  var steps = getAllByRole("button");
41
35
  expect(steps[1].getAttribute("aria-current")).toBe("step");
42
36
  });
43
37
  test("Click on step text", function () {
44
38
  var onClick = jest.fn();
45
-
46
39
  var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
47
- onStepClick: onClick,
48
- steps: [{
49
- label: "first-step"
50
- }]
51
- })),
52
- getByText = _render3.getByText;
53
-
40
+ onStepClick: onClick,
41
+ steps: [{
42
+ label: "first-step"
43
+ }]
44
+ })),
45
+ getByText = _render3.getByText;
54
46
  var step = getByText("first-step");
55
-
56
47
  _react2.fireEvent.click(step);
57
-
58
48
  expect(onClick).toHaveBeenCalled();
59
49
  });
60
50
  test("Click on step description", function () {
61
51
  var onClick = jest.fn();
62
-
63
52
  var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
64
- onStepClick: onClick,
65
- steps: [{
66
- label: "first-step",
67
- description: "step-description"
68
- }]
69
- })),
70
- getByText = _render4.getByText;
71
-
53
+ onStepClick: onClick,
54
+ steps: [{
55
+ label: "first-step",
56
+ description: "step-description"
57
+ }]
58
+ })),
59
+ getByText = _render4.getByText;
72
60
  var step = getByText("step-description");
73
-
74
61
  _react2.fireEvent.click(step);
75
-
76
62
  expect(onClick).toHaveBeenCalled();
77
63
  });
78
64
  test("Click on step number", function () {
79
65
  var onClick = jest.fn();
80
-
81
66
  var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
82
- onStepClick: onClick,
83
- steps: [{
84
- label: "first-step"
85
- }]
86
- })),
87
- getByText = _render5.getByText;
88
-
67
+ onStepClick: onClick,
68
+ steps: [{
69
+ label: "first-step"
70
+ }]
71
+ })),
72
+ getByText = _render5.getByText;
89
73
  var step = getByText("1");
90
-
91
74
  _react2.fireEvent.click(step);
92
-
93
75
  expect(onClick).toHaveBeenCalled();
94
76
  });
95
77
  test("Click on disable step", function () {
96
78
  var onClick = jest.fn();
97
-
98
79
  var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
99
- onStepClick: onClick,
100
- steps: [{
101
- label: "first-step"
102
- }, {
103
- label: "second-step",
104
- disabled: true
105
- }]
106
- })),
107
- getByText = _render6.getByText;
108
-
80
+ onStepClick: onClick,
81
+ steps: [{
82
+ label: "first-step"
83
+ }, {
84
+ label: "second-step",
85
+ disabled: true
86
+ }]
87
+ })),
88
+ getByText = _render6.getByText;
109
89
  var step = getByText("second-step");
110
-
111
90
  _react2.fireEvent.click(step);
112
-
113
91
  expect(onClick).toHaveBeenCalledTimes(0);
114
92
  });
115
93
  test("Controlled wizard function is called", function () {
116
94
  var onClick = jest.fn(function (i) {
117
95
  return i;
118
96
  });
119
-
120
97
  var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
121
- currentStep: 0,
122
- onStepClick: onClick,
123
- steps: [{
124
- label: "first-step"
125
- }, {
126
- label: "second-step"
127
- }]
128
- })),
129
- getAllByRole = _render7.getAllByRole;
130
-
98
+ currentStep: 0,
99
+ onStepClick: onClick,
100
+ steps: [{
101
+ label: "first-step"
102
+ }, {
103
+ label: "second-step"
104
+ }]
105
+ })),
106
+ getAllByRole = _render7.getAllByRole;
131
107
  var steps = getAllByRole("button");
132
-
133
108
  _react2.fireEvent.click(steps[1]);
134
-
135
109
  _react2.fireEvent.click(steps[0]);
136
-
137
110
  expect(onClick).toHaveBeenCalledTimes(2);
138
111
  expect(onClick).toHaveBeenNthCalledWith(1, 1);
139
112
  expect(onClick).toHaveBeenNthCalledWith(2, 0);
package/wizard/types.d.ts CHANGED
@@ -1,13 +1,13 @@
1
1
  /// <reference types="react" />
2
- declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
- declare type Margin = {
2
+ type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
3
+ type Margin = {
4
4
  top?: Space;
5
5
  bottom?: Space;
6
6
  left?: Space;
7
7
  right?: Space;
8
8
  };
9
- declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
10
- export declare type StepProps = {
9
+ type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
10
+ export type StepProps = {
11
11
  /**
12
12
  * Step label.
13
13
  */
@@ -29,7 +29,7 @@ export declare type StepProps = {
29
29
  */
30
30
  valid?: boolean;
31
31
  };
32
- declare type Props = {
32
+ type Props = {
33
33
  /**
34
34
  * The wizard can be showed in horizontal or vertical.
35
35
  */
@@ -46,7 +46,7 @@ declare type Props = {
46
46
  * This function will be called when the user clicks a step. The step
47
47
  * number will be passed as a parameter.
48
48
  */
49
- onStepClick?: (newCurrentStep: number) => void;
49
+ onStepClick?: (currentStep: number) => void;
50
50
  /**
51
51
  * An array of objects representing the steps.
52
52
  */
Binary file
@@ -1,4 +0,0 @@
1
- import React from "react";
2
- import NumberInputContextPropsType from "./numberInputContextTypes";
3
- declare const NumberInputContext: React.Context<NumberInputContextPropsType>;
4
- export default NumberInputContext;