@zohodesk/components 1.0.0-temp-221.1 → 1.0.0-temp-199.13

package/lib/ListItem/ListItem.js

@@ -122,7 +122,8 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
           a11y = _this$props4.a11y,
           customClass = _this$props4.customClass,
           customProps = _this$props4.customProps,
-          needMultiLineText = _this$props4.needMultiLineText;
+          needMultiLineText = _this$props4.needMultiLineText,
+          lhsBoxAlign = _this$props4.lhsBoxAlign;
       var _customProps$ListItem = customProps.ListItemProps,
           ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
           _customProps$Containe = customProps.ContainerProps,
@@ -150,7 +151,8 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
         autoHover: autoHover,
         needTick: needTick,
         needBorder: needBorder,
-        customClass: customListItem,
+        customClass: "".concat(needMultiLineText && size == 'large' ? _ListItemModule["default"].largeSizeContainer : '', " ").concat(customListItem),
+        align: lhsBoxAlign,
         dataId: dataIdString,
         dataSelectorId: "".concat(dataSelectorId),
         isLink: isLink,
@@ -171,7 +173,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
         adjust: true,
         className: _ListItemModule["default"].children
       }, children) : null, needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_ListItemModule["default"].tickIcon, " ").concat(tickIconPalette, " ").concat(customTickIcon),
+        className: "".concat(_ListItemModule["default"].tickIcon, " ").concat(tickIconPalette, " ").concat(needMultiLineText ? _ListItemModule["default"].tickIconCenter : '', " ").concat(customTickIcon),
         "aria-hidden": ariaHidden,
         dataId: "".concat(dataIdString, "_tickIcon"),
         dataSelectorId: "".concat(dataSelectorId, "_tickIcon")

package/lib/ListItem/ListItem.module.css

