@zohodesk/components 1.0.0-temp-999 → 1.0.0-temp-69

package/lib/TextBox/TextBox.js

@@ -9,16 +9,14 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _defaultProps = require("./props/defaultProps");
 
-var _TextBoxModule = _interopRequireDefault(require("./TextBox.module.css"));
+var _propTypes = require("./props/propTypes");
 
-var _Textbox$propTypes;
+var _TextBoxModule = _interopRequireDefault(require("./TextBox.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -213,71 +211,8 @@ var Textbox = /*#__PURE__*/function (_React$PureComponent) {
 }(_react["default"].PureComponent);
 
 exports["default"] = Textbox;
-Textbox.defaultProps = {
-  isDisabled: false,
-  isReadOnly: false,
-  maxLength: 250,
-  needBorder: true,
-  size: 'medium',
-  type: 'text',
-  variant: 'default',
-  dataId: 'textBox',
-  needReadOnlyStyle: true,
-  needAppearance: true,
-  isClickable: false,
-  needEffect: true,
-  autoComplete: true,
-  borderColor: 'default',
-  a11y: {},
-  isFocus: false,
-  customProps: {}
-};
-Textbox.propTypes = (_Textbox$propTypes = {
-  autofocus: _propTypes["default"].bool,
-  borderColor: _propTypes["default"].oneOf(['transparent', 'default']),
-  dataId: _propTypes["default"].string,
-  htmlId: _propTypes["default"].string,
-  id: _propTypes["default"].string,
-  inputRef: _propTypes["default"].func,
-  isClickable: _propTypes["default"].bool,
-  isDisabled: _propTypes["default"].bool,
-  isReadOnly: _propTypes["default"].bool,
-  maxLength: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
-  name: _propTypes["default"].string,
-  needAppearance: _propTypes["default"].bool,
-  needBorder: _propTypes["default"].bool,
-  needEffect: _propTypes["default"].bool,
-  needReadOnlyStyle: _propTypes["default"].bool,
-  onBlur: _propTypes["default"].func,
-  onChange: _propTypes["default"].func,
-  onClick: _propTypes["default"].func,
-  onFocus: _propTypes["default"].func,
-  onKeyDown: _propTypes["default"].func,
-  onKeyPress: _propTypes["default"].func,
-  onKeyUp: _propTypes["default"].func,
-  onMouseDown: _propTypes["default"].func,
-  placeHolder: _propTypes["default"].string,
-  size: _propTypes["default"].oneOf(['small', 'xsmall', 'medium', 'xmedium']),
-  type: _propTypes["default"].oneOf(['text', 'password', 'number']),
-  value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
-  variant: _propTypes["default"].oneOf(['primary', 'secondary', 'default', 'light'])
-}, _defineProperty(_Textbox$propTypes, "htmlId", _propTypes["default"].string), _defineProperty(_Textbox$propTypes, "customClass", _propTypes["default"].string), _defineProperty(_Textbox$propTypes, "htmlId", _propTypes["default"].string), _defineProperty(_Textbox$propTypes, "a11y", _propTypes["default"].shape({
-  role: _propTypes["default"].string,
-  ariaAutocomplete: _propTypes["default"].string,
-  ariaControls: _propTypes["default"].string,
-  ariaDescribedby: _propTypes["default"].string,
-  ariaExpanded: _propTypes["default"].bool,
-  ariaLabel: _propTypes["default"].string,
-  autoComplete: _propTypes["default"].bool,
-  ariaHaspopup: _propTypes["default"].bool,
-  ariaRequired: _propTypes["default"].bool,
-  ariaLabelledby: _propTypes["default"].string,
-  ariaInvalid: _propTypes["default"].bool,
-  ariaOwns: _propTypes["default"].string,
-  ariaActivedescendant: _propTypes["default"].string,
-  ariaReadonly: _propTypes["default"].bool,
-  ariaMultiselectable: _propTypes["default"].bool
-})), _defineProperty(_Textbox$propTypes, "isFocus", _propTypes["default"].bool), _defineProperty(_Textbox$propTypes, "customProps", _propTypes["default"].object), _Textbox$propTypes);
+Textbox.defaultProps = _defaultProps.defaultProps;
+Textbox.propTypes = _propTypes.propTypes;
 
 if (false) {
   Textbox.docs = {

package/lib/TextBox/props/defaultProps.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+var defaultProps = {
+  isDisabled: false,
+  isReadOnly: false,
+  maxLength: 250,
+  needBorder: true,
+  size: 'medium',
+  type: 'text',
+  variant: 'default',
+  dataId: 'textBox',
+  needReadOnlyStyle: true,
+  needAppearance: true,
+  isClickable: false,
+  needEffect: true,
+  autoComplete: true,
+  borderColor: 'default',
+  a11y: {},
+  isFocus: false,
+  customProps: {}
+};
+exports.defaultProps = defaultProps;

package/lib/TextBox/props/propTypes.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = void 0;
+
+var _propTypes2 = _interopRequireDefault(require("prop-types"));
+
+var _propTypes;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var propTypes = (_propTypes = {
+  autofocus: _propTypes2["default"].bool,
+  borderColor: _propTypes2["default"].oneOf(['transparent', 'default']),
+  dataId: _propTypes2["default"].string,
+  htmlId: _propTypes2["default"].string,
+  id: _propTypes2["default"].string,
+  inputRef: _propTypes2["default"].func,
+  isClickable: _propTypes2["default"].bool,
+  isDisabled: _propTypes2["default"].bool,
+  isReadOnly: _propTypes2["default"].bool,
+  maxLength: _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].string]),
+  name: _propTypes2["default"].string,
+  needAppearance: _propTypes2["default"].bool,
+  needBorder: _propTypes2["default"].bool,
+  needEffect: _propTypes2["default"].bool,
+  needReadOnlyStyle: _propTypes2["default"].bool,
+  onBlur: _propTypes2["default"].func,
+  onChange: _propTypes2["default"].func,
+  onClick: _propTypes2["default"].func,
+  onFocus: _propTypes2["default"].func,
+  onKeyDown: _propTypes2["default"].func,
+  onKeyPress: _propTypes2["default"].func,
+  onKeyUp: _propTypes2["default"].func,
+  onMouseDown: _propTypes2["default"].func,
+  placeHolder: _propTypes2["default"].string,
+  size: _propTypes2["default"].oneOf(['small', 'xsmall', 'medium', 'xmedium']),
+  type: _propTypes2["default"].oneOf(['text', 'password', 'number']),
+  value: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].number]),
+  variant: _propTypes2["default"].oneOf(['primary', 'secondary', 'default', 'light'])
+}, _defineProperty(_propTypes, "htmlId", _propTypes2["default"].string), _defineProperty(_propTypes, "customClass", _propTypes2["default"].string), _defineProperty(_propTypes, "htmlId", _propTypes2["default"].string), _defineProperty(_propTypes, "a11y", _propTypes2["default"].shape({
+  role: _propTypes2["default"].string,
+  ariaAutocomplete: _propTypes2["default"].string,
+  ariaControls: _propTypes2["default"].string,
+  ariaDescribedby: _propTypes2["default"].string,
+  ariaExpanded: _propTypes2["default"].bool,
+  ariaLabel: _propTypes2["default"].string,
+  autoComplete: _propTypes2["default"].bool,
+  ariaHaspopup: _propTypes2["default"].bool,
+  ariaRequired: _propTypes2["default"].bool,
+  ariaLabelledby: _propTypes2["default"].string,
+  ariaInvalid: _propTypes2["default"].bool,
+  ariaOwns: _propTypes2["default"].string,
+  ariaActivedescendant: _propTypes2["default"].string,
+  ariaReadonly: _propTypes2["default"].bool,
+  ariaMultiselectable: _propTypes2["default"].bool
+})), _defineProperty(_propTypes, "isFocus", _propTypes2["default"].bool), _defineProperty(_propTypes, "customProps", _propTypes2["default"].object), _propTypes);
+exports.propTypes = propTypes;

