@mui/material 6.1.4 → 6.1.5

package/Autocomplete/Autocomplete.js

@@ -533,7 +533,6 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   const classes = useUtilityClasses(ownerState);
   const externalForwardedProps = {
     slots: {
-      listbox: ListboxComponentProp,
       paper: PaperComponentProp,
       popper: PopperComponentProp,
       ...slots
@@ -546,7 +545,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     }
   };
   const [ListboxSlot, listboxProps] = useSlot('listbox', {
-    elementType: 'ul',
+    elementType: AutocompleteListbox,
     externalForwardedProps,
     ownerState,
     className: classes.listbox,
@@ -662,8 +661,12 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   });
   let autocompletePopper = null;
   if (groupedOptions.length > 0) {
-    autocompletePopper = renderAutocompletePopperChildren(/*#__PURE__*/_jsx(AutocompleteListbox, {
-      as: ListboxSlot,
+    autocompletePopper = renderAutocompletePopperChildren(
+    /*#__PURE__*/
+    // TODO v7: remove `as` prop and move ListboxComponentProp to externalForwardedProps or remove ListboxComponentProp entirely
+    // https://github.com/mui/material-ui/pull/43994#issuecomment-2401945800
+    _jsx(ListboxSlot, {
+      as: ListboxComponentProp,
       ...listboxProps,
       children: groupedOptions.map((option, index) => {
         if (groupBy) {
@@ -710,7 +713,11 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
           ref: setAnchorEl,
           className: classes.inputRoot,
           startAdornment,
-          onMouseDown: event => handleInputMouseDown(event),
+          onMouseDown: event => {
+            if (event.target === event.currentTarget) {
+              handleInputMouseDown(event);
+            }
+          },
           ...((hasClearIcon || hasPopupIcon) && {
             endAdornment: /*#__PURE__*/_jsxs(AutocompleteEndAdornment, {
               className: classes.endAdornment,

package/CHANGELOG.md

@@ -1,5 +1,53 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.1.5
+
+<!-- generated comparing v6.1.4..master -->
+
+_Oct 22, 2024_
+
+A big thanks to the 9 contributors who made this release possible.
+
+### `@mui/material@6.1.5`
+
+- [Autocomplete] Fix bug with child chip button events propagating to parent (#43982) @snapwich
+- [Autocomplete] Fix Autocomplete crashing if ownerState is used in styleOverrides (#43994) @sai6855
+- [Checkbox] Fix disableRipple regression (#44099) @siriwatknp
+- [Dialog] Add the aria-modal="true" by default (#44118) @mnajdova
+- [IconButton] Fix disableRipple behavior when disableRipple is set in MuiButtonBase theme (#43714) @sai6855
+- [pigment-css] Support project without enabling CSS variables (#44171) @siriwatknp
+- Make the palette always return new light and dark object (#44059) @siriwatknp
+
+### `@mui/system@6.1.5`
+
+- Add `defaultMode` to `InitColorSchemeScript` (#44139) @siriwatknp
+
+### `@mui/codemod@6.1.5`
+
+- [Grid2] Add removal `zeroMinWidth` prop to codemod (#44178) @sai6855
+
+### Docs
+
+- [material-ui][FormControlLabel] Don't use unintuitive label position on chec… (#44119) @mnajdova
+- [material-ui][TextField] Dynamically modify the eye password button aria-label (#44122) @ChinoUkaegbu
+- [icons] Run pnpm docs:mdicons:synonyms (#44098) @oliviertassinari
+- [joy-ui] Update Overview copy to match Readme (#44136) @samuelsycamore
+- Add CodeSandbox/Stackblitz to the rest of the templates (#43708) @siriwatknp
+- Update Figma link to fix 301 (a7b7d9c) @oliviertassinari
+- Link Toolpad from Core repo (#44111) @prakhargupta1
+- Remove HighlightedCode max-width (#43731) @Janpot
+
+### Core
+
+- [code-infra] Widen eslint file patterns (#44148) @Janpot
+- [code-infra] Fix icon builder tests (#44143) @Janpot
+- [code-infra] Fix dependabot vulnerabilities (#44124) @Janpot
+- [core] Reference commits in changelog when no PR (#44115) @oliviertassinari
+- [examples] Fix Pigment CSS Vite example (#44074) @oliviertassinari
+- Fix fast-xml-parser vulnerability (#44121) @Janpot
+
+All contributors of this release in alphabetical order: @ChinoUkaegbu, @Janpot, @mnajdova, @oliviertassinari, @prakhargupta1, @sai6855, @samuelsycamore, @siriwatknp, @snapwich
+
 ## v6.1.4
 
 <!-- generated comparing v6.1.3..master -->

package/Dialog/Dialog.d.ts

@@ -15,6 +15,12 @@ export interface DialogProps extends StandardProps<ModalProps, 'children'> {
    * The id(s) of the element(s) that label the dialog.
    */
   'aria-labelledby'?: string;
+  /**
+   * Informs assistive technologies that the element is modal.
+   * It's added on the element with role="dialog".
+   * @default true
+   */
+  'aria-modal'?: boolean | 'true' | 'false';
   /**
    * Dialog children, usually the included sub-components.
    */

package/Dialog/Dialog.js

@@ -202,6 +202,7 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
   const {
     'aria-describedby': ariaDescribedby,
     'aria-labelledby': ariaLabelledbyProp,
+    'aria-modal': ariaModal = true,
     BackdropComponent,
     BackdropProps,
     children,
@@ -296,6 +297,7 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
           role: "dialog",
           "aria-describedby": ariaDescribedby,
           "aria-labelledby": ariaLabelledby,
+          "aria-modal": ariaModal,
           ...PaperProps,
           className: clsx(classes.paper, PaperProps.className),
           ownerState: ownerState,
@@ -321,6 +323,12 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes /* remove-proptypes */
    * The id(s) of the element(s) that label the dialog.
    */
   'aria-labelledby': PropTypes.string,
+  /**
+   * Informs assistive technologies that the element is modal.
+   * It's added on the element with role="dialog".
+   * @default true
+   */
+  'aria-modal': PropTypes.oneOfType([PropTypes.oneOf(['false', 'true']), PropTypes.bool]),
   /**
    * A backdrop component. This prop enables custom backdrop rendering.
    * @deprecated Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.

package/index.js

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

package/modern/Autocomplete/Autocomplete.js

@@ -533,7 +533,6 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   const classes = useUtilityClasses(ownerState);
   const externalForwardedProps = {
     slots: {
-      listbox: ListboxComponentProp,
       paper: PaperComponentProp,
       popper: PopperComponentProp,
       ...slots
@@ -546,7 +545,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     }
   };
   const [ListboxSlot, listboxProps] = useSlot('listbox', {
-    elementType: 'ul',
+    elementType: AutocompleteListbox,
     externalForwardedProps,
     ownerState,
     className: classes.listbox,
@@ -662,8 +661,12 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   });
   let autocompletePopper = null;
   if (groupedOptions.length > 0) {
-    autocompletePopper = renderAutocompletePopperChildren(/*#__PURE__*/_jsx(AutocompleteListbox, {
-      as: ListboxSlot,
+    autocompletePopper = renderAutocompletePopperChildren(
+    /*#__PURE__*/
+    // TODO v7: remove `as` prop and move ListboxComponentProp to externalForwardedProps or remove ListboxComponentProp entirely
+    // https://github.com/mui/material-ui/pull/43994#issuecomment-2401945800
+    _jsx(ListboxSlot, {
+      as: ListboxComponentProp,
       ...listboxProps,
       children: groupedOptions.map((option, index) => {
         if (groupBy) {
@@ -710,7 +713,11 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
           ref: setAnchorEl,
           className: classes.inputRoot,
           startAdornment,
-          onMouseDown: event => handleInputMouseDown(event),
+          onMouseDown: event => {
+            if (event.target === event.currentTarget) {
+              handleInputMouseDown(event);
+            }
+          },
           ...((hasClearIcon || hasPopupIcon) && {
             endAdornment: /*#__PURE__*/_jsxs(AutocompleteEndAdornment, {
               className: classes.endAdornment,

package/modern/Dialog/Dialog.js

@@ -202,6 +202,7 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
   const {
     'aria-describedby': ariaDescribedby,
     'aria-labelledby': ariaLabelledbyProp,
+    'aria-modal': ariaModal = true,
     BackdropComponent,
     BackdropProps,
     children,
@@ -296,6 +297,7 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
           role: "dialog",
           "aria-describedby": ariaDescribedby,
           "aria-labelledby": ariaLabelledby,
+          "aria-modal": ariaModal,
           ...PaperProps,
           className: clsx(classes.paper, PaperProps.className),
           ownerState: ownerState,
@@ -321,6 +323,12 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes /* remove-proptypes */
    * The id(s) of the element(s) that label the dialog.
    */
   'aria-labelledby': PropTypes.string,
+  /**
+   * Informs assistive technologies that the element is modal.
+   * It's added on the element with role="dialog".
+   * @default true
+   */
+  'aria-modal': PropTypes.oneOfType([PropTypes.oneOf(['false', 'true']), PropTypes.bool]),
   /**
    * A backdrop component. This prop enables custom backdrop rendering.
    * @deprecated Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.

package/modern/index.js

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

package/modern/styles/createThemeNoVars.js

@@ -9,6 +9,7 @@ import createTypography from "./createTypography.js";
 import shadows from "./shadows.js";
 import createTransitions from "./createTransitions.js";
 import zIndex from "./zIndex.js";
+import { stringifyTheme } from "./stringifyTheme.js";
 function createThemeNoVars(options = {}, ...args) {
   const {
     breakpoints: breakpointsInput,
@@ -78,6 +79,8 @@ function createThemeNoVars(options = {}, ...args) {
       theme: this
     });
   };
+  muiTheme.toRuntimeSource = stringifyTheme; // for Pigment CSS integration
+
   return muiTheme;
 }
 let warnedOnce = false;

package/modern/useAutocomplete/useAutocomplete.js

@@ -838,7 +838,6 @@ function useAutocomplete(props) {
   const handleInputMouseDown = event => {
     if (!disabledProp && (inputValue === '' || !open)) {
       handlePopupIndicator(event);
-      event.stopPropagation();
     }
   };
   let dirty = freeSolo && inputValue.length > 0;
@@ -915,8 +914,7 @@ function useAutocomplete(props) {
     getPopupIndicatorProps: () => ({
       tabIndex: -1,
       type: 'button',
-      onClick: handlePopupIndicator,
-      onMouseDown: event => event.stopPropagation()
+      onClick: handlePopupIndicator
     }),
     getTagProps: ({
       index

package/modern/version/index.js

@@ -1,6 +1,6 @@
-export const version = "6.1.4";
+export const version = "6.1.5";
 export const major = Number("6");
 export const minor = Number("1");
-export const patch = Number("4");
+export const patch = Number("5");
 export const prerelease = undefined;
 export default version;

package/node/Autocomplete/Autocomplete.js

@@ -545,7 +545,6 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   const classes = useUtilityClasses(ownerState);
   const externalForwardedProps = {
     slots: {
-      listbox: ListboxComponentProp,
       paper: PaperComponentProp,
       popper: PopperComponentProp,
       ...slots
@@ -558,7 +557,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     }
   };
   const [ListboxSlot, listboxProps] = (0, _useSlot.default)('listbox', {
-    elementType: 'ul',
+    elementType: AutocompleteListbox,
     externalForwardedProps,
     ownerState,
     className: classes.listbox,
@@ -674,8 +673,12 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   });
   let autocompletePopper = null;
   if (groupedOptions.length > 0) {
-    autocompletePopper = renderAutocompletePopperChildren(/*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteListbox, {
-      as: ListboxSlot,
+    autocompletePopper = renderAutocompletePopperChildren(
+    /*#__PURE__*/
+    // TODO v7: remove `as` prop and move ListboxComponentProp to externalForwardedProps or remove ListboxComponentProp entirely
+    // https://github.com/mui/material-ui/pull/43994#issuecomment-2401945800
+    (0, _jsxRuntime.jsx)(ListboxSlot, {
+      as: ListboxComponentProp,
       ...listboxProps,
       children: groupedOptions.map((option, index) => {
         if (groupBy) {
@@ -722,7 +725,11 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
           ref: setAnchorEl,
           className: classes.inputRoot,
           startAdornment,
-          onMouseDown: event => handleInputMouseDown(event),
+          onMouseDown: event => {
+            if (event.target === event.currentTarget) {
+              handleInputMouseDown(event);
+            }
+          },
           ...((hasClearIcon || hasPopupIcon) && {
             endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsxs)(AutocompleteEndAdornment, {
               className: classes.endAdornment,

package/node/Dialog/Dialog.js

@@ -209,6 +209,7 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
   const {
     'aria-describedby': ariaDescribedby,
     'aria-labelledby': ariaLabelledbyProp,
+    'aria-modal': ariaModal = true,
     BackdropComponent,
     BackdropProps,
     children,
@@ -303,6 +304,7 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
           role: "dialog",
           "aria-describedby": ariaDescribedby,
           "aria-labelledby": ariaLabelledby,
+          "aria-modal": ariaModal,
           ...PaperProps,
           className: (0, _clsx.default)(classes.paper, PaperProps.className),
           ownerState: ownerState,
@@ -328,6 +330,12 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes /* remove-proptypes */
    * The id(s) of the element(s) that label the dialog.
    */
   'aria-labelledby': _propTypes.default.string,
+  /**
+   * Informs assistive technologies that the element is modal.
+   * It's added on the element with role="dialog".
+   * @default true
+   */
+  'aria-modal': _propTypes.default.oneOfType([_propTypes.default.oneOf(['false', 'true']), _propTypes.default.bool]),
   /**
    * A backdrop component. This prop enables custom backdrop rendering.
    * @deprecated Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.

package/node/index.js

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

package/node/styles/createThemeNoVars.js

@@ -18,6 +18,7 @@ var _createTypography = _interopRequireDefault(require("./createTypography"));
 var _shadows = _interopRequireDefault(require("./shadows"));
 var _createTransitions = _interopRequireDefault(require("./createTransitions"));
 var _zIndex = _interopRequireDefault(require("./zIndex"));
+var _stringifyTheme = require("./stringifyTheme");
 function createThemeNoVars(options = {}, ...args) {
   const {
     breakpoints: breakpointsInput,
@@ -87,6 +88,8 @@ function createThemeNoVars(options = {}, ...args) {
       theme: this
     });
   };
+  muiTheme.toRuntimeSource = _stringifyTheme.stringifyTheme; // for Pigment CSS integration
+
   return muiTheme;
 }
 let warnedOnce = false;

package/node/useAutocomplete/useAutocomplete.js

@@ -844,7 +844,6 @@ function useAutocomplete(props) {
   const handleInputMouseDown = event => {
     if (!disabledProp && (inputValue === '' || !open)) {
       handlePopupIndicator(event);
-      event.stopPropagation();
     }
   };
   let dirty = freeSolo && inputValue.length > 0;
@@ -921,8 +920,7 @@ function useAutocomplete(props) {
     getPopupIndicatorProps: () => ({
       tabIndex: -1,
       type: 'button',
-      onClick: handlePopupIndicator,
-      onMouseDown: event => event.stopPropagation()
+      onClick: handlePopupIndicator
     }),
     getTagProps: ({
       index

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "6.1.4",
+  "version": "6.1.5",
   "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.1.4",
-    "@mui/system": "^6.1.4",
+    "@mui/core-downloads-tracker": "^6.1.5",
+    "@mui/system": "^6.1.5",
     "@mui/types": "^7.2.18",
-    "@mui/utils": "^6.1.4"
+    "@mui/utils": "^6.1.5"
   },
   "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.1.4"
+    "@mui/material-pigment-css": "^6.1.5"
   },
   "peerDependenciesMeta": {
     "@types/react": {

package/styles/createThemeNoVars.js

@@ -9,6 +9,7 @@ import createTypography from "./createTypography.js";
 import shadows from "./shadows.js";
 import createTransitions from "./createTransitions.js";
 import zIndex from "./zIndex.js";
+import { stringifyTheme } from "./stringifyTheme.js";
 function createThemeNoVars(options = {}, ...args) {
   const {
     breakpoints: breakpointsInput,
@@ -78,6 +79,8 @@ function createThemeNoVars(options = {}, ...args) {
       theme: this
     });
   };
+  muiTheme.toRuntimeSource = stringifyTheme; // for Pigment CSS integration
+
   return muiTheme;
 }
 let warnedOnce = false;

package/useAutocomplete/useAutocomplete.js

@@ -838,7 +838,6 @@ function useAutocomplete(props) {
   const handleInputMouseDown = event => {
     if (!disabledProp && (inputValue === '' || !open)) {
       handlePopupIndicator(event);
-      event.stopPropagation();
     }
   };
   let dirty = freeSolo && inputValue.length > 0;
@@ -915,8 +914,7 @@ function useAutocomplete(props) {
     getPopupIndicatorProps: () => ({
       tabIndex: -1,
       type: 'button',
-      onClick: handlePopupIndicator,
-      onMouseDown: event => event.stopPropagation()
+      onClick: handlePopupIndicator
     }),
     getTagProps: ({
       index

package/version/index.js

@@ -1,6 +1,6 @@
-export const version = "6.1.4";
+export const version = "6.1.5";
 export const major = Number("6");
 export const minor = Number("1");
-export const patch = Number("4");
+export const patch = Number("5");
 export const prerelease = undefined;
 export default version;