@telus-uds/components-base 0.0.2-prerelease.7 → 1.0.1

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 (445) hide show
  1. package/.eslintrc.js +9 -0
  2. package/.ultra.cache.json +1 -1
  3. package/CHANGELOG.md +71 -0
  4. package/README.md +4 -2
  5. package/__fixtures__/Accessible.js +33 -0
  6. package/__fixtures__/Accessible.native.js +32 -0
  7. package/__fixtures__/test-utils.js +25 -0
  8. package/__fixtures__/testTheme.js +438 -31
  9. package/__tests__/ActivityIndicator/ActivityIndicator.test.jsx +1 -1
  10. package/__tests__/Button/ButtonGroup.test.jsx +6 -7
  11. package/__tests__/Checkbox/Checkbox.test.jsx +2 -2
  12. package/__tests__/Checkbox/CheckboxGroup.test.jsx +246 -0
  13. package/__tests__/ExpandCollapse/ExpandCollapse.test.jsx +2 -2
  14. package/__tests__/HorizontalScroll/HorizontalScroll.test.jsx +164 -0
  15. package/__tests__/Icon/Icon.test.jsx +3 -3
  16. package/__tests__/IconButton/IconButton.test.jsx +52 -0
  17. package/__tests__/Link/LinkBase.test.jsx +0 -14
  18. package/__tests__/Modal/Modal.test.jsx +47 -0
  19. package/__tests__/Notification/Notification.test.jsx +20 -0
  20. package/__tests__/Pagination/Pagination.test.jsx +2 -2
  21. package/__tests__/Progress/Progress.test.jsx +79 -0
  22. package/__tests__/Radio/Radio.test.jsx +2 -2
  23. package/__tests__/Radio/RadioGroup.test.jsx +220 -0
  24. package/__tests__/RadioCard/RadioCard.test.jsx +87 -0
  25. package/__tests__/RadioCard/RadioCardGroup.test.jsx +246 -0
  26. package/__tests__/Search/Search.test.jsx +73 -0
  27. package/__tests__/Select/Select.test.jsx +3 -2
  28. package/__tests__/Skeleton/Skeleton.test.jsx +1 -1
  29. package/__tests__/StepTracker/StepTracker.test.jsx +94 -0
  30. package/__tests__/Tabs/Tabs.test.jsx +40 -0
  31. package/__tests__/Tags/Tags.test.jsx +5 -6
  32. package/__tests__/TextInput/TextArea.test.jsx +3 -2
  33. package/__tests__/TextInput/TextInputBase.test.jsx +10 -5
  34. package/__tests__/ThemeProvider/ThemeProvider.test.jsx +77 -0
  35. package/__tests__/ThemeProvider/useThemeTokens.test.jsx +9 -5
  36. package/__tests__/ThemeProvider/utils/theme-tokens.test.js +41 -0
  37. package/__tests__/ToggleSwitch/ToggleSwitch.test.jsx +3 -2
  38. package/__tests__/utils/children.test.jsx +128 -0
  39. package/__tests__/utils/input.test.js +59 -1
  40. package/__tests__/utils/semantics.test.jsx +43 -0
  41. package/__tests__/utils/useCopy.test.js +14 -3
  42. package/babel.config.js +20 -0
  43. package/jest.config.js +6 -3
  44. package/lib/A11yInfoProvider/index.js +54 -26
  45. package/lib/A11yText/index.js +45 -17
  46. package/lib/ActivityIndicator/Spinner.js +81 -0
  47. package/lib/ActivityIndicator/Spinner.native.js +129 -91
  48. package/lib/ActivityIndicator/index.js +28 -12
  49. package/lib/ActivityIndicator/shared.js +27 -12
  50. package/lib/BaseProvider/index.js +34 -11
  51. package/lib/Box/Box.js +153 -35
  52. package/lib/Box/index.js +13 -2
  53. package/lib/Button/Button.js +38 -16
  54. package/lib/Button/ButtonBase.js +93 -79
  55. package/lib/Button/ButtonGroup.js +112 -73
  56. package/lib/Button/ButtonLink.js +45 -19
  57. package/lib/Button/index.js +31 -4
  58. package/lib/Button/propTypes.js +32 -9
  59. package/lib/Card/Card.js +38 -41
  60. package/lib/Card/CardBase.js +86 -0
  61. package/lib/Card/PressableCardBase.js +141 -0
  62. package/lib/Card/index.js +40 -2
  63. package/lib/Checkbox/Checkbox.js +158 -111
  64. package/lib/Checkbox/CheckboxGroup.js +241 -0
  65. package/lib/Checkbox/CheckboxInput.js +74 -0
  66. package/lib/Checkbox/CheckboxInput.native.js +9 -1
  67. package/lib/Checkbox/index.js +21 -2
  68. package/lib/Divider/Divider.js +59 -28
  69. package/lib/Divider/index.js +13 -2
  70. package/lib/ExpandCollapse/Accordion.js +26 -7
  71. package/lib/ExpandCollapse/Control.js +60 -31
  72. package/lib/ExpandCollapse/ExpandCollapse.js +50 -28
  73. package/lib/ExpandCollapse/Panel.js +83 -44
  74. package/lib/ExpandCollapse/index.js +25 -7
  75. package/lib/Feedback/Feedback.js +77 -43
  76. package/lib/Feedback/index.js +13 -2
  77. package/lib/Fieldset/Fieldset.js +165 -0
  78. package/lib/Fieldset/FieldsetContainer.js +46 -0
  79. package/lib/Fieldset/FieldsetContainer.native.js +38 -0
  80. package/lib/Fieldset/Legend.js +38 -0
  81. package/lib/Fieldset/Legend.native.js +48 -0
  82. package/lib/Fieldset/cssReset.js +21 -0
  83. package/lib/Fieldset/index.js +13 -0
  84. package/lib/FlexGrid/Col/Col.js +73 -41
  85. package/lib/FlexGrid/Col/index.js +13 -2
  86. package/lib/FlexGrid/FlexGrid.js +99 -49
  87. package/lib/FlexGrid/Row/Row.js +58 -30
  88. package/lib/FlexGrid/Row/index.js +13 -2
  89. package/lib/FlexGrid/helpers/index.js +9 -1
  90. package/lib/FlexGrid/index.js +13 -2
  91. package/lib/FlexGrid/providers/GutterContext.js +15 -3
  92. package/lib/HorizontalScroll/HorizontalScroll.js +200 -0
  93. package/lib/HorizontalScroll/HorizontalScrollButton.js +127 -0
  94. package/lib/HorizontalScroll/ScrollViewEnd.js +66 -0
  95. package/lib/HorizontalScroll/ScrollViewEnd.native.js +41 -0
  96. package/lib/HorizontalScroll/dictionary.js +18 -0
  97. package/lib/HorizontalScroll/index.js +35 -0
  98. package/lib/HorizontalScroll/itemPositions.js +128 -0
  99. package/lib/Icon/Icon.js +57 -48
  100. package/lib/Icon/IconText.js +54 -25
  101. package/lib/Icon/index.js +31 -4
  102. package/lib/IconButton/IconButton.js +140 -0
  103. package/lib/IconButton/index.js +13 -0
  104. package/lib/InputLabel/InputLabel.js +102 -40
  105. package/lib/InputLabel/LabelContent.js +41 -0
  106. package/lib/InputLabel/LabelContent.native.js +32 -6
  107. package/lib/InputLabel/index.js +13 -2
  108. package/lib/InputSupports/InputSupports.js +71 -52
  109. package/lib/InputSupports/index.js +13 -2
  110. package/lib/InputSupports/propTypes.js +19 -8
  111. package/lib/InputSupports/useInputSupports.js +41 -0
  112. package/lib/Link/ChevronLink.js +44 -20
  113. package/lib/Link/InlinePressable.js +56 -0
  114. package/lib/Link/InlinePressable.native.js +39 -15
  115. package/lib/Link/Link.js +36 -13
  116. package/lib/Link/LinkBase.js +98 -61
  117. package/lib/Link/TextButton.js +41 -17
  118. package/lib/Link/index.js +39 -5
  119. package/lib/List/List.js +55 -26
  120. package/lib/List/ListItem.js +79 -41
  121. package/lib/List/index.js +13 -2
  122. package/lib/Modal/Modal.js +231 -0
  123. package/lib/Modal/dictionary.js +16 -0
  124. package/lib/Modal/index.js +13 -0
  125. package/lib/Notification/Notification.js +216 -0
  126. package/lib/Notification/dictionary.js +15 -0
  127. package/lib/Notification/index.js +13 -0
  128. package/lib/Pagination/PageButton.js +61 -28
  129. package/lib/Pagination/Pagination.js +78 -43
  130. package/lib/Pagination/SideButton.js +73 -42
  131. package/lib/Pagination/dictionary.js +9 -2
  132. package/lib/Pagination/index.js +13 -2
  133. package/lib/Pagination/usePagination.js +12 -2
  134. package/lib/Progress/Progress.js +104 -0
  135. package/lib/Progress/ProgressBar.js +157 -0
  136. package/lib/Progress/ProgressBarBackground.js +61 -0
  137. package/lib/Progress/index.js +16 -0
  138. package/lib/Radio/Radio.js +116 -114
  139. package/lib/Radio/RadioButton.js +152 -0
  140. package/lib/Radio/RadioGroup.js +244 -0
  141. package/lib/Radio/RadioInput.js +76 -0
  142. package/lib/Radio/RadioInput.native.js +9 -1
  143. package/lib/Radio/index.js +21 -2
  144. package/lib/RadioCard/RadioCard.js +244 -0
  145. package/lib/RadioCard/RadioCardGroup.js +252 -0
  146. package/lib/RadioCard/index.js +21 -0
  147. package/lib/Search/Search.js +254 -0
  148. package/lib/Search/dictionary.js +19 -0
  149. package/lib/Search/index.js +13 -0
  150. package/lib/Select/Group.js +33 -0
  151. package/lib/Select/Group.native.js +16 -5
  152. package/lib/Select/Item.js +29 -0
  153. package/lib/Select/Item.native.js +14 -4
  154. package/lib/Select/Picker.js +84 -0
  155. package/lib/Select/Picker.native.js +73 -30
  156. package/lib/Select/Select.js +155 -85
  157. package/lib/Select/index.js +19 -6
  158. package/lib/SideNav/Item.js +63 -37
  159. package/lib/SideNav/ItemContent.js +41 -15
  160. package/lib/SideNav/ItemsGroup.js +55 -31
  161. package/lib/SideNav/SideNav.js +100 -73
  162. package/lib/SideNav/index.js +15 -1
  163. package/lib/Skeleton/Skeleton.js +64 -46
  164. package/lib/Skeleton/index.js +13 -2
  165. package/lib/Skeleton/skeleton.constant.js +12 -0
  166. package/lib/Skeleton/skeletonWebAnimation.js +27 -0
  167. package/lib/Skeleton/useSkeletonNativeAnimation.js +37 -0
  168. package/lib/Spacer/Spacer.js +49 -18
  169. package/lib/Spacer/index.js +13 -2
  170. package/lib/StackView/StackView.js +72 -31
  171. package/lib/StackView/StackWrap.js +43 -13
  172. package/lib/StackView/StackWrap.native.js +13 -2
  173. package/lib/StackView/StackWrapBox.js +77 -29
  174. package/lib/StackView/StackWrapGap.js +56 -26
  175. package/lib/StackView/common.js +23 -6
  176. package/lib/StackView/getStackedContent.js +47 -17
  177. package/lib/StackView/index.js +29 -5
  178. package/lib/StepTracker/Step.js +245 -0
  179. package/lib/StepTracker/StepTracker.js +202 -0
  180. package/lib/StepTracker/dictionary.js +17 -0
  181. package/lib/StepTracker/index.js +13 -0
  182. package/lib/Tabs/Tabs.js +124 -0
  183. package/lib/Tabs/TabsItem.js +238 -0
  184. package/lib/Tabs/index.js +13 -0
  185. package/lib/Tags/Tags.js +148 -99
  186. package/lib/Tags/index.js +13 -2
  187. package/lib/TextInput/TextArea.js +57 -28
  188. package/lib/TextInput/TextInput.js +50 -23
  189. package/lib/TextInput/TextInputBase.js +90 -63
  190. package/lib/TextInput/index.js +23 -3
  191. package/lib/TextInput/propTypes.js +18 -7
  192. package/lib/ThemeProvider/ThemeProvider.js +46 -18
  193. package/lib/ThemeProvider/index.js +61 -6
  194. package/lib/ThemeProvider/useSetTheme.js +19 -5
  195. package/lib/ThemeProvider/useTheme.js +13 -4
  196. package/lib/ThemeProvider/useThemeTokens.js +32 -16
  197. package/lib/ThemeProvider/utils/index.js +31 -2
  198. package/lib/ThemeProvider/utils/styles.js +50 -14
  199. package/lib/ThemeProvider/utils/theme-tokens.js +121 -12
  200. package/lib/ToggleSwitch/ToggleSwitch.js +85 -56
  201. package/lib/ToggleSwitch/index.js +13 -2
  202. package/lib/Tooltip/{Backdrop.web.js → Backdrop.js} +20 -8
  203. package/lib/Tooltip/Backdrop.native.js +39 -15
  204. package/lib/Tooltip/Tooltip.js +117 -74
  205. package/lib/Tooltip/dictionary.js +9 -2
  206. package/lib/Tooltip/getTooltipPosition.js +9 -1
  207. package/lib/Tooltip/index.js +13 -2
  208. package/lib/TooltipButton/TooltipButton.js +57 -38
  209. package/lib/TooltipButton/index.js +13 -2
  210. package/lib/Typography/Typography.js +87 -41
  211. package/lib/Typography/index.js +13 -2
  212. package/lib/ViewportProvider/ViewportProvider.js +34 -13
  213. package/lib/ViewportProvider/index.js +28 -3
  214. package/lib/ViewportProvider/useViewport.js +15 -3
  215. package/lib/ViewportProvider/useViewportListener.js +24 -10
  216. package/lib/index.js +539 -33
  217. package/lib/utils/a11y/index.js +31 -1
  218. package/lib/utils/a11y/semantics.js +173 -0
  219. package/lib/utils/a11y/textSize.js +23 -7
  220. package/lib/utils/animation/index.js +15 -2
  221. package/lib/utils/animation/useVerticalExpandAnimation.js +27 -10
  222. package/lib/utils/children.js +134 -0
  223. package/lib/utils/index.js +163 -10
  224. package/lib/utils/info/index.js +18 -6
  225. package/lib/utils/info/platform/index.js +19 -7
  226. package/lib/utils/info/platform/platform.android.js +8 -1
  227. package/lib/utils/info/platform/platform.ios.js +8 -1
  228. package/lib/utils/info/platform/platform.js +8 -0
  229. package/lib/utils/info/platform/platform.native.js +8 -1
  230. package/lib/utils/info/versions.js +15 -4
  231. package/lib/utils/input.js +53 -25
  232. package/lib/utils/pressability.js +38 -10
  233. package/lib/utils/propTypes.js +287 -141
  234. package/lib/utils/useCopy.js +40 -5
  235. package/lib/utils/useHash.js +52 -0
  236. package/lib/utils/useHash.native.js +15 -0
  237. package/lib/utils/useResponsiveProp.js +21 -9
  238. package/lib/utils/useSpacingScale.js +19 -9
  239. package/lib/utils/useUniqueId.js +12 -3
  240. package/package.json +14 -9
  241. package/release-context.json +4 -4
  242. package/src/A11yText/index.jsx +6 -4
  243. package/src/ActivityIndicator/{Spinner.web.jsx → Spinner.jsx} +5 -3
  244. package/src/ActivityIndicator/Spinner.native.jsx +5 -3
  245. package/src/Box/Box.jsx +132 -39
  246. package/src/Button/Button.jsx +10 -6
  247. package/src/Button/ButtonBase.jsx +99 -99
  248. package/src/Button/ButtonGroup.jsx +81 -69
  249. package/src/Button/ButtonLink.jsx +21 -15
  250. package/src/Button/propTypes.js +12 -2
  251. package/src/Card/Card.jsx +5 -31
  252. package/src/Card/CardBase.jsx +59 -0
  253. package/src/Card/PressableCardBase.jsx +119 -0
  254. package/src/Card/index.js +3 -0
  255. package/src/Checkbox/Checkbox.jsx +121 -112
  256. package/src/Checkbox/CheckboxGroup.jsx +206 -0
  257. package/src/Checkbox/{CheckboxInput.web.jsx → CheckboxInput.jsx} +0 -0
  258. package/src/Checkbox/index.js +2 -0
  259. package/src/Divider/Divider.jsx +7 -4
  260. package/src/ExpandCollapse/Accordion.jsx +3 -2
  261. package/src/ExpandCollapse/Control.jsx +40 -43
  262. package/src/ExpandCollapse/ExpandCollapse.jsx +26 -23
  263. package/src/ExpandCollapse/Panel.jsx +69 -63
  264. package/src/Feedback/Feedback.jsx +36 -33
  265. package/src/Fieldset/Fieldset.jsx +136 -0
  266. package/src/Fieldset/FieldsetContainer.jsx +31 -0
  267. package/src/Fieldset/FieldsetContainer.native.jsx +19 -0
  268. package/src/Fieldset/Legend.jsx +21 -0
  269. package/src/Fieldset/Legend.native.jsx +27 -0
  270. package/src/Fieldset/cssReset.js +14 -0
  271. package/src/Fieldset/index.js +3 -0
  272. package/src/FlexGrid/Col/Col.jsx +139 -132
  273. package/src/FlexGrid/FlexGrid.jsx +79 -51
  274. package/src/FlexGrid/Row/Row.jsx +55 -48
  275. package/src/HorizontalScroll/HorizontalScroll.jsx +168 -0
  276. package/src/HorizontalScroll/HorizontalScrollButton.jsx +105 -0
  277. package/src/HorizontalScroll/ScrollViewEnd.jsx +53 -0
  278. package/src/HorizontalScroll/ScrollViewEnd.native.jsx +24 -0
  279. package/src/HorizontalScroll/dictionary.js +11 -0
  280. package/src/HorizontalScroll/index.js +17 -0
  281. package/src/HorizontalScroll/itemPositions.js +101 -0
  282. package/src/Icon/Icon.jsx +43 -50
  283. package/src/Icon/IconText.jsx +23 -18
  284. package/src/Icon/index.js +2 -2
  285. package/src/IconButton/IconButton.jsx +114 -0
  286. package/src/IconButton/index.js +3 -0
  287. package/src/InputLabel/InputLabel.jsx +57 -35
  288. package/src/InputLabel/LabelContent.jsx +21 -0
  289. package/src/InputLabel/LabelContent.native.jsx +11 -2
  290. package/src/InputSupports/InputSupports.jsx +29 -45
  291. package/src/InputSupports/useInputSupports.js +30 -0
  292. package/src/Link/ChevronLink.jsx +26 -16
  293. package/src/Link/{InlinePressable.web.jsx → InlinePressable.jsx} +5 -3
  294. package/src/Link/InlinePressable.native.jsx +5 -3
  295. package/src/Link/Link.jsx +22 -16
  296. package/src/Link/LinkBase.jsx +76 -65
  297. package/src/Link/TextButton.jsx +30 -23
  298. package/src/List/List.jsx +5 -4
  299. package/src/List/ListItem.jsx +77 -82
  300. package/src/Modal/Modal.jsx +190 -0
  301. package/src/Modal/dictionary.js +9 -0
  302. package/src/Modal/index.js +3 -0
  303. package/src/Notification/Notification.jsx +164 -0
  304. package/src/Notification/dictionary.js +8 -0
  305. package/src/Notification/index.js +3 -0
  306. package/src/Pagination/PageButton.jsx +42 -35
  307. package/src/Pagination/Pagination.jsx +88 -92
  308. package/src/Pagination/SideButton.jsx +44 -41
  309. package/src/Progress/Progress.jsx +78 -0
  310. package/src/Progress/ProgressBar.jsx +123 -0
  311. package/src/Progress/ProgressBarBackground.jsx +36 -0
  312. package/src/Progress/index.js +6 -0
  313. package/src/Radio/Radio.jsx +82 -112
  314. package/src/Radio/RadioButton.jsx +142 -0
  315. package/src/Radio/RadioGroup.jsx +209 -0
  316. package/src/Radio/{RadioInput.web.jsx → RadioInput.jsx} +0 -0
  317. package/src/Radio/index.js +2 -0
  318. package/src/RadioCard/RadioCard.jsx +198 -0
  319. package/src/RadioCard/RadioCardGroup.jsx +218 -0
  320. package/src/RadioCard/index.js +5 -0
  321. package/src/Search/Search.jsx +225 -0
  322. package/src/Search/dictionary.js +12 -0
  323. package/src/Search/index.js +3 -0
  324. package/src/Select/{Group.web.jsx → Group.jsx} +0 -0
  325. package/src/Select/{Item.web.jsx → Item.jsx} +0 -0
  326. package/src/Select/Picker.jsx +74 -0
  327. package/src/Select/Picker.native.jsx +56 -49
  328. package/src/Select/Select.jsx +125 -92
  329. package/src/SideNav/Item.jsx +54 -47
  330. package/src/SideNav/ItemsGroup.jsx +50 -43
  331. package/src/SideNav/SideNav.jsx +68 -60
  332. package/src/Skeleton/Skeleton.jsx +25 -32
  333. package/src/Skeleton/skeleton.constant.js +3 -0
  334. package/src/Skeleton/skeletonWebAnimation.js +13 -0
  335. package/src/Skeleton/useSkeletonNativeAnimation.js +27 -0
  336. package/src/Spacer/Spacer.jsx +11 -4
  337. package/src/StackView/StackView.jsx +54 -23
  338. package/src/StackView/StackWrap.jsx +16 -7
  339. package/src/StackView/StackWrapBox.jsx +63 -28
  340. package/src/StackView/StackWrapGap.jsx +46 -24
  341. package/src/StackView/common.jsx +3 -2
  342. package/src/StackView/getStackedContent.jsx +8 -2
  343. package/src/StepTracker/Step.jsx +202 -0
  344. package/src/StepTracker/StepTracker.jsx +174 -0
  345. package/src/StepTracker/dictionary.js +10 -0
  346. package/src/StepTracker/index.js +3 -0
  347. package/src/Tabs/Tabs.jsx +97 -0
  348. package/src/Tabs/TabsItem.jsx +212 -0
  349. package/src/Tabs/index.js +3 -0
  350. package/src/Tags/Tags.jsx +115 -102
  351. package/src/TextInput/TextArea.jsx +5 -4
  352. package/src/TextInput/TextInput.jsx +5 -4
  353. package/src/TextInput/TextInputBase.jsx +95 -98
  354. package/src/ThemeProvider/ThemeProvider.jsx +11 -7
  355. package/src/ThemeProvider/useSetTheme.js +4 -0
  356. package/src/ThemeProvider/useThemeTokens.js +2 -2
  357. package/src/ThemeProvider/utils/styles.js +18 -5
  358. package/src/ThemeProvider/utils/theme-tokens.js +74 -5
  359. package/src/ToggleSwitch/ToggleSwitch.jsx +50 -52
  360. package/src/Tooltip/{Backdrop.web.jsx → Backdrop.jsx} +0 -0
  361. package/src/Tooltip/Tooltip.jsx +135 -131
  362. package/src/TooltipButton/TooltipButton.jsx +23 -27
  363. package/src/Typography/Typography.jsx +71 -47
  364. package/src/index.js +23 -2
  365. package/src/utils/a11y/index.js +1 -0
  366. package/src/utils/a11y/semantics.js +162 -0
  367. package/src/utils/children.jsx +119 -0
  368. package/src/utils/index.js +3 -0
  369. package/src/utils/info/platform/platform.js +1 -0
  370. package/src/utils/info/versions.js +2 -2
  371. package/src/utils/input.js +36 -25
  372. package/src/utils/pressability.js +4 -0
  373. package/src/utils/propTypes.js +199 -72
  374. package/src/utils/useCopy.js +30 -4
  375. package/src/utils/useHash.js +39 -0
  376. package/src/utils/useHash.native.js +6 -0
  377. package/stories/A11yText/A11yText.stories.jsx +6 -10
  378. package/stories/ActivityIndicator/ActivityIndicator.stories.jsx +1 -1
  379. package/stories/Box/Box.stories.jsx +1 -1
  380. package/stories/Button/Button.stories.jsx +2 -2
  381. package/stories/Button/ButtonGroup.stories.jsx +1 -1
  382. package/stories/Button/ButtonLink.stories.jsx +1 -1
  383. package/stories/Card/Card.stories.jsx +1 -1
  384. package/stories/Checkbox/Checkbox.stories.jsx +24 -1
  385. package/stories/Divider/Divider.stories.jsx +1 -1
  386. package/stories/ExpandCollapse/ExpandCollapse.stories.jsx +2 -2
  387. package/stories/Feedback/Feedback.stories.jsx +1 -1
  388. package/stories/FlexGrid/01 FlexGrid.stories.jsx +1 -1
  389. package/stories/FlexGrid/02 Row.stories.jsx +1 -1
  390. package/stories/FlexGrid/03 Col.stories.jsx +1 -1
  391. package/stories/Icon/Icon.stories.jsx +27 -7
  392. package/stories/IconButton/IconButton.stories.jsx +50 -0
  393. package/stories/InputLabel/InputLabel.stories.jsx +1 -1
  394. package/stories/Link/ChevronLink.stories.jsx +1 -1
  395. package/stories/Link/Link.stories.jsx +17 -21
  396. package/stories/Link/TextButton.stories.jsx +1 -1
  397. package/stories/List/List.stories.jsx +1 -1
  398. package/stories/Modal/Modal.stories.jsx +29 -0
  399. package/stories/Notification/Notification.stories.jsx +82 -0
  400. package/stories/Pagination/Pagination.stories.jsx +1 -1
  401. package/stories/Progress/Progress.stories.jsx +93 -0
  402. package/stories/Radio/Radio.stories.jsx +23 -36
  403. package/stories/RadioCard/RadioCard.stories.jsx +98 -0
  404. package/stories/Search/Search.stories.jsx +16 -0
  405. package/stories/Select/Select.stories.jsx +1 -1
  406. package/stories/SideNav/SideNav.stories.jsx +1 -1
  407. package/stories/SideNav/SideNavItem.stories.jsx +1 -1
  408. package/stories/SideNav/SideNavItemsGroup.stories.jsx +1 -1
  409. package/stories/Skeleton/Skeleton.stories.jsx +2 -2
  410. package/stories/Spacer/Spacer.stories.jsx +1 -1
  411. package/stories/StackView/StackView.stories.jsx +1 -1
  412. package/stories/StackView/StackWrap.stories.jsx +1 -1
  413. package/stories/StepTracker/StepTracker.stories.jsx +71 -0
  414. package/stories/Tabs/Tabs.stories.jsx +97 -0
  415. package/stories/Tags/Tags.stories.jsx +1 -1
  416. package/stories/TextInput/TextArea.stories.jsx +1 -1
  417. package/stories/TextInput/TextInput.stories.jsx +1 -1
  418. package/stories/ToggleSwitch/ToggleSwitch.stories.jsx +1 -1
  419. package/stories/Tooltip/Tooltip.stories.jsx +1 -1
  420. package/stories/TooltipButton/TooltipButton.stories.jsx +1 -1
  421. package/stories/Typography/Typography.stories.jsx +1 -1
  422. package/stories/{platform-supports.web.jsx → platform-supports.jsx} +1 -1
  423. package/stories/supports.jsx +37 -3
  424. package/__fixtures__/accessible.icon.svg +0 -6
  425. package/babel.config.json +0 -8
  426. package/docs/Contributing.stories.mdx +0 -9
  427. package/docs/Fonts.stories.mdx +0 -104
  428. package/docs/Icons.stories.mdx +0 -144
  429. package/docs/Introduction.stories.mdx +0 -9
  430. package/lib/ActivityIndicator/Spinner.web.js +0 -55
  431. package/lib/Checkbox/CheckboxInput.web.js +0 -57
  432. package/lib/InputLabel/LabelContent.web.js +0 -17
  433. package/lib/Link/InlinePressable.web.js +0 -32
  434. package/lib/Radio/RadioInput.web.js +0 -59
  435. package/lib/Select/Group.web.js +0 -18
  436. package/lib/Select/Item.web.js +0 -15
  437. package/lib/Select/Picker.web.js +0 -63
  438. package/lib/config/svgr-icons-web.js +0 -9
  439. package/lib/config/svgr-icons.js +0 -52
  440. package/lib/utils/info/platform/platform.web.js +0 -1
  441. package/src/InputLabel/LabelContent.web.jsx +0 -13
  442. package/src/Select/Picker.web.jsx +0 -67
  443. package/src/config/svgr-icons-web.js +0 -11
  444. package/src/config/svgr-icons.js +0 -46
  445. package/src/utils/info/platform/platform.web.js +0 -1
