@mui/material 5.13.2 → 5.13.4

package/modern/MobileStepper/MobileStepper.js

@@ -126,6 +126,14 @@ const MobileStepper = /*#__PURE__*/React.forwardRef(function MobileStepper(inPro
     position,
     variant
   });
+  let value;
+  if (variant === 'progress') {
+    if (steps === 1) {
+      value = 100;
+    } else {
+      value = Math.ceil(activeStep / (steps - 1) * 100);
+    }
+  }
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsxs(MobileStepperRoot, _extends({
     square: true,
@@ -148,7 +156,7 @@ const MobileStepper = /*#__PURE__*/React.forwardRef(function MobileStepper(inPro
       ownerState: ownerState,
       className: classes.progress,
       variant: "determinate",
-      value: Math.ceil(activeStep / (steps - 1) * 100)
+      value: value
     }, LinearProgressProps)), nextButton]
   }));
 });

package/modern/Modal/Modal.js

@@ -126,7 +126,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
         className: clsx(className, rootSlotProps?.className, classes?.root, !ownerState.open && ownerState.exited && classes?.hidden)
       }),
       backdrop: () => _extends({}, BackdropProps, resolveComponentProps(backdropSlotProps, ownerState), {
-        className: clsx(backdropSlotProps?.className, classes?.backdrop)
+        className: clsx(backdropSlotProps?.className, BackdropProps?.className, classes?.backdrop)
       })
     },
     onTransitionEnter: () => setExited(false),

package/modern/Popover/Popover.js

@@ -1,11 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["onEntering"],
-  _excluded2 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"];
+  _excluded2 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "slots", "slotProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"],
+  _excluded3 = ["slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/base';
+import { unstable_composeClasses as composeClasses, useSlotProps, isHostComponent } from '@mui/base';
 import { chainPropTypes, integerPropType, elementTypeAcceptingRef, refType, HTMLElementType } from '@mui/utils';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
@@ -15,7 +16,7 @@ import ownerWindow from '../utils/ownerWindow';
 import useForkRef from '../utils/useForkRef';
 import Grow from '../Grow';
 import Modal from '../Modal';
-import Paper from '../Paper';
+import PaperBase from '../Paper';
 import { getPopoverUtilityClass } from './popoverClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getOffsetTop(rect, vertical) {
@@ -56,12 +57,12 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getPopoverUtilityClass, classes);
 };
