@sproutsocial/racine 12.20.0 → 12.21.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 +26 -0
- package/README.md +46 -44
- package/__flow__/Avatar/index.js +26 -26
- package/__flow__/Avatar/index.stories.js +8 -8
- package/__flow__/Avatar/index.test.js +13 -13
- package/__flow__/Badge/constants.js +14 -14
- package/__flow__/Badge/index.js +18 -18
- package/__flow__/Badge/index.stories.js +8 -8
- package/__flow__/Badge/index.test.js +43 -43
- package/__flow__/Badge/styles.js +13 -9
- package/__flow__/Banner/index.js +21 -21
- package/__flow__/Banner/index.stories.js +56 -68
- package/__flow__/Banner/index.test.js +32 -34
- package/__flow__/Banner/styles.js +4 -4
- package/__flow__/Box/index.js +4 -4
- package/__flow__/Box/index.stories.js +58 -51
- package/__flow__/Box/index.test.js +7 -7
- package/__flow__/Box/styles.js +6 -6
- package/__flow__/Breadcrumb/index.js +9 -13
- package/__flow__/Breadcrumb/index.stories.js +14 -14
- package/__flow__/Breadcrumb/index.test.js +20 -20
- package/__flow__/Breadcrumb/styles.js +5 -5
- package/__flow__/Button/index.js +23 -23
- package/__flow__/Button/index.stories.js +34 -34
- package/__flow__/Button/styles.js +11 -11
- package/__flow__/Card/index.js +7 -7
- package/__flow__/Card/index.stories.js +14 -14
- package/__flow__/Card/styles.js +7 -7
- package/__flow__/CharacterCounter/index.js +7 -7
- package/__flow__/CharacterCounter/index.stories.js +25 -26
- package/__flow__/CharacterCounter/index.test.js +11 -11
- package/__flow__/CharacterCounter/styles.js +3 -3
- package/__flow__/ChartLegend/index.js +7 -7
- package/__flow__/ChartLegend/index.stories.js +22 -22
- package/__flow__/ChartLegend/index.test.js +27 -27
- package/__flow__/ChartLegend/styles.js +7 -7
- package/__flow__/Checkbox/index.js +10 -10
- package/__flow__/Checkbox/index.stories.js +24 -24
- package/__flow__/Checkbox/index.test.js +25 -25
- package/__flow__/Checkbox/styles.js +27 -28
- package/__flow__/Collapsible/index.js +15 -15
- package/__flow__/Collapsible/index.stories.js +13 -13
- package/__flow__/Collapsible/index.test.js +27 -27
- package/__flow__/Collapsible/styles.js +5 -5
- package/__flow__/DatePicker/DateRangePicker.js +5 -8
- package/__flow__/DatePicker/DateRangePicker.stories.js +19 -19
- package/__flow__/DatePicker/DateRangePicker.test.js +21 -21
- package/__flow__/DatePicker/SingleDatePicker.js +6 -9
- package/__flow__/DatePicker/SingleDatePicker.stories.js +10 -10
- package/__flow__/DatePicker/SingleDatePicker.test.js +21 -23
- package/__flow__/DatePicker/StatefulDateRangePicker.js +6 -6
- package/__flow__/DatePicker/StatefulSingleDatePicker.js +3 -3
- package/__flow__/DatePicker/common.js +13 -13
- package/__flow__/DatePicker/index.js +3 -3
- package/__flow__/DatePicker/styles.js +42 -42
- package/__flow__/Drawer/SlideTransition.js +10 -10
- package/__flow__/Drawer/index.js +29 -29
- package/__flow__/Drawer/index.stories.js +58 -141
- package/__flow__/Drawer/index.test.js +28 -28
- package/__flow__/Drawer/styles.js +4 -4
- package/__flow__/EmptyState/index.js +5 -5
- package/__flow__/EmptyState/index.stories.js +10 -10
- package/__flow__/EmptyState/index.test.js +27 -27
- package/__flow__/EnumIllustrationNames.js +1 -1
- package/__flow__/Fieldset/index.js +14 -14
- package/__flow__/Fieldset/index.stories.js +19 -20
- package/__flow__/Fieldset/index.test.js +14 -14
- package/__flow__/Fieldset/styles.js +5 -5
- package/__flow__/FormField/index.js +14 -14
- package/__flow__/FormField/index.stories.js +31 -21
- package/__flow__/FormField/index.test.js +19 -19
- package/__flow__/Icon/deprecatedIcons.js +36 -36
- package/__flow__/Icon/index.js +17 -17
- package/__flow__/Icon/index.stories.js +30 -30
- package/__flow__/Icon/index.test.js +15 -15
- package/__flow__/Icon/styles.js +12 -12
- package/__flow__/IllustrationViewBoxes.js +1 -1
- package/__flow__/Image/index.js +6 -7
- package/__flow__/Image/index.stories.js +5 -5
- package/__flow__/Image/index.test.js +24 -24
- package/__flow__/Image/styles.js +6 -5
- package/__flow__/Indicator/index.js +7 -7
- package/__flow__/Indicator/index.stories.js +8 -14
- package/__flow__/Indicator/index.test.js +6 -6
- package/__flow__/Indicator/styles.js +6 -6
- package/__flow__/Input/index.js +37 -37
- package/__flow__/Input/index.stories.js +96 -189
- package/__flow__/Input/index.test.js +117 -117
- package/__flow__/Input/styles.js +13 -13
- package/__flow__/KeyboardKey/index.js +5 -5
- package/__flow__/KeyboardKey/index.stories.js +9 -12
- package/__flow__/KeyboardKey/index.test.js +7 -7
- package/__flow__/KeyboardKey/styles.js +4 -4
- package/__flow__/Label/index.js +6 -6
- package/__flow__/Label/index.stories.js +5 -7
- package/__flow__/Label/index.test.js +8 -8
- package/__flow__/Link/constants.js +4 -4
- package/__flow__/Link/index.js +11 -11
- package/__flow__/Link/index.stories.js +61 -102
- package/__flow__/Link/index.test.js +40 -40
- package/__flow__/Link/styles.js +6 -6
- package/__flow__/Listbox/index.js +16 -16
- package/__flow__/Listbox/index.stories.js +35 -35
- package/__flow__/Listbox/index.test.js +63 -65
- package/__flow__/Loader/index.js +12 -12
- package/__flow__/Loader/index.stories.js +10 -10
- package/__flow__/Loader/index.test.js +17 -17
- package/__flow__/Loader/styles.js +9 -13
- package/__flow__/LoaderButton/index.js +25 -25
- package/__flow__/LoaderButton/index.stories.js +7 -7
- package/__flow__/LoaderButton/index.test.js +15 -15
- package/__flow__/Menu/constants.js +8 -8
- package/__flow__/Menu/descendants.js +89 -80
- package/__flow__/Menu/hooks.js +22 -22
- package/__flow__/Menu/index.flow.js +13 -13
- package/__flow__/Menu/index.js +56 -60
- package/__flow__/Menu/index.stories.js +19 -19
- package/__flow__/Menu/index.test.js +22 -22
- package/__flow__/Menu/names.js +4945 -4945
- package/__flow__/Menu/styles.js +5 -5
- package/__flow__/Message/index.js +33 -33
- package/__flow__/Message/index.stories.js +18 -13
- package/__flow__/Message/index.test.js +6 -6
- package/__flow__/Message/styles.js +15 -15
- package/__flow__/Modal/index.js +19 -19
- package/__flow__/Modal/index.stories.js +43 -43
- package/__flow__/Modal/index.test.js +29 -29
- package/__flow__/Modal/styles.js +27 -32
- package/__flow__/Numeral/index.js +22 -22
- package/__flow__/Numeral/index.stories.js +74 -74
- package/__flow__/Numeral/styles.js +3 -3
- package/__flow__/Numeral/tests/A11y.test.js +7 -7
- package/__flow__/Numeral/tests/abbreviate.test.js +40 -40
- package/__flow__/Numeral/tests/currency.test.js +24 -24
- package/__flow__/Numeral/tests/defaults.test.js +20 -20
- package/__flow__/Numeral/tests/invalid.test.js +9 -9
- package/__flow__/Numeral/tests/locale.test.js +38 -38
- package/__flow__/Numeral/tests/precision.test.js +76 -76
- package/__flow__/Numeral/tests/testNumeral.js +11 -11
- package/__flow__/Numeral/tests/zero.test.js +8 -8
- package/__flow__/OverflowList/index.flow.js +2 -2
- package/__flow__/OverflowList/index.js +12 -12
- package/__flow__/OverflowList/index.stories.js +10 -10
- package/__flow__/OverflowList/index.test.js +25 -25
- package/__flow__/OverflowList/styles.js +5 -5
- package/__flow__/PartnerLogo/TypePartnerNames.js +37 -37
- package/__flow__/PartnerLogo/index.js +20 -20
- package/__flow__/PartnerLogo/index.stories.js +52 -52
- package/__flow__/PartnerLogo/styles.js +12 -12
- package/__flow__/Popout/index.js +66 -67
- package/__flow__/Popout/index.stories.js +101 -82
- package/__flow__/Popout/index.test.js +43 -43
- package/__flow__/Popout/styles.js +4 -5
- package/__flow__/Portal/index.js +9 -9
- package/__flow__/Portal/index.stories.js +12 -12
- package/__flow__/Radio/index.js +4 -4
- package/__flow__/Radio/index.stories.js +11 -11
- package/__flow__/Radio/index.test.js +12 -12
- package/__flow__/Radio/styles.js +15 -16
- package/__flow__/SegmentedControl/index.js +7 -7
- package/__flow__/SegmentedControl/index.stories.js +7 -7
- package/__flow__/SegmentedControl/index.test.js +29 -29
- package/__flow__/SegmentedControl/styles.js +10 -9
- package/__flow__/Select/index.js +10 -10
- package/__flow__/Select/index.stories.js +33 -69
- package/__flow__/Select/index.test.js +14 -14
- package/__flow__/Select/styles.js +16 -16
- package/__flow__/Skeleton/index.js +4 -4
- package/__flow__/Skeleton/index.stories.js +5 -5
- package/__flow__/SpotIllustration/illustrationNames.js +118 -117
- package/__flow__/SpotIllustration/index.js +15 -11
- package/__flow__/SpotIllustration/index.stories.js +18 -18
- package/__flow__/SpotIllustration/spotIllustrations/molecule.svg +14 -0
- package/__flow__/Stack/index.js +43 -33
- package/__flow__/Stack/index.stories.js +41 -91
- package/__flow__/Stack/index.test.js +16 -7
- package/__flow__/Switch/index.js +8 -8
- package/__flow__/Switch/index.stories.js +5 -5
- package/__flow__/Switch/index.test.js +25 -29
- package/__flow__/Switch/styles.js +13 -9
- package/__flow__/Table/index.js +17 -17
- package/__flow__/Table/index.stories.js +99 -99
- package/__flow__/Table/index.test.js +32 -32
- package/__flow__/Table/styles.js +4 -4
- package/__flow__/TableCell/index.js +8 -7
- package/__flow__/TableCell/index.stories.js +20 -23
- package/__flow__/TableCell/index.test.js +11 -11
- package/__flow__/TableCell/styles.js +4 -5
- package/__flow__/TableHeaderCell/index.js +14 -14
- package/__flow__/TableHeaderCell/index.stories.js +35 -30
- package/__flow__/TableHeaderCell/index.test.js +11 -11
- package/__flow__/TableHeaderCell/styles.js +4 -4
- package/__flow__/TableRowAccordion/index.js +8 -8
- package/__flow__/TableRowAccordion/index.stories.js +36 -36
- package/__flow__/TableRowAccordion/index.test.js +28 -30
- package/__flow__/TableRowAccordion/styles.js +11 -7
- package/__flow__/Tabs/index.js +11 -11
- package/__flow__/Tabs/index.stories.js +28 -54
- package/__flow__/Tabs/index.test.js +54 -54
- package/__flow__/Tabs/styles.js +6 -7
- package/__flow__/Text/index.js +14 -14
- package/__flow__/Text/index.stories.js +84 -86
- package/__flow__/Text/index.test.js +29 -33
- package/__flow__/Text/styles.js +4 -4
- package/__flow__/Textarea/index.js +5 -5
- package/__flow__/Textarea/index.stories.js +54 -93
- package/__flow__/Textarea/index.test.js +30 -30
- package/__flow__/Textarea/styles.js +6 -6
- package/__flow__/ThemeProvider/index.js +4 -4
- package/__flow__/Toast/index.js +23 -23
- package/__flow__/Toast/index.stories.js +21 -21
- package/__flow__/Toast/styles.js +6 -6
- package/__flow__/ToggleHint/index.js +8 -8
- package/__flow__/ToggleHint/index.test.js +8 -8
- package/__flow__/ToggleHint/styles.js +8 -8
- package/__flow__/Token/index.js +10 -10
- package/__flow__/Token/index.stories.js +49 -54
- package/__flow__/Token/index.test.js +28 -28
- package/__flow__/Token/styles.js +11 -11
- package/__flow__/TokenInput/index.flow.js +1 -1
- package/__flow__/TokenInput/index.js +39 -39
- package/__flow__/TokenInput/index.stories.js +121 -128
- package/__flow__/TokenInput/styles.js +5 -5
- package/__flow__/TokenInput/tests/default/clicking.test.js +13 -13
- package/__flow__/TokenInput/tests/default/deleting.test.js +39 -39
- package/__flow__/TokenInput/tests/default/focusing.test.js +18 -18
- package/__flow__/TokenInput/tests/default/inputting.test.js +23 -23
- package/__flow__/TokenInput/tests/default/pasting.test.js +52 -52
- package/__flow__/TokenInput/tests/default/rendering.test.js +54 -54
- package/__flow__/TokenInput/util.js +4 -4
- package/__flow__/Tooltip/index.js +21 -21
- package/__flow__/Tooltip/index.stories.js +18 -18
- package/__flow__/Tooltip/index.test.js +54 -54
- package/__flow__/Tooltip/styles.js +4 -5
- package/__flow__/VisuallyHidden/index.js +3 -3
- package/__flow__/building-stories.stories.mdx +121 -0
- package/__flow__/dataviz/dataviz.stories.js +4 -4
- package/__flow__/dataviz/index.js +3 -3
- package/__flow__/index.js +72 -72
- package/__flow__/overview.stories.js +60 -0
- package/__flow__/setupTests.js +5 -5
- package/__flow__/systemProps/background.js +3 -3
- package/__flow__/systemProps/border.js +3 -3
- package/__flow__/systemProps/color.js +3 -3
- package/__flow__/systemProps/custom.js +3 -3
- package/__flow__/systemProps/flexbox.js +3 -3
- package/__flow__/systemProps/grid.js +3 -3
- package/__flow__/systemProps/index.js +14 -14
- package/__flow__/systemProps/layout.js +3 -3
- package/__flow__/systemProps/position.js +3 -3
- package/__flow__/systemProps/shadow.js +3 -3
- package/__flow__/systemProps/space.js +3 -7
- package/__flow__/systemProps/systemProps.js +14 -14
- package/__flow__/systemProps/tests/background.test.js +17 -17
- package/__flow__/systemProps/tests/border.test.js +61 -61
- package/__flow__/systemProps/tests/color.test.js +15 -15
- package/__flow__/systemProps/tests/custom.test.js +12 -12
- package/__flow__/systemProps/tests/flexbox.test.js +33 -33
- package/__flow__/systemProps/tests/grid.test.js +31 -31
- package/__flow__/systemProps/tests/layout.test.js +29 -29
- package/__flow__/systemProps/tests/position.test.js +19 -19
- package/__flow__/systemProps/tests/shadow.test.js +11 -11
- package/__flow__/systemProps/tests/space.test.js +11 -11
- package/__flow__/systemProps/tests/types.flow.js +18 -18
- package/__flow__/systemProps/tests/typography.test.js +21 -21
- package/__flow__/systemProps/tests/variant.test.js +9 -9
- package/__flow__/systemProps/types.flow.js +2 -2
- package/__flow__/systemProps/typography.js +4 -4
- package/__flow__/systemProps/variant.js +5 -5
- package/__flow__/themes/dark/dataviz-palette.js +21 -21
- package/__flow__/themes/dark/decorative-palettes.js +1 -1
- package/__flow__/themes/dark/theme.js +16 -16
- package/__flow__/themes/extendedThemes/README.md +1 -1
- package/__flow__/themes/extendedThemes/sproutTheme/dark/theme.js +4 -4
- package/__flow__/themes/extendedThemes/sproutTheme/index.js +2 -2
- package/__flow__/themes/extendedThemes/sproutTheme/light/theme.js +4 -4
- package/__flow__/themes/light/dataviz-palette.js +21 -21
- package/__flow__/themes/light/decorative-palettes.js +1 -1
- package/__flow__/themes/light/literal-colors.js +133 -133
- package/__flow__/themes/light/theme.js +51 -51
- package/__flow__/types/system-props.flow.js +5 -5
- package/__flow__/types/theme.colors.flow.js +2 -2
- package/__flow__/types/theme.flow.js +5 -5
- package/__flow__/utils/a11yTest.js +1 -1
- package/__flow__/utils/chartColors.js +1 -1
- package/__flow__/utils/constants.js +1 -1
- package/__flow__/utils/dataQaLabelQueries.js +2 -2
- package/__flow__/utils/hooks.js +17 -17
- package/__flow__/utils/index.js +4 -4
- package/__flow__/utils/innerText.js +9 -9
- package/__flow__/utils/mixins.js +6 -6
- package/__flow__/utils/react-testing-library.js +6 -6
- package/__flow__/utils/responsiveProps/index.js +3 -3
- package/__flow__/utils/responsiveProps/index.test.js +8 -8
- package/__flow__/utils/system-props.js +3 -3
- package/__flow__/utils/useInteractiveColor.js +5 -5
- package/__flow__/writing-good-stories.stories.mdx +3 -0
- package/bin/racine-codemod.js +12 -12
- package/codemods/__tests__/migrate-2.x-to-3.x.test.js +2 -2
- package/codemods/migrate-2.x-to-3.x.js +29 -30
- package/commonjs/Avatar/index.js +33 -53
- package/commonjs/Badge/constants.js +18 -15
- package/commonjs/Badge/index.js +14 -28
- package/commonjs/Badge/styles.js +3 -9
- package/commonjs/Banner/index.js +16 -37
- package/commonjs/Banner/styles.js +0 -5
- package/commonjs/Box/index.js +2 -9
- package/commonjs/Box/styles.js +0 -4
- package/commonjs/Breadcrumb/index.js +13 -29
- package/commonjs/Breadcrumb/styles.js +1 -4
- package/commonjs/Button/index.js +29 -43
- package/commonjs/Button/styles.js +6 -15
- package/commonjs/Card/index.js +16 -26
- package/commonjs/Card/styles.js +1 -5
- package/commonjs/CharacterCounter/index.js +6 -23
- package/commonjs/CharacterCounter/styles.js +0 -5
- package/commonjs/ChartLegend/index.js +5 -20
- package/commonjs/ChartLegend/styles.js +2 -11
- package/commonjs/Checkbox/index.js +30 -53
- package/commonjs/Checkbox/styles.js +14 -35
- package/commonjs/Collapsible/index.js +31 -54
- package/commonjs/Collapsible/styles.js +3 -6
- package/commonjs/DatePicker/DateRangePicker.js +4 -17
- package/commonjs/DatePicker/SingleDatePicker.js +3 -17
- package/commonjs/DatePicker/StatefulDateRangePicker.js +16 -31
- package/commonjs/DatePicker/StatefulSingleDatePicker.js +7 -20
- package/commonjs/DatePicker/common.js +8 -22
- package/commonjs/DatePicker/index.js +0 -5
- package/commonjs/DatePicker/styles.js +8 -25
- package/commonjs/Drawer/SlideTransition.js +8 -18
- package/commonjs/Drawer/index.js +51 -90
- package/commonjs/Drawer/styles.js +0 -8
- package/commonjs/EmptyState/index.js +8 -20
- package/commonjs/Fieldset/index.js +15 -32
- package/commonjs/Fieldset/styles.js +2 -7
- package/commonjs/FormField/index.js +19 -36
- package/commonjs/Icon/deprecatedIcons.js +36 -36
- package/commonjs/Icon/index.js +19 -37
- package/commonjs/Icon/styles.js +7 -16
- package/commonjs/IllustrationViewBoxes.js +1 -0
- package/commonjs/Image/index.js +13 -41
- package/commonjs/Image/styles.js +1 -7
- package/commonjs/Indicator/index.js +8 -26
- package/commonjs/Indicator/styles.js +1 -7
- package/commonjs/Input/index.js +80 -119
- package/commonjs/Input/styles.js +9 -19
- package/commonjs/KeyboardKey/index.js +3 -20
- package/commonjs/KeyboardKey/styles.js +0 -4
- package/commonjs/Label/index.js +7 -27
- package/commonjs/Link/constants.js +3 -4
- package/commonjs/Link/index.js +16 -28
- package/commonjs/Link/styles.js +1 -8
- package/commonjs/Listbox/index.js +15 -36
- package/commonjs/Loader/index.js +15 -31
- package/commonjs/Loader/styles.js +2 -13
- package/commonjs/LoaderButton/index.js +26 -55
- package/commonjs/Menu/constants.js +9 -8
- package/commonjs/Menu/descendants.js +70 -105
- package/commonjs/Menu/hooks.js +23 -41
- package/commonjs/Menu/index.flow.js +0 -7
- package/commonjs/Menu/index.js +94 -164
- package/commonjs/Menu/names.js +1 -1
- package/commonjs/Menu/styles.js +0 -6
- package/commonjs/Message/index.js +37 -70
- package/commonjs/Message/styles.js +9 -24
- package/commonjs/Modal/index.js +31 -54
- package/commonjs/Modal/styles.js +17 -36
- package/commonjs/Numeral/index.js +39 -67
- package/commonjs/Numeral/styles.js +0 -3
- package/commonjs/Numeral/tests/testNumeral.js +13 -31
- package/commonjs/OverflowList/index.flow.js +0 -2
- package/commonjs/OverflowList/index.js +27 -41
- package/commonjs/OverflowList/styles.js +0 -7
- package/commonjs/PartnerLogo/index.js +19 -33
- package/commonjs/PartnerLogo/styles.js +7 -15
- package/commonjs/Popout/index.js +95 -127
- package/commonjs/Popout/styles.js +0 -5
- package/commonjs/Portal/index.js +8 -31
- package/commonjs/Radio/index.js +18 -42
- package/commonjs/Radio/styles.js +9 -21
- package/commonjs/SegmentedControl/index.js +17 -37
- package/commonjs/SegmentedControl/styles.js +2 -12
- package/commonjs/Select/index.js +24 -47
- package/commonjs/Select/styles.js +12 -24
- package/commonjs/Skeleton/index.js +0 -5
- package/commonjs/SpotIllustration/illustrationNames.js +1 -1
- package/commonjs/SpotIllustration/index.js +5 -11
- package/commonjs/Stack/index.js +27 -42
- package/commonjs/Switch/index.js +17 -42
- package/commonjs/Switch/styles.js +3 -11
- package/commonjs/Table/index.js +26 -50
- package/commonjs/Table/styles.js +0 -4
- package/commonjs/TableCell/index.js +12 -30
- package/commonjs/TableCell/styles.js +0 -5
- package/commonjs/TableHeaderCell/index.js +27 -56
- package/commonjs/TableHeaderCell/styles.js +0 -6
- package/commonjs/TableRowAccordion/index.js +12 -37
- package/commonjs/TableRowAccordion/styles.js +2 -9
- package/commonjs/Tabs/index.js +16 -66
- package/commonjs/Tabs/styles.js +2 -11
- package/commonjs/Text/index.js +12 -25
- package/commonjs/Text/styles.js +1 -6
- package/commonjs/Textarea/index.js +31 -55
- package/commonjs/Textarea/styles.js +2 -9
- package/commonjs/ThemeProvider/index.js +1 -10
- package/commonjs/Toast/index.js +19 -42
- package/commonjs/Toast/styles.js +1 -7
- package/commonjs/ToggleHint/index.js +15 -39
- package/commonjs/ToggleHint/styles.js +2 -9
- package/commonjs/Token/index.js +15 -29
- package/commonjs/Token/styles.js +5 -12
- package/commonjs/TokenInput/index.js +70 -122
- package/commonjs/TokenInput/styles.js +1 -7
- package/commonjs/TokenInput/util.js +2 -7
- package/commonjs/Tooltip/index.js +40 -63
- package/commonjs/Tooltip/styles.js +1 -5
- package/commonjs/VisuallyHidden/index.js +0 -4
- package/commonjs/dataviz/index.js +0 -4
- package/commonjs/index.js +0 -129
- package/commonjs/systemProps/background.js +0 -1
- package/commonjs/systemProps/border.js +0 -1
- package/commonjs/systemProps/color.js +0 -1
- package/commonjs/systemProps/custom.js +0 -1
- package/commonjs/systemProps/flexbox.js +0 -1
- package/commonjs/systemProps/grid.js +0 -1
- package/commonjs/systemProps/index.js +0 -28
- package/commonjs/systemProps/layout.js +0 -1
- package/commonjs/systemProps/position.js +0 -1
- package/commonjs/systemProps/shadow.js +0 -1
- package/commonjs/systemProps/space.js +1 -2
- package/commonjs/systemProps/systemProps.js +0 -13
- package/commonjs/systemProps/tests/types.flow.js +25 -22
- package/commonjs/systemProps/typography.js +0 -1
- package/commonjs/systemProps/variant.js +2 -3
- package/commonjs/themes/dark/dataviz-palette.js +20 -22
- package/commonjs/themes/dark/decorative-palettes.js +0 -2
- package/commonjs/themes/dark/theme.js +13 -27
- package/commonjs/themes/extendedThemes/sproutTheme/dark/theme.js +2 -9
- package/commonjs/themes/extendedThemes/sproutTheme/index.js +0 -5
- package/commonjs/themes/extendedThemes/sproutTheme/light/theme.js +2 -9
- package/commonjs/themes/light/dataviz-palette.js +20 -22
- package/commonjs/themes/light/decorative-palettes.js +0 -2
- package/commonjs/themes/light/literal-colors.js +132 -134
- package/commonjs/themes/light/theme.js +43 -59
- package/commonjs/types/system-props.flow.js +1 -1
- package/commonjs/types/theme.colors.flow.js +0 -2
- package/commonjs/types/theme.flow.js +0 -1
- package/commonjs/utils/a11yTest.js +3 -10
- package/commonjs/utils/chartColors.js +0 -1
- package/commonjs/utils/constants.js +1 -1
- package/commonjs/utils/dataQaLabelQueries.js +12 -21
- package/commonjs/utils/hooks.js +39 -70
- package/commonjs/utils/index.js +2 -9
- package/commonjs/utils/innerText.js +10 -14
- package/commonjs/utils/mixins.js +2 -7
- package/commonjs/utils/react-testing-library.js +4 -26
- package/commonjs/utils/responsiveProps/index.js +1 -11
- package/commonjs/utils/system-props.js +2 -5
- package/commonjs/utils/useInteractiveColor.js +6 -8
- package/dist/illustration.svg +1 -1
- package/dist/illustrationList.js +1 -1
- package/lib/Avatar/index.js +40 -47
- package/lib/Badge/constants.js +19 -15
- package/lib/Badge/index.js +18 -25
- package/lib/Badge/styles.js +8 -6
- package/lib/Banner/index.js +20 -32
- package/lib/Banner/styles.js +3 -2
- package/lib/Box/index.js +4 -5
- package/lib/Box/styles.js +3 -2
- package/lib/Breadcrumb/index.js +19 -27
- package/lib/Breadcrumb/styles.js +3 -2
- package/lib/Button/index.js +31 -38
- package/lib/Button/styles.js +14 -11
- package/lib/Card/index.js +18 -24
- package/lib/Card/styles.js +5 -4
- package/lib/CharacterCounter/index.js +8 -20
- package/lib/CharacterCounter/styles.js +3 -2
- package/lib/ChartLegend/index.js +9 -17
- package/lib/ChartLegend/styles.js +5 -4
- package/lib/Checkbox/index.js +32 -51
- package/lib/Checkbox/styles.js +21 -26
- package/lib/Collapsible/index.js +36 -51
- package/lib/Collapsible/styles.js +6 -5
- package/lib/DatePicker/DateRangePicker.js +8 -14
- package/lib/DatePicker/SingleDatePicker.js +7 -13
- package/lib/DatePicker/StatefulDateRangePicker.js +19 -26
- package/lib/DatePicker/StatefulSingleDatePicker.js +9 -15
- package/lib/DatePicker/common.js +14 -13
- package/lib/DatePicker/index.js +2 -2
- package/lib/DatePicker/styles.js +12 -22
- package/lib/Drawer/SlideTransition.js +11 -14
- package/lib/Drawer/index.js +64 -88
- package/lib/Drawer/styles.js +4 -3
- package/lib/EmptyState/index.js +11 -17
- package/lib/Fieldset/index.js +19 -29
- package/lib/Fieldset/styles.js +5 -4
- package/lib/FormField/index.js +27 -33
- package/lib/Icon/deprecatedIcons.js +36 -36
- package/lib/Icon/index.js +25 -34
- package/lib/Icon/styles.js +11 -13
- package/lib/IllustrationViewBoxes.js +1 -0
- package/lib/Image/index.js +15 -38
- package/lib/Image/styles.js +4 -4
- package/lib/Indicator/index.js +11 -23
- package/lib/Indicator/styles.js +5 -5
- package/lib/Input/index.js +87 -115
- package/lib/Input/styles.js +13 -15
- package/lib/KeyboardKey/index.js +6 -17
- package/lib/KeyboardKey/styles.js +3 -2
- package/lib/Label/index.js +10 -24
- package/lib/Link/constants.js +5 -4
- package/lib/Link/index.js +18 -25
- package/lib/Link/styles.js +6 -5
- package/lib/Listbox/index.js +21 -29
- package/lib/Loader/index.js +17 -29
- package/lib/Loader/styles.js +6 -8
- package/lib/LoaderButton/index.js +34 -51
- package/lib/Menu/constants.js +10 -8
- package/lib/Menu/descendants.js +73 -94
- package/lib/Menu/hooks.js +28 -39
- package/lib/Menu/index.flow.js +6 -5
- package/lib/Menu/index.js +113 -150
- package/lib/Menu/names.js +1 -1
- package/lib/Menu/styles.js +4 -3
- package/lib/Message/index.js +42 -66
- package/lib/Message/styles.js +15 -23
- package/lib/Modal/index.js +38 -51
- package/lib/Modal/styles.js +23 -32
- package/lib/Numeral/index.js +45 -64
- package/lib/Numeral/styles.js +3 -2
- package/lib/Numeral/tests/testNumeral.js +17 -27
- package/lib/OverflowList/index.flow.js +2 -1
- package/lib/OverflowList/index.js +31 -38
- package/lib/OverflowList/styles.js +5 -4
- package/lib/PartnerLogo/index.js +23 -31
- package/lib/PartnerLogo/styles.js +11 -12
- package/lib/Popout/index.js +105 -121
- package/lib/Popout/styles.js +3 -3
- package/lib/Portal/index.js +11 -29
- package/lib/Radio/index.js +20 -40
- package/lib/Radio/styles.js +14 -14
- package/lib/SegmentedControl/index.js +21 -34
- package/lib/SegmentedControl/styles.js +7 -9
- package/lib/Select/index.js +27 -44
- package/lib/Select/styles.js +16 -20
- package/lib/Skeleton/index.js +7 -4
- package/lib/SpotIllustration/illustrationNames.js +2 -1
- package/lib/SpotIllustration/index.js +9 -10
- package/lib/Stack/index.js +31 -39
- package/lib/Switch/index.js +21 -39
- package/lib/Switch/styles.js +8 -7
- package/lib/Table/index.js +30 -40
- package/lib/Table/styles.js +3 -2
- package/lib/TableCell/index.js +14 -27
- package/lib/TableCell/styles.js +3 -3
- package/lib/TableHeaderCell/index.js +30 -52
- package/lib/TableHeaderCell/styles.js +3 -2
- package/lib/TableRowAccordion/index.js +16 -34
- package/lib/TableRowAccordion/styles.js +5 -3
- package/lib/Tabs/index.js +18 -63
- package/lib/Tabs/styles.js +6 -6
- package/lib/Text/index.js +15 -21
- package/lib/Text/styles.js +4 -3
- package/lib/Textarea/index.js +33 -53
- package/lib/Textarea/styles.js +6 -5
- package/lib/ThemeProvider/index.js +4 -7
- package/lib/Toast/index.js +26 -37
- package/lib/Toast/styles.js +5 -4
- package/lib/ToggleHint/index.js +18 -36
- package/lib/ToggleHint/styles.js +6 -5
- package/lib/Token/index.js +20 -26
- package/lib/Token/styles.js +10 -9
- package/lib/TokenInput/index.js +78 -118
- package/lib/TokenInput/styles.js +5 -4
- package/lib/TokenInput/util.js +5 -3
- package/lib/Tooltip/index.js +45 -60
- package/lib/Tooltip/styles.js +4 -4
- package/lib/VisuallyHidden/index.js +3 -2
- package/lib/dataviz/index.js +4 -3
- package/lib/index.js +66 -64
- package/lib/systemProps/background.js +3 -1
- package/lib/systemProps/border.js +3 -1
- package/lib/systemProps/color.js +3 -1
- package/lib/systemProps/custom.js +3 -1
- package/lib/systemProps/flexbox.js +3 -1
- package/lib/systemProps/grid.js +3 -1
- package/lib/systemProps/index.js +16 -14
- package/lib/systemProps/layout.js +3 -1
- package/lib/systemProps/position.js +3 -1
- package/lib/systemProps/shadow.js +3 -1
- package/lib/systemProps/space.js +2 -1
- package/lib/systemProps/systemProps.js +14 -13
- package/lib/systemProps/tests/types.flow.js +27 -22
- package/lib/systemProps/typography.js +3 -1
- package/lib/systemProps/variant.js +4 -3
- package/lib/themes/dark/dataviz-palette.js +23 -21
- package/lib/themes/dark/decorative-palettes.js +3 -1
- package/lib/themes/dark/theme.js +20 -23
- package/lib/themes/extendedThemes/sproutTheme/dark/theme.js +4 -7
- package/lib/themes/extendedThemes/sproutTheme/index.js +3 -2
- package/lib/themes/extendedThemes/sproutTheme/light/theme.js +4 -7
- package/lib/themes/light/dataviz-palette.js +23 -21
- package/lib/themes/light/decorative-palettes.js +3 -1
- package/lib/themes/light/literal-colors.js +135 -133
- package/lib/themes/light/theme.js +54 -55
- package/lib/types/system-props.flow.js +1 -1
- package/lib/types/theme.colors.flow.js +4 -2
- package/lib/types/theme.flow.js +3 -2
- package/lib/utils/a11yTest.js +5 -8
- package/lib/utils/chartColors.js +3 -1
- package/lib/utils/constants.js +3 -1
- package/lib/utils/dataQaLabelQueries.js +13 -21
- package/lib/utils/hooks.js +41 -64
- package/lib/utils/index.js +2 -5
- package/lib/utils/innerText.js +12 -14
- package/lib/utils/mixins.js +6 -5
- package/lib/utils/react-testing-library.js +10 -20
- package/lib/utils/responsiveProps/index.js +3 -8
- package/lib/utils/system-props.js +4 -3
- package/lib/utils/useInteractiveColor.js +10 -9
- package/package.json +6 -13
package/commonjs/Popout/index.js
CHANGED
|
@@ -3,62 +3,45 @@
|
|
|
3
3
|
exports.__esModule = true;
|
|
4
4
|
exports.default = Popout;
|
|
5
5
|
exports.placements = void 0;
|
|
6
|
-
|
|
7
6
|
var React = _interopRequireWildcard(require("react"));
|
|
8
|
-
|
|
9
7
|
var _reactSpring = require("react-spring");
|
|
10
|
-
|
|
11
8
|
var _seedsMotionUnitless = require("@sproutsocial/seeds-motion/dist/seeds-motion-unitless");
|
|
12
|
-
|
|
13
9
|
var _styles = require("./styles");
|
|
14
|
-
|
|
15
10
|
var _Portal = _interopRequireDefault(require("../Portal"));
|
|
16
|
-
|
|
17
11
|
var _Box = _interopRequireDefault(require("../Box"));
|
|
18
|
-
|
|
19
12
|
var _reactPopper = require("react-popper");
|
|
20
|
-
|
|
21
13
|
var _hooks = require("../utils/hooks");
|
|
22
|
-
|
|
23
14
|
var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
|
|
24
|
-
|
|
25
15
|
var _excluded = ["isOpen", "setIsOpen", "content", "children", "placement", "fullWidth", "zIndex", "focusOnContent", "onOpen", "onClose", "qa", "popperProps", "scheduleUpdateRef", "appendToBody", "focusLockProps"],
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
16
|
+
_excluded2 = ["autoFocus", "returnFocus"],
|
|
17
|
+
_excluded3 = ["children"];
|
|
29
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
30
|
-
|
|
31
19
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
32
|
-
|
|
33
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; }
|
|
34
|
-
|
|
35
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
36
|
-
|
|
21
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
37
22
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
38
|
-
|
|
39
23
|
var placements = {
|
|
40
|
-
auto:
|
|
41
|
-
top:
|
|
42
|
-
right:
|
|
43
|
-
bottom:
|
|
44
|
-
left:
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
};
|
|
54
|
-
|
|
24
|
+
auto: 'auto',
|
|
25
|
+
top: 'top',
|
|
26
|
+
right: 'right',
|
|
27
|
+
bottom: 'bottom',
|
|
28
|
+
left: 'left',
|
|
29
|
+
'top-start': 'top-start',
|
|
30
|
+
'right-start': 'right-start',
|
|
31
|
+
'bottom-start': 'bottom-start',
|
|
32
|
+
'left-start': 'left-start',
|
|
33
|
+
'top-end': 'top-end',
|
|
34
|
+
'right-end': 'right-end',
|
|
35
|
+
'bottom-end': 'bottom-end',
|
|
36
|
+
'left-end': 'left-end'
|
|
37
|
+
};
|
|
38
|
+
// Seeds docs can't parse $Keys<typeof placements> yet
|
|
55
39
|
exports.placements = placements;
|
|
56
|
-
|
|
57
40
|
var doesRefContainEventTarget = function doesRefContainEventTarget(ref, event) {
|
|
58
41
|
return ref.current && event.target instanceof Node && ref.current.contains(event.target);
|
|
59
|
-
};
|
|
60
|
-
|
|
42
|
+
};
|
|
61
43
|
|
|
44
|
+
// Transition definitions for fading in and out
|
|
62
45
|
var transitionConfig = {
|
|
63
46
|
from: {
|
|
64
47
|
opacity: 0
|
|
@@ -73,40 +56,36 @@ var transitionConfig = {
|
|
|
73
56
|
duration: _seedsMotionUnitless.MOTION_DURATION_FAST * 1000
|
|
74
57
|
}
|
|
75
58
|
};
|
|
76
|
-
|
|
77
59
|
function Popout(_ref) {
|
|
78
60
|
var isOpen = _ref.isOpen,
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
61
|
+
setIsOpen = _ref.setIsOpen,
|
|
62
|
+
content = _ref.content,
|
|
63
|
+
children = _ref.children,
|
|
64
|
+
_ref$placement = _ref.placement,
|
|
65
|
+
placement = _ref$placement === void 0 ? 'auto' : _ref$placement,
|
|
66
|
+
_ref$fullWidth = _ref.fullWidth,
|
|
67
|
+
fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
|
|
68
|
+
_ref$zIndex = _ref.zIndex,
|
|
69
|
+
zIndex = _ref$zIndex === void 0 ? 7 : _ref$zIndex,
|
|
70
|
+
_ref$focusOnContent = _ref.focusOnContent,
|
|
71
|
+
focusOnContent = _ref$focusOnContent === void 0 ? true : _ref$focusOnContent,
|
|
72
|
+
onOpen = _ref.onOpen,
|
|
73
|
+
onClose = _ref.onClose,
|
|
74
|
+
_ref$qa = _ref.qa,
|
|
75
|
+
qa = _ref$qa === void 0 ? {} : _ref$qa,
|
|
76
|
+
popperProps = _ref.popperProps,
|
|
77
|
+
_ref$scheduleUpdateRe = _ref.scheduleUpdateRef,
|
|
78
|
+
scheduleUpdateRef = _ref$scheduleUpdateRe === void 0 ? function () {} : _ref$scheduleUpdateRe,
|
|
79
|
+
_ref$appendToBody = _ref.appendToBody,
|
|
80
|
+
appendToBody = _ref$appendToBody === void 0 ? true : _ref$appendToBody,
|
|
81
|
+
_ref$focusLockProps = _ref.focusLockProps,
|
|
82
|
+
focusLockProps = _ref$focusLockProps === void 0 ? {} : _ref$focusLockProps,
|
|
83
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
103
84
|
var PopoutComponentWrapper = appendToBody ? _Portal.default : React.Fragment;
|
|
104
|
-
|
|
105
85
|
var _useState = (0, React.useState)(false),
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
var isControlled = typeof isOpen === "boolean";
|
|
86
|
+
isInternalShown = _useState[0],
|
|
87
|
+
setIsInternalShown = _useState[1];
|
|
88
|
+
var isControlled = typeof isOpen === 'boolean';
|
|
110
89
|
var isShown = isControlled ? isOpen : isInternalShown;
|
|
111
90
|
var setIsShown = (0, React.useMemo)(function () {
|
|
112
91
|
return isControlled && setIsOpen ? setIsOpen : function (nextIsShown, e) {
|
|
@@ -115,24 +94,23 @@ function Popout(_ref) {
|
|
|
115
94
|
}, [isControlled, setIsOpen]);
|
|
116
95
|
var targetRef = (0, React.useRef)();
|
|
117
96
|
var popoutRef = (0, React.useRef)();
|
|
118
|
-
var isFirstRender = (0, React.useRef)(true);
|
|
119
|
-
|
|
97
|
+
var isFirstRender = (0, React.useRef)(true);
|
|
98
|
+
// This callback will automatically trigger a recalculation of the popout position if the content is changed
|
|
120
99
|
var scheduleUpdateCallback = (0, React.useRef)(function () {});
|
|
121
100
|
(0, _hooks.useMutationObserver)(popoutRef.current, {
|
|
122
101
|
childList: true,
|
|
123
102
|
characterData: true,
|
|
124
103
|
subtree: true
|
|
125
104
|
}, scheduleUpdateCallback.current);
|
|
126
|
-
|
|
127
105
|
var _focusLockProps$autoF = focusLockProps.autoFocus,
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
106
|
+
autoFocus = _focusLockProps$autoF === void 0 ? true : _focusLockProps$autoF,
|
|
107
|
+
_focusLockProps$retur = focusLockProps.returnFocus,
|
|
108
|
+
returnFocus = _focusLockProps$retur === void 0 ? true : _focusLockProps$retur,
|
|
109
|
+
restFocusLockProps = _objectWithoutPropertiesLoose(focusLockProps, _excluded2);
|
|
110
|
+
var isInvalidContent = content === null || content === undefined;
|
|
132
111
|
|
|
133
|
-
|
|
112
|
+
// Callbacks for showing, hiding, and toggling visibility of the popout
|
|
134
113
|
// (Not used when isOpen is passed explicitly)
|
|
135
|
-
|
|
136
114
|
var show = (0, React.useCallback)(function () {
|
|
137
115
|
return setIsShown(true);
|
|
138
116
|
}, [setIsShown]);
|
|
@@ -144,7 +122,6 @@ function Popout(_ref) {
|
|
|
144
122
|
}, [isShown, setIsShown]);
|
|
145
123
|
(0, React.useEffect)(function () {
|
|
146
124
|
var documentBody = document.body;
|
|
147
|
-
|
|
148
125
|
if (isShown && documentBody) {
|
|
149
126
|
// Callback passed to a click handler attached to document.body,
|
|
150
127
|
// allowing user to close the popout by clicking outside
|
|
@@ -152,78 +129,74 @@ function Popout(_ref) {
|
|
|
152
129
|
if (doesRefContainEventTarget(targetRef, e) || doesRefContainEventTarget(popoutRef, e)) {
|
|
153
130
|
return;
|
|
154
131
|
}
|
|
155
|
-
|
|
156
132
|
setIsShown(false, e);
|
|
157
|
-
};
|
|
158
|
-
|
|
133
|
+
};
|
|
159
134
|
|
|
135
|
+
// Callback for allowing user to close by keying "esc"
|
|
160
136
|
var onEsc = function onEsc(e) {
|
|
161
137
|
// older browsers use "Esc"
|
|
162
|
-
if ([
|
|
138
|
+
if (['Escape', 'Esc'].includes(e.key)) {
|
|
163
139
|
// stop propagation to avoid interacting with other components when popout is shown
|
|
164
140
|
// ie if we have a popout shown in a modal and hit esc, we don't want to close both the popout and modal
|
|
165
141
|
e.stopPropagation();
|
|
166
142
|
setIsShown(false, e);
|
|
167
143
|
}
|
|
168
144
|
};
|
|
169
|
-
|
|
170
|
-
documentBody.addEventListener(
|
|
171
|
-
documentBody.addEventListener("keydown", onEsc, false);
|
|
145
|
+
documentBody.addEventListener('click', bodyClick, false);
|
|
146
|
+
documentBody.addEventListener('keydown', onEsc, false);
|
|
172
147
|
return function () {
|
|
173
|
-
documentBody.removeEventListener(
|
|
174
|
-
documentBody.removeEventListener(
|
|
148
|
+
documentBody.removeEventListener('click', bodyClick, false);
|
|
149
|
+
documentBody.removeEventListener('keydown', onEsc, false);
|
|
175
150
|
};
|
|
176
151
|
}
|
|
177
|
-
}, [isShown, setIsShown]);
|
|
152
|
+
}, [isShown, setIsShown]);
|
|
178
153
|
|
|
154
|
+
// Manage onOpen and onClose callbacks
|
|
179
155
|
(0, React.useEffect)(function () {
|
|
180
156
|
// Don't fire onClose on the first render
|
|
181
157
|
if (isFirstRender.current) {
|
|
182
158
|
isFirstRender.current = false;
|
|
183
159
|
return;
|
|
184
160
|
}
|
|
185
|
-
|
|
186
161
|
if (!onOpen && !onClose) {
|
|
187
162
|
return;
|
|
188
163
|
}
|
|
189
|
-
|
|
190
164
|
if (isShown && onOpen) {
|
|
191
165
|
onOpen();
|
|
192
166
|
}
|
|
193
|
-
|
|
194
167
|
if (!isShown && onClose) {
|
|
195
168
|
onClose();
|
|
196
|
-
}
|
|
197
|
-
|
|
169
|
+
}
|
|
170
|
+
// eslint-disable-next-line
|
|
198
171
|
}, [isShown]);
|
|
199
|
-
var transitions = (0, _reactSpring.useTransition)(isShown, null, transitionConfig);
|
|
172
|
+
var transitions = (0, _reactSpring.useTransition)(isShown, null, transitionConfig);
|
|
200
173
|
|
|
174
|
+
// WAI-Aria properties for the popout trigger
|
|
201
175
|
var ariaProps = (0, React.useMemo)(function () {
|
|
202
176
|
return {
|
|
203
|
-
|
|
204
|
-
|
|
177
|
+
'aria-expanded': isShown,
|
|
178
|
+
'aria-haspopup': true
|
|
205
179
|
};
|
|
206
|
-
}, [isShown]);
|
|
180
|
+
}, [isShown]);
|
|
181
|
+
|
|
182
|
+
// In cases where a controlled popout is used (e.g. props.isOpen is true), we need
|
|
207
183
|
// to wait for the targetRef to receive a value before rendering the popout. Otherwise,
|
|
208
184
|
// the Popout component renders, but doesn't know how to position itself due the
|
|
209
185
|
// `refereElement` property being undefined.
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
186
|
+
var _useState2 = (0, React.useState)(
|
|
187
|
+
// Only trigger this shouldRenderPopout logic when using a controlled component.
|
|
188
|
+
// The reason for that is because controlled components may render the popout
|
|
189
|
+
// immediately before the targetRef has a value set to it.
|
|
190
|
+
!isControlled),
|
|
191
|
+
shouldRenderPopout = _useState2[0],
|
|
192
|
+
setShouldRenderPopout = _useState2[1];
|
|
218
193
|
var childrenRef = function childrenRef(el) {
|
|
219
194
|
targetRef.current = el;
|
|
220
|
-
|
|
221
195
|
if (targetRef.current) {
|
|
222
196
|
setShouldRenderPopout(true);
|
|
223
197
|
}
|
|
224
198
|
};
|
|
225
|
-
|
|
226
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, typeof children === "function" ? children({
|
|
199
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, typeof children === 'function' ? children({
|
|
227
200
|
ref: childrenRef,
|
|
228
201
|
toggle: toggle,
|
|
229
202
|
show: show,
|
|
@@ -235,8 +208,8 @@ function Popout(_ref) {
|
|
|
235
208
|
onClick: toggle
|
|
236
209
|
} : undefined))), shouldRenderPopout && !isInvalidContent && transitions.map(function (_ref2) {
|
|
237
210
|
var item = _ref2.item,
|
|
238
|
-
|
|
239
|
-
|
|
211
|
+
key = _ref2.key,
|
|
212
|
+
props = _ref2.props;
|
|
240
213
|
return item && /*#__PURE__*/React.createElement(PopoutComponentWrapper, {
|
|
241
214
|
key: key
|
|
242
215
|
}, /*#__PURE__*/React.createElement(_reactPopper.Popper, _extends({
|
|
@@ -244,50 +217,46 @@ function Popout(_ref) {
|
|
|
244
217
|
placement: placement,
|
|
245
218
|
modifiers: {
|
|
246
219
|
preventOverflow: {
|
|
247
|
-
boundariesElement:
|
|
220
|
+
boundariesElement: 'viewport'
|
|
248
221
|
}
|
|
249
222
|
}
|
|
250
223
|
}, popperProps), function (_ref3) {
|
|
251
224
|
var ref = _ref3.ref,
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
225
|
+
style = _ref3.style,
|
|
226
|
+
placement = _ref3.placement,
|
|
227
|
+
outOfBoundaries = _ref3.outOfBoundaries,
|
|
228
|
+
scheduleUpdate = _ref3.scheduleUpdate;
|
|
257
229
|
var interceptRef = function interceptRef(el) {
|
|
258
230
|
popoutRef.current = el;
|
|
259
231
|
ref(el);
|
|
260
232
|
};
|
|
261
|
-
|
|
262
233
|
scheduleUpdateCallback.current = scheduleUpdate;
|
|
263
234
|
scheduleUpdateRef(scheduleUpdate);
|
|
264
235
|
return /*#__PURE__*/React.createElement("div", _extends({
|
|
265
236
|
ref: interceptRef,
|
|
266
237
|
style: _extends({}, style, {
|
|
267
238
|
zIndex: zIndex,
|
|
268
|
-
width: fullWidth && targetRef.current ? targetRef.current.offsetWidth :
|
|
239
|
+
width: fullWidth && targetRef.current ? targetRef.current.offsetWidth : 'initial'
|
|
269
240
|
}),
|
|
270
241
|
"data-placement": placement,
|
|
271
|
-
"data-qa-popout":
|
|
272
|
-
"data-qa-popout-isopen": isOpen === true
|
|
273
|
-
|
|
242
|
+
"data-qa-popout": '',
|
|
243
|
+
"data-qa-popout-isopen": isOpen === true
|
|
244
|
+
// $FlowIssue - upgrade v0.112.0
|
|
274
245
|
}, rest), item && !outOfBoundaries && /*#__PURE__*/React.createElement(_reactSpring.animated.div, {
|
|
275
246
|
style: props
|
|
276
247
|
}, /*#__PURE__*/React.createElement(_reactFocusLock.default, _extends({
|
|
277
248
|
autoFocus: autoFocus,
|
|
278
249
|
returnFocus: returnFocus,
|
|
279
250
|
disabled: !focusOnContent
|
|
280
|
-
}, restFocusLockProps), typeof content ===
|
|
251
|
+
}, restFocusLockProps), typeof content === 'function' && content({
|
|
281
252
|
hide: hide
|
|
282
|
-
}), typeof content !==
|
|
253
|
+
}), typeof content !== 'function' && content)));
|
|
283
254
|
}));
|
|
284
255
|
}));
|
|
285
256
|
}
|
|
286
|
-
|
|
287
257
|
var PopoutContent = function PopoutContent(_ref4) {
|
|
288
258
|
var children = _ref4.children,
|
|
289
|
-
|
|
290
|
-
|
|
259
|
+
rest = _objectWithoutPropertiesLoose(_ref4, _excluded3);
|
|
291
260
|
return /*#__PURE__*/React.createElement(_Box.default, _extends({
|
|
292
261
|
bg: "container.background.base",
|
|
293
262
|
color: "text.body",
|
|
@@ -299,6 +268,5 @@ var PopoutContent = function PopoutContent(_ref4) {
|
|
|
299
268
|
m: 300
|
|
300
269
|
}, rest), children);
|
|
301
270
|
};
|
|
302
|
-
|
|
303
271
|
Popout.Content = PopoutContent;
|
|
304
|
-
Popout.Content.displayName =
|
|
272
|
+
Popout.Content.displayName = 'Popout.Content';
|
|
@@ -2,17 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
exports.__esModule = true;
|
|
4
4
|
exports.TargetWrapper = void 0;
|
|
5
|
-
|
|
6
5
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
7
|
-
|
|
8
6
|
var _systemProps = require("../utils/system-props");
|
|
9
|
-
|
|
10
7
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
8
|
|
|
12
|
-
// eslint-disable-next-line prettier/prettier
|
|
13
9
|
var TargetWrapper = _styledComponents.default.div.withConfig({
|
|
14
10
|
displayName: "styles__TargetWrapper",
|
|
15
11
|
componentId: "sc-qo3sn-0"
|
|
16
12
|
})(["display:inline-block;", " ", ""], _systemProps.COMMON, _systemProps.LAYOUT);
|
|
17
|
-
|
|
18
13
|
exports.TargetWrapper = TargetWrapper;
|
package/commonjs/Portal/index.js
CHANGED
|
@@ -2,86 +2,63 @@
|
|
|
2
2
|
|
|
3
3
|
exports.__esModule = true;
|
|
4
4
|
exports.default = void 0;
|
|
5
|
-
|
|
6
5
|
var React = _interopRequireWildcard(require("react"));
|
|
7
|
-
|
|
8
6
|
var _reactDom = require("react-dom");
|
|
9
|
-
|
|
10
7
|
var _utils = require("../utils");
|
|
11
|
-
|
|
12
8
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
13
|
-
|
|
14
9
|
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; }
|
|
15
|
-
|
|
16
10
|
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
|
|
17
|
-
|
|
18
|
-
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
19
|
-
|
|
11
|
+
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
20
12
|
var Portal = /*#__PURE__*/function (_React$Component) {
|
|
21
13
|
_inheritsLoose(Portal, _React$Component);
|
|
22
|
-
|
|
23
14
|
function Portal(props) {
|
|
24
15
|
var _this;
|
|
25
|
-
|
|
26
16
|
_this = _React$Component.call(this, props) || this;
|
|
27
17
|
_this.el = null;
|
|
28
|
-
|
|
29
18
|
if ((0, _utils.canUseDOM)()) {
|
|
30
19
|
var as = props.as,
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
20
|
+
el = props.el,
|
|
21
|
+
id = props.id;
|
|
34
22
|
if (el) {
|
|
35
23
|
_this.el = el;
|
|
36
24
|
} else {
|
|
37
25
|
_this.el = document.createElement(as);
|
|
38
|
-
|
|
39
|
-
_this.el.setAttribute("data-racine-portal", id);
|
|
26
|
+
_this.el.setAttribute('data-racine-portal', id);
|
|
40
27
|
}
|
|
41
28
|
}
|
|
42
|
-
|
|
43
29
|
return _this;
|
|
44
30
|
}
|
|
45
|
-
|
|
46
31
|
var _proto = Portal.prototype;
|
|
47
|
-
|
|
48
32
|
_proto.componentDidMount = function componentDidMount() {
|
|
49
33
|
if ((0, _utils.canUseDOM)() && this.el) {
|
|
50
34
|
var _this$props$container = this.props.container,
|
|
51
|
-
|
|
52
|
-
|
|
35
|
+
container = _this$props$container === void 0 ? document.body : _this$props$container;
|
|
53
36
|
if (container) {
|
|
54
37
|
// for flow
|
|
55
38
|
container.appendChild(this.el);
|
|
56
39
|
}
|
|
57
40
|
}
|
|
58
41
|
};
|
|
59
|
-
|
|
60
42
|
_proto.componentWillUnmount = function componentWillUnmount() {
|
|
61
43
|
if ((0, _utils.canUseDOM)() && this.el) {
|
|
62
44
|
var _this$props$container2 = this.props.container,
|
|
63
|
-
|
|
64
|
-
|
|
45
|
+
container = _this$props$container2 === void 0 ? document.body : _this$props$container2;
|
|
65
46
|
if (container) {
|
|
66
47
|
// for flow
|
|
67
48
|
container.removeChild(this.el);
|
|
68
49
|
}
|
|
69
50
|
}
|
|
70
51
|
};
|
|
71
|
-
|
|
72
52
|
_proto.render = function render() {
|
|
73
53
|
if (this.el) {
|
|
74
54
|
return /*#__PURE__*/(0, _reactDom.createPortal)(this.props.children, this.el);
|
|
75
55
|
}
|
|
76
|
-
|
|
77
56
|
return this.props.children;
|
|
78
57
|
};
|
|
79
|
-
|
|
80
58
|
return Portal;
|
|
81
59
|
}(React.Component);
|
|
82
|
-
|
|
83
60
|
exports.default = Portal;
|
|
84
61
|
Portal.defaultProps = {
|
|
85
|
-
as:
|
|
86
|
-
id:
|
|
62
|
+
as: 'div',
|
|
63
|
+
id: ''
|
|
87
64
|
};
|
package/commonjs/Radio/index.js
CHANGED
|
@@ -2,86 +2,64 @@
|
|
|
2
2
|
|
|
3
3
|
exports.__esModule = true;
|
|
4
4
|
exports.default = void 0;
|
|
5
|
-
|
|
6
5
|
var React = _interopRequireWildcard(require("react"));
|
|
7
|
-
|
|
8
6
|
var _styles = _interopRequireWildcard(require("./styles"));
|
|
9
|
-
|
|
10
7
|
var _excluded = ["id", "value", "name", "label", "checked", "disabled", "onChange", "onFocus", "onBlur", "ariaLabel", "qa"];
|
|
11
|
-
|
|
12
8
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
13
|
-
|
|
14
9
|
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; }
|
|
15
|
-
|
|
16
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
17
|
-
|
|
10
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
18
11
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
19
|
-
|
|
20
12
|
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
|
|
21
|
-
|
|
22
|
-
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
23
|
-
|
|
13
|
+
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
24
14
|
/**
|
|
25
15
|
* Primitive Radio Element
|
|
26
|
-
*/
|
|
27
|
-
var Radio = /*#__PURE__*/function (_React$Component) {
|
|
16
|
+
*/var Radio = /*#__PURE__*/function (_React$Component) {
|
|
28
17
|
_inheritsLoose(Radio, _React$Component);
|
|
29
|
-
|
|
30
18
|
function Radio() {
|
|
31
19
|
var _this;
|
|
32
|
-
|
|
33
20
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
34
21
|
args[_key] = arguments[_key];
|
|
35
22
|
}
|
|
36
|
-
|
|
37
23
|
_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
|
|
38
|
-
|
|
39
24
|
_this.handleChange = function (e) {
|
|
40
25
|
if (!!_this.props.checked || _this.props.disabled) {
|
|
41
26
|
return;
|
|
42
27
|
}
|
|
43
|
-
|
|
44
28
|
_this.props.onChange && _this.props.onChange(e);
|
|
45
29
|
};
|
|
46
|
-
|
|
47
30
|
_this.handleFocus = function (e) {
|
|
48
31
|
if (_this.props.onFocus) {
|
|
49
32
|
_this.props.onFocus(e);
|
|
50
33
|
}
|
|
51
34
|
};
|
|
52
|
-
|
|
53
35
|
_this.handleBlur = function (e) {
|
|
54
36
|
if (_this.props.onBlur) {
|
|
55
37
|
_this.props.onBlur(e);
|
|
56
38
|
}
|
|
57
39
|
};
|
|
58
|
-
|
|
59
40
|
return _this;
|
|
60
41
|
}
|
|
61
|
-
|
|
62
42
|
var _proto = Radio.prototype;
|
|
63
|
-
|
|
64
43
|
_proto.render = function render() {
|
|
65
44
|
var _this$props = this.props,
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
45
|
+
id = _this$props.id,
|
|
46
|
+
value = _this$props.value,
|
|
47
|
+
name = _this$props.name,
|
|
48
|
+
label = _this$props.label,
|
|
49
|
+
checked = _this$props.checked,
|
|
50
|
+
disabled = _this$props.disabled,
|
|
51
|
+
onChange = _this$props.onChange,
|
|
52
|
+
onFocus = _this$props.onFocus,
|
|
53
|
+
onBlur = _this$props.onBlur,
|
|
54
|
+
ariaLabel = _this$props.ariaLabel,
|
|
55
|
+
_this$props$qa = _this$props.qa,
|
|
56
|
+
qa = _this$props$qa === void 0 ? {} : _this$props$qa,
|
|
57
|
+
rest = _objectWithoutPropertiesLoose(_this$props, _excluded);
|
|
80
58
|
return (
|
|
81
59
|
/*#__PURE__*/
|
|
82
60
|
// $FlowIssue - upgrade v0.112.0
|
|
83
61
|
React.createElement(_styles.default, _extends({
|
|
84
|
-
as: label &&
|
|
62
|
+
as: label && 'label'
|
|
85
63
|
}, rest), /*#__PURE__*/React.createElement(_styles.InputWrapper, {
|
|
86
64
|
checked: checked,
|
|
87
65
|
disabled: disabled
|
|
@@ -96,7 +74,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
|
|
|
96
74
|
onChange: this.handleChange,
|
|
97
75
|
onFocus: this.handleFocus,
|
|
98
76
|
onBlur: this.handleBlur,
|
|
99
|
-
"data-qa-radio": name ||
|
|
77
|
+
"data-qa-radio": name || '',
|
|
100
78
|
"data-qa-radio-ischecked": checked === true,
|
|
101
79
|
"data-qa-radio-isdisabled": disabled === true
|
|
102
80
|
}, qa))), label && /*#__PURE__*/React.createElement(_styles.LabelText, {
|
|
@@ -104,10 +82,8 @@ var Radio = /*#__PURE__*/function (_React$Component) {
|
|
|
104
82
|
}, label))
|
|
105
83
|
);
|
|
106
84
|
};
|
|
107
|
-
|
|
108
85
|
return Radio;
|
|
109
86
|
}(React.Component);
|
|
110
|
-
|
|
111
87
|
exports.default = Radio;
|
|
112
88
|
Radio.defaultProps = {
|
|
113
89
|
disabled: false
|