[popups] Create Portal part

docs/data/api/alert-dialog-popup.json

@@ -1,7 +1,6 @@
 {
   "props": {
     "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
-    "container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;ref" } },
     "finalFocus": { "type": { "name": "custom", "description": "ref" } },
     "initialFocus": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;ref" } },
     "keepMounted": { "type": { "name": "bool" }, "default": "false" },

docs/data/api/alert-dialog-portal.json

@@ -0,0 +1,18 @@
+{
+  "props": {
+    "container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;ref" } },
+    "keepMounted": { "type": { "name": "bool" }, "default": "false" }
+  },
+  "name": "AlertDialogPortal",
+  "imports": [
+    "import { AlertDialog } from '@base-ui-components/react/alert-dialog';\nconst AlertDialogPortal = AlertDialog.Portal;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": null,
+  "muiName": "AlertDialogPortal",
+  "filename": "/packages/react/src/alert-dialog/portal/AlertDialogPortal.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-alert-dialog/\">Alert Dialog</a></li></ul>",
+  "cssComponent": false
+}

docs/data/api/dialog-popup.json

@@ -1,7 +1,6 @@
 {
   "props": {
     "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
-    "container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;ref" } },
     "finalFocus": { "type": { "name": "custom", "description": "ref" } },
     "initialFocus": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;ref" } },
     "keepMounted": { "type": { "name": "bool" }, "default": "false" },

docs/data/api/dialog-portal.json

@@ -0,0 +1,18 @@
+{
+  "props": {
+    "container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;ref" } },
+    "keepMounted": { "type": { "name": "bool" }, "default": "false" }
+  },
+  "name": "DialogPortal",
+  "imports": [
+    "import { Dialog } from '@base-ui-components/react/dialog';\nconst DialogPortal = Dialog.Portal;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": null,
+  "muiName": "DialogPortal",
+  "filename": "/packages/react/src/dialog/portal/DialogPortal.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-dialog/\">Dialog</a></li></ul>",
+  "cssComponent": false
+}

docs/data/api/menu-portal.json

@@ -0,0 +1,18 @@
+{
+  "props": {
+    "container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;ref" } },
+    "keepMounted": { "type": { "name": "bool" }, "default": "false" }
+  },
+  "name": "MenuPortal",
+  "imports": [
+    "import { Menu } from '@base-ui-components/react/menu';\nconst MenuPortal = Menu.Portal;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": null,
+  "muiName": "MenuPortal",
+  "filename": "/packages/react/src/menu/portal/MenuPortal.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-menu/\">Menu</a></li></ul>",
+  "cssComponent": false
+}

docs/data/api/menu-positioner.json

@@ -30,7 +30,6 @@
       },
       "default": "5"
     },
-    "container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;func" } },
     "keepMounted": { "type": { "name": "bool" }, "default": "false" },
     "positionMethod": {
       "type": { "name": "enum", "description": "'absolute'<br>&#124;&nbsp;'fixed'" },

docs/data/api/popover-backdrop.json

@@ -1,10 +1,6 @@
 {
   "props": {
     "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
-    "container": {
-      "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;func" },
-      "default": "false"
-    },
     "keepMounted": { "type": { "name": "bool" }, "default": "false" },
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },

docs/data/api/popover-portal.json

@@ -0,0 +1,18 @@
+{
+  "props": {
+    "container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;ref" } },
+    "keepMounted": { "type": { "name": "bool" }, "default": "false" }
+  },
+  "name": "PopoverPortal",
+  "imports": [
+    "import { Popover } from '@base-ui-components/react/popover';\nconst PopoverPortal = Popover.Portal;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": null,
+  "muiName": "PopoverPortal",
+  "filename": "/packages/react/src/popover/portal/PopoverPortal.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-popover/\">Popover</a></li></ul>",
+  "cssComponent": false
+}

docs/data/api/popover-positioner.json

@@ -30,7 +30,6 @@
       },
       "default": "5"
     },
-    "container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;func" } },
     "keepMounted": { "type": { "name": "bool" }, "default": "false" },
     "positionMethod": {
       "type": { "name": "enum", "description": "'absolute'<br>&#124;&nbsp;'fixed'" },

docs/data/api/preview-card-backdrop.json

@@ -1,7 +1,6 @@
 {
   "props": {
     "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
-    "container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;func" } },
     "keepMounted": { "type": { "name": "bool" }, "default": "false" },
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },

docs/data/api/preview-card-portal.json

@@ -0,0 +1,18 @@
+{
+  "props": {
+    "container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;ref" } },
+    "keepMounted": { "type": { "name": "bool" }, "default": "false" }
+  },
+  "name": "PreviewCardPortal",
+  "imports": [
+    "import { PreviewCard } from '@base-ui-components/react/preview-card';\nconst PreviewCardPortal = PreviewCard.Portal;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": null,
+  "muiName": "PreviewCardPortal",
+  "filename": "/packages/react/src/preview-card/portal/PreviewCardPortal.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-preview-card/\">Preview Card</a></li></ul>",
+  "cssComponent": false
+}