-const PopoverRoot = styled(Modal, {
+export const PopoverRoot = styled(Modal, {
   name: 'MuiPopover',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
 })({});
-const PopoverPaper = styled(Paper, {
+export const PopoverPaper = styled(PaperBase, {
   name: 'MuiPopover',
   slot: 'Paper',
   overridesResolver: (props, styles) => styles.paper
@@ -98,7 +99,9 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
       elevation = 8,
       marginThreshold = 16,
       open,
-      PaperProps = {},
+      PaperProps: PaperPropsProp = {},
+      slots,
+      slotProps,
       transformOrigin = {
         vertical: 'top',
         horizontal: 'left'
@@ -111,14 +114,15 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     } = props,
     TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded),
     other = _objectWithoutPropertiesLoose(props, _excluded2);
+  const externalPaperSlotProps = slotProps?.paper ?? PaperPropsProp;
   const paperRef = React.useRef();
-  const handlePaperRef = useForkRef(paperRef, PaperProps.ref);
+  const handlePaperRef = useForkRef(paperRef, externalPaperSlotProps.ref);
   const ownerState = _extends({}, props, {
     anchorOrigin,
     anchorReference,
     elevation,
     marginThreshold,
-    PaperProps,
+    externalPaperSlotProps,
     transformOrigin,
     TransitionComponent,
     transitionDuration: transitionDurationProp,
@@ -283,16 +287,46 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
   // If the anchorEl prop is provided, use its parent body element as the container
   // If neither are provided let the Modal take care of choosing the container
   const container = containerProp || (anchorEl ? ownerDocument(resolveAnchorEl(anchorEl)).body : undefined);
-  return /*#__PURE__*/_jsx(PopoverRoot, _extends({
-    BackdropProps: {
-      invisible: true
+  const RootSlot = slots?.root ?? PopoverRoot;
+  const PaperSlot = slots?.paper ?? PopoverPaper;
+  const paperProps = useSlotProps({
+    elementType: PaperSlot,
+    externalSlotProps: _extends({}, externalPaperSlotProps, {
+      style: isPositioned ? externalPaperSlotProps.style : _extends({}, externalPaperSlotProps.style, {
+        opacity: 0
+      })
+    }),
+    additionalProps: {
+      elevation,
+      ref: handlePaperRef
     },
-    className: clsx(classes.root, className),
-    container: container,
-    open: open,
-    ref: ref,
-    ownerState: ownerState
-  }, other, {
+    ownerState,
+    className: clsx(classes.paper, externalPaperSlotProps?.className)
+  });
+  const _useSlotProps = useSlotProps({
+      elementType: RootSlot,
+      externalSlotProps: slotProps?.root || {},
+      externalForwardedProps: other,
+      additionalProps: {
+        ref,
+        slotProps: {
+          backdrop: {
+            invisible: true
+          }
+        },
+        container,
+        open
+      },
+      ownerState,
+      className: clsx(classes.root, className)
+    }),
+    {
+      slotProps: rootSlotPropsProp
+    } = _useSlotProps,
+    rootProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded3);
+  return /*#__PURE__*/_jsx(RootSlot, _extends({}, rootProps, !isHostComponent(RootSlot) && {
+    slotProps: rootSlotPropsProp
+  }, {
     children: /*#__PURE__*/_jsx(TransitionComponent, _extends({
       appear: true,
       in: open,
@@ -300,17 +334,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
       onExited: handleExited,
       timeout: transitionDuration
     }, TransitionProps, {
-      children: /*#__PURE__*/_jsx(PopoverPaper, _extends({
-        elevation: elevation
-      }, PaperProps, {
-        ref: handlePaperRef,
-        className: clsx(classes.paper, PaperProps.className)
-      }, isPositioned ? undefined : {
-        style: _extends({}, PaperProps.style, {
-          opacity: 0
-        })
-      }, {
-        ownerState: ownerState,
+      children: /*#__PURE__*/_jsx(PaperSlot, _extends({}, paperProps, {
         children: children
       }))
     }))
@@ -416,11 +440,34 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
   open: PropTypes.bool.isRequired,
   /**
    * Props applied to the [`Paper`](/material-ui/api/paper/) element.
+   *
+   * This prop is an alias for `slotProps.paper` and will be overriden by it if both are used.
+   * @deprecated Use `slotProps.paper` instead.
+   *
    * @default {}
    */
   PaperProps: PropTypes /* @typescript-to-proptypes-ignore */.shape({
     component: elementTypeAcceptingRef
   }),
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    paper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   *
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    paper: PropTypes.elementType,
+    root: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.13.2
+ * @mui/material v5.13.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/Autocomplete/Autocomplete.js

@@ -34,9 +34,11 @@ var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _styled = _interopRequireDefault(require("../styles/styled"));
 var _autocompleteClasses = _interopRequireWildcard(require("./autocompleteClasses"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
+var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _ClearIcon, _ArrowDropDownIcon;
-const _excluded = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "slotProps", "value"];
+const _excluded = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "slotProps", "value"],
+  _excluded2 = ["ref"];
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const useUtilityClasses = ownerState => {
@@ -469,6 +471,15 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   const {
     onMouseDown: handleInputMouseDown
   } = getInputProps();
+  const {
+    ref: externalListboxRef
+  } = ListboxProps != null ? ListboxProps : {};
+  const _getListboxProps = getListboxProps(),
+    {
+      ref: listboxRef
+    } = _getListboxProps,
+    otherListboxProps = (0, _objectWithoutPropertiesLoose2.default)(_getListboxProps, _excluded2);
+  const combinedListboxRef = (0, _useForkRef.default)(listboxRef, externalListboxRef);
 
   // If you modify this, make sure to keep the `AutocompleteOwnerState` type in sync.
   const ownerState = (0, _extends2.default)({}, props, {
@@ -627,7 +638,8 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
           as: ListboxComponent,
           className: classes.listbox,
           ownerState: ownerState
-        }, getListboxProps(), ListboxProps, {
+        }, otherListboxProps, ListboxProps, {
+          ref: combinedListboxRef,
           children: groupedOptions.map((option, index) => {
             if (groupBy) {
               return renderGroup({

package/node/Hidden/Hidden.js

@@ -88,22 +88,22 @@ process.env.NODE_ENV !== "production" ? Hidden.propTypes /* remove-proptypes */
    */
   initialWidth: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
   /**
-   * If `true`, screens this size and down are hidden.
+   * If `true`, component is hidden on screens below (but not including) this size.
    * @default false
    */
   lgDown: _propTypes.default.bool,
   /**
-   * If `true`, screens this size and up are hidden.
+   * If `true`, component is hidden on screens this size and above.
    * @default false
    */
   lgUp: _propTypes.default.bool,
   /**
-   * If `true`, screens this size and down are hidden.
+   * If `true`, component is hidden on screens below (but not including) this size.
    * @default false
    */
   mdDown: _propTypes.default.bool,
   /**
-   * If `true`, screens this size and up are hidden.
+   * If `true`, component is hidden on screens this size and above.
    * @default false
    */
   mdUp: _propTypes.default.bool,
@@ -112,32 +112,32 @@ process.env.NODE_ENV !== "production" ? Hidden.propTypes /* remove-proptypes */
    */
   only: _propTypes.default.oneOfType([_propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl']), _propTypes.default.arrayOf(_propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl']).isRequired)]),
   /**
-   * If `true`, screens this size and down are hidden.
+   * If `true`, component is hidden on screens below (but not including) this size.
    * @default false
    */
   smDown: _propTypes.default.bool,
   /**
-   * If `true`, screens this size and up are hidden.
+   * If `true`, component is hidden on screens this size and above.
    * @default false
    */
   smUp: _propTypes.default.bool,
   /**
-   * If `true`, screens this size and down are hidden.
+   * If `true`, component is hidden on screens below (but not including) this size.
    * @default false
    */
   xlDown: _propTypes.default.bool,
   /**
-   * If `true`, screens this size and up are hidden.
+   * If `true`, component is hidden on screens this size and above.
    * @default false
    */
   xlUp: _propTypes.default.bool,
   /**
-   * If `true`, screens this size and down are hidden.
+   * If `true`, component is hidden on screens below (but not including) this size.
    * @default false
    */
   xsDown: _propTypes.default.bool,
   /**
-   * If `true`, screens this size and up are hidden.
+   * If `true`, component is hidden on screens this size and above.
    * @default false
    */
   xsUp: _propTypes.default.bool

package/node/Hidden/withWidth.js

@@ -28,7 +28,7 @@ const isWidthUp = (breakpoint, width, inclusive = true) => {
   return breakpointKeys.indexOf(breakpoint) < breakpointKeys.indexOf(width);
 };
 
-// By default, returns true if screen width is the same or less than the given breakpoint.
+// By default, returns true if screen width is less than the given breakpoint.
 exports.isWidthUp = isWidthUp;
 const isWidthDown = (breakpoint, width, inclusive = false) => {
   if (inclusive) {

package/node/Menu/Menu.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.MenuPaper = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
@@ -14,8 +14,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _base = require("@mui/base");
 var _utils = require("@mui/utils");
 var _MenuList = _interopRequireDefault(require("../MenuList"));
-var _Paper = _interopRequireDefault(require("../Paper"));
-var _Popover = _interopRequireDefault(require("../Popover"));
+var _Popover = _interopRequireWildcard(require("../Popover"));
 var _styled = _interopRequireWildcard(require("../styles/styled"));
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
@@ -50,7 +49,7 @@ const MenuRoot = (0, _styled.default)(_Popover.default, {
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
 })({});
-const MenuPaper = (0, _styled.default)(_Paper.default, {
+const MenuPaper = (0, _styled.default)(_Popover.PopoverPaper, {
   name: 'MuiMenu',
   slot: 'Paper',
   overridesResolver: (props, styles) => styles.paper
@@ -62,6 +61,7 @@ const MenuPaper = (0, _styled.default)(_Paper.default, {
   // Add iOS momentum scrolling for iOS < 13.0
   WebkitOverflowScrolling: 'touch'
 });
+exports.MenuPaper = MenuPaper;
 const MenuMenuList = (0, _styled.default)(_MenuList.default, {
   name: 'MuiMenu',
   slot: 'List',
@@ -157,13 +157,16 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
       horizontal: isRtl ? 'right' : 'left'
     },
     transformOrigin: isRtl ? RTL_ORIGIN : LTR_ORIGIN,
-    PaperProps: (0, _extends2.default)({
-      as: MenuPaper
-    }, PaperProps, {
-      classes: (0, _extends2.default)({}, PaperProps.classes, {
-        root: classes.paper
+    slots: {
+      paper: MenuPaper
+    },
+    slotProps: {
+      paper: (0, _extends2.default)({}, PaperProps, {
+        classes: (0, _extends2.default)({}, PaperProps.classes, {
+          root: classes.paper
+        })
       })
-    }),
+    },
     className: classes.root,
     open: open,
     ref: ref,

package/node/MenuList/MenuList.js

@@ -189,6 +189,13 @@ const MenuList = /*#__PURE__*/React.forwardRef(function MenuList(props, ref) {
   // item and use the first valid item as a fallback
   React.Children.forEach(children, (child, index) => {
     if (! /*#__PURE__*/React.isValidElement(child)) {
+      if (activeItemIndex === index) {
+        activeItemIndex += 1;
+        if (activeItemIndex >= children.length) {
+          // there are no focusable items within the list.
+          activeItemIndex = -1;
+        }
+      }
       return;
     }
     if (process.env.NODE_ENV !== 'production') {

package/node/MobileStepper/MobileStepper.js

@@ -134,6 +134,14 @@ const MobileStepper = /*#__PURE__*/React.forwardRef(function MobileStepper(inPro
     position,
     variant
   });
+  let value;
+  if (variant === 'progress') {
+    if (steps === 1) {
+      value = 100;
+    } else {
+      value = Math.ceil(activeStep / (steps - 1) * 100);
+    }
+  }
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(MobileStepperRoot, (0, _extends2.default)({
     square: true,
@@ -156,7 +164,7 @@ const MobileStepper = /*#__PURE__*/React.forwardRef(function MobileStepper(inPro
       ownerState: ownerState,
       className: classes.progress,
       variant: "determinate",
-      value: Math.ceil(activeStep / (steps - 1) * 100)
+      value: value
     }, LinearProgressProps)), nextButton]
   }));
 });

package/node/Modal/Modal.js

@@ -137,7 +137,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
         className: (0, _clsx.default)(className, rootSlotProps == null ? void 0 : rootSlotProps.className, classes == null ? void 0 : classes.root, !ownerState.open && ownerState.exited && (classes == null ? void 0 : classes.hidden))
       }),
       backdrop: () => (0, _extends2.default)({}, BackdropProps, (0, _utils.resolveComponentProps)(backdropSlotProps, ownerState), {
-        className: (0, _clsx.default)(backdropSlotProps == null ? void 0 : backdropSlotProps.className, classes == null ? void 0 : classes.backdrop)
+        className: (0, _clsx.default)(backdropSlotProps == null ? void 0 : backdropSlotProps.className, BackdropProps == null ? void 0 : BackdropProps.className, classes == null ? void 0 : classes.backdrop)
       })
     },
     onTransitionEnter: () => setExited(false),

package/node/Popover/Popover.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.PopoverRoot = exports.PopoverPaper = void 0;
 exports.getOffsetLeft = getOffsetLeft;
 exports.getOffsetTop = getOffsetTop;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -26,7 +26,8 @@ var _Paper = _interopRequireDefault(require("../Paper"));
 var _popoverClasses = require("./popoverClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["onEntering"],
-  _excluded2 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"];
+  _excluded2 = ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "slots", "slotProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"],
+  _excluded3 = ["slotProps"];
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function getOffsetTop(rect, vertical) {
@@ -72,6 +73,7 @@ const PopoverRoot = (0, _styled.default)(_Modal.default, {
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
 })({});
+exports.PopoverRoot = PopoverRoot;
 const PopoverPaper = (0, _styled.default)(_Paper.default, {
   name: 'MuiPopover',
   slot: 'Paper',
@@ -89,7 +91,9 @@ const PopoverPaper = (0, _styled.default)(_Paper.default, {
   // We disable the focus ring for mouse, touch and keyboard users.
   outline: 0
 });
+exports.PopoverPaper = PopoverPaper;
 const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
+  var _slotProps$paper, _slots$root, _slots$paper;
   const props = (0, _useThemeProps.default)({
     props: inProps,
     name: 'MuiPopover'
@@ -109,7 +113,9 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
       elevation = 8,
       marginThreshold = 16,
       open,
-      PaperProps = {},
+      PaperProps: PaperPropsProp = {},
+      slots,
+      slotProps,
       transformOrigin = {
         vertical: 'top',
         horizontal: 'left'
@@ -122,14 +128,15 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     } = props,
     TransitionProps = (0, _objectWithoutPropertiesLoose2.default)(props.TransitionProps, _excluded),
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
+  const externalPaperSlotProps = (_slotProps$paper = slotProps == null ? void 0 : slotProps.paper) != null ? _slotProps$paper : PaperPropsProp;
   const paperRef = React.useRef();
-  const handlePaperRef = (0, _useForkRef.default)(paperRef, PaperProps.ref);
+  const handlePaperRef = (0, _useForkRef.default)(paperRef, externalPaperSlotProps.ref);
   const ownerState = (0, _extends2.default)({}, props, {
     anchorOrigin,
     anchorReference,
     elevation,
     marginThreshold,
-    PaperProps,
+    externalPaperSlotProps,
     transformOrigin,
     TransitionComponent,
     transitionDuration: transitionDurationProp,
@@ -294,16 +301,46 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
   // If the anchorEl prop is provided, use its parent body element as the container
   // If neither are provided let the Modal take care of choosing the container
   const container = containerProp || (anchorEl ? (0, _ownerDocument.default)(resolveAnchorEl(anchorEl)).body : undefined);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PopoverRoot, (0, _extends2.default)({
-    BackdropProps: {
-      invisible: true
+  const RootSlot = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : PopoverRoot;
+  const PaperSlot = (_slots$paper = slots == null ? void 0 : slots.paper) != null ? _slots$paper : PopoverPaper;
+  const paperProps = (0, _base.useSlotProps)({
+    elementType: PaperSlot,
+    externalSlotProps: (0, _extends2.default)({}, externalPaperSlotProps, {
+      style: isPositioned ? externalPaperSlotProps.style : (0, _extends2.default)({}, externalPaperSlotProps.style, {
+        opacity: 0
+      })
+    }),
+    additionalProps: {
+      elevation,
+      ref: handlePaperRef
     },
-    className: (0, _clsx.default)(classes.root, className),
-    container: container,
-    open: open,
-    ref: ref,
-    ownerState: ownerState
-  }, other, {
+    ownerState,
+    className: (0, _clsx.default)(classes.paper, externalPaperSlotProps == null ? void 0 : externalPaperSlotProps.className)
+  });
+  const _useSlotProps = (0, _base.useSlotProps)({
+      elementType: RootSlot,
+      externalSlotProps: (slotProps == null ? void 0 : slotProps.root) || {},
+      externalForwardedProps: other,
+      additionalProps: {
+        ref,
+        slotProps: {
+          backdrop: {
+            invisible: true
+          }
+        },
+        container,
+        open
+      },
+      ownerState,
+      className: (0, _clsx.default)(classes.root, className)
+    }),
+    {
+      slotProps: rootSlotPropsProp
+    } = _useSlotProps,
+    rootProps = (0, _objectWithoutPropertiesLoose2.default)(_useSlotProps, _excluded3);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RootSlot, (0, _extends2.default)({}, rootProps, !(0, _base.isHostComponent)(RootSlot) && {
+    slotProps: rootSlotPropsProp
+  }, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, (0, _extends2.default)({
       appear: true,
       in: open,
@@ -311,17 +348,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
       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)
-      }, isPositioned ? undefined : {
-        style: (0, _extends2.default)({}, PaperProps.style, {
-          opacity: 0
-        })
-      }, {
-        ownerState: ownerState,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PaperSlot, (0, _extends2.default)({}, paperProps, {
         children: children
       }))
     }))
@@ -427,11 +454,34 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
   open: _propTypes.default.bool.isRequired,
   /**
    * Props applied to the [`Paper`](/material-ui/api/paper/) element.
+   *
+   * This prop is an alias for `slotProps.paper` and will be overriden by it if both are used.
+   * @deprecated Use `slotProps.paper` instead.
+   *
    * @default {}
    */
   PaperProps: _propTypes.default /* @typescript-to-proptypes-ignore */.shape({
     component: _utils.elementTypeAcceptingRef
   }),
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * @default {}
+   */
+  slotProps: _propTypes.default.shape({
+    paper: _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.
+   *
+   * @default {}
+   */
+  slots: _propTypes.default.shape({
+    paper: _propTypes.default.elementType,
+    root: _propTypes.default.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.13.2
+ * @mui/material v5.13.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.13.2",
+  "version": "5.13.4",
   "private": false,
   "author": "MUI Team",
   "description": "React components that implement Google's Material Design.",
@@ -46,8 +46,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.21.0",
-    "@mui/base": "5.0.0-beta.2",
-    "@mui/core-downloads-tracker": "^5.13.2",
+    "@mui/base": "5.0.0-beta.4",
+    "@mui/core-downloads-tracker": "^5.13.4",
     "@mui/system": "^5.13.2",
     "@mui/types": "^7.2.4",
     "@mui/utils": "^5.13.1",