@zohodesk/components 1.0.0-temp-230.1 → 1.0.0-temp-234

package/lib/MultiSelect/props/propTypes.js

@@ -50,17 +50,20 @@ var MultiSelect_propTypes = {
   disableAction: _propTypes["default"].bool,
   dropBoxSize: _propTypes["default"].oneOf(['small', 'medium', 'large']),
   emptyMessage: _propTypes["default"].string.isRequired,
+  isVirtualizerEnabled: _propTypes["default"].bool,
   getContainerRef: _propTypes["default"].func,
   getNextOptions: _propTypes["default"].func,
   getPublicMethods: _propTypes["default"].func,
   getRef: _propTypes["default"].func,
   getTargetRef: _propTypes["default"].func,
   i18nKeys: _propTypes["default"].shape({
+    searchText: _propTypes["default"].string,
     clearText: _propTypes["default"].string,
     loadingText: _propTypes["default"].string,
     emptyText: _propTypes["default"].string,
     noMoreText: _propTypes["default"].string,
-    searchEmptyText: _propTypes["default"].string
+    searchEmptyText: _propTypes["default"].string,
+    limitReachedMessage: _propTypes["default"].string
   }),
   a11y: _propTypes["default"].shape({
     clearLabel: _propTypes["default"].string
@@ -136,7 +139,7 @@ var MultiSelect_propTypes = {
   allowValueFallback: _propTypes["default"].bool,
   renderCustomClearComponent: _propTypes["default"].func,
   renderCustomToggleIndicator: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node]),
-  renderCustomSelectedValue: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node])
+  limit: _propTypes["default"].number
 };
 exports.MultiSelect_propTypes = MultiSelect_propTypes;
 var MultiSelectHeader_propTypes = {
@@ -178,10 +181,7 @@ var SelectedOptions_propTypes = {
   size: _propTypes["default"].oneOf(['medium', 'xmedium']),
   palette: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
-  isDisabled: _propTypes["default"].bool,
-  isPopupReady: _propTypes["default"].bool,
-  isPopupOpen: _propTypes["default"].bool,
-  renderCustomSelectedValue: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node])
+  limit: _propTypes["default"].number
 };
 exports.SelectedOptions_propTypes = SelectedOptions_propTypes;
 var Suggestions_propTypes = {
@@ -193,6 +193,9 @@ var Suggestions_propTypes = {
   avatarPalette: _propTypes["default"].string,
   className: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
+  isVirtualizerEnabled: _propTypes["default"].bool,
+  setVirtualizerContainerRefFunction: _propTypes["default"].func,
+  getVirtualizerPublicMethods: _propTypes["default"].func,
   getRef: _propTypes["default"].func,
   hoverId: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
   hoverOption: _propTypes["default"].number,
@@ -213,7 +216,8 @@ var Suggestions_propTypes = {
     optionType: _propTypes["default"].string,
     listItemProps: _propTypes["default"].object
   })),
