feat(structure): document panel UI updates

packages/sanity/src/structure/panes/document/document-layout/DocumentLayout.tsx

@@ -1,12 +1,6 @@
-import {
-  DialogProvider,
-  type DialogProviderProps,
-  Flex,
-  PortalProvider,
-  useElementRect,
-} from '@sanity/ui'
+import {DialogProvider, type DialogProviderProps, Flex, useElementRect} from '@sanity/ui'
 import {isHotkey} from 'is-hotkey-esm'
-import {type ReactNode, useCallback, useMemo, useState} from 'react'
+import {useCallback, useMemo, useState} from 'react'
 import {useTranslation} from 'react-i18next'
 import {
   ChangeConnectorRoot,
@@ -15,17 +9,13 @@ import {
   FieldActionsProvider,
   FieldActionsResolver,
   GetFormValueProvider,
-  getSanityCreateLinkMetadata,
   type Path,
   useGlobalCopyPasteElementHandler,
-  useSanityCreateConfig,
   useZIndex,
 } from 'sanity'
 import {styled} from 'styled-components'
 
-import {TooltipDelayGroupProvider} from '../../../../ui-components'
-import {Pane, PaneFooter, usePane, usePaneLayout, usePaneRouter} from '../../../components'
-import {DOCUMENT_PANEL_PORTAL_ELEMENT} from '../../../constants'
+import {Pane, usePaneLayout, usePaneRouter} from '../../../components'
 import {structureLocaleNamespace} from '../../../i18n'
 import {useStructureTool} from '../../../useStructureTool'
 import {
@@ -39,10 +29,10 @@ import {DocumentPanel} from '../documentPanel'
 import {DocumentPanelHeader} from '../documentPanel/header'
 import {DocumentActionShortcuts} from '../keyboardShortcuts'
 import {getMenuItems} from '../menuItems'
-import {DocumentStatusBar} from '../statusBar'
 import {useDocumentPane} from '../useDocumentPane'
 import {usePreviewUrl} from '../usePreviewUrl'
 import {DocumentLayoutError} from './DocumentLayoutError'
+import {DocumentLayoutFooter} from './DocumentLayoutFooter'
 
 const EMPTY_ARRAY: [] = []
 
@@ -90,9 +80,6 @@ export function DocumentLayout() {
   const zOffsets = useZIndex()
   const previewUrl = usePreviewUrl(value)
 
-  const createLinkMetadata = getSanityCreateLinkMetadata(value)
-  const {startInCreateBanner: StartInCreateBanner} = useSanityCreateConfig().components ?? {}
-
   const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
   const [footerElement, setFooterElement] = useState<HTMLDivElement | null>(null)
   const [headerElement, setHeaderElement] = useState<HTMLDivElement | null>(null)
@@ -164,11 +151,6 @@ export function DocumentLayout() {
     [onPathOpen, onFocus],
   )
 
-  const portalElements = useMemo(
-    () => ({[DOCUMENT_PANEL_PORTAL_ELEMENT]: documentPanelPortalElement}),
-    [documentPanelPortalElement],
-  )
-
   if (!schemaType) {
     return (
       <DocumentLayoutError
@@ -231,32 +213,11 @@ export function DocumentLayout() {
                   rootElement={rootElement}
                   setDocumentPanelPortalElement={setDocumentPanelPortalElement}
                   footer={
-                    // These providers are added because we want the dialogs in `DocumentStatusBar` to be scoped to the document pane
-                    // The portal element comes from `DocumentPanel`.
-                    <PortalProvider __unstable_elements={portalElements}>
-                      <DialogProvider position={DIALOG_PROVIDER_POSITION} zOffset={zOffsets.portal}>
-                        <PaneFooter ref={setFooterElement} padding={1}>
-                          {StartInCreateBanner && (
-                            <ShowWhenPaneOpen>
-                              <StartInCreateBanner
-                                document={value}
-                                documentId={documentId}
-                                documentType={schemaType}
-                                documentReady={ready}
-                                isInitialValueLoading={!!isInitialValueLoading}
-                                panelPortalElementId={DOCUMENT_PANEL_PORTAL_ELEMENT}
-                              />
-                            </ShowWhenPaneOpen>
-                          )}
-                          <TooltipDelayGroupProvider>
-                            <DocumentStatusBar
-                              actionsBoxRef={setActionsBoxElement}
-                              createLinkMetadata={createLinkMetadata}
-                            />
-                          </TooltipDelayGroupProvider>
-                        </PaneFooter>
-                      </DialogProvider>
-                    </PortalProvider>
+                    <DocumentLayoutFooter
+                      documentPanelPortalElement={documentPanelPortalElement}
+                      setFooterElement={setFooterElement}
+                      setActionsBoxElement={setActionsBoxElement}
+                    />
                   }
                 />
               </StyledChangeConnectorRoot>
@@ -268,12 +229,3 @@ export function DocumentLayout() {
     </GetFormValueProvider>
   )
 }
-
-/**
- * Prevents whatever is inside of it from rendering when the pane is collapsed.
- * Needed locally as DocumentLayout does lives outside PaneContext, but is provided _somewhere_ within it.
- */
-function ShowWhenPaneOpen(props: {children: ReactNode}) {
-  const {collapsed} = usePane()
-  return collapsed ? null : props.children
-}

packages/sanity/src/structure/panes/document/document-layout/DocumentLayoutFooter.tsx

@@ -0,0 +1,75 @@
+import {DialogProvider, type DialogProviderProps, PortalProvider} from '@sanity/ui'
+import {type Dispatch, type ReactNode, type SetStateAction, useMemo} from 'react'
+import {getSanityCreateLinkMetadata, useSanityCreateConfig, useZIndex} from 'sanity'
+
+import {TooltipDelayGroupProvider} from '../../../../ui-components/tooltipDelayGroupProvider/TooltipDelayGroupProvider'
+import {PaneFooter, usePane} from '../../../components'
+import {DOCUMENT_PANEL_PORTAL_ELEMENT} from '../../../constants'
+import {DocumentStatusBar} from '../statusBar'
+import {useDocumentPane} from '../useDocumentPane'
+
+const DIALOG_PROVIDER_POSITION: DialogProviderProps['position'] = [
+  // We use the `position: fixed` for dialogs on narrower screens (first two media breakpoints).
+  'fixed',
+  'fixed',
+  // And we use the `position: absolute` strategy (within panes) on wide screens.
+  'absolute',
+]
+
+export function DocumentLayoutFooter({
+  documentPanelPortalElement,
+  setFooterElement,
+  setActionsBoxElement,
+}: {
+  documentPanelPortalElement: HTMLElement | null
+  setFooterElement: Dispatch<SetStateAction<HTMLDivElement | null>>
+  setActionsBoxElement: Dispatch<SetStateAction<HTMLDivElement | null>>
+}) {
+  const zOffsets = useZIndex()
+
+  const {value, isInitialValueLoading, ready, documentId, schemaType} = useDocumentPane()
+  const portalElements = useMemo(
+    () => ({[DOCUMENT_PANEL_PORTAL_ELEMENT]: documentPanelPortalElement}),
+    [documentPanelPortalElement],
+  )
+
+  const createLinkMetadata = getSanityCreateLinkMetadata(value)
+  const {startInCreateBanner: StartInCreateBanner} = useSanityCreateConfig().components ?? {}
+  return (
+    // These providers are added because we want the dialogs in `DocumentStatusBar` to be scoped to the document pane
+    // The portal element comes from `DocumentPanel`.
+    <PortalProvider __unstable_elements={portalElements}>
+      <DialogProvider position={DIALOG_PROVIDER_POSITION} zOffset={zOffsets.portal}>
+        <PaneFooter ref={setFooterElement} padding={1}>
+          {StartInCreateBanner && (
+            <ShowWhenPaneOpen>
+              <StartInCreateBanner
+                document={value}
+                documentId={documentId}
+                documentType={schemaType}
+                documentReady={ready}
+                isInitialValueLoading={!!isInitialValueLoading}
+                panelPortalElementId={DOCUMENT_PANEL_PORTAL_ELEMENT}
+              />
+            </ShowWhenPaneOpen>
+          )}
+          <TooltipDelayGroupProvider>
+            <DocumentStatusBar
+              actionsBoxRef={setActionsBoxElement}
+              createLinkMetadata={createLinkMetadata}
+            />
+          </TooltipDelayGroupProvider>
+        </PaneFooter>
+      </DialogProvider>
+    </PortalProvider>
+  )
+}
+
+/**
+ * Prevents whatever is inside of it from rendering when the pane is collapsed.
+ * Needed locally as DocumentLayout does lives outside PaneContext, but is provided _somewhere_ within it.
+ */
+function ShowWhenPaneOpen(props: {children: ReactNode}) {
+  const {collapsed} = usePane()
+  return collapsed ? null : props.children
+}