radix-ui · benoitgrelard · Feb 21, 2024 · Feb 21, 2024 · Feb 21, 2024 · Feb 21, 2024
diff --git a/apps/playground/app/test-tabnav/(accounts)/page.tsx b/apps/playground/app/test-tabnav/(accounts)/page.tsx
@@ -0,0 +1,5 @@
+import { Heading } from '@radix-ui/themes';
+
+export default function Accounts() {
+  return <Heading>Accounts</Heading>;
+}
diff --git a/apps/playground/app/test-tabnav/documents/page.tsx b/apps/playground/app/test-tabnav/documents/page.tsx
@@ -0,0 +1,5 @@
+import { Heading } from '@radix-ui/themes';
+
+export default function Documents() {
+  return <Heading>Documents</Heading>;
+}
diff --git a/apps/playground/app/test-tabnav/layout.tsx b/apps/playground/app/test-tabnav/layout.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Theme, Container, Section, Box } from '@radix-ui/themes';
+import { NextThemeProvider } from '../next-theme-provider';
+import { Nav } from './nav';
+
+export default function Test({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body>
+        <NextThemeProvider>
+          <Theme asChild>
+            <div id="root">
+              <Container>
+                <Section>
+                  <Nav />
+                  <Box my="9">{children}</Box>
+                </Section>
+              </Container>
+            </div>
+          </Theme>
+        </NextThemeProvider>
+      </body>
+    </html>
+  );
+}
diff --git a/apps/playground/app/test-tabnav/nav.tsx b/apps/playground/app/test-tabnav/nav.tsx
@@ -0,0 +1,57 @@
+'use client';
+
+import NextLink from 'next/link';
+import { usePathname } from 'next/navigation';
+import { TabNavRoot, TabNavLink, Heading, Flex, Text } from '@radix-ui/themes';
+
+export function Nav() {
+  const pathname = usePathname();
+  return (
+    <Flex direction="column" gap="9">
+      <Flex direction="column" gap="2">
+        <Heading size="3">Straight up `TabNavLink`</Heading>
+        <TabNavRoot>
+          <TabNavLink href="/test-tabnav" active={pathname === '/test-tabnav'}>
+            Accounts
+          </TabNavLink>
+          <TabNavLink href="/test-tabnav/documents" active={pathname === '/test-tabnav/documents'}>
+            Documents
+          </TabNavLink>
+          <TabNavLink href="/test-tabnav/settings" active={pathname === '/test-tabnav/settings'}>
+            Settings
+          </TabNavLink>
+        </TabNavRoot>
+      </Flex>
+
+      <Flex direction="column" gap="2">
+        <Heading size="3">{`<TabNavLink asChild>`} with `NextLink`</Heading>
+        <TabNavRoot>
+          <TabNavLink asChild active={pathname === '/test-tabnav'}>
+            <NextLink href="/test-tabnav">Accounts</NextLink>
+          </TabNavLink>
+          <TabNavLink asChild active={pathname === '/test-tabnav/documents'}>
+            <NextLink href="/test-tabnav/documents">Documents</NextLink>
+          </TabNavLink>
+          <TabNavLink asChild active={pathname === '/test-tabnav/settings'}>
+            <NextLink href="/test-tabnav/settings">Settings</NextLink>
+          </TabNavLink>
+        </TabNavRoot>
+      </Flex>
+
+      <Flex direction="column" gap="2">
+        <Heading size="3">{`<NextLink passHref legacyBehavior>`} with `TabNavLink`</Heading>
+        <TabNavRoot>
+          <NextLink passHref legacyBehavior href="/test-tabnav">
+            <TabNavLink active={pathname === '/test-tabnav'}>Accounts</TabNavLink>
+          </NextLink>
+          <NextLink passHref legacyBehavior href="/test-tabnav/documents">
+            <TabNavLink active={pathname === '/test-tabnav/documents'}>Documents</TabNavLink>
+          </NextLink>
+          <NextLink passHref legacyBehavior href="/test-tabnav/settings">
+            <TabNavLink active={pathname === '/test-tabnav/settings'}>Settings</TabNavLink>
+          </NextLink>
+        </TabNavRoot>
+      </Flex>
+    </Flex>
+  );
+}
diff --git a/apps/playground/app/test-tabnav/settings/page.tsx b/apps/playground/app/test-tabnav/settings/page.tsx
@@ -0,0 +1,5 @@
+import { Heading } from '@radix-ui/themes';
+
+export default function Settings() {
+  return <Heading>Settings</Heading>;
+}
diff --git a/packages/radix-ui-themes/src/components/avatar.tsx b/packages/radix-ui-themes/src/components/avatar.tsx
@@ -4,40 +4,31 @@ import * as React from 'react';
 import classNames from 'classnames';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { avatarPropDefs } from './avatar.props.js';
