@telus-uds/components-base 0.0.2-prerelease.4 → 0.0.2-prerelease.8

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 (447) hide show
  1. package/.ultra.cache.json +1 -0
  2. package/CHANGELOG.md +76 -0
  3. package/__fixtures__/Accessible.js +33 -0
  4. package/__fixtures__/Accessible.native.js +32 -0
  5. package/__fixtures__/testTheme.js +940 -54
  6. package/__tests__/ActivityIndicator/ActivityIndicator.test.jsx +1 -1
  7. package/__tests__/Button/ButtonBase.test.jsx +3 -32
  8. package/__tests__/Button/ButtonGroup.test.jsx +2 -2
  9. package/__tests__/Checkbox/Checkbox.test.jsx +94 -0
  10. package/__tests__/Checkbox/CheckboxGroup.test.jsx +247 -0
  11. package/__tests__/Divider/Divider.test.jsx +26 -5
  12. package/__tests__/Feedback/Feedback.test.jsx +42 -0
  13. package/__tests__/Icon/Icon.test.jsx +3 -3
  14. package/__tests__/InputSupports/InputSupports.test.jsx +50 -0
  15. package/__tests__/List/List.test.jsx +60 -0
  16. package/__tests__/Modal/Modal.test.jsx +47 -0
  17. package/__tests__/Notification/Notification.test.jsx +20 -0
  18. package/__tests__/Pagination/Pagination.test.jsx +2 -2
  19. package/__tests__/Progress/Progress.test.jsx +79 -0
  20. package/__tests__/Radio/Radio.test.jsx +87 -0
  21. package/__tests__/Radio/RadioGroup.test.jsx +221 -0
  22. package/__tests__/RadioCard/RadioCard.test.jsx +87 -0
  23. package/__tests__/RadioCard/RadioCardGroup.test.jsx +247 -0
  24. package/__tests__/Search/Search.test.jsx +72 -0
  25. package/__tests__/Select/Select.test.jsx +93 -0
  26. package/__tests__/Skeleton/Skeleton.test.jsx +61 -0
  27. package/__tests__/Spacer/Spacer.test.jsx +63 -0
  28. package/__tests__/StackView/StackView.test.jsx +216 -0
  29. package/__tests__/StackView/StackWrap.test.jsx +47 -0
  30. package/__tests__/StackView/getStackedContent.test.jsx +295 -0
  31. package/__tests__/StepTracker/StepTracker.test.jsx +94 -0
  32. package/__tests__/Tabs/Tabs.test.jsx +200 -0
  33. package/__tests__/Tags/Tags.test.jsx +328 -0
  34. package/__tests__/TextInput/TextArea.test.jsx +34 -0
  35. package/__tests__/TextInput/TextInputBase.test.jsx +120 -0
  36. package/__tests__/Tooltip/Tooltip.test.jsx +65 -0
  37. package/__tests__/Tooltip/getTooltipPosition.test.js +79 -0
  38. package/__tests__/utils/input.test.js +58 -0
  39. package/__tests__/utils/useCopy.test.js +42 -0
  40. package/__tests__/utils/useResponsiveProp.test.jsx +202 -0
  41. package/__tests__/utils/{spacing.test.jsx → useSpacingScale.test.jsx} +1 -1
  42. package/__tests__/utils/useUniqueId.test.js +31 -0
  43. package/babel.config.js +20 -0
  44. package/jest.config.js +8 -2
  45. package/lib/A11yInfoProvider/index.js +54 -26
  46. package/lib/A11yText/index.js +37 -14
  47. package/lib/ActivityIndicator/Spinner.js +78 -0
  48. package/lib/ActivityIndicator/Spinner.native.js +121 -87
  49. package/lib/ActivityIndicator/index.js +28 -12
  50. package/lib/ActivityIndicator/shared.js +27 -12
  51. package/lib/BaseProvider/index.js +34 -11
  52. package/lib/Box/Box.js +56 -28
  53. package/lib/Box/index.js +13 -2
  54. package/lib/Button/Button.js +38 -10
  55. package/lib/Button/ButtonBase.js +120 -109
  56. package/lib/Button/ButtonGroup.js +98 -99
  57. package/lib/Button/ButtonLink.js +41 -13
  58. package/lib/Button/index.js +31 -4
  59. package/lib/Button/propTypes.js +32 -9
  60. package/lib/Card/Card.js +36 -41
  61. package/lib/Card/CardBase.js +78 -0
  62. package/lib/Card/PressableCardBase.js +137 -0
  63. package/lib/Card/index.js +40 -2
  64. package/lib/Checkbox/Checkbox.js +344 -0
  65. package/lib/Checkbox/CheckboxGroup.js +231 -0
  66. package/lib/Checkbox/CheckboxInput.js +74 -0
  67. package/lib/Checkbox/CheckboxInput.native.js +14 -0
  68. package/lib/Checkbox/index.js +21 -0
  69. package/lib/Divider/Divider.js +81 -17
  70. package/lib/Divider/index.js +13 -2
  71. package/lib/ExpandCollapse/Accordion.js +20 -7
  72. package/lib/ExpandCollapse/Control.js +50 -27
  73. package/lib/ExpandCollapse/ExpandCollapse.js +41 -24
  74. package/lib/ExpandCollapse/Panel.js +75 -37
  75. package/lib/ExpandCollapse/index.js +25 -7
  76. package/lib/Feedback/Feedback.js +161 -0
  77. package/lib/Feedback/index.js +13 -0
  78. package/lib/Fieldset/Fieldset.js +160 -0
  79. package/lib/Fieldset/FieldsetContainer.js +41 -0
  80. package/lib/Fieldset/FieldsetContainer.native.js +33 -0
  81. package/lib/Fieldset/Legend.js +33 -0
  82. package/lib/Fieldset/Legend.native.js +43 -0
  83. package/lib/Fieldset/cssReset.js +21 -0
  84. package/lib/Fieldset/index.js +13 -0
  85. package/lib/FlexGrid/Col/Col.js +67 -38
  86. package/lib/FlexGrid/Col/index.js +13 -2
  87. package/lib/FlexGrid/FlexGrid.js +70 -45
  88. package/lib/FlexGrid/Row/Row.js +48 -27
  89. package/lib/FlexGrid/Row/index.js +13 -2
  90. package/lib/FlexGrid/helpers/index.js +9 -1
  91. package/lib/FlexGrid/index.js +13 -2
  92. package/lib/FlexGrid/providers/GutterContext.js +15 -3
  93. package/lib/Icon/Icon.js +52 -47
  94. package/lib/Icon/IconText.js +100 -0
  95. package/lib/Icon/index.js +31 -3
  96. package/lib/InputLabel/InputLabel.js +122 -0
  97. package/lib/InputLabel/LabelContent.js +31 -0
  98. package/lib/InputLabel/LabelContent.native.js +16 -0
  99. package/lib/InputLabel/index.js +13 -0
  100. package/lib/InputSupports/InputSupports.js +104 -0
  101. package/lib/InputSupports/index.js +13 -0
  102. package/lib/InputSupports/propTypes.js +66 -0
  103. package/lib/InputSupports/useInputSupports.js +41 -0
  104. package/lib/Link/ChevronLink.js +57 -15
  105. package/lib/Link/InlinePressable.js +50 -0
  106. package/lib/Link/InlinePressable.native.js +101 -0
  107. package/lib/Link/Link.js +30 -13
  108. package/lib/Link/LinkBase.js +121 -146
  109. package/lib/Link/TextButton.js +47 -17
  110. package/lib/Link/index.js +39 -4
  111. package/lib/List/List.js +80 -0
  112. package/lib/List/ListItem.js +237 -0
  113. package/lib/List/index.js +13 -0
  114. package/lib/Modal/Modal.js +226 -0
  115. package/lib/Modal/dictionary.js +16 -0
  116. package/lib/Modal/index.js +13 -0
  117. package/lib/Notification/Notification.js +200 -0
  118. package/lib/Notification/dictionary.js +15 -0
  119. package/lib/Notification/index.js +13 -0
  120. package/lib/Pagination/PageButton.js +45 -46
  121. package/lib/Pagination/Pagination.js +70 -40
  122. package/lib/Pagination/SideButton.js +74 -58
  123. package/lib/Pagination/dictionary.js +9 -2
  124. package/lib/Pagination/index.js +13 -2
  125. package/lib/Pagination/usePagination.js +12 -2
  126. package/lib/Progress/Progress.js +99 -0
  127. package/lib/Progress/ProgressBar.js +146 -0
  128. package/lib/Progress/ProgressBarBackground.js +57 -0
  129. package/lib/Progress/index.js +16 -0
  130. package/lib/Radio/Radio.js +292 -0
  131. package/lib/Radio/RadioButton.js +141 -0
  132. package/lib/Radio/RadioGroup.js +233 -0
  133. package/lib/Radio/RadioInput.js +76 -0
  134. package/lib/Radio/RadioInput.native.js +14 -0
  135. package/lib/Radio/index.js +21 -0
  136. package/lib/RadioCard/RadioCard.js +240 -0
  137. package/lib/RadioCard/RadioCardGroup.js +251 -0
  138. package/lib/RadioCard/index.js +21 -0
  139. package/lib/Search/Search.js +243 -0
  140. package/lib/Search/dictionary.js +19 -0
  141. package/lib/Search/index.js +13 -0
  142. package/lib/Select/Group.js +33 -0
  143. package/lib/Select/Group.native.js +25 -0
  144. package/lib/Select/Item.js +29 -0
  145. package/lib/Select/Item.native.js +19 -0
  146. package/lib/Select/Picker.js +79 -0
  147. package/lib/Select/Picker.native.js +115 -0
  148. package/lib/Select/Select.js +300 -0
  149. package/lib/Select/index.js +19 -0
  150. package/lib/SideNav/Item.js +54 -33
  151. package/lib/SideNav/ItemContent.js +41 -15
  152. package/lib/SideNav/ItemsGroup.js +46 -27
  153. package/lib/SideNav/SideNav.js +92 -69
  154. package/lib/SideNav/index.js +15 -1
  155. package/lib/Skeleton/Skeleton.js +137 -0
  156. package/lib/Skeleton/index.js +13 -0
  157. package/lib/Skeleton/skeleton.constant.js +12 -0
  158. package/lib/Skeleton/skeletonWebAnimation.js +27 -0
  159. package/lib/Skeleton/useSkeletonNativeAnimation.js +37 -0
  160. package/lib/Spacer/Spacer.js +117 -0
  161. package/lib/Spacer/index.js +13 -0
  162. package/lib/StackView/StackView.js +129 -0
  163. package/lib/StackView/StackWrap.js +55 -0
  164. package/lib/StackView/StackWrap.native.js +14 -0
  165. package/lib/StackView/StackWrapBox.js +112 -0
  166. package/lib/StackView/StackWrapGap.js +71 -0
  167. package/lib/StackView/common.js +45 -0
  168. package/lib/StackView/getStackedContent.js +141 -0
  169. package/lib/StackView/index.js +29 -0
  170. package/lib/StepTracker/Step.js +245 -0
  171. package/lib/StepTracker/StepTracker.js +197 -0
  172. package/lib/StepTracker/dictionary.js +17 -0
  173. package/lib/StepTracker/index.js +13 -0
  174. package/lib/Tabs/HorizontalScroll.js +199 -0
  175. package/lib/Tabs/ScrollViewEnd.js +66 -0
  176. package/lib/Tabs/ScrollViewEnd.native.js +41 -0
  177. package/lib/Tabs/Tabs.js +117 -0
  178. package/lib/Tabs/TabsItem.js +234 -0
  179. package/lib/Tabs/TabsScrollButton.js +121 -0
  180. package/lib/Tabs/dictionary.js +18 -0
  181. package/lib/Tabs/index.js +13 -0
  182. package/lib/Tabs/itemPositions.js +128 -0
  183. package/lib/Tags/Tags.js +250 -0
  184. package/lib/Tags/index.js +13 -0
  185. package/lib/TextInput/TextArea.js +109 -0
  186. package/lib/TextInput/TextInput.js +75 -0
  187. package/lib/TextInput/TextInputBase.js +252 -0
  188. package/lib/TextInput/index.js +23 -0
  189. package/lib/TextInput/propTypes.js +42 -0
  190. package/lib/ThemeProvider/ThemeProvider.js +38 -14
  191. package/lib/ThemeProvider/index.js +61 -6
  192. package/lib/ThemeProvider/useSetTheme.js +14 -5
  193. package/lib/ThemeProvider/useTheme.js +13 -4
  194. package/lib/ThemeProvider/useThemeTokens.js +86 -19
  195. package/lib/ThemeProvider/utils/index.js +31 -2
  196. package/lib/ThemeProvider/utils/styles.js +52 -16
  197. package/lib/ThemeProvider/utils/theme-tokens.js +94 -16
  198. package/lib/ToggleSwitch/ToggleSwitch.js +76 -52
  199. package/lib/ToggleSwitch/index.js +13 -2
  200. package/lib/Tooltip/Backdrop.js +56 -0
  201. package/lib/Tooltip/Backdrop.native.js +59 -0
  202. package/lib/Tooltip/Tooltip.js +357 -0
  203. package/lib/Tooltip/dictionary.js +15 -0
  204. package/lib/Tooltip/getTooltipPosition.js +172 -0
  205. package/lib/Tooltip/index.js +13 -0
  206. package/lib/TooltipButton/TooltipButton.js +83 -0
  207. package/lib/TooltipButton/index.js +13 -0
  208. package/lib/Typography/Typography.js +58 -47
  209. package/lib/Typography/index.js +13 -2
  210. package/lib/ViewportProvider/ViewportProvider.js +46 -0
  211. package/lib/ViewportProvider/index.js +22 -38
  212. package/lib/ViewportProvider/useViewport.js +15 -0
  213. package/lib/ViewportProvider/useViewportListener.js +57 -0
  214. package/lib/index.js +509 -19
  215. package/lib/utils/a11y/index.js +18 -0
  216. package/lib/utils/a11y/textSize.js +49 -0
  217. package/lib/utils/animation/index.js +15 -2
  218. package/lib/utils/animation/useVerticalExpandAnimation.js +28 -11
  219. package/lib/utils/children.js +87 -0
  220. package/lib/utils/index.js +163 -4
  221. package/lib/utils/info/index.js +19 -0
  222. package/lib/utils/info/platform/index.js +23 -0
  223. package/lib/utils/info/platform/platform.android.js +8 -0
  224. package/lib/utils/info/platform/platform.ios.js +8 -0
  225. package/lib/utils/info/platform/platform.js +8 -0
  226. package/lib/utils/info/platform/platform.native.js +11 -0
  227. package/lib/utils/info/versions.js +16 -0
  228. package/lib/utils/input.js +54 -34
  229. package/lib/utils/pressability.js +120 -0
  230. package/lib/utils/propTypes.js +269 -108
  231. package/lib/utils/useCopy.js +51 -0
  232. package/lib/utils/useHash.js +48 -0
  233. package/lib/utils/useHash.native.js +15 -0
  234. package/lib/utils/useResponsiveProp.js +59 -0
  235. package/lib/utils/{spacing/useSpacingScale.js → useSpacingScale.js} +45 -12
  236. package/lib/utils/useUniqueId.js +21 -0
  237. package/package.json +11 -8
  238. package/release-context.json +4 -4
  239. package/src/ActivityIndicator/{Spinner.web.jsx → Spinner.jsx} +0 -0
  240. package/src/Box/Box.jsx +13 -4
  241. package/src/Button/Button.jsx +9 -5
  242. package/src/Button/ButtonBase.jsx +74 -86
  243. package/src/Button/ButtonGroup.jsx +24 -41
  244. package/src/Button/ButtonLink.jsx +14 -4
  245. package/src/Button/propTypes.js +12 -2
  246. package/src/Card/Card.jsx +4 -30
  247. package/src/Card/CardBase.jsx +57 -0
  248. package/src/Card/PressableCardBase.jsx +112 -0
  249. package/src/Card/index.js +3 -0
  250. package/src/Checkbox/Checkbox.jsx +274 -0
  251. package/src/Checkbox/CheckboxGroup.jsx +196 -0
  252. package/src/Checkbox/CheckboxInput.jsx +55 -0
  253. package/src/Checkbox/CheckboxInput.native.jsx +6 -0
  254. package/src/Checkbox/index.js +5 -0
  255. package/src/Divider/Divider.jsx +38 -3
  256. package/src/ExpandCollapse/Control.jsx +1 -1
  257. package/src/Feedback/Feedback.jsx +108 -0
  258. package/src/Feedback/index.js +3 -0
  259. package/src/Fieldset/Fieldset.jsx +129 -0
  260. package/src/Fieldset/FieldsetContainer.jsx +22 -0
  261. package/src/Fieldset/FieldsetContainer.native.jsx +16 -0
  262. package/src/Fieldset/Legend.jsx +16 -0
  263. package/src/Fieldset/Legend.native.jsx +22 -0
  264. package/src/Fieldset/cssReset.js +14 -0
  265. package/src/Fieldset/index.js +3 -0
  266. package/src/Icon/Icon.jsx +23 -27
  267. package/src/Icon/IconText.jsx +63 -0
  268. package/src/Icon/index.js +3 -2
  269. package/src/InputLabel/InputLabel.jsx +106 -0
  270. package/src/InputLabel/LabelContent.jsx +13 -0
  271. package/src/InputLabel/LabelContent.native.jsx +6 -0
  272. package/src/InputLabel/index.js +3 -0
  273. package/src/InputSupports/InputSupports.jsx +75 -0
  274. package/src/InputSupports/index.js +3 -0
  275. package/src/InputSupports/propTypes.js +44 -0
  276. package/src/InputSupports/useInputSupports.js +30 -0
  277. package/src/Link/ChevronLink.jsx +28 -7
  278. package/src/Link/InlinePressable.jsx +37 -0
  279. package/src/Link/InlinePressable.native.jsx +73 -0
  280. package/src/Link/Link.jsx +17 -13
  281. package/src/Link/LinkBase.jsx +71 -146
  282. package/src/Link/TextButton.jsx +25 -11
  283. package/src/Link/index.js +2 -1
  284. package/src/List/List.jsx +47 -0
  285. package/src/List/ListItem.jsx +187 -0
  286. package/src/List/index.js +3 -0
  287. package/src/Modal/Modal.jsx +185 -0
  288. package/src/Modal/dictionary.js +9 -0
  289. package/src/Modal/index.js +3 -0
  290. package/src/Notification/Notification.jsx +149 -0
  291. package/src/Notification/dictionary.js +8 -0
  292. package/src/Notification/index.js +3 -0
  293. package/src/Pagination/PageButton.jsx +3 -17
  294. package/src/Pagination/SideButton.jsx +27 -38
  295. package/src/Progress/Progress.jsx +77 -0
  296. package/src/Progress/ProgressBar.jsx +110 -0
  297. package/src/Progress/ProgressBarBackground.jsx +34 -0
  298. package/src/Progress/index.js +6 -0
  299. package/src/Radio/Radio.jsx +233 -0
  300. package/src/Radio/RadioButton.jsx +131 -0
  301. package/src/Radio/RadioGroup.jsx +198 -0
  302. package/src/Radio/RadioInput.jsx +57 -0
  303. package/src/Radio/RadioInput.native.jsx +6 -0
  304. package/src/Radio/index.js +5 -0
  305. package/src/RadioCard/RadioCard.jsx +191 -0
  306. package/src/RadioCard/RadioCardGroup.jsx +211 -0
  307. package/src/RadioCard/index.js +5 -0
  308. package/src/Search/Search.jsx +204 -0
  309. package/src/Search/dictionary.js +12 -0
  310. package/src/Search/index.js +3 -0
  311. package/src/Select/Group.jsx +15 -0
  312. package/src/Select/Group.native.jsx +14 -0
  313. package/src/Select/Item.jsx +11 -0
  314. package/src/Select/Item.native.jsx +10 -0
  315. package/src/Select/Picker.jsx +67 -0
  316. package/src/Select/Picker.native.jsx +95 -0
  317. package/src/Select/Select.jsx +255 -0
  318. package/src/Select/index.js +8 -0
  319. package/src/SideNav/Item.jsx +2 -2
  320. package/src/Skeleton/Skeleton.jsx +98 -0
  321. package/src/Skeleton/index.js +3 -0
  322. package/src/Skeleton/skeleton.constant.js +3 -0
  323. package/src/Skeleton/skeletonWebAnimation.js +13 -0
  324. package/src/Skeleton/useSkeletonNativeAnimation.js +27 -0
  325. package/src/Spacer/Spacer.jsx +91 -0
  326. package/src/Spacer/index.js +3 -0
  327. package/src/StackView/StackView.jsx +111 -0
  328. package/src/StackView/StackWrap.jsx +41 -0
  329. package/src/StackView/StackWrap.native.jsx +4 -0
  330. package/src/StackView/StackWrapBox.jsx +94 -0
  331. package/src/StackView/StackWrapGap.jsx +49 -0
  332. package/src/StackView/common.jsx +28 -0
  333. package/src/StackView/getStackedContent.jsx +112 -0
  334. package/src/StackView/index.js +6 -0
  335. package/src/StepTracker/Step.jsx +202 -0
  336. package/src/StepTracker/StepTracker.jsx +163 -0
  337. package/src/StepTracker/dictionary.js +10 -0
  338. package/src/StepTracker/index.js +3 -0
  339. package/src/Tabs/HorizontalScroll.jsx +165 -0
  340. package/src/Tabs/ScrollViewEnd.jsx +53 -0
  341. package/src/Tabs/ScrollViewEnd.native.jsx +24 -0
  342. package/src/Tabs/Tabs.jsx +89 -0
  343. package/src/Tabs/TabsItem.jsx +204 -0
  344. package/src/Tabs/TabsScrollButton.jsx +100 -0
  345. package/src/Tabs/dictionary.js +11 -0
  346. package/src/Tabs/index.js +3 -0
  347. package/src/Tabs/itemPositions.js +101 -0
  348. package/src/Tags/Tags.jsx +207 -0
  349. package/src/Tags/index.js +3 -0
  350. package/src/TextInput/TextArea.jsx +78 -0
  351. package/src/TextInput/TextInput.jsx +52 -0
  352. package/src/TextInput/TextInputBase.jsx +210 -0
  353. package/src/TextInput/index.js +4 -0
  354. package/src/TextInput/propTypes.js +29 -0
  355. package/src/ThemeProvider/useThemeTokens.js +56 -5
  356. package/src/ThemeProvider/utils/styles.js +18 -5
  357. package/src/ThemeProvider/utils/theme-tokens.js +46 -5
  358. package/src/ToggleSwitch/ToggleSwitch.jsx +3 -4
  359. package/src/Tooltip/Backdrop.jsx +60 -0
  360. package/src/Tooltip/Backdrop.native.jsx +33 -0
  361. package/src/Tooltip/Tooltip.jsx +294 -0
  362. package/src/Tooltip/dictionary.js +8 -0
  363. package/src/Tooltip/getTooltipPosition.js +161 -0
  364. package/src/Tooltip/index.js +3 -0
  365. package/src/TooltipButton/TooltipButton.jsx +49 -0
  366. package/src/TooltipButton/index.js +3 -0
  367. package/src/Typography/Typography.jsx +10 -24
  368. package/src/ViewportProvider/ViewportProvider.jsx +21 -0
  369. package/src/ViewportProvider/index.jsx +2 -41
  370. package/src/ViewportProvider/useViewport.js +5 -0
  371. package/src/ViewportProvider/useViewportListener.js +43 -0
  372. package/src/index.js +34 -2
  373. package/src/utils/a11y/index.js +1 -0
  374. package/src/utils/a11y/textSize.js +30 -0
  375. package/src/utils/children.jsx +66 -0
  376. package/src/utils/index.js +11 -1
  377. package/src/utils/info/index.js +8 -0
  378. package/src/utils/info/platform/index.js +11 -0
  379. package/src/utils/info/platform/platform.android.js +1 -0
  380. package/src/utils/info/platform/platform.ios.js +1 -0
  381. package/src/utils/info/platform/platform.js +1 -0
  382. package/src/utils/info/platform/platform.native.js +4 -0
  383. package/src/utils/info/versions.js +6 -0
  384. package/src/utils/input.js +22 -13
  385. package/src/utils/pressability.js +96 -0
  386. package/src/utils/propTypes.js +195 -47
  387. package/src/utils/useCopy.js +39 -0
  388. package/src/utils/useHash.js +34 -0
  389. package/src/utils/useHash.native.js +6 -0
  390. package/src/utils/useResponsiveProp.js +50 -0
  391. package/src/utils/{spacing/useSpacingScale.js → useSpacingScale.js} +25 -10
  392. package/src/utils/useUniqueId.js +14 -0
  393. package/stories/A11yText/A11yText.stories.jsx +15 -13
  394. package/stories/ActivityIndicator/ActivityIndicator.stories.jsx +11 -2
  395. package/stories/Box/Box.stories.jsx +29 -2
  396. package/stories/Button/Button.stories.jsx +21 -20
  397. package/stories/Button/ButtonGroup.stories.jsx +2 -1
  398. package/stories/Button/ButtonLink.stories.jsx +6 -4
  399. package/stories/Card/Card.stories.jsx +13 -1
  400. package/stories/Checkbox/Checkbox.stories.jsx +94 -0
  401. package/stories/Divider/Divider.stories.jsx +26 -2
  402. package/stories/ExpandCollapse/ExpandCollapse.stories.jsx +74 -79
  403. package/stories/Feedback/Feedback.stories.jsx +96 -0
  404. package/stories/FlexGrid/01 FlexGrid.stories.jsx +20 -7
  405. package/stories/Icon/Icon.stories.jsx +15 -6
  406. package/stories/InputLabel/InputLabel.stories.jsx +42 -0
  407. package/stories/Link/ChevronLink.stories.jsx +20 -4
  408. package/stories/Link/Link.stories.jsx +39 -3
  409. package/stories/Link/TextButton.stories.jsx +24 -2
  410. package/stories/List/List.stories.jsx +117 -0
  411. package/stories/Modal/Modal.stories.jsx +29 -0
  412. package/stories/Notification/Notification.stories.jsx +82 -0
  413. package/stories/Pagination/Pagination.stories.jsx +28 -14
  414. package/stories/Progress/Progress.stories.jsx +93 -0
  415. package/stories/Radio/Radio.stories.jsx +100 -0
  416. package/stories/RadioCard/RadioCard.stories.jsx +98 -0
  417. package/stories/Search/Search.stories.jsx +16 -0
  418. package/stories/Select/Select.stories.jsx +55 -0
  419. package/stories/SideNav/SideNav.stories.jsx +17 -2
  420. package/stories/Skeleton/Skeleton.stories.jsx +36 -0
  421. package/stories/Spacer/Spacer.stories.jsx +38 -0
  422. package/stories/StackView/StackView.stories.jsx +75 -0
  423. package/stories/StackView/StackWrap.stories.jsx +64 -0
  424. package/stories/StepTracker/StepTracker.stories.jsx +71 -0
  425. package/stories/Tabs/Tabs.stories.jsx +97 -0
  426. package/stories/Tags/Tags.stories.jsx +69 -0
  427. package/stories/TextInput/TextArea.stories.jsx +100 -0
  428. package/stories/TextInput/TextInput.stories.jsx +103 -0
  429. package/stories/ToggleSwitch/ToggleSwitch.stories.jsx +16 -3
  430. package/stories/Tooltip/Tooltip.stories.jsx +81 -0
  431. package/stories/TooltipButton/TooltipButton.stories.jsx +11 -0
  432. package/stories/Typography/Typography.stories.jsx +12 -3
  433. package/stories/{platform-supports.web.jsx → platform-supports.jsx} +1 -1
  434. package/stories/supports.jsx +110 -14
  435. package/__fixtures__/accessible.icon.svg +0 -6
  436. package/babel.config.json +0 -8
  437. package/lib/ActivityIndicator/Spinner.web.js +0 -55
  438. package/lib/Pagination/useCopy.js +0 -10
  439. package/lib/config/svgr-icons-web.js +0 -9
  440. package/lib/config/svgr-icons.js +0 -52
  441. package/lib/utils/spacing/index.js +0 -2
  442. package/lib/utils/spacing/utils.js +0 -32
  443. package/src/Pagination/useCopy.js +0 -7
  444. package/src/config/svgr-icons-web.js +0 -11
  445. package/src/config/svgr-icons.js +0 -46
  446. package/src/utils/spacing/index.js +0 -3
  447. package/src/utils/spacing/utils.js +0 -28