docs/data/api/preview-card-positioner.json

@@ -30,7 +30,6 @@
       },
       "default": "5"
     },
-    "container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;func" } },
     "keepMounted": { "type": { "name": "bool" }, "default": "false" },
     "positionMethod": {
       "type": { "name": "enum", "description": "'absolute'<br>&#124;&nbsp;'fixed'" },

docs/data/api/select-backdrop.json

@@ -1,10 +1,6 @@
 {
   "props": {
     "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
-    "container": {
-      "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;func" },
-      "default": "false"
-    },
     "keepMounted": { "type": { "name": "bool" }, "default": "false" },
     "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
   },

docs/data/api/select-portal.json

@@ -0,0 +1,18 @@
+{
+  "props": {
+    "container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;ref" } },
+    "keepMounted": { "type": { "name": "bool" }, "default": "false" }
+  },
+  "name": "SelectPortal",
+  "imports": [
+    "import { Select } from '@base-ui-components/react/select';\nconst SelectPortal = Select.Portal;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": null,
+  "muiName": "SelectPortal",
+  "filename": "/packages/react/src/select/portal/SelectPortal.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-select/\">Select</a></li></ul>",
+  "cssComponent": false
+}

docs/data/api/select-positioner.json

@@ -30,12 +30,6 @@
       },
       "default": "5"
     },
-    "container": {
-      "type": {
-        "name": "union",
-        "description": "(props, propName) => {\n  if (props[propName] == null) {\n    return new Error(`Prop '${propName}' is required but wasn't specified`);\n  }\n  if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {\n    return new Error(`Expected prop '${propName}' to be of type Element`);\n  }\n  return null;\n}<br>&#124;&nbsp;{ current?: (props, propName) => {\n  if (props[propName] == null) {\n    return null;\n  }\n  if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {\n    return new Error(`Expected prop '${propName}' to be of type Element`);\n  }\n  return null;\n} }"
-      }
-    },
     "positionMethod": {
       "type": { "name": "enum", "description": "'absolute'<br>&#124;&nbsp;'fixed'" },
       "default": "'absolute'"

docs/data/api/tooltip-portal.json

@@ -0,0 +1,18 @@
+{
+  "props": {
+    "container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;ref" } },
+    "keepMounted": { "type": { "name": "bool" }, "default": "false" }
+  },
+  "name": "TooltipPortal",
+  "imports": [
+    "import { Tooltip } from '@base-ui-components/react/tooltip';\nconst TooltipPortal = Tooltip.Portal;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": null,
+  "muiName": "TooltipPortal",
+  "filename": "/packages/react/src/tooltip/portal/TooltipPortal.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-tooltip/\">Tooltip</a></li></ul>",
+  "cssComponent": false
+}

docs/data/api/tooltip-positioner.json

@@ -30,7 +30,6 @@
       },
       "default": "5"
     },
-    "container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;func" } },
     "keepMounted": { "type": { "name": "bool" }, "default": "false" },
     "positionMethod": {
       "type": { "name": "enum", "description": "'absolute'<br>&#124;&nbsp;'fixed'" },

docs/data/components/alert-dialog/AlertDialogIntroduction/css-modules/index.js

@@ -10,16 +10,18 @@ export default function AlertDialogIntroduction() {
         Subscribe
       </AlertDialog.Trigger>
       <AlertDialog.Backdrop className={classes.backdrop} />
-      <AlertDialog.Popup className={classes.popup}>
-        <AlertDialog.Title className={classes.title}>Subscribe</AlertDialog.Title>
-        <AlertDialog.Description>
-          Are you sure you want to subscribe?
-        </AlertDialog.Description>
-        <div className={classes.controls}>
-          <AlertDialog.Close className={classes.close}>Yes</AlertDialog.Close>
-          <AlertDialog.Close className={classes.close}>No</AlertDialog.Close>
-        </div>
-      </AlertDialog.Popup>
+      <AlertDialog.Portal>
+        <AlertDialog.Popup className={classes.popup}>
+          <AlertDialog.Title className={classes.title}>Subscribe</AlertDialog.Title>
+          <AlertDialog.Description>
+            Are you sure you want to subscribe?
+          </AlertDialog.Description>
+          <div className={classes.controls}>
+            <AlertDialog.Close className={classes.close}>Yes</AlertDialog.Close>
+            <AlertDialog.Close className={classes.close}>No</AlertDialog.Close>
+          </div>
+        </AlertDialog.Popup>
+      </AlertDialog.Portal>
     </AlertDialog.Root>
   );
 }

docs/data/components/alert-dialog/AlertDialogIntroduction/css-modules/index.tsx

