@telus-uds/components-base 1.66.0 → 1.67.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 (486) hide show
  1. package/CHANGELOG.md +23 -3
  2. package/lib/A11yInfoProvider/index.js +5 -20
  3. package/lib/A11yText/index.js +3 -17
  4. package/lib/ActivityIndicator/Spinner.js +2 -9
  5. package/lib/ActivityIndicator/Spinner.native.js +4 -27
  6. package/lib/ActivityIndicator/index.js +1 -13
  7. package/lib/ActivityIndicator/shared.js +0 -3
  8. package/lib/Autocomplete/Autocomplete.js +34 -85
  9. package/lib/Autocomplete/Loading.js +0 -10
  10. package/lib/Autocomplete/Suggestions.js +0 -11
  11. package/lib/Autocomplete/index.js +0 -3
  12. package/lib/BaseProvider/HydrationContext.js +4 -18
  13. package/lib/BaseProvider/index.js +0 -12
  14. package/lib/Box/Box.js +10 -35
  15. package/lib/Box/index.js +0 -3
  16. package/lib/Button/Button.js +4 -13
  17. package/lib/Button/ButtonBase.js +23 -55
  18. package/lib/Button/ButtonDropdown.js +7 -32
  19. package/lib/Button/ButtonGroup.js +15 -48
  20. package/lib/Button/ButtonLink.js +3 -17
  21. package/lib/Button/index.js +0 -5
  22. package/lib/Button/propTypes.js +0 -15
  23. package/lib/Card/Card.js +3 -14
  24. package/lib/Card/CardBase.js +5 -16
  25. package/lib/Card/PressableCardBase.js +7 -30
  26. package/lib/Card/index.js +0 -7
  27. package/lib/Carousel/Carousel.js +22 -115
  28. package/lib/Carousel/CarouselContext.js +0 -14
  29. package/lib/Carousel/CarouselFirstFocus/CarouselFirstFocus.js +6 -18
  30. package/lib/Carousel/CarouselItem/CarouselItem.js +5 -20
  31. package/lib/Carousel/CarouselItem/index.js +0 -3
  32. package/lib/Carousel/CarouselStepTracker/CarouselStepTracker.js +0 -9
  33. package/lib/Carousel/CarouselStepTracker/index.js +0 -3
  34. package/lib/Carousel/CarouselTabs/CarouselTabs.js +5 -15
  35. package/lib/Carousel/CarouselTabs/CarouselTabsPanel.js +7 -16
  36. package/lib/Carousel/CarouselTabs/CarouselTabsPanelItem.js +2 -22
  37. package/lib/Carousel/CarouselTabs/index.js +0 -3
  38. package/lib/Carousel/CarouselThumbnail.js +1 -16
  39. package/lib/Carousel/CarouselThumbnailNavigation.js +0 -15
  40. package/lib/Carousel/index.js +0 -5
  41. package/lib/Checkbox/Checkbox.js +5 -44
  42. package/lib/Checkbox/CheckboxButton.js +7 -33
  43. package/lib/Checkbox/CheckboxGroup.js +14 -45
  44. package/lib/Checkbox/CheckboxInput.js +1 -11
  45. package/lib/Checkbox/CheckboxInput.native.js +0 -2
  46. package/lib/Checkbox/index.js +0 -4
  47. package/lib/CheckboxCard/CheckboxCard.js +4 -37
  48. package/lib/CheckboxCard/index.js +0 -3
  49. package/lib/CheckboxCardGroup/CheckboxCardGroup.js +216 -0
  50. package/lib/CheckboxCardGroup/index.js +10 -0
  51. package/lib/Divider/Divider.js +13 -24
  52. package/lib/Divider/index.js +0 -3
  53. package/lib/ExpandCollapse/Accordion.js +1 -9
  54. package/lib/ExpandCollapse/Control.js +10 -32
  55. package/lib/ExpandCollapse/ExpandCollapse.js +3 -19
  56. package/lib/ExpandCollapse/Panel.js +13 -38
  57. package/lib/ExpandCollapse/index.js +0 -5
  58. package/lib/Feedback/Feedback.js +13 -30
  59. package/lib/Feedback/index.js +0 -3
  60. package/lib/Fieldset/Fieldset.js +6 -37
  61. package/lib/Fieldset/FieldsetContainer.js +1 -10
  62. package/lib/Fieldset/FieldsetContainer.native.js +0 -8
  63. package/lib/Fieldset/Legend.js +1 -10
  64. package/lib/Fieldset/Legend.native.js +1 -13
  65. package/lib/Fieldset/index.js +0 -3
  66. package/lib/FlexGrid/Col/Col.js +10 -53
  67. package/lib/FlexGrid/Col/index.js +0 -3
  68. package/lib/FlexGrid/FlexGrid.js +3 -34
  69. package/lib/FlexGrid/Row/Row.js +0 -38
  70. package/lib/FlexGrid/Row/index.js +0 -3
  71. package/lib/FlexGrid/helpers/index.js +0 -4
  72. package/lib/FlexGrid/index.js +0 -3
  73. package/lib/FlexGrid/providers/GutterContext.js +0 -4
  74. package/lib/HorizontalScroll/HorizontalScroll.js +17 -45
  75. package/lib/HorizontalScroll/HorizontalScrollButton.js +1 -17
  76. package/lib/HorizontalScroll/ScrollViewEnd.js +5 -13
  77. package/lib/HorizontalScroll/ScrollViewEnd.native.js +1 -10
  78. package/lib/HorizontalScroll/index.js +0 -7
  79. package/lib/HorizontalScroll/itemPositions.js +8 -19
  80. package/lib/Icon/Icon.js +4 -17
  81. package/lib/Icon/IconText.js +5 -25
  82. package/lib/Icon/index.js +0 -6
  83. package/lib/IconButton/IconButton.js +5 -37
  84. package/lib/IconButton/index.js +0 -3
  85. package/lib/InputLabel/InputLabel.js +4 -28
  86. package/lib/InputLabel/LabelContent.js +2 -8
  87. package/lib/InputLabel/LabelContent.native.js +0 -8
  88. package/lib/InputLabel/index.js +0 -3
  89. package/lib/InputSupports/InputSupports.js +0 -21
  90. package/lib/InputSupports/index.js +0 -3
  91. package/lib/InputSupports/useInputSupports.js +2 -6
  92. package/lib/Link/ChevronLink.js +7 -18
  93. package/lib/Link/InlinePressable.js +0 -10
  94. package/lib/Link/InlinePressable.native.js +5 -18
  95. package/lib/Link/Link.js +0 -8
  96. package/lib/Link/LinkBase.js +17 -47
  97. package/lib/Link/TextButton.js +3 -16
  98. package/lib/Link/index.js +0 -5
  99. package/lib/List/List.js +5 -21
  100. package/lib/List/ListItem.js +1 -11
  101. package/lib/List/ListItemBase.js +5 -34
  102. package/lib/List/ListItemContent.js +1 -14
  103. package/lib/List/ListItemMark.js +3 -23
  104. package/lib/List/PressableListItemBase.js +2 -28
  105. package/lib/List/index.js +0 -4
  106. package/lib/Listbox/GroupControl.js +0 -14
  107. package/lib/Listbox/Listbox.js +15 -40
  108. package/lib/Listbox/ListboxContext.js +0 -7
  109. package/lib/Listbox/ListboxGroup.js +7 -19
  110. package/lib/Listbox/ListboxItem.js +3 -17
  111. package/lib/Listbox/ListboxOverlay.js +4 -20
  112. package/lib/Listbox/PressableItem.js +3 -18
  113. package/lib/Listbox/index.js +0 -3
  114. package/lib/Modal/Modal.js +94 -45
  115. package/lib/Modal/ModalContent.js +184 -0
  116. package/lib/Modal/index.js +0 -3
  117. package/lib/MultiSelectFilter/ModalOverlay.js +1 -20
  118. package/lib/MultiSelectFilter/MultiSelectFilter.js +20 -69
  119. package/lib/MultiSelectFilter/index.js +0 -3
  120. package/lib/Notification/Notification.js +11 -38
  121. package/lib/Notification/index.js +0 -3
  122. package/lib/Pagination/PageButton.js +2 -22
  123. package/lib/Pagination/Pagination.js +21 -42
  124. package/lib/Pagination/SideButton.js +0 -24
  125. package/lib/Pagination/index.js +0 -3
  126. package/lib/Pagination/usePagination.js +4 -9
  127. package/lib/Progress/Progress.js +3 -17
  128. package/lib/Progress/ProgressBar.js +3 -25
  129. package/lib/Progress/ProgressBarBackground.js +0 -12
  130. package/lib/Progress/index.js +0 -4
  131. package/lib/QuickLinks/QuickLinks.js +1 -18
  132. package/lib/QuickLinks/QuickLinksCard.js +1 -11
  133. package/lib/QuickLinks/QuickLinksItem.js +3 -17
  134. package/lib/QuickLinks/index.js +0 -4
  135. package/lib/QuickLinksFeature/QuickLinksFeature.js +3 -20
  136. package/lib/QuickLinksFeature/QuickLinksFeatureItem.js +7 -30
  137. package/lib/QuickLinksFeature/index.js +0 -4
  138. package/lib/Radio/Radio.js +5 -39
  139. package/lib/Radio/RadioButton.js +7 -26
  140. package/lib/Radio/RadioGroup.js +6 -39
  141. package/lib/Radio/RadioInput.js +1 -11
  142. package/lib/Radio/RadioInput.native.js +0 -2
  143. package/lib/Radio/index.js +0 -4
  144. package/lib/RadioCard/RadioCard.js +5 -38
  145. package/lib/RadioCard/RadioCardGroup.js +25 -40
  146. package/lib/RadioCard/index.js +0 -4
  147. package/lib/Responsive/Responsive.js +1 -14
  148. package/lib/Responsive/index.js +0 -3
  149. package/lib/Search/Search.js +22 -45
  150. package/lib/Search/index.js +0 -3
  151. package/lib/Select/Group.js +0 -8
  152. package/lib/Select/Group.native.js +0 -6
  153. package/lib/Select/Item.js +0 -7
  154. package/lib/Select/Item.native.js +0 -2
  155. package/lib/Select/Picker.js +0 -8
  156. package/lib/Select/Picker.native.js +6 -22
  157. package/lib/Select/Select.js +9 -52
  158. package/lib/Select/index.js +0 -5
  159. package/lib/SideNav/Item.js +5 -29
  160. package/lib/SideNav/ItemContent.js +1 -14
  161. package/lib/SideNav/ItemsGroup.js +9 -31
  162. package/lib/SideNav/SideNav.js +9 -33
  163. package/lib/SideNav/index.js +0 -2
  164. package/lib/Skeleton/Skeleton.js +10 -42
  165. package/lib/Skeleton/index.js +0 -3
  166. package/lib/Skeleton/skeletonWebAnimation.js +0 -2
  167. package/lib/Skeleton/useSkeletonNativeAnimation.js +1 -9
  168. package/lib/SkipLink/SkipLink.js +7 -27
  169. package/lib/SkipLink/index.js +0 -3
  170. package/lib/Spacer/Spacer.js +4 -20
  171. package/lib/Spacer/index.js +0 -3
  172. package/lib/StackView/StackView.js +3 -21
  173. package/lib/StackView/StackWrap.js +11 -21
  174. package/lib/StackView/StackWrap.native.js +0 -3
  175. package/lib/StackView/StackWrapBox.js +5 -21
  176. package/lib/StackView/StackWrapGap.js +1 -14
  177. package/lib/StackView/common.js +0 -6
  178. package/lib/StackView/getStackedContent.js +10 -21
  179. package/lib/StackView/index.js +0 -5
  180. package/lib/StepTracker/Step.js +3 -27
  181. package/lib/StepTracker/StepTracker.js +5 -32
  182. package/lib/StepTracker/index.js +0 -3
  183. package/lib/Tabs/Tabs.js +7 -30
  184. package/lib/Tabs/TabsItem.js +13 -38
  185. package/lib/Tabs/index.js +0 -3
  186. package/lib/Tags/Tags.js +9 -42
  187. package/lib/Tags/index.js +0 -3
  188. package/lib/TextInput/TextArea.js +11 -20
  189. package/lib/TextInput/TextInput.js +7 -16
  190. package/lib/TextInput/TextInputBase.js +12 -58
  191. package/lib/TextInput/index.js +0 -3
  192. package/lib/TextInput/propTypes.js +0 -8
  193. package/lib/ThemeProvider/ThemeProvider.js +10 -18
  194. package/lib/ThemeProvider/index.js +0 -9
  195. package/lib/ThemeProvider/useSetTheme.js +6 -9
  196. package/lib/ThemeProvider/useTheme.js +2 -7
  197. package/lib/ThemeProvider/useThemeTokens.js +1 -9
  198. package/lib/ThemeProvider/utils/index.js +0 -4
  199. package/lib/ThemeProvider/utils/styles.js +14 -35
  200. package/lib/ThemeProvider/utils/theme-tokens.js +15 -43
  201. package/lib/Timeline/Timeline.js +11 -27
  202. package/lib/Timeline/index.js +0 -3
  203. package/lib/ToggleSwitch/ToggleSwitch.js +12 -43
  204. package/lib/ToggleSwitch/ToggleSwitchGroup.js +4 -38
  205. package/lib/ToggleSwitch/index.js +0 -3
  206. package/lib/Tooltip/Backdrop.js +4 -11
  207. package/lib/Tooltip/Backdrop.native.js +1 -14
  208. package/lib/Tooltip/Tooltip.js +9 -37
  209. package/lib/Tooltip/Tooltip.native.js +14 -45
  210. package/lib/Tooltip/getTooltipPosition.js +26 -31
  211. package/lib/Tooltip/index.js +0 -5
  212. package/lib/Tooltip/shared.js +0 -10
  213. package/lib/TooltipButton/TooltipButton.js +5 -20
  214. package/lib/TooltipButton/index.js +0 -3
  215. package/lib/Typography/Typography.js +15 -38
  216. package/lib/Typography/index.js +0 -3
  217. package/lib/Validator/Validator.js +10 -58
  218. package/lib/Validator/index.js +0 -3
  219. package/lib/ViewportProvider/ViewportProvider.js +1 -13
  220. package/lib/ViewportProvider/index.js +0 -5
  221. package/lib/ViewportProvider/useViewport.js +0 -4
  222. package/lib/ViewportProvider/useViewportListener.js +3 -12
  223. package/lib/index.js +8 -71
  224. package/lib/utils/BaseView/BaseView.js +3 -17
  225. package/lib/utils/BaseView/BaseView.native.js +0 -3
  226. package/lib/utils/BaseView/index.js +0 -3
  227. package/lib/utils/a11y/index.js +0 -4
  228. package/lib/utils/a11y/semantics.js +14 -32
  229. package/lib/utils/a11y/textSize.js +1 -8
  230. package/lib/utils/animation/index.js +0 -2
  231. package/lib/utils/animation/useVerticalExpandAnimation.js +5 -18
  232. package/lib/utils/children.js +16 -28
  233. package/lib/utils/containUniqueFields.js +2 -5
  234. package/lib/utils/floating-ui/index.js +0 -1
  235. package/lib/utils/floating-ui/index.native.js +0 -1
  236. package/lib/utils/hasOwnProperty.js +0 -1
  237. package/lib/utils/htmlAttrs.js +2 -4
  238. package/lib/utils/index.js +0 -31
  239. package/lib/utils/info/index.js +0 -4
  240. package/lib/utils/info/platform/index.js +0 -4
  241. package/lib/utils/info/versions.js +0 -3
  242. package/lib/utils/input.js +12 -24
  243. package/lib/utils/pressability.js +7 -21
  244. package/lib/utils/props/a11yProps.js +19 -25
  245. package/lib/utils/props/clickProps.js +0 -4
  246. package/lib/utils/props/componentPropType.js +0 -14
  247. package/lib/utils/props/copyPropTypes.js +0 -4
  248. package/lib/utils/props/getPropSelector.js +11 -12
  249. package/lib/utils/props/handlerProps.js +2 -23
  250. package/lib/utils/props/hrefAttrsProp.js +0 -4
  251. package/lib/utils/props/index.js +0 -22
  252. package/lib/utils/props/inputSupportsProps.js +0 -9
  253. package/lib/utils/props/linkProps.js +2 -12
  254. package/lib/utils/props/paddingProp.js +0 -3
  255. package/lib/utils/props/pressProps.js +2 -8
  256. package/lib/utils/props/rectProp.js +0 -3
  257. package/lib/utils/props/responsiveProps.js +1 -5
  258. package/lib/utils/props/selectSystemProps.js +4 -6
  259. package/lib/utils/props/spacingProps.js +3 -10
  260. package/lib/utils/props/textInputProps.js +10 -31
  261. package/lib/utils/props/textProps.js +6 -11
  262. package/lib/utils/props/tokens.js +7 -26
  263. package/lib/utils/props/variantProp.js +0 -3
  264. package/lib/utils/props/viewProps.js +0 -5
  265. package/lib/utils/ssr.js +13 -33
  266. package/lib/utils/useCopy.js +3 -6
  267. package/lib/utils/useHash.js +5 -10
  268. package/lib/utils/useHash.native.js +0 -2
  269. package/lib/utils/useOverlaidPosition.js +6 -29
  270. package/lib/utils/useResponsiveProp.js +6 -13
  271. package/lib/utils/useSafeLayoutEffect.js +5 -10
  272. package/lib/utils/useScrollBlocking.js +3 -11
  273. package/lib/utils/useScrollBlocking.native.js +0 -2
  274. package/lib/utils/useSpacingScale.js +5 -8
  275. package/lib/utils/useUniqueId.js +0 -4
  276. package/lib/utils/withLinkRouter.js +13 -18
  277. package/lib-module/A11yInfoProvider/index.js +5 -9
  278. package/lib-module/A11yText/index.js +3 -4
  279. package/lib-module/ActivityIndicator/Spinner.js +2 -2
  280. package/lib-module/ActivityIndicator/Spinner.native.js +4 -6
  281. package/lib-module/ActivityIndicator/index.js +1 -5
  282. package/lib-module/ActivityIndicator/shared.js +2 -1
  283. package/lib-module/Autocomplete/Autocomplete.js +34 -59
  284. package/lib-module/Autocomplete/Loading.js +0 -2
  285. package/lib-module/BaseProvider/HydrationContext.js +4 -7
  286. package/lib-module/BaseProvider/index.js +0 -3
  287. package/lib-module/Box/Box.js +10 -24
  288. package/lib-module/Button/Button.js +4 -2
  289. package/lib-module/Button/ButtonBase.js +23 -35
  290. package/lib-module/Button/ButtonDropdown.js +7 -16
  291. package/lib-module/Button/ButtonGroup.js +15 -32
  292. package/lib-module/Button/ButtonLink.js +3 -2
  293. package/lib-module/Button/propTypes.js +0 -7
  294. package/lib-module/Card/Card.js +3 -2
  295. package/lib-module/Card/CardBase.js +5 -4
  296. package/lib-module/Card/PressableCardBase.js +7 -11
  297. package/lib-module/Carousel/Carousel.js +22 -60
  298. package/lib-module/Carousel/CarouselContext.js +0 -5
  299. package/lib-module/Carousel/CarouselFirstFocus/CarouselFirstFocus.js +7 -5
  300. package/lib-module/Carousel/CarouselItem/CarouselItem.js +5 -11
  301. package/lib-module/Carousel/CarouselStepTracker/CarouselStepTracker.js +0 -2
  302. package/lib-module/Carousel/CarouselTabs/CarouselTabs.js +3 -4
  303. package/lib-module/Carousel/CarouselTabs/CarouselTabsPanel.js +7 -6
  304. package/lib-module/Carousel/CarouselTabs/CarouselTabsPanelItem.js +2 -10
  305. package/lib-module/Carousel/CarouselThumbnail.js +1 -7
  306. package/lib-module/Carousel/CarouselThumbnailNavigation.js +0 -2
  307. package/lib-module/Checkbox/Checkbox.js +5 -23
  308. package/lib-module/Checkbox/CheckboxButton.js +7 -17
  309. package/lib-module/Checkbox/CheckboxGroup.js +14 -31
  310. package/lib-module/Checkbox/CheckboxInput.js +1 -3
  311. package/lib-module/Checkbox/CheckboxInput.native.js +0 -1
  312. package/lib-module/CheckboxCard/CheckboxCard.js +4 -21
  313. package/lib-module/CheckboxCardGroup/CheckboxCardGroup.js +206 -0
  314. package/lib-module/CheckboxCardGroup/index.js +2 -0
  315. package/lib-module/Divider/Divider.js +13 -11
  316. package/lib-module/ExpandCollapse/Accordion.js +1 -1
  317. package/lib-module/ExpandCollapse/Control.js +10 -17
  318. package/lib-module/ExpandCollapse/ExpandCollapse.js +3 -9
  319. package/lib-module/ExpandCollapse/Panel.js +13 -23
  320. package/lib-module/Feedback/Feedback.js +13 -16
  321. package/lib-module/Fieldset/Fieldset.js +6 -25
  322. package/lib-module/Fieldset/FieldsetContainer.js +1 -1
  323. package/lib-module/Fieldset/FieldsetContainer.native.js +0 -1
  324. package/lib-module/Fieldset/Legend.js +1 -1
  325. package/lib-module/Fieldset/Legend.native.js +1 -1
  326. package/lib-module/FlexGrid/Col/Col.js +10 -37
  327. package/lib-module/FlexGrid/FlexGrid.js +3 -17
  328. package/lib-module/FlexGrid/Row/Row.js +0 -25
  329. package/lib-module/FlexGrid/helpers/index.js +0 -3
  330. package/lib-module/HorizontalScroll/HorizontalScroll.js +17 -27
  331. package/lib-module/HorizontalScroll/HorizontalScrollButton.js +1 -3
  332. package/lib-module/HorizontalScroll/ScrollViewEnd.js +5 -4
  333. package/lib-module/HorizontalScroll/ScrollViewEnd.native.js +0 -1
  334. package/lib-module/HorizontalScroll/itemPositions.js +11 -10
  335. package/lib-module/Icon/Icon.js +4 -8
  336. package/lib-module/Icon/IconText.js +6 -17
  337. package/lib-module/IconButton/IconButton.js +7 -20
  338. package/lib-module/InputLabel/InputLabel.js +4 -13
  339. package/lib-module/InputLabel/LabelContent.js +2 -1
  340. package/lib-module/InputLabel/LabelContent.native.js +0 -1
  341. package/lib-module/InputSupports/InputSupports.js +0 -9
  342. package/lib-module/InputSupports/useInputSupports.js +2 -4
  343. package/lib-module/Link/ChevronLink.js +7 -7
  344. package/lib-module/Link/InlinePressable.js +0 -2
  345. package/lib-module/Link/InlinePressable.native.js +4 -12
  346. package/lib-module/Link/LinkBase.js +17 -25
  347. package/lib-module/Link/TextButton.js +3 -5
  348. package/lib-module/List/List.js +5 -9
  349. package/lib-module/List/ListItem.js +1 -1
  350. package/lib-module/List/ListItemBase.js +5 -17
  351. package/lib-module/List/ListItemContent.js +1 -4
  352. package/lib-module/List/ListItemMark.js +3 -16
  353. package/lib-module/List/PressableListItemBase.js +2 -6
  354. package/lib-module/Listbox/GroupControl.js +0 -2
  355. package/lib-module/Listbox/Listbox.js +15 -23
  356. package/lib-module/Listbox/ListboxContext.js +0 -2
  357. package/lib-module/Listbox/ListboxGroup.js +6 -4
  358. package/lib-module/Listbox/ListboxItem.js +2 -1
  359. package/lib-module/Listbox/ListboxOverlay.js +3 -4
  360. package/lib-module/Listbox/PressableItem.js +2 -7
  361. package/lib-module/Modal/Modal.js +94 -25
  362. package/lib-module/Modal/ModalContent.js +175 -0
  363. package/lib-module/MultiSelectFilter/ModalOverlay.js +1 -4
  364. package/lib-module/MultiSelectFilter/MultiSelectFilter.js +20 -42
  365. package/lib-module/Notification/Notification.js +11 -22
  366. package/lib-module/Pagination/PageButton.js +2 -6
  367. package/lib-module/Pagination/Pagination.js +21 -21
  368. package/lib-module/Pagination/SideButton.js +3 -8
  369. package/lib-module/Pagination/usePagination.js +4 -8
  370. package/lib-module/Progress/Progress.js +3 -7
  371. package/lib-module/Progress/ProgressBar.js +3 -11
  372. package/lib-module/Progress/ProgressBarBackground.js +0 -2
  373. package/lib-module/QuickLinks/QuickLinks.js +1 -6
  374. package/lib-module/QuickLinks/QuickLinksCard.js +1 -3
  375. package/lib-module/QuickLinks/QuickLinksItem.js +3 -2
  376. package/lib-module/QuickLinksFeature/QuickLinksFeature.js +5 -9
  377. package/lib-module/QuickLinksFeature/QuickLinksFeatureItem.js +9 -13
  378. package/lib-module/Radio/Radio.js +5 -22
  379. package/lib-module/Radio/RadioButton.js +8 -10
  380. package/lib-module/Radio/RadioGroup.js +6 -25
  381. package/lib-module/Radio/RadioInput.js +1 -3
  382. package/lib-module/Radio/RadioInput.native.js +0 -1
  383. package/lib-module/RadioCard/RadioCard.js +5 -21
  384. package/lib-module/RadioCard/RadioCardGroup.js +25 -27
  385. package/lib-module/Responsive/Responsive.js +1 -6
  386. package/lib-module/Search/Search.js +22 -31
  387. package/lib-module/Select/Group.js +0 -3
  388. package/lib-module/Select/Group.native.js +0 -3
  389. package/lib-module/Select/Item.js +0 -3
  390. package/lib-module/Select/Item.native.js +0 -1
  391. package/lib-module/Select/Picker.native.js +8 -10
  392. package/lib-module/Select/Select.js +10 -35
  393. package/lib-module/SideNav/Item.js +5 -16
  394. package/lib-module/SideNav/ItemContent.js +1 -2
  395. package/lib-module/SideNav/ItemsGroup.js +9 -19
  396. package/lib-module/SideNav/SideNav.js +9 -22
  397. package/lib-module/Skeleton/Skeleton.js +10 -25
  398. package/lib-module/Skeleton/skeletonWebAnimation.js +0 -1
  399. package/lib-module/Skeleton/useSkeletonNativeAnimation.js +1 -3
  400. package/lib-module/SkipLink/SkipLink.js +7 -9
  401. package/lib-module/Spacer/Spacer.js +4 -7
  402. package/lib-module/StackView/StackView.js +3 -7
  403. package/lib-module/StackView/StackWrap.js +13 -13
  404. package/lib-module/StackView/StackWrap.native.js +2 -1
  405. package/lib-module/StackView/StackWrapBox.js +5 -8
  406. package/lib-module/StackView/StackWrapGap.js +1 -1
  407. package/lib-module/StackView/getStackedContent.js +10 -10
  408. package/lib-module/StepTracker/Step.js +3 -14
  409. package/lib-module/StepTracker/StepTracker.js +5 -13
  410. package/lib-module/Tabs/Tabs.js +7 -16
  411. package/lib-module/Tabs/TabsItem.js +13 -16
  412. package/lib-module/Tags/Tags.js +9 -26
  413. package/lib-module/TextInput/TextArea.js +11 -8
  414. package/lib-module/TextInput/TextInput.js +7 -5
  415. package/lib-module/TextInput/TextInputBase.js +13 -39
  416. package/lib-module/TextInput/propTypes.js +3 -7
  417. package/lib-module/ThemeProvider/ThemeProvider.js +10 -9
  418. package/lib-module/ThemeProvider/useSetTheme.js +6 -7
  419. package/lib-module/ThemeProvider/useTheme.js +2 -5
  420. package/lib-module/ThemeProvider/useThemeTokens.js +1 -2
  421. package/lib-module/ThemeProvider/utils/styles.js +15 -27
  422. package/lib-module/ThemeProvider/utils/theme-tokens.js +15 -20
  423. package/lib-module/Timeline/Timeline.js +11 -17
  424. package/lib-module/ToggleSwitch/ToggleSwitch.js +13 -26
  425. package/lib-module/ToggleSwitch/ToggleSwitchGroup.js +4 -23
  426. package/lib-module/Tooltip/Backdrop.js +4 -7
  427. package/lib-module/Tooltip/Backdrop.native.js +1 -4
  428. package/lib-module/Tooltip/Tooltip.js +9 -18
  429. package/lib-module/Tooltip/Tooltip.native.js +14 -23
  430. package/lib-module/Tooltip/getTooltipPosition.js +26 -30
  431. package/lib-module/Tooltip/shared.js +0 -6
  432. package/lib-module/TooltipButton/TooltipButton.js +5 -8
  433. package/lib-module/Typography/Typography.js +14 -22
  434. package/lib-module/Validator/Validator.js +10 -42
  435. package/lib-module/ViewportProvider/ViewportProvider.js +1 -3
  436. package/lib-module/ViewportProvider/useViewportListener.js +6 -8
  437. package/lib-module/index.js +1 -0
  438. package/lib-module/utils/BaseView/BaseView.js +3 -4
  439. package/lib-module/utils/BaseView/BaseView.native.js +0 -1
  440. package/lib-module/utils/a11y/semantics.js +14 -27
  441. package/lib-module/utils/a11y/textSize.js +1 -2
  442. package/lib-module/utils/animation/useVerticalExpandAnimation.js +8 -11
  443. package/lib-module/utils/children.js +17 -19
  444. package/lib-module/utils/containUniqueFields.js +2 -4
  445. package/lib-module/utils/htmlAttrs.js +2 -1
  446. package/lib-module/utils/info/index.js +2 -1
  447. package/lib-module/utils/info/platform/index.js +4 -1
  448. package/lib-module/utils/info/versions.js +2 -1
  449. package/lib-module/utils/input.js +11 -19
  450. package/lib-module/utils/pressability.js +8 -7
  451. package/lib-module/utils/props/a11yProps.js +22 -20
  452. package/lib-module/utils/props/clickProps.js +0 -1
  453. package/lib-module/utils/props/componentPropType.js +0 -13
  454. package/lib-module/utils/props/getPropSelector.js +12 -8
  455. package/lib-module/utils/props/handlerProps.js +2 -19
  456. package/lib-module/utils/props/hrefAttrsProp.js +2 -2
  457. package/lib-module/utils/props/inputSupportsProps.js +0 -6
  458. package/lib-module/utils/props/linkProps.js +2 -3
  459. package/lib-module/utils/props/pressProps.js +2 -2
  460. package/lib-module/utils/props/responsiveProps.js +1 -3
  461. package/lib-module/utils/props/selectSystemProps.js +4 -5
  462. package/lib-module/utils/props/spacingProps.js +4 -3
  463. package/lib-module/utils/props/textInputProps.js +13 -27
  464. package/lib-module/utils/props/textProps.js +9 -7
  465. package/lib-module/utils/props/tokens.js +10 -13
  466. package/lib-module/utils/props/variantProp.js +1 -1
  467. package/lib-module/utils/props/viewProps.js +0 -1
  468. package/lib-module/utils/ssr.js +14 -18
  469. package/lib-module/utils/useCopy.js +3 -5
  470. package/lib-module/utils/useHash.js +5 -9
  471. package/lib-module/utils/useHash.native.js +0 -1
  472. package/lib-module/utils/useOverlaidPosition.js +6 -25
  473. package/lib-module/utils/useResponsiveProp.js +6 -7
  474. package/lib-module/utils/useSafeLayoutEffect.js +5 -7
  475. package/lib-module/utils/useScrollBlocking.js +3 -10
  476. package/lib-module/utils/useSpacingScale.js +4 -4
  477. package/lib-module/utils/useUniqueId.js +0 -2
  478. package/lib-module/utils/withLinkRouter.js +13 -10
  479. package/package.json +2 -2
  480. package/src/Checkbox/CheckboxGroup.jsx +10 -8
  481. package/src/CheckboxCardGroup/CheckboxCardGroup.jsx +231 -0
  482. package/src/CheckboxCardGroup/index.js +3 -0
  483. package/src/Modal/Modal.jsx +98 -5
  484. package/src/Modal/ModalContent.jsx +171 -0
  485. package/src/RadioCard/RadioCardGroup.jsx +23 -2
  486. package/src/index.js +1 -0
