@zohodesk/components 1.0.0-temp-192.1 → 1.0.0-temp-195

package/lib/ListItem/ListItem.module.css

@@ -17,9 +17,8 @@
 }[dir=ltr] .varClass {
   --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
 }[dir=rtl] .varClass {
-  --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
+  --listitem_avatar_margin: 0 0 0 var(--zd_size15);
 }
-
 .list {
   composes: varClass;
   position: relative;
@@ -35,84 +34,62 @@
   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 0 0 1px  ;
+  --listitem_border_width: 0 1px 0 0;
 }
-
 .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_size3) var(--zd_size7) var(--zd_size5);
+  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3);
 }
-
 .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_size3) var(--zd_size10) var(--zd_size25);
+  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
 }
-
 .value,
 .children {
   composes: dotted from '../common/common.module.css';
 }
-
-.value {
+.value, .multiLineValue {
   line-height: 1.5385;
 }
-
-.multiLineValue {
-  line-height: 1.5385;
+.multiLineValue{
   word-break: break-word;
-  -webkit-line-clamp: 5;
-  composes: clamp from '../common/common.module.css';
+  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);
 }
@@ -120,78 +97,61 @@
 .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 0 0 1px  ;
+  --listitem_border_width: 0 1px 0 0;
 }
 
 .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);
 }
@@ -210,63 +170,36 @@
 [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_size39) var(--zd_size7) var(--zd_size5);
+  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size39);
 }
-
 [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_size39) var(--zd_size7) var(--zd_size20);
+  --listitem_padding: var(--zd_size7) var(--zd_size20) var(--zd_size7) var(--zd_size39);
 }
-
 [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_size39) var(--zd_size10) var(--zd_size25);
+  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
 }
-
 .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: "".concat(needMultiLineText ? _ListItemModule["default"].autoHeight : '', " ").concat(customListItem),
+        customClass: 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: "".concat(needMultiLineText ? _ListItemModule["default"].alignSelfTop : '', " ").concat(_ListItemModule["default"].leftAvatar)
+        className: _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: "".concat(_ListItemModule["default"].tickIcon, " ").concat(needMultiLineText ? _ListItemModule["default"].tickIconCenter : ''),
+        className: _ListItemModule["default"].tickIcon,
         "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: "".concat(needMultiLineText ? _ListItemModule["default"].autoHeight : '', " ").concat(needMultiLineText && iconClass && !iconName ? _ListItemModule["default"].txtAlignBaseLine : '', " ").concat(customClass),
+        customClass: 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: "".concat(_ListItemModule["default"].tickIcon, " ").concat(needMultiLineText ? _ListItemModule["default"].tickIconCenter : ''),
+        className: _ListItemModule["default"].tickIcon,
         "aria-hidden": ariaHidden,
         dataId: "".concat(dataIdString, "_tickIcon"),
         dataSelectorId: "".concat(dataSelectorId, "_tickIcon")

package/lib/MultiSelect/AdvancedGroupMultiSelect.js

@@ -53,8 +53,6 @@ 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."); }
@@ -962,9 +960,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
           a11y = _this$props8.a11y,
           palette = _this$props8.palette,
           needEffect = _this$props8.needEffect,
-          autoComplete = _this$props8.autoComplete,
-          customProps = _this$props8.customProps;
-      var suggestionsProps = customProps.suggestionsProps;
+          autoComplete = _this$props8.autoComplete;
       var _i18nKeys = i18nKeys,
           _i18nKeys$clearText = _i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? 'Clear all' : _i18nKeys$clearText;
@@ -1120,7 +1116,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
             a11y: {
               role: 'heading'
             }
-          })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
+          })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
             suggestions: suggestions,
             selectedOptions: selectedOptionIds,
             getRef: _this5.suggestionItemRef,
@@ -1132,7 +1128,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
             a11y: {
               role: 'option'
             }
-          }, suggestionsProps)));
+          }));
         }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           options: revampedGroups,
           searchString: searchStr,

package/lib/MultiSelect/AdvancedMultiSelect.js

@@ -435,11 +435,14 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           needEffect = _this$props5.needEffect,
           disabledOptions = _this$props5.disabledOptions,
           isLoading = _this$props5.isLoading,
-          dataSelectorId = _this$props5.dataSelectorId;
+          dataSelectorId = _this$props5.dataSelectorId,
+          customClass = _this$props5.customClass;
       var _customProps$Suggesti = customProps.SuggestionsProps,
           SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti,
           _customProps$DropBoxP = customProps.DropBoxProps,
           DropBoxProps = _customProps$DropBoxP === void 0 ? {} : _customProps$DropBoxP;
