@instructure/quiz-core 20.17.3-rc.6 → 20.17.3-rc.8

package/es/common/components/shared/drag_and_drop/dragAndDropUtils.js

@@ -2,7 +2,7 @@ import ReactDOM from 'react-dom';
 import { chain, debounce } from 'lodash';
 import { Map } from 'immutable';
 import { DropTarget } from 'react-dnd';
-import cachePreviousArgs from '../../../util/cachePreviousArgs';
+import cachePreviousArgs from "../../../util/cachePreviousArgs.js";
 import { TEMPORARY_QUIZ_ENTRY_ID, SIDEBAR_ITEM_REF, MOVE_IMMUTABLE_DATA, MOVED_IN_SIDEBAR } from '@instructure/quiz-common';
 export function getBoundsForComponent(component) {
   var dndComponent = component.dndComponent ? component.dndComponent : component;
@@ -11,10 +11,11 @@ export function getBoundsForComponent(component) {
 }
 export var posObjFromQuizEntry = cachePreviousArgs(function (quizEntryDragging, quizEntryHovered, mousePos, component, inSidebar) {
   var _getBoundsForComponen = getBoundsForComponent(component),
-    top = _getBoundsForComponen.top,
-    bottom = _getBoundsForComponen.bottom,
-    left = _getBoundsForComponen.left,
-    right = _getBoundsForComponen.right;
+      top = _getBoundsForComponen.top,
+      bottom = _getBoundsForComponen.bottom,
+      left = _getBoundsForComponen.left,
+      right = _getBoundsForComponen.right;
+
   var midY = top + (bottom - top) / 2;
   var midX = left + (right - left) / 2;
   var onRightHalf = mousePos.x > midX;
@@ -25,9 +26,8 @@ export var posObjFromQuizEntry = cachePreviousArgs(function (quizEntryDragging,
     intoEmptyStimulus: false,
     aboveHalf: aboveHalf,
     fromAbove: quizEntryHovered.position > quizEntryDragging.position
-  };
+  }; // handle dragging items over stimulus
 
-  // handle dragging items over stimulus
   if (!quizEntryDragging.hasStimulus && quizEntryHovered.hasStimulus && (onRightHalf || inSidebar)) {
     if (deepInsideEntry && quizEntryHovered.getNestedEntries().size === 0) {
       newPositionObj.intoEmptyStimulus = true;
@@ -39,17 +39,21 @@ export var posObjFromQuizEntry = cachePreviousArgs(function (quizEntryDragging,
       return null;
     }
   }
+
   var draggingStimulusInStimulus = quizEntryDragging.hasStimulus && quizEntryHovered.isInStimulus;
   var ignoreItemHover = quizEntryHovered.isInStimulus && !deepInsideEntry && !inSidebar;
+
   if (draggingStimulusInStimulus || ignoreItemHover) {
     return null;
   }
+
   return newPositionObj;
 });
 export function posObjFromNonQuizEntry(quizEntryDragging, startComp, endComp, mousePos, quizEntries) {
   // check if dropping above all quizEntries
   var _getBoundsForComponen2 = getBoundsForComponent(startComp),
-    bottom = _getBoundsForComponen2.bottom;
+      bottom = _getBoundsForComponen2.bottom;
+
   if (mousePos.y < bottom) {
     return {
       position: 1,
@@ -57,24 +61,28 @@ export function posObjFromNonQuizEntry(quizEntryDragging, startComp, endComp, mo
       aboveHalf: true,
       fromAbove: false
     };
-  }
+  } // check if dropping below all quizEntries
+
 
-  // check if dropping below all quizEntries
   var _getBoundsForComponen3 = getBoundsForComponent(endComp),
-    top = _getBoundsForComponen3.top;
+      top = _getBoundsForComponen3.top;
+
   if (mousePos.y > top) {
     var lastQuizEntry = quizEntries.maxBy(function (quizEntry) {
       return quizEntry.position;
     });
     var position = lastQuizEntry.position;
+
     if (lastQuizEntry.isInStimulus) {
       var stimulusQuizEntry = quizEntries.find(function (qe) {
         return qe.id === lastQuizEntry.stimulusQuizEntryId;
       });
+
       if (stimulusQuizEntry) {
         position = stimulusQuizEntry.position;
       }
     }
+
     return {
       position: position,
       intoEmptyStimulus: false,
@@ -82,44 +90,54 @@ export function posObjFromNonQuizEntry(quizEntryDragging, startComp, endComp, mo
       fromAbove: position > quizEntryDragging.position
     };
   }
+
   return null;
 }
+
 function createPositionObj(props, monitor, component, inSidebar) {
   var itemData = monitor.getItem();
   var mousePos = monitor.getClientOffset() || {};
   var newPositionObj = null;
+
   if (props.quizEntry) {
     newPositionObj = posObjFromQuizEntry(itemData.quizEntry, props.quizEntry, mousePos, component, inSidebar);
   } else {
     var startQuizEntries = component.startQuizEntries,
-      endQuizEntries = component.endQuizEntries;
+        endQuizEntries = component.endQuizEntries;
     newPositionObj = posObjFromNonQuizEntry(itemData.quizEntry, startQuizEntries, endQuizEntries, mousePos, props.quizEntries);
   }
+
   return newPositionObj;
-}
+} // createPosition arg is so that tests can stub it
+
 
-// createPosition arg is so that tests can stub it
 export var onQuizEntryHover = debounce(function (props, monitor, component, refname) {
   var createPosition = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : createPositionObj;
   var inSidebar = refname === SIDEBAR_ITEM_REF;
+
   if (inSidebar && !props.sidebarOpen) {
     return;
   }
+
   var itemData = monitor.getItem();
+
   if (itemData === null) {
     return;
   }
+
   var newPositionObj = createPosition(props, monitor, component, inSidebar);
   if (newPositionObj === null) return;
   var samePosition = newPositionObj.position === itemData.position;
   var sameAboveHalf = newPositionObj.aboveHalf === itemData.aboveHalf;
   var sameIntoEmptyStimulus = newPositionObj.intoEmptyStimulus === itemData.intoEmptyStimulus;
+
   if (samePosition && sameAboveHalf && sameIntoEmptyStimulus) {
     return;
-  }
-  // mutation used here to avoid rerendering on every mouse pixel move
+  } // mutation used here to avoid rerendering on every mouse pixel move
   // author of React DnD acknoledges shortcomings of mutations but
   // recommends it here for performance purposes
+
+
   Object.assign(monitor.getItem(), {
     position: newPositionObj.position,
     aboveHalf: newPositionObj.aboveHalf,
@@ -127,6 +145,7 @@ export var onQuizEntryHover = debounce(function (props, monitor, component, refn
   });
   props.newHoverPosition(newPositionObj);
 });
+
 function positionOfTempItem(quizEntries) {
   // TODO: replace the use of chain with lodash/fp functions and flow
   return chain(quizEntries.toJS()).sortBy(function (qe) {
@@ -135,26 +154,33 @@ function positionOfTempItem(quizEntries) {
     return qe.id;
   }).indexOf(TEMPORARY_QUIZ_ENTRY_ID).value() + 1;
 }
+
 function newPositionFromPositionObj(newPositionObj, originalItemPosition) {
   if (newPositionObj.intoEmptyStimulus) {
     var offset = newPositionObj.fromAbove ? 0 : 1;
     return newPositionObj.position + offset;
   }
+
   if (newPositionObj.position === originalItemPosition) {
     return newPositionObj.position;
   }
+
   if (newPositionObj.fromAbove && newPositionObj.aboveHalf) {
     return newPositionObj.position - 1;
   }
+
   if (!newPositionObj.fromAbove && !newPositionObj.aboveHalf) {
     return newPositionObj.position + 1;
   }
+
   return newPositionObj.position;
 }
+
 function handleDrop(props, newPosition, newStimulusQuizEntryId, oldStimulusQuizEntryId, itemData, moveTempItem, inSidebar) {
   var quizEntry = itemData.quizEntry;
   var stimulusQuizEntryIdChanged = newStimulusQuizEntryId !== oldStimulusQuizEntryId;
   var isImmutable = quizEntry.isItem ? quizEntry.getEntry().isImmutable() : false;
+
   if (isImmutable && stimulusQuizEntryIdChanged) {
     var uiData = Map({
       movedInSidebar: inSidebar,
@@ -170,6 +196,7 @@ function handleDrop(props, newPosition, newStimulusQuizEntryId, oldStimulusQuizE
     props.moveQuizEntry(props.quizId, newPosition, newStimulusQuizEntryId, quizEntry.id, moveTempItem);
   }
 }
+
 export function onQuizEntryDrop(props, monitor, component, refname) {
   var inSidebar = refname === SIDEBAR_ITEM_REF;
   var handledDrop = monitor.getDropResult() && monitor.getDropResult().handledDrop;
@@ -177,23 +204,29 @@ export function onQuizEntryDrop(props, monitor, component, refname) {
   var movingQuizEntry = itemData.quizEntry;
   var hoveredQuizEntry = props.quizEntry;
   var dropStimIntoStim = movingQuizEntry.hasStimulus && hoveredQuizEntry && hoveredQuizEntry.isInStimulus;
+
   if (inSidebar && !props.sidebarOpen || handledDrop || !props.dndPositionObj || dropStimIntoStim) {
     return {
       handledDrop: handledDrop || false
     };
   }
+
   var quizEntries = props.quizEntries;
   var originalItemPosition = movingQuizEntry.position;
   var newStimulusQuizEntryId = '';
+
   var findPositionInList = function findPositionInList(quizEntriesList) {
     var newPositionObj = props.dndPositionObj.toJS() || itemData;
     var targetQuizEntry = quizEntriesList.find(function (qe) {
       return qe.position === newPositionObj.position;
     });
+
     if (movingQuizEntry.id === targetQuizEntry && targetQuizEntry.id) {
       return newPositionObj.position;
     }
+
     var targetIsStimulus = targetQuizEntry && targetQuizEntry.hasStimulus;
+
     if (targetIsStimulus && newPositionObj.intoEmptyStimulus) {
       // into empty
       newStimulusQuizEntryId = targetQuizEntry.id;
@@ -203,45 +236,57 @@ export function onQuizEntryDrop(props, monitor, component, refname) {
     } else {
       newStimulusQuizEntryId = targetQuizEntry && targetQuizEntry.stimulusQuizEntryId || '';
     }
+
     return newPositionFromPositionObj(newPositionObj, originalItemPosition);
   };
+
   if (movingQuizEntry.id === TEMPORARY_QUIZ_ENTRY_ID) {
     var newPosition = findPositionInList(quizEntries);
+
     if (newPosition === originalItemPosition) {
       return {
         handledDrop: true
       };
     }
+
     var movingDown = newPosition > originalItemPosition;
     props.moveTemporaryQuizEntry(newPosition, newStimulusQuizEntryId, movingDown);
   } else {
     var quizEntriesWithoutTemp = quizEntries.filterNot(function (qe) {
       return qe.id === TEMPORARY_QUIZ_ENTRY_ID;
     });
+
     var _newPosition = findPositionInList(quizEntriesWithoutTemp);
+
     var newPositionIncludingTemp = findPositionInList(quizEntries);
     var tempItemPosition = positionOfTempItem(quizEntries);
     var originBelowTemp = originalItemPosition >= tempItemPosition;
     var originAboveTemp = originalItemPosition < tempItemPosition;
     var droppedPastTemp = originBelowTemp && newPositionIncludingTemp < tempItemPosition || originAboveTemp && newPositionIncludingTemp > tempItemPosition;
     var droppedOnTemp = tempItemPosition === newPositionIncludingTemp;
+
     var moveTempItem = function moveTempItem() {
       if (droppedPastTemp || droppedOnTemp) {
         var directionToMoveTempItem = originAboveTemp ? 'up' : 'down';
+
         var _movingDown = !originAboveTemp;
+
         props.moveTemporaryQuizEntry(directionToMoveTempItem, newStimulusQuizEntryId, _movingDown);
       }
     };
+
     var oldStimulusQuizEntryId = movingQuizEntry.stimulusQuizEntryId || '';
     var samePosition = _newPosition === originalItemPosition;
     var sameStimulus = newStimulusQuizEntryId === oldStimulusQuizEntryId;
     var stimulusBelowItself = movingQuizEntry.hasStimulus && hoveredQuizEntry && hoveredQuizEntry.id === movingQuizEntry.id && _newPosition === originalItemPosition + movingQuizEntry.positionSlots + (movingQuizEntry.positionSlots ? 1 : 0);
+
     if (samePosition && sameStimulus || stimulusBelowItself) {
       moveTempItem();
       return {
         handledDrop: true
       };
     }
+
     handleDrop(props, _newPosition, newStimulusQuizEntryId, oldStimulusQuizEntryId, itemData, moveTempItem, inSidebar);
     return {
       handledDrop: true
@@ -266,16 +311,13 @@ export var dropTarget = function dropTarget(refname) {
       onQuizEntryHover(props, monitor, component, refname);
     }
   };
-};
-
-// - ItemTypes.QUIZ_ENTRY associates this component drop target with a name
+}; // - ItemTypes.QUIZ_ENTRY associates this component drop target with a name
 // - dropTarget specifies functions React DnD will call for events with this component
 // - collectDrop injects props into component
+
 export var DropTargetCreator = function DropTargetCreator(refname) {
   return DropTarget(ItemTypes.QUIZ_ENTRY, dropTarget(refname), collectDrop);
-};
-
-// ///////////////// //
+}; // ///////////////// //
 // DRAG SOURCE STUFF //
 // ///////////////// //
 

package/es/common/components/shared/errors/Errors.js

@@ -1,24 +1,34 @@
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-var _dec, _class, _Errors;
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+
+var _dec, _class, _class2, _temp;
+
 /** @jsx jsx */
 import { Component } from 'react';
 import { List } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import { withStyle, jsx } from '@instructure/emotion';
-import generateStyle from './styles';
-import generateComponentTheme from './theme';
-export var Errors = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Errors = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var Errors = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  _inherits(Errors, _Component);
+
+  var _super = _createSuper(Errors);
+
   function Errors() {
     var _this;
+
     _classCallCheck(this, Errors);
+
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _callSuper(this, Errors, [].concat(args));
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
     _this.renderError = function (errorText, i) {
       var key = "error_for_".concat(i);
       return jsx("div", {
@@ -27,27 +37,33 @@ export var Errors = (_dec = withStyle(generateStyle, generateComponentTheme), _d
         "data-automation": "sdk-core-error"
       }, errorText);
     };
+
     return _this;
   }
-  _inherits(Errors, _Component);
-  return _createClass(Errors, [{
+
+  _createClass(Errors, [{
     key: "render",
     value: function render() {
       var _this$props$errorList;
+
       if (this.props.errorList.size === 0) {
         return null;
       }
+
       return jsx("div", {
         css: this.props.styles.errors,
         "data-testid": "errors-container"
       }, (_this$props$errorList = this.props.errorList) === null || _this$props$errorList === void 0 ? void 0 : _this$props$errorList.toArray().map(this.renderError));
     }
   }]);
-}(Component), _Errors.propTypes = {
+
+  Errors.displayName = "Errors";
+  return Errors;
+}(Component), _class2.propTypes = {
   errorList: ImmutablePropTypes.list,
   // eslint-disable-next-line react/require-default-props,react/forbid-prop-types
   styles: PropTypes.object
-}, _Errors.defaultProps = {
+}, _class2.defaultProps = {
   errorList: List()
-}, _Errors)) || _class);
+}, _temp)) || _class);
 export default Errors;

package/es/common/components/shared/errors/styles.js

@@ -13,4 +13,5 @@ var generateStyle = function generateStyle(componentTheme) {
     }
   };
 };
+
 export default generateStyle;

package/es/common/components/shared/errors/theme.js

@@ -1,10 +1,11 @@
 var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
-    typography = _ref.typography;
+      typography = _ref.typography;
   return {
     errorFontFamily: typography.fontFamily,
     errorFontSize: typography.fontSizeSmall,
     errorColor: colors.crimson
   };
 };
+
 export default generateComponentTheme;

package/es/common/components/shared/file_selector/FileSelector.js

@@ -1,26 +1,35 @@
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _callSuper from "@babel/runtime/helpers/esm/callSuper";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-var _dec, _class, _FileSelector;
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+
+var _dec, _class, _class2, _temp;
+
 /** @jsx jsx */
 import { List } from 'immutable';
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import Dropzone from 'react-dropzone';
 import { withStyle, jsx } from '@instructure/emotion';
-import generateStyle from './styles';
-import generateComponentTheme from './theme';
-export var FileSelector = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_FileSelector = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var FileSelector = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  _inherits(FileSelector, _Component);
+
+  var _super = _createSuper(FileSelector);
+
   function FileSelector() {
     var _this;
+
     _classCallCheck(this, FileSelector);
-    _this = _callSuper(this, FileSelector);
-    _this.onDrop = _this.onDrop.bind(_this);
+
+    _this = _super.call(this);
+    _this.onDrop = _this.onDrop.bind(_assertThisInitialized(_this));
     return _this;
   }
-  _inherits(FileSelector, _Component);
-  return _createClass(FileSelector, [{
+
+  _createClass(FileSelector, [{
     key: "onDrop",
     value: function onDrop(files) {
       this.props.fileHandler(List(files));
@@ -42,13 +51,16 @@ export var FileSelector = (_dec = withStyle(generateStyle, generateComponentThem
       }, this.renderContent()));
     }
   }]);
-}(Component), _FileSelector.propTypes = {
+
+  FileSelector.displayName = "FileSelector";
+  return FileSelector;
+}(Component), _class2.propTypes = {
   acceptAttribute: PropTypes.string.isRequired,
   content: PropTypes.node.isRequired,
   fileHandler: PropTypes.func.isRequired,
   multiple: PropTypes.bool,
   styles: PropTypes.object
-}, _FileSelector.defaultProps = {
+}, _class2.defaultProps = {
   multiple: false
-}, _FileSelector)) || _class);
+}, _temp)) || _class);
 export default FileSelector;