@@ -1,6 +1,9 @@
1
1
  import Platform from "react-native-web/dist/exports/Platform";
2
- import fileSuffix from './platform'; // Allows consuming libraries that might not have a direct dependency on
2
+ import fileSuffix from './platform';
3
+
4
+ // Allows consuming libraries that might not have a direct dependency on
3
5
  // React Native to check what the current platform is.
6
+
4
7
  // Particularly useful for validating Jest config: it is possible for Jest to
5
8
  // get configured such that Platform.OS returns a different mocked value to the
6
9
  // OS being used to select files by platform suffix (e.g. .web, .native).
@@ -1,5 +1,6 @@
1
- import pkgJson from '../../../package.json'; // Add more versions if they are useful e.g. theme schema version
1
+ import pkgJson from '../../../package.json';
2
2
 
3
+ // Add more versions if they are useful e.g. theme schema version
3
4
  export default {
4
5
  uds: pkgJson.version
5
6
  };
@@ -4,7 +4,6 @@ import { useCallback, useRef, useState } from 'react';
4
4
  */
5
5
 
6
6
  const pluralHooks = ['useMultipleInputValues'];
7
-
8
7
  const validateProps = (_ref, _ref2, hookName) => {
9
8
  let {
10
9
  value,
@@ -17,7 +16,6 @@ const validateProps = (_ref, _ref2, hookName) => {
17
16
  isControlled
18
17
  } = _ref2;
19
18
  const s = pluralHooks.includes(hookName) ? 's' : '';
20
-
21
19
  const usageError = error => {
22
20
  // Errors inside hooks in React Native get incomplete stack traces pointing at parent component only.
23
21
  // Help devs out by telling them exactly which hook threw the error as well as why.
@@ -29,23 +27,20 @@ Consumers of this hook must be one of:
29
27
  3. A "read-only" component, with \`readOnly\` prop set as \`true\`.
30
28
  `);
31
29
  };
32
-
33
30
  if (value && !onChange && !readOnly) {
34
31
  usageError(`has \`value${s}\` prop without \`onChange\` or \`readOnly\``);
35
32
  }
36
-
37
33
  if (initialValue && value) {
38
34
  usageError(`has both \`initialValue${s}\` and \`value${s}\``);
39
35
  }
40
-
41
36
  if (isControlled && !isCurrentlyControlled) {
42
37
  usageError(`stopped receiving \`value${s}\` from parent after delegating state management`);
43
38
  }
44
-
45
39
  if (!isControlled && isCurrentlyControlled) {
46
40
  usageError(`started receiving \`value${s}\` from parent after starting managing own state`);
47
41
  }
48
42
  };