+      var _customClass$containe = customClass.containerClass,
+          containerClass = _customClass$containe === void 0 ? '' : _customClass$containe;
       var _i18nKeys = i18nKeys,
           _i18nKeys$clearText = _i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? 'Clear all' : _i18nKeys$clearText;
@@ -473,7 +476,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
 
       var isShowClearIcon = !isReadOnly && !isDisabled && isShowClear;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
+        className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : '', " ").concat(containerClass),
         "data-id": dataIdMultiSelectComp,
         "data-test-id": dataIdMultiSelectComp,
         "data-title": isDisabled ? title : null,

package/lib/MultiSelect/MultiSelect.js

@@ -57,8 +57,6 @@ 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."); }
@@ -1070,10 +1068,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           boxSize = _this$props15.boxSize,
           isLoading = _this$props15.isLoading,
           selectAllText = _this$props15.selectAllText,
-          needSelectAll = _this$props15.needSelectAll,
-          customProps = _this$props15.customProps;
-      var _customProps$suggesti = customProps.suggestionsProps,
-          suggestionsProps = _customProps$suggesti === void 0 ? {} : _customProps$suggesti;
+          needSelectAll = _this$props15.needSelectAll;
       var _this$state9 = this.state,
           selectedOptions = _this$state9.selectedOptions,
           searchStr = _this$state9.searchStr,
@@ -1145,7 +1140,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"], _extends({
+      }, searchText) : suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
         suggestions: suggestions,
         getRef: this.suggestionItemRef,
         hoverOption: hoverOption,
@@ -1158,7 +1153,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         a11y: {
           role: 'option'
         }
-      }, suggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+      }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
         isLoading: isFetchingOptions,
         options: options,
         searchString: searchStr,

package/lib/MultiSelect/Suggestions.js

@@ -83,8 +83,7 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
           avatarPalette = _this$props.avatarPalette,
           palette = _this$props.palette,
           htmlId = _this$props.htmlId,
-          a11y = _this$props.a11y,
-          needMultiLineText = _this$props.needMultiLineText;
+          a11y = _this$props.a11y;
       var ariaParentRole = a11y.ariaParentRole,
           ariaMultiselectable = a11y.ariaMultiselectable;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
@@ -144,8 +143,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, {
@@ -165,8 +163,7 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
             iconSize: iconSize,
             size: listItemSize,
             palette: palette,
-            a11y: list_a11y,
-            needMultiLineText: needMultiLineText
+            a11y: list_a11y
           }));
         }
 
@@ -185,8 +182,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

@@ -43,8 +43,7 @@ var AdvancedGroupMultiSelect_defaultProps = {
   needEffect: true,
   palette: 'default',
   isLoading: false,
-  dataSelectorId: 'advancedGroupMultiSelect',
-  customProps: {}
+  dataSelectorId: 'advancedGroupMultiSelect'
 };
 exports.AdvancedGroupMultiSelect_defaultProps = AdvancedGroupMultiSelect_defaultProps;
 var AdvancedMultiSelect_defaultProps = {
@@ -76,7 +75,8 @@ var AdvancedMultiSelect_defaultProps = {
   customProps: {},
   needEffect: true,
   isLoading: false,
-  dataSelectorId: 'advancedMultiSelect'
+  dataSelectorId: 'advancedMultiSelect',
+  customClass: {}
 };
 exports.AdvancedMultiSelect_defaultProps = AdvancedMultiSelect_defaultProps;
 var EmptyState_defaultProps = {
@@ -122,8 +122,7 @@ var MultiSelect_defaultProps = {
   keepSelectedOptions: false,
   selectedOptionsCount: 0,
   cardHeaderName: '',
-  needResponsive: true,
-  customProps: {}
+  needResponsive: true
 };
 exports.MultiSelect_defaultProps = MultiSelect_defaultProps;
 var MultiSelectHeader_defaultProps = {
@@ -159,8 +158,8 @@ var MultiSelectWithAvatar_defaultProps = {
   isLoading: false,
   dataSelectorId: 'multiSelectWithAvatar',
   keepSelectedOptions: false,
-  needResponsive: true,
-  customProps: {}
+  customProps: {},
+  needResponsive: true
 };
 exports.MultiSelectWithAvatar_defaultProps = MultiSelectWithAvatar_defaultProps;
 var SelectedOptions_defaultProps = {
@@ -168,7 +167,6 @@ var SelectedOptions_defaultProps = {
 };
 exports.SelectedOptions_defaultProps = SelectedOptions_defaultProps;
 var Suggestions_defaultProps = {
-  a11y: {},
-  needMultiLineText: false
+  a11y: {}
 };
 exports.Suggestions_defaultProps = Suggestions_defaultProps;

package/lib/MultiSelect/props/propTypes.js

@@ -7,8 +7,6 @@ exports.Suggestions_propTypes = exports.SelectedOptions_propTypes = exports.Mult
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _AdvancedGroupMultiSe;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -123,8 +121,7 @@ var MultiSelect_propTypes = {
   needSelectAll: _propTypes["default"].bool,
   selectAllText: _propTypes["default"].string,
   setAriaId: _propTypes["default"].string,
-  ariaErrorId: _propTypes["default"].string,
-  customProps: _propTypes["default"].string
+  ariaErrorId: _propTypes["default"].string
 };
 exports.MultiSelect_propTypes = MultiSelect_propTypes;
 var MultiSelectHeader_propTypes = {
@@ -193,11 +190,11 @@ var Suggestions_propTypes = {
     logo: _propTypes["default"].string,
     optionType: _propTypes["default"].string,
     listItemProps: _propTypes["default"].object
-  })),
-  needMultiLineText: _propTypes["default"].bool
+  }))
 };
 exports.Suggestions_propTypes = Suggestions_propTypes;
