@telus-uds/components-base 1.66.0 → 1.67.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +23 -3
- 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 +14 -45
- 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 +216 -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 +25 -40
- 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 +12 -58
- package/lib/TextInput/index.js +0 -3
- package/lib/TextInput/propTypes.js +0 -8
- 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 +10 -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 +14 -31
- 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 +206 -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 +25 -27
- 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 +13 -39
- package/lib-module/TextInput/propTypes.js +3 -7
- 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 +13 -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/Checkbox/CheckboxGroup.jsx +10 -8
- package/src/CheckboxCardGroup/CheckboxCardGroup.jsx +231 -0
- package/src/CheckboxCardGroup/index.js +3 -0
- package/src/Modal/Modal.jsx +98 -5
- package/src/Modal/ModalContent.jsx +171 -0
- package/src/RadioCard/RadioCardGroup.jsx +23 -2
- package/src/index.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',
|
|
@@ -107,10 +94,25 @@ const RadioCardGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
107
94
|
const {
|
|
108
95
|
space,
|
|
109
96
|
fieldSpace,
|
|
110
|
-
direction
|
|
97
|
+
direction,
|
|
98
|
+
showIcon,
|
|
99
|
+
outlineWidth,
|
|
100
|
+
borderTopLeftRadius,
|
|
101
|
+
borderTopRightRadius,
|
|
102
|
+
borderBottomLeftRadius,
|
|
103
|
+
borderBottomRightRadius,
|
|
104
|
+
outlineOffset
|
|
111
105
|
} = (0, _ThemeProvider.useThemeTokens)('RadioCardGroup', tokens, variant, {
|
|
112
106
|
viewport
|
|
113
107
|
});
|
|
108
|
+
const borderTokens = {
|
|
109
|
+
outlineWidth,
|
|
110
|
+
borderTopLeftRadius,
|
|
111
|
+
borderTopRightRadius,
|
|
112
|
+
borderBottomLeftRadius,
|
|
113
|
+
borderBottomRightRadius,
|
|
114
|
+
outlineOffset
|
|
115
|
+
};
|
|
114
116
|
const {
|
|
115
117
|
currentValue,
|
|
116
118
|
setValue
|
|
@@ -120,16 +122,15 @@ const RadioCardGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
120
122
|
onChange,
|
|
121
123
|
readOnly: readOnly || inactive
|
|
122
124
|
});
|
|
123
|
-
const StackContainer = direction === 'row' ? _StackView.StackWrap : _StackView.default;
|
|
125
|
+
const StackContainer = direction === 'row' ? _StackView.StackWrap : _StackView.default;
|
|
126
|
+
// Needs 'radiogroup' role on direct parent of radios for MacOS Voiceover's numbering to work,
|
|
124
127
|
// and also needs 'radiogroup' role on fieldset for correct description on focusing the set.
|
|
125
128
|
// TODO: test this on more web screen readers.
|
|
126
129
|
|
|
127
130
|
const uniqueFields = ['id'];
|
|
128
|
-
|
|
129
131
|
if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
|
|
130
132
|
throw new Error(`RadioCardGroup items must have unique ${uniqueFields.join(', ')}`);
|
|
131
133
|
}
|
|
132
|
-
|
|
133
134
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, {
|
|
134
135
|
copy: copy,
|
|
135
136
|
ref: ref,
|
|
@@ -143,7 +144,8 @@ const RadioCardGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
143
144
|
inactive: inactive || readOnly,
|
|
144
145
|
validation: validation,
|
|
145
146
|
showErrorBorder: true,
|
|
146
|
-
|
|
147
|
+
tokens: borderTokens,
|
|
148
|
+
showIcon: showIcon,
|
|
147
149
|
accessibilityRole: "radiogroup",
|
|
148
150
|
...selectProps(rest),
|
|
149
151
|
children: props => /*#__PURE__*/(0, _jsxRuntime.jsx)(StackContainer, {
|
|
@@ -158,12 +160,10 @@ const RadioCardGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
158
160
|
...itemRest
|
|
159
161
|
} = _ref2;
|
|
160
162
|
const cardId = id || `RadioCard[${index}]`;
|
|
161
|
-
|
|
162
163
|
const handleChange = (newCheckedState, event) => {
|
|
163
164
|
if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event);
|
|
164
165
|
if (newCheckedState) setValue(cardId, event);
|
|
165
166
|
};
|
|
166
|
-
|
|
167
167
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioCard.default, {
|
|
168
168
|
id: cardId,
|
|
169
169
|
checked: currentValue === cardId,
|
|
@@ -183,96 +183,81 @@ const RadioCardGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
183
183
|
});
|
|
184
184
|
});
|
|
185
185
|
RadioCardGroup.displayName = 'RadioCardGroup';
|
|
186
|
-
RadioCardGroup.propTypes = {
|
|
187
|
-
|
|
186
|
+
RadioCardGroup.propTypes = {
|
|
187
|
+
...selectedSystemPropTypes,
|
|
188
188
|
/**
|
|
189
189
|
* Whether the English or French copy will be used (e.g. for accessibility labels).
|
|
190
190
|
*/
|
|
191
191
|
copy: _propTypes.default.oneOf(['en', 'fr']),
|
|
192
|
-
|
|
193
192
|
/**
|
|
194
193
|
* Optional theme token overrides for the outer RadioCardGroup component
|
|
195
194
|
*/
|
|
196
195
|
tokens: (0, _utils.getTokensPropType)('RadioCardGroup'),
|
|
197
|
-
|
|
198
196
|
/**
|
|
199
197
|
* Optional theme token overrides for each inner RadioCard component
|
|
200
198
|
*/
|
|
201
199
|
radioCardTokens: (0, _utils.getTokensPropType)('RadioCard'),
|
|
202
|
-
|
|
203
200
|
/**
|
|
204
201
|
* Theme variants, shared between both RadioCardGroup and RadioCard
|
|
205
202
|
*/
|
|
206
203
|
variant: _utils.variantProp.propType,
|
|
207
|
-
|
|
208
204
|
/**
|
|
209
205
|
* Array of objects containing specifics for each RadioCard to be rendered in the group.
|
|
210
206
|
*/
|
|
211
|
-
items: _propTypes.default.arrayOf(_propTypes.default.exact({
|
|
207
|
+
items: _propTypes.default.arrayOf(_propTypes.default.exact({
|
|
208
|
+
...selectedItemPropTypes,
|
|
212
209
|
title: _propTypes.default.string,
|
|
213
210
|
content: _propTypes.default.node,
|
|
214
211
|
id: _propTypes.default.string,
|
|
215
212
|
onChange: _propTypes.default.func
|
|
216
213
|
})),
|
|
217
|
-
|
|
218
214
|
/**
|
|
219
215
|
* Main text used to describe this group, used in Fieldset's Legend element.
|
|
220
216
|
*/
|
|
221
217
|
legend: _propTypes.default.string,
|
|
222
|
-
|
|
223
218
|
/**
|
|
224
219
|
* Optional additional text giving more detail to help a user make a choice.
|
|
225
220
|
*/
|
|
226
221
|
hint: _propTypes.default.string,
|
|
227
|
-
|
|
228
222
|
/**
|
|
229
223
|
* Position of the hint relative to label. Use `below` to display a larger hint below the label.
|
|
230
224
|
*/
|
|
231
225
|
hintPosition: _propTypes.default.oneOf(['inline', 'below']),
|
|
232
|
-
|
|
233
226
|
/**
|
|
234
227
|
* Optional tooltip text content to include alongside the legend and hint.
|
|
235
228
|
*/
|
|
236
229
|
tooltip: _propTypes.default.string,
|
|
237
|
-
|
|
238
230
|
/**
|
|
239
231
|
* Current validation status of the group, passed to the feedback element if there is one.
|
|
240
232
|
*/
|
|
241
233
|
validation: _propTypes.default.oneOf(['error', 'success']),
|
|
242
|
-
|
|
243
234
|
/**
|
|
244
235
|
* If provided, a Feedback element is rendered containing this text.
|
|
245
236
|
*/
|
|
246
237
|
feedback: _propTypes.default.string,
|
|
247
|
-
|
|
248
238
|
/**
|
|
249
239
|
* If provided, the radio card with this id is selected on first render.
|
|
250
240
|
*/
|
|
251
241
|
initialCheckedId: _propTypes.default.string,
|
|
252
|
-
|
|
253
242
|
/**
|
|
254
243
|
* If not undefined, the radio card with this id is selected (or none is selected if `null`), and the
|
|
255
244
|
* element's selection state will be controlled by its parent using the `onChange` function.
|
|
256
245
|
*/
|
|
257
246
|
checkedId: _propTypes.default.string,
|
|
258
|
-
|
|
259
247
|
/**
|
|
260
248
|
* Function to call on change in selection state. Is required if the selection state is controlled
|
|
261
249
|
* by a parent using checkedId and the input is not readOnly.
|
|
262
250
|
*/
|
|
263
251
|
onChange: _propTypes.default.func,
|
|
264
|
-
|
|
265
252
|
/**
|
|
266
253
|
* If true, the radio cards cannot be selected by the user and simply show their current state.
|
|
267
254
|
*/
|
|
268
255
|
readOnly: _propTypes.default.bool,
|
|
269
|
-
|
|
270
256
|
/**
|
|
271
257
|
* If true, the radio card cannot be interacted with, elements are set as `disabled` and if the
|
|
272
258
|
* theme supports `inactive` appearances rules, these are applied.
|
|
273
259
|
*/
|
|
274
260
|
inactive: _propTypes.default.bool,
|
|
275
|
-
|
|
276
261
|
/**
|
|
277
262
|
* On Web, this is passed to the `name` attribute of the fieldset and each radio input.
|
|
278
263
|
*/
|
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;
|