@zohodesk/components 1.2.47 → 1.2.48

package/README.md

@@ -32,6 +32,13 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.2.48
+
+- **ResizeObserver**
+
+  - The ResizeObserver PolyFill code has been removed, and a separate copy with the PolyFill included is saved under the filename ResizeObserverWithPolyfill.js
+  
+
 # 1.2.47
 
 - **DateTime**

package/es/Responsive/ResizeObserver.js

@@ -1,68 +1,45 @@
-const hasResizeObserver = !!window.ResizeObserver;
-const mutationObserverOptions = {
-  //NOTE: we donot consider child Count
-  // childList: true,
-  attributes: true
-};
-
-function getSize(element) {
-  let {
-    offsetHeight,
-    offsetWidth
-  } = element; // const { height, width } = element.getBoundingClientRect();
+function getBorderBoxSizeFromEntry(entry) {
+  const {
+    borderBoxSize
+  } = entry;
+  return borderBoxSize[0];
+}
 
+function getSize(entry) {
+  const borderBoxSize = getBorderBoxSizeFromEntry(entry);
   return {
-    height: offsetHeight,
-    width: offsetWidth
+    height: borderBoxSize.blockSize,
+    width: borderBoxSize.inlineSize
   };
 }
 
-function dispatch() {
-  let resizeResponsive = new Event('resizeResponsive');
-  window.dispatchEvent(resizeResponsive);
-}
-
-if (!hasResizeObserver) {
-  let interval = null;
-  window.addEventListener('resize', () => {
-    clearTimeout(interval);
-    interval = setTimeout(dispatch, 100);
-  });
-} // NOTE: this is not full polyfill , we just wrote what types of changes wlli
-
-
 export default class ResizeObserverPolyfill {
   constructor(onResize) {
-    // method finding
-    this.transitionEndHandler = this.transitionEndHandler.bind(this);
-    this.resizeHandlerDispatch = this.resizeHandlerDispatch.bind(this);
     this.resizeHandler = this.resizeHandler.bind(this);
-    this.replaceResizeHandler = this.replaceResizeHandler.bind(this);
-    this.debounce = this.debounce.bind(this);
     this.onResize = onResize;
     this.targetNode = null;
     this.size = {
       height: 0,
       width: 0
     };
-
-    if (hasResizeObserver) {
-      this.resizeObserverInstance = new window.ResizeObserver(this.resizeHandlerDispatch);
-    } else {
-      this.mutationObserverInstance = new window.MutationObserver(this.resizeHandlerDispatch);
-    }
+    this.resizeObserverInstance = new window.ResizeObserver(this.resizeHandler);
   }
 
   replaceResizeHandler(onResize) {
     this.onResize = onResize;
   }
 
-  resizeHandler() {
-    if (!this.targetNode) {
+  getEntry(entries) {
+    return entries[0];
+  }
+
+  resizeHandler(entries) {
+    if (!this.targetNode || !entries.length) {
       return;
     }
 
-    const currentSize = getSize(this.targetNode); // if (this.size && shallowCompare(currentSize, this.size)) {
+    const entry = this.getEntry(entries);
+    const currentSize = getSize(entry);
 
     if (this.size && currentSize.height === this.size.height && currentSize.width === this.size.width) {
       return;
@@ -73,48 +50,9 @@ export default class ResizeObserverPolyfill {
     return true;
   }
 
-  resizeHandlerDispatch() {
-    if (!this.resizeHandler() || hasResizeObserver) {
-      return;
-    }
-
-    dispatch();
-  }
-
-  debounce() {
-    clearTimeout(this.interval);
-    this.interval = setTimeout(this.resizeHandler, 100);
-  }
-
-  transitionEndHandler(event) {
-    if (event.propertyName.indexOf('color') === -1) {
-      this.resizeHandlerDispatch();
-    }
-  }
-
-  addEventListeners(targetNode) {
-    targetNode.addEventListener('transitionend', this.transitionEndHandler);
-    window.addEventListener('resizeResponsive', this.debounce);
-    targetNode.addEventListener('animationend', this.resizeHandlerDispatch);
-    targetNode.addEventListener('webkitAnimationEnd', this.resizeHandlerDispatch);
-  }
-
-  removeEventListeners(targetNode) {
-    targetNode.removeEventListener('transitionend', this.transitionEndHandler);
-    window.removeEventListener('resizeResponsive', this.debounce);
-    targetNode.removeEventListener('animationend', this.resizeHandlerDispatch);
-    targetNode.removeEventListener('webkitAnimationEnd', this.resizeHandlerDispatch);
-  }
-
   observe(targetNode) {
     this.targetNode = targetNode;
-
-    if (hasResizeObserver) {
-      this.resizeObserverInstance.observe(targetNode);
-    } else {
-      this.addEventListeners(targetNode);
-      this.mutationObserverInstance.observe(targetNode, mutationObserverOptions);
-    }
+    this.resizeObserverInstance.observe(targetNode);
   }
 
   replaceObservationElement(targetNode) {
@@ -124,12 +62,10 @@ export default class ResizeObserverPolyfill {
 
     this.targetNode && this.disconnect();
     targetNode && this.observe(targetNode);
-    targetNode && this.resizeHandlerDispatch();
   }
 
   disconnect() {
-    this.targetNode && this.removeEventListeners(this.targetNode);
-    hasResizeObserver ? this.resizeObserverInstance.disconnect() : this.mutationObserverInstance.disconnect();
+    this.resizeObserverInstance.disconnect();
     this.targetNode = null;
     this.size = {
       height: 0,

package/es/Responsive/ResizeObserverWithPolyfill.js

@@ -0,0 +1,140 @@
+const hasResizeObserver = !!window.ResizeObserver;
+const mutationObserverOptions = {
+  //NOTE: we donot consider child Count
+  // childList: true,
+  attributes: true
+};
+
+function getSize(element) {
+  let {
+    offsetHeight,
+    offsetWidth
+  } = element; // const { height, width } = element.getBoundingClientRect();
+
+  return {
+    height: offsetHeight,
+    width: offsetWidth
+  };
+}
+
+function dispatch() {
+  let resizeResponsive = new Event('resizeResponsive');
+  window.dispatchEvent(resizeResponsive);
+}
+
+if (!hasResizeObserver) {
+  let interval = null;
+  window.addEventListener('resize', () => {
+    clearTimeout(interval);
+    interval = setTimeout(dispatch, 100);
+  });
+} // NOTE: this is not full polyfill , we just wrote what types of changes wlli
+
+
+export default class ResizeObserverPolyfill {
+  constructor(onResize) {
+    // method finding
+    this.transitionEndHandler = this.transitionEndHandler.bind(this);
+    this.resizeHandlerDispatch = this.resizeHandlerDispatch.bind(this);
+    this.resizeHandler = this.resizeHandler.bind(this);
+    this.replaceResizeHandler = this.replaceResizeHandler.bind(this);
+    this.debounce = this.debounce.bind(this);
+    this.onResize = onResize;
+    this.targetNode = null;
+    this.size = {
+      height: 0,
+      width: 0
+    };
+
+    if (hasResizeObserver) {
+      this.resizeObserverInstance = new window.ResizeObserver(this.resizeHandlerDispatch);
+    } else {
+      this.mutationObserverInstance = new window.MutationObserver(this.resizeHandlerDispatch);
+    }
+  }
+
+  replaceResizeHandler(onResize) {
+    this.onResize = onResize;
+  }
+
+  resizeHandler() {
+    if (!this.targetNode) {
+      return;
+    }
+
+    const currentSize = getSize(this.targetNode); // if (this.size && shallowCompare(currentSize, this.size)) {
+
+    if (this.size && currentSize.height === this.size.height && currentSize.width === this.size.width) {
+      return;
+    }
+
+    this.size = currentSize;
+    this.onResize(this.size, this.targetNode);
+    return true;
+  }
+
+  resizeHandlerDispatch() {
+    if (!this.resizeHandler() || hasResizeObserver) {
+      return;
+    }
+
+    dispatch();
+  }
+
+  debounce() {
+    clearTimeout(this.interval);
+    this.interval = setTimeout(this.resizeHandler, 100);
+  }
+
+  transitionEndHandler(event) {
+    if (event.propertyName.indexOf('color') === -1) {
+      this.resizeHandlerDispatch();
+    }
+  }
+
+  addEventListeners(targetNode) {
+    targetNode.addEventListener('transitionend', this.transitionEndHandler);
+    window.addEventListener('resizeResponsive', this.debounce);
+    targetNode.addEventListener('animationend', this.resizeHandlerDispatch);
+    targetNode.addEventListener('webkitAnimationEnd', this.resizeHandlerDispatch);
+  }
+
+  removeEventListeners(targetNode) {
+    targetNode.removeEventListener('transitionend', this.transitionEndHandler);
+    window.removeEventListener('resizeResponsive', this.debounce);
+    targetNode.removeEventListener('animationend', this.resizeHandlerDispatch);
+    targetNode.removeEventListener('webkitAnimationEnd', this.resizeHandlerDispatch);
+  }
+
+  observe(targetNode) {
+    this.targetNode = targetNode;
+
+    if (hasResizeObserver) {
+      this.resizeObserverInstance.observe(targetNode);
+    } else {
+      this.addEventListeners(targetNode);
+      this.mutationObserverInstance.observe(targetNode, mutationObserverOptions);
+    }
+  }
+
+  replaceObservationElement(targetNode) {
+    if (this.targetNode === targetNode) {
+      return;
+    }
+
+    this.targetNode && this.disconnect();
+    targetNode && this.observe(targetNode);
+    targetNode && this.resizeHandlerDispatch();
+  }
+
+  disconnect() {
+    this.targetNode && this.removeEventListeners(this.targetNode);
+    hasResizeObserver ? this.resizeObserverInstance.disconnect() : this.mutationObserverInstance.disconnect();
+    this.targetNode = null;
+    this.size = {
+      height: 0,
+      width: 0
+    };
+  }
+
+}

package/lib/Responsive/ResizeObserver.js

@@ -11,59 +11,31 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
-var hasResizeObserver = !!window.ResizeObserver;
-var mutationObserverOptions = {
-  //NOTE: we donot consider child Count
-  // childList: true,
-  attributes: true
-};
-
-function getSize(element) {
-  var offsetHeight = element.offsetHeight,
-      offsetWidth = element.offsetWidth; // const { height, width } = element.getBoundingClientRect();
+function getBorderBoxSizeFromEntry(entry) {
+  var borderBoxSize = entry.borderBoxSize;
+  return borderBoxSize[0];
+}
 
+function getSize(entry) {
+  var borderBoxSize = getBorderBoxSizeFromEntry(entry);
   return {
-    height: offsetHeight,
-    width: offsetWidth
+    height: borderBoxSize.blockSize,
+    width: borderBoxSize.inlineSize
   };
 }
 
-function dispatch() {
-  var resizeResponsive = new Event('resizeResponsive');
-  window.dispatchEvent(resizeResponsive);
-}
-
-if (!hasResizeObserver) {
-  var interval = null;
-  window.addEventListener('resize', function () {
-    clearTimeout(interval);
-    interval = setTimeout(dispatch, 100);
-  });
-} // NOTE: this is not full polyfill , we just wrote what types of changes wlli
-
-
 var ResizeObserverPolyfill = /*#__PURE__*/function () {
   function ResizeObserverPolyfill(onResize) {
     _classCallCheck(this, ResizeObserverPolyfill);
 
-    // method finding
-    this.transitionEndHandler = this.transitionEndHandler.bind(this);
-    this.resizeHandlerDispatch = this.resizeHandlerDispatch.bind(this);
     this.resizeHandler = this.resizeHandler.bind(this);
-    this.replaceResizeHandler = this.replaceResizeHandler.bind(this);
-    this.debounce = this.debounce.bind(this);
     this.onResize = onResize;
     this.targetNode = null;
     this.size = {
       height: 0,
       width: 0
     };
-
-    if (hasResizeObserver) {
-      this.resizeObserverInstance = new window.ResizeObserver(this.resizeHandlerDispatch);
-    } else {
-      this.mutationObserverInstance = new window.MutationObserver(this.resizeHandlerDispatch);
-    }
+    this.resizeObserverInstance = new window.ResizeObserver(this.resizeHandler);
   }
 
   _createClass(ResizeObserverPolyfill, [{
@@ -71,14 +43,20 @@ var ResizeObserverPolyfill = /*#__PURE__*/function () {
     value: function replaceResizeHandler(onResize) {
       this.onResize = onResize;
     }
+  }, {
+    key: "getEntry",
+    value: function getEntry(entries) {
+      return entries[0];
+    }
   }, {
     key: "resizeHandler",
-    value: function resizeHandler() {
-      if (!this.targetNode) {
+    value: function resizeHandler(entries) {
+      if (!this.targetNode || !entries.length) {
         return;
       }
 
-      var currentSize = getSize(this.targetNode); // if (this.size && shallowCompare(currentSize, this.size)) {
+      var entry = this.getEntry(entries);
+      var currentSize = getSize(entry);
 
       if (this.size && currentSize.height === this.size.height && currentSize.width === this.size.width) {
         return;
@@ -88,55 +66,11 @@ var ResizeObserverPolyfill = /*#__PURE__*/function () {
       this.onResize(this.size, this.targetNode);
       return true;
     }
-  }, {
-    key: "resizeHandlerDispatch",
-    value: function resizeHandlerDispatch() {
-      if (!this.resizeHandler() || hasResizeObserver) {
-        return;
-      }
-
-      dispatch();
-    }
-  }, {
-    key: "debounce",
-    value: function debounce() {
-      clearTimeout(this.interval);
-      this.interval = setTimeout(this.resizeHandler, 100);
-    }
-  }, {
-    key: "transitionEndHandler",
-    value: function transitionEndHandler(event) {
-      if (event.propertyName.indexOf('color') === -1) {
-        this.resizeHandlerDispatch();
-      }
-    }
-  }, {
-    key: "addEventListeners",
-    value: function addEventListeners(targetNode) {
-      targetNode.addEventListener('transitionend', this.transitionEndHandler);
-      window.addEventListener('resizeResponsive', this.debounce);
-      targetNode.addEventListener('animationend', this.resizeHandlerDispatch);
-      targetNode.addEventListener('webkitAnimationEnd', this.resizeHandlerDispatch);
-    }
-  }, {
-    key: "removeEventListeners",
-    value: function removeEventListeners(targetNode) {
-      targetNode.removeEventListener('transitionend', this.transitionEndHandler);
-      window.removeEventListener('resizeResponsive', this.debounce);
-      targetNode.removeEventListener('animationend', this.resizeHandlerDispatch);
-      targetNode.removeEventListener('webkitAnimationEnd', this.resizeHandlerDispatch);
-    }
   }, {
     key: "observe",
     value: function observe(targetNode) {
       this.targetNode = targetNode;
-
-      if (hasResizeObserver) {
-        this.resizeObserverInstance.observe(targetNode);
-      } else {
-        this.addEventListeners(targetNode);
-        this.mutationObserverInstance.observe(targetNode, mutationObserverOptions);
-      }
+      this.resizeObserverInstance.observe(targetNode);
     }
   }, {
     key: "replaceObservationElement",
@@ -147,13 +81,11 @@ var ResizeObserverPolyfill = /*#__PURE__*/function () {
 
       this.targetNode && this.disconnect();
       targetNode && this.observe(targetNode);
-      targetNode && this.resizeHandlerDispatch();
     }
   }, {
     key: "disconnect",
     value: function disconnect() {
-      this.targetNode && this.removeEventListeners(this.targetNode);
-      hasResizeObserver ? this.resizeObserverInstance.disconnect() : this.mutationObserverInstance.disconnect();
+      this.resizeObserverInstance.disconnect();
       this.targetNode = null;
       this.size = {
         height: 0,

package/lib/Responsive/ResizeObserverWithPolyfill.js

@@ -0,0 +1,168 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+var hasResizeObserver = !!window.ResizeObserver;
+var mutationObserverOptions = {
+  //NOTE: we donot consider child Count
+  // childList: true,
+  attributes: true
+};
+
+function getSize(element) {
+  var offsetHeight = element.offsetHeight,
+      offsetWidth = element.offsetWidth; // const { height, width } = element.getBoundingClientRect();
+
+  return {
+    height: offsetHeight,
+    width: offsetWidth
+  };
+}
+
+function dispatch() {
+  var resizeResponsive = new Event('resizeResponsive');
+  window.dispatchEvent(resizeResponsive);
+}
+
+if (!hasResizeObserver) {
+  var interval = null;
+  window.addEventListener('resize', function () {
+    clearTimeout(interval);
+    interval = setTimeout(dispatch, 100);
+  });
+} // NOTE: this is not full polyfill , we just wrote what types of changes wlli
+
+
+var ResizeObserverPolyfill = /*#__PURE__*/function () {
+  function ResizeObserverPolyfill(onResize) {
+    _classCallCheck(this, ResizeObserverPolyfill);
+
+    // method finding
+    this.transitionEndHandler = this.transitionEndHandler.bind(this);
+    this.resizeHandlerDispatch = this.resizeHandlerDispatch.bind(this);
+    this.resizeHandler = this.resizeHandler.bind(this);
+    this.replaceResizeHandler = this.replaceResizeHandler.bind(this);
+    this.debounce = this.debounce.bind(this);
+    this.onResize = onResize;
+    this.targetNode = null;
+    this.size = {
+      height: 0,
+      width: 0
+    };
+
+    if (hasResizeObserver) {
+      this.resizeObserverInstance = new window.ResizeObserver(this.resizeHandlerDispatch);
+    } else {
+      this.mutationObserverInstance = new window.MutationObserver(this.resizeHandlerDispatch);
+    }
+  }
+
+  _createClass(ResizeObserverPolyfill, [{
+    key: "replaceResizeHandler",
+    value: function replaceResizeHandler(onResize) {
+      this.onResize = onResize;
+    }
+  }, {
+    key: "resizeHandler",
+    value: function resizeHandler() {
+      if (!this.targetNode) {
+        return;
+      }
+
+      var currentSize = getSize(this.targetNode); // if (this.size && shallowCompare(currentSize, this.size)) {
+
+      if (this.size && currentSize.height === this.size.height && currentSize.width === this.size.width) {
+        return;
+      }
+
+      this.size = currentSize;
+      this.onResize(this.size, this.targetNode);
+      return true;
+    }
+  }, {
+    key: "resizeHandlerDispatch",
+    value: function resizeHandlerDispatch() {
+      if (!this.resizeHandler() || hasResizeObserver) {
+        return;
+      }
+
+      dispatch();
+    }
+  }, {
+    key: "debounce",
+    value: function debounce() {
+      clearTimeout(this.interval);
+      this.interval = setTimeout(this.resizeHandler, 100);
+    }
+  }, {
+    key: "transitionEndHandler",
+    value: function transitionEndHandler(event) {
+      if (event.propertyName.indexOf('color') === -1) {
+        this.resizeHandlerDispatch();
+      }
+    }
+  }, {
+    key: "addEventListeners",
+    value: function addEventListeners(targetNode) {
+      targetNode.addEventListener('transitionend', this.transitionEndHandler);
+      window.addEventListener('resizeResponsive', this.debounce);
+      targetNode.addEventListener('animationend', this.resizeHandlerDispatch);
+      targetNode.addEventListener('webkitAnimationEnd', this.resizeHandlerDispatch);
+    }
+  }, {
+    key: "removeEventListeners",
+    value: function removeEventListeners(targetNode) {
+      targetNode.removeEventListener('transitionend', this.transitionEndHandler);
+      window.removeEventListener('resizeResponsive', this.debounce);
+      targetNode.removeEventListener('animationend', this.resizeHandlerDispatch);
+      targetNode.removeEventListener('webkitAnimationEnd', this.resizeHandlerDispatch);
+    }
+  }, {
+    key: "observe",
+    value: function observe(targetNode) {
+      this.targetNode = targetNode;
+
+      if (hasResizeObserver) {
+        this.resizeObserverInstance.observe(targetNode);
+      } else {
+        this.addEventListeners(targetNode);
+        this.mutationObserverInstance.observe(targetNode, mutationObserverOptions);
+      }
+    }
+  }, {
+    key: "replaceObservationElement",
+    value: function replaceObservationElement(targetNode) {
+      if (this.targetNode === targetNode) {
+        return;
+      }
+
+      this.targetNode && this.disconnect();
+      targetNode && this.observe(targetNode);
+      targetNode && this.resizeHandlerDispatch();
+    }
+  }, {
+    key: "disconnect",
+    value: function disconnect() {
+      this.targetNode && this.removeEventListeners(this.targetNode);
+      hasResizeObserver ? this.resizeObserverInstance.disconnect() : this.mutationObserverInstance.disconnect();
+      this.targetNode = null;
+      this.size = {
+        height: 0,
+        width: 0
+      };
+    }
+  }]);
+
+  return ResizeObserverPolyfill;
+}();
+
+exports["default"] = ResizeObserverPolyfill;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.2.47",
+  "version": "1.2.48",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -71,8 +71,8 @@
     "@zohodesk/a11y": "2.2.6",
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/hooks": "2.0.5",
-    "@zohodesk/icons": "1.0.62",
-    "@zohodesk/svg": "1.1.19",
+    "@zohodesk/icons": "1.0.63",
+    "@zohodesk/svg": "1.1.22",
     "@zohodesk/utils": "1.3.14",
     "@zohodesk/variables": "1.0.0",
     "@zohodesk/virtualizer": "1.0.3",
@@ -86,9 +86,9 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.0.62",
+    "@zohodesk/icons": "1.0.63",
     "@zohodesk/variables": "1.0.0",
-    "@zohodesk/svg": "1.1.19",
+    "@zohodesk/svg": "1.1.22",
     "@zohodesk/virtualizer": "1.0.3",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",