@mui/material 5.2.7 → 5.4.0

package/modern/Select/SelectInput.js

@@ -1,7 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
-const _excluded = ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultValue", "disabled", "displayEmpty", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"];
+
+var _span;
+
+const _excluded = ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultOpen", "defaultValue", "disabled", "displayEmpty", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"];
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
@@ -113,6 +116,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     autoWidth,
     children,
     className,
+    defaultOpen,
     defaultValue,
     disabled,
     displayEmpty,
@@ -142,6 +146,11 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     default: defaultValue,
     name: 'Select'
   });
+  const [openState, setOpenState] = useControlled({
+    controlled: openProp,
+    default: defaultOpen,
+    name: 'Select'
+  });
   const inputRef = React.useRef(null);
   const displayRef = React.useRef(null);
   const [displayNode, setDisplayNode] = React.useState(null);
@@ -149,7 +158,6 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     current: isOpenControlled
   } = React.useRef(openProp != null);
   const [menuMinWidthState, setMenuMinWidthState] = React.useState();
-  const [openState, setOpenState] = React.useState(false);
   const handleRef = useForkRef(ref, inputRefProp);
   const handleDisplayRef = React.useCallback(node => {
     displayRef.current = node;
@@ -164,7 +172,17 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     },
     node: inputRef.current,
     value
-  }), [value]);
+  }), [value]); // Resize menu on `defaultOpen` automatic toggle.
+
+  React.useEffect(() => {
+    if (defaultOpen && openState && displayNode && !isOpenControlled) {
+      setMenuMinWidthState(autoWidth ? null : displayNode.clientWidth);
+      displayRef.current.focus();
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [displayNode, autoWidth]); // `isOpenControlled` is ignored because the component should never switch between controlled and uncontrolled modes.
+  // `defaultOpen` and `openState` are ignored to avoid unnecessary callbacks.
+
   React.useEffect(() => {
     if (autoFocus) {
       displayRef.current.focus();
@@ -300,7 +318,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     }
   };
 
-  const open = displayNode !== null && (isOpenControlled ? openProp : openState);
+  const open = displayNode !== null && openState;
 
   const handleBlur = event => {
     // if open event.stopImmediatePropagation
@@ -467,16 +485,11 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       className: clsx(classes.select, className, SelectDisplayProps.className) // The id is required for proper a11y
       ,
       id: buttonId,
-      children: isEmpty(display) ?
-      /*#__PURE__*/
-      // notranslate needed while Google Translate will not fix zero-width space issue
-      // eslint-disable-next-line react/no-danger
-      _jsx("span", {
+      children: isEmpty(display) ? // notranslate needed while Google Translate will not fix zero-width space issue
+      _span || (_span = /*#__PURE__*/_jsx("span", {
         className: "notranslate",
-        dangerouslySetInnerHTML: {
-          __html: '​'
-        }
-      }) : display
+        children: "\u200B"
+      })) : display
     })), /*#__PURE__*/_jsx(SelectNativeInput, _extends({
       value: Array.isArray(value) ? value.join(',') : value,
       name: name,
@@ -559,6 +572,12 @@ process.env.NODE_ENV !== "production" ? SelectInput.propTypes = {
    */
   className: PropTypes.string,
 
+  /**
+   * If `true`, the component is toggled on mount. Use when the component open state is not controlled.
+   * You can only use it when the `native` prop is `false` (default).
+   */
+  defaultOpen: PropTypes.bool,
+
   /**
    * The default value. Use when the component is not controlled.
    */

package/modern/Slider/Slider.js

@@ -1,20 +1,21 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["components", "componentsProps", "color", "size"];
+const _excluded = ["component", "components", "componentsProps", "color", "size"];
 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 const sliderClasses = _extends({}, sliderUnstyledClasses, generateUtilityClasses('MuiSlider', ['colorPrimary', 'colorSecondary', 'thumbColorPrimary', 'thumbColorSecondary', 'sizeSmall', 'thumbSizeSmall']));
-export const SliderRoot = styled('span', {
+const SliderRoot = styled('span', {
   name: 'MuiSlider',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -80,7 +81,21 @@ export const SliderRoot = styled('span', {
     }
   }
 }));
-export const 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 };
+const SliderRail = styled('span', {
   name: 'MuiSlider',
   slot: 'Rail',
   overridesResolver: (props, styles) => styles.rail
@@ -105,7 +120,21 @@ export const SliderRail = styled('span', {
 }, ownerState.track === 'inverted' && {
   opacity: 1
 }));
-export const 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 };
+const SliderTrack = styled('span', {
   name: 'MuiSlider',
   slot: 'Track',
   overridesResolver: (props, styles) => styles.track
@@ -141,7 +170,21 @@ export const SliderTrack = styled('span', {
     borderColor: color
   });
 });
-export const 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 };
+const SliderThumb = styled('span', {
   name: 'MuiSlider',
   slot: 'Thumb',
   overridesResolver: (props, styles) => {
@@ -213,7 +256,21 @@ export const SliderThumb = styled('span', {
     }
   }
 }));
-export const 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 };
+const SliderValueLabel = styled(SliderValueLabelUnstyled, {
   name: 'MuiSlider',
   slot: 'ValueLabel',
   overridesResolver: (props, styles) => styles.valueLabel
@@ -257,7 +314,21 @@ export const SliderValueLabel = styled(SliderValueLabelUnstyled, {
     backgroundColor: 'inherit'
   }
 }));
-export const 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 };
+const SliderMark = styled('span', {
   name: 'MuiSlider',
   slot: 'Mark',
   shouldForwardProp: prop => slotShouldForwardProp(prop) && prop !== 'markActive',
@@ -282,7 +353,21 @@ export const SliderMark = styled('span', {
   backgroundColor: theme.palette.background.paper,
   opacity: 0.8
 }));
-export const 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 };
+const SliderMarkLabel = styled('span', {
   name: 'MuiSlider',
   slot: 'MarkLabel',
   shouldForwardProp: prop => slotShouldForwardProp(prop) && prop !== 'markLabelActive',
@@ -310,7 +395,9 @@ export const SliderMarkLabel = styled('span', {
 }, markLabelActive && {
   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"     |
@@ -319,40 +406,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 };
 
 const extendUtilityClasses = ownerState => {
   const {
@@ -366,10 +422,6 @@ const extendUtilityClasses = ownerState => {
   });
 };
 
-const shouldSpreadOwnerState = Component => {
-  return !Component || !isHostComponent(Component);
-};
-
 const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   const props = useThemeProps({
     props: inputProps,
@@ -379,6 +431,8 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
   const isRtl = theme.direction === 'rtl';
 
   const {
+    // eslint-disable-next-line react/prop-types
+    component = 'span',
     components = {},
     componentsProps = {},
     color = 'primary',
@@ -404,25 +458,26 @@ const 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?.ownerState, {
           color,
           size
         })
       }),
-      thumb: _extends({}, componentsProps.thumb, shouldSpreadOwnerState(components.Thumb) && {
+      thumb: _extends({}, componentsProps.thumb, shouldSpreadAdditionalProps(components.Thumb) && {
         ownerState: _extends({}, componentsProps.thumb?.ownerState, {
           color,
           size
         })
       }),
-      track: _extends({}, componentsProps.track, shouldSpreadOwnerState(components.Track) && {
+      track: _extends({}, componentsProps.track, shouldSpreadAdditionalProps(components.Track) && {
         ownerState: _extends({}, componentsProps.track?.ownerState, {
           color,
           size
         })
       }),
-      valueLabel: _extends({}, componentsProps.valueLabel, shouldSpreadOwnerState(components.ValueLabel) && {
+      valueLabel: _extends({}, componentsProps.valueLabel, shouldSpreadAdditionalProps(components.ValueLabel) && {
         ownerState: _extends({}, componentsProps.valueLabel?.ownerState, {
           color,
           size
@@ -496,6 +551,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
    * @default {}
    */
   components: PropTypes.shape({
+    Input: PropTypes.elementType,
     Mark: PropTypes.elementType,
     MarkLabel: PropTypes.elementType,
     Rail: PropTypes.elementType,
@@ -509,7 +565,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/modern/StepLabel/StepLabel.js

@@ -205,7 +205,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/modern/SvgIcon/SvgIcon.js

@@ -43,19 +43,19 @@ const SvgIconRoot = styled('svg', {
   display: 'inline-block',
   fill: 'currentColor',
   flexShrink: 0,
-  transition: theme.transitions.create('fill', {
-    duration: theme.transitions.duration.shorter
+  transition: theme.transitions?.create?.('fill', {
+    duration: theme.transitions?.duration?.shorter
   }),
   fontSize: {
     inherit: 'inherit',
-    small: theme.typography.pxToRem(20),
-    medium: theme.typography.pxToRem(24),
-    large: theme.typography.pxToRem(35)
+    small: theme.typography?.pxToRem?.(20) || '1.25rem',
+    medium: theme.typography?.pxToRem?.(24) || '1.5rem',
+    large: theme.typography?.pxToRem?.(35) || '2.1875'
   }[ownerState.fontSize],
   // TODO v5 deprecate, v6 remove for sx
-  color: theme.palette[ownerState.color]?.main ?? {
-    action: theme.palette.action.active,
-    disabled: theme.palette.action.disabled,
+  color: theme.palette?.[ownerState.color]?.main ?? {
+    action: theme.palette?.action?.active,
+    disabled: theme.palette?.action?.disabled,
     inherit: undefined
   }[ownerState.color]
 }));

package/modern/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";
-const SwipeAreaRoot = styled('div', {
-  skipSx: true
-})(({
+const SwipeAreaRoot = styled('div')(({
   theme,
   ownerState
 }) => _extends({

package/modern/TextField/TextField.js

@@ -191,7 +191,7 @@ const 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, {
@@ -296,6 +296,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/modern/Tooltip/Tooltip.js

@@ -673,7 +673,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/modern/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/modern/internal/SwitchBase.js

@@ -29,9 +29,7 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getSwitchBaseUtilityClass, classes);
 };
 
-const SwitchBaseRoot = styled(ButtonBase, {
-  skipSx: true
-})(({
+const SwitchBaseRoot = styled(ButtonBase)(({
   ownerState
 }) => _extends({
   padding: 9,
@@ -41,9 +39,7 @@ const SwitchBaseRoot = styled(ButtonBase, {
 }, ownerState.edge === 'end' && {
   marginRight: ownerState.size === 'small' ? -3 : -12
 }));
-const SwitchBaseInput = styled('input', {
-  skipSx: true
-})({
+const SwitchBaseInput = styled('input')({
   cursor: 'inherit',
   position: 'absolute',
   opacity: 0,

package/modern/useMediaQuery/useMediaQuery.js

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

package/modern/utils/shouldSpreadAdditionalProps.js

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