43
+
49
44
  /**
50
45
  * Hook used for controlling the input state of input components that have a singular value.
51
46
  * If `value` prop is passed in, this delegates state management to a parent using a passed-in `onChange` prop.
@@ -69,8 +64,6 @@ Consumers of this hook must be one of:
69
64
  * isControlled: bool
70
65
  * }}
71
66
  */
72
-
73
-
74
67
  export const useInputValue = function () {
75
68
  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
76
69
  let hookName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'useInputValue';
@@ -88,26 +81,25 @@ export const useInputValue = function () {
88
81
  readOnly = false
89
82
  } = props;
90
83
  const [ownValue, setOwnValue] = useState(!isControlled && initialValue);
91
- const currentValue = isControlled ? value : ownValue; // Store the first valid value, for resetting input to default. If behaviour like Formik's `enableReinitialize`
92
- // is needed, add useEffect calling a set fn if !deepEqual(initializedValues, initialValues)
84
+ const currentValue = isControlled ? value : ownValue;
93
85
 
86
+ // Store the first valid value, for resetting input to default. If behaviour like Formik's `enableReinitialize`
87
+ // is needed, add useEffect calling a set fn if !deepEqual(initializedValues, initialValues)
94
88
  const valueRef = useRef({
95
89
  initial: currentValue,
96
90
  value: currentValue
97
- }); // Make current value accessible inside useCallback without rememoizing every time the value changes
98
-
91
+ });
92
+ // Make current value accessible inside useCallback without rememoizing every time the value changes
99
93
  valueRef.current.value = currentValue;
