@zohodesk/components 1.0.0-temp-210.4 → 1.0.0-temp-199.3

package/es/Select/props/defaultProps.js

@@ -69,7 +69,8 @@ export const GroupSelect_defaultProps = {
   isRestrictScroll: false,
   i18nKeys: {},
   iconOnHover: false,
-  isLoading: false
+  isLoading: false,
+  customProps: {}
 };
 export const SelectWithAvatar_defaultProps = {
   animationStyle: 'bounce',
@@ -95,7 +96,8 @@ export const SelectWithAvatar_defaultProps = {
   isRestrictScroll: false,
   i18nKeys: {},
   needEffect: true,
-  isLoading: false
+  isLoading: false,
+  customProps: {}
 };
 export const SelectWithIcon_defaultProps = {
   isReadOnly: false,

package/es/Select/props/propTypes.js

@@ -174,7 +174,8 @@ export const GroupSelect_propTypes = {
   }),
   isLoading: PropTypes.bool,
   dataSelectorId: PropTypes.string,
-  isDefaultSelectValue: PropTypes.bool
+  isDefaultSelectValue: PropTypes.bool,
+  customProps: PropTypes.string
 };
 export const SelectWithAvatar_propTypes = { ...Select_propTypes,
   textBoxClass: PropTypes.string,
@@ -235,7 +236,8 @@ export const SelectWithAvatar_propTypes = { ...Select_propTypes,
   htmlId: PropTypes.string,
   needEffect: PropTypes.bool,
   isLoading: PropTypes.bool,
-  dataSelectorId: PropTypes.string
+  dataSelectorId: PropTypes.string,
+  customProps: PropTypes.string
 };
 export const SelectWithIcon_propTypes = {
   animationStyle: PropTypes.oneOf(['default', 'bounce']),

package/lib/DateTime/DateTime.js

@@ -43,8 +43,6 @@ var _dateFormat = require("./dateFormatUtils/dateFormat");
 
 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 _construct(Parent, args, Class) { if (_isNativeReflectConstruct()) { _construct = Reflect.construct.bind(); } else { _construct = function _construct(Parent, args, Class) { var a = [null]; a.push.apply(a, args); var Constructor = Function.bind.apply(Parent, a); var instance = new Constructor(); if (Class) _setPrototypeOf(instance, Class.prototype); return instance; }; } return _construct.apply(null, arguments); }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -727,14 +725,10 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
           targetOffset = _this$props7.targetOffset,
           isRestrictScroll = _this$props7.isRestrictScroll,
           dropBoxPortalId = _this$props7.dropBoxPortalId,
-          renderCustomHeader = _this$props7.renderCustomHeader,
-          renderCustomFooter = _this$props7.renderCustomFooter,
           _this$props7$customPr = _this$props7.customProps,
           customProps = _this$props7$customPr === void 0 ? {} : _this$props7$customPr;
       var _customProps$TimeProp = customProps.TimeProps,
-          TimeProps = _customProps$TimeProp === void 0 ? {} : _customProps$TimeProp,
-          _customProps$DropBoxP = customProps.DropBoxProps,
-          DropBoxProps = _customProps$DropBoxP === void 0 ? {} : _customProps$DropBoxP;
+          TimeProps = _customProps$TimeProp === void 0 ? {} : _customProps$TimeProp;
       var _i18nKeys$timeText = i18nKeys.timeText,
           timeText = _i18nKeys$timeText === void 0 ? 'Time' : _i18nKeys$timeText,
           _i18nKeys$submitText = i18nKeys.submitText,
@@ -764,7 +758,7 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
         "data-id": "".concat(dataId, "_Calendar"),
         "data-test-id": "".concat(dataId, "_Calendar"),
         onClick: this.closePopup
-      }, renderCustomHeader, /*#__PURE__*/_react["default"].createElement(_DateTimePopupHeader["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_DateTimePopupHeader["default"], {
         onOpenYearView: this.handleOpenYearView,
         showMonthTxt: showmonthtxt,
         isYearView: isYearView,
@@ -808,7 +802,7 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
         cancelText: cancelText,
         onCancel: this.handleClear,
         dataId: dataId
-      }) : null, renderCustomFooter, isYearView ? /*#__PURE__*/_react["default"].createElement("div", {
+      }) : null, isYearView ? /*#__PURE__*/_react["default"].createElement("div", {
         className: _DateTimeModule["default"].yearContainer
       }, /*#__PURE__*/_react["default"].createElement(_YearView["default"], {
         onSelectYear: this.handleSelectYear,
@@ -824,7 +818,7 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
         className: "".concat(_DateTimeModule["default"].dropBox, " ").concat(className),
         "data-id": "".concat(dataId, "_dateBoxContainer"),
         "data-test-id": "".concat(dataId, "_dateBoxContainer")
-      }, childEle) : isReady ? /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], _extends({
+      }, childEle) : isReady ? /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
         size: boxSize,
         boxPosition: position,
         isActive: isActive,
@@ -844,7 +838,7 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
         targetOffset: targetOffset,
         isRestrictScroll: isRestrictScroll,
         portalId: dropBoxPortalId
-      }, DropBoxProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, childEle)) : null;
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, childEle)) : null;
     }
   }]);
 

