@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.
Files changed (357) hide show
  1. package/Accordion/accordionClasses.d.ts +18 -18
  2. package/AccordionActions/accordionActionsClasses.d.ts +10 -10
  3. package/AccordionDetails/accordionDetailsClasses.d.ts +8 -8
  4. package/AccordionSummary/accordionSummaryClasses.d.ts +22 -22
  5. package/Alert/Alert.d.ts +3 -1
  6. package/Alert/Alert.js +3 -1
  7. package/Alert/alertClasses.d.ts +44 -44
  8. package/AlertTitle/alertTitleClasses.d.ts +8 -8
  9. package/AppBar/AppBar.d.ts +3 -1
  10. package/AppBar/AppBar.js +3 -1
  11. package/AppBar/appBarClasses.d.ts +28 -28
  12. package/Autocomplete/Autocomplete.js +1 -1
  13. package/Autocomplete/autocompleteClasses.d.ts +54 -54
  14. package/Avatar/avatarClasses.d.ts +20 -20
  15. package/AvatarGroup/avatarGroupClasses.d.ts +10 -10
  16. package/Backdrop/Backdrop.d.ts +32 -15
  17. package/Backdrop/Backdrop.js +26 -20
  18. package/Backdrop/backdropClasses.d.ts +10 -0
  19. package/Backdrop/backdropClasses.js +6 -0
  20. package/Backdrop/index.d.ts +3 -0
  21. package/Backdrop/index.js +2 -1
  22. package/Badge/Badge.d.ts +23 -8
  23. package/Badge/Badge.js +46 -22
  24. package/Badge/badgeClasses.d.ts +24 -0
  25. package/Badge/badgeClasses.js +8 -0
  26. package/Badge/index.d.ts +3 -0
  27. package/Badge/index.js +2 -1
  28. package/BottomNavigation/BottomNavigation.js +0 -0
  29. package/BottomNavigation/bottomNavigationClasses.d.ts +8 -8
  30. package/BottomNavigationAction/bottomNavigationActionClasses.d.ts +14 -14
  31. package/Breadcrumbs/breadcrumbsClasses.d.ts +14 -14
  32. package/Button/Button.d.ts +3 -1
  33. package/Button/Button.js +104 -97
  34. package/Button/buttonClasses.d.ts +76 -76
  35. package/ButtonBase/ButtonBase.js +7 -7
  36. package/ButtonBase/buttonBaseClasses.d.ts +12 -12
  37. package/ButtonBase/touchRippleClasses.d.ts +20 -20
  38. package/ButtonGroup/ButtonGroup.d.ts +3 -1
  39. package/ButtonGroup/ButtonGroup.js +3 -1
  40. package/ButtonGroup/ButtonGroupContext.d.ts +18 -18
  41. package/ButtonGroup/buttonGroupClasses.d.ts +58 -58
  42. package/CHANGELOG.md +215 -0
  43. package/Card/Card.d.ts +1 -0
  44. package/Card/cardClasses.d.ts +8 -8
  45. package/CardActionArea/cardActionAreaClasses.d.ts +12 -12
  46. package/CardActions/cardActionsClasses.d.ts +10 -10
  47. package/CardContent/cardContentClasses.d.ts +8 -8
  48. package/CardHeader/cardHeaderClasses.d.ts +18 -18
  49. package/CardMedia/cardMediaClasses.d.ts +12 -12
  50. package/Checkbox/Checkbox.d.ts +3 -1
  51. package/Checkbox/Checkbox.js +3 -1
  52. package/Checkbox/checkboxClasses.d.ts +18 -18
  53. package/Chip/Chip.d.ts +3 -1
  54. package/Chip/Chip.js +3 -1
  55. package/Chip/chipClasses.d.ts +80 -80
  56. package/CircularProgress/CircularProgress.d.ts +3 -1
  57. package/CircularProgress/CircularProgress.js +3 -1
  58. package/CircularProgress/circularProgressClasses.d.ts +26 -26
  59. package/ClickAwayListener/index.d.ts +2 -2
  60. package/Collapse/collapseClasses.d.ts +18 -18
  61. package/Container/containerClasses.d.ts +22 -22
  62. package/Dialog/DialogContext.d.ts +6 -6
  63. package/Dialog/dialogClasses.d.ts +36 -36
  64. package/DialogActions/dialogActionsClasses.d.ts +10 -10
  65. package/DialogContent/dialogContentClasses.d.ts +10 -10
  66. package/DialogContentText/dialogContentTextClasses.d.ts +8 -8
  67. package/DialogTitle/dialogTitleClasses.d.ts +8 -8
  68. package/Divider/dividerClasses.d.ts +34 -34
  69. package/Drawer/drawerClasses.d.ts +30 -30
  70. package/Fab/Fab.d.ts +3 -1
  71. package/Fab/Fab.js +3 -1
  72. package/Fab/fabClasses.d.ts +26 -26
  73. package/FilledInput/FilledInput.js +3 -1
  74. package/FilledInput/filledInputClasses.d.ts +40 -40
  75. package/FormControl/FormControl.d.ts +3 -1
  76. package/FormControl/FormControl.js +3 -1
  77. package/FormControl/formControlClasses.d.ts +14 -14
  78. package/FormControlLabel/FormControlLabel.d.ts +1 -1
  79. package/FormControlLabel/FormControlLabel.js +14 -9
  80. package/FormControlLabel/formControlLabelClasses.d.ts +20 -20
  81. package/FormGroup/formGroupClasses.d.ts +12 -12
  82. package/FormHelperText/formHelperTextClasses.d.ts +22 -22
  83. package/FormLabel/FormLabel.d.ts +3 -1
  84. package/FormLabel/FormLabel.js +3 -1
  85. package/FormLabel/formLabelClasses.d.ts +22 -22
  86. package/Grid/gridClasses.d.ts +48 -48
  87. package/Grow/Grow.js +11 -5
  88. package/Icon/Icon.d.ts +3 -1
  89. package/Icon/Icon.js +3 -1
  90. package/Icon/iconClasses.d.ts +24 -24
  91. package/IconButton/IconButton.d.ts +3 -1
  92. package/IconButton/IconButton.js +3 -1
  93. package/IconButton/iconButtonClasses.d.ts +26 -26
  94. package/ImageList/imageListClasses.d.ts +16 -16
  95. package/ImageListItem/imageListItemClasses.d.ts +18 -18
  96. package/ImageListItemBar/imageListItemBarClasses.d.ts +30 -30
  97. package/Input/Input.js +3 -1
  98. package/Input/inputClasses.d.ts +34 -34
  99. package/InputAdornment/inputAdornmentClasses.d.ts +24 -24
  100. package/InputBase/InputBase.d.ts +3 -1
  101. package/InputBase/InputBase.js +3 -1
  102. package/InputBase/inputBaseClasses.d.ts +44 -44
  103. package/InputLabel/InputLabel.js +3 -1
  104. package/InputLabel/inputLabelClasses.d.ts +32 -32
  105. package/LinearProgress/LinearProgress.d.ts +3 -1
  106. package/LinearProgress/LinearProgress.js +3 -1
  107. package/LinearProgress/linearProgressClasses.d.ts +42 -42
  108. package/Link/Link.js +12 -5
  109. package/Link/linkClasses.d.ts +18 -18
  110. package/List/listClasses.d.ts +14 -14
  111. package/ListItem/listItemClasses.d.ts +30 -30
  112. package/ListItemAvatar/listItemAvatarClasses.d.ts +10 -10
  113. package/ListItemButton/ListItemButton.js +1 -0
  114. package/ListItemButton/listItemButtonClasses.d.ts +22 -22
  115. package/ListItemIcon/listItemIconClasses.d.ts +10 -10
  116. package/ListItemSecondaryAction/listItemSecondaryActionClasses.d.ts +10 -10
  117. package/ListItemText/listItemTextClasses.d.ts +18 -18
  118. package/ListSubheader/listSubheaderClasses.d.ts +18 -18
  119. package/Menu/menuClasses.d.ts +12 -12
  120. package/MenuItem/menuItemClasses.d.ts +20 -20
  121. package/MobileStepper/mobileStepperClasses.d.ts +22 -22
  122. package/NativeSelect/nativeSelectClasses.d.ts +32 -32
  123. package/OutlinedInput/OutlinedInput.js +3 -1
  124. package/OutlinedInput/outlinedInputClasses.d.ts +36 -36
  125. package/Pagination/Pagination.d.ts +2 -0
  126. package/Pagination/Pagination.js +2 -0
  127. package/Pagination/paginationClasses.d.ts +14 -14
  128. package/PaginationItem/PaginationItem.d.ts +2 -0
  129. package/PaginationItem/PaginationItem.js +2 -0
  130. package/PaginationItem/paginationItemClasses.d.ts +42 -42
  131. package/Paper/paperClasses.d.ts +39 -39
  132. package/Popover/popoverClasses.d.ts +10 -10
  133. package/Popper/Popper.d.ts +29 -17
  134. package/Popper/Popper.js +16 -6
  135. package/Radio/Radio.d.ts +3 -1
  136. package/Radio/Radio.js +3 -1
  137. package/Radio/radioClasses.d.ts +16 -16
  138. package/RadioGroup/RadioGroupContext.d.ts +11 -11
  139. package/RadioGroup/useRadioGroup.d.ts +4 -4
  140. package/Rating/ratingClasses.d.ts +40 -40
  141. package/ScopedCssBaseline/scopedCssBaselineClasses.d.ts +8 -8
  142. package/Select/selectClasses.d.ts +30 -30
  143. package/Skeleton/skeletonClasses.d.ts +24 -24
  144. package/Slider/Slider.d.ts +3 -1
  145. package/Slider/Slider.js +3 -1
  146. package/Snackbar/snackbarClasses.d.ts +20 -20
  147. package/SnackbarContent/snackbarContentClasses.d.ts +12 -12
  148. package/SpeedDial/speedDialClasses.d.ts +22 -22
  149. package/SpeedDialAction/speedDialActionClasses.d.ts +20 -20
  150. package/SpeedDialIcon/speedDialIconClasses.d.ts +18 -18
  151. package/Step/StepContext.d.ts +20 -20
  152. package/Step/stepClasses.d.ts +16 -16
  153. package/StepButton/stepButtonClasses.d.ts +14 -14
  154. package/StepConnector/stepConnectorClasses.d.ts +26 -26
  155. package/StepContent/stepContentClasses.d.ts +12 -12
  156. package/StepIcon/stepIconClasses.d.ts +16 -16
  157. package/StepLabel/stepLabelClasses.d.ts +28 -28
  158. package/Stepper/stepperClasses.d.ts +14 -14
  159. package/SvgIcon/SvgIcon.d.ts +3 -1
  160. package/SvgIcon/SvgIcon.js +3 -1
  161. package/SvgIcon/svgIconClasses.d.ts +24 -24
  162. package/Switch/Switch.d.ts +3 -1
  163. package/Switch/Switch.js +3 -1
  164. package/Switch/switchClasses.d.ts +32 -32
  165. package/Tab/tabClasses.d.ts +26 -26
  166. package/TabScrollButton/tabScrollButtonClasses.d.ts +12 -12
  167. package/Table/tableClasses.d.ts +10 -10
  168. package/TableBody/tableBodyClasses.d.ts +8 -8
  169. package/TableCell/tableCellClasses.d.ts +32 -32
  170. package/TableContainer/tableContainerClasses.d.ts +8 -8
  171. package/TableFooter/tableFooterClasses.d.ts +8 -8
  172. package/TableHead/tableHeadClasses.d.ts +8 -8
  173. package/TablePagination/tablePaginationClasses.d.ts +28 -28
  174. package/TableRow/tableRowClasses.d.ts +16 -16
  175. package/TableSortLabel/tableSortLabelClasses.d.ts +16 -16
  176. package/Tabs/tabsClasses.d.ts +32 -32
  177. package/TextField/TextField.d.ts +3 -2
  178. package/TextField/TextField.js +3 -1
  179. package/TextField/textFieldClasses.d.ts +8 -8
  180. package/ToggleButton/ToggleButton.d.ts +2 -0
  181. package/ToggleButton/ToggleButton.js +2 -0
  182. package/ToggleButton/toggleButtonClasses.d.ts +24 -24
  183. package/ToggleButtonGroup/ToggleButtonGroup.d.ts +3 -1
  184. package/ToggleButtonGroup/ToggleButtonGroup.js +3 -1
  185. package/ToggleButtonGroup/toggleButtonGroupClasses.d.ts +18 -18
  186. package/Toolbar/toolbarClasses.d.ts +14 -14
  187. package/Tooltip/tooltipClasses.d.ts +30 -30
  188. package/Typography/typographyClasses.d.ts +50 -50
  189. package/Unstable_TrapFocus/index.d.ts +2 -2
  190. package/Unstable_TrapFocus/index.js +1 -1
  191. package/className/index.d.ts +8 -8
  192. package/darkScrollbar/index.d.ts +28 -28
  193. package/index.js +1 -1
  194. package/internal/switchBaseClasses.d.ts +12 -12
  195. package/legacy/Alert/Alert.js +3 -1
  196. package/legacy/AppBar/AppBar.js +3 -1
  197. package/legacy/Autocomplete/Autocomplete.js +1 -1
  198. package/legacy/Backdrop/Backdrop.js +27 -20
  199. package/legacy/Backdrop/backdropClasses.js +6 -0
  200. package/legacy/Backdrop/index.js +2 -1
  201. package/legacy/Badge/Badge.js +47 -22
  202. package/legacy/Badge/badgeClasses.js +8 -0
  203. package/legacy/Badge/index.js +2 -1
  204. package/legacy/BottomNavigation/BottomNavigation.js +0 -0
  205. package/legacy/Button/Button.js +33 -30
  206. package/legacy/ButtonBase/ButtonBase.js +11 -11
  207. package/legacy/ButtonGroup/ButtonGroup.js +3 -1
  208. package/legacy/Checkbox/Checkbox.js +3 -1
  209. package/legacy/Chip/Chip.js +3 -1
  210. package/legacy/CircularProgress/CircularProgress.js +3 -1
  211. package/legacy/Fab/Fab.js +3 -1
  212. package/legacy/FilledInput/FilledInput.js +3 -1
  213. package/legacy/FormControl/FormControl.js +3 -1
  214. package/legacy/FormControlLabel/FormControlLabel.js +14 -9
  215. package/legacy/FormLabel/FormLabel.js +3 -1
  216. package/legacy/Grow/Grow.js +11 -5
  217. package/legacy/Icon/Icon.js +3 -1
  218. package/legacy/IconButton/IconButton.js +3 -1
  219. package/legacy/Input/Input.js +3 -1
  220. package/legacy/InputBase/InputBase.js +3 -1
  221. package/legacy/InputLabel/InputLabel.js +3 -1
  222. package/legacy/LinearProgress/LinearProgress.js +3 -1
  223. package/legacy/Link/Link.js +12 -4
  224. package/legacy/ListItemButton/ListItemButton.js +1 -0
  225. package/legacy/OutlinedInput/OutlinedInput.js +3 -1
  226. package/legacy/Pagination/Pagination.js +2 -0
  227. package/legacy/PaginationItem/PaginationItem.js +2 -0
  228. package/legacy/Popper/Popper.js +18 -6
  229. package/legacy/Radio/Radio.js +3 -1
  230. package/legacy/Slider/Slider.js +3 -1
  231. package/legacy/SvgIcon/SvgIcon.js +3 -1
  232. package/legacy/Switch/Switch.js +3 -1
  233. package/legacy/TextField/TextField.js +3 -1
  234. package/legacy/ToggleButton/ToggleButton.js +2 -0
  235. package/legacy/ToggleButtonGroup/ToggleButtonGroup.js +3 -1
  236. package/legacy/Unstable_TrapFocus/index.js +1 -1
  237. package/legacy/index.js +1 -1
  238. package/legacy/locale/index.js +115 -111
  239. package/legacy/styles/CssVarsProvider.js +31 -0
  240. package/legacy/styles/experimental_extendTheme.js +96 -0
  241. package/legacy/styles/index.js +3 -1
  242. package/locale/index.d.ts +71 -71
  243. package/locale/index.js +6 -3
  244. package/modern/Alert/Alert.js +3 -1
  245. package/modern/AppBar/AppBar.js +3 -1
  246. package/modern/Autocomplete/Autocomplete.js +1 -1
  247. package/modern/Backdrop/Backdrop.js +25 -19
  248. package/modern/Backdrop/backdropClasses.js +6 -0
  249. package/modern/Backdrop/index.js +2 -1
  250. package/modern/Badge/Badge.js +43 -19
  251. package/modern/Badge/badgeClasses.js +8 -0
  252. package/modern/Badge/index.js +2 -1
  253. package/modern/BottomNavigation/BottomNavigation.js +0 -0
  254. package/modern/Button/Button.js +32 -29
  255. package/modern/ButtonBase/ButtonBase.js +7 -7
  256. package/modern/ButtonGroup/ButtonGroup.js +3 -1
  257. package/modern/Checkbox/Checkbox.js +3 -1
  258. package/modern/Chip/Chip.js +3 -1
  259. package/modern/CircularProgress/CircularProgress.js +3 -1
  260. package/modern/Fab/Fab.js +3 -1
  261. package/modern/FilledInput/FilledInput.js +3 -1
  262. package/modern/FormControl/FormControl.js +3 -1
  263. package/modern/FormControlLabel/FormControlLabel.js +14 -9
  264. package/modern/FormLabel/FormLabel.js +3 -1
  265. package/modern/Grow/Grow.js +11 -5
  266. package/modern/Icon/Icon.js +3 -1
  267. package/modern/IconButton/IconButton.js +3 -1
  268. package/modern/Input/Input.js +3 -1
  269. package/modern/InputBase/InputBase.js +3 -1
  270. package/modern/InputLabel/InputLabel.js +3 -1
  271. package/modern/LinearProgress/LinearProgress.js +3 -1
  272. package/modern/Link/Link.js +12 -5
  273. package/modern/ListItemButton/ListItemButton.js +1 -0
  274. package/modern/OutlinedInput/OutlinedInput.js +3 -1
  275. package/modern/Pagination/Pagination.js +2 -0
  276. package/modern/PaginationItem/PaginationItem.js +2 -0
  277. package/modern/Popper/Popper.js +16 -6
  278. package/modern/Radio/Radio.js +3 -1
  279. package/modern/Slider/Slider.js +3 -1
  280. package/modern/SvgIcon/SvgIcon.js +3 -1
  281. package/modern/Switch/Switch.js +3 -1
  282. package/modern/TextField/TextField.js +3 -1
  283. package/modern/ToggleButton/ToggleButton.js +2 -0
  284. package/modern/ToggleButtonGroup/ToggleButtonGroup.js +3 -1
  285. package/modern/Unstable_TrapFocus/index.js +1 -1
  286. package/modern/index.js +1 -1
  287. package/modern/locale/index.js +6 -3
  288. package/modern/styles/CssVarsProvider.js +28 -0
  289. package/modern/styles/experimental_extendTheme.js +89 -0
  290. package/modern/styles/index.js +3 -1
  291. package/node/Alert/Alert.js +3 -1
  292. package/node/AppBar/AppBar.js +3 -1
  293. package/node/Autocomplete/Autocomplete.js +1 -1
  294. package/node/Backdrop/Backdrop.js +28 -23
  295. package/node/Backdrop/backdropClasses.js +17 -0
  296. package/node/Backdrop/index.js +17 -5
  297. package/node/Badge/Badge.js +56 -33
  298. package/node/Badge/badgeClasses.js +22 -0
  299. package/node/Badge/index.js +17 -5
  300. package/node/BottomNavigation/BottomNavigation.js +0 -0
  301. package/node/Button/Button.js +104 -97
  302. package/node/ButtonBase/ButtonBase.js +7 -7
  303. package/node/ButtonGroup/ButtonGroup.js +3 -1
  304. package/node/Checkbox/Checkbox.js +3 -1
  305. package/node/Chip/Chip.js +3 -1
  306. package/node/CircularProgress/CircularProgress.js +3 -1
  307. package/node/Fab/Fab.js +3 -1
  308. package/node/FilledInput/FilledInput.js +3 -1
  309. package/node/FormControl/FormControl.js +3 -1
  310. package/node/FormControlLabel/FormControlLabel.js +14 -9
  311. package/node/FormLabel/FormLabel.js +3 -1
  312. package/node/Grow/Grow.js +10 -4
  313. package/node/Icon/Icon.js +3 -1
  314. package/node/IconButton/IconButton.js +3 -1
  315. package/node/Input/Input.js +3 -1
  316. package/node/InputBase/InputBase.js +3 -1
  317. package/node/InputLabel/InputLabel.js +3 -1
  318. package/node/LinearProgress/LinearProgress.js +3 -1
  319. package/node/Link/Link.js +13 -5
  320. package/node/ListItemButton/ListItemButton.js +1 -0
  321. package/node/OutlinedInput/OutlinedInput.js +3 -1
  322. package/node/Pagination/Pagination.js +2 -0
  323. package/node/PaginationItem/PaginationItem.js +2 -0
  324. package/node/Popper/Popper.js +19 -8
  325. package/node/Radio/Radio.js +3 -1
  326. package/node/Slider/Slider.js +3 -1
  327. package/node/SvgIcon/SvgIcon.js +3 -1
  328. package/node/Switch/Switch.js +3 -1
  329. package/node/TextField/TextField.js +3 -1
  330. package/node/ToggleButton/ToggleButton.js +2 -0
  331. package/node/ToggleButtonGroup/ToggleButtonGroup.js +3 -1
  332. package/node/Unstable_TrapFocus/index.js +2 -2
  333. package/node/index.js +1 -1
  334. package/node/locale/index.js +6 -3
  335. package/node/styles/CssVarsProvider.js +41 -0
  336. package/node/styles/experimental_extendTheme.js +105 -0
  337. package/node/styles/index.js +58 -0
  338. package/package.json +7 -7
  339. package/styles/CssVarsProvider.d.ts +28 -0
  340. package/styles/CssVarsProvider.js +28 -0
  341. package/styles/createPalette.d.ts +26 -0
  342. package/styles/experimental_extendTheme.d.ts +90 -0
  343. package/styles/experimental_extendTheme.js +91 -0
  344. package/styles/index.d.ts +5 -0
  345. package/styles/index.js +3 -1
  346. package/transitions/index.d.ts +1 -1
  347. package/transitions/transition.d.ts +13 -13
  348. package/transitions/utils.d.ts +23 -23
  349. package/umd/material-ui.development.js +1314 -505
  350. package/umd/material-ui.production.min.js +21 -21
  351. package/useMediaQuery/useMediaQuery.d.ts +31 -31
  352. package/useTouchRipple/index.d.ts +1 -1
  353. package/useTouchRipple/useTouchRipple.d.ts +28 -28
  354. package/utils/getScrollbarSize.d.ts +2 -2
  355. package/utils/ownerDocument.d.ts +2 -2
  356. package/utils/ownerWindow.d.ts +2 -2
  357. 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
