From 9f6628942571f572447fdd77528647dfac6c49fd Mon Sep 17 00:00:00 2001 From: Justin Toman Date: Mon, 16 Oct 2023 13:37:15 +0900 Subject: [PATCH 1/9] [system][material-ui] Move useMediaQuery to system --- docs/data/material/components/autocomplete/Virtualize.js | 2 +- docs/data/material/components/autocomplete/Virtualize.tsx | 2 +- docs/data/material/components/dialogs/ResponsiveDialog.js | 2 +- docs/data/material/components/dialogs/ResponsiveDialog.tsx | 2 +- .../material/components/use-media-query/JavaScriptMedia.js | 2 +- .../material/components/use-media-query/JavaScriptMedia.tsx | 2 +- docs/data/material/components/use-media-query/ServerSide.js | 2 +- docs/data/material/components/use-media-query/ServerSide.tsx | 2 +- .../material/components/use-media-query/SimpleMediaQuery.js | 2 +- .../material/components/use-media-query/SimpleMediaQuery.tsx | 2 +- docs/data/material/components/use-media-query/ThemeHelper.js | 2 +- docs/data/material/components/use-media-query/ThemeHelper.tsx | 2 +- docs/data/material/components/use-media-query/UseWidth.js | 2 +- docs/data/material/components/use-media-query/UseWidth.tsx | 2 +- docs/src/components/header/ThemeModeToggle.tsx | 2 +- docs/src/components/home/Hero.tsx | 2 +- docs/src/components/home/ProductsSwitcher.tsx | 2 +- docs/src/pages/premium-themes/paperbase/Paperbase.js | 2 +- docs/src/pages/premium-themes/paperbase/Paperbase.tsx | 2 +- packages/mui-material/src/useMediaQuery/index.d.ts | 4 ++-- packages/mui-material/src/useMediaQuery/index.js | 2 +- .../mui-material/src/useMediaQuery/useMediaQueryTheme.d.ts | 2 +- packages/mui-material/src/useMediaQuery/useMediaQueryTheme.js | 2 +- packages/mui-system/src/useMediaQuery/index.d.ts | 2 ++ packages/mui-system/src/useMediaQuery/index.js | 2 ++ .../src/useMediaQuery/useMediaQuery.test.js | 2 +- .../src/useMediaQuery/useMediaQuery.ts | 2 +- 27 files changed, 30 insertions(+), 26 deletions(-) create mode 100644 packages/mui-system/src/useMediaQuery/index.d.ts create mode 100644 packages/mui-system/src/useMediaQuery/index.js rename packages/{mui-material => mui-system}/src/useMediaQuery/useMediaQuery.test.js (99%) rename packages/{mui-material => mui-system}/src/useMediaQuery/useMediaQuery.ts (98%) diff --git a/docs/data/material/components/autocomplete/Virtualize.js b/docs/data/material/components/autocomplete/Virtualize.js index 7b62b6c4f7b938..90529882b64029 100644 --- a/docs/data/material/components/autocomplete/Virtualize.js +++ b/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'; diff --git a/docs/data/material/components/autocomplete/Virtualize.tsx b/docs/data/material/components/autocomplete/Virtualize.tsx index cd6eee98854ff5..b2d1640bde5930 100644 --- a/docs/data/material/components/autocomplete/Virtualize.tsx +++ b/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'; diff --git a/docs/data/material/components/dialogs/ResponsiveDialog.js b/docs/data/material/components/dialogs/ResponsiveDialog.js index 5606901a18a2d8..5a3710baaa5195 100644 --- a/docs/data/material/components/dialogs/ResponsiveDialog.js +++ b/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() { diff --git a/docs/data/material/components/dialogs/ResponsiveDialog.tsx b/docs/data/material/components/dialogs/ResponsiveDialog.tsx index 5606901a18a2d8..5a3710baaa5195 100644 --- a/docs/data/material/components/dialogs/ResponsiveDialog.tsx +++ b/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() { diff --git a/docs/data/material/components/use-media-query/JavaScriptMedia.js b/docs/data/material/components/use-media-query/JavaScriptMedia.js index 60eb6d875ca554..4c6408492efd5a 100644 --- a/docs/data/material/components/use-media-query/JavaScriptMedia.js +++ b/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( diff --git a/docs/data/material/components/use-media-query/JavaScriptMedia.tsx b/docs/data/material/components/use-media-query/JavaScriptMedia.tsx index 60eb6d875ca554..4c6408492efd5a 100644 --- a/docs/data/material/components/use-media-query/JavaScriptMedia.tsx +++ b/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( diff --git a/docs/data/material/components/use-media-query/ServerSide.js b/docs/data/material/components/use-media-query/ServerSide.js index 5d34cd5143d426..970a14f1ba679d 100644 --- a/docs/data/material/components/use-media-query/ServerSide.js +++ b/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)'); diff --git a/docs/data/material/components/use-media-query/ServerSide.tsx b/docs/data/material/components/use-media-query/ServerSide.tsx index 17f3ae8fc2b093..2827afa42dd74e 100644 --- a/docs/data/material/components/use-media-query/ServerSide.tsx +++ b/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)'); diff --git a/docs/data/material/components/use-media-query/SimpleMediaQuery.js b/docs/data/material/components/use-media-query/SimpleMediaQuery.js index 361b052d83d3a8..8c18fe7d2abc33 100644 --- a/docs/data/material/components/use-media-query/SimpleMediaQuery.js +++ b/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)'); diff --git a/docs/data/material/components/use-media-query/SimpleMediaQuery.tsx b/docs/data/material/components/use-media-query/SimpleMediaQuery.tsx index 361b052d83d3a8..8c18fe7d2abc33 100644 --- a/docs/data/material/components/use-media-query/SimpleMediaQuery.tsx +++ b/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)'); diff --git a/docs/data/material/components/use-media-query/ThemeHelper.js b/docs/data/material/components/use-media-query/ThemeHelper.js index 86193b81b93c69..cee04a66924202 100644 --- a/docs/data/material/components/use-media-query/ThemeHelper.js +++ b/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(); diff --git a/docs/data/material/components/use-media-query/ThemeHelper.tsx b/docs/data/material/components/use-media-query/ThemeHelper.tsx index 86193b81b93c69..cee04a66924202 100644 --- a/docs/data/material/components/use-media-query/ThemeHelper.tsx +++ b/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(); diff --git a/docs/data/material/components/use-media-query/UseWidth.js b/docs/data/material/components/use-media-query/UseWidth.js index 5d82b3fb1394a8..ceddd0b9d14970 100644 --- a/docs/data/material/components/use-media-query/UseWidth.js +++ b/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 diff --git a/docs/data/material/components/use-media-query/UseWidth.tsx b/docs/data/material/components/use-media-query/UseWidth.tsx index 1477cab6b48388..d6c27d2589109b 100644 --- a/docs/data/material/components/use-media-query/UseWidth.tsx +++ b/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; diff --git a/docs/src/components/header/ThemeModeToggle.tsx b/docs/src/components/header/ThemeModeToggle.tsx index ff22e076ae3797..cd5c9c9a441acf 100644 --- a/docs/src/components/header/ThemeModeToggle.tsx +++ b/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 }) { diff --git a/docs/src/components/home/Hero.tsx b/docs/src/components/home/Hero.tsx index d3b1c0e57d8dc8..7e29c3b13dffc0 100644 --- a/docs/src/components/home/Hero.tsx +++ b/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'; diff --git a/docs/src/components/home/ProductsSwitcher.tsx b/docs/src/components/home/ProductsSwitcher.tsx index a92fcbba30beac..3fa08a17f9aa89 100644 --- a/docs/src/components/home/ProductsSwitcher.tsx +++ b/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'; diff --git a/docs/src/pages/premium-themes/paperbase/Paperbase.js b/docs/src/pages/premium-themes/paperbase/Paperbase.js index 909def1ac3c99f..9224d2ae0dc281 100644 --- a/docs/src/pages/premium-themes/paperbase/Paperbase.js +++ b/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'; diff --git a/docs/src/pages/premium-themes/paperbase/Paperbase.tsx b/docs/src/pages/premium-themes/paperbase/Paperbase.tsx index f7d3f8cada0f53..2bb9d25c9c5cce 100644 --- a/docs/src/pages/premium-themes/paperbase/Paperbase.tsx +++ b/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'; diff --git a/packages/mui-material/src/useMediaQuery/index.d.ts b/packages/mui-material/src/useMediaQuery/index.d.ts index bf4072caa40b80..189cf6a41d036a 100644 --- a/packages/mui-material/src/useMediaQuery/index.d.ts +++ b/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'; diff --git a/packages/mui-material/src/useMediaQuery/index.js b/packages/mui-material/src/useMediaQuery/index.js index 74992f88e57857..662f9739860eb8 100644 --- a/packages/mui-material/src/useMediaQuery/index.js +++ b/packages/mui-material/src/useMediaQuery/index.js @@ -1,2 +1,2 @@ 'use client'; -export { default } from './useMediaQuery'; +export { default } from '@mui/system/useMediaQuery'; diff --git a/packages/mui-material/src/useMediaQuery/useMediaQueryTheme.d.ts b/packages/mui-material/src/useMediaQuery/useMediaQueryTheme.d.ts index f8ac72baf1d28d..2505b54663cf76 100644 --- a/packages/mui-material/src/useMediaQuery/useMediaQueryTheme.d.ts +++ b/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; diff --git a/packages/mui-material/src/useMediaQuery/useMediaQueryTheme.js b/packages/mui-material/src/useMediaQuery/useMediaQueryTheme.js index 184b1e26a63cb5..2c2fa3858a6644 100644 --- a/packages/mui-material/src/useMediaQuery/useMediaQueryTheme.js +++ b/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) { diff --git a/packages/mui-system/src/useMediaQuery/index.d.ts b/packages/mui-system/src/useMediaQuery/index.d.ts new file mode 100644 index 00000000000000..bf4072caa40b80 --- /dev/null +++ b/packages/mui-system/src/useMediaQuery/index.d.ts @@ -0,0 +1,2 @@ +export { default } from './useMediaQuery'; +export * from './useMediaQuery'; diff --git a/packages/mui-system/src/useMediaQuery/index.js b/packages/mui-system/src/useMediaQuery/index.js new file mode 100644 index 00000000000000..74992f88e57857 --- /dev/null +++ b/packages/mui-system/src/useMediaQuery/index.js @@ -0,0 +1,2 @@ +'use client'; +export { default } from './useMediaQuery'; diff --git a/packages/mui-material/src/useMediaQuery/useMediaQuery.test.js b/packages/mui-system/src/useMediaQuery/useMediaQuery.test.js similarity index 99% rename from packages/mui-material/src/useMediaQuery/useMediaQuery.test.js rename to packages/mui-system/src/useMediaQuery/useMediaQuery.test.js index d2f91a1822ab53..9fe61b1e2b00e5 100644 --- a/packages/mui-material/src/useMediaQuery/useMediaQuery.test.js +++ b/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; diff --git a/packages/mui-material/src/useMediaQuery/useMediaQuery.ts b/packages/mui-system/src/useMediaQuery/useMediaQuery.ts similarity index 98% rename from packages/mui-material/src/useMediaQuery/useMediaQuery.ts rename to packages/mui-system/src/useMediaQuery/useMediaQuery.ts index afdda55456e356..2604643814856f 100644 --- a/packages/mui-material/src/useMediaQuery/useMediaQuery.ts +++ b/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. From ee5e7a8634ec4b5a9696d83827d501f3acb5b6a3 Mon Sep 17 00:00:00 2001 From: justintoman Date: Tue, 24 Oct 2023 14:40:36 +0900 Subject: [PATCH 2/9] Update packages/mui-system/src/useMediaQuery/useMediaQuery.ts Co-authored-by: Siriwat K Signed-off-by: justintoman --- packages/mui-system/src/useMediaQuery/useMediaQuery.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/mui-system/src/useMediaQuery/useMediaQuery.ts b/packages/mui-system/src/useMediaQuery/useMediaQuery.ts index 2604643814856f..5d0130b4def1b0 100644 --- a/packages/mui-system/src/useMediaQuery/useMediaQuery.ts +++ b/packages/mui-system/src/useMediaQuery/useMediaQuery.ts @@ -1,6 +1,7 @@ 'use client'; import * as React from 'react'; -import { getThemeProps, useThemeWithoutDefault as useTheme } from '@mui/system'; +import getThemeProps from '../getThemeProps'; +import useTheme from '../useThemeWithoutDefault'; import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils'; /** From 5b3be0e92a737c3b20ab8112e6da3afe047fcbf3 Mon Sep 17 00:00:00 2001 From: Justin Toman Date: Tue, 24 Oct 2023 14:43:29 +0900 Subject: [PATCH 3/9] Revert changes to docs --- docs/data/material/components/autocomplete/Virtualize.js | 2 +- docs/data/material/components/autocomplete/Virtualize.tsx | 2 +- docs/data/material/components/dialogs/ResponsiveDialog.js | 2 +- docs/data/material/components/dialogs/ResponsiveDialog.tsx | 2 +- .../data/material/components/use-media-query/JavaScriptMedia.js | 2 +- .../material/components/use-media-query/JavaScriptMedia.tsx | 2 +- docs/data/material/components/use-media-query/ServerSide.js | 2 +- docs/data/material/components/use-media-query/ServerSide.tsx | 2 +- .../material/components/use-media-query/SimpleMediaQuery.js | 2 +- .../material/components/use-media-query/SimpleMediaQuery.tsx | 2 +- docs/data/material/components/use-media-query/ThemeHelper.js | 2 +- docs/data/material/components/use-media-query/ThemeHelper.tsx | 2 +- docs/data/material/components/use-media-query/UseWidth.js | 2 +- docs/data/material/components/use-media-query/UseWidth.tsx | 2 +- docs/src/components/header/ThemeModeToggle.tsx | 2 +- docs/src/components/home/Hero.tsx | 2 +- docs/src/components/home/ProductsSwitcher.tsx | 2 +- docs/src/pages/premium-themes/paperbase/Paperbase.js | 2 +- docs/src/pages/premium-themes/paperbase/Paperbase.tsx | 2 +- 19 files changed, 19 insertions(+), 19 deletions(-) diff --git a/docs/data/material/components/autocomplete/Virtualize.js b/docs/data/material/components/autocomplete/Virtualize.js index 90529882b64029..7b62b6c4f7b938 100644 --- a/docs/data/material/components/autocomplete/Virtualize.js +++ b/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/system/useMediaQuery'; +import useMediaQuery from '@mui/material/useMediaQuery'; import ListSubheader from '@mui/material/ListSubheader'; import Popper from '@mui/material/Popper'; import { useTheme, styled } from '@mui/material/styles'; diff --git a/docs/data/material/components/autocomplete/Virtualize.tsx b/docs/data/material/components/autocomplete/Virtualize.tsx index b2d1640bde5930..cd6eee98854ff5 100644 --- a/docs/data/material/components/autocomplete/Virtualize.tsx +++ b/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/system/useMediaQuery'; +import useMediaQuery from '@mui/material/useMediaQuery'; import ListSubheader from '@mui/material/ListSubheader'; import Popper from '@mui/material/Popper'; import { useTheme, styled } from '@mui/material/styles'; diff --git a/docs/data/material/components/dialogs/ResponsiveDialog.js b/docs/data/material/components/dialogs/ResponsiveDialog.js index 5a3710baaa5195..5606901a18a2d8 100644 --- a/docs/data/material/components/dialogs/ResponsiveDialog.js +++ b/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/system/useMediaQuery'; +import useMediaQuery from '@mui/material/useMediaQuery'; import { useTheme } from '@mui/material/styles'; export default function ResponsiveDialog() { diff --git a/docs/data/material/components/dialogs/ResponsiveDialog.tsx b/docs/data/material/components/dialogs/ResponsiveDialog.tsx index 5a3710baaa5195..5606901a18a2d8 100644 --- a/docs/data/material/components/dialogs/ResponsiveDialog.tsx +++ b/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/system/useMediaQuery'; +import useMediaQuery from '@mui/material/useMediaQuery'; import { useTheme } from '@mui/material/styles'; export default function ResponsiveDialog() { diff --git a/docs/data/material/components/use-media-query/JavaScriptMedia.js b/docs/data/material/components/use-media-query/JavaScriptMedia.js index 4c6408492efd5a..60eb6d875ca554 100644 --- a/docs/data/material/components/use-media-query/JavaScriptMedia.js +++ b/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/system/useMediaQuery'; +import useMediaQuery from '@mui/material/useMediaQuery'; export default function JavaScriptMedia() { const matches = useMediaQuery( diff --git a/docs/data/material/components/use-media-query/JavaScriptMedia.tsx b/docs/data/material/components/use-media-query/JavaScriptMedia.tsx index 4c6408492efd5a..60eb6d875ca554 100644 --- a/docs/data/material/components/use-media-query/JavaScriptMedia.tsx +++ b/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/system/useMediaQuery'; +import useMediaQuery from '@mui/material/useMediaQuery'; export default function JavaScriptMedia() { const matches = useMediaQuery( diff --git a/docs/data/material/components/use-media-query/ServerSide.js b/docs/data/material/components/use-media-query/ServerSide.js index 970a14f1ba679d..5d34cd5143d426 100644 --- a/docs/data/material/components/use-media-query/ServerSide.js +++ b/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/system/useMediaQuery'; +import useMediaQuery from '@mui/material/useMediaQuery'; function MyComponent() { const matches = useMediaQuery('(min-width:600px)'); diff --git a/docs/data/material/components/use-media-query/ServerSide.tsx b/docs/data/material/components/use-media-query/ServerSide.tsx index 2827afa42dd74e..17f3ae8fc2b093 100644 --- a/docs/data/material/components/use-media-query/ServerSide.tsx +++ b/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/system/useMediaQuery'; +import useMediaQuery from '@mui/material/useMediaQuery'; function MyComponent() { const matches = useMediaQuery('(min-width:600px)'); diff --git a/docs/data/material/components/use-media-query/SimpleMediaQuery.js b/docs/data/material/components/use-media-query/SimpleMediaQuery.js index 8c18fe7d2abc33..361b052d83d3a8 100644 --- a/docs/data/material/components/use-media-query/SimpleMediaQuery.js +++ b/docs/data/material/components/use-media-query/SimpleMediaQuery.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import useMediaQuery from '@mui/system/useMediaQuery'; +import useMediaQuery from '@mui/material/useMediaQuery'; export default function SimpleMediaQuery() { const matches = useMediaQuery('(min-width:600px)'); diff --git a/docs/data/material/components/use-media-query/SimpleMediaQuery.tsx b/docs/data/material/components/use-media-query/SimpleMediaQuery.tsx index 8c18fe7d2abc33..361b052d83d3a8 100644 --- a/docs/data/material/components/use-media-query/SimpleMediaQuery.tsx +++ b/docs/data/material/components/use-media-query/SimpleMediaQuery.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import useMediaQuery from '@mui/system/useMediaQuery'; +import useMediaQuery from '@mui/material/useMediaQuery'; export default function SimpleMediaQuery() { const matches = useMediaQuery('(min-width:600px)'); diff --git a/docs/data/material/components/use-media-query/ThemeHelper.js b/docs/data/material/components/use-media-query/ThemeHelper.js index cee04a66924202..86193b81b93c69 100644 --- a/docs/data/material/components/use-media-query/ThemeHelper.js +++ b/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/system/useMediaQuery'; +import useMediaQuery from '@mui/material/useMediaQuery'; function MyComponent() { const theme = useTheme(); diff --git a/docs/data/material/components/use-media-query/ThemeHelper.tsx b/docs/data/material/components/use-media-query/ThemeHelper.tsx index cee04a66924202..86193b81b93c69 100644 --- a/docs/data/material/components/use-media-query/ThemeHelper.tsx +++ b/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/system/useMediaQuery'; +import useMediaQuery from '@mui/material/useMediaQuery'; function MyComponent() { const theme = useTheme(); diff --git a/docs/data/material/components/use-media-query/UseWidth.js b/docs/data/material/components/use-media-query/UseWidth.js index ceddd0b9d14970..5d82b3fb1394a8 100644 --- a/docs/data/material/components/use-media-query/UseWidth.js +++ b/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/system/useMediaQuery'; +import useMediaQuery from '@mui/material/useMediaQuery'; /** * Be careful using this hook. It only works because the number of diff --git a/docs/data/material/components/use-media-query/UseWidth.tsx b/docs/data/material/components/use-media-query/UseWidth.tsx index d6c27d2589109b..1477cab6b48388 100644 --- a/docs/data/material/components/use-media-query/UseWidth.tsx +++ b/docs/data/material/components/use-media-query/UseWidth.tsx @@ -6,7 +6,7 @@ import { useTheme, createTheme, } from '@mui/material/styles'; -import useMediaQuery from '@mui/system/useMediaQuery'; +import useMediaQuery from '@mui/material/useMediaQuery'; type BreakpointOrNull = Breakpoint | null; diff --git a/docs/src/components/header/ThemeModeToggle.tsx b/docs/src/components/header/ThemeModeToggle.tsx index cd5c9c9a441acf..ff22e076ae3797 100644 --- a/docs/src/components/header/ThemeModeToggle.tsx +++ b/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/system/useMediaQuery'; +import useMediaQuery from '@mui/material/useMediaQuery'; import { useChangeTheme } from 'docs/src/modules/components/ThemeContext'; function CssVarsModeToggle(props: { onChange: (checked: boolean) => void }) { diff --git a/docs/src/components/home/Hero.tsx b/docs/src/components/home/Hero.tsx index 7e29c3b13dffc0..d3b1c0e57d8dc8 100644 --- a/docs/src/components/home/Hero.tsx +++ b/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/system/useMediaQuery'; +import useMediaQuery from '@mui/material/useMediaQuery'; import GradientText from 'docs/src/components/typography/GradientText'; import GetStartedButtons from 'docs/src/components/home/GetStartedButtons'; import HeroContainer from 'docs/src/layouts/HeroContainer'; diff --git a/docs/src/components/home/ProductsSwitcher.tsx b/docs/src/components/home/ProductsSwitcher.tsx index 3fa08a17f9aa89..a92fcbba30beac 100644 --- a/docs/src/components/home/ProductsSwitcher.tsx +++ b/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/system/useMediaQuery'; +import useMediaQuery from '@mui/material/useMediaQuery'; import Typography from '@mui/material/Typography'; import Stack from '@mui/material/Stack'; import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded'; diff --git a/docs/src/pages/premium-themes/paperbase/Paperbase.js b/docs/src/pages/premium-themes/paperbase/Paperbase.js index 9224d2ae0dc281..909def1ac3c99f 100644 --- a/docs/src/pages/premium-themes/paperbase/Paperbase.js +++ b/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/system/useMediaQuery'; +import useMediaQuery from '@mui/material/useMediaQuery'; import CssBaseline from '@mui/material/CssBaseline'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; diff --git a/docs/src/pages/premium-themes/paperbase/Paperbase.tsx b/docs/src/pages/premium-themes/paperbase/Paperbase.tsx index 2bb9d25c9c5cce..f7d3f8cada0f53 100644 --- a/docs/src/pages/premium-themes/paperbase/Paperbase.tsx +++ b/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/system/useMediaQuery'; +import useMediaQuery from '@mui/material/useMediaQuery'; import CssBaseline from '@mui/material/CssBaseline'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; From e7be1bd5af6b0f11b5b79627f7df831304db5249 Mon Sep 17 00:00:00 2001 From: Justin Toman Date: Tue, 24 Oct 2023 14:57:16 +0900 Subject: [PATCH 4/9] Fix imports --- packages/mui-system/src/useMediaQuery/useMediaQuery.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-system/src/useMediaQuery/useMediaQuery.ts b/packages/mui-system/src/useMediaQuery/useMediaQuery.ts index 5d0130b4def1b0..7c9d7a4cff87d3 100644 --- a/packages/mui-system/src/useMediaQuery/useMediaQuery.ts +++ b/packages/mui-system/src/useMediaQuery/useMediaQuery.ts @@ -1,8 +1,8 @@ 'use client'; import * as React from 'react'; -import getThemeProps from '../getThemeProps'; -import useTheme from '../useThemeWithoutDefault'; import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils'; +import { getThemeProps } from '../useThemeProps'; +import useTheme from '../useThemeWithoutDefault'; /** * @deprecated Not used internally. Use `MediaQueryListEvent` from lib.dom.d.ts instead. From 17185db1649b9b38f13b01996289fb96f21484d0 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 30 Oct 2023 13:41:31 +0700 Subject: [PATCH 5/9] fix import --- packages/mui-system/src/index.d.ts | 3 +++ packages/mui-system/src/index.js | 1 + packages/mui-system/src/useMediaQuery/index.js | 2 -- packages/mui-system/src/useMediaQuery/{index.d.ts => index.ts} | 1 + 4 files changed, 5 insertions(+), 2 deletions(-) delete mode 100644 packages/mui-system/src/useMediaQuery/index.js rename packages/mui-system/src/useMediaQuery/{index.d.ts => index.ts} (84%) diff --git a/packages/mui-system/src/index.d.ts b/packages/mui-system/src/index.d.ts index 7f24359229a63d..825745b588f909 100644 --- a/packages/mui-system/src/index.d.ts +++ b/packages/mui-system/src/index.d.ts @@ -153,6 +153,9 @@ export * from './useTheme'; export { default as useThemeWithoutDefault } from './useThemeWithoutDefault'; export * from './useThemeWithoutDefault'; +export { default as useMediaQuery } from './useMediaQuery'; +export * from './useMediaQuery'; + export * from './colorManipulator'; export { default as ThemeProvider } from './ThemeProvider'; diff --git a/packages/mui-system/src/index.js b/packages/mui-system/src/index.js index 9ec60389c62402..c6a0f98f74ff33 100644 --- a/packages/mui-system/src/index.js +++ b/packages/mui-system/src/index.js @@ -56,6 +56,7 @@ export { default as shape } from './createTheme/shape'; export { default as useThemeProps, getThemeProps } from './useThemeProps'; export { default as useTheme } from './useTheme'; export { default as useThemeWithoutDefault } from './useThemeWithoutDefault'; +export { default as useMediaQuery } from './useMediaQuery'; export * from './colorManipulator'; export { default as ThemeProvider } from './ThemeProvider'; export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider'; diff --git a/packages/mui-system/src/useMediaQuery/index.js b/packages/mui-system/src/useMediaQuery/index.js deleted file mode 100644 index 74992f88e57857..00000000000000 --- a/packages/mui-system/src/useMediaQuery/index.js +++ /dev/null @@ -1,2 +0,0 @@ -'use client'; -export { default } from './useMediaQuery'; diff --git a/packages/mui-system/src/useMediaQuery/index.d.ts b/packages/mui-system/src/useMediaQuery/index.ts similarity index 84% rename from packages/mui-system/src/useMediaQuery/index.d.ts rename to packages/mui-system/src/useMediaQuery/index.ts index bf4072caa40b80..c5817cc6c5e543 100644 --- a/packages/mui-system/src/useMediaQuery/index.d.ts +++ b/packages/mui-system/src/useMediaQuery/index.ts @@ -1,2 +1,3 @@ +'use client'; export { default } from './useMediaQuery'; export * from './useMediaQuery'; From ce60b09976a7eab953fc0933c25ddf7397e0d37c Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 30 Oct 2023 13:51:18 +0700 Subject: [PATCH 6/9] move test back to Material UI --- .../src/useMediaQuery/useMediaQuery.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename packages/{mui-system => mui-material}/src/useMediaQuery/useMediaQuery.test.js (99%) diff --git a/packages/mui-system/src/useMediaQuery/useMediaQuery.test.js b/packages/mui-material/src/useMediaQuery/useMediaQuery.test.js similarity index 99% rename from packages/mui-system/src/useMediaQuery/useMediaQuery.test.js rename to packages/mui-material/src/useMediaQuery/useMediaQuery.test.js index 9fe61b1e2b00e5..d2f91a1822ab53 100644 --- a/packages/mui-system/src/useMediaQuery/useMediaQuery.test.js +++ b/packages/mui-material/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/system/useMediaQuery'; +import useMediaQuery from '@mui/material/useMediaQuery'; import { ThemeProvider } from '@mui/material/styles'; const usesUseSyncExternalStore = React.useSyncExternalStore !== undefined; From f3cc2397f6f2c0aad2538228d3020c6ac26cfe69 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 20 Feb 2024 13:45:27 +0700 Subject: [PATCH 7/9] fix utils import --- packages/mui-system/src/useMediaQuery/index.ts | 1 - packages/mui-system/src/useMediaQuery/useMediaQuery.ts | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/mui-system/src/useMediaQuery/index.ts b/packages/mui-system/src/useMediaQuery/index.ts index c5817cc6c5e543..bf4072caa40b80 100644 --- a/packages/mui-system/src/useMediaQuery/index.ts +++ b/packages/mui-system/src/useMediaQuery/index.ts @@ -1,3 +1,2 @@ -'use client'; export { default } from './useMediaQuery'; export * from './useMediaQuery'; diff --git a/packages/mui-system/src/useMediaQuery/useMediaQuery.ts b/packages/mui-system/src/useMediaQuery/useMediaQuery.ts index 7c9d7a4cff87d3..592785aece184b 100644 --- a/packages/mui-system/src/useMediaQuery/useMediaQuery.ts +++ b/packages/mui-system/src/useMediaQuery/useMediaQuery.ts @@ -1,6 +1,6 @@ 'use client'; import * as React from 'react'; -import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils'; +import useEnhancedEffect from '@mui/utils/useEnhancedEffect'; import { getThemeProps } from '../useThemeProps'; import useTheme from '../useThemeWithoutDefault'; From fa1264ada2361b4200e8fed9529bd2f285648814 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 20 Feb 2024 13:59:32 +0700 Subject: [PATCH 8/9] remove unnecessary 'use client' --- packages/mui-material/src/useMediaQuery/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/mui-material/src/useMediaQuery/index.js b/packages/mui-material/src/useMediaQuery/index.js index 662f9739860eb8..ebc567714f0478 100644 --- a/packages/mui-material/src/useMediaQuery/index.js +++ b/packages/mui-material/src/useMediaQuery/index.js @@ -1,2 +1 @@ -'use client'; export { default } from '@mui/system/useMediaQuery'; From 6a4b4a0ec4f751b38b19d28274ec9635bdf143ec Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Tue, 20 Feb 2024 14:29:00 +0700 Subject: [PATCH 9/9] trigger build