feat(DocumentContext): Add support for React Portals in new windows & document picture-in-picture

apps/ssr-testing/app/document-context/page.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+import * as DocumentContext from '@radix-ui/react-document-context';
+
+export default function Page() {
+  return <DocumentContext.DocumentProvider>Document Context</DocumentContext.DocumentProvider>;
+}

apps/ssr-testing/app/layout.tsx

@@ -42,6 +42,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
               <Link href="/toolbar">Toolbar</Link>
               <Link href="/tooltip">Tooltip</Link>
               <Link href="/visually-hidden">VisuallyHidden</Link>
+              <Link href="/document-context">DocumentContext</Link>
             </div>
 
             <div>{children}</div>

packages/react/alert-dialog/src/alert-dialog.tsx

@@ -7,6 +7,7 @@ import { composeEventHandlers } from '@radix-ui/primitive';
 import { Slottable } from '@radix-ui/react-slot';
 
 import type { Scope } from '@radix-ui/react-context';
+import { useDocument } from '@radix-ui/react-document-context';
 
 /* -------------------------------------------------------------------------------------------------
  * AlertDialog
@@ -242,6 +243,7 @@ type DescriptionWarningProps = {
 };
 
 const DescriptionWarning: React.FC<DescriptionWarningProps> = ({ contentRef }) => {
+  const providedDocument = useDocument();
   const MESSAGE = `\`${CONTENT_NAME}\` requires a description for the component to be accessible for screen reader users.
 
 You can add a description to the \`${CONTENT_NAME}\` by passing a \`${DESCRIPTION_NAME}\` component as a child, which also benefits sighted users by adding visible context to the dialog.
@@ -251,11 +253,12 @@ Alternatively, you can use your own component as a description by assigning it a
 For more information, see https://radix-ui.com/primitives/docs/components/alert-dialog`;
 
   React.useEffect(() => {
-    const hasDescription = document.getElementById(
+    if (!providedDocument) return;
+    const hasDescription = providedDocument.getElementById(
       contentRef.current?.getAttribute('aria-describedby')!
     );
     if (!hasDescription) console.warn(MESSAGE);
-  }, [MESSAGE, contentRef]);
+  }, [MESSAGE, contentRef, providedDocument]);
 
   return null;
 };

packages/react/avatar/src/avatar.tsx

@@ -5,6 +5,7 @@ import { useLayoutEffect } from '@radix-ui/react-use-layout-effect';
 import { Primitive } from '@radix-ui/react-primitive';
 
 import type { Scope } from '@radix-ui/react-context';
+import { useDocument } from '@radix-ui/react-document-context';
 
 /* -------------------------------------------------------------------------------------------------
  * Avatar
@@ -98,13 +99,16 @@ const AvatarFallback = React.forwardRef<AvatarFallbackElement, AvatarFallbackPro
     const { __scopeAvatar, delayMs, ...fallbackProps } = props;
     const context = useAvatarContext(FALLBACK_NAME, __scopeAvatar);
     const [canRender, setCanRender] = React.useState(delayMs === undefined);
+    const providedDocument = useDocument();
+    const documentWindow = providedDocument?.defaultView;
 
     React.useEffect(() => {
+      if (!documentWindow) return;
       if (delayMs !== undefined) {
-        const timerId = window.setTimeout(() => setCanRender(true), delayMs);
-        return () => window.clearTimeout(timerId);
+        const timerId = documentWindow.setTimeout(() => setCanRender(true), delayMs);
+        return () => documentWindow.clearTimeout(timerId);
       }
-    }, [delayMs]);
+    }, [delayMs, documentWindow]);
 
     return canRender && context.imageLoadingStatus !== 'loaded' ? (
       <Primitive.span {...fallbackProps} ref={forwardedRef} />
@@ -121,15 +125,17 @@ function useImageLoadingStatus(
   { referrerPolicy, crossOrigin }: AvatarImageProps
 ) {
   const [loadingStatus, setLoadingStatus] = React.useState<ImageLoadingStatus>('idle');
-
+  const providedDocument = useDocument();
+  const documentWindow = providedDocument?.defaultView;
   useLayoutEffect(() => {
+    if (!documentWindow) return;
     if (!src) {
       setLoadingStatus('error');
       return;
     }
 
     let isMounted = true;
-    const image = new window.Image();
+    const image = new documentWindow.Image();
 
     const updateStatus = (status: ImageLoadingStatus) => () => {
       if (!isMounted) return;
@@ -149,7 +155,7 @@ function useImageLoadingStatus(
     return () => {
       isMounted = false;
     };
-  }, [src, referrerPolicy, crossOrigin]);
+  }, [src, referrerPolicy, documentWindow, crossOrigin]);
 
   return loadingStatus;
 }

packages/react/context-menu/src/context-menu.tsx

@@ -8,6 +8,7 @@ import { useCallbackRef } from '@radix-ui/react-use-callback-ref';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 
 import type { Scope } from '@radix-ui/react-context';
+import { useDocument } from '@radix-ui/react-document-context';
 
 type Direction = 'ltr' | 'rtl';
 type Point = { x: number; y: number };
@@ -97,10 +98,12 @@ const ContextMenuTrigger = React.forwardRef<ContextMenuTriggerElement, ContextMe
     const virtualRef = React.useRef({
       getBoundingClientRect: () => DOMRect.fromRect({ width: 0, height: 0, ...pointRef.current }),
     });
+    const documentWindow = useDocument()?.defaultView;
+
     const longPressTimerRef = React.useRef(0);
     const clearLongPress = React.useCallback(
-      () => window.clearTimeout(longPressTimerRef.current),
-      []
+      () => documentWindow?.clearTimeout(longPressTimerRef.current),
+      [documentWindow]
     );
     const handleOpen = (event: React.MouseEvent | React.PointerEvent) => {
       pointRef.current = { x: event.clientX, y: event.clientY };
@@ -140,7 +143,12 @@ const ContextMenuTrigger = React.forwardRef<ContextMenuTriggerElement, ContextMe
                   whenTouchOrPen((event) => {
                     // clear the long press here in case there's multiple touch points
                     clearLongPress();
-                    longPressTimerRef.current = window.setTimeout(() => handleOpen(event), 700);
+                    if (documentWindow) {
+                      longPressTimerRef.current = documentWindow?.setTimeout(
+                        () => handleOpen(event),
+                        700
+                      );
+                    }
                   })
                 )
           }

packages/react/dialog/src/dialog.tsx

@@ -15,6 +15,7 @@ import { hideOthers } from 'aria-hidden';
 import { Slot } from '@radix-ui/react-slot';
 
 import type { Scope } from '@radix-ui/react-context';
+import { useDocument } from '@radix-ui/react-document-context';
 
 /* -------------------------------------------------------------------------------------------------
  * Dialog
@@ -503,6 +504,7 @@ const [WarningProvider, useWarningContext] = createContext(TITLE_WARNING_NAME, {
 type TitleWarningProps = { titleId?: string };
 
 const TitleWarning: React.FC<TitleWarningProps> = ({ titleId }) => {
+  const providedDocument = useDocument();
   const titleWarningContext = useWarningContext(TITLE_WARNING_NAME);
 
   const MESSAGE = `\`${titleWarningContext.contentName}\` requires a \`${titleWarningContext.titleName}\` for the component to be accessible for screen reader users.
@@ -512,11 +514,12 @@ If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it wi
 For more information, see https://radix-ui.com/primitives/docs/components/${titleWarningContext.docsSlug}`;
 
   React.useEffect(() => {
+    if (!providedDocument) return;
     if (titleId) {
-      const hasTitle = document.getElementById(titleId);
+      const hasTitle = providedDocument.getElementById(titleId);
       if (!hasTitle) console.error(MESSAGE);
     }
-  }, [MESSAGE, titleId]);
+  }, [MESSAGE, titleId, providedDocument]);
 
   return null;
 };
@@ -529,17 +532,19 @@ type DescriptionWarningProps = {
 };
 
 const DescriptionWarning: React.FC<DescriptionWarningProps> = ({ contentRef, descriptionId }) => {
+  const providedDocument = useDocument();
   const descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME);
   const MESSAGE = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${descriptionWarningContext.contentName}}.`;
 
   React.useEffect(() => {
+    if (!providedDocument) return;
     const describedById = contentRef.current?.getAttribute('aria-describedby');
     // if we have an id and the user hasn't set aria-describedby={undefined}
     if (descriptionId && describedById) {
-      const hasDescription = document.getElementById(descriptionId);
+      const hasDescription = providedDocument.getElementById(descriptionId);
       if (!hasDescription) console.warn(MESSAGE);
     }
-  }, [MESSAGE, contentRef, descriptionId]);
+  }, [MESSAGE, contentRef, descriptionId, providedDocument]);
 
   return null;
 };

packages/react/dismissable-layer/package.json

@@ -31,6 +31,7 @@
   "dependencies": {
     "@radix-ui/primitive": "workspace:*",
     "@radix-ui/react-compose-refs": "workspace:*",
+    "@radix-ui/react-document-context": "workspace:*",
     "@radix-ui/react-primitive": "workspace:*",
     "@radix-ui/react-use-callback-ref": "workspace:*",
     "@radix-ui/react-use-escape-keydown": "workspace:*"