package/lib/DateTime/DateWidget.js

@@ -179,8 +179,7 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           dateFormat = _this$props2$dateForm === void 0 ? '' : _this$props2$dateForm,
           is24Hour = _this$props2.is24Hour,
           isHideCurrentYear = _this$props2.isHideCurrentYear,
-          getPopupProps = _this$props2.getPopupProps,
-          handleBlur = _this$props2.handleBlur;
+          getPopupProps = _this$props2.getPopupProps;
 
       if (validation && validation.validate) {
         this.validateOnSelect(selected, this.props);
@@ -213,8 +212,6 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
       if (prevProps.isPopupReady !== isPopupReady) {
         if (isPopupReady) {
           this.resetLocalDate && this.resetLocalDate();
-        } else {
-          handleBlur && handleBlur();
         }
 
         if (getPopupProps) {
@@ -1035,8 +1032,6 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           a11y = _this$props12.a11y,
           boxSize = _this$props12.boxSize,
           onError = _this$props12.onError,
-          renderCustomHeader = _this$props12.renderCustomHeader,
-          renderCustomFooter = _this$props12.renderCustomFooter,
           _this$props12$customP = _this$props12.customProps,
           customProps = _this$props12$customP === void 0 ? {} : _this$props12$customP;
       var _customProps$DateTime = customProps.DateTimeProps,
@@ -1139,8 +1134,6 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         dropBoxPortalId: dropBoxPortalId,
         boxSize: boxSize,
         onError: onError,
-        renderCustomHeader: renderCustomHeader,
-        renderCustomFooter: renderCustomFooter,
         customProps: DateTimeProps
       }));
     }

package/lib/DateTime/props/defaultProps.js

@@ -29,8 +29,6 @@ var DateTime_defaultProps = {
   is24Hour: false,
   isDefaultPosition: false,
   customDateFormat: null,
-  renderCustomHeader: null,
-  renderCustomFooter: null,
   customProps: {}
 };
 exports.DateTime_defaultProps = DateTime_defaultProps;
@@ -55,8 +53,6 @@ var DateWidget_defaultProps = {
   needErrorOnBlur: false,
   isEditable: false,
   iconOnHover: false,
-  renderCustomHeader: null,
-  renderCustomFooter: null,
   is24Hour: false
 };
 exports.DateWidget_defaultProps = DateWidget_defaultProps;

package/lib/DateTime/props/propTypes.js

@@ -98,8 +98,6 @@ var DateTime_propTypes = {
   targetOffset: _propTypes["default"].string,
   isRestrictScroll: _propTypes["default"].bool,
   dropBoxPortalId: _propTypes["default"].string,
-  renderCustomHeader: _propTypes["default"].node,
-  renderCustomFooter: _propTypes["default"].node,
   customProps: _propTypes["default"].object
 };
 exports.DateTime_propTypes = DateTime_propTypes;