@@ -0,0 +1,87 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.wrapStringsInText = exports.unpackFragment = void 0;
7
+
8
+ var _react = _interopRequireWildcard(require("react"));
9
+
10
+ var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
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
+ * Unpacks top-level fragments, so that common compositional patterns such as the following examples
22
+ * can be iterated as flat siblings (as if they were `<Child1 /><Child2 /><Child3 />`):
23
+ *
24
+ * - Setting `children` as a property wrapped in a fragment:
25
+ *
26
+ * ```jsx
27
+ * args.children = <><Child1 /><Child2 /><Child3 /></>
28
+ * ```
29
+ *
30
+ * - Defining `children` as a variable wrapped in a fragment:
31
+ *
32
+ * ```jsx
33
+ * const content = <><Child1 /><Child2 /><Child3 /></>
34
+ * if (someCondition) return <SomeWrapper>{content}</SomeWrapper>
35
+ * ```
36
+ *
37
+ * - Using fragments at the top level of a JSX block for conditional rendering:
38
+ *
39
+ * ```jsx
40
+ * <Child1 />
41
+ * {someCondition && (
42
+ * <>
43
+ * <Child2 />
44
+ * <Child3 />
45
+ * </>
46
+ * )}
47
+ * ```
48
+ *
49
+ * @param {ReactChildren} child
50
+ * @returns {ReactChildren}
51
+ */
52
+ const unpackFragment = child => {
53
+ var _child$props;
54
+
55
+ // If this level is a set of top-level siblings rather than one child, check each in turn
56
+ if (_react.Children.count(child) > 1) return _react.Children.map(child, unpackFragment); // When a fragment is found, unpack its children to the top level and check them
57
+
58
+ if ((child === null || child === void 0 ? void 0 : child.type) === _react.Fragment) return unpackFragment((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children); // Stop unpacking as soon as any non-fragment child is found
59
+
60
+ return child;
61
+ };
62
+ /**
63
+ * React Native on Native crashes if text content is rendered outside `<Text>`, and on web,
64
+ * text style inheritance isn't as expected.
65
+ *
66
+ * Call this function on children that may contain text (strings or numbers) at the top level,
67
+ * and any that are found will be wrapped in a React Native `<Text>` element with supplied props.
68
+ *
69
+ * Note that this does not wrap strings that are nested children of the top level children:
70
+ * `wrapStringsInText(<View>Some text</View>)` will not wrap the inner text and will still crash,
71
+ * but `wrapStringsInText(<>{someString}{anotherString}</>)` will wrap the strings in the fragment.
72
+ *
73
+ * @param {ReactChildren} children
74
+ * @param {TextProps} props
75
+ * @returns {ReactChildren}
76
+ */
77
+
78
+
79
+ exports.unpackFragment = unpackFragment;
80
+
81
+ const wrapStringsInText = (children, props = {}) => {
82
+ return _react.Children.map(unpackFragment(children), child => typeof child === 'string' || typeof child === 'number' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, { ...props,
83
+ children: child
84
+ }) : child);
85
+ };
86
+
87
+ exports.wrapStringsInText = wrapStringsInText;
@@ -1,4 +1,163 @@
1
- export * from './animation';
2
- export * from './input';
3
- export * from './propTypes';
4
- export * from './spacing';
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ var _exportNames = {
7
+ info: true,
8
+ useCopy: true,
9
+ useHash: true,
10
+ useSpacingScale: true,
11
+ useResponsiveProp: true,
12
+ useUniqueId: true
13
+ };
14
+ Object.defineProperty(exports, "info", {
15
+ enumerable: true,
16
+ get: function () {
17
+ return _info.default;
18
+ }
19
+ });
20
+ Object.defineProperty(exports, "useCopy", {
21
+ enumerable: true,
22
+ get: function () {
23
+ return _useCopy.default;
24
+ }
25
+ });
26
+ Object.defineProperty(exports, "useHash", {
27
+ enumerable: true,
28
+ get: function () {
29
+ return _useHash.default;
30
+ }
31
+ });
32
+ Object.defineProperty(exports, "useSpacingScale", {
33
+ enumerable: true,
34
+ get: function () {
35
+ return _useSpacingScale.default;
36
+ }
37
+ });
38
+ Object.defineProperty(exports, "useResponsiveProp", {
39
+ enumerable: true,
40
+ get: function () {
41
+ return _useResponsiveProp.default;
42
+ }
43
+ });
44
+ Object.defineProperty(exports, "useUniqueId", {
45
+ enumerable: true,
46
+ get: function () {
47
+ return _useUniqueId.default;
48
+ }
49
+ });
50
+
51
+ var _a11y = require("./a11y");
52
+
53
+ Object.keys(_a11y).forEach(function (key) {
54
+ if (key === "default" || key === "__esModule") return;
55
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
56
+ if (key in exports && exports[key] === _a11y[key]) return;
57
+ Object.defineProperty(exports, key, {
58
+ enumerable: true,
59
+ get: function () {
60
+ return _a11y[key];
61
+ }
62
+ });
63
+ });
64
+
65
+ var _animation = require("./animation");
66
+
67
+ Object.keys(_animation).forEach(function (key) {
68
+ if (key === "default" || key === "__esModule") return;
69
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
70
+ if (key in exports && exports[key] === _animation[key]) return;
71
+ Object.defineProperty(exports, key, {
72
+ enumerable: true,
73
+ get: function () {
74
+ return _animation[key];
75
+ }
76
+ });
77
+ });
78
+
79
+ var _children = require("./children");
80
+
81
+ Object.keys(_children).forEach(function (key) {
82
+ if (key === "default" || key === "__esModule") return;
83
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
84
+ if (key in exports && exports[key] === _children[key]) return;
85
+ Object.defineProperty(exports, key, {
86
+ enumerable: true,
87
+ get: function () {
88
+ return _children[key];
89
+ }
90
+ });
91
+ });
92
+
93
+ var _input = require("./input");
94
+
95
+ Object.keys(_input).forEach(function (key) {
96
+ if (key === "default" || key === "__esModule") return;
97
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
98
+ if (key in exports && exports[key] === _input[key]) return;
99
+ Object.defineProperty(exports, key, {
100
+ enumerable: true,
101
+ get: function () {
102
+ return _input[key];
103
+ }
104
+ });
105
+ });
106
+
107
+ var _pressability = require("./pressability");
108
+
109
+ Object.keys(_pressability).forEach(function (key) {
110
+ if (key === "default" || key === "__esModule") return;
111
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
112
+ if (key in exports && exports[key] === _pressability[key]) return;
113
+ Object.defineProperty(exports, key, {
114
+ enumerable: true,
115
+ get: function () {
116
+ return _pressability[key];
117
+ }
118
+ });
119
+ });
120
+
121
+ var _propTypes = require("./propTypes");
122
+
123
+ Object.keys(_propTypes).forEach(function (key) {
124
+ if (key === "default" || key === "__esModule") return;
125
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
126
+ if (key in exports && exports[key] === _propTypes[key]) return;
127
+ Object.defineProperty(exports, key, {
128
+ enumerable: true,
129
+ get: function () {
130
+ return _propTypes[key];
131
+ }
132
+ });
133
+ });
134
+
135
+ var _info = _interopRequireDefault(require("./info"));
136
+
137
+ var _useCopy = _interopRequireDefault(require("./useCopy"));
138
+
139
+ var _useHash = _interopRequireDefault(require("./useHash"));
140
+
141
+ var _useSpacingScale = _interopRequireDefault(require("./useSpacingScale"));
142
+
143
+ var _useResponsiveProp = _interopRequireWildcard(require("./useResponsiveProp"));
144
+
145
+ Object.keys(_useResponsiveProp).forEach(function (key) {
146
+ if (key === "default" || key === "__esModule") return;
147
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
148
+ if (key in exports && exports[key] === _useResponsiveProp[key]) return;
149
+ Object.defineProperty(exports, key, {
150
+ enumerable: true,
151
+ get: function () {
152
+ return _useResponsiveProp[key];
153
+ }
154
+ });
155
+ });
156
+
157
+ var _useUniqueId = _interopRequireDefault(require("./useUniqueId"));
158
+
159
+ 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); }
160
+
161
+ 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; }
162
+
163
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var _platform = _interopRequireDefault(require("./platform"));
9
+
10
+ var _versions = _interopRequireDefault(require("./versions"));
11
+
12
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
+
14
+ // export an object accessed like info.platform.OS, info.version.uds, etc
15
+ var _default = {
16
+ platform: _platform.default,
17
+ versions: _versions.default
18
+ };
19
+ exports.default = _default;
@@ -0,0 +1,23 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
9
+
10
+ var _platform = _interopRequireDefault(require("./platform"));
11
+
12
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
+
14
+ // Allows consuming libraries that might not have a direct dependency on
15
+ // React Native to check what the current platform is.
16
+ // Particularly useful for validating Jest config: it is possible for Jest to
17
+ // get configured such that Platform.OS returns a different mocked value to the
18
+ // OS being used to select files by platform suffix (e.g. .web, .native).
19
+ var _default = {
20
+ OS: _Platform.default.OS,
21
+ fileSuffix: _platform.default
22
+ };
23
+ exports.default = _default;
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _default = '.android';
8
+ exports.default = _default;
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _default = '.ios';
8
+ exports.default = _default;
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _default = '.web (default)';
8
+ exports.default = _default;
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ // This shouldn't ever be chosen, as the more specific '.ios' and '.android' are available.
8
+ // If this gets picked, either an unsupported React Native platform is being used somehow
9
+ // (e.g. a native Windows app), or there's a serious config problem somewhere.
10
+ var _default = '.native';
11
+ exports.default = _default;
@@ -0,0 +1,16 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var _package = _interopRequireDefault(require("../../../package.json"));
9
+
10
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
+
12
+ // Add more versions if they are useful e.g. theme schema version
13
+ var _default = {
14
+ uds: _package.default.version
15
+ };
16
+ exports.default = _default;
@@ -1,4 +1,12 @@
1
- import { useCallback, useState } from 'react';
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useMultipleInputValues = exports.useInputValue = void 0;
7
+
8
+ var _react = require("react");
9
+
2
10
  const pluralHooks = ['useMultipleInputValues'];
