@zohodesk/components 1.0.0-temp-206.4 → 1.0.0-temp-207

package/lib/Textarea/utils/updateState.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var updateState = function updateState(prevState, newState, renderRef) {
+  var height = newState.height,
+      overflow = newState.overflow;
+  var renders = renderRef; // Need a large enough difference to update the height.
+  // This prevents infinite rendering loop.
+
+  if (renders.current < 20 && (height > 0 && Math.abs((prevState.height || 0) - height) > 1 || prevState.overflow !== overflow)) {
+    renders.current += 1;
+    return {
+      overflow: overflow,
+      height: height
+    };
+  } // if (process.env.NODE_ENV !== "production") {
+  //   if (renders.current === 20) {
+  //     console.error(
+  //       [
+  //         "MUI: Too many re-renders. The layout is unstable.",
+  //         "TextareaAutosize limits the number of renders to prevent an infinite loop."
+  //       ].join("\n")
+  //     )
+  //   }
+  // }
+
+
+  return prevState;
+};
+
+var _default = updateState;
+exports["default"] = _default;

package/lib/Tooltip/Tooltip.js

@@ -15,12 +15,14 @@ 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"));
 
+var _cssUtils = require("../utils/cssUtils");
+
+var _TooltipModule = _interopRequireDefault(require("./Tooltip.module.css"));
+
 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"); } }
