From 76b772adb7928d07ea643ef42d1d3ca9063e0c42 Mon Sep 17 00:00:00 2001
From: Tal Koren <talko@monday.com>
Date: Tue, 13 Aug 2024 11:50:11 +0300
Subject: [PATCH] feat(TabPanels): change renderOnlyActiveTab default to true
 (#2313)

---
 packages/core/docs/vibe-3-changelog.md        |  6 ++
 .../components/Tabs/TabPanels/TabPanels.tsx   | 16 +-----
 .../TabPanels.snapshot.test.js.snap           | 56 -------------------
 .../TabsContext.snapshot.test.js.snap         |  7 ---
 4 files changed, 9 insertions(+), 76 deletions(-)

diff --git a/packages/core/docs/vibe-3-changelog.md b/packages/core/docs/vibe-3-changelog.md
index 5b5b5b1ae5..ec0fe559d5 100644
--- a/packages/core/docs/vibe-3-changelog.md
+++ b/packages/core/docs/vibe-3-changelog.md
@@ -201,6 +201,12 @@ codemod: `search-component-import-migration`
 
 - `noPadding` is removed as it's the default, component no longer gets a default padding bottom [codemod]
 
+
+### TabPanels
+
+- Fix: TabPanels will render only the active tab
+- `renderOnlyActiveTab` - removed as it's now the default behavior [codemod]
+
 ### TextField
 
 - `dataTestId` -> `data-testid` [codemod]
diff --git a/packages/core/src/components/Tabs/TabPanels/TabPanels.tsx b/packages/core/src/components/Tabs/TabPanels/TabPanels.tsx
index 50fa6a90a4..15c71e3d81 100644
--- a/packages/core/src/components/Tabs/TabPanels/TabPanels.tsx
+++ b/packages/core/src/components/Tabs/TabPanels/TabPanels.tsx
@@ -12,7 +12,6 @@ import { withStaticProps } from "../../../types";
 import styles from "./TabPanels.module.scss";
 
 export interface TabPanelsProps extends VibeComponentProps {
-  renderOnlyActiveTab?: boolean;
   activeTabId?: number;
   animationDirection?: TabPanelsAnimationDirection;
   children?: ReactElement<TabPanelProps> | ReactElement<TabPanelProps>[];
@@ -22,16 +21,7 @@ const TabPanels: FC<TabPanelsProps> & {
   animationDirections?: typeof TabPanelsAnimationDirectionEnum;
 } = forwardRef(
   (
-    {
-      className,
-      id,
-      activeTabId = 0,
-      animationDirection = "rtl",
-      children,
-      // TODO Vibe 2.0 BREAKING change to true - breaking change
-      renderOnlyActiveTab = false,
-      "data-testid": dataTestId
-    }: TabPanelsProps,
+    { className, id, activeTabId = 0, animationDirection = "rtl", children, "data-testid": dataTestId }: TabPanelsProps,
     ref
   ) => {
     const componentRef = useRef(null);
@@ -39,7 +29,7 @@ const TabPanels: FC<TabPanelsProps> & {
     const renderedTabs = useMemo(() => {
       return React.Children.map(children, (child, index) => {
         const isActiveTab = activeTabId === index;
-        if (renderOnlyActiveTab && !isActiveTab) return null;
+        if (!isActiveTab) return null;
         const activeClass = isActiveTab ? "active" : "non-active";
         const animationClass = isActiveTab ? `animation-direction-${animationDirection}` : "";
         return React.cloneElement(child, {
@@ -53,7 +43,7 @@ const TabPanels: FC<TabPanelsProps> & {
           )
         });
       }).filter(Boolean);
-    }, [children, activeTabId, renderOnlyActiveTab, animationDirection]);
+    }, [children, activeTabId, animationDirection]);
 
     return (
       <div
diff --git a/packages/core/src/components/Tabs/TabPanels/__tests__/__snapshots__/TabPanels.snapshot.test.js.snap b/packages/core/src/components/Tabs/TabPanels/__tests__/__snapshots__/TabPanels.snapshot.test.js.snap
index 25972e6c2a..c6c6ece461 100644
--- a/packages/core/src/components/Tabs/TabPanels/__tests__/__snapshots__/TabPanels.snapshot.test.js.snap
+++ b/packages/core/src/components/Tabs/TabPanels/__tests__/__snapshots__/TabPanels.snapshot.test.js.snap
@@ -12,20 +12,6 @@ exports[`TabPanels renders correctly with animation from left to right 1`] = `
   >
     First
   </div>
-  <div
-    className="tabPanelWrapper tabPanel non-active"
-    data-testid="tab-panel"
-    role="tabpanel"
-  >
-    Second
-  </div>
-  <div
-    className="tabPanelWrapper tabPanel non-active"
-    data-testid="tab-panel"
-    role="tabpanel"
-  >
-    Third
-  </div>
 </div>
 `;
 
@@ -41,20 +27,6 @@ exports[`TabPanels renders correctly with animation from right to left 1`] = `
   >
     First
   </div>
-  <div
-    className="tabPanelWrapper tabPanel non-active"
-    data-testid="tab-panel"
-    role="tabpanel"
-  >
-    Second
-  </div>
-  <div
-    className="tabPanelWrapper tabPanel non-active"
-    data-testid="tab-panel"
-    role="tabpanel"
-  >
-    Third
-  </div>
 </div>
 `;
 
@@ -70,20 +42,6 @@ exports[`TabPanels renders correctly with empty props 1`] = `
   >
     First
   </div>
-  <div
-    className="tabPanelWrapper tabPanel non-active"
-    data-testid="tab-panel"
-    role="tabpanel"
-  >
-    Second
-  </div>
-  <div
-    className="tabPanelWrapper tabPanel non-active"
-    data-testid="tab-panel"
-    role="tabpanel"
-  >
-    Third
-  </div>
 </div>
 `;
 
@@ -92,13 +50,6 @@ exports[`TabPanels renders correctly with the given active tab panel 1`] = `
   className="tabPanelsWrapper"
   data-testid="tab-panels"
 >
-  <div
-    className="tabPanelWrapper tabPanel non-active"
-    data-testid="tab-panel"
-    role="tabpanel"
-  >
-    First
-  </div>
   <div
     className="tabPanelWrapper tabPanel active animationDirectionRtl"
     data-testid="tab-panel"
@@ -106,12 +57,5 @@ exports[`TabPanels renders correctly with the given active tab panel 1`] = `
   >
     Second
   </div>
-  <div
-    className="tabPanelWrapper tabPanel non-active"
-    data-testid="tab-panel"
-    role="tabpanel"
-  >
-    Third
-  </div>
 </div>
 `;
diff --git a/packages/core/src/components/Tabs/TabsContext/__tests__/__snapshots__/TabsContext.snapshot.test.js.snap b/packages/core/src/components/Tabs/TabsContext/__tests__/__snapshots__/TabsContext.snapshot.test.js.snap
index 6f962b3d2b..c5375c55c5 100644
--- a/packages/core/src/components/Tabs/TabsContext/__tests__/__snapshots__/TabsContext.snapshot.test.js.snap
+++ b/packages/core/src/components/Tabs/TabsContext/__tests__/__snapshots__/TabsContext.snapshot.test.js.snap
@@ -47,13 +47,6 @@ exports[`TabsContext renders correctly with activeTabId 1`] = `
     className="tabPanelsWrapper"
     data-testid="tab-panels"
   >
-    <div
-      className="tabPanelWrapper tabPanel non-active"
-      data-testid="tab-panel"
-      role="tabpanel"
-    >
-      First slide
-    </div>
     <div
       className="tabPanelWrapper tabPanel active animationDirectionRtl"
       data-testid="tab-panel"