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

[justintoman]

• Move useMediaQuery to @mui/system
• Re-export from @mui/material to prevent breaking changes
• part of [joy-ui] Add useMediaQuery hook #35037

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

https://deploy-preview-39463--material-ui.netlify.app/

@material-ui/system: parsed: +1.40% , gzip: +1.41%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against a184be6

[justintoman]

I don't understand why the browser tests for joy began failing. This feels like an import issue, and it seems like it's only happening in bundled environments.

I've tried a number of things

• Adding beforeEach/afterEach for mocking window.matchMedia from theme-scoping.test.tsx to various places, but it didn't fix everything, and I also feel like that's not a valid solution to this problem.
• I tried messing with files that dealt with bundling or paths that mentioned useMediaQuery and changing it to come from system instead, but the tests still fail, window.matchMedia is still undefined.
  • scripts/sizeSnapshot/webpack.config.js
  • test/bundling/fixtures/next-webpack5/pages/next-webpack.fixture.js
  • test/bundling/scripts/fixtureTemplateValues.js
  • test/bundling/scripts/packages.js

I didn't commit any of that because it didn't solve anything.

Kinda stumped here 😅 would appreciate if someone could give me some help. 🙏

Sorry, thought this would be an easier lift. I'll keep trying but I don't feel like I have a clear idea of how to approach this.

[siriwatknp]

I moved the test back to @mui/material but still got errors. It's weird.

[justintoman]

Looks like it should be good to go, unless any of those changes I mentioned here for the bundling/test/webpack stuff need to go in.

[shadoath]

Watching to see when this is merged.

[siriwatknp]

👍 Thanks for the PR!

[justintoman]

This has been approved for a while... anything holding it up? Willing to update whatever is necessary!

[siriwatknp]

This has been approved for a while... anything holding it up? Willing to update whatever is necessary!

I will merge after the CIs are green. Thanks for the PR and very sorry for the delay.

[siriwatknp]

@michaldudak @Janpot Need your help, the CI error seems unrelated to the change. Can you guess what would be the root cause?

[michaldudak]

Looks like we're low on memory during typechecking. Try reducing concurrency in the typescript:ci script

[Janpot]

I think I ran into this as well last week and increased available memory for this script.
But decreasing concurrency will likely work as well

edit: @siriwatknp That PR got merged, you may want to try and rebase

[cipherlogs]

This needs to be added to the Joy-UI documentation.

With Material UI, we can import useMediaQuery using the normal path '@mui/material/useMediaQuery'. There is no need to update the Material UI docs. However, if using Joy UI, we have to install @mui/system, which is not mentioned in the documentation.

I hope this issue can be addressed.

#41402 It would also be better if Joy-UI moved away from useMediaQuery and added support for the breakpoints object using all props.