@zohodesk/components 1.2.42 → 1.2.44

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/Tab/Tabs.js

@@ -435,7 +435,11 @@ const Tabs = props => {
       position,
       customProps,
       getCustomDropBoxHeaderPlaceHolder,
-      dataId
+      dataId,
+      isAbsolutePositioningNeeded,
+      isRestrictScroll,
+      positionsOffset,
+      targetOffset
     } = props;
     let {
       DropBoxProps = {},
@@ -510,8 +514,12 @@ const Tabs = props => {
         },
         boxPosition: position,
         getRef: getContainerRef,
-        isBoxPaddingNeed: true,
+        isBoxPaddingNeed: false,
         isArrow: false,
+        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+        isRestrictScroll: isRestrictScroll,
+        positionsOffset: positionsOffset,
+        targetOffset: targetOffset,
         ...DropBoxProps,
         isResponsivePadding: true,
         needFocusScope: true,
@@ -532,6 +540,8 @@ const Tabs = props => {
           }
         },
         dataId: `${dataId}_search`,
+        autoComplete: false,
+        name: "search",
         ...TextBoxIconProps
       })) : null, /*#__PURE__*/React.createElement(Box, {
         flexible: true,

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

@@ -33,7 +33,10 @@ export const Tabs_defaultProps = {
   dataSelectorId: 'tabs',
   searchBoxSize: 'small',
   searchErrorText: 'No results',
-  placeHolderText: 'Search'
+  placeHolderText: 'Search',
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
+  moreContainerClass: ''
 };
 export const TabWrapper_defaultProps = {
   hookToDisableInternalState: false,

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

@@ -94,7 +94,11 @@ export const Tabs_propTypes = {
   placeHolderText: PropTypes.string,
   searchBoxSize: PropTypes.string,
   searchErrorText: PropTypes.string,
-  closePopupOnly: PropTypes.func
+  closePopupOnly: PropTypes.func,
+  isAbsolutePositioningNeeded: PropTypes.bool,
+  isRestrictScroll: PropTypes.bool,
+  positionsOffset: PropTypes.object,
+  targetOffset: PropTypes.object
 };
 export const TabWrapper_propTypes = {
   align: PropTypes.oneOf(['vertical', 'horizontal']),

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

@@ -137,7 +137,7 @@
 }
 
 .search {
-  padding: 0 var(--zd_size20) 0 ;
+  padding: var(--zd_size6) var(--zd_size20) 0 ;
 }
 
 .emptyStateContainer {
@@ -163,5 +163,5 @@
 }
 
 .listWrapper {
-  padding-top: var(--zd_size10) ;
+  padding: var(--zd_size10) 0 ;
 }

package/es/v1/Tooltip/Tooltip.js

@@ -486,7 +486,7 @@ export default class Tooltip extends React.Component {
     let tooltipWhiteSpaceModification = dataTooltipWrap;
 
     if (dataTooltipWrap == 'pre') {
-      tooltipWhiteSpaceModification = 'preWrap';
+      tooltipWhiteSpaceModification = 'pre-wrap';
     } else if (dataTooltipWrap == 'nowrap') {
       tooltipWhiteSpaceModification = 'normal';
     }

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")

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/Tab/Tabs.js

@@ -578,7 +578,11 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
           dataId = _this$props9.dataId,
           placeHolderText = _this$props9.placeHolderText,
           searchBoxSize = _this$props9.searchBoxSize,
-          removeClose = _this$props9.removeClose;
+          removeClose = _this$props9.removeClose,
+          isAbsolutePositioningNeeded = _this$props9.isAbsolutePositioningNeeded,
+          isRestrictScroll = _this$props9.isRestrictScroll,
+          positionsOffset = _this$props9.positionsOffset,
+          targetOffset = _this$props9.targetOffset;
       var searchValue = this.state.searchValue;
       var _customProps$DropBoxP = customProps.DropBoxProps,
           DropBoxProps = _customProps$DropBoxP === void 0 ? {} : _customProps$DropBoxP,
@@ -652,8 +656,12 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
           },
           boxPosition: position,
           getRef: getContainerRef,
-          isBoxPaddingNeed: true,
-          isArrow: false
+          isBoxPaddingNeed: false,
+          isArrow: false,
+          isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+          isRestrictScroll: isRestrictScroll,
+          positionsOffset: positionsOffset,
+          targetOffset: targetOffset
         }, DropBoxProps, {
           isResponsivePadding: true,
           needFocusScope: true,
@@ -673,7 +681,9 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
               'data-a11y-autofocus': true
             }
           },
-          dataId: "".concat(dataId, "_search")
+          dataId: "".concat(dataId, "_search"),
+          autoComplete: false,
+          name: "search"
         }, TextBoxIconProps))) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           flexible: true,
           shrink: true,

package/lib/Tab/Tabs.module.css

@@ -137,7 +137,7 @@
 }
 
 .search {
-  padding: 0 var(--zd_size20) 0 ;
+  padding: var(--zd_size6) var(--zd_size20) 0 ;
 }
 
 .emptyStateContainer {
@@ -163,5 +163,5 @@
 }
 
 .listWrapper {
-  padding-top: var(--zd_size10) ;
+  padding: var(--zd_size10) 0 ;
 }

package/lib/Tab/props/defaultProps.js

@@ -42,7 +42,10 @@ var Tabs_defaultProps = {
   dataSelectorId: 'tabs',
   searchBoxSize: 'small',
   searchErrorText: 'No results',
-  placeHolderText: 'Search'
+  placeHolderText: 'Search',
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
+  moreContainerClass: ''
 };
 exports.Tabs_defaultProps = Tabs_defaultProps;
 var TabWrapper_defaultProps = {

package/lib/Tab/props/propTypes.js

@@ -107,7 +107,11 @@ var Tabs_propTypes = {
   placeHolderText: _propTypes["default"].string,
   searchBoxSize: _propTypes["default"].string,
   searchErrorText: _propTypes["default"].string,
-  closePopupOnly: _propTypes["default"].func
+  closePopupOnly: _propTypes["default"].func,
+  isAbsolutePositioningNeeded: _propTypes["default"].bool,
+  isRestrictScroll: _propTypes["default"].bool,
+  positionsOffset: _propTypes["default"].object,
+  targetOffset: _propTypes["default"].object
 };
 exports.Tabs_propTypes = Tabs_propTypes;
 var TabWrapper_propTypes = {

package/lib/Tooltip/Tooltip.js

@@ -551,7 +551,7 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
       var tooltipWhiteSpaceModification = dataTooltipWrap;
 
       if (dataTooltipWrap == 'pre') {
-        tooltipWhiteSpaceModification = 'preWrap';
+        tooltipWhiteSpaceModification = 'pre-wrap';
       } else if (dataTooltipWrap == 'nowrap') {
         tooltipWhiteSpaceModification = 'normal';
       }

package/lib/v1/DropDown/DropDownSearch.js

@@ -44,7 +44,7 @@ function DropDownSearch(props) {
   var inputRef = (0, _react.useRef)(null); // eslint-disable-next-line func-call-spacing
 
   (0, _react.useEffect)(function () {
-    inputRef.current && input.current.focus({
+    inputRef.current && inputRef.current.focus({
       preventScroll: true
     });
   }, []);

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",
@@ -1081,6 +1087,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/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