@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
@@ -4,37 +4,21 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
-
8
7
  var _react = _interopRequireWildcard(require("react"));
9
-
10
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
-
12
9
  var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
13
-
14
10
  var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
15
-
16
11
  var _ButtonBase = _interopRequireDefault(require("./ButtonBase"));
17
-
18
12
  var _StackView = require("../StackView");
19
-
20
13
  var _Fieldset = _interopRequireDefault(require("../Fieldset"));
21
-
22
14
  var _ViewportProvider = require("../ViewportProvider");
23
-
24
15
  var _ThemeProvider = require("../ThemeProvider");
25
-
26
16
  var _utils = require("../utils");
27
-
28
17
  var _pressability = require("../utils/pressability");
29
-
30
18
  var _jsxRuntime = require("react/jsx-runtime");
31
-
32
19
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
33
-
34
20
  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); }
35
-
36
21
  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; }
37
-
38
22
  const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
39
23
  const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.pressProps, _utils.viewProps]);
40
24
  const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
@@ -91,14 +75,14 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
91
75
  });
92
76
  const itemA11yRole = systemProps.accessibilityRole === 'radiogroup' ? 'radio' : 'checkbox';
93
77
  const uniqueFields = ['id', 'label'];
94
-
95
78
  if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
96
79
  throw new Error(`ButtonGroup items must have unique ${uniqueFields.join(', ')}`);
97
- } // Some web screenreaders e.g. MacOS Voiceover don't handle radiogroups properly unless radio is direct child of radiogroup
98
-
80
+ }
99
81
 
82
+ // Some web screenreaders e.g. MacOS Voiceover don't handle radiogroups properly unless radio is direct child of radiogroup
100
83
  const innerRole = _Platform.default.OS === 'web' && accessibilityRole === 'radiogroup' ? accessibilityRole : undefined;
101
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, { ...systemProps,
84
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, {
85
+ ...systemProps,
102
86
  ref: ref,
103
87
  name: inputGroupName,
104
88
  legend: legend,
@@ -126,19 +110,18 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
126
110
  ref: itemRef,
127
111
  ...itemRest
128
112
  } = _ref2;
129
- const isSelected = currentValues.includes(id); // Pass an object of relevant component state as first argument for any passed-in press handlers
113
+ const isSelected = currentValues.includes(id);
130
114
 
115
+ // Pass an object of relevant component state as first argument for any passed-in press handlers
131
116
  const pressHandlers = (0, _pressability.getPressHandlersWithArgs)(rest, [{
132
117
  id,
133
118
  label,
134
119
  currentValues
135
120
  }]);
136
-
137
121
  const handlePress = event => {
138
122
  if (pressHandlers.onPress) pressHandlers.onPress(event);
139
123
  toggleOneValue(id, event);
140
124
  };
141
-
142
125
  const iconProp = itemRest.icon || undefined;
143
126
  const itemA11y = {
144
127
  accessibilityState: {
@@ -147,9 +130,10 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
147
130
  accessibilityRole: itemA11yRole,
148
131
  accessibilityLabel,
149
132
  ..._utils.a11yProps.getPositionInSet(items.length, index)
150
- }; // Ensure button is direct child of group as MacOS voiceover only applies "X of Y" to
151
- // "radio" if it's a direct child of "radiogroup", even if aria-posinset etc exists
133
+ };
152
134
 
135
+ // Ensure button is direct child of group as MacOS voiceover only applies "X of Y" to
136
+ // "radio" if it's a direct child of "radiogroup", even if aria-posinset etc exists
153
137
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
154
138
  ref: itemRef,
155
139
  ...pressHandlers,
@@ -158,7 +142,8 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
158
142
  selected: isSelected,
159
143
  inactive: inactive,
160
144
  icon: iconProp,
161
- ...selectItemProps({ ...itemRest,
145
+ ...selectItemProps({
146
+ ...itemRest,
162
147
  ...itemA11y
163
148
  }),
164
149
  iconPosition: iconPosition,
@@ -169,52 +154,46 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
169
154
  });
170
155
  });
171
156
  ButtonGroup.displayName = 'ButtonGroup';
