From f3a88684416e2acc2a1e2e9bbfacb19b6069dc4e Mon Sep 17 00:00:00 2001 From: Trevor Gau Date: Mon, 8 Feb 2021 15:56:02 -0500 Subject: [PATCH 01/14] Add a Portal component for rendering content outside of the current DOM element. --- docs/content/Portal.mdx | 66 +++++++++ .../src/@primer/gatsby-theme-doctocat/nav.yml | 2 + src/Portal/Portal.tsx | 79 +++++++++++ src/Portal/index.ts | 4 + src/index.ts | 3 +- src/stories/Portal.stories.tsx | 129 ++++++++++++++++++ 6 files changed, 282 insertions(+), 1 deletion(-) create mode 100644 docs/content/Portal.mdx create mode 100644 src/Portal/Portal.tsx create mode 100644 src/Portal/index.ts create mode 100644 src/stories/Portal.stories.tsx diff --git a/docs/content/Portal.mdx b/docs/content/Portal.mdx new file mode 100644 index 00000000000..a36bc5869b2 --- /dev/null +++ b/docs/content/Portal.mdx @@ -0,0 +1,66 @@ +--- +title: Portal +--- + + +Portals allow you to create a separation between the logical React component hierarchy and the physical DOM. See the [React documentation on portals](https://reactjs.org/docs/portals.html) for an in-depth explanation. + +This Portal component will render all children into the portal root DOM node instead of as children of this Portal's parent DOM element. This is useful for breaking out of the current stacking context. For example, popup menus and tool tips may need to render on top of (read: covering up) other UI. The best way to guarantee this is to add these elements to top-level DOM, such as directly on document.body. These elements can then be moved to the correct location using absolute positioning. + +## Customizing the portal root +By default, Primer will create a portal root for you as a child of `document.body`. If you would like to specify your own portal root, there are two options: + +1. Before rendering a `` for the first time, ensure that an element exists with id `__primerPortalRoot__`. If that exists, it will be used as the default portal root. +2. Call the `registerPortalRoot` function, passing in the element you would like to use as your default portal root. + +## Multiple portal roots +There may be situations where you want to have multiple portal roots. Advanced scenarios may necessitate multiple stacking contexts for overlays. You can set up multiple roots using the `registerPortalRoot` function. Calling this function with an element and a string `name` will register the root, which can then be used by creating a `` with a `name` prop matching the one you registered. + +## Default example + +```jsx + + Regardless of where this appears in the React component + tree, this text will be rendered in the DOM within the + portal root at document.body. + +``` + +## Example: custom portal root + +```html + +
+``` +or +```js +import { registerPortalRoot } from "@primer/components" +registerPortalRoot(document.querySelector(".my-portal-root")!) +``` + +## Example: multiple portal roots +```jsx +import { Portal, registerPortalRoot } from "@primer/components" +registerPortalRoot(document.querySelector(".scrolling-canvas-root")!, "scrolling-canvas") +// ... + +
This div will be rendered into the element registered above.
+ +
+ This div will be rendered into the default + portal root created at document.body +
+ + +``` + +## System props + +Since Portals do not render UI on their own, they do not accept any system props. + +## Component props + +| Name | Type | Default | Description | +| :- | :- | :-: | :- | +| onMount | () => void | | Called when this portal is added to the DOM | +| containerName | string | | Renders the portal children into the container registered with the given name. If omitted, children are rendered into the default portal root. | \ No newline at end of file diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index b133699c444..34fa05b3555 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -77,6 +77,8 @@ url: /PointerBox - title: Popover url: /Popover + - title: Portal + url: /Portal - title: Position url: /Position - title: ProgressBar diff --git a/src/Portal/Portal.tsx b/src/Portal/Portal.tsx new file mode 100644 index 00000000000..f07ed80b204 --- /dev/null +++ b/src/Portal/Portal.tsx @@ -0,0 +1,79 @@ +import React from 'react' +import {createPortal} from 'react-dom' + +const PRIMER_PORTAL_ROOT_ID = '__primerPortalRoot__' +const DEFAULT_PORTAL_CONTAINER_NAME = '__default__' + +const portalRootRegistry: {[key: string]: Element} = {} + +/** + * Register a container to serve as a portal root. + * @param root The element that will be the root for portals created in this container + * @param name The name of the container, to be used with the `containerName` prop on the Portal Component. + * If name is not specified, registers the default portal root. + */ +export function registerPortalRoot(root: Element, name?: string): void { + portalRootRegistry[name ?? DEFAULT_PORTAL_CONTAINER_NAME] = root +} + +// Ensures that a default portal root exists and is registered. If a DOM element exists +// with id __primerPortalRoot__, allow that element to serve as the default portl root. +// Otherwise, create that element and attach it to the end of document.body. +function ensureDefaultPortal() { + if (!(DEFAULT_PORTAL_CONTAINER_NAME in portalRootRegistry)) { + let defaultPortalContainer = document.getElementById(PRIMER_PORTAL_ROOT_ID) + if (!(defaultPortalContainer instanceof Element)) { + defaultPortalContainer = document.createElement('div') + defaultPortalContainer.setAttribute('id', PRIMER_PORTAL_ROOT_ID) + document.body.appendChild(defaultPortalContainer) + } + portalRootRegistry[DEFAULT_PORTAL_CONTAINER_NAME] = defaultPortalContainer + } +} + +export interface PortalProps { + /** + * Called when this portal is added to the DOM + */ + onMount?: () => void + + /** + * Optional. Mount this portal at the container specified + * by this name. The container must be previously registered + * with `registerPortal`. + */ + containerName?: string +} + +/** + * Creates a React Portal, placing all children in a separate physical DOM root node. + * @see https://reactjs.org/docs/portals.html + */ +export const Portal: React.FC = ({children, onMount, containerName: _containerName}) => { + const elementRef = React.useRef(document.createElement('div')) + + React.useEffect(() => { + let containerName = _containerName + if (containerName == undefined) { + containerName = DEFAULT_PORTAL_CONTAINER_NAME + ensureDefaultPortal() + } + const parentElement = portalRootRegistry[containerName] + + if (!parentElement) { + throw new Error( + `Portal container '${_containerName}' is not yet registered. Container must be registered with registerPortal before use.` + ) + } + const element = elementRef.current + parentElement.appendChild(element) + onMount?.() + + return () => { + parentElement.removeChild(element) + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [elementRef]) + + return createPortal(children, elementRef.current) +} diff --git a/src/Portal/index.ts b/src/Portal/index.ts new file mode 100644 index 00000000000..b644e02340a --- /dev/null +++ b/src/Portal/index.ts @@ -0,0 +1,4 @@ +import {Portal, PortalProps, registerPortalRoot} from "./Portal" + +export default Portal +export {registerPortalRoot, PortalProps} \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index c34227bb102..c403f6d3a82 100644 --- a/src/index.ts +++ b/src/index.ts @@ -27,7 +27,7 @@ export { ButtonInvisible, ButtonTableList, ButtonClose, - ButtonGroup, + ButtonGroup } from './Button' export {default as Caret} from './Caret' export {default as CircleBadge} from './CircleBadge' @@ -49,6 +49,7 @@ export {default as Pagehead} from './Pagehead' export {default as Pagination} from './Pagination' export {default as PointerBox} from './PointerBox' export {default as Popover} from './Popover' +export {default as Portal, PortalProps, registerPortalRoot} from './Portal' export {default as ProgressBar} from './ProgressBar' export {default as SelectMenu} from './SelectMenu' export {default as SideNav} from './SideNav' diff --git a/src/stories/Portal.stories.tsx b/src/stories/Portal.stories.tsx new file mode 100644 index 00000000000..643649fa17b --- /dev/null +++ b/src/stories/Portal.stories.tsx @@ -0,0 +1,129 @@ +/* eslint-disable @typescript-eslint/explicit-module-boundary-types */ +import React from 'react' +import {Meta} from '@storybook/react' + +import {BaseStyles, Box, Portal, registerPortalRoot} from '..' + +let renderedOnce = false +export default { + title: 'Generic behaviors/Portal', + component: Portal, + decorators: [ + Story => { + React.useEffect(() => { + if (renderedOnce) { + window.location.reload() + } else { + renderedOnce = true + } + }) + return ( + + + + Note: Because Portal registers portal roots globally, we must refresh the page after + switching between Portal stories. This should happen automatically. + + + + + ) + } + ], + argTypes: { + variant: { + control: { + type: 'radio', + options: ['small', 'medium', 'large'] + } + } + } +} as Meta + +export const defaultPortal = () => ( + <> + Root position + + Outer container + + Inner container + + Portaled content rendered at document root, even outside of <BaseStyles>. + + + + +) + +export const customPortalRootById = () => ( + <> + Root position + + Outer container + + Inner container + Portaled content rendered at the outer container. + + + +) + +export const CustomPortalRootByRegistration: React.FC> = () => { + const outerContainerRef = React.useRef(null) + const [mounted, setMounted] = React.useState(false) + React.useEffect(() => { + if (outerContainerRef.current instanceof HTMLElement) { + registerPortalRoot(outerContainerRef.current) + setMounted(true) + } + }, [outerContainerRef]) + return ( + <> + Root position + + {mounted && ( + <> + Outer container + + Inner container + Portaled content rendered at the outer container. + + + )} + + + ) +} + +export const MultiplePortalRoots: React.FC> = () => { + const outerContainerRef = React.useRef(null) + const innerContainerRef = React.useRef(null) + const [mounted, setMounted] = React.useState(false) + React.useEffect(() => { + if (outerContainerRef.current instanceof HTMLElement && innerContainerRef.current instanceof HTMLElement) { + registerPortalRoot(outerContainerRef.current, 'outer') + registerPortalRoot(innerContainerRef.current, 'inner') + setMounted(true) + } + }, [outerContainerRef]) + return ( + <> + Root position + + Outer container + + {mounted && ( + <> + Portaled content rendered at the outer container. + Portaled content rendered at the end of the inner container. + + Portaled content rendered at document root, even outside of <BaseStyles>. + + + )} + Inner container + + + + ) +} From af574166a5c5306e2b65bd8f7b0f0fbf1323c8b2 Mon Sep 17 00:00:00 2001 From: Trevor Gau Date: Thu, 11 Feb 2021 14:17:11 -0500 Subject: [PATCH 02/14] Allow portals to be de-registered (undocumented feature?) --- src/Portal/Portal.tsx | 8 ++++++-- src/stories/Button.stories.tsx | 15 +++++++++++++++ src/stories/Portal.stories.tsx | 27 ++++----------------------- 3 files changed, 25 insertions(+), 25 deletions(-) diff --git a/src/Portal/Portal.tsx b/src/Portal/Portal.tsx index f07ed80b204..573fb9ed1e1 100644 --- a/src/Portal/Portal.tsx +++ b/src/Portal/Portal.tsx @@ -12,8 +12,12 @@ const portalRootRegistry: {[key: string]: Element} = {} * @param name The name of the container, to be used with the `containerName` prop on the Portal Component. * If name is not specified, registers the default portal root. */ -export function registerPortalRoot(root: Element, name?: string): void { - portalRootRegistry[name ?? DEFAULT_PORTAL_CONTAINER_NAME] = root +export function registerPortalRoot(root: Element | undefined, name?: string): void { + if (root instanceof Element) { + portalRootRegistry[name ?? DEFAULT_PORTAL_CONTAINER_NAME] = root + } else { + delete portalRootRegistry[name ?? DEFAULT_PORTAL_CONTAINER_NAME]; + } } // Ensures that a default portal root exists and is registered. If a DOM element exists diff --git a/src/stories/Button.stories.tsx b/src/stories/Button.stories.tsx index 3acdd5c23d4..1805d8c0715 100644 --- a/src/stories/Button.stories.tsx +++ b/src/stories/Button.stories.tsx @@ -30,6 +30,21 @@ export default { } ], argTypes: { + as: { + table: { + disable: true + } + }, + theme: { + table: { + disable: true + } + }, + sx: { + table: { + disable: true + } + }, variant: { control: { type: 'radio', diff --git a/src/stories/Portal.stories.tsx b/src/stories/Portal.stories.tsx index 643649fa17b..9894a1b8da8 100644 --- a/src/stories/Portal.stories.tsx +++ b/src/stories/Portal.stories.tsx @@ -4,40 +4,21 @@ import {Meta} from '@storybook/react' import {BaseStyles, Box, Portal, registerPortalRoot} from '..' -let renderedOnce = false export default { title: 'Generic behaviors/Portal', component: Portal, decorators: [ Story => { - React.useEffect(() => { - if (renderedOnce) { - window.location.reload() - } else { - renderedOnce = true - } - }) + // Since portal roots are registered globally, we need this line so that each storybook + // story works in isolation. + registerPortalRoot(undefined) return ( - - - Note: Because Portal registers portal roots globally, we must refresh the page after - switching between Portal stories. This should happen automatically. - - ) } - ], - argTypes: { - variant: { - control: { - type: 'radio', - options: ['small', 'medium', 'large'] - } - } - } + ] } as Meta export const defaultPortal = () => ( From 2ab2e85d9d439d6ed3a02e74fe74c24b926c368b Mon Sep 17 00:00:00 2001 From: Trevor Gau Date: Thu, 11 Feb 2021 15:54:30 -0500 Subject: [PATCH 03/14] Default portal root to a BaseStyles element if available. --- src/BaseStyles.tsx | 2 +- src/Portal/Portal.tsx | 7 ++++++- src/stories/Portal.stories.tsx | 4 ++-- 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/BaseStyles.tsx b/src/BaseStyles.tsx index 9e0fb178a1c..c520b1d9654 100644 --- a/src/BaseStyles.tsx +++ b/src/BaseStyles.tsx @@ -38,7 +38,7 @@ function BaseStyles(props: BaseStylesProps) { const {children, ...rest} = props useMouseIntent() return ( - + {children} diff --git a/src/Portal/Portal.tsx b/src/Portal/Portal.tsx index 573fb9ed1e1..7020d380535 100644 --- a/src/Portal/Portal.tsx +++ b/src/Portal/Portal.tsx @@ -29,7 +29,12 @@ function ensureDefaultPortal() { if (!(defaultPortalContainer instanceof Element)) { defaultPortalContainer = document.createElement('div') defaultPortalContainer.setAttribute('id', PRIMER_PORTAL_ROOT_ID) - document.body.appendChild(defaultPortalContainer) + const suitablePortalRoot = document.querySelector("[data-portal-root]"); + if (suitablePortalRoot) { + suitablePortalRoot.appendChild(defaultPortalContainer); + } else { + document.body.appendChild(defaultPortalContainer) + } } portalRootRegistry[DEFAULT_PORTAL_CONTAINER_NAME] = defaultPortalContainer } diff --git a/src/stories/Portal.stories.tsx b/src/stories/Portal.stories.tsx index 9894a1b8da8..8f054aa121c 100644 --- a/src/stories/Portal.stories.tsx +++ b/src/stories/Portal.stories.tsx @@ -29,7 +29,7 @@ export const defaultPortal = () => ( Inner container - Portaled content rendered at document root, even outside of <BaseStyles>. + Portaled content rendered at <BaseStyles> root. @@ -98,7 +98,7 @@ export const MultiplePortalRoots: React.FC> = () => { Portaled content rendered at the outer container. Portaled content rendered at the end of the inner container. - Portaled content rendered at document root, even outside of <BaseStyles>. + Portaled content rendered at <BaseStyles> root. )} From f4ecfaf1fa7ce79201866b892e67043a5f4f3064 Mon Sep 17 00:00:00 2001 From: Trevor Gau Date: Thu, 11 Feb 2021 16:00:26 -0500 Subject: [PATCH 04/14] Remove Portal from docs and index.ts until it is ready to be shipped (see #1025). --- docs/src/@primer/gatsby-theme-doctocat/nav.yml | 4 ++-- src/index.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index 34fa05b3555..c24a2e6ca30 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -77,8 +77,8 @@ url: /PointerBox - title: Popover url: /Popover - - title: Portal - url: /Portal + # - title: Portal + # url: /Portal - title: Position url: /Position - title: ProgressBar diff --git a/src/index.ts b/src/index.ts index c403f6d3a82..fbc449e58ae 100644 --- a/src/index.ts +++ b/src/index.ts @@ -49,7 +49,7 @@ export {default as Pagehead} from './Pagehead' export {default as Pagination} from './Pagination' export {default as PointerBox} from './PointerBox' export {default as Popover} from './Popover' -export {default as Portal, PortalProps, registerPortalRoot} from './Portal' +// export {default as Portal, PortalProps, registerPortalRoot} from './Portal' export {default as ProgressBar} from './ProgressBar' export {default as SelectMenu} from './SelectMenu' export {default as SideNav} from './SideNav' From 54e9123c0a2b5c6acd3f936660a4218fd5c5d46e Mon Sep 17 00:00:00 2001 From: Trevor Gau Date: Fri, 12 Feb 2021 09:36:47 -0500 Subject: [PATCH 05/14] Fix imports --- src/stories/Portal.stories.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/stories/Portal.stories.tsx b/src/stories/Portal.stories.tsx index 8f054aa121c..38ad19c1c8c 100644 --- a/src/stories/Portal.stories.tsx +++ b/src/stories/Portal.stories.tsx @@ -2,7 +2,8 @@ import React from 'react' import {Meta} from '@storybook/react' -import {BaseStyles, Box, Portal, registerPortalRoot} from '..' +import {BaseStyles, Box} from '..' +import Portal, {registerPortalRoot} from "../Portal" export default { title: 'Generic behaviors/Portal', From 149e924f84194c2057c7fbbfae7219751f48e9b4 Mon Sep 17 00:00:00 2001 From: Trevor Gau Date: Mon, 8 Feb 2021 15:56:02 -0500 Subject: [PATCH 06/14] Add a Portal component for rendering content outside of the current DOM element. --- docs/content/Portal.mdx | 66 +++++++++ .../src/@primer/gatsby-theme-doctocat/nav.yml | 2 + src/Portal/Portal.tsx | 79 +++++++++++ src/Portal/index.ts | 4 + src/index.ts | 3 +- src/stories/Portal.stories.tsx | 129 ++++++++++++++++++ 6 files changed, 282 insertions(+), 1 deletion(-) create mode 100644 docs/content/Portal.mdx create mode 100644 src/Portal/Portal.tsx create mode 100644 src/Portal/index.ts create mode 100644 src/stories/Portal.stories.tsx diff --git a/docs/content/Portal.mdx b/docs/content/Portal.mdx new file mode 100644 index 00000000000..a36bc5869b2 --- /dev/null +++ b/docs/content/Portal.mdx @@ -0,0 +1,66 @@ +--- +title: Portal +--- + + +Portals allow you to create a separation between the logical React component hierarchy and the physical DOM. See the [React documentation on portals](https://reactjs.org/docs/portals.html) for an in-depth explanation. + +This Portal component will render all children into the portal root DOM node instead of as children of this Portal's parent DOM element. This is useful for breaking out of the current stacking context. For example, popup menus and tool tips may need to render on top of (read: covering up) other UI. The best way to guarantee this is to add these elements to top-level DOM, such as directly on document.body. These elements can then be moved to the correct location using absolute positioning. + +## Customizing the portal root +By default, Primer will create a portal root for you as a child of `document.body`. If you would like to specify your own portal root, there are two options: + +1. Before rendering a `` for the first time, ensure that an element exists with id `__primerPortalRoot__`. If that exists, it will be used as the default portal root. +2. Call the `registerPortalRoot` function, passing in the element you would like to use as your default portal root. + +## Multiple portal roots +There may be situations where you want to have multiple portal roots. Advanced scenarios may necessitate multiple stacking contexts for overlays. You can set up multiple roots using the `registerPortalRoot` function. Calling this function with an element and a string `name` will register the root, which can then be used by creating a `` with a `name` prop matching the one you registered. + +## Default example + +```jsx + + Regardless of where this appears in the React component + tree, this text will be rendered in the DOM within the + portal root at document.body. + +``` + +## Example: custom portal root + +```html + +
+``` +or +```js +import { registerPortalRoot } from "@primer/components" +registerPortalRoot(document.querySelector(".my-portal-root")!) +``` + +## Example: multiple portal roots +```jsx +import { Portal, registerPortalRoot } from "@primer/components" +registerPortalRoot(document.querySelector(".scrolling-canvas-root")!, "scrolling-canvas") +// ... + +
This div will be rendered into the element registered above.
+ +
+ This div will be rendered into the default + portal root created at document.body +
+ + +``` + +## System props + +Since Portals do not render UI on their own, they do not accept any system props. + +## Component props + +| Name | Type | Default | Description | +| :- | :- | :-: | :- | +| onMount | () => void | | Called when this portal is added to the DOM | +| containerName | string | | Renders the portal children into the container registered with the given name. If omitted, children are rendered into the default portal root. | \ No newline at end of file diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index 9a5ab38a2b6..f6102e0e954 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -80,6 +80,8 @@ url: /PointerBox - title: Popover url: /Popover + - title: Portal + url: /Portal - title: Position url: /Position - title: ProgressBar diff --git a/src/Portal/Portal.tsx b/src/Portal/Portal.tsx new file mode 100644 index 00000000000..f07ed80b204 --- /dev/null +++ b/src/Portal/Portal.tsx @@ -0,0 +1,79 @@ +import React from 'react' +import {createPortal} from 'react-dom' + +const PRIMER_PORTAL_ROOT_ID = '__primerPortalRoot__' +const DEFAULT_PORTAL_CONTAINER_NAME = '__default__' + +const portalRootRegistry: {[key: string]: Element} = {} + +/** + * Register a container to serve as a portal root. + * @param root The element that will be the root for portals created in this container + * @param name The name of the container, to be used with the `containerName` prop on the Portal Component. + * If name is not specified, registers the default portal root. + */ +export function registerPortalRoot(root: Element, name?: string): void { + portalRootRegistry[name ?? DEFAULT_PORTAL_CONTAINER_NAME] = root +} + +// Ensures that a default portal root exists and is registered. If a DOM element exists +// with id __primerPortalRoot__, allow that element to serve as the default portl root. +// Otherwise, create that element and attach it to the end of document.body. +function ensureDefaultPortal() { + if (!(DEFAULT_PORTAL_CONTAINER_NAME in portalRootRegistry)) { + let defaultPortalContainer = document.getElementById(PRIMER_PORTAL_ROOT_ID) + if (!(defaultPortalContainer instanceof Element)) { + defaultPortalContainer = document.createElement('div') + defaultPortalContainer.setAttribute('id', PRIMER_PORTAL_ROOT_ID) + document.body.appendChild(defaultPortalContainer) + } + portalRootRegistry[DEFAULT_PORTAL_CONTAINER_NAME] = defaultPortalContainer + } +} + +export interface PortalProps { + /** + * Called when this portal is added to the DOM + */ + onMount?: () => void + + /** + * Optional. Mount this portal at the container specified + * by this name. The container must be previously registered + * with `registerPortal`. + */ + containerName?: string +} + +/** + * Creates a React Portal, placing all children in a separate physical DOM root node. + * @see https://reactjs.org/docs/portals.html + */ +export const Portal: React.FC = ({children, onMount, containerName: _containerName}) => { + const elementRef = React.useRef(document.createElement('div')) + + React.useEffect(() => { + let containerName = _containerName + if (containerName == undefined) { + containerName = DEFAULT_PORTAL_CONTAINER_NAME + ensureDefaultPortal() + } + const parentElement = portalRootRegistry[containerName] + + if (!parentElement) { + throw new Error( + `Portal container '${_containerName}' is not yet registered. Container must be registered with registerPortal before use.` + ) + } + const element = elementRef.current + parentElement.appendChild(element) + onMount?.() + + return () => { + parentElement.removeChild(element) + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [elementRef]) + + return createPortal(children, elementRef.current) +} diff --git a/src/Portal/index.ts b/src/Portal/index.ts new file mode 100644 index 00000000000..b644e02340a --- /dev/null +++ b/src/Portal/index.ts @@ -0,0 +1,4 @@ +import {Portal, PortalProps, registerPortalRoot} from "./Portal" + +export default Portal +export {registerPortalRoot, PortalProps} \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index 721ecefbb3c..cd960234700 100644 --- a/src/index.ts +++ b/src/index.ts @@ -28,7 +28,7 @@ export { ButtonInvisible, ButtonTableList, ButtonClose, - ButtonGroup, + ButtonGroup } from './Button' export {default as Caret} from './Caret' export {default as CircleBadge} from './CircleBadge' @@ -50,6 +50,7 @@ export {default as Pagehead} from './Pagehead' export {default as Pagination} from './Pagination' export {default as PointerBox} from './PointerBox' export {default as Popover} from './Popover' +export {default as Portal, PortalProps, registerPortalRoot} from './Portal' export {default as ProgressBar} from './ProgressBar' export {default as SelectMenu} from './SelectMenu' export {default as SideNav} from './SideNav' diff --git a/src/stories/Portal.stories.tsx b/src/stories/Portal.stories.tsx new file mode 100644 index 00000000000..643649fa17b --- /dev/null +++ b/src/stories/Portal.stories.tsx @@ -0,0 +1,129 @@ +/* eslint-disable @typescript-eslint/explicit-module-boundary-types */ +import React from 'react' +import {Meta} from '@storybook/react' + +import {BaseStyles, Box, Portal, registerPortalRoot} from '..' + +let renderedOnce = false +export default { + title: 'Generic behaviors/Portal', + component: Portal, + decorators: [ + Story => { + React.useEffect(() => { + if (renderedOnce) { + window.location.reload() + } else { + renderedOnce = true + } + }) + return ( + + + + Note: Because Portal registers portal roots globally, we must refresh the page after + switching between Portal stories. This should happen automatically. + + + + + ) + } + ], + argTypes: { + variant: { + control: { + type: 'radio', + options: ['small', 'medium', 'large'] + } + } + } +} as Meta + +export const defaultPortal = () => ( + <> + Root position + + Outer container + + Inner container + + Portaled content rendered at document root, even outside of <BaseStyles>. + + + + +) + +export const customPortalRootById = () => ( + <> + Root position + + Outer container + + Inner container + Portaled content rendered at the outer container. + + + +) + +export const CustomPortalRootByRegistration: React.FC> = () => { + const outerContainerRef = React.useRef(null) + const [mounted, setMounted] = React.useState(false) + React.useEffect(() => { + if (outerContainerRef.current instanceof HTMLElement) { + registerPortalRoot(outerContainerRef.current) + setMounted(true) + } + }, [outerContainerRef]) + return ( + <> + Root position + + {mounted && ( + <> + Outer container + + Inner container + Portaled content rendered at the outer container. + + + )} + + + ) +} + +export const MultiplePortalRoots: React.FC> = () => { + const outerContainerRef = React.useRef(null) + const innerContainerRef = React.useRef(null) + const [mounted, setMounted] = React.useState(false) + React.useEffect(() => { + if (outerContainerRef.current instanceof HTMLElement && innerContainerRef.current instanceof HTMLElement) { + registerPortalRoot(outerContainerRef.current, 'outer') + registerPortalRoot(innerContainerRef.current, 'inner') + setMounted(true) + } + }, [outerContainerRef]) + return ( + <> + Root position + + Outer container + + {mounted && ( + <> + Portaled content rendered at the outer container. + Portaled content rendered at the end of the inner container. + + Portaled content rendered at document root, even outside of <BaseStyles>. + + + )} + Inner container + + + + ) +} From 3d67971c5e94a66fe59156ff07c0e63633c5a409 Mon Sep 17 00:00:00 2001 From: Trevor Gau Date: Thu, 11 Feb 2021 14:17:11 -0500 Subject: [PATCH 07/14] Allow portals to be de-registered (undocumented feature?) --- src/Portal/Portal.tsx | 8 ++++++-- src/stories/Button.stories.tsx | 15 +++++++++++++++ src/stories/Portal.stories.tsx | 27 ++++----------------------- 3 files changed, 25 insertions(+), 25 deletions(-) diff --git a/src/Portal/Portal.tsx b/src/Portal/Portal.tsx index f07ed80b204..573fb9ed1e1 100644 --- a/src/Portal/Portal.tsx +++ b/src/Portal/Portal.tsx @@ -12,8 +12,12 @@ const portalRootRegistry: {[key: string]: Element} = {} * @param name The name of the container, to be used with the `containerName` prop on the Portal Component. * If name is not specified, registers the default portal root. */ -export function registerPortalRoot(root: Element, name?: string): void { - portalRootRegistry[name ?? DEFAULT_PORTAL_CONTAINER_NAME] = root +export function registerPortalRoot(root: Element | undefined, name?: string): void { + if (root instanceof Element) { + portalRootRegistry[name ?? DEFAULT_PORTAL_CONTAINER_NAME] = root + } else { + delete portalRootRegistry[name ?? DEFAULT_PORTAL_CONTAINER_NAME]; + } } // Ensures that a default portal root exists and is registered. If a DOM element exists diff --git a/src/stories/Button.stories.tsx b/src/stories/Button.stories.tsx index 3acdd5c23d4..1805d8c0715 100644 --- a/src/stories/Button.stories.tsx +++ b/src/stories/Button.stories.tsx @@ -30,6 +30,21 @@ export default { } ], argTypes: { + as: { + table: { + disable: true + } + }, + theme: { + table: { + disable: true + } + }, + sx: { + table: { + disable: true + } + }, variant: { control: { type: 'radio', diff --git a/src/stories/Portal.stories.tsx b/src/stories/Portal.stories.tsx index 643649fa17b..9894a1b8da8 100644 --- a/src/stories/Portal.stories.tsx +++ b/src/stories/Portal.stories.tsx @@ -4,40 +4,21 @@ import {Meta} from '@storybook/react' import {BaseStyles, Box, Portal, registerPortalRoot} from '..' -let renderedOnce = false export default { title: 'Generic behaviors/Portal', component: Portal, decorators: [ Story => { - React.useEffect(() => { - if (renderedOnce) { - window.location.reload() - } else { - renderedOnce = true - } - }) + // Since portal roots are registered globally, we need this line so that each storybook + // story works in isolation. + registerPortalRoot(undefined) return ( - - - Note: Because Portal registers portal roots globally, we must refresh the page after - switching between Portal stories. This should happen automatically. - - ) } - ], - argTypes: { - variant: { - control: { - type: 'radio', - options: ['small', 'medium', 'large'] - } - } - } + ] } as Meta export const defaultPortal = () => ( From e556c0bb336af745db5fbca3673f9f8b59d322ae Mon Sep 17 00:00:00 2001 From: Trevor Gau Date: Thu, 11 Feb 2021 15:54:30 -0500 Subject: [PATCH 08/14] Default portal root to a BaseStyles element if available. --- src/BaseStyles.tsx | 2 +- src/Portal/Portal.tsx | 7 ++++++- src/stories/Portal.stories.tsx | 4 ++-- 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/BaseStyles.tsx b/src/BaseStyles.tsx index 9e0fb178a1c..c520b1d9654 100644 --- a/src/BaseStyles.tsx +++ b/src/BaseStyles.tsx @@ -38,7 +38,7 @@ function BaseStyles(props: BaseStylesProps) { const {children, ...rest} = props useMouseIntent() return ( - + {children} diff --git a/src/Portal/Portal.tsx b/src/Portal/Portal.tsx index 573fb9ed1e1..7020d380535 100644 --- a/src/Portal/Portal.tsx +++ b/src/Portal/Portal.tsx @@ -29,7 +29,12 @@ function ensureDefaultPortal() { if (!(defaultPortalContainer instanceof Element)) { defaultPortalContainer = document.createElement('div') defaultPortalContainer.setAttribute('id', PRIMER_PORTAL_ROOT_ID) - document.body.appendChild(defaultPortalContainer) + const suitablePortalRoot = document.querySelector("[data-portal-root]"); + if (suitablePortalRoot) { + suitablePortalRoot.appendChild(defaultPortalContainer); + } else { + document.body.appendChild(defaultPortalContainer) + } } portalRootRegistry[DEFAULT_PORTAL_CONTAINER_NAME] = defaultPortalContainer } diff --git a/src/stories/Portal.stories.tsx b/src/stories/Portal.stories.tsx index 9894a1b8da8..8f054aa121c 100644 --- a/src/stories/Portal.stories.tsx +++ b/src/stories/Portal.stories.tsx @@ -29,7 +29,7 @@ export const defaultPortal = () => ( Inner container - Portaled content rendered at document root, even outside of <BaseStyles>. + Portaled content rendered at <BaseStyles> root. @@ -98,7 +98,7 @@ export const MultiplePortalRoots: React.FC> = () => { Portaled content rendered at the outer container. Portaled content rendered at the end of the inner container. - Portaled content rendered at document root, even outside of <BaseStyles>. + Portaled content rendered at <BaseStyles> root. )} From bf114b042383966b98b90224fa9cac5e841d3173 Mon Sep 17 00:00:00 2001 From: Trevor Gau Date: Thu, 11 Feb 2021 16:00:26 -0500 Subject: [PATCH 09/14] Remove Portal from docs and index.ts until it is ready to be shipped (see #1025). --- docs/src/@primer/gatsby-theme-doctocat/nav.yml | 4 ++-- src/index.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index f6102e0e954..7fcc9bc040c 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -80,8 +80,8 @@ url: /PointerBox - title: Popover url: /Popover - - title: Portal - url: /Portal + # - title: Portal + # url: /Portal - title: Position url: /Position - title: ProgressBar diff --git a/src/index.ts b/src/index.ts index cd960234700..3a1b82eaf21 100644 --- a/src/index.ts +++ b/src/index.ts @@ -50,7 +50,7 @@ export {default as Pagehead} from './Pagehead' export {default as Pagination} from './Pagination' export {default as PointerBox} from './PointerBox' export {default as Popover} from './Popover' -export {default as Portal, PortalProps, registerPortalRoot} from './Portal' +// export {default as Portal, PortalProps, registerPortalRoot} from './Portal' export {default as ProgressBar} from './ProgressBar' export {default as SelectMenu} from './SelectMenu' export {default as SideNav} from './SideNav' From 0ab9ea3cd2fd37352eedc0acd841b4f21d962dac Mon Sep 17 00:00:00 2001 From: Trevor Gau Date: Fri, 12 Feb 2021 09:36:47 -0500 Subject: [PATCH 10/14] Fix imports --- src/stories/Portal.stories.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/stories/Portal.stories.tsx b/src/stories/Portal.stories.tsx index 8f054aa121c..38ad19c1c8c 100644 --- a/src/stories/Portal.stories.tsx +++ b/src/stories/Portal.stories.tsx @@ -2,7 +2,8 @@ import React from 'react' import {Meta} from '@storybook/react' -import {BaseStyles, Box, Portal, registerPortalRoot} from '..' +import {BaseStyles, Box} from '..' +import Portal, {registerPortalRoot} from "../Portal" export default { title: 'Generic behaviors/Portal', From d8a182743018ab3b7e15d6a13488390865ef3499 Mon Sep 17 00:00:00 2001 From: Trevor Gau Date: Thu, 18 Feb 2021 14:57:18 -0500 Subject: [PATCH 11/14] Update portal documentation with info about BaseStyles and ThemeProvider. --- docs/content/Portal.mdx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/content/Portal.mdx b/docs/content/Portal.mdx index a36bc5869b2..c293a69f893 100644 --- a/docs/content/Portal.mdx +++ b/docs/content/Portal.mdx @@ -8,11 +8,15 @@ Portals allow you to create a separation between the logical React component hie This Portal component will render all children into the portal root DOM node instead of as children of this Portal's parent DOM element. This is useful for breaking out of the current stacking context. For example, popup menus and tool tips may need to render on top of (read: covering up) other UI. The best way to guarantee this is to add these elements to top-level DOM, such as directly on document.body. These elements can then be moved to the correct location using absolute positioning. ## Customizing the portal root -By default, Primer will create a portal root for you as a child of `document.body`. If you would like to specify your own portal root, there are two options: +By default, Primer will create a portal root for you as a child of the closest `` element, or `document.body` of none is found. If you would like to specify your own portal root, there are two options: 1. Before rendering a `` for the first time, ensure that an element exists with id `__primerPortalRoot__`. If that exists, it will be used as the default portal root. 2. Call the `registerPortalRoot` function, passing in the element you would like to use as your default portal root. +Keep in mind that any inherited styles applied to portaled elements are based on its physical DOM parent. Practically this means that styles added by a `` element will not apply to the portaled content unless the portal root is a descendent of a `` element. + +Also, as `` affects the _React_ context, which applies to the logical React component hierarchy, the portal root is not required to be a child of a `` for its children to receive that context. + ## Multiple portal roots There may be situations where you want to have multiple portal roots. Advanced scenarios may necessitate multiple stacking contexts for overlays. You can set up multiple roots using the `registerPortalRoot` function. Calling this function with an element and a string `name` will register the root, which can then be used by creating a `` with a `name` prop matching the one you registered. From 5e51d782d65d9905cdee5313b69d163333ed120d Mon Sep 17 00:00:00 2001 From: Trevor Gau Date: Mon, 22 Feb 2021 17:35:24 -0500 Subject: [PATCH 12/14] Add Portal tests. --- .vscode/launch.json | 21 +++++++ src/Portal/Portal.tsx | 8 +-- src/__tests__/Portal.tsx | 109 +++++++++++++++++++++++++++++++++ src/stories/Portal.stories.tsx | 2 +- 4 files changed, 135 insertions(+), 5 deletions(-) create mode 100644 .vscode/launch.json create mode 100644 src/__tests__/Portal.tsx diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 00000000000..08483c0c807 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,21 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "node", + "request": "launch", + "name": "Jest Current File", + "program": "${workspaceFolder}/node_modules/.bin/jest", + "args": ["${fileBasenameNoExtension}", "--config", "jest.config.js"], + "console": "integratedTerminal", + "internalConsoleOptions": "neverOpen", + "disableOptimisticBPs": true, + "windows": { + "program": "${workspaceFolder}/node_modules/jest/bin/jest" + } + } + ] +} diff --git a/src/Portal/Portal.tsx b/src/Portal/Portal.tsx index 7020d380535..6ea3c405395 100644 --- a/src/Portal/Portal.tsx +++ b/src/Portal/Portal.tsx @@ -16,7 +16,7 @@ export function registerPortalRoot(root: Element | undefined, name?: string): vo if (root instanceof Element) { portalRootRegistry[name ?? DEFAULT_PORTAL_CONTAINER_NAME] = root } else { - delete portalRootRegistry[name ?? DEFAULT_PORTAL_CONTAINER_NAME]; + delete portalRootRegistry[name ?? DEFAULT_PORTAL_CONTAINER_NAME] } } @@ -29,9 +29,9 @@ function ensureDefaultPortal() { if (!(defaultPortalContainer instanceof Element)) { defaultPortalContainer = document.createElement('div') defaultPortalContainer.setAttribute('id', PRIMER_PORTAL_ROOT_ID) - const suitablePortalRoot = document.querySelector("[data-portal-root]"); + const suitablePortalRoot = document.querySelector('[data-portal-root]') if (suitablePortalRoot) { - suitablePortalRoot.appendChild(defaultPortalContainer); + suitablePortalRoot.appendChild(defaultPortalContainer) } else { document.body.appendChild(defaultPortalContainer) } @@ -61,7 +61,7 @@ export interface PortalProps { export const Portal: React.FC = ({children, onMount, containerName: _containerName}) => { const elementRef = React.useRef(document.createElement('div')) - React.useEffect(() => { + React.useLayoutEffect(() => { let containerName = _containerName if (containerName == undefined) { containerName = DEFAULT_PORTAL_CONTAINER_NAME diff --git a/src/__tests__/Portal.tsx b/src/__tests__/Portal.tsx new file mode 100644 index 00000000000..6e34207a746 --- /dev/null +++ b/src/__tests__/Portal.tsx @@ -0,0 +1,109 @@ +import Portal, {registerPortalRoot} from '../Portal/index' + +import {render} from '@testing-library/react' +import React from 'react' +import BaseStyles from '../BaseStyles' + +describe('Portal', () => { + afterEach(() => { + // since the registry is global, reset after each test + registerPortalRoot(undefined) + }) + it('renders a default portal into document.body (no BaseStyles present)', () => { + const {baseElement} = render(123test123) + const generatedRoot = baseElement.querySelector('#__primerPortalRoot__') + expect(generatedRoot).toBeInstanceOf(HTMLElement) + expect(generatedRoot?.textContent?.trim()).toEqual('123test123') + baseElement.innerHTML = '' + }) + + it('renders a default portal into nearest BaseStyles element', () => { + const toRender = ( +
+ +
+ 123test123 +
+ +
+ ) + + const {baseElement} = render(toRender) + const baseStylesRoot = baseElement.querySelector('#baseStylesRoot') + const baseStylesElement = baseStylesRoot?.parentElement + const generatedRoot = baseStylesElement?.querySelector('#__primerPortalRoot__') + + expect(baseStylesRoot).toBeInstanceOf(HTMLElement) + expect(baseStylesElement).toBeInstanceOf(HTMLElement) + expect(generatedRoot).toBeInstanceOf(HTMLElement) + expect(generatedRoot?.textContent?.trim()).toEqual('123test123') + + baseElement.innerHTML = '' + }) + + it('renders into the custom portal root (default root name - declarative)', () => { + const toRender = ( +
+
+ 123test123 +
+ ) + const {baseElement} = render(toRender) + const renderedRoot = baseElement.querySelector('#renderedRoot') + const portalRoot = renderedRoot?.querySelector('#__primerPortalRoot__') + + expect(portalRoot).toBeInstanceOf(HTMLElement) + expect(portalRoot?.textContent?.trim()).toEqual('123test123') + + baseElement.innerHTML = '' + }) + + it('renders into the custom portal root (default root name - imperative)', () => { + const portalRootJSX =
+ let {baseElement} = render(portalRootJSX) + const portalRoot = baseElement.querySelector('#myPortalRoot') + expect(portalRoot).toBeInstanceOf(HTMLElement) + + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + registerPortalRoot(baseElement.querySelector('#myPortalRoot')!) + + const toRender = 123test123 + ;({baseElement} = render(toRender)) + expect(portalRoot?.textContent?.trim()).toEqual('123test123') + + baseElement.innerHTML = '' + }) + + it('renders into multiple custom portal roots (named)', () => { + const portalRootJSX =
+ let {baseElement} = render(portalRootJSX) + const fancyPortalRoot1 = baseElement.querySelector('#myPortalRoot1') + const fancyPortalRoot2 = baseElement.querySelector('#myPortalRoot2') + expect(fancyPortalRoot1).toBeInstanceOf(HTMLElement) + expect(fancyPortalRoot2).toBeInstanceOf(HTMLElement) + + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + registerPortalRoot(baseElement.querySelector('#myPortalRoot1')!, 'fancyPortal1') + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + registerPortalRoot(baseElement.querySelector('#myPortalRoot2')!, 'fancyPortal2') + + const toRender = ( + <> + 123test123 + 456test456 + 789test789 + + ) + ;({baseElement} = render(toRender)) + const generatedRoot = baseElement.querySelector('#__primerPortalRoot__') + expect(generatedRoot?.textContent?.trim()).toEqual('123test123') + expect(fancyPortalRoot1?.textContent?.trim()).toEqual('456test456') + expect(fancyPortalRoot2?.textContent?.trim()).toEqual('789test789') + + console.log(baseElement.outerHTML) + + baseElement.innerHTML = '' + }) + + it('renders into the correct root (default root and custom named root)', () => {}) +}) diff --git a/src/stories/Portal.stories.tsx b/src/stories/Portal.stories.tsx index 38ad19c1c8c..a84646adf58 100644 --- a/src/stories/Portal.stories.tsx +++ b/src/stories/Portal.stories.tsx @@ -3,7 +3,7 @@ import React from 'react' import {Meta} from '@storybook/react' import {BaseStyles, Box} from '..' -import Portal, {registerPortalRoot} from "../Portal" +import Portal, {registerPortalRoot} from '../Portal' export default { title: 'Generic behaviors/Portal', From abb99b48c69bb471140fa03a67a6b1819a0fe7bb Mon Sep 17 00:00:00 2001 From: Trevor Gau Date: Mon, 22 Feb 2021 17:37:12 -0500 Subject: [PATCH 13/14] Formatting --- src/__tests__/Portal.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/__tests__/Portal.tsx b/src/__tests__/Portal.tsx index 6e34207a746..6055c19e4ad 100644 --- a/src/__tests__/Portal.tsx +++ b/src/__tests__/Portal.tsx @@ -75,7 +75,12 @@ describe('Portal', () => { }) it('renders into multiple custom portal roots (named)', () => { - const portalRootJSX =
+ const portalRootJSX = ( +
+
+
+
+ ) let {baseElement} = render(portalRootJSX) const fancyPortalRoot1 = baseElement.querySelector('#myPortalRoot1') const fancyPortalRoot2 = baseElement.querySelector('#myPortalRoot2') @@ -104,6 +109,4 @@ describe('Portal', () => { baseElement.innerHTML = '' }) - - it('renders into the correct root (default root and custom named root)', () => {}) }) From a0b84744b651b81785f7224c048cdcd7507bf175 Mon Sep 17 00:00:00 2001 From: Trevor Gau Date: Tue, 23 Feb 2021 09:21:10 -0500 Subject: [PATCH 14/14] Apply suggestions from code review (typos, formatting) Co-authored-by: emplums --- docs/content/Portal.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/content/Portal.mdx b/docs/content/Portal.mdx index e4904cf8b83..d71897ff7f1 100644 --- a/docs/content/Portal.mdx +++ b/docs/content/Portal.mdx @@ -5,11 +5,11 @@ title: Portal Portals allow you to create a separation between the logical React component hierarchy and the physical DOM. See the [React documentation on portals](https://reactjs.org/docs/portals.html) for an in-depth explanation. -This Portal component will render all children into the portal root DOM node instead of as children of this Portal's parent DOM element. This is useful for breaking out of the current stacking context. For example, popup menus and tool tips may need to render on top of (read: covering up) other UI. The best way to guarantee this is to add these elements to top-level DOM, such as directly on document.body. These elements can then be moved to the correct location using absolute positioning. +This Portal component will render all children into the portal root DOM node instead of as children of this Portal's parent DOM element. This is useful for breaking out of the current stacking context. For example, popup menus and tooltips may need to render on top of (read: covering up) other UI. The best way to guarantee this is to add these elements to top-level DOM, such as directly on `document.body`. These elements can then be moved to the correct location using absolute positioning. ## Customizing the portal root -By default, Primer will create a portal root for you as a child of the closest `` element, or `document.body` of none is found. If you would like to specify your own portal root, there are two options: +By default, Primer will create a portal root for you as a child of the closest `` element, or `document.body` if none is found. If you would like to specify your own portal root, there are two options: 1. Before rendering a `` for the first time, ensure that an element exists with id `__primerPortalRoot__`. If that exists, it will be used as the default portal root. 2. Call the `registerPortalRoot` function, passing in the element you would like to use as your default portal root. @@ -68,4 +68,4 @@ Since Portals do not render UI on their own, they do not accept any system props | Name | Type | Default | Description | | :- | :- | :-: | :- | | onMount | () => void | | Called when this portal is added to the DOM | -| containerName | string | | Renders the portal children into the container registered with the given name. If omitted, children are rendered into the default portal root. | \ No newline at end of file +| containerName | string | | Renders the portal children into the container registered with the given name. If omitted, children are rendered into the default portal root. |