3
11
 
4
12
  const validateProps = ({
@@ -15,29 +23,23 @@ const validateProps = ({
15
23
  const usageError = error => {
16
24
  // Errors inside hooks in React Native get incomplete stack traces pointing at parent component only.
17
25
  // Help devs out by telling them exactly which hook threw the error as well as why.
18
- throw new Error(`${hookName} ${error}.
19
-
20
- Consumers of this hook must be one of:
21
- 1. An "uncontrolled" component responding directly to user actions, with an optional \`initialValue${s}\` but no \`value${s}\` prop,
22
- 2. A "controlled" component where an always-defined \`value${s}\` prop is managed by an \`onChange\` handler, with no \`initialValue${s}\`,
23
- 3. A "read-only" component, with \`readOnly\` prop set as \`true\`.
24
- `);
26
+ throw new Error("".concat(hookName, " ").concat(error, ".\n\nConsumers of this hook must be one of:\n1. An \"uncontrolled\" component responding directly to user actions, with an optional `initialValue").concat(s, "` but no `value").concat(s, "` prop,\n2. A \"controlled\" component where an always-defined `value").concat(s, "` prop is managed by an `onChange` handler, with no `initialValue").concat(s, "`,\n3. A \"read-only\" component, with `readOnly` prop set as `true`.\n"));
25
27
  };
26
28
 
27
29
  if (value && !onChange && !readOnly) {
28
- usageError(`has \`value${s}\` prop without \`onChange\` or \`readOnly\``);
30
+ usageError("has `value".concat(s, "` prop without `onChange` or `readOnly`"));
29
31
  }
30
32
 
31
33
  if (initialValue && value) {
32
- usageError(`has both \`initialValue${s}\` and \`value${s}\``);
34
+ usageError("has both `initialValue".concat(s, "` and `value").concat(s, "`"));
33
35
  }
34
36
 
35
37
  if (isControlled && !isCurrentlyControlled) {
36
- usageError(`stopped receiving \`value${s}\` from parent after delegating state management`);
38
+ usageError("stopped receiving `value".concat(s, "` from parent after delegating state management"));
37
39
  }
38
40
 
39
41
  if (!isControlled && isCurrentlyControlled) {
40
- usageError(`started receiving \`value${s}\` from parent after starting managing own state`);
42
+ usageError("started receiving `value".concat(s, "` from parent after starting managing own state"));
41
43
  }
42
44
  };
43
45
  /**
@@ -49,24 +51,27 @@ Consumers of this hook must be one of:
49
51
  * management tools such as Formik and React Hooks Form.
50
52
  *
51
53
  * @param {object} props
52
- * @param {any} [props.value] - for a controlled input, the active values as set by a parent
53
- * @param {any} [props.initialValue] - for an uncontrolled input, the default active values
54
+ * @param {string|number|null} [props.value] - for a controlled input, the active values as set by a parent
55
+ * @param {string|number} [props.initialValue] - for an uncontrolled input, the default active values
54
56
  * @param {function} [props.onChange] - function called when values change (required for controlled inputs)
55
57
  * @param {boolean} [props.readOnly] - if true, stops the input values from changing
56
58
  *
57
59
  * @param {string} hookName - optional, used for tailoring error messages
58
60
  *
61
+ * @typedef {(oldValue: string|number|null) => string|number|null} UpdaterFunction - `setValue` takes a value or
62
+ * a function returning a new value from the old value
59
63
  * @returns {{
60
- * currentValue: any
61
- * setValue: (value: any) => void
64
+ * currentValue: string|number|null
65
+ * setValue: (newValue: string|number|null|UpdaterFunction) => void
62
66
  * resetValue: () => void
67
+ * isControlled: bool
63
68
  * }}
64
69
  */
65
70
 
66
71
 
67
- export const useInputValue = (props = {}, hookName = 'useInputValue') => {
72
+ const useInputValue = (props = {}, hookName = 'useInputValue') => {
68
73
  const isCurrentlyControlled = props.value !== undefined;
69
- const [isControlled] = useState(isCurrentlyControlled);
74
+ const [isControlled] = (0, _react.useState)(isCurrentlyControlled);
70
75
  validateProps(props, {
71
76
  isControlled,
72
77
  isCurrentlyControlled
@@ -77,21 +82,29 @@ export const useInputValue = (props = {}, hookName = 'useInputValue') => {
77
82
  onChange,
78
83
  readOnly = false
79
84
  } = props;
80
- const [ownValue, setOwnValue] = useState(!isControlled && initialValue);
85
+ const [ownValue, setOwnValue] = (0, _react.useState)(!isControlled && initialValue);
81
86
  const currentValue = isControlled ? value : ownValue; // Store the first valid value, for resetting input to default. If behaviour like Formik's `enableReinitialize`
82
87
  // is needed, add useEffect calling a set fn if !deepEqual(initializedValues, initialValues)
83
88
 
84
- const [initializedValue] = useState(currentValue);
85
- const setValue = useCallback(newValue => {
89
+ const valueRef = (0, _react.useRef)({
90
+ initial: currentValue,
91
+ value: currentValue
92
+ }); // Make current value accessible inside useCallback without rememoizing every time the value changes
93
+
94
+ valueRef.current.value = currentValue;
95
+ const setValue = (0, _react.useCallback)(arg => {
86
96
  if (readOnly) return;
87
- if (onChange) onChange(newValue);
97
+ const newValue = typeof arg === 'function' ? arg(valueRef.current.value) : arg; // Only call onChange if the value actually changed
98
+
99
+ if (onChange && valueRef.current.value !== newValue) onChange(newValue);
88
100
  if (!isControlled) setOwnValue(newValue);
89
101
  }, [isControlled, onChange, readOnly]);
90
- const resetValue = useCallback(() => setValue(initializedValue), [initializedValue, setValue]);
102
+ const resetValue = (0, _react.useCallback)(() => setValue(valueRef.current.initial), [setValue]);
91
103
  return {
92
104
  currentValue,
93
105
  setValue,
94
- resetValue
106
+ resetValue,
107
+ isControlled
95
108
  };
96
109
  };
97
110
  /**
@@ -103,24 +116,29 @@ export const useInputValue = (props = {}, hookName = 'useInputValue') => {
103
116
  * management tools such as Formik and React Hooks Form.
104
117
  *
105
118
  * @param {object} props
106
- * @param {any[]} [props.values] - for a controlled input, the active values as set by a parent
107
- * @param {any[]} [props.initialValues] - for an uncontrolled input, the default active values
119
+ * @param {string[]|number[]} [props.values] - for a controlled input, the active values as set by a parent
120
+ * @param {string[]|number[]} [props.initialValues] - for an uncontrolled input, the default active values
108
121
  * @param {number?} [props.maxValues] - maximum number of values that may be selected at once (no limit if null)
109
122
  * @param {function} [props.onChange] - function called when values change (required for controlled inputs)
110
123
  * @param {boolean} [props.readOnly] - if true, stops the input values from changing
111
124
  *
112
125
  * @param {string} componentName - optional, used in error messages
113
126
  *
127
+ * @typedef {(oldValues: string[]|number[]) => string[]|number[]} UpdaterFunction - `setValues` takes values or
128
+ * a function returning new values from old values
114
129
  * @returns {{
115
130
  * currentValues: any
116
131
  * resetValues: () => void
117
- * setValues: (newValues: any[]) => void
132
+ * setValues: (newValues: string[]|number[]|UpdaterFunction) => void
118
133
  * toggleOneValue: (value: string|number) => void
119
134
  * unsetValues: () => void
120
135
  * }}
121
136
  */
122
137
 
123
- export const useMultipleInputValues = ({
138
+
139
+ exports.useInputValue = useInputValue;
140
+
141
+ const useMultipleInputValues = ({
124
142
  values,
125
143
  initialValues,
126
144
  maxValues,
@@ -136,18 +154,18 @@ export const useMultipleInputValues = ({
136
154
  onChange,
137
155
  value: values,
138
156
  // if we're controlling our own state, always start with an array
139
- initialValue: initialValues ?? (values === undefined ? [] : undefined)
157
+ initialValue: initialValues !== null && initialValues !== void 0 ? initialValues : values === undefined ? [] : undefined
140
158
  }, 'useMultipleInputValues');
141
- const enforceMaxValues = useCallback(newValues => {
159
+ const enforceMaxValues = (0, _react.useCallback)(newValues => {
142
160
  if (!maxValues) return newValues;
143
161
  const excess = newValues.length - maxValues;
144
162
  return excess > 0 ? newValues.slice(excess) : newValues;
145
163
  }, [maxValues]);
146
164
  const currentValues = enforceMaxValues(currentValue);
147
- const setValues = useCallback(newValues => setValue(enforceMaxValues(newValues)), [setValue, enforceMaxValues]);
165
+ const setValues = (0, _react.useCallback)(newValues => setValue(enforceMaxValues(newValues)), [setValue, enforceMaxValues]);
148
166
  const resetValues = resetValue;
149
- const unsetValues = useCallback(() => setValues([]), [setValues]);
150
- const toggleOneValue = useCallback(newValue => {
167
+ const unsetValues = (0, _react.useCallback)(() => setValues([]), [setValues]);
168
+ const toggleOneValue = (0, _react.useCallback)(newValue => {
151
169
  if (readOnly) return;
152
170
  setValues( // This will only work with primitive values (e.g. strings, numbers), swap for .some() and
153
171
  // a deepEqual() function if there's any use case for toggling stored objects or arrays.
@@ -160,4 +178,6 @@ export const useMultipleInputValues = ({
160
178
  toggleOneValue,
161
179
  unsetValues
162
180
  };
163
- };
181
+ };
182
+
183
+ exports.useMultipleInputValues = useMultipleInputValues;
@@ -0,0 +1,120 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.getPressHandlersWithArgs = exports.resolvePressableTokens = exports.resolvePressableState = exports.getCursorStyle = void 0;
7
+
8
+ var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
9
+
10
+ var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
11
+
12
+ var _propTypes = require("./propTypes");
13
+
14
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
+
16
+ /**
17
+ * @typedef {import('react').ReactNode} ReactNode
18
+ */
19
+ // These roles should result in cursor: pointer but don't in current RNW releases
20
+ const shouldUseCursor = ['checkbox', 'radio', 'switch'];
21
+ /**
22
+ * React Native Web has some built-in logic for applying cursor styles based on accessibility roles;
23
+ * however, it misses certain cases. This fills in known cases where widely used versions of RNW
24
+ * fail to apply an expected cursor style.
25
+ *
26
+ * @param {object} props
27
+ * @param {boolean} [props.inactive]
28
+ * @param {boolean} [props.disabled]
29
+ * @param {string} [props.accessibilityRole]
30
+ * @returns
31
+ */
32
+
33
+ const getCursorStyle = ({
34
+ inactive,
35
+ disabled,
36
+ accessibilityRole
37
+ }) => {
38
+ if (_Platform.default.OS !== 'web') return undefined;
39
+ if (inactive || disabled) return staticStyles.notAllowed;
40
+ if (shouldUseCursor.includes(accessibilityRole)) return staticStyles.pointer;
41
+ return undefined; // allows React Native Web's built-in logic to apply
42
+ };
43
+ /**
44
+ * @typedef {{ pressed: boolean, focused: boolean, hovered?: boolean }} PressableState
45
+ */
46
+
47
+ /**
48
+ * Maps the state object given by the React Native `Pressable` component to the set of
49
+ * equivalent appearance names used in UDS.
50
+ *
51
+ * @param {PressableState} pressableState - state object passed by React Native's `<Pressable>` into
52
+ * render functions passed to its `style` or `children` props.
53
+ * @param {object} [additionalState] - properties specific to the current component,
54
+ * such as `inactive`, `selected`, etc.
55
+ * @returns {object}
56
+ */
57
+
58
+
59
+ exports.getCursorStyle = getCursorStyle;
60
+
61
+ const resolvePressableState = ({
62
+ pressed = false,
63
+ focused = false,
64
+ hovered = false
65
+ } = {}, additionalState) => ({ ...additionalState,
66
+ focus: focused,
67
+ hover: hovered,
68
+ pressed
69
+ });
70
+ /**
71
+ * Takes a UDS `tokens` prop and, if it is a function, resolves it based on a state
72
+ * object passed from the React Native `Pressable` component and optional extra properties.
73
+ *
74
+ * @param {object|function} tokens - UDS system tokens prop
75
+ * @param {PressableState} pressableState - state object passed by React Native's `<Pressable>`
76
+ * @param {object} [additionalState] - properties specific to the current component
77
+ * @returns {object} - resolved tokens object
78
+ */
79
+
80
+
81
+ exports.resolvePressableState = resolvePressableState;
82
+
83
+ const resolvePressableTokens = (tokens, pressableState, additionalState) => {
84
+ if (typeof tokens !== 'function') return tokens;
85
+ const udsPressableState = resolvePressableState(pressableState, additionalState);
86
+ return tokens(udsPressableState);
87
+ };
88
+
89
+ exports.resolvePressableTokens = resolvePressableTokens;
90
+
91
+ const staticStyles = _StyleSheet.default.create(_Platform.default.select({
92
+ web: {
93
+ notAllowed: {
94
+ cursor: 'not-allowed'
95
+ },
96
+ pointer: {
97
+ cursor: 'pointer'
98
+ }
99
+ },
100
+ default: {}
101
+ }));
102
+ /**
103
+ * From an object of props, extracts any platform-appropriate press handler functions and wraps
104
+ * them in a function that passes in some provided args. Allows components containing a Pressable
105
+ * to pass in press handlers that are then called with state or values that is otherwise internal.
106
+ */
107
+
108
+
109
+ const getPressHandlersWithArgs = (pressableProps = {}, args = []) => {
110
+ // Allow handlers to be passed down for blur, hover, focus, pressIn, etc
111
+ const pressHandlers = Object.fromEntries(Object.entries(_propTypes.pressProps.selectHandlers(pressableProps)).map(([key, handler]) => ({
112
+ [key]: (...defaultArgs) => {
113
+ // Pass each handler data on this button and current selection
114
+ handler(...args, ...defaultArgs);
115
+ }
116
+ })));
117
+ return pressHandlers;
118
+ };
119
+
120
+ exports.getPressHandlersWithArgs = getPressHandlersWithArgs;