fix(eds-core-react): Tabs now allow 'null' value as child element 'Tabs.List' and 'Tabs.Panel' (#3878)

Author: AndreasPresthammer

packages/eds-core-react/src/components/Tabs/TabList.tsx

@@ -10,6 +10,7 @@ import {
   RefAttributes,
   cloneElement,
   Children as ReactChildren,
+  isValidElement,
 } from 'react'
 import styled from 'styled-components'
 import { mergeRefs } from '@equinor/eds-utils'
@@ -96,31 +97,33 @@ const TabList = forwardRef<HTMLDivElement, TabListProps>(function TabsList(
     [arrowNavigating, tabsFocused],
   )
 
-  const Tabs = ReactChildren.map(
-    children,
-    (child: TabChild, $index: number) => {
-      const childProps = child.props as TabChild
+  const Tabs =
+    ReactChildren.map(children, (child, $index) => {
+      if (!isValidElement(child)) {
+        return null
+      }
+      const tabChild = child as TabChild
+      const childProps = tabChild.props as TabChild
       const controlledActive = childProps.value
       const isActive = controlledActive
         ? controlledActive === activeTab
         : $index === activeTab
 
       const tabRef = isActive
-        ? mergeRefs<HTMLButtonElement>(child.ref, selectedTabRef)
-        : child.ref
+        ? mergeRefs<HTMLButtonElement>(tabChild.ref, selectedTabRef)
+        : tabChild.ref
 
       if (isActive) currentTab.current = $index
 
-      return cloneElement(child, {
+      return cloneElement(tabChild, {
         id: `${tabsId}-tab-${$index + 1}`,
         'aria-controls': `${tabsId}-panel-${$index + 1}`,
         active: isActive,
         $index,
         onClick: () => handleChange($index),
         ref: tabRef,
       })
-    },
-  )
+    }) ?? []
 
   const focusableChildren: number[] = Tabs.filter((child: TabChild) => {
     const childProps = child.props as TabChild

packages/eds-core-react/src/components/Tabs/TabPanels.tsx

@@ -5,6 +5,7 @@ import {
   HTMLAttributes,
   cloneElement,
   Children as ReactChildren,
+  isValidElement,
 } from 'react'
 import { TabsContext } from './Tabs.context'
 
@@ -18,9 +19,10 @@ const TabPanels = forwardRef<HTMLDivElement, TabPanelsProps>(function TabPanels(
 ) {
   const { activeTab, tabsId } = useContext(TabsContext)
 
-  const Panels = ReactChildren.map(children, (child: ReactElement, $index) => {
-    if (conditionalRender && activeTab !== $index) return null
-    return cloneElement(child, {
+  const Panels = ReactChildren.map(children, (child, $index) => {
+    if (!isValidElement(child) || (conditionalRender && activeTab !== $index))
+      return null
+    return cloneElement(child as ReactElement, {
       id: `${tabsId}-panel-${$index + 1}`,
       'aria-labelledby': `${tabsId}-tab-${$index + 1}`,
       hidden: activeTab !== $index,

packages/eds-core-react/src/components/Tabs/Tabs.test.tsx

@@ -175,4 +175,34 @@ describe('Tabs', () => {
     expect(screen.getByTestId(tablist)).toBeDefined()
     expect(screen.getByTestId(tabpanels)).toBeDefined()
   })
+  it("Doesn't crash if null-child is provided to Tabs.List or Tabs.Panels", () => {
+    const tablist = 'tablist'
+    const tabpanels = 'tabpanels'
+    render(
+      <Tabs>
+        <Tabs.List data-testid={tablist}>
+          <Tabs.Tab>First</Tabs.Tab>
+          {null}
+        </Tabs.List>
+        <Tabs.Panels data-testid={tabpanels}>
+          <Tabs.Panel>Second</Tabs.Panel>
+          {null}
+        </Tabs.Panels>
+      </Tabs>,
+    )
+    expect(screen.getByTestId(tablist)).toBeDefined()
+    expect(screen.getByTestId(tabpanels)).toBeDefined()
+  })
+  it("Doesn't crash if only null-child is provided to Tabs.List or Tabs.Panels", () => {
+    const tablist = 'tablist'
+    const tabpanels = 'tabpanels'
+    render(
+      <Tabs>
+        <Tabs.List data-testid={tablist}>{null}</Tabs.List>
+        <Tabs.Panels data-testid={tabpanels}>{null}</Tabs.Panels>
+      </Tabs>,
+    )
+    expect(screen.getByTestId(tablist)).toBeDefined()
+    expect(screen.getByTestId(tabpanels)).toBeDefined()
+  })
 })