@mui/material 5.5.3 → 5.6.2

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 (530) hide show
  1. package/Accordion/Accordion.d.ts +4 -4
  2. package/Accordion/Accordion.js +1 -1
  3. package/Accordion/accordionClasses.d.ts +18 -18
  4. package/AccordionActions/AccordionActions.d.ts +2 -2
  5. package/AccordionActions/accordionActionsClasses.d.ts +10 -10
  6. package/AccordionDetails/AccordionDetails.d.ts +2 -2
  7. package/AccordionDetails/accordionDetailsClasses.d.ts +8 -8
  8. package/AccordionSummary/AccordionSummary.d.ts +3 -3
  9. package/AccordionSummary/accordionSummaryClasses.d.ts +22 -22
  10. package/Alert/Alert.d.ts +5 -5
  11. package/Alert/Alert.js +2 -2
  12. package/Alert/alertClasses.d.ts +44 -44
  13. package/AlertTitle/AlertTitle.d.ts +2 -2
  14. package/AlertTitle/alertTitleClasses.d.ts +8 -8
  15. package/AppBar/AppBar.d.ts +4 -4
  16. package/AppBar/AppBar.js +1 -1
  17. package/AppBar/appBarClasses.d.ts +28 -28
  18. package/Autocomplete/Autocomplete.d.ts +8 -8
  19. package/Autocomplete/Autocomplete.js +8 -6
  20. package/Autocomplete/autocompleteClasses.d.ts +54 -54
  21. package/Avatar/Avatar.d.ts +2 -2
  22. package/Avatar/avatarClasses.d.ts +20 -20
  23. package/AvatarGroup/AvatarGroup.d.ts +2 -2
  24. package/AvatarGroup/avatarGroupClasses.d.ts +10 -10
  25. package/Backdrop/Backdrop.d.ts +3 -3
  26. package/Backdrop/backdropClasses.d.ts +10 -10
  27. package/Badge/Badge.d.ts +25 -12
  28. package/Badge/Badge.js +48 -24
  29. package/Badge/badgeClasses.d.ts +24 -0
  30. package/Badge/badgeClasses.js +8 -0
  31. package/Badge/index.d.ts +3 -0
  32. package/Badge/index.js +2 -1
  33. package/BottomNavigation/BottomNavigation.d.ts +2 -2
  34. package/BottomNavigation/BottomNavigation.js +0 -0
  35. package/BottomNavigation/bottomNavigationClasses.d.ts +8 -8
  36. package/BottomNavigationAction/BottomNavigationAction.d.ts +3 -3
  37. package/BottomNavigationAction/bottomNavigationActionClasses.d.ts +14 -14
  38. package/Breadcrumbs/Breadcrumbs.d.ts +3 -3
  39. package/Breadcrumbs/Breadcrumbs.js +1 -1
  40. package/Breadcrumbs/breadcrumbsClasses.d.ts +14 -14
  41. package/Button/Button.d.ts +5 -5
  42. package/Button/Button.js +102 -97
  43. package/Button/buttonClasses.d.ts +76 -76
  44. package/ButtonBase/ButtonBase.d.ts +2 -2
  45. package/ButtonBase/buttonBaseClasses.d.ts +12 -12
  46. package/ButtonBase/touchRippleClasses.d.ts +20 -20
  47. package/ButtonGroup/ButtonGroup.d.ts +3 -3
  48. package/ButtonGroup/ButtonGroup.js +1 -1
  49. package/ButtonGroup/ButtonGroupContext.d.ts +18 -18
  50. package/ButtonGroup/buttonGroupClasses.d.ts +58 -58
  51. package/CHANGELOG.md +210 -32
  52. package/Card/Card.d.ts +3 -3
  53. package/Card/cardClasses.d.ts +8 -8
  54. package/CardActionArea/CardActionArea.d.ts +3 -3
  55. package/CardActionArea/cardActionAreaClasses.d.ts +12 -12
  56. package/CardActions/CardActions.d.ts +2 -2
  57. package/CardActions/cardActionsClasses.d.ts +10 -10
  58. package/CardContent/CardContent.d.ts +2 -2
  59. package/CardContent/cardContentClasses.d.ts +8 -8
  60. package/CardHeader/CardHeader.d.ts +2 -2
  61. package/CardHeader/cardHeaderClasses.d.ts +18 -18
  62. package/CardMedia/CardMedia.d.ts +2 -2
  63. package/CardMedia/cardMediaClasses.d.ts +12 -12
  64. package/Checkbox/Checkbox.d.ts +5 -5
  65. package/Checkbox/Checkbox.js +1 -1
  66. package/Checkbox/checkboxClasses.d.ts +18 -18
  67. package/Chip/Chip.d.ts +3 -3
  68. package/Chip/Chip.js +1 -1
  69. package/Chip/chipClasses.d.ts +80 -80
  70. package/CircularProgress/CircularProgress.d.ts +3 -3
  71. package/CircularProgress/CircularProgress.js +1 -1
  72. package/CircularProgress/circularProgressClasses.d.ts +26 -26
  73. package/ClickAwayListener/index.d.ts +2 -2
  74. package/Collapse/Collapse.d.ts +5 -5
  75. package/Collapse/Collapse.js +1 -1
  76. package/Collapse/collapseClasses.d.ts +18 -18
  77. package/Container/Container.d.ts +2 -2
  78. package/Container/containerClasses.d.ts +22 -22
  79. package/CssBaseline/CssBaseline.d.ts +2 -2
  80. package/Dialog/Dialog.d.ts +6 -5
  81. package/Dialog/Dialog.js +3 -2
  82. package/Dialog/DialogContext.d.ts +6 -6
  83. package/Dialog/dialogClasses.d.ts +36 -36
  84. package/DialogActions/DialogActions.d.ts +2 -2
  85. package/DialogActions/dialogActionsClasses.d.ts +10 -10
  86. package/DialogContent/DialogContent.d.ts +2 -2
  87. package/DialogContent/dialogContentClasses.d.ts +10 -10
  88. package/DialogContentText/DialogContentText.d.ts +3 -3
  89. package/DialogContentText/dialogContentTextClasses.d.ts +8 -8
  90. package/DialogTitle/DialogTitle.d.ts +2 -2
  91. package/DialogTitle/dialogTitleClasses.d.ts +8 -8
  92. package/Divider/Divider.d.ts +3 -3
  93. package/Divider/dividerClasses.d.ts +34 -34
  94. package/Drawer/Drawer.d.ts +6 -6
  95. package/Drawer/Drawer.js +4 -4
  96. package/Drawer/drawerClasses.d.ts +30 -30
  97. package/Fab/Fab.d.ts +4 -4
  98. package/Fab/Fab.js +1 -1
  99. package/Fab/fabClasses.d.ts +26 -26
  100. package/Fade/Fade.d.ts +3 -3
  101. package/Fade/Fade.js +1 -1
  102. package/FilledInput/FilledInput.d.ts +3 -3
  103. package/FilledInput/FilledInput.js +5 -3
  104. package/FilledInput/filledInputClasses.d.ts +40 -40
  105. package/FormControl/FormControl.d.ts +7 -7
  106. package/FormControl/FormControl.js +2 -2
  107. package/FormControl/formControlClasses.d.ts +14 -14
  108. package/FormControlLabel/FormControlLabel.d.ts +4 -4
  109. package/FormControlLabel/formControlLabelClasses.d.ts +20 -20
  110. package/FormGroup/FormGroup.d.ts +3 -3
  111. package/FormGroup/formGroupClasses.d.ts +12 -12
  112. package/FormHelperText/FormHelperText.d.ts +2 -2
  113. package/FormHelperText/formHelperTextClasses.d.ts +22 -22
  114. package/FormLabel/FormLabel.d.ts +5 -5
  115. package/FormLabel/FormLabel.js +1 -1
  116. package/FormLabel/formLabelClasses.d.ts +22 -22
  117. package/GlobalStyles/GlobalStyles.d.ts +2 -2
  118. package/Grid/Grid.d.ts +2 -2
  119. package/Grid/gridClasses.d.ts +48 -48
  120. package/Grow/Grow.d.ts +5 -5
  121. package/Grow/Grow.js +8 -8
  122. package/Hidden/Hidden.d.ts +2 -2
  123. package/Icon/Icon.d.ts +4 -4
  124. package/Icon/Icon.js +1 -1
  125. package/Icon/iconClasses.d.ts +24 -24
  126. package/IconButton/IconButton.d.ts +5 -5
  127. package/IconButton/IconButton.js +2 -2
  128. package/IconButton/iconButtonClasses.d.ts +26 -26
  129. package/ImageList/ImageList.d.ts +2 -2
  130. package/ImageList/imageListClasses.d.ts +16 -16
  131. package/ImageListItem/ImageListItem.d.ts +2 -2
  132. package/ImageListItem/imageListItemClasses.d.ts +18 -18
  133. package/ImageListItemBar/ImageListItemBar.d.ts +2 -2
  134. package/ImageListItemBar/imageListItemBarClasses.d.ts +30 -30
  135. package/Input/Input.d.ts +3 -3
  136. package/Input/Input.js +5 -3
  137. package/Input/inputClasses.d.ts +34 -34
  138. package/InputAdornment/InputAdornment.d.ts +2 -2
  139. package/InputAdornment/inputAdornmentClasses.d.ts +24 -24
  140. package/InputBase/InputBase.d.ts +4 -4
  141. package/InputBase/InputBase.js +2 -2
  142. package/InputBase/inputBaseClasses.d.ts +44 -44
  143. package/InputLabel/InputLabel.d.ts +3 -3
  144. package/InputLabel/InputLabel.js +1 -1
  145. package/InputLabel/inputLabelClasses.d.ts +32 -32
  146. package/LinearProgress/LinearProgress.d.ts +3 -3
  147. package/LinearProgress/LinearProgress.js +1 -1
  148. package/LinearProgress/linearProgressClasses.d.ts +42 -42
  149. package/Link/Link.d.ts +5 -5
  150. package/Link/Link.js +15 -6
  151. package/Link/linkClasses.d.ts +18 -18
  152. package/List/List.d.ts +3 -3
  153. package/List/listClasses.d.ts +14 -14
  154. package/ListItem/ListItem.d.ts +8 -8
  155. package/ListItem/ListItem.js +4 -4
  156. package/ListItem/listItemClasses.d.ts +30 -30
  157. package/ListItemAvatar/ListItemAvatar.d.ts +2 -2
  158. package/ListItemAvatar/listItemAvatarClasses.d.ts +10 -10
  159. package/ListItemButton/ListItemButton.d.ts +3 -3
  160. package/ListItemButton/ListItemButton.js +1 -0
  161. package/ListItemButton/listItemButtonClasses.d.ts +22 -22
  162. package/ListItemIcon/ListItemIcon.d.ts +2 -2
  163. package/ListItemIcon/listItemIconClasses.d.ts +10 -10
  164. package/ListItemSecondaryAction/ListItemSecondaryAction.d.ts +2 -2
  165. package/ListItemSecondaryAction/listItemSecondaryActionClasses.d.ts +10 -10
  166. package/ListItemText/ListItemText.d.ts +2 -2
  167. package/ListItemText/listItemTextClasses.d.ts +18 -18
  168. package/ListSubheader/ListSubheader.d.ts +2 -2
  169. package/ListSubheader/listSubheaderClasses.d.ts +18 -18
  170. package/Menu/Menu.d.ts +6 -6
  171. package/Menu/Menu.js +2 -2
  172. package/Menu/menuClasses.d.ts +12 -12
  173. package/MenuItem/MenuItem.d.ts +3 -3
  174. package/MenuItem/menuItemClasses.d.ts +20 -20
  175. package/MenuList/MenuList.d.ts +4 -4
  176. package/MenuList/MenuList.js +1 -1
  177. package/MobileStepper/MobileStepper.d.ts +3 -3
  178. package/MobileStepper/mobileStepperClasses.d.ts +22 -22
  179. package/Modal/Modal.d.ts +8 -8
  180. package/Modal/Modal.js +7 -6
  181. package/NativeSelect/NativeSelect.d.ts +3 -3
  182. package/NativeSelect/nativeSelectClasses.d.ts +32 -32
  183. package/OutlinedInput/OutlinedInput.d.ts +3 -3
  184. package/OutlinedInput/OutlinedInput.js +2 -2
  185. package/OutlinedInput/outlinedInputClasses.d.ts +36 -36
  186. package/Pagination/Pagination.d.ts +4 -4
  187. package/Pagination/Pagination.js +2 -2
  188. package/Pagination/paginationClasses.d.ts +14 -14
  189. package/PaginationItem/PaginationItem.d.ts +3 -3
  190. package/PaginationItem/PaginationItem.js +1 -1
  191. package/PaginationItem/paginationItemClasses.d.ts +42 -42
  192. package/Paper/Paper.d.ts +3 -3
  193. package/Paper/paperClasses.d.ts +39 -39
  194. package/Popover/Popover.d.ts +6 -6
  195. package/Popover/Popover.js +2 -2
  196. package/Popover/popoverClasses.d.ts +10 -10
  197. package/Popper/Popper.d.ts +29 -29
  198. package/Popper/Popper.js +4 -4
  199. package/README.md +7 -8
  200. package/Radio/Radio.d.ts +4 -4
  201. package/Radio/Radio.js +1 -1
  202. package/Radio/radioClasses.d.ts +16 -16
  203. package/RadioGroup/RadioGroup.d.ts +3 -3
  204. package/RadioGroup/RadioGroupContext.d.ts +11 -11
  205. package/RadioGroup/useRadioGroup.d.ts +4 -4
  206. package/Rating/Rating.d.ts +3 -3
  207. package/Rating/Rating.js +1 -1
  208. package/Rating/ratingClasses.d.ts +40 -40
  209. package/ScopedCssBaseline/ScopedCssBaseline.d.ts +2 -2
  210. package/ScopedCssBaseline/scopedCssBaselineClasses.d.ts +8 -8
  211. package/Select/Select.d.ts +5 -5
  212. package/Select/Select.js +2 -2
  213. package/Select/SelectInput.js +24 -3
  214. package/Select/selectClasses.d.ts +30 -30
  215. package/Skeleton/Skeleton.d.ts +2 -2
  216. package/Skeleton/skeletonClasses.d.ts +24 -24
  217. package/Slide/Slide.d.ts +4 -4
  218. package/Slide/Slide.js +1 -1
  219. package/Slider/Slider.d.ts +4 -4
  220. package/Slider/Slider.js +1 -1
  221. package/Snackbar/Snackbar.d.ts +4 -4
  222. package/Snackbar/Snackbar.js +2 -2
  223. package/Snackbar/snackbarClasses.d.ts +20 -20
  224. package/SnackbarContent/SnackbarContent.d.ts +3 -3
  225. package/SnackbarContent/snackbarContentClasses.d.ts +12 -12
  226. package/SpeedDial/SpeedDial.d.ts +4 -4
  227. package/SpeedDial/SpeedDial.js +2 -2
  228. package/SpeedDial/speedDialClasses.d.ts +22 -22
  229. package/SpeedDialAction/SpeedDialAction.d.ts +5 -5
  230. package/SpeedDialAction/SpeedDialAction.js +2 -2
  231. package/SpeedDialAction/speedDialActionClasses.d.ts +20 -20
  232. package/SpeedDialIcon/SpeedDialIcon.d.ts +2 -2
  233. package/SpeedDialIcon/speedDialIconClasses.d.ts +18 -18
  234. package/Stack/Stack.d.ts +2 -2
  235. package/Step/Step.d.ts +2 -2
  236. package/Step/StepContext.d.ts +20 -20
  237. package/Step/stepClasses.d.ts +16 -16
  238. package/StepButton/StepButton.d.ts +3 -3
  239. package/StepButton/stepButtonClasses.d.ts +14 -14
  240. package/StepConnector/StepConnector.d.ts +2 -2
  241. package/StepConnector/stepConnectorClasses.d.ts +26 -26
  242. package/StepContent/StepContent.d.ts +3 -3
  243. package/StepContent/StepContent.js +1 -1
  244. package/StepContent/stepContentClasses.d.ts +12 -12
  245. package/StepIcon/StepIcon.d.ts +2 -2
  246. package/StepIcon/stepIconClasses.d.ts +16 -16
  247. package/StepLabel/StepLabel.d.ts +4 -4
  248. package/StepLabel/StepLabel.js +2 -2
  249. package/StepLabel/stepLabelClasses.d.ts +28 -28
  250. package/Stepper/Stepper.d.ts +2 -2
  251. package/Stepper/stepperClasses.d.ts +14 -14
  252. package/SvgIcon/SvgIcon.d.ts +4 -4
  253. package/SvgIcon/SvgIcon.js +1 -1
  254. package/SvgIcon/svgIconClasses.d.ts +24 -24
  255. package/SwipeableDrawer/SwipeableDrawer.d.ts +3 -3
  256. package/Switch/Switch.d.ts +5 -5
  257. package/Switch/Switch.js +1 -1
  258. package/Switch/switchClasses.d.ts +32 -32
  259. package/Tab/Tab.d.ts +3 -3
  260. package/Tab/tabClasses.d.ts +26 -26
  261. package/TabScrollButton/TabScrollButton.d.ts +2 -2
  262. package/TabScrollButton/tabScrollButtonClasses.d.ts +12 -12
  263. package/Table/Table.d.ts +2 -2
  264. package/Table/tableClasses.d.ts +10 -10
  265. package/TableBody/TableBody.d.ts +2 -2
  266. package/TableBody/tableBodyClasses.d.ts +8 -8
  267. package/TableCell/TableCell.d.ts +2 -2
  268. package/TableCell/tableCellClasses.d.ts +32 -32
  269. package/TableContainer/TableContainer.d.ts +2 -2
  270. package/TableContainer/tableContainerClasses.d.ts +8 -8
  271. package/TableFooter/TableFooter.d.ts +2 -2
  272. package/TableFooter/tableFooterClasses.d.ts +8 -8
  273. package/TableHead/TableHead.d.ts +2 -2
  274. package/TableHead/tableHeadClasses.d.ts +8 -8
  275. package/TablePagination/TablePagination.d.ts +9 -9
  276. package/TablePagination/TablePagination.js +6 -6
  277. package/TablePagination/TablePaginationActions.d.ts +1 -1
  278. package/TablePagination/TablePaginationActions.js +3 -3
  279. package/TablePagination/tablePaginationClasses.d.ts +28 -28
  280. package/TableRow/TableRow.d.ts +2 -2
  281. package/TableRow/tableRowClasses.d.ts +16 -16
  282. package/TableSortLabel/TableSortLabel.d.ts +3 -3
  283. package/TableSortLabel/tableSortLabelClasses.d.ts +16 -16
  284. package/Tabs/Tabs.d.ts +3 -3
  285. package/Tabs/Tabs.js +1 -1
  286. package/Tabs/tabsClasses.d.ts +32 -32
  287. package/TextField/TextField.d.ts +21 -22
  288. package/TextField/TextField.js +13 -13
  289. package/TextField/textFieldClasses.d.ts +8 -8
  290. package/ToggleButton/ToggleButton.d.ts +4 -4
  291. package/ToggleButton/ToggleButton.js +1 -1
  292. package/ToggleButton/toggleButtonClasses.d.ts +24 -24
  293. package/ToggleButtonGroup/ToggleButtonGroup.d.ts +3 -3
  294. package/ToggleButtonGroup/ToggleButtonGroup.js +1 -1
  295. package/ToggleButtonGroup/toggleButtonGroupClasses.d.ts +18 -18
  296. package/Toolbar/Toolbar.d.ts +2 -2
  297. package/Toolbar/toolbarClasses.d.ts +14 -14
  298. package/Tooltip/Tooltip.d.ts +4 -4
  299. package/Tooltip/Tooltip.js +2 -2
  300. package/Tooltip/tooltipClasses.d.ts +30 -30
  301. package/Typography/Typography.d.ts +3 -3
  302. package/Typography/typographyClasses.d.ts +50 -50
  303. package/Zoom/Zoom.d.ts +3 -3
  304. package/Zoom/Zoom.js +1 -1
  305. package/className/index.d.ts +8 -8
  306. package/darkScrollbar/index.d.ts +28 -28
  307. package/index.js +1 -1
  308. package/internal/switchBaseClasses.d.ts +12 -12
  309. package/legacy/Accordion/Accordion.js +1 -1
  310. package/legacy/Alert/Alert.js +2 -2
  311. package/legacy/AppBar/AppBar.js +1 -1
  312. package/legacy/Autocomplete/Autocomplete.js +8 -6
  313. package/legacy/Badge/Badge.js +49 -24
  314. package/legacy/Badge/badgeClasses.js +8 -0
  315. package/legacy/Badge/index.js +2 -1
  316. package/legacy/BottomNavigation/BottomNavigation.js +0 -0
  317. package/legacy/Breadcrumbs/Breadcrumbs.js +1 -1
  318. package/legacy/Button/Button.js +31 -30
  319. package/legacy/ButtonGroup/ButtonGroup.js +1 -1
  320. package/legacy/Checkbox/Checkbox.js +1 -1
  321. package/legacy/Chip/Chip.js +1 -1
  322. package/legacy/CircularProgress/CircularProgress.js +1 -1
  323. package/legacy/Collapse/Collapse.js +1 -1
  324. package/legacy/Dialog/Dialog.js +3 -2
  325. package/legacy/Drawer/Drawer.js +4 -4
  326. package/legacy/Fab/Fab.js +1 -1
  327. package/legacy/Fade/Fade.js +1 -1
  328. package/legacy/FilledInput/FilledInput.js +5 -3
  329. package/legacy/FormControl/FormControl.js +2 -2
  330. package/legacy/FormLabel/FormLabel.js +1 -1
  331. package/legacy/Grow/Grow.js +8 -8
  332. package/legacy/Icon/Icon.js +1 -1
  333. package/legacy/IconButton/IconButton.js +2 -2
  334. package/legacy/Input/Input.js +5 -3
  335. package/legacy/InputBase/InputBase.js +2 -2
  336. package/legacy/InputLabel/InputLabel.js +1 -1
  337. package/legacy/LinearProgress/LinearProgress.js +1 -1
  338. package/legacy/Link/Link.js +16 -5
  339. package/legacy/ListItem/ListItem.js +4 -4
  340. package/legacy/ListItemButton/ListItemButton.js +1 -0
  341. package/legacy/Menu/Menu.js +2 -2
  342. package/legacy/MenuList/MenuList.js +1 -1
  343. package/legacy/Modal/Modal.js +7 -6
  344. package/legacy/OutlinedInput/OutlinedInput.js +2 -2
  345. package/legacy/Pagination/Pagination.js +2 -2
  346. package/legacy/PaginationItem/PaginationItem.js +1 -1
  347. package/legacy/Popover/Popover.js +2 -2
  348. package/legacy/Popper/Popper.js +4 -4
  349. package/legacy/Radio/Radio.js +1 -1
  350. package/legacy/Rating/Rating.js +1 -1
  351. package/legacy/Select/Select.js +2 -2
  352. package/legacy/Select/SelectInput.js +26 -3
  353. package/legacy/Slide/Slide.js +1 -1
  354. package/legacy/Slider/Slider.js +1 -1
  355. package/legacy/Snackbar/Snackbar.js +2 -2
  356. package/legacy/SpeedDial/SpeedDial.js +2 -2
  357. package/legacy/SpeedDialAction/SpeedDialAction.js +2 -2
  358. package/legacy/StepContent/StepContent.js +1 -1
  359. package/legacy/StepLabel/StepLabel.js +2 -2
  360. package/legacy/SvgIcon/SvgIcon.js +1 -1
  361. package/legacy/Switch/Switch.js +1 -1
  362. package/legacy/TablePagination/TablePagination.js +6 -6
  363. package/legacy/TablePagination/TablePaginationActions.js +3 -3
  364. package/legacy/Tabs/Tabs.js +1 -1
  365. package/legacy/TextField/TextField.js +13 -13
  366. package/legacy/ToggleButton/ToggleButton.js +1 -1
  367. package/legacy/ToggleButtonGroup/ToggleButtonGroup.js +1 -1
  368. package/legacy/Tooltip/Tooltip.js +2 -2
  369. package/legacy/Zoom/Zoom.js +1 -1
  370. package/legacy/index.js +1 -1
  371. package/legacy/locale/index.js +115 -111
  372. package/legacy/styles/CssVarsProvider.js +31 -0
  373. package/legacy/styles/experimental_extendTheme.js +96 -0
  374. package/legacy/styles/index.js +3 -1
  375. package/locale/index.d.ts +71 -71
  376. package/locale/index.js +6 -3
  377. package/modern/Accordion/Accordion.js +1 -1
  378. package/modern/Alert/Alert.js +2 -2
  379. package/modern/AppBar/AppBar.js +1 -1
  380. package/modern/Autocomplete/Autocomplete.js +8 -6
  381. package/modern/Badge/Badge.js +45 -21
  382. package/modern/Badge/badgeClasses.js +8 -0
  383. package/modern/Badge/index.js +2 -1
  384. package/modern/BottomNavigation/BottomNavigation.js +0 -0
  385. package/modern/Breadcrumbs/Breadcrumbs.js +1 -1
  386. package/modern/Button/Button.js +30 -29
  387. package/modern/ButtonGroup/ButtonGroup.js +1 -1
  388. package/modern/Checkbox/Checkbox.js +1 -1
  389. package/modern/Chip/Chip.js +1 -1
  390. package/modern/CircularProgress/CircularProgress.js +1 -1
  391. package/modern/Collapse/Collapse.js +1 -1
  392. package/modern/Dialog/Dialog.js +3 -2
  393. package/modern/Drawer/Drawer.js +4 -4
  394. package/modern/Fab/Fab.js +1 -1
  395. package/modern/Fade/Fade.js +1 -1
  396. package/modern/FilledInput/FilledInput.js +5 -3
  397. package/modern/FormControl/FormControl.js +2 -2
  398. package/modern/FormLabel/FormLabel.js +1 -1
  399. package/modern/Grow/Grow.js +8 -8
  400. package/modern/Icon/Icon.js +1 -1
  401. package/modern/IconButton/IconButton.js +2 -2
  402. package/modern/Input/Input.js +5 -3
  403. package/modern/InputBase/InputBase.js +2 -2
  404. package/modern/InputLabel/InputLabel.js +1 -1
  405. package/modern/LinearProgress/LinearProgress.js +1 -1
  406. package/modern/Link/Link.js +15 -6
  407. package/modern/ListItem/ListItem.js +4 -4
  408. package/modern/ListItemButton/ListItemButton.js +1 -0
  409. package/modern/Menu/Menu.js +2 -2
  410. package/modern/MenuList/MenuList.js +1 -1
  411. package/modern/Modal/Modal.js +7 -6
  412. package/modern/OutlinedInput/OutlinedInput.js +2 -2
  413. package/modern/Pagination/Pagination.js +2 -2
  414. package/modern/PaginationItem/PaginationItem.js +1 -1
  415. package/modern/Popover/Popover.js +2 -2
  416. package/modern/Popper/Popper.js +4 -4
  417. package/modern/Radio/Radio.js +1 -1
  418. package/modern/Rating/Rating.js +1 -1
  419. package/modern/Select/Select.js +2 -2
  420. package/modern/Select/SelectInput.js +24 -3
  421. package/modern/Slide/Slide.js +1 -1
  422. package/modern/Slider/Slider.js +1 -1
  423. package/modern/Snackbar/Snackbar.js +2 -2
  424. package/modern/SpeedDial/SpeedDial.js +2 -2
  425. package/modern/SpeedDialAction/SpeedDialAction.js +2 -2
  426. package/modern/StepContent/StepContent.js +1 -1
  427. package/modern/StepLabel/StepLabel.js +2 -2
  428. package/modern/SvgIcon/SvgIcon.js +1 -1
  429. package/modern/Switch/Switch.js +1 -1
  430. package/modern/TablePagination/TablePagination.js +6 -6
  431. package/modern/TablePagination/TablePaginationActions.js +3 -3
  432. package/modern/Tabs/Tabs.js +1 -1
  433. package/modern/TextField/TextField.js +13 -13
  434. package/modern/ToggleButton/ToggleButton.js +1 -1
  435. package/modern/ToggleButtonGroup/ToggleButtonGroup.js +1 -1
  436. package/modern/Tooltip/Tooltip.js +2 -2
  437. package/modern/Zoom/Zoom.js +1 -1
  438. package/modern/index.js +1 -1
  439. package/modern/locale/index.js +6 -3
  440. package/modern/styles/CssVarsProvider.js +28 -0
  441. package/modern/styles/experimental_extendTheme.js +89 -0
  442. package/modern/styles/index.js +3 -1
  443. package/node/Accordion/Accordion.js +1 -1
  444. package/node/Alert/Alert.js +2 -2
  445. package/node/AppBar/AppBar.js +1 -1
  446. package/node/Autocomplete/Autocomplete.js +8 -6
  447. package/node/Badge/Badge.js +58 -34
  448. package/node/Badge/badgeClasses.js +22 -0
  449. package/node/Badge/index.js +17 -5
  450. package/node/BottomNavigation/BottomNavigation.js +0 -0
  451. package/node/Breadcrumbs/Breadcrumbs.js +1 -1
  452. package/node/Button/Button.js +102 -97
  453. package/node/ButtonGroup/ButtonGroup.js +1 -1
  454. package/node/Checkbox/Checkbox.js +1 -1
  455. package/node/Chip/Chip.js +1 -1
  456. package/node/CircularProgress/CircularProgress.js +1 -1
  457. package/node/Collapse/Collapse.js +1 -1
  458. package/node/Dialog/Dialog.js +3 -2
  459. package/node/Drawer/Drawer.js +4 -4
  460. package/node/Fab/Fab.js +1 -1
  461. package/node/Fade/Fade.js +1 -1
  462. package/node/FilledInput/FilledInput.js +5 -3
  463. package/node/FormControl/FormControl.js +2 -2
  464. package/node/FormLabel/FormLabel.js +1 -1
  465. package/node/Grow/Grow.js +8 -8
  466. package/node/Icon/Icon.js +1 -1
  467. package/node/IconButton/IconButton.js +2 -2
  468. package/node/Input/Input.js +5 -3
  469. package/node/InputBase/InputBase.js +2 -2
  470. package/node/InputLabel/InputLabel.js +1 -1
  471. package/node/LinearProgress/LinearProgress.js +1 -1
  472. package/node/Link/Link.js +16 -6
  473. package/node/ListItem/ListItem.js +4 -4
  474. package/node/ListItemButton/ListItemButton.js +1 -0
  475. package/node/Menu/Menu.js +2 -2
  476. package/node/MenuList/MenuList.js +1 -1
  477. package/node/Modal/Modal.js +7 -6
  478. package/node/OutlinedInput/OutlinedInput.js +2 -2
  479. package/node/Pagination/Pagination.js +2 -2
  480. package/node/PaginationItem/PaginationItem.js +1 -1
  481. package/node/Popover/Popover.js +2 -2
  482. package/node/Popper/Popper.js +4 -4
  483. package/node/Radio/Radio.js +1 -1
  484. package/node/Rating/Rating.js +1 -1
  485. package/node/Select/Select.js +2 -2
  486. package/node/Select/SelectInput.js +24 -3
  487. package/node/Slide/Slide.js +1 -1
  488. package/node/Slider/Slider.js +1 -1
  489. package/node/Snackbar/Snackbar.js +2 -2
  490. package/node/SpeedDial/SpeedDial.js +2 -2
  491. package/node/SpeedDialAction/SpeedDialAction.js +2 -2
  492. package/node/StepContent/StepContent.js +1 -1
  493. package/node/StepLabel/StepLabel.js +2 -2
  494. package/node/SvgIcon/SvgIcon.js +1 -1
  495. package/node/Switch/Switch.js +1 -1
  496. package/node/TablePagination/TablePagination.js +6 -6
  497. package/node/TablePagination/TablePaginationActions.js +3 -3
  498. package/node/Tabs/Tabs.js +1 -1
  499. package/node/TextField/TextField.js +13 -13
  500. package/node/ToggleButton/ToggleButton.js +1 -1
  501. package/node/ToggleButtonGroup/ToggleButtonGroup.js +1 -1
  502. package/node/Tooltip/Tooltip.js +2 -2
  503. package/node/Zoom/Zoom.js +1 -1
  504. package/node/index.js +1 -1
  505. package/node/locale/index.js +6 -3
  506. package/node/styles/CssVarsProvider.js +41 -0
  507. package/node/styles/experimental_extendTheme.js +105 -0
  508. package/node/styles/index.js +58 -0
  509. package/package.json +9 -9
  510. package/styles/CssVarsProvider.d.ts +28 -0
  511. package/styles/CssVarsProvider.js +28 -0
  512. package/styles/ThemeProvider.d.ts +1 -1
  513. package/styles/createPalette.d.ts +26 -0
  514. package/styles/createTheme.d.ts +1 -1
  515. package/styles/experimental_extendTheme.d.ts +90 -0
  516. package/styles/experimental_extendTheme.js +91 -0
  517. package/styles/index.d.ts +5 -0
  518. package/styles/index.js +3 -1
  519. package/transitions/index.d.ts +1 -1
  520. package/transitions/transition.d.ts +13 -13
  521. package/transitions/utils.d.ts +23 -23
  522. package/umd/material-ui.development.js +1297 -438
  523. package/umd/material-ui.production.min.js +21 -21
  524. package/useMediaQuery/useMediaQuery.d.ts +31 -31
  525. package/useTouchRipple/index.d.ts +1 -1
  526. package/useTouchRipple/useTouchRipple.d.ts +28 -28
  527. package/utils/getScrollbarSize.d.ts +2 -2
  528. package/utils/ownerDocument.d.ts +2 -2
  529. package/utils/ownerWindow.d.ts +2 -2
  530. package/utils/setRef.d.ts +2 -2
