[desk-tool] Improve dialogs on narrow screens

packages/@sanity/desk-tool/src/features/constants.ts

@@ -0,0 +1,7 @@
+import {DeskToolFeatures} from './types'
+
+export const DEFAULT_STATE: DeskToolFeatures = {
+  reviewChanges: false,
+  splitPanes: false,
+  splitViews: false
+}

packages/@sanity/desk-tool/src/features/context.ts

@@ -1,7 +1,5 @@
 import {createContext} from 'react'
+import {DEFAULT_STATE} from './constants'
 import {DeskToolFeatures} from './types'
 
-export const DeskToolFeaturesContext = createContext<DeskToolFeatures>({
-  reviewChanges: false,
-  splitViews: false
-})
+export const DeskToolFeaturesContext = createContext<DeskToolFeatures>(DEFAULT_STATE)

packages/@sanity/desk-tool/src/features/controller.ts

@@ -13,13 +13,21 @@ export function createDeskToolFeaturesController() {
   // determine if "reviewChanges" are available
   const reviewChanges$ = isNarrowScreen$.pipe(map(val => !val))
 
+  // determine if "splitPanes" are available
+  const splitPanes$ = isNarrowScreen$.pipe(map(val => !val))
+
   // determine if "splitViews" are available
   const splitViews$ = isNarrowScreen$.pipe(map(val => !val))
 
   // combine streams of features flags
-  const state$: Observable<DeskToolFeatures> = combineLatest([reviewChanges$, splitViews$]).pipe(
-    map(([reviewChanges, splitViews]) => ({
+  const state$: Observable<DeskToolFeatures> = combineLatest([
+    reviewChanges$,
+    splitPanes$,
+    splitViews$
+  ]).pipe(
+    map(([reviewChanges, splitPanes, splitViews]) => ({
       reviewChanges,
+      splitPanes,
       splitViews
     }))
   )

packages/@sanity/desk-tool/src/features/provider.tsx

@@ -1,11 +1,11 @@
 import React, {useEffect, useMemo, useState} from 'react'
 import {DeskToolFeaturesContext} from './context'
 import {createDeskToolFeaturesController} from './controller'
-import {DeskToolFeatures} from './types'
+import {DEFAULT_STATE} from './constants'
 
 export function DeskToolFeaturesProvider({children}: {children: React.ReactNode}) {
   const controller = useMemo(() => createDeskToolFeaturesController(), [])
-  const [state, setState] = useState<DeskToolFeatures>({reviewChanges: false, splitViews: false})
+  const [state, setState] = useState(DEFAULT_STATE)
 
   useEffect(() => {
     const sub = controller.state$.subscribe(setState)

packages/@sanity/desk-tool/src/features/types.ts

@@ -1,4 +1,5 @@
 export interface DeskToolFeatures {
   reviewChanges: boolean
+  splitPanes: boolean
   splitViews: boolean
 }

packages/@sanity/desk-tool/src/panes/documentPane/documentPanel/documentPanel.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames'
 import {MenuItemGroupType} from 'part:@sanity/components/menus/default'
-import {PortalProvider} from 'part:@sanity/components/portal'
-import React, {createElement, useCallback, useEffect, useMemo, useRef} from 'react'
+import {PortalProvider, usePortal} from 'part:@sanity/components/portal'
+import React, {createElement, useCallback, useMemo, useRef} from 'react'
 import {useDeskToolFeatures} from '../../../features'
 import {useDocumentHistory} from '../documentHistory'
 import {Doc, DocumentView} from '../types'
@@ -43,9 +43,9 @@ interface DocumentPanelProps {
 }
 
 export function DocumentPanel(props: DocumentPanelProps) {
+  const parentPortal = usePortal()
   const features = useDeskToolFeatures()
-  const portalContainerRef = useRef<HTMLDivElement | null>(null)
-  const portalRef = useRef(document.createElement('div'))
+  const portalRef = useRef<HTMLDivElement | null>(null)
   const {displayed, historyController, open: openHistory} = useDocumentHistory()
   const {toggleInspect, isHistoryOpen} = props
   const formRef = useRef<any>()
@@ -99,17 +99,10 @@ export function DocumentPanel(props: DocumentPanelProps) {
     [formRef.current]
   )
 
-  useEffect(() => {
-    if (portalContainerRef.current) {
-      portalContainerRef.current.appendChild(portalRef.current)
-    }
-
-    return () => {
-      if (portalContainerRef.current) {
-        portalContainerRef.current.removeChild(portalRef.current)
-      }
-    }
-  }, [])
+  // Use a local portal container when split panes is supported
+  const portalElement: HTMLElement = features.splitPanes
+    ? portalRef.current || parentPortal.element
+    : parentPortal.element
 
   return (
     <div className={classNames(styles.root, props.isCollapsed && styles.isCollapsed)}>
@@ -147,7 +140,7 @@ export function DocumentPanel(props: DocumentPanelProps) {
         />
       </div>
 
-      <PortalProvider element={portalRef.current}>
+      <PortalProvider element={portalElement}>
         <div className={styles.documentViewerContainer}>
           <div className={styles.documentScroller}>
             {activeView.type === 'form' && (
@@ -172,7 +165,7 @@ export function DocumentPanel(props: DocumentPanelProps) {
               })}
           </div>
 
-          <div data-portal-container ref={portalContainerRef} />
+          <div data-portal ref={portalRef} />
         </div>
       </PortalProvider>
     </div>