@mui/material 6.4.6 → 6.4.8

package/Accordion/Accordion.d.ts

@@ -4,10 +4,15 @@ import { Theme } from '..';
 import { TransitionProps } from '../transitions/transition';
 import { AccordionClasses } from './accordionClasses';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
-import { ExtendPaperTypeMap } from '../Paper/Paper';
+import { ExtendPaperTypeMap, PaperProps } from '../Paper/Paper';
 import { CreateSlotsAndSlotProps, SlotComponentProps, SlotProps } from '../utils/types';
 
 export interface AccordionSlots {
+  /**
+   * The component that renders the root.
+   * @default Paper
+   */
+  root: React.ElementType;
   /**
    * The component that renders the heading.
    * @default 'h3'
@@ -21,12 +26,22 @@ export interface AccordionSlots {
   transition: React.ElementType;
 }
 
-export interface AccordionTransitionSlotPropsOverrides {}
+export interface AccordionRootSlotPropsOverrides {}
 export interface AccordionHeadingSlotPropsOverrides {}
+export interface AccordionTransitionSlotPropsOverrides {}
 
 export type AccordionSlotsAndSlotProps = CreateSlotsAndSlotProps<
   AccordionSlots,
   {
+    /**
+     * Props forwarded to the root slot.
+     * By default, the avaible props are based on the Paper element.
+     */
+    root: SlotProps<
+      React.ElementType<PaperProps>,
+      AccordionRootSlotPropsOverrides,
+      AccordionOwnerState
+    >;
     /**
      * Props forwarded to the heading slot.
      * By default, the avaible props are based on the h3 element.

package/Accordion/Accordion.js

@@ -185,6 +185,20 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
     slots: backwardCompatibleSlots,
     slotProps: backwardCompatibleSlotProps
   };
+  const [RootSlot, rootProps] = useSlot('root', {
+    elementType: AccordionRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    className: clsx(classes.root, className),
+    shouldForwardComponentProp: true,
+    ownerState,
+    ref,
+    additionalProps: {
+      square
+    }
+  });
   const [AccordionHeadingSlot, accordionProps] = useSlot('heading', {
     elementType: AccordionHeading,
     externalForwardedProps,
@@ -196,12 +210,8 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
     externalForwardedProps,
     ownerState
   });
-  return /*#__PURE__*/_jsxs(AccordionRoot, {
-    className: clsx(classes.root, className),
-    ref: ref,
-    ownerState: ownerState,
-    square: square,
-    ...other,
+  return /*#__PURE__*/_jsxs(RootSlot, {
+    ...rootProps,
     children: [/*#__PURE__*/_jsx(AccordionHeadingSlot, {
       ...accordionProps,
       children: /*#__PURE__*/_jsx(AccordionContext.Provider, {
@@ -281,6 +291,7 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes /* remove-proptypes
    */
   slotProps: PropTypes.shape({
     heading: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
   }),
   /**
@@ -289,6 +300,7 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes /* remove-proptypes
    */
   slots: PropTypes.shape({
     heading: PropTypes.elementType,
+    root: PropTypes.elementType,
     transition: PropTypes.elementType
   }),
   /**

package/AccordionSummary/AccordionSummary.d.ts

@@ -1,14 +1,66 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';
+import { ButtonBaseProps, ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';
 import { OverrideProps } from '../OverridableComponent';
-import { Theme } from '..';
+import { CreateSlotsAndSlotProps, SlotProps, Theme } from '..';
 import { AccordionSummaryClasses } from './accordionSummaryClasses';
 
-export interface AccordionSummaryOwnProps {
+export interface AccordionSummarySlots {
   /**
-   * The content of the component.
+   * The component that renders the root slot.
+   * @default ButtonBase
    */
+  root: React.ElementType;
+  /**
+   * The component that renders the content slot.
+   * @default div
+   */
+  content: React.ElementType;
+  /**
+   * The component that renders the expand icon wrapper slot.
+   * @default div
+   */
+  expandIconWrapper: React.ElementType;
+}
+
+export interface AccordionSummaryRootSlotPropsOverrides {}
+export interface AccordionSummaryContentSlotPropsOverrides {}
+export interface AccordionSummaryExpandIconWrapperSlotPropsOverrides {}
+
+export type AccordionSummarySlotsAndSlotProps = CreateSlotsAndSlotProps<
+  AccordionSummarySlots,
+  {
+    /**
+     * Props forwarded to the root slot.
+     * By default, the avaible props are based on the [ButtonBase](https://mui.com/material-ui/api/button-base/#props) component.
+     */
+    root: SlotProps<
+      React.ElementType<ButtonBaseProps>,
+      AccordionSummaryRootSlotPropsOverrides,
+      AccordionSummaryOwnerState
+    >;
+    /**
+     * Props forwarded to the content slot.
+     * By default, the avaible props are based on a div element.
+     */
+    content: SlotProps<
+      'div',
+      AccordionSummaryContentSlotPropsOverrides,
+      AccordionSummaryOwnerState
+    >;
+    /**
+     * Props forwarded to the expand icon wrapper slot.
+     * By default, the avaible props are based on a div element.
+     */
+    expandIconWrapper: SlotProps<
+      'div',
+      AccordionSummaryExpandIconWrapperSlotPropsOverrides,
+      AccordionSummaryOwnerState
+    >;
+  }
+>;
+
+export interface AccordionSummaryOwnProps extends AccordionSummarySlotsAndSlotProps {
   children?: React.ReactNode;
   /**
    * Override or extend the styles applied to the component.
@@ -32,6 +84,9 @@ export type AccordionSummaryTypeMap<
   defaultComponent: RootComponent;
 }>;
 
+export interface AccordionSummaryOwnerState
+  extends Omit<AccordionSummaryProps, 'slots' | 'slotProps'> {}
+
 /**
  *
  * Demos:

package/AccordionSummary/AccordionSummary.js

@@ -10,6 +10,7 @@ import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import ButtonBase from "../ButtonBase/index.js";
 import AccordionContext from "../Accordion/AccordionContext.js";
 import accordionSummaryClasses, { getAccordionSummaryUtilityClass } from "./accordionSummaryClasses.js";
+import useSlot from "../utils/useSlot.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -112,6 +113,8 @@ const AccordionSummary = /*#__PURE__*/React.forwardRef(function AccordionSummary
     expandIcon,
     focusVisibleClassName,
     onClick,
+    slots,
+    slotProps,
     ...other
   } = props;
   const {
@@ -135,24 +138,54 @@ const AccordionSummary = /*#__PURE__*/React.forwardRef(function AccordionSummary
     disableGutters
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsxs(AccordionSummaryRoot, {
-    focusRipple: false,
-    disableRipple: true,
-    disabled: disabled,
-    "aria-expanded": expanded,
+  const externalForwardedProps = {
+    slots,
+    slotProps
+  };
+  const [RootSlot, rootSlotProps] = useSlot('root', {
+    ref,
+    shouldForwardComponentProp: true,
     className: clsx(classes.root, className),
-    focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
-    onClick: handleChange,
-    ref: ref,
-    ownerState: ownerState,
-    ...other,
-    children: [/*#__PURE__*/_jsx(AccordionSummaryContent, {
-      className: classes.content,
-      ownerState: ownerState,
+    elementType: AccordionSummaryRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    ownerState,
+    additionalProps: {
+      focusRipple: false,
+      disableRipple: true,
+      disabled,
+      'aria-expanded': expanded,
+      focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName)
+    },
+    getSlotProps: handlers => ({
+      ...handlers,
+      onClick: event => {
+        handlers.onClick?.(event);
+        handleChange(event);
+      }
+    })
+  });
+  const [ContentSlot, contentSlotProps] = useSlot('content', {
+    className: classes.content,
+    elementType: AccordionSummaryContent,
+    externalForwardedProps,
+    ownerState
+  });
+  const [ExpandIconWrapperSlot, expandIconWrapperSlotProps] = useSlot('expandIconWrapper', {
+    className: classes.expandIconWrapper,
+    elementType: AccordionSummaryExpandIconWrapper,
+    externalForwardedProps,
+    ownerState
+  });
+  return /*#__PURE__*/_jsxs(RootSlot, {
+    ...rootSlotProps,
+    children: [/*#__PURE__*/_jsx(ContentSlot, {
+      ...contentSlotProps,
       children: children
-    }), expandIcon && /*#__PURE__*/_jsx(AccordionSummaryExpandIconWrapper, {
-      className: classes.expandIconWrapper,
-      ownerState: ownerState,
+    }), expandIcon && /*#__PURE__*/_jsx(ExpandIconWrapperSlot, {
+      ...expandIconWrapperSlotProps,
       children: expandIcon
     })]
   });
@@ -191,6 +224,24 @@ process.env.NODE_ENV !== "production" ? AccordionSummary.propTypes /* remove-pro
    * @ignore
    */
   onClick: PropTypes.func,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    content: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    expandIconWrapper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    content: PropTypes.elementType,
+    expandIconWrapper: PropTypes.elementType,
+    root: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/CHANGELOG.md

@@ -1,5 +1,68 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.4.8
+
+<!-- generated comparing v6.4.7..v6.x -->
+
+_Mar 14, 2025_
+
+A big thanks to the 9 contributors who made this release possible.
+
+### `@mui/material@6.4.8`
+
+- [ListItemText] Add missing `root` slot (#45552) @sai6855
+- [SpeedDial] Add missing `root` slot (#45551) @sai6855
+- [Tooltip] Allow auto placement on tooltip (#45536) @Jtaks
+- [useScrollTrigger] Do nothing if target is null (#45553) @vipierozan99
+- [Accordion] Add missing `root` slot (#45534) @sai6855
+- [AccordionSummary] Add slots and slotProps (#45560) @sai6855
+- [TextareaAutosize] Fix ResizeObserver causing infinite `selectionchange` loop (#45351) (#45498) @mj12albert
+
+### `@mui/styled-engine@6.4.8`
+
+- Add `enableCssLayer` prop to StyledEngineProvider (#45563) @siriwatknp
+
+### `@mui/system@6.4.8`
+
+- [system] Prevent nested non-vars theme inheritance (#45564) @siriwatknp
+
+### `@mui/utils@6.4.8`
+
+- Use correct iri-reference homepage format (#45511) @dahiro
+
+### Core
+
+- [test] Fix React 18 tests (#45161) (#45496) @DiegoAndai
+
+### Docs
+
+- [Backdrop] Fix component name in migration guide (#45507) @sai6855
+- Fix broken links to MUI X docs (cherry-pick of #45145) (#45481) @mapache-salvaje
+- [examples] Fix the invalid argument to extract examples (#45493) @ovtn
+- Add `overriding-component-structure` doc to Material UI (#45570) @siriwatknp
+
+All contributors of this release in alphabetical order: @dahiro, @DiegoAndai, @Jtaks, @mapache-salvaje, @mj12albert, @ovtn, @sai6855, @siriwatknp, @vipierozan99
+
+## 6.4.7
+
+<!-- generated comparing v6.4.6..v6.x -->
+
+_Mar 5, 2025_
+
+A big thanks to the 3 contributors who made this release possible.
+
+### `@mui/material@6.4.7`
+
+- [ThemeProvider] Add `storageManager` prop to `ThemeProvider` (@siriwatknp) (#45437) @siriwatknp
+- [Rating] Deprecate \*Props and complete slots, slotProps (#45295) (#45398) @DiegoAndai
+- [Radio] Fix `inputProps` not forwarded (@siriwatknp) (#45475) @siriwatknp
+
+### Core
+
+- [blog] React 19 migration for MUI X (#45440) @arminmeh
+
+All contributors of this release in alphabetical order: @arminmeh, @DiegoAndai, @siriwatknp
+
 ## 6.4.6
 
 <!-- generated comparing v6.4.5..v6.x -->
@@ -11,21 +74,21 @@ A big thanks to the 4 contributors who made this release possible.
 ### `@mui/material@6.4.6`
 
 - [Checkbox] Add slots and slotProps (#45361) @siriwatknp
-- [Drawer] Deprecate *Props and complete `slots`, `slotProps` (#45377) @siriwatknp
+- [Drawer] Deprecate \*Props and complete `slots`, `slotProps` (#45377) @siriwatknp
 - [Grid] Improve Grid2 upgrade experience (#45372) @DiegoAndai
 - [InputBase] Deprecate composed classes (#45366) @siriwatknp
 - Fix `slotProps.transition` types (#45367) @siriwatknp
 - Allow nested theme creation with `vars` (#45368) @siriwatknp
 - Fix wrong slotProps of DetailsHTMLAttributes types (#45356) @siriwatknp
-- [Popover] Deprecate *Props and complete `slots`, `slotProps` (#45337) @siriwatknp
+- [Popover] Deprecate \*Props and complete `slots`, `slotProps` (#45337) @siriwatknp
 - [Radio] Add slots and slotProps (#45364) @siriwatknp
 - [Slider] Fix css class selector in migration guide (#45409) @sai6855
 - [Slider] Fix spacings in .md files (#45393) @sai6855
 - [Snackbar] Add Slots and SlotProps (#45103) (#45352) @siriwatknp
 - [SpeedDialAction] Add slots and slotProps (#45365) @siriwatknp
 - [SwitchBase] Deprecate `inputProps` and complete slots, slotProps (#45338) @siriwatknp
-- [Tabs] Deprecate *Props and complete slots, slotProps (#45012) (#45355) @siriwatknp
-- [Menu] Deprecate *Props and complete `slots`, `slotProps`  (#45369) @siriwatknp
+- [Tabs] Deprecate \*Props and complete slots, slotProps (#45012) (#45355) @siriwatknp
+- [Menu] Deprecate \*Props and complete `slots`, `slotProps` (#45369) @siriwatknp
 
 ### Docs
 

package/ListItemText/ListItemText.d.ts

@@ -6,6 +6,11 @@ import { ListItemTextClasses } from './listItemTextClasses';
 import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
 export interface ListItemTextSlots {
+  /**
+   * The component that renders the root slot.
+   * @default 'div'
+   */
+  root?: React.ElementType;
   /**
    * The component that renders the primary slot.
    * @default Typography
@@ -21,6 +26,11 @@ export interface ListItemTextSlots {
 export type ListItemTextSlotsAndSlotProps = CreateSlotsAndSlotProps<
   ListItemTextSlots,
   {
+    /**
+     * Props forwared to the root slot.
+     * By default, the available props are based on `div` element.
+     */
+    root: SlotProps<'div', {}, ListItemTextOwnerState>;
     /**
      * Props forwared to the primary slot (as long as disableTypography is not `true`)
      * By default, the available props are based on the [Typography](https://mui.com/material-ui/api/typography/#props) component

package/ListItemText/ListItemText.js

@@ -107,6 +107,16 @@ const ListItemText = /*#__PURE__*/React.forwardRef(function ListItemText(inProps
       ...slotProps
     }
   };
+  const [RootSlot, rootSlotProps] = useSlot('root', {
+    className: clsx(classes.root, className),
+    elementType: ListItemTextRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    ownerState,
+    ref
+  });
   const [PrimarySlot, primarySlotProps] = useSlot('primary', {
     className: classes.primary,
     elementType: Typography,
@@ -135,11 +145,8 @@ const ListItemText = /*#__PURE__*/React.forwardRef(function ListItemText(inProps
       children: secondary
     });
   }
-  return /*#__PURE__*/_jsxs(ListItemTextRoot, {
-    className: clsx(classes.root, className),
-    ownerState: ownerState,
-    ref: ref,
-    ...other,
+  return /*#__PURE__*/_jsxs(RootSlot, {
+    ...rootSlotProps,
     children: [primary, secondary]
   });
 });
@@ -200,6 +207,7 @@ process.env.NODE_ENV !== "production" ? ListItemText.propTypes /* remove-proptyp
    */
   slotProps: PropTypes.shape({
     primary: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     secondary: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
   }),
   /**
@@ -208,6 +216,7 @@ process.env.NODE_ENV !== "production" ? ListItemText.propTypes /* remove-proptyp
    */
   slots: PropTypes.shape({
     primary: PropTypes.elementType,
+    root: PropTypes.elementType,
     secondary: PropTypes.elementType
   }),
   /**

package/Radio/Radio.js

@@ -128,6 +128,7 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
     disableRipple = false,
     slots = {},
     slotProps = {},
+    inputProps,
     ...other
   } = props;
   const muiFormControl = useFormControl();
@@ -158,6 +159,7 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
       name = radioGroup.name;
     }
   }
+  const externalInputProps = slotProps.input ?? inputProps;
   const [RootSlot, rootSlotProps] = useSlot('root', {
     ref,
     elementType: RadioRoot,
@@ -190,7 +192,7 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
       slots,
       slotProps: {
         // Do not forward `slotProps.root` again because it's already handled by the `RootSlot` in this file.
-        input: typeof slotProps.input === 'function' ? slotProps.input(ownerState) : slotProps.input
+        input: typeof externalInputProps === 'function' ? externalInputProps(ownerState) : externalInputProps
       }
     }
   });

package/Rating/Rating.d.ts

@@ -4,6 +4,7 @@ import { OverridableStringUnion } from '@mui/types';
 import { Theme } from '..';
 import { RatingClasses } from './ratingClasses';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
 export interface IconContainerProps extends React.HTMLAttributes<HTMLSpanElement> {
   value: number;
@@ -11,7 +12,61 @@ export interface IconContainerProps extends React.HTMLAttributes<HTMLSpanElement
 
 export interface RatingPropsSizeOverrides {}
 
-export interface RatingOwnProps {
+export interface RatingRootSlotPropsOverrides {}
+export interface RatingLabelSlotPropsOverrides {}
+export interface RatingIconSlotPropsOverrides {}
+export interface RatingDecimalSlotPropsOverrides {}
+
+export interface RatingSlots {
+  /**
+   * The component used for the root slot.
+   * @default 'span'
+   */
+  root: React.ElementType;
+  /**
+   * The component used for the label slot.
+   * @default 'label'
+   */
+  label: React.ElementType;
+  /**
+   * The component used for the icon slot.
+   * @default 'span'
+   */
+  icon: React.ElementType;
+  /**
+   * The component used fo r the decimal slot.
+   * @default 'span'
+   */
+  decimal: React.ElementType;
+}
+
+export type RatingSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  RatingSlots,
+  {
+    /**
+     * Props forwarded to the root slot.
+     * By default, the avaible props are based on the span element.
+     */
+    root: SlotProps<'span', RatingRootSlotPropsOverrides, RatingOwnerState>;
+    /**
+     * Props forwarded to the label slot.
+     * By default, the avaible props are based on the label element.
+     */
+    label: SlotProps<'label', RatingLabelSlotPropsOverrides, RatingOwnerState>;
+    /**
+     * Props forwarded to the icon slot.
+     * By default, the avaible props are based on the span element.
+     */
+    icon: SlotProps<'span', RatingIconSlotPropsOverrides, RatingOwnerState>;
+    /**
+     * Props forwarded to the decimal slot.
+     * By default, the avaible props are based on the span element.
+     */
+    decimal: SlotProps<'span', RatingDecimalSlotPropsOverrides, RatingOwnerState>;
+  }
+>;
+
+export interface RatingOwnProps extends RatingSlotsAndSlotProps {
   /**
    * Override or extend the styles applied to the component.
    */
@@ -60,6 +115,7 @@ export interface RatingOwnProps {
   icon?: React.ReactNode;
   /**
    * The component containing the icon.
+   * @deprecated Use `slotProps.icon.component` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default function IconContainer(props) {
    *   const { value, ...other } = props;
    *   return <span {...other} />;
@@ -114,6 +170,8 @@ export interface RatingOwnProps {
   value?: number | null;
 }
 
+export interface RatingOwnerState extends Omit<RatingProps, 'slots' | 'slotProps'> {}
+
 export type RatingTypeMap<
   AdditionalProps = {},
   RootComponent extends React.ElementType = 'span',