@mui/material 6.4.0 → 6.4.1

package/ButtonBase/ButtonBase.d.ts

@@ -5,6 +5,8 @@ import { TouchRippleActions, TouchRippleProps } from './TouchRipple';
 import { OverrideProps, OverridableComponent, OverridableTypeMap } from '../OverridableComponent';
 import { ButtonBaseClasses } from './buttonBaseClasses';
 
+export { TouchRippleActions, TouchRippleProps };
+
 export interface ButtonBaseOwnProps {
   /**
    * A ref for imperative actions.

package/ButtonGroup/ButtonGroupButtonContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 /**
  * @ignore - internal component.

package/ButtonGroup/ButtonGroupContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 /**
  * @ignore - internal component.

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # [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 -->

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'> {}

package/Dialog/Dialog.js

@@ -15,6 +15,7 @@ import Backdrop from "../Backdrop/index.js";
 import { styled, useTheme } from "../zero-styled/index.js";
 import memoTheme from "../utils/memoTheme.js";
 import { useDefaultProps } from "../DefaultPropsProvider/index.js";
+import useSlot from "../utils/useSlot.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const DialogBackdrop = styled(Backdrop, {
   name: 'MuiDialog',
@@ -218,6 +219,8 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
     PaperComponent = Paper,
     PaperProps = {},
     scroll = 'paper',
+    slots = {},
+    slotProps = {},
     TransitionComponent = Fade,
     transitionDuration = defaultTransitionDuration,
     TransitionProps,
@@ -261,46 +264,89 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
       titleId: ariaLabelledby
     };
   }, [ariaLabelledby]);
-  return /*#__PURE__*/_jsx(DialogRoot, {
+  const backwardCompatibleSlots = {
+    transition: TransitionComponent,
+    ...slots
+  };
+  const backwardCompatibleSlotProps = {
+    transition: TransitionProps,
+    paper: PaperProps,
+    backdrop: BackdropProps,
+    ...slotProps
+  };
+  const externalForwardedProps = {
+    slots: backwardCompatibleSlots,
+    slotProps: backwardCompatibleSlotProps
+  };
+  const [RootSlot, rootSlotProps] = useSlot('root', {
+    elementType: DialogRoot,
+    shouldForwardComponentProp: true,
+    externalForwardedProps,
+    ownerState,
     className: clsx(classes.root, className),
+    ref
+  });
+  const [BackdropSlot, backdropSlotProps] = useSlot('backdrop', {
+    elementType: DialogBackdrop,
+    shouldForwardComponentProp: true,
+    externalForwardedProps,
+    ownerState
+  });
+  const [PaperSlot, paperSlotProps] = useSlot('paper', {
+    elementType: DialogPaper,
+    shouldForwardComponentProp: true,
+    externalForwardedProps,
+    ownerState,
+    className: clsx(classes.paper, PaperProps.className)
+  });
+  const [ContainerSlot, containerSlotProps] = useSlot('container', {
+    elementType: DialogContainer,
+    externalForwardedProps,
+    ownerState,
+    className: clsx(classes.container)
+  });
+  const [TransitionSlot, transitionSlotProps] = useSlot('transition', {
+    elementType: Fade,
+    externalForwardedProps,
+    ownerState,
+    additionalProps: {
+      appear: true,
+      in: open,
+      timeout: transitionDuration,
+      role: 'presentation'
+    }
+  });
+  return /*#__PURE__*/_jsx(RootSlot, {
     closeAfterTransition: true,
-    components: {
-      Backdrop: DialogBackdrop
+    slots: {
+      backdrop: BackdropSlot
     },
-    componentsProps: {
+    slotProps: {
       backdrop: {
         transitionDuration,
         as: BackdropComponent,
-        ...BackdropProps
+        ...backdropSlotProps
       }
     },
     disableEscapeKeyDown: disableEscapeKeyDown,
     onClose: onClose,
     open: open,
-    ref: ref,
     onClick: handleBackdropClick,
-    ownerState: ownerState,
+    ...rootSlotProps,
     ...other,
-    children: /*#__PURE__*/_jsx(TransitionComponent, {
-      appear: true,
-      in: open,
-      timeout: transitionDuration,
-      role: "presentation",
-      ...TransitionProps,
-      children: /*#__PURE__*/_jsx(DialogContainer, {
-        className: clsx(classes.container),
+    children: /*#__PURE__*/_jsx(TransitionSlot, {
+      ...transitionSlotProps,
+      children: /*#__PURE__*/_jsx(ContainerSlot, {
         onMouseDown: handleMouseDown,
-        ownerState: ownerState,
-        children: /*#__PURE__*/_jsx(DialogPaper, {
+        ...containerSlotProps,
+        children: /*#__PURE__*/_jsx(PaperSlot, {
           as: PaperComponent,
           elevation: 24,
           role: "dialog",
           "aria-describedby": ariaDescribedby,
           "aria-labelledby": ariaLabelledby,
           "aria-modal": ariaModal,
-          ...PaperProps,
-          className: clsx(classes.paper, PaperProps.className),
-          ownerState: ownerState,
+          ...paperSlotProps,
           children: /*#__PURE__*/_jsx(DialogContext.Provider, {
             value: dialogContextValue,
             children: children
@@ -412,6 +458,7 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes /* remove-proptypes */
   /**
    * 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: PropTypes.object,
   /**
@@ -419,6 +466,28 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes /* remove-proptypes */
    * @default 'paper'
    */
   scroll: PropTypes.oneOf(['body', 'paper']),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    backdrop: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    container: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    paper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    backdrop: PropTypes.elementType,
+    container: PropTypes.elementType,
+    paper: PropTypes.elementType,
+    root: PropTypes.elementType,
+    transition: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -427,6 +496,7 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes /* remove-proptypes */
    * 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: PropTypes.elementType,
   /**
@@ -445,6 +515,7 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes /* remove-proptypes */
   /**
    * 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: PropTypes.object
 } : void 0;

package/Dialog/DialogContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 const DialogContext = /*#__PURE__*/React.createContext({});
 if (process.env.NODE_ENV !== 'production') {

package/Drawer/Drawer.js

@@ -29,7 +29,7 @@ const useUtilityClasses = ownerState => {
     variant
   } = ownerState;
   const slots = {
-    root: ['root'],
+    root: ['root', `anchor${capitalize(anchor)}`],
     docked: [(variant === 'permanent' || variant === 'persistent') && 'docked'],
     modal: ['modal'],
     paper: ['paper', `paperAnchor${capitalize(anchor)}`, variant !== 'temporary' && `paperAnchorDocked${capitalize(anchor)}`]

package/Drawer/drawerClasses.d.ts

@@ -5,21 +5,45 @@ export interface DrawerClasses {
     docked: string;
     /** Styles applied to the Paper component. */
     paper: string;
-    /** Styles applied to the Paper component if `anchor="left"`. */
+    /** Styles applied to the root element if `anchor="left"`. */
+    anchorLeft: string;
+    /** Styles applied to the root element if `anchor="right"`. */
+    anchorRight: string;
+    /** Styles applied to the root element if `anchor="top"`. */
+    anchorTop: string;
+    /** Styles applied to the root element if `anchor="bottom"`. */
+    anchorBottom: string;
+    /** Styles applied to the Paper component if `anchor="left"`.
+     *  @deprecated Combine the [.MuiDrawer-anchorLeft](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorLeft) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     paperAnchorLeft: string;
-    /** Styles applied to the Paper component if `anchor="right"`. */
+    /** Styles applied to the Paper component if `anchor="right"`.
+     *  @deprecated Combine the [.MuiDrawer-anchorRight](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorRight) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     paperAnchorRight: string;
-    /** Styles applied to the Paper component if `anchor="top"`. */
+    /** Styles applied to the Paper component if `anchor="top"`.
+     *  @deprecated Combine the [.MuiDrawer-anchorTop](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorTop) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     paperAnchorTop: string;
-    /** Styles applied to the Paper component if `anchor="bottom"`. */
+    /** Styles applied to the Paper component if `anchor="bottom"`.
+     *  @deprecated Combine the [.MuiDrawer-anchorBottom](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorBottom) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     paperAnchorBottom: string;
-    /** Styles applied to the Paper component if `anchor="left"` and `variant` is not "temporary". */
+    /** Styles applied to the Paper component if `anchor="left"` and `variant` is not "temporary".
+     * @deprecated Combine the [.MuiDrawer-anchorLeft](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorLeft), [.MuiDrawer-docked](/material-ui/api/drawer/#drawer-classes-MuiDrawer-docked) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     paperAnchorDockedLeft: string;
-    /** Styles applied to the Paper component if `anchor="top"` and `variant` is not "temporary". */
+    /** Styles applied to the Paper component if `anchor="top"` and `variant` is not "temporary".
+     * @deprecated Combine the [.MuiDrawer-anchorTop](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorTop), [.MuiDrawer-docked](/material-ui/api/drawer/#drawer-classes-MuiDrawer-docked) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     paperAnchorDockedTop: string;
-    /** Styles applied to the Paper component if `anchor="right"` and `variant` is not "temporary". */
+    /** Styles applied to the Paper component if `anchor="right"` and `variant` is not "temporary".
+     * @deprecated Combine the [.MuiDrawer-anchorRight](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorRight), [.MuiDrawer-docked](/material-ui/api/drawer/#drawer-classes-MuiDrawer-docked) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     paperAnchorDockedRight: string;
-    /** Styles applied to the Paper component if `anchor="bottom"` and `variant` is not "temporary". */
+    /** Styles applied to the Paper component if `anchor="bottom"` and `variant` is not "temporary".
+     * @deprecated Combine the [.MuiDrawer-anchorBottom](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorBottom), [.MuiDrawer-docked](/material-ui/api/drawer/#drawer-classes-MuiDrawer-docked) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+     */
     paperAnchorDockedBottom: string;
     /** Styles applied to the Modal component. */
     modal: string;

package/Drawer/drawerClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getDrawerUtilityClass(slot) {
   return generateUtilityClass('MuiDrawer', slot);
 }
-const drawerClasses = generateUtilityClasses('MuiDrawer', ['root', 'docked', 'paper', 'paperAnchorLeft', 'paperAnchorRight', 'paperAnchorTop', 'paperAnchorBottom', 'paperAnchorDockedLeft', 'paperAnchorDockedRight', 'paperAnchorDockedTop', 'paperAnchorDockedBottom', 'modal']);
+const drawerClasses = generateUtilityClasses('MuiDrawer', ['root', 'docked', 'paper', 'anchorLeft', 'anchorRight', 'anchorTop', 'anchorBottom', 'paperAnchorLeft', 'paperAnchorRight', 'paperAnchorTop', 'paperAnchorBottom', 'paperAnchorDockedLeft', 'paperAnchorDockedRight', 'paperAnchorDockedTop', 'paperAnchorDockedBottom', 'modal']);
 export default drawerClasses;

package/FormControl/FormControl.js

@@ -179,6 +179,12 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
       };
     };
   }
+  const onFilled = React.useCallback(() => {
+    setFilled(true);
+  }, []);
+  const onEmpty = React.useCallback(() => {
+    setFilled(false);
+  }, []);
   const childContext = React.useMemo(() => {
     return {
       adornedStart,
@@ -194,20 +200,16 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
       onBlur: () => {
         setFocused(false);
       },
-      onEmpty: () => {
-        setFilled(false);
-      },
-      onFilled: () => {
-        setFilled(true);
-      },
       onFocus: () => {
         setFocused(true);
       },
+      onEmpty,
+      onFilled,
       registerEffect,
       required,
       variant
     };
-  }, [adornedStart, color, disabled, error, filled, focused, fullWidth, hiddenLabel, registerEffect, required, size, variant]);
+  }, [adornedStart, color, disabled, error, filled, focused, fullWidth, hiddenLabel, registerEffect, onEmpty, onFilled, required, size, variant]);
   return /*#__PURE__*/_jsx(FormControlContext.Provider, {
     value: childContext,
     children: /*#__PURE__*/_jsx(FormControlRoot, {

package/FormControl/FormControlContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 /**
  * @ignore - internal component.

package/Hidden/withWidth.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import getDisplayName from '@mui/utils/getDisplayName';

package/IconButton/IconButton.d.ts

@@ -49,9 +49,10 @@ export interface IconButtonOwnProps {
   edge?: 'start' | 'end' | false;
   /**
    * If `true`, the loading indicator is visible and the button is disabled.
-   * @default false
+   * If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
+   * @default null
    */
-  loading?: boolean;
+  loading?: boolean | null;
   /**
    * Element placed before the children if the button is in loading state.
    * The node should contain an element with `role="progressbar"` with an accessible name.

package/IconButton/IconButton.js

@@ -27,7 +27,8 @@ const useUtilityClasses = ownerState => {
   } = ownerState;
   const slots = {
     root: ['root', loading && 'loading', disabled && 'disabled', color !== 'default' && `color${capitalize(color)}`, edge && `edge${capitalize(edge)}`, `size${capitalize(size)}`],
-    loadingIndicator: ['loadingIndicator']
+    loadingIndicator: ['loadingIndicator'],
+    loadingWrapper: ['loadingWrapper']
   };
   return composeClasses(slots, getIconButtonUtilityClass, classes);
 };
@@ -188,7 +189,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     disableFocusRipple = false,
     size = 'medium',
     id: idProp,
-    loading = false,
+    loading = null,
     loadingIndicator: loadingIndicatorProp,
     ...other
   } = props;
@@ -218,10 +219,19 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     ref: ref,
     ...other,
     ownerState: ownerState,
-    children: [/*#__PURE__*/_jsx(IconButtonLoadingIndicator, {
-      className: classes.loadingIndicator,
-      ownerState: ownerState,
-      children: loading && loadingIndicator
+    children: [typeof loading === 'boolean' &&
+    /*#__PURE__*/
+    // use plain HTML span to minimize the runtime overhead
+    _jsx("span", {
+      className: classes.loadingWrapper,
+      style: {
+        display: 'contents'
+      },
+      children: /*#__PURE__*/_jsx(IconButtonLoadingIndicator, {
+        className: classes.loadingIndicator,
+        ownerState: ownerState,
+        children: loading && loadingIndicator
+      })
     }), children]
   });
 });
@@ -287,7 +297,8 @@ process.env.NODE_ENV !== "production" ? IconButton.propTypes /* remove-proptypes
   id: PropTypes.string,
   /**
    * If `true`, the loading indicator is visible and the button is disabled.
-   * @default false
+   * If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
+   * @default null
    */
   loading: PropTypes.bool,
   /**

package/IconButton/iconButtonClasses.d.ts

@@ -31,6 +31,8 @@ export interface IconButtonClasses {
     loading: string;
     /** Styles applied to the loadingIndicator element. */
     loadingIndicator: string;
+    /** Styles applied to the loadingWrapper element. */
+    loadingWrapper: string;
 }
 export type IconButtonClassKey = keyof IconButtonClasses;
 export declare function getIconButtonUtilityClass(slot: string): string;

package/IconButton/iconButtonClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getIconButtonUtilityClass(slot) {
   return generateUtilityClass('MuiIconButton', slot);
 }
-const iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge', 'loading', 'loadingIndicator']);
+const iconButtonClasses = generateUtilityClasses('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge', 'loading', 'loadingIndicator', 'loadingWrapper']);
 export default iconButtonClasses;

package/RadioGroup/RadioGroupContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 /**
  * @ignore - internal component.

package/Step/StepContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 /**
  * Provides information about the current step in Stepper.

package/Stepper/StepperContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 /**
  * Provides information about the current step in Stepper.

package/Table/Tablelvl2Context.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 /**

package/ToggleButtonGroup/ToggleButtonGroupButtonContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 /**
  * @ignore - internal component.

package/ToggleButtonGroup/ToggleButtonGroupContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 /**
  * @ignore - internal component.

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.4.0
+ * @mui/material v6.4.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/ButtonGroup/ButtonGroupButtonContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 /**
  * @ignore - internal component.

package/modern/ButtonGroup/ButtonGroupContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 /**
  * @ignore - internal component.