@@ -170,10 +168,7 @@ var DateWidget_propTypes = {
   dropBoxPortalId: _propTypes["default"].string,
   a11y: _propTypes["default"].object,
   getPopupProps: _propTypes["default"].func,
-  renderCustomHeader: _propTypes["default"].node,
-  renderCustomFooter: _propTypes["default"].node,
-  customProps: _propTypes["default"].object,
-  handleBlur: _propTypes["default"].func
+  customProps: _propTypes["default"].object
 };
 exports.DateWidget_propTypes = DateWidget_propTypes;
 var YearView_propTypes = {

package/lib/ListItem/ListItem.js

@@ -150,7 +150,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
         autoHover: autoHover,
         needTick: needTick,
         needBorder: needBorder,
-        customClass: customListItem,
+        customClass: "".concat(needMultiLineText ? _ListItemModule["default"].txtAlignBaseLine + ' ' + _ListItemModule["default"].autoHeight : '', " ").concat(customListItem),
         dataId: dataIdString,
         dataSelectorId: "".concat(dataSelectorId),
         isLink: isLink,
@@ -171,7 +171,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(customTickIcon, " ").concat(needMultiLineText ? _ListItemModule["default"].tickIconCenter : ''),
         "aria-hidden": ariaHidden,
         dataId: "".concat(dataIdString, "_tickIcon"),
         dataSelectorId: "".concat(dataSelectorId, "_tickIcon")

package/lib/ListItem/ListItem.module.css

@@ -17,8 +17,9 @@
 }[dir=ltr] .varClass {
   --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
 }[dir=rtl] .varClass {
-  --listitem_avatar_margin: 0 0 0 var(--zd_size15);
+  --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
 }
+
 .list {
   composes: varClass;
   position: relative;
@@ -34,62 +35,84 @@
   border-color: var(--listitem_border_color);
   cursor: pointer;
 }
+
 .list, .default, .secondary {
   background-color: var(--listitem_bg_color);
 }
+
 [dir=ltr] .withBorder {
-  --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
+  --listitem_border_width: 0 0 0 1px
+    /*rtl: 0 1px 0 0*/
+  ;
 }
+
 [dir=rtl] .withBorder {
-  --listitem_border_width: 0 1px 0 0;
+  --listitem_border_width: 0 0 0 1px  ;
 }
+
 .active {
   --listitem_border_color: var(--zdt_listitem_active_border);
 }
+
 [dir=ltr] .small {
   --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5);
 }
+
 [dir=rtl] .small {
-  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3);
+  --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5);
 }
+
 .medium {
   --listitem_padding: var(--zd_size7) var(--zd_size20);
   --listitem_min_height: var(--zd_size35);
 }
+
 .large {
   --listitem_height: var(--zd_size48);
 }
+
 [dir=ltr] .large {
   --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
 }
+
 [dir=rtl] .large {
-  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
+  --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
 }
+
 .value,
 .children {
   composes: dotted from '../common/common.module.css';
 }
