@zohodesk/components 1.2.41 → 1.2.43

package/lib/Select/SelectWithAvatar.js

@@ -183,6 +183,10 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           isPopupOpen = _this$props.isPopupOpen,
           removeClose = _this$props.removeClose,
           isPopupReady = _this$props.isPopupReady,
+          isAbsolutePositioningNeeded = _this$props.isAbsolutePositioningNeeded,
+          positionsOffset = _this$props.positionsOffset,
+          targetOffset = _this$props.targetOffset,
+          isRestrictScroll = _this$props.isRestrictScroll,
           animationStyle = _this$props.animationStyle,
           textBoxSize = _this$props.textBoxSize,
           textBoxVariant = _this$props.textBoxVariant,
@@ -208,7 +212,8 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           htmlId = _this$props.htmlId,
           needEffect = _this$props.needEffect,
           isLoading = _this$props.isLoading,
-          dataSelectorId = _this$props.dataSelectorId;
+          dataSelectorId = _this$props.dataSelectorId,
+          getTargetRef = _this$props.getTargetRef;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -239,7 +244,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
         align: "vertical",
         alignBox: "row",
         className: "".concat(_MultiSelectModule["default"].container, " ").concat(_MultiSelectModule["default"][size], " ").concat(_MultiSelectModule["default"]["borderColor_".concat(borderColor)], " ").concat(isActive && needBorder ? _MultiSelectModule["default"].active : '', " ").concat(textBoxClass ? textBoxClass : '', " ").concat(needBorder ? _MultiSelectModule["default"].hasBorder : ''),
-        eleRef: this.getTargetRef,
+        eleRef: getTargetRef,
         onClick: !isDisabled && this.togglePopup
       }, selectedId ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _MultiSelectModule["default"].tag,
@@ -303,6 +308,10 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           isArrow: false,
           onClick: removeClose,
           needResponsive: needResponsive,
+          isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+          positionsOffset: positionsOffset,
+          targetOffset: targetOffset,
+          isRestrictScroll: isRestrictScroll,
           isPadding: false,
           isResponsivePadding: true,
           alignBox: "row",

package/lib/Select/SelectWithIcon.js

@@ -396,6 +396,10 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           isPopupReady = _this$props7.isPopupReady,
           position = _this$props7.position,
           getContainerRef = _this$props7.getContainerRef,
+          isAbsolutePositioningNeeded = _this$props7.isAbsolutePositioningNeeded,
+          positionsOffset = _this$props7.positionsOffset,
+          targetOffset = _this$props7.targetOffset,
+          isRestrictScroll = _this$props7.isRestrictScroll,
           valueKey = _this$props7.valueKey,
           idKey = _this$props7.idKey,
           needListBorder = _this$props7.needListBorder,
@@ -521,6 +525,10 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           onClick: removeClose,
           getRef: getContainerRef,
           needResponsive: needResponsive,
+          isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+          positionsOffset: positionsOffset,
+          targetOffset: targetOffset,
+          isRestrictScroll: isRestrictScroll,
           dataId: "".concat(dataId, "_suggestions"),
           size: boxSize,
           isPadding: false,

package/lib/Select/props/defaultProps.js

@@ -78,6 +78,8 @@ var GroupSelect_defaultProps = {
   needTick: true,
   needLocalSearch: true,
   isSearchClearOnClose: true,
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
   i18nKeys: {},
   iconOnHover: false,
   isLoading: false
@@ -103,6 +105,8 @@ var SelectWithAvatar_defaultProps = {
   dataSelectorId: 'selectWithAvatar',
   borderColor: 'default',
   isSearchClearOnClose: true,
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
   i18nKeys: {},
   needEffect: true,
   isLoading: false
@@ -117,5 +121,5 @@ var SelectWithIcon_defaultProps = (_SelectWithIcon_defau = {
   needListBorder: false,
   needSearch: false,
   boxSize: 'default'
-}, _defineProperty(_SelectWithIcon_defau, "needListBorder", false), _defineProperty(_SelectWithIcon_defau, "needCloseOnSelect", true), _defineProperty(_SelectWithIcon_defau, "borderColor", 'default'), _defineProperty(_SelectWithIcon_defau, "needTick", true), _defineProperty(_SelectWithIcon_defau, "searchBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "size", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxSize", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxVariant", 'default'), _defineProperty(_SelectWithIcon_defau, "dataId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dataSelectorId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dropBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "needIcon", true), _defineProperty(_SelectWithIcon_defau, "iconSize", '14'), _defineProperty(_SelectWithIcon_defau, "i18nKeys", {}), _defineProperty(_SelectWithIcon_defau, "isLoading", false), _defineProperty(_SelectWithIcon_defau, "customProps", {}), _SelectWithIcon_defau);
+}, _defineProperty(_SelectWithIcon_defau, "needListBorder", false), _defineProperty(_SelectWithIcon_defau, "needCloseOnSelect", true), _defineProperty(_SelectWithIcon_defau, "borderColor", 'default'), _defineProperty(_SelectWithIcon_defau, "needTick", true), _defineProperty(_SelectWithIcon_defau, "searchBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "size", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxSize", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxVariant", 'default'), _defineProperty(_SelectWithIcon_defau, "dataId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dataSelectorId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dropBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "needIcon", true), _defineProperty(_SelectWithIcon_defau, "iconSize", '14'), _defineProperty(_SelectWithIcon_defau, "i18nKeys", {}), _defineProperty(_SelectWithIcon_defau, "isLoading", false), _defineProperty(_SelectWithIcon_defau, "isAbsolutePositioningNeeded", true), _defineProperty(_SelectWithIcon_defau, "isRestrictScroll", false), _defineProperty(_SelectWithIcon_defau, "customProps", {}), _SelectWithIcon_defau);
 exports.SelectWithIcon_defaultProps = SelectWithIcon_defaultProps;