172
- ButtonGroup.propTypes = { ...selectedSystemPropTypes,
157
+ ButtonGroup.propTypes = {
158
+ ...selectedSystemPropTypes,
173
159
  tokens: (0, _utils.getTokensPropType)('ButtonGroup'),
174
160
  variant: _utils.variantProp.propType,
175
-
176
161
  /**
177
162
  * The maximum number of items a user may select at once. Defaults to 1 and behaves
178
163
  * like radio buttons. To have no limit and allow any number of selections, pass `null`.
179
164
  */
180
165
  maxValues: _propTypes.default.number,
181
-
182
166
  /**
183
167
  * The options a user may select
184
168
  */
185
- items: _propTypes.default.arrayOf(_propTypes.default.shape({ ...selectedItemPropTypes,
186
-
169
+ items: _propTypes.default.arrayOf(_propTypes.default.shape({
170
+ ...selectedItemPropTypes,
187
171
  /**
188
172
  * The text displayed to the user in the button, describing this option,
189
173
  * passed to the button as its child.
190
174
  */
191
175
  label: _propTypes.default.string.isRequired,
192
-
193
176
  /**
194
177
  * An optional accessibility label may be passed to ButtonGroup Buttons
195
178
  * which is applied as normal for a React Native accessibilityLabel prop.
196
179
  */
197
180
  accessibilityLabel: _propTypes.default.string,
198
-
199
181
  /**
200
182
  * An optional unique string may be provided to identify this option,
201
183
  * which will be used in code and passed to any onChange function.
202
184
  * If not provided, the label is used.
203
185
  */
204
186
  id: _propTypes.default.string,
205
-
206
187
  /**
207
188
  * An optional ref for one individual button in the ButtonGroup
208
189
  */
209
190
  ref: _airbnbPropTypes.default.ref()
210
191
  })),
211
-
212
192
  /**
213
193
  * If provided, this function is called when the current selection is changed
214
194
  * and is passed an array of the `id`s of all currently selected `items`.
215
195
  */
216
196
  onChange: _propTypes.default.func,
217
-
218
197
  /**
219
198
  * If the selected item(s) in the button group are to be controlled externally by
220
199
  * a parent component, pass an array of strings as well as an `onChange` handler.
@@ -222,65 +201,53 @@ ButtonGroup.propTypes = { ...selectedSystemPropTypes,
222
201
  * expects its state to be handled via `onChange` and so doesn't handle it itself.
223
202
  */
224
203
  values: _propTypes.default.arrayOf(_propTypes.default.string),
225
-
226
204
  /**
227
205
  * If `values` is not passed, making the ButtonGroup an "uncontrolled" component
228
206
  * managing its own selected state, a default set of selections may be provided.
229
207
  * Changing the `initialValues` does not change the user's selections.
230
208
  */
231
209
  initialValues: _propTypes.default.arrayOf(_propTypes.default.string),
232
-
233
210
  /**
234
211
  * Defines if the icon will be displayed on the right or left side of the label.
235
212
  */
236
213
  iconPosition: _propTypes.default.oneOf(['left', 'right']),
237
-
238
214
  /**
239
215
  * Main text used to describe this group, used in Fieldset's Legend element.
240
216
  */
241
217
  legend: _propTypes.default.string,
242
-
243
218
  /**
244
219
  * Optional additional text giving more detail to help a user make a choice.
245
220
  */
246
221
  hint: _propTypes.default.string,
247
-
248
222
  /**
249
223
  * Position of the hint relative to label. Use `below` to display a larger hint below the label.
250
224
  */
251
225
  hintPosition: _propTypes.default.oneOf(['inline', 'below']),
252
-
253
226
  /**
254
227
  * Optional tooltip text content to include alongside the legend and hint.
255
228
  */
256
229
  tooltip: _propTypes.default.string,
257
-
258
230
  /**
259
231
  * Current validation status of the group, passed to the feedback element if there is one.
260
232
  */
261
233
  validation: _propTypes.default.oneOf(['error', 'success']),
262
-
263
234
  /**
264
235
  * If provided, a Feedback element is rendered containing this text.
265
236
  */
266
237
  feedback: _propTypes.default.string,
267
-
268
238
  /**
269
239
  * If true, the buttons cannot be selected by the user and simply show their current state.
270
240
  */
271
241
  readOnly: _propTypes.default.bool,
272
-
273
242
  /**
274
243
  * If true, the buttons cannot be interacted with, elements are set as `disabled` and if the
275
244
  * theme supports `inactive` appearances rules, these are applied.
276
245
  */
277
246
  inactive: _propTypes.default.bool,
278
-
279
247
  /**
280
248
  * On Web, this is passed to the `name` attribute of the fieldset.
281
249
  */
282
250
  name: _propTypes.default.string,
283
-
284
251
  /**
285
252
  * Sets the language of microcopy in subcomponents (e.g. Tooltip's default accessibility label).
286
253
  */
@@ -4,34 +4,21 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
-
8
7
  var _react = _interopRequireWildcard(require("react"));
9
-
10
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
-
12
9
  var _ButtonBase = _interopRequireDefault(require("./ButtonBase"));
13
-
14
10
  var _propTypes2 = _interopRequireWildcard(require("./propTypes"));
15
-
16
11
  var _props = require("../utils/props");
17
-
18
12
  var _ThemeProvider = require("../ThemeProvider");
19
-
20
13
  var _ViewportProvider = require("../ViewportProvider");
21
-
22
14
  var _jsxRuntime = require("react/jsx-runtime");
23
-
24
15
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
25
-
26
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); }
27
-
28
17
  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; }
29
-
30
18
  /**
31
19
  * `ButtonLink` is a component with the semantics and behaviour of a link, but with the visual appearance of a button.
32
20
  * ButtonLink is a block-level component and should not be used inline.
33
- */
34
- const ButtonLink = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
21
+ */const ButtonLink = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
35
22
  let {
36
23
  accessibilityRole = 'link',
37
24
  tokens,
@@ -39,12 +26,10 @@ const ButtonLink = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
39
26
  dataSet,
40
27
  ...props
41
28
  } = _ref;
42
-
43
29
  const {
44
30
  hrefAttrs,
45
31
  rest
46
32
  } = _props.hrefAttrsProp.bundle(props);
47
-
48
33
  const viewport = (0, _ViewportProvider.useViewport)();
49
34
  const buttonVariant = {
50
35
  viewport,
@@ -61,7 +46,8 @@ const ButtonLink = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
61
46
  });
62
47
  });
