feat(tabs): add keepMountedOnInactive prop to retain inactive tab con…

…tent in the DOM

Add keepMountedOnInactive option to retain inactive tab content in the DOM

#2283

packages/components/tabs/src/Tabs.doc.mdx

@@ -86,6 +86,14 @@ Use `size` prop to set the size of items.
 
 <Canvas of={stories.Size} />
 
+### keepMountedOnInactive
+
+Use `keepMountedOnInactive` when you want the content of your inactive tabs to remain in the DOM instead of being removed.
+
+This can be useful if your tabs load heavy resources on mount, such as heavy images, videos, iframes, etc...
+
+<Canvas of={stories.KeepMountedOnInactive} />
+
 ## Accessibility
 
 Adheres to the [Tabs WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs).

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

@@ -263,6 +263,16 @@ export const Size: StoryFn = _args => (
   </div>
 )
 
+export const KeepMountedOnInactive: StoryFn = _args => (
+  <div>
+    <StoryLabel>keepMountedOnInactive</StoryLabel>
+    {createTabs({
+      rootProps: { defaultValue: 'tab1', keepMountedOnInactive: true },
+      tabs: defaultTabs,
+    })}
+  </div>
+)
+
 export const State: StoryFn = _args => (
   <div className="flex flex-row gap-lg">
     <div className="shrink basis-auto overflow-auto">

packages/components/tabs/src/Tabs.test.tsx

@@ -209,6 +209,19 @@ describe('Tabs', () => {
           behavior: 'smooth',
         })
       })
+
+      it('should keep inactive tabs in the DOM (but hidden) when keepMountedOnInactive prop is true', async () => {
+        render(
+          createTabs({
+            tabs,
+            rootProps: { defaultValue: 'tab1', keepMountedOnInactive: true },
+          })
+        )
+
+        expect(screen.getByText(/Make things happen!/)).toBeInTheDocument()
+
+        expect(screen.getAllByRole('tabpanel').at(-1)).toHaveClass('data-[state=inactive]:hidden')
+      })
     })
   })
 })

packages/components/tabs/src/Tabs.tsx

@@ -13,6 +13,11 @@ export interface TabsProps
    * @default false
    */
   asChild?: boolean
+  /**
+   * Whether to keep inactive tabs content in the DOM.
+   * @default false
+   */
+  keepMountedOnInactive?: boolean
 }
 
 /**
@@ -30,6 +35,7 @@ export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
        * see https://www.radix-ui.com/docs/primitives/components/tabs#root
        */
       asChild = false,
+      keepMountedOnInactive = false,
       orientation = 'horizontal',
       children,
       className,
@@ -43,6 +49,7 @@ export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
           intent,
           size,
           orientation,
+          keepMountedOnInactive,
         }}
       >
         <RadixTabs.Root

packages/components/tabs/src/TabsContent.styles.ts

@@ -1,6 +1,13 @@
 import { cva } from 'class-variance-authority'
 
-export const contentStyles = cva([
-  'w-full p-lg',
-  'focus-visible:outline-none focus-visible:u-ring-inset',
-])
+export const contentStyles = cva(
+  ['w-full p-lg', 'focus-visible:outline-none focus-visible:u-ring-inset'],
+  {
+    variants: {
+      keepMountedOnInactive: {
+        true: 'data-[state=inactive]:hidden',
+        false: '',
+      },
+    },
+  }
+)

packages/components/tabs/src/TabsContent.tsx

@@ -2,6 +2,7 @@ import * as RadixTabs from '@radix-ui/react-tabs'
 import { forwardRef, type PropsWithChildren } from 'react'
 
 import { contentStyles } from './TabsContent.styles'
+import { useTabsContext } from './TabsContext'
 
 export interface TabsContentProps
   extends PropsWithChildren<Omit<RadixTabs.TabsContentProps, 'forceMount'>> {
@@ -34,10 +35,13 @@ export const TabsContent = forwardRef<HTMLDivElement, TabsContentProps>(
     },
     ref
   ) => {
+    const { keepMountedOnInactive } = useTabsContext()
+
     return (
       <RadixTabs.Content
         ref={ref}
-        className={contentStyles({ className })}
+        forceMount={keepMountedOnInactive || undefined}
+        className={contentStyles({ className, keepMountedOnInactive })}
         asChild={asChild}
         {...rest}
       >

packages/components/tabs/src/TabsContext.tsx

@@ -3,7 +3,8 @@ import { createContext, useContext } from 'react'
 
 import type { TabsTriggerVariantsProps } from './TabsTrigger.styles'
 
-export type TabsContextInterface = TabsTriggerVariantsProps & Pick<TabsProps, 'orientation'>
+export type TabsContextInterface = TabsTriggerVariantsProps &
+  Pick<TabsProps, 'orientation'> & { keepMountedOnInactive?: boolean }
 
 export const TabsContext = createContext<TabsContextInterface>({} as TabsContextInterface)