@zohodesk/components 1.2.41 → 1.2.43

package/es/v1/MultiSelect/AdvancedMultiSelect.js

@@ -368,7 +368,11 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       disabledOptions,
       isLoading,
       dataSelectorId,
-      customClass
+      customClass,
+      isAbsolutePositioningNeeded,
+      positionsOffset,
+      targetOffset,
+      isRestrictScroll
     } = this.props;
     let {
       SuggestionsProps = {},
@@ -508,6 +512,10 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
           ariaMultiselectable: true
         },
         dataId: `${dataIdMultiSelectComp}_dropbox`,
+        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+        positionsOffset: positionsOffset,
+        targetOffset: targetOffset,
+        isRestrictScroll: isRestrictScroll,
         ...DropBoxProps,
         alignBox: "row",
         isResponsivePadding: getFooter ? false : true

package/es/v1/MultiSelect/MultiSelect.js

@@ -985,6 +985,10 @@ export class MultiSelectComponent extends React.Component {
       borderColor,
       disableAction,
       isBoxPaddingNeed,
+      isAbsolutePositioningNeeded,
+      positionsOffset,
+      targetOffset,
+      isRestrictScroll,
       palette,
       i18nKeys,
       getFooter,
@@ -1032,6 +1036,10 @@ export class MultiSelectComponent extends React.Component {
       needResponsive: needResponsive,
       isPadding: false,
       isBoxPaddingNeed: isBoxPaddingNeed,
+      isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+      positionsOffset: positionsOffset,
+      targetOffset: targetOffset,
+      isRestrictScroll: isRestrictScroll,
       palette: palette,
       htmlId: setAriaId,
       a11y: {

package/es/v1/MultiSelect/MultiSelectWithAvatar.js

@@ -71,6 +71,10 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       selectAllText,
       getContainerRef,
       removeClose,
+      isAbsolutePositioningNeeded,
+      positionsOffset,
+      targetOffset,
+      isRestrictScroll,
       isAnimate,
       animationStyle,
       isDisabled,
@@ -127,6 +131,10 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       needResponsive: needResponsive,
       isPadding: false,
       isBoxPaddingNeed: isBoxPaddingNeed,
+      isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+      positionsOffset: positionsOffset,
+      targetOffset: targetOffset,
+      isRestrictScroll: isRestrictScroll,
       palette: palette,
       htmlId: setAriaId,
       a11y: {

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

@@ -32,6 +32,8 @@ export const AdvancedGroupMultiSelect_defaultProps = {
   i18nKeys: {},
   a11y: {},
   isSearchClearOnSelect: true,
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
   needEffect: true,
   palette: 'default',
   isLoading: false,
@@ -67,7 +69,9 @@ export const AdvancedMultiSelect_defaultProps = {
   needEffect: true,
   isLoading: false,
   dataSelectorId: 'advancedMultiSelect',
-  customClass: {}
+  customClass: {},
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false
 };
 export const EmptyState_defaultProps = {
   dataId: 'empty',
@@ -104,6 +108,8 @@ export const MultiSelect_defaultProps = {
   textBoxClass: '',
   palette: 'default',
   isSearchClearOnSelect: true,
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
   needEffect: true,
   boxSize: 'default',
   isLoading: false,
@@ -141,6 +147,8 @@ export const MultiSelectWithAvatar_defaultProps = {
   palette: 'default',
   isBoxPaddingNeed: true,
   isSearchClearOnSelect: true,
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
   needEffect: true,
   isLoading: false,
   dataSelectorId: 'multiSelectWithAvatar',

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

@@ -98,6 +98,10 @@ export const MultiSelect_propTypes = {
   getFooter: PropTypes.func,
   needEffect: PropTypes.bool,
   boxSize: PropTypes.string,
+  isAbsolutePositioningNeeded: PropTypes.bool,
+  isRestrictScroll: PropTypes.bool,
+  positionsOffset: PropTypes.object,
+  targetOffset: PropTypes.object,
   isLoading: PropTypes.bool,
   dataSelectorId: PropTypes.string,
   keepSelectedOptions: PropTypes.bool,
@@ -227,6 +231,10 @@ export const AdvancedGroupMultiSelect_propTypes = {
   textField: PropTypes.string,
   getTargetRef: PropTypes.func,
   togglePopup: PropTypes.func,
+  isAbsolutePositioningNeeded: PropTypes.bool,
+  isRestrictScroll: PropTypes.bool,
+  positionsOffset: PropTypes.object,
+  targetOffset: PropTypes.object,
   needLocalSearch: PropTypes.bool,
   isNextOptions: PropTypes.bool,
   getNextOptions: PropTypes.func,

package/es/v1/Select/GroupSelect.js

@@ -578,6 +578,10 @@ export class GroupSelectComponent extends PureComponent {
       getContainerRef,
       isPopupReady,
       removeClose,
+      isAbsolutePositioningNeeded,
+      positionsOffset,
+      targetOffset,
+      isRestrictScroll,
       borderColor,
       needTick,
       children,
@@ -707,6 +711,10 @@ export class GroupSelectComponent extends PureComponent {
         onClick: removeClose,
         needResponsive: needResponsive,
         isPadding: false,
+        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+        positionsOffset: positionsOffset,
+        targetOffset: targetOffset,
+        isRestrictScroll: isRestrictScroll,
         isResponsivePadding: getFooter ? false : true,
         alignBox: "row",
         dataId: `${dataId}_suggestionBox`

package/es/v1/Select/SelectWithAvatar.js

@@ -133,6 +133,10 @@ class SelectWithAvatarComponent extends SelectComponent {
       isPopupOpen,
       removeClose,
       isPopupReady,
+      isAbsolutePositioningNeeded,
+      positionsOffset,
+      targetOffset,
+      isRestrictScroll,
       animationStyle,
       textBoxSize,
       textBoxVariant,
@@ -158,7 +162,8 @@ class SelectWithAvatarComponent extends SelectComponent {
       htmlId,
       needEffect,
       isLoading,
-      dataSelectorId
+      dataSelectorId,
+      getTargetRef
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -190,7 +195,7 @@ class SelectWithAvatarComponent extends SelectComponent {
       align: "vertical",
       alignBox: "row",
       className: `${style.container} ${style[size]} ${style[`borderColor_${borderColor}`]} ${isActive && needBorder ? style.active : ''} ${textBoxClass ? textBoxClass : ''} ${needBorder ? style.hasBorder : ''}`,
-      eleRef: this.getTargetRef,
+      eleRef: getTargetRef,
       onClick: !isDisabled && this.togglePopup
     }, selectedId ? /*#__PURE__*/React.createElement(Box, {
       className: style.tag,
@@ -256,6 +261,10 @@ class SelectWithAvatarComponent extends SelectComponent {
         isArrow: false,
         onClick: removeClose,
         needResponsive: needResponsive,
+        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+        positionsOffset: positionsOffset,
+        targetOffset: targetOffset,
+        isRestrictScroll: isRestrictScroll,
         isPadding: false,
         isResponsivePadding: true,
         alignBox: "row",

package/es/v1/Select/SelectWithIcon.js

@@ -325,6 +325,10 @@ class SelectWithIcon extends Component {
       isPopupReady,
       position,
       getContainerRef,
+      isAbsolutePositioningNeeded,
+      positionsOffset,
+      targetOffset,
+      isRestrictScroll,
       valueKey,
       idKey,
       needListBorder,
@@ -438,6 +442,10 @@ class SelectWithIcon extends Component {
         onClick: removeClose,
         getRef: getContainerRef,
         needResponsive: needResponsive,
+        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+        positionsOffset: positionsOffset,
+        targetOffset: targetOffset,
+        isRestrictScroll: isRestrictScroll,
         dataId: `${dataId}_suggestions`,
         size: boxSize,
         isPadding: false,

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

@@ -65,6 +65,8 @@ export const GroupSelect_defaultProps = {
   needTick: true,
   needLocalSearch: true,
   isSearchClearOnClose: true,
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
   i18nKeys: {},
   iconOnHover: false,
   isLoading: false
@@ -89,6 +91,8 @@ export const SelectWithAvatar_defaultProps = {
   dataSelectorId: 'selectWithAvatar',
   borderColor: 'default',
   isSearchClearOnClose: true,
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
   i18nKeys: {},
   needEffect: true,
   isLoading: false
@@ -116,5 +120,7 @@ export const SelectWithIcon_defaultProps = {
   needIcon: true,
   iconSize: '14',
   i18nKeys: {},
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
   isLoading: false
 };

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

@@ -162,6 +162,10 @@ export const GroupSelect_propTypes = {
   closePopupOnly: PropTypes.func,
   position: PropTypes.string,
   removeClose: PropTypes.func,
+  isAbsolutePositioningNeeded: PropTypes.bool,
+  isRestrictScroll: PropTypes.bool,
+  positionsOffset: PropTypes.object,
+  targetOffset: PropTypes.object,
   i18nKeys: PropTypes.shape({
     loadingText: PropTypes.string,
     emptyText: PropTypes.string,
@@ -285,5 +289,9 @@ export const SelectWithIcon_propTypes = {
   searchBoxSize: PropTypes.string,
   needResponsive: PropTypes.bool,
   boxSize: PropTypes.string,
-  emptyMessage: PropTypes.string
+  emptyMessage: PropTypes.string,
+  isAbsolutePositioningNeeded: PropTypes.bool,
+  isRestrictScroll: PropTypes.bool,
+  positionsOffset: PropTypes.object,
+  targetOffset: PropTypes.object
 };

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 = 'pre-wrap';
+    } 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/MultiSelect/AdvancedGroupMultiSelect.js

@@ -942,6 +942,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,
@@ -960,7 +964,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;
@@ -999,7 +1004,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",
@@ -1080,6 +1086,10 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
           needResponsive: needResponsive,
           isPadding: isPadding,
           isBoxPaddingNeed: !needSelectAll,
+          isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+          positionsOffset: positionsOffset,
+          targetOffset: targetOffset,
+          isRestrictScroll: isRestrictScroll,
           htmlId: setAriaId,
           a11y: {
             role: 'listbox',

package/lib/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/MultiSelect/MultiSelect.js

@@ -1070,6 +1070,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,
@@ -1115,6 +1119,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/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/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,
@@ -155,6 +161,8 @@ var MultiSelectWithAvatar_defaultProps = {
   palette: 'default',
   isBoxPaddingNeed: true,
   isSearchClearOnSelect: true,
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
   needEffect: true,
   isLoading: false,
   dataSelectorId: 'multiSelectWithAvatar',

package/lib/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,
@@ -254,6 +258,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/Select/GroupSelect.js

@@ -652,6 +652,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,
@@ -777,6 +781,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")