feat(Tabs): add shouldForceMount prop to TabPanel

Adds `shouldForceMount` prop to `TabPanel` to render the `TabPanel` in the DOM and hide it visually. This is a request from the Author team to match functionality from reach/tabs that was removed when we migrated over to react-aria-components tabs.

Author: aresnik11

packages/gamut/src/Tabs/Tab.tsx

@@ -11,13 +11,12 @@ import { useTab } from './TabProvider';
 
 interface TabBaseProps extends TabButtonProps, ReactAriaTabProps {}
 
-export type TabProps = TabBaseProps &
-  Omit<ReactAriaTabProps, 'id'> & {
-    /**
-     * the id matches up the tab and tab panel
-     */
-    id: string;
-  };
+export type TabProps = Omit<TabBaseProps, 'id'> & {
+  /**
+   * the id matches up the tab and tab panel
+   */
+  id: string;
+};
 
 const TabBase = styled(ReactAriaTab)<TabProps>(
   tabVariants,

packages/gamut/src/Tabs/TabPanel.tsx

@@ -1,4 +1,6 @@
+import { system } from '@codecademy/gamut-styles';
 import styled from '@emotion/styled';
+import * as React from 'react';
 import {
   TabPanel as ReactAriaTabPanel,
   TabPanelProps as ReactAriaTabPanelProps,
@@ -10,13 +12,34 @@ interface TabPanelBaseProps
   extends TabElementStyleProps,
     ReactAriaTabPanelProps {}
 
-export type TabPanelProps = TabPanelBaseProps &
-  Omit<ReactAriaTabPanelProps, 'id'> & {
-    /**
-     * the id matches up the tab and tab panel
-     */
-    id: string;
-  };
+export type TabPanelProps = Omit<
+  TabPanelBaseProps,
+  'id' | 'shouldForceMount'
+> & {
+  /**
+   * the id matches up the tab and tab panel
+   */
+  id: string;
+  /**
+   * Whether to mount the tab panel in the DOM even when it is not currently selected.
+   * This is a wrapper around the `shouldForceMount` prop in react-aria-components that also visually hides the inactive tab panel.
+   */
+  shouldForceMount?: boolean;
+};
 
-export const TabPanel =
-  styled(ReactAriaTabPanel)<TabPanelProps>(tabElementBaseProps);
+const tabPanelStates = system.states({
+  shouldForceMount: {
+    "&[data-inert='true']": {
+      display: 'none',
+    },
+  },
+});
+
+const StyledTabPanel = styled(ReactAriaTabPanel)<TabPanelProps>(
+  tabElementBaseProps,
+  tabPanelStates
+);
+
+export const TabPanel: React.FC<TabPanelProps> = (props) => {
+  return <StyledTabPanel {...props} />;
+};

packages/gamut/src/Tabs/__tests__/Tabs.test.tsx

@@ -20,7 +20,7 @@ const FullTabs = (props: TabsProps) => (
       <TabPanel id="tab2">
         <p>tab 2 content</p>
       </TabPanel>
-      <TabPanel id="tab3">
+      <TabPanel id="tab3" shouldForceMount>
         <p>tab 3 content</p>
       </TabPanel>
     </TabPanels>
@@ -75,17 +75,20 @@ describe('Tabs', () => {
 
       view.getByText('Tab 1');
       view.getByText('tab 1 content');
+      expect(view.queryByText('tab 2 content')).toBeNull();
     });
 
     it('renders the second tab tab panel and calls onSelectionChange when second tab is clicked', async () => {
       const { view } = renderView();
 
       view.getByText('tab 1 content');
+      expect(view.queryByText('tab 2 content')).toBeNull();
 
       await act(() => userEvent.click(view.getByText('Tab 2')));
 
       view.getByText('tab 2 content');
       expect(mockOnSelectionChange).toHaveBeenCalledWith('tab2');
+      expect(view.queryByText('tab 1 content')).toBeNull();
     });
 
     it('renders the default selected key when passed', () => {
@@ -101,17 +104,20 @@ describe('Tabs', () => {
 
       view.getByText('Tab 1');
       view.getByText('tab 1 content');
+      expect(view.queryByText('tab 2 content')).toBeNull();
     });
 
     it('renders new tab panel and calls onSelectionChange when a tab is clicked', async () => {
       const { view } = renderViewControlled();
 
       view.getByText('tab 1 content');
+      expect(view.queryByText('tab 2 content')).toBeNull();
 
       await act(() => userEvent.click(view.getByText('Tab 2')));
 
       expect(mockOnSelectionChange).toHaveBeenCalledWith('tab2');
       view.getByText('tab 2 content');
+      expect(view.queryByText('tab 1 content')).toBeNull();
     });
   });
   describe('Disabled', () => {
@@ -131,4 +137,17 @@ describe('Tabs', () => {
       expect(tab).toHaveStyle('opacity: 0.25');
     });
   });
+
+  describe('Force mount', () => {
+    it('renders the tab panel when shouldForceMount is passed', () => {
+      const { view } = renderView();
+
+      view.getByText('tab 1 content'); // default tab
+      view.getByText('tab 3 content'); // force mounted tab
+      expect(view.getByText('tab 3 content').parentElement).toHaveStyle(
+        'display: none'
+      );
+      expect(view.queryByText('tab 2 content')).toBeNull(); // not force mounted tab
+    });
+  });
 });

packages/styleguide/src/lib/Molecules/Tabs/Tabs.mdx

@@ -79,6 +79,14 @@ You can disable a tab by passing the `isDisabled` prop to a specific `Tab` compo
 
 <Canvas of={TabStories.Disabled} />
 
+### Force mount
+
+By default, when a tab is not selected, the `TabPanel` is not mounted in the DOM. This is to improve performance and avoid unnecessary rendering. However, if you need to force mount the `TabPanel` even when it is not selected, you can pass the `shouldForceMount` prop to the `TabPanel` component.
+
+The `shouldForceMount` prop is a wrapper around the `shouldForceMount` prop in [react-aria-components](https://react-spectrum.adobe.com/react-aria/Tabs.html#tabpanel) that also visually hides the inactive tab panel.
+
+<Canvas of={TabStories.ForceMount} />
+
 ## Playground
 
 <Canvas sourceState="shown" of={TabStories.Default} />

packages/styleguide/src/lib/Molecules/Tabs/Tabs.stories.tsx

@@ -74,7 +74,7 @@ export const Default: Story = {
           <Text as="h2">Welcome to Tab 1</Text>
           <Text>Hi there! I&apos;m the contents inside Tab 1. Yippee!</Text>
         </TabPanel>
-        <TabPanel id="2">
+        <TabPanel id="2" shouldForceMount>
           <Text as="h2">Welcome to Tab 2</Text>
           <Text>Hi there! I&apos;m the contents inside Tab 2. Yippee!</Text>
         </TabPanel>
@@ -263,3 +263,29 @@ export const Disabled: Story = {
     </Tabs>
   ),
 };
+
+export const ForceMount: Story = {
+  render: (args) => (
+    <Tabs {...args}>
+      <TabList>
+        <Tab id="1">Tab 1</Tab>
+        <Tab id="2">Tab 2</Tab>
+        <Tab id="3">Tab 3</Tab>
+      </TabList>
+      <TabPanels my={24}>
+        <TabPanel id="1" shouldForceMount>
+          <Text as="h2">Welcome to Tab 1</Text>
+          <Text>Hi there! I&apos;m the contents inside Tab 1. Yippee!</Text>
+        </TabPanel>
+        <TabPanel id="2" shouldForceMount>
+          <Text as="h2">Welcome to Tab 2</Text>
+          <Text>Hi there! I&apos;m the contents inside Tab 2. Yippee!</Text>
+        </TabPanel>
+        <TabPanel id="3" shouldForceMount>
+          <Text as="h2">Welcome to Tab 3</Text>
+          <Text>Hi there! I&apos;m the contents inside Tab 3. Yippee!</Text>
+        </TabPanel>
+      </TabPanels>
+    </Tabs>
+  ),
+};