@mui/material 6.3.1 → 6.4.1

package/CHANGELOG.md

@@ -1,5 +1,96 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.4.1
+
+<!-- generated comparing v6.4.0..master -->
+
+_Jan 21, 2025_
+
+A big thanks to the 9 contributors who made this release possible.
+
+### `@mui/material@6.4.1`
+
+- [ButtonBase] Export types used in ButtonBase props (#43530) @Janpot
+- [Dialog] Add slots and slotProps (#44792) @sai6855
+- [Drawer] Deprecate composed classes (#44870) @yash49
+- [IconButton] Set default loading to `null` (#45057) @siriwatknp
+- [ListItem] Add codemod for deprecated props (#45022) @sai6855
+- [Modal] Add migration guide and codemod for deprecated props (#45021) @sai6855
+- [TextField] Fix filled state to be synced with autofill (#44135) @DiegoAndai
+
+### `@mui/system@6.4.1`
+
+- Fix dark mode flicker using `useEnhancedEffect` (#44812) @siriwatknp
+
+### `@mui/utils@6.4.1`
+
+- Do not deep merge React component (#45058) @siriwatknp
+
+### Docs
+
+- Fix typo (#45070) @Fullchee
+- Improve Toolpad templates section (#44914) @bharatkashyap
+- Fix expand / collapse icons orientation (#44989) @zanivan
+- Rename "Base UI" to "MUI Base" in all text (#45060) @mj12albert
+- Add @mui/base deprecation callout (#45030) @mj12albert
+- Update @mui/base deprecation message (#45064) @mj12albert
+
+### Core
+
+- [code-infra] Add "use client" directive to files with React APIs (#45036) @Janpot
+- [docs] 301 redirect `/base-ui` to `base-ui.com` (#45061) @mj12albert
+
+All contributors of this release in alphabetical order: @bharatkashyap, @DiegoAndai, @Fullchee, @Janpot, @mj12albert, @sai6855, @siriwatknp, @yash49, @zanivan
+
+## 6.4.0
+
+<!-- generated comparing v6.3.1..master -->
+
+_Jan 13, 2025_
+
+A big thanks to the 16 contributors who made this release possible. Here are some highlights ✨:
+
+- Added [`loading` prop](https://mui.com/material-ui/react-button/#loading-2) to the `Button` and `IconButton` components (#44637) @siriwatknp
+
+### `@mui/material@6.4.0`
+
+- [Alert] complete `slots` and `slotProps` (#44971) @siriwatknp
+- [Autocomplete] Sync runtime and TS types for key in grouped options (#44862) @aarongarciah
+- [Button] Add `loading` prop (#44637) @siriwatknp
+- [CardHeader] Deprecate `*TypographyProps` and complete `slots`, `slotProps` (#44729) @siriwatknp
+- [CircularProgress] Improve indeterminate animation to be symmetric and smooth (#44934) @yashdev16
+- [LinearProgress] Deprecate composed classes (#44933) @headironc
+- [Link] Fix error for using custom palette with underline (#44927) @siriwatknp
+- [Select] Do not set `aria-controls` when closed (#44919) @siddhantantil39
+- [Select] Add missing root class (#44928) @sai6855
+- [Slider] Set onChangeCommitted to receive the last argument passed to onChange (#44795) @good-jinu
+- Add `mergeSlotProps` for extending components (#44809) @siriwatknp
+- Update `mergeSlotProps` to merge `style` (#44959) @siriwatknp
+- Fix slots typing for Tooltip and StepLabel (#44985) @siriwatknp
+- Remove unnecessary blank lines (#44980) @sai6855
+
+### Docs
+
+- [docs] Fix Dashboard sidenav sroll (#44876) @oliviertassinari
+- [docs] Fix broken anchor link to w3.org (c51af8e) @oliviertassinari
+- [docs] Add details on complementary Menu components (#44957) @samuelsycamore
+- [docs] Remove misleading messaging on MD3 support (#44953) @mnajdova
+- [docs] Fix code copy button obscuring on small screen sizes (#44861) @ZeeshanTamboli
+- [docs] Remove more instances of Adobe XD (#44956) @samuelsycamore
+- [docs] Remove Adobe XD chips, links, and mentions (#44909) @samuelsycamore
+- [docs] Fix incorrect rendering in Typography docs (#44937) @iaziz11
+
+### Core
+
+- [core] Remove redundant screenshots (#44877) @oliviertassinari
+- [core] Remove Suspense and clock mocking from regressions and e2e tests (#44935) @DiegoAndai
+- [code-infra] Allow react@18 on `@mui/internal-test-utils` (#45023) @LukasTy
+- [code-infra] Stabilize flaky pigment progressbar tests (#44969) @Janpot
+- [example] Update the CDN example to adapt React 19. (#44979) @IceOfSummer
+- [figma] Clarify that Material UI Sync plugin is experimental (#44975) @oliviertassinari
+
+All contributors of this release in alphabetical order: @aarongarciah, @DiegoAndai, @good-jinu, @headironc, @iaziz11, @IceOfSummer, @Janpot, @LukasTy, @mnajdova, @oliviertassinari, @sai6855, @samuelsycamore, @siddhantantil39, @siriwatknp, @yashdev16, @ZeeshanTamboli
+
 ## 6.3.1
 
 <!-- generated comparing v6.3.0..master -->

package/CardHeader/CardHeader.d.ts

@@ -3,8 +3,116 @@ import { SxProps } from '@mui/system';
 import { TypographyProps } from '../Typography';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { Theme } from '..';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 import { CardHeaderClasses } from './cardHeaderClasses';
 
+export interface CardHeaderRootSlotPropsOverrides {}
+
+export interface CardHeaderAvatarSlotPropsOverrides {}
+
+export interface CardHeaderActionSlotPropsOverrides {}
+
+export interface CardHeaderContentSlotPropsOverrides {}
+
+export interface CardHeaderTitleSlotPropsOverrides {}
+
+export interface CardHeaderSubheaderSlotPropsOverrides {}
+
+export interface CardHeaderSlots {
+  /**
+   * The component that renders the root slot.
+   * @default 'div'
+   */
+  root: React.ElementType;
+  /**
+   * The component that renders the avatar slot.
+   * @default 'div'
+   */
+  avatar: React.ElementType;
+  /**
+   * The component that renders the action slot.
+   * @default 'div'
+   */
+  action: React.ElementType;
+  /**
+   * The component that renders the content slot.
+   * @default 'div'
+   */
+  content: React.ElementType;
+  /**
+   * The component that renders the title slot (as long as disableTypography is not `true`).
+   * [Follow this guide](https://mui.com/material-ui/api/typography/#props) to learn more about the requirements for this component.
+   * @default Typography
+   */
+  title: React.ElementType;
+  /**
+   * The component that renders the subheader slot (as long as disableTypography is not `true`).
+   * [Follow this guide](https://mui.com/material-ui/api/typography/#props) to learn more about the requirements for this component.
+   * @default Typography
+   */
+  subheader: React.ElementType;
+}
+
+export type CardHeaderSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  CardHeaderSlots,
+  {
+    /**
+     * Props forwarded to the root slot.
+     * By default, the avaible props are based on the div element.
+     */
+    root: SlotProps<
+      React.ElementType<React.DetailsHTMLAttributes<HTMLDivElement>>,
+      CardHeaderRootSlotPropsOverrides,
+      CardHeaderOwnerState
+    >;
+    /**
+     * Props forwarded to the avatar slot.
+     * By default, the avaible props are based on the div element.
+     */
+    avatar: SlotProps<
+      React.ElementType<React.DetailsHTMLAttributes<HTMLDivElement>>,
+      CardHeaderAvatarSlotPropsOverrides,
+      CardHeaderOwnerState
+    >;
+    /**
+     * Props forwarded to the action slot.
+     * By default, the avaible props are based on the div element.
+     */
+    action: SlotProps<
+      React.ElementType<React.DetailsHTMLAttributes<HTMLDivElement>>,
+      CardHeaderActionSlotPropsOverrides,
+      CardHeaderOwnerState
+    >;
+    /**
+     * Props forwarded to the content slot.
+     * By default, the avaible props are based on the div element.
+     */
+    content: SlotProps<
+      React.ElementType<React.DetailsHTMLAttributes<HTMLDivElement>>,
+      CardHeaderContentSlotPropsOverrides,
+      CardHeaderOwnerState
+    >;
+    /**
+     * Props forwarded to the title slot (as long as disableTypography is not `true`).
+     * By default, the avaible props are based on the [Typography](https://mui.com/material-ui/api/typography/#props) component.
+     */
+    title: SlotProps<
+      React.ElementType<TypographyProps>,
+      CardHeaderTitleSlotPropsOverrides,
+      CardHeaderOwnerState
+    >;
+    /**
+     * Props forwarded to the subheader slot (as long as disableTypography is not `true`).
+     * By default, the avaible props are based on the [Typography](https://mui.com/material-ui/api/typography/#props) component.
+     */
+    subheader: SlotProps<
+      React.ElementType<TypographyProps>,
+      CardHeaderSubheaderSlotPropsOverrides,
+      CardHeaderOwnerState
+    >;
+  }
+>;
+
 export interface CardHeaderOwnProps<
   TitleTypographyComponent extends React.ElementType = 'span',
   SubheaderTypographyComponent extends React.ElementType = 'span',
@@ -36,6 +144,7 @@ export interface CardHeaderOwnProps<
   /**
    * These props will be forwarded to the subheader
    * (as long as disableTypography is not `true`).
+   * @deprecated Use `slotProps.subheader` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   subheaderTypographyProps?: TypographyProps<
     SubheaderTypographyComponent,
@@ -54,6 +163,7 @@ export interface CardHeaderOwnProps<
   /**
    * These props will be forwarded to the title
    * (as long as disableTypography is not `true`).
+   * @deprecated Use `slotProps.title` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   titleTypographyProps?: TypographyProps<
     TitleTypographyComponent,
@@ -63,6 +173,8 @@ export interface CardHeaderOwnProps<
   >;
 }
 
+export interface CardHeaderOwnerState extends CardHeaderOwnProps {}
+
 export interface CardHeaderTypeMap<
   AdditionalProps = {},
   RootComponent extends React.ElementType = 'div',
@@ -70,7 +182,8 @@ export interface CardHeaderTypeMap<
   SubheaderTypographyComponent extends React.ElementType = 'span',
 > {
   props: AdditionalProps &
-    CardHeaderOwnProps<TitleTypographyComponent, SubheaderTypographyComponent>;
+    CardHeaderOwnProps<TitleTypographyComponent, SubheaderTypographyComponent> &
+    CardHeaderSlotsAndSlotProps;
   defaultComponent: RootComponent;
 }
 /**

package/CardHeader/CardHeader.js

@@ -2,12 +2,12 @@
 
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import Typography, { typographyClasses } from "../Typography/index.js";
 import { styled } from "../zero-styled/index.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import cardHeaderClasses, { getCardHeaderUtilityClass } from "./cardHeaderClasses.js";
+import useSlot from "../utils/useSlot.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -79,13 +79,14 @@ const CardHeader = /*#__PURE__*/React.forwardRef(function CardHeader(inProps, re
   const {
     action,
     avatar,
-    className,
     component = 'div',
     disableTypography = false,
     subheader: subheaderProp,
     subheaderTypographyProps,
     title: titleProp,
     titleTypographyProps,
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
   const ownerState = {
@@ -94,44 +95,88 @@ const CardHeader = /*#__PURE__*/React.forwardRef(function CardHeader(inProps, re
     disableTypography
   };
   const classes = useUtilityClasses(ownerState);
+  const externalForwardedProps = {
+    slots,
+    slotProps: {
+      title: titleTypographyProps,
+      subheader: subheaderTypographyProps,
+      ...slotProps
+    }
+  };
   let title = titleProp;
-  if (title != null && title.type !== Typography && !disableTypography) {
-    title = /*#__PURE__*/_jsx(Typography, {
+  const [TitleSlot, titleSlotProps] = useSlot('title', {
+    className: classes.title,
+    elementType: Typography,
+    externalForwardedProps,
+    ownerState,
+    additionalProps: {
       variant: avatar ? 'body2' : 'h5',
-      className: classes.title,
-      component: "span",
-      ...titleTypographyProps,
+      component: 'span'
+    }
+  });
+  if (title != null && title.type !== Typography && !disableTypography) {
+    title = /*#__PURE__*/_jsx(TitleSlot, {
+      ...titleSlotProps,
       children: title
     });
   }
   let subheader = subheaderProp;
-  if (subheader != null && subheader.type !== Typography && !disableTypography) {
-    subheader = /*#__PURE__*/_jsx(Typography, {
+  const [SubheaderSlot, subheaderSlotProps] = useSlot('subheader', {
+    className: classes.subheader,
+    elementType: Typography,
+    externalForwardedProps,
+    ownerState,
+    additionalProps: {
       variant: avatar ? 'body2' : 'body1',
-      className: classes.subheader,
-      color: "textSecondary",
-      component: "span",
-      ...subheaderTypographyProps,
+      color: 'textSecondary',
+      component: 'span'
+    }
+  });
+  if (subheader != null && subheader.type !== Typography && !disableTypography) {
+    subheader = /*#__PURE__*/_jsx(SubheaderSlot, {
+      ...subheaderSlotProps,
       children: subheader
     });
   }
-  return /*#__PURE__*/_jsxs(CardHeaderRoot, {
-    className: clsx(classes.root, className),
-    as: component,
-    ref: ref,
-    ownerState: ownerState,
-    ...other,
-    children: [avatar && /*#__PURE__*/_jsx(CardHeaderAvatar, {
-      className: classes.avatar,
-      ownerState: ownerState,
+  const [RootSlot, rootSlotProps] = useSlot('root', {
+    ref,
+    className: classes.root,
+    elementType: CardHeaderRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other,
+      component
+    },
+    ownerState
+  });
+  const [AvatarSlot, avatarSlotProps] = useSlot('avatar', {
+    className: classes.avatar,
+    elementType: CardHeaderAvatar,
+    externalForwardedProps,
+    ownerState
+  });
+  const [ContentSlot, contentSlotProps] = useSlot('content', {
+    className: classes.content,
+    elementType: CardHeaderContent,
+    externalForwardedProps,
+    ownerState
+  });
+  const [ActionSlot, actionSlotProps] = useSlot('action', {
+    className: classes.action,
+    elementType: CardHeaderAction,
+    externalForwardedProps,
+    ownerState
+  });
+  return /*#__PURE__*/_jsxs(RootSlot, {
+    ...rootSlotProps,
+    children: [avatar && /*#__PURE__*/_jsx(AvatarSlot, {
+      ...avatarSlotProps,
       children: avatar
-    }), /*#__PURE__*/_jsxs(CardHeaderContent, {
-      className: classes.content,
-      ownerState: ownerState,
+    }), /*#__PURE__*/_jsxs(ContentSlot, {
+      ...contentSlotProps,
       children: [title, subheader]
-    }), action && /*#__PURE__*/_jsx(CardHeaderAction, {
-      className: classes.action,
-      ownerState: ownerState,
+    }), action && /*#__PURE__*/_jsx(ActionSlot, {
+      ...actionSlotProps,
       children: action
     })]
   });
@@ -157,10 +202,6 @@ process.env.NODE_ENV !== "production" ? CardHeader.propTypes /* remove-proptypes
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
@@ -174,6 +215,30 @@ process.env.NODE_ENV !== "production" ? CardHeader.propTypes /* remove-proptypes
    * @default false
    */
   disableTypography: PropTypes.bool,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    action: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    avatar: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    content: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    subheader: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    title: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    action: PropTypes.elementType,
+    avatar: PropTypes.elementType,
+    content: PropTypes.elementType,
+    root: PropTypes.elementType,
+    subheader: PropTypes.elementType,
+    title: PropTypes.elementType
+  }),
   /**
    * The content of the component.
    */
@@ -181,6 +246,7 @@ process.env.NODE_ENV !== "production" ? CardHeader.propTypes /* remove-proptypes
   /**
    * These props will be forwarded to the subheader
    * (as long as disableTypography is not `true`).
+   * @deprecated Use `slotProps.subheader` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   subheaderTypographyProps: PropTypes.object,
   /**
@@ -194,6 +260,7 @@ process.env.NODE_ENV !== "production" ? CardHeader.propTypes /* remove-proptypes
   /**
    * These props will be forwarded to the title
    * (as long as disableTypography is not `true`).
+   * @deprecated Use `slotProps.title` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   titleTypographyProps: PropTypes.object
 } : void 0;

package/CircularProgress/CircularProgress.js

@@ -34,8 +34,8 @@ const circularDashKeyframe = keyframes`
   }
 
   100% {
-    stroke-dasharray: 100px, 200px;
-    stroke-dashoffset: -125px;
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: -126px;
   }
 `;
 

package/Dialog/Dialog.d.ts

@@ -1,12 +1,91 @@
 import * as React from 'react';
 import { SxProps, Breakpoint } from '@mui/system';
 import { InternalStandardProps as StandardProps, Theme } from '..';
+import { BackdropProps } from '../Backdrop';
 import { PaperProps } from '../Paper';
 import { ModalProps } from '../Modal';
 import { TransitionProps } from '../transitions/transition';
 import { DialogClasses } from './dialogClasses';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
-export interface DialogProps extends StandardProps<ModalProps, 'children'> {
+export interface DialogSlots {
+  /**
+   * The component that renders the transition.
+   * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * @default Collapse
+   */
+  transition?: React.ElementType;
+  /**
+   * The component that renders the paper.
+   * @default Paper
+   */
+  paper?: React.ElementType;
+  /**
+   * The component that renders the container.
+   */
+  container?: React.ElementType;
+  /**
+   * The component that renders the backdrop.
+   */
+  backdrop?: React.ElementType;
+  /**
+   * The component that renders the root.
+   */
+  root?: React.ElementType;
+}
+
+export interface DialogTransitionSlotPropsOverrides {}
+export interface DialogPaperSlotPropsOverrides {}
+export interface DialogContainerSlotPropsOverrides {}
+export interface DialogBackdropSlotPropsOverrides {}
+export interface DialogRootSlotPropsOverrides {}
+
+export type DialogSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  DialogSlots,
+  {
+    /**
+     * Props forwarded to the root slot.
+     * By default, the avaible props are based on the [Modal](https://mui.com/material-ui/api/modal/#props) component.
+     */
+    root: SlotProps<React.ElementType<ModalProps>, DialogRootSlotPropsOverrides, DialogOwnerState>;
+    /**
+     * Props forwarded to the backdrop slot.
+     * By default, the avaible props are based on the [Backdrop](https://mui.com/material-ui/api/backdrop/#props) component.
+     */
+    backdrop: SlotProps<
+      React.ElementType<BackdropProps>,
+      DialogBackdropSlotPropsOverrides,
+      DialogOwnerState
+    >;
+    /**
+     * Props forwarded to the container slot.
+     * By default, the avaible props are based on a div element.
+     */
+    container: SlotProps<'div', DialogContainerSlotPropsOverrides, DialogOwnerState>;
+    /**
+     * Props forwarded to the transition slot.
+     * By default, the avaible props are based on the [Fade](https://mui.com/material-ui/api/fade/#props) component.
+     */
+    transition: SlotProps<
+      React.ElementType<TransitionProps>,
+      DialogTransitionSlotPropsOverrides,
+      DialogOwnerState
+    >;
+    /**
+     * Props forwarded to the paper slot.
+     * By default, the avaible props are based on the [Paper](https://mui.com/material-ui/api/paper/#props) component.
+     */
+    paper: SlotProps<
+      React.ElementType<PaperProps>,
+      DialogPaperSlotPropsOverrides,
+      DialogOwnerState
+    >;
+  }
+>;
+
+export interface DialogProps
+  extends Omit<StandardProps<ModalProps, 'children'>, 'slots' | 'slotProps'>,
+    DialogSlotsAndSlotProps {
   /**
    * The id(s) of the element(s) that describe the dialog.
    */
@@ -77,6 +156,7 @@ export interface DialogProps extends StandardProps<ModalProps, 'children'> {
   /**
    * Props applied to the [`Paper`](https://mui.com/material-ui/api/paper/) element.
    * @default {}
+   * @deprecated Use `slotProps.paper` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   PaperProps?: Partial<PaperProps<React.ElementType>>;
   /**
@@ -92,6 +172,7 @@ export interface DialogProps extends StandardProps<ModalProps, 'children'> {
    * The component used for the transition.
    * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    * @default Fade
+   * @deprecated Use `slots.transition` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   TransitionComponent?: React.JSXElementConstructor<
     TransitionProps & { children: React.ReactElement<unknown, any> }
@@ -108,6 +189,7 @@ export interface DialogProps extends StandardProps<ModalProps, 'children'> {
   /**
    * Props applied to the transition element.
    * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
+   * @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.
    */
   TransitionProps?: TransitionProps;
 }
@@ -125,3 +207,5 @@ export interface DialogProps extends StandardProps<ModalProps, 'children'> {
  * - inherits [Modal API](https://mui.com/material-ui/api/modal/)
  */
 export default function Dialog(props: DialogProps): React.JSX.Element;
+
+export interface DialogOwnerState extends Omit<DialogProps, 'slots' | 'slotProps'> {}