@mui/material 5.2.6 → 5.3.1

package/Autocomplete/Autocomplete.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { IconButtonProps, InternalStandardProps as StandardProps, Theme } from '@mui/material';
 import { ChipProps, ChipTypeMap } from '@mui/material/Chip';
+import { PaperProps } from '@mui/material/Paper';
 import { PopperProps } from '@mui/material/Popper';
 import { SxProps } from '@mui/system';
 import { OverridableStringUnion } from '@mui/types';
@@ -101,6 +102,7 @@ export interface AutocompleteProps<
    */
   componentsProps?: {
     clearIndicator?: Partial<IconButtonProps>;
+    paper?: PaperProps;
   };
   /**
    * If `true`, the component is disabled.

package/Autocomplete/Autocomplete.js

@@ -349,7 +349,7 @@ const AutocompleteGroupUl = styled('ul', {
 });
 export { createFilterOptions };
 const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps, ref) {
-  var _componentsProps$clea;
+  var _componentsProps$clea, _componentsProps$pape;
 
   const props = useThemeProps({
     props: inProps,
@@ -570,10 +570,11 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       role: "presentation",
       anchorEl: anchorEl,
       open: true,
-      children: /*#__PURE__*/_jsxs(AutocompletePaper, {
-        as: PaperComponent,
-        className: classes.paper,
+      children: /*#__PURE__*/_jsxs(AutocompletePaper, _extends({
         ownerState: ownerState,
+        as: PaperComponent
+      }, componentsProps.paper, {
+        className: clsx(classes.paper, (_componentsProps$pape = componentsProps.paper) == null ? void 0 : _componentsProps$pape.className),
         children: [loading && groupedOptions.length === 0 ? /*#__PURE__*/_jsx(AutocompleteLoading, {
           className: classes.loading,
           ownerState: ownerState,
@@ -604,7 +605,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
             return renderListOption(option, index);
           })
         })) : null]
-      })
+      }))
     }) : null]
   });
 });
@@ -674,7 +675,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * If `true`, the input's text is cleared on blur if no value is selected.
    *
    * Set to `true` if you want to help the user enter a new value.
-   * Set to `false` if you want to help the user resume his search.
+   * Set to `false` if you want to help the user resume their search.
    * @default !props.freeSolo
    */
   clearOnBlur: PropTypes.bool,
@@ -705,7 +706,10 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    clearIndicator: PropTypes.object,
+    paper: PropTypes.object
+  }),
 
   /**
    * The default value. Use when the component is not controlled.

package/Avatar/Avatar.d.ts

@@ -27,7 +27,9 @@ export interface AvatarTypeMap<P = {}, D extends React.ElementType = 'div'> {
      * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) applied to the `img` element if the component is used to display an image.
      * It can be used to listen for the loading error event.
      */
-    imgProps?: React.ImgHTMLAttributes<HTMLImageElement>;
+    imgProps?: React.ImgHTMLAttributes<HTMLImageElement> & {
+      sx?: SxProps<Theme>;
+    };
     /**
      * The `sizes` attribute for the `img` element.
      */

package/Backdrop/Backdrop.js

@@ -126,7 +126,9 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes
    * The props used for each slot inside the Backdrop.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    root: PropTypes.object
+  }),
 
   /**
    * If `true`, the backdrop is invisible.

package/Badge/Badge.d.ts

@@ -31,25 +31,25 @@ export type BadgeTypeMap<
       /** Styles applied to the badge `span` element if `color="warning"`. */
       colorWarning?: string;
       /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangular"`. */
-      anchorOriginTopRightRectangular: string;
+      anchorOriginTopRightRectangular?: string;
       /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangular"`. */
-      anchorOriginBottomRightRectangular: string;
+      anchorOriginBottomRightRectangular?: string;
       /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangular"`. */
-      anchorOriginTopLeftRectangular: string;
+      anchorOriginTopLeftRectangular?: string;
       /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangular"`. */
-      anchorOriginBottomLeftRectangular: string;
+      anchorOriginBottomLeftRectangular?: string;
       /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }} overlap="circular"`. */
-      anchorOriginTopRightCircular: string;
+      anchorOriginTopRightCircular?: string;
       /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circular"`. */
-      anchorOriginBottomRightCircular: string;
+      anchorOriginBottomRightCircular?: string;
       /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }} overlap="circular"`. */
-      anchorOriginTopLeftCircular: string;
+      anchorOriginTopLeftCircular?: string;
       /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circular"`. */
-      anchorOriginBottomLeftCircular: string;
+      anchorOriginBottomLeftCircular?: string;
       /** Class name applied to the badge `span` element if `overlap="rectangular"`. */
-      overlapRectangular: string;
+      overlapRectangular?: string;
       /** Class name applied to the badge `span` element if `overlap="circular"`. */
-      overlapCircular: string;
+      overlapCircular?: string;
     };
     /**
      * The color of the component. It supports those theme colors that make sense for this component.

package/Badge/Badge.js

@@ -5,10 +5,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { usePreviousProps } from '@mui/utils';
-import { generateUtilityClasses, isHostComponent } from '@mui/base';
+import { generateUtilityClasses } from '@mui/base';
 import BadgeUnstyled, { badgeUnstyledClasses, getBadgeUtilityClass } from '@mui/base/BadgeUnstyled';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
+import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps';
 import capitalize from '../utils/capitalize';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const badgeClasses = _extends({}, badgeUnstyledClasses, generateUtilityClasses('MuiBadge', ['colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'overlapRectangular', 'overlapCircular', // TODO: v6 remove the overlap value from these class keys
@@ -152,11 +153,6 @@ const BadgeBadge = styled('span', {
     duration: theme.transitions.duration.leavingScreen
   })
 }));
-
-const shouldSpreadAdditionalProps = Slot => {
-  return !Slot || !isHostComponent(Slot);
-};
-
 const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   var _componentsProps$root, _componentsProps$badg;
 
@@ -300,7 +296,10 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
    * The props used for each slot inside the Badge.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    badge: PropTypes.object,
+    root: PropTypes.object
+  }),
 
   /**
    * If `true`, the badge is invisible.

package/Button/buttonClasses.d.ts

@@ -47,7 +47,7 @@ export interface ButtonClasses {
     outlinedSizeLarge: string;
     /** Styles applied to the root element if `size="small"` and `variant="contained"`. */
     containedSizeSmall: string;
-    /** Styles applied to the root element if `size="small"` and `variant="contained"`. */
+    /** Styles applied to the root element if `size="medium"` and `variant="contained"`. */
     containedSizeMedium: string;
     /** Styles applied to the root element if `size="large"` and `variant="contained"`. */
     containedSizeLarge: string;