@mui/system 6.0.0-alpha.8 → 6.0.0-alpha.9

package/CHANGELOG.md

@@ -1,5 +1,81 @@
 # [Versions](https://mui.com/versions/)
 
+## v6.0.0-alpha.9
+
+<!-- generated comparing v6.0.0-alpha.8..next -->
+
+_May 29, 2024_
+
+A big thanks to the 23 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 `CssVarsProvider` and `extendTheme` are now stable (#42246) @siriwatknp
+
+### `@mui/material@6.0.0-alpha.9`
+
+- &#8203;<!-- 49 -->[AlertTitle] Enable extending Typography props (#42269) @lucasgmelo
+- &#8203;<!-- 48 -->[AvatarGroup] deprecate `componentsProps` for v6 (#42122) @lhilgert9
+- &#8203;<!-- 15 -->[Grid] Deprecate `wrap` prop (#42363) @fedirjh
+- &#8203;<!-- 14 -->[ListItem] Document `*Component` and `*Props` props deprecations (#42263) @aarongarciah
+- &#8203;<!-- 13 -->[ListItem] Deprecate ListItem's components and componentsProps (#42219) @aarongarciah
+- &#8203;<!-- 12 -->[ListItemSecondaryAction] Deprecate component (#42251) @aarongarciah
+- &#8203;<!-- 11 -->Stabilize `CssVarsProvider` and `extendTheme` (#42246) @siriwatknp
+- &#8203;<!-- 10 -->[Popper] Deprecate components and componentProps props for v6 (#42111) @ChronicusUA
+- &#8203;<!-- 09 -->[responsiveFontSizes] Handled undefined variants (#42412) @brijeshb42
+- &#8203;<!-- 08 -->[Slider] Fix wrong CSS value (#42370) @mnajdova
+- &#8203;<!-- 07 -->[Tooltip] Deprecate components and componentProps props for v6 (#42107) @ChronicusUA
+
+### `@mui/system@6.0.0-alpha.9`
+
+- &#8203;<!-- 34 -->[createStyled] Intercept `ownerState` coming from `props` and `ownerState` (#42358) @DiegoAndai
+
+### `@mui/codemod@6.0.0-alpha.9`
+
+- &#8203;<!-- 41 -->Add `sx` prop for v6 migration (#42153) @siriwatknp
+- &#8203;<!-- 40 -->Add codemod for removing system props (#42282) @siriwatknp
+
+### Docs
+
+- &#8203;<!-- 33 -->Remove unused images (#42324) @danilo-leal
+- &#8203;<!-- 32 -->Add Pigment CSS and Base UI logos SVGs (#42322) @danilo-leal
+- &#8203;<!-- 22 -->[joy-ui] Fix template responsiveness (#42422) @j4marcos
+- &#8203;<!-- 21 -->[material-ui] Add the Pashto locale (#42244) @sayoubiaf
+- &#8203;<!-- 20 -->[material-ui] Remove duplicate Design Kits page (#42338) @danilo-leal
+- &#8203;<!-- 19 -->[material-ui] Document callback to access theme in GlobalStyles (#42257) @aarongarciah
+- &#8203;<!-- 18 -->[material-ui] Add minor modifications to the Vertical stepper demo (#42342) @mihilt
+- &#8203;<!-- 17 -->[material-ui][Tabs] Improve the Basic Tabs demo (#42374) @MatheusEli
+- &#8203;<!-- 16 -->[pigment-css] Polish redirection mention @oliviertassinari
+
+### Core
+
+- &#8203;<!-- 47 -->[blog] Add fixes and clean ups to the Blog page (#42311) @danilo-leal
+- &#8203;<!-- 46 -->[blog] Add the "Product" tag to the Pigment CSS post (#42365) @danilo-leal
+- &#8203;<!-- 45 -->[code-infra] Simplify .stylelintrc.js @oliviertassinari
+- &#8203;<!-- 44 -->[code-infra] Fix stylelint locally (#42411) @oliviertassinari
+- &#8203;<!-- 43 -->[code-infra] Run corepack enable on all CI jobs (#42331) @Janpot
+- &#8203;<!-- 42 -->[code-infra] Create examples eslint rule (#42170) @oliviertassinari
+- &#8203;<!-- 39 -->[core] Apply React 19 type changes that don't require upcoming `@types/` packages (#42346) @DiegoAndai
+- &#8203;<!-- 38 -->[core] Remove `react-swipeable-views-utils` package from docs (#42378) @ZeeshanTamboli
+- &#8203;<!-- 37 -->[core] Update `@testing-library/react` and `@testing-library/dom` packages (#42349) @ZeeshanTamboli
+- &#8203;<!-- 36 -->[core] Remove `@types/prettier` package (#42339) @ZeeshanTamboli
+- &#8203;<!-- 35 -->[core] Remove `WyW-in-JS` from Renovate config (#42335) @ZeeshanTamboli
+- &#8203;<!-- 31 -->[docs-infra] Split feedback channels per product (#42413) @alexfauquette
+- &#8203;<!-- 30 -->[docs-infra] Avoid cryptic errors when tests don't exist (#42356) @Janpot
+- &#8203;<!-- 29 -->[docs-infra] Make menu styles consistent (#42387) @danilo-leal
+- &#8203;<!-- 28 -->[docs-infra] Display deprecation messages in API pages (#42352) @aarongarciah
+- &#8203;<!-- 27 -->[docs-infra] Standardize API pages Alert styles (#42386) @danilo-leal
+- &#8203;<!-- 26 -->[docs-infra] Fix Toolpad Core API links (#42362) @apedroferreira
+- &#8203;<!-- 25 -->[docs-infra] Tigthen up the header design (#42180) @danilo-leal
+- &#8203;<!-- 24 -->[docs-infra] Add Toolpad to muiNpmOrgs for codesandbox demos (#42316) @Janpot
+- &#8203;<!-- 23 -->[docs-infra] Allow JSDoc tags (#42337) @aarongarciah
+- &#8203;<!-- 06 -->[test] Remove `userAgent` override in `jsdom` env (#42344) @cherniavskii
+- &#8203;<!-- 05 -->[utils] Fix GitHub-reported prototype pollution vulnerability in `deepmerge` (#41652) @tjcouch-sil
+- &#8203;<!-- 04 -->[website] Add Nikita to the about page (#42418) @nikitaa24
+- &#8203;<!-- 03 -->[website] Fix hero spacing changes applying at the wrong breakpoint (#42341) @KenanYusuf
+- &#8203;<!-- 02 -->[website] Adds Kenan Yusuf to about page (#42317) @KenanYusuf
+- &#8203;<!-- 01 -->[website] Improve about page @oliviertassinari
+
+All contributors of this release in alphabetical order: @aarongarciah, @alexfauquette, @apedroferreira, @brijeshb42, @cherniavskii, @ChronicusUA, @danilo-leal, @DiegoAndai, @fedirjh, @j4marcos, @Janpot, @KenanYusuf, @lhilgert9, @lucasgmelo, @MatheusEli, @mihilt, @mnajdova, @nikitaa24, @oliviertassinari, @sayoubiaf, @siriwatknp, @tjcouch-sil, @ZeeshanTamboli
+
 ## v6.0.0-alpha.8
 
 <!-- generated comparing v6.0.0-alpha.7..next -->

package/createStyled/createStyled.js

@@ -56,6 +56,11 @@ function processStyleArg(callableStyle, {
       ...props
     }));
   }
