@mui/material 5.2.4 → 5.2.8

package/Autocomplete/Autocomplete.js

@@ -705,7 +705,9 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    clearIndicator: 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

@@ -30,6 +30,26 @@ export type BadgeTypeMap<
       colorSuccess?: string;
       /** 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;
+      /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangular"`. */
+      anchorOriginBottomRightRectangular?: string;
+      /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangular"`. */
+      anchorOriginTopLeftRectangular?: string;
+      /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangular"`. */
+      anchorOriginBottomLeftRectangular?: string;
+      /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }} overlap="circular"`. */
+      anchorOriginTopRightCircular?: string;
+      /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circular"`. */
+      anchorOriginBottomRightCircular?: string;
+      /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }} overlap="circular"`. */
+      anchorOriginTopLeftCircular?: string;
+      /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circular"`. */
+      anchorOriginBottomLeftCircular?: string;
+      /** Class name applied to the badge `span` element if `overlap="rectangular"`. */
+      overlapRectangular?: string;
+      /** Class name applied to the badge `span` element if `overlap="circular"`. */
+      overlapCircular?: string;
     };
     /**
      * The color of the component. It supports those theme colors that make sense for this component.
@@ -39,6 +59,11 @@ export type BadgeTypeMap<
       'primary' | 'secondary' | 'default' | 'error' | 'info' | 'success' | 'warning',
       BadgePropsColorOverrides
     >;
+    /**
+     * Wrapped shape the badge should overlap.
+     * @default 'rectangular'
+     */
+    overlap?: 'rectangular' | 'circular';
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */

package/Badge/Badge.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["component", "components", "componentsProps", "color", "invisible", "badgeContent", "showZero", "variant"];
+const _excluded = ["anchorOrigin", "component", "components", "componentsProps", "overlap", "color", "invisible", "badgeContent", "showZero", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -11,17 +11,20 @@ import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 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']));
+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
+'anchorOriginTopLeftCircular', 'anchorOriginTopLeftRectangular', 'anchorOriginTopRightCircular', 'anchorOriginTopRightRectangular', 'anchorOriginBottomLeftCircular', 'anchorOriginBottomLeftRectangular', 'anchorOriginBottomRightCircular', 'anchorOriginBottomRightRectangular']));
 const RADIUS_STANDARD = 10;
 const RADIUS_DOT = 4;
 
 const extendUtilityClasses = ownerState => {
   const {
     color,
+    anchorOrigin,
+    overlap,
     classes = {}
   } = ownerState;
   return _extends({}, classes, {
-    badge: clsx(classes.badge, color !== 'default' && [getBadgeUtilityClass(`color${capitalize(color)}`), classes[`color${capitalize(color)}`]])
+    badge: clsx(classes.badge, getBadgeUtilityClass(`anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}${capitalize(overlap)}`), getBadgeUtilityClass(`overlap${capitalize(overlap)}`), color !== 'default' && [getBadgeUtilityClass(`color${capitalize(color)}`), classes[`color${capitalize(color)}`]])
   });
 };
 
@@ -163,9 +166,14 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   });
 
   const {
+    anchorOrigin: anchorOriginProp = {
+      vertical: 'top',
+      horizontal: 'right'
+    },
     component = 'span',
     components = {},
     componentsProps = {},
+    overlap: overlapProp = 'rectangular',
     color: colorProp = 'default',
     invisible: invisibleProp,
     badgeContent: badgeContentProp,
@@ -175,7 +183,9 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const prevProps = usePreviousProps({
-    color: colorProp
+    anchorOrigin: anchorOriginProp,
+    color: colorProp,
+    overlap: overlapProp
   });
   let invisible = invisibleProp;
 
@@ -184,16 +194,21 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   }
 
   const {
-    color = colorProp
+    color = colorProp,
+    overlap = overlapProp,
+    anchorOrigin = anchorOriginProp
   } = invisible ? prevProps : props;
 
   const ownerState = _extends({}, props, {
+    anchorOrigin,
     invisible,
-    color
+    color,
+    overlap
   });
 
   const classes = extendUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(BadgeUnstyled, _extends({
+    anchorOrigin: anchorOrigin,
     invisible: invisibleProp,
     badgeContent: badgeContentProp,
     showZero: showZero,
@@ -207,12 +222,14 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
       root: _extends({}, componentsProps.root, shouldSpreadAdditionalProps(components.Root) && {
         as: component,
         ownerState: _extends({}, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState, {
-          color
+          color,
+          overlap
         })
       }),
       badge: _extends({}, componentsProps.badge, shouldSpreadAdditionalProps(components.Badge) && {
         ownerState: _extends({}, (_componentsProps$badg = componentsProps.badge) == null ? void 0 : _componentsProps$badg.ownerState, {
-          color
+          color,
+          overlap
         })
       })
     },
@@ -283,7 +300,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/ButtonGroup/ButtonGroupContext.d.ts

@@ -4,7 +4,7 @@ interface IButtonGroupContext {
     className?: string;
     color?: ButtonGroupProps['color'];
     disabled?: boolean;
-    disabledElevation?: boolean;
+    disableElevation?: boolean;
     disableFocusRipple?: boolean;
     disableRipple?: boolean;
     fullWidth?: boolean;