@zohodesk/components 1.0.0-temp-70 → 1.0.0-temp-71

package/lib/TextBoxIcon/TextBoxIcon.js

@@ -9,9 +9,7 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _defaultProps = require("./props/defaultProps");
-
-var _propTypes = require("./props/propTypes");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _TextBox = _interopRequireDefault(require("../TextBox/TextBox"));
 
@@ -206,8 +204,75 @@ var TextBoxIcon = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = TextBoxIcon;
-TextBoxIcon.defaultProps = _defaultProps.defaultProps;
-TextBoxIcon.propTypes = _propTypes.propTypes;
+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
+  })
+};
 
 if (false) {
   TextBoxIcon.docs = {

package/lib/Textarea/Textarea.js

@@ -9,9 +9,7 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _defaultProps = require("./props/defaultProps");
-
-var _propTypes = require("./props/propTypes");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _TextareaModule = _interopRequireDefault(require("./Textarea.module.css"));
 
@@ -147,8 +145,52 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = Textarea;
-Textarea.defaultProps = _defaultProps.defaultProps;
-Textarea.propTypes = _propTypes.propTypes;
+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
+  })
+};
 
 if (false) {
   Textarea.docs = {

package/lib/Tooltip/Tooltip.js

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

package/lib/Tooltip/Tooltip.module.css

@@ -17,6 +17,7 @@
   max-width: 420px;
   line-height: var(--zd_size20);
   min-height: var(--zd_size24);
+  white-space: normal;
   overflow: hidden;
   background-color: var(--zdt_tooltip_default_bg);
   padding: 0 var(--zd_size10);
@@ -24,12 +25,6 @@
   border-color: transparent;
   border-radius: var(--zd_size4);
 }
-.tooltipWrapCont {
-  white-space: pre-wrap;
-}
-.tooltipNormalCont {
-  white-space: normal;
-}
 .tooltiparrow {
   content: '';
   position: absolute;

package/lib/Tooltip/docs/Tooltip__default.docs.js

@@ -94,26 +94,11 @@ var Tooltip__default = /*#__PURE__*/function (_Component) {
         background: 'var(--zdt_cta_primary_bg)',
         padding: '3px 15px',
         color: '#fff',
-        borderRadius: '4px',
-        marginBottom: '5px'
-      },
-          whiteSpaceNoWrap = {
-        overflow: 'hidden',
-        display: '-webkit-box',
-        webkitLineClamp: '3',
-        webkitBoxOrient: 'vertical',
-        whiteSpace: 'pre-wrap',
-        fontSize: '14px',
-        background: 'var(--zdt_cta_primary_bg)',
-        padding: '3px 15px',
-        color: '#fff',
-        borderRadius: '4px',
-        marginBottom: '5px',
-        width: '200px'
+        borderRadius: '4px'
       };
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
         style: titleStyle
-      }, /*#__PURE__*/_react["default"].createElement("b", null, "Top Position Tooltip"), " - 1) Lengthy Content, 2) Default Top, 3) Show in Bottom Area if Top doesn t have enough space, 4) Dotted Tooltip, 5) HTML in Tooltip, 6) Tooltip without Arrow, 7)No-Wrapped(normal) Tooltip, 8) Wrapped Tooltip"), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
+      }, /*#__PURE__*/_react["default"].createElement("b", null, "Top Position Tooltip"), " - 1) Lengthy Content, 2) Default Top, 3) Show in Bottom Area if Top doesn't have enough space, 4) Dotted Tooltip, 5) HTML in Tooltip, 6) Tooltip without Arrow"), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
         style: inlineBlock,
         "data-title": "Register Account with Lengthy Content",
         "data-title-position": "top"
