@mui/material 5.3.1 → 5.4.3

package/modern/useMediaQuery/useMediaQuery.js

@@ -5,32 +5,8 @@ import useEnhancedEffect from '../utils/useEnhancedEffect';
  * @deprecated Not used internally. Use `MediaQueryListEvent` from lib.dom.d.ts instead.
  */
 
-export default function useMediaQuery(queryInput, options = {}) {
-  const theme = useTheme(); // Wait for jsdom to support the match media feature.
-  // All the browsers MUI support have this built-in.
-  // This defensive check is here for simplicity.
-  // Most of the time, the match media logic isn't central to people tests.
-
+function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
   const supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
-  const {
-    defaultMatches = false,
-    matchMedia = supportMatchMedia ? window.matchMedia : null,
-    noSsr = false,
-    ssrMatchMedia = null
-  } = getThemeProps({
-    name: 'MuiUseMediaQuery',
-    props: options,
-    theme
-  });
-
-  if (process.env.NODE_ENV !== 'production') {
-    if (typeof queryInput === 'function' && theme === null) {
-      console.error(['MUI: The `query` argument provided is invalid.', 'You are providing a function without a theme in the context.', 'One of the parent elements needs to use a ThemeProvider.'].join('\n'));
-    }
-  }
-
-  let query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
-  query = query.replace(/^@media( ?)/m, '');
   const [match, setMatch] = React.useState(() => {
     if (noSsr && supportMatchMedia) {
       return matchMedia(query).matches;
@@ -56,19 +32,85 @@ export default function useMediaQuery(queryInput, options = {}) {
     const updateMatch = () => {
       // Workaround Safari wrong implementation of matchMedia
       // TODO can we remove it?
-      // https://github.com/mui-org/material-ui/pull/17315#issuecomment-528286677
+      // https://github.com/mui/material-ui/pull/17315#issuecomment-528286677
       if (active) {
         setMatch(queryList.matches);
       }
     };
 
-    updateMatch();
+    updateMatch(); // TODO: Use `addEventListener` once support for Safari < 14 is dropped
+
     queryList.addListener(updateMatch);
     return () => {
       active = false;
       queryList.removeListener(updateMatch);
     };
   }, [query, matchMedia, supportMatchMedia]);
+  return match;
+} // eslint-disable-next-line no-useless-concat -- Workaround for https://github.com/webpack/webpack/issues/14814
+
+
+const maybeReactUseSyncExternalStore = React['useSyncExternalStore' + ''];
+
+function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia) {
+  const getDefaultSnapshot = React.useCallback(() => defaultMatches, [defaultMatches]);
+  const getServerSnapshot = React.useMemo(() => {
+    if (ssrMatchMedia !== null) {
+      const {
+        matches
+      } = ssrMatchMedia(query);
+      return () => matches;
+    }
+
+    return getDefaultSnapshot;
+  }, [getDefaultSnapshot, query, ssrMatchMedia]);
+  const [getSnapshot, subscribe] = React.useMemo(() => {
+    if (matchMedia === null) {
+      return [getDefaultSnapshot, () => () => {}];
+    }
+
+    const mediaQueryList = matchMedia(query);
+    return [() => mediaQueryList.matches, notify => {
+      // TODO: Use `addEventListener` once support for Safari < 14 is dropped
+      mediaQueryList.addListener(notify);
+      return () => {
+        mediaQueryList.removeListener(notify);
+      };
+    }];
+  }, [getDefaultSnapshot, matchMedia, query]);
+  const match = maybeReactUseSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  return match;
+}
+
+export default function useMediaQuery(queryInput, options = {}) {
+  const theme = useTheme(); // Wait for jsdom to support the match media feature.
+  // All the browsers MUI support have this built-in.
+  // This defensive check is here for simplicity.
+  // Most of the time, the match media logic isn't central to people tests.
+
+  const supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
+  const {
+    defaultMatches = false,
+    matchMedia = supportMatchMedia ? window.matchMedia : null,
+    ssrMatchMedia = null,
+    noSsr
+  } = getThemeProps({
+    name: 'MuiUseMediaQuery',
+    props: options,
+    theme
+  });
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (typeof queryInput === 'function' && theme === null) {
+      console.error(['MUI: The `query` argument provided is invalid.', 'You are providing a function without a theme in the context.', 'One of the parent elements needs to use a ThemeProvider.'].join('\n'));
+    }
+  }
+
+  let query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
+  query = query.replace(/^@media( ?)/m, ''); // TODO: Drop `useMediaQueryOld` and use  `use-sync-external-store` shim in `useMediaQueryNew` once the package is stable
+
+  const useMediaQueryImplementation = maybeReactUseSyncExternalStore !== undefined ? useMediaQueryNew : useMediaQueryOld;
+  const match = useMediaQueryImplementation(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr);
 
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks

package/node/Autocomplete/Autocomplete.js

@@ -63,7 +63,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 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"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -444,6 +444,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     PaperComponent = _Paper.default,
     PopperComponent = _Popper.default,
     popupIcon = _ArrowDropDownIcon || (_ArrowDropDownIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowDropDown.default, {})),
