@telus-uds/components-base 1.65.0 → 1.67.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +22 -2
- package/lib/A11yInfoProvider/index.js +5 -20
- package/lib/A11yText/index.js +3 -17
- package/lib/ActivityIndicator/Spinner.js +2 -9
- package/lib/ActivityIndicator/Spinner.native.js +4 -27
- package/lib/ActivityIndicator/index.js +1 -13
- package/lib/ActivityIndicator/shared.js +0 -3
- package/lib/Autocomplete/Autocomplete.js +34 -85
- package/lib/Autocomplete/Loading.js +0 -10
- package/lib/Autocomplete/Suggestions.js +0 -11
- package/lib/Autocomplete/index.js +0 -3
- package/lib/BaseProvider/HydrationContext.js +4 -18
- package/lib/BaseProvider/index.js +0 -12
- package/lib/Box/Box.js +10 -35
- package/lib/Box/index.js +0 -3
- package/lib/Button/Button.js +4 -13
- package/lib/Button/ButtonBase.js +23 -55
- package/lib/Button/ButtonDropdown.js +7 -32
- package/lib/Button/ButtonGroup.js +15 -48
- package/lib/Button/ButtonLink.js +3 -17
- package/lib/Button/index.js +0 -5
- package/lib/Button/propTypes.js +0 -15
- package/lib/Card/Card.js +3 -14
- package/lib/Card/CardBase.js +5 -16
- package/lib/Card/PressableCardBase.js +7 -30
- package/lib/Card/index.js +0 -7
- package/lib/Carousel/Carousel.js +22 -115
- package/lib/Carousel/CarouselContext.js +0 -14
- package/lib/Carousel/CarouselFirstFocus/CarouselFirstFocus.js +6 -18
- package/lib/Carousel/CarouselItem/CarouselItem.js +5 -20
- package/lib/Carousel/CarouselItem/index.js +0 -3
- package/lib/Carousel/CarouselStepTracker/CarouselStepTracker.js +0 -9
- package/lib/Carousel/CarouselStepTracker/index.js +0 -3
- package/lib/Carousel/CarouselTabs/CarouselTabs.js +5 -15
- package/lib/Carousel/CarouselTabs/CarouselTabsPanel.js +7 -16
- package/lib/Carousel/CarouselTabs/CarouselTabsPanelItem.js +2 -22
- package/lib/Carousel/CarouselTabs/index.js +0 -3
- package/lib/Carousel/CarouselThumbnail.js +1 -16
- package/lib/Carousel/CarouselThumbnailNavigation.js +0 -15
- package/lib/Carousel/index.js +0 -5
- package/lib/Checkbox/Checkbox.js +5 -44
- package/lib/Checkbox/CheckboxButton.js +7 -33
- package/lib/Checkbox/CheckboxGroup.js +5 -37
- package/lib/Checkbox/CheckboxInput.js +1 -11
- package/lib/Checkbox/CheckboxInput.native.js +0 -2
- package/lib/Checkbox/index.js +0 -4
- package/lib/CheckboxCard/CheckboxCard.js +4 -37
- package/lib/CheckboxCard/index.js +0 -3
- package/lib/CheckboxCardGroup/CheckboxCardGroup.js +215 -0
- package/lib/CheckboxCardGroup/index.js +10 -0
- package/lib/Divider/Divider.js +13 -24
- package/lib/Divider/index.js +0 -3
- package/lib/ExpandCollapse/Accordion.js +1 -9
- package/lib/ExpandCollapse/Control.js +10 -32
- package/lib/ExpandCollapse/ExpandCollapse.js +3 -19
- package/lib/ExpandCollapse/Panel.js +13 -38
- package/lib/ExpandCollapse/index.js +0 -5
- package/lib/Feedback/Feedback.js +13 -30
- package/lib/Feedback/index.js +0 -3
- package/lib/Fieldset/Fieldset.js +6 -37
- package/lib/Fieldset/FieldsetContainer.js +1 -10
- package/lib/Fieldset/FieldsetContainer.native.js +0 -8
- package/lib/Fieldset/Legend.js +1 -10
- package/lib/Fieldset/Legend.native.js +1 -13
- package/lib/Fieldset/index.js +0 -3
- package/lib/FlexGrid/Col/Col.js +10 -53
- package/lib/FlexGrid/Col/index.js +0 -3
- package/lib/FlexGrid/FlexGrid.js +3 -34
- package/lib/FlexGrid/Row/Row.js +0 -38
- package/lib/FlexGrid/Row/index.js +0 -3
- package/lib/FlexGrid/helpers/index.js +0 -4
- package/lib/FlexGrid/index.js +0 -3
- package/lib/FlexGrid/providers/GutterContext.js +0 -4
- package/lib/HorizontalScroll/HorizontalScroll.js +17 -45
- package/lib/HorizontalScroll/HorizontalScrollButton.js +1 -17
- package/lib/HorizontalScroll/ScrollViewEnd.js +5 -13
- package/lib/HorizontalScroll/ScrollViewEnd.native.js +1 -10
- package/lib/HorizontalScroll/index.js +0 -7
- package/lib/HorizontalScroll/itemPositions.js +8 -19
- package/lib/Icon/Icon.js +4 -17
- package/lib/Icon/IconText.js +5 -25
- package/lib/Icon/index.js +0 -6
- package/lib/IconButton/IconButton.js +5 -37
- package/lib/IconButton/index.js +0 -3
- package/lib/InputLabel/InputLabel.js +4 -28
- package/lib/InputLabel/LabelContent.js +2 -8
- package/lib/InputLabel/LabelContent.native.js +0 -8
- package/lib/InputLabel/index.js +0 -3
- package/lib/InputSupports/InputSupports.js +0 -21
- package/lib/InputSupports/index.js +0 -3
- package/lib/InputSupports/useInputSupports.js +2 -6
- package/lib/Link/ChevronLink.js +7 -18
- package/lib/Link/InlinePressable.js +0 -10
- package/lib/Link/InlinePressable.native.js +5 -18
- package/lib/Link/Link.js +0 -8
- package/lib/Link/LinkBase.js +17 -47
- package/lib/Link/TextButton.js +3 -16
- package/lib/Link/index.js +0 -5
- package/lib/List/List.js +5 -21
- package/lib/List/ListItem.js +1 -11
- package/lib/List/ListItemBase.js +5 -34
- package/lib/List/ListItemContent.js +1 -14
- package/lib/List/ListItemMark.js +3 -23
- package/lib/List/PressableListItemBase.js +2 -28
- package/lib/List/index.js +0 -4
- package/lib/Listbox/GroupControl.js +0 -14
- package/lib/Listbox/Listbox.js +15 -40
- package/lib/Listbox/ListboxContext.js +0 -7
- package/lib/Listbox/ListboxGroup.js +7 -19
- package/lib/Listbox/ListboxItem.js +3 -17
- package/lib/Listbox/ListboxOverlay.js +4 -20
- package/lib/Listbox/PressableItem.js +3 -18
- package/lib/Listbox/index.js +0 -3
- package/lib/Modal/Modal.js +94 -45
- package/lib/Modal/ModalContent.js +184 -0
- package/lib/Modal/index.js +0 -3
- package/lib/MultiSelectFilter/ModalOverlay.js +1 -20
- package/lib/MultiSelectFilter/MultiSelectFilter.js +20 -69
- package/lib/MultiSelectFilter/index.js +0 -3
- package/lib/Notification/Notification.js +11 -38
- package/lib/Notification/index.js +0 -3
- package/lib/Pagination/PageButton.js +2 -22
- package/lib/Pagination/Pagination.js +21 -42
- package/lib/Pagination/SideButton.js +0 -24
- package/lib/Pagination/index.js +0 -3
- package/lib/Pagination/usePagination.js +4 -9
- package/lib/Progress/Progress.js +3 -17
- package/lib/Progress/ProgressBar.js +3 -25
- package/lib/Progress/ProgressBarBackground.js +0 -12
- package/lib/Progress/index.js +0 -4
- package/lib/QuickLinks/QuickLinks.js +1 -18
- package/lib/QuickLinks/QuickLinksCard.js +1 -11
- package/lib/QuickLinks/QuickLinksItem.js +3 -17
- package/lib/QuickLinks/index.js +0 -4
- package/lib/QuickLinksFeature/QuickLinksFeature.js +3 -20
- package/lib/QuickLinksFeature/QuickLinksFeatureItem.js +7 -30
- package/lib/QuickLinksFeature/index.js +0 -4
- package/lib/Radio/Radio.js +5 -39
- package/lib/Radio/RadioButton.js +7 -26
- package/lib/Radio/RadioGroup.js +6 -39
- package/lib/Radio/RadioInput.js +1 -11
- package/lib/Radio/RadioInput.native.js +0 -2
- package/lib/Radio/index.js +0 -4
- package/lib/RadioCard/RadioCard.js +5 -38
- package/lib/RadioCard/RadioCardGroup.js +7 -38
- package/lib/RadioCard/index.js +0 -4
- package/lib/Responsive/Responsive.js +1 -14
- package/lib/Responsive/index.js +0 -3
- package/lib/Search/Search.js +22 -45
- package/lib/Search/index.js +0 -3
- package/lib/Select/Group.js +0 -8
- package/lib/Select/Group.native.js +0 -6
- package/lib/Select/Item.js +0 -7
- package/lib/Select/Item.native.js +0 -2
- package/lib/Select/Picker.js +0 -8
- package/lib/Select/Picker.native.js +6 -22
- package/lib/Select/Select.js +9 -52
- package/lib/Select/index.js +0 -5
- package/lib/SideNav/Item.js +5 -29
- package/lib/SideNav/ItemContent.js +1 -14
- package/lib/SideNav/ItemsGroup.js +9 -31
- package/lib/SideNav/SideNav.js +9 -33
- package/lib/SideNav/index.js +0 -2
- package/lib/Skeleton/Skeleton.js +10 -42
- package/lib/Skeleton/index.js +0 -3
- package/lib/Skeleton/skeletonWebAnimation.js +0 -2
- package/lib/Skeleton/useSkeletonNativeAnimation.js +1 -9
- package/lib/SkipLink/SkipLink.js +7 -27
- package/lib/SkipLink/index.js +0 -3
- package/lib/Spacer/Spacer.js +4 -20
- package/lib/Spacer/index.js +0 -3
- package/lib/StackView/StackView.js +3 -21
- package/lib/StackView/StackWrap.js +11 -21
- package/lib/StackView/StackWrap.native.js +0 -3
- package/lib/StackView/StackWrapBox.js +5 -21
- package/lib/StackView/StackWrapGap.js +1 -14
- package/lib/StackView/common.js +0 -6
- package/lib/StackView/getStackedContent.js +10 -21
- package/lib/StackView/index.js +0 -5
- package/lib/StepTracker/Step.js +3 -27
- package/lib/StepTracker/StepTracker.js +5 -32
- package/lib/StepTracker/index.js +0 -3
- package/lib/Tabs/Tabs.js +7 -30
- package/lib/Tabs/TabsItem.js +13 -38
- package/lib/Tabs/index.js +0 -3
- package/lib/Tags/Tags.js +9 -42
- package/lib/Tags/index.js +0 -3
- package/lib/TextInput/TextArea.js +11 -20
- package/lib/TextInput/TextInput.js +7 -16
- package/lib/TextInput/TextInputBase.js +106 -69
- package/lib/TextInput/index.js +0 -3
- package/lib/TextInput/propTypes.js +4 -7
- package/lib/ThemeProvider/ThemeProvider.js +10 -18
- package/lib/ThemeProvider/index.js +0 -9
- package/lib/ThemeProvider/useSetTheme.js +6 -9
- package/lib/ThemeProvider/useTheme.js +2 -7
- package/lib/ThemeProvider/useThemeTokens.js +1 -9
- package/lib/ThemeProvider/utils/index.js +0 -4
- package/lib/ThemeProvider/utils/styles.js +14 -35
- package/lib/ThemeProvider/utils/theme-tokens.js +15 -43
- package/lib/Timeline/Timeline.js +11 -27
- package/lib/Timeline/index.js +0 -3
- package/lib/ToggleSwitch/ToggleSwitch.js +12 -43
- package/lib/ToggleSwitch/ToggleSwitchGroup.js +4 -38
- package/lib/ToggleSwitch/index.js +0 -3
- package/lib/Tooltip/Backdrop.js +4 -11
- package/lib/Tooltip/Backdrop.native.js +1 -14
- package/lib/Tooltip/Tooltip.js +9 -37
- package/lib/Tooltip/Tooltip.native.js +14 -45
- package/lib/Tooltip/getTooltipPosition.js +26 -31
- package/lib/Tooltip/index.js +0 -5
- package/lib/Tooltip/shared.js +0 -10
- package/lib/TooltipButton/TooltipButton.js +5 -20
- package/lib/TooltipButton/index.js +0 -3
- package/lib/Typography/Typography.js +15 -38
- package/lib/Typography/index.js +0 -3
- package/lib/Validator/Validator.js +10 -58
- package/lib/Validator/index.js +0 -3
- package/lib/ViewportProvider/ViewportProvider.js +1 -13
- package/lib/ViewportProvider/index.js +0 -5
- package/lib/ViewportProvider/useViewport.js +0 -4
- package/lib/ViewportProvider/useViewportListener.js +3 -12
- package/lib/index.js +8 -71
- package/lib/utils/BaseView/BaseView.js +3 -17
- package/lib/utils/BaseView/BaseView.native.js +0 -3
- package/lib/utils/BaseView/index.js +0 -3
- package/lib/utils/a11y/index.js +0 -4
- package/lib/utils/a11y/semantics.js +14 -32
- package/lib/utils/a11y/textSize.js +1 -8
- package/lib/utils/animation/index.js +0 -2
- package/lib/utils/animation/useVerticalExpandAnimation.js +5 -18
- package/lib/utils/children.js +16 -28
- package/lib/utils/containUniqueFields.js +2 -5
- package/lib/utils/floating-ui/index.js +0 -1
- package/lib/utils/floating-ui/index.native.js +0 -1
- package/lib/utils/hasOwnProperty.js +0 -1
- package/lib/utils/htmlAttrs.js +2 -4
- package/lib/utils/index.js +0 -31
- package/lib/utils/info/index.js +0 -4
- package/lib/utils/info/platform/index.js +0 -4
- package/lib/utils/info/versions.js +0 -3
- package/lib/utils/input.js +12 -24
- package/lib/utils/pressability.js +7 -21
- package/lib/utils/props/a11yProps.js +19 -25
- package/lib/utils/props/clickProps.js +0 -4
- package/lib/utils/props/componentPropType.js +0 -14
- package/lib/utils/props/copyPropTypes.js +0 -4
- package/lib/utils/props/getPropSelector.js +11 -12
- package/lib/utils/props/handlerProps.js +2 -23
- package/lib/utils/props/hrefAttrsProp.js +0 -4
- package/lib/utils/props/index.js +0 -22
- package/lib/utils/props/inputSupportsProps.js +0 -9
- package/lib/utils/props/linkProps.js +2 -12
- package/lib/utils/props/paddingProp.js +0 -3
- package/lib/utils/props/pressProps.js +2 -8
- package/lib/utils/props/rectProp.js +0 -3
- package/lib/utils/props/responsiveProps.js +1 -5
- package/lib/utils/props/selectSystemProps.js +4 -6
- package/lib/utils/props/spacingProps.js +3 -10
- package/lib/utils/props/textInputProps.js +11 -31
- package/lib/utils/props/textProps.js +6 -11
- package/lib/utils/props/tokens.js +7 -26
- package/lib/utils/props/variantProp.js +0 -3
- package/lib/utils/props/viewProps.js +0 -5
- package/lib/utils/ssr.js +13 -33
- package/lib/utils/useCopy.js +3 -6
- package/lib/utils/useHash.js +5 -10
- package/lib/utils/useHash.native.js +0 -2
- package/lib/utils/useOverlaidPosition.js +6 -29
- package/lib/utils/useResponsiveProp.js +6 -13
- package/lib/utils/useSafeLayoutEffect.js +5 -10
- package/lib/utils/useScrollBlocking.js +3 -11
- package/lib/utils/useScrollBlocking.native.js +0 -2
- package/lib/utils/useSpacingScale.js +5 -8
- package/lib/utils/useUniqueId.js +0 -4
- package/lib/utils/withLinkRouter.js +13 -18
- package/lib-module/A11yInfoProvider/index.js +5 -9
- package/lib-module/A11yText/index.js +3 -4
- package/lib-module/ActivityIndicator/Spinner.js +2 -2
- package/lib-module/ActivityIndicator/Spinner.native.js +4 -6
- package/lib-module/ActivityIndicator/index.js +1 -5
- package/lib-module/ActivityIndicator/shared.js +2 -1
- package/lib-module/Autocomplete/Autocomplete.js +34 -59
- package/lib-module/Autocomplete/Loading.js +0 -2
- package/lib-module/BaseProvider/HydrationContext.js +4 -7
- package/lib-module/BaseProvider/index.js +0 -3
- package/lib-module/Box/Box.js +10 -24
- package/lib-module/Button/Button.js +4 -2
- package/lib-module/Button/ButtonBase.js +23 -35
- package/lib-module/Button/ButtonDropdown.js +7 -16
- package/lib-module/Button/ButtonGroup.js +15 -32
- package/lib-module/Button/ButtonLink.js +3 -2
- package/lib-module/Button/propTypes.js +0 -7
- package/lib-module/Card/Card.js +3 -2
- package/lib-module/Card/CardBase.js +5 -4
- package/lib-module/Card/PressableCardBase.js +7 -11
- package/lib-module/Carousel/Carousel.js +22 -60
- package/lib-module/Carousel/CarouselContext.js +0 -5
- package/lib-module/Carousel/CarouselFirstFocus/CarouselFirstFocus.js +7 -5
- package/lib-module/Carousel/CarouselItem/CarouselItem.js +5 -11
- package/lib-module/Carousel/CarouselStepTracker/CarouselStepTracker.js +0 -2
- package/lib-module/Carousel/CarouselTabs/CarouselTabs.js +3 -4
- package/lib-module/Carousel/CarouselTabs/CarouselTabsPanel.js +7 -6
- package/lib-module/Carousel/CarouselTabs/CarouselTabsPanelItem.js +2 -10
- package/lib-module/Carousel/CarouselThumbnail.js +1 -7
- package/lib-module/Carousel/CarouselThumbnailNavigation.js +0 -2
- package/lib-module/Checkbox/Checkbox.js +5 -23
- package/lib-module/Checkbox/CheckboxButton.js +7 -17
- package/lib-module/Checkbox/CheckboxGroup.js +5 -23
- package/lib-module/Checkbox/CheckboxInput.js +1 -3
- package/lib-module/Checkbox/CheckboxInput.native.js +0 -1
- package/lib-module/CheckboxCard/CheckboxCard.js +4 -21
- package/lib-module/CheckboxCardGroup/CheckboxCardGroup.js +205 -0
- package/lib-module/CheckboxCardGroup/index.js +2 -0
- package/lib-module/Divider/Divider.js +13 -11
- package/lib-module/ExpandCollapse/Accordion.js +1 -1
- package/lib-module/ExpandCollapse/Control.js +10 -17
- package/lib-module/ExpandCollapse/ExpandCollapse.js +3 -9
- package/lib-module/ExpandCollapse/Panel.js +13 -23
- package/lib-module/Feedback/Feedback.js +13 -16
- package/lib-module/Fieldset/Fieldset.js +6 -25
- package/lib-module/Fieldset/FieldsetContainer.js +1 -1
- package/lib-module/Fieldset/FieldsetContainer.native.js +0 -1
- package/lib-module/Fieldset/Legend.js +1 -1
- package/lib-module/Fieldset/Legend.native.js +1 -1
- package/lib-module/FlexGrid/Col/Col.js +10 -37
- package/lib-module/FlexGrid/FlexGrid.js +3 -17
- package/lib-module/FlexGrid/Row/Row.js +0 -25
- package/lib-module/FlexGrid/helpers/index.js +0 -3
- package/lib-module/HorizontalScroll/HorizontalScroll.js +17 -27
- package/lib-module/HorizontalScroll/HorizontalScrollButton.js +1 -3
- package/lib-module/HorizontalScroll/ScrollViewEnd.js +5 -4
- package/lib-module/HorizontalScroll/ScrollViewEnd.native.js +0 -1
- package/lib-module/HorizontalScroll/itemPositions.js +11 -10
- package/lib-module/Icon/Icon.js +4 -8
- package/lib-module/Icon/IconText.js +6 -17
- package/lib-module/IconButton/IconButton.js +7 -20
- package/lib-module/InputLabel/InputLabel.js +4 -13
- package/lib-module/InputLabel/LabelContent.js +2 -1
- package/lib-module/InputLabel/LabelContent.native.js +0 -1
- package/lib-module/InputSupports/InputSupports.js +0 -9
- package/lib-module/InputSupports/useInputSupports.js +2 -4
- package/lib-module/Link/ChevronLink.js +7 -7
- package/lib-module/Link/InlinePressable.js +0 -2
- package/lib-module/Link/InlinePressable.native.js +4 -12
- package/lib-module/Link/LinkBase.js +17 -25
- package/lib-module/Link/TextButton.js +3 -5
- package/lib-module/List/List.js +5 -9
- package/lib-module/List/ListItem.js +1 -1
- package/lib-module/List/ListItemBase.js +5 -17
- package/lib-module/List/ListItemContent.js +1 -4
- package/lib-module/List/ListItemMark.js +3 -16
- package/lib-module/List/PressableListItemBase.js +2 -6
- package/lib-module/Listbox/GroupControl.js +0 -2
- package/lib-module/Listbox/Listbox.js +15 -23
- package/lib-module/Listbox/ListboxContext.js +0 -2
- package/lib-module/Listbox/ListboxGroup.js +6 -4
- package/lib-module/Listbox/ListboxItem.js +2 -1
- package/lib-module/Listbox/ListboxOverlay.js +3 -4
- package/lib-module/Listbox/PressableItem.js +2 -7
- package/lib-module/Modal/Modal.js +94 -25
- package/lib-module/Modal/ModalContent.js +175 -0
- package/lib-module/MultiSelectFilter/ModalOverlay.js +1 -4
- package/lib-module/MultiSelectFilter/MultiSelectFilter.js +20 -42
- package/lib-module/Notification/Notification.js +11 -22
- package/lib-module/Pagination/PageButton.js +2 -6
- package/lib-module/Pagination/Pagination.js +21 -21
- package/lib-module/Pagination/SideButton.js +3 -8
- package/lib-module/Pagination/usePagination.js +4 -8
- package/lib-module/Progress/Progress.js +3 -7
- package/lib-module/Progress/ProgressBar.js +3 -11
- package/lib-module/Progress/ProgressBarBackground.js +0 -2
- package/lib-module/QuickLinks/QuickLinks.js +1 -6
- package/lib-module/QuickLinks/QuickLinksCard.js +1 -3
- package/lib-module/QuickLinks/QuickLinksItem.js +3 -2
- package/lib-module/QuickLinksFeature/QuickLinksFeature.js +5 -9
- package/lib-module/QuickLinksFeature/QuickLinksFeatureItem.js +9 -13
- package/lib-module/Radio/Radio.js +5 -22
- package/lib-module/Radio/RadioButton.js +8 -10
- package/lib-module/Radio/RadioGroup.js +6 -25
- package/lib-module/Radio/RadioInput.js +1 -3
- package/lib-module/Radio/RadioInput.native.js +0 -1
- package/lib-module/RadioCard/RadioCard.js +5 -21
- package/lib-module/RadioCard/RadioCardGroup.js +7 -25
- package/lib-module/Responsive/Responsive.js +1 -6
- package/lib-module/Search/Search.js +22 -31
- package/lib-module/Select/Group.js +0 -3
- package/lib-module/Select/Group.native.js +0 -3
- package/lib-module/Select/Item.js +0 -3
- package/lib-module/Select/Item.native.js +0 -1
- package/lib-module/Select/Picker.native.js +8 -10
- package/lib-module/Select/Select.js +10 -35
- package/lib-module/SideNav/Item.js +5 -16
- package/lib-module/SideNav/ItemContent.js +1 -2
- package/lib-module/SideNav/ItemsGroup.js +9 -19
- package/lib-module/SideNav/SideNav.js +9 -22
- package/lib-module/Skeleton/Skeleton.js +10 -25
- package/lib-module/Skeleton/skeletonWebAnimation.js +0 -1
- package/lib-module/Skeleton/useSkeletonNativeAnimation.js +1 -3
- package/lib-module/SkipLink/SkipLink.js +7 -9
- package/lib-module/Spacer/Spacer.js +4 -7
- package/lib-module/StackView/StackView.js +3 -7
- package/lib-module/StackView/StackWrap.js +13 -13
- package/lib-module/StackView/StackWrap.native.js +2 -1
- package/lib-module/StackView/StackWrapBox.js +5 -8
- package/lib-module/StackView/StackWrapGap.js +1 -1
- package/lib-module/StackView/getStackedContent.js +10 -10
- package/lib-module/StepTracker/Step.js +3 -14
- package/lib-module/StepTracker/StepTracker.js +5 -13
- package/lib-module/Tabs/Tabs.js +7 -16
- package/lib-module/Tabs/TabsItem.js +13 -16
- package/lib-module/Tags/Tags.js +9 -26
- package/lib-module/TextInput/TextArea.js +11 -8
- package/lib-module/TextInput/TextInput.js +7 -5
- package/lib-module/TextInput/TextInputBase.js +107 -51
- package/lib-module/TextInput/propTypes.js +7 -6
- package/lib-module/ThemeProvider/ThemeProvider.js +10 -9
- package/lib-module/ThemeProvider/useSetTheme.js +6 -7
- package/lib-module/ThemeProvider/useTheme.js +2 -5
- package/lib-module/ThemeProvider/useThemeTokens.js +1 -2
- package/lib-module/ThemeProvider/utils/styles.js +15 -27
- package/lib-module/ThemeProvider/utils/theme-tokens.js +15 -20
- package/lib-module/Timeline/Timeline.js +11 -17
- package/lib-module/ToggleSwitch/ToggleSwitch.js +13 -26
- package/lib-module/ToggleSwitch/ToggleSwitchGroup.js +4 -23
- package/lib-module/Tooltip/Backdrop.js +4 -7
- package/lib-module/Tooltip/Backdrop.native.js +1 -4
- package/lib-module/Tooltip/Tooltip.js +9 -18
- package/lib-module/Tooltip/Tooltip.native.js +14 -23
- package/lib-module/Tooltip/getTooltipPosition.js +26 -30
- package/lib-module/Tooltip/shared.js +0 -6
- package/lib-module/TooltipButton/TooltipButton.js +5 -8
- package/lib-module/Typography/Typography.js +14 -22
- package/lib-module/Validator/Validator.js +10 -42
- package/lib-module/ViewportProvider/ViewportProvider.js +1 -3
- package/lib-module/ViewportProvider/useViewportListener.js +6 -8
- package/lib-module/index.js +1 -0
- package/lib-module/utils/BaseView/BaseView.js +3 -4
- package/lib-module/utils/BaseView/BaseView.native.js +0 -1
- package/lib-module/utils/a11y/semantics.js +14 -27
- package/lib-module/utils/a11y/textSize.js +1 -2
- package/lib-module/utils/animation/useVerticalExpandAnimation.js +8 -11
- package/lib-module/utils/children.js +17 -19
- package/lib-module/utils/containUniqueFields.js +2 -4
- package/lib-module/utils/htmlAttrs.js +2 -1
- package/lib-module/utils/info/index.js +2 -1
- package/lib-module/utils/info/platform/index.js +4 -1
- package/lib-module/utils/info/versions.js +2 -1
- package/lib-module/utils/input.js +11 -19
- package/lib-module/utils/pressability.js +8 -7
- package/lib-module/utils/props/a11yProps.js +22 -20
- package/lib-module/utils/props/clickProps.js +0 -1
- package/lib-module/utils/props/componentPropType.js +0 -13
- package/lib-module/utils/props/getPropSelector.js +12 -8
- package/lib-module/utils/props/handlerProps.js +2 -19
- package/lib-module/utils/props/hrefAttrsProp.js +2 -2
- package/lib-module/utils/props/inputSupportsProps.js +0 -6
- package/lib-module/utils/props/linkProps.js +2 -3
- package/lib-module/utils/props/pressProps.js +2 -2
- package/lib-module/utils/props/responsiveProps.js +1 -3
- package/lib-module/utils/props/selectSystemProps.js +4 -5
- package/lib-module/utils/props/spacingProps.js +4 -3
- package/lib-module/utils/props/textInputProps.js +14 -27
- package/lib-module/utils/props/textProps.js +9 -7
- package/lib-module/utils/props/tokens.js +10 -13
- package/lib-module/utils/props/variantProp.js +1 -1
- package/lib-module/utils/props/viewProps.js +0 -1
- package/lib-module/utils/ssr.js +14 -18
- package/lib-module/utils/useCopy.js +3 -5
- package/lib-module/utils/useHash.js +5 -9
- package/lib-module/utils/useHash.native.js +0 -1
- package/lib-module/utils/useOverlaidPosition.js +6 -25
- package/lib-module/utils/useResponsiveProp.js +6 -7
- package/lib-module/utils/useSafeLayoutEffect.js +5 -7
- package/lib-module/utils/useScrollBlocking.js +3 -10
- package/lib-module/utils/useSpacingScale.js +4 -4
- package/lib-module/utils/useUniqueId.js +0 -2
- package/lib-module/utils/withLinkRouter.js +13 -10
- package/package.json +2 -2
- package/src/CheckboxCardGroup/CheckboxCardGroup.jsx +230 -0
- package/src/CheckboxCardGroup/index.js +3 -0
- package/src/Modal/Modal.jsx +98 -5
- package/src/Modal/ModalContent.jsx +171 -0
- package/src/TextInput/TextInputBase.jsx +67 -12
- package/src/TextInput/propTypes.js +4 -0
- package/src/index.js +1 -0
- package/src/utils/props/textInputProps.js +1 -0
package/lib/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 }; }
|
package/lib/utils/info/index.js
CHANGED
|
@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _platform = _interopRequireDefault(require("./platform"));
|
|
9
|
-
|
|
10
8
|
var _versions = _interopRequireDefault(require("./versions"));
|
|
11
|
-
|
|
12
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
-
|
|
14
10
|
// export an object accessed like info.platform.OS, info.version.uds, etc
|
|
15
11
|
var _default = {
|
|
16
12
|
platform: _platform.default,
|
|
@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
|
|
9
|
-
|
|
10
8
|
var _platform = _interopRequireDefault(require("./platform"));
|
|
11
|
-
|
|
12
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
-
|
|
14
10
|
// Allows consuming libraries that might not have a direct dependency on
|
|
15
11
|
// React Native to check what the current platform is.
|
|
16
12
|
// Particularly useful for validating Jest config: it is possible for Jest to
|
|
@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _package = _interopRequireDefault(require("../../../package.json"));
|
|
9
|
-
|
|
10
8
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
-
|
|
12
9
|
// Add more versions if they are useful e.g. theme schema version
|
|
13
10
|
var _default = {
|
|
14
11
|
uds: _package.default.version
|
package/lib/utils/input.js
CHANGED
|
@@ -4,14 +4,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.useMultipleInputValues = exports.useInputValue = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = require("react");
|
|
9
|
-
|
|
10
8
|
/**
|
|
11
9
|
* @typedef {import('react').SyntheticEvent} Event
|
|
12
10
|
*/
|
|
13
|
-
const pluralHooks = ['useMultipleInputValues'];
|
|
14
11
|
|
|
12
|
+
const pluralHooks = ['useMultipleInputValues'];
|
|
15
13
|
const validateProps = (_ref, _ref2, hookName) => {
|
|
16
14
|
let {
|
|
17
15
|
value,
|
|
@@ -24,7 +22,6 @@ const validateProps = (_ref, _ref2, hookName) => {
|
|
|
24
22
|
isControlled
|
|
25
23
|
} = _ref2;
|
|
26
24
|
const s = pluralHooks.includes(hookName) ? 's' : '';
|
|
27
|
-
|
|
28
25
|
const usageError = error => {
|
|
29
26
|
// Errors inside hooks in React Native get incomplete stack traces pointing at parent component only.
|
|
30
27
|
// Help devs out by telling them exactly which hook threw the error as well as why.
|
|
@@ -36,23 +33,20 @@ Consumers of this hook must be one of:
|
|
|
36
33
|
3. A "read-only" component, with \`readOnly\` prop set as \`true\`.
|
|
37
34
|
`);
|
|
38
35
|
};
|
|
39
|
-
|
|
40
36
|
if (value && !onChange && !readOnly) {
|
|
41
37
|
usageError(`has \`value${s}\` prop without \`onChange\` or \`readOnly\``);
|
|
42
38
|
}
|
|
43
|
-
|
|
44
39
|
if (initialValue && value) {
|
|
45
40
|
usageError(`has both \`initialValue${s}\` and \`value${s}\``);
|
|
46
41
|
}
|
|
47
|
-
|
|
48
42
|
if (isControlled && !isCurrentlyControlled) {
|
|
49
43
|
usageError(`stopped receiving \`value${s}\` from parent after delegating state management`);
|
|
50
44
|
}
|
|
51
|
-
|
|
52
45
|
if (!isControlled && isCurrentlyControlled) {
|
|
53
46
|
usageError(`started receiving \`value${s}\` from parent after starting managing own state`);
|
|
54
47
|
}
|
|
55
48
|
};
|
|
49
|
+
|
|
56
50
|
/**
|
|
57
51
|
* Hook used for controlling the input state of input components that have a singular value.
|
|
58
52
|
* If `value` prop is passed in, this delegates state management to a parent using a passed-in `onChange` prop.
|
|
@@ -76,8 +70,6 @@ Consumers of this hook must be one of:
|
|
|
76
70
|
* isControlled: bool
|
|
77
71
|
* }}
|
|
78
72
|
*/
|
|
79
|
-
|
|
80
|
-
|
|
81
73
|
const useInputValue = function () {
|
|
82
74
|
let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
83
75
|
let hookName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'useInputValue';
|
|
@@ -95,26 +87,25 @@ const useInputValue = function () {
|
|
|
95
87
|
readOnly = false
|
|
96
88
|
} = props;
|
|
97
89
|
const [ownValue, setOwnValue] = (0, _react.useState)(!isControlled && initialValue);
|
|
98
|
-
const currentValue = isControlled ? value : ownValue;
|
|
99
|
-
// is needed, add useEffect calling a set fn if !deepEqual(initializedValues, initialValues)
|
|
90
|
+
const currentValue = isControlled ? value : ownValue;
|
|
100
91
|
|
|
92
|
+
// Store the first valid value, for resetting input to default. If behaviour like Formik's `enableReinitialize`
|
|
93
|
+
// is needed, add useEffect calling a set fn if !deepEqual(initializedValues, initialValues)
|
|
101
94
|
const valueRef = (0, _react.useRef)({
|
|
102
95
|
initial: currentValue,
|
|
103
96
|
value: currentValue
|
|
104
|
-
});
|
|
105
|
-
|
|
97
|
+
});
|
|
98
|
+
// Make current value accessible inside useCallback without rememoizing every time the value changes
|
|
106
99
|
valueRef.current.value = currentValue;
|
|
107
100
|
const isDirty = currentValue !== valueRef.current.initial;
|
|
108
101
|
const setValue = (0, _react.useCallback)((arg, event) => {
|
|
109
102
|
if (readOnly) return;
|
|
110
103
|
const newValue = typeof arg === 'function' ? arg(valueRef.current.value) : arg;
|
|
111
|
-
|
|
112
104
|
if (!isControlled) {
|
|
113
105
|
setOwnValue(newValue);
|
|
114
106
|
if (inputRef !== null && inputRef !== void 0 && inputRef.current) inputRef.current.value = newValue ?? '';
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
|
|
107
|
+
}
|
|
108
|
+
// Call onChange handler if there's something for it to handle (event or a changed value)
|
|
118
109
|
if (onChange && (event || valueRef.current.value !== newValue)) onChange(newValue, event);
|
|
119
110
|
}, [inputRef, isControlled, onChange, readOnly]);
|
|
120
111
|
const resetValue = (0, _react.useCallback)(event => setValue(valueRef.current.initial, event), [setValue]);
|
|
@@ -126,6 +117,7 @@ const useInputValue = function () {
|
|
|
126
117
|
isDirty
|
|
127
118
|
};
|
|
128
119
|
};
|
|
120
|
+
|
|
129
121
|
/**
|
|
130
122
|
* Hook used for controlling the input state of input components that have multiple named on/off states.
|
|
131
123
|
* If `values` are passed in, this delegates state management to a parent using a passed-in `onChange` prop.
|
|
@@ -151,10 +143,7 @@ const useInputValue = function () {
|
|
|
151
143
|
* unsetValues: () => void
|
|
152
144
|
* }}
|
|
153
145
|
*/
|
|
154
|
-
|
|
155
|
-
|
|
156
146
|
exports.useInputValue = useInputValue;
|
|
157
|
-
|
|
158
147
|
const useMultipleInputValues = function () {
|
|
159
148
|
let {
|
|
160
149
|
values,
|
|
@@ -187,9 +176,9 @@ const useMultipleInputValues = function () {
|
|
|
187
176
|
const resetValues = resetValue;
|
|
188
177
|
const unsetValues = (0, _react.useCallback)(event => setValues([], event), [setValues]);
|
|
189
178
|
const toggleOneValue = (0, _react.useCallback)((newValue, event) => {
|
|
190
|
-
if (readOnly) return;
|
|
179
|
+
if (readOnly) return;
|
|
180
|
+
// This will only work with primitive values (e.g. strings, numbers), swap for .some() and
|
|
191
181
|
// a deepEqual() function if there's any use case for toggling stored objects or arrays.
|
|
192
|
-
|
|
193
182
|
const newValues = currentValues.includes(newValue) ? currentValues.filter(oldValue => oldValue !== newValue) : [...currentValues, newValue];
|
|
194
183
|
setValues(newValues, event);
|
|
195
184
|
}, [currentValues, readOnly, setValues]);
|
|
@@ -201,5 +190,4 @@ const useMultipleInputValues = function () {
|
|
|
201
190
|
unsetValues
|
|
202
191
|
};
|
|
203
192
|
};
|
|
204
|
-
|
|
205
193
|
exports.useMultipleInputValues = useMultipleInputValues;
|
|
@@ -4,20 +4,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.resolvePressableTokens = exports.resolvePressableState = exports.getPressHandlersWithArgs = exports.getCursorStyle = void 0;
|
|
7
|
-
|
|
8
7
|
var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
|
|
9
|
-
|
|
10
8
|
var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
|
|
11
|
-
|
|
12
9
|
var _pressProps = _interopRequireDefault(require("./props/pressProps"));
|
|
13
|
-
|
|
14
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
-
|
|
16
11
|
/**
|
|
17
12
|
* @typedef {import('react').ReactNode} ReactNode
|
|
18
|
-
*/
|
|
19
|
-
// These roles should result in cursor: pointer but don't in current RNW releases
|
|
13
|
+
*/ // These roles should result in cursor: pointer but don't in current RNW releases
|
|
20
14
|
const shouldUseCursor = ['checkbox', 'radio', 'switch'];
|
|
15
|
+
|
|
21
16
|
/**
|
|
22
17
|
* React Native Web has some built-in logic for applying cursor styles based on accessibility roles;
|
|
23
18
|
* however, it misses certain cases. This fills in known cases where widely used versions of RNW
|
|
@@ -29,7 +24,6 @@ const shouldUseCursor = ['checkbox', 'radio', 'switch'];
|
|
|
29
24
|
* @param {string} [props.accessibilityRole]
|
|
30
25
|
* @returns
|
|
31
26
|
*/
|
|
32
|
-
|
|
33
27
|
const getCursorStyle = _ref => {
|
|
34
28
|
let {
|
|
35
29
|
inactive,
|
|
@@ -41,6 +35,7 @@ const getCursorStyle = _ref => {
|
|
|
41
35
|
if (shouldUseCursor.includes(accessibilityRole)) return staticStyles.pointer;
|
|
42
36
|
return undefined; // allows React Native Web's built-in logic to apply
|
|
43
37
|
};
|
|
38
|
+
|
|
44
39
|
/**
|
|
45
40
|
* @typedef {{ pressed: boolean, focused: boolean, hovered?: boolean }} PressableState
|
|
46
41
|
*/
|
|
@@ -55,10 +50,7 @@ const getCursorStyle = _ref => {
|
|
|
55
50
|
* such as `inactive`, `selected`, etc.
|
|
56
51
|
* @returns {object}
|
|
57
52
|
*/
|
|
58
|
-
|
|
59
|
-
|
|
60
53
|
exports.getCursorStyle = getCursorStyle;
|
|
61
|
-
|
|
62
54
|
const resolvePressableState = function () {
|
|
63
55
|
let {
|
|
64
56
|
pressed = false,
|
|
@@ -66,12 +58,14 @@ const resolvePressableState = function () {
|
|
|
66
58
|
hovered = false
|
|
67
59
|
} = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
68
60
|
let additionalState = arguments.length > 1 ? arguments[1] : undefined;
|
|
69
|
-
return {
|
|
61
|
+
return {
|
|
62
|
+
...additionalState,
|
|
70
63
|
focus: focused,
|
|
71
64
|
hover: hovered,
|
|
72
65
|
pressed
|
|
73
66
|
};
|
|
74
67
|
};
|
|
68
|
+
|
|
75
69
|
/**
|
|
76
70
|
* Takes a UDS `tokens` prop and, if it is a function, resolves it based on a state
|
|
77
71
|
* object passed from the React Native `Pressable` component and optional extra properties.
|
|
@@ -81,18 +75,13 @@ const resolvePressableState = function () {
|
|
|
81
75
|
* @param {object} [additionalState] - properties specific to the current component
|
|
82
76
|
* @returns {object} - resolved tokens object
|
|
83
77
|
*/
|
|
84
|
-
|
|
85
|
-
|
|
86
78
|
exports.resolvePressableState = resolvePressableState;
|
|
87
|
-
|
|
88
79
|
const resolvePressableTokens = (tokens, pressableState, additionalState) => {
|
|
89
80
|
if (typeof tokens !== 'function') return tokens;
|
|
90
81
|
const udsPressableState = resolvePressableState(pressableState, additionalState);
|
|
91
82
|
return tokens(udsPressableState);
|
|
92
83
|
};
|
|
93
|
-
|
|
94
84
|
exports.resolvePressableTokens = resolvePressableTokens;
|
|
95
|
-
|
|
96
85
|
const staticStyles = _StyleSheet.default.create(_Platform.default.select({
|
|
97
86
|
web: {
|
|
98
87
|
notAllowed: {
|
|
@@ -104,13 +93,12 @@ const staticStyles = _StyleSheet.default.create(_Platform.default.select({
|
|
|
104
93
|
},
|
|
105
94
|
default: {}
|
|
106
95
|
}));
|
|
96
|
+
|
|
107
97
|
/**
|
|
108
98
|
* From an object of props, extracts any platform-appropriate press handler functions and wraps
|
|
109
99
|
* them in a function that passes in some provided args. Allows components containing a Pressable
|
|
110
100
|
* to pass in press handlers that are then called with state or values that is otherwise internal.
|
|
111
101
|
*/
|
|
112
|
-
|
|
113
|
-
|
|
114
102
|
const getPressHandlersWithArgs = function () {
|
|
115
103
|
let pressableProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
116
104
|
let args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
@@ -122,7 +110,6 @@ const getPressHandlersWithArgs = function () {
|
|
|
122
110
|
for (var _len = arguments.length, defaultArgs = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
123
111
|
defaultArgs[_key] = arguments[_key];
|
|
124
112
|
}
|
|
125
|
-
|
|
126
113
|
// Pass each handler data on this button and current selection
|
|
127
114
|
handler(...args, ...defaultArgs);
|
|
128
115
|
}
|
|
@@ -130,5 +117,4 @@ const getPressHandlersWithArgs = function () {
|
|
|
130
117
|
}));
|
|
131
118
|
return pressHandlers;
|
|
132
119
|
};
|
|
133
|
-
|
|
134
120
|
exports.getPressHandlersWithArgs = getPressHandlersWithArgs;
|