@zohodesk/components 1.0.0-temp-199.10 → 1.0.0-temp-199.12

package/es/v1/MultiSelect/Suggestions.js

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

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

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

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

@@ -108,10 +108,7 @@ export const MultiSelect_propTypes = {
   needSelectAll: PropTypes.bool,
   selectAllText: PropTypes.string,
   setAriaId: PropTypes.string,
-  ariaErrorId: PropTypes.string,
-  customProps: {
-    suggestionsProps: PropTypes.object
-  }
+  ariaErrorId: PropTypes.string
 };
 export const MultiSelectHeader_propTypes = {
   dataId: PropTypes.string,
@@ -176,8 +173,7 @@ 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,12 +590,8 @@ export class GroupSelectComponent extends PureComponent {
       htmlId,
       iconOnHover,
       isLoading,
-      dataSelectorId,
-      customProps
+      dataSelectorId
     } = this.props;
-    const {
-      suggestionsProps = {}
-    } = customProps;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
       searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -788,8 +784,7 @@ export class GroupSelectComponent extends PureComponent {
             ariaParentRole: 'listbox',
             role: 'option'
           },
-          dataId: `${dataId}_Options`,
-          ...suggestionsProps
+          dataId: `${dataId}_Options`
         }));
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         options: revampedGroups,

package/es/v1/Select/SelectWithAvatar.js

@@ -163,12 +163,8 @@ class SelectWithAvatarComponent extends SelectComponent {
       needEffect,
       isLoading,
       dataSelectorId,
-      getTargetRef,
-      customProps
+      getTargetRef
     } = this.props;
-    const {
-      suggestionsProps = {}
-    } = customProps;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
       searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -325,8 +321,7 @@ 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,8 +69,7 @@ export const GroupSelect_defaultProps = {
   isRestrictScroll: false,
   i18nKeys: {},
   iconOnHover: false,
-  isLoading: false,
-  customProps: {}
+  isLoading: false
 };
 export const SelectWithAvatar_defaultProps = {
   animationStyle: 'bounce',
@@ -96,8 +95,7 @@ export const SelectWithAvatar_defaultProps = {
   isRestrictScroll: false,
   i18nKeys: {},
   needEffect: true,
-  isLoading: false,
-  customProps: {}
+  isLoading: false
 };
 export const SelectWithIcon_defaultProps = {
   isReadOnly: false,

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

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

package/lib/Button/__tests__/__snapshots__/Button.spec.js.snap

@@ -139,7 +139,7 @@ exports[`Button component Should render CustomStatusclassname of buttons - succe
       class="overlay"
     >
       <div
-        class="success"
+        class="successstate"
       >
         <div
           class="customStautusClassName successelement primarysuccess"
@@ -260,7 +260,7 @@ exports[`Button component Should render Status of buttons - success 1`] = `
       class="overlay"
     >
       <div
-        class="success"
+        class="successstate"
       >
         <div
           class="successelement primarysuccess"

package/lib/Button/css/Button.module.css

@@ -25,6 +25,7 @@
   /* button success status default variable */
   --button_success_border_color: var(--zdt_button_success_default_border);
 }
+
 .native {
   composes: varClass;
   /* transition: all var(--zd_transition2) ease 0s; */
@@ -130,22 +131,43 @@
   composes: container;
 }
 
-.plainprimary {
-  --button_text_color: var(--zdt_button_default_text);
+.plainprimary,
+.plaindanger,
+.plainsuccess,
+.plainsecondary {
   --button_padding: var(--zd_size5);
   --button_min_width: initial;
   --button_bg_color: var(--zdt_button_default_bg);
 }
+
+.plainprimary {
+  --button_text_color: var(--zdt_button_default_text);
+}
+
 .plainprimary:hover {
   --button_text_color: var(--zdt_button_plainprimary_hover_text);
 }
 
+.plaindanger {
+  --button_text_color: var(--zdt_button_danger_text);
+}
+
+.plaindanger:hover {
+  --button_text_color: var(--zdt_button_danger_hover_text);
+}
+
+.plainsuccess {
+  --button_text_color: var(--zdt_button_success_text);
+}
+
+.plainsuccess:hover {
+  --button_text_color: var(--zdt_button_success_hover_text);
+}
+
 .plainsecondary {
   --button_text_color: var(--zdt_button_secondary_text);
-  --button_padding: var(--zd_size5);
-  --button_min_width: initial;
-  --button_bg_color: var(--zdt_button_default_bg);
 }
+
 .plainsecondary:hover {
   --button_text_color: var(--zdt_button_secondary_hover_text);
 }
@@ -156,10 +178,12 @@
 .dangerfilled,
 .secondary,
 .secondaryfilled,
+.success,
 .successfilled,
 .tertiaryfilled {
   --button_border_width: 1px;
 }
+
 .primary:hover {
   --button_border_color: var(--zdt_button_primary_hover_border);
   --button_text_color: var(--zdt_button_primary_hover_text);
@@ -170,6 +194,7 @@
   --button_bg_color: var(--zdt_button_primaryfill_bg);
   --button_text_color: var(--zdt_button_primaryfill_text);
 }
+
 .primaryfilled:hover {
   --button_bg_color: var(--zdt_button_primaryfill_hover_bg);
 }
@@ -179,16 +204,29 @@
   --button_bg_color: var(--zdt_button_default_bg);
   --button_text_color: var(--zdt_button_danger_text);
 }
+
 .danger:hover {
   --button_border_color: var(--zdt_button_danger_hover_border);
   --button_text_color: var(--zdt_button_danger_hover_text);
 }
 
+.success {
+  --button_border_color: var(--zdt_button_success_border);
+  --button_bg_color: var(--zdt_button_default_bg);
+  --button_text_color: var(--zdt_button_success_text);
+}
+
+.success:hover {
+  --button_border_color: var(--zdt_button_success_hover_border);
+  --button_text_color: var(--zdt_button_success_hover_text);
+}
+
 .dangerfilled {
   --button_border_color: var(--zdt_button_primaryfill_border);
   --button_bg_color: var(--zdt_button_dangerfill_bg);
   --button_text_color: var(--zdt_button_dangerfill_text);
 }
+
 .dangerfilled:hover {
   --button_bg_color: var(--zdt_button_dangerfill_hover_bg);
 }
@@ -198,6 +236,7 @@
   --button_bg_color: var(--zdt_button_default_bg);
   --button_text_color: var(--zdt_button_secondary_text);
 }
+
 .secondary:hover {
   --button_border_color: var(--zdt_button_secondary_hover_border);
   --button_text_color: var(--zdt_button_secondary_hover_text);
@@ -208,6 +247,7 @@
   --button_bg_color: var(--zdt_button_secondaryfill_bg);
   --button_text_color: var(--zdt_button_secondary_text);
 }
+
 .secondaryfilled:hover {
   --button_text_color: var(--zdt_button_secondary_hover_text);
 }
@@ -217,6 +257,7 @@
   --button_bg_color: var(--zdt_button_successfill_bg);
   --button_text_color: var(--zdt_button_dangerfill_text);
 }
