@mui/material 5.11.15 → 5.11.16

package/Autocomplete/Autocomplete.js

@@ -453,6 +453,9 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   }));
   const hasClearIcon = !disableClearable && !disabled && dirty && !readOnly;
   const hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;
+  const {
+    onMouseDown: handleInputMouseDown
+  } = getInputProps();
 
   // If you modify this, make sure to keep the `AutocompleteOwnerState` type in sync.
   const ownerState = _extends({}, props, {
@@ -543,7 +546,12 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
         InputProps: _extends({
           ref: setAnchorEl,
           className: classes.inputRoot,
-          startAdornment
+          startAdornment,
+          onClick: event => {
+            if (event.target === event.currentTarget) {
+              handleInputMouseDown(event);
+            }
+          }
         }, (hasClearIcon || hasPopupIcon) && {
           endAdornment: /*#__PURE__*/_jsxs(AutocompleteEndAdornment, {
             className: classes.endAdornment,

package/Badge/badgeClasses.d.ts

@@ -1,19 +1,19 @@
 export interface BadgeClasses {
-    /** Class name applied to the root element. */
+    /** Styles applied to the root element. */
     root: string;
-    /** Class name applied to the badge `span` element. */
+    /** Styles applied to the badge `span` element. */
     badge: string;
-    /** Class name applied to the badge `span` element if `variant="dot"`. */
+    /** Styles applied to the badge `span` element if `variant="dot"`. */
     dot: string;
-    /** Class name applied to the badge `span` element if `variant="standard"`. */
+    /** Styles applied to the badge `span` element if `variant="standard"`. */
     standard: string;
-    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }}`. */
+    /** Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }}`. */
     anchorOriginTopRight: string;
-    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }}`. */
+    /** Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }}`. */
     anchorOriginBottomRight: string;
-    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }}`. */
+    /** Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }}`. */
     anchorOriginTopLeft: string;
-    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }}`. */
+    /** Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }}`. */
     anchorOriginBottomLeft: string;
     /** State class applied to the badge `span` element if `invisible={true}`. */
     invisible: string;
@@ -29,25 +29,25 @@ export interface BadgeClasses {
     colorSuccess: string;
     /** Styles applied to the badge `span` element if `color="warning"`. */
     colorWarning: string;
-    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangular"`. */
+    /** Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangular"`. */
     anchorOriginTopRightRectangular: string;
-    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangular"`. */
+    /** Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangular"`. */
     anchorOriginBottomRightRectangular: string;
-    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangular"`. */
+    /** Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangular"`. */
     anchorOriginTopLeftRectangular: string;
-    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangular"`. */
+    /** Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangular"`. */
     anchorOriginBottomLeftRectangular: string;
-    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }} overlap="circular"`. */
+    /** Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'right' }} overlap="circular"`. */
     anchorOriginTopRightCircular: string;
-    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circular"`. */
+    /** Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circular"`. */
     anchorOriginBottomRightCircular: string;
-    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }} overlap="circular"`. */
+    /** Styles applied to the badge `span` element if `anchorOrigin={{ 'top', 'left' }} overlap="circular"`. */
     anchorOriginTopLeftCircular: string;
-    /** Class name applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circular"`. */
+    /** Styles applied to the badge `span` element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circular"`. */
     anchorOriginBottomLeftCircular: string;
-    /** Class name applied to the badge `span` element if `overlap="rectangular"`. */
+    /** Styles applied to the badge `span` element if `overlap="rectangular"`. */
     overlapRectangular: string;
-    /** Class name applied to the badge `span` element if `overlap="circular"`. */
+    /** Styles applied to the badge `span` element if `overlap="circular"`. */
     overlapCircular: string;
 }
 export type BadgeClassKey = keyof BadgeClasses;

package/CHANGELOG.md

