@mui/material 5.10.6 → 5.10.8

package/legacy/Fab/Fab.js

@@ -9,7 +9,7 @@ import ButtonBase from '../ButtonBase';
 import capitalize from '../utils/capitalize';
 import useThemeProps from '../styles/useThemeProps';
 import fabClasses, { getFabUtilityClass } from './fabClasses';
-import styled from '../styles/styled';
+import styled, { rootShouldForwardProp } from '../styles/styled';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -20,12 +20,16 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   var slots = {
     root: ['root', variant, "size".concat(capitalize(size)), color === 'inherit' ? 'colorInherit' : color]
   };
-  return composeClasses(slots, getFabUtilityClass, classes);
+  var composedClasses = composeClasses(slots, getFabUtilityClass, classes);
+  return _extends({}, classes, composedClasses);
 };
 
 var FabRoot = styled(ButtonBase, {
   name: 'MuiFab',
   slot: 'Root',
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return rootShouldForwardProp(prop) || prop === 'classes';
+  },
   overridesResolver: function overridesResolver(props, styles) {
     var ownerState = props.ownerState;
     return [styles.root, styles[ownerState.variant], styles["size".concat(capitalize(ownerState.size))], ownerState.color === 'inherit' && styles.colorInherit, styles[capitalize(ownerState.size)], styles[ownerState.color]];
@@ -151,6 +155,7 @@ var Fab = /*#__PURE__*/React.forwardRef(function Fab(inProps, ref) {
     ownerState: ownerState,
     ref: ref
   }, other, {
+    classes: classes,
     children: children
   }));
 });

package/legacy/InputLabel/InputLabel.js

@@ -4,6 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
+import clsx from 'clsx';
 import formControlState from '../FormControl/formControlState';
 import useFormControl from '../FormControl/useFormControl';
 import FormLabel, { formLabelClasses } from '../FormLabel';
@@ -110,7 +111,8 @@ var InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, ref)
       margin = props.margin,
       shrinkProp = props.shrink,
       variant = props.variant,
-      other = _objectWithoutProperties(props, ["disableAnimation", "margin", "shrink", "variant"]);
+      className = props.className,
+      other = _objectWithoutProperties(props, ["disableAnimation", "margin", "shrink", "variant", "className"]);
 
   var muiFormControl = useFormControl();
   var shrink = shrinkProp;
@@ -138,7 +140,8 @@ var InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, ref)
   return /*#__PURE__*/_jsx(InputLabelRoot, _extends({
     "data-shrink": shrink,
     ownerState: ownerState,
-    ref: ref
+    ref: ref,
+    className: clsx(classes.root, className)
   }, other, {
     classes: classes
   }));
@@ -161,6 +164,11 @@ process.env.NODE_ENV !== "production" ? InputLabel.propTypes
    */
   classes: PropTypes.object,
 
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the

package/legacy/ListItemButton/ListItemButton.js

@@ -118,7 +118,8 @@ var ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inPro
       focusVisibleClassName = props.focusVisibleClassName,
       _props$selected = props.selected,
       selected = _props$selected === void 0 ? false : _props$selected,
-      other = _objectWithoutProperties(props, ["alignItems", "autoFocus", "component", "children", "dense", "disableGutters", "divider", "focusVisibleClassName", "selected"]);
+      className = props.className,
+      other = _objectWithoutProperties(props, ["alignItems", "autoFocus", "component", "children", "dense", "disableGutters", "divider", "focusVisibleClassName", "selected", "className"]);
 
   var context = React.useContext(ListContext);
   var childContext = {
@@ -154,7 +155,8 @@ var ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inPro
       href: other.href || other.to,
       component: (other.href || other.to) && component === 'div' ? 'a' : component,
       focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
-      ownerState: ownerState
+      ownerState: ownerState,
+      className: clsx(classes.root, className)
     }, other, {
       classes: classes,
       children: children
@@ -193,6 +195,11 @@ process.env.NODE_ENV !== "production" ? ListItemButton.propTypes
    */
   classes: PropTypes.object,
 
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.

package/legacy/MenuItem/MenuItem.js

@@ -131,7 +131,8 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
       _props$role = props.role,
       role = _props$role === void 0 ? 'menuitem' : _props$role,
       tabIndexProp = props.tabIndex,
-      other = _objectWithoutProperties(props, ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex"]);
+      className = props.className,
+      other = _objectWithoutProperties(props, ["autoFocus", "component", "dense", "divider", "disableGutters", "focusVisibleClassName", "role", "tabIndex", "className"]);
 
   var context = React.useContext(ListContext);
   var childContext = {
@@ -170,7 +171,8 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
       role: role,
       tabIndex: tabIndex,
       component: component,
-      focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName)
+      focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
+      className: clsx(classes.root, className)
     }, other, {
       ownerState: ownerState,
       classes: classes
@@ -202,6 +204,11 @@ process.env.NODE_ENV !== "production" ? MenuItem.propTypes
    */
   classes: PropTypes.object,
 
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.

package/legacy/Popover/Popover.js

@@ -334,6 +334,7 @@ var Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
       }, PaperProps, {
         ref: handlePaperRef,
         className: clsx(classes.paper, PaperProps.className),
+        ownerState: ownerState,
         children: children
       }))
     }))

