@zohodesk/components 1.0.0-temp-199.5 → 1.0.0-temp-215

package/lib/MultiSelect/AdvancedMultiSelect.js

@@ -440,7 +440,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           isAbsolutePositioningNeeded = _this$props5.isAbsolutePositioningNeeded,
           positionsOffset = _this$props5.positionsOffset,
           targetOffset = _this$props5.targetOffset,
-          isRestrictScroll = _this$props5.isRestrictScroll;
+          isRestrictScroll = _this$props5.isRestrictScroll,
+          isFocus = _this$props5.isFocus;
       var _customProps$Suggesti = customProps.SuggestionsProps,
           SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti,
           _customProps$DropBoxP = customProps.DropBoxProps,
@@ -479,6 +480,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           isShowClear = _this$getIsShowClearI.isShowClearIcon;
 
       var isShowClearIcon = !isReadOnly && !isDisabled && isShowClear;
+      var isEditable = !(isReadOnly || isDisabled);
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : '', " ").concat(containerClass),
         "data-id": dataIdMultiSelectComp,
@@ -489,7 +491,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
         alignBox: "row",
-        className: "".concat(_MultiSelectModule["default"].container, " ").concat(_MultiSelectModule["default"][size], " ").concat(isActive && needBorder ? _MultiSelectModule["default"].active : '', " ").concat(needBorder ? _MultiSelectModule["default"].hasBorder : '', " ").concat(needBorder ? !isDisabled ? _MultiSelectModule["default"]["borderColor_".concat(borderColor)] : _MultiSelectModule["default"].borderColor_transparent : ''),
+        className: "".concat(_MultiSelectModule["default"].container, " ").concat(_MultiSelectModule["default"][size], " ").concat(isActive && needBorder || isEditable && isFocus && needBorder ? _MultiSelectModule["default"].active : '', " ").concat(needBorder ? _MultiSelectModule["default"].hasBorder : '', " ").concat(needBorder ? !isDisabled ? _MultiSelectModule["default"]["borderColor_".concat(borderColor)] : _MultiSelectModule["default"].borderColor_transparent : ''),
         eleRef: this.selectedOptionContainerRef,
         wrap: "wrap"
       }, /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {
@@ -611,9 +613,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
             role: 'option'
           },
           dataId: "".concat(dataIdMultiSelectComp, "_Options")
-        }, SuggestionsProps, {
-          needMultiLineText: true
-        })) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+        }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           isLoading: isFetchingOptions,
           options: options,
           searchString: searchStr,

package/lib/MultiSelect/MultiSelect.js

@@ -960,7 +960,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           setAriaId = _this$props14.setAriaId,
           isPopupOpen = _this$props14.isPopupOpen,
           ariaErrorId = _this$props14.ariaErrorId,
-          customProps = _this$props14.customProps;
+          customProps = _this$props14.customProps,
+          isFocus = _this$props14.isFocus;
       var _this$state8 = this.state,
           isActive = _this$state8.isActive,
           selectedOptions = _this$state8.selectedOptions,
@@ -979,12 +980,13 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           isShowClear = _this$getIsShowClearI.isShowClearIcon;
 
       var isShowClearIcon = !isReadOnly && !isDisabled && !disableAction && isShowClear;
+      var isEditable = !(isReadOnly || isDisabled || disableAction);
       var _customProps$TextBoxI = customProps.TextBoxIconProps,
           TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
         alignBox: "row",
