@zohodesk/components 1.0.0-temp-219 → 1.0.0-temp-199.6

package/es/TextBox/TextBox.js

@@ -1,12 +1,10 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
-import { ComponentCustomizer } from '@zohodesk/dotkit/es/react/components/ComponentCustomizer';
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['xmedium', 'medium', 'small', 'default', 'primary', 'secondary'] }] */
 
 import style from "./TextBox.module.css";
-
-class TextBox extends React.PureComponent {
+export default class TextBox extends React.PureComponent {
   constructor(props) {
     super(props);
     this.onChange = this.onChange.bind(this);
@@ -180,7 +178,6 @@ class TextBox extends React.PureComponent {
   }
 
 }
-
 TextBox.defaultProps = defaultProps;
 TextBox.propTypes = propTypes; // if (__DOCS__) {
 //   Textbox.docs = {
@@ -189,8 +186,4 @@ TextBox.propTypes = propTypes; // if (__DOCS__) {
 //     external: true,
 //     description: ' '
 //   };
-// }
-
-export default ComponentCustomizer(TextBox, {
-  name: 'TextBox'
-});
+// }

package/es/v1/ListItem/ListItem.js

@@ -81,7 +81,7 @@ const ListItem = props => {
     autoHover: autoHover,
     needTick: needTick,
     needBorder: needBorder,
-    customClass: customListItem,
+    customClass: `${customListItem} ${needMultiLineText ? style.txtAlignBaseLine + ' ' + style.autoHeight : ''} ${customListItem}`,
     dataId: dataIdString,
     dataSelectorId: `${dataSelectorId}`,
     isLink: isLink,

package/es/v1/MultiSelect/AdvancedMultiSelect.js

@@ -549,7 +549,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
           role: 'option'
         },
         dataId: `${dataIdMultiSelectComp}_Options`,
-        ...SuggestionsProps
+        ...SuggestionsProps,
+        needMultiLineText: true
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,
         options: options,

package/es/v1/MultiSelect/MultiSelect.js

@@ -1002,8 +1002,12 @@ export class MultiSelectComponent extends React.Component {
       boxSize,
       isLoading,
       selectAllText,
-      needSelectAll
+      needSelectAll,
+      customProps
     } = this.props;
+    const {
+      suggestionsProps = {}
+    } = customProps;
     const {
       selectedOptions,
       searchStr,
@@ -1093,7 +1097,8 @@ export class MultiSelectComponent extends React.Component {
       selectedOptions: selectedOptionIds,
       a11y: {
         role: 'option'
-      }
+      },
+      ...suggestionsProps
     }) : /*#__PURE__*/React.createElement(EmptyState, {
       isLoading: isFetchingOptions,
       options: options,

package/es/v1/MultiSelect/Suggestions.js

@@ -27,7 +27,8 @@ export default class Suggestions extends React.PureComponent {
       avatarPalette,
       palette,
       htmlId,
-      a11y
+      a11y,
+      needMultiLineText
     } = this.props;
     const {
       ariaParentRole,
@@ -92,7 +93,8 @@ export default class Suggestions extends React.PureComponent {
           size: listItemSize,
           avatarPalette: avatarPalette,
           palette: palette,
-          a11y: list_a11y
+          a11y: list_a11y,
+          needMultiLineText: needMultiLineText
         });
       } else if (optionType === 'icon') {
         return /*#__PURE__*/React.createElement(ListItemWithIcon, { ...commonProps,
@@ -112,7 +114,8 @@ export default class Suggestions extends React.PureComponent {
           iconSize: iconSize,
           size: listItemSize,
           palette: palette,
-          a11y: list_a11y
+          a11y: list_a11y,
+          needMultiLineText: needMultiLineText
         });
       }
 
@@ -131,7 +134,8 @@ export default class Suggestions extends React.PureComponent {
         active: isActive,
         size: listItemSize,
         palette: palette,
-        a11y: list_a11y
+        a11y: list_a11y,
+        needMultiLineText: needMultiLineText
       });
     })));
   }

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

