[system][material-ui] Move useMediaQuery to system

docs/data/material/components/autocomplete/Virtualize.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import TextField from '@mui/material/TextField';
 import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
-import useMediaQuery from '@mui/material/useMediaQuery';
+import useMediaQuery from '@mui/system/useMediaQuery';
 import ListSubheader from '@mui/material/ListSubheader';
 import Popper from '@mui/material/Popper';
 import { useTheme, styled } from '@mui/material/styles';

docs/data/material/components/autocomplete/Virtualize.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import TextField from '@mui/material/TextField';
 import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
-import useMediaQuery from '@mui/material/useMediaQuery';
+import useMediaQuery from '@mui/system/useMediaQuery';
 import ListSubheader from '@mui/material/ListSubheader';
 import Popper from '@mui/material/Popper';
 import { useTheme, styled } from '@mui/material/styles';

docs/data/material/components/dialogs/ResponsiveDialog.js

@@ -5,7 +5,7 @@ import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
-import useMediaQuery from '@mui/material/useMediaQuery';
+import useMediaQuery from '@mui/system/useMediaQuery';
 import { useTheme } from '@mui/material/styles';
 
 export default function ResponsiveDialog() {

docs/data/material/components/dialogs/ResponsiveDialog.tsx

@@ -5,7 +5,7 @@ import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import DialogTitle from '@mui/material/DialogTitle';
-import useMediaQuery from '@mui/material/useMediaQuery';
+import useMediaQuery from '@mui/system/useMediaQuery';
 import { useTheme } from '@mui/material/styles';
 
 export default function ResponsiveDialog() {

docs/data/material/components/use-media-query/JavaScriptMedia.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import json2mq from 'json2mq';
-import useMediaQuery from '@mui/material/useMediaQuery';
+import useMediaQuery from '@mui/system/useMediaQuery';
 
 export default function JavaScriptMedia() {
   const matches = useMediaQuery(

docs/data/material/components/use-media-query/JavaScriptMedia.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import json2mq from 'json2mq';
-import useMediaQuery from '@mui/material/useMediaQuery';
+import useMediaQuery from '@mui/system/useMediaQuery';
 
 export default function JavaScriptMedia() {
   const matches = useMediaQuery(

docs/data/material/components/use-media-query/ServerSide.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import mediaQuery from 'css-mediaquery';
 import { ThemeProvider } from '@mui/material/styles';
-import useMediaQuery from '@mui/material/useMediaQuery';
+import useMediaQuery from '@mui/system/useMediaQuery';
 
 function MyComponent() {
   const matches = useMediaQuery('(min-width:600px)');

docs/data/material/components/use-media-query/ServerSide.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import mediaQuery from 'css-mediaquery';
 import { ThemeProvider, Theme } from '@mui/material/styles';
-import useMediaQuery from '@mui/material/useMediaQuery';
+import useMediaQuery from '@mui/system/useMediaQuery';
 
 function MyComponent() {
   const matches = useMediaQuery('(min-width:600px)');

docs/data/material/components/use-media-query/SimpleMediaQuery.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import useMediaQuery from '@mui/material/useMediaQuery';
+import useMediaQuery from '@mui/system/useMediaQuery';
 
 export default function SimpleMediaQuery() {
   const matches = useMediaQuery('(min-width:600px)');

docs/data/material/components/use-media-query/SimpleMediaQuery.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import useMediaQuery from '@mui/material/useMediaQuery';
+import useMediaQuery from '@mui/system/useMediaQuery';
 
 export default function SimpleMediaQuery() {
   const matches = useMediaQuery('(min-width:600px)');

docs/data/material/components/use-media-query/ThemeHelper.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
-import useMediaQuery from '@mui/material/useMediaQuery';
+import useMediaQuery from '@mui/system/useMediaQuery';
 
 function MyComponent() {
   const theme = useTheme();

docs/data/material/components/use-media-query/ThemeHelper.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
-import useMediaQuery from '@mui/material/useMediaQuery';
+import useMediaQuery from '@mui/system/useMediaQuery';
 
 function MyComponent() {
   const theme = useTheme();

docs/data/material/components/use-media-query/UseWidth.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ThemeProvider, useTheme, createTheme } from '@mui/material/styles';
-import useMediaQuery from '@mui/material/useMediaQuery';
+import useMediaQuery from '@mui/system/useMediaQuery';
 
 /**
  * Be careful using this hook. It only works because the number of

docs/data/material/components/use-media-query/UseWidth.tsx

@@ -6,7 +6,7 @@ import {
   useTheme,
   createTheme,
 } from '@mui/material/styles';
-import useMediaQuery from '@mui/material/useMediaQuery';
+import useMediaQuery from '@mui/system/useMediaQuery';
 
 type BreakpointOrNull = Breakpoint | null;
 

docs/src/components/header/ThemeModeToggle.tsx

@@ -4,7 +4,7 @@ import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import DarkModeOutlined from '@mui/icons-material/DarkModeOutlined';
 import LightModeOutlined from '@mui/icons-material/LightModeOutlined';
-import useMediaQuery from '@mui/material/useMediaQuery';
+import useMediaQuery from '@mui/system/useMediaQuery';
 import { useChangeTheme } from 'docs/src/modules/components/ThemeContext';
 
 function CssVarsModeToggle(props: { onChange: (checked: boolean) => void }) {

docs/src/components/home/Hero.tsx

@@ -4,7 +4,7 @@ import { useTheme } from '@mui/material/styles';
 import Box, { BoxProps } from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import Stack from '@mui/material/Stack';
-import useMediaQuery from '@mui/material/useMediaQuery';
+import useMediaQuery from '@mui/system/useMediaQuery';
 import GradientText from 'docs/src/components/typography/GradientText';
 import GetStartedButtons from 'docs/src/components/home/GetStartedButtons';
 import HeroContainer from 'docs/src/layouts/HeroContainer';

docs/src/components/home/ProductsSwitcher.tsx

@@ -3,7 +3,7 @@ import dynamic from 'next/dynamic';
 import { Theme } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import { visuallyHidden } from '@mui/utils';
-import useMediaQuery from '@mui/material/useMediaQuery';
+import useMediaQuery from '@mui/system/useMediaQuery';
 import Typography from '@mui/material/Typography';
 import Stack from '@mui/material/Stack';
 import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';

docs/src/pages/premium-themes/paperbase/Paperbase.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
-import useMediaQuery from '@mui/material/useMediaQuery';
+import useMediaQuery from '@mui/system/useMediaQuery';
 import CssBaseline from '@mui/material/CssBaseline';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';

docs/src/pages/premium-themes/paperbase/Paperbase.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
-import useMediaQuery from '@mui/material/useMediaQuery';
+import useMediaQuery from '@mui/system/useMediaQuery';
 import CssBaseline from '@mui/material/CssBaseline';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';

packages/mui-material/src/useMediaQuery/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from './useMediaQuery';
-export * from './useMediaQuery';
+export { default } from '@mui/system/useMediaQuery';
+export * from '@mui/system/useMediaQuery';

packages/mui-material/src/useMediaQuery/index.js

@@ -1,2 +1,2 @@
 'use client';
-export { default } from './useMediaQuery';
+export { default } from '@mui/system/useMediaQuery';

packages/mui-material/src/useMediaQuery/useMediaQueryTheme.d.ts

@@ -1,3 +1,3 @@
-import useMediaQuery from './useMediaQuery';
+import useMediaQuery from '@mui/system/useMediaQuery';
 
 export default useMediaQuery;

packages/mui-material/src/useMediaQuery/useMediaQueryTheme.js

@@ -1,5 +1,5 @@
 'use client';
-import useMediaQuery from './useMediaQuery';
+import useMediaQuery from '@mui/system/useMediaQuery';
 
 // TODO v5: to deprecate in v4.x and remove in v5
 export default function useMediaQueryTheme(...args) {

packages/mui-system/src/useMediaQuery/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './useMediaQuery';
+export * from './useMediaQuery';

packages/mui-system/src/useMediaQuery/index.js

@@ -0,0 +1,2 @@
+'use client';
+export { default } from './useMediaQuery';

packages/mui-material/src/useMediaQuery/useMediaQuery.test.js → packages/mui-system/src/useMediaQuery/useMediaQuery.test.js

@@ -10,7 +10,7 @@ import {
 import mediaQuery from 'css-mediaquery';
 import { expect } from 'chai';
 import { stub } from 'sinon';
-import useMediaQuery from '@mui/material/useMediaQuery';
+import useMediaQuery from '@mui/system/useMediaQuery';
 import { ThemeProvider } from '@mui/material/styles';
 
 const usesUseSyncExternalStore = React.useSyncExternalStore !== undefined;

packages/mui-material/src/useMediaQuery/useMediaQuery.ts → packages/mui-system/src/useMediaQuery/useMediaQuery.ts

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import { getThemeProps, useThemeWithoutDefault as useTheme } from '@mui/system';
-import useEnhancedEffect from '../utils/useEnhancedEffect';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 
 /**
  * @deprecated Not used internally. Use `MediaQueryListEvent` from lib.dom.d.ts instead.