@zohodesk/components 1.2.50 → 1.2.51

package/README.md

@@ -32,6 +32,9 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.2.51
+
+- **Popup** - Fixed issue: Error on unmount when target ref is not available.
 
 # 1.2.50
 

package/es/Popup/Popup.js

@@ -95,6 +95,8 @@ const Popup = function (Component) {
       this.preventKeyboardScroll = this.preventKeyboardScroll.bind(this);
       this.addScrollBlockListeners = this.addScrollBlockListeners.bind(this);
       this.removeScrollBlockListeners = this.removeScrollBlockListeners.bind(this);
+      this.handleAddingScrollBlock = this.handleAddingScrollBlock.bind(this);
+      this.handleRemovingScrollBlock = this.handleRemovingScrollBlock.bind(this);
       this.handleIntersectionObserver = this.handleIntersectionObserver.bind(this);
       this.popupObserver = new ResizeObserver(this.handlePopupResize); //dropBoxSize
 
@@ -152,9 +154,7 @@ const Popup = function (Component) {
         dropElement
       } = this;
       const {
-        needResizeHandling: propResizeHandling,
-        isAbsolutePositioningNeeded,
-        isOutsideScrollBlocked
+        needResizeHandling: propResizeHandling
       } = this.props;
 
       if (oldStateOpen !== isPopupReady) {
@@ -165,14 +165,10 @@ const Popup = function (Component) {
           this.popupObserver.disconnect();
         }
 
-        if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
-          if (isPopupReady) {
-            addIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
-            this.addScrollBlockListeners();
-          } else {
-            removeIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
-            this.removeScrollBlockListeners();
-          }
+        if (isPopupReady) {
+          this.handleAddingScrollBlock();
+        } else {
+          this.handleRemovingScrollBlock();
         }
       }
     }
@@ -189,8 +185,7 @@ const Popup = function (Component) {
 
         return res;
       }, popups);
-      removeIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
-      this.removeScrollBlockListeners();
+      this.handleRemovingScrollBlock();
       let noPopups = true;
 
       for (const i in popups) {
@@ -215,6 +210,30 @@ const Popup = function (Component) {
       }
     }
 