@@ -0,0 +1,74 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var _react = _interopRequireWildcard(require("react"));
9
+
10
+ var _propTypes = _interopRequireDefault(require("prop-types"));
11
+
12
+ var _jsxRuntime = require("react/jsx-runtime");
13
+
14
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
+
16
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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
+
20
+ /**
21
+ * On Web we need to include an actual input but hide it.
22
+ */
23
+ const CheckboxInput = /*#__PURE__*/(0, _react.forwardRef)(({
24
+ checked,
25
+ defaultChecked,
26
+ disabled,
27
+ id,
28
+ isControlled,
29
+ name,
30
+ onChange,
31
+ value
32
+ }, ref) => {
33
+ const handleClick = event => {
34
+ // Cancel the click dispatched via the label tag, since it's already wrapped
35
+ // in <Pressable>
36
+ event.preventDefault();
37
+ event.stopPropagation();
38
+ };
39
+
40
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
41
+ checked: isControlled ? checked : undefined,
42
+ defaultChecked: isControlled ? undefined : defaultChecked,
43
+ disabled: disabled,
44
+ hidden: true,
45
+ id: id,
46
+ name: name,
47
+ onChange: onChange,
48
+ onClick: handleClick,
49
+ ref: ref,
50
+ type: "checkbox",
51
+ value: value
52
+ });
53
+ });
54
+ CheckboxInput.displayName = 'CheckboxInput';
55
+ CheckboxInput.propTypes = {
56
+ checked: _propTypes.default.bool,
57
+ defaultChecked: _propTypes.default.bool,
58
+ disabled: _propTypes.default.bool,
59
+ id: _propTypes.default.string.isRequired,
60
+ isControlled: _propTypes.default.bool.isRequired,
61
+ name: _propTypes.default.string,
62
+ onChange: _propTypes.default.func,
63
+ value: _propTypes.default.string
64
+ };
65
+ CheckboxInput.defaultProps = {
66
+ checked: undefined,
67
+ defaultChecked: undefined,
68
+ disabled: false,
69
+ name: undefined,
70
+ onChange: () => {},
71
+ value: undefined
72
+ };
73
+ var _default = CheckboxInput;
74
+ exports.default = _default;
@@ -1,6 +1,14 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
1
8
  /**
2
9
  * There's no checkbox input on native platforms, so this is a noop.
3
10
  */
