@sproutsocial/racine 12.19.0 → 12.21.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +33 -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 +62 -29
- package/__flow__/Icon/index.test.js +15 -15
- package/__flow__/Icon/styles.js +12 -23
- 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 +36 -18
- package/__flow__/LoaderButton/index.stories.js +35 -7
- package/__flow__/LoaderButton/index.test.js +15 -15
- package/__flow__/Menu/__snapshots__/index.test.js.snap +0 -9
- 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 +21 -27
- package/__flow__/PartnerLogo/index.stories.js +52 -52
- package/__flow__/PartnerLogo/styles.js +12 -24
- 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 +18 -18
- package/__flow__/themes/extendedThemes/README.md +1 -1
- package/__flow__/themes/extendedThemes/sproutTheme/dark/theme.js +16 -4
- package/__flow__/themes/extendedThemes/sproutTheme/index.js +2 -2
- package/__flow__/themes/extendedThemes/sproutTheme/light/theme.js +16 -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 +53 -53
- 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 +8 -19
- 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 +37 -39
- 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 +22 -37
- package/commonjs/PartnerLogo/styles.js +7 -17
- 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 +15 -29
- package/commonjs/themes/extendedThemes/sproutTheme/dark/theme.js +14 -9
- package/commonjs/themes/extendedThemes/sproutTheme/index.js +0 -5
- package/commonjs/themes/extendedThemes/sproutTheme/light/theme.js +14 -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 +45 -61
- 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/dist/themes/dark/theme.scss +2 -2
- package/dist/themes/extendedThemes/sproutTheme/dark/theme.scss +26 -2
- package/dist/themes/extendedThemes/sproutTheme/light/theme.scss +26 -2
- package/dist/themes/light/theme.scss +2 -2
- 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 +12 -16
- 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 +45 -34
- 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 +26 -35
- package/lib/PartnerLogo/styles.js +11 -14
- 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 +22 -25
- package/lib/themes/extendedThemes/sproutTheme/dark/theme.js +16 -7
- package/lib/themes/extendedThemes/sproutTheme/index.js +3 -2
- package/lib/themes/extendedThemes/sproutTheme/light/theme.js +16 -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 +56 -57
- 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
|
@@ -1,18 +1,20 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign
|
|
1
|
+
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); }
|
|
2
2
|
|
|
3
|
-
import COLORS from
|
|
4
|
-
import literalColors from
|
|
5
|
-
import { datavizPalette } from
|
|
6
|
-
import { green, blue, purple, yellow, orange, red, neutral, magenta, pink, aqua, teal } from
|
|
7
|
-
import NETWORKCOLORS from
|
|
8
|
-
import TYPOGRAPHY from
|
|
9
|
-
import SPACE from
|
|
10
|
-
import DEPTH from
|
|
11
|
-
import MOTION from
|
|
12
|
-
import BORDER from
|
|
13
|
-
import { transparentize } from
|
|
14
|
-
export var breakpoints = [
|
|
15
|
-
var MODE =
|
|
3
|
+
import COLORS from '@sproutsocial/seeds-color';
|
|
4
|
+
import literalColors from './literal-colors';
|
|
5
|
+
import { datavizPalette } from './dataviz-palette';
|
|
6
|
+
import { green, blue, purple, yellow, orange, red, neutral, magenta, pink, aqua, teal } from './decorative-palettes';
|
|
7
|
+
import NETWORKCOLORS from '@sproutsocial/seeds-networkcolor';
|
|
8
|
+
import TYPOGRAPHY from '@sproutsocial/seeds-typography';
|
|
9
|
+
import SPACE from '@sproutsocial/seeds-space';
|
|
10
|
+
import DEPTH from '@sproutsocial/seeds-depth';
|
|
11
|
+
import MOTION from '@sproutsocial/seeds-motion';
|
|
12
|
+
import BORDER from '@sproutsocial/seeds-border';
|
|
13
|
+
import { transparentize } from 'polished';
|
|
14
|
+
export var breakpoints = ['900px', '1200px', '1500px', '1800px'];
|
|
15
|
+
var MODE = 'light';
|
|
16
|
+
|
|
17
|
+
// If you are making changes to the colors in the theme file tag the Design Systems team on your PR! Thank you!!
|
|
16
18
|
|
|
17
19
|
var colors = _extends({
|
|
18
20
|
app: {
|
|
@@ -28,7 +30,6 @@ var colors = _extends({
|
|
|
28
30
|
error: red.background,
|
|
29
31
|
info: blue.background,
|
|
30
32
|
opportunity: purple.background,
|
|
31
|
-
|
|
32
33
|
/** @deprecated Use "error" instead of "danger" */
|
|
33
34
|
danger: red.background,
|
|
34
35
|
decorative: {
|
|
@@ -54,7 +55,6 @@ var colors = _extends({
|
|
|
54
55
|
success: green.highlight,
|
|
55
56
|
warning: yellow.highlight,
|
|
56
57
|
error: red.highlight,
|
|
57
|
-
|
|
58
58
|
/** @deprecated Use "error" instead of "danger" */
|
|
59
59
|
danger: red.highlight,
|
|
60
60
|
info: blue.highlight,
|
|
@@ -83,7 +83,7 @@ var colors = _extends({
|
|
|
83
83
|
active: COLORS.COLOR_BLUE_900
|
|
84
84
|
},
|
|
85
85
|
border: {
|
|
86
|
-
base:
|
|
86
|
+
base: 'transparent'
|
|
87
87
|
},
|
|
88
88
|
text: {
|
|
89
89
|
base: COLORS.COLOR_NEUTRAL_0,
|
|
@@ -92,7 +92,7 @@ var colors = _extends({
|
|
|
92
92
|
},
|
|
93
93
|
secondary: {
|
|
94
94
|
background: {
|
|
95
|
-
base:
|
|
95
|
+
base: 'transparent',
|
|
96
96
|
hover: COLORS.COLOR_NEUTRAL_800,
|
|
97
97
|
active: COLORS.COLOR_NEUTRAL_900
|
|
98
98
|
},
|
|
@@ -106,12 +106,12 @@ var colors = _extends({
|
|
|
106
106
|
},
|
|
107
107
|
pill: {
|
|
108
108
|
background: {
|
|
109
|
-
base:
|
|
109
|
+
base: 'transparent',
|
|
110
110
|
hover: COLORS.COLOR_NEUTRAL_100,
|
|
111
111
|
active: COLORS.COLOR_NEUTRAL_200
|
|
112
112
|
},
|
|
113
113
|
border: {
|
|
114
|
-
base:
|
|
114
|
+
base: 'transparent'
|
|
115
115
|
},
|
|
116
116
|
text: {
|
|
117
117
|
base: COLORS.COLOR_NEUTRAL_800,
|
|
@@ -125,7 +125,7 @@ var colors = _extends({
|
|
|
125
125
|
active: COLORS.COLOR_RED_1000
|
|
126
126
|
},
|
|
127
127
|
border: {
|
|
128
|
-
base:
|
|
128
|
+
base: 'transparent'
|
|
129
129
|
},
|
|
130
130
|
text: {
|
|
131
131
|
base: COLORS.COLOR_NEUTRAL_0,
|
|
@@ -134,7 +134,7 @@ var colors = _extends({
|
|
|
134
134
|
},
|
|
135
135
|
placeholder: {
|
|
136
136
|
background: {
|
|
137
|
-
base:
|
|
137
|
+
base: 'transparent',
|
|
138
138
|
hover: COLORS.COLOR_NEUTRAL_0,
|
|
139
139
|
active: COLORS.COLOR_NEUTRAL_0
|
|
140
140
|
},
|
|
@@ -148,10 +148,10 @@ var colors = _extends({
|
|
|
148
148
|
},
|
|
149
149
|
unstyled: {
|
|
150
150
|
background: {
|
|
151
|
-
base:
|
|
151
|
+
base: 'transparent'
|
|
152
152
|
},
|
|
153
153
|
border: {
|
|
154
|
-
base:
|
|
154
|
+
base: 'transparent'
|
|
155
155
|
},
|
|
156
156
|
text: {
|
|
157
157
|
base: COLORS.COLOR_NEUTRAL_700,
|
|
@@ -180,15 +180,14 @@ var colors = _extends({
|
|
|
180
180
|
success: green.foreground,
|
|
181
181
|
warning: yellow.foreground,
|
|
182
182
|
error: red.foreground,
|
|
183
|
-
|
|
184
183
|
/** @deprecated Use "error" instead of "danger" */
|
|
185
184
|
danger: red.foreground,
|
|
186
185
|
info: blue.foreground,
|
|
187
186
|
opportunity: purple.foreground,
|
|
188
187
|
applied: COLORS.COLOR_BLUE_700,
|
|
189
|
-
positive_sentiment: COLORS.
|
|
188
|
+
positive_sentiment: COLORS.COLOR_BLUE_600,
|
|
190
189
|
negative_sentiment: COLORS.COLOR_RED_600,
|
|
191
|
-
neutral_sentiment: COLORS.
|
|
190
|
+
neutral_sentiment: COLORS.COLOR_NEUTRAL_500
|
|
192
191
|
},
|
|
193
192
|
form: {
|
|
194
193
|
background: {
|
|
@@ -207,7 +206,7 @@ var colors = _extends({
|
|
|
207
206
|
},
|
|
208
207
|
listItem: {
|
|
209
208
|
background: {
|
|
210
|
-
base:
|
|
209
|
+
base: 'transparent',
|
|
211
210
|
hover: COLORS.COLOR_NEUTRAL_100,
|
|
212
211
|
selected: COLORS.COLOR_NEUTRAL_800
|
|
213
212
|
}
|
|
@@ -262,20 +261,19 @@ var colors = _extends({
|
|
|
262
261
|
list: datavizPalette.DATAVIZ_COLORS_LIST
|
|
263
262
|
}
|
|
264
263
|
}, literalColors, datavizPalette);
|
|
265
|
-
|
|
266
264
|
export var typography = {
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
265
|
+
'100': TYPOGRAPHY.TYPOGRAPHY_SIZE_100,
|
|
266
|
+
'200': TYPOGRAPHY.TYPOGRAPHY_SIZE_200,
|
|
267
|
+
'300': TYPOGRAPHY.TYPOGRAPHY_SIZE_300,
|
|
268
|
+
'400': TYPOGRAPHY.TYPOGRAPHY_SIZE_400,
|
|
269
|
+
'500': TYPOGRAPHY.TYPOGRAPHY_SIZE_500,
|
|
270
|
+
'600': TYPOGRAPHY.TYPOGRAPHY_SIZE_600,
|
|
271
|
+
'700': TYPOGRAPHY.TYPOGRAPHY_SIZE_700,
|
|
272
|
+
'800': TYPOGRAPHY.TYPOGRAPHY_SIZE_800,
|
|
273
|
+
'900': TYPOGRAPHY.TYPOGRAPHY_SIZE_900,
|
|
274
|
+
'1000': TYPOGRAPHY.TYPOGRAPHY_SIZE_1000,
|
|
275
|
+
'1100': TYPOGRAPHY.TYPOGRAPHY_SIZE_1100,
|
|
276
|
+
'1200': TYPOGRAPHY.TYPOGRAPHY_SIZE_1200
|
|
279
277
|
};
|
|
280
278
|
export var fontFamily = TYPOGRAPHY.TYPOGRAPHY_FAMILY;
|
|
281
279
|
export var fontWeights = {
|
|
@@ -284,36 +282,37 @@ export var fontWeights = {
|
|
|
284
282
|
bold: TYPOGRAPHY.TYPOGRAPHY_WEIGHT_BOLD,
|
|
285
283
|
extrabold: TYPOGRAPHY.TYPOGRAPHY_WEIGHT_EXTRA_BOLD
|
|
286
284
|
};
|
|
285
|
+
|
|
287
286
|
/**
|
|
288
287
|
* @deprecated
|
|
289
288
|
* Import from `Stack/TypeSpaceLiterals` instead.
|
|
290
289
|
*/
|
|
291
290
|
|
|
292
291
|
export var space = {
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
292
|
+
'0': SPACE.SPACE_SIZE_0,
|
|
293
|
+
'100': SPACE.SPACE_SIZE_100,
|
|
294
|
+
'200': SPACE.SPACE_SIZE_200,
|
|
295
|
+
'300': SPACE.SPACE_SIZE_300,
|
|
296
|
+
'350': SPACE.SPACE_SIZE_350,
|
|
297
|
+
'400': SPACE.SPACE_SIZE_400,
|
|
298
|
+
'450': SPACE.SPACE_SIZE_450,
|
|
299
|
+
'500': SPACE.SPACE_SIZE_500,
|
|
300
|
+
'600': SPACE.SPACE_SIZE_600
|
|
302
301
|
};
|
|
303
302
|
export var radii = {
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
303
|
+
'400': BORDER.BORDER_RADIUS_400,
|
|
304
|
+
'500': BORDER.BORDER_RADIUS_500,
|
|
305
|
+
'600': BORDER.BORDER_RADIUS_600,
|
|
306
|
+
'1000': BORDER.BORDER_RADIUS_1000,
|
|
308
307
|
inner: BORDER.BORDER_RADIUS_500,
|
|
309
308
|
outer: BORDER.BORDER_RADIUS_600,
|
|
310
309
|
pill: BORDER.BORDER_RADIUS_1000
|
|
311
310
|
};
|
|
312
311
|
export var borders = {
|
|
313
|
-
|
|
312
|
+
'500': BORDER.BORDER_WIDTH_500 + " solid"
|
|
314
313
|
};
|
|
315
314
|
export var borderWidths = {
|
|
316
|
-
|
|
315
|
+
'500': BORDER.BORDER_WIDTH_500
|
|
317
316
|
};
|
|
318
317
|
export var shadows = {
|
|
319
318
|
low: DEPTH.ELEVATION_LEVEL_100 + " " + COLORS.COLOR_NEUTRAL_900 + "3D",
|
|
@@ -340,7 +339,7 @@ var theme = {
|
|
|
340
339
|
fontWeights: fontWeights,
|
|
341
340
|
space: _extends({}, space, {
|
|
342
341
|
space: space,
|
|
343
|
-
|
|
342
|
+
'-space': Object.keys(space).reduce(function (negativeSpace, key) {
|
|
344
343
|
// The values are strings (eg 24px) so we concatenate a negative sign
|
|
345
344
|
negativeSpace[key] = "-" + space[key];
|
|
346
345
|
return negativeSpace;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
'no babel-plugin-flow-react-proptypes';
|
package/lib/types/theme.flow.js
CHANGED
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
1
|
+
|
|
2
|
+
import { breakpoints, typography, fontWeights, radii, borders, borderWidths, shadows, space, easing, duration } from '../themes/light/theme';
|
|
3
|
+
import { datePicker, navigation, analytics, listening, growth, cardControl } from '../themes/extendedThemes/sproutTheme/light/theme';
|
package/lib/utils/a11yTest.js
CHANGED
|
@@ -1,23 +1,21 @@
|
|
|
1
|
+
function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return exports; }; var exports = {}, Op = Object.prototype, hasOwn = Op.hasOwnProperty, $Symbol = "function" == typeof Symbol ? Symbol : {}, iteratorSymbol = $Symbol.iterator || "@@iterator", asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator", toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag"; function define(obj, key, value) { return Object.defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }), obj[key]; } try { define({}, ""); } catch (err) { define = function define(obj, key, value) { return obj[key] = value; }; } function wrap(innerFn, outerFn, self, tryLocsList) { var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator, generator = Object.create(protoGenerator.prototype), context = new Context(tryLocsList || []); return generator._invoke = function (innerFn, self, context) { var state = "suspendedStart"; return function (method, arg) { if ("executing" === state) throw new Error("Generator is already running"); if ("completed" === state) { if ("throw" === method) throw arg; return doneResult(); } for (context.method = method, context.arg = arg;;) { var delegate = context.delegate; if (delegate) { var delegateResult = maybeInvokeDelegate(delegate, context); if (delegateResult) { if (delegateResult === ContinueSentinel) continue; return delegateResult; } } if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) { if ("suspendedStart" === state) throw state = "completed", context.arg; context.dispatchException(context.arg); } else "return" === context.method && context.abrupt("return", context.arg); state = "executing"; var record = tryCatch(innerFn, self, context); if ("normal" === record.type) { if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue; return { value: record.arg, done: context.done }; } "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg); } }; }(innerFn, self, context), generator; } function tryCatch(fn, obj, arg) { try { return { type: "normal", arg: fn.call(obj, arg) }; } catch (err) { return { type: "throw", arg: err }; } } exports.wrap = wrap; var ContinueSentinel = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var IteratorPrototype = {}; define(IteratorPrototype, iteratorSymbol, function () { return this; }); var getProto = Object.getPrototypeOf, NativeIteratorPrototype = getProto && getProto(getProto(values([]))); NativeIteratorPrototype && NativeIteratorPrototype !== Op && hasOwn.call(NativeIteratorPrototype, iteratorSymbol) && (IteratorPrototype = NativeIteratorPrototype); var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype); function defineIteratorMethods(prototype) { ["next", "throw", "return"].forEach(function (method) { define(prototype, method, function (arg) { return this._invoke(method, arg); }); }); } function AsyncIterator(generator, PromiseImpl) { function invoke(method, arg, resolve, reject) { var record = tryCatch(generator[method], generator, arg); if ("throw" !== record.type) { var result = record.arg, value = result.value; return value && "object" == typeof value && hasOwn.call(value, "__await") ? PromiseImpl.resolve(value.__await).then(function (value) { invoke("next", value, resolve, reject); }, function (err) { invoke("throw", err, resolve, reject); }) : PromiseImpl.resolve(value).then(function (unwrapped) { result.value = unwrapped, resolve(result); }, function (error) { return invoke("throw", error, resolve, reject); }); } reject(record.arg); } var previousPromise; this._invoke = function (method, arg) { function callInvokeWithMethodAndArg() { return new PromiseImpl(function (resolve, reject) { invoke(method, arg, resolve, reject); }); } return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); }; } function maybeInvokeDelegate(delegate, context) { var method = delegate.iterator[context.method]; if (undefined === method) { if (context.delegate = null, "throw" === context.method) { if (delegate.iterator.return && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method)) return ContinueSentinel; context.method = "throw", context.arg = new TypeError("The iterator does not provide a 'throw' method"); } return ContinueSentinel; } var record = tryCatch(method, delegate.iterator, context.arg); if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel; var info = record.arg; return info ? info.done ? (context[delegate.resultName] = info.value, context.next = delegate.nextLoc, "return" !== context.method && (context.method = "next", context.arg = undefined), context.delegate = null, ContinueSentinel) : info : (context.method = "throw", context.arg = new TypeError("iterator result is not an object"), context.delegate = null, ContinueSentinel); } function pushTryEntry(locs) { var entry = { tryLoc: locs[0] }; 1 in locs && (entry.catchLoc = locs[1]), 2 in locs && (entry.finallyLoc = locs[2], entry.afterLoc = locs[3]), this.tryEntries.push(entry); } function resetTryEntry(entry) { var record = entry.completion || {}; record.type = "normal", delete record.arg, entry.completion = record; } function Context(tryLocsList) { this.tryEntries = [{ tryLoc: "root" }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0); } function values(iterable) { if (iterable) { var iteratorMethod = iterable[iteratorSymbol]; if (iteratorMethod) return iteratorMethod.call(iterable); if ("function" == typeof iterable.next) return iterable; if (!isNaN(iterable.length)) { var i = -1, next = function next() { for (; ++i < iterable.length;) { if (hasOwn.call(iterable, i)) return next.value = iterable[i], next.done = !1, next; } return next.value = undefined, next.done = !0, next; }; return next.next = next; } } return { next: doneResult }; } function doneResult() { return { value: undefined, done: !0 }; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, define(Gp, "constructor", GeneratorFunctionPrototype), define(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) { var ctor = "function" == typeof genFun && genFun.constructor; return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name)); }, exports.mark = function (genFun) { return Object.setPrototypeOf ? Object.setPrototypeOf(genFun, GeneratorFunctionPrototype) : (genFun.__proto__ = GeneratorFunctionPrototype, define(genFun, toStringTagSymbol, "GeneratorFunction")), genFun.prototype = Object.create(Gp), genFun; }, exports.awrap = function (arg) { return { __await: arg }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, asyncIteratorSymbol, function () { return this; }), exports.AsyncIterator = AsyncIterator, exports.async = function (innerFn, outerFn, self, tryLocsList, PromiseImpl) { void 0 === PromiseImpl && (PromiseImpl = Promise); var iter = new AsyncIterator(wrap(innerFn, outerFn, self, tryLocsList), PromiseImpl); return exports.isGeneratorFunction(outerFn) ? iter : iter.next().then(function (result) { return result.done ? result.value : iter.next(); }); }, defineIteratorMethods(Gp), define(Gp, toStringTagSymbol, "Generator"), define(Gp, iteratorSymbol, function () { return this; }), define(Gp, "toString", function () { return "[object Generator]"; }), exports.keys = function (object) { var keys = []; for (var key in object) { keys.push(key); } return keys.reverse(), function next() { for (; keys.length;) { var key = keys.pop(); if (key in object) return next.value = key, next.done = !1, next; } return next.done = !0, next; }; }, exports.values = values, Context.prototype = { constructor: Context, reset: function reset(skipTempReset) { if (this.prev = 0, this.next = 0, this.sent = this._sent = undefined, this.done = !1, this.delegate = null, this.method = "next", this.arg = undefined, this.tryEntries.forEach(resetTryEntry), !skipTempReset) for (var name in this) { "t" === name.charAt(0) && hasOwn.call(this, name) && !isNaN(+name.slice(1)) && (this[name] = undefined); } }, stop: function stop() { this.done = !0; var rootRecord = this.tryEntries[0].completion; if ("throw" === rootRecord.type) throw rootRecord.arg; return this.rval; }, dispatchException: function dispatchException(exception) { if (this.done) throw exception; var context = this; function handle(loc, caught) { return record.type = "throw", record.arg = exception, context.next = loc, caught && (context.method = "next", context.arg = undefined), !!caught; } for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i], record = entry.completion; if ("root" === entry.tryLoc) return handle("end"); if (entry.tryLoc <= this.prev) { var hasCatch = hasOwn.call(entry, "catchLoc"), hasFinally = hasOwn.call(entry, "finallyLoc"); if (hasCatch && hasFinally) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } else if (hasCatch) { if (this.prev < entry.catchLoc) return handle(entry.catchLoc, !0); } else { if (!hasFinally) throw new Error("try statement without catch or finally"); if (this.prev < entry.finallyLoc) return handle(entry.finallyLoc); } } } }, abrupt: function abrupt(type, arg) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc <= this.prev && hasOwn.call(entry, "finallyLoc") && this.prev < entry.finallyLoc) { var finallyEntry = entry; break; } } finallyEntry && ("break" === type || "continue" === type) && finallyEntry.tryLoc <= arg && arg <= finallyEntry.finallyLoc && (finallyEntry = null); var record = finallyEntry ? finallyEntry.completion : {}; return record.type = type, record.arg = arg, finallyEntry ? (this.method = "next", this.next = finallyEntry.finallyLoc, ContinueSentinel) : this.complete(record); }, complete: function complete(record, afterLoc) { if ("throw" === record.type) throw record.arg; return "break" === record.type || "continue" === record.type ? this.next = record.arg : "return" === record.type ? (this.rval = this.arg = record.arg, this.method = "return", this.next = "end") : "normal" === record.type && afterLoc && (this.next = afterLoc), ContinueSentinel; }, finish: function finish(finallyLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.finallyLoc === finallyLoc) return this.complete(entry.completion, entry.afterLoc), resetTryEntry(entry), ContinueSentinel; } }, catch: function _catch(tryLoc) { for (var i = this.tryEntries.length - 1; i >= 0; --i) { var entry = this.tryEntries[i]; if (entry.tryLoc === tryLoc) { var record = entry.completion; if ("throw" === record.type) { var thrown = record.arg; resetTryEntry(entry); } return thrown; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(iterable, resultName, nextLoc) { return this.delegate = { iterator: values(iterable), resultName: resultName, nextLoc: nextLoc }, "next" === this.method && (this.arg = undefined), ContinueSentinel; } }, exports; }
|
|
1
2
|
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
|
|
2
|
-
|
|
3
3
|
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
|
|
4
|
+
import { axe } from 'jest-axe';
|
|
4
5
|
|
|
5
|
-
|
|
6
|
-
|
|
6
|
+
// use runA11yCheck from react-test-library utils file if using react-testing-library
|
|
7
7
|
export var a11yCheck = /*#__PURE__*/function () {
|
|
8
|
-
var _ref = _asyncToGenerator( /*#__PURE__*/
|
|
9
|
-
return
|
|
8
|
+
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(html) {
|
|
9
|
+
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
10
10
|
while (1) {
|
|
11
11
|
switch (_context.prev = _context.next) {
|
|
12
12
|
case 0:
|
|
13
13
|
_context.t0 = expect;
|
|
14
14
|
_context.next = 3;
|
|
15
15
|
return axe(html);
|
|
16
|
-
|
|
17
16
|
case 3:
|
|
18
17
|
_context.t1 = _context.sent;
|
|
19
18
|
return _context.abrupt("return", (0, _context.t0)(_context.t1).toHaveNoViolations());
|
|
20
|
-
|
|
21
19
|
case 5:
|
|
22
20
|
case "end":
|
|
23
21
|
return _context.stop();
|
|
@@ -25,7 +23,6 @@ export var a11yCheck = /*#__PURE__*/function () {
|
|
|
25
23
|
}
|
|
26
24
|
}, _callee);
|
|
27
25
|
}));
|
|
28
|
-
|
|
29
26
|
return function a11yCheck(_x) {
|
|
30
27
|
return _ref.apply(this, arguments);
|
|
31
28
|
};
|
package/lib/utils/chartColors.js
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
import { COLOR_BLUE_500, COLOR_BLUE_800, COLOR_GREEN_500, COLOR_GREEN_800, COLOR_MAGENTA_500, COLOR_MAGENTA_800, COLOR_NEUTRAL_500, COLOR_NEUTRAL_700, COLOR_ORANGE_500, COLOR_ORANGE_800, COLOR_PINK_500, COLOR_PINK_800, COLOR_PINK_700, COLOR_PURPLE_500, COLOR_PURPLE_700, COLOR_PURPLE_800, COLOR_RED_500, COLOR_RED_700, COLOR_RED_800, COLOR_TEAL_500, COLOR_TEAL_800, COLOR_YELLOW_500, COLOR_YELLOW_800 } from '@sproutsocial/seeds-color';
|
|
2
4
|
export var COMPARE_THEME = [COLOR_TEAL_500, COLOR_TEAL_800, COLOR_PURPLE_500, COLOR_PURPLE_800];
|
|
3
5
|
export var CONTRAST_THEME = [COLOR_TEAL_500, COLOR_PURPLE_700, COLOR_PINK_700, COLOR_YELLOW_500, COLOR_BLUE_500, COLOR_MAGENTA_500, COLOR_NEUTRAL_500, COLOR_GREEN_500, COLOR_ORANGE_500, COLOR_RED_700];
|
|
4
6
|
export var EXTENDED_THEME = [COLOR_GREEN_500, COLOR_TEAL_500, COLOR_BLUE_500, COLOR_PURPLE_500, COLOR_MAGENTA_500, COLOR_PINK_500, COLOR_RED_500, COLOR_ORANGE_500, COLOR_YELLOW_500, COLOR_NEUTRAL_500, COLOR_GREEN_800, COLOR_TEAL_800, COLOR_BLUE_800, COLOR_PURPLE_800, COLOR_MAGENTA_800, COLOR_PINK_800, COLOR_RED_800, COLOR_ORANGE_800, COLOR_YELLOW_800, COLOR_NEUTRAL_700];
|
package/lib/utils/constants.js
CHANGED
|
@@ -1,22 +1,21 @@
|
|
|
1
|
-
import { buildQueries, queryAllByAttribute } from "@testing-library/react";
|
|
2
1
|
|
|
2
|
+
import { buildQueries, queryAllByAttribute } from '@testing-library/react';
|
|
3
3
|
var getKeyValuePair = function getKeyValuePair(object) {
|
|
4
4
|
var key = Object.keys(object)[0];
|
|
5
5
|
var value = object[key];
|
|
6
6
|
return [key, value];
|
|
7
7
|
};
|
|
8
|
-
|
|
9
8
|
var getDataQaKey = function getDataQaKey(key) {
|
|
10
9
|
return "data-qa-" + key;
|
|
11
10
|
};
|
|
12
|
-
|
|
13
11
|
var getTestIdAttribute = function getTestIdAttribute(qaObject) {
|
|
14
12
|
var _getKeyValuePair = getKeyValuePair(qaObject),
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
13
|
+
key = _getKeyValuePair[0],
|
|
14
|
+
value = _getKeyValuePair[1];
|
|
18
15
|
return "[" + getDataQaKey(key) + "=\"" + value + "\"]";
|
|
19
|
-
};
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
// dom-testing-library works by looking in the dom for: [data-qa-somelabel]
|
|
20
19
|
// and using text supplied to match the value of that label. An example:
|
|
21
20
|
//
|
|
22
21
|
// You have <div data-qa-label='my input' />
|
|
@@ -28,31 +27,24 @@ var getTestIdAttribute = function getTestIdAttribute(qaObject) {
|
|
|
28
27
|
// using dom-testing-library's helpers, we split this and use queryAllByAttribute to search:
|
|
29
28
|
//
|
|
30
29
|
// queryAllByAttribute('data-qa-label', container, 'my-input', ...rest)
|
|
31
|
-
|
|
32
|
-
|
|
33
30
|
var queryAllByDataQaLabel = function queryAllByDataQaLabel(container, qaObject, options) {
|
|
34
31
|
var _getKeyValuePair2 = getKeyValuePair(qaObject),
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
32
|
+
key = _getKeyValuePair2[0],
|
|
33
|
+
value = _getKeyValuePair2[1];
|
|
38
34
|
return queryAllByAttribute(getDataQaKey(key), container, String(value), options);
|
|
39
35
|
};
|
|
40
|
-
|
|
41
36
|
var getMultipleError = function getMultipleError(c, qaObject) {
|
|
42
37
|
return "Found multiple elements by: " + getTestIdAttribute(qaObject);
|
|
43
38
|
};
|
|
44
|
-
|
|
45
39
|
var getMissingError = function getMissingError(c, qaObject) {
|
|
46
40
|
return "Unable to find an element by: " + getTestIdAttribute(qaObject);
|
|
47
41
|
};
|
|
48
|
-
|
|
49
42
|
var _buildQueries = buildQueries(queryAllByDataQaLabel, getMultipleError, getMissingError),
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
43
|
+
queryByDataQaLabel = _buildQueries[0],
|
|
44
|
+
getAllByDataQaLabel = _buildQueries[1],
|
|
45
|
+
getByDataQaLabel = _buildQueries[2],
|
|
46
|
+
findAllByDataQaLabel = _buildQueries[3],
|
|
47
|
+
findByDataQaLabel = _buildQueries[4];
|
|
56
48
|
export var dataQaLabelQueries = {
|
|
57
49
|
queryByDataQaLabel: queryByDataQaLabel,
|
|
58
50
|
queryAllByDataQaLabel: queryAllByDataQaLabel,
|
package/lib/utils/hooks.js
CHANGED
|
@@ -1,14 +1,12 @@
|
|
|
1
|
-
|
|
1
|
+
'no babel-plugin-flow-react-proptypes';
|
|
2
2
|
|
|
3
|
-
function _extends() { _extends = Object.assign
|
|
4
|
-
|
|
5
|
-
import {
|
|
6
|
-
import { canUseDOM } from "../utils";
|
|
3
|
+
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); }
|
|
4
|
+
import { useState, useCallback, useEffect, useMemo, useReducer, useRef } from 'react';
|
|
5
|
+
import { canUseDOM } from '../utils';
|
|
7
6
|
export function useTextContent(initial) {
|
|
8
7
|
var _useState = useState(initial),
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
textContent = _useState[0],
|
|
9
|
+
setTextContent = _useState[1];
|
|
12
10
|
var ref = useCallback(function (node) {
|
|
13
11
|
if (node !== null) {
|
|
14
12
|
setTextContent(node.textContent);
|
|
@@ -17,28 +15,21 @@ export function useTextContent(initial) {
|
|
|
17
15
|
ref.current = textContent;
|
|
18
16
|
return ref;
|
|
19
17
|
}
|
|
20
|
-
|
|
21
18
|
var defaultCallback = function defaultCallback(mutationList) {
|
|
22
19
|
return mutationList;
|
|
23
20
|
};
|
|
24
|
-
|
|
25
21
|
export function useMutationObserver(targetNode, config, callback) {
|
|
26
22
|
if (callback === void 0) {
|
|
27
23
|
callback = defaultCallback;
|
|
28
24
|
}
|
|
29
|
-
|
|
30
25
|
if (!canUseDOM()) {
|
|
31
26
|
return;
|
|
32
27
|
}
|
|
33
28
|
/* eslint-disable-next-line */
|
|
34
|
-
|
|
35
|
-
|
|
36
29
|
var _useState2 = useState(undefined),
|
|
37
|
-
|
|
38
|
-
|
|
30
|
+
value = _useState2[0],
|
|
31
|
+
setValue = _useState2[1];
|
|
39
32
|
/* eslint-disable-next-line */
|
|
40
|
-
|
|
41
|
-
|
|
42
33
|
var observer = useMemo(function () {
|
|
43
34
|
return new MutationObserver(function (mutationList, observer) {
|
|
44
35
|
var result = callback(mutationList, observer);
|
|
@@ -46,7 +37,6 @@ export function useMutationObserver(targetNode, config, callback) {
|
|
|
46
37
|
});
|
|
47
38
|
}, [callback]);
|
|
48
39
|
/* eslint-disable-next-line */
|
|
49
|
-
|
|
50
40
|
useEffect(function () {
|
|
51
41
|
if (targetNode) {
|
|
52
42
|
observer.observe(targetNode, config);
|
|
@@ -59,32 +49,27 @@ export function useMutationObserver(targetNode, config, callback) {
|
|
|
59
49
|
}
|
|
60
50
|
export function useMutationObserverOnce(targetNode, config, callback) {
|
|
61
51
|
var _useState3 = useState(true),
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
52
|
+
isObserving = _useState3[0],
|
|
53
|
+
setObserving = _useState3[1];
|
|
65
54
|
var node = isObserving ? targetNode : null;
|
|
66
55
|
var value = useMutationObserver(node, config, callback);
|
|
67
|
-
|
|
68
56
|
if (value !== undefined && isObserving) {
|
|
69
57
|
setObserving(false);
|
|
70
58
|
}
|
|
71
|
-
|
|
72
59
|
return value;
|
|
73
60
|
}
|
|
74
61
|
export var useSelect = function useSelect(_temp) {
|
|
75
62
|
var _ref = _temp === void 0 ? {
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
63
|
+
initialValue: '',
|
|
64
|
+
onChange: function onChange() {}
|
|
65
|
+
} : _temp,
|
|
66
|
+
_ref$initialValue = _ref.initialValue,
|
|
67
|
+
initialValue = _ref$initialValue === void 0 ? '' : _ref$initialValue,
|
|
68
|
+
_ref$onChange = _ref.onChange,
|
|
69
|
+
userOnChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
|
|
84
70
|
var _useState4 = useState(initialValue),
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
71
|
+
value = _useState4[0],
|
|
72
|
+
setValue = _useState4[1];
|
|
88
73
|
var onChange = useCallback(function (newValue) {
|
|
89
74
|
if (newValue !== value) {
|
|
90
75
|
setValue(newValue);
|
|
@@ -96,17 +81,14 @@ export var useSelect = function useSelect(_temp) {
|
|
|
96
81
|
onChange: onChange
|
|
97
82
|
};
|
|
98
83
|
};
|
|
99
|
-
|
|
100
84
|
var valueReducer = function valueReducer(state, action) {
|
|
101
85
|
var newState = new Set(state);
|
|
102
|
-
|
|
103
86
|
switch (action.type) {
|
|
104
|
-
case
|
|
87
|
+
case 'reset':
|
|
105
88
|
{
|
|
106
89
|
return new Set();
|
|
107
90
|
}
|
|
108
|
-
|
|
109
|
-
case "toggle_item":
|
|
91
|
+
case 'toggle_item':
|
|
110
92
|
default:
|
|
111
93
|
{
|
|
112
94
|
if (newState.has(action.value)) {
|
|
@@ -114,33 +96,28 @@ var valueReducer = function valueReducer(state, action) {
|
|
|
114
96
|
} else {
|
|
115
97
|
newState.add(action.value);
|
|
116
98
|
}
|
|
117
|
-
|
|
118
99
|
return newState;
|
|
119
100
|
}
|
|
120
101
|
}
|
|
121
102
|
};
|
|
122
|
-
|
|
123
103
|
export var useMultiselect = function useMultiselect(_temp2) {
|
|
124
104
|
var _ref2 = _temp2 === void 0 ? {
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
105
|
+
initialValue: [],
|
|
106
|
+
onChange: function onChange() {}
|
|
107
|
+
} : _temp2,
|
|
108
|
+
_ref2$initialValue = _ref2.initialValue,
|
|
109
|
+
initialValue = _ref2$initialValue === void 0 ? [] : _ref2$initialValue,
|
|
110
|
+
_ref2$onChange = _ref2.onChange,
|
|
111
|
+
userOnChange = _ref2$onChange === void 0 ? function () {} : _ref2$onChange;
|
|
133
112
|
var _useReducer = useReducer(valueReducer, new Set(initialValue)),
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
113
|
+
value = _useReducer[0],
|
|
114
|
+
dispatch = _useReducer[1];
|
|
137
115
|
var getArrayValue = function getArrayValue(value) {
|
|
138
116
|
return Array.from(value);
|
|
139
117
|
};
|
|
140
|
-
|
|
141
118
|
var onChange = useCallback(function (newValue) {
|
|
142
119
|
dispatch({
|
|
143
|
-
type:
|
|
120
|
+
type: 'toggle_item',
|
|
144
121
|
value: newValue
|
|
145
122
|
});
|
|
146
123
|
}, [dispatch]);
|
|
@@ -150,12 +127,11 @@ export var useMultiselect = function useMultiselect(_temp2) {
|
|
|
150
127
|
isFirstRun.current = false;
|
|
151
128
|
return;
|
|
152
129
|
}
|
|
153
|
-
|
|
154
130
|
userOnChange(getArrayValue(value));
|
|
155
131
|
}, [userOnChange, value]);
|
|
156
132
|
var onClear = useCallback(function () {
|
|
157
133
|
dispatch({
|
|
158
|
-
type:
|
|
134
|
+
type: 'reset'
|
|
159
135
|
});
|
|
160
136
|
}, [dispatch]);
|
|
161
137
|
return {
|
|
@@ -171,10 +147,10 @@ export function useWhyDidYouUpdate(name, props) {
|
|
|
171
147
|
useEffect(function () {
|
|
172
148
|
if (previousProps.current) {
|
|
173
149
|
// Get all keys from previous and current props
|
|
174
|
-
var allKeys = Object.keys(_extends({}, previousProps.current, props));
|
|
175
|
-
|
|
176
|
-
var changesObj = {};
|
|
177
|
-
|
|
150
|
+
var allKeys = Object.keys(_extends({}, previousProps.current, props));
|
|
151
|
+
// Use this object to keep track of changed props
|
|
152
|
+
var changesObj = {};
|
|
153
|
+
// Iterate through keys
|
|
178
154
|
allKeys.forEach(function (key) {
|
|
179
155
|
// If previous is different from current
|
|
180
156
|
if (previousProps.current[key] !== props[key]) {
|
|
@@ -184,15 +160,16 @@ export function useWhyDidYouUpdate(name, props) {
|
|
|
184
160
|
to: props[key]
|
|
185
161
|
};
|
|
186
162
|
}
|
|
187
|
-
});
|
|
163
|
+
});
|
|
188
164
|
|
|
165
|
+
// If changesObj not empty then output to console
|
|
189
166
|
if (Object.keys(changesObj).length) {
|
|
190
167
|
// eslint-disable-next-line no-console
|
|
191
|
-
console.log(
|
|
168
|
+
console.log('[why-did-you-update]', name, changesObj);
|
|
192
169
|
}
|
|
193
|
-
}
|
|
194
|
-
|
|
170
|
+
}
|
|
195
171
|
|
|
172
|
+
// Finally update previousProps with current props for next hook call
|
|
196
173
|
previousProps.current = props;
|
|
197
174
|
});
|
|
198
175
|
}
|
package/lib/utils/index.js
CHANGED
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
2
|
-
|
|
3
2
|
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
4
|
-
|
|
5
3
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
6
4
|
|
|
7
5
|
export var canUseDOM = function canUseDOM() {
|
|
8
|
-
return Boolean(typeof window !==
|
|
6
|
+
return Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);
|
|
9
7
|
};
|
|
10
8
|
// Allows a component to pass its own ref *and* a ref prop to the same element.
|
|
11
9
|
// Via https://www.davedrinks.coffee/how-do-i-use-two-react-refs/
|
|
@@ -16,8 +14,7 @@ export var mergeRefs = function mergeRefs(refs) {
|
|
|
16
14
|
return function (inst) {
|
|
17
15
|
for (var _iterator = _createForOfIteratorHelperLoose(filteredRefs), _step; !(_step = _iterator()).done;) {
|
|
18
16
|
var ref = _step.value;
|
|
19
|
-
|
|
20
|
-
if (typeof ref === "function") {
|
|
17
|
+
if (typeof ref === 'function') {
|
|
21
18
|
ref(inst);
|
|
22
19
|
} else if (ref) {
|
|
23
20
|
ref.current = inst;
|