@mui/material 6.4.4 → 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 (195) 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 -2272
  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 +4 -72
  80. package/MobileStepper/MobileStepper.js +18 -76
  81. package/Modal/Modal.d.ts +7 -7
  82. package/Modal/Modal.js +9 -10
  83. package/NativeSelect/NativeSelect.d.ts +3 -3
  84. package/NoSsr/NoSsr.d.ts +2 -2
  85. package/NoSsr/NoSsr.js +2 -2
  86. package/OutlinedInput/OutlinedInput.d.ts +3 -3
  87. package/Pagination/Pagination.d.ts +2 -2
  88. package/PaginationItem/PaginationItem.d.ts +2 -2
  89. package/Paper/Paper.d.ts +3 -3
  90. package/PigmentContainer/PigmentContainer.d.ts +2 -2
  91. package/PigmentContainer/PigmentContainer.js +2 -2
  92. package/PigmentGrid/PigmentGrid.d.ts +2 -2
  93. package/PigmentGrid/PigmentGrid.js +2 -2
  94. package/PigmentHidden/PigmentHidden.d.ts +2 -2
  95. package/PigmentHidden/PigmentHidden.js +2 -2
  96. package/PigmentStack/PigmentStack.d.ts +2 -2
  97. package/PigmentStack/PigmentStack.js +2 -2
  98. package/Popover/Popover.d.ts +64 -10
  99. package/Popover/Popover.js +78 -51
  100. package/Popper/Popper.d.ts +4 -4
  101. package/Popper/Popper.js +4 -4
  102. package/Portal/Portal.d.ts +2 -2
  103. package/Portal/Portal.js +2 -2
  104. package/README.md +4 -3
  105. package/Radio/Radio.d.ts +3 -3
  106. package/RadioGroup/RadioGroup.d.ts +3 -3
  107. package/Rating/Rating.d.ts +2 -2
  108. package/ScopedCssBaseline/ScopedCssBaseline.d.ts +2 -2
  109. package/Select/Select.d.ts +3 -3
  110. package/Skeleton/Skeleton.d.ts +2 -2
  111. package/Slide/Slide.d.ts +4 -4
  112. package/Slider/Slider.d.ts +20 -11
  113. package/Slider/Slider.js +2 -2
  114. package/Slider/sliderClasses.d.ts +7 -21
  115. package/Snackbar/Snackbar.d.ts +80 -3
  116. package/Snackbar/Snackbar.js +122 -32
  117. package/SnackbarContent/SnackbarContent.d.ts +3 -3
  118. package/SpeedDial/SpeedDial.d.ts +2 -2
  119. package/SpeedDialAction/SpeedDialAction.d.ts +3 -3
  120. package/SpeedDialIcon/SpeedDialIcon.d.ts +2 -2
  121. package/Stack/Stack.d.ts +2 -2
  122. package/Step/Step.d.ts +2 -2
  123. package/StepButton/StepButton.d.ts +3 -3
  124. package/StepConnector/StepConnector.d.ts +2 -2
  125. package/StepContent/StepContent.d.ts +2 -2
  126. package/StepIcon/StepIcon.d.ts +3 -3
  127. package/StepLabel/StepLabel.d.ts +2 -2
  128. package/Stepper/Stepper.d.ts +2 -2
  129. package/SvgIcon/SvgIcon.d.ts +3 -3
  130. package/SwipeableDrawer/SwipeableDrawer.d.ts +3 -3
  131. package/Switch/Switch.d.ts +4 -4
  132. package/Tab/Tab.d.ts +3 -3
  133. package/TabScrollButton/TabScrollButton.d.ts +2 -2
  134. package/Table/Table.d.ts +2 -2
  135. package/TableBody/TableBody.d.ts +2 -2
  136. package/TableCell/TableCell.d.ts +2 -2
  137. package/TableContainer/TableContainer.d.ts +2 -2
  138. package/TableFooter/TableFooter.d.ts +2 -2
  139. package/TableHead/TableHead.d.ts +2 -2
  140. package/TablePagination/TablePagination.d.ts +4 -4
  141. package/TableRow/TableRow.d.ts +2 -2
  142. package/TableSortLabel/TableSortLabel.d.ts +3 -3
  143. package/Tabs/Tabs.d.ts +2 -2
  144. package/TextField/TextField.d.ts +10 -10
  145. package/TextareaAutosize/TextareaAutosize.d.ts +2 -2
  146. package/TextareaAutosize/TextareaAutosize.js +2 -2
  147. package/ToggleButton/ToggleButton.d.ts +3 -3
  148. package/ToggleButtonGroup/ToggleButtonGroup.d.ts +2 -2
  149. package/Toolbar/Toolbar.d.ts +2 -2
  150. package/Tooltip/Tooltip.d.ts +2 -2
  151. package/Typography/Typography.d.ts +3 -3
  152. package/Zoom/Zoom.d.ts +3 -3
  153. package/index.js +1 -1
  154. package/internal/SwitchBase.d.ts +33 -1
  155. package/internal/SwitchBase.js +84 -30
  156. package/modern/ClickAwayListener/ClickAwayListener.js +3 -3
  157. package/modern/Grid2/Grid2.js +2 -2
  158. package/modern/Menu/Menu.js +6 -2
  159. package/modern/MobileStepper/MobileStepper.js +18 -76
  160. package/modern/Modal/Modal.js +9 -10
  161. package/modern/NoSsr/NoSsr.js +2 -2
  162. package/modern/PigmentContainer/PigmentContainer.js +2 -2
  163. package/modern/PigmentGrid/PigmentGrid.js +2 -2
  164. package/modern/PigmentHidden/PigmentHidden.js +2 -2
  165. package/modern/PigmentStack/PigmentStack.js +2 -2
  166. package/modern/Popover/Popover.js +78 -51
  167. package/modern/Popper/Popper.js +4 -4
  168. package/modern/Portal/Portal.js +2 -2
  169. package/modern/Slider/Slider.js +2 -2
  170. package/modern/Snackbar/Snackbar.js +122 -32
  171. package/modern/TextareaAutosize/TextareaAutosize.js +2 -2
  172. package/modern/index.js +1 -1
  173. package/modern/internal/SwitchBase.js +84 -30
  174. package/modern/version/index.js +5 -5
  175. package/node/ClickAwayListener/ClickAwayListener.js +3 -3
  176. package/node/Grid2/Grid2.js +2 -2
  177. package/node/Menu/Menu.js +6 -2
  178. package/node/MobileStepper/MobileStepper.js +18 -76
  179. package/node/Modal/Modal.js +9 -10
  180. package/node/NoSsr/NoSsr.js +2 -2
  181. package/node/PigmentContainer/PigmentContainer.js +2 -2
  182. package/node/PigmentGrid/PigmentGrid.js +2 -2
  183. package/node/PigmentHidden/PigmentHidden.js +2 -2
  184. package/node/PigmentStack/PigmentStack.js +2 -2
  185. package/node/Popover/Popover.js +78 -51
  186. package/node/Popper/Popper.js +4 -4
  187. package/node/Portal/Portal.js +2 -2
  188. package/node/Slider/Slider.js +2 -2
  189. package/node/Snackbar/Snackbar.js +122 -32
  190. package/node/TextareaAutosize/TextareaAutosize.js +2 -2
  191. package/node/index.js +1 -1
  192. package/node/internal/SwitchBase.js +84 -30
  193. package/node/version/index.js +5 -5
  194. package/package.json +7 -7
  195. package/version/index.js +5 -5
