@telus-uds/components-base 1.65.0 → 1.67.0

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 (487) hide show
  1. package/CHANGELOG.md +22 -2
  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 +5 -37
  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 +215 -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 +7 -38
  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 +106 -69
  191. package/lib/TextInput/index.js +0 -3
  192. package/lib/TextInput/propTypes.js +4 -7
  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 +11 -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 +5 -23
  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 +205 -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 +7 -25
  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 +107 -51
  416. package/lib-module/TextInput/propTypes.js +7 -6
  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 +14 -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/CheckboxCardGroup/CheckboxCardGroup.jsx +230 -0
  481. package/src/CheckboxCardGroup/index.js +3 -0
  482. package/src/Modal/Modal.jsx +98 -5
  483. package/src/Modal/ModalContent.jsx +171 -0
  484. package/src/TextInput/TextInputBase.jsx +67 -12
  485. package/src/TextInput/propTypes.js +4 -0
  486. package/src/index.js +1 -0
  487. package/src/utils/props/textInputProps.js +1 -0
@@ -4,30 +4,22 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.uninitialisedError = exports.default = exports.ThemeSetterContext = exports.ThemeContext = void 0;
7
-
8
7
  var _react = _interopRequireWildcard(require("react"));
9
-
10
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
-
12
9
  var _utils = require("./utils");
13
-
14
10
  var _responsiveProps = _interopRequireDefault(require("../utils/props/responsiveProps"));
15
-
16
11
  var _jsxRuntime = require("react/jsx-runtime");
17
-
18
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
-
20
13
  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); }
21
-
22
14
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
23
-
24
15
  const uninitialisedError = new Error('Theme context used outside of ThemeProvider');
25
16
  exports.uninitialisedError = uninitialisedError;
26
17
  const ThemeContext = /*#__PURE__*/(0, _react.createContext)(uninitialisedError);
27
18
  exports.ThemeContext = ThemeContext;
28
- const ThemeSetterContext = /*#__PURE__*/(0, _react.createContext)(uninitialisedError); // These options default to `true` in v1.x to match legacy defaults and avoid breaking changes.
29
- // This should change in future major releases to become "opt-in" legacy support.
19
+ const ThemeSetterContext = /*#__PURE__*/(0, _react.createContext)(uninitialisedError);
30
20
 
21
+ // These options default to `true` in v1.x to match legacy defaults and avoid breaking changes.
22
+ // This should change in future major releases to become "opt-in" legacy support.
31
23
  exports.ThemeSetterContext = ThemeSetterContext;
32
24
  const defaultThemeOptions = {
33
25
  // TODO: switch `forceAbsoluteFontSizing` to be false by default in the next major version
@@ -37,7 +29,6 @@ const defaultThemeOptions = {
37
29
  // TODO: switch `enableHelmetSSR` to be false by default in the next major version
38
30
  enableHelmetSSR: true
39
31
  };
40
-
41
32
  const ThemeProvider = _ref => {
42
33
  let {
43
34
  children,
@@ -50,24 +41,26 @@ const ThemeProvider = _ref => {
50
41
  setTheme(defaultTheme);
51
42
  }
52
43
  }, [theme.metadata.name, defaultTheme]);
53
- const appliedThemeOptions = { ...defaultThemeOptions,
44
+ const appliedThemeOptions = {
45
+ ...defaultThemeOptions,
54
46
  ...themeOptions
55
- }; // Validate the theme tokens version on every render.
47
+ };
48
+
49
+ // Validate the theme tokens version on every render.
56
50
  // This will intentionally break the application when attempting to use an invalid theme.
57
51
  // This will surface an incompatibility quickly rather than allowing the potential for strange bugs due to missing or incompatible tokens.
58
-
59
52
  (0, _utils.validateThemeTokensVersion)(theme);
60
53
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ThemeSetterContext.Provider, {
61
54
  value: setTheme,
62
55
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ThemeContext.Provider, {
63
- value: { ...theme,
56
+ value: {
57
+ ...theme,
64
58
  themeOptions: appliedThemeOptions
65
59
  },
66
60
  children: children
67
61
  })
68
62
  });