-.value, .multiLineValue {
+
+.value {
   line-height: 1.5385;
 }
-.multiLineValue{
+
+.multiLineValue {
+  line-height: 1.5385;
   word-break: break-word;
-  composes: clamp from '../common/common.module.css'
+  -webkit-line-clamp: 3;
+  composes: clamp from '../common/common.module.css';
 }
+
 .iconBox {
   width: var(--zd_size20) ;
   text-align: center;
 }
+
 [dir=ltr] .iconBox {
   margin-right: var(--zd_size10) ;
 }
+
 [dir=rtl] .iconBox {
   margin-left: var(--zd_size10) ;
 }
+
 .iconBox,
 .leftAvatar {
   font-size: 0 ;
 }
+
 .leftAvatar {
   margin: var(--listitem_avatar_margin);
 }
@@ -97,61 +120,78 @@
 .defaultHover, .primaryHover, .secondaryHover, .darkHover {
   background-color: var(--listitem_highlight_bg_color);
 }
+
 .activewithBorder {
   --listitem_border_color: var(--zdt_listitem_active_border);
 }
+
 [dir=ltr] .activewithBorder {
-  --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
+  --listitem_border_width: 0 0 0 1px
+    /*rtl: 0 1px 0 0*/
+  ;
 }
+
 [dir=rtl] .activewithBorder {
-  --listitem_border_width: 0 1px 0 0;
+  --listitem_border_width: 0 0 0 1px  ;
 }
 
 .defaultHover,
 .defaultEffect:hover
+
 /* .defaultEffect:focus  */
-{
+  {
   --listitem_bg_color: var(--zdt_listitem_highlight_bg);
 }
+
 .primaryHover,
 .primaryEffect:hover
+
 /* .primaryEffect:focus */
- {
+  {
   --listitem_bg_color: var(--zdt_listitem_primary_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_primary_bg);
 }
+
 .secondaryHover,
 .secondaryEffect:hover
+
 /* .secondaryEffect:focus  */
-{
+  {
   --listitem_bg_color: var(--zdt_listitem_secondary_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_secondary_bg);
   --listitem_text_color: var(--zdt_listitem_secondary_text);
 }
+
 .darkHover,
 .darkEffect:hover
+
 /* .darkEffect:focus */
- {
+  {
   --listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
 }
+
 .activedefault, .activeprimary, .activesecondary, .activedark {
   background-color: var(--listitem_active_bg_color);
 }
+
 .activedefault,
 .activedefault:hover,
 .activeprimary,
 .activeprimary:hover {
   --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
 }
+
 .activesecondary {
   --listitem_active_bg_color: var(--zdt_listitem_secondary_bg);
   --listitem_text_color: var(--zdt_listitem_secondary_text);
 }
+
 .dark {
   --listitem_bg_color: var(--zdt_listitem_dark_bg);
   --listitem_text_color: var(--zdt_listitem_dark_text);
 }
+
 .activedark {
   --listitem_active_bg_color: var(--zdt_listitem_dark_active_bg);
 }
@@ -170,36 +210,63 @@
 [dir=rtl] .tickIcon, [dir=rtl] .defaultTick, [dir=rtl] .darkTick {
   left: var(--zd_size20) ;
 }
+
 .defaultTick {
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
 }
+
 .darkTick {
   --listitem_tickicon_color: var(--zdt_listitem_dark_tickicon);
 }
-.defaultTick > i {
+
+.defaultTick>i {
   display: block;
 }
+
 [dir=ltr] .smallwithTick {
   --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size5);
 }
+
 [dir=rtl] .smallwithTick {
-  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size39);
+  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size5);
 }
+
 [dir=ltr] .mediumwithTick {
   --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size20);
 }
+
 [dir=rtl] .mediumwithTick {
-  --listitem_padding: var(--zd_size7) var(--zd_size20) var(--zd_size7) var(--zd_size39);
+  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size20);
 }
+
 [dir=ltr] .largewithTick {
   --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10) var(--zd_size25);
 }
+
 [dir=rtl] .largewithTick {
-  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
+  --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10) var(--zd_size25);
 }
+
 .responsiveHeight {
   --listitem_min_height: var(--zd_size45);
   font-size: var(--zd_font_size15) ;
   padding-top: var(--zd_size10) ;
   padding-bottom: var(--zd_size10) ;
 }
+
+.autoHeight {
+  height: auto ;
+}
+
+.tickIconCenter {
+  top: 50% ;
+  transform: translateY(-50%);
+}
+
+.txtAlignBaseLine {
+  align-items: baseline;
+}
+
+.alignSelfTop {
+  align-self: start;
+}

package/lib/ListItem/ListItemWithAvatar.js

@@ -158,7 +158,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         autoHover: autoHover,
         needTick: needTick,
         needBorder: needBorder,
-        customClass: customListItem,
+        customClass: "".concat(needMultiLineText ? _ListItemModule["default"].autoHeight : '', " ").concat(customListItem),
         dataId: "".concat(dataIdString, "_ListItemWithAvatar"),
         dataSelectorId: "".concat(dataSelectorId),
         onClick: this.handleClick,
