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

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

@@ -7,63 +7,19 @@ 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
-
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
-## 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"}}
+## Migrate to MUI Base
 
 :::warning
-⚠️ In this mode, only interactions on the scrollbar of the document is ignored.
-:::
-
-## 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>
-```
+Click-Away Listener is now part of the standalone [MUI Base](/base/getting-started/overview/) component library.
+It is currently re-exported in `@mui/material` for convenience, but it may be deprecated in a future major version of Material UI.
 
-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.
+To continue using this component and avoid future breaking changes, we strongly recommend that you [install MUI Base](/base/getting-started/installation/) and import this component from the `@mui/base` package:
 
 ```js
 import ClickAwayListener from '@mui/base/ClickAwayListener';
 ```
+
+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.
+:::

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

@@ -6,39 +6,19 @@ 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:
+## Migrate to 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).
+:::warning
+No-SSR is now part of the standalone [MUI Base](/base/getting-started/overview/) component library.
+It is currently re-exported in `@mui/material` for convenience, but it may be deprecated in a future major version of Material UI.
 
-{{"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.
+To continue using this component and avoid future breaking changes, we strongly recommend that you [install MUI Base](/base/getting-started/installation/) and import this component from the `@mui/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.
+:::

docs/data/material/components/portal/portal.md

@@ -7,28 +7,19 @@ githubLabel: 'component: Portal'
 
 # Portal
 
-<p class="description">The portal component renders its children into a new "subtree" outside of current DOM hierarchy.</p>
+<p class="description">The Portal component lets you render its children into a DOM node that exists outside of its own DOM hierarchy.</p>
 
-The children of the portal component will be appended to the `container` specified.
-The component is used internally by the [`Modal`](/material-ui/react-modal/) and [`Popper`](/material-ui/react-popper/) components.
+## Migrate to MUI Base
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
+:::warning
+Portal is now part of the standalone [MUI Base](/base/getting-started/overview/) component library.
+It is currently re-exported in `@mui/material` for convenience, but it may be deprecated in a future major version of Material UI.
 
-## 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.
-
-## 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.
+To continue using this component and avoid future breaking changes, we strongly recommend that you [install MUI Base](/base/getting-started/installation/) and import this component from the `@mui/base` package:
 
 ```js
 import Portal from '@mui/base/Portal';
 ```
+
+Please refer to the [Portal](/base/react-portal/) component page in the MUI Base docs for examples and details on usage.
+:::

docs/data/material/components/textarea-autosize/textarea-autosize.md

@@ -7,32 +7,19 @@ githubLabel: 'component: TextareaAutosize'
 
 # Textarea Autosize
 
-<p class="description">A textarea component for React which grows with content.</p>
+<p class="description">The Textarea Autosize component gives you a textarea HTML element that automatically adjusts its height to match the length of the content within.</p>
 
-- 📦 [1.5 kB gzipped](/size-snapshot/)
+## Migrate to MUI Base
 
-The `TextareaAutosize` component automatically adjust the textarea height on keyboard and window resize events.
+:::warning
+Textarea Autosize is now part of the standalone [MUI Base](/base/getting-started/overview/) component library.
+It is currently re-exported in `@mui/material` for convenience, but it may be deprecated in a future major version of Material UI.
 
-{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
-
-## Empty
-
-{{"demo": "EmptyTextarea.js"}}
-
-## Minimum height
-
-{{"demo": "MinHeightTextarea.js"}}
-
-## Maximum height
-
-{{"demo": "MaxHeightTextarea.js"}}
-
-## Base
-
-The [TextareaAutosize](/base/react-textarea-autosize/) component is defined in the @mui/base package.
-It is reexported from @mui/material for convenience.
-In your application you may import it from either package.
+To continue using this component and avoid future breaking changes, we strongly recommend that you [install MUI Base](/base/getting-started/installation/) and import this component from the `@mui/base` package:
 
 ```js
 import TextareaAutosize from '@mui/base/TextareaAutosize';
 ```
+
+Please refer to the [Textarea Autosize](/base/react-textarea-autosize/) component page in the MUI Base docs for examples and details on usage.
+:::