@zohodesk/components 1.0.0-temp-84 → 1.0.0-temp-107

package/lib/Tooltip/Tooltip.js

@@ -1,519 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _defaultProps = require("./props/defaultProps");
-var _propTypes = require("./props/propTypes");
-var _Config = require("../Provider/Config");
-var _TooltipModule = _interopRequireDefault(require("./Tooltip.module.css"));
-var _ResizeObserver = _interopRequireDefault(require("../Responsive/ResizeObserver"));
-var _selectn = _interopRequireDefault(require("selectn"));
-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"); } }
-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; }
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-var Tooltip = /*#__PURE__*/function (_React$Component) {
-  _inherits(Tooltip, _React$Component);
-  var _super = _createSuper(Tooltip);
-  function Tooltip(props) {
-    var _this;
-    _classCallCheck(this, Tooltip);
-    _this = _super.call(this, props);
-    _this.state = {
-      title: null,
-      left: 0,
-      top: 0,
-      arrowLeft: 0,
-      isArrowRight: null,
-      isHtml: false
-    };
-    _this.handleOver = _this.handleOver.bind(_assertThisInitialized(_this));
-    _this.getToolTipDOM = _this.getToolTipDOM.bind(_assertThisInitialized(_this));
-    _this.reset = _this.reset.bind(_assertThisInitialized(_this));
-    _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.disconnect();
-    }
-  }, {
-    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;
-    }
-  }, {
-    key: "reset",
-    value: function reset() {
-      var title = this.state.title;
-      if (title !== null) {
-        this.setState({
-          title: null,
-          top: 0,
-          left: 0
-        });
-      }
-    }
-
-    /* left and right screen edge check for top and bottom tooltip position */
-  }, {
-    key: "leftRightScreenEdge",
-    value: function leftRightScreenEdge(tLeft, toolTipArrowLeft, thisLeft, thisWidth, tooltipoffsetWidth, bodyWidth, rightEdge, bodyLeft) {
-      if (tLeft - bodyLeft <= 1) {
-        // top & bottom position left side screen edge case
-        tLeft = bodyLeft + 2;
-        toolTipArrowLeft = parseInt(thisLeft - bodyLeft + thisWidth / 2 - 6);
-      } else if (tLeft - bodyLeft + tooltipoffsetWidth > bodyWidth) {
-        // top & bottom position right side screen edge case
-        rightEdge = tLeft + tooltipoffsetWidth - bodyWidth + 2;
-        tLeft = tLeft + bodyLeft - rightEdge;
-        toolTipArrowLeft = toolTipArrowLeft - bodyLeft + rightEdge;
-      } else if (tLeft + tooltipoffsetWidth + tooltipoffsetWidth >= bodyWidth - 2) {
-        // top & bottom center screen tooltip collide with right edge screen
-        tLeft = parseInt(thisLeft - (tooltipoffsetWidth - thisWidth) / 2);
-        toolTipArrowLeft = parseInt(tooltipoffsetWidth / 2 - 4);
-      }
-      return {
-        tLeft: tLeft,
-        toolTipArrowLeft: toolTipArrowLeft,
-        thisLeft: thisLeft,
-        thisWidth: thisWidth,
-        tooltipoffsetWidth: tooltipoffsetWidth,
-        bodyWidth: bodyWidth,
-        rightEdge: rightEdge
-      };
-    }
-
-    /* top and bottom screen edge check for left and right tooltip position */
-  }, {
-    key: "topBottomScreenEdge",
-    value: function topBottomScreenEdge(tTop, toolTipArrowTop, thisTop, thisHeight, tooltipoffsetHeight, bodyHeight, bottomEdge) {
-      if (tTop <= 1) {
-        tTop = 2;
-        toolTipArrowTop = parseInt(thisTop + thisHeight / 2);
-      } else if (tTop + tooltipoffsetHeight > bodyHeight) {
-        bottomEdge = tTop + tooltipoffsetHeight - bodyHeight + 2;
-        tTop -= bottomEdge;
-        toolTipArrowTop += bottomEdge;
-      }
-      return {
-        tTop: tTop,
-        toolTipArrowTop: toolTipArrowTop,
-        thisTop: thisTop,
-        thisHeight: thisHeight,
-        tooltipoffsetHeight: tooltipoffsetHeight,
-        bodyHeight: bodyHeight,
-        bottomEdge: bottomEdge
-      };
-    }
-  }, {
-    key: "handleOver",
-    value: function handleOver(e, targetElement) {
-      var _this2 = this;
-      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]');
-      if (titleDiv) {
-        var title = titleDiv.getAttribute('data-title') || titleDiv.getAttribute('title');
-
-        /* if data-title-position is left or right change right and left in rtl case */
-        var isPosition = titleDiv.getAttribute('data-title-position');
-        var elem = this.getDirection;
-        if (elem.getAttribute('dir') == 'rtl') {
-          if (isPosition == 'left') {
-            isPosition = 'right';
-          } else if (isPosition == 'right') {
-            isPosition = 'left';
-          }
-        }
-        if (title !== '' && title) {
-          titleDiv.setAttribute('data-title', title);
-          titleDiv.removeAttribute('title');
-          if (element.nodeName !== 'I' && element.innerText && element.innerText.trim() !== '') {
-            var isContentDotted = '';
-            if (element.scrollWidth !== 0) {
-              isContentDotted = element.offsetWidth < element.scrollWidth;
-              if (!isContentDotted) {
-                isContentDotted = element.offsetHeight < element.scrollHeight;
-              }
-              // if (!isContentDotted) {Need to check the code Sivanesh
-              //   isContentDotted = element.offsetHeight < element.scrollHeight;
-              // }
-            } else {
-              var offWidth = (0, _selectn["default"])('parentElement.offsetWidth', element) || 0;
-              var scrollWidth = (0, _selectn["default"])('parentElement.scrollWidth', element) || 0;
-              isContentDotted = offWidth < scrollWidth;
-            }
-            var originText = element.innerText.replace(/\s/g, '').toLowerCase();
-            var tooltipText = title.replace(/\s/g, '').toLowerCase();
-            var isDefaultTooltip = element.hasAttribute('data-istitle') || element.hasAttribute('istitle') ? element.getAttribute('data-istitle') || element.getAttribute('istitle') : 'false';
-            isDefaultTooltip = isDefaultTooltip === 'true';
-            var isSameText = originText.indexOf(tooltipText) !== -1 ? true : false;
-            if (!isContentDotted && isSameText && !isDefaultTooltip) {
-              return false;
-            }
-            if (isContentDotted && titleDiv.getAttribute('data-dottedTitle')) {
-              title = titleDiv.getAttribute('data-dottedTitle');
-            }
-          }
-          var isHtml = titleDiv.getAttribute('data-ishtml');
-          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 = this.getClientRectOfContEl(containerElement);
-          this.setState({
-            title: title,
-            isHtml: isHtml,
-            dataTooltipnoArrow: dataTooltipnoArrow,
-            dataTooltipWrap: dataTooltipWrap
-          }, function () {
-            var tooltip = _this2.toolTip;
-            if (tooltip) {
-              /* element top, left, height, width */
-              var thisTop = clientRect.top;
-              var thisLeft = clientRect.left;
-              var thisHeight = clientRect.height;
-              var thisWidth = clientRect.width;
-              /* box layout left spacing */
-              var bodyLeft = boxLayout.left;
-              // let checkTop = thisTop + thisHeight;
-              /* element left plus element width */
-              var checkLeft = thisLeft + thisWidth;
-              var tTop;
-              var tLeft;
-              var toolTipArrowTop;
-              var toolTipArrowLeft;
-              var rightEdge;
-              var bottomEdge;
-              var tooltipLeft;
-              /* offset width, height of body */
-              var bodyWidth = containerElement.offsetWidth;
-              var bodyHeight = containerElement.offsetHeight;
-              var isArrowHorizontal = false;
-              var isArrowDown = false;
-              var isArrowRight = false;
-              var tWidth = '';
-              /* overall body height minus element top + element height */
-              var thisBottom = bodyHeight - (thisTop + thisHeight);
-              /* overall body width minus element left + element width */
-              var thisRight = bodyWidth - (thisLeft + thisWidth);
-              /* tooltip width and height */
-              var tooltipoffsetWidth = tooltip.offsetWidth;
-              var tooltipoffsetHeight = tooltip.offsetHeight;
-              if (isPosition) {
-                if (isPosition == 'top') {
-                  /* if top does not have enough space show tooltip in bottom area */
-                  if (thisTop <= tooltipoffsetHeight + 5) {
-                    /* if top space is larger than bottom space show tooltip in top area */
-                    if (thisTop > thisBottom) {
-                      tTop = parseInt(thisTop - (tooltipoffsetHeight + 10));
-                      tLeft = parseInt(thisLeft - (tooltipoffsetWidth - thisWidth) / 2 + 2);
-                      toolTipArrowTop = parseInt(tooltipoffsetHeight - 4);
-                      toolTipArrowLeft = parseInt(tooltipoffsetWidth / 2 - 6);
-                      isArrowDown = true;
-                    } else {
-                      /* bottom position */
-                      tTop = parseInt(thisTop + (thisHeight + 10));
-                      tLeft = parseInt(thisLeft - (tooltipoffsetWidth - thisWidth) / 2 + 2);
-                      toolTipArrowTop = -4;
-                      toolTipArrowLeft = parseInt(tooltipoffsetWidth / 2 - 6);
-                      isArrowDown = false;
-                    }
-                  } else {
-                    /* if top have enough space show tooltip in top area */
-                    tTop = parseInt(thisTop - (tooltipoffsetHeight + 10));
-                    tLeft = parseInt(thisLeft - (tooltipoffsetWidth - thisWidth) / 2 + 2);
-                    toolTipArrowTop = parseInt(tooltipoffsetHeight - 4);
-                    toolTipArrowLeft = parseInt(tooltipoffsetWidth / 2 - 6);
-                    isArrowDown = true;
-                  }
-
-                  /* top tooltip left and right corner edge case */
-                  var values = _this2.leftRightScreenEdge(tLeft, toolTipArrowLeft, thisLeft, thisWidth, tooltipoffsetWidth, bodyWidth, rightEdge, bodyLeft);
-                  tLeft = values.tLeft, toolTipArrowLeft = values.toolTipArrowLeft, thisLeft = values.thisLeft, thisWidth = values.thisWidth, tooltipoffsetWidth = values.tooltipoffsetWidth, bodyWidth = values.bodyWidth, rightEdge = values.rightEdge;
-                } else if (isPosition == 'bottom') {
-                  /* if bottom does not have enough space show tooltip in top area */
-                  if (thisBottom <= tooltipoffsetHeight + 5) {
-                    /* if bottom space is larger than top space show tooltip in bottom area */
-                    if (thisTop > thisBottom) {
-                      tTop = parseInt(thisTop - (tooltipoffsetHeight + 10));
-                      tLeft = parseInt(thisLeft - (tooltipoffsetWidth - thisWidth) / 2 + 2);
-                      toolTipArrowTop = parseInt(tooltipoffsetHeight - 4);
-                      toolTipArrowLeft = parseInt(tooltipoffsetWidth / 2 - 6);
-                      isArrowDown = true;
-                    } else {
-                      /* top position */
-                      tTop = parseInt(thisTop + (thisHeight + 10));
-                      tLeft = parseInt(thisLeft - (tooltipoffsetWidth - thisWidth) / 2 + 2);
-                      toolTipArrowTop = -4;
-                      toolTipArrowLeft = parseInt(tooltipoffsetWidth / 2 - 6);
-                      isArrowDown = false;
-                    }
-                  } else {
-                    /* if bottom have enough space show tooltip in bottom area */
-                    tTop = parseInt(thisTop + (thisHeight + 10));
-                    tLeft = parseInt(thisLeft - (tooltipoffsetWidth - thisWidth) / 2 + 2);
-                    toolTipArrowTop = -4;
-                    toolTipArrowLeft = parseInt(tooltipoffsetWidth / 2 - 6);
-                    isArrowDown = false;
-                  }
-
-                  /* bottom tooltip left and right corner edge case */
-                  var _values = _this2.leftRightScreenEdge(tLeft, toolTipArrowLeft, thisLeft, thisWidth, tooltipoffsetWidth, bodyWidth, rightEdge, bodyLeft);
-                  tLeft = _values.tLeft, toolTipArrowLeft = _values.toolTipArrowLeft, thisLeft = _values.thisLeft, thisWidth = _values.thisWidth, tooltipoffsetWidth = _values.tooltipoffsetWidth, bodyWidth = _values.bodyWidth, rightEdge = _values.rightEdge;
-                } else if (isPosition == 'left') {
-                  isArrowHorizontal = true;
-                  if (thisLeft - bodyLeft <= tooltipoffsetWidth) {
-                    if (thisLeft - bodyLeft <= thisRight) {
-                      /* if left does not have enough space show tooltip in right area */
-                      tTop = parseInt(thisTop + (thisHeight / 2 - tooltipoffsetHeight / 2));
-                      tLeft = parseInt(thisLeft + thisWidth + 10);
-                      toolTipArrowTop = parseInt(tooltipoffsetHeight / 2 - 1);
-                      toolTipArrowLeft = -1;
-                      isArrowRight = false;
-                    } else {
-                      /* if left space is larger than right space show tooltip in left (default) area */
-                      if (bodyLeft + tooltipoffsetWidth >= thisLeft) {
-                        /* if tooltip width is greater than left space, set left space width to tooltip  */
-                        tWidth = thisLeft;
-                        tTop = parseInt(thisTop + (thisHeight / 2 - tooltipoffsetHeight / 2));
-                        tLeft = parseInt(thisLeft - tWidth - 7);
-                        toolTipArrowTop = parseInt(tooltipoffsetHeight / 2 - 1);
-                        toolTipArrowLeft = parseInt(tWidth - 2);
-                        isArrowRight = true;
-                      }
-                    }
-                  } else {
-                    /* if left have enough space show tooltip in left area */
-                    tTop = parseInt(thisTop + (thisHeight / 2 - tooltipoffsetHeight / 2));
-                    tLeft = parseInt(thisLeft - tooltipoffsetWidth - 7);
-                    toolTipArrowTop = parseInt(tooltipoffsetHeight / 2 - 1);
-                    toolTipArrowLeft = parseInt(tooltipoffsetWidth - 2);
-                    isArrowRight = true;
-                  }
-
-                  /* left tooltip top and bottom corner edge case */
-                  var _values2 = _this2.topBottomScreenEdge(tTop, toolTipArrowTop, thisTop, thisHeight, tooltipoffsetHeight, bodyHeight, bottomEdge);
-                  tTop = _values2.tTop, toolTipArrowTop = _values2.toolTipArrowTop, thisTop = _values2.thisTop, thisHeight = _values2.thisHeight, tooltipoffsetHeight = _values2.tooltipoffsetHeight, bodyHeight = _values2.bodyHeight, bottomEdge = _values2.bottomEdge;
-                } else if (isPosition == 'right') {
-                  isArrowHorizontal = true;
-                  if (thisRight + bodyLeft <= tooltipoffsetWidth) {
-                    if (thisLeft + bodyLeft <= thisRight) {
-                      /* if right space is larger than left space show tooltip in right (default) area */
-                      tTop = parseInt(thisTop + (thisHeight / 2 - tooltipoffsetHeight / 2));
-                      tLeft = parseInt(thisLeft + thisWidth + 7);
-                      toolTipArrowTop = parseInt(tooltipoffsetHeight / 2 - 1);
-                      toolTipArrowLeft = -1;
-                      isArrowRight = false;
-                    } else {
-                      /* if right does not have enough space show tooltip in left area */
-                      if (tooltipoffsetWidth >= thisLeft) {
-                        /* if tooltip width is greater than left space, set left space width to tooltip  */
-                        tWidth = thisLeft;
-                        tTop = parseInt(thisTop + (thisHeight / 2 - tooltipoffsetHeight / 2));
-                        tLeft = parseInt(thisLeft - tWidth - 7);
-                        toolTipArrowTop = parseInt(tooltipoffsetHeight / 2 - 1);
-                        toolTipArrowLeft = parseInt(tWidth - 2);
-                        isArrowRight = true;
-                      } else {
-                        /* show tooltip in left area without setting left space width to tooltip */
-                        tTop = parseInt(thisTop + (thisHeight / 2 - tooltipoffsetHeight / 2));
-                        tLeft = parseInt(thisLeft - tooltipoffsetWidth - 7);
-                        toolTipArrowTop = parseInt(tooltipoffsetHeight / 2 - 1);
-                        toolTipArrowLeft = parseInt(tooltipoffsetWidth - 2);
-                        isArrowRight = true;
-                      }
-                    }
-                  } else {
-                    /* if right have enough space show tooltip in right area */
-                    tTop = parseInt(thisTop + (thisHeight / 2 - tooltipoffsetHeight / 2));
-                    tLeft = parseInt(thisLeft + thisWidth + 7);
-                    toolTipArrowTop = parseInt(tooltipoffsetHeight / 2 - 1);
-                    toolTipArrowLeft = -1;
-                    isArrowRight = false;
-                  }
-
-                  /* right tooltip left and right corner edge case */
-                  var _values3 = _this2.topBottomScreenEdge(tTop, toolTipArrowTop, thisTop, thisHeight, tooltipoffsetHeight, bodyHeight, bottomEdge);
-                  tTop = _values3.tTop, toolTipArrowTop = _values3.toolTipArrowTop, thisTop = _values3.thisTop, thisHeight = _values3.thisHeight, tooltipoffsetHeight = _values3.tooltipoffsetHeight, bodyHeight = _values3.bodyHeight, bottomEdge = _values3.bottomEdge;
-                }
-                _this2.setState({
-                  top: tTop,
-                  left: tLeft,
-                  arrowTop: toolTipArrowTop,
-                  arrowLeft: toolTipArrowLeft,
-                  isArrowHorizontal: isArrowHorizontal,
-                  isArrowDown: isArrowDown,
-                  isArrowRight: isArrowRight,
-                  width: tWidth
-                });
-              } else {
-                _this2.setState({
-                  isArrowRight: null
-                });
-                tTop = parseInt(thisTop + thisHeight + 10);
-                tLeft = parseInt(thisLeft - (tooltipoffsetWidth / 2 - thisWidth / 2) + 2);
-                tooltipLeft = parseInt(tooltipoffsetWidth / 2 - 6);
-                if (tLeft - bodyLeft <= 1) {
-                  // default left side screen edge case
-                  tooltipLeft = parseInt(thisLeft - bodyLeft + thisWidth / 2 - 6);
-                  tLeft = bodyLeft + 2;
-                } else if (tLeft - bodyLeft + tooltipoffsetWidth > bodyWidth) {
-                  checkLeft = tLeft + tooltipoffsetWidth - bodyWidth + 2;
-                  tooltipLeft = tooltipLeft - bodyLeft + checkLeft;
-                  tLeft = tLeft + bodyLeft - checkLeft;
-                } else if (tLeft + tooltipoffsetWidth >= bodyWidth - 2) {
-                  // default center screen tooltip collide with right edge screen
-                  tLeft = parseInt(thisLeft - (tooltipoffsetWidth - thisWidth) / 2);
-                  tooltipLeft = parseInt(tooltipoffsetWidth / 2 - 4);
-                }
-                isArrowDown = false;
-                if (tTop + tooltipoffsetHeight > bodyHeight) {
-                  /* if bottom does not have enough space show tooltip in top area */
-                  if (thisTop > thisBottom) {
-                    isArrowDown = true;
-                    tTop -= tooltipoffsetHeight + thisHeight + 20;
-                  }
-                }
-                if (isArrowDown) {
-                  var arrowTop = tooltipoffsetHeight - 4;
-                  _this2.setState({
-                    top: tTop,
-                    left: tLeft,
-                    arrowLeft: tooltipLeft,
-                    arrowTop: arrowTop,
-                    isArrowDown: true,
-                    isArrowHorizontal: isArrowHorizontal
-                  });
-                } else {
-                  _this2.setState({
-                    top: tTop,
-                    left: tLeft,
-                    arrowLeft: tooltipLeft,
-                    arrowTop: -4,
-                    isArrowDown: false,
-                    isArrowHorizontal: isArrowHorizontal
-                  });
-                }
-              }
-            }
-          });
-          titleDiv.addEventListener('click', this.reset);
-          titleDiv.addEventListener('mouseup', this.reset);
-          titleDiv.addEventListener('mouseleave', this.reset);
-        }
-      } else {
-        this.reset();
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$state = this.state,
-        title = _this$state.title,
-        left = _this$state.left,
-        top = _this$state.top,
-        arrowLeft = _this$state.arrowLeft,
-        arrowTop = _this$state.arrowTop,
-        isArrowDown = _this$state.isArrowDown,
-        isArrowRight = _this$state.isArrowRight,
-        isArrowHorizontal = _this$state.isArrowHorizontal,
-        width = _this$state.width,
-        isHtml = _this$state.isHtml,
-        dataTooltipnoArrow = _this$state.dataTooltipnoArrow,
-        dataTooltipWrap = _this$state.dataTooltipWrap;
-      var _this$props = this.props,
-        dataId = _this$props.dataId,
-        customClass = _this$props.customClass;
-      var arrowStyle = isArrowHorizontal ? isArrowRight ? _TooltipModule["default"].arrowRight : _TooltipModule["default"].arrowLeft : isArrowDown ? _TooltipModule["default"].arrowDown : _TooltipModule["default"].arrowUp;
-      title = title ? title.trim() : null;
-      var tooltipCss = "".concat(_TooltipModule["default"].tooltipcont, " ").concat(dataTooltipWrap ? _TooltipModule["default"].tooltipWrapCont : _TooltipModule["default"].tooltipNormalCont);
-      return title ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(customClass, " ").concat(_TooltipModule["default"].tooltiptext),
-        style: {
-          left: left,
-          top: top,
-          width: width
-        },
-        ref: this.getToolTipDOM,
-        "data-id": dataId
-      }, !dataTooltipnoArrow ? /*#__PURE__*/_react["default"].createElement("span", {
-        className: "".concat(_TooltipModule["default"].tooltiparrow, " ").concat(arrowStyle),
-        style: {
-          left: arrowLeft,
-          top: arrowTop
-        }
-      }) : null, isHtml ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: tooltipCss,
-        dangerouslySetInnerHTML: {
-          __html: title
-        }
-      }) : /*#__PURE__*/_react["default"].createElement("div", {
-        className: tooltipCss
-      }, title)) : null;
-    }
-  }]);
-  return Tooltip;
-}(_react["default"].Component);
-exports["default"] = Tooltip;
-Tooltip.propTypes = _propTypes.propTypes;
-Tooltip.defaultProps = _defaultProps.defaultProps;
-if (false) {
-  Tooltip.docs = {
-    componentGroup: 'Atom',
-    folderName: 'Style Guide',
-    description: ' ',
-    external: true
-  };
-}

