@mui/material 5.2.5 → 5.3.0

package/TextField/TextField.d.ts

@@ -83,6 +83,7 @@ export interface BaseTextFieldProps
   id?: string;
   /**
    * Props applied to the [`InputLabel`](/api/input-label/) element.
+   * Pointer events like `onClick` are enabled if and only if `shrink` is `true`.
    */
   InputLabelProps?: Partial<InputLabelProps>;
   /**

package/TextField/TextField.js

@@ -296,6 +296,7 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes
 
   /**
    * Props applied to the [`InputLabel`](/api/input-label/) element.
+   * Pointer events like `onClick` are enabled if and only if `shrink` is `true`.
    */
   InputLabelProps: PropTypes.object,
 

package/Tooltip/Tooltip.js

@@ -681,7 +681,12 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes
    * and `componentsProps.transition` prop values win over `TransitionProps` if both are applied.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    arrow: PropTypes.object,
+    popper: PropTypes.object,
+    tooltip: PropTypes.object,
+    transition: PropTypes.object
+  }),
 
   /**
    * Set to `true` if the `title` acts as an accessible description.

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.2.5
+/** @license MUI v5.3.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/Autocomplete/Autocomplete.js

@@ -316,7 +316,7 @@ var AutocompleteGroupUl = styled('ul', {
 }));
 export { createFilterOptions };
 var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps, ref) {
-  var _componentsProps$clea;
+  var _componentsProps$clea, _componentsProps$pape;
 
   var props = useThemeProps({
     props: inProps,
@@ -596,10 +596,11 @@ var 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,
@@ -632,7 +633,7 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
             return renderListOption(option, index);
           })
         })) : null]
-      })
+      }))
     }) : null]
   });
 });
@@ -733,7 +734,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/legacy/Backdrop/Backdrop.js

@@ -123,7 +123,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/legacy/Badge/Badge.js

@@ -5,22 +5,26 @@ 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 var badgeClasses = _extends({}, badgeUnstyledClasses, generateUtilityClasses('MuiBadge', ['colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning']));
+export var 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']));
 var RADIUS_STANDARD = 10;
 var RADIUS_DOT = 4;
 
 var extendUtilityClasses = function extendUtilityClasses(ownerState) {
   var color = ownerState.color,
+      anchorOrigin = ownerState.anchorOrigin,
+      overlap = ownerState.overlap,
       _ownerState$classes = ownerState.classes,
       classes = _ownerState$classes === void 0 ? {} : _ownerState$classes;
   return _extends({}, classes, {
-    badge: clsx(classes.badge, color !== 'default' && [getBadgeUtilityClass("color".concat(capitalize(color))), classes["color".concat(capitalize(color))]])
+    badge: clsx(classes.badge, getBadgeUtilityClass("anchorOrigin".concat(capitalize(anchorOrigin.vertical)).concat(capitalize(anchorOrigin.horizontal)).concat(capitalize(overlap))), getBadgeUtilityClass("overlap".concat(capitalize(overlap))), color !== 'default' && [getBadgeUtilityClass("color".concat(capitalize(color))), classes["color".concat(capitalize(color))]])
   });
 };
 
@@ -141,11 +145,6 @@ var BadgeBadge = styled('span', {
     })
   });
 });
-
-var shouldSpreadAdditionalProps = function shouldSpreadAdditionalProps(Slot) {
-  return !Slot || !isHostComponent(Slot);
-};
-
 var Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   var _componentsProps$root, _componentsProps$badg;
 
@@ -154,12 +153,19 @@ var Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
     name: 'MuiBadge'
   });
 
-  var _props$component = props.component,
+  var _props$anchorOrigin = props.anchorOrigin,
+      anchorOriginProp = _props$anchorOrigin === void 0 ? {
+    vertical: 'top',
+    horizontal: 'right'
+  } : _props$anchorOrigin,
+      _props$component = props.component,
       component = _props$component === void 0 ? 'span' : _props$component,
       _props$components = props.components,
       components = _props$components === void 0 ? {} : _props$components,
       _props$componentsProp = props.componentsProps,
       componentsProps = _props$componentsProp === void 0 ? {} : _props$componentsProp,
+      _props$overlap = props.overlap,
+      overlapProp = _props$overlap === void 0 ? 'rectangular' : _props$overlap,
       _props$color = props.color,
       colorProp = _props$color === void 0 ? 'default' : _props$color,
       invisibleProp = props.invisible,
@@ -168,10 +174,12 @@ var Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
       showZero = _props$showZero === void 0 ? false : _props$showZero,
       _props$variant = props.variant,
       variantProp = _props$variant === void 0 ? 'standard' : _props$variant,
-      other = _objectWithoutProperties(props, ["component", "components", "componentsProps", "color", "invisible", "badgeContent", "showZero", "variant"]);
+      other = _objectWithoutProperties(props, ["anchorOrigin", "component", "components", "componentsProps", "overlap", "color", "invisible", "badgeContent", "showZero", "variant"]);
 
   var prevProps = usePreviousProps({
-    color: colorProp
+    anchorOrigin: anchorOriginProp,
+    color: colorProp,
+    overlap: overlapProp
   });
   var invisible = invisibleProp;
 
@@ -181,15 +189,22 @@ var Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
 
   var _ref10 = invisible ? prevProps : props,
       _ref10$color = _ref10.color,
-      color = _ref10$color === void 0 ? colorProp : _ref10$color;
+      color = _ref10$color === void 0 ? colorProp : _ref10$color,
+      _ref10$overlap = _ref10.overlap,
+      overlap = _ref10$overlap === void 0 ? overlapProp : _ref10$overlap,
+      _ref10$anchorOrigin = _ref10.anchorOrigin,
+      anchorOrigin = _ref10$anchorOrigin === void 0 ? anchorOriginProp : _ref10$anchorOrigin;
 
   var ownerState = _extends({}, props, {
+    anchorOrigin: anchorOrigin,
     invisible: invisible,
-    color: color
+    color: color,
+    overlap: overlap
   });
 
   var classes = extendUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(BadgeUnstyled, _extends({
+    anchorOrigin: anchorOrigin,
     invisible: invisibleProp,
     badgeContent: badgeContentProp,
     showZero: showZero,
@@ -203,12 +218,14 @@ var 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
+          color: color,
+          overlap: overlap
         })
       }),
       badge: _extends({}, componentsProps.badge, shouldSpreadAdditionalProps(components.Badge) && {
         ownerState: _extends({}, (_componentsProps$badg = componentsProps.badge) == null ? void 0 : _componentsProps$badg.ownerState, {
-          color: color
+          color: color,
+          overlap: overlap
         })
       })
     },
@@ -279,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/legacy/FilledInput/FilledInput.js

@@ -255,7 +255,10 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes
    * The props used for each slot inside the Input.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    input: PropTypes.object,
+    root: PropTypes.object
+  }),
 
   /**
    * The default value. Use when the component is not controlled.

package/legacy/FormControlLabel/FormControlLabel.js

@@ -156,7 +156,9 @@ process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    typography: PropTypes.object
+  }),
 
   /**
    * A control element. For instance, it can be a `Radio`, a `Switch` or a `Checkbox`.

package/legacy/Input/Input.js

@@ -190,7 +190,10 @@ process.env.NODE_ENV !== "production" ? Input.propTypes
    * The props used for each slot inside the Input.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    input: PropTypes.object,
+    root: PropTypes.object
+  }),
 
   /**
    * The default value. Use when the component is not controlled.

package/legacy/InputBase/InputBase.js

@@ -561,7 +561,10 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes
    * The props used for each slot inside the Input.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    input: PropTypes.object,
+    root: PropTypes.object
+  }),
 
   /**
    * The default value. Use when the component is not controlled.

package/legacy/InputLabel/InputLabel.js

@@ -78,6 +78,8 @@ var InputLabelRoot = styled(FormLabel, {
   }, ownerState.size === 'small' && {
     transform: 'translate(12px, 13px) scale(1)'
   }, ownerState.shrink && _extends({
+    userSelect: 'none',
+    pointerEvents: 'auto',
     transform: 'translate(12px, 7px) scale(0.75)',
     maxWidth: 'calc(133% - 24px)'
   }, ownerState.size === 'small' && {
@@ -91,6 +93,8 @@ var InputLabelRoot = styled(FormLabel, {
   }, ownerState.size === 'small' && {
     transform: 'translate(14px, 9px) scale(1)'
   }, ownerState.shrink && {
+    userSelect: 'none',
+    pointerEvents: 'auto',
     maxWidth: 'calc(133% - 24px)',
     transform: 'translate(14px, -9px) scale(0.75)'
   }));

package/legacy/ListItem/ListItem.js

@@ -348,7 +348,9 @@ process.env.NODE_ENV !== "production" ? ListItem.propTypes
    * The props used for each slot inside the Input.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    root: PropTypes.object
+  }),
 
   /**
    * The container component used when a `ListItemSecondaryAction` is the last child.

package/legacy/Modal/Modal.js

@@ -194,7 +194,9 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
    * The props used for each slot inside the Modal.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    root: PropTypes.object
+  }),
 
   /**
    * An HTML element or function that returns one.

package/legacy/Select/Select.js

@@ -36,6 +36,8 @@ var Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
       _props$classes = props.classes,
       classesProp = _props$classes === void 0 ? {} : _props$classes,
       className = props.className,
+      _props$defaultOpen = props.defaultOpen,
+      defaultOpen = _props$defaultOpen === void 0 ? false : _props$defaultOpen,
       _props$displayEmpty = props.displayEmpty,
       displayEmpty = _props$displayEmpty === void 0 ? false : _props$displayEmpty,
       _props$IconComponent = props.IconComponent,
@@ -57,7 +59,7 @@ var Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
       SelectDisplayProps = props.SelectDisplayProps,
       _props$variant = props.variant,
       variantProps = _props$variant === void 0 ? 'outlined' : _props$variant,
-      other = _objectWithoutProperties(props, ["autoWidth", "children", "classes", "className", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"]);
+      other = _objectWithoutProperties(props, ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"]);
 
   var inputComponent = native ? NativeSelectInput : SelectInput;
   var muiFormControl = useFormControl();
@@ -96,6 +98,7 @@ var Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
       id: id
     } : {
       autoWidth: autoWidth,
+      defaultOpen: defaultOpen,
       displayEmpty: displayEmpty,
       labelId: labelId,
       MenuProps: MenuProps,
@@ -150,6 +153,13 @@ process.env.NODE_ENV !== "production" ? Select.propTypes
    */
   className: PropTypes.string,
 
