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 fcc8d5e363ac01..7618b34439ab53 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 @@ -15,5 +15,5 @@ githubLabel: 'component: ClickAwayListener' Please refer to the [Click-Away Listener](/base-ui/react-click-away-listener/) component page in the Base UI docs for demos and details on usage. Click-Away Listener is a part of the standalone [Base UI](/base-ui/) 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. +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 Base UI 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 c003737331abaf..dec36823a9d88f 100644 --- a/docs/data/material/components/no-ssr/no-ssr.md +++ b/docs/data/material/components/no-ssr/no-ssr.md @@ -14,5 +14,5 @@ components: NoSsr Please refer to the [No-SSR](/base-ui/react-no-ssr/) component page in the Base UI docs for demos and details on usage. No-SSR is a part of the standalone [Base UI](/base-ui/) 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. +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 Base UI gets a stable release. ::: diff --git a/docs/data/material/components/popper/popper.md b/docs/data/material/components/popper/popper.md index f7101d8df762ba..24c9dcb54c8423 100644 --- a/docs/data/material/components/popper/popper.md +++ b/docs/data/material/components/popper/popper.md @@ -11,21 +11,21 @@ githubSource: packages/mui-material/src/Popper

A Popper can be used to display some content on top of another. It's an alternative to react-popper.