+
 .successfilled:hover {
   --button_border_color: var(--zdt_button_successfill_hover_border);
   --button_bg_color: var(--zdt_button_successfill_hover_bg);
@@ -227,6 +268,7 @@
   --button_bg_color: var(--zdt_button_tertiaryfill_bg);
   --button_text_color: var(--zdt_button_dangerfill_text);
 }
+
 .tertiaryfilled:hover {
   --button_bg_color: var(--zdt_button_tertiaryfill_hover_bg);
 }
@@ -326,18 +368,23 @@
 .loadingelement {
   --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
 }
+
 .primaryelement {
   --button_loading_bg_color: var(--zdt_button_loading_default_bg);
 }
+
 .primaryfilledelement {
   --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
 }
+
 .dangerelement {
   --button_loading_bg_color: var(--zdt_button_loading_default_bg);
 }
+
 .dangerfilledelement {
   --button_loading_bg_color: var(--zdt_button_dangerfill_bg);
 }
+
 .loadingelement:after,
 .primaryelement:after,
 .primaryfilledelement:after,
@@ -366,13 +413,13 @@
 
 .primaryelement:before {
   --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
-  --zdt_button_loading_linear_gradient:var(--zdt_button_loading_primary_linear_gradient);
+  --zdt_button_loading_linear_gradient: var(--zdt_button_loading_primary_linear_gradient);
   transform: rotateX(180deg);
 }
 
 .dangerelement:before {
   --button_loading_bg_color: var(--zdt_button_dangerfill_bg);
-  --zdt_button_loading_linear_gradient:var(--zdt_button_loading_danger_linear_gradient);
+  --zdt_button_loading_linear_gradient: var(--zdt_button_loading_danger_linear_gradient);
   transform: rotateX(180deg);
 }
 
