@mui/material 5.13.3 → 5.13.4

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.3
+ * @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.3",
+  "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.3",
-    "@mui/core-downloads-tracker": "^5.13.3",
+    "@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",