4
11
  const CheckboxInput = () => null;
5
12
 
6
- export default CheckboxInput;
13
+ var _default = CheckboxInput;
14
+ exports.default = _default;
@@ -1,2 +1,21 @@
1
- import Checkbox from './Checkbox';
2
- export default Checkbox;
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "CheckboxGroup", {
7
+ enumerable: true,
8
+ get: function () {
9
+ return _CheckboxGroup.default;
10
+ }
11
+ });
12
+ exports.default = void 0;
13
+
14
+ var _Checkbox = _interopRequireDefault(require("./Checkbox"));
15
+
16
+ var _CheckboxGroup = _interopRequireDefault(require("./CheckboxGroup"));
17
+
18
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
+
20
+ var _default = _Checkbox.default;
21
+ exports.default = _default;
@@ -1,9 +1,34 @@
1
- import React from 'react';
2
- import PropTypes from 'prop-types';
3
- import { View, StyleSheet, Platform } from 'react-native';
4
- import { useThemeTokens } from '../ThemeProvider';
5
- import Spacer from '../Spacer';
6
- import { getTokensPropType, variantProp, spacingProps } from '../utils';
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var _react = _interopRequireWildcard(require("react"));
9
+
10
+ var _propTypes = _interopRequireDefault(require("prop-types"));
11
+
12
+ var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
13
+
14
+ var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
15
+
16
+ var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
17
+
18
+ var _ThemeProvider = require("../ThemeProvider");
19
+
20
+ var _Spacer = _interopRequireDefault(require("../Spacer"));
21
+
22
+ var _utils = require("../utils");
23
+
24
+ var _jsxRuntime = require("react/jsx-runtime");
25
+
26
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
27
+
28
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
29
+
30
+ 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; }
31
+
7
32
  /**
8
33
  * @typedef {import('../utils/propTypes.js').SpacingIndex} SpacingIndex
9
34
  * @typedef {import('../utils/propTypes.js').SpacingObject} SpacingObject
@@ -45,18 +70,17 @@ import { getTokensPropType, variantProp, spacingProps } from '../utils';
45
70
  *
46
71
  * For accessibility purposes a divider component will be described with ARIA attributes, i.e. `role="separator"` and `aria-orientation="vertical/horizontal"`.
47
72
  */
