@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
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import Platform from "react-native-web/dist/exports/Platform";
|
|
2
|
-
import fileSuffix from './platform';
|
|
2
|
+
import fileSuffix from './platform';
|
|
3
|
+
|
|
4
|
+
// Allows consuming libraries that might not have a direct dependency on
|
|
3
5
|
// React Native to check what the current platform is.
|
|
6
|
+
|
|
4
7
|
// Particularly useful for validating Jest config: it is possible for Jest to
|
|
5
8
|
// get configured such that Platform.OS returns a different mocked value to the
|
|
6
9
|
// OS being used to select files by platform suffix (e.g. .web, .native).
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import pkgJson from '../../../package.json';
|
|
1
|
+
import pkgJson from '../../../package.json';
|
|
2
2
|
|
|
3
|
+
// Add more versions if they are useful e.g. theme schema version
|
|
3
4
|
export default {
|
|
4
5
|
uds: pkgJson.version
|
|
5
6
|
};
|
|
@@ -4,7 +4,6 @@ import { useCallback, useRef, useState } from 'react';
|
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
const pluralHooks = ['useMultipleInputValues'];
|
|
7
|
-
|
|
8
7
|
const validateProps = (_ref, _ref2, hookName) => {
|
|
9
8
|
let {
|
|
10
9
|
value,
|
|
@@ -17,7 +16,6 @@ const validateProps = (_ref, _ref2, hookName) => {
|
|
|
17
16
|
isControlled
|
|
18
17
|
} = _ref2;
|
|
19
18
|
const s = pluralHooks.includes(hookName) ? 's' : '';
|
|
20
|
-
|
|
21
19
|
const usageError = error => {
|
|
22
20
|
// Errors inside hooks in React Native get incomplete stack traces pointing at parent component only.
|
|
23
21
|
// Help devs out by telling them exactly which hook threw the error as well as why.
|
|
@@ -29,23 +27,20 @@ Consumers of this hook must be one of:
|
|
|
29
27
|
3. A "read-only" component, with \`readOnly\` prop set as \`true\`.
|
|
30
28
|
`);
|
|
31
29
|
};
|
|
32
|
-
|
|
33
30
|
if (value && !onChange && !readOnly) {
|
|
34
31
|
usageError(`has \`value${s}\` prop without \`onChange\` or \`readOnly\``);
|
|
35
32
|
}
|
|
36
|
-
|
|
37
33
|
if (initialValue && value) {
|
|
38
34
|
usageError(`has both \`initialValue${s}\` and \`value${s}\``);
|
|
39
35
|
}
|
|
40
|
-
|
|
41
36
|
if (isControlled && !isCurrentlyControlled) {
|
|
42
37
|
usageError(`stopped receiving \`value${s}\` from parent after delegating state management`);
|
|
43
38
|
}
|
|
44
|
-
|
|
45
39
|
if (!isControlled && isCurrentlyControlled) {
|
|
46
40
|
usageError(`started receiving \`value${s}\` from parent after starting managing own state`);
|
|
47
41
|
}
|
|
48
42
|
};
|
|
43
|
+
|
|
49
44
|
/**
|
|
50
45
|
* Hook used for controlling the input state of input components that have a singular value.
|
|
51
46
|
* If `value` prop is passed in, this delegates state management to a parent using a passed-in `onChange` prop.
|
|
@@ -69,8 +64,6 @@ Consumers of this hook must be one of:
|
|
|
69
64
|
* isControlled: bool
|
|
70
65
|
* }}
|
|
71
66
|
*/
|
|
72
|
-
|
|
73
|
-
|
|
74
67
|
export const useInputValue = function () {
|
|
75
68
|
let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
76
69
|
let hookName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'useInputValue';
|
|
@@ -88,26 +81,25 @@ export const useInputValue = function () {
|
|
|
88
81
|
readOnly = false
|
|
89
82
|
} = props;
|
|
90
83
|
const [ownValue, setOwnValue] = useState(!isControlled && initialValue);
|
|
91
|
-
const currentValue = isControlled ? value : ownValue;
|
|
92
|
-
// is needed, add useEffect calling a set fn if !deepEqual(initializedValues, initialValues)
|
|
84
|
+
const currentValue = isControlled ? value : ownValue;
|
|
93
85
|
|
|
86
|
+
// Store the first valid value, for resetting input to default. If behaviour like Formik's `enableReinitialize`
|
|
87
|
+
// is needed, add useEffect calling a set fn if !deepEqual(initializedValues, initialValues)
|
|
94
88
|
const valueRef = useRef({
|
|
95
89
|
initial: currentValue,
|
|
96
90
|
value: currentValue
|
|
97
|
-
});
|
|
98
|
-
|
|
91
|
+
});
|
|
92
|
+
// Make current value accessible inside useCallback without rememoizing every time the value changes
|
|
99
93
|
valueRef.current.value = currentValue;
|
|
100
94
|
const isDirty = currentValue !== valueRef.current.initial;
|
|
101
95
|
const setValue = useCallback((arg, event) => {
|
|
102
96
|
if (readOnly) return;
|
|
103
97
|
const newValue = typeof arg === 'function' ? arg(valueRef.current.value) : arg;
|
|
104
|
-
|
|
105
98
|
if (!isControlled) {
|
|
106
99
|
setOwnValue(newValue);
|
|
107
100
|
if (inputRef !== null && inputRef !== void 0 && inputRef.current) inputRef.current.value = newValue ?? '';
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
|
|
101
|
+
}
|
|
102
|
+
// Call onChange handler if there's something for it to handle (event or a changed value)
|
|
111
103
|
if (onChange && (event || valueRef.current.value !== newValue)) onChange(newValue, event);
|
|
112
104
|
}, [inputRef, isControlled, onChange, readOnly]);
|
|
113
105
|
const resetValue = useCallback(event => setValue(valueRef.current.initial, event), [setValue]);
|
|
@@ -119,6 +111,7 @@ export const useInputValue = function () {
|
|
|
119
111
|
isDirty
|
|
120
112
|
};
|
|
121
113
|
};
|
|
114
|
+
|
|
122
115
|
/**
|
|
123
116
|
* Hook used for controlling the input state of input components that have multiple named on/off states.
|
|
124
117
|
* If `values` are passed in, this delegates state management to a parent using a passed-in `onChange` prop.
|
|
@@ -144,7 +137,6 @@ export const useInputValue = function () {
|
|
|
144
137
|
* unsetValues: () => void
|
|
145
138
|
* }}
|
|
146
139
|
*/
|
|
147
|
-
|
|
148
140
|
export const useMultipleInputValues = function () {
|
|
149
141
|
let {
|
|
150
142
|
values,
|
|
@@ -177,9 +169,9 @@ export const useMultipleInputValues = function () {
|
|
|
177
169
|
const resetValues = resetValue;
|
|
178
170
|
const unsetValues = useCallback(event => setValues([], event), [setValues]);
|
|
179
171
|
const toggleOneValue = useCallback((newValue, event) => {
|
|
180
|
-
if (readOnly) return;
|
|
172
|
+
if (readOnly) return;
|
|
173
|
+
// This will only work with primitive values (e.g. strings, numbers), swap for .some() and
|
|
181
174
|
// a deepEqual() function if there's any use case for toggling stored objects or arrays.
|
|
182
|
-
|
|
183
175
|
const newValues = currentValues.includes(newValue) ? currentValues.filter(oldValue => oldValue !== newValue) : [...currentValues, newValue];
|
|
184
176
|
setValues(newValues, event);
|
|
185
177
|
}, [currentValues, readOnly, setValues]);
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import Platform from "react-native-web/dist/exports/Platform";
|
|
2
2
|
import StyleSheet from "react-native-web/dist/exports/StyleSheet";
|
|
3
3
|
import pressProps from './props/pressProps';
|
|
4
|
+
|
|
4
5
|
/**
|
|
5
6
|
* @typedef {import('react').ReactNode} ReactNode
|
|
6
7
|
*/
|
|
7
|
-
// These roles should result in cursor: pointer but don't in current RNW releases
|
|
8
8
|
|
|
9
|
+
// These roles should result in cursor: pointer but don't in current RNW releases
|
|
9
10
|
const shouldUseCursor = ['checkbox', 'radio', 'switch'];
|
|
11
|
+
|
|
10
12
|
/**
|
|
11
13
|
* React Native Web has some built-in logic for applying cursor styles based on accessibility roles;
|
|
12
14
|
* however, it misses certain cases. This fills in known cases where widely used versions of RNW
|
|
@@ -18,7 +20,6 @@ const shouldUseCursor = ['checkbox', 'radio', 'switch'];
|
|
|
18
20
|
* @param {string} [props.accessibilityRole]
|
|
19
21
|
* @returns
|
|
20
22
|
*/
|
|
21
|
-
|
|
22
23
|
export const getCursorStyle = _ref => {
|
|
23
24
|
let {
|
|
24
25
|
inactive,
|
|
@@ -30,6 +31,7 @@ export const getCursorStyle = _ref => {
|
|
|
30
31
|
if (shouldUseCursor.includes(accessibilityRole)) return staticStyles.pointer;
|
|
31
32
|
return undefined; // allows React Native Web's built-in logic to apply
|
|
32
33
|
};
|
|
34
|
+
|
|
33
35
|
/**
|
|
34
36
|
* @typedef {{ pressed: boolean, focused: boolean, hovered?: boolean }} PressableState
|
|
35
37
|
*/
|
|
@@ -44,7 +46,6 @@ export const getCursorStyle = _ref => {
|
|
|
44
46
|
* such as `inactive`, `selected`, etc.
|
|
45
47
|
* @returns {object}
|
|
46
48
|
*/
|
|
47
|
-
|
|
48
49
|
export const resolvePressableState = function () {
|
|
49
50
|
let {
|
|
50
51
|
pressed = false,
|
|
@@ -52,12 +53,14 @@ export const resolvePressableState = function () {
|
|
|
52
53
|
hovered = false
|
|
53
54
|
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
54
55
|
let additionalState = arguments.length > 1 ? arguments[1] : undefined;
|
|
55
|
-
return {
|
|
56
|
+
return {
|
|
57
|
+
...additionalState,
|
|
56
58
|
focus: focused,
|
|
57
59
|
hover: hovered,
|
|
58
60
|
pressed
|
|
59
61
|
};
|
|
60
62
|
};
|
|
63
|
+
|
|
61
64
|
/**
|
|
62
65
|
* Takes a UDS `tokens` prop and, if it is a function, resolves it based on a state
|
|
63
66
|
* object passed from the React Native `Pressable` component and optional extra properties.
|
|
@@ -67,7 +70,6 @@ export const resolvePressableState = function () {
|
|
|
67
70
|
* @param {object} [additionalState] - properties specific to the current component
|
|
68
71
|
* @returns {object} - resolved tokens object
|
|
69
72
|
*/
|
|
70
|
-
|
|
71
73
|
export const resolvePressableTokens = (tokens, pressableState, additionalState) => {
|
|
72
74
|
if (typeof tokens !== 'function') return tokens;
|
|
73
75
|
const udsPressableState = resolvePressableState(pressableState, additionalState);
|
|
@@ -84,12 +86,12 @@ const staticStyles = StyleSheet.create(Platform.select({
|
|
|
84
86
|
},
|
|
85
87
|
default: {}
|
|
86
88
|
}));
|
|
89
|
+
|
|
87
90
|
/**
|
|
88
91
|
* From an object of props, extracts any platform-appropriate press handler functions and wraps
|
|
89
92
|
* them in a function that passes in some provided args. Allows components containing a Pressable
|
|
90
93
|
* to pass in press handlers that are then called with state or values that is otherwise internal.
|
|
91
94
|
*/
|
|
92
|
-
|
|
93
95
|
export const getPressHandlersWithArgs = function () {
|
|
94
96
|
let pressableProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
95
97
|
let args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
@@ -101,7 +103,6 @@ export const getPressHandlersWithArgs = function () {
|
|
|
101
103
|
for (var _len = arguments.length, defaultArgs = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
102
104
|
defaultArgs[_key] = arguments[_key];
|
|
103
105
|
}
|
|
104
|
-
|
|
105
106
|
// Pass each handler data on this button and current selection
|
|
106
107
|
handler(...args, ...defaultArgs);
|
|
107
108
|
}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import PropTypes from 'prop-types';
|
|
2
2
|
import Platform from "react-native-web/dist/exports/Platform";
|
|
3
|
-
import getPropSelector from './getPropSelector';
|
|
4
|
-
// so we have to define them ourselves.
|
|
3
|
+
import getPropSelector from './getPropSelector';
|
|
5
4
|
|
|
5
|
+
// React Native exports a11y prop definitions as TypeScript Interfaces, but no longer exports PropTypes
|
|
6
|
+
// so we have to define them ourselves.
|
|
6
7
|
const nativeA11yPropTypes = {
|
|
7
8
|
accessible: PropTypes.bool,
|
|
8
9
|
focusable: PropTypes.bool,
|
|
@@ -36,7 +37,8 @@ const nativeA11yPropTypes = {
|
|
|
36
37
|
onAccessibilityEscape: PropTypes.func,
|
|
37
38
|
onAccessibilityTap: PropTypes.func
|
|
38
39
|
};
|
|
39
|
-
const a11yPropTypes = {
|
|
40
|
+
const a11yPropTypes = {
|
|
41
|
+
...nativeA11yPropTypes,
|
|
40
42
|
// React Native Web adds many a11y props that alias aria-* attributes
|
|
41
43
|
// Types based on https://necolas.github.io/react-native-web/docs/accessibility/
|
|
42
44
|
accessibilityActiveDescendant: PropTypes.string,
|
|
@@ -89,7 +91,9 @@ const a11yPropTypesByPlatform = Platform.select({
|
|
|
89
91
|
web: a11yPropTypes,
|
|
90
92
|
// Ignore web-only props in native builds
|
|
91
93
|
default: nativeA11yPropTypes
|
|
92
|
-
});
|
|
94
|
+
});
|
|
95
|
+
|
|
96
|
+
// These RNW-only props only exist in RNW >=0.18. Catch them and map them according to platform
|
|
93
97
|
// so all props work on RN, RNW >=0.18 and RNW <=0.18, regardless of which they were written for:
|
|
94
98
|
// - On native, bundle them into objects, like `accessibilityValue: { max: 100 }`
|
|
95
99
|
// - On web, split them into both of:
|
|
@@ -97,7 +101,6 @@ const a11yPropTypesByPlatform = Platform.select({
|
|
|
97
101
|
// - The corresponding RNW >=0.18 prop, like `accessibilityValueNow`, which in some cases does more
|
|
98
102
|
// than just add the aria-* (e.g. `accessibilityDisabled` adds `disabled` if element supports it,
|
|
99
103
|
// and future releases might add more features here).
|
|
100
|
-
|
|
101
104
|
const rwnPropMappings = {
|
|
102
105
|
// Former accessibilityValue props.
|
|
103
106
|
accessibilityValueMax: value => Platform.select({
|
|
@@ -205,14 +208,13 @@ const rwnPropMappings = {
|
|
|
205
208
|
}
|
|
206
209
|
})
|
|
207
210
|
};
|
|
208
|
-
|
|
209
211
|
if (Platform.OS === 'web') {
|
|
210
|
-
const mapIfDefined = (value, fn) => value === undefined ? undefined : fn(value);
|
|
212
|
+
const mapIfDefined = (value, fn) => value === undefined ? undefined : fn(value);
|
|
213
|
+
|
|
214
|
+
// On Web only, these React Native object props need manual mapping in RNW >=0.18
|
|
211
215
|
// which dropped support for the React Native shape of these props.
|
|
212
216
|
// Re-use our RNW 0.18 prop mappings to support both RNW <0.18 (aria-*) and
|
|
213
217
|
// new features added in >=0.18 (e.g. for accessibilityDisabled).
|
|
214
|
-
|
|
215
|
-
|
|
216
218
|
rwnPropMappings.accessibilityValue = function () {
|
|
217
219
|
let {
|
|
218
220
|
max,
|
|
@@ -220,13 +222,13 @@ if (Platform.OS === 'web') {
|
|
|
220
222
|
now,
|
|
221
223
|
text
|
|
222
224
|
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
223
|
-
return {
|
|
225
|
+
return {
|
|
226
|
+
...mapIfDefined(max, rwnPropMappings.accessibilityValueMax),
|
|
224
227
|
...mapIfDefined(min, rwnPropMappings.accessibilityValueMin),
|
|
225
228
|
...mapIfDefined(now, rwnPropMappings.accessibilityValueNow),
|
|
226
229
|
...mapIfDefined(text, rwnPropMappings.accessibilityValueText)
|
|
227
230
|
};
|
|
228
231
|
};
|
|
229
|
-
|
|
230
232
|
rwnPropMappings.accessibilityState = function () {
|
|
231
233
|
let {
|
|
232
234
|
busy,
|
|
@@ -235,7 +237,8 @@ if (Platform.OS === 'web') {
|
|
|
235
237
|
expanded,
|
|
236
238
|
selected
|
|
237
239
|
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
238
|
-
return {
|
|
240
|
+
return {
|
|
241
|
+
...mapIfDefined(busy, rwnPropMappings.accessibilityBusy),
|
|
239
242
|
...mapIfDefined(checked, rwnPropMappings.accessibilityChecked),
|
|
240
243
|
...mapIfDefined(disabled, rwnPropMappings.accessibilityDisabled),
|
|
241
244
|
...mapIfDefined(expanded, rwnPropMappings.accessibilityExpanded),
|
|
@@ -243,29 +246,29 @@ if (Platform.OS === 'web') {
|
|
|
243
246
|
};
|
|
244
247
|
};
|
|
245
248
|
}
|
|
246
|
-
|
|
247
249
|
export default {
|
|
248
250
|
/**
|
|
249
251
|
* Proptypes for recognised React Native accessiblity (a11y) props.
|
|
250
252
|
* Spread this in the propTypes of components that accept React Native a11y props.
|
|
251
253
|
*/
|
|
252
254
|
types: a11yPropTypes,
|
|
253
|
-
|
|
254
255
|
/**
|
|
255
256
|
* Filters a props object, returning only recognised React Native accessiblity (a11y) props.
|
|
256
257
|
*
|
|
257
258
|
* Where components accept React Native a11y props, pass { ...rest } from its props to this,
|
|
258
259
|
* then spread the returned object into the component's props (usually its outer container).
|
|
259
260
|
*/
|
|
260
|
-
select: getPropSelector(
|
|
261
|
-
|
|
262
|
-
|
|
261
|
+
select: getPropSelector(
|
|
262
|
+
// Allow all React Native accessibility props
|
|
263
|
+
a11yPropTypesByPlatform,
|
|
264
|
+
// Allow any `aria-*` attribute on web; ignore them on native
|
|
265
|
+
Platform.OS === 'web' && /^aria-/,
|
|
266
|
+
// For the props added and deprecated in React Native Web 0.18, convert them to
|
|
263
267
|
// a form that is platform-appropriate and RNW-version safe
|
|
264
268
|
(key, value) => {
|
|
265
269
|
const rnwPropMapper = rwnPropMappings[key];
|
|
266
270
|
return rnwPropMapper ? rnwPropMapper(value) : undefined;
|
|
267
271
|
}),
|
|
268
|
-
|
|
269
272
|
/**
|
|
270
273
|
* Use this to disable focus for elements which are visually hidden but still rendered.
|
|
271
274
|
*/
|
|
@@ -275,8 +278,8 @@ export default {
|
|
|
275
278
|
...Platform.select({
|
|
276
279
|
web: {
|
|
277
280
|
accessibilityHidden: true // web screenreaders
|
|
278
|
-
|
|
279
281
|
},
|
|
282
|
+
|
|
280
283
|
android: {
|
|
281
284
|
importantForAccessibility: 'no-hide-descendants'
|
|
282
285
|
},
|
|
@@ -285,7 +288,6 @@ export default {
|
|
|
285
288
|
}
|
|
286
289
|
})
|
|
287
290
|
},
|
|
288
|
-
|
|
289
291
|
/**
|
|
290
292
|
* Generates an object of platform-appropriate a11y props describing an item that has an
|
|
291
293
|
* ordered position in a set. Examples of usage by accessibility tools includes screenreaders
|
|
@@ -9,7 +9,6 @@ export default {
|
|
|
9
9
|
* Web-oriented HTML click handlers that may be mapped to React Native press handlers
|
|
10
10
|
*/
|
|
11
11
|
types: Object.fromEntries(Object.keys(clickHandlerMapping).map(mouseName => [mouseName, PropTypes.func])),
|
|
12
|
-
|
|
13
12
|
/**
|
|
14
13
|
* Takes a set of props and converts HTML mouse click oriented event handlers to closest
|
|
15
14
|
* equivalent React Native press event handler.
|
|
@@ -9,54 +9,41 @@
|
|
|
9
9
|
*/
|
|
10
10
|
export default function componentPropType(passedName) {
|
|
11
11
|
const passedNames = typeof passedName === 'string' ? [passedName] : passedName;
|
|
12
|
-
|
|
13
12
|
const checkProp = (props, propName, componentName) => {
|
|
14
13
|
var _props$propName$type, _props$propName$type2;
|
|
15
|
-
|
|
16
14
|
if (props[propName] === undefined || props[propName] === null) {
|
|
17
15
|
return undefined;
|
|
18
16
|
}
|
|
19
|
-
|
|
20
17
|
if (Array.isArray(props[propName])) {
|
|
21
18
|
// Iterates through every child and try to find the first element that does not match the passed name
|
|
22
19
|
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean
|
|
23
20
|
return props[propName].map((_, index) => checkProp(props[propName], index, componentName)).find(Boolean);
|
|
24
21
|
}
|
|
25
|
-
|
|
26
22
|
const nameInProp = ((_props$propName$type = props[propName].type) === null || _props$propName$type === void 0 ? void 0 : _props$propName$type.displayName) || ((_props$propName$type2 = props[propName].type) === null || _props$propName$type2 === void 0 ? void 0 : _props$propName$type2.name);
|
|
27
|
-
|
|
28
23
|
if (!nameInProp || !passedNames.includes(nameInProp)) {
|
|
29
24
|
const propDescription = nameInProp ? `Component ${nameInProp}` : typeof props[propName];
|
|
30
25
|
return new Error(`${componentName}: ${propDescription} was passed to \`${propName}\` prop; should be ${passedNames.join(' or ')}`);
|
|
31
26
|
}
|
|
32
|
-
|
|
33
27
|
return undefined;
|
|
34
28
|
};
|
|
35
|
-
|
|
36
29
|
const checkRequired = (props, propName, componentName) => {
|
|
37
30
|
if (props[propName] === undefined) {
|
|
38
31
|
return new Error(`The prop \`${propName}\` is marked as required in \`${componentName}\`, but its value is ${props[propName]}.`);
|
|
39
32
|
}
|
|
40
|
-
|
|
41
33
|
return undefined;
|
|
42
34
|
};
|
|
43
|
-
|
|
44
35
|
const createValidate = isRequired => {
|
|
45
36
|
if (isRequired) {
|
|
46
37
|
return (props, propName, componentName) => {
|
|
47
38
|
const checkForError = checkProp(props, propName, componentName);
|
|
48
|
-
|
|
49
39
|
if (checkForError) {
|
|
50
40
|
return checkForError;
|
|
51
41
|
}
|
|
52
|
-
|
|
53
42
|
return checkRequired(props, propName, componentName);
|
|
54
43
|
};
|
|
55
44
|
}
|
|
56
|
-
|
|
57
45
|
return checkProp;
|
|
58
46
|
};
|
|
59
|
-
|
|
60
47
|
const validate = createValidate();
|
|
61
48
|
validate.isRequired = createValidate(true);
|
|
62
49
|
return validate;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import merge from 'lodash.merge';
|
|
2
2
|
import hasOwnProperty from '../hasOwnProperty';
|
|
3
|
+
|
|
3
4
|
/**
|
|
4
5
|
* @callback PropSelectorCallback - a callback called for each prop passed to a component
|
|
5
6
|
* @param {string} key - the key for the prop to be tested
|
|
@@ -14,16 +15,18 @@ import hasOwnProperty from '../hasOwnProperty';
|
|
|
14
15
|
* @param {*} value
|
|
15
16
|
* @returns {object|undefined}
|
|
16
17
|
*/
|
|
17
|
-
|
|
18
18
|
const applyCallback = (callback, items, key, value) => {
|
|
19
19
|
// If there's no callback, continue and look up keys as normal
|
|
20
20
|
if (typeof callback !== 'function') return undefined;
|
|
21
|
-
const newItems = callback(key, value);
|
|
21
|
+
const newItems = callback(key, value);
|
|
22
22
|
|
|
23
|
-
|
|
23
|
+
// If the callback doesn't return anything, continue and look up keys as normal
|
|
24
|
+
if (!newItems) return undefined;
|
|
24
25
|
|
|
26
|
+
// If the callback returns items, merge them in, deep merging props that are objects
|
|
25
27
|
return merge({}, items, newItems);
|
|
26
28
|
};
|
|
29
|
+
|
|
27
30
|
/**
|
|
28
31
|
* Generates a function to filter an object of props down to a subset of allowed props, with
|
|
29
32
|
* optional prop alteration and re-mapping via an optional callback.
|
|
@@ -33,14 +36,15 @@ const applyCallback = (callback, items, key, value) => {
|
|
|
33
36
|
* @param {PropSelectorCallback} callback - optional function taking `(key, value)` returning either undefined or an object of new props to merge in
|
|
34
37
|
* @returns {object} - valid props for this component
|
|
35
38
|
*/
|
|
36
|
-
|
|
37
|
-
|
|
38
39
|
export default function getPropSelector(propTypes, regexp, callback) {
|
|
39
40
|
return props => Object.entries(props).reduce((items, _ref) => {
|
|
40
41
|
let [key, value] = _ref;
|
|
41
|
-
return (
|
|
42
|
-
|
|
43
|
-
|
|
42
|
+
return (
|
|
43
|
+
// If there's a callback and it matches something, applyCallback merges it in; return that
|
|
44
|
+
applyCallback(callback, items, key, value) || (
|
|
45
|
+
// If there's no callback match, check if this prop is valid and merge it in if it is
|
|
46
|
+
hasOwnProperty(propTypes, key) || regexp && regexp.test(key) ? {
|
|
47
|
+
...items,
|
|
44
48
|
[key]: value
|
|
45
49
|
} : items)
|
|
46
50
|
);
|
|
@@ -7,7 +7,6 @@ const focusHandlerProps = {
|
|
|
7
7
|
* onBlur handler
|
|
8
8
|
*/
|
|
9
9
|
onBlur: PropTypes.func,
|
|
10
|
-
|
|
11
10
|
/**
|
|
12
11
|
* onFocus handler
|
|
13
12
|
*/
|
|
@@ -21,62 +20,50 @@ const textInputHandlerProps = {
|
|
|
21
20
|
* onChange handler
|
|
22
21
|
*/
|
|
23
22
|
onChange: PropTypes.func,
|
|
24
|
-
|
|
25
23
|
/**
|
|
26
24
|
* onChangeText handler
|
|
27
25
|
*/
|
|
28
26
|
onChangeText: PropTypes.func,
|
|
29
|
-
|
|
30
27
|
/**
|
|
31
28
|
* onClear handler
|
|
32
29
|
*/
|
|
33
30
|
onClear: PropTypes.func,
|
|
34
|
-
|
|
35
31
|
/**
|
|
36
32
|
* onSubmit handler
|
|
37
33
|
*/
|
|
38
34
|
onSubmit: PropTypes.func,
|
|
39
|
-
|
|
40
35
|
/**
|
|
41
36
|
* onSubmitEditing handler
|
|
42
37
|
*/
|
|
43
38
|
onSubmitEditing: PropTypes.func,
|
|
44
|
-
|
|
45
39
|
/**
|
|
46
40
|
* onContentSizeChange handler
|
|
47
41
|
*/
|
|
48
42
|
onContentSizeChange: PropTypes.func,
|
|
49
|
-
|
|
50
43
|
/**
|
|
51
44
|
* onEndEditing handler
|
|
52
45
|
*/
|
|
53
46
|
onEndEditing: PropTypes.func,
|
|
54
|
-
|
|
55
47
|
/**
|
|
56
48
|
* onScroll handler
|
|
57
49
|
*/
|
|
58
50
|
onScroll: PropTypes.func,
|
|
59
|
-
|
|
60
51
|
/**
|
|
61
52
|
* onSelectionChange handler
|
|
62
53
|
*/
|
|
63
54
|
onSelectionChange: PropTypes.func,
|
|
64
|
-
|
|
65
55
|
/**
|
|
66
56
|
* onKeyPress handler
|
|
67
57
|
*/
|
|
68
58
|
onKeyPress: PropTypes.func,
|
|
69
|
-
|
|
70
59
|
/**
|
|
71
60
|
* onKeyUp handler (only supported on Web)
|
|
72
61
|
*/
|
|
73
62
|
onKeyUp: PropTypes.func,
|
|
74
|
-
|
|
75
63
|
/**
|
|
76
64
|
* onKeyDown handler (only supported on Web)
|
|
77
65
|
*/
|
|
78
66
|
onMouseOver: PropTypes.func,
|
|
79
|
-
|
|
80
67
|
/**
|
|
81
68
|
* onKeyDown handler (only supported on Web)
|
|
82
69
|
*/
|
|
@@ -84,7 +71,6 @@ const textInputHandlerProps = {
|
|
|
84
71
|
}
|
|
85
72
|
};
|
|
86
73
|
const selectTextInputHandlers = getPropSelector(textInputHandlerProps.types);
|
|
87
|
-
|
|
88
74
|
textInputHandlerProps.select = props => {
|
|
89
75
|
// Support for onKeyPress/onKeyUp/onKeyDown is inconsistent between React Native and React Native Web
|
|
90
76
|
const {
|
|
@@ -93,7 +79,6 @@ textInputHandlerProps.select = props => {
|
|
|
93
79
|
onKeyDown,
|
|
94
80
|
...resolvedProps
|
|
95
81
|
} = selectTextInputHandlers(props);
|
|
96
|
-
|
|
97
82
|
if (onKeyPress || onKeyUp || onKeyDown) {
|
|
98
83
|
if (Platform.OS !== 'web') {
|
|
99
84
|
// React Native only supports onKeyPress. Call any key handlers supplied in expected order.
|
|
@@ -104,9 +89,9 @@ textInputHandlerProps.select = props => {
|
|
|
104
89
|
};
|
|
105
90
|
} else {
|
|
106
91
|
// React Native Web supports onKeyUp the normal way.
|
|
107
|
-
if (onKeyUp) resolvedProps.onKeyUp = onKeyUp;
|
|
92
|
+
if (onKeyUp) resolvedProps.onKeyUp = onKeyUp;
|
|
93
|
+
// React Native Web doesn't support the `onKeyDown` prop name, but maps a supplied onKeyPress handler
|
|
108
94
|
// to the onKeyDown event and calls it with a keydown event. Make React Native Web call either or both.
|
|
109
|
-
|
|
110
95
|
if (onKeyPress || onKeyDown) {
|
|
111
96
|
resolvedProps.onKeyPress = event => {
|
|
112
97
|
if (typeof onKeyDown === 'function') onKeyDown(event);
|
|
@@ -115,8 +100,6 @@ textInputHandlerProps.select = props => {
|
|
|
115
100
|
}
|
|
116
101
|
}
|
|
117
102
|
}
|
|
118
|
-
|
|
119
103
|
return resolvedProps;
|
|
120
104
|
};
|
|
121
|
-
|
|
122
105
|
export { focusHandlerProps, textInputHandlerProps };
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import PropTypes from 'prop-types';
|
|
1
|
+
import PropTypes from 'prop-types';
|
|
2
2
|
|
|
3
|
+
// Props related to HTML <a> anchor link attributes.
|
|
3
4
|
const targetValues = ['_self', '_blank', '_parent', '_top'];
|
|
4
5
|
export default {
|
|
5
6
|
types: {
|
|
@@ -9,7 +10,6 @@ export default {
|
|
|
9
10
|
rel: PropTypes.string,
|
|
10
11
|
target: PropTypes.oneOf(targetValues)
|
|
11
12
|
},
|
|
12
|
-
|
|
13
13
|
/**
|
|
14
14
|
* Takes a props object, bundles any hrefAttrs props present into one object
|
|
15
15
|
* and returns that keyed as `hrefAttrs` and non-hrefAttrs props keyed as `rest`
|
|
@@ -5,33 +5,27 @@ export default {
|
|
|
5
5
|
* Whether the English or French copy will be used (e.g. for accessibility labels).
|
|
6
6
|
*/
|
|
7
7
|
copy: PropTypes.oneOf(['en', 'fr']),
|
|
8
|
-
|
|
9
8
|
/**
|
|
10
9
|
* The input label.
|
|
11
10
|
*/
|
|
12
11
|
label: PropTypes.string,
|
|
13
|
-
|
|
14
12
|
/**
|
|
15
13
|
* A short description of the expected input.
|
|
16
14
|
*/
|
|
17
15
|
hint: PropTypes.string,
|
|
18
|
-
|
|
19
16
|
/**
|
|
20
17
|
* Position of the hint relative to label. Use `below` to display a larger hint below the label.
|
|
21
18
|
*/
|
|
22
19
|
hintPosition: PropTypes.oneOf(['inline', 'below']),
|
|
23
|
-
|
|
24
20
|
/**
|
|
25
21
|
* A detailed description of validation error/success or additional instructions.
|
|
26
22
|
* Visual variant is determined based on the `validation` prop.
|
|
27
23
|
*/
|
|
28
24
|
feedback: PropTypes.string,
|
|
29
|
-
|
|
30
25
|
/**
|
|
31
26
|
* Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
|
|
32
27
|
*/
|
|
33
28
|
tooltip: PropTypes.string,
|
|
34
|
-
|
|
35
29
|
/**
|
|
36
30
|
* Use to visually mark an input as valid or invalid.
|
|
37
31
|
*/
|
|
@@ -5,7 +5,8 @@ import { pressPropTypes } from './pressProps';
|
|
|
5
5
|
import a11yProps from './a11yProps';
|
|
6
6
|
import hrefAttrsProp from './hrefAttrsProp';
|
|
7
7
|
import getPropSelector from './getPropSelector';
|
|
8
|
-
const linkPropTypes = {
|
|
8
|
+
const linkPropTypes = {
|
|
9
|
+
...pressPropTypes,
|
|
9
10
|
href: PropTypes.string,
|
|
10
11
|
hrefAttrs: PropTypes.shape(hrefAttrsProp.types),
|
|
11
12
|
...a11yProps.types
|
|
@@ -15,12 +16,10 @@ export default {
|
|
|
15
16
|
* Proptypes for components that, on Web, can output <a href="..."> link elements
|
|
16
17
|
*/
|
|
17
18
|
types: linkPropTypes,
|
|
18
|
-
|
|
19
19
|
/**
|
|
20
20
|
* Filters a props object, returning only the platform-relevant link props defined above
|
|
21
21
|
*/
|
|
22
22
|
select: getPropSelector(linkPropTypes),
|
|
23
|
-
|
|
24
23
|
/**
|
|
25
24
|
* Turn hrefs into press handlers that open links on Native.
|
|
26
25
|
*
|
|
@@ -18,7 +18,8 @@ const pressHandlerPropTypes = {
|
|
|
18
18
|
}
|
|
19
19
|
})
|
|
20
20
|
};
|
|
21
|
-
export const pressPropTypes = {
|
|
21
|
+
export const pressPropTypes = {
|
|
22
|
+
...pressHandlerPropTypes,
|
|
22
23
|
disabled: PropTypes.bool,
|
|
23
24
|
...Platform.select({
|
|
24
25
|
web: {},
|
|
@@ -33,7 +34,6 @@ export default {
|
|
|
33
34
|
* Proptypes for clickable or pressable components, including web-only props
|
|
34
35
|
*/
|
|
35
36
|
types: pressPropTypes,
|
|
36
|
-
|
|
37
37
|
/**
|
|
38
38
|
* Filters a props object, returning only the platform-relevant press props defined above
|
|
39
39
|
*/
|