fix: revert to wrapping select browser inside a custom portal to prev…

…ent z-index clashing

src/app.tsx

@@ -6,6 +6,7 @@ import {ThemeProvider as LegacyThemeProvider} from 'theme-ui'
 import {Z_INDEX_APP, Z_INDEX_TOAST_PROVIDER} from './constants'
 import {AssetBrowserDispatchProvider} from './contexts/AssetSourceDispatchContext'
 import Browser from './components/Browser'
+import Portal from './components/Portal'
 import ReduxProvider from './components/ReduxProvider'
 import useKeyPress from './hooks/useKeyPress'
 import GlobalStyle from './styled/GlobalStyles'
@@ -39,20 +40,22 @@ const AssetBrowser: FC<Props> = (props: Props) => {
                   <Browser onClose={onClose} />
                 </Box>
               ) : (
-                <Box
-                  onMouseUp={handleStopPropagation}
-                  style={{
-                    bottom: 0,
-                    height: 'auto',
-                    left: 0,
-                    position: 'fixed',
-                    top: 0,
-                    width: '100%',
-                    zIndex: Z_INDEX_APP
-                  }}
-                >
-                  <Browser onClose={onClose} />
-                </Box>
+                <Portal>
+                  <Box
+                    onMouseUp={handleStopPropagation}
+                    style={{
+                      bottom: 0,
+                      height: 'auto',
+                      left: 0,
+                      position: 'fixed',
+                      top: 0,
+                      width: '100%',
+                      zIndex: Z_INDEX_APP
+                    }}
+                  >
+                    <Browser onClose={onClose} />
+                  </Box>
+                </Portal>
               )}
             </AssetBrowserDispatchProvider>
           </ToastProvider>

src/components/Portal/index.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import {createPortal} from 'react-dom'
+
+const canUseDOM = !!(
+  typeof window !== 'undefined' &&
+  window.document &&
+  window.document.createElement
+)
+
+type Props = {
+  children: React.ReactNode
+}
+
+class Portal extends React.Component<Props> {
+  node!: HTMLDivElement | null
+
+  componentWillUnmount() {
+    if (this.node) {
+      document.body.removeChild(this.node)
+    }
+    this.node = null
+  }
+
+  render() {
+    if (!canUseDOM) {
+      return null
+    }
+    if (!this.node) {
+      this.node = document.createElement('div')
+      document.body.appendChild(this.node)
+    }
+    return createPortal(
+      <React.Fragment>
+        {this.props.children}
+        {/*
+          the following element is needed to prevent tab key from navigating out of window context. Since the
+          portal content is appended to the DOM, hitting the tab key while having focus on on the last element
+          will navigate *out* of the document, causing focus to move to a browser UI control.
+        */}
+        <span tabIndex={0} />
+      </React.Fragment>,
+      this.node
+    )
+  }
+}
+
+export default Portal