@zohodesk/components 1.0.0-alpha-237 → 1.0.0-alpha-238

package/lib/Tooltip/Tooltip.js

@@ -15,6 +15,8 @@ var _Config = require("../Provider/Config");
 
 var _TooltipModule = _interopRequireDefault(require("./Tooltip.module.css"));
 
+var _ResizeObserver = _interopRequireDefault(require("../Responsive/ResizeObserver"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -62,10 +64,53 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
     _this.getDirection = document.getElementsByTagName('html')[0];
     _this.leftRightScreenEdge = _this.leftRightScreenEdge.bind(_assertThisInitialized(_this));
     _this.topBottomScreenEdge = _this.topBottomScreenEdge.bind(_assertThisInitialized(_this));
+    _this.observer = new _ResizeObserver["default"](_this.onResize);
+    _this.isResized = true;
+    _this.tooltipContainerClientRect = {};
+    _this.tooltipContainerEl = {};
     return _this;
   }
 
   _createClass(Tooltip, [{
+    key: "onResize",
+    value: function onResize(sizeOfObservedEl, observedEl) {
+      this.isResized = true;
+    }
+  }, {
+    key: "observeElement",
+    value: function observeElement() {
+      this.tooltipContainerEl = this.getToolTipContainerEl();
+      this.observer.observe(this.tooltipContainerEl);
+    }
+  }, {
+    key: "unObserveElement",
+    value: function unObserveElement() {
+      this.observer.unobserve(this.tooltipContainerEl);
+    }
+  }, {
+    key: "getClientRectOfContEl",
+    value: function getClientRectOfContEl(el) {
+      if (this.isResized) {
+        return this.setClientRectOfContEl(el);
+      }
+
+      return this.tooltipContainerClientRect;
+    }
+  }, {
+    key: "setClientRectOfContEl",
+    value: function setClientRectOfContEl(containerEl) {
+      this.isResized = false;
+      this.tooltipContainerClientRect = containerEl.getBoundingClientRect();
+      return this.tooltipContainerClientRect;
+    }
+  }, {
+    key: "getToolTipContainerEl",
+    value: function getToolTipContainerEl() {
+      var getTooltipContainer = (0, _Config.getLibraryConfig)('getTooltipContainer');
+      var tooltipContainer = typeof getTooltipContainer === 'function' ? getTooltipContainer() : null;
+      return tooltipContainer ? tooltipContainer : document.body;
+    }
+  }, {
     key: "getToolTipDOM",
     value: function getToolTipDOM(el) {
       this.toolTip = el;
@@ -142,7 +187,7 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
     value: function handleOver(e, targetElement) {
       var _this2 = this;
 
-      var containerElement = (0, _Config.getLibraryConfig)('tooltipContainer') === 'root' && targetElement ? targetElement : document.body;
+      var containerElement = this.tooltipContainerEl;
       var element = e.target;
       var titleDiv = element.hasAttribute('data-title') || element.hasAttribute('title') ? element : element.closest('[data-title]') || element.closest('[title]');
 
@@ -200,7 +245,7 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
           var dataTooltipnoArrow = titleDiv.getAttribute('data-tooltip-noarrow') === 'true' ? true : false;
           var dataTooltipWrap = titleDiv.getAttribute('data-title-wrap') === 'true' ? true : false;
           var clientRect = titleDiv.getBoundingClientRect();
-          var boxLayout = containerElement.getBoundingClientRect();
+          var boxLayout = this.getClientRectOfContEl(containerElement);
           this.setState({
             title: title,
             isHtml: isHtml,

package/lib/common/docStyle.module.css

@@ -260,8 +260,12 @@
   background: #fff;
 }
 [data-mode='dark'] {
-  color: #E2E4E6;
-  background: #232B38;
+  color: #e2e4e6;
+  background: #232b38;
+}
+[data-mode='pureDark'] {
+  color: #e2e4e6;
+  background: #212121;
 }
 
 .baseHue {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-alpha-237",
+  "version": "1.0.0-alpha-238",
   "main": "lib/index.js",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
@@ -37,11 +37,11 @@
   "devDependencies": {
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/variables": "1.0.0-beta.29",
-    "@zohodesk/icons": "1.0.0-beta.98",
+    "@zohodesk/icons": "1.0.0-beta.105",
     "@zohodesk/virtualizer": "1.0.3",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",
-    "@zohodesk/svg": "1.0.0-beta.42"
+    "@zohodesk/svg": "1.0.0-beta.47"
   },
   "dependencies": {
     "hoist-non-react-statics": "3.0.1",
@@ -50,9 +50,9 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.0.0-beta.98",
+    "@zohodesk/icons": "1.0.0-beta.105",
     "@zohodesk/variables": "1.0.0-beta.29",
-    "@zohodesk/svg": "1.0.0-beta.42",
+    "@zohodesk/svg": "1.0.0-beta.47",
     "@zohodesk/virtualizer": "1.0.3",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3"