@zohodesk/components 1.4.16 → 1.4.18

package/lib/MultiSelect/MultiSelect.js

@@ -163,6 +163,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
     _this.handleScroll = _this.handleScroll.bind(_assertThisInitialized(_this));
     _this.handleScrollFuncCall = (0, _Common.debounce)(_this.handleScrollFuncCall.bind(_assertThisInitialized(_this)), 500);
     _this.getVirtualizerPublicMethods = _this.getVirtualizerPublicMethods.bind(_assertThisInitialized(_this));
+    _this.scrollToHighlightedIndex = _this.scrollToHighlightedIndex.bind(_assertThisInitialized(_this));
     _this.setSuggestionsVirtualizerContainerRefFunction = _this.setSuggestionsVirtualizerContainerRefFunction.bind(_assertThisInitialized(_this));
     return _this;
   }
@@ -227,20 +228,52 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       }
     }
   }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
+    key: "scrollToHighlightedIndex",
+    value: function scrollToHighlightedIndex() {
+      var suggestionContainer = this.suggestionContainer,
+          selectedOptionContainer = this.selectedOptionContainer,
+          suggestionsOrder = this.suggestionsOrder;
+
+      if (!suggestionContainer) {
+        return;
+      }
+
       var _this$state = this.state,
           hoverOption = _this$state.hoverOption,
           highLightedSelectOptions = _this$state.highLightedSelectOptions,
-          selectedOptions = _this$state.selectedOptions,
-          searchStr = _this$state.searchStr;
+          selectedOptions = _this$state.selectedOptions;
+      var isVirtualizerEnabled = this.props.isVirtualizerEnabled;
+      var hoverId = suggestionsOrder[hoverOption] || '';
+      var lastHighLightedSelectOption = highLightedSelectOptions.slice(-1).length ? highLightedSelectOptions.slice(-1)[0] : null;
+      var selectedOption = this["selectedOption_".concat(lastHighLightedSelectOption)];
+      selectedOptions.length && selectedOption && (0, _Common.scrollTo)(selectedOptionContainer, selectedOption);
+      var selectedSuggestion = this["suggestion_".concat(hoverId)];
+
+      if (selectedSuggestion) {
+        (0, _Common.scrollTo)(suggestionContainer, selectedSuggestion);
+      } else {
+        // Hack: Virtualizer not having options order properly all the time, so scrollToIndex method used here.
+        if (isVirtualizerEnabled && !!this.virtualizerMethods) {
+          this.virtualizerMethods.scrollToIndex(hoverOption, 'auto', {
+            speed: 0,
+            duration: 0,
+            onComplete: function onComplete() {
+              (0, _Common.scrollTo)(suggestionContainer, selectedSuggestion);
+            }
+          });
+        }
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      var searchStr = this.state.searchStr;
       var _this$props2 = this.props,
           needLocalSearch = _this$props2.needLocalSearch,
           isPopupOpen = _this$props2.isPopupOpen,
           onDropBoxClose = _this$props2.onDropBoxClose,
           onDropBoxOpen = _this$props2.onDropBoxOpen,
-          isSearchClearOnClose = _this$props2.isSearchClearOnClose,
-          isVirtualizerEnabled = _this$props2.isVirtualizerEnabled; //handle dropbox open & close
+          isSearchClearOnClose = _this$props2.isSearchClearOnClose; //handle dropbox open & close
 
       if (prevProps.isPopupOpen !== isPopupOpen) {
         isPopupOpen && onDropBoxOpen && this.handleFetchOptions(onDropBoxOpen, searchStr);
@@ -252,22 +285,10 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           isSearchClearOnClose && searchStr && this.handleSearch('');
           onDropBoxClose && onDropBoxClose();
         }
-      } //scrollTo handling
-
+      }
 