@@ -447,7 +494,7 @@
     -webkit-transform: scaleX(-1) rotate(360deg);
   }
 }
-.success {
+.successstate {
   position: absolute;
   top: 50% ;
   left: 50% ;
@@ -523,6 +570,6 @@
   }
 }
 
-.loader{
-  color:var(--dot_mirror)
+.loader {
+  color: var(--dot_mirror)
 }

package/lib/Button/css/cssJSLogic.js

@@ -31,7 +31,7 @@ function cssJSLogic(_ref) {
   var paletteLower = palette.toLowerCase();
   var statusLower = status.toLowerCase();
   var buttonClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, customButton, !!customButton), _defineProperty(_compileClassNames, style.bold, isBold), _defineProperty(_compileClassNames, style["default"], !needAppearance), _defineProperty(_compileClassNames, style[paletteLower], needAppearance), _defineProperty(_compileClassNames, style.rounded, needAppearance && rounded), _defineProperty(_compileClassNames, style[size.toLowerCase()], needAppearance && !children), _defineProperty(_compileClassNames, style["".concat(size, "Btn")], needAppearance && children), _defineProperty(_compileClassNames, style["".concat(size, "Btn").concat(paletteLower)], needAppearance && children && rounded), _defineProperty(_compileClassNames, style.loader, !!needAppearance && statusLower !== 'none'), _compileClassNames));