package/lib/Tooltip/Tooltip.module.css

@@ -1,109 +0,0 @@
-.tooltiptext {
-  position: fixed;
-  z-index: 9999999; /*Hook for editor alert*/
-  pointer-events: none;
-  box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
-  border-radius: var(--zd_size4);
-}[dir=ltr] .tooltiptext {
-  animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
-}[dir=rtl] .tooltiptext {
-  animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
-}
-.tooltipcont {
-  color: var(--zdt_tooltip_default_text);
-  font-size: var(--zd_font_size13);
-  font-family: var(--zd_semibold);
-  word-break: break-word;
-  max-width: 420px;
-  line-height: var(--zd_size20);
-  min-height: var(--zd_size24);
-  overflow: hidden;
-  background-color: var(--zdt_tooltip_default_bg);
-  padding: 0 var(--zd_size10);
-  border-style: solid;
-  border-color: transparent;
-  border-radius: var(--zd_size4);
-}
-.tooltipWrapCont {
-  white-space: pre-wrap;
-}
-.tooltipNormalCont {
-  white-space: normal;
-}
-.tooltiparrow {
-  content: '';
-  position: absolute;
-  top: 0;
-  border-top-left-radius: 3px;
-}
-.arrowUp,
-.arrowDown {
-  width: 11px;
-  height: 11px;
-  border-top: solid 6px var(--zdt_tooltip_default_bg);
-  border-left: solid 6px var(--zdt_tooltip_default_bg);
-  border-right: solid 6px transparent;
-  border-bottom: solid 6px transparent;
-}
-.arrowDown {
-  margin-top: -4px !important; /* put important because of '.wms-mainui *' have margin: 0; */
-}
-.arrowLeft,
-.arrowRight {
-  width: 11px;
-  height: 11px;
-  border-top: solid 6px var(--zdt_tooltip_default_bg);
-  border-left: solid 6px var(--zdt_tooltip_default_bg);
-  border-right: solid 6px transparent;
-  border-bottom: solid 6px transparent;
-}
-.arrowRight {
-  margin-left: -2px;
-}
-.arrowLeft {
-  margin-left: 1px;
-}
-.arrowUp {
-  transform: rotate(45deg);
-}
-.arrowDown {
-  transform: rotate(225deg);
-}
-.arrowLeft {
-  transform: rotate(315deg) translateY(-50%);
-}
-.arrowRight {
-  transform: rotate(135deg) translateY(50%);
-}
-@keyframes tooltip-grow {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@-webkit-keyframes tooltip-grow {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@-moz-keyframes tooltip-grow {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@-ms-keyframes tooltip-grow {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}