@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,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 _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
|
|
11
|
-
|
|
12
9
|
var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
|
|
13
|
-
|
|
14
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
15
|
-
|
|
16
11
|
var _ThemeProvider = require("../../ThemeProvider");
|
|
17
|
-
|
|
18
12
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
19
|
-
|
|
20
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
|
-
|
|
22
14
|
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); }
|
|
23
|
-
|
|
24
15
|
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; }
|
|
25
|
-
|
|
26
16
|
/**
|
|
27
17
|
* Identical to React Native's View and supporting all the same props, but with:
|
|
28
18
|
* - a zIndex: 'auto' style added to prevent unexpectedly causing children to overlap other elements from other stacking contexts
|
|
29
|
-
*/
|
|
30
|
-
const BaseView = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
19
|
+
*/const BaseView = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
31
20
|
let {
|
|
32
21
|
children,
|
|
33
22
|
style,
|
|
@@ -37,25 +26,22 @@ const BaseView = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
37
26
|
themeOptions
|
|
38
27
|
} = (0, _ThemeProvider.useTheme)();
|
|
39
28
|
const styleProp = Array.isArray(style) ? [...style] : [style];
|
|
40
|
-
|
|
41
29
|
if (!themeOptions.forceZIndex) {
|
|
42
30
|
styleProp.unshift(styles.resetZIndex);
|
|
43
31
|
}
|
|
44
|
-
|
|
45
|
-
|
|
32
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
|
|
33
|
+
...rest,
|
|
46
34
|
style: styleProp,
|
|
47
35
|
ref: ref,
|
|
48
36
|
children: children
|
|
49
37
|
});
|
|
50
38
|
});
|
|
51
39
|
BaseView.displayName = 'BaseView';
|
|
52
|
-
|
|
53
40
|
const styles = _StyleSheet.default.create({
|
|
54
41
|
resetZIndex: {
|
|
55
42
|
zIndex: 'auto'
|
|
56
43
|
}
|
|
57
44
|
});
|
|
58
|
-
|
|
59
45
|
BaseView.propTypes = {
|
|
60
46
|
children: _propTypes.default.node,
|
|
61
47
|
style: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.array])
|
|
@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
|
|
9
|
-
|
|
10
8
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
-
|
|
12
9
|
/**
|
|
13
10
|
* Android crashes on non-standard style properties like `zIndex` so adding a `BaseView` for native platforms
|
|
14
11
|
*/
|
|
@@ -4,10 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _BaseView = _interopRequireDefault(require("./BaseView"));
|
|
9
|
-
|
|
10
8
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
-
|
|
12
9
|
var _default = _BaseView.default;
|
|
13
10
|
exports.default = _default;
|
package/lib/utils/a11y/index.js
CHANGED
|
@@ -3,9 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
|
|
7
6
|
var _textSize = require("./textSize");
|
|
8
|
-
|
|
9
7
|
Object.keys(_textSize).forEach(function (key) {
|
|
10
8
|
if (key === "default" || key === "__esModule") return;
|
|
11
9
|
if (key in exports && exports[key] === _textSize[key]) return;
|
|
@@ -16,9 +14,7 @@ Object.keys(_textSize).forEach(function (key) {
|
|
|
16
14
|
}
|
|
17
15
|
});
|
|
18
16
|
});
|
|
19
|
-
|
|
20
17
|
var _semantics = require("./semantics");
|
|
21
|
-
|
|
22
18
|
Object.keys(_semantics).forEach(function (key) {
|
|
23
19
|
if (key === "default" || key === "__esModule") return;
|
|
24
20
|
if (key in exports && exports[key] === _semantics[key]) return;
|
|
@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.textTags = exports.tagsToRoles = exports.supportedTags = exports.layoutTags = exports.headingTags = exports.getHeadingLevel = exports.getA11yPropsFromHtmlTag = void 0;
|
|
7
|
-
|
|
8
7
|
var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
|
|
9
|
-
|
|
10
8
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
-
|
|
12
9
|
/**
|
|
13
10
|
* @typedef {import('react-native').AccessibilityRole} AccessibilityRole
|
|
14
11
|
*/
|
|
@@ -33,9 +30,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
33
30
|
*/
|
|
34
31
|
// Adding `/** @type {const} */ ({...})` denotes object content as `readonly` in many IDEs
|
|
35
32
|
// eslint-disable-next-line prettier/prettier
|
|
36
|
-
const rolesToTags =
|
|
37
|
-
/** @type {const} */
|
|
38
|
-
{
|
|
33
|
+
const rolesToTags = /** @type {const} */{
|
|
39
34
|
article: 'article',
|
|
40
35
|
banner: 'header',
|
|
41
36
|
blockquote: 'blockquote',
|
|
@@ -54,24 +49,23 @@ const rolesToTags =
|
|
|
54
49
|
region: 'section',
|
|
55
50
|
strong: 'strong',
|
|
56
51
|
// Add special cases that are in RNW's function logic but not in its mapping object
|
|
57
|
-
label: 'label'
|
|
58
|
-
|
|
59
|
-
};
|
|
52
|
+
label: 'label'
|
|
53
|
+
// eslint-disable-next-line prettier/prettier
|
|
54
|
+
};
|
|
60
55
|
|
|
56
|
+
// Invert React Native Web's mapping, so a tag gets the role that gets that tag
|
|
61
57
|
const tagsToRoles = Object.fromEntries(Object.entries(rolesToTags).map(_ref => {
|
|
62
58
|
let [key, value] = _ref;
|
|
63
59
|
return [value, key];
|
|
64
60
|
}));
|
|
61
|
+
|
|
65
62
|
/**
|
|
66
63
|
* Heading HTML tags map to the "heading" accessibilityRole in native apps, which is similar
|
|
67
64
|
* to headings on web but without the expectation of a hierarchy of headings within one screen.
|
|
68
65
|
*/
|
|
69
66
|
// eslint-disable-next-line prettier/prettier
|
|
70
|
-
|
|
71
67
|
exports.tagsToRoles = tagsToRoles;
|
|
72
|
-
const headingTags =
|
|
73
|
-
/** @type {const} */
|
|
74
|
-
['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
|
|
68
|
+
const headingTags = /** @type {const} */['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
|
|
75
69
|
/**
|
|
76
70
|
* @typedef {typeof headingTags[number]} HeadingTag
|
|
77
71
|
*/
|
|
@@ -82,7 +76,6 @@ const headingTags =
|
|
|
82
76
|
*
|
|
83
77
|
* Of these, only headers (h1, h2, ...h5, h6) set a corresponding accessibilityRole in native apps ("heading").
|
|
84
78
|
*/
|
|
85
|
-
|
|
86
79
|
exports.headingTags = headingTags;
|
|
87
80
|
const supportedTags = [...Object.keys(tagsToRoles), ...headingTags];
|
|
88
81
|
/**
|
|
@@ -97,11 +90,9 @@ const supportedTags = [...Object.keys(tagsToRoles), ...headingTags];
|
|
|
97
90
|
* Of these, only headers (h1, h2, ...h5, h6) set a corresponding accessibilityRole in native apps ("heading").
|
|
98
91
|
*/
|
|
99
92
|
// eslint-disable-next-line prettier/prettier
|
|
100
|
-
|
|
101
93
|
exports.supportedTags = supportedTags;
|
|
102
|
-
const layoutTags =
|
|
103
|
-
|
|
104
|
-
[...headingTags, 'article', 'aside', 'blockquote', 'footer', 'figure', 'form', 'header', 'ul', 'li', 'main', 'nav', 'section', 'label' // eslint-disable-next-line prettier/prettier
|
|
94
|
+
const layoutTags = /** @type {const} */[...headingTags, 'article', 'aside', 'blockquote', 'footer', 'figure', 'form', 'header', 'ul', 'li', 'main', 'nav', 'section', 'label'
|
|
95
|
+
// eslint-disable-next-line prettier/prettier
|
|
105
96
|
];
|
|
106
97
|
/**
|
|
107
98
|
* @typedef {typeof layoutTags[number]} LayoutTag
|
|
@@ -113,11 +104,9 @@ const layoutTags =
|
|
|
113
104
|
* Of these, only headers (h1, h2, ...h5, h6) set a corresponding accessibilityRole in native apps ("heading").
|
|
114
105
|
*/
|
|
115
106
|
// eslint-disable-next-line prettier/prettier
|
|
116
|
-
|
|
117
107
|
exports.layoutTags = layoutTags;
|
|
118
|
-
const textTags =
|
|
119
|
-
|
|
120
|
-
[...headingTags, 'blockquote', 'code', 'del', 'em', 'ins', 'li', 'strong', 'label' // eslint-disable-next-line prettier/prettier
|
|
108
|
+
const textTags = /** @type {const} */[...headingTags, 'blockquote', 'code', 'del', 'em', 'ins', 'li', 'strong', 'label'
|
|
109
|
+
// eslint-disable-next-line prettier/prettier
|
|
121
110
|
];
|
|
122
111
|
/**
|
|
123
112
|
* @typedef {typeof layoutTags[number]} TextTag
|
|
@@ -130,10 +119,9 @@ const textTags =
|
|
|
130
119
|
* @param {string} [tag] - HTML tag string; returns undefined if not a {@link HeadingTag}
|
|
131
120
|
* @returns {'1' | '2' | '3' | '4' | '5' | '6' | undefined}
|
|
132
121
|
*/
|
|
133
|
-
|
|
134
122
|
exports.textTags = textTags;
|
|
135
|
-
|
|
136
123
|
const getHeadingLevel = tag => headingTags.includes(tag) ? Number(tag[1]) : undefined;
|
|
124
|
+
|
|
137
125
|
/**
|
|
138
126
|
* Takes a supported HTML tag, and returns the accessibility props that, on web, make React Native Web
|
|
139
127
|
* render that tag.
|
|
@@ -146,16 +134,12 @@ const getHeadingLevel = tag => headingTags.includes(tag) ? Number(tag[1]) : unde
|
|
|
146
134
|
* @param {AccessibilityRole | null} [nativeRole] - optional accessibilityRole for native apps
|
|
147
135
|
* @returns {{ accessibilityRole: string, accessibilityLevel?: string } | undefined}
|
|
148
136
|
*/
|
|
149
|
-
|
|
150
|
-
|
|
151
137
|
exports.getHeadingLevel = getHeadingLevel;
|
|
152
|
-
|
|
153
138
|
const getA11yPropsFromHtmlTag = (tag, nativeRole) => {
|
|
154
139
|
// Allow cross-platform apps to set accessibilityRoles alongside a web tag without conflict
|
|
155
140
|
if (nativeRole !== undefined && _Platform.default.OS !== 'web') return {
|
|
156
141
|
accessibilityRole: nativeRole
|
|
157
142
|
};
|
|
158
|
-
|
|
159
143
|
if (tag) {
|
|
160
144
|
// aria roles don't have native counterparts and RN may throw an error if an unrecognised role is passed
|
|
161
145
|
const ariaRole = _Platform.default.OS === 'web' && tagsToRoles[tag];
|
|
@@ -167,11 +151,9 @@ const getA11yPropsFromHtmlTag = (tag, nativeRole) => {
|
|
|
167
151
|
accessibilityRole: 'header',
|
|
168
152
|
accessibilityLevel
|
|
169
153
|
};
|
|
170
|
-
}
|
|
154
|
+
}
|
|
155
|
+
// If nothing matches or no tag supplied, return undefined and let component decide how to fall back.
|
|
171
156
|
// Note that return value may always be spread in objects (it is safe to spread undefined like { ...undefined })
|
|
172
|
-
|
|
173
|
-
|
|
174
157
|
return undefined;
|
|
175
158
|
};
|
|
176
|
-
|
|
177
159
|
exports.getA11yPropsFromHtmlTag = getA11yPropsFromHtmlTag;
|
|
@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.scaleWithText = exports.getMaxFontMultiplier = void 0;
|
|
7
|
-
|
|
8
7
|
var _PixelRatio = _interopRequireDefault(require("react-native-web/dist/cjs/exports/PixelRatio"));
|
|
9
|
-
|
|
10
8
|
var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
|
|
11
|
-
|
|
12
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
-
|
|
14
10
|
/**
|
|
15
11
|
* When a user increases text size using device accessibility settings, some elements
|
|
16
12
|
* should also scale, such as icons alongside text and space between paragraphs.
|
|
@@ -24,6 +20,7 @@ const scaleWithText = function (value) {
|
|
|
24
20
|
const scale = Math.min(_PixelRatio.default.getFontScale(), maxScale) || 1;
|
|
25
21
|
return value * scale;
|
|
26
22
|
};
|
|
23
|
+
|
|
27
24
|
/**
|
|
28
25
|
* Native only, returns `undefined` on Web.
|
|
29
26
|
*
|
|
@@ -34,10 +31,7 @@ const scaleWithText = function (value) {
|
|
|
34
31
|
* The return value of this function can be used as a React Native `Text` element's
|
|
35
32
|
* `maxFontSizeMultiplier` prop value.
|
|
36
33
|
*/
|
|
37
|
-
|
|
38
|
-
|
|
39
34
|
exports.scaleWithText = scaleWithText;
|
|
40
|
-
|
|
41
35
|
const getMaxFontMultiplier = _ref => {
|
|
42
36
|
let {
|
|
43
37
|
fontSize,
|
|
@@ -47,5 +41,4 @@ const getMaxFontMultiplier = _ref => {
|
|
|
47
41
|
if (fontScaleCap <= fontSize) return 1;
|
|
48
42
|
return fontScaleCap / fontSize;
|
|
49
43
|
};
|
|
50
|
-
|
|
51
44
|
exports.getMaxFontMultiplier = getMaxFontMultiplier;
|
|
@@ -9,7 +9,5 @@ Object.defineProperty(exports, "useVerticalExpandAnimation", {
|
|
|
9
9
|
return _useVerticalExpandAnimation.default;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
|
-
|
|
13
12
|
var _useVerticalExpandAnimation = _interopRequireDefault(require("./useVerticalExpandAnimation"));
|
|
14
|
-
|
|
15
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -4,19 +4,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = require("react");
|
|
9
|
-
|
|
10
8
|
var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Animated"));
|
|
11
|
-
|
|
12
9
|
var _Easing = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Easing"));
|
|
13
|
-
|
|
14
10
|
var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
|
|
15
|
-
|
|
16
11
|
var _useSafeLayoutEffect = _interopRequireDefault(require("../useSafeLayoutEffect"));
|
|
17
|
-
|
|
18
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
-
|
|
20
13
|
// TODO: systematise animations
|
|
21
14
|
// https://github.com/telus/universal-design-system/issues/487
|
|
22
15
|
function useVerticalExpandAnimation(_ref) {
|
|
@@ -42,31 +35,27 @@ function useVerticalExpandAnimation(_ref) {
|
|
|
42
35
|
}, [expandStateChanged, isExpanded]);
|
|
43
36
|
(0, _react.useEffect)(() => {
|
|
44
37
|
const onComplete = () => setIsAnimating(false);
|
|
45
|
-
|
|
46
38
|
if (_Platform.default.OS === 'web') {
|
|
47
|
-
if (!elementRef.current) return () => {};
|
|
48
|
-
// https://github.com/necolas/react-native-web/pull/1713
|
|
39
|
+
if (!elementRef.current) return () => {};
|
|
49
40
|
|
|
41
|
+
// React Native Web does not pass `onTransitionEnd` through, must attach manually.
|
|
42
|
+
// https://github.com/necolas/react-native-web/pull/1713
|
|
50
43
|
const element = elementRef.current;
|
|
51
44
|
element.addEventListener('transitionend', onComplete);
|
|
52
45
|
return () => element.removeEventListener('transitionend', onComplete);
|
|
53
46
|
}
|
|
54
|
-
|
|
55
47
|
const animationConfig = {
|
|
56
48
|
duration: isExpanded ? expandDuration : collapseDuration,
|
|
57
49
|
easing: _Easing.default.inOut(_Easing.default.ease),
|
|
58
50
|
toValue: isExpanded ? containerHeight : 0,
|
|
59
51
|
useNativeDriver: false
|
|
60
52
|
};
|
|
61
|
-
|
|
62
53
|
const animation = _Animated.default.timing(expandAnimatedValue, animationConfig);
|
|
63
|
-
|
|
64
54
|
animation.start(onComplete);
|
|
65
55
|
return () => animation.stop();
|
|
66
56
|
}, [isExpanded, expandAnimatedValue, containerHeight, expandDuration, collapseDuration]);
|
|
67
57
|
const containerStyles = {};
|
|
68
58
|
if (isAnimating || expandStateChanged) containerStyles.overflow = 'hidden';
|
|
69
|
-
|
|
70
59
|
if (!isExpanded && !isAnimating && !expandStateChanged) {
|
|
71
60
|
if (_Platform.default.OS === 'web') {
|
|
72
61
|
// Without `visibility: 'hidden', descendents are focusable on web even when collapsed.
|
|
@@ -76,9 +65,9 @@ function useVerticalExpandAnimation(_ref) {
|
|
|
76
65
|
// Without some form of hiding, some children leak through even when closed e.g. `List.Item` bullets.
|
|
77
66
|
containerStyles.opacity = 0;
|
|
78
67
|
}
|
|
79
|
-
}
|
|
80
|
-
|
|
68
|
+
}
|
|
81
69
|
|
|
70
|
+
// don't visually collapse the container until we have it measured
|
|
82
71
|
if (containerHeight === null) {
|
|
83
72
|
if (_Platform.default.OS === 'web') {
|
|
84
73
|
// on web we can hide the contents until we have the container measured and avoid occasional jitter
|
|
@@ -98,9 +87,7 @@ function useVerticalExpandAnimation(_ref) {
|
|
|
98
87
|
} else {
|
|
99
88
|
containerStyles.height = expandAnimatedValue;
|
|
100
89
|
}
|
|
101
|
-
|
|
102
90
|
return [containerStyles, elementRef];
|
|
103
91
|
}
|
|
104
|
-
|
|
105
92
|
var _default = useVerticalExpandAnimation;
|
|
106
93
|
exports.default = _default;
|
package/lib/utils/children.js
CHANGED
|
@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.wrapStringsInText = exports.unpackFragment = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
|
|
10
8
|
var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
|
|
11
|
-
|
|
12
9
|
var _A11yText = _interopRequireDefault(require("../A11yText"));
|
|
13
|
-
|
|
14
10
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
15
|
-
|
|
16
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
|
-
|
|
18
12
|
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); }
|
|
19
|
-
|
|
20
13
|
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; }
|
|
21
|
-
|
|
22
14
|
/**
|
|
23
15
|
* Unpacks top-level fragments, so that common compositional patterns such as the following examples
|
|
24
16
|
* can be iterated as flat siblings (as if they were `<Child1 /><Child2 /><Child3 />`):
|
|
@@ -53,33 +45,29 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
53
45
|
*/
|
|
54
46
|
const unpackFragment = child => {
|
|
55
47
|
var _child$props;
|
|
56
|
-
|
|
57
48
|
// If this level is a set of top-level siblings rather than one child, check each in turn
|
|
58
|
-
if (_react.Children.count(child) > 1) return _react.Children.map(child, unpackFragment);
|
|
49
|
+
if (_react.Children.count(child) > 1) return _react.Children.map(child, unpackFragment);
|
|
59
50
|
|
|
60
|
-
|
|
51
|
+
// When a fragment is found, unpack its children to the top level and check them
|
|
52
|
+
if ((child === null || child === void 0 ? void 0 : child.type) === _react.Fragment) return unpackFragment((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children);
|
|
61
53
|
|
|
54
|
+
// Stop unpacking as soon as any non-fragment child is found
|
|
62
55
|
return child;
|
|
63
56
|
};
|
|
64
|
-
|
|
65
57
|
exports.unpackFragment = unpackFragment;
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
58
|
+
const isStringOrNumber = child => typeof child === 'string' || typeof child === 'number';
|
|
59
|
+
// Wrap an A11yText with neighouring text strings so it doesn't split them into multiple <Text>s
|
|
70
60
|
const isWrapable = child => {
|
|
71
61
|
var _child$type;
|
|
72
|
-
|
|
73
62
|
return isStringOrNumber(child) || child.type === _A11yText.default || ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.name) === 'FootnoteLink';
|
|
74
63
|
};
|
|
64
|
+
const combineKeys = childrenArray => childrenArray.reduce((newKey, child) => `${newKey}${child.key || ''}`, '');
|
|
75
65
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
66
|
+
// Group wrappable children for one `<Text>` parent, merging adjacent text nodes
|
|
79
67
|
const wrapChild = (child, wrappedText) => {
|
|
80
|
-
const lastIndex = wrappedText.length - 1;
|
|
68
|
+
const lastIndex = wrappedText.length - 1;
|
|
69
|
+
// If possible, simplify content by combining text nodes into one string.
|
|
81
70
|
// jest-native's `.toHaveTextContent` is buggy about array of text nodes in <Text> elements.
|
|
82
|
-
|
|
83
71
|
if (lastIndex >= 0 && isStringOrNumber(child) && isStringOrNumber(wrappedText[lastIndex])) {
|
|
84
72
|
/* eslint-disable-next-line no-param-reassign */
|
|
85
73
|
wrappedText[lastIndex] = `${wrappedText[lastIndex]}${child}`;
|
|
@@ -87,6 +75,7 @@ const wrapChild = (child, wrappedText) => {
|
|
|
87
75
|
wrappedText.push(child);
|
|
88
76
|
}
|
|
89
77
|
};
|
|
78
|
+
|
|
90
79
|
/**
|
|
91
80
|
* React Native on Native crashes if text content is rendered outside `<Text>`, and on web,
|
|
92
81
|
* text style inheritance behaves differently with text compared to regular HTML.
|
|
@@ -102,13 +91,12 @@ const wrapChild = (child, wrappedText) => {
|
|
|
102
91
|
* @param {TextProps} props
|
|
103
92
|
* @returns {ReactChildren}
|
|
104
93
|
*/
|
|
105
|
-
|
|
106
|
-
|
|
107
94
|
const wrapStringsInText = function (children) {
|
|
108
95
|
let textProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
|
109
|
-
const childrenArray = unpackFragment(_react.Children.toArray(children));
|
|
110
|
-
// as possible, e.g. give <X>Text {someString}</X> one Text, same as <X>{`Text ${someString}`}</X>
|
|
96
|
+
const childrenArray = unpackFragment(_react.Children.toArray(children));
|
|
111
97
|
|
|
98
|
+
// Group adjacent wrapable children together in one Text element to create as few Text elements
|
|
99
|
+
// as possible, e.g. give <X>Text {someString}</X> one Text, same as <X>{`Text ${someString}`}</X>
|
|
112
100
|
const wrapables = [[]];
|
|
113
101
|
let wrapablesIndex = 0;
|
|
114
102
|
childrenArray.forEach(child => {
|
|
@@ -129,11 +117,11 @@ const wrapStringsInText = function (children) {
|
|
|
129
117
|
// Wrap text nodes and their wrappable neighbours in Text with as stable a key as possible.
|
|
130
118
|
// Avoid one-item arrays because jest-native's `.toHaveTextContent` is buggy
|
|
131
119
|
// and sometimes fails to match text content in arrays.
|
|
132
|
-
(0, _jsxRuntime.jsx)(_Text.default, {
|
|
120
|
+
(0, _jsxRuntime.jsx)(_Text.default, {
|
|
121
|
+
...textProps,
|
|
133
122
|
children: group.length === 1 ? group[0] : group
|
|
134
123
|
}, combineKeys(group) || index) : group];
|
|
135
124
|
}, []);
|
|
136
125
|
return items.length === 1 ? items[0] : items;
|
|
137
126
|
};
|
|
138
|
-
|
|
139
127
|
exports.wrapStringsInText = wrapStringsInText;
|
|
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
// Returns true if there are no duplicate values of the fields listed
|
|
9
8
|
// in the `fields` array across the objects in the `items` array, false
|
|
10
9
|
// otherwise.
|
|
@@ -16,19 +15,17 @@ const containUniqueFields = (items, fields) => {
|
|
|
16
15
|
if (!map[field]) {
|
|
17
16
|
map[field] = [];
|
|
18
17
|
}
|
|
19
|
-
|
|
20
18
|
if (!item[field]) {
|
|
21
19
|
// We exclude empty values from comparison
|
|
22
20
|
return false;
|
|
23
|
-
}
|
|
24
|
-
|
|
21
|
+
}
|
|
25
22
|
|
|
23
|
+
// Duplicate found!
|
|
26
24
|
if (map[field][item[field]]) return true;
|
|
27
25
|
map[field][item[field]] = true;
|
|
28
26
|
return false;
|
|
29
27
|
}));
|
|
30
28
|
return !itemsHaveDuplicateFields;
|
|
31
29
|
};
|
|
32
|
-
|
|
33
30
|
var _default = containUniqueFields;
|
|
34
31
|
exports.default = _default;
|
package/lib/utils/htmlAttrs.js
CHANGED
|
@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
-
|
|
10
8
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
-
|
|
12
9
|
const htmlAttrTypes = {
|
|
13
10
|
dataSet: _propTypes.default.object,
|
|
14
11
|
id: _propTypes.default.string,
|
|
@@ -25,7 +22,8 @@ var _default = {
|
|
|
25
22
|
types: htmlAttrTypes,
|
|
26
23
|
select: props => Object.entries(props).reduce((items, _ref) => {
|
|
27
24
|
let [key, value] = _ref;
|
|
28
|
-
return Object.keys(htmlAttrTypes).includes(key) || /^(data|aria)-/.test(key) ? {
|
|
25
|
+
return Object.keys(htmlAttrTypes).includes(key) || /^(data|aria)-/.test(key) ? {
|
|
26
|
+
...items,
|
|
29
27
|
[key]: value
|
|
30
28
|
} : items;
|
|
31
29
|
}, {})
|
package/lib/utils/index.js
CHANGED
|
@@ -96,9 +96,7 @@ Object.defineProperty(exports, "withLinkRouter", {
|
|
|
96
96
|
return _withLinkRouter.default;
|
|
97
97
|
}
|
|
98
98
|
});
|
|
99
|
-
|
|
100
99
|
var _a11y = require("./a11y");
|
|
101
|
-
|
|
102
100
|
Object.keys(_a11y).forEach(function (key) {
|
|
103
101
|
if (key === "default" || key === "__esModule") return;
|
|
104
102
|
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
@@ -110,9 +108,7 @@ Object.keys(_a11y).forEach(function (key) {
|
|
|
110
108
|
}
|
|
111
109
|
});
|
|
112
110
|
});
|
|
113
|
-
|
|
114
111
|
var _animation = require("./animation");
|
|
115
|
-
|
|
116
112
|
Object.keys(_animation).forEach(function (key) {
|
|
117
113
|
if (key === "default" || key === "__esModule") return;
|
|
118
114
|
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
@@ -124,9 +120,7 @@ Object.keys(_animation).forEach(function (key) {
|
|
|
124
120
|
}
|
|
125
121
|
});
|
|
126
122
|
});
|
|
127
|
-
|
|
128
123
|
var _children = require("./children");
|
|
129
|
-
|
|
130
124
|
Object.keys(_children).forEach(function (key) {
|
|
131
125
|
if (key === "default" || key === "__esModule") return;
|
|
132
126
|
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
@@ -138,9 +132,7 @@ Object.keys(_children).forEach(function (key) {
|
|
|
138
132
|
}
|
|
139
133
|
});
|
|
140
134
|
});
|
|
141
|
-
|
|
142
135
|
var _input = require("./input");
|
|
143
|
-
|
|
144
136
|
Object.keys(_input).forEach(function (key) {
|
|
145
137
|
if (key === "default" || key === "__esModule") return;
|
|
146
138
|
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
@@ -152,9 +144,7 @@ Object.keys(_input).forEach(function (key) {
|
|
|
152
144
|
}
|
|
153
145
|
});
|
|
154
146
|
});
|
|
155
|
-
|
|
156
147
|
var _pressability = require("./pressability");
|
|
157
|
-
|
|
158
148
|
Object.keys(_pressability).forEach(function (key) {
|
|
159
149
|
if (key === "default" || key === "__esModule") return;
|
|
160
150
|
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
@@ -166,9 +156,7 @@ Object.keys(_pressability).forEach(function (key) {
|
|
|
166
156
|
}
|
|
167
157
|
});
|
|
168
158
|
});
|
|
169
|
-
|
|
170
159
|
var _props = require("./props");
|
|
171
|
-
|
|
172
160
|
Object.keys(_props).forEach(function (key) {
|
|
173
161
|
if (key === "default" || key === "__esModule") return;
|
|
174
162
|
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
@@ -180,17 +168,11 @@ Object.keys(_props).forEach(function (key) {
|
|
|
180
168
|
}
|
|
181
169
|
});
|
|
182
170
|
});
|
|
183
|
-
|
|
184
171
|
var _info = _interopRequireDefault(require("./info"));
|
|
185
|
-
|
|
186
172
|
var _useCopy = _interopRequireDefault(require("./useCopy"));
|
|
187
|
-
|
|
188
173
|
var _useHash = _interopRequireDefault(require("./useHash"));
|
|
189
|
-
|
|
190
174
|
var _useSpacingScale = _interopRequireDefault(require("./useSpacingScale"));
|
|
191
|
-
|
|
192
175
|
var _useResponsiveProp = _interopRequireWildcard(require("./useResponsiveProp"));
|
|
193
|
-
|
|
194
176
|
Object.keys(_useResponsiveProp).forEach(function (key) {
|
|
195
177
|
if (key === "default" || key === "__esModule") return;
|
|
196
178
|
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
@@ -202,19 +184,12 @@ Object.keys(_useResponsiveProp).forEach(function (key) {
|
|
|
202
184
|
}
|
|
203
185
|
});
|
|
204
186
|
});
|
|
205
|
-
|
|
206
187
|
var _useOverlaidPosition = _interopRequireDefault(require("./useOverlaidPosition"));
|
|
207
|
-
|
|
208
188
|
var _useSafeLayoutEffect = _interopRequireDefault(require("./useSafeLayoutEffect"));
|
|
209
|
-
|
|
210
189
|
var _useScrollBlocking = _interopRequireDefault(require("./useScrollBlocking"));
|
|
211
|
-
|
|
212
190
|
var _useUniqueId = _interopRequireDefault(require("./useUniqueId"));
|
|
213
|
-
|
|
214
191
|
var _withLinkRouter = _interopRequireDefault(require("./withLinkRouter"));
|
|
215
|
-
|
|
216
192
|
var _ssr = require("./ssr");
|
|
217
|
-
|
|
218
193
|
Object.keys(_ssr).forEach(function (key) {
|
|
219
194
|
if (key === "default" || key === "__esModule") return;
|
|
220
195
|
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
@@ -226,15 +201,9 @@ Object.keys(_ssr).forEach(function (key) {
|
|
|
226
201
|
}
|
|
227
202
|
});
|
|
228
203
|
});
|
|
229
|
-
|
|
230
204
|
var _containUniqueFields = _interopRequireDefault(require("./containUniqueFields"));
|
|
231
|
-
|
|
232
205
|
var _BaseView = _interopRequireDefault(require("./BaseView"));
|
|
233
|
-
|
|
234
206
|
var _htmlAttrs = _interopRequireDefault(require("./htmlAttrs"));
|
|
235
|
-
|
|
236
207
|
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); }
|
|
237
|
-
|
|
238
208
|
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; }
|
|
239
|
-
|
|
240
209
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|