@mui/material 6.0.0-alpha.9 → 6.0.0-beta.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 (611) hide show
  1. package/Accordion/Accordion.d.ts +3 -5
  2. package/Accordion/Accordion.js +3 -5
  3. package/AccordionActions/AccordionActions.d.ts +2 -2
  4. package/AccordionActions/AccordionActions.js +3 -3
  5. package/AccordionDetails/AccordionDetails.d.ts +2 -2
  6. package/AccordionDetails/AccordionDetails.js +3 -3
  7. package/AccordionSummary/AccordionSummary.d.ts +3 -3
  8. package/AccordionSummary/AccordionSummary.js +3 -3
  9. package/Alert/Alert.d.ts +15 -6
  10. package/Alert/Alert.js +3 -3
  11. package/AlertTitle/AlertTitle.d.ts +3 -3
  12. package/AlertTitle/AlertTitle.js +3 -3
  13. package/AppBar/AppBar.d.ts +3 -3
  14. package/AppBar/AppBar.js +5 -9
  15. package/Autocomplete/Autocomplete.d.ts +3 -8
  16. package/Autocomplete/Autocomplete.js +13 -26
  17. package/Avatar/Avatar.d.ts +2 -3
  18. package/Avatar/Avatar.js +3 -4
  19. package/AvatarGroup/AvatarGroup.d.ts +2 -2
  20. package/AvatarGroup/AvatarGroup.js +3 -3
  21. package/Backdrop/Backdrop.d.ts +5 -8
  22. package/Backdrop/Backdrop.js +5 -8
  23. package/Badge/Badge.d.ts +3 -3
  24. package/Badge/Badge.js +3 -3
  25. package/BottomNavigation/BottomNavigation.d.ts +2 -2
  26. package/BottomNavigation/BottomNavigation.js +3 -3
  27. package/BottomNavigationAction/BottomNavigationAction.d.ts +3 -3
  28. package/BottomNavigationAction/BottomNavigationAction.js +3 -3
  29. package/Box/Box.d.ts +2 -2
  30. package/Breadcrumbs/Breadcrumbs.d.ts +3 -3
  31. package/Breadcrumbs/Breadcrumbs.js +3 -3
  32. package/Button/Button.d.ts +4 -4
  33. package/Button/Button.js +3 -3
  34. package/ButtonBase/ButtonBase.d.ts +2 -2
  35. package/ButtonBase/ButtonBase.js +23 -52
  36. package/ButtonBase/TouchRipple.js +3 -3
  37. package/ButtonGroup/ButtonGroup.d.ts +2 -2
  38. package/ButtonGroup/ButtonGroup.js +3 -3
  39. package/CHANGELOG.md +331 -3
  40. package/Card/Card.d.ts +3 -3
  41. package/Card/Card.js +3 -3
  42. package/CardActionArea/CardActionArea.d.ts +3 -3
  43. package/CardActionArea/CardActionArea.js +3 -3
  44. package/CardActions/CardActions.d.ts +2 -2
  45. package/CardActions/CardActions.js +3 -3
  46. package/CardContent/CardContent.d.ts +2 -2
  47. package/CardContent/CardContent.js +3 -3
  48. package/CardHeader/CardHeader.d.ts +2 -2
  49. package/CardHeader/CardHeader.js +3 -3
  50. package/CardMedia/CardMedia.d.ts +2 -2
  51. package/CardMedia/CardMedia.js +3 -3
  52. package/Checkbox/Checkbox.d.ts +4 -4
  53. package/Checkbox/Checkbox.js +3 -3
  54. package/Chip/Chip.d.ts +5 -5
  55. package/Chip/Chip.js +3 -5
  56. package/CircularProgress/CircularProgress.d.ts +2 -2
  57. package/CircularProgress/CircularProgress.js +3 -3
  58. package/Collapse/Collapse.d.ts +5 -5
  59. package/Collapse/Collapse.js +3 -4
  60. package/Container/Container.d.ts +2 -2
  61. package/CssBaseline/CssBaseline.d.ts +2 -2
  62. package/CssBaseline/CssBaseline.js +66 -8
  63. package/DefaultPropsProvider/DefaultPropsProvider.d.ts +15 -0
  64. package/DefaultPropsProvider/DefaultPropsProvider.js +29 -0
  65. package/DefaultPropsProvider/index.d.ts +1 -0
  66. package/DefaultPropsProvider/index.js +1 -0
  67. package/DefaultPropsProvider/package.json +6 -0
  68. package/Dialog/Dialog.d.ts +3 -3
  69. package/Dialog/Dialog.js +4 -7
  70. package/DialogActions/DialogActions.d.ts +2 -2
  71. package/DialogActions/DialogActions.js +3 -3
  72. package/DialogContent/DialogContent.d.ts +2 -2
  73. package/DialogContent/DialogContent.js +3 -3
  74. package/DialogContentText/DialogContentText.d.ts +3 -3
  75. package/DialogContentText/DialogContentText.js +3 -3
  76. package/DialogTitle/DialogTitle.d.ts +3 -3
  77. package/DialogTitle/DialogTitle.js +3 -3
  78. package/Divider/Divider.d.ts +3 -3
  79. package/Divider/Divider.js +3 -3
  80. package/Drawer/Drawer.d.ts +3 -3
  81. package/Drawer/Drawer.js +3 -4
  82. package/Fab/Fab.d.ts +3 -3
  83. package/Fab/Fab.js +3 -3
  84. package/Fade/Fade.d.ts +3 -3
  85. package/Fade/Fade.js +1 -1
  86. package/FilledInput/FilledInput.d.ts +3 -3
  87. package/FilledInput/FilledInput.js +13 -11
  88. package/FilledInput/filledInputClasses.d.ts +1 -13
  89. package/FilledInput/filledInputClasses.js +1 -1
  90. package/FormControl/FormControl.d.ts +6 -6
  91. package/FormControl/FormControl.js +3 -3
  92. package/FormControlLabel/FormControlLabel.d.ts +4 -4
  93. package/FormControlLabel/FormControlLabel.js +3 -3
  94. package/FormGroup/FormGroup.d.ts +3 -3
  95. package/FormGroup/FormGroup.js +3 -3
  96. package/FormHelperText/FormHelperText.d.ts +2 -2
  97. package/FormHelperText/FormHelperText.js +3 -3
  98. package/FormLabel/FormLabel.d.ts +4 -4
  99. package/FormLabel/FormLabel.js +3 -3
  100. package/GlobalStyles/GlobalStyles.d.ts +3 -3
  101. package/Grid/Grid.d.ts +2 -2
  102. package/Grid/Grid.js +7 -13
  103. package/Grow/Grow.d.ts +5 -5
  104. package/Grow/Grow.js +1 -1
  105. package/Hidden/Hidden.d.ts +2 -2
  106. package/Hidden/hiddenCssClasses.d.ts +3 -0
  107. package/Icon/Icon.d.ts +3 -3
  108. package/Icon/Icon.js +3 -3
  109. package/IconButton/IconButton.d.ts +4 -4
  110. package/IconButton/IconButton.js +3 -5
  111. package/ImageList/ImageList.d.ts +2 -2
  112. package/ImageList/ImageList.js +3 -11
  113. package/ImageListItem/ImageListItem.d.ts +2 -2
  114. package/ImageListItem/ImageListItem.js +3 -3
  115. package/ImageListItemBar/ImageListItemBar.d.ts +2 -2
  116. package/ImageListItemBar/ImageListItemBar.js +3 -3
  117. package/InitColorSchemeScript/InitColorSchemeScript.d.ts +10 -0
  118. package/InitColorSchemeScript/InitColorSchemeScript.js +16 -0
  119. package/InitColorSchemeScript/index.d.ts +1 -0
  120. package/InitColorSchemeScript/index.js +1 -0
  121. package/InitColorSchemeScript/package.json +6 -0
  122. package/Input/Input.d.ts +3 -3
  123. package/Input/Input.js +5 -9
  124. package/InputAdornment/InputAdornment.d.ts +2 -2
  125. package/InputAdornment/InputAdornment.js +3 -5
  126. package/InputBase/InputBase.d.ts +4 -6
  127. package/InputBase/InputBase.js +31 -40
  128. package/InputLabel/InputLabel.d.ts +3 -3
  129. package/InputLabel/InputLabel.js +3 -3
  130. package/LinearProgress/LinearProgress.d.ts +2 -2
  131. package/LinearProgress/LinearProgress.js +3 -3
  132. package/Link/Link.d.ts +4 -4
  133. package/Link/Link.js +7 -18
  134. package/List/List.d.ts +3 -3
  135. package/List/List.js +3 -3
  136. package/ListItem/ListItem.d.ts +3 -3
  137. package/ListItem/ListItem.js +3 -3
  138. package/ListItemAvatar/ListItemAvatar.d.ts +2 -2
  139. package/ListItemAvatar/ListItemAvatar.js +3 -3
  140. package/ListItemButton/ListItemButton.d.ts +3 -3
  141. package/ListItemButton/ListItemButton.js +3 -3
  142. package/ListItemIcon/ListItemIcon.d.ts +2 -2
  143. package/ListItemIcon/ListItemIcon.js +3 -3
  144. package/ListItemSecondaryAction/ListItemSecondaryAction.d.ts +2 -2
  145. package/ListItemSecondaryAction/ListItemSecondaryAction.js +3 -3
  146. package/ListItemText/ListItemText.d.ts +2 -2
  147. package/ListItemText/ListItemText.js +3 -3
  148. package/ListSubheader/ListSubheader.d.ts +2 -2
  149. package/ListSubheader/ListSubheader.js +3 -3
  150. package/Menu/Menu.d.ts +4 -4
  151. package/Menu/Menu.js +4 -7
  152. package/MenuItem/MenuItem.d.ts +3 -3
  153. package/MenuItem/MenuItem.js +3 -3
  154. package/MenuList/MenuList.d.ts +4 -4
  155. package/MobileStepper/MobileStepper.d.ts +3 -3
  156. package/MobileStepper/MobileStepper.js +3 -3
  157. package/Modal/Modal.d.ts +10 -12
  158. package/Modal/Modal.js +32 -24
  159. package/NativeSelect/NativeSelect.d.ts +3 -3
  160. package/NativeSelect/NativeSelectInput.js +0 -4
  161. package/OutlinedInput/OutlinedInput.d.ts +3 -3
  162. package/OutlinedInput/OutlinedInput.js +4 -5
  163. package/Pagination/Pagination.d.ts +2 -2
  164. package/Pagination/Pagination.js +3 -3
  165. package/PaginationItem/PaginationItem.d.ts +2 -2
  166. package/PaginationItem/PaginationItem.js +3 -3
  167. package/Paper/Paper.d.ts +3 -3
  168. package/Paper/Paper.js +3 -4
  169. package/PigmentContainer/PigmentContainer.d.ts +55 -0
  170. package/PigmentContainer/PigmentContainer.js +98 -0
  171. package/PigmentContainer/index.d.ts +3 -0
  172. package/PigmentContainer/index.js +3 -0
  173. package/PigmentContainer/package.json +6 -0
  174. package/PigmentGrid/PigmentGrid.d.ts +108 -0
  175. package/PigmentGrid/PigmentGrid.js +149 -0
  176. package/PigmentGrid/index.d.ts +3 -0
  177. package/PigmentGrid/index.js +3 -0
  178. package/{useTouchRipple → PigmentGrid}/package.json +1 -1
  179. package/PigmentHidden/PigmentHidden.d.ts +97 -0
  180. package/PigmentHidden/PigmentHidden.js +278 -0
  181. package/PigmentHidden/index.d.ts +2 -0
  182. package/PigmentHidden/index.js +2 -0
  183. package/PigmentHidden/package.json +6 -0
  184. package/PigmentStack/PigmentStack.d.ts +51 -0
  185. package/PigmentStack/PigmentStack.js +81 -0
  186. package/PigmentStack/index.d.ts +3 -0
  187. package/PigmentStack/index.js +3 -0
  188. package/PigmentStack/package.json +6 -0
  189. package/Popover/Popover.d.ts +20 -25
  190. package/Popover/Popover.js +30 -29
  191. package/Popper/Popper.d.ts +4 -4
  192. package/Popper/Popper.js +10 -9
  193. package/Radio/Radio.d.ts +3 -3
  194. package/Radio/Radio.js +3 -3
  195. package/RadioGroup/RadioGroup.d.ts +3 -3
  196. package/Rating/Rating.d.ts +2 -2
  197. package/Rating/Rating.js +8 -15
  198. package/ScopedCssBaseline/ScopedCssBaseline.d.ts +2 -2
  199. package/ScopedCssBaseline/ScopedCssBaseline.js +24 -11
  200. package/Select/Select.d.ts +3 -3
  201. package/Skeleton/Skeleton.d.ts +2 -2
  202. package/Skeleton/Skeleton.js +3 -3
  203. package/Slide/Slide.d.ts +4 -4
  204. package/Slide/Slide.js +1 -1
  205. package/Slider/Slider.d.ts +3 -3
  206. package/Slider/Slider.js +3 -3
  207. package/Snackbar/Snackbar.d.ts +2 -2
  208. package/Snackbar/Snackbar.js +3 -4
  209. package/SnackbarContent/SnackbarContent.d.ts +3 -3
  210. package/SnackbarContent/SnackbarContent.js +3 -3
  211. package/SpeedDial/SpeedDial.d.ts +2 -4
  212. package/SpeedDial/SpeedDial.js +3 -6
  213. package/SpeedDialAction/SpeedDialAction.d.ts +3 -3
  214. package/SpeedDialAction/SpeedDialAction.js +3 -3
  215. package/SpeedDialIcon/SpeedDialIcon.d.ts +2 -2
  216. package/SpeedDialIcon/SpeedDialIcon.js +3 -3
  217. package/Stack/Stack.d.ts +2 -2
  218. package/Step/Step.d.ts +2 -2
  219. package/Step/Step.js +3 -3
  220. package/StepButton/StepButton.d.ts +3 -3
  221. package/StepButton/StepButton.js +3 -3
  222. package/StepConnector/StepConnector.d.ts +3 -3
  223. package/StepConnector/StepConnector.js +3 -3
  224. package/StepContent/StepContent.d.ts +2 -2
  225. package/StepContent/StepContent.js +3 -3
  226. package/StepIcon/StepIcon.d.ts +2 -2
  227. package/StepIcon/StepIcon.js +3 -3
  228. package/StepLabel/StepLabel.d.ts +2 -4
  229. package/StepLabel/StepLabel.js +3 -7
  230. package/Stepper/Stepper.d.ts +2 -2
  231. package/Stepper/Stepper.js +7 -5
  232. package/Stepper/stepperClasses.d.ts +2 -0
  233. package/Stepper/stepperClasses.js +1 -1
  234. package/SvgIcon/SvgIcon.d.ts +3 -3
  235. package/SvgIcon/SvgIcon.js +3 -3
  236. package/SwipeableDrawer/SwipeableDrawer.d.ts +3 -3
  237. package/SwipeableDrawer/SwipeableDrawer.js +3 -3
  238. package/Switch/Switch.d.ts +4 -4
  239. package/Switch/Switch.js +3 -3
  240. package/Tab/Tab.d.ts +4 -4
  241. package/Tab/Tab.js +14 -10
  242. package/Tab/tabClasses.d.ts +5 -1
  243. package/Tab/tabClasses.js +1 -1
  244. package/TabScrollButton/TabScrollButton.d.ts +2 -2
  245. package/TabScrollButton/TabScrollButton.js +3 -3
  246. package/Table/Table.d.ts +2 -2
  247. package/Table/Table.js +3 -3
  248. package/TableBody/TableBody.d.ts +2 -2
  249. package/TableBody/TableBody.js +3 -3
  250. package/TableCell/TableCell.d.ts +2 -2
  251. package/TableCell/TableCell.js +3 -3
  252. package/TableContainer/TableContainer.d.ts +2 -2
  253. package/TableContainer/TableContainer.js +3 -3
  254. package/TableFooter/TableFooter.d.ts +2 -2
  255. package/TableFooter/TableFooter.js +3 -3
  256. package/TableHead/TableHead.d.ts +2 -2
  257. package/TableHead/TableHead.js +3 -3
  258. package/TablePagination/TablePagination.d.ts +4 -4
  259. package/TablePagination/TablePagination.js +3 -3
  260. package/TableRow/TableRow.d.ts +2 -2
  261. package/TableRow/TableRow.js +3 -3
  262. package/TableSortLabel/TableSortLabel.d.ts +3 -3
  263. package/TableSortLabel/TableSortLabel.js +4 -4
  264. package/TableSortLabel/tableSortLabelClasses.d.ts +10 -2
  265. package/TableSortLabel/tableSortLabelClasses.js +1 -1
  266. package/Tabs/Tabs.d.ts +2 -2
  267. package/Tabs/Tabs.js +5 -14
  268. package/TextField/TextField.d.ts +10 -10
  269. package/TextField/TextField.js +3 -3
  270. package/ToggleButton/ToggleButton.d.ts +3 -3
  271. package/ToggleButton/ToggleButton.js +3 -3
  272. package/ToggleButtonGroup/ToggleButtonGroup.d.ts +2 -2
  273. package/ToggleButtonGroup/ToggleButtonGroup.js +3 -3
  274. package/Toolbar/Toolbar.d.ts +2 -2
  275. package/Toolbar/Toolbar.js +3 -3
  276. package/Tooltip/Tooltip.d.ts +2 -2
  277. package/Tooltip/Tooltip.js +7 -18
  278. package/Typography/Typography.d.ts +3 -3
  279. package/Typography/Typography.js +4 -4
  280. package/Zoom/Zoom.d.ts +3 -3
  281. package/Zoom/Zoom.js +1 -1
  282. package/index.js +1 -1
  283. package/modern/Accordion/Accordion.js +3 -5
  284. package/modern/AccordionActions/AccordionActions.js +3 -3
  285. package/modern/AccordionDetails/AccordionDetails.js +3 -3
  286. package/modern/AccordionSummary/AccordionSummary.js +3 -3
  287. package/modern/Alert/Alert.js +3 -3
  288. package/modern/AlertTitle/AlertTitle.js +3 -3
  289. package/modern/AppBar/AppBar.js +5 -9
  290. package/modern/Autocomplete/Autocomplete.js +13 -26
  291. package/modern/Avatar/Avatar.js +3 -4
  292. package/modern/AvatarGroup/AvatarGroup.js +3 -3
  293. package/modern/Backdrop/Backdrop.js +5 -8
  294. package/modern/Badge/Badge.js +3 -3
  295. package/modern/BottomNavigation/BottomNavigation.js +3 -3
  296. package/modern/BottomNavigationAction/BottomNavigationAction.js +3 -3
  297. package/modern/Breadcrumbs/Breadcrumbs.js +3 -3
  298. package/modern/Button/Button.js +3 -3
  299. package/modern/ButtonBase/ButtonBase.js +23 -52
  300. package/modern/ButtonBase/TouchRipple.js +3 -3
  301. package/modern/ButtonGroup/ButtonGroup.js +3 -3
  302. package/modern/Card/Card.js +3 -3
  303. package/modern/CardActionArea/CardActionArea.js +3 -3
  304. package/modern/CardActions/CardActions.js +3 -3
  305. package/modern/CardContent/CardContent.js +3 -3
  306. package/modern/CardHeader/CardHeader.js +3 -3
  307. package/modern/CardMedia/CardMedia.js +3 -3
  308. package/modern/Checkbox/Checkbox.js +3 -3
  309. package/modern/Chip/Chip.js +3 -5
  310. package/modern/CircularProgress/CircularProgress.js +3 -3
  311. package/modern/Collapse/Collapse.js +3 -4
  312. package/modern/CssBaseline/CssBaseline.js +66 -8
  313. package/modern/DefaultPropsProvider/DefaultPropsProvider.js +29 -0
  314. package/modern/DefaultPropsProvider/index.js +1 -0
  315. package/modern/Dialog/Dialog.js +4 -7
  316. package/modern/DialogActions/DialogActions.js +3 -3
  317. package/modern/DialogContent/DialogContent.js +3 -3
  318. package/modern/DialogContentText/DialogContentText.js +3 -3
  319. package/modern/DialogTitle/DialogTitle.js +3 -3
  320. package/modern/Divider/Divider.js +3 -3
  321. package/modern/Drawer/Drawer.js +3 -4
  322. package/modern/Fab/Fab.js +3 -3
  323. package/modern/Fade/Fade.js +1 -1
  324. package/modern/FilledInput/FilledInput.js +13 -11
  325. package/modern/FilledInput/filledInputClasses.js +1 -1
  326. package/modern/FormControl/FormControl.js +3 -3
  327. package/modern/FormControlLabel/FormControlLabel.js +3 -3
  328. package/modern/FormGroup/FormGroup.js +3 -3
  329. package/modern/FormHelperText/FormHelperText.js +3 -3
  330. package/modern/FormLabel/FormLabel.js +3 -3
  331. package/modern/Grid/Grid.js +7 -13
  332. package/modern/Grow/Grow.js +1 -1
  333. package/modern/Icon/Icon.js +3 -3
  334. package/modern/IconButton/IconButton.js +3 -5
  335. package/modern/ImageList/ImageList.js +3 -11
  336. package/modern/ImageListItem/ImageListItem.js +3 -3
  337. package/modern/ImageListItemBar/ImageListItemBar.js +3 -3
  338. package/modern/InitColorSchemeScript/InitColorSchemeScript.js +16 -0
  339. package/modern/InitColorSchemeScript/index.js +1 -0
  340. package/modern/Input/Input.js +5 -9
  341. package/modern/InputAdornment/InputAdornment.js +3 -5
  342. package/modern/InputBase/InputBase.js +31 -40
  343. package/modern/InputLabel/InputLabel.js +3 -3
  344. package/modern/LinearProgress/LinearProgress.js +3 -3
  345. package/modern/Link/Link.js +7 -18
  346. package/modern/List/List.js +3 -3
  347. package/modern/ListItem/ListItem.js +3 -3
  348. package/modern/ListItemAvatar/ListItemAvatar.js +3 -3
  349. package/modern/ListItemButton/ListItemButton.js +3 -3
  350. package/modern/ListItemIcon/ListItemIcon.js +3 -3
  351. package/modern/ListItemSecondaryAction/ListItemSecondaryAction.js +3 -3
  352. package/modern/ListItemText/ListItemText.js +3 -3
  353. package/modern/ListSubheader/ListSubheader.js +3 -3
  354. package/modern/Menu/Menu.js +4 -7
  355. package/modern/MenuItem/MenuItem.js +3 -3
  356. package/modern/MobileStepper/MobileStepper.js +3 -3
  357. package/modern/Modal/Modal.js +32 -24
  358. package/modern/NativeSelect/NativeSelectInput.js +0 -4
  359. package/modern/OutlinedInput/OutlinedInput.js +4 -5
  360. package/modern/Pagination/Pagination.js +3 -3
  361. package/modern/PaginationItem/PaginationItem.js +3 -3
  362. package/modern/Paper/Paper.js +3 -4
  363. package/modern/PigmentContainer/PigmentContainer.js +98 -0
  364. package/modern/PigmentContainer/index.js +3 -0
  365. package/modern/PigmentGrid/PigmentGrid.js +149 -0
  366. package/modern/PigmentGrid/index.js +3 -0
  367. package/modern/PigmentHidden/PigmentHidden.js +278 -0
  368. package/modern/PigmentHidden/index.js +2 -0
  369. package/modern/PigmentStack/PigmentStack.js +81 -0
  370. package/modern/PigmentStack/index.js +3 -0
  371. package/modern/Popover/Popover.js +30 -29
  372. package/modern/Popper/Popper.js +10 -9
  373. package/modern/Radio/Radio.js +3 -3
  374. package/modern/Rating/Rating.js +8 -15
  375. package/modern/ScopedCssBaseline/ScopedCssBaseline.js +24 -11
  376. package/modern/Skeleton/Skeleton.js +3 -3
  377. package/modern/Slide/Slide.js +1 -1
  378. package/modern/Slider/Slider.js +3 -3
  379. package/modern/Snackbar/Snackbar.js +3 -4
  380. package/modern/SnackbarContent/SnackbarContent.js +3 -3
  381. package/modern/SpeedDial/SpeedDial.js +3 -6
  382. package/modern/SpeedDialAction/SpeedDialAction.js +3 -3
  383. package/modern/SpeedDialIcon/SpeedDialIcon.js +3 -3
  384. package/modern/Step/Step.js +3 -3
  385. package/modern/StepButton/StepButton.js +3 -3
  386. package/modern/StepConnector/StepConnector.js +3 -3
  387. package/modern/StepContent/StepContent.js +3 -3
  388. package/modern/StepIcon/StepIcon.js +3 -3
  389. package/modern/StepLabel/StepLabel.js +3 -7
  390. package/modern/Stepper/Stepper.js +7 -5
  391. package/modern/Stepper/stepperClasses.js +1 -1
  392. package/modern/SvgIcon/SvgIcon.js +3 -3
  393. package/modern/SwipeableDrawer/SwipeableDrawer.js +3 -3
  394. package/modern/Switch/Switch.js +3 -3
  395. package/modern/Tab/Tab.js +14 -10
  396. package/modern/Tab/tabClasses.js +1 -1
  397. package/modern/TabScrollButton/TabScrollButton.js +3 -3
  398. package/modern/Table/Table.js +3 -3
  399. package/modern/TableBody/TableBody.js +3 -3
  400. package/modern/TableCell/TableCell.js +3 -3
  401. package/modern/TableContainer/TableContainer.js +3 -3
  402. package/modern/TableFooter/TableFooter.js +3 -3
  403. package/modern/TableHead/TableHead.js +3 -3
  404. package/modern/TablePagination/TablePagination.js +3 -3
  405. package/modern/TableRow/TableRow.js +3 -3
  406. package/modern/TableSortLabel/TableSortLabel.js +4 -4
  407. package/modern/TableSortLabel/tableSortLabelClasses.js +1 -1
  408. package/modern/Tabs/Tabs.js +5 -14
  409. package/modern/TextField/TextField.js +3 -3
  410. package/modern/ToggleButton/ToggleButton.js +3 -3
  411. package/modern/ToggleButtonGroup/ToggleButtonGroup.js +3 -3
  412. package/modern/Toolbar/Toolbar.js +3 -3
  413. package/modern/Tooltip/Tooltip.js +7 -18
  414. package/modern/Typography/Typography.js +4 -4
  415. package/modern/Zoom/Zoom.js +1 -1
  416. package/modern/index.js +1 -1
  417. package/modern/styles/CssVarsProvider.js +19 -7
  418. package/modern/styles/createTheme.js +1 -1
  419. package/modern/styles/createTransitions.js +2 -2
  420. package/modern/styles/extendTheme.js +3 -0
  421. package/modern/styles/index.js +1 -1
  422. package/modern/styles/stringifyTheme.js +55 -0
  423. package/modern/useLazyRipple/index.js +3 -0
  424. package/modern/useLazyRipple/useLazyRipple.js +85 -0
  425. package/modern/usePagination/usePagination.js +1 -1
  426. package/modern/utils/index.js +0 -1
  427. package/modern/zero-styled/index.js +24 -5
  428. package/node/Accordion/Accordion.js +2 -4
  429. package/node/AccordionActions/AccordionActions.js +2 -2
  430. package/node/AccordionDetails/AccordionDetails.js +2 -2
  431. package/node/AccordionSummary/AccordionSummary.js +2 -2
  432. package/node/Alert/Alert.js +2 -2
  433. package/node/AlertTitle/AlertTitle.js +2 -2
  434. package/node/AppBar/AppBar.js +4 -8
  435. package/node/Autocomplete/Autocomplete.js +12 -25
  436. package/node/Avatar/Avatar.js +2 -3
  437. package/node/AvatarGroup/AvatarGroup.js +2 -2
  438. package/node/Backdrop/Backdrop.js +4 -7
  439. package/node/Badge/Badge.js +2 -2
  440. package/node/BottomNavigation/BottomNavigation.js +2 -2
  441. package/node/BottomNavigationAction/BottomNavigationAction.js +2 -2
  442. package/node/Breadcrumbs/Breadcrumbs.js +2 -2
  443. package/node/Button/Button.js +2 -2
  444. package/node/ButtonBase/ButtonBase.js +22 -51
  445. package/node/ButtonBase/TouchRipple.js +2 -2
  446. package/node/ButtonGroup/ButtonGroup.js +2 -2
  447. package/node/Card/Card.js +2 -2
  448. package/node/CardActionArea/CardActionArea.js +2 -2
  449. package/node/CardActions/CardActions.js +2 -2
  450. package/node/CardContent/CardContent.js +2 -2
  451. package/node/CardHeader/CardHeader.js +2 -2
  452. package/node/CardMedia/CardMedia.js +2 -2
  453. package/node/Checkbox/Checkbox.js +2 -2
  454. package/node/Chip/Chip.js +2 -4
  455. package/node/CircularProgress/CircularProgress.js +2 -2
  456. package/node/Collapse/Collapse.js +3 -4
  457. package/node/CssBaseline/CssBaseline.js +70 -10
  458. package/node/DefaultPropsProvider/DefaultPropsProvider.js +38 -0
  459. package/node/DefaultPropsProvider/index.js +20 -0
  460. package/node/Dialog/Dialog.js +4 -7
  461. package/node/DialogActions/DialogActions.js +2 -2
  462. package/node/DialogContent/DialogContent.js +2 -2
  463. package/node/DialogContentText/DialogContentText.js +2 -2
  464. package/node/DialogTitle/DialogTitle.js +2 -2
  465. package/node/Divider/Divider.js +2 -2
  466. package/node/Drawer/Drawer.js +3 -4
  467. package/node/Fab/Fab.js +2 -2
  468. package/node/Fade/Fade.js +2 -2
  469. package/node/FilledInput/FilledInput.js +12 -10
  470. package/node/FilledInput/filledInputClasses.js +1 -1
  471. package/node/FormControl/FormControl.js +2 -2
  472. package/node/FormControlLabel/FormControlLabel.js +2 -2
  473. package/node/FormGroup/FormGroup.js +2 -2
  474. package/node/FormHelperText/FormHelperText.js +2 -2
  475. package/node/FormLabel/FormLabel.js +2 -2
  476. package/node/Grid/Grid.js +7 -13
  477. package/node/Grow/Grow.js +2 -2
  478. package/node/Icon/Icon.js +2 -2
  479. package/node/IconButton/IconButton.js +2 -4
  480. package/node/ImageList/ImageList.js +2 -10
  481. package/node/ImageListItem/ImageListItem.js +2 -2
  482. package/node/ImageListItemBar/ImageListItemBar.js +2 -2
  483. package/node/InitColorSchemeScript/InitColorSchemeScript.js +25 -0
  484. package/node/InitColorSchemeScript/index.js +13 -0
  485. package/node/Input/Input.js +4 -8
  486. package/node/InputAdornment/InputAdornment.js +2 -4
  487. package/node/InputBase/InputBase.js +30 -39
  488. package/node/InputLabel/InputLabel.js +2 -2
  489. package/node/LinearProgress/LinearProgress.js +2 -2
  490. package/node/Link/Link.js +7 -18
  491. package/node/List/List.js +2 -2
  492. package/node/ListItem/ListItem.js +2 -2
  493. package/node/ListItemAvatar/ListItemAvatar.js +2 -2
  494. package/node/ListItemButton/ListItemButton.js +2 -2
  495. package/node/ListItemIcon/ListItemIcon.js +2 -2
  496. package/node/ListItemSecondaryAction/ListItemSecondaryAction.js +2 -2
  497. package/node/ListItemText/ListItemText.js +2 -2
  498. package/node/ListSubheader/ListSubheader.js +2 -2
  499. package/node/Menu/Menu.js +3 -6
  500. package/node/MenuItem/MenuItem.js +2 -2
  501. package/node/MobileStepper/MobileStepper.js +2 -2
  502. package/node/Modal/Modal.js +31 -24
  503. package/node/NativeSelect/NativeSelectInput.js +0 -4
  504. package/node/OutlinedInput/OutlinedInput.js +3 -4
  505. package/node/Pagination/Pagination.js +2 -2
  506. package/node/PaginationItem/PaginationItem.js +2 -2
  507. package/node/Paper/Paper.js +3 -4
  508. package/node/PigmentContainer/PigmentContainer.js +108 -0
  509. package/node/PigmentContainer/index.js +36 -0
  510. package/node/PigmentGrid/PigmentGrid.js +159 -0
  511. package/node/PigmentGrid/index.js +36 -0
  512. package/node/PigmentHidden/PigmentHidden.js +287 -0
  513. package/node/PigmentHidden/index.js +26 -0
  514. package/node/PigmentStack/PigmentStack.js +91 -0
  515. package/node/PigmentStack/index.js +36 -0
  516. package/node/Popover/Popover.js +29 -28
  517. package/node/Popper/Popper.js +11 -10
  518. package/node/Radio/Radio.js +2 -2
  519. package/node/Rating/Rating.js +6 -13
  520. package/node/ScopedCssBaseline/ScopedCssBaseline.js +27 -13
  521. package/node/Skeleton/Skeleton.js +2 -2
  522. package/node/Slide/Slide.js +2 -2
  523. package/node/Slider/Slider.js +2 -2
  524. package/node/Snackbar/Snackbar.js +3 -4
  525. package/node/SnackbarContent/SnackbarContent.js +2 -2
  526. package/node/SpeedDial/SpeedDial.js +3 -6
  527. package/node/SpeedDialAction/SpeedDialAction.js +2 -2
  528. package/node/SpeedDialIcon/SpeedDialIcon.js +2 -2
  529. package/node/Step/Step.js +2 -2
  530. package/node/StepButton/StepButton.js +2 -2
  531. package/node/StepConnector/StepConnector.js +2 -2
  532. package/node/StepContent/StepContent.js +2 -2
  533. package/node/StepIcon/StepIcon.js +2 -2
  534. package/node/StepLabel/StepLabel.js +2 -6
  535. package/node/Stepper/Stepper.js +6 -4
  536. package/node/Stepper/stepperClasses.js +1 -1
  537. package/node/SvgIcon/SvgIcon.js +2 -2
  538. package/node/SwipeableDrawer/SwipeableDrawer.js +4 -4
  539. package/node/Switch/Switch.js +2 -2
  540. package/node/Tab/Tab.js +13 -9
  541. package/node/Tab/tabClasses.js +1 -1
  542. package/node/TabScrollButton/TabScrollButton.js +2 -2
  543. package/node/Table/Table.js +2 -2
  544. package/node/TableBody/TableBody.js +2 -2
  545. package/node/TableCell/TableCell.js +2 -2
  546. package/node/TableContainer/TableContainer.js +2 -2
  547. package/node/TableFooter/TableFooter.js +2 -2
  548. package/node/TableHead/TableHead.js +2 -2
  549. package/node/TablePagination/TablePagination.js +2 -2
  550. package/node/TableRow/TableRow.js +2 -2
  551. package/node/TableSortLabel/TableSortLabel.js +3 -3
  552. package/node/TableSortLabel/tableSortLabelClasses.js +1 -1
  553. package/node/Tabs/Tabs.js +5 -14
  554. package/node/TextField/TextField.js +2 -2
  555. package/node/ToggleButton/ToggleButton.js +2 -2
  556. package/node/ToggleButtonGroup/ToggleButtonGroup.js +2 -2
  557. package/node/Toolbar/Toolbar.js +2 -2
  558. package/node/Tooltip/Tooltip.js +7 -18
  559. package/node/Typography/Typography.js +4 -4
  560. package/node/Zoom/Zoom.js +2 -2
  561. package/node/index.js +1 -1
  562. package/node/styles/CssVarsProvider.js +20 -8
  563. package/node/styles/createTheme.js +1 -1
  564. package/node/styles/createTransitions.js +2 -2
  565. package/node/styles/extendTheme.js +3 -0
  566. package/node/styles/index.js +8 -1
  567. package/node/styles/stringifyTheme.js +62 -0
  568. package/node/{useTouchRipple → useLazyRipple}/index.js +2 -2
  569. package/node/useLazyRipple/useLazyRipple.js +104 -0
  570. package/node/usePagination/usePagination.js +1 -1
  571. package/node/utils/index.js +0 -7
  572. package/node/zero-styled/index.js +33 -5
  573. package/package.json +24 -8
  574. package/styles/CssVarsProvider.d.ts +3 -2
  575. package/styles/CssVarsProvider.js +19 -7
  576. package/styles/createTheme.js +1 -1
  577. package/styles/createTransitions.js +2 -2
  578. package/styles/extendTheme.js +3 -0
  579. package/styles/index.d.ts +1 -0
  580. package/styles/index.js +1 -1
  581. package/styles/responsiveFontSizes.d.ts +3 -4
  582. package/styles/stringifyTheme.d.ts +20 -0
  583. package/styles/stringifyTheme.js +55 -0
  584. package/useLazyRipple/index.d.ts +1 -0
  585. package/useLazyRipple/index.js +3 -0
  586. package/useLazyRipple/package.json +6 -0
  587. package/useLazyRipple/useLazyRipple.d.ts +32 -0
  588. package/useLazyRipple/useLazyRipple.js +85 -0
  589. package/usePagination/usePagination.js +1 -1
  590. package/utils/index.d.ts +0 -1
  591. package/utils/index.js +0 -1
  592. package/zero-styled/index.d.ts +10 -2
  593. package/zero-styled/index.js +24 -5
  594. package/modern/useMediaQuery/useMediaQueryTheme.js +0 -8
  595. package/modern/useTouchRipple/index.js +0 -3
  596. package/modern/useTouchRipple/useTouchRipple.js +0 -94
  597. package/modern/utils/scrollLeft.js +0 -1
  598. package/modern/utils/useIsFocusVisible.js +0 -4
  599. package/node/useMediaQuery/useMediaQueryTheme.js +0 -13
  600. package/node/useTouchRipple/useTouchRipple.js +0 -105
  601. package/node/utils/scrollLeft.js +0 -18
  602. package/node/utils/useIsFocusVisible.js +0 -10
  603. package/useMediaQuery/useMediaQueryTheme.d.ts +0 -3
  604. package/useMediaQuery/useMediaQueryTheme.js +0 -8
  605. package/useTouchRipple/index.d.ts +0 -1
  606. package/useTouchRipple/index.js +0 -3
  607. package/useTouchRipple/useTouchRipple.d.ts +0 -28
  608. package/useTouchRipple/useTouchRipple.js +0 -94
  609. package/utils/scrollLeft.js +0 -1
  610. package/utils/useIsFocusVisible.d.ts +0 -3
  611. package/utils/useIsFocusVisible.js +0 -4