100
94
  const isDirty = currentValue !== valueRef.current.initial;
101
95
  const setValue = useCallback((arg, event) => {
102
96
  if (readOnly) return;
103
97
  const newValue = typeof arg === 'function' ? arg(valueRef.current.value) : arg;
104
-
105
98
  if (!isControlled) {
106
99
  setOwnValue(newValue);
107
100
  if (inputRef !== null && inputRef !== void 0 && inputRef.current) inputRef.current.value = newValue ?? '';
108
- } // Call onChange handler if there's something for it to handle (event or a changed value)
109
-
110
-
101
+ }
102
+ // Call onChange handler if there's something for it to handle (event or a changed value)
111
103
  if (onChange && (event || valueRef.current.value !== newValue)) onChange(newValue, event);
112
104
  }, [inputRef, isControlled, onChange, readOnly]);
113
105
  const resetValue = useCallback(event => setValue(valueRef.current.initial, event), [setValue]);
@@ -119,6 +111,7 @@ export const useInputValue = function () {
119
111
  isDirty
120
112
  };
121
113
  };
114
+
122
115
  /**
123
116
  * Hook used for controlling the input state of input components that have multiple named on/off states.
124
117
  * If `values` are passed in, this delegates state management to a parent using a passed-in `onChange` prop.
@@ -144,7 +137,6 @@ export const useInputValue = function () {
144
137
  * unsetValues: () => void
145
138
  * }}
146
139
  */
