@mui/material 6.4.7 → 6.4.9

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 (222) hide show
  1. package/Accordion/Accordion.d.ts +20 -5
  2. package/Accordion/Accordion.js +18 -6
  3. package/AccordionActions/AccordionActions.d.ts +2 -2
  4. package/AccordionDetails/AccordionDetails.d.ts +2 -2
  5. package/AccordionSummary/AccordionSummary.d.ts +62 -7
  6. package/AccordionSummary/AccordionSummary.js +67 -16
  7. package/Alert/Alert.d.ts +3 -3
  8. package/AlertTitle/AlertTitle.d.ts +3 -3
  9. package/AppBar/AppBar.d.ts +3 -3
  10. package/Autocomplete/Autocomplete.d.ts +2 -2
  11. package/Autocomplete/Autocomplete.js +1 -1
  12. package/Avatar/Avatar.d.ts +2 -2
  13. package/AvatarGroup/AvatarGroup.d.ts +2 -2
  14. package/Backdrop/Backdrop.d.ts +3 -3
  15. package/Badge/Badge.d.ts +3 -3
  16. package/BottomNavigation/BottomNavigation.d.ts +2 -2
  17. package/BottomNavigationAction/BottomNavigationAction.d.ts +3 -3
  18. package/Box/Box.d.ts +2 -2
  19. package/Breadcrumbs/Breadcrumbs.d.ts +3 -3
  20. package/Button/Button.d.ts +4 -4
  21. package/ButtonBase/ButtonBase.d.ts +2 -2
  22. package/ButtonGroup/ButtonGroup.d.ts +2 -2
  23. package/CHANGELOG.md +78 -4
  24. package/Card/Card.d.ts +3 -3
  25. package/CardActionArea/CardActionArea.d.ts +3 -3
  26. package/CardActions/CardActions.d.ts +2 -2
  27. package/CardContent/CardContent.d.ts +2 -2
  28. package/CardHeader/CardHeader.d.ts +2 -2
  29. package/CardMedia/CardMedia.d.ts +2 -2
  30. package/Checkbox/Checkbox.d.ts +4 -4
  31. package/Chip/Chip.d.ts +2 -2
  32. package/CircularProgress/CircularProgress.d.ts +2 -2
  33. package/ClickAwayListener/ClickAwayListener.d.ts +3 -3
  34. package/ClickAwayListener/ClickAwayListener.js +3 -3
  35. package/Collapse/Collapse.d.ts +5 -5
  36. package/Container/Container.d.ts +2 -2
  37. package/CssBaseline/CssBaseline.d.ts +2 -2
  38. package/Dialog/Dialog.d.ts +3 -3
  39. package/DialogActions/DialogActions.d.ts +2 -2
  40. package/DialogContent/DialogContent.d.ts +2 -2
  41. package/DialogContentText/DialogContentText.d.ts +3 -3
  42. package/DialogTitle/DialogTitle.d.ts +3 -3
  43. package/Divider/Divider.d.ts +3 -3
  44. package/Drawer/Drawer.d.ts +3 -3
  45. package/Fab/Fab.d.ts +3 -3
  46. package/Fade/Fade.d.ts +3 -3
  47. package/FilledInput/FilledInput.d.ts +3 -3
  48. package/FormControl/FormControl.d.ts +6 -6
  49. package/FormControlLabel/FormControlLabel.d.ts +4 -4
  50. package/FormGroup/FormGroup.d.ts +3 -3
  51. package/FormHelperText/FormHelperText.d.ts +2 -2
  52. package/FormLabel/FormLabel.d.ts +4 -4
  53. package/GlobalStyles/GlobalStyles.d.ts +2 -2
  54. package/Grid/Grid.d.ts +2 -2
  55. package/Grid2/Grid2.d.ts +2 -2
  56. package/Grid2/Grid2.js +2 -2
  57. package/Grow/Grow.d.ts +5 -5
  58. package/Hidden/Hidden.d.ts +2 -2
  59. package/Icon/Icon.d.ts +3 -3
  60. package/IconButton/IconButton.d.ts +4 -4
  61. package/ImageList/ImageList.d.ts +2 -2
  62. package/ImageListItem/ImageListItem.d.ts +2 -2
  63. package/ImageListItemBar/ImageListItemBar.d.ts +2 -2
  64. package/Input/Input.d.ts +3 -3
  65. package/InputAdornment/InputAdornment.d.ts +2 -2
  66. package/InputBase/InputBase.d.ts +2 -2
  67. package/InputLabel/InputLabel.d.ts +3 -3
  68. package/LinearProgress/LinearProgress.d.ts +2 -2
  69. package/Link/Link.d.ts +4 -4
  70. package/List/List.d.ts +3 -3
  71. package/ListItem/ListItem.d.ts +3 -3
  72. package/ListItemAvatar/ListItemAvatar.d.ts +2 -2
  73. package/ListItemButton/ListItemButton.d.ts +3 -3
  74. package/ListItemIcon/ListItemIcon.d.ts +2 -2
  75. package/ListItemSecondaryAction/ListItemSecondaryAction.d.ts +2 -2
  76. package/ListItemText/ListItemText.d.ts +12 -2
  77. package/ListItemText/ListItemText.js +14 -5
  78. package/ListSubheader/ListSubheader.d.ts +2 -2
  79. package/Menu/Menu.d.ts +4 -4
  80. package/MenuItem/MenuItem.d.ts +3 -3
  81. package/MenuList/MenuList.d.ts +4 -4
  82. package/MobileStepper/MobileStepper.d.ts +3 -3
  83. package/Modal/Modal.d.ts +7 -7
  84. package/NativeSelect/NativeSelect.d.ts +3 -3
  85. package/NoSsr/NoSsr.d.ts +2 -2
  86. package/NoSsr/NoSsr.js +2 -2
  87. package/OutlinedInput/OutlinedInput.d.ts +3 -3
  88. package/Pagination/Pagination.d.ts +2 -2
  89. package/PaginationItem/PaginationItem.d.ts +2 -2
  90. package/Paper/Paper.d.ts +3 -3
  91. package/PigmentContainer/PigmentContainer.d.ts +2 -2
  92. package/PigmentContainer/PigmentContainer.js +2 -2
  93. package/PigmentGrid/PigmentGrid.d.ts +2 -2
  94. package/PigmentGrid/PigmentGrid.js +2 -2
  95. package/PigmentHidden/PigmentHidden.d.ts +2 -2
  96. package/PigmentHidden/PigmentHidden.js +2 -2
  97. package/PigmentStack/PigmentStack.d.ts +2 -2
  98. package/PigmentStack/PigmentStack.js +2 -2
  99. package/Popover/Popover.d.ts +4 -4
  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 -2
  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 +2 -2
  113. package/Snackbar/Snackbar.d.ts +2 -2
  114. package/Snackbar/Snackbar.js +7 -1
  115. package/SnackbarContent/SnackbarContent.d.ts +3 -3
  116. package/SpeedDial/SpeedDial.d.ts +12 -2
  117. package/SpeedDial/SpeedDial.js +40 -11
  118. package/SpeedDialAction/SpeedDialAction.d.ts +3 -3
  119. package/SpeedDialAction/SpeedDialAction.js +1 -1
  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 +21 -3
  128. package/StepLabel/StepLabel.js +14 -5
  129. package/Stepper/Stepper.d.ts +2 -2
  130. package/SvgIcon/SvgIcon.d.ts +3 -3
  131. package/SwipeableDrawer/SwipeableDrawer.d.ts +3 -3
  132. package/Switch/Switch.d.ts +78 -5
  133. package/Switch/Switch.js +71 -9
  134. package/Tab/Tab.d.ts +3 -3
  135. package/TabScrollButton/TabScrollButton.d.ts +2 -2
  136. package/Table/Table.d.ts +2 -2
  137. package/TableBody/TableBody.d.ts +2 -2
  138. package/TableCell/TableCell.d.ts +2 -2
  139. package/TableContainer/TableContainer.d.ts +2 -2
  140. package/TableFooter/TableFooter.d.ts +2 -2
  141. package/TableHead/TableHead.d.ts +2 -2
  142. package/TablePagination/TablePagination.d.ts +4 -4
  143. package/TableRow/TableRow.d.ts +2 -2
  144. package/TableSortLabel/TableSortLabel.d.ts +3 -3
  145. package/Tabs/Tabs.d.ts +2 -2
  146. package/Tabs/Tabs.js +4 -0
  147. package/TextField/TextField.d.ts +40 -10
  148. package/TextField/TextField.js +22 -11
  149. package/TextareaAutosize/TextareaAutosize.d.ts +2 -2
  150. package/TextareaAutosize/TextareaAutosize.js +28 -17
  151. package/ToggleButton/ToggleButton.d.ts +3 -3
  152. package/ToggleButtonGroup/ToggleButtonGroup.d.ts +2 -2
  153. package/Toolbar/Toolbar.d.ts +2 -2
  154. package/Tooltip/Tooltip.d.ts +3 -15
  155. package/Tooltip/Tooltip.js +1 -1
  156. package/Typography/Typography.d.ts +3 -3
  157. package/Zoom/Zoom.d.ts +3 -3
  158. package/index.js +1 -1
  159. package/modern/Accordion/Accordion.js +18 -6
  160. package/modern/AccordionSummary/AccordionSummary.js +67 -16
  161. package/modern/Autocomplete/Autocomplete.js +1 -1
  162. package/modern/ClickAwayListener/ClickAwayListener.js +3 -3
  163. package/modern/Grid2/Grid2.js +2 -2
  164. package/modern/ListItemText/ListItemText.js +14 -5
  165. package/modern/NoSsr/NoSsr.js +2 -2
  166. package/modern/PigmentContainer/PigmentContainer.js +2 -2
  167. package/modern/PigmentGrid/PigmentGrid.js +2 -2
  168. package/modern/PigmentHidden/PigmentHidden.js +2 -2
  169. package/modern/PigmentStack/PigmentStack.js +2 -2
  170. package/modern/Popper/Popper.js +4 -4
  171. package/modern/Portal/Portal.js +2 -2
  172. package/modern/Snackbar/Snackbar.js +7 -1
  173. package/modern/SpeedDial/SpeedDial.js +40 -11
  174. package/modern/SpeedDialAction/SpeedDialAction.js +1 -1
  175. package/modern/StepLabel/StepLabel.js +14 -5
  176. package/modern/Switch/Switch.js +71 -9
  177. package/modern/Tabs/Tabs.js +4 -0
  178. package/modern/TextField/TextField.js +22 -11
  179. package/modern/TextareaAutosize/TextareaAutosize.js +28 -17
  180. package/modern/Tooltip/Tooltip.js +1 -1
  181. package/modern/index.js +1 -1
  182. package/modern/styles/ThemeProvider.js +11 -0
  183. package/modern/styles/createThemeNoVars.js +1 -3
  184. package/modern/useAutocomplete/useAutocomplete.js +3 -3
  185. package/modern/useScrollTrigger/useScrollTrigger.js +3 -0
  186. package/modern/version/index.js +2 -2
  187. package/node/Accordion/Accordion.js +18 -6
  188. package/node/AccordionSummary/AccordionSummary.js +67 -16
  189. package/node/Autocomplete/Autocomplete.js +1 -1
  190. package/node/ClickAwayListener/ClickAwayListener.js +3 -3
  191. package/node/Grid2/Grid2.js +2 -2
  192. package/node/ListItemText/ListItemText.js +14 -5
  193. package/node/NoSsr/NoSsr.js +2 -2
  194. package/node/PigmentContainer/PigmentContainer.js +2 -2
  195. package/node/PigmentGrid/PigmentGrid.js +2 -2
  196. package/node/PigmentHidden/PigmentHidden.js +2 -2
  197. package/node/PigmentStack/PigmentStack.js +2 -2
  198. package/node/Popper/Popper.js +4 -4
  199. package/node/Portal/Portal.js +2 -2
  200. package/node/Snackbar/Snackbar.js +7 -1
  201. package/node/SpeedDial/SpeedDial.js +40 -11
  202. package/node/SpeedDialAction/SpeedDialAction.js +1 -1
  203. package/node/StepLabel/StepLabel.js +14 -5
  204. package/node/Switch/Switch.js +71 -9
  205. package/node/Tabs/Tabs.js +4 -0
  206. package/node/TextField/TextField.js +22 -11
  207. package/node/TextareaAutosize/TextareaAutosize.js +27 -16
  208. package/node/Tooltip/Tooltip.js +1 -1
  209. package/node/index.js +1 -1
  210. package/node/styles/ThemeProvider.js +11 -0
  211. package/node/styles/createThemeNoVars.js +1 -3
  212. package/node/useAutocomplete/useAutocomplete.js +3 -3
  213. package/node/useScrollTrigger/useScrollTrigger.js +3 -0
  214. package/node/version/index.js +2 -2
  215. package/package.json +6 -6
  216. package/styles/ThemeProvider.js +11 -0
  217. package/styles/createThemeNoVars.js +1 -3
  218. package/useAutocomplete/useAutocomplete.d.ts +2 -2
  219. package/useAutocomplete/useAutocomplete.js +3 -3
  220. package/useScrollTrigger/useScrollTrigger.d.ts +1 -1
  221. package/useScrollTrigger/useScrollTrigger.js +3 -0
  222. package/version/index.js +2 -2
