[Popover] Add interactable attribute

docs/pages/api-docs/popover.json

@@ -25,6 +25,7 @@
     "container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;func" } },
     "elevation": { "type": { "name": "number" }, "default": "8" },
     "getContentAnchorEl": { "type": { "name": "func" } },
+    "interactable": { "type": { "name": "bool" } },
     "marginThreshold": { "type": { "name": "number" }, "default": "16" },
     "onClose": { "type": { "name": "func" } },
     "PaperProps": {

docs/translations/api-docs/popover/popover.json

@@ -11,6 +11,7 @@
     "container": "An HTML element, component instance, or function that returns either. The <code>container</code> will passed to the Modal component.<br>By default, it uses the body of the anchorEl&#39;s top-level document object, so it&#39;s simply <code>document.body</code> most of the time.",
     "elevation": "The elevation of the popover.",
     "getContentAnchorEl": "This function is called in order to retrieve the content anchor element. It&#39;s the opposite of the <code>anchorEl</code> prop. The content anchor element should be an element inside the popover. It&#39;s used to correctly scroll and set the position of the popover. The positioning strategy tries to make the content anchor element just above the anchor element.",
+    "interactable": "Enable interaction with the rest of the page when the popover is open.",
     "marginThreshold": "Specifies how close to the edge of the window the popover can appear.",
     "onClose": "Callback fired when the component requests to be closed. The <code>reason</code> parameter can optionally be used to control the response to <code>onClose</code>.",
     "open": "If <code>true</code>, the component is shown.",

packages/material-ui/src/Popover/Popover.d.ts

@@ -90,6 +90,11 @@ export interface PopoverProps
    * anchor element.
    */
   getContentAnchorEl?: null | ((element: Element) => Element);
+  /**
+   * Enable interaction with the rest of the page when the popover is open.
+   * @default false
+   */
+  interactable?: boolean;
   /**
    * Specifies how close to the edge of the window the popover can appear.
    * @default 16

packages/material-ui/src/Popover/Popover.js

@@ -76,10 +76,10 @@ const overridesResolver = (props, styles) => {
 };
 
 const useUtilityClasses = (styleProps) => {
-  const { classes } = styleProps;
+  const { classes, interactable } = styleProps;
 
   const slots = {
-    root: ['root'],
+    root: ['root', interactable && 'interactable'],
     paper: ['paper'],
   };
 
@@ -94,7 +94,11 @@ const PopoverRoot = experimentalStyled(
     slot: 'Root',
     overridesResolver,
   },
-)({});
+)({
+  '&.Mui-interactable': {
+    pointerEvents: 'none',
+  },
+});
 
 const PopoverPaper = experimentalStyled(
   Paper,
@@ -131,6 +135,7 @@ const Popover = React.forwardRef(function Popover(inProps, ref) {
     children,
     className,
     container: containerProp,
+    interactable = false,
     elevation = 8,
     getContentAnchorEl,
     marginThreshold = 16,
@@ -151,6 +156,7 @@ const Popover = React.forwardRef(function Popover(inProps, ref) {
     ...props,
     anchorOrigin,
     anchorReference,
+    interactable,
     elevation,
     marginThreshold,
     PaperProps,
@@ -576,6 +582,11 @@ Popover.propTypes /* remove-proptypes */ = {
    * anchor element.
    */
   getContentAnchorEl: PropTypes.func,
+  /**
+   * Enable interaction with the rest of the page when the popover is open.
+   * @default false
+   */
+  interactable: PropTypes.bool,
   /**
    * Specifies how close to the edge of the window the popover can appear.
    * @default 16