+  /**
+   * If `true`, the component is initially open. Use when the component open state is not controlled (i.e. the `open` prop is not defined).
+   * You can only use it when the `native` prop is `false` (default).
+   * @default false
+   */
+  defaultOpen: PropTypes.bool,
+
   /**
    * The default value. Use when the component is not controlled.
    */

package/legacy/Select/SelectInput.js

@@ -103,6 +103,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
       autoWidth = props.autoWidth,
       children = props.children,
       className = props.className,
+      defaultOpen = props.defaultOpen,
       defaultValue = props.defaultValue,
       disabled = props.disabled,
       displayEmpty = props.displayEmpty,
@@ -128,7 +129,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
       valueProp = props.value,
       _props$variant = props.variant,
       variant = _props$variant === void 0 ? 'standard' : _props$variant,
-      other = _objectWithoutProperties(props, ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultValue", "disabled", "displayEmpty", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"]);
+      other = _objectWithoutProperties(props, ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultOpen", "defaultValue", "disabled", "displayEmpty", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"]);
 
   var _useControlled = useControlled({
     controlled: valueProp,
@@ -139,6 +140,15 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
       value = _useControlled2[0],
       setValueState = _useControlled2[1];
 
+  var _useControlled3 = useControlled({
+    controlled: openProp,
+    default: defaultOpen,
+    name: 'Select'
+  }),
+      _useControlled4 = _slicedToArray(_useControlled3, 2),
+      openState = _useControlled4[0],
+      setOpenState = _useControlled4[1];
+
   var inputRef = React.useRef(null);
   var displayRef = React.useRef(null);
 
@@ -153,10 +163,6 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
       menuMinWidthState = _React$useState2[0],
       setMenuMinWidthState = _React$useState2[1];
 
-  var _React$useState3 = React.useState(false),
-      openState = _React$useState3[0],
-      setOpenState = _React$useState3[1];
-
   var handleRef = useForkRef(ref, inputRefProp);
   var handleDisplayRef = React.useCallback(function (node) {
     displayRef.current = node;
@@ -173,7 +179,17 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
       node: inputRef.current,
       value: value
     };
-  }, [value]);
+  }, [value]); // Resize menu on `defaultOpen` automatic toggle.
+
+  React.useEffect(function () {
+    if (defaultOpen && openState && displayNode && !isOpenControlled) {
+      setMenuMinWidthState(autoWidth ? null : displayNode.clientWidth);
+      displayRef.current.focus();
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [displayNode, autoWidth]); // `isOpenControlled` is ignored because the component should never switch between controlled and uncontrolled modes.
+  // `defaultOpen` and `openState` are ignored to avoid unnecessary callbacks.
+
   React.useEffect(function () {
     if (autoFocus) {
       displayRef.current.focus();
@@ -313,7 +329,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
     }
   };
 
-  var open = displayNode !== null && (isOpenControlled ? openProp : openState);
+  var open = displayNode !== null && openState;
 
   var handleBlur = function handleBlur(event) {
     // if open event.stopImmediatePropagation
@@ -580,6 +596,12 @@ process.env.NODE_ENV !== "production" ? SelectInput.propTypes = {
    */
   className: PropTypes.string,
 
+  /**
+   * If `true`, the component is toggled on mount. Use when the component open state is not controlled.
+   * You can only use it when the `native` prop is `false` (default).
+   */
+  defaultOpen: PropTypes.bool,
+
   /**
    * The default value. Use when the component is not controlled.
    */