@@ -73,8 +73,7 @@
   line-height: 1.5385;
 }
 .multiLineValue{
-  word-break: break-word;
-  composes: clamp from '../common/common.module.css'
+  composes: lineClamp from '../common/common.module.css';
 }
 .iconBox {
   width: var(--zd_size20) ;
@@ -86,6 +85,10 @@
 [dir=rtl] .iconBox {
   margin-left: var(--zd_size10) ;
 }
+.iconBoxTopAlign {
+  align-self: start;
+  composes: dflex alignVertical from '../common/common.module.css';
+}
 .iconBox,
 .leftAvatar {
   font-size: 0 ;
@@ -93,6 +96,18 @@
 .leftAvatar {
   margin: var(--listitem_avatar_margin);
 }
+.smallIconBox {
+  /*  Variable:Ignore  */
+  height: var(--zd_font_size20);
+}
+.mediumIconBox {
+  /*  Variable:Ignore  */
+  height: var(--zd_font_size21);
+}
+.largeIconBox {
+  /*  Variable:Ignore  */
+  height: var(--zd_font_size28);
+}
 
 .defaultHover, .primaryHover, .secondaryHover, .darkHover {
   background-color: var(--listitem_highlight_bg_color);
@@ -197,9 +212,17 @@
 [dir=rtl] .largewithTick {
   --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
 }
+.largeSizeContainer{
+  --listitem_height: auto;
+  --listitem_min_height: var(--zd_size48);
+}
 .responsiveHeight {
   --listitem_min_height: var(--zd_size45);
   font-size: var(--zd_font_size15) ;
   padding-top: var(--zd_size10) ;
   padding-bottom: var(--zd_size10) ;
 }
+.tickIconCenter {
+  top: 50% ;
+  transform: translateY(-50%);
+}

package/lib/ListItem/ListItemWithAvatar.js

@@ -128,7 +128,8 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
           a11y = _this$props4.a11y,
           customClass = _this$props4.customClass,
           customProps = _this$props4.customProps,
-          needMultiLineText = _this$props4.needMultiLineText;
+          needMultiLineText = _this$props4.needMultiLineText,
+          lhsBoxAlign = _this$props4.lhsBoxAlign;
       var _customProps$ListItem = customProps.ListItemProps,
           ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
           _customProps$Containe = customProps.ContainerProps,
@@ -152,6 +153,11 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
       var ariaHidden = listA11y.ariaHidden;
       var isDarkPalette = palette === 'dark';
       var dataIdString = value ? value : dataId;
+      var sizeClassMap = {
+        small: _ListItemModule["default"].smallIconBox,
+        medium: _ListItemModule["default"].mediumIconBox,
+        large: _ListItemModule["default"].largeIconBox
+      };
       return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
         a11y: listA11y,
         size: size,
@@ -162,7 +168,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         autoHover: autoHover,
         needTick: needTick,
         needBorder: needBorder,
-        customClass: customListItem,
+        customClass: "".concat(needMultiLineText && size == 'large' ? _ListItemModule["default"].largeSizeContainer : '', " ").concat(customListItem),
         dataId: "".concat(dataIdString, "_ListItemWithAvatar"),
         dataSelectorId: "".concat(dataSelectorId),
         onClick: this.handleClick,
@@ -172,7 +178,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         title: null,
         customProps: ListItemProps
       }, ContainerProps), name || imgSrc ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: _ListItemModule["default"].leftAvatar
+        className: " ".concat(lhsBoxAlign == 'baseline' ? "".concat(_ListItemModule["default"].iconBoxTopAlign, " ").concat(sizeClassMap[size]) : '', " ").concat(_ListItemModule["default"].leftAvatar)
       }, isTeam ? /*#__PURE__*/_react["default"].createElement(_AvatarTeam["default"], _extends({
         name: name,
         size: "small",
@@ -199,7 +205,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         "data-title": isDisabled ? null : title,
         className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
       }, value) : null, needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: _ListItemModule["default"].tickIcon,
+        className: "".concat(_ListItemModule["default"].tickIcon, " ").concat(needMultiLineText ? _ListItemModule["default"].tickIconCenter : ''),
         "aria-hidden": ariaHidden,
         dataId: "".concat(dataIdString, "_tickIcon"),
         dataSelectorId: "".concat(dataSelectorId, "_tickIcon")

package/lib/ListItem/ListItemWithCheckBox.js

@@ -116,7 +116,8 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
           a11y = _this$props4.a11y,
           customClass = _this$props4.customClass,
           customProps = _this$props4.customProps,
-          needMultiLineText = _this$props4.needMultiLineText;
+          needMultiLineText = _this$props4.needMultiLineText,
+          lhsBoxAlign = _this$props4.lhsBoxAlign;
 
       var listA11y = _objectSpread({
         role: 'option'
@@ -132,6 +133,11 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
           customCheckBox = _customClass$customCh === void 0 ? '' : _customClass$customCh,
           _customClass$customLa = customClass.customLabel,
           customLabel = _customClass$customLa === void 0 ? '' : _customClass$customLa;
+      var sizeClassMap = {
+        small: _ListItemModule["default"].smallIconBox,
+        medium: _ListItemModule["default"].mediumIconBox,
+        large: _ListItemModule["default"].largeIconBox
+      };
       return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
         a11y: listA11y,
         size: size,
@@ -140,7 +146,7 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
         isDisabled: isDisabled,
         active: active,
         autoHover: autoHover,
-        customClass: customListItem,
+        customClass: "".concat(needMultiLineText && size == 'large' ? _ListItemModule["default"].largeSizeContainer : '', " ").concat(customListItem),
         dataId: "".concat(dataId ? dataId : value, "_ListItemWithCheckBox"),
         dataSelectorId: dataSelectorId,
         onClick: this.onClick,
@@ -150,7 +156,7 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
         title: null,
         customProps: ListItemProps
       }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: _ListItemModule["default"].iconBox,
+        className: "".concat(_ListItemModule["default"].iconBox, " ").concat(lhsBoxAlign == 'baseline' ? "".concat(_ListItemModule["default"].iconBoxTopAlign, " ").concat(sizeClassMap[size]) : ''),
         dataId: "".concat(dataId ? dataId : value, "_checkBox")
       }, /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
         checked: checked,

package/lib/ListItem/ListItemWithIcon.js

@@ -124,7 +124,8 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
           a11y = _this$props4.a11y,
           customClass = _this$props4.customClass,
           customProps = _this$props4.customProps,
-          needMultiLineText = _this$props4.needMultiLineText;
+          needMultiLineText = _this$props4.needMultiLineText,
+          lhsBoxAlign = _this$props4.lhsBoxAlign;
       var _customProps$ListItem = customProps.ListItemProps,
           ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
           _customProps$Containe = customProps.ContainerProps,
@@ -137,6 +138,11 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
 
       var ariaHidden = listA11y.ariaHidden;
       var dataIdString = dataId ? "".concat(dataId.replace("'", '_')) : value.toLowerCase().replace("'", '_');
+      var sizeClassMap = {
+        small: _ListItemModule["default"].smallIconBox,
+        medium: _ListItemModule["default"].mediumIconBox,
+        large: _ListItemModule["default"].largeIconBox
+      };
       return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
         a11y: listA11y,
         size: size,
@@ -147,7 +153,8 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         autoHover: autoHover,
         needTick: needTick,
         needBorder: needBorder,
-        customClass: customClass,
+        customClass: "".concat(needMultiLineText && size == 'large' ? _ListItemModule["default"].largeSizeContainer : '', " ").concat(customClass),
+        align: needMultiLineText && iconClass && !iconName ? 'baseline' : 'vertical',
         dataId: dataIdString,
         dataSelectorId: dataSelectorId,
         isLink: isLink,
@@ -161,7 +168,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         customProps: ListItemProps
       }, ContainerProps), iconName && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         "aria-hidden": true,
