@mui/material 6.4.3 → 7.0.0-alpha.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 (194) hide show
  1. package/Accordion/Accordion.d.ts +3 -3
  2. package/AccordionActions/AccordionActions.d.ts +2 -2
  3. package/AccordionDetails/AccordionDetails.d.ts +2 -2
  4. package/AccordionSummary/AccordionSummary.d.ts +3 -3
  5. package/Alert/Alert.d.ts +3 -3
  6. package/AlertTitle/AlertTitle.d.ts +3 -3
  7. package/AppBar/AppBar.d.ts +3 -3
  8. package/Autocomplete/Autocomplete.d.ts +2 -2
  9. package/Avatar/Avatar.d.ts +2 -2
  10. package/AvatarGroup/AvatarGroup.d.ts +2 -2
  11. package/Backdrop/Backdrop.d.ts +3 -3
  12. package/Badge/Badge.d.ts +3 -3
  13. package/BottomNavigation/BottomNavigation.d.ts +2 -2
  14. package/BottomNavigationAction/BottomNavigationAction.d.ts +3 -3
  15. package/Box/Box.d.ts +2 -2
  16. package/Breadcrumbs/Breadcrumbs.d.ts +3 -3
  17. package/Button/Button.d.ts +4 -4
  18. package/ButtonBase/ButtonBase.d.ts +2 -2
  19. package/ButtonGroup/ButtonGroup.d.ts +2 -2
  20. package/CHANGELOG.md +24 -2242
  21. package/Card/Card.d.ts +3 -3
  22. package/CardActionArea/CardActionArea.d.ts +3 -3
  23. package/CardActions/CardActions.d.ts +2 -2
  24. package/CardContent/CardContent.d.ts +2 -2
  25. package/CardHeader/CardHeader.d.ts +2 -2
  26. package/CardMedia/CardMedia.d.ts +2 -2
  27. package/Checkbox/Checkbox.d.ts +4 -4
  28. package/Chip/Chip.d.ts +2 -2
  29. package/CircularProgress/CircularProgress.d.ts +3 -7
  30. package/ClickAwayListener/ClickAwayListener.d.ts +3 -3
  31. package/ClickAwayListener/ClickAwayListener.js +3 -3
  32. package/Collapse/Collapse.d.ts +5 -5
  33. package/Container/Container.d.ts +2 -2
  34. package/CssBaseline/CssBaseline.d.ts +2 -2
  35. package/Dialog/Dialog.d.ts +3 -3
  36. package/DialogActions/DialogActions.d.ts +2 -2
  37. package/DialogContent/DialogContent.d.ts +2 -2
  38. package/DialogContentText/DialogContentText.d.ts +3 -3
  39. package/DialogTitle/DialogTitle.d.ts +3 -3
  40. package/Divider/Divider.d.ts +3 -3
  41. package/Drawer/Drawer.d.ts +3 -3
  42. package/Fab/Fab.d.ts +3 -3
  43. package/Fade/Fade.d.ts +3 -3
  44. package/FilledInput/FilledInput.d.ts +3 -3
  45. package/FormControl/FormControl.d.ts +6 -6
  46. package/FormControlLabel/FormControlLabel.d.ts +4 -4
  47. package/FormGroup/FormGroup.d.ts +3 -3
  48. package/FormHelperText/FormHelperText.d.ts +2 -2
  49. package/FormLabel/FormLabel.d.ts +4 -4
  50. package/GlobalStyles/GlobalStyles.d.ts +2 -2
  51. package/Grid/Grid.d.ts +2 -2
  52. package/Grid2/Grid2.d.ts +2 -2
  53. package/Grid2/Grid2.js +2 -2
  54. package/Grow/Grow.d.ts +5 -5
  55. package/Hidden/Hidden.d.ts +2 -2
  56. package/Icon/Icon.d.ts +3 -3
  57. package/IconButton/IconButton.d.ts +4 -4
  58. package/ImageList/ImageList.d.ts +2 -2
  59. package/ImageListItem/ImageListItem.d.ts +2 -2
  60. package/ImageListItemBar/ImageListItemBar.d.ts +2 -2
  61. package/Input/Input.d.ts +3 -3
  62. package/InputAdornment/InputAdornment.d.ts +2 -2
  63. package/InputBase/InputBase.d.ts +2 -2
  64. package/InputLabel/InputLabel.d.ts +3 -3
  65. package/LinearProgress/LinearProgress.d.ts +3 -7
  66. package/Link/Link.d.ts +4 -4
  67. package/List/List.d.ts +3 -3
  68. package/ListItem/ListItem.d.ts +3 -3
  69. package/ListItemAvatar/ListItemAvatar.d.ts +2 -2
  70. package/ListItemButton/ListItemButton.d.ts +3 -3
  71. package/ListItemIcon/ListItemIcon.d.ts +2 -2
  72. package/ListItemSecondaryAction/ListItemSecondaryAction.d.ts +2 -2
  73. package/ListItemText/ListItemText.d.ts +2 -2
  74. package/ListSubheader/ListSubheader.d.ts +2 -2
  75. package/Menu/Menu.d.ts +4 -4
  76. package/Menu/Menu.js +6 -2
  77. package/MenuItem/MenuItem.d.ts +3 -3
  78. package/MenuList/MenuList.d.ts +4 -4
  79. package/MobileStepper/MobileStepper.d.ts +3 -3
  80. package/Modal/Modal.d.ts +7 -7
  81. package/Modal/Modal.js +9 -10
  82. package/NativeSelect/NativeSelect.d.ts +3 -3
  83. package/NoSsr/NoSsr.d.ts +2 -2
  84. package/NoSsr/NoSsr.js +2 -2
  85. package/OutlinedInput/OutlinedInput.d.ts +3 -3
  86. package/Pagination/Pagination.d.ts +2 -2
  87. package/PaginationItem/PaginationItem.d.ts +2 -2
  88. package/Paper/Paper.d.ts +3 -3
  89. package/PigmentContainer/PigmentContainer.d.ts +2 -2
  90. package/PigmentContainer/PigmentContainer.js +2 -2
  91. package/PigmentGrid/PigmentGrid.d.ts +2 -2
  92. package/PigmentGrid/PigmentGrid.js +2 -2
  93. package/PigmentHidden/PigmentHidden.d.ts +2 -2
  94. package/PigmentHidden/PigmentHidden.js +2 -2
  95. package/PigmentStack/PigmentStack.d.ts +2 -2
  96. package/PigmentStack/PigmentStack.js +2 -2
  97. package/Popover/Popover.d.ts +64 -10
  98. package/Popover/Popover.js +78 -51
  99. package/Popper/Popper.d.ts +4 -4
  100. package/Popper/Popper.js +4 -4
  101. package/Portal/Portal.d.ts +2 -2
  102. package/Portal/Portal.js +2 -2
  103. package/README.md +4 -3
  104. package/Radio/Radio.d.ts +3 -3
  105. package/RadioGroup/RadioGroup.d.ts +3 -3
  106. package/Rating/Rating.d.ts +2 -2
  107. package/ScopedCssBaseline/ScopedCssBaseline.d.ts +2 -2
  108. package/Select/Select.d.ts +3 -3
  109. package/Skeleton/Skeleton.d.ts +2 -2
  110. package/Slide/Slide.d.ts +4 -4
  111. package/Slider/Slider.d.ts +20 -11
  112. package/Slider/Slider.js +2 -2
  113. package/Snackbar/Snackbar.d.ts +80 -3
  114. package/Snackbar/Snackbar.js +122 -32
  115. package/SnackbarContent/SnackbarContent.d.ts +3 -3
  116. package/SpeedDial/SpeedDial.d.ts +2 -2
  117. package/SpeedDialAction/SpeedDialAction.d.ts +3 -3
  118. package/SpeedDialIcon/SpeedDialIcon.d.ts +2 -2
  119. package/Stack/Stack.d.ts +2 -2
  120. package/Step/Step.d.ts +2 -2
  121. package/StepButton/StepButton.d.ts +3 -3
  122. package/StepConnector/StepConnector.d.ts +2 -2
  123. package/StepContent/StepContent.d.ts +2 -2
  124. package/StepIcon/StepIcon.d.ts +3 -3
  125. package/StepLabel/StepLabel.d.ts +2 -2
  126. package/Stepper/Stepper.d.ts +2 -2
  127. package/SvgIcon/SvgIcon.d.ts +3 -3
  128. package/SwipeableDrawer/SwipeableDrawer.d.ts +3 -3
  129. package/Switch/Switch.d.ts +4 -4
  130. package/Tab/Tab.d.ts +3 -3
  131. package/TabScrollButton/TabScrollButton.d.ts +2 -2
  132. package/Table/Table.d.ts +2 -2
  133. package/TableBody/TableBody.d.ts +2 -2
  134. package/TableCell/TableCell.d.ts +2 -2
  135. package/TableContainer/TableContainer.d.ts +2 -2
  136. package/TableFooter/TableFooter.d.ts +2 -2
  137. package/TableHead/TableHead.d.ts +2 -2
  138. package/TablePagination/TablePagination.d.ts +4 -4
  139. package/TableRow/TableRow.d.ts +2 -2
  140. package/TableSortLabel/TableSortLabel.d.ts +3 -3
  141. package/Tabs/Tabs.d.ts +2 -2
  142. package/TextField/TextField.d.ts +10 -10
  143. package/TextareaAutosize/TextareaAutosize.d.ts +2 -2
  144. package/TextareaAutosize/TextareaAutosize.js +2 -2
  145. package/ToggleButton/ToggleButton.d.ts +3 -3
  146. package/ToggleButtonGroup/ToggleButtonGroup.d.ts +2 -2
  147. package/Toolbar/Toolbar.d.ts +2 -2
  148. package/Tooltip/Tooltip.d.ts +2 -2
  149. package/Typography/Typography.d.ts +3 -3
  150. package/Zoom/Zoom.d.ts +3 -3
  151. package/index.js +1 -1
  152. package/internal/SwitchBase.d.ts +33 -1
  153. package/internal/SwitchBase.js +84 -30
  154. package/modern/ClickAwayListener/ClickAwayListener.js +3 -3
  155. package/modern/Grid2/Grid2.js +2 -2
  156. package/modern/Menu/Menu.js +6 -2
  157. package/modern/Modal/Modal.js +9 -10
  158. package/modern/NoSsr/NoSsr.js +2 -2
  159. package/modern/PigmentContainer/PigmentContainer.js +2 -2
  160. package/modern/PigmentGrid/PigmentGrid.js +2 -2
  161. package/modern/PigmentHidden/PigmentHidden.js +2 -2
  162. package/modern/PigmentStack/PigmentStack.js +2 -2
  163. package/modern/Popover/Popover.js +78 -51
  164. package/modern/Popper/Popper.js +4 -4
  165. package/modern/Portal/Portal.js +2 -2
  166. package/modern/Slider/Slider.js +2 -2
  167. package/modern/Snackbar/Snackbar.js +122 -32
  168. package/modern/TextareaAutosize/TextareaAutosize.js +2 -2
  169. package/modern/index.js +1 -1
  170. package/modern/internal/SwitchBase.js +84 -30
  171. package/modern/utils/mergeSlotProps.js +10 -3
  172. package/modern/version/index.js +5 -5
  173. package/node/ClickAwayListener/ClickAwayListener.js +3 -3
  174. package/node/Grid2/Grid2.js +2 -2
  175. package/node/Menu/Menu.js +6 -2
  176. package/node/Modal/Modal.js +9 -10
  177. package/node/NoSsr/NoSsr.js +2 -2
  178. package/node/PigmentContainer/PigmentContainer.js +2 -2
  179. package/node/PigmentGrid/PigmentGrid.js +2 -2
  180. package/node/PigmentHidden/PigmentHidden.js +2 -2
  181. package/node/PigmentStack/PigmentStack.js +2 -2
  182. package/node/Popover/Popover.js +78 -51
  183. package/node/Popper/Popper.js +4 -4
  184. package/node/Portal/Portal.js +2 -2
  185. package/node/Slider/Slider.js +2 -2
  186. package/node/Snackbar/Snackbar.js +122 -32
  187. package/node/TextareaAutosize/TextareaAutosize.js +2 -2
  188. package/node/index.js +1 -1
  189. package/node/internal/SwitchBase.js +84 -30
  190. package/node/utils/mergeSlotProps.js +10 -3
  191. package/node/version/index.js +5 -5
  192. package/package.json +7 -7
  193. package/utils/mergeSlotProps.js +10 -3
  194. package/version/index.js +5 -5