-var AdvancedGroupMultiSelect_propTypes = (_AdvancedGroupMultiSe = {
+
+var AdvancedGroupMultiSelect_propTypes = _defineProperty({
   animationStyle: _propTypes["default"].string,
   autoComplete: _propTypes["default"].bool,
   borderColor: _propTypes["default"].oneOf(['transparent', 'default']),
@@ -261,7 +258,8 @@ var AdvancedGroupMultiSelect_propTypes = (_AdvancedGroupMultiSe = {
   needToCloseOnSelect: _propTypes["default"].func,
   searchStr: _propTypes["default"].string,
   children: _propTypes["default"].node
-}, _defineProperty(_AdvancedGroupMultiSe, "dataSelectorId", _propTypes["default"].string), _defineProperty(_AdvancedGroupMultiSe, "customProps", _propTypes["default"].string), _AdvancedGroupMultiSe);
+}, "dataSelectorId", _propTypes["default"].string);
+
 exports.AdvancedGroupMultiSelect_propTypes = AdvancedGroupMultiSelect_propTypes;
 
 var AdvancedMultiSelect_propTypes = _objectSpread(_objectSpread({}, MultiSelect_propTypes), {}, {
@@ -336,7 +334,8 @@ var AdvancedMultiSelect_propTypes = _objectSpread(_objectSpread({}, MultiSelect_
     DropBoxProps: _propTypes["default"].object
   }),
   isLoading: _propTypes["default"].bool,
-  dataSelectorId: _propTypes["default"].string
+  dataSelectorId: _propTypes["default"].string,
+  customClass: _propTypes["default"].object
 });
 
 exports.AdvancedMultiSelect_propTypes = AdvancedMultiSelect_propTypes;

package/lib/Select/GroupSelect.js

@@ -51,8 +51,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-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."); }
@@ -662,10 +660,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           htmlId = _this$props9.htmlId,
           iconOnHover = _this$props9.iconOnHover,
           isLoading = _this$props9.isLoading,
-          dataSelectorId = _this$props9.dataSelectorId,
-          customProps = _this$props9.customProps;
-      var _customProps$suggesti = customProps.suggestionsProps,
-          suggestionsProps = _customProps$suggesti === void 0 ? {} : _customProps$suggesti;
+          dataSelectorId = _this$props9.dataSelectorId;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -825,7 +820,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
             a11y: {
               role: 'heading'
             }
-          })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
+          })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
             activeId: selectedId,
             suggestions: options,
             getRef: _this7.suggestionItemRef,
@@ -840,7 +835,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
               ariaParentRole: 'listbox',
               role: 'option'
             }
-          }, suggestionsProps)));
+          }));
         }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           options: revampedGroups,
           searchString: searchStr,

package/lib/Select/SelectWithAvatar.js

@@ -51,8 +51,6 @@ 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); } }
@@ -210,10 +208,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           htmlId = _this$props.htmlId,
           needEffect = _this$props.needEffect,
           isLoading = _this$props.isLoading,
-          dataSelectorId = _this$props.dataSelectorId,
-          customProps = _this$props.customProps;
-      var _customProps$suggesti = customProps.suggestionsProps,
-          suggestionsProps = _customProps$suggesti === void 0 ? {} : _customProps$suggesti;
+          dataSelectorId = _this$props.dataSelectorId;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -346,7 +341,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           a11y: {
             role: 'heading'
           }
-        })) : null, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
+        })) : null, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
           activeId: selectedId,
           suggestions: suggestions,
           getRef: _this2.suggestionItemRef,
@@ -362,7 +357,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
             ariaParentRole: 'listbox',
             role: 'option'
           }
-        }, suggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+        }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           isLoading: isFetchingOptions,
           options: options,
           searchString: searchStr,