@dxc-technology/halstack-react 0.0.0-4bc8a44 → 0.0.0-4c0fd86

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 (460) hide show
  1. package/BackgroundColorContext.d.ts +1 -10
  2. package/BackgroundColorContext.js +4 -21
  3. package/HalstackContext.d.ts +77 -144
  4. package/HalstackContext.js +41 -56
  5. package/README.md +47 -0
  6. package/accordion/Accordion.accessibility.test.d.ts +1 -0
  7. package/accordion/Accordion.accessibility.test.js +71 -0
  8. package/accordion/Accordion.d.ts +1 -1
  9. package/accordion/Accordion.js +35 -101
  10. package/accordion/Accordion.stories.tsx +8 -162
  11. package/accordion/Accordion.test.d.ts +1 -0
  12. package/accordion/Accordion.test.js +19 -34
  13. package/accordion/types.d.ts +6 -18
  14. package/accordion-group/AccordionGroup.accessibility.test.d.ts +1 -0
  15. package/accordion-group/AccordionGroup.accessibility.test.js +82 -0
  16. package/accordion-group/AccordionGroup.d.ts +2 -2
  17. package/accordion-group/AccordionGroup.js +27 -75
  18. package/accordion-group/AccordionGroup.stories.tsx +78 -77
  19. package/accordion-group/AccordionGroup.test.d.ts +1 -0
  20. package/accordion-group/AccordionGroup.test.js +42 -74
  21. package/accordion-group/AccordionGroupAccordion.d.ts +4 -0
  22. package/accordion-group/AccordionGroupAccordion.js +31 -0
  23. package/accordion-group/AccordionGroupContext.d.ts +3 -0
  24. package/accordion-group/AccordionGroupContext.js +8 -0
  25. package/accordion-group/types.d.ts +7 -19
  26. package/action-icon/ActionIcon.accessibility.test.d.ts +1 -0
  27. package/action-icon/ActionIcon.accessibility.test.js +63 -0
  28. package/action-icon/ActionIcon.d.ts +4 -0
  29. package/action-icon/ActionIcon.js +48 -0
  30. package/action-icon/ActionIcon.stories.tsx +41 -0
  31. package/action-icon/ActionIcon.test.d.ts +1 -0
  32. package/action-icon/ActionIcon.test.js +64 -0
  33. package/action-icon/types.d.ts +26 -0
  34. package/alert/Alert.accessibility.test.d.ts +1 -0
  35. package/alert/Alert.accessibility.test.js +95 -0
  36. package/alert/Alert.js +34 -120
  37. package/alert/Alert.test.d.ts +1 -0
  38. package/alert/Alert.test.js +29 -46
  39. package/alert/types.d.ts +5 -5
  40. package/badge/Badge.accessibility.test.d.ts +1 -0
  41. package/badge/Badge.accessibility.test.js +129 -0
  42. package/badge/Badge.d.ts +1 -1
  43. package/badge/Badge.js +142 -42
  44. package/badge/Badge.stories.tsx +210 -0
  45. package/badge/Badge.test.d.ts +1 -0
  46. package/badge/Badge.test.js +30 -0
  47. package/badge/types.d.ts +52 -3
  48. package/bleed/Bleed.js +13 -21
  49. package/bleed/types.d.ts +2 -2
  50. package/box/Box.accessibility.test.d.ts +1 -0
  51. package/box/Box.accessibility.test.js +33 -0
  52. package/box/Box.d.ts +1 -1
  53. package/box/Box.js +16 -55
  54. package/box/Box.stories.tsx +25 -53
  55. package/box/Box.test.d.ts +1 -0
  56. package/box/Box.test.js +2 -7
  57. package/box/types.d.ts +3 -15
  58. package/breadcrumbs/Breadcrumbs.accessibility.test.d.ts +1 -0
  59. package/breadcrumbs/Breadcrumbs.accessibility.test.js +96 -0
  60. package/breadcrumbs/Breadcrumbs.d.ts +4 -0
  61. package/breadcrumbs/Breadcrumbs.js +79 -0
  62. package/breadcrumbs/Breadcrumbs.stories.tsx +194 -0
  63. package/breadcrumbs/Breadcrumbs.test.d.ts +1 -0
  64. package/breadcrumbs/Breadcrumbs.test.js +168 -0
  65. package/breadcrumbs/Item.d.ts +4 -0
  66. package/breadcrumbs/Item.js +52 -0
  67. package/breadcrumbs/dropdownTheme.d.ts +53 -0
  68. package/breadcrumbs/dropdownTheme.js +62 -0
  69. package/breadcrumbs/types.d.ts +40 -0
  70. package/bulleted-list/BulletedList.accessibility.test.d.ts +1 -0
  71. package/bulleted-list/BulletedList.accessibility.test.js +119 -0
  72. package/bulleted-list/BulletedList.js +22 -55
  73. package/bulleted-list/BulletedList.stories.tsx +2 -93
  74. package/bulleted-list/types.d.ts +5 -5
  75. package/button/Button.accessibility.test.d.ts +1 -0
  76. package/button/Button.accessibility.test.js +127 -0
  77. package/button/Button.d.ts +1 -1
  78. package/button/Button.js +68 -100
  79. package/button/Button.stories.tsx +35 -135
  80. package/button/Button.test.d.ts +1 -0
  81. package/button/Button.test.js +20 -17
  82. package/button/types.d.ts +9 -5
  83. package/card/Card.accessibility.test.d.ts +1 -0
  84. package/card/Card.accessibility.test.js +36 -0
  85. package/card/Card.d.ts +1 -1
  86. package/card/Card.js +40 -79
  87. package/card/Card.stories.tsx +1 -30
  88. package/card/Card.test.d.ts +1 -0
  89. package/card/Card.test.js +11 -22
  90. package/card/types.d.ts +6 -12
  91. package/checkbox/Checkbox.accessibility.test.d.ts +1 -0
  92. package/checkbox/Checkbox.accessibility.test.js +87 -0
  93. package/checkbox/Checkbox.js +88 -126
  94. package/checkbox/Checkbox.stories.tsx +16 -54
  95. package/checkbox/Checkbox.test.d.ts +1 -0
  96. package/checkbox/Checkbox.test.js +108 -64
  97. package/checkbox/types.d.ts +8 -4
  98. package/chip/Chip.accessibility.test.d.ts +1 -0
  99. package/chip/Chip.accessibility.test.js +67 -0
  100. package/chip/Chip.js +22 -36
  101. package/chip/Chip.stories.tsx +6 -25
  102. package/chip/Chip.test.d.ts +1 -0
  103. package/chip/Chip.test.js +18 -31
  104. package/chip/types.d.ts +4 -4
  105. package/common/coreTokens.d.ts +105 -15
  106. package/common/coreTokens.js +41 -25
  107. package/common/utils.js +2 -8
  108. package/common/variables.d.ts +83 -144
  109. package/common/variables.js +153 -227
  110. package/container/Container.d.ts +4 -0
  111. package/container/Container.js +194 -0
  112. package/container/Container.stories.tsx +214 -0
  113. package/container/types.d.ts +176 -0
  114. package/container/types.js +5 -0
  115. package/contextual-menu/ContextualMenu.accessibility.test.d.ts +1 -0
  116. package/contextual-menu/ContextualMenu.accessibility.test.js +98 -0
  117. package/contextual-menu/ContextualMenu.d.ts +5 -0
  118. package/contextual-menu/ContextualMenu.js +136 -0
  119. package/contextual-menu/ContextualMenu.stories.tsx +231 -0
  120. package/contextual-menu/ContextualMenu.test.d.ts +1 -0
  121. package/contextual-menu/ContextualMenu.test.js +247 -0
  122. package/contextual-menu/GroupItem.d.ts +4 -0
  123. package/contextual-menu/GroupItem.js +67 -0
  124. package/contextual-menu/ItemAction.d.ts +4 -0
  125. package/contextual-menu/ItemAction.js +88 -0
  126. package/contextual-menu/MenuItem.d.ts +4 -0
  127. package/contextual-menu/MenuItem.js +29 -0
  128. package/contextual-menu/SingleItem.d.ts +4 -0
  129. package/contextual-menu/SingleItem.js +38 -0
  130. package/contextual-menu/types.d.ts +65 -0
  131. package/contextual-menu/types.js +5 -0
  132. package/date-input/Calendar.js +59 -87
  133. package/date-input/DateInput.accessibility.test.d.ts +1 -0
  134. package/date-input/DateInput.accessibility.test.js +229 -0
  135. package/date-input/DateInput.js +70 -111
  136. package/date-input/DateInput.stories.tsx +22 -35
  137. package/date-input/DateInput.test.d.ts +1 -0
  138. package/date-input/DateInput.test.js +675 -702
  139. package/date-input/DatePicker.js +23 -48
  140. package/date-input/YearPicker.js +17 -38
  141. package/date-input/types.d.ts +28 -22
  142. package/dialog/Dialog.accessibility.test.d.ts +1 -0
  143. package/dialog/Dialog.accessibility.test.js +69 -0
  144. package/dialog/Dialog.d.ts +1 -1
  145. package/dialog/Dialog.js +23 -79
  146. package/dialog/Dialog.stories.tsx +219 -169
  147. package/dialog/Dialog.test.d.ts +1 -0
  148. package/dialog/Dialog.test.js +216 -215
  149. package/dialog/types.d.ts +18 -26
  150. package/divider/Divider.accessibility.test.d.ts +1 -0
  151. package/divider/Divider.accessibility.test.js +33 -0
  152. package/divider/Divider.d.ts +4 -0
  153. package/divider/Divider.js +36 -0
  154. package/divider/Divider.stories.tsx +224 -0
  155. package/divider/Divider.test.d.ts +1 -0
  156. package/divider/Divider.test.js +38 -0
  157. package/divider/types.d.ts +21 -0
  158. package/divider/types.js +5 -0
  159. package/dropdown/Dropdown.accessibility.test.d.ts +1 -0
  160. package/dropdown/Dropdown.accessibility.test.js +183 -0
  161. package/dropdown/Dropdown.js +67 -135
  162. package/dropdown/Dropdown.stories.tsx +16 -27
  163. package/dropdown/Dropdown.test.d.ts +1 -0
  164. package/dropdown/Dropdown.test.js +434 -392
  165. package/dropdown/DropdownMenu.js +12 -23
  166. package/dropdown/DropdownMenuItem.js +13 -21
  167. package/dropdown/types.d.ts +20 -24
  168. package/file-input/FileInput.accessibility.test.d.ts +1 -0
  169. package/file-input/FileInput.accessibility.test.js +167 -0
  170. package/file-input/FileInput.js +177 -286
  171. package/file-input/FileInput.stories.tsx +1 -1
  172. package/file-input/FileInput.test.d.ts +1 -0
  173. package/file-input/FileInput.test.js +303 -356
  174. package/file-input/FileItem.js +30 -67
  175. package/file-input/types.d.ts +9 -13
  176. package/flex/Flex.js +25 -39
  177. package/flex/types.d.ts +6 -6
  178. package/footer/Footer.accessibility.test.d.ts +1 -0
  179. package/footer/Footer.accessibility.test.js +125 -0
  180. package/footer/Footer.d.ts +1 -1
  181. package/footer/Footer.js +72 -115
  182. package/footer/Footer.stories.tsx +77 -97
  183. package/footer/Footer.test.d.ts +1 -0
  184. package/footer/Footer.test.js +22 -34
  185. package/footer/Icons.d.ts +3 -2
  186. package/footer/Icons.js +53 -22
  187. package/footer/types.d.ts +26 -28
  188. package/grid/Grid.d.ts +1 -1
  189. package/grid/Grid.js +2 -17
  190. package/grid/Grid.stories.tsx +41 -39
  191. package/grid/types.d.ts +10 -10
  192. package/header/Header.accessibility.test.d.ts +1 -0
  193. package/header/Header.accessibility.test.js +94 -0
  194. package/header/Header.d.ts +2 -2
  195. package/header/Header.js +41 -134
  196. package/header/Header.stories.tsx +24 -72
  197. package/header/Header.test.d.ts +1 -0
  198. package/header/Header.test.js +13 -26
  199. package/header/Icons.d.ts +2 -2
  200. package/header/Icons.js +3 -13
  201. package/header/types.d.ts +7 -22
  202. package/heading/Heading.accessibility.test.d.ts +1 -0
  203. package/heading/Heading.accessibility.test.js +33 -0
  204. package/heading/Heading.js +9 -31
  205. package/heading/Heading.test.d.ts +1 -0
  206. package/heading/Heading.test.js +65 -95
  207. package/heading/types.d.ts +7 -7
  208. package/icon/Icon.accessibility.test.d.ts +1 -0
  209. package/icon/Icon.accessibility.test.js +30 -0
  210. package/icon/Icon.d.ts +4 -0
  211. package/icon/Icon.js +33 -0
  212. package/icon/Icon.stories.tsx +28 -0
  213. package/icon/types.d.ts +4 -0
  214. package/icon/types.js +5 -0
  215. package/image/Image.accessibility.test.d.ts +1 -0
  216. package/image/Image.accessibility.test.js +56 -0
  217. package/image/Image.d.ts +4 -0
  218. package/image/Image.js +70 -0
  219. package/image/Image.stories.tsx +129 -0
  220. package/image/types.d.ts +72 -0
  221. package/image/types.js +5 -0
  222. package/inset/Inset.js +13 -21
  223. package/inset/types.d.ts +2 -2
  224. package/layout/ApplicationLayout.d.ts +3 -3
  225. package/layout/ApplicationLayout.js +35 -69
  226. package/layout/ApplicationLayout.stories.tsx +1 -1
  227. package/layout/Icons.d.ts +7 -5
  228. package/layout/Icons.js +41 -59
  229. package/layout/types.d.ts +3 -3
  230. package/link/Link.accessibility.test.d.ts +1 -0
  231. package/link/Link.accessibility.test.js +108 -0
  232. package/link/Link.js +28 -47
  233. package/link/Link.stories.tsx +4 -4
  234. package/link/Link.test.d.ts +1 -0
  235. package/link/Link.test.js +24 -42
  236. package/link/types.d.ts +14 -14
  237. package/main.d.ts +9 -4
  238. package/main.js +46 -59
  239. package/nav-tabs/NavTabs.accessibility.test.d.ts +1 -0
  240. package/nav-tabs/NavTabs.accessibility.test.js +44 -0
  241. package/nav-tabs/NavTabs.d.ts +2 -3
  242. package/nav-tabs/NavTabs.js +39 -56
  243. package/nav-tabs/NavTabs.stories.tsx +57 -23
  244. package/nav-tabs/NavTabs.test.d.ts +1 -0
  245. package/nav-tabs/NavTabs.test.js +46 -51
  246. package/nav-tabs/NavTabsContext.d.ts +3 -0
  247. package/nav-tabs/NavTabsContext.js +8 -0
  248. package/nav-tabs/Tab.js +53 -86
  249. package/nav-tabs/types.d.ts +15 -16
  250. package/number-input/NumberInput.accessibility.test.d.ts +1 -0
  251. package/number-input/NumberInput.accessibility.test.js +227 -0
  252. package/number-input/NumberInput.js +50 -37
  253. package/number-input/NumberInput.stories.tsx +37 -26
  254. package/number-input/NumberInput.test.d.ts +1 -0
  255. package/number-input/NumberInput.test.js +859 -413
  256. package/number-input/NumberInputContext.d.ts +3 -4
  257. package/number-input/NumberInputContext.js +3 -14
  258. package/number-input/types.d.ts +17 -5
  259. package/package.json +48 -41
  260. package/paginator/Paginator.accessibility.test.d.ts +1 -0
  261. package/paginator/Paginator.accessibility.test.js +78 -0
  262. package/paginator/Paginator.js +28 -53
  263. package/paginator/Paginator.test.d.ts +1 -0
  264. package/paginator/Paginator.test.js +231 -202
  265. package/paginator/types.d.ts +3 -3
  266. package/paragraph/Paragraph.accessibility.test.d.ts +1 -0
  267. package/paragraph/Paragraph.accessibility.test.js +28 -0
  268. package/paragraph/Paragraph.js +3 -19
  269. package/paragraph/Paragraph.stories.tsx +0 -17
  270. package/password-input/PasswordInput.accessibility.test.d.ts +1 -0
  271. package/password-input/PasswordInput.accessibility.test.js +152 -0
  272. package/password-input/PasswordInput.js +62 -128
  273. package/password-input/PasswordInput.stories.tsx +11 -34
  274. package/password-input/PasswordInput.test.d.ts +1 -0
  275. package/password-input/PasswordInput.test.js +157 -141
  276. package/password-input/types.d.ts +8 -7
  277. package/progress-bar/ProgressBar.accessibility.test.d.ts +1 -0
  278. package/progress-bar/ProgressBar.accessibility.test.js +35 -0
  279. package/progress-bar/ProgressBar.js +26 -56
  280. package/progress-bar/{ProgressBar.stories.jsx → ProgressBar.stories.tsx} +1 -1
  281. package/progress-bar/ProgressBar.test.d.ts +1 -0
  282. package/progress-bar/ProgressBar.test.js +36 -53
  283. package/progress-bar/types.d.ts +3 -3
  284. package/quick-nav/QuickNav.accessibility.test.d.ts +1 -0
  285. package/quick-nav/QuickNav.accessibility.test.js +57 -0
  286. package/quick-nav/QuickNav.js +4 -27
  287. package/quick-nav/QuickNav.stories.tsx +1 -1
  288. package/quick-nav/types.d.ts +10 -10
  289. package/radio-group/Radio.d.ts +1 -1
  290. package/radio-group/Radio.js +31 -66
  291. package/radio-group/RadioGroup.accessibility.test.d.ts +1 -0
  292. package/radio-group/RadioGroup.accessibility.test.js +97 -0
  293. package/radio-group/RadioGroup.js +48 -98
  294. package/radio-group/RadioGroup.stories.tsx +10 -10
  295. package/radio-group/RadioGroup.test.d.ts +1 -0
  296. package/radio-group/RadioGroup.test.js +505 -473
  297. package/radio-group/types.d.ts +8 -8
  298. package/resultset-table/Icons.d.ts +7 -0
  299. package/{resultsetTable → resultset-table}/Icons.js +1 -5
  300. package/resultset-table/ResultsetTable.accessibility.test.d.ts +1 -0
  301. package/resultset-table/ResultsetTable.accessibility.test.js +284 -0
  302. package/resultset-table/ResultsetTable.d.ts +7 -0
  303. package/{resultsetTable → resultset-table}/ResultsetTable.js +74 -74
  304. package/{resultsetTable → resultset-table}/ResultsetTable.stories.tsx +119 -6
  305. package/resultset-table/ResultsetTable.test.d.ts +1 -0
  306. package/resultset-table/ResultsetTable.test.js +450 -0
  307. package/{resultsetTable → resultset-table}/types.d.ts +44 -11
  308. package/resultset-table/types.js +5 -0
  309. package/select/Listbox.js +36 -54
  310. package/select/Option.js +28 -36
  311. package/select/Select.accessibility.test.d.ts +1 -0
  312. package/select/Select.accessibility.test.js +227 -0
  313. package/select/Select.js +114 -178
  314. package/select/Select.stories.tsx +70 -113
  315. package/select/Select.test.d.ts +1 -0
  316. package/select/Select.test.js +1900 -1861
  317. package/select/types.d.ts +15 -16
  318. package/sidenav/Sidenav.accessibility.test.d.ts +1 -0
  319. package/sidenav/Sidenav.accessibility.test.js +59 -0
  320. package/sidenav/Sidenav.js +44 -81
  321. package/sidenav/Sidenav.stories.tsx +5 -10
  322. package/sidenav/Sidenav.test.d.ts +1 -0
  323. package/sidenav/Sidenav.test.js +4 -11
  324. package/{layout → sidenav}/SidenavContext.d.ts +1 -1
  325. package/{layout → sidenav}/SidenavContext.js +3 -9
  326. package/sidenav/types.d.ts +20 -20
  327. package/slider/Slider.accessibility.test.d.ts +1 -0
  328. package/slider/Slider.accessibility.test.js +103 -0
  329. package/slider/Slider.js +66 -125
  330. package/slider/Slider.stories.tsx +0 -60
  331. package/slider/Slider.test.d.ts +1 -0
  332. package/slider/Slider.test.js +118 -112
  333. package/slider/types.d.ts +4 -4
  334. package/spinner/Spinner.accessibility.test.d.ts +1 -0
  335. package/spinner/Spinner.accessibility.test.js +96 -0
  336. package/spinner/Spinner.js +21 -55
  337. package/spinner/Spinner.test.d.ts +1 -0
  338. package/spinner/Spinner.test.js +26 -35
  339. package/spinner/types.d.ts +3 -3
  340. package/status-light/StatusLight.accessibility.test.d.ts +1 -0
  341. package/status-light/StatusLight.accessibility.test.js +157 -0
  342. package/status-light/StatusLight.d.ts +4 -0
  343. package/status-light/StatusLight.js +51 -0
  344. package/status-light/StatusLight.stories.tsx +74 -0
  345. package/status-light/StatusLight.test.d.ts +1 -0
  346. package/status-light/StatusLight.test.js +25 -0
  347. package/status-light/types.d.ts +17 -0
  348. package/status-light/types.js +5 -0
  349. package/switch/Switch.accessibility.test.d.ts +1 -0
  350. package/switch/Switch.accessibility.test.js +98 -0
  351. package/switch/Switch.js +49 -100
  352. package/switch/Switch.stories.tsx +12 -34
  353. package/switch/Switch.test.d.ts +1 -0
  354. package/switch/Switch.test.js +52 -97
  355. package/switch/types.d.ts +4 -4
  356. package/table/DropdownTheme.js +62 -0
  357. package/table/Table.accessibility.test.d.ts +1 -0
  358. package/table/Table.accessibility.test.js +92 -0
  359. package/table/Table.d.ts +6 -2
  360. package/table/Table.js +76 -33
  361. package/table/{Table.stories.jsx → Table.stories.tsx} +309 -2
  362. package/table/Table.test.d.ts +1 -0
  363. package/table/Table.test.js +92 -7
  364. package/table/types.d.ts +34 -6
  365. package/tabs/Tab.js +22 -37
  366. package/tabs/Tabs.accessibility.test.d.ts +1 -0
  367. package/tabs/Tabs.accessibility.test.js +56 -0
  368. package/tabs/Tabs.js +59 -147
  369. package/tabs/Tabs.stories.tsx +8 -4
  370. package/tabs/Tabs.test.d.ts +1 -0
  371. package/tabs/Tabs.test.js +58 -132
  372. package/tabs/types.d.ts +21 -21
  373. package/tag/Tag.accessibility.test.d.ts +1 -0
  374. package/tag/Tag.accessibility.test.js +69 -0
  375. package/tag/Tag.js +27 -57
  376. package/tag/Tag.stories.tsx +5 -8
  377. package/tag/Tag.test.d.ts +1 -0
  378. package/tag/Tag.test.js +18 -37
  379. package/tag/types.d.ts +9 -9
  380. package/text-input/Suggestion.js +9 -26
  381. package/text-input/Suggestions.d.ts +1 -1
  382. package/text-input/Suggestions.js +30 -70
  383. package/text-input/TextInput.accessibility.test.d.ts +1 -0
  384. package/text-input/TextInput.accessibility.test.js +320 -0
  385. package/text-input/TextInput.js +224 -326
  386. package/text-input/TextInput.stories.tsx +68 -160
  387. package/text-input/TextInput.test.d.ts +1 -0
  388. package/text-input/TextInput.test.js +1227 -1195
  389. package/text-input/types.d.ts +25 -17
  390. package/textarea/Textarea.accessibility.test.d.ts +1 -0
  391. package/textarea/Textarea.accessibility.test.js +155 -0
  392. package/textarea/Textarea.js +64 -105
  393. package/textarea/{Textarea.stories.jsx → Textarea.stories.tsx} +58 -100
  394. package/textarea/Textarea.test.d.ts +1 -0
  395. package/textarea/Textarea.test.js +151 -180
  396. package/textarea/types.d.ts +9 -5
  397. package/toggle-group/ToggleGroup.accessibility.test.d.ts +1 -0
  398. package/toggle-group/ToggleGroup.accessibility.test.js +107 -0
  399. package/toggle-group/ToggleGroup.js +90 -109
  400. package/toggle-group/ToggleGroup.stories.tsx +11 -8
  401. package/toggle-group/ToggleGroup.test.d.ts +1 -0
  402. package/toggle-group/ToggleGroup.test.js +69 -88
  403. package/toggle-group/types.d.ts +28 -19
  404. package/tooltip/Tooltip.accessibility.test.d.ts +1 -0
  405. package/tooltip/Tooltip.accessibility.test.js +144 -0
  406. package/tooltip/Tooltip.d.ts +4 -0
  407. package/tooltip/Tooltip.js +50 -0
  408. package/tooltip/Tooltip.stories.tsx +111 -0
  409. package/tooltip/Tooltip.test.d.ts +1 -0
  410. package/tooltip/Tooltip.test.js +112 -0
  411. package/tooltip/types.d.ts +16 -0
  412. package/tooltip/types.js +5 -0
  413. package/typography/Typography.accessibility.test.d.ts +1 -0
  414. package/typography/Typography.accessibility.test.js +339 -0
  415. package/typography/Typography.js +4 -13
  416. package/typography/Typography.stories.tsx +1 -3
  417. package/typography/Typography.test.js +23 -0
  418. package/typography/types.d.ts +1 -1
  419. package/useTheme.d.ts +74 -141
  420. package/useTheme.js +1 -8
  421. package/useTranslatedLabels.js +1 -7
  422. package/utils/BaseTypography.d.ts +2 -2
  423. package/utils/BaseTypography.js +60 -70
  424. package/utils/FocusLock.js +26 -39
  425. package/wizard/Wizard.accessibility.test.d.ts +1 -0
  426. package/wizard/Wizard.accessibility.test.js +55 -0
  427. package/wizard/Wizard.js +27 -73
  428. package/wizard/Wizard.stories.tsx +20 -1
  429. package/wizard/Wizard.test.d.ts +1 -0
  430. package/wizard/Wizard.test.js +54 -81
  431. package/wizard/types.d.ts +8 -8
  432. package/card/ice-cream.jpg +0 -0
  433. package/common/OpenSans.css +0 -69
  434. package/common/fonts/OpenSans-Bold.ttf +0 -0
  435. package/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  436. package/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  437. package/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  438. package/common/fonts/OpenSans-Italic.ttf +0 -0
  439. package/common/fonts/OpenSans-Light.ttf +0 -0
  440. package/common/fonts/OpenSans-LightItalic.ttf +0 -0
  441. package/common/fonts/OpenSans-Regular.ttf +0 -0
  442. package/common/fonts/OpenSans-SemiBold.ttf +0 -0
  443. package/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  444. package/date-input/Icons.d.ts +0 -6
  445. package/date-input/Icons.js +0 -75
  446. package/number-input/numberInputContextTypes.d.ts +0 -19
  447. package/paginator/Icons.d.ts +0 -5
  448. package/paginator/Icons.js +0 -54
  449. package/resultsetTable/Icons.d.ts +0 -7
  450. package/resultsetTable/ResultsetTable.d.ts +0 -4
  451. package/resultsetTable/ResultsetTable.test.js +0 -325
  452. package/select/Icons.d.ts +0 -10
  453. package/select/Icons.js +0 -93
  454. package/sidenav/Icons.d.ts +0 -7
  455. package/sidenav/Icons.js +0 -51
  456. package/text-input/Icons.d.ts +0 -8
  457. package/text-input/Icons.js +0 -60
  458. /package/{resultsetTable → action-icon}/types.js +0 -0
  459. /package/{number-input/numberInputContextTypes.js → breadcrumbs/types.js} +0 -0
  460. /package/spinner/{Spinner.stories.jsx → Spinner.stories.tsx} +0 -0