package/es/common/components/shared/file_selector/styles.js

@@ -8,4 +8,5 @@ var generateStyle = function generateStyle(componentTheme) {
     }
   };
 };
+
 export default generateStyle;

package/es/common/components/shared/file_selector/theme.js

@@ -1,7 +1,7 @@
 var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
-    spacing = _ref.spacing,
-    borders = _ref.borders;
+      spacing = _ref.spacing,
+      borders = _ref.borders;
   return {
     dropzoneBackgroundColor: colors.porcelain,
     dropzoneBorderWidth: borders.widthSmall,
@@ -9,4 +9,5 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
     dropzonePadding: spacing.medium
   };
 };
+
 export default generateComponentTheme;

package/es/common/components/shared/functionality/componentWithOutsideClick.js

@@ -1,35 +1,38 @@
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _callSuper from "@babel/runtime/helpers/esm/callSuper";
-import _superPropGet from "@babel/runtime/helpers/esm/superPropGet";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _get from "@babel/runtime/helpers/esm/get";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import ReactDOM from 'react-dom';
 import debounce from 'lodash/debounce';
-import reduxStore from '../../../../reduxStore';
-
-// ======================================================
+import reduxStore from "../../../../reduxStore.js"; // ======================================================
 // this component extends another component and will run
 // the 'clickedOutside' function defined on that component
 // if users click outside of it
