@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
|
@@ -4,37 +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 _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
|
|
13
|
-
|
|
14
10
|
var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
|
|
15
|
-
|
|
16
11
|
var _ButtonBase = _interopRequireDefault(require("./ButtonBase"));
|
|
17
|
-
|
|
18
12
|
var _StackView = require("../StackView");
|
|
19
|
-
|
|
20
13
|
var _Fieldset = _interopRequireDefault(require("../Fieldset"));
|
|
21
|
-
|
|
22
14
|
var _ViewportProvider = require("../ViewportProvider");
|
|
23
|
-
|
|
24
15
|
var _ThemeProvider = require("../ThemeProvider");
|
|
25
|
-
|
|
26
16
|
var _utils = require("../utils");
|
|
27
|
-
|
|
28
17
|
var _pressability = require("../utils/pressability");
|
|
29
|
-
|
|
30
18
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
31
|
-
|
|
32
19
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
33
|
-
|
|
34
20
|
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); }
|
|
35
|
-
|
|
36
21
|
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; }
|
|
37
|
-
|
|
38
22
|
const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
|
|
39
23
|
const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.pressProps, _utils.viewProps]);
|
|
40
24
|
const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
@@ -91,14 +75,14 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
91
75
|
});
|
|
92
76
|
const itemA11yRole = systemProps.accessibilityRole === 'radiogroup' ? 'radio' : 'checkbox';
|
|
93
77
|
const uniqueFields = ['id', 'label'];
|
|
94
|
-
|
|
95
78
|
if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
|
|
96
79
|
throw new Error(`ButtonGroup items must have unique ${uniqueFields.join(', ')}`);
|
|
97
|
-
}
|
|
98
|
-
|
|
80
|
+
}
|
|
99
81
|
|
|
82
|
+
// Some web screenreaders e.g. MacOS Voiceover don't handle radiogroups properly unless radio is direct child of radiogroup
|
|
100
83
|
const innerRole = _Platform.default.OS === 'web' && accessibilityRole === 'radiogroup' ? accessibilityRole : undefined;
|
|
101
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, {
|
|
84
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, {
|
|
85
|
+
...systemProps,
|
|
102
86
|
ref: ref,
|
|
103
87
|
name: inputGroupName,
|
|
104
88
|
legend: legend,
|
|
@@ -126,19 +110,18 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
126
110
|
ref: itemRef,
|
|
127
111
|
...itemRest
|
|
128
112
|
} = _ref2;
|
|
129
|
-
const isSelected = currentValues.includes(id);
|
|
113
|
+
const isSelected = currentValues.includes(id);
|
|
130
114
|
|
|
115
|
+
// Pass an object of relevant component state as first argument for any passed-in press handlers
|
|
131
116
|
const pressHandlers = (0, _pressability.getPressHandlersWithArgs)(rest, [{
|
|
132
117
|
id,
|
|
133
118
|
label,
|
|
134
119
|
currentValues
|
|
135
120
|
}]);
|
|
136
|
-
|
|
137
121
|
const handlePress = event => {
|
|
138
122
|
if (pressHandlers.onPress) pressHandlers.onPress(event);
|
|
139
123
|
toggleOneValue(id, event);
|
|
140
124
|
};
|
|
141
|
-
|
|
142
125
|
const iconProp = itemRest.icon || undefined;
|
|
143
126
|
const itemA11y = {
|
|
144
127
|
accessibilityState: {
|
|
@@ -147,9 +130,10 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
147
130
|
accessibilityRole: itemA11yRole,
|
|
148
131
|
accessibilityLabel,
|
|
149
132
|
..._utils.a11yProps.getPositionInSet(items.length, index)
|
|
150
|
-
};
|
|
151
|
-
// "radio" if it's a direct child of "radiogroup", even if aria-posinset etc exists
|
|
133
|
+
};
|
|
152
134
|
|
|
135
|
+
// Ensure button is direct child of group as MacOS voiceover only applies "X of Y" to
|
|
136
|
+
// "radio" if it's a direct child of "radiogroup", even if aria-posinset etc exists
|
|
153
137
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
|
|
154
138
|
ref: itemRef,
|
|
155
139
|
...pressHandlers,
|
|
@@ -158,7 +142,8 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
158
142
|
selected: isSelected,
|
|
159
143
|
inactive: inactive,
|
|
160
144
|
icon: iconProp,
|
|
161
|
-
...selectItemProps({
|
|
145
|
+
...selectItemProps({
|
|
146
|
+
...itemRest,
|
|
162
147
|
...itemA11y
|
|
163
148
|
}),
|
|
164
149
|
iconPosition: iconPosition,
|
|
@@ -169,52 +154,46 @@ const ButtonGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
169
154
|
});
|
|
170
155
|
});
|
|
171
156
|
ButtonGroup.displayName = 'ButtonGroup';
|
|
172
|
-
ButtonGroup.propTypes = {
|
|
157
|
+
ButtonGroup.propTypes = {
|
|
158
|
+
...selectedSystemPropTypes,
|
|
173
159
|
tokens: (0, _utils.getTokensPropType)('ButtonGroup'),
|
|
174
160
|
variant: _utils.variantProp.propType,
|
|
175
|
-
|
|
176
161
|
/**
|
|
177
162
|
* The maximum number of items a user may select at once. Defaults to 1 and behaves
|
|
178
163
|
* like radio buttons. To have no limit and allow any number of selections, pass `null`.
|
|
179
164
|
*/
|
|
180
165
|
maxValues: _propTypes.default.number,
|
|
181
|
-
|
|
182
166
|
/**
|
|
183
167
|
* The options a user may select
|
|
184
168
|
*/
|
|
185
|
-
items: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
186
|
-
|
|
169
|
+
items: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
170
|
+
...selectedItemPropTypes,
|
|
187
171
|
/**
|
|
188
172
|
* The text displayed to the user in the button, describing this option,
|
|
189
173
|
* passed to the button as its child.
|
|
190
174
|
*/
|
|
191
175
|
label: _propTypes.default.string.isRequired,
|
|
192
|
-
|
|
193
176
|
/**
|
|
194
177
|
* An optional accessibility label may be passed to ButtonGroup Buttons
|
|
195
178
|
* which is applied as normal for a React Native accessibilityLabel prop.
|
|
196
179
|
*/
|
|
197
180
|
accessibilityLabel: _propTypes.default.string,
|
|
198
|
-
|
|
199
181
|
/**
|
|
200
182
|
* An optional unique string may be provided to identify this option,
|
|
201
183
|
* which will be used in code and passed to any onChange function.
|
|
202
184
|
* If not provided, the label is used.
|
|
203
185
|
*/
|
|
204
186
|
id: _propTypes.default.string,
|
|
205
|
-
|
|
206
187
|
/**
|
|
207
188
|
* An optional ref for one individual button in the ButtonGroup
|
|
208
189
|
*/
|
|
209
190
|
ref: _airbnbPropTypes.default.ref()
|
|
210
191
|
})),
|
|
211
|
-
|
|
212
192
|
/**
|
|
213
193
|
* If provided, this function is called when the current selection is changed
|
|
214
194
|
* and is passed an array of the `id`s of all currently selected `items`.
|
|
215
195
|
*/
|
|
216
196
|
onChange: _propTypes.default.func,
|
|
217
|
-
|
|
218
197
|
/**
|
|
219
198
|
* If the selected item(s) in the button group are to be controlled externally by
|
|
220
199
|
* a parent component, pass an array of strings as well as an `onChange` handler.
|
|
@@ -222,65 +201,53 @@ ButtonGroup.propTypes = { ...selectedSystemPropTypes,
|
|
|
222
201
|
* expects its state to be handled via `onChange` and so doesn't handle it itself.
|
|
223
202
|
*/
|
|
224
203
|
values: _propTypes.default.arrayOf(_propTypes.default.string),
|
|
225
|
-
|
|
226
204
|
/**
|
|
227
205
|
* If `values` is not passed, making the ButtonGroup an "uncontrolled" component
|
|
228
206
|
* managing its own selected state, a default set of selections may be provided.
|
|
229
207
|
* Changing the `initialValues` does not change the user's selections.
|
|
230
208
|
*/
|
|
231
209
|
initialValues: _propTypes.default.arrayOf(_propTypes.default.string),
|
|
232
|
-
|
|
233
210
|
/**
|
|
234
211
|
* Defines if the icon will be displayed on the right or left side of the label.
|
|
235
212
|
*/
|
|
236
213
|
iconPosition: _propTypes.default.oneOf(['left', 'right']),
|
|
237
|
-
|
|
238
214
|
/**
|
|
239
215
|
* Main text used to describe this group, used in Fieldset's Legend element.
|
|
240
216
|
*/
|
|
241
217
|
legend: _propTypes.default.string,
|
|
242
|
-
|
|
243
218
|
/**
|
|
244
219
|
* Optional additional text giving more detail to help a user make a choice.
|
|
245
220
|
*/
|
|
246
221
|
hint: _propTypes.default.string,
|
|
247
|
-
|
|
248
222
|
/**
|
|
249
223
|
* Position of the hint relative to label. Use `below` to display a larger hint below the label.
|
|
250
224
|
*/
|
|
251
225
|
hintPosition: _propTypes.default.oneOf(['inline', 'below']),
|
|
252
|
-
|
|
253
226
|
/**
|
|
254
227
|
* Optional tooltip text content to include alongside the legend and hint.
|
|
255
228
|
*/
|
|
256
229
|
tooltip: _propTypes.default.string,
|
|
257
|
-
|
|
258
230
|
/**
|
|
259
231
|
* Current validation status of the group, passed to the feedback element if there is one.
|
|
260
232
|
*/
|
|
261
233
|
validation: _propTypes.default.oneOf(['error', 'success']),
|
|
262
|
-
|
|
263
234
|
/**
|
|
264
235
|
* If provided, a Feedback element is rendered containing this text.
|
|
265
236
|
*/
|
|
266
237
|
feedback: _propTypes.default.string,
|
|
267
|
-
|
|
268
238
|
/**
|
|
269
239
|
* If true, the buttons cannot be selected by the user and simply show their current state.
|
|
270
240
|
*/
|
|
271
241
|
readOnly: _propTypes.default.bool,
|
|
272
|
-
|
|
273
242
|
/**
|
|
274
243
|
* If true, the buttons cannot be interacted with, elements are set as `disabled` and if the
|
|
275
244
|
* theme supports `inactive` appearances rules, these are applied.
|
|
276
245
|
*/
|
|
277
246
|
inactive: _propTypes.default.bool,
|
|
278
|
-
|
|
279
247
|
/**
|
|
280
248
|
* On Web, this is passed to the `name` attribute of the fieldset.
|
|
281
249
|
*/
|
|
282
250
|
name: _propTypes.default.string,
|
|
283
|
-
|
|
284
251
|
/**
|
|
285
252
|
* Sets the language of microcopy in subcomponents (e.g. Tooltip's default accessibility label).
|
|
286
253
|
*/
|
package/lib/Button/ButtonLink.js
CHANGED
|
@@ -4,34 +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 _ButtonBase = _interopRequireDefault(require("./ButtonBase"));
|
|
13
|
-
|
|
14
10
|
var _propTypes2 = _interopRequireWildcard(require("./propTypes"));
|
|
15
|
-
|
|
16
11
|
var _props = require("../utils/props");
|
|
17
|
-
|
|
18
12
|
var _ThemeProvider = require("../ThemeProvider");
|
|
19
|
-
|
|
20
13
|
var _ViewportProvider = require("../ViewportProvider");
|
|
21
|
-
|
|
22
14
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
23
|
-
|
|
24
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
25
|
-
|
|
26
16
|
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); }
|
|
27
|
-
|
|
28
17
|
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; }
|
|
29
|
-
|
|
30
18
|
/**
|
|
31
19
|
* `ButtonLink` is a component with the semantics and behaviour of a link, but with the visual appearance of a button.
|
|
32
20
|
* ButtonLink is a block-level component and should not be used inline.
|
|
33
|
-
*/
|
|
34
|
-
const ButtonLink = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
21
|
+
*/const ButtonLink = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
35
22
|
let {
|
|
36
23
|
accessibilityRole = 'link',
|
|
37
24
|
tokens,
|
|
@@ -39,12 +26,10 @@ const ButtonLink = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
39
26
|
dataSet,
|
|
40
27
|
...props
|
|
41
28
|
} = _ref;
|
|
42
|
-
|
|
43
29
|
const {
|
|
44
30
|
hrefAttrs,
|
|
45
31
|
rest
|
|
46
32
|
} = _props.hrefAttrsProp.bundle(props);
|
|
47
|
-
|
|
48
33
|
const viewport = (0, _ViewportProvider.useViewport)();
|
|
49
34
|
const buttonVariant = {
|
|
50
35
|
viewport,
|
|
@@ -61,7 +46,8 @@ const ButtonLink = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
61
46
|
});
|
|
62
47
|
});
|
|
63
48
|
ButtonLink.displayName = 'ButtonLink';
|
|
64
|
-
ButtonLink.propTypes = {
|
|
49
|
+
ButtonLink.propTypes = {
|
|
50
|
+
..._props.a11yProps.types,
|
|
65
51
|
..._propTypes2.default,
|
|
66
52
|
..._props.linkProps.types,
|
|
67
53
|
children: _propTypes2.textAndA11yText,
|
package/lib/Button/index.js
CHANGED
|
@@ -27,13 +27,8 @@ Object.defineProperty(exports, "ButtonLink", {
|
|
|
27
27
|
return _ButtonLink.default;
|
|
28
28
|
}
|
|
29
29
|
});
|
|
30
|
-
|
|
31
30
|
var _Button = _interopRequireDefault(require("./Button"));
|
|
32
|
-
|
|
33
31
|
var _ButtonLink = _interopRequireDefault(require("./ButtonLink"));
|
|
34
|
-
|
|
35
32
|
var _ButtonGroup = _interopRequireDefault(require("./ButtonGroup"));
|
|
36
|
-
|
|
37
33
|
var _ButtonDropdown = _interopRequireDefault(require("./ButtonDropdown"));
|
|
38
|
-
|
|
39
34
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
package/lib/Button/propTypes.js
CHANGED
|
@@ -4,36 +4,25 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.textAndA11yText = exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
-
|
|
10
8
|
var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
|
|
11
|
-
|
|
12
9
|
var _props = require("../utils/props");
|
|
13
|
-
|
|
14
10
|
var _A11yText = _interopRequireDefault(require("../A11yText"));
|
|
15
|
-
|
|
16
11
|
var _Icon = require("../Icon");
|
|
17
|
-
|
|
18
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
-
|
|
20
13
|
const textAndA11yText = _airbnbPropTypes.default.childrenOf(_propTypes.default.oneOfType([_airbnbPropTypes.default.elementType(_A11yText.default), _propTypes.default.string]));
|
|
21
|
-
|
|
22
14
|
exports.textAndA11yText = textAndA11yText;
|
|
23
15
|
const buttonPropTypes = {
|
|
24
16
|
tokens: (0, _props.getTokensPropType)('Button'),
|
|
25
|
-
|
|
26
17
|
/**
|
|
27
18
|
* If true, prevents the button from being pressed, changes the cursor (on web) and accessibility
|
|
28
19
|
* attributes to communicate this to the user, and applies `inactive: true` appearances from the theme
|
|
29
20
|
*/
|
|
30
21
|
inactive: _propTypes.default.bool,
|
|
31
|
-
|
|
32
22
|
/**
|
|
33
23
|
* Alias for `inactive`
|
|
34
24
|
*/
|
|
35
25
|
disabled: _propTypes.default.bool,
|
|
36
|
-
|
|
37
26
|
/**
|
|
38
27
|
* Button's children must be either:
|
|
39
28
|
* - One or more text strings and / or A11yText components
|
|
@@ -43,22 +32,18 @@ const buttonPropTypes = {
|
|
|
43
32
|
* ```
|
|
44
33
|
*/
|
|
45
34
|
children: _propTypes.default.oneOfType([_propTypes.default.func, textAndA11yText]).isRequired,
|
|
46
|
-
|
|
47
35
|
/**
|
|
48
36
|
* Function called when the button is pressed. Required unless the button has a href.
|
|
49
37
|
*/
|
|
50
38
|
onPress: _propTypes.default.func,
|
|
51
|
-
|
|
52
39
|
/**
|
|
53
40
|
* Optional variant that may be passed down to the link's icon if there is one
|
|
54
41
|
*/
|
|
55
42
|
iconProps: _propTypes.default.exact(_Icon.iconComponentPropTypes),
|
|
56
|
-
|
|
57
43
|
/**
|
|
58
44
|
* When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of the button.
|
|
59
45
|
*/
|
|
60
46
|
iconPosition: _propTypes.default.oneOf(['left', 'right']),
|
|
61
|
-
|
|
62
47
|
/**
|
|
63
48
|
* A function component for an SVG icon to render inside the link. Inherits size and color from
|
|
64
49
|
* the link and any Typography the link is nested inside.
|
package/lib/Card/Card.js
CHANGED
|
@@ -4,30 +4,19 @@ 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 _ThemeProvider = require("../ThemeProvider");
|
|
13
|
-
|
|
14
10
|
var _utils = require("../utils");
|
|
15
|
-
|
|
16
11
|
var _ViewportProvider = require("../ViewportProvider");
|
|
17
|
-
|
|
18
12
|
var _props = require("../utils/props");
|
|
19
|
-
|
|
20
13
|
var _CardBase = _interopRequireDefault(require("./CardBase"));
|
|
21
|
-
|
|
22
14
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
23
|
-
|
|
24
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
25
|
-
|
|
26
16
|
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); }
|
|
27
|
-
|
|
28
17
|
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; }
|
|
29
|
-
|
|
30
18
|
const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.viewProps]);
|
|
19
|
+
|
|
31
20
|
/**
|
|
32
21
|
* A basic card component, unstyled by default.
|
|
33
22
|
*
|
|
@@ -76,7 +65,6 @@ const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_p
|
|
|
76
65
|
* you automatically make inaccessible its children, which may or may not be appropriate
|
|
77
66
|
* depending on what you are trying to achieve.
|
|
78
67
|
*/
|
|
79
|
-
|
|
80
68
|
const Card = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
81
69
|
let {
|
|
82
70
|
children,
|
|
@@ -98,7 +86,8 @@ const Card = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
98
86
|
});
|
|
99
87
|
});
|
|
100
88
|
Card.displayName = 'Card';
|
|
101
|
-
Card.propTypes = {
|
|
89
|
+
Card.propTypes = {
|
|
90
|
+
...selectedSystemPropTypes,
|
|
102
91
|
children: _propTypes.default.node,
|
|
103
92
|
tokens: (0, _utils.getTokensPropType)('Card'),
|
|
104
93
|
variant: _utils.variantProp.propType
|
package/lib/Card/CardBase.js
CHANGED
|
@@ -4,31 +4,20 @@ 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 _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
|
|
13
|
-
|
|
14
10
|
var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
|
|
15
|
-
|
|
16
11
|
var _ThemeProvider = require("../ThemeProvider");
|
|
17
|
-
|
|
18
12
|
var _utils = require("../utils");
|
|
19
|
-
|
|
20
13
|
var _props = require("../utils/props");
|
|
21
|
-
|
|
22
14
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
23
|
-
|
|
24
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
25
|
-
|
|
26
16
|
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); }
|
|
27
|
-
|
|
28
17
|
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; }
|
|
18
|
+
const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.viewProps]);
|
|
29
19
|
|
|
30
|
-
|
|
31
|
-
|
|
20
|
+
// Ensure explicit selection of tokens
|
|
32
21
|
const selectStyles = _ref => {
|
|
33
22
|
let {
|
|
34
23
|
flex,
|
|
@@ -64,12 +53,11 @@ const selectStyles = _ref => {
|
|
|
64
53
|
} : {})
|
|
65
54
|
};
|
|
66
55
|
};
|
|
56
|
+
|
|
67
57
|
/**
|
|
68
58
|
* A themeless base component for Card which components can apply theme tokens to. Not
|
|
69
59
|
* intended to be used in apps or sites directly: build themed components on top of this.
|
|
70
60
|
*/
|
|
71
|
-
|
|
72
|
-
|
|
73
61
|
const CardBase = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
|
|
74
62
|
let {
|
|
75
63
|
children,
|
|
@@ -88,7 +76,8 @@ const CardBase = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
|
|
|
88
76
|
});
|
|
89
77
|
});
|
|
90
78
|
CardBase.displayName = 'CardBase';
|
|
91
|
-
CardBase.propTypes = {
|
|
79
|
+
CardBase.propTypes = {
|
|
80
|
+
...selectedSystemPropTypes,
|
|
92
81
|
children: _propTypes.default.node,
|
|
93
82
|
tokens: (0, _utils.getTokensPropType)('Card')
|
|
94
83
|
};
|
|
@@ -4,44 +4,30 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.selectPressableCardTokens = 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 _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
|
|
13
|
-
|
|
14
10
|
var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
|
|
15
|
-
|
|
16
11
|
var _ViewportProvider = require("../ViewportProvider");
|
|
17
|
-
|
|
18
12
|
var _ThemeProvider = require("../ThemeProvider");
|
|
19
|
-
|
|
20
13
|
var _utils = require("../utils");
|
|
21
|
-
|
|
22
14
|
var _CardBase = _interopRequireDefault(require("./CardBase"));
|
|
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.focusHandlerProps, _utils.viewProps]);
|
|
33
|
-
const tokenKeys = [...(0, _utils.getTokenNames)('Card'),
|
|
20
|
+
const tokenKeys = [...(0, _utils.getTokenNames)('Card'),
|
|
21
|
+
// Outer border tokens. TODO: centralise common token sets like these as part of
|
|
34
22
|
// https://github.com/telus/universal-design-system/issues/782
|
|
35
23
|
'outerBorderColor', 'outerBorderWidth', 'outerBorderGap'];
|
|
36
|
-
|
|
37
24
|
const selectPressableCardTokens = tokens => Object.fromEntries(tokenKeys.map(key => [key, tokens[key]]));
|
|
25
|
+
|
|
38
26
|
/**
|
|
39
27
|
* A pressable themeless base component that handles pressable states and passes tokens
|
|
40
28
|
* based on these to an outer border and a base Card component. Not intended to be used in
|
|
41
29
|
* apps or sites directly: build themed components on top of this.
|
|
42
30
|
*/
|
|
43
|
-
|
|
44
|
-
|
|
45
31
|
exports.selectPressableCardTokens = selectPressableCardTokens;
|
|
46
32
|
const PressableCardBase = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
47
33
|
let {
|
|
@@ -55,12 +41,10 @@ const PressableCardBase = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
55
41
|
accessibilityRole = href ? 'link' : undefined,
|
|
56
42
|
...rawRest
|
|
57
43
|
} = _ref;
|
|
58
|
-
|
|
59
44
|
const {
|
|
60
45
|
onPress,
|
|
61
46
|
...rest
|
|
62
47
|
} = _utils.clickProps.toPressProps(rawRest);
|
|
63
|
-
|
|
64
48
|
const viewport = (0, _ViewportProvider.useViewport)();
|
|
65
49
|
const additionalState = {
|
|
66
50
|
checked,
|
|
@@ -68,15 +52,11 @@ const PressableCardBase = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
68
52
|
inactive,
|
|
69
53
|
viewport
|
|
70
54
|
};
|
|
71
|
-
|
|
72
55
|
const getCardState = pressableState => (0, _utils.resolvePressableState)(pressableState, additionalState);
|
|
73
|
-
|
|
74
56
|
const getTokens = pressableState => (0, _ThemeProvider.validateThemeTokens)((0, _utils.resolvePressableTokens)(tokens, pressableState, additionalState), (0, _utils.getTokensSetPropType)(tokenKeys, {
|
|
75
57
|
requireAll: true
|
|
76
58
|
}), 'PressableCard');
|
|
77
|
-
|
|
78
59
|
const getCardTokens = pressableState => (0, _utils.selectTokens)('Card', getTokens(pressableState));
|
|
79
|
-
|
|
80
60
|
const getOuterBorderStyle = pressableState => {
|
|
81
61
|
const {
|
|
82
62
|
flex,
|
|
@@ -102,17 +82,14 @@ const PressableCardBase = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
102
82
|
})
|
|
103
83
|
};
|
|
104
84
|
};
|
|
105
|
-
|
|
106
85
|
const handleChange = _utils.linkProps.handleHref({
|
|
107
86
|
href,
|
|
108
87
|
onPress
|
|
109
88
|
});
|
|
110
|
-
|
|
111
89
|
const handleKeyDown = event => {
|
|
112
90
|
// The expected keyboard shortcut for selecting a focused item is the Space key
|
|
113
91
|
if ((event === null || event === void 0 ? void 0 : event.key) === ' ') handleChange(event);
|
|
114
92
|
};
|
|
115
|
-
|
|
116
93
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
|
|
117
94
|
ref: ref,
|
|
118
95
|
href: href,
|
|
@@ -120,7 +97,8 @@ const PressableCardBase = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
120
97
|
onKeyDown: handleKeyDown,
|
|
121
98
|
hrefAttrs: hrefAttrs,
|
|
122
99
|
style: getOuterBorderStyle,
|
|
123
|
-
...selectProps({
|
|
100
|
+
...selectProps({
|
|
101
|
+
...rest,
|
|
124
102
|
accessibilityRole
|
|
125
103
|
}),
|
|
126
104
|
children: pressableState => /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
|
|
@@ -130,7 +108,8 @@ const PressableCardBase = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
130
108
|
});
|
|
131
109
|
});
|
|
132
110
|
PressableCardBase.displayName = 'PressableCardBase';
|
|
133
|
-
PressableCardBase.propTypes = {
|
|
111
|
+
PressableCardBase.propTypes = {
|
|
112
|
+
...selectedSystemPropTypes,
|
|
134
113
|
children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
|
|
135
114
|
tokens: (0, _utils.getTokensSetPropType)(tokenKeys, {
|
|
136
115
|
requireAll: true,
|
|
@@ -138,7 +117,5 @@ PressableCardBase.propTypes = { ...selectedSystemPropTypes,
|
|
|
138
117
|
}),
|
|
139
118
|
variant: _utils.variantProp.propType
|
|
140
119
|
};
|
|
141
|
-
|
|
142
120
|
var _default = (0, _utils.withLinkRouter)(PressableCardBase);
|
|
143
|
-
|
|
144
121
|
exports.default = _default;
|
package/lib/Card/index.js
CHANGED
|
@@ -13,11 +13,8 @@ Object.defineProperty(exports, "PressableCardBase", {
|
|
|
13
13
|
}
|
|
14
14
|
});
|
|
15
15
|
exports.default = void 0;
|
|
16
|
-
|
|
17
16
|
var _Card = _interopRequireDefault(require("./Card"));
|
|
18
|
-
|
|
19
17
|
var _PressableCardBase = _interopRequireWildcard(require("./PressableCardBase"));
|
|
20
|
-
|
|
21
18
|
Object.keys(_PressableCardBase).forEach(function (key) {
|
|
22
19
|
if (key === "default" || key === "__esModule") return;
|
|
23
20
|
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
@@ -29,12 +26,8 @@ Object.keys(_PressableCardBase).forEach(function (key) {
|
|
|
29
26
|
}
|
|
30
27
|
});
|
|
31
28
|
});
|
|
32
|
-
|
|
33
29
|
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); }
|
|
34
|
-
|
|
35
30
|
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; }
|
|
36
|
-
|
|
37
31
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
38
|
-
|
|
39
32
|
var _default = _Card.default;
|
|
40
33
|
exports.default = _default;
|