-        className: _ListItemModule["default"].iconBox,
+        className: "".concat(_ListItemModule["default"].iconBox, " ").concat(lhsBoxAlign == 'baseline' ? "".concat(_ListItemModule["default"].iconBoxTopAlign, " ").concat(sizeClassMap[size]) : ''),
         dataId: dataId ? "".concat(dataId, "_Icon") : "".concat(value.toLowerCase().replace("'", '_'), "_Icon")
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         iconClass: iconClass,
@@ -176,7 +183,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         "data-title": isDisabled ? null : title,
         dataId: "".concat(dataIdString, "_Text")
       }, value), needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: _ListItemModule["default"].tickIcon,
+        className: "".concat(_ListItemModule["default"].tickIcon, " ").concat(needMultiLineText ? _ListItemModule["default"].tickIconCenter : ''),
         "aria-hidden": ariaHidden,
         dataId: "".concat(dataIdString, "_tickIcon"),
         dataSelectorId: "".concat(dataSelectorId, "_tickIcon")

package/lib/ListItem/ListItemWithRadio.js

@@ -117,7 +117,8 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
           a11y = _this$props4.a11y,
           customClass = _this$props4.customClass,
           customProps = _this$props4.customProps,
-          needMultiLineText = _this$props4.needMultiLineText;
+          needMultiLineText = _this$props4.needMultiLineText,
+          lhsBoxAlign = _this$props4.lhsBoxAlign;
       var _customProps$ListItem = customProps.ListItemProps,
           ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem,
           _customProps$Containe = customProps.ContainerProps,
@@ -133,6 +134,11 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
           customRadio = _customClass$customRa === void 0 ? '' : _customClass$customRa,
           _customClass$customRa2 = customClass.customRadioWrap,
           customRadioWrap = _customClass$customRa2 === void 0 ? '' : _customClass$customRa2;
+      var sizeClassMap = {
+        small: _ListItemModule["default"].smallIconBox,
+        medium: _ListItemModule["default"].mediumIconBox,
+        large: _ListItemModule["default"].largeIconBox
+      };
       return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
         a11y: listA11y,
         size: size,
@@ -141,7 +147,7 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
         isDisabled: isDisabled,
         active: active,
         autoHover: autoHover,
-        customClass: customListItem,
+        customClass: "".concat(needMultiLineText && size == 'large' ? _ListItemModule["default"].largeSizeContainer : '', " ").concat(customListItem),
         dataId: dataId,
         dataSelectorId: dataSelectorId,
         onClick: this.onClick,
@@ -151,7 +157,7 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
         title: null,
         customProps: ListItemProps
       }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: _ListItemModule["default"].iconBox,
+        className: "".concat(_ListItemModule["default"].iconBox, " ").concat(lhsBoxAlign == 'baseline' ? "".concat(_ListItemModule["default"].iconBoxTopAlign, " ").concat(sizeClassMap[size]) : ''),
         dataId: "".concat(dataId, "_radio")
       }, /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
         checked: checked,

package/lib/ListItem/props/defaultProps.js