@@ -58,11 +58,11 @@ export interface SkeletonTypeMap<
58
58
  *
59
59
  * Demos:
60
60
  *
61
- * - [Skeleton](https://mui.com/material-ui/react-skeleton/)
61
+ * - [Skeleton](https://next.mui.com/material-ui/react-skeleton/)
62
62
  *
63
63
  * API:
64
64
  *
65
- * - [Skeleton API](https://mui.com/material-ui/api/skeleton/)
65
+ * - [Skeleton API](https://next.mui.com/material-ui/api/skeleton/)
66
66
  */
67
67
  declare const Skeleton: OverridableComponent<SkeletonTypeMap>;
68
68
 
package/Slide/Slide.d.ts CHANGED
@@ -48,17 +48,17 @@ export interface SlideProps extends TransitionProps {
48
48
  }
49
49
 
50
50
  /**
51
- * The Slide transition is used by the [Drawer](https://mui.com/material-ui/react-drawer/) component.
51
+ * The Slide transition is used by the [Drawer](https://next.mui.com/material-ui/react-drawer/) component.
52
52
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
53
53
  *
54
54
  * Demos:
55
55
  *
56
- * - [Dialog](https://mui.com/material-ui/react-dialog/)
57
- * - [Transitions](https://mui.com/material-ui/transitions/)
56
+ * - [Dialog](https://next.mui.com/material-ui/react-dialog/)
57
+ * - [Transitions](https://next.mui.com/material-ui/transitions/)
58
58
  *
59
59
  * API:
60
60
  *
61
- * - [Slide API](https://mui.com/material-ui/api/slide/)
61
+ * - [Slide API](https://next.mui.com/material-ui/api/slide/)
62
62
  * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition/#Transition-props)
63
63
  */
64
64
  export default function Slide(props: SlideProps): React.JSX.Element;
@@ -20,7 +20,7 @@ export interface SliderOwnerState extends SliderProps {
20
20
  focusedThumbIndex: number;
21
21
  }
22
22
 
23
- export interface SliderOwnProps {
23
+ export interface SliderOwnProps<Value extends number | number[]> {
24
24
  /**
25
25
  * The label of the slider.
26
26
  */
@@ -93,7 +93,7 @@ export interface SliderOwnProps {
93
93
  /**
94
94
  * The default value. Use when the component is not controlled.
95
95
  */
96
- defaultValue?: number | number[];
96
+ defaultValue?: Value;
97
97
  /**
98
98
  * If `true`, the component is disabled.
99
99
  * @default false
@@ -148,17 +148,17 @@ export interface SliderOwnProps {
148
148
  * @param {Event} event The event source of the callback.
149
149
  * You can pull out the new value by accessing `event.target.value` (any).
150
150
  * **Warning**: This is a generic event not a change event.
151
- * @param {number | number[]} value The new value.
151
+ * @param {Value} value The new value.
152
152
  * @param {number} activeThumb Index of the currently moved thumb.
153
153
  */
154
- onChange?: (event: Event, value: number | number[], activeThumb: number) => void;
154
+ onChange?: (event: Event, value: Value, activeThumb: number) => void;
155
155
  /**
156
156
  * Callback function that is fired when the `mouseup` is triggered.
157
157
  *
158
158
  * @param {React.SyntheticEvent | Event} event The event source of the callback. **Warning**: This is a generic event not a change event.
159
- * @param {number | number[]} value The new value.
159
+ * @param {Value} value The new value.
160
160
  */
161
- onChangeCommitted?: (event: React.SyntheticEvent | Event, value: number | number[]) => void;
161
+ onChangeCommitted?: (event: React.SyntheticEvent | Event, value: Value) => void;
162
162
  /**
163
163
  * The component orientation.
164
164
  * @default 'horizontal'
@@ -246,7 +246,7 @@ export interface SliderOwnProps {
246
246
  * The value of the slider.
247
247
  * For ranged sliders, provide an array with two values.
248
248
  */
249
- value?: number | number[];
249
+ value?: Value;
250
250
  /**
251
251
  * Controls when the value label is displayed:
252
252
  *
@@ -275,11 +275,20 @@ export interface SliderOwnProps {
275
275
  export interface SliderTypeMap<
276
276
  RootComponent extends React.ElementType = 'span',
277
277
  AdditionalProps = {},
278
+ Value extends number | number[] = number | number[],
278
279
  > {
279
- props: AdditionalProps & SliderOwnProps;
280
+ props: AdditionalProps & SliderOwnProps<Value>;
280
281
  defaultComponent: RootComponent;
281
282
  }
282
283
 
284
+ export type SliderComponent<Value extends number | number[]> = OverridableComponent<
285
+ SliderTypeMap<'span', {}, Value>
286
+ >;
287
+
288
+ export type SliderType = SliderComponent<number> &
289
+ SliderComponent<number[]> &
290
+ SliderComponent<number | number[]>;
291
+
283
292
  export interface SliderValueLabelProps extends React.HTMLAttributes<HTMLSpanElement> {
284
293
  children: React.ReactElement<unknown>;
285
294
  index: number;
@@ -306,13 +315,13 @@ export declare const SliderValueLabel: React.FC<SliderValueLabelProps>;
306
315
  *
307
316
  * Demos:
308
317
  *
309
- * - [Slider](https://mui.com/material-ui/react-slider/)
318
+ * - [Slider](https://next.mui.com/material-ui/react-slider/)
310
319
  *
311
320
  * API:
312
321
  *
313
- * - [Slider API](https://mui.com/material-ui/api/slider/)
322
+ * - [Slider API](https://next.mui.com/material-ui/api/slider/)
314
323
  */
315
- declare const Slider: OverridableComponent<SliderTypeMap>;
324
+ declare const Slider: SliderType;
316
325
 
317
326
  export type SliderProps<
318
327
  RootComponent extends React.ElementType = SliderTypeMap['defaultComponent'],
package/Slider/Slider.js CHANGED
@@ -966,7 +966,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
966
966
  * @param {Event} event The event source of the callback.
967
967
  * You can pull out the new value by accessing `event.target.value` (any).
968
968
  * **Warning**: This is a generic event not a change event.
969
- * @param {number | number[]} value The new value.
969
+ * @param {Value} value The new value.
970
970
  * @param {number} activeThumb Index of the currently moved thumb.
971
971
  */
972
972
  onChange: PropTypes.func,
@@ -974,7 +974,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
974
974
  * Callback function that is fired when the `mouseup` is triggered.
975
975
  *
976
976
  * @param {React.SyntheticEvent | Event} event The event source of the callback. **Warning**: This is a generic event not a change event.
977
- * @param {number | number[]} value The new value.
977
+ * @param {Value} value The new value.
978
978
  */
979
979
  onChangeCommitted: PropTypes.func,
980
980
  /**
@@ -6,6 +6,75 @@ import { InternalStandardProps as StandardProps } from '..';
6
6
  import { SnackbarContentProps } from '../SnackbarContent';
7
7
  import { TransitionProps } from '../transitions/transition';
8
8
  import { SnackbarClasses } from './snackbarClasses';
9
+ import { CreateSlotsAndSlotProps, SlotComponentProps, SlotProps } from '../utils/types';
10
+
11
+ export interface SnackbarSlots {
12
+ /**
13
+ * The component that renders the root slot.
14
+ * @default 'div'
15
+ */
16
+ root: React.ElementType;
17
+ /**
18
+ * The component that renders the content slot.
19
+ * @default SnackbarContent
20
+ */
21
+ content: React.ElementType;
22
+ /**
23
+ * The component that renders the clickAwayListener slot.
24
+ * @default ClickAwayListener
25
+ */
26
+ clickAwayListener: React.ElementType;
27
+ /**
28
+ * The component that renders the transition.
29
+ * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
30
+ * @default Grow
31
+ */
32
+ transition: React.ElementType;
33
+ }
34
+
35
+ export interface SnackbarRootSlotPropsOverrides {}
36
+ export interface SnackbarContentSlotPropsOverrides {}
37
+ export interface SnackbarClickAwayListenerSlotPropsOverrides {}
38
+
39
+ export interface SnackbarTransitionSlotPropsOverrides {}
40
+
41
+ export type SnackbarSlotsAndSlotProps = CreateSlotsAndSlotProps<
42
+ SnackbarSlots,
43
+ {
44
+ /**
45
+ * Props forwarded to the root slot.
46
+ * By default, the avaible props are based on the div element.
47
+ */
48
+ root: SlotProps<'div', SnackbarRootSlotPropsOverrides, SnackbarOwnerState>;
49
+ /**
50
+ * Props forwarded to the content slot.
51
+ * By default, the avaible props are based on the [SnackbarContent](https://mui.com/material-ui/api/snackbar-content/#props) component.
52
+ */
53
+ content: SlotProps<
54
+ React.ElementType<Partial<SnackbarContentProps>>,
55
+ SnackbarContentSlotPropsOverrides,
56
+ SnackbarOwnerState
57
+ >;
58
+ /**
59
+ * Props forwarded to the clickAwayListener slot.
60
+ * By default, the avaible props are based on the [ClickAwayListener](https://mui.com/material-ui/api/click-away-listener/#props) component.
61
+ */
62
+ clickAwayListener: SlotComponentProps<
63
+ React.ElementType<Partial<ClickAwayListenerProps>>,
64
+ SnackbarClickAwayListenerSlotPropsOverrides,
65
+ SnackbarOwnerState
66
+ >;
67
+ /**
68
+ * Props applied to the transition element.
69
+ * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
70
+ */
71
+ transition: SlotComponentProps<
72
+ React.ElementType<TransitionProps>,
73
+ SnackbarTransitionSlotPropsOverrides,
74
+ SnackbarOwnerState
75
+ >;
76
+ }
77
+ >;
9
78
 
10
79
  export interface SnackbarOrigin {
11
80
  vertical: 'top' | 'bottom';
@@ -14,7 +83,9 @@ export interface SnackbarOrigin {
14
83
 
15
84
  export type SnackbarCloseReason = 'timeout' | 'clickaway' | 'escapeKeyDown';
16
85
 
17
- export interface SnackbarProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
86
+ export interface SnackbarProps
87
+ extends Omit<StandardProps<React.HTMLAttributes<HTMLDivElement>>, 'slots' | 'slotProps'>,
88
+ SnackbarSlotsAndSlotProps {
18
89
  /**
19
90
  * The action to display. It renders after the message, at the end of the snackbar.
20
91
  */
@@ -44,10 +115,12 @@ export interface SnackbarProps extends StandardProps<React.HTMLAttributes<HTMLDi
44
115
  classes?: Partial<SnackbarClasses>;
45
116
  /**
46
117
  * Props applied to the `ClickAwayListener` element.
118
+ * @deprecated Use `slotProps.clickAwayListener` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
47
119
  */
48
120
  ClickAwayListenerProps?: Partial<ClickAwayListenerProps>;
49
121
  /**
50
122
  * Props applied to the [`SnackbarContent`](https://mui.com/material-ui/api/snackbar-content/) element.
123
+ * @deprecated Use `slotProps.content` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
51
124
  */
52
125
  ContentProps?: Partial<SnackbarContentProps>;
53
126
  /**
@@ -95,6 +168,7 @@ export interface SnackbarProps extends StandardProps<React.HTMLAttributes<HTMLDi
95
168
  /**
96
169
  * The component used for the transition.
97
170
  * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
171
+ * @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.
98
172
  * @default Grow
99
173
  */
100
174
  TransitionComponent?: React.JSXElementConstructor<
@@ -112,6 +186,7 @@ export interface SnackbarProps extends StandardProps<React.HTMLAttributes<HTMLDi
112
186
  /**
113
187
  * Props applied to the transition element.
114
188
  * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
189
+ * @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.
115
190
  * @default {}
116
191
  */
117
192
  TransitionProps?: TransitionProps;
@@ -121,10 +196,12 @@ export interface SnackbarProps extends StandardProps<React.HTMLAttributes<HTMLDi
121
196
  *
122
197
  * Demos:
123
198
  *
124
- * - [Snackbar](https://mui.com/material-ui/react-snackbar/)
199
+ * - [Snackbar](https://next.mui.com/material-ui/react-snackbar/)
125
200
  *
126
201
  * API:
127
202
  *
128
- * - [Snackbar API](https://mui.com/material-ui/api/snackbar/)
203
+ * - [Snackbar API](https://next.mui.com/material-ui/api/snackbar/)
129
204
  */
130
205
  export default function Snackbar(props: SnackbarProps): React.JSX.Element;
206
+
207
+ export interface SnackbarOwnerState extends Omit<SnackbarProps, 'slots' | 'slotProps'> {}
@@ -3,7 +3,6 @@
3
3
  import * as React from 'react';
4
4
  import PropTypes from 'prop-types';
5
5
  import composeClasses from '@mui/utils/composeClasses';
6
- import useSlotProps from '@mui/utils/useSlotProps';
7
6
  import useSnackbar from "./useSnackbar.js";
8
7
  import ClickAwayListener from "../ClickAwayListener/index.js";
9
8
  import { styled, useTheme } from "../zero-styled/index.js";
@@ -13,6 +12,7 @@ import capitalize from "../utils/capitalize.js";
13
12
  import Grow from "../Grow/index.js";
14
13
  import SnackbarContent from "../SnackbarContent/index.js";
15
14
  import { getSnackbarUtilityClass } from "./snackbarClasses.js";
15
+ import useSlot from "../utils/useSlot.js";
16
16
  import { jsx as _jsx } from "react/jsx-runtime";
17
17
  const useUtilityClasses = ownerState => {
18
18
  const {
@@ -120,8 +120,8 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
120
120
  autoHideDuration = null,
121
121
  children,
122
122
  className,
123
- ClickAwayListenerProps,
124
- ContentProps,
123
+ ClickAwayListenerProps: ClickAwayListenerPropsProp,
124
+ ContentProps: ContentPropsProp,
125
125
  disableWindowBlurListener = false,
126
126
  message,
127
127
  onBlur,
@@ -131,12 +131,14 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
131
131
  onMouseLeave,
132
132
  open,
133
133
  resumeHideDuration,
134
- TransitionComponent = Grow,
134
+ slots = {},
135
+ slotProps = {},
136
+ TransitionComponent: TransitionComponentProp,
135
137
  transitionDuration = defaultTransitionDuration,
136
138
  TransitionProps: {
137
139
  onEnter,
138
140
  onExited,
139
- ...TransitionProps
141
+ ...TransitionPropsProp
140
142
  } = {},
141
143
  ...other
142
144
  } = props;
@@ -148,7 +150,7 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
148
150
  },
149
151
  autoHideDuration,
150
152
  disableWindowBlurListener,
151
- TransitionComponent,
153
+ TransitionComponent: TransitionComponentProp,
152
154
  transitionDuration
153
155
  };
154
156
  const classes = useUtilityClasses(ownerState);
@@ -159,16 +161,6 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
159
161
  ...ownerState
160
162
  });
161
163
  const [exited, setExited] = React.useState(true);
162
- const rootProps = useSlotProps({
163
- elementType: SnackbarRoot,
164
- getSlotProps: getRootProps,
165
- externalForwardedProps: other,
166
- ownerState,
167
- additionalProps: {
168
- ref
169
- },
170
- className: [classes.root, className]
171
- });
172
164
  const handleExited = node => {
173
165
  setExited(true);
174
166
  if (onExited) {
@@ -181,28 +173,84 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
181
173
  onEnter(node, isAppearing);
182
174
  }
183
175
  };
176
+ const externalForwardedProps = {
177
+ slots: {
178
+ transition: TransitionComponentProp,
179
+ ...slots
180
+ },
181
+ slotProps: {
182
+ content: ContentPropsProp,
183
+ clickAwayListener: ClickAwayListenerPropsProp,
184
+ transition: TransitionPropsProp,
185
+ ...slotProps
186
+ }
187
+ };
188
+ const [Root, rootProps] = useSlot('root', {
189
+ ref,
190
+ className: [classes.root, className],
191
+ elementType: SnackbarRoot,
192
+ getSlotProps: getRootProps,
193
+ externalForwardedProps: {
194
+ ...externalForwardedProps,
195
+ ...other
196
+ },
197
+ ownerState
198
+ });
199
+ const [ClickAwaySlot, clickAwayListenerProps] = useSlot('clickAwayListener', {
200
+ elementType: ClickAwayListener,
201
+ externalForwardedProps,
202
+ getSlotProps: handlers => ({
203
+ onClickAway: (...params) => {
204
+ handlers.onClickAway?.(...params);
205
+ onClickAway(...params);
206
+ }
207
+ }),
208
+ ownerState
209
+ });
210
+ const [ContentSlot, contentSlotProps] = useSlot('content', {
211
+ elementType: SnackbarContent,
212
+ shouldForwardComponentProp: true,
213
+ externalForwardedProps,
214
+ additionalProps: {
215
+ message,
216
+ action
217
+ },
218
+ ownerState
219
+ });
220
+ const [TransitionSlot, transitionProps] = useSlot('transition', {
221
+ elementType: Grow,
222
+ externalForwardedProps,
223
+ getSlotProps: handlers => ({
224
+ onEnter: (...params) => {
225
+ handlers.onEnter?.(...params);
226
+ handleEnter(...params);
227
+ },
228
+ onExited: (...params) => {
229
+ handlers.onExited?.(...params);
230
+ handleExited(...params);
231
+ }
232
+ }),
233
+ additionalProps: {
234
+ appear: true,
235
+ in: open,
236
+ timeout: transitionDuration,
237
+ direction: vertical === 'top' ? 'down' : 'up'
238
+ },
239
+ ownerState
240
+ });
184
241
 
185
242
  // So we only render active snackbars.
186
243
  if (!open && exited) {
187
244
  return null;
188
245
  }
189
- return /*#__PURE__*/_jsx(ClickAwayListener, {
190
- onClickAway: onClickAway,
191
- ...ClickAwayListenerProps,
192
- children: /*#__PURE__*/_jsx(SnackbarRoot, {
246
+ return /*#__PURE__*/_jsx(ClickAwaySlot, {
247
+ ...clickAwayListenerProps,
248
+ children: /*#__PURE__*/_jsx(Root, {
193
249
  ...rootProps,
194
- children: /*#__PURE__*/_jsx(TransitionComponent, {
195
- appear: true,
196
- in: open,
197
- timeout: transitionDuration,
198
- direction: vertical === 'top' ? 'down' : 'up',
199
- onEnter: handleEnter,
200
- onExited: handleExited,
201
- ...TransitionProps,
202
- children: children || /*#__PURE__*/_jsx(SnackbarContent, {
203
- message: message,
204
- action: action,
205
- ...ContentProps
250
+ children: /*#__PURE__*/_jsx(TransitionSlot, {
251
+ ...transitionProps,
252
+ children: children || /*#__PURE__*/_jsx(ContentSlot, {
253
+ ...contentSlotProps
206
254
  })
207
255
  })
208
256
  })
@@ -249,10 +297,12 @@ process.env.NODE_ENV !== "production" ? Snackbar.propTypes /* remove-proptypes *
249
297
  className: PropTypes.string,
250
298
  /**
251
299
  * Props applied to the `ClickAwayListener` element.
300
+ * @deprecated Use `slotProps.clickAwayListener` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
252
301
  */
253
302
  ClickAwayListenerProps: PropTypes.object,
254
303
  /**
255
304
  * Props applied to the [`SnackbarContent`](https://mui.com/material-ui/api/snackbar-content/) element.
305
+ * @deprecated Use `slotProps.content` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
256
306
  */
257
307
  ContentProps: PropTypes.object,
258
308
  /**
@@ -309,6 +359,44 @@ process.env.NODE_ENV !== "production" ? Snackbar.propTypes /* remove-proptypes *
309
359
  * we default to `autoHideDuration / 2` ms.
310
360
  */
311
361
  resumeHideDuration: PropTypes.number,
362
+ /**
363
+ * The props used for each slot inside.
364
+ * @default {}
365
+ */
366
+ slotProps: PropTypes.shape({
367
+ clickAwayListener: PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.shape({
368
+ children: PropTypes.element.isRequired,
369
+ disableReactTree: PropTypes.bool,
370
+ mouseEvent: PropTypes.oneOf(['onClick', 'onMouseDown', 'onMouseUp', 'onPointerDown', 'onPointerUp', false]),
371
+ onClickAway: PropTypes.func,
372
+ touchEvent: PropTypes.oneOf(['onTouchEnd', 'onTouchStart', false])
373
+ }), PropTypes.shape({
374
+ children: PropTypes.element.isRequired,
375
+ disableReactTree: PropTypes.bool,
376
+ key: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
377
+ '__@toStringTag@9059': PropTypes.oneOf(['BigInt']).isRequired,
378
+ toLocaleString: PropTypes.func.isRequired,
379
+ toString: PropTypes.func.isRequired,
380
+ valueOf: PropTypes.func.isRequired
381
+ }), PropTypes.string]),
382
+ mouseEvent: PropTypes.oneOf(['onClick', 'onMouseDown', 'onMouseUp', 'onPointerDown', 'onPointerUp', false]),
383
+ onClickAway: PropTypes.func,
384
+ touchEvent: PropTypes.oneOf(['onTouchEnd', 'onTouchStart', false])
385
+ })]),
386
+ content: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
387
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
388
+ transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
389
+ }),
390
+ /**
391
+ * The components used for each slot inside.
392
+ * @default {}
393
+ */
394
+ slots: PropTypes.shape({
395
+ clickAwayListener: PropTypes.elementType,
396
+ content: PropTypes.elementType,
397
+ root: PropTypes.elementType,
398
+ transition: PropTypes.elementType
399
+ }),
312
400
  /**
313
401
  * The system prop that allows defining system overrides as well as additional CSS styles.
314
402
  */
@@ -316,6 +404,7 @@ process.env.NODE_ENV !== "production" ? Snackbar.propTypes /* remove-proptypes *
316
404
  /**
317
405
  * The component used for the transition.
318
406
  * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
407
+ * @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.
319
408
  * @default Grow
320
409
  */
321
410
  TransitionComponent: PropTypes.elementType,
@@ -335,6 +424,7 @@ process.env.NODE_ENV !== "production" ? Snackbar.propTypes /* remove-proptypes *
335
424
  /**
336
425
  * Props applied to the transition element.
337
426
  * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
427
+ * @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.
338
428
  * @default {}
339
429
  */
340
430
  TransitionProps: PropTypes.object
@@ -33,11 +33,11 @@ export interface SnackbarContentProps extends StandardProps<PaperProps, 'childre
33
33
  *
34
34
  * Demos:
35
35
  *
36
- * - [Snackbar](https://mui.com/material-ui/react-snackbar/)
36
+ * - [Snackbar](https://next.mui.com/material-ui/react-snackbar/)
37
37
  *
38
38
  * API:
39
39
  *
40
- * - [SnackbarContent API](https://mui.com/material-ui/api/snackbar-content/)
41
- * - inherits [Paper API](https://mui.com/material-ui/api/paper/)
40
+ * - [SnackbarContent API](https://next.mui.com/material-ui/api/snackbar-content/)
41
+ * - inherits [Paper API](https://next.mui.com/material-ui/api/paper/)
42
42
  */
43
43
  export default function SnackbarContent(props: SnackbarContentProps): React.JSX.Element;
@@ -123,10 +123,10 @@ export interface SpeedDialOwnerState extends SpeedDialProps {}
123
123
  *
124
124
  * Demos:
125
125
  *
126
- * - [Speed Dial](https://mui.com/material-ui/react-speed-dial/)
126
+ * - [Speed Dial](https://next.mui.com/material-ui/react-speed-dial/)
127
127
  *
128
128
  * API:
129
129
  *
130
- * - [SpeedDial API](https://mui.com/material-ui/api/speed-dial/)
130
+ * - [SpeedDial API](https://next.mui.com/material-ui/api/speed-dial/)
131
131
  */
132
132
  export default function SpeedDial(props: SpeedDialProps): React.JSX.Element;
@@ -53,11 +53,11 @@ export interface SpeedDialActionProps extends StandardProps<Partial<TooltipProps
53
53
  *
54
54
  * Demos:
55
55
  *
56
- * - [Speed Dial](https://mui.com/material-ui/react-speed-dial/)
56
+ * - [Speed Dial](https://next.mui.com/material-ui/react-speed-dial/)
57
57
  *
58
58
  * API:
59
59
  *
60
- * - [SpeedDialAction API](https://mui.com/material-ui/api/speed-dial-action/)
61
- * - inherits [Tooltip API](https://mui.com/material-ui/api/tooltip/)
60
+ * - [SpeedDialAction API](https://next.mui.com/material-ui/api/speed-dial-action/)
61
+ * - inherits [Tooltip API](https://next.mui.com/material-ui/api/tooltip/)
62
62
  */
63
63
  export default function SpeedDialAction(props: SpeedDialActionProps): React.JSX.Element;
@@ -33,11 +33,11 @@ export interface SpeedDialIconProps
33
33
  *
34
34
  * Demos:
35
35
  *
36
- * - [Speed Dial](https://mui.com/material-ui/react-speed-dial/)
36
+ * - [Speed Dial](https://next.mui.com/material-ui/react-speed-dial/)
37
37
  *
38
38
  * API:
39
39
  *
40
- * - [SpeedDialIcon API](https://mui.com/material-ui/api/speed-dial-icon/)
40
+ * - [SpeedDialIcon API](https://next.mui.com/material-ui/api/speed-dial-icon/)
41
41
  */
42
42
  declare const SpeedDialIcon: ((props: SpeedDialIconProps) => React.JSX.Element) & {
43
43
  muiName: string;
package/Stack/Stack.d.ts CHANGED
@@ -50,11 +50,11 @@ export interface StackTypeMap<
50
50
  *
51
51
  * Demos:
52
52
  *
53
- * - [Stack](https://mui.com/material-ui/react-stack/)
53
+ * - [Stack](https://next.mui.com/material-ui/react-stack/)
54
54
  *
55
55
  * API:
56
56
  *
57
- * - [Stack API](https://mui.com/material-ui/api/stack/)
57
+ * - [Stack API](https://next.mui.com/material-ui/api/stack/)
58
58
  */
59
59
  declare const Stack: OverridableComponent<StackTypeMap>;
60
60
 
package/Step/Step.d.ts CHANGED
@@ -68,11 +68,11 @@ export type StepClasskey = keyof NonNullable<StepProps['classes']>;
68
68
  *
69
69
  * Demos:
70
70
  *
71
- * - [Stepper](https://mui.com/material-ui/react-stepper/)
71
+ * - [Stepper](https://next.mui.com/material-ui/react-stepper/)
72
72
  *
73
73
  * API:
74
74
  *
75
- * - [Step API](https://mui.com/material-ui/api/step/)
75
+ * - [Step API](https://next.mui.com/material-ui/api/step/)
76
76
  */
77
77
  declare const Step: OverridableComponent<StepTypeMap>;
78
78
 
@@ -47,12 +47,12 @@ export type StepButtonTypeMap<
47
47
  *
48
48
  * Demos:
49
49
  *
50
- * - [Stepper](https://mui.com/material-ui/react-stepper/)
50
+ * - [Stepper](https://next.mui.com/material-ui/react-stepper/)
51
51
  *
52
52
  * API:
53
53
  *
54
- * - [StepButton API](https://mui.com/material-ui/api/step-button/)
55
- * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
54
+ * - [StepButton API](https://next.mui.com/material-ui/api/step-button/)
55
+ * - inherits [ButtonBase API](https://next.mui.com/material-ui/api/button-base/)
56
56
  */
57
57
  declare const StepButton: ExtendButtonBase<
58
58
  StepButtonTypeMap<{}, ButtonBaseTypeMap['defaultComponent']>
@@ -24,10 +24,10 @@ export type StepConnectorClasskey = keyof NonNullable<StepConnectorProps['classe
24
24
  *
25
25
  * Demos:
26
26
  *
27
- * - [Stepper](https://mui.com/material-ui/react-stepper/)
27
+ * - [Stepper](https://next.mui.com/material-ui/react-stepper/)
28
28
  *
29
29
  * API:
30
30
  *
31
- * - [StepConnector API](https://mui.com/material-ui/api/step-connector/)
31
+ * - [StepConnector API](https://next.mui.com/material-ui/api/step-connector/)
32
32
  */
33
33
  export default function StepConnector(props: StepConnectorProps): React.JSX.Element;
@@ -76,10 +76,10 @@ export type StepContentClasskey = keyof NonNullable<StepContentProps['classes']>
76
76
  *
77
77
  * Demos:
78
78
  *
79
- * - [Stepper](https://mui.com/material-ui/react-stepper/)
79
+ * - [Stepper](https://next.mui.com/material-ui/react-stepper/)
80
80
  *
81
81
  * API:
82
82
  *
83
- * - [StepContent API](https://mui.com/material-ui/api/step-content/)
83
+ * - [StepContent API](https://next.mui.com/material-ui/api/step-content/)
84
84
  */
85
85
  export default function StepContent(props: StepContentProps): React.JSX.Element;
@@ -43,11 +43,11 @@ export type StepIconClasskey = keyof NonNullable<StepIconProps['classes']>;
43
43
  *
44
44
  * Demos:
45
45
  *
46
- * - [Stepper](https://mui.com/material-ui/react-stepper/)
46
+ * - [Stepper](https://next.mui.com/material-ui/react-stepper/)
47
47
  *
48
48
  * API:
49
49
  *
50
- * - [StepIcon API](https://mui.com/material-ui/api/step-icon/)
51
- * - inherits [SvgIcon API](https://mui.com/material-ui/api/svg-icon/)
50
+ * - [StepIcon API](https://next.mui.com/material-ui/api/step-icon/)
51
+ * - inherits [SvgIcon API](https://next.mui.com/material-ui/api/svg-icon/)
52
52
  */
53
53
  export default function StepIcon(props: StepIconProps): React.JSX.Element;