@@ -168,7 +168,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(needMultiLineText ? _ListItemModule["default"].alignSelfTop : '', " ").concat(_ListItemModule["default"].leftAvatar)
       }, isTeam ? /*#__PURE__*/_react["default"].createElement(_AvatarTeam["default"], {
         name: name,
         size: "small",
@@ -195,7 +195,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/ListItemWithIcon.js

@@ -147,7 +147,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         autoHover: autoHover,
         needTick: needTick,
         needBorder: needBorder,
-        customClass: customClass,
+        customClass: "".concat(needMultiLineText ? _ListItemModule["default"].autoHeight : '', " ").concat(needMultiLineText && iconClass && !iconName ? _ListItemModule["default"].txtAlignBaseLine : '', " ").concat(customClass),
         dataId: dataIdString,
         dataSelectorId: dataSelectorId,
         isLink: isLink,
@@ -176,7 +176,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/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."); }
@@ -965,7 +967,9 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
           palette = _this$props8.palette,
           needEffect = _this$props8.needEffect,
           autoComplete = _this$props8.autoComplete,
-          getTargetRef = _this$props8.getTargetRef;
+          getTargetRef = _this$props8.getTargetRef,
+          customProps = _this$props8.customProps;
+      var suggestionsProps = customProps.suggestionsProps;
       var _i18nKeys = i18nKeys,
           _i18nKeys$clearText = _i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? 'Clear all' : _i18nKeys$clearText;
@@ -1128,7 +1132,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,
@@ -1141,7 +1145,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/AdvancedMultiSelect.js

@@ -611,7 +611,9 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
             role: 'option'
           },
           dataId: "".concat(dataIdMultiSelectComp, "_Options")
-        }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+        }, SuggestionsProps, {
+          needMultiLineText: true
+        })) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           isLoading: isFetchingOptions,
           options: options,
           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,7 +83,8 @@ 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,
+          needMultiLineText = _this$props.needMultiLineText;
       var ariaParentRole = a11y.ariaParentRole,
           ariaMultiselectable = a11y.ariaMultiselectable;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
@@ -143,7 +144,8 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
             size: listItemSize,
             avatarPalette: avatarPalette,
             palette: palette,
-            a11y: list_a11y
+            a11y: list_a11y,
+            needMultiLineText: needMultiLineText
           }));
         } else if (optionType === 'icon') {
           return /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], _extends({}, commonProps, {
@@ -163,7 +165,8 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
             iconSize: iconSize,
             size: listItemSize,
             palette: palette,
-            a11y: list_a11y
+            a11y: list_a11y,
+            needMultiLineText: needMultiLineText
           }));
         }
 
@@ -182,7 +185,8 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
           active: isActive,
           size: listItemSize,
           palette: palette,
-          a11y: list_a11y
+          a11y: list_a11y,
+          needMultiLineText: needMultiLineText
         }));
       })));
     }

package/lib/MultiSelect/props/defaultProps.js

@@ -45,7 +45,8 @@ var AdvancedGroupMultiSelect_defaultProps = {
   needEffect: true,
   palette: 'default',
   isLoading: false,
-  dataSelectorId: 'advancedGroupMultiSelect'
+  dataSelectorId: 'advancedGroupMultiSelect',
+  customProps: {}
 };
 exports.AdvancedGroupMultiSelect_defaultProps = AdvancedGroupMultiSelect_defaultProps;
 var AdvancedMultiSelect_defaultProps = {
@@ -167,8 +168,8 @@ var MultiSelectWithAvatar_defaultProps = {
   isLoading: false,
   dataSelectorId: 'multiSelectWithAvatar',
   keepSelectedOptions: false,
-  customProps: {},
-  needResponsive: true
+  needResponsive: true,
+  customProps: {}
 };
 exports.MultiSelectWithAvatar_defaultProps = MultiSelectWithAvatar_defaultProps;
 var SelectedOptions_defaultProps = {
@@ -177,6 +178,7 @@ var SelectedOptions_defaultProps = {
 };
 exports.SelectedOptions_defaultProps = SelectedOptions_defaultProps;
 var Suggestions_defaultProps = {
-  a11y: {}
+  a11y: {},
+  needMultiLineText: false
 };
 exports.Suggestions_defaultProps = Suggestions_defaultProps;