@zohodesk/components 1.0.0-temp-220.4 → 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 = {};
 
@@ -83,7 +84,6 @@ const CLICK_EVENTS = Object.freeze([{
     passive: false
   }
 }]);
-const iframeSelector = '[data-scroll=true] iframe';
 /* eslint-disable react/no-deprecated */
 
 /* eslint-disable react/prop-types */
@@ -160,7 +160,9 @@ const Popup = function (Component) {
       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;
@@ -181,11 +183,10 @@ const Popup = function (Component) {
       popups[group] = groupPopups;
 
       if (Object.keys(popups).length === 1 && groupPopups.length === 1) {
-        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);
-        document.addEventListener('click', this.documentClickHandler1, true);
         document.addEventListener('mousedown', this.handleDocumentMouseDown, true);
         document.addEventListener('focus', this.handleDocumentFocus, true);
       }
@@ -204,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 {
@@ -214,19 +229,14 @@ 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);
-          }
-        });
-      };
+    handleIframeClickEvents(shouldAdd) {
+      this.parentContainerElement.querySelectorAll('iframe').forEach(frame => {
+        const frameDocument = frame.contentDocument;
 
-      toggleListeners(isPopupReady && !isMobile);
+        if (frameDocument) {
+          this.updateListeners(shouldAdd, CLICK_EVENTS, frameDocument);
+        }
+      });
     }
 
     componentDidUpdate(prevProps, prevState) {
@@ -255,8 +265,8 @@ const Popup = function (Component) {
       }
 
       if (oldStateOpen !== isPopupReady && !isMobile || oldIsMobileState !== isMobile) {
-        this.handleScrollAndBlockEvents(isPopupReady, isMobile);
-        this.handleIframeClickEvents(isPopupReady, isMobile);
+        this.handleScrollAndBlockEvents(isPopupReady && !isMobile);
+        this.handleIframeClickEvents(isPopupReady && !isMobile);
       }
     }
 
@@ -274,6 +284,7 @@ const Popup = function (Component) {
       }, popups);
       this.handleRemovingScrollBlock();
       this.handleRemovingScrollToUpdatePosition();
+      this.handleIframeClickEvents(false);
       let noPopups = true;
 
       for (const i in popups) {
@@ -288,11 +299,10 @@ const Popup = function (Component) {
       }
 
       if (noPopups) {
-        document.removeEventListener('click', this.documentClickHandler);
+        this.updateListeners(false, CLICK_EVENTS, document);
         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);
       }
@@ -415,30 +425,25 @@ const Popup = function (Component) {
       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);
+      eventList.forEach(_ref2 => {
+        let {
+          name,
+          handlerName,
+          options
+        } = _ref2;
+        const handler = this[handlerName];
+
+        if (handler) {
+          element[method](name, handler, options);
+        }
+      });
     }
 
     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
+      this.updateListeners(true, SCROLL_BLOCK_EVENTS, document); // Attach event listeners to all iframes within parentContainerElement
 
-      document.querySelectorAll(iframeSelector).forEach(frame => {
+      this.parentContainerElement.querySelectorAll('iframe').forEach(frame => {
         const frameDocument = frame.contentDocument;
 
         if (frameDocument) {
@@ -449,7 +454,7 @@ const Popup = function (Component) {
 
     removeScrollBlockListeners() {
       this.updateListeners(false, SCROLL_BLOCK_EVENTS, document);
-      document.querySelectorAll(iframeSelector).forEach(frame => {
+      this.parentContainerElement.querySelectorAll('iframe').forEach(frame => {
         const frameDocument = frame.contentDocument;
 
         if (frameDocument) {

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 }; }
@@ -144,7 +146,6 @@ var CLICK_EVENTS = Object.freeze([{
     passive: false
   }
 }]);
-var iframeSelector = '[data-scroll=true] iframe';
 /* eslint-disable react/no-deprecated */
 
 /* eslint-disable react/prop-types */
@@ -235,7 +236,9 @@ var Popup = function Popup(Component) {
       _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;
@@ -260,11 +263,10 @@ var Popup = function Popup(Component) {
         popups[group] = groupPopups;
 
         if (Object.keys(popups).length === 1 && groupPopups.length === 1) {
-          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);
-          document.addEventListener('click', this.documentClickHandler1, true);
           document.addEventListener('mousedown', this.handleDocumentMouseDown, true);
           document.addEventListener('focus', this.handleDocumentFocus, true);
         }
@@ -281,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 {
@@ -294,22 +311,16 @@ var Popup = function Popup(Component) {
       }
     }, {
       key: "handleIframeClickEvents",
-      value: function handleIframeClickEvents(isPopupReady, isMobile) {
+      value: function handleIframeClickEvents(shouldAdd) {
         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);
-            }
-          });
-        };
+        this.parentContainerElement.querySelectorAll('iframe').forEach(function (frame) {
+          var frameDocument = frame.contentDocument;
 
-        toggleListeners(isPopupReady && !isMobile);
+          if (frameDocument) {
+            _this2.updateListeners(shouldAdd, CLICK_EVENTS, frameDocument);
+          }
+        });
       }
     }, {
       key: "componentDidUpdate",
@@ -336,8 +347,8 @@ var Popup = function Popup(Component) {
         }
 
         if (oldStateOpen !== isPopupReady && !isMobile || oldIsMobileState !== isMobile) {
-          this.handleScrollAndBlockEvents(isPopupReady, isMobile);
-          this.handleIframeClickEvents(isPopupReady, isMobile);
+          this.handleScrollAndBlockEvents(isPopupReady && !isMobile);
+          this.handleIframeClickEvents(isPopupReady && !isMobile);
         }
       }
     }, {
@@ -360,6 +371,7 @@ var Popup = function Popup(Component) {
         }, popups);
         this.handleRemovingScrollBlock();
         this.handleRemovingScrollToUpdatePosition();
+        this.handleIframeClickEvents(false);
         var noPopups = true;
 
         for (var i in popups) {
@@ -374,11 +386,10 @@ var Popup = function Popup(Component) {
         }
 
         if (noPopups) {
-          document.removeEventListener('click', this.documentClickHandler);
+          this.updateListeners(false, CLICK_EVENTS, document);
           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);
         }
@@ -506,21 +517,16 @@ var Popup = function Popup(Component) {
         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);
+        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",
@@ -528,9 +534,9 @@ var Popup = function Popup(Component) {
         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
+        this.updateListeners(true, SCROLL_BLOCK_EVENTS, document); // Attach event listeners to all iframes within parentContainerElement
 
-        document.querySelectorAll(iframeSelector).forEach(function (frame) {
+        this.parentContainerElement.querySelectorAll('iframe').forEach(function (frame) {
           var frameDocument = frame.contentDocument;
 
           if (frameDocument) {
@@ -544,7 +550,7 @@ var Popup = function Popup(Component) {
         var _this6 = this;
 
         this.updateListeners(false, SCROLL_BLOCK_EVENTS, document);
-        document.querySelectorAll(iframeSelector).forEach(function (frame) {
+        this.parentContainerElement.querySelectorAll('iframe').forEach(function (frame) {
           var frameDocument = frame.contentDocument;
 
           if (frameDocument) {

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.4",
+  "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.72",
+    "@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.72",
+    "@zohodesk/icons": "1.0.75",
     "@zohodesk/variables": "1.0.0",
     "@zohodesk/svg": "1.1.22",
     "@zohodesk/virtualizer": "1.0.3",