+  const mergedState = {
+    ...props,
+    ...ownerState,
+    ownerState
+  };
   if (!!resolvedStylesArg && typeof resolvedStylesArg === 'object' && Array.isArray(resolvedStylesArg.variants)) {
     const {
       variants = [],
@@ -65,11 +70,7 @@ function processStyleArg(callableStyle, {
     variants.forEach(variant => {
       let isMatch = true;
       if (typeof variant.props === 'function') {
-        isMatch = variant.props({
-          ownerState,
-          ...props,
-          ...ownerState
-        });
+        isMatch = variant.props(mergedState);
       } else {
         Object.keys(variant.props).forEach(key => {
           if (ownerState?.[key] !== variant.props[key] && props[key] !== variant.props[key]) {
@@ -81,11 +82,7 @@ function processStyleArg(callableStyle, {
         if (!Array.isArray(result)) {
           result = [result];
         }
-        result.push(typeof variant.style === 'function' ? variant.style({
-          ownerState,
-          ...props,
-          ...ownerState
-        }) : variant.style);
+        result.push(typeof variant.style === 'function' ? variant.style(mergedState) : variant.style);
       }
     });
     return result;

package/createTheme/applyStyles.d.ts

@@ -6,7 +6,7 @@ export interface ApplyStyles<K extends string> {
  * A universal utility to style components with multiple color modes. Always use it from the theme object.
  * It works with:
  *  - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
- *  - [CSS theme variables](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/)
+ *  - [CSS theme variables](https://mui.com/material-ui/customization/css-theme-variables/overview/)
  *  - Zero-runtime engine
  *
  * Tips: Use an array over object spread and place `theme.applyStyles()` last.

package/createTheme/applyStyles.js

@@ -2,7 +2,7 @@
  * A universal utility to style components with multiple color modes. Always use it from the theme object.
  * It works with:
  *  - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
- *  - [CSS theme variables](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/)
+ *  - [CSS theme variables](https://mui.com/material-ui/customization/css-theme-variables/overview/)
  *  - Zero-runtime engine
  *
  * Tips: Use an array over object spread and place `theme.applyStyles()` last.

package/cssVars/createCssVarsProvider.d.ts

@@ -90,7 +90,7 @@ export interface CreateCssVarsProviderResult<
         disableStyleSheetGeneration?: boolean;
       }
     >,
-  ) => React.ReactElement;
+  ) => React.ReactElement<any>;
   useColorScheme: () => ColorSchemeContextValue<ColorScheme>;
   getInitColorSchemeScript: typeof getInitColorSchemeScript;
 }

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v6.0.0-alpha.8
+ * @mui/system v6.0.0-alpha.9
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/createStyled/createStyled.js

@@ -56,6 +56,11 @@ function processStyleArg(callableStyle, {
       ...props
     }));
   }
+  const mergedState = {
+    ...props,
+    ...ownerState,
+    ownerState
+  };
   if (!!resolvedStylesArg && typeof resolvedStylesArg === 'object' && Array.isArray(resolvedStylesArg.variants)) {
     const {
       variants = [],
@@ -65,11 +70,7 @@ function processStyleArg(callableStyle, {
     variants.forEach(variant => {
       let isMatch = true;
       if (typeof variant.props === 'function') {
-        isMatch = variant.props({
-          ownerState,
-          ...props,
-          ...ownerState
-        });
+        isMatch = variant.props(mergedState);
       } else {
         Object.keys(variant.props).forEach(key => {
           if (ownerState?.[key] !== variant.props[key] && props[key] !== variant.props[key]) {
@@ -81,11 +82,7 @@ function processStyleArg(callableStyle, {
         if (!Array.isArray(result)) {
           result = [result];
         }
-        result.push(typeof variant.style === 'function' ? variant.style({
-          ownerState,
-          ...props,
-          ...ownerState
-        }) : variant.style);
+        result.push(typeof variant.style === 'function' ? variant.style(mergedState) : variant.style);
       }
     });
     return result;

package/modern/createTheme/applyStyles.js

@@ -2,7 +2,7 @@
  * A universal utility to style components with multiple color modes. Always use it from the theme object.
  * It works with:
  *  - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
- *  - [CSS theme variables](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/)
+ *  - [CSS theme variables](https://mui.com/material-ui/customization/css-theme-variables/overview/)
  *  - Zero-runtime engine
  *
  * Tips: Use an array over object spread and place `theme.applyStyles()` last.

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v6.0.0-alpha.8
+ * @mui/system v6.0.0-alpha.9
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/Unstable_Grid/createGrid.js

@@ -128,9 +128,9 @@ function createGrid(options = {}) {
       ...other,
       children: React.Children.map(children, child => {
         if ( /*#__PURE__*/React.isValidElement(child) && (0, _isMuiElement.default)(child, ['Grid'])) {
-          var _child$props$unstable;
+          var _unstable_level;
           return /*#__PURE__*/React.cloneElement(child, {
-            unstable_level: (_child$props$unstable = child.props.unstable_level) != null ? _child$props$unstable : level + 1
+            unstable_level: (_unstable_level = child.props.unstable_level) != null ? _unstable_level : level + 1
           });
         }
         return child;

package/node/createStyled/createStyled.js

@@ -68,6 +68,11 @@ function processStyleArg(callableStyle, {
       ...props
     }));
   }
+  const mergedState = {
+    ...props,
+    ...ownerState,
+    ownerState
+  };
   if (!!resolvedStylesArg && typeof resolvedStylesArg === 'object' && Array.isArray(resolvedStylesArg.variants)) {
     const {
       variants = [],
@@ -77,11 +82,7 @@ function processStyleArg(callableStyle, {
     variants.forEach(variant => {
       let isMatch = true;
       if (typeof variant.props === 'function') {
-        isMatch = variant.props({
-          ownerState,
-          ...props,
-          ...ownerState
-        });
+        isMatch = variant.props(mergedState);
       } else {
         Object.keys(variant.props).forEach(key => {
           if ((ownerState == null ? void 0 : ownerState[key]) !== variant.props[key] && props[key] !== variant.props[key]) {
@@ -93,11 +94,7 @@ function processStyleArg(callableStyle, {
         if (!Array.isArray(result)) {
           result = [result];
         }
-        result.push(typeof variant.style === 'function' ? variant.style({
-          ownerState,
-          ...props,
-          ...ownerState
-        }) : variant.style);
+        result.push(typeof variant.style === 'function' ? variant.style(mergedState) : variant.style);
       }
     });
     return result;

package/node/createTheme/applyStyles.js

@@ -8,7 +8,7 @@ exports.default = applyStyles;
  * A universal utility to style components with multiple color modes. Always use it from the theme object.
  * It works with:
  *  - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
- *  - [CSS theme variables](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/)
+ *  - [CSS theme variables](https://mui.com/material-ui/customization/css-theme-variables/overview/)
  *  - Zero-runtime engine
  *
  * Tips: Use an array over object spread and place `theme.applyStyles()` last.

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v6.0.0-alpha.8
+ * @mui/system v6.0.0-alpha.9
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "6.0.0-alpha.8",
+  "version": "6.0.0-alpha.9",
   "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.",
@@ -26,14 +26,14 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.5",
+    "@babel/runtime": "^7.24.6",
     "clsx": "^2.1.1",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
-    "@mui/private-theming": "^6.0.0-alpha.8",
-    "@mui/styled-engine": "^6.0.0-alpha.8",
-    "@mui/utils": "^6.0.0-alpha.8",
-    "@mui/types": "^7.2.14"
+    "@mui/private-theming": "^6.0.0-alpha.9",
+    "@mui/styled-engine": "^6.0.0-alpha.9",
+    "@mui/types": "^7.2.14",
+    "@mui/utils": "^6.0.0-alpha.9"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",