[material-ui][Autocomplete] address PR comments

packages/mui-material/src/Autocomplete/Autocomplete.d.ts

@@ -1,21 +1,21 @@
-import * as React from 'react';
-import { SxProps } from '@mui/system';
-import { OverridableStringUnion } from '@mui/types';
 import {
-  useAutocomplete,
   AutocompleteChangeDetails,
   AutocompleteChangeReason,
   AutocompleteCloseReason,
+  AutocompleteFreeSoloValueMapping,
   AutocompleteInputChangeReason,
   AutocompleteValue,
-  createFilterOptions,
   UseAutocompleteProps,
-  AutocompleteFreeSoloValueMapping,
+  createFilterOptions,
+  useAutocomplete,
 } from '@mui/base';
 import { IconButtonProps, InternalStandardProps as StandardProps, Theme } from '@mui/material';
 import { ChipProps, ChipTypeMap } from '@mui/material/Chip';
 import { PaperProps } from '@mui/material/Paper';
 import { PopperProps } from '@mui/material/Popper';
+import { SxProps } from '@mui/system';
+import { OverridableStringUnion } from '@mui/types';
+import * as React from 'react';
 import { AutocompleteClasses } from './autocompleteClasses';
 
 export {
@@ -39,7 +39,7 @@ export type AutocompleteOwnerState<
   focused: boolean;
   fullWidth: boolean;
   getOptionLabel: (option: Value | AutocompleteFreeSoloValueMapping<FreeSolo>) => string;
-  hasMultiple: boolean;
+  multiple: boolean;
   hasClearIcon: boolean;
   hasPopupIcon: boolean;
   inputFocused: boolean;

packages/mui-material/src/Autocomplete/Autocomplete.js

@@ -1,27 +1,27 @@
 'use client';
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import integerPropType from '@mui/utils/integerPropType';
+import { createFilterOptions, useAutocomplete } from '@mui/base';
+import { alpha } from '@mui/system/colorManipulator';
 import chainPropTypes from '@mui/utils/chainPropTypes';
-import { useAutocomplete, createFilterOptions } from '@mui/base';
 import composeClasses from '@mui/utils/composeClasses';
-import { alpha } from '@mui/system/colorManipulator';
-import Popper from '../Popper';
-import ListSubheader from '../ListSubheader';
-import Paper from '../Paper';
-import IconButton from '../IconButton';
+import integerPropType from '@mui/utils/integerPropType';
+import clsx from 'clsx';
+import PropTypes from 'prop-types';
+import * as React from 'react';
 import Chip from '../Chip';
+import filledInputClasses from '../FilledInput/filledInputClasses';
+import IconButton from '../IconButton';
 import inputClasses from '../Input/inputClasses';
 import inputBaseClasses from '../InputBase/inputBaseClasses';
+import ListSubheader from '../ListSubheader';
 import outlinedInputClasses from '../OutlinedInput/outlinedInputClasses';
-import filledInputClasses from '../FilledInput/filledInputClasses';
-import ClearIcon from '../internal/svg-icons/Close';
+import Paper from '../Paper';
+import Popper from '../Popper';
 import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
-import { styled, createUseThemeProps } from '../zero-styled';
-import autocompleteClasses, { getAutocompleteUtilityClass } from './autocompleteClasses';
+import ClearIcon from '../internal/svg-icons/Close';
 import capitalize from '../utils/capitalize';
 import useForkRef from '../utils/useForkRef';
+import { createUseThemeProps, styled } from '../zero-styled';
+import autocompleteClasses, { getAutocompleteUtilityClass } from './autocompleteClasses';
 
 const useThemeProps = createUseThemeProps('MuiAutocomplete');
 
@@ -32,7 +32,7 @@ const useUtilityClasses = (ownerState) => {
     expanded,
     focused,
     fullWidth,
-    hasMultiple,
+    multiple,
     hasClearIcon,
     hasPopupIcon,
     inputFocused,
@@ -46,12 +46,12 @@ const useUtilityClasses = (ownerState) => {
       expanded && 'expanded',
       focused && 'focused',
       fullWidth && 'fullWidth',
-      hasMultiple && 'hasMultiple',
+      multiple && 'multiple',
       hasClearIcon && 'hasClearIcon',
       hasPopupIcon && 'hasPopupIcon',
     ],
-    inputRoot: ['inputRoot', hasMultiple && 'hasMultiple'],
-    input: ['input', inputFocused && 'inputFocused', hasMultiple && 'hasMultiple'],
+    inputRoot: ['inputRoot', multiple && 'multiple'],
+    input: ['input', inputFocused && 'inputFocused', multiple && 'multiple'],
     tag: ['tag', `tagSize${capitalize(size)}`],
     endAdornment: ['endAdornment'],
     clearIndicator: ['clearIndicator'],
@@ -74,7 +74,7 @@ const AutocompleteRoot = styled('div', {
   slot: 'Root',
   overridesResolver: (props, styles) => {
     const { ownerState } = props;
-    const { fullWidth, hasMultiple, hasClearIcon, hasPopupIcon, inputFocused, size } = ownerState;
+    const { fullWidth, multiple, hasClearIcon, hasPopupIcon, inputFocused, size } = ownerState;
 
     return [
       { [`& .${autocompleteClasses.tag}`]: styles.tag },
@@ -84,7 +84,7 @@ const AutocompleteRoot = styled('div', {
       { [`& .${autocompleteClasses.input}`]: inputFocused && styles.inputFocused },
       styles.root,
       fullWidth && styles.fullWidth,
-      hasMultiple && styles.hasMultiple,
+      multiple && styles.multiple,
       hasPopupIcon && styles.hasPopupIcon,
       hasClearIcon && styles.hasClearIcon,
     ];
@@ -95,7 +95,7 @@ const AutocompleteRoot = styled('div', {
     maxWidth: 'calc(100% - 6px)',
   },
   [`& .${autocompleteClasses.inputRoot}`]: {
-    [`&.${autocompleteClasses.hasMultiple}`]: {
+    [`&.${autocompleteClasses.multiple}`]: {
       flexWrap: 'wrap',
     },
     [`.${autocompleteClasses.hasPopupIcon}&, .${autocompleteClasses.hasClearIcon}&`]: {
@@ -114,10 +114,7 @@ const AutocompleteRoot = styled('div', {
       visibility: 'visible',
     },
     [`& .${autocompleteClasses.input}`]: {
-      minWidth: 4,
-    },
-    [`& .${autocompleteClasses.input}.${autocompleteClasses.hasMultiple}`]: {
-      minWidth: 30,
+      minWidth: 0,
     },
   },
   /* Avoid double tap issue on iOS */
@@ -126,10 +123,7 @@ const AutocompleteRoot = styled('div', {
       visibility: 'visible',
     },
     [`&:hover .${autocompleteClasses.input}`]: {
-      minWidth: 4,
-    },
-    [`&:hover .${autocompleteClasses.input}.${autocompleteClasses.hasMultiple}`]: {
-      minWidth: 30,
+      minWidth: 0,
     },
   },
   [`& .${inputClasses.root}`]: {
@@ -535,7 +529,6 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
     focused,
     fullWidth,
     getOptionLabel,
-    hasMultiple: multiple,
     hasClearIcon,
     hasPopupIcon,
     inputFocused: focusedTag === -1,

packages/mui-material/src/Autocomplete/Autocomplete.test.js

@@ -1,27 +1,27 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { expect } from 'chai';
 import {
   act,
   createRenderer,
   fireEvent,
   screen,
   strictModeDoubleLoggingSuppressed,
 } from '@mui-internal/test-utils';
-import { spy } from 'sinon';
-import userEvent from '@testing-library/user-event';
-import Box from '@mui/system/Box';
-import { ThemeProvider, createTheme } from '@mui/material/styles';
-import TextField from '@mui/material/TextField';
-import Chip, { chipClasses } from '@mui/material/Chip';
 import Autocomplete, {
   autocompleteClasses as classes,
   createFilterOptions,
 } from '@mui/material/Autocomplete';
-import { paperClasses } from '@mui/material/Paper';
+import Chip, { chipClasses } from '@mui/material/Chip';
 import { iconButtonClasses } from '@mui/material/IconButton';
 import InputAdornment from '@mui/material/InputAdornment';
+import { paperClasses } from '@mui/material/Paper';
+import TextField from '@mui/material/TextField';
 import Tooltip from '@mui/material/Tooltip';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import Box from '@mui/system/Box';
+import userEvent from '@testing-library/user-event';
+import { expect } from 'chai';
+import PropTypes from 'prop-types';
+import * as React from 'react';
+import { spy } from 'sinon';
 import describeConformance from '../../test/describeConformance';
 
 function checkHighlightIs(listbox, expected) {
@@ -503,7 +503,7 @@ describe('<Autocomplete />', () => {
       });
     });
 
-    it('should apply the hasMultiple class', () => {
+    it('should apply the multiple class', () => {
       const { container } = render(
         <Autocomplete
           openOnFocus
@@ -512,7 +512,7 @@ describe('<Autocomplete />', () => {
           multiple
         />,
       );
-      expect(container.querySelector(`.${classes.root}`)).to.have.class(classes.hasMultiple);
+      expect(container.querySelector(`.${classes.root}`)).to.have.class(classes.multiple);
     });
 
     it('should remove the last option', () => {

packages/mui-material/src/Autocomplete/autocompleteClasses.ts

@@ -1,5 +1,5 @@
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 
 export interface AutocompleteClasses {
   /** Styles applied to the root element. */
@@ -19,7 +19,7 @@ export interface AutocompleteClasses {
   /** Styles applied to the tag elements, for example the chips if `size="medium"`. */
   tagSizeMedium: string;
   /** Styles applied when the autocomplete supports multiple selections. */
-  hasMultiple: string;
+  multiple: string;
   /** Styles applied when the popup icon is rendered. */
   hasPopupIcon: string;
   /** Styles applied when the clear icon is rendered. */
@@ -73,7 +73,7 @@ const autocompleteClasses: AutocompleteClasses = generateUtilityClasses('MuiAuto
   'tag',
   'tagSizeSmall',
   'tagSizeMedium',
-  'hasMultiple',
+  'multiple',
   'hasPopupIcon',
   'hasClearIcon',
   'inputRoot',