@@ -251,7 +253,8 @@ 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 dataTooltipWrap = titleDiv.getAttribute('data-title-wrap') || 'normal'; // values: normal, pre, pre-wrap, pre-line, nowrap, break-spaces
+
           var clientRect = titleDiv.getBoundingClientRect();
           var boxLayout = this.getClientRectOfContEl(containerElement);
           this.setState({
@@ -545,7 +548,15 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
           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);
+      var tooltipWhiteSpaceModification = dataTooltipWrap;
+
+      if (dataTooltipWrap == 'pre') {
+        tooltipWhiteSpaceModification = 'preWrap';
+      } else if (dataTooltipWrap == 'nowrap') {
+        tooltipWhiteSpaceModification = 'normal';
+      }
+
+      var tooltipCss = "".concat(_TooltipModule["default"].tooltipcont, " ").concat(_cssUtils.whiteSpaceClassMapping[tooltipWhiteSpaceModification]);
       return title ? /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(customClass, " ").concat(_TooltipModule["default"].tooltiptext),
         style: {

package/lib/Tooltip/Tooltip.module.css

@@ -26,14 +26,6 @@
   border-color: transparent;
   border-radius: var(--zd_size4);
 }
-
-.tooltipWrapCont {
-  white-space: pre-wrap;
-}
-
-.tooltipNormalCont {
-  white-space: normal;
-}
 .tooltiparrow {
   content: '';
   position: absolute;

package/lib/common/common.module.css

@@ -522,4 +522,28 @@
 .fitContHeight {
   height: fit-content ;
   height: -moz-fit-content ;
+}
+
+.whiteSpace_normal {
+  white-space: normal;
+}
+
+.whiteSpace_nowrap {
+  white-space: nowrap;
+}
+
+.whiteSpace_pre {
+  white-space: pre;
+}
+
+.whiteSpace_preLine {
+  white-space: pre-line;
+}
+
+.whiteSpace_preWrap {
+  white-space: pre-wrap;
+}
+
+.whiteSpace_breakSpaces {
+  white-space: break-spaces
 }

package/lib/utils/cssUtils.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.whiteSpaceClassMapping = void 0;
+
+var _commonModule = _interopRequireDefault(require("../common/common.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var whiteSpaceClassMapping = {
+  // eslint-disable-next-line dot-notation
+  'normal': _commonModule["default"].whiteSpace_normal,
+  'pre': _commonModule["default"].whiteSpace_pre,
+  'pre-wrap': _commonModule["default"].whiteSpace_preWrap,
+  'pre-line': _commonModule["default"].whiteSpace_preLine,
+  // eslint-disable-next-line dot-notation
+  'nowrap': _commonModule["default"].whiteSpace_nowrap,
+  'break-spaces': _commonModule["default"].whiteSpace_breakSpaces
+};
+exports.whiteSpaceClassMapping = whiteSpaceClassMapping;

package/lib/v1/Card/props/propTypes.js

@@ -10,7 +10,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var CardHeader_propTypes = {
-  children: _propTypes["default"].element,
+  children: _propTypes["default"].node,
   dataId: _propTypes["default"].string,
   isScroll: _propTypes["default"].bool,
   customClass: _propTypes["default"].string,

package/lib/v1/DateTime/props/propTypes.js

@@ -110,7 +110,7 @@ exports.DateTime_propTypes = DateTime_propTypes;
 var DateWidget_propTypes = {
   borderColor: _propTypes["default"].oneOf(['transparent', 'default']),
   cantEditOnPopupOpen: _propTypes["default"].bool,
-  children: _propTypes["default"].object,
+  children: _propTypes["default"].node,
   className: _propTypes["default"].string,
   closePopupOnly: _propTypes["default"].func,
   dataId: _propTypes["default"].string,

package/lib/v1/Heading/Heading.js

@@ -11,6 +11,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtils = require("../../utils/cssUtils");
+
 var _HeadingModule = _interopRequireDefault(require("../../Heading/Heading.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -29,14 +31,16 @@ function Heading(props) {
       title = props.title,
       dataTitle = props.dataTitle,
       dataId = props.dataId,
-      a11y = props.a11y;
+      a11y = props.a11y,
+      whiteSpace = props.whiteSpace;
   return /*#__PURE__*/_react["default"].createElement(tagName, _objectSpread({
-    className: "".concat(_HeadingModule["default"].reset, " ").concat(className),
+    className: "".concat(_HeadingModule["default"].reset, " ").concat(whiteSpace ? _cssUtils.whiteSpaceClassMapping[whiteSpace] : '', " ").concat(className),
     onClick: onClick,
     onDoubleClick: onDoubleClick,
     'data-title': dataTitle || title,
     'data-id': dataId,
-    'data-test-id': dataId
+    'data-test-id': dataId,
+    'data-title-wrap': whiteSpace
   }, a11y), title);
 }
 

package/lib/v1/Heading/props/propTypes.js

@@ -17,6 +17,7 @@ var propTypes = {
   dataTitle: _propTypes["default"].string,
   onClick: _propTypes["default"].func,
   onDoubleClick: _propTypes["default"].func,
-  a11y: _propTypes["default"].object
+  a11y: _propTypes["default"].object,
+  whiteSpace: _propTypes["default"].oneOf(['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces'])
 };
 exports.propTypes = propTypes;

package/lib/v1/ListItem/ListItemWithAvatar.js

@@ -41,7 +41,6 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 var ListItemWithAvatar = function ListItemWithAvatar(props) {
   var size = props.size,
-      avatarSize = props.avatarSize,
       active = props.active,
       highlight = props.highlight,
       value = props.value,
@@ -68,8 +67,7 @@ var ListItemWithAvatar = function ListItemWithAvatar(props) {
       id = props.id,
       getRef = props.getRef,
       onClick = props.onClick,
-      onMouseEnter = props.onMouseEnter,
-      onAvatarClick = props.onAvatarClick;
+      onMouseEnter = props.onMouseEnter;
 
   function handleRef(ele) {
     getRef && getRef(ele, index, id);
@@ -125,7 +123,7 @@ var ListItemWithAvatar = function ListItemWithAvatar(props) {
     className: _ListItemModule["default"].leftAvatar
   }, isTeam ? /*#__PURE__*/_react["default"].createElement(_AvatarTeam["default"], {
     name: name,
-    size: avatarSize,
+    size: "small",
     src: imgSrc,
     needTitle: needAvatarTitle,
     textPalette: isDarkPalette ? 'white' : '',
@@ -133,18 +131,16 @@ var ListItemWithAvatar = function ListItemWithAvatar(props) {
     customClass: {
       customAvatar: customAvatar,
       customAvatarTeam: customAvatarTeam
-    },
-    onClick: onAvatarClick
+    }
   }) : /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
     name: name,
-    size: avatarSize,
+    size: "small",
     src: imgSrc,
     initial: initial,
     textPalette: isDarkPalette ? 'white' : '',
     needTitle: needAvatarTitle,
     palette: isDarkPalette ? 'info' : avatarPalette,
-    customClass: customAvatar,
-    onClick: onAvatarClick
+    customClass: customAvatar
   })) : null, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
     flexible: true,
     shrink: true,

package/lib/v1/ListItem/props/defaultProps.js

@@ -47,7 +47,6 @@ var ListItemWithAvatarDefaultProps = {
   needTick: false,
   palette: 'default',
   size: 'medium',
-  avatarSize: 'small',
   value: 'List',
   dataId: 'listAvatar',
   needBorder: true,

package/lib/v1/ListItem/props/propTypes.js

@@ -7,8 +7,6 @@ exports.ListItem_Props = exports.ListItemWithRadio_Props = exports.ListItemWithI
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _propTypes2 = require("../../Avatar/props/propTypes.js");
-
 var _ListItemWithAvatar_P;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -85,7 +83,7 @@ var ListItemWithAvatar_Props = (_ListItemWithAvatar_P = {
   active: _propTypes["default"].bool,
   autoHover: _propTypes["default"].bool,
   avatarPalette: _propTypes["default"].string
-}, _defineProperty(_ListItemWithAvatar_P, "avatarPalette", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataSelectorId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "disableTitle", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "getRef", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "highlight", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "id", _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])), _defineProperty(_ListItemWithAvatar_P, "imgSrc", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "index", _propTypes["default"].number), _defineProperty(_ListItemWithAvatar_P, "initial", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "isDisabled", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "isTeam", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "name", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "needAvatarTitle", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needBorder", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needTick", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "onClick", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "onMouseEnter", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "palette", _propTypes["default"].oneOf(['dark'])), _defineProperty(_ListItemWithAvatar_P, "size", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "avatarSize", _propTypes2.propTypes.size), _defineProperty(_ListItemWithAvatar_P, "title", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "value", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "a11y", _propTypes["default"].shape({
+}, _defineProperty(_ListItemWithAvatar_P, "avatarPalette", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataSelectorId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "disableTitle", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "getRef", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "highlight", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "id", _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])), _defineProperty(_ListItemWithAvatar_P, "imgSrc", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "index", _propTypes["default"].number), _defineProperty(_ListItemWithAvatar_P, "initial", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "isDisabled", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "isTeam", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "name", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "needAvatarTitle", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needBorder", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needTick", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "onClick", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "onMouseEnter", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "palette", _propTypes["default"].oneOf(['dark'])), _defineProperty(_ListItemWithAvatar_P, "size", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "title", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "value", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "a11y", _propTypes["default"].shape({
   role: _propTypes["default"].string,
   ariaSelected: _propTypes["default"].bool,
   ariaHidden: _propTypes["default"].bool
@@ -95,7 +93,7 @@ var ListItemWithAvatar_Props = (_ListItemWithAvatar_P = {
   customAvatarTeam: _propTypes["default"].string
 })), _defineProperty(_ListItemWithAvatar_P, "needMultiLineText", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "customProps", _propTypes["default"].shape({
   ListItemProps: _propTypes["default"].object
-})), _defineProperty(_ListItemWithAvatar_P, "onAvatarClick", _propTypes["default"].func), _ListItemWithAvatar_P);
+})), _ListItemWithAvatar_P);
 exports.ListItemWithAvatar_Props = ListItemWithAvatar_Props;
 var ListItemWithCheckBox_Props = {
   active: _propTypes["default"].bool,

package/lib/v1/MultiSelect/Suggestions.js

@@ -70,7 +70,6 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
           getRef = _this$props.getRef,
           hoverOption = _this$props.hoverOption,
           onClick = _this$props.onClick,
-          onAvatarClick = _this$props.onAvatarClick,
           onMouseEnter = _this$props.onMouseEnter,
           needTick = _this$props.needTick,
           needBorder = _this$props.needBorder,
@@ -135,7 +134,6 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
             key: "".concat(id, "avatarListItem"),
             name: value,
             onClick: onClick,
-            onAvatarClick: onAvatarClick,
             onMouseEnter: onMouseEnter,
             value: value,
             title: value,

package/lib/v1/MultiSelect/props/propTypes.js

@@ -180,7 +180,6 @@ var Suggestions_propTypes = {
   needBorder: _propTypes["default"].bool,
   needTick: _propTypes["default"].bool,
   onClick: _propTypes["default"].func,
-  onAvatarClick: _propTypes["default"].func,
   onMouseEnter: _propTypes["default"].func,
   palette: _propTypes["default"].string,
   selectedOptions: _propTypes["default"].array,

package/lib/v1/ResponsiveDropBox/props/propTypes.js

@@ -18,7 +18,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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 = _objectSpread(_objectSpread({}, _propTypes2.DropBoxPropTypes), {}, {
-  children: _propTypes["default"].element,
+  children: _propTypes["default"].node,
   customClass: _propTypes["default"].object,
   isResponsivePadding: _propTypes["default"].bool,
   alignBox: _propTypes["default"].oneOf(['column', 'row'])

package/lib/v1/Ribbon/props/propTypes.js

@@ -10,7 +10,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var propTypes = {
-  children: _propTypes["default"].element,
+  children: _propTypes["default"].node,
   dataId: _propTypes["default"].string,
   palette: _propTypes["default"].oneOf(['default', 'danger', 'primary', 'secondary', 'info', 'dark']),
   size: _propTypes["default"].oneOf(['small', 'medium', 'large', 'xlarge']),

package/lib/v1/Tab/Tabs.js

@@ -128,8 +128,8 @@ var Tabs = function Tabs(props) {
       searchErrorText = props.searchErrorText,
       placeHolderText = props.placeHolderText,
       searchBoxSize = props.searchBoxSize,
-      ariaTitleId = props.ariaTitleId,
-      isPopupOpen = props.isPopupOpen;
+      isPopupOpen = props.isPopupOpen,
+      closePopupOnly = props.closePopupOnly;
 
   function handleChange(value, e) {
     setSearchValue(value);
@@ -175,7 +175,7 @@ var Tabs = function Tabs(props) {
       size: "small"
     }), /*#__PURE__*/_react["default"].createElement("div", {
       className: _v1TabsModule["default"].emptyStateTitle
-    }, searchErrorText)); // return <EmptySearch size='small' />;
+    }, searchErrorText));
   }
 
   function onTabResize(size, target) {
@@ -460,7 +460,7 @@ var Tabs = function Tabs(props) {
 
     e.preventDefault();
     onSelect(tab);
-    togglePopupLocal();
+    closePopupOnly();
   }
 
   function onScrollLocal(e) {
@@ -580,7 +580,7 @@ var Tabs = function Tabs(props) {
         },
         boxPosition: position,
         getRef: getContainerRef,
-        isBoxPaddingNeed: false,
+        isBoxPaddingNeed: true,
         isArrow: false
       }, DropBoxProps, {
         isResponsivePadding: true,
@@ -601,14 +601,7 @@ var Tabs = function Tabs(props) {
             'data-a11y-autofocus': true
           }
         },
-        dataId: "".concat(dataId, "_search"),
-        a11y: {
-          role: 'combobox',
-          ariaOwns: ariaTitleId,
-          ariaAutocomplete: 'list',
-          ariaHaspopup: true,
-          ariaExpanded: true
-        }
+        dataId: "".concat(dataId, "_search")
       }, TextBoxIconProps))) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true,
         shrink: true,

package/lib/v1/Tab/props/propTypes.js

@@ -106,8 +106,8 @@ var Tabs_propTypes = {
   dataSelectorId: _propTypes["default"].string,
   placeHolderText: _propTypes["default"].string,
   searchBoxSize: _propTypes["default"].string,
-  ariaTitleId: _propTypes["default"].string,
-  searchErrorText: _propTypes["default"].string
+  searchErrorText: _propTypes["default"].string,
+  closePopupOnly: _propTypes["default"].func
 };
 exports.Tabs_propTypes = Tabs_propTypes;
 var TabWrapper_propTypes = {

package/lib/v1/Tab/v1Tabs.module.css

@@ -141,7 +141,7 @@
 }
 
 .emptyStateContainer {
-  padding-bottom: var(--zd_size25);
+  padding-bottom: var(--zd_size15) ;
 }
 
 .emptyStateTitle {
@@ -163,5 +163,5 @@
 }
 
 .listWrapper {
-  padding: var(--zd_size10) 0 ;
+  padding-top: var(--zd_size10) ;
 }

package/lib/v1/Tag/Tag.js

@@ -69,8 +69,7 @@ function Tag(props) {
       a11y = props.a11y,
       needEffect = props.needEffect,
       isReadOnly = props.isReadOnly,
-      id = props.id,
-      onAvatarClick = props.onAvatarClick;
+      id = props.id;
 
   var handleSelect = function handleSelect(e) {
     e && e.preventDefault();
@@ -123,8 +122,7 @@ function Tag(props) {
     size: "small",
     src: imageURL,
     textPalette: isDarkPalette ? 'white' : '',
-    customClass: customAvatar,
-    onClick: onAvatarClick
+    customClass: customAvatar
   })) : null, iconName ? /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(_TagModule["default"].icon, " ").concat(customTagIcon),
     "aria-hidden": true

package/lib/v1/Tag/props/propTypes.js

@@ -42,7 +42,6 @@ var propTypes = {
   }),
   needEffect: _propTypes["default"].bool,
   isReadOnly: _propTypes["default"].bool,
