@mui/material 9.0.0-alpha.3 → 9.0.0-alpha.4

package/Autocomplete/Autocomplete.d.mts

@@ -71,15 +71,17 @@ export interface AutocompleteRenderInputParams {
   disabled: boolean;
   fullWidth: boolean;
   size: 'small' | undefined;
-  InputLabelProps: ReturnType<ReturnType<typeof useAutocomplete>['getInputLabelProps']>;
-  InputProps: {
-    ref: React.Ref<any>;
-    className: string;
-    startAdornment: React.ReactNode;
-    endAdornment: React.ReactNode;
-    onMouseDown: React.MouseEventHandler;
+  slotProps: {
+    inputLabel: ReturnType<ReturnType<typeof useAutocomplete>['getInputLabelProps']>;
+    input: {
+      ref: React.Ref<any>;
+      className: string;
+      startAdornment: React.ReactNode;
+      endAdornment: React.ReactNode;
+      onMouseDown: React.MouseEventHandler;
+    };
+    htmlInput: ReturnType<ReturnType<typeof useAutocomplete>['getInputProps']>;
   };
-  inputProps: ReturnType<ReturnType<typeof useAutocomplete>['getInputProps']>;
 }
 export interface AutocompletePropsSizeOverrides {}
 export interface AutocompleteSlots {
@@ -130,11 +132,6 @@ export type AutocompleteSlotsAndSlotProps<Value, Multiple extends boolean | unde
   popupIndicator: SlotProps<React.ElementType<Partial<IconButtonProps>>, {}, AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>>;
 }>;
 export interface AutocompleteProps<Value, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']> extends UseAutocompleteProps<Value, Multiple, DisableClearable, FreeSolo>, StandardProps<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'children'>, AutocompleteSlotsAndSlotProps<Value, Multiple, DisableClearable, FreeSolo, ChipComponent> {
-  /**
-   * Props applied to the [`Chip`](https://mui.com/material-ui/api/chip/) element.
-   * @deprecated Use `slotProps.chip` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  ChipProps?: ChipProps<ChipComponent> | undefined;
   /**
    * Override or extend the styles applied to the component.
    */
@@ -158,16 +155,6 @@ export interface AutocompleteProps<Value, Multiple extends boolean | undefined,
    * @default 'Close'
    */
   closeText?: string | undefined;
-  /**
-   * The props used for each slot inside.
-   * @deprecated Use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  componentsProps?: {
-    clearIndicator?: Partial<IconButtonProps> | undefined;
-    paper?: PaperProps | undefined;
-    popper?: Partial<PopperProps> | undefined;
-    popupIndicator?: Partial<IconButtonProps> | undefined;
-  } | undefined;
   /**
    * If `true`, the component is disabled.
    * @default false
@@ -196,20 +183,6 @@ export interface AutocompleteProps<Value, Multiple extends boolean | undefined,
    * @default (more) => `+${more}`
    */
   getLimitTagsText?: ((more: number) => React.ReactNode) | undefined;
-  /**
-   * The component used to render the listbox.
-   * @default 'ul'
-   * @deprecated Use `slotProps.listbox.component` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  ListboxComponent?: React.JSXElementConstructor<React.HTMLAttributes<HTMLElement>> | undefined;
-  /**
-   * Props applied to the Listbox element.
-   * @deprecated Use `slotProps.listbox` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  ListboxProps?: (ReturnType<ReturnType<typeof useAutocomplete>['getListboxProps']> & {
-    sx?: SxProps<Theme> | undefined;
-    ref?: React.Ref<Element> | undefined;
-  }) | undefined;
   /**
    * If `true`, the component is in a loading state.
    * This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, for example `options` are empty).
@@ -246,18 +219,6 @@ export interface AutocompleteProps<Value, Multiple extends boolean | undefined,
    * @default 'Open'
    */
   openText?: string | undefined;
-  /**
-   * The component used to render the body of the popup.
-   * @default Paper
-   * @deprecated Use `slots.paper` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  PaperComponent?: React.JSXElementConstructor<React.HTMLAttributes<HTMLElement>> | undefined;
-  /**
-   * The component used to position the popup.
-   * @default Popper
-   * @deprecated Use `slots.popper` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  PopperComponent?: React.JSXElementConstructor<PopperProps> | undefined;
   /**
    * The icon to display in place of the default popup icon.
    * @default <ArrowDropDownIcon />
@@ -301,17 +262,6 @@ export interface AutocompleteProps<Value, Multiple extends boolean | undefined,
   renderOption?: ((props: React.HTMLAttributes<HTMLLIElement> & {
     key: React.Key;
   }, option: Value, state: AutocompleteRenderOptionState, ownerState: AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>) => React.ReactNode) | undefined;
-  /**
-   * Render the selected value when doing multiple selections.
-   *
-   * @deprecated Use `renderValue` prop instead
-   *
-   * @param {Value[]} value The `value` provided to the component.
-   * @param {function} getTagProps A tag props getter.
-   * @param {object} ownerState The state of the Autocomplete component.
-   * @returns {ReactNode}
-   */
-  renderTags?: ((value: Value[], getTagProps: AutocompleteRenderGetTagProps, ownerState: AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>) => React.ReactNode) | undefined;
   /**
    * Renders the selected value(s) as rich content in the input for both single and multiple selections.
    *

package/Autocomplete/Autocomplete.d.ts

@@ -71,15 +71,17 @@ export interface AutocompleteRenderInputParams {
   disabled: boolean;
   fullWidth: boolean;
   size: 'small' | undefined;
-  InputLabelProps: ReturnType<ReturnType<typeof useAutocomplete>['getInputLabelProps']>;
-  InputProps: {
-    ref: React.Ref<any>;
-    className: string;
-    startAdornment: React.ReactNode;
-    endAdornment: React.ReactNode;
-    onMouseDown: React.MouseEventHandler;
+  slotProps: {
+    inputLabel: ReturnType<ReturnType<typeof useAutocomplete>['getInputLabelProps']>;
+    input: {
+      ref: React.Ref<any>;
+      className: string;
+      startAdornment: React.ReactNode;
+      endAdornment: React.ReactNode;
+      onMouseDown: React.MouseEventHandler;
+    };
+    htmlInput: ReturnType<ReturnType<typeof useAutocomplete>['getInputProps']>;
   };
-  inputProps: ReturnType<ReturnType<typeof useAutocomplete>['getInputProps']>;
 }
 export interface AutocompletePropsSizeOverrides {}
 export interface AutocompleteSlots {
@@ -130,11 +132,6 @@ export type AutocompleteSlotsAndSlotProps<Value, Multiple extends boolean | unde
   popupIndicator: SlotProps<React.ElementType<Partial<IconButtonProps>>, {}, AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>>;
 }>;
 export interface AutocompleteProps<Value, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']> extends UseAutocompleteProps<Value, Multiple, DisableClearable, FreeSolo>, StandardProps<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'children'>, AutocompleteSlotsAndSlotProps<Value, Multiple, DisableClearable, FreeSolo, ChipComponent> {
-  /**
-   * Props applied to the [`Chip`](https://mui.com/material-ui/api/chip/) element.
-   * @deprecated Use `slotProps.chip` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  ChipProps?: ChipProps<ChipComponent> | undefined;
   /**
    * Override or extend the styles applied to the component.
    */
@@ -158,16 +155,6 @@ export interface AutocompleteProps<Value, Multiple extends boolean | undefined,
    * @default 'Close'
    */
   closeText?: string | undefined;
-  /**
-   * The props used for each slot inside.
-   * @deprecated Use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  componentsProps?: {
-    clearIndicator?: Partial<IconButtonProps> | undefined;
-    paper?: PaperProps | undefined;
-    popper?: Partial<PopperProps> | undefined;
-    popupIndicator?: Partial<IconButtonProps> | undefined;
-  } | undefined;
   /**
    * If `true`, the component is disabled.
    * @default false
@@ -196,20 +183,6 @@ export interface AutocompleteProps<Value, Multiple extends boolean | undefined,
    * @default (more) => `+${more}`
    */
   getLimitTagsText?: ((more: number) => React.ReactNode) | undefined;
-  /**
-   * The component used to render the listbox.
-   * @default 'ul'
-   * @deprecated Use `slotProps.listbox.component` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  ListboxComponent?: React.JSXElementConstructor<React.HTMLAttributes<HTMLElement>> | undefined;
-  /**
-   * Props applied to the Listbox element.
-   * @deprecated Use `slotProps.listbox` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  ListboxProps?: (ReturnType<ReturnType<typeof useAutocomplete>['getListboxProps']> & {
-    sx?: SxProps<Theme> | undefined;
-    ref?: React.Ref<Element> | undefined;
-  }) | undefined;
   /**
    * If `true`, the component is in a loading state.
    * This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, for example `options` are empty).
@@ -246,18 +219,6 @@ export interface AutocompleteProps<Value, Multiple extends boolean | undefined,
    * @default 'Open'
    */
   openText?: string | undefined;
-  /**
-   * The component used to render the body of the popup.
-   * @default Paper
-   * @deprecated Use `slots.paper` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  PaperComponent?: React.JSXElementConstructor<React.HTMLAttributes<HTMLElement>> | undefined;
-  /**
-   * The component used to position the popup.
-   * @default Popper
-   * @deprecated Use `slots.popper` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  PopperComponent?: React.JSXElementConstructor<PopperProps> | undefined;
   /**
    * The icon to display in place of the default popup icon.
    * @default <ArrowDropDownIcon />
@@ -301,17 +262,6 @@ export interface AutocompleteProps<Value, Multiple extends boolean | undefined,
   renderOption?: ((props: React.HTMLAttributes<HTMLLIElement> & {
     key: React.Key;
   }, option: Value, state: AutocompleteRenderOptionState, ownerState: AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>) => React.ReactNode) | undefined;
-  /**
-   * Render the selected value when doing multiple selections.
-   *
-   * @deprecated Use `renderValue` prop instead
-   *
-   * @param {Value[]} value The `value` provided to the component.
-   * @param {function} getTagProps A tag props getter.
-   * @param {object} ownerState The state of the Autocomplete component.
-   * @returns {ReactNode}
-   */
-  renderTags?: ((value: Value[], getTagProps: AutocompleteRenderGetTagProps, ownerState: AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>) => React.ReactNode) | undefined;
   /**
    * Renders the selected value(s) as rich content in the input for both single and multiple selections.
    *

package/Autocomplete/Autocomplete.js

@@ -417,7 +417,6 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     autoHighlight = false,
     autoSelect = false,
     blurOnSelect = false,
-    ChipProps: ChipPropsProp,
     className,
     clearIcon = _ClearIcon || (_ClearIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {
       fontSize: "small"
@@ -426,7 +425,6 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     clearOnEscape = false,
     clearText = 'Clear',
     closeText = 'Close',
-    componentsProps,
     defaultValue = props.multiple ? [] : null,
     disableClearable = false,
     disableCloseOnSelect = false,
@@ -450,8 +448,6 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     includeInputInList = false,
     inputValue: inputValueProp,
     limitTags = -1,
-    ListboxComponent: ListboxComponentProp,
-    ListboxProps: ListboxPropsProp,
     loading = false,
     loadingText = 'Loading…',
     multiple = false,
@@ -465,14 +461,11 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     openOnFocus = false,
     openText = 'Open',
     options,
-    PaperComponent: PaperComponentProp,
-    PopperComponent: PopperComponentProp,
     popupIcon = _ArrowDropDownIcon || (_ArrowDropDownIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowDropDown.default, {})),
     readOnly = false,
     renderGroup: renderGroupProp,
     renderInput,
     renderOption: renderOptionProp,
-    renderTags,
     renderValue,
     selectOnFocus = !props.freeSolo,
     size = 'medium',
@@ -535,17 +528,8 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   };
   const classes = useUtilityClasses(ownerState);
   const externalForwardedProps = {
-    slots: {
-      paper: PaperComponentProp,
-      popper: PopperComponentProp,
-      ...slots
-    },
-    slotProps: {
-      chip: ChipPropsProp,
-      listbox: ListboxPropsProp,
-      ...componentsProps,
-      ...slotProps
-    }
+    slots,
+    slotProps
   };
   const [RootSlot, rootProps] = (0, _useSlot.default)('root', {
     ref,
@@ -620,9 +604,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   });
   if (multiple) {
     if (value.length > 0) {
-      if (renderTags) {
-        startAdornment = renderTags(value, getCustomizedItemProps, ownerState);
-      } else if (renderValue) {
+      if (renderValue) {
         startAdornment = renderValue(value, getCustomizedItemProps, ownerState);
       } else {
         startAdornment = value.map((option, index) => {
@@ -701,35 +683,37 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
         disabled,
         fullWidth: props.fullWidth ?? true,
         size: size === 'small' ? 'small' : undefined,
-        InputLabelProps: getInputLabelProps(),
-        InputProps: {
-          ref: setAnchorEl,
-          className: classes.inputRoot,
-          startAdornment,
-          onMouseDown: event => {
-            if (event.target === event.currentTarget) {
-              handleInputMouseDown(event);
-            }
-          },
-          ...((hasClearIcon || hasPopupIcon) && {
-            endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsxs)(AutocompleteEndAdornment, {
-              className: classes.endAdornment,
-              ownerState: ownerState,
-              children: [hasClearIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ClearIndicatorSlot, {
-                ...clearIndicatorProps,
-                children: clearIcon
-              }) : null, hasPopupIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(PopupIndicatorSlot, {
-                ...popupIndicatorProps,
-                children: popupIcon
-              }) : null]
+        slotProps: {
+          inputLabel: getInputLabelProps(),
+          input: {
+            ref: setAnchorEl,
+            className: classes.inputRoot,
+            startAdornment,
+            onMouseDown: event => {
+              if (event.target === event.currentTarget) {
+                handleInputMouseDown(event);
+              }
+            },
+            ...((hasClearIcon || hasPopupIcon) && {
+              endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsxs)(AutocompleteEndAdornment, {
+                className: classes.endAdornment,
+                ownerState: ownerState,
+                children: [hasClearIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ClearIndicatorSlot, {
+                  ...clearIndicatorProps,
+                  children: clearIcon
+                }) : null, hasPopupIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(PopupIndicatorSlot, {
+                  ...popupIndicatorProps,
+                  children: popupIcon
+                }) : null]
+              })
             })
-          })
-        },
-        inputProps: {
-          className: classes.input,
-          disabled,
-          readOnly,
-          ...getInputProps()
+          },
+          htmlInput: {
+            className: classes.input,
+            disabled,
+            readOnly,
+            ...getInputProps()
+          }
         }
       })
     }), anchorEl ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompletePopper, {
@@ -752,7 +736,6 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
           },
           children: noOptionsText
         }) : null, groupedOptions.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ListboxSlot, {
-          as: ListboxComponentProp,
           ...listboxProps,
           children: groupedOptions.map((option, index) => {
             if (groupBy) {
@@ -806,11 +789,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * @default false
    */
   blurOnSelect: _propTypes.default.oneOfType([_propTypes.default.oneOf(['mouse', 'touch']), _propTypes.default.bool]),
-  /**
-   * Props applied to the [`Chip`](https://mui.com/material-ui/api/chip/) element.
-   * @deprecated Use `slotProps.chip` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  ChipProps: _propTypes.default.object,
   /**
    * Override or extend the styles applied to the component.
    */
@@ -851,16 +829,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * @default 'Close'
    */
   closeText: _propTypes.default.string,
-  /**
-   * The props used for each slot inside.
-   * @deprecated Use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  componentsProps: _propTypes.default.shape({
-    clearIndicator: _propTypes.default.object,
-    paper: _propTypes.default.object,
-    popper: _propTypes.default.object,
-    popupIndicator: _propTypes.default.object
-  }),
   /**
    * The default value. Use when the component is not controlled.
    * @default props.multiple ? [] : null
@@ -1009,17 +977,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * @default -1
    */
   limitTags: _integerPropType.default,
-  /**
-   * The component used to render the listbox.
-   * @default 'ul'
-   * @deprecated Use `slotProps.listbox.component` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  ListboxComponent: _propTypes.default.elementType,
-  /**
-   * Props applied to the Listbox element.
-   * @deprecated Use `slotProps.listbox` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  ListboxProps: _propTypes.default.object,
   /**
    * If `true`, the component is in a loading state.
    * This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, for example `options` are empty).
@@ -1109,18 +1066,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * A list of options that will be shown in the Autocomplete.
    */
   options: _propTypes.default.array.isRequired,
-  /**
-   * The component used to render the body of the popup.
-   * @default Paper
-   * @deprecated Use `slots.paper` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  PaperComponent: _propTypes.default.elementType,
-  /**
-   * The component used to position the popup.
-   * @default Popper
-   * @deprecated Use `slots.popper` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  PopperComponent: _propTypes.default.elementType,
   /**
    * The icon to display in place of the default popup icon.
    * @default <ArrowDropDownIcon />
@@ -1162,17 +1107,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * @returns {ReactNode}
    */
   renderOption: _propTypes.default.func,
-  /**
-   * Render the selected value when doing multiple selections.
-   *
-   * @deprecated Use `renderValue` prop instead
-   *
-   * @param {Value[]} value The `value` provided to the component.
-   * @param {function} getTagProps A tag props getter.
-   * @param {object} ownerState The state of the Autocomplete component.
-   * @returns {ReactNode}
-   */
-  renderTags: _propTypes.default.func,
   /**
    * Renders the selected value(s) as rich content in the input for both single and multiple selections.
    *