RSC compatibility (#2923)

* RSC compatibility and more SSR tests

* Track version changes

* Track version changes

.yarn/versions/1f1ba8b4.yml

@@ -0,0 +1,47 @@
+releases:
+  "@radix-ui/react-accessible-icon": patch
+  "@radix-ui/react-accordion": patch
+  "@radix-ui/react-alert-dialog": patch
+  "@radix-ui/react-announce": patch
+  "@radix-ui/react-arrow": patch
+  "@radix-ui/react-aspect-ratio": patch
+  "@radix-ui/react-avatar": patch
+  "@radix-ui/react-checkbox": patch
+  "@radix-ui/react-collapsible": patch
+  "@radix-ui/react-collection": patch
+  "@radix-ui/react-context-menu": patch
+  "@radix-ui/react-dialog": patch
+  "@radix-ui/react-dismissable-layer": patch
+  "@radix-ui/react-dropdown-menu": patch
+  "@radix-ui/react-focus-guards": patch
+  "@radix-ui/react-focus-scope": patch
+  "@radix-ui/react-form": patch
+  "@radix-ui/react-hover-card": patch
+  "@radix-ui/react-label": patch
+  "@radix-ui/react-menu": patch
+  "@radix-ui/react-menubar": patch
+  "@radix-ui/react-navigation-menu": patch
+  "@radix-ui/react-popover": patch
+  "@radix-ui/react-popper": patch
+  "@radix-ui/react-portal": minor
+  "@radix-ui/react-presence": patch
+  "@radix-ui/react-primitive": patch
+  "@radix-ui/react-progress": patch
+  "@radix-ui/react-radio-group": patch
+  "@radix-ui/react-roving-focus": patch
+  "@radix-ui/react-scroll-area": patch
+  "@radix-ui/react-select": patch
+  "@radix-ui/react-separator": patch
+  "@radix-ui/react-slider": patch
+  "@radix-ui/react-switch": patch
+  "@radix-ui/react-tabs": patch
+  "@radix-ui/react-toast": patch
+  "@radix-ui/react-toggle": patch
+  "@radix-ui/react-toggle-group": patch
+  "@radix-ui/react-toolbar": patch
+  "@radix-ui/react-tooltip": patch
+  "@radix-ui/react-visually-hidden": patch
+
+declined:
+  - primitives
+  - ssr-testing

packages/react/accordion/src/index.ts

@@ -1,3 +1,4 @@
+'use client';
 export {
   createAccordionScope,
   //

packages/react/alert-dialog/src/index.ts

@@ -1,3 +1,4 @@
+'use client';
 export {
   createAlertDialogScope,
   //

packages/react/announce/src/index.ts

@@ -1,3 +1,4 @@
+'use client';
 export {
   Announce,
   //

packages/react/avatar/src/index.ts

@@ -1,3 +1,4 @@
+'use client';
 export {
   createAvatarScope,
   //

packages/react/checkbox/src/index.ts

@@ -1,3 +1,4 @@
+'use client';
 export {
   createCheckboxScope,
   //

packages/react/collapsible/src/index.ts

@@ -1,3 +1,4 @@
+'use client';
 export {
   createCollapsibleScope,
   //

packages/react/collection/src/index.ts

@@ -1,2 +1,3 @@
+'use client';
 export { createCollection } from './Collection';
 export type { CollectionProps } from './Collection';

packages/react/context-menu/src/index.ts

@@ -1,3 +1,4 @@
+'use client';
 export {
   createContextMenuScope,
   //

packages/react/dialog/src/index.ts

@@ -1,3 +1,4 @@
+'use client';
 export {
   createDialogScope,
   //

packages/react/dismissable-layer/src/index.ts

@@ -1,3 +1,4 @@
+'use client';
 export {
   DismissableLayer,
   DismissableLayerBranch,

packages/react/dropdown-menu/src/index.ts

@@ -1,3 +1,4 @@
+'use client';
 export {
   createDropdownMenuScope,
   //

packages/react/focus-guards/src/index.ts

@@ -1,3 +1,4 @@
+'use client';
 export {
   FocusGuards,
   //

packages/react/focus-scope/src/index.ts

@@ -1,3 +1,4 @@
+'use client';
 export {
   FocusScope,
   //

packages/react/form/src/index.ts

@@ -1,3 +1,4 @@
+'use client';
 export {
   createFormScope,
   //

packages/react/hover-card/src/index.ts

@@ -1,3 +1,4 @@
+'use client';
 export {
   createHoverCardScope,
   //

packages/react/label/src/index.ts

@@ -1,3 +1,4 @@
+'use client';
 export {
   Label,
   //

packages/react/menu/src/index.ts

@@ -1,3 +1,4 @@
+'use client';
 export {
   createMenuScope,
   //

packages/react/menubar/src/index.ts

@@ -1,3 +1,4 @@
+'use client';
 export {
   createMenubarScope,
   //

packages/react/navigation-menu/src/index.ts

@@ -1,3 +1,4 @@
+'use client';
 export {
   createNavigationMenuScope,
   //

packages/react/popover/src/index.ts

@@ -1,3 +1,4 @@
+'use client';
 export {
   createPopoverScope,
   //

packages/react/popper/src/index.ts

@@ -1,3 +1,4 @@
+'use client';
 export {
   createPopperScope,
   //

packages/react/portal/src/Portal.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import ReactDOM from 'react-dom';
 import { Primitive } from '@radix-ui/react-primitive';
+import { useLayoutEffect } from '@radix-ui/react-use-layout-effect';
 
 import type * as Radix from '@radix-ui/react-primitive';
 
@@ -16,11 +17,14 @@ interface PortalProps extends PrimitiveDivProps {
   /**
    * An optional container where the portaled content should be appended.
    */
-  container?: HTMLElement | null;
+  container?: Element | null;
 }
 
 const Portal = React.forwardRef<PortalElement, PortalProps>((props, forwardedRef) => {
-  const { container = globalThis?.document?.body, ...portalProps } = props;
+  const { container: containerProp, ...portalProps } = props;
+  const [mounted, setMounted] = React.useState(false);
+  useLayoutEffect(() => setMounted(true), []);
+  const container = containerProp || (mounted && globalThis?.document?.body);
   return container
     ? ReactDOM.createPortal(<Primitive.div {...portalProps} ref={forwardedRef} />, container)
     : null;

packages/react/portal/src/index.ts

@@ -1,3 +1,4 @@
+'use client';
 export {
   Portal,
   //

packages/react/presence/src/index.ts

@@ -1,2 +1,3 @@
+'use client';
 export { Presence } from './Presence';
 export type { PresenceProps } from './Presence';

packages/react/primitive/src/Primitive.tsx

@@ -46,9 +46,9 @@ const Primitive = NODES.reduce((primitive, node) => {
     const { asChild, ...primitiveProps } = props;
     const Comp: any = asChild ? Slot : node;
 
-    React.useEffect(() => {
+    if (typeof window !== 'undefined') {
       (window as any)[Symbol.for('radix-ui')] = true;
-    }, []);
+    }
 
     return <Comp {...primitiveProps} ref={forwardedRef} />;
   });

packages/react/progress/src/index.ts

@@ -1,3 +1,4 @@
+'use client';
 export {
   createProgressScope,
   //

packages/react/radio-group/src/index.ts

@@ -1,3 +1,4 @@
+'use client';
 export {
   createRadioGroupScope,
   //

packages/react/roving-focus/src/index.ts

@@ -1,3 +1,4 @@
+'use client';
 export {
   createRovingFocusGroupScope,
   //

packages/react/scroll-area/src/index.ts

@@ -1,3 +1,4 @@
+'use client';
 export {
   createScrollAreaScope,
   //

packages/react/select/src/index.ts

@@ -1,3 +1,4 @@
+'use client';
 export {
   createSelectScope,
   //

packages/react/slider/src/index.ts

@@ -1,3 +1,4 @@
+'use client';
 export {
   createSliderScope,
   //

packages/react/switch/src/index.ts

@@ -1,3 +1,4 @@
+'use client';
 export {
   createSwitchScope,
   //

packages/react/tabs/src/index.ts

@@ -1,3 +1,4 @@
+'use client';
 export {
   createTabsScope,
   //

packages/react/toast/src/index.ts

@@ -1,3 +1,4 @@
+'use client';
 export {
   createToastScope,
   //

packages/react/toggle-group/src/index.ts

@@ -1,3 +1,4 @@
+'use client';
 export {
   createToggleGroupScope,
   //

packages/react/toggle/src/index.ts

@@ -1,3 +1,4 @@
+'use client';
 export {
   Toggle,
   //

packages/react/toolbar/src/index.ts

@@ -1,3 +1,4 @@
+'use client';
 export {
   createToolbarScope,
   //

packages/react/tooltip/src/index.ts

@@ -1,3 +1,4 @@
+'use client';
 export {
   createTooltipScope,
   //

ssr-testing/app/accessible-icon/page.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { AccessibleIcon } from '@radix-ui/react-accessible-icon';
+
+export default function Page() {
+  return (
+    <button type="button">
+      <AccessibleIcon label="Close">
+        <span>X</span>
+      </AccessibleIcon>
+    </button>
+  );
+}

ssr-testing/pages/accordion.tsx → ssr-testing/app/accordion/page.tsx

@@ -7,7 +7,7 @@ import {
   AccordionContent,
 } from '@radix-ui/react-accordion';
 
-export default function AccordionPage() {
+export default function Page() {
   return (
     <Accordion type="multiple">
       <AccordionItem value="one">

ssr-testing/app/alert-dialog/page.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogOverlay,
+  AlertDialogContent,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogPortal,
+} from '@radix-ui/react-alert-dialog';
+
+export default function Page() {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger>delete everything</AlertDialogTrigger>
+      <AlertDialogPortal>
+        <AlertDialogOverlay />
+        <AlertDialogContent>
+          <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This will do a very dangerous thing. Thar be dragons!
+          </AlertDialogDescription>
+          <AlertDialogAction>yolo, do it</AlertDialogAction>
+          <AlertDialogCancel>maybe not</AlertDialogCancel>
+        </AlertDialogContent>
+      </AlertDialogPortal>
+    </AlertDialog>
+  );
+}

ssr-testing/app/aspect-ratio/page.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { AspectRatio } from '@radix-ui/react-aspect-ratio';
+
+export default function Page() {
+  return (
+    <div style={{ width: 500 }}>
+      <AspectRatio ratio={2 / 1}>
+        <img
+          src="https://images.unsplash.com/photo-1605030753481-bb38b08c384a?&auto=format&fit=crop&w=400&q=80"
+          alt="A house in a forest"
+          style={{ objectFit: 'cover', width: '100%', height: '100%' }}
+        />
+      </AspectRatio>
+    </div>
+  );
+}

ssr-testing/app/avatar/page.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import * as Avatar from '@radix-ui/react-avatar';
+
+export default function Page() {
+  return (
+    <Avatar.Root>
+      <Avatar.Fallback>A</Avatar.Fallback>
+    </Avatar.Root>
+  );
+}

ssr-testing/app/checkbox/page.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import * as Checkbox from '@radix-ui/react-checkbox';
+
+export default function Page() {
+  return (
+    <Checkbox.Root>
+      [ <Checkbox.Indicator>✔</Checkbox.Indicator> ]
+    </Checkbox.Root>
+  );
+}

ssr-testing/pages/collapsible.tsx → ssr-testing/app/collapsible/page.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@radix-ui/react-collapsible';
 
-export default function CollapsiblePage() {
+export default function Page() {
   return (
     <Collapsible>
       <CollapsibleTrigger>Trigger</CollapsibleTrigger>

ssr-testing/app/context-menu/page.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import * as ContextMenu from '@radix-ui/react-context-menu';
+
+export default function Page() {
+  return (
+    <ContextMenu.Root>
+      <ContextMenu.Trigger>Right click here</ContextMenu.Trigger>
+      <ContextMenu.Portal>
+        <ContextMenu.Content alignOffset={-5}>
+          <ContextMenu.Item>Undo</ContextMenu.Item>
+          <ContextMenu.Item>Redo</ContextMenu.Item>
+          <ContextMenu.Separator />
+          <ContextMenu.Item disabled>Cut</ContextMenu.Item>
+          <ContextMenu.Item>Copy</ContextMenu.Item>
+          <ContextMenu.Item>Paste</ContextMenu.Item>
+        </ContextMenu.Content>
+      </ContextMenu.Portal>
+    </ContextMenu.Root>
+  );
+}

ssr-testing/pages/dialog.tsx → ssr-testing/app/dialog/page.tsx

@@ -10,7 +10,7 @@ import {
   DialogClose,
 } from '@radix-ui/react-dialog';
 
-export default function DialogPage() {
+export default function Page() {
   return (
     <Dialog defaultOpen>
       <DialogTrigger>open</DialogTrigger>