@mui/material 5.13.3 → 5.13.4

package/legacy/Popover/Popover.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 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';
@@ -13,7 +13,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) {
@@ -54,14 +54,14 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   };
   return composeClasses(slots, getPopoverUtilityClass, classes);
 };
-var PopoverRoot = styled(Modal, {
+export var PopoverRoot = styled(Modal, {
   name: 'MuiPopover',
   slot: 'Root',
   overridesResolver: function overridesResolver(props, styles) {
     return styles.root;
   }
 })({});
-var PopoverPaper = styled(Paper, {
+export var PopoverPaper = styled(PaperBase, {
   name: 'MuiPopover',
   slot: 'Paper',
   overridesResolver: function overridesResolver(props, styles) {
@@ -81,6 +81,7 @@ var PopoverPaper = styled(Paper, {
   outline: 0
 });
 var Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
+  var _slotProps$paper, _slots$root, _slots$paper;
   var props = useThemeProps({
     props: inProps,
     name: 'MuiPopover'
@@ -104,7 +105,9 @@ var Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     marginThreshold = _props$marginThreshol === void 0 ? 16 : _props$marginThreshol,
     open = props.open,
     _props$PaperProps = props.PaperProps,
-    PaperProps = _props$PaperProps === void 0 ? {} : _props$PaperProps,
+    PaperPropsProp = _props$PaperProps === void 0 ? {} : _props$PaperProps,
+    slots = props.slots,
+    slotProps = props.slotProps,
     _props$transformOrigi = props.transformOrigin,
     transformOrigin = _props$transformOrigi === void 0 ? {
       vertical: 'top',
@@ -118,15 +121,16 @@ var Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     _props$TransitionProp2 = _props$TransitionProp === void 0 ? {} : _props$TransitionProp,
     onEntering = _props$TransitionProp2.onEntering,
     TransitionProps = _objectWithoutProperties(_props$TransitionProp2, ["onEntering"]),
-    other = _objectWithoutProperties(props, ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"]);
+    other = _objectWithoutProperties(props, ["action", "anchorEl", "anchorOrigin", "anchorPosition", "anchorReference", "children", "className", "container", "elevation", "marginThreshold", "open", "PaperProps", "slots", "slotProps", "transformOrigin", "TransitionComponent", "transitionDuration", "TransitionProps"]);
+  var externalPaperSlotProps = (_slotProps$paper = slotProps == null ? void 0 : slotProps.paper) != null ? _slotProps$paper : PaperPropsProp;
   var paperRef = React.useRef();
-  var handlePaperRef = useForkRef(paperRef, PaperProps.ref);
+  var handlePaperRef = useForkRef(paperRef, externalPaperSlotProps.ref);
   var ownerState = _extends({}, props, {
     anchorOrigin: anchorOrigin,
     anchorReference: anchorReference,
     elevation: elevation,
     marginThreshold: marginThreshold,
-    PaperProps: PaperProps,
+    externalPaperSlotProps: externalPaperSlotProps,
     transformOrigin: transformOrigin,
     TransitionComponent: TransitionComponent,
     transitionDuration: transitionDurationProp,
@@ -295,16 +299,44 @@ var 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
   var container = containerProp || (anchorEl ? ownerDocument(resolveAnchorEl(anchorEl)).body : undefined);
-  return /*#__PURE__*/_jsx(PopoverRoot, _extends({
-    BackdropProps: {
-      invisible: true
+  var RootSlot = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : PopoverRoot;
+  var PaperSlot = (_slots$paper = slots == null ? void 0 : slots.paper) != null ? _slots$paper : PopoverPaper;
+  var paperProps = useSlotProps({
+    elementType: PaperSlot,
+    externalSlotProps: _extends({}, externalPaperSlotProps, {
+      style: isPositioned ? externalPaperSlotProps.style : _extends({}, externalPaperSlotProps.style, {
+        opacity: 0
+      })
+    }),
+    additionalProps: {
+      elevation: elevation,
+      ref: handlePaperRef
     },
-    className: clsx(classes.root, className),
-    container: container,
-    open: open,
-    ref: ref,
-    ownerState: ownerState
-  }, other, {
+    ownerState: ownerState,
+    className: clsx(classes.paper, externalPaperSlotProps == null ? void 0 : externalPaperSlotProps.className)
+  });
+  var _useSlotProps = useSlotProps({
+      elementType: RootSlot,
+      externalSlotProps: (slotProps == null ? void 0 : slotProps.root) || {},
+      externalForwardedProps: other,
+      additionalProps: {
+        ref: ref,
+        slotProps: {
+          backdrop: {
+            invisible: true
+          }
+        },
+        container: container,
+        open: open
+      },
+      ownerState: ownerState,
+      className: clsx(classes.root, className)
+    }),
+    rootSlotPropsProp = _useSlotProps.slotProps,
+    rootProps = _objectWithoutProperties(_useSlotProps, ["slotProps"]);
+  return /*#__PURE__*/_jsx(RootSlot, _extends({}, rootProps, !isHostComponent(RootSlot) && {
+    slotProps: rootSlotPropsProp
+  }, {
     children: /*#__PURE__*/_jsx(TransitionComponent, _extends({
       appear: true,
       in: open,
@@ -312,17 +344,7 @@ var 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
       }))
     }))
@@ -428,11 +450,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/legacy/index.js

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

package/modern/Menu/Menu.js

@@ -9,8 +9,7 @@ import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { HTMLElementType } from '@mui/utils';
 import MenuList from '../MenuList';
-import Paper from '../Paper';
-import Popover from '../Popover';
+import Popover, { PopoverPaper } from '../Popover';
 import styled, { rootShouldForwardProp } from '../styles/styled';
 import useTheme from '../styles/useTheme';
 import useThemeProps from '../styles/useThemeProps';
@@ -41,7 +40,7 @@ const MenuRoot = styled(Popover, {
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
 })({});
-const MenuPaper = styled(Paper, {
+export const MenuPaper = styled(PopoverPaper, {
   name: 'MuiMenu',
   slot: 'Paper',
   overridesResolver: (props, styles) => styles.paper
@@ -148,13 +147,16 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
       horizontal: isRtl ? 'right' : 'left'
     },
     transformOrigin: isRtl ? RTL_ORIGIN : LTR_ORIGIN,
-    PaperProps: _extends({
-      as: MenuPaper
-    }, PaperProps, {
-      classes: _extends({}, PaperProps.classes, {
-        root: classes.paper
+    slots: {
+      paper: MenuPaper
+    },
+    slotProps: {
+      paper: _extends({}, PaperProps, {
+        classes: _extends({}, PaperProps.classes, {
+          root: classes.paper
+        })
       })
-    }),
+    },
     className: classes.root,
     open: open,
     ref: ref,

package/modern/MenuList/MenuList.js

@@ -180,6 +180,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/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/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.3
+ * @mui/material v5.13.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

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]
   }));
 });