@mui/material 6.0.0-dev.240424162023-9968b4889d → 6.0.0

package/Autocomplete/Autocomplete.d.ts

@@ -1,8 +1,11 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { OverridableStringUnion } from '@mui/types';
-import {
-  useAutocomplete,
+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 useAutocomplete, {
   AutocompleteChangeDetails,
   AutocompleteChangeReason,
   AutocompleteCloseReason,
@@ -11,12 +14,9 @@ import {
   createFilterOptions,
   UseAutocompleteProps,
   AutocompleteFreeSoloValueMapping,
-} 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';
+} from '../useAutocomplete';
 import { AutocompleteClasses } from './autocompleteClasses';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
 export {
   AutocompleteChangeDetails,
@@ -84,6 +84,75 @@ export interface AutocompleteRenderInputParams {
 
 export interface AutocompletePropsSizeOverrides {}
 
+export interface AutocompleteSlots {
+  /**
+   * The component used to render the listbox.
+   * @default 'ul'
+   */
+  listbox?: React.JSXElementConstructor<React.HTMLAttributes<HTMLElement>>;
+  /**
+   * The component used to render the body of the popup.
+   * @default Paper
+   */
+  paper?: React.JSXElementConstructor<PaperProps>;
+  /**
+   * The component used to position the popup.
+   * @default Popper
+   */
+  popper?: React.JSXElementConstructor<PopperProps>;
+}
+
+export type AutocompleteSlotsAndSlotProps<
+  Value,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined,
+  ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
+> = CreateSlotsAndSlotProps<
+  AutocompleteSlots,
+  {
+    chip: SlotProps<
+      React.ElementType<Partial<ChipProps<ChipComponent>>>,
+      {},
+      AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>
+    >;
+    clearIndicator: SlotProps<
+      React.ElementType<Partial<IconButtonProps>>,
+      {},
+      AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>
+    >;
+    /**
+     * Props applied to the Listbox element.
+     */
+    listbox: SlotProps<
+      React.ElementType<
+        ReturnType<ReturnType<typeof useAutocomplete>['getListboxProps']> & {
+          sx?: SxProps<Theme>;
+          ref?: React.Ref<Element>;
+        }
+      >,
+      {},
+      AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>
+    >;
+
+    paper: SlotProps<
+      React.ElementType<Partial<PaperProps>>,
+      {},
+      AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>
+    >;
+    popper: SlotProps<
+      React.ElementType<Partial<PopperProps>>,
+      {},
+      AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>
+    >;
+    popupIndicator: SlotProps<
+      React.ElementType<Partial<IconButtonProps>>,
+      {},
+      AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>
+    >;
+  }
+>;
+
 export interface AutocompleteProps<
   Value,
   Multiple extends boolean | undefined,
@@ -91,7 +160,8 @@ export interface AutocompleteProps<
   FreeSolo extends boolean | undefined,
   ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
 > extends UseAutocompleteProps<Value, Multiple, DisableClearable, FreeSolo>,
-    StandardProps<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'children'> {
+    StandardProps<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'children'>,
+    AutocompleteSlotsAndSlotProps<Value, Multiple, DisableClearable, FreeSolo, ChipComponent> {
   /**
    * Props applied to the [`Chip`](/material-ui/api/chip/) element.
    */
@@ -121,7 +191,7 @@ export interface AutocompleteProps<
   closeText?: string;
   /**
    * The props used for each slot inside.
-   * @default {}
+   * @deprecated Use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   componentsProps?: {
     clearIndicator?: Partial<IconButtonProps>;
@@ -249,7 +319,7 @@ export interface AutocompleteProps<
    * @returns {ReactNode}
    */
   renderOption?: (
-    props: React.HTMLAttributes<HTMLLIElement>,
+    props: React.HTMLAttributes<HTMLLIElement> & { key: any },
     option: Value,
     state: AutocompleteRenderOptionState,
     ownerState: AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>,
@@ -272,16 +342,6 @@ export interface AutocompleteProps<
    * @default 'medium'
    */
   size?: OverridableStringUnion<'small' | 'medium', AutocompletePropsSizeOverrides>;
-  /**
-   * The props used for each slot inside.
-   * @default {}
-   */
-  slotProps?: {
-    clearIndicator?: Partial<IconButtonProps>;
-    paper?: PaperProps;
-    popper?: Partial<PopperProps>;
-    popupIndicator?: Partial<IconButtonProps>;
-  };
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -306,4 +366,4 @@ export default function Autocomplete<
   ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
 >(
   props: AutocompleteProps<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>,
-): JSX.Element;
+): React.JSX.Element;