@dxc-technology/halstack-react 0.0.0-b50ba80 → 0.0.0-b5ec444

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