The Click-Away Listener component detects when a click event happens outside of its child element.
-## This document has moved +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} -:::warning -Please refer to the [Click-Away Listener](/base-ui/react-click-away-listener/) component page in the MUI Base docs for demos and details on usage. +## Introduction + +Click-Away Listener is a utility component that listens for click events outside of its child. +(Note that it only accepts _one_ child element.) +This is useful for components like the [Popper](/material-ui/react-popper/) which should close when the user clicks anywhere else in the document. +Click-Away Listener also supports the [Portal](/material-ui/react-portal/) component. + +The demo below shows how to hide a menu dropdown when users click anywhere else on the page: + +{{"demo": "ClickAway.js"}} + +## Basics + +### Import + +```jsx +import ClickAwayListener from '@mui/material/ClickAwayListener'; +``` + +## Customization + +### Use with Portal + +The following demo uses the [Portal](/material-ui/react-portal/) component to render the dropdown into a new subtree outside of the current DOM hierarchy: + +{{"demo": "PortalClickAway.js"}} -Click-Away Listener is a part of the standalone MUI Base 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. +### Listening for leading events + +By default, the Click-Away Listener component responds to **trailing events**—the _end_ of a click or touch. + +You can set the component to listen for **leading events** (the start of a click or touch) using the `mouseEvent` and `touchEvent` props, as shown in the following demo: + +:::warning +When the component is set to listen for leading events, interactions with the scrollbar are ignored. ::: + +{{"demo": "LeadingClickAway.js"}} + +## Accessibility + +By default, Click-Away Listener adds an `onClick` handler to its child. +This can result in screen readers announcing that the child is clickable, even though this `onClick` handler has no effect on the child itself. + +To prevent this behavior, add `role="presentation"` to the child element: + +```tsx +The No-SSR component defers the rendering of children components from the server to the client.
-## This document has moved +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} -:::warning -Please refer to the [No-SSR](/base-ui/react-no-ssr/) component page in the MUI Base docs for demos and details on usage. +## Introduction + +No-SSR is a utility component that prevents its children from being rendered on the server, deferring their rendering to the client instead. +This can be useful in a variety of situations, including: + +- To create an escape hatch for broken dependencies that don't support server-side rendering (SSR) +- To improve the time to first paint by only rendering above the fold +- To reduce the rendering time on the server +- To turn on service degradation when the server load is too heavy +- To improve the Time to Interactive (TTI) by only rendering what's important (using the `defer` prop) + +The demo below illustrates how this component works: + +{{"demo": "SimpleNoSsr.js"}} + +## Basics + +### Import -No-SSR is a part of the standalone MUI Base 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. +```jsx +import NoSsr from '@mui/material/NoSsr'; +``` + +## Customization + +### Delay client-side rendering + +You can also use No-SSR to delay the rendering of specific components on the client-side—for example, to let the rest of the application load before an especially complex or data-heavy component. + +The following demo shows how to use the `defer` prop to prioritize rendering the rest of the app outside of what is nested within No-SSR: + +{{"demo": "FrameDeferring.js"}} + +:::warning +When using No-SSR in this way, React applies [two commits](https://react.dev/learn/render-and-commit) instead of one. ::: diff --git a/docs/data/material/components/portal/SimplePortal.js b/docs/data/material/components/portal/SimplePortal.js new file mode 100644 index 00000000000000..2f36c6b139184c --- /dev/null +++ b/docs/data/material/components/portal/SimplePortal.js @@ -0,0 +1,29 @@ +import * as React from 'react'; +import Portal from '@mui/material/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 ( +The Portal component lets you render its children into a DOM node that exists outside of the Portal's own DOM hierarchy.
-## This document has moved +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} -:::warning -Please refer to the [Portal](/base-ui/react-portal/) component page in the MUI Base docs for demos and details on usage. +## Introduction -Portal is a part of the standalone MUI Base 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. +Portal is a utility component built around [React's `createPortal()` API](https://react.dev/reference/react-dom/createPortal). +It gives you the functionality of `createPortal()` in a convenient component form. +It's used internally by the [Modal](/base-ui/react-modal/) and [Popper](/base-ui/react-popper/) components. + +:::info +According to [the React docs](https://react.dev/reference/react-dom/createPortal), portals are useful when "you need the child element to visually 'break out' of its container"—for instance, modals and tooltips, which need to exist outside of the normal flow of the document. +::: + +Normally, children of a component are rendered within that component's DOM tree. +But sometimes it's necessary to mount a child at a different location in the DOM. +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 `` 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"}} + +## Basics + +### Import + +```jsx +import Portal from '@mui/material/Portal'; +``` + +## Customization + +### Server-side Portals + +The DOM API isn't available on the server, so you need to use the `container` prop callback. +This callback is called during a React layout effect: + +```jsx +The Textarea Autosize component gives you a textarea HTML element that automatically adjusts its height to match the length of the content within.
+The Textarea Autosize component automatically adjusts its height to match the length of the content within.
-## This document has moved +{{"component": "@mui/docs/ComponentLinkHeader", "design": false}} -:::warning -Please refer to the [Textarea Autosize](/base-ui/react-textarea-autosize/) component page in the MUI Base docs for demos and details on usage. +## Introduction -Textarea Autosize is a part of the standalone MUI Base 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. -::: +Textarea Autosize is a utility component that replaces the native `