Add unMount prop to Tabs

Include the posibilitie to unmount or not the content of the Tabs component

Author: Kubit

src/components/tabs/__tests__/primaryTabs.test.tsx

@@ -9,6 +9,7 @@ import { renderProvider } from '@/tests/renderProvider/renderProvider.utility';
 import { windowMatchMedia } from '@/tests/windowMatchMedia';
 import { DeviceBreakpointsType, ROLES } from '@/types';
 
+import { TabsControlled } from '../tabsControlled';
 import { TabsUnControlled } from '../tabsUnControlled';
 import { ITabsUnControlled, PrimaryTabTabType } from '../types';
 
@@ -132,4 +133,24 @@ describe('Tabs component', () => {
       selectedTab: 1,
     });
   });
+
+  it('does not render content when unMountContent is true and selectedTab is undefined', () => {
+    renderProvider(<TabsUnControlled {...mockProps} unMountContent={true} />);
+    expect(screen.queryByText('Tab 1 content')).not.toBeInTheDocument();
+    expect(screen.queryByText('Tab 2 content')).not.toBeInTheDocument();
+    expect(screen.queryByText('Tab 3 content')).not.toBeInTheDocument();
+  });
+
+  it('renders all tabs with correct display style when unMountContent is false', () => {
+    const { container } = renderProvider(
+      <TabsControlled {...mockProps} selectedTab={1} unMountContent={false} />
+    );
+    const tabs = container.querySelectorAll('[role="tabpanel"]');
+    expect(tabs).toHaveLength(5);
+    expect(tabs[0]).toHaveStyle('display: none');
+    expect(tabs[1]).toHaveStyle('display: block');
+    expect(tabs[2]).toHaveStyle('display: none');
+    expect(tabs[3]).toHaveStyle('display: none');
+    expect(tabs[4]).toHaveStyle('display: none');
+  });
 });

src/components/tabs/stories/primaryTabs.stories.tsx

@@ -32,6 +32,7 @@ export const Tabs: Story = {
     variant: Object.values(variantsObject[themeSelected].TabsVariantType || {})[0] as string,
     leftIcon: { icon: ICONS.ICON_CHEVRON_UP },
     rightIcon: { icon: ICONS.ICON_CHEVRON_DOWN },
+    unMountContent: true,
     content: [
       <ReplaceContent key="content-0" width="100%">
         Content first tab

src/components/tabs/tabs.styled.ts

@@ -167,8 +167,9 @@ export const LabelHiddenContainer = styled.span`
   display: none;
 `;
 
-export const TabsContentStyled = styled.div<StylesType>`
+export const TabsContentStyled = styled.div<StylesType & { $display?: string }>`
   ${({ styles }) => getStyles(styles.contentContainer)}
+  display: ${({ $display }) => $display};
 `;
 
 export const TabsTabListStyled = styled.div<StylesType>`

src/components/tabs/tabsStandAlone.tsx

@@ -36,6 +36,7 @@ const TabsStandAloneComponent = (
     dataTestId = 'primaryTab',
     minTabsInView = MIN_TABS_IN_VIEW,
     maxTabsInView = MAX_TABS_IN_VIEW,
+    unMountContent = true,
     ...props
   }: ITabsStandAlone,
   ref: React.ForwardedRef<HTMLDivElement> | undefined | null
@@ -82,19 +83,36 @@ const TabsStandAloneComponent = (
       </TabsRightArrowContainerStyled>
     );
 
-  const buildTabContent = () =>
-    props.selectedTab !== undefined &&
-    props.selectedTab !== null && (
-      <TabsContentStyled
-        aria-labelledby={`${BASE_ID}-tab-${props.selectedTab}`}
-        id={TAB_PANEL_ID}
-        role={ROLES.TABPANEL}
-        styles={props.styles}
-        tabIndex={allowFocusTabPanel ? 0 : -1}
-      >
-        {props.content?.[props.selectedTab]}
-      </TabsContentStyled>
-    );
+  const buildTabContent = () => {
+    const commonTokens = {
+      id: TAB_PANEL_ID,
+      role: ROLES.TABPANEL,
+      styles: props.styles,
+      tabIndex: allowFocusTabPanel ? 0 : -1,
+    };
+
+    return unMountContent
+      ? props.selectedTab !== undefined && props.selectedTab !== null && (
+          <TabsContentStyled
+            aria-labelledby={`${BASE_ID}-tab-${props.selectedTab}`}
+            {...commonTokens}
+          >
+            {props.content?.[props.selectedTab]}
+          </TabsContentStyled>
+        )
+      : props.content?.map((cont, index) => {
+          return (
+            <TabsContentStyled
+              key={index}
+              $display={props.selectedTab === index ? 'block' : 'none'}
+              aria-labelledby={`${BASE_ID}-tab-${index}`}
+              {...commonTokens}
+            >
+              {cont}
+            </TabsContentStyled>
+          );
+        });
+  };
 
   return (
     <TabsContainerStyled ref={ref} styles={props.styles}>

src/components/tabs/types/tabs.ts

@@ -27,6 +27,7 @@ export interface ITabsStandAlone {
   hideLabelForSingleTab?: boolean;
   dataTestId?: string;
   onSelectTab?: (tab: number) => void;
+  unMountContent?: boolean;
 }
 
 export interface ITabsControlled<V = undefined extends string ? unknown : string>