@mui/material 5.5.1 → 5.6.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/Accordion/accordionClasses.d.ts +18 -18
- package/AccordionActions/accordionActionsClasses.d.ts +10 -10
- package/AccordionDetails/accordionDetailsClasses.d.ts +8 -8
- package/AccordionSummary/accordionSummaryClasses.d.ts +22 -22
- package/Alert/Alert.d.ts +3 -1
- package/Alert/Alert.js +3 -1
- package/Alert/alertClasses.d.ts +44 -44
- package/AlertTitle/alertTitleClasses.d.ts +8 -8
- package/AppBar/AppBar.d.ts +3 -1
- package/AppBar/AppBar.js +3 -1
- package/AppBar/appBarClasses.d.ts +28 -28
- package/Autocomplete/Autocomplete.js +1 -1
- package/Autocomplete/autocompleteClasses.d.ts +54 -54
- package/Avatar/avatarClasses.d.ts +20 -20
- package/AvatarGroup/avatarGroupClasses.d.ts +10 -10
- package/Backdrop/Backdrop.d.ts +32 -15
- package/Backdrop/Backdrop.js +26 -20
- package/Backdrop/backdropClasses.d.ts +10 -0
- package/Backdrop/backdropClasses.js +6 -0
- package/Backdrop/index.d.ts +3 -0
- package/Backdrop/index.js +2 -1
- package/Badge/Badge.d.ts +23 -8
- package/Badge/Badge.js +46 -22
- package/Badge/badgeClasses.d.ts +24 -0
- package/Badge/badgeClasses.js +8 -0
- package/Badge/index.d.ts +3 -0
- package/Badge/index.js +2 -1
- package/BottomNavigation/BottomNavigation.js +0 -0
- package/BottomNavigation/bottomNavigationClasses.d.ts +8 -8
- package/BottomNavigationAction/bottomNavigationActionClasses.d.ts +14 -14
- package/Breadcrumbs/breadcrumbsClasses.d.ts +14 -14
- package/Button/Button.d.ts +3 -1
- package/Button/Button.js +104 -97
- package/Button/buttonClasses.d.ts +76 -76
- package/ButtonBase/ButtonBase.js +7 -7
- package/ButtonBase/buttonBaseClasses.d.ts +12 -12
- package/ButtonBase/touchRippleClasses.d.ts +20 -20
- package/ButtonGroup/ButtonGroup.d.ts +3 -1
- package/ButtonGroup/ButtonGroup.js +3 -1
- package/ButtonGroup/ButtonGroupContext.d.ts +18 -18
- package/ButtonGroup/buttonGroupClasses.d.ts +58 -58
- package/CHANGELOG.md +215 -0
- package/Card/Card.d.ts +1 -0
- package/Card/cardClasses.d.ts +8 -8
- package/CardActionArea/cardActionAreaClasses.d.ts +12 -12
- package/CardActions/cardActionsClasses.d.ts +10 -10
- package/CardContent/cardContentClasses.d.ts +8 -8
- package/CardHeader/cardHeaderClasses.d.ts +18 -18
- package/CardMedia/cardMediaClasses.d.ts +12 -12
- package/Checkbox/Checkbox.d.ts +3 -1
- package/Checkbox/Checkbox.js +3 -1
- package/Checkbox/checkboxClasses.d.ts +18 -18
- package/Chip/Chip.d.ts +3 -1
- package/Chip/Chip.js +3 -1
- package/Chip/chipClasses.d.ts +80 -80
- package/CircularProgress/CircularProgress.d.ts +3 -1
- package/CircularProgress/CircularProgress.js +3 -1
- package/CircularProgress/circularProgressClasses.d.ts +26 -26
- package/ClickAwayListener/index.d.ts +2 -2
- package/Collapse/collapseClasses.d.ts +18 -18
- package/Container/containerClasses.d.ts +22 -22
- package/Dialog/DialogContext.d.ts +6 -6
- package/Dialog/dialogClasses.d.ts +36 -36
- package/DialogActions/dialogActionsClasses.d.ts +10 -10
- package/DialogContent/dialogContentClasses.d.ts +10 -10
- package/DialogContentText/dialogContentTextClasses.d.ts +8 -8
- package/DialogTitle/dialogTitleClasses.d.ts +8 -8
- package/Divider/dividerClasses.d.ts +34 -34
- package/Drawer/drawerClasses.d.ts +30 -30
- package/Fab/Fab.d.ts +3 -1
- package/Fab/Fab.js +3 -1
- package/Fab/fabClasses.d.ts +26 -26
- package/FilledInput/FilledInput.js +3 -1
- package/FilledInput/filledInputClasses.d.ts +40 -40
- package/FormControl/FormControl.d.ts +3 -1
- package/FormControl/FormControl.js +3 -1
- package/FormControl/formControlClasses.d.ts +14 -14
- package/FormControlLabel/FormControlLabel.d.ts +1 -1
- package/FormControlLabel/FormControlLabel.js +14 -9
- package/FormControlLabel/formControlLabelClasses.d.ts +20 -20
- package/FormGroup/formGroupClasses.d.ts +12 -12
- package/FormHelperText/formHelperTextClasses.d.ts +22 -22
- package/FormLabel/FormLabel.d.ts +3 -1
- package/FormLabel/FormLabel.js +3 -1
- package/FormLabel/formLabelClasses.d.ts +22 -22
- package/Grid/gridClasses.d.ts +48 -48
- package/Grow/Grow.js +11 -5
- package/Icon/Icon.d.ts +3 -1
- package/Icon/Icon.js +3 -1
- package/Icon/iconClasses.d.ts +24 -24
- package/IconButton/IconButton.d.ts +3 -1
- package/IconButton/IconButton.js +3 -1
- package/IconButton/iconButtonClasses.d.ts +26 -26
- package/ImageList/imageListClasses.d.ts +16 -16
- package/ImageListItem/imageListItemClasses.d.ts +18 -18
- package/ImageListItemBar/imageListItemBarClasses.d.ts +30 -30
- package/Input/Input.js +3 -1
- package/Input/inputClasses.d.ts +34 -34
- package/InputAdornment/inputAdornmentClasses.d.ts +24 -24
- package/InputBase/InputBase.d.ts +3 -1
- package/InputBase/InputBase.js +3 -1
- package/InputBase/inputBaseClasses.d.ts +44 -44
- package/InputLabel/InputLabel.js +3 -1
- package/InputLabel/inputLabelClasses.d.ts +32 -32
- package/LinearProgress/LinearProgress.d.ts +3 -1
- package/LinearProgress/LinearProgress.js +3 -1
- package/LinearProgress/linearProgressClasses.d.ts +42 -42
- package/Link/Link.js +12 -5
- package/Link/linkClasses.d.ts +18 -18
- package/List/listClasses.d.ts +14 -14
- package/ListItem/listItemClasses.d.ts +30 -30
- package/ListItemAvatar/listItemAvatarClasses.d.ts +10 -10
- package/ListItemButton/ListItemButton.js +1 -0
- package/ListItemButton/listItemButtonClasses.d.ts +22 -22
- package/ListItemIcon/listItemIconClasses.d.ts +10 -10
- package/ListItemSecondaryAction/listItemSecondaryActionClasses.d.ts +10 -10
- package/ListItemText/listItemTextClasses.d.ts +18 -18
- package/ListSubheader/listSubheaderClasses.d.ts +18 -18
- package/Menu/menuClasses.d.ts +12 -12
- package/MenuItem/menuItemClasses.d.ts +20 -20
- package/MobileStepper/mobileStepperClasses.d.ts +22 -22
- package/NativeSelect/nativeSelectClasses.d.ts +32 -32
- package/OutlinedInput/OutlinedInput.js +3 -1
- package/OutlinedInput/outlinedInputClasses.d.ts +36 -36
- package/Pagination/Pagination.d.ts +2 -0
- package/Pagination/Pagination.js +2 -0
- package/Pagination/paginationClasses.d.ts +14 -14
- package/PaginationItem/PaginationItem.d.ts +2 -0
- package/PaginationItem/PaginationItem.js +2 -0
- package/PaginationItem/paginationItemClasses.d.ts +42 -42
- package/Paper/paperClasses.d.ts +39 -39
- package/Popover/popoverClasses.d.ts +10 -10
- package/Popper/Popper.d.ts +29 -17
- package/Popper/Popper.js +16 -6
- package/Radio/Radio.d.ts +3 -1
- package/Radio/Radio.js +3 -1
- package/Radio/radioClasses.d.ts +16 -16
- package/RadioGroup/RadioGroupContext.d.ts +11 -11
- package/RadioGroup/useRadioGroup.d.ts +4 -4
- package/Rating/ratingClasses.d.ts +40 -40
- package/ScopedCssBaseline/scopedCssBaselineClasses.d.ts +8 -8
- package/Select/selectClasses.d.ts +30 -30
- package/Skeleton/skeletonClasses.d.ts +24 -24
- package/Slider/Slider.d.ts +3 -1
- package/Slider/Slider.js +3 -1
- package/Snackbar/snackbarClasses.d.ts +20 -20
- package/SnackbarContent/snackbarContentClasses.d.ts +12 -12
- package/SpeedDial/speedDialClasses.d.ts +22 -22
- package/SpeedDialAction/speedDialActionClasses.d.ts +20 -20
- package/SpeedDialIcon/speedDialIconClasses.d.ts +18 -18
- package/Step/StepContext.d.ts +20 -20
- package/Step/stepClasses.d.ts +16 -16
- package/StepButton/stepButtonClasses.d.ts +14 -14
- package/StepConnector/stepConnectorClasses.d.ts +26 -26
- package/StepContent/stepContentClasses.d.ts +12 -12
- package/StepIcon/stepIconClasses.d.ts +16 -16
- package/StepLabel/stepLabelClasses.d.ts +28 -28
- package/Stepper/stepperClasses.d.ts +14 -14
- package/SvgIcon/SvgIcon.d.ts +3 -1
- package/SvgIcon/SvgIcon.js +3 -1
- package/SvgIcon/svgIconClasses.d.ts +24 -24
- package/Switch/Switch.d.ts +3 -1
- package/Switch/Switch.js +3 -1
- package/Switch/switchClasses.d.ts +32 -32
- package/Tab/tabClasses.d.ts +26 -26
- package/TabScrollButton/tabScrollButtonClasses.d.ts +12 -12
- package/Table/tableClasses.d.ts +10 -10
- package/TableBody/tableBodyClasses.d.ts +8 -8
- package/TableCell/tableCellClasses.d.ts +32 -32
- package/TableContainer/tableContainerClasses.d.ts +8 -8
- package/TableFooter/tableFooterClasses.d.ts +8 -8
- package/TableHead/tableHeadClasses.d.ts +8 -8
- package/TablePagination/tablePaginationClasses.d.ts +28 -28
- package/TableRow/tableRowClasses.d.ts +16 -16
- package/TableSortLabel/tableSortLabelClasses.d.ts +16 -16
- package/Tabs/tabsClasses.d.ts +32 -32
- package/TextField/TextField.d.ts +3 -2
- package/TextField/TextField.js +3 -1
- package/TextField/textFieldClasses.d.ts +8 -8
- package/ToggleButton/ToggleButton.d.ts +2 -0
- package/ToggleButton/ToggleButton.js +2 -0
- package/ToggleButton/toggleButtonClasses.d.ts +24 -24
- package/ToggleButtonGroup/ToggleButtonGroup.d.ts +3 -1
- package/ToggleButtonGroup/ToggleButtonGroup.js +3 -1
- package/ToggleButtonGroup/toggleButtonGroupClasses.d.ts +18 -18
- package/Toolbar/toolbarClasses.d.ts +14 -14
- package/Tooltip/tooltipClasses.d.ts +30 -30
- package/Typography/typographyClasses.d.ts +50 -50
- package/Unstable_TrapFocus/index.d.ts +2 -2
- package/Unstable_TrapFocus/index.js +1 -1
- package/className/index.d.ts +8 -8
- package/darkScrollbar/index.d.ts +28 -28
- package/index.js +1 -1
- package/internal/switchBaseClasses.d.ts +12 -12
- package/legacy/Alert/Alert.js +3 -1
- package/legacy/AppBar/AppBar.js +3 -1
- package/legacy/Autocomplete/Autocomplete.js +1 -1
- package/legacy/Backdrop/Backdrop.js +27 -20
- package/legacy/Backdrop/backdropClasses.js +6 -0
- package/legacy/Backdrop/index.js +2 -1
- package/legacy/Badge/Badge.js +47 -22
- package/legacy/Badge/badgeClasses.js +8 -0
- package/legacy/Badge/index.js +2 -1
- package/legacy/BottomNavigation/BottomNavigation.js +0 -0
- package/legacy/Button/Button.js +33 -30
- package/legacy/ButtonBase/ButtonBase.js +11 -11
- package/legacy/ButtonGroup/ButtonGroup.js +3 -1
- package/legacy/Checkbox/Checkbox.js +3 -1
- package/legacy/Chip/Chip.js +3 -1
- package/legacy/CircularProgress/CircularProgress.js +3 -1
- package/legacy/Fab/Fab.js +3 -1
- package/legacy/FilledInput/FilledInput.js +3 -1
- package/legacy/FormControl/FormControl.js +3 -1
- package/legacy/FormControlLabel/FormControlLabel.js +14 -9
- package/legacy/FormLabel/FormLabel.js +3 -1
- package/legacy/Grow/Grow.js +11 -5
- package/legacy/Icon/Icon.js +3 -1
- package/legacy/IconButton/IconButton.js +3 -1
- package/legacy/Input/Input.js +3 -1
- package/legacy/InputBase/InputBase.js +3 -1
- package/legacy/InputLabel/InputLabel.js +3 -1
- package/legacy/LinearProgress/LinearProgress.js +3 -1
- package/legacy/Link/Link.js +12 -4
- package/legacy/ListItemButton/ListItemButton.js +1 -0
- package/legacy/OutlinedInput/OutlinedInput.js +3 -1
- package/legacy/Pagination/Pagination.js +2 -0
- package/legacy/PaginationItem/PaginationItem.js +2 -0
- package/legacy/Popper/Popper.js +18 -6
- package/legacy/Radio/Radio.js +3 -1
- package/legacy/Slider/Slider.js +3 -1
- package/legacy/SvgIcon/SvgIcon.js +3 -1
- package/legacy/Switch/Switch.js +3 -1
- package/legacy/TextField/TextField.js +3 -1
- package/legacy/ToggleButton/ToggleButton.js +2 -0
- package/legacy/ToggleButtonGroup/ToggleButtonGroup.js +3 -1
- package/legacy/Unstable_TrapFocus/index.js +1 -1
- package/legacy/index.js +1 -1
- package/legacy/locale/index.js +115 -111
- package/legacy/styles/CssVarsProvider.js +31 -0
- package/legacy/styles/experimental_extendTheme.js +96 -0
- package/legacy/styles/index.js +3 -1
- package/locale/index.d.ts +71 -71
- package/locale/index.js +6 -3
- package/modern/Alert/Alert.js +3 -1
- package/modern/AppBar/AppBar.js +3 -1
- package/modern/Autocomplete/Autocomplete.js +1 -1
- package/modern/Backdrop/Backdrop.js +25 -19
- package/modern/Backdrop/backdropClasses.js +6 -0
- package/modern/Backdrop/index.js +2 -1
- package/modern/Badge/Badge.js +43 -19
- package/modern/Badge/badgeClasses.js +8 -0
- package/modern/Badge/index.js +2 -1
- package/modern/BottomNavigation/BottomNavigation.js +0 -0
- package/modern/Button/Button.js +32 -29
- package/modern/ButtonBase/ButtonBase.js +7 -7
- package/modern/ButtonGroup/ButtonGroup.js +3 -1
- package/modern/Checkbox/Checkbox.js +3 -1
- package/modern/Chip/Chip.js +3 -1
- package/modern/CircularProgress/CircularProgress.js +3 -1
- package/modern/Fab/Fab.js +3 -1
- package/modern/FilledInput/FilledInput.js +3 -1
- package/modern/FormControl/FormControl.js +3 -1
- package/modern/FormControlLabel/FormControlLabel.js +14 -9
- package/modern/FormLabel/FormLabel.js +3 -1
- package/modern/Grow/Grow.js +11 -5
- package/modern/Icon/Icon.js +3 -1
- package/modern/IconButton/IconButton.js +3 -1
- package/modern/Input/Input.js +3 -1
- package/modern/InputBase/InputBase.js +3 -1
- package/modern/InputLabel/InputLabel.js +3 -1
- package/modern/LinearProgress/LinearProgress.js +3 -1
- package/modern/Link/Link.js +12 -5
- package/modern/ListItemButton/ListItemButton.js +1 -0
- package/modern/OutlinedInput/OutlinedInput.js +3 -1
- package/modern/Pagination/Pagination.js +2 -0
- package/modern/PaginationItem/PaginationItem.js +2 -0
- package/modern/Popper/Popper.js +16 -6
- package/modern/Radio/Radio.js +3 -1
- package/modern/Slider/Slider.js +3 -1
- package/modern/SvgIcon/SvgIcon.js +3 -1
- package/modern/Switch/Switch.js +3 -1
- package/modern/TextField/TextField.js +3 -1
- package/modern/ToggleButton/ToggleButton.js +2 -0
- package/modern/ToggleButtonGroup/ToggleButtonGroup.js +3 -1
- package/modern/Unstable_TrapFocus/index.js +1 -1
- package/modern/index.js +1 -1
- package/modern/locale/index.js +6 -3
- package/modern/styles/CssVarsProvider.js +28 -0
- package/modern/styles/experimental_extendTheme.js +89 -0
- package/modern/styles/index.js +3 -1
- package/node/Alert/Alert.js +3 -1
- package/node/AppBar/AppBar.js +3 -1
- package/node/Autocomplete/Autocomplete.js +1 -1
- package/node/Backdrop/Backdrop.js +28 -23
- package/node/Backdrop/backdropClasses.js +17 -0
- package/node/Backdrop/index.js +17 -5
- package/node/Badge/Badge.js +56 -33
- package/node/Badge/badgeClasses.js +22 -0
- package/node/Badge/index.js +17 -5
- package/node/BottomNavigation/BottomNavigation.js +0 -0
- package/node/Button/Button.js +104 -97
- package/node/ButtonBase/ButtonBase.js +7 -7
- package/node/ButtonGroup/ButtonGroup.js +3 -1
- package/node/Checkbox/Checkbox.js +3 -1
- package/node/Chip/Chip.js +3 -1
- package/node/CircularProgress/CircularProgress.js +3 -1
- package/node/Fab/Fab.js +3 -1
- package/node/FilledInput/FilledInput.js +3 -1
- package/node/FormControl/FormControl.js +3 -1
- package/node/FormControlLabel/FormControlLabel.js +14 -9
- package/node/FormLabel/FormLabel.js +3 -1
- package/node/Grow/Grow.js +10 -4
- package/node/Icon/Icon.js +3 -1
- package/node/IconButton/IconButton.js +3 -1
- package/node/Input/Input.js +3 -1
- package/node/InputBase/InputBase.js +3 -1
- package/node/InputLabel/InputLabel.js +3 -1
- package/node/LinearProgress/LinearProgress.js +3 -1
- package/node/Link/Link.js +13 -5
- package/node/ListItemButton/ListItemButton.js +1 -0
- package/node/OutlinedInput/OutlinedInput.js +3 -1
- package/node/Pagination/Pagination.js +2 -0
- package/node/PaginationItem/PaginationItem.js +2 -0
- package/node/Popper/Popper.js +19 -8
- package/node/Radio/Radio.js +3 -1
- package/node/Slider/Slider.js +3 -1
- package/node/SvgIcon/SvgIcon.js +3 -1
- package/node/Switch/Switch.js +3 -1
- package/node/TextField/TextField.js +3 -1
- package/node/ToggleButton/ToggleButton.js +2 -0
- package/node/ToggleButtonGroup/ToggleButtonGroup.js +3 -1
- package/node/Unstable_TrapFocus/index.js +2 -2
- package/node/index.js +1 -1
- package/node/locale/index.js +6 -3
- package/node/styles/CssVarsProvider.js +41 -0
- package/node/styles/experimental_extendTheme.js +105 -0
- package/node/styles/index.js +58 -0
- package/package.json +7 -7
- package/styles/CssVarsProvider.d.ts +28 -0
- package/styles/CssVarsProvider.js +28 -0
- package/styles/createPalette.d.ts +26 -0
- package/styles/experimental_extendTheme.d.ts +90 -0
- package/styles/experimental_extendTheme.js +91 -0
- package/styles/index.d.ts +5 -0
- package/styles/index.js +3 -1
- package/transitions/index.d.ts +1 -1
- package/transitions/transition.d.ts +13 -13
- package/transitions/utils.d.ts +23 -23
- package/umd/material-ui.development.js +1314 -505
- package/umd/material-ui.production.min.js +21 -21
- package/useMediaQuery/useMediaQuery.d.ts +31 -31
- package/useTouchRipple/index.d.ts +1 -1
- package/useTouchRipple/useTouchRipple.d.ts +28 -28
- package/utils/getScrollbarSize.d.ts +2 -2
- package/utils/ownerDocument.d.ts +2 -2
- package/utils/ownerWindow.d.ts +2 -2
- package/utils/setRef.d.ts +2 -2
package/Button/Button.js
CHANGED
|
@@ -62,106 +62,111 @@ const ButtonRoot = styled(ButtonBase, {
|
|
|
62
62
|
})(({
|
|
63
63
|
theme,
|
|
64
64
|
ownerState
|
|
65
|
-
}) =>
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
backgroundColor:
|
|
78
|
-
|
|
65
|
+
}) => {
|
|
66
|
+
var _theme$palette$getCon, _theme$palette;
|
|
67
|
+
|
|
68
|
+
return _extends({}, theme.typography.button, {
|
|
69
|
+
minWidth: 64,
|
|
70
|
+
padding: '6px 16px',
|
|
71
|
+
borderRadius: (theme.vars || theme).shape.borderRadius,
|
|
72
|
+
transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
|
|
73
|
+
duration: theme.transitions.duration.short
|
|
74
|
+
}),
|
|
75
|
+
'&:hover': _extends({
|
|
76
|
+
textDecoration: 'none',
|
|
77
|
+
backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
|
|
78
|
+
// Reset on touch devices, it doesn't add specificity
|
|
79
|
+
'@media (hover: none)': {
|
|
80
|
+
backgroundColor: 'transparent'
|
|
81
|
+
}
|
|
82
|
+
}, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
|
|
83
|
+
backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
|
|
84
|
+
// Reset on touch devices, it doesn't add specificity
|
|
85
|
+
'@media (hover: none)': {
|
|
86
|
+
backgroundColor: 'transparent'
|
|
87
|
+
}
|
|
88
|
+
}, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
|
|
89
|
+
border: `1px solid ${(theme.vars || theme).palette[ownerState.color].main}`,
|
|
90
|
+
backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
|
|
91
|
+
// Reset on touch devices, it doesn't add specificity
|
|
92
|
+
'@media (hover: none)': {
|
|
93
|
+
backgroundColor: 'transparent'
|
|
94
|
+
}
|
|
95
|
+
}, ownerState.variant === 'contained' && {
|
|
96
|
+
backgroundColor: (theme.vars || theme).palette.grey.A100,
|
|
97
|
+
boxShadow: (theme.vars || theme).shadows[4],
|
|
98
|
+
// Reset on touch devices, it doesn't add specificity
|
|
99
|
+
'@media (hover: none)': {
|
|
100
|
+
boxShadow: (theme.vars || theme).shadows[2],
|
|
101
|
+
backgroundColor: (theme.vars || theme).palette.grey[300]
|
|
102
|
+
}
|
|
103
|
+
}, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
|
|
104
|
+
backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
|
|
105
|
+
// Reset on touch devices, it doesn't add specificity
|
|
106
|
+
'@media (hover: none)': {
|
|
107
|
+
backgroundColor: (theme.vars || theme).palette[ownerState.color].main
|
|
108
|
+
}
|
|
109
|
+
}),
|
|
110
|
+
'&:active': _extends({}, ownerState.variant === 'contained' && {
|
|
111
|
+
boxShadow: (theme.vars || theme).shadows[8]
|
|
112
|
+
}),
|
|
113
|
+
[`&.${buttonClasses.focusVisible}`]: _extends({}, ownerState.variant === 'contained' && {
|
|
114
|
+
boxShadow: (theme.vars || theme).shadows[6]
|
|
115
|
+
}),
|
|
116
|
+
[`&.${buttonClasses.disabled}`]: _extends({
|
|
117
|
+
color: (theme.vars || theme).palette.action.disabled
|
|
118
|
+
}, ownerState.variant === 'outlined' && {
|
|
119
|
+
border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
|
|
120
|
+
}, ownerState.variant === 'outlined' && ownerState.color === 'secondary' && {
|
|
121
|
+
border: `1px solid ${(theme.vars || theme).palette.action.disabled}`
|
|
122
|
+
}, ownerState.variant === 'contained' && {
|
|
123
|
+
color: (theme.vars || theme).palette.action.disabled,
|
|
124
|
+
boxShadow: (theme.vars || theme).shadows[0],
|
|
125
|
+
backgroundColor: (theme.vars || theme).palette.action.disabledBackground
|
|
126
|
+
})
|
|
127
|
+
}, ownerState.variant === 'text' && {
|
|
128
|
+
padding: '6px 8px'
|
|
79
129
|
}, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
}
|
|
130
|
+
color: (theme.vars || theme).palette[ownerState.color].main
|
|
131
|
+
}, ownerState.variant === 'outlined' && {
|
|
132
|
+
padding: '5px 15px',
|
|
133
|
+
border: '1px solid currentColor'
|
|
85
134
|
}, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
// Reset on touch devices, it doesn't add specificity
|
|
89
|
-
'@media (hover: none)': {
|
|
90
|
-
backgroundColor: 'transparent'
|
|
91
|
-
}
|
|
135
|
+
color: (theme.vars || theme).palette[ownerState.color].main,
|
|
136
|
+
border: theme.vars ? `1px solid rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : `1px solid ${alpha(theme.palette[ownerState.color].main, 0.5)}`
|
|
92
137
|
}, ownerState.variant === 'contained' && {
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
boxShadow: theme.shadows[2],
|
|
98
|
-
backgroundColor: theme.palette.grey[300]
|
|
99
|
-
}
|
|
138
|
+
color: theme.vars ? // this is safe because grey does not change between default light/dark mode
|
|
139
|
+
theme.vars.palette.text.primary : (_theme$palette$getCon = (_theme$palette = theme.palette).getContrastText) == null ? void 0 : _theme$palette$getCon.call(_theme$palette, theme.palette.grey[300]),
|
|
140
|
+
backgroundColor: (theme.vars || theme).palette.grey[300],
|
|
141
|
+
boxShadow: (theme.vars || theme).shadows[2]
|
|
100
142
|
}, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
}, ownerState.variant === 'outlined' && {
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
}, ownerState.
|
|
125
|
-
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
}, ownerState.variant === 'outlined' && {
|
|
129
|
-
padding: '5px 15px',
|
|
130
|
-
border: `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`
|
|
131
|
-
}, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
|
|
132
|
-
color: theme.palette[ownerState.color].main,
|
|
133
|
-
border: `1px solid ${alpha(theme.palette[ownerState.color].main, 0.5)}`
|
|
134
|
-
}, ownerState.variant === 'contained' && {
|
|
135
|
-
color: theme.palette.getContrastText(theme.palette.grey[300]),
|
|
136
|
-
backgroundColor: theme.palette.grey[300],
|
|
137
|
-
boxShadow: theme.shadows[2]
|
|
138
|
-
}, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
|
|
139
|
-
color: theme.palette[ownerState.color].contrastText,
|
|
140
|
-
backgroundColor: theme.palette[ownerState.color].main
|
|
141
|
-
}, ownerState.color === 'inherit' && {
|
|
142
|
-
color: 'inherit',
|
|
143
|
-
borderColor: 'currentColor'
|
|
144
|
-
}, ownerState.size === 'small' && ownerState.variant === 'text' && {
|
|
145
|
-
padding: '4px 5px',
|
|
146
|
-
fontSize: theme.typography.pxToRem(13)
|
|
147
|
-
}, ownerState.size === 'large' && ownerState.variant === 'text' && {
|
|
148
|
-
padding: '8px 11px',
|
|
149
|
-
fontSize: theme.typography.pxToRem(15)
|
|
150
|
-
}, ownerState.size === 'small' && ownerState.variant === 'outlined' && {
|
|
151
|
-
padding: '3px 9px',
|
|
152
|
-
fontSize: theme.typography.pxToRem(13)
|
|
153
|
-
}, ownerState.size === 'large' && ownerState.variant === 'outlined' && {
|
|
154
|
-
padding: '7px 21px',
|
|
155
|
-
fontSize: theme.typography.pxToRem(15)
|
|
156
|
-
}, ownerState.size === 'small' && ownerState.variant === 'contained' && {
|
|
157
|
-
padding: '4px 10px',
|
|
158
|
-
fontSize: theme.typography.pxToRem(13)
|
|
159
|
-
}, ownerState.size === 'large' && ownerState.variant === 'contained' && {
|
|
160
|
-
padding: '8px 22px',
|
|
161
|
-
fontSize: theme.typography.pxToRem(15)
|
|
162
|
-
}, ownerState.fullWidth && {
|
|
163
|
-
width: '100%'
|
|
164
|
-
}), ({
|
|
143
|
+
color: (theme.vars || theme).palette[ownerState.color].contrastText,
|
|
144
|
+
backgroundColor: (theme.vars || theme).palette[ownerState.color].main
|
|
145
|
+
}, ownerState.color === 'inherit' && {
|
|
146
|
+
color: 'inherit',
|
|
147
|
+
borderColor: 'currentColor'
|
|
148
|
+
}, ownerState.size === 'small' && ownerState.variant === 'text' && {
|
|
149
|
+
padding: '4px 5px',
|
|
150
|
+
fontSize: theme.typography.pxToRem(13)
|
|
151
|
+
}, ownerState.size === 'large' && ownerState.variant === 'text' && {
|
|
152
|
+
padding: '8px 11px',
|
|
153
|
+
fontSize: theme.typography.pxToRem(15)
|
|
154
|
+
}, ownerState.size === 'small' && ownerState.variant === 'outlined' && {
|
|
155
|
+
padding: '3px 9px',
|
|
156
|
+
fontSize: theme.typography.pxToRem(13)
|
|
157
|
+
}, ownerState.size === 'large' && ownerState.variant === 'outlined' && {
|
|
158
|
+
padding: '7px 21px',
|
|
159
|
+
fontSize: theme.typography.pxToRem(15)
|
|
160
|
+
}, ownerState.size === 'small' && ownerState.variant === 'contained' && {
|
|
161
|
+
padding: '4px 10px',
|
|
162
|
+
fontSize: theme.typography.pxToRem(13)
|
|
163
|
+
}, ownerState.size === 'large' && ownerState.variant === 'contained' && {
|
|
164
|
+
padding: '8px 22px',
|
|
165
|
+
fontSize: theme.typography.pxToRem(15)
|
|
166
|
+
}, ownerState.fullWidth && {
|
|
167
|
+
width: '100%'
|
|
168
|
+
});
|
|
169
|
+
}, ({
|
|
165
170
|
ownerState
|
|
166
171
|
}) => ownerState.disableElevation && {
|
|
167
172
|
boxShadow: 'none',
|
|
@@ -305,7 +310,9 @@ process.env.NODE_ENV !== "production" ? Button.propTypes
|
|
|
305
310
|
className: PropTypes.string,
|
|
306
311
|
|
|
307
312
|
/**
|
|
308
|
-
* The color of the component.
|
|
313
|
+
* The color of the component.
|
|
314
|
+
* It supports both default and custom theme colors, which can be added as shown in the
|
|
315
|
+
* [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
|
|
309
316
|
* @default 'primary'
|
|
310
317
|
*/
|
|
311
318
|
color: PropTypes
|
|
@@ -1,76 +1,76 @@
|
|
|
1
|
-
export interface ButtonClasses {
|
|
2
|
-
/** Styles applied to the root element. */
|
|
3
|
-
root: string;
|
|
4
|
-
/** Styles applied to the root element if `variant="text"`. */
|
|
5
|
-
text: string;
|
|
6
|
-
/** Styles applied to the root element if `variant="text"` and `color="inherit"`. */
|
|
7
|
-
textInherit: string;
|
|
8
|
-
/** Styles applied to the root element if `variant="text"` and `color="primary"`. */
|
|
9
|
-
textPrimary: string;
|
|
10
|
-
/** Styles applied to the root element if `variant="text"` and `color="secondary"`. */
|
|
11
|
-
textSecondary: string;
|
|
12
|
-
/** Styles applied to the root element if `variant="outlined"`. */
|
|
13
|
-
outlined: string;
|
|
14
|
-
/** Styles applied to the root element if `variant="outlined"` and `color="inherit"`. */
|
|
15
|
-
outlinedInherit: string;
|
|
16
|
-
/** Styles applied to the root element if `variant="outlined"` and `color="primary"`. */
|
|
17
|
-
outlinedPrimary: string;
|
|
18
|
-
/** Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */
|
|
19
|
-
outlinedSecondary: string;
|
|
20
|
-
/** Styles applied to the root element if `variant="contained"`. */
|
|
21
|
-
contained: string;
|
|
22
|
-
/** Styles applied to the root element if `variant="contained"` and `color="inherit"`. */
|
|
23
|
-
containedInherit: string;
|
|
24
|
-
/** Styles applied to the root element if `variant="contained"` and `color="primary"`. */
|
|
25
|
-
containedPrimary: string;
|
|
26
|
-
/** Styles applied to the root element if `variant="contained"` and `color="secondary"`. */
|
|
27
|
-
containedSecondary: string;
|
|
28
|
-
/** Styles applied to the root element if `disableElevation={true}`. */
|
|
29
|
-
disableElevation: string;
|
|
30
|
-
/** State class applied to the ButtonBase root element if the button is keyboard focused. */
|
|
31
|
-
focusVisible: string;
|
|
32
|
-
/** State class applied to the root element if `disabled={true}`. */
|
|
33
|
-
disabled: string;
|
|
34
|
-
/** Styles applied to the root element if `color="inherit"`. */
|
|
35
|
-
colorInherit: string;
|
|
36
|
-
/** Styles applied to the root element if `size="small"` and `variant="text"`. */
|
|
37
|
-
textSizeSmall: string;
|
|
38
|
-
/** Styles applied to the root element if `size="medium"` and `variant="text"`. */
|
|
39
|
-
textSizeMedium: string;
|
|
40
|
-
/** Styles applied to the root element if `size="large"` and `variant="text"`. */
|
|
41
|
-
textSizeLarge: string;
|
|
42
|
-
/** Styles applied to the root element if `size="small"` and `variant="outlined"`. */
|
|
43
|
-
outlinedSizeSmall: string;
|
|
44
|
-
/** Styles applied to the root element if `size="medium"` and `variant="outlined"`. */
|
|
45
|
-
outlinedSizeMedium: string;
|
|
46
|
-
/** Styles applied to the root element if `size="large"` and `variant="outlined"`. */
|
|
47
|
-
outlinedSizeLarge: string;
|
|
48
|
-
/** Styles applied to the root element if `size="small"` and `variant="contained"`. */
|
|
49
|
-
containedSizeSmall: string;
|
|
50
|
-
/** Styles applied to the root element if `size="medium"` and `variant="contained"`. */
|
|
51
|
-
containedSizeMedium: string;
|
|
52
|
-
/** Styles applied to the root element if `size="large"` and `variant="contained"`. */
|
|
53
|
-
containedSizeLarge: string;
|
|
54
|
-
/** Styles applied to the root element if `size="small"`. */
|
|
55
|
-
sizeSmall: string;
|
|
56
|
-
/** Styles applied to the root element if `size="medium"`. */
|
|
57
|
-
sizeMedium: string;
|
|
58
|
-
/** Styles applied to the root element if `size="large"`. */
|
|
59
|
-
sizeLarge: string;
|
|
60
|
-
/** Styles applied to the root element if `fullWidth={true}`. */
|
|
61
|
-
fullWidth: string;
|
|
62
|
-
/** Styles applied to the startIcon element if supplied. */
|
|
63
|
-
startIcon: string;
|
|
64
|
-
/** Styles applied to the endIcon element if supplied. */
|
|
65
|
-
endIcon: string;
|
|
66
|
-
/** Styles applied to the icon element if supplied and `size="small"`. */
|
|
67
|
-
iconSizeSmall: string;
|
|
68
|
-
/** Styles applied to the icon element if supplied and `size="medium"`. */
|
|
69
|
-
iconSizeMedium: string;
|
|
70
|
-
/** Styles applied to the icon element if supplied and `size="large"`. */
|
|
71
|
-
iconSizeLarge: string;
|
|
72
|
-
}
|
|
73
|
-
export declare type ButtonClassKey = keyof ButtonClasses;
|
|
74
|
-
export declare function getButtonUtilityClass(slot: string): string;
|
|
75
|
-
declare const buttonClasses: ButtonClasses;
|
|
76
|
-
export default buttonClasses;
|
|
1
|
+
export interface ButtonClasses {
|
|
2
|
+
/** Styles applied to the root element. */
|
|
3
|
+
root: string;
|
|
4
|
+
/** Styles applied to the root element if `variant="text"`. */
|
|
5
|
+
text: string;
|
|
6
|
+
/** Styles applied to the root element if `variant="text"` and `color="inherit"`. */
|
|
7
|
+
textInherit: string;
|
|
8
|
+
/** Styles applied to the root element if `variant="text"` and `color="primary"`. */
|
|
9
|
+
textPrimary: string;
|
|
10
|
+
/** Styles applied to the root element if `variant="text"` and `color="secondary"`. */
|
|
11
|
+
textSecondary: string;
|
|
12
|
+
/** Styles applied to the root element if `variant="outlined"`. */
|
|
13
|
+
outlined: string;
|
|
14
|
+
/** Styles applied to the root element if `variant="outlined"` and `color="inherit"`. */
|
|
15
|
+
outlinedInherit: string;
|
|
16
|
+
/** Styles applied to the root element if `variant="outlined"` and `color="primary"`. */
|
|
17
|
+
outlinedPrimary: string;
|
|
18
|
+
/** Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */
|
|
19
|
+
outlinedSecondary: string;
|
|
20
|
+
/** Styles applied to the root element if `variant="contained"`. */
|
|
21
|
+
contained: string;
|
|
22
|
+
/** Styles applied to the root element if `variant="contained"` and `color="inherit"`. */
|
|
23
|
+
containedInherit: string;
|
|
24
|
+
/** Styles applied to the root element if `variant="contained"` and `color="primary"`. */
|
|
25
|
+
containedPrimary: string;
|
|
26
|
+
/** Styles applied to the root element if `variant="contained"` and `color="secondary"`. */
|
|
27
|
+
containedSecondary: string;
|
|
28
|
+
/** Styles applied to the root element if `disableElevation={true}`. */
|
|
29
|
+
disableElevation: string;
|
|
30
|
+
/** State class applied to the ButtonBase root element if the button is keyboard focused. */
|
|
31
|
+
focusVisible: string;
|
|
32
|
+
/** State class applied to the root element if `disabled={true}`. */
|
|
33
|
+
disabled: string;
|
|
34
|
+
/** Styles applied to the root element if `color="inherit"`. */
|
|
35
|
+
colorInherit: string;
|
|
36
|
+
/** Styles applied to the root element if `size="small"` and `variant="text"`. */
|
|
37
|
+
textSizeSmall: string;
|
|
38
|
+
/** Styles applied to the root element if `size="medium"` and `variant="text"`. */
|
|
39
|
+
textSizeMedium: string;
|
|
40
|
+
/** Styles applied to the root element if `size="large"` and `variant="text"`. */
|
|
41
|
+
textSizeLarge: string;
|
|
42
|
+
/** Styles applied to the root element if `size="small"` and `variant="outlined"`. */
|
|
43
|
+
outlinedSizeSmall: string;
|
|
44
|
+
/** Styles applied to the root element if `size="medium"` and `variant="outlined"`. */
|
|
45
|
+
outlinedSizeMedium: string;
|
|
46
|
+
/** Styles applied to the root element if `size="large"` and `variant="outlined"`. */
|
|
47
|
+
outlinedSizeLarge: string;
|
|
48
|
+
/** Styles applied to the root element if `size="small"` and `variant="contained"`. */
|
|
49
|
+
containedSizeSmall: string;
|
|
50
|
+
/** Styles applied to the root element if `size="medium"` and `variant="contained"`. */
|
|
51
|
+
containedSizeMedium: string;
|
|
52
|
+
/** Styles applied to the root element if `size="large"` and `variant="contained"`. */
|
|
53
|
+
containedSizeLarge: string;
|
|
54
|
+
/** Styles applied to the root element if `size="small"`. */
|
|
55
|
+
sizeSmall: string;
|
|
56
|
+
/** Styles applied to the root element if `size="medium"`. */
|
|
57
|
+
sizeMedium: string;
|
|
58
|
+
/** Styles applied to the root element if `size="large"`. */
|
|
59
|
+
sizeLarge: string;
|
|
60
|
+
/** Styles applied to the root element if `fullWidth={true}`. */
|
|
61
|
+
fullWidth: string;
|
|
62
|
+
/** Styles applied to the startIcon element if supplied. */
|
|
63
|
+
startIcon: string;
|
|
64
|
+
/** Styles applied to the endIcon element if supplied. */
|
|
65
|
+
endIcon: string;
|
|
66
|
+
/** Styles applied to the icon element if supplied and `size="small"`. */
|
|
67
|
+
iconSizeSmall: string;
|
|
68
|
+
/** Styles applied to the icon element if supplied and `size="medium"`. */
|
|
69
|
+
iconSizeMedium: string;
|
|
70
|
+
/** Styles applied to the icon element if supplied and `size="large"`. */
|
|
71
|
+
iconSizeLarge: string;
|
|
72
|
+
}
|
|
73
|
+
export declare type ButtonClassKey = keyof ButtonClasses;
|
|
74
|
+
export declare function getButtonUtilityClass(slot: string): string;
|
|
75
|
+
declare const buttonClasses: ButtonClasses;
|
|
76
|
+
export default buttonClasses;
|
package/ButtonBase/ButtonBase.js
CHANGED
|
@@ -144,11 +144,16 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
|
|
|
144
144
|
buttonRef.current.focus();
|
|
145
145
|
}
|
|
146
146
|
}), []);
|
|
147
|
+
const [mountedState, setMountedState] = React.useState(false);
|
|
148
|
+
React.useEffect(() => {
|
|
149
|
+
setMountedState(true);
|
|
150
|
+
}, []);
|
|
151
|
+
const enableTouchRipple = mountedState && !disableRipple && !disabled;
|
|
147
152
|
React.useEffect(() => {
|
|
148
|
-
if (focusVisible && focusRipple && !disableRipple) {
|
|
153
|
+
if (focusVisible && focusRipple && !disableRipple && mountedState) {
|
|
149
154
|
rippleRef.current.pulsate();
|
|
150
155
|
}
|
|
151
|
-
}, [disableRipple, focusRipple, focusVisible]);
|
|
156
|
+
}, [disableRipple, focusRipple, focusVisible, mountedState]);
|
|
152
157
|
|
|
153
158
|
function useRippleHandler(rippleAction, eventCallback, skipRippleAction = disableTouchRipple) {
|
|
154
159
|
return useEventCallback(event => {
|
|
@@ -292,11 +297,6 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
|
|
|
292
297
|
|
|
293
298
|
const handleOwnRef = useForkRef(focusVisibleRef, buttonRef);
|
|
294
299
|
const handleRef = useForkRef(ref, handleOwnRef);
|
|
295
|
-
const [mountedState, setMountedState] = React.useState(false);
|
|
296
|
-
React.useEffect(() => {
|
|
297
|
-
setMountedState(true);
|
|
298
|
-
}, []);
|
|
299
|
-
const enableTouchRipple = mountedState && !disableRipple && !disabled;
|
|
300
300
|
|
|
301
301
|
if (process.env.NODE_ENV !== 'production') {
|
|
302
302
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
export interface ButtonBaseClasses {
|
|
2
|
-
/** Styles applied to the root element. */
|
|
3
|
-
root: string;
|
|
4
|
-
/** State class applied to the root element if `disabled={true}`. */
|
|
5
|
-
disabled: string;
|
|
6
|
-
/** State class applied to the root element if keyboard focused. */
|
|
7
|
-
focusVisible: string;
|
|
8
|
-
}
|
|
9
|
-
export declare type ButtonBaseClassKey = keyof ButtonBaseClasses;
|
|
10
|
-
export declare function getButtonBaseUtilityClass(slot: string): string;
|
|
11
|
-
declare const buttonBaseClasses: ButtonBaseClasses;
|
|
12
|
-
export default buttonBaseClasses;
|
|
1
|
+
export interface ButtonBaseClasses {
|
|
2
|
+
/** Styles applied to the root element. */
|
|
3
|
+
root: string;
|
|
4
|
+
/** State class applied to the root element if `disabled={true}`. */
|
|
5
|
+
disabled: string;
|
|
6
|
+
/** State class applied to the root element if keyboard focused. */
|
|
7
|
+
focusVisible: string;
|
|
8
|
+
}
|
|
9
|
+
export declare type ButtonBaseClassKey = keyof ButtonBaseClasses;
|
|
10
|
+
export declare function getButtonBaseUtilityClass(slot: string): string;
|
|
11
|
+
declare const buttonBaseClasses: ButtonBaseClasses;
|
|
12
|
+
export default buttonBaseClasses;
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
export interface TouchRippleClasses {
|
|
2
|
-
/** Styles applied to the root element. */
|
|
3
|
-
root: string;
|
|
4
|
-
/** Styles applied to the internal `Ripple` components `ripple` class. */
|
|
5
|
-
ripple: string;
|
|
6
|
-
/** Styles applied to the internal `Ripple` components `rippleVisible` class. */
|
|
7
|
-
rippleVisible: string;
|
|
8
|
-
/** Styles applied to the internal `Ripple` components `ripplePulsate` class. */
|
|
9
|
-
ripplePulsate: string;
|
|
10
|
-
/** Styles applied to the internal `Ripple` components `child` class. */
|
|
11
|
-
child: string;
|
|
12
|
-
/** Styles applied to the internal `Ripple` components `childLeaving` class. */
|
|
13
|
-
childLeaving: string;
|
|
14
|
-
/** Styles applied to the internal `Ripple` components `childPulsate` class. */
|
|
15
|
-
childPulsate: string;
|
|
16
|
-
}
|
|
17
|
-
export declare type TouchRippleClassKey = keyof TouchRippleClasses;
|
|
18
|
-
export declare function getTouchRippleUtilityClass(slot: string): string;
|
|
19
|
-
declare const touchRippleClasses: TouchRippleClasses;
|
|
20
|
-
export default touchRippleClasses;
|
|
1
|
+
export interface TouchRippleClasses {
|
|
2
|
+
/** Styles applied to the root element. */
|
|
3
|
+
root: string;
|
|
4
|
+
/** Styles applied to the internal `Ripple` components `ripple` class. */
|
|
5
|
+
ripple: string;
|
|
6
|
+
/** Styles applied to the internal `Ripple` components `rippleVisible` class. */
|
|
7
|
+
rippleVisible: string;
|
|
8
|
+
/** Styles applied to the internal `Ripple` components `ripplePulsate` class. */
|
|
9
|
+
ripplePulsate: string;
|
|
10
|
+
/** Styles applied to the internal `Ripple` components `child` class. */
|
|
11
|
+
child: string;
|
|
12
|
+
/** Styles applied to the internal `Ripple` components `childLeaving` class. */
|
|
13
|
+
childLeaving: string;
|
|
14
|
+
/** Styles applied to the internal `Ripple` components `childPulsate` class. */
|
|
15
|
+
childPulsate: string;
|
|
16
|
+
}
|
|
17
|
+
export declare type TouchRippleClassKey = keyof TouchRippleClasses;
|
|
18
|
+
export declare function getTouchRippleUtilityClass(slot: string): string;
|
|
19
|
+
declare const touchRippleClasses: TouchRippleClasses;
|
|
20
|
+
export default touchRippleClasses;
|
|
@@ -20,7 +20,9 @@ export interface ButtonGroupTypeMap<P = {}, D extends React.ElementType = 'div'>
|
|
|
20
20
|
*/
|
|
21
21
|
classes?: Partial<ButtonGroupClasses>;
|
|
22
22
|
/**
|
|
23
|
-
* The color of the component.
|
|
23
|
+
* The color of the component.
|
|
24
|
+
* It supports both default and custom theme colors, which can be added as shown in the
|
|
25
|
+
* [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
|
|
24
26
|
* @default 'primary'
|
|
25
27
|
*/
|
|
26
28
|
color?: OverridableStringUnion<
|
|
@@ -205,7 +205,9 @@ process.env.NODE_ENV !== "production" ? ButtonGroup.propTypes
|
|
|
205
205
|
className: PropTypes.string,
|
|
206
206
|
|
|
207
207
|
/**
|
|
208
|
-
* The color of the component.
|
|
208
|
+
* The color of the component.
|
|
209
|
+
* It supports both default and custom theme colors, which can be added as shown in the
|
|
210
|
+
* [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
|
|
209
211
|
* @default 'primary'
|
|
210
212
|
*/
|
|
211
213
|
color: PropTypes
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { ButtonGroupProps } from './ButtonGroup';
|
|
3
|
-
interface IButtonGroupContext {
|
|
4
|
-
className?: string;
|
|
5
|
-
color?: ButtonGroupProps['color'];
|
|
6
|
-
disabled?: boolean;
|
|
7
|
-
disableElevation?: boolean;
|
|
8
|
-
disableFocusRipple?: boolean;
|
|
9
|
-
disableRipple?: boolean;
|
|
10
|
-
fullWidth?: boolean;
|
|
11
|
-
size?: ButtonGroupProps['size'];
|
|
12
|
-
variant?: ButtonGroupProps['variant'];
|
|
13
|
-
}
|
|
14
|
-
/**
|
|
15
|
-
* @ignore - internal component.
|
|
16
|
-
*/
|
|
17
|
-
declare const ButtonGroupContext: React.Context<IButtonGroupContext>;
|
|
18
|
-
export default ButtonGroupContext;
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import type { ButtonGroupProps } from './ButtonGroup';
|
|
3
|
+
interface IButtonGroupContext {
|
|
4
|
+
className?: string;
|
|
5
|
+
color?: ButtonGroupProps['color'];
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
disableElevation?: boolean;
|
|
8
|
+
disableFocusRipple?: boolean;
|
|
9
|
+
disableRipple?: boolean;
|
|
10
|
+
fullWidth?: boolean;
|
|
11
|
+
size?: ButtonGroupProps['size'];
|
|
12
|
+
variant?: ButtonGroupProps['variant'];
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* @ignore - internal component.
|
|
16
|
+
*/
|
|
17
|
+
declare const ButtonGroupContext: React.Context<IButtonGroupContext>;
|
|
18
|
+
export default ButtonGroupContext;
|