@zohodesk/components 1.2.42 → 1.2.44

package/README.md

@@ -32,6 +32,25 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.2.44
+
+- **Tabs (v0&v1), AdvancedGroupMultiSelect (v1)**
+  - `isAbsolutePositioningNeeded` `isRestrictScroll` `positionsOffset` `targetOffset` props supported for fixed position.
+
+- **Tabs (v0&v1)**
+  - padding css fix
+
+- **DropDownSearch (v1)**
+  - Input not focus on mount issue fixed
+
+# 1.2.43
+
+- **AdvancedMultiSelect, MultiSelect, MultiSelectWithAvatar, GroupSelect, SelectWithIcon** - Fixed position support added.
+
+- **SelectWithAvatar, AdvancedGroupMultiSelect** - Fixed position support added and getTargetRef issue fixed.
+
+- **Tooltip** - Fixed white space attribute value from preWrap to pre-wrap.
+
 # 1.2.42
 
 - **Heading (v0&v1)** - 

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -852,6 +852,10 @@ class AdvancedGroupMultiSelect extends React.Component {
       dropBoxSize,
       position,
       getContainerRef,
+      isAbsolutePositioningNeeded,
+      positionsOffset,
+      targetOffset,
+      isRestrictScroll,
       emptyMessage,
       searchEmptyMessage,
       title,
@@ -870,7 +874,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       a11y,
       palette,
       needEffect,
-      autoComplete
+      autoComplete,
+      getTargetRef
     } = this.props;
     let {
       clearText = 'Clear all'
@@ -910,7 +915,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       align: "vertical",
       alignBox: "row",
       onClick: this.togglePopup,
-      className: customClass
+      className: customClass,
+      eleRef: getTargetRef
     }, children) : /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",