-
 // clickedOutside: called when the user clicks outside node
-
 // ignoreClickOutsideIf: if returns true then do not run
 // the clickedOutside callback
-
 // ======================================================
 
 var wrapWithOutsideClick = function wrapWithOutsideClick(ComposedComponent) {
   var wrappedWithOutsideClick = /*#__PURE__*/function (_ComposedComponent) {
+    _inherits(wrappedWithOutsideClick, _ComposedComponent);
+
+    var _super = _createSuper(wrappedWithOutsideClick);
+
     function wrappedWithOutsideClick(props) {
       var _this;
+
       _classCallCheck(this, wrappedWithOutsideClick);
-      _this = _callSuper(this, wrappedWithOutsideClick, [props]);
-      _this.checkForOutsideClick = _this.checkForOutsideClick.bind(_this);
+
+      _this = _super.call(this, props);
+      _this.checkForOutsideClick = _this.checkForOutsideClick.bind(_assertThisInitialized(_this));
       return _this;
     }
-    _inherits(wrappedWithOutsideClick, _ComposedComponent);
-    return _createClass(wrappedWithOutsideClick, [{
+
+    _createClass(wrappedWithOutsideClick, [{
       key: "componentDidMount",
       value: function componentDidMount() {
         this.mouseDownEventCb = debounce(this.checkForOutsideClick, 300, {
@@ -37,30 +40,37 @@ var wrapWithOutsideClick = function wrapWithOutsideClick(ComposedComponent) {
           trailing: false
         });
         document.addEventListener('click', this.mouseDownEventCb, true);
-        _superPropGet(wrappedWithOutsideClick, "componentDidMount", this, 1) && _superPropGet(wrappedWithOutsideClick, "componentDidMount", this, 3)([]);
+        _get(_getPrototypeOf(wrappedWithOutsideClick.prototype), "componentDidMount", this) && _get(_getPrototypeOf(wrappedWithOutsideClick.prototype), "componentDidMount", this).call(this);
       }
     }, {
       key: "componentWillUnmount",
       value: function componentWillUnmount() {
         document.removeEventListener('click', this.mouseDownEventCb, true);
-        _superPropGet(wrappedWithOutsideClick, "componentWillUnmount", this, 1) && _superPropGet(wrappedWithOutsideClick, "componentWillUnmount", this, 3)([]);
+        _get(_getPrototypeOf(wrappedWithOutsideClick.prototype), "componentWillUnmount", this) && _get(_getPrototypeOf(wrappedWithOutsideClick.prototype), "componentWillUnmount", this).call(this);
       }
     }, {
       key: "checkForOutsideClick",
       value: function checkForOutsideClick(e) {
         var isModalOpen = reduxStore.getAppState().getIn(['modal', 'isOpen']);
-        if (_superPropGet(wrappedWithOutsideClick, "ignoreClickOutsideIf", this, 1) && _superPropGet(wrappedWithOutsideClick, "ignoreClickOutsideIf", this, 3)([e]) || isModalOpen) {
+
+        if (_get(_getPrototypeOf(wrappedWithOutsideClick.prototype), "ignoreClickOutsideIf", this) && _get(_getPrototypeOf(wrappedWithOutsideClick.prototype), "ignoreClickOutsideIf", this).call(this, e) || isModalOpen) {
           return;
         }
-        if (_superPropGet(wrappedWithOutsideClick, "clickedOutside", this, 1)) {
+
+        if (_get(_getPrototypeOf(wrappedWithOutsideClick.prototype), "clickedOutside", this)) {
           var domNode = ReactDOM.findDOMNode(this);
+
           if (!(domNode && domNode.contains(e.target))) {
-            _superPropGet(wrappedWithOutsideClick, "clickedOutside", this, 3)([e]);
+            _get(_getPrototypeOf(wrappedWithOutsideClick.prototype), "clickedOutside", this).call(this, e);
           }
         }
       }
     }]);
+
+    return wrappedWithOutsideClick;
   }(ComposedComponent);
+
   return wrappedWithOutsideClick;
 };
+
 export default wrapWithOutsideClick;

package/es/common/components/shared/functionality/componentWithOutsideClickEmotion.js

@@ -1,35 +1,37 @@
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _callSuper from "@babel/runtime/helpers/esm/callSuper";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import ReactDOM from 'react-dom';
 import debounce from 'lodash/debounce';
-import reduxStore from '../../../../reduxStore';
-import React from 'react';
-
-// ======================================================
+import reduxStore from "../../../../reduxStore.js";
+import React from 'react'; // ======================================================
 // this component extends another component and will run
 // the 'clickedOutside' function defined on that component
 // if users click outside of it
-
 // clickedOutside: called when the user clicks outside node
-
 // ignoreClickOutsideIf: if returns true then do not run
 // the clickedOutside callback
-
 // ======================================================
 
 var wrapWithOutsideClickEmotion = function wrapWithOutsideClickEmotion(ComposedComponent) {
   return /*#__PURE__*/function (_React$Component) {
+    _inherits(wrappedWithOutsideClick, _React$Component);
+
+    var _super = _createSuper(wrappedWithOutsideClick);
+
     function wrappedWithOutsideClick(props) {
       var _this;
+
       _classCallCheck(this, wrappedWithOutsideClick);
-      _this = _callSuper(this, wrappedWithOutsideClick, [props]);
-      _this.checkForOutsideClick = _this.checkForOutsideClick.bind(_this);
+
+      _this = _super.call(this, props);
+      _this.checkForOutsideClick = _this.checkForOutsideClick.bind(_assertThisInitialized(_this));
       return _this;
     }
-    _inherits(wrappedWithOutsideClick, _React$Component);
-    return _createClass(wrappedWithOutsideClick, [{
+
+    _createClass(wrappedWithOutsideClick, [{
       key: "componentDidMount",
       value: function componentDidMount() {
         this.mouseDownEventCb = debounce(this.checkForOutsideClick, 300, {
@@ -52,11 +54,14 @@ var wrapWithOutsideClickEmotion = function wrapWithOutsideClickEmotion(ComposedC
       key: "checkForOutsideClick",
       value: function checkForOutsideClick(e) {
         var isModalOpen = reduxStore.getAppState().getIn(['modal', 'isOpen']);
+
         if (this.checkcomponentRef() && this.composedComponentRef.current.ignoreClickOutsideIf && this.composedComponentRef.current.ignoreClickOutsideIf(e) || isModalOpen) {
           return;
         }
+
         if (this.checkcomponentRef() && this.composedComponentRef.current.clickedOutside) {
           var domNode = ReactDOM.findDOMNode(this);
+
           if (!(domNode && domNode.contains(e.target))) {
             this.composedComponentRef.current.clickedOutside(e);
           }
@@ -71,6 +76,10 @@ var wrapWithOutsideClickEmotion = function wrapWithOutsideClickEmotion(ComposedC
         }, this.props));
       }
     }]);
+
+    wrappedWithOutsideClick.displayName = "wrappedWithOutsideClick";
+    return wrappedWithOutsideClick;
   }(React.Component);
 };
+
 export default wrapWithOutsideClickEmotion;