Creates unwrapRootFragment

Author: TheSonOfThomp

packages/lib/src/childQueries/unwrapRootFragment/unwrapRootFragment.spec.tsx

@@ -0,0 +1,39 @@
+import React, { Fragment } from 'react';
+
+import { unwrapRootFragment } from './unwrapRootFragment';
+
+describe('packages/lib/unwrapRootFragment', () => {
+  test('returns a single child that is not a Fragment', () => {
+    const unwrapped = unwrapRootFragment(<div></div>);
+    expect(unwrapped).toHaveLength(1);
+  });
+
+  test('returns children unchanged when it is an array', () => {
+    const unwrapped = unwrapRootFragment([
+      <div key="1"></div>,
+      <div key="2"></div>,
+    ]);
+    expect(unwrapped).toHaveLength(2);
+  });
+
+  test("returns a single Fragment's children", () => {
+    const unwrapped = unwrapRootFragment(
+      <Fragment>
+        <div />
+        <div />
+      </Fragment>,
+    );
+    expect(unwrapped).toHaveLength(2);
+  });
+
+  test('returns an empty array children has no length', () => {
+    const unwrapped = unwrapRootFragment([]);
+    expect(unwrapped).toBeDefined();
+    expect(unwrapped).toHaveLength(0);
+  });
+
+  test('returns undefined if no children are provided', () => {
+    const unwrapped = unwrapRootFragment(undefined);
+    expect(unwrapped).not.toBeDefined();
+  });
+});

packages/lib/src/childQueries/unwrapRootFragment/unwrapRootFragment.ts

@@ -0,0 +1,39 @@
+import { Children, Fragment, isValidElement, ReactNode } from 'react';
+
+/**
+ * If the provided `ReactNode` is a single Fragment,
+ * return the children of that fragment.
+ *
+ * Otherwise, returns the `children` or an empty array
+ *
+ * e.g.
+ * ```tsx
+ * unwrapRootFragment(
+ *  <Fragment>
+ *    <Foo />
+ *    <Bar />
+ *  </Fragment>
+ * ) // [<Foo />, <Bar />]
+ * ```
+ */
+export const unwrapRootFragment = (
+  children: ReactNode,
+): Array<ReactNode> | undefined => {
+  if (!children) return undefined;
+
+  if (Children.count(children) === 0) {
+    return [];
+  }
+
+  if (Children.count(children) === 1) {
+    const rootChild = Children.toArray(children)[0];
+
+    if (isValidElement(rootChild) && rootChild.type === Fragment) {
+      return Children.toArray(rootChild.props.children);
+    }
+
+    return [children];
+  }
+
+  return children as Array<ReactNode>;
+};

tools/install/src/ALL_PACKAGES.ts

@@ -76,6 +76,7 @@ export const ALL_PACKAGES = [
   '@leafygreen-ui/toolbar',
   '@leafygreen-ui/tooltip',
   '@leafygreen-ui/typography',
+  '@leafygreen-ui/wizard',
   '@lg-charts/chart-card',
   '@lg-charts/colors',
   '@lg-charts/core',