@@ -161,14 +146,9 @@ var Tooltip__default = /*#__PURE__*/function (_Component) {
         style: clampDotted,
         "data-title": "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted",
         "data-title-position": "top"
-      }, /*#__PURE__*/_react["default"].createElement("span", null, "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted")), /*#__PURE__*/_react["default"].createElement("span", {
-        style: whiteSpaceNoWrap,
-        "data-title": "Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted",
-        "data-title-position": "top",
-        "data-title-wrap": "true"
-      }, /*#__PURE__*/_react["default"].createElement("span", null, "Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted"))), /*#__PURE__*/_react["default"].createElement("div", {
+      }, /*#__PURE__*/_react["default"].createElement("span", null, "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted"))), /*#__PURE__*/_react["default"].createElement("div", {
         style: titleStyle
-      }, /*#__PURE__*/_react["default"].createElement("b", null, "Bottom Position Tooltip"), " - 1) Lengthy Content, 2) Default Bottom, 3) Show in Top Area if Bottom doesn t have enough space, 4) Dotted Tooltip, 5) HTML in Tooltip, 6) Tooltip without Arrow, 7)No-Wrapped(normal) Tooltip, 8) Wrapped Tooltip"), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
+      }, /*#__PURE__*/_react["default"].createElement("b", null, "Bottom Position Tooltip"), " - 1) Lengthy Content, 2) Default Bottom, 3) Show in Top Area if Bottom doesn't have enough space, 4) Dotted Tooltip, 5) HTML in Tooltip, 6) Tooltip without Arrow"), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
         style: inlineBlock,
         "data-title": "Register Account with Lengthy Content",
         "data-title-position": "bottom"
@@ -217,14 +197,9 @@ var Tooltip__default = /*#__PURE__*/function (_Component) {
         style: clampDotted,
         "data-title": "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted",
         "data-title-position": "bottom"
-      }, /*#__PURE__*/_react["default"].createElement("span", null, "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted")), /*#__PURE__*/_react["default"].createElement("span", {
-        style: whiteSpaceNoWrap,
-        "data-title": "Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted",
-        "data-title-position": "bottom",
-        "data-title-wrap": "true"
-      }, /*#__PURE__*/_react["default"].createElement("span", null, "Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted"))), /*#__PURE__*/_react["default"].createElement("div", {
+      }, /*#__PURE__*/_react["default"].createElement("span", null, "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted"))), /*#__PURE__*/_react["default"].createElement("div", {
         style: titleStyle
-      }, /*#__PURE__*/_react["default"].createElement("b", null, "Left Position Tooltip"), " - 1) Lengthy Content, 2) Default Left, 3) Show in Right Area if Left doesn t have enough space, 4) Dotted Tooltip, 5) HTML in Tooltip, 6) Tooltip without Arrow, 7)No-Wrapped(normal) Tooltip, 8) Wrapped Tooltip"), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
+      }, /*#__PURE__*/_react["default"].createElement("b", null, "Left Position Tooltip"), " - 1) Lengthy Content, 2) Default Left, 3) Show in Right Area if Left doesn't have enough space, 4) Dotted Tooltip, 5) HTML in Tooltip, 6) Tooltip without Arrow"), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
         style: inlineBlock,
         "data-title": "I am left tooltip with lengthy description.I am left tooltip with lengthy description.I am left tooltip with lengthy description.I am left tooltip with lengthy description.I am left tooltip with lengthy description.I am left tooltip with lengthy description.I am left tooltip with lengthy description.I am left tooltip with lengthy description.I am left tooltip with lengthy description.I am left tooltip with lengthy description.I am left tooltip with lengthy description.",
         "data-title-position": "left"