+    readOnly = false,
     renderGroup: renderGroupProp,
     renderInput,
     renderOption: renderOptionProp,
@@ -476,7 +477,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   } = (0, _base.useAutocomplete)((0, _extends2.default)({}, props, {
     componentName: 'Autocomplete'
   }));
-  const hasClearIcon = !disableClearable && !disabled && dirty;
+  const hasClearIcon = !disableClearable && !disabled && dirty && !readOnly;
   const hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;
   const ownerState = (0, _extends2.default)({}, props, {
     disablePortal,
@@ -593,7 +594,8 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
         },
         inputProps: (0, _extends2.default)({
           className: (0, _clsx.default)(classes.input),
-          disabled
+          disabled,
+          readOnly
         }, getInputProps())
       })
     })), popupOpen && anchorEl ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompletePopper, {
@@ -1034,6 +1036,12 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    */
   popupIcon: _propTypes.default.node,
 
+  /**
+   * If `true`, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted.
+   * @default false
+   */
+  readOnly: _propTypes.default.bool,
+
   /**
    * Render the group.
    *

package/node/AvatarGroup/AvatarGroup.js

@@ -33,7 +33,7 @@ var _avatarGroupClasses = _interopRequireWildcard(require("./avatarGroupClasses"
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["children", "className", "max", "spacing", "total", "variant"];
+const _excluded = ["children", "className", "componentsProps", "max", "spacing", "total", "variant"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -90,6 +90,8 @@ const AvatarGroupAvatar = (0, _styled.default)(_Avatar.default, {
   }
 }));
 const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, ref) {
+  var _componentsProps$addi, _componentsProps$addi2;
+
   const props = (0, _useThemeProps.default)({
     props: inProps,
     name: 'MuiAvatarGroup'
@@ -97,6 +99,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
   const {
     children: childrenProp,
     className,
+    componentsProps = {},
     max = 5,
     spacing = 'medium',
     total,
@@ -134,15 +137,16 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     className: (0, _clsx.default)(classes.root, className),
     ref: ref
   }, other, {
-    children: [extraAvatars ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(AvatarGroupAvatar, {
+    children: [extraAvatars ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(AvatarGroupAvatar, (0, _extends2.default)({
       ownerState: ownerState,
-      className: classes.avatar,
-      style: {
+      variant: variant
+    }, componentsProps.additionalAvatar, {
+      className: (0, _clsx.default)(classes.avatar, (_componentsProps$addi = componentsProps.additionalAvatar) == null ? void 0 : _componentsProps$addi.className),
+      style: (0, _extends2.default)({
         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: (0, _clsx.default)(child.props.className, classes.avatar),
         style: (0, _extends2.default)({
@@ -176,6 +180,14 @@ process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes
    */
   className: _propTypes.default.string,
 
+  /**
+   * The props used for each slot inside the AvatarGroup.
+   * @default {}
+   */
+  componentsProps: _propTypes.default.shape({
+    additionalAvatar: _propTypes.default.object
+  }),
+
   /**
    * Max avatars to show before +x.
    * @default 5

package/node/Badge/Badge.js

@@ -198,7 +198,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'
@@ -211,7 +211,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;
   }
 
@@ -327,6 +327,7 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
 
   /**
    * If `true`, the badge is invisible.
+   * @default false
    */
   invisible: _propTypes.default.bool,
 

package/node/Breadcrumbs/BreadcrumbCollapsed.js

@@ -27,9 +27,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const BreadcrumbCollapsedButton = (0, _styled.default)(_ButtonBase.default, {
-  skipSx: true
-})(({
+const BreadcrumbCollapsedButton = (0, _styled.default)(_ButtonBase.default)(({
   theme
 }) => (0, _extends2.default)({
   display: 'flex',

package/node/ButtonBase/ButtonBase.js

@@ -37,7 +37,7 @@ var _buttonBaseClasses = _interopRequireWildcard(require("./buttonBaseClasses"))
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-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"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -145,11 +145,13 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     onTouchStart,
     tabIndex = 0,
     TouchRippleProps,
+    touchRippleRef,
     type
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const buttonRef = React.useRef(null);
   const rippleRef = React.useRef(null);
+  const handleRippleRef = (0, _useForkRef.default)(rippleRef, touchRippleRef);
   const {
     isFocusVisibleRef,
     onFocus: handleFocusVisible,
@@ -368,7 +370,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
 
     /* TouchRipple is only needed client-side, x2 boost on the server. */
     (0, _jsxRuntime.jsx)(_TouchRipple.default, (0, _extends2.default)({
-      ref: rippleRef,
+      ref: handleRippleRef,
       center: centerRipple
     }, TouchRippleProps)) : null]
   }));
@@ -551,6 +553,17 @@ process.env.NODE_ENV !== "production" ? ButtonBase.propTypes
    */
   TouchRippleProps: _propTypes.default.object,
 
+  /**
+   * A ref that points to the `TouchRipple` element.
+   */
+  touchRippleRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+    current: _propTypes.default.shape({
+      pulsate: _propTypes.default.func.isRequired,
+      start: _propTypes.default.func.isRequired,
+      stop: _propTypes.default.func.isRequired
+    })
+  })]),
+
   /**
    * @ignore
    */