@@ -18,6 +18,11 @@ export interface TextFieldPropsColorOverrides {}
18
18
  export interface TextFieldPropsSizeOverrides {}
19
19
 
20
20
  export interface TextFieldSlots {
21
+ /**
22
+ * The component that renders the root.
23
+ * @default FormControl
24
+ */
25
+ root: React.ElementType;
21
26
  /**
22
27
  * The component that renders the input.
23
28
  * @default OutlinedInput
@@ -48,10 +53,35 @@ export interface TextFieldSlots {
48
53
  export type TextFieldSlotsAndSlotProps<InputPropsType> = CreateSlotsAndSlotProps<
49
54
  TextFieldSlots,
50
55
  {
56
+ /**
57
+ * Props forwarded to the root slot.
58
+ * By default, the avaible props are based on the [FormControl](https://mui.com/material-ui/api/form-control/#props) component.
59
+ */
60
+ root: SlotProps<React.ElementType<FormControlProps>, {}, TextFieldOwnerState>;
61
+ /**
62
+ * Props forwarded to the input slot.
63
+ * By default, the avaible props are based on the [Input](https://mui.com/material-ui/api/input/#props) component.
64
+ */
51
65
  input: SlotProps<React.ElementType<InputPropsType>, {}, TextFieldOwnerState>;
66
+ /**
67
+ * Props forwarded to the input label slot.
68
+ * By default, the avaible props are based on the [InputLabel](https://mui.com/material-ui/api/input-label/#props) component.
69
+ */
52
70
  inputLabel: SlotProps<React.ElementType<InputLabelProps>, {}, TextFieldOwnerState>;
71
+ /**
72
+ * Props forwarded to the html input slot.
73
+ * By default, the avaible props are based on the html input element.
74
+ */
53
75
  htmlInput: SlotProps<React.ElementType<InputBaseProps['inputProps']>, {}, TextFieldOwnerState>;
76
+ /**
77
+ * Props forwarded to the form helper text slot.
78
+ * By default, the avaible props are based on the [FormHelperText](https://mui.com/material-ui/api/form-helper-text/#props) component.
79
+ */
54
80
  formHelperText: SlotProps<React.ElementType<FormHelperTextProps>, {}, TextFieldOwnerState>;
81
+ /**
82
+ * Props forwarded to the select slot.
83
+ * By default, the avaible props are based on the [Select](https://mui.com/material-ui/api/select/#props) component.
84
+ */
55
85
  select: SlotProps<React.ElementType<SelectProps>, {}, TextFieldOwnerState>;
56
86
  }