@@ -273,14 +248,9 @@ var Tooltip__default = /*#__PURE__*/function (_Component) {
         style: clampDotted,
         "data-title": "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted",
         "data-title-position": "left"
-      }, /*#__PURE__*/_react["default"].createElement("span", null, "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted")), /*#__PURE__*/_react["default"].createElement("span", {
-        style: whiteSpaceNoWrap,
-        "data-title": "Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted",
-        "data-title-position": "left",
-        "data-title-wrap": "true"
-      }, /*#__PURE__*/_react["default"].createElement("span", null, "Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted"))), /*#__PURE__*/_react["default"].createElement("div", {
+      }, /*#__PURE__*/_react["default"].createElement("span", null, "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted"))), /*#__PURE__*/_react["default"].createElement("div", {
         style: titleStyle
-      }, /*#__PURE__*/_react["default"].createElement("b", null, "Right Position Tooltip"), " - 1) Lengthy Content, 2) Default Right, 3) Show in Left Area if Right doesn t have enough space, 4) Dotted Tooltip, 5) HTML in Tooltip, 6) Tooltip without Arrow, 7)No-Wrapped(normal) Tooltip, 8) Wrapped Tooltip"), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
+      }, /*#__PURE__*/_react["default"].createElement("b", null, "Right Position Tooltip"), " - 1) Lengthy Content, 2) Default Right, 3) Show in Left Area if Right doesn't have enough space, 4) Dotted Tooltip, 5) HTML in Tooltip, 6) Tooltip without Arrow"), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
         style: inlineBlock,
         "data-title": "I am right tooltip with lengthy description.I am right tooltip with lengthy description.I am right tooltip with lengthy description.I am right tooltip with lengthy description.I am right tooltip with lengthy description.I am right tooltip with lengthy description.I am right tooltip with lengthy description.",
         "data-title-position": "right"
@@ -329,14 +299,9 @@ var Tooltip__default = /*#__PURE__*/function (_Component) {
         style: clampDotted,
         "data-title": "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted",
         "data-title-position": "right"
-      }, /*#__PURE__*/_react["default"].createElement("span", null, "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted")), /*#__PURE__*/_react["default"].createElement("span", {
-        style: whiteSpaceNoWrap,
-        "data-title": "Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted",
-        "data-title-position": "right",
-        "data-title-wrap": "true"
-      }, /*#__PURE__*/_react["default"].createElement("span", null, "Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted"))), /*#__PURE__*/_react["default"].createElement("div", {
+      }, /*#__PURE__*/_react["default"].createElement("span", null, "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted"))), /*#__PURE__*/_react["default"].createElement("div", {
         style: titleStyle
-      }, /*#__PURE__*/_react["default"].createElement("b", null, "No Position Tooltip"), " - 1) Lengthy Content, 2) Default Top/Bottom, 3) Show in Top Area if Bottom doesn t have enough space, 4) Dotted Tooltip, 5) HTML in Tooltip, 6) Tooltip without Arrow, 7)No-Wrapped(normal) Tooltip, 8) Wrapped Tooltip"), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
+      }, /*#__PURE__*/_react["default"].createElement("b", null, "No Position Tooltip"), " - 1) Lengthy Content, 2) Default Top/Bottom, 3) Show in Top Area if Bottom doesn't have enough space, 4) Dotted Tooltip, 5) HTML in Tooltip, 6) Tooltip without Arrow"), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
         style: inlineBlock,
         "data-title": "I am normal tooltip without mentioning data-title-position.I am normal tooltip without mentioning data-title-position.I am normal tooltip without mentioning data-title-position.I am normal tooltip without mentioning data-title-position.I am normal tooltip without mentioning data-title-position.I am normal tooltip without mentioning data-title-position."
       }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
