@telus-uds/components-base 2.0.0 → 2.0.2
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 +1046 -3
- package/README.md +35 -0
- package/babel.config.cjs +35 -0
- package/{jest.config-android.js → jest.config-android.cjs} +1 -1
- package/{jest.config-ios.js → jest.config-ios.cjs} +1 -1
- package/{jest.config-web.js → jest.config-web.cjs} +1 -1
- package/jest.config.cjs +40 -0
- package/jest.setup.js +7 -0
- package/lib/A11yInfoProvider/index.js +33 -64
- package/lib/A11yText/index.js +29 -40
- package/lib/ActionCard/ActionCard.js +342 -0
- package/lib/ActionCard/index.js +2 -0
- package/lib/ActivityIndicator/Spinner.js +27 -42
- package/lib/ActivityIndicator/Spinner.native.js +37 -70
- package/lib/ActivityIndicator/index.js +17 -33
- package/lib/ActivityIndicator/shared.js +12 -26
- package/lib/Autocomplete/Autocomplete.js +478 -0
- package/lib/Autocomplete/Loading.js +35 -0
- package/lib/Autocomplete/Suggestions.js +64 -0
- package/lib/Autocomplete/constants.js +4 -0
- package/lib/Autocomplete/dictionary.js +12 -0
- package/lib/Autocomplete/index.js +2 -0
- package/lib/Badge/Badge.js +102 -0
- package/lib/Badge/index.js +2 -0
- package/lib/BaseProvider/HydrationContext.js +17 -43
- package/lib/BaseProvider/index.js +24 -41
- package/lib/Box/Box.js +191 -93
- package/lib/Box/backgroundImageStylesMap.js +94 -0
- package/lib/Box/index.js +2 -13
- package/lib/Button/Button.js +21 -33
- package/lib/Button/ButtonBase.js +143 -136
- package/lib/Button/ButtonDropdown.js +41 -75
- package/lib/Button/ButtonGroup.js +92 -110
- package/lib/Button/ButtonLink.js +25 -36
- package/lib/Button/index.js +5 -39
- package/lib/Button/propTypes.js +16 -40
- package/lib/Card/Card.js +266 -45
- package/lib/Card/CardBase.js +67 -40
- package/lib/Card/PressableCardBase.js +35 -67
- package/lib/Card/index.js +4 -40
- package/lib/CardGroup/CardGroup.js +210 -0
- package/lib/CardGroup/dictionary.js +8 -0
- package/lib/CardGroup/index.js +2 -0
- package/lib/Carousel/Carousel.js +476 -332
- package/lib/Carousel/CarouselContext.js +20 -42
- package/lib/Carousel/CarouselFirstFocus/CarouselFirstFocus.js +18 -39
- package/lib/Carousel/CarouselItem/CarouselItem.js +106 -58
- package/lib/Carousel/CarouselItem/index.js +2 -13
- package/lib/Carousel/CarouselStepTracker/CarouselStepTracker.js +21 -32
- package/lib/Carousel/CarouselStepTracker/index.js +2 -13
- package/lib/Carousel/CarouselTabs/CarouselTabs.js +17 -36
- package/lib/Carousel/CarouselTabs/CarouselTabsPanel.js +36 -51
- package/lib/Carousel/CarouselTabs/CarouselTabsPanelItem.js +25 -55
- package/lib/Carousel/CarouselTabs/index.js +2 -13
- package/lib/Carousel/CarouselThumbnail.js +76 -62
- package/lib/Carousel/CarouselThumbnailNavigation.js +31 -47
- package/lib/Carousel/dictionary.js +13 -16
- package/lib/Carousel/index.js +3 -41
- package/lib/Checkbox/Checkbox.js +64 -107
- package/lib/Checkbox/CheckboxButton.js +163 -0
- package/lib/Checkbox/CheckboxGroup.js +64 -90
- package/lib/Checkbox/CheckboxInput.js +16 -42
- package/lib/Checkbox/CheckboxInput.native.js +1 -10
- package/lib/Checkbox/index.js +3 -21
- package/{lib-module/RadioCard/RadioCard.js → lib/CheckboxCard/CheckboxCard.js} +43 -88
- package/lib/CheckboxCard/index.js +2 -0
- package/lib/CheckboxCardGroup/CheckboxCardGroup.js +206 -0
- package/lib/CheckboxCardGroup/index.js +2 -0
- package/lib/ColourToggle/ColourBubble.js +126 -0
- package/lib/ColourToggle/ColourToggle.js +91 -0
- package/lib/ColourToggle/index.js +2 -0
- package/lib/Divider/Divider.js +37 -54
- package/lib/Divider/index.js +2 -13
- package/lib/DownloadApp/DownloadApp.js +160 -0
- package/lib/DownloadApp/dictionary.js +10 -0
- package/lib/DownloadApp/index.js +2 -0
- package/lib/ExpandCollapse/Accordion.js +6 -22
- package/lib/ExpandCollapse/Control.js +72 -67
- package/lib/ExpandCollapse/ExpandCollapse.js +39 -56
- package/lib/ExpandCollapse/Panel.js +144 -86
- package/lib/ExpandCollapse/dictionary.js +10 -0
- package/lib/ExpandCollapse/index.js +7 -25
- package/lib/Feedback/Feedback.js +41 -69
- package/lib/Feedback/index.js +2 -13
- package/lib/Fieldset/Fieldset.js +81 -90
- package/lib/Fieldset/FieldsetContainer.js +26 -33
- package/lib/Fieldset/FieldsetContainer.native.js +18 -27
- package/lib/Fieldset/Legend.js +9 -26
- package/lib/Fieldset/Legend.native.js +10 -30
- package/lib/Fieldset/cssReset.js +2 -9
- package/lib/Fieldset/index.js +2 -13
- package/lib/FileUpload/FileUpload.js +328 -0
- package/lib/FileUpload/NotificationContent.js +54 -0
- package/lib/FileUpload/dictionary.js +40 -0
- package/lib/FileUpload/index.js +2 -0
- package/lib/FlexGrid/Col/Col.js +104 -148
- package/lib/FlexGrid/Col/index.js +2 -13
- package/lib/FlexGrid/FlexGrid.js +92 -110
- package/lib/FlexGrid/Row/Row.js +82 -108
- package/lib/FlexGrid/Row/index.js +2 -13
- package/lib/FlexGrid/helpers/index.js +1 -12
- package/lib/FlexGrid/index.js +2 -13
- package/lib/FlexGrid/providers/GutterContext.js +3 -15
- package/lib/Footnote/Footnote.js +316 -0
- package/lib/Footnote/FootnoteLink.js +107 -0
- package/lib/Footnote/dictionary.js +12 -0
- package/lib/Footnote/index.js +4 -0
- package/lib/HorizontalScroll/HorizontalScroll.js +48 -87
- package/lib/HorizontalScroll/HorizontalScrollButton.js +26 -52
- package/lib/HorizontalScroll/ScrollViewEnd.js +17 -38
- package/lib/HorizontalScroll/ScrollViewEnd.native.js +8 -26
- package/lib/HorizontalScroll/dictionary.js +2 -9
- package/lib/HorizontalScroll/index.js +11 -35
- package/lib/HorizontalScroll/itemPositions.js +25 -46
- package/lib/Icon/Icon.js +59 -48
- package/lib/Icon/IconText.js +59 -55
- package/lib/Icon/index.js +4 -31
- package/lib/IconButton/IconButton.js +127 -85
- package/lib/IconButton/index.js +2 -13
- package/lib/InputLabel/InputLabel.js +42 -76
- package/lib/InputLabel/LabelContent.js +10 -26
- package/lib/InputLabel/LabelContent.native.js +8 -27
- package/lib/InputLabel/index.js +2 -13
- package/lib/InputSupports/InputSupports.js +39 -56
- package/lib/InputSupports/index.js +2 -13
- package/lib/InputSupports/useInputSupports.js +7 -19
- package/lib/Link/ChevronLink.js +35 -38
- package/lib/Link/InlinePressable.js +14 -29
- package/lib/Link/InlinePressable.native.js +20 -40
- package/lib/Link/Link.js +9 -27
- package/lib/Link/LinkBase.js +96 -103
- package/lib/Link/TextButton.js +19 -29
- package/lib/Link/index.js +5 -39
- package/lib/List/List.js +39 -50
- package/lib/List/ListItem.js +13 -37
- package/lib/List/ListItemBase.js +72 -70
- package/lib/List/ListItemContent.js +36 -48
- package/lib/List/ListItemMark.js +42 -75
- package/lib/List/PressableListItemBase.js +35 -69
- package/lib/List/index.js +5 -28
- package/lib/Listbox/GroupControl.js +105 -0
- package/lib/Listbox/Listbox.js +171 -0
- package/lib/Listbox/ListboxContext.js +4 -0
- package/lib/Listbox/ListboxGroup.js +125 -0
- package/lib/Listbox/ListboxItem.js +76 -0
- package/lib/Listbox/ListboxOverlay.js +77 -0
- package/lib/Listbox/PressableItem.js +139 -0
- package/lib/Listbox/index.js +2 -0
- package/lib/Modal/Modal.js +212 -96
- package/lib/Modal/ModalContent.js +179 -0
- package/lib/Modal/WebModal.js +76 -0
- package/lib/Modal/dictionary.js +2 -9
- package/lib/Modal/index.js +2 -13
- package/lib/MultiSelectFilter/ModalOverlay.js +114 -95
- package/lib/MultiSelectFilter/MultiSelectFilter.js +380 -170
- package/lib/MultiSelectFilter/dictionary.js +2 -9
- package/lib/MultiSelectFilter/index.js +2 -13
- package/lib/Notification/Notification.js +290 -116
- package/lib/Notification/dictionary.js +2 -9
- package/lib/Notification/index.js +2 -13
- package/lib/OrderedList/Item.js +159 -0
- package/lib/OrderedList/ItemBase.js +43 -0
- package/lib/OrderedList/OrderedList.js +64 -0
- package/lib/OrderedList/OrderedListBase.js +36 -0
- package/lib/OrderedList/index.js +2 -0
- package/lib/Pagination/PageButton.js +38 -57
- package/lib/Pagination/Pagination.js +124 -95
- package/lib/Pagination/SideButton.js +25 -58
- package/lib/Pagination/constants.js +3 -0
- package/lib/Pagination/dictionary.js +5 -12
- package/lib/Pagination/index.js +2 -13
- package/lib/Pagination/usePagination.js +20 -23
- package/lib/Portal/Portal.js +50 -0
- package/lib/Portal/Portal.native.js +2 -0
- package/lib/Portal/index.js +2 -0
- package/lib/PriceLockup/PriceLockup.js +223 -0
- package/lib/PriceLockup/index.js +2 -0
- package/lib/PriceLockup/utils/renderFootnoteContent.js +85 -0
- package/lib/PriceLockup/utils/renderFootnoteLinks.js +28 -0
- package/lib/PriceLockup/utils/renderPrice.js +139 -0
- package/lib/PriceLockup/utils/renderTypography.js +23 -0
- package/lib/ProductCard/ProductCard.js +231 -0
- package/lib/ProductCard/dictionary.js +38 -0
- package/lib/ProductCard/index.js +2 -0
- package/lib/ProductCardGroup/ProductCardGroup.js +70 -0
- package/lib/ProductCardGroup/index.js +2 -0
- package/lib/Progress/Progress.js +22 -43
- package/lib/Progress/ProgressBar.js +31 -60
- package/lib/Progress/ProgressBarBackground.js +13 -35
- package/lib/Progress/index.js +4 -16
- package/lib/QuickLinks/QuickLinks.js +31 -44
- package/lib/QuickLinks/QuickLinksCard.js +16 -30
- package/lib/QuickLinks/QuickLinksItem.js +22 -44
- package/lib/QuickLinks/index.js +4 -16
- package/lib/QuickLinksFeature/QuickLinksFeature.js +25 -47
- package/lib/QuickLinksFeature/QuickLinksFeatureItem.js +88 -99
- package/lib/QuickLinksFeature/index.js +4 -16
- package/lib/Radio/Radio.js +63 -95
- package/lib/Radio/RadioButton.js +94 -76
- package/lib/Radio/RadioGroup.js +70 -94
- package/lib/Radio/RadioInput.js +18 -46
- package/lib/Radio/RadioInput.native.js +1 -10
- package/lib/Radio/index.js +3 -21
- package/lib/RadioCard/RadioCard.js +47 -90
- package/lib/RadioCard/RadioCardGroup.js +66 -91
- package/lib/RadioCard/index.js +3 -21
- package/lib/Responsive/Responsive.js +48 -41
- package/{lib-module/Responsive/Responsive.js → lib/Responsive/ResponsiveProp.js} +13 -20
- package/lib/Responsive/ResponsiveWithMediaQueryStyleSheet.js +68 -0
- package/lib/Responsive/index.js +2 -13
- package/lib/Search/Search.js +73 -96
- package/lib/Search/dictionary.js +2 -9
- package/lib/Search/index.js +2 -13
- package/lib/Select/Group.js +15 -25
- package/lib/Select/Group.native.js +8 -18
- package/lib/Select/Item.js +14 -23
- package/lib/Select/Item.native.js +1 -10
- package/lib/Select/Picker.js +71 -60
- package/lib/Select/Picker.native.js +40 -65
- package/lib/Select/Select.js +70 -109
- package/lib/Select/constants.js +4 -14
- package/lib/Select/index.js +6 -19
- package/lib/SideNav/Item.js +41 -65
- package/lib/SideNav/ItemContent.js +22 -41
- package/lib/SideNav/ItemsGroup.js +43 -60
- package/lib/SideNav/SideNav.js +42 -68
- package/lib/SideNav/index.js +1 -15
- package/lib/Skeleton/Skeleton.js +54 -86
- package/lib/Skeleton/index.js +2 -13
- package/lib/Skeleton/skeleton.constant.js +2 -12
- package/lib/Skeleton/skeletonWebAnimation.js +12 -25
- package/lib/Skeleton/useSkeletonNativeAnimation.js +22 -33
- package/lib/SkipLink/SkipLink.js +48 -75
- package/lib/SkipLink/index.js +2 -13
- package/lib/Spacer/Spacer.js +17 -41
- package/lib/Spacer/index.js +2 -13
- package/lib/StackView/StackView.js +34 -59
- package/lib/StackView/StackWrap.js +23 -44
- package/lib/StackView/StackWrap.native.js +2 -12
- package/lib/StackView/StackWrapBox.js +32 -58
- package/lib/StackView/StackWrapGap.js +22 -45
- package/lib/StackView/common.js +4 -19
- package/lib/StackView/getStackedContent.js +21 -41
- package/lib/StackView/index.js +5 -29
- package/lib/Status/Status.js +165 -0
- package/lib/Status/index.js +2 -0
- package/lib/StepTracker/Step.js +70 -79
- package/lib/StepTracker/StepTracker.js +67 -79
- package/lib/StepTracker/dictionary.js +26 -13
- package/lib/StepTracker/index.js +2 -13
- package/lib/TabBar/TabBar.js +125 -0
- package/lib/TabBar/TabBarItem.js +175 -0
- package/lib/TabBar/index.js +2 -0
- package/lib/Tabs/Tabs.js +75 -71
- package/lib/Tabs/TabsItem.js +70 -91
- package/lib/Tabs/index.js +2 -13
- package/lib/Tags/Tags.js +59 -97
- package/lib/Tags/index.js +2 -13
- package/lib/TextInput/TextArea.js +27 -46
- package/lib/TextInput/TextInput.js +38 -54
- package/lib/TextInput/TextInputBase.js +210 -137
- package/lib/TextInput/dictionary.js +8 -11
- package/lib/TextInput/index.js +3 -23
- package/lib/TextInput/propTypes.js +11 -21
- package/lib/ThemeProvider/ThemeProvider.js +40 -52
- package/lib/ThemeProvider/index.js +7 -61
- package/lib/ThemeProvider/useResponsiveThemeTokens.js +81 -0
- package/lib/ThemeProvider/useSetTheme.js +10 -20
- package/lib/ThemeProvider/useTheme.js +5 -17
- package/lib/ThemeProvider/useThemeTokens.js +16 -33
- package/lib/ThemeProvider/utils/index.js +2 -31
- package/lib/ThemeProvider/utils/styles.js +48 -60
- package/lib/ThemeProvider/utils/theme-tokens.js +37 -78
- package/lib/Timeline/Timeline.js +39 -63
- package/lib/Timeline/index.js +2 -13
- package/lib/ToggleSwitch/ToggleSwitch.js +105 -108
- package/lib/ToggleSwitch/ToggleSwitchGroup.js +47 -91
- package/lib/ToggleSwitch/index.js +3 -23
- package/lib/Tooltip/Backdrop.js +22 -29
- package/lib/Tooltip/Backdrop.native.js +14 -33
- package/lib/Tooltip/Tooltip.js +65 -92
- package/lib/Tooltip/Tooltip.native.js +107 -110
- package/lib/Tooltip/dictionary.js +2 -9
- package/lib/Tooltip/getTooltipPosition.js +35 -49
- package/lib/Tooltip/index.js +5 -18
- package/lib/Tooltip/shared.js +26 -24
- package/lib/TooltipButton/TooltipButton.js +48 -53
- package/lib/TooltipButton/index.js +2 -13
- package/lib/Typography/Typography.js +164 -87
- package/lib/Typography/index.js +2 -13
- package/lib/Validator/Validator.js +222 -0
- package/lib/Validator/index.js +2 -0
- package/lib/ViewportProvider/ViewportProvider.js +11 -31
- package/lib/ViewportProvider/index.js +3 -28
- package/lib/ViewportProvider/useViewport.js +3 -15
- package/lib/ViewportProvider/useViewportListener.js +13 -29
- package/lib/index.js +71 -681
- package/lib/server.js +4 -0
- package/lib/utils/BaseView/BaseView.js +14 -36
- package/lib/utils/BaseView/BaseView.native.js +2 -13
- package/lib/utils/BaseView/index.js +2 -13
- package/lib/utils/a11y/index.js +2 -31
- package/lib/utils/a11y/semantics.js +18 -60
- package/lib/utils/a11y/textSize.js +8 -24
- package/lib/utils/animation/index.js +2 -15
- package/lib/utils/animation/useVerticalExpandAnimation.js +27 -47
- package/lib/utils/children.js +25 -47
- package/lib/utils/containUniqueFields.js +3 -13
- package/lib/utils/convertFromMegaByteToByte.js +10 -0
- package/lib/utils/floating-ui/index.js +1 -43
- package/lib/utils/floating-ui/index.native.js +1 -43
- package/lib/utils/formatImageSource.js +27 -0
- package/lib/utils/hasOwnProperty.js +1 -8
- package/lib/utils/htmlAttrs.js +23 -0
- package/lib/utils/index.js +25 -222
- package/lib/utils/info/index.js +6 -17
- package/lib/utils/info/platform/index.js +8 -17
- package/lib/utils/info/platform/platform.android.js +1 -8
- package/lib/utils/info/platform/platform.ios.js +1 -8
- package/lib/utils/info/platform/platform.js +1 -8
- package/lib/utils/info/platform/platform.native.js +1 -8
- package/lib/utils/info/versions.js +4 -14
- package/lib/utils/input.js +38 -52
- package/lib/utils/pressability.js +18 -40
- package/lib/utils/props/a11yProps.js +105 -119
- package/lib/utils/props/clickProps.js +4 -16
- package/lib/utils/props/componentPropType.js +4 -24
- package/lib/utils/props/copyPropTypes.js +2 -14
- package/lib/utils/props/getPropSelector.js +15 -21
- package/lib/utils/props/handlerProps.js +28 -52
- package/lib/utils/props/hrefAttrsProp.js +6 -17
- package/lib/utils/props/index.js +19 -190
- package/lib/utils/props/inputSupportsProps.js +22 -27
- package/lib/utils/props/linkProps.js +17 -35
- package/lib/utils/props/paddingProp.js +8 -19
- package/lib/utils/props/pressProps.js +23 -38
- package/lib/utils/props/rectProp.js +8 -19
- package/lib/utils/props/responsiveProps.js +6 -18
- package/lib/utils/props/selectSystemProps.js +7 -15
- package/lib/utils/props/spacingProps.js +13 -27
- package/lib/utils/props/textInputProps.js +64 -90
- package/lib/utils/props/textProps.js +23 -34
- package/lib/utils/props/tokens.js +26 -55
- package/lib/utils/props/variantProp.js +4 -14
- package/lib/utils/props/viewProps.js +10 -23
- package/lib/utils/ssr-media-query/create-stylesheet/create-stylesheet-mobile.js +48 -0
- package/lib/utils/ssr-media-query/create-stylesheet/index.android.js +2 -0
- package/lib/utils/ssr-media-query/create-stylesheet/index.ios.js +2 -0
- package/lib/utils/ssr-media-query/create-stylesheet/index.js +36 -0
- package/lib/utils/ssr-media-query/hash.js +13 -0
- package/lib/utils/ssr-media-query/index.js +6 -0
- package/lib/utils/ssr-media-query/utils/common.js +33 -0
- package/lib/utils/ssr-media-query/utils/create-declaration-block.js +16 -0
- package/lib/utils/ssr-media-query/utils/create-media-query-styles.js +60 -0
- package/lib/utils/ssr-media-query/utils/hyphenate-style-name.js +12 -0
- package/lib/utils/ssr-media-query/utils/inject.js +39 -0
- package/lib/utils/ssr.js +27 -55
- package/lib/utils/transformGradient.js +15 -0
- package/lib/utils/useCopy.js +4 -15
- package/lib/utils/useHash.js +11 -23
- package/lib/utils/useHash.native.js +1 -10
- package/lib/utils/useOverlaidPosition.js +214 -0
- package/lib/utils/useResponsiveProp.js +13 -29
- package/lib/utils/useSafeLayoutEffect.js +10 -22
- package/lib/utils/useScrollBlocking.js +13 -28
- package/lib/utils/useScrollBlocking.native.js +1 -10
- package/lib/utils/useSpacingScale.js +12 -24
- package/lib/utils/useUniqueId.js +4 -15
- package/lib/utils/withLinkRouter.js +23 -36
- package/package.json +32 -22
- package/src/A11yInfoProvider/index.jsx +13 -20
- package/src/A11yText/index.jsx +14 -4
- package/src/ActionCard/ActionCard.jsx +306 -0
- package/src/ActionCard/index.js +3 -0
- package/src/ActivityIndicator/Spinner.jsx +3 -2
- package/src/ActivityIndicator/Spinner.native.jsx +2 -2
- package/src/ActivityIndicator/index.jsx +12 -3
- package/src/Autocomplete/Autocomplete.jsx +486 -0
- package/src/Autocomplete/Loading.jsx +21 -0
- package/src/Autocomplete/Suggestions.jsx +54 -0
- package/src/Autocomplete/constants.js +4 -0
- package/src/Autocomplete/dictionary.js +12 -0
- package/src/Autocomplete/index.js +3 -0
- package/src/Badge/Badge.jsx +76 -0
- package/src/Badge/index.js +3 -0
- package/src/BaseProvider/HydrationContext.jsx +5 -5
- package/src/BaseProvider/index.jsx +5 -2
- package/src/Box/Box.jsx +162 -20
- package/src/Box/backgroundImageStylesMap.js +21 -0
- package/src/Button/Button.jsx +12 -7
- package/src/Button/ButtonBase.jsx +76 -35
- package/src/Button/ButtonDropdown.jsx +5 -2
- package/src/Button/ButtonGroup.jsx +20 -3
- package/src/Button/ButtonLink.jsx +10 -4
- package/src/Card/Card.jsx +269 -17
- package/src/Card/CardBase.jsx +79 -28
- package/src/Card/PressableCardBase.jsx +21 -5
- package/src/CardGroup/CardGroup.jsx +249 -0
- package/src/CardGroup/dictionary.js +8 -0
- package/src/CardGroup/index.js +3 -0
- package/src/Carousel/Carousel.jsx +406 -117
- package/src/Carousel/CarouselFirstFocus/CarouselFirstFocus.jsx +2 -2
- package/src/Carousel/CarouselItem/CarouselItem.jsx +99 -18
- package/src/Carousel/CarouselStepTracker/CarouselStepTracker.jsx +15 -5
- package/src/Carousel/CarouselTabs/CarouselTabs.jsx +2 -2
- package/src/Carousel/CarouselTabs/CarouselTabsPanel.jsx +22 -12
- package/src/Carousel/CarouselTabs/CarouselTabsPanelItem.jsx +3 -3
- package/src/Carousel/CarouselThumbnail.jsx +45 -27
- package/src/Carousel/CarouselThumbnailNavigation.jsx +11 -7
- package/src/Carousel/dictionary.js +11 -7
- package/src/Checkbox/Checkbox.jsx +8 -4
- package/src/Checkbox/CheckboxButton.jsx +178 -0
- package/src/Checkbox/CheckboxGroup.jsx +24 -4
- package/src/Checkbox/CheckboxInput.jsx +15 -12
- package/src/CheckboxCard/CheckboxCard.jsx +190 -0
- package/src/CheckboxCard/index.js +3 -0
- package/src/CheckboxCardGroup/CheckboxCardGroup.jsx +231 -0
- package/src/CheckboxCardGroup/index.js +3 -0
- package/src/ColourToggle/ColourBubble.jsx +112 -0
- package/src/ColourToggle/ColourToggle.jsx +83 -0
- package/src/ColourToggle/index.js +3 -0
- package/src/Divider/Divider.jsx +5 -2
- package/src/DownloadApp/DownloadApp.jsx +165 -0
- package/src/DownloadApp/dictionary.js +10 -0
- package/src/DownloadApp/index.js +3 -0
- package/src/ExpandCollapse/Accordion.jsx +4 -2
- package/src/ExpandCollapse/Control.jsx +44 -14
- package/src/ExpandCollapse/ExpandCollapse.jsx +15 -7
- package/src/ExpandCollapse/Panel.jsx +119 -24
- package/src/ExpandCollapse/dictionary.js +10 -0
- package/src/Feedback/Feedback.jsx +3 -4
- package/src/Fieldset/Fieldset.jsx +47 -23
- package/src/Fieldset/FieldsetContainer.jsx +15 -7
- package/src/Fieldset/FieldsetContainer.native.jsx +15 -7
- package/src/Fieldset/Legend.jsx +2 -2
- package/src/Fieldset/Legend.native.jsx +2 -2
- package/src/FileUpload/FileUpload.jsx +396 -0
- package/src/FileUpload/NotificationContent.jsx +44 -0
- package/src/FileUpload/dictionary.js +40 -0
- package/src/FileUpload/index.js +3 -0
- package/src/FlexGrid/Col/Col.jsx +76 -79
- package/src/FlexGrid/FlexGrid.jsx +62 -43
- package/src/FlexGrid/Row/Row.jsx +60 -54
- package/src/Footnote/Footnote.jsx +326 -0
- package/src/Footnote/FootnoteLink.jsx +110 -0
- package/src/Footnote/dictionary.js +12 -0
- package/src/Footnote/index.js +6 -0
- package/src/HorizontalScroll/HorizontalScroll.jsx +8 -8
- package/src/HorizontalScroll/HorizontalScrollButton.jsx +2 -2
- package/src/HorizontalScroll/ScrollViewEnd.jsx +4 -8
- package/src/HorizontalScroll/ScrollViewEnd.native.jsx +2 -2
- package/src/Icon/Icon.jsx +53 -6
- package/src/Icon/IconText.jsx +46 -14
- package/src/IconButton/IconButton.jsx +116 -20
- package/src/InputLabel/InputLabel.jsx +8 -6
- package/src/InputLabel/LabelContent.jsx +2 -2
- package/src/InputLabel/LabelContent.native.jsx +2 -2
- package/src/InputSupports/InputSupports.jsx +22 -3
- package/src/Link/ChevronLink.jsx +24 -7
- package/src/Link/InlinePressable.jsx +23 -15
- package/src/Link/InlinePressable.native.jsx +12 -6
- package/src/Link/Link.jsx +2 -2
- package/src/Link/LinkBase.jsx +75 -31
- package/src/Link/TextButton.jsx +11 -4
- package/src/List/List.jsx +26 -8
- package/src/List/ListItem.jsx +3 -5
- package/src/List/ListItemBase.jsx +38 -9
- package/src/List/ListItemContent.jsx +24 -6
- package/src/List/ListItemMark.jsx +14 -13
- package/src/List/PressableListItemBase.jsx +4 -2
- package/src/Listbox/GroupControl.jsx +101 -0
- package/src/Listbox/Listbox.jsx +177 -0
- package/src/Listbox/ListboxContext.js +6 -0
- package/src/Listbox/ListboxGroup.jsx +127 -0
- package/src/Listbox/ListboxItem.jsx +87 -0
- package/src/Listbox/ListboxOverlay.jsx +81 -0
- package/src/Listbox/PressableItem.jsx +138 -0
- package/src/Listbox/index.js +3 -0
- package/src/Modal/Modal.jsx +190 -16
- package/src/Modal/ModalContent.jsx +180 -0
- package/src/Modal/WebModal.jsx +70 -0
- package/src/MultiSelectFilter/ModalOverlay.jsx +103 -30
- package/src/MultiSelectFilter/MultiSelectFilter.jsx +326 -68
- package/src/Notification/Notification.jsx +273 -49
- package/src/OrderedList/Item.jsx +147 -0
- package/src/OrderedList/ItemBase.jsx +43 -0
- package/src/OrderedList/OrderedList.jsx +64 -0
- package/src/OrderedList/OrderedListBase.jsx +33 -0
- package/src/OrderedList/index.js +3 -0
- package/src/Pagination/PageButton.jsx +14 -5
- package/src/Pagination/Pagination.jsx +83 -17
- package/src/Pagination/SideButton.jsx +2 -2
- package/src/Pagination/constants.js +3 -0
- package/src/Pagination/dictionary.js +3 -3
- package/src/Pagination/usePagination.js +14 -3
- package/src/Portal/Portal.jsx +52 -0
- package/src/Portal/Portal.native.jsx +3 -0
- package/src/Portal/index.js +3 -0
- package/src/PriceLockup/PriceLockup.jsx +237 -0
- package/src/PriceLockup/index.js +3 -0
- package/src/PriceLockup/utils/renderFootnoteContent.jsx +77 -0
- package/src/PriceLockup/utils/renderFootnoteLinks.jsx +38 -0
- package/src/PriceLockup/utils/renderPrice.jsx +201 -0
- package/src/PriceLockup/utils/renderTypography.jsx +13 -0
- package/src/ProductCard/ProductCard.jsx +199 -0
- package/src/ProductCard/dictionary.js +38 -0
- package/src/ProductCard/index.js +3 -0
- package/src/ProductCardGroup/ProductCardGroup.jsx +75 -0
- package/src/ProductCardGroup/index.js +3 -0
- package/src/Progress/Progress.jsx +8 -5
- package/src/Progress/ProgressBar.jsx +6 -4
- package/src/Progress/ProgressBarBackground.jsx +6 -4
- package/src/QuickLinks/QuickLinks.jsx +11 -2
- package/src/QuickLinks/QuickLinksCard.jsx +9 -3
- package/src/QuickLinks/QuickLinksItem.jsx +2 -2
- package/src/QuickLinksFeature/QuickLinksFeature.jsx +31 -27
- package/src/QuickLinksFeature/QuickLinksFeatureItem.jsx +43 -36
- package/src/Radio/Radio.jsx +24 -6
- package/src/Radio/RadioButton.jsx +58 -6
- package/src/Radio/RadioGroup.jsx +27 -5
- package/src/Radio/RadioInput.jsx +15 -14
- package/src/RadioCard/RadioCard.jsx +2 -2
- package/src/RadioCard/RadioCardGroup.jsx +25 -4
- package/src/Responsive/Responsive.jsx +43 -13
- package/src/Responsive/ResponsiveProp.jsx +33 -0
- package/src/Responsive/ResponsiveWithMediaQueryStyleSheet.jsx +67 -0
- package/src/Search/Search.jsx +10 -5
- package/src/Select/Group.jsx +12 -3
- package/src/Select/Group.native.jsx +3 -0
- package/src/Select/Item.jsx +10 -1
- package/src/Select/Picker.jsx +32 -5
- package/src/Select/Picker.native.jsx +3 -3
- package/src/Select/Select.jsx +27 -10
- package/src/SideNav/Item.jsx +12 -7
- package/src/SideNav/ItemContent.jsx +14 -6
- package/src/SideNav/ItemsGroup.jsx +15 -4
- package/src/SideNav/SideNav.jsx +11 -3
- package/src/Skeleton/Skeleton.jsx +19 -7
- package/src/Skeleton/skeleton.constant.js +0 -1
- package/src/Skeleton/skeletonWebAnimation.js +11 -11
- package/src/Skeleton/useSkeletonNativeAnimation.js +5 -4
- package/src/SkipLink/SkipLink.jsx +14 -14
- package/src/Spacer/Spacer.jsx +2 -2
- package/src/StackView/StackView.jsx +5 -4
- package/src/StackView/StackWrap.jsx +3 -3
- package/src/StackView/StackWrapBox.jsx +2 -2
- package/src/StackView/StackWrapGap.jsx +2 -2
- package/src/StackView/getStackedContent.jsx +16 -7
- package/src/Status/Status.jsx +153 -0
- package/src/Status/index.js +3 -0
- package/src/StepTracker/Step.jsx +102 -70
- package/src/StepTracker/StepTracker.jsx +28 -6
- package/src/StepTracker/dictionary.js +24 -4
- package/src/TabBar/TabBar.jsx +123 -0
- package/src/TabBar/TabBarItem.jsx +149 -0
- package/src/TabBar/index.js +3 -0
- package/src/Tabs/Tabs.jsx +37 -5
- package/src/Tabs/TabsItem.jsx +19 -7
- package/src/Tags/Tags.jsx +7 -3
- package/src/TextInput/TextArea.jsx +3 -3
- package/src/TextInput/TextInput.jsx +11 -7
- package/src/TextInput/TextInputBase.jsx +145 -29
- package/src/TextInput/dictionary.js +6 -2
- package/src/TextInput/propTypes.js +4 -0
- package/src/ThemeProvider/ThemeProvider.jsx +17 -7
- package/src/ThemeProvider/index.js +1 -0
- package/src/ThemeProvider/useResponsiveThemeTokens.js +85 -0
- package/src/ThemeProvider/utils/styles.js +34 -2
- package/src/Timeline/Timeline.jsx +10 -6
- package/src/ToggleSwitch/ToggleSwitch.jsx +28 -11
- package/src/ToggleSwitch/ToggleSwitchGroup.jsx +2 -2
- package/src/Tooltip/Tooltip.jsx +38 -9
- package/src/Tooltip/Tooltip.native.jsx +82 -20
- package/src/Tooltip/getTooltipPosition.js +12 -13
- package/src/Tooltip/shared.js +17 -0
- package/src/TooltipButton/TooltipButton.jsx +34 -8
- package/src/Typography/Typography.jsx +173 -29
- package/src/Validator/Validator.jsx +230 -0
- package/src/Validator/index.js +3 -0
- package/src/ViewportProvider/ViewportProvider.jsx +2 -2
- package/src/index.js +31 -12
- package/src/server.js +4 -0
- package/src/utils/BaseView/BaseView.jsx +2 -2
- package/src/utils/a11y/semantics.js +7 -14
- package/src/utils/animation/useVerticalExpandAnimation.js +3 -3
- package/src/utils/children.jsx +4 -4
- package/src/utils/convertFromMegaByteToByte.js +11 -0
- package/src/utils/formatImageSource.js +29 -0
- package/src/utils/htmlAttrs.js +29 -0
- package/src/utils/index.js +6 -1
- package/src/utils/props/handlerProps.js +5 -1
- package/src/utils/props/inputSupportsProps.js +21 -1
- package/src/utils/props/textInputProps.js +1 -0
- package/src/utils/props/tokens.js +4 -2
- package/src/utils/ssr-media-query/create-stylesheet/create-stylesheet-mobile.js +41 -0
- package/src/utils/ssr-media-query/create-stylesheet/index.android.js +3 -0
- package/src/utils/ssr-media-query/create-stylesheet/index.ios.js +3 -0
- package/src/utils/ssr-media-query/create-stylesheet/index.js +35 -0
- package/src/utils/ssr-media-query/hash.js +16 -0
- package/src/utils/ssr-media-query/index.js +8 -0
- package/src/utils/ssr-media-query/utils/common.js +38 -0
- package/src/utils/ssr-media-query/utils/create-declaration-block.js +21 -0
- package/src/utils/ssr-media-query/utils/create-media-query-styles.js +46 -0
- package/src/utils/ssr-media-query/utils/hyphenate-style-name.js +15 -0
- package/src/utils/ssr-media-query/utils/inject.js +43 -0
- package/src/utils/ssr.jsx +3 -1
- package/src/utils/transformGradient.js +17 -0
- package/src/utils/useOverlaidPosition.js +224 -0
- package/src/utils/withLinkRouter.jsx +3 -3
- package/types/Badge.d.ts +28 -0
- package/types/Box.d.ts +52 -0
- package/types/Checkbox.d.ts +47 -0
- package/types/CheckboxCardGroup.d.ts +72 -0
- package/types/ChevronLink.d.ts +47 -0
- package/types/Common.d.ts +106 -0
- package/types/Divider.d.ts +19 -0
- package/types/ExpandCollapse.d.ts +65 -0
- package/types/FileUpload.d.ts +40 -0
- package/types/HorizontalScrollButton.d.ts +16 -0
- package/types/Icon.d.ts +21 -0
- package/types/Link.d.ts +48 -0
- package/types/List.d.ts +48 -0
- package/types/Portal.d.ts +5 -0
- package/types/Search.d.ts +38 -0
- package/types/Select.d.ts +57 -0
- package/types/Spacer.d.ts +5 -0
- package/types/StackView.d.ts +28 -0
- package/types/Tabs.d.ts +46 -0
- package/types/TextButton.d.ts +11 -0
- package/types/ToggleSwitch.d.ts +54 -0
- package/types/ToolTip.d.ts +40 -0
- package/types/Typography.d.ts +40 -0
- package/types/index.d.ts +78 -0
- package/.eslintrc.js +0 -9
- package/__tests17__/A11yText/A11yText.test.jsx +0 -34
- package/__tests17__/ActivityIndicator/ActivityIndicator.test.jsx +0 -68
- package/__tests17__/ActivityIndicator/__snapshots__/ActivityIndicator.test.jsx.snap +0 -299
- package/__tests17__/Box/Box.test.jsx +0 -111
- package/__tests17__/Button/Button.test.jsx +0 -86
- package/__tests17__/Button/ButtonBase.test.jsx +0 -82
- package/__tests17__/Button/ButtonGroup.test.jsx +0 -347
- package/__tests17__/Button/ButtonLink.test.jsx +0 -61
- package/__tests17__/Card/Card.test.jsx +0 -63
- package/__tests17__/Carousel/Carousel.test.jsx +0 -128
- package/__tests17__/Carousel/CarouselTabs.test.jsx +0 -142
- package/__tests17__/Checkbox/Checkbox.test.jsx +0 -94
- package/__tests17__/Checkbox/CheckboxGroup.test.jsx +0 -246
- package/__tests17__/Divider/Divider.test.jsx +0 -91
- package/__tests17__/ExpandCollapse/ExpandCollapse.test.jsx +0 -109
- package/__tests17__/Feedback/Feedback.test.jsx +0 -42
- package/__tests17__/FlexGrid/Col.test.jsx +0 -261
- package/__tests17__/FlexGrid/FlexGrid.test.jsx +0 -136
- package/__tests17__/FlexGrid/Row.test.jsx +0 -273
- package/__tests17__/HorizontalScroll/HorizontalScroll.test.jsx +0 -165
- package/__tests17__/Icon/Icon.test.jsx +0 -61
- package/__tests17__/IconButton/IconButton.test.jsx +0 -52
- package/__tests17__/InputLabel/InputLabel.test.jsx +0 -28
- package/__tests17__/InputLabel/__snapshots__/InputLabel.test.jsx.snap +0 -3
- package/__tests17__/InputSupports/InputSupports.test.jsx +0 -60
- package/__tests17__/Link/Link.test.jsx +0 -63
- package/__tests17__/Link/TextButton.test.jsx +0 -35
- package/__tests17__/List/List.test.jsx +0 -82
- package/__tests17__/Modal/Modal.test.jsx +0 -47
- package/__tests17__/Notification/Notification.test.jsx +0 -20
- package/__tests17__/Pagination/Pagination.test.jsx +0 -160
- package/__tests17__/Progress/Progress.test.jsx +0 -79
- package/__tests17__/Radio/Radio.test.jsx +0 -87
- package/__tests17__/Radio/RadioGroup.test.jsx +0 -220
- package/__tests17__/RadioCard/RadioCard.test.jsx +0 -87
- package/__tests17__/RadioCard/RadioCardGroup.test.jsx +0 -246
- package/__tests17__/Search/Search.test.jsx +0 -87
- package/__tests17__/Select/Select.test.jsx +0 -94
- package/__tests17__/SideNav/SideNav.test.jsx +0 -110
- package/__tests17__/Skeleton/Skeleton.test.jsx +0 -61
- package/__tests17__/SkipLink/SkipLink.test.jsx +0 -61
- package/__tests17__/Spacer/Spacer.test.jsx +0 -63
- package/__tests17__/StackView/StackView.test.jsx +0 -211
- package/__tests17__/StackView/StackWrap.test.jsx +0 -47
- package/__tests17__/StackView/getStackedContent.test.jsx +0 -295
- package/__tests17__/StepTracker/StepTracker.test.jsx +0 -108
- package/__tests17__/Tabs/Tabs.test.jsx +0 -49
- package/__tests17__/Tags/Tags.test.jsx +0 -327
- package/__tests17__/TextInput/TextArea.test.jsx +0 -35
- package/__tests17__/TextInput/TextInputBase.test.jsx +0 -125
- package/__tests17__/ThemeProvider/ThemeProvider.test.jsx +0 -82
- package/__tests17__/ThemeProvider/useThemeTokens.test.jsx +0 -514
- package/__tests17__/ThemeProvider/utils/theme-tokens.test.js +0 -41
- package/__tests17__/ToggleSwitch/ToggleSwitch.test.jsx +0 -82
- package/__tests17__/ToggleSwitch/ToggleSwitchGroup.test.jsx +0 -192
- package/__tests17__/Tooltip/Tooltip.test.jsx +0 -65
- package/__tests17__/Tooltip/getTooltipPosition.test.js +0 -79
- package/__tests17__/Typography/typography.test.jsx +0 -90
- package/__tests17__/utils/children.test.jsx +0 -128
- package/__tests17__/utils/containUniqueFields.test.js +0 -25
- package/__tests17__/utils/input.test.js +0 -375
- package/__tests17__/utils/props.test.js +0 -36
- package/__tests17__/utils/semantics.test.jsx +0 -34
- package/__tests17__/utils/useCopy.test.js +0 -42
- package/__tests17__/utils/useResponsiveProp.test.jsx +0 -202
- package/__tests17__/utils/useSpacingScale.test.jsx +0 -273
- package/__tests17__/utils/useUniqueId.test.js +0 -31
- package/component-docs.json +0 -13646
- package/lib-module/A11yInfoProvider/index.js +0 -73
- package/lib-module/A11yText/index.js +0 -56
- package/lib-module/ActivityIndicator/Spinner.js +0 -79
- package/lib-module/ActivityIndicator/Spinner.native.js +0 -146
- package/lib-module/ActivityIndicator/index.js +0 -48
- package/lib-module/ActivityIndicator/shared.js +0 -13
- package/lib-module/BaseProvider/HydrationContext.js +0 -51
- package/lib-module/BaseProvider/index.js +0 -41
- package/lib-module/Box/Box.js +0 -259
- package/lib-module/Box/index.js +0 -2
- package/lib-module/Button/Button.js +0 -26
- package/lib-module/Button/ButtonBase.js +0 -309
- package/lib-module/Button/ButtonDropdown.js +0 -181
- package/lib-module/Button/ButtonGroup.js +0 -264
- package/lib-module/Button/ButtonLink.js +0 -40
- package/lib-module/Button/index.js +0 -5
- package/lib-module/Button/propTypes.js +0 -53
- package/lib-module/Card/Card.js +0 -85
- package/lib-module/Card/CardBase.js +0 -66
- package/lib-module/Card/PressableCardBase.js +0 -114
- package/lib-module/Card/index.js +0 -4
- package/lib-module/Carousel/Carousel.js +0 -690
- package/lib-module/Carousel/CarouselContext.js +0 -56
- package/lib-module/Carousel/CarouselFirstFocus/CarouselFirstFocus.js +0 -51
- package/lib-module/Carousel/CarouselItem/CarouselItem.js +0 -81
- package/lib-module/Carousel/CarouselItem/index.js +0 -2
- package/lib-module/Carousel/CarouselStepTracker/CarouselStepTracker.js +0 -50
- package/lib-module/Carousel/CarouselStepTracker/index.js +0 -2
- package/lib-module/Carousel/CarouselTabs/CarouselTabs.js +0 -51
- package/lib-module/Carousel/CarouselTabs/CarouselTabsPanel.js +0 -84
- package/lib-module/Carousel/CarouselTabs/CarouselTabsPanelItem.js +0 -126
- package/lib-module/Carousel/CarouselTabs/index.js +0 -2
- package/lib-module/Carousel/CarouselThumbnail.js +0 -85
- package/lib-module/Carousel/CarouselThumbnailNavigation.js +0 -66
- package/lib-module/Carousel/dictionary.js +0 -18
- package/lib-module/Carousel/index.js +0 -3
- package/lib-module/Checkbox/Checkbox.js +0 -355
- package/lib-module/Checkbox/CheckboxGroup.js +0 -242
- package/lib-module/Checkbox/CheckboxInput.js +0 -60
- package/lib-module/Checkbox/CheckboxInput.native.js +0 -6
- package/lib-module/Checkbox/index.js +0 -3
- package/lib-module/Divider/Divider.js +0 -127
- package/lib-module/Divider/index.js +0 -2
- package/lib-module/ExpandCollapse/Accordion.js +0 -15
- package/lib-module/ExpandCollapse/Control.js +0 -139
- package/lib-module/ExpandCollapse/ExpandCollapse.js +0 -95
- package/lib-module/ExpandCollapse/Panel.js +0 -160
- package/lib-module/ExpandCollapse/index.js +0 -7
- package/lib-module/Feedback/Feedback.js +0 -165
- package/lib-module/Feedback/index.js +0 -2
- package/lib-module/Fieldset/Fieldset.js +0 -182
- package/lib-module/Fieldset/FieldsetContainer.js +0 -38
- package/lib-module/Fieldset/FieldsetContainer.native.js +0 -23
- package/lib-module/Fieldset/Legend.js +0 -24
- package/lib-module/Fieldset/Legend.native.js +0 -31
- package/lib-module/Fieldset/cssReset.js +0 -14
- package/lib-module/Fieldset/index.js +0 -2
- package/lib-module/FlexGrid/Col/Col.js +0 -275
- package/lib-module/FlexGrid/Col/index.js +0 -2
- package/lib-module/FlexGrid/FlexGrid.js +0 -149
- package/lib-module/FlexGrid/Row/Row.js +0 -184
- package/lib-module/FlexGrid/Row/index.js +0 -2
- package/lib-module/FlexGrid/helpers/index.js +0 -18
- package/lib-module/FlexGrid/index.js +0 -2
- package/lib-module/FlexGrid/providers/GutterContext.js +0 -3
- package/lib-module/HorizontalScroll/HorizontalScroll.js +0 -175
- package/lib-module/HorizontalScroll/HorizontalScrollButton.js +0 -81
- package/lib-module/HorizontalScroll/ScrollViewEnd.js +0 -48
- package/lib-module/HorizontalScroll/ScrollViewEnd.native.js +0 -27
- package/lib-module/HorizontalScroll/dictionary.js +0 -11
- package/lib-module/HorizontalScroll/index.js +0 -11
- package/lib-module/HorizontalScroll/itemPositions.js +0 -112
- package/lib-module/Icon/Icon.js +0 -62
- package/lib-module/Icon/IconText.js +0 -88
- package/lib-module/Icon/index.js +0 -4
- package/lib-module/IconButton/IconButton.js +0 -132
- package/lib-module/IconButton/index.js +0 -2
- package/lib-module/InputLabel/InputLabel.js +0 -154
- package/lib-module/InputLabel/LabelContent.js +0 -27
- package/lib-module/InputLabel/LabelContent.native.js +0 -19
- package/lib-module/InputLabel/index.js +0 -2
- package/lib-module/InputSupports/InputSupports.js +0 -103
- package/lib-module/InputSupports/index.js +0 -2
- package/lib-module/InputSupports/useInputSupports.js +0 -33
- package/lib-module/Link/ChevronLink.js +0 -52
- package/lib-module/Link/InlinePressable.js +0 -44
- package/lib-module/Link/InlinePressable.native.js +0 -89
- package/lib-module/Link/Link.js +0 -28
- package/lib-module/Link/LinkBase.js +0 -244
- package/lib-module/Link/TextButton.js +0 -35
- package/lib-module/Link/index.js +0 -5
- package/lib-module/List/List.js +0 -66
- package/lib-module/List/ListItem.js +0 -38
- package/lib-module/List/ListItemBase.js +0 -139
- package/lib-module/List/ListItemContent.js +0 -66
- package/lib-module/List/ListItemMark.js +0 -143
- package/lib-module/List/PressableListItemBase.js +0 -114
- package/lib-module/List/index.js +0 -5
- package/lib-module/Modal/Modal.js +0 -225
- package/lib-module/Modal/dictionary.js +0 -9
- package/lib-module/Modal/index.js +0 -2
- package/lib-module/MultiSelectFilter/ModalOverlay.js +0 -112
- package/lib-module/MultiSelectFilter/MultiSelectFilter.js +0 -286
- package/lib-module/MultiSelectFilter/dictionary.js +0 -12
- package/lib-module/MultiSelectFilter/index.js +0 -2
- package/lib-module/Notification/Notification.js +0 -230
- package/lib-module/Notification/dictionary.js +0 -8
- package/lib-module/Notification/index.js +0 -2
- package/lib-module/Pagination/PageButton.js +0 -66
- package/lib-module/Pagination/Pagination.js +0 -159
- package/lib-module/Pagination/SideButton.js +0 -118
- package/lib-module/Pagination/dictionary.js +0 -18
- package/lib-module/Pagination/index.js +0 -2
- package/lib-module/Pagination/usePagination.js +0 -73
- package/lib-module/Progress/Progress.js +0 -89
- package/lib-module/Progress/ProgressBar.js +0 -138
- package/lib-module/Progress/ProgressBarBackground.js +0 -42
- package/lib-module/Progress/index.js +0 -4
- package/lib-module/QuickLinks/QuickLinks.js +0 -71
- package/lib-module/QuickLinks/QuickLinksCard.js +0 -33
- package/lib-module/QuickLinks/QuickLinksItem.js +0 -50
- package/lib-module/QuickLinks/index.js +0 -4
- package/lib-module/QuickLinksFeature/QuickLinksFeature.js +0 -69
- package/lib-module/QuickLinksFeature/QuickLinksFeatureItem.js +0 -130
- package/lib-module/QuickLinksFeature/index.js +0 -4
- package/lib-module/Radio/Radio.js +0 -288
- package/lib-module/Radio/RadioButton.js +0 -138
- package/lib-module/Radio/RadioGroup.js +0 -255
- package/lib-module/Radio/RadioInput.js +0 -62
- package/lib-module/Radio/RadioInput.native.js +0 -6
- package/lib-module/Radio/index.js +0 -3
- package/lib-module/RadioCard/RadioCardGroup.js +0 -259
- package/lib-module/RadioCard/index.js +0 -3
- package/lib-module/Responsive/index.js +0 -2
- package/lib-module/Search/Search.js +0 -241
- package/lib-module/Search/dictionary.js +0 -12
- package/lib-module/Search/index.js +0 -2
- package/lib-module/Select/Group.js +0 -21
- package/lib-module/Select/Group.native.js +0 -15
- package/lib-module/Select/Item.js +0 -20
- package/lib-module/Select/Item.native.js +0 -3
- package/lib-module/Select/Picker.js +0 -68
- package/lib-module/Select/Picker.native.js +0 -122
- package/lib-module/Select/Select.js +0 -347
- package/lib-module/Select/constants.js +0 -5
- package/lib-module/Select/index.js +0 -6
- package/lib-module/SideNav/Item.js +0 -145
- package/lib-module/SideNav/ItemContent.js +0 -48
- package/lib-module/SideNav/ItemsGroup.js +0 -117
- package/lib-module/SideNav/SideNav.js +0 -136
- package/lib-module/SideNav/index.js +0 -1
- package/lib-module/Skeleton/Skeleton.js +0 -182
- package/lib-module/Skeleton/index.js +0 -2
- package/lib-module/Skeleton/skeleton.constant.js +0 -3
- package/lib-module/Skeleton/skeletonWebAnimation.js +0 -18
- package/lib-module/Skeleton/useSkeletonNativeAnimation.js +0 -25
- package/lib-module/SkipLink/SkipLink.js +0 -188
- package/lib-module/SkipLink/index.js +0 -2
- package/lib-module/Spacer/Spacer.js +0 -98
- package/lib-module/Spacer/index.js +0 -2
- package/lib-module/StackView/StackView.js +0 -127
- package/lib-module/StackView/StackWrap.js +0 -53
- package/lib-module/StackView/StackWrap.native.js +0 -3
- package/lib-module/StackView/StackWrapBox.js +0 -117
- package/lib-module/StackView/StackWrapGap.js +0 -61
- package/lib-module/StackView/common.js +0 -35
- package/lib-module/StackView/getStackedContent.js +0 -124
- package/lib-module/StackView/index.js +0 -5
- package/lib-module/StepTracker/Step.js +0 -253
- package/lib-module/StepTracker/StepTracker.js +0 -191
- package/lib-module/StepTracker/dictionary.js +0 -10
- package/lib-module/StepTracker/index.js +0 -2
- package/lib-module/Tabs/Tabs.js +0 -152
- package/lib-module/Tabs/TabsItem.js +0 -228
- package/lib-module/Tabs/index.js +0 -2
- package/lib-module/Tags/Tags.js +0 -257
- package/lib-module/Tags/index.js +0 -2
- package/lib-module/TextInput/TextArea.js +0 -94
- package/lib-module/TextInput/TextInput.js +0 -73
- package/lib-module/TextInput/TextInputBase.js +0 -333
- package/lib-module/TextInput/dictionary.js +0 -8
- package/lib-module/TextInput/index.js +0 -3
- package/lib-module/TextInput/propTypes.js +0 -33
- package/lib-module/ThemeProvider/ThemeProvider.js +0 -74
- package/lib-module/ThemeProvider/index.js +0 -6
- package/lib-module/ThemeProvider/useSetTheme.js +0 -25
- package/lib-module/ThemeProvider/useTheme.js +0 -14
- package/lib-module/ThemeProvider/useThemeTokens.js +0 -110
- package/lib-module/ThemeProvider/utils/index.js +0 -2
- package/lib-module/ThemeProvider/utils/styles.js +0 -188
- package/lib-module/ThemeProvider/utils/theme-tokens.js +0 -163
- package/lib-module/Timeline/Timeline.js +0 -174
- package/lib-module/Timeline/index.js +0 -2
- package/lib-module/ToggleSwitch/ToggleSwitch.js +0 -255
- package/lib-module/ToggleSwitch/ToggleSwitchGroup.js +0 -227
- package/lib-module/ToggleSwitch/index.js +0 -3
- package/lib-module/Tooltip/Backdrop.js +0 -45
- package/lib-module/Tooltip/Backdrop.native.js +0 -44
- package/lib-module/Tooltip/Tooltip.js +0 -278
- package/lib-module/Tooltip/Tooltip.native.js +0 -326
- package/lib-module/Tooltip/dictionary.js +0 -8
- package/lib-module/Tooltip/getTooltipPosition.js +0 -175
- package/lib-module/Tooltip/index.js +0 -5
- package/lib-module/Tooltip/shared.js +0 -27
- package/lib-module/TooltipButton/TooltipButton.js +0 -78
- package/lib-module/TooltipButton/index.js +0 -2
- package/lib-module/Typography/Typography.js +0 -154
- package/lib-module/Typography/index.js +0 -2
- package/lib-module/ViewportProvider/ViewportProvider.js +0 -29
- package/lib-module/ViewportProvider/index.js +0 -3
- package/lib-module/ViewportProvider/useViewport.js +0 -3
- package/lib-module/ViewportProvider/useViewportListener.js +0 -39
- package/lib-module/index.js +0 -58
- package/lib-module/utils/BaseView/BaseView.js +0 -43
- package/lib-module/utils/BaseView/BaseView.native.js +0 -6
- package/lib-module/utils/BaseView/index.js +0 -2
- package/lib-module/utils/a11y/index.js +0 -2
- package/lib-module/utils/a11y/semantics.js +0 -157
- package/lib-module/utils/a11y/textSize.js +0 -36
- package/lib-module/utils/animation/index.js +0 -2
- package/lib-module/utils/animation/useVerticalExpandAnimation.js +0 -89
- package/lib-module/utils/children.js +0 -119
- package/lib-module/utils/containUniqueFields.js +0 -26
- package/lib-module/utils/floating-ui/index.js +0 -1
- package/lib-module/utils/floating-ui/index.native.js +0 -1
- package/lib-module/utils/hasOwnProperty.js +0 -11
- package/lib-module/utils/index.js +0 -19
- package/lib-module/utils/info/index.js +0 -7
- package/lib-module/utils/info/platform/index.js +0 -11
- package/lib-module/utils/info/platform/platform.android.js +0 -1
- package/lib-module/utils/info/platform/platform.ios.js +0 -1
- package/lib-module/utils/info/platform/platform.js +0 -1
- package/lib-module/utils/info/platform/platform.native.js +0 -4
- package/lib-module/utils/info/versions.js +0 -5
- package/lib-module/utils/input.js +0 -187
- package/lib-module/utils/pressability.js +0 -111
- package/lib-module/utils/props/a11yProps.js +0 -308
- package/lib-module/utils/props/clickProps.js +0 -26
- package/lib-module/utils/props/componentPropType.js +0 -63
- package/lib-module/utils/props/copyPropTypes.js +0 -2
- package/lib-module/utils/props/getPropSelector.js +0 -48
- package/lib-module/utils/props/handlerProps.js +0 -117
- package/lib-module/utils/props/hrefAttrsProp.js +0 -33
- package/lib-module/utils/props/index.js +0 -19
- package/lib-module/utils/props/inputSupportsProps.js +0 -62
- package/lib-module/utils/props/linkProps.js +0 -44
- package/lib-module/utils/props/paddingProp.js +0 -9
- package/lib-module/utils/props/pressProps.js +0 -42
- package/lib-module/utils/props/rectProp.js +0 -9
- package/lib-module/utils/props/responsiveProps.js +0 -30
- package/lib-module/utils/props/selectSystemProps.js +0 -24
- package/lib-module/utils/props/spacingProps.js +0 -56
- package/lib-module/utils/props/textInputProps.js +0 -201
- package/lib-module/utils/props/textProps.js +0 -59
- package/lib-module/utils/props/tokens.js +0 -133
- package/lib-module/utils/props/variantProp.js +0 -18
- package/lib-module/utils/props/viewProps.js +0 -22
- package/lib-module/utils/ssr.js +0 -144
- package/lib-module/utils/useCopy.js +0 -44
- package/lib-module/utils/useHash.js +0 -45
- package/lib-module/utils/useHash.native.js +0 -7
- package/lib-module/utils/useResponsiveProp.js +0 -46
- package/lib-module/utils/useSafeLayoutEffect.js +0 -30
- package/lib-module/utils/useScrollBlocking.js +0 -58
- package/lib-module/utils/useScrollBlocking.native.js +0 -2
- package/lib-module/utils/useSpacingScale.js +0 -125
- package/lib-module/utils/useUniqueId.js +0 -13
- package/lib-module/utils/withLinkRouter.js +0 -81
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef } from 'react';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
|
-
import StyleSheet from "react-native-web/dist/exports/StyleSheet";
|
|
4
|
-
import View from "react-native-web/dist/exports/View";
|
|
5
|
-
import { a11yProps, selectSystemProps, spacingProps, useSpacingScale, viewProps } from '../utils';
|
|
6
|
-
/**
|
|
7
|
-
* @typedef {import('../utils/props/spacingProps.js').SpacingValue} SpacingValue
|
|
8
|
-
* @typedef {import('../utils/props/spacingProps.js').SpacingObject} SpacingObject
|
|
9
|
-
*/
|
|
10
|
-
|
|
11
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
|
-
const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
|
|
13
|
-
|
|
14
|
-
const selectSizeStyle = (size, direction) => ({
|
|
15
|
-
// Only apply space in one direction at a time, else large spacers will increase the
|
|
16
|
-
// 'across' size of the parent and mess up siblings with styles like `alignItems: stretch`.
|
|
17
|
-
[direction === 'row' ? 'width' : 'height']: size
|
|
18
|
-
});
|
|
19
|
-
/**
|
|
20
|
-
* An empty element used to create a gap between components that is sized according to the theme spacing scale,
|
|
21
|
-
* passing its `space` prop ({@link SpacingValue}) to `useSpacingScale`.
|
|
22
|
-
*
|
|
23
|
-
* ## Simple spacing
|
|
24
|
-
*
|
|
25
|
-
* For most simple uses, pass a number to Spacer's `space` prop referring to an index in the theme's
|
|
26
|
-
* spacing scale. For example, for a spacer of the theme's smallest non-zero spacing size:
|
|
27
|
-
*
|
|
28
|
-
* ```jsx
|
|
29
|
-
* <Spacer space={1} />
|
|
30
|
-
* ```
|
|
31
|
-
*
|
|
32
|
-
* ## Responsive spacing
|
|
33
|
-
*
|
|
34
|
-
* Different spacing scale sizes may be chosen for different viewports by passing `space` a {@link SpacingObject}
|
|
35
|
-
* using keys for the viewports at and above which certain spacing indexes should apply.
|
|
36
|
-
*
|
|
37
|
-
* This can be useful when a Spacer is inside a layout with a shape that changes between viewports.
|
|
38
|
-
*
|
|
39
|
-
* For example, a spacer might need no width below 'md' viewport because the items it separates will be on separate lines,
|
|
40
|
-
* but may need a visible size above that viewport, and a wider size at the highest viewport:
|
|
41
|
-
*
|
|
42
|
-
* ```jsx
|
|
43
|
-
* <Spacer space={{ xs: 0, md: 2, xl: 3 }} />
|
|
44
|
-
* ```
|
|
45
|
-
*
|
|
46
|
-
* Note that themes may also define viewport-specific behaviour for indexes on the spacing scale. These viewport
|
|
47
|
-
* props should only be used where necessary to achieve a certain responsive layoutm and shouldn't be used to replace
|
|
48
|
-
* or deviate from responsive spacing behaviour in a theme that is intended to apply universally.
|
|
49
|
-
*
|
|
50
|
-
* ## More options
|
|
51
|
-
*
|
|
52
|
-
* See `useSpacingScale` hook for more options that may be used with the `space` prop.
|
|
53
|
-
*
|
|
54
|
-
* ## Accessibility
|
|
55
|
-
*
|
|
56
|
-
* Spacer has no content and is ignored by tools such as screen readers. Use `Divider` for
|
|
57
|
-
* separations between elements that may be treated as semantically meaningful on web.
|
|
58
|
-
*/
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
const Spacer = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
62
|
-
let {
|
|
63
|
-
space = 1,
|
|
64
|
-
direction = 'column',
|
|
65
|
-
...rest
|
|
66
|
-
} = _ref;
|
|
67
|
-
const size = useSpacingScale(space);
|
|
68
|
-
const sizeStyle = selectSizeStyle(size, direction);
|
|
69
|
-
return /*#__PURE__*/_jsx(View, {
|
|
70
|
-
ref: ref,
|
|
71
|
-
style: [staticStyles.stretch, sizeStyle],
|
|
72
|
-
...selectProps(rest)
|
|
73
|
-
});
|
|
74
|
-
});
|
|
75
|
-
Spacer.displayName = 'Spacer';
|
|
76
|
-
Spacer.propTypes = { ...selectedSystemPropTypes,
|
|
77
|
-
|
|
78
|
-
/**
|
|
79
|
-
* The size of the spacer according to the theme's spacing scale.
|
|
80
|
-
* Either a number corresponding to a position on the theme's spacing scale (1 is smallest, 2 is second smallest, etc),
|
|
81
|
-
* or, a SpacingObject with viewport keys and options (see `useSpacingScale` for details).
|
|
82
|
-
*/
|
|
83
|
-
space: spacingProps.types.spacingValue,
|
|
84
|
-
|
|
85
|
-
/**
|
|
86
|
-
* The spacer applies space in only one direction, which is controlled by the `direction` prop:
|
|
87
|
-
*
|
|
88
|
-
* - `'column'` (default) applies space vertically; has a fixed height and not width.
|
|
89
|
-
* - `'row'` applies space horizontally; has a fixed width and not height.
|
|
90
|
-
*/
|
|
91
|
-
direction: PropTypes.oneOf(['column', 'row'])
|
|
92
|
-
};
|
|
93
|
-
const staticStyles = StyleSheet.create({
|
|
94
|
-
stretch: {
|
|
95
|
-
alignSelf: 'stretch'
|
|
96
|
-
}
|
|
97
|
-
});
|
|
98
|
-
export default Spacer;
|
|
@@ -1,127 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef } from 'react';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
|
-
import View from "react-native-web/dist/exports/View";
|
|
4
|
-
import Divider from '../Divider';
|
|
5
|
-
import { a11yProps, getA11yPropsFromHtmlTag, getTokensPropType, layoutTags, responsiveProps, selectSystemProps, spacingProps, useResponsiveProp, variantProp, viewProps } from '../utils';
|
|
6
|
-
import { useThemeTokens } from '../ThemeProvider';
|
|
7
|
-
import { useViewport } from '../ViewportProvider';
|
|
8
|
-
import getStackedContent from './getStackedContent';
|
|
9
|
-
import { staticStyles, selectFlexStyles } from './common';
|
|
10
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
|
-
const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
|
|
12
|
-
/**
|
|
13
|
-
* StackView evenly spaces its children, by default placing `Spacer` components between them.
|
|
14
|
-
*
|
|
15
|
-
* ## Spacing
|
|
16
|
-
*
|
|
17
|
-
* StackView takes the same spacing props as `Spacer` and passes them directly to the layout components
|
|
18
|
-
* it uses for spacing.
|
|
19
|
-
*
|
|
20
|
-
* ## Direction
|
|
21
|
-
*
|
|
22
|
-
* Use `direction` to control how the children are stacked:
|
|
23
|
-
*
|
|
24
|
-
* - `'column'` (default) stacks and spaces the children vertically.
|
|
25
|
-
* - `'row'` stacks and spaces the children horizontally.
|
|
26
|
-
* - `'column-reverse'` acts the same as `'column'`, but reverses the direction.
|
|
27
|
-
* - `'row-reverse'` acts the same as `'row'`, but reverses the direction.
|
|
28
|
-
*
|
|
29
|
-
* `direction` is an optionally responsive prop and may be an object keyed by viewports. For example,
|
|
30
|
-
* `{ xs: 'column', md: 'row' } stacks as a column on `xs` and `sm` viewports and a row at 'md' and above.
|
|
31
|
-
*
|
|
32
|
-
* ## Theming, alignment and justification
|
|
33
|
-
*
|
|
34
|
-
* `StackView` is a pure layout component and has no theme styles beyond a small set of layout styles
|
|
35
|
-
* (`alignItems`, `justifyContent`, `flexGrow`) which may be set using the `tokens` prop. If the
|
|
36
|
-
* tokens prop is a function it will recieve the current viewport.
|
|
37
|
-
*
|
|
38
|
-
* All other styling such as borders, background colours, padding etc should be applied by wrapping
|
|
39
|
-
* the `StackView` in other components. For example, a `StackView` may be the child of a `Card`.
|
|
40
|
-
*
|
|
41
|
-
* ## Separator options
|
|
42
|
-
*
|
|
43
|
-
* By default, StackView inserts a `<Spacer>` component between each rendered child.
|
|
44
|
-
*
|
|
45
|
-
* With the `divider` prop, it instead renders a `Divider` instead of a `Spacer`. The gap between
|
|
46
|
-
* items will be double what it would be without this prop plus the width of the divider.
|
|
47
|
-
*
|
|
48
|
-
* ## Accessibility
|
|
49
|
-
*
|
|
50
|
-
* `StackView` may take any React Native accessibility props and applies them to the outer `View`.
|
|
51
|
-
* It applies no accessibility props of its own, unless `divider` prop is passed (`Divider` has a
|
|
52
|
-
* semantic role but only on web, not within native apps).
|
|
53
|
-
*/
|
|
54
|
-
|
|
55
|
-
const StackView = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
56
|
-
let {
|
|
57
|
-
space = 1,
|
|
58
|
-
divider,
|
|
59
|
-
direction: directionProp = 'column',
|
|
60
|
-
children,
|
|
61
|
-
variant,
|
|
62
|
-
tokens,
|
|
63
|
-
tag,
|
|
64
|
-
accessibilityRole,
|
|
65
|
-
...rest
|
|
66
|
-
} = _ref;
|
|
67
|
-
const viewport = useViewport();
|
|
68
|
-
const direction = useResponsiveProp(directionProp, 'column');
|
|
69
|
-
const selectedProps = selectProps({
|
|
70
|
-
accessibilityRole,
|
|
71
|
-
...getA11yPropsFromHtmlTag(tag, accessibilityRole),
|
|
72
|
-
...rest
|
|
73
|
-
});
|
|
74
|
-
const content = getStackedContent(children, {
|
|
75
|
-
direction,
|
|
76
|
-
divider,
|
|
77
|
-
space
|
|
78
|
-
});
|
|
79
|
-
const themeTokens = useThemeTokens('StackView', tokens, variant, {
|
|
80
|
-
viewport
|
|
81
|
-
});
|
|
82
|
-
const flexStyles = selectFlexStyles(themeTokens);
|
|
83
|
-
return /*#__PURE__*/_jsx(View, {
|
|
84
|
-
ref: ref,
|
|
85
|
-
...selectedProps,
|
|
86
|
-
style: [flexStyles, staticStyles[direction]],
|
|
87
|
-
children: content
|
|
88
|
-
});
|
|
89
|
-
});
|
|
90
|
-
StackView.displayName = 'StackView';
|
|
91
|
-
StackView.propTypes = { ...selectedSystemPropTypes,
|
|
92
|
-
tokens: getTokensPropType('StackView'),
|
|
93
|
-
variant: variantProp.propType,
|
|
94
|
-
|
|
95
|
-
/**
|
|
96
|
-
* Sets the `flexDirection` of the container and, if `divider` is used, gives the Divider the appropriate direction.
|
|
97
|
-
*/
|
|
98
|
-
direction: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['column', 'row', 'column-reverse', 'row-reverse'])),
|
|
99
|
-
|
|
100
|
-
/**
|
|
101
|
-
* If true, renders a UDS `Divider` component between each item. If an object is passed,
|
|
102
|
-
* this object is passes as props to each Divider.
|
|
103
|
-
*/
|
|
104
|
-
divider: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape(Divider.propTypes)]),
|
|
105
|
-
|
|
106
|
-
/**
|
|
107
|
-
* The size of the spacer according to the theme's spacing scale.
|
|
108
|
-
* Either a number corresponding to a position on the theme's spacing scale (1 is smallest, 2 is second smallest, etc),
|
|
109
|
-
* or, a SpacingObject with viewport keys and options (see `useSpacingScale` for details).
|
|
110
|
-
*/
|
|
111
|
-
space: spacingProps.types.spacingValue,
|
|
112
|
-
|
|
113
|
-
/**
|
|
114
|
-
* Optional semantic HTML tag, to apply to the container on web. Does not change styling.
|
|
115
|
-
*
|
|
116
|
-
* In native apps, if a header tag is provided ("h1", "h2" etc) and accessibilityRole prop
|
|
117
|
-
* is not defined, the accessibilityRole will default to "heading".
|
|
118
|
-
*/
|
|
119
|
-
tag: PropTypes.oneOf(layoutTags),
|
|
120
|
-
|
|
121
|
-
/**
|
|
122
|
-
* A StackView may take any children, but will have no effect if it is only passed one child or is passed children
|
|
123
|
-
* wrapped in a component. If necessary, children may be wrapped in one React Fragment.
|
|
124
|
-
*/
|
|
125
|
-
children: PropTypes.node
|
|
126
|
-
};
|
|
127
|
-
export default StackView;
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef, useState } from 'react';
|
|
2
|
-
import Platform from "react-native-web/dist/exports/Platform";
|
|
3
|
-
import useSafeLayoutEffect from '../utils/useSafeLayoutEffect';
|
|
4
|
-
import StackWrapBox from './StackWrapBox';
|
|
5
|
-
import StackWrapGap from './StackWrapGap'; // In Jest/CI/SSR, global CSS isn't always available and doesn't always have .supports method
|
|
6
|
-
|
|
7
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
-
|
|
9
|
-
const cssSupports = (property, value) => {
|
|
10
|
-
var _window$CSS;
|
|
11
|
-
|
|
12
|
-
return Platform.OS === 'web' && typeof window !== 'undefined' && typeof ((_window$CSS = window.CSS) === null || _window$CSS === void 0 ? void 0 : _window$CSS.supports) === 'function' && window.CSS.supports(property, value);
|
|
13
|
-
}; // CSS.supports needs an example of the type of value you intend to use.
|
|
14
|
-
// Will be an integer appended `px` after hooks and JSX styles are resolved.
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
const exampleGapValue = '1px';
|
|
18
|
-
/**
|
|
19
|
-
* StackWrap is an alternative to StackView where the spaced items are allowed to wrap.
|
|
20
|
-
*
|
|
21
|
-
* As well as providing space between the items, StackWrap provides `gap` space between
|
|
22
|
-
* wrapped lines of items. By default, this `gap` is the same as the gap between spaced items.
|
|
23
|
-
* If a different spacing is desired between wrapped lines, pass a spacing value to the `gap` prop.
|
|
24
|
-
*/
|
|
25
|
-
|
|
26
|
-
const StackWrap = /*#__PURE__*/forwardRef((props, ref) => {
|
|
27
|
-
var _props$gap;
|
|
28
|
-
|
|
29
|
-
const [canUseCSSGap, setCanUseCSSGap] = useState(false);
|
|
30
|
-
const {
|
|
31
|
-
space
|
|
32
|
-
} = props; // Don't apply separate gap if `null` or `undefined`, so can be unset in Storybook etc
|
|
33
|
-
|
|
34
|
-
const gap = (_props$gap = props.gap) !== null && _props$gap !== void 0 ? _props$gap : space;
|
|
35
|
-
const gapEqualsSpace = gap === space; // If possible, use the cleaner implementation that applies CSS `gap` styles to the container,
|
|
36
|
-
// preserving direct parent-child relationships between the container and each item, which
|
|
37
|
-
// can result in clearer descriptions on some screen readers (e.g. radio "X of Y" on MacOS).
|
|
38
|
-
// Else, use the fallback implementation which renders a `Box` component around each child.
|
|
39
|
-
|
|
40
|
-
const Component = canUseCSSGap ? StackWrapGap : StackWrapBox; // In SSR, the type of implementation must match the server during hydration, but
|
|
41
|
-
// the server can't know if gap is supported, so never use it until after hydration.
|
|
42
|
-
|
|
43
|
-
useSafeLayoutEffect(() => {
|
|
44
|
-
setCanUseCSSGap(gapEqualsSpace && cssSupports('gap', exampleGapValue));
|
|
45
|
-
}, [gapEqualsSpace]);
|
|
46
|
-
return /*#__PURE__*/_jsx(Component, {
|
|
47
|
-
ref: ref,
|
|
48
|
-
...props
|
|
49
|
-
});
|
|
50
|
-
});
|
|
51
|
-
StackWrap.displayName = 'StackWrap';
|
|
52
|
-
StackWrap.propTypes = StackWrapBox.propTypes;
|
|
53
|
-
export default StackWrap;
|
|
@@ -1,117 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef } from 'react';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
|
-
import View from "react-native-web/dist/exports/View";
|
|
4
|
-
import { a11yProps, getA11yPropsFromHtmlTag, getTokensPropType, layoutTags, responsiveProps, selectSystemProps, spacingProps, useSpacingScale, useResponsiveProp, viewProps } from '../utils';
|
|
5
|
-
import { useThemeTokens } from '../ThemeProvider';
|
|
6
|
-
import { useViewport } from '../ViewportProvider';
|
|
7
|
-
import getStackedContent from './getStackedContent';
|
|
8
|
-
import { staticStyles, selectFlexStyles } from './common';
|
|
9
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
|
-
const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
|
|
11
|
-
const offsetSides = {
|
|
12
|
-
row: 'marginBottom',
|
|
13
|
-
column: 'marginRight'
|
|
14
|
-
};
|
|
15
|
-
const gapSides = {
|
|
16
|
-
row: 'bottom',
|
|
17
|
-
column: 'right'
|
|
18
|
-
};
|
|
19
|
-
const spaceSides = {
|
|
20
|
-
row: 'right',
|
|
21
|
-
column: 'bottom'
|
|
22
|
-
};
|
|
23
|
-
/**
|
|
24
|
-
* An alternative fallback implementation of `StackWrap` that doesn't use CSS `gap`.
|
|
25
|
-
*
|
|
26
|
-
* This is not intended to be used directly. It will automatically be used instead of StackWrap in:
|
|
27
|
-
*
|
|
28
|
-
* - Native apps (no `gap` style prop in React Native).
|
|
29
|
-
* - Older (~<=2020) browsers which don't support CSS `gap`.
|
|
30
|
-
* - Cases where the `space` between items should be different to the `gap` between wrapped rows .
|
|
31
|
-
*
|
|
32
|
-
* Unlike the cleaner and more side-effect-free CSS gap StackWrap implementation, this renders a Box (View)
|
|
33
|
-
* between the container and the stacked children, and requires a negative margin on the container.
|
|
34
|
-
*/
|
|
35
|
-
|
|
36
|
-
const StackWrapBox = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
37
|
-
let {
|
|
38
|
-
space = 1,
|
|
39
|
-
gap = space,
|
|
40
|
-
direction: directionProp = 'row',
|
|
41
|
-
children,
|
|
42
|
-
tokens,
|
|
43
|
-
variant,
|
|
44
|
-
tag,
|
|
45
|
-
accessibilityRole,
|
|
46
|
-
...rest
|
|
47
|
-
} = _ref;
|
|
48
|
-
const viewport = useViewport();
|
|
49
|
-
const direction = useResponsiveProp(directionProp, 'row');
|
|
50
|
-
const themeTokens = useThemeTokens('StackView', tokens, variant, {
|
|
51
|
-
viewport
|
|
52
|
-
});
|
|
53
|
-
const flexStyles = selectFlexStyles(themeTokens);
|
|
54
|
-
const selectedProps = selectProps({
|
|
55
|
-
accessibilityRole,
|
|
56
|
-
...getA11yPropsFromHtmlTag(tag, accessibilityRole),
|
|
57
|
-
...rest
|
|
58
|
-
}); // Mimic CSS `gap` using box spacing on the side after a wrapped row then offsetting it on the last row.
|
|
59
|
-
|
|
60
|
-
const gapSize = useSpacingScale(gap);
|
|
61
|
-
const offsetStyle = {
|
|
62
|
-
[offsetSides[direction]]: -1 * gapSize
|
|
63
|
-
};
|
|
64
|
-
const boxProps = {
|
|
65
|
-
[gapSides[direction]]: gap,
|
|
66
|
-
[spaceSides[direction]]: space
|
|
67
|
-
};
|
|
68
|
-
const content = getStackedContent(children, {
|
|
69
|
-
direction,
|
|
70
|
-
space: 0,
|
|
71
|
-
box: boxProps
|
|
72
|
-
});
|
|
73
|
-
return /*#__PURE__*/_jsx(View, {
|
|
74
|
-
ref: ref,
|
|
75
|
-
...selectedProps,
|
|
76
|
-
style: [flexStyles, staticStyles.wrap, staticStyles[direction], offsetStyle],
|
|
77
|
-
children: content
|
|
78
|
-
});
|
|
79
|
-
});
|
|
80
|
-
StackWrapBox.displayName = 'StackWrapBox';
|
|
81
|
-
StackWrapBox.propTypes = { ...selectedSystemPropTypes,
|
|
82
|
-
tokens: getTokensPropType('StackView'),
|
|
83
|
-
|
|
84
|
-
/**
|
|
85
|
-
* Sets the `flexDirection` of the container
|
|
86
|
-
*/
|
|
87
|
-
direction: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['column', 'row', 'row-reverse', 'column-reverse'])),
|
|
88
|
-
|
|
89
|
-
/**
|
|
90
|
-
* The size of the space between items according to the theme's spacing scale.
|
|
91
|
-
* Either a number corresponding to a position on the theme's spacing scale (1 is smallest, 2 is second smallest, etc),
|
|
92
|
-
* or, a SpacingObject with viewport keys and options (see `useSpacingScale` for details).
|
|
93
|
-
*/
|
|
94
|
-
space: spacingProps.types.spacingValue,
|
|
95
|
-
|
|
96
|
-
/**
|
|
97
|
-
* The size of the space between lines of content, according to the theme's spacing scale. By default, matches `space`.
|
|
98
|
-
* Either a number corresponding to a position on the theme's spacing scale (1 is smallest, 2 is second smallest, etc),
|
|
99
|
-
* or, a SpacingObject with viewport keys and options (see `useSpacingScale` for details).
|
|
100
|
-
*/
|
|
101
|
-
gap: spacingProps.types.spacingValue,
|
|
102
|
-
|
|
103
|
-
/**
|
|
104
|
-
* Optional semantic HTML tag, to apply to the container on web. Does not change styling.
|
|
105
|
-
*
|
|
106
|
-
* In native apps, if a header tag is provided ("h1", "h2" etc) and accessibilityRole prop
|
|
107
|
-
* is not defined, the accessibilityRole will default to "heading".
|
|
108
|
-
*/
|
|
109
|
-
tag: PropTypes.oneOf(layoutTags),
|
|
110
|
-
|
|
111
|
-
/**
|
|
112
|
-
* A StackWrap may take any children, but will have no effect if it is only passed one child or is passed children
|
|
113
|
-
* wrapped in a component. If necessary, children may be wrapped in one React Fragment.
|
|
114
|
-
*/
|
|
115
|
-
children: PropTypes.node
|
|
116
|
-
};
|
|
117
|
-
export default StackWrapBox;
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef } from 'react';
|
|
2
|
-
import View from "react-native-web/dist/exports/View";
|
|
3
|
-
import StackWrapBox from './StackWrapBox';
|
|
4
|
-
import { a11yProps, getA11yPropsFromHtmlTag, selectSystemProps, useSpacingScale, useResponsiveProp, viewProps } from '../utils';
|
|
5
|
-
import { useThemeTokens } from '../ThemeProvider';
|
|
6
|
-
import { useViewport } from '../ViewportProvider';
|
|
7
|
-
import getStackedContent from './getStackedContent';
|
|
8
|
-
import { staticStyles, selectFlexStyles } from './common';
|
|
9
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
|
-
const [selectProps] = selectSystemProps([a11yProps, viewProps]);
|
|
11
|
-
/**
|
|
12
|
-
* The primary implementation of StackWrap.
|
|
13
|
-
*
|
|
14
|
-
* This is not intended to be used directly. It will automatically be used instead of StackWrap if:
|
|
15
|
-
*
|
|
16
|
-
* - On web, and,
|
|
17
|
-
* - On a browser that supports CSS `gap` (most browser versions from 2020 onwards), and,
|
|
18
|
-
* - The `space` between items is the same as the `gap` between wrapped rows (this is the
|
|
19
|
-
* default if `gap` prop is undefined)
|
|
20
|
-
*/
|
|
21
|
-
|
|
22
|
-
const StackWrapGap = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
23
|
-
let {
|
|
24
|
-
space = 1,
|
|
25
|
-
tokens,
|
|
26
|
-
variant,
|
|
27
|
-
direction: directionProp = 'row',
|
|
28
|
-
children,
|
|
29
|
-
tag,
|
|
30
|
-
accessibilityRole,
|
|
31
|
-
...rest
|
|
32
|
-
} = _ref;
|
|
33
|
-
const viewport = useViewport();
|
|
34
|
-
const direction = useResponsiveProp(directionProp, 'row');
|
|
35
|
-
const themeTokens = useThemeTokens('StackView', tokens, variant, {
|
|
36
|
-
viewport
|
|
37
|
-
});
|
|
38
|
-
const flexStyles = selectFlexStyles(themeTokens);
|
|
39
|
-
const selectedProps = selectProps({
|
|
40
|
-
accessibilityRole,
|
|
41
|
-
...getA11yPropsFromHtmlTag(tag, accessibilityRole),
|
|
42
|
-
...rest
|
|
43
|
-
});
|
|
44
|
-
const size = useSpacingScale(space);
|
|
45
|
-
const gapStyle = {
|
|
46
|
-
gap: size
|
|
47
|
-
};
|
|
48
|
-
const content = getStackedContent(children, {
|
|
49
|
-
direction,
|
|
50
|
-
space: 0
|
|
51
|
-
});
|
|
52
|
-
return /*#__PURE__*/_jsx(View, {
|
|
53
|
-
ref: ref,
|
|
54
|
-
...selectedProps,
|
|
55
|
-
style: [flexStyles, staticStyles.wrap, staticStyles[direction], gapStyle],
|
|
56
|
-
children: content
|
|
57
|
-
});
|
|
58
|
-
});
|
|
59
|
-
StackWrapGap.displayName = 'StackWrapGap';
|
|
60
|
-
StackWrapGap.propTypes = StackWrapBox.propTypes;
|
|
61
|
-
export default StackWrapGap;
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import StyleSheet from "react-native-web/dist/exports/StyleSheet";
|
|
2
|
-
export const selectFlexStyles = _ref => {
|
|
3
|
-
let {
|
|
4
|
-
alignItems,
|
|
5
|
-
justifyContent,
|
|
6
|
-
flexGrow,
|
|
7
|
-
flexShrink
|
|
8
|
-
} = _ref;
|
|
9
|
-
return {
|
|
10
|
-
alignItems,
|
|
11
|
-
justifyContent,
|
|
12
|
-
flexGrow,
|
|
13
|
-
flexShrink
|
|
14
|
-
};
|
|
15
|
-
};
|
|
16
|
-
export const staticStyles = StyleSheet.create({
|
|
17
|
-
wrap: {
|
|
18
|
-
flexShrink: 1,
|
|
19
|
-
flexWrap: 'wrap'
|
|
20
|
-
},
|
|
21
|
-
row: {
|
|
22
|
-
flexDirection: 'row'
|
|
23
|
-
},
|
|
24
|
-
'row-reverse': {
|
|
25
|
-
flexDirection: 'row-reverse'
|
|
26
|
-
},
|
|
27
|
-
column: {
|
|
28
|
-
// This is the React Native View default, but also it's very fundamental to the behaviour,
|
|
29
|
-
// so make it explicit and allow it to be tested for.
|
|
30
|
-
flexDirection: 'column'
|
|
31
|
-
},
|
|
32
|
-
'column-reverse': {
|
|
33
|
-
flexDirection: 'column-reverse'
|
|
34
|
-
}
|
|
35
|
-
});
|
|
@@ -1,124 +0,0 @@
|
|
|
1
|
-
import React, { Children, Fragment } from 'react';
|
|
2
|
-
import Box from '../Box';
|
|
3
|
-
import Divider from '../Divider';
|
|
4
|
-
import Spacer from '../Spacer';
|
|
5
|
-
/**
|
|
6
|
-
* @typedef {import('react').ReactChildren} ReactChildren
|
|
7
|
-
* @typedef {import('react').ReactElement} ReactElement
|
|
8
|
-
* @typedef {import('../utils/props/spacingProps.js').SpacingValue} SpacingValue
|
|
9
|
-
*/
|
|
10
|
-
|
|
11
|
-
/**
|
|
12
|
-
* Takes valid React Children and inserts a specified amount of space between each valid (not nullish) top
|
|
13
|
-
* level element, according to the provided `options`.
|
|
14
|
-
*
|
|
15
|
-
* Returns an array of the original elements plus inserted spacing elements.
|
|
16
|
-
* This array of elements is keyed and may be used as a component's `children` without mapping.
|
|
17
|
-
*
|
|
18
|
-
* @param {ReactChildren} children
|
|
19
|
-
* @param {object} [options] -
|
|
20
|
-
* - `space`: amount of space to insert using the theme spacing scale (see `useSpacingScale`)
|
|
21
|
-
* - `direction`: if 'row' or 'row-reverse', applies space horizontally, if 'column' or 'column-reverse', applies space vertically
|
|
22
|
-
* - `box`: if truthy, wraps each valid child in a Box component; if an object, passes it to Box as props
|
|
23
|
-
* - `divider`: if truthy, inserts Divider components; if an object, passes it to Divider as props
|
|
24
|
-
* - `preserveFragments`: if true, adds no space between top-level elements that were passed inside a nested fragment
|
|
25
|
-
* @param {SpacingValue} [options.space]
|
|
26
|
-
* @param {boolean | object} [options.divider]
|
|
27
|
-
* @param {"row" | "column" | "row-reverse" | "column-reverse"} [options.direction]
|
|
28
|
-
* @param {boolean} [options.preserveFragments]
|
|
29
|
-
* @returns {ReactElement[]}
|
|
30
|
-
*/
|
|
31
|
-
|
|
32
|
-
import { createElement as _createElement } from "react";
|
|
33
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
34
|
-
|
|
35
|
-
const getStackedContent = (children, _ref) => {
|
|
36
|
-
let {
|
|
37
|
-
divider,
|
|
38
|
-
space,
|
|
39
|
-
direction = 'column',
|
|
40
|
-
box,
|
|
41
|
-
preserveFragments = false
|
|
42
|
-
} = _ref;
|
|
43
|
-
const boxProps = box && typeof box === 'object' ? box : {
|
|
44
|
-
space
|
|
45
|
-
};
|
|
46
|
-
const dividerProps = divider && typeof divider === 'object' ? divider : {}; // Avoid surprises if children contains comments, nulls, or is a variable wrapped as a fragment
|
|
47
|
-
|
|
48
|
-
const topLevelChildren = preserveFragments ? children : unpackFragment(children);
|
|
49
|
-
const validChildren = Children.toArray(topLevelChildren).filter(Boolean);
|
|
50
|
-
const content = validChildren.reduce((newChildren, child, index) => {
|
|
51
|
-
const boxID = "Stack-Box-".concat(index);
|
|
52
|
-
const item = box ?
|
|
53
|
-
/*#__PURE__*/
|
|
54
|
-
// If wrapped in Box, that Box needs a key.
|
|
55
|
-
// If possible, use an existing content key; use an index-based key only if necessary.
|
|
56
|
-
_createElement(Box, { ...boxProps,
|
|
57
|
-
key: child.key || boxID,
|
|
58
|
-
testID: boxID
|
|
59
|
-
}, child) : child;
|
|
60
|
-
if (!index || !space && !divider) return [...newChildren, item];
|
|
61
|
-
const testID = "Stack-".concat(divider ? 'Divider' : 'Spacer', "-").concat(index);
|
|
62
|
-
const commonProps = {
|
|
63
|
-
testID,
|
|
64
|
-
key: testID,
|
|
65
|
-
space
|
|
66
|
-
};
|
|
67
|
-
const separator = divider ? /*#__PURE__*/_jsx(Divider, {
|
|
68
|
-
vertical: direction.startsWith('row'),
|
|
69
|
-
...dividerProps,
|
|
70
|
-
...commonProps
|
|
71
|
-
}) : /*#__PURE__*/_jsx(Spacer, {
|
|
72
|
-
direction: direction.startsWith('row') ? 'row' : 'column',
|
|
73
|
-
...commonProps
|
|
74
|
-
});
|
|
75
|
-
return [...newChildren, separator, item];
|
|
76
|
-
}, []);
|
|
77
|
-
return content;
|
|
78
|
-
};
|
|
79
|
-
/**
|
|
80
|
-
* Unpacks top-level fragments, so that common compositional patterns such as the following examples
|
|
81
|
-
* can be iterated as flat siblings (as if they were `<Child1 /><Child2 /><Child3 />`):
|
|
82
|
-
*
|
|
83
|
-
* - Setting `children` as a property wrapped in a fragment:
|
|
84
|
-
*
|
|
85
|
-
* ```jsx
|
|
86
|
-
* args.children = <><Child1 /><Child2 /><Child3 /></>
|
|
87
|
-
* ```
|
|
88
|
-
*
|
|
89
|
-
* - Defining `children` as a variable wrapped in a fragment:
|
|
90
|
-
*
|
|
91
|
-
* ```jsx
|
|
92
|
-
* const content = <><Child1 /><Child2 /><Child3 /></>
|
|
93
|
-
* if (someCondition) return <SomeWrapper>{content}</SomeWrapper>
|
|
94
|
-
* ```
|
|
95
|
-
*
|
|
96
|
-
* - Using fragments at the top level of a JSX block for conditional rendering:
|
|
97
|
-
*
|
|
98
|
-
* ```jsx
|
|
99
|
-
* <Child1 />
|
|
100
|
-
* {someCondition && (
|
|
101
|
-
* <>
|
|
102
|
-
* <Child2 />
|
|
103
|
-
* <Child3 />
|
|
104
|
-
* </>
|
|
105
|
-
* )}
|
|
106
|
-
* ```
|
|
107
|
-
*
|
|
108
|
-
* @param {ReactChildren} child
|
|
109
|
-
* @returns {ReactChildren}
|
|
110
|
-
*/
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
const unpackFragment = child => {
|
|
114
|
-
var _child$props;
|
|
115
|
-
|
|
116
|
-
// If this level is a set of top-level siblings rather than one child, check each in turn
|
|
117
|
-
if (Children.count(child) > 1) return Children.map(child, unpackFragment); // When a fragment is found, unpack its children to the top level and check them
|
|
118
|
-
|
|
119
|
-
if ((child === null || child === void 0 ? void 0 : child.type) === Fragment) return unpackFragment((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children); // Stop unpacking as soon as any non-fragment child is found
|
|
120
|
-
|
|
121
|
-
return child;
|
|
122
|
-
};
|
|
123
|
-
|
|
124
|
-
export default getStackedContent;
|