@mui/material 5.2.2 → 5.2.6

package/Accordion/Accordion.d.ts

@@ -55,7 +55,7 @@ export interface AccordionProps extends StandardProps<PaperProps, 'onChange'> {
   >;
   /**
    * Props applied to the transition element.
-   * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition) component.
+   * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
    */
   TransitionProps?: TransitionProps;
 }

package/Accordion/Accordion.js

@@ -261,7 +261,7 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
 
   /**
    * The component used for the transition.
@@ -272,7 +272,7 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes
 
   /**
    * Props applied to the transition element.
-   * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition) component.
+   * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
    */
   TransitionProps: PropTypes.object
 } : void 0;

package/AccordionActions/AccordionActions.js

@@ -97,6 +97,6 @@ process.env.NODE_ENV !== "production" ? AccordionActions.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default AccordionActions;

package/AccordionDetails/AccordionDetails.js

@@ -74,6 +74,6 @@ process.env.NODE_ENV !== "production" ? AccordionDetails.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default AccordionDetails;

package/AccordionSummary/AccordionSummary.js

@@ -190,7 +190,7 @@ process.env.NODE_ENV !== "production" ? AccordionSummary.propTypes
    * This prop can help identify which element has keyboard focus.
    * The class name will be applied when the element gains the focus through keyboard interaction.
    * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
-   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/master/explainer.md).
+   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
    * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
    * if needed.
    */
@@ -204,6 +204,6 @@ process.env.NODE_ENV !== "production" ? AccordionSummary.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default AccordionSummary;

package/Alert/Alert.js