-import { extractProps, getRoot } from '../helpers/index.js';
+import { extractProps, getSubtree } from '../helpers/index.js';
 import { marginPropDefs } from '../props/index.js';
 
 import type { ComponentPropsWithoutColor } from '../helpers/index.js';
 import type { MarginProps, GetPropDefTypes } from '../props/index.js';
 
 interface AvatarProps extends MarginProps, AvatarImplProps {}
 const Avatar = React.forwardRef<AvatarImplElement, AvatarProps>((props, forwardedRef) => {
-  const {
-    asChild,
-    children: childrenProp,
-    className,
-    style,
-    color,
-    radius,
-    ...imageProps
-  } = extractProps(props, avatarPropDefs, marginPropDefs);
-
-  const { Root: AvatarRoot } = getRoot({
-    asChild,
-    children: childrenProp,
-    parent: AvatarPrimitive.Root,
-  });
+  const { asChild, children, className, style, color, radius, ...imageProps } = extractProps(
+    props,
+    avatarPropDefs,
+    marginPropDefs
+  );
 
   return (
     // TODO as a rule, should we rather spread the props on root?
-    <AvatarRoot
+    <AvatarPrimitive.Root
       data-accent-color={color}
       data-radius={radius}
       className={classNames('rt-reset', 'rt-AvatarRoot', className)}
       style={style}
+      asChild={asChild}
     >
-      <AvatarImpl ref={forwardedRef} {...imageProps} />
-    </AvatarRoot>
+      {getSubtree({ asChild, children }, <AvatarImpl ref={forwardedRef} {...imageProps} />)}
+    </AvatarPrimitive.Root>
   );
 });
 Avatar.displayName = 'Avatar';

diff --git a/packages/radix-ui-themes/src/components/card.tsx b/packages/radix-ui-themes/src/components/card.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { Slot } from '@radix-ui/react-slot';
 import { cardPropDefs } from './card.props.js';
-import { extractProps, getRoot } from '../helpers/index.js';
+import { extractProps } from '../helpers/index.js';
 import { marginPropDefs } from '../props/index.js';
 
 import type { ComponentPropsWithoutColor } from '../helpers/index.js';

diff --git a/packages/radix-ui-themes/src/components/container.tsx b/packages/radix-ui-themes/src/components/container.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { Slot } from '@radix-ui/react-slot';
 import { containerPropDefs } from './container.props.js';
