@mui/system 6.1.6 → 6.1.8

package/CHANGELOG.md

@@ -1,6 +1,113 @@
 # [Versions](https://mui.com/versions/)
 
-## 6.1.6
+## v6.1.8
+
+<!-- generated comparing v6.1.7..master -->
+
+_Nov 20, 2024_
+
+A big thanks to the 10 contributors who made this release possible.
+
+TODO INSERT HIGHLIGHTS
+
+### `@mui/material@6.1.8`
+
+- [Autocomplete] Use `ul` element for the listbox (#44422) @DiegoAndai
+- [Grid2] Remove item and zeroMinWidth classes from grid2Classes (#44419) @sai6855
+- [StepIcon] Add SvgIconOwnProps type to StepIcon props (#44337) @sai6855
+- Add generic back to `useMediaQuery` to prevent a breaking change (#44455) @siriwatknp
+- [Tooltip] Deprecate `*Component` and `*Props` for v6 (#44350) @siriwatknp
+
+### `@mui/system@6.1.8`
+
+- Warn when calling `setMode` without configuring `colorSchemeSelector` (#43783) @siriwatknp
+
+### `@mui/styled-engine@6.1.8`
+
+- Add back removed internal function (#44421) @mnajdova
+
+### `@mui/utils@6.1.8`
+
+- Skip deep clone React element (#44400) @siriwatknp
+- Add documentation to `useForkRef` (#44410) @JCQuintas
+
+### Docs
+
+- [Accordion] Replace hardcoded classes with constants in demos (#44453) @ZeeshanTamboli
+- [material-ui][Autocomplete] Fix virtualization demo (#44382) @DiegoAndai
+- Revert #44388 (#44454) @prakhargupta1
+- Add App starters in related-projects.md (#44315) @oliviertassinari
+- Bring back `*Component` and `*Props` codemods and deprecation messages (#44383) @DiegoAndai
+- [docs] Copyedit Templates page (#44461) @samuelsycamore
+
+### Core
+
+- Remove `stylis-plugin-rtl-sc` (#44447) @renovate[bot]
+- [test][Autocomplete] Make virtualize regression screenshots deterministic (#44425) @DiegoAndai
+- [blog] Fix reference to subdomain on MUI X v8 alpha zero post (#44416) @joserodolfofreitas
+- [blog] MUI X v8 alpha zero blog post (#44377) @joserodolfofreitas
+- [code-infra] Use vitest-compatible skip in `describeConformance` (#44412) @JCQuintas
+- Keep OpenSSF badge up-to-date (aef2bf2) @oliviertassinari
+- Polish useForkRef docs (#44424) @oliviertassinari
+- [infra] Upgrade Cherry-pick workflow to latest (#44448) @oliviertassinari
+
+All contributors of this release in alphabetical order: @DiegoAndai, @JCQuintas, @joserodolfofreitas, @mnajdova, @oliviertassinari, @prakhargupta1, @sai6855, samuelsycamore, @siriwatknp, @ZeeshanTamboli
+
+## v6.1.7
+
+<!-- generated comparing v6.1.6..master -->
+
+_Nov 13, 2024_
+
+A big thanks to the 13 contributors who made this release possible.
+This release includes fixes as well as documentation improvements.
+
+### `@mui/material@6.1.7`
+
+- Fix default props theme scoping (#44340) @siriwatknp
+- Support theme scoping in `useMediaQuery` (#44339) @siriwatknp
+- [Grid] Fix regression spacing prop with string value (#44376) @siriwatknp
+
+### `@mui/styled-engine-sc@6.1.7`
+
+- Fix missing `@types/hoist-non-react-statics` causing `styled` returns any (#44397) @megos
+
+### Docs
+
+- Replace 'Experimental APIs - Toolpad' with 'Toolpad (Beta)' (#44388) @prakhargupta1
+- Fix Pigment CSS install (#44353) @oliviertassinari
+- Fix dashboard menu warning (#44317) @siriwatknp
+- Add runtime theme section for Material Pigment CSS (#44137) @siriwatknp
+- Add hash to `key` to remove noise from console (#44289) @sai6855
+- Revise Example Projects and Related Projects pages (#44191) @samuelsycamore
+- [material-ui] Fix typo in typography theme set up for templates (#44338) @navedqb
+- [material-ui] Add StackBlitz/CodeSandbox buttons to template cards (#44253) @zanivan
+- [material-ui] Fix Sign-in/Sign-up templates layout (#44281) @zanivan
+- [material-ui] Remove noise in template (#44260) @oliviertassinari
+- [material-ui][Rating] Add uncontrolled example to Basic Rating demo (#44386) @sai6855
+- [material-ui][TextField] Replace InputProps with slotProps.input in demo (#44288) @sai6855
+
+### Core
+
+- [blog] Follow media asset guidelines (#44374) @oliviertassinari
+- [code-infra] Changes for test util to work in `vitest` (#43625) @JCQuintas
+- Remove old marked JS options (#44375) @ZeeshanTamboli
+- Fix webpack capitalization (#44352) @oliviertassinari
+- Fix Next.js link 404 (710cd95) @oliviertassinari
+- Update Gold sponsoring backlinks (#44316) @oliviertassinari
+- Fix tools-public.mui.com redirection (9196fa5) @oliviertassinari
+- Remove blank AlertTitle test file (#44282) @ZeeshanTamboli
+- [docs-infra] Fix ad in RTL (#44345) @oliviertassinari
+- [docs-infra] Enforce punctuation on descriptions (#44292) @oliviertassinari
+- [docs-infra] Add CodeSandbox and StackBlitz to vale vocab (6db477a) @oliviertassinari
+- [docs-infra] Fix correct spelling of VS Code (#44277) @oliviertassinari
+- [docs-infra] Add a `rawDescriptions` option (#44390) @vladmoroz
+- [examples] Add missing `clsx` dependency (#43526) @Janpot
+- [infra] Fix @renovate[bot] appearing in changelog (#44275) @mnajdova
+
+All contributors of this release in alphabetical order: @Janpot, @JCQuintas, @megos, @mnajdova, @navedqb, @oliviertassinari, @prakhargupta1, @sai6855, @samuelsycamore, @siriwatknp, @vladmoroz, @zanivan, @ZeeshanTamboli
+
+## v6.1.6
 
 <!-- generated comparing v6.1.5..master -->
 
@@ -52,7 +159,7 @@ A big thanks to the 13 contributors who made this release possible.
 
 All contributors of this release in alphabetical order: @aarongarciah, @blackcow1987, @DiegoAndai, @jimmycallin, @joshkel, @mnajdova, @navedqb, @nphmuller, @o-alexandrov, @oliviertassinari, @prakhargupta1, @sai6855, @siriwatknp
 
-## 6.1.5
+## v6.1.5
 
 <!-- generated comparing v6.1.4..master -->
 
@@ -84,7 +191,7 @@ A big thanks to the 9 contributors who made this release possible.
 - [material-ui][TextField] Dynamically modify the eye password button aria-label (#44122) @ChinoUkaegbu
 - [icons] Run pnpm docs:mdicons:synonyms (#44098) @oliviertassinari
 - [joy-ui] Update Overview copy to match Readme (#44136) @samuelsycamore
-- Add CodeSandbox/Stackblitz to the rest of the templates (#43708) @siriwatknp
+- Add CodeSandbox/StackBlitz to the rest of the templates (#43708) @siriwatknp
 - Update Figma link to fix 301 (a7b7d9c) @oliviertassinari
 - Link Toolpad from Core repo (#44111) @prakhargupta1
 - Remove HighlightedCode max-width (#43731) @Janpot
@@ -254,7 +361,7 @@ A big thanks to the 13 contributors who made this release possible.
 - Uniformity in version range @oliviertassinari
 - Replace `toBeAriaHidden` matcher with `toBeInaccessible` in tests (#43870) @ZeeshanTamboli
 - [docs-infra] Strengthen CSP (#43711) @oliviertassinari
-- [docs-infra] Open Codesandbox demo with fontsize=12 (#43860) @siriwatknp
+- [docs-infra] Open CodeSandbox demo with fontsize=12 (#43860) @siriwatknp
 - [icons] Reduce Material Icon page size (#43911) @oliviertassinari
 - [test] Point Istanbul to correct URL (#43935) @sai6855
 - [test] Sync React.version parse logic with codebase (#43820) @oliviertassinari

package/ThemeProvider/ThemeProvider.js

@@ -65,7 +65,7 @@ function ThemeProvider(props) {
   }
   const engineTheme = useThemeScoping(themeId, upperTheme, localTheme);
   const privateTheme = useThemeScoping(themeId, upperPrivateTheme, localTheme, true);
-  const rtlValue = engineTheme.direction === 'rtl';
+  const rtlValue = (themeId ? engineTheme[themeId] : engineTheme).direction === 'rtl';
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_privateTheming.ThemeProvider, {
     theme: privateTheme,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.ThemeContext.Provider, {
@@ -73,7 +73,7 @@ function ThemeProvider(props) {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RtlProvider.default, {
         value: rtlValue,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DefaultPropsProvider.default, {
-          value: engineTheme?.components,
+          value: themeId ? engineTheme[themeId].components : engineTheme.components,
           children: children
         })
       })

package/cssVars/createCssVarsProvider.js

@@ -217,9 +217,14 @@ function createCssVarsProvider(options) {
       lightColorScheme,
       mode,
       setColorScheme,
-      setMode,
+      setMode: process.env.NODE_ENV === 'production' ? setMode : newMode => {
+        if (theme.colorSchemeSelector === 'media') {
+          console.error(['MUI: The `setMode` function has no effect if `colorSchemeSelector` is `media` (`media` is the default value).', 'To toggle the mode manually, please configure `colorSchemeSelector` to use a class or data attribute.', 'To learn more, visit https://mui.com/material-ui/customization/css-theme-variables/configuration/#toggling-dark-mode-manually'].join('\n'));
+        }
+        setMode(newMode);
+      },
       systemMode
-    }), [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode]);
+    }), [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode, theme.colorSchemeSelector]);
     let shouldGenerateStyleSheet = true;
     if (disableStyleSheetGeneration || restThemeProp.cssVariables === false || nested && upperTheme?.cssVarPrefix === cssVarPrefix) {
       shouldGenerateStyleSheet = false;

package/esm/ThemeProvider/ThemeProvider.js

@@ -58,7 +58,7 @@ function ThemeProvider(props) {
   }
   const engineTheme = useThemeScoping(themeId, upperTheme, localTheme);
   const privateTheme = useThemeScoping(themeId, upperPrivateTheme, localTheme, true);
-  const rtlValue = engineTheme.direction === 'rtl';
+  const rtlValue = (themeId ? engineTheme[themeId] : engineTheme).direction === 'rtl';
   return /*#__PURE__*/_jsx(MuiThemeProvider, {
     theme: privateTheme,
     children: /*#__PURE__*/_jsx(StyledEngineThemeContext.Provider, {
@@ -66,7 +66,7 @@ function ThemeProvider(props) {
       children: /*#__PURE__*/_jsx(RtlProvider, {
         value: rtlValue,
         children: /*#__PURE__*/_jsx(DefaultPropsProvider, {
-          value: engineTheme?.components,
+          value: themeId ? engineTheme[themeId].components : engineTheme.components,
           children: children
         })
       })

package/esm/cssVars/createCssVarsProvider.js

@@ -208,9 +208,14 @@ export default function createCssVarsProvider(options) {
       lightColorScheme,
       mode,
       setColorScheme,
-      setMode,
+      setMode: process.env.NODE_ENV === 'production' ? setMode : newMode => {
+        if (theme.colorSchemeSelector === 'media') {
+          console.error(['MUI: The `setMode` function has no effect if `colorSchemeSelector` is `media` (`media` is the default value).', 'To toggle the mode manually, please configure `colorSchemeSelector` to use a class or data attribute.', 'To learn more, visit https://mui.com/material-ui/customization/css-theme-variables/configuration/#toggling-dark-mode-manually'].join('\n'));
+        }
+        setMode(newMode);
+      },
       systemMode
-    }), [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode]);
+    }), [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode, theme.colorSchemeSelector]);
     let shouldGenerateStyleSheet = true;
     if (disableStyleSheetGeneration || restThemeProp.cssVariables === false || nested && upperTheme?.cssVarPrefix === cssVarPrefix) {
       shouldGenerateStyleSheet = false;

package/esm/useMediaQuery/useMediaQuery.js

@@ -69,38 +69,50 @@ function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia, noSs
   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';
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function unstable_createUseMediaQuery(params = {}) {
   const {
-    defaultMatches = false,
-    matchMedia = supportMatchMedia ? window.matchMedia : null,
-    ssrMatchMedia = null,
-    noSsr = false
-  } = 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'));
+    themeId
+  } = params;
+  return function useMediaQuery(queryInput, options = {}) {
+    let theme = useTheme();
+    if (theme && themeId) {
+      theme = theme[themeId] || theme;
     }
-  }
-  let query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
-  query = query.replace(/^@media( ?)/m, '');
-  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
-    React.useDebugValue({
-      query,
-      match
+    // 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 = false
+    } = getThemeProps({
+      name: 'MuiUseMediaQuery',
+      props: options,
+      theme
     });
-  }
-  return match;
-}
+    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 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
+      React.useDebugValue({
+        query,
+        match
+      });
+    }
+    return match;
+  };
+}
+const useMediaQuery = unstable_createUseMediaQuery();
+export default useMediaQuery;

package/esm/version/index.js

@@ -1,6 +1,6 @@
-export const version = "6.1.6";
+export const version = "6.1.8";
 export const major = Number("6");
 export const minor = Number("1");
-export const patch = Number("6");
+export const patch = Number("8");
 export const prerelease = undefined;
 export default version;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v6.1.6
+ * @mui/system v6.1.8
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/ThemeProvider/ThemeProvider.js

@@ -58,7 +58,7 @@ function ThemeProvider(props) {
   }
   const engineTheme = useThemeScoping(themeId, upperTheme, localTheme);
   const privateTheme = useThemeScoping(themeId, upperPrivateTheme, localTheme, true);
-  const rtlValue = engineTheme.direction === 'rtl';
+  const rtlValue = (themeId ? engineTheme[themeId] : engineTheme).direction === 'rtl';
   return /*#__PURE__*/_jsx(MuiThemeProvider, {
     theme: privateTheme,
     children: /*#__PURE__*/_jsx(StyledEngineThemeContext.Provider, {
@@ -66,7 +66,7 @@ function ThemeProvider(props) {
       children: /*#__PURE__*/_jsx(RtlProvider, {
         value: rtlValue,
         children: /*#__PURE__*/_jsx(DefaultPropsProvider, {
-          value: engineTheme?.components,
+          value: themeId ? engineTheme[themeId].components : engineTheme.components,
           children: children
         })
       })

package/modern/cssVars/createCssVarsProvider.js

@@ -208,9 +208,14 @@ export default function createCssVarsProvider(options) {
       lightColorScheme,
       mode,
       setColorScheme,
-      setMode,
+      setMode: process.env.NODE_ENV === 'production' ? setMode : newMode => {
+        if (theme.colorSchemeSelector === 'media') {
+          console.error(['MUI: The `setMode` function has no effect if `colorSchemeSelector` is `media` (`media` is the default value).', 'To toggle the mode manually, please configure `colorSchemeSelector` to use a class or data attribute.', 'To learn more, visit https://mui.com/material-ui/customization/css-theme-variables/configuration/#toggling-dark-mode-manually'].join('\n'));
+        }
+        setMode(newMode);
+      },
       systemMode
-    }), [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode]);
+    }), [allColorSchemes, colorScheme, darkColorScheme, lightColorScheme, mode, setColorScheme, setMode, systemMode, theme.colorSchemeSelector]);
     let shouldGenerateStyleSheet = true;
     if (disableStyleSheetGeneration || restThemeProp.cssVariables === false || nested && upperTheme?.cssVarPrefix === cssVarPrefix) {
       shouldGenerateStyleSheet = false;

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v6.1.6
+ * @mui/system v6.1.8
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/useMediaQuery/useMediaQuery.js

@@ -69,38 +69,50 @@ function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia, noSs
   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';
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function unstable_createUseMediaQuery(params = {}) {
   const {
-    defaultMatches = false,
-    matchMedia = supportMatchMedia ? window.matchMedia : null,
-    ssrMatchMedia = null,
-    noSsr = false
-  } = 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'));
+    themeId
+  } = params;
+  return function useMediaQuery(queryInput, options = {}) {
+    let theme = useTheme();
+    if (theme && themeId) {
+      theme = theme[themeId] || theme;
     }
-  }
-  let query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
-  query = query.replace(/^@media( ?)/m, '');
-  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
-    React.useDebugValue({
-      query,
-      match
+    // 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 = false
+    } = getThemeProps({
+      name: 'MuiUseMediaQuery',
+      props: options,
+      theme
     });
-  }
-  return match;
-}
+    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 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
+      React.useDebugValue({
+        query,
+        match
+      });
+    }
+    return match;
+  };
+}
+const useMediaQuery = unstable_createUseMediaQuery();
+export default useMediaQuery;

package/modern/version/index.js

@@ -1,6 +1,6 @@
-export const version = "6.1.6";
+export const version = "6.1.8";
 export const major = Number("6");
 export const minor = Number("1");
-export const patch = Number("6");
+export const patch = Number("8");
 export const prerelease = undefined;
 export default version;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "6.1.6",
+  "version": "6.1.8",
   "private": false,
   "author": "MUI Team",
   "description": "MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.",
@@ -30,10 +30,10 @@
     "clsx": "^2.1.1",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
-    "@mui/private-theming": "^6.1.6",
-    "@mui/utils": "^6.1.6",
-    "@mui/styled-engine": "^6.1.6",
-    "@mui/types": "^7.2.19"
+    "@mui/private-theming": "^6.1.8",
+    "@mui/types": "^7.2.19",
+    "@mui/utils": "^6.1.8",
+    "@mui/styled-engine": "^6.1.8"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

package/useMediaQuery/useMediaQuery.d.ts

@@ -25,4 +25,8 @@ export interface UseMediaQueryOptions {
         matches: boolean;
     };
 }
-export default function useMediaQuery<Theme = unknown>(queryInput: string | ((theme: Theme) => string), options?: UseMediaQueryOptions): boolean;
+export declare function unstable_createUseMediaQuery(params?: {
+    themeId?: string;
+}): <Theme = unknown>(queryInput: string | ((theme: Theme) => string), options?: UseMediaQueryOptions) => boolean;
+declare const useMediaQuery: <Theme = unknown>(queryInput: string | ((theme: Theme) => string), options?: UseMediaQueryOptions) => boolean;
+export default useMediaQuery;

package/useMediaQuery/useMediaQuery.js

@@ -6,7 +6,8 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = useMediaQuery;
+exports.default = void 0;
+exports.unstable_createUseMediaQuery = unstable_createUseMediaQuery;
 var React = _interopRequireWildcard(require("react"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _useThemeProps = require("../useThemeProps");
@@ -76,38 +77,50 @@ function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia, noSs
   const match = maybeReactUseSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
   return match;
 }
-function useMediaQuery(queryInput, options = {}) {
-  const theme = (0, _useThemeWithoutDefault.default)();
-  // 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';
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function unstable_createUseMediaQuery(params = {}) {
   const {
-    defaultMatches = false,
-    matchMedia = supportMatchMedia ? window.matchMedia : null,
-    ssrMatchMedia = null,
-    noSsr = false
-  } = (0, _useThemeProps.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'));
+    themeId
+  } = params;
+  return function useMediaQuery(queryInput, options = {}) {
+    let theme = (0, _useThemeWithoutDefault.default)();
+    if (theme && themeId) {
+      theme = theme[themeId] || theme;
     }
-  }
-  let query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
-  query = query.replace(/^@media( ?)/m, '');
-  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
-    React.useDebugValue({
-      query,
-      match
+    // 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 = false
+    } = (0, _useThemeProps.getThemeProps)({
+      name: 'MuiUseMediaQuery',
+      props: options,
+      theme
     });
-  }
-  return match;
-}
+    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 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
+      React.useDebugValue({
+        query,
+        match
+      });
+    }
+    return match;
+  };
+}
+const useMediaQuery = unstable_createUseMediaQuery();
+var _default = exports.default = useMediaQuery;

package/version/index.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.version = exports.prerelease = exports.patch = exports.minor = exports.major = exports.default = void 0;
-const version = exports.version = "6.1.6";
+const version = exports.version = "6.1.8";
 const major = exports.major = Number("6");
 const minor = exports.minor = Number("1");
-const patch = exports.patch = Number("6");
+const patch = exports.patch = Number("8");
 const prerelease = exports.prerelease = undefined;
 var _default = exports.default = version;