-  dataSelectorId: _propTypes["default"].string,
-  onAvatarClick: _propTypes["default"].func
+  dataSelectorId: _propTypes["default"].string
 };
 exports.propTypes = propTypes;

package/lib/v1/Tooltip/Tooltip.js

@@ -15,12 +15,14 @@ var _propTypes = require("./props/propTypes");
 
 var _Config = require("../../Provider/Config");
 
-var _TooltipModule = _interopRequireDefault(require("../../Tooltip/Tooltip.module.css"));
-
 var _ResizeObserver = _interopRequireDefault(require("../../Responsive/ResizeObserver"));
 
 var _selectn = _interopRequireDefault(require("selectn"));
 
+var _cssUtils = require("../../utils/cssUtils");
+
+var _TooltipModule = _interopRequireDefault(require("../../Tooltip/Tooltip.module.css"));
+
 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"); } }
@@ -251,7 +253,8 @@ 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 dataTooltipWrap = titleDiv.getAttribute('data-title-wrap') || 'normal'; // values: normal, pre, pre-wrap, pre-line, nowrap, break-spaces
+
           var clientRect = titleDiv.getBoundingClientRect();
           var boxLayout = this.getClientRectOfContEl(containerElement);
           this.setState({
@@ -545,7 +548,15 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
           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);
+      var tooltipWhiteSpaceModification = dataTooltipWrap;
+
+      if (dataTooltipWrap == 'pre') {
+        tooltipWhiteSpaceModification = 'preWrap';
+      } else if (dataTooltipWrap == 'nowrap') {
+        tooltipWhiteSpaceModification = 'normal';
+      }
+
+      var tooltipCss = "".concat(_TooltipModule["default"].tooltipcont, " ").concat(_cssUtils.whiteSpaceClassMapping[tooltipWhiteSpaceModification]);
       return title ? /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(customClass, " ").concat(_TooltipModule["default"].tooltiptext),
         style: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-206.4",
+  "version": "1.0.0-temp-207",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -38,7 +38,7 @@
     "build:css:umd": "npm run clean &&  npm run init && react-cli build:css:umd",
     "coverage": "react-cli coverage",
     "prepare": "npm run init &&  npm run build && npm run rtl && npm run cssVariableConvert ",
-    "prepublishOnly": "node prePublish.js && npm run download && npm run css:review && npm run review:props ",
+    "prepublishOnly": "node prePublish.js && npm run download && npm run css:review",
     "postpublish": "node postPublish.js",
     "report": "react-cli publish:report",
     "test": "react-cli test",
@@ -68,11 +68,11 @@
     "@zohodesk-private/css-variable-migrator": "^1.0.7",
     "@zohodesk-private/node-plugins": "1.1.8",
     "@zohodesk-private/react-prop-validator": "1.2.3",
-    "@zohodesk/a11y": "2.2.3",
+    "@zohodesk/a11y": "2.2.4",
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/hooks": "2.0.5",
-    "@zohodesk/icons": "1.0.52",
-    "@zohodesk/svg": "1.1.18",
+    "@zohodesk/icons": "1.0.58",
+    "@zohodesk/svg": "1.1.19",
     "@zohodesk/utils": "1.3.14",
     "@zohodesk/variables": "1.0.0",
     "@zohodesk/virtualizer": "1.0.3",
@@ -86,14 +86,14 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.0.52",
+    "@zohodesk/icons": "1.0.58",
     "@zohodesk/variables": "1.0.0",
-    "@zohodesk/svg": "1.1.18",
+    "@zohodesk/svg": "1.1.19",
     "@zohodesk/virtualizer": "1.0.3",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",
     "@zohodesk/hooks": "2.0.5",
     "@zohodesk/utils": "1.3.14",
-    "@zohodesk/a11y": "2.2.3"
+    "@zohodesk/a11y": "2.2.4"
   }
 }