@@ -18,7 +18,8 @@ var ListContainerDefaultProps = {
   customClass: '',
   customProps: {},
   dataSelectorId: 'listContainer',
-  needMultiLineText: false
+  needMultiLineText: false,
+  align: 'vertical'
 };
 exports.ListContainerDefaultProps = ListContainerDefaultProps;
 var ListItemDefaultProps = {
@@ -36,7 +37,8 @@ var ListItemDefaultProps = {
   customClass: {},
   customProps: {},
   dataSelectorId: 'listItem',
-  needMultiLineText: false
+  needMultiLineText: false,
+  lhsBoxAlign: 'baseline'
 };
 exports.ListItemDefaultProps = ListItemDefaultProps;
 var ListItemWithAvatarDefaultProps = {
@@ -55,7 +57,8 @@ var ListItemWithAvatarDefaultProps = {
   customClass: {},
   customProps: {},
   dataSelectorId: 'listItemWithAvatar',
-  needMultiLineText: false
+  needMultiLineText: false,
+  lhsBoxAlign: 'baseline'
 };
 exports.ListItemWithAvatarDefaultProps = ListItemWithAvatarDefaultProps;
 var ListItemWithCheckBoxDefaultProps = {
@@ -70,7 +73,8 @@ var ListItemWithCheckBoxDefaultProps = {
   customClass: {},
   customProps: {},
   dataSelectorId: 'listItemWithCheckBox',
-  needMultiLineText: false
+  needMultiLineText: false,
+  lhsBoxAlign: 'baseline'
 };
 exports.ListItemWithCheckBoxDefaultProps = ListItemWithCheckBoxDefaultProps;
 var ListItemWithIconDefaultProps = {
@@ -88,7 +92,8 @@ var ListItemWithIconDefaultProps = {
   customClass: '',
   customProps: {},
   dataSelectorId: 'listItemWithIcon',
-  needMultiLineText: false
+  needMultiLineText: false,
+  lhsBoxAlign: 'baseline'
 };
 exports.ListItemWithIconDefaultProps = ListItemWithIconDefaultProps;
 var ListItemWithRadioDefaultProps = {
@@ -104,6 +109,7 @@ var ListItemWithRadioDefaultProps = {
   customClass: {},
   customProps: {},
   dataSelectorId: 'listItemWithRadio',
-  needMultiLineText: false
+  needMultiLineText: false,
+  lhsBoxAlign: 'baseline'
 };
 exports.ListItemWithRadioDefaultProps = ListItemWithRadioDefaultProps;

package/lib/ListItem/props/propTypes.js

@@ -43,7 +43,8 @@ var ListContainer_Props = {
   }),
   customClass: _propTypes["default"].string,
   customProps: _propTypes["default"].object,
-  eleRef: _propTypes["default"].func
+  eleRef: _propTypes["default"].func,
+  align: _propTypes["default"].string
 };
 exports.ListContainer_Props = ListContainer_Props;
 var ListItem_Props = {
@@ -74,6 +75,7 @@ var ListItem_Props = {
     ariaSelected: _propTypes["default"].bool
   }),
   needMultiLineText: _propTypes["default"].bool,
+  lhsBoxAlign: _propTypes["default"].oneOf(['baseline', 'vertical']),
   customClass: _propTypes["default"].shape({
     customListItem: _propTypes["default"].string,
     customTickIcon: _propTypes["default"].string
@@ -95,7 +97,7 @@ var ListItemWithAvatar_Props = (_ListItemWithAvatar_P = {
   customListItem: _propTypes["default"].string,
   customAvatar: _propTypes["default"].string,
   customAvatarTeam: _propTypes["default"].string
-})), _defineProperty(_ListItemWithAvatar_P, "needMultiLineText", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "customProps", _propTypes["default"].shape({
+})), _defineProperty(_ListItemWithAvatar_P, "needMultiLineText", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "lhsBoxAlign", _propTypes["default"].oneOf(['baseline', 'vertical'])), _defineProperty(_ListItemWithAvatar_P, "customProps", _propTypes["default"].shape({
   ListItemProps: _propTypes["default"].object,
   ContainerProps: _propTypes["default"].object,
   AvatarTeamProps: _propTypes["default"].exact(_propTypes3.propTypes),
@@ -125,6 +127,7 @@ var ListItemWithCheckBox_Props = {
     ariaSelected: _propTypes["default"].bool
   }),
   needMultiLineText: _propTypes["default"].bool,
+  lhsBoxAlign: _propTypes["default"].oneOf(['baseline', 'vertical']),
   customClass: _propTypes["default"].shape({
     customListItem: _propTypes["default"].string,
     customCheckBox: _propTypes["default"].string,
@@ -161,6 +164,7 @@ var ListItemWithIcon_Props = {
     ariaHidden: _propTypes["default"].bool
   }),
   needMultiLineText: _propTypes["default"].bool,
+  lhsBoxAlign: _propTypes["default"].oneOf(['baseline', 'vertical']),
   customClass: _propTypes["default"].string,
   customProps: _propTypes["default"].shape({
     ListItemProps: _propTypes["default"].object
@@ -193,6 +197,7 @@ var ListItemWithRadio_Props = {
     ariaSelected: _propTypes["default"].bool
   }),
   needMultiLineText: _propTypes["default"].bool,
+  lhsBoxAlign: _propTypes["default"].oneOf(['baseline', 'vertical']),
   customClass: _propTypes["default"].shape({
     customListItem: _propTypes["default"].string,
     customRadio: _propTypes["default"].string,

package/lib/MultiSelect/AdvancedGroupMultiSelect.js

@@ -53,6 +53,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."); }
@@ -972,7 +974,10 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
           needEffect = _this$props8.needEffect,
           autoComplete = _this$props8.autoComplete,
           getTargetRef = _this$props8.getTargetRef,
-          isFocus = _this$props8.isFocus;
+          isFocus = _this$props8.isFocus,
+          customProps = _this$props8.customProps;
+      var _customProps$Suggesti = customProps.SuggestionsProps,
+          SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
       var _i18nKeys = i18nKeys,
           _i18nKeys$clearText = _i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? 'Clear all' : _i18nKeys$clearText;
@@ -1136,7 +1141,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
             a11y: {
               role: 'heading'
             }
-          })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+          })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
             suggestions: suggestions,
             selectedOptions: selectedOptionIds,
             getRef: _this5.suggestionItemRef,
@@ -1149,7 +1154,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
               role: 'option'
             },
             dataId: "".concat(dataId, "_Options")
-          }));
+          }, SuggestionsProps)));
         }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           options: revampedGroups,
           searchString: searchStr,

