@mui/material 9.0.0 → 9.0.1

package/InputBase/InputBase.mjs

@@ -10,18 +10,21 @@ import refType from '@mui/utils/refType';
 import composeClasses from '@mui/utils/composeClasses';
 import isHostComponent from '@mui/utils/isHostComponent';
 import TextareaAutosize from "../TextareaAutosize/index.mjs";
-import formControlState from "../FormControl/formControlState.mjs";
 import FormControlContext from "../FormControl/FormControlContext.mjs";
-import useFormControl from "../FormControl/useFormControl.mjs";
+import { useFormControlState } from "../FormControl/useFormControl.mjs";
 import { styled, globalCss } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import capitalize from "../utils/capitalize.mjs";
 import useForkRef from "../utils/useForkRef.mjs";
 import useEnhancedEffect from "../utils/useEnhancedEffect.mjs";
+import ownerDocument from "../utils/ownerDocument.mjs";
+import getActiveElement from "../utils/getActiveElement.mjs";
 import { isFilled } from "./utils.mjs";
 import inputBaseClasses, { getInputBaseUtilityClass } from "./inputBaseClasses.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const MUI_AUTO_FILL = 'mui-auto-fill';
+const MUI_AUTO_FILL_CANCEL = 'mui-auto-fill-cancel';
 export const rootOverridesResolver = (props, styles) => {
   const {
     ownerState
@@ -184,11 +187,11 @@ export const InputBaseInput = styled('input', {
         ownerState
       }) => !ownerState.disableInjectingGlobalStyles,
       style: {
-        animationName: 'mui-auto-fill-cancel',
+        animationName: MUI_AUTO_FILL_CANCEL,
         animationDuration: '10ms',
         '&:-webkit-autofill': {
           animationDuration: '5000s',
-          animationName: 'mui-auto-fill'
+          animationName: MUI_AUTO_FILL
         }
       }
     }, {
@@ -219,14 +222,16 @@ export const InputBaseInput = styled('input', {
   };
 }));
 const InputGlobalStyles = globalCss({
-  '@keyframes mui-auto-fill': {
+  // Keep keyframes non-empty for Emotion production builds. Animation properties are ignored
+  // inside keyframes, avoiding the visible display animation triggered by Chrome 117+.
+  [`@keyframes ${MUI_AUTO_FILL}`]: {
     from: {
-      display: 'block'
+      animationName: MUI_AUTO_FILL
     }
   },
-  '@keyframes mui-auto-fill-cancel': {
+  [`@keyframes ${MUI_AUTO_FILL_CANCEL}`]: {
     from: {
-      display: 'block'
+      animationName: MUI_AUTO_FILL_CANCEL
     }
   }
 });
@@ -243,6 +248,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
   });
   const {
     'aria-describedby': ariaDescribedby,
+    'aria-label': ariaLabel,
     autoComplete,
     autoFocus,
     className,
@@ -294,7 +300,10 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
   }, []);
   const handleInputRef = useForkRef(inputRef, inputRefProp, inputPropsProp.ref, handleInputRefWarning);
   const [focused, setFocused] = React.useState(false);
-  const muiFormControl = useFormControl();
+  const [fcs, muiFormControl] = useFormControlState({
+    props,
+    states: ['color', 'disabled', 'error', 'hiddenLabel', 'size', 'required', 'filled']
+  });
   if (process.env.NODE_ENV !== 'production') {
     // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -305,11 +314,6 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
       return undefined;
     }, [muiFormControl]);
   }
-  const fcs = formControlState({
-    props,
-    muiFormControl,
-    states: ['color', 'disabled', 'error', 'hiddenLabel', 'size', 'required', 'filled']
-  });
   fcs.focused = muiFormControl ? muiFormControl.focused : focused;
 
   // The blur won't fire when the disabled state is set on a focused input.
@@ -340,6 +344,32 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
       });
     }
   }, [value, checkDirty, isControlled]);
