@mui/system 6.1.1 → 6.1.2

package/CHANGELOG.md

@@ -1,5 +1,67 @@
 # [Versions](https://mui.com/versions/)
 
+## v6.1.2
+
+<!-- generated comparing v6.1.1..master -->
+
+_Oct 2, 2024_
+
+A big thanks to the 13 contributors who made this release possible.
+
+### `@mui/material@6.1.2`
+
+- [Modal] Remove unnecessary `manager` prop handling (#43867) @ZeeshanTamboli
+- [Autocomplete] Fix listbox opens and closes on click when used with `limitTags` (#42494) @appleSimple
+- [Button] Ignore `dark` and `contrastText` if not provided in the theme (#43861) @siriwatknp
+- [Button] Fix regression for color `inherit` (#43862) @siriwatknp
+- [LinearProgress] Fix background color (#43949) @sai6855
+- Support CSS variables with shadow DOM (#43948) @siriwatknp
+- Improve getReactElementRef() utils (#43022) @sai6855
+- [Modal] Replace `show` parameter name with `hide` in modal manager (#43868) @ZeeshanTamboli
+- [Rating] Use Rating `name` as prefix of input element ids (#43829) @yash49
+- [Drawer] Refactor getScrollbarSize usages (#43828) @BrianWoolfolk
+- [Drawer] Fix issue with main window being used instead of iframe's window (#43818) @albarv340
+- [ThemeProvider] Support setting default mode (#43951) @siriwatknp
+
+### Docs
+
+- Update theme toggle demo (#43956) @Janpot
+- Add note about minimum required webpack version (#43864) @Janpot
+- Format Pigment CSS docs (#43812) @oliviertassinari
+- Fix visual bug on dashboard template (#43836) @oliviertassinari
+- Fix pigment-css.md syntax error (#43837) @kdichev
+- Fix Sign-in template form experience (#43838) @oliviertassinari
+- Remove "To be continued" section from v0 –> v1 migration guide (#43832) @samuelsycamore
+- Fix 301 to chromium (#43809) @oliviertassinari
+- [joy-ui] Add missing ComponentLinkHeader components (#43865) @samuelsycamore
+- [Modal] Remove unnecessary type assertion (#43825) @ZeeshanTamboli
+- [Table] Stabilize random series in virtualized table demo (#43744) @Janpot
+- [system] Add migration guide link to `@mui/styles` pages (#43833) @samuelsycamore
+
+### Core
+
+- [code-infra] Fix flaky dashboard screenshot - take 2 (#43937) @Janpot
+- [code-infra] Replace all instances of `e` with `event` and add eslint rule (#43866) @samuelsycamore
+- [code-infra] Fix and update bundling fixtures (#43709) @Janpot
+- [code-infra] Update transitive dependencies with vulnerabilties (#43895) @Janpot
+- [code-infra] Optimize regression tests (#43889) @Janpot
+- [code-infra] Remove custom playwright installation steps (#43881) @Janpot
+- [code-infra] Fix flaky dashboard screenshot (#43890) @Janpot
+- [code-infra] Add new instanceof proptypes for toolpad (#43814) @Janpot
+- Fix eslint-plugin-react-compiler issues in usePagination tests (#43946) @wilhelmlofsten
+- 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
+- [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
+- [website] Add 'Row spanning' (#43831) @oliviertassinari
+- [website] Improve Next roles section (#43822) @oliviertassinari
+- [website] Open the xCharts, eXplore and X general react engineer roles (#43805) @DanailH
+
+All contributors of this release in alphabetical order: @albarv340, @appleSimple, @BrianWoolfolk, @DanailH, @Janpot, @kdichev, @oliviertassinari, @sai6855, @samuelsycamore, @siriwatknp, @wilhelmlofsten, @yash49, @ZeeshanTamboli
+
 ## v6.1.1
 
 <!-- generated comparing v6.1.0..master -->

package/cssVars/createCssVarsProvider.d.ts

@@ -54,6 +54,12 @@ export interface CreateCssVarsProviderResult<
             colorSchemeSelector?: 'media' | 'class' | 'data' | string;
           }
         >;
+        /**
+         * The default mode when the storage is empty,
+         * require the theme to have `colorSchemes` with light and dark.
+         * @default 'system'
+         */
+        defaultMode?: 'light' | 'dark' | 'system';
         /**
          * The document used to perform `disableTransitionOnChange` feature
          * @default document

package/cssVars/createCssVarsProvider.js

@@ -49,7 +49,8 @@ export default function createCssVarsProvider(options) {
       documentNode = typeof document === 'undefined' ? undefined : document,
       colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
       disableNestedContext = false,
-      disableStyleSheetGeneration = false
+      disableStyleSheetGeneration = false,
+      defaultMode: initialMode = 'system'
     } = props;
     const hasMounted = React.useRef(false);
     const upperTheme = muiUseTheme();
@@ -72,7 +73,7 @@ export default function createCssVarsProvider(options) {
     const allColorSchemes = React.useMemo(() => joinedColorSchemes.split(','), [joinedColorSchemes]);
     const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
     const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
-    const defaultMode = colorSchemes[defaultLightColorScheme] && colorSchemes[defaultDarkColorScheme] ? 'system' : colorSchemes[restThemeProp.defaultColorScheme]?.palette?.mode || restThemeProp.palette?.mode;
+    const defaultMode = colorSchemes[defaultLightColorScheme] && colorSchemes[defaultDarkColorScheme] ? initialMode : colorSchemes[restThemeProp.defaultColorScheme]?.palette?.mode || restThemeProp.palette?.mode;
 
     // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
     const {
@@ -244,6 +245,11 @@ export default function createCssVarsProvider(options) {
      * localStorage key used to store `colorScheme`
      */
     colorSchemeStorageKey: PropTypes.string,
+    /**
+     * The default mode when the storage is empty,
+     * require the theme to have `colorSchemes` with light and dark.
+     */
+    defaultMode: PropTypes.string,
     /**
      * If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
      */

package/cssVars/useCurrentColorScheme.js

@@ -43,7 +43,7 @@ function initializeValue(key, defaultValue) {
       // the first time that user enters the site.
       localStorage.setItem(key, defaultValue);
     }
-  } catch (e) {
+  } catch {
     // Unsupported
   }
   return value || defaultValue;
@@ -90,7 +90,7 @@ export default function useCurrentColorScheme(options) {
       const newMode = mode ?? defaultMode;
       try {
         localStorage.setItem(modeStorageKey, newMode);
-      } catch (e) {
+      } catch {
         // Unsupported
       }
       return {
@@ -106,7 +106,7 @@ export default function useCurrentColorScheme(options) {
         try {
           localStorage.setItem(`${colorSchemeStorageKey}-light`, defaultLightColorScheme);
           localStorage.setItem(`${colorSchemeStorageKey}-dark`, defaultDarkColorScheme);
-        } catch (e) {
+        } catch {
           // Unsupported
         }
         return {
@@ -126,7 +126,7 @@ export default function useCurrentColorScheme(options) {
           processState(currentState, mode => {
             try {
               localStorage.setItem(`${colorSchemeStorageKey}-${mode}`, value);
-            } catch (e) {
+            } catch {
               // Unsupported
             }
             if (mode === 'light') {

package/index.js

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

package/modern/cssVars/createCssVarsProvider.js

@@ -49,7 +49,8 @@ export default function createCssVarsProvider(options) {
       documentNode = typeof document === 'undefined' ? undefined : document,
       colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
       disableNestedContext = false,
-      disableStyleSheetGeneration = false
+      disableStyleSheetGeneration = false,
+      defaultMode: initialMode = 'system'
     } = props;
     const hasMounted = React.useRef(false);
     const upperTheme = muiUseTheme();
@@ -72,7 +73,7 @@ export default function createCssVarsProvider(options) {
     const allColorSchemes = React.useMemo(() => joinedColorSchemes.split(','), [joinedColorSchemes]);
     const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
     const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
-    const defaultMode = colorSchemes[defaultLightColorScheme] && colorSchemes[defaultDarkColorScheme] ? 'system' : colorSchemes[restThemeProp.defaultColorScheme]?.palette?.mode || restThemeProp.palette?.mode;
+    const defaultMode = colorSchemes[defaultLightColorScheme] && colorSchemes[defaultDarkColorScheme] ? initialMode : colorSchemes[restThemeProp.defaultColorScheme]?.palette?.mode || restThemeProp.palette?.mode;
 
     // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
     const {
@@ -244,6 +245,11 @@ export default function createCssVarsProvider(options) {
      * localStorage key used to store `colorScheme`
      */
     colorSchemeStorageKey: PropTypes.string,
+    /**
+     * The default mode when the storage is empty,
+     * require the theme to have `colorSchemes` with light and dark.
+     */
+    defaultMode: PropTypes.string,
     /**
      * If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
      */

package/modern/cssVars/useCurrentColorScheme.js

@@ -43,7 +43,7 @@ function initializeValue(key, defaultValue) {
       // the first time that user enters the site.
       localStorage.setItem(key, defaultValue);
     }
-  } catch (e) {
+  } catch {
     // Unsupported
   }
   return value || defaultValue;
@@ -90,7 +90,7 @@ export default function useCurrentColorScheme(options) {
       const newMode = mode ?? defaultMode;
       try {
         localStorage.setItem(modeStorageKey, newMode);
-      } catch (e) {
+      } catch {
         // Unsupported
       }
       return {
@@ -106,7 +106,7 @@ export default function useCurrentColorScheme(options) {
         try {
           localStorage.setItem(`${colorSchemeStorageKey}-light`, defaultLightColorScheme);
           localStorage.setItem(`${colorSchemeStorageKey}-dark`, defaultDarkColorScheme);
-        } catch (e) {
+        } catch {
           // Unsupported
         }
         return {
@@ -126,7 +126,7 @@ export default function useCurrentColorScheme(options) {
           processState(currentState, mode => {
             try {
               localStorage.setItem(`${colorSchemeStorageKey}-${mode}`, value);
-            } catch (e) {
+            } catch {
               // Unsupported
             }
             if (mode === 'light') {

package/modern/index.js

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

package/modern/version/index.js

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

package/node/cssVars/createCssVarsProvider.js

@@ -58,7 +58,8 @@ function createCssVarsProvider(options) {
       documentNode = typeof document === 'undefined' ? undefined : document,
       colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
       disableNestedContext = false,
-      disableStyleSheetGeneration = false
+      disableStyleSheetGeneration = false,
+      defaultMode: initialMode = 'system'
     } = props;
     const hasMounted = React.useRef(false);
     const upperTheme = (0, _privateTheming.useTheme)();
@@ -81,7 +82,7 @@ function createCssVarsProvider(options) {
     const allColorSchemes = React.useMemo(() => joinedColorSchemes.split(','), [joinedColorSchemes]);
     const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
     const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
-    const defaultMode = colorSchemes[defaultLightColorScheme] && colorSchemes[defaultDarkColorScheme] ? 'system' : colorSchemes[restThemeProp.defaultColorScheme]?.palette?.mode || restThemeProp.palette?.mode;
+    const defaultMode = colorSchemes[defaultLightColorScheme] && colorSchemes[defaultDarkColorScheme] ? initialMode : colorSchemes[restThemeProp.defaultColorScheme]?.palette?.mode || restThemeProp.palette?.mode;
 
     // 1. Get the data about the `mode`, `colorScheme`, and setter functions.
     const {
@@ -253,6 +254,11 @@ function createCssVarsProvider(options) {
      * localStorage key used to store `colorScheme`
      */
     colorSchemeStorageKey: _propTypes.default.string,
+    /**
+     * The default mode when the storage is empty,
+     * require the theme to have `colorSchemes` with light and dark.
+     */
+    defaultMode: _propTypes.default.string,
     /**
      * If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
      */

package/node/cssVars/useCurrentColorScheme.js

@@ -51,7 +51,7 @@ function initializeValue(key, defaultValue) {
       // the first time that user enters the site.
       localStorage.setItem(key, defaultValue);
     }
-  } catch (e) {
+  } catch {
     // Unsupported
   }
   return value || defaultValue;
@@ -98,7 +98,7 @@ function useCurrentColorScheme(options) {
       const newMode = mode ?? defaultMode;
       try {
         localStorage.setItem(modeStorageKey, newMode);
-      } catch (e) {
+      } catch {
         // Unsupported
       }
       return {
@@ -114,7 +114,7 @@ function useCurrentColorScheme(options) {
         try {
           localStorage.setItem(`${colorSchemeStorageKey}-light`, defaultLightColorScheme);
           localStorage.setItem(`${colorSchemeStorageKey}-dark`, defaultDarkColorScheme);
-        } catch (e) {
+        } catch {
           // Unsupported
         }
         return {
@@ -134,7 +134,7 @@ function useCurrentColorScheme(options) {
           processState(currentState, mode => {
             try {
               localStorage.setItem(`${colorSchemeStorageKey}-${mode}`, value);
-            } catch (e) {
+            } catch {
               // Unsupported
             }
             if (mode === 'light') {

package/node/index.js

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "6.1.1",
+  "version": "6.1.2",
   "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.1",
-    "@mui/styled-engine": "^6.1.1",
-    "@mui/utils": "^6.1.1",
-    "@mui/types": "^7.2.17"
+    "@mui/private-theming": "^6.1.2",
+    "@mui/types": "^7.2.17",
+    "@mui/styled-engine": "^6.1.2",
+    "@mui/utils": "^6.1.2"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

package/version/index.js

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