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

package/es/Popup/Popup.js

@@ -38,52 +38,6 @@ 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
-  }
-}]);
-const iframeSelector = '[data-scroll=true] iframe';
 /* eslint-disable react/no-deprecated */
 
 /* eslint-disable react/prop-types */
@@ -120,8 +74,9 @@ 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);
@@ -145,7 +100,6 @@ 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);
@@ -158,7 +112,6 @@ 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.positionRef = /*#__PURE__*/React.createRef();
       this.popupObserver = new ResizeObserver(this.handlePopupResize); //dropBoxSize
@@ -181,11 +134,11 @@ 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);
         document.addEventListener('keyup', this.documentKeyupHandler, false); // document.addEventListener('scroll', this.handleScroll, true);
 
         window.addEventListener('resize', this.handleResize);
-        document.addEventListener('click', this.documentClickHandler1, true);
         document.addEventListener('mousedown', this.handleDocumentMouseDown, true);
         document.addEventListener('focus', this.handleDocumentFocus, true);
       }
@@ -214,21 +167,6 @@ const Popup = function (Component) {
       }
     }
 
-    handleIframeClickEvents(isPopupReady, isMobile) {
-      const toggleListeners = add => {
-        this.updateListeners(add, CLICK_EVENTS, document);
-        document.querySelectorAll(iframeSelector).forEach(frame => {
-          const frameDocument = frame.contentDocument;
-
-          if (frameDocument) {
-            this.updateListeners(add, CLICK_EVENTS, frameDocument);
-          }
-        });
-      };
-
-      toggleListeners(isPopupReady && !isMobile);
-    }
-
     componentDidUpdate(prevProps, prevState) {
       const {
         isPopupReady,
@@ -256,7 +194,6 @@ const Popup = function (Component) {
 
       if (oldStateOpen !== isPopupReady && !isMobile || oldIsMobileState !== isMobile) {
         this.handleScrollAndBlockEvents(isPopupReady, isMobile);
-        this.handleIframeClickEvents(isPopupReady, isMobile);
       }
     }
 
@@ -288,11 +225,11 @@ const Popup = function (Component) {
       }
 
       if (noPopups) {
-        document.removeEventListener('click', this.documentClickHandler);
+        document.removeEventListener('click', this.handleDocumentInteraction, true);
+        document.removeEventListener('click', this.documentClickHandler, false);
         document.removeEventListener('keyup', this.documentKeyupHandler); // document.removeEventListener('scroll', this.handleScroll);
 
         window.removeEventListener('resize', this.handleResize);
-        document.removeEventListener('click', this.documentClickHandler1, true);
         document.removeEventListener('mousedown', this.handleDocumentMouseDown, true);
         document.removeEventListener('focus', this.handleDocumentFocus, true);
       }
@@ -410,51 +347,41 @@ const Popup = function (Component) {
       }
     }
 
-    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';
-
-      const applyListeners = target => {
-        eventList.forEach(_ref2 => {
-          let {
-            name,
-            handlerName,
-            options
-          } = _ref2;
-          const handler = this[handlerName];
-
-          if (handler) {
-            target[method](name, handler, options);
-          }
-        });
-      };
-
-      applyListeners(element);
-    }
-
     addScrollBlockListeners() {
-      // Main document
-      this.updateListeners(true, SCROLL_BLOCK_EVENTS, document); // Attach event listeners to all iframes within elements that have the attribute data-scroll=true
-
-      document.querySelectorAll(iframeSelector).forEach(frame => {
-        const frameDocument = frame.contentDocument;
-
-        if (frameDocument) {
-          this.updateListeners(true, IFRAME_SCROLL_BLOCK_EVENTS, frameDocument);
-        }
+      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
       });
     }
 
     removeScrollBlockListeners() {
-      this.updateListeners(false, SCROLL_BLOCK_EVENTS, document);
-      document.querySelectorAll(iframeSelector).forEach(frame => {
-        const frameDocument = frame.contentDocument;
-
-        if (frameDocument) {
-          this.updateListeners(false, IFRAME_SCROLL_BLOCK_EVENTS, frameDocument);
-        }
+      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
       });
     }
 
@@ -691,29 +618,62 @@ const Popup = function (Component) {
       return needPrevent;
     }
 
-    documentClickHandler1(e) {
-      const needPrevent = this.handleGetNeedPrevent(e);
+    closePopups(e) {
+      let checkTarget = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
 
-      if (needPrevent) {
-        this.removeClose(e);
-        this.handleCloseLastOpenedGroup();
-      }
-    }
-
-    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
-            });
+          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
+              });
+            }
           });
         });
-        lastOpenedGroup = [];
-      } catch (e) {// eslint-disable-next-line no-console
-        //console.error('popup component not unmounted properly', e);
+
+        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.
+      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);
       }
     }
 

