@mui/material 5.11.9 → 5.11.11

package/legacy/Stack/Stack.js

@@ -1,130 +1,21 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _typeof from "@babel/runtime/helpers/esm/typeof";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
 import PropTypes from 'prop-types';
-import { createUnarySpacing, getValue, handleBreakpoints, mergeBreakpointsInOrder, unstable_extendSxProp as extendSxProp, unstable_resolveBreakpointValues as resolveBreakpointValues } from '@mui/system';
-import { deepmerge } from '@mui/utils';
+import { createStack } from '@mui/system';
 import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
-
-/**
- * Return an array with the separator React element interspersed between
- * each React node of the input children.
- *
- * > joinChildren([1,2,3], 0)
- * [1,0,2,0,3]
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-function joinChildren(children, separator) {
-  var childrenArray = React.Children.toArray(children).filter(Boolean);
-  return childrenArray.reduce(function (output, child, index) {
-    output.push(child);
-    if (index < childrenArray.length - 1) {
-      output.push( /*#__PURE__*/React.cloneElement(separator, {
-        key: "separator-".concat(index)
-      }));
+import _useThemeProps from '../styles/useThemeProps';
+var Stack = createStack({
+  createStyledComponent: styled('div', {
+    name: 'MuiStack',
+    slot: 'Root',
+    overridesResolver: function overridesResolver(props, styles) {
+      return styles.root;
     }
-    return output;
-  }, []);
-}
-var getSideFromDirection = function getSideFromDirection(direction) {
-  return {
-    row: 'Left',
-    'row-reverse': 'Right',
-    column: 'Top',
-    'column-reverse': 'Bottom'
-  }[direction];
-};
-export var style = function style(_ref) {
-  var ownerState = _ref.ownerState,
-    theme = _ref.theme;
-  var styles = _extends({
-    display: 'flex',
-    flexDirection: 'column'
-  }, handleBreakpoints({
-    theme: theme
-  }, resolveBreakpointValues({
-    values: ownerState.direction,
-    breakpoints: theme.breakpoints.values
-  }), function (propValue) {
-    return {
-      flexDirection: propValue
-    };
-  }));
-  if (ownerState.spacing) {
-    var transformer = createUnarySpacing(theme);
-    var base = Object.keys(theme.breakpoints.values).reduce(function (acc, breakpoint) {
-      if (_typeof(ownerState.spacing) === 'object' && ownerState.spacing[breakpoint] != null || _typeof(ownerState.direction) === 'object' && ownerState.direction[breakpoint] != null) {
-        acc[breakpoint] = true;
-      }
-      return acc;
-    }, {});
-    var directionValues = resolveBreakpointValues({
-      values: ownerState.direction,
-      base: base
+  }),
+  useThemeProps: function useThemeProps(inProps) {
+    return _useThemeProps({
+      props: inProps,
+      name: 'MuiStack'
     });
-    var spacingValues = resolveBreakpointValues({
-      values: ownerState.spacing,
-      base: base
-    });
-    if (_typeof(directionValues) === 'object') {
-      Object.keys(directionValues).forEach(function (breakpoint, index, breakpoints) {
-        var directionValue = directionValues[breakpoint];
-        if (!directionValue) {
-          var previousDirectionValue = index > 0 ? directionValues[breakpoints[index - 1]] : 'column';
-          directionValues[breakpoint] = previousDirectionValue;
-        }
-      });
-    }
-    var styleFromPropValue = function styleFromPropValue(propValue, breakpoint) {
-      return {
-        '& > :not(style) + :not(style)': _defineProperty({
-          margin: 0
-        }, "margin".concat(getSideFromDirection(breakpoint ? directionValues[breakpoint] : ownerState.direction)), getValue(transformer, propValue))
-      };
-    };
-    styles = deepmerge(styles, handleBreakpoints({
-      theme: theme
-    }, spacingValues, styleFromPropValue));
-  }
-  styles = mergeBreakpointsInOrder(theme.breakpoints, styles);
-  return styles;
-};
-var StackRoot = styled('div', {
-  name: 'MuiStack',
-  slot: 'Root',
-  overridesResolver: function overridesResolver(props, styles) {
-    return [styles.root];
   }
-})(style);
-var Stack = /*#__PURE__*/React.forwardRef(function Stack(inProps, ref) {
-  var themeProps = useThemeProps({
-    props: inProps,
-    name: 'MuiStack'
-  });
-  var props = extendSxProp(themeProps);
-  var _props$component = props.component,
-    component = _props$component === void 0 ? 'div' : _props$component,
-    _props$direction = props.direction,
-    direction = _props$direction === void 0 ? 'column' : _props$direction,
-    _props$spacing = props.spacing,
-    spacing = _props$spacing === void 0 ? 0 : _props$spacing,
-    divider = props.divider,
-    children = props.children,
-    other = _objectWithoutProperties(props, ["component", "direction", "spacing", "divider", "children"]);
-  var ownerState = {
-    direction: direction,
-    spacing: spacing
-  };
-  return /*#__PURE__*/_jsx(StackRoot, _extends({
-    as: component,
-    ownerState: ownerState,
-    ref: ref
-  }, other, {
-    children: divider ? joinChildren(children, divider) : children
-  }));
 });
 process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

package/legacy/Stack/index.js

@@ -1 +1,2 @@
-export { default } from './Stack';
+export { default } from './Stack';
+export { default as stackClasses } from './stackClasses';

package/legacy/Stack/stackClasses.js

@@ -0,0 +1,7 @@
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
+export function getStackUtilityClass(slot) {
+  return generateUtilityClass('MuiStack', slot);
+}
+var stackClasses = generateUtilityClasses('MuiStack', ['root']);
+export default stackClasses;

package/legacy/SwipeableDrawer/SwipeableDrawer.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import * as React from 'react';
-import { flushSync } from 'react-dom';
+import * as ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { elementTypeAcceptingRef } from '@mui/utils';
 import { useThemeProps } from '@mui/system';
@@ -217,7 +217,7 @@ var SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(inP
     }
     claimedSwipeInstance = null;
     touchDetected.current = false;
-    flushSync(function () {
+    ReactDOM.flushSync(function () {
       setMaybeSwiping(false);
     });
 
@@ -270,7 +270,7 @@ var SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(inP
       // this is because Safari Mobile will not fire any mouse events (still fires touch though) if the DOM changes during mousemove.
       // so do this change on first touchmove instead of touchstart
       if (force || !(disableDiscovery && allowSwipeInChildren)) {
-        flushSync(function () {
+        ReactDOM.flushSync(function () {
           setMaybeSwiping(true);
         });
       }

package/legacy/Unstable_Grid2/Grid2.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
-import { createGrid } from '@mui/system/Unstable_Grid';
+import { createGrid as createGrid2 } from '@mui/system/Unstable_Grid';
 import { styled, useThemeProps as _useThemeProps } from '../styles';
-var Grid2 = createGrid({
+var Grid2 = createGrid2({
   createStyledComponent: styled('div', {
     name: 'MuiGrid2',
     overridesResolver: function overridesResolver(props, styles) {
@@ -9,7 +9,6 @@ var Grid2 = createGrid({
     }
   }),
   componentName: 'MuiGrid2',
-  // eslint-disable-next-line material-ui/mui-name-matches-component-name
   useThemeProps: function useThemeProps(inProps) {
     return _useThemeProps({
       props: inProps,

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.11.9
+ * @mui/material v5.11.11
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/internal/SwitchBase.js

@@ -149,7 +149,7 @@ var SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref) {
       defaultChecked: defaultChecked,
       className: classes.input,
       disabled: disabled,
-      id: hasLabelFor && id,
+      id: hasLabelFor ? id : undefined,
       name: name,
       onChange: handleInputChange,
       readOnly: readOnly,

package/legacy/styles/createTheme.js

@@ -47,6 +47,7 @@ function createTheme() {
     return deepmerge(acc, argument);
   }, muiTheme);
   if (process.env.NODE_ENV !== 'production') {
+    // TODO v6: Refactor to use globalStateClassesMapping from @mui/utils once `readOnly` state class is used in Rating component.
     var stateClasses = ['active', 'checked', 'completed', 'disabled', 'error', 'expanded', 'focused', 'focusVisible', 'required', 'selected'];
     var traverse = function traverse(node, component) {
       var key;

package/legacy/useAutocomplete/useAutocomplete.js

@@ -1,2 +1,2 @@
-export { useAutocomplete as default } from '@mui/base/AutocompleteUnstyled';
-export * from '@mui/base/AutocompleteUnstyled';
+export { default } from '@mui/base/useAutocomplete';
+export * from '@mui/base/useAutocomplete';

package/legacy/useMediaQuery/useMediaQuery.js

@@ -8,9 +8,8 @@ import useEnhancedEffect from '../utils/useEnhancedEffect';
  */
 
 function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
-  var supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
   var _React$useState = React.useState(function () {
-      if (noSsr && supportMatchMedia) {
+      if (noSsr && matchMedia) {
         return matchMedia(query).matches;
       }
       if (ssrMatchMedia) {
@@ -25,7 +24,7 @@ function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSs
     setMatch = _React$useState[1];
   useEnhancedEffect(function () {
     var active = true;
-    if (!supportMatchMedia) {
+    if (!matchMedia) {
       return undefined;
     }
     var queryList = matchMedia(query);
@@ -44,17 +43,22 @@ function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSs
       active = false;
       queryList.removeListener(updateMatch);
     };
-  }, [query, matchMedia, supportMatchMedia]);
+  }, [query, matchMedia]);
   return match;
 }
 
 // eslint-disable-next-line no-useless-concat -- Workaround for https://github.com/webpack/webpack/issues/14814
 var maybeReactUseSyncExternalStore = React['useSyncExternalStore' + ''];
-function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia) {
+function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
   var getDefaultSnapshot = React.useCallback(function () {
     return defaultMatches;
   }, [defaultMatches]);
   var getServerSnapshot = React.useMemo(function () {
+    if (noSsr && matchMedia) {
+      return function () {
+        return matchMedia(query).matches;
+      };
+    }
     if (ssrMatchMedia !== null) {
       var _ssrMatchMedia = ssrMatchMedia(query),
         matches = _ssrMatchMedia.matches;
@@ -63,7 +67,7 @@ function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia) {
       };
     }
     return getDefaultSnapshot;
-  }, [getDefaultSnapshot, query, ssrMatchMedia]);
+  }, [getDefaultSnapshot, query, ssrMatchMedia, noSsr, matchMedia]);
   var _React$useMemo = React.useMemo(function () {
       if (matchMedia === null) {
         return [getDefaultSnapshot, function () {
@@ -106,7 +110,8 @@ export default function useMediaQuery(queryInput) {
     matchMedia = _getThemeProps$matchM === void 0 ? supportMatchMedia ? window.matchMedia : null : _getThemeProps$matchM,
     _getThemeProps$ssrMat = _getThemeProps.ssrMatchMedia,
     ssrMatchMedia = _getThemeProps$ssrMat === void 0 ? null : _getThemeProps$ssrMat,
-    noSsr = _getThemeProps.noSsr;
+    _getThemeProps$noSsr = _getThemeProps.noSsr,
+    noSsr = _getThemeProps$noSsr === void 0 ? false : _getThemeProps$noSsr;
   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'));

package/modern/Avatar/Avatar.js

@@ -168,6 +168,7 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
     children = alt[0];
   } else {
     children = /*#__PURE__*/_jsx(AvatarFallback, {
+      ownerState: ownerState,
       className: classes.fallback
     });
   }

package/modern/Backdrop/Backdrop.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "component", "components", "componentsProps", "className", "invisible", "open", "slotProps", "slots", "transitionDuration", "TransitionComponent"];
+const _excluded = ["children", "className", "component", "components", "componentsProps", "invisible", "open", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -52,17 +52,16 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
   });
   const {
       children,
+      className,
       component = 'div',
       components = {},
       componentsProps = {},
-      className,
       invisible = false,
       open,
       slotProps = {},
       slots = {},
-      transitionDuration,
-      // eslint-disable-next-line react/prop-types
-      TransitionComponent = Fade
+      TransitionComponent = Fade,
+      transitionDuration
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = _extends({}, props, {
@@ -167,6 +166,12 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-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.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The component used for the transition.
+   * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * @default Fade
+   */
+  TransitionComponent: PropTypes.elementType,
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.

package/modern/Badge/Badge.js

@@ -1,18 +1,19 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["anchorOrigin", "className", "component", "components", "componentsProps", "overlap", "color", "invisible", "max", "badgeContent", "slots", "slotProps", "showZero", "variant"];
+const _excluded = ["anchorOrigin", "className", "classes", "component", "components", "componentsProps", "children", "overlap", "color", "invisible", "max", "badgeContent", "slots", "slotProps", "showZero", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { usePreviousProps } from '@mui/utils';
 import composeClasses from '@mui/base/composeClasses';
-import BadgeUnstyled from '@mui/base/BadgeUnstyled';
+import useBadge from '@mui/base/useBadge';
+import { useSlotProps } from '@mui/base';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
-import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps';
 import capitalize from '../utils/capitalize';
 import badgeClasses, { getBadgeUtilityClass } from './badgeClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const RADIUS_STANDARD = 10;
 const RADIUS_DOT = 4;
 const useUtilityClasses = ownerState => {
@@ -165,13 +166,14 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
         horizontal: 'right'
       },
       className,
-      component = 'span',
+      component,
       components = {},
       componentsProps = {},
+      children,
       overlap: overlapProp = 'rectangular',
       color: colorProp = 'default',
       invisible: invisibleProp = false,
-      max,
+      max: maxProp = 99,
       badgeContent: badgeContentProp,
       slots,
       slotProps,
@@ -179,73 +181,71 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
       variant: variantProp = 'standard'
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    badgeContent,
+    invisible: invisibleFromHook,
+    max,
+    displayValue: displayValueFromHook
+  } = useBadge({
+    max: maxProp,
+    invisible: invisibleProp,
+    badgeContent: badgeContentProp,
+    showZero
+  });
   const prevProps = usePreviousProps({
     anchorOrigin: anchorOriginProp,
     color: colorProp,
     overlap: overlapProp,
-    variant: variantProp
+    variant: variantProp,
+    badgeContent: badgeContentProp
   });
-  let invisible = invisibleProp;
-  if (invisibleProp === false && (badgeContentProp === 0 && !showZero || badgeContentProp == null && variantProp !== 'dot')) {
-    invisible = true;
-  }
+  const invisible = invisibleFromHook || badgeContent == null && variantProp !== 'dot';
   const {
     color = colorProp,
     overlap = overlapProp,
     anchorOrigin = anchorOriginProp,
     variant = variantProp
   } = invisible ? prevProps : props;
+  const displayValue = variant !== 'dot' ? displayValueFromHook : undefined;
   const ownerState = _extends({}, props, {
-    anchorOrigin,
+    badgeContent,
     invisible,
+    max,
+    displayValue,
+    showZero,
+    anchorOrigin,
     color,
     overlap,
     variant
   });
   const classes = useUtilityClasses(ownerState);
-  let displayValue;
-  if (variant !== 'dot') {
-    displayValue = badgeContentProp && Number(badgeContentProp) > max ? `${max}+` : badgeContentProp;
-  }
 
   // support both `slots` and `components` for backward compatibility
   const RootSlot = slots?.root ?? components.Root ?? BadgeRoot;
   const BadgeSlot = slots?.badge ?? components.Badge ?? BadgeBadge;
   const rootSlotProps = slotProps?.root ?? componentsProps.root;
   const badgeSlotProps = slotProps?.badge ?? componentsProps.badge;
-  return /*#__PURE__*/_jsx(BadgeUnstyled, _extends({
-    invisible: invisibleProp,
-    badgeContent: displayValue,
-    showZero: showZero,
-    max: max
-  }, other, {
-    slots: {
-      root: RootSlot,
-      badge: BadgeSlot
-    },
-    className: clsx(rootSlotProps?.className, classes.root, className),
-    slotProps: {
-      root: _extends({}, rootSlotProps, shouldSpreadAdditionalProps(RootSlot) && {
-        as: component,
-        ownerState: _extends({}, rootSlotProps?.ownerState, {
-          anchorOrigin,
-          color,
-          overlap,
-          variant
-        })
-      }),
-      badge: _extends({}, badgeSlotProps, {
-        className: clsx(classes.badge, badgeSlotProps?.className)
-      }, shouldSpreadAdditionalProps(BadgeSlot) && {
-        ownerState: _extends({}, badgeSlotProps?.ownerState, {
-          anchorOrigin,
-          color,
-          overlap,
-          variant
-        })
-      })
+  const rootProps = useSlotProps({
+    elementType: RootSlot,
+    externalSlotProps: rootSlotProps,
+    externalForwardedProps: other,
+    additionalProps: {
+      ref,
+      as: component
     },
-    ref: ref
+    ownerState,
+    className: clsx(rootSlotProps?.className, classes.root, className)
+  });
+  const badgeProps = useSlotProps({
+    elementType: BadgeSlot,
+    externalSlotProps: badgeSlotProps,
+    ownerState,
+    className: clsx(classes.badge, badgeSlotProps?.className)
+  });
+  return /*#__PURE__*/_jsxs(RootSlot, _extends({}, rootProps, {
+    children: [children, /*#__PURE__*/_jsx(BadgeSlot, _extends({}, badgeProps, {
+      children: displayValue
+    }))]
   }));
 });
 process.env.NODE_ENV !== "production" ? Badge.propTypes /* remove-proptypes */ = {

package/modern/Container/Container.js

@@ -1,4 +1,3 @@
-/* eslint-disable material-ui/mui-name-matches-component-name */
 import PropTypes from 'prop-types';
 import { createContainer } from '@mui/system';
 import capitalize from '../utils/capitalize';

package/modern/Dialog/DialogContext.js

@@ -1,5 +1,5 @@
-import { createContext } from 'react';
-const DialogContext = /*#__PURE__*/createContext({});
+import * as React from 'react';
+const DialogContext = /*#__PURE__*/React.createContext({});
 if (process.env.NODE_ENV !== 'production') {
   DialogContext.displayName = 'DialogContext';
 }

package/modern/InputBase/InputBase.js

@@ -435,7 +435,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
       ref: ref,
       onClick: handleClick
     }, other, {
-      className: clsx(classes.root, rootProps.className, className),
+      className: clsx(classes.root, rootProps.className, className, readOnly && 'MuiInputBase-readOnly'),
       children: [startAdornment, /*#__PURE__*/_jsx(FormControlContext.Provider, {
         value: null,
         children: /*#__PURE__*/_jsx(Input, _extends({
@@ -462,7 +462,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
           ownerState: _extends({}, ownerState, inputProps.ownerState)
         }, {
           ref: handleInputRef,
-          className: clsx(classes.input, inputProps.className),
+          className: clsx(classes.input, inputProps.className, readOnly && 'MuiInputBase-readOnly'),
           onBlur: handleBlur,
           onChange: handleChange,
           onFocus: handleFocus

package/modern/InputLabel/InputLabel.js

@@ -98,7 +98,9 @@ const InputLabelRoot = styled(FormLabel, {
 }, ownerState.shrink && {
   userSelect: 'none',
   pointerEvents: 'auto',
-  maxWidth: 'calc(133% - 24px)',
+  // Theoretically, we should have (8+5)*2/0.75 = 34px
+  // but it feels a better when it bleeds a bit on the left, so 32px.
+  maxWidth: 'calc(133% - 32px)',
   transform: 'translate(14px, -9px) scale(0.75)'
 })));
 const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, ref) {

package/modern/ListSubheader/ListSubheader.js

@@ -87,6 +87,7 @@ const ListSubheader = /*#__PURE__*/React.forwardRef(function ListSubheader(inPro
     ownerState: ownerState
   }, other));
 });
+ListSubheader.muiSkipListHighlight = true;
 process.env.NODE_ENV !== "production" ? ListSubheader.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/modern/MenuList/MenuList.js

@@ -194,6 +194,13 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
         activeItemIndex = index;
       }
     }
+    if (activeItemIndex === index && (child.props.disabled || child.props.muiSkipListHighlight || child.type.muiSkipListHighlight)) {
+      activeItemIndex += 1;
+      if (activeItemIndex >= children.length) {
+        // there are no focusable items within the list.
+        activeItemIndex = -1;
+      }
+    }
   });
   const items = React.Children.map(children, (child, index) => {
     if (index === activeItemIndex) {

package/modern/Modal/Modal.js

@@ -1,8 +1,9 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["BackdropComponent", "BackdropProps", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "slotProps", "slots", "theme"];
+const _excluded = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "slotProps", "slots", "theme"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import ModalUnstyled, { modalUnstyledClasses } from '@mui/base/ModalUnstyled';
 import { isHostComponent, resolveComponentProps } from '@mui/base/utils';
 import { elementAcceptingRef, HTMLElementType } from '@mui/utils';
@@ -11,9 +12,6 @@ import useThemeProps from '../styles/useThemeProps';
 import Backdrop from '../Backdrop';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const modalClasses = modalUnstyledClasses;
-const extendUtilityClasses = ownerState => {
-  return ownerState.classes;
-};
 const ModalRoot = styled('div', {
   name: 'MuiModal',
   slot: 'Root',
@@ -67,6 +65,8 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
   const {
       BackdropComponent = ModalBackdrop,
       BackdropProps,
+      classes,
+      className,
       closeAfterTransition = false,
       children,
       component,
@@ -101,7 +101,6 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
   const ownerState = _extends({}, props, commonProps, {
     exited
   });
-  const classes = extendUtilityClasses(ownerState);
   const RootSlot = slots?.root ?? components.Root ?? ModalRoot;
   const BackdropSlot = slots?.backdrop ?? components.Backdrop ?? BackdropComponent;
   const rootSlotProps = slotProps?.root ?? componentsProps.root;
@@ -115,15 +114,17 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
       root: () => _extends({}, resolveComponentProps(rootSlotProps, ownerState), !isHostComponent(RootSlot) && {
         as: component,
         theme
+      }, {
+        className: clsx(className, rootSlotProps?.className, classes?.root, !ownerState.open && ownerState.exited && classes?.hidden)
       }),
-      backdrop: () => _extends({}, BackdropProps, resolveComponentProps(backdropSlotProps, ownerState))
+      backdrop: () => _extends({}, BackdropProps, resolveComponentProps(backdropSlotProps, ownerState), {
+        className: clsx(backdropSlotProps?.className, classes?.backdrop)
+      })
     },
     onTransitionEnter: () => setExited(false),
     onTransitionExited: () => setExited(true),
     ref: ref
-  }, other, {
-    classes: classes
-  }, commonProps, {
+  }, other, commonProps, {
     children: children
   }));
 });
@@ -160,6 +161,10 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes /* remove-proptypes */ =
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
   /**
    * When set to true the Modal waits until a nested Transition is completed before closing.
    * @default false

package/modern/OutlinedInput/OutlinedInput.js

@@ -163,7 +163,7 @@ const OutlinedInput = /*#__PURE__*/React.forwardRef(function OutlinedInput(inPro
       ownerState: ownerState,
       className: classes.notchedOutline,
       label: label != null && label !== '' && fcs.required ? _React$Fragment || (_React$Fragment = /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [label, "\xA0", '*']
+        children: [label, "\u2009", '*']
       })) : label,
       notched: typeof notched !== 'undefined' ? notched : Boolean(state.startAdornment || state.filled || state.focused)
     }),