@mui/material 5.8.4 → 5.8.5

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 (235) hide show
  1. package/Accordion/accordionClasses.d.ts +18 -18
  2. package/AccordionActions/accordionActionsClasses.d.ts +10 -10
  3. package/AccordionDetails/accordionDetailsClasses.d.ts +8 -8
  4. package/AccordionSummary/accordionSummaryClasses.d.ts +22 -22
  5. package/Alert/alertClasses.d.ts +44 -44
  6. package/AlertTitle/alertTitleClasses.d.ts +8 -8
  7. package/AppBar/AppBar.js +22 -5
  8. package/AppBar/appBarClasses.d.ts +28 -28
  9. package/Autocomplete/autocompleteClasses.d.ts +54 -54
  10. package/Avatar/Avatar.js +7 -4
  11. package/Avatar/avatarClasses.d.ts +20 -20
  12. package/AvatarGroup/avatarGroupClasses.d.ts +10 -10
  13. package/Backdrop/backdropClasses.d.ts +10 -10
  14. package/Badge/Badge.js +2 -2
  15. package/Badge/badgeClasses.d.ts +56 -56
  16. package/BottomNavigation/BottomNavigation.js +0 -0
  17. package/BottomNavigation/bottomNavigationClasses.d.ts +8 -8
  18. package/BottomNavigationAction/bottomNavigationActionClasses.d.ts +14 -14
  19. package/Breadcrumbs/breadcrumbsClasses.d.ts +14 -14
  20. package/Button/buttonClasses.d.ts +100 -100
  21. package/ButtonBase/buttonBaseClasses.d.ts +12 -12
  22. package/ButtonBase/touchRippleClasses.d.ts +20 -20
  23. package/ButtonGroup/ButtonGroupContext.d.ts +18 -18
  24. package/ButtonGroup/buttonGroupClasses.d.ts +58 -58
  25. package/CHANGELOG.md +69 -4
  26. package/Card/cardClasses.d.ts +8 -8
  27. package/CardActionArea/cardActionAreaClasses.d.ts +12 -12
  28. package/CardActions/cardActionsClasses.d.ts +10 -10
  29. package/CardContent/cardContentClasses.d.ts +8 -8
  30. package/CardHeader/cardHeaderClasses.d.ts +18 -18
  31. package/CardMedia/cardMediaClasses.d.ts +12 -12
  32. package/Checkbox/checkboxClasses.d.ts +18 -18
  33. package/Chip/Chip.js +31 -30
  34. package/Chip/chipClasses.d.ts +80 -80
  35. package/CircularProgress/circularProgressClasses.d.ts +26 -26
  36. package/ClickAwayListener/index.d.ts +2 -2
  37. package/Collapse/collapseClasses.d.ts +18 -18
  38. package/Container/containerClasses.d.ts +6 -6
  39. package/Dialog/Dialog.js +11 -6
  40. package/Dialog/DialogContext.d.ts +6 -6
  41. package/Dialog/dialogClasses.d.ts +36 -36
  42. package/DialogActions/dialogActionsClasses.d.ts +10 -10
  43. package/DialogContent/dialogContentClasses.d.ts +10 -10
  44. package/DialogContentText/dialogContentTextClasses.d.ts +8 -8
  45. package/DialogTitle/dialogTitleClasses.d.ts +8 -8
  46. package/Divider/dividerClasses.d.ts +34 -34
  47. package/Drawer/drawerClasses.d.ts +30 -30
  48. package/Fab/fabClasses.d.ts +26 -26
  49. package/FilledInput/FilledInput.js +28 -13
  50. package/FilledInput/filledInputClasses.d.ts +40 -40
  51. package/FormControl/formControlClasses.d.ts +14 -14
  52. package/FormControlLabel/formControlLabelClasses.d.ts +20 -20
  53. package/FormGroup/formGroupClasses.d.ts +12 -12
  54. package/FormHelperText/formHelperTextClasses.d.ts +22 -22
  55. package/FormLabel/formLabelClasses.d.ts +22 -22
  56. package/Grid/gridClasses.d.ts +48 -48
  57. package/Icon/iconClasses.d.ts +24 -24
  58. package/IconButton/iconButtonClasses.d.ts +26 -26
  59. package/ImageList/imageListClasses.d.ts +16 -16
  60. package/ImageListItem/imageListItemClasses.d.ts +18 -18
  61. package/ImageListItemBar/imageListItemBarClasses.d.ts +30 -30
  62. package/Input/inputClasses.d.ts +34 -34
  63. package/InputAdornment/inputAdornmentClasses.d.ts +24 -24
  64. package/InputBase/InputBase.js +2 -2
  65. package/InputBase/inputBaseClasses.d.ts +44 -44
  66. package/InputLabel/inputLabelClasses.d.ts +32 -32
  67. package/LinearProgress/LinearProgress.js +6 -2
  68. package/LinearProgress/linearProgressClasses.d.ts +42 -42
  69. package/Link/getTextDecoration.d.ts +15 -15
  70. package/Link/linkClasses.d.ts +18 -18
  71. package/List/listClasses.d.ts +14 -14
  72. package/ListItem/listItemClasses.d.ts +30 -30
  73. package/ListItemAvatar/listItemAvatarClasses.d.ts +10 -10
  74. package/ListItemButton/listItemButtonClasses.d.ts +22 -22
  75. package/ListItemIcon/listItemIconClasses.d.ts +10 -10
  76. package/ListItemSecondaryAction/listItemSecondaryActionClasses.d.ts +10 -10
  77. package/ListItemText/listItemTextClasses.d.ts +18 -18
  78. package/ListSubheader/listSubheaderClasses.d.ts +18 -18
  79. package/Menu/menuClasses.d.ts +12 -12
  80. package/MenuItem/menuItemClasses.d.ts +20 -20
  81. package/MobileStepper/mobileStepperClasses.d.ts +22 -22
  82. package/Modal/Modal.d.ts +2 -0
  83. package/Modal/Modal.js +25 -8
  84. package/NativeSelect/nativeSelectClasses.d.ts +32 -32
  85. package/OutlinedInput/OutlinedInput.js +25 -10
  86. package/OutlinedInput/outlinedInputClasses.d.ts +36 -36
  87. package/Pagination/paginationClasses.d.ts +14 -14
  88. package/PaginationItem/paginationItemClasses.d.ts +42 -42
  89. package/Paper/paperClasses.d.ts +39 -39
  90. package/Popover/popoverClasses.d.ts +10 -10
  91. package/Popper/Popper.d.ts +29 -29
  92. package/Radio/radioClasses.d.ts +16 -16
  93. package/RadioGroup/RadioGroupContext.d.ts +11 -11
  94. package/RadioGroup/useRadioGroup.d.ts +4 -4
  95. package/Rating/ratingClasses.d.ts +40 -40
  96. package/ScopedCssBaseline/scopedCssBaselineClasses.d.ts +8 -8
  97. package/Select/selectClasses.d.ts +30 -30
  98. package/Skeleton/Skeleton.js +8 -3
  99. package/Skeleton/skeletonClasses.d.ts +24 -24
  100. package/Slider/Slider.js +12 -12
  101. package/Snackbar/snackbarClasses.d.ts +20 -20
  102. package/SnackbarContent/SnackbarContent.js +3 -3
  103. package/SnackbarContent/snackbarContentClasses.d.ts +12 -12
  104. package/SpeedDial/speedDialClasses.d.ts +22 -22
  105. package/SpeedDialAction/SpeedDialAction.js +7 -7
  106. package/SpeedDialAction/speedDialActionClasses.d.ts +20 -20
  107. package/SpeedDialIcon/speedDialIconClasses.d.ts +18 -18
  108. package/Step/StepContext.d.ts +20 -20
  109. package/Step/stepClasses.d.ts +16 -16
  110. package/StepButton/stepButtonClasses.d.ts +14 -14
  111. package/StepConnector/StepConnector.js +14 -11
  112. package/StepConnector/stepConnectorClasses.d.ts +26 -26
  113. package/StepContent/StepContent.js +1 -1
  114. package/StepContent/stepContentClasses.d.ts +12 -12
  115. package/StepIcon/stepIconClasses.d.ts +16 -16
  116. package/StepLabel/stepLabelClasses.d.ts +28 -28
  117. package/Stepper/StepperContext.d.ts +18 -18
  118. package/Stepper/stepperClasses.d.ts +14 -14
  119. package/SvgIcon/svgIconClasses.d.ts +24 -24
  120. package/Switch/Switch.js +11 -11
  121. package/Switch/switchClasses.d.ts +32 -32
  122. package/Tab/tabClasses.d.ts +26 -26
  123. package/TabScrollButton/tabScrollButtonClasses.d.ts +12 -12
  124. package/Table/tableClasses.d.ts +10 -10
  125. package/TableBody/tableBodyClasses.d.ts +8 -8
  126. package/TableCell/TableCell.js +5 -5
  127. package/TableCell/tableCellClasses.d.ts +32 -32
  128. package/TableContainer/tableContainerClasses.d.ts +8 -8
  129. package/TableFooter/tableFooterClasses.d.ts +8 -8
  130. package/TableHead/tableHeadClasses.d.ts +8 -8
  131. package/TablePagination/tablePaginationClasses.d.ts +28 -28
  132. package/TableRow/tableRowClasses.d.ts +16 -16
  133. package/TableSortLabel/tableSortLabelClasses.d.ts +16 -16
  134. package/Tabs/Tabs.js +6 -16
  135. package/Tabs/tabsClasses.d.ts +32 -32
  136. package/TextField/textFieldClasses.d.ts +8 -8
  137. package/ToggleButton/toggleButtonClasses.d.ts +24 -24
  138. package/ToggleButtonGroup/toggleButtonGroupClasses.d.ts +18 -18
  139. package/Toolbar/toolbarClasses.d.ts +14 -14
  140. package/Tooltip/Tooltip.js +1 -1
  141. package/Tooltip/tooltipClasses.d.ts +30 -30
  142. package/Typography/typographyClasses.d.ts +50 -50
  143. package/className/index.d.ts +1 -1
  144. package/darkScrollbar/index.d.ts +28 -28
  145. package/index.js +1 -1
  146. package/internal/switchBaseClasses.d.ts +12 -12
  147. package/legacy/AppBar/AppBar.js +23 -4
  148. package/legacy/Avatar/Avatar.js +7 -4
  149. package/legacy/Badge/Badge.js +2 -2
  150. package/legacy/BottomNavigation/BottomNavigation.js +0 -0
  151. package/legacy/Chip/Chip.js +31 -30
  152. package/legacy/Dialog/Dialog.js +11 -6
  153. package/legacy/FilledInput/FilledInput.js +28 -14
  154. package/legacy/InputBase/InputBase.js +2 -2
  155. package/legacy/LinearProgress/LinearProgress.js +6 -2
  156. package/legacy/Modal/Modal.js +23 -7
  157. package/legacy/OutlinedInput/OutlinedInput.js +21 -9
  158. package/legacy/Skeleton/Skeleton.js +2 -2
  159. package/legacy/Slider/Slider.js +12 -12
  160. package/legacy/SnackbarContent/SnackbarContent.js +3 -3
  161. package/legacy/SpeedDialAction/SpeedDialAction.js +7 -7
  162. package/legacy/StepConnector/StepConnector.js +2 -1
  163. package/legacy/StepContent/StepContent.js +1 -1
  164. package/legacy/Switch/Switch.js +11 -11
  165. package/legacy/TableCell/TableCell.js +5 -5
  166. package/legacy/Tabs/Tabs.js +6 -16
  167. package/legacy/Tooltip/Tooltip.js +1 -1
  168. package/legacy/index.js +1 -1
  169. package/legacy/styles/CssVarsProvider.js +1 -1
  170. package/legacy/styles/experimental_extendTheme.js +113 -18
  171. package/locale/index.d.ts +71 -71
  172. package/modern/AppBar/AppBar.js +22 -5
  173. package/modern/Avatar/Avatar.js +7 -4
  174. package/modern/Badge/Badge.js +2 -2
  175. package/modern/BottomNavigation/BottomNavigation.js +0 -0
  176. package/modern/Chip/Chip.js +31 -30
  177. package/modern/Dialog/Dialog.js +11 -6
  178. package/modern/FilledInput/FilledInput.js +27 -12
  179. package/modern/InputBase/InputBase.js +2 -2
  180. package/modern/LinearProgress/LinearProgress.js +6 -2
  181. package/modern/Modal/Modal.js +24 -7
  182. package/modern/OutlinedInput/OutlinedInput.js +25 -10
  183. package/modern/Skeleton/Skeleton.js +7 -2
  184. package/modern/Slider/Slider.js +12 -12
  185. package/modern/SnackbarContent/SnackbarContent.js +3 -3
  186. package/modern/SpeedDialAction/SpeedDialAction.js +7 -7
  187. package/modern/StepConnector/StepConnector.js +14 -11
  188. package/modern/StepContent/StepContent.js +1 -1
  189. package/modern/Switch/Switch.js +11 -11
  190. package/modern/TableCell/TableCell.js +5 -5
  191. package/modern/Tabs/Tabs.js +6 -16
  192. package/modern/Tooltip/Tooltip.js +1 -1
  193. package/modern/index.js +1 -1
  194. package/modern/styles/CssVarsProvider.js +1 -1
  195. package/modern/styles/experimental_extendTheme.js +114 -18
  196. package/node/AppBar/AppBar.js +22 -5
  197. package/node/Avatar/Avatar.js +7 -4
  198. package/node/Badge/Badge.js +2 -2
  199. package/node/BottomNavigation/BottomNavigation.js +0 -0
  200. package/node/Chip/Chip.js +31 -30
  201. package/node/Dialog/Dialog.js +11 -6
  202. package/node/FilledInput/FilledInput.js +28 -13
  203. package/node/InputBase/InputBase.js +2 -2
  204. package/node/LinearProgress/LinearProgress.js +6 -2
  205. package/node/Modal/Modal.js +25 -8
  206. package/node/OutlinedInput/OutlinedInput.js +25 -10
  207. package/node/Skeleton/Skeleton.js +7 -2
  208. package/node/Slider/Slider.js +12 -12
  209. package/node/SnackbarContent/SnackbarContent.js +3 -3
  210. package/node/SpeedDialAction/SpeedDialAction.js +7 -7
  211. package/node/StepConnector/StepConnector.js +14 -11
  212. package/node/StepContent/StepContent.js +1 -1
  213. package/node/Switch/Switch.js +11 -11
  214. package/node/TableCell/TableCell.js +5 -5
  215. package/node/Tabs/Tabs.js +6 -16
  216. package/node/Tooltip/Tooltip.js +1 -1
  217. package/node/index.js +1 -1
  218. package/node/styles/CssVarsProvider.js +1 -1
  219. package/node/styles/experimental_extendTheme.js +112 -17
  220. package/package.json +4 -4
  221. package/styles/CssVarsProvider.js +1 -1
  222. package/styles/createPalette.d.ts +65 -2
  223. package/styles/experimental_extendTheme.js +114 -18
  224. package/transitions/index.d.ts +1 -1
  225. package/transitions/transition.d.ts +13 -13
  226. package/transitions/utils.d.ts +23 -23
  227. package/umd/material-ui.development.js +548 -240
  228. package/umd/material-ui.production.min.js +27 -22
  229. package/useMediaQuery/useMediaQuery.d.ts +31 -31
  230. package/useTouchRipple/index.d.ts +1 -1
  231. package/useTouchRipple/useTouchRipple.d.ts +28 -28
  232. package/utils/getScrollbarSize.d.ts +2 -2
  233. package/utils/ownerDocument.d.ts +2 -2
  234. package/utils/ownerWindow.d.ts +2 -2
  235. package/utils/setRef.d.ts +2 -2
