@zohodesk/components 1.5.3 → 1.5.4-temp-1

package/es/Popup/Popup.js

@@ -1,1053 +1,40 @@
-/**** 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 */
+import DotkitPopup from '@zohodesk/dotkit/es/react/components/Popup/Popup';
+import { getLibraryConfig } from "../Provider/Config.js";
+import { DUMMY_ARRAY, DUMMY_OBJECT } from "./../utils/Common.js";
+import Registry from '@zohodesk/dotkit/es/react/components/Popup/Registry.js';
+global.closeGroupPopups = Registry.closeAllPopupsInGroup;
 
 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.setPosition = this.setPosition.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` : ''
-      });
-    }
-
-    setContainerDynamicPositioning(betterPosition, needArrow) {
-      const {
-        dropElement
-      } = this;
-      const {
-        isMobile
-      } = this.state;
-
-      if (dropElement) {
-        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;
-          }
-        }
-      }
-    }
-
-    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
-      });
-    }
-
-    setPosition() {
-      this.cancelRaf('setPositionRafId');
-      const needArrow = this.getNeedArrow(this);
-      const isAbsolute = this.getIsAbsolutePopup(this);
-      const customOrder = this.getCustomPositionOrder(this);
-      this.setPositionRafId = requestAnimationFrame(() => {
-        const {
-          placeHolderElement,
-          dropElement,
-          defaultPosition
-        } = 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;
-      });
-    }
-
-    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 isAbsolute = this.getIsAbsolutePopup(this);
-
-      if (direction === 'rtl') {
-        defaultPosition = isAbsolute ? rtlAbsolutePositionMapping[defaultPosition] : rtlFixedPositionMapping[defaultPosition];
-      } else {
-        defaultPosition = isAbsolute ? absolutePositionMapping[defaultPosition] : defaultPosition;
-      }
-
-      this.defaultPosition = defaultPosition;
-
-      if (!placeHolderElement && !dropElement) {
-        const isMobile = isMobilePopover(true);
-        this.setState({
-          isPopupOpen: true,
-          isPopupReady: true,
-          isMobile: isMobile
-        });
-        return;
-      }
-
-      if (isUpdatePosition) {
-        this.setPosition();
-      } else {
-        this.setState({
-          isPopupOpen: true,
-          isPopupReady: false
-        }, this.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,
-        recomputePosition: this.setPosition,
-        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);
+  let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : DUMMY_OBJECT;
+  const {
+    isAbsolutePositioningNeeded = true,
+    isArrow = false,
+    customOrder = DUMMY_ARRAY,
+    scrollDebounceTime = 0,
+    closeOnScroll = false,
+    isOutsideScrollBlocked = false
+  } = options;
+  const getRootElement = getLibraryConfig('getRootElement');
+  const mobileWidth = getLibraryConfig('mobileWidth');
+  const middleware = {
+    useAbsolutePositioning: isAbsolutePositioningNeeded,
+    positionOrder: customOrder,
+    isArrow,
+    scrollDebounceTime,
+    closeOnScroll,
+    isOutsideScrollBlocked,
+    enableResizeHandling: needResizeHandling
+  };
+  const popupConfig = {
+    group,
+    mobileWidth,
+    rootElementCallback: getRootElement,
+    middleware
+  };
+  return DotkitPopup(Component, popupConfig);
 };
 
 export default Popup;