-  renderBeforeChildren: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].node])
+  limit: _propTypes["default"].number,
+  limitReachedMessage: _propTypes["default"].string
 };
 exports.Suggestions_propTypes = Suggestions_propTypes;
 var AdvancedGroupMultiSelect_propTypes = (_AdvancedGroupMultiSe = {
@@ -232,7 +236,8 @@ var AdvancedGroupMultiSelect_propTypes = (_AdvancedGroupMultiSe = {
     loadingText: _propTypes["default"].string,
     emptyText: _propTypes["default"].string,
     noMoreText: _propTypes["default"].string,
-    searchEmptyText: _propTypes["default"].string
+    searchEmptyText: _propTypes["default"].string,
+    limitReachedMessage: _propTypes["default"].string
   }),
   a11y: _propTypes["default"].shape({
     clearLabel: _propTypes["default"].string
@@ -284,7 +289,7 @@ 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, "allowValueFallback", _propTypes["default"].bool), _AdvancedGroupMultiSe);
+}, _defineProperty(_AdvancedGroupMultiSe, "dataSelectorId", _propTypes["default"].string), _defineProperty(_AdvancedGroupMultiSe, "isFocus", _propTypes["default"].bool), _defineProperty(_AdvancedGroupMultiSe, "allowValueFallback", _propTypes["default"].bool), _defineProperty(_AdvancedGroupMultiSe, "limit", _propTypes["default"].number), _AdvancedGroupMultiSe);
 exports.AdvancedGroupMultiSelect_propTypes = AdvancedGroupMultiSelect_propTypes;
 
 var AdvancedMultiSelect_propTypes = _objectSpread(_objectSpread({}, MultiSelect_propTypes), {}, {
@@ -299,70 +304,22 @@ var AdvancedMultiSelect_propTypes = _objectSpread(_objectSpread({}, MultiSelect_
   selectedOptions: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])).isRequired,
   selectedOptionsLimit: _propTypes["default"].number,
   getSelectedOptionDetails: _propTypes["default"].func,
-  emptyMessage: _propTypes["default"].string.isRequired,
-  isDisabled: _propTypes["default"].bool,
-  isReadOnly: _propTypes["default"].bool,
-  needLocalSearch: _propTypes["default"].bool,
-  needSelectAll: _propTypes["default"].bool,
-  onChange: _propTypes["default"].func.isRequired,
-  searchEmptyMessage: _propTypes["default"].string,
-  placeHolder: _propTypes["default"].string,
-  selectAllText: _propTypes["default"].string,
-  textField: _propTypes["default"].string,
-  valueField: _propTypes["default"].string,
   imageField: _propTypes["default"].string,
   iconName: _propTypes["default"].string,
   prefixText: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
   //For grouping multiSelect
   optionType: _propTypes["default"].oneOf(['default', 'avatar', 'icon']),
-  needEffect: _propTypes["default"].bool,
   secondaryField: _propTypes["default"].string,
-  animationStyle: _propTypes["default"].string,
-  defaultDropBoxPosition: _propTypes["default"].oneOf(['bottom', 'top', 'left', 'right']),
-  dropBoxSize: _propTypes["default"].oneOf(['small', 'medium', 'large']),
-  isAnimate: _propTypes["default"].bool,
-  size: _propTypes["default"].oneOf(['medium', 'xmedium']),
-  textBoxSize: _propTypes["default"].oneOf(['small', 'medium', 'xmedium']),
-  title: _propTypes["default"].string,
-  variant: _propTypes["default"].string,
   dataIdClearIcon: _propTypes["default"].string,
   dataIdLoading: _propTypes["default"].string,
   dataIdMultiSelectComp: _propTypes["default"].string,
   dataIdSelectAllEle: _propTypes["default"].string,
-
-  /**** Popup Props ****/
-  isPopupOpen: _propTypes["default"].bool,
-  isPopupReady: _propTypes["default"].bool,
-  togglePopup: _propTypes["default"].func,
-  getContainerRef: _propTypes["default"].func,
-  position: _propTypes["default"].string,
-  removeClose: _propTypes["default"].func,
   listItemSize: _propTypes["default"].oneOf(['small', 'medium', 'large']),
-  needBorder: _propTypes["default"].bool,
-  htmlId: _propTypes["default"].string,
-  i18nKeys: _propTypes["default"].shape({
-    clearText: _propTypes["default"].string,
-    loadingText: _propTypes["default"].string,
-    emptyText: _propTypes["default"].string,
-    noMoreText: _propTypes["default"].string,
-    searchEmptyText: _propTypes["default"].string
-  }),
-  a11y: _propTypes["default"].shape({
-    clearLabel: _propTypes["default"].string
-  }),
-  borderColor: _propTypes["default"].oneOf(['transparent', 'default', 'dark']),
-  isBoxPaddingNeed: _propTypes["default"].bool,
-  isSearchClearOnSelect: _propTypes["default"].bool,
-  disabledOptions: _propTypes["default"].arrayOf(_propTypes["default"].string),
-  getFooter: _propTypes["default"].func,
   customProps: _propTypes["default"].shape({
     SuggestionsProps: _propTypes["default"].object,
     DropBoxProps: _propTypes["default"].object
   }),
-  isLoading: _propTypes["default"].bool,
-  dataSelectorId: _propTypes["default"].string,
-  customClass: _propTypes["default"].object,
-  isFocus: _propTypes["default"].bool
+  customClass: _propTypes["default"].object
 });
 
 exports.AdvancedMultiSelect_propTypes = AdvancedMultiSelect_propTypes;

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

@@ -37,8 +37,6 @@ var _CustomResponsive = require("../Responsive/CustomResponsive");
 
 var _Loader = _interopRequireDefault(require("@zohodesk/svg/lib/Loader/Loader"));
 
-var _InputFieldLine = _interopRequireDefault(require("../shared/InputFieldLine/InputFieldLine.js"));
-
 var _dropDownUtils = require("../utils/dropDownUtils");
 
 var _Common = require("../utils/Common.js");
