@mui/material 5.2.7 → 5.4.0

package/legacy/Slider/Slider.js

@@ -6,16 +6,17 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { chainPropTypes } from '@mui/utils';
-import { generateUtilityClasses, isHostComponent } from '@mui/base';
+import { generateUtilityClasses } from '@mui/base';
 import SliderUnstyled, { SliderValueLabelUnstyled, sliderUnstyledClasses, getSliderUtilityClass } from '@mui/base/SliderUnstyled';
 import { alpha, lighten, darken } from '@mui/system';
 import useThemeProps from '../styles/useThemeProps';
 import styled, { slotShouldForwardProp } from '../styles/styled';
 import useTheme from '../styles/useTheme';
+import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps';
 import capitalize from '../utils/capitalize';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var sliderClasses = _extends({}, sliderUnstyledClasses, generateUtilityClasses('MuiSlider', ['colorPrimary', 'colorSecondary', 'thumbColorPrimary', 'thumbColorSecondary', 'sizeSmall', 'thumbSizeSmall']));
-export var SliderRoot = styled('span', {
+var SliderRoot = styled('span', {
   name: 'MuiSlider',
   slot: 'Root',
   overridesResolver: function overridesResolver(props, styles) {
@@ -82,7 +83,21 @@ export var SliderRoot = styled('span', {
     transition: 'none'
   })), _extends2));
 });
