Repository: mlaursen/react-md (ts)

Issue:
[TableCardHeader] - Incorrect propTypes for children produce unexpected warnings
### Description

You get prop type warning when passing an array of type `Array<false | React.Element>` as `children` to `TableCardHeader`.

### Images/Screenshots
### Link to a gist or code sample where the issue can be reproduced

https://codepen.io/anon/pen/GLWGzN?editors=0011

Note the warning in the console.

### Version
- React - 16.8.6
- React-MD - 1.10.0

Related code:
https://github.com/mlaursen/react-md/blob/36c4947a62ed6cd353dd5098a344045dbe306408/src/js/DataTables/TableCardHeader.js#L93-L100

May apply to other components and props.

Pull request description:
Change `TableCardHeader` `children` prop types to accept any node
Fixes #827 

<hr/>

From contribution guide:

> 1. Fork the repo and create your branch from `release/MAJOR.MINOR.x`. At the time of creating this, react-md is at version v1.0.0, so you would branch off of `release/1.0.x`.

I tried to do this, but there is no `release/1.10.x` branch.

Patch:
diff --git a/src/js/DataTables/TableCardHeader.d.ts b/src/js/DataTables/TableCardHeader.d.ts
index 4235616e34..5ff8f0ac3e 100644
--- a/src/js/DataTables/TableCardHeader.d.ts
+++ b/src/js/DataTables/TableCardHeader.d.ts
@@ -14,7 +14,7 @@ export interface TableCardHeaderProps extends Props {
   contextualTitleId?: IdPropType;
   contextualChildren?: React.ReactNode;
   leftChildren?: React.ReactElement<any> | Array<React.ReactElement<any>>;
-  children?: React.ReactElement<any> | Array<React.ReactElement<any>>;
+  children?: React.ReactNode;
   actions?: React.ReactElement<any> | Array<React.ReactElement<any>>;
   noActionsAdjust?: boolean;
   noChildrenAdjust?: boolean;
diff --git a/src/js/DataTables/TableCardHeader.js b/src/js/DataTables/TableCardHeader.js
index c034b1a3e9..2558a065e5 100644
--- a/src/js/DataTables/TableCardHeader.js
+++ b/src/js/DataTables/TableCardHeader.js
@@ -1,4 +1,4 @@
-import React, { PureComponent, Children, cloneElement } from 'react';
+import React, { PureComponent, Children, isValidElement, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
 import cn from 'classnames';
@@ -94,10 +94,7 @@ export default class TableCardHeader extends PureComponent {
      * An additional children to display after the `title` or `leftChildren` prop.
      * This is _normally_ a list of icon button or menu button.
      */
-    children: PropTypes.oneOfType([
-      PropTypes.element,
-      PropTypes.arrayOf(PropTypes.element),
-    ]),
+    children: PropTypes.node,
 
     /**
      * An optional button/menu button or a list of button/menu button to display in the
@@ -173,7 +170,7 @@ export default class TableCardHeader extends PureComponent {
     }
 
     return Children.map(Children.toArray(children), (child, i) => {
-      if (i === 0) {
+      if (i === 0 && isValidElement(child)) {
         return cloneElement(child, { className: cn('md-cell--right', child.props.className) });
       }
 


Test patch:
diff --git a/src/js/DataTables/__tests__/TableCardHeader.js b/src/js/DataTables/__tests__/TableCardHeader.js
new file mode 100644
index 0000000000..a120c0dfdf
--- /dev/null
+++ b/src/js/DataTables/__tests__/TableCardHeader.js
@@ -0,0 +1,43 @@
+/* eslint-env jest */
+import React from 'react';
+import { mount } from 'enzyme';
+
+import TableCardHeader from '../TableCardHeader';
+
+const PROPS = {
+  title: 'Title',
+  visible: true,
+};
+
+const NODES = [ // different things that pass as `PropTypes.node`
+  123,
+  'string',
+  undefined,
+  false,
+  [],
+  <span key="span" />,
+  [<div key="div" />, null, 'bar'],
+  null,
+];
+
+describe('TableCardHeader', () => {
+  it('should render with different types of children', () => {
+    mount((
+      <TableCardHeader
+        {...PROPS}
+      >
+        {NODES}
+      </TableCardHeader>
+    ));
+
+    for (const node of NODES) {
+      mount((
+        <TableCardHeader
+          {...PROPS}
+        >
+          {node}
+        </TableCardHeader>
+      ));
+    }
+  });
+});