@mui/material 6.3.1 → 6.4.0

package/node/CircularProgress/CircularProgress.js

@@ -41,8 +41,8 @@ const circularDashKeyframe = (0, _zeroStyled.keyframes)`
   }
 
   100% {
-    stroke-dasharray: 100px, 200px;
-    stroke-dashoffset: -125px;
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: -126px;
   }
 `;
 

package/node/IconButton/IconButton.js

@@ -12,12 +12,14 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _utils = require("@mui/material/utils");
 var _colorManipulator = require("@mui/system/colorManipulator");
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
+var _CircularProgress = _interopRequireDefault(require("../CircularProgress"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _iconButtonClasses = _interopRequireWildcard(require("./iconButtonClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -27,10 +29,12 @@ const useUtilityClasses = ownerState => {
     disabled,
     color,
     edge,
-    size
+    size,
+    loading
   } = ownerState;
   const slots = {
-    root: ['root', disabled && 'disabled', color !== 'default' && `color${(0, _capitalize.default)(color)}`, edge && `edge${(0, _capitalize.default)(edge)}`, `size${(0, _capitalize.default)(size)}`]
+    root: ['root', loading && 'loading', disabled && 'disabled', color !== 'default' && `color${(0, _capitalize.default)(color)}`, edge && `edge${(0, _capitalize.default)(edge)}`, `size${(0, _capitalize.default)(size)}`],
+    loadingIndicator: ['loadingIndicator']
   };
   return (0, _composeClasses.default)(slots, _iconButtonClasses.getIconButtonUtilityClass, classes);
 };
@@ -41,7 +45,7 @@ const IconButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
     const {
       ownerState
     } = props;
-    return [styles.root, ownerState.color !== 'default' && styles[`color${(0, _capitalize.default)(ownerState.color)}`], ownerState.edge && styles[`edge${(0, _capitalize.default)(ownerState.edge)}`], styles[`size${(0, _capitalize.default)(ownerState.size)}`]];
+    return [styles.root, ownerState.loading && styles.loading, ownerState.color !== 'default' && styles[`color${(0, _capitalize.default)(ownerState.color)}`], ownerState.edge && styles[`edge${(0, _capitalize.default)(ownerState.edge)}`], styles[`size${(0, _capitalize.default)(ownerState.size)}`]];
   }
 })((0, _memoTheme.default)(({
   theme
@@ -144,8 +148,34 @@ const IconButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
   [`&.${_iconButtonClasses.default.disabled}`]: {
     backgroundColor: 'transparent',
     color: (theme.vars || theme).palette.action.disabled
+  },
+  [`&.${_iconButtonClasses.default.loading}`]: {
+    color: 'transparent'
   }
 })));