package/lib/MultiSelect/MultiSelect.js

@@ -1093,7 +1093,10 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           boxSize = _this$props15.boxSize,
           isLoading = _this$props15.isLoading,
           selectAllText = _this$props15.selectAllText,
-          needSelectAll = _this$props15.needSelectAll;
+          needSelectAll = _this$props15.needSelectAll,
+          customProps = _this$props15.customProps;
+      var _customProps$Suggesti = customProps.SuggestionsProps,
+          SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
       var _this$state9 = this.state,
           selectedOptions = _this$state9.selectedOptions,
           searchStr = _this$state9.searchStr,
@@ -1170,7 +1173,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         eleRef: this.suggestionContainerRef
       }, isSearching ? /*#__PURE__*/_react["default"].createElement("div", {
         className: _MultiSelectModule["default"][palette]
-      }, searchText) : suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      }, searchText) : suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
         suggestions: suggestions,
         getRef: this.suggestionItemRef,
         hoverOption: hoverOption,
@@ -1183,7 +1186,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         a11y: {
           role: 'option'
         }
-      }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+      }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
         isLoading: isFetchingOptions,
         options: options,
         searchString: searchStr,

package/lib/MultiSelect/Suggestions.js

@@ -83,15 +83,20 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
           avatarPalette = _this$props.avatarPalette,
           palette = _this$props.palette,
           htmlId = _this$props.htmlId,
-          a11y = _this$props.a11y;
+          a11y = _this$props.a11y,
+          customClass = _this$props.customClass,
+          needMultiLineText = _this$props.needMultiLineText;
       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 : ''