-Some important features of the `Popper` component: +Some important features of the Popper component: - 🕷 Popper relies on the 3rd party library ([Popper.js](https://popper.js.org/)) for perfect positioning. - 💄 It's an alternative API to react-popper. It aims for simplicity. -- The children is [`Portal`](/material-ui/react-portal/) to the body of the document to avoid rendering problems. +- Its child element is a [Base UI Portal](/base-ui/react-portal/) on the body of the document to avoid rendering problems. You can disable this behavior with `disablePortal`. -- The scroll isn't blocked like with the [`Popover`](/material-ui/react-popover/) component. +- The scroll isn't blocked like with the [Popover](/material-ui/react-popover/) component. The placement of the popper updates with the available area in the viewport. -- Clicking away does not hide the `Popper` component. - If you need this behavior, you can use [`ClickAwayListener`](/material-ui/react-click-away-listener/) - see the example in the [menu documentation section](/material-ui/react-menu/#menulist-composition). +- Clicking away does not hide the Popper component. + If you need this behavior, you can use the [Base UI Click-Away Listener](/base-ui/react-click-away-listener/) - see the example in the [menu documentation section](/material-ui/react-menu/#menulist-composition). - The `anchorEl` is passed as the reference object to create a new `Popper.js` instance. {{"component": "@mui/docs/ComponentLinkHeader", "design": false}} -## Basic popper +## Basic Popper {{"demo": "SimplePopper.js"}} diff --git a/docs/data/material/components/portal/portal.md b/docs/data/material/components/portal/portal.md index 06c3885f4169cb..2f66f2159fd063 100644 --- a/docs/data/material/components/portal/portal.md +++ b/docs/data/material/components/portal/portal.md @@ -15,5 +15,5 @@ githubLabel: 'component: Portal' Please refer to the [Portal](/base-ui/react-portal/) component page in the Base UI docs for demos and details on usage. Portal is a part of the standalone [Base UI](/base-ui/) 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. +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 Base UI gets a stable release. ::: diff --git a/docs/data/material/components/text-fields/text-fields.md b/docs/data/material/components/text-fields/text-fields.md index 356f8d2149dea6..8142a867b4b700 100644 --- a/docs/data/material/components/text-fields/text-fields.md +++ b/docs/data/material/components/text-fields/text-fields.md @@ -44,8 +44,8 @@ The `helperText` prop can then be used to provide feedback to the user about the ## Multiline -The `multiline` prop transforms the text field into a [TextareaAutosize](/material-ui/react-textarea-autosize/) element. -Unless the `rows` prop is set, the height of the text field dynamically matches its content (using [TextareaAutosize](/material-ui/react-textarea-autosize/)). +The `multiline` prop transforms the Text Field into a [Base UI Textarea Autosize](/base-ui/react-textarea-autosize/) element. +Unless the `rows` prop is set, the height of the text field dynamically matches its content. You can use the `minRows` and `maxRows` props to bound it. {{"demo": "MultilineTextFields.js"}} diff --git a/docs/data/material/components/textarea-autosize/textarea-autosize.md b/docs/data/material/components/textarea-autosize/textarea-autosize.md index dd404a2f340e7e..d4b51a9a2da082 100644 --- a/docs/data/material/components/textarea-autosize/textarea-autosize.md +++ b/docs/data/material/components/textarea-autosize/textarea-autosize.md @@ -15,5 +15,5 @@ githubLabel: 'component: TextareaAutosize' Please refer to the [Textarea Autosize](/base-ui/react-textarea-autosize/) component page in the Base UI docs for demos and details on usage. Textarea Autosize is a part of the standalone [Base UI](/base-ui/) 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. +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 Base UI gets a stable release. ::: diff --git a/docs/data/material/customization/shadow-dom/shadow-dom.md b/docs/data/material/customization/shadow-dom/shadow-dom.md index dbb2c931f91654..fc19540b8b0f9b 100644 --- a/docs/data/material/customization/shadow-dom/shadow-dom.md +++ b/docs/data/material/customization/shadow-dom/shadow-dom.md @@ -32,7 +32,7 @@ ReactDOM.createRoot(shadowRootElement).render( ### 2. Theme -Material UI components like `Menu`, `Dialog`, `Popover` and others use [`Portal`](/material-ui/react-portal/) to render a new "subtree" in a container outside of current DOM hierarchy. +Material UI components like Menu, Dialog, Popover, and others use the [Base UI Portal](/base-ui/react-portal/) component to render a new "subtree" in a container outside of current DOM hierarchy. By default, this container is `document.body`. But since the styles are applied only inside of the Shadow DOM, we need to render portals inside the Shadow DOM container as well: diff --git a/docs/data/material/integrations/interoperability/interoperability.md b/docs/data/material/integrations/interoperability/interoperability.md index 1676780993c7f4..56c22bfc22d13c 100644 --- a/docs/data/material/integrations/interoperability/interoperability.md +++ b/docs/data/material/integrations/interoperability/interoperability.md @@ -376,7 +376,7 @@ const CustomizedSlider = styled(Slider)( ### Portals -The [Portal](/material-ui/react-portal/) provides a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. +The [Base UI Portal](/base-ui/react-portal/) component provides a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. Because of the way styled-components scopes its CSS, you may run into issues where styling is not applied. For example, if you attempt to style the `tooltip` generated by the [Tooltip](/material-ui/react-tooltip/) component, diff --git a/docs/data/material/pages.ts b/docs/data/material/pages.ts index d4758f3e8a7600..bcbfcebc05f48f 100644 --- a/docs/data/material/pages.ts +++ b/docs/data/material/pages.ts @@ -117,14 +117,22 @@ const pages: MuiPage[] = [ pathname: '/material-ui/components/utils', subheader: 'utils', children: [ - { pathname: '/material-ui/react-click-away-listener', title: 'Click-Away Listener' }, + { + pathname: '/material-ui/react-click-away-listener', + title: 'Click-Away Listener', + deprecated: true, + }, { pathname: '/material-ui/react-css-baseline', title: 'CSS Baseline' }, { pathname: '/material-ui/react-modal' }, - { pathname: '/material-ui/react-no-ssr', title: 'No SSR' }, + { pathname: '/material-ui/react-no-ssr', title: 'No SSR', deprecated: true }, { pathname: '/material-ui/react-popover' }, { pathname: '/material-ui/react-popper' }, - { pathname: '/material-ui/react-portal' }, - { pathname: '/material-ui/react-textarea-autosize', title: 'Textarea Autosize' }, + { pathname: '/material-ui/react-portal', deprecated: true }, + { + pathname: '/material-ui/react-textarea-autosize', + title: 'Textarea Autosize', + deprecated: true, + }, { pathname: '/material-ui/transitions' }, { pathname: '/material-ui/react-use-media-query', title: 'useMediaQuery' }, ],