add HTMLElementType

Author: oliviertassinari

packages/material-ui-utils/src/HTMLElementType.js

@@ -0,0 +1,21 @@
+export default function HTMLElementType(props, propName, componentName, location, propFullName) {
+  if (process.env.NODE_ENV === 'production') {
+    return null;
+  }
+
+  const propValue = props[propName];
+  const safePropName = propFullName || propName;
+
+  if (propValue == null) {
+    return null;
+  }
+
+  if (propValue && propValue.nodeType !== 1) {
+    return new Error(
+      `Invalid ${location} \`${safePropName}\` supplied to \`${componentName}\`. ` +
+        `Expected an HTMLElement.`,
+    );
+  }
+
+  return null;
+}

packages/material-ui-utils/src/index.js

@@ -4,5 +4,6 @@ export { default as elementAcceptingRef } from './elementAcceptingRef';
 export { default as elementTypeAcceptingRef } from './elementTypeAcceptingRef';
 export { default as exactProp } from './exactProp';
 export { default as getDisplayName } from './getDisplayName';
+export { default as HTMLElementType } from './HTMLElementType';
 export { default as ponyfillGlobal } from './ponyfillGlobal';
 export { default as refType } from './refType';

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { HTMLElementType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import Popover from '../Popover';
 import MenuList from '../MenuList';
@@ -175,7 +176,7 @@ Menu.propTypes = {
    */
   anchorEl: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
     PropTypes.func,
-    PropTypes.instanceOf(typeof Element === 'undefined' ? Object : Element),
+    HTMLElementType,
   ]),
   /**
    * If `true` (Default) will focus the `[role="menu"]` if no focusable child is found. Disabled

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

@@ -1,9 +1,14 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import * as ReactDOM from 'react-dom';
+import {
+  chainPropTypes,
+  elementTypeAcceptingRef,
+  refType,
+  HTMLElementType,
+} from '@material-ui/utils';
 import debounce from '../utils/debounce';
 import clsx from 'clsx';
-import { chainPropTypes, elementTypeAcceptingRef, refType } from '@material-ui/utils';
 import ownerDocument from '../utils/ownerDocument';
 import ownerWindow from '../utils/ownerWindow';
 import createChainedFunction from '../utils/createChainedFunction';
@@ -522,7 +527,7 @@ Popover.propTypes = {
   container: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
     PropTypes.func,
     PropTypes.instanceOf(React.Component),
-    PropTypes.instanceOf(typeof Element === 'undefined' ? Object : Element),
+    HTMLElementType,
   ]),
   /**
    * The elevation of the popover.

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import PopperJs from 'popper.js';
-import { chainPropTypes, refType } from '@material-ui/utils';
+import { chainPropTypes, refType, HTMLElementType } from '@material-ui/utils';
 import { useTheme } from '@material-ui/styles';
 import Portal from '../Portal';
 import createChainedFunction from '../utils/createChainedFunction';
@@ -293,7 +293,7 @@ Popper.propTypes = {
   container: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
     PropTypes.func,
     PropTypes.instanceOf(React.Component),
-    PropTypes.instanceOf(typeof Element === 'undefined' ? Object : Element),
+    HTMLElementType,
   ]),
   /**
    * Disable the portal behavior.

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
-import { exactProp } from '@material-ui/utils';
+import { exactProp, HTMLElementType } from '@material-ui/utils';
 import setRef from '../utils/setRef';
 import useForkRef from '../utils/useForkRef';
 
@@ -75,7 +75,7 @@ Portal.propTypes = {
   container: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
     PropTypes.func,
     PropTypes.instanceOf(React.Component),
-    PropTypes.instanceOf(typeof Element === 'undefined' ? Object : Element),
+    HTMLElementType,
   ]),
   /**
    * Disable the portal behavior.