Slot: Unwrap promises for async child elements (#3680)

Fix #3165

This changeset patches an issue with how slot components interact
with lazy React components. In the case of a lazy component instance,
the resulting promise must be consumed to render the desired component.

Thank you @danielr18 for contributing the initial fix.

Author: quantizor

.changeset/purple-donuts-smell.md

@@ -0,0 +1,5 @@
+---
+'@radix-ui/react-slot': patch
+---
+
+This changeset patches an issue with how slot components interact with lazy React components. In the case of a lazy component instance, the resulting promise must be consumed to render the desired component.

packages/react/slot/src/__snapshots__/slot.test.tsx.snap

@@ -35,3 +35,22 @@ exports[`given a Button with Slottable > without asChild > should render a butto
   </button>
 </div>
 `;
+
+exports[`given a Slot with React lazy components > with a lazy component in Button with Slottable > should render a lazy link with icon on the left/right 1`] = `
+<div>
+  <a
+    href="https://radix-ui.com"
+  >
+    <span>
+      left
+    </span>
+    Button 
+    <em>
+      text
+    </em>
+    <span>
+      right
+    </span>
+  </a>
+</div>
+`;

packages/react/slot/src/slot.test.tsx

@@ -172,6 +172,65 @@ describe.skip('given an Input', () => {
   });
 });
 
+describe('given a Slot with React lazy components', () => {
+  afterEach(cleanup);
+
+  describe('with a lazy component as child', () => {
+    const LazyButton = React.lazy(() =>
+      Promise.resolve({
+        default: ({ children, ...props }: React.ComponentProps<'button'>) => (
+          <button {...props}>{children}</button>
+        ),
+      })
+    );
+
+    it('should render the lazy component correctly', async () => {
+      const handleClick = vi.fn();
+
+      render(
+        <React.Suspense fallback={<div>Loading...</div>}>
+          <Slot onClick={handleClick}>
+            <LazyButton>Click me</LazyButton>
+          </Slot>
+        </React.Suspense>
+      );
+
+      // Wait for lazy component to load
+      await screen.findByRole('button');
+
+      fireEvent.click(screen.getByRole('button'));
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('with a lazy component in Button with Slottable', () => {
+    const LazyLink = React.lazy(() =>
+      Promise.resolve({
+        default: ({ children, ...props }: React.ComponentProps<'a'>) => (
+          <a {...props}>{children}</a>
+        ),
+      })
+    );
+
+    it('should render a lazy link with icon on the left/right', async () => {
+      const tree = render(
+        <React.Suspense fallback={<div>Loading...</div>}>
+          <Button iconLeft={<span>left</span>} iconRight={<span>right</span>} asChild>
+            <LazyLink href="https://radix-ui.com">
+              Button <em>text</em>
+            </LazyLink>
+          </Button>
+        </React.Suspense>
+      );
+
+      // Wait for lazy component to load
+      await screen.findByRole('link');
+
+      expect(tree.container).toMatchSnapshot();
+    });
+  });
+});
+
 type TriggerProps = React.ComponentProps<'button'> & { as: React.ElementType };
 
 const Trigger = ({ as: Comp = 'button', ...props }: TriggerProps) => <Comp {...props} />;

packages/react/slot/src/slot.tsx

@@ -1,6 +1,19 @@
 import * as React from 'react';
 import { composeRefs } from '@radix-ui/react-compose-refs';
 
+declare module 'react' {
+  interface ReactElement {
+    $$typeof?: symbol | string;
+  }
+}
+
+const REACT_LAZY_TYPE = Symbol.for('react.lazy');
+
+interface LazyReactElement extends React.ReactElement {
+  $$typeof: typeof REACT_LAZY_TYPE;
+  _payload: any;
+}
+
 /* -------------------------------------------------------------------------------------------------
  * Slot
  * -----------------------------------------------------------------------------------------------*/
@@ -9,10 +22,18 @@ interface SlotProps extends React.HTMLAttributes<HTMLElement> {
   children?: React.ReactNode;
 }
 
+function isLazyComponent(element: React.ReactNode): element is LazyReactElement {
+  // has to be done in a roundabout way unless we want to add a dependency on react-is
+  return React.isValidElement(element) && element.$$typeof === REACT_LAZY_TYPE;
+}
+
 /* @__NO_SIDE_EFFECTS__ */ export function createSlot(ownerName: string) {
   const SlotClone = createSlotClone(ownerName);
   const Slot = React.forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {
-    const { children, ...slotProps } = props;
+    let { children, ...slotProps } = props;
+    if (isLazyComponent(children)) {
+      children = React.use(children._payload);
+    }
     const childrenArray = React.Children.toArray(children);
     const slottable = childrenArray.find(isSlottable);
 
@@ -65,7 +86,10 @@ interface SlotCloneProps {
 
 /* @__NO_SIDE_EFFECTS__ */ function createSlotClone(ownerName: string) {
   const SlotClone = React.forwardRef<any, SlotCloneProps>((props, forwardedRef) => {
-    const { children, ...slotProps } = props;
+    let { children, ...slotProps } = props;
+    if (isLazyComponent(children)) {
+      children = React.use(children._payload);
+    }
 
     if (React.isValidElement(children)) {
       const childrenRef = getElementRef(children);