@mui/material 5.2.8 → 5.4.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.
@@ -187,6 +189,11 @@ export interface AutocompleteProps<
    * @default <ArrowDropDownIcon />
    */
   popupIcon?: React.ReactNode;
+  /**
+   * If `true`, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted.
+   * @default false
+   */
+  readOnly?: boolean;
   /**
    * Render the group.
    *

package/Autocomplete/Autocomplete.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 
 var _ClearIcon, _ArrowDropDownIcon;
 
-const _excluded = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "value"];
+const _excluded = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "value"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -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,
@@ -404,6 +404,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     PaperComponent = Paper,
     PopperComponent = Popper,
     popupIcon = _ArrowDropDownIcon || (_ArrowDropDownIcon = /*#__PURE__*/_jsx(ArrowDropDownIcon, {})),
+    readOnly = false,
     renderGroup: renderGroupProp,
     renderInput,
     renderOption: renderOptionProp,
@@ -437,7 +438,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   } = useAutocomplete(_extends({}, props, {
     componentName: 'Autocomplete'
   }));
-  const hasClearIcon = !disableClearable && !disabled && dirty;
+  const hasClearIcon = !disableClearable && !disabled && dirty && !readOnly;
   const hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;
 
   const ownerState = _extends({}, props, {
@@ -556,7 +557,8 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
         },
         inputProps: _extends({
           className: clsx(classes.input),
-          disabled
+          disabled,
+          readOnly
         }, getInputProps())
       })
     })), popupOpen && anchorEl ? /*#__PURE__*/_jsx(AutocompletePopper, {
@@ -570,10 +572,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 +607,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
             return renderListOption(option, index);
           })
         })) : null]
-      })
+      }))
     }) : null]
   });
 });
@@ -674,7 +677,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,
@@ -706,7 +709,8 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @default {}
    */
   componentsProps: PropTypes.shape({
-    clearIndicator: PropTypes.object
+    clearIndicator: PropTypes.object,
+    paper: PropTypes.object
   }),
 
   /**
@@ -995,6 +999,12 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    */
   popupIcon: PropTypes.node,
 
+  /**
+   * If `true`, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted.
+   * @default false
+   */
+  readOnly: PropTypes.bool,
+
   /**
    * Render the group.
    *

package/AvatarGroup/AvatarGroup.d.ts

@@ -3,9 +3,11 @@ import { InternalStandardProps as StandardProps, Theme } from '@mui/material';
 import { OverridableStringUnion } from '@mui/types';
 import { SxProps } from '@mui/system';
 import { AvatarGroupClasses } from './avatarGroupClasses';
+import Avatar from '../Avatar';
 
 export interface AvatarGroupPropsVariantOverrides {}
 
+export interface AvatarGroupComponentsPropsOverrides {}
 export interface AvatarGroupProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
   /**
    * The avatars to stack.
@@ -15,6 +17,14 @@ export interface AvatarGroupProps extends StandardProps<React.HTMLAttributes<HTM
    * Override or extend the styles applied to the component.
    */
   classes?: Partial<AvatarGroupClasses>;