package/node/ButtonBase/TouchRipple.js

@@ -75,8 +75,7 @@ const pulsateKeyframe = (0, _system.keyframes)`
 `;
 const TouchRippleRoot = (0, _styled.default)('span', {
   name: 'MuiTouchRipple',
-  slot: 'Root',
-  skipSx: true
+  slot: 'Root'
 })({
   overflow: 'hidden',
   pointerEvents: 'none',

package/node/Dialog/Dialog.js

@@ -27,8 +27,6 @@ var _Modal = _interopRequireDefault(require("../Modal"));
 
 var _Fade = _interopRequireDefault(require("../Fade"));
 
-var _createTransitions = require("../styles/createTransitions");
-
 var _Paper = _interopRequireDefault(require("../Paper"));
 
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
@@ -41,6 +39,8 @@ var _DialogContext = _interopRequireDefault(require("./DialogContext"));
 
 var _Backdrop = _interopRequireDefault(require("../Backdrop"));
 
+var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["aria-describedby", "aria-labelledby", "BackdropComponent", "BackdropProps", "children", "className", "disableEscapeKeyDown", "fullScreen", "fullWidth", "maxWidth", "onBackdropClick", "onClose", "open", "PaperComponent", "PaperProps", "scroll", "TransitionComponent", "transitionDuration", "TransitionProps"];
@@ -178,10 +178,6 @@ const DialogPaper = (0, _styled.default)(_Paper.default, {
     maxWidth: '100%'
   }
 }));
-const defaultTransitionDuration = {
-  enter: _createTransitions.duration.enteringScreen,
-  exit: _createTransitions.duration.leavingScreen
-};
 /**
  * Dialogs are overlaid modal paper based components with a backdrop.
  */
@@ -191,6 +187,11 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
     props: inProps,
     name: 'MuiDialog'
   });
+  const theme = (0, _useTheme.default)();
+  const defaultTransitionDuration = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
+  };
   const {
     'aria-describedby': ariaDescribedby,
     'aria-labelledby': ariaLabelledbyProp,
@@ -428,7 +429,10 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
-   * @default { enter: duration.enteringScreen, exit: duration.leavingScreen }
+   * @default {
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
+   * }
    */
   transitionDuration: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
     appear: _propTypes.default.number,

package/node/Drawer/Drawer.js

@@ -31,8 +31,6 @@ var _Paper = _interopRequireDefault(require("../Paper"));
 
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 
-var _createTransitions = require("../styles/createTransitions");
-
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
@@ -158,21 +156,22 @@ function isHorizontal(anchor) {
 function getAnchor(theme, anchor) {
   return theme.direction === 'rtl' && isHorizontal(anchor) ? oppositeDirection[anchor] : anchor;
 }
-
-const defaultTransitionDuration = {
-  enter: _createTransitions.duration.enteringScreen,
-  exit: _createTransitions.duration.leavingScreen
-};
 /**
  * The props of the [Modal](/api/modal/) component are available
  * when `variant="temporary"` is set.
  */
 
+
 const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
   const props = (0, _useThemeProps.default)({
     props: inProps,
     name: 'MuiDrawer'
   });
+  const theme = (0, _useTheme.default)();
+  const defaultTransitionDuration = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
+  };
   const {
     anchor: anchorProp = 'left',
     BackdropProps,
@@ -193,8 +192,7 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
     variant = 'temporary'
   } = props,
         ModalProps = (0, _objectWithoutPropertiesLoose2.default)(props.ModalProps, _excluded),
-        other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
-  const theme = (0, _useTheme.default)(); // Let's assume that the Drawer will always be rendered on user space.
+        other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2); // Let's assume that the Drawer will always be rendered on user space.
   // We use this state is order to skip the appear transition during the
   // initial mount of the component.
 