-        className: "".concat(_MultiSelectModule["default"].container, " ").concat(_MultiSelectModule["default"][size], " ").concat(needBorder ? !disableAction ? _MultiSelectModule["default"]["borderColor_".concat(borderColor)] : _MultiSelectModule["default"].borderColor_transparent : '', " ").concat(isActive && needBorder || isResponsive ? _MultiSelectModule["default"].active : '', " ").concat(textBoxClass, " ").concat(needBorder ? _MultiSelectModule["default"].hasBorder : ''),
+        className: "".concat(_MultiSelectModule["default"].container, " ").concat(_MultiSelectModule["default"][size], " ").concat(needBorder ? !disableAction ? _MultiSelectModule["default"]["borderColor_".concat(borderColor)] : _MultiSelectModule["default"].borderColor_transparent : '', " ").concat(isActive && needBorder || isResponsive || isEditable && isFocus && needBorder ? _MultiSelectModule["default"].active : '', " ").concat(textBoxClass, " ").concat(needBorder ? _MultiSelectModule["default"].hasBorder : ''),
         eleRef: this.selectedOptionContainerRef,
         wrap: "wrap"
       }, /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {
@@ -1093,10 +1095,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           boxSize = _this$props15.boxSize,
           isLoading = _this$props15.isLoading,
           selectAllText = _this$props15.selectAllText,
-          needSelectAll = _this$props15.needSelectAll,
-          customProps = _this$props15.customProps;
-      var _customProps$suggesti = customProps.suggestionsProps,
-          suggestionsProps = _customProps$suggesti === void 0 ? {} : _customProps$suggesti;
+          needSelectAll = _this$props15.needSelectAll;
       var _this$state9 = this.state,
           selectedOptions = _this$state9.selectedOptions,
           searchStr = _this$state9.searchStr,
@@ -1173,7 +1172,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         eleRef: this.suggestionContainerRef
       }, isSearching ? /*#__PURE__*/_react["default"].createElement("div", {
         className: _MultiSelectModule["default"][palette]
-      }, searchText) : suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
+      }, searchText) : suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
         suggestions: suggestions,
         getRef: this.suggestionItemRef,
         hoverOption: hoverOption,
@@ -1186,7 +1185,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         a11y: {
           role: 'option'
         }
-      }, suggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+      }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
         isLoading: isFetchingOptions,
         options: options,
         searchString: searchStr,

package/lib/MultiSelect/Suggestions.js

@@ -83,8 +83,7 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
           avatarPalette = _this$props.avatarPalette,
           palette = _this$props.palette,
           htmlId = _this$props.htmlId,
-          a11y = _this$props.a11y,
-          needMultiLineText = _this$props.needMultiLineText;
+          a11y = _this$props.a11y;
       var ariaParentRole = a11y.ariaParentRole,
           ariaMultiselectable = a11y.ariaMultiselectable;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
@@ -144,8 +143,7 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
             size: listItemSize,
             avatarPalette: avatarPalette,
             palette: palette,
-            a11y: list_a11y,
-            needMultiLineText: needMultiLineText
+            a11y: list_a11y
           }));
         } else if (optionType === 'icon') {
           return /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], _extends({}, commonProps, {
@@ -165,8 +163,7 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
             iconSize: iconSize,
             size: listItemSize,
             palette: palette,
-            a11y: list_a11y,
-            needMultiLineText: needMultiLineText
+            a11y: list_a11y
           }));
         }
 
@@ -185,8 +182,7 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
           active: isActive,
           size: listItemSize,
           palette: palette,
-          a11y: list_a11y,
-          needMultiLineText: needMultiLineText
+          a11y: list_a11y
         }));
       })));
     }

package/lib/MultiSelect/props/defaultProps.js

