@mui/material 5.11.9 → 5.11.11

package/modern/Rating/Rating.js

@@ -46,7 +46,7 @@ const useUtilityClasses = ownerState => {
     focusVisible
   } = ownerState;
   const slots = {
-    root: ['root', `size${capitalize(size)}`, disabled && 'disabled', focusVisible && 'focusVisible', readOnly && 'readyOnly'],
+    root: ['root', `size${capitalize(size)}`, disabled && 'disabled', focusVisible && 'focusVisible', readOnly && 'readOnly'],
     label: ['label', 'pristine'],
     labelEmptyValue: [emptyValueFocused && 'labelEmptyValueActive'],
     icon: ['icon'],
@@ -444,7 +444,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
     ref: handleRef,
     onMouseMove: handleMouseMove,
     onMouseLeave: handleMouseLeave,
-    className: clsx(classes.root, className),
+    className: clsx(classes.root, className, readOnly && 'MuiRating-readOnly'),
     ownerState: ownerState,
     role: readOnly ? 'img' : null,
     "aria-label": readOnly ? getLabelText(value) : null

package/modern/Select/SelectInput.js

@@ -329,7 +329,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       computeDisplay = true;
     }
   }
-  const items = childrenArray.map((child, index, arr) => {
+  const items = childrenArray.map(child => {
     if (! /*#__PURE__*/React.isValidElement(child)) {
       return null;
     }
@@ -356,22 +356,6 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     if (selected) {
       foundMatch = true;
     }
-    if (child.props.value === undefined) {
-      return /*#__PURE__*/React.cloneElement(child, {
-        'aria-readonly': true,
-        role: 'option'
-      });
-    }
-    const isFirstSelectableElement = () => {
-      if (value) {
-        return selected;
-      }
-      const firstSelectableElement = arr.find(item => item?.props?.value !== undefined && item.props.disabled !== true);
-      if (child === firstSelectableElement) {
-        return true;
-      }
-      return selected;
-    };
     return /*#__PURE__*/React.cloneElement(child, {
       'aria-selected': selected ? 'true' : 'false',
       onClick: handleItemClick(child),
@@ -387,7 +371,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
         }
       },
       role: 'option',
-      selected: arr[0]?.props?.value === undefined || arr[0]?.props?.disabled === true ? isFirstSelectableElement() : selected,
+      selected,
       value: undefined,
       // The value is most likely not a valid HTML attribute.
       'data-value': child.props.value // Instead, we provide it as a data attribute.

package/modern/Slider/Slider.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { chainPropTypes } from '@mui/utils';
 import { isHostComponent, useSlotProps, unstable_composeClasses as composeClasses } from '@mui/base';
-import { useSlider } from '@mui/base/SliderUnstyled';
+import useSlider, { valueToPercent } from '@mui/base/useSlider';
 import { alpha, lighten, darken } from '@mui/system';
 import useThemeProps from '../styles/useThemeProps';
 import styled, { slotShouldForwardProp } from '../styles/styled';
@@ -17,7 +17,6 @@ import SliderValueLabel from './SliderValueLabel';
 import sliderClasses, { getSliderUtilityClass } from './sliderClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const valueToPercent = (value, min, max) => (value - min) * 100 / (max - min);
 function Identity(x) {
   return x;
 }
@@ -457,7 +456,6 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
       componentsProps = {},
       color = 'primary',
       classes: classesProp,
-      // eslint-disable-next-line react/prop-types
       className,
       disableSwap = false,
       disabled = false,
@@ -564,7 +562,8 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
     elementType: ThumbSlot,
     getSlotProps: getThumbProps,
     externalSlotProps: thumbSlotProps,
-    ownerState: _extends({}, ownerState, thumbSlotProps?.ownerState)
+    ownerState: _extends({}, ownerState, thumbSlotProps?.ownerState),
+    className: classes.thumb
   });
   const valueLabelProps = useSlotProps({
     elementType: ValueLabelSlot,
@@ -581,7 +580,8 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   const markLabelProps = useSlotProps({
     elementType: MarkLabelSlot,
     externalSlotProps: markLabelSlotProps,
-    ownerState
+    ownerState,
+    className: classes.markLabel
   });
   const inputSliderProps = useSlotProps({
     elementType: InputSlot,
@@ -622,8 +622,10 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
       const percent = valueToPercent(value, min, max);
       const style = axisProps[axis].offset(percent);
       const ValueLabelComponent = valueLabelDisplay === 'off' ? Forward : ValueLabelSlot;
-      return /*#__PURE__*/_jsx(React.Fragment, {
-        children: /*#__PURE__*/_jsx(ValueLabelComponent, _extends({}, !isHostComponent(ValueLabelComponent) && {
+      return (
+        /*#__PURE__*/
+        /* TODO v6: Change component structure. It will help in avoiding the complicated React.cloneElement API added in SliderValueLabel component. Should be: Thumb -> Input, ValueLabel. Follow Joy UI's Slider structure. */
+        _jsx(ValueLabelComponent, _extends({}, !isHostComponent(ValueLabelComponent) && {
           valueLabelFormat,
           valueLabelDisplay,
           value: typeof valueLabelFormat === 'function' ? valueLabelFormat(scale(value), index) : valueLabelFormat,
@@ -632,8 +634,7 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
           disabled
         }, valueLabelProps, {
           children: /*#__PURE__*/_jsx(ThumbSlot, _extends({
-            "data-index": index,
-            "data-focusvisible": focusedThumbIndex === index
+            "data-index": index
           }, thumbProps, {
             className: clsx(classes.thumb, thumbProps.className, active === index && classes.active, focusedThumbIndex === index && classes.focusVisible),
             style: _extends({}, style, {
@@ -648,8 +649,8 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
               value: values[index]
             }, inputSliderProps))
           }))
-        }))
-      }, index);
+        }), index)
+      );
     })]
   }));
 });
