@telus-uds/components-base 1.96.0 → 1.97.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +30 -2
- 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/lib/A11yInfoProvider/index.js +29 -35
- package/lib/A11yText/index.js +16 -24
- package/lib/ActionCard/ActionCard.js +47 -55
- package/lib/ActionCard/index.js +2 -10
- package/lib/ActivityIndicator/Spinner.js +20 -28
- package/lib/ActivityIndicator/Spinner.native.js +32 -40
- package/lib/ActivityIndicator/index.js +18 -22
- package/lib/ActivityIndicator/shared.js +12 -23
- package/lib/Autocomplete/Autocomplete.js +90 -99
- package/lib/Autocomplete/Loading.js +14 -22
- package/lib/Autocomplete/Suggestions.js +23 -31
- package/lib/Autocomplete/constants.js +4 -14
- package/lib/Autocomplete/dictionary.js +2 -9
- package/lib/Autocomplete/index.js +2 -10
- package/lib/Badge/Badge.js +18 -26
- package/lib/Badge/index.js +2 -10
- package/lib/BaseProvider/HydrationContext.js +13 -23
- package/lib/BaseProvider/index.js +24 -29
- package/lib/Box/Box.js +60 -68
- package/lib/Box/backgroundImageStylesMap.js +2 -9
- package/lib/Box/index.js +2 -10
- package/lib/Button/Button.js +15 -25
- package/lib/Button/ButtonBase.js +37 -46
- package/lib/Button/ButtonDropdown.js +37 -47
- package/lib/Button/ButtonGroup.js +53 -61
- package/lib/Button/ButtonLink.js +21 -29
- package/lib/Button/index.js +5 -34
- package/lib/Button/propTypes.js +16 -25
- package/lib/Card/Card.js +47 -55
- package/lib/Card/CardBase.js +27 -35
- package/lib/Card/PressableCardBase.js +26 -35
- package/lib/Card/index.js +4 -33
- package/lib/CardGroup/CardGroup.js +45 -55
- package/lib/CardGroup/dictionary.js +2 -9
- package/lib/CardGroup/index.js +2 -10
- package/lib/Carousel/Carousel.js +138 -146
- package/lib/Carousel/CarouselContext.js +19 -27
- package/lib/Carousel/CarouselFirstFocus/CarouselFirstFocus.js +15 -22
- package/lib/Carousel/CarouselItem/CarouselItem.js +44 -56
- package/lib/Carousel/CarouselItem/index.js +2 -10
- package/lib/Carousel/CarouselStepTracker/CarouselStepTracker.js +12 -20
- package/lib/Carousel/CarouselStepTracker/index.js +2 -10
- package/lib/Carousel/CarouselTabs/CarouselTabs.js +16 -23
- package/lib/Carousel/CarouselTabs/CarouselTabsPanel.js +20 -28
- package/lib/Carousel/CarouselTabs/CarouselTabsPanelItem.js +23 -31
- package/lib/Carousel/CarouselTabs/index.js +2 -10
- package/lib/Carousel/CarouselThumbnail.js +19 -27
- package/lib/Carousel/CarouselThumbnailNavigation.js +22 -30
- package/lib/Carousel/dictionary.js +2 -9
- package/lib/Carousel/index.js +3 -36
- package/lib/Checkbox/Checkbox.js +52 -60
- package/lib/Checkbox/CheckboxButton.js +32 -41
- package/lib/Checkbox/CheckboxGroup.js +41 -49
- package/lib/Checkbox/CheckboxInput.js +15 -21
- package/lib/Checkbox/CheckboxInput.native.js +1 -8
- package/lib/Checkbox/index.js +3 -17
- package/lib/CheckboxCard/CheckboxCard.js +45 -55
- package/lib/CheckboxCard/index.js +2 -10
- package/lib/CheckboxCardGroup/CheckboxCardGroup.js +42 -52
- package/lib/CheckboxCardGroup/index.js +2 -10
- package/lib/ColourToggle/ColourBubble.js +23 -31
- package/lib/ColourToggle/ColourToggle.js +27 -35
- package/lib/ColourToggle/index.js +2 -10
- package/lib/Divider/Divider.js +23 -31
- package/lib/Divider/index.js +2 -10
- package/lib/DownloadApp/DownloadApp.js +32 -40
- package/lib/DownloadApp/dictionary.js +2 -9
- package/lib/DownloadApp/index.js +2 -10
- package/lib/ExpandCollapse/Accordion.js +7 -13
- package/lib/ExpandCollapse/Control.js +26 -34
- package/lib/ExpandCollapse/ExpandCollapse.js +22 -30
- package/lib/ExpandCollapse/Panel.js +43 -51
- package/lib/ExpandCollapse/dictionary.js +2 -9
- package/lib/ExpandCollapse/index.js +7 -20
- package/lib/Feedback/Feedback.js +33 -41
- package/lib/Feedback/index.js +2 -10
- package/lib/Fieldset/Fieldset.js +37 -43
- package/lib/Fieldset/FieldsetContainer.js +17 -25
- package/lib/Fieldset/FieldsetContainer.native.js +12 -20
- package/lib/Fieldset/Legend.js +10 -16
- package/lib/Fieldset/Legend.native.js +11 -17
- package/lib/Fieldset/cssReset.js +2 -9
- package/lib/Fieldset/index.js +2 -10
- package/lib/FileUpload/FileUpload.js +50 -58
- package/lib/FileUpload/NotificationContent.js +12 -18
- package/lib/FileUpload/dictionary.js +2 -9
- package/lib/FileUpload/index.js +2 -10
- package/lib/FlexGrid/Col/Col.js +35 -43
- package/lib/FlexGrid/Col/index.js +2 -10
- package/lib/FlexGrid/FlexGrid.js +38 -46
- package/lib/FlexGrid/Row/Row.js +24 -32
- package/lib/FlexGrid/Row/index.js +2 -10
- package/lib/FlexGrid/helpers/index.js +1 -8
- package/lib/FlexGrid/index.js +2 -10
- package/lib/FlexGrid/providers/GutterContext.js +3 -11
- package/lib/Footnote/Footnote.js +63 -71
- package/lib/Footnote/FootnoteLink.js +30 -38
- package/lib/Footnote/dictionary.js +2 -9
- package/lib/Footnote/index.js +4 -12
- package/lib/HorizontalScroll/HorizontalScroll.js +32 -41
- package/lib/HorizontalScroll/HorizontalScrollButton.js +25 -33
- package/lib/HorizontalScroll/ScrollViewEnd.js +12 -20
- package/lib/HorizontalScroll/ScrollViewEnd.native.js +9 -16
- package/lib/HorizontalScroll/dictionary.js +2 -9
- package/lib/HorizontalScroll/index.js +11 -28
- package/lib/HorizontalScroll/itemPositions.js +17 -27
- package/lib/Icon/Icon.js +21 -30
- package/lib/Icon/IconText.js +29 -39
- package/lib/Icon/index.js +4 -25
- package/lib/IconButton/IconButton.js +35 -42
- package/lib/IconButton/index.js +2 -10
- package/lib/InputLabel/InputLabel.js +38 -47
- package/lib/InputLabel/LabelContent.js +8 -16
- package/lib/InputLabel/LabelContent.native.js +8 -17
- package/lib/InputLabel/index.js +2 -10
- package/lib/InputSupports/InputSupports.js +27 -35
- package/lib/InputSupports/index.js +2 -10
- package/lib/InputSupports/useInputSupports.js +5 -13
- package/lib/Link/ChevronLink.js +22 -28
- package/lib/Link/InlinePressable.js +13 -19
- package/lib/Link/InlinePressable.native.js +14 -23
- package/lib/Link/Link.js +9 -17
- package/lib/Link/LinkBase.js +40 -48
- package/lib/Link/TextButton.js +16 -22
- package/lib/Link/index.js +5 -34
- package/lib/List/List.js +22 -30
- package/lib/List/ListItem.js +12 -18
- package/lib/List/ListItemBase.js +33 -40
- package/lib/List/ListItemContent.js +22 -31
- package/lib/List/ListItemMark.js +24 -33
- package/lib/List/PressableListItemBase.js +32 -40
- package/lib/List/index.js +5 -24
- package/lib/Listbox/GroupControl.js +29 -33
- package/lib/Listbox/Listbox.js +40 -50
- package/lib/Listbox/ListboxContext.js +4 -12
- package/lib/Listbox/ListboxGroup.js +31 -40
- package/lib/Listbox/ListboxItem.js +23 -31
- package/lib/Listbox/ListboxOverlay.js +26 -35
- package/lib/Listbox/PressableItem.js +22 -30
- package/lib/Listbox/index.js +2 -10
- package/lib/Modal/Modal.js +75 -85
- package/lib/Modal/ModalContent.js +51 -58
- package/lib/Modal/WebModal.js +15 -23
- package/lib/Modal/dictionary.js +2 -9
- package/lib/Modal/index.js +2 -10
- package/lib/MultiSelectFilter/ModalOverlay.js +45 -53
- package/lib/MultiSelectFilter/MultiSelectFilter.js +110 -118
- package/lib/MultiSelectFilter/dictionary.js +2 -9
- package/lib/MultiSelectFilter/index.js +2 -10
- package/lib/Notification/Notification.js +59 -67
- package/lib/Notification/dictionary.js +2 -9
- package/lib/Notification/index.js +2 -10
- package/lib/OrderedList/Item.js +31 -39
- package/lib/OrderedList/ItemBase.js +13 -22
- package/lib/OrderedList/OrderedList.js +17 -25
- package/lib/OrderedList/OrderedListBase.js +12 -21
- package/lib/OrderedList/index.js +2 -10
- package/lib/Pagination/PageButton.js +22 -32
- package/lib/Pagination/Pagination.js +48 -51
- package/lib/Pagination/SideButton.js +25 -32
- package/lib/Pagination/constants.js +3 -0
- package/lib/Pagination/dictionary.js +2 -9
- package/lib/Pagination/index.js +2 -10
- package/lib/Pagination/usePagination.js +14 -12
- package/lib/Portal/Portal.js +8 -15
- package/lib/Portal/Portal.native.js +2 -9
- package/lib/Portal/index.js +2 -10
- package/lib/PriceLockup/PriceLockup.js +37 -45
- package/lib/PriceLockup/index.js +2 -10
- package/lib/PriceLockup/utils/renderFootnoteContent.js +20 -28
- package/lib/PriceLockup/utils/renderFootnoteLinks.js +5 -13
- package/lib/PriceLockup/utils/renderPrice.js +30 -38
- package/lib/PriceLockup/utils/renderTypography.js +5 -13
- package/lib/ProductCard/ProductCard.js +62 -70
- package/lib/ProductCard/dictionary.js +2 -9
- package/lib/ProductCard/index.js +2 -10
- package/lib/ProductCardGroup/ProductCardGroup.js +20 -28
- package/lib/ProductCardGroup/index.js +2 -10
- package/lib/Progress/Progress.js +15 -23
- package/lib/Progress/ProgressBar.js +23 -31
- package/lib/Progress/ProgressBarBackground.js +10 -18
- package/lib/Progress/index.js +4 -12
- package/lib/QuickLinks/QuickLinks.js +23 -29
- package/lib/QuickLinks/QuickLinksCard.js +14 -20
- package/lib/QuickLinks/QuickLinksItem.js +22 -28
- package/lib/QuickLinks/index.js +4 -12
- package/lib/QuickLinksFeature/QuickLinksFeature.js +20 -27
- package/lib/QuickLinksFeature/QuickLinksFeatureItem.js +31 -38
- package/lib/QuickLinksFeature/index.js +4 -12
- package/lib/Radio/Radio.js +43 -53
- package/lib/Radio/RadioButton.js +34 -43
- package/lib/Radio/RadioGroup.js +43 -51
- package/lib/Radio/RadioInput.js +15 -21
- package/lib/Radio/RadioInput.native.js +1 -8
- package/lib/Radio/index.js +3 -17
- package/lib/RadioCard/RadioCard.js +43 -53
- package/lib/RadioCard/RadioCardGroup.js +42 -52
- package/lib/RadioCard/index.js +3 -17
- package/lib/Responsive/Responsive.js +16 -22
- package/lib/Responsive/ResponsiveProp.js +13 -21
- package/lib/Responsive/ResponsiveWithMediaQueryStyleSheet.js +15 -23
- package/lib/Responsive/index.js +2 -10
- package/lib/Search/Search.js +47 -55
- package/lib/Search/dictionary.js +2 -9
- package/lib/Search/index.js +2 -10
- package/lib/Select/Group.js +9 -17
- package/lib/Select/Group.native.js +5 -13
- package/lib/Select/Item.js +8 -16
- package/lib/Select/Item.native.js +1 -8
- package/lib/Select/Picker.js +27 -35
- package/lib/Select/Picker.native.js +34 -41
- package/lib/Select/Select.js +45 -54
- package/lib/Select/constants.js +4 -14
- package/lib/Select/index.js +6 -14
- package/lib/SideNav/Item.js +29 -37
- package/lib/SideNav/ItemContent.js +17 -26
- package/lib/SideNav/ItemsGroup.js +25 -32
- package/lib/SideNav/SideNav.js +28 -38
- package/lib/SideNav/index.js +1 -13
- package/lib/Skeleton/Skeleton.js +32 -40
- package/lib/Skeleton/index.js +2 -10
- package/lib/Skeleton/skeleton.constant.js +2 -10
- package/lib/Skeleton/skeletonWebAnimation.js +1 -8
- package/lib/Skeleton/useSkeletonNativeAnimation.js +14 -22
- package/lib/SkipLink/SkipLink.js +24 -33
- package/lib/SkipLink/index.js +2 -10
- package/lib/Spacer/Spacer.js +15 -21
- package/lib/Spacer/index.js +2 -10
- package/lib/StackView/StackView.js +28 -36
- package/lib/StackView/StackWrap.js +14 -21
- package/lib/StackView/StackWrap.native.js +2 -9
- package/lib/StackView/StackWrapBox.js +27 -35
- package/lib/StackView/StackWrapGap.js +22 -30
- package/lib/StackView/common.js +4 -13
- package/lib/StackView/getStackedContent.js +14 -22
- package/lib/StackView/index.js +5 -24
- package/lib/Status/Status.js +27 -35
- package/lib/Status/index.js +2 -10
- package/lib/StepTracker/Step.js +35 -43
- package/lib/StepTracker/StepTracker.js +38 -46
- package/lib/StepTracker/dictionary.js +2 -9
- package/lib/StepTracker/index.js +2 -10
- package/lib/TabBar/TabBar.js +28 -36
- package/lib/TabBar/TabBarItem.js +33 -42
- package/lib/TabBar/index.js +2 -10
- package/lib/Tabs/Tabs.js +38 -48
- package/lib/Tabs/TabsItem.js +45 -53
- package/lib/Tabs/index.js +2 -10
- package/lib/Tags/Tags.js +47 -55
- package/lib/Tags/index.js +2 -10
- package/lib/TextInput/TextArea.js +19 -27
- package/lib/TextInput/TextInput.js +18 -26
- package/lib/TextInput/TextInputBase.js +64 -73
- package/lib/TextInput/dictionary.js +2 -9
- package/lib/TextInput/index.js +3 -20
- package/lib/TextInput/propTypes.js +8 -15
- package/lib/ThemeProvider/ThemeProvider.js +25 -36
- package/lib/ThemeProvider/index.js +7 -60
- package/lib/ThemeProvider/useResponsiveThemeTokens.js +10 -18
- package/lib/ThemeProvider/useSetTheme.js +5 -12
- package/lib/ThemeProvider/useTheme.js +4 -11
- package/lib/ThemeProvider/useThemeTokens.js +15 -24
- package/lib/ThemeProvider/utils/index.js +2 -27
- package/lib/ThemeProvider/utils/styles.js +12 -24
- package/lib/ThemeProvider/utils/theme-tokens.js +19 -34
- package/lib/Timeline/Timeline.js +28 -34
- package/lib/Timeline/index.js +2 -10
- package/lib/ToggleSwitch/ToggleSwitch.js +40 -48
- package/lib/ToggleSwitch/ToggleSwitchGroup.js +43 -51
- package/lib/ToggleSwitch/index.js +3 -20
- package/lib/Tooltip/Backdrop.js +8 -16
- package/lib/Tooltip/Backdrop.native.js +16 -22
- package/lib/Tooltip/Tooltip.js +42 -50
- package/lib/Tooltip/Tooltip.native.js +80 -61
- package/lib/Tooltip/dictionary.js +2 -9
- package/lib/Tooltip/getTooltipPosition.js +1 -9
- package/lib/Tooltip/index.js +5 -13
- package/lib/Tooltip/shared.js +17 -20
- package/lib/TooltipButton/TooltipButton.js +25 -33
- package/lib/TooltipButton/index.js +2 -10
- package/lib/Typography/Typography.js +39 -46
- package/lib/Typography/index.js +2 -10
- package/lib/Validator/Validator.js +42 -50
- package/lib/Validator/index.js +2 -10
- package/lib/ViewportProvider/ViewportProvider.js +13 -19
- package/lib/ViewportProvider/index.js +3 -23
- package/lib/ViewportProvider/useViewport.js +3 -11
- package/lib/ViewportProvider/useViewportListener.js +10 -17
- package/lib/index.js +71 -772
- package/lib/server.js +4 -40
- package/lib/utils/BaseView/BaseView.js +14 -20
- package/lib/utils/BaseView/BaseView.native.js +2 -10
- package/lib/utils/BaseView/index.js +2 -10
- package/lib/utils/a11y/index.js +2 -27
- package/lib/utils/a11y/semantics.js +11 -35
- package/lib/utils/a11y/textSize.js +7 -16
- package/lib/utils/animation/index.js +2 -13
- package/lib/utils/animation/useVerticalExpandAnimation.js +19 -26
- package/lib/utils/children.js +12 -20
- package/lib/utils/containUniqueFields.js +1 -8
- package/lib/utils/convertFromMegaByteToByte.js +1 -7
- package/lib/utils/floating-ui/index.js +1 -42
- package/lib/utils/floating-ui/index.native.js +1 -42
- package/lib/utils/formatImageSource.js +1 -8
- package/lib/utils/hasOwnProperty.js +1 -7
- package/lib/utils/htmlAttrs.js +11 -19
- package/lib/utils/index.js +25 -245
- package/lib/utils/info/index.js +6 -13
- package/lib/utils/info/platform/index.js +8 -13
- 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 -11
- package/lib/utils/input.js +13 -21
- package/lib/utils/pressability.js +14 -22
- package/lib/utils/props/a11yProps.js +90 -98
- package/lib/utils/props/clickProps.js +4 -12
- package/lib/utils/props/componentPropType.js +1 -7
- package/lib/utils/props/copyPropTypes.js +2 -10
- package/lib/utils/props/getPropSelector.js +6 -11
- package/lib/utils/props/handlerProps.js +23 -31
- package/lib/utils/props/hrefAttrsProp.js +6 -13
- package/lib/utils/props/index.js +19 -168
- package/lib/utils/props/inputSupportsProps.js +12 -20
- package/lib/utils/props/linkProps.js +16 -24
- package/lib/utils/props/paddingProp.js +8 -16
- package/lib/utils/props/pressProps.js +22 -31
- package/lib/utils/props/rectProp.js +8 -16
- package/lib/utils/props/responsiveProps.js +5 -13
- package/lib/utils/props/selectSystemProps.js +1 -7
- package/lib/utils/props/spacingProps.js +12 -19
- package/lib/utils/props/textInputProps.js +56 -62
- package/lib/utils/props/textProps.js +18 -24
- package/lib/utils/props/tokens.js +16 -26
- package/lib/utils/props/variantProp.js +4 -11
- package/lib/utils/props/viewProps.js +10 -18
- package/lib/utils/ssr-media-query/create-stylesheet/create-stylesheet-mobile.js +8 -16
- package/lib/utils/ssr-media-query/create-stylesheet/index.android.js +2 -10
- package/lib/utils/ssr-media-query/create-stylesheet/index.ios.js +2 -10
- package/lib/utils/ssr-media-query/create-stylesheet/index.js +12 -20
- package/lib/utils/ssr-media-query/hash.js +1 -7
- package/lib/utils/ssr-media-query/index.js +4 -17
- package/lib/utils/ssr-media-query/utils/common.js +1 -12
- package/lib/utils/ssr-media-query/utils/create-declaration-block.js +6 -14
- package/lib/utils/ssr-media-query/utils/create-media-query-styles.js +5 -12
- package/lib/utils/ssr-media-query/utils/hyphenate-style-name.js +1 -8
- package/lib/utils/ssr-media-query/utils/inject.js +8 -18
- package/lib/utils/ssr.js +19 -28
- package/lib/utils/transformGradient.js +3 -11
- package/lib/utils/useCopy.js +2 -10
- package/lib/utils/useHash.js +7 -14
- package/lib/utils/useHash.native.js +1 -8
- package/lib/utils/useOverlaidPosition.js +17 -25
- package/lib/utils/useResponsiveProp.js +10 -19
- package/lib/utils/useSafeLayoutEffect.js +6 -13
- package/lib/utils/useScrollBlocking.js +10 -17
- package/lib/utils/useScrollBlocking.native.js +1 -8
- package/lib/utils/useSpacingScale.js +7 -14
- package/lib/utils/useUniqueId.js +3 -10
- package/lib/utils/withLinkRouter.js +13 -19
- package/package.json +20 -25
- package/src/A11yInfoProvider/index.jsx +5 -2
- package/src/ActivityIndicator/index.jsx +12 -3
- package/src/BaseProvider/index.jsx +5 -2
- package/src/Carousel/Carousel.jsx +1 -1
- package/src/Carousel/CarouselItem/CarouselItem.jsx +16 -22
- package/src/Icon/IconText.jsx +0 -1
- package/src/InputLabel/InputLabel.jsx +2 -3
- package/src/List/ListItemBase.jsx +6 -1
- package/src/Listbox/GroupControl.jsx +6 -1
- package/src/Modal/ModalContent.jsx +3 -2
- package/src/Pagination/Pagination.jsx +9 -2
- package/src/Pagination/constants.js +3 -0
- package/src/Pagination/usePagination.js +14 -3
- package/src/TextInput/TextInputBase.jsx +1 -1
- package/src/Timeline/Timeline.jsx +6 -2
- package/src/Tooltip/Tooltip.native.jsx +31 -3
- package/src/Tooltip/shared.js +5 -0
- package/src/index.js +9 -10
- package/src/utils/a11y/semantics.js +0 -7
- package/types/FileUpload.d.ts +40 -0
- package/types/index.d.ts +3 -0
- package/lib-module/A11yInfoProvider/index.js +0 -62
- package/lib-module/A11yText/index.js +0 -68
- package/lib-module/ActionCard/ActionCard.js +0 -343
- package/lib-module/ActionCard/index.js +0 -2
- package/lib-module/ActivityIndicator/Spinner.js +0 -80
- package/lib-module/ActivityIndicator/Spinner.native.js +0 -144
- package/lib-module/ActivityIndicator/index.js +0 -44
- package/lib-module/ActivityIndicator/shared.js +0 -14
- package/lib-module/Autocomplete/Autocomplete.js +0 -481
- package/lib-module/Autocomplete/Loading.js +0 -36
- package/lib-module/Autocomplete/Suggestions.js +0 -66
- package/lib-module/Autocomplete/constants.js +0 -4
- package/lib-module/Autocomplete/dictionary.js +0 -12
- package/lib-module/Autocomplete/index.js +0 -2
- package/lib-module/Badge/Badge.js +0 -102
- package/lib-module/Badge/index.js +0 -2
- package/lib-module/BaseProvider/HydrationContext.js +0 -48
- package/lib-module/BaseProvider/index.js +0 -38
- package/lib-module/Box/Box.js +0 -379
- package/lib-module/Box/backgroundImageStylesMap.js +0 -94
- package/lib-module/Box/index.js +0 -2
- package/lib-module/Button/Button.js +0 -34
- package/lib-module/Button/ButtonBase.js +0 -347
- package/lib-module/Button/ButtonDropdown.js +0 -173
- package/lib-module/Button/ButtonGroup.js +0 -272
- package/lib-module/Button/ButtonLink.js +0 -50
- package/lib-module/Button/index.js +0 -5
- package/lib-module/Button/propTypes.js +0 -46
- package/lib-module/Card/Card.js +0 -330
- package/lib-module/Card/CardBase.js +0 -114
- package/lib-module/Card/PressableCardBase.js +0 -112
- package/lib-module/Card/index.js +0 -4
- package/lib-module/CardGroup/CardGroup.js +0 -210
- package/lib-module/CardGroup/dictionary.js +0 -8
- package/lib-module/CardGroup/index.js +0 -2
- package/lib-module/Carousel/Carousel.js +0 -894
- package/lib-module/Carousel/CarouselContext.js +0 -51
- package/lib-module/Carousel/CarouselFirstFocus/CarouselFirstFocus.js +0 -53
- package/lib-module/Carousel/CarouselItem/CarouselItem.js +0 -150
- package/lib-module/Carousel/CarouselItem/index.js +0 -2
- package/lib-module/Carousel/CarouselStepTracker/CarouselStepTracker.js +0 -54
- package/lib-module/Carousel/CarouselStepTracker/index.js +0 -2
- package/lib-module/Carousel/CarouselTabs/CarouselTabs.js +0 -50
- package/lib-module/Carousel/CarouselTabs/CarouselTabsPanel.js +0 -89
- package/lib-module/Carousel/CarouselTabs/CarouselTabsPanelItem.js +0 -118
- package/lib-module/Carousel/CarouselTabs/index.js +0 -2
- package/lib-module/Carousel/CarouselThumbnail.js +0 -113
- package/lib-module/Carousel/CarouselThumbnailNavigation.js +0 -71
- package/lib-module/Carousel/dictionary.js +0 -22
- package/lib-module/Carousel/index.js +0 -3
- package/lib-module/Checkbox/Checkbox.js +0 -343
- package/lib-module/Checkbox/CheckboxButton.js +0 -164
- package/lib-module/Checkbox/CheckboxGroup.js +0 -240
- package/lib-module/Checkbox/CheckboxInput.js +0 -50
- package/lib-module/Checkbox/CheckboxInput.native.js +0 -5
- package/lib-module/Checkbox/index.js +0 -3
- package/lib-module/CheckboxCard/CheckboxCard.js +0 -183
- package/lib-module/CheckboxCard/index.js +0 -2
- package/lib-module/CheckboxCardGroup/CheckboxCardGroup.js +0 -206
- package/lib-module/CheckboxCardGroup/index.js +0 -2
- package/lib-module/ColourToggle/ColourBubble.js +0 -126
- package/lib-module/ColourToggle/ColourToggle.js +0 -92
- package/lib-module/ColourToggle/index.js +0 -2
- package/lib-module/Divider/Divider.js +0 -133
- package/lib-module/Divider/index.js +0 -2
- package/lib-module/DownloadApp/DownloadApp.js +0 -160
- package/lib-module/DownloadApp/dictionary.js +0 -10
- package/lib-module/DownloadApp/index.js +0 -2
- package/lib-module/ExpandCollapse/Accordion.js +0 -15
- package/lib-module/ExpandCollapse/Control.js +0 -165
- package/lib-module/ExpandCollapse/ExpandCollapse.js +0 -98
- package/lib-module/ExpandCollapse/Panel.js +0 -242
- package/lib-module/ExpandCollapse/dictionary.js +0 -10
- package/lib-module/ExpandCollapse/index.js +0 -7
- package/lib-module/Feedback/Feedback.js +0 -161
- package/lib-module/Feedback/index.js +0 -2
- package/lib-module/Fieldset/Fieldset.js +0 -194
- package/lib-module/Fieldset/FieldsetContainer.js +0 -48
- package/lib-module/Fieldset/FieldsetContainer.native.js +0 -32
- 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/FileUpload/FileUpload.js +0 -329
- package/lib-module/FileUpload/NotificationContent.js +0 -55
- package/lib-module/FileUpload/dictionary.js +0 -40
- package/lib-module/FileUpload/index.js +0 -2
- package/lib-module/FlexGrid/Col/Col.js +0 -257
- package/lib-module/FlexGrid/Col/index.js +0 -2
- package/lib-module/FlexGrid/FlexGrid.js +0 -158
- package/lib-module/FlexGrid/Row/Row.js +0 -181
- package/lib-module/FlexGrid/Row/index.js +0 -2
- package/lib-module/FlexGrid/helpers/index.js +0 -15
- package/lib-module/FlexGrid/index.js +0 -2
- package/lib-module/FlexGrid/providers/GutterContext.js +0 -3
- package/lib-module/Footnote/Footnote.js +0 -317
- package/lib-module/Footnote/FootnoteLink.js +0 -107
- package/lib-module/Footnote/dictionary.js +0 -12
- package/lib-module/Footnote/index.js +0 -4
- package/lib-module/HorizontalScroll/HorizontalScroll.js +0 -165
- package/lib-module/HorizontalScroll/HorizontalScrollButton.js +0 -79
- package/lib-module/HorizontalScroll/ScrollViewEnd.js +0 -46
- package/lib-module/HorizontalScroll/ScrollViewEnd.native.js +0 -26
- package/lib-module/HorizontalScroll/dictionary.js +0 -11
- package/lib-module/HorizontalScroll/index.js +0 -11
- package/lib-module/HorizontalScroll/itemPositions.js +0 -113
- package/lib-module/Icon/Icon.js +0 -93
- package/lib-module/Icon/IconText.js +0 -114
- package/lib-module/Icon/index.js +0 -4
- package/lib-module/IconButton/IconButton.js +0 -203
- package/lib-module/IconButton/index.js +0 -2
- package/lib-module/InputLabel/InputLabel.js +0 -146
- package/lib-module/InputLabel/LabelContent.js +0 -28
- package/lib-module/InputLabel/LabelContent.native.js +0 -18
- package/lib-module/InputLabel/index.js +0 -2
- package/lib-module/InputSupports/InputSupports.js +0 -108
- package/lib-module/InputSupports/index.js +0 -2
- package/lib-module/InputSupports/useInputSupports.js +0 -31
- package/lib-module/Link/ChevronLink.js +0 -68
- package/lib-module/Link/InlinePressable.js +0 -48
- package/lib-module/Link/InlinePressable.native.js +0 -87
- package/lib-module/Link/Link.js +0 -28
- package/lib-module/Link/LinkBase.js +0 -269
- package/lib-module/Link/TextButton.js +0 -43
- package/lib-module/Link/index.js +0 -5
- package/lib-module/List/List.js +0 -77
- package/lib-module/List/ListItem.js +0 -32
- package/lib-module/List/ListItemBase.js +0 -164
- package/lib-module/List/ListItemContent.js +0 -73
- package/lib-module/List/ListItemMark.js +0 -126
- package/lib-module/List/PressableListItemBase.js +0 -112
- package/lib-module/List/index.js +0 -5
- package/lib-module/Listbox/GroupControl.js +0 -102
- package/lib-module/Listbox/Listbox.js +0 -172
- package/lib-module/Listbox/ListboxContext.js +0 -4
- package/lib-module/Listbox/ListboxGroup.js +0 -125
- package/lib-module/Listbox/ListboxItem.js +0 -76
- package/lib-module/Listbox/ListboxOverlay.js +0 -78
- package/lib-module/Listbox/PressableItem.js +0 -140
- package/lib-module/Listbox/index.js +0 -2
- package/lib-module/Modal/Modal.js +0 -373
- package/lib-module/Modal/ModalContent.js +0 -179
- package/lib-module/Modal/WebModal.js +0 -76
- package/lib-module/Modal/dictionary.js +0 -9
- package/lib-module/Modal/index.js +0 -2
- package/lib-module/MultiSelectFilter/ModalOverlay.js +0 -156
- package/lib-module/MultiSelectFilter/MultiSelectFilter.js +0 -526
- package/lib-module/MultiSelectFilter/dictionary.js +0 -12
- package/lib-module/MultiSelectFilter/index.js +0 -2
- package/lib-module/Notification/Notification.js +0 -429
- package/lib-module/Notification/dictionary.js +0 -8
- package/lib-module/Notification/index.js +0 -2
- package/lib-module/OrderedList/Item.js +0 -160
- package/lib-module/OrderedList/ItemBase.js +0 -43
- package/lib-module/OrderedList/OrderedList.js +0 -64
- package/lib-module/OrderedList/OrderedListBase.js +0 -36
- package/lib-module/OrderedList/index.js +0 -2
- package/lib-module/Pagination/PageButton.js +0 -74
- package/lib-module/Pagination/Pagination.js +0 -211
- package/lib-module/Pagination/SideButton.js +0 -113
- package/lib-module/Pagination/dictionary.js +0 -18
- package/lib-module/Pagination/index.js +0 -2
- package/lib-module/Pagination/usePagination.js +0 -69
- package/lib-module/Portal/Portal.js +0 -50
- package/lib-module/Portal/Portal.native.js +0 -2
- package/lib-module/Portal/index.js +0 -2
- package/lib-module/PriceLockup/PriceLockup.js +0 -225
- package/lib-module/PriceLockup/index.js +0 -2
- package/lib-module/PriceLockup/utils/renderFootnoteContent.js +0 -87
- package/lib-module/PriceLockup/utils/renderFootnoteLinks.js +0 -28
- package/lib-module/PriceLockup/utils/renderPrice.js +0 -141
- package/lib-module/PriceLockup/utils/renderTypography.js +0 -23
- package/lib-module/ProductCard/ProductCard.js +0 -232
- package/lib-module/ProductCard/dictionary.js +0 -38
- package/lib-module/ProductCard/index.js +0 -2
- package/lib-module/ProductCardGroup/ProductCardGroup.js +0 -70
- package/lib-module/ProductCardGroup/index.js +0 -2
- package/lib-module/Progress/Progress.js +0 -88
- package/lib-module/Progress/ProgressBar.js +0 -133
- package/lib-module/Progress/ProgressBarBackground.js +0 -40
- package/lib-module/Progress/index.js +0 -4
- package/lib-module/QuickLinks/QuickLinks.js +0 -78
- package/lib-module/QuickLinks/QuickLinksCard.js +0 -33
- package/lib-module/QuickLinks/QuickLinksItem.js +0 -51
- package/lib-module/QuickLinks/index.js +0 -4
- package/lib-module/QuickLinksFeature/QuickLinksFeature.js +0 -69
- package/lib-module/QuickLinksFeature/QuickLinksFeatureItem.js +0 -147
- package/lib-module/QuickLinksFeature/index.js +0 -4
- package/lib-module/Radio/Radio.js +0 -283
- package/lib-module/Radio/RadioButton.js +0 -184
- package/lib-module/Radio/RadioGroup.js +0 -255
- package/lib-module/Radio/RadioInput.js +0 -50
- package/lib-module/Radio/RadioInput.native.js +0 -5
- package/lib-module/Radio/index.js +0 -3
- package/lib-module/RadioCard/RadioCard.js +0 -211
- package/lib-module/RadioCard/RadioCardGroup.js +0 -257
- package/lib-module/RadioCard/index.js +0 -3
- package/lib-module/Responsive/Responsive.js +0 -65
- package/lib-module/Responsive/ResponsiveProp.js +0 -39
- package/lib-module/Responsive/ResponsiveWithMediaQueryStyleSheet.js +0 -68
- package/lib-module/Responsive/index.js +0 -2
- package/lib-module/Search/Search.js +0 -242
- package/lib-module/Search/dictionary.js +0 -12
- package/lib-module/Search/index.js +0 -2
- package/lib-module/Select/Group.js +0 -24
- package/lib-module/Select/Group.native.js +0 -16
- package/lib-module/Select/Item.js +0 -23
- package/lib-module/Select/Item.native.js +0 -2
- package/lib-module/Select/Picker.js +0 -97
- package/lib-module/Select/Picker.native.js +0 -120
- package/lib-module/Select/Select.js +0 -337
- package/lib-module/Select/constants.js +0 -5
- package/lib-module/Select/index.js +0 -6
- package/lib-module/SideNav/Item.js +0 -143
- package/lib-module/SideNav/ItemContent.js +0 -50
- package/lib-module/SideNav/ItemsGroup.js +0 -121
- package/lib-module/SideNav/SideNav.js +0 -131
- package/lib-module/SideNav/index.js +0 -1
- package/lib-module/Skeleton/Skeleton.js +0 -177
- package/lib-module/Skeleton/index.js +0 -2
- package/lib-module/Skeleton/skeleton.constant.js +0 -2
- package/lib-module/Skeleton/skeletonWebAnimation.js +0 -14
- package/lib-module/Skeleton/useSkeletonNativeAnimation.js +0 -28
- package/lib-module/SkipLink/SkipLink.js +0 -190
- package/lib-module/SkipLink/index.js +0 -2
- package/lib-module/Spacer/Spacer.js +0 -95
- package/lib-module/Spacer/index.js +0 -2
- package/lib-module/StackView/StackView.js +0 -126
- package/lib-module/StackView/StackWrap.js +0 -51
- package/lib-module/StackView/StackWrap.native.js +0 -4
- package/lib-module/StackView/StackWrapBox.js +0 -114
- package/lib-module/StackView/StackWrapGap.js +0 -61
- package/lib-module/StackView/common.js +0 -35
- package/lib-module/StackView/getStackedContent.js +0 -123
- package/lib-module/StackView/index.js +0 -5
- package/lib-module/Status/Status.js +0 -167
- package/lib-module/Status/index.js +0 -2
- package/lib-module/StepTracker/Step.js +0 -265
- package/lib-module/StepTracker/StepTracker.js +0 -208
- package/lib-module/StepTracker/dictionary.js +0 -30
- package/lib-module/StepTracker/index.js +0 -2
- package/lib-module/TabBar/TabBar.js +0 -125
- package/lib-module/TabBar/TabBarItem.js +0 -177
- package/lib-module/TabBar/index.js +0 -2
- package/lib-module/Tabs/Tabs.js +0 -179
- package/lib-module/Tabs/TabsItem.js +0 -239
- package/lib-module/Tabs/index.js +0 -2
- package/lib-module/Tags/Tags.js +0 -245
- package/lib-module/Tags/index.js +0 -2
- package/lib-module/TextInput/TextArea.js +0 -97
- package/lib-module/TextInput/TextInput.js +0 -80
- package/lib-module/TextInput/TextInputBase.js +0 -436
- package/lib-module/TextInput/dictionary.js +0 -12
- package/lib-module/TextInput/index.js +0 -3
- package/lib-module/TextInput/propTypes.js +0 -34
- package/lib-module/ThemeProvider/ThemeProvider.js +0 -84
- package/lib-module/ThemeProvider/index.js +0 -7
- package/lib-module/ThemeProvider/useResponsiveThemeTokens.js +0 -81
- package/lib-module/ThemeProvider/useSetTheme.js +0 -24
- package/lib-module/ThemeProvider/useTheme.js +0 -11
- package/lib-module/ThemeProvider/useThemeTokens.js +0 -109
- package/lib-module/ThemeProvider/utils/index.js +0 -2
- package/lib-module/ThemeProvider/utils/styles.js +0 -198
- package/lib-module/ThemeProvider/utils/theme-tokens.js +0 -160
- package/lib-module/Timeline/Timeline.js +0 -168
- package/lib-module/Timeline/index.js +0 -2
- package/lib-module/ToggleSwitch/ToggleSwitch.js +0 -280
- package/lib-module/ToggleSwitch/ToggleSwitchGroup.js +0 -208
- package/lib-module/ToggleSwitch/index.js +0 -3
- package/lib-module/Tooltip/Backdrop.js +0 -50
- package/lib-module/Tooltip/Backdrop.native.js +0 -41
- package/lib-module/Tooltip/Tooltip.js +0 -280
- package/lib-module/Tooltip/Tooltip.native.js +0 -328
- package/lib-module/Tooltip/dictionary.js +0 -8
- package/lib-module/Tooltip/getTooltipPosition.js +0 -170
- package/lib-module/Tooltip/index.js +0 -5
- package/lib-module/Tooltip/shared.js +0 -36
- package/lib-module/TooltipButton/TooltipButton.js +0 -90
- package/lib-module/TooltipButton/index.js +0 -2
- package/lib-module/Typography/Typography.js +0 -254
- package/lib-module/Typography/index.js +0 -2
- package/lib-module/Validator/Validator.js +0 -222
- package/lib-module/Validator/index.js +0 -2
- package/lib-module/ViewportProvider/ViewportProvider.js +0 -27
- package/lib-module/ViewportProvider/index.js +0 -3
- package/lib-module/ViewportProvider/useViewport.js +0 -3
- package/lib-module/ViewportProvider/useViewportListener.js +0 -37
- package/lib-module/index.js +0 -76
- package/lib-module/server.js +0 -4
- package/lib-module/utils/BaseView/BaseView.js +0 -42
- package/lib-module/utils/BaseView/BaseView.native.js +0 -5
- 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 -144
- package/lib-module/utils/a11y/textSize.js +0 -35
- package/lib-module/utils/animation/index.js +0 -2
- package/lib-module/utils/animation/useVerticalExpandAnimation.js +0 -86
- package/lib-module/utils/children.js +0 -117
- package/lib-module/utils/containUniqueFields.js +0 -24
- package/lib-module/utils/convertFromMegaByteToByte.js +0 -10
- 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/formatImageSource.js +0 -27
- package/lib-module/utils/hasOwnProperty.js +0 -11
- package/lib-module/utils/htmlAttrs.js +0 -23
- package/lib-module/utils/index.js +0 -25
- package/lib-module/utils/info/index.js +0 -8
- package/lib-module/utils/info/platform/index.js +0 -14
- 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 -6
- package/lib-module/utils/input.js +0 -185
- package/lib-module/utils/pressability.js +0 -112
- package/lib-module/utils/props/a11yProps.js +0 -310
- package/lib-module/utils/props/clickProps.js +0 -25
- package/lib-module/utils/props/componentPropType.js +0 -50
- package/lib-module/utils/props/copyPropTypes.js +0 -2
- package/lib-module/utils/props/getPropSelector.js +0 -52
- package/lib-module/utils/props/handlerProps.js +0 -105
- 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 -68
- package/lib-module/utils/props/linkProps.js +0 -43
- 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 -28
- package/lib-module/utils/props/selectSystemProps.js +0 -23
- package/lib-module/utils/props/spacingProps.js +0 -57
- package/lib-module/utils/props/textInputProps.js +0 -188
- package/lib-module/utils/props/textProps.js +0 -61
- package/lib-module/utils/props/tokens.js +0 -130
- package/lib-module/utils/props/variantProp.js +0 -18
- package/lib-module/utils/props/viewProps.js +0 -21
- package/lib-module/utils/ssr-media-query/create-stylesheet/create-stylesheet-mobile.js +0 -48
- package/lib-module/utils/ssr-media-query/create-stylesheet/index.android.js +0 -2
- package/lib-module/utils/ssr-media-query/create-stylesheet/index.ios.js +0 -2
- package/lib-module/utils/ssr-media-query/create-stylesheet/index.js +0 -36
- package/lib-module/utils/ssr-media-query/hash.js +0 -13
- package/lib-module/utils/ssr-media-query/index.js +0 -6
- package/lib-module/utils/ssr-media-query/utils/common.js +0 -33
- package/lib-module/utils/ssr-media-query/utils/create-declaration-block.js +0 -16
- package/lib-module/utils/ssr-media-query/utils/create-media-query-styles.js +0 -60
- package/lib-module/utils/ssr-media-query/utils/hyphenate-style-name.js +0 -12
- package/lib-module/utils/ssr-media-query/utils/inject.js +0 -39
- package/lib-module/utils/ssr.js +0 -142
- package/lib-module/utils/transformGradient.js +0 -15
- package/lib-module/utils/useCopy.js +0 -42
- package/lib-module/utils/useHash.js +0 -41
- package/lib-module/utils/useHash.native.js +0 -6
- package/lib-module/utils/useOverlaidPosition.js +0 -214
- package/lib-module/utils/useResponsiveProp.js +0 -45
- package/lib-module/utils/useSafeLayoutEffect.js +0 -28
- package/lib-module/utils/useScrollBlocking.js +0 -51
- package/lib-module/utils/useScrollBlocking.native.js +0 -2
- package/lib-module/utils/useSpacingScale.js +0 -123
- package/lib-module/utils/useUniqueId.js +0 -11
- package/lib-module/utils/withLinkRouter.js +0 -84
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
|
-
import Typography from '../Typography';
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* Renders the content of a notification for a file upload.
|
|
7
|
-
*
|
|
8
|
-
* @component
|
|
9
|
-
* @param {Object} props - The component props.
|
|
10
|
-
* @param {Object} props.file - The file object.
|
|
11
|
-
* @param {string} props.children - The content to be displayed.
|
|
12
|
-
* @param {string} props.color - The color of the typography.
|
|
13
|
-
* @param {React.Ref} ref - The ref to be forwarded to the Typography component.
|
|
14
|
-
* @returns {JSX.Element} The rendered NotificationContent component.
|
|
15
|
-
*/
|
|
16
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
17
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
18
|
-
const NotificationContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
19
|
-
let {
|
|
20
|
-
file,
|
|
21
|
-
color,
|
|
22
|
-
children
|
|
23
|
-
} = _ref;
|
|
24
|
-
return /*#__PURE__*/_jsxs(Typography, {
|
|
25
|
-
tokens: {
|
|
26
|
-
color
|
|
27
|
-
},
|
|
28
|
-
ref: ref,
|
|
29
|
-
children: [/*#__PURE__*/_jsx(Typography, {
|
|
30
|
-
variant: {
|
|
31
|
-
bold: true
|
|
32
|
-
},
|
|
33
|
-
tokens: {
|
|
34
|
-
color
|
|
35
|
-
},
|
|
36
|
-
children: file.name
|
|
37
|
-
}), children]
|
|
38
|
-
});
|
|
39
|
-
});
|
|
40
|
-
NotificationContent.displayName = 'NotificationContent';
|
|
41
|
-
NotificationContent.propTypes = {
|
|
42
|
-
/**
|
|
43
|
-
* The file object.
|
|
44
|
-
*/
|
|
45
|
-
file: PropTypes.object,
|
|
46
|
-
/**
|
|
47
|
-
* The content to be displayed.
|
|
48
|
-
*/
|
|
49
|
-
children: PropTypes.string,
|
|
50
|
-
/**
|
|
51
|
-
* The color of the typography.
|
|
52
|
-
*/
|
|
53
|
-
color: PropTypes.string
|
|
54
|
-
};
|
|
55
|
-
export default NotificationContent;
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
export default {
|
|
2
|
-
en: {
|
|
3
|
-
label: 'Upload files',
|
|
4
|
-
buttonLabel: 'Choose files',
|
|
5
|
-
dismissButtonLabel: 'Remove file',
|
|
6
|
-
wrongFileType: 'The selected file must be a %{fileType}.',
|
|
7
|
-
allowedFileTypes: 'Allowed file types: %{fileTypes}.',
|
|
8
|
-
fileTooBig: 'The selected file must be smaller than %{size}MB.',
|
|
9
|
-
fileIsEmpty: 'The selected file is empty.',
|
|
10
|
-
problemUploading: 'The selected file could not be uploaded. Try again.',
|
|
11
|
-
problemDeleting: 'The selected file could not be deleted. Try again.',
|
|
12
|
-
problemUploadingMultipleFiles: 'The selected files could not be uploaded. Try again.',
|
|
13
|
-
only: 'only',
|
|
14
|
-
and: 'and',
|
|
15
|
-
or: 'or',
|
|
16
|
-
uploadSuccess: 'uploaded successfully.',
|
|
17
|
-
uploadError: 'was not uploaded due to',
|
|
18
|
-
deleteProblem: 'was not deleted due to',
|
|
19
|
-
tooManyFiles: 'You can only select up to %{maxFilesCount} files at the same time.'
|
|
20
|
-
},
|
|
21
|
-
fr: {
|
|
22
|
-
label: 'Téléverser les fichiers"',
|
|
23
|
-
buttonLabel: 'Choisir les fichiers',
|
|
24
|
-
dismissButtonLabel: 'Supprimer le fichier',
|
|
25
|
-
wrongFileType: 'Le fichier sélectionné doit être au format %{fileType}.',
|
|
26
|
-
allowedFileTypes: 'Formats de fichiers autorisés : %{fileTypes}.',
|
|
27
|
-
fileTooBig: 'Le fichier sélectionné doit être inférieur à %{size}Mo.',
|
|
28
|
-
fileIsEmpty: 'Le fichier sélectionné est vide.',
|
|
29
|
-
problemUploading: 'Impossible de téléverser le fichier sélectionné. Veuillez réessayer.',
|
|
30
|
-
problemDeleting: `Le fichier sélectionné n'a pas pu être supprimé. Réessayez.`,
|
|
31
|
-
problemUploadingMultipleFiles: `Les fichiers sélectionnés n'ont pas pu être téléchargés. Veuillez réessayer.`,
|
|
32
|
-
only: 'uniquement',
|
|
33
|
-
and: 'et',
|
|
34
|
-
or: 'ou',
|
|
35
|
-
uploadSuccess: 'téléchargé avec succès.',
|
|
36
|
-
uploadError: `n'a pas été téléchargé en raison de`,
|
|
37
|
-
deleteProblem: `n'a pas été supprimé en raison de`,
|
|
38
|
-
tooManyFiles: `Vous ne pouvez sélectionner que jusqu'à %{maxFilesCount} fichiers en même temps.`
|
|
39
|
-
}
|
|
40
|
-
};
|
|
@@ -1,257 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
|
-
import Platform from "react-native-web/dist/exports/Platform";
|
|
4
|
-
import GutterContext from '../providers/GutterContext';
|
|
5
|
-
import applyInheritance from '../helpers';
|
|
6
|
-
import { responsiveProps, BaseView, StyleSheet, createMediaQueryStyles } from '../../utils';
|
|
7
|
-
import { useViewport } from '../../ViewportProvider';
|
|
8
|
-
import { useTheme } from '../../ThemeProvider';
|
|
9
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
|
-
const Col = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
11
|
-
let {
|
|
12
|
-
horizontalAlign,
|
|
13
|
-
children,
|
|
14
|
-
xs,
|
|
15
|
-
sm,
|
|
16
|
-
md,
|
|
17
|
-
lg,
|
|
18
|
-
xl,
|
|
19
|
-
xsOffset,
|
|
20
|
-
smOffset,
|
|
21
|
-
mdOffset,
|
|
22
|
-
lgOffset,
|
|
23
|
-
xlOffset,
|
|
24
|
-
flex,
|
|
25
|
-
...viewProps
|
|
26
|
-
} = _ref;
|
|
27
|
-
const gutter = React.useContext(GutterContext);
|
|
28
|
-
const viewport = useViewport();
|
|
29
|
-
const {
|
|
30
|
-
themeOptions: {
|
|
31
|
-
enableMediaQueryStyleSheet
|
|
32
|
-
}
|
|
33
|
-
} = useTheme();
|
|
34
|
-
const hiddenLevels = applyInheritance([xs, sm, md, lg, xl]);
|
|
35
|
-
const getHorizontalAlignLevel = () => {
|
|
36
|
-
if (typeof horizontalAlign === 'object') {
|
|
37
|
-
return applyInheritance([horizontalAlign.xs, horizontalAlign.sm, horizontalAlign.md, horizontalAlign.lg, horizontalAlign.xl]);
|
|
38
|
-
}
|
|
39
|
-
if (typeof horizontalAlign === 'string') {
|
|
40
|
-
return [horizontalAlign, horizontalAlign, horizontalAlign, horizontalAlign, horizontalAlign];
|
|
41
|
-
}
|
|
42
|
-
return ['inherit', 'inherit', 'inherit', 'inherit', 'inherit'];
|
|
43
|
-
};
|
|
44
|
-
const horizontalAlignLevel = getHorizontalAlignLevel();
|
|
45
|
-
const toPercent = num => {
|
|
46
|
-
return `${num / 12 * 100}%`;
|
|
47
|
-
};
|
|
48
|
-
const calculateWidth = value => {
|
|
49
|
-
if (typeof value === 'undefined') {
|
|
50
|
-
return {};
|
|
51
|
-
}
|
|
52
|
-
if (typeof value === 'number') {
|
|
53
|
-
const percent = toPercent(value);
|
|
54
|
-
return {
|
|
55
|
-
maxWidth: percent,
|
|
56
|
-
flexBasis: percent
|
|
57
|
-
};
|
|
58
|
-
}
|
|
59
|
-
return {
|
|
60
|
-
flexGrow: 1,
|
|
61
|
-
flexBasis: 0,
|
|
62
|
-
maxWidth: '100%'
|
|
63
|
-
};
|
|
64
|
-
};
|
|
65
|
-
const calculateOffset = value => {
|
|
66
|
-
if (typeof value === 'number') {
|
|
67
|
-
const percent = toPercent(value);
|
|
68
|
-
return {
|
|
69
|
-
marginLeft: percent
|
|
70
|
-
};
|
|
71
|
-
}
|
|
72
|
-
return {};
|
|
73
|
-
};
|
|
74
|
-
|
|
75
|
-
// TODO: consider setting this to always 'flex' in a major release.
|
|
76
|
-
// `display: block` is invalid in native apps.
|
|
77
|
-
// See https://telusdigital.atlassian.net/browse/UDS1-92
|
|
78
|
-
const shown = !flex && Platform.OS === 'web' ? 'block' : 'flex';
|
|
79
|
-
const sizesArray = [xs, sm, md, lg, xl];
|
|
80
|
-
const offSetsArray = [xsOffset, smOffset, mdOffset, lgOffset, xlOffset];
|
|
81
|
-
const sizesWithIheritance = applyInheritance(sizesArray);
|
|
82
|
-
const offsetsWithIheritance = applyInheritance(offSetsArray);
|
|
83
|
-
const sizes = {
|
|
84
|
-
xs: sizesWithIheritance[0],
|
|
85
|
-
sm: sizesWithIheritance[1],
|
|
86
|
-
md: sizesWithIheritance[2],
|
|
87
|
-
lg: sizesWithIheritance[3],
|
|
88
|
-
xl: sizesWithIheritance[4]
|
|
89
|
-
};
|
|
90
|
-
const offsets = {
|
|
91
|
-
xs: offsetsWithIheritance[0],
|
|
92
|
-
sm: offsetsWithIheritance[1],
|
|
93
|
-
md: offsetsWithIheritance[2],
|
|
94
|
-
lg: offsetsWithIheritance[3],
|
|
95
|
-
xl: offsetsWithIheritance[4]
|
|
96
|
-
};
|
|
97
|
-
const staticStyles = {
|
|
98
|
-
flexGrow: 1,
|
|
99
|
-
flexShrink: 0,
|
|
100
|
-
flexBasis: 'auto',
|
|
101
|
-
maxWidth: '100%',
|
|
102
|
-
paddingLeft: gutter ? 16 : 0,
|
|
103
|
-
paddingRight: gutter ? 16 : 0
|
|
104
|
-
};
|
|
105
|
-
const stylesByViewport = {
|
|
106
|
-
xs: {
|
|
107
|
-
display: hiddenLevels[0] === 0 ? 'none' : shown,
|
|
108
|
-
textAlign: horizontalAlignLevel[0],
|
|
109
|
-
...calculateWidth(sizes.xs),
|
|
110
|
-
...calculateOffset(offsets.xs)
|
|
111
|
-
},
|
|
112
|
-
sm: {
|
|
113
|
-
display: hiddenLevels[1] === 0 ? 'none' : shown,
|
|
114
|
-
textAlign: horizontalAlignLevel[1],
|
|
115
|
-
...calculateWidth(sizes.sm),
|
|
116
|
-
...calculateOffset(offsets.sm)
|
|
117
|
-
},
|
|
118
|
-
md: {
|
|
119
|
-
display: hiddenLevels[2] === 0 ? 'none' : shown,
|
|
120
|
-
textAlign: horizontalAlignLevel[2],
|
|
121
|
-
...calculateWidth(sizes.md),
|
|
122
|
-
...calculateOffset(offsets.md)
|
|
123
|
-
},
|
|
124
|
-
lg: {
|
|
125
|
-
display: hiddenLevels[3] === 0 ? 'none' : shown,
|
|
126
|
-
textAlign: horizontalAlignLevel[3],
|
|
127
|
-
...calculateWidth(sizes.lg),
|
|
128
|
-
...calculateOffset(offsets.lg)
|
|
129
|
-
},
|
|
130
|
-
xl: {
|
|
131
|
-
display: hiddenLevels[4] === 0 ? 'none' : shown,
|
|
132
|
-
textAlign: horizontalAlignLevel[4],
|
|
133
|
-
...calculateWidth(sizes.xl),
|
|
134
|
-
...calculateOffset(offsets.xl)
|
|
135
|
-
}
|
|
136
|
-
};
|
|
137
|
-
let colStyles;
|
|
138
|
-
let mediaIds;
|
|
139
|
-
if (enableMediaQueryStyleSheet) {
|
|
140
|
-
const mediaQueryStyles = createMediaQueryStyles(stylesByViewport);
|
|
141
|
-
const {
|
|
142
|
-
ids,
|
|
143
|
-
styles
|
|
144
|
-
} = StyleSheet.create({
|
|
145
|
-
col: {
|
|
146
|
-
...staticStyles,
|
|
147
|
-
...mediaQueryStyles
|
|
148
|
-
}
|
|
149
|
-
});
|
|
150
|
-
colStyles = styles.col;
|
|
151
|
-
mediaIds = ids.col;
|
|
152
|
-
} else {
|
|
153
|
-
colStyles = {
|
|
154
|
-
...staticStyles,
|
|
155
|
-
...stylesByViewport[viewport]
|
|
156
|
-
};
|
|
157
|
-
}
|
|
158
|
-
return /*#__PURE__*/_jsx(BaseView, {
|
|
159
|
-
ref: ref,
|
|
160
|
-
...viewProps,
|
|
161
|
-
style: colStyles,
|
|
162
|
-
dataSet: mediaIds && {
|
|
163
|
-
media: mediaIds
|
|
164
|
-
},
|
|
165
|
-
children: children
|
|
166
|
-
});
|
|
167
|
-
});
|
|
168
|
-
Col.displayName = 'Col';
|
|
169
|
-
|
|
170
|
-
/*
|
|
171
|
-
* We're disabling default props since passing undefined props to
|
|
172
|
-
* the react-flexbox-grid component sets up blank classes that may cause
|
|
173
|
-
* styling issues.
|
|
174
|
-
*/
|
|
175
|
-
Col.propTypes = {
|
|
176
|
-
/**
|
|
177
|
-
* Specify number of columns within the 'xs' breakpoint range. `0` hides the column.
|
|
178
|
-
*
|
|
179
|
-
* `true` sets the column width automatically;
|
|
180
|
-
* `false` disables the prop
|
|
181
|
-
*
|
|
182
|
-
*/
|
|
183
|
-
xs: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, true, false]),
|
|
184
|
-
/**
|
|
185
|
-
* Specify number of columns within the 'sm' breakpoint range. `0` hides the column.
|
|
186
|
-
*
|
|
187
|
-
* `true` sets the column width automatically;
|
|
188
|
-
* `false` disables the prop
|
|
189
|
-
*
|
|
190
|
-
*/
|
|
191
|
-
sm: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, true, false]),
|
|
192
|
-
/**
|
|
193
|
-
* Specify number of columns within the 'md' breakpoint range. `0` hides the column.
|
|
194
|
-
*
|
|
195
|
-
* `true` sets the column width automatically;
|
|
196
|
-
* `false` disables the prop
|
|
197
|
-
*
|
|
198
|
-
*/
|
|
199
|
-
md: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, true, false]),
|
|
200
|
-
/**
|
|
201
|
-
* Specify number of columns within the 'lg' breakpoint range. `0` hides the column.
|
|
202
|
-
*
|
|
203
|
-
* `true` sets the column width automatically;
|
|
204
|
-
* `false` disables the prop
|
|
205
|
-
*
|
|
206
|
-
*/
|
|
207
|
-
lg: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, true, false]),
|
|
208
|
-
/**
|
|
209
|
-
* Specify number of columns after the 'xl' breakpoint. `0` hides the column.
|
|
210
|
-
*
|
|
211
|
-
* `true` sets the column width automatically;
|
|
212
|
-
* `false` disables the prop
|
|
213
|
-
*
|
|
214
|
-
*/
|
|
215
|
-
xl: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, true, false]),
|
|
216
|
-
/**
|
|
217
|
-
* Offset the specified number of columns within the 'xs' breakpoint range. `0` hides the column.
|
|
218
|
-
*
|
|
219
|
-
*/
|
|
220
|
-
xsOffset: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
|
|
221
|
-
/**
|
|
222
|
-
* Offset the specified number of columns within the 'sm' breakpoint range.
|
|
223
|
-
*
|
|
224
|
-
*/
|
|
225
|
-
smOffset: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
|
|
226
|
-
/**
|
|
227
|
-
* Offset the specified number of columns within the 'md' breakpoint range.
|
|
228
|
-
*
|
|
229
|
-
*/
|
|
230
|
-
mdOffset: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
|
|
231
|
-
/**
|
|
232
|
-
* Offset the specified number of columns within the 'lg' breakpoint range.
|
|
233
|
-
*
|
|
234
|
-
*/
|
|
235
|
-
lgOffset: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
|
|
236
|
-
/**
|
|
237
|
-
* Offset the specified number of columns within the 'xl' breakpoint range.
|
|
238
|
-
*/
|
|
239
|
-
xlOffset: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
|
|
240
|
-
/**
|
|
241
|
-
* The columns of the Grid. Will typically be `FlexGrid.Col` components.
|
|
242
|
-
*/
|
|
243
|
-
children: PropTypes.node.isRequired,
|
|
244
|
-
/**
|
|
245
|
-
*
|
|
246
|
-
* Align content horizontally within the column.
|
|
247
|
-
*
|
|
248
|
-
* Accepts a `PropType.string` following the [responsive prop](#/Layout?id=responsive) structure.
|
|
249
|
-
*/
|
|
250
|
-
horizontalAlign: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['left', 'center', 'right'])),
|
|
251
|
-
/**
|
|
252
|
-
* (web only) Stretches the column to fill vertical space using `display: flex`.
|
|
253
|
-
* In native apps, FlexGrid.Col behaves as if this is always true (as do all `View`s).
|
|
254
|
-
*/
|
|
255
|
-
flex: PropTypes.bool
|
|
256
|
-
};
|
|
257
|
-
export default Col;
|
|
@@ -1,158 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
|
-
import { viewports } from '@telus-uds/system-constants';
|
|
4
|
-
import { a11yProps, viewProps, getA11yPropsFromHtmlTag, layoutTags, selectSystemProps, BaseView, StyleSheet, createMediaQueryStyles } from '../utils';
|
|
5
|
-
import Row from './Row';
|
|
6
|
-
import Col from './Col';
|
|
7
|
-
import GutterContext from './providers/GutterContext';
|
|
8
|
-
import applyInheritance from './helpers';
|
|
9
|
-
import { useTheme } from '../ThemeProvider';
|
|
10
|
-
import { useViewport } from '../ViewportProvider';
|
|
11
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
|
-
const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* A mobile-first flexbox grid.
|
|
16
|
-
*/
|
|
17
|
-
|
|
18
|
-
const FlexGrid = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
19
|
-
let {
|
|
20
|
-
limitWidth = true,
|
|
21
|
-
gutter = true,
|
|
22
|
-
outsideGutter = true,
|
|
23
|
-
xsReverse,
|
|
24
|
-
smReverse,
|
|
25
|
-
mdReverse,
|
|
26
|
-
lgReverse,
|
|
27
|
-
xlReverse,
|
|
28
|
-
tag,
|
|
29
|
-
accessibilityRole,
|
|
30
|
-
children,
|
|
31
|
-
dataSet,
|
|
32
|
-
...rest
|
|
33
|
-
} = _ref;
|
|
34
|
-
const reverseLevel = applyInheritance([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
|
|
35
|
-
const viewport = useViewport();
|
|
36
|
-
const {
|
|
37
|
-
themeOptions: {
|
|
38
|
-
enableMediaQueryStyleSheet
|
|
39
|
-
}
|
|
40
|
-
} = useTheme();
|
|
41
|
-
let flexgridStyles;
|
|
42
|
-
let mediaIds;
|
|
43
|
-
const stylesByViewport = {
|
|
44
|
-
xs: {
|
|
45
|
-
flexDirection: reverseLevel[0] ? 'column-reverse' : 'column'
|
|
46
|
-
},
|
|
47
|
-
sm: {
|
|
48
|
-
maxWidth: limitWidth && viewports.map.get('sm'),
|
|
49
|
-
flexDirection: reverseLevel[1] ? 'column-reverse' : 'column'
|
|
50
|
-
},
|
|
51
|
-
md: {
|
|
52
|
-
maxWidth: limitWidth && viewports.map.get('md'),
|
|
53
|
-
flexDirection: reverseLevel[2] ? 'column-reverse' : 'column'
|
|
54
|
-
},
|
|
55
|
-
lg: {
|
|
56
|
-
maxWidth: limitWidth && viewports.map.get('lg'),
|
|
57
|
-
flexDirection: reverseLevel[3] ? 'column-reverse' : 'column'
|
|
58
|
-
},
|
|
59
|
-
xl: {
|
|
60
|
-
maxWidth: limitWidth && viewports.map.get('xl'),
|
|
61
|
-
flexDirection: reverseLevel[4] ? 'column-reverse' : 'column'
|
|
62
|
-
}
|
|
63
|
-
};
|
|
64
|
-
const staticStyles = {
|
|
65
|
-
flexWrap: 'wrap',
|
|
66
|
-
width: outsideGutter ? '100%' : 'auto',
|
|
67
|
-
marginVertical: 0,
|
|
68
|
-
marginHorizontal: outsideGutter ? 'auto' : -16
|
|
69
|
-
};
|
|
70
|
-
if (enableMediaQueryStyleSheet) {
|
|
71
|
-
const mediaQueryStyles = createMediaQueryStyles(stylesByViewport);
|
|
72
|
-
const {
|
|
73
|
-
ids,
|
|
74
|
-
styles
|
|
75
|
-
} = StyleSheet.create({
|
|
76
|
-
flexgrid: {
|
|
77
|
-
...staticStyles,
|
|
78
|
-
...mediaQueryStyles
|
|
79
|
-
}
|
|
80
|
-
});
|
|
81
|
-
flexgridStyles = styles.flexgrid;
|
|
82
|
-
mediaIds = ids.flexgrid;
|
|
83
|
-
} else {
|
|
84
|
-
flexgridStyles = {
|
|
85
|
-
...staticStyles,
|
|
86
|
-
...stylesByViewport[viewport]
|
|
87
|
-
};
|
|
88
|
-
}
|
|
89
|
-
const props = {
|
|
90
|
-
accessibilityRole,
|
|
91
|
-
...getA11yPropsFromHtmlTag(tag, accessibilityRole),
|
|
92
|
-
...selectProps(rest)
|
|
93
|
-
};
|
|
94
|
-
const dataSetValue = mediaIds ? {
|
|
95
|
-
media: mediaIds,
|
|
96
|
-
...dataSet
|
|
97
|
-
} : dataSet;
|
|
98
|
-
return /*#__PURE__*/_jsx(GutterContext.Provider, {
|
|
99
|
-
value: gutter,
|
|
100
|
-
children: /*#__PURE__*/_jsx(BaseView, {
|
|
101
|
-
ref: ref,
|
|
102
|
-
...props,
|
|
103
|
-
style: flexgridStyles,
|
|
104
|
-
dataSet: dataSetValue,
|
|
105
|
-
children: children
|
|
106
|
-
})
|
|
107
|
-
});
|
|
108
|
-
});
|
|
109
|
-
FlexGrid.displayName = 'FlexGrid';
|
|
110
|
-
FlexGrid.propTypes = {
|
|
111
|
-
...selectedSystemPropTypes,
|
|
112
|
-
/**
|
|
113
|
-
* Whether or not to give the grid a fixed width. This also centres the grid horizontally.
|
|
114
|
-
*/
|
|
115
|
-
limitWidth: PropTypes.bool,
|
|
116
|
-
/**
|
|
117
|
-
* Whether or not to include gutters in between columns.
|
|
118
|
-
*/
|
|
119
|
-
gutter: PropTypes.bool,
|
|
120
|
-
/**
|
|
121
|
-
* Whether or not to include gutter at the ends to the left and right of the FlexGrid
|
|
122
|
-
*/
|
|
123
|
-
outsideGutter: PropTypes.bool,
|
|
124
|
-
/**
|
|
125
|
-
* Choose if the item order should be reversed from the 'xs' breakpoint. When you pass in false, the order will be normal from the xs breakpoint. By default, it inherits the behaviour set by the preceding prop.
|
|
126
|
-
*/
|
|
127
|
-
xsReverse: PropTypes.bool,
|
|
128
|
-
/**
|
|
129
|
-
* Choose if the item order should be reversed from the 'sm' breakpoint. When you pass in false, the order will be normal from the sm breakpoint. By default, it inherits the behaviour set by the preceding prop.
|
|
130
|
-
*/
|
|
131
|
-
smReverse: PropTypes.bool,
|
|
132
|
-
/**
|
|
133
|
-
* Choose if the item order should be reversed from the 'md' breakpoint. When you pass in false, the order will be normal from the md breakpoint. By default, it inherits the behaviour set by the preceding prop.
|
|
134
|
-
*/
|
|
135
|
-
mdReverse: PropTypes.bool,
|
|
136
|
-
/**
|
|
137
|
-
* Choose if the item order should be reversed from the 'lg' breakpoint. When you pass in false, the order will be normal from the lg breakpoint. By default, it inherits the behaviour set by the preceding prop.
|
|
138
|
-
*/
|
|
139
|
-
lgReverse: PropTypes.bool,
|
|
140
|
-
/**
|
|
141
|
-
* Choose if the item order should be reversed from the 'xl' breakpoint. When you pass in false, the order will be normal from the xl breakpoint. By default, it inherits the behaviour set by the preceding prop.
|
|
142
|
-
*/
|
|
143
|
-
xlReverse: PropTypes.bool,
|
|
144
|
-
/**
|
|
145
|
-
* Optional semantic HTML tag, to apply to the container on web. Does not change styling.
|
|
146
|
-
*
|
|
147
|
-
* In native apps, if a header tag is provided ("h1", "h2" etc) and accessibilityRole prop
|
|
148
|
-
* is not defined, the accessibilityRole will default to "heading".
|
|
149
|
-
*/
|
|
150
|
-
tag: PropTypes.oneOf(layoutTags),
|
|
151
|
-
/**
|
|
152
|
-
* The rows and columns of the Grid. Will typically be `FlexGrid.Row` and `FlexGrid.Col` components.
|
|
153
|
-
*/
|
|
154
|
-
children: PropTypes.node.isRequired
|
|
155
|
-
};
|
|
156
|
-
FlexGrid.Row = Row;
|
|
157
|
-
FlexGrid.Col = Col;
|
|
158
|
-
export default FlexGrid;
|
|
@@ -1,181 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
|
-
import applyInheritance from '../helpers';
|
|
4
|
-
import { BaseView, StyleSheet, createMediaQueryStyles } from '../../utils';
|
|
5
|
-
import { useTheme } from '../../ThemeProvider';
|
|
6
|
-
import { useViewport } from '../../ViewportProvider';
|
|
7
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
|
-
const horizontalAlignStyles = horizontalAlign => {
|
|
9
|
-
switch (horizontalAlign) {
|
|
10
|
-
case 'start':
|
|
11
|
-
return {
|
|
12
|
-
justifyContent: 'flex-start',
|
|
13
|
-
textAlign: 'left'
|
|
14
|
-
};
|
|
15
|
-
case 'center':
|
|
16
|
-
return {
|
|
17
|
-
justifyContent: 'center',
|
|
18
|
-
textAlign: 'center'
|
|
19
|
-
};
|
|
20
|
-
case 'end':
|
|
21
|
-
return {
|
|
22
|
-
justifyContent: 'flex-end',
|
|
23
|
-
textAlign: 'right'
|
|
24
|
-
};
|
|
25
|
-
default:
|
|
26
|
-
return {};
|
|
27
|
-
}
|
|
28
|
-
};
|
|
29
|
-
const verticalAlignStyles = verticalAlign => {
|
|
30
|
-
switch (verticalAlign) {
|
|
31
|
-
case 'top':
|
|
32
|
-
return {
|
|
33
|
-
alignItems: 'flex-start'
|
|
34
|
-
};
|
|
35
|
-
case 'middle':
|
|
36
|
-
return {
|
|
37
|
-
alignItems: 'center'
|
|
38
|
-
};
|
|
39
|
-
case 'bottom':
|
|
40
|
-
return {
|
|
41
|
-
alignItems: 'flex-end'
|
|
42
|
-
};
|
|
43
|
-
default:
|
|
44
|
-
return {};
|
|
45
|
-
}
|
|
46
|
-
};
|
|
47
|
-
const distributeStyles = distribute => {
|
|
48
|
-
switch (distribute) {
|
|
49
|
-
case 'between':
|
|
50
|
-
return {
|
|
51
|
-
justifyContent: 'space-between'
|
|
52
|
-
};
|
|
53
|
-
case 'around':
|
|
54
|
-
return {
|
|
55
|
-
justifyContent: 'space-around'
|
|
56
|
-
};
|
|
57
|
-
default:
|
|
58
|
-
return {};
|
|
59
|
-
}
|
|
60
|
-
};
|
|
61
|
-
const Row = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
62
|
-
let {
|
|
63
|
-
horizontalAlign,
|
|
64
|
-
verticalAlign,
|
|
65
|
-
distribute,
|
|
66
|
-
xsReverse,
|
|
67
|
-
smReverse,
|
|
68
|
-
mdReverse,
|
|
69
|
-
lgReverse,
|
|
70
|
-
xlReverse,
|
|
71
|
-
children,
|
|
72
|
-
...rest
|
|
73
|
-
} = _ref;
|
|
74
|
-
const {
|
|
75
|
-
themeOptions: {
|
|
76
|
-
enableMediaQueryStyleSheet
|
|
77
|
-
}
|
|
78
|
-
} = useTheme();
|
|
79
|
-
const viewport = useViewport();
|
|
80
|
-
const staticStyles = {
|
|
81
|
-
width: '100%',
|
|
82
|
-
marginVertical: 0,
|
|
83
|
-
marginHorizontal: 'auto',
|
|
84
|
-
flexGrow: 0,
|
|
85
|
-
flexShrink: 1,
|
|
86
|
-
flexBasis: 'auto',
|
|
87
|
-
...horizontalAlignStyles(horizontalAlign),
|
|
88
|
-
...verticalAlignStyles(verticalAlign),
|
|
89
|
-
...distributeStyles(distribute)
|
|
90
|
-
};
|
|
91
|
-
const reverseLevel = applyInheritance([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
|
|
92
|
-
const stylesByViewport = {
|
|
93
|
-
xs: {
|
|
94
|
-
flexDirection: reverseLevel[0] ? 'row-reverse' : 'row',
|
|
95
|
-
flexWrap: reverseLevel[0] ? 'wrap-reverse' : 'wrap'
|
|
96
|
-
},
|
|
97
|
-
sm: {
|
|
98
|
-
flexDirection: reverseLevel[1] ? 'row-reverse' : 'row',
|
|
99
|
-
flexWrap: reverseLevel[1] ? 'wrap-reverse' : 'wrap'
|
|
100
|
-
},
|
|
101
|
-
md: {
|
|
102
|
-
flexDirection: reverseLevel[2] ? 'row-reverse' : 'row',
|
|
103
|
-
flexWrap: reverseLevel[2] ? 'wrap-reverse' : 'wrap'
|
|
104
|
-
},
|
|
105
|
-
lg: {
|
|
106
|
-
flexDirection: reverseLevel[3] ? 'row-reverse' : 'row',
|
|
107
|
-
flexWrap: reverseLevel[3] ? 'wrap-reverse' : 'wrap'
|
|
108
|
-
},
|
|
109
|
-
xl: {
|
|
110
|
-
flexDirection: reverseLevel[4] ? 'row-reverse' : 'row',
|
|
111
|
-
flexWrap: reverseLevel[4] ? 'wrap-reverse' : 'wrap'
|
|
112
|
-
}
|
|
113
|
-
};
|
|
114
|
-
let rowStyles;
|
|
115
|
-
let mediaIds;
|
|
116
|
-
if (enableMediaQueryStyleSheet) {
|
|
117
|
-
const mediaQueryStyles = createMediaQueryStyles(stylesByViewport);
|
|
118
|
-
const {
|
|
119
|
-
ids,
|
|
120
|
-
styles
|
|
121
|
-
} = StyleSheet.create({
|
|
122
|
-
row: {
|
|
123
|
-
...staticStyles,
|
|
124
|
-
...mediaQueryStyles
|
|
125
|
-
}
|
|
126
|
-
});
|
|
127
|
-
rowStyles = styles.row;
|
|
128
|
-
mediaIds = ids.row;
|
|
129
|
-
} else {
|
|
130
|
-
rowStyles = {
|
|
131
|
-
...staticStyles,
|
|
132
|
-
...stylesByViewport[viewport]
|
|
133
|
-
};
|
|
134
|
-
}
|
|
135
|
-
return /*#__PURE__*/_jsx(BaseView, {
|
|
136
|
-
ref: ref,
|
|
137
|
-
...rest,
|
|
138
|
-
style: rowStyles,
|
|
139
|
-
dataSet: mediaIds && {
|
|
140
|
-
media: mediaIds
|
|
141
|
-
},
|
|
142
|
-
children: children
|
|
143
|
-
});
|
|
144
|
-
});
|
|
145
|
-
Row.displayName = 'Row';
|
|
146
|
-
Row.propTypes = {
|
|
147
|
-
/**
|
|
148
|
-
* Align columns horizontally within their row.
|
|
149
|
-
*/
|
|
150
|
-
horizontalAlign: PropTypes.oneOf(['start', 'center', 'end']),
|
|
151
|
-
/**
|
|
152
|
-
* Align columns vertically within their row.
|
|
153
|
-
*/
|
|
154
|
-
verticalAlign: PropTypes.oneOf(['top', 'middle', 'bottom']),
|
|
155
|
-
/**
|
|
156
|
-
* Distribute empty space around columns.
|
|
157
|
-
*/
|
|
158
|
-
distribute: PropTypes.oneOf(['around', 'between']),
|
|
159
|
-
/**
|
|
160
|
-
* Choose if the item order should be reversed from the 'xs' breakpoint. When you pass in false, the order will be normal from the xs breakpoint. By default, it inherits the behaviour set by the preceding prop.
|
|
161
|
-
*/
|
|
162
|
-
xsReverse: PropTypes.bool,
|
|
163
|
-
/**
|
|
164
|
-
* Choose if the item order should be reversed from the 'sm' breakpoint. When you pass in false, the order will be normal from the sm breakpoint. By default, it inherits the behaviour set by the preceding prop.
|
|
165
|
-
*/
|
|
166
|
-
smReverse: PropTypes.bool,
|
|
167
|
-
/**
|
|
168
|
-
* Choose if the item order should be reversed from the 'md' breakpoint. When you pass in false, the order will be normal from the md breakpoint. By default, it inherits the behaviour set by the preceding prop.
|
|
169
|
-
*/
|
|
170
|
-
mdReverse: PropTypes.bool,
|
|
171
|
-
/**
|
|
172
|
-
* Choose if the item order should be reversed from the 'lg' breakpoint. When you pass in false, the order will be normal from the lg breakpoint. By default, it inherits the behaviour set by the preceding prop.
|
|
173
|
-
*/
|
|
174
|
-
lgReverse: PropTypes.bool,
|
|
175
|
-
/**
|
|
176
|
-
* Choose if the item order should be reversed from the 'xl' breakpoint. When you pass in false, the order will be normal from the xl breakpoint. By default, it inherits the behaviour set by the preceding prop.
|
|
177
|
-
*/
|
|
178
|
-
xlReverse: PropTypes.bool,
|
|
179
|
-
children: PropTypes.node.isRequired
|
|
180
|
-
};
|
|
181
|
-
export default Row;
|