fix: Do not throw an error on "Element" if processing the code withou…

…t the browser api (#1132)
SAP · Jul 22, 2020 · d0b34d9 · d0b34d9
1 parent 7aac2ed
commit d0b34d9
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 17 deletions.
diff --git a/devtools/buildIndexFiles.js b/devtools/buildIndexFiles.js
@@ -3,10 +3,6 @@ const path = require('path');
 
 const srcPath = path.join(__dirname, '../src');
 
-// Ignore errors from the browser API not being defined in node
-// eslint-disable-next-line no-undefined
-global.Element = undefined;
-
 const isComponentDirectory = (source) => {
     const ignoredDirectories = ['utils', 'Docs'];
     return lstatSync(source).isDirectory() && !ignoredDirectories.some(ignored => source.includes(ignored));

diff --git a/devtools/buildVisualStories.js b/devtools/buildVisualStories.js
@@ -3,10 +3,6 @@ const path = require('path');
 
 const srcPath = path.join(__dirname, '../src');
 
-// Ignore errors from the browser API not being defined in node
-// eslint-disable-next-line no-undefined
-global.Element = undefined;
-
 const isComponentDirectory = (source) => {
     const ignoredDirectories = ['utils', 'Docs'];
     return lstatSync(source).isDirectory() && !ignoredDirectories.some(ignored => source.includes(ignored));

diff --git a/src/Popover/Popover.js b/src/Popover/Popover.js
@@ -1,5 +1,6 @@
 import chain from 'chain-function';
 import classnames from 'classnames';
+import CustomPropTypes from '../utils/CustomPropTypes/CustomPropTypes';
 import { findDOMNode } from 'react-dom';
 import FocusManager from '../utils/focusManager/focusManager';
 import keycode from 'keycode';
@@ -214,10 +215,7 @@ Popover.propTypes = {
     /** Index of the focusable item to focus first within the Popover */
     firstFocusIndex: PropTypes.number,
     /** The bounding container to use when determining if the popover is out of bounds */
-    flipContainer: PropTypes.oneOfType([
-        PropTypes.arrayOf(PropTypes.instanceOf(Element)),
-        PropTypes.instanceOf(Element)
-    ]),
+    flipContainer: CustomPropTypes.elementOrArrayOfElements(),
     /** Set to **true** to render a popover without an arrow */
     noArrow: PropTypes.bool,
     /** The options are 'auto',

diff --git a/src/utils/CustomPropTypes/CustomPropTypes.js b/src/utils/CustomPropTypes/CustomPropTypes.js
@@ -1,7 +1,19 @@
+import PropTypes from 'prop-types';
 const ANONYMOUS = '<<anonymous>>';
 
 /* eslint-disable no-console */
 
+const elementOrArrayOfElements = () => {
+    // Element is not defined unless the Browser API is defined
+    if (typeof Element === 'undefined') {
+        return null;
+    }
+    return PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.instanceOf(Element)),
+        PropTypes.instanceOf(Element)
+    ]);
+};
+
 const wrapValidator = (validator, typeName, typeChecker = null) => {
     // eslint-disable-next-line compat/compat
     return Object.assign(validator.bind(), {
@@ -113,4 +125,4 @@ const i18n = (obj) => {
     return wrapValidator(createChainableTypeChecker(validate), 'i18n', obj);
 };
 
-export default { range, i18n };
+export default { elementOrArrayOfElements, range, i18n };
diff --git a/src/utils/_Popper.js b/src/utils/_Popper.js
@@ -1,4 +1,5 @@
 import classnames from 'classnames';
+import CustomPropTypes from './CustomPropTypes/CustomPropTypes';
 import Foco from 'react-foco';
 import { getModalManager } from './modalManager';
 import keycode from 'keycode';
@@ -253,10 +254,7 @@ Popper.propTypes = {
     cssBlock: PropTypes.string.isRequired,
     referenceComponent: PropTypes.element.isRequired,
     disableEdgeDetection: PropTypes.bool,
-    flipContainer: PropTypes.oneOfType([
-        PropTypes.arrayOf(PropTypes.instanceOf(Element)),
-        PropTypes.instanceOf(Element)
-    ]),
+    flipContainer: CustomPropTypes.elementOrArrayOfElements(),
     innerRef: PropTypes.func,
     noArrow: PropTypes.bool,
     popperClassName: PropTypes.string,