@dxc-technology/halstack-react 0.0.0-9b45027 → 0.0.0-9bd9511
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 +1 -11
- package/HalstackContext.d.ts +13 -0
- package/HalstackContext.js +318 -0
- package/accordion/Accordion.d.ts +1 -1
- package/accordion/Accordion.js +124 -179
- package/accordion/Accordion.stories.tsx +115 -27
- package/accordion/Accordion.test.js +56 -0
- package/accordion/types.d.ts +12 -11
- package/accordion-group/AccordionGroup.d.ts +1 -1
- package/accordion-group/AccordionGroup.js +28 -77
- package/accordion-group/AccordionGroup.stories.tsx +28 -2
- package/accordion-group/AccordionGroup.test.js +108 -0
- package/accordion-group/types.d.ts +19 -12
- package/alert/Alert.js +18 -46
- package/alert/Alert.stories.tsx +28 -0
- package/alert/Alert.test.js +75 -0
- package/alert/types.d.ts +3 -3
- package/badge/Badge.d.ts +4 -0
- package/badge/Badge.js +6 -16
- package/badge/types.d.ts +5 -0
- package/bleed/Bleed.d.ts +2 -2
- package/bleed/Bleed.js +14 -55
- package/bleed/Bleed.stories.tsx +94 -95
- package/bleed/types.d.ts +26 -2
- package/box/Box.js +34 -63
- package/box/Box.stories.tsx +15 -0
- package/box/Box.test.js +13 -0
- package/box/types.d.ts +5 -4
- package/bulleted-list/BulletedList.d.ts +7 -0
- package/bulleted-list/BulletedList.js +98 -0
- package/bulleted-list/BulletedList.stories.tsx +200 -0
- package/bulleted-list/types.d.ts +11 -0
- package/bulleted-list/types.js +5 -0
- package/button/Button.js +61 -100
- package/button/Button.stories.tsx +159 -8
- package/button/Button.test.js +26 -0
- package/button/types.d.ts +8 -8
- package/card/Card.js +44 -70
- package/card/Card.test.js +39 -0
- package/card/types.d.ts +4 -3
- package/checkbox/Checkbox.d.ts +2 -2
- package/checkbox/Checkbox.js +115 -162
- package/checkbox/Checkbox.stories.tsx +198 -130
- package/checkbox/Checkbox.test.js +128 -0
- package/checkbox/types.d.ts +14 -6
- package/chip/Chip.d.ts +1 -1
- package/chip/Chip.js +29 -91
- package/chip/Chip.stories.tsx +98 -13
- package/chip/Chip.test.js +42 -0
- package/chip/types.d.ts +8 -16
- package/common/utils.js +1 -6
- package/common/variables.d.ts +1431 -0
- package/common/variables.js +480 -554
- package/date-input/Calendar.d.ts +4 -0
- package/date-input/Calendar.js +215 -0
- package/date-input/DateInput.js +164 -300
- package/date-input/DateInput.stories.tsx +199 -33
- package/date-input/DateInput.test.js +648 -0
- package/date-input/DatePicker.d.ts +4 -0
- package/date-input/DatePicker.js +116 -0
- package/date-input/Icons.d.ts +6 -0
- package/date-input/Icons.js +63 -0
- package/date-input/YearPicker.d.ts +4 -0
- package/date-input/YearPicker.js +101 -0
- package/date-input/types.d.ts +71 -13
- package/dialog/Dialog.js +52 -84
- package/dialog/Dialog.stories.tsx +99 -22
- package/dialog/Dialog.test.js +56 -0
- package/dialog/types.d.ts +4 -3
- package/dropdown/Dropdown.d.ts +1 -1
- package/dropdown/Dropdown.js +240 -323
- package/dropdown/Dropdown.stories.tsx +255 -64
- package/dropdown/Dropdown.test.js +479 -0
- package/dropdown/DropdownMenu.d.ts +4 -0
- package/dropdown/DropdownMenu.js +60 -0
- package/dropdown/DropdownMenuItem.d.ts +4 -0
- package/dropdown/DropdownMenuItem.js +70 -0
- package/dropdown/types.d.ts +30 -19
- package/file-input/FileInput.d.ts +2 -2
- package/file-input/FileInput.js +224 -351
- package/file-input/FileInput.stories.tsx +122 -11
- package/file-input/FileInput.test.js +445 -0
- package/file-input/FileItem.d.ts +4 -14
- package/file-input/FileItem.js +48 -97
- package/file-input/types.d.ts +24 -7
- package/flex/Flex.d.ts +4 -0
- package/flex/Flex.js +57 -0
- package/flex/Flex.stories.tsx +103 -0
- package/flex/types.d.ts +32 -0
- package/flex/types.js +5 -0
- package/footer/Footer.js +36 -143
- package/footer/Footer.stories.tsx +99 -1
- package/footer/Footer.test.js +92 -0
- package/footer/Icons.js +1 -5
- package/footer/types.d.ts +7 -6
- package/header/Header.js +112 -177
- package/header/Header.stories.tsx +189 -36
- package/header/Header.test.js +66 -0
- package/header/Icons.js +2 -6
- package/header/types.d.ts +4 -3
- package/heading/Heading.js +8 -29
- package/heading/Heading.test.js +169 -0
- package/heading/types.d.ts +3 -3
- package/inset/Inset.js +14 -55
- package/inset/Inset.stories.tsx +36 -36
- package/inset/types.d.ts +26 -2
- package/layout/ApplicationLayout.d.ts +16 -6
- package/layout/ApplicationLayout.js +71 -164
- package/layout/ApplicationLayout.stories.tsx +84 -93
- package/layout/Icons.d.ts +5 -0
- package/layout/Icons.js +11 -10
- package/layout/SidenavContext.d.ts +5 -0
- package/layout/SidenavContext.js +15 -0
- package/layout/types.d.ts +18 -33
- package/link/Link.d.ts +3 -2
- package/link/Link.js +61 -106
- package/link/Link.stories.tsx +159 -52
- package/link/Link.test.js +65 -0
- package/link/types.d.ts +9 -29
- package/main.d.ts +11 -15
- package/main.js +48 -121
- package/nav-tabs/NavTabs.d.ts +8 -0
- package/nav-tabs/NavTabs.js +95 -0
- package/nav-tabs/NavTabs.stories.tsx +260 -0
- package/nav-tabs/NavTabs.test.js +75 -0
- package/nav-tabs/Tab.d.ts +4 -0
- package/nav-tabs/Tab.js +120 -0
- package/nav-tabs/types.d.ts +53 -0
- package/nav-tabs/types.js +5 -0
- package/number-input/NumberInput.js +21 -38
- package/number-input/NumberInput.stories.tsx +5 -5
- package/number-input/NumberInput.test.js +406 -0
- package/number-input/NumberInputContext.js +0 -5
- package/number-input/numberInputContextTypes.d.ts +1 -1
- package/number-input/types.d.ts +21 -14
- package/package.json +22 -25
- package/paginator/Icons.d.ts +5 -0
- package/paginator/Icons.js +16 -38
- package/paginator/Paginator.js +31 -82
- package/paginator/Paginator.stories.tsx +24 -0
- package/paginator/Paginator.test.js +266 -0
- package/paginator/types.d.ts +1 -1
- package/paragraph/Paragraph.d.ts +6 -0
- package/paragraph/Paragraph.js +28 -0
- package/paragraph/Paragraph.stories.tsx +44 -0
- package/password-input/PasswordInput.js +28 -54
- package/password-input/PasswordInput.test.js +138 -0
- package/password-input/types.d.ts +18 -15
- package/progress-bar/ProgressBar.d.ts +2 -2
- package/progress-bar/ProgressBar.js +65 -84
- package/progress-bar/ProgressBar.stories.jsx +47 -12
- package/progress-bar/ProgressBar.test.js +93 -0
- package/progress-bar/types.d.ts +3 -4
- package/quick-nav/QuickNav.d.ts +4 -0
- package/quick-nav/QuickNav.js +95 -0
- package/quick-nav/QuickNav.stories.tsx +356 -0
- package/quick-nav/types.d.ts +21 -0
- package/quick-nav/types.js +5 -0
- package/radio-group/Radio.d.ts +1 -1
- package/radio-group/Radio.js +61 -66
- package/radio-group/RadioGroup.js +99 -129
- package/radio-group/RadioGroup.stories.tsx +171 -36
- package/radio-group/RadioGroup.test.js +620 -0
- package/radio-group/types.d.ts +85 -7
- package/resultsetTable/Icons.d.ts +7 -0
- package/resultsetTable/Icons.js +48 -0
- package/resultsetTable/ResultsetTable.js +66 -157
- package/resultsetTable/ResultsetTable.stories.tsx +50 -25
- package/resultsetTable/ResultsetTable.test.js +292 -0
- package/resultsetTable/types.d.ts +5 -5
- package/select/Icons.d.ts +10 -0
- package/select/Icons.js +90 -0
- package/select/Listbox.d.ts +4 -0
- package/select/Listbox.js +144 -0
- package/select/Option.d.ts +4 -0
- package/select/Option.js +81 -0
- package/select/Select.js +201 -485
- package/select/Select.stories.tsx +600 -201
- package/select/Select.test.js +1845 -0
- package/select/types.d.ts +62 -22
- package/sidenav/Sidenav.d.ts +6 -5
- package/sidenav/Sidenav.js +164 -74
- package/sidenav/Sidenav.stories.tsx +249 -149
- package/sidenav/Sidenav.test.js +37 -0
- package/sidenav/types.d.ts +50 -27
- package/slider/Slider.d.ts +2 -2
- package/slider/Slider.js +143 -164
- package/slider/Slider.stories.tsx +72 -9
- package/slider/Slider.test.js +222 -0
- package/slider/types.d.ts +11 -3
- package/spinner/Spinner.js +12 -41
- package/spinner/Spinner.stories.jsx +27 -1
- package/spinner/Spinner.test.js +55 -0
- package/spinner/types.d.ts +3 -3
- package/switch/Switch.d.ts +2 -2
- package/switch/Switch.js +148 -107
- package/switch/Switch.stories.tsx +53 -42
- package/switch/Switch.test.js +180 -0
- package/switch/types.d.ts +13 -5
- package/table/Table.js +5 -23
- package/table/Table.stories.jsx +80 -1
- package/table/Table.test.js +21 -0
- package/table/types.d.ts +3 -3
- package/tabs/Tab.d.ts +4 -0
- package/tabs/Tab.js +115 -0
- package/tabs/Tabs.d.ts +1 -1
- package/tabs/Tabs.js +318 -139
- package/tabs/Tabs.stories.tsx +119 -13
- package/tabs/Tabs.test.js +295 -0
- package/tabs/types.d.ts +21 -7
- package/tag/Tag.d.ts +1 -1
- package/tag/Tag.js +36 -75
- package/tag/Tag.stories.tsx +37 -27
- package/tag/Tag.test.js +49 -0
- package/tag/types.d.ts +25 -16
- package/text-input/Icons.d.ts +8 -0
- package/text-input/Icons.js +57 -0
- package/text-input/Suggestion.d.ts +4 -0
- package/text-input/Suggestion.js +68 -0
- package/text-input/Suggestions.d.ts +4 -0
- package/text-input/Suggestions.js +109 -0
- package/text-input/TextInput.js +232 -438
- package/text-input/TextInput.stories.tsx +310 -197
- package/text-input/TextInput.test.js +1404 -0
- package/text-input/types.d.ts +55 -17
- package/textarea/Textarea.js +53 -96
- package/textarea/Textarea.stories.jsx +93 -13
- package/textarea/Textarea.test.js +360 -0
- package/textarea/types.d.ts +22 -15
- package/toggle-group/ToggleGroup.d.ts +1 -1
- package/toggle-group/ToggleGroup.js +23 -57
- package/toggle-group/ToggleGroup.stories.tsx +46 -4
- package/toggle-group/ToggleGroup.test.js +124 -0
- package/toggle-group/types.d.ts +19 -11
- package/translatedLabelsType.d.ts +82 -0
- package/translatedLabelsType.js +5 -0
- package/typography/Typography.d.ts +4 -0
- package/typography/Typography.js +119 -0
- package/typography/Typography.stories.tsx +198 -0
- package/typography/types.d.ts +18 -0
- package/typography/types.js +5 -0
- package/useTheme.d.ts +1 -1
- package/useTheme.js +3 -9
- package/useTranslatedLabels.d.ts +3 -0
- package/useTranslatedLabels.js +15 -0
- package/wizard/Wizard.d.ts +1 -1
- package/wizard/Wizard.js +68 -98
- package/wizard/Wizard.stories.tsx +48 -19
- package/wizard/Wizard.test.js +114 -0
- package/wizard/types.d.ts +12 -7
- package/ThemeContext.d.ts +0 -15
- package/ThemeContext.js +0 -243
- package/V3Select/V3Select.js +0 -455
- package/V3Select/index.d.ts +0 -27
- package/V3Textarea/V3Textarea.js +0 -260
- package/V3Textarea/index.d.ts +0 -27
- package/common/RequiredComponent.js +0 -32
- package/date/Date.js +0 -373
- package/date/index.d.ts +0 -27
- package/input-text/Icons.js +0 -22
- package/input-text/InputText.js +0 -611
- package/input-text/index.d.ts +0 -36
- package/list/List.d.ts +0 -8
- package/list/List.js +0 -47
- package/list/List.stories.tsx +0 -95
- package/radio/Radio.d.ts +0 -4
- package/radio/Radio.js +0 -174
- package/radio/Radio.stories.tsx +0 -192
- package/radio/types.d.ts +0 -54
- package/row/Row.d.ts +0 -11
- package/row/Row.js +0 -127
- package/row/Row.stories.tsx +0 -239
- package/stack/Stack.d.ts +0 -10
- package/stack/Stack.js +0 -97
- package/stack/Stack.stories.tsx +0 -166
- package/text/Text.d.ts +0 -7
- package/text/Text.js +0 -30
- package/text/Text.stories.tsx +0 -19
- package/toggle/Toggle.js +0 -186
- package/toggle/index.d.ts +0 -21
- package/upload/Upload.js +0 -201
- package/upload/buttons-upload/ButtonsUpload.js +0 -111
- package/upload/buttons-upload/Icons.js +0 -40
- package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
- package/upload/dragAndDropArea/Icons.js +0 -39
- package/upload/file-upload/FileToUpload.js +0 -115
- package/upload/file-upload/Icons.js +0 -66
- package/upload/files-upload/FilesToUpload.js +0 -109
- package/upload/index.d.ts +0 -15
- package/upload/transaction/Icons.js +0 -160
- package/upload/transaction/Transaction.js +0 -104
- package/upload/transactions/Transactions.js +0 -94
- /package/{radio → badge}/types.js +0 -0
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _react = _interopRequireDefault(require("react"));
|
|
5
|
+
var _react2 = require("@testing-library/react");
|
|
6
|
+
var _Link = _interopRequireDefault(require("./Link"));
|
|
7
|
+
describe("Link component tests", function () {
|
|
8
|
+
test("Link renders with correct text", function () {
|
|
9
|
+
var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], null, "Link")),
|
|
10
|
+
getByText = _render.getByText;
|
|
11
|
+
expect(getByText("Link")).toBeTruthy();
|
|
12
|
+
});
|
|
13
|
+
test("Link renders with correct href", function () {
|
|
14
|
+
var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
|
|
15
|
+
href: "/testPage"
|
|
16
|
+
}, "Link")),
|
|
17
|
+
getByRole = _render2.getByRole;
|
|
18
|
+
expect(getByRole("link").getAttribute("href")).toEqual("/testPage");
|
|
19
|
+
});
|
|
20
|
+
test("Link renders with correct disabled state", function () {
|
|
21
|
+
var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
|
|
22
|
+
href: "/testPage",
|
|
23
|
+
disabled: true
|
|
24
|
+
}, "Link")),
|
|
25
|
+
getByText = _render3.getByText;
|
|
26
|
+
expect(getByText("Link").hasAttribute("href")).toBeFalsy();
|
|
27
|
+
var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
|
|
28
|
+
onClick: function onClick() {
|
|
29
|
+
return console.log("Andorra");
|
|
30
|
+
},
|
|
31
|
+
disabled: true
|
|
32
|
+
}, "LinkButton")),
|
|
33
|
+
getByTextLinkButton = _render4.getByText;
|
|
34
|
+
expect(getByTextLinkButton("LinkButton").hasAttribute("onclick")).toBeFalsy();
|
|
35
|
+
});
|
|
36
|
+
test("Link open new tab", function () {
|
|
37
|
+
var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
|
|
38
|
+
href: "/testPage",
|
|
39
|
+
newWindow: true
|
|
40
|
+
}, "Link")),
|
|
41
|
+
getByRole = _render5.getByRole;
|
|
42
|
+
expect(getByRole("link").getAttribute("target")).toEqual("_blank");
|
|
43
|
+
});
|
|
44
|
+
test("Link onClick called", function () {
|
|
45
|
+
var onClick = jest.fn();
|
|
46
|
+
var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
|
|
47
|
+
onClick: onClick
|
|
48
|
+
}, "Link")),
|
|
49
|
+
getByText = _render6.getByText;
|
|
50
|
+
var link = getByText("Link");
|
|
51
|
+
_react2.fireEvent.click(link);
|
|
52
|
+
expect(onClick).toHaveBeenCalled();
|
|
53
|
+
});
|
|
54
|
+
test("Disabled link onClick not called", function () {
|
|
55
|
+
var onClick = jest.fn();
|
|
56
|
+
var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Link["default"], {
|
|
57
|
+
onClick: onClick,
|
|
58
|
+
disabled: true
|
|
59
|
+
}, "Link")),
|
|
60
|
+
getByText = _render7.getByText;
|
|
61
|
+
var link = getByText("Link");
|
|
62
|
+
_react2.fireEvent.click(link);
|
|
63
|
+
expect(onClick).toHaveBeenCalledTimes(0);
|
|
64
|
+
});
|
|
65
|
+
});
|
package/link/types.d.ts
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
export type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
|
|
3
|
+
export type Margin = {
|
|
4
4
|
top?: Space;
|
|
5
5
|
bottom?: Space;
|
|
6
6
|
left?: Space;
|
|
7
7
|
right?: Space;
|
|
8
8
|
};
|
|
9
|
-
|
|
9
|
+
type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
|
|
10
|
+
export type LinkProps = {
|
|
10
11
|
/**
|
|
11
12
|
* If true, the color is inherited from parent.
|
|
12
13
|
*/
|
|
@@ -15,10 +16,6 @@ declare type LinkCommonProps = {
|
|
|
15
16
|
* If true, the link is disabled.
|
|
16
17
|
*/
|
|
17
18
|
disabled?: boolean;
|
|
18
|
-
/**
|
|
19
|
-
* @Deprecated Source of the icon.
|
|
20
|
-
*/
|
|
21
|
-
iconSrc?: string;
|
|
22
19
|
/**
|
|
23
20
|
* Indicates the position of the icon in the component.
|
|
24
21
|
*/
|
|
@@ -45,30 +42,13 @@ declare type LinkCommonProps = {
|
|
|
45
42
|
* Value of the tabindex.
|
|
46
43
|
*/
|
|
47
44
|
tabIndex?: number;
|
|
48
|
-
};
|
|
49
|
-
export declare type LinkTextProps = LinkCommonProps & {
|
|
50
45
|
/**
|
|
51
|
-
*
|
|
46
|
+
* Content of the link.
|
|
52
47
|
*/
|
|
53
|
-
|
|
48
|
+
children: string;
|
|
54
49
|
/**
|
|
55
|
-
* Element used as the icon that will be placed next to the link text.
|
|
50
|
+
* Element or path used as the icon that will be placed next to the link text.
|
|
56
51
|
*/
|
|
57
|
-
icon?: SVG;
|
|
58
|
-
};
|
|
59
|
-
export declare type LinkIconProps = LinkCommonProps & {
|
|
60
|
-
/**
|
|
61
|
-
* Link text.
|
|
62
|
-
*/
|
|
63
|
-
text?: string;
|
|
64
|
-
/**
|
|
65
|
-
* Element used as the icon that will be placed next to the link text.
|
|
66
|
-
*/
|
|
67
|
-
icon: SVG;
|
|
68
|
-
};
|
|
69
|
-
declare type Overload = {
|
|
70
|
-
(props: LinkTextProps): JSX.Element;
|
|
71
|
-
(props: LinkIconProps): JSX.Element;
|
|
52
|
+
icon?: string | SVG;
|
|
72
53
|
};
|
|
73
|
-
|
|
74
|
-
export default Overload;
|
|
54
|
+
export {};
|
package/main.d.ts
CHANGED
|
@@ -3,29 +3,20 @@ import DxcAccordion from "./accordion/Accordion";
|
|
|
3
3
|
import DxcButton from "./button/Button";
|
|
4
4
|
import DxcCard from "./card/Card";
|
|
5
5
|
import DxcCheckbox from "./checkbox/Checkbox";
|
|
6
|
-
import DxcDate from "./date/Date";
|
|
7
6
|
import DxcDialog from "./dialog/Dialog";
|
|
8
7
|
import DxcDropdown from "./dropdown/Dropdown";
|
|
9
|
-
import DxcFooter from "./footer/Footer";
|
|
10
|
-
import DxcHeader from "./header/Header";
|
|
11
|
-
import DxcInput from "./input-text/InputText";
|
|
12
|
-
import DxcRadio from "./radio/Radio";
|
|
13
|
-
import V3DxcSelect from "./V3Select/V3Select";
|
|
14
8
|
import DxcSlider from "./slider/Slider";
|
|
15
9
|
import DxcSwitch from "./switch/Switch";
|
|
16
10
|
import DxcTabs from "./tabs/Tabs";
|
|
17
11
|
import DxcProgressBar from "./progress-bar/ProgressBar";
|
|
18
12
|
import DxcSpinner from "./spinner/Spinner";
|
|
19
|
-
import DxcUpload from "./upload/Upload";
|
|
20
13
|
import DxcTable from "./table/Table";
|
|
21
14
|
import DxcBox from "./box/Box";
|
|
22
15
|
import DxcTag from "./tag/Tag";
|
|
23
16
|
import DxcPaginator from "./paginator/Paginator";
|
|
24
|
-
import DxcSidenav from "./sidenav/Sidenav";
|
|
25
17
|
import DxcWizard from "./wizard/Wizard";
|
|
26
18
|
import DxcLink from "./link/Link";
|
|
27
19
|
import DxcHeading from "./heading/Heading";
|
|
28
|
-
import V3DxcTextarea from "./V3Textarea/V3Textarea";
|
|
29
20
|
import DxcResultsetTable from "./resultsetTable/ResultsetTable";
|
|
30
21
|
import DxcChip from "./chip/Chip";
|
|
31
22
|
import DxcApplicationLayout from "./layout/ApplicationLayout";
|
|
@@ -39,10 +30,15 @@ import DxcNumberInput from "./number-input/NumberInput";
|
|
|
39
30
|
import DxcTextarea from "./textarea/Textarea";
|
|
40
31
|
import DxcSelect from "./select/Select";
|
|
41
32
|
import DxcFileInput from "./file-input/FileInput";
|
|
42
|
-
import
|
|
43
|
-
import
|
|
44
|
-
import
|
|
45
|
-
import
|
|
46
|
-
import
|
|
33
|
+
import DxcRadioGroup from "./radio-group/RadioGroup";
|
|
34
|
+
import DxcBleed from "./bleed/Bleed";
|
|
35
|
+
import DxcInset from "./inset/Inset";
|
|
36
|
+
import DxcQuickNav from "./quick-nav/QuickNav";
|
|
37
|
+
import DxcNavTabs from "./nav-tabs/NavTabs";
|
|
38
|
+
import DxcFlex from "./flex/Flex";
|
|
39
|
+
import DxcTypography from "./typography/Typography";
|
|
40
|
+
import DxcParagraph from "./paragraph/Paragraph";
|
|
41
|
+
import DxcBulletedList from "./bulleted-list/BulletedList";
|
|
42
|
+
import HalstackContext, { HalstackProvider, HalstackLanguageContext } from "./HalstackContext";
|
|
47
43
|
import { BackgroundColorProvider } from "./BackgroundColorContext";
|
|
48
|
-
export { DxcAlert, DxcButton,
|
|
44
|
+
export { DxcAlert, DxcButton, DxcCheckbox, DxcTextInput, DxcDropdown, DxcSwitch, DxcSlider, DxcTable, DxcTabs, DxcToggleGroup, DxcDialog, DxcCard, DxcProgressBar, DxcAccordion, DxcSpinner, DxcBox, DxcTag, DxcPaginator, DxcWizard, DxcLink, DxcHeading, DxcResultsetTable, DxcChip, DxcApplicationLayout, HalstackContext, HalstackLanguageContext, HalstackProvider, BackgroundColorProvider, DxcAccordionGroup, DxcBadge, DxcPasswordInput, DxcDateInput, DxcNumberInput, DxcTextarea, DxcSelect, DxcFileInput, DxcRadioGroup, DxcBleed, DxcInset, DxcQuickNav, DxcNavTabs, DxcFlex, DxcTypography, DxcParagraph, DxcBulletedList, };
|
package/main.js
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
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
|
});
|
|
@@ -43,12 +41,24 @@ Object.defineProperty(exports, "DxcBadge", {
|
|
|
43
41
|
return _Badge["default"];
|
|
44
42
|
}
|
|
45
43
|
});
|
|
44
|
+
Object.defineProperty(exports, "DxcBleed", {
|
|
45
|
+
enumerable: true,
|
|
46
|
+
get: function get() {
|
|
47
|
+
return _Bleed["default"];
|
|
48
|
+
}
|
|
49
|
+
});
|
|
46
50
|
Object.defineProperty(exports, "DxcBox", {
|
|
47
51
|
enumerable: true,
|
|
48
52
|
get: function get() {
|
|
49
53
|
return _Box["default"];
|
|
50
54
|
}
|
|
51
55
|
});
|
|
56
|
+
Object.defineProperty(exports, "DxcBulletedList", {
|
|
57
|
+
enumerable: true,
|
|
58
|
+
get: function get() {
|
|
59
|
+
return _BulletedList["default"];
|
|
60
|
+
}
|
|
61
|
+
});
|
|
52
62
|
Object.defineProperty(exports, "DxcButton", {
|
|
53
63
|
enumerable: true,
|
|
54
64
|
get: function get() {
|
|
@@ -73,12 +83,6 @@ Object.defineProperty(exports, "DxcChip", {
|
|
|
73
83
|
return _Chip["default"];
|
|
74
84
|
}
|
|
75
85
|
});
|
|
76
|
-
Object.defineProperty(exports, "DxcDate", {
|
|
77
|
-
enumerable: true,
|
|
78
|
-
get: function get() {
|
|
79
|
-
return _Date["default"];
|
|
80
|
-
}
|
|
81
|
-
});
|
|
82
86
|
Object.defineProperty(exports, "DxcDateInput", {
|
|
83
87
|
enumerable: true,
|
|
84
88
|
get: function get() {
|
|
@@ -103,16 +107,10 @@ Object.defineProperty(exports, "DxcFileInput", {
|
|
|
103
107
|
return _FileInput["default"];
|
|
104
108
|
}
|
|
105
109
|
});
|
|
106
|
-
Object.defineProperty(exports, "
|
|
107
|
-
enumerable: true,
|
|
108
|
-
get: function get() {
|
|
109
|
-
return _Footer["default"];
|
|
110
|
-
}
|
|
111
|
-
});
|
|
112
|
-
Object.defineProperty(exports, "DxcHeader", {
|
|
110
|
+
Object.defineProperty(exports, "DxcFlex", {
|
|
113
111
|
enumerable: true,
|
|
114
112
|
get: function get() {
|
|
115
|
-
return
|
|
113
|
+
return _Flex["default"];
|
|
116
114
|
}
|
|
117
115
|
});
|
|
118
116
|
Object.defineProperty(exports, "DxcHeading", {
|
|
@@ -121,10 +119,10 @@ Object.defineProperty(exports, "DxcHeading", {
|
|
|
121
119
|
return _Heading["default"];
|
|
122
120
|
}
|
|
123
121
|
});
|
|
124
|
-
Object.defineProperty(exports, "
|
|
122
|
+
Object.defineProperty(exports, "DxcInset", {
|
|
125
123
|
enumerable: true,
|
|
126
124
|
get: function get() {
|
|
127
|
-
return
|
|
125
|
+
return _Inset["default"];
|
|
128
126
|
}
|
|
129
127
|
});
|
|
130
128
|
Object.defineProperty(exports, "DxcLink", {
|
|
@@ -133,10 +131,10 @@ Object.defineProperty(exports, "DxcLink", {
|
|
|
133
131
|
return _Link["default"];
|
|
134
132
|
}
|
|
135
133
|
});
|
|
136
|
-
Object.defineProperty(exports, "
|
|
134
|
+
Object.defineProperty(exports, "DxcNavTabs", {
|
|
137
135
|
enumerable: true,
|
|
138
136
|
get: function get() {
|
|
139
|
-
return
|
|
137
|
+
return _NavTabs["default"];
|
|
140
138
|
}
|
|
141
139
|
});
|
|
142
140
|
Object.defineProperty(exports, "DxcNumberInput", {
|
|
@@ -151,6 +149,12 @@ Object.defineProperty(exports, "DxcPaginator", {
|
|
|
151
149
|
return _Paginator["default"];
|
|
152
150
|
}
|
|
153
151
|
});
|
|
152
|
+
Object.defineProperty(exports, "DxcParagraph", {
|
|
153
|
+
enumerable: true,
|
|
154
|
+
get: function get() {
|
|
155
|
+
return _Paragraph["default"];
|
|
156
|
+
}
|
|
157
|
+
});
|
|
154
158
|
Object.defineProperty(exports, "DxcPasswordInput", {
|
|
155
159
|
enumerable: true,
|
|
156
160
|
get: function get() {
|
|
@@ -163,22 +167,22 @@ Object.defineProperty(exports, "DxcProgressBar", {
|
|
|
163
167
|
return _ProgressBar["default"];
|
|
164
168
|
}
|
|
165
169
|
});
|
|
166
|
-
Object.defineProperty(exports, "
|
|
170
|
+
Object.defineProperty(exports, "DxcQuickNav", {
|
|
167
171
|
enumerable: true,
|
|
168
172
|
get: function get() {
|
|
169
|
-
return
|
|
173
|
+
return _QuickNav["default"];
|
|
170
174
|
}
|
|
171
175
|
});
|
|
172
|
-
Object.defineProperty(exports, "
|
|
176
|
+
Object.defineProperty(exports, "DxcRadioGroup", {
|
|
173
177
|
enumerable: true,
|
|
174
178
|
get: function get() {
|
|
175
|
-
return
|
|
179
|
+
return _RadioGroup["default"];
|
|
176
180
|
}
|
|
177
181
|
});
|
|
178
|
-
Object.defineProperty(exports, "
|
|
182
|
+
Object.defineProperty(exports, "DxcResultsetTable", {
|
|
179
183
|
enumerable: true,
|
|
180
184
|
get: function get() {
|
|
181
|
-
return
|
|
185
|
+
return _ResultsetTable["default"];
|
|
182
186
|
}
|
|
183
187
|
});
|
|
184
188
|
Object.defineProperty(exports, "DxcSelect", {
|
|
@@ -187,12 +191,6 @@ Object.defineProperty(exports, "DxcSelect", {
|
|
|
187
191
|
return _Select["default"];
|
|
188
192
|
}
|
|
189
193
|
});
|
|
190
|
-
Object.defineProperty(exports, "DxcSidenav", {
|
|
191
|
-
enumerable: true,
|
|
192
|
-
get: function get() {
|
|
193
|
-
return _Sidenav["default"];
|
|
194
|
-
}
|
|
195
|
-
});
|
|
196
194
|
Object.defineProperty(exports, "DxcSlider", {
|
|
197
195
|
enumerable: true,
|
|
198
196
|
get: function get() {
|
|
@@ -205,12 +203,6 @@ Object.defineProperty(exports, "DxcSpinner", {
|
|
|
205
203
|
return _Spinner["default"];
|
|
206
204
|
}
|
|
207
205
|
});
|
|
208
|
-
Object.defineProperty(exports, "DxcStack", {
|
|
209
|
-
enumerable: true,
|
|
210
|
-
get: function get() {
|
|
211
|
-
return _Stack["default"];
|
|
212
|
-
}
|
|
213
|
-
});
|
|
214
206
|
Object.defineProperty(exports, "DxcSwitch", {
|
|
215
207
|
enumerable: true,
|
|
216
208
|
get: function get() {
|
|
@@ -235,12 +227,6 @@ Object.defineProperty(exports, "DxcTag", {
|
|
|
235
227
|
return _Tag["default"];
|
|
236
228
|
}
|
|
237
229
|
});
|
|
238
|
-
Object.defineProperty(exports, "DxcText", {
|
|
239
|
-
enumerable: true,
|
|
240
|
-
get: function get() {
|
|
241
|
-
return _Text["default"];
|
|
242
|
-
}
|
|
243
|
-
});
|
|
244
230
|
Object.defineProperty(exports, "DxcTextInput", {
|
|
245
231
|
enumerable: true,
|
|
246
232
|
get: function get() {
|
|
@@ -259,10 +245,10 @@ Object.defineProperty(exports, "DxcToggleGroup", {
|
|
|
259
245
|
return _ToggleGroup["default"];
|
|
260
246
|
}
|
|
261
247
|
});
|
|
262
|
-
Object.defineProperty(exports, "
|
|
248
|
+
Object.defineProperty(exports, "DxcTypography", {
|
|
263
249
|
enumerable: true,
|
|
264
250
|
get: function get() {
|
|
265
|
-
return
|
|
251
|
+
return _Typography["default"];
|
|
266
252
|
}
|
|
267
253
|
});
|
|
268
254
|
Object.defineProperty(exports, "DxcWizard", {
|
|
@@ -271,125 +257,66 @@ Object.defineProperty(exports, "DxcWizard", {
|
|
|
271
257
|
return _Wizard["default"];
|
|
272
258
|
}
|
|
273
259
|
});
|
|
274
|
-
Object.defineProperty(exports, "
|
|
260
|
+
Object.defineProperty(exports, "HalstackContext", {
|
|
275
261
|
enumerable: true,
|
|
276
262
|
get: function get() {
|
|
277
|
-
return
|
|
263
|
+
return _HalstackContext["default"];
|
|
278
264
|
}
|
|
279
265
|
});
|
|
280
|
-
Object.defineProperty(exports, "
|
|
266
|
+
Object.defineProperty(exports, "HalstackLanguageContext", {
|
|
281
267
|
enumerable: true,
|
|
282
268
|
get: function get() {
|
|
283
|
-
return
|
|
269
|
+
return _HalstackContext.HalstackLanguageContext;
|
|
284
270
|
}
|
|
285
271
|
});
|
|
286
|
-
Object.defineProperty(exports, "
|
|
272
|
+
Object.defineProperty(exports, "HalstackProvider", {
|
|
287
273
|
enumerable: true,
|
|
288
274
|
get: function get() {
|
|
289
|
-
return
|
|
275
|
+
return _HalstackContext.HalstackProvider;
|
|
290
276
|
}
|
|
291
277
|
});
|
|
292
|
-
Object.defineProperty(exports, "V3DxcTextarea", {
|
|
293
|
-
enumerable: true,
|
|
294
|
-
get: function get() {
|
|
295
|
-
return _V3Textarea["default"];
|
|
296
|
-
}
|
|
297
|
-
});
|
|
298
|
-
|
|
299
278
|
var _Alert = _interopRequireDefault(require("./alert/Alert"));
|
|
300
|
-
|
|
301
279
|
var _Accordion = _interopRequireDefault(require("./accordion/Accordion"));
|
|
302
|
-
|
|
303
280
|
var _Button = _interopRequireDefault(require("./button/Button"));
|
|
304
|
-
|
|
305
281
|
var _Card = _interopRequireDefault(require("./card/Card"));
|
|
306
|
-
|
|
307
282
|
var _Checkbox = _interopRequireDefault(require("./checkbox/Checkbox"));
|
|
308
|
-
|
|
309
|
-
var _Date = _interopRequireDefault(require("./date/Date"));
|
|
310
|
-
|
|
311
283
|
var _Dialog = _interopRequireDefault(require("./dialog/Dialog"));
|
|
312
|
-
|
|
313
284
|
var _Dropdown = _interopRequireDefault(require("./dropdown/Dropdown"));
|
|
314
|
-
|
|
315
|
-
var _Footer = _interopRequireDefault(require("./footer/Footer"));
|
|
316
|
-
|
|
317
|
-
var _Header = _interopRequireDefault(require("./header/Header"));
|
|
318
|
-
|
|
319
|
-
var _InputText = _interopRequireDefault(require("./input-text/InputText"));
|
|
320
|
-
|
|
321
|
-
var _Radio = _interopRequireDefault(require("./radio/Radio"));
|
|
322
|
-
|
|
323
|
-
var _V3Select = _interopRequireDefault(require("./V3Select/V3Select"));
|
|
324
|
-
|
|
325
285
|
var _Slider = _interopRequireDefault(require("./slider/Slider"));
|
|
326
|
-
|
|
327
286
|
var _Switch = _interopRequireDefault(require("./switch/Switch"));
|
|
328
|
-
|
|
329
287
|
var _Tabs = _interopRequireDefault(require("./tabs/Tabs"));
|
|
330
|
-
|
|
331
288
|
var _ProgressBar = _interopRequireDefault(require("./progress-bar/ProgressBar"));
|
|
332
|
-
|
|
333
289
|
var _Spinner = _interopRequireDefault(require("./spinner/Spinner"));
|
|
334
|
-
|
|
335
|
-
var _Upload = _interopRequireDefault(require("./upload/Upload"));
|
|
336
|
-
|
|
337
290
|
var _Table = _interopRequireDefault(require("./table/Table"));
|
|
338
|
-
|
|
339
291
|
var _Box = _interopRequireDefault(require("./box/Box"));
|
|
340
|
-
|
|
341
292
|
var _Tag = _interopRequireDefault(require("./tag/Tag"));
|
|
342
|
-
|
|
343
293
|
var _Paginator = _interopRequireDefault(require("./paginator/Paginator"));
|
|
344
|
-
|
|
345
|
-
var _Sidenav = _interopRequireDefault(require("./sidenav/Sidenav"));
|
|
346
|
-
|
|
347
294
|
var _Wizard = _interopRequireDefault(require("./wizard/Wizard"));
|
|
348
|
-
|
|
349
295
|
var _Link = _interopRequireDefault(require("./link/Link"));
|
|
350
|
-
|
|
351
296
|
var _Heading = _interopRequireDefault(require("./heading/Heading"));
|
|
352
|
-
|
|
353
|
-
var _V3Textarea = _interopRequireDefault(require("./V3Textarea/V3Textarea"));
|
|
354
|
-
|
|
355
297
|
var _ResultsetTable = _interopRequireDefault(require("./resultsetTable/ResultsetTable"));
|
|
356
|
-
|
|
357
298
|
var _Chip = _interopRequireDefault(require("./chip/Chip"));
|
|
358
|
-
|
|
359
299
|
var _ApplicationLayout = _interopRequireDefault(require("./layout/ApplicationLayout"));
|
|
360
|
-
|
|
361
300
|
var _ToggleGroup = _interopRequireDefault(require("./toggle-group/ToggleGroup"));
|
|
362
|
-
|
|
363
301
|
var _AccordionGroup = _interopRequireDefault(require("./accordion-group/AccordionGroup"));
|
|
364
|
-
|
|
365
302
|
var _Badge = _interopRequireDefault(require("./badge/Badge"));
|
|
366
|
-
|
|
367
303
|
var _TextInput = _interopRequireDefault(require("./text-input/TextInput"));
|
|
368
|
-
|
|
369
304
|
var _PasswordInput = _interopRequireDefault(require("./password-input/PasswordInput"));
|
|
370
|
-
|
|
371
305
|
var _DateInput = _interopRequireDefault(require("./date-input/DateInput"));
|
|
372
|
-
|
|
373
306
|
var _NumberInput = _interopRequireDefault(require("./number-input/NumberInput"));
|
|
374
|
-
|
|
375
307
|
var _Textarea = _interopRequireDefault(require("./textarea/Textarea"));
|
|
376
|
-
|
|
377
308
|
var _Select = _interopRequireDefault(require("./select/Select"));
|
|
378
|
-
|
|
379
309
|
var _FileInput = _interopRequireDefault(require("./file-input/FileInput"));
|
|
380
|
-
|
|
381
|
-
var
|
|
382
|
-
|
|
383
|
-
var
|
|
384
|
-
|
|
385
|
-
var
|
|
386
|
-
|
|
387
|
-
var
|
|
388
|
-
|
|
389
|
-
var
|
|
390
|
-
|
|
310
|
+
var _RadioGroup = _interopRequireDefault(require("./radio-group/RadioGroup"));
|
|
311
|
+
var _Bleed = _interopRequireDefault(require("./bleed/Bleed"));
|
|
312
|
+
var _Inset = _interopRequireDefault(require("./inset/Inset"));
|
|
313
|
+
var _QuickNav = _interopRequireDefault(require("./quick-nav/QuickNav"));
|
|
314
|
+
var _NavTabs = _interopRequireDefault(require("./nav-tabs/NavTabs"));
|
|
315
|
+
var _Flex = _interopRequireDefault(require("./flex/Flex"));
|
|
316
|
+
var _Typography = _interopRequireDefault(require("./typography/Typography"));
|
|
317
|
+
var _Paragraph = _interopRequireDefault(require("./paragraph/Paragraph"));
|
|
318
|
+
var _BulletedList = _interopRequireDefault(require("./bulleted-list/BulletedList"));
|
|
319
|
+
var _HalstackContext = _interopRequireWildcard(require("./HalstackContext"));
|
|
391
320
|
var _BackgroundColorContext = require("./BackgroundColorContext");
|
|
392
|
-
|
|
393
321
|
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); }
|
|
394
|
-
|
|
395
322
|
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; }
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { NavTabsContextProps, NavTabsProps } from "./types";
|
|
3
|
+
export declare const NavTabsContext: React.Context<NavTabsContextProps>;
|
|
4
|
+
declare const DxcNavTabs: {
|
|
5
|
+
({ iconPosition, tabIndex, children }: NavTabsProps): JSX.Element;
|
|
6
|
+
Tab: React.ForwardRefExoticComponent<import("./types").TabProps & React.RefAttributes<HTMLAnchorElement>>;
|
|
7
|
+
};
|
|
8
|
+
export default DxcNavTabs;
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports["default"] = exports.NavTabsContext = void 0;
|
|
9
|
+
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
10
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
11
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
12
|
+
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
13
|
+
var _useTheme = _interopRequireDefault(require("../useTheme"));
|
|
14
|
+
var _Tab = _interopRequireDefault(require("./Tab"));
|
|
15
|
+
var _templateObject;
|
|
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
|
+
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; }
|
|
18
|
+
var NavTabsContext = /*#__PURE__*/(0, _react.createContext)(null);
|
|
19
|
+
exports.NavTabsContext = NavTabsContext;
|
|
20
|
+
var getPropInChild = function getPropInChild(child, propName) {
|
|
21
|
+
return child.props ? child.props[propName] ? child.props[propName] : child.props.children ? getPropInChild(child.props.children, propName) : undefined : undefined;
|
|
22
|
+
};
|
|
23
|
+
var getLabelFromTab = function getLabelFromTab(child) {
|
|
24
|
+
if (typeof child === "string") {
|
|
25
|
+
return child.toString();
|
|
26
|
+
} else if (child.props.children) {
|
|
27
|
+
return Array.isArray(child.props.children) ? getLabelFromTab(child.props.children[0]) : getLabelFromTab(child.props.children);
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
var getPreviousTabIndex = function getPreviousTabIndex(array, initialIndex) {
|
|
31
|
+
var index = initialIndex === 0 ? array.length - 1 : initialIndex - 1;
|
|
32
|
+
while (getPropInChild(array[index], "disabled")) {
|
|
33
|
+
index = index === 0 ? array.length - 1 : index - 1;
|
|
34
|
+
}
|
|
35
|
+
return index;
|
|
36
|
+
};
|
|
37
|
+
var getNextTabIndex = function getNextTabIndex(array, initialIndex) {
|
|
38
|
+
var index = initialIndex === array.length - 1 ? 0 : initialIndex + 1;
|
|
39
|
+
while (getPropInChild(array[index], "disabled")) {
|
|
40
|
+
index = index === array.length - 1 ? 0 : index + 1;
|
|
41
|
+
}
|
|
42
|
+
return index;
|
|
43
|
+
};
|
|
44
|
+
var DxcNavTabs = function DxcNavTabs(_ref) {
|
|
45
|
+
var _ref$iconPosition = _ref.iconPosition,
|
|
46
|
+
iconPosition = _ref$iconPosition === void 0 ? "top" : _ref$iconPosition,
|
|
47
|
+
_ref$tabIndex = _ref.tabIndex,
|
|
48
|
+
tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
|
|
49
|
+
children = _ref.children;
|
|
50
|
+
var colorsTheme = (0, _useTheme["default"])();
|
|
51
|
+
var _useState = (0, _react.useState)(null),
|
|
52
|
+
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
53
|
+
innerFocus = _useState2[0],
|
|
54
|
+
setInnerFocus = _useState2[1];
|
|
55
|
+
var contextValue = (0, _react.useMemo)(function () {
|
|
56
|
+
return {
|
|
57
|
+
iconPosition: iconPosition,
|
|
58
|
+
tabIndex: tabIndex,
|
|
59
|
+
hasIcons: _react["default"].Children.toArray(children).some(function (child) {
|
|
60
|
+
return getPropInChild(child, "icon");
|
|
61
|
+
}),
|
|
62
|
+
focusedLabel: innerFocus === null ? undefined : getLabelFromTab(children[innerFocus])
|
|
63
|
+
};
|
|
64
|
+
}, [iconPosition, tabIndex, innerFocus]);
|
|
65
|
+
var handleOnKeyDown = function handleOnKeyDown(event) {
|
|
66
|
+
var activeTab = _react["default"].Children.toArray(children).findIndex(function (child) {
|
|
67
|
+
return getPropInChild(child, "active");
|
|
68
|
+
});
|
|
69
|
+
switch (event.key) {
|
|
70
|
+
case "Left":
|
|
71
|
+
case "ArrowLeft":
|
|
72
|
+
event.preventDefault();
|
|
73
|
+
setInnerFocus(getPreviousTabIndex(children, innerFocus === null ? activeTab : innerFocus));
|
|
74
|
+
break;
|
|
75
|
+
case "Right":
|
|
76
|
+
case "ArrowRight":
|
|
77
|
+
event.preventDefault();
|
|
78
|
+
setInnerFocus(getNextTabIndex(children, innerFocus === null ? activeTab : innerFocus));
|
|
79
|
+
break;
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
83
|
+
theme: colorsTheme["navTabs"]
|
|
84
|
+
}, /*#__PURE__*/_react["default"].createElement(NavTabsContainer, {
|
|
85
|
+
onKeyDown: handleOnKeyDown,
|
|
86
|
+
role: "tablist",
|
|
87
|
+
"aria-label": "Navigation tabs"
|
|
88
|
+
}, /*#__PURE__*/_react["default"].createElement(NavTabsContext.Provider, {
|
|
89
|
+
value: contextValue
|
|
90
|
+
}, children)));
|
|
91
|
+
};
|
|
92
|
+
DxcNavTabs.Tab = _Tab["default"];
|
|
93
|
+
var NavTabsContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n"])));
|
|
94
|
+
var _default = DxcNavTabs;
|
|
95
|
+
exports["default"] = _default;
|