@mui/material 6.2.1 → 6.3.1

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 (71) hide show
  1. package/AccordionSummary/AccordionSummary.js +4 -3
  2. package/AppBar/AppBar.d.ts +1 -1
  3. package/AppBar/AppBar.js +1 -1
  4. package/Autocomplete/Autocomplete.js +36 -49
  5. package/Backdrop/Backdrop.js +1 -9
  6. package/CHANGELOG.md +77 -0
  7. package/Collapse/Collapse.js +5 -4
  8. package/Fade/Fade.js +5 -2
  9. package/FilledInput/FilledInput.js +1 -3
  10. package/Grow/Grow.js +5 -2
  11. package/Icon/Icon.js +1 -3
  12. package/Input/Input.js +1 -3
  13. package/OutlinedInput/OutlinedInput.js +1 -3
  14. package/Select/selectClasses.d.ts +9 -3
  15. package/Slide/Slide.js +5 -2
  16. package/StepContent/StepContent.d.ts +31 -2
  17. package/StepContent/StepContent.js +39 -7
  18. package/StepLabel/StepLabel.js +1 -3
  19. package/SvgIcon/SvgIcon.js +1 -3
  20. package/TablePagination/TablePagination.d.ts +134 -18
  21. package/TablePagination/TablePagination.js +89 -33
  22. package/TableSortLabel/TableSortLabel.d.ts +43 -1
  23. package/TableSortLabel/TableSortLabel.js +40 -7
  24. package/Tooltip/Tooltip.js +1 -1
  25. package/Zoom/Zoom.js +5 -2
  26. package/index.js +1 -1
  27. package/modern/AccordionSummary/AccordionSummary.js +4 -3
  28. package/modern/AppBar/AppBar.js +1 -1
  29. package/modern/Autocomplete/Autocomplete.js +36 -49
  30. package/modern/Backdrop/Backdrop.js +1 -9
  31. package/modern/Collapse/Collapse.js +5 -4
  32. package/modern/Fade/Fade.js +5 -2
  33. package/modern/FilledInput/FilledInput.js +1 -3
  34. package/modern/Grow/Grow.js +5 -2
  35. package/modern/Icon/Icon.js +1 -3
  36. package/modern/Input/Input.js +1 -3
  37. package/modern/OutlinedInput/OutlinedInput.js +1 -3
  38. package/modern/Slide/Slide.js +5 -2
  39. package/modern/StepContent/StepContent.js +39 -7
  40. package/modern/StepLabel/StepLabel.js +1 -3
  41. package/modern/SvgIcon/SvgIcon.js +1 -3
  42. package/modern/TablePagination/TablePagination.js +89 -33
  43. package/modern/TableSortLabel/TableSortLabel.js +40 -7
  44. package/modern/Tooltip/Tooltip.js +1 -1
  45. package/modern/Zoom/Zoom.js +5 -2
  46. package/modern/index.js +1 -1
  47. package/modern/version/index.js +2 -2
  48. package/node/AccordionSummary/AccordionSummary.js +4 -3
  49. package/node/AppBar/AppBar.js +1 -1
  50. package/node/Autocomplete/Autocomplete.js +36 -49
  51. package/node/Backdrop/Backdrop.js +1 -9
  52. package/node/Collapse/Collapse.js +5 -4
  53. package/node/Fade/Fade.js +5 -2
  54. package/node/FilledInput/FilledInput.js +1 -3
  55. package/node/Grow/Grow.js +5 -2
  56. package/node/Icon/Icon.js +1 -3
  57. package/node/Input/Input.js +1 -3
  58. package/node/OutlinedInput/OutlinedInput.js +1 -3
  59. package/node/Slide/Slide.js +5 -2
  60. package/node/StepContent/StepContent.js +39 -7
  61. package/node/StepLabel/StepLabel.js +1 -3
  62. package/node/SvgIcon/SvgIcon.js +1 -3
  63. package/node/TablePagination/TablePagination.js +89 -33
  64. package/node/TableSortLabel/TableSortLabel.js +40 -7
  65. package/node/Tooltip/Tooltip.js +1 -1
  66. package/node/Zoom/Zoom.js +5 -2
  67. package/node/index.js +1 -1
  68. package/node/version/index.js +2 -2
  69. package/package.json +6 -6
  70. package/useAutocomplete/useAutocomplete.d.ts +20 -5
  71. package/version/index.js +2 -2