63
48
  ButtonLink.displayName = 'ButtonLink';
64
- ButtonLink.propTypes = { ..._props.a11yProps.types,
49
+ ButtonLink.propTypes = {
50
+ ..._props.a11yProps.types,
65
51
  ..._propTypes2.default,
66
52
  ..._props.linkProps.types,
67
53
  children: _propTypes2.textAndA11yText,
@@ -27,13 +27,8 @@ Object.defineProperty(exports, "ButtonLink", {
27
27
  return _ButtonLink.default;
28
28
  }
29
29
  });
30
-
31
30
  var _Button = _interopRequireDefault(require("./Button"));
32
-
33
31
  var _ButtonLink = _interopRequireDefault(require("./ButtonLink"));
34
-
35
32
  var _ButtonGroup = _interopRequireDefault(require("./ButtonGroup"));
36
-
37
33
  var _ButtonDropdown = _interopRequireDefault(require("./ButtonDropdown"));
38
-
39
34
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -4,36 +4,25 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.textAndA11yText = exports.default = void 0;
7
-
8
7
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
-
10
8
  var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
11
-
12
9
  var _props = require("../utils/props");
13
-
14
10
  var _A11yText = _interopRequireDefault(require("../A11yText"));
15
-
16
11
  var _Icon = require("../Icon");
17
-
18
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
-
20
13
  const textAndA11yText = _airbnbPropTypes.default.childrenOf(_propTypes.default.oneOfType([_airbnbPropTypes.default.elementType(_A11yText.default), _propTypes.default.string]));
21
-
22
14
  exports.textAndA11yText = textAndA11yText;
23
15
  const buttonPropTypes = {
24
16
  tokens: (0, _props.getTokensPropType)('Button'),
25
-
26
17
  /**
27
18
  * If true, prevents the button from being pressed, changes the cursor (on web) and accessibility
28
19
  * attributes to communicate this to the user, and applies `inactive: true` appearances from the theme
29
20
  */
30
21
  inactive: _propTypes.default.bool,
31
-
32
22
  /**
33
23
  * Alias for `inactive`
34
24
  */
35
25
  disabled: _propTypes.default.bool,
36
-
37
26
  /**
38
27
  * Button's children must be either:
39
28
  * - One or more text strings and / or A11yText components
@@ -43,22 +32,18 @@ const buttonPropTypes = {
43
32
  * ```
44
33
  */
45
34
  children: _propTypes.default.oneOfType([_propTypes.default.func, textAndA11yText]).isRequired,
46
-
47
35
  /**
48
36
  * Function called when the button is pressed. Required unless the button has a href.
49
37
  */
50
38
  onPress: _propTypes.default.func,
51
-
52
39
  /**
53
40
  * Optional variant that may be passed down to the link's icon if there is one
54
41
  */
55
42
  iconProps: _propTypes.default.exact(_Icon.iconComponentPropTypes),
56
-
57
43
  /**
58
44
  * When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of the button.
59
45
  */
60
46
  iconPosition: _propTypes.default.oneOf(['left', 'right']),
61
-
62
47
  /**
63
48
  * A function component for an SVG icon to render inside the link. Inherits size and color from
64
49
  * the link and any Typography the link is nested inside.
package/lib/Card/Card.js CHANGED
@@ -4,30 +4,19 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
-
8
7
  var _react = _interopRequireWildcard(require("react"));
9
-
10
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
-
12
9
  var _ThemeProvider = require("../ThemeProvider");
13
-
14
10
  var _utils = require("../utils");
15
-
16
11
  var _ViewportProvider = require("../ViewportProvider");
17
-
18
12
  var _props = require("../utils/props");
19
-
20
13
  var _CardBase = _interopRequireDefault(require("./CardBase"));
21
-
22
14
  var _jsxRuntime = require("react/jsx-runtime");
23
-
24
15
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
25
-
26
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); }
27
-
28
17
  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; }
29
-
30
18
  const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.viewProps]);
19
+
31
20
  /**
32
21
  * A basic card component, unstyled by default.
33
22
  *
@@ -76,7 +65,6 @@ const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_p
76
65
  * you automatically make inaccessible its children, which may or may not be appropriate
77
66
  * depending on what you are trying to achieve.
78
67
  */
79
-
80
68
  const Card = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
81
69
  let {
82
70
  children,
@@ -98,7 +86,8 @@ const Card = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
98
86
  });
99
87
  });
