@mui/material 7.0.0-alpha.0 → 7.0.0-alpha.1

package/Drawer/Drawer.d.ts

@@ -1,13 +1,74 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { InternalStandardProps as StandardProps, Theme } from '..';
-import { ModalProps } from '../Modal';
-import { SlideProps } from '../Slide';
-import { PaperProps } from '../Paper';
-import { TransitionProps } from '../transitions/transition';
-import { DrawerClasses } from './drawerClasses';
-
-export interface DrawerProps extends StandardProps<ModalProps, 'open' | 'children'> {
+import { InternalStandardProps as StandardProps, Theme } from "../index.js";
+import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.js";
+import { ModalProps } from "../Modal/index.js";
+import { BackdropProps } from "../Backdrop/index.js";
+import { SlideProps } from "../Slide/index.js";
+import { PaperProps } from "../Paper/index.js";
+import { TransitionProps } from "../transitions/transition.js";
+import { DrawerClasses } from "./drawerClasses.js";
+export interface DrawerRootSlotPropsOverrides {}
+export interface DrawerDockedSlotPropsOverrides {}
+export interface DrawerPaperSlotPropsOverrides {}
+export interface DrawerTransitionSlotPropsOverrides {}
+export interface DrawerBackdropSlotPropsOverrides {}
+export interface DrawerSlots {
+  /**
+   * The component used for the root when the variant is `temporary`.
+   * @default Modal
+   */
+  root: React.ElementType;
+  /**
+   * The component used for the Modal backdrop.
+   * @default Backdrop
+   */
+  backdrop: React.ElementType;
+  /**
+   * The component used for the root element when the variant is `permanent` or `persistent`.
+   * @default div
+   */
+  docked: React.ElementType;
+  /**
+   * The component used for the paper.
+   * @default Paper
+   */
+  paper: React.ElementType;
+  /**
+   * The component used for the transition.
+   * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * @default Slide
+   */
+  transition: React.ElementType;
+}
+export type DrawerSlotsAndSlotProps = CreateSlotsAndSlotProps<DrawerSlots, {
+  /**
+   * Props forwarded to the root slot.
+   * By default, the avaible props are based on the [Modal](https://mui.com/material-ui/api/modal/#props) component.
+   */
+  root: SlotProps<React.ElementType<ModalProps>, DrawerRootSlotPropsOverrides, DrawerOwnerState>;
+  /**
+   * Props forwarded to the backdrop slot.
+   * By default, the avaible props are based on the [Backdrop](https://mui.com/material-ui/api/backdrop/#props) component.
+   */
+  backdrop: SlotProps<React.ElementType<BackdropProps>, DrawerBackdropSlotPropsOverrides, DrawerOwnerState>;
+  /**
+   * Props forwarded to the docked slot.
+   * By default, the avaible props are based on a div element.
+   */
+  docked: SlotProps<'div', DrawerDockedSlotPropsOverrides, DrawerOwnerState>;
+  /**
+   * Props forwarded to the paper slot.
+   * By default, the avaible props are based on the [Paper](https://mui.com/material-ui/api/paper/#props) component.
+   */
+  paper: SlotProps<React.ElementType<PaperProps>, DrawerPaperSlotPropsOverrides, DrawerOwnerState>;
+  /**
+   * Props forwarded to the transition slot.
+   * By default, the avaible props are based on the [Slide](https://mui.com/material-ui/api/slide/#props) component.
+   */
+  transition: SlotProps<React.ElementType, TransitionProps & DrawerTransitionSlotPropsOverrides, DrawerOwnerState>;
+}>;
+export interface DrawerProps extends StandardProps<ModalProps, 'open' | 'children' | 'slots' | 'slotProps'>, DrawerSlotsAndSlotProps {
   /**
    * Side from which the drawer will appear.
    * @default 'left'
@@ -46,11 +107,13 @@ export interface DrawerProps extends StandardProps<ModalProps, 'open' | 'childre
   open?: boolean;
   /**
    * Props applied to the [`Paper`](https://mui.com/material-ui/api/paper/) element.
+   * @deprecated use the `slotProps.paper` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default {}
    */
   PaperProps?: Partial<PaperProps<React.ElementType>>;
   /**
    * Props applied to the [`Slide`](https://mui.com/material-ui/api/slide/) element.
+   * @deprecated use the `slotProps.transition` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   SlideProps?: Partial<SlideProps>;
   /**
@@ -73,6 +136,9 @@ export interface DrawerProps extends StandardProps<ModalProps, 'open' | 'childre
   variant?: 'permanent' | 'persistent' | 'temporary';
 }
 
+// omit `slots` and `slotProps` to prevent recusion
+export interface DrawerOwnerState extends Omit<DrawerProps, 'slots' | 'slotProps'> {}
+
 /**
  * The props of the [Modal](https://next.mui.com/material-ui/api/modal/) component are available
  * when `variant="temporary"` is set.
@@ -85,4 +151,4 @@ export interface DrawerProps extends StandardProps<ModalProps, 'open' | 'childre
  *
  * - [Drawer API](https://next.mui.com/material-ui/api/drawer/)
  */
-export default function Drawer(props: DrawerProps): React.JSX.Element;
+export default function Drawer(props: DrawerProps): React.JSX.Element;

package/Drawer/Drawer.js

@@ -1,21 +1,32 @@
+"use strict";
 'use client';
 
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import integerPropType from '@mui/utils/integerPropType';
-import composeClasses from '@mui/utils/composeClasses';
-import { useRtl } from '@mui/system/RtlProvider';
-import Modal from "../Modal/index.js";
-import Slide from "../Slide/index.js";
-import Paper from "../Paper/index.js";
-import capitalize from "../utils/capitalize.js";
-import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
-import { styled, useTheme } from "../zero-styled/index.js";
-import memoTheme from "../utils/memoTheme.js";
-import { useDefaultProps } from "../DefaultPropsProvider/index.js";
-import { getDrawerUtilityClass } from "./drawerClasses.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.getAnchor = getAnchor;
+exports.isHorizontal = isHorizontal;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _integerPropType = _interopRequireDefault(require("@mui/utils/integerPropType"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _RtlProvider = require("@mui/system/RtlProvider");
+var _Modal = _interopRequireDefault(require("../Modal"));
+var _Slide = _interopRequireDefault(require("../Slide"));
+var _Paper = _interopRequireDefault(require("../Paper"));
+var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
+var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
+var _zeroStyled = require("../zero-styled");
+var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
+var _drawerClasses = require("./drawerClasses");
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
+var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 const overridesResolver = (props, styles) => {
   const {
     ownerState
@@ -29,24 +40,24 @@ const useUtilityClasses = ownerState => {
     variant
   } = ownerState;
   const slots = {
-    root: ['root', `anchor${capitalize(anchor)}`],
+    root: ['root', `anchor${(0, _capitalize.default)(anchor)}`],
     docked: [(variant === 'permanent' || variant === 'persistent') && 'docked'],
     modal: ['modal'],
-    paper: ['paper', `paperAnchor${capitalize(anchor)}`, variant !== 'temporary' && `paperAnchorDocked${capitalize(anchor)}`]
+    paper: ['paper', `paperAnchor${(0, _capitalize.default)(anchor)}`, variant !== 'temporary' && `paperAnchorDocked${(0, _capitalize.default)(anchor)}`]
   };
-  return composeClasses(slots, getDrawerUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _drawerClasses.getDrawerUtilityClass, classes);
 };
-const DrawerRoot = styled(Modal, {
+const DrawerRoot = (0, _zeroStyled.styled)(_Modal.default, {
   name: 'MuiDrawer',
   slot: 'Root',
   overridesResolver
-})(memoTheme(({
+})((0, _memoTheme.default)(({
   theme
 }) => ({
   zIndex: (theme.vars || theme).zIndex.drawer
 })));
-const DrawerDockedRoot = styled('div', {
-  shouldForwardProp: rootShouldForwardProp,
+const DrawerDockedRoot = (0, _zeroStyled.styled)('div', {
+  shouldForwardProp: _rootShouldForwardProp.default,
   name: 'MuiDrawer',
   slot: 'Docked',
   skipVariantsResolver: false,
@@ -54,16 +65,16 @@ const DrawerDockedRoot = styled('div', {
 })({
   flex: '0 0 auto'
 });
-const DrawerPaper = styled(Paper, {
+const DrawerPaper = (0, _zeroStyled.styled)(_Paper.default, {
   name: 'MuiDrawer',
   slot: 'Paper',
   overridesResolver: (props, styles) => {
     const {
       ownerState
     } = props;
-    return [styles.paper, styles[`paperAnchor${capitalize(ownerState.anchor)}`], ownerState.variant !== 'temporary' && styles[`paperAnchorDocked${capitalize(ownerState.anchor)}`]];
+    return [styles.paper, styles[`paperAnchor${(0, _capitalize.default)(ownerState.anchor)}`], ownerState.variant !== 'temporary' && styles[`paperAnchorDocked${(0, _capitalize.default)(ownerState.anchor)}`]];
   }
-})(memoTheme(({
+})((0, _memoTheme.default)(({
   theme
 }) => ({
   overflowY: 'auto',
@@ -154,10 +165,10 @@ const oppositeDirection = {
   top: 'down',
   bottom: 'up'
 };
-export function isHorizontal(anchor) {
+function isHorizontal(anchor) {
   return ['left', 'right'].includes(anchor);
 }
-export function getAnchor({
+function getAnchor({
   direction
 }, anchor) {
   return direction === 'rtl' && isHorizontal(anchor) ? oppositeDirection[anchor] : anchor;
@@ -168,12 +179,12 @@ export function getAnchor({
  * when `variant="temporary"` is set.
  */
 const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
-  const props = useDefaultProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiDrawer'
   });
-  const theme = useTheme();
-  const isRtl = useRtl();
+  const theme = (0, _zeroStyled.useTheme)();
+  const isRtl = (0, _RtlProvider.useRtl)();
   const defaultTransitionDuration = {
     enter: theme.transitions.duration.enteringScreen,
     exit: theme.transitions.duration.leavingScreen
@@ -194,9 +205,11 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
     PaperProps = {},
     SlideProps,
     // eslint-disable-next-line react/prop-types
-    TransitionComponent = Slide,
+    TransitionComponent,
     transitionDuration = defaultTransitionDuration,
     variant = 'temporary',
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
 
@@ -220,56 +233,100 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
     ...other
   };
   const classes = useUtilityClasses(ownerState);
-  const drawer = /*#__PURE__*/_jsx(DrawerPaper, {
-    elevation: variant === 'temporary' ? elevation : 0,
-    square: true,
-    ...PaperProps,
-    className: clsx(classes.paper, PaperProps.className),
-    ownerState: ownerState,
+  const externalForwardedProps = {
+    slots: {
+      transition: TransitionComponent,
+      ...slots
+    },
+    slotProps: {
+      paper: PaperProps,
+      transition: SlideProps,
+      ...slotProps,
+      backdrop: (0, _utils.mergeSlotProps)(slotProps.backdrop || {
+        ...BackdropProps,
+        ...BackdropPropsProp
+      }, {
+        transitionDuration
+      })
+    }
+  };
+  const [RootSlot, rootSlotProps] = (0, _useSlot.default)('root', {
+    ref,
+    elementType: DrawerRoot,
+    className: (0, _clsx.default)(classes.root, classes.modal, className),
+    shouldForwardComponentProp: true,
+    ownerState,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other,
+      ...ModalProps
+    },
+    additionalProps: {
+      open,
+      onClose,
+      hideBackdrop,
+      slots: {
+        backdrop: externalForwardedProps.slots.backdrop
+      },
+      slotProps: {
+        backdrop: externalForwardedProps.slotProps.backdrop
+      }
+    }
+  });
+  const [PaperSlot, paperSlotProps] = (0, _useSlot.default)('paper', {
+    elementType: DrawerPaper,
+    shouldForwardComponentProp: true,
+    className: (0, _clsx.default)(classes.paper, PaperProps.className),
+    ownerState,
+    externalForwardedProps,
+    additionalProps: {
+      elevation: variant === 'temporary' ? elevation : 0,
+      square: true
+    }
+  });
+  const [DockedSlot, dockedSlotProps] = (0, _useSlot.default)('docked', {
+    elementType: DrawerDockedRoot,
+    ref,
+    className: (0, _clsx.default)(classes.root, classes.docked, className),
+    ownerState,
+    externalForwardedProps,
+    additionalProps: other // pass `other` here because `DockedSlot` is also a root slot for some variants
+  });
+  const [TransitionSlot, transitionSlotProps] = (0, _useSlot.default)('transition', {
+    elementType: _Slide.default,
+    ownerState,
+    externalForwardedProps,
+    additionalProps: {
+      in: open,
+      direction: oppositeDirection[anchorInvariant],
+      timeout: transitionDuration,
+      appear: mounted.current
+    }
+  });
+  const drawer = /*#__PURE__*/(0, _jsxRuntime.jsx)(PaperSlot, {
+    ...paperSlotProps,
     children: children
   });
   if (variant === 'permanent') {
-    return /*#__PURE__*/_jsx(DrawerDockedRoot, {
-      className: clsx(classes.root, classes.docked, className),
-      ownerState: ownerState,
-      ref: ref,
-      ...other,
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(DockedSlot, {
+      ...dockedSlotProps,
       children: drawer
     });
   }
-  const slidingDrawer = /*#__PURE__*/_jsx(TransitionComponent, {
-    in: open,
-    direction: oppositeDirection[anchorInvariant],
-    timeout: transitionDuration,
-    appear: mounted.current,
-    ...SlideProps,
+  const slidingDrawer = /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionSlot, {
+    ...transitionSlotProps,
     children: drawer
   });
   if (variant === 'persistent') {
-    return /*#__PURE__*/_jsx(DrawerDockedRoot, {
-      className: clsx(classes.root, classes.docked, className),
-      ownerState: ownerState,
-      ref: ref,
-      ...other,
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(DockedSlot, {
+      ...dockedSlotProps,
       children: slidingDrawer
     });
   }
 
   // variant === temporary
-  return /*#__PURE__*/_jsx(DrawerRoot, {
-    BackdropProps: {
-      ...BackdropProps,
-      ...BackdropPropsProp,
-      transitionDuration
-    },
-    className: clsx(classes.root, classes.modal, className),
-    open: open,
-    ownerState: ownerState,
-    onClose: onClose,
-    hideBackdrop: hideBackdrop,
-    ref: ref,
-    ...other,
-    ...ModalProps,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RootSlot, {
+    ...rootSlotProps,
     children: slidingDrawer
   });
 });
@@ -282,38 +339,38 @@ process.env.NODE_ENV !== "production" ? Drawer.propTypes /* remove-proptypes */
    * Side from which the drawer will appear.
    * @default 'left'
    */
-  anchor: PropTypes.oneOf(['bottom', 'left', 'right', 'top']),
+  anchor: _propTypes.default.oneOf(['bottom', 'left', 'right', 'top']),
   /**
    * @ignore
    */
-  BackdropProps: PropTypes.object,
+  BackdropProps: _propTypes.default.object,
   /**
    * The content of the component.
    */
-  children: PropTypes.node,
+  children: _propTypes.default.node,
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: PropTypes.object,
+  classes: _propTypes.default.object,
   /**
    * @ignore
    */
-  className: PropTypes.string,
+  className: _propTypes.default.string,
   /**
    * The elevation of the drawer.
    * @default 16
    */
-  elevation: integerPropType,
+  elevation: _integerPropType.default,
   /**
    * If `true`, the backdrop is not rendered.
    * @default false
    */
-  hideBackdrop: PropTypes.bool,
+  hideBackdrop: _propTypes.default.bool,
   /**
    * Props applied to the [`Modal`](https://mui.com/material-ui/api/modal/) element.
    * @default {}
    */
-  ModalProps: PropTypes.object,
+  ModalProps: _propTypes.default.object,
   /**
    * Callback fired when the component requests to be closed.
    * The `reason` parameter can optionally be used to control the response to `onClose`.
@@ -321,25 +378,49 @@ process.env.NODE_ENV !== "production" ? Drawer.propTypes /* remove-proptypes */
    * @param {object} event The event source of the callback.
    * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
    */
-  onClose: PropTypes.func,
+  onClose: _propTypes.default.func,
   /**
    * If `true`, the component is shown.
    * @default false
    */
-  open: PropTypes.bool,
+  open: _propTypes.default.bool,
   /**
    * Props applied to the [`Paper`](https://mui.com/material-ui/api/paper/) element.
+   * @deprecated use the `slotProps.paper` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default {}
    */
-  PaperProps: PropTypes.object,
+  PaperProps: _propTypes.default.object,
   /**
    * Props applied to the [`Slide`](https://mui.com/material-ui/api/slide/) element.
+   * @deprecated use the `slotProps.transition` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  SlideProps: _propTypes.default.object,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: _propTypes.default.shape({
+    backdrop: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    docked: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    paper: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    transition: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
    */
-  SlideProps: PropTypes.object,
+  slots: _propTypes.default.shape({
+    backdrop: _propTypes.default.elementType,
+    docked: _propTypes.default.elementType,
+    paper: _propTypes.default.elementType,
+    root: _propTypes.default.elementType,
+    transition: _propTypes.default.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.
@@ -348,15 +429,15 @@ process.env.NODE_ENV !== "production" ? Drawer.propTypes /* remove-proptypes */
    *   exit: theme.transitions.duration.leavingScreen,
    * }
    */
-  transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
-    appear: PropTypes.number,
-    enter: PropTypes.number,
-    exit: PropTypes.number
+  transitionDuration: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
+    appear: _propTypes.default.number,
+    enter: _propTypes.default.number,
+    exit: _propTypes.default.number
   })]),
   /**
    * The variant to use.
    * @default 'temporary'
    */
-  variant: PropTypes.oneOf(['permanent', 'persistent', 'temporary'])
+  variant: _propTypes.default.oneOf(['permanent', 'persistent', 'temporary'])
 } : void 0;
-export default Drawer;
+var _default = exports.default = Drawer;

package/Drawer/drawerClasses.d.ts

@@ -1,54 +1,54 @@
 export interface DrawerClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `variant="permanent or persistent"`. */
-    docked: string;
-    /** Styles applied to the Paper component. */
-    paper: string;
-    /** Styles applied to the root element if `anchor="left"`. */
-    anchorLeft: string;
-    /** Styles applied to the root element if `anchor="right"`. */
-    anchorRight: string;
-    /** Styles applied to the root element if `anchor="top"`. */
-    anchorTop: string;
-    /** Styles applied to the root element if `anchor="bottom"`. */
-    anchorBottom: string;
-    /** Styles applied to the Paper component if `anchor="left"`.
-     *  @deprecated Combine the [.MuiDrawer-anchorLeft](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorLeft) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
-     */
-    paperAnchorLeft: string;
-    /** Styles applied to the Paper component if `anchor="right"`.
-     *  @deprecated Combine the [.MuiDrawer-anchorRight](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorRight) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
-     */
-    paperAnchorRight: string;
-    /** Styles applied to the Paper component if `anchor="top"`.
-     *  @deprecated Combine the [.MuiDrawer-anchorTop](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorTop) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
-     */
-    paperAnchorTop: string;
-    /** Styles applied to the Paper component if `anchor="bottom"`.
-     *  @deprecated Combine the [.MuiDrawer-anchorBottom](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorBottom) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
-     */
-    paperAnchorBottom: string;
-    /** Styles applied to the Paper component if `anchor="left"` and `variant` is not "temporary".
-     * @deprecated Combine the [.MuiDrawer-anchorLeft](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorLeft), [.MuiDrawer-docked](/material-ui/api/drawer/#drawer-classes-MuiDrawer-docked) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
-     */
-    paperAnchorDockedLeft: string;
-    /** Styles applied to the Paper component if `anchor="top"` and `variant` is not "temporary".
-     * @deprecated Combine the [.MuiDrawer-anchorTop](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorTop), [.MuiDrawer-docked](/material-ui/api/drawer/#drawer-classes-MuiDrawer-docked) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
-     */
-    paperAnchorDockedTop: string;
-    /** Styles applied to the Paper component if `anchor="right"` and `variant` is not "temporary".
-     * @deprecated Combine the [.MuiDrawer-anchorRight](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorRight), [.MuiDrawer-docked](/material-ui/api/drawer/#drawer-classes-MuiDrawer-docked) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
-     */
-    paperAnchorDockedRight: string;
-    /** Styles applied to the Paper component if `anchor="bottom"` and `variant` is not "temporary".
-     * @deprecated Combine the [.MuiDrawer-anchorBottom](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorBottom), [.MuiDrawer-docked](/material-ui/api/drawer/#drawer-classes-MuiDrawer-docked) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
-     */
-    paperAnchorDockedBottom: string;
-    /** Styles applied to the Modal component. */
-    modal: string;
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if `variant="permanent or persistent"`. */
+  docked: string;
+  /** Styles applied to the Paper component. */
+  paper: string;
+  /** Styles applied to the root element if `anchor="left"`. */
+  anchorLeft: string;
+  /** Styles applied to the root element if `anchor="right"`. */
+  anchorRight: string;
+  /** Styles applied to the root element if `anchor="top"`. */
+  anchorTop: string;
+  /** Styles applied to the root element if `anchor="bottom"`. */
+  anchorBottom: string;
+  /** Styles applied to the Paper component if `anchor="left"`.
+   *  @deprecated Combine the [.MuiDrawer-anchorLeft](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorLeft) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+   */
+  paperAnchorLeft: string;
+  /** Styles applied to the Paper component if `anchor="right"`.
+   *  @deprecated Combine the [.MuiDrawer-anchorRight](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorRight) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+   */
+  paperAnchorRight: string;
+  /** Styles applied to the Paper component if `anchor="top"`.
+   *  @deprecated Combine the [.MuiDrawer-anchorTop](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorTop) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+   */
+  paperAnchorTop: string;
+  /** Styles applied to the Paper component if `anchor="bottom"`.
+   *  @deprecated Combine the [.MuiDrawer-anchorBottom](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorBottom) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+   */
+  paperAnchorBottom: string;
+  /** Styles applied to the Paper component if `anchor="left"` and `variant` is not "temporary".
+   * @deprecated Combine the [.MuiDrawer-anchorLeft](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorLeft), [.MuiDrawer-docked](/material-ui/api/drawer/#drawer-classes-MuiDrawer-docked) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+   */
+  paperAnchorDockedLeft: string;
+  /** Styles applied to the Paper component if `anchor="top"` and `variant` is not "temporary".
+   * @deprecated Combine the [.MuiDrawer-anchorTop](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorTop), [.MuiDrawer-docked](/material-ui/api/drawer/#drawer-classes-MuiDrawer-docked) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+   */
+  paperAnchorDockedTop: string;
+  /** Styles applied to the Paper component if `anchor="right"` and `variant` is not "temporary".
+   * @deprecated Combine the [.MuiDrawer-anchorRight](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorRight), [.MuiDrawer-docked](/material-ui/api/drawer/#drawer-classes-MuiDrawer-docked) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+   */
+  paperAnchorDockedRight: string;
+  /** Styles applied to the Paper component if `anchor="bottom"` and `variant` is not "temporary".
+   * @deprecated Combine the [.MuiDrawer-anchorBottom](/material-ui/api/drawer/#drawer-classes-MuiDrawer-anchorBottom), [.MuiDrawer-docked](/material-ui/api/drawer/#drawer-classes-MuiDrawer-docked) and [.MuiDrawer-paper](/material-ui/api/drawer/#drawer-classes-MuiDrawer-paper) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+   */
+  paperAnchorDockedBottom: string;
+  /** Styles applied to the Modal component. */
+  modal: string;
 }
 export type DrawerClassKey = keyof DrawerClasses;
 export declare function getDrawerUtilityClass(slot: string): string;
 declare const drawerClasses: DrawerClasses;
-export default drawerClasses;
+export default drawerClasses;

package/Drawer/drawerClasses.js

@@ -1,7 +1,15 @@
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-export function getDrawerUtilityClass(slot) {
-  return generateUtilityClass('MuiDrawer', slot);
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.getDrawerUtilityClass = getDrawerUtilityClass;
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+function getDrawerUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiDrawer', slot);
 }
-const drawerClasses = generateUtilityClasses('MuiDrawer', ['root', 'docked', 'paper', 'anchorLeft', 'anchorRight', 'anchorTop', 'anchorBottom', 'paperAnchorLeft', 'paperAnchorRight', 'paperAnchorTop', 'paperAnchorBottom', 'paperAnchorDockedLeft', 'paperAnchorDockedRight', 'paperAnchorDockedTop', 'paperAnchorDockedBottom', 'modal']);
-export default drawerClasses;
+const drawerClasses = (0, _generateUtilityClasses.default)('MuiDrawer', ['root', 'docked', 'paper', 'anchorLeft', 'anchorRight', 'anchorTop', 'anchorBottom', 'paperAnchorLeft', 'paperAnchorRight', 'paperAnchorTop', 'paperAnchorBottom', 'paperAnchorDockedLeft', 'paperAnchorDockedRight', 'paperAnchorDockedTop', 'paperAnchorDockedBottom', 'modal']);
+var _default = exports.default = drawerClasses;