[docs] Direct users from Material UI to MUI Base for duplicated components

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

@@ -7,7 +7,7 @@ githubLabel: 'component: Portal'
 
 # Portal
 
-<p class="description">The Portal component lets you render its children into a DOM node that exists outside of its own DOM hierarchy.</p>
+<p class="description">The Portal component lets you render its children into a DOM node that exists outside of the Portal's own DOM hierarchy.</p>
 
 ## Introduction
 
@@ -45,7 +45,7 @@ According to [the React docs](https://reactjs.org/docs/portals.html), portals ar
 
 The Portal component accepts a `container` prop that passes a `ref` to the DOM node where its children will be mounted.
 
-The following demo shows how a `<span>` nested within a Portal can be appended to a node outside of its own DOM hierarchy—click **Mount children** to see how it behaves:
+The following demo shows how a `<span>` nested within a Portal can be appended to a node outside of the Portal's DOM hierarchy—click **Mount children** to see how it behaves:
 
 {{"demo": "SimplePortal.js"}}
 

docs/data/material/components/click-away-listener/click-away-listener.md

@@ -7,63 +7,13 @@ githubLabel: 'component: ClickAwayListener'
 
 # Click-Away Listener
 
-<p class="description">The ClickAwayListener component detects when a click event happens outside of its child element.</p>
+<p class="description">The Click-Away Listener component detects when a click event happens outside of its child element.</p>
 
-- 📦 [992 B gzipped](/size-snapshot/).
-- ⚛️ Supports portals
+## MUI Base
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+:::info
+Click-Away Listener is a part of the standalone [MUI Base](/base/getting-started/overview/) component library.
+It is currently re-exported from `@mui/material` for your convenience, but it will be removed from this package in a future major version, after `@mui/base` gets a stable release.
 
-## Example
-
-For instance, if you need to hide a menu dropdown when people click anywhere else on your page:
-
-{{"demo": "ClickAway.js"}}
-
-Notice that the component only accepts one child element.
-You can find a more advanced demo on the [Menu documentation section](/material-ui/react-menu/#menulist-composition).
-
-## Portal
-
-The following demo uses [`Portal`](/material-ui/react-portal/) to render the dropdown into a new "subtree" outside of current DOM hierarchy.
-
-{{"demo": "PortalClickAway.js"}}
-
-## Leading edge
-
-By default, the component responds to the trailing events (click + touch end).
-However, you can configure it to respond to the leading events (mouse down + touch start).
-
-{{"demo": "LeadingClickAway.js"}}
-
-:::warning
-⚠️ In this mode, only interactions on the scrollbar of the document is ignored.
+Please refer to the [Click-Away Listener](/base/react-click-away-listener/) component page in the MUI Base docs for examples and details on usage.
 :::
-
-## Accessibility
-
-By default `<ClickAwayListener />` will add an `onClick` handler to its children.
-This can result in e.g. screen readers announcing the children as clickable.
-However, the purpose of the `onClick` handler is not to make `children` interactive.
-
-In order to prevent screen readers from marking non-interactive children as "clickable" add `role="presentation"` to the immediate children:
-
-```tsx
-<ClickAwayListener>
-  <div role="presentation">
-    <h1>non-interactive heading</h1>
-  </div>
-</ClickAwayListener>
-```
-
-This is also required to fix a quirk in NVDA when using Firefox that prevents announcement of alert messages (see [mui/material-ui#29080](https://github.com/mui/material-ui/issues/29080)).
-
-## Unstyled
-
-- 📦 [981 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 ClickAwayListener from '@mui/base/ClickAwayListener';
-```

docs/data/material/components/no-ssr/no-ssr.md

@@ -6,39 +6,13 @@ components: NoSsr
 
 # No SSR
 
-<p class="description">NoSsr purposely removes components from the subject of Server Side Rendering (SSR).</p>
+<p class="description">The No-SSR component defers the rendering of children components from the server to the client.</p>
 
-This component can be useful in a variety of situations:
+## MUI Base
 
-- Escape hatch for broken dependencies not supporting SSR.
-- Improve the time-to-first paint on the client by only rendering above the fold.
-- Reduce the rendering time on the server.
-- Under too heavy server load, you can turn on service degradation.
-- Improve the time-to-interactive by only rendering what's important (with the `defer` property).
+:::info
+No-SSR is a part of the standalone [MUI Base](/base/getting-started/overview/) component library.
+It is currently re-exported from `@mui/material` for your convenience, but it will be removed from this package in a future major version, after `@mui/base` gets a stable release.
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
-## Client-side deferring
-
-{{"demo": "SimpleNoSsr.js"}}
-
-## Frame deferring
-
-At its core, the NoSsr component's purpose is to **defer rendering**.
-As it's illustrated in the previous demo, you can use it to defer the rendering from the server to the client.
-
-But you can also use it to defer the rendering within the client itself.
-You can **wait a screen frame** with the `defer` property to render the children.
-React does [2 commits](https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects) instead of 1.
-
-{{"demo": "FrameDeferring.js"}}
-
-## Unstyled
-
-- 📦 [362 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 NoSsr from '@mui/base/NoSsr';
-```
+Please refer to the [No-SSR](/base/react-no-ssr/) component page in the MUI Base docs for examples and details on usage.
+:::