100
88
  Card.displayName = 'Card';
101
- Card.propTypes = { ...selectedSystemPropTypes,
89
+ Card.propTypes = {
90
+ ...selectedSystemPropTypes,
102
91
  children: _propTypes.default.node,
103
92
  tokens: (0, _utils.getTokensPropType)('Card'),
104
93
  variant: _utils.variantProp.propType
@@ -4,31 +4,20 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
-
8
7
  var _react = _interopRequireWildcard(require("react"));
9
-
10
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
-
12
9
  var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
13
-
14
10
  var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
15
-
16
11
  var _ThemeProvider = require("../ThemeProvider");
17
-
18
12
  var _utils = require("../utils");
19
-
20
13
  var _props = require("../utils/props");
21
-
22
14
  var _jsxRuntime = require("react/jsx-runtime");
23
-
24
15
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
25
-
26
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); }
27
-
28
17
  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; }
18
+ const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.viewProps]);
29
19
 
30
- const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.viewProps]); // Ensure explicit selection of tokens
31
-
20
+ // Ensure explicit selection of tokens
32
21
  const selectStyles = _ref => {
33
22
  let {
34
23
  flex,
@@ -64,12 +53,11 @@ const selectStyles = _ref => {
64
53
  } : {})
65
54
  };
66
55
  };
56
+
67
57
  /**
68
58
  * A themeless base component for Card which components can apply theme tokens to. Not
69
59
  * intended to be used in apps or sites directly: build themed components on top of this.
70
60
  */
71
-
72
-
73
61
  const CardBase = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
74
62
  let {
75
63
  children,
@@ -88,7 +76,8 @@ const CardBase = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
88
76
  });
89
77
  });
90
78
  CardBase.displayName = 'CardBase';
91
- CardBase.propTypes = { ...selectedSystemPropTypes,
79
+ CardBase.propTypes = {
80
+ ...selectedSystemPropTypes,
92
81
  children: _propTypes.default.node,
93
82
  tokens: (0, _utils.getTokensPropType)('Card')
94
83
  };
@@ -4,44 +4,30 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.selectPressableCardTokens = exports.default = void 0;
7
-
8
7
  var _react = _interopRequireWildcard(require("react"));
9
-
10
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
-
12
9
  var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
13
-
14
10
  var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
15
-
16
11
  var _ViewportProvider = require("../ViewportProvider");
17
-
18
12
  var _ThemeProvider = require("../ThemeProvider");
19
-
20
13
  var _utils = require("../utils");
21
-
22
14
  var _CardBase = _interopRequireDefault(require("./CardBase"));
23
-
24
15
  var _jsxRuntime = require("react/jsx-runtime");
25
-
26
16
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
27
-
28
17
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
29
-
30
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; }
31
-
32
19
  const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
