support Call and Return components in React.Children calls

packages/react/src/ReactChildren.js

@@ -25,6 +25,12 @@ var FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec.
 var REACT_ELEMENT_TYPE =
   (typeof Symbol === 'function' && Symbol.for && Symbol.for('react.element')) ||
   0xeac7;
+const REACT_CALL_TYPE =
+  (typeof Symbol === 'function' && Symbol.for && Symbol.for('react.call')) ||
+  0xeac8;
+const REACT_RETURN_TYPE =
+  (typeof Symbol === 'function' && Symbol.for && Symbol.for('react.return')) ||
+  0xeac9;
 const REACT_PORTAL_TYPE =
   (typeof Symbol === 'function' && Symbol.for && Symbol.for('react.portal')) ||
   0xeaca;
@@ -128,6 +134,8 @@ function traverseAllChildrenImpl(
     // The following is inlined from ReactElement. This means we can optimize
     // some checks. React Fiber also inlines this logic for similar purposes.
     (type === 'object' && children.$$typeof === REACT_ELEMENT_TYPE) ||
+    (type === 'object' && children.$$typeof === REACT_CALL_TYPE) ||
+    (type === 'object' && children.$$typeof === REACT_RETURN_TYPE) ||
     (type === 'object' && children.$$typeof === REACT_PORTAL_TYPE)
   ) {
     callback(

packages/react/src/__tests__/ReactChildren-test.js

@@ -58,19 +58,68 @@ describe('ReactChildren', () => {
     const portalContainer = document.createElement('div');
 
     const simpleChild = <span key="simple" />;
-    const portal = ReactDOM.createPortal(simpleChild, portalContainer);
-    const instance = <div>{portal}</div>;
+    const reactPortal = ReactDOM.createPortal(simpleChild, portalContainer);
 
-    React.Children.forEach(instance.props.children, callback, context);
-    expect(callback).toHaveBeenCalledWith(portal, 0);
+    const parentInstance = <div>{reactPortal}</div>;
+    React.Children.forEach(parentInstance.props.children, callback, context);
+    expect(callback).toHaveBeenCalledWith(reactPortal, 0);
     callback.calls.reset();
     const mappedChildren = React.Children.map(
-      instance.props.children,
+      parentInstance.props.children,
+      callback,
+      context,
+    );
+    expect(callback).toHaveBeenCalledWith(reactPortal, 0);
+    expect(mappedChildren[0]).toEqual(reactPortal);
+  });
+
+  it('should support Call components', () => {
+    const context = {};
+    const callback = jasmine.createSpy().and.callFake(function(kid, index) {
+      expect(this).toBe(context);
+      return kid;
+    });
+    const ReactCallReturn = require('react-call-return');
+    const reactCall = ReactCallReturn.unstable_createCall(
+      <span key="simple" />,
+      () => {},
+    );
+
+    const parentInstance = <div>{reactCall}</div>;
+    React.Children.forEach(parentInstance.props.children, callback, context);
+    expect(callback).toHaveBeenCalledWith(reactCall, 0);
+    callback.calls.reset();
+    const mappedChildren = React.Children.map(
+      parentInstance.props.children,
+      callback,
+      context,
+    );
+    expect(callback).toHaveBeenCalledWith(reactCall, 0);
+    expect(mappedChildren[0]).toEqual(reactCall);
+  });
+
+  it('should support Return components', () => {
+    const context = {};
+    const callback = jasmine.createSpy().and.callFake(function(kid, index) {
+      expect(this).toBe(context);
+      return kid;
+    });
+    const ReactCallReturn = require('react-call-return');
+    const reactReturn = ReactCallReturn.unstable_createReturn(
+      <span key="simple" />,
+    );
+
+    const parentInstance = <div>{reactReturn}</div>;
+    React.Children.forEach(parentInstance.props.children, callback, context);
+    expect(callback).toHaveBeenCalledWith(reactReturn, 0);
+    callback.calls.reset();
+    const mappedChildren = React.Children.map(
+      parentInstance.props.children,
       callback,
       context,
     );
-    expect(callback).toHaveBeenCalledWith(portal, 0);
-    expect(mappedChildren[0]).toEqual(portal);
+    expect(callback).toHaveBeenCalledWith(reactReturn, 0);
+    expect(mappedChildren[0]).toEqual(reactReturn);
   });
 
   it('should treat single arrayless child as being in array', () => {