-export var SliderRail = styled('span', {
+process.env.NODE_ENV !== "production" ? SliderRoot.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+
+  /**
+   * @ignore
+   */
+  children: PropTypes.node
+} : void 0;
+export { SliderRoot };
+var SliderRail = styled('span', {
   name: 'MuiSlider',
   slot: 'Rail',
   overridesResolver: function overridesResolver(props, styles) {
@@ -110,7 +125,21 @@ export var SliderRail = styled('span', {
     opacity: 1
   });
 });
-export var SliderTrack = styled('span', {
+process.env.NODE_ENV !== "production" ? SliderRail.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+
+  /**
+   * @ignore
+   */
+  children: PropTypes.node
+} : void 0;
+export { SliderRail };
+var SliderTrack = styled('span', {
   name: 'MuiSlider',
   slot: 'Track',
   overridesResolver: function overridesResolver(props, styles) {
@@ -147,7 +176,21 @@ export var SliderTrack = styled('span', {
     borderColor: color
   });
 });
-export var SliderThumb = styled('span', {
+process.env.NODE_ENV !== "production" ? SliderTrack.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+
+  /**
+   * @ignore
+   */
+  children: PropTypes.node
+} : void 0;
+export { SliderTrack };
+var SliderThumb = styled('span', {
   name: 'MuiSlider',
   slot: 'Thumb',
   overridesResolver: function overridesResolver(props, styles) {
@@ -217,7 +260,21 @@ export var SliderThumb = styled('span', {
     }
   }), _extends3));
 });
-export var SliderValueLabel = styled(SliderValueLabelUnstyled, {
+process.env.NODE_ENV !== "production" ? SliderThumb.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+
+  /**
+   * @ignore
+   */
+  children: PropTypes.node
+} : void 0;
+export { SliderThumb };
+var SliderValueLabel = styled(SliderValueLabelUnstyled, {
   name: 'MuiSlider',
   slot: 'ValueLabel',
   overridesResolver: function overridesResolver(props, styles) {
@@ -262,7 +319,21 @@ export var SliderValueLabel = styled(SliderValueLabelUnstyled, {
     }
   });
 });
-export var SliderMark = styled('span', {
+process.env.NODE_ENV !== "production" ? SliderValueLabel.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+
+  /**
+   * @ignore
+   */
+  children: PropTypes.node
+} : void 0;
+export { SliderValueLabel };
+var SliderMark = styled('span', {
   name: 'MuiSlider',
   slot: 'Mark',
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -292,7 +363,21 @@ export var SliderMark = styled('span', {
     opacity: 0.8
   });
 });
-export var SliderMarkLabel = styled('span', {
+process.env.NODE_ENV !== "production" ? SliderMark.propTypes
+/* remove-proptypes */
+= {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+
+  /**
+   * @ignore
+   */
+  children: PropTypes.node
+} : void 0;
+export { SliderMark };
+var SliderMarkLabel = styled('span', {
   name: 'MuiSlider',
   slot: 'MarkLabel',
   shouldForwardProp: function shouldForwardProp(prop) {
@@ -325,7 +410,9 @@ export var SliderMarkLabel = styled('span', {
     color: theme.palette.text.primary
   });
 });
-SliderRoot.propTypes = {
+process.env.NODE_ENV !== "production" ? SliderMarkLabel.propTypes
+/* remove-proptypes */
+= {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
@@ -334,40 +421,9 @@ SliderRoot.propTypes = {
   /**
    * @ignore
    */
-  children: PropTypes.node,
-
-  /**
-   * @ignore
-   */
-  ownerState: PropTypes.shape({
-    'aria-label': PropTypes.string,
-    'aria-labelledby': PropTypes.string,
-    'aria-valuetext': PropTypes.string,
-    classes: PropTypes.object,
-    color: PropTypes.oneOf(['primary', 'secondary']),
-    defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
-    disabled: PropTypes.bool,
-    getAriaLabel: PropTypes.func,
-    getAriaValueText: PropTypes.func,
-    isRtl: PropTypes.bool,
-    marks: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.shape({
-      label: PropTypes.node,
-      value: PropTypes.number.isRequired
-    })), PropTypes.bool]),
-    max: PropTypes.number,
-    min: PropTypes.number,
-    name: PropTypes.string,
-    onChange: PropTypes.func,
-    onChangeCommitted: PropTypes.func,
-    orientation: PropTypes.oneOf(['horizontal', 'vertical']),
-    scale: PropTypes.func,
-    step: PropTypes.number,
-    track: PropTypes.oneOf(['inverted', 'normal', false]),
-    value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
-    valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on']),
-    valueLabelFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
-  })
-};
+  children: PropTypes.node
+} : void 0;
+export { SliderMarkLabel };
 
 var extendUtilityClasses = function extendUtilityClasses(ownerState) {
   var color = ownerState.color,
@@ -380,10 +436,6 @@ var extendUtilityClasses = function extendUtilityClasses(ownerState) {
   });
 };
 
-var shouldSpreadOwnerState = function shouldSpreadOwnerState(Component) {
-  return !Component || !isHostComponent(Component);
-};
-
 var Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   var _componentsProps$root, _componentsProps$thum, _componentsProps$trac, _componentsProps$valu;
 
@@ -394,7 +446,9 @@ var Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   var theme = useTheme();
   var isRtl = theme.direction === 'rtl';
 
-  var _props$components = props.components,
+  var _props$component = props.component,
+      component = _props$component === void 0 ? 'span' : _props$component,
+      _props$components = props.components,
       components = _props$components === void 0 ? {} : _props$components,
       _props$componentsProp = props.componentsProps,
       componentsProps = _props$componentsProp === void 0 ? {} : _props$componentsProp,
@@ -402,7 +456,7 @@ var Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
       color = _props$color === void 0 ? 'primary' : _props$color,
       _props$size = props.size,
       size = _props$size === void 0 ? 'medium' : _props$size,
-      other = _objectWithoutProperties(props, ["components", "componentsProps", "color", "size"]);
+      other = _objectWithoutProperties(props, ["component", "components", "componentsProps", "color", "size"]);
 
   var ownerState = _extends({}, props, {
     color: color,
@@ -422,25 +476,26 @@ var Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
       MarkLabel: SliderMarkLabel
     }, components),
     componentsProps: _extends({}, componentsProps, {
-      root: _extends({}, componentsProps.root, shouldSpreadOwnerState(components.Root) && {
+      root: _extends({}, componentsProps.root, shouldSpreadAdditionalProps(components.Root) && {
+        as: component,
         ownerState: _extends({}, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState, {
           color: color,
           size: size
         })
       }),
-      thumb: _extends({}, componentsProps.thumb, shouldSpreadOwnerState(components.Thumb) && {
+      thumb: _extends({}, componentsProps.thumb, shouldSpreadAdditionalProps(components.Thumb) && {
         ownerState: _extends({}, (_componentsProps$thum = componentsProps.thumb) == null ? void 0 : _componentsProps$thum.ownerState, {
           color: color,
           size: size
         })
       }),
-      track: _extends({}, componentsProps.track, shouldSpreadOwnerState(components.Track) && {
+      track: _extends({}, componentsProps.track, shouldSpreadAdditionalProps(components.Track) && {
         ownerState: _extends({}, (_componentsProps$trac = componentsProps.track) == null ? void 0 : _componentsProps$trac.ownerState, {
           color: color,
           size: size
         })
       }),
-      valueLabel: _extends({}, componentsProps.valueLabel, shouldSpreadOwnerState(components.ValueLabel) && {
+      valueLabel: _extends({}, componentsProps.valueLabel, shouldSpreadAdditionalProps(components.ValueLabel) && {
         ownerState: _extends({}, (_componentsProps$valu = componentsProps.valueLabel) == null ? void 0 : _componentsProps$valu.ownerState, {
           color: color,
           size: size
@@ -514,6 +569,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
    * @default {}
    */
   components: PropTypes.shape({
+    Input: PropTypes.elementType,
     Mark: PropTypes.elementType,
     MarkLabel: PropTypes.elementType,
     Rail: PropTypes.elementType,
@@ -527,7 +583,24 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
    * The props used for each slot inside the Slider.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    input: PropTypes.object,
+    mark: PropTypes.object,
+    markLabel: PropTypes.object,
+    rail: PropTypes.object,
+    root: PropTypes.object,
+    thumb: PropTypes.object,
+    track: PropTypes.object,
+    valueLabel: PropTypes.shape({
+      className: PropTypes.string,
+      components: PropTypes.shape({
+        Root: PropTypes.elementType
+      }),
+      style: PropTypes.object,
+      value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
+      valueLabelDisplay: PropTypes.oneOf(['auto', 'off', 'on'])
+    })
+  }),
 
   /**
    * The default value. Use when the component is not controlled.

package/legacy/StepLabel/StepLabel.js

@@ -209,7 +209,9 @@ process.env.NODE_ENV !== "production" ? StepLabel.propTypes
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    label: PropTypes.object
+  }),
 
   /**
    * If `true`, the step is marked as failed.

package/legacy/SvgIcon/SvgIcon.js

@@ -29,7 +29,7 @@ var SvgIconRoot = styled('svg', {
     return [styles.root, ownerState.color !== 'inherit' && styles["color".concat(capitalize(ownerState.color))], styles["fontSize".concat(capitalize(ownerState.fontSize))]];
   }
 })(function (_ref) {
-  var _theme$palette$ownerS, _theme$palette$ownerS2;
+  var _theme$transitions, _theme$transitions$cr, _theme$transitions2, _theme$transitions2$d, _theme$typography, _theme$typography$pxT, _theme$typography2, _theme$typography2$px, _theme$typography3, _theme$typography3$px, _theme$palette$ownerS, _theme$palette, _theme$palette$ownerS2, _theme$palette2, _theme$palette2$actio, _theme$palette3, _theme$palette3$actio;
 
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
@@ -40,19 +40,19 @@ var SvgIconRoot = styled('svg', {
     display: 'inline-block',
     fill: 'currentColor',
     flexShrink: 0,
-    transition: theme.transitions.create('fill', {
-      duration: theme.transitions.duration.shorter
+    transition: (_theme$transitions = theme.transitions) == null ? void 0 : (_theme$transitions$cr = _theme$transitions.create) == null ? void 0 : _theme$transitions$cr.call(_theme$transitions, 'fill', {
+      duration: (_theme$transitions2 = theme.transitions) == null ? void 0 : (_theme$transitions2$d = _theme$transitions2.duration) == null ? void 0 : _theme$transitions2$d.shorter
     }),
     fontSize: {
       inherit: 'inherit',
-      small: theme.typography.pxToRem(20),
-      medium: theme.typography.pxToRem(24),
-      large: theme.typography.pxToRem(35)
+      small: ((_theme$typography = theme.typography) == null ? void 0 : (_theme$typography$pxT = _theme$typography.pxToRem) == null ? void 0 : _theme$typography$pxT.call(_theme$typography, 20)) || '1.25rem',
+      medium: ((_theme$typography2 = theme.typography) == null ? void 0 : (_theme$typography2$px = _theme$typography2.pxToRem) == null ? void 0 : _theme$typography2$px.call(_theme$typography2, 24)) || '1.5rem',
+      large: ((_theme$typography3 = theme.typography) == null ? void 0 : (_theme$typography3$px = _theme$typography3.pxToRem) == null ? void 0 : _theme$typography3$px.call(_theme$typography3, 35)) || '2.1875'
     }[ownerState.fontSize],
     // TODO v5 deprecate, v6 remove for sx
-    color: (_theme$palette$ownerS = (_theme$palette$ownerS2 = theme.palette[ownerState.color]) == null ? void 0 : _theme$palette$ownerS2.main) != null ? _theme$palette$ownerS : {
-      action: theme.palette.action.active,
-      disabled: theme.palette.action.disabled,
+    color: (_theme$palette$ownerS = (_theme$palette = theme.palette) == null ? void 0 : (_theme$palette$ownerS2 = _theme$palette[ownerState.color]) == null ? void 0 : _theme$palette$ownerS2.main) != null ? _theme$palette$ownerS : {
+      action: (_theme$palette2 = theme.palette) == null ? void 0 : (_theme$palette2$actio = _theme$palette2.action) == null ? void 0 : _theme$palette2$actio.active,
+      disabled: (_theme$palette3 = theme.palette) == null ? void 0 : (_theme$palette3$actio = _theme$palette3.action) == null ? void 0 : _theme$palette3$actio.disabled,
       inherit: undefined
     }[ownerState.color]
   };

package/legacy/SwipeableDrawer/SwipeArea.js

@@ -8,9 +8,7 @@ import styled from '../styles/styled';
 import capitalize from '../utils/capitalize';
 import { isHorizontal } from '../Drawer/Drawer';
 import { jsx as _jsx } from "react/jsx-runtime";
-var SwipeAreaRoot = styled('div', {
-  skipSx: true
-})(function (_ref) {
+var SwipeAreaRoot = styled('div')(function (_ref) {
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
   return _extends({

package/legacy/TextField/TextField.js

@@ -197,7 +197,7 @@ var TextField = /*#__PURE__*/React.forwardRef(function TextField(inProps, ref) {
     variant: variant,
     ownerState: ownerState
   }, other, {
-    children: [label && /*#__PURE__*/_jsx(InputLabel, _extends({
+    children: [label != null && label !== '' && /*#__PURE__*/_jsx(InputLabel, _extends({
       htmlFor: id,
       id: inputLabelId
     }, InputLabelProps, {
@@ -302,6 +302,7 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes
 
   /**
    * Props applied to the [`InputLabel`](/api/input-label/) element.
+   * Pointer events like `onClick` are enabled if and only if `shrink` is `true`.
    */
   InputLabelProps: PropTypes.object,
 

package/legacy/Tooltip/Tooltip.js

@@ -705,7 +705,12 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes
    * and `componentsProps.transition` prop values win over `TransitionProps` if both are applied.
    * @default {}
    */
-  componentsProps: PropTypes.object,
+  componentsProps: PropTypes.shape({
+    arrow: PropTypes.object,
+    popper: PropTypes.object,
+    tooltip: PropTypes.object,
+    transition: PropTypes.object
+  }),
 
   /**
    * Set to `true` if the `title` acts as an accessible description.

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.2.7
+/** @license MUI v5.4.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -8,7 +8,6 @@ import * as colors from './colors';
 export { colors };
 export * from './styles';
 export * from './utils';
-export * from '@mui/base';
 export { default as Accordion } from './Accordion';
 export * from './Accordion';
 export { default as AccordionActions } from './AccordionActions';
@@ -273,4 +272,8 @@ export * from './Zoom'; // createFilterOptions is exported from Autocomplete
 export { default as useAutocomplete } from './useAutocomplete';
 export { default as GlobalStyles } from './GlobalStyles';
 export * from './GlobalStyles';
-export { StyledEngineProvider } from './styles';
+export { StyledEngineProvider } from './styles';
+export { default as unstable_composeClasses } from '@mui/base/composeClasses';
+export { default as generateUtilityClass } from '@mui/base/generateUtilityClass';
+export * from '@mui/base/generateUtilityClass';
+export { default as generateUtilityClasses } from '@mui/base/generateUtilityClasses';

package/legacy/internal/SwitchBase.js

@@ -27,9 +27,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   return composeClasses(slots, getSwitchBaseUtilityClass, classes);
 };
 
-var SwitchBaseRoot = styled(ButtonBase, {
-  skipSx: true
-})(function (_ref) {
+var SwitchBaseRoot = styled(ButtonBase)(function (_ref) {
   var ownerState = _ref.ownerState;
   return _extends({
     padding: 9,
@@ -40,9 +38,7 @@ var SwitchBaseRoot = styled(ButtonBase, {
     marginRight: ownerState.size === 'small' ? -3 : -12
   });
 });
-var SwitchBaseInput = styled('input', {
-  skipSx: true
-})({
+var SwitchBaseInput = styled('input')({
   cursor: 'inherit',
   position: 'absolute',
   opacity: 0,

package/legacy/useMediaQuery/useMediaQuery.js

@@ -1,3 +1,4 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
 import { getThemeProps, useThemeWithoutDefault as useTheme } from '@mui/system';
 import useEnhancedEffect from '../utils/useEnhancedEffect';
@@ -5,38 +6,9 @@ import useEnhancedEffect from '../utils/useEnhancedEffect';
  * @deprecated Not used internally. Use `MediaQueryListEvent` from lib.dom.d.ts instead.
  */
 
-export default function useMediaQuery(queryInput) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var 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) {
   var supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
 
-  var _getThemeProps = getThemeProps({
-    name: 'MuiUseMediaQuery',
-    props: options,
-    theme: theme
-  }),
-      _getThemeProps$defaul = _getThemeProps.defaultMatches,
-      defaultMatches = _getThemeProps$defaul === void 0 ? false : _getThemeProps$defaul,
-      _getThemeProps$matchM = _getThemeProps.matchMedia,
-      matchMedia = _getThemeProps$matchM === void 0 ? supportMatchMedia ? window.matchMedia : null : _getThemeProps$matchM,
-      _getThemeProps$noSsr = _getThemeProps.noSsr,
-      noSsr = _getThemeProps$noSsr === void 0 ? false : _getThemeProps$noSsr,
-      _getThemeProps$ssrMat = _getThemeProps.ssrMatchMedia,
-      ssrMatchMedia = _getThemeProps$ssrMat === void 0 ? null : _getThemeProps$ssrMat;
-
-  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'));
-    }
-  }
-
-  var query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
-  query = query.replace(/^@media( ?)/m, '');
-
   var _React$useState = React.useState(function () {
     if (noSsr && supportMatchMedia) {
       return matchMedia(query).matches;
@@ -73,13 +45,96 @@ export default function useMediaQuery(queryInput) {
       }
     };
 
-    updateMatch();
+    updateMatch(); // TODO: Use `addEventListener` once support for Safari < 14 is dropped
+
     queryList.addListener(updateMatch);
     return function () {
       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
+
+
+var maybeReactUseSyncExternalStore = React['useSyncExternalStore' + ''];
+
+function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia) {
+  var getDefaultSnapshot = React.useCallback(function () {
+    return defaultMatches;
+  }, [defaultMatches]);
+  var getServerSnapshot = React.useMemo(function () {
+    if (ssrMatchMedia !== null) {
+      var _ssrMatchMedia = ssrMatchMedia(query),
+          matches = _ssrMatchMedia.matches;
+
+      return function () {
+        return matches;
+      };
+    }
+
+    return getDefaultSnapshot;
+  }, [getDefaultSnapshot, query, ssrMatchMedia]);
+
+  var _React$useMemo = React.useMemo(function () {
+    if (matchMedia === null) {
+      return [getDefaultSnapshot, function () {
+        return function () {};
+      }];
+    }
+
+    var mediaQueryList = matchMedia(query);
+    return [function () {
+      return mediaQueryList.matches;
+    }, function (notify) {
+      // TODO: Use `addEventListener` once support for Safari < 14 is dropped
+      mediaQueryList.addListener(notify);
+      return function () {
+        mediaQueryList.removeListener(notify);
+      };
+    }];
+  }, [getDefaultSnapshot, matchMedia, query]),
+      _React$useMemo2 = _slicedToArray(_React$useMemo, 2),
+      getSnapshot = _React$useMemo2[0],
+      subscribe = _React$useMemo2[1];
+
+  var match = maybeReactUseSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  return match;
+}
+
+export default function useMediaQuery(queryInput) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var 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.
+
+  var supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
+
+  var _getThemeProps = getThemeProps({
+    name: 'MuiUseMediaQuery',
+    props: options,
+    theme: theme
+  }),
+      _getThemeProps$defaul = _getThemeProps.defaultMatches,
+      defaultMatches = _getThemeProps$defaul === void 0 ? false : _getThemeProps$defaul,
+      _getThemeProps$matchM = _getThemeProps.matchMedia,
+      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;
+
+  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'));
+    }
+  }
+
+  var 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
+
+  var useMediaQueryImplementation = maybeReactUseSyncExternalStore !== undefined ? useMediaQueryNew : useMediaQueryOld;
+  var match = useMediaQueryImplementation(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr);
 
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks

package/legacy/utils/shouldSpreadAdditionalProps.js

@@ -0,0 +1,7 @@
+import { isHostComponent } from '@mui/base';
+
+var shouldSpreadAdditionalProps = function shouldSpreadAdditionalProps(Slot) {
+  return !Slot || !isHostComponent(Slot);
+};
+
+export default shouldSpreadAdditionalProps;