@@ -1,10 +1,10 @@
1
- export interface ListItemIconClasses {
2
- /** Styles applied to the root element. */
3
- root: string;
4
- /** Styles applied to the root element when the parent `ListItem` uses `alignItems="flex-start"`. */
5
- alignItemsFlexStart: string;
6
- }
7
- export declare type ListItemIconClassKey = keyof ListItemIconClasses;
8
- export declare function getListItemIconUtilityClass(slot: string): string;
9
- declare const listItemIconClasses: ListItemIconClasses;
10
- export default listItemIconClasses;
1
+ export interface ListItemIconClasses {
2
+ /** Styles applied to the root element. */
3
+ root: string;
4
+ /** Styles applied to the root element when the parent `ListItem` uses `alignItems="flex-start"`. */
5
+ alignItemsFlexStart: string;
6
+ }
7
+ export declare type ListItemIconClassKey = keyof ListItemIconClasses;
8
+ export declare function getListItemIconUtilityClass(slot: string): string;
9
+ declare const listItemIconClasses: ListItemIconClasses;
10
+ export default listItemIconClasses;
@@ -1,10 +1,10 @@
1
- export interface ListItemSecondaryActionClasses {
2
- /** Styles applied to the root element. */
3
- root: string;
4
- /** Styles applied to the root element when the parent `ListItem` has `disableGutters={true}`. */
5
- disableGutters: string;
6
- }
7
- export declare type ListItemSecondaryActionClassKey = keyof ListItemSecondaryActionClasses;
8
- export declare function getListItemSecondaryActionClassesUtilityClass(slot: string): string;
9
- declare const listItemSecondaryActionClasses: ListItemSecondaryActionClasses;
10
- export default listItemSecondaryActionClasses;
1
+ export interface ListItemSecondaryActionClasses {
2
+ /** Styles applied to the root element. */
3
+ root: string;
4
+ /** Styles applied to the root element when the parent `ListItem` has `disableGutters={true}`. */
5
+ disableGutters: string;
6
+ }
7
+ export declare type ListItemSecondaryActionClassKey = keyof ListItemSecondaryActionClasses;
8
+ export declare function getListItemSecondaryActionClassesUtilityClass(slot: string): string;
9
+ declare const listItemSecondaryActionClasses: ListItemSecondaryActionClasses;
10
+ export default listItemSecondaryActionClasses;
@@ -1,18 +1,18 @@
1
- export interface ListItemTextClasses {
2
- /** Styles applied to the root element. */
3
- root: string;
4
- /** Styles applied to the Typography component if primary and secondary are set. */
5
- multiline: string;
6
- /** Styles applied to the Typography component if dense. */
7
- dense: string;
8
- /** Styles applied to the root element if `inset={true}`. */
9
- inset: string;
10
- /** Styles applied to the primary `Typography` component. */
11
- primary: string;
12
- /** Styles applied to the secondary `Typography` component. */
13
- secondary: string;
14
- }
15
- export declare type ListItemTextClassKey = keyof ListItemTextClasses;
16
- export declare function getListItemTextUtilityClass(slot: string): string;
17
- declare const listItemTextClasses: ListItemTextClasses;
18
- export default listItemTextClasses;
1
+ export interface ListItemTextClasses {
2
+ /** Styles applied to the root element. */
3
+ root: string;
4
+ /** Styles applied to the Typography component if primary and secondary are set. */
5
+ multiline: string;
6
+ /** Styles applied to the Typography component if dense. */
7
+ dense: string;
8
+ /** Styles applied to the root element if `inset={true}`. */
9
+ inset: string;
10
+ /** Styles applied to the primary `Typography` component. */
11
+ primary: string;
12
+ /** Styles applied to the secondary `Typography` component. */
13
+ secondary: string;
14
+ }
15
+ export declare type ListItemTextClassKey = keyof ListItemTextClasses;
16
+ export declare function getListItemTextUtilityClass(slot: string): string;
17
+ declare const listItemTextClasses: ListItemTextClasses;
18
+ export default listItemTextClasses;
@@ -1,18 +1,18 @@
1
- export interface ListSubheaderClasses {
2
- /** Styles applied to the root element. */
3
- root: string;
4
- /** Styles applied to the root element if `color="primary"`. */
5
- colorPrimary: string;
6
- /** Styles applied to the root element if `color="inherit"`. */
7
- colorInherit: string;
8
- /** Styles applied to the inner `component` element unless `disableGutters={true}`. */
9
- gutters: string;
10
- /** Styles applied to the root element if `inset={true}`. */
11
- inset: string;
12
- /** Styles applied to the root element unless `disableSticky={true}`. */
13
- sticky: string;
14
- }
15
- export declare type ListSubheaderClassKey = keyof ListSubheaderClasses;
16
- export declare function getListSubheaderUtilityClass(slot: string): string;
17
- declare const listSubheaderClasses: ListSubheaderClasses;
18
- export default listSubheaderClasses;
1
+ export interface ListSubheaderClasses {
2
+ /** Styles applied to the root element. */
3
+ root: string;
4
+ /** Styles applied to the root element if `color="primary"`. */
5
+ colorPrimary: string;
6
+ /** Styles applied to the root element if `color="inherit"`. */
7
+ colorInherit: string;
8
+ /** Styles applied to the inner `component` element unless `disableGutters={true}`. */
9
+ gutters: string;
10
+ /** Styles applied to the root element if `inset={true}`. */
11
+ inset: string;
12
+ /** Styles applied to the root element unless `disableSticky={true}`. */
13
+ sticky: string;
14
+ }
15
+ export declare type ListSubheaderClassKey = keyof ListSubheaderClasses;
16
+ export declare function getListSubheaderUtilityClass(slot: string): string;
17
+ declare const listSubheaderClasses: ListSubheaderClasses;
18
+ export default listSubheaderClasses;
@@ -1,12 +1,12 @@
1
- export interface MenuClasses {
2
- /** Styles applied to the root element. */
3
- root: string;
4
- /** Styles applied to the Paper component. */
5
- paper: string;
6
- /** Styles applied to the List component via `MenuList`. */
7
- list: string;
8
- }
9
- export declare type MenuClassKey = keyof MenuClasses;
10
- export declare function getMenuUtilityClass(slot: string): string;
11
- declare const menuClasses: MenuClasses;
12
- export default menuClasses;
1
+ export interface MenuClasses {
2
+ /** Styles applied to the root element. */
3
+ root: string;
4
+ /** Styles applied to the Paper component. */
5
+ paper: string;
6
+ /** Styles applied to the List component via `MenuList`. */
7
+ list: string;
8
+ }
9
+ export declare type MenuClassKey = keyof MenuClasses;
10
+ export declare function getMenuUtilityClass(slot: string): string;
11
+ declare const menuClasses: MenuClasses;
12
+ export default menuClasses;
@@ -1,20 +1,20 @@
1
- export interface MenuItemClasses {
2
- /** Styles applied to the root element. */
3
- root: string;
4
- /** State class applied to the root element if keyboard focused. */
5
- focusVisible: string;
6
- /** Styles applied to the root element if dense. */
7
- dense: string;
8
- /** State class applied to the root element if `disabled={true}`. */
9
- disabled: string;
10
- /** Styles applied to the root element if `divider={true}`. */
11
- divider: string;
12
- /** Styles applied to the inner `component` element unless `disableGutters={true}`. */
13
- gutters: string;
14
- /** State class applied to the root element if `selected={true}`. */
15
- selected: string;
16
- }
17
- export declare type MenuItemClassKey = keyof MenuItemClasses;
18
- export declare function getMenuItemUtilityClass(slot: string): string;
19
- declare const menuItemClasses: MenuItemClasses;
20
- export default menuItemClasses;
1
+ export interface MenuItemClasses {
2
+ /** Styles applied to the root element. */
3
+ root: string;
4
+ /** State class applied to the root element if keyboard focused. */
5
+ focusVisible: string;
6
+ /** Styles applied to the root element if dense. */
7
+ dense: string;
8
+ /** State class applied to the root element if `disabled={true}`. */
9
+ disabled: string;
10
+ /** Styles applied to the root element if `divider={true}`. */
11
+ divider: string;
12
+ /** Styles applied to the inner `component` element unless `disableGutters={true}`. */
13
+ gutters: string;
14
+ /** State class applied to the root element if `selected={true}`. */
15
+ selected: string;
16
+ }
17
+ export declare type MenuItemClassKey = keyof MenuItemClasses;
18
+ export declare function getMenuItemUtilityClass(slot: string): string;
19
+ declare const menuItemClasses: MenuItemClasses;
20
+ export default menuItemClasses;
@@ -1,22 +1,22 @@
1
- export interface MobileStepperClasses {
2
- /** Styles applied to the root element. */
3
- root: string;
4
- /** Styles applied to the root element if `position="bottom"`. */
5
- positionBottom: string;
6
- /** Styles applied to the root element if `position="top"`. */
7
- positionTop: string;
8
- /** Styles applied to the root element if `position="static"`. */
9
- positionStatic: string;
10
- /** Styles applied to the dots container if `variant="dots"`. */
11
- dots: string;
12
- /** Styles applied to each dot if `variant="dots"`. */
13
- dot: string;
14
- /** Styles applied to a dot if `variant="dots"` and this is the active step. */
15
- dotActive: string;
16
- /** Styles applied to the Linear Progress component if `variant="progress"`. */
17
- progress: string;
18
- }
19
- export declare type MobileStepperClassKey = keyof MobileStepperClasses;
20
- export declare function getMobileStepperUtilityClass(slot: string): string;
21
- declare const mobileStepperClasses: MobileStepperClasses;
22
- export default mobileStepperClasses;
1
+ export interface MobileStepperClasses {
2
+ /** Styles applied to the root element. */
3
+ root: string;
4
+ /** Styles applied to the root element if `position="bottom"`. */
5
+ positionBottom: string;
6
+ /** Styles applied to the root element if `position="top"`. */
7
+ positionTop: string;
8
+ /** Styles applied to the root element if `position="static"`. */
9
+ positionStatic: string;
10
+ /** Styles applied to the dots container if `variant="dots"`. */
11
+ dots: string;
12
+ /** Styles applied to each dot if `variant="dots"`. */
13
+ dot: string;
14
+ /** Styles applied to a dot if `variant="dots"` and this is the active step. */
15
+ dotActive: string;
16
+ /** Styles applied to the Linear Progress component if `variant="progress"`. */
17
+ progress: string;
18
+ }
19
+ export declare type MobileStepperClassKey = keyof MobileStepperClasses;
20
+ export declare function getMobileStepperUtilityClass(slot: string): string;
21
+ declare const mobileStepperClasses: MobileStepperClasses;
22
+ export default mobileStepperClasses;
package/Modal/Modal.d.ts CHANGED
@@ -9,6 +9,7 @@ export type ModalTypeMap<D extends React.ElementType = 'div', P = {}> = ExtendMo
9
9
  props: P & {
10
10
  /**
11
11
  * A backdrop component. This prop enables custom backdrop rendering.
12
+ * @deprecated Use `components.Backdrop` instead.
12
13
  * @default styled(Backdrop, {
13
14
  * name: 'MuiModal',
14
15
  * slot: 'Backdrop',
@@ -22,6 +23,7 @@ export type ModalTypeMap<D extends React.ElementType = 'div', P = {}> = ExtendMo
22
23
  BackdropComponent?: React.ElementType<BackdropProps>;
23
24
  /**
24
25
  * Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.
26
+ * @deprecated Use `componentsProps.backdrop` instead.
25
27
  */
26
28
  BackdropProps?: Partial<BackdropProps>;
27
29
  /**
package/Modal/Modal.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
2
2
  import _extends from "@babel/runtime/helpers/esm/extends";
3
- const _excluded = ["BackdropComponent", "closeAfterTransition", "children", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted"];
3
+ const _excluded = ["BackdropComponent", "BackdropProps", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "theme"];
4
4
  import * as React from 'react';
5
5
  import PropTypes from 'prop-types';
6
6
  import { isHostComponent } from '@mui/base';
@@ -62,7 +62,7 @@ const ModalBackdrop = styled(Backdrop, {
62
62
  */
63
63
 
64
64
  const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
65
- var _componentsProps$root;
65
+ var _ref, _components$Root;
66
66
 
67
67
  const props = useThemeProps({
68
68
  name: 'MuiModal',
@@ -71,8 +71,10 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
71
71
 
72
72
  const {
73
73
  BackdropComponent = ModalBackdrop,
74
+ BackdropProps,
74
75
  closeAfterTransition = false,
75
76
  children,
77
+ component,
76
78
  components = {},
77
79
  componentsProps = {},
78
80
  disableAutoFocus = false,
@@ -82,7 +84,9 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
82
84
  disableRestoreFocus = false,
83
85
  disableScrollLock = false,
84
86
  hideBackdrop = false,
85
- keepMounted = false
87
+ keepMounted = false,
88
+ // eslint-disable-next-line react/prop-types
89
+ theme
86
90
  } = props,
87
91
  other = _objectWithoutPropertiesLoose(props, _excluded);
88
92
 
@@ -104,16 +108,19 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
104
108
  });
105
109
 
106
110
  const classes = extendUtilityClasses(ownerState);
111
+ const Root = (_ref = (_components$Root = components.Root) != null ? _components$Root : component) != null ? _ref : ModalRoot;
107
112
  return /*#__PURE__*/_jsx(ModalUnstyled, _extends({
108
113
  components: _extends({
109
- Root: ModalRoot
114
+ Root,
115
+ Backdrop: BackdropComponent
110
116
  }, components),
111
117
  componentsProps: {
112
- root: _extends({}, componentsProps.root, (!components.Root || !isHostComponent(components.Root)) && {
113
- ownerState: _extends({}, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState)
114
- })
118
+ root: _extends({}, componentsProps.root, !isHostComponent(Root) && {
119
+ as: component,
120
+ theme
121
+ }),
122
+ backdrop: _extends({}, BackdropProps, componentsProps.backdrop)
115
123
  },
116
- BackdropComponent: BackdropComponent,
117
124
  onTransitionEnter: () => setExited(false),
118
125
  onTransitionExited: () => setExited(true),
119
126
  ref: ref
@@ -133,6 +140,7 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
133
140
 
134
141
  /**
135
142
  * A backdrop component. This prop enables custom backdrop rendering.
143
+ * @deprecated Use `components.Backdrop` instead.
136
144
  * @default styled(Backdrop, {
137
145
  * name: 'MuiModal',
138
146
  * slot: 'Backdrop',
@@ -147,6 +155,7 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
147
155
 
148
156
  /**
149
157
  * Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.
158
+ * @deprecated Use `componentsProps.backdrop` instead.
150
159
  */
151
160
  BackdropProps: PropTypes.object,
152
161
 
@@ -166,12 +175,19 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
166
175
  */
167
176
  closeAfterTransition: PropTypes.bool,
168
177
 
178
+ /**
179
+ * The component used for the root node.
180
+ * Either a string to use a HTML element or a component.
181
+ */
182
+ component: PropTypes.elementType,
183
+
169
184
  /**
170
185
  * The components used for each slot inside the Modal.
171
186
  * Either a string to use a HTML element or a component.
172
187
  * @default {}
173
188
  */
174
189
  components: PropTypes.shape({
190
+ Backdrop: PropTypes.elementType,
175
191
  Root: PropTypes.elementType
176
192
  }),
177
193
 
@@ -180,6 +196,7 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
180
196
  * @default {}
181
197
  */
182
198
  componentsProps: PropTypes.shape({
199
+ backdrop: PropTypes.object,
183
200
  root: PropTypes.object
184
201
  }),
185
202
 
@@ -1,32 +1,32 @@
1
- export interface NativeSelectClasses {
2
- /** Styles applied to the root element. */
3
- root: string;
4
- /** Styles applied to the select component `select` class. */
5
- select: string;
6
- /** Styles applied to the select component if `multiple={true}`. */
7
- multiple: string;
8
- /** Styles applied to the select component if `variant="filled"`. */
9
- filled: string;
10
- /** Styles applied to the select component if `variant="outlined"`. */
11
- outlined: string;
12
- /** Styles applied to the select component if `variant="standard"`. */
13
- standard: string;
14
- /** State class applied to the select component `disabled` class. */
15
- disabled: string;
16
- /** Styles applied to the icon component. */
17
- icon: string;
18
- /** Styles applied to the icon component if the popup is open. */
19
- iconOpen: string;
20
- /** Styles applied to the icon component if `variant="filled"`. */
21
- iconFilled: string;
22
- /** Styles applied to the icon component if `variant="outlined"`. */
23
- iconOutlined: string;
24
- /** Styles applied to the icon component if `variant="standard"`. */
25
- iconStandard: string;
26
- /** Styles applied to the underlying native input component. */
27
- nativeInput: string;
28
- }
29
- export declare type NativeSelectClassKey = keyof NativeSelectClasses;
30
- export declare function getNativeSelectUtilityClasses(slot: string): string;
31
- declare const nativeSelectClasses: NativeSelectClasses;
32
- export default nativeSelectClasses;
1
+ export interface NativeSelectClasses {
2
+ /** Styles applied to the root element. */
3
+ root: string;
4
+ /** Styles applied to the select component `select` class. */
5
+ select: string;
6
+ /** Styles applied to the select component if `multiple={true}`. */
7
+ multiple: string;
8
+ /** Styles applied to the select component if `variant="filled"`. */
9
+ filled: string;
10
+ /** Styles applied to the select component if `variant="outlined"`. */
11
+ outlined: string;
12
+ /** Styles applied to the select component if `variant="standard"`. */
13
+ standard: string;
14
+ /** State class applied to the select component `disabled` class. */
15
+ disabled: string;
16
+ /** Styles applied to the icon component. */
17
+ icon: string;
18
+ /** Styles applied to the icon component if the popup is open. */
19
+ iconOpen: string;
20
+ /** Styles applied to the icon component if `variant="filled"`. */
21
+ iconFilled: string;
22
+ /** Styles applied to the icon component if `variant="outlined"`. */
23
+ iconOutlined: string;
24
+ /** Styles applied to the icon component if `variant="standard"`. */
25
+ iconStandard: string;
26
+ /** Styles applied to the underlying native input component. */
27
+ nativeInput: string;
28
+ }
29
+ export declare type NativeSelectClassKey = keyof NativeSelectClasses;
30
+ export declare function getNativeSelectUtilityClasses(slot: string): string;
31
+ declare const nativeSelectClasses: NativeSelectClasses;
32
+ export default nativeSelectClasses;
@@ -40,25 +40,25 @@ const OutlinedInputRoot = styled(InputBaseRoot, {
40
40
  const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
41
41
  return _extends({
42
42
  position: 'relative',
43
- borderRadius: theme.shape.borderRadius,
43
+ borderRadius: (theme.vars || theme).shape.borderRadius,
44
44
  [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
45
- borderColor: theme.palette.text.primary
45
+ borderColor: (theme.vars || theme).palette.text.primary
46
46
  },
47
47
  // Reset on touch devices, it doesn't add specificity
48
48
  '@media (hover: none)': {
49
49
  [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
50
- borderColor
50
+ borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
51
51
  }
52
52
  },
53
53
  [`&.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: {
54
- borderColor: theme.palette[ownerState.color].main,
54
+ borderColor: (theme.vars || theme).palette[ownerState.color].main,
55
55
  borderWidth: 2
56
56
  },
57
57
  [`&.${outlinedInputClasses.error} .${outlinedInputClasses.notchedOutline}`]: {
58
- borderColor: theme.palette.error.main
58
+ borderColor: (theme.vars || theme).palette.error.main
59
59
  },
60
60
  [`&.${outlinedInputClasses.disabled} .${outlinedInputClasses.notchedOutline}`]: {
61
- borderColor: theme.palette.action.disabled
61
+ borderColor: (theme.vars || theme).palette.action.disabled
62
62
  }
63
63
  }, ownerState.startAdornment && {
64
64
  paddingLeft: 14
@@ -76,9 +76,12 @@ const NotchedOutlineRoot = styled(NotchedOutline, {
76
76
  overridesResolver: (props, styles) => styles.notchedOutline
77
77
  })(({
78
78
  theme
79
- }) => ({
80
- borderColor: theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'
81
- }));
79
+ }) => {
80
+ const borderColor = theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
81
+ return {
82
+ borderColor: theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : borderColor
83
+ };
84
+ });
82
85
  const OutlinedInputInput = styled(InputBaseInput, {
83
86
  name: 'MuiOutlinedInput',
84
87
  slot: 'Input',
@@ -87,13 +90,25 @@ const OutlinedInputInput = styled(InputBaseInput, {
87
90
  theme,
88
91
  ownerState
89
92
  }) => _extends({
90
- padding: '16.5px 14px',
93
+ padding: '16.5px 14px'
94
+ }, !theme.vars && {
91
95
  '&:-webkit-autofill': {
92
96
  WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset',
93
97
  WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff',
94
98
  caretColor: theme.palette.mode === 'light' ? null : '#fff',
95
99
  borderRadius: 'inherit'
96
100
  }
101
+ }, theme.vars && {
102
+ '&:-webkit-autofill': {
103
+ borderRadius: 'inherit'
104
+ },
105
+ [theme.getColorSchemeSelector('dark')]: {
106
+ '&:-webkit-autofill': {
107
+ WebkitBoxShadow: '0 0 0 100px #266798 inset',
108
+ WebkitTextFillColor: '#fff',
109
+ caretColor: '#fff'
110
+ }
111
+ }
97
112
  }, ownerState.size === 'small' && {
98
113
  padding: '8.5px 14px'
99
114
  }, ownerState.multiline && {
@@ -1,36 +1,36 @@
1
- export interface OutlinedInputClasses {
2
- /** Styles applied to the root element. */
3
- root: string;
4
- /** Styles applied to the root element if the color is secondary. */
5
- colorSecondary: string;
6
- /** Styles applied to the root element if the component is focused. */
7
- focused: string;
8
- /** Styles applied to the root element if `disabled={true}`. */
9
- disabled: string;
10
- /** Styles applied to the root element if `startAdornment` is provided. */
11
- adornedStart: string;
12
- /** Styles applied to the root element if `endAdornment` is provided. */
13
- adornedEnd: string;
14
- /** State class applied to the root element if `error={true}`. */
15
- error: string;
16
- /** Styles applied to the input element if `size="small"`. */
17
- sizeSmall: string;
18
- /** Styles applied to the root element if `multiline={true}`. */
19
- multiline: string;
20
- /** Styles applied to the NotchedOutline element. */
21
- notchedOutline: string;
22
- /** Styles applied to the input element. */
23
- input: string;
24
- /** Styles applied to the input element if `size="small"`. */
25
- inputSizeSmall: string;
26
- /** Styles applied to the input element if `multiline={true}`. */
27
- inputMultiline: string;
28
- /** Styles applied to the input element if `startAdornment` is provided. */
29
- inputAdornedStart: string;
30
- /** Styles applied to the input element if `endAdornment` is provided. */
31
- inputAdornedEnd: string;
32
- }
33
- export declare type OutlinedInputClassKey = keyof OutlinedInputClasses;
34
- export declare function getOutlinedInputUtilityClass(slot: string): string;
35
- declare const outlinedInputClasses: OutlinedInputClasses;
36
- export default outlinedInputClasses;
1
+ export interface OutlinedInputClasses {
2
+ /** Styles applied to the root element. */
3
+ root: string;
4
+ /** Styles applied to the root element if the color is secondary. */
5
+ colorSecondary: string;
6
+ /** Styles applied to the root element if the component is focused. */
7
+ focused: string;
8
+ /** Styles applied to the root element if `disabled={true}`. */
9
+ disabled: string;
10
+ /** Styles applied to the root element if `startAdornment` is provided. */
11
+ adornedStart: string;
12
+ /** Styles applied to the root element if `endAdornment` is provided. */
13
+ adornedEnd: string;
14
+ /** State class applied to the root element if `error={true}`. */
15
+ error: string;
16
+ /** Styles applied to the input element if `size="small"`. */
17
+ sizeSmall: string;
18
+ /** Styles applied to the root element if `multiline={true}`. */
19
+ multiline: string;
20
+ /** Styles applied to the NotchedOutline element. */
21
+ notchedOutline: string;
22
+ /** Styles applied to the input element. */
23
+ input: string;
24
+ /** Styles applied to the input element if `size="small"`. */
25
+ inputSizeSmall: string;
26
+ /** Styles applied to the input element if `multiline={true}`. */
27
+ inputMultiline: string;
28
+ /** Styles applied to the input element if `startAdornment` is provided. */
29
+ inputAdornedStart: string;
30
+ /** Styles applied to the input element if `endAdornment` is provided. */
31
+ inputAdornedEnd: string;
32
+ }
33
+ export declare type OutlinedInputClassKey = keyof OutlinedInputClasses;
34
+ export declare function getOutlinedInputUtilityClass(slot: string): string;
35
+ declare const outlinedInputClasses: OutlinedInputClasses;
36
+ export default outlinedInputClasses;
@@ -1,14 +1,14 @@
1
- export interface PaginationClasses {
2
- /** Styles applied to the root element. */
3
- root: string;
4
- /** Styles applied to the ul element. */
5
- ul: string;
6
- /** Styles applied to the root element if `variant="outlined"`. */
7
- outlined: string;
8
- /** Styles applied to the root element if `variant="text"`. */
9
- text: string;
10
- }
11
- export declare type PaginationClassKey = keyof PaginationClasses;
12
- export declare function getPaginationUtilityClass(slot: string): string;
13
- declare const paginationClasses: PaginationClasses;
14
- export default paginationClasses;
1
+ export interface PaginationClasses {
2
+ /** Styles applied to the root element. */
3
+ root: string;
4
+ /** Styles applied to the ul element. */
5
+ ul: string;
6
+ /** Styles applied to the root element if `variant="outlined"`. */
7
+ outlined: string;
8
+ /** Styles applied to the root element if `variant="text"`. */
9
+ text: string;
10
+ }
11
+ export declare type PaginationClassKey = keyof PaginationClasses;
12
+ export declare function getPaginationUtilityClass(slot: string): string;
13
+ declare const paginationClasses: PaginationClasses;
14
+ export default paginationClasses;