@@ -994,6 +1000,10 @@ class AdvancedGroupMultiSelect extends React.Component {
         needResponsive: needResponsive,
         isPadding: isPadding,
         isBoxPaddingNeed: !needSelectAll,
+        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+        positionsOffset: positionsOffset,
+        targetOffset: targetOffset,
+        isRestrictScroll: isRestrictScroll,
         htmlId: setAriaId,
         a11y: {
           role: 'listbox',

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

@@ -992,6 +992,10 @@ export class MultiSelectComponent extends React.Component {
       borderColor,
       disableAction,
       isBoxPaddingNeed,
+      isAbsolutePositioningNeeded,
+      positionsOffset,
+      targetOffset,
+      isRestrictScroll,
       palette,
       i18nKeys,
       getFooter,
@@ -1039,6 +1043,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/MultiSelect/MultiSelectWithAvatar.js

@@ -68,6 +68,10 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       selectAllText,
       getContainerRef,
       removeClose,
+      isAbsolutePositioningNeeded,
+      positionsOffset,
+      targetOffset,
+      isRestrictScroll,
       isAnimate,
       animationStyle,
       isDisabled,
@@ -124,6 +128,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/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,
@@ -142,6 +148,8 @@ export const MultiSelectWithAvatar_defaultProps = {
   palette: 'default',
   isBoxPaddingNeed: true,
   isSearchClearOnSelect: true,
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
   needEffect: true,
   isLoading: false,
   dataSelectorId: 'multiSelectWithAvatar',

package/es/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,
@@ -230,6 +234,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/Select/GroupSelect.js

@@ -576,6 +576,10 @@ export class GroupSelectComponent extends PureComponent {
       getContainerRef,
       isPopupReady,
       removeClose,
+      isAbsolutePositioningNeeded,
+      positionsOffset,
+      targetOffset,
+      isRestrictScroll,
       borderColor,
       needTick,
       children,
@@ -705,6 +709,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/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/Select/SelectWithIcon.js

@@ -323,6 +323,10 @@ class SelectWithIcon extends Component {
       isPopupReady,
       position,
       getContainerRef,
+      isAbsolutePositioningNeeded,
+      positionsOffset,
+      targetOffset,
+      isRestrictScroll,
       valueKey,
       idKey,
       needListBorder,
@@ -453,6 +457,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/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
@@ -117,5 +121,7 @@ export const SelectWithIcon_defaultProps = {
   iconSize: '14',
   i18nKeys: {},
   isLoading: false,
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
   customProps: {}
 };

package/es/Select/props/propTypes.js

@@ -90,8 +90,8 @@ export const Select_propTypes = {
   isAbsolutePositioningNeeded: PropTypes.bool,
   openPopupOnly: PropTypes.bool,
   ariaLabelledby: PropTypes.string,
-  positionsOffset: PropTypes.array,
-  targetOffset: PropTypes.array,
+  positionsOffset: PropTypes.object,
+  targetOffset: PropTypes.object,
   isRestrictScroll: PropTypes.bool,
   dropBoxPortalId: PropTypes.string
 };
@@ -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,
@@ -286,6 +290,10 @@ export const SelectWithIcon_propTypes = {
   needResponsive: PropTypes.bool,
   boxSize: PropTypes.string,
   emptyMessage: PropTypes.string,
+  isAbsolutePositioningNeeded: PropTypes.bool,
+  isRestrictScroll: PropTypes.bool,
+  positionsOffset: PropTypes.object,
+  targetOffset: PropTypes.object,
   customProps: PropTypes.shape({
     TextBoxProps: PropTypes.object,
     DropdownSearchTextBoxProps: PropTypes.object,

package/es/Tab/Tabs.js

@@ -512,7 +512,11 @@ class Tabs extends React.Component {
       dataId,
       placeHolderText,
       searchBoxSize,
-      removeClose
+      removeClose,
+      isAbsolutePositioningNeeded,
+      isRestrictScroll,
+      positionsOffset,
+      targetOffset
     } = this.props;
     const {
       searchValue
@@ -590,8 +594,12 @@ class Tabs extends React.Component {
         },
         boxPosition: position,
         getRef: getContainerRef,
-        isBoxPaddingNeed: true,
+        isBoxPaddingNeed: false,
         isArrow: false,
+        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+        isRestrictScroll: isRestrictScroll,
+        positionsOffset: positionsOffset,
+        targetOffset: targetOffset,
         ...DropBoxProps,
         isResponsivePadding: true,
         needFocusScope: true,
@@ -612,6 +620,8 @@ class Tabs extends React.Component {
           }
         },
         dataId: `${dataId}_search`,
+        autoComplete: false,
+        name: "search",
         ...TextBoxIconProps
       })) : null, /*#__PURE__*/React.createElement(Box, {
         flexible: true,

package/es/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/es/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/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/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/es/v1/DropDown/DropDownSearch.js

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

package/es/v1/MultiSelect/AdvancedGroupMultiSelect.js

@@ -853,6 +853,10 @@ class AdvancedGroupMultiSelect extends React.Component {
       dropBoxSize,
       position,
       getContainerRef,
+      isAbsolutePositioningNeeded,
+      positionsOffset,
+      targetOffset,
+      isRestrictScroll,
       emptyMessage,
       searchEmptyMessage,
       title,
@@ -871,7 +875,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       a11y,
       palette,
       needEffect,
-      autoComplete
+      autoComplete,
+      getTargetRef
     } = this.props;
     let {
       clearText = 'Clear all'
@@ -911,7 +916,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       align: "vertical",
       alignBox: "row",
       onClick: this.togglePopup,
-      className: customClass
+      className: customClass,
+      eleRef: getTargetRef
     }, children) : /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",
@@ -995,6 +1001,10 @@ class AdvancedGroupMultiSelect extends React.Component {
         needResponsive: needResponsive,
         isPadding: isPadding,
         isBoxPaddingNeed: !needSelectAll,
+        isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+        positionsOffset: positionsOffset,
+        targetOffset: targetOffset,
+        isRestrictScroll: isRestrictScroll,
         htmlId: setAriaId,
         a11y: {
           role: 'listbox',

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