@@ -45,8 +45,7 @@ var AdvancedGroupMultiSelect_defaultProps = {
   needEffect: true,
   palette: 'default',
   isLoading: false,
-  dataSelectorId: 'advancedGroupMultiSelect',
-  customProps: {}
+  dataSelectorId: 'advancedGroupMultiSelect'
 };
 exports.AdvancedGroupMultiSelect_defaultProps = AdvancedGroupMultiSelect_defaultProps;
 var AdvancedMultiSelect_defaultProps = {
@@ -168,8 +167,8 @@ var MultiSelectWithAvatar_defaultProps = {
   isLoading: false,
   dataSelectorId: 'multiSelectWithAvatar',
   keepSelectedOptions: false,
-  needResponsive: true,
-  customProps: {}
+  customProps: {},
+  needResponsive: true
 };
 exports.MultiSelectWithAvatar_defaultProps = MultiSelectWithAvatar_defaultProps;
 var SelectedOptions_defaultProps = {
@@ -178,7 +177,6 @@ var SelectedOptions_defaultProps = {
 };
 exports.SelectedOptions_defaultProps = SelectedOptions_defaultProps;
 var Suggestions_defaultProps = {
-  a11y: {},
-  needMultiLineText: false
+  a11y: {}
 };
 exports.Suggestions_defaultProps = Suggestions_defaultProps;

package/lib/MultiSelect/props/propTypes.js

@@ -129,9 +129,9 @@ var MultiSelect_propTypes = {
   setAriaId: _propTypes["default"].string,
   ariaErrorId: _propTypes["default"].string,
   customProps: _propTypes["default"].shape({
-    TextBoxIconProps: _propTypes["default"].object,
-    suggestionsProps: _propTypes["default"].object
-  })
+    TextBoxIconProps: _propTypes["default"].object
+  }),
+  isFocus: _propTypes["default"].bool
 };
 exports.MultiSelect_propTypes = MultiSelect_propTypes;
 var MultiSelectHeader_propTypes = {
@@ -201,8 +201,7 @@ var Suggestions_propTypes = {
     logo: _propTypes["default"].string,
     optionType: _propTypes["default"].string,
     listItemProps: _propTypes["default"].object
-  })),
-  needMultiLineText: _propTypes["default"].bool
+  }))
 };
 exports.Suggestions_propTypes = Suggestions_propTypes;
 var AdvancedGroupMultiSelect_propTypes = (_AdvancedGroupMultiSe = {
@@ -273,7 +272,7 @@ var AdvancedGroupMultiSelect_propTypes = (_AdvancedGroupMultiSe = {
   needToCloseOnSelect: _propTypes["default"].func,
   searchStr: _propTypes["default"].string,
   children: _propTypes["default"].node
-}, _defineProperty(_AdvancedGroupMultiSe, "dataSelectorId", _propTypes["default"].string), _defineProperty(_AdvancedGroupMultiSe, "customProps", _propTypes["default"].string), _AdvancedGroupMultiSe);
+}, _defineProperty(_AdvancedGroupMultiSe, "dataSelectorId", _propTypes["default"].string), _defineProperty(_AdvancedGroupMultiSe, "isFocus", _propTypes["default"].bool), _AdvancedGroupMultiSe);
 exports.AdvancedGroupMultiSelect_propTypes = AdvancedGroupMultiSelect_propTypes;
 
 var AdvancedMultiSelect_propTypes = _objectSpread(_objectSpread({}, MultiSelect_propTypes), {}, {
@@ -349,7 +348,8 @@ var AdvancedMultiSelect_propTypes = _objectSpread(_objectSpread({}, MultiSelect_
   }),
   isLoading: _propTypes["default"].bool,
   dataSelectorId: _propTypes["default"].string,
-  customClass: _propTypes["default"].object
+  customClass: _propTypes["default"].object,
+  isFocus: _propTypes["default"].bool
 });
 
 exports.AdvancedMultiSelect_propTypes = AdvancedMultiSelect_propTypes;

package/lib/Popup/Popup.js

@@ -23,6 +23,8 @@ var _ResizeObserver = _interopRequireDefault(require("@zohodesk/virtualizer/lib/
 
 var _intersectionObserver = require("./intersectionObserver");
 
+var _DropBoxPositionMapping = require("../DropBox/DropBoxPositionMapping.js");
+
 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); }
