@mui/material 6.4.11 → 6.5.0

package/Badge/Badge.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { OverridableStringUnion, Simplify } from '@mui/types';
-import { SlotComponentProps } from '../utils/types';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 import { Theme } from '../styles';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { BadgeClasses } from './badgeClasses';
@@ -11,8 +11,37 @@ export interface BadgePropsColorOverrides {}
 export interface BadgeRootSlotPropsOverrides {}
 export interface BadgeBadgeSlotPropsOverrides {}
 
+export interface BadgeSlots {
+  /**
+   * The component that renders the root.
+   * @default span
+   */
+  root: React.ElementType;
+  /**
+   * The component that renders the badge.
+   * @default span
+   */
+  badge: React.ElementType;
+}
+
+export type BadgeSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  BadgeSlots,
+  {
+    /**
+     * Props forwarded to the root slot.
+     * By default, the avaible props are based on the span element.
+     */
+    root: SlotProps<'span', BadgeRootSlotPropsOverrides, BadgeOwnerState>;
+    /**
+     * Props forwarded to the label slot.
+     * By default, the avaible props are based on the span element.
+     */
+    badge: SlotProps<'span', BadgeBadgeSlotPropsOverrides, BadgeOwnerState>;
+  }
+>;
+
 export type BadgeOwnerState = Simplify<
