@zohodesk/components 1.2.41 → 1.2.42

package/README.md

@@ -32,6 +32,15 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.2.42
+
+- **Heading (v0&v1)** - 
+  - whiteSpace prop added
+
+- **Tooltip (v0&v1)** - 
+  - whiteSpace prop added
+  - `data-title-wrap` now accepts whitespace CSS values instead of a boolean, allowing the tooltip to support all whitespace options. Default value is `normal`.
+
 # 1.2.41
 
 - **Tabs** 

package/es/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap

@@ -27,7 +27,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
           data-test-id="selectYear"
         >
           <h2
-            class="reset thMonYear"
+            class="reset  thMonYear"
             data-title="July 2023"
             tabindex="0"
           >

package/es/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap

@@ -15,7 +15,7 @@ exports[`DateTimePopupHeader rendering the defult props 1`] = `
       data-test-id="selectYear"
     >
       <h2
-        class="reset thMonYear"
+        class="reset  thMonYear"
         tabindex="0"
       />
       <span>

package/es/DateTime/__tests__/__snapshots__/YearView.spec.js.snap

@@ -35,7 +35,7 @@ exports[`YearView rendering the defult props 1`] = `
             data-test-id="boxComponent"
           >
             <h4
-              class="reset yearText"
+              class="reset  yearText"
               data-title="1850"
               tabindex="0"
             >

