[components] Add portal components

packages/@sanity/components/sanity.json

@@ -1100,6 +1100,14 @@
     {
       "implements": "part:@sanity/components/tabs/tab-panel",
       "path": "tabs/TabPanel.js"
+    },
+    {
+      "implements": "part:@sanity/components/portal",
+      "path": "portal"
+    },
+    {
+      "implements": "part:@sanity/base/component",
+      "path": "portal/story"
     }
   ]
 }

packages/@sanity/components/src/portal/context.ts

@@ -0,0 +1,7 @@
+import {createContext} from 'react'
+
+export interface PortalContextInterface {
+  element: HTMLElement
+}
+
+export const PortalContext = createContext(null)

packages/@sanity/components/src/portal/hooks.ts

@@ -0,0 +1,12 @@
+import {useContext} from 'react'
+import {PortalContext} from './context'
+
+export function usePortal() {
+  const portal = useContext(PortalContext)
+
+  if (!portal) {
+    throw new Error('missing portal in context')
+  }
+
+  return portal
+}

packages/@sanity/components/src/portal/index.ts

@@ -0,0 +1,3 @@
+export * from './hooks'
+export * from './portal'
+export * from './provider'

packages/@sanity/components/src/portal/portal.ts

@@ -0,0 +1,14 @@
+import ReactDOM from 'react-dom'
+import {usePortal} from './hooks'
+
+interface PortalProps {
+  children: React.ReactNode
+}
+
+export function Portal(props: PortalProps) {
+  const portal = usePortal()
+
+  if (!portal.element) return null
+
+  return ReactDOM.createPortal(props.children, portal.element)
+}

packages/@sanity/components/src/portal/provider.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import {PortalContext} from './context'
+
+interface PortalProviderProps {
+  children: React.ReactNode
+  element: HTMLElement
+}
+
+export function PortalProvider(props: PortalProviderProps) {
+  return (
+    <PortalContext.Provider value={{element: props.element}}>
+      {props.children}
+    </PortalContext.Provider>
+  )
+}

packages/@sanity/components/src/portal/stories/default.css

@@ -0,0 +1,2 @@
+.root {
+}

packages/@sanity/components/src/portal/stories/default.js

@@ -0,0 +1,47 @@
+import {Portal, PortalProvider} from 'part:@sanity/components/portal'
+import Sanity from 'part:@sanity/storybook/addons/sanity'
+import React, {useRef, useEffect} from 'react'
+
+export function DefaultStory() {
+  return (
+    <Sanity part="part:@sanity/components/dialogs/default" propTables={[Portal]}>
+      <PortalExample />
+    </Sanity>
+  )
+}
+
+function PortalExample() {
+  const rootRef = useRef(null)
+  const portalRef = useRef(document.createElement('div'))
+
+  useEffect(() => {
+    rootRef.current.appendChild(portalRef.current)
+    return () => {
+      rootRef.current.removeChild(portalRef.current)
+    }
+  }, [])
+
+  return (
+    <PortalProvider element={portalRef.current}>
+      <div ref={rootRef}>Portal demo:</div>
+
+      <Portal>
+        <div
+          style={{
+            background: 'rgba(255, 0, 0, 0.1)',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+          }}
+        >
+          <div style={{background: '#fff', padding: 20}}>Hello from portal</div>
+        </div>
+      </Portal>
+    </PortalProvider>
+  )
+}

packages/@sanity/components/src/portal/story.js

@@ -0,0 +1,7 @@
+import {storiesOf} from 'part:@sanity/storybook'
+import {withKnobs} from 'part:@sanity/storybook/addons/knobs'
+import {DefaultStory} from './stories/default'
+
+storiesOf('@sanity/components/portal', module)
+  .addDecorator(withKnobs)
+  .add('Default', DefaultStory)