+  /**
+   * The props used for each slot inside the AvatarGroup.
+   * @default {}
+   */
+  componentsProps?: {
+    additionalAvatar?: React.ComponentPropsWithRef<typeof Avatar> &
+      AvatarGroupComponentsPropsOverrides;
+  };
   /**
    * Max avatars to show before +x.
    * @default 5

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", "total", "variant"];
+const _excluded = ["children", "className", "componentsProps", "max", "spacing", "total", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { isFragment } from 'react-is';
@@ -63,6 +63,8 @@ const AvatarGroupAvatar = styled(Avatar, {
   }
 }));
 const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, ref) {
+  var _componentsProps$addi, _componentsProps$addi2;
+
   const props = useThemeProps({
     props: inProps,
     name: 'MuiAvatarGroup'
@@ -71,6 +73,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
   const {
     children: childrenProp,
     className,
+    componentsProps = {},
     max = 5,
     spacing = 'medium',
     total,
@@ -111,15 +114,16 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     className: clsx(classes.root, className),
     ref: ref
   }, other, {
-    children: [extraAvatars ? /*#__PURE__*/_jsxs(AvatarGroupAvatar, {
+    children: [extraAvatars ? /*#__PURE__*/_jsxs(AvatarGroupAvatar, _extends({
       ownerState: ownerState,
-      className: classes.avatar,
-      style: {
+      variant: variant
+    }, componentsProps.additionalAvatar, {
+      className: clsx(classes.avatar, (_componentsProps$addi = componentsProps.additionalAvatar) == null ? void 0 : _componentsProps$addi.className),
+      style: _extends({
         marginLeft
-      },
-      variant: variant,
+      }, (_componentsProps$addi2 = componentsProps.additionalAvatar) == null ? void 0 : _componentsProps$addi2.style),
       children: ["+", extraAvatars]
-    }) : null, children.slice(0, maxAvatars).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({
@@ -153,6 +157,14 @@ process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes
    */
   className: PropTypes.string,
 
+  /**
+   * The props used for each slot inside the AvatarGroup.
+   * @default {}
+   */
+  componentsProps: PropTypes.shape({
+    additionalAvatar: PropTypes.object
+  }),
+
   /**
    * Max avatars to show before +x.
    * @default 5

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;
 
@@ -175,7 +171,7 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
     componentsProps = {},
     overlap: overlapProp = 'rectangular',
     color: colorProp = 'default',
-    invisible: invisibleProp,
+    invisible: invisibleProp = false,
     badgeContent: badgeContentProp,
     showZero = false,
     variant: variantProp = 'standard'
@@ -189,7 +185,7 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   });
   let invisible = invisibleProp;
 
-  if (invisibleProp == null && (badgeContentProp === 0 && !showZero || badgeContentProp == null && variantProp !== 'dot')) {
+  if (invisibleProp === false && (badgeContentProp === 0 && !showZero || badgeContentProp == null && variantProp !== 'dot')) {
     invisible = true;
   }
 
@@ -307,6 +303,7 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
 
   /**
    * If `true`, the badge is invisible.
+   * @default false
    */
   invisible: PropTypes.bool,
 

package/Breadcrumbs/BreadcrumbCollapsed.js

@@ -6,9 +6,7 @@ import styled from '../styles/styled';
 import MoreHorizIcon from '../internal/svg-icons/MoreHoriz';
 import ButtonBase from '../ButtonBase';
 import { jsx as _jsx } from "react/jsx-runtime";
-const BreadcrumbCollapsedButton = styled(ButtonBase, {
-  skipSx: true
-})(({
+const BreadcrumbCollapsedButton = styled(ButtonBase)(({
   theme
 }) => _extends({
   display: 'flex',

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;

package/ButtonBase/ButtonBase.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { Theme } from '../styles';
-import { TouchRippleProps } from './TouchRipple';
+import { TouchRippleActions, TouchRippleProps } from './TouchRipple';
 import { OverrideProps, OverridableComponent, OverridableTypeMap } from '../OverridableComponent';
 import { ButtonBaseClasses } from './buttonBaseClasses';
 
@@ -80,6 +80,10 @@ export interface ButtonBaseTypeMap<P = {}, D extends React.ElementType = 'button
      * Props applied to the `TouchRipple` element.
      */
     TouchRippleProps?: Partial<TouchRippleProps>;
+    /**
+     * A ref that points to the `TouchRippple` element.
+     */
+    touchRippleRef?: React.Ref<TouchRippleActions>;
   };
   defaultComponent: D;
 }

package/ButtonBase/ButtonBase.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "type"];
+const _excluded = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -118,12 +118,14 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     onTouchStart,
     tabIndex = 0,
     TouchRippleProps,
+    touchRippleRef,
     type
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const buttonRef = React.useRef(null);
   const rippleRef = React.useRef(null);
+  const handleRippleRef = useForkRef(rippleRef, touchRippleRef);
   const {
     isFocusVisibleRef,
     onFocus: handleFocusVisible,
@@ -343,7 +345,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
 
     /* TouchRipple is only needed client-side, x2 boost on the server. */
     _jsx(TouchRipple, _extends({
-      ref: rippleRef,
+      ref: handleRippleRef,
       center: centerRipple
     }, TouchRippleProps)) : null]
   }));
@@ -526,6 +528,17 @@ process.env.NODE_ENV !== "production" ? ButtonBase.propTypes
    */
   TouchRippleProps: PropTypes.object,
 
+  /**
+   * A ref that points to the `TouchRippple` element.
+   */
+  touchRippleRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      pulsate: PropTypes.func.isRequired,
+      start: PropTypes.func.isRequired,
+      stop: PropTypes.func.isRequired
+    })
+  })]),
+
   /**
    * @ignore
    */

package/ButtonBase/TouchRipple.js

@@ -55,8 +55,7 @@ const pulsateKeyframe = keyframes(_t3 || (_t3 = _`
 `));
 export const TouchRippleRoot = styled('span', {
   name: 'MuiTouchRipple',
-  slot: 'Root',
-  skipSx: true
+  slot: 'Root'
 })({
   overflow: 'hidden',
   pointerEvents: 'none',