@@ -348,7 +346,10 @@ process.env.NODE_ENV !== "production" ? Drawer.propTypes
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
-   * @default { enter: duration.enteringScreen, exit: duration.leavingScreen }
+   * @default {
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
+   * }
    */
   transitionDuration: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
     appear: _propTypes.default.number,

package/node/Fab/Fab.js

@@ -45,7 +45,7 @@ const useUtilityClasses = ownerState => {
     size
   } = ownerState;
   const slots = {
-    root: ['root', variant, `size${(0, _capitalize.default)(size)}`, color === 'inherit' && 'colorInherit', color === 'primary' && 'primary', color === 'secondary' && 'secondary']
+    root: ['root', variant, `size${(0, _capitalize.default)(size)}`, color === 'inherit' ? 'colorInherit' : color]
   };
   return (0, _base.unstable_composeClasses)(slots, _fabClasses.getFabUtilityClass, classes);
 };
@@ -57,7 +57,7 @@ const FabRoot = (0, _styled.default)(_ButtonBase.default, {
     const {
       ownerState
     } = props;
-    return [styles.root, styles[ownerState.variant], styles[`size${(0, _capitalize.default)(ownerState.size)}`], ownerState.color === 'inherit' && styles.colorInherit, ownerState.color === 'primary' && styles.primary, ownerState.color === 'secondary' && styles.secondary];
+    return [styles.root, styles[ownerState.variant], styles[`size${(0, _capitalize.default)(ownerState.size)}`], ownerState.color === 'inherit' && styles.colorInherit, styles[(0, _capitalize.default)(ownerState.size)], styles[ownerState.color]];
   }
 })(({
   theme,
@@ -124,24 +124,14 @@ const FabRoot = (0, _styled.default)(_ButtonBase.default, {
 }), ({
   theme,
   ownerState
-}) => (0, _extends2.default)({}, ownerState.color === 'primary' && {
-  color: theme.palette.primary.contrastText,
-  backgroundColor: theme.palette.primary.main,
+}) => (0, _extends2.default)({}, ownerState.color !== 'inherit' && ownerState.color !== 'default' && theme.palette[ownerState.color] != null && {
+  color: theme.palette[ownerState.color].contrastText,
+  backgroundColor: theme.palette[ownerState.color].main,
   '&:hover': {
-    backgroundColor: theme.palette.primary.dark,
+    backgroundColor: theme.palette[ownerState.color].dark,
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
-      backgroundColor: theme.palette.primary.main
-    }
-  }
-}, ownerState.color === 'secondary' && {
-  color: theme.palette.secondary.contrastText,
-  backgroundColor: theme.palette.secondary.main,
-  '&:hover': {
-    backgroundColor: theme.palette.secondary.dark,
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      backgroundColor: theme.palette.secondary.main
+      backgroundColor: theme.palette[ownerState.color].main
     }
   }
 }));
@@ -210,9 +200,7 @@ process.env.NODE_ENV !== "production" ? Fab.propTypes
    * The color of the component. It supports those theme colors that make sense for this component.
    * @default 'default'
    */