-  BadgeOwnProps & {
+  Omit<BadgeOwnProps, 'slotProps' | 'slots'> & {
     badgeContent: React.ReactNode;
     invisible: boolean;
     max: number;
@@ -33,7 +62,7 @@ export interface BadgeOrigin {
   horizontal?: 'left' | 'right';
 }
 
-export interface BadgeOwnProps {
+export interface BadgeOwnProps extends BadgeSlotsAndSlotProps {
   /**
    * The anchor of the badge.
    * @default {
@@ -103,31 +132,6 @@ export interface BadgeOwnProps {
    * @default 'rectangular'
    */
   overlap?: 'rectangular' | 'circular';
-  /**
-   * The props used for each slot inside the Badge.
-   * @default {}
-   */
-  slotProps?: {
-    root?: SlotComponentProps<'span', BadgeRootSlotPropsOverrides, BadgeOwnerState>;
-    badge?: SlotComponentProps<'span', BadgeBadgeSlotPropsOverrides, BadgeOwnerState>;
-  };
-  /**
-   * The components used for each slot inside the Badge.
-   * Either a string to use a HTML element or a component.
-   * @default {}
-   */
-  slots?: {
-    /**
-     * The component that renders the root.
-     * @default 'span'
-     */
-    root?: React.ElementType;
-    /**
-     * The component that renders the badge.
-     * @default 'span'
-     */
-    badge?: React.ElementType;
-  };
   /**
    * Controls whether the badge is hidden when `badgeContent` is zero.
    * @default false

package/Badge/Badge.js

@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import usePreviousProps from '@mui/utils/usePreviousProps';
 import composeClasses from '@mui/utils/composeClasses';
-import useSlotProps from '@mui/utils/useSlotProps';
 import useBadge from "./useBadge.js";
 import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
@@ -13,6 +12,7 @@ import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFil
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import capitalize from "../utils/capitalize.js";
 import badgeClasses, { getBadgeUtilityClass } from "./badgeClasses.js";
+import useSlot from "../utils/useSlot.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const RADIUS_STANDARD = 10;
 const RADIUS_DOT = 4;
@@ -282,26 +282,34 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   const classes = useUtilityClasses(ownerState);
 
   // support both `slots` and `components` for backward compatibility
-  const RootSlot = slots?.root ?? components.Root ?? BadgeRoot;
-  const BadgeSlot = slots?.badge ?? components.Badge ?? BadgeBadge;
-  const rootSlotProps = slotProps?.root ?? componentsProps.root;
-  const badgeSlotProps = slotProps?.badge ?? componentsProps.badge;
-  const rootProps = useSlotProps({
-    elementType: RootSlot,
-    externalSlotProps: rootSlotProps,
-    externalForwardedProps: other,
-    additionalProps: {
-      ref,
-      as: component
+  const externalForwardedProps = {
+    slots: {
+      root: slots?.root ?? components.Root,
+      badge: slots?.badge ?? components.Badge
+    },
+    slotProps: {
+      root: slotProps?.root ?? componentsProps.root,
+      badge: slotProps?.badge ?? componentsProps.badge
+    }
+  };
+  const [RootSlot, rootProps] = useSlot('root', {
+    elementType: BadgeRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
     },
     ownerState,
-    className: clsx(rootSlotProps?.className, classes.root, className)
+    className: clsx(classes.root, className),
+    ref,
+    additionalProps: {
+      as: component
+    }
   });
-  const badgeProps = useSlotProps({
-    elementType: BadgeSlot,
-    externalSlotProps: badgeSlotProps,
+  const [BadgeSlot, badgeProps] = useSlot('badge', {
+    elementType: BadgeBadge,
+    externalForwardedProps,
     ownerState,
-    className: clsx(classes.badge, badgeSlotProps?.className)
+    className: classes.badge
   });
   return /*#__PURE__*/_jsxs(RootSlot, {
     ...rootProps,
@@ -399,7 +407,7 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes /* remove-proptypes */ =
    */
   showZero: PropTypes.bool,
   /**
-   * The props used for each slot inside the Badge.
+   * The props used for each slot inside.
    * @default {}
    */
   slotProps: PropTypes.shape({
@@ -407,8 +415,7 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes /* remove-proptypes */ =
     root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
   }),
   /**
-   * The components used for each slot inside the Badge.
-   * Either a string to use a HTML element or a component.
+   * The components used for each slot inside.
    * @default {}
    */
   slots: PropTypes.shape({

package/BottomNavigationAction/BottomNavigationAction.d.ts

@@ -1,11 +1,45 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { Theme } from '..';
-import { ButtonBaseTypeMap, ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';
+import { CreateSlotsAndSlotProps, SlotProps, Theme } from '..';
+import {
+  ButtonBaseProps,
+  ButtonBaseTypeMap,
+  ExtendButtonBase,
+  ExtendButtonBaseTypeMap,
+} from '../ButtonBase';
 import { OverrideProps } from '../OverridableComponent';
 import { BottomNavigationActionClasses } from './bottomNavigationActionClasses';
 
-export interface BottomNavigationActionOwnProps {
+export interface BottomNavigationActionSlots {
+  /**
+   * The component that renders the root.
+   * @default ButtonBase
+   */
+  root: React.ElementType;
+  /**
+   * The component that renders the label.
+   * @default span
+   */
+  label: React.ElementType;
+}
+
+export type BottomNavigationActionSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  BottomNavigationActionSlots,
+  {
+    /**
+     * Props forwarded to the root slot.
+     * By default, the avaible props are based on the ButtonBase element.
+     */
+    root: SlotProps<React.ElementType<ButtonBaseProps>, {}, BottomNavigationActionOwnerState>;
+    /**
+     * Props forwarded to the label slot.
+     * By default, the avaible props are based on the span element.
+     */
+    label: SlotProps<'span', {}, BottomNavigationActionOwnerState>;
+  }
+>;
+
+export interface BottomNavigationActionOwnProps extends BottomNavigationActionSlotsAndSlotProps {
   /**
    * This prop isn't supported.
    * Use the `component` prop if you need to change the children structure.
@@ -71,4 +105,7 @@ export type BottomNavigationActionProps<
   component?: React.ElementType;
 };
 
+export interface BottomNavigationActionOwnerState
+  extends Omit<BottomNavigationActionProps, 'slots' | 'slotProps'> {}
+
 export default BottomNavigationAction;

package/BottomNavigationAction/BottomNavigationAction.js

@@ -10,6 +10,7 @@ import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import ButtonBase from "../ButtonBase/index.js";
 import unsupportedProp from "../utils/unsupportedProp.js";
 import bottomNavigationActionClasses, { getBottomNavigationActionUtilityClass } from "./bottomNavigationActionClasses.js";
+import useSlot from "../utils/useSlot.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -107,6 +108,8 @@ const BottomNavigationAction = /*#__PURE__*/React.forwardRef(function BottomNavi
     selected,
     showLabel,
     value,
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
   const ownerState = props;
@@ -119,16 +122,41 @@ const BottomNavigationAction = /*#__PURE__*/React.forwardRef(function BottomNavi
       onClick(event);
     }
   };
-  return /*#__PURE__*/_jsxs(BottomNavigationActionRoot, {
-    ref: ref,
+  const externalForwardedProps = {
+    slots,
+    slotProps
+  };
+  const [RootSlot, rootProps] = useSlot('root', {
+    elementType: BottomNavigationActionRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    shouldForwardComponentProp: true,
+    ownerState,
+    ref,
     className: clsx(classes.root, className),
-    focusRipple: true,
-    onClick: handleChange,
-    ownerState: ownerState,
-    ...other,
-    children: [icon, /*#__PURE__*/_jsx(BottomNavigationActionLabel, {
-      className: classes.label,
-      ownerState: ownerState,
+    additionalProps: {
+      focusRipple: true
+    },
+    getSlotProps: handlers => ({
+      ...handlers,
+      onClick: event => {
+        handlers.onClick?.(event);
+        handleChange(event);
+      }
+    })
+  });
+  const [LabelSlot, labelProps] = useSlot('label', {
+    elementType: BottomNavigationActionLabel,
+    externalForwardedProps,
+    ownerState,
+    className: classes.label
+  });
+  return /*#__PURE__*/_jsxs(RootSlot, {
+    ...rootProps,
+    children: [icon, /*#__PURE__*/_jsx(LabelSlot, {
+      ...labelProps,
       children: label
     })]
   });
@@ -175,6 +203,22 @@ process.env.NODE_ENV !== "production" ? BottomNavigationAction.propTypes /* remo
    * The prop defaults to the value (`false`) inherited from the parent BottomNavigation component.
    */
   showLabel: PropTypes.bool,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    label: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    label: PropTypes.elementType,
+    root: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/Breadcrumbs/BreadcrumbCollapsed.js

@@ -8,7 +8,9 @@ import memoTheme from "../utils/memoTheme.js";
 import MoreHorizIcon from "../internal/svg-icons/MoreHoriz.js";
 import ButtonBase from "../ButtonBase/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const BreadcrumbCollapsedButton = styled(ButtonBase)(memoTheme(({
+const BreadcrumbCollapsedButton = styled(ButtonBase, {
+  name: 'MuiBreadcrumbCollapsed'
+})(memoTheme(({
   theme
 }) => ({
   display: 'flex',

package/CHANGELOG.md

@@ -1,5 +1,71 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.5.0
+
+<!-- generated comparing v6.4.12..v6.x -->
+
+_Jul 2, 2025_
+
+A big thanks to the 2 contributors who made this release possible.
+
+CSS layers make it easier to override styles by splitting a single style sheet into multiple layers.
+To learn more, check out the [CSS layers documentation](https://v6.mui.com/material-ui/customization/css-layers/).
+
+### `@mui/material@6.5.0`
+
+- [Dialog] Add codemod for deprecated props (#46335) @sai6855
+
+### `@mui/system@6.5.0`
+
+- Backport CSS layers feature from v7 (#46283) @siriwatknp
+
+### `@mui/material-nextjs@6.5.0`
+
+- Backport CSS layers feature from v7 (#46283) @siriwatknp
+
+### Docs
+
+- Add ListItemButton to make the deprecation clear (#46357) @sai6855
+
+All contributors of this release in alphabetical order: @sai6855, @siriwatknp
+
+## 6.4.12
+
+<!-- generated comparing v6.4.11..v6.x -->
+
+_May 30, 2025_
+
+A big thanks to the 7 contributors who made this release possible.
+
+### `@mui/material@6.4.12`
+
+- [Badge] Replace useSlotProps with useSlot hook (#45876) @sai6855
+- [BottomNavigationAction] Add slots and slotProps (#45875) @sai6855
+- [CardActionArea] Add slots and slotProps (#45877) @sai6855
+- [OutlinedInput] Add missing `notchedOutline` slot (#45938) @siriwatknp
+- [useMediaQuery] Add warning and docs for using `useMediaQuery('print')` (#45886) @good-jinu
+- Fix theme object changes between renders (#45874) @siriwatknp
+
+### `@mui/material-nextjs@6.4.12`
+
+- Do not wrap `@layer` order rules in App Router (#45870) @Nayeem-XTREME
+
+### `@mui/system@6.4.12`
+
+- Skip styled component from being transformed (#46184) @siriwatknp
+
+### Docs
+
+- [Dialog] Remove deprecated props usage in demos (#45928) @sai6855
+- [Grid] Update grid migration guide (#46153) @sai6855
+- [Menu] Update `paper` slot JSDoc default from `Paper` to `PopoverPaper` (@andreachiera) (#45865) @andreachiera
+- Update CSS variable usage in migration guide for Pigment CSS (#46038) @sai6855
+- Remove outdated StackOverflow tag (9b9f96b) @oliviertassinari
+- Update `@mui/icons-material` install command to use 6.x version (#45810) @Nickknack
+- Add AccordionSummary to the breaking change migration (#45973) @siriwatknp
+
+All contributors of this release in alphabetical order: @andreachiera, @good-jinu, @Nayeem-XTREME, @Nickknack, @oliviertassinari, @sai6855, @siriwatknp
+
 ## 6.4.11
 
 _Apr 9, 2025_

package/CardActionArea/CardActionArea.d.ts

@@ -1,10 +1,47 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { Theme } from '..';
-import { ButtonBaseTypeMap, ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';
+import { SlotProps, CreateSlotsAndSlotProps, Theme } from '..';
+import {
+  ButtonBaseProps,
+  ButtonBaseTypeMap,
+  ExtendButtonBase,
+  ExtendButtonBaseTypeMap,
+} from '../ButtonBase';
 import { OverrideProps } from '../OverridableComponent';
 import { CardActionAreaClasses } from './cardActionAreaClasses';
 
+export interface CardActionAreaSlots {
+  /**
+   * The component that renders the root.
+   * @default ButtonBase
+   */
+  root: React.ElementType;
+  /**
+   * The component that renders the focusHighlight.
+   * @default span
+   */
+  focusHighlight: React.ElementType;
+}
+
+export type CardActionAreaSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  CardActionAreaSlots,
+  {
+    /**
+     * Props forwarded to the root slot.
+     * By default, the avaible props are based on the span element.
+     */
+    root: SlotProps<React.ElementType<ButtonBaseProps>, {}, CardActionAreaOwnerState>;
+    /**
+     * Props forwarded to the focusHighlight slot.
+     * By default, the avaible props are based on the span element.
+     */
+    focusHighlight: SlotProps<'span', {}, CardActionAreaOwnerState>;
+  }
+>;
+
+export interface CardActionAreaOwnerState
+  extends Omit<CardActionAreaProps, 'slots' | 'slotProps'> {}
+
 export interface CardActionAreaOwnProps {
   /**
    * Override or extend the styles applied to the component.
@@ -21,7 +58,7 @@ export type CardActionAreaTypeMap<
   AdditionalProps,
   RootComponent extends React.ElementType,
 > = ExtendButtonBaseTypeMap<{
-  props: AdditionalProps & CardActionAreaOwnProps;
+  props: AdditionalProps & CardActionAreaOwnProps & CardActionAreaSlotsAndSlotProps;
   defaultComponent: RootComponent;
 }>;
 

package/CardActionArea/CardActionArea.js

@@ -9,6 +9,7 @@ import memoTheme from "../utils/memoTheme.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import cardActionAreaClasses, { getCardActionAreaUtilityClass } from "./cardActionAreaClasses.js";
 import ButtonBase from "../ButtonBase/index.js";
+import useSlot from "../utils/useSlot.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -72,19 +73,41 @@ const CardActionArea = /*#__PURE__*/React.forwardRef(function CardActionArea(inP
     children,
     className,
     focusVisibleClassName,
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsxs(CardActionAreaRoot, {
+  const externalForwardedProps = {
+    slots,
+    slotProps
+  };
+  const [RootSlot, rootProps] = useSlot('root', {
+    elementType: CardActionAreaRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    shouldForwardComponentProp: true,
+    ownerState,
+    ref,
     className: clsx(classes.root, className),
-    focusVisibleClassName: clsx(focusVisibleClassName, classes.focusVisible),
-    ref: ref,
-    ownerState: ownerState,
-    ...other,
-    children: [children, /*#__PURE__*/_jsx(CardActionAreaFocusHighlight, {
-      className: classes.focusHighlight,
-      ownerState: ownerState
+    additionalProps: {
+      focusVisibleClassName: clsx(focusVisibleClassName, classes.focusVisible)
+    }
+  });
+  const [FocusHighlightSlot, focusHighlightProps] = useSlot('focusHighlight', {
+    elementType: CardActionAreaFocusHighlight,
+    externalForwardedProps,
+    ownerState,
+    ref,
+    className: classes.focusHighlight
+  });
+  return /*#__PURE__*/_jsxs(RootSlot, {
+    ...rootProps,
+    children: [children, /*#__PURE__*/_jsx(FocusHighlightSlot, {
+      ...focusHighlightProps
     })]
   });
 });
@@ -109,6 +132,22 @@ process.env.NODE_ENV !== "production" ? CardActionArea.propTypes /* remove-propt
    * @ignore
    */
   focusVisibleClassName: PropTypes.string,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    focusHighlight: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    focusHighlight: PropTypes.elementType,
+    root: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/Menu/Menu.d.ts

@@ -29,7 +29,7 @@ export interface MenuSlots {
   root: React.ElementType;
   /**
    * The component used for the paper.
-   * @default Paper
+   * @default PopoverPaper
    */
   paper: React.ElementType;
   /**

package/NativeSelect/NativeSelectInput.js

@@ -25,7 +25,9 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getNativeSelectUtilityClasses, classes);
 };
-export const StyledSelectSelect = styled('select')(({
+export const StyledSelectSelect = styled('select', {
+  name: 'MuiNativeSelect'
+})(({
   theme
 }) => ({
   // Reset
@@ -99,7 +101,9 @@ const NativeSelectSelect = styled(StyledSelectSelect, {
     }];
   }
 })({});
-export const StyledSelectIcon = styled('svg')(({
+export const StyledSelectIcon = styled('svg', {
+  name: 'MuiNativeSelect'
+})(({
   theme
 }) => ({
   // We use a position absolute over a flexbox in order to forward the pointer events

package/OutlinedInput/NotchedOutline.js

@@ -8,6 +8,7 @@ import { styled } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const NotchedOutlineRoot = styled('fieldset', {
+  name: 'MuiNotchedOutlined',
   shouldForwardProp: rootShouldForwardProp
 })({
   textAlign: 'left',
@@ -26,6 +27,7 @@ const NotchedOutlineRoot = styled('fieldset', {
   minWidth: '0%'
 });
 const NotchedOutlineLegend = styled('legend', {
+  name: 'MuiNotchedOutlined',
   shouldForwardProp: rootShouldForwardProp
 })(memoTheme(({
   theme

package/OutlinedInput/OutlinedInput.d.ts

@@ -1,10 +1,35 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { InternalStandardProps as StandardProps, Theme } from '..';
+import {
+  CreateSlotsAndSlotProps,
+  SlotProps,
+  InternalStandardProps as StandardProps,
+  Theme,
+} from '..';
 import { InputBaseProps } from '../InputBase';
 import { OutlinedInputClasses } from './outlinedInputClasses';
 
-export interface OutlinedInputProps extends StandardProps<InputBaseProps> {
+interface OutlinedInputSlots {
+  /**
+   * The component that renders the notchedOutline slot.
+   * @default NotchedOutline
+   */
+  notchedOutline: React.ElementType;
+}
+
+type OutlinedInputSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  OutlinedInputSlots,
+  {
+    notchedOutline: SlotProps<'fieldset', {}, OutlinedInputOwnerState>;
+  }
+> & {
+  slots?: InputBaseProps['slots'];
+  slotProps?: InputBaseProps['slotProps'];
+};
+
+export interface OutlinedInputProps
+  extends Omit<StandardProps<InputBaseProps>, 'slots' | 'slotProps'>,
+    OutlinedInputSlotsAndSlotProps {
   /**
    * Override or extend the styles applied to the component.
    */
@@ -24,6 +49,8 @@ export interface OutlinedInputProps extends StandardProps<InputBaseProps> {
   sx?: SxProps<Theme>;
 }
 
+export interface OutlinedInputOwnerState extends Omit<OutlinedInputProps, 'slots' | 'slotProps'> {}
+
 /**
  *
  * Demos: