A textarea component for React which grows with content.
+The Textarea Autosize component gives you a textarea HTML element that automatically adjusts its height to match the length of the content within.
-- 📦 [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 from this package in a future major version of Material UI. -{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +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: -## 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. ```js import TextareaAutosize from '@mui/base/TextareaAutosize'; ``` + +Please refer to the [Textarea Autosize](/base/react-textarea-autosize/) page in the MUI Base docs for examples and details on usage. +::: From 5d161a77e5c5fd0e710924407f47927a34d77705 Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Tue, 29 Nov 2022 15:25:09 -0600 Subject: [PATCH 02/14] clickaway --- .../click-away-listener/ClickAway.js | 41 ------------- .../click-away-listener/ClickAway.tsx | 42 ------------- .../click-away-listener/ClickAway.tsx.preview | 12 ---- .../click-away-listener/LeadingClickAway.js | 45 -------------- .../click-away-listener/LeadingClickAway.tsx | 46 --------------- .../LeadingClickAway.tsx.preview | 16 ----- .../click-away-listener/PortalClickAway.js | 44 -------------- .../click-away-listener/PortalClickAway.tsx | 45 -------------- .../PortalClickAway.tsx.preview | 14 ----- .../click-away-listener.md | 59 +++---------------- 10 files changed, 8 insertions(+), 356 deletions(-) delete mode 100644 docs/data/material/components/click-away-listener/ClickAway.js delete mode 100644 docs/data/material/components/click-away-listener/ClickAway.tsx delete mode 100644 docs/data/material/components/click-away-listener/ClickAway.tsx.preview delete mode 100644 docs/data/material/components/click-away-listener/LeadingClickAway.js delete mode 100644 docs/data/material/components/click-away-listener/LeadingClickAway.tsx delete mode 100644 docs/data/material/components/click-away-listener/LeadingClickAway.tsx.preview delete mode 100644 docs/data/material/components/click-away-listener/PortalClickAway.js delete mode 100644 docs/data/material/components/click-away-listener/PortalClickAway.tsx delete mode 100644 docs/data/material/components/click-away-listener/PortalClickAway.tsx.preview diff --git a/docs/data/material/components/click-away-listener/ClickAway.js b/docs/data/material/components/click-away-listener/ClickAway.js deleted file mode 100644 index c027baf4c76698..00000000000000 --- a/docs/data/material/components/click-away-listener/ClickAway.js +++ /dev/null @@ -1,41 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import ClickAwayListener from '@mui/material/ClickAwayListener'; - -export default function ClickAway() { - const [open, setOpen] = React.useState(false); - - const handleClick = () => { - setOpen((prev) => !prev); - }; - - const handleClickAway = () => { - setOpen(false); - }; - - const styles = { - position: 'absolute', - top: 28, - right: 0, - left: 0, - zIndex: 1, - border: '1px solid', - p: 1, - bgcolor: 'background.paper', - }; - - return ( -The ClickAwayListener component detects when a click event happens outside of its child element.
+The Click-Away Listener component detects when a click event happens outside of its child element.
-- 📦 [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 `The portal component renders its children into a new "subtree" outside of current DOM hierarchy.
+The Portal component lets you render its children into a DOM node that exists outside of its own DOM hierarchy.
-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 from this package in a future major version of Material UI. -## Example +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: -{{"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. ```js import Portal from '@mui/base/Portal'; ``` + +Please refer to the [Portal](/base/react-portal/) page in the MUI Base docs for examples and details on usage. +::: From 684f59999fce4adbe93fde53228896d5d521de85 Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Tue, 29 Nov 2022 15:34:37 -0600 Subject: [PATCH 04/14] restore deleted demos for translated pages --- .../click-away-listener/ClickAway.js | 41 +++++++++++++++++ .../click-away-listener/ClickAway.tsx | 42 +++++++++++++++++ .../click-away-listener/ClickAway.tsx.preview | 12 +++++ .../click-away-listener/LeadingClickAway.js | 45 ++++++++++++++++++ .../click-away-listener/LeadingClickAway.tsx | 46 +++++++++++++++++++ .../LeadingClickAway.tsx.preview | 16 +++++++ .../click-away-listener/PortalClickAway.js | 44 ++++++++++++++++++ .../click-away-listener/PortalClickAway.tsx | 45 ++++++++++++++++++ .../PortalClickAway.tsx.preview | 14 ++++++ .../components/portal/SimplePortal.js | 29 ++++++++++++ .../components/portal/SimplePortal.tsx | 29 ++++++++++++ .../portal/SimplePortal.tsx.preview | 12 +++++ .../textarea-autosize/EmptyTextarea.js | 12 +++++ .../textarea-autosize/EmptyTextarea.tsx | 12 +++++ .../EmptyTextarea.tsx.preview | 5 ++ .../textarea-autosize/MaxHeightTextarea.js | 15 ++++++ .../textarea-autosize/MaxHeightTextarea.tsx | 15 ++++++ .../MaxHeightTextarea.tsx.preview | 8 ++++ .../textarea-autosize/MinHeightTextarea.js | 13 ++++++ .../textarea-autosize/MinHeightTextarea.tsx | 13 ++++++ .../MinHeightTextarea.tsx.preview | 6 +++ 21 files changed, 474 insertions(+) create mode 100644 docs/data/material/components/click-away-listener/ClickAway.js create mode 100644 docs/data/material/components/click-away-listener/ClickAway.tsx create mode 100644 docs/data/material/components/click-away-listener/ClickAway.tsx.preview create mode 100644 docs/data/material/components/click-away-listener/LeadingClickAway.js create mode 100644 docs/data/material/components/click-away-listener/LeadingClickAway.tsx create mode 100644 docs/data/material/components/click-away-listener/LeadingClickAway.tsx.preview create mode 100644 docs/data/material/components/click-away-listener/PortalClickAway.js create mode 100644 docs/data/material/components/click-away-listener/PortalClickAway.tsx create mode 100644 docs/data/material/components/click-away-listener/PortalClickAway.tsx.preview create mode 100644 docs/data/material/components/portal/SimplePortal.js create mode 100644 docs/data/material/components/portal/SimplePortal.tsx create mode 100644 docs/data/material/components/portal/SimplePortal.tsx.preview create mode 100644 docs/data/material/components/textarea-autosize/EmptyTextarea.js create mode 100644 docs/data/material/components/textarea-autosize/EmptyTextarea.tsx create mode 100644 docs/data/material/components/textarea-autosize/EmptyTextarea.tsx.preview create mode 100644 docs/data/material/components/textarea-autosize/MaxHeightTextarea.js create mode 100644 docs/data/material/components/textarea-autosize/MaxHeightTextarea.tsx create mode 100644 docs/data/material/components/textarea-autosize/MaxHeightTextarea.tsx.preview create mode 100644 docs/data/material/components/textarea-autosize/MinHeightTextarea.js create mode 100644 docs/data/material/components/textarea-autosize/MinHeightTextarea.tsx create mode 100644 docs/data/material/components/textarea-autosize/MinHeightTextarea.tsx.preview diff --git a/docs/data/material/components/click-away-listener/ClickAway.js b/docs/data/material/components/click-away-listener/ClickAway.js new file mode 100644 index 00000000000000..c027baf4c76698 --- /dev/null +++ b/docs/data/material/components/click-away-listener/ClickAway.js @@ -0,0 +1,41 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import ClickAwayListener from '@mui/material/ClickAwayListener'; + +export default function ClickAway() { + const [open, setOpen] = React.useState(false); + + const handleClick = () => { + setOpen((prev) => !prev); + }; + + const handleClickAway = () => { + setOpen(false); + }; + + const styles = { + position: 'absolute', + top: 28, + right: 0, + left: 0, + zIndex: 1, + border: '1px solid', + p: 1, + bgcolor: 'background.paper', + }; + + return ( +NoSsr purposely removes components from the subject of Server Side Rendering (SSR).
+The No-SSR component defers the rendering of children components from the server to the client.
-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 from this package in a future major version of Material UI. -{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +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: -## 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/) page in the MUI Base docs for examples and details on usage. +::: From 68449a409564f621e150f15a122eca584e198ca2 Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Tue, 29 Nov 2022 15:40:51 -0600 Subject: [PATCH 06/14] click-away-listener --- .../components/click-away-listener/click-away-listener.md | 3 +-- docs/data/material/components/no-ssr/no-ssr.md | 1 - docs/data/material/components/portal/portal.md | 1 - .../material/components/textarea-autosize/textarea-autosize.md | 1 - 4 files changed, 1 insertion(+), 5 deletions(-) diff --git a/docs/data/material/components/click-away-listener/click-away-listener.md b/docs/data/material/components/click-away-listener/click-away-listener.md index 169845d665c370..a8302de3a31f44 100644 --- a/docs/data/material/components/click-away-listener/click-away-listener.md +++ b/docs/data/material/components/click-away-listener/click-away-listener.md @@ -17,10 +17,9 @@ It is currently re-exported in `@mui/material` for convenience, but it may be de 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-clickaway-listener/) page in the MUI Base docs for examples and details on usage. +Please refer to the [Click-Away Listener](/base/react-click-away-listener/) page in the MUI Base docs for examples and details on usage. ::: diff --git a/docs/data/material/components/no-ssr/no-ssr.md b/docs/data/material/components/no-ssr/no-ssr.md index 4ba4f944d091fa..f0ccc638738a8d 100644 --- a/docs/data/material/components/no-ssr/no-ssr.md +++ b/docs/data/material/components/no-ssr/no-ssr.md @@ -16,7 +16,6 @@ It is currently re-exported in `@mui/material` for convenience, but it may be de 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'; ``` diff --git a/docs/data/material/components/portal/portal.md b/docs/data/material/components/portal/portal.md index ffc15d4230f416..555e68dcae9805 100644 --- a/docs/data/material/components/portal/portal.md +++ b/docs/data/material/components/portal/portal.md @@ -17,7 +17,6 @@ It is currently re-exported in `@mui/material` for convenience, but it may be de 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'; ``` diff --git a/docs/data/material/components/textarea-autosize/textarea-autosize.md b/docs/data/material/components/textarea-autosize/textarea-autosize.md index 434e13632a0953..239391b9a032d4 100644 --- a/docs/data/material/components/textarea-autosize/textarea-autosize.md +++ b/docs/data/material/components/textarea-autosize/textarea-autosize.md @@ -17,7 +17,6 @@ It is currently re-exported in `@mui/material` for convenience, but it may be de 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'; ``` From 443d21efc2d4c9391a3f66d267b6cd1dd962f0e4 Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Tue, 29 Nov 2022 15:43:05 -0600 Subject: [PATCH 07/14] component page --- .../components/click-away-listener/click-away-listener.md | 2 +- docs/data/material/components/no-ssr/no-ssr.md | 2 +- docs/data/material/components/portal/portal.md | 2 +- .../material/components/textarea-autosize/textarea-autosize.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/data/material/components/click-away-listener/click-away-listener.md b/docs/data/material/components/click-away-listener/click-away-listener.md index a8302de3a31f44..313a94953b7391 100644 --- a/docs/data/material/components/click-away-listener/click-away-listener.md +++ b/docs/data/material/components/click-away-listener/click-away-listener.md @@ -21,5 +21,5 @@ To continue using this component and avoid future breaking changes, we strongly import ClickAwayListener from '@mui/base/ClickAwayListener'; ``` -Please refer to the [Click-Away Listener](/base/react-click-away-listener/) page in the MUI Base docs for examples and details on usage. +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. ::: diff --git a/docs/data/material/components/no-ssr/no-ssr.md b/docs/data/material/components/no-ssr/no-ssr.md index f0ccc638738a8d..5ddbf6c2fa1e88 100644 --- a/docs/data/material/components/no-ssr/no-ssr.md +++ b/docs/data/material/components/no-ssr/no-ssr.md @@ -20,5 +20,5 @@ To continue using this component and avoid future breaking changes, we strongly import NoSsr from '@mui/base/NoSsr'; ``` -Please refer to the [No-SSR](/base/react-no-ssr/) page in the MUI Base docs for examples and details on usage. +Please refer to the [No-SSR](/base/react-no-ssr/) component page in the MUI Base docs for examples and details on usage. ::: diff --git a/docs/data/material/components/portal/portal.md b/docs/data/material/components/portal/portal.md index 555e68dcae9805..34b2e8b6002ee1 100644 --- a/docs/data/material/components/portal/portal.md +++ b/docs/data/material/components/portal/portal.md @@ -21,5 +21,5 @@ To continue using this component and avoid future breaking changes, we strongly import Portal from '@mui/base/Portal'; ``` -Please refer to the [Portal](/base/react-portal/) page in the MUI Base docs for examples and details on usage. +Please refer to the [Portal](/base/react-portal/) component page in the MUI Base docs for examples and details on usage. ::: diff --git a/docs/data/material/components/textarea-autosize/textarea-autosize.md b/docs/data/material/components/textarea-autosize/textarea-autosize.md index 239391b9a032d4..78dcf46c636e85 100644 --- a/docs/data/material/components/textarea-autosize/textarea-autosize.md +++ b/docs/data/material/components/textarea-autosize/textarea-autosize.md @@ -21,5 +21,5 @@ To continue using this component and avoid future breaking changes, we strongly import TextareaAutosize from '@mui/base/TextareaAutosize'; ``` -Please refer to the [Textarea Autosize](/base/react-textarea-autosize/) page in the MUI Base docs for examples and details on usage. +Please refer to the [Textarea Autosize](/base/react-textarea-autosize/) component page in the MUI Base docs for examples and details on usage. ::: From a93cb47df6a4c508fe5ce66fe8b34d78da633e5d Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Tue, 29 Nov 2022 15:49:31 -0600 Subject: [PATCH 08/14] copy editing --- .../components/click-away-listener/click-away-listener.md | 2 +- docs/data/material/components/no-ssr/no-ssr.md | 2 +- docs/data/material/components/portal/portal.md | 2 +- .../material/components/textarea-autosize/textarea-autosize.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/data/material/components/click-away-listener/click-away-listener.md b/docs/data/material/components/click-away-listener/click-away-listener.md index 313a94953b7391..33a34459fa73bb 100644 --- a/docs/data/material/components/click-away-listener/click-away-listener.md +++ b/docs/data/material/components/click-away-listener/click-away-listener.md @@ -13,7 +13,7 @@ githubLabel: 'component: ClickAwayListener' :::warning 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 from this package in a future major version of Material UI. +It is currently re-exported in `@mui/material` for convenience, but it may be deprecated in a future major version of Material UI. 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: diff --git a/docs/data/material/components/no-ssr/no-ssr.md b/docs/data/material/components/no-ssr/no-ssr.md index 5ddbf6c2fa1e88..64726b39cfdc59 100644 --- a/docs/data/material/components/no-ssr/no-ssr.md +++ b/docs/data/material/components/no-ssr/no-ssr.md @@ -12,7 +12,7 @@ components: NoSsr :::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 from this package in a future major version of Material UI. +It is currently re-exported in `@mui/material` for convenience, but it may be deprecated in a future major version of Material UI. 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: diff --git a/docs/data/material/components/portal/portal.md b/docs/data/material/components/portal/portal.md index 34b2e8b6002ee1..cf867c0af4e2ba 100644 --- a/docs/data/material/components/portal/portal.md +++ b/docs/data/material/components/portal/portal.md @@ -13,7 +13,7 @@ githubLabel: 'component: Portal' :::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 from this package in a future major version of Material UI. +It is currently re-exported in `@mui/material` for convenience, but it may be deprecated in a future major version of Material UI. 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: diff --git a/docs/data/material/components/textarea-autosize/textarea-autosize.md b/docs/data/material/components/textarea-autosize/textarea-autosize.md index 78dcf46c636e85..f5ca9caf9a61c4 100644 --- a/docs/data/material/components/textarea-autosize/textarea-autosize.md +++ b/docs/data/material/components/textarea-autosize/textarea-autosize.md @@ -13,7 +13,7 @@ githubLabel: 'component: TextareaAutosize' :::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 from this package in a future major version of Material UI. +It is currently re-exported in `@mui/material` for convenience, but it may be deprecated in a future major version of Material UI. 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: From 43361db744ab14475fd5335c4f61bf3ca21a4346 Mon Sep 17 00:00:00 2001 From: Olivier TassinariDetecta se um evento de clique ocorreu fora de um elemento. Ele ouve cliques que ocorrem em algum lugar no documento.
- -- 📦 [992 B gzipped](/size-snapshot/). -- ⚛️ Supports portals - -[A paleta](/system/palette/) com funções de estilo. - -## Exemplo - -Por exemplo, se você precisar ocultar um menu quando as pessoas clicarem em qualquer outro lugar da sua página: - -{{"demo": "ClickAway.js"}} - -Observe que o componente aceita apenas um elemento filho. 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"}} - -## Eventos - -Por padrão, o componente responde aos eventos de clique e de toque final (click + touch end). No entanto, você pode configurá-lo para responder aos eventos de mouse pressionado e toque inicial (mouse down + touch start). - -{{"demo": "LeadingClickAway.js"}} - -:::warning -⚠️ In this mode, only interactions on the scrollbar of the document is ignored. -::: - -## Accessibility - -By default `用于检测点击事件是否发生在元素之外。 它可以监听文档中某处发生的点击事件。
- -- 📦 [992 B gzipped](/size-snapshot/). -- ⚛️ Supports portals - -{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} - -## 示例 - -例如，当用户在点击页面除菜单外的任何一处，您可能想隐藏一个下拉的菜单： - -{{"demo": "ClickAway.js"}} - -请注意，该组件仅接受一个子元素。 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） - -默认情况下，组件响应了尾随事件（trailing events）（点击 + 触摸结束）。 然而，您可以配置它来回应一些主要的事件（leading events）（鼠标按下 + 触摸开始）。 - -{{"demo": "LeadingClickAway.js"}} - -:::warning -⚠️ In this mode, only interactions on the scrollbar of the document is ignored. -::: - -## 无障碍设计 - -By default `O NoSsr remove intencionalmente componentes do contexto de Server Side Rendering (SSR).
- -Esse componente pode ser útil em várias situações: - -- Válvula de escape para dependências quebradas que não suportam SSR. -- Melhorar o tempo para a primeira pintura no cliente renderizando somente a primeira parte da página (above the fold). -- Reduzir o tempo de renderização no servidor. -- Sob carga de servidor muito pesada, você pode ativar a degradação do serviço. -- Melhorar o tempo de interação apenas renderizando o que é importante (com a propriedade `defer`). - -[A paleta](/system/palette/) com funções de estilo. - -## Client-side deferring - -{{"demo": "SimpleNoSsr.js"}} - -## Adiamento de quadros - -Em sua essência, o objetivo do componente NoSsr é **adiar a renderização**. Como está ilustrado na demonstração anterior, você pode usá-lo para adiar a renderização do servidor para o cliente. - -Mas você também pode usá-lo para adiar a renderização dentro do próprio cliente. Você pode **aguardar um quadro de tela** com a propriedade `defer` para renderizar o children. React faz [2 commits](https://pt-br.reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects) em vez de 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'; -``` diff --git a/docs/data/material/components/no-ssr/no-ssr-zh.md b/docs/data/material/components/no-ssr/no-ssr-zh.md deleted file mode 100644 index e017ea8786d7d6..00000000000000 --- a/docs/data/material/components/no-ssr/no-ssr-zh.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -product: material-ui -title: React No SSR（非服务端渲染）的组件 -components: NoSsr ---- - -# 非服务端渲染（SSR） - -NoSsr 的目的是从服务器端渲染（SSR）里删除组件。
- -该组件可用于各种情况： - -- 对于不支持服务端渲染的依赖包实施补救。 -- 通过仅在首屏上呈现，来改善客户端上的首次绘制时间。 -- 减少服务器上的渲染时间。 -- 在过重的服务器负载下，您可以打开服务降级。 -- 通过仅渲染重要的内容（使用 `defer` 属性），从而来改善交互时间。 - -{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} - -## Client-side deferring - -{{"demo": "SimpleNoSsr.js"}} - -## 延迟帧数 - -在其核心中，NoSr 组件的目的是 **推迟渲染**。 正如在前一个演示中所展示的那样，您可以使用它来将推迟从服务器到客户端的渲染。 - -但你也可以使用它来推迟客户端自身的渲染。 您可以使用 `defer` 属性来**等待一个屏幕帧**后，再渲染子组件。 React 会做 [2 次提交](https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects) 而不是 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'; -``` diff --git a/docs/data/material/components/portal/portal-pt.md b/docs/data/material/components/portal/portal-pt.md deleted file mode 100644 index 8afe5ccf2d48a3..00000000000000 --- a/docs/data/material/components/portal/portal-pt.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -product: material-ui -title: Componente React Portal -components: Portal -githubLabel: 'component: Portal' ---- - -# Portal - -O componente portal renderiza seus elementos filho em uma nova "subárvore" fora da hierarquia do DOM atual.
- -O filho do componente portal será adicionado ao `container` especificado. The component is used internally by the [`Modal`](/material-ui/react-modal/) and [`Popper`](/material-ui/react-popper/) components. - -[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'; -``` diff --git a/docs/data/material/components/portal/portal-zh.md b/docs/data/material/components/portal/portal-zh.md deleted file mode 100644 index edf799fcc65f8a..00000000000000 --- a/docs/data/material/components/portal/portal-zh.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -product: material-ui -title: React Portal（传送门）组件 -components: Portal -githubLabel: 'component: Portal' ---- - -# Portal - -传送门组件将其子节点渲染到当前 DOM 结构之外的新 "子类树" 当中。
- -传送门组件的子节点将被添加到指定的 `container` 中。 The component is used internally by the [`Modal`](/material-ui/react-modal/) and [`Popper`](/material-ui/react-popper/) components. - -{{"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'; -``` diff --git a/docs/data/material/components/textarea-autosize/textarea-autosize-pt.md b/docs/data/material/components/textarea-autosize/textarea-autosize-pt.md deleted file mode 100644 index 995d2c9c1319ed..00000000000000 --- a/docs/data/material/components/textarea-autosize/textarea-autosize-pt.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -product: material-ui -title: Componente React de texto autoajustável -components: TextareaAutosize -githubLabel: 'component: TextareaAutosize' ---- - -# Texto autoajustável - -Um componente de texto para React que se ajusta conforme o conteúdo.
- -- 📦 [1.5 kB gzipped](/size-snapshot/) - -O componente `TextareaAutosize` ajusta automaticamente a altura do textarea em eventos de teclado e redimensionamento de janela. - -[A paleta](/system/palette/) com funções de estilo. - -## Vazio - -{{"demo": "EmptyTextarea.js"}} - -## Altura mínima - -{{"demo": "MinHeightTextarea.js"}} - -## Altura máxima - -{{"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. - -```js -import TextareaAutosize from '@mui/base/TextareaAutosize'; -``` diff --git a/docs/data/material/components/textarea-autosize/textarea-autosize-zh.md b/docs/data/material/components/textarea-autosize/textarea-autosize-zh.md deleted file mode 100644 index a0028676b991c0..00000000000000 --- a/docs/data/material/components/textarea-autosize/textarea-autosize-zh.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -product: material-ui -title: React Textarea Autosize（自适应文本框）组件 -components: TextareaAutosize -githubLabel: 'component: TextareaAutosize' ---- - -# Textarea Autosize 自适应文本框 - -一个自适应内容大小的 React 文本框组件。
- -- 📦 [1.5 kB gzipped](/size-snapshot/) - -当触发键盘和窗口大小事件的时候，`TextareaAutosize` 组件将自动调整的文本框的高度。 - -{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} - -## 空白的文本框 - -{{"demo": "EmptyTextarea.js"}} - -## 最小高度 - -{{"demo": "MinHeightTextarea.js"}} - -## 最大高度 - -{{"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. - -```js -import TextareaAutosize from '@mui/base/TextareaAutosize'; -``` From 93ca5a4f93f801b212362ec28c91a1360a39cc3a Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Wed, 30 Nov 2022 16:53:14 -0600 Subject: [PATCH 10/14] second draft --- .../click-away-listener/click-away-listener.md | 12 +++--------- docs/data/material/components/no-ssr/no-ssr.md | 12 +++--------- docs/data/material/components/portal/portal.md | 12 +++--------- .../textarea-autosize/textarea-autosize.md | 12 +++--------- 4 files changed, 12 insertions(+), 36 deletions(-) diff --git a/docs/data/material/components/click-away-listener/click-away-listener.md b/docs/data/material/components/click-away-listener/click-away-listener.md index 33a34459fa73bb..bdc5dd7e2ad655 100644 --- a/docs/data/material/components/click-away-listener/click-away-listener.md +++ b/docs/data/material/components/click-away-listener/click-away-listener.md @@ -9,17 +9,11 @@ githubLabel: 'component: ClickAwayListener'The Click-Away Listener component detects when a click event happens outside of its child element.
-## Migrate to MUI Base +## MUI Base :::warning -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. - -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'; -``` +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 will may be removed from this package in a future major version, after `@mui/base` gets a stable release. 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. ::: diff --git a/docs/data/material/components/no-ssr/no-ssr.md b/docs/data/material/components/no-ssr/no-ssr.md index 64726b39cfdc59..6289160fe5ce87 100644 --- a/docs/data/material/components/no-ssr/no-ssr.md +++ b/docs/data/material/components/no-ssr/no-ssr.md @@ -8,17 +8,11 @@ components: NoSsrThe No-SSR component defers the rendering of children components from the server to the client.
-## Migrate to MUI Base +## MUI Base :::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. - -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'; -``` +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. Please refer to the [No-SSR](/base/react-no-ssr/) component page in the MUI Base docs for examples and details on usage. ::: diff --git a/docs/data/material/components/portal/portal.md b/docs/data/material/components/portal/portal.md index cf867c0af4e2ba..4605d03c7a12d8 100644 --- a/docs/data/material/components/portal/portal.md +++ b/docs/data/material/components/portal/portal.md @@ -9,17 +9,11 @@ githubLabel: 'component: Portal'The Portal component lets you render its children into a DOM node that exists outside of its own DOM hierarchy.
-## Migrate to MUI Base +## MUI Base :::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. - -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'; -``` +Portal 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. Please refer to the [Portal](/base/react-portal/) component page in the MUI Base docs for examples and details on usage. ::: diff --git a/docs/data/material/components/textarea-autosize/textarea-autosize.md b/docs/data/material/components/textarea-autosize/textarea-autosize.md index f5ca9caf9a61c4..26972b642e4eda 100644 --- a/docs/data/material/components/textarea-autosize/textarea-autosize.md +++ b/docs/data/material/components/textarea-autosize/textarea-autosize.md @@ -9,17 +9,11 @@ githubLabel: 'component: TextareaAutosize'The Textarea Autosize component gives you a textarea HTML element that automatically adjusts its height to match the length of the content within.
-## Migrate to MUI Base +## MUI Base :::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. - -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'; -``` +Textarea Autosize 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. Please refer to the [Textarea Autosize](/base/react-textarea-autosize/) component page in the MUI Base docs for examples and details on usage. ::: From e7c78b312e24d1da81bf68d14082ec75cb307fb3 Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Thu, 1 Dec 2022 10:55:39 -0600 Subject: [PATCH 11/14] cal typo --- .../components/click-away-listener/click-away-listener.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/material/components/click-away-listener/click-away-listener.md b/docs/data/material/components/click-away-listener/click-away-listener.md index bdc5dd7e2ad655..a480cfb5e87cf0 100644 --- a/docs/data/material/components/click-away-listener/click-away-listener.md +++ b/docs/data/material/components/click-away-listener/click-away-listener.md @@ -13,7 +13,7 @@ githubLabel: 'component: ClickAwayListener' :::warning 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 will may be removed from this package in a future major version, after `@mui/base` gets a stable release. +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. 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. ::: From 7697405c30b56ea2c578be772692c3ab85e5493a Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Thu, 1 Dec 2022 11:00:18 -0600 Subject: [PATCH 12/14] info callout --- .../components/click-away-listener/click-away-listener.md | 2 +- docs/data/material/components/no-ssr/no-ssr.md | 2 +- docs/data/material/components/portal/portal.md | 2 +- .../material/components/textarea-autosize/textarea-autosize.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/data/material/components/click-away-listener/click-away-listener.md b/docs/data/material/components/click-away-listener/click-away-listener.md index a480cfb5e87cf0..f11266598ad2bd 100644 --- a/docs/data/material/components/click-away-listener/click-away-listener.md +++ b/docs/data/material/components/click-away-listener/click-away-listener.md @@ -11,7 +11,7 @@ githubLabel: 'component: ClickAwayListener' ## MUI Base -:::warning +:::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. diff --git a/docs/data/material/components/no-ssr/no-ssr.md b/docs/data/material/components/no-ssr/no-ssr.md index 6289160fe5ce87..e2df0fc310f65a 100644 --- a/docs/data/material/components/no-ssr/no-ssr.md +++ b/docs/data/material/components/no-ssr/no-ssr.md @@ -10,7 +10,7 @@ components: NoSsr ## MUI Base -:::warning +:::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. diff --git a/docs/data/material/components/portal/portal.md b/docs/data/material/components/portal/portal.md index 4605d03c7a12d8..ec17f9d5b554f0 100644 --- a/docs/data/material/components/portal/portal.md +++ b/docs/data/material/components/portal/portal.md @@ -11,7 +11,7 @@ githubLabel: 'component: Portal' ## MUI Base -:::warning +:::info Portal 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. diff --git a/docs/data/material/components/textarea-autosize/textarea-autosize.md b/docs/data/material/components/textarea-autosize/textarea-autosize.md index 26972b642e4eda..a4067908fe61af 100644 --- a/docs/data/material/components/textarea-autosize/textarea-autosize.md +++ b/docs/data/material/components/textarea-autosize/textarea-autosize.md @@ -11,7 +11,7 @@ githubLabel: 'component: TextareaAutosize' ## MUI Base -:::warning +:::info Textarea Autosize 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. From 6f12e55149ebc4d6df75f7d7ad1fbc3711b6f061 Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Thu, 1 Dec 2022 11:01:26 -0600 Subject: [PATCH 13/14] clarify its --- docs/data/base/components/portal/portal.md | 2 +- docs/data/material/components/portal/portal.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/data/base/components/portal/portal.md b/docs/data/base/components/portal/portal.md index 33ae2297e131e1..193fa895600d94 100644 --- a/docs/data/base/components/portal/portal.md +++ b/docs/data/base/components/portal/portal.md @@ -7,7 +7,7 @@ githubLabel: 'component: Portal' # Portal -The Portal component lets you render its children into a DOM node that exists outside of its own DOM hierarchy.
+The Portal component lets you render its children into a DOM node that exists outside of the Portal's own DOM hierarchy.
## Introduction diff --git a/docs/data/material/components/portal/portal.md b/docs/data/material/components/portal/portal.md index ec17f9d5b554f0..c0d35e031f3a08 100644 --- a/docs/data/material/components/portal/portal.md +++ b/docs/data/material/components/portal/portal.md @@ -7,7 +7,7 @@ githubLabel: 'component: Portal' # Portal -The Portal component lets you render its children into a DOM node that exists outside of its own DOM hierarchy.
+The Portal component lets you render its children into a DOM node that exists outside of the Portal's own DOM hierarchy.
## MUI Base From bff31fcd5662c552b0e71315a5419f73029ef76c Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Mon, 5 Dec 2022 10:06:51 -0600 Subject: [PATCH 14/14] base page clarification --- docs/data/base/components/portal/portal.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/base/components/portal/portal.md b/docs/data/base/components/portal/portal.md index 193fa895600d94..f8a1ff43a07197 100644 --- a/docs/data/base/components/portal/portal.md +++ b/docs/data/base/components/portal/portal.md @@ -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 `` 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 `` 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"}}