33
- const tokenKeys = [...(0, _utils.getTokenNames)('Card'), // Outer border tokens. TODO: centralise common token sets like these as part of
20
+ const tokenKeys = [...(0, _utils.getTokenNames)('Card'),
21
+ // Outer border tokens. TODO: centralise common token sets like these as part of
34
22
  // https://github.com/telus/universal-design-system/issues/782
35
23
  'outerBorderColor', 'outerBorderWidth', 'outerBorderGap'];
36
-
37
24
  const selectPressableCardTokens = tokens => Object.fromEntries(tokenKeys.map(key => [key, tokens[key]]));
25
+
38
26
  /**
39
27
  * A pressable themeless base component that handles pressable states and passes tokens
40
28
  * based on these to an outer border and a base Card component. Not intended to be used in
41
29
  * apps or sites directly: build themed components on top of this.
42
30
  */
43
-
44
-
45
31
  exports.selectPressableCardTokens = selectPressableCardTokens;
46
32
  const PressableCardBase = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
47
33
  let {
@@ -55,12 +41,10 @@ const PressableCardBase = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
55
41
  accessibilityRole = href ? 'link' : undefined,
56
42
  ...rawRest
57
43
  } = _ref;
58
-
59
44
  const {
60
45
  onPress,
61
46
  ...rest
62
47
  } = _utils.clickProps.toPressProps(rawRest);
63
-
64
48
  const viewport = (0, _ViewportProvider.useViewport)();
65
49
  const additionalState = {
66
50
  checked,
@@ -68,15 +52,11 @@ const PressableCardBase = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
68
52
  inactive,
69
53
  viewport
70
54
  };
71
-
72
55
  const getCardState = pressableState => (0, _utils.resolvePressableState)(pressableState, additionalState);
73
-
74
56
  const getTokens = pressableState => (0, _ThemeProvider.validateThemeTokens)((0, _utils.resolvePressableTokens)(tokens, pressableState, additionalState), (0, _utils.getTokensSetPropType)(tokenKeys, {
75
57
  requireAll: true
76
58
  }), 'PressableCard');
77
-
78
59
  const getCardTokens = pressableState => (0, _utils.selectTokens)('Card', getTokens(pressableState));
79
-
80
60
  const getOuterBorderStyle = pressableState => {
81
61
  const {
82
62
  flex,
@@ -102,17 +82,14 @@ const PressableCardBase = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
102
82
  })
103
83
  };
104
84
  };
105
-
106
85
  const handleChange = _utils.linkProps.handleHref({
107
86
  href,
108
87
  onPress
109
88
  });
110
-
111
89
  const handleKeyDown = event => {
112
90
  // The expected keyboard shortcut for selecting a focused item is the Space key
113
91
  if ((event === null || event === void 0 ? void 0 : event.key) === ' ') handleChange(event);
114
92
  };
115
-
116
93
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
117
94
  ref: ref,
118
95
  href: href,
@@ -120,7 +97,8 @@ const PressableCardBase = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
120
97
  onKeyDown: handleKeyDown,
121
98
  hrefAttrs: hrefAttrs,
122
99
  style: getOuterBorderStyle,
123
- ...selectProps({ ...rest,
100
+ ...selectProps({
101
+ ...rest,
124
102
  accessibilityRole
125
103
  }),
126
104
  children: pressableState => /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
@@ -130,7 +108,8 @@ const PressableCardBase = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
130
108
  });
131
109
  });
132
110
  PressableCardBase.displayName = 'PressableCardBase';
133
- PressableCardBase.propTypes = { ...selectedSystemPropTypes,
111
+ PressableCardBase.propTypes = {
112
+ ...selectedSystemPropTypes,
134
113
  children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
135
114
  tokens: (0, _utils.getTokensSetPropType)(tokenKeys, {
136
115
  requireAll: true,
@@ -138,7 +117,5 @@ PressableCardBase.propTypes = { ...selectedSystemPropTypes,
138
117
  }),
139
118
  variant: _utils.variantProp.propType
140
119
  };
141
-
142
120
  var _default = (0, _utils.withLinkRouter)(PressableCardBase);
143
-
144
121
  exports.default = _default;
package/lib/Card/index.js CHANGED
@@ -13,11 +13,8 @@ Object.defineProperty(exports, "PressableCardBase", {
13
13
  }
14
14
  });
15
15
  exports.default = void 0;
16
-
17
16
  var _Card = _interopRequireDefault(require("./Card"));
18
-
19
17
  var _PressableCardBase = _interopRequireWildcard(require("./PressableCardBase"));
20
-
21
18
  Object.keys(_PressableCardBase).forEach(function (key) {
22
19
  if (key === "default" || key === "__esModule") return;
23
20
  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -29,12 +26,8 @@ Object.keys(_PressableCardBase).forEach(function (key) {
29
26
  }
30
27
  });
31
28
  });
32
-
33
29
  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); }
34
-
35
30
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
36
-
37
31
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
38
-
39
32
  var _default = _Card.default;
40
33
  exports.default = _default;