@mui/material 5.15.19 → 5.15.20

package/Autocomplete/Autocomplete.js

@@ -92,6 +92,15 @@ const AutocompleteRoot = styled('div', {
     }, styles.root, fullWidth && styles.fullWidth, hasPopupIcon && styles.hasPopupIcon, hasClearIcon && styles.hasClearIcon];
   }
 })({
+  [`&.${autocompleteClasses.focused} .${autocompleteClasses.clearIndicator}`]: {
+    visibility: 'visible'
+  },
+  /* Avoid double tap issue on iOS */
+  '@media (pointer: fine)': {
+    [`&:hover .${autocompleteClasses.clearIndicator}`]: {
+      visibility: 'visible'
+    }
+  },
   [`& .${autocompleteClasses.tag}`]: {
     margin: 3,
     maxWidth: 'calc(100% - 6px)'
@@ -108,23 +117,6 @@ const AutocompleteRoot = styled('div', {
       minWidth: 30
     }
   },
-  [`&.${autocompleteClasses.focused}`]: {
-    [`& .${autocompleteClasses.clearIndicator}`]: {
-      visibility: 'visible'
-    },
-    [`& .${autocompleteClasses.input}`]: {
-      minWidth: 0
-    }
-  },
-  /* Avoid double tap issue on iOS */
-  '@media (pointer: fine)': {
-    [`&:hover .${autocompleteClasses.clearIndicator}`]: {
-      visibility: 'visible'
-    },
-    [`&:hover .${autocompleteClasses.input}`]: {
-      minWidth: 0
-    }
-  },
   [`& .${inputClasses.root}`]: {
     paddingBottom: 1,
     '& .MuiInput-input': {

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # [Versions](https://mui.com/versions/)
 
+## v5.15.20
+
+<!-- generated comparing v5.15.19..master -->
+
+_Jun 12, 2024_
+
+A big thanks to the 9 contributors who made this release possible.
+
+### `@mui/material@5.15.20`
+
+- &#8203;<!-- 17 -->[Autocomplete] Shouldn't resize when hovering (@ZeeshanTamboli) (#42535) @ZeeshanTamboli
+- &#8203;<!-- 07 -->[Tab] Fix applying `iconWrapper` styles from theme and update its description (@sai6855) (#42570) @sai6855
+
+### `@mui/utils@5.15.15`
+
+- &#8203;<!-- 06 -->Allow passing `NaN` as `defaultValue` to `useControlled` (@iammminzzy) (#42571) @iammminzzy
+- &#8203;<!-- 17 -->Fix GitHub-reported prototype pollution vulnerability in `deepmerge` (#41652) (#42608) @DiegoAndai
+
+### Docs
+
+- &#8203;<!-- 16 -->[docs] Add Pigment CSS and Base UI logos SVGs (#42513) @danilo-leal
+- &#8203;<!-- 15 -->[docs] Update twitter.com to x.com @oliviertassinari
+- &#8203;<!-- 14 -->[docs] Simplify Example projects page @oliviertassinari
+- &#8203;<!-- 13 -->[material-ui] Add docs for complementary stepper components (@anle9650) (#42613) @anle9650
+- &#8203;<!-- 12 -->[docs] Add changelog section to the design kits page (@danilo-leal) (#42463) @danilo-leal
+- &#8203;<!-- 11 -->[material-ui] Fix sentence in the All components page (@danilo-leal) (#42462) @danilo-leal
+- &#8203;<!-- 10 -->[material-ui] Update Figma design kit doc redirect link (@danilo-leal) (#42456) @danilo-leal
+- &#8203;<!-- 09 -->[system] Add "dynamic values" section to sx prop page (@aarongarciah) (#42453) @aarongarciah
+
+### Core
+
+- &#8203;<!-- 18 -->[website] Move the `React Engineer - X` role to future roles (#42532) @DanailH
+- &#8203;<!-- 08 -->[examples] Remove Pigment CSS examples (#42538) @sai6855
+- &#8203;<!-- 05 -->[website] Close Developer Advocate / Content Engineer role @oliviertassinari
+- &#8203;<!-- 04 -->[website] Update DoiT description and link in Sponsors section (@erezstmn-doit) (#42511) @erezstmn-doit
+- &#8203;<!-- 03 -->[website] Clean up the docs-infra job ad (@danilo-leal) (#42509) @danilo-leal
+- &#8203;<!-- 02 -->[website] Open the Docs-infra engineer role (@danilo-leal) (#42496) @danilo-leal
+- &#8203;<!-- 01 -->[website] Fix locationCountry in about page @oliviertassinari
+
+All contributors of this release in alphabetical order: @aarongarciah, @anle9650, @DanailH, @danilo-leal, @erezstmn-doit, @iammminzzy, @oliviertassinari, @sai6855, @ZeeshanTamboli
+
 ## v5.15.19
 
 <!-- generated comparing v5.15.18..master -->
@@ -8376,7 +8417,7 @@ A big thanks to the 15 contributors who made this release possible. Here are som
 
 - &#8203;<!-- 27 -->[core] Rename mui/core to mui/base (#29585) @michaldudak
 
-  Based on the results of the [poll](https://twitter.com/michaldudak/status/1452630484706635779) and our internal discussions, we decided to rename the `@mui/core` package to `@mui/base`. The main rationale for this is the fact that we use the term "Core" to refer to the core components product family, the one that includes Material Design components, unstyled components, System utilities, etc. Therefore, @mui/core was effectively a subset of MUI Core. This was confusing.
+  Based on the results of the [poll](https://x.com/michaldudak/status/1452630484706635779) and our internal discussions, we decided to rename the `@mui/core` package to `@mui/base`. The main rationale for this is the fact that we use the term "Core" to refer to the core components product family, the one that includes Material Design components, unstyled components, System utilities, etc. Therefore, @mui/core was effectively a subset of MUI Core. This was confusing.
 
   The new name better reflects the purpose of the package: it contains unstyled components, hooks, and utilities that serve as a **base** to build on.
 
@@ -12793,7 +12834,7 @@ A big thanks to the 34 contributors who made this release possible. Here are som
   ```
 
 - [Autocomplete] Remove `debug` in favor of `open` and dev tools (#23377) @eps1lon
-  There are a couple of simpler alternatives: `open={true}`, Chrome devtools ["Emulate focused"](https://twitter.com/sulco/status/1305841873945272321), or React devtools props.
+  There are a couple of simpler alternatives: `open={true}`, Chrome devtools ["Emulate focused"](https://x.com/sulco/status/1305841873945272321), or React devtools props.
 
 #### Changes
 

package/Tab/Tab.js

@@ -38,7 +38,9 @@ const TabRoot = styled(ButtonBase, {
     const {
       ownerState
     } = props;
-    return [styles.root, ownerState.label && ownerState.icon && styles.labelIcon, styles[`textColor${capitalize(ownerState.textColor)}`], ownerState.fullWidth && styles.fullWidth, ownerState.wrapped && styles.wrapped];
+    return [styles.root, ownerState.label && ownerState.icon && styles.labelIcon, styles[`textColor${capitalize(ownerState.textColor)}`], ownerState.fullWidth && styles.fullWidth, ownerState.wrapped && styles.wrapped, {
+      [`& .${tabClasses.iconWrapper}`]: styles.iconWrapper
+    }];
   }
 })(({
   theme,

package/Tab/tabClasses.d.ts

@@ -17,7 +17,7 @@ export interface TabClasses {
     fullWidth: string;
     /** Styles applied to the root element if `wrapped={true}`. */
     wrapped: string;
-    /** Styles applied to the wrapper element of `icon` if `icon` is provided. */
+    /** Styles applied to the `icon` HTML element if both `icon` and `label` are provided. */
     iconWrapper: string;
 }
 export type TabClassKey = keyof TabClasses;

package/index.js

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

package/legacy/Autocomplete/Autocomplete.js

@@ -72,7 +72,11 @@ var AutocompleteRoot = styled('div', {
       size = ownerState.size;
     return [_defineProperty({}, "& .".concat(autocompleteClasses.tag), styles.tag), _defineProperty({}, "& .".concat(autocompleteClasses.tag), styles["tagSize".concat(capitalize(size))]), _defineProperty({}, "& .".concat(autocompleteClasses.inputRoot), styles.inputRoot), _defineProperty({}, "& .".concat(autocompleteClasses.input), styles.input), _defineProperty({}, "& .".concat(autocompleteClasses.input), inputFocused && styles.inputFocused), styles.root, fullWidth && styles.fullWidth, hasPopupIcon && styles.hasPopupIcon, hasClearIcon && styles.hasClearIcon];
   }
-})((_styled = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_styled, "& .".concat(autocompleteClasses.tag), {
+})((_styled = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_styled, "&.".concat(autocompleteClasses.focused, " .").concat(autocompleteClasses.clearIndicator), {
+  visibility: 'visible'
+}), '@media (pointer: fine)', _defineProperty({}, "&:hover .".concat(autocompleteClasses.clearIndicator), {
+  visibility: 'visible'
+})), "& .".concat(autocompleteClasses.tag), {
   margin: 3,
   maxWidth: 'calc(100% - 6px)'
 }), "& .".concat(autocompleteClasses.inputRoot), _defineProperty(_defineProperty(_defineProperty({}, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
@@ -82,14 +86,6 @@ var AutocompleteRoot = styled('div', {
 }), "& .".concat(autocompleteClasses.input), {
   width: 0,
   minWidth: 30
-})), "&.".concat(autocompleteClasses.focused), _defineProperty(_defineProperty({}, "& .".concat(autocompleteClasses.clearIndicator), {
-  visibility: 'visible'
-}), "& .".concat(autocompleteClasses.input), {
-  minWidth: 0
-})), '@media (pointer: fine)', _defineProperty(_defineProperty({}, "&:hover .".concat(autocompleteClasses.clearIndicator), {
-  visibility: 'visible'
-}), "&:hover .".concat(autocompleteClasses.input), {
-  minWidth: 0
 })), "& .".concat(inputClasses.root), {
   paddingBottom: 1,
   '& .MuiInput-input': {

package/legacy/Tab/Tab.js

@@ -1,8 +1,8 @@
 'use client';
 
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -34,11 +34,11 @@ var TabRoot = styled(ButtonBase, {
   slot: 'Root',
   overridesResolver: function overridesResolver(props, styles) {
     var ownerState = props.ownerState;
-    return [styles.root, ownerState.label && ownerState.icon && styles.labelIcon, styles["textColor".concat(capitalize(ownerState.textColor))], ownerState.fullWidth && styles.fullWidth, ownerState.wrapped && styles.wrapped];
+    return [styles.root, ownerState.label && ownerState.icon && styles.labelIcon, styles["textColor".concat(capitalize(ownerState.textColor))], ownerState.fullWidth && styles.fullWidth, ownerState.wrapped && styles.wrapped, _defineProperty({}, "& .".concat(tabClasses.iconWrapper), styles.iconWrapper)];
   }
-})(function (_ref) {
-  var theme = _ref.theme,
-    ownerState = _ref.ownerState;
+})(function (_ref2) {
+  var theme = _ref2.theme,
+    ownerState = _ref2.ownerState;
   return _extends({}, theme.typography.button, {
     maxWidth: 360,
     minWidth: 90,

package/legacy/index.js

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

package/modern/Autocomplete/Autocomplete.js

@@ -92,6 +92,15 @@ const AutocompleteRoot = styled('div', {
     }, styles.root, fullWidth && styles.fullWidth, hasPopupIcon && styles.hasPopupIcon, hasClearIcon && styles.hasClearIcon];
   }
 })({
+  [`&.${autocompleteClasses.focused} .${autocompleteClasses.clearIndicator}`]: {
+    visibility: 'visible'
+  },
+  /* Avoid double tap issue on iOS */
+  '@media (pointer: fine)': {
+    [`&:hover .${autocompleteClasses.clearIndicator}`]: {
+      visibility: 'visible'
+    }
+  },
   [`& .${autocompleteClasses.tag}`]: {
     margin: 3,
     maxWidth: 'calc(100% - 6px)'
@@ -108,23 +117,6 @@ const AutocompleteRoot = styled('div', {
       minWidth: 30
     }
   },
-  [`&.${autocompleteClasses.focused}`]: {
-    [`& .${autocompleteClasses.clearIndicator}`]: {
-      visibility: 'visible'
-    },
-    [`& .${autocompleteClasses.input}`]: {
-      minWidth: 0
-    }
-  },
-  /* Avoid double tap issue on iOS */
-  '@media (pointer: fine)': {
-    [`&:hover .${autocompleteClasses.clearIndicator}`]: {
-      visibility: 'visible'
-    },
-    [`&:hover .${autocompleteClasses.input}`]: {
-      minWidth: 0
-    }
-  },
   [`& .${inputClasses.root}`]: {
     paddingBottom: 1,
     '& .MuiInput-input': {

package/modern/Tab/Tab.js

@@ -38,7 +38,9 @@ const TabRoot = styled(ButtonBase, {
     const {
       ownerState
     } = props;
-    return [styles.root, ownerState.label && ownerState.icon && styles.labelIcon, styles[`textColor${capitalize(ownerState.textColor)}`], ownerState.fullWidth && styles.fullWidth, ownerState.wrapped && styles.wrapped];
+    return [styles.root, ownerState.label && ownerState.icon && styles.labelIcon, styles[`textColor${capitalize(ownerState.textColor)}`], ownerState.fullWidth && styles.fullWidth, ownerState.wrapped && styles.wrapped, {
+      [`& .${tabClasses.iconWrapper}`]: styles.iconWrapper
+    }];
   }
 })(({
   theme,

package/modern/index.js

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

package/node/Autocomplete/Autocomplete.js

@@ -105,6 +105,15 @@ const AutocompleteRoot = (0, _zeroStyled.styled)('div', {
     }, styles.root, fullWidth && styles.fullWidth, hasPopupIcon && styles.hasPopupIcon, hasClearIcon && styles.hasClearIcon];
   }
 })({
+  [`&.${_autocompleteClasses.default.focused} .${_autocompleteClasses.default.clearIndicator}`]: {
+    visibility: 'visible'
+  },
+  /* Avoid double tap issue on iOS */
+  '@media (pointer: fine)': {
+    [`&:hover .${_autocompleteClasses.default.clearIndicator}`]: {
+      visibility: 'visible'
+    }
+  },
   [`& .${_autocompleteClasses.default.tag}`]: {
     margin: 3,
     maxWidth: 'calc(100% - 6px)'
@@ -121,23 +130,6 @@ const AutocompleteRoot = (0, _zeroStyled.styled)('div', {
       minWidth: 30
     }
   },
-  [`&.${_autocompleteClasses.default.focused}`]: {
-    [`& .${_autocompleteClasses.default.clearIndicator}`]: {
-      visibility: 'visible'
-    },
-    [`& .${_autocompleteClasses.default.input}`]: {
-      minWidth: 0
-    }
-  },
-  /* Avoid double tap issue on iOS */
-  '@media (pointer: fine)': {
-    [`&:hover .${_autocompleteClasses.default.clearIndicator}`]: {
-      visibility: 'visible'
-    },
-    [`&:hover .${_autocompleteClasses.default.input}`]: {
-      minWidth: 0
-    }
-  },
   [`& .${_inputClasses.default.root}`]: {
     paddingBottom: 1,
     '& .MuiInput-input': {

package/node/Tab/Tab.js

@@ -46,7 +46,9 @@ const TabRoot = (0, _styled.default)(_ButtonBase.default, {
     const {
       ownerState
     } = props;
-    return [styles.root, ownerState.label && ownerState.icon && styles.labelIcon, styles[`textColor${(0, _capitalize.default)(ownerState.textColor)}`], ownerState.fullWidth && styles.fullWidth, ownerState.wrapped && styles.wrapped];
+    return [styles.root, ownerState.label && ownerState.icon && styles.labelIcon, styles[`textColor${(0, _capitalize.default)(ownerState.textColor)}`], ownerState.fullWidth && styles.fullWidth, ownerState.wrapped && styles.wrapped, {
+      [`& .${_tabClasses.default.iconWrapper}`]: styles.iconWrapper
+    }];
   }
 })(({
   theme,

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.15.19
+ * @mui/material v5.15.20
  *
  * @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.15.19",
+  "version": "5.15.20",
   "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.",
@@ -34,11 +34,11 @@
     "prop-types": "^15.8.1",
     "react-is": "^18.2.0",
     "react-transition-group": "^4.4.5",
-    "@mui/base": "5.0.0-beta.40",
-    "@mui/system": "^5.15.15",
-    "@mui/core-downloads-tracker": "^5.15.19",
-    "@mui/utils": "^5.15.14",
-    "@mui/types": "^7.2.14"
+    "@mui/system": "^5.15.20",
+    "@mui/types": "^7.2.14",
+    "@mui/utils": "^5.15.20",
+    "@mui/core-downloads-tracker": "^5.15.20",
+    "@mui/base": "5.0.0-beta.40"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.15.19
+ * @mui/material v5.15.20
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -5065,11 +5065,9 @@
     var output = options.clone ? _extends({}, target) : target;
     if (isPlainObject(target) && isPlainObject(source)) {
       Object.keys(source).forEach(function (key) {
+        if (isPlainObject(source[key]) &&
         // Avoid prototype pollution
-        if (key === '__proto__') {
-          return;
-        }
-        if (isPlainObject(source[key]) && key in target && isPlainObject(target[key])) {
+        Object.prototype.hasOwnProperty.call(target, key) && isPlainObject(target[key])) {
           // Since `output` is a clone of `target` and we have narrowed `target` in this block we can cast to the same type.
           output[key] = deepmerge(target[key], source[key], options);
         } else if (options.clone) {
@@ -7978,7 +7976,7 @@
       var _React$useRef2 = React__namespace.useRef(defaultProp),
         defaultValue = _React$useRef2.current;
       React__namespace.useEffect(function () {
-        if (!isControlled && defaultValue !== defaultProp) {
+        if (!isControlled && !Object.is(defaultValue, defaultProp)) {
           console.error(["MUI: A component is changing the default ".concat(state, " state of an uncontrolled ").concat(name, " after being initialized. ") + "To suppress this warning opt to use a controlled ".concat(name, ".")].join('\n'));
         }
       }, [JSON.stringify(defaultProp)]);
@@ -23048,7 +23046,11 @@
         size = ownerState.size;
       return [_defineProperty({}, "& .".concat(autocompleteClasses$1.tag), styles.tag), _defineProperty({}, "& .".concat(autocompleteClasses$1.tag), styles["tagSize".concat(capitalize(size))]), _defineProperty({}, "& .".concat(autocompleteClasses$1.inputRoot), styles.inputRoot), _defineProperty({}, "& .".concat(autocompleteClasses$1.input), styles.input), _defineProperty({}, "& .".concat(autocompleteClasses$1.input), inputFocused && styles.inputFocused), styles.root, fullWidth && styles.fullWidth, hasPopupIcon && styles.hasPopupIcon, hasClearIcon && styles.hasClearIcon];
     }
-  })((_styled = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_styled, "& .".concat(autocompleteClasses$1.tag), {
+  })((_styled = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_styled, "&.".concat(autocompleteClasses$1.focused, " .").concat(autocompleteClasses$1.clearIndicator), {
+    visibility: 'visible'
+  }), '@media (pointer: fine)', _defineProperty({}, "&:hover .".concat(autocompleteClasses$1.clearIndicator), {
+    visibility: 'visible'
+  })), "& .".concat(autocompleteClasses$1.tag), {
     margin: 3,
     maxWidth: 'calc(100% - 6px)'
   }), "& .".concat(autocompleteClasses$1.inputRoot), _defineProperty(_defineProperty(_defineProperty({}, ".".concat(autocompleteClasses$1.hasPopupIcon, "&, .").concat(autocompleteClasses$1.hasClearIcon, "&"), {
@@ -23058,14 +23060,6 @@
   }), "& .".concat(autocompleteClasses$1.input), {
     width: 0,
     minWidth: 30
-  })), "&.".concat(autocompleteClasses$1.focused), _defineProperty(_defineProperty({}, "& .".concat(autocompleteClasses$1.clearIndicator), {
-    visibility: 'visible'
-  }), "& .".concat(autocompleteClasses$1.input), {
-    minWidth: 0
-  })), '@media (pointer: fine)', _defineProperty(_defineProperty({}, "&:hover .".concat(autocompleteClasses$1.clearIndicator), {
-    visibility: 'visible'
-  }), "&:hover .".concat(autocompleteClasses$1.input), {
-    minWidth: 0
   })), "& .".concat(inputClasses$1.root), {
     paddingBottom: 1,
     '& .MuiInput-input': {
@@ -46846,11 +46840,11 @@
     slot: 'Root',
     overridesResolver: function overridesResolver(props, styles) {
       var ownerState = props.ownerState;
-      return [styles.root, ownerState.label && ownerState.icon && styles.labelIcon, styles["textColor".concat(capitalize(ownerState.textColor))], ownerState.fullWidth && styles.fullWidth, ownerState.wrapped && styles.wrapped];
+      return [styles.root, ownerState.label && ownerState.icon && styles.labelIcon, styles["textColor".concat(capitalize(ownerState.textColor))], ownerState.fullWidth && styles.fullWidth, ownerState.wrapped && styles.wrapped, _defineProperty({}, "& .".concat(tabClasses$1.iconWrapper), styles.iconWrapper)];
     }
-  })(function (_ref) {
-    var theme = _ref.theme,
-      ownerState = _ref.ownerState;
+  })(function (_ref2) {
+    var theme = _ref2.theme,
+      ownerState = _ref2.ownerState;
     return _extends({}, theme.typography.button, {
       maxWidth: 360,
       minWidth: 90,