@mui/material 5.16.0 → 5.16.1

package/AppBar/AppBar.js

@@ -98,8 +98,9 @@ const AppBarRoot = styled(Paper, {
   }, ownerState.color && !ownerState.color.match(/^(default|inherit|transparent)$/) && {
     '--AppBar-background': ownerState.enableColorOnDark ? theme.vars.palette[ownerState.color].main : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette[ownerState.color].main),
     '--AppBar-color': ownerState.enableColorOnDark ? theme.vars.palette[ownerState.color].contrastText : joinVars(theme.vars.palette.AppBar.darkColor, theme.vars.palette[ownerState.color].contrastText)
+  }, !['inherit', 'transparent'].includes(ownerState.color) && {
+    backgroundColor: 'var(--AppBar-background)'
   }, {
-    backgroundColor: 'var(--AppBar-background)',
     color: ownerState.color === 'inherit' ? 'inherit' : 'var(--AppBar-color)'
   }, ownerState.color === 'transparent' && {
     backgroundImage: 'none',

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # [Versions](https://mui.com/versions/)
 
+## v5.16.1
+
+_Jul 11, 2024_
+
+A big thanks to the 4 contributors who made this release possible. Here are some highlights ✨:
+
+- ⚛️ All packages, including Material UI, are now compatible with React 18.3.1
+
+### `@mui/material@5.16.1`
+
+- [AppBar] Fix inherit color is inconsistent between ThemeProvider and CssVarsProvider (#42713) @ZeeshanTamboli
+
+### `@mui/joy@5.0.0-beta.48`
+
+- [Autocomplete] Fix React spread key warning (#42856) @aarongarciah
+
+### Docs
+
+- [material-ui] Fix React 18.3 key spread warnings in Autocomplete demos (#42854) @aarongarciah
+- [material-ui] Fix type error in virtualized table demo (#42852) @aarongarciah
+- Fix typos (@omahs) (#42888) @omahs
+- Fix 301 @oliviertassinari
+
+### Core
+
+- [core] Bump React to 18.3.1 (#42846) @aarongarciah
+- [core] Remove react-test-renderer (#42853) @aarongarciah
+- [core] Replace enzyme in describeConformance (#42847) @aarongarciah
+- [test] Remove enzyme (#42850) @aarongarciah
+- [test] Remove createMount test util (#42849) @aarongarciah
+- [base-ui] Fix React spread key warning in test (#42855) @aarongarciah
+- [styles][withStyles] Expect React defaultProps warning in test (#42752) (#42851) @aarongarciah
+
+All contributors of this release in alphabetical order: @aarongarciah, @oliviertassinari, @omahs, @ZeeshanTamboli
+
 ## v5.16.0
 
 <!-- generated comparing v5.15.21..master -->

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.16.0
+ * @mui/material v5.16.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/AppBar/AppBar.js

@@ -94,8 +94,9 @@ var AppBarRoot = styled(Paper, {
   }, ownerState.color && !ownerState.color.match(/^(default|inherit|transparent)$/) && {
     '--AppBar-background': ownerState.enableColorOnDark ? theme.vars.palette[ownerState.color].main : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette[ownerState.color].main),
     '--AppBar-color': ownerState.enableColorOnDark ? theme.vars.palette[ownerState.color].contrastText : joinVars(theme.vars.palette.AppBar.darkColor, theme.vars.palette[ownerState.color].contrastText)
+  }, !['inherit', 'transparent'].includes(ownerState.color) && {
+    backgroundColor: 'var(--AppBar-background)'
   }, {
-    backgroundColor: 'var(--AppBar-background)',
     color: ownerState.color === 'inherit' ? 'inherit' : 'var(--AppBar-color)'
   }, ownerState.color === 'transparent' && {
     backgroundImage: 'none',

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.16.0
+ * @mui/material v5.16.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/AppBar/AppBar.js

@@ -98,8 +98,9 @@ const AppBarRoot = styled(Paper, {
   }, ownerState.color && !ownerState.color.match(/^(default|inherit|transparent)$/) && {
     '--AppBar-background': ownerState.enableColorOnDark ? theme.vars.palette[ownerState.color].main : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette[ownerState.color].main),
     '--AppBar-color': ownerState.enableColorOnDark ? theme.vars.palette[ownerState.color].contrastText : joinVars(theme.vars.palette.AppBar.darkColor, theme.vars.palette[ownerState.color].contrastText)
+  }, !['inherit', 'transparent'].includes(ownerState.color) && {
+    backgroundColor: 'var(--AppBar-background)'
   }, {
-    backgroundColor: 'var(--AppBar-background)',
     color: ownerState.color === 'inherit' ? 'inherit' : 'var(--AppBar-color)'
   }, ownerState.color === 'transparent' && {
     backgroundImage: 'none',

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.16.0
+ * @mui/material v5.16.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/AppBar/AppBar.js

@@ -106,8 +106,9 @@ const AppBarRoot = (0, _styled.default)(_Paper.default, {
   }, ownerState.color && !ownerState.color.match(/^(default|inherit|transparent)$/) && {
     '--AppBar-background': ownerState.enableColorOnDark ? theme.vars.palette[ownerState.color].main : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette[ownerState.color].main),
     '--AppBar-color': ownerState.enableColorOnDark ? theme.vars.palette[ownerState.color].contrastText : joinVars(theme.vars.palette.AppBar.darkColor, theme.vars.palette[ownerState.color].contrastText)
+  }, !['inherit', 'transparent'].includes(ownerState.color) && {
+    backgroundColor: 'var(--AppBar-background)'
   }, {
-    backgroundColor: 'var(--AppBar-background)',
     color: ownerState.color === 'inherit' ? 'inherit' : 'var(--AppBar-color)'
   }, ownerState.color === 'transparent' && {
     backgroundImage: 'none',

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.16.0
+ * @mui/material v5.16.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.16.0",
+  "version": "5.16.1",
   "private": false,
   "author": "MUI Team",
   "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.",
@@ -32,13 +32,13 @@
     "clsx": "^2.1.0",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
-    "react-is": "^18.2.0",
+    "react-is": "^18.3.1",
     "react-transition-group": "^4.4.5",
     "@mui/base": "5.0.0-beta.40",
-    "@mui/core-downloads-tracker": "^5.16.0",
-    "@mui/system": "^5.16.0",
-    "@mui/utils": "^5.16.0",
-    "@mui/types": "^7.2.14"
+    "@mui/core-downloads-tracker": "^5.16.1",
+    "@mui/types": "^7.2.15",
+    "@mui/system": "^5.16.1",
+    "@mui/utils": "^5.16.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.16.0
+ * @mui/material v5.16.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -4846,6 +4846,7 @@
     }
   }
 
+  var didWarnAboutKeySpread = {};
   function jsxWithValidation(type, props, key, isStaticChildren, source, self) {
     {
       var validType = isValidElementType(type); // We warn in this case but don't throw. We expect the element creation to
@@ -4916,6 +4917,24 @@
         }
       }
 
+      {
+        if (hasOwnProperty.call(props, 'key')) {
+          var componentName = getComponentNameFromType(type);
+          var keys = Object.keys(props).filter(function (k) {
+            return k !== 'key';
+          });
+          var beforeExample = keys.length > 0 ? '{key: someKey, ' + keys.join(': ..., ') + ': ...}' : '{key: someKey}';
+
+          if (!didWarnAboutKeySpread[componentName + beforeExample]) {
+            var afterExample = keys.length > 0 ? '{' + keys.join(': ..., ') + ': ...}' : '{}';
+
+            error('A props object containing a "key" prop is being spread into JSX:\n' + '  let props = %s;\n' + '  <%s {...props} />\n' + 'React keys must be passed directly to JSX without using spread:\n' + '  let props = %s;\n' + '  <%s key={someKey} {...props} />', beforeExample, componentName, afterExample, componentName);
+
+            didWarnAboutKeySpread[componentName + beforeExample] = true;
+          }
+        }
+      }
+
       if (type === REACT_FRAGMENT_TYPE) {
         validateFragmentProps(element);
       } else {
@@ -16009,8 +16028,9 @@
     }, ownerState.color && !ownerState.color.match(/^(default|inherit|transparent)$/) && {
       '--AppBar-background': ownerState.enableColorOnDark ? theme.vars.palette[ownerState.color].main : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette[ownerState.color].main),
       '--AppBar-color': ownerState.enableColorOnDark ? theme.vars.palette[ownerState.color].contrastText : joinVars(theme.vars.palette.AppBar.darkColor, theme.vars.palette[ownerState.color].contrastText)
+    }, !['inherit', 'transparent'].includes(ownerState.color) && {
+      backgroundColor: 'var(--AppBar-background)'
     }, {
-      backgroundColor: 'var(--AppBar-background)',
       color: ownerState.color === 'inherit' ? 'inherit' : 'var(--AppBar-color)'
     }, ownerState.color === 'transparent' && {
       backgroundImage: 'none',