69
63
  };
70
-
71
64
  ThemeProvider.propTypes = {
72
65
  children: _propTypes.default.node.isRequired,
73
66
  defaultTheme: _propTypes.default.shape({
@@ -76,7 +69,6 @@ ThemeProvider.propTypes = {
76
69
  name: _propTypes.default.string.isRequired
77
70
  }).isRequired
78
71
  }).isRequired,
79
-
80
72
  /**
81
73
  * An object containing options allowing to customize the theming experience:
82
74
  *
@@ -20,15 +20,10 @@ Object.defineProperty(exports, "useTheme", {
20
20
  return _useTheme.default;
21
21
  }
22
22
  });
23
-
24
23
  var _ThemeProvider = _interopRequireDefault(require("./ThemeProvider"));
25
-
26
24
  var _useTheme = _interopRequireDefault(require("./useTheme"));
27
-
28
25
  var _useSetTheme = _interopRequireDefault(require("./useSetTheme"));
29
-
30
26
  var _useThemeTokens = require("./useThemeTokens");
31
-
32
27
  Object.keys(_useThemeTokens).forEach(function (key) {
33
28
  if (key === "default" || key === "__esModule") return;
34
29
  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -40,9 +35,7 @@ Object.keys(_useThemeTokens).forEach(function (key) {
40
35
  }
41
36
  });
42
37
  });
43
-
44
38
  var _utils = require("./utils");
45
-
46
39
  Object.keys(_utils).forEach(function (key) {
47
40
  if (key === "default" || key === "__esModule") return;
48
41
  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -54,8 +47,6 @@ Object.keys(_utils).forEach(function (key) {
54
47
  }
55
48
  });
56
49
  });
57
-
58
50
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
59
-
60
51
  var _default = _ThemeProvider.default;
61
52
  exports.default = _default;
@@ -4,23 +4,21 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
-
8
7
  var _react = require("react");
9
-
10
8
  var _ThemeProvider = require("./ThemeProvider");
11
-
12
9
  const useSetTheme = () => {
13
10
  // Replace current theme with provided object
14
- const setTheme = (0, _react.useContext)(_ThemeProvider.ThemeSetterContext); // Fail fast if dev uses useSetTheme outside of ThemeProvider
15
-
11
+ const setTheme = (0, _react.useContext)(_ThemeProvider.ThemeSetterContext);
12
+ // Fail fast if dev uses useSetTheme outside of ThemeProvider
16
13
  if (setTheme instanceof Error) {
17
14
  throw setTheme;
18
- } // Merge provided object into current theme
19
-
15
+ }
20
16
 
17
+ // Merge provided object into current theme
21
18
  const editTheme = (0, _react.useCallback)(newTheme => setTheme(function () {
22
19
  let oldTheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
23
- return { ...oldTheme,
20
+ return {
21
+ ...oldTheme,
24
22
  ...newTheme
25
23
  };
26
24
  }), [setTheme]);
@@ -29,6 +27,5 @@ const useSetTheme = () => {
29
27
  editTheme
30
28
  };
31
29
  };
32
-
33
30
  var _default = useSetTheme;
34
31
  exports.default = _default;
@@ -4,20 +4,15 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
-
8
7
  var _react = require("react");
9
-
10
8
  var _ThemeProvider = require("./ThemeProvider");
11
-
12
9
  const useTheme = () => {
13
- const theme = (0, _react.useContext)(_ThemeProvider.ThemeContext); // Fail fast if dev uses useTheme outside of ThemeProvider
14
-
10
+ const theme = (0, _react.useContext)(_ThemeProvider.ThemeContext);
11
+ // Fail fast if dev uses useTheme outside of ThemeProvider
15
12
  if (theme instanceof Error) {
16
13
  throw theme;
17
14
  }
18
-
19
15
  return theme;
20
16
  };
21
-
22
17
  var _default = useTheme;
23
18
  exports.default = _default;
@@ -4,15 +4,10 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.useThemeTokensCallback = exports.useThemeTokens = void 0;
7
-
8
7
  var _react = require("react");
9
-
10
8
  var _useTheme = _interopRequireDefault(require("./useTheme"));
11
-
12
9
  var _utils = require("./utils");
13
-
14
10
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
-
16
11
  /**
17
12
  * @typedef {import('../utils/props/variantProp.js').AppearanceSet} AppearanceSet
18
13
  * @typedef {import('../utils/props/tokens.js').TokensProp} TokensProp
@@ -54,6 +49,7 @@ const useThemeTokens = function (componentName) {
54
49
  const themeTokens = (0, _utils.getThemeTokens)(componentTheme, tokens, variants, states);
55
50
  return themeTokens;
56
51
  };
52
+
57
53
  /**
58
54
  * Returns a memoised tokens getter function that gets tokens similar to calling useThemeTokens.
59
55
  * Scenarios where `useThemeTokensCallback` should be used instead of `useThemeTokens` include:
@@ -106,10 +102,7 @@ const useThemeTokens = function (componentName) {
106
102
  * tokenOverrides in rare cases where tokens overrides are also generated outside hook scope,
107
103
  * e.g. if one theme tokens callback needs to pass certain token overrides to another.
108
104
  */
