[Portal] Copy Portal docs to the Base space

docs/data/base/components/portal/SimplePortal.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import Portal from '@mui/base/Portal';
+import { Box } from '@mui/system';
+
+export default function SimplePortal() {
+  const [show, setShow] = React.useState(false);
+  const container = React.useRef(null);
+
+  const handleClick = () => {
+    setShow(!show);
+  };
+
+  return (
+    <div>
+      <button type="button" onClick={handleClick}>
+        {show ? 'Unmount children' : 'Mount children'}
+      </button>
+      <Box sx={{ p: 1, my: 1, border: '1px solid' }}>
+        It looks like I will render here.
+        {show ? (
+          <Portal container={container.current}>
+            <span>But I actually render here!</span>
+          </Portal>
+        ) : null}
+      </Box>
+      <Box sx={{ p: 1, my: 1, border: '1px solid' }} ref={container} />
+    </div>
+  );
+}

docs/data/base/components/portal/SimplePortal.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import Portal from '@mui/base/Portal';
+import { Box } from '@mui/system';
+
+export default function SimplePortal() {
+  const [show, setShow] = React.useState(false);
+  const container = React.useRef(null);
+
+  const handleClick = () => {
+    setShow(!show);
+  };
+
+  return (
+    <div>
+      <button type="button" onClick={handleClick}>
+        {show ? 'Unmount children' : 'Mount children'}
+      </button>
+      <Box sx={{ p: 1, my: 1, border: '1px solid' }}>
+        It looks like I will render here.
+        {show ? (
+          <Portal container={container.current}>
+            <span>But I actually render here!</span>
+          </Portal>
+        ) : null}
+      </Box>
+      <Box sx={{ p: 1, my: 1, border: '1px solid' }} ref={container} />
+    </div>
+  );
+}

docs/data/base/components/portal/SimplePortal.tsx.preview

@@ -0,0 +1,12 @@
+<button type="button" onClick={handleClick}>
+  {show ? 'Unmount children' : 'Mount children'}
+</button>
+<Box sx={{ p: 1, my: 1, border: '1px solid' }}>
+  It looks like I will render here.
+  {show ? (
+    <Portal container={container.current}>
+      <span>But I actually render here!</span>
+    </Portal>
+  ) : null}
+</Box>
+<Box sx={{ p: 1, my: 1, border: '1px solid' }} ref={container} />

docs/data/base/components/portal/portal-pt.md