package/legacy/Radio/Radio.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import { refType } from '@mui/utils';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { alpha } from '@mui/system';
@@ -89,7 +90,8 @@ var Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
       onChangeProp = props.onChange,
       _props$size = props.size,
       size = _props$size === void 0 ? 'medium' : _props$size,
-      other = _objectWithoutProperties(props, ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size"]);
+      className = props.className,
+      other = _objectWithoutProperties(props, ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size", "className"]);
 
   var ownerState = _extends({}, props, {
     color: color,
@@ -125,7 +127,8 @@ var Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
     name: name,
     checked: checked,
     onChange: onChange,
-    ref: ref
+    ref: ref,
+    className: clsx(classes.root, className)
   }, other));
 });
 process.env.NODE_ENV !== "production" ? Radio.propTypes
@@ -152,6 +155,11 @@ process.env.NODE_ENV !== "production" ? Radio.propTypes
    */
   classes: PropTypes.object,
 
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the

package/legacy/StepLabel/StepLabel.js

@@ -26,7 +26,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
     root: ['root', orientation, error && 'error', disabled && 'disabled', alternativeLabel && 'alternativeLabel'],
     label: ['label', active && 'active', completed && 'completed', error && 'error', disabled && 'disabled', alternativeLabel && 'alternativeLabel'],
     iconContainer: ['iconContainer', active && 'active', completed && 'completed', error && 'error', disabled && 'disabled', alternativeLabel && 'alternativeLabel'],
-    labelContainer: ['labelContainer']
+    labelContainer: ['labelContainer', alternativeLabel && 'alternativeLabel']
   };
   return composeClasses(slots, getStepLabelUtilityClass, classes);
 };
@@ -76,7 +76,6 @@ var StepLabelLabel = styled('span', {
     color: (theme.vars || theme).palette.text.primary,
     fontWeight: 500
   }), _defineProperty(_extends3, "&.".concat(stepLabelClasses.alternativeLabel), {
-    textAlign: 'center',
     marginTop: 16
   }), _defineProperty(_extends3, "&.".concat(stepLabelClasses.error), {
     color: (theme.vars || theme).palette.error.main
@@ -106,10 +105,12 @@ var StepLabelLabelContainer = styled('span', {
   }
 })(function (_ref4) {
   var theme = _ref4.theme;
-  return {
+  return _defineProperty({
     width: '100%',
     color: (theme.vars || theme).palette.text.secondary
-  };
+  }, "&.".concat(stepLabelClasses.alternativeLabel), {
+    textAlign: 'center'
+  });
 });
 var StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref) {
   var props = useThemeProps({

package/legacy/SvgIcon/SvgIcon.js

@@ -47,7 +47,7 @@ var SvgIconRoot = styled('svg', {
       inherit: 'inherit',
       small: ((_theme$typography = theme.typography) == null ? void 0 : (_theme$typography$pxT = _theme$typography.pxToRem) == null ? void 0 : _theme$typography$pxT.call(_theme$typography, 20)) || '1.25rem',
       medium: ((_theme$typography2 = theme.typography) == null ? void 0 : (_theme$typography2$px = _theme$typography2.pxToRem) == null ? void 0 : _theme$typography2$px.call(_theme$typography2, 24)) || '1.5rem',
-      large: ((_theme$typography3 = theme.typography) == null ? void 0 : (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875'
+      large: ((_theme$typography3 = theme.typography) == null ? void 0 : (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875rem'
     }[ownerState.fontSize],
     // TODO v5 deprecate, v6 remove for sx
     color: (_palette$ownerState$c = (_palette = (theme.vars || theme).palette) == null ? void 0 : (_palette$ownerState$c2 = _palette[ownerState.color]) == null ? void 0 : _palette$ownerState$c2.main) != null ? _palette$ownerState$c : {
@@ -98,13 +98,13 @@ var SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
   return /*#__PURE__*/_jsxs(SvgIconRoot, _extends({
     as: component,
     className: clsx(classes.root, className),
-    ownerState: ownerState,
     focusable: "false",
     color: htmlColor,
     "aria-hidden": titleAccess ? undefined : true,
     role: titleAccess ? 'img' : undefined,
     ref: ref
   }, more, other, {
+    ownerState: ownerState,
     children: [children, titleAccess ? /*#__PURE__*/_jsx("title", {
       children: titleAccess
     }) : null]

package/legacy/Tooltip/Tooltip.js

@@ -488,7 +488,7 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
   var handleFocusRef = useForkRef(focusVisibleRef, handleUseRef);
   var handleRef = useForkRef(children.ref, handleFocusRef); // There is no point in displaying an empty tooltip.
 
-  if (title === '') {
+  if (typeof title !== 'number' && !title) {
     open = false;
   }
 
@@ -831,11 +831,9 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
 
   /**
-   * Tooltip title. Zero-length titles string are never displayed.
+   * Tooltip title. Zero-length titles string, undefined, null and false are never displayed.
    */
-  title: PropTypes
-  /* @typescript-to-proptypes-ignore */
-  .node.isRequired,
+  title: PropTypes.node,
 
   /**
    * The component used for the transition.

package/legacy/Unstable_TrapFocus/index.js

@@ -1 +1 @@
-export { default } from '@mui/base/TrapFocus';
+export { default } from '@mui/base/FocusTrap';

package/legacy/index.js

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