@@ -1,108 +1,98 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
5
  Object.defineProperty(exports, "__esModule", {
8
6
  value: true
9
7
  });
10
8
  exports["default"] = void 0;
11
-
12
9
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
-
14
10
  var _react = _interopRequireWildcard(require("react"));
15
-
16
11
  var _styledComponents = _interopRequireDefault(require("styled-components"));
17
-
18
12
  var _templateObject;
19
-
20
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
21
-
22
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
23
-
13
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
14
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.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
-
16
+ var ValidTypographyTags = ["a", "blockquote", "cite", "code", "div", "em", "figcaption", "h1", "h2", "h3", "h4", "h5", "h6", "p", "pre", "small", "span", "strong"];
17
+ var isValidTypography = function isValidTypography(tag) {
18
+ return ValidTypographyTags.includes(tag);
19
+ };
26
20
  var BaseTypography = function BaseTypography(_ref) {
27
21
  var as = _ref.as,
28
- display = _ref.display,
29
- fontFamily = _ref.fontFamily,
30
- fontSize = _ref.fontSize,
31
- fontStyle = _ref.fontStyle,
32
- fontWeight = _ref.fontWeight,
33
- letterSpacing = _ref.letterSpacing,
34
- lineHeight = _ref.lineHeight,
35
- textAlign = _ref.textAlign,
36
- color = _ref.color,
37
- textDecoration = _ref.textDecoration,
38
- textOverflow = _ref.textOverflow,
39
- whiteSpace = _ref.whiteSpace,
40
- children = _ref.children;
22
+ display = _ref.display,
23
+ fontFamily = _ref.fontFamily,
24
+ fontSize = _ref.fontSize,
25
+ fontStyle = _ref.fontStyle,
26
+ fontWeight = _ref.fontWeight,
27
+ letterSpacing = _ref.letterSpacing,
28
+ lineHeight = _ref.lineHeight,
29
+ textAlign = _ref.textAlign,
30
+ color = _ref.color,
31
+ textDecoration = _ref.textDecoration,
32
+ textOverflow = _ref.textOverflow,
33
+ whiteSpace = _ref.whiteSpace,
34
+ children = _ref.children;
41
35
  var componentContext = (0, _react.useContext)(TypographyContext);
42
36
  var contextValue = (0, _react.useMemo)(function () {
43
- var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10, _ref11, _ref12, _ref13, _ref14;
44
-
37
+ var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10, _ref11, _ref12, _ref13;
45
38
  return {
46
- as: (_ref2 = as !== null && as !== void 0 ? as : componentContext === null || componentContext === void 0 ? void 0 : componentContext.as) !== null && _ref2 !== void 0 ? _ref2 : "span",
47
- display: (_ref3 = display !== null && display !== void 0 ? display : componentContext === null || componentContext === void 0 ? void 0 : componentContext.display) !== null && _ref3 !== void 0 ? _ref3 : "inline",
48
- fontFamily: (_ref4 = fontFamily !== null && fontFamily !== void 0 ? fontFamily : componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontFamily) !== null && _ref4 !== void 0 ? _ref4 : "Open Sans, sans-serif",
49
- fontSize: (_ref5 = fontSize !== null && fontSize !== void 0 ? fontSize : componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontSize) !== null && _ref5 !== void 0 ? _ref5 : "1rem",
50
- fontStyle: (_ref6 = fontStyle !== null && fontStyle !== void 0 ? fontStyle : componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontStyle) !== null && _ref6 !== void 0 ? _ref6 : "normal",
51
- fontWeight: (_ref7 = fontWeight !== null && fontWeight !== void 0 ? fontWeight : componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontWeight) !== null && _ref7 !== void 0 ? _ref7 : "400",
52
- letterSpacing: (_ref8 = letterSpacing !== null && letterSpacing !== void 0 ? letterSpacing : componentContext === null || componentContext === void 0 ? void 0 : componentContext.letterSpacing) !== null && _ref8 !== void 0 ? _ref8 : "0em",
53
- lineHeight: (_ref9 = lineHeight !== null && lineHeight !== void 0 ? lineHeight : componentContext === null || componentContext === void 0 ? void 0 : componentContext.lineHeight) !== null && _ref9 !== void 0 ? _ref9 : "1.5em",
54
- textAlign: (_ref10 = textAlign !== null && textAlign !== void 0 ? textAlign : componentContext === null || componentContext === void 0 ? void 0 : componentContext.textAlign) !== null && _ref10 !== void 0 ? _ref10 : "left",
55
- color: (_ref11 = color !== null && color !== void 0 ? color : componentContext === null || componentContext === void 0 ? void 0 : componentContext.color) !== null && _ref11 !== void 0 ? _ref11 : "#000000",
56
- textDecoration: (_ref12 = textDecoration !== null && textDecoration !== void 0 ? textDecoration : componentContext === null || componentContext === void 0 ? void 0 : componentContext.textDecoration) !== null && _ref12 !== void 0 ? _ref12 : "none",
57
- textOverflow: (_ref13 = textOverflow !== null && textOverflow !== void 0 ? textOverflow : componentContext === null || componentContext === void 0 ? void 0 : componentContext.textOverflow) !== null && _ref13 !== void 0 ? _ref13 : "unset",
58
- whiteSpace: (_ref14 = whiteSpace !== null && whiteSpace !== void 0 ? whiteSpace : componentContext === null || componentContext === void 0 ? void 0 : componentContext.whiteSpace) !== null && _ref14 !== void 0 ? _ref14 : "normal"
39
+ as: isValidTypography(as) ? as : isValidTypography(componentContext === null || componentContext === void 0 ? void 0 : componentContext.as) ? componentContext === null || componentContext === void 0 ? void 0 : componentContext.as : "span",
40
+ display: (_ref2 = display !== null && display !== void 0 ? display : componentContext === null || componentContext === void 0 ? void 0 : componentContext.display) !== null && _ref2 !== void 0 ? _ref2 : "inline",
41
+ fontFamily: (_ref3 = fontFamily !== null && fontFamily !== void 0 ? fontFamily : componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontFamily) !== null && _ref3 !== void 0 ? _ref3 : "Open Sans, sans-serif",
42
+ fontSize: (_ref4 = fontSize !== null && fontSize !== void 0 ? fontSize : componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontSize) !== null && _ref4 !== void 0 ? _ref4 : "1rem",
43
+ fontStyle: (_ref5 = fontStyle !== null && fontStyle !== void 0 ? fontStyle : componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontStyle) !== null && _ref5 !== void 0 ? _ref5 : "normal",
44
+ fontWeight: (_ref6 = fontWeight !== null && fontWeight !== void 0 ? fontWeight : componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontWeight) !== null && _ref6 !== void 0 ? _ref6 : "400",
45
+ letterSpacing: (_ref7 = letterSpacing !== null && letterSpacing !== void 0 ? letterSpacing : componentContext === null || componentContext === void 0 ? void 0 : componentContext.letterSpacing) !== null && _ref7 !== void 0 ? _ref7 : "0em",
46
+ lineHeight: (_ref8 = lineHeight !== null && lineHeight !== void 0 ? lineHeight : componentContext === null || componentContext === void 0 ? void 0 : componentContext.lineHeight) !== null && _ref8 !== void 0 ? _ref8 : "1.5em",
47
+ textAlign: (_ref9 = textAlign !== null && textAlign !== void 0 ? textAlign : componentContext === null || componentContext === void 0 ? void 0 : componentContext.textAlign) !== null && _ref9 !== void 0 ? _ref9 : "left",
48
+ color: (_ref10 = color !== null && color !== void 0 ? color : componentContext === null || componentContext === void 0 ? void 0 : componentContext.color) !== null && _ref10 !== void 0 ? _ref10 : "#000000",
49
+ textDecoration: (_ref11 = textDecoration !== null && textDecoration !== void 0 ? textDecoration : componentContext === null || componentContext === void 0 ? void 0 : componentContext.textDecoration) !== null && _ref11 !== void 0 ? _ref11 : "none",
50
+ textOverflow: (_ref12 = textOverflow !== null && textOverflow !== void 0 ? textOverflow : componentContext === null || componentContext === void 0 ? void 0 : componentContext.textOverflow) !== null && _ref12 !== void 0 ? _ref12 : "unset",
51
+ whiteSpace: (_ref13 = whiteSpace !== null && whiteSpace !== void 0 ? whiteSpace : componentContext === null || componentContext === void 0 ? void 0 : componentContext.whiteSpace) !== null && _ref13 !== void 0 ? _ref13 : "normal"
59
52
  };
60
53
  }, [as, display, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign, color, textDecoration, textOverflow, whiteSpace]);
61
54
  return /*#__PURE__*/_react["default"].createElement(TypographyContext.Provider, {
62
55
  value: contextValue
63
56
  }, /*#__PURE__*/_react["default"].createElement(StyledTypography, contextValue, children));
64
57
  };