package/es/Heading/Heading.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
+import { whiteSpaceClassMapping } from '../utils/cssUtils';
 import style from './Heading.module.css';
 export default class Heading extends React.Component {
   render() {
@@ -12,15 +13,17 @@ export default class Heading extends React.Component {
       title,
       dataTitle,
       dataId,
-      a11y
+      a11y,
+      whiteSpace
     } = this.props;
     return /*#__PURE__*/React.createElement(tagName, {
-      className: `${style.reset} ${className}`,
+      className: `${style.reset} ${whiteSpace ? whiteSpaceClassMapping[whiteSpace] : ''} ${className}`,
       onClick,
       onDoubleClick,
       'data-title': dataTitle || title,
       'data-id': dataId,
       'data-test-id': dataId,
+      'data-title-wrap': whiteSpace,
       ...a11y
     }, title);
   }

package/es/Heading/__tests__/Heading.spec.js

@@ -8,4 +8,13 @@ describe('Heading', () => {
     } = render( /*#__PURE__*/React.createElement(Heading, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  const whiteSpace = ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces'];
+  test.each(whiteSpace)('Should render whiteSpace of Heading - %s', whiteSpace => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Heading, {
+      whiteSpace: whiteSpace
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/es/Heading/__tests__/__snapshots__/Heading.spec.js.snap

@@ -1,9 +1,63 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Heading Should render whiteSpace of Heading - break-spaces 1`] = `
+<DocumentFragment>
+  <h1
+    class="reset whiteSpace_breakSpaces "
+    data-title-wrap="break-spaces"
+  />
+</DocumentFragment>
+`;
+
+exports[`Heading Should render whiteSpace of Heading - normal 1`] = `
+<DocumentFragment>
+  <h1
+    class="reset whiteSpace_normal "
+    data-title-wrap="normal"
+  />
+</DocumentFragment>
+`;
+
+exports[`Heading Should render whiteSpace of Heading - nowrap 1`] = `
+<DocumentFragment>
+  <h1
+    class="reset whiteSpace_nowrap "
+    data-title-wrap="nowrap"
+  />
+</DocumentFragment>
+`;
+
+exports[`Heading Should render whiteSpace of Heading - pre 1`] = `
+<DocumentFragment>
+  <h1
+    class="reset whiteSpace_pre "
+    data-title-wrap="pre"
+  />
+</DocumentFragment>
+`;
+
+exports[`Heading Should render whiteSpace of Heading - pre-line 1`] = `
+<DocumentFragment>
+  <h1
+    class="reset whiteSpace_preLine "
+    data-title-wrap="pre-line"
+  />
+</DocumentFragment>
+`;
+
+exports[`Heading Should render whiteSpace of Heading - pre-wrap 1`] = `
+<DocumentFragment>
+  <h1
+    class="reset whiteSpace_preWrap "
+    data-title-wrap="pre-wrap"
+  />
+</DocumentFragment>
+`;
+
 exports[`Heading rendering the defult props 1`] = `
 <DocumentFragment>
   <h1
-    class="reset "
+    class="reset  "
   />
 </DocumentFragment>
 `;

package/es/Heading/props/propTypes.js

@@ -7,5 +7,6 @@ export const propTypes = {
   dataTitle: PropTypes.string,
   onClick: PropTypes.func,
   onDoubleClick: PropTypes.func,
-  a11y: PropTypes.object
+  a11y: PropTypes.object,
+  whiteSpace: PropTypes.oneOf(['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces'])
 };

package/es/Tooltip/Tooltip.js

@@ -2,9 +2,10 @@ import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import { getLibraryConfig } from '../Provider/Config';
-import style from './Tooltip.module.css';
 import ResizeObserver from '../Responsive/ResizeObserver';
 import selectn from 'selectn';
+import { whiteSpaceClassMapping } from '../utils/cssUtils';
+import style from './Tooltip.module.css';
 export default class Tooltip extends React.Component {
   constructor(props) {
     super(props);
@@ -192,7 +193,8 @@ export default class Tooltip extends React.Component {
 
         let isHtml = titleDiv.getAttribute('data-ishtml');
         let dataTooltipnoArrow = titleDiv.getAttribute('data-tooltip-noarrow') === 'true' ? true : false;
-        let dataTooltipWrap = titleDiv.getAttribute('data-title-wrap') === 'true' ? true : false;
+        let dataTooltipWrap = titleDiv.getAttribute('data-title-wrap') || 'normal'; // values: normal, pre, pre-wrap, pre-line, nowrap, break-spaces
+
         let clientRect = titleDiv.getBoundingClientRect();
         let boxLayout = this.getClientRectOfContEl(containerElement);
         this.setState({
@@ -481,7 +483,15 @@ export default class Tooltip extends React.Component {
     } = this.props;
     let arrowStyle = isArrowHorizontal ? isArrowRight ? style.arrowRight : style.arrowLeft : isArrowDown ? style.arrowDown : style.arrowUp;
     title = title ? title.trim() : null;
-    let tooltipCss = `${style.tooltipcont} ${dataTooltipWrap ? style.tooltipWrapCont : style.tooltipNormalCont}`;
+    let tooltipWhiteSpaceModification = dataTooltipWrap;
+
+    if (dataTooltipWrap == 'pre') {
+      tooltipWhiteSpaceModification = 'preWrap';
+    } else if (dataTooltipWrap == 'nowrap') {
+      tooltipWhiteSpaceModification = 'normal';
+    }
+
+    let tooltipCss = `${style.tooltipcont} ${whiteSpaceClassMapping[tooltipWhiteSpaceModification]}`;
     return title ? /*#__PURE__*/React.createElement("div", {
       className: `${customClass} ${style.tooltiptext}`,
       style: {

package/es/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/es/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/es/utils/cssUtils.js

@@ -0,0 +1,11 @@
+import commonStyle from '../common/common.module.css';
+export const whiteSpaceClassMapping = {
+  // eslint-disable-next-line dot-notation
+  'normal': commonStyle.whiteSpace_normal,
+  'pre': commonStyle.whiteSpace_pre,
+  'pre-wrap': commonStyle.whiteSpace_preWrap,
+  'pre-line': commonStyle.whiteSpace_preLine,
+  // eslint-disable-next-line dot-notation
+  'nowrap': commonStyle.whiteSpace_nowrap,
+  'break-spaces': commonStyle.whiteSpace_breakSpaces
+};

package/es/v1/Heading/Heading.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
+import { whiteSpaceClassMapping } from '../../utils/cssUtils';
 import style from '../../Heading/Heading.module.css';
 export default function Heading(props) {
   let {
@@ -11,15 +12,17 @@ export default function Heading(props) {
     title,
     dataTitle,
     dataId,
-    a11y
+    a11y,
+    whiteSpace
   } = props;
   return /*#__PURE__*/React.createElement(tagName, {
-    className: `${style.reset} ${className}`,
+    className: `${style.reset} ${whiteSpace ? whiteSpaceClassMapping[whiteSpace] : ''} ${className}`,
     onClick,
     onDoubleClick,
     'data-title': dataTitle || title,
     'data-id': dataId,
     'data-test-id': dataId,
+    'data-title-wrap': whiteSpace,
     ...a11y
   }, title);
 }

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

@@ -7,5 +7,6 @@ export const propTypes = {
   dataTitle: PropTypes.string,
   onClick: PropTypes.func,
   onDoubleClick: PropTypes.func,
-  a11y: PropTypes.object
+  a11y: PropTypes.object,
+  whiteSpace: PropTypes.oneOf(['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces'])
 };

package/es/v1/Tooltip/Tooltip.js

@@ -2,9 +2,10 @@ import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import { getLibraryConfig } from '../../Provider/Config';
-import style from '../../Tooltip/Tooltip.module.css';
 import ResizeObserver from '../../Responsive/ResizeObserver';
 import selectn from 'selectn';
+import { whiteSpaceClassMapping } from '../../utils/cssUtils';
+import style from '../../Tooltip/Tooltip.module.css';
 export default class Tooltip extends React.Component {
   constructor(props) {
     super(props);
@@ -192,7 +193,8 @@ export default class Tooltip extends React.Component {
 
         let isHtml = titleDiv.getAttribute('data-ishtml');
         let dataTooltipnoArrow = titleDiv.getAttribute('data-tooltip-noarrow') === 'true' ? true : false;
-        let dataTooltipWrap = titleDiv.getAttribute('data-title-wrap') === 'true' ? true : false;
+        let dataTooltipWrap = titleDiv.getAttribute('data-title-wrap') || 'normal'; // values: normal, pre, pre-wrap, pre-line, nowrap, break-spaces
+
         let clientRect = titleDiv.getBoundingClientRect();
         let boxLayout = this.getClientRectOfContEl(containerElement);
         this.setState({
@@ -481,7 +483,15 @@ export default class Tooltip extends React.Component {
     } = this.props;
     let arrowStyle = isArrowHorizontal ? isArrowRight ? style.arrowRight : style.arrowLeft : isArrowDown ? style.arrowDown : style.arrowUp;
     title = title ? title.trim() : null;
-    let tooltipCss = `${style.tooltipcont} ${dataTooltipWrap ? style.tooltipWrapCont : style.tooltipNormalCont}`;
+    let tooltipWhiteSpaceModification = dataTooltipWrap;
+
+    if (dataTooltipWrap == 'pre') {
+      tooltipWhiteSpaceModification = 'preWrap';
+    } else if (dataTooltipWrap == 'nowrap') {
+      tooltipWhiteSpaceModification = 'normal';
+    }
+
+    let tooltipCss = `${style.tooltipcont} ${whiteSpaceClassMapping[tooltipWhiteSpaceModification]}`;
     return title ? /*#__PURE__*/React.createElement("div", {
       className: `${customClass} ${style.tooltiptext}`,
       style: {

package/lib/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap

@@ -27,7 +27,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
           data-test-id="selectYear"
         >
           <h2
-            class="reset thMonYear"
+            class="reset  thMonYear"
             data-title="July 2023"
             tabindex="0"
           >

package/lib/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap

@@ -15,7 +15,7 @@ exports[`DateTimePopupHeader rendering the defult props 1`] = `
       data-test-id="selectYear"
     >
       <h2
-        class="reset thMonYear"
+        class="reset  thMonYear"
         tabindex="0"
       />
       <span>

package/lib/DateTime/__tests__/__snapshots__/YearView.spec.js.snap

@@ -35,7 +35,7 @@ exports[`YearView rendering the defult props 1`] = `
             data-test-id="boxComponent"
           >
             <h4
-              class="reset yearText"
+              class="reset  yearText"
               data-title="1850"
               tabindex="0"
             >

package/lib/Heading/Heading.js

@@ -13,6 +13,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _cssUtils = require("../utils/cssUtils");
+
 var _HeadingModule = _interopRequireDefault(require("./Heading.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -65,14 +67,16 @@ var Heading = /*#__PURE__*/function (_React$Component) {
           title = _this$props.title,
           dataTitle = _this$props.dataTitle,
           dataId = _this$props.dataId,
-          a11y = _this$props.a11y;
+          a11y = _this$props.a11y,
+          whiteSpace = _this$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/Heading/__tests__/Heading.spec.js

@@ -15,4 +15,13 @@ describe('Heading', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  var whiteSpace = ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces'];
+  test.each(whiteSpace)('Should render whiteSpace of Heading - %s', function (whiteSpace) {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+      whiteSpace: whiteSpace
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/lib/Heading/__tests__/__snapshots__/Heading.spec.js.snap

@@ -1,9 +1,63 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Heading Should render whiteSpace of Heading - break-spaces 1`] = `
+<DocumentFragment>
+  <h1
+    class="reset whiteSpace_breakSpaces "
+    data-title-wrap="break-spaces"
+  />
+</DocumentFragment>
+`;
+
+exports[`Heading Should render whiteSpace of Heading - normal 1`] = `
+<DocumentFragment>
+  <h1
+    class="reset whiteSpace_normal "
+    data-title-wrap="normal"
+  />
+</DocumentFragment>
+`;
+
+exports[`Heading Should render whiteSpace of Heading - nowrap 1`] = `
+<DocumentFragment>
+  <h1
+    class="reset whiteSpace_nowrap "
+    data-title-wrap="nowrap"
+  />
+</DocumentFragment>
+`;
+
+exports[`Heading Should render whiteSpace of Heading - pre 1`] = `
+<DocumentFragment>
+  <h1
+    class="reset whiteSpace_pre "
+    data-title-wrap="pre"
+  />
+</DocumentFragment>
+`;
+
+exports[`Heading Should render whiteSpace of Heading - pre-line 1`] = `
+<DocumentFragment>
+  <h1
+    class="reset whiteSpace_preLine "
+    data-title-wrap="pre-line"
+  />
+</DocumentFragment>
+`;
+
+exports[`Heading Should render whiteSpace of Heading - pre-wrap 1`] = `
+<DocumentFragment>
+  <h1
+    class="reset whiteSpace_preWrap "
+    data-title-wrap="pre-wrap"
+  />
+</DocumentFragment>
+`;
+
 exports[`Heading rendering the defult props 1`] = `
 <DocumentFragment>
   <h1
-    class="reset "
+    class="reset  "
   />
 </DocumentFragment>
 `;

package/lib/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/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/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;