-      if (isVirtualizerEnabled && !!this.virtualizerMethods) {
-        var position = prevState.hoverOption > hoverOption ? 'top' : 'bottom';
-        this.virtualizerMethods.getElementVisiblePercentage(hoverOption) < 50 && this.virtualizerMethods.scrollToIndex(hoverOption, position);
-      } else {
-        var suggestionContainer = this.suggestionContainer,
-            selectedOptionContainer = this.selectedOptionContainer,
-            suggestionsOrder = this.suggestionsOrder;
-        var hoverId = suggestionsOrder[hoverOption] || '';
-        var selectedSuggestion = this["suggestion_".concat(hoverId)];
-        var lastHighLightedSelectOption = highLightedSelectOptions.slice(-1).length ? highLightedSelectOptions.slice(-1)[0] : null;
-        var selectedOption = this["selectedOption_".concat(lastHighLightedSelectOption)];
-        isPopupOpen && (0, _Common.scrollTo)(suggestionContainer, selectedSuggestion);
-        selectedOptions.length && selectedOption && (0, _Common.scrollTo)(selectedOptionContainer, selectedOption);
+      if (isPopupOpen) {
+        this.scrollToHighlightedIndex();
       } //When suggestions length less than 5, getNextOptions function call
 
 
@@ -309,6 +330,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       var options = props.options,
           valueField = props.valueField,
           textField = props.textField,
+          secondaryField = props.secondaryField,
           prefixText = props.prefixText,
           disabledOptions = props.disabledOptions,
           allowValueFallback = props.allowValueFallback,
@@ -321,6 +343,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         optionType: 'default',
         disabledOptions: disabledOptions,
         allowValueFallback: allowValueFallback,
+        secondaryField: secondaryField,
         searchFields: searchFields
       });
     }
@@ -1140,6 +1163,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           isLoading = _this$props15.isLoading,
           selectAllText = _this$props15.selectAllText,
           needSelectAll = _this$props15.needSelectAll,
+          customProps = _this$props15.customProps,
           isVirtualizerEnabled = _this$props15.isVirtualizerEnabled,
           limit = _this$props15.limit;
       var _this$state9 = this.state,
@@ -1163,6 +1187,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         noMoreText: i18nKeys.noMoreText || noMoreOptionsMessage
       });
       var isModel = (0, _isMobilePopover["default"])(needResponsive);
+      var SuggestionsProps = customProps.SuggestionsProps;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(disableAction ? (0, _CssProvider["default"])('isBlock') : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
@@ -1175,7 +1200,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         boxPosition: position || "".concat(defaultDropBoxPosition),
         getRef: getContainerRef,
         isActive: isPopupReady,
-        isAnimate: isAnimate,
+        isAnimate: isAnimate && !isVirtualizerEnabled // Note: Virtualizer gets element height at mount itself which causes issue with options height
+        ,
         isArrow: false,
         onClick: removeClose,
         needResponsive: needResponsive,
@@ -1220,7 +1246,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({
         key: searchStr.trim(),
         suggestions: suggestions,
         isVirtualizerEnabled: isVirtualizerEnabled,
@@ -1239,7 +1265,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         },
         limit: limit,
         limitReachedMessage: limitReachedMessage
-      }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+      }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
         isLoading: isFetchingOptions,
         options: options,
         searchString: searchStr,

package/lib/MultiSelect/Suggestions.js

@@ -213,7 +213,8 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
         active: isActive,
         size: listItemSize,
         palette: palette,