57
87
  >;
@@ -300,12 +330,12 @@ export type TextFieldOwnerState = BaseTextFieldProps;
300
330
  * It's important to understand that the text field is a simple abstraction
301
331
  * on top of the following components:
302
332
  *
303
- * * [FormControl](https://mui.com/material-ui/api/form-control/)
304
- * * [InputLabel](https://mui.com/material-ui/api/input-label/)
305
- * * [FilledInput](https://mui.com/material-ui/api/filled-input/)
306
- * * [OutlinedInput](https://mui.com/material-ui/api/outlined-input/)
307
- * * [Input](https://mui.com/material-ui/api/input/)
308
- * * [FormHelperText](https://mui.com/material-ui/api/form-helper-text/)
333
+ * * [FormControl](https://v6.mui.com/material-ui/api/form-control/)
334
+ * * [InputLabel](https://v6.mui.com/material-ui/api/input-label/)
335
+ * * [FilledInput](https://v6.mui.com/material-ui/api/filled-input/)
336
+ * * [OutlinedInput](https://v6.mui.com/material-ui/api/outlined-input/)
337
+ * * [Input](https://v6.mui.com/material-ui/api/input/)
338
+ * * [FormHelperText](https://v6.mui.com/material-ui/api/form-helper-text/)
309
339
  *
310
340
  * If you wish to alter the props applied to the `input` element, you can do so as follows:
311
341
  *
@@ -325,13 +355,13 @@ export type TextFieldOwnerState = BaseTextFieldProps;
325
355
  *
326
356
  * Demos:
327
357
  *
328
- * - [Autocomplete](https://mui.com/material-ui/react-autocomplete/)
329
- * - [Text Field](https://mui.com/material-ui/react-text-field/)
358
+ * - [Autocomplete](https://v6.mui.com/material-ui/react-autocomplete/)
359
+ * - [Text Field](https://v6.mui.com/material-ui/react-text-field/)
330
360
  *
331
361
  * API:
332
362
  *
333
- * - [TextField API](https://mui.com/material-ui/api/text-field/)
334
- * - inherits [FormControl API](https://mui.com/material-ui/api/form-control/)
363
+ * - [TextField API](https://v6.mui.com/material-ui/api/text-field/)
364
+ * - inherits [FormControl API](https://v6.mui.com/material-ui/api/form-control/)
335
365
  */
336
366
  export default function TextField<Variant extends TextFieldVariants>(
337
367
  props: {
@@ -160,6 +160,25 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
160
160
  }
161
161
  inputAdditionalProps['aria-describedby'] = undefined;
162
162
  }
163
+ const [RootSlot, rootProps] = useSlot('root', {
164
+ elementType: TextFieldRoot,
165
+ shouldForwardComponentProp: true,
166
+ externalForwardedProps: {
167
+ ...externalForwardedProps,
168
+ ...other
169
+ },
170
+ ownerState,
171
+ className: clsx(classes.root, className),
172
+ ref,
173
+ additionalProps: {
174
+ disabled,
175
+ error,
176
+ fullWidth,
177
+ required,
178
+ color,
179
+ variant
180
+ }
181
+ });
163
182
  const [InputSlot, inputProps] = useSlot('input', {
164
183
  elementType: InputComponent,
165
184
  externalForwardedProps,
@@ -211,17 +230,8 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref)
211
230
  },
212
231
  ...inputProps
213
232
  });
214
- return /*#__PURE__*/_jsxs(TextFieldRoot, {
215
- className: clsx(classes.root, className),
216
- disabled: disabled,
217
- error: error,
218
- fullWidth: fullWidth,
219
- ref: ref,
220
- required: required,
221
- color: color,
222
- variant: variant,
223
- ownerState: ownerState,
224
- ...other,
233
+ return /*#__PURE__*/_jsxs(RootSlot, {
234
+ ...rootProps,
225
235
  children: [label != null && label !== '' && /*#__PURE__*/_jsx(InputLabelSlot, {
226
236
  htmlFor: id,
227
237
  id: inputLabelId,
@@ -423,6 +433,7 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes /* remove-proptypes
423
433
  htmlInput: PropTypes.elementType,
424
434
  input: PropTypes.elementType,
425
435
  inputLabel: PropTypes.elementType,
436
+ root: PropTypes.elementType,
426
437
  select: PropTypes.elementType
427
438
  }),
428
439
  /**
@@ -4,11 +4,11 @@ import { TextareaAutosizeProps } from './TextareaAutosize.types';
4
4
  *
5
5
  * Demos:
6
6
  *
7
- * - [Textarea Autosize](https://mui.com/material-ui/react-textarea-autosize/)
7
+ * - [Textarea Autosize](https://v6.mui.com/material-ui/react-textarea-autosize/)
8
8
  *
9
9
  * API:
10
10
  *
11
- * - [TextareaAutosize API](https://mui.com/material-ui/api/textarea-autosize/)
11
+ * - [TextareaAutosize API](https://v6.mui.com/material-ui/api/textarea-autosize/)
12
12
  */
13
13
  declare const TextareaAutosize: React.ForwardRefExoticComponent<TextareaAutosizeProps & React.RefAttributes<Element>>;
14
14
  export default TextareaAutosize;
@@ -2,7 +2,7 @@
2
2
 
3
3
  import * as React from 'react';
4
4
  import PropTypes from 'prop-types';
5
- import { unstable_debounce as debounce, unstable_useForkRef as useForkRef, unstable_useEnhancedEffect as useEnhancedEffect, unstable_ownerWindow as ownerWindow } from '@mui/utils';
5
+ import { unstable_debounce as debounce, unstable_useForkRef as useForkRef, unstable_useEnhancedEffect as useEnhancedEffect, unstable_useEventCallback as useEventCallback, unstable_ownerWindow as ownerWindow } from '@mui/utils';
6
6
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
7
7
  function getStyleValue(value) {
8
8
  return parseInt(value, 10) || 0;
@@ -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://v6.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://v6.mui.com/material-ui/api/textarea-autosize/)
45
45
  */
46
46
  const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize(props, forwardedRef) {
47
47
  const {
@@ -112,6 +112,15 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
112
112
  overflowing
113
113
  };
114
114
  }, [maxRows, minRows, props.placeholder]);
115
+ const didHeightChange = useEventCallback(() => {
116
+ const textarea = textareaRef.current;
117
+ const textareaStyles = calculateTextareaStyles();
118
+ if (!textarea || !textareaStyles || isEmpty(textareaStyles)) {
119
+ return false;
120
+ }
121
+ const outerHeightStyle = textareaStyles.outerHeightStyle;
122
+ return heightRef.current != null && heightRef.current !== outerHeightStyle;
123
+ });
115
124
  const syncHeight = React.useCallback(() => {
116
125
  const textarea = textareaRef.current;
117
126
  const textareaStyles = calculateTextareaStyles();
@@ -127,37 +136,39 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
127
136
  }, [calculateTextareaStyles]);
128
137
  const frameRef = React.useRef(-1);
129
138
  useEnhancedEffect(() => {
130
- const debounceHandleResize = debounce(() => syncHeight());
139
+ const debouncedHandleResize = debounce(syncHeight);
131
140
  const textarea = textareaRef?.current;
132
141
  if (!textarea) {
133
142
  return undefined;
134
143
  }
135
144
  const containerWindow = ownerWindow(textarea);
136
- containerWindow.addEventListener('resize', debounceHandleResize);
145
+ containerWindow.addEventListener('resize', debouncedHandleResize);
137
146
  let resizeObserver;
138
147
  if (typeof ResizeObserver !== 'undefined') {
139
148
  resizeObserver = new ResizeObserver(() => {
140
- // avoid "ResizeObserver loop completed with undelivered notifications" error
141
- // by temporarily unobserving the textarea element while manipulating the height
142
- // and reobserving one frame later
143
- resizeObserver.unobserve(textarea);
144
- cancelAnimationFrame(frameRef.current);
145
- syncHeight();
146
- frameRef.current = requestAnimationFrame(() => {
147
- resizeObserver.observe(textarea);
148
- });
149
+ if (didHeightChange()) {
150
+ // avoid "ResizeObserver loop completed with undelivered notifications" error
151
+ // by temporarily unobserving the textarea element while manipulating the height
152
+ // and reobserving one frame later
153
+ resizeObserver.unobserve(textarea);
154
+ cancelAnimationFrame(frameRef.current);
155
+ syncHeight();
156
+ frameRef.current = requestAnimationFrame(() => {
157
+ resizeObserver.observe(textarea);
158
+ });
159
+ }
149
160
  });
150
161
  resizeObserver.observe(textarea);
151
162
  }
152
163
  return () => {
153
- debounceHandleResize.clear();
164
+ debouncedHandleResize.clear();
154
165
  cancelAnimationFrame(frameRef.current);
155
- containerWindow.removeEventListener('resize', debounceHandleResize);
166
+ containerWindow.removeEventListener('resize', debouncedHandleResize);
156
167
  if (resizeObserver) {
157
168
  resizeObserver.disconnect();
158
169
  }
159
170
  };
160
- }, [calculateTextareaStyles, syncHeight]);
171
+ }, [calculateTextareaStyles, syncHeight, didHeightChange]);
161
172
  useEnhancedEffect(() => {
162
173
  syncHeight();
163
174
  });
@@ -91,12 +91,12 @@ export type ToggleButtonTypeMap<
91
91
  *
92
92
  * Demos:
93
93
  *
94
- * - [Toggle Button](https://mui.com/material-ui/react-toggle-button/)
94
+ * - [Toggle Button](https://v6.mui.com/material-ui/react-toggle-button/)
95
95
  *
96
96
  * API:
97
97
  *
98
- * - [ToggleButton API](https://mui.com/material-ui/api/toggle-button/)
99
- * - inherits [ButtonBase API](https://mui.com/material-ui/api/button-base/)
98
+ * - [ToggleButton API](https://v6.mui.com/material-ui/api/toggle-button/)
99
+ * - inherits [ButtonBase API](https://v6.mui.com/material-ui/api/button-base/)
100
100
  */
101
101
  declare const ToggleButton: ExtendButtonBase<ToggleButtonTypeMap>;
102
102
 
@@ -80,10 +80,10 @@ export interface ToggleButtonGroupProps
80
80
  *
81
81
  * Demos:
82
82
  *
83
- * - [Toggle Button](https://mui.com/material-ui/react-toggle-button/)
83
+ * - [Toggle Button](https://v6.mui.com/material-ui/react-toggle-button/)
84
84
  *
85
85
  * API:
86
86
  *
87
- * - [ToggleButtonGroup API](https://mui.com/material-ui/api/toggle-button-group/)
87
+ * - [ToggleButtonGroup API](https://v6.mui.com/material-ui/api/toggle-button-group/)
88
88
  */
89
89
  export default function ToggleButtonGroup(props: ToggleButtonGroupProps): React.JSX.Element;
@@ -44,11 +44,11 @@ export interface ToolbarTypeMap<
44
44
  *
45
45
  * Demos:
46
46
  *
47
- * - [App Bar](https://mui.com/material-ui/react-app-bar/)
47
+ * - [App Bar](https://v6.mui.com/material-ui/react-app-bar/)
48
48
  *
49
49
  * API:
50
50
  *
51
- * - [Toolbar API](https://mui.com/material-ui/api/toolbar/)
51
+ * - [Toolbar API](https://v6.mui.com/material-ui/api/toolbar/)
52
52
  */
53
53
  declare const Toolbar: OverridableComponent<ToolbarTypeMap>;
54
54
 
@@ -203,19 +203,7 @@ export interface TooltipProps
203
203
  * Tooltip placement.
204
204
  * @default 'bottom'
205
205
  */
206
- placement?:
207
- | 'bottom-end'
208
- | 'bottom-start'
209
- | 'bottom'
210
- | 'left-end'
211
- | 'left-start'
212
- | 'left'
213
- | 'right-end'
214
- | 'right-start'
215
- | 'right'
216
- | 'top-end'
217
- | 'top-start'
218
- | 'top';
206
+ placement?: PopperProps['placement'];
219
207
  /**
220
208
  * The component used for the popper.
221
209
  * @deprecated use the `slots.popper` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
@@ -258,10 +246,10 @@ export interface TooltipOwnerState extends TooltipProps {}
258
246
  *
259
247
  * Demos:
260
248
  *
261
- * - [Tooltip](https://mui.com/material-ui/react-tooltip/)
249
+ * - [Tooltip](https://v6.mui.com/material-ui/react-tooltip/)
262
250
  *
263
251
  * API:
264
252
  *
265
- * - [Tooltip API](https://mui.com/material-ui/api/tooltip/)
253
+ * - [Tooltip API](https://v6.mui.com/material-ui/api/tooltip/)
266
254
  */
267
255
  export default function Tooltip(props: TooltipProps): React.JSX.Element;
@@ -841,7 +841,7 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes /* remove-proptypes */
841
841
  * Tooltip placement.
842
842
  * @default 'bottom'
843
843
  */
844
- placement: PropTypes.oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
844
+ placement: PropTypes.oneOf(['auto-end', 'auto-start', 'auto', 'bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
845
845
  /**
846
846
  * The component used for the popper.
847
847
  * @deprecated use the `slots.popper` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
@@ -105,12 +105,12 @@ export interface TypographyTypeMap<
105
105
  *
106
106
  * Demos:
107
107
  *
108
- * - [Breadcrumbs](https://mui.com/material-ui/react-breadcrumbs/)
109
- * - [Typography](https://mui.com/material-ui/react-typography/)
108
+ * - [Breadcrumbs](https://v6.mui.com/material-ui/react-breadcrumbs/)
109
+ * - [Typography](https://v6.mui.com/material-ui/react-typography/)
110
110
  *
111
111
  * API:
112
112
  *
113
- * - [Typography API](https://mui.com/material-ui/api/typography/)
113
+ * - [Typography API](https://v6.mui.com/material-ui/api/typography/)
114
114
  */
115
115
  declare const Typography: OverridableComponent<TypographyTypeMap>;
116
116
 
package/Zoom/Zoom.d.ts CHANGED
@@ -35,16 +35,16 @@ export interface ZoomProps extends TransitionProps {
35
35
 
36
36
  /**
37
37
  * The Zoom transition can be used for the floating variant of the
38
- * [Button](https://mui.com/material-ui/react-button/#floating-action-buttons) component.
38
+ * [Button](https://v6.mui.com/material-ui/react-button/#floating-action-buttons) component.
39
39
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
40
40
  *
41
41
  * Demos:
42
42
  *
43
- * - [Transitions](https://mui.com/material-ui/transitions/)
43
+ * - [Transitions](https://v6.mui.com/material-ui/transitions/)
44
44
  *
45
45
  * API:
46
46
  *
47
- * - [Zoom API](https://mui.com/material-ui/api/zoom/)
47
+ * - [Zoom API](https://v6.mui.com/material-ui/api/zoom/)
48
48
  * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition/#Transition-props)
49
49
  */
50
50
  export default function Zoom(props: ZoomProps): React.JSX.Element;
package/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/material v6.4.7
2
+ * @mui/material v6.4.9
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -185,6 +185,20 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
185
185
  slots: backwardCompatibleSlots,
186
186
  slotProps: backwardCompatibleSlotProps
187
187
  };
188
+ const [RootSlot, rootProps] = useSlot('root', {
189
+ elementType: AccordionRoot,
190
+ externalForwardedProps: {
191
+ ...externalForwardedProps,
192
+ ...other
193
+ },
194
+ className: clsx(classes.root, className),
195
+ shouldForwardComponentProp: true,
196
+ ownerState,
197
+ ref,
198
+ additionalProps: {
199
+ square
200
+ }
201
+ });
188
202
  const [AccordionHeadingSlot, accordionProps] = useSlot('heading', {
189
203
  elementType: AccordionHeading,
190
204
  externalForwardedProps,
@@ -196,12 +210,8 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
196
210
  externalForwardedProps,
197
211
  ownerState
198
212
  });
199
- return /*#__PURE__*/_jsxs(AccordionRoot, {
200
- className: clsx(classes.root, className),
201
- ref: ref,
202
- ownerState: ownerState,
203
- square: square,
204
- ...other,
213
+ return /*#__PURE__*/_jsxs(RootSlot, {
214
+ ...rootProps,
205
215
  children: [/*#__PURE__*/_jsx(AccordionHeadingSlot, {
206
216
  ...accordionProps,
207
217
  children: /*#__PURE__*/_jsx(AccordionContext.Provider, {
@@ -281,6 +291,7 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes /* remove-proptypes
281
291
  */
282
292
  slotProps: PropTypes.shape({
283
293
  heading: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
294
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
284
295
  transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
285
296
  }),
286
297
  /**
@@ -289,6 +300,7 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes /* remove-proptypes
289
300
  */
290
301
  slots: PropTypes.shape({
291
302
  heading: PropTypes.elementType,
303
+ root: PropTypes.elementType,
292
304
  transition: PropTypes.elementType
293
305
  }),
294
306
  /**
@@ -10,6 +10,7 @@ import { useDefaultProps } from "../DefaultPropsProvider/index.js";
10
10
  import ButtonBase from "../ButtonBase/index.js";
11
11
  import AccordionContext from "../Accordion/AccordionContext.js";
12
12
  import accordionSummaryClasses, { getAccordionSummaryUtilityClass } from "./accordionSummaryClasses.js";
13
+ import useSlot from "../utils/useSlot.js";
13
14
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
14
15
  const useUtilityClasses = ownerState => {
15
16
  const {
@@ -112,6 +113,8 @@ const AccordionSummary = /*#__PURE__*/React.forwardRef(function AccordionSummary
112
113
  expandIcon,
113
114
  focusVisibleClassName,
114
115
  onClick,
116
+ slots,
117
+ slotProps,
115
118
  ...other
116
119
  } = props;
117
120
  const {
@@ -135,24 +138,54 @@ const AccordionSummary = /*#__PURE__*/React.forwardRef(function AccordionSummary
135
138
  disableGutters
136
139
  };
137
140
  const classes = useUtilityClasses(ownerState);
138
- return /*#__PURE__*/_jsxs(AccordionSummaryRoot, {
139
- focusRipple: false,
140
- disableRipple: true,
141
- disabled: disabled,
142
- "aria-expanded": expanded,
141
+ const externalForwardedProps = {
142
+ slots,
143
+ slotProps
144
+ };
145
+ const [RootSlot, rootSlotProps] = useSlot('root', {
146
+ ref,
147
+ shouldForwardComponentProp: true,
143
148
  className: clsx(classes.root, className),
144
- focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
145
- onClick: handleChange,
146
- ref: ref,
147
- ownerState: ownerState,
148
- ...other,
149
- children: [/*#__PURE__*/_jsx(AccordionSummaryContent, {
150
- className: classes.content,
151
- ownerState: ownerState,
149
+ elementType: AccordionSummaryRoot,
150
+ externalForwardedProps: {
151
+ ...externalForwardedProps,
152
+ ...other
153
+ },
154
+ ownerState,
155
+ additionalProps: {
156
+ focusRipple: false,
157
+ disableRipple: true,
158
+ disabled,
159
+ 'aria-expanded': expanded,
160
+ focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName)
161
+ },
162
+ getSlotProps: handlers => ({
163
+ ...handlers,
164
+ onClick: event => {
165
+ handlers.onClick?.(event);
166
+ handleChange(event);
167
+ }
168
+ })
169
+ });
170
+ const [ContentSlot, contentSlotProps] = useSlot('content', {
171
+ className: classes.content,
172
+ elementType: AccordionSummaryContent,
173
+ externalForwardedProps,
174
+ ownerState
175
+ });
176
+ const [ExpandIconWrapperSlot, expandIconWrapperSlotProps] = useSlot('expandIconWrapper', {
177
+ className: classes.expandIconWrapper,
178
+ elementType: AccordionSummaryExpandIconWrapper,
179
+ externalForwardedProps,
180
+ ownerState
181
+ });
182
+ return /*#__PURE__*/_jsxs(RootSlot, {
183
+ ...rootSlotProps,
184
+ children: [/*#__PURE__*/_jsx(ContentSlot, {
185
+ ...contentSlotProps,
152
186
  children: children
153
- }), expandIcon && /*#__PURE__*/_jsx(AccordionSummaryExpandIconWrapper, {
154
- className: classes.expandIconWrapper,
155
- ownerState: ownerState,
187
+ }), expandIcon && /*#__PURE__*/_jsx(ExpandIconWrapperSlot, {
188
+ ...expandIconWrapperSlotProps,
156
189
  children: expandIcon
157
190
  })]
158
191
  });
@@ -191,6 +224,24 @@ process.env.NODE_ENV !== "production" ? AccordionSummary.propTypes /* remove-pro
191
224
  * @ignore
192
225
  */
193
226
  onClick: PropTypes.func,
227
+ /**
228
+ * The props used for each slot inside.
229
+ * @default {}
230
+ */
231
+ slotProps: PropTypes.shape({
232
+ content: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
233
+ expandIconWrapper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
234
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
235
+ }),
236
+ /**
237
+ * The components used for each slot inside.
238
+ * @default {}
239
+ */
240
+ slots: PropTypes.shape({
241
+ content: PropTypes.elementType,
242
+ expandIconWrapper: PropTypes.elementType,
243
+ root: PropTypes.elementType
244
+ }),
194
245
  /**
195
246
  * The system prop that allows defining system overrides as well as additional CSS styles.
196
247
  */
@@ -1037,7 +1037,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
1037
1037
  *
1038
1038
  * @param {React.SyntheticEvent} event The event source of the callback.
1039
1039
  * @param {Value} option The highlighted option.
1040
- * @param {string} reason Can be: `"keyboard"`, `"auto"`, `"mouse"`, `"touch"`.
1040
+ * @param {string} reason Can be: `"keyboard"`, `"mouse"`, `"touch"`.
1041
1041
  */
1042
1042
  onHighlightChange: PropTypes.func,
1043
1043
  /**
@@ -18,12 +18,12 @@ function clickedRootScrollbar(event, doc) {
18
18
  *
19
19
  * Demos:
20
20
  *
21
- * - [Click-Away Listener](https://mui.com/material-ui/react-click-away-listener/)
22
- * - [Menu](https://mui.com/material-ui/react-menu/)
21
+ * - [Click-Away Listener](https://v6.mui.com/material-ui/react-click-away-listener/)
22
+ * - [Menu](https://v6.mui.com/material-ui/react-menu/)
23
23
  *
24
24
  * API:
25
25
  *
26
- * - [ClickAwayListener API](https://mui.com/material-ui/api/click-away-listener/)
26
+ * - [ClickAwayListener API](https://v6.mui.com/material-ui/api/click-away-listener/)
27
27
  */
28
28
  function ClickAwayListener(props) {
29
29
  const {
@@ -10,11 +10,11 @@ import useTheme from "../styles/useTheme.js";
10
10
  *
11
11
  * Demos:
12
12
  *
13
- * - [Grid version 2](https://mui.com/material-ui/react-grid2/)
13
+ * - [Grid version 2](https://v6.mui.com/material-ui/react-grid2/)
14
14
  *
15
15
  * API:
16
16
  *
17
- * - [Grid2 API](https://mui.com/material-ui/api/grid-2/)
17
+ * - [Grid2 API](https://v6.mui.com/material-ui/api/grid-2/)
18
18
  */
19
19
  const Grid2 = createGrid2({
20
20
  createStyledComponent: styled('div', {
@@ -107,6 +107,16 @@ const ListItemText = /*#__PURE__*/React.forwardRef(function ListItemText(inProps
107
107
  ...slotProps
108
108
  }
109
109
  };
110
+ const [RootSlot, rootSlotProps] = useSlot('root', {
111
+ className: clsx(classes.root, className),
112
+ elementType: ListItemTextRoot,
113
+ externalForwardedProps: {
114
+ ...externalForwardedProps,
115
+ ...other
116
+ },
117
+ ownerState,
118
+ ref
119
+ });
110
120
  const [PrimarySlot, primarySlotProps] = useSlot('primary', {
111
121
  className: classes.primary,
112
122
  elementType: Typography,
@@ -135,11 +145,8 @@ const ListItemText = /*#__PURE__*/React.forwardRef(function ListItemText(inProps
135
145
  children: secondary
136
146
  });
137
147
  }
138
- return /*#__PURE__*/_jsxs(ListItemTextRoot, {
139
- className: clsx(classes.root, className),
140
- ownerState: ownerState,
141
- ref: ref,
142
- ...other,
148
+ return /*#__PURE__*/_jsxs(RootSlot, {
149
+ ...rootSlotProps,
143
150
  children: [primary, secondary]
144
151
  });
145
152
  });
@@ -200,6 +207,7 @@ process.env.NODE_ENV !== "production" ? ListItemText.propTypes /* remove-proptyp
200
207
  */
201
208
  slotProps: PropTypes.shape({
202
209
  primary: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
210
+ root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
203
211
  secondary: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
204
212
  }),
205
213
  /**
@@ -208,6 +216,7 @@ process.env.NODE_ENV !== "production" ? ListItemText.propTypes /* remove-proptyp
208
216
  */
209
217
  slots: PropTypes.shape({
210
218
  primary: PropTypes.elementType,
219
+ root: PropTypes.elementType,
211
220
  secondary: PropTypes.elementType
212
221
  }),
213
222
  /**
@@ -15,11 +15,11 @@ import { exactProp, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui
15
15
  *
16
16
  * Demos:
17
17
  *
18
- * - [No SSR](https://mui.com/material-ui/react-no-ssr/)
18
+ * - [No SSR](https://v6.mui.com/material-ui/react-no-ssr/)
19
19
  *
20
20
  * API:
21
21
  *
22
- * - [NoSsr API](https://mui.com/material-ui/api/no-ssr/)
22
+ * - [NoSsr API](https://v6.mui.com/material-ui/api/no-ssr/)
23
23
  */
24
24
  function NoSsr(props) {
25
25
  const {