@mui/material 5.10.9 → 5.10.11

package/ListItemIcon/listItemIconClasses.js

@@ -1,17 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getListItemIconUtilityClass = getListItemIconUtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getListItemIconUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiListItemIcon', slot);
+  return (0, _generateUtilityClass.default)('MuiListItemIcon', slot);
 }
 
-const listItemIconClasses = (0, _base.generateUtilityClasses)('MuiListItemIcon', ['root', 'alignItemsFlexStart']);
+const listItemIconClasses = (0, _utils.unstable_generateUtilityClasses)('MuiListItemIcon', ['root', 'alignItemsFlexStart']);
 var _default = listItemIconClasses;
 exports.default = _default;

package/ListItemSecondaryAction/listItemSecondaryActionClasses.js

@@ -1,17 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getListItemSecondaryActionClassesUtilityClass = getListItemSecondaryActionClassesUtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getListItemSecondaryActionClassesUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiListItemSecondaryAction', slot);
+  return (0, _generateUtilityClass.default)('MuiListItemSecondaryAction', slot);
 }
 
-const listItemSecondaryActionClasses = (0, _base.generateUtilityClasses)('MuiListItemSecondaryAction', ['root', 'disableGutters']);
+const listItemSecondaryActionClasses = (0, _utils.unstable_generateUtilityClasses)('MuiListItemSecondaryAction', ['root', 'disableGutters']);
 var _default = listItemSecondaryActionClasses;
 exports.default = _default;

package/ListItemText/listItemTextClasses.js

@@ -1,17 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getListItemTextUtilityClass = getListItemTextUtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getListItemTextUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiListItemText', slot);
+  return (0, _generateUtilityClass.default)('MuiListItemText', slot);
 }
 
-const listItemTextClasses = (0, _base.generateUtilityClasses)('MuiListItemText', ['root', 'multiline', 'dense', 'inset', 'primary', 'secondary']);
+const listItemTextClasses = (0, _utils.unstable_generateUtilityClasses)('MuiListItemText', ['root', 'multiline', 'dense', 'inset', 'primary', 'secondary']);
 var _default = listItemTextClasses;
 exports.default = _default;

package/ListSubheader/listSubheaderClasses.js

@@ -1,17 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getListSubheaderUtilityClass = getListSubheaderUtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getListSubheaderUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiListSubheader', slot);
+  return (0, _generateUtilityClass.default)('MuiListSubheader', slot);
 }
 
-const listSubheaderClasses = (0, _base.generateUtilityClasses)('MuiListSubheader', ['root', 'colorPrimary', 'colorInherit', 'gutters', 'inset', 'sticky']);
+const listSubheaderClasses = (0, _utils.unstable_generateUtilityClasses)('MuiListSubheader', ['root', 'colorPrimary', 'colorInherit', 'gutters', 'inset', 'sticky']);
 var _default = listSubheaderClasses;
 exports.default = _default;

package/Menu/Menu.d.ts