+const IconButtonLoadingIndicator = (0, _zeroStyled.styled)('span', {
+  name: 'MuiIconButton',
+  slot: 'LoadingIndicator',
+  overridesResolver: (props, styles) => styles.loadingIndicator
+})(({
+  theme
+}) => ({
+  display: 'none',
+  position: 'absolute',
+  visibility: 'visible',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  color: (theme.vars || theme).palette.action.disabled,
+  variants: [{
+    props: {
+      loading: true
+    },
+    style: {
+      display: 'flex'
+    }
+  }]
+}));
 
 /**
  * Refer to the [Icons](/material-ui/icons/) section of the documentation
@@ -164,26 +194,42 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     disabled = false,
     disableFocusRipple = false,
     size = 'medium',
+    id: idProp,
+    loading = false,
+    loadingIndicator: loadingIndicatorProp,
     ...other
   } = props;
+  const id = (0, _utils.unstable_useId)(idProp);
+  const loadingIndicator = loadingIndicatorProp ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, {
+    "aria-labelledby": id,
+    color: "inherit",
+    size: 16
+  });
   const ownerState = {
     ...props,
     edge,
     color,
     disabled,
     disableFocusRipple,
+    loading,
+    loadingIndicator,
     size
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButtonRoot, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(IconButtonRoot, {
+    id: id,
     className: (0, _clsx.default)(classes.root, className),
     centerRipple: true,
     focusRipple: !disableFocusRipple,
-    disabled: disabled,
+    disabled: disabled || loading,
     ref: ref,
     ...other,
     ownerState: ownerState,
-    children: children
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconButtonLoadingIndicator, {
+      className: classes.loadingIndicator,
+      ownerState: ownerState,
+      children: loading && loadingIndicator
+    }), children]
   });
 });
 process.env.NODE_ENV !== "production" ? IconButton.propTypes /* remove-proptypes */ = {
@@ -242,6 +288,22 @@ process.env.NODE_ENV !== "production" ? IconButton.propTypes /* remove-proptypes
    * @default false
    */
   edge: _propTypes.default.oneOf(['end', 'start', false]),
+  /**
+   * @ignore
+   */
+  id: _propTypes.default.string,
+  /**
+   * If `true`, the loading indicator is visible and the button is disabled.
+   * @default false
+   */
+  loading: _propTypes.default.bool,
+  /**
+   * 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.
+   * By default, it renders a `CircularProgress` that is labeled by the button itself.
+   * @default <CircularProgress color="inherit" size={16} />
+   */
+  loadingIndicator: _propTypes.default.node,
   /**
    * The size of the component.
    * `small` is equivalent to the dense button styling.

package/node/IconButton/iconButtonClasses.js

@@ -11,5 +11,5 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 function getIconButtonUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiIconButton', slot);
 }
-const iconButtonClasses = (0, _generateUtilityClasses.default)('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
+const iconButtonClasses = (0, _generateUtilityClasses.default)('MuiIconButton', ['root', 'disabled', 'colorInherit', 'colorPrimary', 'colorSecondary', 'colorError', 'colorInfo', 'colorSuccess', 'colorWarning', 'edgeStart', 'edgeEnd', 'sizeSmall', 'sizeMedium', 'sizeLarge', 'loading', 'loadingIndicator']);
 var _default = exports.default = iconButtonClasses;

package/node/LinearProgress/LinearProgress.js

@@ -91,8 +91,8 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', `color${(0, _capitalize.default)(color)}`, variant],
     dashed: ['dashed', `dashedColor${(0, _capitalize.default)(color)}`],
-    bar1: ['bar', `barColor${(0, _capitalize.default)(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar1Indeterminate', variant === 'determinate' && 'bar1Determinate', variant === 'buffer' && 'bar1Buffer'],
-    bar2: ['bar', variant !== 'buffer' && `barColor${(0, _capitalize.default)(color)}`, variant === 'buffer' && `color${(0, _capitalize.default)(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar2Indeterminate', variant === 'buffer' && 'bar2Buffer']
+    bar1: ['bar', 'bar1', `barColor${(0, _capitalize.default)(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar1Indeterminate', variant === 'determinate' && 'bar1Determinate', variant === 'buffer' && 'bar1Buffer'],
+    bar2: ['bar', 'bar2', variant !== 'buffer' && `barColor${(0, _capitalize.default)(color)}`, variant === 'buffer' && `color${(0, _capitalize.default)(color)}`, (variant === 'indeterminate' || variant === 'query') && 'bar2Indeterminate', variant === 'buffer' && 'bar2Buffer']
   };
   return (0, _composeClasses.default)(slots, _linearProgressClasses.getLinearProgressUtilityClass, classes);
 };
@@ -210,7 +210,7 @@ const LinearProgressBar1 = (0, _zeroStyled.styled)('span', {
     const {
       ownerState
     } = props;
-    return [styles.bar, styles[`barColor${(0, _capitalize.default)(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar1Indeterminate, ownerState.variant === 'determinate' && styles.bar1Determinate, ownerState.variant === 'buffer' && styles.bar1Buffer];
+    return [styles.bar, styles.bar1, styles[`barColor${(0, _capitalize.default)(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar1Indeterminate, ownerState.variant === 'determinate' && styles.bar1Determinate, ownerState.variant === 'buffer' && styles.bar1Buffer];
   }
 })((0, _memoTheme.default)(({
   theme
@@ -274,7 +274,7 @@ const LinearProgressBar2 = (0, _zeroStyled.styled)('span', {
     const {
       ownerState
     } = props;
-    return [styles.bar, styles[`barColor${(0, _capitalize.default)(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar2Indeterminate, ownerState.variant === 'buffer' && styles.bar2Buffer];
+    return [styles.bar, styles.bar2, styles[`barColor${(0, _capitalize.default)(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar2Indeterminate, ownerState.variant === 'buffer' && styles.bar2Buffer];
   }
 })((0, _memoTheme.default)(({
   theme

package/node/LinearProgress/linearProgressClasses.js

@@ -11,5 +11,5 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 function getLinearProgressUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiLinearProgress', slot);
 }
-const linearProgressClasses = (0, _generateUtilityClasses.default)('MuiLinearProgress', ['root', 'colorPrimary', 'colorSecondary', 'determinate', 'indeterminate', 'buffer', 'query', 'dashed', 'dashedColorPrimary', 'dashedColorSecondary', 'bar', 'barColorPrimary', 'barColorSecondary', 'bar1Indeterminate', 'bar1Determinate', 'bar1Buffer', 'bar2Indeterminate', 'bar2Buffer']);
+const linearProgressClasses = (0, _generateUtilityClasses.default)('MuiLinearProgress', ['root', 'colorPrimary', 'colorSecondary', 'determinate', 'indeterminate', 'buffer', 'query', 'dashed', 'dashedColorPrimary', 'dashedColorSecondary', 'bar', 'bar1', 'bar2', 'barColorPrimary', 'barColorSecondary', 'bar1Indeterminate', 'bar1Determinate', 'bar1Buffer', 'bar2Indeterminate', 'bar2Buffer']);
 var _default = exports.default = linearProgressClasses;

package/node/Link/getTextDecoration.js

@@ -11,8 +11,9 @@ const getTextDecoration = ({
   ownerState
 }) => {
   const transformedColor = ownerState.color;
-  const color = (0, _style.getPath)(theme, `palette.${transformedColor}`, false) || ownerState.color;
-  const channelColor = (0, _style.getPath)(theme, `palette.${transformedColor}Channel`);
+  // check the `main` color first for a custom palette, then fallback to the color itself
+  const color = (0, _style.getPath)(theme, `palette.${transformedColor}.main`, false) || (0, _style.getPath)(theme, `palette.${transformedColor}`, false) || ownerState.color;
+  const channelColor = (0, _style.getPath)(theme, `palette.${transformedColor}.mainChannel`) || (0, _style.getPath)(theme, `palette.${transformedColor}Channel`);
   if ('vars' in theme && channelColor) {
     return `rgba(${channelColor} / 0.4)`;
   }

package/node/Select/Select.js

@@ -11,6 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
 var _SelectInput = _interopRequireDefault(require("./SelectInput"));
 var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
@@ -24,12 +25,20 @@ var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _zeroStyled = require("../zero-styled");
 var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
+var _selectClasses = require("./selectClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
     classes
   } = ownerState;
-  return classes;
+  const slots = {
+    root: ['root']
+  };
+  const composedClasses = (0, _composeClasses.default)(slots, _selectClasses.getSelectUtilityClasses, classes);
+  return {
+    ...classes,
+    ...composedClasses
+  };
 };
 const styledRootConfig = {
   name: 'MuiSelect',

package/node/Select/SelectInput.js

@@ -450,7 +450,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       ref: handleDisplayRef,
       tabIndex: tabIndex,
       role: "combobox",
-      "aria-controls": listboxId,
+      "aria-controls": open ? listboxId : undefined,
       "aria-disabled": disabled ? 'true' : undefined,
       "aria-expanded": open ? 'true' : 'false',
       "aria-haspopup": "listbox",

package/node/Slider/useSlider.js

@@ -198,6 +198,8 @@ function useSlider(parameters) {
   const [open, setOpen] = React.useState(-1);
   const [dragging, setDragging] = React.useState(false);
   const moveCount = React.useRef(0);
+  // lastChangedValue is updated whenever onChange is triggered.
+  const lastChangedValue = React.useRef(null);
   const [valueDerived, setValueState] = (0, _utils.unstable_useControlled)({
     controlled: valueProp,
     default: defaultValue ?? min,
@@ -218,6 +220,7 @@ function useSlider(parameters) {
         name
       }
     });
+    lastChangedValue.current = value;
     onChange(clonedEvent, value, thumbIndex);
   });
   const range = Array.isArray(valueDerived);
@@ -289,7 +292,7 @@ function useSlider(parameters) {
       handleChange(event, newValue, index);
     }
     if (onChangeCommitted) {
-      onChangeCommitted(event, newValue);
+      onChangeCommitted(event, lastChangedValue.current ?? newValue);
     }
   };
   const createHandleHiddenInputKeyDown = otherHandlers => event => {
@@ -494,7 +497,7 @@ function useSlider(parameters) {
       setOpen(-1);
     }
     if (onChangeCommitted) {
-      onChangeCommitted(nativeEvent, newValue);
+      onChangeCommitted(nativeEvent, lastChangedValue.current ?? newValue);
     }
     touchId.current = undefined;
 

package/node/index.js

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

package/node/utils/index.js

@@ -41,6 +41,12 @@ Object.defineProperty(exports, "isMuiElement", {
     return _isMuiElement.default;
   }
 });
+Object.defineProperty(exports, "mergeSlotProps", {
+  enumerable: true,
+  get: function () {
+    return _mergeSlotProps.default;
+  }
+});
 Object.defineProperty(exports, "ownerDocument", {
   enumerable: true,
   get: function () {
@@ -126,6 +132,7 @@ var _unsupportedProp = _interopRequireDefault(require("./unsupportedProp"));
 var _useControlled = _interopRequireDefault(require("./useControlled"));
 var _useEventCallback = _interopRequireDefault(require("./useEventCallback"));
 var _useForkRef = _interopRequireDefault(require("./useForkRef"));
+var _mergeSlotProps = _interopRequireDefault(require("./mergeSlotProps"));
 // TODO: remove this export once ClassNameGenerator is stable
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const unstable_ClassNameGenerator = exports.unstable_ClassNameGenerator = {

package/node/utils/mergeSlotProps.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = mergeSlotProps;
+var _clsx = _interopRequireDefault(require("clsx"));
+function mergeSlotProps(externalSlotProps, defaultSlotProps) {
+  if (!externalSlotProps) {
+    return defaultSlotProps;
+  }
+  if (typeof externalSlotProps === 'function' || typeof defaultSlotProps === 'function') {
+    return ownerState => {
+      const defaultSlotPropsValue = typeof defaultSlotProps === 'function' ? defaultSlotProps(ownerState) : defaultSlotProps;
+      const externalSlotPropsValue = typeof externalSlotProps === 'function' ? externalSlotProps({
+        ...ownerState,
+        ...defaultSlotPropsValue
+      }) : externalSlotProps;
+      const className = (0, _clsx.default)(ownerState?.className, defaultSlotPropsValue?.className, externalSlotPropsValue?.className);
+      return {
+        ...defaultSlotPropsValue,
+        ...externalSlotPropsValue,
+        ...(!!className && {
+          className
+        }),
+        ...(defaultSlotPropsValue?.style && externalSlotPropsValue?.style && {
+          style: {
+            ...defaultSlotPropsValue.style,
+            ...externalSlotPropsValue.style
+          }
+        })
+      };
+    };
+  }
+  const className = (0, _clsx.default)(defaultSlotProps?.className, externalSlotProps?.className);
+  return {
+    ...defaultSlotProps,
+    ...externalSlotProps,
+    ...(!!className && {
+      className
+    }),
+    ...(defaultSlotProps?.style && externalSlotProps?.style && {
+      style: {
+        ...defaultSlotProps.style,
+        ...externalSlotProps.style
+      }
+    })
+  };
+}

package/node/utils/useSlot.js

@@ -38,6 +38,7 @@ name, parameters) {
     ownerState,
     externalForwardedProps,
     internalForwardedProps,
+    shouldForwardComponentProp = false,
     ...useSlotPropsParams
   } = parameters;
   const {
@@ -73,9 +74,12 @@ name, parameters) {
     ...(name === 'root' && !rootComponent && !slots[name] && internalForwardedProps),
     ...(name !== 'root' && !slots[name] && internalForwardedProps),
     ...mergedProps,
-    ...(LeafComponent && {
+    ...(LeafComponent && !shouldForwardComponentProp && {
       as: LeafComponent
     }),
+    ...(LeafComponent && shouldForwardComponentProp && {
+      component: LeafComponent
+    }),
     ref
   }, ownerState);
   return [elementType, props];

package/node/version/index.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.version = exports.prerelease = exports.patch = exports.minor = exports.major = exports.default = void 0;
-const version = exports.version = "6.3.1";
+const version = exports.version = "6.4.0";
 const major = exports.major = Number("6");
-const minor = exports.minor = Number("3");
-const patch = exports.patch = Number("1");
+const minor = exports.minor = Number("4");
+const patch = exports.patch = Number("0");
 const prerelease = exports.prerelease = undefined;
 var _default = exports.default = version;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "6.3.1",
+  "version": "6.4.0",
   "private": false,
   "author": "MUI Team",
   "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.",
@@ -35,10 +35,10 @@
     "prop-types": "^15.8.1",
     "react-is": "^19.0.0",
     "react-transition-group": "^4.4.5",
-    "@mui/core-downloads-tracker": "^6.3.1",
+    "@mui/core-downloads-tracker": "^6.4.0",
+    "@mui/utils": "^6.4.0",
     "@mui/types": "^7.2.21",
-    "@mui/system": "^6.3.1",
-    "@mui/utils": "^6.3.1"
+    "@mui/system": "^6.4.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
@@ -46,7 +46,7 @@
     "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@mui/material-pigment-css": "^6.3.1"
+    "@mui/material-pigment-css": "^6.4.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {

package/utils/index.d.ts

@@ -16,4 +16,5 @@ export { default as unsupportedProp } from './unsupportedProp';
 export { default as useControlled } from './useControlled';
 export { default as useEventCallback } from './useEventCallback';
 export { default as useForkRef } from './useForkRef';
+export { default as mergeSlotProps } from './mergeSlotProps';
 export * from './types';

package/utils/index.js

@@ -18,6 +18,7 @@ export { default as unsupportedProp } from "./unsupportedProp.js";
 export { default as useControlled } from "./useControlled.js";
 export { default as useEventCallback } from "./useEventCallback.js";
 export { default as useForkRef } from "./useForkRef.js";
+export { default as mergeSlotProps } from "./mergeSlotProps.js";
 // TODO: remove this export once ClassNameGenerator is stable
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const unstable_ClassNameGenerator = {

package/utils/mergeSlotProps.d.ts

@@ -0,0 +1,2 @@
+import { SlotComponentProps } from '@mui/utils';
+export default function mergeSlotProps<T extends SlotComponentProps<React.ElementType, {}, {}>, K = T, U = T extends Function ? T : K extends Function ? K : T extends undefined ? K : T>(externalSlotProps: T | undefined, defaultSlotProps: K): U;

package/utils/mergeSlotProps.js

@@ -0,0 +1,43 @@
+import clsx from 'clsx';
+export default function mergeSlotProps(externalSlotProps, defaultSlotProps) {
+  if (!externalSlotProps) {
+    return defaultSlotProps;
+  }
+  if (typeof externalSlotProps === 'function' || typeof defaultSlotProps === 'function') {
+    return ownerState => {
+      const defaultSlotPropsValue = typeof defaultSlotProps === 'function' ? defaultSlotProps(ownerState) : defaultSlotProps;
+      const externalSlotPropsValue = typeof externalSlotProps === 'function' ? externalSlotProps({
+        ...ownerState,
+        ...defaultSlotPropsValue
+      }) : externalSlotProps;
+      const className = clsx(ownerState?.className, defaultSlotPropsValue?.className, externalSlotPropsValue?.className);
+      return {
+        ...defaultSlotPropsValue,
+        ...externalSlotPropsValue,
+        ...(!!className && {
+          className
+        }),
+        ...(defaultSlotPropsValue?.style && externalSlotPropsValue?.style && {
+          style: {
+            ...defaultSlotPropsValue.style,
+            ...externalSlotPropsValue.style
+          }
+        })
+      };
+    };
+  }
+  const className = clsx(defaultSlotProps?.className, externalSlotProps?.className);
+  return {
+    ...defaultSlotProps,
+    ...externalSlotProps,
+    ...(!!className && {
+      className
+    }),
+    ...(defaultSlotProps?.style && externalSlotProps?.style && {
+      style: {
+        ...defaultSlotProps.style,
+        ...externalSlotProps.style
+      }
+    })
+  };
+}

package/utils/useSlot.d.ts

@@ -70,6 +70,14 @@ name: T, parameters: (T extends 'root' ? {
      * e.g. Autocomplete's listbox uses Popper + StyledComponent
      */
     internalForwardedProps?: any;
+    /**
+     * Set to true if the `elementType` is a styled component of another Material UI component.
+     *
+     * For example, the AlertRoot is a styled component of the Paper component.
+     * This flag is used to forward the `component` and `slotProps.root.component` to the Paper component.
+     * Otherwise, the `component` prop will be converted to `as` prop which replaces the Paper component (the paper styles are gone).
+     */
+    shouldForwardComponentProp?: boolean;
 }): [ElementType, {
     className: string;
     ownerState: OwnerState & SlotOwnerState;

package/utils/useSlot.js

@@ -32,6 +32,7 @@ name, parameters) {
     ownerState,
     externalForwardedProps,
     internalForwardedProps,
+    shouldForwardComponentProp = false,
     ...useSlotPropsParams
   } = parameters;
   const {
@@ -67,9 +68,12 @@ name, parameters) {
     ...(name === 'root' && !rootComponent && !slots[name] && internalForwardedProps),
     ...(name !== 'root' && !slots[name] && internalForwardedProps),
     ...mergedProps,
-    ...(LeafComponent && {
+    ...(LeafComponent && !shouldForwardComponentProp && {
       as: LeafComponent
     }),
+    ...(LeafComponent && shouldForwardComponentProp && {
+      component: LeafComponent
+    }),
     ref
   }, ownerState);
   return [elementType, props];

package/version/index.js

@@ -1,6 +1,6 @@
-export const version = "6.3.1";
+export const version = "6.4.0";
 export const major = Number("6");
-export const minor = Number("3");
-export const patch = Number("1");
+export const minor = Number("4");
+export const patch = Number("0");
 export const prerelease = undefined;
 export default version;