ensureElement wraps React Fragment

packages/core/src/common/utils.ts

@@ -25,15 +25,18 @@ export function isFunction(value: any): value is Function {
 }
 
 /**
- * Converts a React child to an element: non-empty strings or numbers are wrapped in `<span>`;
- * empty strings are discarded.
+ * Converts a React child to an element: non-empty string or number or
+ * `React.Fragment` (React 16.3+) is wrapped in given tag name; empty strings
+ * are discarded.
  */
 export function ensureElement(child: React.ReactChild | undefined, tagName: keyof JSX.IntrinsicElements = "span") {
-    // wrap text in a <span> so children are always elements
-    if (typeof child === "string") {
+    if (child == null) {
+        return undefined;
+    } else if (typeof child === "string") {
         // cull whitespace strings
         return child.trim().length > 0 ? React.createElement(tagName, {}, child) : undefined;
-    } else if (typeof child === "number") {
+    } else if (typeof child === "number" || typeof child.type === "symbol") {
+        // React.Fragment has a symbol type
         return React.createElement(tagName, {}, child);
     } else {
         return child;

packages/core/test/common/utilsTests.ts → packages/core/test/common/utilsTests.tsx

@@ -92,6 +92,39 @@ describe("Utils", () => {
     // TODO: not sure how to test this. perhaps with the help of https://github.com/alexreardon/raf-stub?
     it.skip("throttleEvent");
 
+    describe("ensureElement", () => {
+        it("handles undefined/null", () => {
+            assert.isUndefined(Utils.ensureElement(undefined));
+            assert.isUndefined(Utils.ensureElement(null));
+        });
+
+        it("wraps strings & numbers", () => {
+            assert.strictEqual(Utils.ensureElement("foo").type, "span");
+            assert.strictEqual(Utils.ensureElement(1234).type, "span");
+        });
+
+        it("returns undefined for whitespace strings", () => {
+            assert.isUndefined(Utils.ensureElement("   "));
+        });
+
+        it("passes through JSX elements", () => {
+            const el = <div>my element</div>;
+            assert.strictEqual(Utils.ensureElement(el), el);
+        });
+
+        // React 16 only
+        if (React.Fragment !== undefined) {
+            it("wraps JSX fragments in element", () => {
+                const el = Utils.ensureElement(
+                    <>
+                        one <em>two</em> three
+                    </>,
+                );
+                assert.strictEqual(el.type, "span");
+            });
+        }
+    });
+
     describe("throttleReactEventCallback", () => {
         let callback: SinonSpy;
         let fakeEvent: any; // cast as `any` to avoid having to set every required property on the event

packages/core/test/index.ts

@@ -12,9 +12,9 @@ import "./callout/calloutTests";
 import "./card/cardTests";
 import "./collapse/collapseTests";
 import "./collapsible-list/collapsibleListTests";
-import "./common/propsTests.ts";
-import "./common/utils/compareUtilsTests.ts";
-import "./common/utilsTests.ts";
+import "./common/propsTests";
+import "./common/utils/compareUtilsTests";
+import "./common/utilsTests";
 import "./context-menu/contextMenuTests";
 import "./controls/controlsTests";
 import "./controls/inputGroupTests";