@@ -135,7 +133,6 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
 
     _this.state = {
       selected: selected,
-      selectedValueDetails: selectedValueDetails,
       options: allOptions,
       optionsNormalize: normalizedAllOptions,
       hoverIndex: hoverIndex,
@@ -171,6 +168,8 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
     _this.handleAddNewOption = _this.handleAddNewOption.bind(_assertThisInitialized(_this));
     _this.handleExposePopupHandlers = _this.handleExposePopupHandlers.bind(_assertThisInitialized(_this));
     _this.handleGetAddNewOptionText = _this.handleGetAddNewOptionText.bind(_assertThisInitialized(_this));
+    _this.getVirtualizerPublicMethods = _this.getVirtualizerPublicMethods.bind(_assertThisInitialized(_this));
+    _this.setSuggestionsVirtualizerContainerRefFunction = _this.setSuggestionsVirtualizerContainerRefFunction.bind(_assertThisInitialized(_this));
     _this.valueInputTypeString = '';
     _this.valueInputSearchString = '';
     _this.autoSelectSuggestions = [];
@@ -230,7 +229,6 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         options: allOptions,
         optionsNormalize: normalizedAllOptions,
         selected: selected,
-        selectedValueDetails: selectedValueDetails,
         hoverIndex: oldHoverIndex ? oldHoverIndex : hoverIndex,
         selectedId: selectedId,
         selectedValueIndex: hoverIndex
@@ -238,11 +236,9 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
+    value: function componentDidUpdate(prevProps, prevState) {
       var _this2 = this;
 
-      var suggestionContainer = this.suggestionContainer,
-          optionsOrder = this.optionsOrder;
       var _this$state = this.state,
           hoverIndex = _this$state.hoverIndex,
           searchStr = _this$state.searchStr,
@@ -254,14 +250,28 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           needSearch = _this$props.needSearch,
           onSearch = _this$props.onSearch,
           isPopupOpen = _this$props.isPopupOpen,
-          isSearchClearOnClose = _this$props.isSearchClearOnClose;
-      var hoverId = (0, _Common.getIsEmptyValue)(optionsOrder[hoverIndex]) ? '' : optionsOrder[hoverIndex];
-      var selSuggestion = this["suggestion_".concat(hoverId)];
-      isPopupOpen && (0, _Common.scrollTo)(suggestionContainer, selSuggestion);
+          isSearchClearOnClose = _this$props.isSearchClearOnClose,
+          isVirtualizerEnabled = _this$props.isVirtualizerEnabled;
+
+      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 (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
@@ -313,13 +323,17 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           textField = props.textField,
           allowValueFallback = props.allowValueFallback,
           _props$customProps = props.customProps,
-          customProps = _props$customProps === void 0 ? {} : _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 ? {} : _customProps$listItem;
+          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
       });
@@ -478,6 +492,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,
@@ -495,6 +510,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         options: options,
         selectedOptions: excludeOptions,
         searchStr: searchStr,
+        searchFields: searchFields,
         needSearch: needLocalSearch
       }),
           suggestions = _this$getFilterSugges.suggestions,
@@ -578,6 +594,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
     key: "suggestionContainerRef",
     value: function suggestionContainerRef(el) {
       this.suggestionContainer = el;
+      typeof this.setSuggestionsVirtualizerRef === 'function' && this.setSuggestionsVirtualizerRef(el);
     }
   }, {
     key: "suggestionItemRef",
@@ -725,6 +742,17 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         onAddNewOption: this.handleAddNewOption
       });
     }
