@zohodesk/components 1.0.0-temp-220.5 → 1.0.0-temp-220.6

package/es/Popup/Popup.js

@@ -12,6 +12,7 @@ import { addIntersectionObserver, removeIntersectionObserver } from "./intersect
 import { positionMapping } from "../DropBox/DropBoxPositionMapping.js";
 import isMobilePopover from "../DropBox/utils/isMobilePopover.js";
 import selectn from 'selectn';
+import { getLibraryConfig } from "../Provider/Config.js";
 let lastOpenedGroup = [];
 let popups = {};
 
@@ -38,6 +39,51 @@ const defaultState = {
   //{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 */
@@ -74,9 +120,8 @@ const Popup = function (Component) {
         isMobile: false
       };
       this.togglePopup = this.togglePopup.bind(this);
-      this.closePopups = this.closePopups.bind(this);
-      this.handleDocumentInteraction = this.handleDocumentInteraction.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);
@@ -100,6 +145,7 @@ const Popup = function (Component) {
       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.handleAddingScrollBlock = this.handleAddingScrollBlock.bind(this);
@@ -112,8 +158,11 @@ const Popup = function (Component) {
       this.setContainerDynamicPositioning = this.setContainerDynamicPositioning.bind(this);
       this.updatePopupState = this.updatePopupState.bind(this);
       this.handleScrollAndBlockEvents = this.handleScrollAndBlockEvents.bind(this);
+      this.handleIframeClickEvents = this.handleIframeClickEvents.bind(this);
       this.handleDropElementStyleUpdate = this.handleDropElementStyleUpdate.bind(this);
+      this.getParentContainerElement = this.getParentContainerElement.bind(this);
       this.positionRef = /*#__PURE__*/React.createRef();
+      this.parentContainerElement = this.getParentContainerElement();
       this.popupObserver = new ResizeObserver(this.handlePopupResize); //dropBoxSize
 
       this.size = null;
@@ -134,8 +183,7 @@ const Popup = function (Component) {
       popups[group] = groupPopups;
 
       if (Object.keys(popups).length === 1 && groupPopups.length === 1) {
-        document.addEventListener('click', this.handleDocumentInteraction, true);
-        document.addEventListener('click', this.documentClickHandler, false);
+        this.updateListeners(true, CLICK_EVENTS, document);
         document.addEventListener('keyup', this.documentKeyupHandler, false); // document.addEventListener('scroll', this.handleScroll, true);
 
         window.addEventListener('resize', this.handleResize);
@@ -157,8 +205,22 @@ const Popup = function (Component) {
       }
     }
 
-    handleScrollAndBlockEvents(isPopupReady, isMobile) {
-      if (isPopupReady && !isMobile) {
+    getParentContainerElement() {
+      const getParentContainer = getLibraryConfig('getParentContainer');
+
+      if (getParentContainer && typeof getParentContainer === 'function') {
+        const parent = getParentContainer();
+
+        if (parent) {
+          return parent;
+        }
+      }
+
+      return document;
+    }
+
+    handleScrollAndBlockEvents(shouldAdd) {
+      if (shouldAdd) {
         this.handleAddingScrollBlock();
         this.handleAddingScrollToUpdatePosition();
       } else {
@@ -167,6 +229,16 @@ const Popup = function (Component) {
       }
     }
 
+    handleIframeClickEvents(shouldAdd) {
+      this.parentContainerElement.querySelectorAll('iframe').forEach(frame => {
+        const frameDocument = frame.contentDocument;
+
+        if (frameDocument) {
+          this.updateListeners(shouldAdd, CLICK_EVENTS, frameDocument);
+        }
+      });
+    }
+
     componentDidUpdate(prevProps, prevState) {
       const {
         isPopupReady,
@@ -193,7 +265,8 @@ const Popup = function (Component) {
       }
 
       if (oldStateOpen !== isPopupReady && !isMobile || oldIsMobileState !== isMobile) {
-        this.handleScrollAndBlockEvents(isPopupReady, isMobile);
+        this.handleScrollAndBlockEvents(isPopupReady && !isMobile);
+        this.handleIframeClickEvents(isPopupReady && !isMobile);
       }
     }
 
@@ -211,6 +284,7 @@ const Popup = function (Component) {
       }, popups);
       this.handleRemovingScrollBlock();
       this.handleRemovingScrollToUpdatePosition();
+      this.handleIframeClickEvents(false);
       let noPopups = true;
 
       for (const i in popups) {
@@ -225,8 +299,7 @@ const Popup = function (Component) {
       }
 
       if (noPopups) {
-        document.removeEventListener('click', this.handleDocumentInteraction, true);
-        document.removeEventListener('click', this.documentClickHandler, false);
+        this.updateListeners(false, CLICK_EVENTS, document);
         document.removeEventListener('keyup', this.documentKeyupHandler); // document.removeEventListener('scroll', this.handleScroll);
 
         window.removeEventListener('resize', this.handleResize);
@@ -347,41 +420,46 @@ const Popup = function (Component) {
       }
     }
 
-    addScrollBlockListeners() {
-      document.addEventListener('wheel', this.handleBlockScroll, {
-        capture: true,
-        passive: false
-      });
-      document.addEventListener('touchmove', this.handleBlockScroll, {
-        capture: true,
-        passive: false
-      });
-      document.addEventListener('scroll', this.handlePositionChange, {
-        capture: true,
-        passive: false
+    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(_ref2 => {
+        let {
+          name,
+          handlerName,
+          options
+        } = _ref2;
+        const handler = this[handlerName];
+
+        if (handler) {
+          element[method](name, handler, options);
+        }
       });
-      document.addEventListener('keydown', this.preventKeyboardScroll, {
-        capture: true,
-        passive: false
+    }
+
+    addScrollBlockListeners() {
+      // Main document
+      this.updateListeners(true, SCROLL_BLOCK_EVENTS, document); // Attach event listeners to all iframes within parentContainerElement
+
+      this.parentContainerElement.querySelectorAll('iframe').forEach(frame => {
+        const frameDocument = frame.contentDocument;
+
+        if (frameDocument) {
+          this.updateListeners(true, IFRAME_SCROLL_BLOCK_EVENTS, frameDocument);
+        }
       });
     }
 
     removeScrollBlockListeners() {
-      document.removeEventListener('wheel', this.handleBlockScroll, {
-        capture: true,
-        passive: false
-      });
-      document.removeEventListener('touchmove', this.handleBlockScroll, {
-        capture: true,
-        passive: false
-      });
-      document.removeEventListener('scroll', this.handlePositionChange, {
-        capture: true,
-        passive: false
-      });
-      document.removeEventListener('keydown', this.preventKeyboardScroll, {
-        capture: true,
-        passive: false
+      this.updateListeners(false, SCROLL_BLOCK_EVENTS, document);
+      this.parentContainerElement.querySelectorAll('iframe').forEach(frame => {
+        const frameDocument = frame.contentDocument;
+
+        if (frameDocument) {
+          this.updateListeners(false, IFRAME_SCROLL_BLOCK_EVENTS, frameDocument);
+        }
       });
     }
 
@@ -618,62 +696,29 @@ const Popup = function (Component) {
       return needPrevent;
     }
 
-    closePopups(e) {
-      let checkTarget = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-
-      try {
-        Object.keys(popups).forEach(groupName => {
-          const openGroupPopups = (popups[groupName] || []).filter(popup => popup.state.isPopupOpen);
-          openGroupPopups.forEach(popup => {
-            const {
-              dropElement,
-              placeHolderElement
-            } = popup;
-            const {
-              target
-            } = e || {};
-            const canClosePopup = !popup.props.checkBeforeClose || popup.props.checkBeforeClose && popup.props.checkBeforeClose() && !isTextSelected();
-            const isOutsideClick = checkTarget && placeHolderElement && dropElement && placeHolderElement !== target && !placeHolderElement.contains(target) && dropElement !== target && !dropElement.contains(target);
-
-            if (canClosePopup && (!checkTarget || isOutsideClick)) {
-              popup.setState({
-                isPopupOpen: false,
-                isPopupReady: false
-              });
-            }
-          });
-        });
-
-        if (!checkTarget) {
-          lastOpenedGroup = [];
-        }
-      } catch (error) {// eslint-disable-next-line no-console
-        //console.error('popup component not unmounted properly', error);
-      }
-    }
-
-    documentClickHandler(e) {
-      // Handles document click events to close all popups.
-      // This function closes all popups without checking if the click occurred outside the popup.
-      this.closePopups(e, false);
-    }
-
-    handleDocumentInteraction(e) {
-      // Handles interactions with the document to determine whether to close the popup.
-      // This function is specifically designed to close the popup when clicking outside of it.
-      // Check if the click event should prevent popup closure.
+    documentClickHandler1(e) {
       const needPrevent = this.handleGetNeedPrevent(e);
 
       if (needPrevent) {
-        // If the click event should prevent popup closure:
-        // - Stop the event propagation.
-        // - Close the last opened group of popups.
         this.removeClose(e);
         this.handleCloseLastOpenedGroup();
-      } else {
-        // If the click event does not need to prevent popup closure:
-        // - Close all popups, but only if the click occurred outside the popup elements.
-        this.closePopups(e, true);
+      }
+    }
+
+    documentClickHandler() {
+      try {
+        Object.keys(popups).forEach(groupName => {
+          const groupPopups = popups[groupName] || [];
+          groupPopups.forEach(popup => {
+            popup.state.isPopupOpen && (!popup.props.checkBeforeClose || popup.props.checkBeforeClose && popup.props.checkBeforeClose()) && !isTextSelected() && popup.setState({
+              isPopupOpen: false,
+              isPopupReady: false
+            });
+          });
+        });
+        lastOpenedGroup = [];
+      } catch (e) {// eslint-disable-next-line no-console
+        //console.error('popup component not unmounted properly', e);
       }
     }
 

package/es/Provider/Config.js

@@ -8,7 +8,8 @@ let id = {
   direction: 'ltr',
   tooltipDebounce: 175,
   getTooltipContainer: () => {},
-  autoComplete: false
+  autoComplete: false,
+  getParentContainer: () => {}
 };
 export function getLibraryConfig(key) {
   return id[key];

package/lib/Popup/Popup.js

@@ -29,6 +29,8 @@ var _isMobilePopover = _interopRequireDefault(require("../DropBox/utils/isMobile
 
 var _selectn = _interopRequireDefault(require("selectn"));
 
+var _Config = require("../Provider/Config.js");
+
 var _excluded = ["isMobile"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -97,6 +99,53 @@ var defaultState = {
   //{height: ‘’, width: ‘’,}
   isAbsolutePositioningNeeded: true
 };
+var 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
+  }
+}]);
+var IFRAME_SCROLL_BLOCK_EVENTS = Object.freeze(SCROLL_BLOCK_EVENTS.filter(function (event) {
+  return event.name !== 'keydown';
+}));
+var 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 */
@@ -147,9 +196,8 @@ var Popup = function Popup(Component) {
         isMobile: false
       };
       _this.togglePopup = _this.togglePopup.bind(_assertThisInitialized(_this));
-      _this.closePopups = _this.closePopups.bind(_assertThisInitialized(_this));
-      _this.handleDocumentInteraction = _this.handleDocumentInteraction.bind(_assertThisInitialized(_this));
       _this.documentClickHandler = _this.documentClickHandler.bind(_assertThisInitialized(_this));
+      _this.documentClickHandler1 = _this.documentClickHandler1.bind(_assertThisInitialized(_this));
       _this.removeClose = _this.removeClose.bind(_assertThisInitialized(_this));
       _this.documentKeyupHandler = _this.documentKeyupHandler.bind(_assertThisInitialized(_this));
       _this.openPopupOnly = _this.openPopupOnly.bind(_assertThisInitialized(_this));
@@ -173,6 +221,7 @@ var Popup = function Popup(Component) {
       _this.handleBlockScroll = _this.handleBlockScroll.bind(_assertThisInitialized(_this));
       _this.handlePositionChange = _this.handlePositionChange.bind(_assertThisInitialized(_this));
       _this.preventKeyboardScroll = _this.preventKeyboardScroll.bind(_assertThisInitialized(_this));
+      _this.updateListeners = _this.updateListeners.bind(_assertThisInitialized(_this));
       _this.addScrollBlockListeners = _this.addScrollBlockListeners.bind(_assertThisInitialized(_this));
       _this.removeScrollBlockListeners = _this.removeScrollBlockListeners.bind(_assertThisInitialized(_this));
       _this.handleAddingScrollBlock = _this.handleAddingScrollBlock.bind(_assertThisInitialized(_this));
@@ -185,8 +234,11 @@ var Popup = function Popup(Component) {
       _this.setContainerDynamicPositioning = _this.setContainerDynamicPositioning.bind(_assertThisInitialized(_this));
       _this.updatePopupState = _this.updatePopupState.bind(_assertThisInitialized(_this));
       _this.handleScrollAndBlockEvents = _this.handleScrollAndBlockEvents.bind(_assertThisInitialized(_this));
+      _this.handleIframeClickEvents = _this.handleIframeClickEvents.bind(_assertThisInitialized(_this));
       _this.handleDropElementStyleUpdate = _this.handleDropElementStyleUpdate.bind(_assertThisInitialized(_this));
+      _this.getParentContainerElement = _this.getParentContainerElement.bind(_assertThisInitialized(_this));
       _this.positionRef = /*#__PURE__*/_react["default"].createRef();
+      _this.parentContainerElement = _this.getParentContainerElement();
       _this.popupObserver = new _ResizeObserver["default"](_this.handlePopupResize); //dropBoxSize
 
       _this.size = null;
@@ -211,8 +263,7 @@ var Popup = function Popup(Component) {
         popups[group] = groupPopups;
 
         if (Object.keys(popups).length === 1 && groupPopups.length === 1) {
-          document.addEventListener('click', this.handleDocumentInteraction, true);
-          document.addEventListener('click', this.documentClickHandler, false);
+          this.updateListeners(true, CLICK_EVENTS, document);
           document.addEventListener('keyup', this.documentKeyupHandler, false); // document.addEventListener('scroll', this.handleScroll, true);
 
           window.addEventListener('resize', this.handleResize);
@@ -232,10 +283,25 @@ var Popup = function Popup(Component) {
           });
         }
       }
+    }, {
+      key: "getParentContainerElement",
+      value: function getParentContainerElement() {
+        var getParentContainer = (0, _Config.getLibraryConfig)('getParentContainer');
+
+        if (getParentContainer && typeof getParentContainer === 'function') {
+          var parent = getParentContainer();
+
+          if (parent) {
+            return parent;
+          }
+        }
+
+        return document;
+      }
     }, {
       key: "handleScrollAndBlockEvents",
-      value: function handleScrollAndBlockEvents(isPopupReady, isMobile) {
-        if (isPopupReady && !isMobile) {
+      value: function handleScrollAndBlockEvents(shouldAdd) {
+        if (shouldAdd) {
           this.handleAddingScrollBlock();
           this.handleAddingScrollToUpdatePosition();
         } else {
@@ -243,6 +309,19 @@ var Popup = function Popup(Component) {
           this.handleRemovingScrollToUpdatePosition();
         }
       }
+    }, {
+      key: "handleIframeClickEvents",
+      value: function handleIframeClickEvents(shouldAdd) {
+        var _this2 = this;
+
+        this.parentContainerElement.querySelectorAll('iframe').forEach(function (frame) {
+          var frameDocument = frame.contentDocument;
+
+          if (frameDocument) {
+            _this2.updateListeners(shouldAdd, CLICK_EVENTS, frameDocument);
+          }
+        });
+      }
     }, {
       key: "componentDidUpdate",
       value: function componentDidUpdate(prevProps, prevState) {
@@ -268,20 +347,21 @@ var Popup = function Popup(Component) {
         }
 
         if (oldStateOpen !== isPopupReady && !isMobile || oldIsMobileState !== isMobile) {
-          this.handleScrollAndBlockEvents(isPopupReady, isMobile);
+          this.handleScrollAndBlockEvents(isPopupReady && !isMobile);
+          this.handleIframeClickEvents(isPopupReady && !isMobile);
         }
       }
     }, {
       key: "componentWillUnmount",
       value: function componentWillUnmount() {
-        var _this2 = this;
+        var _this3 = this;
 
         var group = this.getGroup();
         popups = Object.keys(popups).reduce(function (res, groupName) {
           if (groupName === group) {
             var groupPopups = popups[group];
             var newGroupPopups = groupPopups.filter(function (popup) {
-              return popup !== _this2;
+              return popup !== _this3;
             });
             newGroupPopups.length === 0 && lastOpenedGroup.indexOf(group) >= 0 && lastOpenedGroup.splice(lastOpenedGroup.indexOf(group), 1);
             res[group] = newGroupPopups;
@@ -291,6 +371,7 @@ var Popup = function Popup(Component) {
         }, popups);
         this.handleRemovingScrollBlock();
         this.handleRemovingScrollToUpdatePosition();
+        this.handleIframeClickEvents(false);
         var noPopups = true;
 
         for (var i in popups) {
@@ -305,8 +386,7 @@ var Popup = function Popup(Component) {
         }
 
         if (noPopups) {
-          document.removeEventListener('click', this.handleDocumentInteraction, true);
-          document.removeEventListener('click', this.documentClickHandler, false);
+          this.updateListeners(false, CLICK_EVENTS, document);
           document.removeEventListener('keyup', this.documentKeyupHandler); // document.removeEventListener('scroll', this.handleScroll);
 
           window.removeEventListener('resize', this.handleResize);
@@ -428,44 +508,54 @@ var Popup = function Popup(Component) {
           this.handlePopupPosition(defaultPosition, true);
         }
       }
+    }, {
+      key: "updateListeners",
+      value: function updateListeners() {
+        var _this4 = this;
+
+        var add = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+        var eventList = arguments.length > 1 ? arguments[1] : undefined;
+        var element = arguments.length > 2 ? arguments[2] : undefined;
+        var method = add ? 'addEventListener' : 'removeEventListener';
+        eventList.forEach(function (_ref5) {
+          var name = _ref5.name,
+              handlerName = _ref5.handlerName,
+              options = _ref5.options;
+          var handler = _this4[handlerName];
+
+          if (handler) {
+            element[method](name, handler, options);
+          }
+        });
+      }
     }, {
       key: "addScrollBlockListeners",
       value: function addScrollBlockListeners() {
-        document.addEventListener('wheel', this.handleBlockScroll, {
-          capture: true,
-          passive: false
-        });
-        document.addEventListener('touchmove', this.handleBlockScroll, {
-          capture: true,
-          passive: false
-        });
-        document.addEventListener('scroll', this.handlePositionChange, {
-          capture: true,
-          passive: false
-        });
-        document.addEventListener('keydown', this.preventKeyboardScroll, {
-          capture: true,
-          passive: false
+        var _this5 = this;
+
+        // Main document
+        this.updateListeners(true, SCROLL_BLOCK_EVENTS, document); // Attach event listeners to all iframes within parentContainerElement
+
+        this.parentContainerElement.querySelectorAll('iframe').forEach(function (frame) {
+          var frameDocument = frame.contentDocument;
+
+          if (frameDocument) {
+            _this5.updateListeners(true, IFRAME_SCROLL_BLOCK_EVENTS, frameDocument);
+          }
         });
       }
     }, {
       key: "removeScrollBlockListeners",
       value: function removeScrollBlockListeners() {
-        document.removeEventListener('wheel', this.handleBlockScroll, {
-          capture: true,
-          passive: false
-        });
-        document.removeEventListener('touchmove', this.handleBlockScroll, {
-          capture: true,
-          passive: false
-        });
-        document.removeEventListener('scroll', this.handlePositionChange, {
-          capture: true,
-          passive: false
-        });
-        document.removeEventListener('keydown', this.preventKeyboardScroll, {
-          capture: true,
-          passive: false
+        var _this6 = this;
+
+        this.updateListeners(false, SCROLL_BLOCK_EVENTS, document);
+        this.parentContainerElement.querySelectorAll('iframe').forEach(function (frame) {
+          var frameDocument = frame.contentDocument;
+
+          if (frameDocument) {
+            _this6.updateListeners(false, IFRAME_SCROLL_BLOCK_EVENTS, frameDocument);
+          }
         });
       }
     }, {
@@ -573,7 +663,7 @@ var Popup = function Popup(Component) {
     }, {
       key: "togglePopup",
       value: function togglePopup(e, defaultPosition) {
-        var _this3 = this;
+        var _this7 = this;
 
         var group = this.getGroup();
         this.removeClose(e);
@@ -582,7 +672,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 !== _this7 && popup.state.isPopupOpen) {
             popup.setState({
               isPopupOpen: false,
               isPopupReady: false
@@ -690,66 +780,31 @@ var Popup = function Popup(Component) {
         return needPrevent;
       }
     }, {
-      key: "closePopups",
-      value: function closePopups(e) {
-        var checkTarget = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-
-        try {
-          Object.keys(popups).forEach(function (groupName) {
-            var openGroupPopups = (popups[groupName] || []).filter(function (popup) {
-              return popup.state.isPopupOpen;
-            });
-            openGroupPopups.forEach(function (popup) {
-              var dropElement = popup.dropElement,
-                  placeHolderElement = popup.placeHolderElement;
-
-              var _ref5 = e || {},
-                  target = _ref5.target;
-
-              var canClosePopup = !popup.props.checkBeforeClose || popup.props.checkBeforeClose && popup.props.checkBeforeClose() && !(0, _Common.isTextSelected)();
-              var isOutsideClick = checkTarget && placeHolderElement && dropElement && placeHolderElement !== target && !placeHolderElement.contains(target) && dropElement !== target && !dropElement.contains(target);
-
-              if (canClosePopup && (!checkTarget || isOutsideClick)) {
-                popup.setState({
-                  isPopupOpen: false,
-                  isPopupReady: false
-                });
-              }
-            });
-          });
-
-          if (!checkTarget) {
-            lastOpenedGroup = [];
-          }
-        } catch (error) {// eslint-disable-next-line no-console
-          //console.error('popup component not unmounted properly', error);
-        }
-      }
-    }, {
-      key: "documentClickHandler",
-      value: function documentClickHandler(e) {
-        // Handles document click events to close all popups.
-        // This function closes all popups without checking if the click occurred outside the popup.
-        this.closePopups(e, false);
-      }
-    }, {
-      key: "handleDocumentInteraction",
-      value: function handleDocumentInteraction(e) {
-        // Handles interactions with the document to determine whether to close the popup.
-        // This function is specifically designed to close the popup when clicking outside of it.
-        // Check if the click event should prevent popup closure.
+      key: "documentClickHandler1",
+      value: function documentClickHandler1(e) {
         var needPrevent = this.handleGetNeedPrevent(e);
 
         if (needPrevent) {
-          // If the click event should prevent popup closure:
-          // - Stop the event propagation.
-          // - Close the last opened group of popups.
           this.removeClose(e);
           this.handleCloseLastOpenedGroup();
-        } else {
-          // If the click event does not need to prevent popup closure:
-          // - Close all popups, but only if the click occurred outside the popup elements.
-          this.closePopups(e, true);
+        }
+      }
+    }, {
+      key: "documentClickHandler",
+      value: function documentClickHandler() {
+        try {
+          Object.keys(popups).forEach(function (groupName) {
+            var groupPopups = popups[groupName] || [];
+            groupPopups.forEach(function (popup) {
+              popup.state.isPopupOpen && (!popup.props.checkBeforeClose || popup.props.checkBeforeClose && popup.props.checkBeforeClose()) && !(0, _Common.isTextSelected)() && popup.setState({
+                isPopupOpen: false,
+                isPopupReady: false
+              });
+            });
+          });
+          lastOpenedGroup = [];
+        } catch (e) {// eslint-disable-next-line no-console
+          //console.error('popup component not unmounted properly', e);
         }
       }
     }, {
@@ -787,7 +842,7 @@ var Popup = function Popup(Component) {
     }, {
       key: "handlePopupPosition",
       value: function handlePopupPosition() {
-        var _this4 = this;
+        var _this8 = this;
 
         var defaultPosition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'bottomCenter';
         var isUpdatePosition = arguments.length > 1 ? arguments[1] : undefined;
@@ -820,11 +875,11 @@ 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 = _this8.placeHolderElement,
+                dropElement = _this8.dropElement;
+            var _this8$state = _this8.state,
+                position = _this8$state.position,
+                isPopupReady = _this8$state.isPopupReady;
             var scrollContainer = placeHolderElement.closest('[data-scroll=true]') || document.body;
 
             var betterPosition = _viewPort["default"].betterView(dropElement, placeHolderElement, defaultPosition, scrollContainer, {
@@ -842,17 +897,17 @@ var Popup = function Popup(Component) {
 
             if (!isAbsolute) {
               if (!isPopupReady) {
-                _this4.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
+                _this8.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
               }
 
               if (!dropElement) {
                 return;
               }
 
-              _this4.setContainerDynamicPositioning(betterPosition, needArrow);
+              _this8.setContainerDynamicPositioning(betterPosition, needArrow);
             } else {
               if (position !== view || !isPopupReady) {
-                _this4.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
+                _this8.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
               }
             }
           });
@@ -871,7 +926,7 @@ var Popup = function Popup(Component) {
     }, {
       key: "handleOpenPopupPositionChange",
       value: function handleOpenPopupPositionChange() {
-        var _this5 = this;
+        var _this9 = this;
 
         Object.keys(popups).forEach(function (groupName) {
           var groupPopups = popups[groupName] || [];
@@ -888,11 +943,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 = _this9.getNeedArrow(popup);
 
-                  var isAbsolute = _this5.getIsAbsolutePopup(popup);
+                  var isAbsolute = _this9.getIsAbsolutePopup(popup);
 
-                  var customOrder = _this5.getCustomPositionOrder(popup);
+                  var customOrder = _this9.getCustomPositionOrder(popup);
 
                   var isMobile = (0, _isMobilePopover["default"])(true);
 

package/lib/Provider/Config.js

@@ -15,7 +15,8 @@ var id = {
   direction: 'ltr',
   tooltipDebounce: 175,
   getTooltipContainer: function getTooltipContainer() {},
-  autoComplete: false
+  autoComplete: false,
+  getParentContainer: function getParentContainer() {}
 };
 
 function getLibraryConfig(key) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-220.5",
+  "version": "1.0.0-temp-220.6",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -71,7 +71,7 @@
     "@zohodesk/a11y": "2.3.4",
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/hooks": "2.0.5",
-    "@zohodesk/icons": "1.0.74",
+    "@zohodesk/icons": "1.0.75",
     "@zohodesk/svg": "1.1.22",
     "@zohodesk/utils": "1.3.14",
     "@zohodesk/variables": "1.0.0",
@@ -86,7 +86,7 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.0.74",
+    "@zohodesk/icons": "1.0.75",
     "@zohodesk/variables": "1.0.0",
     "@zohodesk/svg": "1.1.22",
     "@zohodesk/virtualizer": "1.0.3",