48
-
49
- const Divider = ({
73
+ const Divider = /*#__PURE__*/(0, _react.forwardRef)(({
50
74
  variant,
51
75
  vertical = false,
52
76
  space,
53
77
  tokens,
54
78
  testID
55
- }) => {
79
+ }, ref) => {
56
80
  const {
57
81
  color,
58
82
  width
59
- } = useThemeTokens('Divider', tokens, variant);
83
+ } = (0, _ThemeProvider.useThemeTokens)('Divider', tokens, variant);
60
84
  const borderStyles = vertical ? {
61
85
  borderRightColor: color,
62
86
  borderRightWidth: width
@@ -64,49 +88,56 @@ const Divider = ({
64
88
  borderBottomColor: color,
65
89
  borderBottomWidth: width
66
90
  };
67
- const a11y = Platform.OS === 'web' ? // There are aria attributes for dividers on web
91
+ const a11y = _Platform.default.OS === 'web' ? // There are aria attributes for dividers on web
68
92
  {
69
93
  'aria-orientation': vertical ? 'vertical' : 'horizontal',
70
94
  accessibilityRole: 'separator'
71
95
  } : // There are no such equivalent attributes for native
72
96
  {};
73
- const divider = /*#__PURE__*/React.createElement(View, Object.assign({
97
+ const divider = /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
98
+ ref: ref,
74
99
  style: [styles.divider, borderStyles],
75
- testID: testID
76
- }, a11y));
100
+ testID: testID,
101
+ ...a11y
102
+ });
77
103
  if (!space) return divider;
78
104
  const spacerProps = {
79
105
  space,
80
106
  direction: vertical ? 'row' : 'column'
81
107
  };
82
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Spacer, Object.assign({}, spacerProps, {
83
- testID: testID ? `${testID}-Spacer-before` : undefined
84
- })), divider, /*#__PURE__*/React.createElement(Spacer, Object.assign({}, spacerProps, {
85
- testID: testID ? `${testID}-Spacer-after` : undefined
86
- })));
87
- };
88
-
108
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
109
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, { ...spacerProps,
110
+ testID: testID ? `${testID}-Spacer-before` : undefined
111
+ }), divider, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, { ...spacerProps,
112
+ testID: testID ? `${testID}-Spacer-after` : undefined
113
+ })]
114
+ });
115
+ });
116
+ Divider.displayName = 'Divider';
89
117
  Divider.propTypes = {
90
- tokens: getTokensPropType('Divider'),
91
- space: spacingProps.types.spacingValue,
92
- variant: variantProp.propType,
118
+ tokens: (0, _utils.getTokensPropType)('Divider'),
119
+ space: _utils.spacingProps.types.spacingValue,
120
+ variant: _utils.variantProp.propType,
93
121
 
94
122
  /**
95
123
  * By default, the divider is a horizontal line the full width of its parent.
96
124
  * With `vertical` prop and when inside a container with { flexDirection: row }, draws a full height vertical line.
97
125
  */
98
- vertical: PropTypes.bool,
126
+ vertical: _propTypes.default.bool,
99
127
 
100
128
  /**
101
129
  * @ignore
102
130
  * In tests, the only way to select dividers is with testID prop and getByTestId, since they have no content,
103
131
  * no accessibility role on native, and there is no equivalent of nextSibling in React Native Testing Library.
104
132
  */
105
- testID: PropTypes.string
133
+ testID: _propTypes.default.string
106
134
  };