package/lib/Popup/Popup.js

@@ -97,54 +97,6 @@ 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
-  }
-}]);
-var iframeSelector = '[data-scroll=true] iframe';
 /* eslint-disable react/no-deprecated */
 
 /* eslint-disable react/prop-types */
@@ -195,8 +147,9 @@ 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));
@@ -220,7 +173,6 @@ 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));
@@ -233,7 +185,6 @@ 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.positionRef = /*#__PURE__*/_react["default"].createRef();
       _this.popupObserver = new _ResizeObserver["default"](_this.handlePopupResize); //dropBoxSize
@@ -260,11 +211,11 @@ 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);
           document.addEventListener('keyup', this.documentKeyupHandler, false); // document.addEventListener('scroll', this.handleScroll, true);
 
           window.addEventListener('resize', this.handleResize);
-          document.addEventListener('click', this.documentClickHandler1, true);
           document.addEventListener('mousedown', this.handleDocumentMouseDown, true);
           document.addEventListener('focus', this.handleDocumentFocus, true);
         }
@@ -292,25 +243,6 @@ var Popup = function Popup(Component) {
           this.handleRemovingScrollToUpdatePosition();
         }
       }
-    }, {
-      key: "handleIframeClickEvents",
-      value: function handleIframeClickEvents(isPopupReady, isMobile) {
-        var _this2 = this;
-
-        var toggleListeners = function toggleListeners(add) {
-          _this2.updateListeners(add, CLICK_EVENTS, document);
-
-          document.querySelectorAll(iframeSelector).forEach(function (frame) {
-            var frameDocument = frame.contentDocument;
-
-            if (frameDocument) {
-              _this2.updateListeners(add, CLICK_EVENTS, frameDocument);
-            }
-          });
-        };
-
-        toggleListeners(isPopupReady && !isMobile);
-      }
     }, {
       key: "componentDidUpdate",
       value: function componentDidUpdate(prevProps, prevState) {
@@ -337,20 +269,19 @@ var Popup = function Popup(Component) {
 
         if (oldStateOpen !== isPopupReady && !isMobile || oldIsMobileState !== isMobile) {
           this.handleScrollAndBlockEvents(isPopupReady, isMobile);
-          this.handleIframeClickEvents(isPopupReady, isMobile);
         }
       }
     }, {
       key: "componentWillUnmount",
       value: function componentWillUnmount() {
-        var _this3 = this;
+        var _this2 = 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 !== _this3;
+              return popup !== _this2;
             });
             newGroupPopups.length === 0 && lastOpenedGroup.indexOf(group) >= 0 && lastOpenedGroup.splice(lastOpenedGroup.indexOf(group), 1);
             res[group] = newGroupPopups;
@@ -374,11 +305,11 @@ var Popup = function Popup(Component) {
         }
 
         if (noPopups) {
-          document.removeEventListener('click', this.documentClickHandler);
+          document.removeEventListener('click', this.handleDocumentInteraction, true);
+          document.removeEventListener('click', this.documentClickHandler, false);
           document.removeEventListener('keyup', this.documentKeyupHandler); // document.removeEventListener('scroll', this.handleScroll);
 
           window.removeEventListener('resize', this.handleResize);
-          document.removeEventListener('click', this.documentClickHandler1, true);
           document.removeEventListener('mousedown', this.handleDocumentMouseDown, true);
           document.removeEventListener('focus', this.handleDocumentFocus, true);
         }
@@ -497,59 +428,44 @@ 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';
-
-        var applyListeners = function applyListeners(target) {
-          eventList.forEach(function (_ref5) {
-            var name = _ref5.name,
-                handlerName = _ref5.handlerName,
-                options = _ref5.options;
-            var handler = _this4[handlerName];
-
-            if (handler) {
-              target[method](name, handler, options);
-            }
-          });
-        };
-
-        applyListeners(element);
-      }
     }, {
       key: "addScrollBlockListeners",
       value: function addScrollBlockListeners() {
-        var _this5 = this;
-
-        // Main document
-        this.updateListeners(true, SCROLL_BLOCK_EVENTS, document); // Attach event listeners to all iframes within elements that have the attribute data-scroll=true
-
-        document.querySelectorAll(iframeSelector).forEach(function (frame) {
-          var frameDocument = frame.contentDocument;
-
-          if (frameDocument) {
-            _this5.updateListeners(true, IFRAME_SCROLL_BLOCK_EVENTS, frameDocument);
-          }
+        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
         });
       }
     }, {
       key: "removeScrollBlockListeners",
       value: function removeScrollBlockListeners() {
-        var _this6 = this;
-
-        this.updateListeners(false, SCROLL_BLOCK_EVENTS, document);
-        document.querySelectorAll(iframeSelector).forEach(function (frame) {
-          var frameDocument = frame.contentDocument;
-
-          if (frameDocument) {
-            _this6.updateListeners(false, IFRAME_SCROLL_BLOCK_EVENTS, frameDocument);
-          }
+        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
         });
       }
     }, {
@@ -657,7 +573,7 @@ var Popup = function Popup(Component) {
     }, {
       key: "togglePopup",
       value: function togglePopup(e, defaultPosition) {
-        var _this7 = this;
+        var _this3 = this;
 
         var group = this.getGroup();
         this.removeClose(e);
@@ -666,7 +582,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 !== _this7 && popup.state.isPopupOpen) {
+          if (popup !== _this3 && popup.state.isPopupOpen) {
             popup.setState({
               isPopupOpen: false,
               isPopupReady: false
@@ -774,31 +690,66 @@ var Popup = function Popup(Component) {
         return needPrevent;
       }
     }, {
-      key: "documentClickHandler1",
-      value: function documentClickHandler1(e) {
-        var needPrevent = this.handleGetNeedPrevent(e);
+      key: "closePopups",
+      value: function closePopups(e) {
+        var checkTarget = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
 
-        if (needPrevent) {
-          this.removeClose(e);
-          this.handleCloseLastOpenedGroup();
-        }
-      }
-    }, {
-      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
-              });
+            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
+                });
+              }
             });
           });