@@ -1,54 +1,54 @@
1
- export interface AutocompleteClasses {
2
- /** Styles applied to the root element. */
3
- root: string;
4
- /** Styles applied to the root element if `fullWidth={true}`. */
5
- fullWidth: string;
6
- /** State class applied to the root element if focused. */
7
- focused: string;
8
- /** Styles applied to the tag elements, e.g. the chips. */
9
- tag: string;
10
- /** Styles applied to the tag elements, e.g. the chips if `size="small"`. */
11
- tagSizeSmall: string;
12
- /** Styles applied to the tag elements, e.g. the chips if `size="medium"`. */
13
- tagSizeMedium: string;
14
- /** Styles applied when the popup icon is rendered. */
15
- hasPopupIcon: string;
16
- /** Styles applied when the clear icon is rendered. */
17
- hasClearIcon: string;
18
- /** Styles applied to the Input element. */
19
- inputRoot: string;
20
- /** Styles applied to the input element. */
21
- input: string;
22
- /** Styles applied to the input element if tag focused. */
23
- inputFocused: string;
24
- /** Styles applied to the endAdornment element. */
25
- endAdornment: string;
26
- /** Styles applied to the clear indicator. */
27
- clearIndicator: string;
28
- /** Styles applied to the popup indicator. */
29
- popupIndicator: string;
30
- /** Styles applied to the popup indicator if the popup is open. */
31
- popupIndicatorOpen: string;
32
- /** Styles applied to the popper element. */
33
- popper: string;
34
- /** Styles applied to the popper element if `disablePortal={true}`. */
35
- popperDisablePortal: string;
36
- /** Styles applied to the Paper component. */
37
- paper: string;
38
- /** Styles applied to the listbox component. */
39
- listbox: string;
40
- /** Styles applied to the loading wrapper. */
41
- loading: string;
42
- /** Styles applied to the no option wrapper. */
43
- noOptions: string;
44
- /** Styles applied to the option elements. */
45
- option: string;
46
- /** Styles applied to the group's label elements. */
47
- groupLabel: string;
48
- /** Styles applied to the group's ul elements. */
49
- groupUl: string;
50
- }
51
- export declare type AutocompleteClassKey = keyof AutocompleteClasses;
52
- export declare function getAutocompleteUtilityClass(slot: string): string;
53
- declare const autocompleteClasses: AutocompleteClasses;
54
- export default autocompleteClasses;
1
+ export interface AutocompleteClasses {
2
+ /** Styles applied to the root element. */
3
+ root: string;
4
+ /** Styles applied to the root element if `fullWidth={true}`. */
5
+ fullWidth: string;
6
+ /** State class applied to the root element if focused. */
7
+ focused: string;
8
+ /** Styles applied to the tag elements, e.g. the chips. */
9
+ tag: string;
10
+ /** Styles applied to the tag elements, e.g. the chips if `size="small"`. */
11
+ tagSizeSmall: string;
12
+ /** Styles applied to the tag elements, e.g. the chips if `size="medium"`. */
13
+ tagSizeMedium: string;
14
+ /** Styles applied when the popup icon is rendered. */
15
+ hasPopupIcon: string;
16
+ /** Styles applied when the clear icon is rendered. */
17
+ hasClearIcon: string;
18
+ /** Styles applied to the Input element. */
19
+ inputRoot: string;
20
+ /** Styles applied to the input element. */
21
+ input: string;
22
+ /** Styles applied to the input element if tag focused. */
23
+ inputFocused: string;
24
+ /** Styles applied to the endAdornment element. */
25
+ endAdornment: string;
26
+ /** Styles applied to the clear indicator. */
27
+ clearIndicator: string;
28
+ /** Styles applied to the popup indicator. */
29
+ popupIndicator: string;
30
+ /** Styles applied to the popup indicator if the popup is open. */
31
+ popupIndicatorOpen: string;
32
+ /** Styles applied to the popper element. */
33
+ popper: string;
34
+ /** Styles applied to the popper element if `disablePortal={true}`. */
35
+ popperDisablePortal: string;
36
+ /** Styles applied to the Paper component. */
37
+ paper: string;
38
+ /** Styles applied to the listbox component. */
39
+ listbox: string;
40
+ /** Styles applied to the loading wrapper. */
41
+ loading: string;
42
+ /** Styles applied to the no option wrapper. */
43
+ noOptions: string;
44
+ /** Styles applied to the option elements. */
45
+ option: string;
46
+ /** Styles applied to the group's label elements. */
47
+ groupLabel: string;
48
+ /** Styles applied to the group's ul elements. */
49
+ groupUl: string;
50
+ }
51
+ export declare type AutocompleteClassKey = keyof AutocompleteClasses;
52
+ export declare function getAutocompleteUtilityClass(slot: string): string;
53
+ declare const autocompleteClasses: AutocompleteClasses;
54
+ export default autocompleteClasses;
@@ -63,11 +63,11 @@ export interface AvatarTypeMap<P = {}, D extends React.ElementType = 'div'> {
63
63
  *
64
64
  * Demos:
65
65
  *
66
- * - [Avatars](https://mui.com/components/avatars/)
66
+ * - [Avatars](https://mui.com/material-ui/react-avatar/)
67
67
  *
68
68
  * API:
69
69
  *
70
- * - [Avatar API](https://mui.com/api/avatar/)
70
+ * - [Avatar API](https://mui.com/material-ui/api/avatar/)
71
71
  */
72
72
  declare const Avatar: OverridableComponent<AvatarTypeMap>;
73
73
 
@@ -1,20 +1,20 @@
1
- export interface AvatarClasses {
2
- /** Styles applied to the root element. */
3
- root: string;
4
- /** Styles applied to the root element if not `src` or `srcSet`. */
5
- colorDefault: string;
6
- /** Styles applied to the root element if `variant="circular"`. */
7
- circular: string;
8
- /** Styles applied to the root element if `variant="rounded"`. */
9
- rounded: string;
10
- /** Styles applied to the root element if `variant="square"`. */
11
- square: string;
12
- /** Styles applied to the img element if either `src` or `srcSet` is defined. */
13
- img: string;
14
- /** Styles applied to the fallback icon */
15
- fallback: string;
16
- }
17
- export declare type AvatarClassKey = keyof AvatarClasses;
18
- export declare function getAvatarUtilityClass(slot: string): string;
19
- declare const avatarClasses: AvatarClasses;
20
- export default avatarClasses;
1
+ export interface AvatarClasses {
2
+ /** Styles applied to the root element. */
3
+ root: string;
4
+ /** Styles applied to the root element if not `src` or `srcSet`. */
5
+ colorDefault: string;
6
+ /** Styles applied to the root element if `variant="circular"`. */
7
+ circular: string;
8
+ /** Styles applied to the root element if `variant="rounded"`. */
9
+ rounded: string;
10
+ /** Styles applied to the root element if `variant="square"`. */
11
+ square: string;
12
+ /** Styles applied to the img element if either `src` or `srcSet` is defined. */
13
+ img: string;
14
+ /** Styles applied to the fallback icon */
15
+ fallback: string;
16
+ }
17
+ export declare type AvatarClassKey = keyof AvatarClasses;
18
+ export declare function getAvatarUtilityClass(slot: string): string;
19
+ declare const avatarClasses: AvatarClasses;
20
+ export default avatarClasses;
@@ -58,10 +58,10 @@ export interface AvatarGroupProps extends StandardProps<React.HTMLAttributes<HTM
58
58
  *
59
59
  * Demos:
60
60
  *
61
- * - [Avatars](https://mui.com/components/avatars/)
61
+ * - [Avatars](https://mui.com/material-ui/react-avatar/)
62
62
  *
63
63
  * API:
64
64
  *
65
- * - [AvatarGroup API](https://mui.com/api/avatar-group/)
65
+ * - [AvatarGroup API](https://mui.com/material-ui/api/avatar-group/)
66
66
  */
67
67
  export default function AvatarGroup(props: AvatarGroupProps): JSX.Element;
@@ -1,10 +1,10 @@
1
- export interface AvatarGroupClasses {
2
- /** Styles applied to the root element. */
3
- root: string;
4
- /** Styles applied to the avatar elements. */
5
- avatar: string;
6
- }
7
- export declare type AvatarGroupClassKey = keyof AvatarGroupClasses;
8
- export declare function getAvatarGroupUtilityClass(slot: string): string;
9
- declare const avatarGroupClasses: AvatarGroupClasses;
10
- export default avatarGroupClasses;
1
+ export interface AvatarGroupClasses {
2
+ /** Styles applied to the root element. */
3
+ root: string;
4
+ /** Styles applied to the avatar elements. */
5
+ avatar: string;
6
+ }
7
+ export declare type AvatarGroupClassKey = keyof AvatarGroupClasses;
8
+ export declare function getAvatarGroupUtilityClass(slot: string): string;
9
+ declare const avatarGroupClasses: AvatarGroupClasses;
10
+ export default avatarGroupClasses;
@@ -65,12 +65,12 @@ export const BackdropRoot: React.FC<BackdropRootProps>;
65
65
  *
66
66
  * Demos:
67
67
  *
68
- * - [Backdrop](https://mui.com/components/backdrop/)
68
+ * - [Backdrop](https://mui.com/material-ui/react-backdrop/)
69
69
  *
70
70
  * API:
71
71
  *
72
- * - [Backdrop API](https://mui.com/api/backdrop/)
73
- * - inherits [Fade API](https://mui.com/api/fade/)
72
+ * - [Backdrop API](https://mui.com/material-ui/api/backdrop/)
73
+ * - inherits [Fade API](https://mui.com/material-ui/api/fade/)
74
74
  */
75
75
  declare const Backdrop: OverridableComponent<BackdropTypeMap>;
76
76
 
@@ -1,10 +1,10 @@
1
- export interface BackdropClasses {
2
- /** Styles applied to the root element. */
3
- root: string;
4
- /** Styles applied to the root element if `invisible={true}`. */
5
- invisible: string;
6
- }
7
- export declare type BackdropClassKey = keyof BackdropClasses;
8
- export declare function getBackdropUtilityClass(slot: string): string;
9
- declare const backdropClasses: BackdropClasses;
10
- export default backdropClasses;
1
+ export interface BackdropClasses {
2
+ /** Styles applied to the root element. */
3
+ root: string;
4
+ /** Styles applied to the root element if `invisible={true}`. */
5
+ invisible: string;
6
+ }
7
+ export declare type BackdropClassKey = keyof BackdropClasses;
8
+ export declare function getBackdropUtilityClass(slot: string): string;
9
+ declare const backdropClasses: BackdropClasses;
10
+ export default backdropClasses;
package/Badge/Badge.d.ts CHANGED
@@ -1,23 +1,37 @@
1
1
  import * as React from 'react';
2
2
  import { SxProps } from '@mui/system';
3
3
  import { OverridableStringUnion } from '@mui/types';
4
- import { ExtendBadgeUnstyledTypeMap, BadgeUnstyledTypeMap } from '@mui/base/BadgeUnstyled';
4
+ import { ExtendBadgeUnstyledTypeMap } from '@mui/base/BadgeUnstyled';
5
5
  import { Theme } from '../styles';
6
6
  import { OverridableComponent, OverrideProps } from '../OverridableComponent';
7
+ import { BadgeClasses } from './badgeClasses';
7
8
 
8
9
  export interface BadgePropsVariantOverrides {}
9
10
 
10
11
  export interface BadgePropsColorOverrides {}
11
12
 
13
+ export interface BadgeOrigin {
14
+ vertical: 'top' | 'bottom';
15
+ horizontal: 'left' | 'right';
16
+ }
17
+
12
18
  export type BadgeTypeMap<
13
19
  D extends React.ElementType = 'span',
14
20
  P = {},
15
21
  > = ExtendBadgeUnstyledTypeMap<{
16
22
  props: P & {
23
+ /**
24
+ * The anchor of the badge.
25
+ * @default {
26
+ * vertical: 'top',
27
+ * horizontal: 'right',
28
+ * }
29
+ */
30
+ anchorOrigin?: BadgeOrigin;
17
31
  /**
18
32
  * Override or extend the styles applied to the component.
19
33
  */
20
- classes?: BadgeUnstyledTypeMap['props']['classes'] & {
34
+ classes?: Partial<BadgeClasses> & {
21
35
  /** Styles applied to the badge `span` element if `color="primary"`. */
22
36
  colorPrimary?: string;
23
37
  /** Styles applied to the badge `span` element if `color="secondary"`. */
@@ -51,10 +65,14 @@ export type BadgeTypeMap<
51
65
  /** Class name applied to the badge `span` element if `overlap="circular"`. */
52
66
  overlapCircular?: string;
53
67
  };
68
+ /**
69
+ * @ignore
70
+ */
71
+ className?: string;
54
72
  /**
55
73
  * The color of the component.
56
74
  * It supports both default and custom theme colors, which can be added as shown in the
57
- * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
75
+ * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
58
76
  * @default 'default'
59
77
  */
60
78
  color?: OverridableStringUnion<
@@ -85,25 +103,20 @@ type BadgeBadgeProps = NonNullable<BadgeTypeMap['props']['componentsProps']>['ba
85
103
  export const BadgeRoot: React.FC<BadgeRootProps>;
86
104
  export const BadgeMark: React.FC<BadgeBadgeProps>;
87
105
 
88
- export type BadgeClassKey = keyof NonNullable<BadgeTypeMap['props']['classes']>;
89
106
  /**
90
107
  *
91
108
  * Demos:
92
109
  *
93
- * - [Avatars](https://mui.com/components/avatars/)
94
- * - [Badges](https://mui.com/components/badges/)
110
+ * - [Avatars](https://mui.com/material-ui/react-avatar/)
111
+ * - [Badges](https://mui.com/material-ui/react-badge/)
95
112
  *
96
113
  * API:
97
114
  *
98
- * - [Badge API](https://mui.com/api/badge/)
99
- * - inherits [BadgeUnstyled API](https://mui.com/api/badge-unstyled/)
115
+ * - [Badge API](https://mui.com/material-ui/api/badge/)
116
+ * - inherits [BadgeUnstyled API](https://mui.com/base/api/badge-unstyled/)
100
117
  */
101
118
  declare const Badge: OverridableComponent<BadgeTypeMap>;
102
119
 
103
- export type BadgeClasses = Record<BadgeClassKey, string>;
104
-
105
- export const badgeClasses: BadgeClasses;
106
-
107
120
  export type BadgeProps<
108
121
  D extends React.ElementType = BadgeTypeMap['defaultComponent'],
109
122
  P = {},
package/Badge/Badge.js CHANGED
@@ -1,32 +1,35 @@
1
1
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
2
2
  import _extends from "@babel/runtime/helpers/esm/extends";
3
- const _excluded = ["anchorOrigin", "component", "components", "componentsProps", "overlap", "color", "invisible", "badgeContent", "showZero", "variant"];
3
+ const _excluded = ["anchorOrigin", "className", "component", "components", "componentsProps", "overlap", "color", "invisible", "max", "badgeContent", "showZero", "variant"];
4
4
  import * as React from 'react';
5
5
  import PropTypes from 'prop-types';
6
6
  import clsx from 'clsx';
7
7
  import { usePreviousProps } from '@mui/utils';
8
- import { generateUtilityClasses } from '@mui/base';
9
- import BadgeUnstyled, { badgeUnstyledClasses, getBadgeUtilityClass } from '@mui/base/BadgeUnstyled';
8
+ import composeClasses from '@mui/base/composeClasses';
9
+ import BadgeUnstyled from '@mui/base/BadgeUnstyled';
10
10
  import styled from '../styles/styled';
11
11
  import useThemeProps from '../styles/useThemeProps';
12
12
  import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps';
13
13
  import capitalize from '../utils/capitalize';
14
+ import badgeClasses, { getBadgeUtilityClass } from './badgeClasses';
14
15
  import { jsx as _jsx } from "react/jsx-runtime";
15
- export const badgeClasses = _extends({}, badgeUnstyledClasses, generateUtilityClasses('MuiBadge', ['colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'overlapRectangular', 'overlapCircular', // TODO: v6 remove the overlap value from these class keys
16
- 'anchorOriginTopLeftCircular', 'anchorOriginTopLeftRectangular', 'anchorOriginTopRightCircular', 'anchorOriginTopRightRectangular', 'anchorOriginBottomLeftCircular', 'anchorOriginBottomLeftRectangular', 'anchorOriginBottomRightCircular', 'anchorOriginBottomRightRectangular']));
17
16
  const RADIUS_STANDARD = 10;
18
17
  const RADIUS_DOT = 4;
19
18
 
20
- const extendUtilityClasses = ownerState => {
19
+ const useUtilityClasses = ownerState => {
21
20
  const {
22
21
  color,
23
22
  anchorOrigin,
23
+ invisible,
24
24
  overlap,
25
+ variant,
25
26
  classes = {}
26
27
  } = ownerState;
27
- return _extends({}, classes, {
28
- badge: clsx(classes.badge, getBadgeUtilityClass(`anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}${capitalize(overlap)}`), getBadgeUtilityClass(`overlap${capitalize(overlap)}`), color !== 'default' && [getBadgeUtilityClass(`color${capitalize(color)}`), classes[`color${capitalize(color)}`]])
29
- });
28
+ const slots = {
29
+ root: ['root'],
30
+ badge: ['badge', variant, invisible && 'invisible', `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}`, `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}${capitalize(overlap)}`, `overlap${capitalize(overlap)}`, color !== 'default' && `color${capitalize(color)}`]
31
+ };
32
+ return composeClasses(slots, getBadgeUtilityClass, classes);
30
33
  };
31
34
 
32
35
  const BadgeRoot = styled('span', {
@@ -154,7 +157,7 @@ const BadgeBadge = styled('span', {
154
157
  })
155
158
  }));
156
159
  const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
157
- var _componentsProps$root, _componentsProps$badg;
160
+ var _componentsProps$root, _componentsProps$root2, _componentsProps$badg, _componentsProps$badg2;
158
161
 
159
162
  const props = useThemeProps({
160
163
  props: inProps,
@@ -166,12 +169,14 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
166
169
  vertical: 'top',
167
170
  horizontal: 'right'
168
171
  },
172
+ className,
169
173
  component = 'span',
170
174
  components = {},
171
175
  componentsProps = {},
172
176
  overlap: overlapProp = 'rectangular',
173
177
  color: colorProp = 'default',
174
178
  invisible: invisibleProp = false,
179
+ max,
175
180
  badgeContent: badgeContentProp,
176
181
  showZero = false,
177
182
  variant: variantProp = 'standard'
@@ -181,7 +186,8 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
181
186
  const prevProps = usePreviousProps({
182
187
  anchorOrigin: anchorOriginProp,
183
188
  color: colorProp,
184
- overlap: overlapProp
189
+ overlap: overlapProp,
190
+ variant: variantProp
185
191
  });
186
192
  let invisible = invisibleProp;
187
193
 
@@ -192,44 +198,57 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
192
198
  const {
193
199
  color = colorProp,
194
200
  overlap = overlapProp,
195
- anchorOrigin = anchorOriginProp
201
+ anchorOrigin = anchorOriginProp,
202
+ variant = variantProp
196
203
  } = invisible ? prevProps : props;
197
204
 
198
205
  const ownerState = _extends({}, props, {
199
206
  anchorOrigin,
200
207
  invisible,
201
208
  color,
202
- overlap
209
+ overlap,
210
+ variant
203
211
  });
204
212
 
205
- const classes = extendUtilityClasses(ownerState);
213
+ const classes = useUtilityClasses(ownerState);
214
+ let displayValue;
215
+
216
+ if (variant !== 'dot') {
217
+ displayValue = badgeContentProp && Number(badgeContentProp) > max ? `${max}+` : badgeContentProp;
218
+ }
219
+
206
220
  return /*#__PURE__*/_jsx(BadgeUnstyled, _extends({
207
- anchorOrigin: anchorOrigin,
208
221
  invisible: invisibleProp,
209
- badgeContent: badgeContentProp,
222
+ badgeContent: displayValue,
210
223
  showZero: showZero,
211
- variant: variantProp
224
+ max: max
212
225
  }, other, {
213
226
  components: _extends({
214
227
  Root: BadgeRoot,
215
228
  Badge: BadgeBadge
216
229
  }, components),
230
+ className: clsx(className, classes.root, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.className),
217
231
  componentsProps: {
218
232
  root: _extends({}, componentsProps.root, shouldSpreadAdditionalProps(components.Root) && {
219
233
  as: component,
220
- ownerState: _extends({}, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState, {
234
+ ownerState: _extends({}, (_componentsProps$root2 = componentsProps.root) == null ? void 0 : _componentsProps$root2.ownerState, {
235
+ anchorOrigin,
221
236
  color,
222
- overlap
237
+ overlap,
238
+ variant
223
239
  })
224
240
  }),
225
- badge: _extends({}, componentsProps.badge, shouldSpreadAdditionalProps(components.Badge) && {
226
- ownerState: _extends({}, (_componentsProps$badg = componentsProps.badge) == null ? void 0 : _componentsProps$badg.ownerState, {
241
+ badge: _extends({}, componentsProps.badge, {
242
+ className: clsx(classes.badge, (_componentsProps$badg = componentsProps.badge) == null ? void 0 : _componentsProps$badg.className)
243
+ }, shouldSpreadAdditionalProps(components.Badge) && {
244
+ ownerState: _extends({}, (_componentsProps$badg2 = componentsProps.badge) == null ? void 0 : _componentsProps$badg2.ownerState, {
245
+ anchorOrigin,
227
246
  color,
228
- overlap
247
+ overlap,
248
+ variant
229
249
  })
230
250
  })
231
251
  },
232
- classes: classes,
233
252
  ref: ref
234
253
  }));
235
254
  });
@@ -268,10 +287,15 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
268
287
  */
269
288
  classes: PropTypes.object,
270
289
 
290
+ /**
291
+ * @ignore
292
+ */
293
+ className: PropTypes.string,
294
+
271
295
  /**
272
296
  * The color of the component.
273
297
  * It supports both default and custom theme colors, which can be added as shown in the
274
- * [palette customization guide](https://mui.com/customization/palette/#adding-new-colors).
298
+ * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
275
299
  * @default 'default'
276
300
  */
277
301
  color: PropTypes
@@ -0,0 +1,24 @@
1
+ export interface BadgeClasses {
2
+ /** Class name applied to the root element. */
3
+ root: string;
4
+ /** Class name applied to the badge `span` element. */
5
+ badge: string;
6
+ /** Class name applied to the badge `span` element if `variant="dot"`. */
7
+ dot: string;
8
+ /** Class name applied to the badge `span` element if `variant="standard"`. */
9
+ standard: string;
10
+ /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }}`. */
11
+ anchorOriginTopRight: string;
12
+ /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }}`. */
13
+ anchorOriginBottomRight: string;
14
+ /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }}`. */
15
+ anchorOriginTopLeft: string;
16
+ /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }}`. */
17
+ anchorOriginBottomLeft: string;
18
+ /** State class applied to the badge `span` element if `invisible={true}`. */
19
+ invisible: string;
20
+ }
21
+ export declare type BadgeClassKey = keyof BadgeClasses;
22
+ export declare function getBadgeUtilityClass(slot: string): string;
23
+ declare const badgeClasses: BadgeClasses;
24
+ export default badgeClasses;
@@ -0,0 +1,8 @@
1
+ import generateUtilityClasses from '@mui/base/generateUtilityClasses';
2
+ import generateUtilityClass from '@mui/base/generateUtilityClass';
3
+ export function getBadgeUtilityClass(slot) {
4
+ return generateUtilityClass('MuiBadge', slot);
5
+ }
6
+ const badgeClasses = generateUtilityClasses('MuiBadge', ['root', 'badge', 'dot', 'standard', 'anchorOriginTopRight', 'anchorOriginBottomRight', 'anchorOriginTopLeft', 'anchorOriginBottomLeft', 'invisible', 'colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'overlapRectangular', 'overlapCircular', // TODO: v6 remove the overlap value from these class keys
7
+ 'anchorOriginTopLeftCircular', 'anchorOriginTopLeftRectangular', 'anchorOriginTopRightCircular', 'anchorOriginTopRightRectangular', 'anchorOriginBottomLeftCircular', 'anchorOriginBottomLeftRectangular', 'anchorOriginBottomRightCircular', 'anchorOriginBottomRightRectangular']);
8
+ export default badgeClasses;
package/Badge/index.d.ts CHANGED
@@ -1,2 +1,5 @@
1
1
  export { default } from './Badge';
2
2
  export * from './Badge';
3
+
4
+ export { default as badgeClasses } from './badgeClasses';
5
+ export * from './badgeClasses';
package/Badge/index.js CHANGED
@@ -1,2 +1,3 @@
1
1
  export { default } from './Badge';
2
- export * from './Badge';
2
+ export { default as badgeClasses } from './badgeClasses';
3
+ export * from './badgeClasses';
@@ -42,11 +42,11 @@ export interface BottomNavigationTypeMap<P = {}, D extends React.ElementType = '
42
42
  *
43
43
  * Demos:
44
44
  *
45
- * - [Bottom Navigation](https://mui.com/components/bottom-navigation/)
45
+ * - [Bottom navigation](https://mui.com/material-ui/react-bottom-navigation/)
46
46
  *
47
47
  * API:
48
48
  *
49
- * - [BottomNavigation API](https://mui.com/api/bottom-navigation/)
49
+ * - [BottomNavigation API](https://mui.com/material-ui/api/bottom-navigation/)
50
50
  */
51
51
  declare const BottomNavigation: OverridableComponent<BottomNavigationTypeMap>;
52
52
 
File without changes
@@ -1,8 +1,8 @@
1
- export interface BottomNavigationClasses {
2
- /** Styles applied to the root element. */
3
- root: string;
4
- }
5
- export declare type BottomNavigationClassKey = keyof BottomNavigationClasses;
6
- export declare function getBottomNavigationUtilityClass(slot: string): string;
7
- declare const bottomNavigationClasses: BottomNavigationClasses;
8
- export default bottomNavigationClasses;
1
+ export interface BottomNavigationClasses {
2
+ /** Styles applied to the root element. */
3
+ root: string;
4
+ }
5
+ export declare type BottomNavigationClassKey = keyof BottomNavigationClasses;
6
+ export declare function getBottomNavigationUtilityClass(slot: string): string;
7
+ declare const bottomNavigationClasses: BottomNavigationClasses;
8
+ export default bottomNavigationClasses;
@@ -51,12 +51,12 @@ export type BottomNavigationActionTypeMap<
51
51
  *
52
52
  * Demos:
53
53
  *
54
- * - [Bottom Navigation](https://mui.com/components/bottom-navigation/)
54
+ * - [Bottom navigation](https://mui.com/material-ui/react-bottom-navigation/)
55
55
  *
56
56
  * API:
57
57
  *
58
- * - [BottomNavigationAction API](https://mui.com/api/bottom-navigation-action/)
59
- * - inherits [ButtonBase API](https://mui.com/api/button-base/)
58
+ * - [BottomNavigationAction API](https://mui.com/material-ui/api/bottom-navigation-action/)
59
+ * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
60
60
  */
61
61
  declare const BottomNavigationAction: ExtendButtonBase<
62
62
  BottomNavigationActionTypeMap<{}, ButtonBaseTypeMap['defaultComponent']>
@@ -1,14 +1,14 @@
1
- export interface BottomNavigationActionClasses {
2
- /** Styles applied to the root element. */
3
- root: string;
4
- /** State class applied to the root element if selected. */
5
- selected: string;
6
- /** State class applied to the root element if `showLabel={false}` and not selected. */
7
- iconOnly: string;
8
- /** Styles applied to the label's span element. */
9
- label: string;
10
- }
11
- export declare type BottomNavigationActionClassKey = keyof BottomNavigationActionClasses;
12
- export declare function getBottomNavigationActionUtilityClass(slot: string): string;
13
- declare const bottomNavigationActionClasses: BottomNavigationActionClasses;
14
- export default bottomNavigationActionClasses;
1
+ export interface BottomNavigationActionClasses {
2
+ /** Styles applied to the root element. */
3
+ root: string;
4
+ /** State class applied to the root element if selected. */
5
+ selected: string;
6
+ /** State class applied to the root element if `showLabel={false}` and not selected. */
7
+ iconOnly: string;
8
+ /** Styles applied to the label's span element. */
9
+ label: string;
10
+ }
11
+ export declare type BottomNavigationActionClassKey = keyof BottomNavigationActionClasses;
12
+ export declare function getBottomNavigationActionUtilityClass(slot: string): string;
13
+ declare const bottomNavigationActionClasses: BottomNavigationActionClasses;
14
+ export default bottomNavigationActionClasses;
@@ -17,7 +17,7 @@ export interface BreadcrumbsTypeMap<P = {}, D extends React.ElementType = 'nav'>
17
17
  /**
18
18
  * Override the default label for the expand button.
19
19
  *
20
- * For localization purposes, you can use the provided [translations](/guides/localization/).
20
+ * For localization purposes, you can use the provided [translations](/material-ui/guides/localization/).
21
21
  * @default 'Show path'
22
22
  */
23
23
  expandText?: string;
@@ -55,11 +55,11 @@ export interface BreadcrumbsTypeMap<P = {}, D extends React.ElementType = 'nav'>
55
55
  *
56
56
  * Demos:
57
57
  *
58
- * - [Breadcrumbs](https://mui.com/components/breadcrumbs/)
58
+ * - [Breadcrumbs](https://mui.com/material-ui/react-breadcrumbs/)
59
59
  *
60
60
  * API:
61
61
  *
62
- * - [Breadcrumbs API](https://mui.com/api/breadcrumbs/)
62
+ * - [Breadcrumbs API](https://mui.com/material-ui/api/breadcrumbs/)
63
63
  */
64
64
  declare const Breadcrumbs: OverridableComponent<BreadcrumbsTypeMap>;
65
65