@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
package/lib/Radio/RadioGroup.js
CHANGED
|
@@ -4,35 +4,22 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
|
|
10
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
-
|
|
12
9
|
var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
|
|
13
|
-
|
|
14
10
|
var _ViewportProvider = require("../ViewportProvider");
|
|
15
|
-
|
|
16
11
|
var _ThemeProvider = require("../ThemeProvider");
|
|
17
|
-
|
|
18
12
|
var _utils = require("../utils");
|
|
19
|
-
|
|
20
13
|
var _StackView = require("../StackView");
|
|
21
|
-
|
|
22
14
|
var _Radio = _interopRequireDefault(require("./Radio"));
|
|
23
|
-
|
|
24
15
|
var _Fieldset = _interopRequireDefault(require("../Fieldset"));
|
|
25
|
-
|
|
26
16
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
27
|
-
|
|
28
17
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
29
|
-
|
|
30
18
|
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); }
|
|
31
|
-
|
|
32
19
|
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; }
|
|
33
|
-
|
|
34
20
|
const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
|
|
35
21
|
const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
|
|
22
|
+
|
|
36
23
|
/**
|
|
37
24
|
* A group of Radios that behave as a radio group. Use when users select a single choice from mutually
|
|
38
25
|
* exclusive options.
|
|
@@ -81,7 +68,6 @@ const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([
|
|
|
81
68
|
* />
|
|
82
69
|
* ```
|
|
83
70
|
*/
|
|
84
|
-
|
|
85
71
|
const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
86
72
|
let {
|
|
87
73
|
copy = 'en',
|
|
@@ -104,9 +90,9 @@ const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
104
90
|
...rest
|
|
105
91
|
} = _ref;
|
|
106
92
|
const viewport = (0, _ViewportProvider.useViewport)();
|
|
93
|
+
|
|
107
94
|
/* showIcon passes a boolean to displayIcon
|
|
108
95
|
*/
|
|
109
|
-
|
|
110
96
|
const {
|
|
111
97
|
space,
|
|
112
98
|
fieldSpace,
|
|
@@ -138,11 +124,9 @@ const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
138
124
|
readOnly: readOnly || inactive
|
|
139
125
|
});
|
|
140
126
|
const uniqueFields = ['id', 'label'];
|
|
141
|
-
|
|
142
127
|
if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
|
|
143
128
|
throw new Error(`RadioGroup items must have unique ${uniqueFields.join(', ')}`);
|
|
144
129
|
}
|
|
145
|
-
|
|
146
130
|
const radios = items.map((_ref2, index) => {
|
|
147
131
|
let {
|
|
148
132
|
label,
|
|
@@ -154,12 +138,10 @@ const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
154
138
|
} = _ref2;
|
|
155
139
|
const radioId = id || `Radio[${index}]`;
|
|
156
140
|
const isChecked = currentValue === radioId;
|
|
157
|
-
|
|
158
141
|
const handleChange = (newCheckedState, event) => {
|
|
159
142
|
if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event);
|
|
160
143
|
if (newCheckedState) setValue(radioId, event);
|
|
161
144
|
};
|
|
162
|
-
|
|
163
145
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Radio.default, {
|
|
164
146
|
ref: itemRef,
|
|
165
147
|
id: radioId,
|
|
@@ -198,97 +180,82 @@ const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
198
180
|
});
|
|
199
181
|
});
|
|
200
182
|
RadioGroup.displayName = 'RadioGroup';
|
|
201
|
-
RadioGroup.propTypes = {
|
|
202
|
-
|
|
183
|
+
RadioGroup.propTypes = {
|
|
184
|
+
...selectedSystemPropTypes,
|
|
203
185
|
/**
|
|
204
186
|
* Whether the English or French copy will be used (e.g. for accessibility labels).
|
|
205
187
|
*/
|
|
206
188
|
copy: _propTypes.default.oneOf(['en', 'fr']),
|
|
207
|
-
|
|
208
189
|
/**
|
|
209
190
|
* Optional theme token overrides for the outer RadioGroup component
|
|
210
191
|
*/
|
|
211
192
|
tokens: (0, _utils.getTokensPropType)('RadioGroup'),
|
|
212
|
-
|
|
213
193
|
/**
|
|
214
194
|
* Optional theme token overrides for each inner Radio component
|
|
215
195
|
*/
|
|
216
196
|
radioTokens: (0, _utils.getTokensPropType)('Radio'),
|
|
217
|
-
|
|
218
197
|
/**
|
|
219
198
|
* Theme variants, shared between both RadioGroup and Radio
|
|
220
199
|
*/
|
|
221
200
|
variant: _utils.variantProp.propType,
|
|
222
|
-
|
|
223
201
|
/**
|
|
224
202
|
* Array of objects containing specifics for each Radio to be rendered in the group.
|
|
225
203
|
*/
|
|
226
|
-
items: _propTypes.default.arrayOf(_propTypes.default.exact({
|
|
204
|
+
items: _propTypes.default.arrayOf(_propTypes.default.exact({
|
|
205
|
+
...selectedItemPropTypes,
|
|
227
206
|
label: _propTypes.default.string,
|
|
228
207
|
id: _propTypes.default.string,
|
|
229
208
|
onChange: _propTypes.default.func,
|
|
230
209
|
description: _propTypes.default.string,
|
|
231
210
|
ref: _airbnbPropTypes.default.ref()
|
|
232
211
|
})),
|
|
233
|
-
|
|
234
212
|
/**
|
|
235
213
|
* Main text used to describe this group, used in Fieldset's Legend element.
|
|
236
214
|
*/
|
|
237
215
|
legend: _propTypes.default.string,
|
|
238
|
-
|
|
239
216
|
/**
|
|
240
217
|
* Optional additional text giving more detail to help a user make a choice.
|
|
241
218
|
*/
|
|
242
219
|
hint: _propTypes.default.string,
|
|
243
|
-
|
|
244
220
|
/**
|
|
245
221
|
* Position of the hint relative to label. Use `below` to display a larger hint below the label.
|
|
246
222
|
*/
|
|
247
223
|
hintPosition: _propTypes.default.oneOf(['inline', 'below']),
|
|
248
|
-
|
|
249
224
|
/**
|
|
250
225
|
* Optional tooltip text content to include alongside the legend and hint.
|
|
251
226
|
*/
|
|
252
227
|
tooltip: _propTypes.default.string,
|
|
253
|
-
|
|
254
228
|
/**
|
|
255
229
|
* Current validation status of the group, passed to the feedback element if there is one.
|
|
256
230
|
*/
|
|
257
231
|
validation: _propTypes.default.oneOf(['error', 'success']),
|
|
258
|
-
|
|
259
232
|
/**
|
|
260
233
|
* If provided, a Feedback element is rendered containing this text.
|
|
261
234
|
*/
|
|
262
235
|
feedback: _propTypes.default.string,
|
|
263
|
-
|
|
264
236
|
/**
|
|
265
237
|
* If provided, the radio with this id is selected on first render.
|
|
266
238
|
*/
|
|
267
239
|
initialCheckedId: _propTypes.default.string,
|
|
268
|
-
|
|
269
240
|
/**
|
|
270
241
|
* If not undefined, the radio with this id is selected (or none is selected if `null`), and the
|
|
271
242
|
* element's selection state will be controlled by its parent using the `onChange` function.
|
|
272
243
|
*/
|
|
273
244
|
checkedId: _propTypes.default.string,
|
|
274
|
-
|
|
275
245
|
/**
|
|
276
246
|
* Function to call on change in selection state. Is required if the selection state is controlled
|
|
277
247
|
* by a parent using checkedId and the input is not readOnly.
|
|
278
248
|
*/
|
|
279
249
|
onChange: _propTypes.default.func,
|
|
280
|
-
|
|
281
250
|
/**
|
|
282
251
|
* If true, the radios cannot be selected by the user and simply show their current state.
|
|
283
252
|
*/
|
|
284
253
|
readOnly: _propTypes.default.bool,
|
|
285
|
-
|
|
286
254
|
/**
|
|
287
255
|
* If true, the radios cannot be interacted with, elements are set as `disabled` and if the
|
|
288
256
|
* theme supports `inactive` appearances rules, these are applied.
|
|
289
257
|
*/
|
|
290
258
|
inactive: _propTypes.default.bool,
|
|
291
|
-
|
|
292
259
|
/**
|
|
293
260
|
* On Web, this is passed to the `name` attribute of the fieldset and each radio input.
|
|
294
261
|
*/
|
package/lib/Radio/RadioInput.js
CHANGED
|
@@ -4,23 +4,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
|
|
10
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
-
|
|
12
9
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
|
-
|
|
14
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
-
|
|
16
11
|
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); }
|
|
17
|
-
|
|
18
12
|
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; }
|
|
19
|
-
|
|
20
13
|
/**
|
|
21
14
|
* On Web we need to include an actual input but hide it.
|
|
22
|
-
*/
|
|
23
|
-
const RadioInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
15
|
+
*/const RadioInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
24
16
|
let {
|
|
25
17
|
checked,
|
|
26
18
|
defaultChecked,
|
|
@@ -31,14 +23,12 @@ const RadioInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
31
23
|
onChange,
|
|
32
24
|
value
|
|
33
25
|
} = _ref;
|
|
34
|
-
|
|
35
26
|
const handleClick = event => {
|
|
36
27
|
// Cancel the click dispatched via the label tag, since it's already wrapped
|
|
37
28
|
// in <Pressable>
|
|
38
29
|
event.preventDefault();
|
|
39
30
|
event.stopPropagation();
|
|
40
31
|
};
|
|
41
|
-
|
|
42
32
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
|
|
43
33
|
checked: isControlled ? checked : undefined,
|
|
44
34
|
defaultChecked: isControlled ? undefined : defaultChecked,
|
|
@@ -4,11 +4,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
/**
|
|
9
8
|
* There's no radio button input on native platforms, so this is a noop.
|
|
10
9
|
*/
|
|
11
10
|
const RadioInput = () => null;
|
|
12
|
-
|
|
13
11
|
var _default = RadioInput;
|
|
14
12
|
exports.default = _default;
|
package/lib/Radio/index.js
CHANGED
|
@@ -10,12 +10,8 @@ Object.defineProperty(exports, "RadioGroup", {
|
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
12
|
exports.default = void 0;
|
|
13
|
-
|
|
14
13
|
var _Radio = _interopRequireDefault(require("./Radio"));
|
|
15
|
-
|
|
16
14
|
var _RadioGroup = _interopRequireDefault(require("./RadioGroup"));
|
|
17
|
-
|
|
18
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
-
|
|
20
16
|
var _default = _Radio.default;
|
|
21
17
|
exports.default = _default;
|
|
@@ -4,36 +4,22 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
|
|
10
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
-
|
|
12
9
|
var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
|
|
13
|
-
|
|
14
10
|
var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
|
|
15
|
-
|
|
16
11
|
var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
|
|
17
|
-
|
|
18
12
|
var _ThemeProvider = require("../ThemeProvider");
|
|
19
|
-
|
|
20
13
|
var _utils = require("../utils");
|
|
21
|
-
|
|
22
14
|
var _Card = require("../Card");
|
|
23
|
-
|
|
24
15
|
var _StackView = _interopRequireDefault(require("../StackView"));
|
|
25
|
-
|
|
26
16
|
var _RadioButton = _interopRequireWildcard(require("../Radio/RadioButton"));
|
|
27
|
-
|
|
28
17
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
29
|
-
|
|
30
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
31
|
-
|
|
32
19
|
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); }
|
|
33
|
-
|
|
34
20
|
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; }
|
|
35
|
-
|
|
36
21
|
const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
|
|
22
|
+
|
|
37
23
|
/**
|
|
38
24
|
* A Card that behaves like a radio button. Use when users select a single choice from mutually exclusive options
|
|
39
25
|
* with need to show additional information for each option. The whole card is interactive as one item.
|
|
@@ -69,7 +55,6 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
|
|
|
69
55
|
* accessibility role `'radio'` and accessibility state that depends on the other props (`checked`, `inactive`)
|
|
70
56
|
* or the internal state in case of uncontrolled radio button.
|
|
71
57
|
*/
|
|
72
|
-
|
|
73
58
|
const RadioCard = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
74
59
|
let {
|
|
75
60
|
tokens,
|
|
@@ -94,19 +79,15 @@ const RadioCard = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
94
79
|
initialValue: defaultChecked,
|
|
95
80
|
onChange
|
|
96
81
|
});
|
|
97
|
-
|
|
98
82
|
const handleChange = event => {
|
|
99
83
|
if (!inactive && !isChecked) {
|
|
100
84
|
setIsChecked(true, event);
|
|
101
85
|
}
|
|
102
86
|
};
|
|
103
|
-
|
|
104
87
|
const uniqueId = (0, _utils.useUniqueId)('RadioCard');
|
|
105
88
|
const inputId = id ?? uniqueId;
|
|
106
89
|
const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('RadioCard', tokens, variant);
|
|
107
|
-
|
|
108
90
|
const getCardTokens = cardState => (0, _Card.selectPressableCardTokens)(getTokens(cardState));
|
|
109
|
-
|
|
110
91
|
const {
|
|
111
92
|
themeOptions
|
|
112
93
|
} = (0, _ThemeProvider.useTheme)();
|
|
@@ -133,7 +114,8 @@ const RadioCard = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
133
114
|
} = getTokens(cardState);
|
|
134
115
|
const radioTokens = (0, _RadioButton.selectRadioButtonTokens)(themeTokens, 'radio');
|
|
135
116
|
const titleTokens = (0, _utils.selectTokens)('Typography', themeTokens);
|
|
136
|
-
const textStyle = (0, _ThemeProvider.applyTextStyles)({
|
|
117
|
+
const textStyle = (0, _ThemeProvider.applyTextStyles)({
|
|
118
|
+
...titleTokens,
|
|
137
119
|
themeOptions
|
|
138
120
|
});
|
|
139
121
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
|
|
@@ -170,84 +152,69 @@ const RadioCard = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
170
152
|
});
|
|
171
153
|
});
|
|
172
154
|
RadioCard.displayName = 'RadioCard';
|
|
173
|
-
RadioCard.propTypes = {
|
|
174
|
-
|
|
155
|
+
RadioCard.propTypes = {
|
|
156
|
+
...selectedSystemPropTypes,
|
|
175
157
|
/**
|
|
176
158
|
* Content to be displayed at the top of the card alongside the radio button
|
|
177
159
|
*/
|
|
178
160
|
title: _propTypes.default.string,
|
|
179
|
-
|
|
180
161
|
/**
|
|
181
162
|
* Additional content to be displayed below the button.
|
|
182
163
|
*/
|
|
183
164
|
children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
|
|
184
|
-
|
|
185
165
|
/**
|
|
186
166
|
* Use `checked` for controlled Radio. For uncontrolled Radio, use the `defaultChecked` prop.
|
|
187
167
|
*/
|
|
188
168
|
checked: _propTypes.default.bool,
|
|
189
|
-
|
|
190
169
|
/**
|
|
191
170
|
* Use `defaultChecked` to provide the initial value for an uncontrolled Radio.
|
|
192
171
|
*/
|
|
193
172
|
defaultChecked: _propTypes.default.bool,
|
|
194
|
-
|
|
195
173
|
/**
|
|
196
174
|
* An optional radio button description.
|
|
197
175
|
*/
|
|
198
176
|
description: _propTypes.default.string,
|
|
199
|
-
|
|
200
177
|
/**
|
|
201
178
|
* Radio card button ID.
|
|
202
179
|
*/
|
|
203
180
|
id: _propTypes.default.string,
|
|
204
|
-
|
|
205
181
|
/**
|
|
206
182
|
* Whether the corresponding input is disabled or active.
|
|
207
183
|
*/
|
|
208
184
|
inactive: _propTypes.default.bool,
|
|
209
|
-
|
|
210
185
|
/**
|
|
211
186
|
* The label.
|
|
212
187
|
*/
|
|
213
188
|
label: _propTypes.default.string,
|
|
214
|
-
|
|
215
189
|
/**
|
|
216
190
|
* Associate this radio card with a group (set as the name attribute).
|
|
217
191
|
*/
|
|
218
192
|
name: _propTypes.default.string,
|
|
219
|
-
|
|
220
193
|
/**
|
|
221
194
|
* Whether the underlying input triggered a validation error or not.
|
|
222
195
|
*/
|
|
223
196
|
error: _propTypes.default.bool,
|
|
224
|
-
|
|
225
197
|
/**
|
|
226
198
|
* The value. Must be unique within the group.
|
|
227
199
|
*/
|
|
228
200
|
value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool]),
|
|
229
|
-
|
|
230
201
|
/**
|
|
231
202
|
* Callback called when a controlled radio card gets interacted with.
|
|
232
203
|
*/
|
|
233
204
|
onChange: _propTypes.default.func,
|
|
234
|
-
|
|
235
205
|
/**
|
|
236
206
|
* Radio card tokens.
|
|
237
207
|
*/
|
|
238
208
|
tokens: (0, _utils.getTokensPropType)('RadioCard'),
|
|
239
|
-
|
|
240
209
|
/**
|
|
241
210
|
* Radio variant.
|
|
242
211
|
*/
|
|
243
212
|
variant: _utils.variantProp.propType
|
|
244
213
|
};
|
|
245
|
-
|
|
246
214
|
const staticStyles = _StyleSheet.default.create({
|
|
247
215
|
alignWithText: {
|
|
248
216
|
justifyContent: 'center'
|
|
249
217
|
}
|
|
250
218
|
});
|
|
251
|
-
|
|
252
219
|
var _default = RadioCard;
|
|
253
220
|
exports.default = _default;
|
|
@@ -4,33 +4,21 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
|
|
10
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
-
|
|
12
9
|
var _ViewportProvider = require("../ViewportProvider");
|
|
13
|
-
|
|
14
10
|
var _ThemeProvider = require("../ThemeProvider");
|
|
15
|
-
|
|
16
11
|
var _utils = require("../utils");
|
|
17
|
-
|
|
18
12
|
var _StackView = _interopRequireWildcard(require("../StackView"));
|
|
19
|
-
|
|
20
13
|
var _RadioCard = _interopRequireDefault(require("./RadioCard"));
|
|
21
|
-
|
|
22
14
|
var _Fieldset = _interopRequireDefault(require("../Fieldset"));
|
|
23
|
-
|
|
24
15
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
25
|
-
|
|
26
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
27
|
-
|
|
28
17
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
29
|
-
|
|
30
18
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
31
|
-
|
|
32
19
|
const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
|
|
33
20
|
const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
|
|
21
|
+
|
|
34
22
|
/**
|
|
35
23
|
* A group of Cards that behave as a radio button group. Use when users select a single choice from mutually
|
|
36
24
|
* exclusive options with need to show additional information for each option. The whole cards are each
|
|
@@ -81,7 +69,6 @@ const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([
|
|
|
81
69
|
* />
|
|
82
70
|
* ```
|
|
83
71
|
*/
|
|
84
|
-
|
|
85
72
|
const RadioCardGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
86
73
|
let {
|
|
87
74
|
copy = 'en',
|
|
@@ -120,16 +107,15 @@ const RadioCardGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
120
107
|
onChange,
|
|
121
108
|
readOnly: readOnly || inactive
|
|
122
109
|
});
|
|
123
|
-
const StackContainer = direction === 'row' ? _StackView.StackWrap : _StackView.default;
|
|
110
|
+
const StackContainer = direction === 'row' ? _StackView.StackWrap : _StackView.default;
|
|
111
|
+
// Needs 'radiogroup' role on direct parent of radios for MacOS Voiceover's numbering to work,
|
|
124
112
|
// and also needs 'radiogroup' role on fieldset for correct description on focusing the set.
|
|
125
113
|
// TODO: test this on more web screen readers.
|
|
126
114
|
|
|
127
115
|
const uniqueFields = ['id'];
|
|
128
|
-
|
|
129
116
|
if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
|
|
130
117
|
throw new Error(`RadioCardGroup items must have unique ${uniqueFields.join(', ')}`);
|
|
131
118
|
}
|
|
132
|
-
|
|
133
119
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, {
|
|
134
120
|
copy: copy,
|
|
135
121
|
ref: ref,
|
|
@@ -158,12 +144,10 @@ const RadioCardGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
158
144
|
...itemRest
|
|
159
145
|
} = _ref2;
|
|
160
146
|
const cardId = id || `RadioCard[${index}]`;
|
|
161
|
-
|
|
162
147
|
const handleChange = (newCheckedState, event) => {
|
|
163
148
|
if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event);
|
|
164
149
|
if (newCheckedState) setValue(cardId, event);
|
|
165
150
|
};
|
|
166
|
-
|
|
167
151
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioCard.default, {
|
|
168
152
|
id: cardId,
|
|
169
153
|
checked: currentValue === cardId,
|
|
@@ -183,96 +167,81 @@ const RadioCardGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
183
167
|
});
|
|
184
168
|
});
|
|
185
169
|
RadioCardGroup.displayName = 'RadioCardGroup';
|
|
186
|
-
RadioCardGroup.propTypes = {
|
|
187
|
-
|
|
170
|
+
RadioCardGroup.propTypes = {
|
|
171
|
+
...selectedSystemPropTypes,
|
|
188
172
|
/**
|
|
189
173
|
* Whether the English or French copy will be used (e.g. for accessibility labels).
|
|
190
174
|
*/
|
|
191
175
|
copy: _propTypes.default.oneOf(['en', 'fr']),
|
|
192
|
-
|
|
193
176
|
/**
|
|
194
177
|
* Optional theme token overrides for the outer RadioCardGroup component
|
|
195
178
|
*/
|
|
196
179
|
tokens: (0, _utils.getTokensPropType)('RadioCardGroup'),
|
|
197
|
-
|
|
198
180
|
/**
|
|
199
181
|
* Optional theme token overrides for each inner RadioCard component
|
|
200
182
|
*/
|
|
201
183
|
radioCardTokens: (0, _utils.getTokensPropType)('RadioCard'),
|
|
202
|
-
|
|
203
184
|
/**
|
|
204
185
|
* Theme variants, shared between both RadioCardGroup and RadioCard
|
|
205
186
|
*/
|
|
206
187
|
variant: _utils.variantProp.propType,
|
|
207
|
-
|
|
208
188
|
/**
|
|
209
189
|
* Array of objects containing specifics for each RadioCard to be rendered in the group.
|
|
210
190
|
*/
|
|
211
|
-
items: _propTypes.default.arrayOf(_propTypes.default.exact({
|
|
191
|
+
items: _propTypes.default.arrayOf(_propTypes.default.exact({
|
|
192
|
+
...selectedItemPropTypes,
|
|
212
193
|
title: _propTypes.default.string,
|
|
213
194
|
content: _propTypes.default.node,
|
|
214
195
|
id: _propTypes.default.string,
|
|
215
196
|
onChange: _propTypes.default.func
|
|
216
197
|
})),
|
|
217
|
-
|
|
218
198
|
/**
|
|
219
199
|
* Main text used to describe this group, used in Fieldset's Legend element.
|
|
220
200
|
*/
|
|
221
201
|
legend: _propTypes.default.string,
|
|
222
|
-
|
|
223
202
|
/**
|
|
224
203
|
* Optional additional text giving more detail to help a user make a choice.
|
|
225
204
|
*/
|
|
226
205
|
hint: _propTypes.default.string,
|
|
227
|
-
|
|
228
206
|
/**
|
|
229
207
|
* Position of the hint relative to label. Use `below` to display a larger hint below the label.
|
|
230
208
|
*/
|
|
231
209
|
hintPosition: _propTypes.default.oneOf(['inline', 'below']),
|
|
232
|
-
|
|
233
210
|
/**
|
|
234
211
|
* Optional tooltip text content to include alongside the legend and hint.
|
|
235
212
|
*/
|
|
236
213
|
tooltip: _propTypes.default.string,
|
|
237
|
-
|
|
238
214
|
/**
|
|
239
215
|
* Current validation status of the group, passed to the feedback element if there is one.
|
|
240
216
|
*/
|
|
241
217
|
validation: _propTypes.default.oneOf(['error', 'success']),
|
|
242
|
-
|
|
243
218
|
/**
|
|
244
219
|
* If provided, a Feedback element is rendered containing this text.
|
|
245
220
|
*/
|
|
246
221
|
feedback: _propTypes.default.string,
|
|
247
|
-
|
|
248
222
|
/**
|
|
249
223
|
* If provided, the radio card with this id is selected on first render.
|
|
250
224
|
*/
|
|
251
225
|
initialCheckedId: _propTypes.default.string,
|
|
252
|
-
|
|
253
226
|
/**
|
|
254
227
|
* If not undefined, the radio card with this id is selected (or none is selected if `null`), and the
|
|
255
228
|
* element's selection state will be controlled by its parent using the `onChange` function.
|
|
256
229
|
*/
|
|
257
230
|
checkedId: _propTypes.default.string,
|
|
258
|
-
|
|
259
231
|
/**
|
|
260
232
|
* Function to call on change in selection state. Is required if the selection state is controlled
|
|
261
233
|
* by a parent using checkedId and the input is not readOnly.
|
|
262
234
|
*/
|
|
263
235
|
onChange: _propTypes.default.func,
|
|
264
|
-
|
|
265
236
|
/**
|
|
266
237
|
* If true, the radio cards cannot be selected by the user and simply show their current state.
|
|
267
238
|
*/
|
|
268
239
|
readOnly: _propTypes.default.bool,
|
|
269
|
-
|
|
270
240
|
/**
|
|
271
241
|
* If true, the radio card cannot be interacted with, elements are set as `disabled` and if the
|
|
272
242
|
* theme supports `inactive` appearances rules, these are applied.
|
|
273
243
|
*/
|
|
274
244
|
inactive: _propTypes.default.bool,
|
|
275
|
-
|
|
276
245
|
/**
|
|
277
246
|
* On Web, this is passed to the `name` attribute of the fieldset and each radio input.
|
|
278
247
|
*/
|
package/lib/RadioCard/index.js
CHANGED
|
@@ -10,12 +10,8 @@ Object.defineProperty(exports, "RadioCardGroup", {
|
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
12
|
exports.default = void 0;
|
|
13
|
-
|
|
14
13
|
var _RadioCard = _interopRequireDefault(require("./RadioCard"));
|
|
15
|
-
|
|
16
14
|
var _RadioCardGroup = _interopRequireDefault(require("./RadioCardGroup"));
|
|
17
|
-
|
|
18
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
-
|
|
20
16
|
var _default = _RadioCard.default;
|
|
21
17
|
exports.default = _default;
|
|
@@ -4,19 +4,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
|
|
10
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
-
|
|
12
9
|
var _systemConstants = require("@telus-uds/system-constants");
|
|
13
|
-
|
|
14
10
|
var _utils = require("../utils");
|
|
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
|
/**
|
|
21
14
|
* Responsive conditionally renders children based on whether the viewport matches the provided
|
|
22
15
|
* min and max viewports.
|
|
@@ -24,8 +17,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
24
17
|
* In SSR, like other viewport utilities, it treats the viewport as `xs` both in SSR itself and
|
|
25
18
|
* during first hydration on the client side; then if the viewport is not `xs`, it re-renders
|
|
26
19
|
* after hydration. This may cause a layout shift on devices other than the narrowest.
|
|
27
|
-
*/
|
|
28
|
-
const Responsive = _ref => {
|
|
20
|
+
*/const Responsive = _ref => {
|
|
29
21
|
let {
|
|
30
22
|
min = 'xs',
|
|
31
23
|
max,
|
|
@@ -35,26 +27,21 @@ const Responsive = _ref => {
|
|
|
35
27
|
const byViewports = {
|
|
36
28
|
[min]: children
|
|
37
29
|
};
|
|
38
|
-
|
|
39
30
|
if (max && max !== 'xl') {
|
|
40
31
|
// Stop returning children at the viewport one above 'max' or greater
|
|
41
32
|
const maxIndex = _systemConstants.viewports.keys.indexOf(max);
|
|
42
|
-
|
|
43
33
|
const maxPlusOne = maxIndex >= 0 ? _systemConstants.viewports.keys[maxIndex + 1] : null;
|
|
44
34
|
if (maxPlusOne) byViewports[maxPlusOne] = null;
|
|
45
35
|
}
|
|
46
|
-
|
|
47
36
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
|
|
48
37
|
children: (0, _utils.useResponsiveProp)(byViewports, null)
|
|
49
38
|
});
|
|
50
39
|
};
|
|
51
|
-
|
|
52
40
|
Responsive.propTypes = {
|
|
53
41
|
/**
|
|
54
42
|
* To hide children of `Responsive` if the current viewport is smaller than `min`
|
|
55
43
|
*/
|
|
56
44
|
min: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
|
|
57
|
-
|
|
58
45
|
/**
|
|
59
46
|
* To hide children of `Responsive` if the current viewport is larger than `max`
|
|
60
47
|
*/
|
package/lib/Responsive/index.js
CHANGED
|
@@ -4,10 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _Responsive = _interopRequireDefault(require("./Responsive"));
|
|
9
|
-
|
|
10
8
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
-
|
|
12
9
|
var _default = _Responsive.default;
|
|
13
10
|
exports.default = _default;
|