From b95ed5c513474ba7cb13bf147b22c8770cb8e54d Mon Sep 17 00:00:00 2001
From: oddvernes <oddbjorn.overnes@gmail.com>
Date: Wed, 5 Jul 2023 13:43:20 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20Tabs:=20conditionally=20re?=
 =?UTF-8?q?nder=20tab=20panels?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../eds-core-react/src/components/Tabs/TabPanel.tsx   |  5 +----
 .../eds-core-react/src/components/Tabs/TabPanels.tsx  | 11 ++++++-----
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/eds-core-react/src/components/Tabs/TabPanel.tsx b/packages/eds-core-react/src/components/Tabs/TabPanel.tsx
index 1a59f5b882..54400c0978 100644
--- a/packages/eds-core-react/src/components/Tabs/TabPanel.tsx
+++ b/packages/eds-core-react/src/components/Tabs/TabPanel.tsx
@@ -31,10 +31,7 @@ const StyledTabPanel = styled.div.attrs(
   `
 })
 
-export type TabPanelProps = {
-  /** If `true`, the panel will be hidden. */
-  hidden?: boolean
-} & HTMLAttributes<HTMLDivElement>
+export type TabPanelProps = HTMLAttributes<HTMLDivElement>
 
 const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(function TabPanel(
   { ...props },
diff --git a/packages/eds-core-react/src/components/Tabs/TabPanels.tsx b/packages/eds-core-react/src/components/Tabs/TabPanels.tsx
index a91800d464..74c61b0baa 100644
--- a/packages/eds-core-react/src/components/Tabs/TabPanels.tsx
+++ b/packages/eds-core-react/src/components/Tabs/TabPanels.tsx
@@ -16,13 +16,14 @@ const TabPanels = forwardRef<HTMLDivElement, TabPanelsProps>(function TabPanels(
 ) {
   const { activeTab, tabsId } = useContext(TabsContext)
 
-  const Panels = ReactChildren.map(children, (child: ReactElement, index) =>
-    cloneElement(child, {
+  const Panels = ReactChildren.map(children, (child: ReactElement, index) => {
+    if (activeTab !== index) return null
+    return cloneElement(child, {
       id: `${tabsId}-panel-${index + 1}`,
       'aria-labelledby': `${tabsId}-tab-${index + 1}`,
-      hidden: activeTab !== index,
-    }),
-  )
+    })
+  })
+
   return (
     <div ref={ref} {...props}>
       {Panels}