@zohodesk/components 1.2.55 → 1.2.57

package/lib/Popup/Popup.js

@@ -23,10 +23,22 @@ var _ResizeObserver = _interopRequireDefault(require("@zohodesk/virtualizer/lib/
 
 var _intersectionObserver = require("./intersectionObserver");
 
+var _DropBoxPositionMapping = require("../DropBox/DropBoxPositionMapping.js");
+
+var _isMobilePopover = _interopRequireDefault(require("../DropBox/utils/isMobilePopover.js"));
+
+var _selectn = _interopRequireDefault(require("selectn"));
+
+var _excluded = ["isMobile"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -103,7 +115,9 @@ var Popup = function Popup(Component) {
       _ref$scrollDebounceTi = _ref.scrollDebounceTime,
       popupScrollDebounceTime = _ref$scrollDebounceTi === void 0 ? 0 : _ref$scrollDebounceTi,
       _ref$closeOnScroll = _ref.closeOnScroll,
-      closeOnScrollPopup = _ref$closeOnScroll === void 0 ? false : _ref$closeOnScroll;
+      closeOnScrollPopup = _ref$closeOnScroll === void 0 ? false : _ref$closeOnScroll,
+      _ref$isOutsideScrollB = _ref.isOutsideScrollBlocked,
+      isOutsideScrollBlock = _ref$isOutsideScrollB === void 0 ? false : _ref$isOutsideScrollB;
 
   var Popup = /*#__PURE__*/function (_React$Component) {
     _inherits(Popup, _React$Component);
@@ -129,7 +143,8 @@ var Popup = function Popup(Component) {
         //{height: ‘’, width: ‘’,}
         popupOffset: {},
         //{height: ‘’, width: ‘’,}
-        isAbsolutePositioningNeeded: true
+        isAbsolutePositioningNeeded: true,
+        isMobile: false
       };
       _this.togglePopup = _this.togglePopup.bind(_assertThisInitialized(_this));
       _this.documentClickHandler = _this.documentClickHandler.bind(_assertThisInitialized(_this));
@@ -144,10 +159,11 @@ var Popup = function Popup(Component) {
       _this.handleResize = (0, _Common.debounce)(_this.handleResize.bind(_assertThisInitialized(_this)), 300);
       _this.handlePopupResize = _this.handlePopupResize.bind(_assertThisInitialized(_this));
       _this.getIsAbsolutePopup = _this.getIsAbsolutePopup.bind(_assertThisInitialized(_this));
+      _this.getIsOutsideScrollBlocked = _this.getIsOutsideScrollBlocked.bind(_assertThisInitialized(_this));
       _this.getNeedArrow = _this.getNeedArrow.bind(_assertThisInitialized(_this));
       _this.getCustomPositionOrder = _this.getCustomPositionOrder.bind(_assertThisInitialized(_this));
-      _this.handleOpenPopupPositionChange = _this.handleOpenPopupPositionChange.bind(_assertThisInitialized(_this));
-      _this.getScrollDebounceTime = _this.getScrollDebounceTime.bind(_assertThisInitialized(_this));
+      _this.handleOpenPopupPositionChange = _this.handleOpenPopupPositionChange.bind(_assertThisInitialized(_this)); // this.getScrollDebounceTime = this.getScrollDebounceTime.bind(this);
+
       _this.getCloseOnScrollPopup = _this.getCloseOnScrollPopup.bind(_assertThisInitialized(_this));
       _this.handleCloseLastOpenedGroup = _this.handleCloseLastOpenedGroup.bind(_assertThisInitialized(_this));
       _this.handleDocumentMouseDown = _this.handleDocumentMouseDown.bind(_assertThisInitialized(_this));
@@ -161,20 +177,27 @@ var Popup = function Popup(Component) {
       _this.handleAddingScrollBlock = _this.handleAddingScrollBlock.bind(_assertThisInitialized(_this));
       _this.handleRemovingScrollBlock = _this.handleRemovingScrollBlock.bind(_assertThisInitialized(_this));
       _this.handleIntersectionObserver = _this.handleIntersectionObserver.bind(_assertThisInitialized(_this));
+      _this.updateVisibilityOnIntersection = _this.updateVisibilityOnIntersection.bind(_assertThisInitialized(_this));
+      _this.handleAddingScrollToUpdatePosition = _this.handleAddingScrollToUpdatePosition.bind(_assertThisInitialized(_this));
+      _this.handleRemovingScrollToUpdatePosition = _this.handleRemovingScrollToUpdatePosition.bind(_assertThisInitialized(_this));
+      _this.updatePositionOnScroll = _this.updatePositionOnScroll.bind(_assertThisInitialized(_this));
+      _this.setContainerDynamicPositioning = _this.setContainerDynamicPositioning.bind(_assertThisInitialized(_this));
+      _this.updatePopupState = _this.updatePopupState.bind(_assertThisInitialized(_this));
+      _this.handleScrollAndBlockEvents = _this.handleScrollAndBlockEvents.bind(_assertThisInitialized(_this));
+      _this.handleDropElementStyleUpdate = _this.handleDropElementStyleUpdate.bind(_assertThisInitialized(_this));
+      _this.positionRef = /*#__PURE__*/_react["default"].createRef();
       _this.popupObserver = new _ResizeObserver["default"](_this.handlePopupResize); //dropBoxSize
 
       _this.size = null;
+      _this.isTargetElementVisible = false;
       _this.isAbsolutePopup = isAbsolutePopup;
       _this.needPopupArrow = needPopupArrow;
       _this.customPositionOrder = customPositionOrder;
       _this.scrollDebounceTime = popupScrollDebounceTime;
       _this.closeOnScroll = closeOnScrollPopup;
+      _this.isOutsideScrollBlock = isOutsideScrollBlock; // const { scrollDebounceTime } = this.getScrollDebounceTime(this);
+      // this.handleScroll = debounce(this.handleScroll.bind(this), scrollDebounceTime);
 
-      var _this$getScrollDeboun = _this.getScrollDebounceTime(_assertThisInitialized(_this)),
-          scrollDebounceTime = _this$getScrollDeboun.scrollDebounceTime;
-
-      _this.handleScroll = (0, _Common.debounce)(_this.handleScroll.bind(_assertThisInitialized(_this)), scrollDebounceTime);
-      _this.handleDebouncedPositionChange = (0, _Common.debounce)(_this.handlePositionChange.bind(_assertThisInitialized(_this)), 100);
       return _this;
     }
 
@@ -208,14 +231,28 @@ var Popup = function Popup(Component) {
           });
         }
       }
+    }, {
+      key: "handleScrollAndBlockEvents",
+      value: function handleScrollAndBlockEvents(isPopupReady, isMobile) {
+        if (isPopupReady && !isMobile) {
+          this.handleAddingScrollBlock();
+          this.handleAddingScrollToUpdatePosition();
+        } else {
+          this.handleRemovingScrollBlock();
+          this.handleRemovingScrollToUpdatePosition();
+        }
+      }
     }, {
       key: "componentDidUpdate",
       value: function componentDidUpdate(prevProps, prevState) {
-        var isPopupReady = this.state.isPopupReady;
+        var _this$state = this.state,
+            isPopupReady = _this$state.isPopupReady,
+            isMobile = _this$state.isMobile;
 
         var _ref2 = prevState || {},
             _ref2$isPopupReady = _ref2.isPopupReady,
-            oldStateOpen = _ref2$isPopupReady === void 0 ? false : _ref2$isPopupReady;
+            oldStateOpen = _ref2$isPopupReady === void 0 ? false : _ref2$isPopupReady,
+            oldIsMobileState = _ref2.isMobile;
 
         var dropElement = this.dropElement;
         var propResizeHandling = this.props.needResizeHandling;
@@ -227,12 +264,10 @@ var Popup = function Popup(Component) {
             this.size = null;
             this.popupObserver.disconnect();
           }
+        }
 
-          if (isPopupReady) {
-            this.handleAddingScrollBlock();
-          } else {
-            this.handleRemovingScrollBlock();
-          }
+        if (oldStateOpen !== isPopupReady && !isMobile || oldIsMobileState !== isMobile) {
+          this.handleScrollAndBlockEvents(isPopupReady, isMobile);
         }
       }
     }, {
@@ -254,6 +289,7 @@ var Popup = function Popup(Component) {
           return res;
         }, popups);
         this.handleRemovingScrollBlock();
+        this.handleRemovingScrollToUpdatePosition();
         var noPopups = true;
 
         for (var i in popups) {
@@ -280,9 +316,8 @@ var Popup = function Popup(Component) {
     }, {
       key: "handleAddingScrollBlock",
       value: function handleAddingScrollBlock() {
-        var _this$props = this.props,
-            isAbsolutePositioningNeeded = _this$props.isAbsolutePositioningNeeded,
-            isOutsideScrollBlocked = _this$props.isOutsideScrollBlocked;
+        var isAbsolutePositioningNeeded = this.getIsAbsolutePopup(this);
+        var isOutsideScrollBlocked = this.getIsOutsideScrollBlocked(this);
 
         if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
           (0, _intersectionObserver.addIntersectionObserver)(this.placeHolderElement, this.handleIntersectionObserver);
@@ -292,15 +327,106 @@ var Popup = function Popup(Component) {
     }, {
       key: "handleRemovingScrollBlock",
       value: function handleRemovingScrollBlock() {
-        var _this$props2 = this.props,
-            isAbsolutePositioningNeeded = _this$props2.isAbsolutePositioningNeeded,
-            isOutsideScrollBlocked = _this$props2.isOutsideScrollBlocked;
+        var isAbsolutePositioningNeeded = this.getIsAbsolutePopup(this);
+        var isOutsideScrollBlocked = this.getIsOutsideScrollBlocked(this);
 
         if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
           (0, _intersectionObserver.removeIntersectionObserver)(this.placeHolderElement, this.handleIntersectionObserver);
           this.removeScrollBlockListeners();
         }
       }
+    }, {
+      key: "handleAddingScrollToUpdatePosition",
+      value: function handleAddingScrollToUpdatePosition() {
+        var isAbsolutePositioningNeeded = this.getIsAbsolutePopup(this);
+        var isOutsideScrollBlocked = this.getIsOutsideScrollBlocked(this);
+
+        if (!isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
+          (0, _intersectionObserver.addIntersectionObserver)(this.placeHolderElement, this.updateVisibilityOnIntersection);
+          document.addEventListener('scroll', this.updatePositionOnScroll, {
+            capture: true,
+            passive: false
+          });
+        }
+      }
+    }, {
+      key: "handleRemovingScrollToUpdatePosition",
+      value: function handleRemovingScrollToUpdatePosition() {
+        var isAbsolutePositioningNeeded = this.getIsAbsolutePopup(this);
+        var isOutsideScrollBlocked = this.getIsOutsideScrollBlocked(this);
+
+        if (!isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
+          (0, _intersectionObserver.removeIntersectionObserver)(this.placeHolderElement, this.updateVisibilityOnIntersection);
+          document.removeEventListener('scroll', this.updatePositionOnScroll, {
+            capture: true,
+            passive: false
+          });
+        }
+      }
+    }, {
+      key: "handleDropElementStyleUpdate",
+      value: function handleDropElementStyleUpdate(_ref3) {
+        var _ref3$top = _ref3.top,
+            top = _ref3$top === void 0 ? '' : _ref3$top,
+            _ref3$left = _ref3.left,
+            left = _ref3$left === void 0 ? '' : _ref3$left,
+            _ref3$bottom = _ref3.bottom,
+            bottom = _ref3$bottom === void 0 ? '' : _ref3$bottom,
+            _ref3$right = _ref3.right,
+            right = _ref3$right === void 0 ? '' : _ref3$right;
+        var dropElement = this.dropElement;
+        Object.assign(dropElement.style, {
+          top: top ? "".concat(top, "px") : '',
+          left: left ? "".concat(left, "px") : '',
+          right: right ? "".concat(right, "px") : '',
+          bottom: bottom ? "".concat(bottom, "px") : ''
+        });
+      }
+    }, {
+      key: "setContainerDynamicPositioning",
+      value: function setContainerDynamicPositioning(betterPosition, needArrow) {
+        var dropElement = this.dropElement;
+        var isMobile = this.state.isMobile;
+
+        var _ref4 = betterPosition || _Common.DUMMY_OBJECT,
+            view = _ref4.view,
+            viewsOffset = _ref4.viewsOffset;
+
+        var styleToApply = (0, _selectn["default"])("".concat(view), viewsOffset);
+
+        if (isMobile) {
+          this.handleDropElementStyleUpdate({
+            top: '',
+            left: '',
+            right: '',
+            bottom: ''
+          });
+        } else {
+          this.handleDropElementStyleUpdate(styleToApply);
+
+          if (this.positionRef.current !== view) {
+            dropElement.setAttribute('data-position', "".concat(view));
+            dropElement.setAttribute('data-box-direction', (0, _selectn["default"])("".concat(view, ".direction"), _DropBoxPositionMapping.positionMapping));
+
+            if (needArrow) {
+              dropElement.setAttribute('data-arrow-position', (0, _selectn["default"])("".concat(view, ".arrowPosition"), _DropBoxPositionMapping.positionMapping));
+            }
+
+            this.positionRef.current = view;
+          }
+        }
+      }
+    }, {
+      key: "updatePositionOnScroll",
+      value: function updatePositionOnScroll(e) {
+        var placeHolderElement = this.placeHolderElement,
+            defaultPosition = this.defaultPosition,
+            isTargetElementVisible = this.isTargetElementVisible;
+
+        if (e.target.contains(placeHolderElement) && isTargetElementVisible) {
+          this.handlePopupPosition(defaultPosition, true);
+        }
+      }
     }, {
       key: "addScrollBlockListeners",
       value: function addScrollBlockListeners() {
@@ -312,7 +438,7 @@ var Popup = function Popup(Component) {
           capture: true,
           passive: false
         });
-        document.addEventListener('scroll', this.handleDebouncedPositionChange, {
+        document.addEventListener('scroll', this.handlePositionChange, {
           capture: true,
           passive: false
         });
@@ -332,7 +458,7 @@ var Popup = function Popup(Component) {
           capture: true,
           passive: false
         });
-        document.removeEventListener('scroll', this.handleDebouncedPositionChange, {
+        document.removeEventListener('scroll', this.handlePositionChange, {
           capture: true,
           passive: false
         });
@@ -363,7 +489,7 @@ var Popup = function Popup(Component) {
         var containerElement = this.dropElement;
 
         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); // this.closePopupOnly(event);
+          this.handlePopupPosition(this.state.position, true); // this.closePopupOnly(event);
         }
       }
     }, {
@@ -379,10 +505,23 @@ var Popup = function Popup(Component) {
     }, {
       key: "handleIntersectionObserver",
       value: function handleIntersectionObserver(entry) {
-        if (entry.intersectionRatio === 0) {
+        if (entry.intersectionRatio === 0 && entry.isIntersecting === false) {
           this.closePopupOnly();
         }
       }
+    }, {
+      key: "updateVisibilityOnIntersection",
+      value: function updateVisibilityOnIntersection(entry) {
+        var dropElement = this.dropElement;
+
+        if (entry.isIntersecting === true) {
+          this.isTargetElementVisible = true;
+          dropElement.setAttribute('data-visible', 'visible');
+        } else if (entry.intersectionRatio === 0 && entry.isIntersecting === false) {
+          this.isTargetElementVisible = false;
+          dropElement.setAttribute('data-visible', 'hidden');
+        }
+      }
     }, {
       key: "getGroup",
       value: function getGroup() {
@@ -395,14 +534,12 @@ var Popup = function Popup(Component) {
         var isArrow = popup.props.isArrow;
         var needPopupArrow = popup.needPopupArrow;
         return isArrow !== undefined ? isArrow : needPopupArrow;
-      }
-    }, {
-      key: "getScrollDebounceTime",
-      value: function getScrollDebounceTime(popup) {
-        var scrollDebounceTime = popup.props.scrollDebounceTime;
-        var popupScrollDebounceTime = popup.scrollDebounceTime;
-        return scrollDebounceTime !== undefined ? scrollDebounceTime : popupScrollDebounceTime;
-      }
+      } // getScrollDebounceTime(popup) {
+      //   const { scrollDebounceTime } = popup.props;
+      //   const { scrollDebounceTime: popupScrollDebounceTime } = popup;
+      //   return scrollDebounceTime !== undefined ? scrollDebounceTime : popupScrollDebounceTime;
+      // }
+
     }, {
       key: "getCloseOnScrollPopup",
       value: function getCloseOnScrollPopup(popup) {
@@ -417,6 +554,13 @@ var Popup = function Popup(Component) {
         var isAbsolutePopup = popup.isAbsolutePopup;
         return isAbsolutePositioningNeeded !== undefined ? isAbsolutePositioningNeeded : isAbsolutePopup;
       }
+    }, {
+      key: "getIsOutsideScrollBlocked",
+      value: function getIsOutsideScrollBlocked(popup) {
+        var isOutsideScrollBlocked = popup.props.isOutsideScrollBlocked;
+        var isOutsideScrollBlock = popup.isOutsideScrollBlock;
+        return isOutsideScrollBlocked !== undefined ? isOutsideScrollBlocked : isOutsideScrollBlock;
+      }
     }, {
       key: "getCustomPositionOrder",
       value: function getCustomPositionOrder(popup) {
@@ -589,17 +733,32 @@ var Popup = function Popup(Component) {
         // e && e.preventDefault && e.preventDefault();
         (0, _Common.cancelBubblingEffect)(e);
       }
+    }, {
+      key: "updatePopupState",
+      value: function updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute) {
+        var isMobile = (0, _isMobilePopover["default"])(true);
+        this.setState({
+          isPopupReady: true,
+          position: view,
+          positions: views,
+          positionsOffset: viewsOffset,
+          targetOffset: targetOffset,
+          popupOffset: popupOffset,
+          isAbsolutePositioningNeeded: isAbsolute,
+          isMobile: isMobile
+        });
+      }
     }, {
       key: "handlePopupPosition",
       value: function handlePopupPosition() {
         var _this4 = this;
 
         var defaultPosition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'bottomCenter';
-        var isResizeHandling = arguments.length > 1 ? arguments[1] : undefined;
+        var isUpdatePosition = arguments.length > 1 ? arguments[1] : undefined;
 
-        // isResizeHandling --->>> Window resize and dropBox resize
-        var _ref3 = this.context || {},
-            direction = _ref3.direction;
+        // isUpdatePosition --->>> Window resize and dropBox resize and to update the position
+        var _ref5 = this.context || {},
+            direction = _ref5.direction;
 
         var placeHolderElement = this.placeHolderElement,
             dropElement = this.dropElement;
@@ -614,9 +773,11 @@ var Popup = function Popup(Component) {
         }
 
         if (!placeHolderElement && !dropElement) {
+          var isMobile = (0, _isMobilePopover["default"])(true);
           this.setState({
             isPopupOpen: true,
-            isPopupReady: true
+            isPopupReady: true,
+            isMobile: isMobile
           });
           return;
         }
@@ -636,28 +797,32 @@ var Popup = function Popup(Component) {
               customOrder: customOrder
             });
 
-            var _ref4 = betterPosition || {},
-                view = _ref4.view,
-                views = _ref4.views,
-                viewsOffset = _ref4.viewsOffset,
-                targetOffset = _ref4.targetOffset,
-                popupOffset = _ref4.popupOffset;
-
-            if (position !== view || !isPopupReady) {
-              _this4.setState({
-                isPopupReady: true,
-                position: view,
-                positions: views,
-                positionsOffset: viewsOffset,
-                targetOffset: targetOffset,
-                popupOffset: popupOffset,
-                isAbsolutePositioningNeeded: isAbsolute
-              });
+            var _ref6 = betterPosition || _Common.DUMMY_OBJECT,
+                view = _ref6.view,
+                views = _ref6.views,
+                viewsOffset = _ref6.viewsOffset,
+                targetOffset = _ref6.targetOffset,
+                popupOffset = _ref6.popupOffset;
+
+            if (!isAbsolute) {
+              if (!isPopupReady) {
+                _this4.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
+              }
+
+              if (!dropElement) {
+                return;
+              }
+
+              _this4.setContainerDynamicPositioning(betterPosition, needArrow);
+            } else {
+              if (position !== view || !isPopupReady) {
+                _this4.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
+              }
             }
           });
         };
 
-        if (isResizeHandling) {
+        if (isUpdatePosition) {
           setPosition();
         } else {
           this.defaultPosition = defaultPosition;
@@ -693,37 +858,43 @@ var Popup = function Popup(Component) {
 
                   var customOrder = _this5.getCustomPositionOrder(popup);
 
+                  var isMobile = (0, _isMobilePopover["default"])(true);
+
                   var betterPosition = _viewPort["default"].betterView(dropElement, placeHolderElement, defaultPosition, scrollContainer, {
                     needArrow: needArrow,
                     isAbsolute: isAbsolute,
                     customOrder: customOrder
                   });
 
-                  var _ref5 = betterPosition || {},
-                      view = _ref5.view,
-                      views = _ref5.views,
-                      _ref5$viewsOffset = _ref5.viewsOffset,
-                      viewsOffset = _ref5$viewsOffset === void 0 ? {} : _ref5$viewsOffset,
-                      targetOffset = _ref5.targetOffset,
-                      popupOffset = _ref5.popupOffset;
-
-                  var _ref6 = positionsOffset[position] || {},
-                      _ref6$left = _ref6.left,
-                      oldLeft = _ref6$left === void 0 ? '' : _ref6$left,
-                      _ref6$top = _ref6.top,
-                      oldTop = _ref6$top === void 0 ? '' : _ref6$top,
-                      _ref6$bottom = _ref6.bottom,
-                      oldBottom = _ref6$bottom === void 0 ? '' : _ref6$bottom;
-
-                  var _ref7 = viewsOffset[view] || {},
-                      _ref7$left = _ref7.left,
-                      left = _ref7$left === void 0 ? '' : _ref7$left,
-                      _ref7$top = _ref7.top,
-                      top = _ref7$top === void 0 ? '' : _ref7$top,
-                      _ref7$bottom = _ref7.bottom,
-                      bottom = _ref7$bottom === void 0 ? '' : _ref7$bottom;
-
-                  var changeState = isAbsolute ? position !== view : oldLeft !== left || oldTop !== top || oldBottom !== bottom; // let isInViewPort = viewPort.isInViewPort(
+                  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 changeState = isAbsolute ? position !== view : oldLeft !== left || oldTop !== top || oldBottom !== bottom || oldRight !== right; // let isInViewPort = viewPort.isInViewPort(
                   //   placeHolderElement,
                   //   scrollContainer
                   // );
@@ -735,7 +906,8 @@ var Popup = function Popup(Component) {
                       positionsOffset: viewsOffset,
                       targetOffset: targetOffset,
                       popupOffset: popupOffset,
-                      isAbsolutePositioningNeeded: isAbsolute
+                      isAbsolutePositioningNeeded: isAbsolute,
+                      isMobile: isMobile
                     });
                   } // if (!isInViewPort && !isAbsolute) {
                   //   popup.setState({ isPopupOpen: false, isPopupReady: false });
@@ -760,40 +932,34 @@ var Popup = function Popup(Component) {
       key: "handleResize",
       value: function handleResize() {
         this.handleOpenPopupPositionChange();
-      }
-    }, {
-      key: "handleScroll",
-      value: function handleScroll(e) {
-        // this.handleOpenPopupPositionChange();
-        var _this$getCloseOnScrol = this.getCloseOnScrollPopup(this),
-            closeOnScroll = _this$getCloseOnScrol.closeOnScroll;
-
-        var isPopupReady = this.state.isPopupReady;
-
-        if (isPopupReady) {
-          console.log('onscrollPopupREady');
-        }
+      } // handleScroll(e) {
+      //   // this.handleOpenPopupPositionChange();
+      //   const { closeOnScroll } = this.getCloseOnScrollPopup(this);
+      //   const { isPopupReady } = this.state;
+      //   if (isPopupReady) {
+      //     console.log('onscrollPopupREady');
+      //   }
+      //   if (isPopupReady && closeOnScroll) {
+      //     console.log(this, 'handle Scroll');
+      //     this.togglePopup(e);
+      //   }
+      // }
 
-        if (isPopupReady && closeOnScroll) {
-          console.log(this, 'handle Scroll');
-          this.togglePopup(e);
-        }
-      }
     }, {
       key: "handlePopupResize",
       value: function handlePopupResize(popupSize) {
         var height = popupSize.height,
             width = popupSize.width;
 
-        var _ref8 = this.size || {},
-            _ref8$height = _ref8.height,
-            oldHeight = _ref8$height === void 0 ? 0 : _ref8$height,
-            _ref8$width = _ref8.width,
-            oldWidth = _ref8$width === void 0 ? 0 : _ref8$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 _this$state = this.state,
-            isPopupReady = _this$state.isPopupReady,
-            position = _this$state.position;
+        var _this$state2 = this.state,
+            isPopupReady = _this$state2.isPopupReady,
+            position = _this$state2.position;
 
         if (isPopupReady && this.size && (oldHeight !== height || width !== oldWidth)) {
           this.handlePopupPosition(position, true);
@@ -814,11 +980,13 @@ var Popup = function Popup(Component) {
     }, {
       key: "render",
       value: function render() {
-        var _this$state2 = this.state,
-            isPopupReady = _this$state2.isPopupReady,
-            isPopupOpen = _this$state2.isPopupOpen;
-        var localState = isPopupReady ? this.state : {};
-        return /*#__PURE__*/_react["default"].createElement(Component, _extends({}, this.props, this.state, {
+        // const { isPopupReady, isPopupOpen } = this.state;
+        var _this$state3 = this.state,
+            isMobile = _this$state3.isMobile,
+            restState = _objectWithoutProperties(_this$state3, _excluded); // const localState = isPopupReady ? this.state : {};
+
+
+        return /*#__PURE__*/_react["default"].createElement(Component, _extends({}, this.props, restState, {
           openPopupOnly: this.openPopupOnly,
           closePopupOnly: this.closePopupOnly,
           togglePopup: this.togglePopup,

package/lib/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap

@@ -5,6 +5,8 @@ exports[`ResponsiveDropBox rendering the defult props 1`] = `
   <div
     class="main hidden container bottomStart default"
     data-a11y-focus-main-area="true"
+    data-arrow-position="end"
+    data-box-direction="bottom"
     data-id="dropBox"
     data-position="bottomStart"
     data-selector-id="dropBox"
@@ -12,14 +14,14 @@ exports[`ResponsiveDropBox rendering the defult props 1`] = `
     dot-ui-element="dropbox"
   >
     <div
-      class="subContainer bottom_shadow radius defaultPalette"
+      class="subContainer shadow radius defaultPalette"
       data-id="dropBox_subcontainer"
       data-selector-id="dropBox_subcontainer"
       data-test-id="dropBox_subcontainer"
       tabindex="-1"
     >
       <div
-        class="end"
+        class="arrowPosition"
         data-id="dropBox_arrow"
         data-selector-id="dropBox_arrow"
         data-test-id="dropBox_arrow"

package/lib/utils/Common.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.DUMMY_OBJECT = void 0;
 exports.bind = bind;
 exports.bytesToSize = bytesToSize;
 exports.cancelBubblingEffect = cancelBubblingEffect;
@@ -512,4 +513,7 @@ function isTextSelected() {
   }
 
   return false;
-}
+}
+
+var DUMMY_OBJECT = {};
+exports.DUMMY_OBJECT = DUMMY_OBJECT;