@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,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = selectSystemProps;
|
|
7
|
-
|
|
8
7
|
// Returns a selector for requested prop kinds as well as the propTypes for
|
|
9
8
|
// those props merged into one object
|
|
10
9
|
function selectSystemProps(systemPropHelpers) {
|
|
@@ -12,18 +11,17 @@ function selectSystemProps(systemPropHelpers) {
|
|
|
12
11
|
if (typeof (propHelper === null || propHelper === void 0 ? void 0 : propHelper.select) !== 'function') {
|
|
13
12
|
throw new Error(`An invalid system prop helper has been passed to 'selectSystemProps': prop selector ('.select') is missing in ${propHelper}`);
|
|
14
13
|
}
|
|
15
|
-
|
|
16
|
-
|
|
14
|
+
return {
|
|
15
|
+
...acc,
|
|
17
16
|
...propHelper.select(props)
|
|
18
17
|
};
|
|
19
18
|
}, {});
|
|
20
|
-
|
|
21
19
|
const selectedPropTypes = systemPropHelpers.reduce((acc, propHelper) => {
|
|
22
20
|
if (!(propHelper !== null && propHelper !== void 0 && propHelper.types)) {
|
|
23
21
|
throw new Error(`An invalid system prop helper has been passed to 'selectSystemProps': types selector ('.types') is missing in ${propHelper}`);
|
|
24
22
|
}
|
|
25
|
-
|
|
26
|
-
|
|
23
|
+
return {
|
|
24
|
+
...acc,
|
|
27
25
|
...propHelper.types
|
|
28
26
|
};
|
|
29
27
|
}, {});
|
|
@@ -4,15 +4,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
-
|
|
10
8
|
var _responsiveProps = _interopRequireDefault(require("./responsiveProps"));
|
|
11
|
-
|
|
12
9
|
var _variantProp = _interopRequireDefault(require("./variantProp"));
|
|
13
|
-
|
|
14
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
-
|
|
16
11
|
/**
|
|
17
12
|
* @typedef {0|1|2|3|4|5|6|7|8|9|10|11} SpacingIndex - value used to select a size on the spacing scale
|
|
18
13
|
*
|
|
@@ -33,16 +28,16 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
33
28
|
* @typedef {SpacingIndex|SpacingObject} SpacingValue
|
|
34
29
|
*/
|
|
35
30
|
const spacingScale = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
|
|
36
|
-
|
|
37
31
|
const spacingIndexPropType = _propTypes.default.oneOf(spacingScale);
|
|
38
|
-
|
|
39
|
-
|
|
32
|
+
const spacingObjectPropType = _propTypes.default.shape({
|
|
33
|
+
..._responsiveProps.default.getByViewport(spacingIndexPropType),
|
|
40
34
|
space: spacingIndexPropType,
|
|
41
35
|
options: _propTypes.default.shape({
|
|
42
36
|
variant: _variantProp.default.propType,
|
|
43
37
|
size: _propTypes.default.number
|
|
44
38
|
})
|
|
45
39
|
});
|
|
40
|
+
|
|
46
41
|
/**
|
|
47
42
|
* Components and utilities that assign fixed space between components use a theme-defined spacing scale.
|
|
48
43
|
*
|
|
@@ -57,8 +52,6 @@ const spacingObjectPropType = _propTypes.default.shape({ ..._responsiveProps.def
|
|
|
57
52
|
* scale, or an object with an optional `options` key and one or more spacing indexes keyed either by
|
|
58
53
|
* viewports or `space` to apply at all viewports.
|
|
59
54
|
*/
|
|
60
|
-
|
|
61
|
-
|
|
62
55
|
var _default = {
|
|
63
56
|
scale: spacingScale,
|
|
64
57
|
types: {
|
|
@@ -4,18 +4,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
-
|
|
10
8
|
var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
|
|
11
|
-
|
|
12
9
|
var _getPropSelector = _interopRequireDefault(require("./getPropSelector"));
|
|
13
|
-
|
|
14
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
-
|
|
16
11
|
// This file contains common props for components that render a React Native TextInput
|
|
17
12
|
// It excludes interaction handler functions which are in `./handlerProps.js`
|
|
18
|
-
|
|
19
13
|
/**
|
|
20
14
|
* TextInput (web and native) supports some common React Native props
|
|
21
15
|
* shared with React Native's Text component.
|
|
@@ -25,70 +19,63 @@ const textProps = {
|
|
|
25
19
|
nativeId: _propTypes.default.string,
|
|
26
20
|
onLayout: _propTypes.default.func
|
|
27
21
|
};
|
|
22
|
+
|
|
28
23
|
/**
|
|
29
24
|
* UDS text inputs accept props related to UDS's useInputValue hook
|
|
30
25
|
*/
|
|
31
|
-
|
|
32
26
|
const inputValueProps = {
|
|
33
27
|
value: _propTypes.default.string,
|
|
28
|
+
type: _propTypes.default.string,
|
|
34
29
|
initialValue: _propTypes.default.string,
|
|
35
30
|
readOnly: _propTypes.default.bool,
|
|
36
31
|
inactive: _propTypes.default.bool
|
|
37
32
|
};
|
|
33
|
+
|
|
38
34
|
/**
|
|
39
35
|
* This collection adds props that can be passed through to both React Native's
|
|
40
36
|
* and React Native Web's implementations of the React Native TextInput component.
|
|
41
37
|
*/
|
|
42
|
-
|
|
43
|
-
|
|
38
|
+
const crossPlatform = {
|
|
39
|
+
...textProps,
|
|
44
40
|
...inputValueProps,
|
|
45
|
-
|
|
46
41
|
/**
|
|
47
42
|
* Web and Android; 'off' disables device autocomplete, other strings are platform-specific.
|
|
48
43
|
* Valid values on Native: https://reactnative.dev/docs/textinput#autocomplete-android
|
|
49
44
|
* Valid values on Web: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
|
|
50
45
|
*/
|
|
51
46
|
autoComplete: _propTypes.default.string,
|
|
52
|
-
|
|
53
47
|
/**
|
|
54
48
|
* On Native, default is `true`, passing `false` disables autoCorrect.
|
|
55
49
|
* On web, only supported by Safari and expects "on" or "off" strings.
|
|
56
50
|
*/
|
|
57
51
|
autoCorrect: _propTypes.default.oneOf([true, false, 'on', 'off']),
|
|
58
|
-
|
|
59
52
|
/**
|
|
60
53
|
* Focuses the element on mount. On Web, only the first form element with autoFocus is focussed.
|
|
61
54
|
*/
|
|
62
55
|
autoFocus: _propTypes.default.bool,
|
|
63
|
-
|
|
64
56
|
/**
|
|
65
57
|
* Default is `true` for single line, `false` for multi-line
|
|
66
58
|
*/
|
|
67
59
|
blurOnSubmit: _propTypes.default.bool,
|
|
68
|
-
|
|
69
60
|
/**
|
|
70
61
|
* iOS and Web only, no effect on Android
|
|
71
62
|
*/
|
|
72
63
|
clearTextOnFocus: _propTypes.default.bool,
|
|
73
|
-
|
|
74
64
|
/**
|
|
75
65
|
* Default is `true`. On web, this works by mapping to input's `readonly` attribute
|
|
76
66
|
*/
|
|
77
67
|
editable: _propTypes.default.bool,
|
|
78
|
-
|
|
79
68
|
/**
|
|
80
69
|
* See documentation for allowed values (varies between Web, Android and iOS) and important notes:
|
|
81
70
|
* - Native: https://reactnative.dev/docs/textinput#keyboardtype
|
|
82
71
|
* - Web: equivalent to `inputmode` but see https://necolas.github.io/react-native-web/docs/text-input/
|
|
83
72
|
*/
|
|
84
73
|
keyboardType: _propTypes.default.string,
|
|
85
|
-
|
|
86
74
|
/**
|
|
87
75
|
* Uses native tools (no flicker) to cap the maximum number of characters.
|
|
88
76
|
* On Web, works via `maxlength` attr.
|
|
89
77
|
*/
|
|
90
78
|
maxLength: _propTypes.default.number,
|
|
91
|
-
|
|
92
79
|
/**
|
|
93
80
|
* If passed as true, the text input can be multiple lines.
|
|
94
81
|
*
|
|
@@ -96,24 +83,20 @@ const crossPlatform = { ...textProps,
|
|
|
96
83
|
* > Use with textAlignVertical set to top for the same behavior in both platforms.
|
|
97
84
|
*/
|
|
98
85
|
multiline: _propTypes.default.bool,
|
|
99
|
-
|
|
100
86
|
/**
|
|
101
87
|
* Web and Android only, requires `multiline` to be `true`.
|
|
102
88
|
*/
|
|
103
89
|
numberOfLines: _propTypes.default.number,
|
|
104
|
-
|
|
105
90
|
/**
|
|
106
91
|
* Text to display when no value set.
|
|
107
92
|
* Accesibility guidelines recommend using labels to describe the input and using
|
|
108
93
|
* placeholders rarely and sparingly to prompt a particular format.
|
|
109
94
|
*/
|
|
110
95
|
placeholder: _propTypes.default.string,
|
|
111
|
-
|
|
112
96
|
/**
|
|
113
97
|
* Sets placeholder colour. On Web, uses `::placeholder { color: ... }` selector.
|
|
114
98
|
*/
|
|
115
99
|
placeholderTextColor: _propTypes.default.string,
|
|
116
|
-
|
|
117
100
|
/**
|
|
118
101
|
* One of a subset of platform-specific options that controls labelling and presentation
|
|
119
102
|
* in on-screen keyboards and accessibility tools. Uses `enterkeyhint` attr on Web.
|
|
@@ -121,34 +104,30 @@ const crossPlatform = { ...textProps,
|
|
|
121
104
|
* 'done', 'go', 'next', 'search', and 'send' are available for Web, Android and iOS.
|
|
122
105
|
*/
|
|
123
106
|
returnKeyType: _propTypes.default.string,
|
|
124
|
-
|
|
125
107
|
/**
|
|
126
108
|
* Obscures passwords and similar. Equivalent to type="password" on Web.
|
|
127
109
|
* Does not work if multiline is true.
|
|
128
110
|
*/
|
|
129
111
|
secureTextEntry: _propTypes.default.bool,
|
|
130
|
-
|
|
131
112
|
/**
|
|
132
113
|
* If true, all text will automatically be selected on focus.
|
|
133
114
|
*/
|
|
134
115
|
selectTextOnFocus: _propTypes.default.bool,
|
|
135
|
-
|
|
136
116
|
/**
|
|
137
117
|
* Web and iOS. On iOS, default inherits from `autoCorrect`.
|
|
138
118
|
* On Web, equivalent to `spellcheck` attr.
|
|
139
119
|
*/
|
|
140
120
|
spellCheck: _propTypes.default.bool
|
|
141
121
|
};
|
|
122
|
+
|
|
142
123
|
/**
|
|
143
124
|
* These web-only props all control HTML `input` attributes of the same name.
|
|
144
125
|
* Refer to general HTML documentation for more details.
|
|
145
126
|
*/
|
|
146
|
-
|
|
147
127
|
const webOnly = {
|
|
148
128
|
disabled: _propTypes.default.bool,
|
|
149
129
|
dir: _propTypes.default.oneOf(['auto', 'ltr', 'rtl']),
|
|
150
130
|
lang: _propTypes.default.string,
|
|
151
|
-
|
|
152
131
|
/**
|
|
153
132
|
* Sets the HTML input `pattern` attr. Not supported by React Native Web, but is supported by UDS.
|
|
154
133
|
* Must also pass in a ref and check validity by calling the HTML element's checkValidity method:
|
|
@@ -156,6 +135,7 @@ const webOnly = {
|
|
|
156
135
|
*/
|
|
157
136
|
pattern: _propTypes.default.string
|
|
158
137
|
};
|
|
138
|
+
|
|
159
139
|
/**
|
|
160
140
|
* These props are supported in React Native but not React Native Web.
|
|
161
141
|
*
|
|
@@ -167,7 +147,6 @@ const webOnly = {
|
|
|
167
147
|
* native component based on the values of multiple boolean flags, and may sometimes appear to pick an
|
|
168
148
|
* option that is inappropriate for one flag based on the values of one or more other other flags.
|
|
169
149
|
*/
|
|
170
|
-
|
|
171
150
|
const nativeOnly = {
|
|
172
151
|
caretHidden: _propTypes.default.bool,
|
|
173
152
|
clearButtonMode: _propTypes.default.string,
|
|
@@ -195,16 +174,17 @@ var _default = {
|
|
|
195
174
|
* Subset of proptypes that can be passed down to a React Native or React Native Web
|
|
196
175
|
* `TextInput` component. Allow regardless of platform, so cross-platform apps don't warn.
|
|
197
176
|
*/
|
|
198
|
-
types: {
|
|
177
|
+
types: {
|
|
178
|
+
...crossPlatform,
|
|
199
179
|
...webOnly,
|
|
200
180
|
...nativeOnly
|
|
201
181
|
},
|
|
202
|
-
|
|
203
182
|
/**
|
|
204
183
|
* Filters a props object. Return only platform-appropriate TextInput props, native inputs
|
|
205
184
|
* may throw errors on receiving unknown props.
|
|
206
185
|
*/
|
|
207
|
-
select: (0, _getPropSelector.default)({
|
|
186
|
+
select: (0, _getPropSelector.default)({
|
|
187
|
+
...crossPlatform,
|
|
208
188
|
..._Platform.default.select({
|
|
209
189
|
web: webOnly,
|
|
210
190
|
default: nativeOnly
|
|
@@ -4,15 +4,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
-
|
|
10
8
|
var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
|
|
11
|
-
|
|
12
9
|
var _getPropSelector = _interopRequireDefault(require("./getPropSelector"));
|
|
13
|
-
|
|
14
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
-
|
|
16
11
|
// These are the props accepted specifically on React Native (Web) `Text` elements.
|
|
17
12
|
// They are generally concerned with the behaviour of multiline text.
|
|
18
13
|
const crossPlatform = {
|
|
@@ -21,17 +16,16 @@ const crossPlatform = {
|
|
|
21
16
|
* On native, ellipsis behaviour may be changed with `ellipsizeMode` prop.
|
|
22
17
|
*/
|
|
23
18
|
numberOfLines: _propTypes.default.number,
|
|
24
|
-
|
|
25
19
|
/**
|
|
26
20
|
* Default is true on web and false on native
|
|
27
21
|
*/
|
|
28
22
|
selectable: _propTypes.default.bool
|
|
29
23
|
};
|
|
24
|
+
|
|
30
25
|
/**
|
|
31
26
|
* See React Native docs for latest details on these.
|
|
32
27
|
* https://reactnative.dev/docs/text
|
|
33
28
|
*/
|
|
34
|
-
|
|
35
29
|
const nativeOnly = {
|
|
36
30
|
ellipsizeMode: _propTypes.default.string,
|
|
37
31
|
maxFontSizeMultiplier: _propTypes.default.number,
|
|
@@ -40,10 +34,10 @@ const nativeOnly = {
|
|
|
40
34
|
suppressHighlighting: _propTypes.default.bool,
|
|
41
35
|
textBreakStrategy: _propTypes.default.string
|
|
42
36
|
};
|
|
37
|
+
|
|
43
38
|
/**
|
|
44
39
|
* These set HTML attributes of the same name.
|
|
45
40
|
*/
|
|
46
|
-
|
|
47
41
|
const webOnly = {
|
|
48
42
|
dir: _propTypes.default.oneOf(['auto', 'ltr', 'rtl']),
|
|
49
43
|
lang: _propTypes.default.string
|
|
@@ -53,16 +47,17 @@ var _default = {
|
|
|
53
47
|
* Set of prop types specific to React Native and React Native Web `Text`,
|
|
54
48
|
* which largely revolve around the behaviour of multiline non-pressable text.
|
|
55
49
|
*/
|
|
56
|
-
types: {
|
|
50
|
+
types: {
|
|
51
|
+
...crossPlatform,
|
|
57
52
|
...webOnly,
|
|
58
53
|
...nativeOnly
|
|
59
54
|
},
|
|
60
|
-
|
|
61
55
|
/**
|
|
62
56
|
* Filters a props object, returning only props specific to `Text` elements
|
|
63
57
|
* on the current platform. Does not include props applicable to `Text` and `View`.
|
|
64
58
|
*/
|
|
65
|
-
select: (0, _getPropSelector.default)({
|
|
59
|
+
select: (0, _getPropSelector.default)({
|
|
60
|
+
...crossPlatform,
|
|
66
61
|
..._Platform.default.select({
|
|
67
62
|
web: webOnly,
|
|
68
63
|
default: nativeOnly
|
|
@@ -4,29 +4,22 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.selectTokens = exports.getTokensSetPropType = exports.getTokensPropType = exports.getTokenNames = void 0;
|
|
7
|
-
|
|
8
7
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
-
|
|
10
8
|
var _systemThemeTokens = require("@telus-uds/system-theme-tokens");
|
|
11
|
-
|
|
12
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
-
|
|
14
10
|
// Tokens can be primitive values (e.g. `'rgba(0,0,0,0'`, `12`), or objects of such values,
|
|
15
11
|
// such as tokens that describe shadow (e.g. shadow: { inset: true, color: 'rgba(...)' ... }),
|
|
16
12
|
// or components (e.g. Icon tokens)
|
|
17
13
|
const tokenValue = _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool, _propTypes.default.elementType]);
|
|
18
|
-
|
|
19
14
|
const tokenValueType = _propTypes.default.oneOfType([tokenValue, _propTypes.default.objectOf(tokenValue)]);
|
|
20
|
-
|
|
21
15
|
const getTokenNames = componentName => {
|
|
22
16
|
const componentTokenSchema = _systemThemeTokens.components[componentName];
|
|
23
|
-
|
|
24
17
|
if (!componentTokenSchema) {
|
|
25
18
|
throw new Error(`No "${componentName}" tokenKeys in @telus-uds/system-theme-tokens`);
|
|
26
19
|
}
|
|
27
|
-
|
|
28
20
|
return Object.keys(componentTokenSchema);
|
|
29
21
|
};
|
|
22
|
+
|
|
30
23
|
/**
|
|
31
24
|
* Returns the subset of a set of tokens that may be accepted by the `tokens` prop of a named component
|
|
32
25
|
* or by a provided array of tokens. A prefix may be provided, for example:
|
|
@@ -56,28 +49,26 @@ const getTokenNames = componentName => {
|
|
|
56
49
|
* @param {string} [prefix] - if provided, matches keys in the source object with this as the first camelCase item
|
|
57
50
|
* @returns {object} - subset of theme tokens
|
|
58
51
|
*/
|
|
59
|
-
|
|
60
|
-
|
|
61
52
|
exports.getTokenNames = getTokenNames;
|
|
62
|
-
|
|
63
53
|
const selectTokens = (specifier, tokens, prefix) => {
|
|
64
54
|
const tokenNames = typeof specifier === 'string' ? getTokenNames(specifier) : specifier;
|
|
65
55
|
const filteredTokens = tokenNames.reduce((validTokens, key) => {
|
|
66
56
|
const prefixedKey = prefix ? `${prefix}${key[0].toUpperCase()}${key.slice(1)}` : key;
|
|
67
57
|
const token = tokens[prefixedKey];
|
|
68
|
-
return token !== undefined ? {
|
|
58
|
+
return token !== undefined ? {
|
|
59
|
+
...validTokens,
|
|
69
60
|
[key]: token
|
|
70
61
|
} : validTokens;
|
|
71
62
|
}, {});
|
|
72
63
|
return filteredTokens;
|
|
73
64
|
};
|
|
65
|
+
|
|
74
66
|
/**
|
|
75
67
|
* @typedef {string|number|boolean|{[key: string]:string|number|boolean}} TokenValue
|
|
76
68
|
* @typedef {{[key: string]: TokenValue}} TokensSet
|
|
77
69
|
* @typedef {(AppearanceSet) => TokensSet} TokensGetter
|
|
78
70
|
* @typedef {TokensSet|TokensGetter} TokensProp
|
|
79
71
|
*/
|
|
80
|
-
|
|
81
72
|
/**
|
|
82
73
|
* 'tokens' is an optional object prop on all themable components. Its keys must match the
|
|
83
74
|
* token keys in the component's theme schema.
|
|
@@ -99,20 +90,15 @@ const selectTokens = (specifier, tokens, prefix) => {
|
|
|
99
90
|
* tokens: getTokensPropType('Component1', 'Component2')
|
|
100
91
|
* }
|
|
101
92
|
*/
|
|
102
|
-
|
|
103
|
-
|
|
104
93
|
exports.selectTokens = selectTokens;
|
|
105
|
-
|
|
106
94
|
const getTokensPropType = function () {
|
|
107
95
|
for (var _len = arguments.length, componentsNames = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
108
96
|
componentsNames[_key] = arguments[_key];
|
|
109
97
|
}
|
|
110
|
-
|
|
111
98
|
return (props, propName, componentName) => {
|
|
112
99
|
_propTypes.default.checkPropTypes({
|
|
113
100
|
[propName]: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func])
|
|
114
101
|
}, props, propName, componentName);
|
|
115
|
-
|
|
116
102
|
if (typeof props[propName] !== 'function') {
|
|
117
103
|
_propTypes.default.checkPropTypes({
|
|
118
104
|
[propName]: _propTypes.default.exact(Object.fromEntries(componentsNames.flatMap(component => getTokenNames(component).map(key => [key, tokenValueType]))))
|
|
@@ -120,6 +106,7 @@ const getTokensPropType = function () {
|
|
|
120
106
|
}
|
|
121
107
|
};
|
|
122
108
|
};
|
|
109
|
+
|
|
123
110
|
/**
|
|
124
111
|
* Get a proptypes validator for a set of tokens that is not based on a component in the theme schema.
|
|
125
112
|
*
|
|
@@ -134,26 +121,20 @@ const getTokensPropType = function () {
|
|
|
134
121
|
* @param {boolean} [options.allowFunction] - if true, allows functions as well as tokens objects
|
|
135
122
|
* @returns
|
|
136
123
|
*/
|
|
137
|
-
|
|
138
|
-
|
|
139
124
|
exports.getTokensPropType = getTokensPropType;
|
|
140
|
-
|
|
141
125
|
const getTokensSetPropType = function (componentTokenKeys) {
|
|
142
126
|
let {
|
|
143
127
|
partial = false,
|
|
144
128
|
allowFunction = false
|
|
145
129
|
} = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
146
|
-
|
|
147
|
-
|
|
130
|
+
const tokensObjectValidator = _propTypes.default.exact(Object.fromEntries(componentTokenKeys.map(key => [key, partial ? tokenValueType :
|
|
131
|
+
// Some theme tokens can validly resolve to `null`, but .isRequired treats null as undefined
|
|
148
132
|
function (props, propName) {
|
|
149
133
|
for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
|
|
150
134
|
args[_key2 - 2] = arguments[_key2];
|
|
151
135
|
}
|
|
152
|
-
|
|
153
136
|
return props[propName] !== null && tokenValueType.isRequired(props, propName, ...args);
|
|
154
137
|
}])));
|
|
155
|
-
|
|
156
138
|
return allowFunction ? _propTypes.default.oneOfType([tokensObjectValidator, _propTypes.default.func]) : tokensObjectValidator;
|
|
157
139
|
};
|
|
158
|
-
|
|
159
140
|
exports.getTokensSetPropType = getTokensSetPropType;
|
|
@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
-
|
|
10
8
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
-
|
|
12
9
|
/**
|
|
13
10
|
* @typedef {{[key: string]: string|number|boolean}} AppearanceSet
|
|
14
11
|
* @typedef {AppearanceSet} VariantProp
|
|
@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
-
|
|
10
8
|
var _getPropSelector = _interopRequireDefault(require("./getPropSelector"));
|
|
11
|
-
|
|
12
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
-
|
|
14
10
|
const viewPropTypes = {
|
|
15
11
|
pointerEvents: _propTypes.default.oneOf(['all', 'none', 'box-only', 'box-none']),
|
|
16
12
|
onLayout: _propTypes.default.func,
|
|
@@ -24,7 +20,6 @@ var _default = {
|
|
|
24
20
|
* that renders a single View.
|
|
25
21
|
*/
|
|
26
22
|
types: viewPropTypes,
|
|
27
|
-
|
|
28
23
|
/**
|
|
29
24
|
* Filters a props object, returning only cross-platform View props that are potentially
|
|
30
25
|
* relevant to any basic layout component that renders one View.
|
package/lib/utils/ssr.js
CHANGED
|
@@ -4,17 +4,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.ssrStyles = exports.getSSRStyles = exports.getReactNativeWebSSRStyles = exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
|
|
10
8
|
var _AppRegistry = _interopRequireDefault(require("react-native-web/dist/cjs/exports/AppRegistry"));
|
|
11
|
-
|
|
12
9
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
|
-
|
|
14
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
-
|
|
16
11
|
/** @typedef {import('react').ComponentType} ReactComponent */
|
|
17
|
-
|
|
18
12
|
/** @typedef {import('react').ReactElement} ReactElement */
|
|
19
13
|
|
|
20
14
|
/**
|
|
@@ -59,10 +53,8 @@ const ssrStyles = function () {
|
|
|
59
53
|
renderedByRNW = false,
|
|
60
54
|
WrapperComponent
|
|
61
55
|
} = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
56
|
+
_AppRegistry.default.registerComponent(appName, () => App);
|
|
57
|
+
// AppRegistry.getApplication renders the app in a container, and collects styles.
|
|
66
58
|
const {
|
|
67
59
|
element,
|
|
68
60
|
getStyleElement
|
|
@@ -70,34 +62,32 @@ const ssrStyles = function () {
|
|
|
70
62
|
WrapperComponent,
|
|
71
63
|
initialProps: props
|
|
72
64
|
});
|
|
73
|
-
|
|
74
|
-
|
|
65
|
+
let renderedApp =
|
|
66
|
+
// React Native Web's AppRegistry.getApplication assumes the app is rendered using
|
|
75
67
|
// AppRegistry.runApplication and wraps it in <AppContainer>, which wraps the entire app
|
|
76
68
|
// in two outer containers resembling <View style={{ flex: 1 }} pointerEvents="box-none">.
|
|
77
69
|
// So, use that IF user says AppRegistry.runApplication will do the client-side render.
|
|
78
|
-
renderedByRNW && element ||
|
|
70
|
+
renderedByRNW && element ||
|
|
71
|
+
// If the live app is not rendered using AppRegistry.runApplication, we need to
|
|
79
72
|
// re-render it without the <AppContainer> wrapper, to avoid SSR mismatch errors.
|
|
80
73
|
// Default to this as many platforms (e.g. NextJS) will use their own renderers.
|
|
81
74
|
WrapperComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(WrapperComponent, {
|
|
82
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(App, {
|
|
75
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(App, {
|
|
76
|
+
...props
|
|
83
77
|
})
|
|
84
|
-
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(App, {
|
|
78
|
+
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(App, {
|
|
79
|
+
...props
|
|
85
80
|
});
|
|
86
|
-
|
|
87
81
|
const getRNWStyle = () => getStyleElement({
|
|
88
82
|
key: 'react-native-stylesheet'
|
|
89
83
|
});
|
|
90
|
-
|
|
91
84
|
styleGetters.push(getRNWStyle);
|
|
92
|
-
|
|
93
85
|
if (typeof collectStyles === 'function') {
|
|
94
86
|
renderedApp = collectStyles(renderedApp);
|
|
95
87
|
}
|
|
96
|
-
|
|
97
88
|
hasAppRendered = true;
|
|
98
89
|
return renderedApp;
|
|
99
90
|
},
|
|
100
|
-
|
|
101
91
|
/**
|
|
102
92
|
* Turns styles collected during renderApp into an array of React elements of
|
|
103
93
|
* HTML <style> tags ready for insertion into the SSR HTML's <head>.
|
|
@@ -109,16 +99,13 @@ const ssrStyles = function () {
|
|
|
109
99
|
*/
|
|
110
100
|
getStyles: function () {
|
|
111
101
|
if (!hasAppRendered) throw new Error('Called getStyles before renderApp in ssrStyles');
|
|
112
|
-
|
|
113
102
|
for (var _len = arguments.length, existingStyles = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
114
103
|
existingStyles[_key] = arguments[_key];
|
|
115
104
|
}
|
|
116
|
-
|
|
117
105
|
return [...existingStyles, ...styleGetters.flatMap(getter => getter())];
|
|
118
106
|
}
|
|
119
107
|
};
|
|
120
108
|
};
|
|
121
|
-
|
|
122
109
|
exports.ssrStyles = ssrStyles;
|
|
123
110
|
var _default = ssrStyles;
|
|
124
111
|
/**
|
|
@@ -131,20 +118,16 @@ var _default = ssrStyles;
|
|
|
131
118
|
* @param {string} [appName]
|
|
132
119
|
* @returns {ReactElement[]}
|
|
133
120
|
*/
|
|
134
|
-
|
|
135
121
|
exports.default = _default;
|
|
136
|
-
|
|
137
122
|
const getReactNativeWebSSRStyles = function (AppRoot) {
|
|
138
123
|
let appName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'app';
|
|
139
|
-
|
|
140
124
|
_AppRegistry.default.registerComponent(appName, () => AppRoot);
|
|
141
|
-
|
|
142
125
|
const {
|
|
143
126
|
getStyleElement
|
|
144
127
|
} = _AppRegistry.default.getApplication(appName);
|
|
145
|
-
|
|
146
128
|
return [getStyleElement()];
|
|
147
129
|
};
|
|
130
|
+
|
|
148
131
|
/**
|
|
149
132
|
* @deprecated - use ssrStyles instead
|
|
150
133
|
*
|
|
@@ -156,15 +139,12 @@ const getReactNativeWebSSRStyles = function (AppRoot) {
|
|
|
156
139
|
* @param {ReactElement[]} [existingStyles]
|
|
157
140
|
* @returns {ReactElement[]}
|
|
158
141
|
*/
|
|
159
|
-
|
|
160
|
-
|
|
161
142
|
exports.getReactNativeWebSSRStyles = getReactNativeWebSSRStyles;
|
|
162
|
-
|
|
163
143
|
const getSSRStyles = function (AppRoot) {
|
|
164
144
|
let appName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'app';
|
|
165
145
|
let existingStyles = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
|
|
166
|
-
return [...existingStyles, ...getReactNativeWebSSRStyles(AppRoot, appName)
|
|
146
|
+
return [...existingStyles, ...getReactNativeWebSSRStyles(AppRoot, appName)
|
|
147
|
+
// if any other CSS-in-JS is added e.g. styled-components generate and add its styles here
|
|
167
148
|
];
|
|
168
149
|
};
|
|
169
|
-
|
|
170
150
|
exports.getSSRStyles = getSSRStyles;
|
package/lib/utils/useCopy.js
CHANGED
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = exports.DEFAULT_COPY = void 0;
|
|
7
7
|
const DEFAULT_COPY = 'en';
|
|
8
|
+
|
|
8
9
|
/**
|
|
9
10
|
* Extract translations from a keyed dictionary for a given language.
|
|
10
11
|
* Returns a getter.
|
|
@@ -32,22 +33,18 @@ const DEFAULT_COPY = 'en';
|
|
|
32
33
|
* @param {'en'|'fr'|object} copy - language
|
|
33
34
|
* @return {function(string): string}
|
|
34
35
|
*/
|
|
35
|
-
|
|
36
36
|
exports.DEFAULT_COPY = DEFAULT_COPY;
|
|
37
|
-
|
|
38
37
|
function useCopy(_ref) {
|
|
39
38
|
let {
|
|
40
39
|
dictionary,
|
|
41
40
|
copy = DEFAULT_COPY
|
|
42
41
|
} = _ref;
|
|
43
|
-
|
|
44
42
|
if (typeof copy === 'string') {
|
|
45
43
|
return key => key ? dictionary[copy][key] : dictionary[copy];
|
|
46
|
-
}
|
|
47
|
-
|
|
44
|
+
}
|
|
48
45
|
|
|
46
|
+
// support overriding the entire copy dictionary with an object for a single language
|
|
49
47
|
return key => copy[key];
|
|
50
48
|
}
|
|
51
|
-
|
|
52
49
|
var _default = useCopy;
|
|
53
50
|
exports.default = _default;
|