@zohodesk/components 1.4.4 → 1.4.6

package/lib/Popup/Popup.js

@@ -29,6 +29,8 @@ var _isMobilePopover = _interopRequireDefault(require("../DropBox/utils/isMobile
 
 var _selectn = _interopRequireDefault(require("selectn"));
 
+var _Registry = _interopRequireDefault(require("./Registry.js"));
+
 var _excluded = ["isMobile"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -71,11 +73,8 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
-var lastOpenedGroup = [];
-var popups = {};
-
 global.closeGroupPopups = function (groupName) {
-  var groupPopups = popups[groupName] || [];
+  var groupPopups = _Registry["default"].popups[groupName] || [];
   groupPopups.forEach(function (popup) {
     popup.state.isPopupOpen && popup.setState({
       isPopupOpen: false,
@@ -97,6 +96,53 @@ var defaultState = {
   //{height: ‘’, width: ‘’,}
   isAbsolutePositioningNeeded: true
 };
+var SCROLL_BLOCK_EVENTS = Object.freeze([{
+  name: 'wheel',
+  handlerName: 'handleBlockScroll',
+  options: {
+    capture: true,
+    passive: false
+  }
+}, {
+  name: 'touchmove',
+  handlerName: 'handleBlockScroll',
+  options: {
+    capture: true,
+    passive: false
+  }
+}, {
+  name: 'scroll',
+  handlerName: 'handlePositionChange',
+  options: {
+    capture: true,
+    passive: false
+  }
+}, {
+  name: 'keydown',
+  handlerName: 'preventKeyboardScroll',
+  options: {
+    capture: true,
+    passive: false
+  }
+}]);
+var IFRAME_SCROLL_BLOCK_EVENTS = Object.freeze(SCROLL_BLOCK_EVENTS.filter(function (event) {
+  return event.name !== 'keydown';
+}));
+var CLICK_EVENTS = Object.freeze([{
+  name: 'click',
+  handlerName: 'documentClickHandler',
+  options: {
+    capture: false,
+    passive: false
+  }
+}, {
+  name: 'click',
+  handlerName: 'documentClickHandler1',
+  options: {
+    capture: true,
+    passive: false
+  }
+}]);
 /* eslint-disable react/no-deprecated */
 
 /* eslint-disable react/prop-types */
@@ -172,8 +218,11 @@ var Popup = function Popup(Component) {
       _this.handleBlockScroll = _this.handleBlockScroll.bind(_assertThisInitialized(_this));
       _this.handlePositionChange = _this.handlePositionChange.bind(_assertThisInitialized(_this));
       _this.preventKeyboardScroll = _this.preventKeyboardScroll.bind(_assertThisInitialized(_this));
+      _this.updateListeners = _this.updateListeners.bind(_assertThisInitialized(_this));
       _this.addScrollBlockListeners = _this.addScrollBlockListeners.bind(_assertThisInitialized(_this));
       _this.removeScrollBlockListeners = _this.removeScrollBlockListeners.bind(_assertThisInitialized(_this));
+      _this.addScrollToUpdateListeners = _this.addScrollToUpdateListeners.bind(_assertThisInitialized(_this));
+      _this.removeScrollToUpdateListeners = _this.removeScrollToUpdateListeners.bind(_assertThisInitialized(_this));
       _this.handleAddingScrollBlock = _this.handleAddingScrollBlock.bind(_assertThisInitialized(_this));
       _this.handleRemovingScrollBlock = _this.handleRemovingScrollBlock.bind(_assertThisInitialized(_this));
       _this.handleIntersectionObserver = _this.handleIntersectionObserver.bind(_assertThisInitialized(_this));
@@ -183,8 +232,10 @@ var Popup = function Popup(Component) {
       _this.setContainerDynamicPositioning = _this.setContainerDynamicPositioning.bind(_assertThisInitialized(_this));
       _this.updatePopupState = _this.updatePopupState.bind(_assertThisInitialized(_this));
       _this.handleScrollAndBlockEvents = _this.handleScrollAndBlockEvents.bind(_assertThisInitialized(_this));
+      _this.handleIframeEventListeners = _this.handleIframeEventListeners.bind(_assertThisInitialized(_this));
       _this.handleDropElementStyleUpdate = _this.handleDropElementStyleUpdate.bind(_assertThisInitialized(_this));
       _this.positionRef = /*#__PURE__*/_react["default"].createRef();
+      _this.rootElement = _Registry["default"].getRootElement();
       _this.popupObserver = new _ResizeObserver["default"](_this.handlePopupResize); //dropBoxSize
 
       _this.size = null;
@@ -207,16 +258,15 @@ var Popup = function Popup(Component) {
       key: "componentDidMount",
       value: function componentDidMount() {
         var group = this.getGroup();
-        var groupPopups = popups[group] || [];
+        var groupPopups = _Registry["default"].popups[group] || [];
         groupPopups.push(this);
-        popups[group] = groupPopups;
+        _Registry["default"].popups[group] = groupPopups;
 
-        if (Object.keys(popups).length === 1 && groupPopups.length === 1) {
-          document.addEventListener('click', this.documentClickHandler, false);
+        if (Object.keys(_Registry["default"].popups).length === 1 && groupPopups.length === 1) {
+          this.updateListeners(true, CLICK_EVENTS, document);
           document.addEventListener('keyup', this.documentKeyupHandler, false); // document.addEventListener('scroll', this.handleScroll, true);
 
           window.addEventListener('resize', this.handleResize);
-          document.addEventListener('click', this.documentClickHandler1, true);
           document.addEventListener('mousedown', this.handleDocumentMouseDown, true);
           document.addEventListener('focus', this.handleDocumentFocus, true);
         }
@@ -235,8 +285,8 @@ var Popup = function Popup(Component) {
       }
     }, {
       key: "handleScrollAndBlockEvents",
-      value: function handleScrollAndBlockEvents(isPopupReady, isMobile) {
-        if (isPopupReady && !isMobile) {
+      value: function handleScrollAndBlockEvents(shouldAdd) {
+        if (shouldAdd) {
           this.handleAddingScrollBlock();
           this.handleAddingScrollToUpdatePosition();
         } else {
@@ -244,6 +294,19 @@ var Popup = function Popup(Component) {
           this.handleRemovingScrollToUpdatePosition();
         }
       }
+    }, {
+      key: "handleIframeEventListeners",
+      value: function handleIframeEventListeners(shouldAdd, eventList) {
+        var _this2 = this;
+
+        this.rootElement.querySelectorAll('iframe').forEach(function (frame) {
+          var frameDocument = frame.contentDocument;
+
+          if (frameDocument) {
+            _this2.updateListeners(shouldAdd, eventList, frameDocument);
+          }
+        });
+      }
     }, {
       key: "componentDidUpdate",
       value: function componentDidUpdate(prevProps, prevState) {
@@ -269,33 +332,36 @@ var Popup = function Popup(Component) {
         }
 
         if (oldStateOpen !== isPopupReady && !isMobile || oldIsMobileState !== isMobile) {
-          this.handleScrollAndBlockEvents(isPopupReady, isMobile);
+          var shouldAdd = isPopupReady && !isMobile;
+          this.handleScrollAndBlockEvents(shouldAdd);
+          this.handleIframeEventListeners(shouldAdd, CLICK_EVENTS);
         }
       }
     }, {
       key: "componentWillUnmount",
       value: function componentWillUnmount() {
-        var _this2 = this;
+        var _this3 = this;
 
         var group = this.getGroup();
-        popups = Object.keys(popups).reduce(function (res, groupName) {
+        _Registry["default"].popups = Object.keys(_Registry["default"].popups).reduce(function (res, groupName) {
           if (groupName === group) {
-            var groupPopups = popups[group];
+            var groupPopups = _Registry["default"].popups[group];
             var newGroupPopups = groupPopups.filter(function (popup) {
-              return popup !== _this2;
+              return popup !== _this3;
             });
-            newGroupPopups.length === 0 && lastOpenedGroup.indexOf(group) >= 0 && lastOpenedGroup.splice(lastOpenedGroup.indexOf(group), 1);
+            newGroupPopups.length === 0 && _Registry["default"].lastOpenedGroup.indexOf(group) >= 0 && _Registry["default"].lastOpenedGroup.splice(_Registry["default"].lastOpenedGroup.indexOf(group), 1);
             res[group] = newGroupPopups;
           }
 
           return res;
-        }, popups);
+        }, _Registry["default"].popups);
         this.handleRemovingScrollBlock();
         this.handleRemovingScrollToUpdatePosition();
+        this.handleIframeEventListeners(false, CLICK_EVENTS);
         var noPopups = true;
 
-        for (var i in popups) {
-          if (popups[i].length >= 1) {
+        for (var i in _Registry["default"].popups) {
+          if (_Registry["default"].popups[i].length >= 1) {
             noPopups = false;
             break;
           }
@@ -306,11 +372,10 @@ var Popup = function Popup(Component) {
         }
 
         if (noPopups) {
-          document.removeEventListener('click', this.documentClickHandler);
+          this.updateListeners(false, CLICK_EVENTS, document);
           document.removeEventListener('keyup', this.documentKeyupHandler); // document.removeEventListener('scroll', this.handleScroll);
 
           window.removeEventListener('resize', this.handleResize);
-          document.removeEventListener('click', this.documentClickHandler1, true);
           document.removeEventListener('mousedown', this.handleDocumentMouseDown, true);
           document.removeEventListener('focus', this.handleDocumentFocus, true);
         }
@@ -345,10 +410,13 @@ var Popup = function Popup(Component) {
 
         if (!isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
           (0, _intersectionObserver.addIntersectionObserver)(this.placeHolderElement, this.updateVisibilityOnIntersection);
-          document.addEventListener('scroll', this.updatePositionOnScroll, {
-            capture: true,
-            passive: false
-          });
+          var shouldAddScrollToUpdatePositionListeners = _Registry["default"].getOpenedScrollableFixedPopups().length === 1 && _Registry["default"].scrollableListenerPopupRef === undefined;
+
+          if (shouldAddScrollToUpdatePositionListeners) {
+            _Registry["default"].scrollableListenerPopupRef = this;
+
+            _Registry["default"].scrollableListenerPopupRef.addScrollToUpdateListeners();
+          }
         }
       }
     }, {
@@ -359,10 +427,13 @@ var Popup = function Popup(Component) {
 
         if (!isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
           (0, _intersectionObserver.removeIntersectionObserver)(this.placeHolderElement, this.updateVisibilityOnIntersection);
-          document.removeEventListener('scroll', this.updatePositionOnScroll, {
-            capture: true,
-            passive: false
-          });
+          var shouldRemoveScrollToUpdatePositionListeners = _Registry["default"].getOpenedScrollableFixedPopups().length === 0 && _Registry["default"].scrollableListenerPopupRef !== undefined;
+
+          if (shouldRemoveScrollToUpdatePositionListeners) {
+            _Registry["default"].scrollableListenerPopupRef.removeScrollToUpdateListeners();
+
+            _Registry["default"].scrollableListenerPopupRef = undefined;
+          }
         }
       }
     }, {
@@ -421,50 +492,81 @@ var Popup = function Popup(Component) {
     }, {
       key: "updatePositionOnScroll",
       value: function updatePositionOnScroll(e) {
-        var placeHolderElement = this.placeHolderElement,
-            defaultPosition = this.defaultPosition,
-            isTargetElementVisible = this.isTargetElementVisible;
+        var scrollablePopups = _Registry["default"].getOpenedScrollableFixedPopups(); // Check if the event target is outside all dropElements
 
-        if (e.target.contains(placeHolderElement) && isTargetElementVisible) {
-          this.handlePopupPosition(defaultPosition, true);
-        }
+
+        scrollablePopups.forEach(function (_ref5) {
+          var placeHolderElement = _ref5.placeHolderElement,
+              defaultPosition = _ref5.defaultPosition,
+              isTargetElementVisible = _ref5.isTargetElementVisible,
+              handlePopupPosition = _ref5.handlePopupPosition;
+
+          if (e.target.contains(placeHolderElement) && isTargetElementVisible) {
+            handlePopupPosition(defaultPosition, true);
+          }
+        });
+      }
+    }, {
+      key: "updateListeners",
+      value: function updateListeners() {
+        var _this4 = this;
+
+        var add = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+        var eventList = arguments.length > 1 ? arguments[1] : undefined;
+        var element = arguments.length > 2 ? arguments[2] : undefined;
+        var method = add ? 'addEventListener' : 'removeEventListener';
+        eventList.forEach(function (_ref6) {
+          var name = _ref6.name,
+              handlerName = _ref6.handlerName,
+              options = _ref6.options;
+          var handler = _this4[handlerName];
+
+          if (handler) {
+            element[method](name, handler, options);
+          }
+        });
       }
     }, {
       key: "addScrollBlockListeners",
       value: function addScrollBlockListeners() {
-        document.addEventListener('wheel', this.handleBlockScroll, {
-          capture: true,
-          passive: false
-        });
-        document.addEventListener('touchmove', this.handleBlockScroll, {
-          capture: true,
-          passive: false
-        });
-        document.addEventListener('scroll', this.handlePositionChange, {
-          capture: true,
-          passive: false
-        });
-        document.addEventListener('keydown', this.preventKeyboardScroll, {
-          capture: true,
-          passive: false
-        });
+        // Only add scroll block listeners if at least one open popup needs outside scroll blocked
+        var shouldAddScrollBlockListeners = _Registry["default"].getOpenedScrollBlockedFixedPopups().length === 1 && _Registry["default"].scrollBlockedListenerPopupRef === undefined;
+
+        if (shouldAddScrollBlockListeners) {
+          _Registry["default"].scrollBlockedListenerPopupRef = this; // Main document
+
+          _Registry["default"].scrollBlockedListenerPopupRef.updateListeners(true, SCROLL_BLOCK_EVENTS, document); // Attach event listeners to all iframes within rootElement
+
+
+          _Registry["default"].scrollBlockedListenerPopupRef.handleIframeEventListeners(true, IFRAME_SCROLL_BLOCK_EVENTS);
+        }
       }
     }, {
       key: "removeScrollBlockListeners",
       value: function removeScrollBlockListeners() {
-        document.removeEventListener('wheel', this.handleBlockScroll, {
-          capture: true,
-          passive: false
-        });
-        document.removeEventListener('touchmove', this.handleBlockScroll, {
-          capture: true,
-          passive: false
-        });
-        document.removeEventListener('scroll', this.handlePositionChange, {
+        // Only remove scroll block listeners if at least one open popup needs outside scroll blocked
+        var shouldRemoveScrollBlockListeners = _Registry["default"].getOpenedScrollBlockedFixedPopups().length === 0 && _Registry["default"].scrollBlockedListenerPopupRef !== undefined;
+
+        if (shouldRemoveScrollBlockListeners) {
+          _Registry["default"].scrollBlockedListenerPopupRef.updateListeners(false, SCROLL_BLOCK_EVENTS, document);
+
+          _Registry["default"].scrollBlockedListenerPopupRef.handleIframeEventListeners(false, IFRAME_SCROLL_BLOCK_EVENTS);
+
+          _Registry["default"].scrollBlockedListenerPopupRef = undefined;
+        }
+      }
+    }, {
+      key: "addScrollToUpdateListeners",
+      value: function addScrollToUpdateListeners() {
+        document.addEventListener('scroll', this.updatePositionOnScroll, {
           capture: true,
           passive: false
         });
-        document.removeEventListener('keydown', this.preventKeyboardScroll, {
+      }
+    }, {
+      key: "removeScrollToUpdateListeners",
+      value: function removeScrollToUpdateListeners() {
+        document.removeEventListener('scroll', this.updatePositionOnScroll, {
           capture: true,
           passive: false
         });
@@ -472,35 +574,48 @@ var Popup = function Popup(Component) {
     }, {
       key: "handleBlockScroll",
       value: function handleBlockScroll(event) {
-        // const targetElement = this.placeHolderElement;
-        var containerElement = this.dropElement;
-
-        if (containerElement && containerElement !== event.target && !containerElement.contains(event.target)) {
-          // --- Scroll exclude Target & Container elements --- For reference. Will adopt in future
-          // if(
-          //   (containerElement && (containerElement !== event.target && !containerElement.contains(event.target)))
-          //   && (targetElement && (targetElement !== event.target && !targetElement.contains(event.target)))
-          // ) {
+        var scrollBlockedPopups = _Registry["default"].getOpenedScrollBlockedFixedPopups(); // Check if the event target is outside all dropElements
+
+
+        var isOutsideAllDropElements = scrollBlockedPopups.every(function (_ref7) {
+          var dropElement = _ref7.dropElement;
+          return dropElement && dropElement !== event.target && !dropElement.contains(event.target);
+        });
+
+        if (isOutsideAllDropElements) {
           event.preventDefault();
         }
       }
     }, {
       key: "handlePositionChange",
       value: function handlePositionChange(event) {
-        var targetElement = this.placeHolderElement;
-        var containerElement = this.dropElement;
+        var scrollBlockedPopups = _Registry["default"].getOpenedScrollBlockedFixedPopups();
 
-        if (containerElement && containerElement !== event.target && !containerElement.contains(event.target) && targetElement && targetElement !== event.target && !targetElement.contains(event.target) && event.target.contains(targetElement)) {
-          this.handlePopupPosition(this.state.position, true); // this.closePopupOnly(event);
-        }
+        scrollBlockedPopups.forEach(function (_ref8) {
+          var placeHolderElement = _ref8.placeHolderElement,
+              dropElement = _ref8.dropElement,
+              handlePopupPosition = _ref8.handlePopupPosition,
+              state = _ref8.state;
+
+          if (dropElement && dropElement !== event.target && !dropElement.contains(event.target) && placeHolderElement && placeHolderElement !== event.target && !placeHolderElement.contains(event.target) && event.target.contains(placeHolderElement)) {
+            handlePopupPosition(state.position, true);
+          }
+        });
       }
     }, {
       key: "preventKeyboardScroll",
       value: function preventKeyboardScroll(event) {
-        var containerElement = this.dropElement;
         var keys = [32, 37, 38, 39, 40]; // Space, Arrow keys
 
-        if (containerElement && containerElement !== event.target && !containerElement.contains(event.target) && keys.includes(event.keyCode)) {
+        var scrollBlockedPopups = _Registry["default"].getOpenedScrollBlockedFixedPopups(); // Check if the event target is outside all dropElements
+
+
+        var isOutsideAllDropElements = scrollBlockedPopups.every(function (_ref9) {
+          var dropElement = _ref9.dropElement;
+          return dropElement && dropElement !== event.target && !dropElement.contains(event.target) && keys.includes(event.keyCode);
+        });
+
+        if (isOutsideAllDropElements) {
           event.preventDefault();
         }
       }
@@ -577,16 +692,16 @@ var Popup = function Popup(Component) {
     }, {
       key: "togglePopup",
       value: function togglePopup(e, defaultPosition) {
-        var _this3 = this;
+        var _this5 = this;
 
         var group = this.getGroup();
         this.removeClose(e);
         var isPopupOpen = this.state.isPopupOpen;
-        var groupPopups = popups[group] || [];
-        lastOpenedGroup = !isPopupOpen && lastOpenedGroup.indexOf(group) === -1 ? [group].concat(_toConsumableArray(lastOpenedGroup)) : lastOpenedGroup;
-        isPopupOpen && lastOpenedGroup.splice(0, 1);
+        var groupPopups = _Registry["default"].popups[group] || [];
+        _Registry["default"].lastOpenedGroup = !isPopupOpen && _Registry["default"].lastOpenedGroup.indexOf(group) === -1 ? [group].concat(_toConsumableArray(_Registry["default"].lastOpenedGroup)) : _Registry["default"].lastOpenedGroup;
+        isPopupOpen && _Registry["default"].lastOpenedGroup.splice(0, 1);
         groupPopups.forEach(function (popup) {
-          if (popup !== _this3 && popup.state.isPopupOpen) {
+          if (popup !== _this5 && popup.state.isPopupOpen) {
             popup.setState({
               isPopupOpen: false,
               isPopupReady: false
@@ -608,17 +723,18 @@ var Popup = function Popup(Component) {
       value: function openPopupOnly(e, defaultPosition) {
         var group = this.getGroup();
         this.removeClose(e);
-        lastOpenedGroup = lastOpenedGroup.indexOf(group) === -1 ? [group].concat(_toConsumableArray(lastOpenedGroup)) : lastOpenedGroup;
+        _Registry["default"].lastOpenedGroup = _Registry["default"].lastOpenedGroup.indexOf(group) === -1 ? [group].concat(_toConsumableArray(_Registry["default"].lastOpenedGroup)) : _Registry["default"].lastOpenedGroup;
         this.handlePopupPosition(defaultPosition);
       }
     }, {
       key: "closePopupOnly",
       value: function closePopupOnly(e) {
         this.removeClose(e);
-        lastOpenedGroup.splice(0, 1);
         var isPopupOpen = this.state.isPopupOpen;
 
         if (isPopupOpen) {
+          _Registry["default"].lastOpenedGroup.splice(0, 1);
+
           this.setState({
             isPopupOpen: false,
             isPopupReady: false
@@ -628,8 +744,10 @@ var Popup = function Popup(Component) {
     }, {
       key: "handleCloseLastOpenedGroup",
       value: function handleCloseLastOpenedGroup() {
-        var groupPopups = lastOpenedGroup.length ? popups[lastOpenedGroup[0]] || [] : [];
-        lastOpenedGroup.splice(0, 1);
+        var groupPopups = _Registry["default"].lastOpenedGroup.length ? _Registry["default"].popups[_Registry["default"].lastOpenedGroup[0]] || [] : [];
+
+        _Registry["default"].lastOpenedGroup.splice(0, 1);
+
         groupPopups.forEach(function (popup) {
           popup.state.isPopupOpen && popup.setState({
             isPopupOpen: false,
@@ -660,9 +778,9 @@ var Popup = function Popup(Component) {
       value: function handleGetNeedPrevent(e) {
         var needPrevent = false;
 
-        if (lastOpenedGroup.length > 1) {
+        if (_Registry["default"].lastOpenedGroup.length > 1) {
           var target = e.target;
-          var groupPopups = lastOpenedGroup.length ? popups[lastOpenedGroup[0]] : [];
+          var groupPopups = _Registry["default"].lastOpenedGroup.length ? _Registry["default"].popups[_Registry["default"].lastOpenedGroup[0]] : [];
           var openedPopup = null; // eslint-disable-next-line guard-for-in
 
           for (var i in groupPopups) {
@@ -707,8 +825,8 @@ var Popup = function Popup(Component) {
       key: "documentClickHandler",
       value: function documentClickHandler() {
         try {
-          Object.keys(popups).forEach(function (groupName) {
-            var groupPopups = popups[groupName] || [];
+          Object.keys(_Registry["default"].popups).forEach(function (groupName) {
+            var groupPopups = _Registry["default"].popups[groupName] || [];
             groupPopups.forEach(function (popup) {
               popup.state.isPopupOpen && (!popup.props.checkBeforeClose || popup.props.checkBeforeClose && popup.props.checkBeforeClose()) && !(0, _Common.isTextSelected)() && popup.setState({
                 isPopupOpen: false,
@@ -716,7 +834,7 @@ var Popup = function Popup(Component) {
               });
             });
           });
-          lastOpenedGroup = [];
+          _Registry["default"].lastOpenedGroup = [];
         } catch (e) {// eslint-disable-next-line no-console
           //console.error('popup component not unmounted properly', e);
         }
@@ -756,14 +874,14 @@ var Popup = function Popup(Component) {
     }, {
       key: "handlePopupPosition",
       value: function handlePopupPosition() {
-        var _this4 = this;
+        var _this6 = this;
 
         var defaultPosition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'bottomCenter';
         var isUpdatePosition = arguments.length > 1 ? arguments[1] : undefined;
 
         // isUpdatePosition --->>> Window resize and dropBox resize and to update the position
-        var _ref5 = this.context || {},
-            direction = _ref5.direction;
+        var _ref10 = this.context || {},
+            direction = _ref10.direction;
 
         var placeHolderElement = this.placeHolderElement,
             dropElement = this.dropElement;
@@ -789,11 +907,11 @@ var Popup = function Popup(Component) {
 
         var setPosition = function setPosition() {
           requestAnimationFrame(function () {
-            var placeHolderElement = _this4.placeHolderElement,
-                dropElement = _this4.dropElement;
-            var _this4$state = _this4.state,
-                position = _this4$state.position,
-                isPopupReady = _this4$state.isPopupReady;
+            var placeHolderElement = _this6.placeHolderElement,
+                dropElement = _this6.dropElement;
+            var _this6$state = _this6.state,
+                position = _this6$state.position,
+                isPopupReady = _this6$state.isPopupReady;
             var scrollContainer = placeHolderElement.closest('[data-scroll=true]') || document.body;
 
             var betterPosition = _viewPort["default"].betterView(dropElement, placeHolderElement, defaultPosition, scrollContainer, {
@@ -802,26 +920,26 @@ var Popup = function Popup(Component) {
               customOrder: customOrder
             });
 
-            var _ref6 = betterPosition || _Common.DUMMY_OBJECT,
-                view = _ref6.view,
-                views = _ref6.views,
-                viewsOffset = _ref6.viewsOffset,
-                targetOffset = _ref6.targetOffset,
-                popupOffset = _ref6.popupOffset;
+            var _ref11 = betterPosition || _Common.DUMMY_OBJECT,
+                view = _ref11.view,
+                views = _ref11.views,
+                viewsOffset = _ref11.viewsOffset,
+                targetOffset = _ref11.targetOffset,
+                popupOffset = _ref11.popupOffset;
 
             if (!isAbsolute) {
               if (!isPopupReady) {
-                _this4.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
+                _this6.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
               }
 
               if (!dropElement) {
                 return;
               }
 
-              _this4.setContainerDynamicPositioning(betterPosition, needArrow);
+              _this6.setContainerDynamicPositioning(betterPosition, needArrow);
             } else {
               if (position !== view || !isPopupReady) {
-                _this4.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
+                _this6.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
               }
             }
           });
@@ -840,10 +958,10 @@ var Popup = function Popup(Component) {
     }, {
       key: "handleOpenPopupPositionChange",
       value: function handleOpenPopupPositionChange() {
-        var _this5 = this;
+        var _this7 = this;
 
-        Object.keys(popups).forEach(function (groupName) {
-          var groupPopups = popups[groupName] || [];
+        Object.keys(_Registry["default"].popups).forEach(function (groupName) {
+          var groupPopups = _Registry["default"].popups[groupName] || [];
           groupPopups.forEach(function (popup) {
             if (popup.state.isPopupOpen) {
               var placeHolderElement = popup.placeHolderElement,
@@ -857,11 +975,11 @@ var Popup = function Popup(Component) {
               if (placeHolderElement && dropElement) {
                 var scrollContainer = placeHolderElement.closest('[data-scroll=true]') || document.body;
                 requestAnimationFrame(function () {
-                  var needArrow = _this5.getNeedArrow(popup);
+                  var needArrow = _this7.getNeedArrow(popup);
 
-                  var isAbsolute = _this5.getIsAbsolutePopup(popup);
+                  var isAbsolute = _this7.getIsAbsolutePopup(popup);
 
-                  var customOrder = _this5.getCustomPositionOrder(popup);
+                  var customOrder = _this7.getCustomPositionOrder(popup);
 
                   var isMobile = (0, _isMobilePopover["default"])(true);
 
@@ -871,33 +989,33 @@ var Popup = function Popup(Component) {
                     customOrder: customOrder
                   });
 
-                  var _ref7 = betterPosition || {},
-                      view = _ref7.view,
-                      views = _ref7.views,
-                      _ref7$viewsOffset = _ref7.viewsOffset,
-                      viewsOffset = _ref7$viewsOffset === void 0 ? {} : _ref7$viewsOffset,
-                      targetOffset = _ref7.targetOffset,
-                      popupOffset = _ref7.popupOffset;
-
-                  var _ref8 = positionsOffset[position] || {},
-                      _ref8$left = _ref8.left,
-                      oldLeft = _ref8$left === void 0 ? '' : _ref8$left,
-                      _ref8$top = _ref8.top,
-                      oldTop = _ref8$top === void 0 ? '' : _ref8$top,
-                      _ref8$bottom = _ref8.bottom,
-                      oldBottom = _ref8$bottom === void 0 ? '' : _ref8$bottom,
-                      _ref8$right = _ref8.right,
-                      oldRight = _ref8$right === void 0 ? '' : _ref8$right;
-
-                  var _ref9 = viewsOffset[view] || {},
-                      _ref9$left = _ref9.left,
-                      left = _ref9$left === void 0 ? '' : _ref9$left,
-                      _ref9$top = _ref9.top,
-                      top = _ref9$top === void 0 ? '' : _ref9$top,
-                      _ref9$bottom = _ref9.bottom,
-                      bottom = _ref9$bottom === void 0 ? '' : _ref9$bottom,
-                      _ref9$right = _ref9.right,
-                      right = _ref9$right === void 0 ? '' : _ref9$right;
+                  var _ref12 = betterPosition || {},
+                      view = _ref12.view,
+                      views = _ref12.views,
+                      _ref12$viewsOffset = _ref12.viewsOffset,
+                      viewsOffset = _ref12$viewsOffset === void 0 ? {} : _ref12$viewsOffset,
+                      targetOffset = _ref12.targetOffset,
+                      popupOffset = _ref12.popupOffset;
+
+                  var _ref13 = positionsOffset[position] || {},
+                      _ref13$left = _ref13.left,
+                      oldLeft = _ref13$left === void 0 ? '' : _ref13$left,
+                      _ref13$top = _ref13.top,
+                      oldTop = _ref13$top === void 0 ? '' : _ref13$top,
+                      _ref13$bottom = _ref13.bottom,
+                      oldBottom = _ref13$bottom === void 0 ? '' : _ref13$bottom,
+                      _ref13$right = _ref13.right,
+                      oldRight = _ref13$right === void 0 ? '' : _ref13$right;
+
+                  var _ref14 = viewsOffset[view] || {},
+                      _ref14$left = _ref14.left,
+                      left = _ref14$left === void 0 ? '' : _ref14$left,
+                      _ref14$top = _ref14.top,
+                      top = _ref14$top === void 0 ? '' : _ref14$top,
+                      _ref14$bottom = _ref14.bottom,
+                      bottom = _ref14$bottom === void 0 ? '' : _ref14$bottom,
+                      _ref14$right = _ref14.right,
+                      right = _ref14$right === void 0 ? '' : _ref14$right;
 
                   var changeState = isAbsolute ? position !== view : oldLeft !== left || oldTop !== top || oldBottom !== bottom || oldRight !== right; // let isInViewPort = viewPort.isInViewPort(
                   //   placeHolderElement,
@@ -956,11 +1074,11 @@ var Popup = function Popup(Component) {
         var height = popupSize.height,
             width = popupSize.width;
 
-        var _ref10 = this.size || {},
-            _ref10$height = _ref10.height,
-            oldHeight = _ref10$height === void 0 ? 0 : _ref10$height,
-            _ref10$width = _ref10.width,
-            oldWidth = _ref10$width === void 0 ? 0 : _ref10$width;
+        var _ref15 = this.size || {},
+            _ref15$height = _ref15.height,
+            oldHeight = _ref15$height === void 0 ? 0 : _ref15$height,
+            _ref15$width = _ref15.width,
+            oldWidth = _ref15$width === void 0 ? 0 : _ref15$width;
 
         var _this$state2 = this.state,
             isPopupReady = _this$state2.isPopupReady,