+
+  // Sync focused state when autoFocus is used in SSR.
+  // If the browser focused the element before hydration, the onFocus handler never
+  // fires. If it did not, React hydration does not call focus() for autoFocus.
+  useEnhancedEffect(() => {
+    if (!autoFocus) {
+      return;
+    }
+    const input = inputRef.current;
+    if (!input) {
+      return;
+    }
+    const doc = ownerDocument(input);
+    const activeElement = getActiveElement(doc);
+    const noElementFocused = activeElement == null || activeElement === doc.body || activeElement === doc.documentElement;
+    if (input === activeElement) {
+      if (muiFormControl && muiFormControl.onFocus) {
+        muiFormControl.onFocus();
+      } else {
+        setFocused(true);
+      }
+    } else if (noElementFocused) {
+      input.focus();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [autoFocus]);
   const handleFocus = event => {
     if (onFocus) {
       onFocus(event);
@@ -428,7 +458,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
   }
   const handleAutoFill = event => {
     // Provide a fake value as Chrome might not let you access it for security reasons.
-    checkDirty(event.animationName === 'mui-auto-fill-cancel' ? inputRef.current : {
+    checkDirty(event.animationName === MUI_AUTO_FILL_CANCEL ? inputRef.current : {
       value: 'x'
     });
   };
@@ -480,6 +510,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
         children: /*#__PURE__*/_jsx(Input, {
           "aria-invalid": fcs.error,
           "aria-describedby": ariaDescribedby,
+          "aria-label": ariaLabel,
           autoComplete: autoComplete,
           autoFocus: autoFocus,
           defaultValue: defaultValue,
@@ -525,6 +556,10 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes /* remove-proptypes
    * @ignore
    */
   'aria-describedby': PropTypes.string,
+  /**
+   * @ignore
+   */
+  'aria-label': PropTypes.string,
   /**
    * This prop helps users to fill forms faster, especially on mobile devices.
    * The name can be confusing, as it's more like an autofill.

package/InputLabel/InputLabel.js

@@ -11,8 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _clsx = _interopRequireDefault(require("clsx"));
-var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
-var _useFormControl = _interopRequireDefault(require("../FormControl/useFormControl"));
+var _useFormControl = require("../FormControl/useFormControl");
 var _FormLabel = _interopRequireWildcard(require("../FormLabel"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
@@ -190,16 +189,14 @@ const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, re
     className,
     ...other
   } = props;
-  const muiFormControl = (0, _useFormControl.default)();
+  const [fcs, muiFormControl] = (0, _useFormControl.useFormControlState)({
+    props,
+    states: ['size', 'variant', 'required', 'focused']
+  });
   let shrink = shrinkProp;
   if (typeof shrink === 'undefined' && muiFormControl) {
     shrink = muiFormControl.filled || muiFormControl.focused || muiFormControl.adornedStart;
   }
-  const fcs = (0, _formControlState.default)({
-    props,
-    muiFormControl,
-    states: ['size', 'variant', 'required', 'focused']
-  });
   const ownerState = {
     ...props,
     disableAnimation,

package/InputLabel/InputLabel.mjs

@@ -4,8 +4,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import clsx from 'clsx';
-import formControlState from "../FormControl/formControlState.mjs";
-import useFormControl from "../FormControl/useFormControl.mjs";
+import { useFormControlState } from "../FormControl/useFormControl.mjs";
 import FormLabel, { formLabelClasses } from "../FormLabel/index.mjs";
 import capitalize from "../utils/capitalize.mjs";
 import rootShouldForwardProp from "../styles/rootShouldForwardProp.mjs";
@@ -183,16 +182,14 @@ const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, re
     className,
     ...other
   } = props;
-  const muiFormControl = useFormControl();
+  const [fcs, muiFormControl] = useFormControlState({
+    props,
+    states: ['size', 'variant', 'required', 'focused']
+  });
   let shrink = shrinkProp;
   if (typeof shrink === 'undefined' && muiFormControl) {
     shrink = muiFormControl.filled || muiFormControl.focused || muiFormControl.adornedStart;
   }
-  const fcs = formControlState({
-    props,
-    muiFormControl,
-    states: ['size', 'variant', 'required', 'focused']
-  });
   const ownerState = {
     ...props,
     disableAnimation,

package/LinearProgress/LinearProgress.d.mts

@@ -18,18 +18,28 @@ export interface LinearProgressProps extends StandardProps<React.HTMLAttributes<
    * @default 'primary'
    */
   color?: OverridableStringUnion<'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'inherit', LinearProgressPropsColorOverrides> | undefined;
+  /**
+   * The maximum value for the progress indicator for the determinate and buffer variants.
+   * @default 100
+   */
+  max?: number | undefined;
+  /**
+   * The minimum value for the progress indicator for the determinate and buffer variants.
+   * @default 0
+   */
+  min?: number | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx?: SxProps<Theme> | undefined;
   /**
    * The value of the progress indicator for the determinate and buffer variants.
-   * Value between 0 and 100.
+   * Value between `min` and `max`.
    */
   value?: number | undefined;
   /**
    * The value for the buffer variant.
-   * Value between 0 and 100.
+   * Value between `min` and `max`.
    */
   valueBuffer?: number | undefined;
   /**

package/LinearProgress/LinearProgress.d.ts

@@ -18,18 +18,28 @@ export interface LinearProgressProps extends StandardProps<React.HTMLAttributes<
    * @default 'primary'
    */
   color?: OverridableStringUnion<'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'inherit', LinearProgressPropsColorOverrides> | undefined;
+  /**
+   * The maximum value for the progress indicator for the determinate and buffer variants.
+   * @default 100
+   */
+  max?: number | undefined;
+  /**
+   * The minimum value for the progress indicator for the determinate and buffer variants.
+   * @default 0
+   */
+  min?: number | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx?: SxProps<Theme> | undefined;
   /**
    * The value of the progress indicator for the determinate and buffer variants.
-   * Value between 0 and 100.
+   * Value between `min` and `max`.
    */
   value?: number | undefined;
   /**
    * The value for the buffer variant.
-   * Value between 0 and 100.
+   * Value between `min` and `max`.
    */
   valueBuffer?: number | undefined;
   /**

package/LinearProgress/LinearProgress.js

@@ -342,6 +342,8 @@ const LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress(inP
   const {
     className,
     color = 'primary',
+    max: maxProp,
+    min: minProp,
     value,
     valueBuffer,
     variant = 'indeterminate',
@@ -352,6 +354,13 @@ const LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress(inP
     color,
     variant
   };
+  if (process.env.NODE_ENV !== 'production') {
+    if (['indeterminate', 'query'].includes(variant) && (minProp !== undefined || maxProp !== undefined)) {
+      console.warn(`MUI: You have provided the \`min\` or \`max\` props with an 'indeterminate' or 'query' variant. These props will have no effect.`);
+    }
+  }
+  const min = minProp ?? 0;
+  const max = maxProp ?? 100;
   const classes = useUtilityClasses(ownerState);
   const isRtl = (0, _RtlProvider.useRtl)();
   const rootProps = {};
@@ -361,25 +370,38 @@ const LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress(inP
   };
   if (variant === 'determinate' || variant === 'buffer') {
     if (value !== undefined) {
-      rootProps['aria-valuenow'] = Math.round(value);
-      rootProps['aria-valuemin'] = 0;
-      rootProps['aria-valuemax'] = 100;
-      let transform = value - 100;
+      if (process.env.NODE_ENV !== 'production') {
+        if (value < min || value > max || min >= max) {
+          console.error(`MUI: The min, max, and value props in LinearProgress should be numbers where min < max and min <= value <= max. Received min=${min}, max=${max}, value=${value}.`);
+        }
+      }
+      const range = max - min;
+      let transform = (value - min) / range * 100 - 100;
       if (isRtl) {
         transform = -transform;
       }
-      inlineStyles.bar1.transform = `translateX(${transform}%)`;
+      inlineStyles.bar1.transform = range > 0 ? `translateX(${transform}%)` : 'translateX(-100%)'; // empty-state fallback when range is invalid
+
+      rootProps['aria-valuenow'] = value;
+      rootProps['aria-valuemin'] = min;
+      rootProps['aria-valuemax'] = max;
     } else if (process.env.NODE_ENV !== 'production') {
-      console.error('MUI: You need to provide a value prop ' + 'when using the determinate or buffer variant of LinearProgress .');
+      console.error('MUI: You need to provide a value prop ' + 'when using the determinate or buffer variant of LinearProgress.');
     }
   }
   if (variant === 'buffer') {
     if (valueBuffer !== undefined) {
-      let transform = (valueBuffer || 0) - 100;
+      if (process.env.NODE_ENV !== 'production') {
+        if (valueBuffer < min || valueBuffer > max || valueBuffer < value || min >= max) {
+          console.error(`MUI: The min, max, value, and valueBuffer props in LinearProgress should be numbers where min < max and min <= value <= valueBuffer <= max. Received min=${min}, max=${max}, value=${value}, valueBuffer=${valueBuffer}.`);
+        }
+      }
+      const range = max - min;
+      let transform = (valueBuffer - min) / range * 100 - 100;
       if (isRtl) {
         transform = -transform;
       }
-      inlineStyles.bar2.transform = `translateX(${transform}%)`;
+      inlineStyles.bar2.transform = range > 0 ? `translateX(${transform}%)` : 'translateX(-100%)'; // empty-state fallback when range is invalid
     } else if (process.env.NODE_ENV !== 'production') {
       console.error('MUI: You need to provide a valueBuffer prop ' + 'when using the buffer variant of LinearProgress.');
     }
@@ -425,18 +447,28 @@ process.env.NODE_ENV !== "production" ? LinearProgress.propTypes /* remove-propt
    * @default 'primary'
    */
   color: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['inherit', 'primary', 'secondary']), _propTypes.default.string]),
+  /**
+   * The maximum value for the progress indicator for the determinate and buffer variants.
+   * @default 100
+   */
+  max: _propTypes.default.number,
+  /**
+   * The minimum value for the progress indicator for the determinate and buffer variants.
+   * @default 0
+   */
+  min: _propTypes.default.number,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   /**
    * The value of the progress indicator for the determinate and buffer variants.
-   * Value between 0 and 100.
+   * Value between `min` and `max`.
    */
   value: _propTypes.default.number,
   /**
    * The value for the buffer variant.
-   * Value between 0 and 100.
+   * Value between `min` and `max`.
    */
   valueBuffer: _propTypes.default.number,
   /**

package/LinearProgress/LinearProgress.mjs

@@ -335,6 +335,8 @@ const LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress(inP
   const {
     className,
     color = 'primary',
+    max: maxProp,
+    min: minProp,
     value,
     valueBuffer,
     variant = 'indeterminate',
@@ -345,6 +347,13 @@ const LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress(inP
     color,
     variant
   };
+  if (process.env.NODE_ENV !== 'production') {
+    if (['indeterminate', 'query'].includes(variant) && (minProp !== undefined || maxProp !== undefined)) {
+      console.warn(`MUI: You have provided the \`min\` or \`max\` props with an 'indeterminate' or 'query' variant. These props will have no effect.`);
+    }
+  }
+  const min = minProp ?? 0;
+  const max = maxProp ?? 100;
   const classes = useUtilityClasses(ownerState);
   const isRtl = useRtl();
   const rootProps = {};
@@ -354,25 +363,38 @@ const LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress(inP
   };
   if (variant === 'determinate' || variant === 'buffer') {
     if (value !== undefined) {
-      rootProps['aria-valuenow'] = Math.round(value);
-      rootProps['aria-valuemin'] = 0;
-      rootProps['aria-valuemax'] = 100;
-      let transform = value - 100;
+      if (process.env.NODE_ENV !== 'production') {
+        if (value < min || value > max || min >= max) {
+          console.error(`MUI: The min, max, and value props in LinearProgress should be numbers where min < max and min <= value <= max. Received min=${min}, max=${max}, value=${value}.`);
+        }
+      }
+      const range = max - min;
+      let transform = (value - min) / range * 100 - 100;
       if (isRtl) {
         transform = -transform;
       }
-      inlineStyles.bar1.transform = `translateX(${transform}%)`;
+      inlineStyles.bar1.transform = range > 0 ? `translateX(${transform}%)` : 'translateX(-100%)'; // empty-state fallback when range is invalid
+
+      rootProps['aria-valuenow'] = value;
+      rootProps['aria-valuemin'] = min;
+      rootProps['aria-valuemax'] = max;
     } else if (process.env.NODE_ENV !== 'production') {
-      console.error('MUI: You need to provide a value prop ' + 'when using the determinate or buffer variant of LinearProgress .');
+      console.error('MUI: You need to provide a value prop ' + 'when using the determinate or buffer variant of LinearProgress.');
     }
   }
   if (variant === 'buffer') {
     if (valueBuffer !== undefined) {
-      let transform = (valueBuffer || 0) - 100;
+      if (process.env.NODE_ENV !== 'production') {
+        if (valueBuffer < min || valueBuffer > max || valueBuffer < value || min >= max) {
+          console.error(`MUI: The min, max, value, and valueBuffer props in LinearProgress should be numbers where min < max and min <= value <= valueBuffer <= max. Received min=${min}, max=${max}, value=${value}, valueBuffer=${valueBuffer}.`);
+        }
+      }
+      const range = max - min;
+      let transform = (valueBuffer - min) / range * 100 - 100;
       if (isRtl) {
         transform = -transform;
       }
-      inlineStyles.bar2.transform = `translateX(${transform}%)`;
+      inlineStyles.bar2.transform = range > 0 ? `translateX(${transform}%)` : 'translateX(-100%)'; // empty-state fallback when range is invalid
     } else if (process.env.NODE_ENV !== 'production') {
       console.error('MUI: You need to provide a valueBuffer prop ' + 'when using the buffer variant of LinearProgress.');
     }
@@ -418,18 +440,28 @@ process.env.NODE_ENV !== "production" ? LinearProgress.propTypes /* remove-propt
    * @default 'primary'
    */
   color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['inherit', 'primary', 'secondary']), PropTypes.string]),
+  /**
+   * The maximum value for the progress indicator for the determinate and buffer variants.
+   * @default 100
+   */
+  max: PropTypes.number,
+  /**
+   * The minimum value for the progress indicator for the determinate and buffer variants.
+   * @default 0
+   */
+  min: PropTypes.number,
   /**
    * 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 value of the progress indicator for the determinate and buffer variants.
-   * Value between 0 and 100.
+   * Value between `min` and `max`.
    */
   value: PropTypes.number,
   /**
    * The value for the buffer variant.
-   * Value between 0 and 100.
+   * Value between `min` and `max`.
    */
   valueBuffer: PropTypes.number,
   /**

package/List/List.js

@@ -55,7 +55,8 @@ const ListRoot = (0, _zeroStyled.styled)('ul', {
       ownerState
     }) => ownerState.subheader,
     style: {
-      paddingTop: 0
+      paddingTop: 0,
+      isolation: 'isolate' // Prevent overlap with iOS overlay scrollbars.
     }
   }]
 });

package/List/List.mjs

@@ -48,7 +48,8 @@ const ListRoot = styled('ul', {
       ownerState
     }) => ownerState.subheader,
     style: {
-      paddingTop: 0
+      paddingTop: 0,
+      isolation: 'isolate' // Prevent overlap with iOS overlay scrollbars.
     }
   }]
 });

package/ListItemButton/ListItemButton.js

@@ -172,6 +172,12 @@ const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inP
     selected
   };
   const classes = useUtilityClasses(ownerState);
+
+  // Don't forward the 'root' class to the ButtonBase, as it will get duplicated with the one passed to the className prop.
+  const {
+    root,
+    ...forwardedClasses
+  } = classes;
   const handleRef = (0, _useForkRef.default)(listItemRef, ref);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListContext.default.Provider, {
     value: childContext,
@@ -186,7 +192,7 @@ const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inP
       ownerState: ownerState,
       className: (0, _clsx.default)(classes.root, className),
       ...other,
-      classes: classes,
+      classes: forwardedClasses,
       children: children
     })
   });

package/ListItemButton/ListItemButton.mjs

@@ -164,6 +164,12 @@ const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inP
     selected
   };
   const classes = useUtilityClasses(ownerState);
+
+  // Don't forward the 'root' class to the ButtonBase, as it will get duplicated with the one passed to the className prop.
+  const {
+    root,
+    ...forwardedClasses
+  } = classes;
   const handleRef = useForkRef(listItemRef, ref);
   return /*#__PURE__*/_jsx(ListContext.Provider, {
     value: childContext,
@@ -178,7 +184,7 @@ const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inP
       ownerState: ownerState,
       className: clsx(classes.root, className),
       ...other,
-      classes: classes,
+      classes: forwardedClasses,
       children: children
     })
   });

