@mui/system 6.4.0 → 6.4.1

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.4.1
+
+<!-- generated comparing v6.4.0..master -->
+
+_Jan 21, 2025_
+
+A big thanks to the 9 contributors who made this release possible.
+
+### `@mui/material@6.4.1`
+
+- [ButtonBase] Export types used in ButtonBase props (#43530) @Janpot
+- [Dialog] Add slots and slotProps (#44792) @sai6855
+- [Drawer] Deprecate composed classes (#44870) @yash49
+- [IconButton] Set default loading to `null` (#45057) @siriwatknp
+- [ListItem] Add codemod for deprecated props (#45022) @sai6855
+- [Modal] Add migration guide and codemod for deprecated props (#45021) @sai6855
+- [TextField] Fix filled state to be synced with autofill (#44135) @DiegoAndai
+
+### `@mui/system@6.4.1`
+
+- Fix dark mode flicker using `useEnhancedEffect` (#44812) @siriwatknp
+
+### `@mui/utils@6.4.1`
+
+- Do not deep merge React component (#45058) @siriwatknp
+
+### Docs
+
+- Fix typo (#45070) @Fullchee
+- Improve Toolpad templates section (#44914) @bharatkashyap
+- Fix expand / collapse icons orientation (#44989) @zanivan
+- Rename "Base UI" to "MUI Base" in all text (#45060) @mj12albert
+- Add @mui/base deprecation callout (#45030) @mj12albert
+- Update @mui/base deprecation message (#45064) @mj12albert
+
+### Core
+
+- [code-infra] Add "use client" directive to files with React APIs (#45036) @Janpot
+- [docs] 301 redirect `/base-ui` to `base-ui.com` (#45061) @mj12albert
+
+All contributors of this release in alphabetical order: @bharatkashyap, @DiegoAndai, @Fullchee, @Janpot, @mj12albert, @sai6855, @siriwatknp, @yash49, @zanivan
+
 ## 6.4.0
 
 <!-- generated comparing v6.3.1..master -->

package/RtlProvider/index.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

package/cssVars/createCssVarsProvider.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
@@ -11,6 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styledEngine = require("@mui/styled-engine");
 var _privateTheming = require("@mui/private-theming");
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _ThemeProvider = _interopRequireDefault(require("../ThemeProvider"));
 var _InitColorSchemeScript = _interopRequireWildcard(require("../InitColorSchemeScript/InitColorSchemeScript"));
 var _useCurrentColorScheme = _interopRequireDefault(require("./useCurrentColorScheme"));
@@ -155,7 +157,7 @@ function createCssVarsProvider(options) {
     // 5. Declaring effects
     // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
     const colorSchemeSelector = restThemeProp.colorSchemeSelector;
-    React.useEffect(() => {
+    (0, _useEnhancedEffect.default)(() => {
       if (colorScheme && colorSchemeNode && colorSchemeSelector && colorSchemeSelector !== 'media') {
         const selector = colorSchemeSelector;
         let rule = colorSchemeSelector;

package/esm/RtlProvider/index.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { jsx as _jsx } from "react/jsx-runtime";

package/esm/cssVars/createCssVarsProvider.js

@@ -1,7 +1,10 @@
+'use client';
+
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GlobalStyles } from '@mui/styled-engine';
 import { useTheme as muiUseTheme } from '@mui/private-theming';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import ThemeProvider from "../ThemeProvider/index.js";
 import InitColorSchemeScript, { DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from "../InitColorSchemeScript/InitColorSchemeScript.js";
 import useCurrentColorScheme from "./useCurrentColorScheme.js";
@@ -146,7 +149,7 @@ export default function createCssVarsProvider(options) {
     // 5. Declaring effects
     // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
     const colorSchemeSelector = restThemeProp.colorSchemeSelector;
-    React.useEffect(() => {
+    useEnhancedEffect(() => {
       if (colorScheme && colorSchemeNode && colorSchemeSelector && colorSchemeSelector !== 'media') {
         const selector = colorSchemeSelector;
         let rule = colorSchemeSelector;

package/esm/version/index.js

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

package/index.js

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

package/modern/RtlProvider/index.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { jsx as _jsx } from "react/jsx-runtime";

package/modern/cssVars/createCssVarsProvider.js

@@ -1,7 +1,10 @@
+'use client';
+
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GlobalStyles } from '@mui/styled-engine';
 import { useTheme as muiUseTheme } from '@mui/private-theming';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import ThemeProvider from "../ThemeProvider/index.js";
 import InitColorSchemeScript, { DEFAULT_COLOR_SCHEME_STORAGE_KEY, DEFAULT_MODE_STORAGE_KEY } from "../InitColorSchemeScript/InitColorSchemeScript.js";
 import useCurrentColorScheme from "./useCurrentColorScheme.js";
@@ -146,7 +149,7 @@ export default function createCssVarsProvider(options) {
     // 5. Declaring effects
     // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
     const colorSchemeSelector = restThemeProp.colorSchemeSelector;
-    React.useEffect(() => {
+    useEnhancedEffect(() => {
       if (colorScheme && colorSchemeNode && colorSchemeSelector && colorSchemeSelector !== 'media') {
         const selector = colorSchemeSelector;
         let rule = colorSchemeSelector;

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v6.4.0
+ * @mui/system v6.4.1
  *
  * @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.4.0";
+export const version = "6.4.1";
 export const major = Number("6");
 export const minor = Number("4");
-export const patch = Number("0");
+export const patch = Number("1");
 export const prerelease = undefined;
 export default version;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "6.4.0",
+  "version": "6.4.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.",
@@ -30,10 +30,10 @@
     "clsx": "^2.1.1",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
-    "@mui/private-theming": "^6.4.0",
-    "@mui/styled-engine": "^6.4.0",
+    "@mui/utils": "^6.4.1",
     "@mui/types": "^7.2.21",
-    "@mui/utils": "^6.4.0"
+    "@mui/private-theming": "^6.4.1",
+    "@mui/styled-engine": "^6.4.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

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