-  color: _propTypes.default
-  /* @typescript-to-proptypes-ignore */
-  .oneOfType([_propTypes.default.oneOf(['default', 'inherit', 'primary', 'secondary']), _propTypes.default.string]),
+  color: _propTypes.default.oneOf(['default', 'error', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning']),
 
   /**
    * The component used for the root node.

package/node/Fab/fabClasses.js

@@ -12,6 +12,6 @@ function getFabUtilityClass(slot) {
   return (0, _base.generateUtilityClass)('MuiFab', slot);
 }
 
-const fabClasses = (0, _base.generateUtilityClasses)('MuiFab', ['root', 'primary', 'secondary', 'extended', 'circular', 'focusVisible', 'disabled', 'colorInherit', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
+const fabClasses = (0, _base.generateUtilityClasses)('MuiFab', ['root', 'primary', 'secondary', 'extended', 'circular', 'focusVisible', 'disabled', 'colorInherit', 'sizeSmall', 'sizeMedium', 'sizeLarge', 'info', 'error', 'warning', 'success']);
 var _default = fabClasses;
 exports.default = _default;

package/node/Fade/Fade.js

@@ -19,8 +19,6 @@ var _reactTransitionGroup = require("react-transition-group");
 
 var _utils = require("@mui/utils");
 
-var _createTransitions = require("../styles/createTransitions");
-
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 
 var _utils2 = require("../transitions/utils");
@@ -43,16 +41,17 @@ const styles = {
     opacity: 1
   }
 };
-const defaultTimeout = {
-  enter: _createTransitions.duration.enteringScreen,
-  exit: _createTransitions.duration.leavingScreen
-};
 /**
  * The Fade transition is used by the [Modal](/components/modal/) component.
  * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 
 const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
+  const theme = (0, _useTheme.default)();
+  const defaultTimeout = {
+    enter: theme.transitions.duration.enteringScreen,
+    exit: theme.transitions.duration.leavingScreen
+  };
   const {
     addEndListener,
     appear = true,
@@ -71,7 +70,6 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
     TransitionComponent = _reactTransitionGroup.Transition
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const theme = (0, _useTheme.default)();
   const enableStrictModeCompat = true;
   const nodeRef = React.useRef(null);
   const foreignRef = (0, _useForkRef.default)(children.ref, ref);
@@ -237,8 +235,8 @@ process.env.NODE_ENV !== "production" ? Fade.propTypes
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
    * @default {
-   *   enter: duration.enteringScreen,
-   *   exit: duration.leavingScreen,
+   *   enter: theme.transitions.duration.enteringScreen,
+   *   exit: theme.transitions.duration.leavingScreen,
    * }
    */
   timeout: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({

package/node/FormControlLabel/FormControlLabel.js

@@ -33,6 +33,8 @@ var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 
 var _formControlLabelClasses = _interopRequireWildcard(require("./formControlLabelClasses"));
 
+var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "value"];
@@ -45,10 +47,11 @@ const useUtilityClasses = ownerState => {
   const {
     classes,
     disabled,
-    labelPlacement
+    labelPlacement,
+    error
   } = ownerState;
   const slots = {
-    root: ['root', disabled && 'disabled', `labelPlacement${(0, _capitalize.default)(labelPlacement)}`],
+    root: ['root', disabled && 'disabled', `labelPlacement${(0, _capitalize.default)(labelPlacement)}`, error && 'error'],
     label: ['label', disabled && 'disabled']
   };
   return (0, _base.unstable_composeClasses)(slots, _formControlLabelClasses.getFormControlLabelUtilityClasses, classes);
@@ -139,10 +142,16 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
       controlProps[key] = props[key];
     }
   });
+  const fcs = (0, _formControlState.default)({
+    props,
+    muiFormControl,
+    states: ['error']
+  });
   const ownerState = (0, _extends2.default)({}, props, {
     disabled,
     label,
-    labelPlacement
+    labelPlacement,
+    error: fcs.error
   });
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(FormControlLabelRoot, (0, _extends2.default)({

package/node/FormControlLabel/formControlLabelClasses.js

@@ -12,6 +12,6 @@ function getFormControlLabelUtilityClasses(slot) {
   return (0, _base.generateUtilityClass)('MuiFormControlLabel', slot);
 }
 
-const formControlLabelClasses = (0, _base.generateUtilityClasses)('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label']);
+const formControlLabelClasses = (0, _base.generateUtilityClasses)('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label', 'error']);
 var _default = formControlLabelClasses;
 exports.default = _default;

package/node/FormGroup/FormGroup.js

@@ -25,6 +25,10 @@ var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 
 var _formGroupClasses = require("./formGroupClasses");
 
+var _useFormControl = _interopRequireDefault(require("../FormControl/useFormControl"));
+
+var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["className", "row"];
@@ -36,10 +40,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const useUtilityClasses = ownerState => {
   const {
     classes,
-    row
+    row,
+    error
   } = ownerState;
   const slots = {
-    root: ['root', row && 'row']
+    root: ['root', row && 'row', error && 'error']
   };
   return (0, _base.unstable_composeClasses)(slots, _formGroupClasses.getFormGroupUtilityClass, classes);
 };
@@ -78,8 +83,15 @@ const FormGroup = /*#__PURE__*/React.forwardRef(function FormGroup(inProps, ref)
     row = false
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const muiFormControl = (0, _useFormControl.default)();
+  const fcs = (0, _formControlState.default)({
+    props,
+    muiFormControl,
+    states: ['error']
+  });
   const ownerState = (0, _extends2.default)({}, props, {
-    row
+    row,
+    error: fcs.error
   });
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(FormGroupRoot, (0, _extends2.default)({