-  var loaderParentClass = (0, _utils.compileClassNames)((_compileClassNames2 = {}, _defineProperty(_compileClassNames2, customStatusSize, !!customStatusSize), _defineProperty(_compileClassNames2, style.loading, statusLower === 'loading'), _defineProperty(_compileClassNames2, style["".concat(size, "loading")], statusLower === 'loading'), _defineProperty(_compileClassNames2, style.success, statusLower != 'loading'), _compileClassNames2));
+  var loaderParentClass = (0, _utils.compileClassNames)((_compileClassNames2 = {}, _defineProperty(_compileClassNames2, customStatusSize, !!customStatusSize), _defineProperty(_compileClassNames2, style.loading, statusLower === 'loading'), _defineProperty(_compileClassNames2, style["".concat(size, "loading")], statusLower === 'loading'), _defineProperty(_compileClassNames2, style.successstate, statusLower != 'loading'), _compileClassNames2));
   var loaderChildClass = (0, _utils.compileClassNames)((_compileClassNames3 = {}, _defineProperty(_compileClassNames3, customStatus, !!customStatus), _defineProperty(_compileClassNames3, style.loadingelement, statusLower === 'loading'), _defineProperty(_compileClassNames3, style["".concat(paletteLower, "element")], statusLower === 'loading'), _defineProperty(_compileClassNames3, style.successelement, statusLower != 'loading'), _defineProperty(_compileClassNames3, style["".concat(paletteLower, "success")], statusLower != 'loading'), _compileClassNames3));
   return {
     buttonClass: buttonClass,

package/lib/Button/props/propTypes.js

@@ -18,7 +18,7 @@ var propTypes = {
   isBold: _propTypes["default"].bool,
   needAppearance: _propTypes["default"].bool,
   onClick: _propTypes["default"].func,
-  palette: _propTypes["default"].oneOf(['plainPrimary', 'plainSecondary', 'primary', 'primaryFilled', 'danger', 'dangerFilled', 'secondary', 'secondaryFilled', 'successFilled', 'info', 'tertiaryFilled']),
+  palette: _propTypes["default"].oneOf(['plainPrimary', 'plainSecondary', 'plainDanger', 'plainSuccess', 'primary', 'primaryFilled', 'danger', 'dangerFilled', 'secondary', 'secondaryFilled', 'success', 'successFilled', 'info', 'tertiaryFilled']),
   rounded: _propTypes["default"].bool,
   size: _propTypes["default"].oneOf(['small', 'medium', 'large', 'xlarge']),
   status: _propTypes["default"].oneOf(['loading', 'success', 'none']),

package/lib/ListItem/ListContainer.js

@@ -58,7 +58,8 @@ var ListContainer = function ListContainer(props) {
       onClick = props.onClick,
       onMouseEnter = props.onMouseEnter,
       onMouseOver = props.onMouseOver,
-      eleRef = props.eleRef;
+      eleRef = props.eleRef,
+      align = props.align;
   var responsiveFunc = (0, _react.useCallback)(function (_ref) {
     var mediaQueryOR = _ref.mediaQueryOR,
         isTouchDevice = _ref.isTouchDevice;
@@ -102,7 +103,7 @@ var ListContainer = function ListContainer(props) {
     "aria-selected": ariaSelected,
     "aria-label": ariaLabel,
     isCover: false,
-    align: "vertical",
+    align: align,
     alignBox: "row",
     className: "".concat(_ListItemModule["default"].list, " ").concat(_ListItemModule["default"][size], " ").concat(mobileToTab && isTouchDevice ? _ListItemModule["default"].responsiveHeight : '', " ").concat(_ListItemModule["default"][palette], " ").concat(active ? _ListItemModule["default"]["active".concat(palette)] : highlight && !isDisabled ? _ListItemModule["default"]["".concat(palette, "Hover")] : '', " ").concat(autoHover && !isDisabled ? _ListItemModule["default"]["".concat(palette, "Effect")] : '', " ").concat(needTick ? _ListItemModule["default"]["".concat(size, "withTick")] : '', " ").concat(isDisabled ? (0, _CssProvider["default"])('isDisable') : '', " ").concat(needBorder ? active ? _ListItemModule["default"].activewithBorder : _ListItemModule["default"].withBorder : '', " ").concat(customClass),
     dataId: dataId,

package/lib/ListItem/ListItem.js

@@ -150,7 +150,8 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
         autoHover: autoHover,
         needTick: needTick,
         needBorder: needBorder,
-        customClass: "".concat(needMultiLineText ? _ListItemModule["default"].txtAlignBaseLine + ' ' + _ListItemModule["default"].autoHeight : '', " ").concat(customListItem),
+        customClass: "".concat(needMultiLineText ? _ListItemModule["default"].autoHeight : '', " ").concat(customListItem),
+        align: needMultiLineText ? 'baseline' : 'vertical',
         dataId: dataIdString,
         dataSelectorId: "".concat(dataSelectorId),
         isLink: isLink,
@@ -171,7 +172,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, " ").concat(needMultiLineText ? _ListItemModule["default"].tickIconCenter : ''),
+        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,7 +73,7 @@
   line-height: 1.5385;
 }
 .multiLineValue{
-  composes: listItemClamp from '~@zohodesk/components/es/common/common.module.css';
+  composes: lineClamp from '../common/common.module.css';
 }
 .iconBox {
   width: var(--zd_size20) ;
@@ -203,15 +203,12 @@
   padding-bottom: var(--zd_size10) ;
 }
 .autoHeight {
-  height: auto ;
+  --listitem_height: auto;
 }
 .tickIconCenter {
   top: 50% ;
   transform: translateY(-50%);
 }
-.txtAlignBaseLine {
-  align-items: baseline;
-}
-.alignSelfTop {
-  align-self: start;
+.alignItemBaseline {
+  align-self: baseline;
 }

package/lib/ListItem/ListItemWithAvatar.js

@@ -172,7 +172,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         title: null,
         customProps: ListItemProps
       }, ContainerProps), name || imgSrc ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(needMultiLineText ? _ListItemModule["default"].alignSelfTop : '', " ").concat(_ListItemModule["default"].leftAvatar)
+        className: "".concat(needMultiLineText ? _ListItemModule["default"].alignItemBaseline : '', " ").concat(_ListItemModule["default"].leftAvatar)
       }, isTeam ? /*#__PURE__*/_react["default"].createElement(_AvatarTeam["default"], _extends({
         name: name,
         size: "small",

package/lib/ListItem/ListItemWithIcon.js

@@ -147,7 +147,8 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         autoHover: autoHover,
         needTick: needTick,
         needBorder: needBorder,
-        customClass: "".concat(needMultiLineText ? _ListItemModule["default"].autoHeight : '', " ").concat(needMultiLineText && iconClass && !iconName ? _ListItemModule["default"].txtAlignBaseLine : '', " ").concat(customClass),
+        customClass: "".concat(needMultiLineText ? _ListItemModule["default"].autoHeight : '', " ").concat(customClass),
+        align: needMultiLineText && iconClass && !iconName ? 'baseline' : 'vertical',
         dataId: dataIdString,
         dataSelectorId: dataSelectorId,
         isLink: isLink,

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 = {

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 = {

package/lib/MultiSelect/AdvancedGroupMultiSelect.js

@@ -970,7 +970,8 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
           getTargetRef = _this$props8.getTargetRef,
           isFocus = _this$props8.isFocus,
           customProps = _this$props8.customProps;
-      var suggestionsProps = customProps.suggestionsProps;
+      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;
@@ -1147,7 +1148,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
               role: 'option'
             },
             dataId: "".concat(dataId, "_Options")
-          }, suggestionsProps)));
+          }, SuggestionsProps)));
         }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           options: revampedGroups,
           searchString: searchStr,