@@ -56,7 +56,6 @@ const AlertRoot = styled(Paper, {
   const getBackgroundColor = theme.palette.mode === 'light' ? lighten : darken;
   const color = ownerState.color || ownerState.severity;
   return _extends({}, theme.typography.body2, {
-    borderRadius: theme.shape.borderRadius,
     backgroundColor: 'transparent',
     display: 'flex',
     padding: '6px 16px'
@@ -151,7 +150,6 @@ const Alert = /*#__PURE__*/React.forwardRef(function Alert(inProps, ref) {
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsxs(AlertRoot, _extends({
     role: role,
-    square: true,
     elevation: 0,
     ownerState: ownerState,
     className: clsx(classes.root, className),
@@ -269,7 +267,7 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
 
   /**
    * The variant to use.

package/AlertTitle/AlertTitle.js

@@ -80,6 +80,6 @@ process.env.NODE_ENV !== "production" ? AlertTitle.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default AlertTitle;

package/AppBar/AppBar.js

@@ -168,6 +168,6 @@ process.env.NODE_ENV !== "production" ? AppBar.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default AppBar;

package/Autocomplete/Autocomplete.js

@@ -1046,7 +1046,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
 
   /**
    * The value of the autocomplete.

package/Avatar/Avatar.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { Theme } from '@mui/material/styles';
 import { OverridableStringUnion } from '@mui/types';
+import { Theme } from '../styles';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { AvatarClasses } from './avatarClasses';
 

package/Avatar/Avatar.js

@@ -255,7 +255,7 @@ process.env.NODE_ENV !== "production" ? Avatar.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
 
   /**
    * The shape of the avatar.

package/AvatarGroup/AvatarGroup.d.ts

@@ -29,6 +29,11 @@ export interface AvatarGroupProps extends StandardProps<React.HTMLAttributes<HTM
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx?: SxProps<Theme>;
+  /**
+   * The total number of avatars. Used for calculating the number of extra avatars.
+   * @default children.length
+   */
+  total?: number;
   /**
    * The variant to use.
    * @default 'circular'

package/AvatarGroup/AvatarGroup.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className", "max", "spacing", "variant"];
+const _excluded = ["children", "className", "max", "spacing", "total", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { isFragment } from 'react-is';
@@ -73,11 +73,12 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     className,
     max = 5,
     spacing = 'medium',
+    total,
     variant = 'circular'
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
-  const clampedMax = max < 2 ? 2 : max;
+  let clampedMax = max < 2 ? 2 : max;
 
   const ownerState = _extends({}, props, {
     max,
@@ -95,7 +96,15 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
 
     return /*#__PURE__*/React.isValidElement(child);
   });
-  const extraAvatars = children.length > clampedMax ? children.length - clampedMax + 1 : 0;
+  const totalAvatars = total || children.length;
+
+  if (totalAvatars === clampedMax) {
+    clampedMax += 1;
+  }
+
+  clampedMax = Math.min(totalAvatars + 1, clampedMax);
+  const maxAvatars = Math.min(children.length, clampedMax - 1);
+  const extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
   const marginLeft = spacing && SPACINGS[spacing] !== undefined ? SPACINGS[spacing] : -spacing;
   return /*#__PURE__*/_jsxs(AvatarGroupRoot, _extends({
     ownerState: ownerState,
@@ -110,7 +119,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
       },
       variant: variant,
       children: ["+", extraAvatars]
-    }) : null, children.slice(0, children.length - extraAvatars).reverse().map(child => {
+    }) : null, children.slice(0, maxAvatars).reverse().map(child => {
       return /*#__PURE__*/React.cloneElement(child, {
         className: clsx(child.props.className, classes.avatar),
         style: _extends({
@@ -165,7 +174,13 @@ process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+
+  /**
+   * The total number of avatars. Used for calculating the number of extra avatars.
+   * @default children.length
+   */
+  total: PropTypes.number,
 
   /**
    * The variant to use.

package/Backdrop/Backdrop.js

@@ -143,7 +143,7 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
 
   /**
    * The duration for the transition, in milliseconds.

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 = ["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)}`]])
   });
 };
 
@@ -149,6 +152,11 @@ 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;
 
@@ -158,8 +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,
@@ -169,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;
 
@@ -178,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,
@@ -198,14 +219,17 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
       Badge: BadgeBadge
     }, components),
     componentsProps: {
-      root: _extends({}, componentsProps.root, (!components.Root || !isHostComponent(components.Root)) && {
+      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, (!components.Thumb || !isHostComponent(components.Thumb)) && {
+      badge: _extends({}, componentsProps.badge, shouldSpreadAdditionalProps(components.Badge) && {
         ownerState: _extends({}, (_componentsProps$badg = componentsProps.badge) == null ? void 0 : _componentsProps$badg.ownerState, {
-          color
+          color,
+          overlap
         })
       })
     },
@@ -256,6 +280,12 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
   /* @typescript-to-proptypes-ignore */
   .oneOfType([PropTypes.oneOf(['default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
 
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+
   /**
    * The components used for each slot inside the Badge.
    * Either a string to use a HTML element or a component.
@@ -298,7 +328,7 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
 
   /**
    * The variant to use.

package/BottomNavigation/BottomNavigation.js

@@ -129,7 +129,7 @@ process.env.NODE_ENV !== "production" ? BottomNavigation.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
 
   /**
    * The value of the currently selected `BottomNavigationAction`.

package/BottomNavigationAction/BottomNavigationAction.js

@@ -176,7 +176,7 @@ process.env.NODE_ENV !== "production" ? BottomNavigationAction.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
 
   /**
    * You can provide your own value. Otherwise, we fallback to the child position index.

package/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { Theme } from '@mui/material/styles';
+import { Theme } from '../styles';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { BreadcrumbsClasses } from './breadcrumbsClasses';
 

package/Breadcrumbs/Breadcrumbs.js

@@ -232,6 +232,6 @@ process.env.NODE_ENV !== "production" ? Breadcrumbs.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default Breadcrumbs;

package/Button/Button.js

@@ -1,9 +1,10 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className", "color", "component", "disabled", "disableElevation", "disableFocusRipple", "disableRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
+const _excluded = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { internal_resolveProps as resolveProps } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { alpha } from '@mui/system';
 import styled, { rootShouldForwardProp } from '../styles/styled';
@@ -214,51 +215,32 @@ const ButtonEndIcon = styled('span', {
   marginRight: -2
 }, commonIconStyles(ownerState)));
 const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
+  // props priority: `inProps` > `contextProps` > `themeDefaultProps`
+  const contextProps = React.useContext(ButtonGroupContext);
+  const resolvedProps = resolveProps(contextProps, inProps);
   const props = useThemeProps({
-    props: inProps,
+    props: resolvedProps,
     name: 'MuiButton'
   });
-  const {
-    className: classNameContext,
-    color: colorContext,
-    disabled: disabledContext,
-    disableElevation: disableElevationContext,
-    disableFocusRipple: disableFocusRippleContext,
-    disableRipple: disableRippleContext,
-    fullWidth: fullWidthContext,
-    size: sizeContext,
-    variant: variantContext
-  } = React.useContext(ButtonGroupContext);
 
   const {
     children,
-    className,
-    color: colorProp,
+    color = 'primary',
     component = 'button',
-    disabled: disabledProp,
-    disableElevation: disableElevationProp,
-    disableFocusRipple: disableFocusRippleProp,
-    disableRipple: disableRippleProp,
+    className,
+    disabled = false,
+    disableElevation = false,
+    disableFocusRipple = false,
     endIcon: endIconProp,
     focusVisibleClassName,
-    fullWidth: fullWidthProp,
-    size: sizeProp,
+    fullWidth = false,
+    size = 'medium',
     startIcon: startIconProp,
     type,
-    variant: variantProp
+    variant = 'text'
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
-  const color = colorProp || colorContext || 'primary'; // TODO v6: Use nullish coalescing (??) instead of OR operator for these boolean props so that these boolean props for Button with ButtonGroup context take priority. See conversation from https://github.com/mui-org/material-ui/pull/28645#discussion_r738380902.
-
-  const disabled = disabledProp || disabledContext || false;
-  const disableElevation = disableElevationProp || disableElevationContext || false;
-  const disableFocusRipple = disableFocusRippleProp || disableFocusRippleContext || false;
-  const fullWidth = fullWidthProp || fullWidthContext || false;
-  const size = sizeProp || sizeContext || 'medium';
-  const variant = variantProp || variantContext || 'text';
-  const disableRipple = disableRippleProp || disableRippleContext || false;
-
   const ownerState = _extends({}, props, {
     color,
     component,
@@ -287,10 +269,9 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
 
   return /*#__PURE__*/_jsxs(ButtonRoot, _extends({
     ownerState: ownerState,
-    className: clsx(className, classNameContext),
+    className: clsx(className, contextProps.className),
     component: component,
     disabled: disabled,
-    disableRipple: disableRipple,
     focusRipple: !disableFocusRipple,
     focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
     ref: ref,
@@ -403,7 +384,7 @@ process.env.NODE_ENV !== "production" ? Button.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
 
   /**
    * @ignore

package/ButtonBase/ButtonBase.d.ts

@@ -53,7 +53,7 @@ export interface ButtonBaseTypeMap<P = {}, D extends React.ElementType = 'button
      * This prop can help identify which element has keyboard focus.
      * The class name will be applied when the element gains the focus through keyboard interaction.
      * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
-     * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/master/explainer.md).
+     * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
      * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
      * if needed.
      */

package/ButtonBase/ButtonBase.js

@@ -421,7 +421,7 @@ process.env.NODE_ENV !== "production" ? ButtonBase.propTypes
    * This prop can help identify which element has keyboard focus.
    * The class name will be applied when the element gains the focus through keyboard interaction.
    * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
-   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/master/explainer.md).
+   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
    * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
    * if needed.
    */
@@ -514,7 +514,7 @@ process.env.NODE_ENV !== "production" ? ButtonBase.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
 
   /**
    * @default 0

package/ButtonGroup/ButtonGroup.js

@@ -266,7 +266,7 @@ process.env.NODE_ENV !== "production" ? ButtonGroup.propTypes
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])), PropTypes.func, PropTypes.object]),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
 
   /**
    * The variant to use.

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;