@peculiar/react-components 0.3.14-alpha.0 → 0.3.15-alpha.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/dist/cjs/Alert/alert.js +25 -21
- package/dist/cjs/Alert/alert.js.map +1 -1
- package/dist/cjs/Autocomplete/autocomplete.js +74 -97
- package/dist/cjs/Autocomplete/autocomplete.js.map +1 -1
- package/dist/cjs/Avatar/avatar.js +22 -32
- package/dist/cjs/Avatar/avatar.js.map +1 -1
- package/dist/cjs/Backdrop/backdrop.js +18 -22
- package/dist/cjs/Backdrop/backdrop.js.map +1 -1
- package/dist/cjs/Box/box.js +31 -48
- package/dist/cjs/Box/box.js.map +1 -1
- package/dist/cjs/Button/button.js +16 -28
- package/dist/cjs/Button/button.js.map +1 -1
- package/dist/cjs/ButtonBase/button_base.js +110 -178
- package/dist/cjs/ButtonBase/button_base.js.map +1 -1
- package/dist/cjs/Checkbox/checkbox.js +14 -28
- package/dist/cjs/Checkbox/checkbox.js.map +1 -1
- package/dist/cjs/Chip/chip.js +78 -111
- package/dist/cjs/Chip/chip.js.map +1 -1
- package/dist/cjs/CircularProgress/circular_progress.js +24 -28
- package/dist/cjs/CircularProgress/circular_progress.js.map +1 -1
- package/dist/cjs/Collapse/collapse.js +23 -19
- package/dist/cjs/Collapse/collapse.js.map +1 -1
- package/dist/cjs/Dialog/dialog.js +28 -33
- package/dist/cjs/Dialog/dialog.js.map +1 -1
- package/dist/cjs/Dialog/dialog_actions.js +14 -10
- package/dist/cjs/Dialog/dialog_actions.js.map +1 -1
- package/dist/cjs/Dialog/dialog_content.js +18 -29
- package/dist/cjs/Dialog/dialog_content.js.map +1 -1
- package/dist/cjs/Dialog/dialog_title.js +17 -14
- package/dist/cjs/Dialog/dialog_title.js.map +1 -1
- package/dist/cjs/Drawer/drawer.js +18 -10
- package/dist/cjs/Drawer/drawer.js.map +1 -1
- package/dist/cjs/Fab/fab.js +6 -22
- package/dist/cjs/Fab/fab.js.map +1 -1
- package/dist/cjs/IconButton/icon_button.js +8 -9
- package/dist/cjs/IconButton/icon_button.js.map +1 -1
- package/dist/cjs/Image/image.js +3 -0
- package/dist/cjs/Image/image.js.map +1 -1
- package/dist/cjs/LinearProgress/linear_progress.js +19 -15
- package/dist/cjs/LinearProgress/linear_progress.js.map +1 -1
- package/dist/cjs/Menu/menu.js +7 -12
- package/dist/cjs/Menu/menu.js.map +1 -1
- package/dist/cjs/MenuList/menu_item.js +15 -18
- package/dist/cjs/MenuList/menu_item.js.map +1 -1
- package/dist/cjs/MenuList/menu_list.js +5 -10
- package/dist/cjs/MenuList/menu_list.js.map +1 -1
- package/dist/cjs/MenuList/sub_menu_item.js +4 -5
- package/dist/cjs/MenuList/sub_menu_item.js.map +1 -1
- package/dist/cjs/Modal/modal.js +21 -21
- package/dist/cjs/Modal/modal.js.map +1 -1
- package/dist/cjs/Popover/popover.js +14 -13
- package/dist/cjs/Popover/popover.js.map +1 -1
- package/dist/cjs/Radio/radio.js +17 -28
- package/dist/cjs/Radio/radio.js.map +1 -1
- package/dist/cjs/Select/select.js +36 -81
- package/dist/cjs/Select/select.js.map +1 -1
- package/dist/cjs/Skeleton/skeleton.js +12 -10
- package/dist/cjs/Skeleton/skeleton.js.map +1 -1
- package/dist/cjs/Slider/slider.js +20 -14
- package/dist/cjs/Slider/slider.js.map +1 -1
- package/dist/cjs/Switch/switch.js +26 -17
- package/dist/cjs/Switch/switch.js.map +1 -1
- package/dist/cjs/Tabs/tab.js +9 -11
- package/dist/cjs/Tabs/tab.js.map +1 -1
- package/dist/cjs/Tabs/tabs.js +17 -10
- package/dist/cjs/Tabs/tabs.js.map +1 -1
- package/dist/cjs/TextField/text_field.js +32 -57
- package/dist/cjs/TextField/text_field.js.map +1 -1
- package/dist/cjs/TextareaField/textarea_field.js +30 -64
- package/dist/cjs/TextareaField/textarea_field.js.map +1 -1
- package/dist/cjs/Toast/toast.js +4 -1
- package/dist/cjs/Toast/toast.js.map +1 -1
- package/dist/cjs/Toast/toast_container.js +17 -10
- package/dist/cjs/Toast/toast_container.js.map +1 -1
- package/dist/cjs/Tooltip/tooltip.js +19 -23
- package/dist/cjs/Tooltip/tooltip.js.map +1 -1
- package/dist/cjs/Typography/typography.js +11 -28
- package/dist/cjs/Typography/typography.js.map +1 -1
- package/dist/cjs/hooks/use_image.js +8 -0
- package/dist/cjs/hooks/use_image.js.map +1 -1
- package/dist/cjs/styles/default_theme.js +13 -141
- package/dist/cjs/styles/default_theme.js.map +1 -1
- package/dist/cjs/styles/foundations/colors.js +69 -0
- package/dist/cjs/styles/foundations/colors.js.map +1 -0
- package/dist/cjs/styles/foundations/index.js +34 -0
- package/dist/cjs/styles/foundations/index.js.map +1 -0
- package/dist/cjs/styles/foundations/shadow.js +11 -0
- package/dist/cjs/styles/foundations/shadow.js.map +1 -0
- package/dist/cjs/styles/{sizes/base.js → foundations/sizes.js} +5 -5
- package/dist/cjs/styles/foundations/sizes.js.map +1 -0
- package/dist/cjs/styles/foundations/text.js +132 -0
- package/dist/cjs/styles/foundations/text.js.map +1 -0
- package/dist/cjs/styles/index.js +3 -7
- package/dist/cjs/styles/index.js.map +1 -1
- package/dist/cjs/styles/theme_provider.js +12 -8
- package/dist/cjs/styles/theme_provider.js.map +1 -1
- package/dist/cjs/styles/utils.js +40 -19
- package/dist/cjs/styles/utils.js.map +1 -1
- package/dist/esm/Alert/alert.js +22 -21
- package/dist/esm/Alert/alert.js.map +1 -1
- package/dist/esm/Autocomplete/autocomplete.js +74 -97
- package/dist/esm/Autocomplete/autocomplete.js.map +1 -1
- package/dist/esm/Avatar/avatar.js +19 -32
- package/dist/esm/Avatar/avatar.js.map +1 -1
- package/dist/esm/Backdrop/backdrop.js +15 -22
- package/dist/esm/Backdrop/backdrop.js.map +1 -1
- package/dist/esm/Box/box.js +28 -48
- package/dist/esm/Box/box.js.map +1 -1
- package/dist/esm/Button/button.js +13 -28
- package/dist/esm/Button/button.js.map +1 -1
- package/dist/esm/ButtonBase/button_base.js +107 -178
- package/dist/esm/ButtonBase/button_base.js.map +1 -1
- package/dist/esm/Checkbox/checkbox.js +11 -28
- package/dist/esm/Checkbox/checkbox.js.map +1 -1
- package/dist/esm/Chip/chip.js +75 -111
- package/dist/esm/Chip/chip.js.map +1 -1
- package/dist/esm/CircularProgress/circular_progress.js +22 -26
- package/dist/esm/CircularProgress/circular_progress.js.map +1 -1
- package/dist/esm/Collapse/collapse.js +20 -19
- package/dist/esm/Collapse/collapse.js.map +1 -1
- package/dist/esm/Dialog/dialog.js +28 -33
- package/dist/esm/Dialog/dialog.js.map +1 -1
- package/dist/esm/Dialog/dialog_actions.js +14 -10
- package/dist/esm/Dialog/dialog_actions.js.map +1 -1
- package/dist/esm/Dialog/dialog_content.js +18 -29
- package/dist/esm/Dialog/dialog_content.js.map +1 -1
- package/dist/esm/Dialog/dialog_title.js +17 -14
- package/dist/esm/Dialog/dialog_title.js.map +1 -1
- package/dist/esm/Drawer/drawer.js +15 -10
- package/dist/esm/Drawer/drawer.js.map +1 -1
- package/dist/esm/Fab/fab.js +4 -23
- package/dist/esm/Fab/fab.js.map +1 -1
- package/dist/esm/IconButton/icon_button.js +5 -9
- package/dist/esm/IconButton/icon_button.js.map +1 -1
- package/dist/esm/Image/image.js +3 -0
- package/dist/esm/Image/image.js.map +1 -1
- package/dist/esm/LinearProgress/linear_progress.js +18 -14
- package/dist/esm/LinearProgress/linear_progress.js.map +1 -1
- package/dist/esm/Menu/menu.js +7 -12
- package/dist/esm/Menu/menu.js.map +1 -1
- package/dist/esm/MenuList/menu_item.js +15 -18
- package/dist/esm/MenuList/menu_item.js.map +1 -1
- package/dist/esm/MenuList/menu_list.js +5 -10
- package/dist/esm/MenuList/menu_list.js.map +1 -1
- package/dist/esm/MenuList/sub_menu_item.js +4 -5
- package/dist/esm/MenuList/sub_menu_item.js.map +1 -1
- package/dist/esm/Modal/modal.js +18 -21
- package/dist/esm/Modal/modal.js.map +1 -1
- package/dist/esm/Popover/popover.js +14 -13
- package/dist/esm/Popover/popover.js.map +1 -1
- package/dist/esm/Radio/radio.js +14 -28
- package/dist/esm/Radio/radio.js.map +1 -1
- package/dist/esm/Select/select.js +33 -81
- package/dist/esm/Select/select.js.map +1 -1
- package/dist/esm/Skeleton/skeleton.js +8 -9
- package/dist/esm/Skeleton/skeleton.js.map +1 -1
- package/dist/esm/Slider/slider.js +17 -14
- package/dist/esm/Slider/slider.js.map +1 -1
- package/dist/esm/Switch/switch.js +23 -17
- package/dist/esm/Switch/switch.js.map +1 -1
- package/dist/esm/Tabs/tab.js +6 -11
- package/dist/esm/Tabs/tab.js.map +1 -1
- package/dist/esm/Tabs/tabs.js +14 -10
- package/dist/esm/Tabs/tabs.js.map +1 -1
- package/dist/esm/TextField/text_field.js +29 -57
- package/dist/esm/TextField/text_field.js.map +1 -1
- package/dist/esm/TextareaField/textarea_field.js +27 -64
- package/dist/esm/TextareaField/textarea_field.js.map +1 -1
- package/dist/esm/Toast/toast.js +4 -1
- package/dist/esm/Toast/toast.js.map +1 -1
- package/dist/esm/Toast/toast_container.js +14 -10
- package/dist/esm/Toast/toast_container.js.map +1 -1
- package/dist/esm/Tooltip/tooltip.js +18 -22
- package/dist/esm/Tooltip/tooltip.js.map +1 -1
- package/dist/esm/Typography/typography.js +8 -28
- package/dist/esm/Typography/typography.js.map +1 -1
- package/dist/esm/hooks/use_image.js +8 -0
- package/dist/esm/hooks/use_image.js.map +1 -1
- package/dist/esm/styles/default_theme.js +12 -140
- package/dist/esm/styles/default_theme.js.map +1 -1
- package/dist/esm/styles/foundations/colors.js +65 -0
- package/dist/esm/styles/foundations/colors.js.map +1 -0
- package/dist/esm/styles/foundations/index.js +6 -0
- package/dist/esm/styles/foundations/index.js.map +1 -0
- package/dist/esm/styles/foundations/shadow.js +8 -0
- package/dist/esm/styles/foundations/shadow.js.map +1 -0
- package/dist/esm/styles/{sizes/base.js → foundations/sizes.js} +3 -3
- package/dist/esm/styles/foundations/sizes.js.map +1 -0
- package/dist/esm/styles/foundations/text.js +129 -0
- package/dist/esm/styles/foundations/text.js.map +1 -0
- package/dist/esm/styles/index.js +1 -2
- package/dist/esm/styles/index.js.map +1 -1
- package/dist/esm/styles/theme_provider.js +13 -9
- package/dist/esm/styles/theme_provider.js.map +1 -1
- package/dist/esm/styles/utils.js +38 -17
- package/dist/esm/styles/utils.js.map +1 -1
- package/dist/esnext/Alert/alert.js +21 -20
- package/dist/esnext/Alert/alert.js.map +1 -1
- package/dist/esnext/Autocomplete/autocomplete.js +66 -86
- package/dist/esnext/Autocomplete/autocomplete.js.map +1 -1
- package/dist/esnext/Avatar/avatar.js +28 -30
- package/dist/esnext/Avatar/avatar.js.map +1 -1
- package/dist/esnext/Backdrop/backdrop.js +22 -19
- package/dist/esnext/Backdrop/backdrop.js.map +1 -1
- package/dist/esnext/Box/box.js +27 -46
- package/dist/esnext/Box/box.js.map +1 -1
- package/dist/esnext/Button/button.js +36 -48
- package/dist/esnext/Button/button.js.map +1 -1
- package/dist/esnext/ButtonBase/button_base.js +106 -176
- package/dist/esnext/ButtonBase/button_base.js.map +1 -1
- package/dist/esnext/Checkbox/checkbox.js +8 -24
- package/dist/esnext/Checkbox/checkbox.js.map +1 -1
- package/dist/esnext/Chip/chip.js +82 -123
- package/dist/esnext/Chip/chip.js.map +1 -1
- package/dist/esnext/CircularProgress/circular_progress.js +30 -32
- package/dist/esnext/CircularProgress/circular_progress.js.map +1 -1
- package/dist/esnext/Collapse/collapse.js +29 -25
- package/dist/esnext/Collapse/collapse.js.map +1 -1
- package/dist/esnext/Dialog/dialog.js +38 -39
- package/dist/esnext/Dialog/dialog.js.map +1 -1
- package/dist/esnext/Dialog/dialog_actions.js +13 -8
- package/dist/esnext/Dialog/dialog_actions.js.map +1 -1
- package/dist/esnext/Dialog/dialog_content.js +14 -24
- package/dist/esnext/Dialog/dialog_content.js.map +1 -1
- package/dist/esnext/Dialog/dialog_title.js +15 -11
- package/dist/esnext/Dialog/dialog_title.js.map +1 -1
- package/dist/esnext/Drawer/drawer.js +14 -8
- package/dist/esnext/Drawer/drawer.js.map +1 -1
- package/dist/esnext/Fab/fab.js +3 -10
- package/dist/esnext/Fab/fab.js.map +1 -1
- package/dist/esnext/IconButton/icon_button.js +4 -7
- package/dist/esnext/IconButton/icon_button.js.map +1 -1
- package/dist/esnext/Image/image.js +3 -0
- package/dist/esnext/Image/image.js.map +1 -1
- package/dist/esnext/LinearProgress/linear_progress.js +16 -11
- package/dist/esnext/LinearProgress/linear_progress.js.map +1 -1
- package/dist/esnext/Menu/menu.js +5 -9
- package/dist/esnext/Menu/menu.js.map +1 -1
- package/dist/esnext/MenuList/menu_item.js +13 -16
- package/dist/esnext/MenuList/menu_item.js.map +1 -1
- package/dist/esnext/MenuList/menu_list.js +4 -8
- package/dist/esnext/MenuList/menu_list.js.map +1 -1
- package/dist/esnext/MenuList/sub_menu_item.js +3 -4
- package/dist/esnext/MenuList/sub_menu_item.js.map +1 -1
- package/dist/esnext/Modal/modal.js +20 -14
- package/dist/esnext/Modal/modal.js.map +1 -1
- package/dist/esnext/Popover/popover.js +10 -8
- package/dist/esnext/Popover/popover.js.map +1 -1
- package/dist/esnext/Radio/radio.js +11 -24
- package/dist/esnext/Radio/radio.js.map +1 -1
- package/dist/esnext/Select/select.js +41 -54
- package/dist/esnext/Select/select.js.map +1 -1
- package/dist/esnext/Skeleton/skeleton.js +8 -9
- package/dist/esnext/Skeleton/skeleton.js.map +1 -1
- package/dist/esnext/Slider/slider.js +15 -11
- package/dist/esnext/Slider/slider.js.map +1 -1
- package/dist/esnext/Switch/switch.js +21 -14
- package/dist/esnext/Switch/switch.js.map +1 -1
- package/dist/esnext/Tabs/tab.js +5 -9
- package/dist/esnext/Tabs/tab.js.map +1 -1
- package/dist/esnext/Tabs/tabs.js +13 -8
- package/dist/esnext/Tabs/tabs.js.map +1 -1
- package/dist/esnext/TextField/text_field.js +30 -36
- package/dist/esnext/TextField/text_field.js.map +1 -1
- package/dist/esnext/TextareaField/textarea_field.js +32 -41
- package/dist/esnext/TextareaField/textarea_field.js.map +1 -1
- package/dist/esnext/Toast/toast.js +4 -1
- package/dist/esnext/Toast/toast.js.map +1 -1
- package/dist/esnext/Toast/toast_container.js +13 -8
- package/dist/esnext/Toast/toast_container.js.map +1 -1
- package/dist/esnext/Tooltip/tooltip.js +15 -17
- package/dist/esnext/Tooltip/tooltip.js.map +1 -1
- package/dist/esnext/Typography/typography.js +18 -29
- package/dist/esnext/Typography/typography.js.map +1 -1
- package/dist/esnext/hooks/use_image.js +8 -0
- package/dist/esnext/hooks/use_image.js.map +1 -1
- package/dist/esnext/styles/default_theme.js +38 -139
- package/dist/esnext/styles/default_theme.js.map +1 -1
- package/dist/esnext/styles/foundations/colors.js +64 -0
- package/dist/esnext/styles/foundations/colors.js.map +1 -0
- package/dist/esnext/styles/foundations/index.js +6 -0
- package/dist/esnext/styles/foundations/index.js.map +1 -0
- package/dist/esnext/styles/foundations/shadow.js +8 -0
- package/dist/esnext/styles/foundations/shadow.js.map +1 -0
- package/dist/esnext/styles/{sizes/base.js → foundations/sizes.js} +3 -3
- package/dist/esnext/styles/foundations/sizes.js.map +1 -0
- package/dist/esnext/styles/foundations/text.js +129 -0
- package/dist/esnext/styles/foundations/text.js.map +1 -0
- package/dist/esnext/styles/index.js +1 -2
- package/dist/esnext/styles/index.js.map +1 -1
- package/dist/esnext/styles/theme_provider.js +13 -9
- package/dist/esnext/styles/theme_provider.js.map +1 -1
- package/dist/esnext/styles/utils.js +46 -25
- package/dist/esnext/styles/utils.js.map +1 -1
- package/dist/types/Alert/alert.d.ts +9 -4
- package/dist/types/Autocomplete/autocomplete.d.ts +2 -2
- package/dist/types/Avatar/avatar.d.ts +7 -5
- package/dist/types/Backdrop/backdrop.d.ts +6 -3
- package/dist/types/Checkbox/checkbox.d.ts +4 -5
- package/dist/types/CircularProgress/circular_progress.d.ts +6 -6
- package/dist/types/Collapse/collapse.d.ts +9 -3
- package/dist/types/Dialog/dialog.d.ts +8 -2
- package/dist/types/Dialog/dialog_actions.d.ts +8 -2
- package/dist/types/Dialog/dialog_content.d.ts +2 -2
- package/dist/types/Dialog/dialog_title.d.ts +8 -2
- package/dist/types/Drawer/drawer.d.ts +8 -2
- package/dist/types/IconButton/icon_button.d.ts +2 -2
- package/dist/types/Image/image.d.ts +8 -3
- package/dist/types/LinearProgress/linear_progress.d.ts +8 -2
- package/dist/types/Menu/menu.d.ts +5 -5
- package/dist/types/Modal/modal.d.ts +9 -4
- package/dist/types/Popover/popover.d.ts +3 -0
- package/dist/types/Radio/radio.d.ts +7 -5
- package/dist/types/Select/select.d.ts +8 -3
- package/dist/types/Slider/slider.d.ts +9 -4
- package/dist/types/Switch/switch.d.ts +9 -4
- package/dist/types/Tabs/tabs.d.ts +8 -2
- package/dist/types/TextField/text_field.d.ts +8 -3
- package/dist/types/TextareaField/textarea_field.d.ts +9 -4
- package/dist/types/Toast/toast.d.ts +8 -2
- package/dist/types/Toast/toast_container.d.ts +8 -2
- package/dist/types/Tooltip/index.d.ts +1 -1
- package/dist/types/Tooltip/tooltip.d.ts +2 -2
- package/dist/types/styles/default_theme.d.ts +2 -1
- package/dist/types/styles/foundations/colors.d.ts +64 -0
- package/dist/types/styles/foundations/index.d.ts +4 -0
- package/dist/types/styles/foundations/shadow.d.ts +7 -0
- package/dist/types/styles/{sizes/base.d.ts → foundations/sizes.d.ts} +2 -2
- package/dist/types/styles/foundations/text.d.ts +128 -0
- package/dist/types/styles/index.d.ts +1 -2
- package/dist/types/styles/theme_provider.d.ts +7 -0
- package/dist/types/styles/types.d.ts +1 -1
- package/dist/types/styles/utils.d.ts +2 -28
- package/package.json +15 -22
- package/dist/cjs/styles/colors/additional.js +0 -8
- package/dist/cjs/styles/colors/additional.js.map +0 -1
- package/dist/cjs/styles/colors/attention.js +0 -24
- package/dist/cjs/styles/colors/attention.js.map +0 -1
- package/dist/cjs/styles/colors/grayscale.js +0 -18
- package/dist/cjs/styles/colors/grayscale.js.map +0 -1
- package/dist/cjs/styles/colors/index.js +0 -23
- package/dist/cjs/styles/colors/index.js.map +0 -1
- package/dist/cjs/styles/colors/primary.js +0 -24
- package/dist/cjs/styles/colors/primary.js.map +0 -1
- package/dist/cjs/styles/colors/secondary.js +0 -24
- package/dist/cjs/styles/colors/secondary.js.map +0 -1
- package/dist/cjs/styles/colors/success.js +0 -24
- package/dist/cjs/styles/colors/success.js.map +0 -1
- package/dist/cjs/styles/colors/wrong.js +0 -24
- package/dist/cjs/styles/colors/wrong.js.map +0 -1
- package/dist/cjs/styles/css.js +0 -13
- package/dist/cjs/styles/css.js.map +0 -1
- package/dist/cjs/styles/sizes/base.js.map +0 -1
- package/dist/cjs/styles/sizes/index.js +0 -7
- package/dist/cjs/styles/sizes/index.js.map +0 -1
- package/dist/esm/styles/colors/additional.js +0 -5
- package/dist/esm/styles/colors/additional.js.map +0 -1
- package/dist/esm/styles/colors/attention.js +0 -20
- package/dist/esm/styles/colors/attention.js.map +0 -1
- package/dist/esm/styles/colors/grayscale.js +0 -15
- package/dist/esm/styles/colors/grayscale.js.map +0 -1
- package/dist/esm/styles/colors/index.js +0 -8
- package/dist/esm/styles/colors/index.js.map +0 -1
- package/dist/esm/styles/colors/primary.js +0 -20
- package/dist/esm/styles/colors/primary.js.map +0 -1
- package/dist/esm/styles/colors/secondary.js +0 -20
- package/dist/esm/styles/colors/secondary.js.map +0 -1
- package/dist/esm/styles/colors/success.js +0 -20
- package/dist/esm/styles/colors/success.js.map +0 -1
- package/dist/esm/styles/colors/wrong.js +0 -20
- package/dist/esm/styles/colors/wrong.js.map +0 -1
- package/dist/esm/styles/css.js +0 -7
- package/dist/esm/styles/css.js.map +0 -1
- package/dist/esm/styles/sizes/base.js.map +0 -1
- package/dist/esm/styles/sizes/index.js +0 -2
- package/dist/esm/styles/sizes/index.js.map +0 -1
- package/dist/esnext/styles/colors/additional.js +0 -5
- package/dist/esnext/styles/colors/additional.js.map +0 -1
- package/dist/esnext/styles/colors/attention.js +0 -19
- package/dist/esnext/styles/colors/attention.js.map +0 -1
- package/dist/esnext/styles/colors/grayscale.js +0 -15
- package/dist/esnext/styles/colors/grayscale.js.map +0 -1
- package/dist/esnext/styles/colors/index.js +0 -8
- package/dist/esnext/styles/colors/index.js.map +0 -1
- package/dist/esnext/styles/colors/primary.js +0 -19
- package/dist/esnext/styles/colors/primary.js.map +0 -1
- package/dist/esnext/styles/colors/secondary.js +0 -19
- package/dist/esnext/styles/colors/secondary.js.map +0 -1
- package/dist/esnext/styles/colors/success.js +0 -19
- package/dist/esnext/styles/colors/success.js.map +0 -1
- package/dist/esnext/styles/colors/wrong.js +0 -19
- package/dist/esnext/styles/colors/wrong.js.map +0 -1
- package/dist/esnext/styles/css.js +0 -6
- package/dist/esnext/styles/css.js.map +0 -1
- package/dist/esnext/styles/sizes/base.js.map +0 -1
- package/dist/esnext/styles/sizes/index.js +0 -2
- package/dist/esnext/styles/sizes/index.js.map +0 -1
- package/dist/types/styles/colors/additional.d.ts +0 -4
- package/dist/types/styles/colors/attention.d.ts +0 -26
- package/dist/types/styles/colors/grayscale.d.ts +0 -14
- package/dist/types/styles/colors/index.d.ts +0 -7
- package/dist/types/styles/colors/primary.d.ts +0 -26
- package/dist/types/styles/colors/secondary.d.ts +0 -26
- package/dist/types/styles/colors/success.d.ts +0 -26
- package/dist/types/styles/colors/wrong.d.ts +0 -26
- package/dist/types/styles/css.d.ts +0 -10
- package/dist/types/styles/sizes/index.d.ts +0 -1
package/dist/esnext/Chip/chip.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import
|
|
2
|
+
import styled from '@emotion/styled';
|
|
3
|
+
import isPropValid from '@emotion/is-prop-valid';
|
|
3
4
|
import { Typography } from '../Typography';
|
|
4
5
|
import { CloseSmallIcon } from '../icons';
|
|
5
6
|
/**
|
|
@@ -8,8 +9,9 @@ import { CloseSmallIcon } from '../icons';
|
|
|
8
9
|
/**
|
|
9
10
|
* Styles.
|
|
10
11
|
*/
|
|
11
|
-
const
|
|
12
|
-
|
|
12
|
+
const ChipRoot = styled('div', {
|
|
13
|
+
shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'color',
|
|
14
|
+
})((props) => ({
|
|
13
15
|
display: 'inline-flex',
|
|
14
16
|
maxWidth: '100%',
|
|
15
17
|
fontFamily: 'inherit',
|
|
@@ -28,102 +30,80 @@ const stylesBase = () => css({
|
|
|
28
30
|
alignItems: 'center',
|
|
29
31
|
whiteSpace: 'nowrap',
|
|
30
32
|
textDecoration: 'none',
|
|
31
|
-
});
|
|
32
|
-
const stylesDisabled = () => css({
|
|
33
|
-
label: 'disabled',
|
|
34
|
-
pointerEvents: 'none',
|
|
35
|
-
});
|
|
36
|
-
const stylesClickable = () => css({
|
|
37
|
-
label: 'clickable',
|
|
38
|
-
cursor: 'pointer',
|
|
39
|
-
userSelect: 'none',
|
|
40
|
-
WebkitTapHighlightColor: 'transparent',
|
|
41
|
-
});
|
|
42
|
-
const stylesVariantContainedColorNotDefault = (props) => css({
|
|
43
|
-
label: 'contained',
|
|
44
|
-
backgroundColor: `var(--pv-color-${props.color})`,
|
|
45
|
-
color: 'var(--pv-color-white)',
|
|
46
|
-
...(typeof props.onClick === 'function' && !props.disabled && {
|
|
47
|
-
'&:hover': {
|
|
48
|
-
backgroundColor: `var(--pv-color-${props.color}-tint-1)`,
|
|
49
|
-
},
|
|
50
|
-
'&:focus': {
|
|
51
|
-
backgroundColor: `var(--pv-color-${props.color}-tint-2)`,
|
|
52
|
-
},
|
|
53
|
-
'&:active': {
|
|
54
|
-
backgroundColor: `var(--pv-color-${props.color}-tint-2)`,
|
|
55
|
-
boxShadow: 'var(--pv-shadow-light-medium)',
|
|
56
|
-
},
|
|
57
|
-
}),
|
|
58
|
-
...(props.disabled && {
|
|
59
|
-
color: 'var(--pv-color-gray-8)',
|
|
60
|
-
backgroundColor: 'var(--pv-color-gray-4)',
|
|
61
|
-
}),
|
|
62
|
-
});
|
|
63
|
-
const stylesVariantContainedColorDefault = (props) => css({
|
|
64
|
-
label: 'contained-default',
|
|
65
|
-
backgroundColor: 'var(--pv-color-gray-4)',
|
|
66
|
-
color: 'var(--pv-color-black)',
|
|
67
|
-
...(typeof props.onClick === 'function' && !props.disabled && {
|
|
68
|
-
'&:hover': {
|
|
69
|
-
backgroundColor: 'var(--pv-color-gray-7)',
|
|
70
|
-
},
|
|
71
|
-
'&:focus': {
|
|
72
|
-
backgroundColor: 'var(--pv-color-gray-6)',
|
|
73
|
-
},
|
|
74
|
-
'&:active': {
|
|
75
|
-
backgroundColor: 'var(--pv-color-gray-5)',
|
|
76
|
-
},
|
|
77
|
-
}),
|
|
78
33
|
...(props.disabled && {
|
|
79
|
-
|
|
80
|
-
backgroundColor: 'var(--pv-color-gray-4)',
|
|
34
|
+
pointerEvents: 'none',
|
|
81
35
|
}),
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
color: `var(--pv-color-${props.color})`,
|
|
87
|
-
borderColor: `var(--pv-color-${props.color}-tint-2)`,
|
|
88
|
-
...(typeof props.onClick === 'function' && !props.disabled && {
|
|
89
|
-
'&:hover': {
|
|
90
|
-
backgroundColor: `var(--pv-color-${props.color}-tint-5)`,
|
|
91
|
-
},
|
|
92
|
-
'&:focus': {
|
|
93
|
-
backgroundColor: `var(--pv-color-${props.color}-tint-4)`,
|
|
94
|
-
},
|
|
95
|
-
'&:active': {
|
|
96
|
-
backgroundColor: `var(--pv-color-${props.color}-tint-3)`,
|
|
97
|
-
},
|
|
98
|
-
}),
|
|
99
|
-
...(props.disabled && {
|
|
100
|
-
color: 'var(--pv-color-gray-8)',
|
|
101
|
-
borderColor: 'var(--pv-color-gray-4)',
|
|
102
|
-
}),
|
|
103
|
-
});
|
|
104
|
-
const stylesVariantOutlinedColorDefault = (props) => css({
|
|
105
|
-
label: 'outlined-default',
|
|
106
|
-
backgroundColor: 'transparent',
|
|
107
|
-
color: 'var(--pv-color-gray-10)',
|
|
108
|
-
borderColor: 'var(--pv-color-gray-6)',
|
|
109
|
-
...(typeof props.onClick === 'function' && !props.disabled && {
|
|
110
|
-
'&:hover': {
|
|
111
|
-
backgroundColor: 'var(--pv-color-gray-3)',
|
|
112
|
-
},
|
|
113
|
-
'&:focus': {
|
|
114
|
-
backgroundColor: 'var(--pv-color-gray-4)',
|
|
115
|
-
},
|
|
116
|
-
'&:active': {
|
|
117
|
-
backgroundColor: 'var(--pv-color-gray-5)',
|
|
118
|
-
},
|
|
119
|
-
}),
|
|
120
|
-
...(props.disabled && {
|
|
121
|
-
color: 'var(--pv-color-gray-8)',
|
|
122
|
-
borderColor: 'var(--pv-color-gray-4)',
|
|
36
|
+
...(Boolean(props.onClick) && !props.disabled && {
|
|
37
|
+
cursor: 'pointer',
|
|
38
|
+
userSelect: 'none',
|
|
39
|
+
WebkitTapHighlightColor: 'transparent',
|
|
123
40
|
}),
|
|
41
|
+
}), (props) => {
|
|
42
|
+
let color;
|
|
43
|
+
let borderColor;
|
|
44
|
+
let backgroundColor;
|
|
45
|
+
let backgroundColorHover;
|
|
46
|
+
let backgroundColorFocus;
|
|
47
|
+
let backgroundColorActive;
|
|
48
|
+
let boxShadowActive;
|
|
49
|
+
if (props.variant === 'contained') {
|
|
50
|
+
if (props.color === 'default') {
|
|
51
|
+
color = 'var(--pv-color-black)';
|
|
52
|
+
backgroundColor = 'var(--pv-color-gray-4)';
|
|
53
|
+
backgroundColorHover = 'var(--pv-color-gray-7)';
|
|
54
|
+
backgroundColorFocus = 'var(--pv-color-gray-6)';
|
|
55
|
+
backgroundColorActive = 'var(--pv-color-gray-5)';
|
|
56
|
+
}
|
|
57
|
+
else {
|
|
58
|
+
color = 'var(--pv-color-white)';
|
|
59
|
+
backgroundColor = `var(--pv-color-${props.color})`;
|
|
60
|
+
backgroundColorHover = `var(--pv-color-${props.color}-tint-1)`;
|
|
61
|
+
backgroundColorFocus = `var(--pv-color-${props.color}-tint-2)`;
|
|
62
|
+
backgroundColorActive = `var(--pv-color-${props.color}-tint-2)`;
|
|
63
|
+
boxShadowActive = 'var(--pv-shadow-light-medium)';
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
if (props.variant === 'outlined') {
|
|
67
|
+
if (props.color === 'default') {
|
|
68
|
+
color = 'var(--pv-color-gray-10)';
|
|
69
|
+
borderColor = 'var(--pv-color-gray-6)';
|
|
70
|
+
backgroundColor = 'transparent';
|
|
71
|
+
backgroundColorHover = 'var(--pv-color-gray-3)';
|
|
72
|
+
backgroundColorFocus = 'var(--pv-color-gray-4)';
|
|
73
|
+
backgroundColorActive = 'var(--pv-color-gray-5)';
|
|
74
|
+
}
|
|
75
|
+
else {
|
|
76
|
+
color = `var(--pv-color-${props.color})`;
|
|
77
|
+
borderColor = `var(--pv-color-${props.color}-tint-2)`;
|
|
78
|
+
backgroundColor = 'transparent';
|
|
79
|
+
backgroundColorHover = `var(--pv-color-${props.color}-tint-5)`;
|
|
80
|
+
backgroundColorFocus = `var(--pv-color-${props.color}-tint-4)`;
|
|
81
|
+
backgroundColorActive = `var(--pv-color-${props.color}-tint-3)`;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
return {
|
|
85
|
+
borderColor,
|
|
86
|
+
backgroundColor,
|
|
87
|
+
color,
|
|
88
|
+
...(typeof props.onClick === 'function' && !props.disabled && {
|
|
89
|
+
'&:hover': {
|
|
90
|
+
backgroundColor: backgroundColorHover,
|
|
91
|
+
},
|
|
92
|
+
'&:focus': {
|
|
93
|
+
backgroundColor: backgroundColorFocus,
|
|
94
|
+
},
|
|
95
|
+
'&:active': {
|
|
96
|
+
backgroundColor: backgroundColorActive,
|
|
97
|
+
boxShadow: boxShadowActive,
|
|
98
|
+
},
|
|
99
|
+
}),
|
|
100
|
+
...(props.disabled && {
|
|
101
|
+
color: 'var(--pv-color-gray-8)',
|
|
102
|
+
borderColor: 'var(--pv-color-gray-4)',
|
|
103
|
+
}),
|
|
104
|
+
};
|
|
124
105
|
});
|
|
125
|
-
const
|
|
126
|
-
label: 'delete',
|
|
106
|
+
const ChipDeleteIcon = styled('span')({
|
|
127
107
|
width: '24px',
|
|
128
108
|
height: '24px',
|
|
129
109
|
cursor: 'pointer',
|
|
@@ -136,8 +116,7 @@ const stylesDeleteAction = () => css({
|
|
|
136
116
|
opacity: '1',
|
|
137
117
|
},
|
|
138
118
|
});
|
|
139
|
-
const
|
|
140
|
-
label: 'Chip-startIcon',
|
|
119
|
+
const ChipStartContent = styled('span')({
|
|
141
120
|
marginRight: 'var(--pv-size-base)',
|
|
142
121
|
display: 'inherit',
|
|
143
122
|
});
|
|
@@ -145,9 +124,11 @@ const stylesStartContent = () => css({
|
|
|
145
124
|
*
|
|
146
125
|
*/
|
|
147
126
|
export const Chip = React.forwardRef((props, ref) => {
|
|
148
|
-
const { children, disabled, deleteIcon
|
|
127
|
+
const { children, disabled, deleteIcon = CloseSmallIcon, startContent: startContentProp, component, onClick, onDelete, ...other } = props;
|
|
128
|
+
const Component = component || 'div';
|
|
149
129
|
const clickable = Boolean(onClick);
|
|
150
130
|
const baseProps = {
|
|
131
|
+
disabled,
|
|
151
132
|
role: clickable ? 'button' : undefined,
|
|
152
133
|
'aria-disabled': disabled ? true : undefined,
|
|
153
134
|
tabIndex: clickable && !disabled ? 0 : undefined,
|
|
@@ -164,32 +145,10 @@ export const Chip = React.forwardRef((props, ref) => {
|
|
|
164
145
|
if (!onDelete) {
|
|
165
146
|
return null;
|
|
166
147
|
}
|
|
167
|
-
|
|
168
|
-
'aria-hidden': true,
|
|
169
|
-
className: cx(stylesDeleteAction()),
|
|
170
|
-
onClick: handleDeleteClick,
|
|
171
|
-
};
|
|
172
|
-
if (deleteIcon) {
|
|
173
|
-
return React.cloneElement(deleteIcon, baseIconProps);
|
|
174
|
-
}
|
|
175
|
-
return (React.createElement(CloseSmallIcon, { ...baseIconProps }));
|
|
148
|
+
return (React.createElement(ChipDeleteIcon, { "aria-hidden": true, as: deleteIcon, onClick: handleDeleteClick }));
|
|
176
149
|
};
|
|
177
|
-
const startContent = startContentProp && (React.createElement(
|
|
178
|
-
|
|
179
|
-
return (React.createElement(Component, { ...other, ...baseProps, ref: ref, className: cx({
|
|
180
|
-
[stylesBase()]: true,
|
|
181
|
-
[stylesDisabled()]: disabled,
|
|
182
|
-
[stylesClickable()]: clickable && !disabled,
|
|
183
|
-
...(color !== 'default' && {
|
|
184
|
-
[stylesVariantContainedColorNotDefault(props)]: variant === 'contained',
|
|
185
|
-
[stylesVariantOutlinedColorNotDefault(props)]: variant === 'outlined',
|
|
186
|
-
}),
|
|
187
|
-
...(color === 'default' && {
|
|
188
|
-
[stylesVariantContainedColorDefault(props)]: variant === 'contained',
|
|
189
|
-
[stylesVariantOutlinedColorDefault(props)]: variant === 'outlined',
|
|
190
|
-
}),
|
|
191
|
-
[className]: !!className,
|
|
192
|
-
}) },
|
|
150
|
+
const startContent = startContentProp && (React.createElement(ChipStartContent, null, startContentProp));
|
|
151
|
+
return (React.createElement(ChipRoot, { as: Component, ref: ref, ...baseProps, ...other },
|
|
193
152
|
startContent,
|
|
194
153
|
React.createElement(Typography, { variant: "b3", component: "span", color: "inherit", noWrap: true }, children),
|
|
195
154
|
renderDeleteAction()));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/Chip/chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/Chip/chip.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { keyframes } from '@emotion/react';
|
|
3
|
+
import styled from '@emotion/styled';
|
|
4
|
+
import isPropValid from '@emotion/is-prop-valid';
|
|
5
|
+
/**
|
|
6
|
+
*
|
|
7
|
+
*/
|
|
3
8
|
/**
|
|
4
9
|
* Styles.
|
|
5
10
|
*/
|
|
6
|
-
const SIZE = 44;
|
|
7
|
-
const THICKNESS = 4;
|
|
8
11
|
const circularRotateKeyframe = keyframes `
|
|
9
12
|
0% {
|
|
10
13
|
transform: rotate(0deg);
|
|
@@ -27,60 +30,55 @@ const circularDashKeyframe = keyframes `
|
|
|
27
30
|
stroke-dashoffset: -125px;
|
|
28
31
|
}
|
|
29
32
|
`;
|
|
30
|
-
const
|
|
33
|
+
const CircularProgressRoot = styled('div', {
|
|
34
|
+
shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'color',
|
|
35
|
+
})((props) => ({
|
|
31
36
|
label: 'CircularProgress',
|
|
32
37
|
overflow: 'hidden',
|
|
33
38
|
position: 'relative',
|
|
34
39
|
display: 'inline-block',
|
|
35
|
-
color: `var(--pv-color-${color})`,
|
|
36
|
-
...(variant === 'indeterminate' ? {
|
|
40
|
+
color: `var(--pv-color-${props.color})`,
|
|
41
|
+
...(props.variant === 'indeterminate' ? {
|
|
37
42
|
animation: `${circularRotateKeyframe} 1.4s linear infinite`,
|
|
38
43
|
} : {
|
|
39
44
|
transform: 'rotate(-90deg)',
|
|
40
45
|
}),
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
});
|
|
52
|
-
const stylesProgressSvg = () => css({
|
|
53
|
-
label: 'CircularProgress-svg',
|
|
46
|
+
...(props.size === 'small' && {
|
|
47
|
+
height: 'var(--pv-size-base-3)',
|
|
48
|
+
width: 'var(--pv-size-base-3)',
|
|
49
|
+
}),
|
|
50
|
+
...(props.size === 'large' && {
|
|
51
|
+
height: 'var(--pv-size-base-6)',
|
|
52
|
+
width: 'var(--pv-size-base-6)',
|
|
53
|
+
}),
|
|
54
|
+
}));
|
|
55
|
+
const CircularProgressSvg = styled('svg')({
|
|
54
56
|
display: 'block',
|
|
55
57
|
});
|
|
56
|
-
const
|
|
57
|
-
label: 'CircularProgress-circle',
|
|
58
|
+
const CircularProgressCircle = styled('circle')((props) => ({
|
|
58
59
|
stroke: 'currentcolor',
|
|
59
60
|
strokeDasharray: '80px, 200px',
|
|
60
61
|
strokeDashoffset: 0,
|
|
61
|
-
...(variant === 'indeterminate' && {
|
|
62
|
+
...(props.variant === 'indeterminate' && {
|
|
62
63
|
animation: `${circularDashKeyframe} 1.4s ease-in-out infinite`,
|
|
63
64
|
}),
|
|
64
|
-
});
|
|
65
|
+
}));
|
|
65
66
|
/**
|
|
66
67
|
*
|
|
67
68
|
*/
|
|
69
|
+
const SIZE = 44;
|
|
70
|
+
const THICKNESS = 4;
|
|
68
71
|
export const CircularProgress = React.forwardRef((props, ref) => {
|
|
69
|
-
const {
|
|
72
|
+
const { size, variant = 'indeterminate', value = 0, ...other } = props;
|
|
70
73
|
const circleStyle = {};
|
|
71
74
|
if (variant === 'determinate') {
|
|
72
75
|
const circumference = 2 * Math.PI * ((SIZE - THICKNESS) / 2);
|
|
73
76
|
circleStyle.strokeDasharray = circumference.toFixed(3);
|
|
74
77
|
circleStyle.strokeDashoffset = `${(((100 - value) / 100) * circumference).toFixed(3)}px`;
|
|
75
78
|
}
|
|
76
|
-
return (React.createElement(
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
[stylesBaseLarge()]: size === 'large',
|
|
80
|
-
[className]: !!className,
|
|
81
|
-
}), role: "progressbar" },
|
|
82
|
-
React.createElement("svg", { viewBox: `${SIZE / 2} ${SIZE / 2} ${SIZE} ${SIZE}`, className: stylesProgressSvg() },
|
|
83
|
-
React.createElement("circle", { cx: SIZE, cy: SIZE, r: (SIZE - THICKNESS) / 2, fill: "none", strokeWidth: THICKNESS, className: stylesProgressCircle(variant), style: circleStyle }))));
|
|
79
|
+
return (React.createElement(CircularProgressRoot, { ref: ref, role: "progressbar", variant: variant, size: size, ...other },
|
|
80
|
+
React.createElement(CircularProgressSvg, { viewBox: `${SIZE / 2} ${SIZE / 2} ${SIZE} ${SIZE}` },
|
|
81
|
+
React.createElement(CircularProgressCircle, { cx: SIZE, cy: SIZE, r: (SIZE - THICKNESS) / 2, fill: "none", strokeWidth: THICKNESS, style: circleStyle, variant: variant }))));
|
|
84
82
|
});
|
|
85
83
|
CircularProgress.displayName = 'CircularProgress';
|
|
86
84
|
CircularProgress.defaultProps = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"circular_progress.js","sourceRoot":"","sources":["../../../src/CircularProgress/circular_progress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"circular_progress.js","sourceRoot":"","sources":["../../../src/CircularProgress/circular_progress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,WAAW,MAAM,wBAAwB,CAAC;AAmCjD;;GAEG;AAEH;;GAEG;AACH,MAAM,sBAAsB,GAAG,SAAS,CAAA;;;;;;;CAOvC,CAAC;AAEF,MAAM,oBAAoB,GAAG,SAAS,CAAA;;;;;;;;;;;;;CAarC,CAAC;AAEF,MAAM,oBAAoB,GAAG,MAAM,CAAC,KAAK,EAAE;IACzC,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,IAAI,KAAK,OAAO;CACnE,CAAC,CAA2B,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IACvC,KAAK,EAAE,kBAAkB;IACzB,QAAQ,EAAE,QAAQ;IAClB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,cAAc;IACvB,KAAK,EAAE,kBAAkB,KAAK,CAAC,KAAK,GAAG;IACvC,GAAG,CAAC,KAAK,CAAC,OAAO,KAAK,eAAe,CAAC,CAAC,CAAC;QACtC,SAAS,EAAE,GAAG,sBAAsB,uBAAuB;KAC5D,CAAC,CAAC,CAAC;QACF,SAAS,EAAE,gBAAgB;KAC5B,CAAC;IACF,GAAG,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI;QAC5B,MAAM,EAAE,uBAAuB;QAC/B,KAAK,EAAE,uBAAuB;KAC/B,CAAC;IACF,GAAG,CAAC,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI;QAC5B,MAAM,EAAE,uBAAuB;QAC/B,KAAK,EAAE,uBAAuB;KAC/B,CAAC;CACH,CAAC,CAAC,CAAC;AAEJ,MAAM,mBAAmB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACxC,OAAO,EAAE,OAAO;CACjB,CAAC,CAAC;AAEH,MAAM,sBAAsB,GAAG,MAAM,CAAC,QAAQ,CAAC,CAA4C,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IACrG,MAAM,EAAE,cAAc;IACtB,eAAe,EAAE,aAAa;IAC9B,gBAAgB,EAAE,CAAC;IACnB,GAAG,CAAC,KAAK,CAAC,OAAO,KAAK,eAAe,IAAI;QACvC,SAAS,EAAE,GAAG,oBAAoB,4BAA4B;KAC/D,CAAC;CACH,CAAC,CAAC,CAAC;AACJ;;GAEG;AAEH,MAAM,IAAI,GAAG,EAAE,CAAC;AAChB,MAAM,SAAS,GAAG,CAAC,CAAC;AAEpB,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAC9C,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACb,MAAM,EACJ,IAAI,EACJ,OAAO,GAAG,eAAe,EACzB,KAAK,GAAG,CAAC,EACT,GAAG,KAAK,EACT,GAAG,KAAK,CAAC;IACV,MAAM,WAAW,GAAwB,EAAE,CAAC;IAE5C,IAAI,OAAO,KAAK,aAAa,EAAE;QAC7B,MAAM,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC,IAAI,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;QAE7D,WAAW,CAAC,eAAe,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QACvD,WAAW,CAAC,gBAAgB,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC,GAAG,aAAa,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;KAC1F;IAED,OAAO,CACL,oBAAC,oBAAoB,IACnB,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,aAAa,EAClB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,KACN,KAAK;QAET,oBAAC,mBAAmB,IAClB,OAAO,EAAE,GAAG,IAAI,GAAG,CAAC,IAAI,IAAI,GAAG,CAAC,IAAI,IAAI,IAAI,IAAI,EAAE;YAElD,oBAAC,sBAAsB,IACrB,EAAE,EAAE,IAAI,EACR,EAAE,EAAE,IAAI,EACR,CAAC,EAAE,CAAC,IAAI,GAAG,SAAS,CAAC,GAAG,CAAC,EACzB,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,SAAS,EACtB,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,OAAO,GAChB,CACkB,CACD,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAElD,gBAAgB,CAAC,YAAY,GAAG;IAC9B,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,OAAO;IACb,OAAO,EAAE,eAAe;IACxB,KAAK,EAAE,CAAC;CACT,CAAC"}
|
|
@@ -1,32 +1,41 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import styled from '@emotion/styled';
|
|
3
|
+
import isPropValid from '@emotion/is-prop-valid';
|
|
2
4
|
import { Transition } from 'react-transition-group';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
5
|
+
/**
|
|
6
|
+
*
|
|
7
|
+
*/
|
|
8
|
+
/**
|
|
9
|
+
* Styles.
|
|
10
|
+
*/
|
|
11
|
+
const CollapseRoot = styled('div', {
|
|
12
|
+
shouldForwardProp: (prop) => isPropValid(prop) && !['orientation', 'in'].includes(prop),
|
|
13
|
+
})((props) => ({
|
|
6
14
|
overflow: 'hidden',
|
|
7
|
-
transition: `${
|
|
8
|
-
...(
|
|
15
|
+
transition: `${props.orientation === 'horizontal' ? 'width' : 'height'} ${props.timeout}ms cubic-bezier(0.4, 0, 0.2, 1) 0ms`,
|
|
16
|
+
...(props.orientation === 'horizontal' ? {
|
|
9
17
|
height: 'auto',
|
|
10
18
|
width: 0,
|
|
11
19
|
} : {
|
|
12
20
|
height: 0,
|
|
13
21
|
}),
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
+
...(props.state === 'entered' && {
|
|
23
|
+
overflow: 'visible',
|
|
24
|
+
...(props.orientation === 'horizontal' ? {
|
|
25
|
+
width: 'auto',
|
|
26
|
+
} : {
|
|
27
|
+
height: 'auto',
|
|
28
|
+
}),
|
|
29
|
+
}),
|
|
30
|
+
...(props.state === 'exited' && !props.in && {
|
|
31
|
+
visibility: 'hidden',
|
|
22
32
|
}),
|
|
23
|
-
});
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
});
|
|
33
|
+
}));
|
|
34
|
+
/**
|
|
35
|
+
*
|
|
36
|
+
*/
|
|
28
37
|
export const Collapse = (props) => {
|
|
29
|
-
const { timeout, in: inProp, children, orientation, onEnter, onEntered, onEntering, onExit, onExited, onExiting,
|
|
38
|
+
const { timeout, in: inProp, children, orientation, onEnter, onEntered, onEntering, onExit, onExited, onExiting, ...other } = props;
|
|
30
39
|
const wrapperRef = React.useRef(null);
|
|
31
40
|
const nodeRef = React.useRef(null);
|
|
32
41
|
const isHorizontal = orientation === 'horizontal';
|
|
@@ -83,12 +92,7 @@ export const Collapse = (props) => {
|
|
|
83
92
|
onExiting();
|
|
84
93
|
}
|
|
85
94
|
};
|
|
86
|
-
return (React.createElement(Transition, { in: inProp, timeout: timeout, onEnter: handleEnter, onEntering: handleEntering, onEntered: handleEntered, onExit: handleExit, onExiting: handleExiting, onExited: onExited }, (state) => (React.createElement(
|
|
87
|
-
[stylesBase(timeout, isHorizontal)]: true,
|
|
88
|
-
[stylesEntered(isHorizontal)]: state === 'entered',
|
|
89
|
-
[stylesHidden()]: state === 'exited' && !inProp,
|
|
90
|
-
[className]: !!className,
|
|
91
|
-
}), ref: nodeRef },
|
|
95
|
+
return (React.createElement(Transition, { in: inProp, timeout: timeout, onEnter: handleEnter, onEntering: handleEntering, onEntered: handleEntered, onExit: handleExit, onExiting: handleExiting, onExited: onExited }, (state) => (React.createElement(CollapseRoot, { timeout: timeout, orientation: orientation, state: state, in: inProp, ref: nodeRef, ...other },
|
|
92
96
|
React.createElement("div", { ref: wrapperRef }, children)))));
|
|
93
97
|
};
|
|
94
98
|
Collapse.displayName = 'Collapse';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"collapse.js","sourceRoot":"","sources":["../../../src/Collapse/collapse.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"collapse.js","sourceRoot":"","sources":["../../../src/Collapse/collapse.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,11 +1,18 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import styled from '@emotion/styled';
|
|
2
3
|
import { Modal } from '../Modal';
|
|
3
4
|
import { Box } from '../Box';
|
|
4
5
|
import { Fade } from '../Fade';
|
|
5
6
|
import { CircularProgress } from '../CircularProgress';
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
/**
|
|
8
|
+
*
|
|
9
|
+
*/
|
|
10
|
+
/**
|
|
11
|
+
* Styles.
|
|
12
|
+
*/
|
|
13
|
+
const DialogRoot = styled(Box, {
|
|
14
|
+
shouldForwardProp: (prop) => prop !== 'loading',
|
|
15
|
+
})((props) => ({
|
|
9
16
|
width: '100%',
|
|
10
17
|
display: 'flex',
|
|
11
18
|
maxHeight: 'calc(100% - 60px)',
|
|
@@ -17,7 +24,7 @@ const stylesBase = (loading) => css({
|
|
|
17
24
|
overflow: 'hidden',
|
|
18
25
|
border: 0,
|
|
19
26
|
padding: 0,
|
|
20
|
-
...(loading && {
|
|
27
|
+
...(props.loading && {
|
|
21
28
|
'[data-key="dialog.content"]': {
|
|
22
29
|
opacity: 0.5,
|
|
23
30
|
},
|
|
@@ -25,56 +32,48 @@ const stylesBase = (loading) => css({
|
|
|
25
32
|
opacity: 0.5,
|
|
26
33
|
},
|
|
27
34
|
}),
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
})
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
maxWidth: '100%',
|
|
46
|
-
maxHeight: 'none',
|
|
47
|
-
});
|
|
48
|
-
const stylesModal = () => css({
|
|
49
|
-
label: 'Dialog-modal',
|
|
35
|
+
...(props.size === 'small' && {
|
|
36
|
+
maxWidth: '310px',
|
|
37
|
+
}),
|
|
38
|
+
...(props.size === 'medium' && {
|
|
39
|
+
maxWidth: '640px',
|
|
40
|
+
}),
|
|
41
|
+
...(props.size === 'large' && {
|
|
42
|
+
maxWidth: '1024px',
|
|
43
|
+
}),
|
|
44
|
+
...(props.fullScreen && {
|
|
45
|
+
height: '100%',
|
|
46
|
+
margin: 0,
|
|
47
|
+
maxWidth: '100%',
|
|
48
|
+
maxHeight: 'none',
|
|
49
|
+
}),
|
|
50
|
+
}));
|
|
51
|
+
const DialogModal = styled(Modal)({
|
|
50
52
|
display: 'flex',
|
|
51
53
|
alignItems: 'center',
|
|
52
54
|
justifyContent: 'center',
|
|
53
55
|
});
|
|
54
|
-
const
|
|
55
|
-
label: 'Dialog-loading',
|
|
56
|
+
const DialogLoading = styled(Box)({
|
|
56
57
|
position: 'absolute',
|
|
57
58
|
inset: '0px',
|
|
58
59
|
display: 'flex',
|
|
59
60
|
alignItems: 'center',
|
|
60
61
|
justifyContent: 'center',
|
|
61
62
|
});
|
|
63
|
+
/**
|
|
64
|
+
*
|
|
65
|
+
*/
|
|
62
66
|
export const Dialog = React.forwardRef((props, ref) => {
|
|
63
|
-
const { open, children,
|
|
64
|
-
return (React.createElement(
|
|
67
|
+
const { open, children, fullScreen, transitionDuration, disableBackdropClick, disableEscapeKeyDown, loading, loadingColor, onClose, 'data-testid': dataTestId, ...other } = props;
|
|
68
|
+
return (React.createElement(DialogModal, { ref: ref, open: open, transitionDuration: transitionDuration, onClose: onClose, "data-testid": dataTestId, disableBackdropClick: loading || disableBackdropClick, disableEscapeKeyDown: loading || disableEscapeKeyDown, backdropProps: {
|
|
65
69
|
invisible: fullScreen,
|
|
66
70
|
} },
|
|
67
71
|
React.createElement(Fade, { in: open, timeout: transitionDuration },
|
|
68
|
-
React.createElement(
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
[stylesSizeMedium()]: size === 'medium',
|
|
72
|
-
[stylesSizeLarge()]: size === 'large',
|
|
73
|
-
[stylesFullScreen()]: fullScreen,
|
|
74
|
-
[className]: !!className,
|
|
75
|
-
}), tabIndex: -1, component: "fieldset", disabled: loading },
|
|
72
|
+
React.createElement(DialogRoot, { role: "dialog", background: "white", borderRadius: fullScreen ? 0 : 4, loading: loading, fullScreen: fullScreen, tabIndex: -1,
|
|
73
|
+
// @ts-ignore
|
|
74
|
+
component: "fieldset", disabled: loading, ...other },
|
|
76
75
|
children,
|
|
77
|
-
loading && (React.createElement(
|
|
76
|
+
loading && (React.createElement(DialogLoading, null,
|
|
78
77
|
React.createElement(CircularProgress, { color: loadingColor })))))));
|
|
79
78
|
});
|
|
80
79
|
Dialog.displayName = 'Dialog';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/Dialog/dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/Dialog/dialog.tsx"],"names":[],"mappings":"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"}
|