diff --git a/packages/react-core/src/components/Tabs/Tabs.tsx b/packages/react-core/src/components/Tabs/Tabs.tsx index 774878c3dc5..caf128c6b3e 100644 --- a/packages/react-core/src/components/Tabs/Tabs.tsx +++ b/packages/react-core/src/components/Tabs/Tabs.tsx @@ -29,9 +29,12 @@ export interface HorizontalOverflowObject { toggleAriaLabel?: string; } +type TabElement = React.ReactElement>; +type TabsChild = TabElement | boolean | null | undefined; + export interface TabsProps extends Omit, 'onSelect'>, OUIAProps { - /** Content rendered inside the tabs component. Must be React.ReactElement[] */ - children: React.ReactNode; + /** Content rendered inside the tabs component. Only `Tab` components or expressions resulting in a falsy value are allowed here. */ + children: TabsChild | TabsChild[]; /** Additional classes added to the tabs */ className?: string; /** Tabs background color variant */ @@ -205,8 +208,8 @@ export class Tabs extends React.Component { // process any tab content sections outside of the component if (tabContentRef) { React.Children.toArray(this.props.children) - .map(child => child as React.ReactElement) - .filter(child => child.props && child.props.tabContentRef && child.props.tabContentRef.current) + .filter((child): child is TabElement => React.isValidElement(child)) + .filter(({ props }) => props.tabContentRef && props.tabContentRef.current) .forEach(child => (child.props.tabContentRef.current.hidden = true)); // most recently selected tabContent if (tabContentRef.current) { @@ -407,9 +410,9 @@ export class Tabs extends React.Component { uncontrolledIsExpandedLocal, overflowingTabCount } = this.state; - const filteredChildren = (React.Children.toArray(children) as React.ReactElement[]) - .filter(Boolean) - .filter(child => !child.props.isHidden); + const filteredChildren = React.Children.toArray(children) + .filter((child): child is TabElement => React.isValidElement(child)) + .filter(({ props }) => !props.isHidden); const filteredChildrenWithoutOverflow = filteredChildren.slice(0, filteredChildren.length - overflowingTabCount); const filteredChildrenOverflowing = filteredChildren.slice(filteredChildren.length - overflowingTabCount);