@zohodesk/components 1.0.0-temp-199.9 → 1.0.0-temp-216.1

package/lib/Popup/Popup.js

@@ -23,22 +23,10 @@ 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."); }
@@ -115,9 +103,7 @@ 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,
-      _ref$isOutsideScrollB = _ref.isOutsideScrollBlocked,
-      isOutsideScrollBlock = _ref$isOutsideScrollB === void 0 ? false : _ref$isOutsideScrollB;
+      closeOnScrollPopup = _ref$closeOnScroll === void 0 ? false : _ref$closeOnScroll;
 
   var Popup = /*#__PURE__*/function (_React$Component) {
     _inherits(Popup, _React$Component);
@@ -143,8 +129,7 @@ var Popup = function Popup(Component) {
         //{height: ‘’, width: ‘’,}
         popupOffset: {},
         //{height: ‘’, width: ‘’,}
-        isAbsolutePositioningNeeded: true,
-        isMobile: false
+        isAbsolutePositioningNeeded: true
       };
       _this.togglePopup = _this.togglePopup.bind(_assertThisInitialized(_this));
       _this.documentClickHandler = _this.documentClickHandler.bind(_assertThisInitialized(_this));
@@ -159,11 +144,10 @@ 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(this);
-
+      _this.handleOpenPopupPositionChange = _this.handleOpenPopupPositionChange.bind(_assertThisInitialized(_this));
+      _this.getScrollDebounceTime = _this.getScrollDebounceTime.bind(_assertThisInitialized(_this));
       _this.getCloseOnScrollPopup = _this.getCloseOnScrollPopup.bind(_assertThisInitialized(_this));
       _this.handleCloseLastOpenedGroup = _this.handleCloseLastOpenedGroup.bind(_assertThisInitialized(_this));
       _this.handleDocumentMouseDown = _this.handleDocumentMouseDown.bind(_assertThisInitialized(_this));
@@ -177,27 +161,20 @@ 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;
     }
 
@@ -231,28 +208,14 @@ 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 _this$state = this.state,
-            isPopupReady = _this$state.isPopupReady,
-            isMobile = _this$state.isMobile;
+        var isPopupReady = this.state.isPopupReady;
 
         var _ref2 = prevState || {},
             _ref2$isPopupReady = _ref2.isPopupReady,
-            oldStateOpen = _ref2$isPopupReady === void 0 ? false : _ref2$isPopupReady,
-            oldIsMobileState = _ref2.isMobile;
+            oldStateOpen = _ref2$isPopupReady === void 0 ? false : _ref2$isPopupReady;
 
         var dropElement = this.dropElement;
         var propResizeHandling = this.props.needResizeHandling;
@@ -264,10 +227,12 @@ var Popup = function Popup(Component) {
             this.size = null;
             this.popupObserver.disconnect();
           }
-        }
 
-        if (oldStateOpen !== isPopupReady && !isMobile || oldIsMobileState !== isMobile) {
-          this.handleScrollAndBlockEvents(isPopupReady, isMobile);
+          if (isPopupReady) {
+            this.handleAddingScrollBlock();
+          } else {
+            this.handleRemovingScrollBlock();
+          }
         }
       }
     }, {
@@ -289,7 +254,6 @@ var Popup = function Popup(Component) {
           return res;
         }, popups);
         this.handleRemovingScrollBlock();
