diff --git a/packages/sanity/src/structure/panes/document/document-layout/DocumentLayout.tsx b/packages/sanity/src/structure/panes/document/document-layout/DocumentLayout.tsx index 648557a94ed..5d49b17f19e 100644 --- a/packages/sanity/src/structure/panes/document/document-layout/DocumentLayout.tsx +++ b/packages/sanity/src/structure/panes/document/document-layout/DocumentLayout.tsx @@ -6,7 +6,7 @@ import { useElementRect, } from '@sanity/ui' import {isHotkey} from 'is-hotkey-esm' -import {useCallback, useMemo, useState} from 'react' +import {type ReactNode, useCallback, useMemo, useState} from 'react' import {useTranslation} from 'react-i18next' import { ChangeConnectorRoot, @@ -25,7 +25,7 @@ import {type Path} from 'sanity-diff-patch' import {styled} from 'styled-components' import {TooltipDelayGroupProvider} from '../../../../ui-components' -import {Pane, PaneFooter, usePaneLayout} from '../../../components' +import {Pane, PaneFooter, usePane, usePaneLayout} from '../../../components' import {DOCUMENT_PANEL_PORTAL_ELEMENT} from '../../../constants' import {structureLocaleNamespace} from '../../../i18n' import {useStructureTool} from '../../../useStructureTool' @@ -85,6 +85,7 @@ export function DocumentLayout() { const {features} = useStructureTool() const {t} = useTranslation(structureLocaleNamespace) const {collapsed: layoutCollapsed} = usePaneLayout() + const zOffsets = useZIndex() const previewUrl = usePreviewUrl(value) @@ -211,7 +212,9 @@ export function DocumentLayout() { {createLinkMetadata && isCreateLinked(createLinkMetadata) && CreateLinkedBanner && ( - + + + )} @@ -255,3 +258,12 @@ export function DocumentLayout() { ) } + +/** + * 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 +}