@mui/material 5.5.2 → 5.6.1

package/Autocomplete/autocompleteClasses.d.ts

@@ -1,54 +1,54 @@
-export interface AutocompleteClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `fullWidth={true}`. */
-    fullWidth: string;
-    /** State 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 declare type AutocompleteClassKey = keyof AutocompleteClasses;
-export declare function getAutocompleteUtilityClass(slot: string): string;
-declare const autocompleteClasses: AutocompleteClasses;
-export default autocompleteClasses;
+export interface AutocompleteClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `fullWidth={true}`. */
+    fullWidth: string;
+    /** State 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 declare type AutocompleteClassKey = keyof AutocompleteClasses;
+export declare function getAutocompleteUtilityClass(slot: string): string;
+declare const autocompleteClasses: AutocompleteClasses;
+export default autocompleteClasses;

package/Avatar/Avatar.d.ts

@@ -63,11 +63,11 @@ export interface AvatarTypeMap<P = {}, D extends React.ElementType = 'div'> {
  *
  * Demos:
  *
- * - [Avatars](https://mui.com/components/avatars/)
+ * - [Avatars](https://mui.com/material-ui/react-avatar/)
  *
  * API:
  *
- * - [Avatar API](https://mui.com/api/avatar/)
+ * - [Avatar API](https://mui.com/material-ui/api/avatar/)
  */
 declare const Avatar: OverridableComponent<AvatarTypeMap>;
 

package/Avatar/avatarClasses.d.ts

@@ -1,20 +1,20 @@
-export interface AvatarClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if not `src` or `srcSet`. */
-    colorDefault: string;
-    /** Styles applied to the root element if `variant="circular"`. */
-    circular: string;
-    /** Styles applied to the root element if `variant="rounded"`. */
-    rounded: string;
-    /** Styles applied to the root element if `variant="square"`. */
-    square: string;
-    /** Styles applied to the img element if either `src` or `srcSet` is defined. */
-    img: string;
-    /** Styles applied to the fallback icon */
-    fallback: string;
-}
-export declare type AvatarClassKey = keyof AvatarClasses;
-export declare function getAvatarUtilityClass(slot: string): string;
-declare const avatarClasses: AvatarClasses;
-export default avatarClasses;
+export interface AvatarClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if not `src` or `srcSet`. */
+    colorDefault: string;
+    /** Styles applied to the root element if `variant="circular"`. */
+    circular: string;
+    /** Styles applied to the root element if `variant="rounded"`. */
+    rounded: string;
+    /** Styles applied to the root element if `variant="square"`. */
+    square: string;
+    /** Styles applied to the img element if either `src` or `srcSet` is defined. */
+    img: string;
+    /** Styles applied to the fallback icon */
+    fallback: string;
+}
+export declare type AvatarClassKey = keyof AvatarClasses;
+export declare function getAvatarUtilityClass(slot: string): string;
+declare const avatarClasses: AvatarClasses;
+export default avatarClasses;

package/AvatarGroup/AvatarGroup.d.ts

@@ -58,10 +58,10 @@ export interface AvatarGroupProps extends StandardProps<React.HTMLAttributes<HTM
  *
  * Demos:
  *