@@ -117,7 +117,8 @@ export const MultiSelect_defaultProps = {
   keepSelectedOptions: false,
   selectedOptionsCount: 0,
   cardHeaderName: '',
-  needResponsive: true
+  needResponsive: true,
+  customProps: {}
 };
 export const MultiSelectHeader_defaultProps = {
   dataId: 'MultiSelectHeader'
@@ -161,5 +162,6 @@ export const SelectedOptions_defaultProps = {
   dataId: 'selectedOptions'
 };
 export const Suggestions_defaultProps = {
-  a11y: {}
+  a11y: {},
+  needMultiLineText: false
 };

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

@@ -108,7 +108,10 @@ export const MultiSelect_propTypes = {
   needSelectAll: PropTypes.bool,
   selectAllText: PropTypes.string,
   setAriaId: PropTypes.string,
-  ariaErrorId: PropTypes.string
+  ariaErrorId: PropTypes.string,
+  customProps: {
+    suggestionsProps: PropTypes.object
+  }
 };
 export const MultiSelectHeader_propTypes = {
   dataId: PropTypes.string,
@@ -173,7 +176,8 @@ export const Suggestions_propTypes = {
     logo: PropTypes.string,
     optionType: PropTypes.string,
     listItemProps: PropTypes.object
-  }))
+  })),
+  needMultiLineText: PropTypes.bool
 };
 export const AdvancedGroupMultiSelect_propTypes = {
   animationStyle: PropTypes.string,

package/es/v1/Select/GroupSelect.js

@@ -590,8 +590,12 @@ export class GroupSelectComponent extends PureComponent {
       htmlId,
       iconOnHover,
       isLoading,
-      dataSelectorId
+      dataSelectorId,
+      customProps
     } = this.props;
+    const {
+      suggestionsProps = {}
+    } = customProps;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
       searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -784,7 +788,8 @@ export class GroupSelectComponent extends PureComponent {
             ariaParentRole: 'listbox',
             role: 'option'
           },
-          dataId: `${dataId}_Options`
+          dataId: `${dataId}_Options`,
+          ...suggestionsProps
         }));
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         options: revampedGroups,

package/es/v1/Select/SelectWithAvatar.js

@@ -163,8 +163,12 @@ class SelectWithAvatarComponent extends SelectComponent {
       needEffect,
       isLoading,
       dataSelectorId,
-      getTargetRef
+      getTargetRef,
+      customProps
     } = this.props;
+    const {
+      suggestionsProps = {}
+    } = customProps;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
       searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -321,7 +325,8 @@ class SelectWithAvatarComponent extends SelectComponent {
         a11y: {
           ariaParentRole: 'listbox',
           role: 'option'
-        }
+        },
+        ...suggestionsProps
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,
         options: options,

package/es/v1/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/v1/Select/props/propTypes.js

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

package/lib/Button/Button.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = Button;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -11,8 +11,6 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
-var _ComponentCustomizer = require("@zohodesk/dotkit/es/react/components/ComponentCustomizer");
-
 var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
 
 var _utils = require("@zohodesk/utils");
@@ -83,12 +81,4 @@ Button.propTypes = _propTypes.propTypes; // if (__DOCS__) {
 //     componentGroup: 'Form Elements',
 //     folderName: 'Style Guide'
 //   };
-// }
-
-var _default = (0, _ComponentCustomizer.ComponentCustomizer)(Button, {
-  name: 'Button',
-  type: _ComponentCustomizer.PROP_CUSTOMIZE_TYPE.excludedProps,
-  props: ['text', 'children']
-});
-
-exports["default"] = _default;
+// }

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

@@ -162,7 +162,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,
@@ -172,7 +172,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"], _extends({
         name: name,
         size: "small",
@@ -199,7 +199,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."); }
@@ -966,7 +968,9 @@ 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 suggestionsProps = customProps.suggestionsProps;
       var _i18nKeys = i18nKeys,
           _i18nKeys$clearText = _i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? 'Clear all' : _i18nKeys$clearText;
@@ -1130,7 +1134,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,
@@ -1143,7 +1147,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

@@ -613,7 +613,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,