package/lib/MultiSelect/MultiSelect.js

@@ -1091,8 +1091,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           selectAllText = _this$props15.selectAllText,
           needSelectAll = _this$props15.needSelectAll,
           customProps = _this$props15.customProps;
-      var _customProps$suggesti = customProps.suggestionsProps,
-          suggestionsProps = _customProps$suggesti === void 0 ? {} : _customProps$suggesti;
+      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,
@@ -1182,7 +1182,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         a11y: {
           role: 'option'
         }
-      }, suggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+      }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
         isLoading: isFetchingOptions,
         options: options,
         searchString: searchStr,

package/lib/MultiSelect/Suggestions.js

@@ -88,7 +88,8 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
           needMultiLineText = _this$props.needMultiLineText;
       var ariaParentRole = a11y.ariaParentRole,
           ariaMultiselectable = a11y.ariaMultiselectable;
-      var containerClass = customClass.containerClass;
+      var _customClass$containe = customClass.containerClass,
+          containerClass = _customClass$containe === void 0 ? '' : _customClass$containe;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         isCover: false,
         role: ariaParentRole,
@@ -119,7 +120,8 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
         });
 
         var commonProps = _objectSpread({
-          isDisabled: isDisabled
+          isDisabled: isDisabled,
+          needMultiLineText: needMultiLineText
         }, listItemCustomProps);
 
         if (listItemProps) {
@@ -147,8 +149,7 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
             size: listItemSize,
             avatarPalette: avatarPalette,
             palette: palette,
-            a11y: list_a11y,
-            needMultiLineText: needMultiLineText
+            a11y: list_a11y
           }));
         } else if (optionType === 'icon') {
           return /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], _extends({}, commonProps, {
@@ -168,8 +169,7 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
             iconSize: iconSize,
             size: listItemSize,
             palette: palette,
-            a11y: list_a11y,
-            needMultiLineText: needMultiLineText
+            a11y: list_a11y
           }));
         }
 
@@ -188,8 +188,7 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
           active: isActive,
           size: listItemSize,
           palette: palette,
-          a11y: list_a11y,
-          needMultiLineText: needMultiLineText
+          a11y: list_a11y
         }));
       })));
     }

package/lib/MultiSelect/props/defaultProps.js

@@ -179,9 +179,7 @@ var SelectedOptions_defaultProps = {
 exports.SelectedOptions_defaultProps = SelectedOptions_defaultProps;
 var Suggestions_defaultProps = {
   a11y: {},
-  customClass: {
-    containerClass: ''
-  },
+  customClass: {},
   needMultiLineText: false
 };
 exports.Suggestions_defaultProps = Suggestions_defaultProps;

package/lib/MultiSelect/props/propTypes.js

@@ -130,7 +130,7 @@ var MultiSelect_propTypes = {
   ariaErrorId: _propTypes["default"].string,
   customProps: _propTypes["default"].shape({
     TextBoxIconProps: _propTypes["default"].object,
-    suggestionsProps: _propTypes["default"].object
+    SuggestionsProps: _propTypes["default"].object
   }),
   isFocus: _propTypes["default"].bool
 };
@@ -277,7 +277,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, "customProps", _propTypes["default"].object), _AdvancedGroupMultiSe);
+}, _defineProperty(_AdvancedGroupMultiSe, "dataSelectorId", _propTypes["default"].string), _defineProperty(_AdvancedGroupMultiSe, "isFocus", _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/RippleEffect/RippleEffect.module.css

@@ -90,3 +90,19 @@
 .notAllowed {
   cursor: not-allowed;
 }
+.secondary.defaultHover, .hoverEffect:hover.secondary.borderHover
+/* .hoverEffect:focus.secondary.borderHover  */
+{
+  border-color: var(--zdt_rippleeffect_secondary_border);
+}
+.hoverEffect:hover.secondary.bgHover
+/* .hoverEffect:focus.secondary.bgHover */
+ {
+  background-color: var(--zdt_rippleeffect_secondary_bg);
+}
+.secondary.active {
+  background-color: var(--zdt_rippleeffect_secondary_active_bg);
+}
+.secondary.active.border {
+  border-color: var(--zdt_rippleeffect_secondary_active_border);
+}