node scripts/migrateComponentClasses.mjs --grep "Autocomplete"

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

@@ -4,6 +4,7 @@ import { ChipProps, ChipTypeMap } from '@material-ui/core/Chip';
 import { PopperProps } from '@material-ui/core/Popper';
 import { SxProps } from '@material-ui/system';
 import { OverridableStringUnion } from '@material-ui/types';
+import { AutocompleteClasses } from './autocompleteClasses';
 import useAutocomplete, {
   AutocompleteChangeDetails,
   AutocompleteChangeReason,
@@ -77,56 +78,7 @@ export interface AutocompleteProps<
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: {
-    /** Styles applied to the root element. */
-    root?: string;
-    /** Styles applied to the root element if `fullWidth={true}`. */
-    fullWidth?: string;
-    /** Pseudo-class applied to the root element if focused. */
-    focused?: string;
-    /** Styles applied to the tag elements, e.g. the chips. */
-    tag?: string;
-    /** Styles applied to the tag elements, e.g. the chips if `size="small"`. */
-    tagSizeSmall?: string;
-    /** Styles applied to the tag elements, e.g. the chips if `size="medium"`. */
-    tagSizeMedium?: string;
-    /** Styles applied when the popup icon is rendered. */
-    hasPopupIcon?: string;
-    /** Styles applied when the clear icon is rendered. */
-    hasClearIcon?: string;
-    /** Styles applied to the Input element. */
-    inputRoot?: string;
-    /** Styles applied to the input element. */
-    input?: string;
-    /** Styles applied to the input element if tag focused. */
-    inputFocused?: string;
-    /** Styles applied to the endAdornment element. */
-    endAdornment?: string;
-    /** Styles applied to the clear indicator. */
-    clearIndicator?: string;
-    /** Styles applied to the popup indicator. */
-    popupIndicator?: string;
-    /** Styles applied to the popup indicator if the popup is open. */
-    popupIndicatorOpen?: string;
-    /** Styles applied to the popper element. */
-    popper?: string;
-    /** Styles applied to the popper element if `disablePortal={true}`. */
-    popperDisablePortal?: string;
-    /** Styles applied to the Paper component. */
-    paper?: string;
-    /** Styles applied to the listbox component. */
-    listbox?: string;
-    /** Styles applied to the loading wrapper. */
-    loading?: string;
-    /** Styles applied to the no option wrapper. */
-    noOptions?: string;
-    /** Styles applied to the option elements. */
-    option?: string;
-    /** Styles applied to the group's label elements. */
-    groupLabel?: string;
-    /** Styles applied to the group's ul elements. */
-    groupUl?: string;
-  };
+  classes?: Partial<AutocompleteClasses>;
   /**
    * The icon to display in place of the default clear icon.
    * @default <ClearIcon fontSize="small" />
@@ -276,10 +228,6 @@ export interface AutocompleteProps<
   sx?: SxProps<Theme>;
 }
 
-export type AutocompleteClassKey = keyof NonNullable<
-  AutocompleteProps<any, any, any, any>['classes']
->;
-
 /**
  *
  * Demos:

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

@@ -0,0 +1,88 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
+
+export interface AutocompleteClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `fullWidth={true}`. */
+    fullWidth: string;
+    /** Pseudo-class applied to the root element if focused. */
+    focused: string;
+    /** Styles applied to the tag elements, e.g. the chips. */
+    tag: string;
+    /** Styles applied to the tag elements, e.g. the chips if `size="small"`. */
+    tagSizeSmall: string;
+    /** Styles applied to the tag elements, e.g. the chips if `size="medium"`. */
+    tagSizeMedium: string;
+    /** Styles applied when the popup icon is rendered. */
+    hasPopupIcon: string;
+    /** Styles applied when the clear icon is rendered. */
+    hasClearIcon: string;
+    /** Styles applied to the Input element. */
+    inputRoot: string;
+    /** Styles applied to the input element. */
+    input: string;
+    /** Styles applied to the input element if tag focused. */
+    inputFocused: string;
+    /** Styles applied to the endAdornment element. */
+    endAdornment: string;
+    /** Styles applied to the clear indicator. */
+    clearIndicator: string;
+    /** Styles applied to the popup indicator. */
+    popupIndicator: string;
+    /** Styles applied to the popup indicator if the popup is open. */
+    popupIndicatorOpen: string;
+    /** Styles applied to the popper element. */
+    popper: string;
+    /** Styles applied to the popper element if `disablePortal={true}`. */
+    popperDisablePortal: string;
+    /** Styles applied to the Paper component. */
+    paper: string;
+    /** Styles applied to the listbox component. */
+    listbox: string;
+    /** Styles applied to the loading wrapper. */
+    loading: string;
+    /** Styles applied to the no option wrapper. */
+    noOptions: string;
+    /** Styles applied to the option elements. */
+    option: string;
+    /** Styles applied to the group's label elements. */
+    groupLabel: string;
+    /** Styles applied to the group's ul elements. */
+    groupUl: string;
+  }
+
+export type AutocompleteClassKey = keyof AutocompleteClasses;
+
+export function getAutocompleteUtilityClass(slot: string): string {
+  return generateUtilityClass('MuiAutocomplete', slot);
+}
+
+const autocompleteClasses: AutocompleteClasses = generateUtilityClasses('MuiAutocomplete', [
+  'root',
+  'fullWidth',
+  'focused',
+  'focusVisible',
+  'tag',
+  'tagSizeSmall',
+  'tagSizeMedium',
+  'hasPopupIcon',
+  'hasClearIcon',
+  'inputRoot',
+  'input',
+  'inputFocused',
+  'endAdornment',
+  'clearIndicator',
+  'popupIndicator',
+  'popupIndicatorOpen',
+  'popper',
+  'popperDisablePortal',
+  'paper',
+  'listbox',
+  'loading',
+  'noOptions',
+  'option',
+  'groupLabel',
+  'groupUl',
+]);
+
+export default autocompleteClasses;