@dxc-technology/halstack-react 10.1.0 → 11.0.0
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.
- package/BackgroundColorContext.d.ts +2 -2
- package/BackgroundColorContext.js +5 -17
- package/HalstackContext.d.ts +18 -6
- package/HalstackContext.js +9 -34
- package/accordion/Accordion.js +21 -58
- package/accordion/Accordion.stories.tsx +1 -15
- package/accordion/Accordion.test.js +18 -33
- package/accordion/types.d.ts +5 -5
- package/accordion-group/AccordionGroup.js +15 -42
- package/accordion-group/AccordionGroup.stories.tsx +1 -1
- package/accordion-group/AccordionGroup.test.js +42 -60
- package/accordion-group/AccordionGroupAccordion.js +9 -21
- package/accordion-group/types.d.ts +6 -6
- package/alert/Alert.js +14 -46
- package/alert/Alert.test.js +28 -45
- package/alert/types.d.ts +5 -5
- package/badge/Badge.js +4 -17
- package/badge/types.d.ts +1 -1
- package/bleed/Bleed.js +13 -21
- package/bleed/types.d.ts +2 -2
- package/box/Box.js +10 -29
- package/box/Box.test.js +1 -6
- package/box/types.d.ts +3 -3
- package/bulleted-list/BulletedList.js +7 -33
- package/bulleted-list/BulletedList.stories.tsx +1 -91
- package/bulleted-list/types.d.ts +5 -5
- package/button/Button.js +23 -46
- package/button/Button.stories.tsx +5 -86
- package/button/Button.test.js +11 -21
- package/button/types.d.ts +4 -4
- package/card/Card.js +21 -44
- package/card/Card.test.js +10 -21
- package/card/types.d.ts +5 -5
- package/checkbox/Checkbox.js +81 -111
- package/checkbox/Checkbox.stories.tsx +16 -54
- package/checkbox/Checkbox.test.js +107 -63
- package/checkbox/types.d.ts +8 -4
- package/chip/Chip.js +12 -31
- package/chip/Chip.test.js +15 -28
- package/chip/types.d.ts +4 -4
- package/common/coreTokens.js +1 -2
- package/common/utils.js +2 -8
- package/common/variables.d.ts +15 -6
- package/common/variables.js +17 -15
- package/date-input/Calendar.js +13 -57
- package/date-input/DateInput.js +50 -96
- package/date-input/DateInput.stories.tsx +11 -30
- package/date-input/DateInput.test.js +674 -701
- package/date-input/DatePicker.js +11 -42
- package/date-input/Icons.d.ts +6 -6
- package/date-input/Icons.js +6 -23
- package/date-input/YearPicker.js +8 -34
- package/date-input/types.d.ts +27 -21
- package/dialog/Dialog.js +11 -35
- package/dialog/Dialog.test.js +125 -187
- package/dialog/types.d.ts +18 -13
- package/dropdown/Dropdown.js +39 -93
- package/dropdown/Dropdown.test.js +391 -378
- package/dropdown/DropdownMenu.js +8 -19
- package/dropdown/DropdownMenuItem.js +5 -17
- package/dropdown/types.d.ts +17 -19
- package/file-input/FileInput.js +131 -220
- package/file-input/FileInput.stories.tsx +1 -1
- package/file-input/FileInput.test.js +293 -342
- package/file-input/FileItem.js +12 -39
- package/file-input/types.d.ts +9 -9
- package/flex/Flex.js +25 -39
- package/flex/types.d.ts +6 -6
- package/footer/Footer.js +9 -39
- package/footer/Footer.test.js +18 -32
- package/footer/Icons.d.ts +2 -2
- package/footer/Icons.js +2 -7
- package/footer/types.d.ts +13 -13
- package/grid/Grid.js +1 -16
- package/grid/types.d.ts +10 -10
- package/header/Header.d.ts +1 -1
- package/header/Header.js +19 -64
- package/header/Header.test.js +12 -25
- package/header/Icons.d.ts +2 -2
- package/header/Icons.js +2 -7
- package/header/types.d.ts +5 -7
- package/heading/Heading.js +9 -31
- package/heading/Heading.test.js +70 -87
- package/heading/types.d.ts +7 -7
- package/image/Image.d.ts +2 -2
- package/image/Image.js +17 -32
- package/image/types.d.ts +2 -2
- package/inset/Inset.js +13 -21
- package/inset/types.d.ts +2 -2
- package/layout/ApplicationLayout.d.ts +1 -1
- package/layout/ApplicationLayout.js +14 -54
- package/layout/Icons.d.ts +5 -5
- package/layout/Icons.js +1 -5
- package/layout/SidenavContext.d.ts +1 -1
- package/layout/SidenavContext.js +3 -9
- package/layout/types.d.ts +3 -3
- package/link/Link.js +21 -42
- package/link/Link.test.js +23 -41
- package/link/types.d.ts +14 -14
- package/main.d.ts +1 -1
- package/main.js +3 -52
- package/nav-tabs/NavTabs.js +11 -43
- package/nav-tabs/NavTabs.stories.tsx +1 -1
- package/nav-tabs/NavTabs.test.js +36 -43
- package/nav-tabs/Tab.js +16 -45
- package/nav-tabs/types.d.ts +9 -9
- package/number-input/NumberInput.d.ts +1 -1
- package/number-input/NumberInput.js +24 -35
- package/number-input/NumberInput.stories.tsx +42 -26
- package/number-input/NumberInput.test.js +682 -577
- package/number-input/types.d.ts +11 -5
- package/package.json +27 -25
- package/paginator/Icons.d.ts +5 -5
- package/paginator/Icons.js +5 -19
- package/paginator/Paginator.js +14 -39
- package/paginator/Paginator.test.js +224 -207
- package/paginator/types.d.ts +3 -3
- package/paragraph/Paragraph.js +3 -14
- package/paragraph/Paragraph.stories.tsx +0 -17
- package/password-input/Icons.d.ts +3 -3
- package/password-input/Icons.js +1 -5
- package/password-input/PasswordInput.js +26 -48
- package/password-input/PasswordInput.stories.tsx +1 -33
- package/password-input/PasswordInput.test.js +153 -129
- package/password-input/types.d.ts +8 -7
- package/progress-bar/ProgressBar.js +16 -42
- package/progress-bar/{ProgressBar.stories.jsx → ProgressBar.stories.tsx} +1 -1
- package/progress-bar/ProgressBar.test.js +35 -52
- package/progress-bar/types.d.ts +3 -3
- package/quick-nav/QuickNav.js +4 -27
- package/quick-nav/QuickNav.stories.tsx +1 -1
- package/quick-nav/types.d.ts +10 -10
- package/radio-group/Radio.d.ts +1 -1
- package/radio-group/Radio.js +22 -54
- package/radio-group/RadioGroup.js +37 -83
- package/radio-group/RadioGroup.stories.tsx +10 -10
- package/radio-group/RadioGroup.test.js +504 -470
- package/radio-group/types.d.ts +8 -8
- package/resultset-table/Icons.d.ts +7 -0
- package/{resultsetTable → resultset-table}/Icons.js +1 -5
- package/{resultsetTable → resultset-table}/ResultsetTable.js +22 -58
- package/{resultsetTable → resultset-table}/ResultsetTable.test.js +72 -92
- package/{resultsetTable → resultset-table}/types.d.ts +7 -7
- package/select/Icons.d.ts +7 -7
- package/select/Icons.js +1 -5
- package/select/Listbox.js +13 -39
- package/select/Option.js +9 -26
- package/select/Select.js +54 -138
- package/select/Select.test.js +1902 -1796
- package/select/types.d.ts +14 -15
- package/sidenav/Icons.d.ts +4 -4
- package/sidenav/Icons.js +1 -5
- package/sidenav/Sidenav.js +24 -63
- package/sidenav/Sidenav.test.js +3 -10
- package/sidenav/types.d.ts +18 -18
- package/slider/Slider.js +38 -86
- package/slider/Slider.test.js +107 -103
- package/slider/types.d.ts +4 -4
- package/spinner/Spinner.js +10 -40
- package/spinner/Spinner.test.js +25 -34
- package/spinner/types.d.ts +3 -3
- package/switch/Switch.js +26 -69
- package/switch/Switch.stories.tsx +0 -34
- package/switch/Switch.test.js +51 -96
- package/switch/types.d.ts +4 -4
- package/table/Table.js +4 -23
- package/table/Table.test.js +1 -6
- package/table/types.d.ts +8 -8
- package/tabs/Tab.js +10 -29
- package/tabs/Tabs.js +48 -124
- package/tabs/Tabs.test.js +62 -118
- package/tabs/types.d.ts +19 -19
- package/tag/Tag.js +21 -51
- package/tag/Tag.test.js +19 -30
- package/tag/types.d.ts +7 -7
- package/text-input/Icons.d.ts +5 -5
- package/text-input/Icons.js +1 -5
- package/text-input/Suggestion.js +9 -26
- package/text-input/Suggestions.d.ts +1 -1
- package/text-input/Suggestions.js +12 -57
- package/text-input/TextInput.js +128 -193
- package/text-input/TextInput.stories.tsx +48 -152
- package/text-input/TextInput.test.js +1210 -1194
- package/text-input/types.d.ts +25 -17
- package/textarea/Textarea.js +60 -96
- package/textarea/{Textarea.stories.jsx → Textarea.stories.tsx} +58 -99
- package/textarea/Textarea.test.js +150 -179
- package/textarea/types.d.ts +9 -5
- package/toggle-group/ToggleGroup.js +20 -57
- package/toggle-group/ToggleGroup.stories.tsx +1 -1
- package/toggle-group/ToggleGroup.test.js +48 -81
- package/toggle-group/types.d.ts +10 -10
- package/typography/Typography.js +4 -13
- package/typography/types.d.ts +1 -1
- package/useTheme.d.ts +12 -3
- package/useTheme.js +1 -8
- package/useTranslatedLabels.js +1 -7
- package/utils/BaseTypography.d.ts +2 -2
- package/utils/BaseTypography.js +16 -30
- package/utils/FocusLock.js +12 -36
- package/wizard/Wizard.js +14 -49
- package/wizard/Wizard.test.js +53 -80
- package/wizard/types.d.ts +6 -6
- package/resultsetTable/Icons.d.ts +0 -7
- package/slider/Slider.stories.tsx +0 -240
- /package/{resultsetTable → resultset-table}/ResultsetTable.d.ts +0 -0
- /package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +0 -0
- /package/{resultsetTable → resultset-table}/types.js +0 -0
- /package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +0 -0
- /package/table/{Table.stories.jsx → Table.stories.tsx} +0 -0
package/utils/BaseTypography.js
CHANGED
|
@@ -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
|
|
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
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
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;
|
package/utils/FocusLock.js
CHANGED
|
@@ -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
|
|
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
31
|
var attempFocus = function attempFocus(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
|
-
|
|
66
|
-
|
|
67
|
-
|
|
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,22 @@ 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) for (var i = 0; i < focusableElements.length; i++) if (attempFocus(focusableElements[i])) return;
|
|
107
91
|
}, [focusableElements]);
|
|
108
|
-
|
|
109
92
|
var focusLast = function focusLast() {
|
|
110
|
-
for (var i = focusableElements.length - 1; i >= 0; i--)
|
|
111
|
-
if (attempFocus(focusableElements[i])) return;
|
|
112
|
-
}
|
|
93
|
+
for (var i = focusableElements.length - 1; i >= 0; i--) if (attempFocus(focusableElements[i])) return;
|
|
113
94
|
};
|
|
114
|
-
|
|
115
95
|
var focusLock = function focusLock(event) {
|
|
116
96
|
if (event.key === "Tab") focusableElements.length === 0 && event.preventDefault();else if (event.key === "Tab" && event.key === "Shift") focusableElements.length === 0 && event.preventDefault();
|
|
117
97
|
};
|
|
118
|
-
|
|
119
98
|
(0, _react.useEffect)(function () {
|
|
120
99
|
var _childrenContainerRef2;
|
|
121
|
-
|
|
122
100
|
if (!((_childrenContainerRef2 = childrenContainerRef.current) !== null && _childrenContainerRef2 !== void 0 && _childrenContainerRef2.contains(document.activeElement)) && !radixPortalContains(document.activeElement)) focusFirst();
|
|
123
101
|
}, [focusFirst]);
|
|
124
102
|
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
|
|
@@ -133,6 +111,4 @@ var FocusLock = function FocusLock(_ref) {
|
|
|
133
111
|
tabIndex: 0
|
|
134
112
|
}));
|
|
135
113
|
};
|
|
136
|
-
|
|
137
|
-
var _default = FocusLock;
|
|
138
|
-
exports["default"] = _default;
|
|
114
|
+
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
|
|
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
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
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
|
-
|
|
99
|
-
|
|
100
|
-
|
|
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;
|
package/wizard/Wizard.test.js
CHANGED
|
@@ -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
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
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
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
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
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
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
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
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
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
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
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
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
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
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
|
-
|
|
3
|
-
|
|
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
|
-
|
|
10
|
-
export
|
|
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
|
-
|
|
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?: (
|
|
49
|
+
onStepClick?: (currentStep: number) => void;
|
|
50
50
|
/**
|
|
51
51
|
* An array of objects representing the steps.
|
|
52
52
|
*/
|