@zohodesk/components 1.0.0-temp-236 → 1.0.0-temp-239

package/es/Popup/Popup.js

@@ -0,0 +1,1072 @@
+/**** Libraries ****/
+import React from 'react';
+import hoistStatics from 'hoist-non-react-statics';
+import { PopupPropTypes, ContextTypes } from "./props/propTypes";
+/**** Methods ****/
+
+import { debounce, isDescendant, isTextSelected, cancelBubblingEffect, DUMMY_OBJECT } from "../utils/Common.js";
+import viewPort from "./viewPort";
+import { absolutePositionMapping, rtlAbsolutePositionMapping, rtlFixedPositionMapping } from "./PositionMapping.js";
+import ResizeObserver from '@zohodesk/virtualizer/lib/commons/ResizeObserver.js';
+import { addIntersectionObserver, removeIntersectionObserver } from "./intersectionObserver";
+import { positionMapping } from "../DropBox/DropBoxPositionMapping.js";
+import isMobilePopover from "../DropBox/utils/isMobilePopover.js";
+import selectn from 'selectn';
+import Registry from "./Registry.js";
+
+global.closeGroupPopups = function (groupName) {
+  const groupPopups = Registry.popups[groupName] || [];
+  groupPopups.forEach(popup => {
+    popup.state.isPopupOpen && popup.setState({
+      isPopupOpen: false,
+      isPopupReady: false
+    });
+  });
+};
+
+const defaultState = {
+  position: 'bottomCenter',
+  height: '0px',
+  positions: {},
+  //{bottomCenter: true, bottomLeft: false, ...}
+  positionsOffset: {},
+  //{bottomCenter: {left: ‘’,top: ‘’ }, .....}
+  targetOffset: {},
+  //{height: ‘’, width: ‘’,}
+  popupOffset: {},
+  //{height: ‘’, width: ‘’,}
+  isAbsolutePositioningNeeded: true
+};
+const SCROLL_BLOCK_EVENTS = Object.freeze([{
+  name: 'wheel',
+  handlerName: 'handleBlockScroll',
+  options: {
+    capture: true,
+    passive: false
+  }
+}, {
+  name: 'touchmove',
+  handlerName: 'handleBlockScroll',
+  options: {
+    capture: true,
+    passive: false
+  }
+}, {
+  name: 'scroll',
+  handlerName: 'handlePositionChange',
+  options: {
+    capture: true,
+    passive: false
+  }
+}, {
+  name: 'keydown',
+  handlerName: 'preventKeyboardScroll',
+  options: {
+    capture: true,
+    passive: false
+  }
+}]);
+const IFRAME_SCROLL_BLOCK_EVENTS = Object.freeze(SCROLL_BLOCK_EVENTS.filter(event => event.name !== 'keydown'));
+const CLICK_EVENTS = Object.freeze([{
+  name: 'click',
+  handlerName: 'documentClickHandler',
+  options: {
+    capture: false,
+    passive: false
+  }
+}, {
+  name: 'click',
+  handlerName: 'documentClickHandler1',
+  options: {
+    capture: true,
+    passive: false
+  }
+}]);
+/* eslint-disable react/no-deprecated */
+
+/* eslint-disable react/prop-types */
+
+const Popup = function (Component) {
+  let group = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'global';
+  let needResizeHandling = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  let {
+    isAbsolutePositioningNeeded: isAbsolutePopup = true,
+    isArrow: needPopupArrow = false,
+    customOrder: customPositionOrder = [],
+    scrollDebounceTime: popupScrollDebounceTime = 0,
+    closeOnScroll: closeOnScrollPopup = false,
+    isOutsideScrollBlocked: isOutsideScrollBlock = false
+  } = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+
+  class Popup extends React.Component {
+    constructor(props) {
+      super(props);
+      this.state = {
+        isPopupOpen: props.isPopupOpen || false,
+        position: 'bottomCenter',
+        height: '0px',
+        isPopupReady: props.isPopupOpen || false,
+        positions: {},
+        //{bottomCenter: true, bottomLeft: false, ...}
+        positionsOffset: {},
+        //{bottomCenter: {left: ‘’,top: ‘’ }, .....}
+        targetOffset: {},
+        //{height: ‘’, width: ‘’,}
+        popupOffset: {},
+        //{height: ‘’, width: ‘’,}
+        isAbsolutePositioningNeeded: true,
+        isMobile: false
+      };
+      this.togglePopup = this.togglePopup.bind(this);
+      this.documentClickHandler = this.documentClickHandler.bind(this);
+      this.documentClickHandler1 = this.documentClickHandler1.bind(this);
+      this.removeClose = this.removeClose.bind(this);
+      this.documentKeyupHandler = this.documentKeyupHandler.bind(this);
+      this.openPopupOnly = this.openPopupOnly.bind(this);
+      this.closePopupOnly = this.closePopupOnly.bind(this);
+      this.getTargetRef = this.getTargetRef.bind(this);
+      this.getContainerRef = this.getContainerRef.bind(this);
+      this.handlePopupPosition = this.handlePopupPosition.bind(this);
+      this.handleResize = debounce(this.handleResize.bind(this), 300);
+      this.handlePopupResize = this.handlePopupResize.bind(this);
+      this.getIsAbsolutePopup = this.getIsAbsolutePopup.bind(this);
+      this.getIsOutsideScrollBlocked = this.getIsOutsideScrollBlocked.bind(this);
+      this.getNeedArrow = this.getNeedArrow.bind(this);
+      this.getCustomPositionOrder = this.getCustomPositionOrder.bind(this);
+      this.handleOpenPopupPositionChange = this.handleOpenPopupPositionChange.bind(this);
+      this.getScrollDebounceTime = this.getScrollDebounceTime.bind(this);
+      this.getCloseOnScrollPopup = this.getCloseOnScrollPopup.bind(this);
+      this.handleCloseLastOpenedGroup = this.handleCloseLastOpenedGroup.bind(this);
+      this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
+      this.handleDocumentFocus = this.handleDocumentFocus.bind(this);
+      this.handleGetNeedPrevent = this.handleGetNeedPrevent.bind(this);
+      this.handleBlockScroll = this.handleBlockScroll.bind(this);
+      this.handlePositionChange = this.handlePositionChange.bind(this);
+      this.preventKeyboardScroll = this.preventKeyboardScroll.bind(this);
+      this.updateListeners = this.updateListeners.bind(this);
+      this.addScrollBlockListeners = this.addScrollBlockListeners.bind(this);
+      this.removeScrollBlockListeners = this.removeScrollBlockListeners.bind(this);
+      this.addScrollToUpdateListeners = this.addScrollToUpdateListeners.bind(this);
+      this.removeScrollToUpdateListeners = this.removeScrollToUpdateListeners.bind(this);
+      this.handleAddingScrollBlock = this.handleAddingScrollBlock.bind(this);
+      this.handleRemovingScrollBlock = this.handleRemovingScrollBlock.bind(this);
+      this.handleIntersectionObserver = this.handleIntersectionObserver.bind(this);
+      this.updateVisibilityOnIntersection = this.updateVisibilityOnIntersection.bind(this);
+      this.handleAddingScrollToUpdatePosition = this.handleAddingScrollToUpdatePosition.bind(this);
+      this.handleRemovingScrollToUpdatePosition = this.handleRemovingScrollToUpdatePosition.bind(this);
+      this.setContainerDynamicPositioning = this.setContainerDynamicPositioning.bind(this);
+      this.updatePopupState = this.updatePopupState.bind(this);
+      this.handleScrollAndBlockEvents = this.handleScrollAndBlockEvents.bind(this);
+      this.handleIframeEventListeners = this.handleIframeEventListeners.bind(this);
+      this.handleDropElementStyleUpdate = this.handleDropElementStyleUpdate.bind(this);
+      this.waitForDropElement = this.waitForDropElement.bind(this);
+      this.positionRef = /*#__PURE__*/React.createRef();
+      this.rootElement = Registry.getRootElement();
+      this.popupObserver = new ResizeObserver(this.handlePopupResize);
+      this.cancelRaf = this.cancelRaf.bind(this);
+      this.cancelPendingAnimationFrames = this.cancelPendingAnimationFrames.bind(this);
+      this.setPositionRafId = null;
+      this.resizePositionRafId = null; //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.updatePositionOnScroll = scrollDebounceTime > 0 ? debounce(this.updatePositionOnScroll.bind(this), scrollDebounceTime) : this.updatePositionOnScroll.bind(this); // this.handleScroll = debounce(this.handleScroll.bind(this), scrollDebounceTime);
+    }
+
+    componentDidMount() {
+      const group = this.getGroup();
+      const groupPopups = Registry.popups[group] || [];
+      groupPopups.push(this);
+      Registry.popups[group] = groupPopups;
+
+      if (Object.keys(Registry.popups).length === 1 && groupPopups.length === 1 && Registry.listenerPopupRef === undefined) {
+        Registry.listenerPopupRef = this;
+        Registry.listenerPopupRef.updateListeners(true, CLICK_EVENTS, document);
+        document.addEventListener('keyup', Registry.listenerPopupRef.documentKeyupHandler, false); // document.addEventListener('scroll', Registry.listenerPopupRef.handleScroll, true);
+
+        window.addEventListener('resize', Registry.listenerPopupRef.handleResize);
+        document.addEventListener('mousedown', Registry.listenerPopupRef.handleDocumentMouseDown, true);
+        document.addEventListener('focus', Registry.listenerPopupRef.handleDocumentFocus, true);
+      }
+    }
+
+    UNSAFE_componentWillReceiveProps(nextProps) {
+      const {
+        isPopupOpen
+      } = this.state;
+
+      if (typeof nextProps.isPopupOpen !== 'undefined' && nextProps.isPopupOpen !== isPopupOpen) {
+        this.setState({
+          isPopupOpen: nextProps.isPopupOpen,
+          isPopupReady: nextProps.isPopupOpen
+        });
+      }
+    }
+
+    handleScrollAndBlockEvents(shouldAdd) {
+      if (shouldAdd) {
+        this.handleAddingScrollBlock();
+        this.handleAddingScrollToUpdatePosition();
+      } else {
+        this.handleRemovingScrollBlock();
+        this.handleRemovingScrollToUpdatePosition();
+      }
+    }
+
+    handleIframeEventListeners(shouldAdd, eventList) {
+      this.rootElement.querySelectorAll('iframe').forEach(frame => {
+        const frameDocument = frame.contentDocument;
+
+        if (frameDocument) {
+          this.updateListeners(shouldAdd, eventList, frameDocument);
+        }
+      });
+    }
+
+    componentDidUpdate(prevProps, prevState) {
+      const {
+        isPopupReady,
+        isMobile
+      } = this.state;
+      const {
+        isPopupReady: oldStateOpen = false,
+        isMobile: oldIsMobileState
+      } = prevState || {};
+      const {
+        dropElement
+      } = this;
+      const {
+        needResizeHandling: propResizeHandling
+      } = this.props;
+
+      if (oldStateOpen !== isPopupReady) {
+        if (isPopupReady && dropElement && (propResizeHandling !== undefined ? propResizeHandling : needResizeHandling)) {
+          this.popupObserver.replaceObservationElement(dropElement);
+        } else if (!isPopupReady) {
+          this.size = null;
+          this.popupObserver.disconnect();
+        }
+      }
+
+      if (oldStateOpen !== isPopupReady && !isMobile || oldIsMobileState !== isMobile) {
+        const shouldAdd = isPopupReady && !isMobile;
+        this.handleScrollAndBlockEvents(shouldAdd);
+        this.handleIframeEventListeners(shouldAdd, CLICK_EVENTS);
+      }
+    }
+
+    cancelRaf(refName) {
+      const id = this[refName];
+
+      if (id) {
+        cancelAnimationFrame(id);
+        this[refName] = null;
+      }
+    }
+
+    cancelPendingAnimationFrames() {
+      this.cancelRaf('setPositionRafId');
+      this.cancelRaf('resizePositionRafId');
+    }
+
+    componentWillUnmount() {
+      const group = this.getGroup();
+      Registry.popups = Object.keys(Registry.popups).reduce((res, groupName) => {
+        if (groupName === group) {
+          const groupPopups = Registry.popups[group];
+          const newGroupPopups = groupPopups.filter(popup => popup !== this);
+          newGroupPopups.length === 0 && Registry.lastOpenedGroup.indexOf(group) >= 0 && Registry.lastOpenedGroup.splice(Registry.lastOpenedGroup.indexOf(group), 1);
+          res[group] = newGroupPopups;
+        }
+
+        return res;
+      }, Registry.popups);
+      this.handleRemovingScrollBlock();
+      this.handleRemovingScrollToUpdatePosition();
+      this.handleIframeEventListeners(false, CLICK_EVENTS);
+      let noPopups = true;
+
+      for (const i in Registry.popups) {
+        if (Registry.popups[i].length >= 1) {
+          noPopups = false;
+          break;
+        }
+      }
+
+      if (this.popupObserver) {
+        this.popupObserver.disconnect();
+      }
+
+      if (noPopups && Registry.listenerPopupRef !== undefined) {
+        Registry.listenerPopupRef.updateListeners(false, CLICK_EVENTS, document);
+        document.removeEventListener('keyup', Registry.listenerPopupRef.documentKeyupHandler); // document.removeEventListener('scroll', Registry.listenerPopupRef.handleScroll);
+
+        window.removeEventListener('resize', Registry.listenerPopupRef.handleResize);
+        document.removeEventListener('mousedown', Registry.listenerPopupRef.handleDocumentMouseDown, true);
+        document.removeEventListener('focus', Registry.listenerPopupRef.handleDocumentFocus, true);
+        Registry.listenerPopupRef = undefined;
+      }
+
+      this.cancelPendingAnimationFrames();
+    }
+
+    handleAddingScrollBlock() {
+      const isAbsolutePositioningNeeded = this.getIsAbsolutePopup(this);
+      const isOutsideScrollBlocked = this.getIsOutsideScrollBlocked(this);
+
+      if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
+        addIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
+        this.addScrollBlockListeners();
+      }
+    }
+
+    handleRemovingScrollBlock() {
+      const isAbsolutePositioningNeeded = this.getIsAbsolutePopup(this);
+      const isOutsideScrollBlocked = this.getIsOutsideScrollBlocked(this);
+
+      if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
+        removeIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
+        this.removeScrollBlockListeners();
+      }
+    }
+
+    handleAddingScrollToUpdatePosition() {
+      const isAbsolutePositioningNeeded = this.getIsAbsolutePopup(this);
+      const isOutsideScrollBlocked = this.getIsOutsideScrollBlocked(this);
+
+      if (!isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
+        addIntersectionObserver(this.placeHolderElement, this.updateVisibilityOnIntersection);
+        const shouldAddScrollToUpdatePositionListeners = Registry.getOpenedScrollableFixedPopups().length === 1 && Registry.scrollableListenerPopupRef === undefined;
+
+        if (shouldAddScrollToUpdatePositionListeners) {
+          Registry.scrollableListenerPopupRef = this;
+          Registry.scrollableListenerPopupRef.addScrollToUpdateListeners();
+        }
+      }
+    }
+
+    handleRemovingScrollToUpdatePosition() {
+      const isAbsolutePositioningNeeded = this.getIsAbsolutePopup(this);
+      const isOutsideScrollBlocked = this.getIsOutsideScrollBlocked(this);
+
+      if (!isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
+        removeIntersectionObserver(this.placeHolderElement, this.updateVisibilityOnIntersection);
+        const shouldRemoveScrollToUpdatePositionListeners = Registry.getOpenedScrollableFixedPopups().length === 0 && Registry.scrollableListenerPopupRef !== undefined;
+
+        if (shouldRemoveScrollToUpdatePositionListeners) {
+          Registry.scrollableListenerPopupRef.removeScrollToUpdateListeners();
+          Registry.scrollableListenerPopupRef = undefined;
+        }
+      }
+    }
+
+    handleDropElementStyleUpdate(_ref) {
+      let {
+        top = '',
+        left = '',
+        bottom = '',
+        right = ''
+      } = _ref;
+      const {
+        dropElement
+      } = this;
+      Object.assign(dropElement.style, {
+        top: top ? `${top}px` : '',
+        left: left ? `${left}px` : '',
+        right: right ? `${right}px` : '',
+        bottom: bottom ? `${bottom}px` : ''
+      });
+    }
+
+    waitForDropElement(callback) {
+      let maxRetries = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
+      let delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 100;
+
+      if (this.dropElement) {
+        callback();
+        return;
+      }
+
+      if (maxRetries <= 0) {
+        console.warn('Popup: dropElement not available after maximum retries');
+        return;
+      }
+
+      setTimeout(() => {
+        this.waitForDropElement(callback, maxRetries - 1, Math.min(delay * 1.5, 1000));
+      }, delay);
+    }
+
+    setContainerDynamicPositioning(betterPosition, needArrow) {
+      const {
+        dropElement
+      } = this;
+      const {
+        isMobile
+      } = this.state;
+
+      if (!dropElement) {
+        // Wait for dropElement to be available (in case it's being loaded from a chunk)
+        this.waitForDropElement(() => {
+          const {
+            view,
+            viewsOffset
+          } = betterPosition || DUMMY_OBJECT;
+          const styleToApply = selectn(`${view}`, viewsOffset);
+
+          if (isMobile) {
+            this.handleDropElementStyleUpdate({
+              top: '',
+              left: '',
+              right: '',
+              bottom: ''
+            });
+          } else {
+            this.handleDropElementStyleUpdate(styleToApply);
+
+            if (this.positionRef.current !== view) {
+              dropElement.setAttribute('data-position', `${view}`);
+              dropElement.setAttribute('data-box-direction', selectn(`${view}.direction`, positionMapping));
+
+              if (needArrow) {
+                dropElement.setAttribute('data-arrow-position', selectn(`${view}.arrowPosition`, positionMapping));
+              }
+
+              this.positionRef.current = view;
+            }
+          }
+        });
+        return;
+      }
+    }
+
+    updatePositionOnScroll(e) {
+      const scrollablePopups = Registry.getOpenedScrollableFixedPopups(); // Check if the event target is outside all dropElements
+
+      scrollablePopups.forEach(_ref2 => {
+        let {
+          placeHolderElement,
+          defaultPosition,
+          isTargetElementVisible,
+          handlePopupPosition
+        } = _ref2;
+
+        if (e.target.contains(placeHolderElement) && isTargetElementVisible) {
+          handlePopupPosition(defaultPosition, true);
+        }
+      });
+    }
+
+    updateListeners() {
+      let add = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+      let eventList = arguments.length > 1 ? arguments[1] : undefined;
+      let element = arguments.length > 2 ? arguments[2] : undefined;
+      const method = add ? 'addEventListener' : 'removeEventListener';
+      eventList.forEach(_ref3 => {
+        let {
+          name,
+          handlerName,
+          options
+        } = _ref3;
+        const handler = this[handlerName];
+
+        if (handler) {
+          element[method](name, handler, options);
+        }
+      });
+    }
+
+    addScrollBlockListeners() {
+      // Only add scroll block listeners if at least one open popup needs outside scroll blocked
+      const shouldAddScrollBlockListeners = Registry.getOpenedScrollBlockedFixedPopups().length === 1 && Registry.scrollBlockedListenerPopupRef === undefined;
+
+      if (shouldAddScrollBlockListeners) {
+        Registry.scrollBlockedListenerPopupRef = this; // Main document
+
+        Registry.scrollBlockedListenerPopupRef.updateListeners(true, SCROLL_BLOCK_EVENTS, document); // Attach event listeners to all iframes within rootElement
+
+        Registry.scrollBlockedListenerPopupRef.handleIframeEventListeners(true, IFRAME_SCROLL_BLOCK_EVENTS);
+      }
+    }
+
+    removeScrollBlockListeners() {
+      // Only remove scroll block listeners if at least one open popup needs outside scroll blocked
+      const shouldRemoveScrollBlockListeners = Registry.getOpenedScrollBlockedFixedPopups().length === 0 && Registry.scrollBlockedListenerPopupRef !== undefined;
+
+      if (shouldRemoveScrollBlockListeners) {
+        Registry.scrollBlockedListenerPopupRef.updateListeners(false, SCROLL_BLOCK_EVENTS, document);
+        Registry.scrollBlockedListenerPopupRef.handleIframeEventListeners(false, IFRAME_SCROLL_BLOCK_EVENTS);
+        Registry.scrollBlockedListenerPopupRef = undefined;
+      }
+    }
+
+    addScrollToUpdateListeners() {
+      document.addEventListener('scroll', this.updatePositionOnScroll, {
+        capture: true,
+        passive: false
+      });
+    }
+
+    removeScrollToUpdateListeners() {
+      document.removeEventListener('scroll', this.updatePositionOnScroll, {
+        capture: true,
+        passive: false
+      });
+    }
+
+    handleBlockScroll(event) {
+      const scrollBlockedPopups = Registry.getOpenedScrollBlockedFixedPopups(); // Check if the event target is outside all dropElements
+
+      const isOutsideAllDropElements = scrollBlockedPopups.every(_ref4 => {
+        let {
+          dropElement
+        } = _ref4;
+        return dropElement && dropElement !== event.target && !dropElement.contains(event.target);
+      });
+
+      if (isOutsideAllDropElements) {
+        event.preventDefault();
+      }
+    }
+
+    handlePositionChange(event) {
+      const scrollBlockedPopups = Registry.getOpenedScrollBlockedFixedPopups();
+      scrollBlockedPopups.forEach(_ref5 => {
+        let {
+          placeHolderElement,
+          dropElement,
+          handlePopupPosition,
+          state
+        } = _ref5;
+
+        if (dropElement && dropElement !== event.target && !dropElement.contains(event.target) && placeHolderElement && placeHolderElement !== event.target && !placeHolderElement.contains(event.target) && event.target.contains(placeHolderElement)) {
+          handlePopupPosition(state.position, true);
+        }
+      });
+    }
+
+    preventKeyboardScroll(event) {
+      const keys = [32, 37, 38, 39, 40]; // Space, Arrow keys
+
+      const scrollBlockedPopups = Registry.getOpenedScrollBlockedFixedPopups(); // Check if the event target is outside all dropElements
+
+      const isOutsideAllDropElements = scrollBlockedPopups.every(_ref6 => {
+        let {
+          dropElement
+        } = _ref6;
+        return dropElement && dropElement !== event.target && !dropElement.contains(event.target) && keys.includes(event.keyCode);
+      });
+
+      if (isOutsideAllDropElements) {
+        event.preventDefault();
+      }
+    }
+
+    handleIntersectionObserver(entry) {
+      if (entry.intersectionRatio === 0 && entry.isIntersecting === false) {
+        this.closePopupOnly();
+      }
+    }
+
+    updateVisibilityOnIntersection(entry) {
+      const {
+        dropElement
+      } = this;
+      if (!dropElement) return;
+
+      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');
+      }
+    }
+
+    getGroup() {
+      const {
+        popupGroup
+      } = this.props;
+      return popupGroup || group;
+    }
+
+    getNeedArrow(popup) {
+      const {
+        isArrow
+      } = popup.props;
+      const {
+        needPopupArrow
+      } = popup;
+      return isArrow !== undefined ? isArrow : needPopupArrow;
+    }
+
+    getScrollDebounceTime(popup) {
+      const {
+        scrollDebounceTime
+      } = popup.props;
+      const {
+        scrollDebounceTime: popupScrollDebounceTime
+      } = popup;
+      return scrollDebounceTime !== undefined ? scrollDebounceTime : popupScrollDebounceTime;
+    }
+
+    getCloseOnScrollPopup(popup) {
+      const {
+        closeOnScroll
+      } = popup.props;
+      const {
+        closeOnScroll: closeOnScrollPopup
+      } = popup;
+      return closeOnScroll !== undefined ? closeOnScroll : closeOnScrollPopup;
+    }
+
+    getIsAbsolutePopup(popup) {
+      const {
+        isAbsolutePositioningNeeded
+      } = popup.props;
+      const {
+        isAbsolutePopup
+      } = popup;
+      return isAbsolutePositioningNeeded !== undefined ? isAbsolutePositioningNeeded : isAbsolutePopup;
+    }
+
+    getIsOutsideScrollBlocked(popup) {
+      const {
+        isOutsideScrollBlocked
+      } = popup.props;
+      const {
+        isOutsideScrollBlock
+      } = popup;
+      return isOutsideScrollBlocked !== undefined ? isOutsideScrollBlocked : isOutsideScrollBlock;
+    }
+
+    getCustomPositionOrder(popup) {
+      const {
+        customOrder = []
+      } = popup.props;
+      const {
+        customPositionOrder
+      } = popup;
+      return customOrder.length !== 0 ? customOrder : customPositionOrder;
+    }
+
+    togglePopup(e, defaultPosition) {
+      const group = this.getGroup();
+      this.removeClose(e);
+      const {
+        isPopupOpen
+      } = this.state;
+      const groupPopups = Registry.popups[group] || [];
+      Registry.lastOpenedGroup = !isPopupOpen && Registry.lastOpenedGroup.indexOf(group) === -1 ? [group, ...Registry.lastOpenedGroup] : Registry.lastOpenedGroup;
+      isPopupOpen && Registry.lastOpenedGroup.splice(0, 1);
+      groupPopups.forEach(popup => {
+        if (popup !== this && popup.state.isPopupOpen) {
+          popup.setState({
+            isPopupOpen: false,
+            isPopupReady: false
+          });
+        }
+      });
+
+      if (isPopupOpen) {
+        this.setState({
+          isPopupOpen: false,
+          isPopupReady: false
+        });
+      } else {
+        this.handlePopupPosition(defaultPosition);
+      }
+    }
+
+    openPopupOnly(e, defaultPosition) {
+      const group = this.getGroup();
+      this.removeClose(e);
+      Registry.lastOpenedGroup = Registry.lastOpenedGroup.indexOf(group) === -1 ? [group, ...Registry.lastOpenedGroup] : Registry.lastOpenedGroup;
+      this.handlePopupPosition(defaultPosition);
+    }
+
+    closePopupOnly(e) {
+      this.removeClose(e);
+      const {
+        isPopupOpen
+      } = this.state;
+
+      if (isPopupOpen) {
+        Registry.lastOpenedGroup.splice(0, 1);
+        this.setState({
+          isPopupOpen: false,
+          isPopupReady: false
+        });
+      }
+    }
+
+    handleCloseLastOpenedGroup() {
+      const groupPopups = Registry.lastOpenedGroup.length ? Registry.popups[Registry.lastOpenedGroup[0]] || [] : [];
+      Registry.lastOpenedGroup.splice(0, 1);
+      groupPopups.forEach(popup => {
+        popup.state.isPopupOpen && popup.setState({
+          isPopupOpen: false,
+          isPopupReady: false
+        });
+      });
+    }
+
+    handleDocumentMouseDown(e) {
+      const needPrevent = this.handleGetNeedPrevent(e);
+
+      if (needPrevent) {
+        this.removeClose(e);
+      }
+    }
+
+    handleDocumentFocus(e) {
+      const needPrevent = this.handleGetNeedPrevent(e);
+
+      if (needPrevent) {
+        this.removeClose(e);
+      }
+    }
+
+    handleGetNeedPrevent(e) {
+      let needPrevent = false;
+
+      if (Registry.lastOpenedGroup.length > 1) {
+        const {
+          target
+        } = e;
+        const groupPopups = Registry.lastOpenedGroup.length ? Registry.popups[Registry.lastOpenedGroup[0]] : [];
+        let openedPopup = null; // eslint-disable-next-line guard-for-in
+
+        for (const i in groupPopups) {
+          const {
+            isPopupOpen
+          } = groupPopups[i].state;
+
+          if (isPopupOpen) {
+            openedPopup = groupPopups[i];
+            break;
+          }
+        }
+
+        if (openedPopup) {
+          const {
+            dropElement,
+            placeHolderElement
+          } = openedPopup;
+          const isDropBoxChild = isDescendant(dropElement, target);
+          const isTargetChild = isDescendant(placeHolderElement, target); // const isPopupMassUpdateChild = isDescendant(
+          //   massUpdateParent,
+          //   dropElement
+          // );
+
+          if (!isDropBoxChild && !isTargetChild // && isPopupMassUpdateChild
+          ) {
+            needPrevent = true;
+          }
+        }
+      }
+
+      return needPrevent;
+    }
+
+    documentClickHandler1(e) {
+      const needPrevent = this.handleGetNeedPrevent(e);
+
+      if (needPrevent) {
+        this.removeClose(e);
+        this.handleCloseLastOpenedGroup();
+      }
+    }
+
+    documentClickHandler() {
+      try {
+        Object.keys(Registry.popups).forEach(groupName => {
+          const groupPopups = Registry.popups[groupName] || [];
+          groupPopups.forEach(popup => {
+            popup.state.isPopupOpen && (!popup.props.checkBeforeClose || popup.props.checkBeforeClose && popup.props.checkBeforeClose()) && !isTextSelected() && popup.setState({
+              isPopupOpen: false,
+              isPopupReady: false
+            });
+          });
+        });
+        Registry.lastOpenedGroup = [];
+      } catch (e) {// eslint-disable-next-line no-console
+        //console.error('popup component not unmounted properly', e);
+      }
+    }
+
+    documentKeyupHandler(e) {
+      try {
+        if (e.keyCode === 27) {
+          this.handleCloseLastOpenedGroup();
+        }
+      } catch (e) {// eslint-disable-next-line no-console
+        //console.log('error', e);
+      }
+    }
+
+    removeClose(e) {
+      // e && e.preventDefault && e.preventDefault();
+      cancelBubblingEffect(e);
+    }
+
+    updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute) {
+      const isMobile = isMobilePopover(true);
+      this.setState({
+        isPopupReady: true,
+        position: view,
+        positions: views,
+        positionsOffset: viewsOffset,
+        targetOffset,
+        popupOffset,
+        isAbsolutePositioningNeeded: isAbsolute,
+        isMobile: isMobile
+      });
+    }
+
+    handlePopupPosition() {
+      let defaultPosition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'bottomCenter';
+      let isUpdatePosition = arguments.length > 1 ? arguments[1] : undefined;
+      // isUpdatePosition --->>> Window resize and dropBox resize and to update the position
+      const {
+        direction
+      } = this.context || {};
+      const {
+        placeHolderElement,
+        dropElement
+      } = this;
+      const needArrow = this.getNeedArrow(this);
+      const isAbsolute = this.getIsAbsolutePopup(this);
+      const customOrder = this.getCustomPositionOrder(this);
+
+      if (direction === 'rtl') {
+        defaultPosition = isAbsolute ? rtlAbsolutePositionMapping[defaultPosition] : rtlFixedPositionMapping[defaultPosition];
+      } else {
+        defaultPosition = isAbsolute ? absolutePositionMapping[defaultPosition] : defaultPosition;
+      }
+
+      if (!placeHolderElement && !dropElement) {
+        const isMobile = isMobilePopover(true);
+        this.setState({
+          isPopupOpen: true,
+          isPopupReady: true,
+          isMobile: isMobile
+        });
+        return;
+      }
+
+      const setPosition = () => {
+        this.cancelRaf('setPositionRafId');
+        this.setPositionRafId = requestAnimationFrame(() => {
+          const {
+            placeHolderElement,
+            dropElement
+          } = this;
+          const {
+            position,
+            isPopupReady
+          } = this.state;
+          const scrollContainer = placeHolderElement ? placeHolderElement.closest('[data-scroll=true]') || document.body : document.body;
+          const betterPosition = viewPort.betterView(dropElement, placeHolderElement, defaultPosition, scrollContainer, {
+            needArrow,
+            isAbsolute,
+            customOrder
+          });
+          const {
+            view,
+            views,
+            viewsOffset,
+            targetOffset,
+            popupOffset
+          } = betterPosition || DUMMY_OBJECT;
+
+          if (!isAbsolute) {
+            if (!isPopupReady) {
+              this.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
+            }
+
+            this.setContainerDynamicPositioning(betterPosition, needArrow);
+          } else {
+            if (position !== view || !isPopupReady) {
+              this.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
+            }
+          }
+
+          this.setPositionRafId = null;
+        });
+      };
+
+      if (isUpdatePosition) {
+        setPosition();
+      } else {
+        this.defaultPosition = defaultPosition;
+        this.setState({
+          isPopupOpen: true,
+          isPopupReady: false
+        }, setPosition);
+      }
+    }
+
+    handleOpenPopupPositionChange() {
+      Object.keys(Registry.popups).forEach(groupName => {
+        const groupPopups = Registry.popups[groupName] || [];
+        groupPopups.forEach(popup => {
+          if (popup.state.isPopupOpen) {
+            const {
+              placeHolderElement,
+              dropElement,
+              defaultPosition
+            } = popup;
+            const {
+              position,
+              positionsOffset = {}
+            } = popup.state;
+
+            if (placeHolderElement && dropElement) {
+              const scrollContainer = placeHolderElement.closest('[data-scroll=true]') || document.body;
+              this.cancelRaf('resizePositionRafId');
+              this.resizePositionRafId = requestAnimationFrame(() => {
+                const needArrow = this.getNeedArrow(popup);
+                const isAbsolute = this.getIsAbsolutePopup(popup);
+                const customOrder = this.getCustomPositionOrder(popup);
+                const isMobile = isMobilePopover(true);
+                const betterPosition = viewPort.betterView(dropElement, placeHolderElement, defaultPosition, scrollContainer, {
+                  needArrow,
+                  isAbsolute,
+                  customOrder
+                });
+                const {
+                  view,
+                  views,
+                  viewsOffset = {},
+                  targetOffset,
+                  popupOffset
+                } = betterPosition || {};
+                const {
+                  left: oldLeft = '',
+                  top: oldTop = '',
+                  bottom: oldBottom = '',
+                  right: oldRight = ''
+                } = positionsOffset[position] || {};
+                const {
+                  left = '',
+                  top = '',
+                  bottom = '',
+                  right = ''
+                } = viewsOffset[view] || {};
+                const changeState = isAbsolute ? position !== view : oldLeft !== left || oldTop !== top || oldBottom !== bottom || oldRight !== right; // let isInViewPort = viewPort.isInViewPort(
+                //   placeHolderElement,
+                //   scrollContainer
+                // );
+
+                if (changeState) {
+                  popup.setState({
+                    position: view,
+                    positions: views,
+                    positionsOffset: viewsOffset,
+                    targetOffset,
+                    popupOffset,
+                    isAbsolutePositioningNeeded: isAbsolute,
+                    isMobile: isMobile
+                  });
+                } // if (!isInViewPort && !isAbsolute) {
+                //   popup.setState({ isPopupOpen: false, isPopupReady: false });
+                // } else if (view && changeState) {
+                //   popup.setState({
+                //     position: view,
+                //     positions: views,
+                //     positionsOffset: viewsOffset,
+                //     targetOffset,
+                //     popupOffset,
+                //     isAbsolutePositioningNeeded: isAbsolute
+                //   });
+                // }
+
+
+                this.resizePositionRafId = null;
+              });
+            }
+          }
+        });
+      });
+    }
+
+    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);
+    //   }
+    // }
+
+
+    handlePopupResize(popupSize) {
+      const {
+        height,
+        width
+      } = popupSize;
+      const {
+        height: oldHeight = 0,
+        width: oldWidth = 0
+      } = this.size || {};
+      const {
+        isPopupReady,
+        position
+      } = this.state;
+
+      if (isPopupReady && this.size && (oldHeight !== height || width !== oldWidth)) {
+        this.handlePopupPosition(position, true);
+      }
+
+      this.size = popupSize;
+    }
+
+    getTargetRef(el) {
+      this.placeHolderElement = el;
+    }
+
+    getContainerRef(el) {
+      this.dropElement = el;
+    }
+
+    render() {
+      // const { isPopupReady, isPopupOpen } = this.state;
+      const {
+        isMobile,
+        ...restState
+      } = this.state; // const localState = isPopupReady ? this.state : {};
+
+      return /*#__PURE__*/React.createElement(Component, { ...this.props,
+        ...restState,
+        openPopupOnly: this.openPopupOnly,
+        closePopupOnly: this.closePopupOnly,
+        togglePopup: this.togglePopup,
+        removeClose: this.removeClose,
+        getTargetRef: this.getTargetRef,
+        getContainerRef: this.getContainerRef
+      });
+    }
+
+  }
+
+  Popup.displayName = Component.displayName || Component.name || Popup.name;
+  Popup.contextTypes = ContextTypes;
+  Popup.propTypes = PopupPropTypes;
+  return hoistStatics(Popup, Component);
+};
+
+export default Popup;