@@ -10,16 +10,18 @@ export default function AlertDialogIntroduction() {
         Subscribe
       </AlertDialog.Trigger>
       <AlertDialog.Backdrop className={classes.backdrop} />
-      <AlertDialog.Popup className={classes.popup}>
-        <AlertDialog.Title className={classes.title}>Subscribe</AlertDialog.Title>
-        <AlertDialog.Description>
-          Are you sure you want to subscribe?
-        </AlertDialog.Description>
-        <div className={classes.controls}>
-          <AlertDialog.Close className={classes.close}>Yes</AlertDialog.Close>
-          <AlertDialog.Close className={classes.close}>No</AlertDialog.Close>
-        </div>
-      </AlertDialog.Popup>
+      <AlertDialog.Portal>
+        <AlertDialog.Popup className={classes.popup}>
+          <AlertDialog.Title className={classes.title}>Subscribe</AlertDialog.Title>
+          <AlertDialog.Description>
+            Are you sure you want to subscribe?
+          </AlertDialog.Description>
+          <div className={classes.controls}>
+            <AlertDialog.Close className={classes.close}>Yes</AlertDialog.Close>
+            <AlertDialog.Close className={classes.close}>No</AlertDialog.Close>
+          </div>
+        </AlertDialog.Popup>
+      </AlertDialog.Portal>
     </AlertDialog.Root>
   );
 }

docs/data/components/alert-dialog/AlertDialogIntroduction/system/index.js

@@ -8,14 +8,16 @@ export default function AlertDialogIntroduction() {
     <AlertDialog.Root>
       <TriggerButton>Subscribe</TriggerButton>
       <Backdrop />
-      <Popup>
-        <Title>Subscribe</Title>
-        <Description>Are you sure you want to subscribe?</Description>
-        <Controls>
-          <CloseButton>Yes</CloseButton>
-          <CloseButton>No</CloseButton>
-        </Controls>
-      </Popup>
+      <AlertDialog.Portal>
+        <Popup>
+          <Title>Subscribe</Title>
+          <Description>Are you sure you want to subscribe?</Description>
+          <Controls>
+            <CloseButton>Yes</CloseButton>
+            <CloseButton>No</CloseButton>
+          </Controls>
+        </Popup>
+      </AlertDialog.Portal>
     </AlertDialog.Root>
   );
 }

docs/data/components/alert-dialog/AlertDialogIntroduction/system/index.tsx

@@ -8,14 +8,16 @@ export default function AlertDialogIntroduction() {
     <AlertDialog.Root>
       <TriggerButton>Subscribe</TriggerButton>
       <Backdrop />
-      <Popup>
-        <Title>Subscribe</Title>
-        <Description>Are you sure you want to subscribe?</Description>
-        <Controls>
-          <CloseButton>Yes</CloseButton>
-          <CloseButton>No</CloseButton>
-        </Controls>
-      </Popup>
+      <AlertDialog.Portal>
+        <Popup>
+          <Title>Subscribe</Title>
+          <Description>Are you sure you want to subscribe?</Description>
+          <Controls>
+            <CloseButton>Yes</CloseButton>
+            <CloseButton>No</CloseButton>
+          </Controls>
+        </Popup>
+      </AlertDialog.Portal>
     </AlertDialog.Root>
   );
 }

docs/data/components/alert-dialog/AlertDialogIntroduction/system/index.tsx.preview

@@ -1,12 +1,14 @@
 <AlertDialog.Root>
   <TriggerButton>Subscribe</TriggerButton>
   <Backdrop />
-  <Popup>
-    <Title>Subscribe</Title>
-    <Description>Are you sure you want to subscribe?</Description>
-    <Controls>
-      <CloseButton>Yes</CloseButton>
-      <CloseButton>No</CloseButton>
-    </Controls>
-  </Popup>
+  <AlertDialog.Portal>
+    <Popup>
+      <Title>Subscribe</Title>
+      <Description>Are you sure you want to subscribe?</Description>
+      <Controls>
+        <CloseButton>Yes</CloseButton>
+        <CloseButton>No</CloseButton>
+      </Controls>
+    </Popup>
+  </AlertDialog.Portal>
 </AlertDialog.Root>

docs/data/components/alert-dialog/AlertDialogIntroduction/tailwind/index.js

@@ -7,14 +7,16 @@ export default function UnstyledDialogIntroduction() {
     <AlertDialog.Root>
       <TriggerButton>Subscribe</TriggerButton>
       <Backdrop />
-      <Popup>
-        <Title>Subscribe</Title>
-        <Description>Are you sure you want to subscribe?</Description>
-        <Controls>
-          <CloseButton>Yes</CloseButton>
-          <CloseButton>No</CloseButton>
-        </Controls>
-      </Popup>
+      <AlertDialog.Portal>
+        <Popup>
+          <Title>Subscribe</Title>
+          <Description>Are you sure you want to subscribe?</Description>
+          <Controls>
+            <CloseButton>Yes</CloseButton>
+            <CloseButton>No</CloseButton>
+          </Controls>
+        </Popup>
+      </AlertDialog.Portal>
     </AlertDialog.Root>
   );
 }