@@ -690,6 +691,10 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
    * Override or extend the styles applied to the component.
    */
   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/modern/Snackbar/Snackbar.js

@@ -4,13 +4,12 @@ const _excluded = ["onEnter", "onExited"],
   _excluded2 = ["action", "anchorOrigin", "autoHideDuration", "children", "className", "ClickAwayListenerProps", "ContentProps", "disableWindowBlurListener", "message", "onBlur", "onClose", "onFocus", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "TransitionComponent", "transitionDuration", "TransitionProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses, useSlotProps } from '@mui/base';
 import ClickAwayListener from '@mui/base/ClickAwayListener';
+import useSnackbar from '@mui/base/useSnackbar';
 import styled from '../styles/styled';
 import useTheme from '../styles/useTheme';
 import useThemeProps from '../styles/useThemeProps';
-import useEventCallback from '../utils/useEventCallback';
 import capitalize from '../utils/capitalize';
 import Grow from '../Grow';
 import SnackbarContent from '../SnackbarContent';
@@ -100,13 +99,7 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
       ContentProps,
       disableWindowBlurListener = false,
       message,
-      onBlur,
-      onClose,
-      onFocus,
-      onMouseEnter,
-      onMouseLeave,
       open,
-      resumeHideDuration,
       TransitionComponent = Grow,
       transitionDuration = defaultTransitionDuration,
       TransitionProps: {
@@ -120,76 +113,27 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
     anchorOrigin: {
       vertical,
       horizontal
-    }
+    },
+    autoHideDuration,
+    disableWindowBlurListener,
+    TransitionComponent,
+    transitionDuration
   });
   const classes = useUtilityClasses(ownerState);
-  const timerAutoHide = React.useRef();
+  const {
+    getRootProps,
+    onClickAway
+  } = useSnackbar(_extends({}, ownerState, {
+    ref
+  }));
   const [exited, setExited] = React.useState(true);