-        a11y: list_a11y
+        a11y: list_a11y,
+        secondaryValue: secondaryValue
       }));
     }
   }, {

package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap

@@ -35,19 +35,19 @@ exports[`MultiSelectHeader rendering the basic value 1`] = `
       </div>
     </div>
     <div
-      class="grow basis shrinkOn"
+      class="leftBox grow basis shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover coldir"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
+        class="titleBox shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
       >
         <div
-          class="value shrinkOff"
+          class="value basisAuto shrinkOn"
           data-id="MultiSelectHeader_selectAll_Text"
           data-selector-id="box"
           data-test-id="MultiSelectHeader_selectAll_Text"

package/lib/MultiSelect/props/propTypes.js

@@ -139,7 +139,8 @@ var MultiSelect_propTypes = {
   allowValueFallback: _propTypes["default"].bool,
   renderCustomClearComponent: _propTypes["default"].func,
   renderCustomToggleIndicator: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
-  limit: _propTypes["default"].number
+  limit: _propTypes["default"].number,
+  secondaryField: _propTypes["default"].string
 };
 exports.MultiSelect_propTypes = MultiSelect_propTypes;
 var MultiSelectHeader_propTypes = {
@@ -160,8 +161,7 @@ var MultiSelectWithAvatar_propTypes = _objectSpread({
   customProps: _propTypes["default"].shape({
     SuggestionsProps: _propTypes["default"].object,
     DropBoxProps: _propTypes["default"].object
-  }),
-  secondaryField: _propTypes["default"].string
+  })
 }, MultiSelect_propTypes);
 
 exports.MultiSelectWithAvatar_propTypes = MultiSelectWithAvatar_propTypes;
@@ -309,7 +309,6 @@ var AdvancedMultiSelect_propTypes = _objectSpread(_objectSpread({}, MultiSelect_
   prefixText: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
   //For grouping multiSelect
   optionType: _propTypes["default"].oneOf(['default', 'avatar', 'icon']),
-  secondaryField: _propTypes["default"].string,
   dataIdClearIcon: _propTypes["default"].string,
   dataIdLoading: _propTypes["default"].string,
   dataIdMultiSelectComp: _propTypes["default"].string,

package/lib/Select/GroupSelect.js

@@ -699,7 +699,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
       var _customProps$TextBoxI = customProps.TextBoxIconProps,
           TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI,
           _customProps$TextBoxP = customProps.TextBoxProps,
-          TextBoxProps = _customProps$TextBoxP === void 0 ? {} : _customProps$TextBoxP;
+          TextBoxProps = _customProps$TextBoxP === void 0 ? {} : _customProps$TextBoxP,
+          SuggestionsProps = customProps.SuggestionsProps;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : '', " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverStyle : ''),
         "data-id": dataIdSlctComp,
@@ -846,7 +847,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
             a11y: {
               role: 'heading'
             }
-          })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+          })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
             activeId: selectedId,
             suggestions: options,
             getRef: _this7.suggestionItemRef,
@@ -862,7 +863,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
               role: 'option'
             },
             dataId: "".concat(dataId, "_Options")
-          }));
+          }, SuggestionsProps)));
         }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           options: revampedGroups,
           searchString: searchStr,

package/lib/Select/Select.js

@@ -169,6 +169,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
     _this.handleExposePopupHandlers = _this.handleExposePopupHandlers.bind(_assertThisInitialized(_this));
     _this.handleGetAddNewOptionText = _this.handleGetAddNewOptionText.bind(_assertThisInitialized(_this));
     _this.getVirtualizerPublicMethods = _this.getVirtualizerPublicMethods.bind(_assertThisInitialized(_this));
+    _this.scrollToHighlightedIndex = _this.scrollToHighlightedIndex.bind(_assertThisInitialized(_this));
     _this.setSuggestionsVirtualizerContainerRefFunction = _this.setSuggestionsVirtualizerContainerRefFunction.bind(_assertThisInitialized(_this));
     _this.valueInputTypeString = '';
     _this.valueInputSearchString = '';
@@ -234,13 +235,42 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         selectedValueIndex: hoverIndex
       });
     }
+  }, {
+    key: "scrollToHighlightedIndex",
+    value: function scrollToHighlightedIndex() {
+      var suggestionContainer = this.suggestionContainer,
+          optionsOrder = this.optionsOrder;
+
+      if (!suggestionContainer) {
+        return;
+      }
+
+      var hoverIndex = this.state.hoverIndex;
+      var isVirtualizerEnabled = this.props.isVirtualizerEnabled;
+      var hoverId = (0, _Common.getIsEmptyValue)(optionsOrder[hoverIndex]) ? '' : optionsOrder[hoverIndex];
+      var selSuggestion = this["suggestion_".concat(hoverId)];
+
+      if (selSuggestion) {
+        (0, _Common.scrollTo)(suggestionContainer, selSuggestion);
+      } else {
+        // Hack: Virtualizer not having options order properly all the time, so scrollToIndex method used here.
+        if (isVirtualizerEnabled && !!this.virtualizerMethods) {
+          this.virtualizerMethods.scrollToIndex(hoverIndex, 'auto', {
+            speed: 0,
+            duration: 0,
+            onComplete: function onComplete() {
+              (0, _Common.scrollTo)(suggestionContainer, selSuggestion);
+            }
+          });
+        }
+      }
+    }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
+    value: function componentDidUpdate(prevProps) {
       var _this2 = this;
 
       var _this$state = this.state,
-          hoverIndex = _this$state.hoverIndex,
           searchStr = _this$state.searchStr,
           selectedValueIndex = _this$state.selectedValueIndex;
       var _this$props = this.props,
@@ -250,28 +280,15 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           needSearch = _this$props.needSearch,
           onSearch = _this$props.onSearch,
           isPopupOpen = _this$props.isPopupOpen,
-          isSearchClearOnClose = _this$props.isSearchClearOnClose,
-          isVirtualizerEnabled = _this$props.isVirtualizerEnabled;
+          isSearchClearOnClose = _this$props.isSearchClearOnClose;
 
-      if (isVirtualizerEnabled && !!this.virtualizerMethods) {
-        var position = prevState.hoverIndex > hoverIndex ? 'top' : 'bottom';
-        this.virtualizerMethods.getElementVisiblePercentage(hoverIndex) < 50 && this.virtualizerMethods.scrollToIndex(hoverIndex, position);
-      } else {
-        var suggestionContainer = this.suggestionContainer,
-            optionsOrder = this.optionsOrder;
-        var hoverId = (0, _Common.getIsEmptyValue)(optionsOrder[hoverIndex]) ? '' : optionsOrder[hoverIndex];
-        var selSuggestion = this["suggestion_".concat(hoverId)];
-        isPopupOpen && (0, _Common.scrollTo)(suggestionContainer, selSuggestion);
+      if (isPopupOpen) {
+        this.scrollToHighlightedIndex();
       }
 
       if (prevProps.isPopupOpen !== isPopupOpen) {
         if (isPopupOpen) {
           onDropBoxOpen && this.handleFetchOptions(onDropBoxOpen, searchStr);
-
-          if (isVirtualizerEnabled && !!this.virtualizerMethods) {
-            this.virtualizerMethods.getElementVisiblePercentage(hoverIndex) < 50 && this.virtualizerMethods.scrollToIndex(hoverIndex);
-          }
-
           setTimeout(function () {
             _this2.searchInput && _this2.searchInput.focus({
               preventScroll: true
@@ -323,13 +340,17 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           textField = props.textField,
           allowValueFallback = props.allowValueFallback,
           _props$customProps = props.customProps,
-          customProps = _props$customProps === void 0 ? _dropDownUtils.dummyObj : _props$customProps;
+          customProps = _props$customProps === void 0 ? _dropDownUtils.dummyObj : _props$customProps,
+          searchFields = props.searchFields,
+          secondaryField = props.secondaryField;
       var _customProps$listItem = customProps.listItemProps,
           listItemProps = _customProps$listItem === void 0 ? _dropDownUtils.dummyObj : _customProps$listItem;
       return this.formatOptions({
         options: options,
         valueField: valueField,
         textField: textField,
+        secondaryField: secondaryField,
+        searchFields: searchFields,
         listItemProps: listItemProps,
         allowValueFallback: allowValueFallback
       });
@@ -488,6 +509,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
     value: function handleFilterSuggestions() {
       var _this$props5 = this.props,
           needLocalSearch = _this$props5.needLocalSearch,
+          searchFields = _this$props5.searchFields,
           _this$props5$excludeO = _this$props5.excludeOptions,
           excludeOptions = _this$props5$excludeO === void 0 ? dummyArray : _this$props5$excludeO;
       var _this$state3 = this.state,
@@ -505,6 +527,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         options: options,
         selectedOptions: excludeOptions,
         searchStr: searchStr,
+        searchFields: searchFields,
         needSearch: needLocalSearch
       }),
           suggestions = _this$getFilterSugges.suggestions,
@@ -764,6 +787,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           getTargetRef = _this$props11.getTargetRef,
           getContainerRef = _this$props11.getContainerRef,
           removeClose = _this$props11.removeClose,
+          isAnimate = _this$props11.isAnimate,
           isPopupOpen = _this$props11.isPopupOpen,
           isPopupReady = _this$props11.isPopupReady,
           animationStyle = _this$props11.animationStyle,
@@ -953,7 +977,8 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           boxPosition: position || "".concat(defaultDropBoxPosition),
           getRef: getContainerRef,
           isActive: isPopupReady,
-          isAnimate: true,
+          isAnimate: isAnimate && !isVirtualizerEnabled // Note: Virtualizer gets element height at mount itself which causes issue with options height
+          ,
           isArrow: false,
           onClick: removeClose,
           needResponsive: needResponsive,

package/lib/Select/SelectWithAvatar.js

@@ -51,6 +51,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -99,13 +101,17 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           valueField = props.valueField,
           textField = props.textField,
           imageField = props.imageField,
-          allowValueFallback = props.allowValueFallback;
+          secondaryField = props.secondaryField,
+          allowValueFallback = props.allowValueFallback,
+          searchFields = props.searchFields;
       return this.formatOptions({
         options: options,
         valueField: valueField,
         textField: textField,
         imageField: imageField,
+        secondaryField: secondaryField,
         optionType: 'avatar',
+        searchFields: searchFields,
         allowValueFallback: allowValueFallback
       });
     }
@@ -215,6 +221,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           needEffect = _this$props.needEffect,
           isLoading = _this$props.isLoading,
           dataSelectorId = _this$props.dataSelectorId,
+          customProps = _this$props.customProps,
           getTargetRef = _this$props.getTargetRef;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
@@ -236,6 +243,9 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
 
       var setAriaId = this.getNextAriaId();
       var ariaErrorId = this.getNextAriaId();
+      var TextBoxProps = customProps.TextBoxProps,
+          DropdownSearchTextBoxProps = customProps.DropdownSearchTextBoxProps,
+          SuggestionsProps = customProps.SuggestionsProps;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_MultiSelectModule["default"].wrapper, "  ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : '', " ").concat(className ? className : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
@@ -267,7 +277,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
         flexible: true,
         className: _MultiSelectModule["default"].textBox,
         dataId: "".concat(dataId, "_textBox")
-      }, /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_TextBox["default"], _extends({
         a11y: {
           ariaActivedescendant: selectedId,
           role: 'combobox',
@@ -296,7 +306,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
         borderColor: borderColor,
         htmlId: htmlId,
         autoComplete: false
-      }))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
+      }, TextBoxProps)))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
         query: this.responsiveFunc,
         responsiveId: "Helmet"
       }, function (_ref4) {
@@ -327,7 +337,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           onScroll: _this2.handleScroll
         }, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement("div", {
           className: "".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size])
-        }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
+        }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({
           inputRef: _this2.searchInputRef,
           maxLength: maxLength,
           onChange: _this2.handleSearch,
@@ -343,7 +353,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
             ariaDescribedby: ariaErrorId
           },
           autoComplete: false
-        }))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
+        }, DropdownSearchTextBoxProps)))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
           shrink: true,
           customClass: !tabletMode && dropBoxSize ? _MultiSelectModule["default"][dropBoxSize] : '',
           eleRef: _this2.suggestionContainerRef
@@ -354,7 +364,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           a11y: {
             role: 'heading'
           }
-        })) : null, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+        })) : null, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
           dataId: "".concat(dataId, "_Options"),
           activeId: selectedId,
           suggestions: suggestions,
@@ -371,7 +381,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
             ariaParentRole: 'listbox',
             role: 'option'
           }
-        }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+        }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           isLoading: isFetchingOptions,
           options: options,
           searchString: searchStr,

package/lib/Select/SelectWithIcon.js

@@ -37,6 +37,8 @@ var _Loader = _interopRequireDefault(require("@zohodesk/svg/lib/Loader/Loader"))
 
 var _Common = require("../utils/Common.js");
 
+var _dropDownUtils = require("../utils/dropDownUtils.js");
+
 var _SelectModule = _interopRequireDefault(require("./Select.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -257,11 +259,16 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
       var datas = [];
       var _this$props3 = this.props,
           options = _this$props3.options,
-          valueKey = _this$props3.valueKey;
+          valueKey = _this$props3.valueKey,
+          searchFields = _this$props3.searchFields;
 
       if (options.length) {
+        if (!searchFields.includes(valueKey)) {
+          searchFields.push(valueKey);
+        }
+
         datas = options.filter(function (obj) {
-          return obj[valueKey].toLowerCase().includes(searchValue.toLowerCase().trim());
+          return (0, _dropDownUtils.isObjectContainsSearchString)(searchFields, (0, _Common.getSearchString)(searchValue), obj);
         });
       }
 
@@ -401,6 +408,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           targetOffset = _this$props7.targetOffset,
           isRestrictScroll = _this$props7.isRestrictScroll,
           valueKey = _this$props7.valueKey,
+          secondaryValueKey = _this$props7.secondaryValueKey,
           idKey = _this$props7.idKey,
           needListBorder = _this$props7.needListBorder,
           needTick = _this$props7.needTick,
@@ -440,7 +448,8 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           _customProps$Dropdown = customProps.DropdownSearchTextBoxProps,
           DropdownSearchTextBoxProps = _customProps$Dropdown === void 0 ? {} : _customProps$Dropdown,
           _customProps$TextBoxI = customProps.TextBoxIconProps,
-          TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI;
+          TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI,
+          ListItemProps = customProps.ListItemProps;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : ''),
         "data-title": isDisabled ? title : null,
@@ -573,9 +582,10 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           var iconName = options.iconName,
               iconSize = options.iconSize,
               iconColor = options.iconColor;
-          return /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
+          return /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], _extends({
             key: options[idKey],
             value: options[valueKey],
+            secondaryValue: options[secondaryValueKey],
             size: "medium",
             onClick: _this5.handleChange,
             id: options[idKey],
@@ -597,7 +607,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
               ariaSelected: selectedId === options[idKey],
               ariaLabel: options[valueKey]
             }
-          });
+          }, ListItemProps));
         })) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           isLoading: isFetchingOptions,
           options: options,

package/lib/Select/props/defaultProps.js

@@ -40,6 +40,7 @@ var Select_defaultProps = {
   boxSize: 'default',
   needListBorder: false,
   needCloseOnSelect: true,
+  isAnimate: true,
   isParentBased: true,
   isSearchClearOnClose: true,
   i18nKeys: {},
@@ -112,6 +113,7 @@ var SelectWithAvatar_defaultProps = {
   isAbsolutePositioningNeeded: true,
   isRestrictScroll: false,
   i18nKeys: {},
+  customProps: {},
   needEffect: true,
   isLoading: false
 };
@@ -125,5 +127,5 @@ var SelectWithIcon_defaultProps = (_SelectWithIcon_defau = {
   needListBorder: false,
   needSearch: false,
   boxSize: 'default'
-}, _defineProperty(_SelectWithIcon_defau, "needListBorder", false), _defineProperty(_SelectWithIcon_defau, "needCloseOnSelect", true), _defineProperty(_SelectWithIcon_defau, "borderColor", 'default'), _defineProperty(_SelectWithIcon_defau, "needTick", true), _defineProperty(_SelectWithIcon_defau, "searchBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "size", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxSize", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxVariant", 'default'), _defineProperty(_SelectWithIcon_defau, "dataId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dataSelectorId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dropBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "needIcon", true), _defineProperty(_SelectWithIcon_defau, "iconSize", '14'), _defineProperty(_SelectWithIcon_defau, "i18nKeys", {}), _defineProperty(_SelectWithIcon_defau, "isLoading", false), _defineProperty(_SelectWithIcon_defau, "isAbsolutePositioningNeeded", true), _defineProperty(_SelectWithIcon_defau, "isRestrictScroll", false), _defineProperty(_SelectWithIcon_defau, "customProps", {}), _SelectWithIcon_defau);
+}, _defineProperty(_SelectWithIcon_defau, "needListBorder", false), _defineProperty(_SelectWithIcon_defau, "needCloseOnSelect", true), _defineProperty(_SelectWithIcon_defau, "borderColor", 'default'), _defineProperty(_SelectWithIcon_defau, "needTick", true), _defineProperty(_SelectWithIcon_defau, "searchBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "size", 'medium'), _defineProperty(_SelectWithIcon_defau, "searchFields", []), _defineProperty(_SelectWithIcon_defau, "textBoxSize", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxVariant", 'default'), _defineProperty(_SelectWithIcon_defau, "dataId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dataSelectorId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dropBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "needIcon", true), _defineProperty(_SelectWithIcon_defau, "iconSize", '14'), _defineProperty(_SelectWithIcon_defau, "i18nKeys", {}), _defineProperty(_SelectWithIcon_defau, "isLoading", false), _defineProperty(_SelectWithIcon_defau, "isAbsolutePositioningNeeded", true), _defineProperty(_SelectWithIcon_defau, "isRestrictScroll", false), _defineProperty(_SelectWithIcon_defau, "customProps", {}), _SelectWithIcon_defau);
 exports.SelectWithIcon_defaultProps = SelectWithIcon_defaultProps;

package/lib/Select/props/propTypes.js

@@ -44,6 +44,7 @@ var Select_propTypes = {
     noMoreText: _propTypes["default"].string,
     searchEmptyText: _propTypes["default"].string
   }),
+  isAnimate: _propTypes["default"].bool,
   isDefaultSelectValue: _propTypes["default"].bool,
   isDisabled: _propTypes["default"].bool,
   isNextOptions: _propTypes["default"].bool,
@@ -80,6 +81,8 @@ var Select_propTypes = {
   searchBoxSize: _propTypes["default"].string,
   searchDebounceTime: _propTypes["default"].number,
   searchEmptyMessage: _propTypes["default"].string,
+  searchFields: _propTypes["default"].arrayOf(_propTypes["default"].string),
+  secondaryField: _propTypes["default"].string,
   selectedValue: _propTypes["default"].oneOfType([_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]), _propTypes["default"].shape({
     id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
     text: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
@@ -303,6 +306,7 @@ var SelectWithIcon_propTypes = {
   removeClose: _propTypes["default"].func,
   searchBoxPlaceHolder: _propTypes["default"].string,
   searchEmptyMessage: _propTypes["default"].string,
+  secondaryValueKey: _propTypes["default"].string,
   selectedId: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
   selectedValue: _propTypes["default"].string,
   size: _propTypes["default"].oneOf(['small', 'medium']),
@@ -317,6 +321,7 @@ var SelectWithIcon_propTypes = {
   className: _propTypes["default"].string,
   needBorder: _propTypes["default"].bool,
   searchBoxSize: _propTypes["default"].string,
+  searchFields: _propTypes["default"].arrayOf(_propTypes["default"].string),
   needResponsive: _propTypes["default"].bool,
   boxSize: _propTypes["default"].string,
   emptyMessage: _propTypes["default"].string,
@@ -327,6 +332,7 @@ var SelectWithIcon_propTypes = {
   customProps: _propTypes["default"].shape({
     TextBoxProps: _propTypes["default"].object,
     DropdownSearchTextBoxProps: _propTypes["default"].object,
+    SuggestionsProps: _propTypes["default"].object,
     TextBoxIconProps: _propTypes["default"].object
   })
 };