@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.
- package/CHANGELOG.md +22 -2
- package/lib/A11yInfoProvider/index.js +5 -20
- package/lib/A11yText/index.js +3 -17
- package/lib/ActivityIndicator/Spinner.js +2 -9
- package/lib/ActivityIndicator/Spinner.native.js +4 -27
- package/lib/ActivityIndicator/index.js +1 -13
- package/lib/ActivityIndicator/shared.js +0 -3
- package/lib/Autocomplete/Autocomplete.js +34 -85
- package/lib/Autocomplete/Loading.js +0 -10
- package/lib/Autocomplete/Suggestions.js +0 -11
- package/lib/Autocomplete/index.js +0 -3
- package/lib/BaseProvider/HydrationContext.js +4 -18
- package/lib/BaseProvider/index.js +0 -12
- package/lib/Box/Box.js +10 -35
- package/lib/Box/index.js +0 -3
- package/lib/Button/Button.js +4 -13
- package/lib/Button/ButtonBase.js +23 -55
- package/lib/Button/ButtonDropdown.js +7 -32
- package/lib/Button/ButtonGroup.js +15 -48
- package/lib/Button/ButtonLink.js +3 -17
- package/lib/Button/index.js +0 -5
- package/lib/Button/propTypes.js +0 -15
- package/lib/Card/Card.js +3 -14
- package/lib/Card/CardBase.js +5 -16
- package/lib/Card/PressableCardBase.js +7 -30
- package/lib/Card/index.js +0 -7
- package/lib/Carousel/Carousel.js +22 -115
- package/lib/Carousel/CarouselContext.js +0 -14
- package/lib/Carousel/CarouselFirstFocus/CarouselFirstFocus.js +6 -18
- package/lib/Carousel/CarouselItem/CarouselItem.js +5 -20
- package/lib/Carousel/CarouselItem/index.js +0 -3
- package/lib/Carousel/CarouselStepTracker/CarouselStepTracker.js +0 -9
- package/lib/Carousel/CarouselStepTracker/index.js +0 -3
- package/lib/Carousel/CarouselTabs/CarouselTabs.js +5 -15
- package/lib/Carousel/CarouselTabs/CarouselTabsPanel.js +7 -16
- package/lib/Carousel/CarouselTabs/CarouselTabsPanelItem.js +2 -22
- package/lib/Carousel/CarouselTabs/index.js +0 -3
- package/lib/Carousel/CarouselThumbnail.js +1 -16
- package/lib/Carousel/CarouselThumbnailNavigation.js +0 -15
- package/lib/Carousel/index.js +0 -5
- package/lib/Checkbox/Checkbox.js +5 -44
- package/lib/Checkbox/CheckboxButton.js +7 -33
- package/lib/Checkbox/CheckboxGroup.js +5 -37
- package/lib/Checkbox/CheckboxInput.js +1 -11
- package/lib/Checkbox/CheckboxInput.native.js +0 -2
- package/lib/Checkbox/index.js +0 -4
- package/lib/CheckboxCard/CheckboxCard.js +4 -37
- package/lib/CheckboxCard/index.js +0 -3
- package/lib/CheckboxCardGroup/CheckboxCardGroup.js +215 -0
- package/lib/CheckboxCardGroup/index.js +10 -0
- package/lib/Divider/Divider.js +13 -24
- package/lib/Divider/index.js +0 -3
- package/lib/ExpandCollapse/Accordion.js +1 -9
- package/lib/ExpandCollapse/Control.js +10 -32
- package/lib/ExpandCollapse/ExpandCollapse.js +3 -19
- package/lib/ExpandCollapse/Panel.js +13 -38
- package/lib/ExpandCollapse/index.js +0 -5
- package/lib/Feedback/Feedback.js +13 -30
- package/lib/Feedback/index.js +0 -3
- package/lib/Fieldset/Fieldset.js +6 -37
- package/lib/Fieldset/FieldsetContainer.js +1 -10
- package/lib/Fieldset/FieldsetContainer.native.js +0 -8
- package/lib/Fieldset/Legend.js +1 -10
- package/lib/Fieldset/Legend.native.js +1 -13
- package/lib/Fieldset/index.js +0 -3
- package/lib/FlexGrid/Col/Col.js +10 -53
- package/lib/FlexGrid/Col/index.js +0 -3
- package/lib/FlexGrid/FlexGrid.js +3 -34
- package/lib/FlexGrid/Row/Row.js +0 -38
- package/lib/FlexGrid/Row/index.js +0 -3
- package/lib/FlexGrid/helpers/index.js +0 -4
- package/lib/FlexGrid/index.js +0 -3
- package/lib/FlexGrid/providers/GutterContext.js +0 -4
- package/lib/HorizontalScroll/HorizontalScroll.js +17 -45
- package/lib/HorizontalScroll/HorizontalScrollButton.js +1 -17
- package/lib/HorizontalScroll/ScrollViewEnd.js +5 -13
- package/lib/HorizontalScroll/ScrollViewEnd.native.js +1 -10
- package/lib/HorizontalScroll/index.js +0 -7
- package/lib/HorizontalScroll/itemPositions.js +8 -19
- package/lib/Icon/Icon.js +4 -17
- package/lib/Icon/IconText.js +5 -25
- package/lib/Icon/index.js +0 -6
- package/lib/IconButton/IconButton.js +5 -37
- package/lib/IconButton/index.js +0 -3
- package/lib/InputLabel/InputLabel.js +4 -28
- package/lib/InputLabel/LabelContent.js +2 -8
- package/lib/InputLabel/LabelContent.native.js +0 -8
- package/lib/InputLabel/index.js +0 -3
- package/lib/InputSupports/InputSupports.js +0 -21
- package/lib/InputSupports/index.js +0 -3
- package/lib/InputSupports/useInputSupports.js +2 -6
- package/lib/Link/ChevronLink.js +7 -18
- package/lib/Link/InlinePressable.js +0 -10
- package/lib/Link/InlinePressable.native.js +5 -18
- package/lib/Link/Link.js +0 -8
- package/lib/Link/LinkBase.js +17 -47
- package/lib/Link/TextButton.js +3 -16
- package/lib/Link/index.js +0 -5
- package/lib/List/List.js +5 -21
- package/lib/List/ListItem.js +1 -11
- package/lib/List/ListItemBase.js +5 -34
- package/lib/List/ListItemContent.js +1 -14
- package/lib/List/ListItemMark.js +3 -23
- package/lib/List/PressableListItemBase.js +2 -28
- package/lib/List/index.js +0 -4
- package/lib/Listbox/GroupControl.js +0 -14
- package/lib/Listbox/Listbox.js +15 -40
- package/lib/Listbox/ListboxContext.js +0 -7
- package/lib/Listbox/ListboxGroup.js +7 -19
- package/lib/Listbox/ListboxItem.js +3 -17
- package/lib/Listbox/ListboxOverlay.js +4 -20
- package/lib/Listbox/PressableItem.js +3 -18
- package/lib/Listbox/index.js +0 -3
- package/lib/Modal/Modal.js +94 -45
- package/lib/Modal/ModalContent.js +184 -0
- package/lib/Modal/index.js +0 -3
- package/lib/MultiSelectFilter/ModalOverlay.js +1 -20
- package/lib/MultiSelectFilter/MultiSelectFilter.js +20 -69
- package/lib/MultiSelectFilter/index.js +0 -3
- package/lib/Notification/Notification.js +11 -38
- package/lib/Notification/index.js +0 -3
- package/lib/Pagination/PageButton.js +2 -22
- package/lib/Pagination/Pagination.js +21 -42
- package/lib/Pagination/SideButton.js +0 -24
- package/lib/Pagination/index.js +0 -3
- package/lib/Pagination/usePagination.js +4 -9
- package/lib/Progress/Progress.js +3 -17
- package/lib/Progress/ProgressBar.js +3 -25
- package/lib/Progress/ProgressBarBackground.js +0 -12
- package/lib/Progress/index.js +0 -4
- package/lib/QuickLinks/QuickLinks.js +1 -18
- package/lib/QuickLinks/QuickLinksCard.js +1 -11
- package/lib/QuickLinks/QuickLinksItem.js +3 -17
- package/lib/QuickLinks/index.js +0 -4
- package/lib/QuickLinksFeature/QuickLinksFeature.js +3 -20
- package/lib/QuickLinksFeature/QuickLinksFeatureItem.js +7 -30
- package/lib/QuickLinksFeature/index.js +0 -4
- package/lib/Radio/Radio.js +5 -39
- package/lib/Radio/RadioButton.js +7 -26
- package/lib/Radio/RadioGroup.js +6 -39
- package/lib/Radio/RadioInput.js +1 -11
- package/lib/Radio/RadioInput.native.js +0 -2
- package/lib/Radio/index.js +0 -4
- package/lib/RadioCard/RadioCard.js +5 -38
- package/lib/RadioCard/RadioCardGroup.js +7 -38
- package/lib/RadioCard/index.js +0 -4
- package/lib/Responsive/Responsive.js +1 -14
- package/lib/Responsive/index.js +0 -3
- package/lib/Search/Search.js +22 -45
- package/lib/Search/index.js +0 -3
- package/lib/Select/Group.js +0 -8
- package/lib/Select/Group.native.js +0 -6
- package/lib/Select/Item.js +0 -7
- package/lib/Select/Item.native.js +0 -2
- package/lib/Select/Picker.js +0 -8
- package/lib/Select/Picker.native.js +6 -22
- package/lib/Select/Select.js +9 -52
- package/lib/Select/index.js +0 -5
- package/lib/SideNav/Item.js +5 -29
- package/lib/SideNav/ItemContent.js +1 -14
- package/lib/SideNav/ItemsGroup.js +9 -31
- package/lib/SideNav/SideNav.js +9 -33
- package/lib/SideNav/index.js +0 -2
- package/lib/Skeleton/Skeleton.js +10 -42
- package/lib/Skeleton/index.js +0 -3
- package/lib/Skeleton/skeletonWebAnimation.js +0 -2
- package/lib/Skeleton/useSkeletonNativeAnimation.js +1 -9
- package/lib/SkipLink/SkipLink.js +7 -27
- package/lib/SkipLink/index.js +0 -3
- package/lib/Spacer/Spacer.js +4 -20
- package/lib/Spacer/index.js +0 -3
- package/lib/StackView/StackView.js +3 -21
- package/lib/StackView/StackWrap.js +11 -21
- package/lib/StackView/StackWrap.native.js +0 -3
- package/lib/StackView/StackWrapBox.js +5 -21
- package/lib/StackView/StackWrapGap.js +1 -14
- package/lib/StackView/common.js +0 -6
- package/lib/StackView/getStackedContent.js +10 -21
- package/lib/StackView/index.js +0 -5
- package/lib/StepTracker/Step.js +3 -27
- package/lib/StepTracker/StepTracker.js +5 -32
- package/lib/StepTracker/index.js +0 -3
- package/lib/Tabs/Tabs.js +7 -30
- package/lib/Tabs/TabsItem.js +13 -38
- package/lib/Tabs/index.js +0 -3
- package/lib/Tags/Tags.js +9 -42
- package/lib/Tags/index.js +0 -3
- package/lib/TextInput/TextArea.js +11 -20
- package/lib/TextInput/TextInput.js +7 -16
- package/lib/TextInput/TextInputBase.js +106 -69
- package/lib/TextInput/index.js +0 -3
- package/lib/TextInput/propTypes.js +4 -7
- package/lib/ThemeProvider/ThemeProvider.js +10 -18
- package/lib/ThemeProvider/index.js +0 -9
- package/lib/ThemeProvider/useSetTheme.js +6 -9
- package/lib/ThemeProvider/useTheme.js +2 -7
- package/lib/ThemeProvider/useThemeTokens.js +1 -9
- package/lib/ThemeProvider/utils/index.js +0 -4
- package/lib/ThemeProvider/utils/styles.js +14 -35
- package/lib/ThemeProvider/utils/theme-tokens.js +15 -43
- package/lib/Timeline/Timeline.js +11 -27
- package/lib/Timeline/index.js +0 -3
- package/lib/ToggleSwitch/ToggleSwitch.js +12 -43
- package/lib/ToggleSwitch/ToggleSwitchGroup.js +4 -38
- package/lib/ToggleSwitch/index.js +0 -3
- package/lib/Tooltip/Backdrop.js +4 -11
- package/lib/Tooltip/Backdrop.native.js +1 -14
- package/lib/Tooltip/Tooltip.js +9 -37
- package/lib/Tooltip/Tooltip.native.js +14 -45
- package/lib/Tooltip/getTooltipPosition.js +26 -31
- package/lib/Tooltip/index.js +0 -5
- package/lib/Tooltip/shared.js +0 -10
- package/lib/TooltipButton/TooltipButton.js +5 -20
- package/lib/TooltipButton/index.js +0 -3
- package/lib/Typography/Typography.js +15 -38
- package/lib/Typography/index.js +0 -3
- package/lib/Validator/Validator.js +10 -58
- package/lib/Validator/index.js +0 -3
- package/lib/ViewportProvider/ViewportProvider.js +1 -13
- package/lib/ViewportProvider/index.js +0 -5
- package/lib/ViewportProvider/useViewport.js +0 -4
- package/lib/ViewportProvider/useViewportListener.js +3 -12
- package/lib/index.js +8 -71
- package/lib/utils/BaseView/BaseView.js +3 -17
- package/lib/utils/BaseView/BaseView.native.js +0 -3
- package/lib/utils/BaseView/index.js +0 -3
- package/lib/utils/a11y/index.js +0 -4
- package/lib/utils/a11y/semantics.js +14 -32
- package/lib/utils/a11y/textSize.js +1 -8
- package/lib/utils/animation/index.js +0 -2
- package/lib/utils/animation/useVerticalExpandAnimation.js +5 -18
- package/lib/utils/children.js +16 -28
- package/lib/utils/containUniqueFields.js +2 -5
- package/lib/utils/floating-ui/index.js +0 -1
- package/lib/utils/floating-ui/index.native.js +0 -1
- package/lib/utils/hasOwnProperty.js +0 -1
- package/lib/utils/htmlAttrs.js +2 -4
- package/lib/utils/index.js +0 -31
- package/lib/utils/info/index.js +0 -4
- package/lib/utils/info/platform/index.js +0 -4
- package/lib/utils/info/versions.js +0 -3
- package/lib/utils/input.js +12 -24
- package/lib/utils/pressability.js +7 -21
- package/lib/utils/props/a11yProps.js +19 -25
- package/lib/utils/props/clickProps.js +0 -4
- package/lib/utils/props/componentPropType.js +0 -14
- package/lib/utils/props/copyPropTypes.js +0 -4
- package/lib/utils/props/getPropSelector.js +11 -12
- package/lib/utils/props/handlerProps.js +2 -23
- package/lib/utils/props/hrefAttrsProp.js +0 -4
- package/lib/utils/props/index.js +0 -22
- package/lib/utils/props/inputSupportsProps.js +0 -9
- package/lib/utils/props/linkProps.js +2 -12
- package/lib/utils/props/paddingProp.js +0 -3
- package/lib/utils/props/pressProps.js +2 -8
- package/lib/utils/props/rectProp.js +0 -3
- package/lib/utils/props/responsiveProps.js +1 -5
- package/lib/utils/props/selectSystemProps.js +4 -6
- package/lib/utils/props/spacingProps.js +3 -10
- package/lib/utils/props/textInputProps.js +11 -31
- package/lib/utils/props/textProps.js +6 -11
- package/lib/utils/props/tokens.js +7 -26
- package/lib/utils/props/variantProp.js +0 -3
- package/lib/utils/props/viewProps.js +0 -5
- package/lib/utils/ssr.js +13 -33
- package/lib/utils/useCopy.js +3 -6
- package/lib/utils/useHash.js +5 -10
- package/lib/utils/useHash.native.js +0 -2
- package/lib/utils/useOverlaidPosition.js +6 -29
- package/lib/utils/useResponsiveProp.js +6 -13
- package/lib/utils/useSafeLayoutEffect.js +5 -10
- package/lib/utils/useScrollBlocking.js +3 -11
- package/lib/utils/useScrollBlocking.native.js +0 -2
- package/lib/utils/useSpacingScale.js +5 -8
- package/lib/utils/useUniqueId.js +0 -4
- package/lib/utils/withLinkRouter.js +13 -18
- package/lib-module/A11yInfoProvider/index.js +5 -9
- package/lib-module/A11yText/index.js +3 -4
- package/lib-module/ActivityIndicator/Spinner.js +2 -2
- package/lib-module/ActivityIndicator/Spinner.native.js +4 -6
- package/lib-module/ActivityIndicator/index.js +1 -5
- package/lib-module/ActivityIndicator/shared.js +2 -1
- package/lib-module/Autocomplete/Autocomplete.js +34 -59
- package/lib-module/Autocomplete/Loading.js +0 -2
- package/lib-module/BaseProvider/HydrationContext.js +4 -7
- package/lib-module/BaseProvider/index.js +0 -3
- package/lib-module/Box/Box.js +10 -24
- package/lib-module/Button/Button.js +4 -2
- package/lib-module/Button/ButtonBase.js +23 -35
- package/lib-module/Button/ButtonDropdown.js +7 -16
- package/lib-module/Button/ButtonGroup.js +15 -32
- package/lib-module/Button/ButtonLink.js +3 -2
- package/lib-module/Button/propTypes.js +0 -7
- package/lib-module/Card/Card.js +3 -2
- package/lib-module/Card/CardBase.js +5 -4
- package/lib-module/Card/PressableCardBase.js +7 -11
- package/lib-module/Carousel/Carousel.js +22 -60
- package/lib-module/Carousel/CarouselContext.js +0 -5
- package/lib-module/Carousel/CarouselFirstFocus/CarouselFirstFocus.js +7 -5
- package/lib-module/Carousel/CarouselItem/CarouselItem.js +5 -11
- package/lib-module/Carousel/CarouselStepTracker/CarouselStepTracker.js +0 -2
- package/lib-module/Carousel/CarouselTabs/CarouselTabs.js +3 -4
- package/lib-module/Carousel/CarouselTabs/CarouselTabsPanel.js +7 -6
- package/lib-module/Carousel/CarouselTabs/CarouselTabsPanelItem.js +2 -10
- package/lib-module/Carousel/CarouselThumbnail.js +1 -7
- package/lib-module/Carousel/CarouselThumbnailNavigation.js +0 -2
- package/lib-module/Checkbox/Checkbox.js +5 -23
- package/lib-module/Checkbox/CheckboxButton.js +7 -17
- package/lib-module/Checkbox/CheckboxGroup.js +5 -23
- package/lib-module/Checkbox/CheckboxInput.js +1 -3
- package/lib-module/Checkbox/CheckboxInput.native.js +0 -1
- package/lib-module/CheckboxCard/CheckboxCard.js +4 -21
- package/lib-module/CheckboxCardGroup/CheckboxCardGroup.js +205 -0
- package/lib-module/CheckboxCardGroup/index.js +2 -0
- package/lib-module/Divider/Divider.js +13 -11
- package/lib-module/ExpandCollapse/Accordion.js +1 -1
- package/lib-module/ExpandCollapse/Control.js +10 -17
- package/lib-module/ExpandCollapse/ExpandCollapse.js +3 -9
- package/lib-module/ExpandCollapse/Panel.js +13 -23
- package/lib-module/Feedback/Feedback.js +13 -16
- package/lib-module/Fieldset/Fieldset.js +6 -25
- package/lib-module/Fieldset/FieldsetContainer.js +1 -1
- package/lib-module/Fieldset/FieldsetContainer.native.js +0 -1
- package/lib-module/Fieldset/Legend.js +1 -1
- package/lib-module/Fieldset/Legend.native.js +1 -1
- package/lib-module/FlexGrid/Col/Col.js +10 -37
- package/lib-module/FlexGrid/FlexGrid.js +3 -17
- package/lib-module/FlexGrid/Row/Row.js +0 -25
- package/lib-module/FlexGrid/helpers/index.js +0 -3
- package/lib-module/HorizontalScroll/HorizontalScroll.js +17 -27
- package/lib-module/HorizontalScroll/HorizontalScrollButton.js +1 -3
- package/lib-module/HorizontalScroll/ScrollViewEnd.js +5 -4
- package/lib-module/HorizontalScroll/ScrollViewEnd.native.js +0 -1
- package/lib-module/HorizontalScroll/itemPositions.js +11 -10
- package/lib-module/Icon/Icon.js +4 -8
- package/lib-module/Icon/IconText.js +6 -17
- package/lib-module/IconButton/IconButton.js +7 -20
- package/lib-module/InputLabel/InputLabel.js +4 -13
- package/lib-module/InputLabel/LabelContent.js +2 -1
- package/lib-module/InputLabel/LabelContent.native.js +0 -1
- package/lib-module/InputSupports/InputSupports.js +0 -9
- package/lib-module/InputSupports/useInputSupports.js +2 -4
- package/lib-module/Link/ChevronLink.js +7 -7
- package/lib-module/Link/InlinePressable.js +0 -2
- package/lib-module/Link/InlinePressable.native.js +4 -12
- package/lib-module/Link/LinkBase.js +17 -25
- package/lib-module/Link/TextButton.js +3 -5
- package/lib-module/List/List.js +5 -9
- package/lib-module/List/ListItem.js +1 -1
- package/lib-module/List/ListItemBase.js +5 -17
- package/lib-module/List/ListItemContent.js +1 -4
- package/lib-module/List/ListItemMark.js +3 -16
- package/lib-module/List/PressableListItemBase.js +2 -6
- package/lib-module/Listbox/GroupControl.js +0 -2
- package/lib-module/Listbox/Listbox.js +15 -23
- package/lib-module/Listbox/ListboxContext.js +0 -2
- package/lib-module/Listbox/ListboxGroup.js +6 -4
- package/lib-module/Listbox/ListboxItem.js +2 -1
- package/lib-module/Listbox/ListboxOverlay.js +3 -4
- package/lib-module/Listbox/PressableItem.js +2 -7
- package/lib-module/Modal/Modal.js +94 -25
- package/lib-module/Modal/ModalContent.js +175 -0
- package/lib-module/MultiSelectFilter/ModalOverlay.js +1 -4
- package/lib-module/MultiSelectFilter/MultiSelectFilter.js +20 -42
- package/lib-module/Notification/Notification.js +11 -22
- package/lib-module/Pagination/PageButton.js +2 -6
- package/lib-module/Pagination/Pagination.js +21 -21
- package/lib-module/Pagination/SideButton.js +3 -8
- package/lib-module/Pagination/usePagination.js +4 -8
- package/lib-module/Progress/Progress.js +3 -7
- package/lib-module/Progress/ProgressBar.js +3 -11
- package/lib-module/Progress/ProgressBarBackground.js +0 -2
- package/lib-module/QuickLinks/QuickLinks.js +1 -6
- package/lib-module/QuickLinks/QuickLinksCard.js +1 -3
- package/lib-module/QuickLinks/QuickLinksItem.js +3 -2
- package/lib-module/QuickLinksFeature/QuickLinksFeature.js +5 -9
- package/lib-module/QuickLinksFeature/QuickLinksFeatureItem.js +9 -13
- package/lib-module/Radio/Radio.js +5 -22
- package/lib-module/Radio/RadioButton.js +8 -10
- package/lib-module/Radio/RadioGroup.js +6 -25
- package/lib-module/Radio/RadioInput.js +1 -3
- package/lib-module/Radio/RadioInput.native.js +0 -1
- package/lib-module/RadioCard/RadioCard.js +5 -21
- package/lib-module/RadioCard/RadioCardGroup.js +7 -25
- package/lib-module/Responsive/Responsive.js +1 -6
- package/lib-module/Search/Search.js +22 -31
- package/lib-module/Select/Group.js +0 -3
- package/lib-module/Select/Group.native.js +0 -3
- package/lib-module/Select/Item.js +0 -3
- package/lib-module/Select/Item.native.js +0 -1
- package/lib-module/Select/Picker.native.js +8 -10
- package/lib-module/Select/Select.js +10 -35
- package/lib-module/SideNav/Item.js +5 -16
- package/lib-module/SideNav/ItemContent.js +1 -2
- package/lib-module/SideNav/ItemsGroup.js +9 -19
- package/lib-module/SideNav/SideNav.js +9 -22
- package/lib-module/Skeleton/Skeleton.js +10 -25
- package/lib-module/Skeleton/skeletonWebAnimation.js +0 -1
- package/lib-module/Skeleton/useSkeletonNativeAnimation.js +1 -3
- package/lib-module/SkipLink/SkipLink.js +7 -9
- package/lib-module/Spacer/Spacer.js +4 -7
- package/lib-module/StackView/StackView.js +3 -7
- package/lib-module/StackView/StackWrap.js +13 -13
- package/lib-module/StackView/StackWrap.native.js +2 -1
- package/lib-module/StackView/StackWrapBox.js +5 -8
- package/lib-module/StackView/StackWrapGap.js +1 -1
- package/lib-module/StackView/getStackedContent.js +10 -10
- package/lib-module/StepTracker/Step.js +3 -14
- package/lib-module/StepTracker/StepTracker.js +5 -13
- package/lib-module/Tabs/Tabs.js +7 -16
- package/lib-module/Tabs/TabsItem.js +13 -16
- package/lib-module/Tags/Tags.js +9 -26
- package/lib-module/TextInput/TextArea.js +11 -8
- package/lib-module/TextInput/TextInput.js +7 -5
- package/lib-module/TextInput/TextInputBase.js +107 -51
- package/lib-module/TextInput/propTypes.js +7 -6
- package/lib-module/ThemeProvider/ThemeProvider.js +10 -9
- package/lib-module/ThemeProvider/useSetTheme.js +6 -7
- package/lib-module/ThemeProvider/useTheme.js +2 -5
- package/lib-module/ThemeProvider/useThemeTokens.js +1 -2
- package/lib-module/ThemeProvider/utils/styles.js +15 -27
- package/lib-module/ThemeProvider/utils/theme-tokens.js +15 -20
- package/lib-module/Timeline/Timeline.js +11 -17
- package/lib-module/ToggleSwitch/ToggleSwitch.js +13 -26
- package/lib-module/ToggleSwitch/ToggleSwitchGroup.js +4 -23
- package/lib-module/Tooltip/Backdrop.js +4 -7
- package/lib-module/Tooltip/Backdrop.native.js +1 -4
- package/lib-module/Tooltip/Tooltip.js +9 -18
- package/lib-module/Tooltip/Tooltip.native.js +14 -23
- package/lib-module/Tooltip/getTooltipPosition.js +26 -30
- package/lib-module/Tooltip/shared.js +0 -6
- package/lib-module/TooltipButton/TooltipButton.js +5 -8
- package/lib-module/Typography/Typography.js +14 -22
- package/lib-module/Validator/Validator.js +10 -42
- package/lib-module/ViewportProvider/ViewportProvider.js +1 -3
- package/lib-module/ViewportProvider/useViewportListener.js +6 -8
- package/lib-module/index.js +1 -0
- package/lib-module/utils/BaseView/BaseView.js +3 -4
- package/lib-module/utils/BaseView/BaseView.native.js +0 -1
- package/lib-module/utils/a11y/semantics.js +14 -27
- package/lib-module/utils/a11y/textSize.js +1 -2
- package/lib-module/utils/animation/useVerticalExpandAnimation.js +8 -11
- package/lib-module/utils/children.js +17 -19
- package/lib-module/utils/containUniqueFields.js +2 -4
- package/lib-module/utils/htmlAttrs.js +2 -1
- package/lib-module/utils/info/index.js +2 -1
- package/lib-module/utils/info/platform/index.js +4 -1
- package/lib-module/utils/info/versions.js +2 -1
- package/lib-module/utils/input.js +11 -19
- package/lib-module/utils/pressability.js +8 -7
- package/lib-module/utils/props/a11yProps.js +22 -20
- package/lib-module/utils/props/clickProps.js +0 -1
- package/lib-module/utils/props/componentPropType.js +0 -13
- package/lib-module/utils/props/getPropSelector.js +12 -8
- package/lib-module/utils/props/handlerProps.js +2 -19
- package/lib-module/utils/props/hrefAttrsProp.js +2 -2
- package/lib-module/utils/props/inputSupportsProps.js +0 -6
- package/lib-module/utils/props/linkProps.js +2 -3
- package/lib-module/utils/props/pressProps.js +2 -2
- package/lib-module/utils/props/responsiveProps.js +1 -3
- package/lib-module/utils/props/selectSystemProps.js +4 -5
- package/lib-module/utils/props/spacingProps.js +4 -3
- package/lib-module/utils/props/textInputProps.js +14 -27
- package/lib-module/utils/props/textProps.js +9 -7
- package/lib-module/utils/props/tokens.js +10 -13
- package/lib-module/utils/props/variantProp.js +1 -1
- package/lib-module/utils/props/viewProps.js +0 -1
- package/lib-module/utils/ssr.js +14 -18
- package/lib-module/utils/useCopy.js +3 -5
- package/lib-module/utils/useHash.js +5 -9
- package/lib-module/utils/useHash.native.js +0 -1
- package/lib-module/utils/useOverlaidPosition.js +6 -25
- package/lib-module/utils/useResponsiveProp.js +6 -7
- package/lib-module/utils/useSafeLayoutEffect.js +5 -7
- package/lib-module/utils/useScrollBlocking.js +3 -10
- package/lib-module/utils/useSpacingScale.js +4 -4
- package/lib-module/utils/useUniqueId.js +0 -2
- package/lib-module/utils/withLinkRouter.js +13 -10
- package/package.json +2 -2
- package/src/CheckboxCardGroup/CheckboxCardGroup.jsx +230 -0
- package/src/CheckboxCardGroup/index.js +3 -0
- package/src/Modal/Modal.jsx +98 -5
- package/src/Modal/ModalContent.jsx +171 -0
- package/src/TextInput/TextInputBase.jsx +67 -12
- package/src/TextInput/propTypes.js +4 -0
- package/src/index.js +1 -0
- 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);
|
|
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 = {
|
|
44
|
+
const appliedThemeOptions = {
|
|
45
|
+
...defaultThemeOptions,
|
|
54
46
|
...themeOptions
|
|
55
|
-
};
|
|
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: {
|
|
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);
|
|
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
|
-
}
|
|
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 {
|
|
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);
|
|
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 = {
|
|
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
|
-
}
|
|
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;
|
|
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
|
-
}
|
|
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 {};
|
|
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 : {
|
|
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 ? {
|
|
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);
|
|
162
|
-
//
|
|
138
|
+
const appearances = mergeAppearances(variants, states);
|
|
139
|
+
// TODO: if in dev mode, validate the appearances and provided propTokens
|
|
163
140
|
|
|
164
|
-
|
|
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;
|