65
-
66
- 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
- var display = _ref15.display;
58
+ 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 (_ref14) {
59
+ var display = _ref14.display;
68
60
  return display;
69
- }, function (_ref16) {
70
- var color = _ref16.color;
61
+ }, function (_ref15) {
62
+ var color = _ref15.color;
71
63
  return color;
72
- }, function (_ref17) {
73
- var fontFamily = _ref17.fontFamily;
64
+ }, function (_ref16) {
65
+ var fontFamily = _ref16.fontFamily;
74
66
  return fontFamily;
75
- }, function (_ref18) {
76
- var fontSize = _ref18.fontSize;
67
+ }, function (_ref17) {
68
+ var fontSize = _ref17.fontSize;
77
69
  return fontSize;
78
- }, function (_ref19) {
79
- var fontStyle = _ref19.fontStyle;
70
+ }, function (_ref18) {
71
+ var fontStyle = _ref18.fontStyle;
80
72
  return fontStyle;
81
- }, function (_ref20) {
82
- var fontWeight = _ref20.fontWeight;
73
+ }, function (_ref19) {
74
+ var fontWeight = _ref19.fontWeight;
83
75
  return fontWeight;
84
- }, function (_ref21) {
85
- var letterSpacing = _ref21.letterSpacing;
76
+ }, function (_ref20) {
77
+ var letterSpacing = _ref20.letterSpacing;
86
78
  return letterSpacing;
87
- }, function (_ref22) {
88
- var lineHeight = _ref22.lineHeight;
79
+ }, function (_ref21) {
80
+ var lineHeight = _ref21.lineHeight;
89
81
  return lineHeight;
90
- }, function (_ref23) {
91
- var textAlign = _ref23.textAlign;
82
+ }, function (_ref22) {
83
+ var textAlign = _ref22.textAlign;
92
84
  return textAlign;
93
- }, function (_ref24) {
94
- var textDecoration = _ref24.textDecoration;
85
+ }, function (_ref23) {
86
+ var textDecoration = _ref23.textDecoration;
95
87
  return textDecoration;
96
- }, function (_ref25) {
97
- var textOverflow = _ref25.textOverflow;
88
+ }, function (_ref24) {
89
+ var textOverflow = _ref24.textOverflow;
98
90
  return textOverflow;
99
- }, function (_ref26) {
100
- var whiteSpace = _ref26.whiteSpace;
91
+ }, function (_ref25) {
92
+ var whiteSpace = _ref25.whiteSpace;
101
93
  return whiteSpace;
102
- }, function (_ref27) {
103
- var textOverflow = _ref27.textOverflow;
94
+ }, function (_ref26) {
95
+ var textOverflow = _ref26.textOverflow;
104
96
  return textOverflow !== "unset" ? "hidden" : "visible";
105
97
  });
