@mui/material 6.0.0-alpha.1 → 6.0.0-alpha.11

package/Alert/alertClasses.d.ts

@@ -18,73 +18,73 @@ export interface AlertClasses {
     /** Styles applied to the root element if `variant="standard"` and `color="success"`.
      * @deprecated Combine the [.MuiAlert-standard](/material-ui/api/alert/#alert-classes-standard)
      * and [.MuiAlert-colorSuccess](/material-ui/api/alert/#alert-classes-colorSuccess) classes instead.
-     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     standardSuccess: string;
     /** Styles applied to the root element if `variant="standard"` and `color="info"`.
      * @deprecated Combine the [.MuiAlert-standard](/material-ui/api/alert/#alert-classes-standard)
      * and [.MuiAlert-colorInfo](/material-ui/api/alert/#alert-classes-colorInfo) classes instead.
-     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     standardInfo: string;
     /** Styles applied to the root element if `variant="standard"` and `color="warning"`.
      * @deprecated Combine the [.MuiAlert-standard](/material-ui/api/alert/#alert-classes-standard)
      * and [.MuiAlert-colorWarning](/material-ui/api/alert/#alert-classes-colorWarning) classes instead.
-     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     standardWarning: string;
     /** Styles applied to the root element if `variant="standard"` and `color="error"`.
      * @deprecated Combine the [.MuiAlert-standard](/material-ui/api/alert/#alert-classes-standard)
      * and [.MuiAlert-colorError](/material-ui/api/alert/#alert-classes-colorError) classes instead.
-     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     standardError: string;
     /** Styles applied to the root element if `variant="outlined"` and `color="success"`.
      * @deprecated Combine the [.MuiAlert-outlined](/material-ui/api/alert/#alert-classes-outlined)
      * and [.MuiAlert-colorSuccess](/material-ui/api/alert/#alert-classes-colorSuccess) classes instead.
-     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     outlinedSuccess: string;
     /** Styles applied to the root element if `variant="outlined"` and `color="info"`.
      * @deprecated Combine the [.MuiAlert-outlined](/material-ui/api/alert/#alert-classes-outlined)
      * and [.MuiAlert-colorInfo](/material-ui/api/alert/#alert-classes-colorInfo) classes instead.
-     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     outlinedInfo: string;
     /** Styles applied to the root element if `variant="outlined"` and `color="warning"`.
      * @deprecated Combine the [.MuiAlert-outlined](/material-ui/api/alert/#alert-classes-outlined)
      * and [.MuiAlert-colorWarning](/material-ui/api/alert/#alert-classes-colorWarning) classes instead.
-     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     outlinedWarning: string;
     /** Styles applied to the root element if `variant="outlined"` and `color="error"`.
      * @deprecated Combine the [.MuiAlert-outlined](/material-ui/api/alert/#alert-classes-outlined)
      * and [.MuiAlert-colorError](/material-ui/api/alert/#alert-classes-colorError) classes instead.
-     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     outlinedError: string;
     /** Styles applied to the root element if `variant="filled"` and `color="success"`.
      * @deprecated Combine the [.MuiAlert-filled](/material-ui/api/alert/#alert-classes-filled)
      * and [.MuiAlert-colorSuccess](/material-ui/api/alert/#alert-classes-colorSuccess) classes instead.
-     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     filledSuccess: string;
     /** Styles applied to the root element if `variant="filled"` and `color="info"`.
      * @deprecated Combine the [.MuiAlert-filled](/material-ui/api/alert/#alert-classes-filled)
      * and [.MuiAlert-colorInfo](/material-ui/api/alert/#alert-classes-colorInfo) classes instead.
-     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     filledInfo: string;
     /** Styles applied to the root element if `variant="filled"` and `color="warning"`
      * @deprecated Combine the [.MuiAlert-filled](/material-ui/api/alert/#alert-classes-filled)
      * and [.MuiAlert-colorWarning](/material-ui/api/alert/#alert-classes-colorWarning) classes instead.
-     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     filledWarning: string;
     /** Styles applied to the root element if `variant="filled"` and `color="error"`.
      * @deprecated Combine the [.MuiAlert-filled](/material-ui/api/alert/#alert-classes-filled)
      * and [.MuiAlert-colorError](/material-ui/api/alert/#alert-classes-colorError) classes instead.
-     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     filledError: string;
     /** Styles applied to the icon wrapper element. */

package/AlertTitle/AlertTitle.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { InternalStandardProps as StandardProps, Theme } from '..';
+import { Theme, TypographyProps } from '..';
 import { AlertTitleClasses } from './alertTitleClasses';
 
-export interface AlertTitleProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
+export interface AlertTitleProps extends TypographyProps<'div'> {
   /**
    * The content of the component.
    */
@@ -22,11 +22,11 @@ export interface AlertTitleProps extends StandardProps<React.HTMLAttributes<HTML
  *
  * Demos:
  *
- * - [Alert](https://mui.com/material-ui/react-alert/)
+ * - [Alert](https://next.mui.com/material-ui/react-alert/)
  *
  * API:
  *
- * - [AlertTitle API](https://mui.com/material-ui/api/alert-title/)
- * - inherits [Typography API](https://mui.com/material-ui/api/typography/)
+ * - [AlertTitle API](https://next.mui.com/material-ui/api/alert-title/)
+ * - inherits [Typography API](https://next.mui.com/material-ui/api/typography/)
  */
-export default function AlertTitle(props: AlertTitleProps): JSX.Element;
+export default function AlertTitle(props: AlertTitleProps): React.JSX.Element;

package/AlertTitle/AlertTitle.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -39,18 +36,19 @@ const AlertTitle = /*#__PURE__*/React.forwardRef(function AlertTitle(inProps, re
     name: 'MuiAlertTitle'
   });
   const {
-      className
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    className,
+    ...other
+  } = props;
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(AlertTitleRoot, _extends({
+  return /*#__PURE__*/_jsx(AlertTitleRoot, {
     gutterBottom: true,
     component: "div",
     ownerState: ownerState,
     ref: ref,
-    className: clsx(classes.root, className)
-  }, other));
+    className: clsx(classes.root, className),
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? AlertTitle.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/AppBar/AppBar.d.ts

@@ -56,12 +56,12 @@ export type AppBarTypeMap<
  *
  * Demos:
  *
- * - [App Bar](https://mui.com/material-ui/react-app-bar/)
+ * - [App Bar](https://next.mui.com/material-ui/react-app-bar/)
  *
  * API:
  *
- * - [AppBar API](https://mui.com/material-ui/api/app-bar/)
- * - inherits [Paper API](https://mui.com/material-ui/api/paper/)
+ * - [AppBar API](https://next.mui.com/material-ui/api/app-bar/)
+ * - inherits [Paper API](https://next.mui.com/material-ui/api/paper/)
  */
 
 declare const AppBar: OverridableComponent<AppBarTypeMap>;

package/AppBar/AppBar.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "color", "enableColorOnDark", "position"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -77,7 +74,6 @@ const AppBarRoot = styled(Paper, {
       position: 'sticky'
     },
     style: {
-      // ⚠️ sticky is not supported by IE11.
       position: 'sticky',
       zIndex: (theme.vars || theme).zIndex.appBar,
       top: 0,
@@ -109,14 +105,15 @@ const AppBarRoot = styled(Paper, {
     props: {
       color: 'default'
     },
-    style: _extends({
+    style: {
       '--AppBar-background': theme.vars ? theme.vars.palette.AppBar.defaultBg : theme.palette.grey[100],
-      '--AppBar-color': theme.vars ? theme.vars.palette.text.primary : theme.palette.getContrastText(theme.palette.grey[100])
-    }, theme.applyStyles('dark', {
-      '--AppBar-background': theme.vars ? theme.vars.palette.AppBar.defaultBg : theme.palette.grey[900],
-      '--AppBar-color': theme.vars ? theme.vars.palette.text.primary : theme.palette.getContrastText(theme.palette.grey[900])
-    }))
-  }, ...Object.keys((theme.vars ?? theme).palette).filter(key => (theme.vars ?? theme).palette[key].main && (theme.vars ?? theme).palette[key].contrastText).map(color => ({
+      '--AppBar-color': theme.vars ? theme.vars.palette.text.primary : theme.palette.getContrastText(theme.palette.grey[100]),
+      ...theme.applyStyles('dark', {
+        '--AppBar-background': theme.vars ? theme.vars.palette.AppBar.defaultBg : theme.palette.grey[900],
+        '--AppBar-color': theme.vars ? theme.vars.palette.text.primary : theme.palette.getContrastText(theme.palette.grey[900])
+      })
+    }
+  }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main && palette.contrastText).map(([color]) => ({
     props: {
       color
     },
@@ -136,25 +133,27 @@ const AppBarRoot = styled(Paper, {
     props: {
       enableColorOnDark: false
     },
-    style: _extends({
+    style: {
       backgroundColor: 'var(--AppBar-background)',
-      color: 'var(--AppBar-color)'
-    }, theme.applyStyles('dark', {
-      backgroundColor: theme.vars ? joinVars(theme.vars.palette.AppBar.darkBg, 'var(--AppBar-background)') : null,
-      color: theme.vars ? joinVars(theme.vars.palette.AppBar.darkColor, 'var(--AppBar-color)') : null
-    }))
+      color: 'var(--AppBar-color)',
+      ...theme.applyStyles('dark', {
+        backgroundColor: theme.vars ? joinVars(theme.vars.palette.AppBar.darkBg, 'var(--AppBar-background)') : null,
+        color: theme.vars ? joinVars(theme.vars.palette.AppBar.darkColor, 'var(--AppBar-color)') : null
+      })
+    }
   }, {
     props: {
       color: 'transparent'
     },
-    style: _extends({
+    style: {
       '--AppBar-background': 'transparent',
       '--AppBar-color': 'inherit',
       backgroundColor: 'var(--AppBar-background)',
-      color: 'var(--AppBar-color)'
-    }, theme.applyStyles('dark', {
-      backgroundImage: 'none'
-    }))
+      color: 'var(--AppBar-color)',
+      ...theme.applyStyles('dark', {
+        backgroundImage: 'none'
+      })
+    }
   }]
 }));
 const AppBar = /*#__PURE__*/React.forwardRef(function AppBar(inProps, ref) {
@@ -163,26 +162,28 @@ const AppBar = /*#__PURE__*/React.forwardRef(function AppBar(inProps, ref) {
     name: 'MuiAppBar'
   });
   const {
-      className,
-      color = 'primary',
-      enableColorOnDark = false,
-      position = 'fixed'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    className,
+    color = 'primary',
+    enableColorOnDark = false,
+    position = 'fixed',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     color,
     position,
     enableColorOnDark
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(AppBarRoot, _extends({
+  return /*#__PURE__*/_jsx(AppBarRoot, {
     square: true,
     component: "header",
     ownerState: ownerState,
     elevation: 4,
     className: clsx(classes.root, className, position === 'fixed' && 'mui-fixed'),
-    ref: ref
-  }, other));
+    ref: ref,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? AppBar.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/Autocomplete/Autocomplete.d.ts

@@ -17,6 +17,7 @@ import { ChipProps, ChipTypeMap } from '@mui/material/Chip';
 import { PaperProps } from '@mui/material/Paper';
 import { PopperProps } from '@mui/material/Popper';
 import { AutocompleteClasses } from './autocompleteClasses';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
 export {
   AutocompleteChangeDetails,
@@ -84,6 +85,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,9 +161,11 @@ 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.
+   * @deprecated Use `slotProps.chip` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   ChipProps?: ChipProps<ChipComponent>;
   /**
@@ -121,7 +193,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>;
@@ -160,10 +232,12 @@ export interface AutocompleteProps<
   /**
    * The component used to render the listbox.
    * @default 'ul'
+   * @deprecated Use `slots.listbox` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   ListboxComponent?: React.JSXElementConstructor<React.HTMLAttributes<HTMLElement>>;
   /**
    * Props applied to the Listbox element.
+   * @deprecated Use `slotProps.listbox` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   ListboxProps?: ReturnType<ReturnType<typeof useAutocomplete>['getListboxProps']> & {
     sx?: SxProps<Theme>;
@@ -208,11 +282,13 @@ export interface AutocompleteProps<
   /**
    * The component used to render the body of the popup.
    * @default Paper
+   * @deprecated Use `slots.paper` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   PaperComponent?: React.JSXElementConstructor<React.HTMLAttributes<HTMLElement>>;
   /**
    * The component used to position the popup.
    * @default Popper
+   * @deprecated Use `slots.popper` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   PopperComponent?: React.JSXElementConstructor<PopperProps>;
   /**
@@ -272,16 +348,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.
    */
@@ -292,11 +358,11 @@ export interface AutocompleteProps<
  *
  * Demos:
  *
- * - [Autocomplete](https://mui.com/material-ui/react-autocomplete/)
+ * - [Autocomplete](https://next.mui.com/material-ui/react-autocomplete/)
  *
  * API:
  *
- * - [Autocomplete API](https://mui.com/material-ui/api/autocomplete/)
+ * - [Autocomplete API](https://next.mui.com/material-ui/api/autocomplete/)
  */
 export default function Autocomplete<
   Value,
@@ -306,4 +372,4 @@ export default function Autocomplete<
   ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
 >(
   props: AutocompleteProps<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>,
-): JSX.Element;
+): React.JSX.Element;