@mui/material 5.15.17 → 5.15.18

package/Autocomplete/Autocomplete.js

@@ -91,21 +91,11 @@ 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)'
   },
   [`& .${autocompleteClasses.inputRoot}`]: {
-    flexWrap: 'wrap',
     [`.${autocompleteClasses.hasPopupIcon}&, .${autocompleteClasses.hasClearIcon}&`]: {
       paddingRight: 26 + 4
     },
@@ -117,6 +107,23 @@ 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': {
@@ -223,6 +230,15 @@ const AutocompleteRoot = styled('div', {
         opacity: 1
       }
     }
+  }, {
+    props: {
+      multiple: true
+    },
+    style: {
+      [`& .${autocompleteClasses.inputRoot}`]: {
+        flexWrap: 'wrap'
+      }
+    }
   }]
 });
 const AutocompleteEndAdornment = styled('div', {

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # [Versions](https://mui.com/versions/)
 
+## v5.15.18
+
+<!-- generated comparing v5.15.17..master -->
+
+_May 14, 2024_
+
+A big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
+
+### `@mui/material@5.15.18`
+
+- &#8203;<!-- 6 -->[Autocomplete] Improve design when there's a start adornment for small autocomplete (@TahaRhidouani) (#42176) @github-actions[bot]
+- &#8203;<!-- 3 -->[ToggleButtonGroup] Add missing `selected` class in ToggleButtonGroupClasses type (@tarunrajput) (#42250) @github-actions[bot]
+
+### Docs
+
+- &#8203;<!-- 4 -->[docs] Fix 301 to Figma @oliviertassinari
+
+### Core
+
+- &#8203;<!-- 5 -->[blog] Introducing Pigment CSS blog post (#42198) (#42255) @samuelsycamore
+- &#8203;<!-- 2 -->[website] Add redirection for talk @oliviertassinari
+- &#8203;<!-- 1 -->[website] Adds Arthur Balduini team info (@arthurbalduini) (#42226) @github-actions[bot]
+
+All contributors of this release in alphabetical order: @arthurbalduini, @oliviertassinari, @samuelsycamore, @TahaRhidouani, @tarunrajput
+
 ## v5.15.17
 
 <!-- generated comparing v5.15.16..master -->

package/ToggleButtonGroup/toggleButtonGroupClasses.d.ts

@@ -1,6 +1,10 @@
 export interface ToggleButtonGroupClasses {
     /** Styles applied to the root element. */
     root: string;
+    /** State class applied to the root element if `selected={true}`. */
+    selected: string;
+    /** Styles applied to the root element if `orientation="horizontal"`. */
+    horizontal: string;
     /** Styles applied to the root element if `orientation="vertical"`. */
     vertical: string;
     /** State class applied to the root element if `disabled={true}`. */

package/ToggleButtonGroup/toggleButtonGroupClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getToggleButtonGroupUtilityClass(slot) {
   return generateUtilityClass('MuiToggleButtonGroup', slot);
 }
-const toggleButtonGroupClasses = generateUtilityClasses('MuiToggleButtonGroup', ['root', 'selected', 'vertical', 'disabled', 'grouped', 'groupedHorizontal', 'groupedVertical', 'fullWidth', 'firstButton', 'lastButton', 'middleButton']);
+const toggleButtonGroupClasses = generateUtilityClasses('MuiToggleButtonGroup', ['root', 'selected', 'horizontal', 'vertical', 'disabled', 'grouped', 'groupedHorizontal', 'groupedVertical', 'fullWidth', 'firstButton', 'lastButton', 'middleButton']);
 export default toggleButtonGroupClasses;

package/index.js

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

package/legacy/Autocomplete/Autocomplete.js

@@ -73,22 +73,24 @@ 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.focused, " .").concat(autocompleteClasses.clearIndicator), {
-  visibility: 'visible'
-}), '@media (pointer: fine)', _defineProperty({}, "&:hover .".concat(autocompleteClasses.clearIndicator), {
-  visibility: 'visible'
-})), "& .".concat(autocompleteClasses.tag), {
+})((_styled = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_styled, "& .".concat(autocompleteClasses.tag), {
   margin: 3,
   maxWidth: 'calc(100% - 6px)'
-}), "& .".concat(autocompleteClasses.inputRoot), _defineProperty(_defineProperty(_defineProperty({
-  flexWrap: 'wrap'
-}, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
+}), "& .".concat(autocompleteClasses.inputRoot), _defineProperty(_defineProperty(_defineProperty({}, ".".concat(autocompleteClasses.hasPopupIcon, "&, .").concat(autocompleteClasses.hasClearIcon, "&"), {
   paddingRight: 26 + 4
 }), ".".concat(autocompleteClasses.hasPopupIcon, ".").concat(autocompleteClasses.hasClearIcon, "&"), {
   paddingRight: 52 + 4
 }), "& .".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': {
@@ -166,6 +168,13 @@ var AutocompleteRoot = styled('div', {
   style: _defineProperty({}, "& .".concat(autocompleteClasses.input), {
     opacity: 1
   })
+}, {
+  props: {
+    multiple: true
+  },
+  style: _defineProperty({}, "& .".concat(autocompleteClasses.inputRoot), {
+    flexWrap: 'wrap'
+  })
 }])));
 var AutocompleteEndAdornment = styled('div', {
   name: 'MuiAutocomplete',

package/legacy/ToggleButtonGroup/toggleButtonGroupClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getToggleButtonGroupUtilityClass(slot) {
   return generateUtilityClass('MuiToggleButtonGroup', slot);
 }
-var toggleButtonGroupClasses = generateUtilityClasses('MuiToggleButtonGroup', ['root', 'selected', 'vertical', 'disabled', 'grouped', 'groupedHorizontal', 'groupedVertical', 'fullWidth', 'firstButton', 'lastButton', 'middleButton']);
+var toggleButtonGroupClasses = generateUtilityClasses('MuiToggleButtonGroup', ['root', 'selected', 'horizontal', 'vertical', 'disabled', 'grouped', 'groupedHorizontal', 'groupedVertical', 'fullWidth', 'firstButton', 'lastButton', 'middleButton']);
 export default toggleButtonGroupClasses;

package/legacy/index.js

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

package/modern/Autocomplete/Autocomplete.js

@@ -91,21 +91,11 @@ 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)'
   },
   [`& .${autocompleteClasses.inputRoot}`]: {
-    flexWrap: 'wrap',
     [`.${autocompleteClasses.hasPopupIcon}&, .${autocompleteClasses.hasClearIcon}&`]: {
       paddingRight: 26 + 4
     },
@@ -117,6 +107,23 @@ 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': {
@@ -223,6 +230,15 @@ const AutocompleteRoot = styled('div', {
         opacity: 1
       }
     }
+  }, {
+    props: {
+      multiple: true
+    },
+    style: {
+      [`& .${autocompleteClasses.inputRoot}`]: {
+        flexWrap: 'wrap'
+      }
+    }
   }]
 });
 const AutocompleteEndAdornment = styled('div', {

package/modern/ToggleButtonGroup/toggleButtonGroupClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getToggleButtonGroupUtilityClass(slot) {
   return generateUtilityClass('MuiToggleButtonGroup', slot);
 }
-const toggleButtonGroupClasses = generateUtilityClasses('MuiToggleButtonGroup', ['root', 'selected', 'vertical', 'disabled', 'grouped', 'groupedHorizontal', 'groupedVertical', 'fullWidth', 'firstButton', 'lastButton', 'middleButton']);
+const toggleButtonGroupClasses = generateUtilityClasses('MuiToggleButtonGroup', ['root', 'selected', 'horizontal', 'vertical', 'disabled', 'grouped', 'groupedHorizontal', 'groupedVertical', 'fullWidth', 'firstButton', 'lastButton', 'middleButton']);
 export default toggleButtonGroupClasses;

package/modern/index.js

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

package/node/Autocomplete/Autocomplete.js

@@ -104,21 +104,11 @@ 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)'
   },
   [`& .${_autocompleteClasses.default.inputRoot}`]: {
-    flexWrap: 'wrap',
     [`.${_autocompleteClasses.default.hasPopupIcon}&, .${_autocompleteClasses.default.hasClearIcon}&`]: {
       paddingRight: 26 + 4
     },
@@ -130,6 +120,23 @@ 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': {
@@ -236,6 +243,15 @@ const AutocompleteRoot = (0, _zeroStyled.styled)('div', {
         opacity: 1
       }
     }
+  }, {
+    props: {
+      multiple: true
+    },
+    style: {
+      [`& .${_autocompleteClasses.default.inputRoot}`]: {
+        flexWrap: 'wrap'
+      }
+    }
   }]
 });
 const AutocompleteEndAdornment = (0, _zeroStyled.styled)('div', {

package/node/ToggleButtonGroup/toggleButtonGroupClasses.js

@@ -11,5 +11,5 @@ var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateU
 function getToggleButtonGroupUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiToggleButtonGroup', slot);
 }
-const toggleButtonGroupClasses = (0, _generateUtilityClasses.default)('MuiToggleButtonGroup', ['root', 'selected', 'vertical', 'disabled', 'grouped', 'groupedHorizontal', 'groupedVertical', 'fullWidth', 'firstButton', 'lastButton', 'middleButton']);
+const toggleButtonGroupClasses = (0, _generateUtilityClasses.default)('MuiToggleButtonGroup', ['root', 'selected', 'horizontal', 'vertical', 'disabled', 'grouped', 'groupedHorizontal', 'groupedVertical', 'fullWidth', 'firstButton', 'lastButton', 'middleButton']);
 var _default = exports.default = toggleButtonGroupClasses;

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.15.17
+ * @mui/material v5.15.18
  *
  * @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.17",
+  "version": "5.15.18",
   "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,9 +34,9 @@
     "prop-types": "^15.8.1",
     "react-is": "^18.2.0",
     "react-transition-group": "^4.4.5",
-    "@mui/core-downloads-tracker": "^5.15.17",
-    "@mui/base": "5.0.0-beta.40",
+    "@mui/core-downloads-tracker": "^5.15.18",
     "@mui/types": "^7.2.14",
+    "@mui/base": "5.0.0-beta.40",
     "@mui/utils": "^5.15.14",
     "@mui/system": "^5.15.15"
   },

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.15.17
+ * @mui/material v5.15.18
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -23045,22 +23045,24 @@
         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.focused, " .").concat(autocompleteClasses$1.clearIndicator), {
-    visibility: 'visible'
-  }), '@media (pointer: fine)', _defineProperty({}, "&:hover .".concat(autocompleteClasses$1.clearIndicator), {
-    visibility: 'visible'
-  })), "& .".concat(autocompleteClasses$1.tag), {
+  })((_styled = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_styled, "& .".concat(autocompleteClasses$1.tag), {
     margin: 3,
     maxWidth: 'calc(100% - 6px)'
-  }), "& .".concat(autocompleteClasses$1.inputRoot), _defineProperty(_defineProperty(_defineProperty({
-    flexWrap: 'wrap'
-  }, ".".concat(autocompleteClasses$1.hasPopupIcon, "&, .").concat(autocompleteClasses$1.hasClearIcon, "&"), {
+  }), "& .".concat(autocompleteClasses$1.inputRoot), _defineProperty(_defineProperty(_defineProperty({}, ".".concat(autocompleteClasses$1.hasPopupIcon, "&, .").concat(autocompleteClasses$1.hasClearIcon, "&"), {
     paddingRight: 26 + 4
   }), ".".concat(autocompleteClasses$1.hasPopupIcon, ".").concat(autocompleteClasses$1.hasClearIcon, "&"), {
     paddingRight: 52 + 4
   }), "& .".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': {
@@ -23138,6 +23140,13 @@
     style: _defineProperty({}, "& .".concat(autocompleteClasses$1.input), {
       opacity: 1
     })
+  }, {
+    props: {
+      multiple: true
+    },
+    style: _defineProperty({}, "& .".concat(autocompleteClasses$1.inputRoot), {
+      flexWrap: 'wrap'
+    })
   }])));
   var AutocompleteEndAdornment = styled$1('div', {
     name: 'MuiAutocomplete',
@@ -50372,7 +50381,7 @@
   function getToggleButtonGroupUtilityClass(slot) {
     return generateUtilityClass$1('MuiToggleButtonGroup', slot);
   }
-  var toggleButtonGroupClasses = generateUtilityClasses$1('MuiToggleButtonGroup', ['root', 'selected', 'vertical', 'disabled', 'grouped', 'groupedHorizontal', 'groupedVertical', 'fullWidth', 'firstButton', 'lastButton', 'middleButton']);
+  var toggleButtonGroupClasses = generateUtilityClasses$1('MuiToggleButtonGroup', ['root', 'selected', 'horizontal', 'vertical', 'disabled', 'grouped', 'groupedHorizontal', 'groupedVertical', 'fullWidth', 'firstButton', 'lastButton', 'middleButton']);
   var toggleButtonGroupClasses$1 = toggleButtonGroupClasses;
 
   var useUtilityClasses = function useUtilityClasses(ownerState) {