@@ -158,7 +160,15 @@ var Popup = function Popup(Component) {
       _this.preventKeyboardScroll = _this.preventKeyboardScroll.bind(_assertThisInitialized(_this));
       _this.addScrollBlockListeners = _this.addScrollBlockListeners.bind(_assertThisInitialized(_this));
       _this.removeScrollBlockListeners = _this.removeScrollBlockListeners.bind(_assertThisInitialized(_this));
+      _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.positionRef = /*#__PURE__*/_react["default"].createRef();
       _this.popupObserver = new _ResizeObserver["default"](_this.handlePopupResize); //dropBoxSize
 
       _this.size = null;
@@ -216,10 +226,7 @@ var Popup = function Popup(Component) {
             oldStateOpen = _ref2$isPopupReady === void 0 ? false : _ref2$isPopupReady;
 
         var dropElement = this.dropElement;
-        var _this$props = this.props,
-            propResizeHandling = _this$props.needResizeHandling,
-            isAbsolutePositioningNeeded = _this$props.isAbsolutePositioningNeeded,
-            isOutsideScrollBlocked = _this$props.isOutsideScrollBlocked;
+        var propResizeHandling = this.props.needResizeHandling;
 
         if (oldStateOpen !== isPopupReady) {
           if (isPopupReady && dropElement && (propResizeHandling !== undefined ? propResizeHandling : needResizeHandling)) {
@@ -229,14 +236,12 @@ var Popup = function Popup(Component) {
             this.popupObserver.disconnect();
           }
 
-          if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
-            if (isPopupReady) {
-              (0, _intersectionObserver.addIntersectionObserver)(this.placeHolderElement, this.handleIntersectionObserver);
-              this.addScrollBlockListeners();
-            } else {
-              (0, _intersectionObserver.removeIntersectionObserver)(this.placeHolderElement, this.handleIntersectionObserver);
-              this.removeScrollBlockListeners();
-            }
+          if (isPopupReady) {
+            this.handleAddingScrollBlock();
+            this.handleAddingScrollToUpdatePosition();
+          } else {
+            this.handleRemovingScrollBlock();
+            this.handleRemovingScrollToUpdatePosition();
           }
         }
       }
@@ -258,8 +263,7 @@ var Popup = function Popup(Component) {
 
           return res;
         }, popups);
-        (0, _intersectionObserver.removeIntersectionObserver)(this.placeHolderElement, this.handleIntersectionObserver);
-        this.removeScrollBlockListeners();
+        this.handleRemovingScrollBlock();
         var noPopups = true;
 
         for (var i in popups) {
@@ -283,6 +287,113 @@ var Popup = function Popup(Component) {
           document.removeEventListener('focus', this.handleDocumentFocus, true);
         }
       }
+    }, {
+      key: "handleAddingScrollBlock",
+      value: function handleAddingScrollBlock() {
+        var _this$props = this.props,
+            isAbsolutePositioningNeeded = _this$props.isAbsolutePositioningNeeded,
+            fixedPopupScrollBehavior = _this$props.fixedPopupScrollBehavior;
+
+        if (fixedPopupScrollBehavior === 'block' && !isAbsolutePositioningNeeded) {
+          (0, _intersectionObserver.addIntersectionObserver)(this.placeHolderElement, this.handleIntersectionObserver);
+          this.addScrollBlockListeners();
+        }
+      }
+    }, {
+      key: "handleRemovingScrollBlock",
+      value: function handleRemovingScrollBlock() {
+        var _this$props2 = this.props,
+            isAbsolutePositioningNeeded = _this$props2.isAbsolutePositioningNeeded,
+            fixedPopupScrollBehavior = _this$props2.fixedPopupScrollBehavior;
+
+        if (fixedPopupScrollBehavior === 'block' && !isAbsolutePositioningNeeded) {
+          (0, _intersectionObserver.removeIntersectionObserver)(this.placeHolderElement, this.handleIntersectionObserver);
+          this.removeScrollBlockListeners();
+        }
+      }
+    }, {
+      key: "handleAddingScrollToUpdatePosition",
+      value: function handleAddingScrollToUpdatePosition() {
+        var _this$props3 = this.props,
+            isAbsolutePositioningNeeded = _this$props3.isAbsolutePositioningNeeded,
+            fixedPopupScrollBehavior = _this$props3.fixedPopupScrollBehavior;
+
+        if (fixedPopupScrollBehavior === 'scroll' && !isAbsolutePositioningNeeded) {
+          (0, _intersectionObserver.addIntersectionObserver)(this.placeHolderElement, this.updateVisibilityOnIntersection);
+          document.addEventListener('scroll', this.updatePositionOnScroll, {
+            capture: true,
+            passive: false
+          });
+        }
+      }
+    }, {
+      key: "handleRemovingScrollToUpdatePosition",
+      value: function handleRemovingScrollToUpdatePosition() {
+        var _this$props4 = this.props,
+            isAbsolutePositioningNeeded = _this$props4.isAbsolutePositioningNeeded,
+            fixedPopupScrollBehavior = _this$props4.fixedPopupScrollBehavior;
+
+        if (fixedPopupScrollBehavior === 'scroll' && !isAbsolutePositioningNeeded) {
+          (0, _intersectionObserver.removeIntersectionObserver)(this.placeHolderElement, this.updateVisibilityOnIntersection);
+          document.removeEventListener('scroll', this.updatePositionOnScroll, {
+            capture: true,
+            passive: false
+          });
+        }
+      }
+    }, {
+      key: "setContainerDynamicPositioning",
+      value: function setContainerDynamicPositioning() {
+        var _this3 = this;
+
+        var placeHolderElement = this.placeHolderElement,
+            dropElement = this.dropElement,
+            defaultPosition = this.defaultPosition;
+
+        if (!dropElement) {
+          return;
+        }
+
+        var needArrow = this.getNeedArrow(this);
+        var isAbsolute = this.getIsAbsolutePopup(this);
+        var customOrder = this.getCustomPositionOrder(this);
+        var styleToApply = {
+          top: '',
+          left: '',
+          right: '',
+          bottom: ''
+        };
+        requestAnimationFrame(function () {
+          var betterPosition = _viewPort["default"].betterView(dropElement, placeHolderElement, defaultPosition, '', {
+            needArrow: needArrow,
+            isAbsolute: isAbsolute,
+            customOrder: customOrder
+          });
+
+          var _ref3 = betterPosition || {},
+              view = _ref3.view,
+              viewsOffset = _ref3.viewsOffset;
+
+          Object.assign(styleToApply, viewsOffset[view]);
+          Object.assign(dropElement.style, {
+            inset: "".concat(styleToApply.top !== '' ? "".concat(styleToApply.top, "px") : 'auto', " ").concat(styleToApply.right !== '' ? "".concat(styleToApply.right, "px") : 'auto', " ").concat(styleToApply.bottom !== '' ? "".concat(styleToApply.bottom, "px") : 'auto', " ").concat(styleToApply.left !== '' ? "".concat(styleToApply.left, "px") : 'auto')
+          });
+
+          if (_this3.positionRef.current !== view) {
+            dropElement.setAttribute('data-position', "".concat(view));
+            dropElement.setAttribute('data-direction', "".concat(_DropBoxPositionMapping.positionMapping[view].direction));
+          }
+        });
+      }
+    }, {
+      key: "updatePositionOnScroll",
+      value: function updatePositionOnScroll(e) {
+        if (e.target.contains(this.placeHolderElement)) {
+          // Set position for the dropbox
+          this.setContainerDynamicPositioning();
+          return;
+        }
+      }
     }, {
       key: "addScrollBlockListeners",
       value: function addScrollBlockListeners() {
@@ -365,6 +476,19 @@ var Popup = function Popup(Component) {
           this.closePopupOnly();
         }
       }
+    }, {
+      key: "updateVisibilityOnIntersection",
+      value: function updateVisibilityOnIntersection(entry) {
+        var dropElement = this.dropElement;
+
+        if (entry.intersectionRatio === 0 && entry.isIntersecting === false) {
+          dropElement.setAttribute('data-visible', 'hidden');
+        }
+
+        if (entry.isIntersecting === true) {
+          dropElement.setAttribute('data-visible', 'visible');
+        }
+      }
     }, {
       key: "getGroup",
       value: function getGroup() {
@@ -410,7 +534,7 @@ var Popup = function Popup(Component) {
     }, {
       key: "togglePopup",
       value: function togglePopup(e, defaultPosition) {
-        var _this3 = this;
+        var _this4 = this;
 
         var group = this.getGroup();
         this.removeClose(e);
@@ -419,7 +543,7 @@ var Popup = function Popup(Component) {
         lastOpenedGroup = !isPopupOpen && lastOpenedGroup.indexOf(group) === -1 ? [group].concat(_toConsumableArray(lastOpenedGroup)) : lastOpenedGroup;
         isPopupOpen && lastOpenedGroup.splice(0, 1);
         groupPopups.forEach(function (popup) {
-          if (popup !== _this3 && popup.state.isPopupOpen) {
+          if (popup !== _this4 && popup.state.isPopupOpen) {
             popup.setState({
               isPopupOpen: false,
               isPopupReady: false
@@ -574,17 +698,20 @@ var Popup = function Popup(Component) {
     }, {
       key: "handlePopupPosition",
       value: function handlePopupPosition() {
-        var _this4 = this;
+        var _this5 = this;
 
         var defaultPosition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'bottomCenter';
         var isResizeHandling = arguments.length > 1 ? arguments[1] : undefined;
 
         // isResizeHandling --->>> Window resize and dropBox resize
-        var _ref3 = this.context || {},
-            direction = _ref3.direction;
+        var _ref4 = this.context || {},
+            direction = _ref4.direction;
 
         var placeHolderElement = this.placeHolderElement,
             dropElement = this.dropElement;
+        var _this$props5 = this.props,
+            fixedPopupScrollBehavior = _this$props5.fixedPopupScrollBehavior,
+            isAbsolutePositioningNeeded = _this$props5.isAbsolutePositioningNeeded;
         var needArrow = this.getNeedArrow(this);
         var isAbsolute = this.getIsAbsolutePopup(this);
         var customOrder = this.getCustomPositionOrder(this);
@@ -605,36 +732,47 @@ 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 = _this5.placeHolderElement,
+                dropElement = _this5.dropElement;
+            var _this5$state = _this5.state,
+                position = _this5$state.position,
+                isPopupReady = _this5$state.isPopupReady;
             var scrollContainer = placeHolderElement.closest('[data-scroll=true]') || document.body;
 
-            var betterPosition = _viewPort["default"].betterView(dropElement, placeHolderElement, defaultPosition, scrollContainer, {
-              needArrow: needArrow,
-              isAbsolute: isAbsolute,
-              customOrder: customOrder
-            });
+            if (fixedPopupScrollBehavior === 'scroll' && !isAbsolutePositioningNeeded) {
+              if (!isPopupReady) {
+                _this5.setState({
+                  isPopupReady: true,
+                  isAbsolutePositioningNeeded: 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
+              _this5.setContainerDynamicPositioning();
+            } else {
+              var betterPosition = _viewPort["default"].betterView(dropElement, placeHolderElement, defaultPosition, scrollContainer, {
+                needArrow: needArrow,
+                isAbsolute: isAbsolute,
+                customOrder: customOrder
               });
+
+              var _ref5 = betterPosition || {},
+                  view = _ref5.view,
+                  views = _ref5.views,
+                  viewsOffset = _ref5.viewsOffset,
+                  targetOffset = _ref5.targetOffset,
+                  popupOffset = _ref5.popupOffset;
+
+              if (position !== view || !isPopupReady) {
+                _this5.setState({
+                  isPopupReady: true,
+                  position: view,
+                  positions: views,
+                  positionsOffset: viewsOffset,
+                  targetOffset: targetOffset,
+                  popupOffset: popupOffset,
+                  isAbsolutePositioningNeeded: isAbsolute
+                });
+              }
             }
           });
         };
@@ -652,7 +790,7 @@ var Popup = function Popup(Component) {
     }, {
       key: "handleOpenPopupPositionChange",
       value: function handleOpenPopupPositionChange() {
-        var _this5 = this;
+        var _this6 = this;
 
         Object.keys(popups).forEach(function (groupName) {
           var groupPopups = popups[groupName] || [];
@@ -669,11 +807,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 = _this6.getNeedArrow(popup);
 
-                  var isAbsolute = _this5.getIsAbsolutePopup(popup);
+                  var isAbsolute = _this6.getIsAbsolutePopup(popup);
 
-                  var customOrder = _this5.getCustomPositionOrder(popup);
+                  var customOrder = _this6.getCustomPositionOrder(popup);
 
                   var betterPosition = _viewPort["default"].betterView(dropElement, placeHolderElement, defaultPosition, scrollContainer, {
                     needArrow: needArrow,
@@ -681,29 +819,29 @@ var Popup = function Popup(Component) {
                     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] || {},
+                  var _ref6 = betterPosition || {},
+                      view = _ref6.view,
+                      views = _ref6.views,
+                      _ref6$viewsOffset = _ref6.viewsOffset,
+                      viewsOffset = _ref6$viewsOffset === void 0 ? {} : _ref6$viewsOffset,
+                      targetOffset = _ref6.targetOffset,
+                      popupOffset = _ref6.popupOffset;
+
+                  var _ref7 = positionsOffset[position] || {},
                       _ref7$left = _ref7.left,
-                      left = _ref7$left === void 0 ? '' : _ref7$left,
+                      oldLeft = _ref7$left === void 0 ? '' : _ref7$left,
                       _ref7$top = _ref7.top,
-                      top = _ref7$top === void 0 ? '' : _ref7$top,
+                      oldTop = _ref7$top === void 0 ? '' : _ref7$top,
                       _ref7$bottom = _ref7.bottom,
-                      bottom = _ref7$bottom === void 0 ? '' : _ref7$bottom;
+                      oldBottom = _ref7$bottom === void 0 ? '' : _ref7$bottom;
+
+                  var _ref8 = viewsOffset[view] || {},
+                      _ref8$left = _ref8.left,
+                      left = _ref8$left === void 0 ? '' : _ref8$left,
+                      _ref8$top = _ref8.top,
+                      top = _ref8$top === void 0 ? '' : _ref8$top,
+                      _ref8$bottom = _ref8.bottom,
+                      bottom = _ref8$bottom === void 0 ? '' : _ref8$bottom;
 
                   var changeState = isAbsolute ? position !== view : oldLeft !== left || oldTop !== top || oldBottom !== bottom; // let isInViewPort = viewPort.isInViewPort(
                   //   placeHolderElement,
@@ -767,11 +905,11 @@ var Popup = function Popup(Component) {
         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 _ref9 = this.size || {},
+            _ref9$height = _ref9.height,
+            oldHeight = _ref9$height === void 0 ? 0 : _ref9$height,
+            _ref9$width = _ref9.width,
+            oldWidth = _ref9$width === void 0 ? 0 : _ref9$width;
 
         var _this$state = this.state,
             isPopupReady = _this$state.isPopupReady,