fix(xychart): support fragment and array type children of stacks/groups

packages/visx-xychart/src/components/series/private/BaseBarGroup.tsx

@@ -1,7 +1,6 @@
 import React, { useContext, useMemo, useEffect, useCallback } from 'react';
 import { PositionScale } from '@visx/shape/lib/types';
 import { scaleBand } from '@visx/scale';
-import isChildWithProps from '../../../typeguards/isChildWithProps';
 import { BaseBarSeriesProps } from './BaseBarSeries';
 import {
   Bar,
@@ -18,6 +17,7 @@ import isValidNumber from '../../../typeguards/isValidNumber';
 import { BARGROUP_EVENT_SOURCE, XYCHART_EVENT_SOURCE } from '../../../constants';
 import useSeriesEvents from '../../../hooks/useSeriesEvents';
 import findNearestGroupDatum from '../../../utils/findNearestGroupDatum';
+import getChildrenAndGrandchildrenWithProps from '../../../utils/getChildrenAndGrandchildrenWithProps';
 
 export type BaseBarGroupProps<
   XScale extends PositionScale,
@@ -64,12 +64,9 @@ export default function BaseBarGroup<
   } = (useContext(DataContext) as unknown) as DataContextType<XScale, YScale, Datum>;
 
   const barSeriesChildren = useMemo(
-    () =>
-      React.Children.toArray(children).filter(child =>
-        isChildWithProps<BaseBarSeriesProps<XScale, YScale, Datum>>(child),
-      ),
+    () => getChildrenAndGrandchildrenWithProps<BaseBarSeriesProps<XScale, YScale, Datum>>(children),
     [children],
-  ) as React.ReactElement<BaseBarSeriesProps<XScale, YScale, Datum>>[];
+  );
 
   // extract data keys from child series
   const dataKeys: string[] = useMemo(

packages/visx-xychart/src/hooks/useStackedData.ts

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useMemo } from 'react';
+import { useContext, useEffect, useMemo } from 'react';
 import { SeriesPoint, stack as d3stack } from 'd3-shape';
 import stackOffset from '@visx/shape/lib/util/stackOffset';
 import stackOrder from '@visx/shape/lib/util/stackOrder';
@@ -9,7 +9,7 @@ import DataContext from '../context/DataContext';
 import { CombinedStackData, DataContextType, SeriesProps } from '../types';
 import getBarStackRegistryData from '../utils/getBarStackRegistryData';
 import combineBarStackData from '../utils/combineBarStackData';
-import isChildWithProps from '../typeguards/isChildWithProps';
+import getChildrenAndGrandchildrenWithProps from '../utils/getChildrenAndGrandchildrenWithProps';
 
 type UseStackedData<Datum extends object> = {
   children: JSX.Element | JSX.Element[];
@@ -30,9 +30,9 @@ export default function useStackedData<
   // find series children
   // @TODO: memoization doesn't work well if at all for this
   const seriesChildren = useMemo(
-    () => React.Children.toArray(children).filter(child => isChildWithProps<ChildrenProps>(child)),
+    () => getChildrenAndGrandchildrenWithProps<ChildrenProps>(children),
     [children],
-  ) as React.ReactElement<ChildrenProps>[];
+  );
 
   // extract data keys from child series
   const dataKeys: string[] = useMemo(

packages/visx-xychart/src/utils/getChildrenAndGrandchildrenWithProps.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+
+/** Returns whether the React.ReactNode has props (and therefore is an `Element` versus primitive type) */
+function isChildWithProps<P extends object>(
+  child: React.ReactNode,
+): child is React.ComponentType<P> {
+  return !!child && typeof child === 'object' && 'props' in child && child.props != null;
+}
+
+/**
+ * Returns children and grandchildren of type React.ReactNode.
+ * Flattens children one level to support React.Fragments and Array type children.
+ */
+export default function getChildrenAndGrandchildrenWithProps<P extends object>(
+  children: JSX.Element | JSX.Element[],
+): React.ReactElement<P>[] {
+  return React.Children.toArray(children)
+    .flatMap(child => {
+      if (typeof child === 'object' && 'props' in child && child.props.children) {
+        return child.props.children;
+      }
+      return child;
+    })
+    .filter(child => isChildWithProps<P>(child));
+}