147
-
148
140
  export const useMultipleInputValues = function () {
149
141
  let {
150
142
  values,
@@ -177,9 +169,9 @@ export const useMultipleInputValues = function () {
177
169
  const resetValues = resetValue;
178
170
  const unsetValues = useCallback(event => setValues([], event), [setValues]);
179
171
  const toggleOneValue = useCallback((newValue, event) => {
180
- if (readOnly) return; // This will only work with primitive values (e.g. strings, numbers), swap for .some() and
172
+ if (readOnly) return;
173
+ // This will only work with primitive values (e.g. strings, numbers), swap for .some() and
181
174
  // a deepEqual() function if there's any use case for toggling stored objects or arrays.
182
-
183
175
  const newValues = currentValues.includes(newValue) ? currentValues.filter(oldValue => oldValue !== newValue) : [...currentValues, newValue];
184
176
  setValues(newValues, event);
185
177
  }, [currentValues, readOnly, setValues]);
@@ -1,12 +1,14 @@
1
1
  import Platform from "react-native-web/dist/exports/Platform";
2
2
  import StyleSheet from "react-native-web/dist/exports/StyleSheet";
3
3
  import pressProps from './props/pressProps';
4
+
4
5
  /**
5
6
  * @typedef {import('react').ReactNode} ReactNode
6
7
  */
7
- // These roles should result in cursor: pointer but don't in current RNW releases
8
8
 
9
+ // These roles should result in cursor: pointer but don't in current RNW releases
9
10
  const shouldUseCursor = ['checkbox', 'radio', 'switch'];
11
+
10
12
  /**
11
13
  * React Native Web has some built-in logic for applying cursor styles based on accessibility roles;
12
14
  * however, it misses certain cases. This fills in known cases where widely used versions of RNW
@@ -18,7 +20,6 @@ const shouldUseCursor = ['checkbox', 'radio', 'switch'];
18
20
  * @param {string} [props.accessibilityRole]
19
21
  * @returns
20
22
  */
21
-
22
23
  export const getCursorStyle = _ref => {
23
24
  let {
24
25
  inactive,
@@ -30,6 +31,7 @@ export const getCursorStyle = _ref => {
30
31
  if (shouldUseCursor.includes(accessibilityRole)) return staticStyles.pointer;
31
32
  return undefined; // allows React Native Web's built-in logic to apply
32
33
  };
34
+
33
35
  /**
34
36
  * @typedef {{ pressed: boolean, focused: boolean, hovered?: boolean }} PressableState
35
37
  */
@@ -44,7 +46,6 @@ export const getCursorStyle = _ref => {
44
46
  * such as `inactive`, `selected`, etc.
45
47
  * @returns {object}
46
48
  */
47
-
48
49
  export const resolvePressableState = function () {
49
50
  let {
50
51
  pressed = false,
@@ -52,12 +53,14 @@ export const resolvePressableState = function () {
52
53
  hovered = false
53
54
  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
54
55
  let additionalState = arguments.length > 1 ? arguments[1] : undefined;
55
- return { ...additionalState,
56
+ return {
57
+ ...additionalState,
56
58
  focus: focused,
57
59
  hover: hovered,
58
60
  pressed
59
61
  };
60
62
  };
63
+
61
64
  /**
62
65
  * Takes a UDS `tokens` prop and, if it is a function, resolves it based on a state
63
66
  * object passed from the React Native `Pressable` component and optional extra properties.
@@ -67,7 +70,6 @@ export const resolvePressableState = function () {
67
70
  * @param {object} [additionalState] - properties specific to the current component
68
71
  * @returns {object} - resolved tokens object
69
72
  */
70
-
71
73
  export const resolvePressableTokens = (tokens, pressableState, additionalState) => {
72
74
  if (typeof tokens !== 'function') return tokens;
73
75
  const udsPressableState = resolvePressableState(pressableState, additionalState);
@@ -84,12 +86,12 @@ const staticStyles = StyleSheet.create(Platform.select({
84
86
  },
85
87
  default: {}
86
88
  }));
89
+
87
90
  /**
88
91
  * From an object of props, extracts any platform-appropriate press handler functions and wraps
89
92
  * them in a function that passes in some provided args. Allows components containing a Pressable
90
93
  * to pass in press handlers that are then called with state or values that is otherwise internal.
91
94
  */
92
-
93
95
  export const getPressHandlersWithArgs = function () {
94
96
  let pressableProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
95
97
  let args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
@@ -101,7 +103,6 @@ export const getPressHandlersWithArgs = function () {
101
103
  for (var _len = arguments.length, defaultArgs = new Array(_len), _key = 0; _key < _len; _key++) {
102
104
  defaultArgs[_key] = arguments[_key];
103
105
  }
104
-
105
106
  // Pass each handler data on this button and current selection
106
107
  handler(...args, ...defaultArgs);
107
108
  }
@@ -1,8 +1,9 @@
1
1
  import PropTypes from 'prop-types';
2
2
  import Platform from "react-native-web/dist/exports/Platform";
3
- import getPropSelector from './getPropSelector'; // React Native exports a11y prop definitions as TypeScript Interfaces, but no longer exports PropTypes
4
- // so we have to define them ourselves.
3
+ import getPropSelector from './getPropSelector';
5
4
 
5
+ // React Native exports a11y prop definitions as TypeScript Interfaces, but no longer exports PropTypes
6
+ // so we have to define them ourselves.
6
7
  const nativeA11yPropTypes = {
7
8
  accessible: PropTypes.bool,
8
9
  focusable: PropTypes.bool,
@@ -36,7 +37,8 @@ const nativeA11yPropTypes = {
36
37
  onAccessibilityEscape: PropTypes.func,
37
38
  onAccessibilityTap: PropTypes.func
38
39
  };
39
- const a11yPropTypes = { ...nativeA11yPropTypes,
40
+ const a11yPropTypes = {
41
+ ...nativeA11yPropTypes,
40
42
  // React Native Web adds many a11y props that alias aria-* attributes
41
43
  // Types based on https://necolas.github.io/react-native-web/docs/accessibility/
42
44
  accessibilityActiveDescendant: PropTypes.string,
@@ -89,7 +91,9 @@ const a11yPropTypesByPlatform = Platform.select({
89
91
  web: a11yPropTypes,
90
92
  // Ignore web-only props in native builds
91
93
  default: nativeA11yPropTypes
92
- }); // These RNW-only props only exist in RNW >=0.18. Catch them and map them according to platform
94
+ });
95
+
96
+ // These RNW-only props only exist in RNW >=0.18. Catch them and map them according to platform
93
97
  // so all props work on RN, RNW >=0.18 and RNW <=0.18, regardless of which they were written for:
94
98
  // - On native, bundle them into objects, like `accessibilityValue: { max: 100 }`
95
99
  // - On web, split them into both of:
@@ -97,7 +101,6 @@ const a11yPropTypesByPlatform = Platform.select({
97
101
  // - The corresponding RNW >=0.18 prop, like `accessibilityValueNow`, which in some cases does more
98
102
  // than just add the aria-* (e.g. `accessibilityDisabled` adds `disabled` if element supports it,
99
103
  // and future releases might add more features here).
100
-
101
104
  const rwnPropMappings = {
102
105
  // Former accessibilityValue props.
103
106
  accessibilityValueMax: value => Platform.select({
@@ -205,14 +208,13 @@ const rwnPropMappings = {
205
208
  }
206
209
  })
207
210
  };
208
-
209
211
  if (Platform.OS === 'web') {
210
- const mapIfDefined = (value, fn) => value === undefined ? undefined : fn(value); // On Web only, these React Native object props need manual mapping in RNW >=0.18
212
+ const mapIfDefined = (value, fn) => value === undefined ? undefined : fn(value);
213
+
214
+ // On Web only, these React Native object props need manual mapping in RNW >=0.18
211
215
  // which dropped support for the React Native shape of these props.
212
216
  // Re-use our RNW 0.18 prop mappings to support both RNW <0.18 (aria-*) and
213
217
  // new features added in >=0.18 (e.g. for accessibilityDisabled).
214
-
215
-
216
218
  rwnPropMappings.accessibilityValue = function () {
217
219
  let {
218
220
  max,
@@ -220,13 +222,13 @@ if (Platform.OS === 'web') {
220
222
  now,
221
223
  text
222
224
  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
223
- return { ...mapIfDefined(max, rwnPropMappings.accessibilityValueMax),
225
+ return {
226
+ ...mapIfDefined(max, rwnPropMappings.accessibilityValueMax),
224
227
  ...mapIfDefined(min, rwnPropMappings.accessibilityValueMin),
225
228
  ...mapIfDefined(now, rwnPropMappings.accessibilityValueNow),
226
229
  ...mapIfDefined(text, rwnPropMappings.accessibilityValueText)
227
230
  };
228
231
  };
229
-
230
232
  rwnPropMappings.accessibilityState = function () {
231
233
  let {
232
234
  busy,
@@ -235,7 +237,8 @@ if (Platform.OS === 'web') {
235
237
  expanded,
236
238
  selected
237
239
  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
238
- return { ...mapIfDefined(busy, rwnPropMappings.accessibilityBusy),
240
+ return {
241
+ ...mapIfDefined(busy, rwnPropMappings.accessibilityBusy),
239
242
  ...mapIfDefined(checked, rwnPropMappings.accessibilityChecked),
240
243
  ...mapIfDefined(disabled, rwnPropMappings.accessibilityDisabled),
241
244
  ...mapIfDefined(expanded, rwnPropMappings.accessibilityExpanded),
@@ -243,29 +246,29 @@ if (Platform.OS === 'web') {
243
246
  };
244
247
  };
245
248
  }
246
-
247
249
  export default {
248
250
  /**
249
251
  * Proptypes for recognised React Native accessiblity (a11y) props.
250
252
  * Spread this in the propTypes of components that accept React Native a11y props.
251
253
  */
252
254
  types: a11yPropTypes,
253
-
254
255
  /**
255
256
  * Filters a props object, returning only recognised React Native accessiblity (a11y) props.
256
257
  *
257
258
  * Where components accept React Native a11y props, pass { ...rest } from its props to this,
258
259
  * then spread the returned object into the component's props (usually its outer container).
259
260
  */
260
- select: getPropSelector( // Allow all React Native accessibility props
261
- a11yPropTypesByPlatform, // Allow any `aria-*` attribute on web; ignore them on native
262
- Platform.OS === 'web' && /^aria-/, // For the props added and deprecated in React Native Web 0.18, convert them to
261
+ select: getPropSelector(
262
+ // Allow all React Native accessibility props
263
+ a11yPropTypesByPlatform,
264
+ // Allow any `aria-*` attribute on web; ignore them on native
265
+ Platform.OS === 'web' && /^aria-/,
266
+ // For the props added and deprecated in React Native Web 0.18, convert them to
263
267
  // a form that is platform-appropriate and RNW-version safe
264
268
  (key, value) => {
265
269
  const rnwPropMapper = rwnPropMappings[key];
266
270
  return rnwPropMapper ? rnwPropMapper(value) : undefined;
267
271
  }),
268
-
269
272
  /**
270
273
  * Use this to disable focus for elements which are visually hidden but still rendered.
271
274
  */
@@ -275,8 +278,8 @@ export default {
275
278
  ...Platform.select({
276
279
  web: {
277
280
  accessibilityHidden: true // web screenreaders
278
-
279
281
  },
282
+
280
283
  android: {
281
284
  importantForAccessibility: 'no-hide-descendants'
282
285
  },
@@ -285,7 +288,6 @@ export default {
285
288
  }
286
289
  })
287
290
  },
288
-
289
291
  /**
290
292
  * Generates an object of platform-appropriate a11y props describing an item that has an
291
293
  * ordered position in a set. Examples of usage by accessibility tools includes screenreaders
@@ -9,7 +9,6 @@ export default {
9
9
  * Web-oriented HTML click handlers that may be mapped to React Native press handlers
10
10
  */
11
11
  types: Object.fromEntries(Object.keys(clickHandlerMapping).map(mouseName => [mouseName, PropTypes.func])),
12
-
13
12
  /**
14
13
  * Takes a set of props and converts HTML mouse click oriented event handlers to closest
15
14
  * equivalent React Native press event handler.
@@ -9,54 +9,41 @@
9
9
  */
10
10
  export default function componentPropType(passedName) {
11
11
  const passedNames = typeof passedName === 'string' ? [passedName] : passedName;
12
-
13
12
  const checkProp = (props, propName, componentName) => {
14
13
  var _props$propName$type, _props$propName$type2;
15
-
16
14
  if (props[propName] === undefined || props[propName] === null) {
17
15
  return undefined;
18
16
  }
19
-
20
17
  if (Array.isArray(props[propName])) {
21
18
  // Iterates through every child and try to find the first element that does not match the passed name
22
19
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean
23
20
  return props[propName].map((_, index) => checkProp(props[propName], index, componentName)).find(Boolean);
24
21
  }
25
-
26
22
  const nameInProp = ((_props$propName$type = props[propName].type) === null || _props$propName$type === void 0 ? void 0 : _props$propName$type.displayName) || ((_props$propName$type2 = props[propName].type) === null || _props$propName$type2 === void 0 ? void 0 : _props$propName$type2.name);
27
-
28
23
  if (!nameInProp || !passedNames.includes(nameInProp)) {
29
24
  const propDescription = nameInProp ? `Component ${nameInProp}` : typeof props[propName];
30
25
  return new Error(`${componentName}: ${propDescription} was passed to \`${propName}\` prop; should be ${passedNames.join(' or ')}`);
31
26
  }
32
-
33
27
  return undefined;
34
28
  };
35
-
36
29
  const checkRequired = (props, propName, componentName) => {
37
30
  if (props[propName] === undefined) {
38
31
  return new Error(`The prop \`${propName}\` is marked as required in \`${componentName}\`, but its value is ${props[propName]}.`);
39
32
  }
40
-
41
33
  return undefined;
42
34
  };
43
-
44
35
  const createValidate = isRequired => {
45
36
  if (isRequired) {
46
37
  return (props, propName, componentName) => {
47
38
  const checkForError = checkProp(props, propName, componentName);
48
-
49
39
  if (checkForError) {
50
40
  return checkForError;
51
41
  }
52
-
53
42
  return checkRequired(props, propName, componentName);
54
43
  };
55
44
  }
56
-
57
45
  return checkProp;
58
46
  };
59
-
60
47
  const validate = createValidate();
61
48
  validate.isRequired = createValidate(true);
62
49
  return validate;
@@ -1,5 +1,6 @@
1
1
  import merge from 'lodash.merge';
2
2
  import hasOwnProperty from '../hasOwnProperty';
3
+
3
4
  /**
4
5
  * @callback PropSelectorCallback - a callback called for each prop passed to a component
5
6
  * @param {string} key - the key for the prop to be tested
@@ -14,16 +15,18 @@ import hasOwnProperty from '../hasOwnProperty';
14
15
  * @param {*} value
15
16
  * @returns {object|undefined}
16
17
  */
17
-
18
18
  const applyCallback = (callback, items, key, value) => {
19
19
  // If there's no callback, continue and look up keys as normal
20
20
  if (typeof callback !== 'function') return undefined;
21
- const newItems = callback(key, value); // If the callback doesn't return anything, continue and look up keys as normal
21
+ const newItems = callback(key, value);
22
22
 
23
- if (!newItems) return undefined; // If the callback returns items, merge them in, deep merging props that are objects
23
+ // If the callback doesn't return anything, continue and look up keys as normal
24
+ if (!newItems) return undefined;
24
25
 
26
+ // If the callback returns items, merge them in, deep merging props that are objects
25
27
  return merge({}, items, newItems);
26
28
  };
29
+
27
30
  /**
28
31
  * Generates a function to filter an object of props down to a subset of allowed props, with
29
32
  * optional prop alteration and re-mapping via an optional callback.
@@ -33,14 +36,15 @@ const applyCallback = (callback, items, key, value) => {
33
36
  * @param {PropSelectorCallback} callback - optional function taking `(key, value)` returning either undefined or an object of new props to merge in
34
37
  * @returns {object} - valid props for this component
35
38
  */
36
-
37
-
38
39
  export default function getPropSelector(propTypes, regexp, callback) {
39
40
  return props => Object.entries(props).reduce((items, _ref) => {
40
41
  let [key, value] = _ref;
41
- return (// If there's a callback and it matches something, applyCallback merges it in; return that
42
- applyCallback(callback, items, key, value) || ( // If there's no callback match, check if this prop is valid and merge it in if it is
43
- hasOwnProperty(propTypes, key) || regexp && regexp.test(key) ? { ...items,
42
+ return (
43
+ // If there's a callback and it matches something, applyCallback merges it in; return that
44
+ applyCallback(callback, items, key, value) || (
45
+ // If there's no callback match, check if this prop is valid and merge it in if it is
46
+ hasOwnProperty(propTypes, key) || regexp && regexp.test(key) ? {
47
+ ...items,
44
48
  [key]: value
45
49
  } : items)
46
50
  );
@@ -7,7 +7,6 @@ const focusHandlerProps = {
7
7
  * onBlur handler
8
8
  */
9
9
  onBlur: PropTypes.func,
10
-
11
10
  /**
12
11
  * onFocus handler
13
12
  */
@@ -21,62 +20,50 @@ const textInputHandlerProps = {
21
20
  * onChange handler
22
21
  */
23
22
  onChange: PropTypes.func,
24
-
25
23
  /**
26
24
  * onChangeText handler
27
25
  */
28
26
  onChangeText: PropTypes.func,
29
-
30
27
  /**
31
28
  * onClear handler
32
29
  */
33
30
  onClear: PropTypes.func,
34
-
35
31
  /**
36
32
  * onSubmit handler
37
33
  */
38
34
  onSubmit: PropTypes.func,
39
-
40
35
  /**
41
36
  * onSubmitEditing handler
42
37
  */
43
38
  onSubmitEditing: PropTypes.func,
44
-
45
39
  /**
46
40
  * onContentSizeChange handler
47
41
  */
48
42
  onContentSizeChange: PropTypes.func,
49
-
50
43
  /**
51
44
  * onEndEditing handler
52
45
  */
53
46
  onEndEditing: PropTypes.func,
54
-
55
47
  /**
56
48
  * onScroll handler
57
49
  */
58
50
  onScroll: PropTypes.func,
59
-
60
51
  /**
61
52
  * onSelectionChange handler
62
53
  */
63
54
  onSelectionChange: PropTypes.func,
64
-
65
55
  /**
66
56
  * onKeyPress handler
67
57
  */
68
58
  onKeyPress: PropTypes.func,
69
-
70
59
  /**
71
60
  * onKeyUp handler (only supported on Web)
72
61
  */
73
62
  onKeyUp: PropTypes.func,
74
-
75
63
  /**
76
64
  * onKeyDown handler (only supported on Web)
77
65
  */
78
66
  onMouseOver: PropTypes.func,
79
-
80
67
  /**
81
68
  * onKeyDown handler (only supported on Web)
82
69
  */
@@ -84,7 +71,6 @@ const textInputHandlerProps = {
84
71
  }
85
72
  };
86
73
  const selectTextInputHandlers = getPropSelector(textInputHandlerProps.types);
87
-
88
74
  textInputHandlerProps.select = props => {
89
75
  // Support for onKeyPress/onKeyUp/onKeyDown is inconsistent between React Native and React Native Web
90
76
  const {
@@ -93,7 +79,6 @@ textInputHandlerProps.select = props => {
93
79
  onKeyDown,
94
80
  ...resolvedProps
95
81
  } = selectTextInputHandlers(props);
96
-
97
82
  if (onKeyPress || onKeyUp || onKeyDown) {
98
83
  if (Platform.OS !== 'web') {
99
84
  // React Native only supports onKeyPress. Call any key handlers supplied in expected order.
@@ -104,9 +89,9 @@ textInputHandlerProps.select = props => {
104
89
  };
105
90
  } else {
106
91
  // React Native Web supports onKeyUp the normal way.
107
- if (onKeyUp) resolvedProps.onKeyUp = onKeyUp; // React Native Web doesn't support the `onKeyDown` prop name, but maps a supplied onKeyPress handler
92
+ if (onKeyUp) resolvedProps.onKeyUp = onKeyUp;
93
+ // React Native Web doesn't support the `onKeyDown` prop name, but maps a supplied onKeyPress handler
108
94
  // to the onKeyDown event and calls it with a keydown event. Make React Native Web call either or both.
109
-
110
95
  if (onKeyPress || onKeyDown) {
111
96
  resolvedProps.onKeyPress = event => {
112
97
  if (typeof onKeyDown === 'function') onKeyDown(event);
@@ -115,8 +100,6 @@ textInputHandlerProps.select = props => {
115
100
  }
116
101
  }
117
102
  }
118
-
119
103
  return resolvedProps;
120
104
  };
121
-
122
105
  export { focusHandlerProps, textInputHandlerProps };
@@ -1,5 +1,6 @@
1
- import PropTypes from 'prop-types'; // Props related to HTML <a> anchor link attributes.
1
+ import PropTypes from 'prop-types';
2
2
 
3
+ // Props related to HTML <a> anchor link attributes.
3
4
  const targetValues = ['_self', '_blank', '_parent', '_top'];
4
5
  export default {
5
6
  types: {
@@ -9,7 +10,6 @@ export default {
9
10
  rel: PropTypes.string,
10
11
  target: PropTypes.oneOf(targetValues)
11
12
  },
12
-
13
13
  /**
14
14
  * Takes a props object, bundles any hrefAttrs props present into one object
15
15
  * and returns that keyed as `hrefAttrs` and non-hrefAttrs props keyed as `rest`
@@ -5,33 +5,27 @@ export default {
5
5
  * Whether the English or French copy will be used (e.g. for accessibility labels).
6
6
  */
7
7
  copy: PropTypes.oneOf(['en', 'fr']),
8
-
9
8
  /**
10
9
  * The input label.
11
10
  */
12
11
  label: PropTypes.string,
13
-
14
12
  /**
15
13
  * A short description of the expected input.
16
14
  */
17
15
  hint: PropTypes.string,
18
-
19
16
  /**
20
17
  * Position of the hint relative to label. Use `below` to display a larger hint below the label.
21
18
  */
22
19
  hintPosition: PropTypes.oneOf(['inline', 'below']),
23
-
24
20
  /**
25
21
  * A detailed description of validation error/success or additional instructions.
26
22
  * Visual variant is determined based on the `validation` prop.
27
23
  */
28
24
  feedback: PropTypes.string,
29
-
30
25
  /**
31
26
  * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
32
27
  */
33
28
  tooltip: PropTypes.string,
34
-
35
29
  /**
36
30
  * Use to visually mark an input as valid or invalid.
37
31
  */
@@ -5,7 +5,8 @@ import { pressPropTypes } from './pressProps';
5
5
  import a11yProps from './a11yProps';
6
6
  import hrefAttrsProp from './hrefAttrsProp';
7
7
  import getPropSelector from './getPropSelector';
8
- const linkPropTypes = { ...pressPropTypes,
8
+ const linkPropTypes = {
9
+ ...pressPropTypes,
9
10
  href: PropTypes.string,
10
11
  hrefAttrs: PropTypes.shape(hrefAttrsProp.types),
11
12
  ...a11yProps.types
@@ -15,12 +16,10 @@ export default {
15
16
  * Proptypes for components that, on Web, can output <a href="..."> link elements
16
17
  */
17
18
  types: linkPropTypes,
18
-
19
19
  /**
20
20
  * Filters a props object, returning only the platform-relevant link props defined above
21
21
  */
22
22
  select: getPropSelector(linkPropTypes),
23
-
24
23
  /**
25
24
  * Turn hrefs into press handlers that open links on Native.
26
25
  *
@@ -18,7 +18,8 @@ const pressHandlerPropTypes = {
18
18
  }
19
19
  })
20
20
  };
21
- export const pressPropTypes = { ...pressHandlerPropTypes,
21
+ export const pressPropTypes = {
22
+ ...pressHandlerPropTypes,
22
23
  disabled: PropTypes.bool,
23
24
  ...Platform.select({
24
25
  web: {},
@@ -33,7 +34,6 @@ export default {
33
34
  * Proptypes for clickable or pressable components, including web-only props
34
35
  */
35
36
  types: pressPropTypes,
36
-
37
37
  /**
38
38
  * Filters a props object, returning only the platform-relevant press props defined above
39
39
  */