-          lastOpenedGroup = [];
-        } catch (e) {// eslint-disable-next-line no-console
-          //console.error('popup component not unmounted properly', e);
+
+          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.
+        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);
         }
       }
     }, {
@@ -836,7 +787,7 @@ var Popup = function Popup(Component) {
     }, {
       key: "handlePopupPosition",
       value: function handlePopupPosition() {
-        var _this8 = this;
+        var _this4 = this;
 
         var defaultPosition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'bottomCenter';
         var isUpdatePosition = arguments.length > 1 ? arguments[1] : undefined;
@@ -869,11 +820,11 @@ var Popup = function Popup(Component) {
 
         var setPosition = function setPosition() {
           requestAnimationFrame(function () {
-            var placeHolderElement = _this8.placeHolderElement,
-                dropElement = _this8.dropElement;
-            var _this8$state = _this8.state,
-                position = _this8$state.position,
-                isPopupReady = _this8$state.isPopupReady;
+            var placeHolderElement = _this4.placeHolderElement,
+                dropElement = _this4.dropElement;
+            var _this4$state = _this4.state,
+                position = _this4$state.position,
+                isPopupReady = _this4$state.isPopupReady;
             var scrollContainer = placeHolderElement.closest('[data-scroll=true]') || document.body;
 
             var betterPosition = _viewPort["default"].betterView(dropElement, placeHolderElement, defaultPosition, scrollContainer, {
@@ -891,17 +842,17 @@ var Popup = function Popup(Component) {
 
             if (!isAbsolute) {
               if (!isPopupReady) {
-                _this8.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
+                _this4.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
               }
 
               if (!dropElement) {
                 return;
               }
 
-              _this8.setContainerDynamicPositioning(betterPosition, needArrow);
+              _this4.setContainerDynamicPositioning(betterPosition, needArrow);
             } else {
               if (position !== view || !isPopupReady) {
-                _this8.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
+                _this4.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
               }
             }
           });
@@ -920,7 +871,7 @@ var Popup = function Popup(Component) {
     }, {
       key: "handleOpenPopupPositionChange",
       value: function handleOpenPopupPositionChange() {
-        var _this9 = this;
+        var _this5 = this;
 
         Object.keys(popups).forEach(function (groupName) {
           var groupPopups = popups[groupName] || [];
@@ -937,11 +888,11 @@ var Popup = function Popup(Component) {
               if (placeHolderElement && dropElement) {
                 var scrollContainer = placeHolderElement.closest('[data-scroll=true]') || document.body;
                 requestAnimationFrame(function () {
-                  var needArrow = _this9.getNeedArrow(popup);
+                  var needArrow = _this5.getNeedArrow(popup);
 
-                  var isAbsolute = _this9.getIsAbsolutePopup(popup);
+                  var isAbsolute = _this5.getIsAbsolutePopup(popup);
 
-                  var customOrder = _this9.getCustomPositionOrder(popup);
+                  var customOrder = _this5.getCustomPositionOrder(popup);
 
                   var isMobile = (0, _isMobilePopover["default"])(true);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-220.4",
+  "version": "1.0.0-temp-220.5",
   "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.72",
+    "@zohodesk/icons": "1.0.74",
     "@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.72",
+    "@zohodesk/icons": "1.0.74",
     "@zohodesk/variables": "1.0.0",
     "@zohodesk/svg": "1.1.22",
     "@zohodesk/virtualizer": "1.0.3",