package/MenuItem/MenuItem.js

@@ -206,6 +206,12 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
     disableGutters
   };
   const classes = useUtilityClasses(props);
+
+  // Don't forward the 'root' class to the ButtonBase, as it will get duplicated with the one passed to the className prop.
+  const {
+    root,
+    ...forwardedClasses
+  } = classes;
   const rovingItemProps = (0, _useRovingTabIndex.useRovingTabIndexItem)({
     id: rovingItemId,
     ref,
@@ -238,7 +244,7 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
       className: (0, _clsx.default)(classes.root, className),
       ...other,
       ownerState: ownerState,
-      classes: classes
+      classes: forwardedClasses
     })
   });
 });

package/MenuItem/MenuItem.mjs

@@ -198,6 +198,12 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
     disableGutters
   };
   const classes = useUtilityClasses(props);
+
+  // Don't forward the 'root' class to the ButtonBase, as it will get duplicated with the one passed to the className prop.
+  const {
+    root,
+    ...forwardedClasses
+  } = classes;
   const rovingItemProps = useRovingTabIndexItem({
     id: rovingItemId,
     ref,
@@ -230,7 +236,7 @@ const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
       className: clsx(classes.root, className),
       ...other,
       ownerState: ownerState,
-      classes: classes
+      classes: forwardedClasses
     })
   });
 });