@@ -38,6 +38,7 @@ const AccordionSummaryRoot = styled(ButtonBase, {
38
38
  };
39
39
  return {
40
40
  display: 'flex',
41
+ width: '100%',
41
42
  minHeight: 48,
42
43
  padding: theme.spacing(0, 2),
43
44
  transition: theme.transitions.create(['min-height', 'background-color'], transition),
@@ -60,7 +61,7 @@ const AccordionSummaryRoot = styled(ButtonBase, {
60
61
  }]
61
62
  };
62
63
  }));
63
- const AccordionSummaryContent = styled('div', {
64
+ const AccordionSummaryContent = styled('span', {
64
65
  name: 'MuiAccordionSummary',
65
66
  slot: 'Content',
66
67
  overridesResolver: (props, styles) => styles.content
@@ -68,6 +69,7 @@ const AccordionSummaryContent = styled('div', {
68
69
  theme
69
70
  }) => ({
70
71
  display: 'flex',
72
+ textAlign: 'start',
71
73
  flexGrow: 1,
72
74
  margin: '12px 0',
73
75
  variants: [{
@@ -82,7 +84,7 @@ const AccordionSummaryContent = styled('div', {
82
84
  }
83
85
  }]
84
86
  })));
85
- const AccordionSummaryExpandIconWrapper = styled('div', {
87
+ const AccordionSummaryExpandIconWrapper = styled('span', {
86
88
  name: 'MuiAccordionSummary',
87
89
  slot: 'ExpandIconWrapper',
88
90
  overridesResolver: (props, styles) => styles.expandIconWrapper
@@ -137,7 +139,6 @@ const AccordionSummary = /*#__PURE__*/React.forwardRef(function AccordionSummary
137
139
  focusRipple: false,
138
140
  disableRipple: true,
139
141
  disabled: disabled,
140
- component: "div",
141
142
  "aria-expanded": expanded,
142
143
  className: clsx(classes.root, className),
143
144
  focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
@@ -30,7 +30,7 @@ export interface AppBarOwnProps {
30
30
  enableColorOnDark?: boolean;
31
31
  /**
32
32
  * The positioning type. The behavior of the different options is described
33
- * [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).
33
+ * [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Web/CSS/position).
34
34
  * Note: `sticky` is not universally supported and will fall back to `static` when unavailable.
35
35
  * @default 'fixed'
36
36
  */
package/AppBar/AppBar.js CHANGED
@@ -214,7 +214,7 @@ process.env.NODE_ENV !== "production" ? AppBar.propTypes /* remove-proptypes */
214
214
  enableColorOnDark: PropTypes.bool,
215
215
  /**
216
216
  * The positioning type. The behavior of the different options is described
217
- * [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).
217
+ * [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Web/CSS/position).
218
218
  * Note: `sticky` is not universally supported and will fall back to `static` when unavailable.
219
219
  * @default 'fixed'
220
220
  */
@@ -650,53 +650,6 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
650
650
  };
651
651
  const clearIndicatorSlotProps = externalForwardedProps.slotProps.clearIndicator;
652
652
  const popupIndicatorSlotProps = externalForwardedProps.slotProps.popupIndicator;
653
- const renderAutocompletePopperChildren = children => /*#__PURE__*/_jsx(AutocompletePopper, {
654
- as: PopperSlot,
655
- ...popperProps,
656
- children: /*#__PURE__*/_jsx(AutocompletePaper, {
657
- as: PaperSlot,
658
- ...paperProps,
659
- children: children
660
- })
661
- });
662
- let autocompletePopper = null;
663
- if (groupedOptions.length > 0) {
664
- autocompletePopper = renderAutocompletePopperChildren(
665
- /*#__PURE__*/
666
- // TODO v7: remove `as` prop and move ListboxComponentProp to externalForwardedProps or remove ListboxComponentProp entirely
667
- // https://github.com/mui/material-ui/pull/43994#issuecomment-2401945800
668
- _jsx(ListboxSlot, {
669
- as: ListboxComponentProp,
670
- ...listboxProps,
671
- children: groupedOptions.map((option, index) => {
672
- if (groupBy) {
673
- return renderGroup({
674
- key: option.key,
675
- group: option.group,
676
- children: option.options.map((option2, index2) => renderListOption(option2, option.index + index2))
677
- });
678
- }
679
- return renderListOption(option, index);
680
- })
681
- }));
682
- } else if (loading && groupedOptions.length === 0) {
683
- autocompletePopper = renderAutocompletePopperChildren(/*#__PURE__*/_jsx(AutocompleteLoading, {
684
- className: classes.loading,
685
- ownerState: ownerState,
686
- children: loadingText
687
- }));
688
- } else if (groupedOptions.length === 0 && !freeSolo && !loading) {
689
- autocompletePopper = renderAutocompletePopperChildren(/*#__PURE__*/_jsx(AutocompleteNoOptions, {
690
- className: classes.noOptions,
691
- ownerState: ownerState,
692
- role: "presentation",
693
- onMouseDown: event => {
694
- // Prevent input blur when interacting with the "no options" content
695
- event.preventDefault();
696
- },
697
- children: noOptionsText
698
- }));
699
- }
700
653
  return /*#__PURE__*/_jsxs(React.Fragment, {
701
654
  children: [/*#__PURE__*/_jsx(AutocompleteRoot, {
702
655
  ref: ref,
@@ -750,7 +703,41 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
750
703
  ...getInputProps()
751
704
  }
752
705
  })
753
- }), anchorEl ? autocompletePopper : null]
706
+ }), anchorEl ? /*#__PURE__*/_jsx(AutocompletePopper, {
707
+ as: PopperSlot,
708
+ ...popperProps,
709
+ children: /*#__PURE__*/_jsxs(AutocompletePaper, {
710
+ as: PaperSlot,
711
+ ...paperProps,
712
+ children: [loading && groupedOptions.length === 0 ? /*#__PURE__*/_jsx(AutocompleteLoading, {
713
+ className: classes.loading,
714
+ ownerState: ownerState,
715
+ children: loadingText
716
+ }) : null, groupedOptions.length === 0 && !freeSolo && !loading ? /*#__PURE__*/_jsx(AutocompleteNoOptions, {
717
+ className: classes.noOptions,
718
+ ownerState: ownerState,
719
+ role: "presentation",
720
+ onMouseDown: event => {
721
+ // Prevent input blur when interacting with the "no options" content
722
+ event.preventDefault();
723
+ },
724
+ children: noOptionsText
725
+ }) : null, groupedOptions.length > 0 ? /*#__PURE__*/_jsx(ListboxSlot, {
726
+ as: ListboxComponentProp,
727
+ ...listboxProps,
728
+ children: groupedOptions.map((option, index) => {
729
+ if (groupBy) {
730
+ return renderGroup({
731
+ key: option.key,
732
+ group: option.group,
733
+ children: option.options.map((option2, index2) => renderListOption(option2, option.index + index2))
734
+ });
735
+ }
736
+ return renderListOption(option, index);
737
+ })
738
+ }) : null]
739
+ })
740
+ }) : null]
754
741
  });
755
742
  });