@@ -115,7 +120,8 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
         });
 
         var commonProps = _objectSpread({
-          isDisabled: isDisabled
+          isDisabled: isDisabled,
+          needMultiLineText: needMultiLineText
         }, listItemCustomProps);
 
         if (listItemProps) {

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;
@@ -181,6 +182,8 @@ var SelectedOptions_defaultProps = {
 };
 exports.SelectedOptions_defaultProps = SelectedOptions_defaultProps;
 var Suggestions_defaultProps = {
-  a11y: {}
+  a11y: {},
+  customClass: {},
+  needMultiLineText: false
 };
 exports.Suggestions_defaultProps = Suggestions_defaultProps;

package/lib/MultiSelect/props/propTypes.js

@@ -129,7 +129,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
@@ -202,7 +203,11 @@ var Suggestions_propTypes = {
     logo: _propTypes["default"].string,
     optionType: _propTypes["default"].string,
     listItemProps: _propTypes["default"].object
-  }))
+  })),
+  customClass: _propTypes["default"].shape({
+    containerClass: _propTypes["default"].string
+  }),
+  needMultiLineText: _propTypes["default"].bool
 };
 exports.Suggestions_propTypes = Suggestions_propTypes;
 var AdvancedGroupMultiSelect_propTypes = (_AdvancedGroupMultiSe = {
@@ -273,7 +278,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), _AdvancedGroupMultiSe);
+}, _defineProperty(_AdvancedGroupMultiSe, "dataSelectorId", _propTypes["default"].string), _defineProperty(_AdvancedGroupMultiSe, "isFocus", _propTypes["default"].bool), _defineProperty(_AdvancedGroupMultiSe, "allowValueFallback", _propTypes["default"].bool), _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/Select/GroupSelect.js

@@ -670,6 +670,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           isLoading = _this$props9.isLoading,
           dataSelectorId = _this$props9.dataSelectorId,
           customProps = _this$props9.customProps;
+      var _customProps$Suggesti = customProps.SuggestionsProps,
+          SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -846,7 +848,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
             a11y: {
               role: 'heading'
             }
-          })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+          })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
             activeId: selectedId,
             suggestions: options,
             getRef: _this7.suggestionItemRef,
@@ -862,7 +864,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
               role: 'option'
             },
             dataId: "".concat(dataId, "_Options")
-          }));
+          }, SuggestionsProps)));
         }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           options: revampedGroups,
           searchString: searchStr,

package/lib/Select/SelectWithAvatar.js

@@ -51,6 +51,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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -215,7 +217,10 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           needEffect = _this$props.needEffect,
           isLoading = _this$props.isLoading,
           dataSelectorId = _this$props.dataSelectorId,
-          getTargetRef = _this$props.getTargetRef;
+          getTargetRef = _this$props.getTargetRef,
+          customProps = _this$props.customProps;
+      var _customProps$Suggesti = customProps.SuggestionsProps,
+          SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -354,7 +359,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           a11y: {
             role: 'heading'
           }
-        })) : null, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+        })) : null, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
           dataId: "".concat(dataId, "_Options"),
           activeId: selectedId,
           suggestions: suggestions,
@@ -371,7 +376,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
             ariaParentRole: 'listbox',
             role: 'option'
           }
-        }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+        }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           isLoading: isFetchingOptions,
           options: options,
           searchString: searchStr,

package/lib/Select/SelectWithIcon.js

@@ -440,7 +440,9 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           _customProps$Dropdown = customProps.DropdownSearchTextBoxProps,
           DropdownSearchTextBoxProps = _customProps$Dropdown === void 0 ? {} : _customProps$Dropdown,
           _customProps$TextBoxI = customProps.TextBoxIconProps,
-          TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI;
+          TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI,
+          _customProps$ListItem = customProps.ListItemProps,
+          ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem;
       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 : ''),
         "data-title": isDisabled ? title : null,
@@ -573,7 +575,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           var iconName = options.iconName,
               iconSize = options.iconSize,
               iconColor = options.iconColor;
-          return /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+          return /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], _extends({
             key: options[idKey],
             value: options[valueKey],
             size: "medium",
@@ -597,7 +599,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
               ariaSelected: selectedId === options[idKey],
               ariaLabel: options[valueKey]
             }
-          });
+          }, ListItemProps));
         })) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           isLoading: isFetchingOptions,
           options: options,

package/lib/Select/props/defaultProps.js

@@ -112,7 +112,8 @@ var SelectWithAvatar_defaultProps = {
   isRestrictScroll: false,
   i18nKeys: {},
   needEffect: true,
-  isLoading: false
+  isLoading: false,
+  customProps: {}
 };
 exports.SelectWithAvatar_defaultProps = SelectWithAvatar_defaultProps;
 var SelectWithIcon_defaultProps = (_SelectWithIcon_defau = {