- * - [Avatars](https://mui.com/components/avatars/)
+ * - [Avatars](https://mui.com/material-ui/react-avatar/)
  *
  * API:
  *
- * - [AvatarGroup API](https://mui.com/api/avatar-group/)
+ * - [AvatarGroup API](https://mui.com/material-ui/api/avatar-group/)
  */
 export default function AvatarGroup(props: AvatarGroupProps): JSX.Element;

package/AvatarGroup/avatarGroupClasses.d.ts

@@ -1,10 +1,10 @@
-export interface AvatarGroupClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the avatar elements. */
-    avatar: string;
-}
-export declare type AvatarGroupClassKey = keyof AvatarGroupClasses;
-export declare function getAvatarGroupUtilityClass(slot: string): string;
-declare const avatarGroupClasses: AvatarGroupClasses;
-export default avatarGroupClasses;
+export interface AvatarGroupClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the avatar elements. */
+    avatar: string;
+}
+export declare type AvatarGroupClassKey = keyof AvatarGroupClasses;
+export declare function getAvatarGroupUtilityClass(slot: string): string;
+declare const avatarGroupClasses: AvatarGroupClasses;
+export default avatarGroupClasses;

package/Backdrop/Backdrop.d.ts

@@ -1,21 +1,45 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { ExtendBackdropUnstyledTypeMap, BackdropUnstyledTypeMap } from '@mui/base/BackdropUnstyled';
 import { FadeProps } from '../Fade';
 import { TransitionProps } from '../transitions/transition';
 import { Theme } from '../styles';
+import { BackdropClasses } from './backdropClasses';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
-export type BackdropTypeMap<
-  D extends React.ElementType = 'span',
-  P = {},
-> = ExtendBackdropUnstyledTypeMap<{
+export interface BackdropComponentsPropsOverrides {}
+
+export interface BackdropTypeMap<P = {}, D extends React.ElementType = 'div'> {
   props: P &
     Partial<Omit<FadeProps, 'children'>> & {
+      /**
+       * The content of the component.
+       */
+      children?: React.ReactNode;
+      /**
+       * The components used for each slot inside the Backdrop.
+       * Either a string to use a HTML element or a component.
+       * @default {}
+       */
+      components?: {
+        Root?: React.ElementType;
+      };
+      /**
+       * The props used for each slot inside the Backdrop.
+       * @default {}
+       */
+      componentsProps?: {
+        root?: React.HTMLAttributes<HTMLDivElement> & BackdropComponentsPropsOverrides;
+      };
       /**
        * Override or extend the styles applied to the component.
        */
-      classes?: BackdropUnstyledTypeMap['props']['classes'];
+      classes?: Partial<BackdropClasses>;
+      /**
+       * If `true`, the backdrop is invisible.
+       * It can be used when rendering a popover or a custom select component.
+       * @default false
+       */
+      invisible?: boolean;
       /**
        * If `true`, the component is shown.
        */
@@ -31,35 +55,28 @@ export type BackdropTypeMap<
       transitionDuration?: TransitionProps['timeout'];
     };
   defaultComponent: D;
-}>;
+}
 
 type BackdropRootProps = NonNullable<BackdropTypeMap['props']['componentsProps']>['root'];
 
 export const BackdropRoot: React.FC<BackdropRootProps>;
 
-export type BackdropClassKey = keyof NonNullable<BackdropTypeMap['props']['classes']>;
-
 /**
  *
  * Demos:
  *
- * - [Backdrop](https://mui.com/components/backdrop/)
+ * - [Backdrop](https://mui.com/material-ui/react-backdrop/)
  *
  * API:
  *
- * - [Backdrop API](https://mui.com/api/backdrop/)
- * - inherits [Fade API](https://mui.com/api/fade/)
+ * - [Backdrop API](https://mui.com/material-ui/api/backdrop/)
+ * - inherits [Fade API](https://mui.com/material-ui/api/fade/)
  */
-
 declare const Backdrop: OverridableComponent<BackdropTypeMap>;
 
-export type BackdropClasses = Record<BackdropClassKey, string>;
-
-export const backdropClasses: BackdropClasses;
-
 export type BackdropProps<
   D extends React.ElementType = BackdropTypeMap['defaultComponent'],
   P = {},
-> = OverrideProps<BackdropTypeMap<D, P>, D>;
+> = OverrideProps<BackdropTypeMap<P, D>, D>;
 
 export default Backdrop;

package/Backdrop/Backdrop.js

@@ -1,21 +1,25 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "components", "componentsProps", "className", "invisible", "open", "transitionDuration", "TransitionComponent"];
+const _excluded = ["children", "component", "components", "componentsProps", "className", "invisible", "open", "transitionDuration", "TransitionComponent"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { isHostComponent } from '@mui/base';
-import BackdropUnstyled, { backdropUnstyledClasses } from '@mui/base/BackdropUnstyled';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/base';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import Fade from '../Fade';
+import { getBackdropUtilityClass } from './backdropClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const backdropClasses = backdropUnstyledClasses;
 
-const extendUtilityClasses = ownerState => {
+const useUtilityClasses = ownerState => {
   const {
-    classes
+    classes,
+    invisible
   } = ownerState;
-  return classes;
+  const slots = {
+    root: ['root', invisible && 'invisible']
+  };
+  return composeClasses(slots, getBackdropUtilityClass, classes);
 };
 
 const BackdropRoot = styled('div', {
@@ -44,7 +48,7 @@ const BackdropRoot = styled('div', {
   backgroundColor: 'transparent'
 }));
 const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
-  var _componentsProps$root;
+  var _components$Root, _componentsProps$root;
 
   const props = useThemeProps({
     props: inProps,
@@ -53,6 +57,7 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
 
   const {
     children,
+    component = 'div',
     components = {},
     componentsProps = {},
     className,
@@ -65,25 +70,20 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const ownerState = _extends({}, props, {
+    component,
     invisible
   });
 
-  const classes = extendUtilityClasses(ownerState);
+  const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(TransitionComponent, _extends({
     in: open,
     timeout: transitionDuration
   }, other, {
-    children: /*#__PURE__*/_jsx(BackdropUnstyled, {
-      className: className,
-      invisible: invisible,
-      components: _extends({
-        Root: BackdropRoot
-      }, components),
-      componentsProps: {
-        root: _extends({}, componentsProps.root, (!components.Root || !isHostComponent(components.Root)) && {
-          ownerState: _extends({}, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState)
-        })
-      },
+    children: /*#__PURE__*/_jsx(BackdropRoot, {
+      "aria-hidden": true,
+      as: (_components$Root = components.Root) != null ? _components$Root : component,
+      className: clsx(classes.root, className),
+      ownerState: _extends({}, ownerState, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState),
       classes: classes,
       ref: ref,
       children: children
@@ -113,6 +113,12 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes
    */
   className: PropTypes.string,
 
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+
   /**
    * The components used for each slot inside the Backdrop.
    * Either a string to use a HTML element or a component.

package/Backdrop/backdropClasses.d.ts

@@ -0,0 +1,10 @@
+export interface BackdropClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `invisible={true}`. */
+    invisible: string;
+}
+export declare type BackdropClassKey = keyof BackdropClasses;
+export declare function getBackdropUtilityClass(slot: string): string;
+declare const backdropClasses: BackdropClasses;
+export default backdropClasses;

package/Backdrop/backdropClasses.js

@@ -0,0 +1,6 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
+export function getBackdropUtilityClass(slot) {
+  return generateUtilityClass('MuiBackdrop', slot);
+}
+const backdropClasses = generateUtilityClasses('MuiBackdrop', ['root', 'invisible']);
+export default backdropClasses;

package/Backdrop/index.d.ts

@@ -1,2 +1,5 @@
 export { default } from './Backdrop';
 export * from './Backdrop';
+
+export { default as backdropClasses } from './backdropClasses';
+export * from './backdropClasses';

package/Backdrop/index.js

@@ -1,2 +1,3 @@
 export { default } from './Backdrop';
-export * from './Backdrop';
+export { default as backdropClasses } from './backdropClasses';
+export * from './backdropClasses';

package/Badge/Badge.d.ts

@@ -1,23 +1,37 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { OverridableStringUnion } from '@mui/types';
-import { ExtendBadgeUnstyledTypeMap, BadgeUnstyledTypeMap } from '@mui/base/BadgeUnstyled';
+import { ExtendBadgeUnstyledTypeMap } from '@mui/base/BadgeUnstyled';
 import { Theme } from '../styles';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
+import { BadgeClasses } from './badgeClasses';
 
 export interface BadgePropsVariantOverrides {}
 
 export interface BadgePropsColorOverrides {}
 
+export interface BadgeOrigin {
+  vertical: 'top' | 'bottom';
+  horizontal: 'left' | 'right';
+}
+
 export type BadgeTypeMap<
   D extends React.ElementType = 'span',
   P = {},
 > = ExtendBadgeUnstyledTypeMap<{
   props: P & {
+    /**
+     * The anchor of the badge.
+     * @default {
+     *   vertical: 'top',
+     *   horizontal: 'right',
+     * }
+     */
+    anchorOrigin?: BadgeOrigin;
     /**
      * Override or extend the styles applied to the component.
      */
-    classes?: BadgeUnstyledTypeMap['props']['classes'] & {
+    classes?: Partial<BadgeClasses> & {
       /** Styles applied to the badge `span` element if `color="primary"`. */
       colorPrimary?: string;
       /** Styles applied to the badge `span` element if `color="secondary"`. */
@@ -52,7 +66,13 @@ export type BadgeTypeMap<
       overlapCircular?: string;
     };
     /**
-     * The color of the component. It supports those theme colors that make sense for this component.
+     * @ignore
+     */
+    className?: string;
+    /**
+     * The color of the component.
+     * It supports both default and custom theme colors, which can be added as shown in the
+     * [palette customization guide](https://mui.com/material-ui/customization/palette/#adding-new-colors).
      * @default 'default'
      */
     color?: OverridableStringUnion<
@@ -83,25 +103,20 @@ type BadgeBadgeProps = NonNullable<BadgeTypeMap['props']['componentsProps']>['ba
 export const BadgeRoot: React.FC<BadgeRootProps>;
 export const BadgeMark: React.FC<BadgeBadgeProps>;
 
-export type BadgeClassKey = keyof NonNullable<BadgeTypeMap['props']['classes']>;
 /**
  *
  * Demos:
  *
- * - [Avatars](https://mui.com/components/avatars/)
- * - [Badges](https://mui.com/components/badges/)
+ * - [Avatars](https://mui.com/material-ui/react-avatar/)
+ * - [Badges](https://mui.com/material-ui/react-badge/)
  *
  * API:
  *
- * - [Badge API](https://mui.com/api/badge/)
- * - inherits [BadgeUnstyled API](https://mui.com/api/badge-unstyled/)
+ * - [Badge API](https://mui.com/material-ui/api/badge/)
+ * - inherits [BadgeUnstyled API](https://mui.com/base/api/badge-unstyled/)
  */
 declare const Badge: OverridableComponent<BadgeTypeMap>;
 
-export type BadgeClasses = Record<BadgeClassKey, string>;
-
-export const badgeClasses: BadgeClasses;
-
 export type BadgeProps<
   D extends React.ElementType = BadgeTypeMap['defaultComponent'],
   P = {},