diff --git a/packages/react-core/src/components/Tabs/Tabs.tsx b/packages/react-core/src/components/Tabs/Tabs.tsx index f71abb5da30..33d1facf552 100644 --- a/packages/react-core/src/components/Tabs/Tabs.tsx +++ b/packages/react-core/src/components/Tabs/Tabs.tsx @@ -18,9 +18,12 @@ export enum TabsComponent { nav = 'nav' } +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 */ @@ -163,8 +166,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) { @@ -308,8 +311,8 @@ export class Tabs extends React.Component { uncontrolledActiveKey, uncontrolledIsExpandedLocal } = this.state; - const filteredChildren = (React.Children.toArray(children) as React.ReactElement[]) - .filter(Boolean) + const filteredChildren = React.Children.toArray(children) + .filter((child): child is TabElement => React.isValidElement(child)) .filter(child => !child.props.isHidden); const uniqueId = id || getUniqueId();