From d3c961e7f65ee2d2c9daa5efac53a4808475fc70 Mon Sep 17 00:00:00 2001
From: remolueoend <remolueoend@users.noreply.github.com>
Date: Wed, 23 Oct 2024 18:37:03 +0200
Subject: [PATCH] fix(Tabs): filter nullish values from TabPanels children

This change allows users again to conditionally render children of TabPanels:
If children are not filtered for nullish/falsy values before cloning them,
`React.cloneElement` will fail.

This regression has been introduced with commit:
f4066328a01bd9431f16ccc0c8b646f1f6d8a26e, Tabs.tsx:L1257
---
 packages/react/src/components/Tabs/Tabs.tsx   |  2 +-
 .../components/Tabs/__tests__/Tabs-test.js    | 24 +++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx
index ee9ecb0d1f3d..c1fcb1a6ba2e 100644
--- a/packages/react/src/components/Tabs/Tabs.tsx
+++ b/packages/react/src/components/Tabs/Tabs.tsx
@@ -1717,7 +1717,7 @@ function TabPanels({ children }: TabPanelsProps) {
   return (
     <>
       {React.Children.map(children, (child, index) => {
-        return (
+        return !isElement(child) ? null : (
           <TabPanelContext.Provider value={index}>
             {React.cloneElement(child as React.ReactElement<any>, {
               ref: (element: HTMLDivElement) => {
diff --git a/packages/react/src/components/Tabs/__tests__/Tabs-test.js b/packages/react/src/components/Tabs/__tests__/Tabs-test.js
index e3a346a9f535..8a6ec38b8dee 100644
--- a/packages/react/src/components/Tabs/__tests__/Tabs-test.js
+++ b/packages/react/src/components/Tabs/__tests__/Tabs-test.js
@@ -64,6 +64,30 @@ describe('Tabs', () => {
     );
 
     expect(container.firstChild).toHaveClass('custom-class');
+    expect(container);
+  });
+
+  it('should not render conditionally excluded tabs and panels', () => {
+    const condition = false;
+    render(
+      <Tabs>
+        <TabList aria-label="List of tabs" data-test-id="test-id">
+          <Tab>Tab Label 1</Tab>
+          {condition ? (
+            <Tab data-test-id="excluded-tab">Tab Label 2</Tab>
+          ) : null}
+        </TabList>
+        <TabPanels>
+          <TabPanel>Tab Panel 1</TabPanel>
+          {condition ? (
+            <TabPanel data-test-id="excluded-panel">Tab Panel 2</TabPanel>
+          ) : null}
+        </TabPanels>
+      </Tabs>
+    );
+
+    expect(screen.queryByTestId('excluded-tab')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('excluded-panel')).not.toBeInTheDocument();
   });
 });