756
743
  process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptypes */ = {
@@ -952,7 +939,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
952
939
  * If provided, the options will be grouped under the returned string.
953
940
  * The groupBy value is also used as the text for group headings when `renderGroup` is not provided.
954
941
  *
955
- * @param {Value} options The options to group.
942
+ * @param {Value} option The Autocomplete option.
956
943
  * @returns {string}
957
944
  */
958
945
  groupBy: PropTypes.func,
@@ -10,13 +10,6 @@ import useSlot from "../utils/useSlot.js";
10
10
  import Fade from "../Fade/index.js";
11
11
  import { getBackdropUtilityClass } from "./backdropClasses.js";
12
12
  import { jsx as _jsx } from "react/jsx-runtime";
13
- const removeOwnerState = props => {
14
- const {
15
- ownerState,
16
- ...rest
17
- } = props;
18
- return rest;
19
- };
20
13
  const useUtilityClasses = ownerState => {
21
14
  const {
22
15
  classes,
@@ -105,12 +98,11 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
105
98
  externalForwardedProps,
106
99
  ownerState
107
100
  });
108
- const transitionPropsRemoved = removeOwnerState(transitionProps);
109
101
  return /*#__PURE__*/_jsx(TransitionSlot, {
110
102
  in: open,
111
103
  timeout: transitionDuration,
112
104
  ...other,
113
- ...transitionPropsRemoved,
105
+ ...transitionProps,
114
106
  children: /*#__PURE__*/_jsx(RootSlot, {
115
107
  "aria-hidden": true,
116
108
  ...rootProps,
package/CHANGELOG.md CHANGED
@@ -1,5 +1,82 @@
1
1
  # [Versions](https://mui.com/versions/)
2
2
 
3
+ ## 6.3.1
4
+
5
+ <!-- generated comparing v6.3.0..master -->
6
+
7
+ _Jan 3, 2025_
8
+
9
+ A big thanks to the 8 contributors who made this release possible.
10
+
11
+ ### `@mui/material@6.3.1`
12
+
13
+ - [Autocomplete] Revert: Fix options list rendering in freeSolo mode (#44858) @ZeeshanTamboli
14
+ - [Tooltip] Warn instead of error when trigger is disabled (#44846) @yash49
15
+ - [TableSortLabel] Add slots and slotProps (#44728) @sai6855
16
+ - [Select] Deprecate composed classes (#44925) @sai6855
17
+
18
+ ### Docs
19
+
20
+ - [material-ui][Accordion] Update `Anatomy` section in Accordion docs (#44849) @ZeeshanTamboli
21
+ - [material-ui][CardActionArea] Added demo in docs of cards for adding props to CardActionArea (#44789) @siddhantantil39
22
+ - [material-ui][Grid2] Add interactive demo for Grid v2 (#44820) @yash49
23
+ - [material-ui][Select] Update docs to reflect the omission of placeholder prop (#44856) @adityaparab
24
+ - [joy-ui] Fix Color mode button on Theme builder (#44864) @komkanit
25
+ - Fix 301 redirections @oliviertassinari
26
+
27
+ ### Core
28
+
29
+ - [examples] Update Next.js examples Next.js and React versions (#44852) @DiegoAndai
30
+ - [code-infra] Prevent wrong nested imports in Base UI (#44426) @oliviertassinari
31
+ - [docs-infra] Add vale coverage for App Router and Page Router (060c55c) @oliviertassinari
32
+ - Sync with other repos (1b9300f) @oliviertassinari
33
+ - Fix docs:build to work in docs folder too (6b923a4) @oliviertassinari
34
+ - Setup React 18 CI tests (#44868) @DiegoAndai
35
+ - Update test to use public API (#44875) @oliviertassinari
36
+
37
+ All contributors of this release in alphabetical order: @adityaparab, @DiegoAndai, @komkanit, @oliviertassinari, @sai6855, @siddhantantil39, @yash49, @ZeeshanTamboli
38
+
39
+ ## 6.3.0
40
+
41
+ <!-- generated comparing v6.2.1..master -->
42
+
43
+ _Dec 23, 2024_
44
+
45
+ A big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
46
+
47
+ - Fix invalid HTML structure in the Accordion component (#44408) @ZeeshanTamboli
48
+ The HTML elements of the Accordion summary have been updated:
49
+ - the root element is now button (previously div).
50
+ - summary content and the icon wrapper are now span (previously div).
51
+ This will only impact you if you used the HTML element as selectors in your styles.
52
+
53
+ ### `@mui/material@6.3.0`
54
+
55
+ - [Accordion] Fix invalid HTML inside heading (#44408) @ZeeshanTamboli
56
+ - [useAutocomplete] Improve TS typing of `groupedOptions` prop (#44657) @lewxdev
57
+ - Prevent `ownerState` propagation for transition slots (#44401) @ZeeshanTamboli
58
+ - [StepContent] Add slots and slotProps (#44742) @sai6855
59
+ - [TablePagination] Add the rest of `slots` and `slotProps`. (#44570) @siriwatknp
60
+
61
+ ### `@mui/system@6.3.0`
62
+
63
+ - Set `before` directly without using prepend for global styles (#44648) @siriwatknp
64
+
65
+ ### Docs
66
+
67
+ - [material-ui] Improve `theme.applyStyles()` docs (#44658) @DiegoAndai
68
+ - [material-ui] Update MD callout (#43958) @aarongarciah
69
+
70
+ ### Core
71
+
72
+ - Remove unnecessary conditional around `.muiName =` (#44071) @Janpot
73
+ - [blog] Material UI: 2024 EOY updates blog post (#44722) @alelthomas
74
+ - Fix quickstart command in pigment docs (#44806) @yash49
75
+ - [docs-infra] Remove Next.js production profiler (#44823) @romgrk
76
+ - [docs-infra] Remove no longer support `optimizeFonts` Next.js option (#44802) @LukasTy
77
+
78
+ All contributors of this release in alphabetical order: @aarongarciah, @alelthomas, @DiegoAndai, @Janpot, @lewxdev, @LukasTy, @romgrk, @sai6855, @siriwatknp, @yash49, @ZeeshanTamboli
79
+
3
80
  ## 6.2.1
4
81
 
5
82
  <!-- generated comparing v6.2.0..master -->
@@ -272,7 +272,10 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
272
272
  nodeRef: nodeRef,
273
273
  timeout: timeout === 'auto' ? null : timeout,
274
274
  ...other,
275
- children: (state, childProps) => /*#__PURE__*/_jsx(CollapseRoot, {
275
+ children: (state, {
276
+ ownerState: incomingOwnerState,
277
+ ...restChildProps
278
+ }) => /*#__PURE__*/_jsx(CollapseRoot, {
276
279
  as: component,
277
280
  className: clsx(classes.root, className, {
278
281
  'entered': classes.entered,
@@ -283,13 +286,11 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
283
286
  ...style
284
287
  },
285
288
  ref: handleRef,
286
- ...childProps,
287
- // `ownerState` is set after `childProps` to override any existing `ownerState` property in `childProps`
288
- // that might have been forwarded from the Transition component.
289
289
  ownerState: {
290
290
  ...ownerState,
291
291
  state
292
292
  },
293
+ ...restChildProps,
293
294
  children: /*#__PURE__*/_jsx(CollapseWrapper, {
294
295
  ownerState: {
295
296
  ...ownerState,
package/Fade/Fade.js CHANGED
@@ -114,7 +114,10 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
114
114
  addEndListener: handleAddEndListener,
115
115
  timeout: timeout,
116
116
  ...other,
117
- children: (state, childProps) => {
117
+ children: (state, {
118
+ ownerState,
119
+ ...restChildProps
120
+ }) => {
118
121
  return /*#__PURE__*/React.cloneElement(children, {
119
122
  style: {
120
123
  opacity: 0,
@@ -124,7 +127,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
124
127
  ...children.props.style
125
128
  },
126
129
  ref: handleRef,
127
- ...childProps
130
+ ...restChildProps
128
131
  });
129
132
  }
130
133
  });
@@ -512,7 +512,5 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes /* remove-proptype
512
512
  */
513
513
  value: PropTypes.any
514
514
  } : void 0;
515
- if (FilledInput) {
516
- FilledInput.muiName = 'Input';
517
- }
515
+ FilledInput.muiName = 'Input';
518
516
  export default FilledInput;
package/Grow/Grow.js CHANGED
@@ -163,7 +163,10 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
163
163
  addEndListener: handleAddEndListener,
164
164
  timeout: timeout === 'auto' ? null : timeout,
165
165
  ...other,
166
- children: (state, childProps) => {
166
+ children: (state, {
167
+ ownerState,
168
+ ...restChildProps
169
+ }) => {
167
170
  return /*#__PURE__*/React.cloneElement(children, {
168
171
  style: {
169
172
  opacity: 0,
@@ -174,7 +177,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
174
177
  ...children.props.style
175
178
  },
176
179
  ref: handleRef,
177
- ...childProps
180
+ ...restChildProps
178
181
  });
179
182
  }
180
183
  });
package/Icon/Icon.js CHANGED
@@ -181,7 +181,5 @@ process.env.NODE_ENV !== "production" ? Icon.propTypes /* remove-proptypes */ =
181
181
  */
182
182
  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
183
183
  } : void 0;
184
- if (Icon) {
185
- Icon.muiName = 'Icon';
186
- }
184
+ Icon.muiName = 'Icon';
187
185
  export default Icon;
package/Input/Input.js CHANGED
@@ -357,7 +357,5 @@ process.env.NODE_ENV !== "production" ? Input.propTypes /* remove-proptypes */ =
357
357
  */
358
358
  value: PropTypes.any
359
359
  } : void 0;
360
- if (Input) {
361
- Input.muiName = 'Input';
362
- }
360
+ Input.muiName = 'Input';
363
361
  export default Input;
@@ -406,7 +406,5 @@ process.env.NODE_ENV !== "production" ? OutlinedInput.propTypes /* remove-propty
406
406
  */
407
407
  value: PropTypes.any
408
408
  } : void 0;
409
- if (OutlinedInput) {
410
- OutlinedInput.muiName = 'Input';
411
- }
409
+ OutlinedInput.muiName = 'Input';
412
410
  export default OutlinedInput;
@@ -19,11 +19,17 @@ export interface SelectClasses {
19
19
  icon: string;
20
20
  /** Styles applied to the icon component if the popup is open. */
21
21
  iconOpen: string;
22
- /** Styles applied to the icon component if `variant="filled"`. */
22
+ /** Styles applied to the icon component if `variant="filled"`.
23
+ * @deprecated Combine the [.MuiSelect-icon](/material-ui/api/select/#select-classes-icon) and [.MuiSelect-filled](/material-ui/api/select/#select-classes-filled) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
24
+ */
23
25
  iconFilled: string;
24
- /** Styles applied to the icon component if `variant="outlined"`. */
26
+ /** Styles applied to the icon component if `variant="outlined"`.
27
+ * @deprecated Combine the [.MuiSelect-icon](/material-ui/api/select/#select-classes-icon) and [.MuiSelect-outlined](/material-ui/api/select/#select-classes-outlined) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
28
+ */
25
29
  iconOutlined: string;
26
- /** Styles applied to the icon component if `variant="standard"`. */
30
+ /** Styles applied to the icon component if `variant="standard"`.
31
+ * @deprecated Combine the [.MuiSelect-icon](/material-ui/api/select/#select-classes-icon) and [.MuiSelect-standard](/material-ui/api/select/#select-classes-standard) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
32
+ */
27
33
  iconStandard: string;
28
34
  /** Styles applied to the underlying native input component. */
29
35
  nativeInput: string;
package/Slide/Slide.js CHANGED
@@ -217,7 +217,10 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
217
217
  in: inProp,
218
218
  timeout: timeout,
219
219
  ...other,
220
- children: (state, childProps) => {
220
+ children: (state, {
221
+ ownerState,
222
+ ...restChildProps
223
+ }) => {
221
224
  return /*#__PURE__*/React.cloneElement(children, {
222
225
  ref: handleRef,
223
226
  style: {
@@ -225,7 +228,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
225
228
  ...style,
226
229
  ...children.props.style
227
230
  },
228
- ...childProps
231
+ ...restChildProps
229
232
  });
230
233
  }
231
234
  });
@@ -1,11 +1,38 @@
1
1
  import * as React from 'react';
2
2
  import { SxProps } from '@mui/system';
3
- import { InternalStandardProps as StandardProps } from '..';
3
+ import { CollapseProps, InternalStandardProps as StandardProps } from '..';
4
4
  import { Theme } from '../styles';
5
5
  import { TransitionProps } from '../transitions/transition';
6
6
  import { StepContentClasses } from './stepContentClasses';
7
+ import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
7
8
 
8
- export interface StepContentProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
9
+ export interface StepContentSlots {
10
+ /**
11
+ * The component that renders the transition slot.
12
+ * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
13
+ * @default Collapse
14
+ */
15
+ transition?: React.JSXElementConstructor<
16
+ TransitionProps & { children?: React.ReactElement<unknown, any> }
17
+ >;
18
+ }
19
+
20
+ export type StepContentSlotsAndSlotProps = CreateSlotsAndSlotProps<
21
+ StepContentSlots,
22
+ {
23
+ /**
24
+ * Props forwared to the transition slot.
25
+ * By default, the available props are based on the [Collapse](https://mui.com/material-ui/api/collapse/#props) component
26
+ */
27
+ transition: SlotProps<React.ElementType<CollapseProps>, {}, StepContentOwnerState>;
28
+ }
29
+ >;
30
+
31
+ export interface StepContentOwnerState extends StepContentProps {}
32
+
33
+ export interface StepContentProps
34
+ extends StandardProps<React.HTMLAttributes<HTMLDivElement>>,
35
+ StepContentSlotsAndSlotProps {
9
36
  /**
10
37
  * The content of the component.
11
38
  */
@@ -22,6 +49,7 @@ export interface StepContentProps extends StandardProps<React.HTMLAttributes<HTM
22
49
  * The component used for the transition.
23
50
  * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
24
51
  * @default Collapse
52
+ * @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
25
53
  */
26
54
  TransitionComponent?: React.JSXElementConstructor<
27
55
  TransitionProps & { children: React.ReactElement<unknown, any> }
@@ -37,6 +65,7 @@ export interface StepContentProps extends StandardProps<React.HTMLAttributes<HTM
37
65
  /**
38
66
  * Props applied to the transition element.
39
67
  * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
68
+ * @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.
40
69
  */
41
70
  TransitionProps?: TransitionProps;
42
71
  }
@@ -11,6 +11,7 @@ import Collapse from "../Collapse/index.js";
11
11
  import StepperContext from "../Stepper/StepperContext.js";
12
12
  import StepContext from "../Step/StepContext.js";
13
13
  import { getStepContentUtilityClass } from "./stepContentClasses.js";
14
+ import useSlot from "../utils/useSlot.js";
14
15
  import { jsx as _jsx } from "react/jsx-runtime";
15
16
  const useUtilityClasses = ownerState => {
16
17
  const {
@@ -66,6 +67,8 @@ const StepContent = /*#__PURE__*/React.forwardRef(function StepContent(inProps,
66
67
  TransitionComponent = Collapse,
67
68
  transitionDuration: transitionDurationProp = 'auto',
68
69
  TransitionProps,
70
+ slots = {},
71
+ slotProps = {},
69
72
  ...other
70
73
  } = props;
71
74
  const {
@@ -90,19 +93,32 @@ const StepContent = /*#__PURE__*/React.forwardRef(function StepContent(inProps,
90
93
  if (transitionDurationProp === 'auto' && !TransitionComponent.muiSupportAuto) {
91
94
  transitionDuration = undefined;
92
95
  }
96
+ const externalForwardedProps = {
97
+ slots,
98
+ slotProps: {
99
+ transition: TransitionProps,
100
+ ...slotProps
101
+ }
102
+ };
103
+ const [TransitionSlot, transitionProps] = useSlot('transition', {
104
+ elementType: StepContentTransition,
105
+ externalForwardedProps,
106
+ ownerState,
107
+ className: classes.transition,
108
+ additionalProps: {
109
+ in: active || expanded,
110
+ timeout: transitionDuration,
111
+ unmountOnExit: true
112
+ }
113
+ });
93
114
  return /*#__PURE__*/_jsx(StepContentRoot, {
94
115
  className: clsx(classes.root, className),
95
116
  ref: ref,
96
117
  ownerState: ownerState,
97
118
  ...other,
98
- children: /*#__PURE__*/_jsx(StepContentTransition, {
119
+ children: /*#__PURE__*/_jsx(TransitionSlot, {
99
120
  as: TransitionComponent,
100
- in: active || expanded,
101
- className: classes.transition,
102
- ownerState: ownerState,
103
- timeout: transitionDuration,
104
- unmountOnExit: true,
105
- ...TransitionProps,
121
+ ...transitionProps,
106
122
  children: children
107
123
  })
108
124
  });
@@ -124,6 +140,20 @@ process.env.NODE_ENV !== "production" ? StepContent.propTypes /* remove-proptype
124
140
  * @ignore
125
141
  */
126
142
  className: PropTypes.string,
143
+ /**
144
+ * The props used for each slot inside.
145
+ * @default {}
146
+ */
147
+ slotProps: PropTypes.shape({
148
+ transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
149
+ }),
150
+ /**
151
+ * The components used for each slot inside.
152
+ * @default {}
153
+ */
154
+ slots: PropTypes.shape({
155
+ transition: PropTypes.elementType
156
+ }),
127
157
  /**
128
158
  * The system prop that allows defining system overrides as well as additional CSS styles.
129
159
  */
@@ -132,6 +162,7 @@ process.env.NODE_ENV !== "production" ? StepContent.propTypes /* remove-proptype
132
162
  * The component used for the transition.
133
163
  * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
134
164
  * @default Collapse
165
+ * @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
135
166
  */
136
167
  TransitionComponent: PropTypes.elementType,
137
168
  /**
@@ -149,6 +180,7 @@ process.env.NODE_ENV !== "production" ? StepContent.propTypes /* remove-proptype
149
180
  /**
150
181
  * Props applied to the transition element.
151
182
  * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
183
+ * @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.
152
184
  */
153
185
  TransitionProps: PropTypes.object
154
186
  } : void 0;
@@ -267,7 +267,5 @@ process.env.NODE_ENV !== "production" ? StepLabel.propTypes /* remove-proptypes
267
267
  */
268
268
  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
269
269
  } : void 0;
270
- if (StepLabel) {
271
- StepLabel.muiName = 'StepLabel';
272
- }
270
+ StepLabel.muiName = 'StepLabel';
273
271
  export default StepLabel;
@@ -230,7 +230,5 @@ process.env.NODE_ENV !== "production" ? SvgIcon.propTypes /* remove-proptypes */
230
230
  */
231
231
  viewBox: PropTypes.string
232
232
  } : void 0;
233
- if (SvgIcon) {
234
- SvgIcon.muiName = 'SvgIcon';
235
- }
233
+ SvgIcon.muiName = 'SvgIcon';
236
234
  export default SvgIcon;