@@ -378,11 +343,7 @@ var Tooltip__default = /*#__PURE__*/function (_Component) {
       }))), /*#__PURE__*/_react["default"].createElement("span", {
         style: clampDotted,
         "data-title": "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted"
-      }, /*#__PURE__*/_react["default"].createElement("span", null, "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted")), /*#__PURE__*/_react["default"].createElement("span", {
-        style: whiteSpaceNoWrap,
-        "data-title": "Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted",
-        "data-title-wrap": "true"
-      }, /*#__PURE__*/_react["default"].createElement("span", null, "Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted")));
+      }, /*#__PURE__*/_react["default"].createElement("span", null, "Multiple Line Dotted Multiple Line Dotted Multiple Line Dotted")));
     }
   }, {
     key: "render",

package/lib/VelocityAnimation/VelocityAnimation/VelocityAnimation.js

@@ -9,9 +9,7 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _defaultProps = require("./props/defaultProps");
-
-var _propTypes = require("./props/propTypes");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _velocityReact = require("velocity-react");
 
@@ -117,8 +115,28 @@ var VelocityAnimation = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = VelocityAnimation;
-VelocityAnimation.defaultProps = _defaultProps.defaultProps;
-VelocityAnimation.propTypes = _propTypes.propTypes;
+VelocityAnimation.defaultProps = {
+  runOnMount: false,
+  isCustomized: true,
+  needUIPack: true,
+  isFlex: false,
+  duration: 300
+};
+VelocityAnimation.propTypes = {
+  children: _propTypes["default"].node.isRequired,
+  delay: _propTypes["default"].number,
+  duration: _propTypes["default"].number,
+  isActive: _propTypes["default"].bool.isRequired,
+  isCustomized: _propTypes["default"].bool,
+  isFlex: _propTypes["default"].bool,
+  name: _propTypes["default"].oneOf(['fade', 'slideRight', 'shrink', 'expand', 'slideDown', 'flyDown', 'slideLeft']),
+  needUIPack: _propTypes["default"].bool,
+  runOnMount: _propTypes["default"].bool
+};
+VelocityAnimation.contextTypes = {
+  direction: _propTypes["default"].string,
+  isReducedMotion: _propTypes["default"].bool
+};
 VelocityAnimation.contextType = _LibraryContextInit["default"];
 
 if (false) {

package/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js

@@ -9,9 +9,7 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _defaultProps = require("./props/defaultProps");
-
-var _propTypes = require("./props/propTypes");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _velocityReact = require("velocity-react");
 
@@ -21,12 +19,6 @@ var _LibraryContextInit = _interopRequireDefault(require("../../Provider/Library
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-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"); } }
@@ -151,10 +143,44 @@ var VelocityAnimationGroup = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = VelocityAnimationGroup;
-VelocityAnimationGroup.defaultProps = _objectSpread(_objectSpread({}, _defaultProps.defaultProps), {}, {
+VelocityAnimationGroup.defaultProps = {
+  runOnMount: false,
+  enterHideStyle: {
+    display: 'none'
+  },
+  enterShowStyle: {
+    display: ''
+  },
+  isFlex: false,
+  enterDuration: 300,
+  exitDuration: 300,
+  isActive: false,
+  isCustomized: true,
+  needUIPack: true,
   component: _react["default"].Fragment
-});
-VelocityAnimationGroup.propTypes = _propTypes.propTypes;
+};
+VelocityAnimationGroup.propTypes = {
+  children: _propTypes["default"].node.isRequired,
+  component: _propTypes["default"].element,
+  enterDelay: _propTypes["default"].number,
+  enterDuration: _propTypes["default"].number,
+  enterHideStyle: _propTypes["default"].object,
+  enterName: _propTypes["default"].string,
+  enterShowStyle: _propTypes["default"].object,
+  exitDelay: _propTypes["default"].number,
+  exitDuration: _propTypes["default"].number,
+  exitName: _propTypes["default"].string,
+  isActive: _propTypes["default"].bool,
+  isCustomized: _propTypes["default"].bool,
+  isFlex: _propTypes["default"].bool,
+  name: _propTypes["default"].oneOf(['fade', 'slideDown', 'flyDown', 'slideRight', 'shrink', 'expand', 'slideLeft']),
+  needUIPack: _propTypes["default"].bool,
+  runOnMount: _propTypes["default"].bool
+};
+VelocityAnimationGroup.contextTypes = {
+  direction: _propTypes["default"].string,
+  isReducedMotion: _propTypes["default"].bool
+};
 VelocityAnimationGroup.contextType = _LibraryContextInit["default"];
 
 if (false) {