106
-
107
- var _default = BaseTypography;
108
- exports["default"] = _default;
98
+ var _default = exports["default"] = BaseTypography;
@@ -1,33 +1,26 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
5
  Object.defineProperty(exports, "__esModule", {
8
6
  value: true
9
7
  });
10
8
  exports["default"] = void 0;
11
-
12
9
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
13
-
14
10
  var _react = _interopRequireWildcard(require("react"));
15
-
16
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
17
-
18
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
19
-
11
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
12
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.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,35 @@ var getFocusableElements = function getFocusableElements(container) {
35
28
  * @param element: HTMLElement
36
29
  * @returns
37
30
  */
38
-
39
-
40
- var attempFocus = function attempFocus(element) {
31
+ var attemptFocus = function attemptFocus(element) {
41
32
  element === null || element === void 0 ? void 0 : element.focus();
42
33
  return document.activeElement === element;
43
34
  };
35
+
44
36
  /**
45
37
  * @param element: HTMLElement
46
38
  * @returns boolean: true if element is contained inside a Radix Portal, false otherwise.
47
39
  */
48
-
49
-
50
40
  var radixPortalContains = function radixPortalContains(activeElement) {
51
41
  var radixPortals = document.querySelectorAll("[data-radix-portal]");
42
+ var radixPoppers = document.querySelectorAll("[data-radix-popper-content-wrapper]");
52
43
  return Array.prototype.slice.call(radixPortals).some(function (portal) {
53
44
  return portal.contains(activeElement);
45
+ }) || Array.prototype.slice.call(radixPoppers).some(function (popper) {
46
+ return popper.contains(activeElement);
54
47
  });
55
48
  };
49
+
56
50
  /**
57
51
  * Custom hook that returns an array of focusable elements inside a container.
58
52
  * @param ref: React.MutableRefObject<HTMLDivElement>
59
53
  * @returns
60
54
  */
61
-
62
-
63
55
  var useFocusableElements = function useFocusableElements(ref) {
64
56
  var _useState = (0, _react.useState)(),
65
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
66
- focusableElements = _useState2[0],
67
- setFocusableElements = _useState2[1];
68
-
57
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
58
+ focusableElements = _useState2[0],
59
+ setFocusableElements = _useState2[1];
69
60
  (0, _react.useEffect)(function () {
70
61
  if (ref.current != null) {
71
62
  setFocusableElements(getFocusableElements(ref.current));
@@ -84,6 +75,7 @@ var useFocusableElements = function useFocusableElements(ref) {
84
75
  }, []);
85
76
  return focusableElements;
86
77
  };
78
+
87
79
  /**
88
80
  * Traps the focus inside the children of the component. It will focus the first focusable element when the component is mounted.
89
81
  * 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 +84,27 @@ var useFocusableElements = function useFocusableElements(ref) {
92
84
  * @param children: React.ReactNode
93
85
  * @returns
94
86
  */
95
-
96
-
97
87
  var FocusLock = function FocusLock(_ref) {
98
88
  var children = _ref.children;
99
89
  var childrenContainerRef = (0, _react.useRef)();
100
90
  var focusableElements = useFocusableElements(childrenContainerRef);
101
91
  var focusFirst = (0, _react.useCallback)(function () {
102
92
  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
- }
93
+ if ((focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) === 0) (_childrenContainerRef = childrenContainerRef.current) === null || _childrenContainerRef === void 0 ? void 0 : _childrenContainerRef.focus();else if ((focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) > 0) focusableElements.some(function (element) {
94
+ return attemptFocus(element);
95
+ });
107
96
  }, [focusableElements]);
108
-
109
97
  var focusLast = function focusLast() {
110
- for (var i = focusableElements.length - 1; i >= 0; i--) {
111
- if (attempFocus(focusableElements[i])) return;
112
- }
98
+ var _focusableElements$re;
99
+ focusableElements === null || focusableElements === void 0 ? void 0 : (_focusableElements$re = focusableElements.reverse()) === null || _focusableElements$re === void 0 ? void 0 : _focusableElements$re.some(function (element) {
100
+ return attemptFocus(element);
101
+ });
113
102
  };
114
-
115
103
  var focusLock = function focusLock(event) {
116
- if (event.key === "Tab") focusableElements.length === 0 && event.preventDefault();else if (event.key === "Tab" && event.key === "Shift") focusableElements.length === 0 && event.preventDefault();
104
+ if (event.key === "Tab") focusableElements.length === 0 && event.preventDefault();
117
105
  };
118
-
119
106
  (0, _react.useEffect)(function () {
120
107
  var _childrenContainerRef2;
121
-
122
108
  if (!((_childrenContainerRef2 = childrenContainerRef.current) !== null && _childrenContainerRef2 !== void 0 && _childrenContainerRef2.contains(document.activeElement)) && !radixPortalContains(document.activeElement)) focusFirst();
123
109
  }, [focusFirst]);
124
110
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
@@ -127,12 +113,13 @@ var FocusLock = function FocusLock(_ref) {
127
113
  }), /*#__PURE__*/_react["default"].createElement("div", {
128
114
  onKeyDown: focusLock,
129
115
  ref: childrenContainerRef,
130
- tabIndex: (focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) === 0 ? 0 : -1
116
+ tabIndex: (focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) === 0 ? 0 : -1,
117
+ style: {
118
+ outline: "none"
119
+ }
131
120
  }, children), /*#__PURE__*/_react["default"].createElement("div", {
132
121
  onFocus: focusFirst,
133
122
  tabIndex: 0
134
123
  }));
135
124
  };
136
-
137
- var _default = FocusLock;
138
- exports["default"] = _default;
125
+ var _default = exports["default"] = FocusLock;
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,55 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
5
+ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
6
+ var _react = _interopRequireDefault(require("react"));
7
+ var _react2 = require("@testing-library/react");
8
+ var _axeHelper = require("../../test/accessibility/axe-helper.js");
9
+ var _Wizard = _interopRequireDefault(require("./Wizard"));
10
+ var favoriteSVG = /*#__PURE__*/_react["default"].createElement("svg", {
11
+ viewBox: "0 0 24 24",
12
+ fill: "currentColor"
13
+ }, /*#__PURE__*/_react["default"].createElement("path", {
14
+ d: "M0 0h24v24H0z",
15
+ fill: "none"
16
+ }), /*#__PURE__*/_react["default"].createElement("path", {
17
+ d: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
18
+ }));
19
+ describe("Wizard component accessibility tests", function () {
20
+ it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
21
+ var _render, container, results;
22
+ return _regenerator["default"].wrap(function _callee$(_context) {
23
+ while (1) switch (_context.prev = _context.next) {
24
+ case 0:
25
+ _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
26
+ steps: [{
27
+ label: "first-step",
28
+ description: "Description",
29
+ icon: favoriteSVG
30
+ }, {
31
+ label: "second-step",
32
+ description: "Description"
33
+ }, {
34
+ label: "valid-step",
35
+ valid: true
36
+ }, {
37
+ label: "disabled-step",
38
+ disabled: true
39
+ }],
40
+ mode: "vertical",
41
+ defaultCurrentStep: 1,
42
+ margin: "medium"
43
+ })), container = _render.container;
44
+ _context.next = 3;
45
+ return (0, _axeHelper.axe)(container);
46
+ case 3:
47
+ results = _context.sent;
48
+ expect(results).toHaveNoViolations();
49
+ case 5:
50
+ case "end":
51
+ return _context.stop();
52
+ }
53
+ }, _callee);
54
+ })));
55
+ });