- }) => _extends({}, theme.typography.button, {
66
- minWidth: 64,
67
- padding: '6px 16px',
68
- borderRadius: theme.shape.borderRadius,
69
- transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
70
- duration: theme.transitions.duration.short
71
- }),
72
- '&:hover': _extends({
73
- textDecoration: 'none',
74
- backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
75
- // Reset on touch devices, it doesn't add specificity
76
- '@media (hover: none)': {
77
- backgroundColor: 'transparent'
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
- backgroundColor: alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
81
- // Reset on touch devices, it doesn't add specificity
82
- '@media (hover: none)': {
83
- backgroundColor: 'transparent'
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
- border: `1px solid ${theme.palette[ownerState.color].main}`,
87
- backgroundColor: alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
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
- backgroundColor: theme.palette.grey.A100,
94
- boxShadow: theme.shadows[4],
95
- // Reset on touch devices, it doesn't add specificity
96
- '@media (hover: none)': {
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
- backgroundColor: theme.palette[ownerState.color].dark,
102
- // Reset on touch devices, it doesn't add specificity
103
- '@media (hover: none)': {
104
- backgroundColor: theme.palette[ownerState.color].main
105
- }
106
- }),
107
- '&:active': _extends({}, ownerState.variant === 'contained' && {
108
- boxShadow: theme.shadows[8]
109
- }),
110
- [`&.${buttonClasses.focusVisible}`]: _extends({}, ownerState.variant === 'contained' && {
111
- boxShadow: theme.shadows[6]
112
- }),
113
- [`&.${buttonClasses.disabled}`]: _extends({
114
- color: theme.palette.action.disabled
115
- }, ownerState.variant === 'outlined' && {
116
- border: `1px solid ${theme.palette.action.disabledBackground}`
117
- }, ownerState.variant === 'outlined' && ownerState.color === 'secondary' && {
118
- border: `1px solid ${theme.palette.action.disabled}`
119
- }, ownerState.variant === 'contained' && {
120
- color: theme.palette.action.disabled,
121
- boxShadow: theme.shadows[0],
122
- backgroundColor: theme.palette.action.disabledBackground
123
- })
124
- }, ownerState.variant === 'text' && {
125
- padding: '6px 8px'
126
- }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
127
- color: theme.palette[ownerState.color].main
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. It supports those theme colors that make sense for this 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;
@@ -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. It supports those theme colors that make sense for this 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. It supports those theme colors that make sense for this 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;