Process Kristoffer input

docs/pages/api/portal.md

@@ -25,7 +25,7 @@ that exists outside the DOM hierarchy of the parent component.
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span class="prop-name required">children&nbsp;*</span> | <span class="prop-type">node</span> |  | The children to render into the `container`. |
+| <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The children to render into the `container`. |
 | <span class="prop-name">container</span> | <span class="prop-type">func<br>&#124;&nbsp;React.Component<br>&#124;&nbsp;Element</span> |  | A node, component instance, or function that returns either. The `container` will have the portal children appended to it. By default, it uses the body of the top-level document object, so it's simply `document.body` most of the time. |
 | <span class="prop-name">disablePortal</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Disable the portal behavior. The children stay within it's parent DOM hierarchy. |
 | <span class="prop-name">onRendered</span> | <span class="prop-type">func</span> |  | Callback fired once the children has been mounted into the `container`.<br>This prop will be deprecated and removed in v5, the ref can be used instead. |

packages/material-ui/src/Portal/Portal.d.ts

@@ -4,7 +4,7 @@ export interface PortalProps {
   /**
    * The children to render into the `container`.
    */
-  children: React.ReactNode;
+  children?: React.ReactNode;
   /**
    * A node, component instance, or function that returns either.
    * The `container` will have the portal children appended to it.

packages/material-ui/src/Portal/Portal.js

@@ -20,7 +20,7 @@ const useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect
 const Portal = React.forwardRef(function Portal(props, ref) {
   const { children, container, disablePortal = false, onRendered } = props;
   const [mountNode, setMountNode] = React.useState(null);
-  const handleRef = useForkRef(children.ref, ref);
+  const handleRef = useForkRef(React.isValidElement(children) ? children.ref : null, ref);
 
   useEnhancedEffect(() => {
     if (!disablePortal) {
@@ -46,10 +46,12 @@ const Portal = React.forwardRef(function Portal(props, ref) {
   }, [onRendered, mountNode, disablePortal]);
 
   if (disablePortal) {
-    React.Children.only(children);
-    return React.cloneElement(children, {
-      ref: handleRef,
-    });
+    if (React.isValidElement(children)) {
+      return React.cloneElement(children, {
+        ref: handleRef,
+      });
+    }
+    return children;
   }
 
   return mountNode ? ReactDOM.createPortal(children, mountNode) : mountNode;
@@ -63,7 +65,7 @@ Portal.propTypes = {
   /**
    * The children to render into the `container`.
    */
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
   /**
    * A node, component instance, or function that returns either.
    * The `container` will have the portal children appended to it.

packages/material-ui/src/Portal/Portal.test.js

@@ -128,10 +128,11 @@ describe('<Portal />', () => {
   it('should render overlay into container (document)', () => {
     render(
       <Portal>
-        <div id="test2" />
+        <div className="test2" />
+        <div className="test2" />
       </Portal>,
     );
-    expect(document.querySelectorAll('#test2').length).to.equal(1);
+    expect(document.querySelectorAll('.test2').length).to.equal(2);
   });
 
   it('should render overlay into container (DOMNode)', () => {