+    handleAddingScrollBlock() {
+      const {
+        isAbsolutePositioningNeeded,
+        isOutsideScrollBlocked
+      } = this.props;
+
+      if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
+        addIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
+        this.addScrollBlockListeners();
+      }
+    }
+
+    handleRemovingScrollBlock() {
+      const {
+        isAbsolutePositioningNeeded,
+        isOutsideScrollBlocked
+      } = this.props;
+
+      if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
+        removeIntersectionObserver(this.placeHolderElement, this.handleIntersectionObserver);
+        this.removeScrollBlockListeners();
+      }
+    }
+
     addScrollBlockListeners() {
       document.addEventListener('wheel', this.handleBlockScroll, {
         capture: true,

package/es/Popup/intersectionObserver.js

@@ -2,38 +2,48 @@ let observerCallbacks = null;
 let intersectionObserver = null;
 
 function handleObserverCallbacks(entries) {
-  entries.map((entry, i) => {
+  entries.forEach(entry => {
     let oldCallbacks = observerCallbacks.get(entry.target);
-    oldCallbacks.length && oldCallbacks.forEach(callback => {
-      callback && callback(entry);
-    });
+
+    if (Array.isArray(oldCallbacks) && oldCallbacks.length) {
+      oldCallbacks.forEach(callback => {
+        callback && callback(entry);
+      });
+    }
   });
 }
 
 export function addIntersectionObserver(element, callback, options) {
-  if (intersectionObserver === null && observerCallbacks === null) {
-    intersectionObserver = new IntersectionObserver(entries => {
-      handleObserverCallbacks(entries);
-    }, options);
-    observerCallbacks = new Map();
-  }
+  if (!!element && typeof callback == 'function') {
+    if (intersectionObserver === null && observerCallbacks === null) {
+      intersectionObserver = new IntersectionObserver(entries => {
+        handleObserverCallbacks(entries);
+      }, options);
+      observerCallbacks = new Map();
+    }
 
-  intersectionObserver.observe(element);
-  let oldCallbacks = observerCallbacks.get(element) || [];
-  observerCallbacks.set(element, [...oldCallbacks, callback]);
+    intersectionObserver.observe(element);
+    let oldCallbacks = observerCallbacks.get(element) || [];
+    observerCallbacks.set(element, [...oldCallbacks, callback]);
+  }
 }
 export function removeIntersectionObserver(element, callback) {
-  let oldCallbacks = observerCallbacks ? observerCallbacks.get(element) : [];
-  oldCallbacks = oldCallbacks.filter(handler => handler !== callback);
+  if (!!element && typeof callback == 'function') {
+    let oldCallbacks = observerCallbacks ? observerCallbacks.get(element) : null;
 
-  if (intersectionObserver && oldCallbacks.length === 0) {
-    observerCallbacks.delete(element);
-    intersectionObserver.unobserve(element);
-  }
+    if (Array.isArray(oldCallbacks)) {
+      let callbacks = oldCallbacks.filter(handler => handler !== callback);
+
+      if (intersectionObserver && callbacks.length === 0) {
+        observerCallbacks.delete(element);
+        intersectionObserver.unobserve(element);
+      }
+    }
 
-  if (intersectionObserver && observerCallbacks && observerCallbacks.size === 0) {
-    intersectionObserver.disconnect();
-    intersectionObserver = null;
-    observerCallbacks = null;
+    if (intersectionObserver && observerCallbacks && observerCallbacks.size === 0) {
+      intersectionObserver.disconnect();
+      intersectionObserver = null;
+      observerCallbacks = null;
+    }
   }
 }

package/lib/Popup/Popup.js

@@ -158,6 +158,8 @@ var Popup = function Popup(Component) {
       _this.preventKeyboardScroll = _this.preventKeyboardScroll.bind(_assertThisInitialized(_this));
       _this.addScrollBlockListeners = _this.addScrollBlockListeners.bind(_assertThisInitialized(_this));
       _this.removeScrollBlockListeners = _this.removeScrollBlockListeners.bind(_assertThisInitialized(_this));
+      _this.handleAddingScrollBlock = _this.handleAddingScrollBlock.bind(_assertThisInitialized(_this));
+      _this.handleRemovingScrollBlock = _this.handleRemovingScrollBlock.bind(_assertThisInitialized(_this));
       _this.handleIntersectionObserver = _this.handleIntersectionObserver.bind(_assertThisInitialized(_this));
       _this.popupObserver = new _ResizeObserver["default"](_this.handlePopupResize); //dropBoxSize
 
@@ -216,10 +218,7 @@ var Popup = function Popup(Component) {
             oldStateOpen = _ref2$isPopupReady === void 0 ? false : _ref2$isPopupReady;
 
         var dropElement = this.dropElement;
-        var _this$props = this.props,
-            propResizeHandling = _this$props.needResizeHandling,
-            isAbsolutePositioningNeeded = _this$props.isAbsolutePositioningNeeded,
-            isOutsideScrollBlocked = _this$props.isOutsideScrollBlocked;
+        var propResizeHandling = this.props.needResizeHandling;
 
         if (oldStateOpen !== isPopupReady) {
           if (isPopupReady && dropElement && (propResizeHandling !== undefined ? propResizeHandling : needResizeHandling)) {
@@ -229,14 +228,10 @@ var Popup = function Popup(Component) {
             this.popupObserver.disconnect();
           }
 
-          if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
-            if (isPopupReady) {
-              (0, _intersectionObserver.addIntersectionObserver)(this.placeHolderElement, this.handleIntersectionObserver);
-              this.addScrollBlockListeners();
-            } else {
-              (0, _intersectionObserver.removeIntersectionObserver)(this.placeHolderElement, this.handleIntersectionObserver);
-              this.removeScrollBlockListeners();
-            }
+          if (isPopupReady) {
+            this.handleAddingScrollBlock();
+          } else {
+            this.handleRemovingScrollBlock();
           }
         }
       }
@@ -258,8 +253,7 @@ var Popup = function Popup(Component) {
 
           return res;
         }, popups);
-        (0, _intersectionObserver.removeIntersectionObserver)(this.placeHolderElement, this.handleIntersectionObserver);
-        this.removeScrollBlockListeners();
+        this.handleRemovingScrollBlock();
         var noPopups = true;
 
         for (var i in popups) {
@@ -283,6 +277,30 @@ var Popup = function Popup(Component) {
           document.removeEventListener('focus', this.handleDocumentFocus, true);
         }
       }
+    }, {
+      key: "handleAddingScrollBlock",
+      value: function handleAddingScrollBlock() {
+        var _this$props = this.props,
+            isAbsolutePositioningNeeded = _this$props.isAbsolutePositioningNeeded,
+            isOutsideScrollBlocked = _this$props.isOutsideScrollBlocked;
+
+        if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
+          (0, _intersectionObserver.addIntersectionObserver)(this.placeHolderElement, this.handleIntersectionObserver);
+          this.addScrollBlockListeners();
+        }
+      }
+    }, {
+      key: "handleRemovingScrollBlock",
+      value: function handleRemovingScrollBlock() {
+        var _this$props2 = this.props,
+            isAbsolutePositioningNeeded = _this$props2.isAbsolutePositioningNeeded,
+            isOutsideScrollBlocked = _this$props2.isOutsideScrollBlocked;
+
+        if (isOutsideScrollBlocked && !isAbsolutePositioningNeeded) {
+          (0, _intersectionObserver.removeIntersectionObserver)(this.placeHolderElement, this.handleIntersectionObserver);
+          this.removeScrollBlockListeners();
+        }
+      }
     }, {
       key: "addScrollBlockListeners",
       value: function addScrollBlockListeners() {

package/lib/Popup/intersectionObserver.js

@@ -22,41 +22,51 @@ var observerCallbacks = null;
 var intersectionObserver = null;
 
 function handleObserverCallbacks(entries) {
-  entries.map(function (entry, i) {
+  entries.forEach(function (entry) {
     var oldCallbacks = observerCallbacks.get(entry.target);
-    oldCallbacks.length && oldCallbacks.forEach(function (callback) {
-      callback && callback(entry);
-    });
+
+    if (Array.isArray(oldCallbacks) && oldCallbacks.length) {
+      oldCallbacks.forEach(function (callback) {
+        callback && callback(entry);
+      });
+    }
   });
 }
 
 function addIntersectionObserver(element, callback, options) {
-  if (intersectionObserver === null && observerCallbacks === null) {
-    intersectionObserver = new IntersectionObserver(function (entries) {
-      handleObserverCallbacks(entries);
-    }, options);
-    observerCallbacks = new Map();
-  }
+  if (!!element && typeof callback == 'function') {
+    if (intersectionObserver === null && observerCallbacks === null) {
+      intersectionObserver = new IntersectionObserver(function (entries) {
+        handleObserverCallbacks(entries);
+      }, options);
+      observerCallbacks = new Map();
+    }
 
-  intersectionObserver.observe(element);
-  var oldCallbacks = observerCallbacks.get(element) || [];
-  observerCallbacks.set(element, [].concat(_toConsumableArray(oldCallbacks), [callback]));
+    intersectionObserver.observe(element);
+    var oldCallbacks = observerCallbacks.get(element) || [];
+    observerCallbacks.set(element, [].concat(_toConsumableArray(oldCallbacks), [callback]));
+  }
 }
 
 function removeIntersectionObserver(element, callback) {
-  var oldCallbacks = observerCallbacks ? observerCallbacks.get(element) : [];
-  oldCallbacks = oldCallbacks.filter(function (handler) {
-    return handler !== callback;
-  });
+  if (!!element && typeof callback == 'function') {
+    var oldCallbacks = observerCallbacks ? observerCallbacks.get(element) : null;
 
-  if (intersectionObserver && oldCallbacks.length === 0) {
-    observerCallbacks["delete"](element);
-    intersectionObserver.unobserve(element);
-  }
+    if (Array.isArray(oldCallbacks)) {
+      var callbacks = oldCallbacks.filter(function (handler) {
+        return handler !== callback;
+      });
+
+      if (intersectionObserver && callbacks.length === 0) {
+        observerCallbacks["delete"](element);
+        intersectionObserver.unobserve(element);
+      }
+    }
 
-  if (intersectionObserver && observerCallbacks && observerCallbacks.size === 0) {
-    intersectionObserver.disconnect();
-    intersectionObserver = null;
-    observerCallbacks = null;
+    if (intersectionObserver && observerCallbacks && observerCallbacks.size === 0) {
+      intersectionObserver.disconnect();
+      intersectionObserver = null;
+      observerCallbacks = null;
+    }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.2.50",
+  "version": "1.2.51",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -71,7 +71,7 @@
     "@zohodesk/a11y": "2.2.6",
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/hooks": "2.0.5",
-    "@zohodesk/icons": "1.0.66",
+    "@zohodesk/icons": "1.0.67",
     "@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.66",
+    "@zohodesk/icons": "1.0.67",
     "@zohodesk/variables": "1.0.0",
     "@zohodesk/svg": "1.1.22",
     "@zohodesk/virtualizer": "1.0.3",