@@ -83,7 +83,7 @@ export interface MenuProps extends StandardProps<PopoverProps> {
  *
  * Demos:
  *
- * - [App bar](https://mui.com/material-ui/react-app-bar/)
+ * - [App Bar](https://mui.com/material-ui/react-app-bar/)
  * - [Menu](https://mui.com/material-ui/react-menu/)
  *
  * API:

package/Menu/menuClasses.js

@@ -1,17 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getMenuUtilityClass = getMenuUtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getMenuUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiMenu', slot);
+  return (0, _generateUtilityClass.default)('MuiMenu', slot);
 }
 
-const menuClasses = (0, _base.generateUtilityClasses)('MuiMenu', ['root', 'paper', 'list']);
+const menuClasses = (0, _utils.unstable_generateUtilityClasses)('MuiMenu', ['root', 'paper', 'list']);
 var _default = menuClasses;
 exports.default = _default;

package/MenuItem/MenuItem.js

@@ -150,7 +150,7 @@ const MenuItemRoot = (0, _styled.default)(_ButtonBase.default, {
   }
 }, ownerState.dense && (0, _extends2.default)({
   minHeight: 32,
-  // https://material.io/components/menus#specs > Dense
+  // https://m2.material.io/components/menus#specs > Dense
   paddingTop: 4,
   paddingBottom: 4
 }, theme.typography.body2, {

package/MenuItem/menuItemClasses.js

@@ -1,17 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getMenuItemUtilityClass = getMenuItemUtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getMenuItemUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiMenuItem', slot);
+  return (0, _generateUtilityClass.default)('MuiMenuItem', slot);
 }
 
-const menuItemClasses = (0, _base.generateUtilityClasses)('MuiMenuItem', ['root', 'focusVisible', 'dense', 'disabled', 'divider', 'gutters', 'selected']);
+const menuItemClasses = (0, _utils.unstable_generateUtilityClasses)('MuiMenuItem', ['root', 'focusVisible', 'dense', 'disabled', 'divider', 'gutters', 'selected']);
 var _default = menuItemClasses;
 exports.default = _default;

package/MobileStepper/mobileStepperClasses.js

@@ -1,17 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getMobileStepperUtilityClass = getMobileStepperUtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getMobileStepperUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiMobileStepper', slot);
+  return (0, _generateUtilityClass.default)('MuiMobileStepper', slot);
 }
 
-const mobileStepperClasses = (0, _base.generateUtilityClasses)('MuiMobileStepper', ['root', 'positionBottom', 'positionTop', 'positionStatic', 'dots', 'dot', 'dotActive', 'progress']);
+const mobileStepperClasses = (0, _utils.unstable_generateUtilityClasses)('MuiMobileStepper', ['root', 'positionBottom', 'positionTop', 'positionStatic', 'dots', 'dot', 'dotActive', 'progress']);
 var _default = mobileStepperClasses;
 exports.default = _default;

package/Modal/Modal.d.ts

@@ -1,7 +1,11 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { OverrideProps } from '@mui/types';
-import { ExtendModalUnstyledTypeMap, ExtendModalUnstyled } from '@mui/base/ModalUnstyled';
+import {
+  ExtendModalUnstyledTypeMap,
+  ExtendModalUnstyled,
+  ModalUnstyledTypeMap,
+} from '@mui/base/ModalUnstyled';
 import { Theme } from '../styles';
 import { BackdropProps } from '../Backdrop';
 
@@ -9,8 +13,8 @@ export type ModalTypeMap<D extends React.ElementType = 'div', P = {}> = ExtendMo
   props: P & {
     /**
      * A backdrop component. This prop enables custom backdrop rendering.
-     * @deprecated Use `components.Backdrop` instead. While this prop currently works, it will be removed in the next major version.
-     * Use the `components.Backdrop` prop to make your application ready for the next version of Material UI.
+     * @deprecated Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.
+     * Use the `slots.backdrop` prop to make your application ready for the next version of Material UI.
      * @default styled(Backdrop, {
      *   name: 'MuiModal',
      *   slot: 'Backdrop',
@@ -24,9 +28,23 @@ export type ModalTypeMap<D extends React.ElementType = 'div', P = {}> = ExtendMo
     BackdropComponent?: React.ElementType<BackdropProps>;
     /**
      * Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.
-     * @deprecated Use `componentsProps.backdrop` instead.
+     * @deprecated Use `slotProps.backdrop` instead.
      */
     BackdropProps?: Partial<BackdropProps>;
+    /**
+     * The components used for each slot inside the Modal.
+     * Either a string to use a HTML element or a component.
+     * @default {}
+     */
+    components?: {
+      Root?: React.ElementType;
+      Backdrop?: React.ElementType;
+    };
+    /**
+     * The props used for each slot inside the Modal.
+     * @default {}
+     */
+    componentsProps?: ModalUnstyledTypeMap['props']['slotProps'];
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
@@ -35,7 +53,7 @@ export type ModalTypeMap<D extends React.ElementType = 'div', P = {}> = ExtendMo
   defaultComponent: D;
 }>;
 
-type ModalRootProps = NonNullable<ModalTypeMap['props']['componentsProps']>['root'];
+type ModalRootProps = NonNullable<ModalTypeMap['props']['slotProps']>['root'];
 
 export declare const ModalRoot: React.FC<ModalRootProps>;
 

package/Modal/Modal.js

@@ -29,7 +29,7 @@ var _Backdrop = _interopRequireDefault(require("../Backdrop"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["BackdropComponent", "BackdropProps", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "theme"];
+const _excluded = ["BackdropComponent", "BackdropProps", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "slotProps", "slots", "theme"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -88,7 +88,7 @@ const ModalBackdrop = (0, _styled.default)(_Backdrop.default, {
  */
 
 const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
-  var _ref, _components$Root;
+  var _ref, _slots$root, _ref2, _slots$backdrop, _slotProps$root, _slotProps$backdrop;
 
   const props = (0, _useThemeProps.default)({
     name: 'MuiModal',
@@ -110,6 +110,8 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     disableScrollLock = false,
     hideBackdrop = false,
     keepMounted = false,
+    slotProps,
+    slots,
     // eslint-disable-next-line react/prop-types
     theme
   } = props,
@@ -130,18 +132,21 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     exited
   });
   const classes = extendUtilityClasses(ownerState);
-  const Root = (_ref = (_components$Root = components.Root) != null ? _components$Root : component) != null ? _ref : ModalRoot;
+  const RootSlot = (_ref = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref : ModalRoot;
+  const BackdropSlot = (_ref2 = (_slots$backdrop = slots == null ? void 0 : slots.backdrop) != null ? _slots$backdrop : components.Backdrop) != null ? _ref2 : BackdropComponent;
+  const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
+  const backdropSlotProps = (_slotProps$backdrop = slotProps == null ? void 0 : slotProps.backdrop) != null ? _slotProps$backdrop : componentsProps.backdrop;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ModalUnstyled.default, (0, _extends2.default)({
-    components: (0, _extends2.default)({
-      Root,
-      Backdrop: BackdropComponent
-    }, components),
-    componentsProps: {
-      root: () => (0, _extends2.default)({}, (0, _utils.resolveComponentProps)(componentsProps.root, ownerState), !(0, _utils.isHostComponent)(Root) && {
+    slots: {
+      root: RootSlot,
+      backdrop: BackdropSlot
+    },
+    slotProps: {
+      root: () => (0, _extends2.default)({}, (0, _utils.resolveComponentProps)(rootSlotProps, ownerState), !(0, _utils.isHostComponent)(RootSlot) && {
         as: component,
         theme
       }),
-      backdrop: () => (0, _extends2.default)({}, BackdropProps, (0, _utils.resolveComponentProps)(componentsProps.backdrop, ownerState))
+      backdrop: () => (0, _extends2.default)({}, BackdropProps, (0, _utils.resolveComponentProps)(backdropSlotProps, ownerState))
     },
     onTransitionEnter: () => setExited(false),
     onTransitionExited: () => setExited(true),
@@ -162,8 +167,8 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
 
   /**
    * A backdrop component. This prop enables custom backdrop rendering.
-   * @deprecated Use `components.Backdrop` instead. While this prop currently works, it will be removed in the next major version.
-   * Use the `components.Backdrop` prop to make your application ready for the next version of Material UI.
+   * @deprecated Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.
+   * Use the `slots.backdrop` prop to make your application ready for the next version of Material UI.
    * @default styled(Backdrop, {
    *   name: 'MuiModal',
    *   slot: 'Backdrop',
@@ -178,7 +183,7 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
 
   /**
    * Props applied to the [`Backdrop`](/material-ui/api/backdrop/) element.
-   * @deprecated Use `componentsProps.backdrop` instead.
+   * @deprecated Use `slotProps.backdrop` instead.
    */
   BackdropProps: _propTypes.default.object,
 
@@ -313,6 +318,25 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
    */
   open: _propTypes.default.bool.isRequired,
 
+  /**
+   * The props used for each slot inside the Modal.
+   * @default {}
+   */
+  slotProps: _propTypes.default.shape({
+    backdrop: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  }),
+
+  /**
+   * The components used for each slot inside the Modal.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: _propTypes.default.shape({
+    backdrop: _propTypes.default.elementType,
+    root: _propTypes.default.elementType
+  }),
+
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/NativeSelect/nativeSelectClasses.js

@@ -1,17 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getNativeSelectUtilityClasses = getNativeSelectUtilityClasses;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getNativeSelectUtilityClasses(slot) {
-  return (0, _base.generateUtilityClass)('MuiNativeSelect', slot);
+  return (0, _generateUtilityClass.default)('MuiNativeSelect', slot);
 }
 
-const nativeSelectClasses = (0, _base.generateUtilityClasses)('MuiNativeSelect', ['root', 'select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput']);
+const nativeSelectClasses = (0, _utils.unstable_generateUtilityClasses)('MuiNativeSelect', ['root', 'select', 'multiple', 'filled', 'outlined', 'standard', 'disabled', 'icon', 'iconOpen', 'iconFilled', 'iconOutlined', 'iconStandard', 'nativeInput']);
 var _default = nativeSelectClasses;
 exports.default = _default;

package/OutlinedInput/outlinedInputClasses.js

@@ -10,14 +10,16 @@ exports.getOutlinedInputUtilityClass = getOutlinedInputUtilityClass;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 var _InputBase = require("../InputBase");
 
 function getOutlinedInputUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiOutlinedInput', slot);
+  return (0, _generateUtilityClass.default)('MuiOutlinedInput', slot);
 }
 
-const outlinedInputClasses = (0, _extends2.default)({}, _InputBase.inputBaseClasses, (0, _base.generateUtilityClasses)('MuiOutlinedInput', ['root', 'notchedOutline', 'input']));
+const outlinedInputClasses = (0, _extends2.default)({}, _InputBase.inputBaseClasses, (0, _utils.unstable_generateUtilityClasses)('MuiOutlinedInput', ['root', 'notchedOutline', 'input']));
 var _default = outlinedInputClasses;
 exports.default = _default;

package/Pagination/paginationClasses.js

@@ -1,17 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getPaginationUtilityClass = getPaginationUtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getPaginationUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiPagination', slot);
+  return (0, _generateUtilityClass.default)('MuiPagination', slot);
 }
 
-const paginationClasses = (0, _base.generateUtilityClasses)('MuiPagination', ['root', 'ul', 'outlined', 'text']);
+const paginationClasses = (0, _utils.unstable_generateUtilityClasses)('MuiPagination', ['root', 'ul', 'outlined', 'text']);
 var _default = paginationClasses;
 exports.default = _default;

package/PaginationItem/paginationItemClasses.js

@@ -1,17 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getPaginationItemUtilityClass = getPaginationItemUtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getPaginationItemUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiPaginationItem', slot);
+  return (0, _generateUtilityClass.default)('MuiPaginationItem', slot);
 }
 
-const paginationItemClasses = (0, _base.generateUtilityClasses)('MuiPaginationItem', ['root', 'page', 'sizeSmall', 'sizeLarge', 'text', 'textPrimary', 'textSecondary', 'outlined', 'outlinedPrimary', 'outlinedSecondary', 'rounded', 'ellipsis', 'firstLast', 'previousNext', 'focusVisible', 'disabled', 'selected', 'icon']);
+const paginationItemClasses = (0, _utils.unstable_generateUtilityClasses)('MuiPaginationItem', ['root', 'page', 'sizeSmall', 'sizeLarge', 'text', 'textPrimary', 'textSecondary', 'outlined', 'outlinedPrimary', 'outlinedSecondary', 'rounded', 'ellipsis', 'firstLast', 'previousNext', 'focusVisible', 'disabled', 'selected', 'icon']);
 var _default = paginationItemClasses;
 exports.default = _default;

package/Paper/paperClasses.js

@@ -1,17 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getPaperUtilityClass = getPaperUtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getPaperUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiPaper', slot);
+  return (0, _generateUtilityClass.default)('MuiPaper', slot);
 }
 
-const paperClasses = (0, _base.generateUtilityClasses)('MuiPaper', ['root', 'rounded', 'outlined', 'elevation', 'elevation0', 'elevation1', 'elevation2', 'elevation3', 'elevation4', 'elevation5', 'elevation6', 'elevation7', 'elevation8', 'elevation9', 'elevation10', 'elevation11', 'elevation12', 'elevation13', 'elevation14', 'elevation15', 'elevation16', 'elevation17', 'elevation18', 'elevation19', 'elevation20', 'elevation21', 'elevation22', 'elevation23', 'elevation24']);
+const paperClasses = (0, _utils.unstable_generateUtilityClasses)('MuiPaper', ['root', 'rounded', 'outlined', 'elevation', 'elevation0', 'elevation1', 'elevation2', 'elevation3', 'elevation4', 'elevation5', 'elevation6', 'elevation7', 'elevation8', 'elevation9', 'elevation10', 'elevation11', 'elevation12', 'elevation13', 'elevation14', 'elevation15', 'elevation16', 'elevation17', 'elevation18', 'elevation19', 'elevation20', 'elevation21', 'elevation22', 'elevation23', 'elevation24']);
 var _default = paperClasses;
 exports.default = _default;

package/Popover/Popover.js

@@ -268,6 +268,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
       transformOrigin: getTransformOriginValue(elemTransformOrigin)
     };
   }, [anchorEl, anchorReference, getAnchorOffset, getTransformOrigin, marginThreshold]);
+  const [isPositioned, setIsPositioned] = React.useState(open);
   const setPositioningStyles = React.useCallback(() => {
     const element = paperRef.current;
 
@@ -286,6 +287,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     }
 
     element.style.transformOrigin = positioning.transformOrigin;
+    setIsPositioned(true);
   }, [getPositioningStyle]);
 
   const handleEntering = (element, isAppearing) => {
@@ -296,6 +298,10 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     setPositioningStyles();
   };
 
+  const handleExited = () => {
+    setIsPositioned(false);
+  };
+
   React.useEffect(() => {
     if (open) {
       setPositioningStyles();
@@ -345,13 +351,19 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
       appear: true,
       in: open,
       onEntering: handleEntering,
+      onExited: handleExited,
       timeout: transitionDuration
     }, TransitionProps, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PopoverPaper, (0, _extends2.default)({
         elevation: elevation
       }, PaperProps, {
         ref: handlePaperRef,
-        className: (0, _clsx.default)(classes.paper, PaperProps.className),
+        className: (0, _clsx.default)(classes.paper, PaperProps.className)
+      }, isPositioned ? undefined : {
+        style: (0, _extends2.default)({}, PaperProps.style, {
+          opacity: 0
+        })
+      }, {
         ownerState: ownerState,
         children: children
       }))

package/Popover/popoverClasses.js

@@ -1,17 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 exports.getPopoverUtilityClass = getPopoverUtilityClass;
 
-var _base = require("@mui/base");
+var _utils = require("@mui/utils");
+
+var _generateUtilityClass = _interopRequireDefault(require("../generateUtilityClass"));
 
 function getPopoverUtilityClass(slot) {
-  return (0, _base.generateUtilityClass)('MuiPopover', slot);
+  return (0, _generateUtilityClass.default)('MuiPopover', slot);
 }
 
-const popoverClasses = (0, _base.generateUtilityClasses)('MuiPopover', ['root', 'paper']);
+const popoverClasses = (0, _utils.unstable_generateUtilityClasses)('MuiPopover', ['root', 'paper']);
 var _default = popoverClasses;
 exports.default = _default;

package/Popper/Popper.d.ts

@@ -3,6 +3,19 @@ import { SxProps } from '@mui/system';
 import * as React from 'react';
 import { Theme } from '../styles';
 export declare type PopperProps = Omit<PopperUnstyledProps, 'direction'> & {
+    /**
+     * The components used for each slot inside the Popper.
+     * Either a string to use a HTML element or a component.
+     * @default {}
+     */
+    components?: {
+        Root?: React.ElementType;
+    };
+    /**
+     * The props used for each slot inside the Popper.
+     * @default {}
+     */
+    componentsProps?: PopperUnstyledProps['slotProps'];
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
@@ -20,5 +33,5 @@ export declare type PopperProps = Omit<PopperUnstyledProps, 'direction'> & {
  *
  * - [Popper API](https://mui.com/material-ui/api/popper/)
  */
-declare const Popper: React.ForwardRefExoticComponent<Pick<PopperProps, "hidden" | "color" | "style" | "open" | "translate" | "transition" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "component" | "sx" | "components" | "container" | "componentsProps" | "placement" | "disablePortal" | "modifiers" | "anchorEl" | "keepMounted" | "popperOptions" | "popperRef"> & React.RefAttributes<HTMLDivElement>>;
+declare const Popper: React.ForwardRefExoticComponent<Pick<PopperProps, "hidden" | "color" | "style" | "open" | "translate" | "transition" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "component" | "sx" | "components" | "container" | "placement" | "disablePortal" | "modifiers" | "anchorEl" | "keepMounted" | "popperOptions" | "popperRef" | "slotProps" | "slots" | "componentsProps"> & React.RefAttributes<HTMLDivElement>>;
 export default Popper;