@@ -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
@@ -37,11 +37,11 @@ function isEmpty(obj) {
37
37
  *
38
38
  * Demos:
39
39
  *
40
- * - [Textarea Autosize](https://mui.com/material-ui/react-textarea-autosize/)
40
+ * - [Textarea Autosize](https://next.mui.com/material-ui/react-textarea-autosize/)
41
41
  *
42
42
  * API:
43
43
  *
44
- * - [TextareaAutosize API](https://mui.com/material-ui/api/textarea-autosize/)
44
+ * - [TextareaAutosize API](https://next.mui.com/material-ui/api/textarea-autosize/)
45
45
  */
46
46
  const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize(props, forwardedRef) {
47
47
  const {
package/modern/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/material v6.4.4
2
+ * @mui/material v7.0.0-alpha.0
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -2,7 +2,6 @@
2
2
 
3
3
  import * as React from 'react';
4
4
  import PropTypes from 'prop-types';
5
- import clsx from 'clsx';
6
5
  import refType from '@mui/utils/refType';
7
6
  import composeClasses from '@mui/utils/composeClasses';
8
7
  import capitalize from "../utils/capitalize.js";
@@ -12,6 +11,7 @@ import useControlled from "../utils/useControlled.js";
12
11
  import useFormControl from "../FormControl/useFormControl.js";
13
12
  import ButtonBase from "../ButtonBase/index.js";
14
13
  import { getSwitchBaseUtilityClass } from "./switchBaseClasses.js";
14
+ import useSlot from "../utils/useSlot.js";
15
15
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
16
16
  const useUtilityClasses = ownerState => {
17
17
  const {
@@ -86,7 +86,6 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
86
86
  autoFocus,
87
87
  checked: checkedProp,
88
88
  checkedIcon,
89
- className,
90
89
  defaultChecked,
91
90
  disabled: disabledProp,
92
91
  disableFocusRipple = false,
@@ -104,6 +103,8 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
104
103
  tabIndex,
105
104
  type,
106
105
  value,
106
+ slots = {},
107
+ slotProps = {},
107
108
  ...other
108
109
  } = props;
109
110
  const [checked, setCheckedState] = useControlled({
@@ -156,38 +157,75 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
156
157
  edge
157
158
  };
158
159
  const classes = useUtilityClasses(ownerState);
159
- return /*#__PURE__*/_jsxs(SwitchBaseRoot, {
160
- component: "span",
161
- className: clsx(classes.root, className),
162
- centerRipple: true,
163
- focusRipple: !disableFocusRipple,
164
- disabled: disabled,
165
- tabIndex: null,
166
- role: undefined,
167
- onFocus: handleFocus,
168
- onBlur: handleBlur,
169
- ownerState: ownerState,
170
- ref: ref,
171
- ...other,
172
- children: [/*#__PURE__*/_jsx(SwitchBaseInput, {
173
- autoFocus: autoFocus,
160
+ const externalForwardedProps = {
161
+ slots,
162
+ slotProps: {
163
+ input: inputProps,
164
+ ...slotProps
165
+ }
166
+ };
167
+ const [RootSlot, rootSlotProps] = useSlot('root', {
168
+ ref,
169
+ elementType: SwitchBaseRoot,
170
+ className: classes.root,
171
+ shouldForwardComponentProp: true,
172
+ externalForwardedProps: {
173
+ ...externalForwardedProps,
174
+ component: 'span',
175
+ ...other
176
+ },
177
+ getSlotProps: handlers => ({
178
+ ...handlers,
179
+ onFocus: event => {
180
+ handlers.onFocus?.(event);
181
+ handleFocus(event);
182
+ },
183
+ onBlur: event => {
184
+ handlers.onBlur?.(event);
185
+ handleBlur(event);
186
+ }
187
+ }),
188
+ ownerState,
189
+ additionalProps: {
190
+ centerRipple: true,
191
+ focusRipple: !disableFocusRipple,
192
+ disabled,
193
+ role: undefined,
194
+ tabIndex: null
195
+ }
196
+ });
197
+ const [InputSlot, inputSlotProps] = useSlot('input', {
198
+ ref: inputRef,
199
+ elementType: SwitchBaseInput,
200
+ className: classes.input,
201
+ externalForwardedProps,
202
+ getSlotProps: handlers => ({
203
+ onChange: event => {
204
+ handlers.onChange?.(event);
205
+ handleInputChange(event);
206
+ }
207
+ }),
208
+ ownerState,
209
+ additionalProps: {
210
+ autoFocus,
174
211
  checked: checkedProp,
175
- defaultChecked: defaultChecked,
176
- className: classes.input,
177
- disabled: disabled,
212
+ defaultChecked,
213
+ disabled,
178
214
  id: hasLabelFor ? id : undefined,
179
- name: name,
180
- onChange: handleInputChange,
181
- readOnly: readOnly,
182
- ref: inputRef,
183
- required: required,
184
- ownerState: ownerState,
185
- tabIndex: tabIndex,
186
- type: type,
215
+ name,
216
+ readOnly,
217
+ required,
218
+ tabIndex,
219
+ type,
187
220
  ...(type === 'checkbox' && value === undefined ? {} : {
188
221
  value
189
- }),
190
- ...inputProps
222
+ })
223
+ }
224
+ });
225
+ return /*#__PURE__*/_jsxs(RootSlot, {
226
+ ...rootSlotProps,
227
+ children: [/*#__PURE__*/_jsx(InputSlot, {
228
+ ...inputSlotProps
191
229
  }), checked ? checkedIcon : icon]
192
230
  });
193
231
  });
@@ -280,6 +318,22 @@ process.env.NODE_ENV !== "production" ? SwitchBase.propTypes = {
280
318
  * If `true`, the `input` element is required.
281
319
  */
282
320
  required: PropTypes.bool,
321
+ /**
322
+ * The props used for each slot inside.
323
+ * @default {}
324
+ */
325
+ slotProps: PropTypes.shape({
326
+ input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
327
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
328
+ }),
329
+ /**
330
+ * The components used for each slot inside.
331
+ * @default {}
332
+ */
333
+ slots: PropTypes.shape({
334
+ input: PropTypes.elementType,
335
+ root: PropTypes.elementType
336
+ }),
283
337
  /**
284
338
  * The system prop that allows defining system overrides as well as additional CSS styles.
285
339
  */
@@ -1,6 +1,6 @@
1
- export const version = "6.4.4";
2
- export const major = Number("6");
3
- export const minor = Number("4");
4
- export const patch = Number("4");
5
- export const prerelease = undefined;
1
+ export const version = "7.0.0-alpha.0";
2
+ export const major = Number("7");
3
+ export const minor = Number("0");
4
+ export const patch = Number("0");
5
+ export const prerelease = "alpha.0";
6
6
  export default version;
@@ -24,12 +24,12 @@ function clickedRootScrollbar(event, doc) {
24
24
  *
25
25
  * Demos:
26
26
  *
27
- * - [Click-Away Listener](https://mui.com/material-ui/react-click-away-listener/)
28
- * - [Menu](https://mui.com/material-ui/react-menu/)
27
+ * - [Click-Away Listener](https://next.mui.com/material-ui/react-click-away-listener/)
28
+ * - [Menu](https://next.mui.com/material-ui/react-menu/)
29
29
  *
30
30
  * API:
31
31
  *
32
- * - [ClickAwayListener API](https://mui.com/material-ui/api/click-away-listener/)
32
+ * - [ClickAwayListener API](https://next.mui.com/material-ui/api/click-away-listener/)
33
33
  */
34
34
  function ClickAwayListener(props) {
35
35
  const {
@@ -16,11 +16,11 @@ var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
16
16
  *
17
17
  * Demos:
18
18
  *
19
- * - [Grid version 2](https://mui.com/material-ui/react-grid2/)
19
+ * - [Grid version 2](https://next.mui.com/material-ui/react-grid2/)
20
20
  *
21
21
  * API:
22
22
  *
23
- * - [Grid2 API](https://mui.com/material-ui/api/grid-2/)
23
+ * - [Grid2 API](https://next.mui.com/material-ui/api/grid-2/)
24
24
  */
25
25
  const Grid2 = (0, _Grid.createGrid)({
26
26
  createStyledComponent: (0, _styles.styled)('div', {
package/node/Menu/Menu.js CHANGED
@@ -270,16 +270,20 @@ process.env.NODE_ENV !== "production" ? Menu.propTypes /* remove-proptypes */ =
270
270
  * @default {}
271
271
  */
272
272
  slotProps: _propTypes.default.shape({
273
+ backdrop: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
273
274
  paper: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
274
- root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
275
+ root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
276
+ transition: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
275
277
  }),
276
278
  /**
277
279
  * The components used for each slot inside.
278
280
  * @default {}
279
281
  */
280
282
  slots: _propTypes.default.shape({
283
+ backdrop: _propTypes.default.elementType,
281
284
  paper: _propTypes.default.elementType,
282
- root: _propTypes.default.elementType
285
+ root: _propTypes.default.elementType,
286
+ transition: _propTypes.default.elementType
283
287
  }),
284
288
  /**
285
289
  * The system prop that allows defining system overrides as well as additional CSS styles.
@@ -20,7 +20,6 @@ var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
20
20
  var _DefaultPropsProvider = require("../DefaultPropsProvider");
21
21
  var _slotShouldForwardProp = _interopRequireDefault(require("../styles/slotShouldForwardProp"));
22
22
  var _mobileStepperClasses = require("./mobileStepperClasses");
23
- var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
24
23
  var _jsxRuntime = require("react/jsx-runtime");
25
24
  const useUtilityClasses = ownerState => {
26
25
  const {
@@ -160,8 +159,6 @@ const MobileStepper = /*#__PURE__*/React.forwardRef(function MobileStepper(inPro
160
159
  position = 'bottom',
161
160
  steps,
162
161
  variant = 'dots',
163
- slots = {},
164
- slotProps = {},
165
162
  ...other
166
163
  } = props;
167
164
  const ownerState = {
@@ -179,63 +176,29 @@ const MobileStepper = /*#__PURE__*/React.forwardRef(function MobileStepper(inPro
179
176
  }
180
177
  }
181
178
  const classes = useUtilityClasses(ownerState);
182
- const externalForwardedProps = {
183
- slots,
184
- slotProps: {
185
- progress: LinearProgressProps,
186
- ...slotProps
187
- }
188
- };
189
- const [RootSlot, rootSlotProps] = (0, _useSlot.default)('root', {
190
- ref,
191
- elementType: MobileStepperRoot,
192
- shouldForwardComponentProp: true,
179
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(MobileStepperRoot, {
180
+ square: true,
181
+ elevation: 0,
193
182
  className: (0, _clsx.default)(classes.root, className),
194
- externalForwardedProps: {
195
- ...externalForwardedProps,
196
- ...other
197
- },
198
- ownerState,
199
- additionalProps: {
200
- square: true,
201
- elevation: 0
202
- }
203
- });
204
- const [DotsSlot, dotsSlotProps] = (0, _useSlot.default)('dots', {
205
- className: classes.dots,
206
- elementType: MobileStepperDots,
207
- externalForwardedProps,
208
- ownerState
209
- });
210
- const [DotSlot, dotSlotProps] = (0, _useSlot.default)('dot', {
211
- elementType: MobileStepperDot,
212
- externalForwardedProps,
213
- ownerState
214
- });
215
- const [ProgressSlot, progressSlotProps] = (0, _useSlot.default)('progress', {
216
- className: classes.progress,
217
- elementType: MobileStepperProgress,
218
- shouldForwardComponentProp: true,
219
- externalForwardedProps,
220
- ownerState,
221
- additionalProps: {
222
- value,
223
- variant: 'determinate'
224
- }
225
- });
226
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, {
227
- ...rootSlotProps,
183
+ ref: ref,
184
+ ownerState: ownerState,
185
+ ...other,
228
186
  children: [backButton, variant === 'text' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
229
187
  children: [activeStep + 1, " / ", steps]
230
- }), variant === 'dots' && /*#__PURE__*/(0, _jsxRuntime.jsx)(DotsSlot, {
231
- ...dotsSlotProps,
232
- children: [...new Array(steps)].map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(DotSlot, {
233
- ...dotSlotProps,
234
- className: (0, _clsx.default)(classes.dot, dotSlotProps.className, index === activeStep && classes.dotActive),
188
+ }), variant === 'dots' && /*#__PURE__*/(0, _jsxRuntime.jsx)(MobileStepperDots, {
189
+ ownerState: ownerState,
190
+ className: classes.dots,
191
+ children: [...new Array(steps)].map((_, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(MobileStepperDot, {
192
+ className: (0, _clsx.default)(classes.dot, index === activeStep && classes.dotActive),
193
+ ownerState: ownerState,
235
194
  dotActive: index === activeStep
236
195
  }, index))
237
- }), variant === 'progress' && /*#__PURE__*/(0, _jsxRuntime.jsx)(ProgressSlot, {
238
- ...progressSlotProps
196
+ }), variant === 'progress' && /*#__PURE__*/(0, _jsxRuntime.jsx)(MobileStepperProgress, {
197
+ ownerState: ownerState,
198
+ className: classes.progress,
199
+ variant: "determinate",
200
+ value: value,
201
+ ...LinearProgressProps
239
202
  }), nextButton]
240
203
  });
241
204
  });
@@ -264,7 +227,6 @@ process.env.NODE_ENV !== "production" ? MobileStepper.propTypes /* remove-propty
264
227
  className: _propTypes.default.string,
265
228
  /**
266
229
  * Props applied to the `LinearProgress` element.
267
- * @deprecated Use `slotProps.progress` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
268
230
  */
269
231
  LinearProgressProps: _propTypes.default.object,
270
232
  /**
@@ -276,26 +238,6 @@ process.env.NODE_ENV !== "production" ? MobileStepper.propTypes /* remove-propty
276
238
  * @default 'bottom'
277
239
  */
278
240
  position: _propTypes.default.oneOf(['bottom', 'static', 'top']),
279
- /**
280
- * The props used for each slot inside.
281
- * @default {}
282
- */
283
- slotProps: _propTypes.default.shape({
284
- dot: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
285
- dots: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
286
- progress: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
287
- root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
288
- }),
289
- /**
290
- * The components used for each slot inside.
291
- * @default {}
292
- */
293
- slots: _propTypes.default.shape({
294
- dot: _propTypes.default.elementType,
295
- dots: _propTypes.default.elementType,
296
- progress: _propTypes.default.elementType,
297
- root: _propTypes.default.elementType
298
- }),
299
241
  /**
300
242
  * The total steps.
301
243
  */