Add the container prop to Popup

docs/pages/base-ui/api/dialog-popup.json

@@ -2,6 +2,12 @@
   "props": {
     "animated": { "type": { "name": "bool" }, "default": "false" },
     "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "container": {
+      "type": {
+        "name": "union",
+        "description": "function (props, propName) {\n  if (props[propName] == null) {\n    return new Error(\"Prop '\" + propName + \"' is required but wasn't specified\");\n  } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {\n    return new Error(\"Expected prop '\" + propName + \"' to be of type Element\");\n  }\n}<br>&#124;&nbsp;{ current?: function (props, propName) {\n  if (props[propName] == null) {\n    return null;\n  } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {\n    return new Error(\"Expected prop '\" + propName + \"' to be of type Element\");\n  }\n} }"
+      }
+    },
     "keepMounted": { "type": { "name": "bool" }, "default": "false" },
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },

docs/translations/api-docs/dialog-popup/dialog-popup.json

@@ -7,6 +7,7 @@
     "className": {
       "description": "Class names applied to the element or a function that returns them based on the component's state."
     },
+    "container": { "description": "The container element to which the popup is appended to." },
     "keepMounted": {
       "description": "If <code>true</code>, the dialog element is kept in the DOM when closed."
     },

packages/mui-base/src/Dialog/Popup/DialogPopup.tsx

@@ -10,7 +10,15 @@ const DialogPopup = React.forwardRef(function DialogPopup(
   props: DialogPopupProps,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
-  const { render, className, keepMounted = false, id: idProp, animated = false, ...other } = props;
+  const {
+    animated = false,
+    className,
+    container,
+    id: idProp,
+    keepMounted = false,
+    render,
+    ...other
+  } = props;
   const rootContext = useDialogRootContext();
   const { open, modal, nestedOpenDialogCount } = rootContext;
 
@@ -48,7 +56,7 @@ const DialogPopup = React.forwardRef(function DialogPopup(
   }
 
   return (
-    <FloatingPortal>
+    <FloatingPortal root={container}>
       <FloatingFocusManager context={floatingContext} modal={modal} disabled={!mounted}>
         {renderElement()}
       </FloatingFocusManager>
@@ -76,6 +84,27 @@ DialogPopup.propTypes /* remove-proptypes */ = {
    * Class names applied to the element or a function that returns them based on the component's state.
    */
   className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  /**
+   * The container element to which the popup is appended to.
+   */
+  container: PropTypes.oneOfType([
+    function (props, propName) {
+      if (props[propName] == null) {
+        return new Error("Prop '" + propName + "' is required but wasn't specified");
+      } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+        return new Error("Expected prop '" + propName + "' to be of type Element");
+      }
+    },
+    PropTypes.shape({
+      current: function (props, propName) {
+        if (props[propName] == null) {
+          return null;
+        } else if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+          return new Error("Expected prop '" + propName + "' to be of type Element");
+        }
+      },
+    }),
+  ]),
   /**
    * @ignore
    */

packages/mui-base/src/Dialog/Popup/DialogPopup.types.ts

@@ -11,6 +11,10 @@ export interface DialogPopupProps extends BaseUIComponentProps<'div', DialogPopu
    * @default false
    */
   animated?: boolean;
+  /**
+   * The container element to which the popup is appended to.
+   */
+  container?: HTMLElement | null | React.MutableRefObject<HTMLElement | null>;
   /**
    * If `true`, the dialog element is kept in the DOM when closed.
    *