-  const handleClose = useEventCallback((...args) => {
-    if (onClose) {
-      onClose(...args);
-    }
+  const rootProps = useSlotProps({
+    elementType: SnackbarRoot,
+    getSlotProps: getRootProps,
+    externalForwardedProps: other,
+    ownerState,
+    className: [classes.root, className]
   });
-  const setAutoHideTimer = useEventCallback(autoHideDurationParam => {
-    if (!onClose || autoHideDurationParam == null) {
-      return;
-    }
-    clearTimeout(timerAutoHide.current);
-    timerAutoHide.current = setTimeout(() => {
-      handleClose(null, 'timeout');
-    }, autoHideDurationParam);
-  });
-  React.useEffect(() => {
-    if (open) {
-      setAutoHideTimer(autoHideDuration);
-    }
-    return () => {
-      clearTimeout(timerAutoHide.current);
-    };
-  }, [open, autoHideDuration, setAutoHideTimer]);
-
-  // Pause the timer when the user is interacting with the Snackbar
-  // or when the user hide the window.
-  const handlePause = () => {
-    clearTimeout(timerAutoHide.current);
-  };
-
-  // Restart the timer when the user is no longer interacting with the Snackbar
-  // or when the window is shown back.
-  const handleResume = React.useCallback(() => {
-    if (autoHideDuration != null) {
-      setAutoHideTimer(resumeHideDuration != null ? resumeHideDuration : autoHideDuration * 0.5);
-    }
-  }, [autoHideDuration, resumeHideDuration, setAutoHideTimer]);
-  const handleFocus = event => {
-    if (onFocus) {
-      onFocus(event);
-    }
-    handlePause();
-  };
-  const handleMouseEnter = event => {
-    if (onMouseEnter) {
-      onMouseEnter(event);
-    }
-    handlePause();
-  };
-  const handleBlur = event => {
-    if (onBlur) {
-      onBlur(event);
-    }
-    handleResume();
-  };
-  const handleMouseLeave = event => {
-    if (onMouseLeave) {
-      onMouseLeave(event);
-    }
-    handleResume();
-  };
-  const handleClickAway = event => {
-    if (onClose) {
-      onClose(event, 'clickaway');
-    }
-  };
   const handleExited = node => {
     setExited(true);
     if (onExited) {
@@ -202,63 +146,15 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
       onEnter(node, isAppearing);
     }
   };
-  React.useEffect(() => {
-    // TODO: window global should be refactored here
-    if (!disableWindowBlurListener && open) {
-      window.addEventListener('focus', handleResume);
-      window.addEventListener('blur', handlePause);
-      return () => {
-        window.removeEventListener('focus', handleResume);
-        window.removeEventListener('blur', handlePause);
-      };
-    }
-    return undefined;
-  }, [disableWindowBlurListener, handleResume, open]);
-  React.useEffect(() => {
-    if (!open) {
-      return undefined;
-    }
-
-    /**
-     * @param {KeyboardEvent} nativeEvent
-     */
-    function handleKeyDown(nativeEvent) {
-      if (!nativeEvent.defaultPrevented) {
-        // IE11, Edge (prior to using Bink?) use 'Esc'
-        if (nativeEvent.key === 'Escape' || nativeEvent.key === 'Esc') {
-          // not calling `preventDefault` since we don't know if people may ignore this event e.g. a permanently open snackbar
-          if (onClose) {
-            onClose(nativeEvent, 'escapeKeyDown');
-          }
-        }
-      }
-    }
-    document.addEventListener('keydown', handleKeyDown);
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [exited, open, onClose]);
 
   // So we only render active snackbars.
   if (!open && exited) {
     return null;
   }
   return /*#__PURE__*/_jsx(ClickAwayListener, _extends({
-    onClickAway: handleClickAway
+    onClickAway: onClickAway
   }, ClickAwayListenerProps, {
-    children: /*#__PURE__*/_jsx(SnackbarRoot, _extends({
-      className: clsx(classes.root, className),
-      onBlur: handleBlur,
-      onFocus: handleFocus,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      ownerState: ownerState,
-      ref: ref
-      // ClickAwayListener adds an `onClick` prop which results in the alert not being announced.
-      // See https://github.com/mui/material-ui/issues/29080
-      ,
-      role: "presentation"
-    }, other, {
+    children: /*#__PURE__*/_jsx(SnackbarRoot, _extends({}, rootProps, {
       children: /*#__PURE__*/_jsx(TransitionComponent, _extends({
         appear: true,
         in: open,

package/modern/Stack/Stack.js

@@ -1,128 +1,17 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["component", "direction", "spacing", "divider", "children"];
-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) {
-  const childrenArray = React.Children.toArray(children).filter(Boolean);
-  return childrenArray.reduce((output, child, index) => {
-    output.push(child);
-    if (index < childrenArray.length - 1) {
-      output.push( /*#__PURE__*/React.cloneElement(separator, {
-        key: `separator-${index}`
-      }));
-    }
-    return output;
-  }, []);
-}
-const getSideFromDirection = direction => {
-  return {
-    row: 'Left',
-    'row-reverse': 'Right',
-    column: 'Top',
-    'column-reverse': 'Bottom'
-  }[direction];
-};
-export const style = ({
-  ownerState,
-  theme
-}) => {
-  let styles = _extends({
-    display: 'flex',
-    flexDirection: 'column'
-  }, handleBreakpoints({
-    theme
-  }, resolveBreakpointValues({
-    values: ownerState.direction,
-    breakpoints: theme.breakpoints.values
-  }), propValue => ({
-    flexDirection: propValue
-  })));
-  if (ownerState.spacing) {
-    const transformer = createUnarySpacing(theme);
-    const base = Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
-      if (typeof ownerState.spacing === 'object' && ownerState.spacing[breakpoint] != null || typeof ownerState.direction === 'object' && ownerState.direction[breakpoint] != null) {
-        acc[breakpoint] = true;
-      }
-      return acc;
-    }, {});
-    const directionValues = resolveBreakpointValues({
-      values: ownerState.direction,
-      base
-    });
-    const spacingValues = resolveBreakpointValues({
-      values: ownerState.spacing,
-      base
-    });
-    if (typeof directionValues === 'object') {
-      Object.keys(directionValues).forEach((breakpoint, index, breakpoints) => {
-        const directionValue = directionValues[breakpoint];
-        if (!directionValue) {
-          const previousDirectionValue = index > 0 ? directionValues[breakpoints[index - 1]] : 'column';
-          directionValues[breakpoint] = previousDirectionValue;
-        }
-      });
-    }
-    const styleFromPropValue = (propValue, breakpoint) => {
-      return {
-        '& > :not(style) + :not(style)': {
-          margin: 0,
-          [`margin${getSideFromDirection(breakpoint ? directionValues[breakpoint] : ownerState.direction)}`]: getValue(transformer, propValue)
-        }
-      };
-    };
-    styles = deepmerge(styles, handleBreakpoints({
-      theme
-    }, spacingValues, styleFromPropValue));
-  }
-  styles = mergeBreakpointsInOrder(theme.breakpoints, styles);
-  return styles;
-};
-const StackRoot = styled('div', {
-  name: 'MuiStack',
-  slot: 'Root',
-  overridesResolver: (props, styles) => {
-    return [styles.root];
-  }
-})(style);
-const Stack = /*#__PURE__*/React.forwardRef(function Stack(inProps, ref) {
-  const themeProps = useThemeProps({
+const Stack = createStack({
+  createStyledComponent: styled('div', {
+    name: 'MuiStack',
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+  }),
+  useThemeProps: inProps => useThemeProps({
     props: inProps,
     name: 'MuiStack'
-  });
-  const props = extendSxProp(themeProps);
-  const {
-      component = 'div',
-      direction = 'column',
-      spacing = 0,
-      divider,
-      children
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = {
-    direction,
-    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/modern/Stack/index.js

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

package/modern/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);
+}
+const stackClasses = generateUtilityClasses('MuiStack', ['root']);
+export default stackClasses;

package/modern/SwipeableDrawer/SwipeableDrawer.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["BackdropProps"],
   _excluded2 = ["anchor", "disableBackdropTransition", "disableDiscovery", "disableSwipeToOpen", "hideBackdrop", "hysteresis", "allowSwipeInChildren", "minFlingVelocity", "ModalProps", "onClose", "onOpen", "open", "PaperProps", "SwipeAreaProps", "swipeAreaWidth", "transitionDuration", "variant"];
 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';
@@ -207,7 +207,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
     }
     claimedSwipeInstance = null;
     touchDetected.current = false;
-    flushSync(() => {
+    ReactDOM.flushSync(() => {
       setMaybeSwiping(false);
     });
 
@@ -259,7 +259,7 @@ const SwipeableDrawer = /*#__PURE__*/React.forwardRef(function SwipeableDrawer(i
       // 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(() => {
+        ReactDOM.flushSync(() => {
           setMaybeSwiping(true);
         });
       }

package/modern/Unstable_Grid2/Grid2.js

@@ -1,13 +1,12 @@
 import PropTypes from 'prop-types';
-import { createGrid } from '@mui/system/Unstable_Grid';
+import { createGrid as createGrid2 } from '@mui/system/Unstable_Grid';
 import { styled, useThemeProps } from '../styles';
-const Grid2 = createGrid({
+const Grid2 = createGrid2({
   createStyledComponent: styled('div', {
     name: 'MuiGrid2',
     overridesResolver: (props, styles) => styles.root
   }),
   componentName: 'MuiGrid2',
-  // eslint-disable-next-line material-ui/mui-name-matches-component-name
   useThemeProps: inProps => useThemeProps({
     props: inProps,
     name: 'MuiGrid2'

package/modern/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/modern/internal/SwitchBase.js

@@ -146,7 +146,7 @@ const 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/modern/styles/createTheme.js

@@ -37,6 +37,7 @@ Please use another name.` : _formatMuiErrorMessage(18));
   muiTheme = deepmerge(muiTheme, other);
   muiTheme = args.reduce((acc, argument) => 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.
     const stateClasses = ['active', 'checked', 'completed', 'disabled', 'error', 'expanded', 'focused', 'focusVisible', 'required', 'selected'];
     const traverse = (node, component) => {
       let key;

package/modern/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/modern/useMediaQuery/useMediaQuery.js

@@ -7,9 +7,8 @@ import useEnhancedEffect from '../utils/useEnhancedEffect';
  */
 
 function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
-  const supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
   const [match, setMatch] = React.useState(() => {
-    if (noSsr && supportMatchMedia) {
+    if (noSsr && matchMedia) {
       return matchMedia(query).matches;
     }
     if (ssrMatchMedia) {
@@ -22,7 +21,7 @@ function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSs
   });
   useEnhancedEffect(() => {
     let active = true;
-    if (!supportMatchMedia) {
+    if (!matchMedia) {
       return undefined;
     }
     const queryList = matchMedia(query);
@@ -41,15 +40,18 @@ 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
 const maybeReactUseSyncExternalStore = React['useSyncExternalStore' + ''];
-function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia) {
+function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
   const getDefaultSnapshot = React.useCallback(() => defaultMatches, [defaultMatches]);
   const getServerSnapshot = React.useMemo(() => {
+    if (noSsr && matchMedia) {
+      return () => matchMedia(query).matches;
+    }
     if (ssrMatchMedia !== null) {
       const {
         matches
@@ -57,7 +59,7 @@ function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia) {
       return () => matches;
     }
     return getDefaultSnapshot;
-  }, [getDefaultSnapshot, query, ssrMatchMedia]);
+  }, [getDefaultSnapshot, query, ssrMatchMedia, noSsr, matchMedia]);
   const [getSnapshot, subscribe] = React.useMemo(() => {
     if (matchMedia === null) {
       return [getDefaultSnapshot, () => () => {}];
@@ -85,7 +87,7 @@ export default function useMediaQuery(queryInput, options = {}) {
     defaultMatches = false,
     matchMedia = supportMatchMedia ? window.matchMedia : null,
     ssrMatchMedia = null,
-    noSsr
+    noSsr = false
   } = getThemeProps({
     name: 'MuiUseMediaQuery',
     props: options,

package/node/Avatar/Avatar.js

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