-        this.handleRemovingScrollToUpdatePosition();
         var noPopups = true;
 
         for (var i in popups) {
@@ -316,8 +280,9 @@ var Popup = function Popup(Component) {
     }, {
       key: "handleAddingScrollBlock",
       value: function handleAddingScrollBlock() {
-        var isAbsolutePositioningNeeded = this.getIsAbsolutePopup(this);
-        var isOutsideScrollBlocked = this.getIsOutsideScrollBlocked(this);
+        var _this$props = this.props,
+            isAbsolutePositioningNeeded = _this$props.isAbsolutePositioningNeeded,
+            isOutsideScrollBlocked = _this$props.isOutsideScrollBlocked;
 
         if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
           (0, _intersectionObserver.addIntersectionObserver)(this.placeHolderElement, this.handleIntersectionObserver);
@@ -327,106 +292,15 @@ var Popup = function Popup(Component) {
     }, {
       key: "handleRemovingScrollBlock",
       value: function handleRemovingScrollBlock() {
-        var isAbsolutePositioningNeeded = this.getIsAbsolutePopup(this);
-        var isOutsideScrollBlocked = this.getIsOutsideScrollBlocked(this);
+        var _this$props2 = this.props,
+            isAbsolutePositioningNeeded = _this$props2.isAbsolutePositioningNeeded,
+            isOutsideScrollBlocked = _this$props2.isOutsideScrollBlocked;
 
         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() {
@@ -438,7 +312,7 @@ var Popup = function Popup(Component) {
           capture: true,
           passive: false
         });
-        document.addEventListener('scroll', this.handlePositionChange, {
+        document.addEventListener('scroll', this.handleDebouncedPositionChange, {
           capture: true,
           passive: false
         });
@@ -458,7 +332,7 @@ var Popup = function Popup(Component) {
           capture: true,
           passive: false
         });
-        document.removeEventListener('scroll', this.handlePositionChange, {
+        document.removeEventListener('scroll', this.handleDebouncedPositionChange, {
           capture: true,
           passive: false
         });
@@ -489,7 +363,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, true); // this.closePopupOnly(event);
+          this.handlePopupPosition(this.state.position); // this.closePopupOnly(event);
         }
       }
     }, {
@@ -505,23 +379,10 @@ var Popup = function Popup(Component) {
     }, {
       key: "handleIntersectionObserver",
       value: function handleIntersectionObserver(entry) {
-        if (entry.intersectionRatio === 0 && entry.isIntersecting === false) {
+        if (entry.intersectionRatio === 0) {
           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() {
@@ -534,12 +395,14 @@ var Popup = function Popup(Component) {
         var isArrow = popup.props.isArrow;
         var needPopupArrow = popup.needPopupArrow;
         return isArrow !== undefined ? isArrow : needPopupArrow;
-      } // getScrollDebounceTime(popup) {
-      //   const { scrollDebounceTime } = popup.props;
-      //   const { scrollDebounceTime: popupScrollDebounceTime } = popup;
-      //   return scrollDebounceTime !== undefined ? scrollDebounceTime : popupScrollDebounceTime;
-      // }
-
+      }
+    }, {
+      key: "getScrollDebounceTime",
+      value: function getScrollDebounceTime(popup) {
+        var scrollDebounceTime = popup.props.scrollDebounceTime;
+        var popupScrollDebounceTime = popup.scrollDebounceTime;
+        return scrollDebounceTime !== undefined ? scrollDebounceTime : popupScrollDebounceTime;
+      }
     }, {
       key: "getCloseOnScrollPopup",
       value: function getCloseOnScrollPopup(popup) {
@@ -554,13 +417,6 @@ 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) {
@@ -733,32 +589,17 @@ 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 isUpdatePosition = arguments.length > 1 ? arguments[1] : undefined;
+        var isResizeHandling = arguments.length > 1 ? arguments[1] : undefined;
 
-        // isUpdatePosition --->>> Window resize and dropBox resize and to update the position
-        var _ref5 = this.context || {},
-            direction = _ref5.direction;
+        // isResizeHandling --->>> Window resize and dropBox resize
+        var _ref3 = this.context || {},
+            direction = _ref3.direction;
 
         var placeHolderElement = this.placeHolderElement,
             dropElement = this.dropElement;
@@ -773,11 +614,9 @@ var Popup = function Popup(Component) {
         }
 
         if (!placeHolderElement && !dropElement) {
-          var isMobile = (0, _isMobilePopover["default"])(true);
           this.setState({
             isPopupOpen: true,
-            isPopupReady: true,
-            isMobile: isMobile
+            isPopupReady: true
           });
           return;
         }
@@ -797,32 +636,28 @@ 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;
-
-            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);
-              }
+            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
+              });
             }
           });
         };
 
-        if (isUpdatePosition) {
+        if (isResizeHandling) {
           setPosition();
         } else {
           this.defaultPosition = defaultPosition;
@@ -858,43 +693,37 @@ 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 _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(
+                  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(
                   //   placeHolderElement,
                   //   scrollContainer
                   // );
@@ -906,8 +735,7 @@ var Popup = function Popup(Component) {
                       positionsOffset: viewsOffset,
                       targetOffset: targetOffset,
                       popupOffset: popupOffset,
-                      isAbsolutePositioningNeeded: isAbsolute,
-                      isMobile: isMobile
+                      isAbsolutePositioningNeeded: isAbsolute
                     });
                   } // if (!isInViewPort && !isAbsolute) {
                   //   popup.setState({ isPopupOpen: false, isPopupReady: false });
@@ -932,34 +760,40 @@ var Popup = function Popup(Component) {
       key: "handleResize",
       value: function handleResize() {
         this.handleOpenPopupPositionChange();
-      } // 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);
-      //   }
-      // }
+      }
+    }, {
+      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');
+        }
 
+        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 _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 _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 _this$state2 = this.state,
-            isPopupReady = _this$state2.isPopupReady,
-            position = _this$state2.position;
+        var _this$state = this.state,
+            isPopupReady = _this$state.isPopupReady,
+            position = _this$state.position;
 
         if (isPopupReady && this.size && (oldHeight !== height || width !== oldWidth)) {
           this.handlePopupPosition(position, true);
@@ -980,13 +814,11 @@ var Popup = function Popup(Component) {
     }, {
       key: "render",
       value: function render() {
-        // 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, {
+        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, {
           openPopupOnly: this.openPopupOnly,
           closePopupOnly: this.closePopupOnly,
           togglePopup: this.togglePopup,

package/lib/Provider/LibraryContext.js

@@ -44,13 +44,15 @@ var LibraryContextProvider = function LibraryContextProvider(_ref) {
       direction = _ref.direction,
       coloredTagVariant = _ref.coloredTagVariant,
       hasTagColorInheritedToText = _ref.hasTagColorInheritedToText,
+      shouldStrikeThroughDisabledButton = _ref.shouldStrikeThroughDisabledButton,
       children = _ref.children;
 
   var _useState = (0, _react.useState)({
     isReducedMotion: isReducedMotion,
     direction: direction,
     coloredTagVariant: coloredTagVariant,
-    hasTagColorInheritedToText: hasTagColorInheritedToText
+    hasTagColorInheritedToText: hasTagColorInheritedToText,
+    shouldStrikeThroughDisabledButton: shouldStrikeThroughDisabledButton
   }),
       _useState2 = _slicedToArray(_useState, 2),
       value = _useState2[0],

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

@@ -5,8 +5,6 @@ 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"
@@ -14,14 +12,14 @@ exports[`ResponsiveDropBox rendering the defult props 1`] = `
     dot-ui-element="dropbox"
   >
     <div
-      class="subContainer shadow radius defaultPalette"
+      class="subContainer bottom_shadow radius defaultPalette"
       data-id="dropBox_subcontainer"
       data-selector-id="dropBox_subcontainer"
       data-test-id="dropBox_subcontainer"
       tabindex="-1"
     >
       <div
-        class="arrowPosition"
+        class="end"
         data-id="dropBox_arrow"
         data-selector-id="dropBox_arrow"
         data-test-id="dropBox_arrow"