@zohodesk/components 1.0.0-temp-220 → 1.0.0-temp-220.1

package/es/Popup/Popup.js

@@ -74,7 +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.removeClose = this.removeClose.bind(this);
       this.documentKeyupHandler = this.documentKeyupHandler.bind(this);
       this.openPopupOnly = this.openPopupOnly.bind(this);
@@ -133,6 +135,7 @@ const Popup = function (Component) {
 
       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);
@@ -223,6 +226,7 @@ const Popup = function (Component) {
 
       if (noPopups) {
         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);
@@ -614,29 +618,59 @@ 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
+              });
+            }
+          });
+        });
+        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 {
-        try {
-          Object.keys(popups).forEach(groupName => {
-            const groupPopups = popups[groupName] || [];
-            groupPopups.forEach(popup => {
-              if (popup.placeHolderElement && popup.dropElement && popup.placeHolderElement !== e.target && !popup.placeHolderElement.contains(e.target) && popup.dropElement !== e.target && !popup.dropElement.contains(e.target)) {
-                popup.state.isPopupOpen && (!popup.props.checkBeforeClose || popup.props.checkBeforeClose && popup.props.checkBeforeClose()) && !isTextSelected() && popup.setState({
-                  isPopupOpen: false,
-                  isPopupReady: false
-                });
-              }
-            });
-          });
-          lastOpenedGroup = [];
-        } catch (error) {// eslint-disable-next-line no-console
-          //console.error('popup component not unmounted properly', error);
-        }
+        // 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

@@ -147,7 +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.removeClose = _this.removeClose.bind(_assertThisInitialized(_this));
       _this.documentKeyupHandler = _this.documentKeyupHandler.bind(_assertThisInitialized(_this));
       _this.openPopupOnly = _this.openPopupOnly.bind(_assertThisInitialized(_this));
@@ -210,6 +212,7 @@ var Popup = function Popup(Component) {
 
         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);
@@ -303,6 +306,7 @@ var Popup = function Popup(Component) {
 
         if (noPopups) {
           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);
@@ -685,31 +689,64 @@ 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
+                });
+              }
+            });
+          });
+          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 {
-          try {
-            Object.keys(popups).forEach(function (groupName) {
-              var groupPopups = popups[groupName] || [];
-              groupPopups.forEach(function (popup) {
-                if (popup.placeHolderElement && popup.dropElement && popup.placeHolderElement !== e.target && !popup.placeHolderElement.contains(e.target) && popup.dropElement !== e.target && !popup.dropElement.contains(e.target)) {
-                  popup.state.isPopupOpen && (!popup.props.checkBeforeClose || popup.props.checkBeforeClose && popup.props.checkBeforeClose()) && !(0, _Common.isTextSelected)() && popup.setState({
-                    isPopupOpen: false,
-                    isPopupReady: false
-                  });
-                }
-              });
-            });
-            lastOpenedGroup = [];
-          } catch (error) {// eslint-disable-next-line no-console
-            //console.error('popup component not unmounted properly', error);
-          }
+          // 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);
         }
       }
     }, {
@@ -753,8 +790,8 @@ var Popup = function Popup(Component) {
         var isUpdatePosition = arguments.length > 1 ? arguments[1] : undefined;
 
         // isUpdatePosition --->>> Window resize and dropBox resize and to update the position
-        var _ref5 = this.context || {},
-            direction = _ref5.direction;
+        var _ref6 = this.context || {},
+            direction = _ref6.direction;
 
         var placeHolderElement = this.placeHolderElement,
             dropElement = this.dropElement;
@@ -793,12 +830,12 @@ var Popup = function Popup(Component) {
               customOrder: customOrder
             });
 
-            var _ref6 = betterPosition || _Common.DUMMY_OBJECT,
-                view = _ref6.view,
-                views = _ref6.views,
-                viewsOffset = _ref6.viewsOffset,
-                targetOffset = _ref6.targetOffset,
-                popupOffset = _ref6.popupOffset;
+            var _ref7 = betterPosition || _Common.DUMMY_OBJECT,
+                view = _ref7.view,
+                views = _ref7.views,
+                viewsOffset = _ref7.viewsOffset,
+                targetOffset = _ref7.targetOffset,
+                popupOffset = _ref7.popupOffset;
 
             if (!isAbsolute) {
               if (!isPopupReady) {
@@ -862,33 +899,33 @@ var Popup = function Popup(Component) {
                     customOrder: customOrder
                   });
 
-                  var _ref7 = betterPosition || {},
-                      view = _ref7.view,
-                      views = _ref7.views,
-                      _ref7$viewsOffset = _ref7.viewsOffset,
-                      viewsOffset = _ref7$viewsOffset === void 0 ? {} : _ref7$viewsOffset,
-                      targetOffset = _ref7.targetOffset,
-                      popupOffset = _ref7.popupOffset;
-
-                  var _ref8 = positionsOffset[position] || {},
-                      _ref8$left = _ref8.left,
-                      oldLeft = _ref8$left === void 0 ? '' : _ref8$left,
-                      _ref8$top = _ref8.top,
-                      oldTop = _ref8$top === void 0 ? '' : _ref8$top,
-                      _ref8$bottom = _ref8.bottom,
-                      oldBottom = _ref8$bottom === void 0 ? '' : _ref8$bottom,
-                      _ref8$right = _ref8.right,
-                      oldRight = _ref8$right === void 0 ? '' : _ref8$right;
-
-                  var _ref9 = viewsOffset[view] || {},
+                  var _ref8 = betterPosition || {},
+                      view = _ref8.view,
+                      views = _ref8.views,
+                      _ref8$viewsOffset = _ref8.viewsOffset,
+                      viewsOffset = _ref8$viewsOffset === void 0 ? {} : _ref8$viewsOffset,
+                      targetOffset = _ref8.targetOffset,
+                      popupOffset = _ref8.popupOffset;
+
+                  var _ref9 = positionsOffset[position] || {},
                       _ref9$left = _ref9.left,
-                      left = _ref9$left === void 0 ? '' : _ref9$left,
+                      oldLeft = _ref9$left === void 0 ? '' : _ref9$left,
                       _ref9$top = _ref9.top,
-                      top = _ref9$top === void 0 ? '' : _ref9$top,
+                      oldTop = _ref9$top === void 0 ? '' : _ref9$top,
                       _ref9$bottom = _ref9.bottom,
-                      bottom = _ref9$bottom === void 0 ? '' : _ref9$bottom,
+                      oldBottom = _ref9$bottom === void 0 ? '' : _ref9$bottom,
                       _ref9$right = _ref9.right,
-                      right = _ref9$right === void 0 ? '' : _ref9$right;
+                      oldRight = _ref9$right === void 0 ? '' : _ref9$right;
+
+                  var _ref10 = viewsOffset[view] || {},
+                      _ref10$left = _ref10.left,
+                      left = _ref10$left === void 0 ? '' : _ref10$left,
+                      _ref10$top = _ref10.top,
+                      top = _ref10$top === void 0 ? '' : _ref10$top,
+                      _ref10$bottom = _ref10.bottom,
+                      bottom = _ref10$bottom === void 0 ? '' : _ref10$bottom,
+                      _ref10$right = _ref10.right,
+                      right = _ref10$right === void 0 ? '' : _ref10$right;
 
                   var changeState = isAbsolute ? position !== view : oldLeft !== left || oldTop !== top || oldBottom !== bottom || oldRight !== right; // let isInViewPort = viewPort.isInViewPort(
                   //   placeHolderElement,
@@ -947,11 +984,11 @@ var Popup = function Popup(Component) {
         var height = popupSize.height,
             width = popupSize.width;
 
-        var _ref10 = this.size || {},
-            _ref10$height = _ref10.height,
-            oldHeight = _ref10$height === void 0 ? 0 : _ref10$height,
-            _ref10$width = _ref10.width,
-            oldWidth = _ref10$width === void 0 ? 0 : _ref10$width;
+        var _ref11 = this.size || {},
+            _ref11$height = _ref11.height,
+            oldHeight = _ref11$height === void 0 ? 0 : _ref11$height,
+            _ref11$width = _ref11.width,
+            oldWidth = _ref11$width === void 0 ? 0 : _ref11$width;
 
         var _this$state2 = this.state,
             isPopupReady = _this$state2.isPopupReady,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-220",
+  "version": "1.0.0-temp-220.1",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,