[popups] Require Portal part (#1222)

mui · Jan 7, 2025 · 1908c94 · 1908c94
1 parent 2f1205a
commit 1908c94
Show file tree

Hide file tree

Showing 124 changed files with 2,677 additions and 1,886 deletions.
diff --git a/docs/reference/generated/alert-dialog-backdrop.json b/docs/reference/generated/alert-dialog-backdrop.json
@@ -6,11 +6,6 @@
       "type": "string | (state) => string",
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
     },
-    "keepMounted": {
-      "type": "boolean",
-      "default": "false",
-      "description": "Whether to keep the element in the DOM while the alert dialog is hidden."
-    },
     "render": {
       "type": "React.ReactElement | (props, state) => React.ReactElement",
       "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."

diff --git a/docs/reference/generated/alert-dialog-popup.json b/docs/reference/generated/alert-dialog-popup.json
@@ -14,11 +14,6 @@
       "type": "string | (state) => string",
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
     },
-    "keepMounted": {
-      "type": "boolean",
-      "default": "false",
-      "description": "Whether to keep the element in the DOM while the alert dialog is hidden."
-    },
     "render": {
       "type": "React.ReactElement | (props, state) => React.ReactElement",
       "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."

diff --git a/docs/reference/generated/alert-dialog-portal.json b/docs/reference/generated/alert-dialog-portal.json
@@ -0,0 +1,17 @@
+{
+  "name": "AlertDialogPortal",
+  "description": "A portal element that moves the popup to a different part of the DOM.\nBy default, the portal element is appended to `<body>`.",
+  "props": {
+    "container": {
+      "type": "React.Ref | HTMLElement | null",
+      "description": "A parent element to render the portal element into."
+    },
+    "keepMounted": {
+      "type": "boolean",
+      "default": "false",
+      "description": "Whether to keep the portal mounted in the DOM while the popup is hidden."
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}
diff --git a/docs/reference/generated/dialog-backdrop.json b/docs/reference/generated/dialog-backdrop.json
@@ -6,11 +6,6 @@
       "type": "string | (state) => string",
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
     },
-    "keepMounted": {
-      "type": "boolean",
-      "default": "false",
-      "description": "Whether to keep the HTML element in the DOM while the dialog is hidden."
-    },
     "render": {
       "type": "React.ReactElement | (props, state) => React.ReactElement",
       "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."

diff --git a/docs/reference/generated/dialog-popup.json b/docs/reference/generated/dialog-popup.json
@@ -14,11 +14,6 @@
       "type": "string | (state) => string",
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
     },
-    "keepMounted": {
-      "type": "boolean",
-      "default": "false",
-      "description": "Whether to keep the HTML element in the DOM while the dialog is hidden."
-    },
     "render": {
       "type": "React.ReactElement | (props, state) => React.ReactElement",
       "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."

diff --git a/docs/reference/generated/dialog-portal.json b/docs/reference/generated/dialog-portal.json
@@ -0,0 +1,17 @@
+{
+  "name": "DialogPortal",
+  "description": "A portal element that moves the popup to a different part of the DOM.\nBy default, the portal element is appended to `<body>`.",
+  "props": {
+    "container": {
+      "type": "React.Ref | HTMLElement | null",
+      "description": "A parent element to render the portal element into."
+    },
+    "keepMounted": {
+      "type": "boolean",
+      "default": "false",
+      "description": "Whether to keep the portal mounted in the DOM while the popup is hidden."
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}
diff --git a/docs/reference/generated/menu-backdrop.json b/docs/reference/generated/menu-backdrop.json
@@ -6,11 +6,6 @@
       "type": "string | (state) => string",
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
     },
-    "keepMounted": {
-      "type": "boolean",
-      "default": "false",
-      "description": "Whether to keep the HTML element in the DOM while the menu is hidden."
-    },
     "render": {
       "type": "React.ReactElement | (props, state) => React.ReactElement",
       "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."

diff --git a/docs/reference/generated/portal.json → docs/reference/generated/menu-portal.json b/docs/reference/generated/portal.json → docs/reference/generated/menu-portal.json
@@ -1,10 +1,10 @@
 {
-  "name": "Portal",
+  "name": "MenuPortal",
   "description": "A portal element that moves the popup to a different part of the DOM.\nBy default, the portal element is appended to `<body>`.",
   "props": {
     "container": {
       "type": "React.Ref | HTMLElement | null",
-      "description": "A parent element to render the portal into."
+      "description": "A parent element to render the portal element into."
     },
     "keepMounted": {
       "type": "boolean",

diff --git a/docs/reference/generated/menu-positioner.json b/docs/reference/generated/menu-positioner.json
@@ -53,11 +53,6 @@
       "type": "string | (state) => string",
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
     },
-    "keepMounted": {
-      "type": "boolean",
-      "default": "false",
-      "description": "Whether to keep the HTML element in the DOM while the menu is hidden."
-    },
     "render": {
       "type": "React.ReactElement | (props, state) => React.ReactElement",
       "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."

diff --git a/docs/reference/generated/popover-backdrop.json b/docs/reference/generated/popover-backdrop.json
@@ -6,11 +6,6 @@
       "type": "string | (state) => string",
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
     },
-    "keepMounted": {
-      "type": "boolean",
-      "default": "false",
-      "description": "Whether to keep the HTML element in the DOM while the popover is hidden."
-    },
     "render": {
       "type": "React.ReactElement | (props, state) => React.ReactElement",
       "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."

diff --git a/docs/reference/generated/popover-portal.json b/docs/reference/generated/popover-portal.json
@@ -0,0 +1,17 @@
+{
+  "name": "PopoverPortal",
+  "description": "A portal element that moves the popup to a different part of the DOM.\nBy default, the portal element is appended to `<body>`.",
+  "props": {
+    "container": {
+      "type": "React.Ref | HTMLElement | null",
+      "description": "A parent element to render the portal element into."
+    },
+    "keepMounted": {
+      "type": "boolean",
+      "default": "false",
+      "description": "Whether to keep the portal mounted in the DOM while the popup is hidden."
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}
diff --git a/docs/reference/generated/popover-positioner.json b/docs/reference/generated/popover-positioner.json
@@ -55,11 +55,6 @@
       "type": "string | (state) => string",
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
     },
-    "keepMounted": {
-      "type": "boolean",
-      "default": "false",
-      "description": "Whether to keep the HTML element in the DOM while the popover is hidden."
-    },
     "render": {
       "type": "React.ReactElement | (props, state) => React.ReactElement",
       "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."

diff --git a/docs/reference/generated/preview-card-backdrop.json b/docs/reference/generated/preview-card-backdrop.json
@@ -6,11 +6,6 @@
       "type": "string | (state) => string",
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
     },
-    "keepMounted": {
-      "type": "boolean",
-      "default": "false",
-      "description": "Whether to keep the HTML element in the DOM while the preview card is hidden."
-    },
     "render": {
       "type": "React.ReactElement | (props, state) => React.ReactElement",
       "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."

diff --git a/docs/reference/generated/preview-card-portal.json b/docs/reference/generated/preview-card-portal.json
@@ -0,0 +1,17 @@
+{
+  "name": "PreviewCardPortal",
+  "description": "A portal element that moves the popup to a different part of the DOM.\nBy default, the portal element is appended to `<body>`.",
+  "props": {
+    "container": {
+      "type": "React.Ref | HTMLElement | null",
+      "description": "A parent element to render the portal element into."
+    },
+    "keepMounted": {
+      "type": "boolean",
+      "default": "false",
+      "description": "Whether to keep the portal mounted in the DOM while the popup is hidden."
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}
diff --git a/docs/reference/generated/preview-card-positioner.json b/docs/reference/generated/preview-card-positioner.json
@@ -55,11 +55,6 @@
       "type": "string | (state) => string",
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
     },
-    "keepMounted": {
-      "type": "boolean",
-      "default": "false",
-      "description": "Whether to keep the HTML element in the DOM while the preview card is hidden."
-    },
     "render": {
       "type": "React.ReactElement | (props, state) => React.ReactElement",
       "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."

diff --git a/docs/reference/generated/select-backdrop.json b/docs/reference/generated/select-backdrop.json
@@ -6,11 +6,6 @@
       "type": "string | (state) => string",
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
     },
-    "keepMounted": {
-      "type": "boolean",
-      "default": "false",
-      "description": "Whether to keep the HTML element in the DOM while the select menu is hidden."
-    },
     "render": {
       "type": "React.ReactElement | (props, state) => React.ReactElement",
       "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."

diff --git a/docs/reference/generated/select-portal.json b/docs/reference/generated/select-portal.json
@@ -4,7 +4,7 @@
   "props": {
     "container": {
       "type": "React.Ref | HTMLElement | null",
-      "description": "A parent element to render the portal into."
+      "description": "A parent element to render the portal element into."
     }
   },
   "dataAttributes": {},

diff --git a/docs/reference/generated/tooltip-portal.json b/docs/reference/generated/tooltip-portal.json
@@ -0,0 +1,17 @@
+{
+  "name": "TooltipPortal",
+  "description": "A portal element that moves the popup to a different part of the DOM.\nBy default, the portal element is appended to `<body>`.",
+  "props": {
+    "container": {
+      "type": "React.Ref | HTMLElement | null",
+      "description": "A parent element to render the portal element into."
+    },
+    "keepMounted": {
+      "type": "boolean",
+      "default": "false",
+      "description": "Whether to keep the portal mounted in the DOM while the popup is hidden."
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}
diff --git a/docs/reference/generated/tooltip-positioner.json b/docs/reference/generated/tooltip-positioner.json
@@ -55,11 +55,6 @@
       "type": "string | (state) => string",
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
     },
-    "keepMounted": {
-      "type": "boolean",
-      "default": "false",
-      "description": "Whether to keep the HTML element in the DOM while the tooltip is hidden."
-    },
     "render": {
       "type": "React.ReactElement | (props, state) => React.ReactElement",
       "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."

diff --git a/docs/src/app/(private)/experiments/anchor-positioning.tsx b/docs/src/app/(private)/experiments/anchor-positioning.tsx
@@ -49,6 +49,7 @@ export default function AnchorPositioning() {
     arrowPadding,
     trackAnchor,
     mounted: true,
+    keepMounted: true,
   });
 
   const handleInitialScroll = React.useCallback((node: HTMLDivElement | null) => {

diff --git a/docs/src/app/(private)/experiments/anchor-side-animations.tsx b/docs/src/app/(private)/experiments/anchor-side-animations.tsx
@@ -13,16 +13,20 @@ export default function AnchorSideAnimations() {
       </p>
       <Popover.Root>
         <Popover.Trigger>transition</Popover.Trigger>
-        <Popover.Positioner side="top">
-          <Popover.Popup className={classes.Popup} data-type="transition" />
-        </Popover.Positioner>
+        <Popover.Portal>
+          <Popover.Positioner side="top">
+            <Popover.Popup className={classes.Popup} data-type="transition" />
+          </Popover.Positioner>
+        </Popover.Portal>
       </Popover.Root>
 
       <Popover.Root>
         <Popover.Trigger>animation</Popover.Trigger>
-        <Popover.Positioner side="top">
-          <Popover.Popup className={classes.Popup} data-type="animation" />
-        </Popover.Positioner>
+        <Popover.Portal>
+          <Popover.Positioner side="top">
+            <Popover.Popup className={classes.Popup} data-type="animation" />
+          </Popover.Positioner>
+        </Popover.Portal>
       </Popover.Root>
     </div>
   );