package/lib/Select/props/propTypes.js

@@ -106,8 +106,8 @@ var Select_propTypes = {
   isAbsolutePositioningNeeded: _propTypes["default"].bool,
   openPopupOnly: _propTypes["default"].bool,
   ariaLabelledby: _propTypes["default"].string,
-  positionsOffset: _propTypes["default"].array,
-  targetOffset: _propTypes["default"].array,
+  positionsOffset: _propTypes["default"].object,
+  targetOffset: _propTypes["default"].object,
   isRestrictScroll: _propTypes["default"].bool,
   dropBoxPortalId: _propTypes["default"].string
 };
@@ -179,6 +179,10 @@ var GroupSelect_propTypes = {
   closePopupOnly: _propTypes["default"].func,
   position: _propTypes["default"].string,
   removeClose: _propTypes["default"].func,
+  isAbsolutePositioningNeeded: _propTypes["default"].bool,
+  isRestrictScroll: _propTypes["default"].bool,
+  positionsOffset: _propTypes["default"].object,
+  targetOffset: _propTypes["default"].object,
   i18nKeys: _propTypes["default"].shape({
     loadingText: _propTypes["default"].string,
     emptyText: _propTypes["default"].string,
@@ -307,6 +311,10 @@ var SelectWithIcon_propTypes = {
   needResponsive: _propTypes["default"].bool,
   boxSize: _propTypes["default"].string,
   emptyMessage: _propTypes["default"].string,
+  isAbsolutePositioningNeeded: _propTypes["default"].bool,
+  isRestrictScroll: _propTypes["default"].bool,
+  positionsOffset: _propTypes["default"].object,
+  targetOffset: _propTypes["default"].object,
   customProps: _propTypes["default"].shape({
     TextBoxProps: _propTypes["default"].object,
     DropdownSearchTextBoxProps: _propTypes["default"].object,

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 = 'pre-wrap';
+      } 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;

package/lib/v1/MultiSelect/AdvancedGroupMultiSelect.js

@@ -943,6 +943,10 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
           dropBoxSize = _this$props8.dropBoxSize,
           position = _this$props8.position,
           getContainerRef = _this$props8.getContainerRef,
+          isAbsolutePositioningNeeded = _this$props8.isAbsolutePositioningNeeded,
+          positionsOffset = _this$props8.positionsOffset,
+          targetOffset = _this$props8.targetOffset,
+          isRestrictScroll = _this$props8.isRestrictScroll,
           emptyMessage = _this$props8.emptyMessage,
           searchEmptyMessage = _this$props8.searchEmptyMessage,
           title = _this$props8.title,
@@ -961,7 +965,8 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
           a11y = _this$props8.a11y,
           palette = _this$props8.palette,
           needEffect = _this$props8.needEffect,
-          autoComplete = _this$props8.autoComplete;
+          autoComplete = _this$props8.autoComplete,
+          getTargetRef = _this$props8.getTargetRef;
       var _i18nKeys = i18nKeys,
           _i18nKeys$clearText = _i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? 'Clear all' : _i18nKeys$clearText;
@@ -1000,7 +1005,8 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
         align: "vertical",
         alignBox: "row",
         onClick: this.togglePopup,
-        className: customClass
+        className: customClass,
+        eleRef: getTargetRef
       }, children) : /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
         alignBox: "row",

package/lib/v1/MultiSelect/AdvancedMultiSelect.js

@@ -436,7 +436,11 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           disabledOptions = _this$props5.disabledOptions,
           isLoading = _this$props5.isLoading,
           dataSelectorId = _this$props5.dataSelectorId,
-          customClass = _this$props5.customClass;
+          customClass = _this$props5.customClass,
+          isAbsolutePositioningNeeded = _this$props5.isAbsolutePositioningNeeded,
+          positionsOffset = _this$props5.positionsOffset,
+          targetOffset = _this$props5.targetOffset,
+          isRestrictScroll = _this$props5.isRestrictScroll;
       var _customProps$Suggesti = customProps.SuggestionsProps,
           SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti,
           _customProps$DropBoxP = customProps.DropBoxProps,
@@ -569,7 +573,11 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
             role: 'listbox',
             ariaMultiselectable: true
           },
-          dataId: "".concat(dataIdMultiSelectComp, "_dropbox")
+          dataId: "".concat(dataIdMultiSelectComp, "_dropbox"),
+          isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+          positionsOffset: positionsOffset,
+          targetOffset: targetOffset,
+          isRestrictScroll: isRestrictScroll
         }, DropBoxProps, {
           alignBox: "row",
           isResponsivePadding: getFooter ? false : true

package/lib/v1/MultiSelect/MultiSelect.js

@@ -1065,6 +1065,10 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           borderColor = _this$props15.borderColor,
           disableAction = _this$props15.disableAction,
           isBoxPaddingNeed = _this$props15.isBoxPaddingNeed,
+          isAbsolutePositioningNeeded = _this$props15.isAbsolutePositioningNeeded,
+          positionsOffset = _this$props15.positionsOffset,
+          targetOffset = _this$props15.targetOffset,
+          isRestrictScroll = _this$props15.isRestrictScroll,
           palette = _this$props15.palette,
           i18nKeys = _this$props15.i18nKeys,
           getFooter = _this$props15.getFooter,
@@ -1110,6 +1114,10 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         needResponsive: needResponsive,
         isPadding: false,
         isBoxPaddingNeed: isBoxPaddingNeed,
+        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+        positionsOffset: positionsOffset,
+        targetOffset: targetOffset,
+        isRestrictScroll: isRestrictScroll,
         palette: palette,
         htmlId: setAriaId,
         a11y: {

package/lib/v1/MultiSelect/MultiSelectWithAvatar.js

@@ -126,6 +126,10 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
           selectAllText = _this$props.selectAllText,
           getContainerRef = _this$props.getContainerRef,
           removeClose = _this$props.removeClose,
+          isAbsolutePositioningNeeded = _this$props.isAbsolutePositioningNeeded,
+          positionsOffset = _this$props.positionsOffset,
+          targetOffset = _this$props.targetOffset,
+          isRestrictScroll = _this$props.isRestrictScroll,
           isAnimate = _this$props.isAnimate,
           animationStyle = _this$props.animationStyle,
           isDisabled = _this$props.isDisabled,
@@ -179,6 +183,10 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
         needResponsive: needResponsive,
         isPadding: false,
         isBoxPaddingNeed: isBoxPaddingNeed,
+        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+        positionsOffset: positionsOffset,
+        targetOffset: targetOffset,
+        isRestrictScroll: isRestrictScroll,
         palette: palette,
         htmlId: setAriaId,
         a11y: {

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

@@ -40,6 +40,8 @@ var AdvancedGroupMultiSelect_defaultProps = {
   i18nKeys: {},
   a11y: {},
   isSearchClearOnSelect: true,
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
   needEffect: true,
   palette: 'default',
   isLoading: false,
@@ -76,7 +78,9 @@ var AdvancedMultiSelect_defaultProps = {
   needEffect: true,
   isLoading: false,
   dataSelectorId: 'advancedMultiSelect',
-  customClass: {}
+  customClass: {},
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false
 };
 exports.AdvancedMultiSelect_defaultProps = AdvancedMultiSelect_defaultProps;
 var EmptyState_defaultProps = {
@@ -115,6 +119,8 @@ var MultiSelect_defaultProps = {
   textBoxClass: '',
   palette: 'default',
   isSearchClearOnSelect: true,
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
   needEffect: true,
   boxSize: 'default',
   isLoading: false,
@@ -154,6 +160,8 @@ var MultiSelectWithAvatar_defaultProps = {
   palette: 'default',
   isBoxPaddingNeed: true,
   isSearchClearOnSelect: true,
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
   needEffect: true,
   isLoading: false,
   dataSelectorId: 'multiSelectWithAvatar',

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

@@ -115,6 +115,10 @@ var MultiSelect_propTypes = {
   getFooter: _propTypes["default"].func,
   needEffect: _propTypes["default"].bool,
   boxSize: _propTypes["default"].string,
+  isAbsolutePositioningNeeded: _propTypes["default"].bool,
+  isRestrictScroll: _propTypes["default"].bool,
+  positionsOffset: _propTypes["default"].object,
+  targetOffset: _propTypes["default"].object,
   isLoading: _propTypes["default"].bool,
   dataSelectorId: _propTypes["default"].string,
   keepSelectedOptions: _propTypes["default"].bool,
@@ -251,6 +255,10 @@ var AdvancedGroupMultiSelect_propTypes = _defineProperty({
   textField: _propTypes["default"].string,
   getTargetRef: _propTypes["default"].func,
   togglePopup: _propTypes["default"].func,
+  isAbsolutePositioningNeeded: _propTypes["default"].bool,
+  isRestrictScroll: _propTypes["default"].bool,
+  positionsOffset: _propTypes["default"].object,
+  targetOffset: _propTypes["default"].object,
   needLocalSearch: _propTypes["default"].bool,
   isNextOptions: _propTypes["default"].bool,
   getNextOptions: _propTypes["default"].func,

package/lib/v1/Select/GroupSelect.js

@@ -654,6 +654,10 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           getContainerRef = _this$props9.getContainerRef,
           isPopupReady = _this$props9.isPopupReady,
           removeClose = _this$props9.removeClose,
+          isAbsolutePositioningNeeded = _this$props9.isAbsolutePositioningNeeded,
+          positionsOffset = _this$props9.positionsOffset,
+          targetOffset = _this$props9.targetOffset,
+          isRestrictScroll = _this$props9.isRestrictScroll,
           borderColor = _this$props9.borderColor,
           needTick = _this$props9.needTick,
           children = _this$props9.children,
@@ -779,6 +783,10 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           onClick: removeClose,
           needResponsive: needResponsive,
           isPadding: false,
+          isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+          positionsOffset: positionsOffset,
+          targetOffset: targetOffset,
+          isRestrictScroll: isRestrictScroll,
           isResponsivePadding: getFooter ? false : true,
           alignBox: "row",
           dataId: "".concat(dataId, "_suggestionBox")

package/lib/v1/Select/SelectWithAvatar.js

@@ -183,6 +183,10 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           isPopupOpen = _this$props.isPopupOpen,
           removeClose = _this$props.removeClose,
           isPopupReady = _this$props.isPopupReady,
+          isAbsolutePositioningNeeded = _this$props.isAbsolutePositioningNeeded,
+          positionsOffset = _this$props.positionsOffset,
+          targetOffset = _this$props.targetOffset,
+          isRestrictScroll = _this$props.isRestrictScroll,
           animationStyle = _this$props.animationStyle,
           textBoxSize = _this$props.textBoxSize,
           textBoxVariant = _this$props.textBoxVariant,
@@ -208,7 +212,8 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           htmlId = _this$props.htmlId,
           needEffect = _this$props.needEffect,
           isLoading = _this$props.isLoading,
-          dataSelectorId = _this$props.dataSelectorId;
+          dataSelectorId = _this$props.dataSelectorId,
+          getTargetRef = _this$props.getTargetRef;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -239,7 +244,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
         align: "vertical",
         alignBox: "row",
         className: "".concat(_MultiSelectModule["default"].container, " ").concat(_MultiSelectModule["default"][size], " ").concat(_MultiSelectModule["default"]["borderColor_".concat(borderColor)], " ").concat(isActive && needBorder ? _MultiSelectModule["default"].active : '', " ").concat(textBoxClass ? textBoxClass : '', " ").concat(needBorder ? _MultiSelectModule["default"].hasBorder : ''),
-        eleRef: this.getTargetRef,
+        eleRef: getTargetRef,
         onClick: !isDisabled && this.togglePopup
       }, selectedId ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _MultiSelectModule["default"].tag,
@@ -303,6 +308,10 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           isArrow: false,
           onClick: removeClose,
           needResponsive: needResponsive,
+          isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+          positionsOffset: positionsOffset,
+          targetOffset: targetOffset,
+          isRestrictScroll: isRestrictScroll,
           isPadding: false,
           isResponsivePadding: true,
           alignBox: "row",

package/lib/v1/Select/SelectWithIcon.js

@@ -390,6 +390,10 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           isPopupReady = _this$props7.isPopupReady,
           position = _this$props7.position,
           getContainerRef = _this$props7.getContainerRef,
+          isAbsolutePositioningNeeded = _this$props7.isAbsolutePositioningNeeded,
+          positionsOffset = _this$props7.positionsOffset,
+          targetOffset = _this$props7.targetOffset,
+          isRestrictScroll = _this$props7.isRestrictScroll,
           valueKey = _this$props7.valueKey,
           idKey = _this$props7.idKey,
           needListBorder = _this$props7.needListBorder,
@@ -499,6 +503,10 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           onClick: removeClose,
           getRef: getContainerRef,
           needResponsive: needResponsive,
+          isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+          positionsOffset: positionsOffset,
+          targetOffset: targetOffset,
+          isRestrictScroll: isRestrictScroll,
           dataId: "".concat(dataId, "_suggestions"),
           size: boxSize,
           isPadding: false,

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

@@ -78,6 +78,8 @@ var GroupSelect_defaultProps = {
   needTick: true,
   needLocalSearch: true,
   isSearchClearOnClose: true,
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
   i18nKeys: {},
   iconOnHover: false,
   isLoading: false
@@ -103,6 +105,8 @@ var SelectWithAvatar_defaultProps = {
   dataSelectorId: 'selectWithAvatar',
   borderColor: 'default',
   isSearchClearOnClose: true,
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
   i18nKeys: {},
   needEffect: true,
   isLoading: false
@@ -117,5 +121,5 @@ var SelectWithIcon_defaultProps = (_SelectWithIcon_defau = {
   needListBorder: false,
   needSearch: false,
   boxSize: 'default'
-}, _defineProperty(_SelectWithIcon_defau, "needListBorder", false), _defineProperty(_SelectWithIcon_defau, "needCloseOnSelect", true), _defineProperty(_SelectWithIcon_defau, "borderColor", 'default'), _defineProperty(_SelectWithIcon_defau, "needTick", true), _defineProperty(_SelectWithIcon_defau, "searchBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "size", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxSize", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxVariant", 'default'), _defineProperty(_SelectWithIcon_defau, "dataId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dataSelectorId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dropBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "needIcon", true), _defineProperty(_SelectWithIcon_defau, "iconSize", '14'), _defineProperty(_SelectWithIcon_defau, "i18nKeys", {}), _defineProperty(_SelectWithIcon_defau, "isLoading", false), _SelectWithIcon_defau);
+}, _defineProperty(_SelectWithIcon_defau, "needListBorder", false), _defineProperty(_SelectWithIcon_defau, "needCloseOnSelect", true), _defineProperty(_SelectWithIcon_defau, "borderColor", 'default'), _defineProperty(_SelectWithIcon_defau, "needTick", true), _defineProperty(_SelectWithIcon_defau, "searchBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "size", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxSize", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxVariant", 'default'), _defineProperty(_SelectWithIcon_defau, "dataId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dataSelectorId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dropBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "needIcon", true), _defineProperty(_SelectWithIcon_defau, "iconSize", '14'), _defineProperty(_SelectWithIcon_defau, "i18nKeys", {}), _defineProperty(_SelectWithIcon_defau, "isAbsolutePositioningNeeded", true), _defineProperty(_SelectWithIcon_defau, "isRestrictScroll", false), _defineProperty(_SelectWithIcon_defau, "isLoading", false), _SelectWithIcon_defau);
 exports.SelectWithIcon_defaultProps = SelectWithIcon_defaultProps;

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

@@ -179,6 +179,10 @@ var GroupSelect_propTypes = {
   closePopupOnly: _propTypes["default"].func,
   position: _propTypes["default"].string,
   removeClose: _propTypes["default"].func,
+  isAbsolutePositioningNeeded: _propTypes["default"].bool,
+  isRestrictScroll: _propTypes["default"].bool,
+  positionsOffset: _propTypes["default"].object,
+  targetOffset: _propTypes["default"].object,
   i18nKeys: _propTypes["default"].shape({
     loadingText: _propTypes["default"].string,
     emptyText: _propTypes["default"].string,
@@ -306,6 +310,10 @@ var SelectWithIcon_propTypes = {
   searchBoxSize: _propTypes["default"].string,
   needResponsive: _propTypes["default"].bool,
   boxSize: _propTypes["default"].string,
-  emptyMessage: _propTypes["default"].string
+  emptyMessage: _propTypes["default"].string,
+  isAbsolutePositioningNeeded: _propTypes["default"].bool,
+  isRestrictScroll: _propTypes["default"].bool,
+  positionsOffset: _propTypes["default"].object,
+  targetOffset: _propTypes["default"].object
 };
 exports.SelectWithIcon_propTypes = SelectWithIcon_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 = 'pre-wrap';
+      } 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: {