107
- const styles = StyleSheet.create({
135
+
136
+ const styles = _StyleSheet.default.create({
108
137
  divider: {
109
138
  alignSelf: 'stretch'
110
139
  }
111
140
  });
112
- export default Divider;
141
+
142
+ var _default = Divider;
143
+ exports.default = _default;
@@ -1,2 +1,13 @@
1
- import Divider from './Divider';
2
- export default Divider;
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var _Divider = _interopRequireDefault(require("./Divider"));
9
+
10
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
+
12
+ var _default = _Divider.default;
13
+ exports.default = _default;
@@ -1,12 +1,31 @@
1
- import React from 'react';
2
- import ExpandCollapse from './ExpandCollapse';
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var _react = _interopRequireWildcard(require("react"));
9
+
10
+ var _ExpandCollapse = _interopRequireDefault(require("./ExpandCollapse"));
11
+
12
+ var _jsxRuntime = require("react/jsx-runtime");
13
+
14
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
+
16
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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
+
3
20
  /**
4
21
  * 'Accordion' is a shorthand for an ExpandCollapse where only one item may be open at a time
5
22
  */
6
-
7
- const Accordion = props => /*#__PURE__*/React.createElement(ExpandCollapse, Object.assign({}, props, {
23
+ const Accordion = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default, {
24
+ ref: ref,
25
+ ...props,
8
26
  maxOpen: 1
9
27
  }));
10
-
11
- Accordion.propTypes = ExpandCollapse.propTypes;
12
- export default Accordion;
28
+ Accordion.displayName = 'Accordion';
29
+ Accordion.propTypes = _ExpandCollapse.default.propTypes;
30
+ var _default = Accordion;
31
+ exports.default = _default;
@@ -1,8 +1,29 @@
1
- import React from 'react';
2
- import { Pressable, View } from 'react-native';
3
- import PropTypes from 'prop-types';
4
- import { useThemeTokensCallback, verticalAlignRow } from '../ThemeProvider';
5
- import { getTokensPropType, variantProp, a11yProps } from '../utils';
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var _react = _interopRequireWildcard(require("react"));
9
+
10
+ var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
11
+
12
+ var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
13
+
14
+ var _propTypes = _interopRequireDefault(require("prop-types"));
15
+
16
+ var _ThemeProvider = require("../ThemeProvider");
17
+
18
+ var _utils = require("../utils");
19
+
20
+ var _jsxRuntime = require("react/jsx-runtime");
21
+
22
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
23
+
24
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
25
+
26
+ 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; }
6
27
 
7
28
  function selectContainerStyles({
8
29
  backgroundColor,
@@ -27,7 +48,7 @@ function selectContainerStyles({
27
48
  paddingTop,
28
49
  paddingBottom,
29
50
  justifyContent,
30
- ...verticalAlignRow(verticalAlign, iconPosition === 'right')
51
+ ...(0, _ThemeProvider.verticalAlignRow)(verticalAlign, iconPosition === 'right')
31
52
  };
32
53
  } // TODO: use stack / spacer when available
33
54
 
@@ -49,7 +70,7 @@ function selectIconTokens(tokens) {
49
70
  };
50
71
  }
51
72
 
52
- const ExpandCollapseControl = ({
73
+ const ExpandCollapseControl = /*#__PURE__*/(0, _react.forwardRef)(({
53
74
  onPress,
54
75
  isExpanded,
55
76
  children,
@@ -57,11 +78,13 @@ const ExpandCollapseControl = ({
57
78
  accessibilityRole = 'button',
58
79
  variant,
59
80
  rest
60
- }) => {
61
- const getTokens = useThemeTokensCallback('ExpandCollapseControl', tokens, variant);
62
- const a11y = a11yProps.select({ ...rest,
81
+ }, ref) => {
82
+ const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ExpandCollapseControl', tokens, variant);
83
+
84
+ const a11y = _utils.a11yProps.select({ ...rest,
63
85
  accessibilityRole
64
86
  });
87
+
65
88
  a11y.accessibilityState = { ...(a11y.accessibilityState || {}),
66
89
  expanded: isExpanded
67
90
  };
@@ -81,40 +104,46 @@ const ExpandCollapseControl = ({
81
104
 
82
105
  const getPressableStyle = pressableState => selectContainerStyles(getControlTokens(pressableState));
83
106
 
84
- return /*#__PURE__*/React.createElement(Pressable, Object.assign({}, a11y, {
107
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
108
+ ref: ref,
109
+ ...a11y,
85
110
  onPress: onPress,
86
- style: getPressableStyle
87
- }), pressableState => {
88
- const {
89
- icon: IconComponent,
90
- ...themeTokens
91
- } = getControlTokens(pressableState);
92
- return /*#__PURE__*/React.createElement(React.Fragment, null, IconComponent && /*#__PURE__*/React.createElement(View, {
93
- style: selectIconContainerStyles(themeTokens)
94
- }, /*#__PURE__*/React.createElement(IconComponent, {
95
- tokens: selectIconTokens(themeTokens)
96
- })), typeof children === 'function' ? children(getControlState(pressableState)) : children);
111
+ style: getPressableStyle,
112
+ children: pressableState => {
113
+ const {
114
+ icon: IconComponent,
115
+ ...themeTokens
116
+ } = getControlTokens(pressableState);
117
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
118
+ children: [IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
119
+ style: selectIconContainerStyles(themeTokens),
120
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...selectIconTokens(themeTokens)
121
+ })
122
+ }), typeof children === 'function' ? children(getControlState(pressableState)) : children]
123
+ });
124
+ }
97
125
  });
98
- };
99
-
100
- ExpandCollapseControl.propTypes = { ...a11yProps.propTypes,
101
- tokens: getTokensPropType('ExpandCollapseControl'),
102
- variant: variantProp.propType,
126
+ });
127
+ ExpandCollapseControl.displayName = 'ExpandCollapseControl';
128
+ ExpandCollapseControl.propTypes = { ..._utils.a11yProps.propTypes,
129
+ tokens: (0, _utils.getTokensPropType)('ExpandCollapseControl'),
130
+ variant: _utils.variantProp.propType,
103
131
 
104
132
  /**
105
133
  * ExpandCollapseControl's children are the content within the button that opens or closes this panel. May
106
134
  * accept a render function that recieves the control state: { pressed, hover, focus, expanded }
107
135
  */
108
- children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
136
+ children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
109
137
 
110
138
  /**
111
139
  * Whether the linked ExpandCollapsePanel is opened or closed. Allows themes to set `expanded` styles.
112
140
  */
113
- isExpanded: PropTypes.bool,
141
+ isExpanded: _propTypes.default.bool,
114
142
 
115
143
  /**
116
144
  * Function called when the ExpandCollapse is pressed.
117
145
  */
118
- onPress: PropTypes.func.isRequired
146
+ onPress: _propTypes.default.func.isRequired
119
147
  };
120
- export default ExpandCollapseControl;
148
+ var _default = ExpandCollapseControl;
149
+ exports.default = _default;
@@ -1,8 +1,27 @@
1
- import React from 'react';
2
- import { View } from 'react-native';
3
- import PropTypes from 'prop-types';
4
- import { useThemeTokens } from '../ThemeProvider';
5
- import { getTokensPropType, variantProp, useMultipleInputValues } from '../utils';
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var _react = _interopRequireWildcard(require("react"));
9
+
10
+ var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
11
+
12
+ var _propTypes = _interopRequireDefault(require("prop-types"));
13
+
14
+ var _ThemeProvider = require("../ThemeProvider");
15
+
16
+ var _utils = require("../utils");
17
+
18
+ var _jsxRuntime = require("react/jsx-runtime");
19
+
20
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
+
22
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
23
+
24
+ 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; }
6
25
 
7
26
  function selectBorderStyles(tokens) {
8
27
  return {
@@ -20,7 +39,7 @@ function selectBorderStyles(tokens) {
20
39
  */
21
40
 
22
41
 
23
- const ExpandCollapse = ({
42
+ const ExpandCollapse = /*#__PURE__*/(0, _react.forwardRef)(({
24
43
  children,
25
44
  tokens,
26
45
  variant,
@@ -28,61 +47,64 @@ const ExpandCollapse = ({
28
47
  open,
29
48
  initialOpen,
30
49
  onChange
31
- }) => {
50
+ }, ref) => {
32
51
  const {
33
52
  currentValues: openIds,
34
53
  toggleOneValue: onToggle,
35
54
  resetValues,
36
55
  setValues,
37
56
  unsetValues
38
- } = useMultipleInputValues({
57
+ } = (0, _utils.useMultipleInputValues)({
39
58
  maxValues: maxOpen,
40
59
  values: open,
41
60
  initialValues: initialOpen,
42
61
  onChange
43
62
  });
44
- const themeTokens = useThemeTokens('ExpandCollapse', tokens, variant);
45
- return /*#__PURE__*/React.createElement(View, {
46
- style: selectBorderStyles(themeTokens)
47
- }, typeof children === 'function' ? children({
48
- openIds,
49
- onToggle,
50
- resetValues,
51
- setValues,
52
- unsetValues
53
- }) : children);
54
- };
55
-
63
+ const themeTokens = (0, _ThemeProvider.useThemeTokens)('ExpandCollapse', tokens, variant);
64
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
65
+ ref: ref,
66
+ style: selectBorderStyles(themeTokens),
67
+ children: typeof children === 'function' ? children({
68
+ openIds,
69
+ onToggle,
70
+ resetValues,
71
+ setValues,
72
+ unsetValues
73
+ }) : children
74
+ });
75
+ });
76
+ ExpandCollapse.displayName = 'ExpandCollapse';
56
77
  ExpandCollapse.propTypes = {
57
- variant: variantProp.propType,
58
- tokens: getTokensPropType('ExpandCollapse'),
78
+ variant: _utils.variantProp.propType,
79
+ tokens: (0, _utils.getTokensPropType)('ExpandCollapse'),
59
80
 
60
81
  /**
61
82
  * ExpandCollapse usually takes a render function to which it passes an object with properties
62
83
  * { openIds, onToggle, resetValues, setValues, unsetValues }. openIds (array of ids) and
63
84
  * onToggle (function) will usually be passed to `<ExpandCollapse.Panel>`
64
85
  */
65
- children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
86
+ children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]).isRequired,
66
87
 
67
88
  /**
68
89
  * If set, enforces a specific maximum number of open items, closing already-open items when new
69
90
  * items are opened. By default, any number of items may be open at once.
70
91
  */
71
- maxOpen: PropTypes.number,
92
+ maxOpen: _propTypes.default.number,
72
93
 
73
94
  /**
74
95
  * If passed, the item or items that are expanded will be controlled by a parent component
75
96
  */
76
- open: PropTypes.arrayOf(PropTypes.string),
97
+ open: _propTypes.default.arrayOf(_propTypes.default.string),
77
98
 
78
99
  /**
79
100
  * Function called when which panels are currently open changes. Necessary if `open` is passed.
80
101
  */
81
- onChange: PropTypes.func,
102
+ onChange: _propTypes.default.func,
82
103
 
83
104
  /**
84
105
  * Allows items with specified ids to be open by default on first load. Should not be used with `open`.
85
106
  */
86
- initialOpen: PropTypes.arrayOf(PropTypes.string)
107
+ initialOpen: _propTypes.default.arrayOf(_propTypes.default.string)
87
108
  };
88
- export default ExpandCollapse;
109
+ var _default = ExpandCollapse;
110
+ exports.default = _default;