@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
@@ -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.3
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
  */
@@ -22,22 +22,29 @@ export default function mergeSlotProps(externalSlotProps, defaultSlotProps) {
22
22
  ...defaultSlotPropsValue.style,
23
23
  ...externalSlotPropsValue.style
24
24
  }
25
+ }),
26
+ ...(defaultSlotPropsValue?.sx && externalSlotPropsValue?.sx && {
27
+ sx: [...(Array.isArray(defaultSlotPropsValue.sx) ? defaultSlotPropsValue.sx : [defaultSlotPropsValue.sx]), ...(Array.isArray(externalSlotPropsValue.sx) ? externalSlotPropsValue.sx : [externalSlotPropsValue.sx])]
25
28
  })
26
29
  };
27
30
  };
28
31
  }
29
- const className = clsx(defaultSlotProps?.className, externalSlotProps?.className);
32
+ const typedDefaultSlotProps = defaultSlotProps;
33
+ const className = clsx(typedDefaultSlotProps?.className, externalSlotProps?.className);
30
34
  return {
31
35
  ...defaultSlotProps,
32
36
  ...externalSlotProps,
33
37
  ...(!!className && {
34
38
  className
35
39
  }),
36
- ...(defaultSlotProps?.style && externalSlotProps?.style && {
40
+ ...(typedDefaultSlotProps?.style && externalSlotProps?.style && {
37
41
  style: {
38
- ...defaultSlotProps.style,
42
+ ...typedDefaultSlotProps.style,
39
43
  ...externalSlotProps.style
40
44
  }
45
+ }),
46
+ ...(typedDefaultSlotProps?.sx && externalSlotProps?.sx && {
47
+ sx: [...(Array.isArray(typedDefaultSlotProps.sx) ? typedDefaultSlotProps.sx : [typedDefaultSlotProps.sx]), ...(Array.isArray(externalSlotProps.sx) ? externalSlotProps.sx : [externalSlotProps.sx])]
41
48
  })
42
49
  };
43
50
  }
@@ -1,6 +1,6 @@
1
- export const version = "6.4.3";
2
- export const major = Number("6");
3
- export const minor = Number("4");
4
- export const patch = Number("3");
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.
@@ -22,7 +22,6 @@ var _Backdrop = _interopRequireDefault(require("../Backdrop"));
22
22
  var _useModal = _interopRequireDefault(require("./useModal"));
23
23
  var _modalClasses = require("./modalClasses");
24
24
  var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
25
- var _utils = require("../utils");
26
25
  var _jsxRuntime = require("react/jsx-runtime");
27
26
  const useUtilityClasses = ownerState => {
28
27
  const {
@@ -165,7 +164,6 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
165
164
  childProps.onExited = onExited;
166
165
  }
167
166
  const externalForwardedProps = {
168
- ...other,
169
167
  slots: {
170
168
  root: components.Root,
171
169
  backdrop: components.Backdrop,
@@ -177,19 +175,22 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
177
175
  }
178
176
  };
179
177
  const [RootSlot, rootProps] = (0, _useSlot.default)('root', {
178
+ ref,
180
179
  elementType: ModalRoot,
181
- externalForwardedProps,
182
- getSlotProps: getRootProps,
183
- additionalProps: {
184
- ref,
185
- as: component
180
+ externalForwardedProps: {
181
+ ...externalForwardedProps,
182
+ ...other,
183
+ component
186
184
  },
185
+ getSlotProps: getRootProps,
187
186
  ownerState,
188
187
  className: (0, _clsx.default)(className, classes?.root, !ownerState.open && ownerState.exited && classes?.hidden)
189
188
  });
190
189
  const [BackdropSlot, backdropProps] = (0, _useSlot.default)('backdrop', {
190
+ ref: BackdropProps?.ref,
191
191
  elementType: BackdropComponent,
192
192
  externalForwardedProps,
193
+ shouldForwardComponentProp: true,
193
194
  additionalProps: BackdropProps,
194
195
  getSlotProps: otherHandlers => {
195
196
  return getBackdropProps({
@@ -207,7 +208,6 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
207
208
  className: (0, _clsx.default)(BackdropProps?.className, classes?.backdrop),
208
209
  ownerState
209
210
  });
210
- const backdropRef = (0, _utils.useForkRef)(BackdropProps?.ref, backdropProps.ref);
211
211
  if (!keepMounted && !open && (!hasTransition || exited)) {
212
212
  return null;
213
213
  }
@@ -218,8 +218,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
218
218
  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, {
219
219
  ...rootProps,
220
220
  children: [!hideBackdrop && BackdropComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(BackdropSlot, {
221
- ...backdropProps,
222
- ref: backdropRef
221
+ ...backdropProps
223
222
  }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Unstable_TrapFocus.default, {
224
223
  disableEnforceFocus: disableEnforceFocus,
225
224
  disableAutoFocus: disableAutoFocus,
@@ -22,11 +22,11 @@ var _utils = require("@mui/utils");
22
22
  *
23
23
  * Demos:
24
24
  *
25
- * - [No SSR](https://mui.com/material-ui/react-no-ssr/)
25
+ * - [No SSR](https://next.mui.com/material-ui/react-no-ssr/)
26
26
  *
27
27
  * API:
28
28
  *
29
- * - [NoSsr API](https://mui.com/material-ui/api/no-ssr/)
29
+ * - [NoSsr API](https://next.mui.com/material-ui/api/no-ssr/)
30
30
  */
31
31
  function NoSsr(props) {
32
32
  const {
@@ -32,11 +32,11 @@ const useUtilityClasses = ownerState => {
32
32
  *
33
33
  * Demos:
34
34
  *
35
- * - [Container](https://mui.com/material-ui/react-container/)
35
+ * - [Container](https://next.mui.com/material-ui/react-container/)
36
36
  *
37
37
  * API:
38
38
  *
39
- * - [PigmentContainer API](https://mui.com/material-ui/api/pigment-container/)
39
+ * - [PigmentContainer API](https://next.mui.com/material-ui/api/pigment-container/)
40
40
  */
41
41
  const PigmentContainer = /*#__PURE__*/React.forwardRef(function PigmentContainer({
42
42
  className,
@@ -46,11 +46,11 @@ const useUtilityClasses = ownerState => {
46
46
  *
47
47
  * Demos:
48
48
  *
49
- * - [Grid version 2](https://mui.com/material-ui/react-grid2/)
49
+ * - [Grid version 2](https://next.mui.com/material-ui/react-grid2/)
50
50
  *
51
51
  * API:
52
52
  *
53
- * - [PigmentGrid API](https://mui.com/material-ui/api/pigment-grid/)
53
+ * - [PigmentGrid API](https://next.mui.com/material-ui/api/pigment-grid/)
54
54
  */
55
55
  const PigmentGrid = /*#__PURE__*/React.forwardRef(function PigmentGrid(props, ref) {
56
56
  const {
@@ -179,11 +179,11 @@ process.env.NODE_ENV !== "production" ? HiddenCss.propTypes /* remove-proptypes
179
179
  *
180
180
  * Demos:
181
181
  *
182
- * - [Hidden](https://mui.com/material-ui/react-hidden/)
182
+ * - [Hidden](https://next.mui.com/material-ui/react-hidden/)
183
183
  *
184
184
  * API:
185
185
  *
186
- * - [PigmentHidden API](https://mui.com/material-ui/api/pigment-hidden/)
186
+ * - [PigmentHidden API](https://next.mui.com/material-ui/api/pigment-hidden/)
187
187
  */
188
188
  function PigmentHidden({
189
189
  implementation = 'js',
@@ -25,11 +25,11 @@ const useUtilityClasses = () => {
25
25
  *
26
26
  * Demos:
27
27
  *
28
- * - [Stack](https://mui.com/material-ui/react-stack/)
28
+ * - [Stack](https://next.mui.com/material-ui/react-stack/)
29
29
  *
30
30
  * API:
31
31
  *
32
- * - [PigmentStack API](https://mui.com/material-ui/api/pigment-stack/)
32
+ * - [PigmentStack API](https://next.mui.com/material-ui/api/pigment-stack/)
33
33
  */
34
34
  const PigmentStack = /*#__PURE__*/React.forwardRef(function PigmentStack({
35
35
  className,