109
-
110
-
111
105
  exports.useThemeTokens = useThemeTokens;
112
-
113
106
  const useThemeTokensCallback = function (componentName) {
114
107
  let tokens = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
115
108
  let variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
@@ -122,5 +115,4 @@ const useThemeTokensCallback = function (componentName) {
122
115
  }, [componentTheme, tokens, variants]);
123
116
  return getThemeTokensCallback;
124
117
  };
125
-
126
118
  exports.useThemeTokensCallback = useThemeTokensCallback;
@@ -3,9 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
-
7
6
  var _styles = require("./styles");
8
-
9
7
  Object.keys(_styles).forEach(function (key) {
10
8
  if (key === "default" || key === "__esModule") return;
11
9
  if (key in exports && exports[key] === _styles[key]) return;
@@ -16,9 +14,7 @@ Object.keys(_styles).forEach(function (key) {
16
14
  }
17
15
  });
18
16
  });
19
-
20
17
  var _themeTokens = require("./theme-tokens");
21
-
22
18
  Object.keys(_themeTokens).forEach(function (key) {
23
19
  if (key === "default" || key === "__esModule") return;
24
20
  if (key in exports && exports[key] === _themeTokens[key]) return;
@@ -7,17 +7,14 @@ exports.applyOuterBorder = void 0;
7
7
  exports.applyShadowToken = applyShadowToken;
8
8
  exports.applyTextStyles = applyTextStyles;
9
9
  exports.verticalAlignRow = verticalAlignRow;
10
-
11
10
  var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
12
-
13
11
  var _systemConstants = require("@telus-uds/system-constants");
14
-
15
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
16
-
17
13
  /**
18
14
  * React-Native specific implementations of style patterns that
19
15
  * don't map directly to cross-platform design token values.
20
16
  */
17
+
21
18
  // Make design tokens fit React Native's text styles' specific requirements and quirks
22
19
  function applyTextStyles(_ref) {
23
20
  let {
@@ -35,27 +32,24 @@ function applyTextStyles(_ref) {
35
32
  },
36
33
  ...rest
37
34
  } = _ref;
38
- const styles = { ...rest
35
+ const styles = {
36
+ ...rest
39
37
  };
40
38
  const {
41
39
  forceAbsoluteFontSizing
42
40
  } = themeOptions;
43
-
44
41
  if (fontSize) {
45
42
  // If relative font sizes are needed, catch and calculate them here
46
43
  styles.fontSize = _Platform.default.OS === 'web' && !forceAbsoluteFontSizing ? `${fontSize / _systemConstants.fontBasePixels}rem` : fontSize;
47
44
  }
48
-
49
45
  if (typeof lineHeight === 'number') {
50
46
  // React Native expects absolute line heights but multipliers are better as design tokens
51
47
  styles.lineHeight = lineHeight * (fontSize || _systemConstants.fontBasePixels);
52
48
  }
53
-
54
49
  if (typeof letterSpacing === 'number' && letterSpacing) {
55
50
  // Same as for line heights - React Native expects absolute letter spacing value
56
51
  styles.letterSpacing = letterSpacing * (fontSize || _systemConstants.fontBasePixels);
57
52
  }
58
-
59
53
  if (fontName) {
60
54
  // Don't set undefined font families. May need some validation here that the font is available.
61
55
  // Android doesn't recognise font weights natively so apply custom font weights via `fontFamily`.
@@ -65,16 +59,17 @@ function applyTextStyles(_ref) {
65
59
  // Font weight support in Android is limited to 'bold' or anything else === 'normal'.
66
60
  styles.fontWeight = _Platform.default.OS === 'android' && Number(fontWeight) > 400 ? 'bold' : fontWeight;
67
61
  }
68
-
69
62
  if (fontColor) {
70
63
  styles.color = fontColor;
71
- } // TODO: look into calculating typographic spacing with PixelRatio.getFontScale()
64
+ }
65
+
66
+ // TODO: look into calculating typographic spacing with PixelRatio.getFontScale()
72
67
  // Do while implementing advanced typography e.g. paragraph etc
73
68
  // https://github.com/telus/universal-design-system/issues/89
74
69
 
75
-
76
70
  return styles;
77
71
  }
72
+
78
73
  /**
79
74
  * React Native's in-built shadow support is limited. Take an object describing an ideal shadow and
80
75
  * return a platform-appropriate implementation that gets close to the described effect.
@@ -88,20 +83,15 @@ function applyTextStyles(_ref) {
88
83
  * @param {number} shadowToken.spread
89
84
  * @return {object}
90
85
  */
91
-
92
-
93
86
  function applyShadowToken(shadowToken) {
94
87
  if (!shadowToken) return {};
95
-
96
88
  const applyShadow = _Platform.default.select({
97
89
  web: () => applyWebShadow(shadowToken),
98
90
  ios: () => applyIosShadow(shadowToken),
99
91
  android: () => applyAndroidShadow(shadowToken)
100
92
  });
101
-
102
93
  return applyShadow();
103
94
  }
104
-
105
95
  function applyWebShadow(_ref2) {
106
96
  let {
107
97
  inset,
@@ -117,7 +107,6 @@ function applyWebShadow(_ref2) {
117
107
  };
118
108
  return boxShadow;
119
109
  }
120
-
121
110
  function applyAndroidShadow(shadowToken) {
122
111
  const {
123
112
  color,
@@ -125,23 +114,20 @@ function applyAndroidShadow(shadowToken) {
125
114
  spread,
126
115
  offsetY,
127
116
  offsetX
128
- } = shadowToken; // Android shadows are very limited and workarounds are hacky. Use the built-in `elevation` API unless
117
+ } = shadowToken;
118
+ // Android shadows are very limited and workarounds are hacky. Use the built-in `elevation` API unless
129
119
  // shadow design is radically different to a simple top-down shadow (e.g. horizontal, upward, or inset)
130
-
131
120
  if (!inset && offsetY >= 0 && offsetY >= offsetX) {
132
121
  return {
133
122
  // Can't match other platforms, but can give longer shadows to elements designed for longer shadows
134
123
  elevation: spread + offsetY,
135
124
  shadowColor: color // Only applies on Android >= 9 and React Native >= 0.64.0
136
-
137
125
  };
138
- } // TODO: maybe use a library or workaround to increase capabilities.
126
+ }
127
+ // TODO: maybe use a library or workaround to increase capabilities.
139
128
  // https://github.com/telus/universal-design-system/issues/535
140
-
141
-
142
129
  return {};
143
130
  }
144
-
145
131
  function applyIosShadow(_ref3) {
146
132
  let {
147
133
  inset,
@@ -155,15 +141,15 @@ function applyIosShadow(_ref3) {
155
141
  // TODO: maybe use a library or workaround for inset shadows. This is a sizable task and would
156
142
  // involve changing component implementations to use a custom view, can't be done with styles alone.
157
143
  // https://github.com/telus/universal-design-system/issues/535
158
- if (inset) return {}; // React Native iOS doesn't support spread. Where there's an offset, can approximate positive spread by
144
+ if (inset) return {};
145
+
146
+ // React Native iOS doesn't support spread. Where there's an offset, can approximate positive spread by
159
147
  // increasing the (positive or negative) offset by the spread. This makes the shadow reach the point it
160
148
  // would if spread was supported (with a side effect that its start is further "under" the element).
161
-
162
149
  const nudgeBySpread = offset => {
163
150
  if (!offset || spread <= 0) return 0;
164
151
  return offset > 0 ? spread : spread * -1;
165
152
  };
166
-
167
153
  return {
168
154
  shadowColor: color,
169
155
  shadowOffset: {
@@ -172,7 +158,6 @@ function applyIosShadow(_ref3) {
172
158
  },
173
159
  shadowRadius: blur,
174
160
  shadowOpacity: 1 // opacity is applied via RGBA in the `color` token
175
-
176
161
  };
177
162
  }
178
163
 
@@ -181,7 +166,6 @@ const verticalAlignToFlexRowAlign = {
181
166
  middle: 'center',
182
167
  bottom: 'flex-end'
183
168
  };
184
-
185
169
  function verticalAlignRow(verticalAlign) {
186
170
  let reverse = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
187
171
  return {
@@ -189,20 +173,16 @@ function verticalAlignRow(verticalAlign) {
189
173
  alignItems: verticalAlignToFlexRowAlign[verticalAlign]
190
174
  };
191
175
  }
192
-
193
176
  const calculateBorderRadius = (borderRadius, outerBorderGap, outerBorderWidth) => {
194
177
  if (borderRadius) {
195
178
  return borderRadius + outerBorderGap + outerBorderWidth;
196
179
  }
197
-
198
180
  return null;
199
181
  };
200
182
  /**
201
183
  * Use on an outer container to create an outer border with an optional gap around it
202
184
  * that matches the border radius of any inner border.
203
185
  */
204
-
205
-
206
186
  const applyOuterBorder = _ref4 => {
207
187
  let {
208
188
  outerBorderColor,
@@ -226,5 +206,4 @@ const applyOuterBorder = _ref4 => {
226
206
  borderColor: outerBorderColor
227
207
  };
228
208
  };
229
-
230
209
  exports.applyOuterBorder = applyOuterBorder;
@@ -4,15 +4,10 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.validateThemeTokensVersion = exports.validateThemeTokens = exports.toArray = exports.resolveThemeTokens = exports.mergeAppearances = exports.getThemeTokens = exports.getComponentTheme = exports.doesThemeRuleApply = exports.doesThemeConditionApply = void 0;
7
-
8
7
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
-
10
8
  var _satisfies = _interopRequireDefault(require("semver/functions/satisfies"));
11
-
12
9
  var _package = _interopRequireDefault(require("../../../package.json"));
13
-
14
10
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
-
16
11
  /**
17
12
  * @typedef {import('../../utils/props/variantProp.js').AppearanceSet} AppearanceSet
18
13
  * @typedef {import('../../utils/props/tokens.js').TokensProp} TokensProp
@@ -22,42 +17,34 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
22
17
  /**
23
18
  * General utilities around working with theme tokens
24
19
  */
20
+
25
21
  const getComponentTheme = (theme, componentName) => {
26
22
  var _theme$metadata;
27
-
28
23
  // Give clear and understandable error messages for common dev errors, for example,
29
24
  // typo in component name, missing export or accessing old version of theme
30
25
  if (!theme) {
31
26
  throw new Error(`Called useTheme's getStyle on "${componentName}" with no theme provided`);
32
27
  }
33
-
34
28
  const themeName = ((_theme$metadata = theme.metadata) === null || _theme$metadata === void 0 ? void 0 : _theme$metadata.name) || '';
35
-
36
29
  if (!theme.components) {
37
30
  throw new Error(`Theme "${themeName}" has no components defined (looking for "${componentName}")`);
38
31
  }
39
-
40
32
  const componentTheme = theme.components[componentName];
41
-
42
33
  if (!componentTheme) {
43
34
  throw new Error(`Theme "${themeName}" does not have styles for component "${componentName}"`);
44
35
  }
45
-
46
36
  return componentTheme;
47
37
  };
48
-
49
38
  exports.getComponentTheme = getComponentTheme;
50
-
51
39
  const doesThemeConditionApply = (_ref, appearances) => {
52
40
  let [key, value] = _ref;
53
41
  // use null rather than undefined so we can serialise the value in themes
54
42
  const appearanceValue = appearances[key] ?? null;
55
43
  return Array.isArray(value) ? value.includes(appearanceValue) : value === appearanceValue;
56
44
  };
57
-
58
45
  exports.doesThemeConditionApply = doesThemeConditionApply;
59
-
60
46
  const doesThemeRuleApply = (rule, appearances) => Object.entries(rule.if).every(condition => doesThemeConditionApply(condition, appearances));
47
+
61
48
  /**
62
49
  * Turns a tokens prop (which may be either a tokens object or a tokens getter function)
63
50
  * into one resolved tokens object, based on current appearances state.
@@ -74,24 +61,21 @@ const doesThemeRuleApply = (rule, appearances) => Object.entries(rule.if).every(
74
61
  * @param {TokensProp} [tokenOverrides] - optional set of tokens or tokens getter function to override the default
75
62
  * @returns {TokensSet} - object containing resolved tokens with overrides applied
76
63
  */
77
-
78
-
79
64
  exports.doesThemeRuleApply = doesThemeRuleApply;
80
-
81
65
  const resolveThemeTokens = function (defaultTokens) {
82
66
  let appearances = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
83
67
  let tokenOverrides = arguments.length > 2 ? arguments[2] : undefined;
84
-
85
68
  const resolve = tokens => typeof tokens === 'function' ? tokens(appearances) : tokens;
86
-
87
69
  if (!tokenOverrides) return resolve(defaultTokens);
88
70
  return Object.entries(resolve(tokenOverrides)).reduce((mergedTokens, _ref2) => {
89
71
  let [tokenName, tokenValue] = _ref2;
90
- return tokenValue === undefined ? mergedTokens : { ...mergedTokens,
72
+ return tokenValue === undefined ? mergedTokens : {
73
+ ...mergedTokens,
91
74
  [tokenName]: tokenValue
92
75
  };
93
76
  }, resolve(defaultTokens));
94
77
  };
78
+
95
79
  /**
96
80
  * Gives a prop types error if a set of resolved tokens doesn't match a provided prop
97
81
  * types validator.
@@ -103,19 +87,16 @@ const resolveThemeTokens = function (defaultTokens) {
103
87
  * @param {function} validator - PropTypes validator function
104
88
  * @param {string} componentName - identifier to display in PropType error messages
105
89
  */
106
-
107
-
108
90
  exports.resolveThemeTokens = resolveThemeTokens;
109
-
110
91
  const validateThemeTokens = (themeTokens, validator, componentName) => {
111
92
  _propTypes.default.checkPropTypes({
112
93
  tokens: validator
113
94
  }, {
114
95
  tokens: themeTokens
115
96
  }, 'resolved token', componentName);
116
-
117
97
  return themeTokens;
118
98
  };
99
+
119
100
  /**
120
101
  * Merges variants over states. Must be merged in that order to allow static showcases of a state,
121
102
  * e.g. `<Button variant={{ pressed: true }} />` where button's pressed state is `false` by default.
@@ -125,17 +106,16 @@ const validateThemeTokens = (themeTokens, validator, componentName) => {
125
106
  * @param {AppearanceSet} [states]
126
107
  * @returns {AppearanceSet}
127
108
  */
128
-
129
-
130
109
  exports.validateThemeTokens = validateThemeTokens;
131
-
132
110
  const mergeAppearances = function () {
133
111
  let variants = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
134
112
  let states = arguments.length > 1 ? arguments[1] : undefined;
135
- return states ? { ...states,
113
+ return states ? {
114
+ ...states,
136
115
  ...variants
137
116
  } : variants;
138
117
  };
118
+
139
119
  /**
140
120
  * Get a set of theme tokens by applying a theme's component rules based on a component's variants and state.
141
121
  *
@@ -147,10 +127,7 @@ const mergeAppearances = function () {
147
127
  * @param {object} [states] - object containing current state options for this component instance
148
128
  * @returns {object} Set of resolved theme tokens
149
129
  */
150
-
151
-
152
130
  exports.mergeAppearances = mergeAppearances;
153
-
154
131
  const getThemeTokens = function (_ref3, tokensProp) {
155
132
  let {
156
133
  rules = [],
@@ -158,18 +135,19 @@ const getThemeTokens = function (_ref3, tokensProp) {
158
135
  } = _ref3;
159
136
  let variants = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
160
137
  let states = arguments.length > 3 ? arguments[3] : undefined;
161
- const appearances = mergeAppearances(variants, states); // TODO: if in dev mode, validate the appearances and provided propTokens
162
- // Get the theme's default tokens set and merge tokens from applicable theme rules over it
138
+ const appearances = mergeAppearances(variants, states);
139
+ // TODO: if in dev mode, validate the appearances and provided propTokens
163
140
 
164
- const themeTokens = rules.reduce((mergedTokens, rule) => doesThemeRuleApply(rule, appearances) ? { ...mergedTokens,
141
+ // Get the theme's default tokens set and merge tokens from applicable theme rules over it
142
+ const themeTokens = rules.reduce((mergedTokens, rule) => doesThemeRuleApply(rule, appearances) ? {
143
+ ...mergedTokens,
165
144
  ...rule.tokens
166
145
  } : mergedTokens, defaultThemeTokens);
167
146
  return resolveThemeTokens(themeTokens, appearances, tokensProp);
168
147
  };
169
-
170
148
  exports.getThemeTokens = getThemeTokens;
171
-
172
149
  const toArray = strOrArr => Array.isArray(strOrArr) ? strOrArr : [strOrArr];
150
+
173
151
  /**
174
152
  * Throws an error if the theme was built with an incompatible version of @telus-uds/system-theme-tokens
175
153
  *
@@ -181,16 +159,11 @@ const toArray = strOrArr => Array.isArray(strOrArr) ? strOrArr : [strOrArr];
181
159
  *
182
160
  * @param {object} theme - UDS theme built for react-native
183
161
  */
184
-
185
-
186
162
  exports.toArray = toArray;
187
-
188
163
  const validateThemeTokensVersion = theme => {
189
164
  var _theme$metadata2;
190
-
191
165
  const expectedThemeTokensVersion = _package.default.dependencies['@telus-uds/system-theme-tokens'];
192
166
  const actualThemeTokensVersion = theme === null || theme === void 0 ? void 0 : (_theme$metadata2 = theme.metadata) === null || _theme$metadata2 === void 0 ? void 0 : _theme$metadata2.themeTokensVersion;
193
-
194
167
  if (!(0, _satisfies.default)(actualThemeTokensVersion, expectedThemeTokensVersion)) {
195
168
  throw new Error(`Invalid UDS token schema version detected.
196
169
 
@@ -199,5 +172,4 @@ The UDS base components ${_package.default.name} v${_package.default.version} ar
199
172
  If you see this error than most likely you have attempted to install ${_package.default.name} and a UDS theme manually because you are building a multi-brand application. If you are building a single brand application, consider installing the brand specific design system package such as @telus-uds/ds-allium. For more information, see https://github.com/telus/universal-design-system/blob/main/docs/docs/multi-brand-usage.md`);
200
173
  }
201
174
  };
202
-
203
175
  exports.validateThemeTokensVersion = validateThemeTokensVersion;