@telus-uds/components-base 1.66.0 → 1.67.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +23 -3
- package/lib/A11yInfoProvider/index.js +5 -20
- package/lib/A11yText/index.js +3 -17
- package/lib/ActivityIndicator/Spinner.js +2 -9
- package/lib/ActivityIndicator/Spinner.native.js +4 -27
- package/lib/ActivityIndicator/index.js +1 -13
- package/lib/ActivityIndicator/shared.js +0 -3
- package/lib/Autocomplete/Autocomplete.js +34 -85
- package/lib/Autocomplete/Loading.js +0 -10
- package/lib/Autocomplete/Suggestions.js +0 -11
- package/lib/Autocomplete/index.js +0 -3
- package/lib/BaseProvider/HydrationContext.js +4 -18
- package/lib/BaseProvider/index.js +0 -12
- package/lib/Box/Box.js +10 -35
- package/lib/Box/index.js +0 -3
- package/lib/Button/Button.js +4 -13
- package/lib/Button/ButtonBase.js +23 -55
- package/lib/Button/ButtonDropdown.js +7 -32
- package/lib/Button/ButtonGroup.js +15 -48
- package/lib/Button/ButtonLink.js +3 -17
- package/lib/Button/index.js +0 -5
- package/lib/Button/propTypes.js +0 -15
- package/lib/Card/Card.js +3 -14
- package/lib/Card/CardBase.js +5 -16
- package/lib/Card/PressableCardBase.js +7 -30
- package/lib/Card/index.js +0 -7
- package/lib/Carousel/Carousel.js +22 -115
- package/lib/Carousel/CarouselContext.js +0 -14
- package/lib/Carousel/CarouselFirstFocus/CarouselFirstFocus.js +6 -18
- package/lib/Carousel/CarouselItem/CarouselItem.js +5 -20
- package/lib/Carousel/CarouselItem/index.js +0 -3
- package/lib/Carousel/CarouselStepTracker/CarouselStepTracker.js +0 -9
- package/lib/Carousel/CarouselStepTracker/index.js +0 -3
- package/lib/Carousel/CarouselTabs/CarouselTabs.js +5 -15
- package/lib/Carousel/CarouselTabs/CarouselTabsPanel.js +7 -16
- package/lib/Carousel/CarouselTabs/CarouselTabsPanelItem.js +2 -22
- package/lib/Carousel/CarouselTabs/index.js +0 -3
- package/lib/Carousel/CarouselThumbnail.js +1 -16
- package/lib/Carousel/CarouselThumbnailNavigation.js +0 -15
- package/lib/Carousel/index.js +0 -5
- package/lib/Checkbox/Checkbox.js +5 -44
- package/lib/Checkbox/CheckboxButton.js +7 -33
- package/lib/Checkbox/CheckboxGroup.js +14 -45
- package/lib/Checkbox/CheckboxInput.js +1 -11
- package/lib/Checkbox/CheckboxInput.native.js +0 -2
- package/lib/Checkbox/index.js +0 -4
- package/lib/CheckboxCard/CheckboxCard.js +4 -37
- package/lib/CheckboxCard/index.js +0 -3
- package/lib/CheckboxCardGroup/CheckboxCardGroup.js +216 -0
- package/lib/CheckboxCardGroup/index.js +10 -0
- package/lib/Divider/Divider.js +13 -24
- package/lib/Divider/index.js +0 -3
- package/lib/ExpandCollapse/Accordion.js +1 -9
- package/lib/ExpandCollapse/Control.js +10 -32
- package/lib/ExpandCollapse/ExpandCollapse.js +3 -19
- package/lib/ExpandCollapse/Panel.js +13 -38
- package/lib/ExpandCollapse/index.js +0 -5
- package/lib/Feedback/Feedback.js +13 -30
- package/lib/Feedback/index.js +0 -3
- package/lib/Fieldset/Fieldset.js +6 -37
- package/lib/Fieldset/FieldsetContainer.js +1 -10
- package/lib/Fieldset/FieldsetContainer.native.js +0 -8
- package/lib/Fieldset/Legend.js +1 -10
- package/lib/Fieldset/Legend.native.js +1 -13
- package/lib/Fieldset/index.js +0 -3
- package/lib/FlexGrid/Col/Col.js +10 -53
- package/lib/FlexGrid/Col/index.js +0 -3
- package/lib/FlexGrid/FlexGrid.js +3 -34
- package/lib/FlexGrid/Row/Row.js +0 -38
- package/lib/FlexGrid/Row/index.js +0 -3
- package/lib/FlexGrid/helpers/index.js +0 -4
- package/lib/FlexGrid/index.js +0 -3
- package/lib/FlexGrid/providers/GutterContext.js +0 -4
- package/lib/HorizontalScroll/HorizontalScroll.js +17 -45
- package/lib/HorizontalScroll/HorizontalScrollButton.js +1 -17
- package/lib/HorizontalScroll/ScrollViewEnd.js +5 -13
- package/lib/HorizontalScroll/ScrollViewEnd.native.js +1 -10
- package/lib/HorizontalScroll/index.js +0 -7
- package/lib/HorizontalScroll/itemPositions.js +8 -19
- package/lib/Icon/Icon.js +4 -17
- package/lib/Icon/IconText.js +5 -25
- package/lib/Icon/index.js +0 -6
- package/lib/IconButton/IconButton.js +5 -37
- package/lib/IconButton/index.js +0 -3
- package/lib/InputLabel/InputLabel.js +4 -28
- package/lib/InputLabel/LabelContent.js +2 -8
- package/lib/InputLabel/LabelContent.native.js +0 -8
- package/lib/InputLabel/index.js +0 -3
- package/lib/InputSupports/InputSupports.js +0 -21
- package/lib/InputSupports/index.js +0 -3
- package/lib/InputSupports/useInputSupports.js +2 -6
- package/lib/Link/ChevronLink.js +7 -18
- package/lib/Link/InlinePressable.js +0 -10
- package/lib/Link/InlinePressable.native.js +5 -18
- package/lib/Link/Link.js +0 -8
- package/lib/Link/LinkBase.js +17 -47
- package/lib/Link/TextButton.js +3 -16
- package/lib/Link/index.js +0 -5
- package/lib/List/List.js +5 -21
- package/lib/List/ListItem.js +1 -11
- package/lib/List/ListItemBase.js +5 -34
- package/lib/List/ListItemContent.js +1 -14
- package/lib/List/ListItemMark.js +3 -23
- package/lib/List/PressableListItemBase.js +2 -28
- package/lib/List/index.js +0 -4
- package/lib/Listbox/GroupControl.js +0 -14
- package/lib/Listbox/Listbox.js +15 -40
- package/lib/Listbox/ListboxContext.js +0 -7
- package/lib/Listbox/ListboxGroup.js +7 -19
- package/lib/Listbox/ListboxItem.js +3 -17
- package/lib/Listbox/ListboxOverlay.js +4 -20
- package/lib/Listbox/PressableItem.js +3 -18
- package/lib/Listbox/index.js +0 -3
- package/lib/Modal/Modal.js +94 -45
- package/lib/Modal/ModalContent.js +184 -0
- package/lib/Modal/index.js +0 -3
- package/lib/MultiSelectFilter/ModalOverlay.js +1 -20
- package/lib/MultiSelectFilter/MultiSelectFilter.js +20 -69
- package/lib/MultiSelectFilter/index.js +0 -3
- package/lib/Notification/Notification.js +11 -38
- package/lib/Notification/index.js +0 -3
- package/lib/Pagination/PageButton.js +2 -22
- package/lib/Pagination/Pagination.js +21 -42
- package/lib/Pagination/SideButton.js +0 -24
- package/lib/Pagination/index.js +0 -3
- package/lib/Pagination/usePagination.js +4 -9
- package/lib/Progress/Progress.js +3 -17
- package/lib/Progress/ProgressBar.js +3 -25
- package/lib/Progress/ProgressBarBackground.js +0 -12
- package/lib/Progress/index.js +0 -4
- package/lib/QuickLinks/QuickLinks.js +1 -18
- package/lib/QuickLinks/QuickLinksCard.js +1 -11
- package/lib/QuickLinks/QuickLinksItem.js +3 -17
- package/lib/QuickLinks/index.js +0 -4
- package/lib/QuickLinksFeature/QuickLinksFeature.js +3 -20
- package/lib/QuickLinksFeature/QuickLinksFeatureItem.js +7 -30
- package/lib/QuickLinksFeature/index.js +0 -4
- package/lib/Radio/Radio.js +5 -39
- package/lib/Radio/RadioButton.js +7 -26
- package/lib/Radio/RadioGroup.js +6 -39
- package/lib/Radio/RadioInput.js +1 -11
- package/lib/Radio/RadioInput.native.js +0 -2
- package/lib/Radio/index.js +0 -4
- package/lib/RadioCard/RadioCard.js +5 -38
- package/lib/RadioCard/RadioCardGroup.js +25 -40
- package/lib/RadioCard/index.js +0 -4
- package/lib/Responsive/Responsive.js +1 -14
- package/lib/Responsive/index.js +0 -3
- package/lib/Search/Search.js +22 -45
- package/lib/Search/index.js +0 -3
- package/lib/Select/Group.js +0 -8
- package/lib/Select/Group.native.js +0 -6
- package/lib/Select/Item.js +0 -7
- package/lib/Select/Item.native.js +0 -2
- package/lib/Select/Picker.js +0 -8
- package/lib/Select/Picker.native.js +6 -22
- package/lib/Select/Select.js +9 -52
- package/lib/Select/index.js +0 -5
- package/lib/SideNav/Item.js +5 -29
- package/lib/SideNav/ItemContent.js +1 -14
- package/lib/SideNav/ItemsGroup.js +9 -31
- package/lib/SideNav/SideNav.js +9 -33
- package/lib/SideNav/index.js +0 -2
- package/lib/Skeleton/Skeleton.js +10 -42
- package/lib/Skeleton/index.js +0 -3
- package/lib/Skeleton/skeletonWebAnimation.js +0 -2
- package/lib/Skeleton/useSkeletonNativeAnimation.js +1 -9
- package/lib/SkipLink/SkipLink.js +7 -27
- package/lib/SkipLink/index.js +0 -3
- package/lib/Spacer/Spacer.js +4 -20
- package/lib/Spacer/index.js +0 -3
- package/lib/StackView/StackView.js +3 -21
- package/lib/StackView/StackWrap.js +11 -21
- package/lib/StackView/StackWrap.native.js +0 -3
- package/lib/StackView/StackWrapBox.js +5 -21
- package/lib/StackView/StackWrapGap.js +1 -14
- package/lib/StackView/common.js +0 -6
- package/lib/StackView/getStackedContent.js +10 -21
- package/lib/StackView/index.js +0 -5
- package/lib/StepTracker/Step.js +3 -27
- package/lib/StepTracker/StepTracker.js +5 -32
- package/lib/StepTracker/index.js +0 -3
- package/lib/Tabs/Tabs.js +7 -30
- package/lib/Tabs/TabsItem.js +13 -38
- package/lib/Tabs/index.js +0 -3
- package/lib/Tags/Tags.js +9 -42
- package/lib/Tags/index.js +0 -3
- package/lib/TextInput/TextArea.js +11 -20
- package/lib/TextInput/TextInput.js +7 -16
- package/lib/TextInput/TextInputBase.js +12 -58
- package/lib/TextInput/index.js +0 -3
- package/lib/TextInput/propTypes.js +0 -8
- package/lib/ThemeProvider/ThemeProvider.js +10 -18
- package/lib/ThemeProvider/index.js +0 -9
- package/lib/ThemeProvider/useSetTheme.js +6 -9
- package/lib/ThemeProvider/useTheme.js +2 -7
- package/lib/ThemeProvider/useThemeTokens.js +1 -9
- package/lib/ThemeProvider/utils/index.js +0 -4
- package/lib/ThemeProvider/utils/styles.js +14 -35
- package/lib/ThemeProvider/utils/theme-tokens.js +15 -43
- package/lib/Timeline/Timeline.js +11 -27
- package/lib/Timeline/index.js +0 -3
- package/lib/ToggleSwitch/ToggleSwitch.js +12 -43
- package/lib/ToggleSwitch/ToggleSwitchGroup.js +4 -38
- package/lib/ToggleSwitch/index.js +0 -3
- package/lib/Tooltip/Backdrop.js +4 -11
- package/lib/Tooltip/Backdrop.native.js +1 -14
- package/lib/Tooltip/Tooltip.js +9 -37
- package/lib/Tooltip/Tooltip.native.js +14 -45
- package/lib/Tooltip/getTooltipPosition.js +26 -31
- package/lib/Tooltip/index.js +0 -5
- package/lib/Tooltip/shared.js +0 -10
- package/lib/TooltipButton/TooltipButton.js +5 -20
- package/lib/TooltipButton/index.js +0 -3
- package/lib/Typography/Typography.js +15 -38
- package/lib/Typography/index.js +0 -3
- package/lib/Validator/Validator.js +10 -58
- package/lib/Validator/index.js +0 -3
- package/lib/ViewportProvider/ViewportProvider.js +1 -13
- package/lib/ViewportProvider/index.js +0 -5
- package/lib/ViewportProvider/useViewport.js +0 -4
- package/lib/ViewportProvider/useViewportListener.js +3 -12
- package/lib/index.js +8 -71
- package/lib/utils/BaseView/BaseView.js +3 -17
- package/lib/utils/BaseView/BaseView.native.js +0 -3
- package/lib/utils/BaseView/index.js +0 -3
- package/lib/utils/a11y/index.js +0 -4
- package/lib/utils/a11y/semantics.js +14 -32
- package/lib/utils/a11y/textSize.js +1 -8
- package/lib/utils/animation/index.js +0 -2
- package/lib/utils/animation/useVerticalExpandAnimation.js +5 -18
- package/lib/utils/children.js +16 -28
- package/lib/utils/containUniqueFields.js +2 -5
- package/lib/utils/floating-ui/index.js +0 -1
- package/lib/utils/floating-ui/index.native.js +0 -1
- package/lib/utils/hasOwnProperty.js +0 -1
- package/lib/utils/htmlAttrs.js +2 -4
- package/lib/utils/index.js +0 -31
- package/lib/utils/info/index.js +0 -4
- package/lib/utils/info/platform/index.js +0 -4
- package/lib/utils/info/versions.js +0 -3
- package/lib/utils/input.js +12 -24
- package/lib/utils/pressability.js +7 -21
- package/lib/utils/props/a11yProps.js +19 -25
- package/lib/utils/props/clickProps.js +0 -4
- package/lib/utils/props/componentPropType.js +0 -14
- package/lib/utils/props/copyPropTypes.js +0 -4
- package/lib/utils/props/getPropSelector.js +11 -12
- package/lib/utils/props/handlerProps.js +2 -23
- package/lib/utils/props/hrefAttrsProp.js +0 -4
- package/lib/utils/props/index.js +0 -22
- package/lib/utils/props/inputSupportsProps.js +0 -9
- package/lib/utils/props/linkProps.js +2 -12
- package/lib/utils/props/paddingProp.js +0 -3
- package/lib/utils/props/pressProps.js +2 -8
- package/lib/utils/props/rectProp.js +0 -3
- package/lib/utils/props/responsiveProps.js +1 -5
- package/lib/utils/props/selectSystemProps.js +4 -6
- package/lib/utils/props/spacingProps.js +3 -10
- package/lib/utils/props/textInputProps.js +10 -31
- package/lib/utils/props/textProps.js +6 -11
- package/lib/utils/props/tokens.js +7 -26
- package/lib/utils/props/variantProp.js +0 -3
- package/lib/utils/props/viewProps.js +0 -5
- package/lib/utils/ssr.js +13 -33
- package/lib/utils/useCopy.js +3 -6
- package/lib/utils/useHash.js +5 -10
- package/lib/utils/useHash.native.js +0 -2
- package/lib/utils/useOverlaidPosition.js +6 -29
- package/lib/utils/useResponsiveProp.js +6 -13
- package/lib/utils/useSafeLayoutEffect.js +5 -10
- package/lib/utils/useScrollBlocking.js +3 -11
- package/lib/utils/useScrollBlocking.native.js +0 -2
- package/lib/utils/useSpacingScale.js +5 -8
- package/lib/utils/useUniqueId.js +0 -4
- package/lib/utils/withLinkRouter.js +13 -18
- package/lib-module/A11yInfoProvider/index.js +5 -9
- package/lib-module/A11yText/index.js +3 -4
- package/lib-module/ActivityIndicator/Spinner.js +2 -2
- package/lib-module/ActivityIndicator/Spinner.native.js +4 -6
- package/lib-module/ActivityIndicator/index.js +1 -5
- package/lib-module/ActivityIndicator/shared.js +2 -1
- package/lib-module/Autocomplete/Autocomplete.js +34 -59
- package/lib-module/Autocomplete/Loading.js +0 -2
- package/lib-module/BaseProvider/HydrationContext.js +4 -7
- package/lib-module/BaseProvider/index.js +0 -3
- package/lib-module/Box/Box.js +10 -24
- package/lib-module/Button/Button.js +4 -2
- package/lib-module/Button/ButtonBase.js +23 -35
- package/lib-module/Button/ButtonDropdown.js +7 -16
- package/lib-module/Button/ButtonGroup.js +15 -32
- package/lib-module/Button/ButtonLink.js +3 -2
- package/lib-module/Button/propTypes.js +0 -7
- package/lib-module/Card/Card.js +3 -2
- package/lib-module/Card/CardBase.js +5 -4
- package/lib-module/Card/PressableCardBase.js +7 -11
- package/lib-module/Carousel/Carousel.js +22 -60
- package/lib-module/Carousel/CarouselContext.js +0 -5
- package/lib-module/Carousel/CarouselFirstFocus/CarouselFirstFocus.js +7 -5
- package/lib-module/Carousel/CarouselItem/CarouselItem.js +5 -11
- package/lib-module/Carousel/CarouselStepTracker/CarouselStepTracker.js +0 -2
- package/lib-module/Carousel/CarouselTabs/CarouselTabs.js +3 -4
- package/lib-module/Carousel/CarouselTabs/CarouselTabsPanel.js +7 -6
- package/lib-module/Carousel/CarouselTabs/CarouselTabsPanelItem.js +2 -10
- package/lib-module/Carousel/CarouselThumbnail.js +1 -7
- package/lib-module/Carousel/CarouselThumbnailNavigation.js +0 -2
- package/lib-module/Checkbox/Checkbox.js +5 -23
- package/lib-module/Checkbox/CheckboxButton.js +7 -17
- package/lib-module/Checkbox/CheckboxGroup.js +14 -31
- package/lib-module/Checkbox/CheckboxInput.js +1 -3
- package/lib-module/Checkbox/CheckboxInput.native.js +0 -1
- package/lib-module/CheckboxCard/CheckboxCard.js +4 -21
- package/lib-module/CheckboxCardGroup/CheckboxCardGroup.js +206 -0
- package/lib-module/CheckboxCardGroup/index.js +2 -0
- package/lib-module/Divider/Divider.js +13 -11
- package/lib-module/ExpandCollapse/Accordion.js +1 -1
- package/lib-module/ExpandCollapse/Control.js +10 -17
- package/lib-module/ExpandCollapse/ExpandCollapse.js +3 -9
- package/lib-module/ExpandCollapse/Panel.js +13 -23
- package/lib-module/Feedback/Feedback.js +13 -16
- package/lib-module/Fieldset/Fieldset.js +6 -25
- package/lib-module/Fieldset/FieldsetContainer.js +1 -1
- package/lib-module/Fieldset/FieldsetContainer.native.js +0 -1
- package/lib-module/Fieldset/Legend.js +1 -1
- package/lib-module/Fieldset/Legend.native.js +1 -1
- package/lib-module/FlexGrid/Col/Col.js +10 -37
- package/lib-module/FlexGrid/FlexGrid.js +3 -17
- package/lib-module/FlexGrid/Row/Row.js +0 -25
- package/lib-module/FlexGrid/helpers/index.js +0 -3
- package/lib-module/HorizontalScroll/HorizontalScroll.js +17 -27
- package/lib-module/HorizontalScroll/HorizontalScrollButton.js +1 -3
- package/lib-module/HorizontalScroll/ScrollViewEnd.js +5 -4
- package/lib-module/HorizontalScroll/ScrollViewEnd.native.js +0 -1
- package/lib-module/HorizontalScroll/itemPositions.js +11 -10
- package/lib-module/Icon/Icon.js +4 -8
- package/lib-module/Icon/IconText.js +6 -17
- package/lib-module/IconButton/IconButton.js +7 -20
- package/lib-module/InputLabel/InputLabel.js +4 -13
- package/lib-module/InputLabel/LabelContent.js +2 -1
- package/lib-module/InputLabel/LabelContent.native.js +0 -1
- package/lib-module/InputSupports/InputSupports.js +0 -9
- package/lib-module/InputSupports/useInputSupports.js +2 -4
- package/lib-module/Link/ChevronLink.js +7 -7
- package/lib-module/Link/InlinePressable.js +0 -2
- package/lib-module/Link/InlinePressable.native.js +4 -12
- package/lib-module/Link/LinkBase.js +17 -25
- package/lib-module/Link/TextButton.js +3 -5
- package/lib-module/List/List.js +5 -9
- package/lib-module/List/ListItem.js +1 -1
- package/lib-module/List/ListItemBase.js +5 -17
- package/lib-module/List/ListItemContent.js +1 -4
- package/lib-module/List/ListItemMark.js +3 -16
- package/lib-module/List/PressableListItemBase.js +2 -6
- package/lib-module/Listbox/GroupControl.js +0 -2
- package/lib-module/Listbox/Listbox.js +15 -23
- package/lib-module/Listbox/ListboxContext.js +0 -2
- package/lib-module/Listbox/ListboxGroup.js +6 -4
- package/lib-module/Listbox/ListboxItem.js +2 -1
- package/lib-module/Listbox/ListboxOverlay.js +3 -4
- package/lib-module/Listbox/PressableItem.js +2 -7
- package/lib-module/Modal/Modal.js +94 -25
- package/lib-module/Modal/ModalContent.js +175 -0
- package/lib-module/MultiSelectFilter/ModalOverlay.js +1 -4
- package/lib-module/MultiSelectFilter/MultiSelectFilter.js +20 -42
- package/lib-module/Notification/Notification.js +11 -22
- package/lib-module/Pagination/PageButton.js +2 -6
- package/lib-module/Pagination/Pagination.js +21 -21
- package/lib-module/Pagination/SideButton.js +3 -8
- package/lib-module/Pagination/usePagination.js +4 -8
- package/lib-module/Progress/Progress.js +3 -7
- package/lib-module/Progress/ProgressBar.js +3 -11
- package/lib-module/Progress/ProgressBarBackground.js +0 -2
- package/lib-module/QuickLinks/QuickLinks.js +1 -6
- package/lib-module/QuickLinks/QuickLinksCard.js +1 -3
- package/lib-module/QuickLinks/QuickLinksItem.js +3 -2
- package/lib-module/QuickLinksFeature/QuickLinksFeature.js +5 -9
- package/lib-module/QuickLinksFeature/QuickLinksFeatureItem.js +9 -13
- package/lib-module/Radio/Radio.js +5 -22
- package/lib-module/Radio/RadioButton.js +8 -10
- package/lib-module/Radio/RadioGroup.js +6 -25
- package/lib-module/Radio/RadioInput.js +1 -3
- package/lib-module/Radio/RadioInput.native.js +0 -1
- package/lib-module/RadioCard/RadioCard.js +5 -21
- package/lib-module/RadioCard/RadioCardGroup.js +25 -27
- package/lib-module/Responsive/Responsive.js +1 -6
- package/lib-module/Search/Search.js +22 -31
- package/lib-module/Select/Group.js +0 -3
- package/lib-module/Select/Group.native.js +0 -3
- package/lib-module/Select/Item.js +0 -3
- package/lib-module/Select/Item.native.js +0 -1
- package/lib-module/Select/Picker.native.js +8 -10
- package/lib-module/Select/Select.js +10 -35
- package/lib-module/SideNav/Item.js +5 -16
- package/lib-module/SideNav/ItemContent.js +1 -2
- package/lib-module/SideNav/ItemsGroup.js +9 -19
- package/lib-module/SideNav/SideNav.js +9 -22
- package/lib-module/Skeleton/Skeleton.js +10 -25
- package/lib-module/Skeleton/skeletonWebAnimation.js +0 -1
- package/lib-module/Skeleton/useSkeletonNativeAnimation.js +1 -3
- package/lib-module/SkipLink/SkipLink.js +7 -9
- package/lib-module/Spacer/Spacer.js +4 -7
- package/lib-module/StackView/StackView.js +3 -7
- package/lib-module/StackView/StackWrap.js +13 -13
- package/lib-module/StackView/StackWrap.native.js +2 -1
- package/lib-module/StackView/StackWrapBox.js +5 -8
- package/lib-module/StackView/StackWrapGap.js +1 -1
- package/lib-module/StackView/getStackedContent.js +10 -10
- package/lib-module/StepTracker/Step.js +3 -14
- package/lib-module/StepTracker/StepTracker.js +5 -13
- package/lib-module/Tabs/Tabs.js +7 -16
- package/lib-module/Tabs/TabsItem.js +13 -16
- package/lib-module/Tags/Tags.js +9 -26
- package/lib-module/TextInput/TextArea.js +11 -8
- package/lib-module/TextInput/TextInput.js +7 -5
- package/lib-module/TextInput/TextInputBase.js +13 -39
- package/lib-module/TextInput/propTypes.js +3 -7
- package/lib-module/ThemeProvider/ThemeProvider.js +10 -9
- package/lib-module/ThemeProvider/useSetTheme.js +6 -7
- package/lib-module/ThemeProvider/useTheme.js +2 -5
- package/lib-module/ThemeProvider/useThemeTokens.js +1 -2
- package/lib-module/ThemeProvider/utils/styles.js +15 -27
- package/lib-module/ThemeProvider/utils/theme-tokens.js +15 -20
- package/lib-module/Timeline/Timeline.js +11 -17
- package/lib-module/ToggleSwitch/ToggleSwitch.js +13 -26
- package/lib-module/ToggleSwitch/ToggleSwitchGroup.js +4 -23
- package/lib-module/Tooltip/Backdrop.js +4 -7
- package/lib-module/Tooltip/Backdrop.native.js +1 -4
- package/lib-module/Tooltip/Tooltip.js +9 -18
- package/lib-module/Tooltip/Tooltip.native.js +14 -23
- package/lib-module/Tooltip/getTooltipPosition.js +26 -30
- package/lib-module/Tooltip/shared.js +0 -6
- package/lib-module/TooltipButton/TooltipButton.js +5 -8
- package/lib-module/Typography/Typography.js +14 -22
- package/lib-module/Validator/Validator.js +10 -42
- package/lib-module/ViewportProvider/ViewportProvider.js +1 -3
- package/lib-module/ViewportProvider/useViewportListener.js +6 -8
- package/lib-module/index.js +1 -0
- package/lib-module/utils/BaseView/BaseView.js +3 -4
- package/lib-module/utils/BaseView/BaseView.native.js +0 -1
- package/lib-module/utils/a11y/semantics.js +14 -27
- package/lib-module/utils/a11y/textSize.js +1 -2
- package/lib-module/utils/animation/useVerticalExpandAnimation.js +8 -11
- package/lib-module/utils/children.js +17 -19
- package/lib-module/utils/containUniqueFields.js +2 -4
- package/lib-module/utils/htmlAttrs.js +2 -1
- package/lib-module/utils/info/index.js +2 -1
- package/lib-module/utils/info/platform/index.js +4 -1
- package/lib-module/utils/info/versions.js +2 -1
- package/lib-module/utils/input.js +11 -19
- package/lib-module/utils/pressability.js +8 -7
- package/lib-module/utils/props/a11yProps.js +22 -20
- package/lib-module/utils/props/clickProps.js +0 -1
- package/lib-module/utils/props/componentPropType.js +0 -13
- package/lib-module/utils/props/getPropSelector.js +12 -8
- package/lib-module/utils/props/handlerProps.js +2 -19
- package/lib-module/utils/props/hrefAttrsProp.js +2 -2
- package/lib-module/utils/props/inputSupportsProps.js +0 -6
- package/lib-module/utils/props/linkProps.js +2 -3
- package/lib-module/utils/props/pressProps.js +2 -2
- package/lib-module/utils/props/responsiveProps.js +1 -3
- package/lib-module/utils/props/selectSystemProps.js +4 -5
- package/lib-module/utils/props/spacingProps.js +4 -3
- package/lib-module/utils/props/textInputProps.js +13 -27
- package/lib-module/utils/props/textProps.js +9 -7
- package/lib-module/utils/props/tokens.js +10 -13
- package/lib-module/utils/props/variantProp.js +1 -1
- package/lib-module/utils/props/viewProps.js +0 -1
- package/lib-module/utils/ssr.js +14 -18
- package/lib-module/utils/useCopy.js +3 -5
- package/lib-module/utils/useHash.js +5 -9
- package/lib-module/utils/useHash.native.js +0 -1
- package/lib-module/utils/useOverlaidPosition.js +6 -25
- package/lib-module/utils/useResponsiveProp.js +6 -7
- package/lib-module/utils/useSafeLayoutEffect.js +5 -7
- package/lib-module/utils/useScrollBlocking.js +3 -10
- package/lib-module/utils/useSpacingScale.js +4 -4
- package/lib-module/utils/useUniqueId.js +0 -2
- package/lib-module/utils/withLinkRouter.js +13 -10
- package/package.json +2 -2
- package/src/Checkbox/CheckboxGroup.jsx +10 -8
- package/src/CheckboxCardGroup/CheckboxCardGroup.jsx +231 -0
- package/src/CheckboxCardGroup/index.js +3 -0
- package/src/Modal/Modal.jsx +98 -5
- package/src/Modal/ModalContent.jsx +171 -0
- package/src/RadioCard/RadioCardGroup.jsx +23 -2
- package/src/index.js +1 -0
|
@@ -4,33 +4,19 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.selectCheckboxTokens = exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
|
|
10
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
-
|
|
12
9
|
var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
|
|
13
|
-
|
|
14
10
|
var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
|
|
15
|
-
|
|
16
11
|
var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
|
|
17
|
-
|
|
18
12
|
var _CheckboxInput = _interopRequireDefault(require("./CheckboxInput"));
|
|
19
|
-
|
|
20
13
|
var _ThemeProvider = require("../ThemeProvider");
|
|
21
|
-
|
|
22
14
|
var _utils = require("../utils");
|
|
23
|
-
|
|
24
15
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
25
|
-
|
|
26
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
27
|
-
|
|
28
17
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
29
|
-
|
|
30
18
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
31
|
-
|
|
32
19
|
const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
|
|
33
|
-
|
|
34
20
|
const selectInputStyles = (_ref, isChecked) => {
|
|
35
21
|
let {
|
|
36
22
|
iconBackgroundColor,
|
|
@@ -63,7 +49,6 @@ const selectInputStyles = (_ref, isChecked) => {
|
|
|
63
49
|
})
|
|
64
50
|
};
|
|
65
51
|
};
|
|
66
|
-
|
|
67
52
|
const selectIconTokens = _ref2 => {
|
|
68
53
|
let {
|
|
69
54
|
icon,
|
|
@@ -76,16 +61,13 @@ const selectIconTokens = _ref2 => {
|
|
|
76
61
|
size: iconSize
|
|
77
62
|
};
|
|
78
63
|
};
|
|
79
|
-
|
|
80
64
|
const tokenKeys = ['checkedBackgroundColor', 'checkedSize', 'inputBackgroundColor', 'inputBorderColor', 'inputBorderWidth', 'inputOutlineColor', 'inputOutlineWidth', 'inputSize', 'outerBorderColor', 'outerBorderWidth', 'outerBorderGap', 'inputSize'];
|
|
81
|
-
|
|
82
65
|
const selectCheckboxTokens = (themeTokens, prefix) => (0, _utils.selectTokens)(tokenKeys, themeTokens, prefix);
|
|
66
|
+
|
|
83
67
|
/**
|
|
84
68
|
* The visual toggle of a checkbox input. Is not interactive on its own, should be used inside
|
|
85
69
|
* an interactive parent that passes down props when interacted with. Used in CheckboxCard
|
|
86
70
|
*/
|
|
87
|
-
|
|
88
|
-
|
|
89
71
|
exports.selectCheckboxTokens = selectCheckboxTokens;
|
|
90
72
|
const CheckboxButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
|
|
91
73
|
let {
|
|
@@ -108,7 +90,8 @@ const CheckboxButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
|
|
|
108
90
|
checked: isChecked
|
|
109
91
|
});
|
|
110
92
|
const iconTokens = selectIconTokens(stateTokens);
|
|
111
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
|
|
93
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
|
|
94
|
+
...selectProps(rest),
|
|
112
95
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
|
|
113
96
|
style: [staticStyles.defaultInputStyles, selectInputStyles(stateTokens, isChecked)],
|
|
114
97
|
testID: inputId,
|
|
@@ -124,62 +107,54 @@ const CheckboxButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
|
|
|
124
107
|
value: value
|
|
125
108
|
}), isChecked && IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
|
|
126
109
|
testID: iconId,
|
|
127
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
|
|
110
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
|
|
111
|
+
...iconTokens
|
|
128
112
|
})
|
|
129
113
|
})]
|
|
130
114
|
})
|
|
131
115
|
});
|
|
132
116
|
});
|
|
133
117
|
CheckboxButton.displayName = 'CheckboxButton';
|
|
134
|
-
CheckboxButton.propTypes = {
|
|
135
|
-
|
|
118
|
+
CheckboxButton.propTypes = {
|
|
119
|
+
...selectedSystemPropTypes,
|
|
136
120
|
/**
|
|
137
121
|
* Use `checked` for controlled Checkbox. For uncontrolled Checkbox, use the `defaultChecked` prop.
|
|
138
122
|
*/
|
|
139
123
|
isChecked: _propTypes.default.bool,
|
|
140
|
-
|
|
141
124
|
/**
|
|
142
125
|
* Checkbox tokens.
|
|
143
126
|
*/
|
|
144
127
|
tokens: (0, _utils.getTokensSetPropType)(tokenKeys, {
|
|
145
128
|
allowFunction: true
|
|
146
129
|
}),
|
|
147
|
-
|
|
148
130
|
/**
|
|
149
131
|
* Whether the corresponding input is disabled or active.
|
|
150
132
|
*/
|
|
151
133
|
inactive: _propTypes.default.bool,
|
|
152
|
-
|
|
153
134
|
/**
|
|
154
135
|
* Use `defaultChecked` to provide the initial value for an uncontrolled Checkbox.
|
|
155
136
|
*/
|
|
156
137
|
defaultChecked: _propTypes.default.bool,
|
|
157
|
-
|
|
158
138
|
/**
|
|
159
139
|
* Checkbox input ID.
|
|
160
140
|
*/
|
|
161
141
|
inputId: _propTypes.default.string,
|
|
162
|
-
|
|
163
142
|
/**
|
|
164
143
|
* Checkbox icon ID.
|
|
165
144
|
*/
|
|
166
145
|
iconId: _propTypes.default.string,
|
|
167
|
-
|
|
168
146
|
/**
|
|
169
147
|
* Can control the checkbox on the card.
|
|
170
148
|
*/
|
|
171
149
|
isControlled: _propTypes.default.bool,
|
|
172
|
-
|
|
173
150
|
/**
|
|
174
151
|
* Callback called when a controlled checkbox gets interacted with.
|
|
175
152
|
*/
|
|
176
153
|
handleChange: _propTypes.default.func,
|
|
177
|
-
|
|
178
154
|
/**
|
|
179
155
|
* Associate this checkbox with a group (set as the name attribute).
|
|
180
156
|
*/
|
|
181
157
|
name: _propTypes.default.string,
|
|
182
|
-
|
|
183
158
|
/**
|
|
184
159
|
* The value of the checkbox: true or false
|
|
185
160
|
*/
|
|
@@ -187,7 +162,6 @@ CheckboxButton.propTypes = { ...selectedSystemPropTypes,
|
|
|
187
162
|
};
|
|
188
163
|
var _default = CheckboxButton;
|
|
189
164
|
exports.default = _default;
|
|
190
|
-
|
|
191
165
|
const staticStyles = _StyleSheet.default.create({
|
|
192
166
|
container: {
|
|
193
167
|
flexDirection: 'row',
|
|
@@ -4,35 +4,22 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
|
|
10
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
-
|
|
12
9
|
var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
|
|
13
|
-
|
|
14
10
|
var _ViewportProvider = require("../ViewportProvider");
|
|
15
|
-
|
|
16
11
|
var _ThemeProvider = require("../ThemeProvider");
|
|
17
|
-
|
|
18
12
|
var _utils = require("../utils");
|
|
19
|
-
|
|
20
13
|
var _StackView = require("../StackView");
|
|
21
|
-
|
|
22
14
|
var _Checkbox = _interopRequireDefault(require("./Checkbox"));
|
|
23
|
-
|
|
24
15
|
var _Fieldset = _interopRequireDefault(require("../Fieldset"));
|
|
25
|
-
|
|
26
16
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
27
|
-
|
|
28
17
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
29
|
-
|
|
30
18
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
31
|
-
|
|
32
19
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
33
|
-
|
|
34
20
|
const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
|
|
35
21
|
const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
|
|
22
|
+
|
|
36
23
|
/**
|
|
37
24
|
* A group of Checkboxs that behave as a fieldset. Use when users select any number of choices from options.
|
|
38
25
|
*
|
|
@@ -80,7 +67,6 @@ const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([
|
|
|
80
67
|
* />
|
|
81
68
|
* ```
|
|
82
69
|
*/
|
|
83
|
-
|
|
84
70
|
const CheckboxGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
85
71
|
let {
|
|
86
72
|
tokens,
|
|
@@ -115,6 +101,14 @@ const CheckboxGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
115
101
|
} = (0, _ThemeProvider.useThemeTokens)('CheckboxGroup', tokens, variant, {
|
|
116
102
|
viewport
|
|
117
103
|
});
|
|
104
|
+
const borderTokens = {
|
|
105
|
+
outlineWidth,
|
|
106
|
+
borderTopLeftRadius,
|
|
107
|
+
borderTopRightRadius,
|
|
108
|
+
borderBottomLeftRadius,
|
|
109
|
+
borderBottomRightRadius,
|
|
110
|
+
outlineOffset
|
|
111
|
+
};
|
|
118
112
|
const {
|
|
119
113
|
currentValues,
|
|
120
114
|
toggleOneValue
|
|
@@ -125,11 +119,9 @@ const CheckboxGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
125
119
|
readOnly: readOnly || inactive
|
|
126
120
|
});
|
|
127
121
|
const uniqueFields = ['id', 'label'];
|
|
128
|
-
|
|
129
122
|
if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
|
|
130
123
|
throw new Error(`CheckboxGroup items must have unique ${uniqueFields.join(', ')}`);
|
|
131
124
|
}
|
|
132
|
-
|
|
133
125
|
const checkboxes = items.map((_ref2, index) => {
|
|
134
126
|
let {
|
|
135
127
|
label,
|
|
@@ -139,12 +131,10 @@ const CheckboxGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
139
131
|
...itemRest
|
|
140
132
|
} = _ref2;
|
|
141
133
|
const checkboxId = id || `Checkbox[${index}]`;
|
|
142
|
-
|
|
143
134
|
const handleChange = (newCheckedState, event) => {
|
|
144
135
|
if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event);
|
|
145
136
|
toggleOneValue(checkboxId, event);
|
|
146
137
|
};
|
|
147
|
-
|
|
148
138
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
|
|
149
139
|
ref: itemRef,
|
|
150
140
|
id: checkboxId,
|
|
@@ -170,14 +160,7 @@ const CheckboxGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
170
160
|
inactive: inactive,
|
|
171
161
|
validation: validation,
|
|
172
162
|
showErrorBorder: true,
|
|
173
|
-
tokens:
|
|
174
|
-
outlineWidth,
|
|
175
|
-
borderTopLeftRadius,
|
|
176
|
-
borderTopRightRadius,
|
|
177
|
-
borderBottomLeftRadius,
|
|
178
|
-
borderBottomRightRadius,
|
|
179
|
-
outlineOffset
|
|
180
|
-
},
|
|
163
|
+
tokens: borderTokens,
|
|
181
164
|
showIcon: showIcon,
|
|
182
165
|
...selectProps(rest),
|
|
183
166
|
children: (0, _StackView.getStackedContent)(checkboxes, {
|
|
@@ -187,91 +170,77 @@ const CheckboxGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
187
170
|
});
|
|
188
171
|
});
|
|
189
172
|
CheckboxGroup.displayName = 'CheckboxGroup';
|
|
190
|
-
CheckboxGroup.propTypes = {
|
|
191
|
-
|
|
173
|
+
CheckboxGroup.propTypes = {
|
|
174
|
+
...selectedSystemPropTypes,
|
|
192
175
|
/**
|
|
193
176
|
* Optional theme token overrides for the outer CheckboxGroup component
|
|
194
177
|
*/
|
|
195
178
|
tokens: (0, _utils.getTokensPropType)('CheckboxGroup'),
|
|
196
|
-
|
|
197
179
|
/**
|
|
198
180
|
* Optional theme token overrides for each inner Checkbox component
|
|
199
181
|
*/
|
|
200
182
|
radioTokens: (0, _utils.getTokensPropType)('Checkbox'),
|
|
201
|
-
|
|
202
183
|
/**
|
|
203
184
|
* Theme variants, shared between both CheckboxGroup and Checkbox
|
|
204
185
|
*/
|
|
205
186
|
variant: _utils.variantProp.propType,
|
|
206
|
-
|
|
207
187
|
/**
|
|
208
188
|
* Array of objects containing specifics for each Checkbox to be rendered in the group.
|
|
209
189
|
*/
|
|
210
|
-
items: _propTypes.default.arrayOf(_propTypes.default.exact({
|
|
190
|
+
items: _propTypes.default.arrayOf(_propTypes.default.exact({
|
|
191
|
+
...selectedItemPropTypes,
|
|
211
192
|
label: _propTypes.default.string,
|
|
212
193
|
id: _propTypes.default.string,
|
|
213
194
|
onChange: _propTypes.default.func,
|
|
214
195
|
ref: _airbnbPropTypes.default.ref()
|
|
215
196
|
})),
|
|
216
|
-
|
|
217
197
|
/**
|
|
218
198
|
* Main text used to describe this group, used in Fieldset's Legend element.
|
|
219
199
|
*/
|
|
220
200
|
legend: _propTypes.default.string,
|
|
221
|
-
|
|
222
201
|
/**
|
|
223
202
|
* Optional additional text giving more detail to help a user make a choice.
|
|
224
203
|
*/
|
|
225
204
|
hint: _propTypes.default.string,
|
|
226
|
-
|
|
227
205
|
/**
|
|
228
206
|
* Position of the hint relative to label. Use `below` to display a larger hint below the label.
|
|
229
207
|
*/
|
|
230
208
|
hintPosition: _propTypes.default.oneOf(['inline', 'below']),
|
|
231
|
-
|
|
232
209
|
/**
|
|
233
210
|
* Optional tooltip text content to include alongside the legend and hint.
|
|
234
211
|
*/
|
|
235
212
|
tooltip: _propTypes.default.string,
|
|
236
|
-
|
|
237
213
|
/**
|
|
238
214
|
* Current validation status of the group, passed to the feedback element if there is one.
|
|
239
215
|
*/
|
|
240
216
|
validation: _propTypes.default.oneOf(['error', 'success']),
|
|
241
|
-
|
|
242
217
|
/**
|
|
243
218
|
* If provided, a Feedback element is rendered containing this text.
|
|
244
219
|
*/
|
|
245
220
|
feedback: _propTypes.default.string,
|
|
246
|
-
|
|
247
221
|
/**
|
|
248
222
|
* If provided, the checkboxed with this ids are selected on first render.
|
|
249
223
|
*/
|
|
250
224
|
initialCheckedIds: _propTypes.default.arrayOf(_propTypes.default.string),
|
|
251
|
-
|
|
252
225
|
/**
|
|
253
226
|
* If not undefined, the checkboxes with these ids is selected, and the
|
|
254
227
|
* element's selection state will be controlled by its parent using the `onChange` function.
|
|
255
228
|
*/
|
|
256
229
|
checkedIds: _propTypes.default.arrayOf(_propTypes.default.string),
|
|
257
|
-
|
|
258
230
|
/**
|
|
259
231
|
* Function to call on change in selection state. Is required if the selection state is controlled
|
|
260
232
|
* by a parent using checkedId and the input is not readOnly.
|
|
261
233
|
*/
|
|
262
234
|
onChange: _propTypes.default.func,
|
|
263
|
-
|
|
264
235
|
/**
|
|
265
236
|
* If true, the checkboxes cannot be selected by the user and simply show their current state.
|
|
266
237
|
*/
|
|
267
238
|
readOnly: _propTypes.default.bool,
|
|
268
|
-
|
|
269
239
|
/**
|
|
270
240
|
* If true, the checkboxes cannot be interacted with, elements are set as `disabled` and if the
|
|
271
241
|
* theme supports `inactive` appearances rules, these are applied.
|
|
272
242
|
*/
|
|
273
243
|
inactive: _propTypes.default.bool,
|
|
274
|
-
|
|
275
244
|
/**
|
|
276
245
|
* On Web, this is passed to the `name` attribute of the fieldset and each checkbox input.
|
|
277
246
|
*/
|
|
@@ -4,23 +4,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
|
|
10
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
-
|
|
12
9
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
|
-
|
|
14
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
-
|
|
16
11
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
17
|
-
|
|
18
12
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
19
|
-
|
|
20
13
|
/**
|
|
21
14
|
* On Web we need to include an actual input but hide it.
|
|
22
|
-
*/
|
|
23
|
-
const CheckboxInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
15
|
+
*/const CheckboxInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
24
16
|
let {
|
|
25
17
|
checked,
|
|
26
18
|
defaultChecked,
|
|
@@ -31,14 +23,12 @@ const CheckboxInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
31
23
|
onChange,
|
|
32
24
|
value
|
|
33
25
|
} = _ref;
|
|
34
|
-
|
|
35
26
|
const handleClick = event => {
|
|
36
27
|
// Cancel the click dispatched via the label tag, since it's already wrapped
|
|
37
28
|
// in <Pressable>
|
|
38
29
|
event.preventDefault();
|
|
39
30
|
event.stopPropagation();
|
|
40
31
|
};
|
|
41
|
-
|
|
42
32
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
|
|
43
33
|
checked: isControlled ? checked : undefined,
|
|
44
34
|
defaultChecked: isControlled ? undefined : defaultChecked,
|
|
@@ -4,11 +4,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
/**
|
|
9
8
|
* There's no checkbox input on native platforms, so this is a noop.
|
|
10
9
|
*/
|
|
11
10
|
const CheckboxInput = () => null;
|
|
12
|
-
|
|
13
11
|
var _default = CheckboxInput;
|
|
14
12
|
exports.default = _default;
|
package/lib/Checkbox/index.js
CHANGED
|
@@ -10,12 +10,8 @@ Object.defineProperty(exports, "CheckboxGroup", {
|
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
12
|
exports.default = void 0;
|
|
13
|
-
|
|
14
13
|
var _Checkbox = _interopRequireDefault(require("./Checkbox"));
|
|
15
|
-
|
|
16
14
|
var _CheckboxGroup = _interopRequireDefault(require("./CheckboxGroup"));
|
|
17
|
-
|
|
18
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
-
|
|
20
16
|
var _default = _Checkbox.default;
|
|
21
17
|
exports.default = _default;
|
|
@@ -4,35 +4,20 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
|
|
10
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
-
|
|
12
9
|
var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
|
|
13
|
-
|
|
14
10
|
var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
|
|
15
|
-
|
|
16
11
|
var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
|
|
17
|
-
|
|
18
12
|
var _ThemeProvider = require("../ThemeProvider");
|
|
19
|
-
|
|
20
13
|
var _utils = require("../utils");
|
|
21
|
-
|
|
22
14
|
var _Card = require("../Card");
|
|
23
|
-
|
|
24
15
|
var _StackView = _interopRequireDefault(require("../StackView"));
|
|
25
|
-
|
|
26
16
|
var _CheckboxButton = _interopRequireWildcard(require("../Checkbox/CheckboxButton"));
|
|
27
|
-
|
|
28
17
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
29
|
-
|
|
30
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
31
|
-
|
|
32
19
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
33
|
-
|
|
34
20
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
35
|
-
|
|
36
21
|
const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
|
|
37
22
|
const CheckboxCard = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
38
23
|
let {
|
|
@@ -59,21 +44,17 @@ const CheckboxCard = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
59
44
|
initialValue: defaultChecked,
|
|
60
45
|
onChange
|
|
61
46
|
});
|
|
62
|
-
|
|
63
47
|
const handleChange = event => {
|
|
64
48
|
if (!inactive) {
|
|
65
49
|
setIsChecked(!isChecked, event);
|
|
66
50
|
}
|
|
67
51
|
};
|
|
68
|
-
|
|
69
52
|
const uniqueId = (0, _utils.useUniqueId)('CheckboxCard');
|
|
70
53
|
const inputId = id ?? uniqueId;
|
|
71
54
|
const uniqueIconId = (0, _utils.useUniqueId)('CheckboxIcon');
|
|
72
55
|
const iconCheckboxId = iconId ?? uniqueIconId;
|
|
73
56
|
const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('CheckboxCard', tokens, variant);
|
|
74
|
-
|
|
75
57
|
const getCardTokens = cardState => (0, _Card.selectPressableCardTokens)(getTokens(cardState));
|
|
76
|
-
|
|
77
58
|
const {
|
|
78
59
|
themeOptions
|
|
79
60
|
} = (0, _ThemeProvider.useTheme)();
|
|
@@ -100,7 +81,8 @@ const CheckboxCard = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
100
81
|
} = getTokens(cardState);
|
|
101
82
|
const checkboxTokens = (0, _CheckboxButton.selectCheckboxTokens)(themeTokens, 'checkbox');
|
|
102
83
|
const titleTokens = (0, _utils.selectTokens)('Typography', themeTokens);
|
|
103
|
-
const textStyle = (0, _ThemeProvider.applyTextStyles)({
|
|
84
|
+
const textStyle = (0, _ThemeProvider.applyTextStyles)({
|
|
85
|
+
...titleTokens,
|
|
104
86
|
themeOptions
|
|
105
87
|
});
|
|
106
88
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
|
|
@@ -138,78 +120,64 @@ const CheckboxCard = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
|
|
|
138
120
|
});
|
|
139
121
|
});
|
|
140
122
|
CheckboxCard.displayName = 'CheckboxCard';
|
|
141
|
-
CheckboxCard.propTypes = {
|
|
142
|
-
|
|
123
|
+
CheckboxCard.propTypes = {
|
|
124
|
+
...selectedSystemPropTypes,
|
|
143
125
|
/**
|
|
144
126
|
* Content to be displayed at the top of the card alongside the checkbox
|
|
145
127
|
*/
|
|
146
128
|
title: _propTypes.default.string,
|
|
147
|
-
|
|
148
129
|
/**
|
|
149
130
|
* Additional content to be displayed below the checkbox.
|
|
150
131
|
*/
|
|
151
132
|
children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
|
|
152
|
-
|
|
153
133
|
/**
|
|
154
134
|
* Use `checked` for controlled checkbox. For uncontrolled checkbox, use the `defaultChecked` prop.
|
|
155
135
|
*/
|
|
156
136
|
checked: _propTypes.default.bool,
|
|
157
|
-
|
|
158
137
|
/**
|
|
159
138
|
* Use `defaultChecked` to provide the initial value for an uncontrolled checkbox.
|
|
160
139
|
*/
|
|
161
140
|
defaultChecked: _propTypes.default.bool,
|
|
162
|
-
|
|
163
141
|
/**
|
|
164
142
|
* An optional checkboxdescription.
|
|
165
143
|
*/
|
|
166
144
|
description: _propTypes.default.string,
|
|
167
|
-
|
|
168
145
|
/**
|
|
169
146
|
* Checkbox card ID.
|
|
170
147
|
*/
|
|
171
148
|
id: _propTypes.default.string,
|
|
172
|
-
|
|
173
149
|
/**
|
|
174
150
|
* Checkbox icon ID.
|
|
175
151
|
*/
|
|
176
152
|
iconId: _propTypes.default.string,
|
|
177
|
-
|
|
178
153
|
/**
|
|
179
154
|
* Whether the corresponding input is disabled or active.
|
|
180
155
|
*/
|
|
181
156
|
inactive: _propTypes.default.bool,
|
|
182
|
-
|
|
183
157
|
/**
|
|
184
158
|
* The label.
|
|
185
159
|
*/
|
|
186
160
|
label: _propTypes.default.string,
|
|
187
|
-
|
|
188
161
|
/**
|
|
189
162
|
* Associate this checkbox card with a group (set as the name attribute).
|
|
190
163
|
*/
|
|
191
164
|
name: _propTypes.default.string,
|
|
192
|
-
|
|
193
165
|
/**
|
|
194
166
|
* Whether the underlying input triggered a validation error or not.
|
|
195
167
|
*/
|
|
196
168
|
error: _propTypes.default.bool,
|
|
197
|
-
|
|
198
169
|
/**
|
|
199
170
|
* The value. Must be unique within the group.
|
|
200
171
|
*/
|
|
201
172
|
value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool]),
|
|
202
|
-
|
|
203
173
|
/**
|
|
204
174
|
* Callback called when a controlled checkbox card gets interacted with.
|
|
205
175
|
*/
|
|
206
176
|
onChange: _propTypes.default.func,
|
|
207
|
-
|
|
208
177
|
/**
|
|
209
178
|
* checkbox card tokens.
|
|
210
179
|
*/
|
|
211
180
|
tokens: (0, _utils.getTokensPropType)('CheckboxCard'),
|
|
212
|
-
|
|
213
181
|
/**
|
|
214
182
|
* checkbox variant.
|
|
215
183
|
*/
|
|
@@ -217,7 +185,6 @@ CheckboxCard.propTypes = { ...selectedSystemPropTypes,
|
|
|
217
185
|
};
|
|
218
186
|
var _default = CheckboxCard;
|
|
219
187
|
exports.default = _default;
|
|
220
|
-
|
|
221
188
|
const staticStyles = _StyleSheet.default.create({
|
|
222
189
|
alignWithText: {
|
|
223
190
|
justifyContent: 'center'
|
|
@@ -4,10 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _CheckboxCard = _interopRequireDefault(require("./CheckboxCard"));
|
|
9
|
-
|
|
10
8
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
-
|
|
12
9
|
var _default = _CheckboxCard.default;
|
|
13
10
|
exports.default = _default;
|