@@ -0,0 +1,32 @@
+---
+product: material-ui
+title: Componente React Portal
+components: Portal
+githubLabel: 'component: Portal'
+---
+
+# Portal
+
+<p class="description">O componente portal renderiza seus elementos filho em uma nova "subárvore" fora da hierarquia do DOM atual.</p>
+
+O filho do componente portal será adicionado ao `container` especificado. O componente é usado internamente pelos componentes [`Modal`](/components/modal/) e [`Popper`](/components/popper/).
+
+[A paleta](/system/palette/) com funções de estilo.
+
+## Exemplo
+
+{{"demo": "SimplePortal.js"}}
+
+## Do lado do servidor
+
+React [não suporta](https://github.com/facebook/react/issues/13097) a API [`createPortal()`](https://pt-br.reactjs.org/docs/portals.html) no servidor. Você deve esperar pelo lado do cliente fazer a hidratação para ver o filho.
+
+## Unstyled
+
+- 📦 [970 B gzipped](https://bundlephobia.com/package/@mui/base@latest)
+
+As the component does not have any styles, it also comes with the Base package.
+
+```js
+import Portal from '@mui/base/Portal';
+```

docs/data/base/components/portal/portal-zh.md

@@ -0,0 +1,32 @@
+---
+product: material-ui
+title: React Portal（传送门）组件
+components: Portal
+githubLabel: 'component: Portal'
+---
+
+# Portal
+
+<p class="description">传送门组件将其子节点渲染到当前 DOM 结构之外的新 "子类树" 当中。</p>
+
+传送门组件的子节点将被添加到指定的 `container` 中。 [`Modal`](/components/modal/) 和 [`Popper`](/components/popper/) 组件内部都是用了该组件。
+
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
+## 示例
+
+{{"demo": "SimplePortal.js"}}
+
+## 服务器端
+
+React [不支持](https://github.com/facebook/react/issues/13097)服务端渲染的 [`createPortal()`](https://reactjs.org/docs/portals.html) API。 您必须等到客户端的注水渲染（hydration）之后才能见到子节点。
+
+## Unstyled
+
+- 📦 [970 B gzipped](https://bundlephobia.com/package/@mui/base@latest)
+
+As the component does not have any styles, it also comes with the Base package.
+
+```js
+import Portal from '@mui/base/Portal';
+```

docs/data/base/components/portal/portal.md

@@ -0,0 +1,25 @@
+---
+product: base
+title: React Portal component
+components: Portal
+githubLabel: 'component: Portal'
+packageName: '@mui/base'
+---
+
+# Portal
+
+<p class="description">The portal component renders its children into a new "subtree" outside of current DOM hierarchy.</p>
+
+The children of the portal component will be appended to the `container` specified.
+The component is used internally by the [`Modal`](/components/modal/) and [`Popper`](/components/popper/) components.
+
+{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+
+## Example
+
+{{"demo": "SimplePortal.js"}}
+
+## Server-side
+
+React [doesn't support](https://github.com/facebook/react/issues/13097) the [`createPortal()`](https://reactjs.org/docs/portals.html) API on the server.
+You have to wait for the client-side hydration to see the children.

docs/data/base/pages.ts

@@ -24,7 +24,10 @@ const pages = [
       {
         pathname: '/base/components/utils',
         subheader: 'utils',
-        children: [{ pathname: '/base/react-click-away-listener', title: 'Click-away listener' }],
+        children: [
+          { pathname: '/base/react-click-away-listener', title: 'Click-away listener' },
+          { pathname: '/base/react-portal', title: 'Portal' },
+        ],
       },
     ],
   },

docs/pages/base/api/portal.json

@@ -9,6 +9,6 @@
   "spread": false,
   "filename": "/packages/mui-base/src/Portal/Portal.js",
   "inheritance": null,
-  "demos": "<ul><li><a href=\"/material-ui/react-portal/\">Portal</a></li></ul>",
+  "demos": "<ul><li><a href=\"/base/react-portal/\">Portal</a></li>\n<li><a href=\"/material/react-portal/\">Portal</a></li></ul>",
   "cssComponent": false
 }

docs/pages/base/react-portal.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import {
+  demos,
+  docs,
+  demoComponents,
+} from 'docs/data/base/components/portal/portal.md?@mui/markdown';
+
+export default function Page() {
+  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
+}

docs/scripts/buildApiUtils.ts

@@ -108,6 +108,7 @@ const migratedBaseComponents = [
   'ClickAwayListener',
   'MenuUnstyled',
   'MenuItemUnstyled',
+  'Portal',
 ];
 
 export const getGenericComponentInfo = (filename: string): ComponentInfo => {

docs/src/pagesApi.js

@@ -106,7 +106,6 @@ module.exports = [
   { pathname: '/api-docs/popover' },
   { pathname: '/api-docs/popper' },
   { pathname: '/api-docs/popper-unstyled' },
-  { pathname: '/api-docs/portal' },
   { pathname: '/api-docs/radio' },
   { pathname: '/api-docs/radio-group' },
   { pathname: '/api-docs/rating' },

packages/mui-base/src/Portal/Portal.d.ts

@@ -26,10 +26,11 @@ export interface PortalProps {
  *
  * Demos:
  *
- * - [Portal](https://mui.com/components/portal/)
+ * - [Portal](https://mui.com/base/react-portal/)
+ * - [Portal](https://mui.com/material/react-portal/)
  *
  * API:
  *
- * - [Portal API](https://mui.com/api/portal/)
+ * - [Portal API](https://mui.com/base/api/portal/)
  */
 export default function Portal(props: PortalProps): JSX.Element;