@mui/system 6.1.0 → 6.1.1

package/CHANGELOG.md

@@ -1,5 +1,68 @@
 # [Versions](https://mui.com/versions/)
 
+## v6.1.1
+
+<!-- generated comparing v6.1.0..master -->
+
+_Sep 19, 2024_
+
+A big thanks to the 18 contributors who made this release possible.
+
+### `@mui/material@6.1.1`
+
+- [Grid] Bring back `GridProps` and `GridTypeMap` (#43717) @DiegoAndai
+- [Paper] Fix wrong background-image on Paper when elevation is 0 (#43723) @ZeeshanTamboli
+- [Skeleton] Fix wave animation for styled-components (#43740) @siriwatknp
+- [Modal] Fix event handlers overriding behavior (#43757) @sai6855
+
+### `@mui/system@6.1.1`
+
+- Pass the stylesheet directly to `GlobalStyles` (#43739) @siriwatknp
+
+### `@mui/utils@6.1.1`
+
+- Fix "useId" & "useSyncExternalStore" imports to not be statically analyzable (#43360) @yash49
+
+### Docs
+
+- [material-ui][Breadcrumbs] Document CondensedWithMenu option for Breadcrumbs (#42973) @Sergio16T
+- [material-ui][CircularProgress] Add Circular size demo (#43734) @sai6855
+- [material-ui][slider] Fix slider in color customization playground twitches when sliding (#43671) @Nashyn
+- [material-ui][slider] Polish Music player demo (#43748) @oliviertassinari
+- [material-ui] Document Typography color prop breaking change (#43735) @aarongarciah
+- [material-ui] Add docs for complementary Table components (#43756) @Juneezee
+- [material-ui] Improve minimizing bundle docs (#43781) @ZeeshanTamboli
+- [pigment-css] Call out Pigment being in alpha (#43725) @aarongarciah
+- [pigment-css] Fix typo globalCSS -> globalCss (#43754) @hiro0218
+- [test] Improve demos for better regression screenshots (#43742) @aarongarciah
+- Fix minor typo (#42899) @xconverge
+- Revert icon search virtualization (#43569) @Janpot
+- Fix MUI Treasury Layout broken links (#43752) @oliviertassinari
+- Fix 301 link to design asset @oliviertassinari
+- Update release schedule table after v6 stable (#43726) @sahil-ag
+- Fix bundle size link regression @oliviertassinari
+
+### Core
+
+- [code-infra] Allow overriding all `options` of `useFakeTimers` function (#43729) @LukasTy
+- [core] Fix 301 link to Next.js and git diff @oliviertassinari
+- [core] Fix package.json repository rule @oliviertassinari
+- [core] Remove redundant window @oliviertassinari
+- [core] Fix some issues reported by eslint-plugin-react-compiler (#43117) @binsmyth
+- [core] Replace more `indexOf` with `includes` (#43694) @Juneezee
+- [core] Remove /.yarn (#43712) @oliviertassinari
+- [docs-infra] Enable synthetic default imports in TypeScript config (#43747) @morozow
+- [docs-infra] Fix Vale config for TypeScript references (#43751) @oliviertassinari
+- [docs-infra] Fix toolbar arrow order (#43627) @oliviertassinari
+- [docs-infra] Fix missing dependencies in multi-tab demos (#43713) @cherniavskii
+- [docs-infra] Fix API search link regression (#43662) @oliviertassinari
+- [test] Update font-awesome CSS file in regression tests fixture (#43745) @Janpot
+- [test] Remove position:relative from regression container (#43743) @aarongarciah
+- [test] Remove top-level inline-block from the regression tests (#43656) @Janpot
+- [website] Match pricing page with linked page h1 @oliviertassinari
+
+All contributors of this release in alphabetical order: @aarongarciah, @binsmyth, @cherniavskii, @DiegoAndai, @Janpot, @Juneezee, @LukasTy, @mnajdova, @morozow, @Nashyn, @oliviertassinari, @sahil-ag, @sai6855, @Sergio16T, @siriwatknp, @xconverge, @yash49, @ZeeshanTamboli
+
 ## v6.1.0
 
 <!-- generated comparing v6.0.2..master -->

package/cssVars/createCssVarsProvider.js

@@ -215,14 +215,12 @@ export default function createCssVarsProvider(options) {
       shouldGenerateStyleSheet = false;
     }
     const element = /*#__PURE__*/_jsxs(React.Fragment, {
-      children: [shouldGenerateStyleSheet && /*#__PURE__*/_jsx(React.Fragment, {
-        children: (theme.generateStyleSheets?.() || []).map((styles, index) => /*#__PURE__*/_jsx(GlobalStyles, {
-          styles: styles
-        }, index))
-      }), /*#__PURE__*/_jsx(ThemeProvider, {
+      children: [/*#__PURE__*/_jsx(ThemeProvider, {
         themeId: scopedTheme ? themeId : undefined,
         theme: resolveTheme ? resolveTheme(theme) : theme,
         children: children
+      }), shouldGenerateStyleSheet && /*#__PURE__*/_jsx(GlobalStyles, {
+        styles: theme.generateStyleSheets?.() || []
       })]
     });
     if (nested) {

package/cssVars/cssVarsParser.js

@@ -67,7 +67,7 @@ const getCssValue = (keys, value) => {
       return value;
     }
     const lastKey = keys[keys.length - 1];
-    if (lastKey.toLowerCase().indexOf('opacity') >= 0) {
+    if (lastKey.toLowerCase().includes('opacity')) {
       // opacity values are unitless
       return value;
     }

package/index.js

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

package/modern/cssVars/createCssVarsProvider.js

@@ -215,14 +215,12 @@ export default function createCssVarsProvider(options) {
       shouldGenerateStyleSheet = false;
     }
     const element = /*#__PURE__*/_jsxs(React.Fragment, {
-      children: [shouldGenerateStyleSheet && /*#__PURE__*/_jsx(React.Fragment, {
-        children: (theme.generateStyleSheets?.() || []).map((styles, index) => /*#__PURE__*/_jsx(GlobalStyles, {
-          styles: styles
-        }, index))
-      }), /*#__PURE__*/_jsx(ThemeProvider, {
+      children: [/*#__PURE__*/_jsx(ThemeProvider, {
         themeId: scopedTheme ? themeId : undefined,
         theme: resolveTheme ? resolveTheme(theme) : theme,
         children: children
+      }), shouldGenerateStyleSheet && /*#__PURE__*/_jsx(GlobalStyles, {
+        styles: theme.generateStyleSheets?.() || []
       })]
     });
     if (nested) {

package/modern/cssVars/cssVarsParser.js

@@ -67,7 +67,7 @@ const getCssValue = (keys, value) => {
       return value;
     }
     const lastKey = keys[keys.length - 1];
-    if (lastKey.toLowerCase().indexOf('opacity') >= 0) {
+    if (lastKey.toLowerCase().includes('opacity')) {
       // opacity values are unitless
       return value;
     }

package/modern/index.js

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

package/modern/useMediaQuery/useMediaQuery.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { getThemeProps } from "../useThemeProps/index.js";
 import useTheme from "../useThemeWithoutDefault/index.js";
+// TODO React 17: Remove `useMediaQueryOld` once React 17 support is removed
 function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
   const [match, setMatch] = React.useState(() => {
     if (noSsr && matchMedia) {
@@ -34,8 +35,11 @@ function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSs
   return match;
 }
 
-// eslint-disable-next-line no-useless-concat -- Workaround for https://github.com/webpack/webpack/issues/14814
-const maybeReactUseSyncExternalStore = React['useSyncExternalStore' + ''];
+// See https://github.com/mui/material-ui/issues/41190#issuecomment-2040873379 for why
+const safeReact = {
+  ...React
+};
+const maybeReactUseSyncExternalStore = safeReact.useSyncExternalStore;
 function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
   const getDefaultSnapshot = React.useCallback(() => defaultMatches, [defaultMatches]);
   const getServerSnapshot = React.useMemo(() => {
@@ -89,8 +93,6 @@ export default function useMediaQuery(queryInput, options = {}) {
   }
   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') {

package/modern/version/index.js

@@ -1,6 +1,6 @@
-export const version = "6.1.0";
+export const version = "6.1.1";
 export const major = Number("6");
 export const minor = Number("1");
-export const patch = Number("0");
+export const patch = Number("1");
 export const prerelease = undefined;
 export default version;

package/node/cssVars/createCssVarsProvider.js

@@ -224,14 +224,12 @@ function createCssVarsProvider(options) {
       shouldGenerateStyleSheet = false;
     }
     const element = /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-      children: [shouldGenerateStyleSheet && /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
-        children: (theme.generateStyleSheets?.() || []).map((styles, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
-          styles: styles
-        }, index))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemeProvider.default, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemeProvider.default, {
         themeId: scopedTheme ? themeId : undefined,
         theme: resolveTheme ? resolveTheme(theme) : theme,
         children: children
+      }), shouldGenerateStyleSheet && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.GlobalStyles, {
+        styles: theme.generateStyleSheets?.() || []
       })]
     });
     if (nested) {

package/node/cssVars/cssVarsParser.js

@@ -77,7 +77,7 @@ const getCssValue = (keys, value) => {
       return value;
     }
     const lastKey = keys[keys.length - 1];
-    if (lastKey.toLowerCase().indexOf('opacity') >= 0) {
+    if (lastKey.toLowerCase().includes('opacity')) {
       // opacity values are unitless
       return value;
     }

package/node/index.js

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

package/node/useMediaQuery/useMediaQuery.js

@@ -11,6 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _useThemeProps = require("../useThemeProps");
 var _useThemeWithoutDefault = _interopRequireDefault(require("../useThemeWithoutDefault"));
+// TODO React 17: Remove `useMediaQueryOld` once React 17 support is removed
 function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
   const [match, setMatch] = React.useState(() => {
     if (noSsr && matchMedia) {
@@ -41,8 +42,11 @@ function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSs
   return match;
 }
 
-// eslint-disable-next-line no-useless-concat -- Workaround for https://github.com/webpack/webpack/issues/14814
-const maybeReactUseSyncExternalStore = React['useSyncExternalStore' + ''];
+// See https://github.com/mui/material-ui/issues/41190#issuecomment-2040873379 for why
+const safeReact = {
+  ...React
+};
+const maybeReactUseSyncExternalStore = safeReact.useSyncExternalStore;
 function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
   const getDefaultSnapshot = React.useCallback(() => defaultMatches, [defaultMatches]);
   const getServerSnapshot = React.useMemo(() => {
@@ -96,8 +100,6 @@ function useMediaQuery(queryInput, options = {}) {
   }
   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') {

package/node/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.0";
+const version = exports.version = "6.1.1";
 const major = exports.major = Number("6");
 const minor = exports.minor = Number("1");
-const patch = exports.patch = Number("0");
+const patch = exports.patch = Number("1");
 const prerelease = exports.prerelease = undefined;
 var _default = exports.default = version;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "6.1.0",
+  "version": "6.1.1",
   "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.",
@@ -13,7 +13,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/mui/material-ui.git",
+    "url": "git+https://github.com/mui/material-ui.git",
     "directory": "packages/mui-system"
   },
   "license": "MIT",
@@ -30,10 +30,10 @@
     "clsx": "^2.1.1",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
-    "@mui/private-theming": "^6.1.0",
-    "@mui/styled-engine": "^6.1.0",
-    "@mui/types": "^7.2.16",
-    "@mui/utils": "^6.1.0"
+    "@mui/private-theming": "^6.1.1",
+    "@mui/styled-engine": "^6.1.1",
+    "@mui/utils": "^6.1.1",
+    "@mui/types": "^7.2.17"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

package/useMediaQuery/useMediaQuery.js

@@ -4,6 +4,7 @@ import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { getThemeProps } from "../useThemeProps/index.js";
 import useTheme from "../useThemeWithoutDefault/index.js";
+// TODO React 17: Remove `useMediaQueryOld` once React 17 support is removed
 function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
   const [match, setMatch] = React.useState(() => {
     if (noSsr && matchMedia) {
@@ -34,8 +35,11 @@ function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSs
   return match;
 }
 
-// eslint-disable-next-line no-useless-concat -- Workaround for https://github.com/webpack/webpack/issues/14814
-const maybeReactUseSyncExternalStore = React['useSyncExternalStore' + ''];
+// See https://github.com/mui/material-ui/issues/41190#issuecomment-2040873379 for why
+const safeReact = {
+  ...React
+};
+const maybeReactUseSyncExternalStore = safeReact.useSyncExternalStore;
 function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
   const getDefaultSnapshot = React.useCallback(() => defaultMatches, [defaultMatches]);
   const getServerSnapshot = React.useMemo(() => {
@@ -89,8 +93,6 @@ export default function useMediaQuery(queryInput, options = {}) {
   }
   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') {

package/version/index.js

@@ -1,6 +1,6 @@
-export const version = "6.1.0";
+export const version = "6.1.1";
 export const major = Number("6");
 export const minor = Number("1");
-export const patch = Number("0");
+export const patch = Number("1");
 export const prerelease = undefined;
 export default version;