@@ -9,13 +9,13 @@ import composeClasses from '@mui/utils/composeClasses';
9
9
  import { alpha } from '@mui/system/colorManipulator';
10
10
  import ButtonBase from '../ButtonBase';
11
11
  import capitalize from '../utils/capitalize';
12
- import { createUseThemeProps, styled } from '../zero-styled';
12
+ import { styled } from '../zero-styled';
13
+ import { useDefaultProps } from '../DefaultPropsProvider';
13
14
  import toggleButtonClasses, { getToggleButtonUtilityClass } from './toggleButtonClasses';
14
15
  import ToggleButtonGroupContext from '../ToggleButtonGroup/ToggleButtonGroupContext';
15
16
  import ToggleButtonGroupButtonContext from '../ToggleButtonGroup/ToggleButtonGroupButtonContext';
16
17
  import isValueSelected from '../ToggleButtonGroup/isValueSelected';
17
18
  import { jsx as _jsx } from "react/jsx-runtime";
18
- const useThemeProps = createUseThemeProps('MuiToggleButton');
19
19
  const useUtilityClasses = ownerState => {
20
20
  const {
21
21
  classes,
@@ -129,7 +129,7 @@ const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton(inProps
129
129
  ...contextProps,
130
130
  selected: isValueSelected(inProps.value, contextValue)
131
131
  }, inProps);
132
- const props = useThemeProps({
132
+ const props = useDefaultProps({
133
133
  props: resolvedProps,
134
134
  name: 'MuiToggleButton'
135
135
  });
@@ -6,14 +6,14 @@ import PropTypes from 'prop-types';
6
6
  import clsx from 'clsx';
7
7
  import composeClasses from '@mui/utils/composeClasses';
8
8
  import getValidReactChildren from '@mui/utils/getValidReactChildren';
9
- import { styled, createUseThemeProps } from '../zero-styled';
9
+ import { styled } from '../zero-styled';
10
+ import { useDefaultProps } from '../DefaultPropsProvider';
10
11
  import capitalize from '../utils/capitalize';
11
12
  import toggleButtonGroupClasses, { getToggleButtonGroupUtilityClass } from './toggleButtonGroupClasses';
12
13
  import ToggleButtonGroupContext from './ToggleButtonGroupContext';
13
14
  import ToggleButtonGroupButtonContext from './ToggleButtonGroupButtonContext';
14
15
  import toggleButtonClasses from '../ToggleButton/toggleButtonClasses';
15
16
  import { jsx as _jsx } from "react/jsx-runtime";
16
- const useThemeProps = createUseThemeProps('MuiToggleButtonGroup');
17
17
  const useUtilityClasses = ownerState => {
18
18
  const {
19
19
  classes,
@@ -115,7 +115,7 @@ const ToggleButtonGroupRoot = styled('div', {
115
115
  }]
116
116
  }));
117
117
  const ToggleButtonGroup = /*#__PURE__*/React.forwardRef(function ToggleButtonGroup(inProps, ref) {
118
- const props = useThemeProps({
118
+ const props = useDefaultProps({
119
119
  props: inProps,
120
120
  name: 'MuiToggleButtonGroup'
121
121
  });
@@ -4,10 +4,10 @@ import * as React from 'react';
4
4
  import PropTypes from 'prop-types';
5
5
  import clsx from 'clsx';
6
6
  import composeClasses from '@mui/utils/composeClasses';
7
- import { styled, createUseThemeProps } from '../zero-styled';
7
+ import { styled } from '../zero-styled';
8
+ import { useDefaultProps } from '../DefaultPropsProvider';
8
9
  import { getToolbarUtilityClass } from './toolbarClasses';
9
10
  import { jsx as _jsx } from "react/jsx-runtime";
10
- const useThemeProps = createUseThemeProps('MuiToolbar');
11
11
  const useUtilityClasses = ownerState => {
12
12
  const {
13
13
  classes,
@@ -61,7 +61,7 @@ const ToolbarRoot = styled('div', {
61
61
  }]
62
62
  }));
63
63
  const Toolbar = /*#__PURE__*/React.forwardRef(function Toolbar(inProps, ref) {
64
- const props = useThemeProps({
64
+ const props = useDefaultProps({
65
65
  props: inProps,
66
66
  name: 'MuiToolbar'
67
67
  });
@@ -9,19 +9,18 @@ import { appendOwnerState } from '@mui/base/utils';
9
9
  import composeClasses from '@mui/utils/composeClasses';
10
10
  import { alpha } from '@mui/system/colorManipulator';
11
11
  import { useRtl } from '@mui/system/RtlProvider';
12
- import { styled, createUseThemeProps } from '../zero-styled';
13
- import useTheme from '../styles/useTheme';
12
+ import isFocusVisible from '@mui/utils/isFocusVisible';
13
+ import { styled, useTheme } from '../zero-styled';
14
+ import { useDefaultProps } from '../DefaultPropsProvider';
14
15
  import capitalize from '../utils/capitalize';
15
16
  import Grow from '../Grow';
16
17
  import Popper from '../Popper';
17
18
  import useEventCallback from '../utils/useEventCallback';
18
19
  import useForkRef from '../utils/useForkRef';
19
20
  import useId from '../utils/useId';
20
- import useIsFocusVisible from '../utils/useIsFocusVisible';
21
21
  import useControlled from '../utils/useControlled';
22
22
  import tooltipClasses, { getTooltipUtilityClass } from './tooltipClasses';
23
23
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
24
- const useThemeProps = createUseThemeProps('MuiTooltip');
25
24
  function round(value) {
26
25
  return Math.round(value * 1e5) / 1e5;
27
26
  }
@@ -310,7 +309,7 @@ function composeEventHandler(handler, eventHandler) {
310
309
 
311
310
  // TODO v6: Remove PopperComponent, PopperProps, TransitionComponent and TransitionProps.
312
311
  const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
313
- const props = useThemeProps({
312
+ const props = useDefaultProps({
314
313
  props: inProps,
315
314
  name: 'MuiTooltip'
316
315
  });
@@ -445,18 +444,9 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
445
444
  handleClose(event);
446
445
  });
447
446
  };
448
- const {
449
- isFocusVisibleRef,
450
- onBlur: handleBlurVisible,
451
- onFocus: handleFocusVisible,
452
- ref: focusVisibleRef
453
- } = useIsFocusVisible();
454
- // We don't necessarily care about the focusVisible state (which is safe to access via ref anyway).
455
- // We just need to re-render the Tooltip if the focus-visible state changes.
456
447
  const [, setChildIsFocusVisible] = React.useState(false);
457
448
  const handleBlur = event => {
458
- handleBlurVisible(event);
459
- if (isFocusVisibleRef.current === false) {
449
+ if (!isFocusVisible(event.target)) {
460
450
  setChildIsFocusVisible(false);
461
451
  handleMouseLeave(event);
462
452
  }
@@ -468,8 +458,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
468
458
  if (!childNode) {
469
459
  setChildNode(event.currentTarget);
470
460
  }
471
- handleFocusVisible(event);
472
- if (isFocusVisibleRef.current === true) {
461
+ if (isFocusVisible(event.target)) {
473
462
  setChildIsFocusVisible(true);
474
463
  handleMouseOver(event);
475
464
  }
@@ -521,7 +510,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
521
510
  document.removeEventListener('keydown', handleKeyDown);
522
511
  };
523
512
  }, [handleClose, open]);
524
- const handleRef = useForkRef(children.ref, focusVisibleRef, setChildNode, ref);
513
+ const handleRef = useForkRef(children.ref, setChildNode, ref);
525
514
 
526
515
  // There is no point in displaying an empty tooltip.
527
516
  // So we exclude all falsy values, except 0, which is valid.
@@ -3,13 +3,13 @@
3
3
  import * as React from 'react';
4
4
  import PropTypes from 'prop-types';
5
5
  import clsx from 'clsx';
6
- import { extendSxProp } from '@mui/system/styleFunctionSx';
7
6
  import composeClasses from '@mui/utils/composeClasses';
8
- import { styled, createUseThemeProps } from '../zero-styled';
7
+ import { styled, internal_createExtendSxProp } from '../zero-styled';
8
+ import { useDefaultProps } from '../DefaultPropsProvider';
9
9
  import capitalize from '../utils/capitalize';
10
10
  import { getTypographyUtilityClass } from './typographyClasses';
11
11
  import { jsx as _jsx } from "react/jsx-runtime";
12
- const useThemeProps = createUseThemeProps('MuiTypography');
12
+ const extendSxProp = internal_createExtendSxProp();
13
13
  const useUtilityClasses = ownerState => {
14
14
  const {
15
15
  align,
@@ -121,7 +121,7 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
121
121
  const {
122
122
  color,
123
123
  ...themeProps
124
- } = useThemeProps({
124
+ } = useDefaultProps({
125
125
  props: inProps,
126
126
  name: 'MuiTypography'
127
127
  });
@@ -4,7 +4,7 @@ import * as React from 'react';
4
4
  import PropTypes from 'prop-types';
5
5
  import { Transition } from 'react-transition-group';
6
6
  import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
7
- import useTheme from '../styles/useTheme';
7
+ import { useTheme } from '../zero-styled';
8
8
  import { reflow, getTransitionProps } from '../transitions/utils';
9
9
  import useForkRef from '../utils/useForkRef';
10
10
  import { jsx as _jsx } from "react/jsx-runtime";
package/modern/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/material v6.0.0-alpha.9
2
+ * @mui/material v6.0.0-beta.0
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -6,21 +6,22 @@ import styleFunctionSx from '@mui/system/styleFunctionSx';
6
6
  import extendTheme from './extendTheme';
7
7
  import createTypography from './createTypography';
8
8
  import THEME_ID from './identifier';
9
+ import { defaultConfig } from '../InitColorSchemeScript/InitColorSchemeScript';
9
10
  import { jsx as _jsx } from "react/jsx-runtime";
10
11
  const defaultTheme = extendTheme();
11
12
  const {
12
13
  CssVarsProvider,
13
14
  useColorScheme,
14
- getInitColorSchemeScript
15
+ getInitColorSchemeScript: deprecatedGetInitColorSchemeScript
15
16
  } = createCssVarsProvider({
16
17
  themeId: THEME_ID,
17
18
  theme: defaultTheme,
18
- attribute: 'data-mui-color-scheme',
19
- modeStorageKey: 'mui-mode',
20
- colorSchemeStorageKey: 'mui-color-scheme',
19
+ attribute: defaultConfig.attribute,
20
+ colorSchemeStorageKey: defaultConfig.colorSchemeStorageKey,
21
+ modeStorageKey: defaultConfig.modeStorageKey,
21
22
  defaultColorScheme: {
22
- light: 'light',
23
- dark: 'dark'
23
+ light: defaultConfig.defaultLightColorScheme,
24
+ dark: defaultConfig.defaultDarkColorScheme
24
25
  },
25
26
  resolveTheme: theme => {
26
27
  const newTheme = {
@@ -38,6 +39,7 @@ const {
38
39
  });
39
40
  let warnedOnce = false;
40
41
 
42
+ // TODO: remove in v7
41
43
  // eslint-disable-next-line @typescript-eslint/naming-convention
42
44
  function Experimental_CssVarsProvider(props) {
43
45
  if (!warnedOnce) {
@@ -48,4 +50,14 @@ function Experimental_CssVarsProvider(props) {
48
50
  ...props
49
51
  });
50
52
  }
51
- export { useColorScheme, getInitColorSchemeScript, CssVarsProvider, Experimental_CssVarsProvider };
53
+ let warnedInitScriptOnce = false;
54
+
55
+ // TODO: remove in v7
56
+ const getInitColorSchemeScript = params => {
57
+ if (!warnedInitScriptOnce) {
58
+ console.warn(['MUI: The getInitColorSchemeScript function has been deprecated.', '', "You should use `import InitColorSchemeScript from '@mui/material/InitColorSchemeScript'`", 'and replace the function call with `<InitColorSchemeScript />` instead.'].join('\n'));
59
+ warnedInitScriptOnce = true;
60
+ }
61
+ return deprecatedGetInitColorSchemeScript(params);
62
+ };
63
+ export { useColorScheme, CssVarsProvider, getInitColorSchemeScript, Experimental_CssVarsProvider };
@@ -45,7 +45,7 @@ Please use another name.` : _formatMuiErrorMessage(18));
45
45
  const traverse = (node, component) => {
46
46
  let key;
47
47
 
48
- // eslint-disable-next-line guard-for-in, no-restricted-syntax
48
+ // eslint-disable-next-line guard-for-in
49
49
  for (key in node) {
50
50
  const child = node[key];
51
51
  if (stateClasses.indexOf(key) !== -1 && Object.keys(child).length > 0) {
@@ -36,8 +36,8 @@ function getAutoHeightDuration(height) {
36
36
  }
37
37
  const constant = height / 36;
38
38
 
39
- // https://www.wolframalpha.com/input/?i=(4+%2B+15+*+(x+%2F+36+)+**+0.25+%2B+(x+%2F+36)+%2F+5)+*+10
40
- return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
39
+ // https://www.desmos.com/calculator/vbrp3ggqet
40
+ return Math.min(Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10), 3000);
41
41
  }
42
42
  export default function createTransitions(inputTransitions) {
43
43
  const mergedEasing = {
@@ -8,6 +8,7 @@ import defaultShouldSkipGeneratingVar from './shouldSkipGeneratingVar';
8
8
  import createThemeWithoutVars from './createTheme';
9
9
  import getOverlayAlpha from './getOverlayAlpha';
10
10
  import defaultGetSelector from './createGetSelector';
11
+ import { stringifyTheme } from './stringifyTheme';
11
12
  const defaultDarkOverlays = [...Array(25)].map((_, index) => {
12
13
  if (index === 0) {
13
14
  return undefined;
@@ -351,5 +352,7 @@ export default function extendTheme(options = {}, ...args) {
351
352
  theme: this
352
353
  });
353
354
  };
355
+ theme.toRuntimeSource = stringifyTheme; // for Pigment CSS integration
356
+
354
357
  return theme;
355
358
  }
@@ -14,7 +14,7 @@ export { default as unstable_createMuiStrictModeTheme } from './createMuiStrictM
14
14
  export { default as createStyles } from './createStyles';
15
15
  export { getUnit as unstable_getUnit, toUnitless as unstable_toUnitless } from './cssUtils';
16
16
  export { default as responsiveFontSizes } from './responsiveFontSizes';
17
- export { duration, easing } from './createTransitions';
17
+ export { default as createTransitions, duration, easing } from './createTransitions';
18
18
  export { default as useTheme } from './useTheme';
19
19
  export { default as useThemeProps } from './useThemeProps';
20
20
  export { default as styled } from './styled';
@@ -0,0 +1,55 @@
1
+ /* eslint-disable import/prefer-default-export */
2
+ import { isPlainObject } from '@mui/utils/deepmerge';
3
+ function isSerializable(val) {
4
+ return isPlainObject(val) || typeof val === 'undefined' || typeof val === 'string' || typeof val === 'boolean' || typeof val === 'number' || Array.isArray(val);
5
+ }
6
+
7
+ /**
8
+ * `baseTheme` usually comes from `createTheme` or `extendTheme`.
9
+ *
10
+ * This function is intended to be used with zero-runtime CSS-in-JS like Pigment CSS
11
+ * For example, in a Next.js project:
12
+ *
13
+ * ```js
14
+ * // next.config.js
15
+ * const { extendTheme } = require('@mui/material/styles');
16
+ *
17
+ * const theme = extendTheme();
18
+ * // `.toRuntimeSource` is Pigment CSS specific to create a theme that is available at runtime.
19
+ * theme.toRuntimeSource = stringifyTheme;
20
+ *
21
+ * module.exports = withPigment({
22
+ * theme,
23
+ * });
24
+ * ```
25
+ */
26
+ export function stringifyTheme(baseTheme = {}) {
27
+ const serializableTheme = {
28
+ ...baseTheme
29
+ };
30
+ function serializeTheme(object) {
31
+ const array = Object.entries(object);
32
+ // eslint-disable-next-line no-plusplus
33
+ for (let index = 0; index < array.length; index++) {
34
+ const [key, value] = array[index];
35
+ if (!isSerializable(value) || key.startsWith('unstable_')) {
36
+ delete object[key];
37
+ } else if (isPlainObject(value)) {
38
+ object[key] = {
39
+ ...value
40
+ };
41
+ serializeTheme(object[key]);
42
+ }
43
+ }
44
+ }
45
+ serializeTheme(serializableTheme);
46
+ return `import { createBreakpoints } from '@mui/system';
47
+ import { createTransitions } from '@mui/material/styles';
48
+
49
+ const theme = ${JSON.stringify(serializableTheme, null, 2)};
50
+
51
+ theme.breakpoints = createBreakpoints(theme.breakpoints || {});
52
+ theme.transitions = createTransitions(theme.transitions || {});
53
+
54
+ export default theme;`;
55
+ }
@@ -0,0 +1,3 @@
1
+ 'use client';
2
+
3
+ export { default } from './useLazyRipple';
@@ -0,0 +1,85 @@
1
+ 'use client';
2
+
3
+ import * as React from 'react';
4
+ import useLazyRef from '@mui/utils/useLazyRef';
5
+ /**
6
+ * Lazy initialization container for the Ripple instance. This improves
7
+ * performance by delaying mounting the ripple until it's needed.
8
+ */
9
+ export class LazyRipple {
10
+ /** React ref to the ripple instance */
11
+
12
+ /** If the ripple component should be mounted */
13
+
14
+ /** Promise that resolves when the ripple component is mounted */
15
+
16
+ /** If the ripple component has been mounted */
17
+
18
+ /** React state hook setter */
19
+
20
+ static create() {
21
+ return new LazyRipple();
22
+ }
23
+ static use() {
24
+ /* eslint-disable */
25
+ const ripple = useLazyRef(LazyRipple.create).current;
26
+ const [shouldMount, setShouldMount] = React.useState(false);
27
+ ripple.shouldMount = shouldMount;
28
+ ripple.setShouldMount = setShouldMount;
29
+ React.useEffect(ripple.mountEffect, [shouldMount]);
30
+ /* eslint-enable */
31
+
32
+ return ripple;
33
+ }
34
+ constructor() {
35
+ this.ref = {
36
+ current: null
37
+ };
38
+ this.mounted = null;
39
+ this.didMount = false;
40
+ this.shouldMount = false;
41
+ this.setShouldMount = null;
42
+ }
43
+ mount() {
44
+ if (!this.mounted) {
45
+ this.mounted = createControlledPromise();
46
+ this.shouldMount = true;
47
+ this.setShouldMount(this.shouldMount);
48
+ }
49
+ return this.mounted;
50
+ }
51
+ mountEffect = () => {
52
+ if (this.shouldMount && !this.didMount) {
53
+ if (this.ref.current !== null) {
54
+ this.didMount = true;
55
+ this.mounted.resolve();
56
+ }
57
+ }
58
+ };
59
+
60
+ /* Ripple API */
61
+
62
+ start(...args) {
63
+ this.mount().then(() => this.ref.current?.start(...args));
64
+ }
65
+ stop(...args) {
66
+ this.mount().then(() => this.ref.current?.stop(...args));
67
+ }
68
+ pulsate(...args) {
69
+ this.mount().then(() => this.ref.current?.pulsate(...args));
70
+ }
71
+ }
72
+ export default function useLazyRipple() {
73
+ return LazyRipple.use();
74
+ }
75
+ function createControlledPromise() {
76
+ let resolve;
77
+ let reject;
78
+ const p = new Promise((resolveFn, rejectFn) => {
79
+ resolve = resolveFn;
80
+ reject = rejectFn;
81
+ });
82
+ p.resolve = resolve;
83
+ p.reject = reject;
84
+ return p;
85
+ }
@@ -55,7 +55,7 @@ export default function usePagination(props = {}) {
55
55
  // Upper boundary when page is low
56
56
  boundaryCount + siblingCount * 2 + 2),
57
57
  // Less than endPages
58
- endPages.length > 0 ? endPages[0] - 2 : count - 1);
58
+ count - boundaryCount - 1);
59
59
 
60
60
  // Basic list of items to render
61
61
  // for example itemList = ['first', 'previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next', 'last']
@@ -17,7 +17,6 @@ export { default as unsupportedProp } from './unsupportedProp';
17
17
  export { default as useControlled } from './useControlled';
18
18
  export { default as useEventCallback } from './useEventCallback';
19
19
  export { default as useForkRef } from './useForkRef';
20
- export { default as useIsFocusVisible } from './useIsFocusVisible';
21
20
  // TODO: remove this export once ClassNameGenerator is stable
22
21
  // eslint-disable-next-line @typescript-eslint/naming-convention
23
22
  export const unstable_ClassNameGenerator = {
@@ -1,8 +1,27 @@
1
- import useThemeProps from '../styles/useThemeProps';
1
+ import * as React from 'react';
2
+ import { extendSxProp } from '@mui/system/styleFunctionSx';
3
+ import useTheme from '../styles/useTheme';
4
+ import GlobalStyles from '../GlobalStyles';
5
+ import { jsx as _jsx } from "react/jsx-runtime";
2
6
  export { css, keyframes } from '@mui/system';
3
7
  export { default as styled } from '../styles/styled';
8
+ export function globalCss(styles) {
9
+ return function GlobalStylesWrapper(props) {
10
+ return (
11
+ /*#__PURE__*/
12
+ // Pigment CSS `globalCss` support callback with theme inside an object but `GlobalStyles` support theme as a callback value.
13
+ _jsx(GlobalStyles, {
14
+ styles: typeof styles === 'function' ? theme => styles({
15
+ theme,
16
+ ...props
17
+ }) : styles
18
+ })
19
+ );
20
+ };
21
+ }
4
22
 
5
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
6
- export function createUseThemeProps(name) {
7
- return useThemeProps;
8
- }
23
+ // eslint-disable-next-line @typescript-eslint/naming-convention
24
+ export function internal_createExtendSxProp() {
25
+ return extendSxProp;
26
+ }
27
+ export { useTheme };
@@ -13,6 +13,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
13
13
  var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
14
14
  var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
15
15
  var _zeroStyled = require("../zero-styled");
16
+ var _DefaultPropsProvider = require("../DefaultPropsProvider");
16
17
  var _Collapse = _interopRequireDefault(require("../Collapse"));
17
18
  var _Paper = _interopRequireDefault(require("../Paper"));
18
19
  var _AccordionContext = _interopRequireDefault(require("./AccordionContext"));
@@ -22,7 +23,6 @@ var _accordionClasses = _interopRequireWildcard(require("./accordionClasses"));
22
23
  var _jsxRuntime = require("react/jsx-runtime");
23
24
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
24
25
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
25
- const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiAccordion');
26
26
  const useUtilityClasses = ownerState => {
27
27
  const {
28
28
  classes,
@@ -126,7 +126,7 @@ const AccordionRoot = (0, _zeroStyled.styled)(_Paper.default, {
126
126
  }]
127
127
  }));
128
128
  const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref) {
129
- const props = useThemeProps({
129
+ const props = (0, _DefaultPropsProvider.useDefaultProps)({
130
130
  props: inProps,
131
131
  name: 'MuiAccordion'
132
132
  });
@@ -290,13 +290,11 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes /* remove-proptypes
290
290
  /**
291
291
  * The component used for the transition.
292
292
  * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
293
- * @deprecated Use `slots.transition` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
294
293
  */
295
294
  TransitionComponent: _propTypes.default.elementType,
296
295
  /**
297
296
  * Props applied to the transition element.
298
297
  * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
299
- * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
300
298
  */
301
299
  TransitionProps: _propTypes.default.object
302
300
  } : void 0;
@@ -11,11 +11,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
11
11
  var _clsx = _interopRequireDefault(require("clsx"));
12
12
  var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
13
13
  var _zeroStyled = require("../zero-styled");
14
+ var _DefaultPropsProvider = require("../DefaultPropsProvider");
14
15
  var _accordionActionsClasses = require("./accordionActionsClasses");
15
16
  var _jsxRuntime = require("react/jsx-runtime");
16
17
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
17
18
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
18
- const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiAccordionActions');
19
19
  const useUtilityClasses = ownerState => {
20
20
  const {
21
21
  classes,
@@ -50,7 +50,7 @@ const AccordionActionsRoot = (0, _zeroStyled.styled)('div', {
50
50
  }]
51
51
  });
52
52
  const AccordionActions = /*#__PURE__*/React.forwardRef(function AccordionActions(inProps, ref) {
53
- const props = useThemeProps({
53
+ const props = (0, _DefaultPropsProvider.useDefaultProps)({
54
54
  props: inProps,
55
55
  name: 'MuiAccordionActions'
56
56
  });
@@ -11,11 +11,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
11
11
  var _clsx = _interopRequireDefault(require("clsx"));
12
12
  var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
13
13
  var _zeroStyled = require("../zero-styled");
14
+ var _DefaultPropsProvider = require("../DefaultPropsProvider");
14
15
  var _accordionDetailsClasses = require("./accordionDetailsClasses");
15
16
  var _jsxRuntime = require("react/jsx-runtime");
16
17
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
17
18
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
18
- const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiAccordionDetails');
19
19
  const useUtilityClasses = ownerState => {
20
20
  const {
21
21
  classes
@@ -35,7 +35,7 @@ const AccordionDetailsRoot = (0, _zeroStyled.styled)('div', {
35
35
  padding: theme.spacing(1, 2, 2)
36
36
  }));
37
37
  const AccordionDetails = /*#__PURE__*/React.forwardRef(function AccordionDetails(inProps, ref) {
38
- const props = useThemeProps({
38
+ const props = (0, _DefaultPropsProvider.useDefaultProps)({
39
39
  props: inProps,
40
40
  name: 'MuiAccordionDetails'
41
41
  });
@@ -11,13 +11,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
11
11
  var _clsx = _interopRequireDefault(require("clsx"));
12
12
  var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
13
13
  var _zeroStyled = require("../zero-styled");
14
+ var _DefaultPropsProvider = require("../DefaultPropsProvider");
14
15
  var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
15
16
  var _AccordionContext = _interopRequireDefault(require("../Accordion/AccordionContext"));
16
17
  var _accordionSummaryClasses = _interopRequireWildcard(require("./accordionSummaryClasses"));
17
18
  var _jsxRuntime = require("react/jsx-runtime");
18
19
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
19
20
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
20
- const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiAccordionSummary');
21
21
  const useUtilityClasses = ownerState => {
22
22
  const {
23
23
  classes,
@@ -107,7 +107,7 @@ const AccordionSummaryExpandIconWrapper = (0, _zeroStyled.styled)('div', {
107
107
  }
108
108
  }));
109
109
  const AccordionSummary = /*#__PURE__*/React.forwardRef(function AccordionSummary(inProps, ref) {
110
- const props = useThemeProps({
110
+ const props = (0, _DefaultPropsProvider.useDefaultProps)({
111
111
  props: inProps,
112
112
  name: 'MuiAccordionSummary'
113
113
  });
@@ -12,6 +12,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
12
12
  var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
13
13
  var _colorManipulator = require("@mui/system/colorManipulator");
14
14
  var _zeroStyled = require("../zero-styled");
15
+ var _DefaultPropsProvider = require("../DefaultPropsProvider");
15
16
  var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
16
17
  var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
17
18
  var _Paper = _interopRequireDefault(require("../Paper"));
@@ -25,7 +26,6 @@ var _Close = _interopRequireDefault(require("../internal/svg-icons/Close"));
25
26
  var _jsxRuntime = require("react/jsx-runtime");
26
27
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
27
28
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
28
- const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiAlert');
29
29
  const useUtilityClasses = ownerState => {
30
30
  const {
31
31
  variant,
@@ -152,7 +152,7 @@ const defaultIconMapping = {
152
152
  })
153
153
  };
154
154
  const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
155
- const props = useThemeProps({
155
+ const props = (0, _DefaultPropsProvider.useDefaultProps)({
156
156
  props: inProps,
157
157
  name: 'MuiAlert'
158
158
  });