-import { extractProps, getRoot } from '../helpers/index.js';
+import { extractProps, getSubtree } from '../helpers/index.js';
 import {
   deprecatedLayoutPropDefs,
   heightPropDefs,
@@ -23,12 +23,7 @@ interface ContainerProps
     ContainerOwnProps {}
 const Container = React.forwardRef<ContainerElement, ContainerProps>(
   ({ width, minWidth, maxWidth, ...props }, forwardedRef) => {
-    const {
-      asChild,
-      children: childrenProp,
-      className,
-      ...containerProps
-    } = extractProps(
+    const { asChild, children, className, ...containerProps } = extractProps(
       props,
       containerPropDefs,
       layoutPropDefs,
@@ -42,22 +37,20 @@ const Container = React.forwardRef<ContainerElement, ContainerProps>(
       heightPropDefs
     );
 
-    const { Root: ContainerRoot, children } = getRoot({
-      asChild,
-      children: childrenProp,
-      parent: asChild ? Slot : 'div',
-    });
+    const Comp = asChild ? Slot : 'div';
 
     return (
-      <ContainerRoot
+      <Comp
         {...containerProps}
         ref={forwardedRef}
         className={classNames('rt-Container', className)}
       >
-        <div className={classNames('rt-ContainerInner', innerClassName)} style={innerStyle}>
-          {children}
-        </div>
-      </ContainerRoot>
+        {getSubtree({ asChild, children }, (children) => (
+          <div className={classNames('rt-ContainerInner', innerClassName)} style={innerStyle}>
+            {children}
+          </div>
+        ))}
+      </Comp>
     );
   }
 );

diff --git a/packages/radix-ui-themes/src/components/scroll-area.tsx b/packages/radix-ui-themes/src/components/scroll-area.tsx
@@ -8,8 +8,8 @@ import {
   extractMarginProps,
   getMarginStyles,
   getResponsiveClassNames,
-  getRoot,
   mergeStyles,
+  getSubtree,
 } from '../helpers/index.js';
 
 import type { ComponentPropsWithoutColor } from '../helpers/index.js';
@@ -28,7 +28,7 @@ const ScrollArea = React.forwardRef<ScrollAreaElement, ScrollAreaProps>((props,
 
   const {
     asChild,
-    children: childrenProp,
+    children,
     className,
     style,
     type,
@@ -40,66 +40,66 @@ const ScrollArea = React.forwardRef<ScrollAreaElement, ScrollAreaProps>((props,
     ...viewportProps
   } = marginRest;
 
-  const { Root: ScrollAreaRoot, children } = getRoot({
-    asChild,
-    children: childrenProp,
-    parent: ScrollAreaPrimitive.Root,
-  });
-
   return (
-    <ScrollAreaRoot
+    <ScrollAreaPrimitive.Root
       type={type}
       scrollHideDelay={scrollHideDelay}
       className={classNames('rt-ScrollAreaRoot', marginClassNames, className)}
       style={mergeStyles(marginCustomProperties, style)}
+      asChild={asChild}
     >
-      <ScrollAreaPrimitive.Viewport
-        {...viewportProps}
-        ref={forwardedRef}
-        className="rt-ScrollAreaViewport"
-      >
-        {children}
-      </ScrollAreaPrimitive.Viewport>
-      <div className="rt-ScrollAreaViewportFocusRing" />
+      {getSubtree({ asChild, children }, (children) => (
+        <>
+          <ScrollAreaPrimitive.Viewport
+            {...viewportProps}
+            ref={forwardedRef}
+            className="rt-ScrollAreaViewport"
+          >
+            {children}
+          </ScrollAreaPrimitive.Viewport>
+
+          <div className="rt-ScrollAreaViewportFocusRing" />
 
-      {scrollbars !== 'vertical' ? (
-        <ScrollAreaPrimitive.Scrollbar
-          data-radius={radius}
-          orientation="horizontal"
-          className={classNames(
-            'rt-ScrollAreaScrollbar',
-            getResponsiveClassNames({
-              className: 'rt-r-size',
-              value: size,
-              propValues: scrollAreaPropDefs.size.values,
-            })
-          )}
-        >
-          <ScrollAreaPrimitive.Thumb className="rt-ScrollAreaThumb" />
-        </ScrollAreaPrimitive.Scrollbar>
-      ) : null}
+          {scrollbars !== 'vertical' ? (
+            <ScrollAreaPrimitive.Scrollbar
+              data-radius={radius}
+              orientation="horizontal"
+              className={classNames(
+                'rt-ScrollAreaScrollbar',
+                getResponsiveClassNames({
+                  className: 'rt-r-size',
+                  value: size,
+                  propValues: scrollAreaPropDefs.size.values,
+                })
+              )}
+            >
+              <ScrollAreaPrimitive.Thumb className="rt-ScrollAreaThumb" />
+            </ScrollAreaPrimitive.Scrollbar>
+          ) : null}
 
-      {scrollbars !== 'horizontal' ? (
-        <ScrollAreaPrimitive.Scrollbar
-          data-radius={radius}
-          orientation="vertical"
-          className={classNames(
-            'rt-ScrollAreaScrollbar',
-            getResponsiveClassNames({
-              className: 'rt-r-size',
-              value: size,
-              propValues: scrollAreaPropDefs.size.values,
-            })
-          )}
-        >
-          <ScrollAreaPrimitive.Thumb className="rt-ScrollAreaThumb" />
-        </ScrollAreaPrimitive.Scrollbar>
-      ) : null}
+          {scrollbars !== 'horizontal' ? (
+            <ScrollAreaPrimitive.Scrollbar
+              data-radius={radius}
+              orientation="vertical"
+              className={classNames(
+                'rt-ScrollAreaScrollbar',
+                getResponsiveClassNames({
+                  className: 'rt-r-size',
+                  value: size,
+                  propValues: scrollAreaPropDefs.size.values,
+                })
+              )}
+            >
+              <ScrollAreaPrimitive.Thumb className="rt-ScrollAreaThumb" />
+            </ScrollAreaPrimitive.Scrollbar>
+          ) : null}
 
-      {scrollbars === 'both' ? (
-        <ScrollAreaPrimitive.Corner className="rt-ScrollAreaCorner" />
-      ) : null}
-    </ScrollAreaRoot>
+          {scrollbars === 'both' ? (
+            <ScrollAreaPrimitive.Corner className="rt-ScrollAreaCorner" />
+          ) : null}
+        </>
+      ))}
+    </ScrollAreaPrimitive.Root>
   );
 });
 ScrollArea.displayName = 'ScrollArea';