+  }, {
+    key: "getVirtualizerPublicMethods",
+    value: function getVirtualizerPublicMethods(methods) {
+      this.virtualizerMethods = methods;
+    }
+  }, {
+    key: "setSuggestionsVirtualizerContainerRefFunction",
+    value: function setSuggestionsVirtualizerContainerRefFunction(refFunc) {
+      this.setSuggestionsVirtualizerRef = refFunc;
+      this.suggestionContainer && refFunc(this.suggestionContainer);
+    }
   }, {
     key: "render",
     value: function render() {
@@ -781,9 +809,9 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           targetOffset = _this$props11.targetOffset,
           isRestrictScroll = _this$props11.isRestrictScroll,
           dropBoxPortalId = _this$props11.dropBoxPortalId,
+          isVirtualizerEnabled = _this$props11.isVirtualizerEnabled,
           renderCustomToggleIndicator = _this$props11.renderCustomToggleIndicator,
-          renderCustomSearchClearComponent = _this$props11.renderCustomSearchClearComponent,
-          renderCustomSelectedValue = _this$props11.renderCustomSelectedValue;
+          renderCustomSearchClearComponent = _this$props11.renderCustomSearchClearComponent;
       var _i18nKeys = i18nKeys,
           TextBoxIcon_i18n = _i18nKeys.TextBoxIcon_i18n,
           _i18nKeys$TextBox_all = _i18nKeys.TextBox_ally_label,
@@ -795,7 +823,6 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
       var _this$state4 = this.state,
           hoverIndex = _this$state4.hoverIndex,
           selected = _this$state4.selected,
-          selectedValueDetails = _this$state4.selectedValueDetails,
           searchStr = _this$state4.searchStr,
           isFetchingOptions = _this$state4.isFetchingOptions,
           selectedId = _this$state4.selectedId,
@@ -821,31 +848,7 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         ref: getTargetRef,
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
         "data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId)
-      }, renderCustomSelectedValue ? /*#__PURE__*/_react["default"].createElement(_InputFieldLine["default"], {
-        isActive: isPopupReady,
-        border: needBorder ? 'bottom' : 'none',
-        size: size,
-        borderColor: borderColor,
-        isDisabled: isDisabled,
-        isReadOnly: isReadOnly,
-        hasPadding: true
-      }, typeof renderCustomSelectedValue == 'function' ? renderCustomSelectedValue({
-        isDisabled: isDisabled,
-        isPopupOpen: isPopupOpen,
-        isReadOnly: isReadOnly,
-        isActive: isPopupReady,
-        size: size,
-        option: selectedValueDetails[selectedId] || {},
-        selectedId: selectedId,
-        placeHolder: placeHolder,
-        htmlId: htmlId,
-        maxLength: maxLength,
-        ref: this.valueInputRef,
-        onFocus: this.handleSelectFocus,
-        onKeyDown: this.handleKeyDown,
-        onKeyPress: this.handleValueInputChange,
-        ariaControlsId: setAriaId
-      }) : renderCustomSelectedValue) : needSelectDownIcon ? /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({
+      }, needSelectDownIcon ? /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({
         a11y: {
           role: 'Menuitem',
           ariaLabel: TextBox_ally_label,
@@ -1005,7 +1008,11 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           customClass: !tabletMode && dropBoxSize ? _SelectModule["default"][dropBoxSize] : '',
           eleRef: _this7.suggestionContainerRef
         }, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
+          key: searchStr.trim(),
           activeId: selectedId,
+          isVirtualizerEnabled: isVirtualizerEnabled,
+          getVirtualizerPublicMethods: _this7.getVirtualizerPublicMethods,
+          setVirtualizerContainerRefFunction: _this7.setSuggestionsVirtualizerContainerRefFunction,
           suggestions: suggestions,
           getRef: _this7.suggestionItemRef,
           hoverOption: hoverIndex,

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,12 +101,14 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           valueField = props.valueField,
           textField = props.textField,
           imageField = props.imageField,
+          secondaryField = props.secondaryField,
           allowValueFallback = props.allowValueFallback;
       return this.formatOptions({
         options: options,
         valueField: valueField,
         textField: textField,
         imageField: imageField,
+        secondaryField: secondaryField,
         optionType: 'avatar',
         allowValueFallback: allowValueFallback
       });
@@ -215,6 +219,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 +241,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 +275,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 +304,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 +335,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 +351,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 +362,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 +379,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

@@ -261,7 +261,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
 
       if (options.length) {
         datas = options.filter(function (obj) {
-          return obj[valueKey].toLowerCase().includes(searchValue.toLowerCase());
+          return obj[valueKey].toLowerCase().includes(searchValue.toLowerCase().trim());
         });
       }
 
@@ -401,6 +401,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 +441,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 +575,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 +600,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/__tests__/Select.spec.js

@@ -1393,18 +1393,6 @@ describe('Select dataId snapshot - ', function () {
 
     _userEvent["default"].click(getByRole(selectInputRole));
 
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('Should render with renderCustomSelectedValue', function () {
-    var _render75 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-      options: options,
-      selectedValue: "Option 2",
-      renderCustomSelectedValue: function renderCustomSelectedValue() {
-        return /*#__PURE__*/_react["default"].createElement("div", null, " Select Custom Option 2");
-      }
-    })),
-        asFragment = _render75.asFragment;
-
     expect(asFragment()).toMatchSnapshot();
   });
 });

package/lib/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap

@@ -14,10 +14,10 @@ exports[`GroupSelect rendering the defult props 1`] = `
       data-test-id="GroupSelect"
     >
       <div
-        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container   flex rowdir"
-        data-id="GroupSelect_textBox"
+        class="container effect    flex rowdir"
+        data-id="containerComponent"
         data-selector-id="textBoxIcon"
-        data-test-id="GroupSelect_textBox"
+        data-test-id="containerComponent"
       >
         <div
           class="grow basis shrinkOff"
@@ -80,6 +80,9 @@ exports[`GroupSelect rendering the defult props 1`] = `
             </div>
           </div>
         </div>
+        <div
+          class="line borderColor_default "
+        />
       </div>
     </div>
   </div>