@zohodesk/components 1.6.2 → 1.6.4

package/lib/ListItem/props/defaultProps.js

@@ -37,7 +37,8 @@ var ListItemDefaultProps = {
   customClass: {},
   customProps: {},
   dataSelectorId: 'listItem',
-  needMultiLineText: false
+  needMultiLineText: false,
+  lhsAlignContent: 'start'
 };
 exports.ListItemDefaultProps = ListItemDefaultProps;
 var ListItemWithAvatarDefaultProps = {

package/lib/ListItem/props/propTypes.js

@@ -78,14 +78,16 @@ var ListItem_Props = {
   customClass: _propTypes["default"].shape({
     customListItem: _propTypes["default"].string,
     customTickIcon: _propTypes["default"].string,
-    customValueRightPlaceholder: _propTypes["default"].string
+    customValueRightPlaceholder: _propTypes["default"].string,
+    customTitleBox: _propTypes["default"].string
   }),
   customProps: _propTypes["default"].shape({
     ListItemProps: _propTypes["default"].object
   }),
   secondaryValue: _propTypes["default"].string,
   renderBeforeChildren: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
-  renderValueRightPlaceholderNode: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func])
+  renderValueRightPlaceholderNode: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
+  lhsAlignContent: _propTypes["default"].oneOf(['start', 'center', 'end'])
 };
 exports.ListItem_Props = ListItem_Props;
 var ListItemWithAvatar_Props = (_ListItemWithAvatar_P = {

package/lib/MultiSelect/AdvancedGroupMultiSelect.js

@@ -41,11 +41,13 @@ var _ResponsiveDropBox = _interopRequireDefault(require("../ResponsiveDropBox/Re
 
 var _CustomResponsive = require("../Responsive/CustomResponsive");
 
+var _Common = require("./../utils/Common");
+
 var _icons = require("@zohodesk/icons");
 
 var _MultiSelectModule = _interopRequireDefault(require("./MultiSelect.module.css"));
 
-var _Common = require("../utils/Common.js");
+var _Common2 = require("../utils/Common.js");
 
 var _dropDownUtils = require("../utils/dropDownUtils");
 
@@ -55,6 +57,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -150,7 +154,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
     _this.suggestionItemRef = _this.suggestionItemRef.bind(_assertThisInitialized(_this));
     _this.searchInputRef = _this.searchInputRef.bind(_assertThisInitialized(_this));
     _this.handleScroll = _this.handleScroll.bind(_assertThisInitialized(_this));
-    _this.handleScrollFuncCall = (0, _Common.debounce)(_this.handleScrollFuncCall.bind(_assertThisInitialized(_this)), 500);
+    _this.handleScrollFuncCall = (0, _Common2.debounce)(_this.handleScrollFuncCall.bind(_assertThisInitialized(_this)), 500);
     _this.handleInputCick = _this.handleInputCick.bind(_assertThisInitialized(_this));
     _this.togglePopup = _this.togglePopup.bind(_assertThisInitialized(_this));
     _this.handleSelectedOptionIdChange = _this.handleSelectedOptionIdChange.bind(_assertThisInitialized(_this));
@@ -163,7 +167,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
     _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_this));
     _this.handleFetchOptions = _this.handleFetchOptions.bind(_assertThisInitialized(_this));
     _this.handleSearch = _this.handleSearch.bind(_assertThisInitialized(_this));
-    _this.handleSearchOptions = (0, _Common.debounce)(_this.handleSearchOptions.bind(_assertThisInitialized(_this)), searchDebounceTime);
+    _this.handleSearchOptions = (0, _Common2.debounce)(_this.handleSearchOptions.bind(_assertThisInitialized(_this)), searchDebounceTime);
     _this.handleSelectAll = _this.handleSelectAll.bind(_assertThisInitialized(_this));
     _this.handleDeselectAll = _this.handleDeselectAll.bind(_assertThisInitialized(_this));
     _this.handleActive = _this.handleActive.bind(_assertThisInitialized(_this));
@@ -307,7 +311,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
       var needLocalSearch = this.props.needLocalSearch;
 
       if (searchStr && searchStr.trim().length) {
-        searchStr = (0, _Common.getSearchString)(searchStr);
+        searchStr = (0, _Common2.getSearchString)(searchStr);
 
         var _this$getFilterSugges = this.getFilterSuggestions({
           revampedGroups: revampedGroups,
@@ -414,7 +418,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handleRemoveOption",
     value: function handleRemoveOption(options) {
-      var newOptions = !(0, _Common.getIsEmptyValue)(options) && !Array.isArray(options) ? [options] : options;
+      var newOptions = !(0, _Common2.getIsEmptyValue)(options) && !Array.isArray(options) ? [options] : options;
       var isReadOnly = this.props.isReadOnly;
       var selectedOptionIds = this.state.selectedOptionIds;
       var _this$state4 = this.state,
@@ -528,7 +532,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
       } else if (keyCode === 13 && selectedOptions.length < limit) {
         //enter key
         var id = suggestions[hoverIndex] || {};
-        isPopupOpen && !(0, _Common.getIsEmptyValue)(id) && this.handleSelectOption(id, null, null, e);
+        isPopupOpen && !(0, _Common2.getIsEmptyValue)(id) && this.handleSelectOption(id, null, null, e);
         !isPopupOpen && isPopupOpenOnEnter && this.togglePopup(e);
       } else if (selectedOptions.length && keyCode === 8 && !searchStr.length) {
         //backspace key
@@ -551,7 +555,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
         var newShiftKeyPressHighLighted = shiftKeyPressHighLighted ? shiftKeyPressHighLighted : shiftKeyPressHighLighted + 1;
         var newHighLightedSelectOption = lastHighLightedSelectOptionIndex !== null ? selectedOptions[lastHighLightedSelectOptionIndex + newShiftKeyPressHighLighted] : selectedOptions[0];
 
-        if (!(0, _Common.getIsEmptyValue)(newHighLightedSelectOption)) {
+        if (!(0, _Common2.getIsEmptyValue)(newHighLightedSelectOption)) {
           var newLastHighLightedSelectOption = lastHighLightedSelectOption ? lastHighLightedSelectOption : selectedOptions[0];
           highLightedSelectOptions = !shiftKeyPressHighLighted ? [newLastHighLightedSelectOption] : highLightedSelectOptions;
           var isRemove = highLightedSelectOptions.indexOf(newHighLightedSelectOption) >= 0 && newHighLightedSelectOption !== lastHighLightedSelectOption ? true : false;
@@ -572,7 +576,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
 
         var _newHighLightedSelectOption = selectedOptions[_lastHighLightedSelectOptionIndex + _newShiftKeyPressHighLighted - 1];
 
-        if (!(0, _Common.getIsEmptyValue)(_newHighLightedSelectOption)) {
+        if (!(0, _Common2.getIsEmptyValue)(_newHighLightedSelectOption)) {
           var _newLastHighLightedSelectOption = lastHighLightedSelectOption ? lastHighLightedSelectOption : selectedOptions.slice(-1)[0];
 
           highLightedSelectOptions = !shiftKeyPressHighLighted ? [_newLastHighLightedSelectOption] : highLightedSelectOptions;
@@ -603,7 +607,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
           var _newLastHighLightedSelectOption2 = selectedOptions[newLastHighLightedSelectOptionIndex];
           var isEmptyHighlighted = isRightArrow && highLightedSelectOptions.length === 1 && selectedOptions.slice(-1)[0] === _lastHighLightedSelectOption ? true : false;
 
-          if (!(0, _Common.getIsEmptyValue)(_newLastHighLightedSelectOption2)) {
+          if (!(0, _Common2.getIsEmptyValue)(_newLastHighLightedSelectOption2)) {
             this.setState({
               lastHighLightedSelectOption: isEmptyHighlighted ? '' : _newLastHighLightedSelectOption2,
               highLightedSelectOptions: isEmptyHighlighted ? [] : [_newLastHighLightedSelectOption2],
@@ -690,8 +694,8 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
       !isPopupOpen && e && this.togglePopup(e);
       var _this$state$searchStr = this.state.searchStr,
           searchStr = _this$state$searchStr === void 0 ? '' : _this$state$searchStr;
-      var searchStrRegex = (0, _Common.getSearchString)(searchStr);
-      var valueStrRegex = (0, _Common.getSearchString)(value);
+      var searchStrRegex = (0, _Common2.getSearchString)(searchStr);
+      var valueStrRegex = (0, _Common2.getSearchString)(value);
       var isSearch = searchStrRegex !== valueStrRegex ? true : false;
       this.setState({
         searchStr: value
@@ -897,9 +901,9 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
         });
       }
 
-      var hoverId = (0, _Common.getIsEmptyValue)(newOptionIds[hoverIndex]) ? '' : newOptionIds[hoverIndex];
+      var hoverId = (0, _Common2.getIsEmptyValue)(newOptionIds[hoverIndex]) ? '' : newOptionIds[hoverIndex];
       var selSuggestion = this["suggestion_".concat(hoverId)];
-      isPopupOpen && (0, _Common.scrollTo)(this.suggestionContainer, selSuggestion); //When suggestions length less than 5, getNextOptions function call
+      isPopupOpen && (0, _Common2.scrollTo)(this.suggestionContainer, selSuggestion); //When suggestions length less than 5, getNextOptions function call
 
       var _this$props8 = this.props,
           isNextOptions = _this$props8.isNextOptions,
@@ -980,7 +984,10 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
           autoComplete = _this$props9.autoComplete,
           getTargetRef = _this$props9.getTargetRef,
           isFocus = _this$props9.isFocus,
-          limit = _this$props9.limit;
+          limit = _this$props9.limit,
+          customProps = _this$props9.customProps;
+      var _customProps$Suggesti = customProps.SuggestionsProps,
+          SuggestionsProps = _customProps$Suggesti === void 0 ? _Common.DUMMY_OBJECT : _customProps$Suggesti;
       var _i18nKeys = i18nKeys,
           _i18nKeys$clearText = _i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? _constants.MULTISELECT_I18N_KEYS.clearText : _i18nKeys$clearText,
@@ -1146,7 +1153,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
             a11y: {
               role: 'heading'
             }
-          })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+          })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({}, SuggestionsProps, {
             suggestions: suggestions,
             selectedOptions: selectedOptionIds,
             getRef: _this5.suggestionItemRef,
@@ -1161,7 +1168,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
             limit: limit,
             limitReachedMessage: limitReachedMessage,
             dataId: "".concat(dataId, "_Options")
-          }));
+          })));
         }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           options: revampedGroups,
           searchString: searchStr,

package/lib/MultiSelect/MultiSelect.js

@@ -1172,9 +1172,9 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           isLoading = _this$props15.isLoading,
           selectAllText = _this$props15.selectAllText,
           needSelectAll = _this$props15.needSelectAll,
-          customProps = _this$props15.customProps,
           isVirtualizerEnabled = _this$props15.isVirtualizerEnabled,
-          limit = _this$props15.limit;
+          limit = _this$props15.limit,
+          customProps = _this$props15.customProps;
       var _this$state9 = this.state,
           selectedOptions = _this$state9.selectedOptions,
           searchStr = _this$state9.searchStr,

package/lib/MultiSelect/Suggestions.js

@@ -247,15 +247,19 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
           htmlId = _this$props2.htmlId,
           a11y = _this$props2.a11y,
           getVirtualizerPublicMethods = _this$props2.getVirtualizerPublicMethods,
-          setVirtualizerContainerRefFunction = _this$props2.setVirtualizerContainerRefFunction;
+          setVirtualizerContainerRefFunction = _this$props2.setVirtualizerContainerRefFunction,
+          customClass = _this$props2.customClass;
       var ariaParentRole = a11y.ariaParentRole,
           ariaMultiselectable = a11y.ariaMultiselectable;
+      var _customClass$containe = customClass.containerClass,
+          containerClass = _customClass$containe === void 0 ? '' : _customClass$containe;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         isCover: false,
         role: ariaParentRole,
         id: htmlId,
         tabindex: "0",
-        "aria-multiselectable": ariaMultiselectable
+        "aria-multiselectable": ariaMultiselectable,
+        className: containerClass
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         dataId: "".concat(dataId),
         className: className ? className : ''

package/lib/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap

@@ -217,13 +217,13 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
                         data-test-id="boxComponent"
                       >
                         <div
-                          class="titleBox shrinkOff"
+                          class="titleBox   shrinkOff"
                           data-id="boxComponent"
                           data-selector-id="box"
                           data-test-id="boxComponent"
                         >
                           <div
-                            class="value basisAuto shrinkOn"
+                            class="selfAlign_center value basisAuto shrinkOn"
                             data-id="boxComponent"
                             data-selector-id="box"
                             data-test-id="boxComponent"
@@ -253,13 +253,13 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
                         data-test-id="boxComponent"
                       >
                         <div
-                          class="titleBox shrinkOff"
+                          class="titleBox   shrinkOff"
                           data-id="boxComponent"
                           data-selector-id="box"
                           data-test-id="boxComponent"
                         >
                           <div
-                            class="value basisAuto shrinkOn"
+                            class="selfAlign_center value basisAuto shrinkOn"
                             data-id="boxComponent"
                             data-selector-id="box"
                             data-test-id="boxComponent"
@@ -289,13 +289,13 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
                         data-test-id="boxComponent"
                       >
                         <div
-                          class="titleBox shrinkOff"
+                          class="titleBox   shrinkOff"
                           data-id="boxComponent"
                           data-selector-id="box"
                           data-test-id="boxComponent"
                         >
                           <div
-                            class="value basisAuto shrinkOn"
+                            class="selfAlign_center value basisAuto shrinkOn"
                             data-id="boxComponent"
                             data-selector-id="box"
                             data-test-id="boxComponent"
@@ -463,13 +463,13 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
                         data-test-id="boxComponent"
                       >
                         <div
-                          class="titleBox shrinkOff"
+                          class="titleBox   shrinkOff"
                           data-id="boxComponent"
                           data-selector-id="box"
                           data-test-id="boxComponent"
                         >
                           <div
-                            class="value basisAuto shrinkOn"
+                            class="selfAlign_center value basisAuto shrinkOn"
                             data-id="boxComponent"
                             data-selector-id="box"
                             data-test-id="boxComponent"
@@ -499,13 +499,13 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
                         data-test-id="boxComponent"
                       >
                         <div
-                          class="titleBox shrinkOff"
+                          class="titleBox   shrinkOff"
                           data-id="boxComponent"
                           data-selector-id="box"
                           data-test-id="boxComponent"
                         >
                           <div
-                            class="value basisAuto shrinkOn"
+                            class="selfAlign_center value basisAuto shrinkOn"
                             data-id="boxComponent"
                             data-selector-id="box"
                             data-test-id="boxComponent"

package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap

@@ -12,47 +12,53 @@ exports[`MultiSelectHeader rendering the basic value 1`] = `
     tabindex="0"
   >
     <div
-      aria-hidden="true"
-      class="iconBox lhsBox lhsJustifyContent_center shrinkOff selfStart"
-      data-id="MultiSelectHeader_selectAll_Icon"
+      class="contentWrapper  shrinkOff"
+      data-id="boxComponent"
       data-selector-id="box"
-      data-test-id="MultiSelectHeader_selectAll_Icon"
+      data-test-id="boxComponent"
     >
       <div
-        class="lhsBox_medium shrinkOff selfStart"
-        data-id="boxComponent"
-        data-selector-id="box"
-        data-test-id="boxComponent"
+        aria-hidden="true"
+        class="iconBox lhsJustifyContent_center"
+        data-id="MultiSelectHeader_selectAll_Icon"
+        data-test-id="MultiSelectHeader_selectAll_Icon"
       >
-        <i
-          aria-hidden="true"
-          class="zd_font_icons basic icon-androidd    "
-          data-id="fontIcon"
-          data-selector-id="fontIcon"
-          data-test-id="fontIcon"
-          style="--zd-iconfont-size: var(--zd_font_size15);"
-        />
+        <div
+          class="iconWrapper shrinkOff selfStart"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <i
+            aria-hidden="true"
+            class="zd_font_icons basic icon-androidd    "
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+            style="--zd-iconfont-size: var(--zd_font_size15);"
+          />
+        </div>
       </div>
-    </div>
-    <div
-      class="leftBox grow basis shrinkOff"
-      data-id="boxComponent"
-      data-selector-id="box"
-      data-test-id="boxComponent"
-    >
       <div
-        class="titleBox shrinkOff"
+        class="leftBox selfAlign_center grow basis shrinkOff"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <div
-          class="value basisAuto shrinkOn"
-          data-id="MultiSelectHeader_selectAll_Text"
+          class="titleBox shrinkOff"
+          data-id="boxComponent"
           data-selector-id="box"
-          data-test-id="MultiSelectHeader_selectAll_Text"
+          data-test-id="boxComponent"
         >
-          List
+          <div
+            class="value basisAuto shrinkOn"
+            data-id="MultiSelectHeader_selectAll_Text"
+            data-selector-id="box"
+            data-test-id="MultiSelectHeader_selectAll_Text"
+          >
+            List
+          </div>
         </div>
       </div>
     </div>

package/lib/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap

@@ -35,7 +35,7 @@ exports[`Suggestions Should render with renderBeforeChildren 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="titleBox shrinkOff"
+            class="titleBox   shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
@@ -51,7 +51,7 @@ exports[`Suggestions Should render with renderBeforeChildren 1`] = `
               </span>
             </div>
             <div
-              class="value basisAuto shrinkOn"
+              class="selfAlign_center value basisAuto shrinkOn"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -122,13 +122,13 @@ exports[`Suggestions rendering with limit props 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="titleBox shrinkOff"
+            class="titleBox   shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="value basisAuto shrinkOn"
+              class="selfAlign_center value basisAuto shrinkOn"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -160,13 +160,13 @@ exports[`Suggestions rendering with limit props 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="titleBox shrinkOff"
+            class="titleBox   shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="value basisAuto shrinkOn"
+              class="selfAlign_center value basisAuto shrinkOn"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -197,13 +197,13 @@ exports[`Suggestions rendering with limit props 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="titleBox shrinkOff"
+            class="titleBox   shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="value basisAuto shrinkOn"
+              class="selfAlign_center value basisAuto shrinkOn"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -232,13 +232,13 @@ exports[`Suggestions rendering with limit props 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="titleBox shrinkOff"
+            class="titleBox   shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="value basisAuto shrinkOn"
+              class="selfAlign_center value basisAuto shrinkOn"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -267,13 +267,13 @@ exports[`Suggestions rendering with limit props 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="titleBox shrinkOff"
+            class="titleBox   shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="value basisAuto shrinkOn"
+              class="selfAlign_center value basisAuto shrinkOn"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -302,13 +302,13 @@ exports[`Suggestions rendering with limit props 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="titleBox shrinkOff"
+            class="titleBox   shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="value basisAuto shrinkOn"
+              class="selfAlign_center value basisAuto shrinkOn"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -337,13 +337,13 @@ exports[`Suggestions rendering with limit props 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="titleBox shrinkOff"
+            class="titleBox   shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="value basisAuto shrinkOn"
+              class="selfAlign_center value basisAuto shrinkOn"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -372,13 +372,13 @@ exports[`Suggestions rendering with limit props 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="titleBox shrinkOff"
+            class="titleBox   shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="value basisAuto shrinkOn"
+              class="selfAlign_center value basisAuto shrinkOn"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -407,13 +407,13 @@ exports[`Suggestions rendering with limit props 1`] = `
           data-test-id="boxComponent"
         >
           <div
-            class="titleBox shrinkOff"
+            class="titleBox   shrinkOff"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <div
-              class="value basisAuto shrinkOn"
+              class="selfAlign_center value basisAuto shrinkOn"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"

package/lib/MultiSelect/props/defaultProps.js

@@ -46,6 +46,7 @@ var AdvancedGroupMultiSelect_defaultProps = {
   palette: 'default',
   isLoading: false,
   dataSelectorId: 'advancedGroupMultiSelect',
+  customProps: {},
   allowValueFallback: true
 };
 exports.AdvancedGroupMultiSelect_defaultProps = AdvancedGroupMultiSelect_defaultProps;
@@ -184,6 +185,7 @@ exports.SelectedOptions_defaultProps = SelectedOptions_defaultProps;
 var Suggestions_defaultProps = {
   a11y: {},
   isVirtualizerEnabled: false,
+  customClass: {},
   needMultiLineText: false
 };
 exports.Suggestions_defaultProps = Suggestions_defaultProps;

package/lib/MultiSelect/props/propTypes.js

@@ -135,7 +135,8 @@ var MultiSelect_propTypes = {
   setAriaId: _propTypes["default"].string,
   ariaErrorId: _propTypes["default"].string,
   customProps: _propTypes["default"].shape({
-    TextBoxIconProps: _propTypes["default"].object
+    TextBoxIconProps: _propTypes["default"].object,
+    SuggestionsProps: _propTypes["default"].object
   }),
   isFocus: _propTypes["default"].bool,
   allowValueFallback: _propTypes["default"].bool,
@@ -191,7 +192,8 @@ var SelectedOptions_propTypes = {
   limit: _propTypes["default"].number
 };
 exports.SelectedOptions_propTypes = SelectedOptions_propTypes;
-var Suggestions_propTypes = {
+
+var Suggestions_propTypes = _defineProperty({
   a11y: _propTypes["default"].shape({
     ariaParentRole: _propTypes["default"].string,
     ariaMultiselectable: _propTypes["default"].bool
@@ -225,8 +227,12 @@ var Suggestions_propTypes = {
   })),
   renderBeforeChildren: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
   limit: _propTypes["default"].number,
-  limitReachedMessage: _propTypes["default"].string
-};
+  limitReachedMessage: _propTypes["default"].string,
+  customClass: _propTypes["default"].shape({
+    containerClass: _propTypes["default"].string
+  })
+}, "needMultiLineText", _propTypes["default"].bool);
+
 exports.Suggestions_propTypes = Suggestions_propTypes;
 var AdvancedGroupMultiSelect_propTypes = (_AdvancedGroupMultiSe = {
   animationStyle: _propTypes["default"].string,
@@ -298,7 +304,9 @@ var AdvancedGroupMultiSelect_propTypes = (_AdvancedGroupMultiSe = {
   needToCloseOnSelect: _propTypes["default"].func,
   searchStr: _propTypes["default"].string,
   children: _propTypes["default"].node
-}, _defineProperty(_AdvancedGroupMultiSe, "dataSelectorId", _propTypes["default"].string), _defineProperty(_AdvancedGroupMultiSe, "isFocus", _propTypes["default"].bool), _defineProperty(_AdvancedGroupMultiSe, "allowValueFallback", _propTypes["default"].bool), _defineProperty(_AdvancedGroupMultiSe, "limit", _propTypes["default"].number), _AdvancedGroupMultiSe);
+}, _defineProperty(_AdvancedGroupMultiSe, "dataSelectorId", _propTypes["default"].string), _defineProperty(_AdvancedGroupMultiSe, "isFocus", _propTypes["default"].bool), _defineProperty(_AdvancedGroupMultiSe, "allowValueFallback", _propTypes["default"].bool), _defineProperty(_AdvancedGroupMultiSe, "limit", _propTypes["default"].number), _defineProperty(_AdvancedGroupMultiSe, "customProps", _propTypes["default"].shape({
+  SuggestionsProps: _propTypes["default"].object
+})), _AdvancedGroupMultiSe);
 exports.AdvancedGroupMultiSelect_propTypes = AdvancedGroupMultiSelect_propTypes;
 
 var AdvancedMultiSelect_propTypes = _objectSpread(_objectSpread({}, MultiSelect_propTypes), {}, {

package/lib/Popup/Popup.js

@@ -35,8 +35,15 @@ var Popup = function Popup(Component) {
       closeOnScroll = _options$closeOnScrol === void 0 ? false : _options$closeOnScrol,
       _options$isOutsideScr = options.isOutsideScrollBlocked,
       isOutsideScrollBlocked = _options$isOutsideScr === void 0 ? false : _options$isOutsideScr;
-  var getRootElement = (0, _Config.getLibraryConfig)('getRootElement');
-  var mobileWidth = (0, _Config.getLibraryConfig)('mobileWidth');
+
+  var getRootElement = function getRootElement() {
+    return (0, _Config.getLibraryConfig)('getRootElement');
+  };
+
+  var getMobileWidth = function getMobileWidth() {
+    return (0, _Config.getLibraryConfig)('mobileWidth');
+  };
+
   var middleware = {
     useAbsolutePositioning: isAbsolutePositioningNeeded,
     positionOrder: customOrder,
@@ -48,8 +55,8 @@ var Popup = function Popup(Component) {
   };
   var popupConfig = {
     group: group,
-    mobileWidth: mobileWidth,
-    rootElementCallback: getRootElement,
+    getMobileWidth: getMobileWidth,
+    getRootElement: getRootElement,
     middleware: middleware
   };
   return (0, _Popup["default"])(Component, popupConfig);

package/lib/Select/GroupSelect.js

@@ -701,7 +701,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI,
           _customProps$TextBoxP = customProps.TextBoxProps,
           TextBoxProps = _customProps$TextBoxP === void 0 ? {} : _customProps$TextBoxP,
-          SuggestionsProps = customProps.SuggestionsProps;
+          _customProps$Suggesti = customProps.SuggestionsProps,
+          SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : '', " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverStyle : ''),
         "data-id": dataIdSlctComp,