@mui/material 6.0.1 → 6.0.2

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.0.2
+
+<!-- generated comparing v6.0.1..master -->
+
+_Sep 3, 2024_
+
+A big thanks to the 11 contributors who made this release possible.
+
+### `@mui/material@6.0.2`
+
+- &#8203;<!-- 07 -->Fix `createTheme` with just color schemes (#43518) @siriwatknp
+- &#8203;<!-- 06 -->[Menu,Popover] Fix Backdrop props descriptions (#43503) @Michael-Hutchinson
+- &#8203;<!-- 05 -->[MenuList] Do not react to an event with modifier key pressed (#43505) @MateuszGroth
+
+### `@mui/system@6.0.2`
+
+- &#8203;<!-- 08 -->[InitColorSchemeScript] Use `let/const` instead of `var` (#43468) @ishon19
+- &#8203;<!-- 04 -->Fix composeClasses v6 behavior change (#43537) @oliviertassinari
+
+### `@mui/codemod@6.0.2`
+
+- &#8203;<!-- 19 -->Skip `ListItemButton` import for unrelated files (#43532) @siriwatknp
+
+### Docs
+
+- &#8203;<!-- 10 -->[figma] Clarity state or Figma Plugin component export (#43543) @oliviertassinari
+- &#8203;<!-- 09 -->[material-ui] Fix template shadow tokens (#43514) @zanivan
+- &#8203;<!-- 15 -->Update version support range (#43565) @oliviertassinari
+- &#8203;<!-- 14 -->Polish Material UI Sync plugin code format @oliviertassinari
+
+### Core
+
+- &#8203;<!-- 24 -->[blog] Update Material UI v6 blog post link to reflect correct section title (#43535) @Michael-Hutchinson
+- &#8203;<!-- 23 -->[blog] Makes the v5 name change clearer @oliviertassinari
+- &#8203;<!-- 22 -->[blog] Fix typo in Material UI v6 blog post (#43502) @iamandrewluca
+- &#8203;<!-- 21 -->[code-infra] Add missing @babel/runtime dependency to @mui/material-pigment-css (#43473) @Janpot
+- &#8203;<!-- 20 -->[code-infra] Remove permissions in publish-canaries.yml (#43491) @oliviertassinari
+- &#8203;<!-- 18 -->[core] Fix CodeQL scan (#43547) @oliviertassinari
+- &#8203;<!-- 17 -->[core] Fix CHANGELOG `@mui/material@6.0.1` version (#43516) @DiegoAndai
+- &#8203;<!-- 14 -->[docs-infra] Reduce description max-length (#43562) @oliviertassinari
+- &#8203;<!-- 13 -->[docs-infra] Crash on invalid callout type (#43546) @oliviertassinari
+- &#8203;<!-- 12 -->[docs-infra] Fix GitHub source link redirection (#43534) @oliviertassinari
+- &#8203;<!-- 09 -->[infra] Fixed workflow file path (#43528) @michelengelen
+- &#8203;<!-- 03 -->[typescript] Fix missing `Theme` generic (#43523) @siriwatknp
+- &#8203;<!-- 02 -->[website] Match pricing label with page @oliviertassinari
+- &#8203;<!-- 01 -->[website] Update Premium price and remove any mention to cap (#43466) @joserodolfofreitas
+
+All contributors of this release in alphabetical order: @DiegoAndai, @iamandrewluca, @ishon19, @Janpot, @joserodolfofreitas, @MateuszGroth, @Michael-Hutchinson, @michelengelen, @oliviertassinari, @siriwatknp, @zanivan
+
 ## v6.0.1
 
 <!-- generated comparing v6.0.0..master -->
@@ -8,7 +57,7 @@ _Aug 29, 2024_
 
 A big thanks to the 12 contributors who made this release possible. It contains bug fixes and documentation improvements.
 