package/MenuList/MenuList.js

@@ -10,6 +10,7 @@ exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useRovingTabIndex = require("@mui/utils/useRovingTabIndex");
+var _contains = _interopRequireDefault(require("../utils/contains"));
 var _ownerDocument = _interopRequireDefault(require("../utils/ownerDocument"));
 var _getActiveElement = _interopRequireDefault(require("../utils/getActiveElement"));
 var _getScrollbarSize = _interopRequireDefault(require("../utils/getScrollbarSize"));
@@ -185,7 +186,7 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
         return null;
       }
       const currentFocus = (0, _getActiveElement.default)((0, _ownerDocument.default)(listRef.current));
-      if (currentFocus && listRef.current.contains(currentFocus)) {
+      if (currentFocus && (0, _contains.default)(listRef.current, currentFocus)) {
         return currentFocus;
       }
       return focusInitialTarget(true);

package/MenuList/MenuList.mjs

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { isItemFocusable } from '@mui/utils/useRovingTabIndex';
+import contains from "../utils/contains.mjs";
 import ownerDocument from "../utils/ownerDocument.mjs";
 import getActiveElement from "../utils/getActiveElement.mjs";
 import getScrollbarSize from "../utils/getScrollbarSize.mjs";
@@ -178,7 +179,7 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
         return null;
       }
       const currentFocus = getActiveElement(ownerDocument(listRef.current));
-      if (currentFocus && listRef.current.contains(currentFocus)) {
+      if (currentFocus && contains(listRef.current, currentFocus)) {
         return currentFocus;
       }
       return focusInitialTarget(true);

package/NativeSelect/NativeSelect.js

@@ -12,8 +12,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _NativeSelectInput = _interopRequireDefault(require("./NativeSelectInput"));
-var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
-var _useFormControl = _interopRequireDefault(require("../FormControl/useFormControl"));
+var _useFormControl = require("../FormControl/useFormControl");
 var _ArrowDropDown = _interopRequireDefault(require("../internal/svg-icons/ArrowDropDown"));
 var _Input = _interopRequireDefault(require("../Input"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
@@ -47,10 +46,8 @@ const NativeSelect = /*#__PURE__*/React.forwardRef(function NativeSelect(inProps
     variant,
     ...other
   } = props;
-  const muiFormControl = (0, _useFormControl.default)();
-  const fcs = (0, _formControlState.default)({
+  const [fcs] = (0, _useFormControl.useFormControlState)({
     props,
-    muiFormControl,
     states: ['variant']
   });
   const ownerState = {