feat(Tabs): enforce restricted type for children (patternfly#8217)

tlabaj · Nov 2, 2022 · ac82a52 · ac82a52
1 parent 5466a1a
commit ac82a52
Showing 1 changed file with 10 additions and 7 deletions.
diff --git 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<TabProps, React.JSXElementConstructor<TabProps>>;
+type TabsChild = TabElement | boolean | null | undefined;
+
 export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivElement>, 'onSelect'>, OUIAProps {
-  /** Content rendered inside the tabs component. Must be React.ReactElement<TabProps>[] */
-  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<TabsProps, TabsState> {
     // process any tab content sections outside of the component
     if (tabContentRef) {
       React.Children.toArray(this.props.children)
-        .map(child => child as React.ReactElement<TabProps>)
-        .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<TabsProps, TabsState> {
       uncontrolledIsExpandedLocal,
       overflowingTabCount
     } = this.state;
-    const filteredChildren = (React.Children.toArray(children) as React.ReactElement<TabProps>[])
-      .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);