-### `@mui/material@6.0.0`
+### `@mui/material@6.0.1`
 
 - Attach default light color scheme when enabling CSS theme variables (#43493) @siriwatknp
 - [Skeleton] Apply the wave animation to the correct element (#43474) @mnajdova

package/MenuList/MenuList.js

@@ -121,6 +121,14 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
   const handleKeyDown = event => {
     const list = listRef.current;
     const key = event.key;
+    const isModifierKeyPressed = event.ctrlKey || event.metaKey || event.altKey;
+    if (isModifierKeyPressed) {
+      if (onKeyDown) {
+        onKeyDown(event);
+      }
+      return;
+    }
+
     /**
      * @type {Element} - will always be defined since we are in a keydown handler
      * attached to an element. A keydown event is either dispatched to the activeElement

package/Popover/Popover.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { InternalStandardProps as StandardProps } from '..';
+import { BackdropProps, InternalStandardProps as StandardProps } from '..';
 import Paper, { PaperProps } from '../Paper';
 import Modal, { ModalOwnerState, ModalProps } from '../Modal';
 import { Theme } from '../styles';
@@ -39,7 +39,10 @@ interface PopoverVirtualElement {
 }
 
 export interface PopoverProps
-  extends StandardProps<Omit<ModalProps, 'slots' | 'slotProps'>, 'children'>,
+  extends StandardProps<
+      Omit<ModalProps, 'slots' | 'slotProps' | 'BackdropProps' | 'BackdropComponent'>,
+      'children'
+    >,
     PopoverSlotsAndSlotProps {
   /**
    * A ref for imperative actions.
@@ -82,6 +85,26 @@ export interface PopoverProps
    * @default 'anchorEl'
    */
   anchorReference?: PopoverReference;
+  /**
+   * A backdrop component. This prop enables custom backdrop rendering.
+   * @deprecated Use `slotProps.root.slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.
+   * Use the `slotProps.root.slots.backdrop` prop to make your application ready for the next version of Material UI.
+   * @default styled(Backdrop, {
+   *   name: 'MuiModal',
+   *   slot: 'Backdrop',
+   *   overridesResolver: (props, styles) => {
+   *     return styles.backdrop;
+   *   },
+   * })({
+   *   zIndex: -1,
+   * })
+   */
+  BackdropComponent?: React.ElementType<BackdropProps>;
+  /**
+   * Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.
+   * @deprecated Use `slotProps.root.slotProps.backdrop` instead.
+   */
+  BackdropProps?: Partial<BackdropProps>;
   /**
    * The content of the component.
    */

package/Popover/Popover.js

@@ -419,6 +419,26 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
    * @default 'anchorEl'
    */
   anchorReference: PropTypes.oneOf(['anchorEl', 'anchorPosition', 'none']),
+  /**
+   * A backdrop component. This prop enables custom backdrop rendering.
+   * @deprecated Use `slotProps.root.slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.
+   * Use the `slotProps.root.slots.backdrop` prop to make your application ready for the next version of Material UI.
+   * @default styled(Backdrop, {
+   *   name: 'MuiModal',
+   *   slot: 'Backdrop',
+   *   overridesResolver: (props, styles) => {
+   *     return styles.backdrop;
+   *   },
+   * })({
+   *   zIndex: -1,
+   * })
+   */
+  BackdropComponent: PropTypes.elementType,
+  /**
+   * Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.
+   * @deprecated Use `slotProps.root.slotProps.backdrop` instead.
+   */
+  BackdropProps: PropTypes.object,
   /**
    * The content of the component.
    */

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.0.1
+ * @mui/material v6.0.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/MenuList/MenuList.js

@@ -121,6 +121,14 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
   const handleKeyDown = event => {
     const list = listRef.current;
     const key = event.key;
+    const isModifierKeyPressed = event.ctrlKey || event.metaKey || event.altKey;
+    if (isModifierKeyPressed) {
+      if (onKeyDown) {
+        onKeyDown(event);
+      }
+      return;
+    }
+
     /**
      * @type {Element} - will always be defined since we are in a keydown handler
      * attached to an element. A keydown event is either dispatched to the activeElement

package/modern/Popover/Popover.js

@@ -419,6 +419,26 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
    * @default 'anchorEl'
    */
   anchorReference: PropTypes.oneOf(['anchorEl', 'anchorPosition', 'none']),
+  /**
+   * A backdrop component. This prop enables custom backdrop rendering.
+   * @deprecated Use `slotProps.root.slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.
+   * Use the `slotProps.root.slots.backdrop` prop to make your application ready for the next version of Material UI.
+   * @default styled(Backdrop, {
+   *   name: 'MuiModal',
+   *   slot: 'Backdrop',
+   *   overridesResolver: (props, styles) => {
+   *     return styles.backdrop;
+   *   },
+   * })({
+   *   zIndex: -1,
+   * })
+   */
+  BackdropComponent: PropTypes.elementType,
+  /**
+   * Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.
+   * @deprecated Use `slotProps.root.slotProps.backdrop` instead.
+   */
+  BackdropProps: PropTypes.object,
   /**
    * The content of the component.
    */

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.0.1
+ * @mui/material v6.0.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/styles/createTheme.js

@@ -11,7 +11,7 @@ function attachColorScheme(theme, scheme, colorScheme) {
     theme.colorSchemes[scheme] = {
       ...(colorScheme !== true && colorScheme),
       palette: createPalette({
-        ...(colorScheme === true ? {} : colorScheme),
+        ...(colorScheme === true ? {} : colorScheme.palette),
         mode: scheme
       }) // cast type to skip module augmentation test
     };
@@ -48,20 +48,39 @@ export default function createTheme(options = {},
     } : undefined)
   };
   if (cssVariables === false) {
-    const theme = createThemeNoVars(options, ...args);
     if (!('colorSchemes' in options)) {
-      return theme;
+      // Behaves exactly as v5
+      return createThemeNoVars(options, ...args);
     }
+    let paletteOptions = palette;
+    if (!('palette' in options)) {
+      if (colorSchemesInput[defaultColorSchemeInput]) {
+        if (colorSchemesInput[defaultColorSchemeInput] !== true) {
+          paletteOptions = colorSchemesInput[defaultColorSchemeInput].palette;
+        } else if (defaultColorSchemeInput === 'dark') {
+          // @ts-ignore to prevent the module augmentation test from failing
+          paletteOptions = {
+            mode: 'dark'
+          };
+        }
+      }
+    }
+    const theme = createThemeNoVars({
+      ...options,
+      palette: paletteOptions
+    }, ...args);
     theme.defaultColorScheme = defaultColorSchemeInput;
     theme.colorSchemes = colorSchemesInput;
     if (theme.palette.mode === 'light') {
       theme.colorSchemes.light = {
+        ...(colorSchemesInput.light !== true && colorSchemesInput.light),
         palette: theme.palette
       };
       attachColorScheme(theme, 'dark', colorSchemesInput.dark);
     }
     if (theme.palette.mode === 'dark') {
       theme.colorSchemes.dark = {
+        ...(colorSchemesInput.dark !== true && colorSchemesInput.dark),
         palette: theme.palette
       };
       attachColorScheme(theme, 'light', colorSchemesInput.light);

package/modern/version/index.js

@@ -1,7 +1,7 @@
-export const version = "6.0.1";
+export const version = "6.0.2";
 export const major = Number("6");
 export const minor = Number("0");
-export const patch = Number("1");
+export const patch = Number("2");
 export const preReleaseLabel = undefined || null;
 export const preReleaseNumber = Number(undefined) || null;
 export default version;

package/node/MenuList/MenuList.js

@@ -128,6 +128,14 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
   const handleKeyDown = event => {
     const list = listRef.current;
     const key = event.key;
+    const isModifierKeyPressed = event.ctrlKey || event.metaKey || event.altKey;
+    if (isModifierKeyPressed) {
+      if (onKeyDown) {
+        onKeyDown(event);
+      }
+      return;
+    }
+
     /**
      * @type {Element} - will always be defined since we are in a keydown handler
      * attached to an element. A keydown event is either dispatched to the activeElement

package/node/Popover/Popover.js

@@ -428,6 +428,26 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
    * @default 'anchorEl'
    */
   anchorReference: _propTypes.default.oneOf(['anchorEl', 'anchorPosition', 'none']),
+  /**
+   * A backdrop component. This prop enables custom backdrop rendering.
+   * @deprecated Use `slotProps.root.slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.
+   * Use the `slotProps.root.slots.backdrop` prop to make your application ready for the next version of Material UI.
+   * @default styled(Backdrop, {
+   *   name: 'MuiModal',
+   *   slot: 'Backdrop',
+   *   overridesResolver: (props, styles) => {
+   *     return styles.backdrop;
+   *   },
+   * })({
+   *   zIndex: -1,
+   * })
+   */
+  BackdropComponent: _propTypes.default.elementType,
+  /**
+   * Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.
+   * @deprecated Use `slotProps.root.slotProps.backdrop` instead.
+   */
+  BackdropProps: _propTypes.default.object,
   /**
    * The content of the component.
    */

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.0.1
+ * @mui/material v6.0.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/styles/createTheme.js

@@ -24,7 +24,7 @@ function attachColorScheme(theme, scheme, colorScheme) {
     theme.colorSchemes[scheme] = {
       ...(colorScheme !== true && colorScheme),
       palette: (0, _createPalette.default)({
-        ...(colorScheme === true ? {} : colorScheme),
+        ...(colorScheme === true ? {} : colorScheme.palette),
         mode: scheme
       }) // cast type to skip module augmentation test
     };
@@ -61,20 +61,39 @@ function createTheme(options = {},
     } : undefined)
   };
   if (cssVariables === false) {
-    const theme = (0, _createThemeNoVars.default)(options, ...args);
     if (!('colorSchemes' in options)) {
-      return theme;
+      // Behaves exactly as v5
+      return (0, _createThemeNoVars.default)(options, ...args);
     }
+    let paletteOptions = palette;
+    if (!('palette' in options)) {
+      if (colorSchemesInput[defaultColorSchemeInput]) {
+        if (colorSchemesInput[defaultColorSchemeInput] !== true) {
+          paletteOptions = colorSchemesInput[defaultColorSchemeInput].palette;
+        } else if (defaultColorSchemeInput === 'dark') {
+          // @ts-ignore to prevent the module augmentation test from failing
+          paletteOptions = {
+            mode: 'dark'
+          };
+        }
+      }
+    }
+    const theme = (0, _createThemeNoVars.default)({
+      ...options,
+      palette: paletteOptions
+    }, ...args);
     theme.defaultColorScheme = defaultColorSchemeInput;
     theme.colorSchemes = colorSchemesInput;
     if (theme.palette.mode === 'light') {
       theme.colorSchemes.light = {
+        ...(colorSchemesInput.light !== true && colorSchemesInput.light),
         palette: theme.palette
       };
       attachColorScheme(theme, 'dark', colorSchemesInput.dark);
     }
     if (theme.palette.mode === 'dark') {
       theme.colorSchemes.dark = {
+        ...(colorSchemesInput.dark !== true && colorSchemesInput.dark),
         palette: theme.palette
       };
       attachColorScheme(theme, 'light', colorSchemesInput.light);

package/node/version/index.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.version = exports.preReleaseNumber = exports.preReleaseLabel = exports.patch = exports.minor = exports.major = exports.default = void 0;
-const version = exports.version = "6.0.1";
+const version = exports.version = "6.0.2";
 const major = exports.major = Number("6");
 const minor = exports.minor = Number("0");
-const patch = exports.patch = Number("1");
+const patch = exports.patch = Number("2");
 const preReleaseLabel = exports.preReleaseLabel = undefined || null;
 const preReleaseNumber = exports.preReleaseNumber = Number(undefined) || null;
 var _default = exports.default = version;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "6.0.1",
+  "version": "6.0.2",
   "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.",
@@ -35,10 +35,10 @@
     "prop-types": "^15.8.1",
     "react-is": "^18.3.1",
     "react-transition-group": "^4.4.5",
-    "@mui/core-downloads-tracker": "^6.0.1",
-    "@mui/system": "^6.0.1",
+    "@mui/core-downloads-tracker": "^6.0.2",
     "@mui/types": "^7.2.16",
-    "@mui/utils": "^6.0.1"
+    "@mui/utils": "^6.0.2",
+    "@mui/system": "^6.0.2"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
@@ -46,7 +46,7 @@
     "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@mui/material-pigment-css": "^6.0.1"
+    "@mui/material-pigment-css": "^6.0.2"
   },
   "peerDependenciesMeta": {
     "@types/react": {

package/styles/createTheme.js

@@ -11,7 +11,7 @@ function attachColorScheme(theme, scheme, colorScheme) {
     theme.colorSchemes[scheme] = {
       ...(colorScheme !== true && colorScheme),
       palette: createPalette({
-        ...(colorScheme === true ? {} : colorScheme),
+        ...(colorScheme === true ? {} : colorScheme.palette),
         mode: scheme
       }) // cast type to skip module augmentation test
     };
@@ -48,20 +48,39 @@ export default function createTheme(options = {},
     } : undefined)
   };
   if (cssVariables === false) {
-    const theme = createThemeNoVars(options, ...args);
     if (!('colorSchemes' in options)) {
-      return theme;
+      // Behaves exactly as v5
+      return createThemeNoVars(options, ...args);
     }
+    let paletteOptions = palette;
+    if (!('palette' in options)) {
+      if (colorSchemesInput[defaultColorSchemeInput]) {
+        if (colorSchemesInput[defaultColorSchemeInput] !== true) {
+          paletteOptions = colorSchemesInput[defaultColorSchemeInput].palette;
+        } else if (defaultColorSchemeInput === 'dark') {
+          // @ts-ignore to prevent the module augmentation test from failing
+          paletteOptions = {
+            mode: 'dark'
+          };
+        }
+      }
+    }
+    const theme = createThemeNoVars({
+      ...options,
+      palette: paletteOptions
+    }, ...args);
     theme.defaultColorScheme = defaultColorSchemeInput;
     theme.colorSchemes = colorSchemesInput;
     if (theme.palette.mode === 'light') {
       theme.colorSchemes.light = {
+        ...(colorSchemesInput.light !== true && colorSchemesInput.light),
         palette: theme.palette
       };
       attachColorScheme(theme, 'dark', colorSchemesInput.dark);
     }
     if (theme.palette.mode === 'dark') {
       theme.colorSchemes.dark = {
+        ...(colorSchemesInput.dark !== true && colorSchemesInput.dark),
         palette: theme.palette
       };
       attachColorScheme(theme, 'light', colorSchemesInput.light);

package/utils/types.d.ts

@@ -1,9 +1,10 @@
 import { SxProps } from '@mui/system';
 import { SlotComponentProps } from '@mui/utils';
+import { Theme } from '../styles';
 export type { EventHandlers, WithOptionalOwnerState, SlotComponentProps, SlotComponentPropsWithSlotState, } from '@mui/utils';
 export type SlotCommonProps = {
     component?: React.ElementType;
-    sx?: SxProps;
+    sx?: SxProps<Theme>;
 };
 export type SlotProps<TSlotComponent extends React.ElementType, TOverrides, TOwnerState> = SlotComponentProps<TSlotComponent, SlotCommonProps & TOverrides, TOwnerState>;
 /**

package/version/index.js

@@ -1,7 +1,7 @@
-export const version = "6.0.1";
+export const version = "6.0.2";
 export const major = Number("6");
 export const minor = Number("0");
-export const patch = Number("1");
+export const patch = Number("2");
 export const preReleaseLabel = undefined || null;
 export const preReleaseNumber = Number(undefined) || null;
 export default version;