package/lib/TextBoxIcon/TextBoxIcon.js

@@ -9,7 +9,9 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _defaultProps = require("./props/defaultProps");
+
+var _propTypes = require("./props/propTypes");
 
 var _TextBox = _interopRequireDefault(require("../TextBox/TextBox"));
 
@@ -204,75 +206,8 @@ var TextBoxIcon = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = TextBoxIcon;
-TextBoxIcon.defaultProps = {
-  isDisabled: false,
-  isReadOnly: false,
-  iconRotated: false,
-  maxLength: '250',
-  needBorder: true,
-  size: 'medium',
-  type: 'text',
-  variant: 'default',
-  needReadOnlyStyle: true,
-  isClickable: false,
-  needEffect: true,
-  dataId: 'textBoxIcon',
-  borderColor: 'default',
-  showClearIcon: false,
-  i18nKeys: {},
-  customClass: {},
-  iconOnHover: false,
-  isFocus: false,
-  customProps: {}
-};
-TextBoxIcon.propTypes = {
-  borderColor: _propTypes["default"].oneOf(['transparent', 'default', 'error']),
-  children: _propTypes["default"].node,
-  dataId: _propTypes["default"].string,
-  htmlId: _propTypes["default"].string,
-  i18nKeys: _propTypes["default"].shape({
-    clearText: _propTypes["default"].string
-  }),
-  iconRotated: _propTypes["default"].bool,
-  id: _propTypes["default"].string,
-  inputRef: _propTypes["default"].func,
-  isClickable: _propTypes["default"].bool,
-  isDisabled: _propTypes["default"].bool,
-  isReadOnly: _propTypes["default"].bool,
-  maxLength: _propTypes["default"].string,
-  name: _propTypes["default"].string,
-  needBorder: _propTypes["default"].bool,
-  needEffect: _propTypes["default"].bool,
-  needReadOnlyStyle: _propTypes["default"].bool,
-  onBlur: _propTypes["default"].func,
-  onChange: _propTypes["default"].func,
-  onClear: _propTypes["default"].func,
-  onClick: _propTypes["default"].func,
-  onFocus: _propTypes["default"].func,
-  onKeyDown: _propTypes["default"].func,
-  onKeyPress: _propTypes["default"].func,
-  onKeyUp: _propTypes["default"].func,
-  onMouseDown: _propTypes["default"].func,
-  placeHolder: _propTypes["default"].string,
-  showClearIcon: _propTypes["default"].bool,
-  size: _propTypes["default"].oneOf(['small', 'xsmall', 'medium', 'xmedium']),
-  title: _propTypes["default"].func,
-  type: _propTypes["default"].oneOf(['text', 'password', 'number']),
-  value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
-  variant: _propTypes["default"].oneOf(['primary', 'secondary', 'default']),
-  customClass: _propTypes["default"].shape({
-    customTBoxWrap: _propTypes["default"].string,
-    customTextBox: _propTypes["default"].string,
-    customTBoxIcon: _propTypes["default"].string,
-    customTBoxLine: _propTypes["default"].string
-  }),
-  iconOnHover: _propTypes["default"].bool,
-  isFocus: _propTypes["default"].bool,
-  onClearMouseDown: _propTypes["default"].func,
-  customProps: _propTypes["default"].shape({
-    TextBoxProps: _propTypes["default"].object
-  })
-};
+TextBoxIcon.defaultProps = _defaultProps.defaultProps;
+TextBoxIcon.propTypes = _propTypes.propTypes;
 
 if (false) {
   TextBoxIcon.docs = {

package/lib/TextBoxIcon/props/defaultProps.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+var defaultProps = {
+  isDisabled: false,
+  isReadOnly: false,
+  iconRotated: false,
+  maxLength: '250',
+  needBorder: true,
+  size: 'medium',
+  type: 'text',
+  variant: 'default',
+  needReadOnlyStyle: true,
+  isClickable: false,
+  needEffect: true,
+  dataId: 'textBoxIcon',
+  borderColor: 'default',
+  showClearIcon: false,
+  i18nKeys: {},
+  customClass: {},
+  iconOnHover: false,
+  isFocus: false,
+  customProps: {}
+};
+exports.defaultProps = defaultProps;

package/lib/TextBoxIcon/props/propTypes.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var propTypes = {
+  borderColor: _propTypes["default"].oneOf(['transparent', 'default', 'error']),
+  children: _propTypes["default"].node,
+  dataId: _propTypes["default"].string,
+  htmlId: _propTypes["default"].string,
+  i18nKeys: _propTypes["default"].shape({
+    clearText: _propTypes["default"].string
+  }),
+  iconRotated: _propTypes["default"].bool,
+  id: _propTypes["default"].string,
+  inputRef: _propTypes["default"].func,
+  isClickable: _propTypes["default"].bool,
+  isDisabled: _propTypes["default"].bool,
+  isReadOnly: _propTypes["default"].bool,
+  maxLength: _propTypes["default"].string,
+  name: _propTypes["default"].string,
+  needBorder: _propTypes["default"].bool,
+  needEffect: _propTypes["default"].bool,
+  needReadOnlyStyle: _propTypes["default"].bool,
+  onBlur: _propTypes["default"].func,
+  onChange: _propTypes["default"].func,
+  onClear: _propTypes["default"].func,
+  onClick: _propTypes["default"].func,
+  onFocus: _propTypes["default"].func,
+  onKeyDown: _propTypes["default"].func,
+  onKeyPress: _propTypes["default"].func,
+  onKeyUp: _propTypes["default"].func,
+  onMouseDown: _propTypes["default"].func,
+  placeHolder: _propTypes["default"].string,
+  showClearIcon: _propTypes["default"].bool,
+  size: _propTypes["default"].oneOf(['small', 'xsmall', 'medium', 'xmedium']),
+  title: _propTypes["default"].func,
+  type: _propTypes["default"].oneOf(['text', 'password', 'number']),
+  value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  variant: _propTypes["default"].oneOf(['primary', 'secondary', 'default']),
+  customClass: _propTypes["default"].shape({
+    customTBoxWrap: _propTypes["default"].string,
+    customTextBox: _propTypes["default"].string,
+    customTBoxIcon: _propTypes["default"].string,
+    customTBoxLine: _propTypes["default"].string
+  }),
+  iconOnHover: _propTypes["default"].bool,
+  isFocus: _propTypes["default"].bool,
+  onClearMouseDown: _propTypes["default"].func,
+  customProps: _propTypes["default"].shape({
+    TextBoxProps: _propTypes["default"].object
+  })
+};
+exports.propTypes = propTypes;

package/lib/Textarea/Textarea.js

@@ -9,7 +9,9 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _defaultProps = require("./props/defaultProps");
+
+var _propTypes = require("./props/propTypes");
 
 var _TextareaModule = _interopRequireDefault(require("./Textarea.module.css"));
 
@@ -145,52 +147,8 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = Textarea;
-Textarea.defaultProps = {
-  isDisabled: false,
-  isReadOnly: false,
-  dataId: 'TextareaComp',
-  needBorder: true,
-  resize: 'none',
-  size: 'small',
-  variant: 'default',
-  needAppearance: true,
-  needReadOnlyStyle: true,
-  borderColor: 'default',
-  needEffect: true,
-  autoFocus: false,
-  customClass: '',
-  a11y: {}
-};
-Textarea.propTypes = {
-  animated: _propTypes["default"].bool,
-  autoFocus: _propTypes["default"].bool,
-  borderColor: _propTypes["default"].oneOf(['transparent', 'default']),
-  className: _propTypes["default"].string,
-  dataId: _propTypes["default"].string,
-  getRef: _propTypes["default"].func,
-  htmlId: _propTypes["default"].string,
-  isDisabled: _propTypes["default"].bool,
-  isReadOnly: _propTypes["default"].bool,
-  maxLength: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
-  needAppearance: _propTypes["default"].bool,
-  needBorder: _propTypes["default"].bool,
-  needEffect: _propTypes["default"].bool,
-  needReadOnlyStyle: _propTypes["default"].bool,
-  onBlur: _propTypes["default"].func,
-  onChange: _propTypes["default"].func,
-  onFocus: _propTypes["default"].func,
-  onKeyDown: _propTypes["default"].func,
-  placeHolder: _propTypes["default"].string,
-  resize: _propTypes["default"].oneOf(['horizontal', 'vertical', 'both', 'none']),
-  size: _propTypes["default"].oneOf(['xsmall', 'small', 'xmedium', 'medium', 'large']),
-  text: _propTypes["default"].string,
-  variant: _propTypes["default"].oneOf(['default', 'primary']),
-  customClass: _propTypes["default"].string,
-  a11y: _propTypes["default"].shape({
-    ariaLabel: _propTypes["default"].string,
-    ariaLabelledby: _propTypes["default"].string
-  })
-};
+Textarea.defaultProps = _defaultProps.defaultProps;
+Textarea.propTypes = _propTypes.propTypes;
 
 if (false) {
   Textarea.docs = {

package/lib/Textarea/props/defaultProps.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+var defaultProps = {
+  isDisabled: false,
+  isReadOnly: false,
+  dataId: 'TextareaComp',
+  needBorder: true,
+  resize: 'none',
+  size: 'small',
+  variant: 'default',
+  needAppearance: true,
+  needReadOnlyStyle: true,
+  borderColor: 'default',
+  needEffect: true,
+  autoFocus: false,
+  customClass: '',
+  a11y: {}
+};
+exports.defaultProps = defaultProps;

package/lib/Textarea/props/propTypes.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var propTypes = {
+  animated: _propTypes["default"].bool,
+  autoFocus: _propTypes["default"].bool,
+  borderColor: _propTypes["default"].oneOf(['transparent', 'default']),
+  className: _propTypes["default"].string,
+  dataId: _propTypes["default"].string,
+  getRef: _propTypes["default"].func,
+  htmlId: _propTypes["default"].string,
+  isDisabled: _propTypes["default"].bool,
+  isReadOnly: _propTypes["default"].bool,
+  maxLength: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  needAppearance: _propTypes["default"].bool,
+  needBorder: _propTypes["default"].bool,
+  needEffect: _propTypes["default"].bool,
+  needReadOnlyStyle: _propTypes["default"].bool,
+  onBlur: _propTypes["default"].func,
+  onChange: _propTypes["default"].func,
+  onFocus: _propTypes["default"].func,
+  onKeyDown: _propTypes["default"].func,
+  placeHolder: _propTypes["default"].string,
+  resize: _propTypes["default"].oneOf(['horizontal', 'vertical', 'both', 'none']),
+  size: _propTypes["default"].oneOf(['xsmall', 'small', 'xmedium', 'medium', 'large']),
+  text: _propTypes["default"].string,
+  variant: _propTypes["default"].oneOf(['default', 'primary']),
+  customClass: _propTypes["default"].string,
+  a11y: _propTypes["default"].shape({
+    ariaLabel: _propTypes["default"].string,
+    ariaLabelledby: _propTypes["default"].string
+  })
+};
+exports.propTypes = propTypes;

package/lib/Tooltip/Tooltip.js

@@ -9,10 +9,16 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+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"));
+
 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"); } }
@@ -60,10 +66,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.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;
@@ -137,9 +186,10 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "handleOver",
-    value: function handleOver(e) {
+    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]');
 
@@ -195,12 +245,14 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
 
           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 = document.body.getBoundingClientRect();
+          var boxLayout = this.getClientRectOfContEl(containerElement);
           this.setState({
             title: title,
             isHtml: isHtml,
-            dataTooltipnoArrow: dataTooltipnoArrow
+            dataTooltipnoArrow: dataTooltipnoArrow,
+            dataTooltipWrap: dataTooltipWrap
           }, function () {
             var tooltip = _this2.toolTip;
 
@@ -226,8 +278,8 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
               var tooltipLeft;
               /* offset width, height of body */
 
-              var bodyWidth = document.body.offsetWidth;
-              var bodyHeight = document.body.offsetHeight;
+              var bodyWidth = containerElement.offsetWidth;
+              var bodyHeight = containerElement.offsetHeight;
               var isArrowHorizontal = false;
               var isArrowDown = false;
               var isArrowRight = false;
@@ -480,12 +532,14 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
           isArrowHorizontal = _this$state.isArrowHorizontal,
           width = _this$state.width,
           isHtml = _this$state.isHtml,
-          dataTooltipnoArrow = _this$state.dataTooltipnoArrow;
+          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: {
@@ -502,12 +556,12 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
           top: arrowTop
         }
       }) : null, isHtml ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: _TooltipModule["default"].tooltipcont,
+        className: tooltipCss,
         dangerouslySetInnerHTML: {
           __html: title
         }
       }) : /*#__PURE__*/_react["default"].createElement("div", {
-        className: _TooltipModule["default"].tooltipcont
+        className: tooltipCss
       }, title)) : null;
     }
   }]);
@@ -516,17 +570,8 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = Tooltip;
-Tooltip.propTypes = {
-  dataId: _propTypes["default"].string,
-  isHtml: _propTypes["default"].string,
-  isPosition: _propTypes["default"].oneOf(['top', 'bottom', 'left', 'right']),
-  title: _propTypes["default"].string,
-  customClass: _propTypes["default"].string
-};
-Tooltip.defaultProps = {
-  dataId: 'toolTip',
-  customClass: ''
-};
+Tooltip.propTypes = _propTypes.propTypes;
+Tooltip.defaultProps = _defaultProps.defaultProps;
 
 if (false) {
   Tooltip.docs = {