Add forceMount to Content (#1414)

Author: Andy Hook

.yarn/versions/4a91906d.yml

@@ -0,0 +1,5 @@
+releases:
+  "@radix-ui/react-tabs": patch
+
+declined:
+  - primitives

packages/react/tabs/src/Tabs.stories.tsx

@@ -309,6 +309,30 @@ export const Chromatic = () => (
       </Tabs.Content>
     </Tabs.Root>
 
+    <h1>Force mounted contents</h1>
+    <Tabs.Root className={rootClass()}>
+      <Tabs.List aria-label="tabs example" className={listClass()}>
+        <Tabs.Trigger value="tab1" className={triggerClass()}>
+          Tab 1
+        </Tabs.Trigger>
+        <Tabs.Trigger value="tab2" className={triggerClass()}>
+          Tab 2
+        </Tabs.Trigger>
+        <Tabs.Trigger value="tab3" className={triggerClass()}>
+          Tab 3
+        </Tabs.Trigger>
+      </Tabs.List>
+      <Tabs.Content value="tab1" className={contentClass()} forceMount>
+        Tab 1 content
+      </Tabs.Content>
+      <Tabs.Content value="tab2" className={contentClass()} forceMount>
+        Tab 2 content
+      </Tabs.Content>
+      <Tabs.Content value="tab3" className={contentClass()} forceMount>
+        Tab 3 content
+      </Tabs.Content>
+    </Tabs.Root>
+
     <h1>State attributes</h1>
     <Tabs.Root defaultValue="tab3" className={rootAttrClass()}>
       <Tabs.List aria-label="tabs example" className={listAttrClass()}>

packages/react/tabs/src/Tabs.tsx

@@ -217,11 +217,17 @@ const CONTENT_NAME = 'TabsContent';
 type TabsContentElement = React.ElementRef<typeof Primitive.div>;
 interface TabsContentProps extends PrimitiveDivProps {
   value: string;
+
+  /**
+   * Used to force mounting when more control is needed. Useful when
+   * controlling animation with React animation libraries.
+   */
+  forceMount?: true;
 }
 
 const TabsContent = React.forwardRef<TabsContentElement, TabsContentProps>(
   (props: ScopedProps<TabsContentProps>, forwardedRef) => {
-    const { __scopeTabs, value, children, ...contentProps } = props;
+    const { __scopeTabs, value, forceMount, children, ...contentProps } = props;
     const context = useTabsContext(CONTENT_NAME, __scopeTabs);
     const triggerId = makeTriggerId(context.baseId, value);
     const contentId = makeContentId(context.baseId, value);
@@ -234,7 +240,7 @@ const TabsContent = React.forwardRef<TabsContentElement, TabsContentProps>(
     }, []);
 
     return (
-      <Presence present={isSelected}>
+      <Presence present={forceMount || isSelected}>
         {({ present }) => (
           <Primitive.div
             data-state={isSelected ? 'active' : 'inactive'}