@@ -1,5 +1,67 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.11.16
+
+<!-- generated comparing v5.11.15..master -->
+
+_Apr 4, 2023_
+
+A big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:
+
+- 💅 Added tabs on API pages of Base UI to switch between component and hook references (#35938) @mnajdova
+- 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.11.16`
+
+- [Autocomplete] Listen for click on the root element (#36369) @sai6855
+- [Autocomplete] Fix navigation issue on mouse hover (#35196) @sai6855
+- [Card] Fix Card focus effect overflowing parent card (#36329) @mj12albert
+- [Grid] Missing slot (#36765) @siriwatknp
+- [Select] Make error part of the `ownerState` to enable overriding styles with it in theme (#36422) @gitstart
+- [Slider] Fix ValueLabel UI issues comes when size="small" and orientation="vertical (#36738) @yushanwebdev
+
+### `@mui/icons-material@5.11.16`
+
+- [icons] Do not ignore popular icons (#36608) @michaldudak
+
+### `@mui/joy@5.0.0-alpha.74`
+
+- [Joy] Add `ModalOverflow` component (#36262) @siriwatknp
+- [Joy] Fix `Checkbox` custom color prop type warning (#36691) @amal-qb
+
+### Docs
+
+- [docs][base] Add return type for `useFormControlUnstyledContext` hook (#36302) @HeVictor
+- [docs][base] Move styles to the bottom of demos code for `FormControl` (#36579) @gitstart
+- [docs][base] Move styles to the bottom of demos code for `Menu` (#36582) @gitstart
+- [docs][base] Move styles code to bottom in the `Button` demos (#36590) @sai6855
+- [docs][base] Show components & hooks API on the components page (#35938) @mnajdova
+- [docs] Describe slotProps in MUI Base customization doc (#36206) @michaldudak
+- [docs] Fix double API page redirection (#36743) @oliviertassinari
+- [docs] Remove hash property and leverage pathname (#36764) @siriwatknp
+- [docs] Introduce markdown permalink to source (#36729) @oliviertassinari
+- [docs] Tabs API add slots section (#36769) @mnajdova
+- [docs] Update feedbacks management on slack (#36705) @alexfauquette
+- [docs] Fix Joy UI URL to tokens (#36742) @oliviertassinari
+- [docs] Add toggle-button coming soon page (#36618) @siriwatknp
+- [docs] Fix typo on the Joy UI theme builder (#36734) @danilo-leal
+- [docs] Fix small typo (#36727) @RBerthier
+- [docs] Fix Joy UI template broken image loading @oliviertassinari
+- [docs] Hide the default API column if it's empty (#36715) @mnajdova
+- [docs] Update Material UI Related Projects page (#34203) @viclafouch
+- [docs] Revise Joy UI "Circular Progress" page (#36126) @LadyBluenotes
+- [docs] Revise Joy UI "Radio" page (#35893) @DevinCLane
+- [docs] Support Google Analytics 4 (#36123) @alexfauquette
+- [docs][material] Keep consistency in description of classes (#36631) @hbjORbj
+- [docs] Remove redundant files and fix regression (#36775) @ZeeshanTamboli
+
+### Core
+
+- [blog] Compress images @oliviertassinari
+- [core] Remove unused token (#36722) @oliviertassinari
+
+All contributors of this release in alphabetical order: @alexfauquette, @amal-qb, @danilo-leal, @DevinCLane, @gitstart, @hbjORbj, @HeVictor, @LadyBluenotes, @michaldudak, @mj12albert, @mnajdova, @oliviertassinari, @RBerthier, @sai6855, @siriwatknp, @viclafouch, @yushanwebdev
+
 ## 5.11.15
 
 <!-- generated comparing v5.11.14..master -->
@@ -5406,7 +5468,7 @@ _Sep 1, 2021_
 A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
 
 - 🎉 Renamed packages to `@mui/*` as part of rebranding the company, following the strategy of expanding the library scope beyond Material Design. For more details about it, check the [GitHub discussion](https://github.com/mui/material-ui/discussions/27803).
-- 🛠 Added `mui-replace` codemod for migrating `@material-ui/*` to new packages `@mui/*`. Check out this [codemod detail](https://github.com/mui/material-ui/blob/next/packages/mui-codemod/README.md#mui-replace) or head to [migration guide](https://mui.com/material-ui/migration/migration-v4/#preset-safe)
+- 🛠 Added `mui-replace` codemod for migrating `@material-ui/*` to new packages `@mui/*`. Check out this [codemod detail](https://github.com/mui/material-ui/blob/v5.0.0/packages/mui-codemod/README.md#mui-replace) or head to [migration guide](https://mui.com/material-ui/migration/migration-v4/#preset-safe)
 - 🧪 Added new `<Mansory>` component to the lab, [check it out](https://mui.com/components/masonry/). It has been crafted by our first intern, @hbjORbj 👏!
 
 ### `@mui/material@5.0.0-rc.0`
@@ -5438,7 +5500,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som
 
   > **Note**: `@mui/base` (previously `@material-ui/unstyled`) is not the same as `@material-ui/core`.
 
-  We encourage you to use the [codemod](https://github.com/mui/material-ui/blob/next/packages/mui-codemod/README.md#mui-replace) for smooth migration.
+  We encourage you to use the [codemod](https://github.com/mui/material-ui/blob/v5.0.0/packages/mui-codemod/README.md#mui-replace) for smooth migration.
 
 #### Changes
 
@@ -6573,7 +6635,7 @@ A big thanks to the 14 contributors who made this release possible. Here are som
 
 - 👩‍🎤 We have completed the migration to emotion of all the components (`@material-ui/core` and `@material-ui/lab`) @siriwatknp, @mnajdova.
 - 📦 Save [10 kB gzipped](https://bundlephobia.com/package/@material-ui/core@5.0.0-alpha.34) by removing the dependency on `@material-ui/styles` (JSS) from the core and the lab (#26377, #26382, #26376) @mnajdova.
-- ⚒️ Add many new [codemods](https://github.com/mui/material-ui/blob/HEAD/packages/mui-codemod/README.md) to automate the migration from v4 to v5 (#24867) @mbrookes.
+- ⚒️ Add many new [codemods](https://github.com/mui/material-ui/blob/v5.0.0/packages/mui-codemod/README.md) to automate the migration from v4 to v5 (#24867) @mbrookes.
 - And many more 🐛 bug fixes and 📚 improvements.
 
 ### `@material-ui/core@5.0.0-alpha.35`
@@ -8841,7 +8903,7 @@ A big thanks to the 17 contributors who made this release possible. Here are som
 
 - [Box] Remove deprecated props (#23716) @mnajdova
   All props are now available under the `sx` prop. A deprecation will be landing in v4.
-  Thanks to @mbrookes developers can automate the migration with a [codemod](https://github.com/mui/material-ui/blob/next/packages/mui-codemod/README.md#box-sx-prop).
+  Thanks to @mbrookes developers can automate the migration with a [codemod](https://github.com/mui/material-ui/blob/v5.0.0/packages/mui-codemod/README.md#box-sx-prop).
 
   ```diff
   -<Box p={2} bgcolor="primary.main">

package/CardActionArea/CardActionArea.js

@@ -30,6 +30,8 @@ const CardActionAreaRoot = styled(ButtonBase, {
 }) => ({
   display: 'block',
   textAlign: 'inherit',
+  borderRadius: 'inherit',
+  // for Safari to work https://github.com/mui/material-ui/issues/36285.
   width: '100%',
   [`&:hover .${cardActionAreaClasses.focusHighlight}`]: {
     opacity: (theme.vars || theme).palette.action.hoverOpacity,

package/NativeSelect/NativeSelectInput.d.ts

@@ -7,6 +7,7 @@ export interface NativeSelectInputProps extends React.SelectHTMLAttributes<HTMLS
   IconComponent: React.ElementType;
   inputRef?: React.Ref<HTMLSelectElement>;
   variant?: 'standard' | 'outlined' | 'filled';
+  error?: boolean;
   sx?: SxProps<Theme>;
 }
 

package/NativeSelect/NativeSelectInput.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "disabled", "IconComponent", "inputRef", "variant"];
+const _excluded = ["className", "disabled", "error", "IconComponent", "inputRef", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -17,10 +17,11 @@ const useUtilityClasses = ownerState => {
     variant,
     disabled,
     multiple,
-    open
+    open,
+    error
   } = ownerState;
   const slots = {
-    select: ['select', variant, disabled && 'disabled', multiple && 'multiple'],
+    select: ['select', variant, disabled && 'disabled', multiple && 'multiple', error && 'error'],
     icon: ['icon', `icon${capitalize(variant)}`, open && 'iconOpen', disabled && 'disabled']
   };
   return composeClasses(slots, getNativeSelectUtilityClasses, classes);
@@ -87,7 +88,7 @@ const NativeSelectSelect = styled('select', {
     const {
       ownerState
     } = props;
-    return [styles.select, styles[ownerState.variant], {
+    return [styles.select, styles[ownerState.variant], ownerState.error && styles.error, {
       [`&.${nativeSelectClasses.multiple}`]: styles.multiple
     }];
   }
@@ -133,6 +134,7 @@ const NativeSelectInput = /*#__PURE__*/React.forwardRef(function NativeSelectInp
   const {
       className,
       disabled,
+      error,
       IconComponent,
       inputRef,
       variant = 'standard'
@@ -140,7 +142,8 @@ const NativeSelectInput = /*#__PURE__*/React.forwardRef(function NativeSelectInp
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = _extends({}, props, {
     disabled,
-    variant
+    variant,
+    error
   });
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsxs(React.Fragment, {
@@ -175,6 +178,10 @@ process.env.NODE_ENV !== "production" ? NativeSelectInput.propTypes = {
    * If `true`, the select is disabled.
    */
   disabled: PropTypes.bool,
+  /**
+   * If `true`, the `select input` will indicate an error.
+   */
+  error: PropTypes.bool,
   /**
    * The icon that displays the arrow.
    */

package/NativeSelect/nativeSelectClasses.d.ts

@@ -25,6 +25,8 @@ export interface NativeSelectClasses {
     iconStandard: string;
     /** Styles applied to the underlying native input component. */
     nativeInput: string;
+    /** State class applied to the select component `error` class. */
+    error: string;
 }
 export type NativeSelectClassKey = keyof NativeSelectClasses;
 export declare function getNativeSelectUtilityClasses(slot: string): string;

package/NativeSelect/nativeSelectClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '../generateUtilityClass';
 export function getNativeSelectUtilityClasses(slot) {
   return generateUtilityClass('MuiNativeSelect', slot);
 }
-const nativeSelectClasses = generateUtilityClasses('MuiNativeSelect', ['root', 'select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput']);
+const nativeSelectClasses = generateUtilityClasses('MuiNativeSelect', ['root', 'select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput', 'error']);
 export default nativeSelectClasses;

package/Select/Select.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _StyledInput, _StyledFilledInput;
 const _excluded = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -67,21 +66,26 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
   const fcs = formControlState({
     props,
     muiFormControl,
-    states: ['variant']
+    states: ['variant', 'error']
   });
   const variant = fcs.variant || variantProp;
-  const InputComponent = input || {
-    standard: _StyledInput || (_StyledInput = /*#__PURE__*/_jsx(StyledInput, {})),
-    outlined: /*#__PURE__*/_jsx(StyledOutlinedInput, {
-      label: label
-    }),
-    filled: _StyledFilledInput || (_StyledFilledInput = /*#__PURE__*/_jsx(StyledFilledInput, {}))
-  }[variant];
   const ownerState = _extends({}, props, {
     variant,
     classes: classesProp
   });
   const classes = useUtilityClasses(ownerState);
+  const InputComponent = input || {
+    standard: /*#__PURE__*/_jsx(StyledInput, {
+      ownerState: ownerState
+    }),
+    outlined: /*#__PURE__*/_jsx(StyledOutlinedInput, {
+      label: label,
+      ownerState: ownerState
+    }),
+    filled: /*#__PURE__*/_jsx(StyledFilledInput, {
+      ownerState: ownerState
+    })
+  }[variant];
   const inputComponentRef = useForkRef(ref, InputComponent.ref);
   return /*#__PURE__*/_jsx(React.Fragment, {
     children: /*#__PURE__*/React.cloneElement(InputComponent, _extends({
@@ -90,6 +94,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
       inputComponent,
       inputProps: _extends({
         children,
+        error: fcs.error,
         IconComponent,
         variant,
         type: undefined,

package/Select/SelectInput.d.ts

@@ -17,6 +17,7 @@ export interface SelectInputProps<T = unknown> {
   autoWidth: boolean;
   defaultOpen?: boolean;
   disabled?: boolean;
+  error?: boolean;
   IconComponent?: React.ElementType;
   inputRef?: (
     ref: HTMLSelectElement | { node: HTMLInputElement; value: SelectInputProps<T>['value'] },

package/Select/SelectInput.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
 var _span;
-const _excluded = ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultOpen", "defaultValue", "disabled", "displayEmpty", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"];
+const _excluded = ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultOpen", "defaultValue", "disabled", "displayEmpty", "error", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"];
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
@@ -33,6 +33,8 @@ const SelectSelect = styled('div', {
       [`&.${selectClasses.select}`]: styles.select
     }, {
       [`&.${selectClasses.select}`]: styles[ownerState.variant]
+    }, {
+      [`&.${selectClasses.error}`]: styles.error
     }, {
       [`&.${selectClasses.multiple}`]: styles.multiple
     }];
@@ -90,10 +92,11 @@ const useUtilityClasses = ownerState => {
     variant,
     disabled,
     multiple,
-    open
+    open,
+    error
   } = ownerState;
   const slots = {
-    select: ['select', variant, disabled && 'disabled', multiple && 'multiple'],
+    select: ['select', variant, disabled && 'disabled', multiple && 'multiple', error && 'error'],
     icon: ['icon', `icon${capitalize(variant)}`, open && 'iconOpen', disabled && 'disabled'],
     nativeInput: ['nativeInput']
   };
@@ -115,6 +118,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       defaultValue,
       disabled,
       displayEmpty,
+      error = false,
       IconComponent,
       inputRef: inputRefProp,
       labelId,
@@ -420,7 +424,8 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
   const ownerState = _extends({}, props, {
     variant,
     value,
-    open
+    open,
+    error
   });
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsxs(React.Fragment, {
@@ -450,6 +455,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
         children: "\u200B"
       })) : display
     })), /*#__PURE__*/_jsx(SelectNativeInput, _extends({
+      "aria-invalid": error,
       value: Array.isArray(value) ? value.join(',') : value,
       name: name,
       ref: inputRef,
@@ -541,6 +547,10 @@ process.env.NODE_ENV !== "production" ? SelectInput.propTypes = {
    * If `true`, the selected item is displayed even if its value is empty.
    */
   displayEmpty: PropTypes.bool,
+  /**
+   * If `true`, the `select input` will indicate an error.
+   */
+  error: PropTypes.bool,
   /**
    * The icon that displays the arrow.
    */

package/Select/selectClasses.d.ts

@@ -23,6 +23,8 @@ export interface SelectClasses {
     iconStandard: string;
     /** Styles applied to the underlying native input component. */
     nativeInput: string;
+    /** State class applied to the root element if `error={true}`. */
+    error: string;
 }
 export type SelectClassKey = keyof SelectClasses;
 export declare function getSelectUtilityClasses(slot: string): string;

package/Select/selectClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '../generateUtilityClass';
 export function getSelectUtilityClasses(slot) {
   return generateUtilityClass('MuiSelect', slot);
 }
-const selectClasses = generateUtilityClasses('MuiSelect', ['select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'focused', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput']);
+const selectClasses = generateUtilityClasses('MuiSelect', ['select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'focused', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput', 'error']);
 export default selectClasses;

package/Slider/Slider.js

@@ -269,7 +269,7 @@ const StyledSliderValueLabel = styled(SliderValueLabel, {
   ownerState
 }) => _extends({
   [`&.${sliderClasses.valueLabelOpen}`]: {
-    transform: 'translateY(-100%) scale(1)'
+    transform: `${ownerState.orientation === 'vertical' ? 'translateY(-50%)' : 'translateY(-100%)'} scale(1)`
   },
   zIndex: 1,
   whiteSpace: 'nowrap'
@@ -278,7 +278,7 @@ const StyledSliderValueLabel = styled(SliderValueLabel, {
   transition: theme.transitions.create(['transform'], {
     duration: theme.transitions.duration.shortest
   }),
-  transform: 'translateY(-100%) scale(0)',
+  transform: `${ownerState.orientation === 'vertical' ? 'translateY(-50%)' : 'translateY(-100%)'} scale(0)`,
   position: 'absolute',
   backgroundColor: (theme.vars || theme).palette.grey[600],
   borderRadius: 2,
@@ -301,18 +301,18 @@ const StyledSliderValueLabel = styled(SliderValueLabel, {
     left: '50%'
   }
 }, ownerState.orientation === 'vertical' && {
-  right: '30px',
-  top: '24px',
+  right: ownerState.size === 'small' ? '20px' : '30px',
+  top: '50%',
   transformOrigin: 'right center',
   '&:before': {
     position: 'absolute',
     content: '""',
     width: 8,
     height: 8,
-    transform: 'translate(-50%, 50%) rotate(45deg)',
+    transform: 'translate(-50%, -50%) rotate(45deg)',
     backgroundColor: 'inherit',
     right: '-20%',
-    top: '25%'
+    top: '50%'
   }
 }, ownerState.size === 'small' && {
   fontSize: theme.typography.pxToRem(12),

package/Slider/sliderClasses.d.ts

@@ -1,55 +1,55 @@
 export interface SliderClasses {
-    /** Class name applied to the root element. */
+    /** Styles applied to the root element. */
     root: string;
-    /** Class name applied to the root element if `color="primary"`. */
+    /** Styles applied to the root element if `color="primary"`. */
     colorPrimary: string;
-    /** Class name applied to the root element if `color="secondary"`. */
+    /** Styles applied to the root element if `color="secondary"`. */
     colorSecondary: string;
-    /** Class name applied to the root element if `marks` is provided with at least one label. */
+    /** Styles applied to the root element if `marks` is provided with at least one label. */
     marked: string;
-    /** Class name applied to the root element if `orientation="vertical"`. */
+    /** Styles applied to the root element if `orientation="vertical"`. */
     vertical: string;
     /** State class applied to the root and thumb element if `disabled={true}`. */
     disabled: string;
     /** State class applied to the root if a thumb is being dragged. */
     dragging: string;
-    /** Class name applied to the rail element. */
+    /** Styles applied to the rail element. */
     rail: string;
-    /** Class name applied to the track element. */
+    /** Styles applied to the track element. */
     track: string;
-    /** Class name applied to the root element if `track={false}`. */
+    /** Styles applied to the root element if `track={false}`. */
     trackFalse: string;
-    /** Class name applied to the root element if `track="inverted"`. */
+    /** Styles applied to the root element if `track="inverted"`. */
     trackInverted: string;
-    /** Class name applied to the thumb element. */
+    /** Styles applied to the thumb element. */
     thumb: string;
     /** State class applied to the thumb element if it's active. */
     active: string;
     /** State class applied to the thumb element if keyboard focused. */
     focusVisible: string;
-    /** Class name applied to the mark element. */
+    /** Styles applied to the mark element. */
     mark: string;
-    /** Class name applied to the mark element if active (depending on the value). */
+    /** Styles applied to the mark element if active (depending on the value). */
     markActive: string;
-    /** Class name applied to the mark label element. */
+    /** Styles applied to the mark label element. */
     markLabel: string;
-    /** Class name applied to the mark label element if active (depending on the value). */
+    /** Styles applied to the mark label element if active (depending on the value). */
     markLabelActive: string;
-    /** Class name applied to the root element if `size="small"`. */
+    /** Styles applied to the root element if `size="small"`. */
     sizeSmall: string;
-    /** Class name applied to the thumb element if `color="primary"`. */
+    /** Styles applied to the thumb element if `color="primary"`. */
     thumbColorPrimary: string;
-    /** Class name applied to the thumb element if `color="secondary"`. */
+    /** Styles applied to the thumb element if `color="secondary"`. */
     thumbColorSecondary: string;
-    /** Class name applied to the thumb element if `size="small"`. */
+    /** Styles applied to the thumb element if `size="small"`. */
     thumbSizeSmall: string;
-    /** Class name applied to the thumb label element. */
+    /** Styles applied to the thumb label element. */
     valueLabel: string;
-    /** Class name applied to the thumb label element if it's open. */
+    /** Styles applied to the thumb label element if it's open. */
     valueLabelOpen: string;
-    /** Class name applied to the thumb label's circle element. */
+    /** Styles applied to the thumb label's circle element. */
     valueLabelCircle: string;
-    /** Class name applied to the thumb label's label element. */
+    /** Styles applied to the thumb label's label element. */
     valueLabelLabel: string;
 }
 export type SliderClassKey = keyof SliderClasses;

package/Unstable_Grid2/Grid2.js

@@ -4,6 +4,7 @@ import { styled, useThemeProps } from '../styles';
 const Grid2 = createGrid2({
   createStyledComponent: styled('div', {
     name: 'MuiGrid2',
+    slot: 'Root',
     overridesResolver: (props, styles) => styles.root
   }),
   componentName: 'MuiGrid2',

package/index.js

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

package/legacy/Autocomplete/Autocomplete.js

@@ -465,8 +465,8 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
     groupedOptions = _useAutocomplete.groupedOptions;
   var hasClearIcon = !disableClearable && !disabled && dirty && !readOnly;
   var hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;
-
-  // If you modify this, make sure to keep the `AutocompleteOwnerState` type in sync.
+  var _getInputProps = getInputProps(),
+    handleInputMouseDown = _getInputProps.onMouseDown; // If you modify this, make sure to keep the `AutocompleteOwnerState` type in sync.
   var ownerState = _extends({}, props, {
     disablePortal: disablePortal,
     expanded: expanded,
@@ -563,7 +563,12 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
         InputProps: _extends({
           ref: setAnchorEl,
           className: classes.inputRoot,
-          startAdornment: startAdornment
+          startAdornment: startAdornment,
+          onClick: function onClick(event) {
+            if (event.target === event.currentTarget) {
+              handleInputMouseDown(event);
+            }
+          }
         }, (hasClearIcon || hasPopupIcon) && {
           endAdornment: /*#__PURE__*/_jsxs(AutocompleteEndAdornment, {
             className: classes.endAdornment,

package/legacy/CardActionArea/CardActionArea.js

@@ -31,6 +31,8 @@ var CardActionAreaRoot = styled(ButtonBase, {
   return _ref2 = {
     display: 'block',
     textAlign: 'inherit',
+    borderRadius: 'inherit',
+    // for Safari to work https://github.com/mui/material-ui/issues/36285.
     width: '100%'
   }, _defineProperty(_ref2, "&:hover .".concat(cardActionAreaClasses.focusHighlight), {
     opacity: (theme.vars || theme).palette.action.hoverOpacity,